/* ==========================================================================
   style.css — Sheetal Banana Supplier, home page
   Loaded after common/css/common.css so it can build on the shared tokens.
   Every rule is scoped to its ntc- section class.
   ========================================================================== */

/* ==========================================================================
   Header
   ========================================================================== */
.ntc-header {
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 50;
}

.ntc-header .inner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 var(--space-md);
  padding: 0 28px;
  min-height: 80px;
  border-radius: var(--radius-md);
  /* Deep enough that the white wordmark and nav stay readable while the
     fixed header passes over the cream and white sections */
  background: rgba(20, 17, 12, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Logo lockup — mark + wordmark. The mark carries the brand colours, the
   wordmark stays live text so it renders in the Puvi/serif stack. */
.ntc-header-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.ntc-header-logo img {
  width: 44px;
  height: 44px;
}

.ntc-header-logo-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ntc-header-logo-name {
  font-family: var(--font-heading);
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.6px;
  color: var(--color-white);
}

.ntc-header-logo-tag {
  font-weight: var(--weight-medium);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--color-gold);
}

.ntc-header-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.ntc-header-nav a {
  display: flex;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.ntc-header-nav a:hover,
.ntc-header-nav a:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
}

.ntc-header-nav .is-active {
  background: var(--color-white);
  color: #000000;
}

.ntc-header-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
}

/* The bars carry an   so they are not empty elements — hidden overflow
   keeps that character from affecting the 2px bar. */
.ntc-header-toggle span {
  display: flex;
  overflow: hidden;
  height: 2px;
  border-radius: 2px;
  background: var(--color-white);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Open state turns the three bars into a close (X) icon. Driven off
   aria-expanded, which the script already maintains, so the visual state
   can never drift from the state announced to screen readers. */
.ntc-header-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(7px) rotate(45deg);
}

.ntc-header-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.ntc-header-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Banner
   ========================================================================== */
.ntc-banner {
  position: relative;
  overflow: hidden;
  background: var(--color-dark);
}

.ntc-banner-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ntc-banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(20, 17, 12, 0.88) 0%, rgba(20, 17, 12, 0.6) 55%, rgba(20, 17, 12, 0.3) 100%);
}

.ntc-banner .inner-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-md);
  padding: 160px var(--space-md) var(--space-2xl);
}

.ntc-banner-action {
  display: flex;
}

.ntc-banner h1 {
  max-width: 820px;
  font-family: var(--font-heading);
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -1.3px;
  color: var(--color-white);
}

.ntc-banner p {
  max-width: 640px;
  font-size: 21px;
  color: rgba(255, 255, 255, 0.82);
}

.ntc-banner-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xs);
}

.ntc-banner-facts span {
  font-size: 16px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
}

/* ==========================================================================
   Trust / Stats
   ========================================================================== */
.ntc-trust {
  background: var(--color-white);
}

.ntc-trust .inner-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: 100px var(--space-md);
}

.ntc-trust h2 {
  font-family: var(--font-heading);
  font-size: 48px;
  line-height: 1.15;
  text-align: center;
  color: var(--color-heading);
}

.ntc-trust p {
  max-width: 900px;
  margin: 0 auto;
  font-size: 18px;
  text-align: center;
  color: var(--color-text);
}

.ntc-trust-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  width: 100%;
  margin-top: var(--space-md);
}

.ntc-trust-stats li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 calc(25% - var(--space-md));
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--color-cream);
  box-shadow: var(--shadow-sm);
}

.ntc-trust-stats span {
  font-weight: var(--weight-semibold);
  font-size: 20px;
  line-height: 1.3;
  color: var(--color-heading);
}

/* ==========================================================================
   Banana Varieties
   ========================================================================== */
.ntc-varieties .inner-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 100px var(--space-md);
}

.ntc-varieties small {
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 2.8px;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-gold);
}

.ntc-varieties h2 {
  font-family: var(--font-heading);
  font-size: 44px;
  line-height: 1.2;
  text-align: center;
  color: var(--color-heading);
}

.ntc-varieties .inner-content>p {
  max-width: 820px;
  margin: 0 auto var(--space-lg);
  font-size: 18px;
  text-align: center;
  color: var(--color-text);
}

.ntc-varieties-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.ntc-varieties-list li {
  display: flex;
  flex-direction: column;
  flex: 0 1 calc((100% - 3 * var(--space-md)) / 4);
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid rgba(47, 42, 31, 0.08);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

/* Photos are tall bunch shots — a centred 4:3 crop keeps the bunch in frame */
.ntc-varieties-list img {
  aspect-ratio: 4 / 4;
  object-fit: cover;
  object-position: center;
  background: var(--color-cream);
}

.ntc-variety-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  padding: var(--space-md);
}

