/* ====== Tokens ====== */
:root {
  --bg: #EEF1EF;
  --surface: #FFFFFF;
  --ink: #121614;
  --muted: #5E6763;
  --line: #D9DFDB;
  --accent: #34C26A;      /* fills only */
  --accent-ink: #1A7A41;  /* accent text + focus on light */
  --dark: #26302D;
  --on-dark: #EEF1EF;
  --font: "Inter Tight", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Consolas", monospace;
  --serif: "Instrument Serif", "Georgia", serif;
  --r: 22px;
  --g: clamp(10px, 1.4vw, 16px);
  --pad: clamp(18px, 4vw, 56px);
  --space-section: clamp(88px, 10vw, 152px); /* G3: one rhythm between all sections */
  --space-head: clamp(28px, 4vw, 56px);      /* G3: header -> content */
  --tint: #E3F3E9;                           /* accent-tinted surface */
  --ease-out: cubic-bezier(.215,.61,.355,1); /* C1: CSS twin of power3.out (colour, opacity) */
  --ease-expo: cubic-bezier(.19,1,.22,1);    /* C1: CSS twin of expo.out (movement) */
}

/* ====== Lenis rules ====== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ====== Base ====== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.menu-open { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 6px; }
.dark :focus-visible, .hero :focus-visible, .footer :focus-visible, .nav-shell.is-open :focus-visible { outline-color: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.02em; text-transform: uppercase; }
.wrap { padding-inline: var(--g); }
.container { max-width: 1360px; margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(80px, 11vw, 160px); }
.h1 { font-weight: 600; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.92; font-size: clamp(2.4rem, 6vw, 5.4rem); margin: 0; }
.h2 { font-weight: 600; text-transform: uppercase; letter-spacing: -0.025em; line-height: 0.95; font-size: clamp(2rem, 4.4vw, 3.8rem); margin: 0; }
.lede { color: var(--muted); max-width: 44ch; margin: 0; font-size: clamp(1rem, 1.2vw, 1.1rem); }
.eyebrow { color: var(--accent-ink); }

/* ====== G2/G3/G5: unified section rhythm + header component ====== */
.sec { margin-top: var(--space-section); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; gap: 18px 48px; margin-bottom: var(--space-head); }
.sec-head .lead { display: grid; gap: 14px; align-content: end; }
.sec-head .side { display: grid; gap: 18px; justify-items: start; align-content: end; }
.sec-head .side .lede { max-width: 44ch; }
.title { margin: 0; font-weight: 500; letter-spacing: -0.035em; line-height: 1; font-size: clamp(2.2rem, 4.6vw, 4.2rem); text-wrap: balance; }
.title-xl { font-size: clamp(2.6rem, 6.4vw, 6rem); letter-spacing: -0.045em; line-height: .95; }
.title em, .title-xl em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.title em { color: var(--accent-ink); }
.dark .title em, .corp .title em { color: var(--accent); }
.lede { max-width: 72ch; }
@media (max-width: 860px) { .sec-head { grid-template-columns: 1fr; } }
/* single-column header variant (used inside split layouts: FAQ, For business) */
.sec-head.stack { grid-template-columns: 1fr; align-content: start; margin-bottom: 0; }

/* ====== Rolling text buttons ====== */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 12px; font-weight: 600; font-size: 0.95rem; white-space: nowrap; transition: background-color .35s var(--ease-out), color .35s var(--ease-out), scale .2s var(--ease-out); }
.btn-accent { background: var(--accent); color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--bg); }
.btn-light { background: var(--surface); color: var(--ink); }
.btn-line { box-shadow: inset 0 0 0 1px currentColor; }
.btn-glass { background: rgba(18,22,20,.45); color: var(--on-dark); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(238,241,239,.3); }
@media (hover: hover) and (pointer: fine) { .btn-glass:hover { background: rgba(18,22,20,.6); } } /* MD 4.4: hover only on fine pointers */
.btn[aria-disabled="true"] { cursor: not-allowed; opacity: .62; }
.roll { display: inline-block; position: relative; overflow: hidden; line-height: 1.25; vertical-align: top; }
.roll > span { display: block; transition: transform .45s var(--ease-expo); }
.roll > span + span { position: absolute; inset: 0; transform: translateY(105%); }
.btn:hover .roll > span:first-child, a:hover > .roll > span:first-child, .story:hover .roll > span:first-child { transform: translateY(-105%); }
.btn:hover .roll > span + span, a:hover > .roll > span + span, .story:hover .roll > span + span { transform: translateY(0); }
/* MD 4.4: a tap on touch must not leave the roll stuck on its second line */
@media not ((hover: hover) and (pointer: fine)) {
  .btn:hover .roll > span:first-child, a:hover > .roll > span:first-child, .story:hover .roll > span:first-child { transform: none; }
  .btn:hover .roll > span + span, a:hover > .roll > span + span, .story:hover .roll > span + span { transform: translateY(105%); }
}
/* Story titles: the incoming line is the accent colour, like the Eventry hover flip */
.story .roll > span + span { color: var(--accent-ink); }
.icon { width: 18px; height: 18px; flex: none; }

/* ====== Progress line ====== */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80; transform-origin: 0 50%; transform: scaleX(0); background: var(--accent); opacity: .7; pointer-events: none; }

/* ====== Navigation ====== */
.nav { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.nav-shell { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); left: var(--g); right: var(--g); max-width: 1320px; margin-inline: auto; pointer-events: auto; background: var(--surface); border-radius: 16px; box-shadow: 0 1px 0 rgba(18,22,20,.04), 0 10px 30px -12px rgba(18,22,20,.18); overflow: hidden; }
.nav-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 0 10px 0 24px; }
.logo { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; display: inline-flex; align-items: flex-start; gap: 2px; }
.logo sup { font-size: .55rem; color: var(--accent-ink); margin-top: 4px; }
.nav-links { display: flex; gap: 26px; font-weight: 500; font-size: .95rem; }
.nav-links a { min-height: 44px; display: inline-flex; align-items: center; }
.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-right .btn { min-height: 44px; }
.burger { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; }
.burger span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .45s var(--ease-expo); }
.burger span + span { margin-top: 6px; }
.menu-body { display: none; }
/* open state (Flip target layout) */
.nav-shell.is-open { top: 10px; bottom: 10px; left: 10px; right: 10px; max-width: none; background: var(--dark); color: var(--on-dark); border-radius: 24px; display: flex; flex-direction: column; }
.nav-shell.is-open .nav-links, .nav-shell.is-open .nav-cta { display: none; }
.nav-shell.is-open .logo sup { color: var(--accent); }
.nav-shell.is-open .burger span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-shell.is-open .burger span:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav-shell.is-open .menu-body { display: grid; flex: 1; grid-template-rows: 1fr auto; gap: 24px; padding: clamp(20px, 4vw, 56px); overflow-y: auto; }
.menu-links { display: grid; align-content: center; gap: 2px; }
.menu-links a { font-weight: 600; text-transform: uppercase; letter-spacing: -0.03em; font-size: clamp(2.4rem, 8vw, 6rem); line-height: 1.02; display: inline-flex; align-items: baseline; gap: 16px; width: max-content; }
.menu-links a small { font-family: var(--mono); font-size: .8rem; color: var(--accent); letter-spacing: 0; }
.menu-foot { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; border-top: 1px solid rgba(238,241,239,.18); padding-top: 22px; }
.menu-foot p { margin: 0; font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 500; max-width: 22ch; }
.menu-foot .mono { color: rgba(238,241,239,.65); display: block; margin-top: 8px; }
@media (max-width: 1100px) { .nav-links { display: none; } }
@media (max-width: 560px) { .nav-cta { display: none !important; } .nav-bar { padding-left: 18px; height: 58px; } .menu-foot { grid-template-columns: 1fr; } }

