/* ARCFLOWS launch site: foundation.
   Tokens, reset, type, the primitives every page uses, and all of the shared chrome: header, phone menu, registration
   marks, booking dock, footer, next-page strip and the closing booking band. Each of those is defined once, here.
   Page files (home.css, pages.css) build on this, must not redefine tokens, and must not restyle the shared chrome. */

:root {
  /* colour */
  --ink: #0B0D10;            /* page ground */
  --ink-2: #10131A;          /* raised bands */
  --ink-3: #171B24;          /* pills, surfaces */
  --paper: #ECEEF1;          /* primary text, 16.6:1 on ink */
  --muted: #A2A9B5;          /* secondary text, 8:1 on ink */
  --faint: #7C8492;          /* small labels, 5:1 on ink. Never dimmer than this for text */
  --line: rgba(236, 238, 241, .14);
  --line-strong: rgba(236, 238, 241, .3);
  --accent: #5F82FF;         /* the logo's blue: links, active states, pulses. 5.7:1 on ink */
  --accent-strong: #3653E6;  /* button fill; paper text on it is 5:1 */
  --accent-press: #2F49D2;   /* the fill on hover: darker, so the label gains contrast (6:1) instead of losing it */
  --accent-soft: rgba(95, 130, 255, .14);
  --flow: linear-gradient(90deg, #5F82FF 0%, #C382FF 55%, #5FC8FF 100%); /* the logo's flow line. Use rarely */

  /* type */
  --font-display: 'Host Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-wordmark: 'Bebas Neue', 'Host Grotesk', 'Arial Narrow', sans-serif;

  --t-giant: clamp(3.2rem, 11.5vw, 13rem);     /* one or two words, hero sign-off, ghost type */
  --t-display: clamp(2.4rem, 6vw, 6.4rem);     /* big uppercase statements */
  --t-h1: clamp(2.25rem, 4.7vw, 4.9rem);       /* the hero headline */
  --t-h2: clamp(1.9rem, 3.6vw, 3.6rem);
  --t-h3: clamp(1.3rem, 1.9vw, 1.9rem);
  --t-lede: clamp(1.06rem, 1.25vw, 1.3rem);
  --t-body: 1rem;
  --t-small: .875rem;
  --t-label: .72rem;                            /* mono caps */

  /* space */
  --gutter: clamp(20px, 2.8vw, 40px);
  --header-h: 76px;
  --section: clamp(96px, 14vw, 220px);          /* vertical breathing room between sections */
  --max: 1680px;
  /* The outer edge of the page grid, measured from the window's edge: the gutter, or the edge of the 1680px column on
     wider windows. For things positioned against the window (the fixed header, the marks, a full-bleed stage) that
     must line up with .wrap. Only meaningful where a percentage means the window's width. */
  --edge: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  /* Side gutters that also clear a notch or rounded corner when a phone is held sideways. .wrap uses them; anything
     else that pads itself to the gutter should too. */
  --pad-l: max(var(--gutter), env(safe-area-inset-left, 0px));
  --pad-r: max(var(--gutter), env(safe-area-inset-right, 0px));

  --ease: cubic-bezier(.22, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}
/* A phone held sideways is wide but very short: the width-based section rhythm would be most of a window of nothing. */
@media (max-height: 500px) and (orientation: landscape) { :root { --section: 56px; } }

/* reset */
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--font-body); font-size: var(--t-body); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
/* running text never ends on a single stranded word where the browser can avoid it (headings balance, further down) */
p, li, dd, td { text-wrap: pretty; }
ol, ul { padding: 0; list-style: none; }
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent-strong); color: var(--paper); }
[hidden] { display: none !important; }

.skip-link { position: fixed; left: var(--gutter); top: 12px; z-index: 100; padding: 12px 18px; background: var(--paper); color: var(--ink); font-weight: 600; border-radius: 999px; transform: translateY(-200%); }
.skip-link:focus-visible { transform: none; outline-color: var(--accent); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* layout */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-left: var(--pad-l); padding-right: var(--pad-r); }
main { position: relative; z-index: 1; }
.section { position: relative; padding-block: var(--section); }

