/* =========================================================
   Ontra-style site — design tokens
   ========================================================= */
:root{
  --ink:#14110f;
  --black:#0a0a0a;
  --off-white:#fafaf8;
  --light-gray:#f2efe9;
  --dark-gray:#57534e;
  --orange:#ff7b3d;
  --warm-orange:#ff8547;
  --yellow:#ffb800;
  --border:rgba(10,10,10,.10);
  --border-light:rgba(250,250,248,.16);
  --radius:.875rem;

  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:"IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:"IBM Plex Mono", "Courier New", monospace;
  --font-wordmark:"Archivo", Impact, "Arial Black", sans-serif;

  --maxw:1440px;
  --pad:1.5rem;
}
@media (min-width:640px){ :root{ --pad:3rem; } }
@media (min-width:1024px){ :root{ --pad:5rem; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--off-white);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; font-weight:400; letter-spacing:-.02em; }
p{ margin:0; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.mono{
  font-family:var(--font-mono);
  font-size:.6875rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:500;
}
.serif{ font-family:var(--font-display); font-weight:300; }

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:60;
  padding:1.25rem var(--pad);
  transition:background .35s ease, border-color .35s ease, padding .35s ease;
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(250,250,248,.88);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--border);
  padding-block:.75rem;
}
.header-inner{
  max-width:var(--maxw); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand-mark{
  width:34px; height:34px; border-radius:10px; flex:none;
  background:linear-gradient(140deg,var(--orange),var(--yellow));
  display:grid; place-items:center;
  font-family:var(--font-wordmark); font-weight:800; font-size:1rem;
  color:var(--black); letter-spacing:-.04em;
}
.brand-name{
  font-family:var(--font-wordmark);
  font-weight:800; font-size:1.02rem; letter-spacing:.01em; text-transform:uppercase;
  color:var(--off-white); line-height:1; white-space:nowrap;
  transition:color .35s ease;
}
.site-header.is-stuck .brand-name,
.site-header.on-light .brand-name{ color:var(--ink); }

.header-actions{ display:flex; align-items:center; gap:.25rem; }
.icon-btn{
  width:40px; height:40px; border-radius:999px;
  display:grid; place-items:center;
  color:var(--off-white);
  transition:color .25s ease, background .25s ease;
}
.icon-btn:hover{ color:var(--orange); background:rgba(255,255,255,.08); }
.site-header.is-stuck .icon-btn,
.site-header.on-light .icon-btn{ color:var(--ink); }
.site-header.is-stuck .icon-btn:hover,
.site-header.on-light .icon-btn:hover{ color:var(--orange); background:rgba(10,10,10,.05); }
.icon-btn svg{ width:18px; height:18px; }
.social-nav ul{ display:flex; align-items:center; gap:.25rem; }
@media (max-width:639px){ .social-nav{ display:none; } }

.search-btn{
  display:flex; align-items:center; gap:.5rem;
  height:40px; padding:0 .9rem; border-radius:999px;
  border:1px solid var(--border-light);
  color:var(--off-white);
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em;
  transition:all .25s ease;
}
.search-btn:hover{ border-color:var(--orange); color:var(--orange); }
.site-header.is-stuck .search-btn,
.site-header.on-light .search-btn{ color:var(--ink); border-color:var(--border); }
.search-btn svg{ width:16px; height:16px; }
.search-btn .kbd{ opacity:.6; }
@media (max-width:520px){ .search-btn .kbd{ display:none; } }

/* ---------- Command palette / menu ---------- */
.palette{
  position:fixed; inset:0; z-index:100;
  display:none; padding:6vh 1rem 2rem;
  background:rgba(10,10,10,.55); backdrop-filter:blur(8px);
}
.palette.open{ display:block; animation:fade .2s ease; }
@keyframes fade{ from{opacity:0} to{opacity:1} }
.palette-box{
  max-width:640px; margin-inline:auto;
  background:var(--off-white); border-radius:18px;
  border:1px solid var(--border);
  box-shadow:0 30px 80px rgba(10,10,10,.35);
  overflow:hidden;
  animation:pop .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes pop{ from{opacity:0; transform:translateY(-10px) scale(.98)} to{opacity:1; transform:none} }
.palette-input{
  display:flex; align-items:center; gap:.75rem;
  padding:1rem 1.15rem; border-bottom:1px solid var(--border);
}
.palette-input svg{ width:18px; height:18px; color:var(--dark-gray); flex:none; }
.palette-input input{
  flex:1; border:0; outline:0; background:none;
  font-family:var(--font-sans); font-size:1rem; color:var(--ink);
}
.palette-input .esc{
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:.1em;
  border:1px solid var(--border); border-radius:6px; padding:.2rem .45rem; color:var(--dark-gray);
}
.palette-list{ max-height:56vh; overflow-y:auto; padding:.6rem; }
.palette-group{ padding:.75rem .65rem .35rem; }
.palette-item{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem .65rem; border-radius:10px;
  transition:background .15s ease;
}
.palette-item:hover,.palette-item.active{ background:var(--light-gray); }
.palette-item .t{ font-size:.95rem; }
.palette-item .d{ font-size:.78rem; color:var(--dark-gray); }
.palette-item .arrow{ color:var(--orange); opacity:0; transition:opacity .15s ease; }
.palette-item:hover .arrow,.palette-item.active .arrow{ opacity:1; }
.palette-empty{ padding:2rem; text-align:center; color:var(--dark-gray); font-size:.9rem; }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  color:var(--off-white);
  overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(10,10,10,.92) 0%, rgba(10,10,10,.55) 45%, rgba(10,10,10,.35) 100%),
    linear-gradient(to right, rgba(10,10,10,.6), rgba(10,10,10,.05));
}
.hero-inner{
  position:relative; z-index:2;
  max-width:var(--maxw); margin-inline:auto; width:100%;
  padding:0 var(--pad) 3.5rem;
}
.hero-eyebrow{ color:rgba(250,250,248,.7); margin-bottom:1.5rem; }
.hero-eyebrow .dot{ color:var(--orange); }
.hero h1{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(2.6rem,8.2vw,6.5rem);
  line-height:.98; letter-spacing:-.035em;
  max-width:15ch; margin-bottom:1.75rem;
}
.hero h1 em{ font-style:italic; color:var(--orange); }
.hero-sub{
  max-width:46ch; font-size:clamp(.98rem,1.6vw,1.12rem);
  color:rgba(250,250,248,.78); line-height:1.65;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; }

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 1.6rem; border-radius:999px;
  font-size:.9rem; font-weight:500; letter-spacing:-.01em;
  border:1px solid transparent;
  transition:all .25s cubic-bezier(.2,.8,.2,1);
}
.btn svg{ width:16px; height:16px; transition:transform .25s ease; }
.btn:hover svg{ transform:translateX(3px); }
.btn-primary{ background:var(--orange); color:var(--black); }
.btn-primary:hover{ background:var(--yellow); }
.btn-ghost{ border-color:rgba(250,250,248,.35); color:var(--off-white); }
.btn-ghost:hover{ border-color:var(--orange); color:var(--orange); }
.btn-dark{ background:var(--ink); color:var(--off-white); }
.btn-dark:hover{ background:var(--orange); color:var(--black); }
.btn-outline{ border-color:var(--border); color:var(--ink); }
.btn-outline:hover{ border-color:var(--ink); background:var(--ink); color:var(--off-white); }

.hero-stats{
  position:relative; z-index:2;
  border-top:1px solid rgba(250,250,248,.16);
  max-width:var(--maxw); margin-inline:auto; width:100%;
}
.hero-stats ul{
  display:grid; grid-template-columns:repeat(3,1fr);
  padding-inline:var(--pad);
}
.hero-stats li{ padding:1.4rem 0; }
.hero-stats li + li{ border-left:1px solid rgba(250,250,248,.16); padding-left:1.5rem; }
.hero-stats .v{ font-family:var(--font-display); font-size:clamp(1.15rem,2.6vw,1.9rem); line-height:1.1; }
.hero-stats .l{ color:rgba(250,250,248,.6); margin-top:.3rem; }
.scroll-hint{
  position:absolute; bottom:8.5rem; right:var(--pad); z-index:3;
  display:flex; align-items:center; gap:.6rem;
  color:rgba(250,250,248,.55);
}
.scroll-hint .line{
  width:1px; height:34px; background:linear-gradient(rgba(250,250,248,.5),transparent);
  animation:drop 1.8s ease-in-out infinite;
}
@keyframes drop{ 0%,100%{transform:scaleY(.4); transform-origin:top} 50%{transform:scaleY(1); transform-origin:top} }
@media (max-width:900px){ .scroll-hint{ display:none; } }

