/* ============================================================
   LANDING PAGE — scroll-driven storytelling
   Architecture: every chapter is a tall <section> containing a
   sticky 100vh stage. The stage pins while you read it, then
   hands the hero object over to the next chapter.
   ============================================================ */

.story{ position:relative; z-index:2 }
html.story-on{ scroll-behavior:auto }

.story-sec{ position:relative }
.sec-stick{
  position:sticky; top:0;
  height:100svh; min-height:600px;
  display:flex; align-items:center;
  overflow:hidden;
  /* every chapter keeps clear of the fixed nav, otherwise short phone
     viewports slide their first line underneath it */
  padding-top:var(--nav-h);
}
.sec-stick > .wrap{ width:100%; position:relative; z-index:2 }

/* chapter copy rhythm (kept here rather than inline so the phone
   breakpoint can actually tighten it) */
.s-ingredients h2,
.s-combo h2,
.s-cta h2{ margin-top:18px }
.s-menu .script,
.s-social .script{ font-size:30px; margin-top:14px }
.s-social .script{ font-size:27px; color:var(--gold-deep) }
.s-menu h2,
.s-social h2{ margin-top:4px }
.s-ingredients .lede,
.s-menu .lede,
.s-combo .lede{ margin-top:26px }
.s-menu .sec-cta{ margin-top:34px }
.s-cta .sec-num{ color:rgba(255,255,255,.2) }
.sec-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:36px }
.s-cta .sec-actions{ margin-top:40px }

#s1{ height:120vh } #s1 .sec-stick{ min-height:640px }
#s2{ height:150vh }
#s3,#s4,#s5{ height:130vh }
#s6{ height:120vh }

/* ---------- the hero object (one persistent DOM node) ---------- */
#chickenLayer{
  position:fixed; inset:0; z-index:60;
  pointer-events:none;
}
#chicken{
  position:absolute; top:50%; left:50%;
  width:min(44vw, 600px);
  will-change:transform;
}
#chicken img{
  width:100%; height:auto;
  filter:drop-shadow(0 44px 46px rgba(0,0,0,.55));
  will-change:filter;
}
#bucketOccluder{
  position:absolute;
  opacity:0;
  pointer-events:none;
  will-change:transform,opacity;
}
#bucketOccluder img{
  width:100%; height:100%; display:block;
  clip-path:polygon(0 56%,8% 52%,20% 49%,36% 48%,53% 48%,69% 50%,84% 54%,84% 100%,7% 100%);
}
#storyVideoLayer{
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
  opacity:0; visibility:hidden;
  background:#060504;
  contain:strict;
  transform-origin:center;
  will-change:transform,opacity,background-color;
}
.transition-word{
  display:inline-block;
  transform-origin:center bottom;
  will-change:transform,opacity;
}
#storyVideoLayer.is-handoff,
#sauceCleanLayer{
  z-index:50;
  -webkit-mask-image:linear-gradient(to right,transparent 0 40%,#000 58% 100%);
  mask-image:linear-gradient(to right,transparent 0 40%,#000 58% 100%);
}
#storyVideo{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}
#sauceCleanLayer{
  position:fixed; inset:0; z-index:50;
  pointer-events:none;
  opacity:0; visibility:hidden;
  overflow:hidden;
  background:var(--cream);
  will-change:opacity;
}
#sauceCleanLayer picture,
#sauceCleanLayer img{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
#sauceCleanLayer img{
  object-fit:cover;
  object-position:center;
}
html.story-on.video-story .s-ingredients .sauce-bowl{ visibility:hidden }
html.story-on.video-story .s-hero,
html.story-on.video-story .s-ingredients{ background:transparent }
html.story-on.video-story .s-hero::after,
html.story-on.video-story .s-ingredients::before{ display:none }
/* invisible docking targets — position & size come from CSS, so the
   whole journey re-flows for free on any viewport */
.anchor{
  position:absolute; aspect-ratio:1/1;
  visibility:hidden; pointer-events:none;
}
/* static fallbacks (reduced motion / no JS) */
.sec-chicken{ display:none }
html:not(.story-on) #chickenLayer{ display:none }
html:not(.story-on) .sec-chicken{ display:block }
html:not(.story-on) .story-sec{ height:auto !important }
html:not(.story-on) .sec-stick{ position:relative; height:auto; padding:clamp(90px,11vw,150px) 0 }

