/* TNINE Dining. One stylesheet for the homepage and the plan builder.
   Desktop layout follows the 1440px design, phones follow the 390px design.
   Copy that differs between the two designs is marked .d-only / .m-only. */

:root{
  --cream:#F4EFE4; --ink:#141210; --card:#FBF8F2; --sand:#E4DAC6; --sand-2:#D6CAB2;
  --line:#D9CFBC; --body:#3A342C; --muted:#5C5448; --accent:#9A4A2E;
  --dim:#BDB2A0; --dark-2:#2A2620; --ink-line:#3A342C;
  --serif:Fraunces, Georgia, serif; --sans:Figtree, "Helvetica Neue", Arial, sans-serif;
  --gut:clamp(20px, 5.56vw, 80px);
  --sec:clamp(56px, 8.34vw, 120px);
  --wrap:1280px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;font-kerning:normal;text-rendering:optimizeLegibility}
::selection{background:var(--sand);color:var(--ink)}
h1,h2,h3,.h1,.h2{text-wrap:balance}
p,li,blockquote{text-wrap:pretty}
/* Fraunces: optical sizes on, a touch of the SOFT axis so the serifs sit warmer at display sizes */
.h1,.h2,.jars h2,.gallery h2,.cta h2,.promise h2,.panel h3,.feature__text h2,.plan__intro h1,.summary__head,.supplier__name,.stat__n,.quote blockquote{font-optical-sizing:auto;font-variation-settings:"SOFT" 40}
.h1,.h2,.jars h2,.cta h2{font-variation-settings:"SOFT" 60}
em,.it{font-family:var(--serif);font-style:italic;font-weight:400;font-variation-settings:"SOFT" 60}
.h1 .it,.h2 .it,.jars h2 .it,.cta h2 .it,.feature__text h2 .it,.panel h3 .it,.promise h2 .it{font-weight:400;letter-spacing:-.01em}
/* opening quote mark sits on the same left edge as every following line */
.quote blockquote{text-indent:0}
.stat__n .u{font-style:italic;font-weight:400;font-size:.62em;letter-spacing:0;margin-left:.08em}
img{max-width:100%;display:block}
a{color:var(--ink)} a:hover{color:#6B3A26}
h1,h2,h3{margin:0}
p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[id]{scroll-margin-top:24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--cream);padding:12px 18px;border-radius:999px;z-index:50;text-decoration:none;font-weight:600}
.skip:focus{top:12px;color:var(--cream)}

@media (max-width:760px){.d-only{display:none!important}}
@media (min-width:761px){.m-only{display:none!important}}

.wrap{max-width:var(--wrap);margin-inline:auto}
.frame{max-width:calc(var(--wrap) + 2 * var(--gut));margin-inline:auto}
.sec{padding:var(--sec) var(--gut)}
.band{background:var(--ink);color:var(--cream)}

/* Type */
.eyebrow{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);font-weight:600}
.eyebrow--dim{color:var(--dim);font-weight:400}
.eyebrow--muted{color:var(--muted);font-weight:400}
.h1{font-family:var(--serif);font-weight:500;font-size:clamp(46px, 5.84vw, 84px);line-height:.98;letter-spacing:clamp(-2px, -.14vw, -1px)}
.h2{font-family:var(--serif);font-weight:500;font-size:clamp(34px, 4.17vw, 60px);line-height:1.02;letter-spacing:clamp(-1.2px, -.083vw, -.6px)}
.lede{font-size:clamp(17px, 1.46vw, 21px);line-height:1.5;color:var(--body)}
.copy{font-size:18px;line-height:1.55;color:var(--body)}
@media (max-width:760px){.eyebrow{font-size:11px;letter-spacing:2.5px} .copy{font-size:16px}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;border-radius:999px;font-weight:600;font-size:17px;line-height:1.2;padding:18px 30px;border:1.5px solid var(--ink);white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s}
.btn--ink{background:var(--ink);color:var(--cream)} .btn--ink:hover{background:#2c2722;color:var(--cream)}
.btn--line{background:transparent;color:var(--ink);padding:18px 26px} .btn--line:hover{background:var(--ink);color:var(--cream)}
.btn--sm{font-size:16px;padding:14px 24px}
@media (max-width:760px){.btn{font-size:16px;padding:16px 24px;white-space:normal} .btn--block-m{display:flex;width:100%}}

/* Header */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px var(--gut);border-bottom:1px solid var(--line)}
.site-head__logo{display:flex;text-decoration:none}
.site-head__logo img{height:48px;width:auto}
.nav{display:flex;align-items:center;gap:36px;font-size:16px}
.nav a{text-decoration:none}
.nav a:not(.btn):hover{text-decoration:underline;text-underline-offset:4px}
.nav-toggle{display:none;width:48px;height:48px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;align-items:center;justify-content:center;padding:0;cursor:pointer}
@media (max-width:1100px){.nav{display:none} .nav-toggle{display:flex}}
@media (max-width:760px){.site-head{padding:18px 20px} .site-head__logo img{height:38px}}
.drawer{position:fixed;inset:0;z-index:40;background:var(--cream);display:flex;flex-direction:column;padding:18px 20px 32px;overflow-y:auto}
.drawer[hidden]{display:none}
.drawer__top{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid var(--line)}
.drawer__top img{height:38px;width:auto}
.drawer nav{display:flex;flex-direction:column;padding:12px 0 28px}
.drawer nav a{font-family:var(--serif);font-size:32px;line-height:1.2;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line)}
body.is-locked{overflow:hidden}

/* Hero */
.hero{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center;padding:88px var(--gut) 96px}
.hero__text{display:flex;flex-direction:column;gap:28px}
.hero__text .lede{max-width:540px}
.hero__ctas{display:flex;gap:16px;flex-wrap:wrap}
.ph{border-radius:28px;background:var(--sand);display:flex;align-items:flex-end;padding:28px;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);line-height:1.4}
.ph--alt{background:var(--sand-2)}
.ph--dark{background:var(--dark-2);color:var(--dim)}
.ph.has-photo{padding:0!important;overflow:hidden;position:relative}
.ph.has-photo img{width:100%;height:100%;object-fit:cover}
.hero__photo{height:clamp(420px, 43vw, 620px)}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:20px;padding:36px var(--gut) 40px} .hero__text{gap:20px}}
@media (max-width:760px){.hero__photo{height:420px;border-radius:22px;padding:18px;font-size:11px}}

