/* Diverse Metal Products — page theme and markup, on top of scrollcraft.css.
   Do not restyle .sc-stage, .sc-copy or any [data-sc-*] selector: those are
   the mechanism. Everything below is this page's own classes. */

:root {
  /* Clean modern: white canvas, very light blue surface, one light-blue
     accent. Per the user's direct correction away from the ink-on-paper
     industrial palette. */
  --sc-canvas:      #FFFFFF;
  --sc-surface:     #EEF5FC;
  --sc-ink:         #11161D;
  --sc-ink-soft:    #5B6472;
  --sc-accent:      #4DA3FF;
  --sc-accent-ink:  #0B1420;

  /* a deeper step of the accent for small text on white, where the
     full-brightness accent does not clear body-text contrast */
  --sc-accent-text: #1E73D1;

  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Archivo", system-ui, sans-serif;
  --sc-font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* the literal sheet metal in the laser + stamp panels: a cool blue-grey
     distinct from both the white canvas and the pale-blue surface */
  --dmp-steel: #D7E3EF;
  --dmp-ink-paper: var(--sc-ink);

  /* shadows and edge light tuned for a white ground: low alpha, cool neutral
     hue, white edge highlight (taste.md, "If the canvas is light") */
  --sc-shadow-color: 215 30% 22%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.08),
           0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.06);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.07),
           0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.10);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.07),
           0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.12),
           0 48px 90px -24px hsl(var(--sc-shadow-color) / 0.10);
  --sc-edge: inset 0 1px 0 color-mix(in oklab, white 85%, transparent);
}

body { background: var(--sc-canvas); }

/* nav jumps land below the fixed bar instead of underneath it */
section[id] { scroll-margin-top: 4.5rem; }

/* ---- nav bar ------------------------------------------------------------ */
.bar {
  position: fixed; inset-inline: 0; top: 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sc-4) var(--sc-gutter);
  gap: var(--sc-5);
  transition: background var(--sc-d-base) var(--sc-ease-out), backdrop-filter var(--sc-d-base) var(--sc-ease-out);
}
.bar.is-solid { background: color-mix(in oklab, var(--sc-canvas) 86%, transparent); backdrop-filter: blur(10px); box-shadow: var(--sc-e1); }
.bar__mark { display: flex; align-items: center; gap: var(--sc-2); color: var(--sc-ink); text-decoration: none; font-family: var(--sc-font-display); font-weight: 700; letter-spacing: var(--sc-track-normal); font-size: var(--sc-t-sm); }
.bar__mark svg { width: 20px; height: 18px; fill: none; stroke: var(--sc-accent); stroke-width: 2; }
.bar__rail { display: none; gap: var(--sc-6); list-style: none; }
.bar__rail a { color: var(--sc-ink-soft); text-decoration: none; font-size: var(--sc-t-sm); transition: color var(--sc-d-fast) var(--sc-ease-out); }
.bar__rail a:hover { color: var(--sc-ink); }
.bar__rail a[aria-current="true"] { color: var(--sc-accent-text); }
@media (min-width: 860px) { .bar__rail { display: flex; } }
.bar__cta {
  font-family: var(--sc-font-text); font-weight: 600; font-size: var(--sc-t-sm);
  color: var(--sc-accent-ink); background: var(--sc-accent);
  padding: 0.6em 1.1em; border-radius: var(--sc-r-pill); text-decoration: none;
  transition: transform var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out);
}
.bar__cta:hover { transform: translateY(-1px); box-shadow: var(--sc-e2); }
.bar__cta:active { transform: scale(0.97); }
.bar__cta:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }

@media (max-width: 560px) {
  .bar { padding-block: var(--sc-3); }
  .bar__mark span { display: none; }
  .bar__mark svg { width: 24px; height: 21px; }
  .bar__cta { font-size: var(--sc-t-xs); padding: 0.55em 0.9em; white-space: nowrap; }
}

/* ---- shared bits ---------------------------------------------------------*/
.eyebrow { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); margin: 0 0 var(--sc-3); }
.eyebrow--accent { color: var(--sc-accent-text); font-weight: 500; }