/* ====== Hero ====== */
.hero { padding: var(--g); padding-bottom: 0; }
.hero-panel { position: relative; height: calc(100vh - 2 * var(--g)); height: calc(100svh - 2 * var(--g)); min-height: 560px; border-radius: var(--r); overflow: hidden; background: var(--dark); color: var(--on-dark); isolation: isolate; }
.hero-parallax, .hero-media { position: absolute; inset: 0; }
.hero-media video, .hero-media .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero-media video { opacity: 0; transition: opacity .6s var(--ease-out); }
.hero-media video.is-playing { opacity: 1; }
.hero-panel::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(18,22,20,.35) 0%, rgba(18,22,20,0) 26%, rgba(18,22,20,0) 48%, rgba(18,22,20,.55) 76%, rgba(18,22,20,.86) 100%); }
.hero-content { position: absolute; inset: auto 0 0 0; z-index: 2; padding: clamp(18px, 3vw, 40px); display: grid; gap: clamp(14px, 2vw, 24px); }
.hero-top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 32px; }
.wordmark { margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: -0.055em; line-height: .8; font-size: clamp(3.6rem, 13.2vw, 13rem); padding-top: .08em; }
.hero-blurb { margin: 0 0 .9em auto; max-width: 32ch; font-size: clamp(.98rem, 1.15vw, 1.1rem); line-height: 1.45; color: rgba(238,241,239,.92); }
.hero-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; border-top: 1px solid rgba(238,241,239,.25); padding-top: 14px; }
.hero-meta .mono { color: rgba(238,241,239,.85); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.scroll-cue { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; color: rgba(238,241,239,.75); }
.scroll-cue::after { content: ""; width: 56px; height: 1px; background: currentColor; opacity: .7; }
@media (max-width: 1023.98px) { .scroll-cue { display: none; } }
.ticket { display: inline-flex; align-items: stretch; border-radius: 14px; overflow: hidden; min-height: 56px; }
.ticket .ic { display: grid; place-items: center; padding: 0 16px; background: var(--surface); color: var(--ink); }
.ticket .tx { display: grid; align-content: center; padding: 8px 18px; background: var(--accent); color: var(--ink); font-family: var(--mono); font-size: .82rem; line-height: 1.35; }
.ticket .tx b { font-weight: 500; }
.hero-ctrl { position: absolute; z-index: 3; top: clamp(84px, 11vh, 110px); right: clamp(14px, 2vw, 28px); display: flex; gap: 8px; }
.pill { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 999px; background: rgba(18,22,20,.45); color: var(--on-dark); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: var(--mono); font-size: .75rem; text-transform: uppercase; }
.pill[hidden] { display: none; }
/* hero hidden states before boot (only above-the-fold elements) */
.js-motion .hero-panel { clip-path: inset(8% 8% 8% 8% round 32px); }
.js-motion .hero-media { transform: scale(1.15); }
.js-motion .wordmark, .js-motion .hero-blurb, .js-motion .hero-meta, .js-motion .hero-tiles, .js-motion .hero-cta, .js-motion .nav-shell, .js-motion .hero-ctrl { visibility: hidden; }
@media (max-width: 1100px) { .hero-top { grid-template-columns: 1fr; gap: 12px; } .hero-blurb { margin: 0; order: -1; } .wordmark { font-size: clamp(3.4rem, 16.5vw, 12rem); } }
@media (max-width: 760px) { .hero-meta { grid-template-columns: 1fr 1fr; } .hero-meta .mono:last-child { display: none; } .hero-media video, .hero-media .poster { object-position: 52% 45%; } }
@media (orientation: portrait) and (max-width: 1024px) { .hero-media video, .hero-media .poster { object-position: 50% 42%; } }

/* ====== Mission ====== */
.mission { display: grid; justify-items: center; text-align: center; gap: clamp(22px, 2.4vw, 32px); padding-top: clamp(40px, 5vw, 72px); padding-bottom: 0; }
.mission-top { display: grid; justify-items: center; gap: 12px; }
.mission-top .caption { color: var(--muted); margin: 0; }
.dots { display: flex; gap: 2px; }
.dots img { width: clamp(48px, 4vw, 60px); height: clamp(48px, 4vw, 60px); border-radius: 8px; object-fit: cover; }.dots .badge { height: clamp(48px, 4vw, 60px); min-width: clamp(60px, 5vw, 76px); padding: 0 14px; border-radius: 8px; background: var(--accent-ink); color: #fff; display: flex; align-items: center; justify-content: center; white-space: nowrap; font-weight: 500; font-size: clamp(1rem, 1.3vw, 1.25rem); font-variant-numeric: tabular-nums; }
.statement { margin: 0; width: 100%; max-width: 1100px; font-weight: 500; letter-spacing: -0.022em; line-height: 1.18; font-size: clamp(1.65rem, 3.4vw, 3.7rem); text-wrap: balance; }
.statement em, .cine-title em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.statement em { color: var(--accent-ink); }

/* ====== Cinematic moment ====== */
.cine { padding: clamp(48px, 7vw, 96px) var(--g) 0; }
.cine-frame { position: relative; height: 92vh; height: 92svh; min-height: 520px; border-radius: var(--r); overflow: hidden; color: var(--on-dark); isolation: isolate; background: var(--dark); }
.cine-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; z-index: -2; }
.cine-frame::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18,22,20,0) 40%, rgba(18,22,20,.35) 62%, rgba(18,22,20,.85) 100%); }
.cine-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(22px, 4vw, 56px); display: grid; gap: clamp(12px, 1.6vw, 20px); }
.cine-copy .mono { color: var(--accent); }
.cine-title { margin: 0; font-weight: 500; letter-spacing: -0.04em; line-height: .95; font-size: clamp(2.6rem, 7vw, 7.4rem); max-width: 12ch; }
.cine-copy p { margin: 0; max-width: 46ch; color: rgba(238,241,239,.88); font-size: clamp(1rem, 1.25vw, 1.15rem); }
.cine-formats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cine-formats li { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; background: rgba(18,22,20,.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(238,241,239,.22); }
.cine-copy .btn { justify-self: start; color: var(--on-dark); }
@media (orientation: portrait) and (max-width: 1024px) { .cine-frame { height: 82svh; } .cine-frame img { object-position: 55% 40%; } }
/* ====== Venues trust strip (S4) ====== */
.venues { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.venue { padding: clamp(20px, 2.6vw, 34px) clamp(10px, 1.4vw, 20px); display: grid; gap: 8px; align-content: start; }
.venue + .venue { border-left: 1px solid var(--line); }
.venue b { font-weight: 400; font-size: clamp(1.05rem, 1.5vw, 1.4rem); letter-spacing: -0.02em; line-height: 1.15; }
.venue span { color: var(--accent-ink); }
@media (max-width: 1024px) { .venues { grid-template-columns: repeat(3, 1fr); } .venue:nth-child(4) { border-left: 0; } .venue:nth-child(n+4) { border-top: 1px solid var(--line); } }
@media (max-width: 560px) { .venues { grid-template-columns: 1fr 1fr; } .venue:nth-child(odd) { border-left: 0; } .venue:nth-child(4) { border-left: 1px solid var(--line); } .venue:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* ====== Stories ====== */
.stories { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(20px, 2.4vw, 32px) var(--g); max-width: 1920px; margin-inline: auto; }
.stories .story > h3, .stories .story > .meta { padding-inline: clamp(4px, 0.6vw, 10px); }
.story { grid-column: span 6; display: grid; gap: 14px; align-content: start; }
.story:nth-child(1) { grid-column: span 12; }
/* S5.2: asymmetric editorial rhythm 12 / 7-5 / 5-7 */
.story:nth-child(2), .story:nth-child(5) { grid-column: span 7; }
.story:nth-child(3), .story:nth-child(4) { grid-column: span 5; }
/* Narrow cards use 8/7 so their image height matches the 16/10 wide cards (5-col width ≈ 0.71 × 7-col width) */
.story:nth-child(2) .frame, .story:nth-child(5) .frame { aspect-ratio: 16 / 10; }
.story:nth-child(3) .frame, .story:nth-child(4) .frame { aspect-ratio: 8 / 7; }
.story .frame { position: relative; overflow: hidden; border-radius: var(--r); aspect-ratio: 16 / 10; background: var(--line); }
.story:nth-child(1) .frame { aspect-ratio: 21 / 9; }
/* `scale` (not transform) so hover zoom composes with the GSAP scroll transforms on the same image */
.story .frame img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--ease-expo); } /* MD 1.3: 1s -> .8s */
/* !important: GSAP writes an inline `scale: none` on any element whose transform it tweens (initStoryCine), which silently
   cancelled this zoom in the spike. The individual `scale` property still composes with GSAP's transform. */
@media (hover: hover) and (pointer: fine) { .story:hover .frame img { scale: 1.05 !important; } }
.story h3 { margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.6rem); font-weight: 600; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.05; }
.story .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); }
.story .meta span + span::before { content: "•"; margin-right: 14px; color: var(--accent-ink); }
.story .tag { position: absolute; top: 14px; left: 14px; z-index: 1; background: var(--surface); color: var(--ink); border-radius: 999px; padding: 6px 12px; }
@media (max-width: 760px) { .story, .story:nth-child(n) { grid-column: span 12; } .story:nth-child(1) .frame { aspect-ratio: 4 / 3; } .story:nth-child(3) .frame, .story:nth-child(4) .frame { aspect-ratio: 16 / 10; } }

/* ====== Home stories: Eventry-style layout ======
   Two EQUAL columns at the contained page width, 3:2 photos, a hairline under each photo, then the title.
   Scoped to .stories-two so the service pages (3 stories, 12-column spans) are unaffected. */
.stories.stories-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 4vw, 64px) clamp(16px, 1.8vw, 24px); max-width: 1360px; }
.stories.stories-two .story { grid-column: auto; grid-template-rows: none; gap: 0; align-content: start; }
.stories.stories-two .story .frame { aspect-ratio: 3 / 2; height: auto; margin-bottom: clamp(16px, 1.8vw, 24px); }
.stories.stories-two .story > h3 { border-top: 1px solid var(--line); padding: clamp(16px, 1.8vw, 24px) 0 0; margin-bottom: 10px; font-size: clamp(1.25rem, 2.3vw, 2.1rem); }
.stories.stories-two .story > .meta { padding: 0; }
/* sixth slot: a "see every story" tile, same size as a photo */
.story-more { align-self: start; aspect-ratio: 3 / 2; display: grid; align-content: space-between; gap: 16px; padding: clamp(22px, 3vw, 44px); border-radius: var(--r); background: var(--dark); color: var(--on-dark); transition: background-color .5s var(--ease-expo); }
@media (hover: hover) and (pointer: fine) { .story-more:hover { background: #2f3d38; } }
.story-more:focus-visible { background: #2f3d38; }
.story-more .mono { color: var(--accent); }
.story-more-t { font-weight: 500; letter-spacing: -0.03em; line-height: 1; font-size: clamp(1.6rem, 3.4vw, 3.2rem); max-width: 14ch; text-wrap: balance; }
.story-more .btn { justify-self: start; }
@media (max-width: 760px) { .stories.stories-two { grid-template-columns: minmax(0, 1fr); } .story-more { aspect-ratio: auto; min-height: 220px; } }
.cursor-view { position: fixed; top: 0; left: 0; z-index: 60; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; font-family: var(--mono); font-size: .75rem; text-transform: uppercase; pointer-events: none; transform: scale(0); }

/* ====== Plan list (SERVICE-PAGES-SPEC §1 R2–R6, MOTION-SPEC-SERVICES §C.1–C.3) ====== */
#plan-list, .plan-sec { --pv-w: clamp(200px, 14vw, 240px); --lane: calc(var(--pv-w) + 48px); }
.plan-list { display: grid; gap: clamp(20px, 3vw, 40px); }   /* each concept is its own panel now, so the list rule is a gap, not a border */
.plan-row { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 24ch) 132px; grid-template-areas: "n txt price go"; column-gap: clamp(16px, 2vw, 28px); align-items: center; padding: clamp(20px, 2.4vw, 32px) 0; border-bottom: 1px solid var(--line); }
.plan-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .7s var(--ease-expo); pointer-events: none; }
.plan-row .n { grid-area: n; color: var(--accent-ink); transition: color .35s var(--ease-out); }
.plan-row .txt { grid-area: txt; display: grid; min-width: 0; }
.plan-row .t { margin: 0; font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; font-size: clamp(1.8rem, 3.2vw, 3rem); text-transform: none; text-wrap: balance; transition: transform .6s var(--ease-expo), color .35s var(--ease-out); }
.plan-row .t em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--accent-ink); }
.plan-row .d { margin-top: 8px; color: var(--muted); font-size: .95rem; line-height: 1.45; max-width: 52ch; }
.plan-row .lane { grid-area: lane; display: none; align-self: stretch; }
.plan-row .price { grid-area: price; display: grid; gap: 6px; justify-items: end; text-align: right; }
.plan-row .price .pv { color: var(--ink); font-size: .82rem; }
.plan-row .price small { display: block; max-width: 26ch; color: var(--muted); font-size: .68rem; line-height: 1.4; letter-spacing: 0.01em; transition: color .35s var(--ease-out); }
.plan-row .go { grid-area: go; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.plan-row .lbl { color: var(--ink); opacity: 0; transform: translateX(8px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
.plan-row .ring { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); transition: scale .2s var(--ease-out); }
.plan-row .ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .45s var(--ease-expo); }
.plan-row .ring .icon { position: relative; transform: rotate(-45deg); transition: transform .45s var(--ease-expo); }
.plan-row .thumb { display: none; grid-area: thumb; align-self: start; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--line); }
.plan-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
/* C.2: hover and keyboard focus look identical (C7) */
.plan-row:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }
.plan-row:focus-visible .ring::before { transform: scale(1); }
.plan-row:focus-visible .ring .icon { transform: rotate(0deg); }
.plan-row:focus-visible .lbl { opacity: 1; transform: none; }
.plan-row:focus-visible :is(.price, .goal) small { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { /* MD 4.4: hover states only on fine pointers; focus-visible above mirrors them */
  .plan-row:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
  .plan-row:hover .ring::before { transform: scale(1); }
  .plan-row:hover .ring .icon { transform: rotate(0deg); }
  .plan-row:hover .lbl { opacity: 1; transform: none; }
  .plan-row:hover :is(.price, .goal) small { color: var(--ink); }
}
.plan-row:focus-visible .t { transform: translateX(12px); }
.plan-row:active .ring { scale: .92; }
.plan-row:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 6px; border-radius: 12px; }
@media (hover: hover) and (pointer: fine) {
  .plan-row:hover .t { transform: translateX(12px); }
  .plan-list:has(.plan-row:hover) .plan-row:not(:hover) :is(.t, .n) { color: color-mix(in srgb, var(--ink) 40%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .plan-row .t, .plan-row:hover .t, .plan-row:focus-visible .t { transform: none; } }
/* Desktop with preview: number | title + line | media lane | price | Explore */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .plan-row { grid-template-columns: 56px minmax(0, 1fr) var(--lane) minmax(0, 21ch) 132px; grid-template-areas: "n txt lane price go"; }
  .plan-row .lane { display: block; }
}
/* Mobile: static thumbnail, one tap navigates (R6) */
@media (max-width: 760px) {
  .plan-row { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "thumb n n" "thumb txt txt" "thumb price go"; column-gap: 14px; row-gap: 4px; align-items: start; min-height: 44px; }
  .plan-row .thumb { display: block; }
  .plan-row .d { font-size: .9rem; }
  .plan-row .price { justify-items: start; text-align: left; align-self: center; margin-top: 10px; }
  .plan-row .go { align-self: end; margin-top: 10px; }
  .plan-row .lbl { opacity: 1; transform: none; }
}
.plan-more { margin-top: clamp(20px, 2.4vw, 32px); }
/* C.3 preview: clamped to the media lane, upright at rest, slides between images */
.preview { position: fixed; top: 0; left: 0; z-index: 55; width: var(--pv-w); height: calc(var(--pv-w) * 1.25); border-radius: 14px; overflow: hidden; pointer-events: none; visibility: hidden; opacity: 0; clip-path: inset(50% 0% 50% 0% round 14px); background: var(--line); will-change: transform; }
.pv-strip { display: flex; flex-direction: column; height: calc(var(--n, 4) * 100%); }
.pv-strip img { flex: 1 1 0; min-height: 0; width: 100%; object-fit: cover; }

/* ====== Marquee ====== */
.marquee-wrap { position: relative; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee + .marquee { margin-top: var(--g); }
.track { display: flex; gap: var(--g); width: max-content; padding-right: var(--g); /* makes -50% land exactly on the seam */ }
.tcard { width: min(380px, 80vw); background: var(--surface); border-radius: 18px; padding: 24px; display: grid; gap: 18px; align-content: space-between; }
.tcard q { quotes: none; font-size: 1.02rem; }
.tcard .who { display: flex; align-items: center; gap: 12px; }
.tcard .av { width: 42px; height: 42px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-weight: 700; color: var(--accent-ink); }
.tcard .who b { display: block; font-weight: 600; }
.tcard .who span { color: var(--muted); font-size: .85rem; }
.scard { width: min(300px, 72vw); background: var(--tint); color: var(--ink); border-radius: 18px; padding: 24px; display: grid; gap: 8px; align-content: end; }
.scard .n { font-weight: 700; letter-spacing: -0.04em; font-size: clamp(2.6rem, 4vw, 3.4rem); line-height: 1; font-variant-numeric: tabular-nums; }
.scard .n small { font-size: .45em; color: var(--accent-ink); margin-left: 4px; }
.scard p { margin: 0; color: var(--muted); font-size: .92rem; }
/* S8.1: Pause control lives in the section header on the light background */
.pill.pill-light { background: var(--surface); color: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--line); justify-self: end; }
@media (max-width: 860px) { .pill.pill-light { justify-self: start; } }

/* ====== Company-size solutions (skill 4.4: replaces the spike's priced cards; same card declarations, no price block) ====== */
.solutions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); }
.solution { --solpad: clamp(22px, 2.6vw, 32px); background: var(--surface); border-radius: var(--r); padding: 0 var(--solpad) var(--solpad); display: grid; gap: 22px; align-content: start; transition: transform .45s var(--ease-expo), box-shadow .45s var(--ease-out); }
.solution h3 { margin: 0; font-weight: 600; text-transform: uppercase; letter-spacing: -0.02em; font-size: 1.3rem; }
.solution p { margin: 0; color: var(--muted); }
.solution ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.solution li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.solution li svg { color: var(--accent-ink); margin-top: 3px; }
.solution .btn { justify-self: start; }
.solution .tailor .mono { display: block; margin-bottom: 8px; color: var(--accent-ink); }
.solutions-note { margin: clamp(24px, 3vw, 40px) auto 0; max-width: 72ch; text-align: center; color: var(--muted); }
@media (max-width: 960px) { .solutions { grid-template-columns: 1fr; } }

