/* CREYON 3.0 — Company Home. Port of the approved FINAL v2 boards (desktop 1440, mobile 390).
   Values are the boards' values; the few that scale between the two boards use clamp().
   Four ranges, in source order: the desktop composition (the diptych first screen, two-column rows),
   then ≥1440 where the content column is pinned and centred, 1024–1279 where the navigation tightens,
   600–1023 where the stacked composition keeps the boards' proportions, and <600 which is the 390 board. */

/* ---------- fonts (self-hosted subsets, OFL — see fonts/OFL-*.txt) ---------- */
/* Bricolage Grotesque and Inter are pinned to the optical size the approved boards were rendered at (opsz 12 / 14), so no axis is left for the browser to narrow the headlines. */
@font-face { font-family: 'Bricolage Grotesque'; src: url('fonts/bricolage-grotesque.woff2') format('woff2'); font-weight: 500 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/inter.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('fonts/dm-mono.woff2') format('woff2'); font-weight: 400; font-display: swap; }
/* metric-matched fallbacks, so the swap moves nothing */
@font-face { font-family: 'Bricolage Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Liberation Sans Bold'); size-adjust: 100.64%; ascent-override: 92.40%; descent-override: 26.83%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Liberation Sans'); size-adjust: 106.69%; ascent-override: 90.80%; descent-override: 22.61%; line-gap-override: 0%; }

/* ---------- tokens ---------- */
:root {
  --light: #F3F1EC; --light2: #ECE9E2;
  --navy: #0A0F1C; --navy2: #141A28; --navy-line: #222A3A; --navy-grey: #9AA3B8; --navy-text: #F4F5F8; --navy-lead: #C3C9D6;
  --ink: #0B0D12; --grey: #5C6270; --label: #5F6470; --line: #D9D5CC; --line2: #E6E2DA;
  --orange: #F2994A; --warn: #9E4E0F; --ok: #1F6B3A; --blue: #4860FF;
  --photo: #E2DED5;
  --mark-cut: var(--light);
  --display: 'Bricolage Grotesque', 'Bricolage Fallback', Arial, Helvetica, sans-serif;
  --text: 'Inter', 'Inter Fallback', Arial, Helvetica, sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* Content column: the boards' 1312 px, centred once the viewport passes 1440 — so the design renders
     exactly as approved and simply gains symmetric margins on larger screens. */
  --gut: clamp(20px, 4.444vw, 64px);
  --pad: max(var(--gut), calc((100vw - 1312px) / 2));
  /* The seam sits at the board's 52.195 % of the content column, which is 52 % of the viewport at 1440
     and below. Derived from the same viewport basis as --pad, so the headline crosses the same letter
     at every width — including browsers whose scrollbars take layout space. */
  --seam: calc(var(--pad) + (100vw - 2 * var(--pad)) * 0.52195);
  --s112: clamp(72px, 7.78vw, 112px);
  --s128: clamp(72px, 8.89vw, 128px);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--light); color: var(--ink); font-family: var(--text); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
b { font-weight: 600; }
svg.mark { display: block; flex-shrink: 0; color: var(--ink); }
main:focus { outline: none; }
.arrow { display: inline-block; }
.tone { background: var(--light2); }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
.pill:focus-visible { outline-offset: 4px; border-radius: 100px; }

.skip-link { position: absolute; left: var(--pad); top: -200px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 100px; font-weight: 600; font-size: 15px; }
.skip-link:focus { top: 16px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  a, button { transition: color .15s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease; }
  .arrow { transition: transform .15s ease; }
  .tl:hover .arrow, .navcta:hover .arrow { transform: translateX(3px); }
}

/* ---------- type ---------- */
.mono { font-family: var(--mono); font-weight: 400; font-size: 12px; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; color: var(--label); margin-top: 12px; }
h2, .h2 { font-family: var(--display); font-optical-sizing: auto; font-weight: 600; font-size: 60px; line-height: .98; letter-spacing: -.03em; margin: 20px 0 0; max-width: 1000px; }
h2.mono { font-family: var(--mono); font-weight: 400; font-size: 12px; line-height: 1.5; letter-spacing: .06em; margin: 12px 0 0; max-width: none; }
h3 { font-family: var(--display); font-optical-sizing: auto; font-weight: 600; font-size: 26px; letter-spacing: -.02em; line-height: 1.12; }
.lead { font-size: 18px; line-height: 1.55; color: var(--grey); max-width: 620px; }
.small { font-size: 13.5px; line-height: 1.5; color: var(--grey); }