/* Proof strip */
.proof{display:flex;align-items:center;justify-content:space-between;gap:48px;padding:44px var(--gut)}
.proof__names{display:flex;gap:clamp(28px, 5vw, 72px);align-items:center;font-family:var(--serif);font-size:clamp(22px, 2.08vw, 30px);line-height:1.2}
.proof__note{font-size:17px;color:var(--dim);text-align:right}
.proof .eyebrow{font-size:13px}
@media (max-width:1000px){.proof{flex-direction:column;align-items:flex-start;gap:12px} .proof__note{text-align:left}}
.proof__logos{gap:clamp(36px, 5vw, 72px);flex-wrap:wrap}
.proof__logos img{height:var(--lh,26px);width:auto;display:block;opacity:.92}
@media (max-width:760px){.proof{padding:28px 20px} .proof__names{display:block;line-height:1.4} .proof__note{font-size:15px} .proof .eyebrow{font-size:11px}
  .proof__logos{display:flex;gap:22px 32px;align-items:center;padding:4px 0}
  .proof__logos img{height:calc(var(--lh,26px) * .82)}}

/* Section headers */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:48px}
.sec-head__title{display:flex;flex-direction:column;gap:16px;max-width:820px}
.sec-head .copy{max-width:420px}
@media (max-width:900px){.sec-head{flex-direction:column;align-items:flex-start;gap:16px}}

/* Why switch */
.why{display:flex;flex-direction:column;gap:56px}
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:36px;display:flex;flex-direction:column;gap:16px}
.card__num{font-family:var(--serif);font-size:44px;line-height:1;color:var(--accent)}
.card h3{font-size:24px;font-weight:600;line-height:1.25}
.card p{font-size:17px;line-height:1.55;color:var(--body)}
@media (max-width:1000px){.cards3{grid-template-columns:1fr}}
@media (max-width:760px){.why{gap:20px} .cards3{gap:20px} .card{border-radius:18px;padding:24px;gap:10px} .card h3{font-size:20px} .card p{font-size:16px}}

/* No jars band */
.jars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center;padding:96px var(--gut)}
.jars h2{font-family:var(--serif);font-weight:500;font-size:clamp(38px, 5vw, 72px);line-height:1;letter-spacing:clamp(-1.6px, -.11vw, -.8px)}
.jars__body{display:flex;flex-direction:column;gap:20px}
.jars__body p{font-size:20px;line-height:1.55;color:var(--line)}
@media (max-width:900px){.jars{grid-template-columns:1fr;gap:16px}}
@media (max-width:760px){.jars{padding:48px 20px} .jars h2{line-height:1.02} .jars__body p{font-size:16px}}

/* How switching works */
.how{display:flex;flex-direction:column;gap:56px}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.step{display:flex;flex-direction:column;gap:14px;padding-top:24px;border-top:2px solid var(--ink)}
.step__num{font-family:var(--serif);font-size:20px;color:var(--accent)}
.step h3{font-size:24px;font-weight:600;line-height:1.25}
.step p{font-size:17px;line-height:1.55;color:var(--body)}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  #how{padding-bottom:0}
  .how{gap:14px}
  .how .h2{font-size:34px}
  .steps{grid-template-columns:1fr;gap:0}
  .step{flex-direction:row;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
  .step__num{min-width:28px}
  .step h3{font-size:18px;margin-bottom:6px}
  .step p{font-size:15px;line-height:1.5}
}

/* Schools and workplaces */
.services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;padding:0 var(--gut) var(--sec)}
.panel{border-radius:28px;overflow:hidden;display:flex;flex-direction:column}
.panel--ink{background:var(--ink);color:var(--cream)}
.panel--sand{background:var(--sand)}
.panel__photo{height:340px;border-radius:0;padding:24px}
.panel__body{padding:44px;display:flex;flex-direction:column;gap:18px}
.panel h3{font-family:var(--serif);font-size:clamp(28px, 2.92vw, 42px);font-weight:500;line-height:1.05}
.panel p{font-size:17px;line-height:1.55;color:var(--body)}
.panel--ink p{color:var(--line)}
.panel a{font-weight:600;font-size:17px}
.panel--ink a{color:var(--cream)}
.consult{grid-column:span 2;border:1px solid var(--line);border-radius:22px;padding:32px 44px;display:flex;align-items:center;justify-content:space-between;gap:40px}
.consult__text{display:flex;flex-direction:column;gap:6px}
.consult__line{font-size:22px;font-weight:600;line-height:1.3}
@media (max-width:900px){.services{grid-template-columns:1fr} .consult{grid-column:auto;flex-direction:column;align-items:flex-start;gap:20px;padding:28px}}
@media (max-width:760px){
  .services{gap:16px;padding:56px 20px 0}
  .panel{border-radius:22px}
  .panel__photo{height:200px;padding:16px;font-size:11px}
  .panel__body{padding:24px;gap:12px}
  .panel h3{line-height:1.1}
  .panel a{font-size:16px}
}

