/* ============================================================================
   navodita — nutrition from nature
   Palette lifted directly from the logo: sky blue wordmark, deep blue tagline,
   sun yellow/orange rays, Gir brown linework.
   ========================================================================== */

:root{
  --sky:       #38B6FF;
  --sky-lt:    #8AD4FF;
  --sky-pale:  #E4F5FF;
  --blue:      #0A51B0;
  --ink:       #0B2E4F;
  --ink-soft:  #46617C;

  --sun:       #FFD200;
  --sun-lt:    #FFE302;
  --orange:    #F7941E;
  --orange-d:  #E4700E;

  --green:     #2C7A4B;
  --green-d:   #164B2C;
  --green-pale:#E8F4EC;

  --brown:     #8A4B2A;

  --cream:     #FDFAF1;
  --cream-2:   #F6EEDD;
  --white:     #FFFFFF;
  --line:      #E7DFCE;

  --r-sm: 10px;
  --r:    18px;
  --r-lg: 28px;
  --r-xl: 40px;

  --shadow:    0 2px 6px rgba(11,46,79,.05), 0 12px 32px rgba(11,46,79,.08);
  --shadow-lg: 0 8px 20px rgba(11,46,79,.09), 0 30px 70px rgba(11,46,79,.14);

  --wrap: 1220px;
  --pad:  clamp(20px, 5vw, 48px);

  --f-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --f-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--f-body);
  font-size:clamp(15.5px, .55vw + 14px, 17.5px);
  line-height:1.68;
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,picture,video,svg{ max-width:100%; display:block; }
img{ height:auto; }

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  line-height:1.1;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
h1{ font-size:clamp(2.2rem, 4.9vw, 3.7rem); font-weight:800; letter-spacing:-.025em; }
h2{ font-size:clamp(2rem, 4.2vw, 3.2rem); font-weight:800; letter-spacing:-.02em; }
h3{ font-size:clamp(1.15rem, 1.5vw, 1.42rem); }
h4{ font-size:1rem; }
p{ margin:0 0 1.05em; }
em{ font-style:normal; color:var(--orange); }

a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--orange-d); }

::selection{ background:var(--sun); color:var(--ink); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{ left:0; color:#fff; }

:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding:clamp(72px, 9vw, 130px) 0; position:relative; }

/* ---------------------------------------------------------------- pieces */
.eyebrow{
  font-family:var(--f-body);
  font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.6em;
  margin:0 0 1.1em; color:var(--orange-d);
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--sun); box-shadow:0 0 0 4px rgba(255,210,0,.22); flex:none; }
.eyebrow.dark{ color:var(--orange-d); }
.eyebrow.light{ color:var(--sun); }
.eyebrow.light .dot{ background:var(--sun); box-shadow:0 0 0 4px rgba(255,210,0,.2); }

.sec-head{ max-width:660px; margin-bottom:clamp(38px,5vw,64px); }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head.center .eyebrow{ justify-content:center; }
.sec-sub{ font-size:1.06em; color:var(--ink-soft); margin:0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--f-display); font-weight:700; font-size:1rem;
  padding:.82em 1.6em; border-radius:100px; border:2px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  text-align:center; white-space:nowrap;
}
.btn svg{ width:1.1em; height:1.1em; }
.btn-lg{ font-size:1.06rem; padding:.95em 1.9em; }

.btn-sun{ background:linear-gradient(135deg,var(--sun-lt),var(--orange)); background-origin:border-box; color:#3A2400; box-shadow:0 6px 18px rgba(247,148,30,.35); }
.btn-sun:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(247,148,30,.45); color:#3A2400; }

.btn-ghost{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.55); backdrop-filter:blur(6px); }
.btn-ghost:hover{ background:#fff; color:var(--ink); transform:translateY(-2px); }

.btn-line{ background:transparent; color:var(--blue); border-color:var(--blue); }
.btn-line:hover{ background:var(--blue); color:#fff; transform:translateY(-2px); }

.pill{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; padding:.42em 1em; border-radius:100px;
}
.pill-blue{ background:var(--sky-pale); color:var(--blue); }
.pill-soon{ background:#FFF3D0; color:#8A6100; }

.tick{ list-style:none; padding:0; margin:0 0 1.6em; }
.tick li{ position:relative; padding-left:2em; margin-bottom:.7em; }
.tick li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:1.15em; height:.62em; border-left:3px solid var(--green); border-bottom:3px solid var(--green);
  transform:rotate(-45deg); border-radius:1px;
}

.grid-2{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(38px,5vw,80px); align-items:center; }
.grid-2.flip > *:first-child{ order:2; }

/* reveal-on-scroll; --d staggers members of a group */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--d,0ms);
}
.reveal.in{ opacity:1; transform:none; }

/* ================================================================= HEADER */
/* A solid white bar on every page, in normal flow rather than floating over the
   artwork — that is what lets the real full-colour logo be used everywhere. */
.site-head{
  position:sticky; top:0; z-index:100;
  padding:13px 0;
  background:var(--white);
  box-shadow:0 1px 0 var(--line);
  transition:box-shadow .3s ease, padding .3s ease;
}
.site-head.stuck{ padding:9px 0; box-shadow:0 1px 0 var(--line), 0 8px 26px rgba(11,46,79,.09); }

.head-inner{ display:flex; align-items:center; gap:clamp(16px,3vw,40px); }

.brand{ flex:none; display:block; }
.brand img{ width:clamp(132px,13vw,168px); height:auto; display:block; }

/* the header ground is white on every page, so the brand lockup is always the
   real full-colour one — no knockout, no drop shadow */
.brand-knockout{ display:none !important; }
.brand-colour{ display:block; }

.nav{ display:flex; gap:clamp(12px,1.9vw,28px); margin-left:auto; }
.nav a{
  font-weight:600; font-size:.94rem; color:var(--ink); position:relative; padding:.3em 0;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--orange); transition:right .28s ease; border-radius:2px;
}
.nav a:hover::after, .nav a.active::after{ right:0; }
.nav a:hover, .nav a.active{ color:var(--blue); }

.head-cta{ flex:none; font-size:.92rem; padding:.68em 1.35em; border-radius:12px; }
.nav-cta-mobile{ display:none; }

/* Instagram, Facebook, YouTube and the Google Play app: icons plus a "Get the app"
   badge before the order button in the header, inside the menu panel on phones,
   and in the footer's brand column. */
.social{ display:flex; align-items:center; gap:6px; margin:0; padding:0; list-style:none; }
.social a{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  transition:color .2s ease, background-color .2s ease, border-color .2s ease; }
.social svg{ width:18px; height:18px; display:block; }
.head-follow{ flex:none; display:flex; align-items:center; gap:10px; }
.head-social{ gap:0; }
.head-social a{ width:34px; height:34px; color:var(--ink); }
.head-social a:hover, .head-social a:focus-visible{ color:var(--blue); background:var(--sky-pale); }
.nav-extra{ display:none; }