/* ---------- decorative dashed trail ---------- */
.trail{ position:absolute; z-index:1; pointer-events:none; overflow:visible }
.trail--hero{ left:47%; top:36% }
.trail--ing{  left:45%; top:-14% }
.trail--menu{ left:37%; top:-16% }
.trail--combo{left:29%; top:-10% }
.trail--soc{  left:33%; top:-4% }
.trail path{
  fill:none; stroke:var(--gold); stroke-width:2.6;
  stroke-dasharray:11 13; stroke-linecap:round; opacity:.9;
}
.trail circle{ fill:none; stroke:var(--gold); stroke-width:2.6 }

/* ---------- crumbs / spice particles ---------- */
.crumbs{ position:absolute; inset:0; z-index:1; pointer-events:none }
.crumbs i{
  position:absolute; border-radius:44% 56% 60% 40%;
  background:#E8892A; opacity:.8;
  animation:float 9s ease-in-out infinite;
}
.crumbs i:nth-child(3n){ background:#C4451B; opacity:.6 }
.crumbs i:nth-child(4n){ background:#F5B23C; opacity:.5 }
@keyframes float{
  0%,100%{ transform:translate3d(0,0,0) rotate(0deg) }
  50%    { transform:translate3d(0,-11px,0) rotate(18deg) }
}

/* ============================================================
   01 — HERO
   ============================================================ */
.s-hero{
  background:radial-gradient(88% 76% at 75% 46%, #2C1C09 0%, #140D06 36%, #060504 70%), #060504;
  color:#fff;
}
.s-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:30%;
  background:
    radial-gradient(58% 100% at 62% 100%, rgba(255,150,40,.14), transparent 72%),
    linear-gradient(to top, rgba(0,0,0,.92), transparent);
  z-index:1;
}
.hero__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); align-items:center; gap:40px }
.hero__copy{ max-width:660px }
.hero__badge{
  display:inline-flex; align-items:center; gap:12px;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
  margin-bottom:28px;
}
.hero__badge::before{ content:""; width:34px;height:1px;background:var(--gold) }
.s-hero h1{ color:#fff }
.s-hero .rule{ background:linear-gradient(90deg,var(--gold),rgba(255,193,7,0)) }
.hero__sub{ color:rgba(255,255,255,.72); margin-top:30px; font-size:clamp(15px,1.2vw,18.5px); max-width:36ch }
.hero__cta{ display:flex; gap:14px; margin-top:42px; flex-wrap:wrap }
.hero__stage{ position:relative; height:70vh }
.hero__stage .anchor{ width:min(39vw,528px); right:0%; top:48%; transform:translateY(-50%) }
.hero__seal{
  position:absolute; right:1%; top:9%;
  width:120px;height:120px;border-radius:50%;
  border:1px dashed rgba(255,193,7,.45); color:var(--gold);
  display:grid;place-items:center;text-align:center;
  font-size:10px; letter-spacing:.14em; line-height:1.4; text-transform:uppercase;
  z-index:3;
}
.hero__seal b{ display:block;font-family:var(--f-display);font-size:23px;letter-spacing:0;margin-bottom:2px }
.hero__tag{
  position:absolute; right:1%; top:0; color:rgba(255,255,255,.4);
  font-size:11px; letter-spacing:.26em; text-transform:uppercase; z-index:3;
}
.scroll-hint{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
  z-index:3; display:grid; place-items:center; gap:12px; color:rgba(255,255,255,.5);
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
}
.scroll-hint span{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,193,7,.5);
  display:grid;place-items:center;color:var(--gold);
  animation:bob 2.4s var(--ease) infinite;
}
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }

/* ============================================================
   02 — INGREDIENTS / SAUCE
   ============================================================ */
