/* Doorman Launch: tokens, type scale, layout, components.
   Built to facade-rebrand/premium-ref/PREMIUM-SPEC.md.
   One typeface (Overpass 400 and 800). Structure from spacing and hairlines, never boxes.
   Brass means "do this": one brass fill per screen. No gradients, shadows, blur or glow.
   Spacing tokens only: 4 8 12 16 24 32 48 64 96 128 160 (plus the 20px phone gutter). */

/* ---------- Fonts (self hosted, latin subset, OFL) ---------- */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/overpass-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/overpass-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens (PLAN 2.6, PREMIUM-SPEC 1, 2, 7) ---------- */
:root {
  --ink: #161616;
  --white: #FFFFFF;
  --night: #0B0B0C;
  --brass: #B08A3E;
  --brass-hover: #A27F38;
  --steel: #5E5E5E;
  --smoke: #A3A3A3;
  --line: #E4E4E4;
  --line-strong: #858585;

  --font: "Overpass", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Type scale, fluid between 390 and 1440 */
  --fs-h1: clamp(44px, calc(27.66px + 4.19vw), 88px);
  --fs-h2: clamp(32px, calc(23.09px + 2.286vw), 56px);
  --fs-price: clamp(32px, calc(26.06px + 1.524vw), 48px);
  --fs-h3: clamp(21px, calc(19.89px + 0.286vw), 24px);
  --fs-lead: clamp(19px, calc(17.89px + 0.286vw), 22px);
  --fs-body: 17px;
  --fs-small: 14px;

  /* Frame and rhythm, phone first */
  --gutter: 20px;
  --maxw: 1280px;
  --head-h: 64px;
  --sec: 64px;
  --sec-night: 96px;
  --to-content: 32px;
  --row-pad: 24px;
  --above-btn: 32px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (min-width: 600px) {
  :root { --gutter: 32px; --head-h: 72px; --sec: 96px; --sec-night: 128px; --to-content: 48px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 64px; --head-h: 80px; --sec: 128px; --sec-night: 160px; --row-pad: 24px; --above-btn: 40px; --fs-body: 18px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; height: auto; }
input, button, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; color: inherit; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; max-width: 31em; }
li { text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong, b { font-weight: 800; }
figure { margin: 0; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-thickness 160ms var(--ease); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.on-night :focus-visible { outline-color: var(--white); }
::selection { background: var(--ink); color: var(--white); }

.sr-only {
  position: absolute !important; left: 50%; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--gutter); top: -96px; z-index: 100;
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px;
  background: var(--ink); color: var(--white); font-weight: 800; text-decoration: none;
}
.skip:focus { top: 8px; }

/* ---------- Type ---------- */
.h1, h1 {
  font-size: var(--fs-h1); line-height: 1; letter-spacing: -0.03em; font-weight: 800;
}
.h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.025em; max-width: 14em; }
.h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; font-weight: 800; }
.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 24em; }
.small { font-size: var(--fs-small); line-height: 1.5; max-width: 36em; }
.steel { color: var(--steel); }
.num { font-variant-numeric: tabular-nums lining-nums; }
@media (min-width: 1024px) {
  .h1, h1 { line-height: 0.96; letter-spacing: -0.035em; max-width: 10.5em; }
  .h2 { line-height: 1.02; }
}

/* ---------- Frame ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
/* A standard section: space, then one hairline at content width, then space */
.sec { padding-bottom: var(--sec); }
.sec__in { padding-top: var(--sec); border-top: 1px solid var(--line); }
.sec--open .sec__in { border-top: 0; }
/* A list that brings its own top hairline right under a page head (/work): no second line, no second gap */
.sec--flush .sec__in { border-top: 0; padding-top: 0; }
/* No hairline next to the night band (PREMIUM-SPEC 2), and the band's own padding counts toward
   the space after it: the largest blank run stays at 128px on a phone and 256px at 1440 */
.night + .sec .sec__in { border-top: 0; padding-top: 32px; }
@media (min-width: 600px) { .night + .sec .sec__in { padding-top: 64px; } }
@media (min-width: 1024px) { .night + .sec .sec__in { padding-top: 96px; } }

/* Left rail: H2 in columns 1 to 4, content in 5 to 12 (desktop); stacked on phones.
   Column 5 (x=515 at 1440) is the one content rail on every page, the footer included. */
.rail { display: grid; row-gap: var(--to-content); }
.rail__head { display: grid; row-gap: 16px; align-content: start; }
.rail__head p { color: var(--steel); }
@media (min-width: 1024px) {
  .rail { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .rail__head { grid-column: 1 / span 4; }
  .rail__body { grid-column: 5 / span 8; }
  /* A long list beside a short head: the head stays in view */
  .rail__head--stick { position: sticky; top: 128px; align-self: start; }
}
.stack { display: grid; row-gap: var(--to-content); }
.stack__head { display: grid; row-gap: 16px; }
.stack__head p { color: var(--steel); }

/* ---------- Buttons ---------- */
.btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 56px; padding: 0 28px;
  font: 800 var(--fs-body)/1 var(--font); letter-spacing: 0;
  color: var(--ink); background: var(--brass);
  border: 0; border-radius: 2px; text-decoration: none; cursor: pointer;
  transition: background-color 160ms var(--ease);
}
.btn:hover { background: var(--brass-hover); text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (min-width: 600px) { .btn { display: inline-flex; width: auto; } }
.btn-row { margin-top: var(--above-btn); }

/* A quiet text action: underlined ink, never a second button style, and never steel (it is not disabled) */
.textlink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; color: var(--ink); }

/* ---------- Header ---------- */
.head { position: relative; z-index: 30; background: var(--white); border-bottom: 1px solid var(--line); }
.head__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--head-h); }
.brand {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  color: var(--ink); text-decoration: none;
  font-size: var(--fs-h3); font-weight: 800; line-height: 1; letter-spacing: -0.01em; white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand__mark { width: auto; height: 1.15em; fill: var(--brass); flex: none; }
.brand__word { padding-top: 0.12em; }
.nav { display: none; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; line-height: 1; text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; }
.nav .nav__login { color: var(--steel); padding-left: 32px; border-left: 1px solid var(--line); }
.menu__panel .menu__login { color: var(--steel); }
@media (min-width: 1024px) {
  .nav { display: flex; gap: 32px; }
  .menu { display: none; }
}

/* Phone menu: a disclosure, works without JavaScript */
.menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: flex-end;
  min-height: 44px; min-width: 64px; font-size: var(--fs-body); line-height: 1;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu__close { display: none; }
.menu:not([open]) .menu__panel { display: none; }
.menu[open] .menu__open { display: none; }
.menu[open] .menu__close { display: inline; }
.menu__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--white); border-bottom: 1px solid var(--line);
  padding: 8px var(--gutter) 24px;
  min-height: calc(100vh - var(--head-h)); min-height: calc(100dvh - var(--head-h));
}
.menu__panel a {
  display: flex; align-items: center; min-height: 56px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.01em; text-decoration: none;
}
.menu__panel a:last-child { border-bottom: 0; }

/* ---------- Heroes: home and every product page share one frame ----------
   390: header, 40px, H1, lead, price line, button, 40px, the 4:5 media, its caption.
   1024+: copy in columns 1 to 7 with the H1 pinned at one height on every page (216px under the
   hero's top, so 280px of white under the header at 1440), media in columns 8 to 12 from the top.
   At 1440 the home button's bottom lands on the media's bottom. */
.hero { padding: 40px 0 var(--sec); }
.hero__grid { display: grid; }
.hero__lead { margin-top: 20px; }
.hero__qual { margin-top: 16px; color: var(--steel); }
.hero__media { margin-top: 40px; }
@media (min-width: 1024px) {
  .hero { padding: 64px 0 128px; }
  .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .hero__copy { grid-column: 1 / span 7; padding-top: 210px; }
  .hero__media { grid-column: 8 / span 5; margin-top: 0; }
  .hero__lead { margin-top: 24px; }
}

/* A type only first screen (round 5), on home and on every page head whose image slot is not filled yet:
   no media frame, so no empty columns 8 to 12 and no 280px drop. 390: H1, lead, price line, button, stacked.
   1024+: the H1 in columns 1 to 7, the lead, the price line and the button in 8 to 12, their last line level
   with the H1's last line. When the slot's image lands, the page goes back to the media frame. */
