/* =============================================================
   Additive Manufacturing & Engineering
   Design tokens. Brand: teal #19AE8C, gray #616161, and the
   metallic white-to-#616161 gradient lifted from the logo.
   Light is the base palette, dark is layered on top via
   prefers-color-scheme and an explicit [data-theme].
   One radius scale: 4px.
   ============================================================= */

:root {
  --bg:        #F3F3F3;
  --bg-2:      #FAFAFA;
  --bg-3:      #FFFFFF;
  --bg-inv:    #161616;
  --line:      rgba(22, 22, 22, .12);
  --line-2:    rgba(22, 22, 22, .24);
  --fg:        #1A1A1A;
  --fg-2:      #616161;
  --fg-3:      #6E6E6E;
  --fg-inv:    #F3F3F3;

  /* Brand teal. --accent is the brand value, used for fills, icons
     and rules. --accent-ink is the darker step that clears WCAG AA
     for small text on light surfaces. */
  --accent:     #19AE8C;
  --accent-2:   #148C70;
  --accent-ink: #0D6F59;
  --accent-dim: rgba(25, 174, 140, .12);
  --on-accent:  #06211A;
  --focus:      #0D6F59;
  --danger:     #B3261E;

  /* Brand metal: white to #616161, as in the logo letters. Poured
     into elements only (rules, frames, the inner page stage), never
     into type. --metal-rule runs on into the brand teal. */
  --metal-a:    #FFFFFF;
  --metal-b:    #616161;
  --metal-rule: linear-gradient(180deg, #FFFFFF 0%, #DCDCDC 34%, #616161 68%, var(--accent) 100%);

  /* Dark bands (hero, calls to action) stay dark in both themes. */
  --band:      #141414;
  --band-2:    #1F1F1F;
  --band-fg:   #F3F3F3;
  --band-fg-2: #B8B8B8;
  --band-line: rgba(255, 255, 255, .14);

  /* The logo has a transparent interior; dark mode backs it with white. */
  --logo-plate: transparent;
  --logo-pad:   0px;

  --r: 4px;
  --wrap: 1240px;
  --nav-h: 68px;
  /* Header height and mark width before the page scrolls; the header
     shrinks to --nav-h and --logo-w once it sticks. */
  --nav-h-top: 108px;
  --logo-w-top: 150px;
  --logo-w: 76px;
  --hang: clamp(48px, 8vw, 112px);

  --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #111111;
    --bg-2:      #181818;
    --bg-3:      #1F1F1F;
    --bg-inv:    #F3F3F3;
    --line:      rgba(255, 255, 255, .10);
    --line-2:    rgba(255, 255, 255, .20);
    --fg:        #ECECEC;
    --fg-2:      #ADADAD;
    --fg-3:      #8E8E8E;
    --fg-inv:    #111111;
    --accent:     #2BC9A4;
    --accent-2:   #52D8B9;
    --accent-ink: #4CD4B3;
    --accent-dim: rgba(43, 201, 164, .14);
    --on-accent:  #06211A;
    --focus:      #4CD4B3;
    --danger:     #F2735F;
    --metal-a:    #1C1C1C;
    --metal-b:    #4A4A4A;
    --logo-plate: #FFFFFF;
    --logo-pad:   6px;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:        #111111;
  --bg-2:      #181818;
  --bg-3:      #1F1F1F;
  --bg-inv:    #F3F3F3;
  --line:      rgba(255, 255, 255, .10);
  --line-2:    rgba(255, 255, 255, .20);
  --fg:        #ECECEC;
  --fg-2:      #ADADAD;
  --fg-3:      #8E8E8E;
  --fg-inv:    #111111;
  --accent:     #2BC9A4;
  --accent-2:   #52D8B9;
  --accent-ink: #4CD4B3;
  --accent-dim: rgba(43, 201, 164, .14);
  --on-accent:  #06211A;
  --focus:      #4CD4B3;
  --danger:     #F2735F;
  --metal-a:    #1C1C1C;
  --metal-b:    #4A4A4A;
  --logo-plate: #FFFFFF;
  --logo-pad:   6px;
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; letter-spacing: -.02em; line-height: 1.08; font-weight: 600; }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 16px; border-radius: var(--r); font-weight: 600;
  transition: top .2s var(--ease);
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 20px;
}

/* Display text on the dark bands is solid. The brand metal stands
   beside it instead, as the rule on .copyrule. */
.metal { color: var(--band-fg); }

/* A vertical metal rule beside a block of copy: white through gray
   into teal, the logo gradient as an element rather than as type. */
.copyrule { position: relative; padding-left: 26px; }
.copyrule::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 2px;
  background: var(--metal-rule);
}

/* Icons are hidden until the Material Symbols face actually loads.
   Without this guard a blocked or slow webfont paints the raw
   ligature names ("rocket_launch") straight into the layout. The
   1.1em box contains any fallback text either way. */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  overflow: hidden;
  line-height: 1;
  visibility: hidden;
  user-select: none;
}
html.icons-ready .material-symbols-outlined { visibility: visible; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap;
  padding: 14px 26px;
  border-radius: var(--r);
  border: 1px solid transparent;
  font: 600 15px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease), color .18s var(--ease);
}
.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-2); }
.btn--ghost { border-color: var(--line-2); color: var(--fg); background: transparent; }
.btn--ghost:hover { border-color: var(--accent-ink); background: var(--accent-dim); }
.btn:active { transform: translateY(1px); }

.iconbtn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: transparent; color: var(--fg-2);
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);
}
.iconbtn:hover { color: var(--fg); border-color: var(--line-2); background: var(--bg-2); }
.iconbtn .material-symbols-outlined { font-size: 20px; }

/* ---------- nav ---------- */
.nav {
  --nav-cur: var(--nav-h-top);
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-cur);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.nav.is-stuck { --nav-cur: var(--nav-h); border-bottom-color: var(--line); }
@media (prefers-reduced-motion: no-preference) {
  .nav { transition: height .3s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease); }
  .brand__logo { transition: width .3s var(--ease); }
}