.app-badge{
  display:inline-flex; align-items:center; gap:10px; padding:7px 16px 7px 12px;
  border-radius:12px; background:#111; color:#fff; border:1px solid rgba(255,255,255,.22);
  font-family:var(--f-display); font-weight:700; font-size:1rem; line-height:1.1;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.app-badge:hover{ background:#2a2a2a; }
.app-badges{ display:flex; flex-wrap:wrap; gap:10px; }
.app-badge svg{ width:20px; height:20px; flex:none; }
.app-badge small{ display:block; font-family:var(--f-body); font-weight:500; font-size:.66rem; opacity:.8; }
/* the header's badge is brand navy beside the yellow order button */
.app-badge.head-app{ background:var(--ink); color:#fff; border-color:var(--ink); padding:5px 13px 5px 10px; gap:8px; font-size:.86rem; }
.app-badge.head-app:hover, .app-badge.head-app:focus-visible{ background:var(--blue); color:#fff; border-color:var(--blue); }
.head-app svg{ width:17px; height:17px; }
.head-app small{ font-size:.6rem; }
.head-apps{ position:relative; }
.head-apps > summary{ list-style:none; cursor:pointer; user-select:none; }
.head-apps > summary::-webkit-details-marker{ display:none; }
.head-app .ha-caret{ width:13px; height:13px; margin-left:-2px; transition:transform .2s ease; }
.head-apps[open] .ha-caret{ transform:rotate(180deg); }
.head-apps-menu{ position:absolute; right:0; top:calc(100% + 10px); z-index:5; display:grid; gap:2px; min-width:200px; padding:8px;
  background:var(--white); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }
.head-apps-menu a{ display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:10px; color:var(--ink); }
.head-apps-menu a:hover, .head-apps-menu a:focus-visible{ background:var(--sky-pale); color:var(--blue); }
.head-apps-menu svg{ width:20px; height:20px; flex:none; }
.head-apps-menu b{ display:block; font-family:var(--f-display); font-size:.95rem; line-height:1.15; }
.head-apps-menu small{ display:block; font-size:.72rem; color:var(--ink-soft); }

/* Header widths. From 1220px the row is at its full width and the badge keeps its
   words, with the row's spacing tightened to make room. Below that it shrinks to an
   icon like the others, 1000-1179px tightens again, and under 1000px everything
   moves to the menu panel and the footer. */
@media (min-width:1220px){
  .head-inner{ gap:24px; }
  .nav{ gap:20px; }
}
@media (max-width:1219px){
  .head-follow{ gap:0; }
  .app-badge.head-app{ width:34px; height:34px; padding:0; justify-content:center; background:transparent; color:var(--ink); border-color:transparent; border-radius:50%; }
  .app-badge.head-app:hover, .app-badge.head-app:focus-visible{ background:var(--sky-pale); color:var(--blue); border-color:transparent; }
  .head-app span, .head-app .ha-caret{ display:none; }
}
@media (min-width:1000px) and (max-width:1179px){
  .head-inner{ gap:18px; }
  .nav{ gap:14px; }
  .head-social a, .app-badge.head-app{ width:30px; height:30px; }
}
@media (max-width:999px){ .head-follow{ display:none; } }

/* ---- dropdown ---- */
.has-sub{ position:relative; }
.sub-toggle{
  display:inline-flex; align-items:center; gap:.35em;
  background:none; border:0; padding:.3em 0; cursor:pointer;
  font-family:var(--f-body); font-weight:600; font-size:.94rem; color:var(--ink);
  position:relative;
}
.sub-toggle svg{ width:14px; height:14px; transition:transform .25s ease; }
.sub-toggle::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--orange); transition:right .28s ease; border-radius:2px;
}
.has-sub:hover .sub-toggle::after, .has-sub.active .sub-toggle::after,
.has-sub.open .sub-toggle::after{ right:0; }
.has-sub:hover .sub-toggle svg, .has-sub.open .sub-toggle svg{ transform:rotate(180deg); }
.has-sub.active .sub-toggle, .has-sub:hover .sub-toggle{ color:var(--blue); }

.submenu{
  position:absolute; left:50%; top:100%; transform:translate(-50%,10px);
  margin-top:14px; min-width:280px; padding:10px;
  background:var(--white); border-radius:var(--r); box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.submenu::before{ content:""; position:absolute; left:0; right:0; top:-18px; height:18px; }
.has-sub:hover .submenu, .has-sub:focus-within .submenu, .has-sub.open .submenu{
  opacity:1; visibility:visible; transform:translate(-50%,0);
}
.submenu a{
  display:block; padding:11px 14px; border-radius:var(--r-sm);
  color:var(--ink) !important; text-shadow:none; transition:background .2s ease;
}
.submenu a::after{ display:none; }
.submenu a:hover{ background:var(--sky-pale); }
.submenu a[aria-current]{ background:var(--sky-pale); }
.submenu b{ display:block; font-family:var(--f-display); font-size:1rem; color:var(--blue); }
.submenu span{ display:block; font-size:.8rem; color:var(--ink-soft); margin-top:1px; }

/* ================================================================ BANNER */
.banner{ position:relative; min-height:clamp(300px,42vh,440px); display:flex; align-items:flex-end; padding:clamp(52px,8vh,86px) 0 clamp(44px,6vw,74px); overflow:hidden; }
.banner-bg{ position:absolute; inset:0; z-index:0; }
.banner-bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 55%; }
.banner-veil{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, rgba(6,28,50,.92) 0%, rgba(6,28,50,.74) 48%, rgba(6,28,50,.44) 100%),
    linear-gradient(to top, rgba(6,28,50,.7), transparent 55%);
}
/* .banner-inner is also .wrap, so a max-width here would let margin-inline:auto
   centre the whole column and knock it out of line with every other page.
   Keep the wrap full width and cap the measure on the text itself. */
.banner-inner{ position:relative; z-index:2; color:#fff; }
.banner-inner > *{ max-width:840px; }
.banner-inner h1{ color:#fff; font-size:clamp(1.9rem,3.6vw,2.95rem); text-shadow:0 4px 40px rgba(0,0,0,.35); margin-bottom:.35em; }
.banner-inner .eyebrow{ color:#fff; opacity:.92; }
.banner-sub{ font-size:clamp(1rem,1.25vw,1.16rem); color:rgba(255,255,255,.86); max-width:60ch; margin:0; }
.crumbs{ font-size:.8rem; color:rgba(255,255,255,.6); margin-bottom:1.4em; display:flex; gap:.6em; }
.crumbs a{ color:rgba(255,255,255,.82); }
.crumbs a:hover{ color:var(--sun); }

.burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:10px; cursor:pointer; }
.burger span{ width:24px; height:2.5px; background:var(--ink); border-radius:3px; transition:.28s; }

/* once the cream panel is open the bars sit on light ground, so drop the knockout */
.burger[aria-expanded="true"] span{ background:var(--ink); box-shadow:none; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* =================================================================== HERO */
.hero{
  --hero-time:6800ms;
  position:relative; z-index:2; overflow:hidden;
  min-height:min(84svh,780px); height:max(600px,84svh);
  background:#102D22; color:#fff;
}
.hero::before{
  content:""; position:absolute; z-index:4; pointer-events:none;
  width:clamp(230px,31vw,520px); aspect-ratio:1; right:clamp(-260px,-12vw,-110px); top:8%;
  border:1px solid rgba(255,210,0,.38); border-radius:50%;
  box-shadow:0 0 0 46px rgba(255,210,0,.045), 0 0 0 92px rgba(255,210,0,.025);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  opacity:.09; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-slides,.hero-slide{ position:absolute; inset:0; }
.hero-slide{
  opacity:0; visibility:hidden;
  transition:opacity 1s cubic-bezier(.22,1,.36,1), visibility 0s linear 1s;
}
.hero-slide.is-active{ opacity:1; visibility:visible; transition-delay:0s; }
.hero-visual,.hero-visual img{ width:100%; height:100%; }
.hero-visual{ position:absolute; inset:0; }
.hero-visual img{
  object-fit:cover; object-position:62% 22%;
  filter:saturate(1.04) contrast(1.05); transform:scale(1.035); will-change:transform;
  transition:transform 8s cubic-bezier(.18,.75,.28,1);
}
.hero-slide:nth-child(2) .hero-visual img{ object-position:50% 48%; }
.hero-slide:nth-child(3) .hero-visual img{ object-position:52% 50%; }
.hero-slide.is-active .hero-visual img{ transform:scale(1); }
.hero-veil{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(5,25,23,.92) 0%, rgba(5,25,23,.77) 37%, rgba(5,25,23,.24) 69%, rgba(5,25,23,.08) 100%),
    linear-gradient(0deg, rgba(5,22,20,.7) 0%, transparent 42%),
    radial-gradient(60% 90% at 18% 48%, rgba(7,46,52,.34), transparent 74%);
}
.hero-slide:nth-child(3) .hero-veil{
  background:
    linear-gradient(90deg, rgba(7,32,25,.91) 0%, rgba(7,32,25,.73) 42%, rgba(7,32,25,.2) 77%),
    linear-gradient(0deg, rgba(6,25,21,.76) 0%, transparent 46%);
}
.hero-slide-inner{
  position:relative; z-index:2; height:100%; display:flex; align-items:center;
  padding-top:clamp(48px,7vh,84px); padding-bottom:clamp(104px,11vh,132px);
}
.hero-copy{ width:min(650px,59vw); text-shadow:0 2px 26px rgba(0,0,0,.2); }
.kicker{
  display:inline-flex; align-items:center; gap:12px; margin:0 0 1.45em;
  font-size:.72rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
.kicker-bar{ width:30px; height:2px; background:var(--sun); flex:none; border-radius:2px; }
.hero-copy h1{
  font-size:clamp(2.4rem,4.7vw,4.05rem); line-height:1.0; letter-spacing:-.03em;
  color:#fff; max-width:12ch; margin:0; text-wrap:balance;
}
.hero-copy h1 span{ color:var(--sun); }
.hero-copy .lede{
  font-size:clamp(1.02rem,1.18vw,1.15rem); line-height:1.62;
  color:rgba(255,255,255,.82); max-width:51ch; margin:1.25em 0 1.8em;
}
.hero-copy > *{ opacity:0; transform:translateY(24px); transition:opacity .65s ease, transform .65s cubic-bezier(.22,1,.36,1); }
.hero-slide.is-active .hero-copy > *{ opacity:1; transform:none; }
.hero-slide.is-active .hero-copy > :nth-child(1){ transition-delay:.2s; }
.hero-slide.is-active .hero-copy > :nth-child(2){ transition-delay:.29s; }
.hero-slide.is-active .hero-copy > :nth-child(3){ transition-delay:.38s; }
.hero-slide.is-active .hero-copy > :nth-child(4){ transition-delay:.47s; }
.hero-slide.is-active .hero-copy > :nth-child(5){ transition-delay:.56s; }
.hero-cta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0; }
.hero-cta .btn-ghost{ background:rgba(255,255,255,.09); }
.hero-spec{
  list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); max-width:560px;
  padding:18px 0 0; margin:1.8em 0 0; border-top:1px solid rgba(255,255,255,.24);
}
.hero-spec li{ position:relative; }
.hero-spec li+li{ padding-left:clamp(12px,1.7vw,22px); }
.hero-spec li+li::before{ content:""; position:absolute; left:0; top:3px; bottom:3px; width:1px; background:rgba(255,255,255,.2); }
.hero-spec b{ display:block; font-family:var(--f-display); font-weight:700; font-size:1.26rem; color:#fff; line-height:1.15; }
.hero-spec span{ display:block; font-weight:600; font-size:.69rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-top:.35em; }
.hero-controls{
  position:absolute; z-index:6; left:50%; bottom:clamp(28px,4.2vh,46px); transform:translateX(-50%);
  display:flex; align-items:flex-end; justify-content:flex-end; gap:28px;
}
.hero-tabs{ display:grid; grid-template-columns:repeat(3,minmax(100px,118px)); gap:12px; }
.hero-tab{
  position:relative; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:9px;
  padding:0 0 14px; color:rgba(255,255,255,.56); background:none; border:0; text-align:left;
  font-family:var(--f-body); cursor:pointer; transition:color .25s ease;
}
.hero-tab span{ font-size:.66rem; font-weight:700; letter-spacing:.12em; }
.hero-tab b{ font-family:var(--f-display); font-size:.96rem; font-weight:700; }
.hero-tab i,.hero-tab::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; }
.hero-tab i{ background:rgba(255,255,255,.22); }
.hero-tab::after{ right:auto; width:100%; background:var(--sun); transform:scaleX(0); transform-origin:left; }
.hero-tab.is-active{ color:#fff; }
.hero-tab.is-active::after{ animation:heroProgress var(--hero-time) linear forwards; }
.hero.is-paused .hero-tab.is-active::after{ animation-play-state:paused; }
@keyframes heroProgress{ to{ transform:scaleX(1); } }
.hero-arrows{ display:flex; gap:8px; }
.hero-arrows button{
  width:42px; height:42px; display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(255,255,255,.36); background:rgba(5,25,23,.22); color:#fff;
  cursor:pointer; backdrop-filter:blur(8px); transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.hero-arrows button:hover{ background:rgba(255,255,255,.18); border-color:#fff; transform:translateY(-2px); }
.hero-arrows svg{ width:18px; height:18px; }
.hero-pause .play-icon{ display:none; }
.hero-pause[aria-pressed="true"] .pause-icon{ display:none; }
.hero-pause[aria-pressed="true"] .play-icon{ display:block; }

/* ================================================================ NUMBERS */
.numbers{ background:var(--white); border-bottom:1px solid var(--line); padding:clamp(38px,5vw,60px) 0; }
.num-grid{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(16px,2.5vw,34px); }
.num-grid li{ text-align:center; position:relative; }
.num-grid li + li::before{ content:""; position:absolute; left:calc(-1 * clamp(8px,1.25vw,17px)); top:12%; bottom:12%; width:1px; background:var(--line); }
.num-grid b{ display:block; font-family:var(--f-display); font-weight:800; font-size:clamp(2rem,3.4vw,2.9rem); line-height:1; color:var(--blue); margin-bottom:.35em; }
.num-grid span{ font-size:.82rem; color:var(--ink-soft); line-height:1.42; display:block; }

/* ============================================================== OBJECTIVE */
.objective{ background:var(--cream); }
.obj-copy h2{ margin-bottom:.6em; }
.three-why{ display:grid; gap:22px; margin-top:2.4em; }
/* icon spans both rows so the heading sits beside it and the copy under the heading */
.why{ display:grid; grid-template-columns:auto 1fr; column-gap:18px; align-items:start; }
.why-ic{
  grid-row:1 / span 2;
  width:50px; height:50px; border-radius:15px;
  background:var(--sky-pale); color:var(--blue);
  display:grid; place-items:center;
}
.why-ic svg{ width:26px; height:26px; }
.why h3{ grid-column:2; margin:.15em 0 .28em; }
.why p{ grid-column:2; margin:0; color:var(--ink-soft); font-size:.95em; }

.obj-media{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-content:start; }
.ph{ margin:0; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); }
.ph img{ width:100%; height:auto; object-fit:cover; }
/* aspect lives on the image so it renders identically whether or not the grid stretches */
.ph-tall{ grid-row:span 2; }
.ph-tall img{ aspect-ratio:3/4.55; }
.ph-wide img{ aspect-ratio:4/3; }
.ph-seal{
  background:var(--white); border-radius:var(--r); padding:18px;
  display:grid; place-items:center; gap:8px; text-align:center; box-shadow:var(--shadow);
}
.ph-seal img{ width:76px; height:auto; }
.ph-seal figcaption{ font-size:.74rem; color:var(--ink-soft); line-height:1.4; }
.ph-seal b{ color:var(--green); font-family:var(--f-display); font-size:.95rem; }

/* =================================================================== HERD */
.herd{ background:var(--white); }
.breed-wrap{ display:grid; grid-template-columns:290px 1fr; gap:clamp(30px,4vw,60px); align-items:start; }

.dial{ margin:0; position:relative; display:grid; place-items:center; }
.dial svg{ width:100%; max-width:290px; transform:rotate(-90deg); }
.dial circle{ fill:none; stroke-width:19; }
.dial-track{ stroke:var(--cream-2); }
.dial-rest{ stroke:var(--orange); stroke-dasharray:515; stroke-dashoffset:0; }
.dial-gir{
  stroke:var(--sky); stroke-linecap:round;
  stroke-dasharray:515; stroke-dashoffset:515;
  transition:stroke-dashoffset 1.9s cubic-bezier(.22,1,.36,1);
}
.dial.on .dial-gir{ stroke-dashoffset:26; }
.dial figcaption{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.dial figcaption b{ font-family:var(--f-display); font-weight:800; font-size:3.1rem; line-height:1; color:var(--blue); }
.dial figcaption span{ font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; }

.breed-cards{ display:grid; gap:20px; }
.breed{ background:var(--cream); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); transition:transform .3s ease, box-shadow .3s ease; }
.breed:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.breed img{ width:100%; height:100%; object-fit:cover; }
.breed-lead{ display:grid; grid-template-columns:1fr 1fr; }
.breed-lead picture{ position:relative; display:block; min-height:260px; }
.breed-lead img{ position:absolute; inset:0; width:100%; height:100%; }
.breed-body{ padding:clamp(20px,2.4vw,32px); align-self:center; }
.breed-body h3{ margin:.5em 0 .3em; }
.breed-body p{ margin:0; color:var(--ink-soft); font-size:.94em; }

/* the breed markers listed on the Gir card */
.marks{ list-style:none; padding:0; margin:1.1em 0 0; display:grid; gap:.42em; }
.marks li{ position:relative; padding-left:1.5em; font-size:.88em; color:var(--ink-soft); }
.marks li::before{
  content:""; position:absolute; left:0; top:.52em; width:7px; height:7px;
  border-radius:50%; background:var(--sun); box-shadow:0 0 0 3px rgba(255,210,0,.22);
}

/* the non-Gir 5%: named in text, because no single photograph in the library
   can be verified down to one of these three breeds */
.minority{
  display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(20px,2.5vw,32px);
  background:var(--cream); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow);
}
.minority-photo{ margin:0; position:relative; min-height:260px; }
.minority-photo picture{ position:absolute; inset:0; }
.minority-photo img{ width:100%; height:100%; object-fit:cover; }
.minority-photo figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:46px 18px 16px;
  background:linear-gradient(to top, rgba(6,28,50,.94) 0%, rgba(6,28,50,.78) 42%, transparent 100%);
  color:#fff; font-size:.78rem; font-weight:500; line-height:1.45;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.minority-body{ padding:clamp(22px,2.4vw,32px) clamp(22px,2.4vw,32px) clamp(22px,2.4vw,32px) 0; align-self:center; }
.minority-body h3{ margin:.55em 0 .35em; }
.minority-body > p{ color:var(--ink-soft); font-size:.94em; margin-bottom:1.2em; }
.breedlist{ list-style:none; padding:0; margin:0; display:grid; gap:.85em; }
.breedlist li{ padding-left:1.1em; border-left:3px solid var(--sky); }
.breedlist b{ display:block; font-family:var(--f-display); font-size:1.04rem; color:var(--blue); }
.breedlist span{ font-size:.87em; color:var(--ink-soft); }

/* ================================================================ JOURNEY */
.journey{ background:linear-gradient(160deg,var(--green-d),#0E3A22 60%,#0B2E4F); color:#fff; }
.journey h2{ color:#fff; }
.timeline{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; }
.timeline::before{ content:""; position:absolute; left:0; right:0; top:46px; height:2px; background:linear-gradient(90deg,rgba(255,210,0,.15),var(--sun) 22%,var(--sun) 78%,rgba(255,210,0,.15)); }
.timeline li{ position:relative; padding:0 clamp(10px,1.4vw,20px); }
.timeline li::before{
  content:""; position:absolute; left:clamp(10px,1.4vw,20px); top:39px;
  width:16px; height:16px; border-radius:50%; background:var(--sun); border:4px solid var(--green-d);
  box-shadow:0 0 0 4px rgba(255,210,0,.22);
}
.tl-year{ display:block; font-family:var(--f-display); font-weight:800; font-size:1.5rem; color:var(--sun); margin-bottom:34px; }
.timeline h3{ color:#fff; margin:.9em 0 .35em; font-size:1.1rem; }
.timeline p{ color:rgba(255,255,255,.72); font-size:.9em; margin:0; }

/* ================================================================ GOSHALA */
.goshala{ background:var(--cream); }
.care-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(0,auto); gap:22px; }
.care{ background:var(--white); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease; }
.care:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.care picture{ overflow:hidden; }
.care img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.care:hover img{ transform:scale(1.07); }
.care-body{ padding:24px clamp(20px,2vw,26px) 28px; }
.care-body h3{ margin:0 0 .4em; }
.care-body p{ margin:0; color:var(--ink-soft); font-size:.93em; }

/* ================================================================= FODDER */
.fodder{ background:linear-gradient(150deg,#0F4A2B,var(--green-d) 55%,#123F26); color:#fff; }
.fodder h2, .fodder h3{ color:#fff; }
.fodder p{ color:rgba(255,255,255,.8); }
.fodder strong{ color:var(--sun); }
.fodder .tick li{ color:rgba(255,255,255,.86); }
.fodder .tick li::before{ border-color:var(--sun); }
.loop-box{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-left:4px solid var(--sun); border-radius:var(--r); padding:24px 26px; margin-top:2em;
}
.loop-box h3{ margin:0 0 .45em; font-size:1.12rem; }
.loop-box p{ margin:0; font-size:.94em; }

.fodder-media{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fodder-media .ph{ box-shadow:0 18px 44px rgba(0,0,0,.3); }
.fodder-media .ph img{ aspect-ratio:16/10; width:100%; object-fit:cover; }
.fodder-media .ph:nth-child(1){ transform:translateY(-16px); }
.fodder-media .ph:nth-child(4){ transform:translateY(-16px); }

/* =================================================================== CALF */
.calf{ background:var(--white); overflow:hidden; }
.calf-inner{ display:grid; grid-template-columns:1fr .92fr; gap:clamp(30px,4vw,64px); align-items:center; }
.pledge{ list-style:none; padding:0; margin:2em 0 0; display:grid; gap:14px; }
.pledge li{
  background:var(--cream); border-radius:var(--r); padding:18px 22px;
  border-left:4px solid var(--sky); font-size:.95em; color:var(--ink-soft);
}
.pledge b{ color:var(--ink); font-family:var(--f-display); font-size:1.06em; display:inline-block; margin-right:.35em; }
.calf-art{ margin:0; position:relative; }
.calf-art::before{
  content:""; position:absolute; inset:6% -8% 10% 2%;
  background:radial-gradient(ellipse at 50% 55%, var(--sky-pale), transparent 68%);
  border-radius:50%;
}
.calf-art img{ position:relative; width:100%; filter:drop-shadow(0 30px 40px rgba(11,46,79,.22)); }

/* ================================================================= PURITY */
.purity{ background:linear-gradient(165deg,#0B2E4F,#08213A 55%,#0A3057); color:#fff; overflow:hidden; }
.purity h2, .purity h3{ color:#fff; }
.purity .sec-sub{ color:rgba(255,255,255,.75); }

.rig{
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-xl); padding:clamp(22px,3vw,44px);
  box-shadow:0 30px 90px rgba(0,0,0,.35);
}

.rig-stage{ position:relative; padding-left:62px; --stage-h:clamp(190px,26vw,300px); }

.curve-box{ position:relative; height:var(--stage-h); }
.curve{ width:100%; height:100%; }
.curve .grid line{ stroke:rgba(255,255,255,.10); stroke-width:1; stroke-dasharray:3 7; vector-effect:non-scaling-stroke; }
#curvePath{ stroke-dasharray:1 1; stroke-dashoffset:0; filter:drop-shadow(0 0 10px rgba(56,182,255,.45)); }
#curveFill{ opacity:0; transition:opacity .6s ease; }
.rig.playing #curveFill, .rig.done #curveFill{ opacity:1; }

/* the travelling head sits in HTML space so the stretched viewBox can't squash it */
.dot-marker{
  position:absolute; left:0; top:0; width:20px; height:20px; margin:-10px 0 0 -10px;
  border-radius:50%; background:#fff; opacity:0;
  box-shadow:0 0 0 5px rgba(255,255,255,.22), 0 0 22px 5px rgba(255,255,255,.55);
  transition:opacity .3s ease;
  pointer-events:none;
}
.rig.playing .dot-marker, .rig.done .dot-marker{ opacity:1; }

.axis{ list-style:none; margin:0; padding:0; position:absolute; left:0; top:0; height:var(--stage-h); width:56px; }
.axis li{
  position:absolute; right:8px; top:var(--t);
  transform:translateY(-50%);
  font-size:.72rem; font-weight:700; letter-spacing:.04em; color:rgba(255,255,255,.5);
  font-family:var(--f-display);
}

.readouts{ display:flex; gap:clamp(14px,2.5vw,34px); flex-wrap:wrap; margin-top:20px; padding-left:0; }
.ro{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r); padding:14px 22px; min-width:132px;
}
.ro b{ font-family:var(--f-display); font-weight:800; font-size:2.1rem; line-height:1; font-variant-numeric:tabular-nums; }
.ro span{ font-family:var(--f-display); font-size:1.05rem; font-weight:700; margin-left:2px; opacity:.75; }
.ro small{ display:block; margin-top:5px; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.ro-temp b{ color:var(--sun); transition:color .4s ease; }
.ro-temp.hot b{ color:var(--orange); }
.ro-temp.cold b{ color:var(--sky-lt); }
.ro-time b{ color:#fff; }
.ro-fat b{ color:var(--sky); }

.stages{ list-style:none; padding:0; margin:34px 0 0; display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.stage{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
  border-radius:var(--r); padding:20px 18px 46px; position:relative;  /* room for the pinned temperature */
  transition:background .45s ease, border-color .45s ease, transform .45s ease, box-shadow .45s ease;
}
.stage.on{
  background:rgba(56,182,255,.16); border-color:var(--sky);
  transform:translateY(-6px); box-shadow:0 14px 34px rgba(56,182,255,.22);
}
.stage.done{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22); }
.st-n{ font-family:var(--f-display); font-weight:800; font-size:.8rem; letter-spacing:.14em; color:var(--sun); display:block; margin-bottom:.6em; }
.stage h3{ font-size:1.02rem; margin:0 0 .45em; }
.stage p{ font-size:.85em; color:rgba(255,255,255,.68); margin:0; }
.st-t{
  font-family:var(--f-display); font-size:1.02rem; font-weight:800; color:var(--sky-lt);
  position:absolute; bottom:16px; left:18px;
}
.stage.on .st-t{ color:#fff; }

.rig-controls{ margin-top:28px; text-align:center; }

/* ── homogenisation ── */
.homo{
  margin-top:clamp(40px,5vw,70px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); align-items:center;
}
.homo-copy p{ color:rgba(255,255,255,.75); }
.homo-note{ color:var(--sky-lt) !important; font-weight:500; }
.homo-vis{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg); padding:22px;
}
.globes{ position:relative; height:clamp(190px,24vw,240px); border-radius:var(--r); overflow:hidden; background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.10), rgba(255,255,255,.02)); }
.globe{ position:absolute; border-radius:50%; background:radial-gradient(circle at 34% 30%, #fff, #CFE9FF 55%, #8FC9F5); box-shadow:0 2px 10px rgba(0,0,0,.28); transition:all 1.5s cubic-bezier(.22,1,.36,1); }
.globes::after{ content:""; position:absolute; left:50%; top:8%; bottom:8%; width:1px; background:rgba(255,255,255,.18); }
.homo-labels{ display:flex; justify-content:space-around; margin-top:14px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); font-weight:700; }

.plant-shots{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:clamp(40px,5vw,70px); }
.plant-shots figure{ margin:0; border-radius:var(--r-lg); overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.35); }
.plant-shots img{ width:100%; aspect-ratio:3/2; object-fit:cover; }

/* =================================================================== FILM */
.film{ background:var(--cream); }
.player{ margin:0 0 26px; position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); background:#000; }
/* height:auto matters: the <video> tags carry width/height attributes (to reserve
   space while loading), and a height attribute beats aspect-ratio. Without it the
   box was 478px tall at every width — the film lost a quarter of its height on
   computers and 59% of its width on phones. contain rather than cover so a
   portrait phone video is shown whole, with black bars, instead of cropped. */
.player video{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:contain; background:#000; }
.player figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:44px 26px 18px;
  background:linear-gradient(to top, rgba(0,0,0,.72), transparent);
  color:rgba(255,255,255,.85); font-size:.86rem; pointer-events:none;
  transition:opacity .3s ease;
}
.player.playing figcaption{ opacity:0; }

.play-btn{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:88px; height:88px; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(135deg,var(--sun-lt),var(--orange)); color:#3A2400;
  display:grid; place-items:center;
  box-shadow:0 10px 40px rgba(0,0,0,.4);
  transition:transform .25s ease, opacity .25s ease;
}
.play-btn::before{
  content:""; position:absolute; inset:-10px; border-radius:50%;
  border:2px solid rgba(255,255,255,.5); animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{ 0%{ transform:scale(.9); opacity:.8;} 100%{ transform:scale(1.25); opacity:0;} }
.play-btn svg{ width:34px; height:34px; margin-left:4px; }
.play-btn:hover{ transform:translate(-50%,-50%) scale(1.08); }
.play-btn.hide{ opacity:0; pointer-events:none; }
.play-btn.sm{ width:56px; height:56px; }
.play-btn.sm svg{ width:22px; height:22px; margin-left:3px; }
.play-btn.sm::before{ display:none; }

/* a YouTube film: our copy of its thumbnail until play, then YouTube's frame */
.yt-stage{ position:relative; aspect-ratio:16/9; background:#000; }
.yt-stage img, .yt-stage iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.yt-stage img{ object-fit:cover; }
/* .player video sets display:block, which would otherwise beat the hidden attribute */
.player video[hidden], .yt-stage[hidden]{ display:none; }

/* homepage: pick between several main films */
/* flex, not an auto-fill grid: a grid reserves empty columns, so two or three
   films sat against the left edge under a centred player */
.film-list{ list-style:none; margin:0 0 30px; padding:0; display:flex; flex-wrap:wrap;
  justify-content:center; gap:16px; }
.film-list > li{ flex:0 1 210px; }
@media (max-width:560px){ .film-list > li{ flex-basis:calc(50% - 8px); } }
.film-pick{ display:block; height:100%; color:var(--ink); text-decoration:none; background:var(--white);
  border:2px solid transparent; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow);
  transition:transform .2s ease, border-color .2s ease; }
.film-pick:hover{ transform:translateY(-2px); }
.film-pick:focus-visible{ outline:3px solid var(--sky); outline-offset:3px; }
.film-pick.is-on{ border-color:var(--sky); }
.film-thumb{ position:relative; display:block; aspect-ratio:16/9; background:#000; }
.film-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.film-dur{ position:absolute; right:8px; bottom:8px; padding:2px 7px; border-radius:6px;
  background:rgba(0,0,0,.72); color:#fff; font-size:.72rem; font-weight:600; letter-spacing:.02em; }
.film-cap{ display:block; padding:10px 12px 12px; font-size:.88rem; font-weight:600; line-height:1.35; }
@media (prefers-reduced-motion: reduce){ .film-pick{ transition:none; } .film-pick:hover{ transform:none; } }

.clips{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.clip{ margin:0; position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); background:#000; }
.clip video{ width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; display:block; background:#000; }
.clip figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:30px 16px 12px;
  background:linear-gradient(to top, rgba(0,0,0,.75), transparent);
  color:#fff; font-size:.82rem; font-weight:600; pointer-events:none; transition:opacity .3s ease;
}
.clip.playing figcaption{ opacity:0; }

/* ===================================================================== AI */
.ai{ position:relative; color:#fff; overflow:hidden; }
.ai-bg{ position:absolute; inset:0; z-index:0; }
.ai-bg img{ width:100%; height:100%; object-fit:cover; }
.ai-veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(100deg, rgba(10,49,87,.95) 0%, rgba(10,49,87,.86) 46%, rgba(10,49,87,.55) 100%); }
.ai-inner{ position:relative; z-index:2; max-width:760px; }
.ai h2{ color:#fff; }
.ai p{ color:rgba(255,255,255,.82); }
.ai strong{ color:var(--sun); }
.ai-stats{ list-style:none; padding:0; margin:2.4em 0 0; display:flex; gap:clamp(20px,4vw,54px); flex-wrap:wrap; }
.ai-stats b{ display:block; font-family:var(--f-display); font-weight:800; font-size:clamp(1.7rem,3vw,2.4rem); color:var(--sun); line-height:1.1; }
.ai-stats span{ font-size:.84rem; color:rgba(255,255,255,.66); }

/* ============================================================== SUBSCRIBE */
.subscribe{ background:var(--white); }
.clock{ display:flex; align-items:center; gap:24px; margin:2em 0; }
.clock svg{ width:150px; flex:none; }
.cl-face{ fill:var(--cream); stroke:var(--line); stroke-width:2; }
/* -90deg puts 0h at the top; +75deg walks the arc round to 5 AM on a 24h dial */
.cl-win{
  fill:none; stroke:var(--sun); stroke-width:16; stroke-linecap:round;
  transform:rotate(-15deg); transform-origin:110px 110px;
  stroke-dasharray:578; stroke-dashoffset:578;
  transition:stroke-dashoffset 1.6s cubic-bezier(.22,1,.36,1);
}
.clock.on .cl-win{ stroke-dashoffset:482; }   /* the 4h delivery window */
.cl-ticks line{ stroke:var(--line); stroke-width:3; stroke-linecap:round; }
.cl-hub{ fill:var(--blue); }
.cl-hand{ stroke:var(--blue); stroke-width:4; stroke-linecap:round; transform-origin:110px 110px; animation:sweep 9s linear infinite; }
@keyframes sweep{ to{ transform:rotate(360deg);} }
.cl-legend b{ display:block; font-family:var(--f-display); font-size:1.7rem; font-weight:800; color:var(--blue); line-height:1.1; }
.cl-legend span{ font-size:.86rem; color:var(--ink-soft); }
.sub-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.sub-media{ margin:0; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); }
.sub-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; }

/* =============================================================== PRODUCTS */
.products{ background:var(--cream); }
.prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.prod{
  background:var(--white); border-radius:var(--r-lg); padding:26px; text-align:center;
  box-shadow:var(--shadow); display:flex; flex-direction:column; align-items:center;
  transition:transform .3s ease, box-shadow .3s ease;
}
.prod:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.prod .pill{ margin-bottom:18px; }
.prod img{ width:100%; max-width:230px; border-radius:var(--r); aspect-ratio:1/1; object-fit:cover; margin-bottom:18px; }
.prod-ic{ width:120px; height:120px; display:grid; place-items:center; color:var(--sky); margin:14px 0 30px; }
.prod-ic svg{ width:100%; height:100%; }
.prod h3{ margin:0 0 .4em; }
.prod p{ margin:0; font-size:.9em; color:var(--ink-soft); }
.prod-live{ border:2px solid var(--sky); }

/* ================================================================ GALLERY */
.gallery{ background:linear-gradient(170deg,#0B2E4F,#0A3057); color:#fff; }
.gallery h2{ color:#fff; }
.gal{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; grid-auto-flow:dense; }
.gal figure{ margin:0; border-radius:var(--r); overflow:hidden; box-shadow:0 14px 40px rgba(0,0,0,.3); }
.gal img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.gal figure:hover img{ transform:scale(1.08); }
.gal .g-2x{ grid-column:span 2; }
.gal .g-2x img{ aspect-ratio:8/3; }

/* ================================================================ CONTACT */
.contact{ background:var(--cream); }
.contact-card{
  background:var(--white); border-radius:var(--r-xl); overflow:hidden;
  display:grid; grid-template-columns:1fr .9fr; box-shadow:var(--shadow-lg);
}
.cc-copy{ padding:clamp(30px,4vw,60px); }
.cc-list{ list-style:none; padding:0; margin:2em 0 0; display:grid; gap:18px; }
.cc-list li{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; }
.cc-ic{ width:44px; height:44px; border-radius:13px; background:var(--sky-pale); color:var(--blue); display:grid; place-items:center; }
.cc-ic svg{ width:21px; height:21px; }
.cc-list b{ display:block; font-family:var(--f-display); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.cc-list a, .cc-list div > span{ font-size:1rem; color:var(--ink); font-weight:500; }
.cc-list a:hover{ color:var(--orange-d); }
/* absolute fill so the photo always matches the height of the copy beside it */
.cc-media{ margin:0; position:relative; min-height:340px; }
.cc-media picture{ position:absolute; inset:0; }
.cc-media img{ width:100%; height:100%; object-fit:cover; }

/* ================================================================= FOOTER */
.site-foot{
  position:relative; color:rgba(255,255,255,.72);
  padding:clamp(58px,6vw,84px) 0 0;
  background:var(--green-d);
}
.site-foot::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.16;
  background:radial-gradient(70% 90% at 100% 0%, rgba(56,182,255,.28), transparent 65%);
}
.foot-inner{ position:relative; display:grid; grid-template-columns:1.05fr 1.7fr; gap:clamp(38px,6vw,88px); padding-bottom:clamp(38px,4vw,58px); }
.foot-brand > picture:first-child img{ width:178px; margin-bottom:20px; }
.foot-brand > p{ font-size:.92em; max-width:38ch; color:rgba(255,255,255,.68); }
/* The seal artwork carries its own pale ground, so it can never sit
   transparently on dark green. Rather than float it as a bare white disc, it is
   presented as a deliberate badge: a tinted well, a soft rim, and a label. */
.foot-origin{
  display:inline-flex; align-items:center; gap:14px; margin-top:26px;
  padding:10px 18px 10px 10px; border-radius:100px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13);
  font-size:.72rem; line-height:1.45; color:rgba(255,255,255,.6);
}
.foot-origin b{ display:block; color:#fff; font-family:var(--f-display); font-size:.88rem; }
.foot-seal{ display:block; flex:none; width:52px; height:52px; border-radius:50%; overflow:hidden;
  background:var(--cream); box-shadow:0 0 0 1px rgba(255,255,255,.22), 0 4px 12px rgba(0,0,0,.28); }
.foot-seal img{ width:100%; height:100%; margin:0; object-fit:contain; padding:3px; }
.foot-follow{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-top:22px; }
.foot-social a{ color:#fff; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13); }
.foot-social a:hover, .foot-social a:focus-visible{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3); }
.foot-nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,38px); }
.foot-nav h4{ color:var(--sun); font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; margin:0 0 1.25em; }
.foot-nav a{ display:block; width:max-content; max-width:100%; color:rgba(255,255,255,.7); font-size:.9em; margin-bottom:.72em; transition:color .2s ease, transform .2s ease; }
.foot-nav a:hover{ color:#fff; transform:translateX(3px); }
.foot-utility{
  position:relative; display:grid; grid-template-columns:1fr 1.25fr auto; gap:22px; align-items:center;
  border:1px solid rgba(255,255,255,.16); border-radius:20px; padding:20px 22px;
  background:rgba(255,255,255,.065); backdrop-filter:blur(10px); margin-bottom:30px;
}
.foot-utility div{ min-width:0; }
.foot-utility span{ display:block; font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.48); margin-bottom:3px; }
.foot-utility a{ color:#fff; font-family:var(--f-display); font-weight:700; overflow-wrap:anywhere; }
.foot-utility a:hover{ color:var(--sun); }
.foot-visit{ display:inline-flex; align-items:center; gap:10px; padding:11px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.35); white-space:nowrap; }
.foot-visit span{ display:inline; margin:0; color:inherit; font-size:1rem; }
.foot-base{
  position:relative; border-top:1px solid rgba(255,255,255,.13); padding-block:22px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.82em; color:rgba(255,255,255,.5);
}
.foot-base p{ margin:0; }
.foot-tag{ font-family:var(--f-display); letter-spacing:.14em; text-transform:lowercase; color:var(--sky-lt); }

/* ================================================== MULTIPAGE COMPONENTS */

/* ---- section backgrounds by role ---- */
.objective, .goshala, .products, .contact, .film, .explore, .notin, .visit, .subcta{ background:var(--cream); }
.herd, .calf, .subscribe, .a2, .day, .cycle, .farmers, .steps, .philosophy, .fatband{ background:var(--white); }

.center-cta{ text-align:center; margin:clamp(30px,4vw,48px) 0 0; color:var(--ink-soft); }
.gallery .center-cta{ color:rgba(255,255,255,.7); }
.btn-line.light{ color:#fff; border-color:rgba(255,255,255,.5); }
.btn-line.light:hover{ background:#fff; color:var(--ink); }

/* ---- explore cards (home) ---- */
.ex-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.ex{
  display:flex; flex-direction:column; background:var(--white);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); color:inherit;
  transition:transform .3s ease, box-shadow .3s ease;
}
.ex:hover{ transform:translateY(-7px); box-shadow:var(--shadow-lg); color:inherit; }
.ex picture{ overflow:hidden; }
.ex img{ width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.ex:hover img{ transform:scale(1.07); }
.ex-body{ padding:26px clamp(20px,2vw,28px) 28px; display:flex; flex-direction:column; flex:1; }
.ex-body h3{ margin:.7em 0 .35em; }
.ex-body p{ color:var(--ink-soft); font-size:.93em; flex:1; margin-bottom:1.2em; }
.ex-go{ font-family:var(--f-display); font-weight:700; color:var(--blue); display:inline-flex; align-items:center; gap:.4em; }
.ex-go::after{ content:"→"; transition:transform .25s ease; }
.ex:hover .ex-go::after{ transform:translateX(5px); }

/* ---- teaser stats (home purity band) ---- */
.teaser-stats{ list-style:none; padding:0; margin:0 0 clamp(30px,4vw,44px); display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.teaser-stats li{
  text-align:center; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12); border-radius:var(--r); padding:24px 14px;
}
.teaser-stats b{ display:block; font-family:var(--f-display); font-weight:800; font-size:clamp(1.7rem,3vw,2.4rem); color:var(--sun); line-height:1.1; }
.teaser-stats span{ font-size:.82rem; color:rgba(255,255,255,.62); }
.teaser-cta{ text-align:center; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:clamp(34px,4vw,54px); }
.purity-teaser .plant-shots{ margin-top:0; }

/* ---- fact grid ---- */
.factgrid{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.factgrid.two{ margin-top:2em; }
.factgrid li{ background:var(--cream); border-radius:var(--r); padding:24px 22px; border-left:4px solid var(--sky); }
.factgrid b{ display:block; font-family:var(--f-display); font-weight:800; font-size:clamp(1.6rem,2.6vw,2.2rem); color:var(--blue); line-height:1.1; }
.factgrid span{ font-size:.86rem; color:var(--ink-soft); }

/* ---- spec list ---- */
.spec{ list-style:none; padding:0; margin:2em 0; }
.spec li{ display:grid; grid-template-columns:130px 1fr; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); }
.spec b{ font-family:var(--f-display); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.spec span{ font-size:.96em; }

/* ---- "not in the bottle" ---- */
.nolist{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.nolist li{
  background:var(--white); border-radius:var(--r); padding:20px 22px 20px 56px;
  position:relative; box-shadow:var(--shadow); font-family:var(--f-display); font-weight:600; font-size:1.02rem;
}
.nolist li::before{
  content:""; position:absolute; left:20px; top:50%; margin-top:-10px;
  width:20px; height:20px; border-radius:50%; border:2.5px solid var(--orange);
  background:linear-gradient(to bottom right, transparent 44%, var(--orange) 44%, var(--orange) 56%, transparent 56%);
}

/* ---- numbered step lists ---- */
.loopsteps{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:s; }
.steps .loopsteps, .visit-grid{ grid-template-columns:repeat(3,1fr); }
.loopsteps li{ background:var(--cream); border-radius:var(--r-lg); padding:28px 24px 30px; border-top:4px solid var(--sky); }
.white-bg .loopsteps li{ background:var(--cream); }
.ls-n{ font-family:var(--f-display); font-weight:800; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--orange-d); display:block; margin-bottom:.9em; }
.loopsteps h3{ margin:0 0 .4em; }
.loopsteps p{ margin:0; color:var(--ink-soft); font-size:.92em; }

/* ---- a day at the goshala ---- */
.daylist{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.daylist li{ position:relative; padding:26px 24px 28px 24px; background:var(--cream); border-radius:var(--r-lg); }
.daylist b{
  display:inline-block; font-family:var(--f-display); font-weight:800; font-size:1.05rem;
  color:#fff; background:var(--blue); padding:.25em .8em; border-radius:100px; margin-bottom:.9em;
}
.daylist h3{ margin:0 0 .35em; font-size:1.1rem; }
.daylist p{ margin:0; color:var(--ink-soft); font-size:.91em; }

/* keep tall portrait sources from towering over the copy beside them */
.farmers .ph img, .philosophy .ph img{ aspect-ratio:4/5; }

/* ---- visit cards ---- */
.visit-grid{ display:grid; gap:22px; margin-bottom:clamp(32px,4vw,48px); }
.visit-card{ background:var(--white); border-radius:var(--r-lg); padding:30px 26px 32px; box-shadow:var(--shadow); }
.visit-card h3{ margin:0 0 .4em; }
.visit-card p{ margin:0; color:var(--ink-soft); font-size:.93em; }

/* ---- subscribe CTA card ---- */
.subcta-card{
  background:var(--white); border-radius:var(--r-xl); padding:clamp(30px,4vw,56px);
  box-shadow:var(--shadow-lg); display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(26px,4vw,54px); align-items:center;
}
.subcta-actions{ display:flex; flex-wrap:wrap; gap:14px; }
.subcta-note{ flex-basis:100%; margin:.4em 0 0; font-size:.86rem; color:var(--ink-soft); }

/* ---- closing CTA + illustrated footer horizon ---- */
.endcta{
  position:relative; overflow:hidden; color:#fff;
  background-color:var(--green-d);
  background-image:
    linear-gradient(180deg, rgba(22,75,44,0) 45%, rgba(22,75,44,.78) 74%, var(--green-d) 100%),
    image-set(url("../img/footer-landscape-v2.webp") type("image/webp"), url("../img/footer-landscape-v2.png") type("image/png"));
  background-size:cover; background-position:center top;
  margin-top:-1px;
  padding:clamp(265px,28vw,390px) 0 clamp(64px,7vw,96px);
}
.endcta::before{
  content:""; position:absolute; z-index:0; inset:0 0 auto; height:clamp(170px,16vw,250px);
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(253,250,241,1) 0%,
    rgba(253,250,241,.94) 18%,
    rgba(253,250,241,.62) 48%,
    rgba(253,250,241,.18) 78%,
    rgba(253,250,241,0) 100%);
}
.endcta::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.08; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.endcta-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(26px,4vw,60px); align-items:center; }
.endcta h2{ color:#fff; margin-bottom:.4em; }
.endcta p{ color:rgba(255,255,255,.78); margin:0; }
.endcta-btns{ display:flex; flex-direction:column; gap:14px; align-items:stretch; }

/* ============================================================ RESPONSIVE */
@media (max-width:1080px){
  .hero-spec{ display:none; }
  .hero-controls{ justify-content:space-between; }
  .hero-tabs{ grid-template-columns:repeat(3,minmax(92px,140px)); }
  .num-grid{ grid-template-columns:repeat(3,1fr); row-gap:30px; }
  .num-grid li:nth-child(3n+1)::before{ display:none; }
  .care-grid{ grid-template-columns:repeat(2,1fr); }
  .stages{ grid-template-columns:repeat(3,1fr); }
  .timeline{ grid-template-columns:repeat(3,1fr); row-gap:38px; }
  .timeline::before{ display:none; }
  .timeline li::before{ top:35px; }
  .prod-grid{ grid-template-columns:repeat(2,1fr); }
  .clips{ grid-template-columns:repeat(2,1fr); }
  .breed-wrap{ grid-template-columns:1fr; justify-items:center; }
  .breed-cards{ width:100%; }
  .gal{ grid-template-columns:repeat(3,1fr); }
  .ex-grid{ grid-template-columns:1fr; }
  .teaser-stats{ grid-template-columns:repeat(2,1fr); }
  .loopsteps, .daylist{ grid-template-columns:repeat(2,1fr); }
  .steps .loopsteps, .visit-grid{ grid-template-columns:1fr; }
  .nolist{ grid-template-columns:repeat(2,1fr); }
  .endcta-inner, .subcta-card{ grid-template-columns:1fr; }
  .foot-utility{ grid-template-columns:1fr 1.25fr; }
  .foot-visit{ grid-column:1/-1; justify-self:start; }
}

@media (max-width:860px){
  html{ scroll-padding-top:74px; }

  .nav{
    position:fixed; inset:0 0 auto 0; top:0; padding:88px 26px 30px;
    background:var(--cream); flex-direction:column; gap:2px;
    box-shadow:0 20px 50px rgba(11,46,79,.16);
    transform:translateY(-102%); transition:transform .38s cubic-bezier(.22,1,.36,1);
    margin-left:0; max-height:100dvh; overflow-y:auto;
  }
  .nav.open{ transform:none; }
  .nav > a{ color:var(--ink) !important; text-shadow:none; font-size:1.1rem; padding:.65em 0; border-bottom:1px solid var(--line); }
  .nav a::after{ display:none; }
  .burger{ display:flex; margin-left:auto; }
  .head-cta{ display:none; }

  /* dropdown collapses into an inline accordion */
  .has-sub{ border-bottom:1px solid var(--line); }
  .sub-toggle{ width:100%; justify-content:space-between; color:var(--ink) !important; text-shadow:none; font-size:1.1rem; padding:.65em 0; }
  /* these selectors must out-rank the desktop `.has-sub.open .submenu` rule,
     otherwise its translate(-50%) drags the panel off the left edge */
  .submenu,
  .has-sub.open .submenu,
  .has-sub:hover .submenu,
  .has-sub:focus-within .submenu{
    position:static; transform:none; opacity:1; visibility:visible; box-shadow:none;
    background:transparent; min-width:0; margin:0 0 .5em; padding:0 0 0 4px;
    display:none;
  }
  .has-sub.open .submenu,
  .has-sub.open:hover .submenu{ display:block; }
  .submenu::before{ display:none; }
  .submenu a{ padding:9px 12px; }
  .nav-cta-mobile{ display:inline-flex; margin-top:20px; align-self:flex-start; }
  /* `.nav > a` above turns every panel link into a text row; give the order
     button back its own pill: padding, weight, colour and no underline rule */
  .nav > a.nav-cta-mobile{ font-size:1rem; font-weight:700; padding:.82em 1.6em; border:2px solid transparent; border-radius:12px; color:#3A2400 !important; }
  /* .nav a styles every link in the panel; these restore the badge and icons */
  .nav-extra{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 16px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
  .nav-extra .app-badge, .nav-extra .app-badge:hover{ color:#fff; padding:7px 16px 7px 12px; font-size:1rem; }
  .nav-social a{ color:var(--ink); background:var(--white); border:1px solid var(--line); padding:0; }
  .nav-social a:hover{ color:var(--blue); }

  .hero{ min-height:760px; height:max(760px,100svh); }
  .hero::before{ right:-170px; top:12%; }
  .hero-visual img{ object-position:66% 40%; }
  .hero-slide:nth-child(2) .hero-visual img{ object-position:58% 50%; }
  .hero-slide:nth-child(3) .hero-visual img{ object-position:52% 50%; }
  .hero-veil,
  .hero-slide:nth-child(3) .hero-veil{
    background:
      linear-gradient(0deg, rgba(5,22,20,.95) 0%, rgba(5,22,20,.9) 34%, rgba(5,22,20,.62) 56%, rgba(5,22,20,.2) 78%, rgba(5,22,20,.06) 100%);
  }
  .hero-slide-inner{ align-items:flex-end; padding-top:clamp(150px,26vh,260px); padding-bottom:150px; }
  .hero-copy{ width:min(600px,90vw); }
  .hero-copy h1{ font-size:clamp(2.25rem,6.4vw,3.2rem); }
  .hero-copy .lede{ max-width:48ch; }
  .hero-controls{ bottom:24px; align-items:center; }
  .hero-tabs{ grid-template-columns:repeat(3,minmax(92px,140px)); }

  .grid-2, .calf-inner, .homo, .contact-card, .foot-inner{ grid-template-columns:1fr; }
  .grid-2.flip > *:first-child{ order:0; }
  .obj-media{ grid-template-columns:1fr 1fr; }
  .ph-tall{ grid-row:auto; aspect-ratio:4/3; }
  .calf-art{ max-width:440px; margin-inline:auto; }
  .cc-media img{ min-height:220px; }
  .plant-shots{ grid-template-columns:1fr; }
  .sub-media img{ aspect-ratio:4/3; }
}

@media (max-width:680px){
  .hero{ min-height:780px; height:max(780px,100svh); }
  .hero::before{ width:260px; right:-170px; top:18%; }
  .hero-slide-inner{ padding-top:104px; padding-bottom:164px; }
  .hero-copy{ width:100%; }
  .hero-copy h1{ font-size:clamp(2.05rem,9.4vw,2.65rem); line-height:1.02; }
  .hero-copy .lede{ font-size:.96rem; line-height:1.55; margin:1em 0 1.35em; }
  .hero-cta{ gap:10px; }
  .hero-cta .btn{ width:100%; padding:.76em 1.2em; }
  .hero-spec{ margin-top:1.4em; padding-top:14px; }
  .hero-spec b{ font-size:1.02rem; }
  .hero-spec span{ font-size:.57rem; letter-spacing:.04em; }
  .hero-controls{ align-items:center; gap:12px; }
  .hero-tabs{ grid-template-columns:repeat(3,46px); gap:7px; }
  .hero-tab{ grid-template-columns:1fr; gap:0; padding-bottom:12px; }
  .hero-tab b{ display:none; }
  .hero-tab span{ text-align:center; }
  .hero-arrows{ gap:6px; }
  .hero-arrows button{ width:38px; height:38px; }
  .num-grid{ grid-template-columns:repeat(2,1fr); }
  .num-grid li::before{ display:none; }
  .num-grid li:last-child{ grid-column:1/-1; }
  .care-grid, .prod-grid, .clips, .fodder-media{ grid-template-columns:1fr; }
  .breed-lead, .minority{ grid-template-columns:1fr; }
  .breed-lead picture{ min-height:0; }
  .breed-lead img{ position:static; aspect-ratio:4/3; }
  .minority-photo{ min-height:0; position:relative; aspect-ratio:4/3; }
  .minority-photo picture{ position:absolute; inset:0; }
  .minority-body{ padding:0 22px 26px; }
  .timeline{ grid-template-columns:1fr; }
  .timeline li{ padding-left:34px; }
  .timeline li::before{ left:0; top:8px; }
  .tl-year{ margin-bottom:0; }
  .stages{ grid-template-columns:1fr; }
  .st-t{ position:static; display:block; margin-top:-.4em; }
  .stage p{ margin-bottom:.5em; }
  .gal{ grid-template-columns:repeat(2,1fr); }
  .gal .g-2x{ grid-column:span 2; }
  .foot-nav{ grid-template-columns:1fr 1fr; }
  .foot-utility{ grid-template-columns:1fr; gap:17px; padding:20px; }
  .foot-visit{ grid-column:auto; justify-self:stretch; justify-content:center; }
  .endcta{ padding-top:230px; background-position:center top; }
  .rig-stage{ padding-left:46px; }
  .axis{ width:42px; }
  .axis li{ font-size:.64rem; right:5px; }
  .ro{ flex:1 1 100px; min-width:0; padding:12px 16px; }
  .ro b{ font-size:1.6rem; }
  .clock{ flex-direction:column; align-items:flex-start; }
  .teaser-stats, .nolist, .loopsteps, .daylist, .factgrid{ grid-template-columns:1fr; }
  .spec li{ grid-template-columns:1fr; gap:2px; }
  .banner{ min-height:auto; padding:128px 0 48px; }
  .endcta-btns .btn{ width:100%; }
}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-visual img{ transform:none; }
  .hero-tab.is-active::after{ animation:none; transform:scaleX(1); }
}

/* ------------------------------------------------------------------ print */
@media print{
  .site-head,.play-btn,.rig-controls,.burger,.hero-controls{ display:none !important; }
  body{ background:#fff; }
  .reveal{ opacity:1; transform:none; }
}

/* ============================================ VISIT / BOOKING ============ */
.booking{ background:var(--cream); }
.booking-grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(30px,4vw,64px); align-items:start; }

.bform{ display:grid; gap:20px; }
.f{ display:block; }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.f-label{ display:block; font-family:var(--f-display); font-weight:700; font-size:.9rem; color:var(--ink); margin-bottom:.5em; }
.f-label i{ color:var(--orange-d); font-style:normal; }

.bform input[type=text], .bform input[type=tel], .bform input[type=date],
.bform input[type=number], .bform textarea, .bform select{
  width:100%; font:inherit; font-size:1rem; color:var(--ink);
  background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:.78em .95em; transition:border-color .2s ease, box-shadow .2s ease;
}
.bform textarea{ resize:vertical; min-height:76px; }
.bform select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346617C' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9em center; background-size:16px; padding-right:2.6em; }
.bform :is(input,textarea,select):focus{
  outline:none; border-color:var(--sky); box-shadow:0 0 0 4px rgba(56,182,255,.18);
}
.bform ::placeholder{ color:#9AA9B8; }

/* +91 sits inside the field so the number reads as one unit */
.f-prefix{ display:flex; align-items:stretch;
  border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--white); overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease; }
.f-prefix:focus-within{ border-color:var(--sky); box-shadow:0 0 0 4px rgba(56,182,255,.18); }
.f-prefix b{ display:flex; align-items:center; padding:0 .5em 0 .95em; font-family:var(--f-display); color:var(--ink-soft); border-right:1.5px solid var(--line); background:var(--cream); }
.f-prefix input{ border:0 !important; border-radius:0 !important; box-shadow:none !important; flex:1; min-width:0; }

.has-err :is(input,textarea,select), .has-err .f-prefix{ border-color:#D64B3A; }
.f-err{ display:block; margin-top:.45em; font-size:.82rem; font-style:normal; color:#C0392B; }
.form-alert{ background:#FDECEA; border-left:4px solid #D64B3A; border-radius:var(--r-sm);
  padding:14px 18px; margin-bottom:22px; font-size:.92rem; color:#8E2A1C; }
.form-alert b{ display:block; }
.trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.bform-foot{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:.4em; }
.bform-or{ font-size:.86rem; color:var(--ink-soft); }
.bform-privacy{ margin:0; font-size:.8rem; color:var(--ink-soft); }

/* WhatsApp green is a recognised affordance — worth keeping off-palette */
.btn-wa{ background:#25D366; color:#0B2E1A; box-shadow:0 6px 18px rgba(37,211,102,.32); }
.btn-wa:hover{ background:#1EBE5A; color:#0B2E1A; transform:translateY(-2px); }
.btn-wa svg{ width:1.15em; height:1.15em; }

/* confirmation */
.booked{ background:var(--white); border-radius:var(--r-xl); padding:clamp(30px,4vw,52px); box-shadow:var(--shadow-lg); text-align:center; }
.booked-tick{ width:66px; height:66px; margin:0 auto 20px; border-radius:50%; display:grid; place-items:center;
  background:var(--green-pale); color:var(--green); }
.booked-tick svg{ width:32px; height:32px; }
.booked h2{ margin-bottom:.4em; }
.booked p{ color:var(--ink-soft); max-width:46ch; margin-inline:auto; }
.booked-note{ font-size:.92em; }
.booked-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:1.6em; }

/* side column */
.booking-side{ display:grid; gap:20px; position:sticky; top:96px; }
.booking-photo{ margin:0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); }
.booking-photo img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.side-card{ background:var(--white); border-radius:var(--r-lg); padding:24px 26px 26px; box-shadow:var(--shadow); }
.side-card h3{ margin:0 0 .7em; font-size:1.1rem; }
.side-card p{ font-size:.92em; color:var(--ink-soft); margin-bottom:.8em; }
.side-card .tick{ margin-bottom:0; }
.side-card .tick li{ font-size:.92em; color:var(--ink-soft); }

/* ============================================ CONTACT LINES ============= */
.contact-lines{ list-style:none; padding:0; margin:0; display:grid; gap:18px; }
.contact-lines li{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; }
.cl-ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none;
  background:var(--sky-pale); color:var(--blue); }
.cl-ic svg{ width:20px; height:20px; }
.cl-ic.cl-wa{ background:rgba(37,211,102,.14); color:#128C43; }
.contact-lines b{ display:block; font-family:var(--f-display); font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:.15em; }
.cl-num{ display:block; font-family:var(--f-display); font-weight:700; font-size:1.12rem; color:var(--ink); }
.cl-num:hover{ color:var(--orange-d); }
.cl-acts{ display:flex; gap:14px; margin-top:.25em; }
.cl-acts a{ font-size:.82rem; font-weight:600; color:var(--blue); }
.cl-acts a:hover{ color:var(--orange-d); }
/* on dark grounds */
.side-contact .cl-num, .purity .contact-lines .cl-num, .gallery .contact-lines .cl-num{ color:var(--ink); }

@media (max-width:900px){
  .booking-grid{ grid-template-columns:1fr; }
  .booking-side{ position:static; }
}
@media (max-width:680px){
  .f-row{ grid-template-columns:1fr; }
  .bform-foot .btn{ width:100%; text-align:center; justify-content:center; }
  .bform-or{ width:100%; text-align:center; }
}
.booked-tick.is-warn{ background:#FFF3D0; color:#8A6100; }

/* Prose written in the CMS rich-text editor — matches the hand-authored copy
   it replaced, so an edited paragraph is indistinguishable from a coded one. */
.richtext > :first-child{ margin-top:0; }
.richtext > :last-child{ margin-bottom:0; }
.richtext p{ margin:0 0 1.05em; }
.richtext h2,.richtext h3{ margin:1.2em 0 .45em; }
.richtext ul,.richtext ol{ margin:0 0 1.05em; padding-left:1.3em; }
.richtext li{ margin-bottom:.4em; }
.richtext blockquote{ margin:1.2em 0; padding-left:1.1em; border-left:3px solid var(--sky); color:var(--ink-soft); }
.fodder .richtext p, .purity .richtext p, .gallery .richtext p{ color:rgba(255,255,255,.8); }
/* .richtext zeroes its last child's margin, which suits a block that ends a
   column. Where one is followed by more copy it still owes a paragraph's gap. */
.obj-copy .richtext, .calf-copy .richtext{ margin-bottom:1.05em; }