/* ====== Process ====== */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.step { border-top: 2px solid var(--line); padding-top: 20px; display: grid; gap: 10px; align-content: start; position: relative; }
.step::before { content: ""; position: absolute; top: -2px; left: 0; height: 2px; width: var(--w, 100%); background: var(--accent); }
.step h3 { margin: 0; font-weight: 600; text-transform: uppercase; font-size: 1.1rem; }
.step p { margin: 0; color: var(--muted); font-size: .94rem; }
.step .mono { color: var(--accent-ink); }
.step .num + .mono { color: var(--muted); }
.step .num { font-size: 2rem; font-weight: 300; line-height: 1; letter-spacing: -0.03em; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
@media (max-width: 960px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ====== Team: expanding gallery ======
   Cards sit side by side as narrow strips. The active card (hover / focus / tap) widens and
   reveals the person. Widening is a plain flex-grow transition, so it needs no JS animation. */
.team { padding-top: 0; --ease-team: cubic-bezier(.33, 1, .68, 1); --dur-team: .8s; } /* ease-out: starts moving the instant the cursor lands, then settles softly (gentler than expo.out) */
/* Reference proportions (Eventry team row, 6 cards): content 1226 wide x 637 tall -> five closed strips ~118 wide, open card ~546 x 637
   (portrait rectangle, ~6:7). The row's SHAPE is fixed by aspect-ratio, so those proportions hold at every screen width.
   Heading and row share the 1226px content column. */
.team .container { max-width: calc(1226px + 2 * var(--pad)); }
/* Heading on ONE line at every width: sized by viewport so it can't overflow, text on the left, lede on the right */
.team .sec-head { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 14px clamp(24px, 4vw, 64px); }
.team .sec-head .side { justify-self: end; max-width: 36ch; }
.team .title { white-space: nowrap; font-size: clamp(2.2rem, 3.9vw, 3.6rem); }
@media (max-width: 1024px) { /* TABLET and below only (laptops are untouched): heading and lede stack instead of overflowing the row */
  .team .sec-head { grid-template-columns: 1fr; }
  .team .sec-head .side { justify-self: start; max-width: 52ch; }
}
@media (max-width: 860px) {
  .team .sec-head { grid-template-columns: 1fr; }
  .team .sec-head .side { justify-self: start; max-width: none; }
  .team .title { font-size: clamp(1.2rem, 6.3vw, 2.6rem); }
}
/* Fit-on-one-screen: the row never gets taller than the viewport minus the floating menu bar (~100px), the heading (~130px)
   and breathing room, so heading + cards are visible together with the bar showing. The shape (1090:637) is kept, so on short
   screens the whole row simply gets a little narrower. 1.925 = 1226 / 637. */
/* Smoothness: the photo inside each card keeps ONE fixed size (the open card's size) and is only cropped by the card as it
   widens, so the browser never re-scales or re-decodes it mid-animation. --open-w = width of the open card (flex 4.6 : 5x1). */
.team-row { container-type: inline-size; --tgap: clamp(10px, 1.45vw, 18px); --open-w: calc((100cqw - 5 * var(--tgap)) * 4.6 / 9.6); display: flex; gap: var(--tgap); width: min(1226px, calc(100% - 2 * var(--pad)), max(620px, calc((100vh - 290px) * 1.925)), max(620px, calc((100svh - 290px) * 1.925))); aspect-ratio: 1226 / 637; padding: 0; margin-inline: auto; } /* LAPTOP + TABLET: centred row, as before */
.team { scroll-margin-top: 96px; }
.team .sec-head { margin-bottom: clamp(20px, 2.4vw, 32px); } /* tighter than other sections so the block fits one screen */
.team-row .member { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--r); cursor: pointer; background: var(--dark); transition: flex-grow var(--dur-team) var(--ease-team); contain: paint; }
.team-row .member.is-active { flex-grow: 4.6; cursor: default; }
/* portrait / placeholder layer */
.member .ph { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(110% 70% at 85% 105%, rgba(52,194,106,.18), rgba(52,194,106,0) 62%), linear-gradient(160deg, var(--c1, var(--dark)) 0%, var(--c2, #284636) 100%); }
.member .ph img { position: absolute; top: 0; left: 50%; width: var(--open-w, 100%); max-width: none; height: 100%; object-fit: cover; object-position: 50% 25%; transform: translateX(-50%); will-change: transform; backface-visibility: hidden; }
.member .ph b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(4rem, 8vw, 8rem); letter-spacing: -0.02em; line-height: 1; color: var(--on-dark); opacity: .55; transform: scale(.5); transition: transform var(--dur-team) var(--ease-team), opacity .8s var(--ease-team); }
.member.is-active .ph b { transform: none; opacity: .92; }
/* darken the bottom so the name pill reads over any photo */
.team-row .member::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(18,22,20,0) 55%, rgba(18,22,20,.35) 100%); opacity: 0; transition: opacity .9s var(--ease-team); }
.team-row .member.is-active::after { opacity: 1; }
/* name pill, revealed when the card opens */
.member .info { position: absolute; left: clamp(10px, 1.4vw, 18px); bottom: clamp(10px, 1.4vw, 18px); width: max-content; max-width: calc(var(--open-w, 100%) - 2 * clamp(10px, 1.4vw, 18px)); padding: 14px 20px 16px; border-radius: 12px; background: rgba(238,241,239,.86); color: var(--ink); display: grid; gap: 4px; pointer-events: none; will-change: transform;
  /* Fixed-size box (width = its own text, capped by the OPEN card's width, never the animating card's width), so the text never re-wraps
     while the card grows. No backdrop blur: it was recomputed every frame while the pill moved; the milky background reads the same. */
  /* Rests fully BELOW the card's bottom edge (the card clips it) and slides up into place, like Eventry. Transform only: no fade, no layout.
     visibility:hidden while parked means the six pills cost nothing to paint. Leaving is quicker than arriving. */
  transform: translateY(calc(100% + 40px)); visibility: hidden; transition: transform .35s cubic-bezier(.4, 0, .6, 1), visibility 0s linear .35s; }
.member.is-active .info { transform: none; visibility: visible; transition: transform .6s var(--ease-team) .04s, visibility 0s; } /* same curve as the widening, ~25% faster than before */
/* name, role and line rise in a quick stagger right behind the pill */
.member .info > * { opacity: 0; transform: translateY(16px); transition: opacity .15s linear, transform .15s linear; }
.member.is-active .info > * { opacity: 1; transform: none; transition: opacity .4s var(--ease) var(--d, .14s), transform .6s var(--ease-team) var(--d, .14s); }
.member.is-active .info > :nth-child(2) { --d: .2s; }
.member.is-active .info > :nth-child(3) { --d: .26s; }
.member .info h3 { margin: 0; font-weight: 600; text-transform: uppercase; font-size: clamp(1.2rem, 2vw, 1.7rem); letter-spacing: -0.02em; line-height: 1.05; }
.member .info p { margin: 0; color: var(--muted); font-size: .92rem; }
.member .info .line { color: var(--ink); font-size: .98rem; margin-top: 6px; }
.member .peek { display: none; }
/* Phones and small tablets: the SAME look as the laptop (tall photo strips side by side, the tapped one opens into a portrait card
   with the name pill). Six cards can't all fit a 390px screen at laptop proportions, so the row is a swipeable strip that bleeds off the
   right edge to show there is more. Cards keep fixed sizes (strip / open) and animate width; the photo keeps one fixed size and is cropped.
   Only below 640px: wider screens (tablets) have room for the laptop layout. No scroll-snap: the opened card is scrolled into place from JS,
   and snapping fought that scroll on narrow phones. */
@media (max-width: 640px) {
  .team-row { --strip-w: 60px; --open-w: min(74vw, 310px); --tgap: 8px;
    aspect-ratio: auto; height: clamp(400px, 64svh, 540px); width: calc(100% - var(--pad)); margin: 0 0 0 var(--pad); padding: 0 var(--pad) 0 0; /* starts at the page margin, bleeds off the right edge */
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .team-row::-webkit-scrollbar { display: none; }
  .team-row .member { flex: 0 0 auto; width: var(--strip-w); height: 100%; transition: width var(--dur-team) var(--ease-team); }
  .team-row .member.is-active { flex-grow: 0; width: var(--open-w); }
  .member .info p { font-size: .85rem; }
  .member .info .line { font-size: .9rem; }
  .member .info h3 { font-size: 1.2rem; }
}

/* ====== Corporate band ====== */
.corp { margin: var(--space-section) var(--g) 0; border-radius: var(--r); background: var(--dark); color: var(--on-dark); display: grid; grid-template-columns: 1.05fr 1fr; overflow: hidden; }
.corp .copy { padding: clamp(28px, 5vw, 72px); display: grid; gap: 24px; align-content: center; }
.corp .eyebrow { color: var(--accent); }
.corp p { margin: 0; color: rgba(238,241,239,.78); max-width: 46ch; }
.corp ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(238,241,239,.2); }
.corp li { display: flex; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(238,241,239,.2); }
.corp li b { font-weight: 600; text-transform: uppercase; }
.corp li span { color: rgba(238,241,239,.72); text-align: right; }
.corp .title { color: var(--on-dark); }
.corp .proof { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--accent); max-width: none; }
.corp .proof span + span::before { content: "·"; margin-right: 14px; color: rgba(238,241,239,.45); }
.corp .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn .soon { font-size: .65rem; padding: 3px 8px; border-radius: 999px; background: rgba(238,241,239,.14); color: var(--on-dark); }
.corp .pic { position: relative; min-height: 360px; overflow: hidden; }
.corp .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .corp { grid-template-columns: 1fr; } }

