/* The type systems' faces (fonts/, self-hosted latin subsets, variable weight; licences beside them). A face only loads once a system uses it. */
@font-face { font-family: "Geist"; src: url("../fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Urbanist"; src: url("../fonts/urbanist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --ink-rgb: 20 43 67;
  --stone: #D9DCD8;
  --stone-bright: 1;
  --navy: #142B43;
  --ink: var(--navy);
  --ink-mid: #24394F;
  --teal: #168590;
  --signal: #C8462C;
  --paper: #EEF0EB;
  --ambient: #f5f5f3;
  --light-rgb: 255 250 243;
  /* The fixed header's footprint (its top padding and the wordmark, the tallest thing in it), and the clearance a view's
     content keeps below it: the header plus a breath. Every view is composed under it. */
  --top-pad: 2rem; --head: calc(var(--top-pad) + 10.7rem * 586 / 2572); --clear: calc(var(--head) + 1.5rem);
}

:root[data-ink="black"] { --navy: #161616; --ink: #161616; --ink-mid: #2b2b2b; --ink-rgb: 22 22 22; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: clamp(16px, 1.25vw, 21px); color-scheme: light; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: var(--font-body); font-size: var(--t-body); font-weight: var(--w-body); color: var(--ink);
  background: #b9b6ae; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* ---- the wall: stone, then the hour's ambient multiplied over it ---- */
.wall { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.wall > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.wall { transform: scale(1.03); will-change: transform; }
.stone { background: var(--stone) url("../assets/concrete.jpg") center / cover; background-blend-mode: luminosity;
  filter: brightness(var(--stone-bright, 1)) blur(.55px); }
.ambient { background: var(--ambient); mix-blend-mode: multiply; }

/* ---- page frame ---- */
.top, main { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: 2.5rem; }
.top { display: flex; align-items: center; justify-content: space-between; padding-block: var(--top-pad) 0; }
.wordmark { display: block; width: 10.7rem; height: auto; color: var(--ink); }   /* 30% up from the 8.2rem reference */
/* The mark stands off the wall. In shade it is halo-lit from behind — the stone glows softly round each letter. Once the
   sun reaches it the halo gives way: it casts a real shadow in the light instead (Lightcast cuts it from the sunlight).
   --logo-lit (0 → 1, how much of the mark the sun covers) comes from Lightcast. */
@property --logo-lit { syntax: "<number>"; inherits: true; initial-value: 0; }
/* The halo hums: two slow breaths out of step (a 2.9 s swell, a faint 0.43 s flicker) moving the glow a few percent —
   a stable source, completely under control. Only the halo (in shade) hums; reduced motion holds it still. */
@property --hum { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --hum2 { syntax: "<number>"; inherits: false; initial-value: 0; }
@keyframes hum { 0% { --hum: 0; } 22% { --hum: .9; } 47% { --hum: .25; } 71% { --hum: 1; } 100% { --hum: 0; } }
@keyframes hum2 { 0% { --hum2: 0; } 30% { --hum2: 1; } 55% { --hum2: .35; } 80% { --hum2: .8; } 100% { --hum2: 0; } }
.top .wordmark { will-change: transform; transition: --logo-lit .8s ease; animation: hum 2.9s ease-in-out infinite, hum2 .43s linear infinite;
  filter: drop-shadow(0 0 calc(.34rem + var(--hum) * .035rem) rgb(255 251 243 / calc((.71 + .06 * var(--hum) + .018 * var(--hum2)) * (1 - var(--logo-lit)))))
          drop-shadow(0 0 calc(1.26rem + var(--hum) * .1rem) rgb(255 248 236 / calc((.42 + .05 * var(--hum) + .012 * var(--hum2)) * (1 - var(--logo-lit))))); }
@media (prefers-reduced-motion: reduce) { .top .wordmark { animation: none; } .nav-toggle i { transition: none; } }
.top nav { display: flex; gap: 2rem; align-items: center; font-family: var(--font-ui); font-size: var(--t-nav); font-weight: var(--w-nav); }
.top nav a { text-decoration: none; }
.glass, .top nav a.cta {
  background-color: rgb(255 255 255 / .24); -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15);
  border: 1px solid rgb(var(--ink-rgb) / .2); box-shadow: inset 0 1px 0 rgb(255 255 255 / .55); }
.top nav a.cta { padding: var(--navbtn-pad); border-radius: var(--btn-radius); font-weight: var(--w-btn); transition: background-color .15s ease; }
.top nav a.cta:hover { background-color: rgb(255 255 255 / .4); }
main { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.screen main { grid-template-columns: 1.08fr 1fr; }                      /* the drawing set wants room: ~40rem at 1280 */
.art.drawing-mount { width: 100%; justify-self: stretch; }

.hero { position: relative; }
.hero h1 { font-size: var(--t-hero); line-height: var(--lh-hero); letter-spacing: var(--ls-hero); font-weight: var(--w-display); margin: 0 0 1.6rem; white-space: nowrap; }   /* three set lines */
.hero .lede { font-size: var(--t-lede); line-height: var(--lh-lede); color: var(--ink-mid); max-width: var(--measure-lede); margin: 0 0 2rem; }
.actions { display: flex; gap: 1.6rem; align-items: center; }
.btn { display: inline-block; padding: var(--btn-pad); background: var(--navy); color: #F2F1EC; text-decoration: none; font-family: var(--font-ui); font-size: var(--t-btn); font-weight: var(--w-btn); line-height: 1.2;
  letter-spacing: var(--ls-btn); border-radius: var(--btn-radius); box-shadow: inset 0 1px 0 rgb(255 255 255 / .16); transition: background-color .15s ease; }
.btn:hover { background: var(--ink-mid); }
.link { font-weight: var(--w-link); text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; text-decoration-color: rgb(var(--ink-rgb) / .45); }
.link:hover { text-decoration-color: currentColor; }

/* ---- product evidence ---- */
.art { position: relative; justify-self: center; width: 26rem; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* Switching pages cross-fades the light; the shared furniture stays put. */
@view-transition { navigation: auto; }
.top { view-transition-name: top; }
.hero { view-transition-name: hero; }
::view-transition-group(*) { animation-duration: .35s; }

/* ---- Lightcast: light through openings ---- */
/* The wall stands in cool, skylit shade (colour set per frame); sunlit stone is drawn over it, re-exposed. */
.lc-shade { mix-blend-mode: multiply; }
.lc-cast { position: absolute; left: 0; top: 0; width: 100%; z-index: -1; pointer-events: none; overflow: visible;
  mix-blend-mode: darken; opacity: .24; filter: blur(.6px); }   /* cast shadows: page-attached; darken = only where sun lands; faint, a little penumbra */
.top-cast { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: visible;
  mix-blend-mode: darken; opacity: .24; filter: blur(.6px); }   /* the fixed header's cast shadows (site.js): as .lc-cast, but fixed with the header */
.lc-glint { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; mix-blend-mode: screen; overflow: visible; }                                    /* cast shadows: a tint, only where sun lands */

/* ---- the light panel: a review tool floating in the corner, never part of the page ---- */
.lp { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50; width: max-content; font-size: .85rem; color: var(--ink);
  background: rgb(246 245 241 / .78); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgb(var(--ink-rgb) / .14); border-radius: 10px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .6); }
.lp.is-open { width: 24rem; background: rgb(246 245 241 / .97); }
.lp.is-curating { width: 34rem; }
.lp-chip { display: flex; align-items: center; gap: .1rem; padding: .3rem; }
.lp-play { flex: none; width: 2rem; height: 2rem; border-radius: 50%; border: 0; background: transparent; cursor: pointer; position: relative; }
.lp-play:hover, .lp-toggle:hover { background: rgb(var(--ink-rgb) / .06); }
.lp-play::before { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; transform: translateX(1px);
  border-style: solid; border-width: .34rem 0 .34rem .56rem; border-color: transparent transparent transparent var(--ink); }
.lp-play[data-state="playing"]::before { width: .5rem; height: .6rem; transform: none; border: 0;
  background: linear-gradient(90deg, var(--ink) 0 34%, transparent 34% 66%, var(--ink) 66%); }
.lp-toggle { flex: 1; display: flex; align-items: center; gap: .55rem; font: inherit; color: inherit; background: none; border: 0;
  padding: .35rem .6rem .35rem .45rem; border-radius: 6px; cursor: pointer; text-align: left; white-space: nowrap; }
.lp-sun { width: 1.55rem; height: auto; overflow: visible; }
.lp-sun path { fill: none; stroke: rgb(var(--ink-rgb) / .35); stroke-width: 1.2; }
.lp-sun circle { fill: var(--ink); }
.lp-time { font-weight: 600; font-variant-numeric: tabular-nums; }
.lp-phase { color: var(--ink-mid); }
.lp-caret { margin-left: auto; padding-left: .6rem; }
.lp-caret::after { content: ""; display: block; width: .4rem; height: .4rem; border: solid rgb(var(--ink-rgb) / .55); border-width: 1.3px 1.3px 0 0;
  transform: translateY(.12rem) rotate(-45deg); }
.is-open .lp-caret::after { transform: translateY(-.12rem) rotate(135deg); }
.lp-body { display: grid; gap: 1.05rem; padding: 1rem 1rem .85rem; border-bottom: 1px solid rgb(var(--ink-rgb) / .1); }
.lp-body section { min-width: 0; }
.lp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.lp-label { font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-mid); }
.lp-name { font-weight: 500; white-space: nowrap; }
.lp-day { position: relative; padding-bottom: 1.25rem; }
.lp-ticks span { position: absolute; bottom: 0; transform: translateX(-50%); font-size: .75rem; color: var(--ink-mid); }
.lp-ticks span:first-child { transform: none; }
.lp-ticks span:last-child { transform: translateX(-100%); }
.lp-slider { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 1.1rem; margin: 0; background: transparent; cursor: pointer; }
.lp-slider::-webkit-slider-runnable-track { height: .5rem; border-radius: .25rem; background: var(--band, #ccc); box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / .18); }
.lp-slider::-moz-range-track { height: .5rem; border-radius: .25rem; background: var(--band, #ccc); box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / .18); }
.lp-slider::-webkit-slider-thumb { -webkit-appearance: none; width: .95rem; height: .95rem; margin-top: -.225rem; border-radius: 50%;
  background: #f6f5f1; border: 1.5px solid var(--ink); }
.lp-slider::-moz-range-thumb { width: .8rem; height: .8rem; border-radius: 50%; background: #f6f5f1; border: 1.5px solid var(--ink); }
.lp-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; }
.lp-shapes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.is-curating .lp-looks { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.is-curating .lp-shapes { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.lp-tile { position: relative; }
.lp-pick { display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; border: 0; border-radius: 3px; overflow: hidden; cursor: pointer;
  background: #9d9e9a; box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / .12); }
.lp-pick svg { display: block; width: 100%; height: 100%; }
.lp-pick[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.lp-in { position: absolute; top: .2rem; right: .2rem; width: .8rem; height: .8rem; margin: 0; accent-color: var(--ink); cursor: pointer; }
.is-curating .lp-tile.out .lp-pick { opacity: .4; }
.lp-rot { margin: .7rem 0 0; color: var(--ink-mid); line-height: 1.45; }
.lp-refine { padding-top: .95rem; border-top: 1px solid rgb(var(--ink-rgb) / .12); }
.lp-row { display: flex; align-items: center; gap: .9rem; min-height: 2rem; }
.lp-row > span:first-child { width: 5.6rem; color: var(--ink-mid); }
.lp-ink { display: flex; gap: .45rem; margin-right: auto; }
.lp-range { flex: 1; min-width: 0; accent-color: var(--ink); margin: 0; }
.lp-out { width: 5.6rem; text-align: right; font-variant-numeric: tabular-nums; }
.lp-ink button { width: 1.05rem; height: 1.05rem; padding: 0; border-radius: 50%; border: 0; cursor: pointer; }
.lp-ink [data-ink="black"] { background: #161616; }
.lp-ink [data-ink="navy"] { background: #142B43; }
.lp-ink button[aria-pressed="true"] { outline: 1.5px solid var(--ink); outline-offset: 2px; }
.lp-text { font: inherit; color: var(--ink); background: none; border: 0; padding: .15rem 0; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: rgb(var(--ink-rgb) / .35); }
.lp-text:disabled { color: rgb(var(--ink-rgb) / .35); cursor: default; text-decoration: none; }
.lp-text[aria-pressed="true"] { font-weight: 600; }

/* ---- the living gallery: the same panel, curated for the visitor (daylight.js buildPanel, opts.curated) ----
   Opened only by the five-second hold on the footer's mark; no chip. Bottom-left on desktop, below the fixed header and
   clear of the navigator and the mark at the right edge; the same glass, a shade more translucent so the light reads
   through it. Its title and × are the panel's own: no bar, no frame. Every look and opening is a named miniature, three
   to a row (today's first). Desktop: the day across the top, the looks in the left column, the openings and the building
   in the right. When the panel would outgrow the window only the looks' grid scrolls (its own data-native-scroll); the
   title, the day and the building stay in view. */
.lp.lp-curated { left: 1.25rem; right: auto; width: 45rem; max-height: calc(100vh - var(--head) - 2rem); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.lp.lp-curated.is-open { width: 45rem; background: rgb(246 245 241 / .84); display: grid; grid-template-rows: minmax(0, 1fr); }   /* the body takes the panel's height, so the looks' grid is what gives */
.lp.lp-curated:not(.is-open) { display: none; }
.lp-curated .lp-body { min-height: 0; gap: .9rem 1.75rem; padding: .55rem 1rem 1rem; border-bottom: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr);
  grid-template-areas: "title title" "time time" "looks shapes" "looks building"; }
.lp-curated .lp-title { grid-area: title; }
.lp-curated .lp-sec-time { grid-area: time; }
.lp-curated .lp-sec-looks { grid-area: looks; display: flex; flex-direction: column; min-height: 0; }
.lp-curated .lp-sec-shapes { grid-area: shapes; }
.lp-curated .lp-building { grid-area: building; align-self: start; }
.lp-curated .lp-head { margin-bottom: .55rem; }
.lp-curated .lp-building .lp-head { margin-bottom: 0; }
/* Group headings in the site's own small heading (.sec h3): sentence case, the body face at the h3 size and weight. */
.lp-curated .lp-label { margin: 0; font-family: var(--font-body); font-size: var(--t-h3); font-weight: var(--w-h3); line-height: 1.25; letter-spacing: 0; text-transform: none; color: var(--ink); }
.lp-curated .lp-day { padding-bottom: 1.1rem; }
.lp-curated.is-open { animation: lp-enter .22s cubic-bezier(.2, .7, .2, 1); }
@keyframes lp-enter { from { opacity: 0; transform: translateY(.5rem); } }
.lp-curated.no-entrance { animation: none; }
.lp-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 1.7rem; }
.lp-title h2 { margin: 0; font-family: var(--font-display); font-size: var(--t-sub); font-weight: var(--w-display); line-height: 1.2; letter-spacing: var(--ls-sub); }   /* a sub-heading (.ex-head h3): one step above its groups */
.lp-close { position: relative; width: 2rem; height: 2rem; margin-right: -.5rem; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ink); cursor: pointer; }
.lp-close:hover, .lp-close:focus-visible { background: rgb(var(--ink-rgb) / .06); }
.lp-close i { position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; margin: -.75px 0 0 -8px; background: currentColor; transform: rotate(45deg); }   /* the Menu's cross (the navigator's 2 px marks, a hair finer) */
.lp-close i:last-child { transform: rotate(-45deg); }
.lp-clock { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; white-space: nowrap; }
.lp-clock .lp-play { width: 1.6rem; height: 1.6rem; margin-left: -.3rem; }
.lp-clock .lp-sun { width: 1.35rem; }
.lp-curated .lp-head { align-items: center; }
/* The miniatures, named: the swatch (3:2, ≥ 96 × 64 px on desktop), its name beneath in the small type — the chosen one's
   in full ink with the ink ring on its swatch, the rest in the mid ink; Today's carries today's name under its own. */
.lp-curated .lp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem .55rem; align-items: start; align-content: start; }
.lp-curated .lp-looks { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin: -4px; padding: 4px; }   /* the padding keeps the ring inside the scroller */
.lp-curated .lp-looks.is-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent); }   /* more below (daylight.js) */
.lp-curated .lp-pick { aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; box-shadow: none; font: inherit; font-size: var(--t-small); line-height: 1.25; text-align: left; color: var(--ink-mid); }
.lp-curated .lp-sw { display: block; aspect-ratio: 3 / 2; border-radius: 3px; overflow: hidden; background: #9d9e9a; box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / .12); }
.lp-curated .lp-nm, .lp-curated .lp-sub { display: block; }
.lp-curated .lp-nm { margin-top: .35rem; }
.lp-curated .lp-pick[aria-pressed="true"] { outline: none; color: var(--ink); }
.lp-curated .lp-pick[aria-pressed="true"] .lp-sw { outline: 2px solid var(--ink); outline-offset: 2px; }
.lp-curated .lp-pick[aria-pressed="true"] .lp-sub { color: var(--ink-mid); }
.lp-curated .lp-pick:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }
.lp-choices { display: inline-flex; gap: 1.1rem; }
.lp-choice { font: inherit; color: var(--ink-mid); background: none; border: 0; padding: .15rem 0; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: rgb(var(--ink-rgb) / .35); }
.lp-choice[aria-pressed="true"] { color: var(--ink); font-weight: 600; text-decoration-color: var(--ink); }
.lp-choice:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .lp-curated.is-open { animation: none; } }
/* Phones: a bottom sheet in the same glass, the page's width; it scrolls itself if it must (data-native-scroll), never the page. */
@media (max-width: 820px) {
  .lp.lp-curated, .lp.lp-curated.is-open { left: 0; right: 0; bottom: 0; width: auto; max-height: calc(100dvh - .75rem); border-radius: 14px 14px 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px); }
  .lp-curated .lp-body { padding: .5rem 1rem .9rem; gap: .75rem; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "title" "time" "looks" "shapes" "building"; }   /* one column: the looks' grid gives way to the rest */
  .lp-curated .lp-head { margin-bottom: .45rem; }
  .lp-curated .lp-grid { gap: .6rem .5rem; }
  .lp-curated .lp-sw { aspect-ratio: 16 / 9; }             /* a shade shorter than desktop's: more of the looks in the sheet */
  .lp-clock .lp-phase { display: none; }                   /* the hour alone: the head row is tight */
  @keyframes lp-enter { from { opacity: 0; transform: translateY(1.5rem); } }
}
@media (max-width: 820px) and (max-height: 700px) {       /* short phones (an iPhone with Safari's bars): tighter, flatter swatches, so a second row of looks still shows */
  .lp-curated .lp-body { gap: .6rem; }
  .lp-curated .lp-head { margin-bottom: .35rem; }
  .lp-curated .lp-sw { aspect-ratio: 2 / 1; }
}
/* While the gallery is open the navigator's dial (phones, gooey-nav.js) stands aside: the sheet holds the bottom of the screen. */
html.lp-open :is(.gnav-radial, .gnav-goo) { display: none; }

/* ---- the site below the first screen ----
   The first screen is exactly one viewport; the site continues on the same wall. Big headings and the drawing plates
   stand off the wall (data-cast → real shadows where the sun lands); body copy is printed flush. Body text is full ink:
   the mid ink drops under 4.5:1 on the deepest shade. */
.screen { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding-top: var(--head); }   /* the fixed header's room */
.sec, .foot { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: 2.5rem; }
.sec { min-height: 100vh; min-height: 100dvh; padding-block: 4rem; box-sizing: border-box; }
.sec[data-view] { padding-top: var(--clear); }            /* a view of its own: composed below the fixed header */
.sec.voices, .sec.problem, .sec.contact, .sec.examples { align-content: center; }
.sec.solution, #demo { display: flex; flex-direction: column; justify-content: center; }
#demo { justify-content: flex-start; padding-block: var(--clear) 3rem; }   /* the review fills its view below the header; findings follow */
#demo:has(> .demo-film-host) { height: 100vh; height: 100dvh; }   /* the film is one screen exactly: its stage fits the room under the heading (demo-film.js fit), whatever the heading's lines */
@media (min-width: 821px) {                               /* the film's view breathes like the hero's and the contact's: air under the header, the stage centred between the heading and the note */
  #demo:has(> .demo-film-host) { padding-block: calc(var(--head) + 3rem + 2vh) calc(1.25rem + 1.5vh); }
}
/* The section label: a short sentence-case line above the heading, set by the type system (no rule, no capitals — see the
   systems below: a small grey label after Vercel, a bold grotesk heading after Anthropic, a square-bulleted label after Watershed). */
.eyebrow { display: flex; align-items: center; gap: .55rem; margin: 0 0 var(--label-gap); font-family: var(--label-font); font-size: var(--label-size); font-weight: var(--label-weight);
  line-height: 1.3; letter-spacing: var(--label-ls); color: var(--label-color); }
.sec h2 { margin: 0; font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--w-display); max-width: 20ch; }
.sec-lede { margin: 1.4rem 0 0; font-size: var(--t-lede); line-height: var(--lh-lede); max-width: var(--measure-body); }
.sec-row { display: grid; grid-template-columns: 1.2fr .8fr; gap: 4rem; align-items: end; }
.sec-row .sec-lede { margin: 0; }
.sec h3 { margin: 0; font-size: var(--t-h3); font-weight: var(--w-h3); letter-spacing: var(--ls-h3); }
.sec p, .sec li, .sec dd { line-height: var(--lh-body); }
.sec p { text-wrap: pretty; }
.rule { border-top: 1px solid rgb(var(--ink-rgb) / .28); }

/* Industry Voices: one quote at a time; turning is slow, like a heavy page. */
.voices { display: grid; grid-template-columns: .8fr 1.2fr; gap: 5rem; align-items: start; }
.quote { margin: 0; }
.quote-progress { height: 1px; margin-bottom: 2.4rem; background: rgb(var(--ink-rgb) / .22); }
.quote-progress span { display: block; height: 100%; background: var(--ink); transform-origin: left; animation: quote-run 8s linear forwards; }
.quote.paused .quote-progress span { animation-play-state: paused; }
@keyframes quote-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .quote-progress span { animation: none; transform: scaleX(0); } }
.quote blockquote { margin: 0; }
.quote-text { margin: 0; font-size: var(--t-quote); line-height: var(--lh-quote); letter-spacing: var(--ls-quote); font-weight: var(--w-quote); min-height: 6.7em; transition: opacity .6s ease, transform .6s ease; }
.quote figcaption { display: grid; gap: .2rem; margin-top: 1.8rem; transition: opacity .6s ease .05s, transform .6s ease .05s; }
.quote cite { font-style: normal; font-weight: var(--w-h3); }
.quote.turning .quote-text, .quote.turning figcaption { opacity: 0; transform: translateY(.35rem); }
.quote-nav { display: flex; align-items: center; gap: 1.4rem; margin-top: 2.2rem; }
.quote-count { font-family: var(--font-mono); font-size: var(--t-small); font-variant-numeric: tabular-nums; margin-right: auto; }
.quote-nav button, .ex-enlarge { font: inherit; color: var(--ink); background: none; border: 0; padding: .2rem 0; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }

/* The problem: three figures between rules, then the line it all comes to. */
.problem { display: grid; grid-template-columns: .88fr 1.12fr; gap: 5rem; align-items: start; }
.stats { border-bottom: 1px solid rgb(var(--ink-rgb) / .28); }
.stat { display: grid; grid-template-columns: 12rem 1fr; gap: 2rem; padding: 1.6rem 0; border-top: 1px solid rgb(var(--ink-rgb) / .28); }
.stat p { margin: 0; line-height: 1.5; }
.stat .fig { font-size: var(--t-fig); line-height: 1; font-weight: var(--w-display); letter-spacing: var(--ls-fig); font-variant-numeric: tabular-nums; }
.stat .fig small { display: block; margin-top: .45rem; font-family: var(--font-mono); font-size: var(--t-small); letter-spacing: 0; font-weight: 400; }
.stat .ctx { margin-top: .5rem; }
.closing { grid-column: 1 / -1; margin: 1.5rem 0 0; font-size: var(--t-closing); line-height: 1.15; letter-spacing: var(--ls-closing); font-weight: var(--w-display); }

/* The solution: six capabilities, three across. */
.caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem 3.5rem; margin-top: 4.5rem; }
.caps > div:not(.phone-view), .caps > .phone-view > div, .caps .short-split > div { padding-top: 1.3rem; border-top: 1px solid rgb(var(--ink-rgb) / .28); }   /* a capability (phones group them three to a screen) */
.caps p { margin: .7rem 0 0; line-height: 1.55; }

/* Examples: the selector runs across the top as a row of tabs; the case takes the full width below, the drawing on its
   navy sheet (standard for this kind of drawing) with the captions at reading size. */
.examples { display: block; }
.ex-tabs { display: flex; flex-wrap: wrap; gap: 0 2.2rem; margin-top: 2rem; border-bottom: 1px solid rgb(var(--ink-rgb) / .28); }
.ex-tabs button { font: inherit; color: var(--ink-mid); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: .55rem 0 .7rem; cursor: pointer; position: relative; }
.ex-tabs button:hover { color: var(--ink); }
.ex-tabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.examples .sec-row { grid-template-columns: 1.2fr .8fr; }
.ex-case { margin-top: 1.6rem; display: grid; grid-template-columns: 1.25fr .75fr; gap: 0 3rem; align-items: start; }
.ex-head { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 .9rem; }
.ex-head h3 { font-size: var(--t-sub); letter-spacing: var(--ls-sub); font-weight: var(--w-display); font-family: var(--font-display); }
.ex-frame { display: block; width: 100%; padding: 0; border: 0; border-radius: 2px; background: #142B43; cursor: zoom-in; overflow: hidden; }
.ex-frame img { display: block; width: 100%; height: auto; }
.ex-cap { display: grid; gap: 1.6rem; align-content: start; }
.ex-cap h4 { margin: 0 0 .4rem; font-size: var(--t-h3); font-weight: var(--w-h3); letter-spacing: var(--ls-h3); }
.ex-cap p { margin: 0; font-size: var(--t-lede); line-height: var(--lh-lede); }
/* The enlarged drawing: on the wall, the page dimmed a little behind it; the drawing fits the window with a margin, no
   scrolling; title, caption and the Close button in the type system. */
.ex-dialog { width: min(94vw, 90rem); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; background: transparent; color: var(--paper); overflow: visible; }   /* on the dimmed wall: light type */
.ex-dialog::backdrop { background: rgb(28 31 36 / .66); }
.ex-dialog-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin: 0 0 .9rem; }
.ex-dialog-head h3 { margin: 0; font-family: var(--font-display); font-size: var(--t-sub); letter-spacing: var(--ls-sub); font-weight: var(--w-display); }
.ex-dialog-head p { margin: .3rem 0 0; color: rgb(238 240 235 / .78); max-width: 48rem; }
.ex-close { flex: none; display: inline-block; padding: var(--navbtn-pad); background: var(--paper); color: var(--navy); border: 0; border-radius: var(--btn-radius);
  font: inherit; font-family: var(--font-ui); font-size: var(--t-btn); font-weight: var(--w-btn); cursor: pointer; }
.ex-close:hover { background: #fff; }
.ex-dialog-body { display: grid; place-items: center; }
.ex-dialog-body img { display: block; width: auto; max-width: 100%; max-height: calc(100vh - 9.5rem - var(--head)); border-radius: 2px; }
.ex-dialog:modal { top: var(--head); }                    /* centred in the room below the fixed header, never over it */

/* Get started: what to expect beside the inquiry form. */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.contact h3 { margin-top: 2.6rem; }
.expect { margin: 1rem 0 0; padding: 0; list-style: none; }
.expect li { padding: .75rem 0; border-top: 1px solid rgb(var(--ink-rgb) / .2); line-height: 1.45; }
.inquiry { display: grid; gap: 1.3rem; padding-top: 2.6rem; }
.inquiry .pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.3rem; }
.inquiry label { display: grid; gap: .45rem; font-size: .9rem; }
.inquiry input, .inquiry textarea { font: inherit; font-size: 1rem; color: var(--ink); background: rgb(250 250 247 / .62); border: 1px solid rgb(var(--ink-rgb) / .24);
  border-radius: 3px; padding: .75rem .85rem; resize: vertical; width: 100%; min-width: 0; }
.inquiry input:focus, .inquiry textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.send { display: flex; align-items: center; gap: 1.4rem; }
.send .btn { font: inherit; border: 0; cursor: pointer; }
.form-status { margin: 0; line-height: 1.45; }

/* Footer */
/* The last view of a page: its section and the footer share one screen — the section centres in the room above the footer,
   so its padding, and the footer's, are tightened to fit at 1280×720 (Home's contact; Product's examples; About's vision;
   Industry Voices' whole screen). Where the section needs the whole screen the pager keeps its top stop and the end frame shows the footer. */
.last { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding-top: var(--head); }
.last > .sec { flex: 1; min-height: 0; padding-block: 1.5rem 1rem; }
.last > .sec.examples { display: flex; flex-direction: column; justify-content: center; }
.last .contact h3 { margin-top: 1.2rem; }
.last .expect li { padding: .5rem 0; }
.last .foot { padding-block: 0 1.2rem; }
.last .foot-row { padding-top: 1.2rem; }
.last .page-cta { padding-block: 1.6rem 1.4rem; }
.last .page-main > .sec { padding-block: 1rem 1.25rem; }  /* Industry Voices: header, voices and footer in one screen */
.last .voice-list { margin-top: 1.4rem; }
@media (min-width: 821px) and (max-height: 1199px) {      /* below the fixed header the drawing takes half the width, so the case, the close and the footer share one screen */
  .last .ex-case { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 821px) and (max-height: 800px) {       /* short windows (1280×720): the last section and the footer still share one screen (not phones: they stack) */
  .last .page-cta { padding-block: .6rem .5rem; }
  .last .contact { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 4rem; }   /* the list's lines run longer, so it stays short beside the form */
  .last .expect li { padding: .4rem 0; }
  .last .ex-head { margin-bottom: .6rem; }
  .last .foot { padding-bottom: .9rem; }
  .last .foot-row { padding-top: .9rem; }
  .last .ex-tabs { margin-top: .75rem; }
  .last .ex-case { margin-top: .6rem; grid-template-columns: .9fr 1.1fr; }   /* the full-width column (no gutter) would make the drawing taller than the screen */
  .last .voice-list { gap: 1.2rem 4rem; margin-top: 1rem; }
  .last .voice { padding-top: .8rem; }
  .last .voice-text { font-size: calc(var(--t-voice) * .92); }
  .last .voice figcaption { margin-top: .6rem; }
  .last .page-main > .sec { padding-block: .75rem 1rem; }
}
.foot { padding-block: 0 2.4rem; }
.foot-row { display: flex; align-items: center; gap: 1.6rem; padding-top: 2.4rem; border-top: 1px solid rgb(var(--ink-rgb) / .28); }
.foot-logo { color: var(--ink); }
.foot-logo svg { display: block; width: 7rem; height: auto; }
.foot-mark { flex: none; width: 2.5rem; height: 2.5rem; margin-left: auto;  /* the brand mark, at the far right, centred on the logo's line */
  touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }   /* the secret hold (daylight.js wireHold): a thumb on it neither scrolls nor gets a callout */
.foot-mark svg { display: block; width: 100%; height: 100%; }
/* The hold: the strokes drop to a shell of their ink and the ink fills back from the bottom up (.fm-ink, clipped by a
   rising rect that daylight.js moves); let go and the shell comes back. At five seconds, a settle. */
.foot-mark .fm-shell { transition: opacity .3s ease; }
.foot-mark .fm-ink { opacity: 0; }
.foot-mark.is-holding .fm-shell { opacity: .4; transition-duration: .12s; }
.foot-mark.is-holding .fm-ink, .foot-mark.is-set .fm-ink { opacity: 1; }
.foot-mark.is-set { animation: fm-settle .25s ease; }
@keyframes fm-settle { 50% { transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) { .foot-mark .fm-shell { transition: none; } .foot-mark.is-set { animation: none; } }
.legal { margin: 0; font-size: var(--t-small); }

/* ---- hero card styles (review) — cycled by thin arrows and index marks under the hero ----
   Each card is a physical piece with a standoff and a transparency (set in home.js), so its shadow and glint come
   from the light. None touches the screen's side: the card aligns to the logo's edge and the text sits inside it. */
.screen { position: relative; }
.cyclers { position: absolute; z-index: 2; left: max(2.5rem, calc((100% - 76rem) / 2 + 2.5rem)); bottom: .7rem; display: grid; grid-template-columns: auto auto; gap: 0 2.2rem; }
.cyclers .place-row { grid-column: 1 / -1; }
.card-cycle { display: flex; align-items: center; gap: .55rem; font-size: .8rem; color: var(--ink-mid); }
.cc-title { width: 2.6rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.card-cycle button { display: grid; place-items: center; width: 2rem; height: 1.6rem; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink); opacity: .65; }
.card-cycle button:hover { opacity: 1; }
.card-cycle svg { width: 1.45rem; height: auto; fill: none; stroke: currentColor; stroke-width: 1; }
.cc-marks { display: flex; gap: .35rem; align-items: center; }
.cc-marks i { display: block; width: .75rem; height: 1px; background: rgb(var(--ink-rgb) / .32); transition: width .35s ease, background .35s ease; }
.cc-marks i.on { width: 1.6rem; background: var(--ink); }
.cc-name { margin-left: .4rem; letter-spacing: .02em; }

.hero-card { display: none; }
.carded .screen main { grid-template-columns: 1.15fr 1fr; }
.carded .hero { z-index: 0; view-transition-name: none; padding: 1.7rem 2rem; }   /* the glass hugs the copy */   /* the hero owns its layers: card behind the text */
.carded .hero h1 { font-size: var(--t-hero-card); }
.carded .hero-card { display: block; position: absolute; z-index: -1; inset: 0; }
/* 2 Inset glass and 3 Glass fin: acid-etched low-iron glass, square, the top arris catching the light */
[data-card="inset"] .hero-card, [data-card="fin"] .hero-card {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"), linear-gradient(170deg, rgb(255 255 255 / .2), rgb(255 255 255 / .07) 55%, rgb(255 255 255 / .12));
  -webkit-backdrop-filter: blur(16px) saturate(1.05); backdrop-filter: blur(16px) saturate(1.05);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), inset 0 0 0 1px rgb(255 255 255 / .16); }
/* 3 the fin: the same glass as one tall slab, top of the screen to the bottom — a boundary-to-boundary piece, like the light */
[data-card="fin"] .hero-card { top: calc(-1 * var(--to-top, 6rem)); bottom: calc(-1 * var(--to-bottom, 6rem));
  box-shadow: inset 1px 0 0 rgb(255 255 255 / .55), inset -1px 0 0 rgb(255 255 255 / .22); }
/* 4 Stone tablet: the same concrete, raised — it takes the wall's own light and texture, a touch brighter and flatter,
   with crisp arrises, and (opaque) a full shadow */
[data-card="tablet"] .hero-card { -webkit-backdrop-filter: brightness(1.07) contrast(.9); backdrop-filter: brightness(1.07) contrast(.9);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), inset 1px 0 0 rgb(255 255 255 / .28), inset 0 -1px 0 rgb(var(--ink-rgb) / .12), inset -1px 0 0 rgb(var(--ink-rgb) / .07); }
/* 5 Vellum: a drafting sheet — warm, translucent, a hairline border inset like a drawing's margin */
[data-card="vellum"] .hero-card { background: rgb(250 248 242 / .52); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
  box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / .1); }
[data-card="vellum"] .hero-card::after { content: ""; position: absolute; inset: .7rem; border: 1px solid rgb(var(--ink-rgb) / .14); }
.lp-check input { margin-left: auto; accent-color: var(--ink); width: 1rem; height: 1rem; }

/* ---- the type systems (Director → Type; ?font=house|engineered|editorial, kept as "daylight-font") ----
   Three complete systems, each taken from real sites of the standing the site wants (screenshots and CSS read 2026-10-09;
   _lab/type-review.html shows the crops beside the result). Every size, weight, tracking, line-height, measure, label
   treatment and button is a property here; the rules above read them. :root carries the default system (House). */
:root {
  /* 1 · House — after the wordmark: Urbanist, the nearest open face to its letterforms (flat-tailed single-storey g, circular
     bowls, flat e), set at 600 like the mark, with Watershed's body weight (500); the furniture after Ramp, Watershed and
     Mercury. Section label: Watershed's square-bulleted sentence-case line (the square is the mark's own i-dot). Buttons:
     Watershed's — 2 px corners, 40 px tall — at the mark's weight; the nav takes Ramp's solid button. */
  --font-display: "Urbanist", system-ui, sans-serif; --font-body: var(--font-display); --font-ui: var(--font-body); --font-mono: var(--font-body);
  --w-display: 600; --w-h3: 600; --w-body: 500; --w-nav: 500; --w-btn: 600; --w-link: 500; --w-quote: 500;
  --t-hero: 3.3rem; --t-hero-card: 3.1rem; --lh-hero: 1.02; --ls-hero: -.03em;
  --t-h2: 2.8rem; --lh-h2: 1.05; --ls-h2: -.025em; --t-sub: 1.5rem; --ls-sub: -.01em;
  --t-closing: 2.1rem; --ls-closing: -.02em; --t-fig: 2.6rem; --ls-fig: -.03em;
  --t-lede: 1.12rem; --lh-lede: 1.5; --measure-lede: 26rem; --measure-body: 30rem; --t-body: 1rem; --lh-body: 1.55; --t-small: .85rem;
  --t-h3: 1.1rem; --ls-h3: -.01em; --t-nav: .95rem;
  --t-quote: 1.75rem; --lh-quote: 1.3; --ls-quote: -.015em; --t-voice: 1.2rem; --lh-voice: 1.34;
  --t-btn: .95rem; --ls-btn: 0; --btn-pad: .72rem 1.15rem; --btn-radius: 2px; --navbtn-pad: .45rem .9rem;
  --label-font: var(--font-body); --label-size: .88rem; --label-weight: 600; --label-color: var(--ink); --label-ls: 0; --label-gap: 1.1rem;
}
.eyebrow::before { content: ""; width: .42em; height: .42em; background: currentColor; }
.top nav a.cta { background-color: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: none; }   /* Ramp: the solid button in the nav */
.top nav a.cta:hover { background-color: var(--ink-mid); }
:root[data-font="engineered"] {
  /* 2 · Engineered — after Vercel, Linear and Ramp. One neutral grotesk (Geist: square dots and flat terminals, like the
     wordmark's), weight 500 display set tight, sentence case; Geist Mono only for counts and units. Section label: a small
     sentence-case grey line (Vercel's "Features", Ramp's "Our values"). Buttons: Linear's and Vercel's hero pills — 44 px
     tall, weight 500, solid ink; the nav button Linear's small pill, on glass. */
  --font-display: "Geist", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --w-display: 500; --w-h3: 500; --w-body: 400; --w-btn: 500; --w-link: 400; --w-quote: 400;
  --lh-hero: 1.02; --ls-hero: -.045em;
  --t-h2: 2.7rem; --lh-h2: 1.06; --ls-h2: -.035em; --t-sub: 1.45rem; --ls-sub: -.015em;
  --t-closing: 2rem; --ls-closing: -.03em; --ls-fig: -.04em;
  --t-lede: 1.1rem; --t-h3: 1.05rem; --t-nav: .9rem;
  --t-quote: 1.7rem; --ls-quote: -.02em; --t-voice: 1.2rem; --lh-voice: 1.38;
  --t-btn: .95rem; --ls-btn: -.005em; --btn-pad: .78rem 1.3rem; --btn-radius: 999px; --navbtn-pad: .42rem .95rem;
  --label-size: .85rem; --label-weight: 500; --label-color: var(--ink-mid);
}
:root[data-font="editorial"] {
  /* 3 · Editorial — after Harvey, Anthropic and Linear's Method page. A serious text serif for everything that speaks
     (Newsreader, weight 400, barely tracked) over Inter for everything that works. Section label: Anthropic's bold grotesk
     heading above the statement. Buttons: Harvey's — 4 px corners, 48 px tall, weight 500, solid ink; the nav button
     Harvey's outline, on glass. */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, sans-serif;
  --w-display: 400; --w-h3: 600; --w-body: 400; --w-btn: 500; --w-link: 400; --w-quote: 400;
  --t-hero: 3.6rem; --t-hero-card: 3.35rem; --lh-hero: 1; --ls-hero: -.015em;
  --t-h2: 2.85rem; --lh-h2: 1.04; --ls-h2: -.012em; --t-sub: 1.6rem; --ls-sub: -.005em;
  --t-closing: 2.15rem; --ls-closing: -.01em; --t-fig: 2.6rem; --ls-fig: -.015em;
  --t-lede: 1.1rem; --t-body: .96rem; --lh-body: 1.5; --t-h3: 1.02rem; --ls-h3: -.005em; --t-nav: .9rem;   /* Inter runs large: Harvey and Linear set it at 15–16 px */
  --t-quote: 1.95rem; --lh-quote: 1.28; --ls-quote: -.005em; --t-voice: 1.25rem; --lh-voice: 1.32;
  --t-btn: .9rem; --ls-btn: 0; --btn-pad: .88rem 1.35rem; --btn-radius: 4px; --navbtn-pad: .5rem 1rem;
  --label-size: 1.15rem; --label-weight: 600; --label-ls: -.01em; --label-gap: 1rem;
}
:root:is([data-font="engineered"], [data-font="editorial"]) .eyebrow::before { content: none; }
:root:is([data-font="engineered"], [data-font="editorial"]) .top nav a.cta { background-color: rgb(255 255 255 / .24); color: inherit; border-color: rgb(var(--ink-rgb) / .2); box-shadow: inset 0 1px 0 rgb(255 255 255 / .55); }
:root:is([data-font="engineered"], [data-font="editorial"]) .top nav a.cta:hover { background-color: rgb(255 255 255 / .4); }
h1, .sec h2, .closing, .stat .fig, .quote-text, .voice-text, .empty-title, .about-intro h2, .page-cta h2 { font-family: var(--font-display); }

/* ---- the drawing as ambient art (review) ----
   Positioned by left/top/width only: a transform, opacity or z-index on it would isolate its multiply blend. */
:root:is([data-art="large"], [data-art="vast"]) .screen { overflow: hidden; }
:root:is([data-art="large"], [data-art="vast"]) .hero { z-index: 1; }            /* the copy stays in front */
/* centre (--art-x vw, --art-y vh) and size (--art-w vw) come from the Place row; the drawing's aspect is 600 : 412. */
:root:is([data-art="large"], [data-art="vast"]) .art.drawing-mount { position: absolute; width: calc(var(--art-w, 66) * 1vw);
  left: calc(var(--art-x, 63) * 1vw - var(--art-w, 66) * .5vw);
  top: calc(var(--art-y, 50) * 1vh - var(--art-w, 66) * .3433vw); }
:root[data-art="large"] .art.drawing-mount { color: #8b8b87; }
:root[data-art="vast"] .art.drawing-mount { color: #aaaaa5; }

.wall-texture { pointer-events: none; }                                   /* formwork marks: on top of the light, part of the wall */
.place-row { gap: .9rem; }
.cc-range { display: flex; align-items: center; gap: .4rem; }
.cc-range span { font-size: .72rem; }
.cc-range input { width: 5.5rem; accent-color: var(--ink); margin: 0; }
.cc-reset { font: inherit; font-size: .72rem; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }

/* "Get in touch" on glass (No card): frost instead of the solid fill — glass.js draws the slab, its glint and shadow */
.btn.glass-btn { background: rgb(250 250 247 / .2); color: var(--ink); box-shadow: none; }   /* the satin etch lifts what's behind it */
.btn.glass-btn:hover { background: rgb(250 250 247 / .32); }

/* review controls: hide them all (top right, or H) to see the page clean */
.hide-controls { position: fixed; top: .7rem; right: .8rem; z-index: 60; font: inherit; font-size: .72rem; letter-spacing: .04em; color: var(--ink-mid);
  background: rgb(246 245 241 / .6); border: 1px solid rgb(var(--ink-rgb) / .12); border-radius: 4px; padding: .25rem .55rem; cursor: pointer; }
.controls-hidden .hide-controls { opacity: .3; }
.controls-hidden .hide-controls:hover, .controls-hidden .hide-controls:focus-visible { opacity: 1; }
.controls-hidden :is(.cyclers, .lp:not(.lp-curated)) { display: none !important; }   /* the living gallery (.lp-curated) is the visitor's, not a review control */
.acts-row .cc-range input[type=range] { width: 4.4rem; }
.act-name { min-width: 9.5rem; }

.act-tabs { display: inline-flex; gap: .15rem; flex-wrap: wrap; }
.act-tabs button { position: relative; font: inherit; font-size: .74rem; color: var(--ink-mid); background: none; border: 1px solid transparent; border-radius: 4px; padding: .15rem .45rem; cursor: pointer; }
.act-tabs button:hover { color: var(--ink); }
.act-tabs [aria-selected="true"], .act-tabs .act-all[aria-pressed="true"] { color: var(--ink); border-color: rgb(var(--ink-rgb) / .25); background: rgb(250 250 247 / .45); }
.act-dot { display: none; position: absolute; top: .15rem; right: .15rem; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); }
.act-tabs .set .act-dot { display: block; }
.act-editing { min-width: 15rem; font-size: .76rem; color: var(--ink); }

/* ---- the Director: every review control in one floating panel (bottom-left), like the light panel ---- */
.cyclers { position: fixed; left: 1.25rem; bottom: 1.25rem; top: auto; z-index: 50; display: block; width: 24rem; max-height: calc(100vh - 2.5rem); overflow: auto;
  padding: .2rem 1rem .6rem; font-size: .84rem; color: var(--ink); background: rgb(246 245 241 / .97);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgb(var(--ink-rgb) / .14); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .6); }
.cyclers.folded { width: auto; padding-bottom: .2rem; }
.cyclers.folded > :not(.dir-head) { display: none !important; }
.dir-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 0 .45rem; background: inherit; }
.dir-head b { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.dir-toggle { font: inherit; font-size: .78rem; color: var(--ink); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; padding: 0; }
.cyclers .card-cycle, .cyclers .place-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; padding: .55rem 0; border-top: 1px solid rgb(var(--ink-rgb) / .1); font-size: .84rem; color: var(--ink); grid-column: auto; }
.cyclers .cc-title { flex: 0 0 4.4rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mid); }
.cyclers .cc-name { margin-left: .2rem; }
.cyclers .cc-range { flex: 1 1 100%; display: grid; grid-template-columns: 4.4rem 1fr; align-items: center; gap: .5rem; margin-left: 4.9rem; }
.cyclers .ink-row .cc-range, .cyclers .place-row .cc-range { margin-left: 0; }
.cyclers .place-row > .cc-range:first-of-type, .cyclers .acts-edit .cc-range { margin-left: 0; }
.cyclers .cc-range span { font-size: .78rem; color: var(--ink-mid); }
.cyclers .cc-range input[type=range] { width: 100%; }
.cyclers .ink-row .cc-range { grid-template-columns: 2.6rem 1fr 2.8rem; }
.cyclers .cc-reset { margin-left: auto; font-size: .78rem; }
.cyclers .acts-row .act-tabs { flex: 1 1 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; }
.cyclers .act-tabs button { font-size: .78rem; padding: .3rem .35rem; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid rgb(var(--ink-rgb) / .12); }
.cyclers .acts-edit { border-top: 0; padding-top: 0; }
.cyclers .acts-edit .cc-title { display: none; }
.cyclers .act-editing { flex: 1 1 100%; min-width: 0; font-weight: 500; font-size: .8rem; }
.cyclers { width: 22rem; }
.cyclers .acts-row .act-tabs { grid-template-columns: repeat(3, 1fr); }
.cyclers .act-tabs .act-all { grid-column: 1 / -1; text-align: center; }
.cyclers .cc-reset { white-space: nowrap; }
.cyclers .act-tabs button, .cyclers .cc-reset { display: block; width: auto; height: auto; opacity: 1; }
.act-loop { display: none; width: .8rem; height: .8rem; margin-left: .3rem; vertical-align: -.1rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.act-tabs .looping .act-loop { display: inline-block; }                     /* repeat-one: this act is looping */
.act-tabs .looping { border-color: var(--ink); }

/* the Director, compact: tabs, one small group at a time */
.cyclers { width: 19rem; max-height: none; overflow: visible; padding-bottom: .4rem; }
.cyclers .tab-off { display: none !important; }
.dir-tabs { display: flex; gap: .2rem; padding-bottom: .45rem; }
.dir-tabs button { flex: 1; font: inherit; font-size: .76rem; color: var(--ink-mid); background: none; border: 0; border-bottom: 1.5px solid transparent; padding: .25rem 0; cursor: pointer; }
.dir-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.cyclers.folded .dir-tabs { display: none; }
.cyclers .card-cycle, .cyclers .place-row { padding: .4rem 0; }
.cyclers .cc-title { flex-basis: 3.6rem; }
.cyclers .act-tabs button { font-size: .72rem; }
.cyclers .act-tabs button { display: flex; align-items: center; justify-content: space-between; gap: .3rem; }
.cyclers .act-tabs button > span { overflow: hidden; text-overflow: ellipsis; }
.act-loop { width: .62rem; height: .62rem; margin: 0; flex: none; stroke-width: 1.6; opacity: .75; }
.act-tabs .looping .act-dot { display: none; }
.act-dot { top: .2rem; right: .2rem; width: 3px; height: 3px; }
.cyclers { width: 21rem; }
.cyclers .act-tabs button { font-size: .7rem; padding: .3rem .3rem .3rem .4rem; }

/* Acts: explicit save (edits preview on this page until saved). */
.cyclers .acts-save { flex: 1 1 100%; display: flex; align-items: center; gap: .9rem; margin-top: .25rem; }
.cyclers .acts-state { margin-right: auto; font-size: .78rem; color: var(--ink-mid); }
.cyclers .acts-save .cc-reset { margin-left: 0; }
.cyclers .cc-save { display: block; width: auto; height: auto; opacity: 1; font: inherit; font-size: .78rem; font-weight: 500; padding: .32rem .85rem; border-radius: .3rem; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; white-space: nowrap; }
.cyclers .cc-save:disabled { background: none; color: var(--ink-mid); border-color: rgb(var(--ink-rgb) / .2); cursor: default; }

/* ---- the site: header navigation, the other pages (Product, About Us; Industry Voices and News, unlinked), the foot ----
   The header is the same on every page: Home, Product, About Us and Get in touch; narrow screens fold the links behind a
   Menu button. The page you are on is underlined (aria-current). */
html { scrollbar-gutter: stable; overflow-anchor: none; }   /* the page's own scroll engine frames the views; the browser must not nudge scrollY when content reflows (the carousel, the demo) */                       /* the header sits in the same place on every page, scrolling or not */
/* The header is frozen: fixed at the top of every view, over the wall with no bar (the pager never rests with content
   under it; every view is composed below it). Above the page, under the glint, under the navigator and the review panels.
   Its shadows fall on a fixed layer of their own (site.js), since Lightcast's scroll with the page. */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 2; }
html { scroll-padding-top: var(--head); }                 /* focus and find-in-page bring things into view below it */
/* Where content does pass under it — reduced motion on wide screens, where the page scrolls natively with no pager to frame
   the views — the header gets the lightest backing that keeps it legible once the page has left its top (daylight.js sets
   .is-scrolled): frosted stone, no edge. Phones keep the bare header, as desktop: every phone screen is framed below it. */
@media (min-width: 821px) and (prefers-reduced-motion: reduce) {
  .top { padding-bottom: .6rem; transition: background-color .2s ease; }
  .top.is-scrolled { background-color: rgb(217 220 216 / .72); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); }
}
.brand { display: block; color: inherit; }
.nav-links { display: flex; gap: 2rem; align-items: center; margin: 0; padding: 0; list-style: none; }
.nav-links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .45em; }
.nav-toggle { display: none; }

