/* Lupinn Industrial Inc. — "Title Block". One stylesheet for every page.
   The site borrows an engineering drawing's language: the blueprint sheet, the title block, general notes, details
   and callouts. The drawings in /images/ are line art on a clear ground, so each sits on the page's own grid. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"), url("/fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --print: #3A3A3A;
  --print-deep: #2F5D3A;
  --print-ink: #FFFFFF;
  --print-soft: #B5B5B5;
  --print-grid: rgb(255 255 255 / 0.055);
  --print-rule: rgb(255 255 255 / 0.28);
  --paper: #B5B5B5;
  --paper-2: #FFFFFF;
  --white: #FFFFFF;
  --ink: #3A3A3A;
  --ink-2: #3A3A3A;
  --hair: #B5B5B5;
  --grid: rgb(47 93 58 / 0.065);
  --redline: #2F5D3A;
  --redline-light: #8FBF9A; /* the green on charcoal, where the dark green would disappear; as in the drawings */
  --redline-ink: #3A3A3A;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --wrap: 76rem;
  --frame: 1.5px solid var(--ink);
  /* The design kit's names, which its hero rules below read. */
  --bg: var(--paper);
  --band: var(--print);
  --band-ink: var(--print-ink);
  --line: var(--hair);
  --radius-image: 0px;
}

/* ── Base ─────────────────────────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; font-stretch: 100%;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
h1, h2, h3 { margin: 0; font-family: var(--sans); font-stretch: 116%; font-weight: 760; line-height: 1.04; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 4.6vw + 1rem, 4.4rem); }
h2 { font-size: clamp(1.9rem, 2.6vw + 1rem, 3.05rem); }
h3 { font-size: 1.22rem; font-stretch: 110%; line-height: 1.2; letter-spacing: -0.005em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
:focus-visible { outline: 3px solid var(--redline); outline-offset: 3px; }
.hero :focus-visible, .section--print :focus-visible, .site-footer :focus-visible { outline-color: var(--redline-light); }
.skip { position: absolute; left: -999px; top: 0.75rem; z-index: 100; padding: 0.6rem 1rem; background: var(--white); color: var(--ink); font-family: var(--mono); }
.skip:focus { left: 0.75rem; }

/* A label in the drawing's lettering: mono capitals after a redline square. */
.eyebrow {
  display: flex; align-items: center; gap: 0.65rem; margin: 0 0 1.1rem;
  font-family: var(--mono); font-size: 0.76rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.13em; text-transform: uppercase;
}
.eyebrow::before { content: ""; flex: none; width: 0.62rem; height: 0.62rem; background: var(--redline); }
.lede { max-width: 38rem; margin-top: 1.1rem; font-size: clamp(1.06rem, 0.35vw + 1rem, 1.24rem); line-height: 1.55; color: var(--ink-2); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; min-height: 3.1rem; padding: 0.8rem 1.35rem;
  font-family: var(--mono); font-size: 0.86rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none;
  color: var(--white); background: var(--redline); border: 2px solid var(--redline); border-radius: 0; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.button::after { content: "→"; font-family: var(--sans); font-size: 1.05rem; line-height: 1; transition: transform 0.15s ease; }
.button:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.button:hover::after { transform: translateX(3px); }
.button--ghost { color: inherit; background: transparent; border-color: currentColor; }
.button--ghost::after { content: none; }
.button--ghost:hover { background: var(--white); border-color: var(--white); color: var(--print); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ── Header ───────────────────────────────────────────────────────────────────────────────────────────── */

.site-header { position: relative; z-index: 20; background: var(--paper); border-bottom: var(--frame); }
/* A scale rule along the header's foot, as on a drawing's border. */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; pointer-events: none; opacity: 0.4;
  background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 12px);
}
.header-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; min-height: 4.6rem; padding-block: 0.6rem 0.8rem; }
.wordmark { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--ink); text-decoration: none; }
.wordmark__mark { flex: none; width: auto; height: 2.9rem; }
.wordmark__text { display: flex; flex-direction: column; line-height: 1; }
.wordmark__name { font-size: 1.36rem; font-stretch: 125%; font-weight: 820; letter-spacing: 0.03em; text-transform: uppercase; }
.wordmark__rest { margin-top: 0.32rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-2); }
.nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.75rem; }
.nav a { display: inline-block; padding: 0.35rem 0; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--redline); }
.nav a.nav__quote { padding: 0.7rem 1.05rem; color: var(--white); background: var(--ink); border: 0; }
.nav a.nav__quote:hover, .nav a.nav__quote[aria-current="page"] { color: var(--white); background: var(--redline); }
@media (min-width: 700px) {
  .site-header { position: sticky; top: 0; }
}
@media (max-width: 699px) {
  .header-bar { flex-wrap: wrap; min-height: 0; padding-block: 0.75rem 0.85rem; }
  .wordmark__name { font-size: 1.22rem; }
  .nav { width: 100%; }
  .nav ul { justify-content: space-between; gap: 0.4rem 0.75rem; }
  .nav a { font-size: 0.72rem; letter-spacing: 0.07em; }
  .nav a.nav__quote { padding: 0.5rem 0.7rem; }
}

