/* aelvis.io. Built on the Ælvis design system (docs/design-system): the page
   sits inside the letterbox bars, on flat surfaces, in Inter. */

/* Inter, the design system's typeface (docs/design-system/brand-guide.md, Type). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin.woff2) format('woff2'); }

/* Colors, type, borders and radii come from the design system's own tokens
   (/tokens.css, copied from docs/design-system/colors_and_type.css at build).
   Only the site's layout measures are defined here. */
:root {
  --bar: clamp(56px, 8vh, 76px);
  --pad: clamp(20px, 4vw, 64px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--bar); }
body { margin: 0; background: var(--surface-0); color: var(--fg-3); font: 400 15px/1.6 var(--font-ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
figure { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; font-weight: 400; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.eyebrow { font: 600 11px/1 var(--font-ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-5); margin-bottom: 18px; }

/* buttons */
.btn { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: var(--radius-md); background: var(--accent); color: #fff; font: 600 14px/1 var(--font-ui); transition: background 150ms ease-out, border-color 150ms ease-out; border: 1px solid transparent; }
.btn:hover { background: var(--accent-hover); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.btn-ghost { background: transparent; border-color: var(--border-3); color: var(--fg-2); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.3); }
.link { font: 500 13px/1 var(--font-ui); color: var(--fg-4); transition: color 150ms ease-out; }
.link:hover { color: var(--fg-1); }
.link-quiet { font: inherit; color: inherit; text-align: left; transition: color 150ms ease-out; }
.link-quiet:hover { color: var(--fg-3); }

/* the letterbox bars */
.lb-top, .lb-bottom { height: var(--bar); background: var(--surface-0); z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad); }
.lb-top { position: sticky; top: 0; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05); }
.lb-bottom { bottom: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); font-size: 12px; color: var(--fg-5); gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 22px; height: 22px; }
.wordmark { font: 700 16px/1 var(--font-ui); letter-spacing: -0.01em; color: var(--fg-1); }
.links { display: flex; align-items: center; gap: 22px; }
.credits { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legal { flex: none; }

/* the frame between the bars */
.frame { min-height: calc(100svh - var(--bar)); background: var(--surface-1);
  display: grid; grid-template-columns: minmax(320px, 1fr) 1.5fr; align-items: center; gap: clamp(28px, 4vw, 72px); padding: clamp(20px, 4vh, 48px) var(--pad); }
.copy { max-width: 540px; }
h1 { font: 700 clamp(32px, 3.5vw, 54px)/1.05 var(--font-ui); letter-spacing: -0.035em; color: var(--fg-1); }
h1 span { color: var(--fg-5); }
.sub { margin-top: clamp(16px, 2.4vh, 24px); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55; color: var(--fg-4); max-width: 38ch; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: clamp(22px, 3.6vh, 36px); }

/* the film, at its true 16:9 size: nothing scaled or cropped */
.screen { display: flex; justify-content: center; align-items: center; min-width: 0; }
.screen-frame { position: relative; width: 100%; max-width: calc((100svh - 2 * var(--bar) - 2 * clamp(20px, 4vh, 48px)) * 16 / 9); aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06); --b: 0%; }
.screen-frame[data-target="2.39"] { --b: 12.8%; }
.screen-video { position: absolute; inset: 0; }
.screen-video iframe, .screen-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; object-fit: contain; }
/* optional letterbox overlay: (1 - 16/9 / 2.39) / 2 = 12.8% */
.lbx { position: absolute; left: 0; right: 0; height: var(--b); background: #000; z-index: 2; transition: height 500ms var(--ease-out); }
.lbx-t { top: 0; } .lbx-b { bottom: 0; }
.chrome { position: absolute; right: 12px; bottom: calc(var(--b) + 12px); z-index: 3; display: flex; gap: 8px; align-items: center; opacity: 0; transition: opacity 200ms ease-out, bottom 500ms var(--ease-out); }
.screen-frame:hover .chrome, .chrome:focus-within { opacity: 1; }
.ratios { display: flex; background: rgba(17, 24, 39, 0.88); border: 1px solid var(--border-2); border-radius: var(--radius-md); padding: 2px; }
.ratio { padding: 6px 10px; border-radius: var(--radius-sm); font: 600 11px/1 var(--font-ui); color: var(--fg-4); font-variant-numeric: tabular-nums; }
.ratio:hover { color: var(--fg-1); }
.ratio.is-on { background: var(--surface-3); color: var(--fg-1); }
.sound-toggle { width: 32px; height: 32px; display: grid; place-items: center; background: rgba(17, 24, 39, 0.88); border: 1px solid var(--border-2); border-radius: var(--radius-md); color: var(--fg-2); }
.sound-toggle:hover { color: #fff; }
.sound-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle .spk { fill: currentColor; }
.sound-toggle .on { display: none; } .sound-toggle.is-on .on { display: inline; } .sound-toggle.is-on .off { display: none; }
/* the sound control stays visible: it is the one thing a viewer needs */
.chrome .sound-toggle { opacity: 1; }
.chrome { opacity: 0.85; }


/* one statement */
.statement { background: var(--surface-0); padding: clamp(90px, 12vw, 170px) var(--pad); }
.statement p { max-width: 980px; margin: 0 auto; font: 700 clamp(26px, 3.4vw, 48px)/1.15 var(--font-ui); letter-spacing: -0.03em; color: var(--fg-1); text-wrap: balance; }
.statement span { color: var(--fg-5); }

/* founders, side by side as equals */
.founders-sec { background: var(--surface-1); padding: clamp(80px, 10vw, 140px) max(var(--pad), calc((100% - 1100px) / 2)); }
.founders { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.founder { display: grid; grid-template-columns: 84px 1fr; gap: 18px; align-items: start; text-align: left; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius-lg); padding: 18px; transition: border-color 150ms ease-out; }
.founder.reveal { opacity: 1; }
.founder:hover { border-color: var(--border-3); }
.founder-photo { width: 84px; aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.founder h3 { font: 700 19px/1.15 var(--font-ui); color: var(--fg-1); }
.founder .role { font: 600 10.5px/1.4 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-4); margin-top: 6px; }
.founder .craft-line { font-size: 13px; color: var(--fg-4); margin-top: 4px; }
.founder .teaser { font-size: 13px; color: var(--fg-4); margin-top: 10px; }
.founder .more { display: inline-block; margin-top: 10px; font: 600 12px/1 var(--font-ui); color: var(--accent-glow); }
.billing { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border-1); font: 600 10.5px/2 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-5); text-align: center; text-wrap: balance; }