.cta {
  display: inline-flex; align-items: center; gap: var(--sc-2);
  font-family: var(--sc-font-text); font-weight: 600; font-size: var(--sc-t-base);
  color: var(--sc-accent-ink); background: var(--sc-accent);
  padding: 0.85em 1.6em; border-radius: var(--sc-r-pill); text-decoration: none;
  white-space: nowrap; border: 1px solid transparent;
  transition: transform var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out);
}
.cta:hover { transform: translateY(-2px); box-shadow: var(--sc-e3); }
.cta:active { transform: scale(0.97); }
.cta:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }
.cta--ghost { background: transparent; color: var(--sc-ink); border-color: var(--sc-hairline-strong); }
.cta--ghost:hover { border-color: var(--sc-accent); color: var(--sc-ink); box-shadow: none; }

.dim-label { font-family: var(--sc-font-mono); font-size: 13px; letter-spacing: 0.04em; fill: currentColor; }
.dim-label--lg { font-size: 20px; }

.sc-section--tight { padding-block: clamp(3rem, 6vw, 6.5rem); }

/* ================================================================
   1 · HERO
   ================================================================ */
.hero { background: var(--sc-canvas); overflow: hidden; display: flex; align-items: center; }
.hero__ground {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 65% 55% at 74% 45%, color-mix(in oklab, var(--sc-accent) 12%, transparent), transparent 62%);
}
.hero__plane { position: absolute; inset: -10%; color: var(--sc-ink); pointer-events: none; }
.hero__plane svg { width: 100%; height: 100%; }
.hero__plane--grid { color: color-mix(in oklab, var(--sc-accent-text) 7%, transparent); opacity: 0.6; }