/* ── The design kit's hero (templates/design-kit/base.css, copied whole so Hero Studio and the app's Hero style
   can measure and change it; this design's own rules for it follow) ─────────────────────────────────────── */

/* Every hero is one Hero Studio, the Zibby app's camera, can film for (docs/hero-studio.md): a box with one shape per
   width band, set by aspect-ratio and never by the window's height (3:5 below 700px, 3:2 from 700px, 16:7 from
   1100px), its photo (or, once the owner films one, its video) filling it under a flat tint, and the words over it.
   The app measures the box at 390, 820 and 1280px and draws the words over the camera where they are on the page,
   so a design keeps these shapes and the data-hero marks; its own rules may restyle everything else. */
.hero[data-hero-studio] {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 3 / 5; padding-block: 0; color: #fff; background: var(--band);
}
.hero[data-hero-studio]::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hero-tint, rgb(0 0 0 / 0.45)); }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img, .hero__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 50%; border: 0; border-radius: 0; box-shadow: none; background: var(--band);
}
.hero__media video { opacity: 0; transition: opacity 0.6s ease; }
.hero__media video.is-showing { opacity: 1; }
.hero__text { padding-block: 1.25rem 1.75rem; text-shadow: 0 1px 10px rgb(0 0 0 / 0.3); }
.hero__text > * { max-width: 34rem; }
.hero__text h1 { font-size: calc(clamp(2.1rem, 3.4vw + 1.2rem, 4rem) * var(--display-scale, 1)); line-height: 1.04; }
.hero .lede { margin-top: 0.9rem; color: inherit; }
.hero .eyebrow { color: inherit; }
.hero .actions { margin-top: 1.4rem; }
.hero .button--ghost { color: inherit; }
/* The pause button: shown only while a video can play, by the script that comes with the video. */
.hero__pause {
  position: absolute; right: 1rem; bottom: 1.75rem; width: 3rem; height: 3rem; padding: 0; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer; border: 2px solid rgb(255 255 255 / 0.85); background: rgb(0 0 0 / 0.5); color: #fff;
}
.hero__pause[hidden] { display: none; }
.hero__pause svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.hero__pause [data-icon="play"], .hero__pause[data-state="paused"] [data-icon="pause"] { display: none; }
.hero__pause[data-state="paused"] [data-icon="play"] { display: block; }

/* Split: the words on a plain panel, below the photo on a phone and beside it from 700px. */
.hero.hero--split { --hero-tint: rgb(0 0 0 / 0); color: var(--ink); }
.hero--split .hero__panel { background: var(--bg); }
.hero--split .hero__text { width: min(100% - 2 * var(--gutter, 1.25rem), 34rem); margin-inline: auto; padding-block: 1.5rem 1.75rem; text-shadow: none; }

/* Type only: no photo, the band's colour until the owner films a video for it. */
.hero.hero--type { --hero-tint: rgb(0 0 0 / 0.3); color: var(--band-ink); justify-content: center; }
.hero--type .hero__facts { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / 0.25); }
.hero--type .hero__facts li { display: flex; flex-direction: column; font-size: 0.95rem; }
.hero--type .hero__facts strong { font-size: 1.05rem; }

