/* Honestly Good Chicken Fingers — site styles
   Colour and type per the Honestly Good brand guidelines.
   Black #000000 dominant, Yellow #FFDD16 strong accent,
   Dark Gray #575859 and Light Gray #AFB0B3 secondary.
   Montserrat Alternates for headlines, Josefin Sans for body. */

:root{
  --black:#000000;
  --yellow:#FFDD16;
  --dark-gray:#575859;
  --light-gray:#AFB0B3;
  --white:#FFFFFF;
  /* derived tints of black for surface separation — not brand colours */
  --panel:#0E0E0E;
  --card:#171717;
  --line:rgba(255,255,255,.14);
  --line-dark:rgba(0,0,0,.2);
  --maxw:1140px;
  --head:"Montserrat Alternates","Poppins",Arial,sans-serif;
  --body:"Josefin Sans","Poppins",Arial,sans-serif;
  /* The brand kit's handwritten element — used only for short asides
     ("have a good one"), never for headlines or body copy. */
  --hand:"Caveat","Bradley Hand","Segoe Script",cursive;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--body);
  font-size:17px;
  font-weight:500;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:20px}

h1,h2,h3,h4{font-family:var(--head);font-weight:800;line-height:1.05;letter-spacing:-.015em;margin:0;text-wrap:balance}
h1{font-size:clamp(34px,5.2vw,56px)}
h2{font-size:clamp(28px,4.2vw,46px);line-height:1.08}
h3{font-size:clamp(19px,2.2vw,24px);font-weight:700;line-height:1.15}
h4{font-size:17px;font-weight:700;line-height:1.2}
p{margin:0}
a{color:var(--yellow)}

.eyebrow{font-family:var(--head);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);margin:0}
.lede{font-size:clamp(17px,1.8vw,20px);color:var(--light-gray);max-width:64ch;font-weight:400;line-height:1.6}
.sm{font-size:16px;color:var(--light-gray);line-height:1.65;font-weight:500}

/* ---------- bands ---------- */
section{padding-block:clamp(56px,7.5vw,100px)}
.band-yellow{background:var(--yellow);color:var(--black)}
.band-yellow .eyebrow{color:var(--black)}
.band-yellow .lede{color:rgba(0,0,0,.75)}
.band-yellow .sm{color:rgba(0,0,0,.72)}
.band-yellow a{color:var(--black)}
/* A panel section sits on a near-black so it reads apart from the pure-black
   sections either side; the hairline rules make the boundary explicit. */
.band-panel{background:var(--panel);border-block:1px solid var(--line)}

.head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(28px,4vw,46px)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--yellow);color:var(--black);
  font-family:var(--head);font-weight:700;font-size:14px;letter-spacing:.02em;
  padding:13px 24px;border-radius:999px;text-decoration:none;border:none;cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}
.btn:hover{background:var(--white);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--white);border:1.5px solid var(--line);padding:11.5px 24px}
.btn-ghost:hover{background:var(--white);color:var(--black);border-color:var(--white)}
.band-yellow .btn{background:var(--black);color:var(--yellow)}
.band-yellow .btn:hover{background:var(--white);color:var(--black)}
.band-yellow .btn-ghost{background:transparent;color:var(--black);border-color:rgba(0,0,0,.35)}
.band-yellow .btn-ghost:hover{background:var(--black);color:var(--yellow)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--yellow);outline-offset:2px
}
.band-yellow a:focus-visible,.band-yellow button:focus-visible{outline-color:var(--black)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--black);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:10px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--white);min-width:0}
/* Supplied artwork, never redrawn or recoloured. Width is set and height is
   left to auto, so the lockup's 4.73:1 ratio is preserved at every size.
   The nav gap and header padding provide the clear space around it. */
.brand-mark{width:272px;height:auto;display:block}
.foot-mark{width:320px;max-width:100%;height:auto;display:block}
@media (max-width:900px){.brand-mark{width:212px}}
@media (max-width:400px){.brand-mark{width:178px}}

.nav-links{display:flex;gap:20px;align-items:center;font-size:15.5px}
.nav-links a{text-decoration:none;color:var(--light-gray)}
.nav-links a:hover{color:var(--yellow)}
.nav-links a[aria-current="page"]{color:var(--white)}
.nav-right{display:flex;align-items:center;gap:12px}