/* Build progress: a teal line along the foot of the header fills as
   the page scrolls, and a Z height readout beside the theme toggle
   climbs with it (main.js sets the number). */
.nav::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}
.nav__z {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-3);
  margin-right: 4px;
  white-space: nowrap;
}
.nav__z::before { content: ""; width: 6px; height: 6px; background: var(--accent); }
.nav__z[hidden] { display: none; }

.nav__in {
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
  height: 100%;
  display: flex; align-items: center; gap: 28px;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
/* The header shows only the framed AME mark. The wrapper is sized to
   the frame's aspect (788 x 346 of the 788 x 446 file) and clips the
   tagline below it, so one asset serves header and footer. */
.brand__logo {
  width: var(--logo-w-top);
  aspect-ratio: 788 / 346;
  overflow: hidden;
  flex: none;
  background: var(--logo-plate);
  border-radius: 3px;
}
.nav.is-stuck .brand__logo { width: var(--logo-w); }
.brand__logo img { width: 100%; height: auto; }
.brand__full {
  font-family: var(--mono); font-size: 11px; color: var(--fg-3);
  padding-left: 12px; border-left: 1px solid var(--line);
  white-space: nowrap;
  line-height: 1.4;
}

.nav__links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav__links a {
  text-decoration: none; font-size: 14.5px; font-weight: 500; color: var(--fg-2);
  transition: color .18s var(--ease);
}
.nav__links a:hover { color: var(--fg); }
.nav__links a[aria-current="page"] {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

.nav__end { display: flex; align-items: center; gap: 10px; flex: none; }
.nav__burger { display: none; }

/* ---------- dark bands ----------
   Hero and calls to action. Dark in both themes so the metallic
   headline always has a floor to stand on. */
.band {
  position: relative;
  overflow: hidden;
  overflow: clip; /* clip without becoming a scroll container, so view() timelines inside still track the page */
  background: linear-gradient(180deg, var(--band) 0%, var(--band-2) 100%);
  color: var(--band-fg);
  --focus: var(--accent);
  --line: var(--band-line);
  --line-2: rgba(255, 255, 255, .28);
}
.band .eyebrow { color: var(--accent); }
.band .btn--ghost { color: var(--band-fg); border-color: rgba(255, 255, 255, .28); }
.band .btn--ghost:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, .06); }
.band > .wrap { position: relative; z-index: 1; }

/* ---------- hero ---------- */
.hero { padding: clamp(48px, 6vw, 84px) 0 clamp(56px, 7vw, 96px); }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 70% at 16% 40%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero__h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.4rem);
  font-weight: 600;
  margin-bottom: 22px;
}
.hero__sub {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: var(--band-fg-2);
  max-width: 46ch;
  margin-bottom: 34px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* The photo and its rail sit in a one pixel gradient frame: white
   along the top edge, fading through the band, teal along the foot. */
.hero__asset {
  display: grid; gap: 0;
  padding: 1px;
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .10) 45%, var(--accent) 100%);
}
.rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--band-line);
  background: var(--band-2);
  border-radius: 0 0 calc(var(--r) - 1px) calc(var(--r) - 1px);
}
.rail li { padding: 14px 16px; display: grid; gap: 4px; }
.rail li + li { border-left: 1px solid var(--band-line); }
.rail__k { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--band-fg-2); }
.rail__v { font-size: 13px; font-weight: 500; color: var(--band-fg); }

/* Hero video: a poster and play button stand in for the YouTube
   player, which only loads (from youtube-nocookie) once clicked. */
.hero__video { margin: 0; background: var(--band-2); border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0; overflow: hidden; }
.vid { position: relative; aspect-ratio: 16 / 9; background: #000; }
.vid > img, .vid > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.vid > img { opacity: .88; transition: opacity .25s var(--ease); }
.vid:hover > img { opacity: 1; }
.vid__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .5);
  background: color-mix(in srgb, var(--accent) 88%, transparent);
  color: #FFFFFF; cursor: pointer;
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 22%, transparent);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.vid__play .material-symbols-outlined { font-size: 40px; }
.vid__play:hover, .vid__play:focus-visible { transform: scale(1.06); box-shadow: 0 0 0 16px color-mix(in srgb, var(--accent) 18%, transparent); }
.vid__tag {
  position: absolute; left: 14px; top: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, .6); color: #FFFFFF;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  pointer-events: none;
}
.vid__dot { width: 7px; height: 7px; border-radius: 50%; background: #FF6A2B; box-shadow: 0 0 8px #FF6A2B; }
.vid.is-playing .vid__tag { display: none; }
.vid__cap { padding: 14px 16px; font-size: 14px; line-height: 1.5; color: var(--band-fg-2); border-top: 1px solid var(--band-line); }
.vid__cap strong { color: var(--band-fg); font-weight: 600; }

/* ---------- image slots ----------
   A .shot frames a photo at a fixed aspect so nothing shifts while
   it loads. Slots that still carry data-src (no file yet) show a
   labelled placeholder until main.js swaps a real <img> in. */
.shot {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.shot--tall { aspect-ratio: 4 / 5; }
.shot--wide { aspect-ratio: 16 / 9; }
.shot--cine { aspect-ratio: 21 / 9; }
.shot--sq   { aspect-ratio: 1 / 1; }
.hero__asset .shot { border: 0; border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0; aspect-ratio: 1 / 1; background: var(--band-2); }

.shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.shot[data-src]:not(.is-loaded)::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg,  var(--line) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 40px);
  opacity: .9;
  pointer-events: none;
}
.shot[data-src]:not(.is-loaded)::after {
  content: attr(data-label);
  position: absolute; inset: auto 14px 14px 14px;
  font-family: var(--mono); font-size: 10.5px; line-height: 1.5;
  letter-spacing: .04em; color: var(--fg-3);
  pointer-events: none;
}

.shot__cap {
  font-family: var(--mono); font-size: 11px; color: var(--fg-3);
  margin-top: 10px; letter-spacing: .04em;
}