.thead { display: grid; }
.thead__copy .lead { margin-top: 20px; }
.thead__copy .hero__qual, .thead__copy .page-head__qual { margin-top: 16px; }
@media (min-width: 1024px) {
  .hero--type { padding-top: 160px; }
  .page-head.page-head--type { padding-top: 128px; }
  .thead { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
  .thead > h1 { grid-column: 1 / span 7; }
  .thead__copy { grid-column: 8 / span 5; }
  .thead .thead__copy .lead { margin-top: 0; }
}

/* The frame every hero media sits in: 4:5, a light ground (ink at 6%), square corners, no border */
.frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: rgba(22, 22, 22, 0.06); }

/* The door: the home media sits behind a flat ink leaf that opens once (PREMIUM-SPEC 3.3).
   The leaf is created by script, so without JavaScript nothing is hidden. */
.door__media { position: absolute; inset: 0; transform-origin: 50% 50%; }
.door__media > img { width: 100%; height: 100%; object-fit: cover; }
.door__leaf {
  position: absolute; inset: 0; z-index: 2;
  background: var(--ink); transform-origin: 0 50%;
  display: grid; place-items: center;
}
.door__plaque { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; }
.door__plaque svg { width: auto; height: 48px; fill: var(--white); }
@media (min-width: 1024px) { .door__plaque svg { height: 64px; } }
.caption { margin-top: 12px; font-size: var(--fs-small); line-height: 1.5; color: var(--steel); max-width: 36em; }

/* A flat phone screen (9:16, no device frame) standing in the frame: a text thread, top aligned */
.stage { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: 12px; padding: 24px 16px; }
.phone { height: 100%; aspect-ratio: 9 / 16; background: var(--white); display: flex; flex-direction: column; overflow: hidden; }
.phone__head { padding: 12px 12px 8px; border-bottom: 1px solid var(--line); }
.phone__who { margin: 0; font-size: var(--fs-small); line-height: 1.5; font-weight: 800; }
.phone__sub { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--steel); }
.phone__thread { display: flex; flex-direction: column; gap: 8px; padding: 12px; flex: 1; }
.phone__compose { margin: 0 12px 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 4px; font-size: var(--fs-small); line-height: 1.5; color: var(--steel); }
.phone__meta { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--steel); }
.msg { margin: 0; max-width: 88%; padding: 8px 12px; border-radius: 4px; font-size: var(--fs-small); line-height: 1.5; }
.msg--in { align-self: flex-start; background: rgba(22, 22, 22, 0.06); }
.msg--out { align-self: flex-end; background: var(--ink); color: var(--white); }
.msg u { text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.msg strong { font-weight: 800; }
@media (min-width: 1024px) {
  .stage { padding: 48px; gap: 24px; }
  .phone__head { padding: 16px 16px 12px; }
  .phone__who { font-size: 16px; }
  .phone__thread { gap: 12px; padding: 16px; }
  .msg { font-size: 16px; padding: 12px 16px; }
}
/* Two phones side by side, Before and After, the same crop (PREMIUM-SPEC 5) */
.stage--pair > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.stage--pair .phone { width: 100%; height: auto; }
.stage__label { margin: 0; font-size: var(--fs-small); line-height: 1.5; font-weight: 800; }
.stage--pair .phone__thread { gap: 8px; padding: 12px; }
.stage--pair .msg { font-size: var(--fs-small); padding: 8px 12px; max-width: 92%; }
.stage--pair .phone__who { font-size: var(--fs-small); }
/* The longer story shows only where there is room for it at a readable size (a frame about 500px wide) */
.stage__wide, .stage__wide-inline { display: none; }
@media (min-width: 1024px) and (max-width: 1359px) { .stage--pair { padding: 24px 16px; gap: 12px; } }
@media (min-width: 1360px) {
  /* Desktop: both screens at a readable size, as tall as the longer thread, the pair centred in the
     frame, each screen ending under its own last message */
  .stage--pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-content: center; align-items: stretch; padding: 24px; }
  .stage--pair .phone { flex: 1 1 auto; aspect-ratio: auto; }
  .stage--pair .phone__head { padding: 12px 16px; }
  .stage--pair .phone__who { font-size: var(--fs-body); }
  .stage--pair .phone__thread { gap: 12px; padding: 16px; }
  .stage--pair .msg { font-size: var(--fs-body); line-height: 1.5; padding: 8px 12px; max-width: 94%; }
  .stage__wide { display: block; }
  .stage__wide-inline { display: inline; }
  .stage__narrow { display: none; }
}

/* The home hero's Example: one phone screen filling the frame and cropped by its bottom edge, like the
   Walkthrough sheet. Messages at body size; the thread reads from the top. */
.screen { position: absolute; left: 16px; right: 16px; top: 24px; bottom: 0; display: flex; flex-direction: column; background: var(--white); overflow: hidden; }
.screen__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.screen__head p { margin: 0; }
.screen__who { font-weight: 800; line-height: 1.5; }
.screen__sub, .screen__tag { font-size: var(--fs-small); line-height: 1.5; color: var(--steel); }
.screen__thread { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; }
.screen .msg { font-size: var(--fs-body); line-height: 1.5; max-width: 90%; padding: 8px 12px; }
/* On a phone the thread ends at "See you Thursday": the Thursday text needs a frame about 500px wide */
.screen__late { display: none; }
@media (min-width: 600px) and (max-width: 1023px) { .screen__late { display: block; } }
@media (min-width: 1024px) and (max-width: 1279px) {
  .screen .msg { font-size: 16px; }
  .screen__thread { padding: 12px 16px; }
}
@media (min-width: 1280px) {
  .screen { left: 32px; right: 32px; top: 32px; }
  .screen__head { padding: 16px 24px; }
  .screen__thread { gap: 12px; padding: 24px; }
  .screen .msg { padding: 12px 16px; max-width: 88%; }
}
@media (min-width: 1360px) { .screen__late { display: block; } }

/* A document page in the frame, cropped by the frame's bottom edge like a sheet on a desk */
.sheet { position: absolute; left: 24px; right: 24px; top: 24px; bottom: 0; background: var(--white); padding: 20px 20px 0; overflow: hidden; }
.sheet__top { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 16px; font-size: var(--fs-small); line-height: 1.5; color: var(--steel); }
.sheet__title { margin: 0 0 8px; font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; font-weight: 800; }
.sheet__list { counter-reset: f; }
.sheet__list li { position: relative; padding: 8px 0 8px 24px; border-bottom: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.5; }
.sheet__list li::before { counter-increment: f; content: counter(f); position: absolute; left: 0; color: var(--steel); font-variant-numeric: tabular-nums; }
.sheet__end { margin: 16px 0 0; font-size: var(--fs-small); line-height: 1.5; }
.sheet__end strong { font-weight: 800; }
@media (min-width: 1024px) {
  .sheet { left: 48px; right: 48px; top: 48px; padding: 32px 32px 0; }
  .sheet__top { margin-bottom: 24px; }
  .sheet__title { margin-bottom: 12px; }
  .sheet__list li { padding: 12px 0 12px 32px; font-size: 16px; }
  .sheet__end { margin-top: 24px; font-size: 16px; }
}

/* ---------- Hairline rows ---------- */
.rows { border-top: 1px solid var(--line); }
.row { padding: var(--row-pad) 0; border-bottom: 1px solid var(--line); }
.row__t { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; }
.row__b { margin-top: 8px; color: var(--steel); }
.row__b + .row__b { margin-top: 1em; }
.row--num { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 16px; }
.row__n { color: var(--steel); font-variant-numeric: tabular-nums; line-height: 1.6; }
.row--num > .row__n { padding-top: 0.05em; }
@media (min-width: 1024px) { .row--num { grid-template-columns: 48px minmax(0, 1fr); } }
/* From 1280 up the numbers hang in the gutter left of the rail, so every title and line in a
   numbered list starts on the same rail as the rest of the page (the same at every width below:
   a number column on the left) */
@media (min-width: 1280px) {
  .row--num { display: block; position: relative; }
  .row--num > .row__n { position: absolute; left: -48px; top: var(--row-pad); padding-top: 0.15em; }
  /* The head on the left rail ends 24px before those hanging numbers (x 443 at 1440, the numbers at 467),
     so its last words never run into a number and read as one sentence */
  .rail:has(.row--num) > .rail__head { padding-right: 48px; }
}
.row__label { color: var(--steel); font-weight: 400; }