.nav-toggle{
  display:none;background:transparent;border:1.5px solid var(--line);border-radius:4px;
  color:var(--white);font-family:var(--head);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;padding:10px 14px;cursor:pointer
}
@media (max-width:900px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .nav-links.open{
    display:flex;flex-direction:column;align-items:flex-start;gap:4px;
    position:absolute;left:0;right:0;top:100%;background:var(--black);
    border-bottom:1px solid var(--line);padding:16px 20px 22px
  }
  .nav-links.open a{padding-block:8px;font-size:17px}
  .site-header .wrap{position:relative}
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(44px,6vw,78px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:clamp(28px,5vw,56px);align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:34px}}
.hero h1 em{font-style:normal;color:var(--yellow);display:block}
.hero p.lede{margin-top:20px;max-width:52ch}
.hero-note{margin-top:18px;font-size:14px;color:var(--dark-gray)}
/* Cut-out subject sits straight on the band — no frame, no crop box. */
.cutout{display:block;align-self:end}
.cutout img{width:100%;height:auto;max-width:480px;margin-inline:auto;display:block}
@media (max-width:860px){.cutout img{max-width:380px}}

/* ---------- real photography ----------
   Fixed ratios with object-fit: cover, so a portrait or landscape original
   fills its slot without distortion. */
/* height:auto is load-bearing — the width/height attributes on <img> are
   presentational hints, and without this they beat aspect-ratio and the
   image renders at its full intrinsic height. */
.photo{width:100%;height:auto;display:block;object-fit:cover;background:#111}
/* Transparent cut-outs must not sit on a placeholder fill, or the PNG's
   empty area shows as a box against the band. */
.photo.cut{background:transparent;object-fit:contain}
.photo.tall{aspect-ratio:3/4}
/* A circular crop, used where a square-ish subject is surrounded by
   background worth losing. Capped at the source width so it is never
   scaled up past its native resolution. */
.photo.round{aspect-ratio:1;border-radius:50%;object-position:50% 36%;max-width:360px;margin-inline:auto}
/* In the hero the photo is sized to the section, not the other way round,
   so the headline is never pushed out of the first screen. */
.hero .photo{aspect-ratio:auto;height:clamp(300px,42vw,440px);object-position:50% 62%}
/* ...except a round one, which is defined by its own square ratio and must
   not be stretched to the hero's fixed photo height. */
.hero .photo.round{aspect-ratio:1;height:auto;object-position:50% 36%}
.photo.r43{aspect-ratio:4/3}   /* named r43, not "box" — ".box" is the menu card */
.photo.wide{aspect-ratio:16/9}
.loc-photo{aspect-ratio:4/3;width:100%;object-fit:cover;display:block;margin-bottom:18px;background:#111}

/* ---------- photo slots (still to be filled) ---------- */
.shot{
  aspect-ratio:4/3;max-width:100%;border:1.5px dashed rgba(255,221,22,.45);
  display:flex;align-items:flex-end;padding:16px;overflow:hidden;
  background:repeating-conic-gradient(#111111 0% 25%, #0A0A0A 0% 50%) 0 0/30px 30px;
}
.shot span{font-family:var(--head);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--yellow);line-height:1.5}
.shot.wide{aspect-ratio:16/9}
.shot.tall{aspect-ratio:3/4}
.shot.on-yellow{border-color:rgba(0,0,0,.35);background:repeating-conic-gradient(#F5D414 0% 25%, #FFDD16 0% 50%) 0 0/30px 30px}
.shot.on-yellow span{color:rgba(0,0,0,.62)}

/* ---------- grids ---------- */
.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,52px)}
.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3.4vw,40px)}
.cols-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,32px)}
@media (max-width:900px){.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.cols-3{grid-template-columns:1fr}.cols-2{grid-template-columns:1fr}}
@media (max-width:560px){.cols-4{grid-template-columns:1fr}}

.pillar{border-top:2px solid var(--yellow);padding-top:18px}
.pillar h3{color:var(--yellow)}
.band-yellow .pillar{border-top-color:var(--black)}
.band-yellow .pillar h3{color:var(--black)}
.pillar p{margin-top:12px}