/* Built by TNINE */
.tech{display:flex;flex-direction:column;gap:48px;padding:0 var(--gut) var(--sec)}
.tech__list{display:flex;flex-direction:column;gap:28px}
.tech__item img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:28px;border:1px solid var(--line);background:var(--card)}
@media (max-width:760px){
  .tech{gap:16px;padding:56px 20px}
  .tech .h2{font-size:34px}
  .tech__list{gap:16px}
  .tech__item{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden}
  .tech__item img{border:0;border-radius:0}
  .tech__card{padding:22px;display:flex;flex-direction:column;gap:10px}
  .tech__tag{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:600}
  .tech__icon{width:44px;height:44px;border-radius:999px;background:var(--ink);color:var(--cream);display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .tech__card h3{font-family:var(--serif);font-size:24px;font-weight:500}
  .tech__card p{font-size:15px;line-height:1.55;color:var(--body)}
}

/* School menu: TNINE's printed menu style */
.menu-sec{display:flex;flex-direction:column;gap:36px;padding:0 var(--gut) var(--sec)}
.menu-sec .sec-head__title{max-width:780px}
.menu{--m-cream:#F5F1E8;--m-dark:#1A1712;--m-line:#E2D9C8;--m-row:#EDE5D8;--m-grey:#7A7266;--m-green:#2F6B3E;--m-green-2:#4F8A5C;--m-green-bg:#EFF6EF;--m-red:#B8452F;--m-blue:#3E6A96;
  background:var(--m-cream);border:1px solid var(--m-line);border-radius:28px;padding:48px;display:flex;flex-direction:column;gap:28px;font-family:"PT Serif", Georgia, serif;color:var(--m-dark)}
.menu__top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px}
.menu__left{display:flex;flex-direction:column;gap:20px}
.menu__badge{background:var(--m-dark);color:var(--m-cream);border-radius:20px;padding:14px 34px 12px;display:flex;flex-direction:column;align-items:center;align-self:flex-start}
.menu__badge-week{font-family:Yellowtail, cursive;font-size:44px;line-height:1}
.menu__badge-sub{font-family:"Playfair Display", Georgia, serif;font-size:14px;letter-spacing:4px;font-weight:700}
.menu__tabs{display:flex;gap:10px}
.menu__tab{min-height:44px;padding:0 20px;border-radius:999px;border:1.5px solid var(--m-dark);background:transparent;color:var(--m-dark);font-family:var(--sans);font-size:15px;font-weight:600;cursor:pointer}
.menu__tab[aria-selected="true"]{background:var(--m-dark);color:var(--m-cream)}
.menu__right{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.menu__right img{height:64px;width:auto}
.menu__school{font-family:"Playfair Display", Georgia, serif;font-size:12px;letter-spacing:3px;font-weight:700;color:var(--m-grey);text-align:right;line-height:1.6}
.mtable{border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--m-line)}
.mrow{display:grid;grid-template-columns:160px 1.35fr 1fr 1.15fr .95fr}
.mrow + .mrow{border-top:1px solid var(--m-row)}
.mrow--head{background:var(--m-dark);color:var(--m-cream);font-family:"Playfair Display", Georgia, serif;font-size:13px;font-weight:700;letter-spacing:1px}
.mrow--head > div{padding:16px 18px}
.mrow--head .ffh{color:#9CC7A2}
.mrow > .c{padding:22px 18px}
.mday{font-family:"Playfair Display", Georgia, serif;font-weight:900;font-size:15px;letter-spacing:1px;text-transform:uppercase}
.mmain{display:flex;flex-direction:column;gap:4px}
.dish{font-family:"Playfair Display", Georgia, serif;font-weight:700;font-size:17px;line-height:1.3}
.al{color:var(--m-red);font-style:italic;font-size:13px;font-family:"PT Serif", Georgia, serif;font-weight:400}
.malt{font-size:13px;font-style:italic;color:var(--m-blue)}
.msides{font-size:14px;color:var(--m-grey)}
.mveg,.mpud{font-size:16px;line-height:1.4}
.mlabel{display:none}
.mff{background:var(--m-green-bg);display:flex;flex-direction:column;gap:4px}
.mff .dish{color:var(--m-green)}
.ffnote{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--m-green-2)}
.ffpud{font-size:14px;font-style:italic;color:var(--m-green)}
.mkey{background:#ECE3D2;border-radius:12px;padding:16px 20px;font-size:14px;line-height:1.6;color:var(--body)}
.mkey .ok{color:var(--m-green)}
@media (max-width:1100px){.mtable-scroll{overflow-x:auto;border-radius:14px} .mtable-scroll .mtable{min-width:880px}}
@media (max-width:760px){
  .menu-sec{gap:18px;padding:0 20px 56px}
  .menu-sec .h2{font-size:34px;line-height:1.05}
  .menu{border-radius:22px;padding:20px 16px;gap:16px}
  .menu__top{align-items:center;gap:16px 12px;flex-wrap:wrap}
  .menu__left{display:contents}
  .menu__badge{order:1;align-self:center}
  .menu__right{order:2}
  .menu__tabs{order:3;flex-basis:100%}
  .menu__badge{border-radius:14px;padding:8px 18px 6px}
  .menu__badge-week{font-size:28px}
  .menu__badge-sub{font-size:10px;letter-spacing:3px}
  .menu__right img{height:40px}
  .menu__tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .menu__tab{width:100%;padding:0 6px;font-size:14px}
  .mtable-scroll{overflow:visible}
  .mtable-scroll .mtable{min-width:0}
  .mtable{background:transparent;border:0;border-radius:0;overflow:visible;display:flex;flex-direction:column;gap:16px}
  .mrow--head{display:none!important}
  .mrow{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--m-line);border-radius:14px;overflow:hidden;padding-bottom:14px}
  .mrow + .mrow{border-top:1px solid var(--m-line)}
  .mrow > .c{padding:0 14px}
  .mrow > .mday{background:var(--m-dark);color:var(--m-cream);padding:10px 14px;font-size:13px;letter-spacing:1.5px;margin-bottom:4px}
  .mmain{gap:2px}
  .dish{font-size:16px}
  .al{font-size:12px}
  .malt{font-size:12px}
  .msides{font-size:13px}
  .mveg,.mpud{font-size:14px}
  .mlabel{display:inline;font-family:var(--serif);font-size:10px;letter-spacing:1.5px;color:var(--m-grey);font-weight:700}
  .mrow > .mff{margin:0 14px;padding:10px 12px;border-radius:10px;gap:3px}
  .mff .dish{font-size:15px}
  .ffnote{font-size:10px}
  .ffpud{display:none}
  .mkey{background:transparent;padding:0;font-size:12px;line-height:1.55}
}

/* Where our food comes from */
.food{background:var(--card)}
.food__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:80px;align-items:start}
.food__text{display:flex;flex-direction:column;gap:24px}
.food__text .copy{line-height:1.6}
.suppliers{display:flex;flex-direction:column}
.supplier{display:flex;justify-content:space-between;gap:24px;padding:26px 0;border-top:1px solid var(--line)}
.supplier:last-child{border-bottom:1px solid var(--line)}
.supplier__name{font-family:var(--serif);font-size:28px;line-height:1.2}
.supplier__what{font-size:17px;color:var(--body);text-align:right;max-width:300px}
@media (max-width:900px){.food__grid{grid-template-columns:1fr;gap:32px}}
@media (max-width:760px){
  .food{padding:56px 20px}
  .food__grid{gap:18px}
  .food__text{gap:18px}
  .food .h2{font-size:34px;line-height:1.05}
  .supplier{flex-direction:column;gap:4px;padding:16px 0}
  .supplier__name{font-size:22px}
  .supplier__what{font-size:15px;text-align:left}
}