.hero__layout {
  position: relative; z-index: 1; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: clamp(2rem, 5vw, 5rem);
  padding: calc(var(--sc-8) + 1rem) var(--sc-gutter) var(--sc-6);
}
.hero__copy { max-width: 38rem; flex: 0 1 38rem; }
.hero .hero__title { font-size: clamp(2.3rem, 1.2rem + 3.3vw, 4rem); line-height: 1.02; letter-spacing: var(--sc-track-tight); }
.hero__line { display: block; overflow: hidden; white-space: nowrap; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__line > span { display: inline-block; }
.hero__sub { margin-top: var(--sc-5); max-width: 40ch; }
.hero__copy .cta { margin-top: var(--sc-6); }

/* the layout slot that defines the window's card position; the window itself
   is a full-stage layer clipped to this rect, then to the expanded rect */
.hero__scene { flex: 1 1 30rem; max-width: 46rem; height: min(70svh, 46rem); }

.hero__window {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: #070b11;
  clip-path: inset(50% 50% 50% 50%);
  opacity: 0; transition: opacity 700ms var(--sc-ease-out);
}
.hero__window canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero.is-window-on .hero__window { opacity: 1; }
.no-webgl .hero__window {
  background: radial-gradient(60% 50% at 50% 55%, #1a2c44, #070b11 70%);
}

.hero__window-shadow {
  position: absolute; z-index: 1; pointer-events: none;
  left: var(--wx, 0); top: var(--wy, 0); width: var(--ww, 0); height: var(--wh, 0);
  border-radius: var(--wr, 28px);
  box-shadow: 0 40px 90px -30px rgb(16 42 80 / 0.45), 0 12px 30px -12px rgb(16 42 80 / 0.25);
  opacity: 0; transition: opacity 700ms var(--sc-ease-out);
}
.hero.is-window-on .hero__window-shadow { opacity: 1; }

/* machine HUD, laid over the visible window rect */
.hud {
  position: absolute; left: var(--wx, 0); top: var(--wy, 0); width: var(--ww, 0); height: var(--wh, 0);
  border-radius: var(--wr, 28px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.12);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(14px, 2vw, 22px);
  font-family: var(--sc-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgb(214 230 248 / 0.78);
}
.hud::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(7 11 17 / 0.55), transparent 22%),
    linear-gradient(28deg, rgb(7 11 17 / calc(var(--we, 0) * 0.94)) 0%, rgb(7 11 17 / calc(var(--we, 0) * 0.7)) 32%, transparent 62%);
}
.hud__top, .hud__bottom { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hud__bottom { justify-content: flex-end; }
.hud__tag { display: inline-flex; align-items: center; gap: 8px; }
.hud__dot { width: 7px; height: 7px; border-radius: 50%; background: #4DA3FF; box-shadow: 0 0 0 3px rgb(77 163 255 / 0.25); animation: hudPulse 1.6s ease-in-out infinite; }
.hud__xy { font-variant-numeric: tabular-nums; white-space: pre; }
.hud__part { color: #fff; letter-spacing: 0.06em; }
.hud__state { min-width: 9ch; text-align: right; color: #ffb27a; }
.hud__bar { width: clamp(80px, 12vw, 160px); height: 3px; border-radius: 3px; background: rgb(255 255 255 / 0.14); overflow: hidden; }
.hud__bar > i { display: block; height: 100%; background: linear-gradient(90deg, #4DA3FF, #9fd0ff); transform-origin: left; transform: scaleX(0); }
@keyframes hudPulse { 50% { opacity: 0.35; } }

/* caption that takes over once the window has expanded */
.hero__caption {
  position: absolute; z-index: 3;
  left: calc(var(--wx, 0px) + clamp(20px, 3.2vw, 52px));
  bottom: calc(100% - var(--wy, 0px) - var(--wh, 0px) + clamp(48px, 7vh, 76px));
  max-width: min(36rem, calc(var(--ww, 100vw) - 48px));
  color: #fff;
}
.hero__caption-eyebrow { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: #8cc4ff; margin: 0 0 var(--sc-3); }
.hero__caption-title { font-family: var(--sc-font-display); font-weight: 800; font-size: var(--sc-t-3xl); line-height: 1.02; letter-spacing: var(--sc-track-tight); margin: 0; text-wrap: balance; }
.hero__caption-body { margin: var(--sc-4) 0 0; max-width: 42ch; color: rgb(226 236 248 / 0.86); line-height: var(--sc-leading-body); }

/* entrance: lines rise from behind a mask, the rest fades up after them */
@media (prefers-reduced-motion: no-preference) {
  .hero__line > span { animation: heroLine 1000ms var(--sc-ease-out) backwards; animation-delay: calc(120ms + var(--i) * 90ms); }
  .hero__in { animation: heroIn 900ms var(--sc-ease-out) backwards; animation-delay: calc(140ms + var(--i) * 90ms); }
}
@keyframes heroLine { from { transform: translateY(105%); } to { transform: translateY(0); } }
@keyframes heroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  .hero { align-items: flex-start; }
  .hero__layout { flex-direction: column; justify-content: flex-start; align-items: stretch; padding-top: clamp(4.5rem, 11vh, 5.5rem); padding-bottom: var(--sc-4); gap: var(--sc-5); height: auto; min-height: 100%; }
  .hero__copy { max-width: none; flex: none; }
  .hero__scene { flex: none; width: 100%; max-width: none; height: min(36svh, 20rem); }
  .hero__copy .cta { margin-top: var(--sc-5); }
  .hud { font-size: 9.5px; }
  .hud__xy { display: none; }
  .hero__caption-title { font-size: var(--sc-t-2xl); }
  .hero__caption-body { font-size: var(--sc-t-sm); }
}

@media (max-width: 400px) {
  .hero .sc-display--lg { font-size: var(--sc-t-2xl); }
}

/* ================================================================
   2 · STAKES (quiet, administrative)
   ================================================================ */
.stakes { max-width: 56rem; }
.stakes h2 { max-width: 28ch; }
.stakes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-6); margin-top: var(--sc-8); }
.stakes__kicker { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-accent-text); margin: 0 0 var(--sc-2); }
@media (max-width: 760px) { .stakes__grid { grid-template-columns: 1fr; gap: var(--sc-5); } }

/* ================================================================
   3 · LASER (peak / signature move)
   ================================================================ */
.laser { background: var(--sc-canvas); overflow: hidden; }
.laser__ground {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 46%, color-mix(in oklab, var(--sc-accent) 7%, transparent), transparent 65%);
}
.laser__copy {
  position: absolute; top: clamp(2rem, 7vh, 5rem); left: 0; right: 0;
  text-align: center; z-index: 2; padding-inline: var(--sc-gutter);
}
.laser__copy h2 { margin-top: var(--sc-3); }

.laser__plate {
  position: relative; z-index: 1; margin: 0 auto;
  width: min(760px, 86vw);
  aspect-ratio: 900 / 700;
  margin-top: clamp(7rem, 20vh, 11rem);
  filter: drop-shadow(0 20px 40px rgb(32 24 12 / 0.18));
}
.laser__plate svg { width: 100%; height: 100%; overflow: visible; }

.plate-sheet { fill: var(--dmp-steel); stroke: var(--dmp-ink-paper); stroke-width: 2.5; }
.plate-hatch { stroke: var(--dmp-ink-paper); stroke-width: 1; }
.plate-cut { fill: var(--sc-ink); stroke: var(--dmp-ink-paper); stroke-width: 2; opacity: 0; }
.kerf-path { fill: none; stroke: var(--sc-accent); stroke-width: 3; filter: drop-shadow(0 0 4px color-mix(in oklab, var(--sc-accent) 55%, transparent)); }
.laser-head { fill: var(--sc-accent); filter: drop-shadow(0 1px 3px color-mix(in oklab, var(--sc-accent) 60%, transparent)); }
.laser-head__dot { fill: var(--sc-canvas); }
.dim-callout { color: var(--dmp-ink-paper); opacity: 0; transition: opacity var(--sc-d-slow) var(--sc-ease-out); }
.dim-callout path { stroke: currentColor; stroke-width: 1; }
.dim-callout text { fill: currentColor; }
.dim-callout.is-on { opacity: 1; }

.laser__caption { position: absolute; left: 0; right: 0; bottom: clamp(2rem, 6vh, 4rem); text-align: center; margin: 0 auto; max-width: 42ch; padding-inline: var(--sc-gutter); color: var(--sc-ink-soft); }

@media (max-width: 760px) {
  .laser__plate { width: min(560px, 92vw); margin-top: clamp(6rem, 24vh, 9rem); }
}

/* ================================================================
   4 · STAMP (flow act + reveal device)
   ================================================================ */
.stamp { padding-block: clamp(4rem, 9vw, 9rem); position: relative; }
.stamp__intro { max-width: 40rem; }
.stamp__intro p { margin-top: var(--sc-4); }

.stamp__figure {
  position: relative; margin: var(--sc-8) auto 0; width: min(640px, 90vw);
  aspect-ratio: 700 / 500; color: var(--dmp-ink-paper);
}
.stamp__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stamp__svg--before { z-index: 1; }
.stamp__svg--after { z-index: 2; }

.stamp__press { position: absolute; inset: 0; pointer-events: none; z-index: 3; mix-blend-mode: normal; opacity: 0; }
.stamp__ram, .stamp__die { display: none; } /* reserved: kept minimal, press read happens through the SVG states rather than an extra die graphic */

.stamp__list { list-style: none; margin: var(--sc-9) auto 0; max-width: 46rem; display: grid; gap: var(--sc-4); }
.stamp__list li { color: var(--sc-ink-soft); padding-left: var(--sc-4); border-left: 1px solid var(--sc-hairline-strong); }
.stamp__list strong { color: var(--sc-ink); font-weight: 700; }

/* ================================================================
   5 · INDUSTRIES (tight grid)
   ================================================================ */
.industries__head h2 { margin-top: var(--sc-2); }
/* every card in a row stretches to the tallest one, so tops and bottoms line
   up, and padding is the same on all four sides */
.industries__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sc-4); margin-top: var(--sc-7);
}
.item {
  background: var(--sc-surface); border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-r-md); padding: var(--sc-5);
  box-shadow: var(--sc-e1);
  display: flex; flex-direction: column;
}
.item::before {
  content: ""; display: block; flex: none; width: 24px; height: 3px; border-radius: 3px;
  background: var(--sc-accent);
}
.item h3 { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); color: var(--sc-ink); margin: var(--sc-4) 0 0; font-weight: 700; line-height: 1.15; }
.item p { color: var(--sc-ink-soft); margin: var(--sc-2) 0 0; font-size: var(--sc-t-sm); line-height: 1.5; }
.industries__close { margin-top: var(--sc-6); }
@media (max-width: 900px) {
  .industries__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .industries__grid .item:last-child { grid-column: span 2; }
}
@media (max-width: 560px) {
  .industries__grid { grid-template-columns: 1fr; gap: var(--sc-3); }
  .industries__grid .item:last-child { grid-column: auto; }
}

