/* ==========================================================================
   BOSS FABRICATION — design system
   Direction: "shop drawing". Graphite ground, brushed steel surfaces, one
   molten-orange accent for heat and action, and a visible engineering grid
   (hairlines, tick marks, part numbers) holding the whole page together.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. tokens */
:root {
  /* ground + steel */
  --ink-900: #07090b;
  --ink-850: #0a0d10;
  --ink-800: #0e1216;
  --ink-750: #12171c;
  --ink-700: #171d23;
  --ink-600: #1f262e;
  --ink-500: #2a333c;
  --steel-500: #3a444e;
  --steel-400: #55616c;
  --steel-300: #7e8b96;
  --steel-200: #a9b4be;
  --steel-100: #d3dae0;
  --steel-050: #eef2f5;
  --white: #fff;

  /* heat */
  --heat-700: #8f3200;
  --heat-600: #c74a00;
  --heat-500: #ff6a00;
  --heat-400: #ff8a1f;
  --heat-300: #ffaa4d;
  --heat-100: #ffd9a8;
  --heat-glow: rgba(255, 106, 0, 0.32);

  /* weld arc — used sparingly, for technical annotation only */
  --arc: #8fe9ff;

  --ok: #4ade80;

  /* surfaces */
  --surface: var(--ink-800);
  --surface-raised: var(--ink-750);
  --hairline: rgba(169, 180, 190, 0.14);
  --hairline-strong: rgba(169, 180, 190, 0.26);

  --plate: linear-gradient(160deg, #1a2128 0%, #10151a 42%, #161d24 100%);
  --brushed: linear-gradient(180deg,
      #eef2f5 0%, #c0c9d1 17%, #78838d 37%, #e6ecf1 49%,
      #5c666e 52%, #9aa4ac 72%, #dbe2e8 89%, #6a747c 100%);

  /* type */
  --f-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-label: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-hero: clamp(2.7rem, 7.6vw, 7.8rem);
  --t-h1: clamp(2.8rem, 7.5vw, 6.6rem);
  --t-h2: clamp(2.2rem, 5.2vw, 4.4rem);
  --t-h3: clamp(1.5rem, 2.6vw, 2.2rem);
  --t-h4: clamp(1.15rem, 1.5vw, 1.4rem);
  --t-body: clamp(0.98rem, 0.52vw + 0.86rem, 1.12rem);
  --t-small: 0.86rem;
  --t-label: 0.76rem;

  /* rhythm */
  --gutter: clamp(1.15rem, 4vw, 4.5rem);
  --section-y: clamp(4.5rem, 10vw, 9.5rem);
  --maxw: 1560px;
  --maxw-text: 68ch;

  --r-sm: 3px;
  --r-md: 5px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-steel: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.55s;

  --header-h: 76px;
}

/* ------------------------------------------------------------- 2. reset/base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--steel-100);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 0.92; letter-spacing: -0.01em; }
h1, h2 { font-family: var(--f-display); text-transform: uppercase; }
h3, h4 { font-family: var(--f-display); text-transform: uppercase; letter-spacing: 0.005em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--heat-500); color: #000; }

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

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--heat-500); color: #000; padding: 0.7rem 1.2rem;
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.12em;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- 3. layout */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--plate { background: var(--plate); }
.section--dark { background: var(--ink-850); }

/* the hairline grid that runs behind most sections */
.gridlines {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  opacity: 0.5;
}
.gridlines::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px),
    linear-gradient(180deg, var(--hairline) 1px, transparent 1px);
  background-size: clamp(60px, 7vw, 110px) clamp(60px, 7vw, 110px);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
}

/* ------------------------------------------------------ 4. type primitives */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--f-label); font-size: var(--t-label); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.28em;
  color: var(--heat-400); margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: ""; width: clamp(20px, 3vw, 46px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--heat-500));
}
.eyebrow--plain::before { display: none; }
.eyebrow--steel { color: var(--steel-300); }
.eyebrow--steel::before { background: linear-gradient(90deg, transparent, var(--steel-400)); }

