/*
Theme Name: Leafy
Theme URI: https://leafy.cafe
Description: Custom theme for Leafy Cafe — fresh school meals and salad bowls, Ahmedabad.
Author: Leafy Cafe
Version: 0.4.7
Requires PHP: 8.1
Text Domain: leafy
*/

/* ============================================================
   1. Tokens
   Promoted from the cart/subscription prototype system; muted
   text darkened for WCAG AA on cream.
   ============================================================ */
:root{
  --bg:#FCFBF7; --cream:#FBF8EF; --white:#FFFFFF;
  --ink:#3F5236; --ink2:#67705C; --ink3:#7C8270;
  --sage:#5C7A50; --sage2:#6E9152; --sage-d:#4A6340;
  --sage-c1:#E9F0DD; --sage-c2:#E3EDD3; --band:#F4F7EE;
  --peach:#C77E5A; --peach-d:#A85835; --peach-c:#F7E3D4;
  --butter:#C9A35A; --butter-d:#8A6A2C; --butter-c:#F8EFC9;
  --lav:#8E86D6; --lav-d:#5F55B8; --lav-c:#E7E3F2;
  --line:#ECE6D8; --line2:#DFD9C8;
  --r-pill:999px; --r-card:20px; --r-panel:26px;
  --shadow-soft:0 18px 44px -28px rgba(92,122,80,.6);
  --shadow-lift:0 10px 30px -12px rgba(63,82,54,.28);
  --font-d:'Fraunces',Georgia,serif;
  --font-b:'DM Sans',system-ui,-apple-system,sans-serif;
  --wrap:1120px;
}

/* ============================================================
   2. Base
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 16px/1.6 var(--font-b);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:var(--font-d); font-weight:600; line-height:1.08; margin:0; color:var(--ink); }
h1{ font-size:clamp(36px,5.4vw,58px); letter-spacing:-.01em; }
h2{ font-size:clamp(27px,4vw,42px); letter-spacing:-.008em; }
h3{ font-size:clamp(20px,2.6vw,25px); }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
em, .ital{ font-style:italic; font-weight:400; }
button{ font-family:var(--font-b); cursor:pointer; }
:focus-visible{ outline:3px solid var(--sage2); outline-offset:2px; border-radius:4px; }
::selection{ background:var(--sage-c2); }
.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:22px; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--cream); padding:10px 18px; border-radius:0 0 12px 0; z-index:200; }
.skip-link:focus{ left:0; }

/* ============================================================
   3. Buttons, pills, small parts
   ============================================================ */
/* Inline icons (leafy_icon()). Never shrink in a flex row, and sit on the
   text baseline rather than the line box when used in flowing copy. */
.ic{ flex:none; vertical-align:-.18em; }
.foot-made{ display:inline-flex; align-items:center; gap:6px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--r-pill); padding:14px 26px;
  font:700 15px/1 var(--font-b); border:1.5px solid transparent;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:var(--sage); color:var(--cream); box-shadow:0 10px 22px -10px rgba(92,122,80,.55); }
.btn-primary:hover{ background:var(--sage-d); }
.btn-outline{ border-color:var(--ink); color:var(--ink); background:transparent; }
.btn-outline:hover{ background:rgba(63,82,54,.06); }
.btn-peach{ background:var(--peach); color:#fff; box-shadow:0 10px 22px -10px rgba(199,126,90,.55); }
.btn-peach:hover{ background:var(--peach-d); }
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font:600 12.5px/1 var(--font-b); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink2); background:var(--white); border:1px solid var(--line);
  padding:8px 16px; border-radius:var(--r-pill);
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--sage2); position:relative; }
.eyebrow .dot::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1.5px solid var(--sage2); animation:ping 2.2s ease-out infinite;
}
.sub{ font-size:17.5px; line-height:1.65; color:var(--ink2); }
.arrow-link{ font:700 15px var(--font-b); color:var(--sage); display:inline-flex; align-items:center; gap:6px; }
.arrow-link::after{ content:"→"; transition:transform .18s ease; }
.arrow-link:hover::after{ transform:translateX(4px); }

/* ============================================================
   4. Header / navigation
   ============================================================ */