.s-ingredients{ background:var(--cream) }
.s-ingredients::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(64% 62% at 72% 54%, rgba(241,90,36,.08), transparent 72%);
}
.ing__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:40px }
.ing__facts{ display:flex; gap:clamp(16px,2.6vw,42px); margin-top:54px; flex-wrap:wrap }
.fact{ text-align:center; width:104px }
.fact i{
  width:64px;height:64px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;margin:0 auto 14px; color:var(--ink-soft);
  transition:.45s var(--ease);
}
.fact:hover i{ border-color:var(--gold); background:#fff; transform:translateY(-4px) }
.fact svg{ width:26px;height:26px }
.fact b{ display:block;font-size:13px;font-weight:500;line-height:1.4 }
.ing__stage{ position:relative; height:min(68vh,600px) }
.sauce-bowl{
  position:absolute; left:50%; bottom:18%; transform:translateX(-50%);
  width:min(28vw,378px);
  filter:drop-shadow(0 36px 38px rgba(120,60,10,.26));
}
.ing__stage .anchor{ width:min(20vw,268px); left:33%; bottom:34% }

/* ============================================================
   03 — SIGNATURE MENU
   ============================================================ */
.s-menu{ background:linear-gradient(to bottom,var(--cream) 0%,var(--cream-2) 32%) }
.menu__grid{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,2.05fr); gap:clamp(28px,3.6vw,66px); align-items:center }
.menu__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.5vw,24px); position:relative }
.menu__cards .prod__media{ aspect-ratio:1/.98 }
.slot{ display:block; width:100%; height:100%; position:relative }
.slot .anchor{ width:calc(100% - 16px); height:calc(100% - 16px); left:8px; top:8px; aspect-ratio:auto }
html.story-on #s3 .card-chicken{ opacity:0 }
html.story-on.is-chicken-traveling #s3 .menu__cards .card:first-child:hover{ transform:none }

/* ============================================================
   04 — COMBO / DELIVERY
   ============================================================ */