/* type */
.display { font-family: var(--font-display); font-weight: 300; font-size: var(--t-display); line-height: .98; letter-spacing: -.012em; text-transform: uppercase; text-wrap: balance; }
.display em, .statement em, .h1 em { font-style: italic; font-weight: 300; }
.h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-h1); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
.h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.015em; text-wrap: balance; }
.h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-h3); line-height: 1.15; letter-spacing: -.01em; }
.lede { font-size: var(--t-lede); line-height: 1.5; color: var(--paper); max-width: 46ch; }
.body { color: var(--muted); max-width: 62ch; }
.body strong { color: var(--paper); font-weight: 500; }
.label { font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.label--paper { color: var(--paper); }
.label--accent { color: var(--accent); }
.spaced { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 3.4vw, 3.4rem); letter-spacing: .42em; margin-right: -.42em; text-transform: uppercase; line-height: 1; } /* "C A P A B I L I T I E S" */
.link { color: var(--paper); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .22em; text-decoration-thickness: 1px; transition: text-decoration-color .2s, color .2s; }
.link:hover { color: var(--accent); text-decoration-color: var(--accent); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
/* a hyphenated compound in running text ("tap-to-claim", "follow-up") stays on one line */
.nw { white-space: nowrap; }

/* buttons: pills, 48px tall, real links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 22px; border-radius: 999px; font-family: var(--font-body); font-weight: 500; font-size: .8125rem; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.btn::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; transition: transform .25s var(--ease); }
.btn:hover::after { transform: scale(1.6); }
.btn--primary { background: var(--accent-strong); color: var(--paper); }
.btn--primary:hover { background: var(--accent-press); }
.btn--primary:focus-visible { outline-color: var(--paper); }
.btn--ghost { color: var(--paper); border: 1px solid var(--line-strong); background: rgba(11, 13, 16, .35); }
.btn--ghost:hover { border-color: var(--paper); }
.btn--paper { background: var(--paper); color: var(--ink); }
.btn--paper:hover { background: #fff; }
.btn--lg { min-height: 60px; padding: 0 30px; font-size: .875rem; }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: .75rem; }

/* status tag used on projects */
.status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.status--live { color: var(--paper); }
.status--live::before { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.status--testing::before { background: transparent; border: 1.5px solid var(--accent); }
.status--demo::before { background: transparent; border: 1.5px solid var(--muted); }
.status--building::before { background: transparent; border: 1.5px dashed var(--accent); border-radius: 2px; animation: status-building 2.4s ease-in-out infinite; }
@keyframes status-building { 50% { background: var(--accent); } }

/* ═════════════════════════ shared chrome: defined once, here, for every page ═════════════════════════ */

/* registration marks: "+" on one line across the middle of the window, fixed, decorative. The policy, on every page:
   - They sit under the content (z-index 0; main, the footer and the strips are 1), so a mark never paints on top of text.
   - The two outer marks stand in the margin, half a gutter outside the text column, where no line of text reaches them.
   - The three inner marks cross the column, so they are for frames composed one idea per window (the home page's
     hero, statement and capabilities stage). Phones and short windows hide them; a reading page hides them in its
     own stylesheet; .is-edge (set by a page's script) hides them while a reading section or a centred headline
     crosses their line, and .is-right hides the fourth alone while a column of text on the right does.
   - On a page that drives its own start (data-ready="manual") the marks wait for that page's script to show them,
     so they never flash across the first headline while the script is still on its way.
   - On a phone the gutter is narrow: there the outer marks move closer to the edge and are quieter. */
.marks { position: fixed; inset: 0; z-index: 0; pointer-events: none; transition: opacity .35s var(--ease); }
.marks i { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; opacity: .55; transition: opacity .35s var(--ease); }
.marks i::before, .marks i::after { content: ''; position: absolute; background: var(--paper); }
.marks i::before { left: 4px; top: 0; width: 1px; height: 9px; }
.marks i::after { top: 4px; left: 0; height: 1px; width: 9px; }
.marks i:nth-child(1) { left: calc(var(--edge) - var(--gutter) / 2); }
.marks i:nth-child(2) { left: 27.5%; }
.marks i:nth-child(3) { left: 50%; }
.marks i:nth-child(4) { left: 72.5%; }
.marks i:nth-child(5) { left: calc(100% - var(--edge) + var(--gutter) / 2); }
.marks.is-edge i:nth-child(2), .marks.is-edge i:nth-child(3), .marks.is-edge i:nth-child(4), .marks.is-right i:nth-child(4) { opacity: 0; }
@media (max-width: 900px), (max-height: 599px) { .marks i:nth-child(2), .marks i:nth-child(3), .marks i:nth-child(4) { display: none; } }
@media (max-width: 600px) {
  .marks i:nth-child(1), .marks i:nth-child(5) { opacity: .3; }
  .marks i:nth-child(1) { left: 8px; }
  .marks i:nth-child(5) { left: calc(100% - 8px); }
}
html.js[data-ready="manual"] .marks { opacity: 0; }

/* header: a solid ink bar behind the logo and the links that fades out below them, so nothing scrolls through them.
   Its contents line up with .wrap at every width, and stay out of a notch when a phone is held sideways. */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 10; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-left: max(var(--edge), env(safe-area-inset-left, 0px)); padding-right: max(var(--edge), env(safe-area-inset-right, 0px)); pointer-events: none; }
.site-header::before { content: ''; position: absolute; inset: 0 0 -30px 0; background: linear-gradient(to bottom, var(--ink) 0, var(--ink) calc(var(--header-h) - 10px), rgba(11, 13, 16, 0) 100%); z-index: -1; pointer-events: none; }
.site-header > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__mark .ink { fill: #F4F5F7; }
.brand__word { font-family: var(--font-wordmark); font-size: 1.62rem; line-height: 1; letter-spacing: .045em; padding-top: .08em; color: #F4F5F7; }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 36px); margin-left: auto; }
.site-nav a:not(.btn) { font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 14px 2px; position: relative; transition: color .2s; }
.site-nav a:not(.btn)::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: 8px; height: 1px; background: var(--paper); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.site-nav a:not(.btn):hover, .site-nav a[aria-current]:not(.btn) { color: var(--paper); }
.site-nav a:not(.btn):hover::after, .site-nav a[aria-current]:not(.btn)::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--ink-3); border: 1px solid var(--line); font-family: var(--font-body); font-weight: 500; font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; }
.menu-toggle i { display: inline-flex; gap: 3px; }
.menu-toggle i::before, .menu-toggle i::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; transition: transform .25s var(--ease); }
.menu-toggle[aria-expanded="true"] i::before { transform: translateX(3.5px); }
.menu-toggle[aria-expanded="true"] i::after { transform: translateX(-3.5px); }