/* ====== FAQ ====== */
.faq { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(28px, 6vw, 96px); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; min-height: 64px; display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; padding: 20px 0; font-weight: 600; font-size: clamp(1rem, 1.4vw, 1.15rem); }
.faq-q .pm { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--surface); transition: transform .45s var(--ease-expo), background .3s var(--ease-out), color .3s var(--ease-out); }
.faq-q[aria-expanded="true"] .pm { transform: rotate(45deg); background: var(--accent); color: var(--ink); }
.faq-a { overflow: hidden; }
.faq-a[hidden] { display: none; }
.faq-a p { margin: 0; padding: 0 0 22px; color: var(--muted); max-width: 60ch; }
.faq-more { margin: 24px 0 0; color: var(--muted); }
.faq-more a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--accent-ink); }
.faq-more a .icon { transition: transform .45s var(--ease-expo); }
@media (hover: hover) and (pointer: fine) { .faq-more a:hover .icon { transform: translateX(4px); } }
.faq-more a:focus-visible .icon { transform: translateX(4px); }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } }

/* ====== Contact ====== */
.contact { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--g); }
.contact-info { background: var(--surface); border-radius: var(--r); padding: clamp(24px, 3vw, 40px); display: grid; gap: 26px; align-content: start; }
.contact-info div { display: grid; gap: 6px; }
.contact-info .mono { color: var(--accent-ink); }
.contact-info b { font-weight: 600; font-size: 1.05rem; }
.contact-info .wa-block { gap: 12px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.contact-info .wa-block .btn { justify-self: start; min-height: 52px; }
.contact-info .wa-note { color: var(--muted); }
@media (max-width: 560px) { .contact-info .wa-block .btn { justify-self: stretch; } }
.field .req { margin-left: 8px; color: var(--accent); }
.consent { margin: -6px 0 0; font-size: .85rem; color: rgba(238,241,239,.7); }
.plan-form { background: var(--dark); color: var(--on-dark); border-radius: var(--r); padding: clamp(24px, 3vw, 40px); display: grid; gap: 18px; }
.plan-form h3 { margin: 0; font-weight: 600; text-transform: uppercase; letter-spacing: -0.02em; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; }
.field { display: grid; gap: 6px; position: relative; }
.field label, .field .lbl { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; color: rgba(238,241,239,.7); }
.field input, .field select { width: 100%; min-height: 44px; background: transparent; border: 0; border-bottom: 1px solid rgba(238,241,239,.3); color: var(--on-dark); padding: 8px 0; outline: none; border-radius: 0; }
.field select option { color: var(--ink); }
.field::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease-expo); }
.field:focus-within::after { transform: scaleX(1); }
.field.chips-field::after { display: none; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(238,241,239,.35); font-size: .9rem; transition: background .3s var(--ease-out), color .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.chip input:checked + span { background: var(--accent); color: var(--ink); box-shadow: none; }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.form-msg { font-family: var(--mono); font-size: .75rem; color: rgba(238,241,239,.7); min-height: 1.2em; }
.form-msg.ok { color: var(--accent); }
.form-msg.err { color: #FFB4A8; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .row2 { grid-template-columns: 1fr; } }

/* ====== Journal ====== */
.journal { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); }
.post { display: grid; gap: 14px; }
.post .frame { border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 10; }
.post .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-expo); }
@media (hover: hover) and (pointer: fine) { .post:hover .frame img { transform: scale(1.05); } }
.post h3 { margin: 0; font-weight: 600; text-transform: uppercase; letter-spacing: -0.02em; font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1.05; }
.post .meta { display: flex; gap: 14px; color: var(--muted); }
.post .meta .cat { color: var(--accent-ink); }
.post .meta span + span::before { content: "•"; margin-right: 14px; color: var(--accent-ink); }
@media (max-width: 760px) { .journal { grid-template-columns: 1fr; } }

/* ====== Sticky footer reveal ====== */
main { position: relative; z-index: 2; background: var(--bg); border-radius: 0 0 var(--r) var(--r); padding-bottom: clamp(40px, 6vw, 80px); }
.footer { position: sticky; bottom: 0; z-index: 1; background: var(--dark); color: var(--on-dark); padding-top: clamp(48px, 7vw, 96px); overflow: hidden; }
.footer-cta { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: end; }
.footer-cta h2 { color: var(--on-dark); }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer-cols h4 { margin: 0 0 10px; font-family: var(--mono); font-weight: 400; font-size: .72rem; text-transform: uppercase; color: rgba(238,241,239,.6); }
.footer-cols a { display: flex; min-height: 34px; align-items: center; font-weight: 500; }
.footer-word { font-weight: 700; text-transform: uppercase; letter-spacing: -0.06em; line-height: .78; font-size: clamp(4.2rem, 21vw, 22rem); margin: clamp(28px, 4vw, 56px) 0 0; white-space: nowrap; overflow: hidden; padding-top: .06em; text-align: center; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 16px 22px; border-top: 1px solid rgba(238,241,239,.16); color: rgba(238,241,239,.7); }
.footer-bottom .clock b { color: var(--accent); font-weight: 500; }
@media (max-width: 900px) { .footer-cta { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .footer-cols { grid-template-columns: 1fr 1fr; } }

/* ====== Floating ====== */
.wa { position: fixed; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); z-index: 65; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; box-shadow: 0 12px 30px -10px rgba(18,22,20,.45); transition: scale .35s var(--ease-expo); }
/* C5: GSAP owns transform (pop-in scale); hover uses the individual scale property so the two never fight */
@media (hover: hover) and (pointer: fine) { .wa:hover { scale: 1.07; } }
.js-motion .wa { visibility: hidden; }
.proto { position: fixed; left: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); z-index: 65; background: var(--ink); color: var(--bg); border-radius: 999px; padding: 7px 12px; pointer-events: none; }

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

/* =====================================================================
   Additions (MOTION-DIRECTOR-REVIEW M/C items, MOTION-SPEC-SERVICES B–D)
   ===================================================================== */

