/* Allegain, design system v2.
   A media company, not an app: editorial serif headlines in sentence case, hairline
   rules, numerals and photography. Red appears once per screen (the primary button)
   plus the ON AIR dot. Cards only where the visitor chooses something; never shadows. */

:root {
  --paper: #faf7f4;
  --paper-deep: #f1ece6;
  --card: #ffffff;
  --ink: #1a1716;
  --muted: #5e5753;
  --line: #e2dbd3;
  --red: #dd3326;
  --red-dark: #c02a1e;
  --brick: #dd3326;
  --night: #14161c;
  --strong: #1d7451;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --label: "Oswald", "Arial Narrow", sans-serif;

  --wrap: 1240px;
  --gutter: 32px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.6 var(--sans); }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; color: var(--ink); margin: 0 0 .4em; font-optical-sizing: auto; text-wrap: balance; }
h1 { font-size: clamp(2.375rem, 3.9vw, 3.5rem); line-height: 1.06; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.9rem, 2.7vw, 2.5rem); line-height: 1.12; letter-spacing: -0.015em; margin-bottom: 20px; }
h3 { font-size: 1.6rem; line-height: 1.2; letter-spacing: -0.01em; }
h1 em, h2 em { font-style: italic; }
p { margin: 0 0 1em; max-width: 680px; }
.deck { font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.45; color: var(--muted); max-width: 34em; }
.small { font-size: .94rem; color: var(--muted); }
.eyebrow { display: flex; align-items: center; gap: 12px; font: 500 .82rem var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin: 0 0 20px; }
.eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--ink); }
.eyebrow.dot::before { width: 9px; height: 9px; border-radius: 50%; background: var(--red); }
.label { font: 500 .78rem var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: 96px 0; }
section.tight { padding-top: 64px; }
section.deep { background: var(--paper-deep); }
@media (max-width: 760px) { :root { --gutter: 20px; } section { padding: 64px 0; } body { font-size: 17px; } }
.head { margin-bottom: 40px; }
.head .deck { margin-top: 8px; }
.reading { max-width: 640px; }
.reading p { font-size: 1.06rem; }
.offset { margin-left: calc(100% / 12); }
@media (max-width: 900px) { .offset { margin-left: 0; } }
.rule-top { border-top: 1px solid var(--line); }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: var(--card); padding: 8px 12px; z-index: 99; }

/* ---------- Buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 2px;
  font: 500 1rem var(--sans); text-decoration: none; cursor: pointer; border: 1px solid var(--red); background: var(--red); color: #fff; transition: background .2s, color .2s; }
.btn:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.secondary:hover { background: var(--ink); color: var(--paper); }
.btn:disabled { opacity: .6; cursor: default; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 32px; }
.text-link { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.text-link::after { content: " →"; }
.link-btn { background: none; border: 0; padding: 0; font: 500 .95rem var(--sans); color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Nav ---------- */
.site-header { position: sticky; top: 0; z-index: 30; background: transparent; border-bottom: 1px solid var(--line); transition: background .2s; }
.site-header.scrolled { background: rgba(250, 247, 244, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-header .bar { display: flex; align-items: center; height: 72px; transition: height .2s; }
.site-header.scrolled .bar { height: 60px; }
.brand img { height: 26px; width: auto; }
.nav { display: flex; align-items: center; gap: 36px; margin-left: auto; margin-right: 36px; }
.nav > a, .nav .menu-btn { font: 500 15px var(--sans); color: var(--muted); transition: color .2s; text-decoration: none; background: none; border: 0; padding: 8px 0; cursor: pointer; position: relative; }
.nav > a[aria-current="page"]::after, .nav .menu-btn.current::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--ink); }
.nav .menu-btn span { display: inline-block; margin-left: 4px; transition: transform .2s; font-size: .75em; }
.nav .menu-btn[aria-expanded="true"] span { transform: rotate(180deg); }