/* Cells: hairline rows on a phone, a 3 (or 2) column grid of hairline topped blocks on desktop */
.cells { border-top: 1px solid var(--line); }
.cell { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 16px; padding: var(--row-pad) 0; border-bottom: 1px solid var(--line); }
.cell--plain { display: block; }
/* The section hairline closes a list, so the list's own last line is dropped (no doubled lines) */
.cells > .cell:last-child, .work > .work__item:last-child, .faq > details:last-child, .rail__body > .rows > .row:last-child,
.sec__in > .plist:last-child > li:last-child, .sec__in > .rows:last-child > .row:last-child { border-bottom: 0; }
.more { margin-top: 24px; }
.cells--deliver { margin-top: var(--to-content); }
@media (min-width: 1024px) {
  .cells--deliver > .cell { padding: 24px 0 16px; }
}
/* A section with its H2 on the left rail and two columns of items beside it (no empty columns) */
.split { display: grid; row-gap: var(--to-content); }
.split__head { display: grid; row-gap: 16px; align-content: start; }
.split__head p { color: var(--steel); }
@media (min-width: 1024px) {
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .split__head { grid-column: 1 / span 4; }
  .split__body { grid-column: 5 / span 8; }
  .split__full { grid-column: 1 / -1; }
  .cells.cells--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split__more { grid-column: 5 / span 8; }
}
@media (min-width: 1024px) {
  .cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; border-top: 0; }
  /* The column count always matches the item count: no empty cells */
  .cells--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cell { display: block; border-bottom: 0; border-top: 1px solid var(--line); padding: 32px 0 48px; }
  .cell .row__n { display: block; margin-bottom: 12px; }
  .more { margin-top: 0; }
}

/* ---------- The Rebuild on home: the head on the left, the Example kit and the six deliverables on the rail ---------- */
.kitrow { display: grid; row-gap: var(--to-content); }
.kitrow__head { display: grid; row-gap: 16px; align-content: start; }
.kitrow__head p { color: var(--steel); }
.kitrow__head .kitrow__more { margin-top: 8px; }
.kit img { display: block; width: 100%; height: auto; }
.kit .caption { max-width: none; }
/* On a phone the homepage is its own 9:16 image under the 4:5 kit, smaller than the kit and framed by a
   hairline where its white header meets the white page (PREMIUM-SPEC 5); from 600 up it sits inside the
   16:10 sheet */
.kit__home { margin-top: 24px; }
/* On /work/local the hero already shows the 4:5 kit, so on a phone the Rebuild rows skip it */
@media (max-width: 599px) { .kit--wide { display: none; } .kit--wide + .deliver { margin-top: 0; } }
@media (max-width: 599px) { .kit img.kit__home { width: 60%; border: 1px solid var(--line); border-radius: 2px; } }
@media (min-width: 600px) { .kit__home { display: none !important; } }
/* The six deliverables: numbered hairline rows, the number on the title's own line */
.deliver { margin-top: var(--to-content); }
.deliver > li { padding: var(--row-pad) 0; border-top: 1px solid var(--line); }
.deliver .row__n { line-height: inherit; }
@media (min-width: 1024px) {
  .kitrow { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .kitrow__head { grid-column: 1 / span 4; position: sticky; top: 128px; align-self: start; }
  .kitrow__body { grid-column: 5 / span 8; }
  .deliver { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 24px; }
  /* 7 or 8 numbered items: two columns of 4 */
  .deliver--4 { grid-template-rows: repeat(4, auto); }
}
/* A group inside a lane's "What I build": its own H3, then the list that belongs to it */
.build__sub { margin-top: 48px; }
.build__sub--first { margin-top: 0; }
.build__sub + .deliver, .build__sub + .rows { margin-top: 24px; }
/* A link in a title gets a 44px tap target without moving the line */
.build__sub a, .rows .row__t > a { display: inline-block; padding: 9px 0; margin: -9px 0; }
@media (min-width: 1024px) { .build__sub { margin-top: 64px; } .build__sub--first { margin-top: 0; } }
/* A flat phone screenshot inside a "What's real so far" row: 9:16, 60% wide on a phone, 240px from 600 up */
.real__shot { margin-top: 24px; }
.real__shot img { width: 60%; height: auto; border: 1px solid var(--line); border-radius: 2px; }
@media (min-width: 600px) { .real__shot img { width: 240px; } }
/* A row that is one sentence with its own bold lead in, no title */
.row__b--solo { margin-top: 0; }
/* The open section right under the hero: no hairline between them, so half the top padding */
@media (min-width: 1024px) { .hero + .sec--open .sec__in { padding-top: 64px; } }
@media (max-width: 599px) { .hero + .sec--open .sec__in { padding-top: 48px; } }
/* The section before the night band gives up half its bottom padding (the band brings its own), and keeps
   enough that its last caption never sits on the cut to night (round 5: 8px at 390 read as touching) */
.sec--before-night { padding-bottom: 64px; }
@media (min-width: 600px) { .sec--before-night { padding-bottom: 48px; } }
@media (min-width: 1024px) { .sec--before-night { padding-bottom: 64px; } }

/* ---------- Work (proof) ---------- */
.work { border-top: 1px solid var(--line); margin-top: var(--to-content); }
/* 32px between a caption and the next title, so a caption groups with its image and never reads as an eyebrow */
.work__item { padding: var(--row-pad) 0; border-bottom: 1px solid var(--line); display: grid; row-gap: 32px; }
/* The last project gives up its own bottom padding: the section's padding is the space after it */
.work > .work__item:last-child { padding-bottom: 0; }
/* Flat screenshots only: 16:10 desktop screens, 9:16 phone screens, a 1px hairline where white meets white, 2px corners */
.work__shot { display: block; }
.work__shot img, .work__pair img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 2px; }
.work__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; align-items: start; }
.work__tag { margin: 0 0 8px; font-size: var(--fs-small); line-height: 1.5; font-weight: 800; }
.work__meta .caption { margin-top: 12px; }
@media (min-width: 600px) { .work__pair { column-gap: 24px; } }
.work__meta p { color: var(--steel); }
.work__meta .row__t { margin-bottom: 4px; }
.work__meta .work__label { margin-bottom: 12px; }
/* A 9:16 phone screen in a project row: 60% wide on a phone, columns 1 to 3 on desktop (a 6 column phone shot
   would be taller than the screen); the words stay on column 7 like every other row */