/* Gallery */
.gallery{display:flex;flex-direction:column;gap:36px;padding:var(--sec) var(--gut) 0}
.gallery h2{font-family:var(--serif);font-size:48px;font-weight:500;letter-spacing:-1px;line-height:1.1}
.gallery__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.gallery__grid .ph{height:360px;border-radius:20px;padding:18px;font-size:12px}
.gallery__link{font-weight:600;font-size:17px}
@media (max-width:1000px){.gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Testimonials */
.quotes{display:flex;flex-direction:column;gap:48px}
.quotes__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.quote{margin:0;border-radius:28px;padding:56px;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.quote blockquote{margin:0;font-family:var(--serif);font-size:26px;line-height:1.35;font-weight:400}
.quote figcaption{display:flex;flex-direction:column;gap:4px}
.quote__name{font-size:18px;font-weight:600}
.quote__role{font-size:15px;color:var(--muted)}
.quote--lead{grid-column:span 2;background:var(--ink);color:var(--cream);padding:64px;gap:36px;justify-content:flex-start}
.quote--lead blockquote{font-size:clamp(21px, 2.78vw, 40px);line-height:1.25;letter-spacing:-.5px}
.quote--lead .quote__role{color:var(--dim)}
.quote--sand{background:var(--sand)}
.quote--card{background:var(--card);border:1px solid var(--line)}
@media (max-width:900px){.quotes__grid{grid-template-columns:1fr} .quote--lead{grid-column:auto}}
@media (max-width:760px){
  #about{padding:0 20px 56px}
  .quotes{gap:16px}
  .quotes__grid{gap:16px}
  .quote,.quote--lead{border-radius:22px;padding:28px 24px;gap:22px}
  .quote blockquote,.quote--lead blockquote{font-size:21px;line-height:1.35;letter-spacing:0}
  .quote__name{font-size:16px}
  .quote__role{font-size:14px}
}

/* 2027 promise */
.promise-sec{padding:0 var(--gut)}
.promise-sec.pad{padding-top:var(--sec)}
.promise{background:var(--sand);border-radius:28px;padding:64px 72px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center}
.promise h2{font-family:var(--serif);font-size:clamp(32px, 3.2vw, 46px);line-height:1.05;font-weight:500;letter-spacing:-.8px}
.promise p{font-size:18px;line-height:1.6;color:var(--body)}
@media (max-width:900px){.promise{grid-template-columns:1fr;gap:20px;padding:40px 32px}}

/* Closing call to action */
.cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px}
.cta h2{font-family:var(--serif);font-size:clamp(40px, 5.28vw, 76px);line-height:1;font-weight:500;letter-spacing:clamp(-1.6px, -.11vw, -.8px);max-width:1000px}
.cta p{font-size:20px;line-height:1.5;color:var(--body);max-width:640px}
.cta__btns{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.cta .btn{font-size:18px;padding:20px 34px}
.cta .btn--line{padding:20px 30px}
@media (max-width:760px){
  .cta{padding:64px 20px;gap:18px}
  .cta h2{line-height:1.02}
  .cta p{font-size:17px}
  .cta__btns{flex-direction:column;width:100%;gap:18px}
  .cta .btn,.cta .btn--line{font-size:16px;padding:16px 24px;width:100%}
}

/* Footer */
.foot{background:var(--ink);color:var(--cream);padding:72px var(--gut) 48px}
.foot a{color:var(--cream);text-decoration:none}
.foot a:hover{color:var(--cream);text-decoration:underline;text-underline-offset:4px}
.foot__top{display:flex;justify-content:space-between;gap:48px}
.foot__brand{display:flex;flex-direction:column;gap:14px;max-width:380px}
.foot__brand img{height:56px;width:auto;align-self:flex-start}
.foot__brand p{font-size:16px;line-height:1.6;color:var(--dim)}
.foot__cols{display:grid;grid-template-columns:repeat(3,max-content);column-gap:clamp(48px,6vw,88px);row-gap:24px;font-size:16px}
.foot__col{display:flex;flex-direction:column;gap:12px}
.foot__label{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--dim)}
.foot__bottom{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--ink-line);padding-top:24px;margin-top:56px;font-size:14px;color:var(--dim)}
.foot__bottom a{color:var(--dim)}
@media (max-width:1000px){.foot__top{flex-direction:column} .foot__cols{gap:40px}}
@media (max-width:760px){
  .foot{padding:40px 20px}
  .foot__brand img{height:44px}
  .foot__social{display:flex;gap:20px;font-size:15px;margin-top:20px}
  .foot__social a{text-decoration:underline;text-underline-offset:3px}
  .foot__bottom{border:0;padding:0;margin-top:20px;font-size:13px;line-height:1.6;display:block}
}

/* ===== Build your plan ===== */
.plan-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px var(--gut);border-bottom:1px solid var(--line)}
.plan-head img{height:48px;width:auto}
.plan-head__note{display:flex;align-items:center;gap:24px;font-size:15px;color:var(--muted)}
.plan-head__note a{font-weight:600;color:var(--ink)}
@media (max-width:760px){.plan-head{padding:18px 20px} .plan-head img{height:38px} .plan-head__note{gap:10px;font-size:14px}}

.plan{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;padding:56px var(--gut) 88px;max-width:calc(var(--wrap) + 2 * var(--gut));margin-inline:auto}
.plan__choices{display:flex;flex-direction:column;gap:40px}
.plan__intro{display:flex;flex-direction:column;gap:12px}
.plan__intro h1{font-family:var(--serif);font-size:clamp(40px, 3.9vw, 56px);line-height:1;font-weight:500;letter-spacing:-1.2px}
.q{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.q legend{font-size:15px;font-weight:600;padding:0;margin-bottom:12px}
.q legend span{font-weight:400;color:var(--muted)}
.opts{display:grid;gap:12px}
.opts--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.opts--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.opts--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.opt{text-align:left;min-height:64px;padding:16px 18px;border-radius:16px;border:2px solid var(--line);background:var(--card);color:var(--ink);font-family:var(--sans);cursor:pointer;transition:background-color .12s,border-color .12s,color .12s}
.opt:hover{border-color:var(--muted)}
.opt[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--cream)}
.opt__big{display:block;font-family:var(--serif);font-size:24px;line-height:1.15}
.opt__label{display:block;font-size:17px;font-weight:600;line-height:1.25}
.opt__sub{display:block;font-size:13px;margin-top:2px;opacity:.75;line-height:1.35}
.opt--type .opt__sub{font-size:14px;margin-top:4px}
@media (max-width:1100px){.plan{grid-template-columns:1fr;gap:40px} .plan__summary{position:static}}
@media (max-width:560px){.opts--3{grid-template-columns:1fr} .opts--4{grid-template-columns:repeat(2,minmax(0,1fr))} .opt__big{font-size:21px}}
@media (max-width:760px){.plan{padding:36px 20px 56px} .plan__choices{gap:32px}}