/* ---------- page header (inner pages) ----------
   Copy sits on plain white. Below it the stage pours the brand
   gradient, white down to #616161, and the photo hangs over the
   seam into the next section. */
.pagehead { background: var(--metal-a); }
.pagehead__copy { padding: clamp(44px, 6vw, 80px) 24px clamp(28px, 4vw, 44px); max-width: 68ch; }
.pagehead__copy.copyrule { padding-left: 50px; }
.pagehead__copy.copyrule::before { left: 24px; top: calc(clamp(44px, 6vw, 80px) + 6px); bottom: calc(clamp(28px, 4vw, 44px) + 6px); }
.pagehead h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); margin-bottom: 18px; }
.pagehead__lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--fg-2); max-width: 58ch; }
.pagehead__lead + p { margin-top: 14px; color: var(--fg-2); max-width: 62ch; }
.pagehead__stage {
  position: relative;
  background: linear-gradient(180deg, var(--metal-a) 0%, var(--metal-b) 100%);
  padding-top: clamp(28px, 5vw, 64px);
}
.pagehead__media {
  position: relative; z-index: 1;
  margin-bottom: calc(-1 * var(--hang));
}
.pagehead__media .shot, .pagehead__media .map {
  border-color: rgba(0, 0, 0, .25);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  background: var(--bg-3);
}
.pagehead + .section { padding-top: calc(var(--hang) + clamp(40px, 6vw, 72px)); }

/* cutout: a part shot on a transparent background. The whole part
   fits inside the frame on a dark stage instead of being cropped. */
.shot.shot--cutout { background: radial-gradient(ellipse at 50% 45%, var(--band-2) 0%, var(--band) 70%); }
.shot--cutout > img { object-fit: contain; padding: 5%; }

/* ---------- sections ---------- */
.section { padding: clamp(64px, 9vw, 120px) 0; }
.sechead { max-width: 60ch; margin-bottom: clamp(32px, 4vw, 56px); }
.sechead h2 { font-size: clamp(1.75rem, 3.4vw, 2.7rem); margin-bottom: 14px; }
.sechead p { color: var(--fg-2); max-width: 58ch; }

/* generic two column: copy beside a photo */
.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.split--flip { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.split--flip .split__copy { order: 2; }
.split__copy { display: grid; gap: 18px; justify-items: start; }
.split__copy h2 { font-size: clamp(1.75rem, 3.4vw, 2.7rem); max-width: 20ch; }
.split__copy p { color: var(--fg-2); max-width: 54ch; }
.split__copy .btn { margin-top: 8px; }
.split__copy .lead { color: var(--fg); font-size: 1.1rem; font-weight: 500; max-width: 46ch; }

/* bulleted lists with a teal tick */
.list { display: grid; gap: 10px; }
.list li { position: relative; padding-left: 22px; color: var(--fg-2); }
.list li::before {
  content: ""; position: absolute; left: 0; top: .66em;
  width: 8px; height: 8px; background: var(--accent); border-radius: 1px;
}
.list--strong li { color: var(--fg); font-weight: 500; }

/* ---------- credentials ---------- */
.creds { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.creds__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.cred {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 24px 22px 0;
  font-size: 14px; font-weight: 500; color: var(--fg-2);
}
.cred + .cred { padding-left: 24px; border-left: 1px solid var(--line); }
.cred .material-symbols-outlined { font-size: 21px; color: var(--accent); flex: none; }

/* ---------- bento ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.cell {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  padding: 26px;
  display: flex; flex-direction: column; gap: 12px;
}
.cell h3 { font-size: 1.18rem; }
.cell p { color: var(--fg-2); font-size: 14.5px; }
.cell__icon { font-size: 24px; color: var(--accent); }

.cell--a { grid-column: span 7; grid-row: span 2; padding: 0; overflow: hidden; }
.cell--a .shot { border: 0; border-radius: 0; aspect-ratio: 16 / 9; }
.cell--a .cell__body { padding: 26px; display: grid; gap: 12px; }
.cell--b { grid-column: span 5; }
.cell--c { grid-column: span 5; }
.cell--d { grid-column: span 6; }
.cell--e { grid-column: span 6; }

.cell--tint {
  background:
    radial-gradient(120% 100% at 100% 0%, var(--accent-dim), transparent 62%),
    var(--bg-2);
}
.cell--grid {
  background:
    repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 12px),
    var(--bg-2);
}

/* ---------- platform stats ---------- */
/* Powder bed: a faint dot grid under the stats, and the build volume
   figure (.vol, below) beside the headline. */
.platform {
  background:
    radial-gradient(circle, color-mix(in srgb, var(--fg) 16%, transparent) .8px, transparent 1.3px) 0 0 / 18px 18px,
    var(--bg-2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.platform__top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  gap: clamp(32px, 5vw, 72px); align-items: end;
  margin-bottom: clamp(36px, 5vw, 60px);
}
.platform__h { font-size: clamp(1.75rem, 3.6vw, 2.9rem); max-width: 20ch; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.stat { padding: 0 28px; }
.stat:first-child { padding-left: 0; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
.stat dd { margin: 0; display: grid; gap: 6px; }
.num { font-family: var(--mono); font-size: clamp(2.4rem, 4.6vw, 3.5rem); font-weight: 500; letter-spacing: -.03em; line-height: 1; color: var(--fg); }
.num sup { font-size: .45em; top: -.7em; position: relative; }
.unit { font-size: 13.5px; color: var(--fg-2); }

/* ---------- materials ---------- */
.mats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mat {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(26px, 3vw, 40px);
  background: var(--bg-2);
  display: grid; align-content: start; gap: 14px;
}
.mat::before {
  content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px;
  background: var(--metal-rule);
}
.mat__code { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); }
.mat h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.mat__body { color: var(--fg-2); max-width: 44ch; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.tags li {
  font-family: var(--mono); font-size: 11px; color: var(--fg-2);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 6px 10px;
}

/* ---------- feature ---------- */
.feature__h { font-size: clamp(1.75rem, 3.6vw, 2.9rem); max-width: 20ch; margin-bottom: clamp(28px, 4vw, 44px); }
.feature .shot--wide { margin-bottom: 28px; }
.feature__meta {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.feature__meta > div { padding: 20px 24px 0 0; display: grid; gap: 6px; align-content: start; }
.feature__meta > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.feature__meta .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.feature__meta .v { font-size: 14.5px; font-weight: 500; }

/* ---------- gallery ---------- */
.gallery__head { margin-bottom: 28px; }
.gallery__head h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gal__item { min-width: 0; }

/* static photo grid and three up cards (inner pages) */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }

/* ---------- process ---------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--line-2); }
.step { padding: 26px 22px 0 0; display: grid; gap: 10px; align-content: start; position: relative; }
.step + .step { padding-left: 22px; border-left: 1px solid var(--line); }
.step::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 34px; height: 2px; background: var(--accent);
}
.step + .step::before { left: 22px; }
.step h3 { font-size: 1.1rem; }
.step p { color: var(--fg-2); font-size: 14px; }

/* ---------- services cards ---------- */
.svcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.svc {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-2);
  overflow: hidden;
  display: grid; grid-template-rows: auto auto 1fr; /* strip, photo, body */
}
.svc::before {
  content: ""; display: block; height: 4px;
  background: linear-gradient(90deg, var(--metal-a), var(--metal-b) 60%, var(--accent));
}
.svc .shot { border: 0; border-radius: 0; }
.svc__body { padding: 24px 26px 28px; display: grid; gap: 10px; align-content: start; }
.svc__n { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--accent-ink); }
.svc h3 { font-size: 1.3rem; }
.svc p { color: var(--fg-2); font-size: 14.5px; }

/* ---------- clients ---------- */
.clients { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.clients__grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-2); }
.clients__grid li {
  padding: 26px 24px 0 0;
  font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: -.01em;
  position: relative;
}
.clients__grid li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.clients__grid li::before { content: ""; position: absolute; top: -1px; left: 0; width: 34px; height: 2px; background: var(--accent); }
.clients__grid li + li::before { left: 24px; }

/* ---------- call to action band ---------- */
.cta { padding: clamp(64px, 9vw, 120px) 0; }
.cta__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(32px, 5vw, 72px); align-items: end; }
.cta h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); max-width: 18ch; }
.cta p { color: var(--band-fg-2); max-width: 46ch; margin-top: 18px; }
.cta__act { display: grid; gap: 18px; justify-items: start; }
.cta__phone { font-family: var(--mono); font-size: 1.05rem; color: var(--band-fg); text-decoration: none; }
.cta__phone:hover { color: var(--accent); }
.cta__phone span { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--band-fg-2); margin-bottom: 6px; }