.work__shot--916 img { width: 60%; }
.work__meta .row__t a { display: inline-block; padding: 9px 0; margin: -9px 0; }
@media (min-width: 1024px) {
  .work__item { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .work .work__shot--916 { grid-column: 1 / span 3; }
  .work__shot--916 img { width: 100%; }
  .work__pair { grid-column: 1 / -1; }
  .work__item--pair .work__meta { grid-column: 1 / span 6; }
  .work__shot { grid-column: 1 / span 6; }
  .work__meta { grid-column: 7 / span 6; }
}

/* ---------- Prices: hairline rows, never tier cards (PREMIUM-SPEC 6) ---------- */
.prices { border-top: 1px solid var(--line); }
.prow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 8px;
  align-items: baseline; padding: var(--row-pad) 0; border-bottom: 1px solid var(--line);
}
.prow__name { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; }
.prow__price { text-align: right; white-space: nowrap; }
.prow__name a { display: inline-block; padding: 9px 0; margin: -9px 0; text-decoration: none; }
.prow__name a:hover, .prow__name a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; }
.prow__desc { grid-column: 1 / -1; color: var(--steel); }
.prow__desc p { margin-bottom: 0.5em; }
.prow__desc p:last-child { margin-bottom: 0; }
.price { font-size: var(--fs-price); line-height: 1; letter-spacing: -0.03em; font-weight: 800; font-variant-numeric: tabular-nums lining-nums; }
.unit { font-size: var(--fs-body); color: var(--steel); white-space: nowrap; }
@media (min-width: 1024px) {
  .prow { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .prow__name { grid-column: 1 / span 4; }
  .prow__desc { grid-column: 5 / span 5; grid-row: 1; }
  .prow__price { grid-column: 10 / span 3; grid-row: 1; }
}
@media (min-width: 1024px) {
  .prow--single { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
  .prow--single .prow__name { grid-column: 1; grid-row: 1; }
  .prow--single .prow__price { grid-column: 2; grid-row: 1; }
  .prow--single .prow__desc { grid-column: 1 / -1; grid-row: 2; }
}
/* The fine print under the price rows: the price rule, how you pay, what's not included */
.fine { display: grid; row-gap: 16px; margin-top: 24px; }
.fine p { margin: 0; color: var(--steel); max-width: 31em; }
.fine strong { color: var(--ink); }
@media (min-width: 1024px) {
  .fine { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 16px; align-items: start; }
  /* Three short columns on the price grid: the rule under the names, how you pay under the descriptions */
  .fine p { grid-column: span 4; }
  /* Two lines side by side (under the lanes) */
  .fine--two p { grid-column: span 6; }
}
/* A second group of price rows on the same page (/prices: creators and product launches) */
/* The stack's own gap is there already, so a little more marks the new group */
.prices-group { margin-top: 16px; display: grid; row-gap: 16px; }
.prices-group p { margin: 0; color: var(--steel); }
.prices--after-group { margin-top: 24px; }

/* ---------- Who I work with: one hairline row per lane (home and /work) ----------
   390: the lane name and its starting price share the first line; who it's for, the visitor's own thought,
   what I build and the link stack under them, full width. 1024+: the name and who it's for in columns 1 to 4,
   the thought, what I build and the link in 5 to 9, "From" and the price right aligned in 10 to 12.
   The thought is the visitor's, never a quote from anyone: no name, no stars, no review styling. */
.lanes { border-top: 1px solid var(--line); }
.lane {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 8px;
  align-items: baseline; padding: var(--row-pad) 0; border-bottom: 1px solid var(--line);
}
/* On a phone the head's two lines are grid items of the row; from 1024 they stack in their own column */
.lane__head { display: contents; }
.lane__name { grid-column: 1; grid-row: 1; font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; }
.lane__name a { display: inline-block; padding: 9px 0; margin: -9px 0; text-decoration: none; }
.lane__name a:hover, .lane__name a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; }
.lane__price { grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap; font-size: var(--fs-h3); line-height: 1.25; }
/* The starting price at the lane name's size (round 5): the 48px numerals stay on /prices and in each lane's
   own price section, so a row's loudest line is its name */
.lane__price .price { font-size: inherit; line-height: inherit; letter-spacing: -0.01em; }
.lane__price .unit { font-size: var(--fs-body); }
.lane__who { grid-column: 1 / -1; grid-row: 2; margin: 0; color: var(--steel); }
.lane__body { grid-column: 1 / -1; grid-row: 3; display: grid; row-gap: 8px; justify-items: start; margin-top: 8px; }
.lane__body p { margin: 0; }
.lane__build { color: var(--steel); }
.lanes__note { margin: 24px 0 0; }
/* 1024+: three stacks that start together, their first lines on one baseline: the thought's first baseline sits
   27px down (1.5 x 18px); the name and the price share one size, so both are lifted by the same larger line box */
@media (min-width: 1024px) {
  .lane { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .lane__head { display: grid; row-gap: 8px; align-content: start; grid-column: 1 / span 4; grid-row: 1; }
  .lane__name { margin-top: calc(27px - 1.25em); }
  .lane__body { grid-column: 5 / span 5; grid-row: 1; margin-top: 0; }
  .lane__price { grid-column: 10 / span 3; margin-top: calc(27px - 1.25em); }
}
.terms { display: grid; row-gap: 24px; margin-top: var(--to-content); }
.terms h3 { margin-bottom: 8px; }
.terms p { color: var(--steel); }
@media (min-width: 1024px) {
  .terms { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .terms > div { grid-column: span 4; }
}

/* Promises: one stacked list, the name on the left and its condition beside it */
.promises { margin-top: 64px; display: grid; row-gap: var(--to-content); }
@media (max-width: 1023px) { .promises { margin-top: var(--sec); } }
.promises__head { display: grid; row-gap: 16px; align-content: start; }
.promises__head p { color: var(--steel); }
.promises .btn-row { margin-top: 0; }
.promises__more { margin: -16px 0 0; }
.promises__more a { display: inline-flex; align-items: center; min-height: 44px; }
.plist { border-top: 1px solid var(--line); }
.plist > li { padding: var(--row-pad) 0; border-bottom: 1px solid var(--line); display: grid; row-gap: 8px; }
.plist__t { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; }
.plist p { color: var(--steel); }
@media (min-width: 1024px) {
  .promises { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .promises__head { grid-column: 1 / span 4; }
  .promises > .plist, .promises__more, .promises__btn { grid-column: 5 / span 8; }
  .plist > li { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 24px; align-items: baseline; }
  .plist__t { grid-column: 1 / span 4; }
  .plist > li > p { grid-column: 5 / span 4; }
  /* Full width list: the name in columns 1 to 4, the words in 5 to 12 */
  .plist--wide > li { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .plist--wide > li > p { grid-column: 5 / span 8; }
}
/* A section head on one line on desktop: H2 in columns 1 to 4, its sentence beside it */
.inhead { display: grid; row-gap: 16px; }
.inhead p { color: var(--steel); }
@media (min-width: 1024px) {
  .inhead { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
  .inhead .h2 { grid-column: 1 / span 4; }
  .inhead p { grid-column: 5 / span 5; }
}

/* Who it's for: one lead and one body style; who it isn't for beside it on desktop */
.who { display: grid; row-gap: 48px; }
.who > div { display: grid; row-gap: 16px; align-content: start; }
.who p { margin: 0; }
.who .h3 { margin-bottom: -4px; }
/* A second block in the same column (Before any call, then Who it isn't for) */
.who p + .h3 { margin-top: 16px; }
@media (min-width: 1024px) {
  .who { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 24px; }
  .who__for { grid-column: 1 / span 4; }
  .who__not { grid-column: 5 / span 4; }
}

/* ---------- Questions ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) 24px; column-gap: 16px; align-items: center;
  min-height: 56px; padding: var(--row-pad) 0;
  font-size: var(--fs-h3); line-height: 1.25; font-weight: 800; letter-spacing: -0.01em;
  text-wrap: balance;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 16px; height: 16px; justify-self: end; transition: transform 160ms var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq__a { padding-bottom: var(--row-pad); color: var(--steel); }

/* ---------- The one night section: the Doorman, once, large (PREMIUM-SPEC 3.4) ---------- */
.night { background: var(--night); color: var(--white); padding: var(--sec-night) 0; }
.night__grid { display: grid; row-gap: 48px; }
.night__copy p { color: var(--smoke); margin-top: 16px; }
/* One master drawing (assets/img/doorman/doorman.svg), inline so his group can move.
   The arch is wide enough that he sits a sixth of its width clear of each side. It stands on a 1px white
   threshold that runs the width of its columns, so the band reads as one composed frame. */
.doorman { min-width: 0; }
.doorman__floor { display: flex; justify-content: center; border-bottom: 1px solid var(--white); }
.doorman__svg { display: block; height: 360px; width: auto; aspect-ratio: 1207 / 2053; overflow: hidden; }
.doorman__dog { transform: translateX(0); transition: transform 200ms var(--ease); }
/* His one move: he steps aside, toward the side of the doorway, once */
.doorman.is-aside .doorman__dog { transform: translateX(-120px); }
.doorman figcaption { margin-top: 16px; color: var(--white); }
@media (prefers-reduced-motion: reduce) {
  .doorman__dog { transform: translateX(-120px); transition: none; }
}
@media (min-width: 600px) { .doorman__svg { height: 440px; } }
@media (min-width: 1024px) {
  .night__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
  /* 7 columns, so the night H2 sets in 2 lines at 1440 */
  .night__copy { grid-column: 1 / span 7; }
  .doorman { grid-column: 8 / span 5; }
  .doorman__svg { height: 480px; }
}

/* A promise set as a lead: its first sentence is the lead, its conditions follow at body size (round 5) */
.promise__terms { margin-top: 16px; color: var(--steel); }

/* ---------- Closer ---------- */
.closer .h1 { max-width: 10.5em; }
/* A two sentence closer breaks between its sentences, never inside one (round 5) */
.closer .h1 .line { display: block; }
.closer p { margin-top: 24px; color: var(--steel); }
.closer .sign { margin-top: 16px; color: var(--ink); }

/* ---------- Page head (inner pages) ---------- */
.page-head { padding: 40px 0 var(--sec); }
.page-head .lead { margin-top: 20px; }
.page-head__qual { margin-top: 16px; color: var(--steel); }
@media (min-width: 1024px) {
  /* The H1 sits at the same height as on the home page and every product page (280px of white under the header at 1440) */
  .page-head { padding: 274px 0 var(--sec); }
  .page-head .lead { margin-top: 24px; }
}

/* A product page head: the same frame as the home hero (copy 1 to 7, H1 pinned, media 8 to 12) */
.phead { display: grid; row-gap: 40px; }
.phead__media img { width: 100%; height: auto; }
@media (min-width: 1024px) {
  .page-head--media { padding-top: 64px; }
  .phead { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .phead__copy { grid-column: 1 / span 7; padding-top: 210px; }
  .phead__media { grid-column: 8 / span 5; }
}
.rows--open { border-top: 0; }
.split__more { margin-top: 0; }
/* An in page index under a long page's head: plain underlined links on one line */
.toc { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 48px; }
.toc a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
@media (min-width: 1024px) { .toc { margin-top: 64px; gap: 0 32px; } }

/* The week by week calendar: hairline rows, three columns on desktop */
.weeks { border-top: 1px solid var(--line); }
.week { padding: var(--row-pad) 0; border-bottom: 1px solid var(--line); display: grid; row-gap: 8px; }
.week__when { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; }
.week__you { color: var(--steel); }
/* Column heads like the payment table's, desktop only; on a phone each row says "Your part:" itself */
.week--head { display: none; }
/* The table closes on the space after it: the list under it brings its own top hairline */
.weeks > .week:last-child { border-bottom: 0; }
@media (min-width: 1024px) {
  .week--head { display: grid; padding: 16px 0; border-top: 1px solid var(--line); font-weight: 800; }
  /* The head row's own bottom line is the table's top line: no gap and no second line under it */
  .week--head + .weeks { border-top: 0; margin-top: calc(-1 * var(--to-content)); }
  .week--head .week__when { font-size: var(--fs-body); line-height: 1.6; letter-spacing: 0; }
  .week--head .week__you { color: var(--ink); }
  .week__lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
@media (min-width: 1024px) {
  .week { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: baseline; }
  .week__when { grid-column: 1 / span 4; }
  .week__what { grid-column: 5 / span 4; }
  .week__you { grid-column: 9 / span 4; }
}

/* A plain three column table for payment terms */
.paytable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.paytable th, .paytable td { text-align: left; vertical-align: baseline; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); }
.paytable th:last-child, .paytable td:last-child { padding-right: 0; }
.paytable thead th { font-weight: 800; border-top: 1px solid var(--line); }
.paytable tbody th { font-weight: 400; color: var(--steel); }
.paytable td { font-weight: 800; white-space: nowrap; }
.paytable th:not(:first-child), .paytable td { text-align: right; }
.paytable tr.is-total th, .paytable tr.is-total td { color: var(--ink); font-weight: 800; }

/* Prose (about, legal) */
.prose h2 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; margin: 48px 0 16px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-body); line-height: 1.3; margin: 28px 0 8px; }
.prose ul { margin: 0 0 1em; max-width: 31em; }
.prose ul li { position: relative; padding-left: 24px; }
.prose ul li + li { margin-top: 8px; }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: 0.7em; width: 6px; height: 6px; background: var(--ink); }
.legal { display: grid; row-gap: 48px; }
@media (min-width: 1024px) {
  .legal { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .legal__toc { grid-column: 1 / span 3; position: sticky; top: 32px; align-self: start; }
  .legal__body { grid-column: 5 / span 8; }
}
.legal__toc li { border-top: 1px solid var(--line); }
/* The section hairline already sits above the list on desktop: no second line */
.legal__toc li:first-child { border-top: 0; }
/* On a phone the index follows the page head directly: its own first line is the section's hairline,
   with no extra padding above it */
@media (max-width: 1023px) {
  .sec__in.legal { padding-top: 0; border-top: 0; row-gap: 64px; }
  .legal__toc li:first-child { border-top: 1px solid var(--line); }
}
.legal__toc li:last-child { border-bottom: 1px solid var(--line); }
.legal__toc a { display: flex; align-items: center; min-height: 44px; font-size: var(--fs-small); text-decoration: none; color: var(--steel); }
.legal__toc a:hover { color: var(--ink); text-decoration: underline; }

/* 404 */
.lost__links { margin-top: var(--to-content); max-width: 640px; }
.lost__links li { border-bottom: 1px solid var(--line); }
.lost__links a { display: flex; align-items: center; min-height: 56px; font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.01em; text-decoration: none; }
.lost__links a:hover { text-decoration: underline; }

/* Legal contact list */
.contact-list li + li { margin-top: 8px; }
.foot--slim { --foot-top: 24px; padding: 24px 0; }
@media (max-width: 599px) { .foot--slim .foot__base { flex-direction: column; align-items: flex-start; } }


/* ---------- Footer ---------- */
/* The footer's top hairline runs at content width, like every section hairline (PREMIUM-SPEC 2).
   Trimmed 2026-10-04 (SITE-TRIM-SPEC 1.4): 8 links in two columns, then one base row. The wordmark is in the
   header already, so on a phone the footer starts with the links. */
.foot { --foot-top: 24px; padding: var(--foot-top) 0 12px; }
.foot > .wrap { position: relative; }
.foot > .wrap::before { content: ""; position: absolute; top: calc(-1 * var(--foot-top)); left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line); }
.foot__grid { display: grid; row-gap: 8px; }
.foot__brand { display: none; }
.foot__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
.foot__nav a { display: flex; align-items: center; min-height: 44px; line-height: 1.25; text-decoration: none; }
.foot__nav a:hover, .foot__nav a[aria-current="page"] { text-decoration: underline; }
.foot__base { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; padding-top: 8px; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--steel); }
.foot__base a { display: inline-flex; align-items: center; min-height: 44px; }
.foot__base span { text-wrap: pretty; }
.foot__legal { margin: 0; max-width: none; line-height: 1.5; }
.foot__legal a { display: inline; min-height: 0; margin-right: 16px; color: var(--steel); white-space: nowrap; }
.foot__legal a:last-child { margin-right: 0; }
.foot__copy { margin-right: 16px; white-space: nowrap; }
/* One paragraph (who and where), the same leading as any 14px text, wrapping where it wraps (round 5) */
.foot__note { margin: 0; line-height: 1.5; text-wrap: pretty; }
.foot__grid > .foot__base { row-gap: 4px; }
/* 600+: four columns of two, each column a site page over an offer */
@media (min-width: 600px) { .foot__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); grid-auto-flow: column; } }
@media (min-width: 1024px) {
  .foot { --foot-top: 48px; padding-bottom: 32px; }
  .foot__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; }
  .foot__brand { display: block; grid-column: 1 / span 4; }
  .foot__nav { grid-column: 5 / span 8; column-gap: 24px; }
  .foot__base { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding-top: 16px; }
  .foot__base > :first-child { grid-column: 1 / span 4; }
  .foot__base > :nth-child(n+2) { grid-column: 5 / span 8; }
}