@media (max-width: 1020px) { .nav, .nav-cta { display: none; } .menu-toggle { display: block; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--paper-deep); padding: 80px 0 40px; font-size: .95rem; border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.foot-logo img { height: 40px; width: auto; margin-bottom: 18px; }
.foot-grid h4 { font: 500 .78rem var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-grid a { text-decoration: none; }
.foot-grid a:hover { text-decoration: underline; }
.foot-one { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .86rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.foot-one a { color: var(--muted); }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Page heads ---------- */
.page-head { padding: 56px 0 72px; }
.page-head h1 { max-width: 16ch; }
.page-head .deck { margin-top: 20px; }
@media (max-width: 760px) { .page-head { padding: 56px 0 40px; } }

/* ---------- Hero: visual left, text right ---------- */
.hero { padding: 72px 0 120px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.hero h1 { max-width: 13ch; }
.hero .deck { margin-top: 24px; }
.hero .under { font-size: .92rem; color: var(--muted); margin: 14px 0 0; }
@media (max-width: 920px) { .hero { padding: 40px 0 80px; } .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

.scene { position: relative; padding: 36px 32px 64px 0; }
.scene .tv { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--night); }
.scene .tv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.6) saturate(.85) sepia(.08); }
.scene .tv::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,28,0) 45%, rgba(20,22,28,.6)); }
.scene .tally { position: absolute; top: 16px; left: 18px; z-index: 2; display: flex; align-items: center; gap: 8px; font: 500 .74rem var(--label); letter-spacing: .14em; color: #fff; }
.scene .tally i { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.scene .l3 { position: absolute; left: 30%; right: 5%; bottom: 12%; z-index: 2; }
.scene .cover { position: absolute; left: -8px; bottom: 0; width: 150px; aspect-ratio: 2/3; z-index: 3; background: var(--brick); color: #fff; padding: 16px 13px;
  display: flex; flex-direction: column; justify-content: space-between; transform: rotate(-3deg); box-shadow: inset 5px 0 0 rgba(0,0,0,.22); outline: 1px solid rgba(0,0,0,.08); }
.scene .cover .imp { font: 500 .6rem var(--label); letter-spacing: .14em; text-transform: uppercase; color: #f3d9d5; }
.scene .cover b { font: 500 1.2rem/1.08 var(--serif); }
.scene .cover small { font-size: .74rem; color: #f3d9d5; }
.scene .note { position: absolute; top: 0; right: 0; width: 60%; z-index: 4; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.scene .note .app { display: flex; align-items: center; gap: 8px; font: 600 .74rem var(--sans); color: var(--muted); }
.scene .note .app::before { content: ""; width: 16px; height: 16px; border-radius: 4px; background: var(--ink); }
.scene .note p { margin: 4px 0 0; font-size: .95rem; font-weight: 500; line-height: 1.35; }
@media (max-width: 560px) { .scene { padding: 28px 0 48px; } .scene .note { width: 78%; } .scene .cover { width: 108px; left: 0; } }

/* Lower third (the one broadcast detail) */
.l3 { display: inline-flex; flex-direction: column; align-items: flex-start; max-width: 100%; }
.l3 .l3-name { background: var(--brick); color: #fff; font: 500 1.35rem/1.15 var(--label); text-transform: uppercase; letter-spacing: .03em; padding: .3em .7em .24em; }
.l3 .l3-title { background: #fff; color: var(--ink); font: 500 .9rem var(--sans); padding: .5em .9em; }

/* ---------- Halo strip ---------- */
section.halo { padding: 104px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.numerals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; }
.numerals li { border-top: 1px solid var(--ink); padding-top: 16px; font-size: 1.05rem; font-weight: 500; line-height: 1.35; }
.numerals .n { display: block; font: 400 2.6rem/1 var(--serif); margin-bottom: 14px; }
.halo .after { color: var(--muted); margin: 40px 0 0; }
@media (max-width: 900px) { .numerals { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .numerals { grid-template-columns: 1fr; } }

/* ---------- Field picker ---------- */
.picker { scroll-margin-top: 96px; }
.pgroup + .pgroup { margin-top: 32px; }
.pgroup .label { display: block; margin-bottom: 12px; }
.ptiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ptile { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 20px 20px 22px; cursor: pointer; font: inherit; color: var(--ink); display: flex; flex-direction: column; gap: 6px; transition: border-color .2s; }
.ptile:hover { border-color: var(--ink); }
.ptile b { font: 500 1.5rem/1.15 var(--serif); }
.ptile > span { font-size: .9rem; color: var(--muted); line-height: 1.4; }
@media (max-width: 1000px) { .ptiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ptiles { grid-template-columns: 1fr; } }
.picker .change { display: none; }
.picker.picked { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.picker.picked .pgroup { margin: 0; }
.picker.picked .label, .picker.picked .ptile[aria-pressed="false"], .picker.picked .pgroup:not(:has([aria-pressed="true"])) { display: none; }
.picker.picked .ptiles { display: block; }
.picker.picked .ptile { flex-direction: row; align-items: baseline; gap: 10px; padding: 12px 18px; border-color: var(--ink); }
.picker.picked .ptile b { font-size: 1.25rem; }
.picker.picked .ptile b::before { content: "You're in: "; font: 400 .9rem var(--sans); color: var(--muted); }
.picker.picked .ptile > span { display: none; }
.picker.picked .change { display: inline; }
.next-hint { margin-top: 24px; color: var(--muted); }
.reveal { animation: rise .45s ease both; }

.field-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 64px; margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--line); }
.field-panel .quote { font: 400 italic clamp(1.8rem, 3vw, 2.5rem)/1.15 var(--serif); margin: 0 0 16px; letter-spacing: -0.01em; }
.field-panel h3, .field-story h3 { font-family: var(--label); font-size: .78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 32px 0 6px; }
@media (max-width: 900px) { .field-panel { grid-template-columns: 1fr; gap: 24px; } }

/* Before / after: two columns and a vertical hairline */
.ba { display: grid; grid-template-columns: 1fr 1fr; }
.ba > div { padding: 0 28px; }
.ba > div:first-child { padding-left: 0; border-right: 1px solid var(--line); }
.ba .label { display: block; margin-bottom: 10px; }
.ba p { margin: 0; font-size: 1.05rem; }
.ba .after p { font: 400 italic 1.3rem/1.35 var(--serif); }
@media (max-width: 560px) { .ba { grid-template-columns: 1fr; gap: 20px; } .ba > div { padding: 0; } .ba > div:first-child { border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 20px; } }

.numlist { list-style: none; padding: 0; margin: 0; counter-reset: n; }
.numlist li { counter-increment: n; display: grid; grid-template-columns: 40px 1fr; padding: 12px 0; border-top: 1px solid var(--line); font-size: 1.02rem; }
.numlist li::before { content: counter(n, decimal-leading-zero); font: 400 1.1rem/1.5 var(--serif); color: var(--muted); }

/* ---------- Editorial figures ---------- */
.figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 72px; }
.fig .num { display: block; font: 400 clamp(4rem, 7vw, 6rem)/1 var(--serif); letter-spacing: -0.03em; padding-bottom: 18px; border-bottom: 1px solid var(--ink); margin-bottom: 16px; }
.fig p { font-size: 1.02rem; margin-bottom: 8px; }
.fig .src { font-size: .82rem; color: var(--muted); }
@media (max-width: 760px) { .figs { grid-template-columns: 1fr; gap: 40px; } }
.story-copy p { font-size: 1.1rem; }
.story-copy .punch { font: 400 italic 1.9rem/1.25 var(--serif); margin: 1.2em 0; }

/* ---------- Steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.steps li { border-top: 1px solid var(--ink); padding-top: 18px; }
.steps .when { font: 500 .78rem var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.steps h3 { margin: 10px 0 10px; font-size: 1.45rem; }
.steps p { font-size: 1rem; color: var(--muted); }
.steps a { color: var(--ink); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---------- The year: one image per three rows, image left ---------- */
.year-block { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.year-block + .year-block { margin-top: 64px; }
.year-block .pic { aspect-ratio: 4/3; overflow: hidden; background: var(--night); }
.year-block .pic img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) sepia(.06); }
.year { list-style: none; padding: 0; margin: 0; }
.year li { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 24px 0; border-top: 1px solid var(--line); align-items: baseline; }
.year li:last-child { border-bottom: 1px solid var(--line); }
.year .mo { font: 400 3.4rem/1 var(--serif); letter-spacing: -0.02em; }
.year .mo small { display: block; font: 500 .72rem var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.year p { margin: 0; font-size: 1.08rem; }
.illus { font-size: .9rem; color: var(--muted); margin-top: 20px; }
@media (max-width: 860px) { .year-block { grid-template-columns: 1fr; gap: 24px; } .year li { grid-template-columns: 84px 1fr; } .year .mo { font-size: 2.6rem; } }

/* ---------- Night band ---------- */
.night { background: var(--night); color: #e9e4df; text-align: center; }
.night h2 { color: #fff; max-width: 20ch; margin: 0 auto .4em; }
.night .deck { color: #b9b2ac; margin: 0 auto; }
.night .actions { justify-content: center; }
.night .btn.secondary { color: #fff; border-color: rgba(255,255,255,.5); }
.night .btn.secondary:hover { background: #fff; color: var(--night); }

/* ---------- Side by side: image left, text right ---------- */
.side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }
.side .pic { aspect-ratio: 4/3; overflow: hidden; background: var(--night); }
.side .pic img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) sepia(.06); }
.side.top { align-items: start; }
.side.top .pic { position: sticky; top: 96px; aspect-ratio: 3/4; }
@media (max-width: 900px) { .side { grid-template-columns: 1fr; gap: 32px; } .side.top .pic { position: static; aspect-ratio: 16/10; } }
.credit { display: flex; align-items: center; gap: 14px; margin-top: 32px; font-size: .95rem; color: var(--muted); }
.credit .avatar { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font: 500 1.1rem var(--serif); color: var(--ink); flex: none; }

/* Two-column lists with numerals */
.cols2 { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; counter-reset: n; }
.cols2 li { counter-increment: n; display: grid; grid-template-columns: 56px 1fr; padding: 22px 0; border-top: 1px solid var(--line); }
.cols2 li::before { content: counter(n, decimal-leading-zero); font: 400 1.6rem/1.2 var(--serif); color: var(--muted); }
.cols2 b { display: block; font: 500 1.2rem/1.3 var(--serif); margin-bottom: 4px; }
.cols2 p { margin: 0; font-size: 1rem; color: var(--muted); }
.cols2.plain li { grid-template-columns: 1fr; }
.cols2.plain li::before { content: none; }
@media (max-width: 760px) { .cols2 { grid-template-columns: 1fr; } }

/* ---------- Who we work with ---------- */
.field-story { display: grid; grid-template-columns: 170px minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--line); }
.field-story h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.field-story h3 { margin-top: 0; margin-bottom: 14px; }
.book { width: 150px; aspect-ratio: 2/3; background: var(--brick); color: #fff; padding: 14px 12px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: inset 5px 0 0 rgba(0,0,0,.22); transform: rotate(-3deg); }
.book .imp { font: 500 .58rem var(--label); letter-spacing: .14em; text-transform: uppercase; color: #f3d9d5; }
.book b { font: 500 1.1rem/1.1 var(--serif); }
.book small { font-size: .72rem; color: #f3d9d5; }
@media (max-width: 960px) { .field-story { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Why it works ---------- */
.pattern { display: grid; grid-template-columns: 1fr 1fr; column-gap: 72px; }
.pattern article { padding: 32px 0; border-top: 1px solid var(--ink); }
.pattern h3 { font-size: 1.75rem; margin-bottom: 4px; }
.pattern dl { margin: 18px 0; display: grid; gap: 12px; }
.pattern dt { font: 500 .74rem var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pattern dd { margin: 2px 0 0; font-size: 1.02rem; }
.pattern dd.led { font: 400 italic 1.2rem/1.4 var(--serif); }
.pattern .source { font-size: .84rem; color: var(--muted); }
.tag-text { font: 500 .74rem var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid currentColor; padding-bottom: 1px; margin-right: 10px; }
.closing { font: 400 clamp(1.6rem, 2.6vw, 2rem)/1.3 var(--serif); text-align: center; max-width: 26ch; margin: 64px auto 0; }
@media (max-width: 800px) { .pattern { grid-template-columns: 1fr; } }
.statement { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 64px; }
.statement > div { padding: 0 40px; }
.statement > div:first-child { padding-left: 0; border-right: 1px solid var(--line); }
.statement .label { display: block; margin-bottom: 10px; }
.statement q { display: block; font: 400 clamp(1.4rem, 2.4vw, 2rem)/1.25 var(--serif); quotes: "“" "”"; }
.statement .after q { font-style: italic; }
@media (max-width: 700px) { .statement { grid-template-columns: 1fr; gap: 24px; } .statement > div { padding: 0; } .statement > div:first-child { border-right: 0; } }

/* ---------- Pricing ---------- */
.stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stage { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 32px 28px; display: flex; flex-direction: column; }
.stage h3 { margin-bottom: 8px; }
.stage .for { color: var(--muted); font-size: 1rem; }
.stage ul { list-style: none; padding: 0; margin: 12px 0 24px; font-size: 1rem; }
.stage li { padding: 10px 0; border-top: 1px solid var(--line); }
.stage .changes { font-size: 1rem; margin-bottom: 28px; }
.stage .changes .label { display: block; margin-bottom: 6px; color: var(--ink); }
.stage .btn { margin-top: auto; }
@media (max-width: 960px) { .stages { grid-template-columns: 1fr; } }
.promise { border-left: 2px solid var(--strong); padding: 6px 0 6px 28px; max-width: 760px; }
.promise b { display: block; font: 500 1.9rem/1.2 var(--serif); margin-bottom: 10px; }
.promise p { color: var(--muted); font-size: .98rem; margin: 0; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 72px; align-items: start; }
@media (max-width: 900px) { .form-grid { grid-template-columns: 1fr; gap: 40px; } }
.field { margin-bottom: 22px; }
.field > label, .field > legend, .q { display: block; font: 500 .95rem var(--sans); margin-bottom: 8px; padding: 0; }
.field input, .text-in { width: 100%; height: 52px; font: 400 1rem var(--sans); padding: 0 14px; border: 1px solid #cfc6bd; border-radius: 2px; background: var(--card); color: var(--ink); }
.field input:focus, .text-in:focus { outline: 2px solid var(--ink); outline-offset: 0; }
fieldset.field { border: 0; margin: 0 0 22px; padding: 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.row2 .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }
.choices { display: grid; gap: 8px; }
.choices.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .choices.two { grid-template-columns: 1fr; } }
.choice { display: flex; gap: 14px; align-items: center; min-height: 56px; padding: 14px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; font-size: 1.02rem; line-height: 1.35; transition: border-color .15s; }
.choice:hover { border-color: #a99f96; }
.choice input { accent-color: var(--ink); width: 18px; height: 18px; flex: none; margin: 0; }
.choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; color: var(--muted); margin: 6px 0 0; }
.consent input { margin-top: 4px; accent-color: var(--ink); width: 16px; height: 16px; flex: none; }
.form-error { color: #b0261b; font-weight: 500; font-size: .95rem; margin-top: 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aside-note { border-top: 1px solid var(--ink); padding-top: 20px; }
.aside-note h3 { font-size: 1.3rem; }
.aside-note ol { padding-left: 1.2em; font-size: 1rem; }
.floor { font-weight: 500; margin: 24px 0 0; }

/* ---------- Quiz ---------- */
.quiz-page { padding: 72px 0 140px; }
.quiz-wrap, .result-wrap { max-width: 780px; }
.quiz-intro .deck { margin: 16px 0 40px; }
.step { animation: rise .35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.step-top { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; color: var(--muted); margin-bottom: 12px; }
.progress { height: 2px; background: var(--line); margin-bottom: 40px; }
.progress i { display: block; height: 100%; background: var(--ink); transition: width .3s; }
.quiz-step .nudge { color: var(--muted); margin: 0 0 12px; font: italic 400 1.15rem var(--serif); }
.quiz-step h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0 0 28px; }
.qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .qgrid { grid-template-columns: 1fr; } }
.quiz-step .q { margin-top: 28px; }
.text-in { max-width: 420px; display: block; }
.step-nav { display: flex; align-items: center; gap: 20px; margin-top: 32px; }
.rows { display: grid; gap: 4px; }
.qrow { border: 0; margin: 0; padding: 18px 0; border-top: 1px solid var(--line); }
.qrow legend { font: 500 1.2rem var(--serif); padding: 0; margin-bottom: 12px; float: left; width: 100%; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; clear: both; }
.pill { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); cursor: pointer; font-size: .98rem; }
.pill input { accent-color: var(--ink); margin: 0; }
.pill:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
@media (max-width: 560px) { .pill { flex: 1 1 100%; } }

/* ---------- Result ---------- */
.r-hero .figure { display: block; font: 400 clamp(3.4rem, 8vw, 6rem)/1 var(--serif); letter-spacing: -0.03em; margin: 8px 0 24px; }
.r-hero h1 { font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.15; max-width: 22ch; }
.r-sec { padding-top: 88px; }
.lever { padding: 28px 0; border-top: 1px solid var(--line); }
.lever:last-child { border-bottom: 1px solid var(--line); }
.lever h3 { margin: 12px 0 10px; }
.lever-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.lever-val { font: 400 1.6rem var(--serif); }
.lever p { font-size: 1.04rem; }
.plan-path { list-style: none; padding: 0; margin: 0; }
.plan-path li { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid var(--line); align-items: baseline; }
.plan-path b { font: 400 1.5rem var(--serif); }
.plan-form { margin-top: 32px; padding: 32px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; }
details.method { margin-top: 72px; border-top: 1px solid var(--line); padding-top: 20px; font-size: 1rem; }
details.method summary { cursor: pointer; font-weight: 500; }
details.method li { margin-bottom: 8px; }

/* ---------- Honesty ---------- */
.say { display: grid; grid-template-columns: 1fr 1fr; }
.say > div { padding: 0 40px; }
.say > div:first-child { padding-left: 0; border-right: 1px solid var(--line); }
.say h3 { margin-bottom: 16px; }
.say ul { margin: 0; padding-left: 1.1em; }
.say li { margin-bottom: .6em; }
@media (max-width: 760px) { .say { grid-template-columns: 1fr; gap: 32px; } .say > div { padding: 0; } .say > div:first-child { border-right: 0; } }
.backfire { margin-top: 88px; padding-top: 32px; border-top: 1px solid var(--ink); max-width: 760px; }
.backfire ul { padding-left: 1.1em; }

/* ---------- Media ---------- */
.ladder { display: grid; }
.rung { display: grid; grid-template-columns: 110px 1fr; gap: 24px; padding: 28px 0; border-top: 1px solid var(--line); }
.rung:last-child { border-bottom: 1px solid var(--line); }
.rung h3 { margin-bottom: 6px; }
.rung p { margin: 0 0 8px; font-size: 1.02rem; }
@media (max-width: 560px) { .rung { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- Motion: one fade-and-rise as sections enter ---------- */
.fade { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.fade.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fade { opacity: 1; transform: none; transition: none; } .step, .reveal { animation: none; } * { transition: none !important; } }
@media (max-width: 1020px) { .mega { display: none; } }
.hero h1 { font-size: clamp(2.5rem, 4.6vw, 4.4rem); max-width: 14ch; }

/* =========================================================
   v5: density pass, image-led sections (image always left)
   ========================================================= */
.nav > a:hover, .nav .menu-btn:hover, .nav > a[aria-current="page"], .nav .menu-btn.current { color: var(--ink); }

/* Hero, inspired by EarnMyFortune: big photo left with stacked notifications, copy right,
   two-size headline, button + quiet "or" link, and a strip of big words along the bottom. */
.hero2 { position: relative; overflow: hidden; padding: 40px 0 0; background: radial-gradient(70% 90% at 78% 30%, #fff 0%, rgba(255,255,255,0) 60%), var(--paper); }
.hero2 .rings { position: absolute; right: -180px; top: -120px; width: 820px; height: 820px; pointer-events: none; color: var(--line); }
.hero2-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 64px; align-items: center; }
.hero2 .photo { position: relative; height: min(560px, 64vh); min-height: 440px; }
.hero2 .photo .frame { position: absolute; inset: 0; overflow: hidden; border-radius: 4px; background: var(--night); }
.hero2 .photo .frame img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; filter: brightness(.62) saturate(.85) sepia(.08); }
.hero2 .photo .frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,28,.15) 0%, rgba(20,22,28,0) 35%, rgba(20,22,28,.65) 100%); }
.hero2 .tally { position: absolute; top: 18px; left: 20px; z-index: 2; display: flex; align-items: center; gap: 8px; font: 500 .74rem var(--label); letter-spacing: .14em; color: #fff; }
.hero2 .tally i { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.hero2 .l3 { position: absolute; left: 150px; bottom: 15%; z-index: 2; }
.hero2 .cover { position: absolute; left: -22px; bottom: -26px; width: 150px; aspect-ratio: 2/3; z-index: 3; background: var(--brick); color: #fff; padding: 16px 13px;
  display: flex; flex-direction: column; justify-content: space-between; transform: rotate(-3deg); box-shadow: inset 5px 0 0 rgba(0,0,0,.22), 0 24px 40px -24px rgba(20,22,28,.6); }
.hero2 .cover .imp { font: 500 .6rem var(--label); letter-spacing: .14em; text-transform: uppercase; color: #f3d9d5; }
.hero2 .cover b { font: 500 1.2rem/1.08 var(--serif); }
.hero2 .cover small { font-size: .74rem; color: #f3d9d5; }
.ncards { position: absolute; top: 52px; right: -28px; z-index: 4; width: 62%; display: grid; gap: 10px; }
.nc { display: flex; gap: 11px; align-items: flex-start; padding: 11px 14px 11px 11px; border-radius: 14px; background: rgba(255,255,255,.97); border: 1px solid var(--line); box-shadow: 0 18px 36px -20px rgba(20,22,28,.5); }
.nc:nth-child(2) { margin-left: 14%; }
.nc .ico { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: #fff; display: grid; place-items: center; font: 600 .8rem var(--sans); }
.nc.review .ico { background: var(--paper-deep); color: var(--brick); }
.nc b { display: block; font: 600 .78rem var(--sans); color: var(--muted); }
.nc p { margin: 2px 0 0; font-size: .92rem; font-weight: 500; line-height: 1.35; color: var(--ink); }
.nc { animation: nc-in .55s cubic-bezier(.22,.61,.36,1) both; }
.nc:nth-child(1) { animation-delay: .5s; } .nc:nth-child(2) { animation-delay: 1.1s; }
@keyframes nc-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.hero2 h1 { margin: 0; letter-spacing: -0.025em; }
.hero2 h1 .big { display: block; font-size: clamp(2.4rem, 4.1vw, 3.6rem); line-height: 1.03; }
.hero2 h1 .small { display: block; font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 1.1; margin-top: 6px; color: var(--muted); }
.hero2 h1 .small em { color: var(--brick); }
.hero2 .deck { margin-top: 22px; font-size: 1.22rem; max-width: 30em; }
.hero2 .deck strong { color: var(--ink); font-weight: 500; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 28px; }
.hero-cta .or { color: var(--muted); font-size: .95rem; }
.hero-cta .or a { color: var(--ink); font-weight: 500; text-underline-offset: 5px; }
.btn .arr { width: 18px; height: 18px; }
.hero2 .under { margin: 14px 0 0; font-size: .9rem; color: var(--muted); }
.strip { list-style: none; margin: 56px 0 0; padding: 22px 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip li { text-align: center; padding: 0 16px; }
.strip li + li { border-left: 1px solid var(--line); }
.strip strong { display: block; font: 400 1.9rem/1.1 var(--serif); }
.strip span { font-size: .9rem; color: var(--muted); }
@media (max-width: 920px) {
  .hero2 { padding-top: 24px; }
  .hero2-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero2 .photo { height: 420px; min-height: 0; margin: 0 6px 20px 14px; }
  .ncards { right: -6px; width: 74%; }
  .hero2 .l3 { left: 120px; }
  .hero2 .cover { width: 112px; left: -14px; }
  .strip { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .strip li:nth-child(3) { border-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .nc { animation: none; } }

/* Split page heads: photo left (4:5), text right */
.split-head { padding: 48px 0 88px; }
.split-head .grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.split-head .pic { aspect-ratio: 4/5; min-height: 480px; max-height: 620px; overflow: hidden; background: var(--night); border-radius: 4px; }
.split-head .pic img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) sepia(.06); }
.split-head h1 { max-width: 15ch; }
.split-head .deck { margin-top: 18px; }
@media (max-width: 900px) { .split-head .grid { grid-template-columns: 1fr; gap: 32px; } .split-head .pic { min-height: 0; aspect-ratio: 16/10; } }

/* Image left (5 columns), text right (7 columns) */
.duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.duo.top { align-items: start; }
.duo .pic { aspect-ratio: 4/5; overflow: hidden; background: var(--night); border-radius: 4px; }
.duo .pic.wide { aspect-ratio: 4/3; }
.duo .pic img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) sepia(.06); }
.duo .stack { display: grid; gap: 16px; }
.duo .stack .pic { aspect-ratio: 16/10; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; gap: 32px; } .duo .pic { aspect-ratio: 16/10; } }
.fig-under { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ink); }
.fig-under .num { font: 400 4.5rem/1 var(--serif); letter-spacing: -0.03em; display: block; }
.fig-under p { margin: 6px 0 0; font-size: .95rem; color: var(--muted); }

/* Numbered benefits list */
.benefits { list-style: none; padding: 0; margin: 0; counter-reset: n; }
.benefits li { counter-increment: n; display: grid; grid-template-columns: 56px 1fr; padding: 18px 0; border-top: 1px solid var(--line); }
.benefits li:last-child { border-bottom: 1px solid var(--line); }
.benefits li::before { content: counter(n, decimal-leading-zero); font: 400 1.6rem/1.2 var(--serif); color: var(--muted); }
.benefits b { display: block; font: 500 1.3rem/1.3 var(--serif); margin-bottom: 2px; }
.benefits p { margin: 0; color: var(--muted); font-size: 1rem; }

/* Milestones: large numerals, one line each */
.miles { list-style: none; padding: 0; margin: 0; }
.miles li { display: grid; grid-template-columns: 130px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--line); align-items: baseline; }
.miles li:last-child { border-bottom: 1px solid var(--line); }
.miles .mo { font: 400 3rem/1 var(--serif); letter-spacing: -0.02em; }
.miles .mo small { display: block; font: 500 .72rem var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.miles p { margin: 0; font-size: 1.08rem; }
@media (max-width: 560px) { .miles li { grid-template-columns: 84px 1fr; } .miles .mo { font-size: 2.3rem; } }

.letter-copy p { font-size: 1.08rem; }
.letter-copy .punch { font: 400 italic 1.75rem/1.3 var(--serif); margin: 1em 0; }
.credit-line { display: flex; gap: 14px; align-items: center; margin-top: 28px; font-size: .95rem; color: var(--muted); max-width: 640px; }
.credit-line .avatar { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font: 500 1rem var(--serif); color: var(--ink); flex: none; }

/* Field panel with an image */
.field-panel.v5 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.field-panel.v5 .pic { aspect-ratio: 4/5; overflow: hidden; background: var(--night); border-radius: 4px; }
.field-panel.v5 .pic img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) sepia(.06); }
.field-panel.v5 .bookwrap { display: grid; place-items: center; min-height: 320px; background: var(--paper-deep); border-radius: 4px; }
.field-panel.v5 .book { width: 170px; }

/* Your part, our part */
.parts2 { display: grid; grid-template-columns: 1fr 1fr; }
.parts2 > div { padding: 0 40px; }
.parts2 > div:first-child { padding-left: 0; border-right: 1px solid var(--line); }
.parts2 p { font: 400 1.35rem/1.4 var(--serif); margin: 10px 0 0; }
@media (max-width: 700px) { .parts2 { grid-template-columns: 1fr; gap: 28px; } .parts2 > div { padding: 0; } .parts2 > div:first-child { border-right: 0; } }
.yes-line { font: 400 italic 1.8rem/1.3 var(--serif); }

/* Image-led links */
.linkcards { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.linkcards a { text-decoration: none; display: grid; gap: 14px; }
.linkcards .pic { aspect-ratio: 16/10; overflow: hidden; border-radius: 4px; background: var(--night); }
.linkcards img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) sepia(.06); }
.linkcards span { font: 500 1.4rem var(--serif); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
@media (max-width: 700px) { .linkcards { grid-template-columns: 1fr; } }

/* Stage card image strip */
.stage .strip-img { margin: -32px -28px 24px; height: 96px; overflow: hidden; border-radius: 4px 4px 0 0; }
.stage .strip-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) sepia(.06); }
.stage .incl { margin: 0 0 24px; font-size: .92rem; color: var(--muted); font-style: italic; }
.stage .changes-list { list-style: none; padding: 0; margin: 0 0 16px; }
.stage .changes-list li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 1rem; }

/* Quiz: picture and "why we ask" on the left, question on the right */
.quiz-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.quiz-side { position: sticky; top: 96px; }
.quiz-side .pic { aspect-ratio: 16/10; overflow: hidden; border-radius: 4px; background: var(--night); }
.quiz-side .pic.tall { aspect-ratio: 4/5; }
.quiz-side img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) sepia(.06); }
.quiz-side .label { display: block; margin: 20px 0 6px; }
.quiz-side p { font: 400 1.25rem/1.4 var(--serif); margin: 0; }
.quiz-main { max-width: 680px; }
@media (max-width: 900px) { .quiz-grid { grid-template-columns: 1fr; gap: 0; } .quiz-side { display: none; } }

/* Result letter: letter left, sticky card right; slim bottom bar on mobile */
.letter-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
.letter { max-width: 680px; }
.letter h1 { font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.15; }
.letter h1 .range { display: block; font-size: 1.4em; line-height: 1.05; margin: 10px 0; letter-spacing: -0.03em; }
.letter .sec { padding-top: 72px; }
.letter p { font-size: 1.08rem; }
.letter strong { font-weight: 600; }
.letter .ps { font: 400 1.3rem/1.5 var(--serif); padding-top: 32px; border-top: 1px solid var(--ink); margin-top: 56px; }
.letter ul.gets { padding-left: 1.1em; font-size: 1.08rem; }
.letter ul.gets li { margin-bottom: 6px; }
.wide-pic { margin: 72px 0 0; aspect-ratio: 16/7; overflow: hidden; border-radius: 4px; background: var(--night); }
.wide-pic img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) sepia(.06); }
.side-pic { float: right; width: 42%; margin: 4px 0 16px 24px; aspect-ratio: 4/5; overflow: hidden; border-radius: 4px; }
.side-pic img { width: 100%; height: 100%; object-fit: cover; }
.num-card { position: sticky; top: 96px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 28px; }
.num-card .label { display: block; margin-bottom: 8px; }
.num-card .v { display: block; font: 400 2.4rem/1.1 var(--serif); letter-spacing: -0.02em; }
.num-card .lv { margin: 16px 0 20px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .98rem; }
.num-card .btn { width: 100%; }
.num-card .small { margin: 14px 0 0; }
.mbar { display: none; }
@media (max-width: 900px) {
  .letter-grid { grid-template-columns: 1fr; }
  .num-card { display: none; }
  .mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--gutter); background: rgba(250,247,244,.96); border-top: 1px solid var(--line); backdrop-filter: blur(8px); }
  .mbar span { font: 500 1rem var(--serif); }
  .mbar a { height: 44px; padding: 0 16px; }
  .result-page { padding-bottom: 80px; }
  .side-pic { float: none; width: 100%; margin: 0 0 16px; aspect-ratio: 16/10; }
}

/* =========================================================
   v6: menu, hero polish, packages, standards
   ========================================================= */

/* ---------- Header and menu ---------- */
.site-header { border-bottom-color: transparent; }
.site-header.scrolled { border-bottom-color: var(--line); }
.site-header .bar { height: 80px; gap: 8px; }
.site-header.scrolled .bar { height: 64px; }
.brand img { height: 28px; }
.nav { gap: 6px; margin-right: 20px; }
.nav > a, .nav .menu-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; color: var(--ink); opacity: .78; transition: opacity .2s, background .2s; }
.nav > a:hover, .nav .menu-btn:hover, .nav .menu-btn[aria-expanded="true"] { opacity: 1; background: rgba(26, 23, 22, .05); }
.nav > a[aria-current="page"], .nav .menu-btn.current { opacity: 1; }
.nav > a[aria-current="page"]::after, .nav .menu-btn.current::after { left: 14px; right: 14px; bottom: 4px; height: 1.5px; }
.nav .chev { width: 12px; height: 12px; transition: transform .2s; }
.nav .menu-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-cta { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 15px var(--sans); text-decoration: none; white-space: nowrap; transition: background .2s, gap .2s; }
.nav-cta:hover { background: #000; gap: 12px; }
.nav-cta .arw { width: 16px; height: 16px; }

.mega { position: absolute; left: 0; right: 0; top: 100%; padding: 0 var(--gutter); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .22s, transform .22s, visibility .22s; }
.mega.open { opacity: 1; visibility: visible; transform: none; }
.mega-inner { max-width: var(--wrap); margin: 8px auto 0; display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr 1.2fr; gap: 36px; padding: 36px 36px 40px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 30px 60px -30px rgba(26, 23, 22, .28); }
.mega .label { display: block; margin-bottom: 14px; }
.mega-title { font: 400 1.65rem/1.2 var(--serif); letter-spacing: -0.01em; margin: 0 0 20px; }
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega li a { display: block; text-decoration: none; padding: 8px 10px; margin: 0 -10px; border-radius: 8px; transition: background .15s; }
.mega li a:hover { background: var(--paper); }
.mega li a b { display: block; font: 500 1.08rem/1.3 var(--serif); }
.mega li a span { display: block; font-size: .82rem; color: var(--muted); line-height: 1.35; }
.mega-feature { display: grid; gap: 8px; align-content: start; text-decoration: none; padding: 12px; margin: -12px; border-radius: 12px; transition: background .15s; }
.mega-feature:hover { background: var(--paper); }
.mega-feature .pic { aspect-ratio: 4/3; overflow: hidden; border-radius: 8px; margin-bottom: 6px; }
.mega-feature img { width: 100%; height: 100%; object-fit: cover; }
.mega-feature b { font: 500 1.08rem var(--serif); }
.mega-feature span { font-size: .88rem; color: var(--muted); line-height: 1.4; }
.mega-feature em { font-style: normal; font-weight: 500; font-size: .9rem; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.mega-feature .arw { width: 14px; height: 14px; }

.menu-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); cursor: pointer; position: relative; }
.menu-toggle span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--ink); }
.menu-toggle span:first-child { top: 17px; } .menu-toggle span:last-child { top: 25px; }
.mobile-panel { position: fixed; inset: 0; z-index: 50; background: var(--paper); display: flex; flex-direction: column; padding: 16px var(--gutter) 0; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .25s, transform .25s, visibility .25s; }
.mobile-panel.open { opacity: 1; visibility: visible; transform: none; }
.mobile-panel .top { display: flex; align-items: center; justify-content: space-between; height: 56px; margin-bottom: 24px; }
.mobile-panel .top img { height: 24px; width: auto; }
.mobile-panel .close { height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font: 500 .92rem var(--sans); color: var(--ink); cursor: pointer; }
.mobile-panel nav > a, .mobile-panel summary { display: flex; align-items: baseline; gap: 16px; font: 400 2.1rem/1.15 var(--serif); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; padding: 16px 0; border-bottom: 1px solid var(--line); cursor: pointer; list-style: none; }
.mobile-panel nav i { font: 500 .74rem var(--label); letter-spacing: .12em; color: var(--muted); font-style: normal; width: 24px; }
.mobile-panel summary::-webkit-details-marker { display: none; }
.mobile-panel summary .chev { width: 16px; height: 16px; margin-left: auto; align-self: center; transition: transform .2s; }
.mobile-panel details[open] summary .chev { transform: rotate(180deg); }
.mobile-panel details ul { list-style: none; padding: 8px 0 16px 40px; margin: 0; border-bottom: 1px solid var(--line); columns: 2; }
.mobile-panel details li a { display: block; padding: 7px 0; text-decoration: none; font-size: 1rem; }
.mobile-panel .pin { position: sticky; bottom: 0; margin-top: auto; padding: 20px 0 24px; background: var(--paper); display: grid; gap: 10px; }
.mobile-panel .pin .btn { width: 100%; }
@media (max-width: 1060px) { .nav, .nav-cta { display: none; } .menu-toggle { display: block; } .mega { display: none; } }