/* ---------- location cards ---------- */
.locations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:var(--line)}
@media (max-width:800px){.locations{grid-template-columns:1fr}}
.loc{background:var(--black);padding:26px 24px}
.band-panel .loc{background:var(--panel)}
.loc h3{color:var(--yellow)}
.loc .addr{font-size:16px;color:var(--light-gray);margin-top:11px;line-height:1.5;font-weight:500}
.loc .hrs{font-size:16px;margin-top:11px;color:var(--white);font-variant-numeric:tabular-nums}
.loc .tel{font-size:16px;margin-top:4px;color:var(--white);font-variant-numeric:tabular-nums}
.loc .tel a{color:var(--white);text-decoration:none;border-bottom:1px solid var(--dark-gray)}
.loc .cta-row{margin-top:18px}

/* ---------- menu ---------- */
.menu-jump{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.menu-jump a{
  font-family:var(--head);font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--white);border:1px solid var(--line);border-radius:999px;padding:8px 16px
}
.menu-jump a:hover{background:var(--yellow);color:var(--black);border-color:var(--yellow)}

.menu-list{margin-top:8px}
.menu-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:baseline;
  border-bottom:1px dotted rgba(0,0,0,.28);padding-block:16px
}
.menu-row .nm{font-family:var(--head);font-weight:700;font-size:20px;line-height:1.15}
.menu-row .dsc{font-size:15.5px;line-height:1.5;margin-top:5px;color:rgba(0,0,0,.7);font-weight:500;max-width:56ch}
.menu-row .pr{font-family:var(--head);font-weight:700;font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Menu lists that sit on black rather than the yellow band. */
.menu-list.on-dark .menu-row{border-bottom-color:var(--line)}
.menu-list.on-dark .menu-row .dsc{color:var(--light-gray)}
.menu-list.on-dark{max-width:720px}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.chip{border:1.5px solid rgba(0,0,0,.3);border-radius:999px;padding:8px 17px;font-size:15px;font-weight:400}
.chip.hot{background:var(--black);color:var(--yellow);border-color:var(--black);font-weight:500}
.band-panel .chip,section:not(.band-yellow) .chip{border-color:var(--line);color:var(--white)}
section:not(.band-yellow) .chip.hot{background:var(--yellow);color:var(--black);border-color:var(--yellow)}

/* ---------- numbered steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--line)}
@media (max-width:900px){.steps{grid-template-columns:1fr}}
.band-yellow .steps{background:rgba(0,0,0,.2)}
.step{background:var(--black);padding:24px 20px}
.band-yellow .step{background:var(--yellow)}
.band-panel .step{background:var(--panel)}
.step b{font-family:var(--head);font-weight:800;font-size:30px;display:block;line-height:1;color:var(--yellow);font-variant-numeric:tabular-nums}
.band-yellow .step b{color:var(--black)}
.step h4{margin-top:13px}
.step p{margin-top:9px;font-size:15.5px;line-height:1.55;color:var(--light-gray);font-weight:500}
.band-yellow .step p{color:rgba(0,0,0,.74)}
.steps.five{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1000px){.steps.five{grid-template-columns:1fr}}

/* ---------- stats ---------- */
.figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,34px)}
@media (max-width:760px){.figures{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}}
.fig-n{font-family:var(--head);font-weight:800;font-size:clamp(36px,5.2vw,56px);line-height:1;font-variant-numeric:tabular-nums}
.fig-l{margin-top:11px;font-size:15px;line-height:1.5;color:rgba(0,0,0,.78)}

.stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-top:32px;background:var(--line)}
@media (max-width:760px){.stat-row{grid-template-columns:1fr}}
.stat{background:var(--black);padding:26px 22px}
.stat b{display:block;font-family:var(--head);font-weight:800;font-size:clamp(28px,4vw,42px);color:var(--yellow);line-height:1;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:11px;font-size:15.5px;color:var(--light-gray);line-height:1.5;font-weight:500}

/* ---------- cards ---------- */
.box{background:var(--card);padding:20px;display:flex;flex-direction:column;gap:7px;border-bottom:4px solid var(--yellow)}
.box .nm{font-family:var(--head);font-weight:700;font-size:21px;color:var(--yellow);line-height:1.15}
.box .pr{font-family:var(--head);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.box .dsc{font-size:14.5px;color:var(--light-gray);line-height:1.5;font-weight:500}

.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.news-grid{grid-template-columns:1fr}}
.news{border:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--white)}
.news:hover{border-color:var(--yellow)}
.news .pub{font-family:var(--head);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--yellow)}
.news .hd{font-family:var(--head);font-weight:700;font-size:19px;line-height:1.25}
.news .dt{font-size:14.5px;color:var(--dark-gray);margin-top:auto}