/* phone menu: an opaque sheet under the header bar. chrome.js opens it and makes everything behind it inert.
   The four links are large and sit at the bottom, by the thumb; the booking button and one line of small type follow.
   If the window is too short for all of it, the sheet scrolls. */
.menu-panel { position: fixed; inset: 0; z-index: 9; background: var(--ink); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--header-h) + 24px) var(--pad-r) max(28px, env(safe-area-inset-bottom, 0px)) var(--pad-l); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s; }
.menu-panel.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
.menu-panel > * { flex: none; }
.menu-panel nav { margin-top: auto; }
.menu-panel nav a { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 0; border-top: 1px solid var(--line); font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 9vw, 3.4rem); line-height: 1.05; text-transform: uppercase; letter-spacing: -.01em; }
.menu-panel nav a span { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .12em; color: var(--faint); }
.menu-panel nav a[aria-current] span { color: var(--accent); }
.menu-panel .btn { margin-top: 28px; width: 100%; }
.menu-panel__meta { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; }
.menu-panel__meta a { display: inline-flex; align-items: center; min-height: 44px; color: var(--paper); }
/* short windows (a phone held sideways): smaller links in two columns, so the whole sheet still fits without scrolling */
@media (max-height: 560px) {
  .menu-panel { padding-top: calc(var(--header-h) + 8px); padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)); }
  .menu-panel nav a { font-size: 1.5rem; padding: 10px 0; }
  .menu-panel .btn { margin-top: 14px; min-height: 52px; }
  .menu-panel__meta { margin-top: 4px; }
}
@media (max-height: 560px) and (min-width: 560px) {
  .menu-panel nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--gutter) * 2); }
}

@media (max-width: 900px) {
  :root { --header-h: 64px; }
  .site-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-actions .btn { display: none; }      /* the menu sheet and the dock carry the booking action on phones */
}
@media (min-width: 901px) { .menu-panel { display: none; } }
/* Without JavaScript (or if the shared script never arrived) the Menu button cannot open anything: it goes, and the
   booking pill stays in the header in its place. */
html:not(.js) .menu-toggle { display: none; }
@media (max-width: 900px) { html:not(.js) .header-actions .btn { display: inline-flex; } }
@media (max-width: 359px) { html:not(.js) .site-header { gap: 12px; } html:not(.js) .header-actions .btn { padding: 0 14px; gap: 9px; } }