/* The other pages: the first view is the page's first section, below the fixed header. */
.page-main { flex: 1; display: flex; flex-direction: column; align-items: stretch; min-height: 0; max-width: none; padding-inline: 0; }
.page-main > .sec { flex: 1; min-height: 0; padding-block: 1.75rem 2.25rem; }
.page-main .problem .stat { padding-block: 1.25rem; }      /* the problem shares its view with the header */
.page-main > .problem { padding-block: 1.5rem 1.75rem; }   /* content-bound at 1280×720: the view must not outgrow the screen (it was 725 px) */
.sec h1 { margin: 0; font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--w-display); max-width: 20ch; }

/* Industry Voices: every quote at once, two by two. */
.voices-page { display: flex; flex-direction: column; justify-content: center; }
.voice-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem 4rem; margin-top: 2.6rem; }
.voice { margin: 0; padding-top: 1.2rem; border-top: 1px solid rgb(var(--ink-rgb) / .28); }
.voice blockquote { margin: 0; }
.voice-text { margin: 0; font-size: var(--t-voice); line-height: var(--lh-voice); letter-spacing: var(--ls-quote); font-weight: var(--w-quote); }
.voice figcaption { display: grid; gap: .15rem; margin-top: .9rem; }
.voice cite { font-style: normal; font-weight: var(--w-h3); }