/* ================================================================
   6 · TRUST (quiet, administrative)
   ================================================================ */
.trust { max-width: 50rem; }
.trust h2 { max-width: 30ch; }
.trust__link { display: inline-block; margin-top: var(--sc-6); color: var(--sc-ink); text-decoration: underline; text-decoration-color: var(--sc-hairline-strong); text-underline-offset: 4px; }
.trust__link:hover { text-decoration-color: var(--sc-accent); }

/* ================================================================
   6b · STATS + MATERIALS
   ================================================================ */
.stats { max-width: 56rem; }
.stats__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-6); }
.stats__tile { text-align: left; }
.stats__num { font-family: var(--sc-font-display); font-size: var(--sc-t-3xl); font-weight: 800; color: var(--sc-ink); margin: 0; font-variant-numeric: tabular-nums; }
.stats__label { color: var(--sc-ink-soft); margin: var(--sc-1) 0 0; font-size: var(--sc-t-sm); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-8); }
.chip {
  font-size: var(--sc-t-sm); font-weight: 600; color: var(--sc-ink);
  background: var(--sc-surface); border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-r-pill); padding: 0.5em 1.1em;
}
@media (max-width: 640px) { .stats__row { grid-template-columns: repeat(3, 1fr); gap: var(--sc-4); } .stats__num { font-size: var(--sc-t-2xl); } }