/* part number, top-right of a section — the shop-drawing tell */
.partno {
  font-family: var(--f-label); font-size: var(--t-label);
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--steel-500);
}

.lede {
  font-size: clamp(1.05rem, 1.1vw + 0.8rem, 1.35rem);
  line-height: 1.55; color: var(--steel-200); max-width: var(--maxw-text);
}

.muted { color: var(--steel-300); }
.tiny { font-size: var(--t-small); line-height: 1.5; }

/* brushed-metal text, used only on the wordmark and a couple of numerals */
.metal-text {
  background: var(--brushed);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* headline with a heat-lit word */
.hot { color: var(--heat-500); }

/* section heading block */
.head { display: grid; gap: 1.1rem; margin-bottom: clamp(2.2rem, 4vw, 3.6rem); }
.head__row { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.head h2 { font-size: var(--t-h2); color: var(--steel-050); }
.head p { max-width: var(--maxw-text); }

/* -------------------------------------------------------------- 5. buttons */
.btn {
  --btn-bg: var(--heat-500);
  --btn-fg: #0a0603;
  position: relative; display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.95rem 1.7rem;
  font-family: var(--f-label); font-size: 0.95rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; white-space: nowrap;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 0; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background 0.3s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px var(--heat-glow); background: var(--heat-400); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--steel-050);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}
.btn--ghost:hover { --btn-bg: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--steel-400); }

.btn--steel { --btn-bg: var(--steel-050); --btn-fg: #0a0d10; }
.btn--steel:hover { background: var(--white); }

.btn--lg { padding: 1.15rem 2.1rem; font-size: 1.02rem; }
.btn--block { width: 100%; justify-content: center; }

.btn__arrow { transition: transform 0.3s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* text link with an underline that draws in */
.tlink {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.88rem; font-weight: 600; color: var(--heat-400);
  padding-bottom: 3px; background-image: linear-gradient(var(--heat-500), var(--heat-500));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 0.4s var(--ease-out), color 0.3s;
}
.tlink:hover { background-size: 100% 1px; color: var(--heat-300); }

/* --------------------------------------------------------------- 6. header */
.header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(7, 9, 11, 0);
  border-bottom: 1px solid transparent;
  transition: background 0.4s, border-color 0.4s, backdrop-filter 0.4s;
}
.header.is-stuck {
  background: rgba(7, 9, 11, 0.88);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--hairline);
}
.header__inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 1.5rem;
}

.brand { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }
.brand__mark { width: 38px; height: 38px; flex-shrink: 0; }
.brand__type { display: grid; line-height: 1; }
.brand__name {
  font-family: var(--f-display); font-weight: 800; font-size: 1.42rem;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.brand__sub {
  font-family: var(--f-label); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.42em; text-transform: uppercase; color: var(--steel-400);
  margin-top: 2px;
}

.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(0.5rem, 1.6vw, 1.9rem); }
.nav__link {
  position: relative;
  font-family: var(--f-label); font-size: 0.93rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--steel-200);
  padding: 0.4rem 0; transition: color 0.25s;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--heat-500); transition: width 0.35s var(--ease-out);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--steel-050); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; }

.header__cta { display: flex; align-items: center; gap: 0.8rem; }
.header__phone {
  display: inline-flex; align-items: center; gap: 0.55rem; white-space: nowrap;
  font-family: var(--f-label); font-weight: 600; letter-spacing: 0.08em;
  font-size: 1rem; color: var(--steel-050);
}
.header__phone svg { color: var(--heat-500); }

/* dropdown for services */
.nav__group { position: relative; }
.nav__panel {
  position: absolute; top: calc(100% + 14px); left: 50%; translate: -50% 0;
  min-width: 480px; padding: 1rem;
  background: rgba(14, 18, 22, 0.97); backdrop-filter: blur(18px);
  border: 1px solid var(--hairline-strong);
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.15rem;
  opacity: 0; visibility: hidden; translate: -50% 8px;
  transition: opacity 0.28s, visibility 0.28s, translate 0.28s var(--ease-out);
}
.nav__group:hover .nav__panel,
.nav__group:focus-within .nav__panel { opacity: 1; visibility: visible; translate: -50% 0; }
.nav__panel a {
  padding: 0.6rem 0.8rem; font-size: 0.9rem; color: var(--steel-200);
  border-left: 2px solid transparent; transition: 0.2s;
}
.nav__panel a:hover { background: rgba(255, 255, 255, 0.04); color: var(--white); border-left-color: var(--heat-500); }