/* ====== Page transition (B.4) ====== */
/* Path VT: cross-document View Transition on http(s) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; backface-visibility: hidden; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: vt-iris .6s cubic-bezier(.27,0,.51,1) both; }
@keyframes vt-iris {
  from { opacity: 0; clip-path: circle(0 at 50% 50%); }
  to   { opacity: 1; clip-path: circle(hypot(50vw, 50vh) at 50% 50%); }
}
/* Path GSAP: a paper overlay with a circular hole (mask), so the new page shows through the hole */
.pt-overlay { position: fixed; inset: 0; z-index: 100; background: var(--bg); pointer-events: none;
  visibility: hidden; opacity: 0; --r: 0px; --a: 1;
  -webkit-mask: radial-gradient(circle at 50% 50%, rgb(0 0 0 / var(--a)) var(--r), #000 calc(var(--r) + 1px));
          mask: radial-gradient(circle at 50% 50%, rgb(0 0 0 / var(--a)) var(--r), #000 calc(var(--r) + 1px)); }
.pt-cover .pt-overlay { visibility: visible; opacity: 1; }
.pt-overlay.is-busy { pointer-events: auto; }
/* Arrival: the iris replaces the hero's clip-inset intro, so the first frame must already be un-inset */
.pt-arrive.js-motion .hero-panel { clip-path: inset(0 round 22px); }
.pt-arrive.js-motion .hero-media { transform: scale(1.08); }

/* ====== M3: word masks keep descenders and italic tails ====== */
.sw-mask { padding: .1em .08em .16em; margin: -.1em -.08em -.16em; }

/* ====== C3: placeholder colour under images until they decode ====== */
.frame, .pic { background: var(--ph, var(--line)); }
.post .frame { background: var(--ph, var(--line)); }
.cine-frame, .corp .pic { background: var(--ph, var(--dark)); }

/* ====== C6: button micro-interactions (individual scale property: no clash with GSAP x/y) ====== */
.btn .icon { transition: transform .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .btn:hover .icon { transform: translateX(4px); } }
.btn:focus-visible .icon { transform: translateX(4px); }
.btn:active { scale: .97; }
.btn[aria-disabled="true"]:active { scale: none; }

/* ====== C7: focus-visible matches each shape and mirrors hover ====== */
.story:focus-visible, .post:focus-visible { outline: none; }
.story:focus-visible .frame, .post:focus-visible .frame { outline: 2px solid var(--accent-ink); outline-offset: 4px; }
.member:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 4px; }
.story:focus-visible .frame img { scale: 1.05 !important; }
.post:focus-visible .frame img { transform: scale(1.05); }
.btn:focus-visible .roll > span:first-child, a:focus-visible > .roll > span:first-child, .story:focus-visible .roll > span:first-child { transform: translateY(-105%); }
.btn:focus-visible .roll > span + span, a:focus-visible > .roll > span + span, .story:focus-visible .roll > span + span { transform: translateY(0); }

/* ====== Cine copy grouped in one fade group (§5.3) ====== */
.cine-more { display: grid; gap: clamp(12px, 1.6vw, 20px); }
.cine-more .btn { justify-self: start; color: var(--on-dark); }

/* ====== C9: slow parallax on the For business image ====== */
.pic-par { position: absolute; inset: -10% 0; }

/* ====== Menu: long item ("Live entertainment") may wrap instead of overflowing at 390px ====== */
.menu-links a { max-width: 100%; }
/* Mobile menu: fit the screen width, never scroll sideways. The links were width:max-content at >= 2.4rem, so "Live entertainment" stretched the whole menu to ~404px.
   The grid column is now capped at the panel width, links shrink and wrap, and the footer lines wrap too. */
.nav-shell.is-open .menu-body { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; }
.menu-links, .menu-foot, .menu-foot > * { min-width: 0; }
.menu-links a { width: auto; overflow-wrap: anywhere; }
.menu-links a small { flex: none; overflow-wrap: normal; white-space: nowrap; }   /* keep "04" on one line */
.menu-foot .mono { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .menu-links a { font-size: clamp(1.7rem, 8vw, 2.4rem); gap: 12px; }
}

/* ====== Service (detail) pages ====== */
.hero-title { display: grid; gap: 12px; min-width: 0; }
.hero-eyebrow { margin: 0; color: rgba(238,241,239,.85); display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.hero-eyebrow a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.js-motion .hero-eyebrow { visibility: hidden; }
[data-page="service"] .hero-top { grid-template-columns: minmax(0, 1fr) minmax(0, 34ch); }
[data-page="service"] .wordmark { font-size: clamp(2.5rem, 7.6vw, 9rem); line-height: .86; text-wrap: balance; overflow-wrap: normal; }
@media (max-width: 1100px) { [data-page="service"] .hero-top { grid-template-columns: 1fr; } [data-page="service"] .wordmark { font-size: clamp(2.4rem, 10vw, 9rem); } }
.inline-link, .solutions-note a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--accent-ink); }
.cine-copy p a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.solution .scope { margin: -12px 0 0; color: var(--muted); font-size: .7rem; }
.next-wrap { display: grid; gap: 14px; }
.next-card h3 { font-size: clamp(1.6rem, 3.2vw, 3rem); }
.next-all { margin-top: 18px; text-align: right; }
.field input::placeholder { color: rgba(238,241,239,.4); }

/* ====== Info pages: Journal and FAQ ====== */
.page-head { padding-top: clamp(120px, 14vw, 190px); }
.page-head .sec-head { margin-bottom: 0; }
.journal--page { row-gap: clamp(28px, 3.2vw, 48px); }
.journal--page .post:nth-child(1) { grid-column: 1 / -1; }
.journal--page .post:nth-child(1) .frame { aspect-ratio: 21 / 9; }
@media (max-width: 760px) { .journal--page .post:nth-child(1) .frame { aspect-ratio: 16 / 10; } }
.faq--page { grid-template-columns: minmax(0, 1fr); max-width: 860px; margin-inline: auto; }
.info-cta { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 18px 48px; padding: clamp(28px, 4vw, 56px); border-radius: var(--r); background: var(--dark); color: var(--on-dark); }
.info-cta .title { color: var(--on-dark); }
.info-cta .title em { color: var(--accent); }
.info-cta .side { display: grid; gap: 16px; justify-items: start; }
.info-cta p { margin: 0; color: rgba(238,241,239,.78); max-width: 44ch; }
@media (max-width: 860px) { .info-cta { grid-template-columns: 1fr; } }
/* =====================================================================
   Vintara corporate site, Phase 1 (home). Everything below extends the spike copy.
   Sources: PM-PLAN-PHASE1-HOME.md, MOTION-DIRECTION-PHASE1-HOME.md, user theme decision (7 Oct 2026).
   ===================================================================== */

/* ====== Theme: the spike's light base, with dark bands (user decision, as on spike/corporate.html) ======
   The page uses the spike's light tokens unchanged. Dark only for: hero, "Our first five" (photo band), Musical Beats band,
   CTA band + brief form, footer. `.theme-dark` remaps the tokens inside a band, from the spike's own values.
   Contrast is measured by tests/home.spec.js (body text >= 4.5:1, large text and UI >= 3:1) on both surfaces. */
.theme-dark {
  --bg: var(--dark);                       /* user decision: the footer's #26302D, not the near-black --ink, on every dark band */
  --line: rgba(238,241,239,.16);
  --muted: rgba(238,241,239,.72);
  --accent-ink: var(--accent);            /* MD 4.6: on dark, accent text, the story roll line and focus rings use --accent (--accent-ink is 2.53:1 on --dark) */
  --deep: color-mix(in srgb, var(--ink) 45%, var(--dark));   /* a step between --ink and --dark */
  color-scheme: dark;
  color: var(--on-dark);
}
.band-dark { margin: var(--space-section) var(--g) 0; padding-block: clamp(56px, 7vw, 112px); border-radius: var(--r); background: var(--dark); }
.band-dark .title { color: var(--on-dark); }
.theme-dark .btn-ink { background: var(--on-dark); color: var(--ink); }
.theme-dark .plan-form { background: color-mix(in srgb, var(--on-dark) 6%, var(--dark)); box-shadow: inset 0 0 0 1px var(--line); }   /* the form card was --dark on a --ink band; both are --dark now, so lift it a step */
.theme-dark .contact-info { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.theme-dark .field select option { color: var(--on-dark); background: var(--dark); }
/* the dark "hi" solution card sits on the light page: accent text and focus there use --accent */
.solution.hi .tailor .mono, 
/* ====== Credentials teaser on light: the .corp band layout on the light surface (user decision) ====== */
.corp.corp-light { background: var(--surface); color: var(--ink); }
.corp.corp-light .eyebrow, .corp.corp-light .title em { color: var(--accent-ink); }
.corp.corp-light .title { color: var(--ink); }
.corp.corp-light p, .corp.corp-light li span { color: var(--muted); }
.corp.corp-light ul, .corp.corp-light li { border-color: var(--line); }
.corp.corp-light .btn .soon { background: var(--bg); color: var(--ink); }

/* ====== Focus: accent everywhere on dark; a dark halo over photos and video (MD 4.6) ====== */
.hero :focus-visible, .cine-frame :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(18,22,20,.7); }
main:focus, [tabindex="-1"]:focus { outline: none; }

/* ====== Skip link (skill §7, MD 4.6): first element in <body>, outside the gated nav ====== */
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 120; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--accent); color: var(--ink); font-weight: 600; transform: translateY(calc(-100% - 24px)); }
.skip-link:focus, .skip-link:focus-visible { transform: none; outline: 2px solid var(--on-dark); outline-offset: 3px; }

/* ====== Logo lockup (no registered-mark sup: PM §0) ====== */
.logo { align-items: center; min-height: 44px; }
.logo-sub { font-size: .62rem; font-weight: 400; color: var(--muted); margin-left: 8px; letter-spacing: .04em; }
@media (max-width: 560px) { .logo-sub { display: none; } }