.person{border-top:2px solid var(--line);padding-top:17px}
.person .nm{font-family:var(--head);font-weight:700;font-size:19px;line-height:1.15}
.person .rl{font-family:var(--head);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--yellow);margin-top:7px}
.person p{margin-top:11px;font-size:15.5px;color:var(--light-gray);line-height:1.55;font-weight:500}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line);padding:20px 0}
summary{
  cursor:pointer;list-style:none;font-family:var(--head);font-weight:700;
  font-size:clamp(17px,2.1vw,22px);line-height:1.25;display:flex;gap:16px;align-items:flex-start
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;color:var(--yellow);font-weight:700;font-size:23px;line-height:1}
details[open] summary::after{content:"\2013"}
details p{margin-top:14px;color:var(--light-gray);max-width:72ch;font-weight:500}

/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:700px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
label{font-family:var(--head);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(0,0,0,.68)}
input,select,textarea{
  font-family:var(--body);font-size:16px;color:var(--black);background:var(--white);
  border:1.5px solid rgba(0,0,0,.28);border-radius:4px;padding:12px 13px;width:100%
}
textarea{min-height:110px;resize:vertical}
.consent{display:flex;gap:11px;align-items:flex-start;grid-column:1/-1;margin-top:4px}
.consent input{width:18px;height:18px;flex:none;margin-top:3px}
.consent label{text-transform:none;letter-spacing:0;font-family:var(--body);font-size:15px;font-weight:500;line-height:1.5;color:rgba(0,0,0,.78)}
/* Netlify honeypot — a field only a bot would fill in. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
input[type=file]{padding:10px 12px;font-size:15px;background:var(--white);cursor:pointer}
.form-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:6px}
.form-msg{font-size:15px;color:rgba(0,0,0,.78);font-weight:500}

/* ---------- footer ---------- */
.site-footer{background:var(--black);padding-block:52px 40px;border-top:1px solid var(--line)}
.foot{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
@media (max-width:900px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot{grid-template-columns:1fr}}
.foot-col{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.foot-col .t{font-family:var(--head);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--yellow)}
.foot-col a{font-size:15.5px;color:var(--light-gray);text-decoration:none;font-weight:500}
.foot-col a:hover{color:var(--white)}
.foot-col .line{font-size:15px;color:var(--light-gray);font-weight:500;line-height:1.45}
.fine{margin-top:38px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--dark-gray);line-height:1.6;display:flex;flex-wrap:wrap;gap:8px 22px}
.fine a{color:var(--dark-gray);text-decoration:none}
.fine a:hover{color:var(--light-gray)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:20px;top:12px;position:fixed;z-index:100;background:var(--yellow);color:var(--black);padding:10px 16px;border-radius:4px;font-family:var(--head);font-weight:700}

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


/* ==================================================================
   MOVEMENT AND LIVE STATE
   Added after launch. Everything below is enhancement only — with
   JavaScript off the site renders exactly as it did before.
   ================================================================== */

/* --- Open now / Closed, per restaurant --- */
.status{
  display:flex;align-items:center;gap:9px;margin-top:12px;
  font-family:var(--head);font-weight:700;font-size:13.5px;letter-spacing:.04em
}
.status .dot{width:9px;height:9px;border-radius:50%;flex:none}
.status.is-open{color:var(--yellow)}
.status.is-open .dot{background:var(--yellow);box-shadow:0 0 0 0 rgba(255,221,22,.55);animation:pulse 2.6s ease-out infinite}
.status.is-shut{color:var(--dark-gray)}
.status.is-shut .dot{background:var(--dark-gray)}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,221,22,.5)}
  70%{box-shadow:0 0 0 9px rgba(255,221,22,0)}
  100%{box-shadow:0 0 0 0 rgba(255,221,22,0)}
}

/* --- Sections settle in ---
   The .reveal class is added by JS, so a visitor without JS never meets
   a hidden section. .can-reveal on <html> is the same guard for the CSS. */
.can-reveal .reveal{opacity:0;transform:translateY(14px)}
.can-reveal .reveal.shown{
  opacity:1;transform:none;
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1)
}

/* --- Header tightens on scroll --- */
.site-header{transition:padding .25s ease, background .25s ease}
.site-header.is-scrolled{background:rgba(0,0,0,.92);backdrop-filter:blur(8px)}
.site-header.is-scrolled .brand-mark{width:208px;transition:width .25s ease}
.brand-mark{transition:width .25s ease}
@media (max-width:900px){.site-header.is-scrolled .brand-mark{width:180px}}