/* ---------- contact ---------- */
.contact__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.contact__info h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); margin-bottom: 16px; }
.contact__lead { color: var(--fg-2); max-width: 40ch; margin-bottom: 34px; }
.contact__block { display: flex; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); }
.contact__block .material-symbols-outlined { font-size: 20px; color: var(--accent); flex: none; margin-top: 2px; }
.contact__block .k { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 5px; }
.contact__block .v { font-size: 15px; font-weight: 500; text-decoration: none; }
.contact__block a.v:hover { color: var(--accent-ink); }
.contact__block .sub { display: block; font-size: 13px; color: var(--fg-2); margin-top: 4px; }
.contact__block .sub a { color: var(--accent-ink); }

/* map frame: same shell as a photo, iframe fills it */
.map {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 21 / 9;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* ---------- form ---------- */
.form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(24px, 3vw, 36px);
}
.field { display: grid; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; color: var(--fg); }
.field input, .field select, .field textarea {
  width: 100%;
  font: 400 15px/1.5 var(--sans);
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 12px 14px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 108px; }
.field select { appearance: none; background-image: none; cursor: pointer; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.field .hint { font-size: 12.5px; color: var(--fg-2); }
.field .err { font-size: 12.5px; color: var(--danger); font-weight: 500; }
.field.has-err input, .field.has-err textarea { border-color: var(--danger); }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.status { font-size: 13.5px; color: var(--fg-2); max-width: 42ch; }
.status.is-ok { color: var(--fg); font-weight: 500; }

.spinner {
  display: none;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--on-accent) 35%, transparent);
  border-top-color: var(--on-accent);
  animation: spin .7s linear infinite;
}
.is-busy .spinner { display: block; }
.is-busy { pointer-events: none; opacity: .8; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding-top: clamp(48px, 6vw, 72px); }
.foot__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; padding-bottom: 48px; }
.foot__brand { display: grid; gap: 16px; justify-items: start; align-content: start; }
.foot__logo { width: 168px; background: var(--logo-plate); padding: var(--logo-pad); border-radius: var(--r); }
.foot__logo img { width: 100%; height: auto; }
.foot__brand p { font-size: 14px; color: var(--fg-2); max-width: 34ch; }
.foot__links { display: grid; gap: 10px; align-content: start; }
.foot__links a { text-decoration: none; font-size: 14px; color: var(--fg-2); }
.foot__links a:hover { color: var(--fg); }
.foot__links a[aria-current="page"] { color: var(--fg); font-weight: 600; }
.foot__addr { font-style: normal; font-size: 14px; color: var(--fg-2); line-height: 1.8; }
.foot__addr a { text-decoration: none; }
.foot__addr a:hover { color: var(--accent-ink); }
.foot__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 22px; padding-bottom: 30px;
  font-family: var(--mono); font-size: 11.5px; color: var(--fg-3);
}

/* =============================================================
   Build motifs. Decoration drawn from the process itself: layer
   lines that drift at different rates as you scroll, a laser scan
   between sections, the build volume filling one layer at a time,
   the 67 degree hatch turn between layers, a laser pass over a
   photo on hover. Each scroll coupled piece is a CSS animation
   named px-*; the motion block below binds it to a scroll or view
   timeline, and main.js seeks the same animation in browsers
   without them. The static values here are what reduced motion
   and no-JS visitors see.
   ============================================================= */

/* layer lines: three sheets of teal hairlines plus one lit layer.
   Each sheet overhangs its box by its travel (--t) so it never
   shows an edge, and --dir sets which way it drifts. */