/* News: nothing published yet, said plainly. */
.news { display: flex; flex-direction: column; justify-content: center; }
.empty { margin-top: 2.6rem; padding-top: 1.3rem; border-top: 1px solid rgb(var(--ink-rgb) / .28); max-width: 34rem; }
.empty p { margin: 0; line-height: 1.55; }
.empty .empty-title { font-size: var(--t-quote); line-height: 1.3; letter-spacing: var(--ls-quote); font-weight: var(--w-quote); margin-bottom: .5rem; }

/* About us: who, the mission, the vision (the rev4 site's About copy). */
.about-intro { display: flex; flex-direction: column; justify-content: center; }
.about-intro .sec-row { grid-template-columns: 1.15fr .85fr; }
.about-intro h1 { font-size: var(--t-hero); line-height: var(--lh-hero); letter-spacing: var(--ls-hero); max-width: 16ch; }
.about-intro h2 { font-size: var(--t-sub); line-height: 1.25; letter-spacing: var(--ls-sub); max-width: none; }
.about-intro .sec-lede { margin-top: 1rem; }
.about-mission { display: flex; flex-direction: column; justify-content: center; }
.about-mission h2 { max-width: 24ch; }
.disciplines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem 3.5rem; margin: 4rem 0 0; }
.disciplines > div:not(.phone-view), .disciplines > .phone-view > div, .disciplines .short-split > div { padding-top: 1.3rem; border-top: 1px solid rgb(var(--ink-rgb) / .28); }   /* a discipline (phones group them) */
.disciplines dt { font-size: var(--t-h3); font-weight: var(--w-h3); letter-spacing: var(--ls-h3); }
.disciplines dd { margin: .7rem 0 0; }
.about-vision { display: grid; grid-template-columns: .88fr 1.12fr; gap: 5rem; align-content: center; align-items: start; }
.vision-copy p { margin: 0 0 1.1rem; }
.vision-copy h3 { margin-top: 2rem; }
.vision-copy h3 + p { margin-top: .6rem; }