/* ====== Hero: sentence H1 + three action tiles ====== */
.wordmark.is-line { font-size: clamp(2.5rem, 7.6vw, 9rem); line-height: .86; text-wrap: balance; overflow-wrap: normal; }   /* = [data-page="service"] .wordmark */
.wordmark em { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -0.01em; color: var(--accent); }
[data-page="home"] .hero-top { grid-template-columns: minmax(0, 1fr) minmax(0, 34ch); }
@media (max-width: 1100px) {
  [data-page="home"] .hero-top { grid-template-columns: 1fr; }
  [data-page="home"] .hero-blurb { order: 0; }   /* reading order = DOM order: eyebrow, H1, then the sub-line */
  .wordmark.is-line { font-size: clamp(2.4rem, 10vw, 9rem); }
}
.hero-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding-top: 0; }
.tile { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tn b ta" "tn ts ta"; column-gap: 14px; row-gap: 3px; align-items: center; min-height: 64px; padding: 14px 14px 14px 4px; color: var(--on-dark); border-radius: 12px; transition: background-color .35s var(--ease-out), scale .2s var(--ease-out); }
.tile + .tile { padding-left: 18px; }
.tile + .tile::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: rgba(238,241,239,.25); }
.tile .tn { grid-area: tn; align-self: start; padding-top: 4px; color: var(--accent); }
.tile b { grid-area: b; font-weight: 600; font-size: clamp(1rem, 1.25vw, 1.15rem); letter-spacing: -0.01em; line-height: 1.2; }
.tile .ts { grid-area: ts; font-size: .68rem; color: rgba(238,241,239,.8); }
.tile .ta { grid-area: ta; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(238,241,239,.3); transition: background-color .35s var(--ease-out), color .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.tile .ta .icon { transform: rotate(-45deg); transition: transform .45s var(--ease-expo); }
.tile:focus-visible { background: rgba(18,22,20,.6); }
.tile:focus-visible .ta { background: var(--accent); color: var(--ink); box-shadow: none; }
.tile:focus-visible .ta .icon { transform: rotate(0deg) translateX(2px); }
@media (hover: hover) and (pointer: fine) {
  .tile:hover { background: rgba(18,22,20,.6); }
  .tile:hover .ta { background: var(--accent); color: var(--ink); box-shadow: none; }
  .tile:hover .ta .icon { transform: rotate(0deg) translateX(2px); }
}
.tile:active { scale: .97; }
@media (max-width: 760px) {   /* PM: three glass pills, title only; the third tile never hides */
  .hero-tiles { display: flex; flex-wrap: wrap; gap: 8px; border-top: 0; }
  .tile, .tile + .tile { grid-template-columns: auto auto; grid-template-areas: "b ta"; min-height: 48px; padding: 4px 4px 4px 16px; border-radius: 999px; background: rgba(18,22,20,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(238,241,239,.3); }
  .tile + .tile::before, .tile .tn, .tile .ts { display: none; }
  .tile b { font-size: .95rem; }
  .tile .ta { width: 40px; height: 40px; box-shadow: none; }
}
/* MD 2.5: below 1024 px the panel grows to fit its content, which flows from the top under the nav */
@media (max-width: 1023.98px) {
  [data-page="home"] .hero-panel { height: auto; min-height: calc(100vh - 2 * var(--g)); min-height: calc(100svh - 2 * var(--g)); display: flex; flex-direction: column; justify-content: flex-end; }
  [data-page="home"] .hero-content { position: relative; inset: auto; padding-top: 140px; }
}

/* ====== Proof strip (venues strip pattern, stat-size figures from .scard .n) ====== */
.venues.proof-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proof-strip .venue { min-width: 0; }
.proof-strip .venue b { font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-size: clamp(1.7rem, 3.6vw, 3.4rem); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 1024px) {
  .venues.proof-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-strip .venue:nth-child(odd) { border-left: 0; }
  .proof-strip .venue:nth-child(even) { border-left: 1px solid var(--line); }
  .proof-strip .venue:nth-child(-n+2) { border-top: 0; }
  .proof-strip .venue:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ====== Goals rows: the goal column reuses the plan-row price slot (no "price" class in the markup) ====== */
.plan-row .goal { grid-area: price; display: grid; gap: 6px; justify-items: end; text-align: right; }
.plan-row .goal .gl { color: var(--accent-ink); font-size: .82rem; }
.plan-row .goal small { display: block; max-width: 28ch; color: var(--muted); font-size: .85rem; line-height: 1.4; transition: color .35s var(--ease-out); }
@media (max-width: 760px) { .plan-row .goal { justify-items: start; text-align: left; align-self: center; margin-top: 10px; } }

/* ====== Our first five: text-only cards with marked photo slots ====== */
/* Story hover = the spike's (title roll to the accent line + photo zoom), fine pointers only; focus-visible mirrors it (C7).
   Reduced motion: no roll and no zoom, the title simply changes colour. The incoming line is --accent-ink (spike rule): on light
   that is #1A7A41, inside a .theme-dark band it resolves to --accent. */
@media (prefers-reduced-motion: reduce) {
  .roll > span + span { display: none; }
  .btn:hover .roll > span:first-child, a:hover > .roll > span:first-child, .story:hover .roll > span:first-child,
  .btn:focus-visible .roll > span:first-child, a:focus-visible > .roll > span:first-child, .story:focus-visible .roll > span:first-child { transform: none; }
  .story:hover h3 .roll > span:first-child, .story:focus-visible h3 .roll > span:first-child { color: var(--accent-ink); }
  .story:hover .frame img, .story:focus-visible .frame img { scale: none !important; }
}
/* Phones and tablets: no hover, so the card nearest the middle of the screen (.is-centred, set in JS) rolls its title to the accent
   line, the same flip the fine-pointer hover gives. Only added under prefers-reduced-motion: no-preference. */
.story.is-centred h3 .roll > span:first-child { transform: translateY(-105%); }
.story.is-centred h3 .roll > span + span { transform: translateY(0); }
/* Stock stand-ins carry a visible label so nobody mistakes them for our work (user request, Phase 1 review build) */
.story .tag.tag-sample { left: auto; right: 14px; background: rgba(18,22,20,.72); color: var(--on-dark); box-shadow: inset 0 0 0 1px rgba(238,241,239,.3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.frame .ph-note { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 80%; text-align: center; font-size: .72rem; color: rgba(238,241,239,.7); }
.story .outcome { margin: 10px 0 0; color: var(--muted); font-size: .98rem; max-width: 52ch; }
.theme-dark .story-more { background: color-mix(in srgb, var(--on-dark) 6%, var(--dark)); box-shadow: inset 0 0 0 1px var(--line); }

/* ====== Musical Beats band ====== */
.cine-title em { white-space: nowrap; }   /* keep "in-house" on one line */
.plan-more .sep { margin-inline: 4px; }
@media (max-width: 560px) { .plan-more .sep { display: none; } .plan-more a { margin-right: 14px; } }
.cine-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cine-actions .pill[aria-disabled="true"] { cursor: not-allowed; opacity: .8; box-shadow: inset 0 0 0 1px rgba(238,241,239,.22); }

/* ====== Credentials teaser: two text columns, the facts on a deeper panel ====== */
.corp.creds { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
@media (max-width: 900px) { .corp.creds { grid-template-columns: 1fr; } }

/* ====== Team gallery: the spike's expanding gallery, unchanged (block above). Phase 1 additions only ====== */
.team-row .member .info { z-index: 1; }   /* the name panel keeps the spike's translucent light background and colours; z-index only */
.member .soon-badge { justify-self: start; margin-top: 4px; padding: 4px 8px; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px rgba(18,22,20,.35); color: var(--ink); font-size: .62rem; }   /* sample-photo chip, in the panel's own ink on light */
.member.is-active .info > :nth-child(4) { --d: .32s; }   /* the chip joins the info stagger */

/* ====== Short brief form (PM §6) ====== */
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.chips-field legend { padding: 0; margin-bottom: 8px; }
.brief-form .form-intro { margin: -6px 0 0; color: rgba(238,241,239,.78); }
.field-err { margin: 0; min-height: 1.35em; font-size: .82rem; line-height: 1.35; color: #FFB4A8; }   /* reserved line: no jump when an error appears (MD 4.7) */
.field-hint, .field-warn { margin: 0; font-size: .82rem; line-height: 1.4; color: rgba(238,241,239,.72); }
.field-warn { color: var(--on-dark); }
.field-warn:empty { display: none; }
.field [aria-invalid="true"] { border-bottom-color: #FFB4A8; }
.chips-field[aria-invalid="true"] .chip span { box-shadow: inset 0 0 0 1px #FFB4A8; }
.field.check { grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.field.check::after { display: none; }
.field.check input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; padding: 0; border: 0; accent-color: var(--accent); }
.field.check label { font-family: var(--font); font-size: .92rem; line-height: 1.5; text-transform: none; color: rgba(238,241,239,.85); }
.field.check label a { display: inline-block; padding-block: 10px; margin-block: -10px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.field.check .field-err { grid-column: 2; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin: 0; padding: 12px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--accent); color: rgba(238,241,239,.85); font-size: .74rem; line-height: 1.55; text-transform: none; }
.form-msg.demo { color: var(--on-dark); line-height: 1.55; text-transform: none; }
.brief-form button[type="submit"] { justify-self: start; }
.contact-info .btn { justify-self: start; }
@media (max-width: 520px) { .brief-form button[type="submit"] { justify-self: stretch; } }

/* ====== Footer (skill 4.11) ====== */
.footer-cta h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -0.01em; color: var(--accent); }
.footer-lead { display: grid; gap: 22px; justify-items: start; }
.footer-line { margin: 0; max-width: 46ch; color: rgba(238,241,239,.78); }
.footer-line b { color: var(--on-dark); font-weight: 600; }
.footer-cols .fh { margin: 0 0 10px; font-family: var(--mono); font-weight: 400; font-size: .72rem; letter-spacing: .02em; text-transform: uppercase; color: rgba(238,241,239,.6); }
.footer-cols .fc { display: flex; align-items: center; min-height: 34px; color: rgba(238,241,239,.78); font-size: .95rem; }
.footer-bottom .legal { display: flex; gap: 18px; }
.footer-bottom .legal a { display: inline-flex; align-items: center; }

/* Phones: the footer must be no taller than the screen for the sticky curtain reveal to run (initFooter's guard turns it off otherwise).
   The spike's phone footer is ~650 px; ours had more links, so on phones the Explore and Buyers columns sit side by side, the Contact items
   run in one wrapped row beneath, and the "coming soon" placeholder lines are hidden (the email stays; the rest live on the contact page). */
@media (max-width: 560px) {
  .footer-cols a, .footer-cols .fc { min-height: 30px; }
  .footer-cols > div:last-child { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
  .footer-cols > div:last-child .fh { flex-basis: 100%; }
  .footer-cols .fc ~ .fc { display: none; }
  .footer-bottom { padding-block: 12px 14px; gap: 4px 16px; }
}

/* ====== "What we plan" goal chapters (Engage / Reward / Grow / Align) ======
   The six rows are grouped under the four goals from the brand rules. The goal name now appears once per chapter
   instead of repeating on every row; each row keeps its own one-line outcome. Desktop: the label sticks beside its
   rows and a thin rail fills as you scroll the chapter. Phones: the row becomes a card with a real 16:9 image that
   uses the existing [data-reveal] wipe. The cursor-following preview on >= 1100px is untouched. */
.plan-chapter { position: relative; }
.plan-chapter .gl { margin: 0; font-family: var(--mono); font-weight: 400; font-size: .78rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent-ink); }
.chapter-rail { display: block; background: var(--line); border-radius: 2px; overflow: hidden; }
.chapter-rail i { display: block; width: 100%; height: 100%; background: var(--accent-ink); transform-origin: 50% 0; }
@media (min-width: 961px) {
  .plan-group { display: grid; grid-template-columns: clamp(80px, 7.4vw, 108px) minmax(0, 1fr); column-gap: clamp(12px, 1.2vw, 18px); }
  /* the chapter column takes width from the row, so ease the title down a step and trim the outcome column to keep titles short */
  .plan-group .plan-row .t { font-size: clamp(1.7rem, 2.7vw, 2.6rem); }
  .plan-chapter { grid-column: 1; grid-row: 1 / -1; padding-top: clamp(20px, 2.4vw, 32px); }
  .plan-group .plan-row { grid-column: 2; }
  .plan-chapter .gl { position: sticky; top: 104px; padding-left: 16px; }
  .chapter-rail { position: absolute; left: 0; top: clamp(20px, 2.4vw, 32px); bottom: clamp(20px, 2.4vw, 32px); width: 2px; }
  .chapter-rail i { transform: scaleY(0); }
}
@media (max-width: 960px) {
  .plan-chapter { display: flex; align-items: center; gap: 10px; padding: clamp(18px, 3vw, 26px) 0 2px; }
  .chapter-rail { width: 26px; height: 2px; flex: none; }
  .chapter-rail i { transform: none; }
}
/* Phones: a real card. The 64px thumbnail becomes a full-width 16:9 image above the title. */
@media (max-width: 760px) {
  .plan-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "thumb thumb" "n n" "txt txt" "price go";
    column-gap: 14px; row-gap: 6px; align-items: start; padding: 16px 0 22px; }
  .plan-row .thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 14px; margin-bottom: 6px; }
  .plan-row .t { font-size: clamp(1.55rem, 6.6vw, 2.1rem); }
  .plan-row .goal { justify-items: start; text-align: left; align-self: center; margin-top: 8px; }
  .plan-row .go { align-self: end; margin-top: 8px; }
}
/* ====== "In their own words" marquee on phones ======
   Desktop is unchanged. On a phone a 380px card filled almost the whole screen, so only one card and two slivers were
   ever visible and the movement did not read. The cards shrink so a whole quote plus the edge of the next card fit,
   the edge fade is lighter and the tiles are shorter. The track's padding-right must stay equal to its gap, or the
   -50% loop no longer lands on the seam. */
@media (max-width: 760px) {
  .marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
  .marquee + .marquee { margin-top: 10px; }
  .track { gap: 10px; padding-right: 10px; }
  .tcard { width: 68vw; max-width: 290px; padding: 16px; gap: 12px; border-radius: 14px; }
  .tcard q { font-size: .92rem; line-height: 1.45; }
  .tcard .who { gap: 10px; }
  .tcard .av { width: 34px; height: 34px; font-size: .88rem; }
  .tcard .who b { font-size: .9rem; }
  .tcard .who span { font-size: .76rem; }
  .scard { width: 44vw; max-width: 190px; padding: 16px; border-radius: 14px; gap: 6px; }
  .scard .n { font-size: 2.1rem; }
  .scard p { font-size: .8rem; line-height: 1.35; }
}
/* Phones: the card nearest the middle of the screen is the "centred" one and its title takes the accent, the way a
   hovered row does on desktop. initPlanList keeps the class on exactly one card at a time. */
/* The centred card's title changes colour with the site's existing roll flip: the black line rolls up and an accent
   copy rolls in behind it. The roll is inside the heading, not a direct child of the <a>, so the generic
   "a:hover > .roll" rule never fires here and desktop hover is untouched. */
.plan-row .t .roll { display: block; line-height: inherit; }
.plan-row .t .roll > span + span { color: var(--accent-ink); }
/* a touch slower than the shared .roll so the travel reads at heading size */
.plan-row .t .roll > span { transition: transform .55s var(--ease-expo); }
/* phones: the centred card flips. Desktop and keyboard: hover and focus flip, like the rest of the site. */
.plan-row.is-centred .t .roll > span:first-child,
.plan-row:focus-visible .t .roll > span:first-child { transform: translateY(-105%); }
.plan-row.is-centred .t .roll > span + span,
.plan-row:focus-visible .t .roll > span + span { transform: translateY(0); }
@media (hover: hover) and (pointer: fine) {
  .plan-row:hover .t .roll > span:first-child { transform: translateY(-105%); }
  .plan-row:hover .t .roll > span + span { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .plan-row .t .roll > span { transition: none; } }
/* ====== Concept panels: Engage / Reward / Grow / Align ======
   Each concept is one bounded panel holding its chapter label, its images and their content, so a visitor reads the
   two cards as one idea rather than four loose rows. A slow accent beam traces the panel edge while it is on screen
   (initPlanList builds the SVG). Dividers inside a panel are lighter than the gap between panels, so the hierarchy
   reads: panel first, rows second. */
.plan-group { position: relative; background: var(--bg); border-radius: var(--r);   /* the page colour: the panel is defined by its outline, not by a lighter fill */
  box-shadow: inset 0 0 0 1px var(--line); padding: clamp(10px, 1.4vw, 20px) clamp(14px, 1.8vw, 26px); }
.plan-group .plan-row { border-bottom: 1px solid color-mix(in srgb, var(--ink) 13%, transparent); }
.plan-group .plan-row:last-of-type { border-bottom: 0; }
.plan-group .plan-row { padding-block: clamp(24px, 3vw, 40px); }   /* more air between the two images in a concept */
.beam { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; }
.beam svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.beam rect { fill: none; stroke-linecap: round; }   /* stroke is a per-panel mint-to-emerald gradient, set in initPlanList */
/* the settled border: delicate, with only a very faint halo (recipe glow rgba(52,194,106,.16)).
   Both layers have a CSS default so that with JS off or reduced motion the border simply shows and no highlight does. */
.beam-base { opacity: .9; filter: drop-shadow(0 0 3px rgba(52, 194, 106, .16)); }
.beam-base rect { stroke-width: 1.5; }
/* the travelling highlight: brighter and slightly thicker, glowing only while it moves; hidden at rest */
.beam-hl { opacity: 0; filter: drop-shadow(0 0 4px rgba(52, 194, 106, .38)) drop-shadow(0 0 12px rgba(52, 194, 106, .22)); }
.beam-hl rect { stroke-width: 2.5; }/* reduced motion keeps the finished outline, drawn instantly by initPlanList */
@media (max-width: 760px) {
  .plan-group { padding: clamp(8px, 2.6vw, 14px) clamp(12px, 3.4vw, 16px); }
  .plan-group .plan-row { padding-block: clamp(18px, 4vw, 26px); }
}
/* ====== Company-size cards: the same panel language as the concept panels above ======
   No card is "featured": a highlighted middle card reads as a pricing table's most-popular plan, which is the one
   thing the brand rules forbid. The outline draws as each card arrives, and on phones the centred card's heading
   flips to the accent, exactly as the concept rows do. */
.solution { position: relative; box-shadow: inset 0 0 0 1px var(--line); }
@media (hover: hover) and (pointer: fine) {
  .solution:hover { box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -28px rgba(18, 22, 20, .35); }
}
.solution:has(:focus-visible) { box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -28px rgba(18, 22, 20, .35); }
.solution h3 .roll { display: block; line-height: inherit; }
.solution h3 .roll > span { transition: transform .55s var(--ease-expo); }
.solution h3 .roll > span + span { color: var(--accent-ink); }
.solution.is-centred h3 .roll > span:first-child { transform: translateY(-105%); }
.solution.is-centred h3 .roll > span + span { transform: translateY(0); }
@media (hover: hover) and (pointer: fine) {
  .solution:hover h3 .roll > span:first-child { transform: translateY(-105%); }
  .solution:hover h3 .roll > span + span { transform: translateY(0); }
}
.solution .facing-label { margin: 0; border-top: 1px solid var(--line); padding-top: 18px; color: var(--accent-ink); }
.solutions-cta { display: flex; justify-content: center; margin-top: clamp(20px, 2.6vw, 32px); }
@media (prefers-reduced-motion: reduce) { .solution h3 .roll > span { transition: none; } }
/* ====== Enquiry form: one spacious column on desktop, a guided walk-through on phones ======
   Same fields, labels and validation in both; stepping only decides what is on screen. */
.brief-form .fstep { display: grid; gap: clamp(18px, 2.2vw, 26px); }
.fprog { display: none; }
.brief-form.is-stepped .fprog { display: grid; gap: 8px; }
.fprog-bar { display: block; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.fprog-bar i { display: block; height: 100%; width: 100%; border-radius: 3px; background: var(--accent);
  transform: scaleX(.33); transform-origin: 0 50%; transition: transform .5s var(--ease-expo); }
.fprog-label { color: var(--muted); font-size: .72rem; letter-spacing: .02em; }
.fnav { display: flex; gap: 10px; align-items: center; }
.fnav .btn { flex: 1 1 auto; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .fprog-bar i { transition: none; } }

/* Desktop polish: a calmer rhythm and a clearer focus ring on the dark card */
.brief-form .field label, .brief-form .lbl { letter-spacing: .02em; }
.brief-form input:focus-visible, .brief-form select:focus-visible, .brief-form textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.brief-form .chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Phones: bigger targets, one field per line, roomier chips */
@media (max-width: 760px) {
  .brief-form .row2 { grid-template-columns: 1fr; }
  .brief-form .chip span { min-height: 48px; display: inline-flex; align-items: center; padding: 10px 16px; }
  .brief-form .fnav .btn { min-height: 52px; }
  .brief-form button[type="submit"] { width: 100%; justify-content: center; min-height: 52px; }
  .brief-form .fstep { gap: 20px; }
}
/* [hidden] must win over the display rules above, or a hidden step/button still paints */
.brief-form .fstep[hidden], .fnav[hidden], .fprog[hidden], .brief-form .btn[hidden] { display: none !important; }
/* ====== Enquiry section, desktop refinements ======
   The wide layout keeps every field on screen, but borrows the guided form's structure: the same three groups,
   numbered and ruled, so the eye reads "about you / your event / consent" instead of one long stack of inputs. */
.brief-form .fstep-head { display: flex; align-items: baseline; gap: 12px; margin: 0;
  border-top: 1px solid var(--line); padding-top: clamp(16px, 1.8vw, 24px); }
.brief-form .fstep:first-of-type .fstep-head { border-top: 0; padding-top: 0; }
.brief-form .fstep-n { color: var(--accent); }
.brief-form .fstep-head .mono:last-child { color: rgba(238, 241, 239, .78); letter-spacing: .04em; }
.brief-form.is-stepped .fstep-head { display: none; }   /* the progress label already names the step on phones */
.brief-form .fstep { gap: clamp(18px, 2vw, 24px); }
.plan-form { gap: clamp(20px, 2.4vw, 30px); }

/* Two fields on a line must sit on the same baseline: a hint under one of them was stretching its neighbour's input */
.row2 { align-items: start; }

/* Consent reads as a decision, not fine print; the send button gets room and weight */
.brief-form .field.check { padding: 16px 18px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.brief-form button[type="submit"] { justify-self: start; min-height: 54px; padding-inline: 30px; }

/* The contact card keeps pace with the form instead of leaving a long empty tail */
@media (min-width: 901px) {
  .contact { align-items: start; }
  .contact-info { position: sticky; top: 104px; }
}
/* While the guided form is the section in view on a phone, the fixed nav tucks away so the card can use the whole
   screen and Back/Continue never fall below the fold. It returns as soon as you scroll out of the form. */
.nav.is-tucked .nav-shell { pointer-events: none; }   /* the fade itself is GSAP's: the hero intro leaves an inline opacity that a stylesheet cannot override */

/* The card header sits on the palette's pale green so the title and headcount read as their own band.
   No overflow:hidden on the card: that would clip the outline beam's glow, so the band carries its own top radius. */
.sol-head { margin: 0 calc(-1 * var(--solpad)); padding: var(--solpad); background: color-mix(in srgb, var(--accent) 12%, var(--tint));
  border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0; display: grid; gap: 8px; }
.sol-head .scope { margin: 0; color: var(--muted); }
.sol-head + .facing-label { border-top: 0; padding-top: 0; }   /* the band already separates the header */
/* ====== One card is the active one at a time ======
   The middle card is active on load; hovering or tabbing into another hands the state over, and leaving the group
   returns it to the middle. Only ever one card carries it, so it reads as a pointer following the cursor rather
   than a "recommended plan". Touch screens use .is-centred instead (see initSolutions). */
@media (hover: hover) and (pointer: fine) {
  .solution.is-active { transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -28px rgba(18, 22, 20, .35); }
  .solution.is-active h3 .roll > span:first-child { transform: translateY(-105%); }
  .solution.is-active h3 .roll > span + span { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .solution, .solution.is-active { transform: none; transition: box-shadow .2s linear; } }
/* ====== Autofill on the dark form card ======
   Chrome paints an autofilled or suggestion-highlighted field with its own near-white background and dark text, which
   is why a field turned white the moment it was focused on a phone with saved contact details. The background cannot
   be set directly, so it is covered with a large inset shadow in the card's own colour; the long transition stops the
   white flashing before that paints. --field-fill tracks whichever surface the form sits on. */
.plan-form { --field-fill: var(--dark); }
.theme-dark .plan-form { --field-fill: color-mix(in srgb, var(--on-dark) 6%, var(--dark)); }
.plan-form input:-webkit-autofill,
.plan-form input:-webkit-autofill:hover,
.plan-form input:-webkit-autofill:focus,
.plan-form input:-webkit-autofill:active,
.plan-form select:-webkit-autofill,
.plan-form textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--on-dark);
  caret-color: var(--on-dark);
  -webkit-box-shadow: 0 0 0 100px var(--field-fill) inset;
  box-shadow: 0 0 0 100px var(--field-fill) inset;
  border-radius: 0;
  transition: background-color 99999s 0s, color 99999s 0s;
}
.plan-form input:autofill, .plan-form select:autofill, .plan-form textarea:autofill {
  -webkit-text-fill-color: var(--on-dark);
  box-shadow: 0 0 0 100px var(--field-fill) inset;
}
/* ====== Company-size cards: restraint ======
   Premium here is quiet. Green is reserved for one thing per card - the active title - so the labels, the list index
   and the headcount all sit in the muted ink. The list is numbered and ruled so it reads as a specification, and the
   rhythm comes from spacing and hairlines rather than from size or colour. */
.sol-head { gap: 7px; padding-block: clamp(14px, 1.5vw, 19px); }   /* a shallower band in a deeper green */
.sol-head .scope { margin: 0; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.solution .facing-label { color: var(--muted); font-size: .68rem; letter-spacing: .08em; }
.sol-list { display: grid; gap: 0; }
.sol-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: baseline;
  padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); font-size: .95rem; line-height: 1.55; }
.sol-list li:first-child { border-top: 0; padding-top: 2px; }
.sol-list li:last-child { padding-bottom: 0; }
.sol-list .li-n { color: color-mix(in srgb, var(--ink) 38%, transparent); font-size: .66rem; letter-spacing: .04em; }
.solution .tailor { padding-top: clamp(16px, 1.8vw, 22px); border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.solution .tailor .mono { color: var(--muted); font-size: .68rem; letter-spacing: .08em; }
.solution { gap: clamp(18px, 2vw, 24px); }
/* ====== /brief page and the shared enquiry states (api/brief) ======
   Appended block: only what the full brief page and the success / error states need, from existing tokens. */
.brief-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: 0 0 clamp(14px, 2vw, 22px); color: var(--muted); }
.brief-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.brief-crumbs [aria-current] { display: inline-flex; align-items: center; min-height: 44px; }
.brief-page-head { padding-top: clamp(112px, 12vw, 168px); }
.brief-page-head .title-xl { font-size: clamp(2.4rem, 5.6vw, 5rem); }
.brief-page .contact { margin-top: 0; }
.brief-next { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: bn; }
.brief-next li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: baseline; counter-increment: bn; font-size: .95rem; line-height: 1.5; }
.brief-next li::before { content: "0" counter(bn); font-family: var(--mono); font-size: .68rem; color: var(--accent-ink); }
.field .opt { margin-left: 8px; color: rgba(238, 241, 239, .6); text-transform: none; letter-spacing: 0; }   /* "Optional" sits quieter than "Required" */
.field textarea { width: 100%; min-height: 112px; resize: vertical; background: transparent; border: 0; border-bottom: 1px solid rgba(238, 241, 239, .3); color: var(--on-dark); padding: 8px 0; outline: none; border-radius: 0; line-height: 1.5; }
.field textarea::placeholder { color: rgba(238, 241, 239, .4); }
.field [aria-invalid="true"] { border-bottom-color: #FFB4A8; }
.field input[type="month"] { color-scheme: dark; min-height: 44px; }
.field.is-flex input[type="month"] { opacity: .45; }
.brief-form .field.check.check-inline { padding: 0; box-shadow: none; border-radius: 0; margin-top: -6px; }
.brief-form .field.check.check-inline label { font-size: .9rem; }
.brief-form .field.check.check-inline input { min-height: 0; }
.brief-form .form-msg b, .brief-form .form-note b { color: var(--on-dark); font-weight: 600; }
.brief-form button[type="submit"].is-sending { cursor: progress; }
.brief-form .btn:disabled { opacity: .6; }
/* success panel (built by initBrief): replaces the form fields inside the same dark card */
.brief-form.is-done > :not(.brief-done) { display: none !important; }
.brief-done { display: grid; gap: 16px; justify-items: start; outline: none; padding-block: clamp(8px, 2vw, 24px); }
.brief-done h3 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.brief-done p { margin: 0; max-width: 46ch; color: rgba(238, 241, 239, .85); }
.brief-done-eyebrow { color: var(--accent); }
.brief-done-sum { font-weight: 600; color: var(--on-dark) !important; }
.brief-ref { color: rgba(238, 241, 239, .75) !important; }
.brief-ref b { color: var(--accent); font-weight: 500; letter-spacing: .06em; }
.brief-done .btn { margin-top: 6px; }
.brief-noscript { margin: 0; padding: 12px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px #FFB4A8; color: var(--on-dark); font-size: .9rem; }.plan-form .form-title { margin: 0; font-weight: 600; text-transform: uppercase; letter-spacing: -0.02em; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; }
.brief-page .brief-form-sec { margin-top: clamp(28px, 3.4vw, 48px); }

/* =====================================================================
   Services pages (/services/*), block 1 of 2: the emphasised plan panel and the "where it slips" ledger.
   Appended for the Offsites pilot (reviews/DESIGNER-NOTES-SERVICES.md). Existing components are not restyled:
   every rule below is new, scoped to new class names, and built from the tokens above and the .sol-list rows.
   ===================================================================== */
.plan-panel { position: relative; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); padding: clamp(22px, 3.4vw, 48px); display: grid; gap: clamp(20px, 2.6vw, 34px); }
.plan-panel .panel-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-areas: "eb eb" "ti le"; gap: 14px 48px; align-items: end; }
.plan-panel .panel-head .eyebrow { grid-area: eb; }
.plan-panel .panel-head .title { grid-area: ti; }
.plan-panel .panel-head .lede { grid-area: le; max-width: 44ch; }
@media (max-width: 860px) { .plan-panel .panel-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eb" "ti" "le"; } }
.plan-items { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 5vw, 80px); }
.plan-items li { font-size: 1rem; }
.plan-items li:nth-child(2) { border-top: 0; padding-top: 2px; }
.plan-items li:nth-last-child(-n+2) { padding-bottom: 0; }
.plan-items .pi-t { display: block; margin-bottom: 2px; font-weight: 600; color: var(--ink); }
.plan-items li > span:last-child { color: var(--muted); }
.plan-note { margin: 0; padding-top: clamp(14px, 1.8vw, 22px); border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); max-width: 72ch; color: var(--muted); }
@media (max-width: 760px) {
  .plan-items { grid-template-columns: minmax(0, 1fr); }
  .plan-items li:nth-child(2) { border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); padding-top: 14px; }
  .plan-items li:nth-last-child(2) { padding-bottom: 14px; }
}
/* the slip-and-prevent ledger: number | where it slips | what we do (stacked on phones) */
.slip { background: var(--surface); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); padding: clamp(4px, 0.8vw, 10px) clamp(18px, 2.6vw, 36px); }
.slip-list { list-style: none; margin: 0; padding: 0; }
.slip-head, .slip-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1.35fr); column-gap: clamp(14px, 2.4vw, 36px); }
.slip-head { padding: 18px 0 12px; color: var(--muted); border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.slip-head span:first-child { grid-column: 2; }
.slip-row { padding: clamp(18px, 2vw, 26px) 0; border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); align-items: baseline; }
.slip-row:first-child { border-top: 0; }
.slip-row p { margin: 0; line-height: 1.55; }
.slip-row .li-n { color: color-mix(in srgb, var(--ink) 38%, transparent); font-size: .66rem; letter-spacing: .04em; }
.slip-a p { font-weight: 600; letter-spacing: -0.01em; }
.slip-b { border-left: 2px solid var(--accent); padding-left: clamp(14px, 1.8vw, 22px); }
.slip-b p { color: var(--muted); }
.slip-k { display: block; margin-bottom: 6px; color: var(--muted); font-size: .66rem; letter-spacing: .08em; }
@media (min-width: 861px) { .slip-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (max-width: 860px) {
  .slip-head { display: none; }
  .slip-row { grid-template-columns: 22px minmax(0, 1fr); row-gap: 12px; }
  .slip-a, .slip-b { grid-column: 2; }
}
/* shared page furniture: format pills, the "to confirm" marks (pre-launch only), the sample label, hero fit on small screens */
.fmt-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fmt-pills li { padding: 10px 14px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .02em; }
.facts { display: grid; gap: 8px; margin: 0; }
.facts p { margin: 0; color: var(--muted); }
.confirm { text-decoration: underline dotted; text-decoration-color: var(--accent-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.confirm-id { margin-left: 6px; padding: 2px 6px; border-radius: 999px; background: var(--tint); color: var(--muted); font-size: .6rem; letter-spacing: .04em; vertical-align: 1px; white-space: nowrap; }
.sample-tag { display: inline-flex; align-items: center; justify-self: start; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent); color: var(--ink); font-size: .68rem; letter-spacing: .06em; }
.sec-head .lead .sample-tag { margin-top: 2px; }
.related { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; }
[data-page="service"] .hero-eyebrow { text-transform: uppercase; }
[data-page="service"] .hero-eyebrow a { color: var(--on-dark); }   /* breadcrumb links stay readable over any photo; the underline marks them as links */
@media (max-width: 1100px) { [data-page="service"] .hero-blurb { order: 0; } }   /* reading order = DOM order: breadcrumb, H1, then the sub-line */
/* Reduced motion: the roll's second line is hidden, so the first line must never be rolled away (it blanked the active size card's title) */
@media (prefers-reduced-motion: reduce) { .roll > span:first-child { transform: none !important; } }
@media (max-width: 1023.98px) {
  [data-page="service"] .hero-panel { height: auto; min-height: calc(100vh - 2 * var(--g)); min-height: calc(100svh - 2 * var(--g)); display: flex; flex-direction: column; justify-content: flex-end; }
  [data-page="service"] .hero-content { position: relative; inset: auto; padding-top: 140px; }
}

/* =====================================================================
   Services pages (/services/*), block 2 of 2: the sample run-of-show timeline and the sample artefacts
   (readiness checklist, responsibility matrix). Rows reuse the .sol-list rhythm (hairline rules, mono index).
   ===================================================================== */
.ros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); }
.ros-day, .sample-card { background: var(--surface); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); padding: clamp(20px, 2.6vw, 32px); display: grid; gap: 18px; align-content: start; }
.ros-day h3, .sample-card h3 { margin: 0; font-weight: 600; text-transform: uppercase; letter-spacing: -0.02em; font-size: 1.3rem; }
.ros-list { list-style: none; margin: 0; padding: 0; }
.ros-list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); font-size: .95rem; line-height: 1.55; }
.ros-list li:first-child { border-top: 0; padding-top: 0; }
.ros-list li:last-child { padding-bottom: 0; }
.ros-list time { color: var(--accent-ink); font-family: var(--mono); font-size: .8rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.ros-foot { margin: clamp(16px, 2vw, 24px) 0 0; max-width: 72ch; color: var(--muted); }
.sample-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); align-items: start; }
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 14px; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); font-size: .95rem; line-height: 1.5; }
.check-list li:first-child { border-top: 0; padding-top: 0; }
.check-list li::before { content: ""; width: 16px; height: 16px; margin-top: 3px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 45%, transparent); }
.matrix { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.5; }
.matrix th, .matrix td { padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); text-align: left; vertical-align: top; }
.matrix thead th { border-top: 0; padding-top: 0; color: var(--muted); font-weight: 400; }
.matrix tbody th { font-weight: 500; padding-right: 16px; }
.matrix td { color: var(--muted); }
.matrix-note { margin: 0; color: var(--muted); font-size: .85rem; }
@media (max-width: 860px) { .ros, .sample-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .ros-list li { grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; } }
.brief-form .form-msg:empty { display: none; }   /* no dead gap above Back when there is nothing to say */
@media (max-width: 900px) { .brief-page .contact-info { order: 2; } }   /* phones and tablets: the form comes first, the reassurance card after it */.brief-form .fprog-label { color: rgba(238, 241, 239, .78); }   /* the card is dark but sits on a light section, so --muted was too faint here */