.burger {
  display: none; width: 44px; height: 44px; background: none; border: 0;
  cursor: pointer; padding: 10px; margin-right: -10px;
}
.burger span { display: block; height: 2px; background: var(--steel-050); margin: 5px 0; transition: 0.3s var(--ease-out); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------ 7. hero/forge */
/* Two bands: the structure gets the upper one to itself so nothing is ever
   drawn behind the headline, and the copy sits in the lower band. */
.hero {
  position: relative; height: 100svh; min-height: 620px;
  padding-top: var(--header-h);
  overflow: hidden;
  background: radial-gradient(ellipse 120% 80% at 50% 90%, #131a21 0%, var(--ink-900) 64%);
}

/* Stacked by default: drawing, headline, then the meta bar.
   The SVG is sized to its cell rather than the other way round, so
   preserveAspectRatio scales the drawing down on short viewports instead of
   pushing the copy off the screen. */
.hero__inner {
  height: 100%;
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: clamp(2.2rem, 4.5vw, 3.4rem);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  row-gap: clamp(0.5rem, 1.4vh, 1.2rem);
}

.forge {
  grid-area: 1 / 1;
  position: relative;
  display: flex; min-height: 0;
  padding-top: clamp(0.6rem, 2.5vh, 1.8rem);
  pointer-events: none;
}
.forge__svg {
  width: 100%; height: 100%;
  margin-inline: auto;
  overflow: visible;
}

/* blueprint backdrop behind the assembling structure */
.forge__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, rgba(143, 233, 255, 0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(143, 233, 255, 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, #000 0%, transparent 72%);
  opacity: 0;
}

.hero__content { grid-area: 2 / 1; position: relative; z-index: 3; }

.hero__title {
  font-family: var(--f-display); font-size: var(--t-hero);
  line-height: 0.82; letter-spacing: -0.015em; text-transform: uppercase;
  color: var(--steel-050);
  margin: 0 0 1.4rem;
}
.hero__title span { display: block; }
.hero__line { overflow: hidden; }

.hero__meta {
  grid-area: 3 / 1; position: relative; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: clamp(1.2rem, 4vw, 3.5rem);
  padding-top: 1.2rem; margin-top: clamp(0.6rem, 2vh, 1.4rem);
  border-top: 1px solid var(--hairline);
}
.hero__blurb { max-width: 44ch; color: var(--steel-200); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-left: auto; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 0.7rem; translate: -50% 0; z-index: 4; opacity: .8;
  display: grid; justify-items: center; gap: 0.5rem;
  font-family: var(--f-label); font-size: 0.68rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--steel-500);
}
.hero__scroll i { display: block; width: 1px; height: 34px; background: linear-gradient(var(--heat-500), transparent); }

/* the caption that names whatever the hero is currently building */
.forge__caption {
  position: absolute; z-index: 3; left: var(--gutter); top: calc(var(--header-h) + clamp(1rem, 4vh, 3rem));
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 0.78rem; color: var(--steel-400);
  display: grid; gap: 0.35rem;
}
.forge__caption b { color: var(--heat-400); font-weight: 600; letter-spacing: 0.22em; }

/* ---------------------------------------------------------- 8. audience split */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: clamp(420px, 72vh, 760px);
  border-block: 1px solid var(--hairline);
}
.split__half {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  padding: clamp(1.6rem, 3.5vw, 3.4rem);
  isolation: isolate;
  transition: flex-grow 0.6s var(--ease-out);
}
.split__half + .split__half { border-left: 1px solid var(--hairline); }

.split__media { position: absolute; inset: 0; z-index: -2; }
.split__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.85) contrast(1.12) brightness(0.66);
  transform: scale(1.06);
  transition: filter 0.7s var(--ease-out), transform 0.9s var(--ease-out);
}
.split__half::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7, 9, 11, 0.2) 0%, rgba(7, 9, 11, 0.72) 62%, rgba(7, 9, 11, 0.93) 100%);
  transition: background 0.6s;
}
.split__half:hover .split__media img,
.split__half:focus-within .split__media img { filter: grayscale(0) contrast(1.04) brightness(0.86); transform: scale(1); }