/* phone booking dock: the action is always one thumb away (chrome.js adds .is-on). On a page whose first screen has
   its own booking button (marked data-dock-after) it comes on once that has scrolled away; on any other page it is on
   from the start. It stays out of the end of the page: everything from the first part marked data-dock-hide (the
   closing band with its button, the footer with its link) to the last line. For that stretch the header carries the
   booking pill instead (html.dock-end, set by chrome.js), so the bar is never on top of the band's words, its button
   or the footer's lines, and the footer needs no room for it.
   It is compact: a 50px button on a short ink fade, and only the button takes taps. While it is off screen it is
   hidden with visibility, which also takes it out of the tab order. The button's size is set here, whatever size
   class the link carries.
   A page's own script can also hold it away for a stretch (html.dock-away): the home page does while one of its pinned
   stages has the whole window on a phone. For that stretch too the header carries the booking pill, as it does on
   a wide screen, so the action stays one tap away; under 440px the wordmark makes room for it (the mark stays). */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; display: none; justify-content: center; padding: 12px var(--pad-r) max(8px, env(safe-area-inset-bottom, 0px)) var(--pad-l); background: linear-gradient(to top, rgba(11, 13, 16, .96) 0, rgba(11, 13, 16, .96) 58%, rgba(11, 13, 16, 0) 100%); pointer-events: none; transform: translateY(110%); visibility: hidden; transition: transform .4s var(--ease), visibility 0s linear .4s; }
.dock .btn { width: 100%; max-width: 480px; min-height: 50px; padding: 0 22px; font-size: .8125rem; pointer-events: auto; }
.dock.is-on { transform: none; visibility: visible; transition: transform .4s var(--ease); }
html.dock-away .dock { transform: translateY(110%); visibility: hidden; transition: transform .4s var(--ease), visibility 0s linear .4s; }
@media (max-width: 900px) {
  .dock { display: flex; }
  html:is(.dock-away, .dock-end) .header-actions .btn { display: inline-flex; animation: pill-in .45s var(--ease); }
}
@media (max-width: 439px) { html:is(.dock-away, .dock-end) .brand__word { display: none; } }
@media (max-width: 359px) { html:is(.dock-away, .dock-end) .site-header { gap: 12px; } html:is(.dock-away, .dock-end) .header-actions .btn { padding: 0 14px; gap: 9px; } }
@keyframes pill-in { from { opacity: 0; transform: translate3d(0, -6px, 0); } }
/* A phone held sideways has no height to give to a booking bar: there the header carries the booking pill instead. */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .dock { display: none; }
  .header-actions .btn { display: inline-flex; }
}