/* ---------- Section shell ---------- */
.section{ padding-block:clamp(4.5rem,10vw,9rem); }
.section-dark{ background:var(--ink); color:var(--off-white); }
.section-gray{ background:var(--light-gray); }
.label{
  display:flex; align-items:center; gap:.6rem;
  color:var(--dark-gray); margin-bottom:2.25rem;
}
.section-dark .label{ color:rgba(250,250,248,.55); }
.label::before{ content:""; width:26px; height:1px; background:var(--orange); }

.big-statement{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(1.9rem,5.2vw,4rem); line-height:1.08; letter-spacing:-.03em;
  max-width:22ch;
}
.big-statement .hl{ color:var(--orange); font-style:italic; }
.lede{ font-size:clamp(1rem,1.5vw,1.15rem); color:var(--dark-gray); max-width:56ch; line-height:1.7; }
.section-dark .lede{ color:rgba(250,250,248,.66); }

/* word reveal */
.reveal-words span{
  display:inline-block; opacity:0; transform:translateY(.5em);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.reveal-words.in span{ opacity:1; transform:none; }
.fade-up{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.fade-up.in{ opacity:1; transform:none; }

/* ---------- Stakes ---------- */
.stakes{ background:var(--ink); color:var(--off-white); }
.stakes-grid{ display:grid; gap:3rem; align-items:end; }
@media (min-width:1024px){ .stakes-grid{ grid-template-columns:1fr 1fr; gap:5rem; } }
.counter{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(3.4rem,12vw,9rem); line-height:.9; letter-spacing:-.05em;
  color:var(--orange); display:flex; align-items:baseline; gap:.06em;
}
.counter .unit{ font-size:.24em; color:var(--off-white); letter-spacing:-.01em; margin-left:.4em; }
.stakes-note{ margin-top:1.4rem; color:rgba(250,250,248,.45); }
.stakes-tag{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.75rem;
  border:1px solid rgba(255,123,61,.35); color:var(--orange);
  border-radius:999px; padding:.45rem 1rem;
}

/* ---------- Who we are / pillars ---------- */
.pillars{ display:grid; gap:1px; background:var(--border); margin-top:4rem; border-block:1px solid var(--border); }
@media (min-width:768px){ .pillars{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .pillars{ grid-template-columns:repeat(4,1fr); } }
.pillar{ background:var(--off-white); padding:2.25rem 1.75rem; transition:background .3s ease; }
.pillar:hover{ background:var(--light-gray); }
.pillar .n{ color:var(--orange); margin-bottom:1.4rem; }
.pillar h3{ font-family:var(--font-display); font-size:1.45rem; margin-bottom:.6rem; }
.pillar p{ color:var(--dark-gray); font-size:.92rem; line-height:1.65; }

.thesis{
  background:var(--ink); color:var(--off-white);
  padding-block:clamp(5rem,12vw,10rem); text-align:center;
}
.thesis .big-statement{ max-width:18ch; margin-inline:auto; }

/* ---------- Products ---------- */
.product-grid{ display:grid; gap:1px; background:var(--border); margin-top:3.5rem; border:1px solid var(--border); }
@media (min-width:700px){ .product-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1200px){ .product-grid{ grid-template-columns:repeat(4,1fr); } }
.product-card{ background:var(--off-white); display:flex; flex-direction:column; transition:background .3s ease; }
.product-card:hover{ background:var(--light-gray); }
.product-media{ aspect-ratio:4/3; overflow:hidden; background:var(--light-gray); }
.product-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.product-card:hover .product-media img{ transform:scale(1.06); }
.product-body{ padding:1.5rem 1.5rem 1.75rem; display:flex; flex-direction:column; flex:1; gap:.55rem; }
.product-top{ display:flex; align-items:center; justify-content:space-between; }
.product-top .idx{ color:var(--orange); }
.product-top .type{
  border:1px solid var(--border); border-radius:999px; padding:.2rem .6rem;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dark-gray);
}
.product-card h3{ font-family:var(--font-display); font-size:1.35rem; line-height:1.2; }
.product-card .purpose{ color:var(--dark-gray); font-size:.88rem; }
.product-link{
  margin-top:auto; padding-top:1.1rem;
  display:flex; align-items:center; gap:.45rem; color:var(--ink);
  font-size:.8rem; font-weight:500;
}
.product-link svg{ width:15px; height:15px; transition:transform .25s ease; }
.product-card:hover .product-link{ color:var(--orange); }
.product-card:hover .product-link svg{ transform:translateX(4px); }

.section-foot{ margin-top:3rem; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }

/* ---------- Farmer's corner ---------- */
.season-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
  margin-top:2.5rem;
}
.chip{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--border); border-radius:999px; padding:.45rem 1rem;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
}
.chip.accent{ background:var(--orange); border-color:var(--orange); color:var(--black); }
.section-dark .chip{ border-color:var(--border-light); }

.lang-rail{
  display:flex; gap:1px; overflow-x:auto; margin-top:2.5rem;
  background:var(--border); border:1px solid var(--border);
  scrollbar-width:thin;
}
.lang-card{
  background:var(--off-white); min-width:230px; flex:1 0 230px;
  padding:1.5rem 1.4rem; display:flex; flex-direction:column; gap:.5rem;
  transition:background .3s ease;
}
.lang-card:hover{ background:var(--light-gray); }
.lang-card .native{ font-size:1.35rem; line-height:1.3; }
.lang-card .en{ color:var(--dark-gray); }
.lang-card .title{ font-family:var(--font-display); font-size:1.05rem; line-height:1.35; margin-top:.35rem; }
.lang-card .meta{
  margin-top:auto; padding-top:1rem; display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-mono); font-size:.68rem; color:var(--dark-gray);
}
.lang-card:hover .meta .go{ color:var(--orange); }

.notes-grid{ display:grid; gap:1px; background:var(--border); border:1px solid var(--border); margin-top:2.5rem; }
@media (min-width:640px){ .notes-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .notes-grid{ grid-template-columns:repeat(3,1fr); } }
.note{ background:var(--off-white); padding:1.6rem 1.5rem; transition:background .3s ease; }
.note:hover{ background:var(--light-gray); }
.note .lang{ color:var(--orange); margin-bottom:.8rem; }
.note h4{ font-family:var(--font-display); font-size:1.15rem; line-height:1.35; margin-bottom:.7rem; }
.note .meta{ font-family:var(--font-mono); font-size:.68rem; color:var(--dark-gray); letter-spacing:.08em; }

/* ---------- Condition finder ---------- */
.finder{ display:grid; gap:0; margin-top:3.5rem; border-top:1px solid var(--border-light); }
.cond{ border-bottom:1px solid var(--border-light); }
.cond-head{
  width:100%; display:flex; align-items:center; gap:1.25rem; text-align:left;
  padding:1.5rem 0; transition:color .25s ease;
}
.cond-head:hover{ color:var(--orange); }
.cond-head .n{ font-family:var(--font-mono); font-size:.7rem; color:var(--orange); flex:none; width:2rem; }
.cond-head .t{ font-family:var(--font-display); font-size:clamp(1.1rem,2.4vw,1.65rem); line-height:1.25; flex:1; }
.cond-head .ico{ flex:none; width:22px; height:22px; display:grid; place-items:center; transition:transform .3s ease; }
.cond.open .cond-head .ico{ transform:rotate(45deg); color:var(--orange); }
.cond.open .cond-head{ color:var(--orange); }
.cond-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1); }
.cond.open .cond-body{ grid-template-rows:1fr; }
.cond-body > div{ overflow:hidden; }
.cond-inner{ padding:0 0 2rem 3.25rem; display:grid; gap:2rem; }
@media (min-width:900px){ .cond-inner{ grid-template-columns:1.4fr 1fr; align-items:start; } }
.cond-inner p{ color:rgba(250,250,248,.66); max-width:58ch; line-height:1.7; }
.builtfor{ border:1px solid var(--border-light); border-radius:var(--radius); padding:1.25rem; }
.builtfor .k{ color:rgba(250,250,248,.5); margin-bottom:.75rem; }
.builtfor .p{ font-family:var(--font-display); font-size:1.2rem; margin-bottom:1rem; }
.builtfor a{ display:inline-flex; align-items:center; gap:.45rem; color:var(--orange); font-size:.85rem; }
@media (max-width:640px){ .cond-inner{ padding-left:0; } }