.layers {
  position: absolute; inset: 0;
  overflow: hidden; overflow: clip;
  pointer-events: none;
  --lc: color-mix(in srgb, var(--accent) 24%, transparent);
}
.layers__s {
  position: absolute; left: 0; right: 0;
  top: calc(-1 * var(--t)); bottom: calc(-1 * var(--t));
  background: repeating-linear-gradient(180deg, var(--lc) 0 1px, transparent 1px var(--gap));
  opacity: var(--o, 1);
}
.layers__s--1 { --gap: 34px;  --t: 40px;  --dir: 1;  --o: .4; }
.layers__s--2 { --gap: 89px;  --t: 90px;  --dir: -1; --o: .8; }
.layers__s--3 { --gap: 233px; --t: 180px; --dir: -1; --o: 1; }
.layers__z {
  top: 64%; bottom: auto; height: 1px;
  background: var(--accent);
  box-shadow: 0 0 14px 1px var(--accent);
  opacity: .5;
  --t: 120px; --dir: -1;
}
.hero .layers {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .45), #000 55%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .45), #000 55%);
}
.pagehead__stage .layers { --lc: color-mix(in srgb, var(--accent) 34%, transparent); }
.cta .layers__s--1 { --o: .26; } /* the hatch already textures the band */

/* scan: a hairline between sections. The laser spot crosses it
   while the line travels the viewport. */
.scan { position: relative; height: 14px; overflow: hidden; overflow: clip; }
.scan--gap { margin-bottom: clamp(40px, 6vw, 72px); }
.scan::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-2); }
.scan::after {
  content: ""; position: absolute; left: 0; top: calc(50% - 1px); height: 3px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--accent) 38%, var(--accent-2) 50%, var(--accent) 62%, transparent) 0 0 / 220px 100% no-repeat;
  filter: drop-shadow(0 0 4px var(--accent));
  transform: translateX(35%);
}

/* hatch: the scan strategy. Stripes that turn 67 degrees, the
   rotation between one layer and the next, as the band scrolls. */
.hatch {
  position: absolute; right: -8%; top: 50%;
  width: 560px; height: 560px;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent) 34%, transparent) 0 1px, transparent 1px 9px);
  -webkit-mask-image: radial-gradient(circle, #000 38%, transparent 68%);
  mask-image: radial-gradient(circle, #000 38%, transparent 68%);
  transform: translateY(-50%) rotate(34deg);
}

/* laser pass: hovering a photo sweeps a teal line down it */
.shot--laser::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, transparent, var(--accent) 50%, transparent) 0 0 / 100% 2px no-repeat,
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 30%, transparent) 50%, transparent) 0 0 / 100% 28px no-repeat;
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.shot--laser:hover::after { opacity: 1; }

/* build volume: an isometric 400 mm cube. The current layer plane
   rises through it and the built layers hatch in beneath. The two
   side faces are rectangles inside skewed groups, so clipping them
   from the top in their own space cuts parallel to the plane. */
.vol { margin: 0; width: 100%; max-width: 380px; justify-self: end; }
.vol svg { display: block; width: 100%; height: auto; overflow: visible; }
.vol__hidden line { stroke: var(--fg-3); stroke-width: 1; stroke-dasharray: 3 4; opacity: .45; }
.vol__edges polygon, .vol__edges line { fill: none; stroke: var(--fg-3); stroke-width: 1; opacity: .8; }
.vol__hatch-bg { fill: var(--accent); opacity: .12; }
.vol__hatch-ln { fill: var(--accent); opacity: .6; }
.vol__face { fill: url(#vol-hatch); clip-path: inset(50% 0 0 0); }
.vol__face--r { opacity: .7; }
.vol__plane {
  transform: translateY(-75px);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent));
}
.vol__plane polygon { fill: var(--accent); fill-opacity: .2; stroke: var(--accent); stroke-width: 1.25; }
.vol__plane line { stroke: var(--accent); stroke-width: 1; }
.vol__plane circle { fill: var(--accent); }
.vol text { font: 500 9.5px var(--mono); letter-spacing: .1em; fill: var(--fg-3); }
.vol__plane text { fill: var(--accent-ink); }
.vol figcaption {
  display: table; margin-left: auto; /* shrink to fit, so the plate knocks the dots out behind the words */
  font-family: var(--mono); font-size: 11px; color: var(--fg-3);
  letter-spacing: .04em; margin-top: 10px; padding: 3px 6px;
  background: var(--bg-2);
}