/* ================================================================
   6d · PICKUP & DELIVERY (address + live map)
   ================================================================ */
.visit {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sc-7); align-items: stretch;
}
.visit__info h2 { margin-top: var(--sc-2); }
.visit__info .sc-body { margin-top: var(--sc-3); }
.visit__address {
  font-style: normal; margin-top: var(--sc-5); color: var(--sc-ink);
  font-size: var(--sc-t-base); line-height: 1.55;
}
.visit__phone { margin: var(--sc-3) 0 0; color: var(--sc-ink-soft); }
.visit__phone a { color: var(--sc-ink); font-weight: 600; text-decoration-color: var(--sc-hairline-strong); text-underline-offset: 3px; }
.visit__info .cta { margin-top: var(--sc-5); align-self: flex-start; }
.visit__map {
  min-height: 22rem; border-radius: var(--sc-r-md); overflow: hidden;
  border: 1px solid var(--sc-hairline); box-shadow: var(--sc-e1); background: var(--sc-surface);
}
.visit__map iframe { display: block; width: 100%; height: 100%; min-height: 22rem; border: 0; }
@media (max-width: 860px) {
  .visit { grid-template-columns: 1fr; gap: var(--sc-6); }
  .visit__map, .visit__map iframe { min-height: 18rem; }
}

/* ================================================================
   6c · FAQ
   ================================================================ */
.faq { max-width: 50rem; }
.faq__list { margin-top: var(--sc-8); border-top: 1px solid var(--sc-hairline); }
.faq__item { border-bottom: 1px solid var(--sc-hairline); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4);
  padding: var(--sc-5) 0; cursor: pointer; list-style: none;
  font-family: var(--sc-font-display); font-weight: 700; color: var(--sc-ink); font-size: var(--sc-t-base);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: 0 0 auto; width: 10px; height: 10px;
  border-right: 2px solid var(--sc-ink-soft); border-bottom: 2px solid var(--sc-ink-soft);
  transform: rotate(45deg); transition: transform var(--sc-d-base) var(--sc-ease-out);
}
.faq__item[open] summary::after { transform: rotate(-135deg); }
.faq__item summary:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }
.faq__item p { padding-bottom: var(--sc-5); max-width: 62ch; }

/* ================================================================
   7 · CLOSE
   ================================================================ */
.close { display: flex; flex-direction: column; align-items: center; text-align: center; }
.close__inner { max-width: 40rem; }
.close h2 { margin-top: var(--sc-2); }
.close__actions { display: flex; flex-wrap: wrap; gap: var(--sc-4); justify-content: center; margin-top: var(--sc-7); }
.close__hint { margin: var(--sc-4) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.foot {
  display: flex; justify-content: space-between; gap: var(--sc-4);
  padding: var(--sc-5) var(--sc-gutter) var(--sc-6);
  border-top: 1px solid var(--sc-hairline);
  color: var(--sc-ink-soft); font-size: var(--sc-t-xs);
}
@media (max-width: 560px) { .foot { flex-direction: column; gap: var(--sc-1); text-align: center; } }

/* ---- reduced motion: keep meaning, drop position change ---------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__plane { transform: none !important; }
}