/* ---------- Footer ---------- */
.foot-logo img { height: 30px; margin-bottom: 8px; }
.foot-tag { font-size: 13px; color: var(--muted); margin: 0 0 16px; letter-spacing: .02em; }

/* ---------- Hero polish ---------- */
.hero2 .rings { display: none; }
.hero2 .cover { width: 135px; left: -20px; bottom: -22px; }
.hero2 .cover b { font-size: 1.08rem; }
.ncards { top: 40px; right: -36px; width: auto; display: block; }
.nc { max-width: 300px; padding: 12px; gap: 0; border-radius: 12px; }
.nc .ico { display: none; }
.nc p { font-size: 14px; }
.nc b { font-size: 12px; }
.nc:nth-child(2) { margin: -16px 0 0 56px; position: relative; }
.nc:nth-child(1) { animation-delay: .4s; } .nc:nth-child(2) { animation-delay: .8s; }
.strip strong { font-size: 32px; }
.strip span { font-size: 14px; }
@media (max-width: 920px) {
  .hero2 .photo { height: auto; aspect-ratio: 4/5; max-height: 70vh; }
  .nc:nth-child(2) { display: none; }
  .ncards { right: -6px; }
}

/* Field panel: photo left, book overlapping its bottom-right corner */
.field-panel .pic-wrap { position: relative; }
.field-panel .pic-wrap .book { position: absolute; right: -18px; bottom: -22px; width: 132px; }
.big-figure { border-top: 1px solid var(--ink); padding-top: 20px; }
.big-figure .num { display: block; font: 400 clamp(6rem, 12vw, 9rem)/1 var(--serif); letter-spacing: -0.04em; }
.big-figure p { color: var(--muted); max-width: 26em; }