/* ---------- How we work ---------- */
.steps{ margin-top:3.5rem; border-top:1px solid var(--border); }
.step{
  display:grid; gap:1rem; padding:2.25rem 0;
  border-bottom:1px solid var(--border);
  transition:padding-left .35s ease, background .35s ease;
}
@media (min-width:900px){
  .step{ grid-template-columns:4rem 1fr 1.1fr auto; align-items:start; gap:2.5rem; }
  .step:hover{ padding-left:1.25rem; }
}
.step .n{ font-family:var(--font-mono); font-size:.72rem; color:var(--orange); padding-top:.4rem; }
.step h3{ font-family:var(--font-display); font-size:clamp(1.25rem,2.6vw,1.85rem); line-height:1.2; }
.step p{ color:var(--dark-gray); line-height:1.7; }
.step .tags{ display:flex; flex-wrap:wrap; gap:.5rem; }

/* ---------- In the field ---------- */
.field-grid{ display:grid; gap:1px; background:var(--border-light); margin-top:3.5rem; border:1px solid var(--border-light); }
@media (min-width:820px){ .field-grid{ grid-template-columns:repeat(3,1fr); } }
.field-card{ background:var(--ink); padding:0; display:flex; flex-direction:column; }
.field-media{ aspect-ratio:16/10; overflow:hidden; }
.field-media img{ width:100%; height:100%; object-fit:cover; filter:saturate(.85); transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.field-card:hover .field-media img{ transform:scale(1.05); }
.field-body{ padding:1.6rem 1.5rem 2rem; }
.field-body h3{ font-family:var(--font-display); font-size:1.3rem; margin-bottom:.7rem; }
.field-body p{ color:rgba(250,250,248,.62); font-size:.92rem; line-height:1.65; }
.field-facts{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2.5rem; }
.section-dark .field-facts .chip{ color:rgba(250,250,248,.8); }

/* ---------- Drivers ---------- */
.drivers{ display:grid; gap:1px; background:var(--border); border:1px solid var(--border); margin-top:3.5rem; }
@media (min-width:900px){ .drivers{ grid-template-columns:repeat(3,1fr); } }
.driver{ background:var(--off-white); padding:2.5rem 1.9rem 2.75rem; position:relative; transition:background .3s ease; }
.driver:hover{ background:var(--light-gray); }
.driver .k{ color:var(--orange); margin-bottom:1.75rem; }
.driver h3{ font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.05; margin-bottom:.35rem; }
.driver h3 .sub{ display:block; color:var(--dark-gray); font-size:.5em; letter-spacing:-.01em; }
.driver .tagline{ font-size:.9rem; font-weight:500; margin:1rem 0 .85rem; }
.driver p{ color:var(--dark-gray); font-size:.92rem; line-height:1.7; }
.driver .num{
  position:absolute; right:1.5rem; bottom:1.4rem;
  font-family:var(--font-mono); font-size:.7rem; color:var(--border);
  color:rgba(10,10,10,.18);
}

/* ---------- Tech split ---------- */
.split{ display:grid; gap:0; align-items:stretch; }
@media (min-width:1000px){ .split{ grid-template-columns:1fr 1fr; } }
.split-media{ min-height:340px; background:var(--light-gray); }
.split-media img{ width:100%; height:100%; object-fit:cover; }
.split-body{ padding:clamp(2.5rem,6vw,5rem) var(--pad); display:flex; flex-direction:column; justify-content:center; }
@media (min-width:1000px){ .split-body{ padding-inline:clamp(3rem,5vw,5rem); } }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--orange); color:var(--black); padding-block:clamp(4rem,9vw,7.5rem); }
.cta-band .big-statement{ max-width:14ch; }
.cta-band .lede{ color:rgba(10,10,10,.72); }
.cta-band .btn-dark:hover{ background:var(--off-white); color:var(--ink); }
.cta-band .mail{
  display:inline-flex; align-items:center; gap:.5rem;
  border-bottom:1px solid rgba(10,10,10,.35); padding-bottom:.2rem; font-weight:500;
}
.cta-band .mail:hover{ border-color:var(--black); }
.cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem; margin-top:2.25rem; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:var(--off-white); padding-top:clamp(3.5rem,7vw,6rem); }
.footer-top{ display:grid; gap:3rem; }
@media (min-width:1000px){ .footer-top{ grid-template-columns:1.4fr 1fr 1fr; gap:4rem; } }
.footer-brand .brand-name{ color:var(--off-white); font-size:1.3rem; }
.footer-brand p{ color:rgba(250,250,248,.6); margin-top:1rem; max-width:34ch; line-height:1.7; }
.footer-contact{ margin-top:2rem; display:grid; gap:.6rem; font-size:.9rem; color:rgba(250,250,248,.6); }
.footer-contact a:hover{ color:var(--orange); }
.footer-social{ display:flex; gap:.4rem; margin-top:1.75rem; }
.footer-social a{
  width:40px; height:40px; border-radius:999px; border:1px solid var(--border-light);
  display:grid; place-items:center; transition:all .25s ease;
}
.footer-social a:hover{ border-color:var(--orange); color:var(--orange); }
.footer-social svg{ width:17px; height:17px; }
.footer-col h4{ color:rgba(250,250,248,.45); margin-bottom:1.25rem; }
.footer-col li{ margin-bottom:.7rem; }
.footer-col a{ color:rgba(250,250,248,.78); font-size:.92rem; }
.footer-col a:hover{ color:var(--orange); }
.footer-bottom{
  margin-top:clamp(3rem,6vw,5rem); border-top:1px solid var(--border-light);
  padding-block:1.75rem 2.25rem;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  color:rgba(250,250,248,.45); font-size:.8rem;
}
.footer-disclaimer{ color:rgba(250,250,248,.4); font-size:.78rem; max-width:60ch; }

/* ---------- Inner page hero ---------- */
.page-hero{
  background:var(--ink); color:var(--off-white);
  padding-top:clamp(8rem,16vw,12rem); padding-bottom:clamp(3.5rem,8vw,6rem);
}
.page-hero h1{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(2.2rem,6.5vw,4.75rem); line-height:1.02; letter-spacing:-.035em;
  max-width:18ch; margin-bottom:1.5rem;
}
.page-hero .lede{ color:rgba(250,250,248,.66); }
.crumbs{ display:flex; gap:.5rem; color:rgba(250,250,248,.45); margin-bottom:1.75rem; }
.crumbs a:hover{ color:var(--orange); }

/* ---------- Generic content ---------- */
.prose{ max-width:70ch; }
.prose h2{ font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2.1rem); margin:2.75rem 0 1rem; }
.prose h3{ font-family:var(--font-display); font-size:1.25rem; margin:2rem 0 .75rem; }
.prose p{ color:var(--dark-gray); line-height:1.8; margin-bottom:1.1rem; }
.prose ul{ margin:0 0 1.25rem; padding-left:1.1rem; list-style:disc; color:var(--dark-gray); }
.prose li{ margin-bottom:.5rem; line-height:1.75; }
.prose a{ color:var(--orange); border-bottom:1px solid rgba(255,123,61,.4); }

/* forms */
.form{ display:grid; gap:1.25rem; max-width:34rem; }
.field label{ display:block; margin-bottom:.5rem; color:var(--dark-gray); }
.field input,.field select,.field textarea{
  width:100%; padding:.85rem 1rem; border:1px solid var(--border);
  border-radius:10px; background:var(--off-white); font:inherit; color:var(--ink);
  outline:none; transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,123,61,.15);
}
.field textarea{ min-height:140px; resize:vertical; }
.form-note{ font-size:.82rem; color:var(--dark-gray); }
.form-ok{
  display:none; border:1px solid rgba(255,123,61,.4); background:rgba(255,123,61,.08);
  border-radius:10px; padding:1rem 1.15rem; color:var(--ink); font-size:.9rem;
}
.form-ok.show{ display:block; }