/* =============================================================
   Motion. Entry cascade on the hero, IntersectionObserver
   reveals elsewhere, scroll and view timelines on the build
   motifs. All of it collapses under reduced motion.
   ============================================================= */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(18px); animation: rise .7s var(--ease) forwards; animation-delay: var(--d, 0ms); }
  @keyframes rise { to { opacity: 1; transform: none; } }

  .reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }

  .bento .cell.reveal:nth-child(2) { transition-delay: .06s; }
  .bento .cell.reveal:nth-child(3) { transition-delay: .12s; }
  .bento .cell.reveal:nth-child(4) { transition-delay: .18s; }
  .bento .cell.reveal:nth-child(5) { transition-delay: .24s; }
  .stat.reveal:nth-child(2), .step.reveal:nth-child(2), .cred.reveal:nth-child(2), .svc.reveal:nth-child(2), .pgrid .reveal:nth-child(2), .gal .reveal:nth-child(2), .trio .reveal:nth-child(2), .clients__grid .reveal:nth-child(2) { transition-delay: .06s; }
  .stat.reveal:nth-child(3), .step.reveal:nth-child(3), .cred.reveal:nth-child(3), .svc.reveal:nth-child(3), .pgrid .reveal:nth-child(3), .gal .reveal:nth-child(3), .trio .reveal:nth-child(3), .clients__grid .reveal:nth-child(3) { transition-delay: .12s; }
  .stat.reveal:nth-child(4), .step.reveal:nth-child(4), .cred.reveal:nth-child(4), .clients__grid .reveal:nth-child(4) { transition-delay: .18s; }
  .step.reveal:nth-child(5) { transition-delay: .24s; }

  /* scroll coupled decoration */
  .nav::after { animation-name: px-progress; }
  .layers__s { animation-name: px-drift; }
  .scan::after { animation-name: px-scan; }
  .hatch { animation-name: px-hatch; }
  .vol__plane { animation-name: px-rise; }
  .vol__face { animation-name: px-build; }
  .nav::after, .layers__s, .scan::after, .hatch, .vol__plane, .vol__face {
    animation-timing-function: linear;
    animation-fill-mode: both;
  }
  @supports (animation-timeline: view()) {
    .layers__s, .scan::after, .hatch { animation-timeline: view(); animation-duration: auto; }
    .nav::after { animation-timeline: scroll(root); animation-duration: auto; }
    .vol { view-timeline-name: --vol; }
    .vol__plane, .vol__face { animation-timeline: --vol; animation-duration: auto; }
  }
  @supports not (animation-timeline: view()) {
    /* paused at one second long; main.js seeks them by scroll position */
    .nav::after, .layers__s, .scan::after, .hatch, .vol__plane, .vol__face { animation-duration: 1s; animation-play-state: paused; }
  }

  .shot--laser:hover::after { animation: laser-pass 1.6s linear infinite; }

  /* Home page load: the header mark prints from the bottom up. The
     image is revealed layer by layer (stepped clip) while a teal
     laser line rides the build front, hatching side to side. The
     frame shows the top 346 of the image's 446 rows, so the clip
     starts at 77.6% to begin at the visible bottom edge. */
  .brand__logo--build { position: relative; }
  .brand__logo--build img {
    animation: logo-build 1.8s steps(30, end) .25s both;
  }
  .brand__logo--build::before,
  .brand__logo--build::after {
    content: ""; position: absolute; pointer-events: none;
    bottom: 0; opacity: 0;
  }
  /* the laser line across the build front */
  .brand__logo--build::after {
    left: 0; right: 0; height: 2px; margin-bottom: -1px;
    background: linear-gradient(90deg, transparent, var(--accent) 12%, #E9FFF8 50%, var(--accent) 88%, transparent);
    box-shadow: 0 0 6px 1px var(--accent), 0 0 14px 2px rgba(43, 201, 164, .55);
    animation: logo-laser 1.8s steps(30, end) .25s both;
  }
  /* the melt pool, scanning back and forth along the line */
  .brand__logo--build::before {
    left: 0; width: 6px; height: 6px; margin: 0 0 -3px -3px;
    border-radius: 50%; z-index: 1;
    background: #FFFFFF;
    box-shadow: 0 0 4px 2px #E9FFF8, 0 0 10px 4px var(--accent);
    animation:
      logo-laser 1.8s steps(30, end) .25s both,
      logo-hatch .15s linear .25s 12 alternate;
  }
}

@keyframes logo-build {
  from { clip-path: inset(77.6% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes logo-laser {
  0%   { bottom: 0;    opacity: 1; }
  96%  { bottom: 100%; opacity: 1; }
  100% { bottom: 100%; opacity: 0; }
}
@keyframes logo-hatch { from { left: 0; } to { left: 100%; } }

@keyframes px-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes px-drift {
  from { transform: translateY(calc(var(--t) * var(--dir) * -1)); }
  to   { transform: translateY(calc(var(--t) * var(--dir))); }
}
@keyframes px-scan { from { transform: translateX(-220px); } to { transform: translateX(100%); } }
@keyframes px-hatch { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(67deg); } }
@keyframes px-rise { from { transform: translateY(0); } to { transform: translateY(-150px); } }
@keyframes px-build { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes laser-pass { from { background-position: 0 0, 0 0; } to { background-position: 0 100%, 0 100%; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* =============================================================
   Responsive. Every multi column block declares its collapse.
   ============================================================= */
@media (max-width: 1180px) {
  .brand__full { display: none; }
  .nav__links { gap: 20px; }
}

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .split, .split--flip { grid-template-columns: 1fr; }
  .split--flip .split__copy { order: 0; }
  .contact__grid { grid-template-columns: 1fr; }
  .cta__grid { grid-template-columns: 1fr; align-items: start; }
  .cell--a { grid-column: 1 / -1; grid-row: auto; }
  .cell--b, .cell--c, .cell--d, .cell--e { grid-column: span 6; }
  .svcs { grid-template-columns: 1fr; }
  .svc { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr; }
  .svc::before { grid-column: 1 / -1; }
  .svc .shot { aspect-ratio: 1 / 1; height: 100%; }
  .clients__grid { grid-template-columns: repeat(2, 1fr); border-top: 0; }
  .clients__grid li { border-top: 1px solid var(--line-2); padding: 22px 20px 22px 0; }
  .clients__grid li + li { border-left: 0; padding-left: 0; }
  .clients__grid li::before, .clients__grid li + li::before { left: 0; }
  .steps { grid-template-columns: repeat(2, 1fr); border-top: 0; }
  .step { border-top: 1px solid var(--line-2); padding: 26px 22px 26px 0; }
  .step + .step { border-left: 0; padding-left: 0; }
  .step::before, .step + .step::before { left: 0; }
  .feature__meta { grid-template-columns: repeat(2, 1fr); }
  .feature__meta > div { padding: 20px 20px 20px 0; }
  .feature__meta > div + div { border-left: 0; padding-left: 0; }
  .feature__meta > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .pgrid, .trio, .gal { grid-template-columns: repeat(2, 1fr); }
  .pagehead__media .shot--cine, .pagehead__media .map { aspect-ratio: 16 / 9; }
  .platform__top { grid-template-columns: 1fr; align-items: start; }
  .vol { justify-self: start; max-width: 320px; }
  .vol figcaption { margin-left: 0; }
  .nav__z { display: none; }
}

@media (max-width: 760px) {
  :root { --nav-h: 62px; --nav-h-top: 88px; --logo-w-top: 120px; }

  .nav__burger { display: inline-grid; }
  .nav__links {
    position: fixed; inset: var(--nav-cur) 0 auto 0;
    display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 8px 24px 20px;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .nav__links a[aria-current="page"] { text-decoration: none; border-left: 3px solid var(--accent); padding-left: 12px; }
  .nav__cta { display: none; }

  .hero { padding-top: 40px; }
  .creds__grid { grid-template-columns: 1fr 1fr; }
  .cred { padding: 18px 16px 18px 0; }
  .cred:nth-child(odd) { padding-left: 0; border-left: 0; }
  .cred:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
  .cred:nth-child(n+3) { border-top: 1px solid var(--line); }

  .bento { gap: 12px; }
  .cell--b, .cell--c, .cell--d, .cell--e { grid-column: 1 / -1; }
  .mats { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; gap: 0; }
  .stat { padding: 22px 20px; border-top: 1px solid var(--line); }
  .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--line); }
  .steps { grid-template-columns: 1fr; }
  .svc { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
  .svc .shot { aspect-ratio: 16 / 9; height: auto; }
  .clients__grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; gap: 28px; }
  .rail { grid-template-columns: 1fr; }
  .rail li + li { border-left: 0; border-top: 1px solid var(--band-line); }
  .pgrid, .trio { grid-template-columns: 1fr; }
  .pagehead__media .shot--cine, .pagehead__media .map { aspect-ratio: 4 / 3; }
  .copyrule { padding-left: 20px; }
  .pagehead__copy.copyrule { padding-left: 44px; }
  .hatch { width: 380px; height: 380px; top: auto; bottom: -300px; right: -140px; } /* lower right corner, clear of the copy */
  .layers__s--3 { --gap: 144px; }
}

/* =============================================================
   Landing pages: service, process, material, cost, guide and
   location pages. Breadcrumbs, the two column article layout,
   spec tables, FAQ, related cards, the nav dropdown and the
   footer link columns. Same tokens, same 4px radius.
   ============================================================= */

/* ---------- breadcrumbs (sit where the eyebrow sits) ---------- */
.crumbs { margin-bottom: 20px; }
.crumbs ol {
  display: flex; flex-wrap: wrap; gap: 6px 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-3);
}
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--line-2); }
.crumbs a { color: var(--accent-ink); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 4px; }
.crumbs [aria-current="page"] { color: var(--fg-2); }