/* ==========================================================================
   Trimmed site, 2026-10-04 (facade-rebrand/build/SITE-TRIM-SPEC.md): short, image led pages.
   Every tag inside a frame is one of Client, My own, Example, Concept, Before, After.
   ========================================================================== */

/* Labels (Client, My own, Example, Concept, Before, After) are words in the caption or a steel line under a row's
   title, never a chip on the image (judges, 2026-10-04: on a 128px thumbnail a chip covered more than half the work). */

/* A hero image slot (section 6): one figure per page, so tonight's image is a one line swap.
   4:5, the image's own crop point in --slot-pos. The frame clips, so the door's media settle never spills. */
.slot { position: relative; min-width: 0; }
.slot__frame { position: relative; overflow: hidden; border-radius: 2px; }
.slot__frame picture { display: block; }
.slot__frame > img, .slot__frame > picture > img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  object-position: var(--slot-pos, 50% 0); border: 1px solid var(--line); border-radius: 2px;
  background: rgba(22, 22, 22, 0.06);
}
.slot .caption { margin-top: 12px; }
/* The pause control on a looping image (the home hero): the video control's look, its glyph from the frame's state */
.is-paused > .vid__ctl .vid__play { display: block; }
.is-paused > .vid__ctl .vid__pause { display: none; }

/* Image rows (.rowimg): a 4:5 image beside a title, its label and one line, hairlines between, like the price rows.
   128 x 160 on a phone; 240 x 300 from 1024 (judges, 2026-10-04: no 3 column feature grid). The last row has no line
   of its own: the next hairline (the section's, or the lane links' space) closes the list, so two never stack. */