.summary{background:var(--ink);color:var(--cream);border-radius:28px;padding:44px;display:flex;flex-direction:column;gap:26px;align-self:start;position:sticky;top:96px}
.summary__head{font-family:var(--serif);font-size:34px;line-height:1.1}
.summary__line{font-size:16px;color:var(--line);line-height:1.5}
.summary__rows{border-top:1px solid var(--ink-line);display:flex;flex-direction:column}
.srow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--ink-line)}
.srow__k{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--dim)}
.srow__v{text-align:right}
.srow__v b{display:block;font-family:var(--serif);font-size:24px;font-weight:400}
.srow__v small{display:block;font-size:13px;color:var(--dim)}
.summary__inc{border-top:1px solid var(--ink-line);padding-top:22px;display:flex;flex-direction:column;gap:12px}
.summary__inc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.summary__inc li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.4}
.summary__inc svg{flex-shrink:0;margin-top:2px}
.btn--cream{background:var(--cream);color:var(--ink);border-color:var(--cream);font-size:18px;padding:20px}
.btn--cream:hover{background:#fff;color:var(--ink)}
.summary__small{font-size:14px;color:var(--dim);text-align:center;margin-top:-10px}
@media (max-width:760px){.summary{border-radius:22px;padding:28px 24px;gap:22px} .summary__head{font-size:28px} .srow__v b{font-size:21px}}

/* Tasting form dialog */
.tasting{border:0;padding:0;border-radius:28px;background:var(--cream);color:var(--ink);width:min(560px, calc(100vw - 32px));max-height:calc(100vh - 32px)}
.tasting::backdrop{background:rgba(20,18,16,.6)}
.tasting__inner{padding:40px;display:flex;flex-direction:column;gap:22px}
.tasting__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.tasting h2{font-family:var(--serif);font-size:34px;line-height:1.05;font-weight:500;letter-spacing:-.6px}
.tasting__close{width:44px;height:44px;flex-shrink:0;border-radius:999px;border:1.5px solid var(--ink);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.tasting__plan{background:var(--sand);border-radius:16px;padding:16px 18px;font-size:15px;line-height:1.5;color:var(--body)}
.tasting__plan strong{color:var(--ink)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:15px;font-weight:600}
.field label span{font-weight:400;color:var(--muted)}
.field input{font:inherit;font-size:17px;padding:14px 16px;border-radius:14px;border:2px solid var(--line);background:var(--card);color:var(--ink);width:100%}
.field input:focus{outline:none;border-color:var(--ink)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tasting .btn{width:100%}
.tasting__msg{font-size:15px;line-height:1.5}
.tasting__msg--err{color:#8A2E1B}
.tasting__done{display:flex;flex-direction:column;gap:18px}
@media (max-width:560px){.tasting__inner{padding:28px 22px} .fields{grid-template-columns:1fr} .tasting h2{font-size:28px}}

/* Paper: a very faint grain over the whole page so flat colour reads as stock, not screen */
body::before{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.045;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-transparency:reduce){body::before{display:none}}
/* Photographs: one grade across a mixed set of phone shots, and a caption ledge */
.ph.has-photo img{filter:saturate(.92) contrast(1.04) brightness(.99)}
.ph.has-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(154,74,46,.05),rgba(154,74,46,.05)),linear-gradient(0deg,rgba(20,18,16,.18),rgba(20,18,16,0) 38%);mix-blend-mode:multiply;pointer-events:none;border-radius:inherit}
.ph.has-photo .cap{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(244,239,228,.92);text-shadow:0 1px 8px rgba(0,0,0,.35);line-height:1.4}
.hero__photo .cap,.panel__photo .cap{left:24px;bottom:22px;font-size:12px}
@media (max-width:760px){.ph.has-photo .cap{left:14px;right:14px;bottom:12px;font-size:10px}}

/* ===== Inner pages (Schools, Workplaces, Our tech, Menus, Our food, About) ===== */
.h1--page{font-size:clamp(44px, 5vw, 72px);line-height:1;letter-spacing:clamp(-1.6px, -.11vw, -1px)}
.hero--text{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:end;padding-bottom:72px}
.hero--text .lede{max-width:none}
@media (max-width:900px){.hero--text{grid-template-columns:1fr;gap:20px;padding-bottom:40px}}
.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px}
html.mo .nav a[aria-current="page"]{text-decoration:none}
html.mo .nav a[aria-current="page"]::after{transform:scaleX(1)}
.drawer nav a[aria-current="page"]{color:var(--accent)}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.stats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat{border-top:2px solid var(--ink);padding-top:22px;display:flex;flex-direction:column;gap:10px}
.stat__n{font-family:var(--serif);font-size:clamp(44px, 4.4vw, 64px);line-height:1;letter-spacing:-1px}
.stat__l{font-size:16px;line-height:1.45;color:var(--body)}
.band .stat{border-top-color:var(--ink-line)} .band .stat__l{color:var(--dim)}
@media (max-width:900px){.stats,.stats--3{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}}

.feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px;align-items:center}
.feature--flip .feature__media{order:2}
.feature__media img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:28px;border:1px solid var(--line);background:var(--card)}
.feature__media .ph{aspect-ratio:4/3;height:auto}
.feature__text{display:flex;flex-direction:column;gap:20px}
.feature__text h2{font-family:var(--serif);font-weight:500;font-size:clamp(32px, 3.2vw, 46px);line-height:1.05;letter-spacing:-.8px}
.features{display:flex;flex-direction:column;gap:clamp(56px, 8vw, 110px)}
@media (max-width:900px){.feature{grid-template-columns:1fr;gap:28px} .feature--flip .feature__media{order:0} .feature__media img{border-radius:20px}}

.index{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px;counter-reset:idx}
.index li{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"n h" "n p";gap:0 12px;padding:26px 0;border-top:1px solid var(--line);counter-increment:idx}
.index li::before{content:"0" counter(idx);grid-area:n;font-family:var(--serif);font-size:15px;color:var(--accent);padding-top:5px;font-variant-numeric:tabular-nums}
.index li:nth-child(n+10)::before{content:counter(idx)}
.index h3{grid-area:h;font-size:22px;font-weight:600;line-height:1.25;margin-bottom:8px}
.index p{grid-area:p;font-size:16px;line-height:1.55;color:var(--body)}
.index--1{grid-template-columns:1fr}
.index--1 li{grid-template-columns:44px minmax(0,1fr) minmax(0,1.4fr);grid-template-areas:"n h p";align-items:baseline}
.index--1 h3{margin:0}
.band .index li{border-top-color:var(--ink-line)} .band .index p{color:var(--line)}
@media (max-width:900px){.index{grid-template-columns:1fr;gap:0} .index--1 li{grid-template-columns:44px minmax(0,1fr);grid-template-areas:"n h" "n p"} .index--1 h3{margin-bottom:6px}}
@media (max-width:760px){.index li{padding:20px 0} .index h3{font-size:19px} .index p{font-size:15px}}