/* inquiries */
.inquiries { background: var(--surface-1); padding: clamp(100px, 13vw, 180px) var(--pad); text-align: center; }
.inquiries .eyebrow { margin-bottom: 18px; }
.inquiries h2 { font: 700 clamp(36px, 5vw, 68px)/1.02 var(--font-ui); letter-spacing: -0.035em; color: var(--fg-1); }
.inq-text { margin: 18px auto 30px; max-width: 46ch; color: var(--fg-4); font-size: 16px; }
.inq-fine { margin-top: 22px; font-size: 13px; color: var(--fg-5); }
.inq-fine a { color: var(--fg-3); border-bottom: 1px solid var(--border-3); }

/* founder bio */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.66); }
.modal-card { position: relative; width: min(640px, 100%); max-height: 86vh; overflow: auto; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius-xl); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); padding: clamp(22px, 4vw, 38px); }
.modal-x { position: absolute; top: 10px; right: 16px; font-size: 26px; color: var(--fg-4); }
.modal-x:hover { color: var(--fg-1); }
.modal-head { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border-1); }
.modal-head img { width: 56px; height: 70px; border-radius: var(--radius-md); object-fit: cover; filter: grayscale(1); }
.modal-head h3 { font: 700 21px/1.15 var(--font-ui); color: var(--fg-1); }
.modal-head p { font: 600 11px/1.4 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-4); margin-top: 6px; }
.modal-body p { color: var(--fg-3); font-size: 14px; line-height: 1.7; }
.modal-body p + p { margin-top: 12px; }

:focus { outline: none; } :focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.45); border-radius: var(--radius-md); }

.tag { margin-top: clamp(16px, 2.4vh, 22px); font: 600 clamp(15px, 1.2vw, 18px)/1.3 var(--font-ui); color: var(--fg-2); letter-spacing: -0.01em; }
.tag + .sub { margin-top: 10px; }
.brand { gap: 12px; }
.brand img { width: 34px; height: 34px; }
.wordmark { font-size: 21px; }
.links { gap: 24px; }