/* ---------- article: long form copy beside a sticky aside ---------- */
.article {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
.prose { max-width: 68ch; min-width: 0; }
.prose > h2 { font-size: clamp(1.55rem, 2.8vw, 2.2rem); margin: 0 0 16px; max-width: 24ch; }
.prose > h2 + .reveal, .prose > h2 + p, .prose > h2 + ul, .prose > h2 + ol { margin-top: 0; }
.prose > * + h2 { margin-top: clamp(40px, 5vw, 56px); }
.prose h3 { font-size: 1.2rem; margin: 28px 0 10px; }
.prose p { color: var(--fg-2); }
.prose p + p, .prose ul + p, .prose ol + p, .prose .reveal + p { margin-top: 14px; }
.prose ul, .prose ol { margin: 14px 0 0; display: grid; gap: 10px; }
.prose p + ul, .prose p + ol { margin-top: 14px; }
.prose li { position: relative; color: var(--fg-2); }
.prose ul li { padding-left: 22px; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 2px; background: var(--accent); }
.prose ol { counter-reset: n; }
.prose ol li { padding-left: 36px; counter-increment: n; }
.prose ol li::before {
  content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: .28em;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--accent-ink);
}
.prose strong { color: var(--fg); font-weight: 600; }
.prose a { color: var(--accent-ink); text-decoration-color: color-mix(in srgb, var(--accent-ink) 40%, transparent); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose sub { font-size: .7em; line-height: 0; }
.prose > .reveal { margin-top: 18px; }
.prose > .reveal + p { margin-top: 18px; }

.aside { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 14px; }
.aside__box {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-2);
  padding: 22px 24px 24px 26px;
  display: grid; gap: 12px; justify-items: start;
}
.aside__box::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--metal-rule); }
.aside__box h3 { font-size: 1.05rem; }
.aside__box p { font-size: 14px; color: var(--fg-2); }
.aside__box .btn { margin-top: 4px; }
.aside__phone { font-family: var(--mono); font-size: 15px; text-decoration: none; color: var(--fg); }
.aside__phone:hover { color: var(--accent-ink); }
.facts { display: grid; width: 100%; }
.facts div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.facts dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); padding-top: 3px; }
.facts dd { font-size: 13.5px; color: var(--fg); font-weight: 500; }
.facts dd a { text-decoration: none; }
.facts dd a:hover { color: var(--accent-ink); }

/* ---------- inline text link with an arrow ---------- */
.textlink {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-ink); text-decoration: none;
}
.textlink::after { content: "\2192"; }
.textlink:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- spec tables ---------- */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.spec { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.spec caption {
  text-align: left; padding: 0 0 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3);
}
.spec th, .spec td { text-align: left; vertical-align: top; padding: 12px 18px 12px 0; border-top: 1px solid var(--line); }
.spec tbody th { font-weight: 600; color: var(--fg); width: 36%; }
.spec td { color: var(--fg-2); }
.spec thead th {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  color: var(--fg-3); border-top: 0; padding-top: 0; width: auto;
}
.spec tbody tr:last-child th, .spec tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.spec--wide tbody th { width: auto; min-width: 150px; }
.spec--wide td { min-width: 150px; }
.spec sub { font-size: .7em; line-height: 0; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line-2); max-width: 78ch; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 18px;
  padding: 20px 0; font-weight: 600; font-size: 1.05rem; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--mono); font-size: 18px; line-height: 1.2; color: var(--accent-ink); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--accent-ink); }
.faq details > div { padding: 0 40px 22px 0; color: var(--fg-2); max-width: 68ch; }
.faq details > div p + p { margin-top: 12px; }
.faq details > div a { color: var(--accent-ink); }