/* The close of the other pages: back to the form on Home. */
.page-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 3.5rem 3rem; }
.page-cta h2 { margin: 0; font-size: var(--t-closing); line-height: 1.1; letter-spacing: var(--ls-closing); font-weight: var(--w-display); }

/* ---- narrow screens (phones): the links fold behind Menu; every two-column layout becomes one column ---- */
@media (max-width: 820px) {
  html { overflow-x: clip; }
  .screen, .sec, .last { overflow-x: clip; }              /* the root's clip does not hold a phone's layout viewport: what spills past the side (the demo's redlines, the glass's light) is cut at each view, so the page, and the fixed header with it, stays the screen's width */
  .top, .sec, .foot { padding-inline: 1rem; }
  :root { --top-pad: .9rem; --head: calc(var(--top-pad) + 2.25rem); }   /* the Menu and Get in touch buttons are the tallest; a 60 px header, as Linear's (65) and Vercel's (64) phone headers */
  :root.review { --top-pad: 2.7rem; }                    /* review controls (localhost, ?review=1): clear of the Hide-controls switch */
  .top .wordmark { width: 7.6rem; }
  .top .site-nav { gap: calc(2rem - 22px); }               /* the glyph's left half is empty tap room: the gap between the pill and the marks reads as the desktop header's 2rem */
  .top nav a.cta { padding: .45rem .7rem; }
  /* The menu's trigger: three marks in the navigator's own language (gooey-nav.css: 2 px of ink, right-aligned, no box) —
     of three lengths, so they read as a set of marks, not a stock hamburger; a 44 px tap target around a 22 px glyph,
     centred on the pill. Open, the outer marks turn into a cross and the middle one goes (the navigator's easing);
     reduced motion swaps them. The restraint is Chipperfield's and Herzog & de Meuron's phone menus (_lab/nav-review):
     a bare glyph on the wall, nothing framed. */
  .nav-toggle { display: block; order: 2; position: relative; width: 44px; height: 44px; margin-block: -5px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: 3px; }
  .nav-toggle i { position: absolute; right: 0; height: 2px; background: currentColor;
    transition: transform .2s cubic-bezier(.4, 0, .2, 1), width .2s cubic-bezier(.4, 0, .2, 1), opacity .2s cubic-bezier(.4, 0, .2, 1); }
  .nav-toggle i:nth-child(1) { top: 15px; width: 22px; }
  .nav-toggle i:nth-child(2) { top: 21px; width: 14px; }
  .nav-toggle i:nth-child(3) { top: 27px; width: 18px; }
  .nav-toggle[aria-expanded="true"] i:nth-child(1) { width: 20px; transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] i:nth-child(3) { width: 20px; transform: translateY(-6px) rotate(-45deg); }
  /* The menu itself: the header's own glass (the pill's frost, border and inset light), its corners the pill's up to 14 px. */
  .nav-links { display: none; position: absolute; left: 1rem; right: 1rem; top: calc(100% + .6rem); flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: .35rem; border-radius: min(var(--btn-radius), 14px);
    background-color: rgb(238 236 230);   /* solid stone: a backdrop blur let the heading behind ghost through the links */
    border: 1px solid rgb(var(--ink-rgb) / .2); box-shadow: inset 0 1px 0 rgb(255 255 255 / .55); }
  .menu-open .nav-links { display: flex; }
  /* While the menu is open the page under the header recedes behind a stone scrim, so no half-covered line peeks out at the
     panel's edge; the header (z 2) and its menu stay above it. A tap on the scrim closes the menu (daylight.js closes on any
     pointerdown outside the nav). */
  body:has(.site-nav.menu-open)::after { content: ""; position: fixed; inset: 0; z-index: 1; background: rgb(214 210 202 / .78); }
  .nav-links > li > a { display: flex; width: 100%; padding: .8rem .7rem; }   /* 44 px rows */
  main, .screen main, .carded .screen main { grid-template-columns: 1fr; gap: 1.5rem; }
  main:not(.page-main) { padding-inline: 1rem; }
  .hero h1, .carded .hero h1 { white-space: normal; font-size: 2.35rem; }
  .carded .hero { padding: 1.3rem 1.2rem; }
  .sec h1, .sec h2, .about-intro h1 { font-size: 2.1rem; }
  .closing, .page-cta h2 { font-size: 1.6rem; }
  .quote-text { font-size: 1.35rem; }
  .sec-row, .voices, .problem, .examples, .contact, .caps, .ex-cap, .voice-list, .disciplines, .about-vision, .about-intro .sec-row { grid-template-columns: 1fr; gap: 1.8rem; }
  .ex-case { grid-template-columns: 1fr; }
  .stat { grid-template-columns: 1fr; gap: .6rem; }
  .inquiry .pair { grid-template-columns: 1fr; }
  .page-cta { flex-direction: column; align-items: flex-start; }
  .foot-row { flex-wrap: wrap; row-gap: .8rem; }
  .foot-row .legal { order: 3; flex-basis: 100%; }         /* the logo and the mark's slot on one line, the copyright beneath */
}