.split__body { position: relative; max-width: 44ch; }
.split__index {
  font-family: var(--f-label); font-size: 0.74rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--heat-500); margin-bottom: 0.9rem; display: block;
}
.split__title {
  font-family: var(--f-display); font-size: clamp(2.4rem, 4.6vw, 4.6rem);
  text-transform: uppercase; line-height: 0.88; color: var(--steel-050); margin: 0 0 0.7rem;
}
.split__desc { color: var(--steel-200); margin-bottom: 1.3rem; }
.split__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.5rem; }
.split__tags span {
  font-family: var(--f-label); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.28rem 0.6rem; border: 1px solid var(--hairline-strong); color: var(--steel-300);
}
.split__link::after { content: ""; position: absolute; inset: 0; z-index: 5; }

/* ------------------------------------------------------------- 9. stat band */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border: 1px solid var(--hairline);
  background: var(--ink-850);
}
.stat {
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
  border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  position: relative;
}
.stat__num {
  font-family: var(--f-label); font-weight: 700;
  font-size: clamp(2.6rem, 4.6vw, 4rem); line-height: 1;
  color: var(--steel-050); letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 0.1em;
}
.stat__suffix { color: var(--heat-500); font-size: 0.55em; }
.stat__label {
  font-family: var(--f-label); font-size: 0.8rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--steel-400); margin-top: 0.6rem;
}
.stat__note { font-size: 0.78rem; color: var(--steel-500); margin-top: 0.35rem; }

/* ------------------------------------------------------------ 10. capability */
.caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.cap {
  position: relative; padding: clamp(1.6rem, 2.4vw, 2.3rem);
  background: var(--ink-850); overflow: hidden;
  display: grid; align-content: start; gap: 0.8rem;
  transition: background 0.4s;
}
.cap::before {
  content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 0;
  background: var(--heat-500); transition: height 0.5s var(--ease-out);
}
.cap:hover { background: var(--ink-750); }
.cap:hover::before { height: 100%; }
.cap__no { font-family: var(--f-label); font-size: 0.74rem; letter-spacing: 0.26em; color: var(--steel-500); }
.cap__icon { width: 34px; height: 34px; color: var(--heat-500); }
.cap h3 { font-size: var(--t-h4); color: var(--steel-050); }
.cap p { font-size: 0.94rem; color: var(--steel-300); margin: 0; }
.cap__link { margin-top: 0.35rem; justify-self: start; }
.cap__link::after { content: ""; position: absolute; inset: 0; }

/* --------------------------------------------------------------- 11. project */
.grid-projects {
  display: grid; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(clamp(250px, 26vw, 380px), 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.6rem);
}

.card {
  position: relative; display: block; overflow: hidden;
  background: var(--ink-800); border: 1px solid var(--hairline);
  isolation: isolate;
}
.card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--ink-700); }
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s var(--ease-out), filter 0.6s;
  filter: brightness(0.82) contrast(1.04);
}
.card:hover .card__media img { transform: scale(1.06); filter: brightness(1) contrast(1.04); }
.card--tall .card__media { aspect-ratio: 3 / 4; }
.card--wide .card__media { aspect-ratio: 16 / 10; }

.card__body { padding: 1.15rem 1.25rem 1.35rem; display: grid; gap: 0.4rem; }
.card__service {
  font-family: var(--f-label); font-size: 0.72rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--heat-500);
}
.card__title { font-family: var(--f-display); font-size: 1.32rem; text-transform: uppercase; color: var(--steel-050); line-height: 1; }
.card__blurb { font-size: 0.9rem; color: var(--steel-400); margin: 0; }
.card__client {
  font-family: var(--f-label); font-size: 0.76rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--steel-300);
  display: flex; align-items: center; gap: 0.45rem; margin-top: 0.2rem;
}
.card__client::before { content: ""; width: 5px; height: 5px; background: var(--heat-500); }