/* tablets and phones: film first */
@media (max-width: 900px) {
  .frame { display: flex; flex-direction: column; align-items: stretch; gap: 28px; padding: 24px 20px 48px; min-height: 0; }
  .screen { order: -1; }
  .screen-frame { max-width: 100%; }
  .copy { max-width: none; }
  .links .link { display: none; }
  .chrome { opacity: 1; }
  .lb-bottom { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; height: auto; padding-top: 18px; padding-bottom: 18px; }
  .credits { white-space: normal; }
}
@media (max-width: 760px) {
  .founders { gap: 12px; }
  .founder { grid-template-columns: 1fr; gap: 12px; }
  .founder-photo { width: 72px; }
}
@media (max-width: 420px) {
  .founders { gap: 8px; }
  .founder { padding: 14px; }
  .founder .teaser { display: none; }
  .founder .role { font-size: 10px; letter-spacing: 0.08em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* v5: separate pages. The footer sits at the bottom of short pages. */
body { min-height: 100svh; display: flex; flex-direction: column; }
#main { flex: 1; display: flex; flex-direction: column; }
#main > :last-child { flex: 1; }
.links .link[aria-current="page"] { color: var(--fg-1); }

/* home: one screen between the two bars */
.home .frame { min-height: calc(100svh - 2 * var(--bar)); }

/* inner pages */
.page-head { background: var(--surface-1); padding: clamp(56px, 8vw, 110px) var(--pad) clamp(32px, 4vw, 56px); flex: none !important; }
.page-head h1 { font: 700 clamp(34px, 4.4vw, 62px)/1.03 var(--font-ui); letter-spacing: -0.035em; color: var(--fg-1); }
.page-sub { margin-top: 12px; font: 600 11px/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-5); }
.page-head h1:last-child { margin-bottom: 23px; } /* room for the page-sub line, so every page head is the same height */
@media (max-width: 423px) { .page-head h1:last-child { margin-bottom: 34px; } } /* the Frames sub wraps to two lines on phones */
.founders-sec { padding-top: clamp(40px, 5vw, 64px); }
.inquiries h1 { font: 700 clamp(36px, 5vw, 68px)/1.02 var(--font-ui); letter-spacing: -0.035em; color: var(--fg-1); }
.inquiries { display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* the work: each canon frame shown whole, at its own aspect, never cropped or retouched */
.gallery { background: #000; padding: 6px; display: grid; gap: 6px; flex: none !important; }
.still { margin: 0; background: #000; }
.still img { width: 100%; height: auto; }
.gallery-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-items: start; }

@media (max-width: 760px) {
  .gallery-row { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .home .frame { min-height: 0; }
}
/* separate pages: every link stays reachable on a phone */
@media (max-width: 900px) {
  .links .link { display: inline; }
  .links { gap: 16px; }
}
@media (max-width: 400px) {
  .links { gap: 12px; }
  .brand { gap: 8px; }
  .btn-sm { padding: 0 10px; }
}

/* v5 home: a page that scrolls, the film at full width */
.home .h-title { background: var(--surface-1); padding: clamp(56px, 8vw, 112px) var(--pad) clamp(28px, 3vw, 44px); }
.home .h-title h1 { font-size: clamp(38px, 5.6vw, 84px); line-height: 1.02; }
.home .h-title .tag { font-size: clamp(16px, 1.5vw, 22px); margin-top: clamp(14px, 2vw, 24px); }
.home .h-film { background: var(--surface-1); padding: 0 var(--pad) clamp(56px, 7vw, 100px); }
.home .h-film .screen { display: block; }
.home .h-film .screen-frame { max-width: min(100%, calc((100svh - 2 * var(--bar)) * 16 / 9)); margin: 0 auto 0 0; }
.home .h-intro { background: var(--surface-0); padding: clamp(80px, 11vw, 150px) var(--pad); }
.h-lede { max-width: 22ch; font: 700 clamp(28px, 3.6vw, 52px)/1.1 var(--font-ui); letter-spacing: -0.03em; color: var(--fg-1); }
.h-body { max-width: 52ch; margin-top: 24px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--fg-4); }
.home .h-work { background: #000; padding: 6px; }
.h-work-link { display: block; }
.h-work-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; padding: 22px var(--pad) 26px; }
.h-work-cap .eyebrow { margin: 0; }
.h-work-title { font: 700 clamp(20px, 2vw, 28px)/1.15 var(--font-ui); letter-spacing: -0.02em; color: var(--fg-1); }
.h-more { font: 600 13px/1 var(--font-ui); color: var(--accent-glow); }
.h-more::after { content: ' →'; }
.h-work-link:hover .h-more, .h-card:hover .h-more { color: #93c5fd; }
.home .h-pair { background: var(--surface-1); padding: clamp(64px, 8vw, 120px) var(--pad); display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.h-card { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 40px); background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius-lg); transition: border-color 150ms ease-out; }
.h-card:hover { border-color: var(--border-3); }
.h-card .eyebrow { margin: 0; }
.h-card-title { font: 700 clamp(26px, 2.8vw, 40px)/1.05 var(--font-ui); letter-spacing: -0.03em; color: var(--fg-1); }
.h-card-text { color: var(--fg-4); font-size: 15px; max-width: 40ch; }
.h-card .h-more { margin-top: auto; padding-top: 8px; }
@media (max-width: 760px) {
  .home .h-pair { grid-template-columns: 1fr; }
}

/* CINE frames are never full-screen: a contained size, inside the page margins */
.still img { border-radius: var(--radius-md); }
.gallery { background: var(--surface-0); padding: clamp(40px, 5vw, 72px) var(--pad); grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 22px); max-width: calc(1160px + 2 * var(--pad)); width: 100%; margin: 0 auto; }
.inner #main { background: var(--surface-0); }
.home .h-work { background: var(--surface-1); padding: clamp(64px, 8vw, 110px) var(--pad); display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.h-work-text .eyebrow { margin-bottom: 14px; }
.h-work-text .h-more { display: inline-block; margin-top: 22px; }
.h-work-frames { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.2vw, 16px); max-width: 760px; width: 100%; }
@media (max-width: 760px) {
  .gallery { grid-template-columns: 1fr; }
  .home .h-work { grid-template-columns: 1fr; }
}

/* home: the film opens the page; the title follows in its own centered section */
.home .h-film { padding: clamp(28px, 4vw, 56px) var(--pad); }
.home .h-film .screen-frame { margin: 0 auto; }
.home .h-title { background: var(--surface-0); text-align: center; padding: clamp(80px, 10vw, 140px) var(--pad); }
.home .h-intro { background: var(--surface-1); }
.home .h-work { background: var(--surface-0); }

/* The film plays at its native size: 960 CSS px is 1920 device pixels on a
   high-density screen, so a 1080p film is shown 1:1 and never enlarged.
   Narrower screens shrink it to the page margins. */
.home .h-film { padding: clamp(48px, 7vw, 96px) var(--pad); }
.home .h-film .screen-frame { width: 100%; max-width: 960px; margin: 0 auto; }

/* Light sections between the dark ones (flat, no texture). The paper class
   remaps the text tokens to the design system's grays. */
.paper .btn-ghost:hover { background: rgba(17, 24, 39, 0.04); }
.paper .h-more:hover, .paper .h-work-link:hover .h-more { color: #1e40af; }
.home .h-film { background: var(--surface-1); }
.paper.gallery { max-width: none; padding-left: max(var(--pad), calc((100% - 1160px) / 2)); padding-right: max(var(--pad), calc((100% - 1160px) / 2)); }
.paper { position: relative; z-index: 1; }

/* footer: legal links beside the copyright */
.lb-bottom .legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.lb-bottom .legal a { color: var(--fg-4); transition: color 150ms ease-out; }
.lb-bottom .legal a:hover { color: var(--fg-1); }

/* legal documents: the app's text, set for reading */
.legal-doc { padding: clamp(48px, 6vw, 88px) var(--pad); }
.legal-doc article { max-width: 720px; margin: 0 auto; color: var(--fg-3); font-size: 16px; line-height: 1.7; }
.legal-doc h2 { font: 700 21px/1.25 var(--font-ui); letter-spacing: -0.01em; color: var(--fg-1); margin: 44px 0 12px; }
.legal-doc h3 { font: 700 16px/1.3 var(--font-ui); color: var(--fg-1); margin: 28px 0 8px; }
.legal-doc p { margin: 12px 0; }
.legal-doc ul { margin: 12px 0; padding-left: 22px; }
.legal-doc li { margin: 6px 0; }
.legal-doc strong { font-weight: 600; color: var(--fg-1); }
.legal-doc hr { border: 0; border-top: 1px solid var(--border-2); margin: 32px 0; }
.legal-doc blockquote { margin: 16px 0; padding: 4px 0 4px 16px; border-left: 2px solid var(--border-3); color: var(--fg-4); }
.legal-doc article > p:first-child, .legal-doc article > p:nth-child(2), .legal-doc article > p:nth-child(3) { margin: 2px 0; font-size: 14px; color: var(--fg-5); }

/* Work: environments and characters, each frame whole and uncropped */
.work-sec { padding: clamp(48px, 6vw, 88px) var(--pad); }
.work-inner { max-width: 1160px; margin: 0 auto; }
.work-inner .eyebrow { margin: 0 0 16px; }
.work-inner .eyebrow:not(:first-child) { margin-top: clamp(40px, 5vw, 64px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 18px); }
/* one row at one height; each frame keeps its own width from its aspect */
.row-fixed { display: flex; gap: clamp(10px, 1.4vw, 18px); height: clamp(260px, 30vw, 380px); }
.row-fixed .still { height: 100%; flex: none; }
.row-fixed .still img { height: 100%; width: auto; }
@media (max-width: 760px) {
  .grid-3 { grid-template-columns: 1fr; }
  .row-fixed { height: auto; flex-wrap: wrap; }
  .row-fixed .still { height: auto; flex: 1 1 40%; }
  .row-fixed .still:last-child { flex-basis: 100%; }
  .row-fixed .still img { width: 100%; height: auto; }
}
@media (max-width: 980px) {
  .row-fixed { height: auto; flex-wrap: wrap; }
  .row-fixed .still { height: auto; flex: 1 1 40%; }
  .row-fixed .still:last-child { flex-basis: 100%; }
  .row-fixed .still img { width: 100%; height: auto; }
}

/* client mark, in its own colors, only on off-white */
.client { display: flex; align-items: center; gap: 16px; padding-bottom: clamp(28px, 4vw, 44px); margin-bottom: clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--border-1); }
.client .eyebrow { margin: 0 !important; }
.client img { height: clamp(36px, 4vw, 48px); width: auto; }
.client-logo { display: block; height: 32px; width: auto; margin-top: 18px; }
.work-inner .client + .eyebrow { margin-top: 0 !important; }

/* no backing behind a frame: the rounded corner shows the page, never black */
.still { background: transparent !important; border-radius: var(--radius-md); overflow: hidden; }

/* set models: the clay previs plays as rendered, muted and looping */
.grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(10px, 1.4vw, 18px); align-items: start; }
.clip { margin: 0; border-radius: var(--radius-md); overflow: hidden; background: transparent; }
.clip video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.work-note { margin: -4px 0 18px; font-size: 15px; color: var(--fg-4); max-width: 60ch; }
.grid-3 + .grid-3, .row-fixed + .grid-3 { margin-top: clamp(10px, 1.4vw, 18px); }
@media (max-width: 760px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* the official glyph, inline SVG in currentColor */
.brand .mark { width: 34px; height: 34px; color: var(--fg-1); flex: none; }

/* light sections use the design system's cool grays (no warm greys) */
.paper {
  --fg-1: #111827; --fg-2: #1f2937; --fg-3: #374151; --fg-4: #4b5563; --fg-5: #6b7280;
  --border-1: rgba(17, 24, 39, 0.08); --border-2: rgba(17, 24, 39, 0.12); --border-3: rgba(17, 24, 39, 0.24);
  --accent-glow: #1d4ed8;
  background: #f3f4f6 !important;
}
.paper .h-card, .paper .founder { background: #e5e7eb; }

/* Reveal hero: the film is pinned to the screen and the section is a window
   onto it, so the frame moves over the film as the page scrolls. clip-path
   clips the fixed video to the section, with no script. */
.film-reveal { position: relative; height: 78svh; clip-path: inset(0); background: #000; }
.reveal-video video { position: fixed; top: var(--bar); left: 0; width: 100%; height: calc(100svh - var(--bar)); object-fit: cover; }
.film-reveal .sound-toggle { position: absolute; right: var(--pad); bottom: 24px; z-index: 2; }
/* Glyph_07's printing specks take the color of the bar the mark sits on */
.brand .mark .knock { fill: #000; }
.clip-wide { max-width: 960px; }

/* Reveal with the YouTube film: the whole 16:9 frame is pinned behind the
   window, as wide as the screen allows without cropping; any extra space is
   black, like the letterbox bars. */
.film-reveal .reveal-video { position: fixed; top: var(--bar); left: 0; right: 0; height: calc(100svh - var(--bar)); display: grid; place-items: center; background: #000; }
.film-reveal .reveal-video iframe { width: min(100%, calc((100svh - var(--bar)) * 16 / 9)); aspect-ratio: 16 / 9; height: auto; border: 0; pointer-events: none; }
/* phones and tablets: the window is exactly the film's 16:9 height, so no black bands */
@media (max-width: 900px) {
  .film-reveal { height: calc(100vw * 9 / 16); }
  .film-reveal .reveal-video { height: calc(100vw * 9 / 16); }
}

/* Institutional, not SaaS: neutral outlined buttons, plain links, ruled lists. */
.btn { background: transparent; color: var(--fg-1); border: 1px solid var(--fg-1); border-radius: var(--radius-sm); font-weight: 600; letter-spacing: 0.01em; }
.btn:hover { background: var(--fg-1); color: var(--surface-1); }
.paper .btn:hover { color: #f3f4f6; }
.h-more::after { content: none; }
.h-more { color: var(--fg-1); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.h-more:hover { text-decoration-thickness: 2px; }
.paper .h-more:hover { color: var(--fg-1); }

/* System: the production, stage by stage */
.home .h-system { background: var(--surface-1); padding: clamp(80px, 10vw, 140px) var(--pad); }
.h-system-title { max-width: 22ch; font: 700 clamp(28px, 3.4vw, 48px)/1.1 var(--font-ui); letter-spacing: -0.03em; color: var(--fg-1); text-wrap: balance; }
.stages { margin: clamp(36px, 5vw, 56px) 0 0; display: grid; }
.stages > div { display: grid; grid-template-columns: minmax(160px, 1fr) 2fr; gap: 24px; padding: 20px 0; border-top: 1px solid var(--border-2); }
.stages > div:last-child { border-bottom: 1px solid var(--border-2); }
.stages dt { font: 600 15px/1.4 var(--font-ui); color: var(--fg-1); }
.stages dd { margin: 0; font-size: 16px; line-height: 1.55; color: var(--fg-4); max-width: 52ch; }
.h-system-note { margin-top: 28px; font-size: 16px; color: var(--fg-3); max-width: 60ch; }

/* Founders and inquiries as a ruled index, not hover cards */
.home .h-index { padding: clamp(64px, 8vw, 110px) var(--pad); display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 64px); }
.h-row { display: flex; flex-direction: column; gap: 10px; padding: 28px 0; border-top: 1px solid var(--border-3); }
.h-row .eyebrow { margin: 0; }
.h-row-title { font: 700 clamp(24px, 2.4vw, 34px)/1.1 var(--font-ui); letter-spacing: -0.025em; color: var(--fg-1); }
.h-row-text { color: var(--fg-4); font-size: 15px; max-width: 42ch; }
.h-row:hover .h-row-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 760px) {
  .stages > div { grid-template-columns: 1fr; gap: 6px; }
  .home .h-index { grid-template-columns: 1fr; }
}

/* Full-width splash, as on aaronhaye.com: the film always spans the width,
   edge to edge, and fills the screen below the bar (it crops slightly at the
   top and bottom rather than leaving bands at the sides). */
.film-reveal { height: calc(100svh - var(--bar)); }
.film-reveal .reveal-video { display: block; overflow: hidden; }
.film-reveal .reveal-video iframe { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100vw, calc((100svh - var(--bar)) * 16 / 9)); height: max(calc(100svh - var(--bar)), calc(100vw * 9 / 16)); aspect-ratio: auto; }
@media (max-width: 900px) {
  .film-reveal, .film-reveal .reveal-video { height: calc(100vw * 9 / 16); }
  .film-reveal .reveal-video iframe { width: 100vw; height: calc(100vw * 9 / 16); }
}
/* the hosted film fills the same full-width window */
.film-reveal .reveal-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* CinemaScope splash (2.39:1), as on aaronhaye.com: the film fills the width
   and the title section below shows on the first screen. Never taller than
   the screen minus room for that section. */
.film-reveal, .film-reveal .reveal-video { height: min(calc(100vw / 2.39), calc(100svh - var(--bar) - 180px)); }
@media (max-width: 900px) {
  .film-reveal, .film-reveal .reveal-video { height: calc(100vw * 9 / 16); }
}
.film-reveal, .film-reveal .reveal-video { height: min(calc(100vw / 2.39), calc(100svh - var(--bar) - 270px)); }
.home .h-title { padding-top: clamp(36px, 4.5vw, 64px); }
@media (max-width: 900px) {
  .film-reveal, .film-reveal .reveal-video { height: calc(100vw * 9 / 16); }
}

/* Splash at exactly 2.39:1 (CinemaScope). The crop sits slightly below
   center so faces and the film's title cards both stay in frame. */
.film-reveal, .film-reveal .reveal-video { height: min(calc(100vw / 2.39), calc(100svh - var(--bar) - 200px)); }
.film-reveal .reveal-video video { object-position: 50% 55%; }
.home .h-title h1 { font-size: clamp(36px, 4.6vw, 76px); }
@media (max-width: 900px) {
  .film-reveal, .film-reveal .reveal-video { height: calc(100vw * 9 / 16); }
}
/* index rows: no underline on hover, just a quiet shift in the text */
.h-row:hover .h-row-title { text-decoration: none; }
.h-row .h-row-text { transition: color 150ms ease-out; }
.h-row:hover .h-row-text { color: var(--fg-2); }
/* links inside founder bios */
.modal-body a { color: var(--fg-1); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.modal-body a:hover { text-decoration-thickness: 2px; }

/* links without underlines: set apart by a brighter, slightly heavier weight */
.modal-body a, .modal-body a:hover { text-decoration: none; color: var(--fg-1); font-weight: 600; }
.modal-body a:hover { color: #fff; }
.h-more, .h-more:hover { text-decoration: none; font-weight: 600; }
.h-more:hover { opacity: 0.75; }
.inq-fine a { border-bottom: 0; color: var(--fg-1); font-weight: 600; }

/* Frames: every tile the same size; drawings sit on white with a small caption */
.grid-2-even { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vw, 18px); }
.grid-2-even > figure { margin: 0; }
.grid-2-even figcaption { margin-top: 8px; font: 600 11px/1.3 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-5); }
.grid-2-even .clip video { aspect-ratio: 16 / 10; object-fit: cover; }
.still.drawing { background: #fff !important; border: 1px solid var(--border-2); }
.still.drawing img { aspect-ratio: 16 / 10; object-fit: contain; background: #fff; }
.still.drawing { overflow: visible; border: 0; }
.still.drawing img { border: 1px solid var(--border-2); border-radius: var(--radius-md); }
@media (max-width: 760px) { .grid-2-even { grid-template-columns: 1fr; } }
.grid-3.drawings { margin-top: clamp(10px, 1.4vw, 18px); }
.grid-3.drawings figcaption { margin-top: 8px; font: 600 11px/1.3 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-5); }
.grid-2-even .clip video { aspect-ratio: 16 / 9; }

/* Drawing captions sit on the sheet's white strip: inset them from its edge */
.grid-3.drawings figcaption { padding: 2px 14px 10px; }

/* Join the list (Inquiries) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.join { margin-top: 44px; width: 100%; max-width: 560px; }
.join-title { font-size: 14px; color: var(--fg-3); }
.join-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; justify-content: center; }
.join-row input, .join-row select { height: 42px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-3); background: transparent; color: var(--fg-1); font: 400 14px/1 var(--font-ui); }
.join-row input { flex: 1 1 220px; min-width: 0; }
.join-row select { flex: 0 1 190px; color: var(--fg-3); }
.join-row select option { color: #111827; }
.join-row input::placeholder { color: var(--fg-5); }
.join-row input:focus, .join-row select:focus { outline: none; border-color: var(--fg-3); }
.join-row .btn { flex: 0 0 auto; cursor: pointer; }
.join-row .btn:disabled { opacity: 0.5; cursor: default; }
.join-note { margin-top: 12px; font-size: 12px; color: var(--fg-5); }
.join-note a { color: var(--fg-3); margin-left: 4px; }
.join-status { min-height: 1.4em; margin-top: 10px; font-size: 13px; color: var(--fg-2); }
.join.is-done .join-row, .join.is-done .join-note { display: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Make an inquiry (Inquiries) */
.inq-form { width: 100%; max-width: 640px; margin-top: 8px; text-align: left; }
.inq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.inq-grid .wide { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span { font: 600 11px/1.3 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-4); }
.field > span em { font-style: normal; font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: var(--fg-5); margin-left: 6px; }
.field input, .field select, .field textarea { width: 100%; box-sizing: border-box; padding: 0 12px; height: 42px; border-radius: var(--radius-sm); border: 1px solid var(--border-3); background: transparent; color: var(--fg-1); font: 400 15px/1.4 var(--font-ui); }
.field textarea { height: auto; padding: 10px 12px; resize: vertical; min-height: 120px; }
.field select { color: var(--fg-2); }
.field select option { color: #111827; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--fg-3); }
.check { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 14px; color: var(--fg-3); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--fg-1); }
.inq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.inq-actions .btn { cursor: pointer; }
.inq-actions .btn:disabled { opacity: 0.5; cursor: default; }
.inq-alt { font-size: 13px; color: var(--fg-5); }
.inq-alt a { color: var(--fg-2); }
.inq-form .join-status { text-align: left; }
.inq-form.is-done .inq-grid, .inq-form.is-done .check, .inq-form.is-done .inq-actions { display: none; }
.inquiries .join { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--border-2); }
@media (max-width: 600px) { .inq-grid { grid-template-columns: 1fr; } }

/* Inquiries: the small label is the page heading (no large title) */
.inquiries h1.eyebrow { font: 600 11px/1 var(--font-ui); letter-spacing: 0.2em; color: var(--fg-5); margin: 0 0 18px; }
.inq-form.is-done .join-status { text-align: center; font-size: 15px; margin-top: 24px; }
/* the form sits closer to the top bar (the 404 page shares .inquiries and keeps its padding) */
.inquiries:has(#inquiryForm) { padding-top: clamp(44px, 5vw, 72px); padding-bottom: clamp(72px, 8vw, 120px); justify-content: flex-start; }

/* Inquiries, design-system layout: a dark band with the notes beside a raised
   form panel (surface-2, hairline border, 8px radius; fields are surface-1
   wells, 6px radius, blue focus ring), then the list on a paper band. */
.inq-page { background: var(--surface-1); padding: clamp(44px, 6vw, 88px) var(--pad) clamp(56px, 7vw, 104px); }
.inq-wrap { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.inq-side { padding-top: 6px; }
.inq-side .eyebrow { margin: 0 0 18px; }
.inq-lede { font: 600 clamp(22px, 2.2vw, 30px)/1.25 var(--font-ui); letter-spacing: -0.02em; color: var(--fg-1); text-wrap: balance; max-width: 22ch; }
.inq-notes { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; max-width: 40ch; }
.inq-notes li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--fg-4); }
.inq-notes li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 1px; background: var(--fg-5); }
.inq-notes a { color: var(--fg-2); }
.inq-panel { max-width: none; margin: 0; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 36px); box-shadow: var(--shadow-md); }
.inq-panel .field > span { font: 700 10px/1.3 var(--font-ui); letter-spacing: 0.08em; color: var(--fg-4); }
.inq-panel .field input, .inq-panel .field select, .inq-panel .field textarea { background: var(--surface-1); border: 1px solid var(--border-2); border-radius: var(--radius-md); transition: border-color 120ms, box-shadow 120ms; }
.inq-panel .field input:hover, .inq-panel .field select:hover, .inq-panel .field textarea:hover { border-color: var(--border-3); }
.inq-panel .field input:focus, .inq-panel .field select:focus, .inq-panel .field textarea:focus { border-color: #3b82f6; box-shadow: var(--shadow-glow); }
.inq-panel .check input { accent-color: #3b82f6; }
.inq-panel .inq-actions { margin-top: 22px; }
.inq-panel.is-done { padding-block: clamp(40px, 6vw, 72px); }
.inq-panel.is-done .join-status { margin-top: 0; }
/* the list, on paper */
.inq-list { padding: clamp(56px, 7vw, 96px) var(--pad); text-align: center; }
.inq-list .join { margin: 0 auto; padding: 0; border: 0; }
.inq-list .join-title { font: 600 clamp(18px, 1.6vw, 22px)/1.3 var(--font-ui); letter-spacing: -0.01em; color: var(--fg-1); }
.inq-list .join-row input, .inq-list .join-row select { background: #fff; border-color: var(--border-2); border-radius: var(--radius-md); }
.inq-list .join-row input:focus, .inq-list .join-row select:focus { border-color: #3b82f6; box-shadow: var(--shadow-glow); }
.inq-list .join-note a { color: var(--fg-2); }
@media (max-width: 860px) {
  .inq-wrap { grid-template-columns: 1fr; }
  .inq-lede { max-width: none; }
}


.h-body + .h-body { margin-top: 12px; }

/* System as a left-to-right flow: five numbered stages on one rule (desktop),
   two columns on tablets, a numbered list on phones. */
.stages { counter-reset: stage; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 clamp(20px, 2.4vw, 36px); }
.stages > div { counter-increment: stage; display: block; padding: 22px 0 0; border-top: 1px solid var(--border-3); border-bottom: 0 !important; }
.stages > div::before { content: counter(stage, decimal-leading-zero); display: block; margin-bottom: 14px; font: 600 11px/1 var(--font-ui); letter-spacing: 0.16em; color: var(--fg-5); }
.stages dt { font: 600 clamp(18px, 1.5vw, 21px)/1.25 var(--font-ui); letter-spacing: -0.01em; color: var(--fg-1); }
.stages dd { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--fg-4); max-width: 30ch; }
.h-system-note { margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--border-2); font: 600 clamp(19px, 1.7vw, 24px)/1.35 var(--font-ui); letter-spacing: -0.015em; color: var(--fg-1); max-width: none; }
@media (max-width: 1280px) { .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 28px; } }
@media (max-width: 1000px) { .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; } }
@media (max-width: 600px) {
  .stages { grid-template-columns: 1fr; gap: 0; }
  .stages > div { display: grid; grid-template-columns: 36px 1fr; padding: 18px 0; }
  .stages > div::before { grid-row: 1 / 3; margin: 4px 0 0; }
  .stages dd { margin-top: 6px; max-width: none; }
}

/* The title under the film is on paper again (gray-200, darker than the old
   gray-100 so it competes less with the film). */
.home .h-title { padding-bottom: clamp(40px, 5vw, 72px); }

/* Paper sections one step darker (gray-200 instead of gray-100), cards on them
   one step lighter (gray-100) so they still read as raised. */
.paper { background: #e5e7eb !important; }
.paper .h-card, .paper .founder { background: #f3f4f6 !important; }
.inq-list .join-row input, .inq-list .join-row select { background: #f9fafb; }

/* Paper one more step down (gray-300) so the light bands glare less; cards on
   it are gray-200, and the faint text tones darken one step to stay readable. */
.paper { background: #d1d5db !important; --fg-5: #4b5563; --fg-4: #374151; }
.paper .h-card, .paper .founder { background: #e5e7eb !important; }
.inq-list .join-row input, .inq-list .join-row select { background: #f3f4f6; }

/* Founder photos: the box is exactly 4:5 whatever the image's own shape, so both
   cards' text starts on the same line (an image's intrinsic height could grow
   its box and push that card's text down). */
.founder-photo { position: relative; min-height: 0; }
.founder-photo img { position: absolute; inset: 0; display: block; }
/* Cards in a row share one height; keep each card's content at the top instead
   of spreading the spare height into its rows (that pushed the shorter card's
   text down on phones). */
.founder { align-content: start; }

/* Inquiries (layout C): the same dark page head as Founders and Frames, then the
   form on the paper ground, with a short intro beside it. */
.inq-sec { padding: clamp(48px, 6vw, 88px) var(--pad) clamp(72px, 8vw, 112px); }
.inq-sec .inq-wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); }
.inq-sec .inq-side { display: grid; gap: 20px; max-width: 400px; padding-top: 2px; }
.inq-sec .inq-lede { font: 600 clamp(20px, 1.9vw, 24px)/1.3 var(--font-ui); letter-spacing: -0.02em; color: var(--fg-1); max-width: none; }
.inq-note { font-size: 14px; line-height: 1.6; color: var(--fg-3); }
.inq-note a { color: var(--fg-1); font-weight: 600; border-bottom: 1px solid var(--fg-5); }
.inq-note a:hover { border-bottom-color: var(--fg-1); }
.inq-sec .inq-form { max-width: none; margin: 0; }
.inq-sec .inq-grid { gap: 20px 24px; }
.inq-sec .field { gap: 8px; }
.inq-sec .field > span { font: 700 11px/1.3 var(--font-ui); letter-spacing: 0.08em; color: var(--fg-3); }
.inq-sec .field input, .inq-sec .field select, .inq-sec .field textarea { height: 48px; padding: 0 14px; background: #f3f4f6; border: 1px solid #9ca3af; border-radius: var(--radius-md); color: var(--fg-1); font-size: 16px; transition: border-color 120ms, box-shadow 120ms; }
.inq-sec .field textarea { height: auto; padding: 12px 14px; }
.inq-sec .field select { color: var(--fg-1); }
.inq-sec .field ::placeholder { color: #6b7280; }
.inq-sec .field input:hover, .inq-sec .field select:hover, .inq-sec .field textarea:hover { border-color: #6b7280; }
.inq-sec .field input:focus, .inq-sec .field select:focus, .inq-sec .field textarea:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18); }
.inq-sec .inq-actions { justify-content: flex-end; margin-top: 24px; }
/* the site's one brand-blue action (design guide: primary actions are blue-600, darkening on hover) */
.inq-sec .btn { height: 48px; padding: 0 28px; background: var(--accent); border-color: var(--accent); color: #fff; }
.inq-sec .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.inq-sec .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.30); }
.inq-sec .join-status { color: var(--fg-2); }
@media (max-width: 900px) { .inq-sec .inq-wrap { grid-template-columns: 1fr; } .inq-sec .inq-side { max-width: none; } }
@media (max-width: 600px) { .inq-sec .inq-actions .btn { width: 100%; justify-content: center; } }

/* Frames: each project opens with its own title and counts, ruled off like the
   client mark, so the page head stays general as more projects are added. */
.project { padding-bottom: clamp(24px, 3vw, 36px); margin-bottom: clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--border-2); }
.project-title { font: 700 clamp(26px, 2.6vw, 36px)/1.1 var(--font-ui); letter-spacing: -0.025em; color: var(--fg-1); text-wrap: balance; }
.work-inner .project + .eyebrow { margin-top: 0 !important; }

/* About: questions and answers, ruled like the founders' bios */
.faq-sec { padding: clamp(48px, 6vw, 88px) var(--pad) clamp(72px, 8vw, 112px); }
.faq { max-width: 1160px; margin: 0 auto; border-top: 1px solid var(--border-2); }
.faq > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 12px clamp(32px, 6vw, 96px); padding: clamp(22px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--border-2); }
.faq dt { font: 600 clamp(17px, 1.5vw, 20px)/1.35 var(--font-ui); letter-spacing: -0.015em; color: var(--fg-1); text-wrap: balance; }
.faq dd { margin: 0; font-size: 15px; line-height: 1.65; color: var(--fg-3); max-width: 64ch; }
@media (max-width: 760px) { .faq > div { grid-template-columns: 1fr; } }
/* four menu links on a small phone: a slightly smaller mark and links keep the gutter */
@media (max-width: 400px) {
  .brand .mark { width: 28px; height: 28px; }
  .wordmark { font-size: 18px; }
  .links { gap: 12px; }
  .links .link { font-size: 12.5px; }
}

/* Founder cards line up: both cards share one set of rows (CSS subgrid), so
   the photo, name, title and "Read more" sit at the same height in both at
   every width. The credit line and teaser flow together in one row, so a
   shorter line in one card leaves no gap above its teaser. */
.founders { row-gap: 0; }
.founder { grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: normal; }
.founder-photo { grid-column: 1; grid-row: 1 / -1; align-self: start; }
.founder-text { grid-column: 2; grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; align-content: normal; }
.founder-text > * { align-self: start; justify-self: start; }
@media (max-width: 760px) {
  .founder-photo { grid-column: 1; grid-row: 1; margin-bottom: 12px; }
  .founder-text { grid-column: 1; grid-row: 2 / -1; }
}
/* page heads: a shorter band, so the page's content starts sooner */
.page-head { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(24px, 3vw, 40px); }
/* "Read more" sits at the foot of its row, level in both cards */
.founder-text > .more { align-self: end; }
.faq dd a { color: var(--fg-1); font-weight: 600; border-bottom: 1px solid var(--fg-5); }
.faq dd a:hover { border-bottom-color: var(--fg-1); }
/* home: shorter dark bands, and the lede on fewer lines */
.home .h-intro { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); }
.h-lede { max-width: 30ch; }
.home .h-system { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(56px, 7vw, 104px); }
/* home: a shorter Founders and Inquiries row */
.home .h-index { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 56px); }
.h-row { padding: 22px 0; }

/* Composed for a 15" MacBook Pro (1440 x 900, about 1440 x 790 in a browser):
   display type is about 14% smaller at that width than before, and the opening
   film leaves room for the headline and tagline on the first screen. */
.home .h-title h1 { font-size: clamp(34px, 4vw, 64px); }
.home .h-title .tag { font-size: clamp(15px, 1.3vw, 19px); }
.h-lede { font-size: clamp(26px, 3vw, 44px); }
.h-system-title { font-size: clamp(26px, 2.9vw, 40px); }
.page-head h1 { font-size: clamp(32px, 3.8vw, 52px); }
.h-row-title { font-size: clamp(22px, 2.1vw, 30px); }
.h-work-title { font-size: clamp(20px, 1.75vw, 24px); }
.statement p { font-size: clamp(24px, 2.9vw, 40px); }
.project-title { font-size: clamp(24px, 2.2vw, 32px); }
@media (min-width: 901px) {
  .film-reveal { height: max(50svh, calc(100svh - var(--bar) - 17rem)); }
}
/* larger founder portraits (the 675 x 900 sources stay well above their shown size, even on Retina) */
.founder { grid-template-columns: 128px 1fr; }
.founder-photo { width: 128px; }
@media (max-width: 760px) {
  .founder { grid-template-columns: 1fr; }
  .founder-photo { width: 96px; }
}
/* statement bands and the page ends: the same tighter spacing as the home intro */
.statement { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); }
.inquiries { padding-top: clamp(56px, 7vw, 104px); padding-bottom: clamp(56px, 7vw, 104px); }
.founders-sec { padding-bottom: clamp(48px, 6vw, 88px); }
.faq dd p + p { margin-top: 0.9em; }
/* phones: the narrow cards wrap names and titles differently, so the text in
   each card flows at its own spacing (no row-locked gaps); photos and
   "Read more" stay level across both cards. */
@media (max-width: 760px) {
  .founder-text { display: flex; flex-direction: column; align-self: stretch; }
  .founder-text > .more { margin-top: auto; padding-top: 12px; align-self: flex-start; }
}

/* One type scale for every page (sizes at 1440 px wide):
   page title 56 · statement 40 · section title 30 · item title 20 · label 11 */
.home .h-title h1, .page-head h1 { font-size: clamp(32px, 3.9vw, 56px); }
.h-lede, .h-system-title, .statement p { font-size: clamp(26px, 2.8vw, 40px); }
.h-row-title, .h-work-title, .project-title { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.1; letter-spacing: -0.025em; }
.stages dt, .faq dt, .founder h3, .legal-doc h2, .inq-sec .inq-lede { font-size: 20px; }
.billing { font-size: 11px; }
/* the home Frames block title is a section statement, like the System title */
.h-work-title { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.1; letter-spacing: -0.03em; }
/* phones: the two founder cards stay side by side and match. Each card is a
   column of five rows shared with the other card (photo, name, title, credit
   line, "Read more"), and both names break before the last name, so the two
   cards carry the same lines and every row starts level. */
@media (max-width: 760px) {
  .founders { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto 1fr auto; row-gap: 0; }
  .founder { grid-row: span 5; grid-template-rows: subgrid; grid-template-columns: 1fr; row-gap: 0; align-content: normal; }
  .founder-photo { grid-column: 1; grid-row: 1; width: 100%; max-width: 128px; margin-bottom: 12px; }
  .founder-text { grid-column: 1; grid-row: 2 / -1; display: grid; grid-template-rows: subgrid; align-self: stretch; }
  .founder h3 { font-size: 17px; }
  .founder h3 .last { display: block; }
}
/* the narrowest cards also break the title before its last word
   ("Founder and / CEO", "Founder and / President") so both take two lines */
@media (max-width: 520px) {
  .founder .role .last { display: block; }
}
@media (max-width: 760px) {
  .founder-text > .more { align-self: end; margin-top: 0; padding-top: 12px; }
}
/* desktop: the whole 16:9 film, never cropped; the spare width either side
   is white (pillarbox). Phones keep the full-width 16:9 frame. */
@media (min-width: 901px) {
  .film-reveal, .film-reveal .reveal-video { background: #fff; }
  .film-reveal .reveal-video video { object-fit: contain; object-position: 50% 50%; }
}
/* desktop: the home headline on one line, so the film can take more height */
@media (min-width: 901px) {
  .home .h-title h1 br { display: none; }
}
/* the one-line headline needs less room, so the film takes it (the headline
   and its tag line still show under the film on a 15-inch MacBook) */
@media (min-width: 901px) {
  .film-reveal, .film-reveal .reveal-video { height: max(50svh, calc(100svh - var(--bar) - 12rem)); }
}
/* desktop: the film runs edge to edge, the whole 16:9 frame (no bars, no
   crop); the headline follows below it */
@media (min-width: 901px) {
  .film-reveal, .film-reveal .reveal-video { height: calc(100vw * 9 / 16); }
}
/* 100vw counts the scrollbar, so the box ran a few px taller than the frame
   and left a white line; size both from their own width instead */
@media (min-width: 901px) {
  .film-reveal, .film-reveal .reveal-video { height: auto; aspect-ratio: 16 / 9; }
  .film-reveal, .film-reveal .reveal-video { background: #000; }
}
/* desktop: the headline sits over the foot of the film, white on a dark
   fade, instead of in its own band below it. Clicks pass through to the
   film's sound button. */
@media (min-width: 901px) {
  .home .h-title.paper {
    --ht: clamp(220px, 19vw, 300px);
    margin-top: calc(-1 * var(--ht)); height: var(--ht); box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding-top: 0; padding-bottom: clamp(28px, 3vw, 44px);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.72)) !important;
    z-index: 2; pointer-events: none;
    --fg-1: #ffffff; --fg-2: rgba(255, 255, 255, 0.88); --fg-5: rgba(255, 255, 255, 0.7);
  }
  .home .h-title.paper h1, .home .h-title.paper .tag { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); }
}
/* the film can run past the bottom of the window; lift the headline by that
   overflow so it always sits in the visible picture */
@media (min-width: 901px) {
  .home .h-title.paper {
    --over: max(0px, calc(56.25vw + var(--bar) - 100svh));
    height: calc(var(--ht) + var(--over));
    margin-top: calc(-1 * (var(--ht) + var(--over)));
    padding-bottom: calc(clamp(28px, 3vw, 44px) + var(--over));
  }
}
/* the dark fade lives inside the film's own clip, so the film and the fade
   end on the same edge (two separate edges left a lighter row at the foot) */
@media (min-width: 901px) {
  .home { --ht: clamp(220px, 19vw, 300px); --over: max(0px, calc(56.25vw + var(--bar) - 100svh)); }
  .home .film-reveal::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(max(var(--ht) + 120px, 30vw) + var(--over)); background: linear-gradient(to bottom, rgba(17, 24, 39, 0) 0%, rgba(17, 24, 39, 0.5) 40%, rgba(17, 24, 39, 0.88) 75%, rgb(17, 24, 39) 100%); z-index: 1; pointer-events: none; }
  .home .h-title.paper { background: transparent !important; }
}
/* and the band below overlaps the film by 1px, so a fractional edge never
   shows a seam */
@media (min-width: 901px) {
  .home .h-intro { position: relative; z-index: 3; margin-top: -1px; }
}