/* Harbor View Media, site v2 (production at harborviewmedia.com). Built on brand sheet v1 (harbor-view-brand). */
:root {
  --ink: #142B32; --red: #D83C2C; --white: #FFFFFF; --paper: #F6F7F5; --paper2: #ECEFEC; --grey: #5E6C72;
  --rule: #D7DCD9; --rule-ink: rgba(255,255,255,.16); --muted-ink: #B9C6C9;
  --accent: #D83C2C;               /* tints the last-updated stamp: it carries the host brand */
  --hdr: 72px;
  --font: "Archivo", "Arial Narrow", Arial, sans-serif;
  --gut: clamp(16px, 4vw, 48px);
  --max: 1240px;
}
@media (max-width: 760px) { :root { --hdr: 60px } }
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--hdr) }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--font); font-stretch: 100%; overflow-x: clip }
img, svg { display: block; max-width: 100% }
a { color: inherit }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut) }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: #fff; padding: 10px 14px; z-index: 100 }
.skip:focus { top: 12px }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px }

/* Type */
.kicker { font: 600 15px/1.3 var(--font); color: var(--grey); margin: 0 0 16px; display: flex; align-items: baseline; gap: 12px }
.kicker__n { color: var(--red); font-variant-numeric: tabular-nums }
.kicker--light { color: var(--muted-ink) }
.h2 { font-stretch: 82%; font-weight: 760; font-size: clamp(36px, 5.4vw, 72px); line-height: .98; letter-spacing: -.012em; margin: 0 0 24px; max-width: 14ch }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; max-width: 62ch; margin: 0 0 40px; color: #2A3D43 }
.lede--light { color: var(--muted-ink) }
h3 { font-stretch: 82%; font-weight: 700; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.05; margin: 0 0 10px }

.split-band i, .hero__band i { display: block; flex: 1 }
.split-band i:first-child, .hero__band i:first-child { background: var(--white) }
.split-band i:last-child, .hero__band i:last-child { background: var(--red) }

/* Header: solid paper, one rule, no blur */
.hdr { position: sticky; top: 0; z-index: 50; height: var(--hdr); background: var(--paper); border-bottom: 1px solid var(--rule) }
.hdr__in { max-width: var(--max); margin: 0 auto; height: 100%; padding: 0 var(--gut); display: flex; align-items: center; gap: 28px }
.hdr__logo img { height: 24px; width: auto }
.hdr__where { margin: 0; font: 600 14px/1 var(--font); color: var(--grey); display: flex; gap: 10px; white-space: nowrap }
.hdr__num { color: var(--red) }
.hdr__nav { margin-left: auto; display: flex; gap: 26px; font-size: 15px }
.hdr__nav a { text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent }
.hdr__nav a:hover, .hdr__nav a[aria-current="true"] { border-color: var(--red) }
.hdr__cta { --kh: 40px; padding: 0 18px; font-size: 15px }
@media (max-width: 1080px) { .hdr__where { display: none } }
@media (max-width: 860px) { .hdr__nav { display: none } .hdr__cta { margin-left: auto } }
@media (max-width: 420px) { .hdr__logo img { height: 20px } .hdr__cta { padding: 0 14px } }

/* Hero */
.hero { position: relative; background: var(--ink); color: #fff; min-height: calc(100svh - var(--hdr)); overflow: hidden; display: flex; align-items: center }
.hero__band { position: absolute; top: 0; right: 0; bottom: 0; width: 18vw; min-width: 120px; display: flex; transform-origin: 100% 50%; will-change: transform }
.hero__copy { position: relative; z-index: 2; width: 100%; max-width: var(--max); margin: 0 auto; padding: clamp(56px, 9vh, 120px) var(--gut) clamp(48px, 8vh, 96px); padding-right: calc(18vw + var(--gut)) }
.hero__h { font-stretch: 82%; font-weight: 780; font-size: clamp(48px, 8.4vw, 136px); line-height: .9; letter-spacing: -.015em; margin: 0 0 28px }
.hero__h .ln { display: block; overflow: hidden; padding-bottom: .06em }
.hero__h .ln > span { display: block }
.hero__sub { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; color: var(--muted-ink); max-width: 46ch; margin: 0 0 36px }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 48px }
.hero__flagline { margin: 0; font-size: 14px; color: var(--muted-ink); letter-spacing: .02em }
.hero__pilot { display: none }
@media (max-width: 760px) {
  .hero { align-items: flex-start }
  .hero__band { top: auto; left: 0; width: auto; height: 14px; min-width: 0 }
  .hero__copy { padding-right: var(--gut); padding-bottom: 64px }
}