/* Split and type-only carry more words than the photo hero, in the same box: their headlines are a size smaller. */
.hero--split .hero__text h1, .hero--type .hero__text h1 { font-size: calc(clamp(1.9rem, 2.6vw + 1.1rem, 3.3rem) * var(--display-scale, 1)); }

@media (min-width: 700px) {
  .hero[data-hero-studio] { aspect-ratio: 3 / 2; justify-content: center; }
  .hero__text { padding-block: 1.5rem; }
  .hero__text > * { max-width: 30rem; }
  .hero__pause { right: 1.5rem; bottom: 1.5rem; }
  .hero--split .hero__panel { position: absolute; inset: 0 44% 0 0; display: flex; align-items: center; }
  .hero--split .hero__text { width: auto; margin: 0; padding: 1.5rem clamp(1.5rem, 4vw, 4rem); }
  .hero--split .lede, .hero--type .lede { font-size: 1rem; }
}
@media (min-width: 1100px) {
  .hero[data-hero-studio] { aspect-ratio: 16 / 7; }
  .hero__text > * { max-width: 38rem; }
  .hero__text h1 { font-size: calc(clamp(2.4rem, 2vw + 1.6rem, 3.6rem) * var(--display-scale, 1)); }
  .hero--split .hero__text h1, .hero--type .hero__text h1 { font-size: calc(clamp(2.2rem, 1.6vw + 1.5rem, 3.2rem) * var(--display-scale, 1)); }
  .hero--type .hero__facts { margin-top: 1rem; }
}

/* Video-first heroes (docs/decisions/0214-video-first-hero-variants.md). Each keeps the Hero Studio box above; what
   changes is where the words sit, the tint, and for two of them, the media box: the video fills .hero__media, which
   the app measures too (its mediaArea) and frames footage for, so keep its shape when restyling. */

/* A short row of true facts under the button (hours, a rating, the phone number). Counted as words by the app. */
.hero__strip { display: flex; flex-wrap: wrap; gap: 0.3rem 1.25rem; margin-top: 1rem; padding: 0; list-style: none; font-size: 0.95rem; }
.hero__strip li { margin: 0; }
.hero__strip li + li::before { content: "·"; margin-right: 1.25rem; opacity: 0.7; }

/* Cinematic: the words low on the left at every width, under a fade rising from the bottom instead of a flat tint, so
   the top of the picture stays bright. The app reads the fade from --hero-scrim (its colour and strength) and
   --hero-scrim-reach (how far up, as a fraction of the box): change those, not the gradient. */
.hero.hero--cinematic { --hero-scrim: rgb(0 0 0 / 0.72); --hero-scrim-reach: 0.7; justify-content: flex-end; }
.hero.hero--cinematic::before { background: linear-gradient(to top, var(--hero-scrim) 0%, var(--hero-scrim) 12%, transparent calc(var(--hero-scrim-reach) * 100%)); }
.hero--cinematic .hero__text { padding-block-end: 2rem; }

/* Centre stage: one statement centred under a stronger tint; low on a phone, so the subject has the top. */
.hero.hero--center { --hero-tint: rgb(0 0 0 / 0.5); text-align: center; }
.hero--center .hero__text { display: flex; flex-direction: column; align-items: center; }
.hero--center .actions, .hero--center .hero__strip { justify-content: center; }

/* Split, framed: the split hero with the picture seen through a rounded window on the page's background. The video
   still fills the box (the frame only clips it), so Hero Studio frames it exactly as it does the split. */
.hero.hero--inset { background: var(--bg); }
.hero--inset .hero__media { clip-path: inset(0.75rem 0.75rem 0 0.75rem round var(--radius-image)); }

/* Portrait card: an upright 9:16 card for phone-shot footage on the page's background beside the words, from 700px.
   On a phone the footage is upright already, so it fills the hero under a fade, as the cinematic hero does. From
   700px the card is the media box: the app films for its shape. */