.serve{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.serve article{display:flex;flex-direction:column;gap:14px}
.serve .ph{height:auto;aspect-ratio:4/3;border-radius:20px}
.serve h3{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.15}
.serve p{font-size:16px;line-height:1.55;color:var(--body)}
@media (max-width:900px){.serve{grid-template-columns:1fr}}

.mark{width:28px;height:28px;opacity:.9}
.cta .mark{margin-bottom:-8px}

.bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.bullets li{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.45;color:var(--body)}
.bullets li::before{content:"";flex-shrink:0;width:18px;height:18px;margin-top:2px;background:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A4A2E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.band .bullets li{color:var(--line)}
.band .bullets li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CC7A2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
@media (max-width:760px){.bullets li{font-size:16px}}

.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.price{border:1px solid var(--ink-line);border-radius:22px;padding:32px;display:flex;flex-direction:column;gap:8px}
.price__k{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--dim)}
.price__v{font-family:var(--serif);font-size:clamp(34px, 3.3vw, 48px);line-height:1}
.price__s{font-size:15px;color:var(--dim)}
@media (max-width:900px){.prices{grid-template-columns:1fr}}

.opts-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){.opts-list{grid-template-columns:1fr}}

.fav-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.fav{display:flex;flex-direction:column;gap:14px}
.fav .ph{height:auto;aspect-ratio:4/5;border-radius:20px}
.fav h3{font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.15}
.fav p{font-size:15px;line-height:1.5;color:var(--body)}
@media (max-width:1000px){.fav-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fav-grid{grid-template-columns:1fr} .fav .ph{aspect-ratio:4/3}}

.gallery--big .gallery__grid{grid-template-rows:auto}
.gallery--big .gallery__grid .ph{height:auto;aspect-ratio:4/5}
@media (max-width:760px){.gallery--big{padding:56px 20px 0} .gallery--big h2{font-size:34px} .gallery--big .gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .gallery--big .gallery__grid .ph{border-radius:16px}}

.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:80px;align-items:start}
.two-col .copy + .copy{margin-top:18px}
@media (max-width:900px){.two-col{grid-template-columns:1fr;gap:28px}}

.facts{display:flex;flex-direction:column}
.fact{display:flex;justify-content:space-between;gap:24px;padding:20px 0;border-top:1px solid var(--line);font-size:17px}
.fact:last-child{border-bottom:1px solid var(--line)}
.fact span:first-child{color:var(--muted)}
.fact span:last-child{text-align:right}
@media (max-width:560px){.fact{flex-direction:column;gap:4px} .fact span:last-child{text-align:left}}

.stack{display:flex;flex-direction:column;gap:clamp(32px, 4vw, 56px)}
.sec--card{background:var(--card)}
.sec--tight{padding-top:0}
@media (max-width:760px){.sec--tight{padding-top:0}}

/* ===================================================================
   Motion. Layered on the signed-off design: nothing here changes layout,
   copy or colour. Everything sits behind html.mo, which is only set when
   the visitor has not asked for reduced motion (see the head script).
   =================================================================== */
:root{--ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1)}

/* Sticky header: slims, blurs, hides on scroll down, returns on scroll up */
.site-head,.plan-head{position:sticky;top:0;z-index:30;background:var(--cream)}
html.mo .site-head,html.mo .plan-head{transition:transform .6s var(--ease),padding .5s var(--ease),background-color .4s,box-shadow .4s,border-color .4s}
html.mo .site-head__logo img,html.mo .plan-head img{transition:height .5s var(--ease)}
.site-head.is-scrolled,.plan-head.is-scrolled{padding-block:14px;background:rgba(244,239,228,.84);-webkit-backdrop-filter:saturate(1.3) blur(16px);backdrop-filter:saturate(1.3) blur(16px);box-shadow:0 10px 30px -22px rgba(20,18,16,.45)}
.site-head.is-scrolled .site-head__logo img,.plan-head.is-scrolled img{height:40px}
@media (max-width:760px){.site-head.is-scrolled .site-head__logo img,.plan-head.is-scrolled img{height:34px} .site-head.is-scrolled,.plan-head.is-scrolled{padding-block:10px}}
.site-head.is-hidden,.plan-head.is-hidden{transform:translate3d(0,-105%,0)}
.scroll-line{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--sp,0));pointer-events:none}
html:not(.mo) .scroll-line{display:none}
[id]{scroll-margin-top:96px}

/* Nav: underline draws in from the left */
html.mo .nav a:not(.btn){position:relative}
html.mo .nav a:not(.btn):hover{text-decoration:none}
html.mo .nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease)}
html.mo .nav a:not(.btn):hover::after{transform:scaleX(1);transform-origin:0 50%}