/* corner tick, echoing the logo's cut corner */
.card::after {
  content: ""; position: absolute; right: 0; top: 0; z-index: 2;
  border: 14px solid transparent; border-top-color: var(--heat-500); border-right-color: var(--heat-500);
  opacity: 0; transition: opacity 0.4s;
}
.card:hover::after { opacity: 1; }

/* filter bar */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.filter {
  font-family: var(--f-label); font-size: 0.85rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  padding: 0.5rem 1rem; background: transparent; color: var(--steel-300);
  border: 1px solid var(--hairline-strong); cursor: pointer; transition: 0.25s;
}
.filter:hover { color: var(--steel-050); border-color: var(--steel-400); }
.filter[aria-pressed="true"] { background: var(--heat-500); border-color: var(--heat-500); color: #0a0603; }

.card.is-hidden { display: none; }

/* --------------------------------------------------------------- 12. process */
.process { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
@media (min-width: 860px) { .process { grid-template-columns: repeat(5, 1fr); } }
.step {
  background: var(--ink-850); padding: clamp(1.5rem, 2.4vw, 2.2rem);
  display: grid; align-content: start; gap: 0.7rem; position: relative;
}
.step__no {
  font-family: var(--f-display); font-size: 3.2rem; line-height: 0.8;
  color: transparent; -webkit-text-stroke: 1px var(--steel-500);
  transition: color 0.4s, -webkit-text-stroke-color 0.4s;
}
.step:hover .step__no { color: var(--heat-500); -webkit-text-stroke-color: var(--heat-500); }
.step h3 { font-size: 1.2rem; color: var(--steel-050); }
.step p { font-size: 0.9rem; color: var(--steel-400); margin: 0; }

/* ------------------------------------------------------------- 13. marquee */
.marquee { overflow: hidden; border-block: 1px solid var(--hairline); padding-block: 1.4rem; background: var(--ink-850); }
.marquee__track { display: flex; gap: clamp(2rem, 5vw, 5rem); width: max-content; animation: slide 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--f-display); font-size: clamp(1.1rem, 1.7vw, 1.7rem);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--steel-400);
  display: flex; align-items: center; gap: clamp(2rem, 5vw, 5rem); white-space: nowrap;
}
.marquee__item::after { content: ""; width: 6px; height: 6px; background: var(--heat-500); flex-shrink: 0; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------ 14. showcase */
.showcase { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 900px) { .showcase__row { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; } }
@media (min-width: 900px) { .showcase__row:nth-child(even) .showcase__media { order: 2; } }
.showcase__media { position: relative; overflow: hidden; border: 1px solid var(--hairline); }
.showcase__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.showcase__body { display: grid; gap: 1rem; align-content: center; }
.showcase__body h3 { font-size: var(--t-h3); color: var(--steel-050); }
.showcase__facts { display: grid; gap: 0.5rem; margin-top: 0.4rem; }
.showcase__facts div {
  display: flex; gap: 0.9rem; padding-block: 0.55rem;
  border-top: 1px solid var(--hairline); font-size: 0.9rem;
}
.showcase__facts dt, .showcase__facts b {
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.76rem; color: var(--steel-500); min-width: 8rem; font-weight: 600;
}
.showcase__facts span { color: var(--steel-200); }

/* ------------------------------------------------------------- 15. page hero */
.phero {
  position: relative; padding-top: calc(var(--header-h) + clamp(3rem, 9vw, 7rem));
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  overflow: hidden; border-bottom: 1px solid var(--hairline);
}
.phero__media { position: absolute; inset: 0; z-index: -2; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.4) brightness(0.62) contrast(1.08); }
.phero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--ink-900) 2%, rgba(7, 9, 11, 0.86) 42%, rgba(7, 9, 11, 0.52) 100%);
}
.phero h1 { font-size: var(--t-h1); color: var(--steel-050); max-width: 18ch; }
.phero .lede { margin-top: 1.4rem; }