.rowimgs { border-top: 1px solid var(--line); }
.rowimg {
  display: grid; grid-template-columns: 128px minmax(0, 1fr); column-gap: 16px; align-items: start;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.rowimg:last-child { border-bottom: 0; padding-bottom: 0; }
.rowimg__img { position: relative; }
.rowimg__img img {
  display: block; width: 128px; height: 160px; object-fit: cover; object-position: var(--pos, 50% 50%);
  border: 1px solid var(--line); border-radius: 2px; background: var(--white);
}
.rowimg__t { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; }
.rowimg__t a { text-decoration-thickness: 1px; }
.rowimg__t a:hover { text-decoration-thickness: 2px; }
/* What the image is (Client, My own, Example, Concept), in words under the title */
.rowimg__k { margin: 4px 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--steel); }
.rowimg__b { margin: 8px 0 0; color: var(--steel); }
@media (min-width: 1024px) {
  .rowimg { grid-template-columns: 240px minmax(0, 1fr); column-gap: 48px; padding: 32px 0; }
  .rowimg:last-child { padding-bottom: 0; }
  .rowimg__img img { width: 240px; height: 300px; }
  .rowimg__b { max-width: 24em; }
}

/* Pairs: two 9:16 phone screens side by side, a tag inside each, captions under */
.pairs { display: grid; row-gap: 32px; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 8px; align-items: start; }
.shot { position: relative; min-width: 0; margin: 0; }
.shot__frame { position: relative; }
.shot__frame img {
  display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; object-position: var(--pos, 50% 0);
  border: 1px solid var(--line); border-radius: 2px; background: var(--white);
}
.shot .caption { margin: 8px 0 0; }
.pair__cap { grid-column: 1 / -1; margin: 0; }
.more-link { margin: 16px 0 0; }
.more-link a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; }
@media (min-width: 1024px) {
  .pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .pair { column-gap: 24px; }
}

/* /work: the client first and large (.feature--solo), then 9:16 tiles, 2 across on a phone and 4 from 1024; the Case
   Study Zero pair closes the grid on its own row, two square crops of the headlines with the caption beside them */