/* --- Hero photo crossfade --- */
.hero-stack{position:relative;height:clamp(300px,42vw,440px);overflow:hidden}
.hero-stack .hero-slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 62%;opacity:0;transition:opacity 1.1s ease
}
.hero-stack .hero-slide.is-active{opacity:1}

/* --- Things lift when you point at them --- */
.loc,.news,.box{transition:transform .18s ease, border-color .18s ease}
.loc:hover{transform:translateY(-2px)}
.news:hover{transform:translateY(-3px)}
.box:hover{transform:translateY(-3px)}
.loc-photo,.photo{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.loc:hover .loc-photo{transform:scale(1.02)}
.menu-row{transition:background .15s ease}
.menu-row:hover{background:rgba(0,0,0,.045)}
.menu-list.on-dark .menu-row:hover{background:rgba(255,255,255,.035)}

@media (prefers-reduced-motion:reduce){
  .can-reveal .reveal{opacity:1;transform:none}
  .status .dot{animation:none}
  .loc:hover,.news:hover,.box:hover{transform:none}
  .loc:hover .loc-photo{transform:none}
  .hero-stack .hero-slide{transition:none}
}


/* ==================================================================
   BRAND KIT
   Taken from the Honestly Good brand kit: the "How to Franchise With
   Us" journey (numbered blobs on yellow with handwritten asides), the
   "good mood food." expression band, and the handwritten element.
   Palette and typefaces are unchanged — these are layout devices.
   ================================================================== */

/* --- the handwritten aside --- */
.hand{
  font-family:var(--hand);font-weight:700;line-height:1.05;
  font-size:clamp(24px,2.9vw,33px);letter-spacing:.005em;
  color:var(--black);transform:rotate(-2.5deg);transform-origin:left center;margin:0
}
section:not(.band-yellow) .hand{color:var(--yellow)}
.hand.right{transform:rotate(2deg)}

/* --- "How to Franchise With Us", laid out as the deck lays it out ---
   A yellow spread: the title block across the top with the handwritten
   kicker and the three-line promise stacked right, six staggered white
   blobs below with overhanging number badges and arrows between them,
   then the start box, the icon promises and the closing line. */

.fr-how{position:relative;overflow:hidden}
.fr-how .wrap{position:relative;z-index:2}

/* the deck's hand-drawn white strokes */
.fr-deco{position:absolute;inset:0;z-index:1;pointer-events:none}
.fr-deco .sw{position:absolute;stroke:#fff;stroke-width:3.4;stroke-linecap:round;fill:none}
.fr-deco .sw1{top:12%;left:40%;width:96px}
.fr-deco .sw2{top:7%;right:24%;width:82px}
.fr-deco .sw3{bottom:30%;left:3%;width:70px}
@media (max-width:1040px){.fr-deco{display:none}}

/* the tray of tenders bleeding off the bottom-right corner */
.fr-bleed{position:absolute;right:-2%;bottom:-7%;width:clamp(150px,15vw,215px);z-index:1;transform:rotate(16deg)}
.fr-bleed img{width:100%;height:auto}
@media (max-width:1040px){.fr-bleed{display:none}}

/* ---- the title block ---- */
.fr-head{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(18px,3vw,40px);align-items:start;margin-bottom:clamp(40px,5vw,64px)
}
@media (max-width:1040px){
  .fr-head{grid-template-columns:1fr;gap:18px}
}
.fr-title h2{font-size:clamp(34px,5.6vw,62px);line-height:.98;letter-spacing:-.025em}
.fr-sub{
  font-family:var(--head);font-weight:700;font-size:clamp(12px,1.35vw,14px);
  letter-spacing:.19em;text-transform:uppercase;margin-top:14px
}
.fr-kick{align-self:center;font-size:clamp(26px,3.1vw,38px);line-height:1}
.fr-real{
  font-family:var(--head);font-weight:700;font-size:clamp(11px,1.15vw,12.5px);
  letter-spacing:.18em;text-transform:uppercase;line-height:2;text-align:right;white-space:nowrap
}
@media (max-width:1040px){.fr-real{text-align:left}}

/* ---- the six blobs ---- */
.journey{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(14px,1.7vw,22px);align-items:stretch
}
@media (max-width:1040px){.journey{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:34px}}
@media (max-width:680px){.journey{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:430px){.journey{grid-template-columns:1fr}}

/* Each step is offset vertically by its own --drop, which is what gives the
   deck's cascade. The offset is dropped once the grid starts wrapping. */
.leg{position:relative;display:flex;flex-direction:column;gap:16px;margin-top:var(--drop,0);align-self:start}
@media (max-width:1040px){.leg{margin-top:0}}

/* Blobs hug their own copy rather than stretching to a common height —
   the deck's cascade comes from the stagger, not from a tidy baseline. */
.blob{
  background:var(--white);color:var(--black);
  border-radius:46% 46% 16% 16% / 26% 26% 7% 7%;
  padding:42px 20px 28px;text-align:center
}
.leg:nth-child(even) .blob{border-radius:44% 48% 18% 14% / 24% 28% 8% 6%}
.blob .ico{width:34px;height:34px;display:block;margin:0 auto 14px;color:var(--black)}
.blob h3{font-size:clamp(16px,1.5vw,18.5px);line-height:1.15}
.blob p{margin-top:10px;font-size:14px;line-height:1.5;color:rgba(0,0,0,.74);font-weight:500;text-align:left}

/* the black number badge, overhanging the blob's shoulder */
.leg .n{
  position:absolute;top:-21px;left:4px;z-index:3;
  width:44px;height:44px;border-radius:50%;background:var(--black);color:var(--yellow);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--head);font-weight:800;font-size:21px;line-height:1;font-variant-numeric:tabular-nums
}
/* the arrow hopping from one number to the next, in the gutter */
.leg .arw{position:absolute;top:-22px;left:52px;width:clamp(34px,4.4vw,56px);color:var(--black);z-index:2}
@media (max-width:1040px){.leg .arw{display:none}}

.leg .hand{font-size:clamp(19px,2vw,23px);padding-inline:4px}

/* ---- the start box and the three promises ---- */
.fr-foot{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);
  gap:clamp(26px,4vw,48px);align-items:center;margin-top:clamp(46px,6vw,74px)
}
@media (max-width:860px){.fr-foot{grid-template-columns:1fr;gap:30px}}

.fr-start{background:var(--white);border-radius:26px;padding:clamp(22px,2.6vw,30px)}
.fr-start h3{font-size:clamp(20px,2.3vw,25px)}
.fr-start p{margin-top:10px;font-size:15px;line-height:1.55;color:rgba(0,0,0,.74);font-weight:500}
.fr-start .btn{margin-top:18px}

.promises{display:flex;flex-wrap:wrap;justify-content:space-evenly;gap:18px 0}
.promises span{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  font-family:var(--head);font-weight:700;font-size:clamp(11.5px,1.2vw,13px);
  letter-spacing:.17em;text-transform:uppercase;
  flex:1;min-width:132px;padding-inline:clamp(8px,1.6vw,22px);border-left:1.5px solid rgba(0,0,0,.28)
}
.promises span:first-child{border-left:none}
.promises .pico{width:30px;height:30px;display:block}

.fr-together{text-align:center;margin-top:clamp(28px,3.4vw,40px);transform:rotate(-1.5deg)}
.fr-rule{
  text-align:center;margin-top:22px;font-family:var(--head);font-weight:700;
  font-size:clamp(11.5px,1.2vw,13px);letter-spacing:.19em;text-transform:uppercase
}

/* --- "good mood food." expression band --- */
.mood{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,48px);align-items:center}
@media (max-width:760px){.mood{grid-template-columns:1fr}}
.mood-say{
  font-family:var(--head);font-weight:800;line-height:1.04;letter-spacing:-.03em;
  font-size:clamp(46px,10.5vw,120px);margin:0;text-wrap:balance
}
/* The smile sits at the end of "food." — which lands it under "mood". */
.smile.say{margin-left:.42em;vertical-align:.04em}
.smile.say img{height:.46em}