/* =====================================================================
   Self-hosted fonts (replaces the Google Fonts stylesheet; Motion review P0-3). Latin subset, variable weights, OFL licences: see assets/fonts/LICENSE.md.
   Preloaded in every page head so first paint already has them (CLS). font-display: swap keeps text visible while they load.
   ===================================================================== */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("fonts/inter-tight-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/instrument-serif-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/instrument-serif-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* =====================================================================
   Fix pass after the PM audit and the Motion review (reviews/PM-AUDIT-OFFSITES.md, reviews/MOTION-REVIEW-SERVICES.md). Small, scoped corrections.
   ===================================================================== */
/* Motion P0-2: the fixed "Pre-launch" tag no longer covers the hero's second button or the footer's legal row */
@media (max-width: 1100px) { [data-page="service"] .hero-content { padding-bottom: 56px; } }
@media (max-width: 760px) { .footer-bottom { padding-bottom: 64px; } }
/* Motion P1: the next-service card gets a visible focus ring (its own outline was removed); plan and ledger indexes reach 4.5:1;
   the hero breadcrumb stays readable over bright vines; the matrix header reads as a header */
.next-card:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 6px; border-radius: 22px; }
.plan-items .li-n, .slip-row .li-n { color: var(--muted); }
[data-page="service"] .hero-eyebrow { text-shadow: 0 1px 10px rgba(18, 22, 20, .6); }
[data-page="service"] .hero-panel::after { background: linear-gradient(180deg, rgba(18, 22, 20, .35) 0%, rgba(18, 22, 20, 0) 22%, rgba(18, 22, 20, .18) 38%, rgba(18, 22, 20, .55) 62%, rgba(18, 22, 20, .86) 100%); }
.matrix thead th { color: var(--ink); font-weight: 600; }
/* Home: the founders' role line inside the translucent name panel was 3.98:1; only that text is darkened, the panel colour is unchanged */
.member .info .role { color: #434B48; }