.pill { display: inline-flex; align-items: center; justify-content: center; white-space: pre; min-height: 44px; font-size: 15px; font-weight: 600; line-height: 1; padding: 13px 20px; border-radius: 100px; background: var(--ink); color: #fff; }
.pill:hover { background: #262B36; }
.pill.out { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.pill.out:hover { background: var(--ink); color: #fff; }
.tl { display: inline-flex; align-items: center; white-space: pre; min-height: 44px; font-size: 15px; font-weight: 600; }
.ctas { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

/* ---------- header ---------- */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
.hdr { height: 84px; display: flex; align-items: center; padding: 0 var(--pad); }
.logo { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: var(--ink); }
.nav { margin-left: 48px; margin-right: auto; }
.nav ul { display: flex; gap: 36px; }
.nav a { display: inline-block; padding: 8px 0; font-size: 14.5px; color: var(--grey); }
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.navcta { display: inline-flex; align-items: center; white-space: pre; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--ink); }
body.home .navcta { color: #fff; }
body.home .navcta:focus-visible { outline-color: #fff; }
.menu-btn { display: none; }
.mobile-menu { display: none; }

/* ---------- first screen: Concept 1 "Prinsippet" (approved, locked) ---------- */
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; background: linear-gradient(90deg, var(--light) 0 var(--seam), var(--navy) var(--seam) 100%); min-height: clamp(640px, 53.47vw, 770px); padding: clamp(120px, 11.67vw, 168px) 0 clamp(56px, 5.28vw, 76px); }
.hero h1 { position: relative; z-index: 1; padding: 0 var(--pad); font-family: var(--display); font-optical-sizing: auto; font-weight: 600; font-size: clamp(76px, 8.056vw, 116px); line-height: .95; letter-spacing: -.035em; color: #fff; mix-blend-mode: difference; }
.hero h1 .l1, .hero h1 .l2 { display: block; }
.hero .row { display: grid; grid-template-columns: var(--seam) 1fr; grid-template-rows: 1fr auto; row-gap: 32px; flex: 1; margin-top: clamp(32px, 3.33vw, 48px); }
.hero .lead { grid-column: 1; grid-row: 1; margin: 0 var(--gut) 0 var(--pad); font-size: 17px; max-width: 520px; }
.hero .ctas { grid-column: 1; grid-row: 2; margin: 0 var(--gut) 0 var(--pad); align-self: end; }
.principle { grid-column: 2; grid-row: 1 / 3; margin: 0 var(--pad) 0 var(--gut); font-family: var(--display); font-optical-sizing: auto; font-weight: 600; font-size: clamp(40px, 3.89vw, 56px); line-height: 1.02; letter-spacing: -.025em; max-width: 620px; }
.principle .a, .principle .b { display: block; }
.principle .a { color: var(--navy-grey); text-wrap: balance; }
.principle .b { color: #fff; }

/* ---------- Hva vi gjør ---------- */
.areas { padding: 56px var(--pad) 40px; }
.areas .rule { border-top: 1px solid var(--ink); margin-top: 20px; }
.arow { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: center; padding: 96px 0; }
.arow + .arow { border-top: 1px solid var(--line2); }
.arow .name { font-size: clamp(40px, 3.89vw, 56px); line-height: 1; letter-spacing: -.03em; }
.arow .one { font-size: 19px; line-height: 1.5; color: var(--grey); margin-top: 22px; max-width: 460px; }
.arow .one b { color: var(--ink); }
.arow .tag { display: block; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--label); margin: 0 0 14px; }
.ev { max-width: 640px; margin-left: auto; }
.stage { background: var(--light2); padding: 40px; display: flex; align-items: center; justify-content: center; min-height: 380px; }

/* evidence: a recommendation from Start */
.note { max-width: 600px; }
.note .h { font-family: var(--display); font-optical-sizing: auto; font-weight: 600; font-size: 24px; letter-spacing: -.02em; line-height: 1.2; margin: 10px 0 4px; }
.note li { padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.note li:last-child { border-bottom: 1px solid var(--line); }
.note li .k { font-weight: 600; display: block; }
.note li .v { color: var(--grey); }
.note li .v b { color: var(--ink); }
.note .foot { font-size: 13.5px; color: var(--grey); margin-top: 12px; }

/* evidence: one client page */
.pscreen { width: 320px; max-width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 20px 20px; font-size: 14.5px; }
.pscreen .ptop { font-size: 12px; color: var(--grey); margin-bottom: 22px; }
.pscreen .h { font-family: var(--display); font-optical-sizing: auto; font-weight: 600; font-size: 24px; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 14px; }
.pscreen .prow { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line2); }
.pscreen .prow span:first-child { color: var(--grey); }
.pscreen .prow span:last-child { font-weight: 600; text-align: right; }
.pscreen .prow .ok { color: var(--ok); }
.pscreen .pbtn { display: flex; justify-content: center; gap: 6px; margin-top: 18px; background: var(--ink); color: #fff; border-radius: 100px; padding: 13px 18px; font-weight: 600; font-size: 14px; }

/* evidence: the flow of a voucher */
.flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 28px; padding-top: 26px; }
.flow::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 1.5px; background: rgba(11, 13, 18, .4); }
.flow .st { position: relative; }
.flow .st::before { content: ""; position: absolute; left: 0; top: -23px; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); }
.flow .st::after { content: ""; position: absolute; right: -22px; top: -22px; width: 0; height: 0; border-left: 7px solid rgba(11, 13, 18, .5); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.flow .st:last-child::after { display: none; }
.flow .l { font-family: var(--display); font-optical-sizing: auto; font-weight: 600; font-size: 19px; letter-spacing: -.015em; line-height: 1.15; }
.flow .m { font-size: 13.5px; color: var(--label); margin-top: 8px; }
.flow .st.h::before { background: var(--orange); }
.flow .st.h .m { color: var(--warn); font-weight: 600; }

/* evidence: the system, connected */
.hub { position: relative; height: 340px; }
.hub svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub line { stroke: var(--ink); stroke-width: 1; stroke-opacity: .45; }
.hub .n { position: absolute; font-size: 17px; color: var(--ink); background: var(--light); padding: 6px 10px; white-space: nowrap; }
.hub .c { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--display); font-optical-sizing: auto; font-weight: 600; font-size: 24px; letter-spacing: -.02em; background: var(--navy); color: #fff; padding: 14px 22px; border-radius: 100px; white-space: nowrap; }

/* evidence: the monthly review */
.review { width: 100%; max-width: 520px; }
.review .h { font-family: var(--display); font-optical-sizing: auto; font-weight: 600; font-size: 24px; letter-spacing: -.02em; margin-bottom: 10px; }
.review dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; font-size: 16px; color: var(--grey); padding: 14px 0; border-top: 1px solid var(--line); }
.review dd { font-family: var(--display); font-optical-sizing: auto; font-weight: 600; font-size: 26px; letter-spacing: -.02em; color: var(--ink); text-align: right; }
.review .nt { font-size: 18px; color: var(--ink); font-weight: 600; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ink); }

/* ---------- Tillit ---------- */
.tband { background: var(--navy); color: var(--navy-text); padding: var(--s112) var(--pad); }
.tband .mono { color: var(--navy-grey); }
.tband .grid { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
.tband .h2 { color: #fff; font-size: clamp(40px, 3.89vw, 56px); max-width: 420px; margin-top: 16px; text-wrap: balance; }
.tband ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; }
.tband li { font-size: 17px; line-height: 1.4; padding: 10px 0; border-bottom: 1px solid var(--navy-line); }
.tband .not { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .4); font-size: 18px; line-height: 1.5; color: var(--navy-grey); max-width: 640px; }
.tband .not b { color: #fff; }

/* ---------- Slik jobber vi sammen ---------- */
.eng { padding: var(--s128) var(--pad); }
.eng .h2 { font-size: clamp(36px, 3.33vw, 48px); max-width: 1100px; }
.ph3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 72px; }
.ph3 li { border-top: 1px solid var(--ink); padding-top: 20px; }
.ph3 h3 { font-size: 32px; margin-bottom: 8px; }
.ph3 .terms { font-weight: 600; font-size: 18px; color: var(--ink); margin-bottom: 14px; letter-spacing: -.01em; }
.ph3 p { font-size: 16.5px; line-height: 1.55; color: var(--grey); }
.ph3 .nx { margin-top: 14px; font-size: 13.5px; color: var(--label); }
.eng .ctas { margin-top: 56px; }

/* ---------- Produkter ---------- */
.prod { padding: var(--s112) var(--pad) clamp(72px, 8.33vw, 120px); }
.prod .state { font-family: var(--display); font-optical-sizing: auto; font-weight: 500; font-size: 36px; line-height: 1.12; letter-spacing: -.025em; margin-top: 20px; max-width: 1100px; }
.prod .two { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-top: 72px; align-items: start; }
.prod .two > div { border-top: 1px solid var(--ink); padding-top: 20px; }
.prod h3 { max-width: 520px; }
.prod h3 .k { display: block; font-family: var(--mono); font-weight: 400; font-size: 12px; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; color: var(--label); margin-bottom: 14px; }
.prod h3 .hl { display: block; margin-bottom: 12px; }
.prod .t { font-size: 16px; line-height: 1.55; color: var(--grey); max-width: 520px; }
.prod .tm { margin-top: 14px; font-size: 14px; color: var(--ink); font-weight: 600; }
.prod .ctas { margin-top: 22px; }
.prod .sm { margin-top: 14px; font-size: 12.5px; color: var(--label); }
.surfwrap { margin-top: 32px; max-height: 176px; overflow: hidden; border-radius: 12px; }
.surf { background: var(--navy2); color: var(--navy-text); border-radius: 12px; overflow: hidden; font-size: 15px; }
.surf .bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--navy-line); color: var(--navy-grey); font-size: 13px; }
.surf .bar > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.surf .tag { flex-shrink: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-grey); border: 1px solid var(--navy-line); padding: 4px 7px; border-radius: 4px; white-space: nowrap; }
.surf .mini { padding: 18px 20px; }
.surf .mh { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; color: var(--navy-grey); margin-bottom: 12px; }
.surf .mt { font-family: var(--display); font-optical-sizing: auto; font-weight: 600; font-size: 20px; line-height: 1.2; letter-spacing: -.01em; margin-bottom: 14px; }
.surf.white { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.surf.white .bar { border-color: var(--line2); color: var(--grey); }
.surf.white .tag { color: var(--label); border-color: var(--line); }
.surf.white .mh { color: var(--grey); }

/* ---------- Folk ---------- */
.people { padding: var(--s112) var(--pad); }
.people .intro { font-size: 20px; line-height: 1.5; color: var(--grey); max-width: 760px; margin: 20px 0 48px; }
.people .intro b { color: var(--ink); }
.persons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: start; }
.photo { aspect-ratio: 4 / 5; border-radius: 8px; background: var(--photo); display: flex; align-items: flex-end; padding: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }
.person h3 { font-size: 22px; margin: 16px 0 4px; }
.person p { margin-top: 13.5px; }