/* Cinematic hero (desktop, motion allowed): the band widens to a full-screen flag, then the pilot line lands */
.motion .hero__pilot { display: grid; grid-template-columns: 1fr 1fr; position: absolute; inset: 0; z-index: 3; pointer-events: none; visibility: hidden }
.hero__pilot-l, .hero__pilot-r { display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(32px, 5vw, 80px) }
.hero__pilot-l { color: var(--ink) }
.hero__pilot-k { font: 600 13px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin: 0 0 18px }
.hero__pilot-big { font-stretch: 82%; font-weight: 780; font-size: clamp(44px, 5.6vw, 92px); line-height: .94; margin: 0; max-width: 9ch }
.hero__pilot-r p { font-stretch: 82%; font-weight: 700; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.08; color: #fff; margin: 0; max-width: 14ch }

/* Sections */
.sec { padding: clamp(80px, 12vw, 160px) 0; position: relative }
.sec--paper { background: var(--paper) }
.sec--paper2 { background: var(--paper2) }
.sec--ink { background: var(--ink); color: #fff }
.sec--ink .lede { color: var(--muted-ink) }

/* 01 rows: an editorial ledger, not cards */
.rows { margin: 0; border-bottom: 1px solid var(--rule) }
.row { position: relative; display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 12px 48px; padding: 30px 0 32px }
.row__rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); transform-origin: 0 50% }
.row dt { font-stretch: 82%; font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.05 }
.row dd { margin: 0; max-width: 60ch; color: #2A3D43 }
@media (max-width: 760px) { .row { grid-template-columns: 1fr; padding: 24px 0 } }

/* 02 attribution: steps scroll, the diagram holds (CSS sticky, real content travel) */
.attr__grid { display: grid; grid-template-columns: minmax(300px, 4fr) 8fr; grid-template-areas: "head fig" "steps fig"; gap: 0 56px; align-items: start }
.attr__head { grid-area: head }
.attr__steps { grid-area: steps }
.attr__fig { grid-area: fig }
.attr__steps { list-style: none; margin: 0; padding: 0 }
.step { padding: 0 0 0 24px; border-left: 2px solid var(--rule-ink); min-height: 46vh; display: flex; flex-direction: column; justify-content: center; transition: border-color .4s, opacity .4s }
.step + .step { margin-top: 8px }
.step__n { font: 600 13px/1 var(--font); letter-spacing: .12em; color: var(--muted-ink); margin: 0 0 12px }
.js-steps .step.is-on .step__n { color: #fff }
.step p:last-child { color: var(--muted-ink); margin: 0; max-width: 44ch }
.js-steps .step { opacity: .38 }
.js-steps .step.is-on { opacity: 1; border-color: var(--red) }
.attr__fig { margin: 0; position: sticky; top: calc(var(--hdr) + 24px); height: calc(100svh - var(--hdr) - 48px); display: flex; align-items: center; align-self: start }
.attr__stage { width: 100%; border: 1px solid var(--rule-ink); padding: clamp(16px, 2vw, 28px); background: #0F2228 }
@media (max-width: 1023px) {
  .attr__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "fig" "steps"; gap: 0 }
  .attr__fig, .attr__stage { min-width: 0 }   /* a grid item defaults to its min-content width: the 720 px diagram widened the page */
  .attr__fig { position: static; height: auto; margin-bottom: 32px; display: block }
  .step { min-height: 0; padding: 18px 0 18px 20px }
  .js-steps .step { opacity: 1 }
}

/* The diagram */
.dg { width: 100%; height: auto; font-family: var(--font); overflow: visible }
.dg text { fill: #fff; font-size: 24px; font-stretch: 100% }
.dg .dg__k { font-size: 18px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; fill: #B9C6C9 }
.dg .dg__note { font-size: 18px; fill: #8FA2A7 }
.src .node { fill: transparent; stroke: rgba(255,255,255,.4); stroke-width: 2 }
.src text { fill: #9FB0B4 }
.feed { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 2 }
.band { fill: rgba(255,255,255,.06) }
.bar { fill: rgba(255,255,255,.22) }
.route { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: square; stroke-dasharray: 1; stroke-dashoffset: 1 }
.mer__frame { fill: none; stroke: rgba(255,255,255,.16) }
.mer__rows text { font-size: 21px; fill: #C8D3D6 }
.mer__bar { fill: rgba(255,255,255,.55); transform-box: fill-box; transform-origin: 0 50% }
.mer__bar--match { fill: var(--red) }
.dot { fill: #fff }
.dot--match { fill: var(--red) }
.dg *, .dg { transition: fill .5s, stroke .5s, opacity .5s, stroke-dashoffset 1.4s cubic-bezier(.6,0,.2,1), transform .9s cubic-bezier(.6,0,.2,1) }
/* States: data-step 1..6 light the flow in order; 6 is the full, static composition */
.dg[data-step] .src .node { stroke: #fff; fill: rgba(255,255,255,.25) }
.dg[data-step] .src text { fill: #fff }
.dg[data-step] .feed { stroke: rgba(255,255,255,.45) }
.dg[data-step="1"] .bar, .dg[data-step="1"] .band, .dg[data-step="1"] .dg__mer, .dg[data-step="1"] .dg__dots { opacity: .25 }
.dg[data-step="2"] .bar:not(.bar--visit), .dg[data-step="2"] .band, .dg[data-step="2"] .dg__mer { opacity: .25 }
.dg[data-step="3"] .bar--start, .dg[data-step="3"] .bar--funded, .dg[data-step="3"] .band--2, .dg[data-step="3"] .band--3, .dg[data-step="3"] .dg__mer { opacity: .25 }
.dg[data-step="4"] .bar--funded, .dg[data-step="4"] .band--3, .dg[data-step="4"] .dg__mer { opacity: .25 }
.dg[data-step="5"] .dg__mer { opacity: .25 }
.dg[data-step="2"] .bar--visit, .dg[data-step="3"] .bar--lead, .dg[data-step="4"] .bar--start { fill: #fff }
.dg[data-step="5"] .bar--funded, .dg[data-step="6"] .bar--funded { fill: var(--red) }
.dg[data-step="5"] .route, .dg[data-step="6"] .route { stroke-dashoffset: 0 }
.dg[data-step="5"] .src--match .node, .dg[data-step="6"] .src--match .node { stroke: var(--red); fill: var(--red) }
.dg[data-step="5"] .src--match text, .dg[data-step="6"] .src--match text { font-weight: 700 }
.dg[data-step="1"] .mer__bar, .dg[data-step="2"] .mer__bar, .dg[data-step="3"] .mer__bar, .dg[data-step="4"] .mer__bar, .dg[data-step="5"] .mer__bar { transform: scaleX(.08) }
@media (prefers-reduced-motion: reduce) { .dg__dots { display: none } .dg *, .dg { transition: none } }
/* Phones: the diagram keeps a readable size and scrolls sideways inside its frame (gutter kept at both edges) */
.attr__swipe { display: none; margin: 10px 0 0; font-size: 13px; color: var(--muted-ink) }
@media (max-width: 760px) {
  .attr__stage { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 16px; overscroll-behavior-x: contain }
  .attr__stage .dg { width: 720px; max-width: none }
  .attr__swipe { display: block }
}

/* 03 partners */
.partners__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start }
.ticks { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--rule) }
.ticks li { padding: 18px 0 18px 36px; border-bottom: 1px solid var(--rule); position: relative }
.ticks li::before { content: ""; position: absolute; left: 0; top: 30px; width: 16px; height: 2px; background: var(--red) }
.ticks b { font-weight: 650 }
@media (max-width: 900px) { .partners__grid { grid-template-columns: 1fr; gap: 40px } }

/* 04 the channel: a horizontal run, pinned on desktop */
.channel { padding-bottom: clamp(64px, 9vw, 120px) }
.channel__view { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut) }
.channel__track { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0 }
.leg { border-top: 2px solid var(--ink); padding: 22px 0 30px }
.leg__n { font-stretch: 82%; font-weight: 780; font-size: clamp(56px, 7vw, 104px); line-height: .85; color: var(--red); margin: 0 0 14px }
.leg p:last-child { margin: 0; max-width: 40ch; color: #2A3D43 }
.channel__line { display: none }
@media (min-width: 761px) and (max-width: 1023px) { .channel__track { grid-template-columns: 1fr 1fr; gap: 0 40px } }
/* Pinned version: JS adds .channel--run once GSAP is in and motion is allowed on a wide screen */
.channel--run .channel__pin { height: calc(100svh - var(--hdr)); display: flex; flex-direction: column; justify-content: center; overflow: hidden }
.channel--run .channel__head { width: 100% }   /* auto margins in a flex column shrink an item to fit; keep the grid edge */
.channel--run .channel__view { max-width: none; padding: 0; overflow: visible }
.channel--run .channel__track { display: flex; gap: 48px; width: max-content; padding: 0 var(--gut) 0 max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); will-change: transform }
.channel--run .leg { width: min(34vw, 460px); flex: none; border-top: 0; padding: 0 }
.channel--run .channel__line { display: block; position: relative; height: 2px; background: var(--rule); margin-top: 40px; width: calc(100% - 2 * var(--gut)); max-width: calc(var(--max) - 2 * var(--gut)) }
.channel__fill { position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: 0 50% }

/* 05 atlas */
.atlas { padding-bottom: 0 }
.atlas__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding-bottom: clamp(80px, 12vw, 160px) }
.atlas__copy p { margin: 0 0 18px; color: var(--muted-ink); max-width: 52ch; font-size: 19px }
.atlas__copy p:first-child { color: #fff; font-size: clamp(21px, 2vw, 26px); line-height: 1.4 }
.link-light { color: #fff; text-underline-offset: 4px; text-decoration-color: var(--red); text-decoration-thickness: 2px }
.split-band { display: flex; height: 16px }
@media (max-width: 900px) { .atlas__grid { grid-template-columns: 1fr; gap: 16px } }

/* 06 standards */
.rules2 { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px }
.rules2 > div { border-top: 1px solid var(--ink); padding: 22px 0 30px }
.rules2 dt { font-stretch: 82%; font-weight: 700; font-size: clamp(22px, 2vw, 27px); line-height: 1.1; margin-bottom: 10px; display: flex; gap: 14px; align-items: baseline }
.rules2__n { font: 600 13px/1 var(--font); letter-spacing: .1em; color: var(--red) }
.rules2 dd { margin: 0; color: #2A3D43; max-width: 50ch }
@media (max-width: 760px) { .rules2 { grid-template-columns: 1fr } }

/* 07 contact */
.contact__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start }
.contact__mail { font-size: 17px; color: var(--muted-ink); margin: 0 }
.contact__mail a { color: #fff; text-underline-offset: 4px; text-decoration-color: var(--red); text-decoration-thickness: 2px }
.form { display: grid; gap: 16px }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.fld { display: grid; gap: 8px; font-size: 14px; color: var(--muted-ink) }
.fld input, .fld select, .fld textarea { font: 400 17px/1.4 var(--font); color: #fff; background: #0C1E23; border: 1px solid rgba(255,255,255,.20); border-radius: 2px; padding: 13px 14px; width: 100%; min-height: 50px;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.45), inset 0 1px 0 rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.07) }
.fld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: #fff; outline: 2px solid var(--red); outline-offset: 1px }
.fld [aria-invalid="true"] { border-color: #FF8A7E }
.form__foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 8px }
.form__msg { margin: 0; color: var(--muted-ink); font-size: 15px }
.form[data-role="partner"] .f2--issuer, .form[data-role="agency"] .f2--issuer, .form[data-role="other"] .f2--issuer { display: none }
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; gap: 32px } }
@media (max-width: 560px) { .f2 { grid-template-columns: 1fr } }

/* Footer */
.ftr { background: var(--ink); color: var(--muted-ink); font-size: 15px }
.split-band--top { height: 10px }
.ftr__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; padding-top: 56px; padding-bottom: 40px; border-bottom: 1px solid var(--rule-ink) }
.ftr__logo { width: min(300px, 70vw); height: auto }
.ftr__line { margin: 18px 0 0; max-width: 40ch }
.ftr__nav { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 40px; align-content: start }
.ftr__nav a { color: #fff; text-decoration: none }
.ftr__nav a:hover { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px }
.ftr__legal { padding-top: 28px; padding-bottom: 48px; font-size: 13.5px; line-height: 1.6 }
.ftr__legal p { margin: 0 0 12px; max-width: 110ch }
.ftr__copy { color: #8FA2A7 }

/* Heading reveal only exists when JS owns it */
.motion .reveal { will-change: clip-path, transform }

/* Revision 2: editorial agency + interactive attribution view. */
.hero--hybrid { background:var(--paper); color:var(--ink); min-height:0; overflow:hidden; display:block }
.hero__layout { display:grid; grid-template-columns:1.05fr 1fr; max-width:1600px; margin:auto; min-height:760px }
.hero--hybrid .hero__copy { padding:64px 42px 56px max(32px,calc((100vw - 1144px)/2)); width:auto; max-width:none; margin:0; align-self:center }
.hero--hybrid .hero__h { font-size:clamp(72px,7.7vw,124px); font-stretch:88%; line-height:.92; letter-spacing:-.045em; font-weight:720; margin-bottom:28px }
.hero__period { color:var(--red) }
.hero--hybrid .hero__sub { color:#465A60; font-size:18px; line-height:1.6; max-width:39ch; text-wrap:pretty }
.hero--hybrid .hero__ctas { align-items:center; gap:22px; margin-bottom:34px }
.hero__textlink { font-size:14px; text-underline-offset:5px; font-weight:600; display:flex; gap:13px }
.hero__roles { font-size:11px; line-height:1.8; font-weight:600; margin:0; letter-spacing:.01em }
.hero__roles span { margin:0 6px; color:#99A4A5 }
.hero__visual { position:relative; isolation:isolate; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:70px 35px 40px; background:var(--red); min-width:0 }
.hero__visual::before { content:''; position:absolute; inset:0; z-index:-1; background-image:linear-gradient(#ffffff14 1px,transparent 1px),linear-gradient(90deg,#ffffff14 1px,transparent 1px); background-size:54px 54px }
.signal-letter { position:absolute; z-index:-1; font-size:720px; font-stretch:80%; font-weight:850; color:#FFFFFF16; line-height:1; top:0; left:50%; transform:translateX(-50%); pointer-events:none }
.flow-board { position:relative; width:100%; max-width:520px; padding:24px; background:var(--ink); color:white; border:1px solid #ffffff24; border-radius:3px; box-shadow:var(--d-board) }
.flow-board__head { display:flex; justify-content:space-between; gap:8px; color:#B9C6C9; font-size:10px; letter-spacing:.02em; border-bottom:1px solid #ffffff26; padding-bottom:17px }
.flow-board__tag { color:#B9C6C9 }
.flow-board__title { font-size:26px; line-height:1.1; font-stretch:90%; font-weight:600; letter-spacing:-.02em; margin:25px 0 }
.flow-sources { display:grid; grid-template-columns:repeat(3,1fr); gap:9px }
.flow-lines { height:68px }
.flow-lines svg { width:100%; height:100%; overflow:visible }
.flow-lines path { fill:none; stroke:#567079; stroke-width:1.2 }
.flow-lines .flow-trace { stroke:#fff; stroke-width:2; stroke-dasharray:7 10; animation:source-flow 2s linear infinite }
@keyframes source-flow { to { stroke-dashoffset:-34 } }
.flow-hub { border:1px solid #ffffff2e; border-radius:3px; padding:17px; display:flex; align-items:center; gap:14px; background:#1D3A43; box-shadow:var(--d-tile-ink) }
.flow-hub strong { font-size:20px; font-weight:600; display:block; line-height:1.2 }
.flow-hub div>span { font-size:11px; color:#B9C6C9 }
.flow-hub__arrow { margin-left:auto; font-size:25px }
.flow-checkout { background:#1D3A43; color:#fff; border:1px solid #ffffff2e; border-radius:3px; margin-top:15px; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:16px; box-shadow:var(--d-tile-ink) }
.flow-checkout>span { font-size:12px; line-height:1.4; color:var(--muted-ink) }
.flow-detail { min-height:94px; padding-top:18px }
.flow-detail p { color:#C7D1D3; font-size:12px; line-height:1.6; margin:0; max-width:49ch }
.flow-board__foot { border-top:1px solid #ffffff26; padding-top:14px; display:flex; justify-content:space-between; gap:10px; font:9px/1.4 ui-monospace,monospace; color:#A9B9BD }
.hero__visual-note { margin:36px 0 0; text-align:center; font-size:11px; letter-spacing:.01em; color:white }
#approach .h2 { max-width:22ch; font-size:clamp(38px,5vw,68px) }
.parentco { margin-top:24px; display:inline-flex; align-items:center; gap:8px; color:var(--muted-ink); text-decoration:none; font-size:15px; line-height:1 }
.parentco img { width:82px; height:18px; display:inline-block; position:relative; top:1px }
@media(min-width:1600px) { .hero--hybrid .hero__copy { padding-left:100px } }
@media(max-width:1200px) and (min-width:861px) { .hero--hybrid .hero__copy { padding:50px 26px } .hero--hybrid .hero__h { font-size:86px } .hero__visual { padding:50px 25px } .flow-board { padding:20px } .hero__layout { min-height:740px } }
@media(max-width:860px) { .hero__layout { grid-template-columns:1fr; min-height:0 } .hero--hybrid .hero__copy { padding:54px var(--gut) 44px } .hero--hybrid .hero__h { font-size:clamp(72px,12vw,104px) } .hero--hybrid .hero__sub { max-width:47ch } .hero__visual { padding:48px 28px 32px } .flow-board { max-width:550px } .signal-letter { font-size:600px; top:-40px } }
@media(max-width:480px) { .hero--hybrid .hero__copy { padding-top:40px } .hero--hybrid .hero__h { font-size:78px } .hero--hybrid .hero__sub { font-size:17px } .hero--hybrid .hero__ctas { gap:20px } .hero__textlink { font-size:12px } .hero__roles { font-size:10px } .hero__roles span { margin:0 3px } .hero__visual { padding:36px 21px 26px } .flow-board { padding:17px } .flow-board__title { font-size:23px } .flow-checkout { padding:12px 14px } .flow-board__foot { font-size:8px } .flow-board__head { font-size:9px } }
@media(prefers-reduced-motion:reduce) { .flow-lines .flow-trace { animation:none } }
@media(max-width:480px) { .hero--hybrid .hero__h { font-size:clamp(62px,20vw,78px) } }

/* Revision 2, production pass (2026-10-19): house keys, layered depth, one partner-logo slot, the wired enquiry form.
   Keys follow DESIGN-DNA 4b with Aero's depth (standards log 2026-10-04): a flat face with a 1px lit top edge, a 3px
   side in a darker cut, a close cast mixed for the ground, a 2px press, and the action fires on the rebound (site.js).
   Corners stay square to the identity: 2px keys, 3px panels. Hover deepens a face and never lifts anything. */
:root {
  --d-panel: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(12,27,32,.06), 0 6px 14px -6px rgba(12,27,32,.12), 0 18px 34px -20px rgba(12,27,32,.22);
  --d-board: inset 0 1px 0 rgba(255,255,255,.10), 0 1px 2px rgba(48,8,3,.30), 0 8px 18px -8px rgba(48,8,3,.40), 0 30px 56px -26px rgba(48,8,3,.62);
  --d-panel-ink: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.35), 0 8px 18px -8px rgba(0,0,0,.45), 0 28px 52px -26px rgba(0,0,0,.66);
  --d-tile-ink: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.30), 0 4px 10px -5px rgba(0,0,0,.42);
}

/* Keys */
.key { --kh: 48px; --face: var(--red); --face-hi: #C5331F; --side: #8E2216; --ink-t: #fff;
  --lit: rgba(255,255,255,.34); --lit-dn: rgba(255,255,255,.20); --contact: rgba(12,27,32,.42); --cast: rgba(12,27,32,.30);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--kh); margin: 0 0 3px; padding: 0 24px;
  font: 650 16px/1 var(--font); color: var(--ink-t); text-decoration: none; white-space: nowrap; background: var(--face);
  border: 0; border-radius: 2px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 var(--lit), 0 3px 0 var(--side), 0 4px 1px var(--contact), 0 5px 5px -1px var(--cast);
  transition: transform .055s ease-out, box-shadow .055s ease-out, background-color .15s }
.key::before { content: ""; position: absolute; left: 0; right: 0; top: min(0px, calc((var(--kh) - 44px) / 2)); bottom: min(-3px, calc((var(--kh) - 44px) / 2 - 3px)) }
@media (hover: hover) { .key:hover { background: var(--face-hi) } }
.key:active, .key.is-down { transform: translateY(2px);
  box-shadow: inset 0 1px 0 var(--lit-dn), 0 1px 0 var(--side), 0 2px 1px var(--contact), 0 2px 3px -1px var(--cast) }
.key.is-rebound { animation: key-rebound .30s cubic-bezier(.25,.7,.3,1) }
@keyframes key-rebound { 0% { transform: translateY(2px) } 40% { transform: translateY(-1px) } 62% { transform: translateY(.5px) } 82% { transform: translateY(-.3px) } 100% { transform: none } }
.key[disabled], .key[aria-busy="true"] { cursor: progress }
.key .key__arrow { font-weight: 500 }
/* ground mixes: on ink a petroleum cast vanishes, so the cast goes to black */
.sec--ink .key, .ftr .key, .form .key { --contact: rgba(0,0,0,.55); --cast: rgba(0,0,0,.62) }
/* utility tier on ink: a neutral face lighter than the ground, so its darker side still clears it */
.key--ut { --kh: 40px; --face: #46626B; --face-hi: #4F6C75; --side: #2C464F; --lit: rgba(255,255,255,.18); --lit-dn: rgba(255,255,255,.10); font-size: 15px; padding: 0 18px }
/* latching selectors (the board's traffic sources): the chosen key keeps its place and fills white */
.key--sel { --kh: 64px; --face: #46626B; --face-hi: #4F6C75; --side: #2C464F; --lit: rgba(255,255,255,.18); --lit-dn: rgba(255,255,255,.10);
  --contact: rgba(0,0,0,.5); --cast: rgba(0,0,0,.55);
  flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 6px; width: 100%; padding: 10px 12px;
  font: 600 13px/1.2 var(--font); white-space: normal; text-align: left }
.key--sel .key__n { font: 500 11px/1 ui-monospace, monospace; color: #D3DCDE }
.key--sel[aria-pressed="true"] { --face: #FFFFFF; --face-hi: #FFFFFF; --side: #9DB0B5; --ink-t: var(--ink); --lit: #fff; --lit-dn: #fff }
.key--sel[aria-pressed="true"] .key__n { color: var(--red) }
.kbd .key:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: inset 0 1px 0 var(--lit), 0 3px 0 var(--side), 0 0 0 6px var(--red) }
.key:focus:not(:focus-visible) { outline: none }
.flow-sources { gap: 10px }

/* Layers: the board is the front plane of the hero, the ghost H and the grid sit behind it */
.signal-letter { will-change: transform }

/* Partner rail: every partner mark in one slot, reversed for ink, sized to one visual area (not one width) */
.prail { background: var(--ink); color: #fff; border-bottom: 1px solid var(--rule-ink) }
.prail__in { display: grid; grid-template-columns: minmax(150px, auto) 1fr 1fr; align-items: stretch }
.prail__label { margin: 0; padding: 30px 32px 30px 0; font: 600 15px/1.35 var(--font); color: var(--muted-ink); align-self: center }
.prail__item { display: grid; grid-template-columns: 148px minmax(0, 1fr); align-items: center; gap: 24px; padding: 26px 0 26px 32px; border-left: 1px solid var(--rule-ink); margin: 0 }
.prail__item p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted-ink); max-width: 34ch }
.prail__item b { color: #fff; font-weight: 600 }
.logo-slot { display: flex; align-items: center; height: 44px; min-width: 0 }
.logo-slot img { height: auto; max-height: 100% }
.logo-slot--dm img { width: 140px }
.logo-slot--atlas img { width: 79px }
.flow-checkout .logo-slot { height: 30px; justify-content: flex-end }
.flow-checkout .logo-slot img { width: 118px }
@media (max-width: 960px) {
  .prail__in { grid-template-columns: 1fr }
  .prail__label { padding: 24px 0 8px }
  .prail__item { border-left: 0; border-top: 1px solid var(--rule-ink); padding: 20px 0 }
  .prail__item:last-child { padding-bottom: 26px }
}
@media (max-width: 420px) { .prail__item { grid-template-columns: 1fr; gap: 12px } }

/* Process legs become raised tiles on the paper ground */
.channel__track { gap: 18px }
.leg { background: #fff; border: 1px solid #E1E5E2; border-radius: 3px; padding: 26px 26px 30px; box-shadow: var(--d-panel) }
.channel--run .leg { padding: 30px 30px 34px; border: 1px solid #E1E5E2 }

/* The attribution stage is a well sunk into the ink */
.attr__stage { border-radius: 3px; box-shadow: inset 0 2px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.06) }

/* Enquiry: a raised panel on the ink, fields sunk into it */
.form { background: #1A353D; border: 1px solid #ffffff1f; border-radius: 3px; padding: clamp(20px, 3vw, 32px); box-shadow: var(--d-panel-ink) }
.form__foot { margin-top: 4px }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden }
.form__msg a { color: #fff }
.form__fallback { display: grid; gap: 14px; padding-top: 4px }
.form__fallback[hidden] { display: none }
.form__fallback p { margin: 0; color: #fff; font-size: 15px }
.form__fallback-keys { display: flex; flex-wrap: wrap; gap: 12px }
.form__done { background: #1A353D; border: 1px solid #ffffff1f; border-radius: 3px; padding: clamp(24px, 4vw, 40px); box-shadow: var(--d-panel-ink) }
.form__done[hidden] { display: none }
.form__done h3 { color: #fff; margin: 0 0 12px }
.form__done p { margin: 0; color: var(--muted-ink); max-width: 44ch }
.form__done:focus { outline: none }
.ftr__mail { margin: 14px 0 0 }
.ftr__mail a { color: #fff; text-underline-offset: 4px; text-decoration-color: var(--red) }
.key.hdr__cta { --kh: 40px; padding: 0 18px }
@media (max-width: 760px) { .key:not(.hdr__cta):not(.key--ut):not(.key--sel) { --kh: 44px } }