.feature--solo { margin-bottom: 32px; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 24px; align-items: start; }
.tiles > .pair { grid-column: 1 / -1; }
.pair--sq .shot__frame img { aspect-ratio: 1 / 1; }
@media (min-width: 1024px) {
  .feature--solo { margin-bottom: 64px; }
  .feature--solo .feature__main { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
  .feature--solo picture { grid-column: 1 / span 8; }
  .feature--solo .caption { grid-column: 9 / span 4; margin: 0; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
  .tiles > .pair { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
  .tiles > .pair > .pair__cap { grid-column: 3 / span 2; grid-row: 1; }
}

/* Price lines: name left, price right, both at body size in 800, a 14px condition under. Never tier cards. */
.plines { border-top: 1px solid var(--line); }
.pline {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline;
  min-height: 44px; padding: 10px 0; border-bottom: 1px solid var(--line);
}
.pline__name { font-weight: 800; }
.pline__name a { text-decoration: none; }
.pline__name a:hover { text-decoration: underline; }
.pline__price { font-weight: 800; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.pline__note { grid-column: 1 / -1; margin: 2px 0 0; max-width: 31em; font-size: var(--fs-small); line-height: 1.5; color: var(--steel); }
.lines { margin-top: 16px; }
.lines p { margin: 0 0 8px; color: var(--steel); }
.lines p:last-child { margin-bottom: 0; }
.lines a { color: var(--ink); }

/* Short rows: a title and one line (offer pages, About) */
.srows { border-top: 1px solid var(--line); }
.srow { padding: 16px 0; border-bottom: 1px solid var(--line); }
/* Numbered rows: the number is drawn by CSS (the <ol> carries the order), so it is never counted as copy */
.srows--num { counter-reset: srow; }
.srows--num > .srow { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 8px; }
.srows--num > .srow::before {
  counter-increment: srow; content: counter(srow);
  color: var(--steel); font-variant-numeric: tabular-nums; line-height: 1.25; font-size: var(--fs-h3);
}
.srow__t { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; }
.srow__b { margin: 4px 0 0; color: var(--steel); }
.after-list { margin: 16px 0 0; color: var(--steel); }
.after-list a { color: var(--ink); }
@media (min-width: 1024px) {
  .srows--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; border-top: 0; }
  .srows--two > .srow { border-top: 1px solid var(--line); border-bottom: 0; }
}

/* The five lanes on home: underlined ink links that wrap, with space between them (no dots in the copy) */
.lanelinks { margin-top: 32px; }
.lanelinks h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; }
.lanelinks ul { margin-top: 8px; line-height: 2; }
.lanelinks li { display: inline; margin-right: 24px; }
.lanelinks li:last-child { margin-right: 0; }
.lanelinks a { font-weight: 800; white-space: nowrap; }

/* A shorter section rhythm for the trimmed pages */
.sec--tight { padding-bottom: 48px; }
.sec--tight .sec__in { padding-top: 48px; }
@media (min-width: 1024px) { .sec--tight { padding-bottom: 96px; } .sec--tight .sec__in { padding-top: 96px; } }
.stackhead { display: grid; row-gap: 12px; margin-bottom: 24px; }
.stackhead p { margin: 0; color: var(--steel); }
@media (min-width: 1024px) { .stackhead { margin-bottom: 40px; } }

/* The night demonstration band (home): the real client portal on a phone, white type, no brass */
.demo { padding: 64px 0; }
.demo__grid { display: grid; row-gap: 32px; }
.demo__copy .lead { margin-top: 16px; color: var(--smoke); }
/* 200px on a phone (SITE-TRIM-SPEC 2.1 cut order: the home stays inside 5,064px with the portal right under the hero) */
.demo__media { justify-self: center; width: 200px; }
.demo__media .caption { color: var(--smoke); }
.demo__try { margin: 4px 0 0; }
.demo__try a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; color: var(--white); }
@media (min-width: 1024px) {
  .demo { padding: 128px 0; }
  .demo__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .demo__copy { grid-column: 1 / span 6; }
  .demo__media { grid-column: 8 / span 4; width: 300px; justify-self: start; }
}
/* No hairline after the night band: the band is the divider */
.demo + .sec .sec__in { border-top: 0; }

/* A muted looping phone video with its own pause control (PREMIUM-SPEC 3.3): 44 x 44, ink, 2px corners,
   white glyph, 12px in from the bottom right. Played by site.js only while half of it is in view. */
.vid { position: relative; }
.vid video { display: block; width: 100%; height: auto; aspect-ratio: 720 / 1558; border-radius: 2px; background: var(--white); }
.vid__ctl {
  position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; padding: 0; margin: 0;
  display: grid; place-items: center; border: 0; border-radius: 2px; background: var(--ink); cursor: pointer;
}
.vid__ctl svg { width: 16px; height: 16px; fill: var(--white); }
.vid__ctl .vid__play { display: none; }
.vid.is-paused .vid__ctl .vid__play { display: block; }
.vid.is-paused .vid__ctl .vid__pause { display: none; }
.on-night .vid__ctl:focus-visible { outline-color: var(--white); }

/* The work on home (judges, 2026-10-04): the one paying client first and large, a concept beside it.
   390: Explore Niagara 350 x 438 (4:5, its phone screen), then the concept as a 9:16 with its caption
   beside it at the image row size (128 wide). 1024+: Niagara's desktop screen in columns 1 to 8, the concept in 10 to 12 at the same height. */
.feature__h { margin-bottom: var(--to-content); }
.feature { display: grid; row-gap: 24px; }
.feature picture { display: block; }
.feature img { display: block; width: 100%; height: auto; object-fit: cover; object-position: 50% 0; border: 1px solid var(--line); border-radius: 2px; background: var(--white); }
.feature__main img { aspect-ratio: 4 / 5; }
.feature__side { display: grid; grid-template-columns: 128px minmax(0, 1fr); column-gap: 16px; align-items: end; }
.feature__side img { aspect-ratio: 9 / 16; }
.feature__side .caption { margin: 0; }
@media (min-width: 1024px) {
  .feature { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .feature__main { grid-column: 1 / span 8; }
  .feature__main img { aspect-ratio: 1690 / 1056; }
  .feature__side { grid-column: 10 / span 3; display: block; }
  .feature__side img { aspect-ratio: 4 / 7; }
  .feature__side .caption { margin-top: 12px; }
}

/* Jesse on home (the /vegas block, LANDING-SPEC 9.3): the portrait beside the name and the ink signature, one line
   under. 1024+: the portrait on the left rail, the name and the line on the content rail, bottoms level. */
.me { display: grid; grid-template-columns: 160px minmax(0, 1fr); column-gap: 20px; row-gap: 24px; align-items: end; }
.me__photo img { display: block; width: 160px; height: 200px; object-fit: cover; border-radius: 2px; }
.me__name { display: grid; row-gap: 12px; min-width: 0; align-content: end; }
.me__sig { width: 100%; max-width: 180px; height: auto; }
.me__line { grid-column: 1 / -1; }
.me__line, .closer .me__line { margin: 0; color: var(--ink); }
.me__line a { white-space: nowrap; }
/* Without the portrait (DL.PORTRAIT false) the name and the line stand alone */
.me:not(:has(.me__photo)) { grid-template-columns: minmax(0, 1fr); }
/* The closer under Jesse's block, in the same section: the space of a section, no second hairline */
.closer__end { margin-top: 48px; }
@media (min-width: 1024px) { .closer__end { margin-top: 96px; } }
@media (min-width: 1024px) {
  /* The first row takes the portrait's spare height, so the name sits low beside it and the line ends level with it */
  .me { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto; column-gap: 24px; row-gap: 24px; }
  .me__name { align-self: end; }
  .me__photo { grid-column: 1 / span 4; grid-row: 1 / span 2; align-self: end; }
  .me__photo img { width: 240px; height: 300px; }
  .me__name, .me__line { grid-column: 5 / span 8; }
  .me:not(:has(.me__photo)) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* Lane pages (judges, 2026-10-04): their H1s run long at 88px, so the image takes columns 9 to 12 and keeps clear
   of the headline */
@media (min-width: 1024px) { .phead--lane .phead__media { grid-column: 9 / span 4; } }

/* The door leaf over a hero slot (PREMIUM-SPEC 3.3), made by site.js, so without JavaScript nothing is covered */
.slot__frame > .door__leaf { border-radius: 2px; }

/* Closer (trimmed): H2, the button, Jesse's name */
.closer--short .h2 { max-width: 14em; }
.closer--short .btn-row { margin-top: 24px; }
.closer--short .sign { margin: 16px 0 0; color: var(--ink); }
.closer--short .closer__line { margin: 12px 0 0; color: var(--steel); }

/* /about: the portrait (a real photo of Jesse only, never a slot) and the ink signature */
.portrait { margin-top: 32px; max-width: 350px; }
.portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.signature { display: block; width: 180px; height: auto; margin-top: 24px; }
@media (min-width: 1024px) {
  .about-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .about-head__copy { grid-column: 1 / span 7; padding-top: 210px; }
  .about-head__media { grid-column: 8 / span 5; }
  .portrait { margin-top: 0; max-width: none; }
}

/* /prices: every promise word for word, in one closed disclosure (opens itself on /prices#promises) */
.allpromises { margin-top: 32px; }
.allpromises .faq__a { padding-top: 8px; }
.allpromises h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); margin: 32px 0 8px; }
.allpromises h3:first-child { margin-top: 0; }
.allpromises .plist__t { font-size: var(--fs-body); line-height: 1.6; letter-spacing: 0; }
.allpromises .plist > li { padding: 16px 0; }
.allpromises .plist p { max-width: 36em; }

/* /work Launches (2026-10-05): an example is the brand board, the three screens, one line and one button. Copy a whole
   .launch to add another. Never client work, so the line says it was built as a sample. */
.launches { scroll-margin-top: 16px; }
.launches__lead { margin-top: 16px; }
.launches__list { display: grid; row-gap: 56px; margin-top: 32px; }
.launch { display: grid; row-gap: 16px; align-items: start; }
.launch__board { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--line); border-radius: 2px; background: var(--white); }
.launch__screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; }
.launch__screens img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; border: 1px solid var(--line); border-radius: 2px; background: var(--white); }
.launch__name { margin-top: 8px; font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; }
.launch__line { margin-top: 6px; max-width: 28em; color: var(--steel); }
.launch .btn { margin-top: 24px; }
.launch__actions { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; row-gap: 4px; margin-top: 24px; }
.launch__actions .btn { margin-top: 0; }
@media (min-width: 600px) and (max-width: 899px) { .launch { max-width: 520px; } }
@media (min-width: 900px) {
  .launch { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; }
  .launch__board { grid-column: 1 / span 5; grid-row: 1 / span 2; }
  .launch__screens { grid-column: 7 / span 6; grid-row: 1; column-gap: 16px; }
  .launch__text { grid-column: 7 / span 6; grid-row: 2; align-self: start; }
  .launch__name { margin-top: 0; }
  .launch--plain .launch__screens, .launch--plain .launch__text { grid-column: 1 / span 6; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Home (2026-10-06): the Launch Build, said the way the Oriel pages say things.
   Every rule sits under .home or an hm- class (index.html only), so no other page moves.
   Cream ground, the site's ink and brass, one typeface (Overpass 400 for headings and text, 800 for the name, labels
   and buttons), hairlines, a lot of space. Phone first: designed at 390, checked 320 to 430. Brass is the door mark and
   the buttons only. Two ink bands: what you get, then the final ask running into the footer.
   ========================================================================== */
.home {
  --hm-cream: #F4EFE6;
  --hm-muted: #5F5A52;
  --hm-line: #DCD4C6;
  --hm-frame: rgba(22, 22, 22, 0.16);
  --hm-on-ink: rgba(244, 239, 230, 0.72);
  --hm-line-ink: rgba(244, 239, 230, 0.18);
  --hm-gutter: 20px;
  --hm-sec: 80px;
  background: var(--hm-cream);
  color: var(--ink);
  overflow-x: hidden;
}
@media (min-width: 900px) { .home { --hm-gutter: 40px; --hm-sec: 128px; } }
.home ::selection { background: var(--ink); color: var(--hm-cream); }
/* :where() keeps these at the global rules' weight, so every hm- class below can set its own margins and sizes */
:where(.home) p { max-width: none; margin: 0; }
:where(.home) h1, :where(.home) h2 { font-weight: 400; text-wrap: balance; max-width: none; }
:where(.home) h1 { font-size: clamp(38px, 10.6vw, 66px); line-height: 1.04; letter-spacing: -0.032em; }
:where(.home) h2 { font-size: clamp(32px, 8.8vw, 52px); line-height: 1.06; letter-spacing: -0.028em; }
.home .on-ink { background: var(--ink); color: var(--hm-cream); }
.home .on-ink :focus-visible { outline-color: var(--hm-cream); }

.hm-wrap { width: 100%; max-width: calc(560px + 2 * var(--hm-gutter)); margin: 0 auto; padding: 0 var(--hm-gutter); }
@media (min-width: 900px) { .hm-wrap { max-width: calc(1100px + 2 * var(--hm-gutter)); } }

.hm-label { font-size: 12px; line-height: 1.3; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hm-muted); }
.on-ink .hm-label { color: var(--hm-on-ink); }
.hm-label + h2 { margin-top: 12px; }
.hm-lede { margin-top: 12px; font-size: 18px; line-height: 1.45; color: var(--hm-muted); max-width: 30em; }
.on-ink .hm-lede { color: var(--hm-on-ink); }
.hm-cap { margin-top: 16px; font-size: 14px; line-height: 1.45; color: var(--hm-muted); text-align: center; }
.hm-cap--left { text-align: left; }

/* The button: brass, ink words, the same three words every time */
.hm-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 28px;
  font: 800 17px/1 var(--font); letter-spacing: 0; color: var(--ink); background: var(--brass);
  border: 0; border-radius: 2px; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms var(--ease);
}
.hm-btn:hover { background: var(--brass-hover); text-decoration: none; }
.hm-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.on-ink .hm-btn:focus-visible { outline-color: var(--hm-cream); }
@media (min-width: 600px) { .hm-btn { display: inline-flex; width: auto; } }

/* The door mark and the name */
.hm-mark { width: auto; height: 20px; fill: var(--brass); flex: none; }
.hm-brand {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; text-decoration: none;
  font-size: 17px; font-weight: 800; line-height: 1; letter-spacing: -0.01em; white-space: nowrap;
}
.hm-brand:hover { text-decoration: none; }
.hm-brand__word { padding-top: 0.14em; }