.crumbs {
  display: flex; gap: 0.6rem; align-items: center; margin-bottom: 1.4rem;
  font-family: var(--f-label); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel-500);
}
.crumbs a:hover { color: var(--heat-400); }
.crumbs span { color: var(--steel-600, var(--steel-500)); }

/* ----------------------------------------------------------------- 16. FAQ */
.faq { display: grid; border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--f-display); font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  text-transform: uppercase; color: var(--steel-100); transition: color 0.25s;
}
.faq__q:hover { color: var(--heat-400); }
.faq__sign { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 2px; background: var(--heat-500);
  transition: transform 0.35s var(--ease-out);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__sign::after { transform: rotate(0); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease-out); }
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: 1.4rem; max-width: var(--maxw-text); color: var(--steel-300); }

/* ---------------------------------------------------------------- 17. form */
.rfq {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid var(--hairline); background: var(--plate);
  padding: clamp(1.6rem, 3.5vw, 3.2rem);
}
@media (min-width: 940px) { .rfq { grid-template-columns: 0.85fr 1fr; } }

.field { display: grid; gap: 0.45rem; margin-bottom: 1rem; }
.field label {
  font-family: var(--f-label); font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--steel-400);
}
.field label .req { color: var(--heat-500); }
.field input, .field select, .field textarea {
  background: rgba(7, 9, 11, 0.62); border: 1px solid var(--hairline-strong);
  color: var(--steel-050); padding: 0.85rem 1rem; width: 100%;
  transition: border-color 0.25s, background 0.25s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--steel-500); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--heat-500); background: rgba(7, 9, 11, 0.85);
}
.field textarea { resize: vertical; min-height: 110px; }
.field--row { display: grid; gap: 1rem; }
@media (min-width: 620px) { .field--row { grid-template-columns: 1fr 1fr; } }

.form__note { font-size: 0.8rem; color: var(--steel-500); margin-top: 0.9rem; }
.form__status { font-size: 0.9rem; margin-top: 0.9rem; min-height: 1.4em; }
.form__status.is-ok { color: var(--ok); }
.form__status.is-err { color: var(--heat-400); }

.trust { display: grid; gap: 1.1rem; align-content: start; }
.trust__item { display: flex; gap: 0.85rem; align-items: flex-start; }
.trust__item svg { width: 20px; height: 20px; color: var(--heat-500); flex-shrink: 0; margin-top: 3px; }
.trust__item b { display: block; color: var(--steel-050); font-weight: 600; font-size: 0.98rem; }
.trust__item span { font-size: 0.88rem; color: var(--steel-400); }

/* --------------------------------------------------------------- 18. footer */
.footer { border-top: 1px solid var(--hairline); background: var(--ink-850); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.footer__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 860px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer h4 {
  font-family: var(--f-label); font-size: 0.8rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--steel-500); margin-bottom: 1.1rem; font-weight: 600;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer a { color: var(--steel-300); font-size: 0.94rem; transition: color 0.2s; }
.footer a:hover { color: var(--heat-400); }
.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: 0.82rem; color: var(--steel-500);
}
.footer__addr { font-style: normal; color: var(--steel-300); font-size: 0.94rem; line-height: 1.75; }