.s-combo{ background:linear-gradient(178deg,var(--cream-2) 0%, var(--amber-bg) 42%, #FAECD3 100%) }
.combo__grid{ display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.3fr); align-items:center; gap:40px }
.combo__stage{ position:relative; height:min(76vh,660px) }
.bucket{
  position:absolute; left:36%; bottom:4%; transform:translateX(-50%);
  width:min(24vw,320px);
  filter:drop-shadow(0 44px 42px rgba(120,60,10,.24));
}
.combo__stage .anchor{ width:min(14vw,184px); left:15%; bottom:24% }
/* The mockup is deliberately static — no entrance offset, no parallax —
   so it stays put however the page is scrolled. */
.phone{
  position:absolute; right:1%; bottom:6%;
  width:min(18.5vw,244px); aspect-ratio:244/508;
  background:#0B0B0C; border-radius:34px; padding:9px;
  box-shadow:0 50px 70px -30px rgba(80,50,10,.5), inset 0 0 0 1.5px #34333b;
  transform-origin:100% 100%;
}
.phone__screen{
  width:100%;height:100%; background:#fff; border-radius:26px; overflow:hidden;
  display:flex; flex-direction:column; position:relative;
}
.phone__notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:36%; height:15px; background:#0B0B0C; border-radius:0 0 11px 11px; z-index:3;
}
.phone__top{ padding:24px 13px 4px }
.phone__top small{ color:var(--muted); font-size:8px; letter-spacing:.04em }
.phone__top b{ display:block; font-size:11px; font-weight:600; line-height:1.3 }
.phone__addr svg{ width:11px;height:11px;flex:0 0 auto }
.phone__addr{ display:flex; align-items:center; justify-content:space-between; gap:6px; line-height:1.3; font-size:8px; color:var(--ink-soft); margin-top:3px }
.phone__list{ padding:4px 9px; display:grid; gap:5px; overflow:hidden }
.phone__hd{ font-size:8.5px; font-weight:600; padding-left:3px; letter-spacing:.02em }
.phone__row{
  display:flex; align-items:center; gap:7px; padding:5px;
  border:1px solid rgba(17,17,17,.09); border-radius:9px; background:#fff;
}
.phone__row.is-sel{ border-color:var(--gold); box-shadow:0 0 0 1px rgba(255,193,7,.35) }
.phone__thumb{ width:29px;height:29px;border-radius:6px;background:var(--cream-2); display:grid;place-items:center;overflow:hidden;flex:0 0 auto }
.phone__thumb img{ width:120%; max-width:none }
.phone__txt{ flex:1; min-width:0 }
.phone__row b{ font-size:8.5px; display:block; line-height:1.25; font-weight:600 }
.phone__row small{ font-size:7px; color:var(--muted); display:block; line-height:1.35 }
.phone__row em{ font-style:normal; font-size:8.5px; font-weight:600; color:var(--red) }
.phone__plus{ width:16px;height:16px;border-radius:50%;background:var(--gold);display:grid;place-items:center;font-size:11px;color:#111;flex:0 0 auto;line-height:1 }
.phone__step{ display:flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:20px;padding:1px 5px;font-size:8px }
.phone__promo{
  margin:2px 3px 0; padding:7px 10px; border-radius:9px;
  background:linear-gradient(100deg,#111,#2a2419); color:#fff;
}
.phone__promo b{ display:block; font-size:8.5px; color:var(--gold) }
.phone__promo span{ font-size:7px; color:rgba(255,255,255,.6) }
.phone__tabs{
  margin-top:auto; display:flex; justify-content:space-around; padding:6px 0 9px;
  border-top:1px solid rgba(17,17,17,.07); font-size:6.5px; color:var(--muted);
}
.phone__tabs b{ color:var(--gold-deep); font-weight:600 }
.phone__tabs i{ display:block; font-size:12px; font-style:normal; text-align:center; margin-bottom:1px }

/* ============================================================
   05 — SOCIAL / EXPERIENCE
   ============================================================ */
.s-social{ background:linear-gradient(to bottom,#FAECD3 0%,var(--cream) 32%) }
.soc__grid{ display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.32fr); gap:clamp(28px,3.6vw,66px); align-items:center }
.quote{ font-family:var(--f-display); font-size:clamp(19px,1.75vw,29px); line-height:1.45; margin-top:34px; max-width:23ch }
.stars{ display:flex; gap:6px; margin-top:24px; color:var(--gold) }
.stars svg{ width:22px;height:22px;fill:currentColor }
.soc__by{ margin-top:16px; font-size:14.5px; color:var(--muted) }
.soc__photos{
  display:grid; gap:clamp(12px,1.1vw,18px);
  grid-template-columns:1fr 1.1fr;
  grid-template-rows:1.16fr .84fr;
  height:min(66vh,580px);
  position:relative;
}
.ph{ position:relative; border-radius:var(--r-md); overflow:hidden; background:var(--cream-3); clip-path:inset(0 0 var(--clip,0%) 0) }
.ph img{ width:100%;height:100%!important;object-fit:cover; transition:transform 1.1s var(--ease) }
.ph:hover img{ transform:scale(1.05) }
.ph--tall{ grid-row:1/3 }
.ph--wide{ grid-column:2/3; grid-row:2/3 }
.soc__photos .anchor{ width:min(22vw,286px); left:-7%; bottom:-10% }

/* ============================================================
   06 — FINAL CTA
   ============================================================ */
.s-cta{
  background:radial-gradient(86% 76% at 72% 48%, #291A08 0%, #130D06 38%, #060504 72%), #060504;
  color:#fff;
}
.s-cta::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:36%;
  background:
    radial-gradient(56% 100% at 60% 100%, rgba(255,150,40,.13), transparent 72%),
    linear-gradient(to top, rgba(0,0,0,.88), transparent);
  z-index:1;
}
.cta__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:40px }
.cta__copy{ max-width:680px }
.s-cta h2{ color:#fff }
.cta__sub{ color:rgba(255,255,255,.7); margin-top:28px; font-size:clamp(15px,1.2vw,18.5px); max-width:32ch }
.cta__marks{ display:flex; gap:clamp(18px,3vw,50px); margin-top:60px; flex-wrap:wrap }
.mark{ text-align:center; color:rgba(255,255,255,.82); width:102px }
.mark svg{ width:28px;height:28px; color:var(--gold); margin:0 auto 12px; display:block }
.mark b{ font-size:12px; font-weight:400; line-height:1.45; display:block }
.cta__stage{ position:relative; height:66vh }
.cta__stage .anchor{ width:min(37vw,505px); right:-3%; top:47%; transform:translateY(-50%) }
.cta__seal{
  position:absolute; right:1%; top:6%;
  width:118px;height:118px;border-radius:50%;
  border:1px dashed rgba(255,193,7,.45); color:var(--gold);
  display:grid;place-items:center;text-align:center;
  font-size:10px; letter-spacing:.14em; line-height:1.4; text-transform:uppercase; z-index:3;
}
.cta__seal b{ display:block;font-family:var(--f-display);font-size:23px;letter-spacing:0 }

/* static (reduced-motion) chicken rendering */
html:not(.story-on) .sec-chicken{
  width:min(42vw,420px); margin:0 auto;
  filter:drop-shadow(0 30px 34px rgba(0,0,0,.3));
}
html:not(.story-on) .hero__stage,
html:not(.story-on) .cta__stage{ height:auto }
html:not(.story-on) .ing__stage,
html:not(.story-on) .combo__stage{ height:min(60vh,520px) }
html:not(.story-on) .soc__photos{ height:min(60vh,520px) }
html:not(.story-on) .ph{ clip-path:none }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .hero__seal,.cta__seal{ display:none }
}
@media (max-width:1024px){
  #s1{ height:130vh } #s2{ height:150vh } #s3,#s4,#s5{ height:140vh } #s6{ height:125vh }
  .sec-stick{ align-items:center }
  .hero__grid,.ing__grid,.menu__grid,.combo__grid,.soc__grid,.cta__grid{ grid-template-columns:1fr; gap:0 }
  .hero__stage{ height:34vh }
  .hero__stage .anchor{ width:min(62vw,360px); right:auto; left:50%; top:50%; transform:translate(-50%,-50%) }
  .cta__stage{ height:32vh }
  .cta__stage .anchor{ width:min(58vw,340px); right:auto; left:50%; top:50%; transform:translate(-50%,-50%) }
  .ing__stage{ height:34vh; margin-top:26px }
  .sauce-bowl{ width:min(46vw,290px); left:50%; bottom:6% }
  .ing__stage .anchor{ width:min(34vw,215px); left:41%; bottom:26% }
  .combo__stage{ height:40vh; margin-top:20px }
  .bucket{ width:min(40vw,250px); left:33% }
  .combo__stage .anchor{ width:min(22vw,140px); left:13%; bottom:23% }
  /* keep the mockup at its design width and scale it, so the UI inside
     stays legible instead of reflowing into slivers */
  .phone{ width:244px; transform:scale(.67) }
  .menu__cards{ margin-top:40px }
  .soc__photos{ margin-top:34px; height:40vh }
  .quote{ font-size:clamp(17px,2.1vw,22px); margin-top:26px }
  .soc__photos .anchor{ width:min(34vw,210px); left:-2%; bottom:-8% }
  .ing__facts{ margin-top:36px }
  .cta__marks{ margin-top:40px }
}
/* ------------------------------------------------------------
   PHONES
   Each chapter is a 100svh sticky stage with overflow:hidden, so on a
   short phone viewport anything taller than the stage is silently cut
   off — that is what was clipping the section headings. Everything
   below exists to make each chapter fit one stage, nav bar included.
   ------------------------------------------------------------ */
@media (max-width:760px){
  #chicken{ width:min(66vw,340px) }
  #storyVideoLayer.is-handoff,
  #sauceCleanLayer{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0 30%,#000 48% 100%);
    mask-image:linear-gradient(to bottom,transparent 0 30%,#000 48% 100%);
  }
  #s1{ height:135vh } #s2{ height:150vh } #s3,#s4,#s5{ height:140vh } #s6{ height:125vh }
  .sec-stick{ min-height:480px }
  .sec-num{ font-size:24px }
  .rule{ margin-top:16px }
  .lede{ font-size:13.5px; line-height:1.55 }

  /* 01 — the drumstick used to overhang the CTA row */
  .hero__badge{ margin-bottom:18px }
  .hero__sub{ margin-top:20px }
  .hero__cta{ margin-top:26px }
  .hero__stage{ height:210px; margin-top:10px }
  .hero__stage .anchor{ width:min(62vw,250px) }
  .scroll-hint{ display:none }
  .hero__tag{ display:none }

  /* 02 — four proof points on one row instead of 3 + 1 */
  .s-ingredients h2{ margin-top:12px }
  .s-ingredients .lede{ margin-top:16px }
  .ing__facts{ margin-top:20px; gap:8px; flex-wrap:nowrap }
  .fact{ width:calc(25% - 6px) }
  .fact i{ width:52px; height:52px; margin-bottom:10px }
  .fact svg{ width:22px; height:22px }
  .fact b{ font-size:11.5px; line-height:1.35 }
  .ing__stage{ height:170px }

  /* 03 — heading + one card have to share a single stage */
  .s-menu .script{ font-size:20px; margin-top:0 }
  .s-menu h2{ font-size:31px; margin-top:2px }
  .s-menu .rule{ margin-top:12px }
  .s-menu .lede{ margin-top:12px }
  .s-menu .sec-cta{ margin-top:16px; height:44px; padding:0 20px }
  .menu__cards{ grid-template-columns:1fr; gap:14px; margin-top:16px }
  .menu__cards .card:nth-child(n+2){ display:none }
  .menu__cards .prod{ padding:12px 12px 14px }
  .menu__cards .prod__media{ aspect-ratio:1/.46 }
  .menu__cards .prod__name{ font-size:17px; margin-top:8px; min-height:0 }
  .menu__cards .prod__foot{ padding-top:10px }
  .menu__cards .prod__price{ font-size:19px }
  .menu__cards .add-btn{ width:40px; height:40px }
  .menu__cards .prod__fav{ top:10px; right:10px; width:30px; height:30px }
  .slot .anchor{ width:calc(100% - 16px); height:calc(100% - 16px); left:8px; top:8px }

  /* 04 — the mockup keeps its design width and is scaled down, so the
     interface inside stays legible instead of reflowing into slivers */
  .s-combo h2{ font-size:34px; margin-top:12px }
  .s-combo .lede{ margin-top:14px }
  .s-combo .sec-actions{ margin-top:20px }
  .s-combo .sec-actions .btn{ height:46px; padding:0 20px }
  .combo__stage{ height:262px; margin-top:14px }
  .bucket{ left:34%; width:172px; bottom:0 }
  .phone{ width:244px; transform:scale(.46); right:0; bottom:0 }
  .combo__stage .anchor{ width:108px; left:8%; bottom:22% }

  /* 05 — a 2x2 photo grid with the bottom-right cell left empty: that
     free corner is where the travelling drumstick lands, so it no
     longer sits on top of the photographs */
  .s-social .script{ font-size:19px; margin-top:0 }
  .s-social h2{ font-size:30px }
  .quote{ font-size:16px; line-height:1.4; margin-top:16px; max-width:none }
  .stars{ margin-top:12px } .stars svg{ width:18px; height:18px }
  .soc__by{ font-size:12.5px; margin-top:8px }
  .soc__photos{
    grid-template-columns:1fr 1fr;
    grid-template-rows:132px 96px;
    gap:10px; height:auto; margin-top:18px; padding-bottom:26px;
  }
  .ph--tall{ grid-column:1/2; grid-row:1/2 }
  .ph--wide{ grid-column:1/2; grid-row:2/3 }
  .soc__photos .anchor{ width:min(38vw,148px); left:auto; right:0; bottom:0 }

  /* 06 */
  .s-cta h2{ font-size:42px; margin-top:12px }
  .cta__sub{ font-size:14px; margin-top:16px }
  .s-cta .sec-actions{ margin-top:22px }
  .s-cta .sec-actions .btn{ height:48px }
  .cta__marks{ margin-top:22px; gap:12px 18px }
  .mark{ width:calc(50% - 9px) }
  .mark svg{ width:24px; height:24px; margin-bottom:8px }
  .mark b{ font-size:11.5px }
  /* the closing drumstick is bottom-anchored so it bleeds off the
     screen edge instead of sitting on top of the trust marks */
  .cta__stage{ height:150px }
  .cta__stage .anchor{
    width:min(46vw,180px);
    left:50%; right:auto; top:auto; bottom:-40px;
    transform:translateX(-50%);
  }
}

@media (max-width:1024px){ .trail{ display:none } }