/* info grid used on inner pages */
.info-grid{ display:grid; gap:1px; background:var(--border); border:1px solid var(--border); margin-top:3rem; }
@media (min-width:720px){ .info-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .info-grid.c3{ grid-template-columns:repeat(3,1fr); } }
.info-card{ background:var(--off-white); padding:2rem 1.75rem; }
.info-card h3{ font-family:var(--font-display); font-size:1.3rem; margin-bottom:.6rem; }
.info-card p{ color:var(--dark-gray); font-size:.92rem; line-height:1.7; }
.info-card .k{ color:var(--orange); margin-bottom:1.25rem; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   Entrance animations (page load)
   ========================================================= */
.site-header{ opacity:0; transform:translateY(-20px); }
.site-header.ready{
  opacity:1; transform:none;
  transition:opacity .7s ease .15s, transform .7s cubic-bezier(.2,.8,.2,1) .15s,
             background .35s ease, border-color .35s ease, padding .35s ease;
}

.enter{ opacity:0; transform:translateY(26px); }
.enter.ready{
  opacity:1; transform:none;
  transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
}

/* hero background slow zoom-out on load */
.hero-bg img{ transform:scale(1.1); transition:transform 2.4s cubic-bezier(.2,.8,.2,1); }
.hero-bg.ready img{ transform:scale(1); }


/* link underline sweep used on inner nav lists */
.footer-col a,
.prose a{ position:relative; }

/* chip hover */
.chip{ transition:border-color .25s ease, color .25s ease, background .25s ease; }
.chip:hover{ border-color:var(--orange); color:var(--orange); }
.chip.accent:hover{ background:var(--yellow); border-color:var(--yellow); color:var(--black); }

/* card lift */
.note, .lang-card, .info-card{ transition:background .3s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.note:hover, .lang-card:hover{ transform:translateY(-3px); }

/* =========================================================
   Inner-page components
   ========================================================= */

/* page hero eyebrow reuses .crumbs spacing */
.page-hero .crumbs{ display:block; }
.page-hero .cta-row{ margin-top:2.25rem; }

/* ---------- Product type filter ---------- */
.filter-bar{
  display:flex; flex-wrap:wrap; gap:.6rem;
  padding-bottom:2.5rem; border-bottom:1px solid var(--border); margin-bottom:3rem;
}
.filter{
  display:inline-flex; align-items:center; gap:.55rem;
  border:1px solid var(--border); border-radius:999px; padding:.5rem 1.05rem;
  font-size:.86rem; font-weight:500;
  transition:all .25s cubic-bezier(.2,.8,.2,1);
}
.filter .c{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em;
  color:var(--dark-gray); transition:color .25s ease;
}
.filter:hover{ border-color:var(--ink); }
.filter.active{ background:var(--ink); border-color:var(--ink); color:var(--off-white); }
.filter.active .c{ color:var(--orange); }

/* ---------- Condition list rows ---------- */
.cond-list{ border-top:1px solid var(--border); }
.cond-row{
  display:grid; gap:.75rem; padding:2.25rem 0;
  border-bottom:1px solid var(--border);
  transition:padding-left .35s cubic-bezier(.2,.8,.2,1);
}
@media (min-width:820px){
  .cond-row{ grid-template-columns:4.5rem 1fr; gap:2.5rem; align-items:start; }
  .cond-row:hover{ padding-left:1.25rem; }
}
.cond-row .n{ color:var(--orange); padding-top:.45rem; }
.cond-row h3{
  font-family:var(--font-display); font-size:clamp(1.25rem,2.6vw,1.85rem);
  line-height:1.2; margin-bottom:.85rem;
}
.cond-row p{ color:var(--dark-gray); line-height:1.75; max-width:70ch; }
.cond-more{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:1.1rem;
  font-size:.82rem; font-weight:500; color:var(--ink);
}
.cond-more svg{ width:15px; height:15px; transition:transform .25s ease; }
.cond-row:hover .cond-more{ color:var(--orange); }
.cond-row:hover .cond-more svg{ transform:translateX(4px); }

/* ---------- Stat row (about) ---------- */
.stat-row{
  display:grid; gap:1px; background:var(--border);
  border:1px solid var(--border); margin-top:4rem;
}
@media (min-width:640px){ .stat-row{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .stat-row{ grid-template-columns:repeat(4,1fr); } }
.stat{ background:var(--off-white); padding:2rem 1.75rem; }
.stat .v{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(1.9rem,4vw,2.9rem); line-height:1; letter-spacing:-.03em;
  color:var(--orange);
}
.stat .l{ color:var(--dark-gray); margin-top:.7rem; }

/* ---------- Lead article (insights) ---------- */
.lead-article{
  display:grid; gap:0; border:1px solid var(--border);
  background:var(--off-white); overflow:hidden;
  transition:background .3s ease;
}
@media (min-width:900px){ .lead-article{ grid-template-columns:1fr 1fr; } }
.lead-article:hover{ background:var(--light-gray); }
.lead-media{ aspect-ratio:16/11; overflow:hidden; background:var(--light-gray); }
.lead-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.lead-article:hover .lead-media img{ transform:scale(1.05); }
.lead-body{
  padding:clamp(1.75rem,4vw,3rem);
  display:flex; flex-direction:column; justify-content:center;
}
.lead-body .meta{ color:var(--orange); margin-bottom:1.25rem; }
.lead-body h2{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(1.5rem,3.2vw,2.4rem); line-height:1.1; letter-spacing:-.03em;
  margin-bottom:1rem;
}
.lead-body p{ color:var(--dark-gray); line-height:1.7; }
.lead-body .product-link{ margin-top:1.75rem; padding-top:0; }
.lead-article:hover .product-link{ color:var(--orange); }
.lead-article:hover .product-link svg{ transform:translateX(4px); }

/* driver cards used as perk tiles on careers */
.driver .num{ pointer-events:none; }
.section-dark .drivers{ background:var(--border-light); border-color:var(--border-light); }
.section-dark .driver{ background:var(--ink); }
.section-dark .driver:hover{ background:#1b1714; }
.section-dark .driver h3{ color:var(--off-white); }
.section-dark .driver .num{ color:rgba(250,250,248,.18); }

/* product card without a link target still reads as a card */
article.product-card{ cursor:default; }
article.product-card .product-link{ color:var(--dark-gray); }
article.product-card:hover .product-link{ color:var(--orange); }

/* info-card headings that hold links */
.info-card h3 a:hover{ color:var(--orange); }

/* form success starts hidden for slideDown */
.form-ok{ display:none; }

/* ---------- Dairy Farmer's Corner ---------- */
.deva{ font-family:"Noto Sans Devanagari", var(--font-sans); }

.series-tabs{
  display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
  padding-bottom:2.5rem; border-bottom:1px solid var(--border); margin-bottom:3rem;
}

.series-feature{
  display:grid; gap:0; border:1px solid var(--border); overflow:hidden;
  background:var(--light-gray);
}
@media (min-width:900px){ .series-feature{ grid-template-columns:1fr 1fr; } }
.series-media{ aspect-ratio:16/11; overflow:hidden; }
.series-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.8,.2,1);
}
.series-feature:hover .series-media img{ transform:scale(1.05); }
.series-body{
  padding:clamp(1.75rem,4vw,3.25rem);
  display:flex; flex-direction:column; justify-content:center; gap:1rem;
}
.series-body .meta{ color:var(--orange); }
.series-body h2{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(1.8rem,4vw,3rem); line-height:1.15; letter-spacing:-.03em;
}
.series-body h2.deva{ font-family:"Noto Sans Devanagari", var(--font-display); font-weight:600; }
.series-body p{ color:var(--dark-gray); line-height:1.8; }
.series-body .btn{ align-self:flex-start; margin-top:.5rem; }

.also-in{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-top:2rem; }
.also-in .k{ color:var(--dark-gray); margin-right:.4rem; }
.lang-pill{
  display:inline-flex; align-items:baseline; gap:.5rem;
  border:1px solid var(--border); border-radius:999px; padding:.45rem 1rem;
  transition:all .25s ease;
}
.lang-pill:hover{ border-color:var(--orange); color:var(--orange); }
.lang-pill .native{ font-size:.98rem; }
.lang-pill .en{ color:var(--dark-gray); }
.lang-pill:hover .en{ color:var(--orange); }

.episodes{ display:grid; gap:1px; background:var(--border); border:1px solid var(--border); }
@media (min-width:700px){ .episodes{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1150px){ .episodes{ grid-template-columns:repeat(3,1fr); } }
.episode{
  background:var(--off-white); padding:1.75rem 1.6rem 2rem;
  display:flex; flex-direction:column; gap:.6rem;
  transition:background .3s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.episode:hover{ background:var(--light-gray); transform:translateY(-3px); }
.ep-top{ display:flex; align-items:center; justify-content:space-between; }
.ep-top .n{ color:var(--orange); font-size:.78rem; }
.ep-top .t{ color:var(--dark-gray); }
.episode h3{ font-size:1.12rem; line-height:1.5; font-weight:600; }
.episode p{ color:var(--dark-gray); font-size:.9rem; line-height:1.75; }
.episode .cond-more{ margin-top:auto; padding-top:1.1rem; }

/* =========================================================
   Hamburger button + full-screen menu overlay
   ========================================================= */
.burger{
  width:40px; height:40px; border-radius:999px;
  display:grid; place-items:center; gap:0;
  color:var(--off-white);
  transition:color .25s ease, background .25s ease;
}
.burger:hover{ color:var(--orange); background:rgba(255,255,255,.08); }
.site-header.is-stuck .burger,
.site-header.on-light .burger{ color:var(--ink); }
.site-header.is-stuck .burger:hover,
.site-header.on-light .burger:hover{ color:var(--orange); background:rgba(10,10,10,.05); }
.burger .bars{ display:block; width:20px; height:12px; position:relative; }
.burger .bars i{
  position:absolute; left:0; height:1.5px; width:100%; background:currentColor;
  border-radius:2px; transition:transform .3s cubic-bezier(.2,.8,.2,1), width .3s ease;
}
.burger .bars i:nth-child(1){ top:0; }
.burger .bars i:nth-child(2){ top:5px; }
.burger .bars i:nth-child(3){ top:10px; }
.burger:hover .bars i:nth-child(1){ transform:translateX(2px); width:calc(100% - 2px); }
.burger:hover .bars i:nth-child(3){ transform:translateX(-2px); width:calc(100% - 2px); }

/* ---------- overlay ---------- */
.menu-overlay{
  position:fixed; inset:0; z-index:90;
  background:var(--black);
  opacity:0; visibility:hidden;
  transition:opacity .45s cubic-bezier(.2,.8,.2,1), visibility .45s;
  display:flex; flex-direction:column;
  padding:1.5rem var(--pad) 2.5rem;
  overflow-y:auto;
}
.menu-overlay.open{ opacity:1; visibility:visible; }

.menu-close{
  position:absolute; top:1.75rem; right:var(--pad);
  width:38px; height:38px; border-radius:6px;
  display:grid; place-items:center;
  border:1px solid var(--orange); color:var(--orange);
  transition:background .25s ease, color .25s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.menu-close:hover{ background:var(--orange); color:var(--black); transform:rotate(90deg); }
.menu-close svg{ width:18px; height:18px; }

/* ---------- nav ---------- */
.menu-nav{
  flex:1; display:flex; align-items:center;
  padding-left:0; margin-top:4rem;
}
@media (min-width:900px){ .menu-nav{ padding-left:30%; margin-top:0; } }

.menu-nav li{ overflow:hidden; }
.menu-nav a{
  display:block;
  font-family:var(--font-sans); font-weight:400;
  font-size:clamp(1.85rem,4.6vw,3.1rem);
  line-height:1.28; letter-spacing:-.025em;
  color:var(--off-white);
  transform:translateY(105%);
  transition:color .25s ease, padding-left .35s cubic-bezier(.2,.8,.2,1);
}
.menu-overlay.open .menu-nav a{
  transform:translateY(0);
  transition:transform .72s cubic-bezier(.16,1,.3,1), color .25s ease,
             padding-left .35s cubic-bezier(.2,.8,.2,1);
}
.menu-nav a:hover,
.menu-nav a:focus-visible{ color:var(--orange); padding-left:1.15rem; }
.menu-nav a.current{ color:var(--orange); }

/* ---------- footer block ---------- */
.menu-foot{
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease .45s, transform .5s ease .45s;
}
.menu-overlay.open .menu-foot{ opacity:1; transform:none; }
.menu-foot .line{
  display:block; font-family:var(--font-mono); font-size:.74rem;
  letter-spacing:.06em; color:rgba(250,250,248,.55); margin-bottom:.35rem;
}
.menu-foot a.line:hover{ color:var(--orange); }
.menu-social{ display:flex; gap:.35rem; margin-top:1.1rem; }
.menu-social a{
  width:34px; height:34px; border-radius:999px;
  display:grid; place-items:center; color:rgba(250,250,248,.7);
  transition:color .25s ease, background .25s ease;
}
.menu-social a:hover{ color:var(--orange); background:rgba(255,255,255,.07); }
.menu-social svg{ width:16px; height:16px; }

body.menu-open{ overflow:hidden; }

/* =========================================================
   Hero — v2 layout: copy left, stat rail right, scroll centered
   (overrides the earlier hero block)
   ========================================================= */
.hero{ justify-content:center; }

.hero-bg::after{
  background:
    linear-gradient(to right, rgba(10,10,10,.78) 0%, rgba(10,10,10,.42) 42%, rgba(10,10,10,.12) 70%, rgba(10,10,10,.30) 100%),
    linear-gradient(to bottom, rgba(10,10,10,.55) 0%, rgba(10,10,10,0) 28%, rgba(10,10,10,0) 68%, rgba(10,10,10,.55) 100%);
}

.hero-inner{
  display:grid; gap:3rem; align-items:center;
  padding-block:7rem 6rem;
}
@media (min-width:1000px){
  .hero-inner{ grid-template-columns:minmax(0,1fr) 16rem; gap:4rem; }
}

.hero-eyebrow{ display:flex; align-items:center; gap:.6rem; }
.hero-eyebrow .dot{ color:var(--orange); font-size:1.1em; line-height:1; }

.hero h1{
  max-width:none;
  font-size:clamp(2.5rem,6.6vw,5.4rem);
  line-height:1.03; margin-bottom:2rem;
}
.hero h1 em{ font-style:italic; }
.hero h1 em.y{ color:var(--yellow); }
.hero h1 em.o{ color:var(--orange); }

.hero-sub{ max-width:42ch; }

/* right-hand stat rail */
.hero-stats{
  border-top:0; max-width:none; margin:0; width:100%;
}
.hero-stats ul{ display:block; padding-inline:0; }
.hero-stats li{
  padding:1.15rem 0;
  border-top:1px solid rgba(250,250,248,.18);
}
.hero-stats li:first-child{ border-top:0; }
.hero-stats li + li{ border-left:0; padding-left:0; }
.hero-stats .v{
  font-size:clamp(1.4rem,2.4vw,2rem);
  color:var(--off-white);
}
.hero-stats .l{ color:rgba(250,250,248,.55); margin-top:.25rem; }

@media (max-width:999px){
  .hero-stats ul{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
  .hero-stats li{ border-top:1px solid rgba(250,250,248,.18); padding:1rem 0 0; }
  .hero-stats li:first-child{ border-top:1px solid rgba(250,250,248,.18); }
}

/* scroll cue, bottom centre */
.scroll-hint{
  left:50%; right:auto; bottom:2.25rem;
  transform:translateX(-50%);
  flex-direction:column; gap:.55rem;
}
@media (max-width:900px){ .scroll-hint{ display:none; } }

/* two-line stacked wordmark, like the reference */
.brand-name{
  font-size:.92rem; line-height:1.05; white-space:normal;
  display:inline-block; max-width:6ch;
}

/* =========================================================
   "What drives us" — stacked purpose / mission / vision cards
   ========================================================= */
.pmv-section{
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255,123,61,.13), transparent 55%),
    linear-gradient(180deg, #171310 0%, #120f0d 55%, #0d0b0a 100%);
  color:var(--off-white);
}
.pmv-section .label{ color:rgba(250,250,248,.55); }
.pmv-section .lede{ color:rgba(250,250,248,.62); }

.pmv{ display:grid; gap:1.15rem; margin-top:3.5rem; }

.pmv-card{
  position:relative; overflow:hidden;
  display:grid; gap:1.5rem;
  padding:2.15rem 2rem;
  border-radius:16px;
  border:1px solid rgba(250,250,248,.07);
  background:linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  transition:background .4s ease, border-color .4s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
@media (min-width:980px){
  .pmv-card{
    grid-template-columns:16rem minmax(0,1fr) auto;
    gap:2.5rem; align-items:center;
    padding:2.4rem 2.5rem;
  }
}
/* orange rail on the active / hovered card */
.pmv-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--orange);
  transform:scaleY(0); transform-origin:center;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.pmv-card.active::before,
.pmv-card:hover::before{ transform:scaleY(1); }
.pmv-card.active,
.pmv-card:hover{
  background:linear-gradient(135deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
  border-color:rgba(255,123,61,.22);
}
@media (min-width:980px){
  .pmv-card.active,
  .pmv-card:hover{ transform:translateX(6px); }
}

.pmv-side{ display:flex; flex-direction:column; align-items:flex-start; gap:.9rem; }
.pmv-icon{
  width:56px; height:56px; border-radius:15px;
  display:grid; place-items:center; color:#2a1b12;
  background:linear-gradient(145deg, var(--warm-orange), var(--orange));
  box-shadow:0 8px 22px rgba(255,123,61,.22);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.pmv-card:hover .pmv-icon,
.pmv-card.active .pmv-icon{ transform:translateY(-2px) rotate(-4deg); }
.pmv-icon svg{ width:24px; height:24px; }

.pmv-k{ color:var(--orange); }

.pmv-chip{
  display:inline-flex; flex-direction:column; gap:.15rem;
  padding:.6rem .95rem; border-radius:10px;
  border:1px solid rgba(250,250,248,.09);
  background:rgba(0,0,0,.32);
}
.pmv-chip b{ color:var(--orange); font-weight:500; font-size:1rem; letter-spacing:-.01em; }
.pmv-chip i{ font-style:normal; color:rgba(250,250,248,.5); font-size:.62rem; }

.pmv-main h3{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.35rem,2.7vw,2.05rem); line-height:1.15; letter-spacing:-.025em;
  margin-bottom:.85rem;
}
.pmv-main p{ color:rgba(250,250,248,.62); line-height:1.75; max-width:62ch; }

.pmv-num{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(3.5rem,8vw,6.5rem); line-height:.85; letter-spacing:-.05em;
  color:rgba(255,123,61,.24);
  transition:color .45s ease;
  justify-self:end;
}
.pmv-card.active .pmv-num,
.pmv-card:hover .pmv-num{ color:var(--orange); }

/* =========================================================
   Farmer's Corner — thumbnails left, language list right
   ========================================================= */
.fc-grid{ display:grid; gap:2.5rem; margin-top:3rem; }
@media (min-width:1000px){ .fc-grid{ grid-template-columns:.72fr 1fr; gap:3.5rem; } }

.fc-media{ display:grid; gap:1.15rem; align-content:start; }
.fc-thumb{
  display:block; border-radius:14px; overflow:hidden;
  border:1px solid var(--border); background:var(--off-white);
  aspect-ratio:16/10;
}
.fc-thumb img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.fc-thumb:hover img{ transform:scale(1.05); }

.fc-list{ border-top:1px solid var(--border); }
.fc-row{
  position:relative;
  display:grid; grid-template-columns:1fr auto auto;
  grid-template-areas:"lang count go" "title count go";
  gap:.15rem 1.25rem; align-items:center;
  padding:1.05rem 0 1.05rem 0;
  border-bottom:1px solid var(--border);
  transition:padding-left .35s cubic-bezier(.2,.8,.2,1);
}
.fc-row::before{
  content:""; position:absolute; left:0; top:8%; bottom:8%; width:2px;
  background:var(--orange);
  transform:scaleY(0); transform-origin:center;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.fc-row.active::before,
.fc-row:hover::before{ transform:scaleY(1); }
.fc-row.active,
.fc-row:hover{ padding-left:1rem; }

.fc-lang{ grid-area:lang; display:flex; align-items:baseline; gap:.6rem; }
.fc-lang b{ font-weight:500; font-size:.9rem; color:var(--ink); }
.fc-lang i{ font-style:normal; color:var(--dark-gray); font-size:.6rem; }

.fc-title{
  grid-area:title;
  font-size:clamp(1rem,1.7vw,1.28rem); line-height:1.5; color:var(--ink);
  transition:color .25s ease;
}
.fc-row.active .fc-title,
.fc-row:hover .fc-title{ color:var(--orange); }

.fc-count{ grid-area:count; color:var(--dark-gray); }
.fc-go{ grid-area:go; color:var(--orange); opacity:0; transition:opacity .25s ease, transform .25s ease; }
.fc-go svg{ width:16px; height:16px; }
.fc-row.active .fc-go,
.fc-row:hover .fc-go{ opacity:1; transform:translateX(3px); }

/* script-specific faces so each language renders properly */
[lang="hi"], [lang="mr"]{ font-family:"Noto Sans Devanagari", var(--font-sans); }
[lang="bn"]{ font-family:"Noto Sans Bengali", var(--font-sans); }
[lang="kn"]{ font-family:"Noto Sans Kannada", var(--font-sans); }
[lang="pa"]{ font-family:"Noto Sans Gurmukhi", var(--font-sans); }
[lang="te"]{ font-family:"Noto Sans Telugu", var(--font-sans); }
[lang] .mono{ font-family:var(--font-mono); }

/* =========================================================
   Counter — stop the jitter and the bad unit wrap
   ========================================================= */
.counter{
  display:flex; align-items:baseline; flex-wrap:nowrap;
  gap:.02em;
  font-size:clamp(2.8rem,9vw,7rem);
}
/* Digits change every frame while counting: tabular figures keep every
   glyph the same advance width, so the number cannot shift the layout. */
.counter [data-count]{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
  display:inline-block;
  min-width:7.2ch;            /* final width of "1,00,000" — unit never shifts */
  text-align:left;
}
.counter .unit{
  white-space:nowrap;
  font-size:.2em;
  align-self:flex-end;
  margin-left:.5em; margin-bottom:.55em;
  line-height:1.25;
  color:rgba(250,250,248,.85);
}
@media (max-width:560px){
  .counter{ flex-wrap:wrap; }
  .counter .unit{ margin-left:0; margin-bottom:0; width:100%; }
}

/* Farmer's Corner: keep the thumbnails alongside the long list */
@media (min-width:1000px){
  .fc-media{ position:sticky; top:7rem; }
}

/* =========================================================
   Command palette — v2, matched to the reference
   ========================================================= */
.palette{ padding-top:11vh; background:rgba(10,10,10,.42); }
.palette-box{
  max-width:576px; border-radius:12px;
  border:1px solid rgba(10,10,10,.08);
  box-shadow:0 24px 64px rgba(10,10,10,.22), 0 2px 8px rgba(10,10,10,.08);
  background:#fff;
}

.palette-input{ padding:1.05rem 1.15rem; border-bottom:1px solid rgba(10,10,10,.07); }
.palette-input svg{ color:#8a8378; }
.palette-input input{ font-size:.98rem; }
.palette-input input::placeholder{ color:#9b948a; }
.palette-input .esc{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.04em;
  text-transform:lowercase; color:#8a8378;
  border:1px solid rgba(10,10,10,.12); border-radius:6px; padding:.18rem .45rem;
}

/* hide the scrollbar but keep it scrollable */
.palette-list{
  max-height:min(52vh,420px); padding:.45rem .5rem .6rem;
  scrollbar-width:none; -ms-overflow-style:none;
}
.palette-list::-webkit-scrollbar{ width:0; height:0; }

.palette-group{
  padding:.7rem .7rem .3rem;
  font-size:.62rem; letter-spacing:.16em; color:#9b948a;
}

.palette-item{
  padding:.62rem .7rem; border-radius:8px; gap:1rem;
  outline:none;                 /* the row highlight is the focus cue */
  transition:background .14s ease;
}
.palette-item:focus-visible{ background:#fff1e5; }
.palette-item:hover,
.palette-item.active{ background:#fff1e5; }

.palette-item .t{ font-size:.94rem; font-weight:500; color:var(--ink); line-height:1.35; }
.palette-item .d{ font-size:.8rem; color:#8a8378; line-height:1.4; }

.palette-item .right{ display:flex; align-items:center; gap:.6rem; flex:none; }
.palette-item .kind{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--orange);
}
.palette-item .arrow{ color:var(--orange); font-size:.95rem; line-height:1; }

.palette-empty{ padding:2.25rem 1rem; color:#8a8378; }

/* footer hint bar */
.palette-foot{
  display:flex; align-items:center; gap:1.35rem;
  padding:.7rem 1rem; border-top:1px solid rgba(10,10,10,.07);
  background:#fcfbf9; border-radius:0 0 12px 12px;
}
.pf-group{ display:inline-flex; align-items:center; gap:.45rem; }
.pf-right{ margin-left:auto; }
.pf-keys{ display:inline-flex; gap:.2rem; }
.pf-keys kbd{
  font-family:var(--font-mono); font-size:.62rem; line-height:1;
  color:#6f685e; background:#fff;
  border:1px solid rgba(10,10,10,.14); border-radius:4px;
  padding:.22rem .34rem; min-width:1.15rem; text-align:center;
}
.pf-label{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:#9b948a;
}
@media (max-width:420px){ .palette-foot{ gap:.8rem; } .pf-label{ display:none; } }

/* =========================================================
   Product detail pages
   ========================================================= */
.prod-hero{
  background:var(--ink); color:var(--off-white);
  padding-top:clamp(7.5rem,14vw,10.5rem); padding-bottom:clamp(3rem,7vw,5rem);
}
.prod-hero-grid{ display:grid; gap:3rem; align-items:center; }
@media (min-width:980px){ .prod-hero-grid{ grid-template-columns:1.15fr .85fr; gap:4rem; } }

.prod-hero .crumbs{ color:rgba(250,250,248,.45); margin-bottom:1.5rem; }
.prod-hero .crumbs a:hover{ color:var(--orange); }
.prod-hero .crumbs span{ margin:0 .45rem; }

.prod-type{
  display:inline-block; margin-bottom:1.1rem;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange);
  border:1px solid rgba(255,123,61,.4); border-radius:999px; padding:.3rem .8rem;
}
.prod-hero h1{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(2.1rem,5.5vw,4rem); line-height:1.04; letter-spacing:-.035em;
  margin-bottom:1.25rem;
}
.prod-hero .lede{ color:rgba(250,250,248,.7); max-width:50ch; }

.prod-meta{
  display:flex; flex-wrap:wrap; gap:2.5rem; margin:2rem 0 0;
  padding-top:1.75rem; border-top:1px solid var(--border-light);
}
.prod-meta dt{ color:rgba(250,250,248,.45); margin-bottom:.4rem; }
.prod-meta dd{ margin:0; font-size:1.02rem; }

.prod-hero-media{
  border-radius:16px; overflow:hidden;
  background:var(--light-gray);
  border:1px solid var(--border-light);
  aspect-ratio:4/3;
}
.prod-hero-media img{ width:100%; height:100%; object-fit:cover; }

/* composition / indications */
.prod-detail{ display:grid; gap:3rem; }
@media (min-width:860px){ .prod-detail{ grid-template-columns:repeat(2,1fr); gap:4rem; } }

ul.tick{ list-style:none; margin:0; padding:0; }
ul.tick li{
  position:relative; padding:.7rem 0 .7rem 1.75rem;
  border-bottom:1px solid var(--border);
  color:var(--ink); line-height:1.6;
}
ul.tick li::before{
  content:""; position:absolute; left:0; top:1.25rem;
  width:7px; height:7px; border-radius:50%;
  background:var(--orange);
}

.prod-dosage{
  margin-top:3.5rem; padding-top:2.5rem; border-top:1px solid var(--border);
}
.prod-dosage p{ color:var(--dark-gray); line-height:1.85; max-width:78ch; }

/* clickable condition rows reuse .cond-row */
a.cond-row{ display:grid; }
@media (min-width:820px){ a.cond-row{ grid-template-columns:4.5rem 1fr; } }

/* =========================================================
   Custom cursor — molecule, like the reference
   ========================================================= */
body{ cursor:url(../img/cursor-molecule.png) 18 18, auto; }
a, button, [role="button"], summary, label[for],
.cond-head, .filter, .pmv-card, .fc-row, .palette-item{
  cursor:url(../img/cursor-molecule.png) 18 18, pointer;
}
input, textarea, select{ cursor:url(../img/cursor-molecule.png) 18 18, text; }
input[type="submit"], button[disabled]{ cursor:url(../img/cursor-molecule.png) 18 18, pointer; }
button[disabled]{ cursor:url(../img/cursor-molecule.png) 18 18, not-allowed; }

/* gradient wordmark colour for "real world." — yellow → warm orange → orange */
.hero h1 em.y, .hero h1 em.o{
  background:linear-gradient(100deg, var(--yellow), var(--warm-orange) 55%, var(--orange));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  display:inline-block; margin-right:.08em;
}

/* =========================================================
   Portfolio — large alternating rows (reference layout)
   ========================================================= */
.folio{ margin-top:clamp(3.5rem,8vw,6rem); display:grid; gap:clamp(4rem,9vw,8rem); }

.folio-row{ display:grid; gap:2rem; align-items:center; }
@media (min-width:1000px){
  .folio-row{ grid-template-columns:repeat(2,1fr); gap:4rem; }
  .folio-row:nth-child(even) .folio-media{ order:2; }
}

.folio-media{
  position:relative; overflow:hidden;
  aspect-ratio:4/3; border-radius:24px;
  background:var(--light-gray);
}
/* the image is oversized so it can drift on hover without showing an edge */
.folio-media img{
  position:absolute; inset:-7%;
  width:114%; height:114%;
  max-width:none;            /* the global img{max-width:100%} would clip the oversize */
  object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.8,.2,1), filter .9s ease;
}
.folio-row:hover .folio-media img{ transform:scale(1.06) translateY(-1.2%); }

/* soft wash that lifts on hover */
.folio-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(140deg, rgba(255,123,61,.16), rgba(20,17,15,.10));
  opacity:0; transition:opacity .7s ease;
}
.folio-row:hover .folio-media::after{ opacity:1; }

.folio-body{ display:flex; flex-direction:column; align-items:flex-start; gap:.9rem; }
.folio-top{ display:flex; align-items:center; gap:.85rem; }
.folio-top .idx{ color:var(--orange); }
.folio-top .type{
  border:1px solid var(--border); border-radius:999px; padding:.22rem .7rem;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dark-gray);
  transition:border-color .3s ease, color .3s ease;
}
.folio-row:hover .folio-top .type{ border-color:var(--orange); color:var(--orange); }

.folio-body h3{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(1.7rem,3.6vw,2.85rem); line-height:1.08; letter-spacing:-.03em;
}
.folio-purpose{ color:var(--orange); font-size:.95rem; }
.folio-body p{ color:var(--dark-gray); line-height:1.75; max-width:48ch; }

.folio-link{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:.6rem; padding-bottom:.3rem;
  font-size:.9rem; font-weight:500; color:var(--ink);
  border-bottom:1px solid var(--border);
  transition:color .3s ease, border-color .3s ease, gap .3s ease;
}
.folio-link svg{ width:16px; height:16px; }
.folio-row:hover .folio-link{ color:var(--orange); border-color:var(--orange); gap:.8rem; }

/* =========================================================
   Product carousel
   ========================================================= */
.carousel{ margin-top:clamp(2.5rem,6vw,4rem); position:relative; }

.carousel-head{ display:flex; justify-content:flex-end; margin-bottom:1.5rem; }
.carousel-nav{ display:flex; gap:.5rem; }
.cbtn{
  width:46px; height:46px; border-radius:999px;
  display:grid; place-items:center;
  border:1px solid var(--border); color:var(--ink);
  transition:all .3s cubic-bezier(.2,.8,.2,1);
}
.cbtn svg{ width:18px; height:18px; }
.cbtn:hover:not(:disabled){ background:var(--ink); border-color:var(--ink); color:var(--off-white); }
.cbtn:disabled{ opacity:.3; cursor:not-allowed; }

/* the track scrolls natively: touch + trackpad work for free */
.carousel-track{
  display:flex; gap:1.25rem;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
  padding-bottom:.5rem;
}
.carousel-track::-webkit-scrollbar{ height:0; width:0; }
.carousel-track.dragging{ scroll-behavior:auto; scroll-snap-type:none; cursor:grabbing; }
.carousel-track.dragging .slide{ pointer-events:none; }

.slide{
  flex:0 0 auto; width:min(78vw,330px);
  scroll-snap-align:start;
  display:flex; flex-direction:column; gap:.85rem;
  border:1px solid var(--border); border-radius:18px;
  background:var(--off-white); overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),
             box-shadow .45s ease, border-color .45s ease;
}
.slide:hover{
  transform:translateY(-6px);
  border-color:rgba(255,123,61,.35);
  box-shadow:0 18px 40px rgba(20,17,15,.10);
}

.slide-media{ aspect-ratio:4/3; overflow:hidden; background:var(--light-gray); }
.slide-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.slide:hover .slide-media img{ transform:scale(1.07); }

.slide-body{ padding:0 1.35rem 1.6rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.slide-top{ display:flex; align-items:center; gap:.7rem; }
.slide-top .idx{ color:var(--orange); font-size:.68rem; }
.slide-top .type{
  border:1px solid var(--border); border-radius:999px; padding:.2rem .65rem;
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dark-gray);
  transition:border-color .3s ease, color .3s ease;
}
.slide:hover .slide-top .type{ border-color:var(--orange); color:var(--orange); }
.slide h3{ font-family:var(--font-display); font-size:1.3rem; line-height:1.2; }
.slide-purpose{ color:var(--dark-gray); font-size:.86rem; line-height:1.55; }
.slide-link{
  margin-top:auto; padding-top:1rem;
  display:flex; align-items:center; gap:.45rem;
  font-size:.8rem; font-weight:500; color:var(--ink);
  transition:color .3s ease, gap .3s ease;
}
.slide-link svg{ width:15px; height:15px; }
.slide:hover .slide-link{ color:var(--orange); gap:.7rem; }

.carousel-progress{
  margin-top:1.75rem; height:2px; background:var(--border); border-radius:2px; overflow:hidden;
}
.carousel-progress span{
  display:block; height:100%; width:25%;
  background:var(--orange); border-radius:2px;
  transition:width .25s ease, transform .25s ease;
}

/* =========================================================
   Typography — matched to the reference's computed values
   (read off ontralabs.in, not eyeballed):
     Fraunces      weight 500   (was 300 here — the main difference)
     h1     80px / ls -2.4px  (-0.03em)  / lh 0.98
     h2     60px / ls -0.9px  (-0.015em) / lh 1.05
     h2 sm  48px / ls -0.72px (-0.015em) / lh 1.10
     h3     18px / ls -0.27px (-0.015em) / lh 1.55
     body   IBM Plex Sans 400 / 16px / lh 1.5
     mono   IBM Plex Mono 400 / 12px / ls 3.36px (0.28em)
   ========================================================= */
body{ line-height:1.5; }

.mono{
  font-size:.75rem;          /* 12px */
  letter-spacing:.28em;
  font-weight:400;
}

/* every display-serif element runs at 500, like the reference */
.serif,
.big-statement,
.hero h1,
.page-hero h1,
.prod-hero h1,
.counter,
.hero-stats .v,
.stat .v,
.pillar h3,
.product-card h3,
.folio-body h3,
.slide h3,
.lang-card .title,
.note h4,
.cond-head .t,
.cond-row h3,
.builtfor .p,
.step h3,
.field-body h3,
.driver h3,
.info-card h3,
.lead-body h2,
.series-body h2,
.pmv-main h3,
.pmv-num,
.prose h2,
.prose h3{
  font-weight:500;
  letter-spacing:-.015em;
}

/* the two display sizes that carry tighter tracking */
.hero h1,
.page-hero h1,
.prod-hero h1,
.counter,
.pmv-num{ letter-spacing:-.03em; }

.folio-body h3,
.lead-body h2{ letter-spacing:-.025em; }

.hero h1{ line-height:.98; }
.big-statement{ line-height:1.05; }
.cond-row h3,
.step h3,
.cond-head .t{ line-height:1.1; }
.pillar h3,
.info-card h3,
.slide h3,
.product-card h3{ line-height:1.35; }

/* Indic: Devanagari matches the reference, the rest fall back to Noto */
[lang="hi"], [lang="mr"], .deva{
  font-family:"IBM Plex Sans Devanagari", "Noto Sans Devanagari", var(--font-sans);
}
.series-body h2.deva{ font-weight:600; }

/* ---- size corrections, measured against the reference at 1440px ----
   reference: h1 80px/0.98 · h2 60px/1.05 · h3 18px/1.55 · lede 18px/1.55 */
.hero h1{ font-size:clamp(2.5rem,6.2vw,5rem); }          /* was 5.4rem -> 86px */
.big-statement{ font-size:clamp(1.85rem,4.9vw,3.75rem); } /* was 4rem -> 64px */
.pillar h3{ font-size:1.125rem; line-height:1.55; }       /* was 1.45rem -> 23px */
.lede{ line-height:1.55; }                                /* was 1.7 */
.page-hero h1{ font-size:clamp(2.1rem,6vw,4.5rem); }
.prod-hero h1{ font-size:clamp(2rem,5.2vw,3.75rem); }

/* =========================================================
   Mobile refinements
   ========================================================= */

/* Hero: on a phone the crop puts the headline over light fur, so the
   wash needs to be vertical and stronger than the desktop left-to-right one. */
@media (max-width:900px){
  .hero-bg::after{
    background:
      linear-gradient(to bottom,
        rgba(10,10,10,.70) 0%,
        rgba(10,10,10,.45) 32%,
        rgba(10,10,10,.52) 62%,
        rgba(10,10,10,.86) 100%),
      linear-gradient(to right, rgba(10,10,10,.45), rgba(10,10,10,.15));
  }
  .hero-inner{ padding-block:6.5rem 3rem; }
  .hero-sub{ max-width:34ch; }
}

/* Touch targets: text links need real height on a phone (~44px). */
@media (max-width:768px){
  .footer-col li{ margin-bottom:0; }
  .footer-col a{ display:block; padding:.72rem 0; }

  .builtfor a{ padding:.7rem 0; }
  .footer-contact a{ display:inline-block; padding:.42rem 0; }
  .cta-band .mail{ padding:.6rem 0; }
  .menu-foot a.line{ display:inline-block; padding:.35rem 0; }
  .lang-pill, .chip{ padding-block:.6rem; }
  .cond-more, .product-link, .folio-link, .slide-link{ padding-block:.5rem; }
}

/* Tighter section rhythm and card padding on small screens */
@media (max-width:640px){
  .section{ padding-block:clamp(3.25rem,11vw,4.5rem); }

  .pmv-card{ padding:1.6rem 1.35rem; border-radius:14px; }
  .pmv-num{ position:absolute; top:1.2rem; right:1.2rem; font-size:2.6rem; }
  .pmv-side{ gap:.7rem; }

  .prod-meta{ gap:1.75rem; }
  .prod-hero-media{ border-radius:14px; }

  .carousel-head{ justify-content:space-between; align-items:center; }
  .slide{ width:82vw; }

  .lead-body, .series-body{ padding:1.5rem 1.25rem 1.75rem; }
  .fc-row{ grid-template-columns:1fr auto; }
  .fc-row .fc-go{ display:none; }

  .footer-bottom{ flex-direction:column; gap:.75rem; }
}

/* Menu overlay: give the links room to breathe on a phone */
@media (max-width:640px){
  .menu-nav{ margin-top:3.25rem; align-items:flex-start; }
  .menu-nav a{ padding-block:.18rem; }
  .menu-overlay{ padding-block:1.25rem 2rem; }
}