/* sticky mobile call bar */
.callbar {
  position: fixed; inset: auto 0 0; z-index: 90; display: none;
  grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hairline);
  background: rgba(10, 13, 16, 0.96); backdrop-filter: blur(12px);
}
.callbar a {
  padding: 0.95rem; text-align: center;
  font-family: var(--f-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.9rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.callbar a:first-child { background: var(--heat-500); color: #0a0603; }
.callbar a:last-child { color: var(--steel-050); }

/* ------------------------------------------------------------ 19. animation */
/* Nothing is hidden until JS confirms it can animate — a CDN failure or a
   no-JS crawler must still see a complete page. */
.js-anim .reveal { opacity: 0; transform: translateY(26px); }
.js-anim .reveal-mask > * { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js-anim .reveal, .js-anim .reveal-mask > * { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------- 20. breakpoints */
@media (max-width: 1180px) {
  .header__phone span { display: none; }
}

@media (max-width: 960px) {
  :root { --header-h: 64px; }
  .burger { display: block; margin-left: auto; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0; margin: 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 1.5rem var(--gutter) 6rem;
    background: rgba(7, 9, 11, 0.98); backdrop-filter: blur(20px);
    overflow-y: auto;
    clip-path: inset(0 0 100% 0); transition: clip-path 0.5s var(--ease-out);
  }
  .nav.is-open { clip-path: inset(0 0 0 0); }
  .nav__link { font-size: 1.6rem; padding: 0.85rem 0; border-bottom: 1px solid var(--hairline); }
  .nav__link::after { display: none; }
  .nav__group { display: contents; }
  .nav__panel {
    position: static; translate: none; opacity: 1; visibility: visible;
    min-width: 0; background: none; border: 0; backdrop-filter: none;
    grid-template-columns: 1fr; padding: 0 0 1rem 1rem;
  }
  .nav__panel a { padding: 0.5rem 0.7rem; }
  .header__cta { display: none; }
  .split { grid-template-columns: 1fr; }
  .split__half + .split__half { border-left: 0; border-top: 1px solid var(--hairline); }
  .callbar { display: grid; }
  body { padding-bottom: 52px; }
  .footer { padding-bottom: 4rem; }
}

@media (max-width: 620px) {
  .stat { border-right: 0; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(odd) { border-right: 1px solid var(--hairline); }
  .hero__actions { margin-left: 0; width: 100%; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
  .forge__caption { display: none; }
}

/* ------------------------------------------------------------- 21. the lab */
/* Sticky rather than GSAP-pinned: the layout holds even if GSAP never loads. */
.lab { position: relative; height: 340vh; background: var(--ink-850); border-block: 1px solid var(--hairline); }
.lab__sticky {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; grid-template-rows: 1fr auto; align-items: center;
}
.lab__scroll { display: none; }
.lab__stage {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: clamp(3rem, 9vh, 7rem) var(--gutter);
}
.lab__stage .forge__svg { width: min(1100px, 92vw); }

.lab__ui {
  z-index: 2; grid-row: 2;
  padding-bottom: clamp(2rem, 6vh, 4rem);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.lab__head { max-width: 40ch; }
.lab__title {
  font-family: var(--f-display); font-size: clamp(2.4rem, 6vw, 5rem);
  text-transform: uppercase; line-height: 0.9; color: var(--steel-050); margin: 0;
}
.lab__spec {
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 0.82rem; color: var(--steel-400); margin: 0.6rem 0 0;
}
.lab__rail { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.lab__rail li {
  display: flex; align-items: center; gap: 0.8rem;
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 0.9rem; color: var(--steel-500);
  padding-left: 0.9rem; border-left: 2px solid var(--hairline);
  transition: color 0.35s, border-color 0.35s;
}
.lab__rail li span { font-size: 0.72rem; color: var(--steel-600, var(--steel-500)); }
.lab__rail li.is-on { color: var(--steel-050); border-left-color: var(--heat-500); }
.lab__rail li.is-on span { color: var(--heat-500); }
.lab__note {
  position: absolute; right: var(--gutter); top: calc(var(--header-h) + 1.4rem);
  font-family: var(--f-label); font-size: 0.74rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--steel-500); margin: 0;
}

@media (max-width: 700px) {
  .lab { height: 300vh; }
  .lab__ui { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .lab__rail { grid-auto-flow: column; gap: 1rem; }
  .lab__rail li { padding-left: 0.6rem; font-size: 0.78rem; letter-spacing: 0.12em; }
  .lab__note { display: none; }
}

/* forge ghost/steel layering */
.forge__ghost line { vector-effect: non-scaling-stroke; }

/* A landscape phone has no room for both bands — stack and let the page scroll. */
@media (max-height: 560px), (max-width: 620px) and (max-height: 720px) {
  .hero { height: auto; min-height: 0; padding-bottom: 1rem; }
  .forge { min-height: 46svh; }
  .hero__scroll { display: none; }
}

/* ------------------------------------------------------- 22. mobile repairs */
/* Inline icons carry width/height attributes, but anywhere they sit next to
   text they also need to stop flexing. */
.btn svg, .callbar a svg, .header__phone svg, .tlink svg { width: 18px; height: 18px; flex-shrink: 0; }
.callbar a svg { width: 19px; height: 19px; }
.cap__icon { width: 34px; height: 34px; }
.trust__item svg { width: 20px; height: 20px; }

@media (max-width: 700px) {
  /* 0.82 line-height is set for one-line desktop headlines; once the words wrap
     on a phone the lines collide, so give them room. */
  .hero__title { line-height: 0.95; }
  .hero__title span { display: block; }
  .phero h1, .head h2, .split__title { line-height: 0.98; }

  /* the sticky call bar owns the bottom 52px — the hero must not sit under it */
  .hero { height: calc(100svh - 52px); }
  .hero__meta { flex-direction: column; align-items: stretch; gap: 1.1rem; }
  .hero__blurb { max-width: none; }

  .lab__title { line-height: 0.96; }
  .showcase__facts dt, .showcase__facts b { min-width: 6.5rem; }
  .rfq { padding: 1.25rem; }
}

@media (max-width: 420px) {
  :root { --t-hero: 2.35rem; }
  .filters { gap: 0.4rem; }
  .filter { font-size: 0.78rem; padding: 0.42rem 0.75rem; letter-spacing: 0.1em; }
}

@media (max-width: 700px) { .hero__scroll { display: none; } }

/* --------------------------------------------- 23. wide-screen hero layout */
/*
 * Past ~1100px the stacked hero falls apart: the drawing is 2:1, the band left
 * over above the copy is short and wide, and preserveAspectRatio letterboxes
 * the frame into the middle of it — leaving dead space either side of the
 * drawing AND to the right of the headline. Two columns fixes all of it: the
 * copy takes the left, the frame gets a tall cell it can actually fill, and the
 * meta bar rules off underneath both.
 */
@media (min-width: 980px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.98fr);
    /* Rows sized to their content, then the whole block centred. A 1fr row
       would hand all the leftover height to the drawing's cell, and since the
       frame is 2:1 it cannot grow to fill a tall cell — it just floats with a
       dead band underneath it. */
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: clamp(1.5rem, 3vw, 3.5rem);
    row-gap: clamp(1.4rem, 4vh, 3rem);
  }
  .hero__content { grid-area: 1 / 1; align-self: center; }
  .forge { grid-area: 1 / 2; align-self: center; padding-top: 0; }
  .hero__meta { grid-area: 2 / 1 / 3 / 3; margin-top: 0; }

  /* height:auto lets the frame take its intrinsic 2:1 shape, so its cell is
     exactly as tall as the drawing and no taller. */
  .forge__svg { height: auto; max-height: 56svh; }

  /* Sized so the longest line nearly fills the left column. */
  :root { --t-hero: clamp(3rem, 6.2vw, 5.6rem); }
}

/* Below the two-column breakpoint the headline has the full width to itself so
   it can run larger — but not so large that it starves the drawing above it of
   height, which is what happened at ~1024px. */
@media (max-width: 979px) {
  :root { --t-hero: clamp(2.3rem, 7.8vw, 5.2rem); }
}

/* ------------------------------------------------- 24. hero fit corrections */
@media (min-width: 980px) {
  /* The "now building" caption is absolutely placed top-left. Reserve height for
     it so the vertically-centred headline never rides up into it on a short
     laptop screen. */
  .hero__inner { padding-top: clamp(2.5rem, 7vh, 5rem); }
}

@media (max-width: 979px) {
  /* Stacked layout has no room to spare — the cue would sit on the buttons. */
  .hero__scroll { display: none; }
}

@media (max-width: 960px) {
  /* The sticky call bar owns the bottom 52px from this width down, not just on
     phones, so the hero has to stop above it. */
  .hero { height: calc(100svh - 52px); }
}