/* Glass fit (Director → Surface): the card hugs the copy. Its margin past the longest line is the fit, in rem (default 2,
   the same as the left margin); the glass re-measures itself and its shadow is re-traced. */
.carded .hero { justify-self: start; width: max-content; padding-right: var(--glass-fit, 2rem); }
@media (max-width: 820px) { .carded .hero { width: auto; padding-right: 1.2rem; } }   /* phones: the card takes the column, or the page (and the fixed header with it) runs wider than the screen */
.cyclers .fit-row .cc-title { flex-basis: auto; width: auto; }
/* a long row of index marks (the card variants) packs its marks tighter so it stays on one line */
.cyclers .cc-marks:has(i:nth-child(10)) { gap: .28rem; }
.cyclers .cc-marks:has(i:nth-child(10)) i { width: .45rem; }
.cyclers .cc-marks:has(i:nth-child(10)) i.on { width: 1.1rem; }
.cyclers .fit-row .cc-range { margin-left: 0; grid-template-columns: 2.6rem 1fr 3.6rem; }
/* Type (Director → Type): the system's name on the row, where it comes from on the line beneath */
.cyclers .type-row .cc-after { flex: 1 1 100%; margin-left: 4.1rem; font-size: .76rem; line-height: 1.3; color: var(--ink-mid); }

