/* Theme 10: Scrollytelling (Linnet Studio theme library). Shown for a sample custom furniture workshop.
   The homepage follows one dining table through five chapters, from a stack of boards to a family's dinner.
   Default (no scroll-driven animation support, or reduced motion): each chapter shows its own picture, in order.
   Enhanced: the pictures stack into one sticky stage and change in place as the chapters scroll past. */

:root {
  /* ---- Re-skin tokens: change these to apply a client's brand ---- */
  --bg: #F2F2EE;         /* page: shop paper, a cool off-white */
  --ink: #1D2421;        /* text, buttons; green-black like ebonized wood */
  --accent: #9A4A17;     /* oiled fir: step numbers, progress, markers; 5.3:1 on --bg */
  --deep: #1F3A2E;       /* the closing contact band (forest green) */
  --mark: #2A2D2B;       /* pencil marks drawn over photos (graphics only) */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Literata", Georgia, serif;
  --radius: 999px;       /* buttons and tags; photos use --radius-sm */
  --radius-sm: 4px;

  /* ---- Derived (usually leave alone) ---- */
  --paper: #FFFFFF;
  --oil: #C9772F;                                                /* amber of the simulated oil coat */
  --muted: color-mix(in srgb, var(--ink) 78%, var(--bg));      /* secondary text, about 7.7:1 */
  --line: color-mix(in srgb, var(--ink) 14%, var(--bg));       /* hairlines */
  --accent-soft: color-mix(in srgb, var(--accent) 22%, var(--bg));
  --on-deep: color-mix(in srgb, #fff 84%, var(--deep));        /* body text on the contact band */

  /* ---- Spacing ---- */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 96px;
  --gutter: 20px;
  --max: 1360px;
  --sec: clamp(64px, 8vw, 120px);
  --stage-h: calc(100vw * .675 + 44px);   /* phone: height of the pinned picture + its caption */
}
@media (min-width: 700px) { :root { --gutter: 40px; } }
@media (min-width: 1100px) { :root { --gutter: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1.0625rem/1.65 var(--font-text);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.sr-only, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip:focus { position: absolute; left: 12px; top: 12px; z-index: 10; background: var(--ink); color: #fff; padding: 12px 16px; font-family: var(--font-display); }

h1, h2, h3, h4 { font-family: var(--font-display); font-optical-sizing: auto; margin: 0; }

/* ---------- Demo bar ---------- */
.demo-bar { background: var(--ink); color: #E9ECE8; padding: 7px var(--gutter); text-align: center; font: 500 .8125rem/1.4 var(--font-display); }
.demo-bar p { margin: 0; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px;
  border-radius: var(--radius); background: var(--ink); color: #fff; text-decoration: none; text-align: center;
  font: 600 1rem/1.2 var(--font-display); transition: background-color .2s;
}
.btn:hover { background: var(--accent); }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: .9375rem; white-space: nowrap; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--accent-soft); }
.text-link {
  min-height: 44px; display: inline-flex; align-items: center; color: var(--ink);
  font: 600 1rem/1.2 var(--font-display); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 24px; }

/* ---------- Header ---------- */
.top { border-bottom: 1px solid var(--line); }
.top-in {
  max-width: var(--max); margin: 0 auto; padding: 8px var(--gutter) 6px;
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand call" "nav btn";
  align-items: center; column-gap: 12px;
}
.brand { grid-area: brand; display: flex; align-items: center; gap: 10px; min-height: 48px; color: var(--ink); text-decoration: none; }
.tile { display: grid; place-items: center; flex: none; width: 40px; height: 40px; background: var(--deep); border-radius: 9px; }
.tile svg { width: 30px; height: 30px; fill: none; stroke: #F3E6D6; stroke-width: 1.5; }
.brand-name { font: 700 1.1875rem/1 var(--font-display); letter-spacing: -.01em; }
.top-call { grid-area: call; min-height: 44px; display: inline-flex; align-items: center; font: 600 .9375rem/1 var(--font-display); text-decoration: none; }
.top-btn { grid-area: btn; }
.nav { grid-area: nav; display: flex; gap: 14px; }
.nav a {
  min-height: 44px; display: inline-flex; align-items: center; color: var(--muted); text-decoration: none;
  font: 500 .9375rem/1 var(--font-display); white-space: nowrap;
}
.nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.nav-contact { display: none !important; }
@media (min-width: 900px) {
  .top-in { grid-template-columns: auto 1fr auto auto; grid-template-areas: "brand nav call btn"; padding: 14px var(--gutter); column-gap: 28px; }
  .nav { justify-content: center; gap: 36px; }
  .nav-contact { display: inline-flex !important; }
}

/* ---------- Story: default layout (every chapter with its own picture) ---------- */
.story {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(40px, 5vw, 96px);
}
.beat { grid-column: 1; grid-row: calc(var(--i) * 2 + 2); padding: 20px 0 64px; }
.shot { grid-column: 1; grid-row: calc(var(--i) * 2 + 1); margin: 0; }
.beat-0 { grid-row: 1; padding: 36px 0 32px; }
.shot-0 { grid-row: 2; margin-bottom: 56px; }

.beat-0 h1 {
  font-size: clamp(2.75rem, 1.45rem + 5.2vw, 5.6rem); font-weight: 760; font-stretch: 86%;
  line-height: .96; letter-spacing: -.035em; margin-bottom: 22px; text-wrap: balance;
}
.lede { font-size: 1.1875rem; line-height: 1.6; max-width: 32em; margin: 0; }
.rating-line { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; font: 500 .9375rem/1.3 var(--font-display); color: var(--muted); }
.rating-line svg { width: 18px; height: 18px; fill: var(--accent); }
.rating-line b { color: var(--ink); font-weight: 700; }

.step-no { margin: 0 0 8px; font: 700 .9375rem/1.2 var(--font-display); color: var(--accent); font-variant-numeric: tabular-nums; }
.beat h2 {
  font-size: clamp(1.9rem, 1.35rem + 2.3vw, 3.2rem); font-weight: 720; font-stretch: 90%;
  line-height: 1.02; letter-spacing: -.028em; margin-bottom: 16px;
}
.beat p { max-width: 32em; }
.beat-in > p:last-child { margin-bottom: 0; }
.shop-note { margin: 24px 0 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--accent-soft); max-width: 32em; }
.shop-note p { margin: 0; font-style: italic; font-size: 1rem; line-height: 1.55; }
.shop-note .by { margin-top: 6px; font: 600 .8125rem/1.3 var(--font-display); font-style: normal; color: var(--muted); }

/* Pictures */
.frame { position: relative; overflow: hidden; aspect-ratio: 1600 / 1080; background: #D9D6CF; border-radius: var(--radius-sm); }
.frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame.paper { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.tag {
  position: absolute; left: 12px; top: 12px; padding: 6px 11px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--ink) 86%, transparent); color: #fff; font: 600 .8125rem/1 var(--font-display);
}
.tag-r { left: auto; right: 12px; }

.chips { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.chips li {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-13px, -50%);
  padding: 5px 9px 5px 24px; border-radius: var(--radius); background: #fff; color: var(--ink);
  font: 600 .75rem/1.1 var(--font-display); white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.chips li::before {
  content: ""; position: absolute; left: 7px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px;
  border-radius: 50%; background: var(--accent);
}
.chips li.l { transform: translate(calc(-100% + 13px), -50%); padding: 5px 24px 5px 9px; }
.chips li.l::before { left: auto; right: 7px; }
@media (min-width: 960px) { .chips li { font-size: .8125rem; padding: 6px 11px 6px 26px; } .chips li.l { padding: 6px 26px 6px 11px; } }

/* The shop drawing */
.drawing { position: absolute; inset: 0; width: 100%; height: 100%; }
.drawing * { vector-effect: non-scaling-stroke; }
.ln { fill: none; stroke: var(--ink); stroke-width: 1.4px; stroke-linejoin: round; stroke-linecap: round; }
.ln .thin { stroke-width: .9px; }
.ln .fill { fill: var(--paper); }
.ln circle { fill: var(--paper); }
.ln-soft { fill: none; stroke: color-mix(in srgb, var(--ink) 45%, transparent); stroke-width: 1px; stroke-dasharray: 5 5; }
.dim { fill: none; stroke: var(--accent); stroke-width: 1px; }
.dim .ext { stroke-dasharray: 2 4; }
.arrow { fill: none; stroke: var(--accent); stroke-width: 1.2px; }
.leader { fill: none; stroke: var(--ink); stroke-width: 1px; }
.drawing text { fill: var(--ink); font-family: var(--font-display); }
.drawing .t-dim { fill: var(--accent); font-size: 34px; font-weight: 600; }
.drawing .t-note { font: italic 400 32px var(--font-text); }
.drawing .t-view { font-size: 34px; font-weight: 600; }
.drawing .t-title { font-size: 28px; font-weight: 700; }
.drawing .t-row { font-size: 24px; }

/* Pencil marks over the boards */
.marks { position: absolute; inset: 0; width: 100%; height: 100%; }
.marks path { fill: none; stroke: var(--mark); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }

/* Finishing: the oiled half, simulated on the same photo */
.shot-4 .after { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.after img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.35) contrast(1.06); }
.oil { position: absolute; inset: 0; background: var(--oil); mix-blend-mode: multiply; opacity: .45; }
.seam {
  position: absolute; inset: 0; translate: 50% 0; pointer-events: none;
  border-left: 3px solid #fff; box-shadow: -1px 0 0 rgba(0, 0, 0, .25);
}

.shot figcaption {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-top: 12px;
  font: 500 .875rem/1.45 var(--font-display); color: var(--muted);
}
.cap-step { font-weight: 700; color: var(--ink); }
.pips {
  --n: 0; width: 82px; height: 4px; flex: none;
  background: linear-gradient(90deg, var(--accent) calc(var(--n) * 17px), color-mix(in srgb, var(--ink) 22%, var(--bg)) 0);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 17px);
  mask: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 17px);
}
.p1 { --n: 1; } .p2 { --n: 2; } .p3 { --n: 3; } .p4 { --n: 4; } .p5 { --n: 5; }

@media (min-width: 960px) {
  .story { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .beat { grid-column: 1; grid-row: calc(var(--i) + 1); align-self: center; padding: 72px 0; }
  .beat-0 { padding: 80px 0; }
  .shot { grid-column: 2; grid-row: calc(var(--i) + 1); align-self: center; padding: 48px 0; }
  .shot-0 { margin-bottom: 0; }
  .beat p { font-size: 1.125rem; }
}

/* ---------- Story: sticky stage, driven by scroll (only where supported, and only with motion allowed) ---------- */
@supports ((animation-timeline: view()) and (animation-range: entry) and (timeline-scope: --a)) {
  @media (prefers-reduced-motion: no-preference) {
    .story { timeline-scope: --b1, --b2, --b3, --b4, --b5; }
    .beat-1 { view-timeline: --b1 block; }
    .beat-2 { view-timeline: --b2 block; }
    .beat-3 { view-timeline: --b3 block; }
    .beat-4 { view-timeline: --b4 block; }
    .beat-5 { view-timeline: --b5 block; }

    /* Phone: the stage is pinned to the top, the chapters scroll up beneath it */
    .shot {
      grid-row: 2 / span 5; align-self: start; position: sticky; top: 0; z-index: 2;
      margin: 0 calc(-1 * var(--gutter)); background: var(--bg);
    }
    .shot .frame { border-radius: 0; }
    .shot figcaption { height: 44px; padding: 0 var(--gutter); flex-wrap: nowrap; }
    .beat { grid-row: calc(var(--i) + 1); position: relative; z-index: 1; min-height: 112svh; padding: calc(var(--stage-h) + 24px) 0 48px; }
    .beat-0 { grid-row: 1; min-height: 0; padding: 36px 0 40px; }
    .beat-4 { min-height: 230svh; }
    .beat-4 .beat-in { position: sticky; top: calc(var(--stage-h) + 24px); }

    .shot:not(.shot-0) {
      animation: shot-in linear both, shot-out linear forwards;
      animation-range: entry 55% entry 78%, entry 78% entry 92%;
    }
    .story .shot-1 { animation-timeline: --b1, --b2; }
    .story .shot-2 { animation-timeline: --b2, --b3; }
    .story .shot-3 { animation-timeline: --b3, --b4; }
    .story .shot-4 { animation-timeline: --b4, --b5; }
    .story .shot-5 { animation: shot-in linear both; animation-timeline: --b5; animation-range: entry 55% entry 78%; }

    /* The signature moment: the oil goes on across the boards while the finishing chapter scrolls */
    .shot-4 .after { animation: wipe linear both; animation-timeline: --b4; animation-range: entry 100% exit 0%; }
    .shot-4 .seam { animation: seam linear both; animation-timeline: --b4; animation-range: entry 100% exit 0%; }
    .shot-4 .tag-r { animation: shot-in linear both; animation-timeline: --b4; animation-range: contain 0% contain 12%; }
    .shot-4 .tag:not(.tag-r) { animation: shot-out linear forwards; animation-timeline: --b4; animation-range: contain 86% contain 100%; }

    @media (max-width: 959px) {
      .shot .cap-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    }

    /* Desktop: chapters on the left, the stage pinned on the right */
    @media (min-width: 960px) {
      .shot {
        grid-column: 2; grid-row: 1 / span 6; top: max(16px, calc(50svh - 260px));
        margin: 40px 0 0; padding: 0; z-index: auto;
      }
      .shot .frame { border-radius: var(--radius-sm); }
      .shot figcaption { height: auto; padding: 14px 0 0; flex-wrap: wrap; }
      .beat { grid-column: 1; min-height: 100svh; padding: 0; display: flex; align-items: center; }
      .beat-0 { min-height: calc(100svh - 110px); padding: 0 0 40px; }
      .beat-4 { min-height: 210svh; align-items: flex-start; }
      .beat-4 .beat-in { top: calc(50svh - 150px); margin-top: 30svh; }
      .shot:not(.shot-0) { animation-range: entry 40% entry 68%, entry 68% entry 84%; }
      .story .shot-5 { animation-range: entry 40% entry 68%; }
    }
  }
}
@keyframes shot-in { from { opacity: 0; } }
@keyframes shot-out { to { opacity: 0; } }
@keyframes wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes seam { from { translate: 100% 0; } to { translate: 0 0; } }

/* ---------- The reveal ---------- */
.reveal { padding: var(--sec) 0; border-top: 1px solid var(--line); }
.reveal-head, .reveal-foot, .reveal-shot { max-width: 1104px; margin: 0 auto; padding-inline: var(--gutter); }
.reveal-head { padding-bottom: 32px; display: grid; gap: 14px; }
.reveal h2 { font-size: clamp(2.75rem, 1.4rem + 5.6vw, 6rem); font-weight: 760; font-stretch: 86%; line-height: .96; letter-spacing: -.035em; }
.reveal-head p { margin: 0; max-width: 34em; font-size: 1.125rem; }
.reveal-shot { margin-block: 0; }
.reveal-shot img { width: 100%; border-radius: var(--radius-sm); }
.reveal-foot { padding-top: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.was { display: flex; align-items: center; gap: 14px; margin: 0; }
.was img { width: 120px; aspect-ratio: 1600 / 1080; object-fit: cover; border-radius: var(--radius-sm); }
.was figcaption { font: 600 .9375rem/1.3 var(--font-display); color: var(--muted); }
.reveal-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.reveal-cta p { margin: 0; font: 600 1.125rem/1.3 var(--font-display); }
@media (min-width: 960px) {
  .reveal-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 64px; padding-bottom: 48px; }
}

/* ---------- Trust band ---------- */
.trust { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.rates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--ink); }
.rates li { display: grid; gap: 4px; align-content: start; padding: 18px 0 18px 14px; border-left: 1px solid var(--line); }
.rates li:nth-child(odd) { border-left: 0; padding-left: 0; }
.rates li:nth-child(n+3) { border-top: 1px solid var(--line); }
.rates b { font: 760 1.75rem/1.05 var(--font-display); font-stretch: 90%; letter-spacing: -.02em; }
.rates span { font: 500 .875rem/1.35 var(--font-display); color: var(--muted); }
@media (min-width: 900px) {
  .rates { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rates li, .rates li:nth-child(odd) { padding: 26px 20px 26px 28px; border-left: 1px solid var(--line); }
  .rates li:first-child { border-left: 0; padding-left: 0; }
  .rates li:nth-child(n+3) { border-top: 0; }
  .rates b { font-size: 2.5rem; }
  .rates span { font-size: .9375rem; }
}

/* ---------- Pieces: the cut list (prices) and gallery ---------- */
.pieces, .proof, .about {
  max-width: var(--max); margin: 0 auto; padding: var(--sec) var(--gutter);
}
.proof, .about { background: linear-gradient(var(--line), var(--line)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
.head { display: grid; gap: 12px; margin-bottom: 36px; }
.head h2 { font-size: clamp(2rem, 1.3rem + 2.7vw, 3.5rem); font-weight: 720; font-stretch: 90%; line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
.head p { margin: 0; max-width: 32em; color: var(--muted); }
@media (min-width: 960px) { .head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: 64px; margin-bottom: 56px; } }

.cutlist { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.cutlist li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name from" "spec spec" "lead lead";
  column-gap: 16px; row-gap: 2px; padding: 16px 0; border-bottom: 1px solid var(--line);
}
.cutlist h3 { grid-area: name; font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.cutlist p { margin: 0; }
.spec { grid-area: spec; font-size: 1rem; }
.lead { grid-area: lead; font: 500 .875rem/1.5 var(--font-display); color: var(--muted); }
.from { grid-area: from; font: 700 1.0625rem/1.25 var(--font-display); color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 960px) {
  .cutlist li { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 2.4fr) minmax(0, 1.6fr); grid-template-areas: "name spec lead from"; align-items: baseline; padding: 20px 0; }
  .cutlist h3 { font-size: 1.5rem; }
  .lead { font-size: .9375rem; }
  .from { justify-self: end; font-size: 1.125rem; }
}

.sub { margin: clamp(56px, 7vw, 96px) 0 24px; font-size: 1.5rem; font-weight: 700; letter-spacing: -.015em; }
.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
.gallery li:first-child { grid-column: 1 / -1; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }
.gallery h4 { margin: 12px 0 4px; font-size: 1.125rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.gallery p { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--muted); }
@media (min-width: 960px) {
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .gallery li:first-child { grid-column: auto; }
  .gallery h4 { font-size: 1.3rem; margin-top: 16px; }
  .gallery p { font-size: 1rem; }
}

/* ---------- Reviews and badges ---------- */
.quotes { display: grid; gap: 28px; margin-bottom: 56px; }
.quotes figure { margin: 0; }
.quotes blockquote { margin: 0; }
.quotes p { margin: 0; font-style: italic; font-size: 1.1875rem; line-height: 1.55; }
.quotes figcaption { margin-top: 10px; font: 600 .9375rem/1.3 var(--font-display); }
.quotes small { display: block; margin-top: 3px; font-size: .8125rem; font-weight: 500; color: var(--muted); }
@media (min-width: 960px) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } .quotes p { font-size: 1.25rem; } }

.badges { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.badges li {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: 500 .9375rem/1.4 var(--font-display); color: var(--muted);
}
.badges svg { width: 52px; height: 52px; padding: 9px; border-radius: 50%; background: var(--accent-soft); fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.badges b { display: block; color: var(--ink); font-weight: 700; font-size: 1rem; }
@media (min-width: 760px) {
  .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 1100px) {
  .badges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .badges li { grid-template-columns: 1fr; align-content: start; padding: 22px; }
}

/* ---------- About ---------- */
.about { display: grid; gap: 32px; }
.about-photo { margin: 0; }
.about-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-sm); }
.about-photo figcaption { margin-top: 10px; font: 500 .875rem/1.4 var(--font-display); color: var(--muted); }
.about h2 { font-size: clamp(2rem, 1.3rem + 2.7vw, 3.5rem); font-weight: 720; font-stretch: 90%; line-height: 1.02; letter-spacing: -.03em; margin-bottom: 20px; }
.about-copy p { max-width: 32em; }
@media (min-width: 960px) {
  .about { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
  .about-copy p { font-size: 1.125rem; }
}

/* ---------- Contact band: booking, location, hours ---------- */
.cta { background: var(--deep); color: var(--on-deep); }
.cta :focus-visible { outline-color: #fff; }
.cta-in { max-width: var(--max); margin: 0 auto; padding: var(--sec) var(--gutter); display: grid; gap: 48px; }
.cta h2 { color: #fff; font-size: clamp(2.2rem, 1.35rem + 3.6vw, 4.6rem); font-weight: 760; font-stretch: 86%; line-height: 1; letter-spacing: -.035em; margin-bottom: 20px; max-width: 12em; text-wrap: balance; }
.cta-in > div > p { max-width: 32em; font-size: 1.125rem; margin: 0; }
.cta .text-link { color: #fff; }
.area h3 { color: #fff; font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; }
.area address { font-style: normal; font-size: 1.0625rem; color: #fff; }
.hours { margin: 18px 0; border-top: 1px solid color-mix(in srgb, #fff 30%, var(--deep)); font: 500 .9375rem/1.4 var(--font-display); }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, #fff 18%, var(--deep)); }
.hours dd { margin: 0; color: #fff; text-align: right; }
.area p { margin: 0; font-size: 1rem; }
@media (min-width: 960px) { .cta-in { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: 96px; } }

/* ---------- Footer ---------- */
.foot-in {
  max-width: var(--max); margin: 0 auto; padding: 56px var(--gutter) 40px;
  display: grid; gap: 28px; font: 400 .9375rem/1.6 var(--font-display); color: var(--muted);
}
.foot b { color: var(--ink); }
.foot-brand p { margin: 14px 0 0; max-width: 26em; }
.tile-lg { width: 56px; height: 56px; border-radius: 12px; }
.tile-lg svg { width: 42px; height: 42px; }
.foot-h { font: 700 .9375rem/1.3 var(--font-display); color: var(--ink); margin-bottom: 10px; }
.foot address { font-style: normal; margin: 0 0 12px; }
.foot-in > div > p { margin: 0; }
.foot a { display: inline-block; padding: 10px 0; color: var(--ink); text-underline-offset: 4px; }
.legal { grid-column: 1 / -1; margin: 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: .875rem; }
@media (min-width: 900px) { .foot-in { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } }

/* ---------- Phones (Oct 8 2026): strict phone checks (centred column, <= 10 screens) ----------
   Chapter pictures go 16:9; shop notes get matching side padding; the gallery and reviews become swipe rails; on phones the reveal photo
   (the same table as the chapter-5 picture just above), the standards cards (repeats of the trust band and the story),
   the about photo and the footer's shop column (the contact band right above has the address and hours) are held back. */
@media (max-width: 759.98px) {
  :root { --sec: 52px; --stage-h: calc(100vw * .5625 + 44px); }
  .frame { aspect-ratio: 16 / 9; }   /* chapter pictures a little shorter on phones (the stage height follows) */
  .lede { font-size: 1.125rem; }
  .cutlist li { padding-block: 12px; }
  .cta-in { gap: 32px; }
  .shop-note { padding-right: 19px; }

  .gallery, .quotes {
    display: flex; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .gallery::-webkit-scrollbar, .quotes::-webkit-scrollbar { display: none; }
  .gallery { gap: 14px; }
  .gallery li { flex: 0 0 82%; scroll-snap-align: start; }
  .quotes { gap: 20px; margin-bottom: 0; }
  .quotes figure { flex: 0 0 84%; scroll-snap-align: start; }
  .reveal-shot, .proof .badges, .about-photo, .foot-shop { display: none; }
  .reveal-head { padding-bottom: 8px; }
  .about { gap: 0; }
}
/* Default story layout only (no scroll timelines, or reduced motion): chapters sit a little closer on phones */
@media (max-width: 759.98px) and (prefers-reduced-motion: reduce) {
  .beat:not(.beat-0) { padding: 14px 0 32px; }
  .shot-0 { margin-bottom: 40px; }
}
@supports not ((animation-timeline: view()) and (animation-range: entry) and (timeline-scope: --a)) {
  @media (max-width: 759.98px) {
    .beat:not(.beat-0) { padding: 14px 0 32px; }
    .shot-0 { margin-bottom: 40px; }
  }
}

/* One Call on the entry screen (Ethan, Oct 7 2026; applied Oct 8). Extra Calls are held back, not deleted: they
   join after the first scroll (a CSS scroll timeline); where scroll timelines are missing they stay hidden and the
   contact block and footer carry Call. */
@keyframes call-held-in { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
@supports (animation-timeline: scroll()) {
  .beat-0 a[href^="tel:"] { animation: call-held-in linear both; animation-timeline: scroll(root); animation-range: 40px 140px; }
  @media (prefers-reduced-motion: reduce) { .beat-0 a[href^="tel:"] { animation: call-held-in steps(1, end) both !important; animation-timeline: scroll(root) !important; animation-range: 40px 140px !important; } }
}
@supports not (animation-timeline: scroll()) { .beat-0 a[href^="tel:"] { display: none; } }