/* Buttons: ink lifts, outline fills with a sweep, gentle magnetic pull (motion.js) */
html.mo .btn{position:relative;isolation:isolate;overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease),color .35s,background-color .35s,translate .5s var(--ease)}
html.mo .btn--ink:hover{transform:translateY(-1px);background:#2c2722}
html.mo .btn--line:hover{background:transparent;color:var(--cream)}
html.mo .btn--line::before{content:"";position:absolute;inset:-1px;z-index:-1;background:var(--ink);border-radius:inherit;transform:scaleX(0);transform-origin:100% 50%;transition:transform .55s var(--ease)}
html.mo .btn--line:hover::before{transform:scaleX(1);transform-origin:0 50%}
html.mo .btn--cream:hover{transform:translateY(-1px);background:#fff}
html.mo .btn:active{transform:translateY(0) scale(.98)}
html.mo .panel a,html.mo .gallery__link,html.mo .foot a{transition:text-underline-offset .3s var(--ease),opacity .3s}
html.mo .panel a:hover,html.mo .gallery__link:hover{text-underline-offset:6px}

/* Fade up on scroll */
html.mo :is(.lede:not(.hero .lede),.proof .eyebrow,.proof__note,.sec-head .eyebrow,.sec-head .copy,.sec-head > .btn,.jars__body,.panel,.consult,.menu,.menu-sec > .btn,.food__text .eyebrow,.food__text .copy,.food__grid > .m-only,.gallery__link,.quotes > .eyebrow,.promise,.cta > p,.cta__btns,.foot__top,.foot__bottom,.q,.summary,#how > .wrap > .btn){opacity:0;transform:translate3d(0,16px,0);transition:opacity .55s var(--ease) var(--d,0s),transform .65s var(--ease) var(--d,0s)}
html.mo :is(.lede:not(.hero .lede),.proof .eyebrow,.proof__note,.sec-head .eyebrow,.sec-head .copy,.sec-head > .btn,.jars__body,.panel,.consult,.menu,.menu-sec > .btn,.food__text .eyebrow,.food__text .copy,.food__grid > .m-only,.gallery__link,.quotes > .eyebrow,.promise,.cta > p,.cta__btns,.foot__top,.foot__bottom,.q,.summary,#how > .wrap > .btn).in{opacity:1;transform:none}
html.mo .promise{transform:translate3d(0,18px,0) scale(.99)}
html.mo .summary{transform:translate3d(40px,0,0)}
@media (max-width:1100px){html.mo .summary{transform:translate3d(0,32px,0)}}
html.mo .panel.in,html.mo .promise.in,html.mo .summary.in{transform:none}

/* Generic hooks used by the inner pages */
html.mo [data-r]{opacity:0;transform:translate3d(0,16px,0);transition:opacity .55s var(--ease) var(--d,0s),transform .65s var(--ease) var(--d,0s)}
html.mo [data-r].in{opacity:1;transform:none}
html.mo [data-stagger] > *{opacity:0;transform:translate3d(0,18px,0);transition:opacity .55s var(--ease) calc(var(--i,0) * 45ms + var(--d,0s)),transform .65s var(--ease) calc(var(--i,0) * 45ms + var(--d,0s))}
html.mo [data-stagger].in > *{opacity:1;transform:none}
html.mo .stat{border-top-color:transparent;position:relative}
html.mo .stat::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease) calc(var(--i,0) * 70ms + .05s)}
html.mo .band .stat::before{background:var(--ink-line)}
html.mo .stats.in .stat::before{transform:scaleX(1)}
html.mo .feature__media img{opacity:0;transform:translate3d(0,24px,0) scale(.98);transition:opacity .6s var(--ease),transform .75s var(--ease)}
html.mo .feature__media.in img{opacity:1;transform:none}
html.mo .fav .ph.has-photo img{transition:scale 1.1s var(--ease) var(--d,0s),filter .6s}
@media (hover:hover){html.mo .fav:hover .ph.has-photo.in img{scale:1.12;transition-duration:1.1s}}

/* Staggered children */
html.mo :is(.proof__names,.cards3,.steps,.suppliers,.quotes__grid) > *{opacity:0;transform:translate3d(0,18px,0);transition:opacity .55s var(--ease) calc(var(--i,0) * 45ms + var(--d,0s)),transform .65s var(--ease) calc(var(--i,0) * 45ms + var(--d,0s))}
html.mo :is(.proof__names,.cards3,.steps,.suppliers,.quotes__grid).in > *{opacity:1;transform:none}
html.mo .proof__names > .m-only{transform:none}

/* Headings rise word by word (motion.js wraps the words) */
html.mo :is(.h1,.h2,.jars h2,.gallery h2,.cta h2,.plan__intro h1):not(.is-split){opacity:0}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em 0 .16em;margin:-.1em 0 -.16em}
.wi{display:inline-block;transform:translate3d(0,110%,0);transition:transform .6s var(--ease) calc(var(--i,0) * 16ms + var(--d,0s))}
.is-split.in .wi{transform:none}
.is-split.done .w{overflow:visible}

/* Photos and placeholders: wipe up, settle, then drift with the scroll */
html.mo .ph{clip-path:inset(100% 0 0 0 round 28px);transition:clip-path .8s var(--ease-io) var(--d,0s)}
html.mo .ph.in{clip-path:inset(0 0 0 0 round 28px)}
html.mo .ph > span{opacity:0;transition:opacity .5s ease calc(var(--d,0s) + .4s)}
html.mo .ph.in > span{opacity:1}
html.mo .ph.has-photo img{scale:1.14;translate:0 var(--py,0px);transition:scale 1.1s var(--ease) var(--d,0s);will-change:translate}
html.mo .ph.has-photo.in img{scale:1.08}
html.mo .panel:hover .ph.has-photo.in img{scale:1.11;transition-duration:1.2s}
html.mo .panel__photo{clip-path:inset(100% 0 0 0);transition-duration:.8s}
html.mo .panel__photo.in{clip-path:inset(0)}
@media (max-width:760px){html.mo .ph{clip-path:inset(100% 0 0 0 round 22px)} html.mo .ph.in{clip-path:inset(0 0 0 0 round 22px)} html.mo .gallery__grid .ph.in{clip-path:inset(0 0 0 0 round 20px)}}
html.mo .gallery__grid .ph.in{clip-path:inset(0 0 0 0 round 20px)}

/* Hero shows straight away on load: no hidden state, no sequence */
html.mo .hero :is(.h1,.h2,h1,h2):not(.is-split),html.mo .plan__intro :is(.h1,h1):not(.is-split){opacity:1}
html.mo .hero .ph,html.mo .hero .ph.in{clip-path:none;transition:none}
html.mo .hero .ph > span{opacity:1;transition:none}
html.mo .hero .ph.has-photo img{scale:1.04;transition:none}

/* Cards and panels respond to the pointer */
html.mo .card{transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .4s}
@media (hover:hover){html.mo .cards3.in .card:hover{transform:translateY(-3px);border-color:#CDBFA6}}
html.mo .card__num{display:inline-block;transition:transform .6s var(--ease)}
@media (hover:hover){html.mo .card:hover .card__num{transform:translateX(6px)}}
html.mo .supplier__name{transition:transform .5s var(--ease),color .3s}
@media (hover:hover){html.mo .supplier:hover .supplier__name{transform:translateX(10px);color:var(--accent)}}
html.mo .quote{transition:transform .7s var(--ease)}


/* How switching works: the rules draw across */
html.mo .step{position:relative;border-top-color:transparent}
html.mo .step::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease) calc(var(--i,0) * 70ms + .05s)}
html.mo .steps.in .step::before{transform:scaleX(1)}
@media (max-width:760px){html.mo .step::before{height:1px;top:-1px;background:var(--line)}}

/* Built by TNINE: the app images stack like cards (desktop) */
@media (min-width:761px){
  html.mo .tech__item{position:sticky;top:calc(110px + var(--k,0) * 26px);transform-origin:50% 0;scale:calc(1 - var(--p,0) * .07);transition:scale .15s linear}
  html.mo .tech__item::after{content:"";position:absolute;inset:0;border-radius:28px;background:var(--ink);opacity:calc(var(--p,0) * .28);pointer-events:none}
  html.mo .tech__item img{opacity:0;transform:translate3d(0,28px,0) scale(.98);transition:opacity .6s var(--ease),transform .75s var(--ease);box-shadow:0 40px 80px -50px rgba(20,18,16,.5)}
  html.mo .tech__item.in img{opacity:1;transform:none}
}
@media (max-width:760px){html.mo .tech__item{opacity:0;transform:translate3d(0,16px,0);transition:opacity .55s var(--ease),transform .65s var(--ease)} html.mo .tech__item.in{opacity:1;transform:none}}

/* School menu: sliding tab pill, rows cascade when a week opens */
html.mo .menu__tabs{position:relative}
html.mo .menu__tab{position:relative;z-index:1;background:transparent;transition:color .4s var(--ease),border-color .4s}
html.mo .menu__tab[aria-selected="true"]{background:transparent}
.menu__pill{position:absolute;z-index:0;left:0;top:0;border-radius:999px;background:#1A1712;pointer-events:none;transition:transform .6s var(--ease),width .6s var(--ease),height .6s var(--ease)}
html:not(.mo) .menu__pill{display:none}
@keyframes rowIn{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
html.mo .menu.in .mtable-scroll:not([hidden]) .mrow:not(.mrow--head){animation:rowIn .8s var(--ease) both}
html.mo .menu.in .mtable-scroll .mrow:nth-child(2){animation-delay:.05s}
html.mo .menu.in .mtable-scroll .mrow:nth-child(3){animation-delay:.11s}
html.mo .menu.in .mtable-scroll .mrow:nth-child(4){animation-delay:.17s}
html.mo .menu.in .mtable-scroll .mrow:nth-child(5){animation-delay:.23s}
html.mo .menu.in .mtable-scroll .mrow:nth-child(6){animation-delay:.29s}
@keyframes swapIn{from{opacity:0;transform:translate3d(0,40%,0)}to{opacity:1;transform:none}}
.menu__badge-week.swap{animation:swapIn .6s var(--ease) both}

/* Mobile drawer slides in, links stagger */
html.mo .drawer{animation:drawerIn .55s var(--ease) both}
@keyframes drawerIn{from{opacity:0;transform:translate3d(0,-12px,0)}to{opacity:1;transform:none}}
html.mo .drawer nav a{animation:rowIn .7s var(--ease) both}
html.mo .drawer nav a:nth-child(2){animation-delay:.04s} html.mo .drawer nav a:nth-child(3){animation-delay:.08s}
html.mo .drawer nav a:nth-child(4){animation-delay:.12s} html.mo .drawer nav a:nth-child(5){animation-delay:.16s}
html.mo .drawer nav a:nth-child(6){animation-delay:.2s}

/* Build your plan */
html.mo .opt{transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
@media (hover:hover){html.mo .opt:hover{transform:translateY(-2px);box-shadow:0 12px 24px -18px rgba(20,18,16,.4)}}
html.mo .opt:active{transform:scale(.97)}
.mk{display:inline-block;min-width:.9em}
@keyframes pop{0%{transform:scale(.4) rotate(-20deg);opacity:0}60%{transform:scale(1.25)}100%{transform:none;opacity:1}}
html.mo .mk.pop{animation:pop .45s var(--ease) both}
@keyframes optsIn{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
html.mo .opts.swap > .opt{animation:optsIn .6s var(--ease) both}
html.mo .opts.swap > .opt:nth-child(2){animation-delay:.05s} html.mo .opts.swap > .opt:nth-child(3){animation-delay:.1s} html.mo .opts.swap > .opt:nth-child(4){animation-delay:.15s}
html.mo .q.q-in{animation:optsIn .7s var(--ease) both}
@keyframes tick{from{opacity:.15;transform:translate3d(0,8px,0);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
html.mo .tick{animation:tick .55s var(--ease) both}
html.mo .srow{overflow:hidden;transition:max-height .45s var(--ease),opacity .35s,padding .45s var(--ease);max-height:120px}
html.mo .srow.row-in{animation:rowIn .6s var(--ease) both}
html.mo .srow.row-out{max-height:0;opacity:0;padding-block:0;border-bottom-width:0}
html.mo .summary__inc li.li-in{animation:rowIn .6s var(--ease) both}
html.mo .tasting[open]{animation:dlgIn .5s var(--ease) both}
html.mo .tasting[open]::backdrop{animation:fade .4s ease both}
@keyframes dlgIn{from{opacity:0;transform:translate3d(0,24px,0) scale(.97)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
html.mo .tasting__done:not([hidden]){animation:optsIn .6s var(--ease) both}
.done-tick{width:56px;height:56px}
.done-tick circle{stroke:var(--line);stroke-width:2;fill:none}
.done-tick path{stroke:var(--ink);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:0}
html.mo .tasting__done:not([hidden]) .done-tick path{animation:draw .7s var(--ease) .2s both}
@keyframes draw{from{stroke-dashoffset:30}to{stroke-dashoffset:0}}
.plan__intro h1{--d:.1s}


@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Gallery viewer: tap a photo in the big gallery to see it full size */
.gallery--big .gallery__grid .ph{cursor:zoom-in}
.gallery--big .gallery__grid .ph:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.lb{border:0;padding:0;margin:auto;width:min(92vw,1100px);max-width:none;max-height:none;height:min(90vh,1000px);background:transparent;color:var(--cream);overflow:visible}
.lb::backdrop{background:rgba(20,18,16,.88)}
.lb__fig{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.lb__img{max-width:100%;max-height:calc(100% - 44px);width:auto;height:auto;border-radius:20px;object-fit:contain;background:#1d1a17}
.lb__cap{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:rgba(244,239,228,.85);text-align:center}
.lb__btn{position:fixed;top:50%;translate:0 -50%;width:52px;height:52px;border-radius:50%;border:1px solid rgba(244,239,228,.35);background:rgba(20,18,16,.55);color:var(--cream);display:flex;align-items:center;justify-content:center;cursor:pointer}
.lb__btn:hover{background:rgba(20,18,16,.85)}
.lb__btn:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.lb__prev{left:max(16px,calc(50vw - 640px))}
.lb__next{right:max(16px,calc(50vw - 640px))}
.lb__close{top:28px;right:28px;translate:none}
@media (max-width:760px){.lb{width:100vw;height:86vh}.lb__img{border-radius:14px}.lb__btn{width:44px;height:44px}.lb__prev{left:10px}.lb__next{right:10px}.lb__prev,.lb__next{top:auto;bottom:18px;translate:none}.lb__close{top:16px;right:16px}}
html.mo .lb[open]{animation:fade .25s ease both}