/* The tender stands in the yellow beside the words, sauce pouring in from
   above the band. */
.mood-tender{display:block;justify-self:end;align-self:center}
.mood-tender img{height:clamp(300px,41vw,540px);width:auto;max-width:none;display:block}
@media (max-width:760px){
  .mood-tender{justify-self:center;margin-top:14px}
  .mood-tender img{height:clamp(280px,74vw,380px)}
}

.says{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.says span{
  border:1.5px solid rgba(0,0,0,.3);border-radius:999px;padding:7px 16px;
  font-size:14.5px;font-weight:500;white-space:nowrap
}
.says span:first-child{background:var(--black);color:var(--yellow);border-color:var(--black)}

/* --- hero art: the crossfading disc with the dipped tender over it --- */
/* The art box is exactly the size of the disc, so the cut-out's percentage
   offsets are measured against the disc and not against whatever width the
   column happens to be at this breakpoint. */
.hero-art{position:relative;width:min(100%,400px);aspect-ratio:1;justify-self:end;margin-inline:auto}
.hero-disc{
  position:absolute;inset:0;border-radius:50%;
  overflow:hidden;background:var(--yellow)
}
.hero-disc .hero-slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s ease
}
.hero-disc .hero-slide.is-active{opacity:1}
@media (max-width:900px){
  .hero-art{width:min(82%,330px);justify-self:center}
}