/* ---------- Kom i gang ---------- */
.start { padding: var(--s128) var(--pad) clamp(72px, 10vw, 144px); }
.start .line { font-family: var(--display); font-optical-sizing: auto; font-weight: 600; font-size: 40px; line-height: 1.1; letter-spacing: -.025em; margin-top: 20px; max-width: 900px; }
.start .ctas { margin-top: 40px; }

/* ---------- footer ---------- */
.site-footer { padding: 64px var(--pad) 36px; border-top: 1px solid var(--line); }
.fcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 48px; }
.fcols .mono { font-size: 11.5px; letter-spacing: .12em; margin: 0 0 12px; }
.fcols a { display: inline-block; font-size: 14.5px; color: var(--grey); padding: 4px 0; }
.fcols a:hover { color: var(--ink); }
.fbot { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; color: var(--grey); padding-top: 22px; border-top: 1px solid var(--line); }
.sig { display: flex; align-items: center; gap: 8px; color: var(--ink); }

/* ---------- prototype stub ---------- */
.stub { padding: calc(84px + var(--s128)) var(--pad) var(--s128); }
.stub h1, .stub .lead, .stub .ctas { max-width: 900px; }
.stub h1 { font-family: var(--display); font-optical-sizing: auto; font-weight: 600; font-size: clamp(40px, 4.2vw, 60px); line-height: 1; letter-spacing: -.03em; margin-top: 16px; }
.stub .lead { margin-top: 20px; }
.stub .ctas { margin-top: 28px; }

