/* Landing page styles. Tokens live in /landing/tokens.css; the scroll engine's floor lives in
   /landing/css/scrollcraft.css and is themed here, never edited. */

:root {
  --sc-canvas: var(--cn-ground-dark);
  --sc-surface: var(--cn-surface-dark);
  --sc-ink: var(--cn-ink-on-dark);
  --sc-ink-soft: var(--cn-ink-on-dark-soft);
  --sc-accent: var(--cn-accent);
  --sc-accent-ink: var(--cn-accent-ink);
  --sc-font-display: var(--cn-font-display);
  --sc-font-text: var(--cn-font-text);
  --sc-font-mono: var(--cn-font-mono);
  --sc-gutter: var(--cn-gutter);

  /* Page geometry. site.js overwrites --cn-header-h with the header's measured height. */
  --cn-header-h: calc(4.5rem + env(safe-area-inset-top));
  --cn-page-gutter: clamp(1.25rem, 4vw, 4rem);
  --cn-page-max: 75rem;
  --cn-section-space: clamp(3.5rem, 7vw, 6rem);
}

@media (max-width: 860px) {
  :root {
    --cn-header-h: calc(6.75rem + env(safe-area-inset-top));
  }
}

/* Grounds. Restating colour with the tokens, because colour inherits as a computed value. */
[data-ground="dark"] {
  --sc-ink: var(--cn-ink-on-dark);
  --sc-ink-soft: var(--cn-ink-on-dark-soft);
  --sc-accent: var(--cn-accent);
  --sc-accent-ink: var(--cn-accent-ink);
  background: var(--cn-ground-dark);
  color: var(--cn-ink-on-dark);
}
[data-ground="light"] {
  --sc-ink: var(--cn-ink);
  --sc-ink-soft: var(--cn-ink-soft);
  --sc-accent: var(--cn-accent-strong);
  --sc-accent-ink: var(--cn-on-accent-strong);
  background: var(--cn-ground-light);
  color: var(--cn-ink);
}

body {
  font-family: var(--cn-font-text);
  font-size: var(--cn-text-base);
  line-height: var(--cn-leading-body);
  letter-spacing: 0;
}
h1, h2, h3 {
  margin: 0;
  text-wrap: balance;
}
.hero__title,
.process__title,
.uses__title,
.request__title {
  font-family: var(--cn-font-display);
  font-weight: var(--cn-weight-display);
  font-variation-settings: "SHRP" 50;
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
[data-ground="light"] a:not(.btn) { color: var(--cn-accent-strong); }
[data-ground="light"] a:not(.btn):hover { text-decoration-thickness: 2px; }

.wrap {
  width: 100%;
  max-width: var(--cn-maxw);
  margin-inline: auto;
  padding-inline: var(--cn-gutter);
}

.skip {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 80;
  padding: 0.75rem 1rem;
  border-radius: var(--cn-radius-md);
  background: var(--cn-surface-light);
  color: var(--cn-ink);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--cn-duration-base) var(--cn-ease-out);
}
.skip:focus-visible { transform: none; }

/* Read by screen readers, not drawn. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.75rem;
  border: 0;
  border-radius: var(--cn-radius-pill);
  font-family: var(--cn-font-text);
  font-size: var(--cn-text-base);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--cn-duration-fast) var(--cn-ease-out), box-shadow var(--cn-duration-fast) var(--cn-ease-out);
}
.btn__label { display: inline-block; transition: transform 120ms var(--cn-ease-out); }
.btn:active .btn__label { transform: translateY(1px) scale(0.98); }
.btn--accent { background: var(--cn-accent); color: var(--cn-accent-ink); }
.btn--strong { background: var(--cn-accent-strong); color: var(--cn-on-accent-strong); }
@media (hover: hover) and (pointer: fine) {
  .btn--accent:hover { background: #ff7d52; }
  .btn--strong:hover { background: #9c320d; }
}
.btn[disabled], .btn[aria-disabled="true"] { cursor: progress; opacity: 0.72; }
/* The ring takes the fill colour, not the label colour: the label ink is near black on the
   orange fill, which would vanish against the dark ground. */
.btn:focus-visible { outline: 2px solid var(--cn-accent); outline-offset: 3px; }
[data-ground="light"] .btn:focus-visible { outline-color: var(--cn-accent-strong); }