/* ---------- related pages ---------- */
.more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.more a {
  position: relative; overflow: hidden;
  display: grid; gap: 8px; align-content: start;
  padding: 24px 24px 26px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-2);
  text-decoration: none; color: inherit;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.more a::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--metal-a), var(--metal-b) 60%, var(--accent)); }
.more a:hover { border-color: var(--accent-ink); background: var(--bg-3); }
.more .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.more h3 { font-size: 1.1rem; }
.more p { font-size: 14px; color: var(--fg-2); }

/* ---------- nav: Services dropdown ---------- */
.nav__group { position: relative; display: flex; align-items: center; gap: 2px; }
.nav__links a.is-within { color: var(--fg); }
.nav__more {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 3px; background: transparent; color: var(--fg-2); cursor: pointer;
}
.nav__more:hover { color: var(--fg); }
.nav__more .material-symbols-outlined { font-size: 18px; transition: transform .18s var(--ease); }
.nav__more[aria-expanded="true"] .material-symbols-outlined { transform: rotate(180deg); }
.nav__menu {
  position: absolute; top: calc(100% + 14px); left: -22px; z-index: 60;
  display: none; grid-template-columns: repeat(3, max-content); gap: 30px;
  padding: 22px 26px 24px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .14);
}
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } /* keeps hover alive across the gap */
.nav__menu::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--metal-a), var(--metal-b) 60%, var(--accent)); }
.nav__group:hover .nav__menu, .nav__group:focus-within .nav__menu, .nav__group.is-open .nav__menu { display: grid; }
.nav__col { display: grid; gap: 4px; align-content: start; }
.nav__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
.nav__links .nav__menu a { font-size: 14px; font-weight: 500; color: var(--fg-2); white-space: nowrap; padding: 4px 0; }
.nav__links .nav__menu a:hover { color: var(--fg); }
.nav__links .nav__menu a[aria-current="page"] { color: var(--fg); text-underline-offset: 4px; }

/* ---------- footer link columns ---------- */
.foot__grid { grid-template-columns: 1.3fr 1fr 1fr .9fr; }
.foot__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 2px; }
.foot__links a + .foot__k { margin-top: 14px; }

@media (prefers-reduced-motion: no-preference) {
  .more .reveal:nth-child(2) { transition-delay: .06s; }
  .more .reveal:nth-child(3) { transition-delay: .12s; }
  .more .reveal:nth-child(4) { transition-delay: .18s; }
  .more .reveal:nth-child(5) { transition-delay: .24s; }
  .more .reveal:nth-child(6) { transition-delay: .30s; }
}

@media (max-width: 980px) {
  .article { grid-template-columns: minmax(0, 1fr); } /* minmax(0) so a wide table scrolls inside .tablewrap instead of widening the page */
  .aside { position: static; grid-template-columns: 1fr 1fr; }
  .more { grid-template-columns: repeat(2, 1fr); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .nav__menu { left: -8px; grid-template-columns: repeat(2, max-content); }
}

@media (max-width: 760px) {
  .aside { grid-template-columns: 1fr; }
  .more { grid-template-columns: 1fr; }
  .spec { font-size: 13.5px; }
  .spec th, .spec td { padding-right: 14px; }
  .spec tbody th { width: 40%; }
  .spec--wide tbody th, .spec--wide td { min-width: 120px; }
  .faq summary { font-size: 1rem; }
  .faq details > div { padding-right: 0; }
  .foot__grid { grid-template-columns: 1fr; }
  .foot__links { gap: 8px; }

  /* the dropdown flattens into the mobile menu */
  .nav__links.is-open { max-height: calc(100vh - var(--nav-cur)); max-height: calc(100dvh - var(--nav-cur)); overflow-y: auto; }
  .nav__group { display: block; }
  .nav__group > a { display: block; }
  .nav__more { display: none; }
  .nav__menu {
    position: static; display: grid; grid-template-columns: 1fr; gap: 0;
    padding: 2px 0 6px 14px; min-width: 0;
    background: transparent; border: 0; box-shadow: none;
  }
  .nav__menu::before, .nav__menu::after { display: none; }
  .nav__col { gap: 0; }
  .nav__k { margin: 12px 0 2px; }
  .nav__links .nav__menu a { font-size: 15px; padding: 10px 0; white-space: normal; }
  .nav__links .nav__menu a[aria-current="page"] { border-left: 3px solid var(--accent); padding-left: 12px; }
}

/* ---------- blog ----------
   The index lists posts as wide cards; a post reuses .article and
   .prose from the landing pages, with a date line under the H1. */
.postmeta {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3);
}
.postmeta > * + *::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 18px; vertical-align: middle; background: var(--accent); border-radius: 50%; }
.pagehead .postmeta { margin-top: 4px; }
.pagehead--post h1 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
.prose .post__lead { font-size: clamp(1.08rem, 1.5vw, 1.2rem); color: var(--fg); }
.prose .post__close { margin-top: clamp(32px, 4vw, 44px); padding-top: 22px; border-top: 1px solid var(--line); }
.prose .post__video { margin: clamp(28px, 4vw, 40px) 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #000; }

.posts { display: grid; gap: 18px; }
.postcard {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: stretch;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-2); color: inherit; text-decoration: none;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.postcard::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; z-index: 1; background: linear-gradient(90deg, var(--metal-a), var(--metal-b) 60%, var(--accent)); }
.postcard:hover { border-color: var(--accent-ink); background: var(--bg-3); }
.postcard .shot { border: 0; border-radius: 0; aspect-ratio: auto; min-height: 260px; }
.postcard__copy { display: grid; gap: 14px; align-content: center; padding: clamp(24px, 3.5vw, 44px); }
.postcard h2 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
.postcard p:not(.postmeta) { color: var(--fg-2); }
.postcard__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent-ink); }
.postcard__more .material-symbols-outlined { font-size: 20px; transition: transform .18s var(--ease); }
.postcard:hover .postcard__more .material-symbols-outlined { transform: translateX(4px); }

@media (max-width: 760px) {
  .postcard { grid-template-columns: 1fr; }
  .postcard .shot { aspect-ratio: 16 / 9; min-height: 0; }
}