/* Header: the mark, the name, Work, The offer, About. A disclosure on phones, three links from 600px. */
.hm-head { position: relative; z-index: 30; border-bottom: 1px solid var(--hm-line); background: var(--hm-cream); }
.hm-head__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.hm-nav { display: none; }
.hm-nav a, .hm-menu__panel a { text-decoration: none; }
.hm-nav a:hover, .hm-menu__panel a:hover { text-decoration: underline; }
.hm-menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: flex-end;
  min-height: 44px; min-width: 64px; font-size: 16px; line-height: 1; -webkit-tap-highlight-color: transparent;
}
.hm-menu > summary::-webkit-details-marker { display: none; }
.hm-menu__close { display: none; }
.hm-menu[open] .hm-menu__open { display: none; }
.hm-menu[open] .hm-menu__close { display: inline; }
.hm-menu:not([open]) .hm-menu__panel { display: none; }
.hm-menu__panel {
  position: absolute; left: 0; right: 0; top: 100%; padding: 8px var(--hm-gutter) 32px;
  background: var(--hm-cream); border-bottom: 1px solid var(--hm-line);
}
.hm-menu__panel a {
  display: flex; align-items: center; min-height: 60px; border-bottom: 1px solid var(--hm-line);
  font-size: 24px; letter-spacing: -0.015em;
}
.hm-menu__panel a:last-child { border-bottom: 0; }
@media (min-width: 600px) {
  .hm-nav { display: flex; gap: 28px; }
  .hm-nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 16px; line-height: 1; }
  .hm-menu { display: none; }
}

/* Hero: the hook, the line, the button, then the Oriel launch page on a phone */
.hm-hero { padding: 28px 0 0; }
.hm-sub { margin-top: 16px; font-size: 19px; line-height: 1.45; color: var(--hm-muted); max-width: 28em; text-wrap: pretty; }
.hm-hero .hm-btn { margin-top: 28px; }
.hm-phone { width: 264px; margin: 48px auto 0; }
.hm-phone__body { padding: 8px; background: var(--ink); border-radius: 40px; }
.hm-phone__body img { width: 100%; height: auto; aspect-ratio: 780 / 1688; border-radius: 32px; background: var(--hm-cream); }
@media (prefers-reduced-motion: no-preference) {
  .hm-phone__body { animation: hm-float 7s ease-in-out infinite; }
}
@keyframes hm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (min-width: 900px) {
  .hm-hero { padding-top: 72px; }
  .hm-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: center; }
  .hm-hero h1 { max-width: 11em; }
  .hm-phone { width: 316px; margin: 0 auto; }
}

/* Sections: one job each, 80px apart on phones, 128px from 900 */
.hm-sec { padding-top: var(--hm-sec); }

/* The three pieces: tall cards, each one a link to its demo */
.hm-cards { display: grid; row-gap: 48px; margin-top: 32px; }
.hm-card { display: block; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.hm-card:hover { text-decoration: none; }
.hm-card__img { position: relative; display: block; overflow: hidden; border-radius: 2px; background: #E9E2D5; }
.hm-card__img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--hm-frame); pointer-events: none; }
.hm-card__img picture { display: block; }
.hm-card__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
/* The launch card shows the three swap stills one above the other, so its picture is taller than the other two */
.hm-card--tall .hm-card__img img { aspect-ratio: 780 / 1636; }
.hm-card__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.hm-card__t { font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; }
.hm-card__b { display: block; margin-top: 6px; font-size: 17px; line-height: 1.45; color: var(--hm-muted); }
.hm-arrow { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease); }
.hm-card:hover .hm-arrow { transform: translateX(3px); }
.hm-card:hover .hm-card__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.hm-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
@media (min-width: 600px) and (max-width: 899px) { .hm-cards { max-width: 440px; } }
@media (min-width: 900px) {
  .hm-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; margin-top: 48px; align-items: start; }
}

/* How it works: three numbered hairline rows */
.hm-steps { margin-top: 28px; border-bottom: 1px solid var(--hm-line); }
.hm-steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: baseline; padding: 20px 0 22px; border-top: 1px solid var(--hm-line); }
.hm-n { font-size: 40px; line-height: 0.9; letter-spacing: -0.03em; }
.hm-steps p { font-size: 21px; line-height: 1.3; letter-spacing: -0.01em; text-wrap: pretty; }
.hm-steps + .hm-btn { margin-top: 32px; }
@media (min-width: 900px) { .hm-steps { max-width: 760px; } }

/* What you get: the first ink band, plain rows with hairlines */
.hm-get { margin-top: var(--hm-sec); padding: 72px 0 80px; }
.hm-rows { margin-top: 32px; border-bottom: 1px solid var(--hm-line-ink); }
.hm-rows li { padding: 16px 0 18px; border-top: 1px solid var(--hm-line-ink); }
.hm-row__t { display: block; font-size: 21px; line-height: 1.3; letter-spacing: -0.01em; }
.hm-row__b { display: block; margin-top: 4px; font-size: 16px; line-height: 1.45; color: var(--hm-on-ink); }
.hm-rows .hm-label { display: block; margin-bottom: 6px; }
.hm-row--note .hm-row__b { margin-top: 0; font-size: 17px; color: var(--hm-cream); }
@media (min-width: 900px) {
  .hm-get { padding: 112px 0 120px; }
  .hm-get__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: start; }
  .hm-rows { margin-top: 0; }
}

/* Work: the two launches I built. Each is a picture over its name and hairline link rows (the picture opens the launch
   page and is skipped by keyboards and screen readers, the first row does the same job). Then the NDA line and one quiet link. */
.hm-works { display: grid; row-gap: 56px; margin-top: 32px; }
.hm-work__t { margin-top: 16px; font-size: 24px; line-height: 1.2; font-weight: 400; letter-spacing: -0.015em; }
.hm-links { margin-top: 12px; border-bottom: 1px solid var(--hm-line); }
.hm-links li { border-top: 1px solid var(--hm-line); }
.hm-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px;
  color: inherit; font-size: 18px; line-height: 1.3; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.hm-links a:hover { text-decoration: none; }
.hm-links a:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.hm-links a:hover .hm-arrow { transform: translateX(3px); }
.hm-links a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.hm-more {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 8px; color: inherit;
  font-size: 17px; line-height: 1.3; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em;
  -webkit-tap-highlight-color: transparent;
}
.hm-more:hover { text-decoration-thickness: 2px; }
.hm-more:hover .hm-arrow { transform: translateX(3px); }
.hm-more:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (min-width: 600px) and (max-width: 899px) { .hm-works { max-width: 440px; } }
@media (min-width: 900px) {
  .hm-works { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; max-width: 724px; margin-top: 48px; align-items: start; }
}

/* About: three lines */
.hm-about__mark { height: 26px; margin-bottom: 20px; }
.hm-say { margin-top: 16px; font-size: 24px; line-height: 1.3; letter-spacing: -0.015em; color: var(--hm-muted); max-width: 22em; text-wrap: pretty; }
.hm-say--ink { color: var(--ink); }
@media (min-width: 900px) { .hm-say { font-size: 30px; } }

/* Final ask: the second ink band, then the footer on the same ink */
.hm-final { margin-top: var(--hm-sec); padding: 80px 0 72px; }
.hm-final .hm-btn { margin-top: 28px; }
@media (min-width: 900px) { .hm-final { padding: 128px 0 112px; } .hm-final h2 { max-width: 14em; } }
.hm-foot { padding: 0 0 calc(24px + env(safe-area-inset-bottom)); }
.hm-foot__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.hm-foot__bar::before { content: ""; flex: 0 0 100%; height: 0; border-top: 1px solid var(--hm-line-ink); margin-bottom: 16px; }
.hm-foot__legal { display: flex; align-items: center; gap: 20px; font-size: 14px; color: var(--hm-on-ink); }
.hm-foot__legal a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--hm-cream); }

/* Blocks rise 10px and fade in once as they enter (home.js adds .hm-rise-on). Nothing moves under reduced motion. */
.hm-rise-on [data-rise] { opacity: 0; transform: translateY(10px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.hm-rise-on [data-rise].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hm-rise-on [data-rise] { opacity: 1; transform: none; transition: none; }
  .hm-phone__body { animation: none; }
}