/* footer */
.site-footer { position: relative; z-index: 1; background: var(--ink); border-top: 1px solid var(--line); padding-block: clamp(40px, 6vw, 80px) max(28px, env(safe-area-inset-bottom, 0px)); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px var(--gutter); align-items: start; }
.site-footer__brand p { margin-top: 14px; color: var(--muted); font-size: var(--t-small); max-width: 34ch; }
.site-footer h2 { font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; }
.site-footer li a { display: inline-block; padding: 6px 0; color: var(--paper); font-size: var(--t-small); transition: color .2s; }
.site-footer li a:hover { color: var(--accent); }
.site-footer__base { margin-top: clamp(36px, 5vw, 64px); padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
/* on touch screens the footer links are full 44px targets */
@media (max-width: 900px), (pointer: coarse) { .site-footer li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; } }
@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* "next page" strip, after the footer on the home page. It wraps instead of pushing a small phone wider. */
.next-strip { position: relative; z-index: 1; display: block; background: var(--ink-2); border-top: 1px solid var(--line); padding: clamp(36px, 5vw, 64px) 0; }
.next-strip__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.next-strip__row > div { min-width: 0; }
.next-strip .display { font-size: clamp(2rem, 5vw, 4.4rem); transition: color .3s; }
.next-strip__go { display: inline-flex; align-items: center; gap: 16px; white-space: nowrap; }
.next-strip__go i { width: clamp(48px, 9vw, 140px); height: 1px; background: currentColor; position: relative; transition: width .4s var(--ease); }
.next-strip__go i::after { content: ''; position: absolute; right: 0; top: -3.5px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
/* the strip is full width and the last thing on the page: its focus ring is drawn inside it, or three sides would be off screen */
.next-strip:focus-visible { outline-offset: -6px; border-radius: 0; }
.next-strip:hover .display { color: var(--accent); }
.next-strip:hover .next-strip__go i { width: clamp(64px, 12vw, 190px); }
@media (max-width: 380px) { .next-strip__go i, .next-strip:hover .next-strip__go i { width: 28px; } }

/* closing booking band (Home 6.8 and the end of the Projects page): one component.
   A deep cobalt wash rising from the bottom of an ink band, the question, one paper button, the email line.
   --cb is the clear strip under the copy where the lattice rises. .closing__still is the lattice still: "screen" lets
   only its lit dots through, so its dark ground drops out over the wash, and the mask takes it to nothing before it
   reaches the words. The still is a 2:1 band around the lattice's horizon; 40% brings that horizon to the top of the strip. (On Home the live canvas draws the lattice
   instead, and home.css hides the still while it does.) */
.closing { position: relative; isolation: isolate; overflow: hidden; overflow: clip; text-align: center; --cb: clamp(150px, 28vh, 330px); min-height: 100vh; min-height: 100svh; padding: clamp(84px, 14vh, 170px) 0 var(--cb); background: radial-gradient(120% 90% at 50% 100%, #16236B 0%, #0E1436 45%, #0B0D10 80%); }
.closing__inner { display: grid; justify-items: center; gap: clamp(14px, 3vh, 34px); }
.closing__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.5rem, min(6.9vw, 11.5vh), 7.4rem); line-height: 1; letter-spacing: -.025em; max-width: 13.5em; text-wrap: balance; }
.closing .lede { max-width: 50ch; }
.closing .btn { margin-top: 8px; }
.closing .btn:focus-visible { outline-color: var(--paper); }
.closing__email { color: #B9C0CE; font-size: var(--t-small); }
.closing__email .link { display: inline-block; padding: 12px 2px; }
.closing__still { position: absolute; z-index: -1; left: 50%; bottom: 0; width: max(100%, 900px); max-width: none; height: calc(var(--cb) + 16px); object-fit: cover; object-position: 50% 40%; transform: translateX(-50%); mix-blend-mode: screen; opacity: .85; -webkit-mask-image: linear-gradient(to top, #000 55%, transparent 100%); mask-image: linear-gradient(to top, #000 55%, transparent 100%); pointer-events: none; -webkit-user-select: none; user-select: none; }
@media (max-height: 760px) {
  /* the band still fits one short window */
  .closing { --cb: clamp(150px, 26vh, 330px); }
  .closing__inner { gap: clamp(12px, 2.4vh, 34px); }
  .closing__title { font-size: clamp(2.5rem, min(6.9vw, 10.5vh), 7.4rem); }
}
@media (max-width: 900px) {
  .closing { --cb: clamp(230px, 44vh, 400px); min-height: 0; padding: clamp(96px, 16vh, 150px) 0 var(--cb); }
  .closing .btn { width: 100%; max-width: 420px; min-width: 0; padding-block: 6px; white-space: normal; text-align: center; }   /* at a very large text size the label wraps instead of widening the page */
  .closing__title { font-size: clamp(2.4rem, 10.4vw, 4.6rem); }
}
@media (max-width: 900px) and (min-width: 600px) { .closing .btn { width: auto; } }
/* a phone held sideways: the label, the question, the sentence and the button fit one short window together */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .closing { --cb: 150px; padding-top: 76px; }
  .closing__title { font-size: clamp(1.9rem, 11.5vh, 3rem); max-width: 22em; }
}

/* reveal on scroll: only when JavaScript is running, never under reduced motion */
.js .reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal-line { clip-path: inset(0 0 100% 0); transform: translate3d(0, .4em, 0); transition: clip-path 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal-line.is-in { clip-path: inset(0 0 -20% 0); transform: none; }
.nointro .reveal, .nointro .reveal-line { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .reveal, .js .reveal-line { opacity: 1; transform: none; clip-path: none; }
}

/* Forced colours (Windows High Contrast). The system repaints text, borders and backgrounds and drops gradients, so:
   every button gets an outline (a filled pill would otherwise be bare text), the header gets a solid ground in place
   of its gradient bar, and the small filled dots keep a fill. */
@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
  .btn::after { forced-color-adjust: none; background: ButtonText; }
  .site-header { background: Canvas; }
  .brand__mark .ink { fill: CanvasText; }
  .brand__word { color: CanvasText; }
  .status::before { forced-color-adjust: none; background: Canvas; border: 1.5px solid ButtonText; box-shadow: none; }
  .status--live::before { background: ButtonText; }
  .status--demo::before { border-style: dotted; }
  .marks i::before, .marks i::after { forced-color-adjust: none; background: CanvasText; }
  .menu-toggle i::before, .menu-toggle i::after { forced-color-adjust: none; background: ButtonText; }
  .next-strip__go i { forced-color-adjust: none; background: CanvasText; color: CanvasText; }
}