/* The send row: the button never wraps or shrinks; the status takes the remaining width. */
.send .btn { flex: none; white-space: nowrap; }

/* The inquiry form as a glass slab: padding inside the pane (glass.js makes the element the slab). */
.inquiry { padding: 2rem 2.2rem 1.8rem; margin-top: 1.6rem; }
@media (max-height: 800px) { .inquiry { padding: 1.4rem 1.6rem 1.2rem; gap: .9rem; } }
/* Short windows, every view below the fixed header and beside the gutter (1280×720): Product's figures take a narrower
   column so their notes run longer and shorter; the rows and the capabilities close up a little. Not phones: they stack. */
@media (min-width: 821px) and (max-height: 800px) {
  .page-main > .problem { row-gap: 2rem; }
  .problem .stat { grid-template-columns: 9.5rem 1fr; gap: 1.5rem; }
  .sec.solution { padding-bottom: 2.5rem; }
  .caps { margin-top: 3rem; row-gap: 2.25rem; }
}

/* ---- phones: one framed screen per swipe ----
   Every phone screen is exactly one small viewport tall (dvh: never under the iOS toolbar) and composed below the fixed
   header. A screen is either a [data-view] that stays whole or a part of one marked [data-view-phone]; heavy-scroll.js stops
   at each. A view split into several screens gives up its own padding: each screen carries the header's room (--clear) and
   centres its content. Where a view's first screen has no element of its own, the view is a column N screens tall and that
   first screen takes the height the marked screens leave, its content centred by auto margins. Elsewhere .phone-view is
   display: contents, so desktop lays out exactly as before. Splits follow the reference phones (plan.md): one statement or
   one group to a screen (Apple), figures with their notes (Stripe), the case kept whole (Linear's feature crops). */