.hero.hero--card { --hero-scrim: rgb(0 0 0 / 0.7); --hero-scrim-reach: 0.65; justify-content: flex-end; }
.hero.hero--card::before { background: linear-gradient(to top, var(--hero-scrim) 0%, var(--hero-scrim) 12%, transparent calc(var(--hero-scrim-reach) * 100%)); }

/* Type, then picture: the words on the band colour with the picture in a strip under them, taking the room the
   words leave, so it can never run under them. The strip is the media box: the app films for its shape. */
.hero.hero--strip { --hero-tint: transparent; color: var(--band-ink); justify-content: flex-start; }
.hero--strip .hero__text { flex: none; text-shadow: none; padding-block: 1.25rem 0; }
.hero--strip .hero__text h1 { font-size: calc(clamp(1.9rem, 2.6vw + 1.1rem, 3.3rem) * var(--display-scale, 1)); }
.hero--strip .hero__media { position: relative; inset: auto; order: 2; flex: 1 1 0; min-height: 0; margin-top: 1.25rem; }
.hero--strip .hero__pause { bottom: 1rem; }

@media (min-width: 700px) {
  .hero.hero--cinematic { justify-content: flex-end; }
  .hero--cinematic .hero__text { padding-block-end: 2.5rem; }
  .hero.hero--center { justify-content: center; }
  .hero--inset .hero__media { clip-path: inset(1.25rem 1.25rem 1.25rem 57.5% round var(--radius-image)); }
  .hero.hero--card { background: var(--bg); color: var(--ink); justify-content: center; }
  .hero.hero--card::before { background: none; }
  .hero--card .hero__text { width: 58%; margin: 0; padding: 1.5rem clamp(1.5rem, 4vw, 4rem); text-shadow: none; }
  .hero--card .hero__text h1 { font-size: calc(clamp(1.8rem, 2.4vw + 1.1rem, 3.1rem) * var(--display-scale, 1)); }
  .hero--card .hero__media {
    inset: 6% 8% auto auto; height: 88%; aspect-ratio: 9 / 16;
    overflow: hidden; border-radius: var(--radius-image); box-shadow: 0 1.25rem 2.5rem rgb(0 0 0 / 0.18);
  }
  .hero--card .hero__pause { right: calc(8% + 0.75rem); bottom: calc(6% + 0.75rem); }
  /* The words in two columns, the headline's and the rest, so the strip keeps a useful height. */
  .hero.hero--strip { justify-content: flex-start; }
  .hero--strip .hero__text { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(1.5rem, 4vw, 3.5rem); padding-block: 1.5rem 0; }
  .hero--strip .hero__text > * { max-width: none; margin: 0; }
  .hero--strip .eyebrow { grid-column: 1; grid-row: 1; align-self: end; }
  .hero--strip .hero__text h1 { grid-column: 1; grid-row: 2; }
  .hero--strip .lede { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .hero--strip .actions { grid-column: 2; grid-row: 3; margin-top: 1rem; }
}
@media (min-width: 1100px) {
  .hero--card .hero__text { width: 60%; }
  .hero--card .hero__media { right: 10%; }
  .hero--card .hero__pause { right: calc(10% + 0.75rem); }
  .hero--strip .hero__text h1 { font-size: calc(clamp(2rem, 1.4vw + 1.4rem, 2.9rem) * var(--display-scale, 1)); }
}


/* ── This design's hero ───────────────────────────────────────────────────────────────────────────────── */

/* The kit's split hero, kept to its shapes and marks above, drawn as one blueprint sheet: the words on a panel of
   the drawing's own blue and grid, the drawing (or the owner's video) beside them, above them on a phone. */
.blueprint-grid {
  background-color: var(--print);
  background-image: linear-gradient(var(--print-grid) 1px, transparent 1px), linear-gradient(90deg, var(--print-grid) 1px, transparent 1px);
  background-size: 22px 22px;
}
/* One grid under the whole hero, so the drawing's lines sit on the same squares as the words. */
.hero.hero--split {
  color: var(--print-ink);
  background-color: var(--print);
  background-image: linear-gradient(var(--print-grid) 1px, transparent 1px), linear-gradient(90deg, var(--print-grid) 1px, transparent 1px);
  background-size: 22px 22px;
}
.hero--split .hero__panel { background: transparent; border-top: 1px solid var(--print-rule); }
/* The drawing is line art on a clear ground, kept whole above the words on a phone and beside them from 700px.
   The owner's video, when there is one, still fills the whole media box. */
.hero--split .hero__media img {
  inset: 0 0 auto 0; width: 100%; height: 39%; padding: 1rem var(--gutter) 0.75rem; box-sizing: border-box;
  object-fit: contain; object-position: 50% 100%; background: transparent;
}
/* The words' panel is a fixed block at the hero's foot while the hero grows with the width, so the room above it
   grows too: the drawing takes that room, sitting on the words. */
@media (min-width: 420px) and (max-width: 699px) { .hero--split .hero__media img { height: 54%; } }
@media (min-width: 500px) and (max-width: 699px) { .hero--split .hero__media img { height: 64%; } }
@media (min-width: 560px) and (max-width: 699px) { .hero--split .hero__media img { height: 71%; } }
.hero--split .hero__text { padding-block: 1.6rem 1.9rem; }
.hero--split .hero__text h1 { font-stretch: 112%; font-weight: 780; letter-spacing: -0.02em; }
.hero .eyebrow { margin-bottom: 1rem; color: var(--print-soft); }
.hero .lede { color: var(--print-soft); }
.hero .button--ghost:hover { color: var(--print); }
@media (max-width: 699px) {
  .hero .eyebrow { font-size: 0.7rem; letter-spacing: 0.06em; }
}
@media (min-width: 700px) {
  .hero--split .hero__panel { border-top: 0; border-right: 1px solid var(--print-rule); }
  .hero--split .hero__media img { inset: 0 0 0 auto; width: 44%; height: 100%; padding: clamp(1.25rem, 3vw, 2.75rem); object-position: 50% 50%; }
  .hero--split .hero__text { padding-block: 1.5rem; }
}

/* ── Sections ─────────────────────────────────────────────────────────────────────────────────────────── */

.section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
/* Residential follows straight on from the four kinds of industrial work, and its detail carries on their lettering. */
.residential-work { padding-top: 0; }
.residential-work .details { counter-reset: detail 4; }
.section--grid {
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.section--print { color: var(--print-ink); }
.section--print .eyebrow, .section--print .lede { color: var(--print-soft); }
.section--print .eyebrow::before, .hero .eyebrow::before { background: var(--redline-light); }
.section--print .button:not(.button--ghost), .hero .button:not(.button--ghost) { color: var(--ink); background: var(--white); border-color: var(--white); }
.section--print .button:not(.button--ghost):hover, .hero .button:not(.button--ghost):hover { color: var(--white); background: var(--redline); border-color: var(--redline); }
.section-head { max-width: 47rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }

/* A drawing's title block: a ruled table. Its cells are drawn by their own right and bottom rules against the
   block's top and left, so a cell added or taken away never leaves a gap in the frame. */
.titleblock { background: var(--paper); border-top: var(--frame); border-left: var(--frame); }
.titleblock > .titleblock__label, .titleblock > .site-form, .notes__head, .note, .checklist li { border-right: var(--frame); border-bottom: var(--frame); }
.titleblock__label {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 1.2rem;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white); background: var(--ink);
}

/* General notes, under the hero. */
.notes { padding-block: clamp(2.25rem, 5vw, 3.75rem); background: var(--paper); }
.notes .titleblock { display: grid; grid-template-columns: minmax(0, 1fr); }
.notes__head { padding: 1.3rem 1.3rem 1.4rem; background: var(--paper-2); }
.notes__head .titleblock__label { display: inline-flex; align-self: flex-start; margin: 0 0 0.9rem; padding: 0.35rem 0.6rem; border: 0; }
.notes__head h2 { font-size: clamp(1.35rem, 1vw + 1rem, 1.7rem); font-stretch: 112%; line-height: 1.12; }
.notes__list { display: grid; grid-template-columns: minmax(0, 1fr); counter-reset: note; border: 0; }
@media (min-width: 600px) { .notes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.note { counter-increment: note; padding: 1.25rem 1.3rem 1.4rem; }
.note::before { content: "Note " counter(note, decimal-leading-zero); display: block; margin-bottom: 0.6rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--redline-ink); }
.note p { font-size: 1.04rem; font-weight: 560; font-stretch: 104%; line-height: 1.38; }
@media (min-width: 1000px) {
  .notes .titleblock { grid-template-columns: minmax(15rem, 1fr) minmax(0, 3.4fr); }
  .notes__head { display: flex; flex-direction: column; justify-content: space-between; }
  .notes__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}

/* What we take on: each kind of work a drawing's detail, lettered in order. */
.details { display: grid; grid-template-columns: minmax(0, 1fr); border-top: var(--frame); border-left: var(--frame); counter-reset: detail; }
@media (min-width: 600px) { .details { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .details { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.detail {
  position: relative; display: flex; flex-direction: column; gap: 0.7rem; padding: 1.35rem 1.4rem 1.5rem;
  background: var(--paper); border-right: var(--frame); border-bottom: var(--frame); counter-increment: detail;
  transition: background-color 0.15s ease;
}
.detail::before { content: "Detail " counter(detail, upper-alpha); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.detail:hover { background: var(--white); }
.detail__icon { width: 3.25rem; height: 3.25rem; margin-block: 0.35rem 0.4rem; color: var(--print); }
.detail p { color: var(--ink-2); }
.detail__list { display: grid; gap: 0.2rem; margin: 0.1rem 0; padding-left: 1.15rem; list-style: disc; color: var(--ink-2); }
.detail__list li { padding-left: 0.1rem; }
.capabilities { margin-top: clamp(2rem, 4vw, 3rem); }
.capabilities__text { padding: 1rem 1.2rem; color: var(--ink-2); background: var(--paper); border-right: var(--frame); border-bottom: var(--frame); }
/* About: the founder as one ruled block, the portrait in a cell of its own beside the words. */
.profile { display: grid; grid-template-columns: minmax(0, 1fr); }
.profile .titleblock__label { grid-column: 1 / -1; }
.career-portrait { margin: 0; padding: 1.2rem; background: var(--paper-2); border-right: var(--frame); border-bottom: var(--frame); }
.career-portrait img { width: 12rem; max-width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--ink); }
.profile__text { padding: 1.3rem 1.4rem 1.5rem; max-width: none; font-size: 1.08rem; line-height: 1.65; color: var(--ink-2); background: var(--paper); border-right: var(--frame); border-bottom: var(--frame); }
@media (min-width: 720px) {
  .profile { grid-template-columns: auto minmax(0, 1fr); }
  .profile__text { align-self: stretch; display: flex; align-items: center; }
}
.detail__link {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.6rem; align-self: flex-start;
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none;
  border-bottom: 2px solid var(--redline);
}
.detail__link::after { content: "→"; font-family: var(--sans); color: var(--redline-ink); transition: transform 0.15s ease; }
.detail__link:hover::after { transform: translateX(3px); }

/* How a job runs: a blueprint band, the building section as its plate, the steps as numbered callouts. The plate is
   line art on a clear ground, so the band's own grid runs through it. */
.plate { width: min(100% - 2 * var(--gutter), 84rem); margin: 0 auto clamp(2rem, 4vw, 3rem); }
.plate img { width: 100%; }
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem clamp(1.5rem, 3vw, 2.5rem); counter-reset: step; }
.step { position: relative; counter-increment: step; padding-top: 4.1rem; }
@media (min-width: 600px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.step::before {
  content: counter(step); position: absolute; top: 0; left: 0; z-index: 1; width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  font-family: var(--mono); font-size: 0.95rem; font-weight: 600; color: var(--print-ink); background: var(--print);
  border: 1.5px solid var(--print-ink); border-radius: 50%;
}
/* The leader from each callout towards the next. */
.step::after { content: ""; position: absolute; top: 1.375rem; left: 3.4rem; right: 0.5rem; border-top: 1px dashed var(--print-rule); }
.step:last-child::after { content: none; }
@media (min-width: 600px) and (max-width: 999px) { .step:nth-child(even)::after { content: none; } }
@media (max-width: 599px) {
  .step { padding: 0.35rem 0 0 4rem; min-height: 2.75rem; }
  .step::after { top: 3.25rem; bottom: -1.75rem; left: 1.375rem; right: auto; border-top: 0; border-left: 1px dashed var(--print-rule); }
}
.step h3 { margin-bottom: 0.55rem; }
.step p { color: var(--print-soft); }

/* Request a quote, at the foot of the home page. */
.cta__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.cta h2 { font-size: clamp(2.2rem, 3.8vw + 1rem, 4rem); }
.cta .actions { margin-top: 1.75rem; }
@media (min-width: 900px) { .cta__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }

.checklist { display: grid; }
.checklist li { display: grid; grid-template-columns: minmax(5.5rem, 7.5rem) minmax(0, 1fr); background: var(--paper); }
.checklist li > * { padding: 0.95rem 1.1rem; }
.checklist strong { font-family: var(--mono); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border-right: var(--frame); background: var(--paper-2); }
.checklist span { color: var(--ink-2); }

/* ── Footer ───────────────────────────────────────────────────────────────────────────────────────────── */

.site-footer { padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem; color: #B5B5B5; background: var(--ink); }
.site-footer a { color: var(--white); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgb(255 255 255 / 0.16); }
.wordmark--footer { color: var(--white); }
.wordmark--footer .wordmark__rest { color: #B5B5B5; }
.footer-brand p { margin-top: 1.1rem; max-width: 22rem; color: #B5B5B5; }
.footer-label { margin-bottom: 0.9rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: #B5B5B5; }
.footer-links { display: grid; gap: 0.55rem; }
.footer-links a { text-decoration: none; border-bottom: 1px solid transparent; }
.footer-links a:hover { border-bottom-color: var(--redline); }
.footer-start p { margin-bottom: 1.1rem; color: #B5B5B5; max-width: 20rem; }
.footer-base { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; padding-top: 1.4rem; font-size: 0.86rem; color: #B5B5B5; }
.footer-base a { color: #B5B5B5; }
.proposal-note { flex-basis: 100%; }
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr); }
}

/* ── Request a quote ──────────────────────────────────────────────────────────────────────────────────── */

.page-head { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.75rem, 6vw, 4.5rem); border-bottom: 1px solid var(--print-rule); }
.page-head h1 { font-size: clamp(2.3rem, 4vw + 1rem, 4rem); font-stretch: 112%; max-width: 15ch; }
.quote-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (min-width: 980px) { .quote-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
.titleblock--form { background: var(--white); }
@media (max-width: 559px) { .titleblock--form .titleblock__label span + span { display: none; } }
.quote-aside { display: grid; gap: clamp(2rem, 4vw, 2.75rem); }
.next h2 { font-size: 1.5rem; margin-bottom: 1.1rem; }
.next ol { counter-reset: next; display: grid; gap: 0.9rem; }
.next li { counter-increment: next; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.9rem; align-items: baseline; color: var(--ink-2); }
.next li::before {
  content: counter(next); width: 2.25rem; height: 2.25rem; display: grid; place-items: center; align-self: start;
  font-family: var(--mono); font-size: 0.82rem; font-weight: 600; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 50%;
}
.next li p { padding-top: 0.3rem; }

/* The contact form (templates/site-form), drawn as the title block's fields. */
.site-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.15rem; padding: clamp(1.25rem, 3vw, 2rem); border: 0; }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.15rem; }
@media (min-width: 560px) { .form-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site-form label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem; font-family: var(--mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.site-form .req { margin-left: 0.35rem; font-weight: 400; letter-spacing: 0.06em; color: var(--redline-ink); }
.site-form input, .site-form select, .site-form textarea {
  width: 100%; min-height: 3.1rem; padding: 0.75rem 0.85rem; margin: 0;
  font: 400 1rem/1.45 var(--sans); font-stretch: 100%; letter-spacing: 0; text-transform: none;
  color: var(--ink); background: var(--white); border: 1.5px solid var(--ink); border-radius: 0;
}
.site-form textarea { min-height: 9.5rem; resize: vertical; }
.site-form select {
  appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%233A3A3A' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 1rem;
}
/* Lighter than what's typed, so an empty field never reads as filled in; 5:1 on white. */
.site-form input::placeholder, .site-form textarea::placeholder { color: #6B6B6B; }
.site-form input:focus, .site-form select:focus, .site-form textarea:focus { outline: 3px solid var(--redline); outline-offset: 0; background-color: var(--white); }
.site-form fieldset { display: flex; flex-wrap: wrap; gap: 0.55rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.site-form legend { width: 100%; margin-bottom: 0.5rem; padding: 0; font-family: var(--mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.site-form fieldset label {
  display: inline-flex; flex: 1 1 12rem; align-items: center; gap: 0.55rem; padding: 0.6rem 0.85rem; cursor: pointer;
  font-family: var(--sans); font-size: 0.98rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  background: var(--white); border: 1.5px solid var(--ink);
}
.site-form fieldset label:has(input:checked) { color: var(--white); background: var(--ink); }
.site-form fieldset input { width: 1rem; min-height: 0; height: 1rem; margin: 0; accent-color: var(--redline); }
.form-hint { margin-top: -0.55rem; font-size: 0.92rem; color: var(--ink-2); }
.site-form .button { justify-self: start; }
.site-form-trap { display: none !important; }
.site-form-status { padding: 0.85rem 1rem; font-weight: 520; background: var(--paper); border-left: 4px solid var(--redline); }
.site-form-status:empty { display: none; }
.site-form-consent { font-size: 0.86rem; color: var(--ink-2); }

/* ── Not found ────────────────────────────────────────────────────────────────────────────────────────── */

.lost { padding-block: clamp(3rem, 8vw, 6.5rem); }
.lost__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.lost h1 { font-size: clamp(2.3rem, 4vw + 1rem, 4rem); font-stretch: 112%; }
.lost .actions { margin-top: 1.9rem; }
.lost .button--ghost:hover { color: var(--print); }
.lost__plate img { width: 100%; max-width: 30rem; margin-inline: auto; }
@media (min-width: 820px) { .lost__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }

/* Experience: each industry a heading and a horizontally scrollable row of photos. */
.project-carousel { display: grid; gap: 0.9rem; }
.project-carousel + .project-carousel { margin-top: clamp(2.25rem, 4vw, 3.25rem); padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--hair); }
.project-carousel__controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.project-carousel__title { min-width: 0; margin: 0; font-size: clamp(1.35rem, 1vw + 1rem, 1.7rem); font-stretch: 112%; line-height: 1.15; }
.project-carousel__arrows { display: flex; flex: none; gap: 0.5rem; }
.project-carousel__button {
  display: grid; place-items: center; width: 2.4rem; min-height: 2.4rem; padding: 0;
  font-family: var(--mono); font-size: 1.1rem; font-weight: 600; line-height: 1;
  color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); cursor: pointer;
}
.project-carousel__button:hover { color: var(--white); background: var(--ink); }
.project-carousel__button:disabled { opacity: 0.35; cursor: default; color: var(--ink); background: var(--paper); }
.project-carousel__track {
  display: flex; gap: 1rem; min-width: 0; overflow-x: auto; padding: 0.2rem 0.1rem 0.75rem;
  scroll-snap-type: x mandatory; scroll-padding-inline: 0.1rem; overscroll-behavior-inline: contain;
}
.project-card {
  flex: 0 0 min(88%, 27rem); min-width: 0; padding: 0.75rem; background: var(--paper); border: var(--frame); scroll-snap-align: start;
}
.project-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.project-card__details { padding: 0.85rem 0.25rem 0.3rem; }
@media (min-width: 700px) {
  .project-card { flex-basis: calc((100% - 2rem) / 3); }
}