/* ------------------------------------------------------------------- header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  padding-top: env(safe-area-inset-top);
  background: var(--cn-ground-dark);
  color: var(--cn-ink-on-dark);
  border-bottom: 1px solid var(--cn-line-on-dark);
}
.site-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 2rem;
  min-height: calc(4.5rem - 1px); /* with the 1px border, the header measures 72 */
}
.site-header__brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--cn-font-text);
  font-size: var(--cn-size-brand);
  font-weight: var(--cn-weight-ui);
  line-height: var(--cn-leading-ui);
  letter-spacing: var(--cn-track-ui);
  color: inherit;
  text-decoration: none;
}
.site-header__nav { display: flex; gap: 1.5rem; }
.site-header__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--cn-size-nav);
  font-weight: var(--cn-weight-medium);
  line-height: var(--cn-leading-ui);
  letter-spacing: var(--cn-track-ui);
  color: inherit;
  text-decoration: none;
}
.site-header__nav a:hover { text-decoration: underline; }
.site-header__request {
  height: 44px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 6px;
  font-size: var(--cn-size-nav);
  font-weight: var(--cn-weight-ui);
  line-height: var(--cn-leading-ui);
}
.site-header a:focus-visible {
  outline: 2px solid var(--cn-ink-on-dark);
  outline-offset: 3px;
  border-radius: 3px;
}
.site-header .site-header__request:focus-visible { border-radius: 6px; }

.site-header.is-light {
  background: var(--cn-ground-light);
  color: var(--cn-ink);
  border-bottom-color: var(--cn-line);
}
.site-header.is-light .site-header__request {
  background: var(--cn-accent-strong);
  color: var(--cn-on-accent-strong);
}
.site-header.is-light a:focus-visible { outline-color: var(--cn-accent-strong); }
@media (hover: hover) and (pointer: fine) {
  .site-header.is-light .site-header__request:hover { background: #9c320d; }
}

/* Shared page container: the header and footer line up on one column. The hero, the uses
   section and the request form use .wrap. */
.site-header__inner,
.foot__inner {
  width: calc(100% - 2 * var(--cn-page-gutter));
  max-width: var(--cn-page-max);
  margin-inline: auto;
  padding-inline: 0;
}

/* Every in-page target clears the header. */
#how,
#uses,
#request,
#request-form,
#request-title {
  scroll-margin-top: calc(var(--cn-header-h) + 1rem);
}

/* --------------------------------------------------------------------- hero */
/* The first screen keeps its lap 5 look: its own headline face, system-ui text, and the tighter
   display tracking it was drawn with. The rest of the page keeps the page tokens. */
.hero {
  --cn-font-display: var(--cn-font-hero);
  --cn-font-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cn-weight-display: 600;
  --cn-leading-tight: 1.04;
  --cn-track-display: -0.03em;
  position: relative;
  min-height: calc(100vh - var(--cn-header-h));
  min-height: calc(100svh - var(--cn-header-h));
  overflow: clip;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  font-family: var(--cn-font-text);
}
.hero .btn { font-family: var(--cn-font-display); }
/* The hero is one header shorter than the screen. The media, glow and scrim keep the size they had
   when the hero filled it, so the crop and the gradient stops sit where they were drawn. */
.hero__media {
  position: absolute;
  inset: -2.5rem 0 auto;
  height: max(calc(100% + 2.5rem), calc(100svh + 2.5rem));
  z-index: 0;
}
.hero__media picture,
.hero__poster,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 72% 46%;
}
.hero__video { opacity: 0; transition: opacity 900ms var(--cn-ease-out); }
.hero__video.is-playing { opacity: 1; }
.hero__glow {
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: max(100%, 100svh);
  pointer-events: none;
  background: radial-gradient(38% 34% at 68% 58%, rgba(255, 106, 58, 0.16), transparent 70%);
}
.hero__scrim {
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: max(100%, 100svh);
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(15, 18, 17, 0.9) 0%, rgba(15, 18, 17, 0.62) 30%, rgba(15, 18, 17, 0.12) 52%, rgba(15, 18, 17, 0) 64%),
    linear-gradient(180deg, rgba(15, 18, 17, 0.55) 0%, rgba(15, 18, 17, 0) 22%);
}
/* js/cursor.js mounts its trail layer inside the hero at z-index 3. The copy sits above it. */
.hero__copy {
  position: relative;
  z-index: 4;
  padding-top: clamp(6.5rem, 21vh, 13rem);
  pointer-events: none;
}
.hero__copy > * { pointer-events: auto; }
.hero__byline {
  font-size: var(--cn-text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--cn-ink-on-dark-soft);
  margin-bottom: clamp(1rem, 2.4vh, 1.75rem);
}
.hero__byline span { margin-inline: 0.35em; color: var(--cn-accent); }
.hero__title {
  font-size: clamp(2.5rem, 1.15rem + 4.6vw, 4.875rem);
  line-height: var(--cn-leading-tight);
  letter-spacing: var(--cn-track-display);
  max-width: 11.5em;
}
.hero__sub {
  margin-top: clamp(1rem, 2.2vh, 1.5rem);
  max-width: 30rem;
  font-size: var(--cn-text-lg);
  line-height: 1.45;
  color: #d3d9d5;
}
.hero__cta { margin-top: clamp(1.75rem, 4vh, 2.5rem); }
.hero__floor {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7rem;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 18, 17, 0), var(--cn-ground-dark));
}