/* --- the brand smile ---
   Supplied artwork, placed as-is and never redrawn or recoloured. The black
   smile goes on yellow and white grounds; the yellow disc goes on black. */
.smile,.smiley{display:inline-block;vertical-align:-.08em;margin-left:.3em;line-height:0}
.smile img,.smiley img{height:.62em;width:auto;display:inline-block}
.hand .smile img{height:.72em}          /* the handwriting sits smaller than its cap height */

.smile.big,.smiley.big{display:block;margin:26px 0 0;margin-left:0}
.mood .smile.big{margin-block:22px 18px}
.smile.big img{height:auto;width:clamp(92px,10vw,140px)}
.smiley.big img{height:auto;width:clamp(74px,8vw,104px)}

/* --- Instagram ---
   #ig-feed is where a live widget renders. Until one is added it stays
   empty and the photo grid below carries the section, so the page is
   never half-built. motion.js hides the grid once the widget populates. */
.ig-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,44px);align-items:end;margin-bottom:clamp(28px,4vw,40px)}
@media (max-width:760px){.ig-head{grid-template-columns:1fr;align-items:start;gap:20px}}
.ig-cta{text-align:right}
@media (max-width:760px){.ig-cta{text-align:left}}

#ig-feed:empty{display:none}
/* Widgets inject their own markup; keep it from breaking out of the wrap. */
#ig-feed img,#ig-feed iframe{max-width:100%}

.ig-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;background:var(--line)}
@media (max-width:900px){.ig-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:480px){.ig-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ig-tile{display:block;position:relative;aspect-ratio:1;overflow:hidden;background:var(--panel)}
.ig-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.ig-tile:hover img{transform:scale(1.05)}
.ig-tile::after{
  content:"";position:absolute;inset:0;background:var(--black);opacity:0;
  transition:opacity .2s ease;pointer-events:none
}
.ig-tile:hover::after{opacity:.18}
@media (prefers-reduced-motion:reduce){.ig-tile:hover img{transform:none}}

/* TikTok's official creator embed. It ships its own iframe and styling, so
   this only gives it room and centres it. */
.tt-block{margin-top:clamp(40px,5vw,60px);display:flex;flex-direction:column;align-items:center;gap:18px}
.tt-block .tiktok-embed{width:100%;margin:0 auto}

/* --- social icon links --- */
.ico-social{width:100%;height:100%;display:block}

.social{display:flex;gap:10px;margin-top:16px}
.social a{
  width:40px;height:40px;padding:9px;border-radius:50%;
  display:grid;place-items:center;color:var(--light-gray);
  border:1.5px solid var(--line);text-decoration:none;
  transition:color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease
}
.social a:hover{color:var(--black);background:var(--yellow);border-color:var(--yellow);transform:translateY(-2px)}
.band-yellow .social a{color:rgba(0,0,0,.7);border-color:rgba(0,0,0,.3)}
.band-yellow .social a:hover{color:var(--yellow);background:var(--black);border-color:var(--black)}

/* Buttons that carry a mark alongside their label. */
.btn-social{display:inline-flex;align-items:center;gap:9px}
.btn-social .ico-social{width:18px;height:18px}
@media (prefers-reduced-motion:reduce){.social a:hover{transform:none}}
/* TikTok's blockquote is what shows if embed.js is blocked or slow — centre
   it so the bare handle link reads as intentional rather than stranded. */
.tt-block .tiktok-embed{text-align:center}