/* narrow desktop (1024–1279): the navigation must stay on the light half of the first screen */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .nav { margin-left: 28px; }
  .nav ul { gap: 20px; }
  .nav a { font-size: 13.5px; }
  .flow .l { font-size: 17px; }
}

/* ============================================================ mobile composition (< 1024) */
@media (max-width: 1023.98px) {
  .site-header { position: static; }
  .hdr { height: 64px; justify-content: space-between; }
  .nav, .navcta { display: none; }
  .menu-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: 0; background: none; border: 0; font: 600 15px/1 var(--text); color: var(--ink); cursor: pointer; }
  .mobile-menu { display: block; padding: 8px var(--pad) 28px; border-bottom: 1px solid var(--line); background: var(--light); }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu li a { display: block; padding: 14px 0; font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: -.02em; line-height: 1.1; border-top: 1px solid var(--line2); }
  .mobile-menu li:first-child a { border-top: 0; }
  .mobile-menu li a:hover, .menu-btn:hover { color: var(--grey); }
  .mobile-menu .cta-row { margin-top: 20px; }

  /* first screen, as the 390 board: headline (line 1 on light, line 2 on navy) → principle → CTAs → lead */
  .hero { background: var(--navy); min-height: 0; padding: 0 var(--pad) 40px; }
  .hero h1 { padding: 0; font-size: clamp(44px, 14.36vw, 88px); line-height: 1; color: var(--navy-text); mix-blend-mode: normal; margin-bottom: 22px; }
  .hero h1 .l1 { background: var(--light); color: var(--ink); margin: 0 calc(-1 * var(--pad)); padding: 40px var(--pad) 10px; }
  .hero h1 .l2 { margin-top: -6px; padding-top: 2px; }
  .hero .row { display: block; margin-top: 0; }
  .hero .ctas { margin: 0; }
  .hero .lead { color: var(--navy-lead); font-size: 16px; margin: 26px 0 0; max-width: 560px; }
  .principle { font-family: var(--text); font-size: 19px; line-height: 1.35; letter-spacing: -.012em; color: #fff; margin: 0 0 16px; max-width: 560px; }
  .principle .a, .principle .b { display: inline; color: #fff; }
  .hero .ctas .pill { background: #fff; color: var(--navy); }
  .hero .ctas .pill:hover { background: var(--navy-text); }
  .hero .ctas .tl { color: #fff; }
  .hero :focus-visible { outline-color: #fff; }

  .areas { padding: 40px var(--pad) 24px; }
  .arow { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 56px 0; }
  .arow .name { font-size: clamp(32px, 9.74vw, 52px); }
  .arow .one { font-size: 16.5px; margin-top: 14px; }
  .ev { margin-left: 0; }
  .stage { padding: 24px; min-height: 0; }
  .flow { grid-template-columns: 1fr; gap: 18px 0; padding: 0 0 0 26px; }
  .flow::before { top: 6px; bottom: 6px; left: 5px; right: auto; width: 1.5px; height: auto; }
  .flow .st::before { left: -26px; top: 5px; }
  .flow .st::after { display: none; }
  .flow .l { font-size: 18px; }
  .hub { height: 260px; }
  .hub .c { font-size: 20px; padding: 12px 18px; }
  .hub .n { font-size: 13px; padding: 4px 6px; }
  .review dd { font-size: 22px; }

  .tband .grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .tband .h2 { font-size: clamp(32px, 9.74vw, 52px); }
  .tband ul { grid-template-columns: 1fr; gap: 0; }
  .tband li { font-size: 16px; }

  .eng .h2 { font-size: clamp(30px, 9.74vw, 44px); }
  .ph3 { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 40px; }
  .ph3 li { padding: 22px 0; border-top: 1px solid var(--line); }
  .ph3 li:first-child { border-top-color: var(--ink); }
  .ph3 h3 { font-size: 28px; }
  .eng .ctas { margin-top: 32px; }

  .prod .state { font-size: 30px; }
  .prod .two { grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: 40px; }
  .prod h3 .hl { font-size: 24px; }

  .people .intro { font-size: 17px; margin-bottom: 28px; }
  .persons { grid-template-columns: 1fr 1fr; gap: 16px; }
  .person h3 { font-size: 20px; }
  .photo { font-size: 0; padding: 0; }

  .start .line { font-size: 28px; }

  .site-footer { padding: 56px var(--pad) 32px; }
  .fcols { grid-template-columns: 1fr; gap: 24px; }
  .fbot { flex-direction: column; align-items: flex-start; gap: 12px; }

  .stub { padding-top: 48px; }
}

/* tablet (600–1023): the stacked composition of the 390 board, but with the boards' proportions kept —
   nothing is allowed to stretch to the full width of the page. */
@media (min-width: 600px) and (max-width: 1023.98px) {
  /* the evidence objects are back at the boards' size here, so their contents are too */
  .stage { padding: 40px; min-height: 380px; }
  .hub { height: 340px; }
  .hub .n { font-size: 17px; padding: 6px 10px; }
  .hub .c { font-size: 24px; padding: 14px 22px; }
  .review dd { font-size: 26px; }
  .flow .l { font-size: 19px; }
  .tband li { font-size: 17px; }
  .ph3 li { max-width: 640px; }
  .prod .two > div { max-width: 640px; }
  .photo { font-size: 11px; padding: 14px; }
  /* two people, two columns — a third empty track would shrink them below their phone size */
  .persons { grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: 640px; }
  .fcols { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .fbot { flex-direction: row; align-items: center; }
  .start .line { font-size: 34px; }
}

/* from 768 the trust list holds the boards' two columns without an item wrapping */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .tband ul { grid-template-columns: 1fr 1fr; gap: 12px 40px; }
}

/* phones (< 600): the calls to action stack full width, as on the 390 board */
@media (max-width: 599.98px) {
  .ctas { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero .ctas .tl { margin: -7px 0; }
  .surf .tag .long { display: none; }
}

/* very narrow (< 360) */
@media (max-width: 359.98px) {
  .stage { padding: 16px; }
  .pscreen { padding: 18px 16px 16px; }
  .review dd { font-size: 20px; }
  .surfwrap { max-height: none; }
  .surf .bar { flex-wrap: wrap; }
  .surf .mt { font-size: 18px; }
}

/* Windows High Contrast / forced colours: the ground disappears, so anything that carries meaning
   through fill alone (the seam headline, the flow dots and spine, the hub, the filled buttons) is
   restated with system colours and outlines. */
@media (forced-colors: active) {
  .hero h1 { mix-blend-mode: normal; }
  .pill, .pill.out, .pscreen .pbtn, .hub .c, .surf, .pscreen, .photo, .surfwrap { border: 1px solid CanvasText; }
  .flow::before, .flow .st::before, .flow .st.h::before { background: CanvasText; }
  .flow .st::after { border-left-color: CanvasText; }
  .hub line { stroke: CanvasText; }
  .hub .n { background: Canvas; }
  .stage { outline: 1px solid CanvasText; outline-offset: -1px; }
}

@media print {
  .site-header, .skip-link, .mobile-menu { display: none; }
  .hero { background: none; color: var(--ink); }
  .hero h1, .principle .a, .principle .b { color: var(--ink); mix-blend-mode: normal; }
  .tband { background: none; color: var(--ink); }
  .tband .h2, .tband .not b, .tband .mono, .tband .not { color: var(--ink); }
}