.site-head{
  position:sticky; top:0; z-index:100;
  background:rgba(252,251,247,.9); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{ display:flex; align-items:center; gap:26px; min-height:74px; }
.brand{ display:inline-flex; align-items:center; gap:8px; margin-right:auto; }
.brand img.brand-icon{ width:46px; height:46px; object-fit:contain; }
.brand img.brand-wordmark{ height:40px; width:auto; }

/* --- Header lockup ------------------------------------------------------
   Both logo files carry a lot of baked-in transparent padding, measured from
   the opaque-pixel bounds of the 512px exports:
     icon     — mascot fills 59.8% x 66% of its square (20.5% left, 19.7%
                right, 14.8% top, 19.1% bottom)
     wordmark — script fills 77.7% x 49.6% of its 512x240 box (11.7% left)
   So a nominal 46px icon only draws a 30px mascot, and gap:8px reads as ~27px
   of air. The negative margins below cancel that padding, which lets the icon
   box grow past the bar height while the drawn mascot stays in proportion.
   Re-measure these fractions if the logo files are ever re-exported.
   Footer keeps the plain .brand rules above — these are header-only.        */
.site-head .brand{
  /* Fluid rather than stepped: the lockup shares the bar with the cart pill and
     the menu button, so it scales down continuously to stay clear of them all
     the way to 320px. Full size (116/69) from 720px up. */
  --icon:clamp(56px, calc(15vw + 8px), 116px);  /* drawn mascot is 66% of this ≈ 77px at full size */
  --mark:clamp(33px, calc(8.9vw + 4.8px), 69px); /* drawn script is 49.6% of this ≈ 34px */
  --bar:74px;
  gap:0;
}
.site-head .brand img.brand-icon{
  width:var(--icon); height:var(--icon);
  /* Overhang split 24/76 so the mascot breaks *below* the bar and its head is
     never clipped by the top of the sticky header. Margins sum to
     bar - icon, so the row stays exactly --bar tall. */
  margin-top:calc((var(--bar) - var(--icon)) * .24);
  margin-bottom:calc((var(--bar) - var(--icon)) * .76);
  margin-left:calc(var(--icon) * -.205);   /* mascot starts flush with the gutter */
  transform-origin:50% 80%;                /* pivot at its feet, not the box centre */
  transition:transform .35s cubic-bezier(.34,1.4,.5,1);
  animation:brandPop .72s cubic-bezier(.34,1.4,.5,1) backwards;
}
.site-head .brand img.brand-wordmark{
  height:var(--mark);
  /* -icon right pad, -wordmark left pad, + the optical gap we actually want */
  margin-left:calc(var(--icon) * -.197 - var(--mark) * .25 + 10px);
  animation:brandWrite .85s .26s cubic-bezier(.22,.61,.36,1) backwards;
}
.site-head .brand:hover img.brand-icon{ transform:translateY(-3px) rotate(-4deg) scale(1.04); }

/* Intro: the mascot hops in, then the script draws itself left-to-right.
   `backwards` (not `both`) so the finished state is released back to the base
   rules — that keeps the hover transform working, and lets the global
   prefers-reduced-motion override drop straight to the final look. */
@keyframes brandPop{
  from{ opacity:0; transform:translateY(-14px) scale(.7) rotate(-12deg); }
  60%{ opacity:1; }
  to{ opacity:1; transform:none; }
}
@keyframes brandWrite{
  from{ opacity:0; clip-path:inset(0 100% 0 0); }
  30%{ opacity:1; }
  to{ opacity:1; clip-path:inset(0 0 0 0); }
}
/* Legacy text wordmark (footer fallback while agents own their pages). */
.brand .wordmark{ font:600 24px/1 var(--font-d); color:var(--ink); letter-spacing:-.01em; }
.brand .wordmark em{ color:var(--sage2); }
.site-nav{ display:flex; align-items:center; gap:4px; }
.site-nav a{
  font:600 14.5px/1 var(--font-b); color:var(--ink2);
  padding:10px 14px; border-radius:var(--r-pill);
  transition:background .15s ease,color .15s ease;
}
.site-nav a:hover{ color:var(--ink); background:var(--sage-c1); }
.site-nav a[aria-current="page"]{ color:var(--sage-d); background:var(--sage-c1); }
.cart-link{
  display:inline-flex; align-items:center; gap:8px;
  font:700 14.5px/1 var(--font-b); color:var(--cream);
  background:var(--ink); border-radius:var(--r-pill); padding:11px 18px;
  transition:transform .18s ease;
}
.cart-link:hover{ transform:translateY(-2px); }
.cart-link .count{
  background:var(--butter-c); color:var(--ink); min-width:21px; height:21px;
  border-radius:var(--r-pill); display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; padding-inline:6px;
}

.nav-toggle{ display:none; background:none; border:none; padding:10px; margin-left:2px; }
.nav-toggle span{ display:block; width:22px; height:2.5px; background:var(--ink); border-radius:2px; margin:4.5px 0; transition:transform .25s ease, opacity .2s ease; }

@media (max-width:880px){
  .nav-toggle{ display:block; }
  .site-nav{
    position:fixed; inset:74px 0 auto 0; z-index:99;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:14px 22px 22px;
    transform:translateY(calc(-100% - 80px)); visibility:hidden;
    transition:transform .28s ease, visibility 0s .28s;
  }
  body.nav-open .site-nav{ transform:translateY(0); visibility:visible; transition:transform .28s ease; }
  body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .site-nav a{ padding:14px 12px; font-size:16px; border-radius:14px; }
}

/* ============================================================
   5. Home — hero
   ============================================================ */
.hero{ position:relative; overflow:hidden; padding:56px 0 40px; }
.hero-blob{
  position:absolute; border-radius:50%; filter:blur(2px); opacity:.5; z-index:0;
  animation:drift 16s ease-in-out infinite;
}
.hero .wrap{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.08fr .92fr; gap:44px; align-items:center;
}
.hero h1 em{ color:var(--sage2); }
.hero .sub{ max-width:500px; margin-top:20px; }
.hero-ctas{ display:flex; gap:13px; flex-wrap:wrap; margin-top:30px; }
.hero-note{ margin-top:22px; font:500 13.5px var(--font-b); color:var(--ink3); display:flex; align-items:center; gap:8px; }

.hero-art{ position:relative; display:flex; align-items:center; justify-content:center; min-height:420px; }
.hero-halo{
  position:absolute; width:min(430px,88%); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 42%, #fff 0%, #EFF5E8 62%, #E9F0DD 100%);
  box-shadow:var(--shadow-soft);
}
.hero-art > img{ position:relative; width:min(430px,92%); animation:bob 5.2s ease-in-out infinite; filter:drop-shadow(0 26px 30px rgba(63,82,54,.25)); }
.time-chip{
  position:absolute; display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:9px 15px; font:700 13.5px var(--font-b); color:var(--ink);
  box-shadow:var(--shadow-lift); animation:bob 4.4s ease-in-out infinite;
}
.time-chip small{ font-weight:500; color:var(--ink3); }
.time-chip.tc-morning{ top:16%; left:2%; animation-delay:-1.2s; }
.time-chip.tc-noon{ bottom:14%; right:0; animation-delay:-2.6s; }

/* ============================================================
   6. Home — path cards
   ============================================================ */
.paths{ padding:34px 0 10px; }
.path-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.path-card{
  position:relative; overflow:hidden; border-radius:var(--r-panel);
  padding:34px 34px 0; min-height:420px;
  display:flex; flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease;
}
.path-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.path-card.school{ background:linear-gradient(160deg,var(--butter-c),#FDF6E0 60%,var(--sage-c1)); }
.path-card.bowls{ background:linear-gradient(160deg,var(--sage-c1),#EAF2DF 55%,var(--peach-c)); }
.path-kicker{ font:700 12px var(--font-b); letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px; }
.path-card.school .path-kicker{ color:var(--butter-d); }
.path-card.bowls .path-kicker{ color:var(--peach-d); }
.path-card h3{ font-size:clamp(24px,3vw,31px); max-width:330px; }
.path-points{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:9px; }
.path-points li{ display:flex; gap:10px; align-items:baseline; font:500 14.5px/1.5 var(--font-b); color:var(--ink2); }
.path-points li::before{ content:"✓"; font-weight:700; color:var(--sage); }
.path-cta{ margin:20px 0 8px; }
.path-art{ margin-top:auto; align-self:center; display:flex; align-items:flex-end; }
.path-art img{ max-height:220px; width:auto; }
.path-card .full-link{ position:absolute; inset:0; z-index:1; border-radius:inherit; }
.path-card .full-link:focus-visible{ outline-offset:-3px; }

/* ============================================================
   7. Home — trust band
   ============================================================ */
.trust{ padding:64px 0 58px; }
.trust-head{ text-align:center; max-width:560px; margin:0 auto 40px; }
.trust-head .sub{ margin-top:12px; }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.trust-item{ text-align:center; }
.trust-icon{
  width:86px; height:86px; border-radius:50%; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center; font-size:34px;
  animation:bob 4s ease-in-out infinite;
}
.trust-item:nth-child(1) .trust-icon{ background:var(--sage-c1); animation-delay:0s; }
.trust-item:nth-child(2) .trust-icon{ background:var(--peach-c); animation-delay:-.4s; }
.trust-item:nth-child(3) .trust-icon{ background:var(--butter-c); animation-delay:-.8s; }
.trust-item:nth-child(4) .trust-icon{ background:var(--lav-c); animation-delay:-1.2s; }
.trust-item h4{ font:600 17px var(--font-d); margin-bottom:6px; }
.trust-item p{ font:400 13.5px/1.55 var(--font-b); color:var(--ink2); }

/* ============================================================
   8. Home — how it works
   ============================================================ */
.how{ background:var(--band); padding:66px 0 70px; }
.how-head{ text-align:center; max-width:600px; margin:0 auto 44px; }
.how-head .sub{ margin-top:12px; }
.how-cols{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.how-col{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-panel); padding:30px 30px 34px;
}
.how-col > h3{ display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.how-col > h3 .tint{ font-size:22px; width:44px; height:44px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; }
.how-col.morning > h3 .tint{ background:var(--butter-c); }
.how-col.noon > h3 .tint{ background:var(--sage-c1); }
.step{ display:flex; gap:15px; padding:13px 0; }
.step + .step{ border-top:1px dashed var(--line2); }
.step-n{
  flex:none; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font:italic 600 17px var(--font-d); color:var(--sage-d); background:var(--sage-c1);
}
.step b{ display:block; font:700 15px var(--font-b); }
.step p{ font:400 13.5px/1.55 var(--font-b); color:var(--ink2); margin-top:2px; }

/* ============================================================
   9. Home — closing band
   ============================================================ */
.closing{ padding:74px 0; text-align:center; }
.closing blockquote{
  margin:0 auto; max-width:640px;
  font:italic 500 clamp(21px,3vw,28px)/1.5 var(--font-d); color:var(--sage-d);
}
.closing .who{ margin-top:14px; font:600 13px var(--font-b); letter-spacing:.1em; text-transform:uppercase; color:var(--ink3); }
.closing .btn{ margin-top:26px; }

/* ============================================================
   10. Footer
   ============================================================ */
/* Dark green footer. Colour taken from the reference swatch; it is the same
   deep green the prototype used for its own footer. Everything inside has to
   reverse with it — including the two logo files, which are dark-green artwork
   and would otherwise disappear into the background. */
/* Padding keyed to viewport height so the footer shrinks on short screens.
   On Home it shares the last screen with the closing block, and a fixed
   82px of vertical padding pushed the pair past one screen at 649px tall. */
.site-foot{ background:#2C3A2E; border-top:1px solid #2C3A2E; padding:clamp(30px,4.6vh,52px) 0 clamp(22px,3.4vh,30px); color:#fff; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:34px; }
/* Footer lockup — same construction as the header (see section 4 for the
   measured padding fractions), just smaller. It has to be stated here because
   `.site-foot a{display:block}` below outranks the plain `.brand` rule and was
   stacking the wordmark underneath the mascot instead of beside it. */
.site-foot .brand{
  --icon:84px;  /* drawn mascot ≈ 55px */
  --mark:50px;  /* drawn script ≈ 25px */
  display:inline-flex; align-items:center; gap:0;
}
/* The mascot keeps its colours by sitting on a cream disc — the image's own
   transparent padding means the artwork lands neatly inside the circle, so no
   extra padding is needed. The margins that used to cancel that padding are
   dropped here, because on a dark ground the padding is the disc. */
.site-foot .brand img.brand-icon{
  width:var(--icon); height:var(--icon); object-fit:contain;
  background:var(--cream); border-radius:50%;
}
/* The wordmark is a single dark-green colour, so a straight reverse to white
   keeps the exact letterforms of the logo rather than substituting type. */
.site-foot .brand img.brand-wordmark{
  height:var(--mark); width:auto;
  margin-left:calc(10px - var(--mark) * .25);
  filter:brightness(0) invert(1);
}
.foot-brand p{ font:400 13.5px/1.6 var(--font-b); color:rgba(255,255,255,.75); max-width:250px; margin-top:12px; }
.foot-h{ font:700 12px var(--font-b); letter-spacing:.12em; text-transform:uppercase; color:#fff; margin-bottom:14px; }
.site-foot a, .foot-line{ display:block; font:500 14px/1.5 var(--font-b); color:rgba(255,255,255,.85); padding:4px 0; }
.site-foot a:hover{ color:#fff; }
.foot-legal{
  max-width:var(--wrap); margin:36px auto 0; padding:18px 22px 0;
  border-top:1px solid rgba(255,255,255,.16);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font:400 12.5px var(--font-b); color:rgba(255,255,255,.62);
}

/* ============================================================
   11. Generic page + utility sections
   ============================================================ */
.page-plain{ padding:60px 0 80px; max-width:760px; }
.page-plain h1{ margin-bottom:18px; }
.section-pad{ padding:60px 0; }

/* ============================================================
   11b. School Meals page
   ============================================================ */
.sm-hero{ position:relative; overflow:hidden; padding:52px 0 42px; }
.sm-hero .wrap{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; }
.sm-hero h1 em{ color:var(--butter-d); }
.circle-photo{
  width:min(400px,86%); aspect-ratio:1; border-radius:50%; object-fit:cover;
  box-shadow:var(--shadow-soft); position:relative;
}
.steps-strip{ padding:56px 0 30px; }
.steps-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; position:relative; }
.steps-row::before{
  content:""; position:absolute; top:43px; left:12%; right:12%;
  border-top:2px dashed var(--line2); z-index:0;
}
.step-col{ text-align:center; position:relative; z-index:1; padding:0 10px; }
.step-disc{
  width:86px; height:86px; border-radius:50%; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  font:italic 600 30px var(--font-d); border:2px solid #fff;
  box-shadow:var(--shadow-lift);
}
.step-col:nth-child(1) .step-disc{ background:var(--sage-c1); color:var(--sage-d); }
.step-col:nth-child(2) .step-disc{ background:var(--peach-c); color:var(--peach-d); }
.step-col:nth-child(3) .step-disc{ background:var(--lav-c); color:var(--lav-d); }
.step-col h4{ font:600 18px var(--font-d); margin-bottom:6px; }
.step-col p{ font:400 14px/1.55 var(--font-b); color:var(--ink2); max-width:250px; margin-inline:auto; }

.menu-sec{ padding:54px 0 60px; }
.menu-head{ display:flex; align-items:end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:30px; }
.menu-head .sub{ max-width:520px; margin-top:10px; }
.menu-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
.meal-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-card);
  padding:22px 18px 20px; text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.meal-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.meal-thumb{
  width:104px; height:104px; border-radius:50%; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.meal-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.meal-card h4{ font:600 17px var(--font-d); }
.meal-card .tagline{ font:italic 400 13px var(--font-d); color:var(--ink3); margin-top:2px; }
.meal-card .price{
  display:inline-block; margin-top:10px; font:700 13.5px var(--font-b);
  color:var(--sage-d); background:var(--sage-c1); border-radius:var(--r-pill); padding:5px 13px;
}
.menu-note{ margin-top:22px; font:500 13.5px var(--font-b); color:var(--ink3); text-align:center; }

.gate-sec{ background:var(--band); padding:64px 0; }
.gate-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.gate-video{
  border-radius:var(--r-panel); overflow:hidden; box-shadow:var(--shadow-soft);
  border:1px solid var(--line);
}
.gate-video video{ display:block; width:100%; height:auto; }
.gate-copy h2{ margin-bottom:14px; }
.gate-copy .sub{ margin-bottom:18px; }
.gate-points{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.gate-points li{ display:flex; gap:10px; font:500 14.5px/1.5 var(--font-b); color:var(--ink2); }
.gate-points li::before{ content:"🌿"; }

.schools-sec{ padding:60px 0 66px; }
.schools-head{ text-align:center; max-width:560px; margin:0 auto 32px; }
.schools-head .sub{ margin-top:10px; }
.school-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.school-card{
  display:flex; align-items:center; gap:14px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-card);
  padding:16px 18px;
}
.school-card .pin{
  flex:none; width:46px; height:46px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; font-size:21px;
  background:var(--sage-c1);
}
.school-card b{ display:block; font:700 15px var(--font-b); }
.school-card small{ font:500 13px var(--font-b); color:var(--ink2); }
.schools-note{ text-align:center; margin-top:24px; }

/* ============================================================
   11c. Toast
   ============================================================ */
.leafy-toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,16px);
  z-index:150; background:var(--ink); color:var(--cream);
  font:600 14px var(--font-b); padding:13px 22px; border-radius:var(--r-pill);
  box-shadow:0 14px 34px -10px rgba(63,82,54,.5);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  max-width:min(92vw,480px); text-align:center;
}
.leafy-toast.show{ opacity:1; transform:translate(-50%,0); }
.leafy-toast.is-error{ background:#8C4A40; }
.btn.is-busy{ opacity:.6; cursor:wait; }

/* ============================================================
   11d. WooCommerce skin — cart, checkout, account, order pages
   ============================================================ */
.woocommerce-page .page-plain{ max-width:1040px; }
.woocommerce-page .page-plain h1{ margin-bottom:26px; }

/* Buttons: kill Woo purple, use brand pills. */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce button#place_order{
  background:var(--sage); color:var(--cream); border:none;
  border-radius:var(--r-pill); padding:13px 24px;
  font:700 14.5px var(--font-b);
  transition:transform .18s ease, background .18s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce button#place_order:hover{
  background:var(--sage-d); color:var(--cream); transform:translateY(-2px);
}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt{
  background:var(--sage); color:var(--cream);
}
.woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled]{
  background:#CDD6C4; color:var(--cream); padding:13px 24px;
}

/* Tables → soft cards. */
.woocommerce table.shop_table{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-card); border-collapse:separate; border-spacing:0;
  overflow:hidden;
}
.woocommerce table.shop_table th{
  font:700 12px var(--font-b); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink2); background:var(--cream); border-bottom:1px solid var(--line);
}
.woocommerce table.shop_table td{ border-top:1px solid var(--line); vertical-align:middle; }
.woocommerce table.shop_table td.product-name{ font-weight:600; }
.woocommerce table.shop_table dl.variation dt,
.woocommerce table.shop_table dl.variation dd{
  font:400 12.5px/1.5 var(--font-b); color:var(--ink2); margin:0;
}
.woocommerce table.shop_table dl.variation dt{ font-weight:700; }
.woocommerce-cart table.cart img{ width:56px; border-radius:12px; }
.woocommerce table.cart td.actions .coupon .input-text{ width:150px; margin-right:8px; }
.woocommerce a.remove{ color:var(--peach-d) !important; }
.woocommerce a.remove:hover{ background:var(--peach-d); color:#fff !important; }

/* Forms. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce table.cart td.actions .coupon .input-text{
  background:var(--white); border:1.5px solid var(--line2); border-radius:13px;
  padding:12px 15px; font:500 14.5px var(--font-b); color:var(--ink);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{
  outline:none; border-color:var(--sage2); box-shadow:0 0 0 3px var(--sage-c1);
}
.woocommerce form .form-row label{ font:600 13px var(--font-b); color:var(--ink2); }
.woocommerce form .form-row .required{ color:var(--peach-d); text-decoration:none; }
.select2-container--default .select2-selection--single{
  border:1.5px solid var(--line2); border-radius:13px; height:auto; padding:9px 12px;
  background:var(--white); font:500 14.5px var(--font-b);
}
.select2-container--default .select2-selection--single .selected .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:1.4; color:var(--ink); }
.select2-container--default .select2-selection--single .select2-selection__arrow{ top:50%; transform:translateY(-50%); }
.select2-dropdown{ border:1px solid var(--line); border-radius:13px; overflow:hidden; }

/* Notices: sage for info/success, terracotta for errors — never Woo blue. */
.woocommerce-message, .woocommerce-info{
  background:var(--sage-c1); color:var(--ink); border-top:none;
  border-radius:var(--r-card); padding:16px 20px 16px 52px;
  font:500 14.5px var(--font-b);
}
.woocommerce-message::before, .woocommerce-info::before{ color:var(--sage-d); top:16px; left:20px; }
.woocommerce-error{
  background:#F9E9E5; color:#7C3B31; border-top:none;
  border-radius:var(--r-card); padding:16px 20px 16px 52px;
  font:500 14.5px var(--font-b);
}
.woocommerce-error::before{ color:#A85835; top:16px; left:20px; }
.woocommerce-NoticeGroup{ grid-column:1 / -1; }

/* Checkout layout. */
.woocommerce-checkout .col2-set{ display:grid; grid-template-columns:1fr 1fr; gap:34px; float:none; width:100%; }
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2{ float:none; width:100%; }
/* Woo injects stray non-column children (notice wrappers) into col2-set;
   pin the real columns and let anything else span the full row. */
.woocommerce-checkout .col2-set .col-1{ grid-column:1; grid-row:1; }
.woocommerce-checkout .col2-set .col-2{ grid-column:2; grid-row:1; }
.woocommerce-checkout .col2-set > :not(.col-1):not(.col-2){ grid-column:1 / -1; }
.woocommerce table.shop_table dl.variation dt{ margin-right:5px; }
.woocommerce-checkout h3{ font-size:22px; margin-bottom:14px; }
#payment{ background:var(--sage-c1); border-radius:var(--r-card); }
#payment div.payment_box{ background:rgba(255,255,255,.7); color:var(--ink2); font:400 13.5px/1.5 var(--font-b); }
#payment div.payment_box::before{ border-bottom-color:rgba(255,255,255,.7); }
#payment ul.payment_methods{ border-bottom:1px dashed var(--line2); }
#payment .place-order{ padding:20px; }
.woocommerce button#place_order{ width:100%; font-size:16px; padding:16px 24px; }
.woocommerce form .form-row.woocommerce-invalid .select2-container,
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select{ border-color:var(--peach-d); }

/* Order received. */
.woocommerce-order .woocommerce-thankyou-order-received{
  font:600 clamp(24px,3.4vw,34px)/1.2 var(--font-d); color:var(--sage-d);
  margin-bottom:22px;
}
.woocommerce ul.order_details{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-card);
  padding:22px; display:flex; flex-wrap:wrap; gap:18px 34px; margin:0 0 26px;
}
.woocommerce ul.order_details li{
  font:600 11.5px var(--font-b); letter-spacing:.08em; color:var(--ink3);
  border-right:1px dashed var(--line2); padding-right:34px; margin:0;
}
.woocommerce ul.order_details li:last-child{ border:none; }
.woocommerce ul.order_details li strong{ display:block; font:700 15px var(--font-b); color:var(--ink); margin-top:5px; letter-spacing:0; }

/* Account. */
.woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.woocommerce-MyAccount-navigation a{
  display:block; font:600 14.5px var(--font-b); color:var(--ink2);
  padding:11px 16px; border-radius:13px;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation a:hover{ background:var(--sage-c1); color:var(--sage-d); }

@media (max-width:880px){
  .woocommerce-checkout .col2-set{ grid-template-columns:1fr; }
  .woocommerce-checkout .col2-set .col-1{ grid-column:1; grid-row:auto; }
  .woocommerce-checkout .col2-set .col-2{ grid-column:1; grid-row:auto; }
  .woocommerce table.shop_table_responsive tr td::before{ font-weight:700; color:var(--ink2); }
}

/* ============================================================
   11e. Home — faithful port of the prototype index.html
   Keyframes and geometry are the prototype's own values.
   ============================================================ */

/* --- Section alignment --------------------------------------------------
   Sections come to rest flush under the sticky header rather than half-cut.
   This is driven from main.js, NOT by CSS scroll-snap, and that is deliberate:

   - `scroll-snap-align` on a section taller than the viewport triggers the
     "snap area larger than the snapport" rule. Chrome then holds the viewport
     captive inside that section; measured stuck at scrollY 1431 with the lower
     half of the route section and the whole closing block unreachable.
   - Moving the snap target to a 1px anchor fixes that, but `proximity` is far
     too strong at these section sizes. Measured on a 1440x900 viewport: a
     deliberate 300px scroll away from a boundary was pulled 300px straight
     back to it, i.e. fully undone. Chrome's proximity radius is wider than the
     gaps between these sections, so there is no usable free zone.

   The JS assist uses a bounded threshold instead, so it can only ever tidy up
   a near miss and can never fight or trap the scroll. Section geometry lives
   here; the breakpoint below is mirrored in main.js.                       */

@keyframes leDrift{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(18px,-22px) scale(1.06); } }
@keyframes lePing{ 0%{ transform:scale(.6); opacity:.9; } 100%{ transform:scale(2.1); opacity:0; } }
@keyframes leOrbit{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes leOrbitCounter{ from{ transform:rotate(0deg); } to{ transform:rotate(-360deg); } }

.lh{
  background:#FCF8F1; color:#2C3A2E;
  /* One vertical rhythm for the page. Every section band uses --sec so the
     spacing between sections is a decision, not an accident. */
  /* Vertical rhythm keyed to viewport HEIGHT, not width. The goal is one
     section per screen, and what a section has to fit into is the window's
     height — a 1273x649 laptop window has the same width as a 1273x900 one but
     250px less room. Width-based spacing gave both the same 58px bands and
     overflowed the short one by 201px. */
  --sec:clamp(24px,4.4vh,58px);
  /* Muted copy. The prototype's #6E7B6B measured 4.2:1 on this cream — under
     AA. #5F6C5B is ~5:1 and reads crisper without losing the soft feel. */
  --muted:#5F6C5B;
}
.lh-wrap{ max-width:1120px; margin:0 auto; padding-inline:22px; }
.lh-h1{ font:600 clamp(46px,8vw,90px)/1.02 var(--font-d); letter-spacing:-.015em; margin:clamp(20px,2.4vh,30px) 0 0; color:#2C3A2E; }
.lh-h1 em{ font-style:italic; font-weight:400; }
.lh-h2{ font:600 min(clamp(30px,4.6vw,44px), 5.2vh)/1.04 var(--font-d); margin:0; color:#2C3A2E; }
.lh-h2 em{ font-style:italic; font-weight:400; }
.lh-underline{ position:relative; white-space:nowrap; }
.lh-underline svg{ position:absolute; left:0; bottom:-12px; width:100%; height:16px; }
.lh-sub{ font-size:20.5px; line-height:1.62; color:var(--muted); max-width:520px; margin:26px 0 0; }
.lh-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font:600 14px/1 var(--font-b); letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); background:#fff; border:1px solid rgba(44,58,46,.14);
  padding:9px 18px; border-radius:999px;
}
.lh-ping{ width:7px; height:7px; border-radius:50%; background:#9BBF94; position:relative; display:inline-block; }
.lh-ping::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid #9BBF94; animation:lePing 2.2s ease-out infinite; }
.lh-kicker{ font:700 12.5px var(--font-b); letter-spacing:.14em; text-transform:uppercase; color:#4A6340; }
.lh-sec-head{ text-align:center; max-width:620px; margin:0 auto clamp(12px,2vh,26px); }
.lh-sec-head .lh-h2{ margin-top:14px; }
.lh-sec-sub{ color:var(--muted); margin-top:clamp(9px,1.6vh,14px); font-size:clamp(14.5px,2.3vh,17px); line-height:1.6; }
.lh-btn{
  display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:16px 28px;
  font:600 16.5px/1 var(--font-b); border:1.5px solid #2C3A2E; white-space:nowrap;
  transition:transform .25s ease, background .25s ease;
}
.lh-btn:hover{ transform:translateY(-2px); }
.lh-btn-solid{ background:#2C3A2E; color:#FCF8F1; }
.lh-btn-solid:hover{ background:#1f2a20; }
.lh-btn-line{ background:transparent; color:#2C3A2E; }
.lh-btn-line:hover{ background:rgba(44,58,46,.06); }

/* hero */
.lh-hero{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; min-height:calc(100vh - 76px); min-height:calc(100svh - 76px); padding:clamp(24px,3vw,44px) 0; }
/* Heavily blurred so they read as ambient light. At the prototype's 2px they
   were hard-edged discs, which is what made the page feel pasted together. */
.lh-blob{ position:absolute; border-radius:50%; filter:blur(48px); opacity:.75; z-index:0; animation:leDrift 16s ease-in-out infinite; }
.lh-hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:30px; align-items:center; }
.lh-ctas{ display:flex; gap:14px; margin-top:clamp(28px,3.4vh,40px); flex-wrap:wrap; }
.lh-avo{ position:relative; display:flex; justify-content:center; align-items:center; min-height:min(548px, 62vh); }
.lh-halo{
  position:absolute; width:min(512px, 58vh); height:min(512px, 58vh); border-radius:50%;
  background:radial-gradient(circle at 50% 42%, #fff 0%, #EAF2E4 62%, #E6F0E1 100%);
  box-shadow:0 18px 50px -28px rgba(44,58,46,.45);
}
.lh-orbit{ position:relative; z-index:2; width:296px; height:296px; animation:leOrbit 17s linear infinite; }
/* Width must be explicit. The slot is absolutely positioned from left:50%, so
   its shrink-to-fit width is capped at half the orbit (120px) — and the global
   `img{max-width:100%}` then squashed the dish to 120px instead of 210px. */
.lh-slot{ position:absolute; left:50%; top:50%; width:258px; }
.lh-slot-top{ transform:translate(-50%,-50%) translateY(-150px); }
.lh-slot-bot{ transform:translate(-50%,-50%) translateY(150px); }
.lh-counter{ animation:leOrbitCounter 17s linear infinite; transform-origin:center; position:relative; }
/* No cast shadow. The dishes sit on a pale halo, and a 32%-black drop-shadow
   read as a grey smudge under the bowl rather than as depth. */
.lh-orbit-img{ width:258px; height:auto; display:block; }
.lh-orbit-tag{
  position:absolute; z-index:4; background:#fff; border:1px solid rgba(44,58,46,.14);
  border-radius:999px; padding:7px 13px; font:600 12.5px var(--font-b); white-space:nowrap;
  box-shadow:0 10px 24px -16px rgba(44,58,46,.5); display:flex; align-items:center; gap:6px;
}
.lh-tag-tl{ bottom:-12px; left:-26px; }
.lh-tag-br{ top:-12px; right:-26px; }

/* two worlds */
.lh-worlds{ position:relative; padding-block:var(--sec); padding-top:calc(var(--sec) + 12px); }
.lh-portal-grid{ display:grid; gap:24px; grid-template-columns:1fr 1fr; }
.lh-world{
  position:relative; display:flex; flex-direction:column;
  border-radius:30px 30px 160px 160px / 30px 30px 60px 60px;
  /* Bottom padding is not free space: the card's bottom-left corner is a
     160x60 arch, so at the CTA's left edge the visible edge of the card sits
     23.5px above the card's bottom. Anything less than that and the link is
     clipped by overflow:hidden. The prototype's 34px cleared it; keep a floor
     that still does. */
  padding:clamp(18px,2.9vh,36px) 32px clamp(30px,4.6vh,34px); overflow:hidden; border:1px solid rgba(44,58,46,.14);
  transition:transform .35s ease, box-shadow .35s ease; color:inherit;
}
.lh-world:hover{ transform:translateY(-6px); box-shadow:0 18px 50px -28px rgba(44,58,46,.45); }
/* Tighter gradient range than the prototype's yellow→green and lilac→peach,
   which crossed hues and went muddy in the middle. Each card now reads as one
   colour with depth, and a top rule carries the route coding instead. */
.lh-world-kids{ background:linear-gradient(168deg,#FBF2D9 0%,#F4F6E9 100%); }
.lh-world-corp{ background:linear-gradient(168deg,#F1EDFA 0%,#FAF0E8 100%); }
.lh-world::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; z-index:1; }
.lh-world-kids::before{ background:#E0B85C; }
.lh-world-corp::before{ background:#9B8FDD; }
.lh-world-scene{ position:absolute; right:14px; top:20px; width:140px; height:140px; object-fit:contain; }
.lh-world-badge{
  display:inline-flex; align-items:center; gap:8px; background:#fff; border-radius:999px;
  padding:7px 15px; font:600 13px var(--font-b);
  box-shadow:0 8px 20px -14px rgba(44,58,46,.5); align-self:flex-start;
}
.lh-world h3{ font:600 min(30px,4.4vh) var(--font-d); margin:clamp(11px,2vh,18px) 0 0; color:#2C3A2E; }
.lh-world p{ color:var(--muted); margin-top:12px; font-size:16px; max-width:340px; line-height:1.55; }
.lh-world-chips{ display:flex; gap:8px; flex-wrap:wrap; margin:clamp(12px,2.2vh,20px) 0 clamp(16px,2.9vh,26px); }
.lh-world-chips span{ background:rgba(255,255,255,.7); border-radius:999px; padding:7px 13px; font:600 13px var(--font-b); }
.lh-world-cta{
  margin-top:auto; display:inline-flex; align-items:center; gap:9px;
  font:700 15px var(--font-b); padding-bottom:3px; align-self:flex-start; transition:gap .25s;
}
.lh-world:hover .lh-world-cta{ gap:15px; }

/* fresh line */
.lh-route{ position:relative; padding-block:var(--sec); background:#FAF6EC; border-block:1px solid rgba(44,58,46,.07); }
.lh-route-card{
  position:relative; background:linear-gradient(180deg,#fff 0%,#FCF8F1 100%);
  border:1px solid rgba(44,58,46,.14); border-radius:34px;
  /* Extra room at the bottom: the highlighted stop scales about its marker, so
     the label of the lower track grows downward and would otherwise sit 2px
     off the card's edge at its largest. */
  padding:clamp(22px,3.6vh,34px) clamp(18px,2.6vw,34px) clamp(36px,5.4vh,50px);
  /* Narrower than the wrap so the rails stop stretching across 1120px — the
     stops sit closer together and the diagram reads dense rather than thin. */
  max-width:1000px; margin-inline:auto;
  box-shadow:0 18px 50px -28px rgba(44,58,46,.45);
}
/* kitchen | fork | the two tracks */
.lh-map{ --fork:clamp(38px,5.5vw,76px); display:grid; grid-template-columns:auto var(--fork) 1fr; align-items:center; }

/* --- origin ---------------------------------------------------------- */
.lh-origin{ text-align:center; }
.lh-origin-i{
  display:flex; align-items:center; justify-content:center; margin:0 auto 6px;
  width:clamp(56px,8.7vh,72px); height:clamp(56px,8.7vh,72px); border-radius:50%;
  font-size:calc(clamp(56px,8.7vh,72px) * .5); line-height:1;
  background:#fff; border:2px solid #2C3A2E;
}
.lh-origin b{ display:block; font:700 clamp(12.5px,2vh,13.5px) var(--font-b); color:#2C3A2E; }
.lh-origin i{ display:block; font:400 clamp(11px,1.8vh,12px)/1.3 var(--font-b); font-style:normal; color:var(--muted); }

/* --- fork ------------------------------------------------------------- */
/* Stretched to the tracks' own height so its two ends land on the two rails,
   rather than being a fixed size that only lines up at one viewport. */
.lh-fork{ display:block; width:100%; height:100%; align-self:stretch; overflow:visible; }
.lh-fork path{
  fill:none; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:2 11; vector-effect:non-scaling-stroke;
  animation:lhFlow 1.3s linear infinite;
}
.lh-fork-k{ stroke:#E8A93F; }
.lh-fork-c{ stroke:#8E76C9; animation-delay:-.65s; }
/* Dashes run outward from the kitchen — food moving, not a static diagram. */
@keyframes lhFlow{ to{ stroke-dashoffset:-13; } }

/* --- the two tracks --------------------------------------------------- */
.lh-tracks{ display:grid; gap:clamp(20px,3.4vh,40px); }
.lh-track-k{
  font:700 11px var(--font-b); letter-spacing:.07em; text-transform:uppercase;
  display:flex; align-items:center; gap:7px; margin-bottom:clamp(8px,1.6vh,13px);
}
.lh-track-k span{ width:9px; height:9px; border-radius:3px; }
.lh-track-kids .lh-track-k{ color:#8A6A2C; } .lh-track-kids .lh-track-k span{ background:#F1CE76; }
.lh-track-corp .lh-track-k{ color:#5F55B8; } .lh-track-corp .lh-track-k span{ background:#BCABE4; }

/* padding-top is the parcel's lane: the markers start this far down, the parcel
   rides at the top edge, so a bigger value = more clearance. It must clear the
   HIGHLIGHTED marker, which scales to 1.36 and so grows ~11px upward past its
   resting top. */
.lh-rail-wrap{ position:relative; padding-top:clamp(33px,5.0vh,42px); }
/* Stops sit in equal columns, so their centres land at 1/6, 1/2 and 5/6 —
   the three positions the rail and the parcel are pinned to. */
.lh-stops{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); }
.lh-stops li{
  --dot:clamp(50px,7.7vh,58px);
  text-align:center; position:relative;
  /* The whole stop zooms — marker and label together — about the marker's own
     centre, so it stays pinned to the rail while the label grows away from it
     rather than drifting off the line. */
  transform-origin:50% calc(var(--dot) / 2);
  animation:lhLit 9s linear infinite;
  /* A negative delay runs the clock FORWARD, so stop 1 needs the largest
     shift, not the smallest: -9s (a whole loop, i.e. 0), -6s, -3s. */
  animation-delay:calc((var(--s) - 3) * 3s);
}
.lh-stops li > span{
  display:flex; align-items:center; justify-content:center; margin:0 auto 5px;
  width:var(--dot); height:var(--dot); border-radius:50%;
  font-size:calc(var(--dot) * .55); line-height:1;
  background:#fff; border:2px solid currentColor;
  /* Same clock as the stop, so the glow arrives with the zoom. */
  animation:lhGlow 9s linear infinite;
  animation-delay:calc((var(--s) - 3) * 3s);
}
.lh-stops b{ display:block; font:700 clamp(13.6px,2.3vh,15.2px) var(--font-b); color:#2C3A2E; }
.lh-stops i{ display:block; font:400 clamp(12.2px,2vh,13.4px)/1.35 var(--font-b); font-style:normal; color:var(--muted); }
.lh-track-kids .lh-stops{ color:#C9A35A; }
.lh-track-corp .lh-stops{ color:#8E86D6; }

.lh-rail{
  /* Runs back across the fork column to meet the kitchen. That is what makes
     the junction self-correcting: the fork's vertical only has to arrive
     somewhere near each rail, because the rail itself already passes through
     that point. Pinning the fork to an exact viewBox number never held — the
     rails sit at 23.3%/78.9% of the fork's height at one viewport and
     24%/80.6% at another. */
  position:absolute; left:calc(-1 * var(--fork)); right:16.667%;
  top:calc(clamp(33px,5.0vh,42px) + clamp(56px,8.7vh,72px) / 2 - 1px); height:2px;
  background:repeating-linear-gradient(90deg,currentColor 0 3px,transparent 3px 10px);
  opacity:.5;
}
.lh-track-kids .lh-rail{ color:#C9A35A; }
.lh-track-corp .lh-rail{ color:#8E86D6; }

/* The parcel rides above the rail so it never collides with a stop. */
.lh-parcel{
  position:absolute; top:-2px; transform:translateX(-50%);
  font-size:clamp(17px,2.7vh,21px); line-height:1; z-index:2;
  animation:lhTravel 9s cubic-bezier(.5,0,.2,1) infinite;
}

/* One 9s loop: three seconds parked at each stop, with the hop between. */
@keyframes lhTravel{
  0%   { left:16.667%; opacity:0; }
  5%   { left:16.667%; opacity:1; }
  26%  { left:16.667%; }
  33%  { left:50%; }
  59%  { left:50%; }
  66%  { left:83.333%; }
  95%  { left:83.333%; opacity:1; }
  100% { left:83.333%; opacity:0; }
}
/* Each stop is lit for its own third of the loop; the delay comes from --s.
   Emphasis is carried by size, never by fading the words. Dimming the label to
   .68 measured 4.43:1 and its sub-line 2.81:1 — under AA, and text you cannot
   read for six seconds out of nine defeats the point of highlighting it. Only
   the marker, which is decorative, changes opacity. z-index steps so the
   zoomed stop sits over its neighbours. */
@keyframes lhLit{
  0%,30%  { transform:scale(1.36); z-index:2; }
  37%,93% { transform:scale(1);    z-index:1; }
  100%    { transform:scale(1.36); z-index:2; }
}
@keyframes lhGlow{
  0%,30%  { box-shadow:0 8px 20px -8px currentColor; opacity:1; }
  37%,93% { box-shadow:0 0 0 0 transparent;          opacity:.7; }
  100%    { box-shadow:0 8px 20px -8px currentColor; opacity:1; }
}

@media (max-width:860px){
  /* No fork column here, so the rail must not reach back into one — otherwise
     it runs outside the card and pushes the page sideways. */
  .lh-map{ --fork:0px; grid-template-columns:1fr; gap:14px; }
  .lh-fork{ display:none; }
  .lh-origin{ display:flex; align-items:center; justify-content:center; gap:10px; }
  .lh-origin-i{ margin:0; }
  .lh-origin b, .lh-origin i{ text-align:left; }
}
/* Nothing moves: every stop reads as lit and the parcel is dropped, which
   leaves a plain labelled diagram. */
@media (prefers-reduced-motion:reduce){
  .lh-parcel{ display:none; }
  .lh-stops li{ opacity:1; transform:none; }
  .lh-stops li > span{ box-shadow:none; }
}

/* closing — the prototype's pale green-to-peach wash. It had been switched to a
   deep sage block to give the page a dark floor; restored on request. */
/* Extra breathing room above the closing block. It is its own snap section
   with plenty of spare height, so pushing it down costs nothing on the
   one-screen fit. */
/* The closing block and the footer share the last screen. Their heights are
   tuned so the pair fits one 649px-tall viewport together — snapping then lands
   on the closing block with the footer fully in view below it, neither cut. */
.lh-close-wrap{ max-width:1120px; margin:0 auto; padding:clamp(14px,2.6vh,52px) 22px var(--sec); }
.lh-close{
  position:relative; background:linear-gradient(120deg,#E6F0E1 0%,#FBE5D7 100%);
  border:1px solid rgba(44,58,46,.14);
  border-radius:34px; padding:clamp(24px,3.8vh,60px) 40px; text-align:center; overflow:hidden;
}
.lh-close > *{ position:relative; z-index:1; }
.lh-close .lh-h2{ font-size:min(clamp(26px,4vw,38px), 4.6vh); max-width:640px; margin:0 auto; color:#2C3A2E; }
.lh-close p{ color:var(--muted); margin:clamp(10px,1.8vh,16px) auto 0; max-width:460px; font-size:clamp(15px,2.3vh,17px); line-height:1.6; }
.lh-sig{
  margin-top:clamp(16px,2.8vh,26px); font:italic 400 18px var(--font-d); color:#2C3A2E;
  display:inline-flex; align-items:center; gap:9px;
}

@media (max-width:860px){
  .lh-hero{ min-height:0; display:block; }
  .lh-hero-grid{ grid-template-columns:1fr; gap:24px; text-align:center; }
  .lh-hero-copy{ order:2; }
  .lh-sub{ margin-inline:auto; }
  .lh-ctas{ justify-content:center; }
  .lh-avo{ order:1; min-height:360px; margin-top:14px; }
  .lh-halo{ width:340px; height:340px; }
  .lh-orbit{ width:188px; height:188px; }
  .lh-slot{ width:168px; }
  .lh-slot-top{ transform:translate(-50%,-50%) translateY(-96px); }
  .lh-slot-bot{ transform:translate(-50%,-50%) translateY(96px); }
  .lh-orbit-img{ width:168px; }
  .lh-portal-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .lh-world-scene{ position:static; margin-bottom:6px; width:118px; height:118px; }
}

/* ============================================================
   12. Motion
   ============================================================ */
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-11px); } }
@keyframes drift{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(16px,-20px) scale(1.05); } }
@keyframes ping{ 0%{ transform:scale(.6); opacity:.9; } 100%{ transform:scale(2.1); opacity:0; } }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.rise{ animation:rise .6s ease both; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   13. Responsive
   ============================================================ */
@media (max-width:960px){
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:880px){
  .sm-hero .wrap, .gate-grid{ grid-template-columns:1fr; text-align:center; gap:26px; }
  .sm-hero .hero-ctas{ justify-content:center; }
  .sm-hero .hero-art{ order:-1; min-height:0; }
  .circle-photo{ width:min(280px,72%); }
  .steps-row{ grid-template-columns:1fr; gap:30px; }
  .steps-row::before{ display:none; }
  .gate-copy{ text-align:left; }
  .menu-head{ flex-direction:column; align-items:flex-start; }
  .hero{ padding-top:30px; }
  .hero .wrap{ grid-template-columns:1fr; text-align:center; gap:16px; }
  .hero .sub{ margin-inline:auto; }
  .hero-ctas{ justify-content:center; }
  .hero-note{ justify-content:center; }
  .hero-art{ order:-1; min-height:320px; }
  .hero-art > img{ width:min(260px,70%); }
  .time-chip.tc-morning{ left:6%; top:8%; }
  .time-chip.tc-noon{ right:4%; bottom:6%; }
  .path-grid, .how-cols{ grid-template-columns:1fr; }
  .path-card{ min-height:0; padding:28px 24px 0; }
  .trust-grid{ grid-template-columns:1fr 1fr; gap:30px 14px; }
}
@media (max-width:560px){
  .foot-grid{ grid-template-columns:1fr; gap:26px; }
  .brand .wordmark{ font-size:21px; }
  .brand img.brand-icon{ width:38px; height:38px; }
  .brand img.brand-wordmark{ height:32px; }
  /* Only the bar height steps here — the lockup itself is fluid (see above). */
  .site-head .brand{ --bar:66px; }
  .site-head .wrap{ gap:10px; min-height:66px; }
  .site-nav{ inset:66px 0 auto 0; }
  .cart-link{ padding:9px 14px; font-size:13.5px; }
  .nav-toggle{ padding:8px; }
}