/* Why it works: one key figure per public story */
.pattern .keyfig { display: block; font: 400 2.5rem/1.1 var(--serif); letter-spacing: -0.02em; margin: 16px 0 4px; }

/* Packages */
.pkgs3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.pkg3 { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 4px; display: flex; flex-direction: column; overflow: hidden; }
.pkg3 .pic { aspect-ratio: 16/9; overflow: hidden; }
.pkg3 .pic img { width: 100%; height: 100%; object-fit: cover; }
.pkg3 .body { padding: 28px; display: flex; flex-direction: column; flex: 1; }
.pkg3 .popular { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--card); color: var(--ink); padding: 5px 10px; border-radius: 999px; }
.pkg3 h3 { font-size: 2rem; margin-bottom: 6px; }
.pkg3 .for { color: var(--muted); font-size: 1rem; }
.pkg3 ul { list-style: none; padding: 0; margin: 8px 0 18px; }
.pkg3 li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 1rem; }
.pkg3 .incl { font-size: .92rem; color: var(--muted); font-style: italic; margin: 0 0 6px; }
.pkg3 .price { font: 400 1.5rem var(--serif); margin: 8px 0 20px; }
.pkg3 .btn { margin-top: auto; }
.pkg3.featured { border-color: var(--ink); }
@media (max-width: 960px) { .pkgs3 { grid-template-columns: 1fr; } }

/* Standards */
.standards-quote { font: 400 italic clamp(2rem, 3.6vw, 3rem)/1.2 var(--serif); letter-spacing: -0.015em; max-width: 18ch; }
.legal-copy { max-width: 760px; }
.legal-copy h2 { font-size: 1.6rem; margin-top: 48px; }

/* Result H1: one line, then the range and "a year." together */
.letter h1 .lead { display: block; }
.letter h1 .range { display: block; white-space: nowrap; }
@media (max-width: 560px) { .letter h1 .range { white-space: normal; } }

/* Leaner header: shorter bar, smaller marks, links centred between logo and button */
.site-header .bar { height: 64px; gap: 0; display: grid; grid-template-columns: 1fr auto 1fr; }
.site-header.scrolled .bar { height: 56px; }
.brand img { height: 22px; }
.nav { margin: 0; gap: 2px; justify-self: center; }
.nav > a, .nav .menu-btn { font-size: 14px; padding: 7px 12px; letter-spacing: -0.005em; }
.nav > a[aria-current="page"]::after, .nav .menu-btn.current::after { left: 12px; right: 12px; bottom: 2px; height: 1px; }
.nav .chev { width: 10px; height: 10px; }
.nav-cta { justify-self: end; height: 38px; padding: 0 16px; font-size: 14px; gap: 6px; }
.nav-cta .arw { width: 14px; height: 14px; }
.mega-inner { margin-top: 4px; }
@media (max-width: 1060px) { .site-header .bar { display: flex; } }

/* Header as its own band: white bar, hairline under it, links grouped in one outlined pill */
.site-header, .site-header.scrolled { background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-header.scrolled { box-shadow: 0 8px 24px -18px rgba(26, 23, 22, .35); }
.nav { padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); gap: 0; }
.nav > a, .nav .menu-btn { position: relative; border-radius: 999px; padding: 7px 16px; opacity: .8; }
.nav > a + a::before, .nav > .menu-btn + a::before, .nav > a + .menu-btn::before { content: ""; position: absolute; left: 0; top: 30%; bottom: 30%; width: 1px; background: var(--line); }
.nav > a:hover::before, .nav > a:hover + a::before, .nav > a:hover + .menu-btn::before, .nav > .menu-btn:hover + a::before, .nav > .menu-btn:hover::before { opacity: 0; }
.nav > a:hover, .nav .menu-btn:hover, .nav .menu-btn[aria-expanded="true"] { background: var(--card); opacity: 1; box-shadow: 0 1px 2px rgba(26, 23, 22, .08); }
.nav > a[aria-current="page"], .nav .menu-btn.current { background: var(--card); opacity: 1; box-shadow: 0 1px 2px rgba(26, 23, 22, .08); }
.nav > a[aria-current="page"]::after, .nav .menu-btn.current::after { display: none; }
.hero2 { border-top: 0; }

/* Hero notifications: the first sits on top; the second tucks under its corner */
.nc:nth-child(1) { position: relative; z-index: 2; }
.nc:nth-child(2) { margin: -16px 0 0 72px; padding-top: 24px; z-index: 1; }

/* No capsule: plain links with thin dividers. The header shrinks as you scroll. */
.nav { padding: 0; border: 0; background: none; border-radius: 0; }
.nav > a, .nav .menu-btn { padding: 8px 16px; border-radius: 0; background: none !important; box-shadow: none !important; opacity: .72; transition: opacity .2s, font-size .25s, padding .25s; }
.nav > a:hover, .nav .menu-btn:hover, .nav .menu-btn[aria-expanded="true"], .nav > a[aria-current="page"], .nav .menu-btn.current { opacity: 1; }
.nav > a[aria-current="page"]::after, .nav .menu-btn.current::after { display: block; content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1.5px; background: var(--ink); }
.site-header .bar { height: 72px; transition: height .25s ease; }
.brand img { height: 24px; transition: height .25s ease; }
.nav-cta { height: 40px; transition: height .25s ease, padding .25s ease, font-size .25s ease, background .2s; }
.site-header.scrolled .bar { height: 52px; }
.site-header.scrolled .brand img { height: 19px; }
.site-header.scrolled .nav > a, .site-header.scrolled .nav .menu-btn { font-size: 13px; padding: 6px 14px; }
.site-header.scrolled .nav-cta { height: 32px; padding: 0 14px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .site-header .bar, .brand img, .nav-cta, .nav > a { transition: none; } }
/* Mobile menu: shown with display + a keyframe fade (more robust than a visibility transition) */
.mobile-panel { display: none; opacity: 1; visibility: visible; transform: none; transition: none; }
.mobile-panel.open { display: flex; animation: panel-in .25s ease both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mobile-panel.open { animation: none; } }

/* Field tiles with a photo */
.ptile { padding: 0 0 20px; overflow: hidden; gap: 4px; }
.ptile .tile-pic { display: block; aspect-ratio: 3/2; overflow: hidden; margin-bottom: 14px; background: var(--paper-deep); }
.ptile .tile-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ptile:hover .tile-pic img { transform: scale(1.04); }
.ptile b, .ptile > span:last-child { padding: 0 18px; }
.ptile b { font-size: 1.35rem; }
.picker.picked .ptile { padding: 10px 18px; }
.picker.picked .ptile .tile-pic { display: none; }
.picker.picked .ptile b { padding: 0; }
@media (prefers-reduced-motion: reduce) { .ptile:hover .tile-pic img { transform: none; } }

/* =========================================================
   v7: the professional pass
   ========================================================= */

/* Type scale, locked. Nothing under 14px except legal. */
h1 { font-size: clamp(2.375rem, 4vw, 3.5rem); }
h2 { font-size: clamp(1.875rem, 2.8vw, 2.5rem); }
h3 { font-size: clamp(1.3125rem, 1.6vw, 1.5rem); }
.deck { font-size: clamp(1.1875rem, 1.6vw, 1.375rem); }
body { font-size: 18px; }
.small, .fig .src, .pattern .source, .illus, .mega li a span, .foot-one, .nc b, .nc p, .stage .incl, .pkg3 .incl { font-size: 15px; }
.label, .eyebrow, .tag-text, .pattern dt, .steps .when, .year .mo small, .miles .mo small, .mega .label, .foot-grid h4 { font-size: 12px; letter-spacing: .14em; }
@media (max-width: 760px) { body { font-size: 17px; } .small, .fig .src, .pattern .source, .illus { font-size: 14px; } }