/* ------------------------------------------------------------------ process */
.process { position: relative; }
.process__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  column-gap: 3rem;
  padding-block: 2.5rem;
  padding-inline: max(var(--cn-page-gutter), calc((100% - var(--cn-page-max)) / 2));
}
/* The engine pins the stage below the header. On a screen too short for the steps, the stage
   grows past it rather than cutting the price and payment lines off. */
.process__stage.sc-stage {
  height: auto;
  min-height: calc(100vh - var(--cn-header-h));
  min-height: calc(100svh - var(--cn-header-h));
}
.process__title {
  max-width: 13em;
  margin-bottom: 1.5rem;
  font-size: var(--cn-size-section);
  line-height: var(--cn-leading-section);
  letter-spacing: var(--cn-track-heading);
}
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--cn-line-on-dark);
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.25rem 0.75rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--cn-line-on-dark);
  color: var(--cn-ink-on-dark-soft);
  transition: color var(--cn-duration-base) var(--cn-ease-out);
}
.step::before {
  content: "";
  position: absolute;
  left: -0.875rem;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 2px;
  border-radius: 2px;
  background: var(--cn-accent);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 320ms var(--cn-ease-out);
}
.step__n {
  font-family: var(--cn-font-text);
  font-size: var(--cn-text-sm);
  font-weight: var(--cn-weight-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1.55;
  padding-top: 0.15em;
}
.step__t {
  font-family: var(--cn-font-text);
  font-size: var(--cn-size-step);
  font-weight: var(--cn-weight-medium);
  line-height: var(--cn-leading-step);
  letter-spacing: var(--cn-track-ui);
  color: inherit;
}
.step__d { margin-top: 0.2rem; font-size: var(--cn-text-sm); line-height: 1.5; }
.step.is-active { color: var(--cn-ink-on-dark); }
.step.is-active .step__n { color: var(--cn-accent); }
.step.is-active::before { transform: scaleY(1); }
.step.is-done .step__n { color: var(--cn-accent); }

.process__visual {
  position: relative;
  align-self: center;
  --p: var(--sc-p, 1);
  --dims-in: clamp(0, (var(--p) - 0.03) * 10, 1);
  --slip: clamp(0, min((var(--p) - 0.17) * 12, (0.42 - var(--p)) * 12), 1);
  --ghost: clamp(0, (var(--p) - 0.36) * 8, 1);
  --dock: clamp(0, (var(--p) - 0.38) * 8, 1);
  --lift: clamp(0, (var(--p) - 0.88) * 12, 1);
}
.build {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100svh - var(--cn-header-h) - 5rem);
  overflow: visible;
}
.b-plate .pt { fill: #1b201f; }
.b-plate .px { fill: #090b0a; }
.b-plate .py { fill: #121615; }
.b-plate .grid line { stroke: #2b3331; stroke-width: 1; vector-effect: non-scaling-stroke; }
.b-shadow { fill: #000; opacity: calc(0.18 + var(--lift) * 0.22); }
.b-ghost { opacity: calc(var(--ghost) * (1 - var(--lift)) * 0.85); }
.b-ghost polygon,
.b-ghost polyline,
.b-ghost line {
  fill: none;
  stroke: #b8c2bd;
  stroke-width: 1;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
}
.b-layers { transform: translateY(calc(var(--lift) * -8px)); }
.ly .t { fill: #ff8a5c; }
.ly .x { fill: #f2602b; }
.ly .y { fill: #c9461b; }
.ly .d { fill: #de5323; }
.ly .c { fill: #5c1e0a; }
.ly.o .x { fill: #e5571f; }
.ly.o .y { fill: #bb3f17; }
.ly.o .d { fill: #d04b1d; }
.ly.hot .t { fill: #ffc29f; }
.b-layers.live .ly { visibility: hidden; }
.b-layers.live .ly.on { visibility: visible; }
.b-nozzle { opacity: clamp(0, (var(--p) - 0.36) * 10, 1); }
.nz { transition: transform 420ms var(--cn-ease-out); }
.nz-block { fill: #4a514e; }
.nz-heat { fill: #5d5a52; }
.nz-hex { fill: #b8924c; }
.nz-tip { fill: #d6ad62; }
.nz-bead { fill: #ffd2b8; opacity: 0; }
.build.printing .nz-bead { opacity: 1; }
.b-dims { opacity: var(--dims-in); }
.b-dims text {
  font-family: var(--cn-font-mono);
  font-size: 17px;
  font-weight: 600;
  fill: var(--cn-ink-on-dark);
}
.b-dims .dm {
  --d: clamp(0, (var(--p) - 0.37 - var(--i) * 0.025) * 11, 1);
  transform: translate(calc(var(--fx) * (1 - var(--d)) * 1px), calc(var(--fy) * (1 - var(--d)) * 1px));
}
.b-dims .dl {
  stroke: var(--cn-accent);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  opacity: var(--dock);
}
.slip {
  position: absolute;
  z-index: 2;
  top: 4%;
  right: 2%;
  min-width: 13.5rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--cn-radius-md);
  background: var(--cn-surface-dark);
  border: 1px solid var(--cn-line-on-dark);
  box-shadow: var(--cn-shadow-dark);
  opacity: var(--slip);
  transform: translateY(calc((1 - var(--slip)) * 10px));
}
.slip__k { font-size: var(--cn-text-xs); letter-spacing: 0.04em; color: var(--cn-ink-on-dark-soft); }
.slip__v { margin-top: 0.15rem; font-family: var(--cn-font-text); font-size: var(--cn-text-xl); font-weight: 600; letter-spacing: -0.01em; color: var(--cn-ink-on-dark); }
.slip__m { margin-top: 0.1rem; font-size: var(--cn-text-xs); color: var(--cn-ink-on-dark-soft); }
/* The finished part's shipping label: paper on the dark plate, a parcel mark and its address. */
.label {
  position: absolute;
  left: 50%;
  bottom: 2%;
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem 0.55rem 0.6rem;
  border-radius: 4px;
  background: var(--cn-ground-light);
  color: var(--cn-ink);
  box-shadow: var(--cn-shadow-dark);
  white-space: nowrap;
  opacity: var(--lift);
  transform: translate(-50%, calc((1 - var(--lift)) * 10px)) rotate(-2deg);
}
.label__box {
  align-self: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  fill: none;
  stroke: var(--cn-accent-strong);
  stroke-width: 1.75;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.label__text { display: grid; line-height: 1.15; }
.label__k { font-family: var(--cn-font-mono); font-size: var(--cn-text-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--cn-ink-soft); }
.label__v { font-family: var(--cn-font-text); font-size: var(--cn-text-lg); font-weight: 600; letter-spacing: -0.01em; }

/* --------------------------------------------------------------------- uses */
.uses__band {
  position: relative;
  height: clamp(28rem, 86vh, 50rem);
}
.uses__figure {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: clip;
}
.uses__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 42%;
}
.uses__head {
  position: absolute;
  z-index: 2;
  top: clamp(4rem, 15vh, 9rem);
  left: 0;
  right: 0;
  margin-inline: auto;
  pointer-events: none;
}
.uses__head > * { pointer-events: auto; }
.uses__title {
  max-width: 12em;
  font-size: clamp(1.75rem, 1.2rem + 2.1vw, 3.125rem);
  line-height: 1.06;
  letter-spacing: var(--cn-track-display);
  color: var(--cn-ink);
}
.uses__list {
  max-width: 24rem;
  margin-top: clamp(0.75rem, 2vh, 1.25rem);
  font-size: var(--cn-text-lg);
  font-weight: var(--cn-weight-medium);
  line-height: 1.45;
  color: var(--cn-ink);
}

/* ------------------------------------------------------------------ request */
.request {
  padding-block: var(--cn-section-space);
  border-top: 1px solid var(--cn-line);
}
.request { position: relative; }
.request > .wrap { position: relative; z-index: 1; }
/* Decoration behind the form card: a faint blueprint grid and eight line drawings of everyday
   custom parts (generated from 3D models by .expert/lap7/sketches). Ink stays light so every
   label and field keeps its contrast; the white form card sits on top. */
.request__deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(20, 23, 22, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 23, 22, 0.03) 1px, transparent 1px);
  background-size: 24px 24px;
}
/* Phones and tablets: one strip of drawings above the heading, one below the notes. */
.request { padding-block: calc(5.25rem + var(--cn-section-space)); }
.rs-set {
  position: absolute;
  left: 1rem;
  right: 1rem;
  height: 4.75rem;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.rs-set--a { top: 1.75rem; }
.rs-set--b { bottom: 1.75rem; }
.rs {
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  fill: none;
  stroke: #141716;
  stroke-opacity: 0.15;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.rs path { vector-effect: non-scaling-stroke; stroke-width: 1.2px; }
/* Wide screens: two columns of drawings in the gutters either side of the form. */
@media (min-width: 1020px) {
  .request { padding-block: var(--cn-section-space); }
  .rs-set {
    top: 3.5rem;
    bottom: 3.5rem;
    left: auto;
    right: auto;
    height: auto;
    width: min(280px, calc(50% - 356px));
    flex-direction: column;
    justify-content: space-around;
  }
  .rs-set--a { right: calc(50% + 348px); }
  .rs-set--b { left: calc(50% + 348px); }
  .rs { width: var(--rs-w, 200px); height: auto; max-width: 100%; }
}
.rs--bracket { --rs-w: 190px; }
.rs--chairCap { --rs-w: 104px; }
.rs--swordStand { --rs-w: 250px; }
.rs--cableClip { --rs-w: 220px; }
.rs--cupHolder { --rs-w: 220px; }
.rs--knob { --rs-w: 190px; }
.rs--phoneStand { --rs-w: 150px; }
.rs--wallHook { --rs-w: 170px; }
/* One column: the heading and the promise sit above the form, the notes under it. */
.request__col { max-width: 40rem; margin-inline: auto; }
.request__title {
  font-size: var(--cn-size-section);
  line-height: var(--cn-leading-section);
  letter-spacing: var(--cn-track-heading);
}
.request__title:focus:not(:focus-visible) { outline: none; }
.request__title:focus-visible { outline: 2px solid var(--cn-accent-strong); outline-offset: 0.3em; border-radius: var(--cn-radius-sm); }
.request__promise {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--cn-radius-pill);
  background: var(--cn-surface-light);
  box-shadow: var(--cn-shadow-1);
  font-size: var(--cn-text-sm);
  font-weight: 600;
  color: var(--cn-ink);
}
.request__promise::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--cn-accent-strong); }
.request__lede { margin-top: 0.85rem; font-size: var(--cn-text-lg); line-height: 1.5; color: var(--cn-ink-soft); }
.request__privacy { margin-top: 1.25rem; font-size: var(--cn-text-sm); line-height: 1.5; color: var(--cn-ink-soft); }
.request__signin { margin-top: 0.5rem; font-size: var(--cn-text-sm); color: var(--cn-ink-soft); }

/* Every field has the same rhythm, one 8 px step between each line: label, hint (where there
   is one), control, error. Fields sit 24 px apart. */
.form {
  --field-gap: 0.5rem;
  position: relative;
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  padding: clamp(1.25rem, 4vw, 2.25rem);
  border-radius: var(--cn-radius-lg);
  background: var(--cn-surface-light);
  box-shadow: var(--cn-shadow-2);
}
.field { display: grid; gap: var(--field-gap); min-width: 0; }
.field__head { display: grid; gap: var(--field-gap); }
.field__head label {
  font-size: var(--cn-text-base);
  font-weight: 600;
  line-height: 1.35;
  color: var(--cn-ink);
}
.field__opt { font-weight: 400; color: var(--cn-ink-hint); }
.field__hint { font-size: var(--cn-text-sm); line-height: 1.45; color: var(--cn-ink-hint); }
.nw { white-space: nowrap; }
.field__err {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: var(--cn-text-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--cn-danger);
}
.field__err::before {
  content: "";
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  margin-top: 0.12rem;
  border-radius: 50%;
  background: var(--cn-danger);
  -webkit-mask: radial-gradient(circle at 50% 74%, #000 0.07rem, transparent 0.08rem), linear-gradient(#000, #000) 50% 30% / 0.13rem 0.38rem no-repeat;
  mask: radial-gradient(circle at 50% 74%, #000 0.07rem, transparent 0.08rem), linear-gradient(#000, #000) 50% 30% / 0.13rem 0.38rem no-repeat;
  opacity: 0.95;
}
.field__err[hidden] { display: none; }

.form input[type="text"],
.form input[type="email"],
.form textarea {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-height: 3rem;
  margin: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--cn-line-strong);
  border-radius: var(--cn-radius-md);
  background: var(--cn-surface-light);
  color: var(--cn-ink);
  font-family: var(--cn-font-text);
  font-size: 1rem;
  line-height: 1.45;
  box-shadow: inset 0 1px 2px rgba(15, 18, 17, 0.05);
  transition: border-color var(--cn-duration-fast) var(--cn-ease-out), box-shadow var(--cn-duration-fast) var(--cn-ease-out), background-color var(--cn-duration-fast) var(--cn-ease-out);
}
.form textarea { resize: vertical; min-height: 6.5rem; }
.form textarea[name="notes"] { min-height: 4.5rem; }
@media (hover: hover) and (pointer: fine) {
  .form input[type="text"]:hover,
  .form input[type="email"]:hover,
  .form textarea:hover { border-color: #5f6863; }
}
.form input:focus-visible,
.form textarea:focus-visible {
  outline: none;
  border-color: var(--cn-accent-strong);
  box-shadow: 0 0 0 3px rgba(178, 58, 16, 0.22);
}
.form [aria-invalid="true"] {
  border-color: var(--cn-danger);
  background: #fffafa;
}
.form [aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.2); }

/* File pickers look like a field of the same height: a dashed box with one line in it. */
.drop {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 3rem;
  border: 1.5px dashed var(--cn-line-strong);
  border-radius: var(--cn-radius-md);
  background: #f6f7f4;
  transition: border-color var(--cn-duration-fast) var(--cn-ease-out), background-color var(--cn-duration-fast) var(--cn-ease-out);
}
.drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}
.drop:focus-within { border-color: var(--cn-accent-strong); border-style: solid; box-shadow: 0 0 0 3px rgba(178, 58, 16, 0.22); }
.drop.is-over { border-color: var(--cn-accent-strong); background: #fff3ee; }
@media (hover: hover) and (pointer: fine) { .drop:hover { border-color: var(--cn-accent-strong); background: #fff6f2; } }
.drop.is-full .drop__main { color: var(--cn-ink-soft); }
.drop.is-full .drop__icon { opacity: 0.45; }
.drop__face { display: flex; align-items: center; gap: 0.6rem; padding: 0 0.9rem; pointer-events: none; }
.drop__icon {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--cn-accent-strong);
  -webkit-mask: linear-gradient(#000, #000) center / 0.6rem 0.12rem no-repeat, linear-gradient(#000, #000) center / 0.12rem 0.6rem no-repeat;
  mask: linear-gradient(#000, #000) center / 0.6rem 0.12rem no-repeat, linear-gradient(#000, #000) center / 0.12rem 0.6rem no-repeat;
  box-shadow: inset 0 0 0 1.5px var(--cn-accent-strong);
}
.drop__main { font-family: var(--cn-font-text); font-weight: 600; font-size: var(--cn-text-base); color: var(--cn-ink); }

.thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.thumbs:empty { display: none; }
.thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--cn-radius-md);
  overflow: hidden;
  background: #e4e7e2;
  box-shadow: var(--cn-shadow-1);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.25rem 0.5rem 0.4rem;
  font-size: var(--cn-text-xs);
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(15, 18, 17, 0.78));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.thumb__remove {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 18, 17, 0.72);
  color: #fff;
  font: 600 1.1rem/1 var(--cn-font-text);
  cursor: pointer;
  transition: background-color var(--cn-duration-fast) var(--cn-ease-out);
}
.thumb__remove:hover { background: rgba(15, 18, 17, 0.9); }
.thumb__remove:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

.filelist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cn-line); }
.filelist:empty { display: none; }
.filelist li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  border-bottom: 1px solid var(--cn-line);
  font-size: var(--cn-text-sm);
}
.filelist__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cn-ink); }
.filelist__size { flex: none; font-family: var(--cn-font-text); font-size: var(--cn-text-xs); color: var(--cn-ink-hint); }
.filelist__remove {
  flex: none;
  min-height: 2.75rem;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--cn-accent-strong);
  font: 600 var(--cn-text-sm)/1 var(--cn-font-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.filelist__remove:focus-visible { outline: 2px solid var(--cn-accent-strong); outline-offset: 2px; border-radius: var(--cn-radius-sm); }

.form__foot { display: grid; gap: 1rem; padding-top: 0.25rem; }
/* Remembering the details is a convenience, so it reads quietly next to the fields. */
.check {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.6rem;
  min-height: 2.75rem;
  font-size: var(--cn-text-sm);
  color: var(--cn-ink-soft);
  cursor: pointer;
}
.check input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  display: grid;
  place-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  border: 1.5px solid var(--cn-line-strong);
  border-radius: 5px;
  background: var(--cn-surface-light);
  cursor: pointer;
  transition: background-color var(--cn-duration-fast) var(--cn-ease-out), border-color var(--cn-duration-fast) var(--cn-ease-out);
}
.check input::before {
  content: "";
  width: 0.72rem;
  height: 0.72rem;
  background: var(--cn-on-accent-strong);
  clip-path: polygon(14% 44%, 0 62%, 42% 100%, 100% 22%, 84% 6%, 40% 66%);
  transform: scale(0);
  transition: transform 140ms var(--cn-ease-out);
}
.check input:checked { background: var(--cn-accent-strong); border-color: var(--cn-accent-strong); }
.check input:checked::before { transform: scale(1); }
.check input:focus-visible { outline: 2px solid var(--cn-accent-strong); outline-offset: 3px; }
.form__alert {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: var(--cn-radius-md);
  background: var(--cn-danger-bg);
  border: 1px solid rgba(180, 35, 24, 0.3);
  color: #7a1a12;
  font-size: var(--cn-text-sm);
  line-height: 1.45;
}
.form__alert[hidden] { display: none; }
.form__submit { width: 100%; }
.form .btn:focus-visible { outline: 2px solid var(--cn-accent-strong); outline-offset: 3px; }

/* ------------------------------------------------------------------- footer */
.foot {
  border-top: 1px solid var(--cn-line);
  padding-block: 3rem calc(3rem + env(safe-area-inset-bottom));
}
.foot__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 2.5rem;
  align-items: start;
}
.foot p { font-size: var(--cn-text-sm); line-height: 1.5; color: var(--cn-ink-soft); }
.foot .foot__sign {
  font-family: var(--cn-font-text);
  font-size: 1.25rem;
  font-weight: var(--cn-weight-ui);
  line-height: 1.3;
  color: var(--cn-ink);
}
.foot__nav { display: flex; gap: 1.5rem; }
.foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--cn-text-sm);
  line-height: 1.5;
}
.foot__mail { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.35em; }
.foot__mail a { overflow-wrap: anywhere; }

/* -------------------------------------------------------------- responsive */
@media (max-width: 860px) {
  .site-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(64px, auto) auto;
    column-gap: 1rem;
    min-height: 0;
  }
  .site-header__brand { grid-column: 1; grid-row: 1; }
  .site-header__request { grid-column: 2; grid-row: 1; }
  .site-header__nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: -1px; /* the header border is the 109th pixel; the header measures 108 */
  }
  .site-header__nav a { justify-content: center; }

  .hero { align-items: flex-start; }
  .hero__copy { padding-top: clamp(4.5rem, 12svh, 7rem); }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(15, 18, 17, 0.78) 0%, rgba(15, 18, 17, 0.55) 36%, rgba(15, 18, 17, 0) 58%),
      linear-gradient(0deg, rgba(15, 18, 17, 0.7) 0%, rgba(15, 18, 17, 0) 24%);
  }
  .hero__media { inset: -2rem 0 auto; height: max(calc(100% + 2rem), calc(100svh + 2rem)); }
  .hero__media picture, .hero__poster, .hero__video { object-position: 60% 72%; }

  .process__stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    row-gap: 1rem;
    padding: 1.5rem var(--cn-page-gutter);
  }
  .process__title { max-width: 18em; margin-bottom: 1.25rem; }
  .step { grid-template-columns: 1.5rem minmax(0, 1fr); padding: 0.625rem 0; }
  .step::before { left: -0.65rem; }
  .step__d { margin-top: 0.1rem; }
  .process__visual { align-self: stretch; display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; min-height: 0; }
  /* The drawing takes the height the steps leave and asks for none of its own, so it
     shrinks before the stage has to grow. */
  .sc-stage .process__visual { contain: size; min-height: 10rem; }
  .build { max-height: 100%; }
  .slip { top: 0; right: 0; min-width: 0; padding: 0.6rem 0.8rem; }
  .slip__v { font-size: var(--cn-text-lg); }
  /* Bottom left on a phone, where the plate leaves room and no dimension sits. */
  .label { left: 0; bottom: 0; padding: 0.4rem 0.7rem 0.4rem 0.5rem; transform: translateY(calc((1 - var(--lift)) * 10px)) rotate(-2deg); }
  .label__v { font-size: var(--cn-text-base); }
  .b-dims text { font-size: 21px; }

  .uses__band { display: flex; flex-direction: column-reverse; height: auto; }
  .uses__head { position: relative; top: auto; padding-top: clamp(3.5rem, 12vw, 5rem); padding-bottom: 1.5rem; }
  .uses__title { max-width: 13em; font-size: var(--cn-text-2xl); }
  .uses__list { max-width: 30rem; }
  .uses__figure { position: relative; height: clamp(18rem, 56svh, 30rem); }
  .uses__figure img { object-position: 74% 40%; }


  .foot__inner { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

@media (max-width: 600px) {
  .b-dims text { font-size: 26px; }
}

@media (max-width: 560px) {
  .thumbs { gap: 0.5rem; }
}

/* On a short portrait screen the copy reaches the middle of the frame, so the footage runs taller
   than the hero and the part sits lower, under the button instead of behind the subline. */
@media (max-aspect-ratio: 4/5) and (max-height: 760px) {
  .hero__media { height: max(calc(100% + 2rem + 26svh), calc(100svh + 2rem + 26svh)); }
}

/* A phone on its side: the copy keeps to the left half over a darker scrim, and the part and
   its nozzle stay clear on the right. */
@media (min-aspect-ratio: 4/5) and (max-height: 520px) {
  .hero__copy { padding-top: clamp(1.5rem, 9svh, 3rem); }
  .hero__byline { margin-bottom: 0.75rem; }
  .hero__title { font-size: clamp(1.5rem, 0.5rem + 3.6vw, 2.25rem); max-width: 10em; }
  .hero__sub { margin-top: 0.75rem; max-width: 19rem; font-size: var(--cn-text-base); }
  .hero__cta { margin-top: 1.25rem; }
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(15, 18, 17, 0.92) 0%, rgba(15, 18, 17, 0.88) 48%, rgba(15, 18, 17, 0.5) 60%, rgba(15, 18, 17, 0) 72%),
      linear-gradient(0deg, rgba(15, 18, 17, 0.6) 0%, rgba(15, 18, 17, 0) 24%);
  }
  .hero__media picture, .hero__poster, .hero__video { object-position: 72% 46%; }
}

/* ----------------------------------------------- no JS, or the engine failed */
html:not(.js) [data-sc-in],
html:not(.js) [data-sc-stagger] > *,
html:not(.js) [data-sc-cue],
.sc-off [data-sc-in],
.sc-off [data-sc-stagger] > *,
.sc-off [data-sc-cue] {
  opacity: 1 !important;
  transform: none !important;
}
html:not(.js) .drop input[type="file"] {
  position: static;
  opacity: 1;
  font-size: var(--cn-text-sm);
  padding: 0.5rem 0.6rem;
}
html:not(.js) .drop__face { display: none; }
html:not(.js) .form input[type="file"]::file-selector-button,
.form input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.6rem 1rem;
  border: 0;
  border-radius: var(--cn-radius-pill);
  background: var(--cn-accent-strong);
  color: var(--cn-on-accent-strong);
  font: 600 var(--cn-text-sm)/1 var(--cn-font-text);
  cursor: pointer;
}

/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .process { height: auto !important; --sc-p: 1 !important; }
  .process__stage { height: auto !important; min-height: 0 !important; }
  .sc-stage .process__visual { contain: none; min-height: 0; }
  .step { color: var(--cn-ink-on-dark); }
  .step .step__n { color: var(--cn-accent); }
  .step::before { display: none; }
  .b-layers.live .ly { visibility: visible; }
  .b-nozzle, .slip { display: none; }
  .hero__video { display: none; }
  .build { max-height: none; }
}

/* No script, or the engine failed: the stage is plain document flow and the drawing keeps its
   natural height. */
html:not(.js) .process__visual,
.sc-off .sc-stage .process__visual { contain: none; min-height: 0; }
.sc-off .process { height: auto !important; }
.sc-off .process__stage { height: auto !important; min-height: 0 !important; }
.sc-off .build { max-height: none; }