.ntc-varieties-list h3 {
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.25;
  color: var(--color-heading);
}

.ntc-varieties-list h3 span {
  display: block;
  margin-top: 4px;
  font-weight: var(--weight-regular);
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-olive);
}

.ntc-varieties-list p {
  font-size: 15px;
  color: var(--color-text);
}

.ntc-variety-detail>span {
  margin-top: auto;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-leaf-soft);
  font-weight: var(--weight-medium);
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-leaf);
}

/* ==========================================================================
   We Supply To
   ========================================================================== */
.ntc-supply {
  background: var(--color-dark);
}

.ntc-supply .inner-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 100px var(--space-md);
}

.ntc-supply small {
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 2.8px;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-gold);
}

.ntc-supply h2 {
  margin-bottom: var(--space-md);
  font-family: var(--font-heading);
  font-size: 44px;
  line-height: 1.2;
  text-align: center;
  color: var(--color-white);
}

.ntc-supply-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.ntc-supply-list li {
  display: flex;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ntc-supply-list span {
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-white);
}

/* ==========================================================================
   Banana Leaves
   ========================================================================== */
.ntc-leaf .inner-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
  padding: 100px var(--space-md);
}

.ntc-leaf-media {
  flex: 1 1 calc(50% - 24px);
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.ntc-leaf-media img {
  width: 100%;
  height: 440px;
  object-fit: cover;
}

.ntc-leaf-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1 1 calc(50% - 24px);
}

.ntc-leaf-detail small {
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: var(--color-leaf);
}

.ntc-leaf-detail h2 {
  font-family: var(--font-heading);
  font-size: 44px;
  line-height: 1.2;
  color: var(--color-heading);
}

.ntc-leaf-detail p {
  font-size: 17px;
  color: var(--color-text);
}

.ntc-leaf-detail ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.ntc-leaf-detail li {
  padding-left: 20px;
  position: relative;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-strong);
}

.ntc-leaf-detail li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--color-olive);
}

/* ==========================================================================
   Why Choose Us
   ========================================================================== */
.ntc-choose {
  background: var(--color-white);
}

.ntc-choose .inner-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: 100px var(--space-md);
}

.ntc-choose h2 {
  font-family: var(--font-heading);
  font-size: 44px;
  line-height: 1.2;
  text-align: center;
  color: var(--color-heading);
}

.ntc-choose-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.ntc-choose-list li {
  display: flex;
  flex: 1 1 calc(50% - var(--space-md));
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--color-cream);
  box-shadow: var(--shadow-sm);
}

.ntc-choose-list span {
  font-weight: var(--weight-medium);
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-text-strong);
}

/* ==========================================================================
   Closing CTA
   ========================================================================== */
.ntc-cta {
  background: var(--color-dark);
}

.ntc-cta .inner-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: 100px var(--space-md);
}

.ntc-cta-action {
  display: flex;
  justify-content: center;
}

/* Tamil glyphs set wider than Latin — the max-width keeps the headline off
   the gutters and breaks it into balanced lines */
.ntc-cta h2 {
  max-width: 740px;
  margin: 0 auto;
  font-family: var(--font-heading);
  font-size: 48px;
  line-height: 1.3;
  text-align: center;
  color: var(--color-white);
}

.ntc-cta p {
  max-width: 640px;
  margin: 0 auto;
  font-size: 17px;
  text-align: center;
  color: rgba(255, 255, 255, 0.78);
}

/* address renders italic by default — reset it here */
.ntc-cta-address {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
  font-size: 16px;
  font-style: normal;
  line-height: 1.6;
  text-align: center;
  color: rgba(255, 255, 255, 0.78);
}

/* Static map raster — one tap opens directions in the Google Maps app */
.ntc-cta-map {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  text-decoration: none;
}

.ntc-cta-map img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.ntc-cta-map span {
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-gold);
}

.ntc-cta-map:hover span,
.ntc-cta-map:focus-visible span {
  text-decoration: underline;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.ntc-footer {
  background: var(--color-dark);
}

.ntc-footer .inner-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: 0 var(--space-md) var(--space-xl);
}

.ntc-footer hr {
  width: 100%;
  margin-bottom: var(--space-lg);
  border-top: 2px solid var(--color-olive);
}

/* Same lockup as the header, centred in the footer column */
.ntc-footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: var(--space-sm);
}