/* One button shape everywhere: 2px radius */
.btn, .nav-cta, .mobile-panel .close, .menu-toggle, .pill, .choice, .ptile, .stage, .pkg3, .plan-form, .num-card { border-radius: 2px; }
.btn:hover { background: #cb2f23; border-color: #cb2f23; }
.nav-cta { border-radius: 2px; background: var(--ink); color: var(--paper); }
.nav-cta:hover { background: #000; }
.text-link { transition: text-decoration-thickness .15s; }
.text-link:hover { text-decoration-thickness: 2px; }

/* Logo: ink wordmark, red mark */
.brand img { height: 28px; }
.site-header.scrolled .brand img { height: 22px; }

/* Nav: no dividers, 32px spacing, 2px ink underline on the active item */
.nav { gap: 32px; }
.nav > a, .nav .menu-btn { padding: 8px 0; }
.nav > a + a::before, .nav > .menu-btn + a::before, .nav > a + .menu-btn::before { display: none; }
.nav > a[aria-current="page"]::after, .nav .menu-btn.current::after { left: 0; right: 0; bottom: -2px; height: 2px; }
.site-header.scrolled .nav > a, .site-header.scrolled .nav .menu-btn { padding: 6px 0; }

/* Hero notifications: one tidy stack, top right, no overlap */
.ncards { top: 24px; right: -24px; display: flex; flex-direction: column; gap: 12px; width: 300px; }
.nc, .nc:nth-child(1), .nc:nth-child(2) { width: 300px; max-width: 300px; margin: 0; padding: 12px 14px; position: relative; top: auto; transform: none; }
.hero2 .photo .frame, .split-head .pic, .duo .pic, .field-panel.v5 .pic, .year-block .pic, .linkcards .pic, .pkg3, .wide-pic { border-radius: 2px; }

/* One frame: split images 4:5 */
.duo .pic, .duo .pic.wide, .split-head .pic, .field-panel.v5 .pic { aspect-ratio: 4/5; }
.split-head .pic { min-height: 0; max-height: none; }
.year-block .pic { aspect-ratio: 4/5; }

/* Type B: full-bleed band, text on the left third over a dark gradient */
.band { position: relative; min-height: 64vh; display: flex; align-items: center; padding: 0; color: #fff; overflow: hidden; background: var(--night); }
.band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,22,28,.94) 0%, rgba(20,22,28,.82) 38%, rgba(20,22,28,.2) 72%, rgba(20,22,28,0) 100%); }
.band .wrap { position: relative; width: 100%; padding-top: 96px; padding-bottom: 96px; }
.band .inner { max-width: 560px; }
.band h2, .band .eyebrow { color: #fff; }
.band .eyebrow::before { background: #fff; }
.band p { color: #d9d3cd; }
.band .letter-copy p { font-size: 1.02rem; }
.band .letter-copy .punch { color: #fff; font-size: 1.5rem; }
.band .huge { display: block; font: 400 clamp(5rem, 11vw, 9rem)/.9 var(--serif); letter-spacing: -0.04em; color: #fff; margin-bottom: 8px; }
.band .huge-cap { font-size: 15px; color: #b9b2ac; margin-bottom: 32px; }
.band .btn.secondary { color: #fff; border-color: rgba(255,255,255,.55); }
.band .btn.secondary:hover { background: #fff; color: var(--night); }
@media (max-width: 760px) { .band::before { background: linear-gradient(180deg, rgba(20,22,28,.55), rgba(20,22,28,.92) 45%); } .band { min-height: 0; } }

/* Type C: statement */
.statement-c { padding: 120px 0; text-align: center; }
.statement-c p.display { font: 400 clamp(2.5rem, 5vw, 4.5rem)/1.1 var(--serif); letter-spacing: -0.025em; max-width: 18ch; margin: 0 auto; text-wrap: balance; }
.statement-c p.display em { font-style: italic; }
.statement-c .src-line { margin: 28px auto 0; font-size: 15px; color: var(--muted); }
@media (max-width: 760px) { .statement-c { padding: 72px 0; } .statement-c p.display { font-size: 2.5rem; } }

/* Figures as their own section type */
.figs-sec .figs { margin-top: 0; }

/* Field tiles: text cards with one drawn ink icon (photo only in the open panel) */
.ptile { padding: 22px 22px 24px; gap: 6px; }
.ptile .tile-pic { display: none; }
.ptile .tile-ico { width: 30px; height: 30px; color: var(--ink); margin-bottom: 10px; }
.ptile .tile-ico svg { width: 100%; height: 100%; display: block; }
.ptile b, .ptile > span:last-child { padding: 0; }
.ptile > span:last-child { font-size: 15px; }
.picker.picked .ptile .tile-ico { display: none; }

/* Textarea: full width, 4 rows */
.text-area { width: 100%; font: 400 1rem/1.5 var(--sans); padding: 12px 14px; border: 1px solid #cfc6bd; border-radius: 2px; background: var(--card); color: var(--ink); resize: vertical; }
.text-area:focus { outline: 2px solid var(--ink); outline-offset: 0; }

/* Mastheads for the five owned properties */
.mastheads { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.masthead { display: grid; place-items: center; text-align: center; padding: 28px 12px; min-height: 120px; }
.masthead + .masthead { border-left: 1px solid var(--line); }
.mh-spotlight { font: 500 1.35rem var(--label); letter-spacing: .18em; text-transform: uppercase; }
.mh-spotlight i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--red); margin-right: 8px; vertical-align: middle; }
.mh-press { font: 500 1.45rem var(--serif); letter-spacing: -0.01em; }
.mh-press small { display: block; font: 500 12px var(--label); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.mh-dir { font: 600 1rem var(--sans); letter-spacing: .02em; }
.mh-dir span { display: block; font: 400 italic 1.3rem var(--serif); letter-spacing: 0; }
.mh-voices { font: 400 italic 1.6rem var(--serif); }
.mh-brief { font: 500 1.5rem var(--serif); letter-spacing: .02em; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 4px 6px; }
.footer-mastheads { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); }
.footer-mastheads span { font-size: 15px; }
@media (max-width: 900px) { .mastheads { grid-template-columns: 1fr 1fr; } .masthead + .masthead { border-left: 0; } .masthead { border-bottom: 1px solid var(--line); } }

/* Result: the range never clips, lever bar, lever rules, lower-third card */
.letter h1 .range { font-size: clamp(40px, 6vw, 72px); white-space: nowrap; line-height: 1.05; margin: 12px 0 8px; }
.letter h1 .yr { display: block; }
@media (max-width: 420px) { .letter h1 .range { white-space: normal; } }
.lever-bar { margin: 40px 0 8px; }
.lever-bar .bar { display: flex; height: 14px; border-radius: 2px; overflow: hidden; background: var(--line); margin: 0; }
.lever-bar .bar i { display: block; height: 100%; }
.lever-bar .bar i:nth-child(1) { background: var(--ink); } .lever-bar .bar i:nth-child(2) { background: var(--brick); } .lever-bar .bar i:nth-child(3) { background: #a99f96; }
.lever-bar .keys { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; font-size: 15px; color: var(--muted); }
.lever-bar .keys b { color: var(--ink); font-weight: 600; }
.lever-bar .keys span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: 0; }
.lever-bar .keys span:nth-child(1)::before { background: var(--ink); } .lever-bar .keys span:nth-child(2)::before { background: var(--brick); } .lever-bar .keys span:nth-child(3)::before { background: #a99f96; }
.letter .lever { border-top: 0; border-left: 2px solid var(--ink); padding: 4px 0 4px 24px; margin-top: 48px; }
.letter .lever:last-child { border-bottom: 0; }
.num-card { padding: 0; overflow: hidden; }
.num-card .l3 { display: flex; width: 100%; }
.num-card .l3 .l3-name { width: 100%; font-size: 1rem; letter-spacing: .14em; }
.num-card .l3 .l3-title { width: 100%; background: var(--paper); font: 400 2rem/1.15 var(--serif); padding: 16px 20px; letter-spacing: -0.02em; }
.num-card .inner { padding: 20px 24px 24px; }
.num-card .lv { margin-top: 0; }
.save-btn { margin-top: 10px; }

/* Motion: images settle from 1.02 to 1, text rises 12px, once */
.fade .pic img, .fade .band > img { transform: scale(1.02); transition: transform .6s ease; }
.fade.in .pic img, .fade.in .band > img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .fade .pic img { transform: none; } }

/* Preview-only prototype bar (?preview) */
.preview-bar { background: #fff6d6; color: #5c4400; font: 500 14px var(--sans); text-align: center; padding: 6px 12px; }

/* 404 */
.notfound { min-height: 60vh; display: grid; align-content: center; }
/* The range sizes to the letter column itself, so it never clips */
.letter { container-type: inline-size; }
.letter h1 .range { font-size: clamp(34px, 9.2cqi, 72px); }
.band { min-height: min(64vh, 720px); }

/* ===== v8: beyond the news ===== */
/* Hero: a bright book photo, three channel cards stacked top right, a name plate under the book. */
.hero2.v8 .photo .frame { background: var(--paper-deep); }
.hero2.v8 .photo .frame img { filter: none; object-position: 20% 50%; }
.hero2.v8 .photo .frame::after { background: linear-gradient(180deg, rgba(20,22,28,0) 55%, rgba(20,22,28,.28) 100%); }
.hero2.v8 .ncards { top: 22px; right: -28px; width: 280px; display: grid; gap: 12px; }
.hero2.v8 .nc { max-width: none; margin: 0; display: flex; gap: 11px; align-items: center; padding: 11px 14px 11px 11px; border-radius: 12px; position: static; }
.hero2.v8 .nc .ch { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: #fff; display: grid; place-items: center; }
.hero2.v8 .nc:nth-child(2) .ch { background: var(--brick); }
.hero2.v8 .nc:nth-child(3) .ch { background: var(--paper-deep); color: var(--ink); }
.hero2.v8 .nc .ch svg { width: 16px; height: 16px; }
.hero2.v8 .nc:nth-child(3) { animation-delay: 1.2s; }
.hero2.v8 .l3 { left: 24px; bottom: 22px; }
@media (max-width: 900px) {
  .hero2.v8 .photo { height: auto; aspect-ratio: 9 / 8; margin: 0 0 8px; }
  .hero2.v8 .ncards { top: 14px; right: 10px; width: min(250px, 64%); gap: 8px; }
  .hero2.v8 .nc { padding: 8px 10px 8px 8px; gap: 8px; }
  .hero2.v8 .nc .ch { width: 24px; height: 24px; }
  .hero2.v8 .nc b { font-size: 11px; } .hero2.v8 .nc p { font-size: 12.5px; }
  .hero2.v8 .l3 { left: 12px; bottom: 12px; }
  .hero2.v8 .l3 .l3-name { font-size: 1rem; } .hero2.v8 .l3 .l3-title { font-size: .78rem; }
}
@media (max-width: 420px) { .hero2.v8 .nc:nth-child(3) { display: none; } }

/* Wherever they look: six channels, no photos. */
.channels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 32px; }
.channels li { border-top: 1px solid var(--ink); padding-top: 20px; }
.channels .ch-ico { display: block; width: 30px; height: 30px; color: var(--ink); margin-bottom: 16px; }
.channels .ch-ico svg { width: 100%; height: 100%; }
.channels b { display: block; font: 500 22px/1.2 var(--serif); margin-bottom: 8px; }
.channels p { margin: 0; font-size: .98rem; color: var(--muted); line-height: 1.45; }
.ch-foot { margin: 40px 0 0; font-size: 15px; color: var(--muted); }
@media (max-width: 1080px) { .channels { grid-template-columns: repeat(3, 1fr); row-gap: 40px; } }
@media (max-width: 560px) { .channels { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .channels b { font-size: 19px; } }

/* Sample work: six finished pieces, drawn in type. */
.sw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.sw { margin: 0; }
.sw-art { position: relative; aspect-ratio: 4 / 3; border-radius: 4px; background: var(--paper-deep); overflow: hidden; display: grid; place-items: center; }
.sw figcaption { margin-top: 12px; font-size: 15px; color: var(--muted); }
.sw img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* book */
.sw-cover { width: 44%; aspect-ratio: 2 / 3; background: var(--brick); color: #fff; padding: 7% 6%; display: flex; flex-direction: column; box-shadow: 10px 14px 24px -12px rgba(20,22,28,.55), inset 4px 0 0 rgba(0,0,0,.18); transform: rotate(-3deg); }
.sw-cover .imp { font: 500 8px var(--label); letter-spacing: .16em; text-transform: uppercase; color: #f3d9d5; }
.sw-cover b { font: 500 clamp(13px, 1.5vw, 19px)/1.08 var(--serif); margin-top: 14%; }
.sw-cover i { font: italic 400 10px/1.3 var(--serif); color: #f3d9d5; margin-top: 8px; }
.sw-cover small { margin-top: auto; font: 500 10px var(--label); letter-spacing: .1em; text-transform: uppercase; }
/* expert page on a laptop */
.sw-page .sw-art { align-content: center; }
.sw-laptop { width: 78%; aspect-ratio: 16 / 10; background: #1d1b1a; border-radius: 8px 8px 0 0; padding: 3.5%; }
.sw-screen { height: 100%; background: #fff; overflow: hidden; display: flex; flex-direction: column; gap: 7%; padding: 5% 6%; }
.sw-nav { display: flex; gap: 6px; justify-content: flex-end; } .sw-nav span { width: 14%; height: 3px; background: var(--line); }
.sw-hero { display: grid; grid-template-columns: 40% 1fr; gap: 7%; align-items: center; }
.sw-ph { aspect-ratio: 1; overflow: hidden; border-radius: 2px; }
.sw-hero small { font-size: 7px; color: var(--muted); display: block; }
.sw-hero b { font: 500 clamp(12px, 1.3vw, 16px)/1.1 var(--serif); display: block; margin: 2px 0 3px; }
.sw-hero p { font-size: 7.5px; line-height: 1.35; margin: 0 0 5px; color: var(--ink); }
.sw-hero em { font: normal 600 7px var(--sans); background: var(--red); color: #fff; padding: 3px 6px; border-radius: 99px; }
.sw-lines { display: grid; gap: 4px; } .sw-lines span { height: 3px; background: var(--line); } .sw-lines span:last-child { width: 60%; }
.sw-base { width: 90%; height: 6px; background: #3a3634; border-radius: 0 0 8px 8px; margin-top: -1px; }
/* podcast cover */
.sw-podart { width: 56%; aspect-ratio: 1; background: var(--night); color: #fff; padding: 8%; display: flex; flex-direction: column; border-radius: 6px; box-shadow: 0 16px 30px -16px rgba(20,22,28,.6); }
.sw-podart .ep { font: 500 8px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.sw-podart b { font: 500 clamp(14px, 1.6vw, 20px)/1.05 var(--serif); margin-top: 10%; }
.sw-podart p { font-size: 9px; line-height: 1.3; color: #cfc8c2; margin: 8px 0 0; }
.sw-podart .wave { margin-top: auto; height: 18%; display: flex; align-items: center; gap: 2px; }
.sw-podart .wave i { flex: 1; background: rgba(255,255,255,.55); border-radius: 1px; }
/* LinkedIn carousel */
.sw-li .sw-art { align-content: center; gap: 10px; }
.sw-cards { position: relative; width: 50%; aspect-ratio: 4 / 5; }
.sw-slide { position: absolute; inset: 0; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.sw-slide.s3 { transform: translate(22%, 4%) rotate(5deg); opacity: .6; } .sw-slide.s2 { transform: translate(11%, 2%) rotate(2.5deg); }
.sw-slide.s1 { padding: 10%; display: flex; flex-direction: column; box-shadow: 0 12px 24px -16px rgba(20,22,28,.5); }
.sw-slide.s1 small { font-size: 8px; color: var(--muted); }
.sw-slide.s1 b { font: 500 clamp(13px, 1.4vw, 17px)/1.12 var(--serif); margin-top: 14%; }
.sw-slide.s1 span { margin-top: auto; font-size: 8px; font-weight: 600; color: var(--brick); }
.sw-meta { margin: 0; font-size: 11px; color: var(--muted); }
/* video still */
.sw-still { position: absolute; inset: 0; }
.sw-still .cap { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); width: max-content; max-width: 86%; text-align: center; background: rgba(20,22,28,.82); color: #fff; font: 600 clamp(11px, 1.1vw, 14px)/1.3 var(--sans); padding: 5px 10px; border-radius: 3px; }
.sw-still .dur { position: absolute; right: 10px; top: 10px; background: rgba(20,22,28,.7); color: #fff; font: 600 10px var(--sans); padding: 2px 6px; border-radius: 3px; }
/* printed feature */
.sw-paper { width: 62%; aspect-ratio: 3 / 4; background: #fffdf9; padding: 7%; box-shadow: 0 14px 28px -16px rgba(20,22,28,.5); transform: rotate(2deg); display: flex; flex-direction: column; }
.sw-paper small { font: 500 7px var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--brick); border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
.sw-paper b { font: 500 clamp(13px, 1.4vw, 17px)/1.08 var(--serif); margin: 8% 0 7%; }
.sw-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 7%; flex: 1; }
.sw-img { aspect-ratio: 3 / 4; overflow: hidden; }
.sw-text { display: grid; align-content: start; gap: 5px; } .sw-text span { height: 3px; background: var(--line); } .sw-text span:nth-child(3n) { width: 70%; }
@media (max-width: 900px) { .sw-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (max-width: 520px) { .sw-grid { grid-template-columns: 1fr; } .sw-cover b, .sw-podart b { font-size: 18px; } }

/* Proof blocks that stay hidden until real content exists. */
.oh-grid, .cr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.oh { color: inherit; text-decoration: none; } .oh .pic { aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 12px; } .oh b { display: block; font: 500 1.1rem/1.25 var(--serif); }
.cr { border-top: 1px solid var(--ink); padding-top: 16px; } .cr .num { font: 400 3rem/1 var(--serif); display: block; } .cr small, .cr .who { font-size: 14px; color: var(--muted); }
@media (max-width: 760px) { .oh-grid, .cr-grid { grid-template-columns: 1fr 1fr; } }

/* Type peaks (PRD v8 4): 1920 first, the halo line second, then everything else. */
.band .inner { max-width: 640px; }
.band .letter-copy .punch { font: 400 italic clamp(2.25rem, 4.2vw, 3.9rem)/1.08 var(--serif); letter-spacing: -0.02em; margin: .6em 0; }
.fig .num { font-size: clamp(3rem, 4.6vw, 3.6rem); }
.statement-c p.display { font-size: clamp(2.1rem, 3.6vw, 3.25rem); }
@media (max-width: 760px) { .statement-c p.display { font-size: 2.1rem; } .band .letter-copy .punch { font-size: 2.1rem; } }

/* Packages: the promise is one line now. */
.promise-line { font: 400 1.35rem/1.4 var(--serif); max-width: 40ch; margin: 0 auto; text-align: center; }
.promise-line a { white-space: nowrap; }

/* Result: long "already done" lists fold to two. */
.built-more[hidden] { display: none; }
.head .deck { text-wrap: pretty; }
.hero2.v8 .photo .frame img { filter: brightness(1.07); }
@media (max-width: 600px) {
  .hero2.v8 .ncards { width: 54%; right: 8px; top: 10px; }
  .hero2.v8 .nc .ch { display: none; }
  .hero2.v8 .nc { padding: 7px 9px; }
  .strip strong { font-size: 26px; white-space: nowrap; }
}
.hero2.v8 .nc > div { min-width: 0; }
.hero2.v8 .nc p, .hero2.v8 .nc b { white-space: normal; overflow-wrap: anywhere; }
.hero2.v8 .ncards { grid-template-columns: minmax(0, 1fr); }
.hero2.v8 .nc { width: auto; min-width: 0; }
.band .inner { max-width: 540px; }
.band .letter-copy .punch { font-size: clamp(2.1rem, 3.6vw, 3.4rem); }

/* No layout shift from the JS header and footer: hold the header's 73px until it arrives,
   and keep main at least a screen tall so the footer never jumps when content renders. */
body:not(:has(> .site-header)) { padding-top: 73px; }
main { min-height: 100vh; }
.foot-grid h2.foot-h { font: 500 12px var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.band .letter-copy .punch { font-size: clamp(2.1rem, 3.2vw, 3rem); }

/* ===== v9: lean pages, every page a sales page ===== */
/* 1.1 Layout tokens */
:root { --maxw: 1200px; }
section { padding: 72px 0; }
.statement-c { padding: 56px 0; }
.statement-c p.display { font-size: 48px; max-width: 20ch; }
.head { margin-bottom: 32px; }
h2 { margin-bottom: 16px; }
.band .wrap { padding-top: 72px; padding-bottom: 72px; }
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  section { padding: 48px 0; }
  .statement-c { padding: 40px 0; } .statement-c p.display { font-size: 32px; }
  h2 { margin-bottom: 12px; }
  .band .wrap { padding-top: 48px; padding-bottom: 48px; }
}
/* Interior heroes: image 5 of 12 columns, at most 460px tall; no empty hero. */
.split-head .grid { grid-template-columns: 5fr 7fr; align-items: center; gap: 56px; }
.split-head .pic { aspect-ratio: auto; height: min(460px, 60vh); max-height: 460px; min-height: 0; }
.split-head .pic img { width: 100%; height: 100%; object-fit: cover; }
.split-head { padding: 40px 0 48px; }
/* Splits: the image matches the text block, between 320 and 480px. */
.duo { grid-template-columns: 5fr 7fr; align-items: stretch; }
.duo .pic, .duo .pic.wide { aspect-ratio: auto; height: 100%; min-height: 320px; max-height: 480px; align-self: center; }
.duo .pic img { width: 100%; height: 100%; object-fit: cover; }
.year-block .pic { aspect-ratio: auto; max-height: 300px; height: 300px; }
.year-block .pic img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .split-head .grid, .duo { grid-template-columns: 1fr; gap: 28px; }
  .split-head .pic { height: 320px; }
  .duo .pic, .duo .pic.wide { height: 240px; min-height: 0; }
}
/* Home hero: at most 600px. */
.hero2 .photo { height: min(560px, 64vh); }
.hero2.v8 .l3 .l3-name { letter-spacing: .06em; }

/* Header phone */
.nav-phone { font: 500 14px var(--sans); color: var(--ink); text-decoration: none; margin-right: 16px; white-space: nowrap; }
@media (max-width: 1060px) { .nav-phone { display: none; } }

/* [C] proof bar sits tight under heroes */
.kit-proof { padding: 0 0 24px; }
.kit-proof .strip { margin-top: 0; }
@media (max-width: 760px) { .strip.proof span { font-size: 13px; } }

/* [D] mid-page CTA */
.kit-mid { padding: 40px 0; }
.mid-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); padding-top: 28px; padding-bottom: 28px; }
.mid-cta p { margin: 0; font: 400 28px/1.2 var(--serif); max-width: 26ch; color: var(--ink); }
@media (max-width: 760px) { .mid-cta { flex-direction: column; align-items: flex-start; } .mid-cta p { font-size: 24px; } }

/* [E] FAQ */
.faq-wrap { display: grid; grid-template-columns: 4fr 8fr; gap: 56px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font: 500 1.12rem/1.35 var(--serif); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font: 400 1.5rem var(--sans); color: var(--muted); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 20px; max-width: 60ch; color: var(--muted); }
@media (max-width: 860px) { .faq-wrap { grid-template-columns: 1fr; gap: 16px; } }

/* [F] risk reversal */
.kit-risk { padding: 48px 0; }
.risk { border: 1px solid var(--ink); padding: 32px 36px; display: grid; grid-template-columns: 4fr 8fr; gap: 32px; align-items: center; }
.risk h3 { font-size: 1.75rem; margin: 0; }
.risk ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.risk li { padding-left: 28px; position: relative; }
.risk li::before { content: ""; position: absolute; left: 0; top: .5em; width: 14px; height: 8px; border-left: 2px solid var(--brick); border-bottom: 2px solid var(--brick); transform: rotate(-45deg); }
@media (max-width: 760px) { .risk { grid-template-columns: 1fr; padding: 24px 20px; gap: 16px; } }

/* Good fit */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fit > div { padding: 28px; background: #fff; border: 1px solid var(--line); }
.fit h3 { font-size: 1.25rem; margin-bottom: 14px; }
.fit ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.fit .no { background: transparent; }
.fit .no li { color: var(--muted); }
@media (max-width: 760px) { .fit { grid-template-columns: 1fr; } }

/* Comparison table */
.cmp-scroll { overflow-x: auto; }
.cmp { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .96rem; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cmp thead th { font: 500 1.05rem var(--serif); border-bottom: 1px solid var(--ink); }
.cmp tbody th { font-weight: 600; width: 16%; }
.cmp .us { background: #fff; }
.cmp thead .us { color: var(--brick); }

/* [G] final band phone */
.band-tel { margin: 20px 0 0; color: #b9b2ac; font-size: 15px; }
.band-tel a { color: #fff; }

/* Founder */
.kit-founder .lead { font: 400 1.6rem/1.35 var(--serif); }

/* "Here's what we build for you" */
.build-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 32px; }
.build-name { display: grid; gap: 6px; width: 320px; max-width: 100%; }
.build-name span { font-size: 14px; font-weight: 500; color: var(--muted); }
.build-name input { font: 500 1.1rem var(--sans); padding: 12px 14px; border: 1px solid var(--ink); border-radius: 2px; background: #fff; color: var(--ink); }
.build-cta { margin-top: 32px; }
@media (max-width: 760px) { .build-head { flex-direction: column; align-items: stretch; gap: 16px; } .build-name { width: 100%; } }
.sw figcaption { color: var(--ink); font: 400 1.05rem/1.3 var(--serif); }
.sw-cover b { margin-top: 10%; }
.sw-podart b { margin-top: 8%; }
.sw-post { width: 72%; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 14px; box-shadow: 0 12px 24px -18px rgba(20,22,28,.5); }
.sw-post .who { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.sw-post .av { width: 26px; height: 26px; border-radius: 50%; background: var(--brick); color: #fff; display: grid; place-items: center; font: 600 12px var(--sans); }
.sw-post .who b { display: block; font: 600 12px var(--sans); } .sw-post .who small { font-size: 10px; color: var(--muted); }
.sw-post p { font-size: 11.5px; line-height: 1.4; margin: 0 0 10px; }
.sw-post .sw-meta { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 6px; font-size: 10px; color: var(--muted); }
.sw-answer { width: 80%; display: grid; gap: 10px; }
.sw-answer .q { background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 8px 14px; font-size: 12px; color: var(--muted); }
.sw-answer .a { display: flex; gap: 10px; background: #fff; border-radius: 8px; padding: 12px; box-shadow: 0 12px 24px -18px rgba(20,22,28,.5); }
.sw-answer .spark { flex: none; width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(var(--brick), var(--red), var(--brick)); }
.sw-answer p { margin: 0; font-size: 12px; line-height: 1.45; }
.sw-paper b { font-size: clamp(12px, 1.25vw, 15px); font-style: italic; }
.sw-byline { font: 600 10px var(--sans); color: var(--brick); }
.sw-program { width: 62%; background: #fffdf9; padding: 16px; box-shadow: 0 14px 28px -16px rgba(20,22,28,.5); transform: rotate(-1.5deg); display: grid; gap: 8px; }
.sw-program small { font: 500 8px var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--brick); border-bottom: 1px solid var(--ink); padding-bottom: 6px; }
.sw-program .row { display: grid; grid-template-columns: 36px 1fr; font-size: 11px; color: var(--muted); }
.sw-program .row.key { color: var(--ink); font: 500 14px/1.25 var(--serif); padding: 6px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* [I] mobile sticky bar */
.sticky-cta { display: none; }
@media (max-width: 760px) {
  .sticky-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(250,247,244,.96); border-top: 1px solid var(--line); backdrop-filter: blur(8px); }
  .sticky-cta .btn { width: 100%; justify-content: center; }
  body.has-sticky { padding-bottom: 72px; }
}

/* [J] exit prompt */
.exit-prompt { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 340px; max-width: calc(100% - 32px); background: #fff; border: 1px solid var(--ink); padding: 20px; box-shadow: 0 24px 48px -24px rgba(20,22,28,.5); animation: nc-in .4s ease both; }
.exit-prompt p { margin: 0 0 14px; }
.exit-prompt div { display: flex; gap: 16px; align-items: center; }
@media (max-width: 760px) { .exit-prompt { bottom: 84px; right: 16px; } }

/* Footer always at the bottom of a short page. */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; min-height: 0; }

/* Where you show up: six compact splits, image left. */
.chan-list { display: grid; gap: 40px; }
.chan-block { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; }
.chan-block .pic { height: 280px; max-height: 320px; overflow: hidden; border-radius: 2px; }
.chan-block .pic img { width: 100%; height: 100%; object-fit: cover; }
.chan-block h3 { font-size: 1.75rem; margin: 8px 0 10px; }
.chan-block p { margin: 0; max-width: 46ch; }
@media (max-width: 760px) { .chan-block { grid-template-columns: 1fr; gap: 16px; } .chan-block .pic { height: 220px; } }
.split-head .under, .kit-under { margin: 12px 0 0; font-size: 14px; color: var(--muted); }

/* Thank-you: hero image at most 420px, link cards 220px. */
.thanks-page .split-head .pic, body:has(#calSec) .split-head .pic { height: min(420px, 60vh); }
.linkcards .pic { aspect-ratio: auto; height: 220px; }
.linkcards .pic img { width: 100%; height: 100%; object-fit: cover; }

/* Book a call: two paths side by side. */
.book-head { padding: 40px 0 8px; }
.book-head h1 { max-width: 22ch; }
.book-paths { padding-top: 24px; }
.book-paths .grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
.book-paths .aside-note, .book-paths .promise { margin-top: 24px; }
.book-paths .aside-note:first-child { margin-top: 0; }
.path-h { font-size: 1.5rem; margin-bottom: 20px; }
.cal iframe { width: 100%; height: 640px; border: 1px solid var(--line); background: #fff; }
@media (max-width: 900px) { .book-paths .grid { grid-template-columns: 1fr; gap: 32px; } .book-paths .grid:has(#calBox:empty) > div:last-child { order: -1; } }

/* Quiz intro: image at most 420px, "What you'll get", proof bar on the intro only. */
.quiz-intro ~ * {}
.quiz-side .pic.tall { max-height: 420px; height: 420px; }
.quiz-side .pic.tall img { width: 100%; height: 100%; object-fit: cover; }
.get-h { font-size: 1.25rem; margin: 24px 0 10px; }
.get-list { margin: 0 0 24px; padding-left: 20px; display: grid; gap: 6px; }
body:not(.quiz-at-intro) .intro-only { display: none; }
.save-email { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.save-email label:first-child { font-weight: 500; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--muted); }

/* Kit modules inside the result letter: no extra gutters, two-column mockups. */
.in-letter > .wrap { padding-left: 0; padding-right: 0; max-width: none; }
.in-letter .build-head { flex-direction: column; align-items: stretch; gap: 14px; }
.in-letter .build-name { width: 100%; }
.in-letter .build-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
.in-letter .build-cta { display: none; }
.in-letter .faq-wrap { grid-template-columns: 1fr; gap: 12px; margin-top: 40px; }
.in-letter .risk { grid-template-columns: 1fr; gap: 14px; margin: 24px 0; }
@media (max-width: 520px) { .in-letter .build-grid { grid-template-columns: 1fr; } }

/* ===== Home hero: one full-bleed photo, copy left, channel cards right, chevron down ===== */
.hero-full { position: relative; min-height: 560px; height: calc(100svh - 73px); max-height: 900px; padding: 0; display: flex; align-items: center; overflow: hidden; background: var(--night); color: #fff; }
.hero-full .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.hero-full::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(20,22,28,.86) 0%, rgba(20,22,28,.7) 36%, rgba(20,22,28,.12) 62%, rgba(20,22,28,0) 100%), linear-gradient(0deg, rgba(20,22,28,.45), rgba(20,22,28,0) 30%); }
.hero-inner { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 560px) 1fr; gap: 48px; align-items: end; }
.hero-copy { align-self: center; }
.hero-full .eyebrow { color: #fff; }
.hero-full h1 { color: #fff; margin: 0; letter-spacing: -0.025em; }
.hero-full h1 .big { display: block; font-size: clamp(2.4rem, 4.2vw, 3.8rem); line-height: 1.03; }
.hero-full h1 .small { display: block; font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 1.1; margin-top: 6px; color: #d9d3cd; }
.hero-full h1 .small em { color: #fff; }
.hero-full .deck { color: #e6e0da; margin-top: 20px; font-size: 1.2rem; max-width: 30em; }
.hero-full .deck strong { color: #fff; font-weight: 500; }
.hero-full .hero-cta { margin-top: 28px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero-full .or, .hero-full .or a { color: #fff; }
.hero-full .under { margin: 14px 0 0; font-size: 14px; color: #cfc8c2; }
.hero-side { justify-self: end; align-self: end; margin-bottom: 88px; width: 290px; display: grid; gap: 10px; }
.hero-side .l3 { position: static; justify-self: start; }
.hero-side .ncards { position: static; width: auto; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.hero-side .nc { position: static; width: auto; max-width: none; margin: 0; display: flex; gap: 11px; align-items: center; padding: 11px 14px 11px 11px; border-radius: 12px; background: rgba(255,255,255,.96); border: 0; }
.hero-side .nc > div { min-width: 0; }
.hero-side .nc .ch { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: #fff; display: grid; place-items: center; }
.hero-side .nc:nth-child(2) .ch { background: var(--brick); }
.hero-side .nc:nth-child(3) .ch { background: var(--paper-deep); color: var(--ink); }
.hero-side .nc .ch svg { width: 16px; height: 16px; }
.hero-side .nc b { font-size: 12px; } .hero-side .nc p { font-size: 14px; }
.hero-side .nc:nth-child(3) { animation-delay: 1.2s; }
.hero-next { position: absolute; z-index: 3; left: 50%; bottom: 20px; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.5); animation: nudge 2.4s ease-in-out infinite; }
.hero-next svg { width: 22px; height: 22px; }
.hero-next:hover { background: rgba(255,255,255,.12); }
@keyframes nudge { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) { .hero-next { animation: none; } }
@media (max-width: 900px) {
  .hero-full { height: auto; min-height: calc(100svh - 73px); max-height: none; align-items: flex-end; }
  .hero-full .hero-bg { object-position: 72% 30%; }
  .hero-full::before { background: linear-gradient(180deg, rgba(20,22,28,.1) 0%, rgba(20,22,28,.55) 38%, rgba(20,22,28,.9) 62%, rgba(20,22,28,.95) 100%); }
  .hero-inner { grid-template-columns: 1fr; padding-top: 32vh; padding-bottom: 84px; gap: 24px; }
  .hero-side { display: none; }
  .hero-full .deck { font-size: 1.05rem; }
}

/* "Here's what changes": straight under the hero, centered. */
.changes-c .wrap { max-width: 760px; text-align: center; }
.changes-c h2 { margin: 0 auto 28px; max-width: 18ch; }
.changes-c .benefits { text-align: left; }
.changes-tail { margin: 24px auto 0; color: var(--muted); font-size: 15px; }

/* Standing rule: image and visuals LEFT, text RIGHT. The owner and his cards sit left, copy right. */
.hero-full .hero-bg { object-position: 40% 40%; }
.hero-full::before { background: linear-gradient(270deg, rgba(20,22,28,.86) 0%, rgba(20,22,28,.7) 36%, rgba(20,22,28,.12) 62%, rgba(20,22,28,0) 100%), linear-gradient(0deg, rgba(20,22,28,.45), rgba(20,22,28,0) 30%); }
.hero-inner { grid-template-columns: 1fr minmax(0, 560px); }
.hero-side { justify-self: start; }
@media (max-width: 900px) {
  .hero-full .hero-bg { object-position: 28% 30%; }
  .hero-full::before { background: linear-gradient(180deg, rgba(20,22,28,.1) 0%, rgba(20,22,28,.55) 38%, rgba(20,22,28,.9) 62%, rgba(20,22,28,.95) 100%); }
  .hero-inner { grid-template-columns: 1fr; }
}
/* Consultant hero: he stands in the left third; his cards sit to his right, over the window. */
.hero-full .hero-bg { object-position: 30% 40%; }
.hero-side { justify-self: end; margin-right: 8px; }
/* Notifications on the left, the consultant a little right of them. */
.hero-full .hero-bg { object-position: 0% 40%; }
.hero-side { justify-self: start; margin-right: 0; }
@media (max-width: 900px) { .hero-full .hero-bg { object-position: 24% 30%; } }
.hero-side { width: 264px; }

/* ===== Mobile pass (user feedback) ===== */
@media (max-width: 760px) {
  /* Sticky bar slides in only after the first button has gone. */
  .sticky-cta { transform: translateY(110%); transition: transform .25s ease; }
  .sticky-cta.show { transform: none; }
  body.has-sticky { padding-bottom: 0; }
  body.has-sticky .site-footer { padding-bottom: 96px; }
}
@media (max-width: 900px) {
  /* Hero: notifications over the top of the photo, copy below, no empty band. */
  .hero-inner { padding-top: 20px; padding-bottom: 76px; gap: 28px; align-content: space-between; min-height: calc(100svh - 73px); }
  .hero-side { display: grid; width: min(300px, 84%); margin: 0; justify-self: start; align-self: start; gap: 8px; }
  .hero-side .l3 .l3-name { font-size: 15px; }
  .hero-side .nc { padding: 8px 10px 8px 8px; gap: 9px; border-radius: 10px; }
  .hero-side .nc .ch { width: 26px; height: 26px; }
  .hero-side .nc b { font-size: 11px; } .hero-side .nc p { font-size: 13px; line-height: 1.3; }
  .hero-full::before { background: linear-gradient(180deg, rgba(20,22,28,.25) 0%, rgba(20,22,28,.15) 30%, rgba(20,22,28,.8) 55%, rgba(20,22,28,.94) 100%); }
  .hero-full h1 .big { font-size: 2.15rem; } .hero-full h1 .small { font-size: 1.8rem; }
  .hero-full .deck { margin-top: 14px; }
  .hero-full .hero-cta { margin-top: 20px; }
}
@media (max-width: 760px) {
  /* Wherever they look: two per row, icon inline, one line each. */
  .channels { grid-template-columns: 1fr 1fr; gap: 18px 16px; }
  .channels li { padding-top: 12px; display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; align-items: start; }
  .channels .ch-ico { width: 20px; height: 20px; margin: 2px 0 0; grid-row: span 2; }
  .channels b { font-size: 17px; margin-bottom: 2px; }
  .channels p { font-size: 13.5px; line-height: 1.35; }
  .ch-foot { margin-top: 20px; font-size: 14px; }
  /* What we build: two per row. */
  .sw-grid, .build-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .sw figcaption { font-size: 14px; margin-top: 8px; }
  .sw-cover b, .sw-podart b { font-size: 13px; }
  /* Figures: tight rows, number left. */
  .figs-sec { padding: 32px 0; }
  .figs { grid-template-columns: 1fr; gap: 0; margin-top: 0; }
  .fig { display: grid; grid-template-columns: 92px 1fr; column-gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); }
  .fig:last-child { border-bottom: 1px solid var(--line); }
  .fig .num { font-size: 40px; padding: 0; margin: 0; border: 0; grid-row: span 2; }
  .fig p { margin: 0 0 4px; font-size: 15px; line-height: 1.4; }
  .fig .src { font-size: 12px; }
}
@media (max-width: 760px) {
  /* Field picker: two per row, one line each. */
  .picker .ptiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .picker .ptile { padding: 12px; display: flex; align-items: center; gap: 8px; min-height: 0; }
  .picker .ptile .tile-ico { width: 18px; height: 18px; margin: 0; flex: none; }
  .picker .ptile .tile-ico svg { width: 18px; height: 18px; }
  .picker .ptile b { font-size: 15px; line-height: 1.2; margin: 0; }
  .picker .ptile > span:not(.tile-ico) { display: none; }
  .picker .pgroup { margin-bottom: 16px; }
  .picker .pgroup .label { margin-bottom: 8px; }
}
@media (max-width: 760px) { .picker .ptile { flex-direction: row; justify-content: flex-start; text-align: left; padding: 12px; } }

/* Headlines in Oswald, the banner face (user decision). Inter for everything else. */
h1, h2, .statement-c p.display, .band .huge, .mid-cta p, .channels b, .changes-c .benefits b, .fig .num, .strip strong {
  font-family: Oswald, "Arial Narrow", sans-serif; font-weight: 500; letter-spacing: 0; font-style: normal;
}
h1 em, h2 em, .statement-c p.display em { font-style: normal; color: var(--brick); }
.hero-full h1 .big { font-size: clamp(2.6rem, 4.6vw, 4.2rem); line-height: 1.02; }
.hero-full h1 .small { font-size: clamp(2.2rem, 3.7vw, 3.4rem); line-height: 1.05; color: #e9c9c4; }
.hero-full h1 .small em { color: #fff; }
h2 { line-height: 1.08; }
.band .letter-copy .punch { font-family: Oswald, sans-serif; font-style: normal; font-weight: 500; line-height: 1.08; }

h3, .faq summary { font-family: Oswald, "Arial Narrow", sans-serif; font-weight: 500; letter-spacing: 0; }
.faq summary { font-size: 1.05rem; }
.sw figcaption, .letter-copy p, .quote, .kit-founder .lead, .promise-line, .ba p, .pattern dd { font-family: var(--sans); font-style: normal; }

/* ===== Home polish (user feedback): benefit cards, channel cards, halo band, build, FAQ ===== */
.changes-c .wrap { max-width: var(--wrap); }
.changes-c h2, .ch-sec h2 { max-width: none; font-size: clamp(2rem, 3.4vw, 3.1rem); margin: 0 auto 14px; text-align: center; }
.ch-sec .wrap { text-align: center; }
.ch-sec .deck { margin: 0 auto 44px; max-width: 40em; font-size: 1.1rem; }
.changes-c h2 { margin-bottom: 44px; }
/* What changes: the phone on the left, five big lines on the right. */
.changes-c h2 { margin-bottom: 48px; }
.chg { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; text-align: left; }
.chg .pic { position: sticky; top: 96px; overflow: hidden; border-radius: 2px; }
.chg .pic img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.chg-list { list-style: none; margin: 0; padding: 0; }
.chg-list li { padding: 26px 0; border-top: 1px solid var(--ink); }
.chg-list li:first-child { padding-top: 0; border-top: 0; }
.chg-list b { display: block; font: 500 clamp(1.7rem, 2.6vw, 2.4rem)/1.05 Oswald, "Arial Narrow", sans-serif; color: var(--ink); margin-bottom: 10px; }

.chg-list p { margin: 0; font-size: 1.1rem; line-height: 1.5; color: var(--muted); max-width: 34em; }
.changes-tail { text-align: center; margin-top: 48px; font: 500 clamp(1.3rem, 2vw, 1.7rem)/1.25 Oswald, sans-serif; color: var(--ink); }

/* Six channels: real photos with a TV lower third. */
.chx { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px; text-align: left; }
.chx .pic { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--night); }
.chx .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chx .lt { position: absolute; left: 0; bottom: 18px; background: var(--red); color: #fff; font: 500 1.35rem/1 Oswald, sans-serif; padding: 10px 18px 11px 16px; box-shadow: inset 5px 0 0 var(--brick); }
.chx p { margin: 14px 0 0; font-size: 1.05rem; color: var(--ink); }
@media (max-width: 900px) { .chg { grid-template-columns: 1fr; gap: 28px; } .chg .pic { position: static; } .chg .pic img { aspect-ratio: 16 / 10; } .chx { grid-template-columns: 1fr 1fr; gap: 24px 14px; } }
@media (max-width: 760px) {
  .changes-c h2, .ch-sec h2 { font-size: 1.85rem; }
  .changes-c h2 { margin-bottom: 24px; } .ch-sec .deck { margin-bottom: 24px; font-size: 1rem; }
  .chg-list li { padding: 18px 0; } .chg-list b { font-size: 1.5rem; margin-bottom: 6px; } .chg-list p { font-size: 1rem; }
  .changes-tail { margin-top: 28px; font-size: 1.2rem; }
  .chx .lt { font-size: 1rem; padding: 7px 12px 8px 12px; bottom: 10px; } .chx p { font-size: .92rem; margin-top: 8px; line-height: 1.35; }
}

/* Wider statements and final band (user feedback). */
.statement-c p.display { max-width: 30ch; font-size: clamp(2.4rem, 4.4vw, 4rem); line-height: 1.05; }
.kit-final h2 { max-width: 26ch; margin-left: auto; margin-right: auto; font-size: clamp(2.2rem, 3.8vw, 3.4rem); }
@media (max-width: 760px) { .statement-c p.display { font-size: 2.2rem; } .kit-final h2 { font-size: 2rem; } }

/* The halo band: him on the left in the light, the line on the right. */
.halo-img { position: relative; padding: 0; min-height: min(70vh, 640px); display: grid; align-items: center; background: var(--night); overflow: hidden; }
.halo-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.halo-img::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(270deg, rgba(20,22,28,.85) 0%, rgba(20,22,28,.55) 40%, rgba(20,22,28,0) 70%); }
.halo-img .wrap { position: relative; z-index: 2; width: 100%; }
.halo-img .inner { margin-left: auto; max-width: 540px; padding: 64px 0; }
.halo-img .eyebrow { color: #fff; }
.halo-img .hl { margin: 0; font: 500 clamp(2.4rem, 4.4vw, 4rem)/1.04 Oswald, "Arial Narrow", sans-serif; color: #fff; text-wrap: balance; }
.halo-img .hl em { font-style: normal; color: #f0b9b2; }
@media (max-width: 760px) {
  .halo-img { min-height: 480px; align-items: end; }
  .halo-img > img { object-position: 22% 50%; }
  .halo-img::before { background: linear-gradient(180deg, rgba(20,22,28,0) 25%, rgba(20,22,28,.9) 80%); }
  .halo-img .inner { padding: 40px 0; } .halo-img .hl { font-size: 2.2rem; }
}

/* "Here's what we build for you": centered head, a big name field, each piece on its own colour. */
.kit-build .build-head { flex-direction: column; align-items: center; text-align: center; gap: 22px; margin-bottom: 44px; }
.kit-build .build-head h2 { font-size: clamp(2rem, 3.4vw, 3.1rem); margin-bottom: 8px; }
.kit-build .build-head .deck { margin: 0 auto; font-size: 1.1rem; }
.kit-build .build-name { width: min(460px, 100%); }
.kit-build .build-name span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.kit-build .build-name input { text-align: center; font: 500 1.6rem Oswald, "Arial Narrow", sans-serif; padding: 14px 18px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; box-shadow: 0 16px 32px -24px rgba(20,22,28,.5); }
.kit-build .build-name input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 4px rgba(221,51,38,.15); }
.kit-build .sw-art { border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(20,22,28,.05); }
.kit-build .sw-book .sw-art { background: radial-gradient(120% 90% at 30% 20%, #fbeee4, #ecd5c3); }
.kit-build .sw-pod .sw-art { background: radial-gradient(120% 90% at 70% 20%, #f3e3de, #d9b9b1); }
.kit-build .sw-li .sw-art { background: radial-gradient(120% 90% at 30% 20%, #eef1f5, #d4dbe4); }
.kit-build .sw-ai .sw-art { background: radial-gradient(120% 90% at 70% 20%, #f2efe9, #ddd5c8); }
.kit-build .sw-feat .sw-art { background: radial-gradient(120% 90% at 30% 20%, #ece9e3, #cfc8bc); }
.kit-build .sw-stage .sw-art { background: radial-gradient(120% 90% at 50% 0%, #4a3a36, #1f1b1d); }
.kit-build .sw figcaption { margin-top: 14px; font-size: 1rem; }
.kit-build .sw figcaption span { display: block; font: 500 .78rem Oswald, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--brick); margin-bottom: 4px; }
.kit-build .build-cta { justify-content: center; margin-top: 44px; }
@media (max-width: 760px) { .kit-build .build-head { margin-bottom: 24px; gap: 14px; } .kit-build .build-head h2 { font-size: 1.85rem; } .kit-build .build-name input { font-size: 1.25rem; } .kit-build .sw figcaption { font-size: 14px; } .kit-build .sw figcaption span { font-size: .7rem; } }

/* FAQ: editorial rules, big questions, no cards. */
.kit-faq .faq-wrap { align-items: start; }
.kit-faq .faq-wrap > h2 { position: sticky; top: 96px; font-size: clamp(2rem, 3.2vw, 2.9rem); }
.kit-faq .faq details { border-top: 1px solid var(--ink); }
.kit-faq .faq details:last-child { border-bottom: 1px solid var(--ink); }
.kit-faq .faq summary { padding: 22px 56px 22px 0; font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.2; }
.kit-faq .faq summary::after { content: "+"; top: 50%; transform: translateY(-50%); right: 0; font: 300 2rem/1 var(--sans); color: var(--brick); transition: transform .2s; }
.kit-faq .faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); content: "+"; }
.kit-faq .faq details p { margin: -6px 0 24px; font-size: 1.05rem; }
@media (max-width: 860px) { .kit-faq .faq-wrap > h2 { position: static; font-size: 1.85rem; } .kit-faq .faq summary { font-size: 1.1rem; padding: 16px 40px 16px 0; } }
.halo-img .inner { max-width: 640px; }
.kit-build .sw-paper { width: 50%; }
@media (max-width: 760px) { .kit-build .sw-cover i { display: none; } .kit-build .sw-cover { width: 50%; } }
.statement-c p.display { max-width: 34ch; }

.kit-final h2 { max-width: 40ch; text-wrap: balance; }

/* What changes, quiet version: a wide photo strip, then five fine columns. */
.changes-c { padding: 88px 0 80px; }
.changes-c h2 { margin-bottom: 40px; }
.chg { display: block; }
.chg .pic { position: static; border-radius: 2px; overflow: hidden; margin-bottom: 44px; }
.chg .pic img { aspect-ratio: 21 / 8; height: auto; object-position: 50% 62%; }
.chg-list { display: grid; grid-template-columns: repeat(5, 1fr); }
.chg-list li, .chg-list li:first-child { padding: 4px 28px 0; border: 0; border-left: 1px solid var(--line); }
.chg-list li:first-child { padding-left: 0; border-left: 0; }
.chg-list li:last-child { padding-right: 0; }
.chg-list b { font-size: 1.32rem; line-height: 1.15; margin-bottom: 12px; }
.chg-list b::before { content: ""; display: block; width: 22px; height: 2px; background: var(--red); margin-bottom: 18px; }
.chg-list p { font-size: .98rem; line-height: 1.55; }
.changes-tail { margin-top: 56px; font: 400 1.1rem/1.5 var(--sans); color: var(--muted); }
@media (max-width: 1000px) {
  .chg .pic img { aspect-ratio: 16 / 9; }
  .chg-list { grid-template-columns: 1fr 1fr; gap: 28px 0; }
  .chg-list li, .chg-list li:first-child { border-left: 0; padding: 0 20px 0 0; }
}
@media (max-width: 760px) {
  .changes-c { padding: 56px 0; }
  .chg .pic { margin-bottom: 28px; } .chg .pic img { aspect-ratio: 4 / 3; }
  .chg-list { grid-template-columns: 1fr; gap: 0; }
  .chg-list li, .chg-list li:first-child { padding: 18px 0; border-top: 1px solid var(--line); }
  .chg-list li:first-child { border-top: 0; padding-top: 0; }
  .chg-list b { font-size: 1.2rem; margin-bottom: 6px; } .chg-list b::before { margin-bottom: 12px; }
  .changes-tail { margin-top: 24px; font-size: 1rem; }
}

/* Channel photos: no red blocks; the name sits quietly on a soft shade. */
.chx .pic::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, rgba(20,22,28,0), rgba(20,22,28,.72)); }
.chx .lt { z-index: 1; left: 20px; bottom: 16px; background: none; box-shadow: none; padding: 0; font-size: 1.45rem; }
.chx .lt::before { content: ""; display: block; width: 22px; height: 2px; background: var(--red); margin-bottom: 10px; }
.chx p { color: var(--muted); }
@media (max-width: 760px) { .chx .lt { left: 12px; bottom: 10px; font-size: 1.05rem; } .chx .lt::before { margin-bottom: 6px; width: 16px; } }
.changes-tail { text-wrap: balance; max-width: 40em; }
.chg .pic img { object-position: 30% 50%; }
.kit-final h2 { max-width: none; }
/* The phone strip is a quiet accent, not a feature: slim and low. */
.changes-c { padding: 72px 0 64px; }
.changes-c h2 { margin-bottom: 28px; }
.chg .pic { margin-bottom: 36px; }
.chg .pic img { aspect-ratio: auto; height: clamp(120px, 13vw, 180px); object-position: 22% 72%; }
.changes-tail { margin-top: 40px; }
@media (max-width: 760px) { .changes-c { padding: 48px 0; } .chg .pic { margin-bottom: 24px; } .chg .pic img { aspect-ratio: auto; height: 130px; object-position: 18% 72%; } }
.chg .pic img { object-position: 60% 62%; }
.chg .pic img { object-position: 50% 82%; }
/* One halo section: the glowing figure left, the whole story right. */
.halo-img { min-height: 0; }
.halo-img > img { object-position: 18% 50%; }
.halo-img::before { background: linear-gradient(270deg, rgba(20,22,28,.94) 0%, rgba(20,22,28,.86) 44%, rgba(20,22,28,.25) 72%, rgba(20,22,28,0) 100%); }
.halo-img .inner { max-width: 600px; padding: 96px 0; }
.halo-img h2.hl { font-size: clamp(2.2rem, 3.6vw, 3.3rem); margin-bottom: 28px; }
.halo-img .letter-copy p { color: #d9d3cd; font-size: 1.02rem; line-height: 1.6; margin: 0 0 14px; }
.halo-img .letter-copy .punch { color: #fff; font: 500 1.6rem/1.15 Oswald, "Arial Narrow", sans-serif; margin: 26px 0; }
@media (max-width: 760px) {
  .halo-img { display: block; }
  .halo-img > img { position: relative; height: 300px; object-position: 22% 40%; }
  .halo-img::before { inset: 0 0 auto; height: 300px; background: linear-gradient(180deg, rgba(20,22,28,0) 50%, rgba(20,22,28,1) 100%); }
  .halo-img .inner { padding: 8px 0 56px; } .halo-img h2.hl { font-size: 2rem; }
}
.changes-c h2 { max-width: 22ch; margin-left: auto; margin-right: auto; text-wrap: balance; }
.chg .pic img { object-position: 45% 75%; }
.changes-c h2 { max-width: none; }
@media (max-width: 900px) { .hero-side { justify-self: end; } }
@media (max-width: 900px) { .hero-side .l3 { justify-self: end; } }
/* Mobile figures: number centred against its text, not sitting on the baseline. */
@media (max-width: 760px) {
  .fig { align-items: center; grid-template-rows: auto auto; }
  .fig .num { grid-row: 1 / span 2; align-self: center; line-height: 1; }
  .fig p { align-self: end; margin: 0; }
  .fig .src { align-self: start; margin-top: 4px; }
}
.hero-side .l3 .l3-name { display: block; white-space: nowrap; font-size: 1.12rem; letter-spacing: .02em; }
@media (max-width: 900px) { .hero-side .l3 .l3-name { font-size: 15px; } }
.hero-full h1 .small, .hero-full h1 .small em, .halo-img .hl em { color: #fff; }
@media (max-width: 900px) { .hero-full .hero-cta { flex-direction: column; align-items: flex-end; gap: 12px; } .hero-full .under { text-align: right; } }

/* Home packages teaser: outcomes only, no deliverables. */
.pk-sec .wrap { text-align: center; }
.pk-sec h2 { font-size: clamp(2rem, 3.4vw, 3.1rem); margin: 0 auto 12px; }
.pk-sec .deck { margin: 0 auto 44px; font-size: 1.1rem; }
.pk-cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); text-align: left; }
.pk-cols li { padding: 4px 36px 0; border-left: 1px solid var(--line); }
.pk-cols li:first-child { padding-left: 0; border-left: 0; } .pk-cols li:last-child { padding-right: 0; }
.pk-cols b { display: block; font: 500 1.7rem/1.1 Oswald, "Arial Narrow", sans-serif; color: var(--ink); }
.pk-cols b::before { content: ""; display: block; width: 22px; height: 2px; background: var(--red); margin-bottom: 18px; }
.pk-cols .for { display: block; margin: 10px 0 14px; font-size: .95rem; color: var(--muted); }
.pk-cols p { margin: 0; font-size: 1.05rem; line-height: 1.55; color: var(--ink); }
.pk-cta { margin-top: 44px; display: flex; justify-content: center; }
@media (max-width: 760px) {
  .pk-sec h2 { font-size: 1.85rem; } .pk-sec .deck { margin-bottom: 24px; font-size: 1rem; }
  .pk-cols { grid-template-columns: 1fr; }
  .pk-cols li, .pk-cols li:first-child { padding: 18px 0; border-left: 0; border-top: 1px solid var(--line); }
  .pk-cols li:first-child { border-top: 0; padding-top: 0; }
  .pk-cols b { font-size: 1.4rem; } .pk-cols b::before { margin-bottom: 12px; }
  .pk-cta { margin-top: 24px; }
}
@media (max-width: 900px) { .hero-full .hero-cta { align-items: center; } .hero-full .hero-cta .btn { align-self: stretch; justify-content: center; } .hero-full .under { text-align: center; } }
.chg .pic img { object-position: 50% 35%; }
.chg .pic img { object-position: 50% 72%; }
.chg .pic img { object-position: 50% 58%; }
/* Rotating hero notifications: colour follows the kind of message, not its position. */
.hero-side .nc .ch.k-msg { background: var(--ink); color: #fff; }
.hero-side .nc .ch.k-ok { background: var(--brick); color: #fff; }
.hero-side .nc .ch.k-star { background: var(--paper-deep); color: var(--ink); }
.hero-side .nc { animation-delay: 0s; }
.hero-side .nc:nth-child(1) { animation-delay: .5s; } .hero-side .nc:nth-child(2) { animation-delay: .85s; } .hero-side .nc:nth-child(3) { animation-delay: 1.2s; }
.hero-side .nc.nc-out { transition: opacity .3s ease, transform .3s ease; opacity: 0; transform: translateY(8px) scale(.98); }
/* Fixed-height stack so the plate never moves as messages of different lengths rotate. */
.hero-side .ncards { height: 320px; align-content: start; }
@media (max-width: 900px) { .hero-side .ncards { height: 236px; } }

/* iPhone-style notifications: frosted glass, spring entrance, unhurried. */
.hero-side .nc {
  position: relative; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 20px;
  background: rgba(245, 245, 247, .62); border: 1px solid rgba(255,255,255,.45);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.45);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif;
  animation: nc-ios .9s cubic-bezier(.2,.9,.25,1.05) both;
}
.hero-side .nc .ch { width: 36px; height: 36px; border-radius: 9px; }
.hero-side .nc .ch svg { width: 18px; height: 18px; }
.hero-side .nc b { font: 600 13px/1.3 -apple-system, BlinkMacSystemFont, Inter, sans-serif; color: #1d1d1f; }
.hero-side .nc p { font: 400 14px/1.35 -apple-system, BlinkMacSystemFont, Inter, sans-serif; color: #1d1d1f; margin-top: 1px; }
.hero-side .nc::after { content: "now"; position: absolute; top: 11px; right: 14px; font: 400 12px -apple-system, BlinkMacSystemFont, Inter, sans-serif; color: rgba(29,29,31,.55); }
.hero-side .nc > div { padding-right: 30px; }
.hero-side .nc:nth-child(1) { animation-delay: .7s; } .hero-side .nc:nth-child(2) { animation-delay: 1.7s; } .hero-side .nc:nth-child(3) { animation-delay: 2.7s; }
.hero-side .nc.nc-new { animation-delay: 0s; }
@keyframes nc-ios {
  0% { opacity: 0; transform: translateY(-22px) scale(.94); filter: blur(4px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
.hero-side .nc.nc-out { transition: opacity .6s ease, transform .6s ease; opacity: 0; transform: scale(.92); animation: none; }
@media (max-width: 900px) {
  .hero-side .nc { padding: 10px 12px 10px 10px; border-radius: 16px; gap: 10px; }
  .hero-side .nc .ch { width: 30px; height: 30px; border-radius: 7px; }
  .hero-side .nc b { font-size: 12px; } .hero-side .nc p { font-size: 13px; }
  .hero-side .nc::after { top: 9px; right: 12px; font-size: 11px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hero-side .nc { background: rgba(250,250,252,.94); } }
.hero-side { width: 310px; }
.hero-side .ncards { height: 318px; }
@media (max-width: 900px) { .hero-side { width: min(320px, 86%); } .hero-side .ncards { height: 246px; } }
/* Delays live on the first three cards themselves (inline), never on position. */
.hero-side .nc:nth-child(1), .hero-side .nc:nth-child(2), .hero-side .nc:nth-child(3) { animation-delay: 0s; }
/* Phones: one notification at a time so his head stays in view. */
@media (max-width: 900px) {
  .hero-side .ncards { height: 74px; }
  .hero-side .nc:nth-child(n+2) { display: none; }
  .hero-side .nc { background: rgba(245,245,247,.55); }
}
/* New cards rest visible; the entrance only adds motion, so a delayed start can never leave one hidden. */
.hero-side .nc.nc-new { animation-fill-mode: forwards; }
@media (max-width: 900px) { .hero-side .nc { animation-delay: .2s !important; animation-duration: .7s; } .hero-side .nc.nc-new { animation-delay: 0s !important; } }
@media (max-width: 900px) { .hero-side .nc { animation-duration: .9s; } }