.phone-view { display: contents; }
.snap-start { display: none; }
@media (max-width: 820px) {
  /* The finger scrolls natively, with the browser's own momentum; each screen snaps to the top (a flick may pass several).
     Only one-screen boxes are snap areas: a view N screens tall would let the page rest anywhere inside it, so its first
     screen snaps on an empty marker one screen tall (.snap-start). Typing pauses the snap, so the keyboard never pulls a
     field away. */
  html { scroll-snap-type: y mandatory; scroll-padding-top: 0; }   /* every screen is composed below the header itself */
  html:has(:is(input, textarea, select):focus) { scroll-snap-type: none; }
  .screen:not(:has(.problem)), #demo, #testimonial, .contact-copy, .problem .sec-intro, [data-view-phone], .snap-start { scroll-snap-align: start; scroll-snap-stop: normal; }
  .solution, .examples, .about-mission, .about-vision { position: relative; }
  .snap-start { display: block; position: absolute; left: 0; top: 0; width: 1px; height: 100dvh; pointer-events: none; }
  :root { --screen-b: 1.5rem; --foot-h: 6.25rem; }        /* --foot-h: Home's footer row (logo and mark, the copyright beneath) */
  .phone-view, [data-view-phone] { display: flex; flex-direction: column; justify-content: center; min-height: 100dvh;
    padding-top: var(--clear); padding-bottom: var(--screen-b); }
  .last { padding-top: 0; }                                 /* each page's last view: its screens carry the header's room */

  /* Home: the hero (the card low, the drawing behind it, as Apple's phone hero sets the picture above the name and the action);
     the film; Industry Voices; the copy of Get in touch; the form with the footer. */
  .screen main:not(.page-main) { align-items: center; padding-top: max(0px, calc(12dvh - var(--head))); padding-bottom: 0; }   /* the card's centre at 56% of the screen: the room above it is 12dvh more than below */
  :root:is([data-art="large"], [data-art="vast"]) .art.drawing-mount { left: 1rem; width: calc(100% - 2rem); top: calc(var(--head) + 1.25rem); }   /* the building below the header, drawn on under the card's top edge: the glass sits over its lower part, as on desktop */
  #demo { padding-bottom: var(--screen-b); }
  .sec.voices { display: flex; flex-direction: column; justify-content: center; gap: 1.8rem; padding-block: var(--clear) var(--screen-b); }
  .voices .sec-lede { display: none; }                      /* the heading says it: one quote to a screen (Mercury) */
  .quote-nav button, .ex-enlarge { min-height: 44px; }     /* a thumb's target (Apple: 44 pt) */
  .last > #contact { display: block; padding-block: 0; }
  .contact-copy { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding-block: var(--clear) var(--screen-b); }
  .contact .eyebrow, .contact .expect li:nth-child(3) { display: none; }   /* the heading says "get in touch"; item 3 repeats the lede */
  .last .contact h3 { margin-top: 1.4rem; }
  .contact .phone-view { min-height: calc(100dvh - var(--foot-h)); }   /* the form and the footer share the last screen */
  .contact .inquiry { margin-top: 0; }
  .inquiry textarea { height: 7.5rem; }                     /* four lines (seven on desktop) */
  #contact + .foot { height: var(--foot-h); padding-bottom: 0; }
  .contact .phone-view { padding-bottom: .75rem; }

  /* Product and About: every screen is composed from the same origin — the header's clearance (--clear), where Home's
     "See it in action" starts — downward, as Apple's and Linear's phone pages set each screen's heading and its block
     from one fixed origin; nothing is centred, so the eye lands at the same place on every swipe. A section's own
     screens: its first is the room its marked screens leave (flex: 1 on the first group), so each marked screen starts
     exactly one screen down. The compositions are set for the room a real phone has — Safari's toolbars leave an
     iPhone 14 about 664 px, an SE 553 — so taller test viewports show air below the content, never clipped content. */
  .problem .phone-view, .solution .phone-view, .examples .phone-view, .disciplines .phone-view, .vision-copy .phone-view { justify-content: flex-start; }

  /* Product: the problem (its heading and lede / the three figures with the line they come to), the solution (its heading
     with the first capability / two more / the last three), the examples (the heading / the case whole) and the close. */
  .screen:has(.problem) { padding-top: 0; }
  .page-main > .problem { display: flex; flex-direction: column; gap: 0; min-height: 200dvh; padding-block: 0; }
  .problem .sec-intro { min-height: 100dvh; display: flex; flex-direction: column; justify-content: flex-start; padding-block: var(--clear) var(--screen-b); }
  .problem .stats { display: contents; }
  .problem .phone-view { min-height: 0; padding-bottom: 0; }   /* the figures and the closing line share the screen: the line follows in flow */
  .problem .phone-view .stat:last-child { border-bottom: 1px solid rgb(var(--ink-rgb) / .28); }   /* the rule that closed the figures */
  .problem .ctx { display: none; }                          /* phones: each figure with its one line (Stripe's stacked figures); the second sentences would not fit the screen */
  .problem .closing { margin: 1.5rem 0 0; }
  .sec.solution { justify-content: flex-start; min-height: 300dvh; padding-block: var(--clear) 0; }
  .solution > .eyebrow, .examples > .eyebrow { margin-top: 0; }
  .solution > .sec-row { margin-bottom: 1.5rem; }
  .solution .caps { display: contents; margin-top: 0; }
  .caps > .phone-view { gap: 1.6rem; }
  .caps > .phone-view:not([data-view-phone]) { flex: 1; min-height: 0; padding-block: 0 var(--screen-b); }   /* the first capability, on the heading's screen */
  .last > .sec.examples { justify-content: flex-start; min-height: 200dvh; padding-block: var(--clear) 0; }
  .examples .sec-row { grid-template-columns: 1fr; }        /* .examples .sec-row (two columns) outranked the one-column rule */
  .examples > .sec-row { padding-bottom: var(--screen-b); }
  .examples .phone-view { margin-top: auto; }               /* the case starts one screen down, whatever the heading's lines */
  .examples .phone-view .ex-tabs { margin-top: 0; }
  .ex-tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -1rem; padding: 0 1rem; gap: 0 1.6rem; scrollbar-width: none; }   /* one row that scrolls sideways, the next tab peeking (Apple's pill row) */
  .ex-tabs::-webkit-scrollbar { display: none; }
  .ex-tabs { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); }   /* the row scrolls: its right edge fades (the cue for the hidden tab) */
  .ex-tabs button { flex: none; white-space: nowrap; min-height: 44px; }   /* a thumb's target */
  .ex-case { margin-top: 1rem; }

  /* About: the intro; the mission with the first discipline / the other two; the vision's heading and two paragraphs / the
     rest, with the close and the footer beneath. */
  .page-main > .about-intro { justify-content: flex-start; padding-top: 1.5rem; }   /* from the origin (the header's room is the screen's): no centring */
  .about-mission { justify-content: flex-start; min-height: 200dvh; padding-block: var(--clear) 0; }
  .about-mission > h2 { margin: 0 0 1.5rem; }
  .disciplines { display: contents; }
  .disciplines > .phone-view { gap: 1.8rem; }
  .disciplines > .phone-view:not([data-view-phone]) { flex: 1; min-height: 0; padding-block: 0 var(--screen-b); }   /* the first discipline, on the mission's screen */
  .last > .about-vision { display: flex; flex-direction: column; justify-content: flex-start; flex: 1; gap: 0; min-height: 0; padding-block: var(--clear) 0; }
  .last:has(.about-vision) { min-height: 200dvh; --foot-cta-h: 15.5rem; }   /* the close and the footer row: fixed room at the foot of the last screen (their 248 px) */
  .about-vision .vision-copy { display: contents; }
  .about-vision > div:first-of-type { margin: 0 0 1.8rem; }
  .vision-copy > p:nth-of-type(2) { margin-bottom: auto; padding-bottom: var(--screen-b); }
  .vision-copy .phone-view { min-height: calc(100dvh - var(--foot-cta-h)); padding-bottom: 0; }
  .vision-copy .phone-view > p:last-child { margin-bottom: 0; }
  .about-vision ~ .foot { display: flex; flex-direction: column; justify-content: space-between; min-height: var(--foot-cta-h); padding-bottom: 1.2rem; }
  .about-vision ~ .foot .page-cta { padding-block: 0 1rem; }

  /* The close of Product: "Have a project in mind?" from the origin, the footer row at the foot of the screen. */
  .foot[data-view-phone] { justify-content: space-between; padding-top: var(--clear); padding-bottom: 1.2rem; }
  .foot[data-view-phone] .page-cta { padding-block: 0 1.5rem; }
}
/* Short phones (375×667 and shorter): the form closes up so that it and the footer still share one screen, and the case so
   that its longest text fits. Spacing only. */
@media (max-width: 820px) and (max-height: 760px) {
  .inquiry { padding: 1.1rem 1.4rem 1rem; gap: .75rem; }
  .inquiry label { gap: .35rem; }
  .inquiry .pair { gap: .75rem; }
  .inquiry input { padding-block: .65rem; }
  .inquiry textarea { height: 6.25rem; }                    /* three lines */
  .page-main .problem .stat { padding-block: 1rem; }       /* the three figures and the closing line still share one screen */
  .ex-case { margin-top: .75rem; }                          /* the longest case (Fire-stopping) still fits its screen */
  .ex-head { margin-bottom: .6rem; }
  .ex-cap { gap: 1rem; }
  .examples .phone-view { padding-bottom: .5rem; }         /* the case's screen gives up most of its foot: Fire-stopping's captions reach it */
}

/* ---- phones, Product and About recomposed (2026-10-12): every screen full. The rule stands: one framed screen
   per swipe on every page. Product = the problem whole (heading, lede, figures as rows, the closing line) / the solution's
   heading with two capabilities / the other four / the examples heading with the case / the close. About = the intro /
   the mission with its three disciplines / the vision whole / the close. Secondary lines are cut on phones only where a
   screen would not hold its unit: the examples lede and eyebrow, the vision eyebrow. ---- */