.ntc-footer-brand img {
  width: 44px;
  height: 44px;
}

.ntc-footer-brand-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ntc-footer-brand-name {
  font-family: var(--font-heading);
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.6px;
  color: var(--color-white);
}

.ntc-footer-brand-tag {
  font-weight: var(--weight-medium);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--color-gold);
}

.ntc-footer p {
  font-size: 17px;
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
}

.ntc-footer a {
  color: var(--color-gold);
  text-decoration: none;
}

.ntc-footer a:hover,
.ntc-footer a:focus-visible {
  text-decoration: underline;
}

/* ==========================================================================
   Scroll reveal
   The text, images and list items animate — not the sections themselves, so
   backgrounds never move. Each element starts lifted and transparent, then
   settles once script.js adds .ntc-visible. Scoped to .has-js, which the head
   script sets before first paint, so a failed script can never leave the page
   blank.
   ========================================================================== */
.has-js .ntc-anim,
.has-js .ntc-anim-list>li {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.has-js .ntc-anim.ntc-visible,
.has-js .ntc-anim-list.ntc-visible>li {
  opacity: 1;
  transform: translateY(0);
}

/* Cards and pills cascade rather than landing as one slab */
.has-js .ntc-anim-list.ntc-visible>li:nth-child(2) {
  transition-delay: 0.07s;
}

.has-js .ntc-anim-list.ntc-visible>li:nth-child(3) {
  transition-delay: 0.14s;
}

.has-js .ntc-anim-list.ntc-visible>li:nth-child(4) {
  transition-delay: 0.21s;
}

.has-js .ntc-anim-list.ntc-visible>li:nth-child(5) {
  transition-delay: 0.28s;
}

.has-js .ntc-anim-list.ntc-visible>li:nth-child(6) {
  transition-delay: 0.35s;
}

.has-js .ntc-anim-list.ntc-visible>li:nth-child(n+7) {
  transition-delay: 0.42s;
}

/* Reduced motion — content appears without travelling */
@media (prefers-reduced-motion: reduce) {

  .has-js .ntc-anim,
  .has-js .ntc-anim-list>li {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   WhatsApp float — sticks to the bottom-right corner on every scroll position.
   Sits below the header's z-index so the open mobile menu stays on top.
   ========================================================================== */
.ntc-whatsapp {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: var(--radius-pill);
  background: #25d366;
  color: var(--color-white);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2);
}

.ntc-whatsapp:hover,
.ntc-whatsapp:focus-visible {
  background: #1da851;
}

/* ==========================================================================
   Section anchors
   The header is fixed, so anchored sections need to clear it when the nav
   jumps to them.
   ========================================================================== */
.ntc-varieties,
.ntc-supply,
.ntc-leaf,
.ntc-cta {
  scroll-margin-top: 120px;
}

/* ==========================================================================
   Tamil typography
   The serif and Puvi stacks carry no Tamil glyphs, so Tamil copy was falling
   back to whatever each OS chose, at Latin leading that runs the loops and
   descenders together. These rules give it a real Tamil face and the extra
   leading the script needs, and must stay after the section blocks above.
   ========================================================================== */
.ntc-trust h2,
.ntc-cta h2 {
  font-family: var(--font-tamil);
  line-height: 1.45;
  letter-spacing: 0;
}

.ntc-trust p,
.ntc-cta p,
.ntc-cta-address,
.ntc-cta-map span {
  font-family: var(--font-tamil);
}

.ntc-trust-stats span {
  font-family: var(--font-tamil);
  line-height: 1.6;
}

.ntc-varieties-list h3 span {
  font-family: var(--font-tamil);
  line-height: 1.6;
}

/* ==========================================================================
   Desktop — 1441px and below
   Above this the page uses the larger scale defined in the blocks above.
   ========================================================================== */
@media screen and (max-width: 1440px) {

  .ntc-banner h1 {
    font-size: 60px;
  }

  .ntc-banner p {
    font-size: 20px;
  }

  .ntc-trust h2,
  .ntc-cta h2 {
    font-size: 44px;
  }

  .ntc-supply h2,
  .ntc-varieties h2,
  .ntc-leaf-detail h2,
  .ntc-choose h2 {
    font-size: 40px;
  }

  .ntc-varieties .inner-content>p {
    font-size: 17px;
  }

  .ntc-leaf-media img {
    height: 400px;
  }
}

/* ==========================================================================
   Large Tablet — 1200px to 1199px and below
   ========================================================================== */
@media screen and (max-width: 1199px) {

  .ntc-trust .inner-content,
  .ntc-varieties .inner-content,
  .ntc-supply .inner-content,
  .ntc-leaf .inner-content,
  .ntc-choose .inner-content,
  .ntc-cta .inner-content {
    padding: 90px var(--space-md);
  }

  .ntc-header-nav a {
    padding: 10px 12px;
  }

  .ntc-cta h2 {
    max-width: 570px;
  }

  .ntc-banner h1 {
    font-size: 50px;
  }

  .ntc-banner p {
    font-size: 19px;
  }

  .ntc-trust h2,
  .ntc-cta h2 {
    font-size: 40px;
  }

  .ntc-supply h2,
  .ntc-varieties h2,
  .ntc-leaf-detail h2,
  .ntc-choose h2 {
    font-size: 36px;
  }

  .ntc-varieties-list li {
    flex: 0 1 calc((100% - 2 * var(--space-md)) / 3);
  }

  .ntc-leaf-media img {
    height: 340px;
  }
}

/* ==========================================================================
   Tablet — 1024px and below
   The nav collapses to the toggle from here down.
   ========================================================================== */
@media screen and (max-width: 1024px) {

  .ntc-varieties,
  .ntc-supply,
  .ntc-leaf,
  .ntc-cta {
    scroll-margin-top: 96px;
  }

  .ntc-banner .inner-content {
    padding: 140px var(--space-md) var(--space-xl);
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
  }

  .ntc-trust .inner-content {
    max-width: 740px;
    margin: auto;
  }

  .ntc-banner-facts,
  .ntc-banner-action,
  .ntc-varieties-list {
    justify-content: center;
  }

  .ntc-banner h1 {
    font-size: 40px;
  }

  .ntc-banner p {
    font-size: 18px;
  }

  .ntc-trust .inner-content,
  .ntc-varieties .inner-content,
  .ntc-supply .inner-content,
  .ntc-leaf .inner-content,
  .ntc-choose .inner-content,
  .ntc-cta .inner-content {
    padding: 80px var(--space-md);
  }

  .ntc-trust h2,
  .ntc-cta h2 {
    font-size: 34px;
  }

  .ntc-supply h2,
  .ntc-varieties h2,
  .ntc-leaf-detail h2,
  .ntc-choose h2 {
    font-size: 30px;
  }

  .ntc-trust-stats li {
    flex: 1 1 calc(50% - var(--space-md));
  }

  .ntc-varieties-list li {
    flex: 0 1 calc((80% - var(--space-md)) / 2);
  }

  .ntc-leaf-media img {
    height: auto;
  }

  .ntc-leaf .inner-content {
    max-width: 610px;
    margin: auto;
    flex-direction: column-reverse;
  }

  .ntc-leaf-media,
  .ntc-leaf-detail {
    flex: 1 1 100%;
  }

}

/* ==========================================================================
   Mobile — 767px and below
   ========================================================================== */
@media screen and (max-width: 767px) {

  .ntc-header {
    top: 12px;
    position: absolute;
  }

  .ntc-header .content {
    max-width: 250px;
  }

  .ntc-varieties-list {
    max-width: 520px;
    margin: auto;
  }

  .ntc-cta h2 {
    max-width: 400px;
  }

  .ntc-header .inner-content {
    margin: 0 var(--space-sm);
    padding: 12px var(--space-sm);
    justify-content: center;
    min-height: unset;
    max-width: 220px;
    margin: auto;
  }

  /* Logo only from here down — no nav, no toggle. Sections are reached by
     scrolling, and the Call and WhatsApp buttons carry the actions. */
  .ntc-header-nav,
  .ntc-header-toggle {
    display: none;
  }

  .ntc-varieties-list li {
    flex: 0 1 calc((80% - var(--space-md)) / 1);
  }

  .ntc-header-logo {
    gap: 10px;
  }

  .ntc-header-logo img {
    width: 36px;
    height: 36px;
  }

  .ntc-header-logo-name {
    font-size: 24px;
  }

  .ntc-header-logo-tag {
    font-size: 10px;
    letter-spacing: 1.6px;
  }

  .ntc-footer-brand img {
    width: 36px;
    height: 36px;
  }

  .ntc-footer-brand-name {
    font-size: 24px;
  }

  .ntc-footer-brand-tag {
    font-size: 10px;
    letter-spacing: 1.6px;
  }

  .ntc-cta-address {
    font-size: 15px;
  }


  /* The desktop wash darkens left-to-right; on a narrow screen the copy runs
     the full width, so it needs a top-to-bottom one instead. */
  .ntc-banner::after {
    background: linear-gradient(180deg, rgba(20, 17, 12, 0.5) 0%, rgba(20, 17, 12, 0.78) 45%, rgba(20, 17, 12, 0.92) 100%);
  }

  .ntc-banner .inner-content {
    padding: 130px var(--space-sm) var(--space-lg);
    gap: var(--space-sm);
    max-width: 600px;
  }

  .ntc-banner h1 {
    font-size: 32px;
  }

  .ntc-banner p {
    font-size: 16px;
  }

  .ntc-banner-facts {
    gap: var(--space-sm);
  }

  .ntc-trust .inner-content,
  .ntc-varieties .inner-content,
  .ntc-supply .inner-content,
  .ntc-leaf .inner-content,
  .ntc-choose .inner-content,
  .ntc-cta .inner-content {
    padding: 70px var(--space-sm);
  }

  .ntc-trust h2,
  .ntc-cta h2 {
    font-size: 28px;
  }

  .ntc-supply h2,
  .ntc-varieties h2,
  .ntc-leaf-detail h2,
  .ntc-choose h2 {
    font-size: 26px;
  }

  .ntc-trust p {
    font-size: 16px;
  }

  .ntc-choose-list li {
    padding: 20px;
  }

  .ntc-choose-list span {
    font-size: 15px;
  }

  .ntc-trust-stats span {
    font-size: 16px;
  }


  .ntc-leaf .inner-content {
    gap: var(--space-lg);
  }



  .ntc-footer .inner-content {
    padding: 0 var(--space-sm) var(--space-lg);
  }

  .ntc-footer p {
    font-size: 15px;
  }

  .ntc-whatsapp {
    right: var(--space-sm);
    bottom: var(--space-sm);
    width: 52px;
    height: 52px;
  }
}

/* ==========================================================================
   Small Mobile — 480px and below
   ========================================================================== */
@media screen and (max-width: 480px) {

  .ntc-trust .inner-content,
  .ntc-varieties .inner-content,
  .ntc-supply .inner-content,
  .ntc-leaf .inner-content,
  .ntc-choose .inner-content,
  .ntc-cta .inner-content {
    padding: 60px var(--space-sm);
  }

  .ntc-header .inner-content {
    padding: 10px 14px;
  }

  .ntc-header-logo img,
  .ntc-footer-brand img {
    width: 32px;
    height: 32px;
  }

  .ntc-header-logo-name,
  .ntc-footer-brand-name {
    font-size: 21px;
  }

  .ntc-header-logo-tag,
  .ntc-footer-brand-tag {
    font-size: 9px;
    letter-spacing: 1.3px;
  }

  .ntc-banner .inner-content {
    padding: 104px var(--space-sm) var(--space-md);
  }

  .ntc-banner h1 {
    font-size: 30px;
    letter-spacing: unset;
  }

  .ntc-banner p {
    font-size: 15px;
  }

  .ntc-banner-facts {
    gap: 10px;
  }

  .ntc-banner-facts span {
    font-size: 14px;
  }

  .ntc-trust h2,
  .ntc-cta h2 {
    font-size: 24px;
  }

  .ntc-supply h2,
  .ntc-varieties h2,
  .ntc-leaf-detail h2,
  .ntc-choose h2 {
    font-size: 23px;
  }

  .ntc-trust p,
  .ntc-varieties .inner-content>p,
  .ntc-leaf-detail p,
  .ntc-cta p {
    font-size: 15px;
  }

  .ntc-trust-stats span {
    font-size: 15px;
  }

  .ntc-supply-list span,
  .ntc-choose-list span,
  .ntc-leaf-detail li {
    font-size: 15px;
  }

  .ntc-trust-stats li {
    padding: 18px 8px;
  }

  .ntc-supply-list li {
    padding: 8px 16px;
  }

  .ntc-varieties-list li {
    flex: 0 1 calc((95% - var(--space-md)) / 1);
  }

  .ntc-choose-list li {
    flex: 1 1 calc(100% - var(--space-md));
  }

  .ntc-cta-address,
  .ntc-cta-map span {
    font-size: 14px;
  }

  .ntc-supply .inner-content {
    max-width: 410px;
    margin: auto;
  }

  .ntc-supply-list span,
  .ntc-choose-list span,
  .ntc-leaf-detail li {
    font-size: 13px;
  }

  .ntc-footer p {
    font-size: 14px;
  }

  .ntc-whatsapp {
    width: 48px;
    height: 48px;
  }

  .ntc-banner-media {
    opacity: 0.5;
  }
}