@media (max-width: 820px) {
  :root { --screen-b: 5rem; }                              /* foot room on every phone screen: the floating navigator's dial sits in it (48 px + 16 px + safe area) */
  .page-main > .problem { min-height: 0; }
  .problem .sec-intro { min-height: 0; padding-bottom: 0; }
  .problem .sec-intro .sec-lede { display: none; }      /* phones: the figures and the closing line carry it; the lede would push them off the screen */
  .page-main .problem .sec-intro h2, .solution > .sec-row h2, .examples > .sec-row h2, .about-mission > h2, .about-vision h2 { font-size: 1.85rem; }   /* the page headings a step down so each screen holds its unit */
  .page-main .problem .stat { grid-template-columns: 7rem 1fr; gap: 0 .9rem; padding-block: .7rem; align-items: start; }   /* figure left, its line right: the desktop row, narrowed */
  .page-main .problem .stat .fig { font-size: 1.7rem; white-space: nowrap; }
  .page-main .problem .stat p { line-height: 1.4; }
  .caps > .phone-view { gap: 1.1rem; }
  .caps > .phone-view > div, .caps .short-split > div { padding-top: .9rem; }
  .caps h3 { margin: 0 0 .35rem; }
  .caps p { margin: 0; line-height: 1.45; }
  .disciplines > .phone-view { gap: .9rem; }
  .about-mission > h2 { font-size: 1.7rem; margin-bottom: 1rem; }
  .disciplines dd { line-height: 1.45; margin: .3rem 0 0; }
  .vision-copy p { line-height: 1.45; }
  .page-main .problem .stat .fig small { margin-top: .3rem; }
  .problem .closing { margin-top: 1.25rem; }
  .sec.solution { min-height: 200dvh; }
  .caps > .phone-view:not([data-view-phone]) { padding-top: .4rem; }
  .last > .sec.examples { min-height: 100dvh; }
  .examples > .eyebrow, .examples .sec-lede { display: none; }   /* the heading says it */
  .examples > .sec-row { padding-bottom: .25rem; }
  .examples .phone-view { margin-top: 0; min-height: 0; padding-top: 0; padding-bottom: 0; }   /* it shares the heading's screen: no screen of its own */
  .examples .ex-case { margin-top: .3rem; }
  .examples > .sec-row h2 { font-size: 1.5rem; }        /* two lines at 360 px */
  .last > .sec.examples { padding-bottom: 0; }
  .examples .ex-frame { display: block; width: 100%; }
  .examples .ex-img { display: block; max-height: 118px; width: auto; max-width: 100%; margin: 0 auto; }
  .ex-tabs button { min-height: 40px; }
  .ex-head { margin-bottom: .4rem; }
  .ex-cap { gap: .7rem; margin-top: .6rem; }
  .ex-cap h4 { margin: 0 0 .15rem; }
  .ex-cap p { margin: 0; line-height: 1.4; }
  .about-mission { min-height: 100dvh; }
  .about-vision > .eyebrow, .about-vision > div:first-of-type > .eyebrow { display: none; }
  .about-vision > div:first-of-type { margin-bottom: 1.2rem; }
  .vision-copy p { margin-bottom: .85rem; }
  .vision-copy h3 { margin-top: 1.2rem; }
  /* the close: the question centred in the room above the footer row */
  .last .foot[data-view-phone] { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100dvh; padding-top: var(--clear); padding-bottom: 1.2rem; }
  .last .foot[data-view-phone] .page-cta { margin: auto 0; padding-block: 0; }
}

/* ---- short phones (iPhone with Safari's bars, about 664 px; small Androids): the floating navigator's dial needs its
   room at the foot of every screen, so the screens close up. Spacing and headings only; body type keeps its size. ---- */
@media (max-width: 820px) and (max-height: 700px) {
  :root { --screen-b: 4.5rem; }                            /* exactly the dial's room: 48 px circle, 16 px below it, 8 px above */
  .last .contact h3 { margin-top: 1rem; }
  .last .expect li { padding: .35rem 0; }
  .page-main .problem .sec-intro h2, .solution > .sec-row h2, .about-mission > h2, .about-vision h2 { font-size: 1.6rem; }
  .examples > .sec-row h2 { font-size: 1.35rem; }
  .page-main .problem .stat { padding-block: .45rem; }
  .page-main .problem .stat .fig { font-size: 1.45rem; }
  .problem .closing { margin-top: .6rem; font-size: 1.35rem; }
  #demo { padding-bottom: calc(var(--screen-b) + .5rem); }  /* the disclaimer ends clear of the dial, so the dial stays at rest */
  .solution > .sec-row { margin-bottom: .8rem; }
  .caps > .phone-view { gap: .7rem; }
  .caps > .phone-view > div, .caps .short-split > div { padding-top: .55rem; }
  .caps p, .disciplines dd, .vision-copy p { line-height: 1.38; }
  .disciplines > .phone-view { gap: .55rem; }
  .about-mission > h2 { margin-bottom: .6rem; font-size: 1.5rem; }
  .examples .ex-img { max-height: 92px; }
  .ex-tabs button { min-height: 36px; }
  .ex-cap { gap: .4rem; margin-top: .4rem; }
}

/* ---- the shortest phones (≤ 650 px tall: an iPhone SE with Safari's bars, 375×553; small Androids, 360×640). The screens above do not fit, so a
   unit that can split becomes two screens: wrappers (.short-split) that are display: contents at every other size become
   screens here, and the group they sat in gives up its screen (display: contents). Each new screen starts at the same
   origin as its siblings (--clear) and keeps the dial's foot room (--screen-b). The units that cannot split (a quote, the
   form, the examples case) close up instead: spacing, headings and the drawing only; body type keeps its size. Product's
   capabilities regroup across the markup's groups, so one is in the markup twice (.short-only here, .short-hide not);
   About's close and footer become a screen of their own, stopped by an empty marker (.foot-stop). ---- */
.short-split { display: contents; }
.short-only, .foot-stop { display: none; }
@media (max-width: 820px) and (max-height: 650px) {
  #demo .df-head .eyebrow, #demo .df-act-sub { display: none; }   /* the film's window keeps its height: the heading says it */
  .short-split { display: flex; flex-direction: column; justify-content: flex-start; min-height: 100dvh; padding-block: var(--clear) var(--screen-b); }
  .short-only { display: block; }
  .short-hide { display: none; }

  /* Home: the card rises clear of the dial; the quote closes up; Get in touch is the heading and lede / what to expect /
     the form (its name and email side by side, as on desktop) with the footer. */
  .screen main:not(.page-main) { padding-top: 0; padding-bottom: 1.5rem; }
  .sec.voices { gap: 1rem; }
  .quote-progress { margin-bottom: 1.2rem; }
  .quote figcaption { margin-top: 1rem; }
  .quote-nav { margin-top: .6rem; }
  .contact-copy { display: contents; }
  .contact .short-split > h3 { margin-top: 0; }
  .inquiry { padding: .9rem 1.2rem .9rem; gap: .6rem; }
  .inquiry .pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; }
  .inquiry label { gap: .25rem; }
  .inquiry input { padding-block: .55rem; }

  /* Product: the problem's heading and lede / the figures and the closing line; the solution's heading with the first
     capability / the next two / the last three; the examples case closes up (its labels run in, the drawing smaller). */
  .problem .sec-intro { min-height: 100dvh; padding-bottom: var(--screen-b); }
  .problem .sec-intro .sec-lede { display: block; }
  .problem .short-split .phone-view { padding-top: 0; }
  .sec.solution { min-height: 300dvh; }
  .caps > .phone-view:not([data-view-phone]) { display: contents; }
  .caps > .phone-view > .short-split { margin-top: auto; padding-top: var(--clear); border-top: 0; gap: .7rem; }
  .last > .sec.examples { row-gap: .4rem; }
  .ex-head { margin-bottom: .25rem; }
  .ex-head h3 { font-size: 1.2rem; }
  .examples .ex-img { max-height: 48px; }
  .ex-cap { gap: .3rem; margin-top: .3rem; }
  .ex-cap h4 { display: inline; margin: 0 .3em 0 0; }
  .ex-cap p { display: inline; line-height: 1.3; }

  /* About: the intro's headings a step down; the mission with its first discipline / the other two; the vision's heading
     and two paragraphs / the rest / the close with the footer, as Product's. */
  .page-main .about-intro h1, .about-intro h2 { font-size: 1.85rem; }
  .about-intro .sec-row { gap: 1.2rem; }
  .about-mission { min-height: 200dvh; }
  .about-mission > h2 { font-size: 1.85rem; margin-bottom: 1.2rem; }   /* it shares its screen with one discipline: a step up */
  .disciplines > .phone-view:not([data-view-phone]) { display: contents; }
  .disciplines > .phone-view > .short-split { margin-top: auto; padding-top: var(--clear); border-top: 0; gap: .55rem; }
  .last:has(.about-vision) { min-height: 300dvh; }
  .vision-copy .phone-view { min-height: 100dvh; padding-bottom: var(--screen-b); }
}

/* ---- tall phones (820 px and taller; and the Pro Max with Safari's bars, 430×750): the screens above leave half the wall
   empty, so the inverse of the splits. About's vision is one screen (its heading, the paragraphs and Keep Building Simple)
   and the close with the footer the last, as on the shortest phones; where a unit cannot merge (a quote, a heading's
   screen) the display type and the spacing step up so it fills its screen. Body type keeps its size. ---- */
@media (max-width: 820px) and (max-height: 650px), (max-width: 820px) and (min-height: 820px) {   /* About's close and footer: a screen of their own, as Product's */
  .foot-stop { display: block; height: 0; min-height: 0; padding: 0; }   /* a stop, not a box: [data-view-phone] would make it a screen tall */
  .about-vision ~ .foot { justify-content: flex-end; min-height: 100dvh; padding-top: var(--clear); padding-bottom: 1.2rem; }
  .about-vision ~ .foot .page-cta { margin: auto 0; padding-block: 0; }
}
@media (max-width: 820px) and (min-height: 820px) {
  .vision-copy .phone-view { display: contents; }
  .vision-copy > p:nth-of-type(2) { margin-bottom: .85rem; padding-bottom: 0; }
  .about-mission > h2 { font-size: 2.1rem; margin-bottom: 1.6rem; }   /* the mission and its disciplines step up (the Pro Max's 750 has no room for it) */
  .disciplines > .phone-view { gap: 1.4rem; }
}
@media (max-width: 820px) and (min-height: 820px), (min-width: 420px) and (max-width: 820px) and (min-height: 720px) {
  .voices h2 { font-size: 2.5rem; }                       /* Home: Industry Voices' quote, and Get in touch's heading and list */
  .quote-text { font-size: 1.7rem; }
  .sec.voices { gap: 2.8rem; }
  .contact-copy h2 { font-size: 2.5rem; }
  .last .expect li { padding: .9rem 0; }
  .last .contact h3 { margin-top: 2.2rem; }
  .solution > .sec-row h2 { font-size: 2.3rem; }           /* Product: the solution's heading and its capabilities */
  .solution > .sec-row { gap: 2.4rem; margin-bottom: 2.2rem; }
  .caps > .phone-view { gap: 2rem; }
  .caps > .phone-view:not([data-view-phone]) { padding-top: 1rem; }
  .about-intro h1 { font-size: 2.8rem; }                   /* About: the intro's statement, with the room of the screen between its two halves */
  .about-intro h2 { font-size: 2.3rem; }
  .about-intro .sec-row { gap: 13dvh; }
  .about-intro .sec-lede { margin-top: 1.4rem; }
  .about-vision h2 { font-size: 2.3rem; }
  .vision-copy p { margin-bottom: 1.2rem; }
}