/* ==========================================================================
   TRIPCON MANUFACTURING — SECTIONS
   Composed entirely from the tokens and primitives in system.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HEADER
   Transparent over the hero, condensing to a blurred ground on scroll.
   -------------------------------------------------------------------------- */

.site-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--d-base) var(--ease),
              border-color var(--d-base) var(--ease),
              height var(--d-base) var(--ease);
}

.site-head.is-stuck {
  height: 66px;
  background: rgba(12, 15, 18, 0.86);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-bottom-color: var(--l-light);
}

.site-head__inner {
  width: 100%;
  max-width: var(--w-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

/* Wordmark: the chevron mark plus type, rebuilt as live text so it stays
   crisp at every size and can respond to the header state. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  border-radius: var(--r-sm);
}
.brand__mark { width: 38px; flex: 0 0 auto; }
.brand__type { display: grid; gap: 3px; min-width: 0; }
.brand__type b {
  font-family: var(--f-display);
  font-size: 1.06rem;
  font-weight: 900;
  font-stretch: 88%;
  letter-spacing: 0.13em;
  line-height: 1;
  color: var(--c-paper);
}
.brand__type span {
  font-family: var(--f-tech);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  line-height: 1;
  color: var(--c-amber);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.nav__link {
  position: relative;
  padding: 0.65rem 0.9rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: rgba(237, 240, 241, 0.76);
  transition: color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease);
}
.nav__link:hover { color: var(--c-paper); background: rgba(255, 255, 255, 0.06); }

.nav__link::after {
  content: "";
  position: absolute;
  left: 0.9rem; right: 0.9rem; bottom: 0.3rem;
  height: 1.5px;
  border-radius: var(--r-full);
  background: var(--c-amber);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-base) var(--ease-out);
}
.nav__link[aria-current="page"] { color: var(--c-paper); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__cta {
  margin-left: var(--sp-3);
  min-height: 44px;
  padding-inline: 1.3rem;
  font-size: var(--fs-meta-lg);
}

.burger {
  display: none;
  width: 46px; height: 46px;
  position: relative;
  border: 1px solid var(--l-light-firm);
  border-radius: var(--r-btn);
  background: rgba(255, 255, 255, 0.05);
  transition: background var(--d-fast) var(--ease);
}
.burger:hover { background: rgba(255, 255, 255, 0.1); }
.burger span {
  position: absolute;
  left: 50%;
  width: 18px; height: 1.5px;
  border-radius: var(--r-full);
  background: var(--c-paper);
  transform: translateX(-50%);
  transition: transform var(--d-base) var(--ease), opacity var(--d-fast) var(--ease);
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 28px; }
.is-navopen .burger span:nth-child(1) { top: 22px; transform: translateX(-50%) rotate(45deg); }
.is-navopen .burger span:nth-child(2) { opacity: 0; }
.is-navopen .burger span:nth-child(3) { top: 22px; transform: translateX(-50%) rotate(-45deg); }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  min-height: min(94svh, 920px);
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + var(--sp-7));
  padding-bottom: 0;
  background: var(--c-graphite-900);
  color: var(--t-on-dark);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 60% 46%;
  opacity: 0;
  transform: scale(1.05);
  animation: hero-plate 2400ms var(--ease-out) 60ms forwards;
}
@keyframes hero-plate { to { opacity: 1; transform: scale(1); } }

/* Scrim: graphite from the left so type always sits on a controlled ground */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(12,15,18,0.96) 0%, rgba(12,15,18,0.88) 32%, rgba(12,15,18,0.38) 66%, rgba(12,15,18,0.58) 100%),
    linear-gradient(180deg, rgba(12,15,18,0.86) 0%, transparent 24%, transparent 54%, rgba(12,15,18,0.95) 100%);
}

/* Engineering grid, drawn over the plate */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--grid-light);
  background-size: 96px 96px;
  opacity: 0;
  -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,0.22) 60%, transparent 86%);
          mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,0.22) 60%, transparent 86%);
  animation: fade-in 900ms var(--ease) 220ms forwards;
}
@keyframes fade-in { to { opacity: 1; } }

/* Structural geometry that draws itself across the plate */
.hero__geo {
  position: absolute;
  z-index: -1;
  right: -4%;
  bottom: 13%;
  width: min(740px, 60vw);
  pointer-events: none;
  opacity: 0.42;
}
.hero__geo path, .hero__geo line, .hero__geo circle {
  stroke-dasharray: var(--len, 900);
  stroke-dashoffset: var(--len, 900);
  animation: draw-in 1600ms var(--ease-out) 560ms forwards;
}
@keyframes draw-in { to { stroke-dashoffset: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Accent sweep that crosses the hero once, then stops */
.hero__sweep {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  z-index: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--c-amber), rgba(245,182,42,0));
  transform: scaleX(0);
  transform-origin: left center;
  animation: sweep 1400ms var(--ease-out) 820ms forwards;
}
@keyframes sweep { to { transform: scaleX(1); } }

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--w-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Kept at a single class of specificity so the reduced-motion overrides at the
   foot of this block can actually win. A `.hero .hero__lead` style here once
   out-specified them and left the lead permanently invisible. */
.hero__title {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-hero);
  font-weight: 900;
  font-stretch: 86%;
  line-height: 0.9;
  letter-spacing: -0.032em;
  text-transform: uppercase;
  color: var(--c-white);
}
.hero__title span { display: block; overflow: hidden; }
.hero__title span > i {
  display: block;
  font-style: normal;
  transform: translateY(105%);
  animation: line-up 900ms var(--ease-out) forwards;
}
.hero__title span:nth-child(1) > i { animation-delay: 380ms; }
.hero__title span:nth-child(2) > i { animation-delay: 470ms; }
.hero__title span:nth-child(3) > i { animation-delay: 560ms; }
.hero__title em {
  font-style: normal;
  color: var(--c-amber);
}
@keyframes line-up { to { transform: translateY(0); } }

.hero__lead {
  max-width: 48ch;
  margin-top: var(--sp-5);
  font-size: var(--fs-lead);
  color: rgba(237, 240, 241, 0.8);
  opacity: 0;
  animation: rise 700ms var(--ease-out) 740ms forwards;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  opacity: 0;
  animation: rise 700ms var(--ease-out) 860ms forwards;
}

.hero__eyebrow { opacity: 0; animation: rise 600ms var(--ease-out) 300ms forwards; }

/* Data rail across the foot of the hero — real figures only.
   Hairline separators only between items: the previous version boxed every
   cell, which turned the most important credibility strip into a table. */
.hero__rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5) clamp(1.5rem, 3vw, 3rem);
  margin: clamp(2.25rem, 4.5vw, 3.5rem) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--l-light);
  opacity: 0;
  animation: rise 700ms var(--ease-out) 980ms forwards;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.hero__rail > div { min-width: 0; }
.hero__rail b {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2.1vw, 1.85rem);
  font-weight: 800;
  font-stretch: 88%;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--c-white);
}
.hero__rail span {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--fs-meta-lg);
  line-height: 1.45;
  color: rgba(237, 240, 241, 0.56);
}

/* --------------------------------------------------------------------------
   DISCIPLINE STRIP — the index of what Tripcon does, stated flatly
   -------------------------------------------------------------------------- */

.strip {
  background: var(--c-graphite-850);
  border-bottom: 1px solid var(--l-light);
  padding-block: var(--sp-5);
}
.strip__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) clamp(1.5rem, 3.5vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.strip__list li {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--f-tech);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(237, 240, 241, 0.62);
}
.strip__list li::before {
  content: "";
  width: 5px; height: 5px;
  flex: 0 0 auto;
  border-radius: 1px;
  background: var(--c-amber);
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   SECTION HEADER — shared across every band
   -------------------------------------------------------------------------- */

.shead {
  display: grid;
  gap: var(--sp-4);
  max-width: 62ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.shead--wide { max-width: 78ch; }
.shead h2 { max-width: 20ch; }
.shead--wide h2 { max-width: 26ch; }

/* Split header: title left, supporting note right */
.shead--split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.85fr);
  gap: var(--sp-6) clamp(2rem, 6vw, 5rem);
  max-width: none;
  align-items: end;
}
.shead--split h2 { max-width: 18ch; }

/* --------------------------------------------------------------------------
   METRICS — real figures, counted up on entry.
   Hairline-separated columns rather than a bordered grid of cells.
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6) clamp(1.5rem, 3vw, 3rem);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--l-dark);
}
.band--dark .stats { border-color: var(--l-light); }

.stat { min-width: 0; }

.stat b {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  font-weight: 900;
  font-stretch: 86%;
  line-height: 0.9;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--t-on-light);
}
.band--dark .stat b { color: var(--c-white); }
.stat b i { font-style: normal; color: var(--c-amber-deep); }
.band--dark .stat b i { color: var(--c-amber); }

.stat > span {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-meta-lg);
  line-height: 1.5;
  color: var(--t-on-light-soft);
}
.band--dark .stat > span { color: var(--t-on-dark-soft); }

/* --------------------------------------------------------------------------
   PROCESS — the route a job takes through the shop
   -------------------------------------------------------------------------- */

.process__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

/* Left column pins while the steps run past it */
.process__pin {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-6));
}

.process__diagram { margin-top: var(--sp-6); width: 100%; }

.process__steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--l-light);
}

.process__step {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: var(--sp-5);
  padding: clamp(1.5rem, 3vw, 2.25rem) var(--sp-4);
  margin-inline: calc(var(--sp-4) * -1);
  border-bottom: 1px solid var(--l-light);
  border-radius: var(--r-md);
  transition: background var(--d-base) var(--ease);
}
.process__step:hover { background: rgba(255,255,255,0.03); }

.process__num {
  font-family: var(--f-tech);
  font-size: var(--fs-meta-lg);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--c-amber);
  padding-top: 0.35rem;
}
.process__step h3 { color: var(--c-white); }
.process__step p { margin-top: var(--sp-3); max-width: 52ch; }

/* --------------------------------------------------------------------------
   CAPABILITY LEDGER
   Replaces the 2x2 grid of identical [icon / index / title / body / chips /
   link] cards. Same information, read as an editorial index rather than four
   interchangeable boxes.
   -------------------------------------------------------------------------- */

.ledger {
  display: grid;
  border-top: 1px solid var(--l-dark);
}
.band--dark .ledger { border-color: var(--l-light); }

.lrow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 96px) minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 132px);
  align-items: start;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.75rem, 3.4vw, 2.75rem) var(--sp-5);
  margin-inline: calc(var(--sp-5) * -1);
  border-bottom: 1px solid var(--l-dark);
  border-radius: var(--r-lg);
  transition: background var(--d-base) var(--ease);
}
.band--dark .lrow { border-bottom-color: var(--l-light); }
.lrow:hover { background: var(--c-white); }
.band--dark .lrow:hover { background: rgba(255,255,255,0.04); }
.lrow:hover .tnum { color: var(--c-amber); }

.lrow__title { display: grid; gap: var(--sp-4); align-content: start; }
.lrow__title h3 { max-width: 14ch; }
.lrow__body { display: grid; gap: var(--sp-4); align-content: start; }
.lrow__body p { max-width: 46ch; font-size: var(--fs-sm); }

.lrow__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--f-tech);
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-on-light-soft);
}
.band--dark .lrow__specs { color: var(--t-on-dark-soft); }
.lrow__specs li { display: inline-flex; align-items: center; gap: 0.55em; }
.lrow__specs li::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 1px;
  background: var(--c-amber);
  transform: rotate(45deg);
}

.lrow__art {
  width: 100%;
  max-width: 132px;
  justify-self: end;
  opacity: 0.85;
  transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease-out);
}
.lrow:hover .lrow__art { opacity: 1; transform: translateY(-3px); }
.lrow__art .accent { transition: stroke var(--d-base) var(--ease); }
.lrow:hover .lrow__art .accent { stroke: var(--c-amber); }

/* The row link lives inside the title column, so it can never orphan itself
   onto a grid row of its own. */
.lrow__go { align-self: start; }

/* --------------------------------------------------------------------------
   DRAWING PLATE — technical artwork presented as a sheet with a title block.
   Replaces the raw CAD screenshots that were shown as photographs.
   -------------------------------------------------------------------------- */

.plate {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: var(--e-1);
}
.band--dark .plate,
.plate--dark {
  background: var(--c-graphite-850);
  border: 1px solid var(--l-light);
  box-shadow: none;
}
.plate img, .plate svg { width: 100%; display: block; }

/* Title block along the bottom of each plate */
.plate__block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: 0.75rem var(--sp-5);
  border-top: 1px solid var(--l-dark);
  font-family: var(--f-tech);
  font-size: var(--fs-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-on-light-soft);
}
.band--dark .plate__block,
.plate--dark .plate__block { border-top-color: var(--l-light); color: var(--t-on-dark-soft); }
.plate__block b { color: var(--c-amber-deep); font-weight: 600; }
.band--dark .plate__block b,
.plate--dark .plate__block b { color: var(--c-amber); }

/* Photographic figure with the same title-block language */
.sheet {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--c-graphite-850);
  margin: 0;
}
.sheet img { width: 100%; display: block; }
.sheet__block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: 0.75rem var(--sp-5);
  background: var(--c-graphite-850);
  font-family: var(--f-tech);
  font-size: var(--fs-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-on-dark-soft);
}
.sheet__block b { color: var(--c-amber); font-weight: 600; }

/* --------------------------------------------------------------------------
   DETAILING OUTPUT
   -------------------------------------------------------------------------- */

.model__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.model__sheets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.model__sheets > *:first-child { grid-column: 1 / -1; }

.outputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.outputs li {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  font-size: var(--fs-sm);
  color: var(--t-on-light-mute);
}
.outputs li::before {
  content: "";
  width: 6px; height: 6px;
  flex: 0 0 auto;
  border-radius: 1px;
  background: var(--c-amber);
  transform: rotate(45deg) translateY(-1px);
}
.band--dark .outputs li { color: var(--t-on-dark-mute); }

/* --------------------------------------------------------------------------
   PROJECT WEIGHT — the workshop capability moment.
   An oversized plate that breaks the content grid, with the copy carried on
   an offset panel and the figures set as a dimensioned schedule.
   -------------------------------------------------------------------------- */

.weight {
  position: relative;
  isolation: isolate;
  background: var(--c-graphite-900);
  color: var(--t-on-dark);
  padding-block: var(--sp-section-loose);
  overflow: hidden;
}

/* The plate runs from the middle of the page off the right edge */
.weight__plate {
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0;
  left: 38%;
  right: -6%;
  overflow: hidden;
  border-radius: var(--r-xl) 0 0 var(--r-xl);
}
.weight__plate img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* Graphite falls across the plate from the left so the panel always has ground */
.weight__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12,15,18,1) 0%, rgba(12,15,18,0.9) 10%, rgba(12,15,18,0.68) 28%, rgba(12,15,18,0.12) 64%, rgba(12,15,18,0.45) 100%),
    linear-gradient(180deg, rgba(12,15,18,0.6) 0%, transparent 30%, transparent 62%, rgba(12,15,18,0.75) 100%);
}

.weight__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.weight__panel { display: grid; gap: var(--sp-5); align-content: start; max-width: 34rem; }
.weight__panel h2 {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 900;
  font-stretch: 86%;
  line-height: 0.92;
  letter-spacing: -0.032em;
  max-width: 13ch;
  color: var(--c-white);
}

/* Figures as a dimensioned schedule: each row carries a proportional bar so
   the numbers are comparable at a glance rather than four equal-weight cells. */
.schedule {
  display: grid;
  gap: 0;
  margin: var(--sp-2) 0 0;
  border-top: 1px solid var(--l-light);
}
.schedule > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--l-light);
}
.schedule dt {
  font-family: var(--f-tech);
  font-size: var(--fs-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-on-dark-soft);
}
.schedule dd {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 800;
  font-stretch: 90%;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--c-white);
  text-align: right;
}
.schedule dd i { font-style: normal; color: var(--c-amber); }

/* --------------------------------------------------------------------------
   QUALITY — a spec schedule, not marketing cards
   -------------------------------------------------------------------------- */

.quality__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.spec-table th, .spec-table td {
  padding: var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--l-light);
  vertical-align: top;
}
.spec-table th {
  width: 32%;
  font-family: var(--f-tech);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-amber);
}
.spec-table td {
  font-size: var(--fs-sm);
  color: var(--t-on-dark-mute);
}
.spec-table tr:first-child th, .spec-table tr:first-child td { border-top: 1px solid var(--l-light); }

/* Same table, seated on a paper band */
.spec-table--light th,
.spec-table--light td { border-bottom-color: var(--l-dark); }
.spec-table--light tr:first-child th,
.spec-table--light tr:first-child td { border-top-color: var(--l-dark); }
.spec-table--light th { color: var(--c-amber-deep); }
.spec-table--light td { color: var(--t-on-light-mute); }

/* --------------------------------------------------------------------------
   CTA BAND
   -------------------------------------------------------------------------- */

.cta-band {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4rem, 9vw, 7.5rem);
  background: var(--c-graphite-900);
  color: var(--t-on-dark);
  overflow: hidden;
}
.cta-band__media { position: absolute; inset: 0; z-index: -2; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(12,15,18,0.97) 0%, rgba(12,15,18,0.86) 44%, rgba(12,15,18,0.5) 100%);
}
.cta-band__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-6) clamp(2rem, 6vw, 5rem);
  align-items: end;
}
.cta-band h2 { max-width: 15ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --------------------------------------------------------------------------
   FOOTER — the end of the drawing sheet
   -------------------------------------------------------------------------- */

.site-foot {
  background: var(--c-void);
  color: var(--t-on-dark);
  border-top: 1px solid var(--l-light);
}

.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.7fr) minmax(0, 1fr);
  gap: var(--sp-6) clamp(2rem, 5vw, 4rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.foot__block h2 {
  font-family: var(--f-tech);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-amber);
  margin-bottom: var(--sp-4);
}
.foot__block p { max-width: 40ch; font-size: var(--fs-sm); color: var(--t-on-dark-mute); }
.foot__nav { display: grid; gap: var(--sp-2); align-content: start; }
.foot__nav a, .foot__contact a {
  width: fit-content;
  font-size: var(--fs-sm);
  color: rgba(237, 240, 241, 0.76);
  border-radius: var(--r-xs);
  transition: color var(--d-fast) var(--ease);
}
.foot__nav a:hover, .foot__contact a:hover { color: var(--c-amber); }
.foot__contact { display: grid; gap: var(--sp-2); align-content: start; }
.foot__contact span { font-size: var(--fs-sm); color: rgba(237, 240, 241, 0.58); max-width: 26ch; }

/* Oversized wordmark, set as SVG so it fills the sheet width exactly at every
   viewport instead of guessing a font-size that only lands at one width. */
.foot__word {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: var(--sp-4);
  overflow: visible;
  user-select: none;
  pointer-events: none;
}
.foot__word text {
  font-family: var(--f-display);
  font-size: 200px;
  font-weight: 900;
  font-stretch: 82%;
  fill: rgba(237, 240, 241, 0.055);
}

/* Title block strip */
.foot__block-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-6);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--l-light);
  font-family: var(--f-tech);
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(237, 240, 241, 0.56);
}
.foot__motto { color: var(--c-amber); }

/* --------------------------------------------------------------------------
   PAGE HERO — inner pages
   -------------------------------------------------------------------------- */

.phero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--header-h) + clamp(3.5rem, 8vw, 6.5rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: var(--c-graphite-900);
  color: var(--t-on-dark);
  overflow: hidden;
}
.phero__media { position: absolute; inset: 0; z-index: -2; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.phero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(12,15,18,0.95) 0%, rgba(12,15,18,0.8) 44%, rgba(12,15,18,0.34) 100%),
    linear-gradient(180deg, rgba(12,15,18,0.88) 0%, rgba(12,15,18,0.2) 42%, rgba(12,15,18,0.9) 100%);
}
.phero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--grid-light);
  background-size: 96px 96px;
  -webkit-mask-image: linear-gradient(100deg, #000, transparent 76%);
          mask-image: linear-gradient(100deg, #000, transparent 76%);
}
.phero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.72fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}
.phero h1 {
  max-width: 16ch;
  margin-top: var(--sp-5);
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  font-weight: 900;
  font-stretch: 86%;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--c-white);
}
.phero .lead { margin-top: var(--sp-5); }

/* The card sits over the brightest part of the plate, so it carries its own
   ground rather than trusting the scrim underneath it. */
.phero__card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: rgba(10, 13, 16, 0.78);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid var(--l-light-firm);
  border-radius: var(--r-lg);
}
.phero__card b {
  display: block;
  margin: var(--sp-4) 0 var(--sp-3);
  font-family: var(--f-display);
  font-size: clamp(2.8rem, 6.4vw, 4.8rem);
  font-weight: 900;
  font-stretch: 86%;
  line-height: 0.88;
  letter-spacing: -0.032em;
  color: var(--c-white);
}
.phero__card p { font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   EDITORIAL BLOCKS — about / services / contact
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}
.split--center { align-items: center; }
.split--flip > *:first-child { order: 2; }

.stack { display: grid; gap: var(--sp-5); align-content: start; }

/* Values — a stepped editorial list, not a four-cell bordered grid */
.values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem) clamp(2rem, 5vw, 4.5rem);
}
.value {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--l-dark);
}
.value h3 { max-width: 16ch; }
.value p { font-size: var(--fs-sm); color: var(--t-on-light-mute); max-width: 42ch; }
.value .tnum { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: var(--sp-1); }

/* Service detail rows — large editorial, alternating */
.srow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid var(--l-dark);
}
.srow:nth-child(even) > *:first-child { order: 2; }
.srow__body { display: grid; gap: var(--sp-4); align-content: start; }
.srow h2 { max-width: 14ch; }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
}
.tags li {
  padding: 0.45rem 0.9rem;
  background: rgba(12, 15, 18, 0.045);
  border-radius: var(--r-full);
  font-size: var(--fs-meta-lg);
  font-weight: 500;
  color: var(--t-on-light-mute);
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.tags li:hover { background: rgba(12, 15, 18, 0.09); color: var(--t-on-light); }
.band--dark .tags li { background: rgba(255,255,255,0.07); color: var(--t-on-dark-mute); }
.band--dark .tags li:hover { background: rgba(255,255,255,0.12); color: var(--t-on-dark); }

/* Timeline */
.timeline { display: grid; border-top: 1px solid var(--l-light); }
.tl-item {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--sp-5);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--l-light);
}
.tl-item > span {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 900;
  font-stretch: 88%;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--c-amber);
}
.tl-item p { margin-top: var(--sp-3); max-width: 58ch; }

/* Contact */
.contact__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.ccard {
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--l-dark);
}
.ccard:first-of-type { border-top: 1px solid var(--l-dark); }
.ccard h3 { margin: var(--sp-3) 0; }
.ccard a {
  display: block;
  width: fit-content;
  font-size: var(--fs-sm);
  color: var(--t-on-light-mute);
  border-radius: var(--r-xs);
  transition: color var(--d-fast) var(--ease);
}
.ccard a:hover { color: var(--c-amber-deep); }
.ccard address { font-style: normal; font-size: var(--fs-sm); color: var(--t-on-light-mute); margin-top: var(--sp-3); }

.qform {
  display: grid;
  gap: var(--sp-4);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--c-white);
  border-radius: var(--r-xl);
  box-shadow: var(--e-2);
}
.qform__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.form-note {
  font-size: var(--fs-meta-lg);
  line-height: 1.55;
  color: var(--t-on-light-soft);
}
.form-note a { color: var(--c-amber-deep); text-decoration: underline; text-underline-offset: 3px; }

.map {
  height: min(52vh, 480px);
  min-height: 320px;
  border-top: 1px solid var(--l-dark);
}
.map iframe {
  width: 100%; height: 100%;
  border: 0;
  filter: grayscale(1) contrast(1.06) brightness(0.96);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .lrow {
    grid-template-columns: minmax(0, 84px) minmax(0, 1fr) minmax(0, 0.9fr);
  }
  .lrow__art { display: none; }
}

@media (max-width: 1080px) {
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-4) var(--gutter) var(--sp-7);
    background: rgba(12, 15, 18, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--l-light);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity var(--d-base) var(--ease),
                transform var(--d-base) var(--ease-out),
                visibility var(--d-base) var(--ease);
  }
  .is-navopen .nav { opacity: 1; visibility: visible; transform: none; }

  .nav__link {
    padding: var(--sp-4) var(--sp-2);
    font-size: 1.0625rem;
    font-weight: 500;
    border-radius: var(--r-sm);
    border-bottom: 1px solid var(--l-light);
  }
  .nav__link::after { left: var(--sp-2); right: auto; width: 26px; bottom: var(--sp-2); }
  .nav__cta { margin: var(--sp-5) 0 0; min-height: 52px; font-size: var(--fs-sm); }
  .burger { display: block; }

  .process__layout,
  .model__layout,
  .quality__layout,
  .split,
  .srow,
  .contact__layout,
  .shead--split,
  .phero__layout { grid-template-columns: minmax(0, 1fr); }

  .split--flip > *:first-child,
  .srow:nth-child(even) > *:first-child { order: 0; }

  .process__pin { position: static; }

  .cta-band__layout { grid-template-columns: minmax(0, 1fr); }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The weight plate stops being a bleed and becomes a stacked composition */
  .weight { padding-block: 0 var(--sp-section); }
  .weight__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .weight__plate {
    position: relative;
    left: auto; right: auto; top: auto; bottom: auto;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    aspect-ratio: 4 / 3;
    border-radius: 0;
    margin-bottom: clamp(2rem, 6vw, 3.5rem);
    z-index: 0;
  }
  .weight__plate::after {
    background:
      linear-gradient(180deg, rgba(12,15,18,0.5) 0%, transparent 34%, rgba(12,15,18,0.9) 100%);
  }
  .weight__panel { max-width: none; }
}

@media (max-width: 860px) {
  .lrow {
    grid-template-columns: minmax(0, 56px) minmax(0, 1fr);
    gap: var(--sp-4) var(--sp-5);
    padding-inline: var(--sp-4);
    margin-inline: calc(var(--sp-4) * -1);
  }
  .lrow__body { grid-column: 2; }
  .lrow .tnum { font-size: 2rem; }
}

@media (max-width: 760px) {
  :root { --header-h: 66px; }

  .hero { min-height: auto; padding-bottom: 0; }

  /* The per-line mask assumes one line per span. Narrow viewports force the
     headline to wrap, so the mask would guillotine the wrapped line — drop it
     and rise each line as a whole instead. */
  .hero__title span { overflow: visible; }
  .hero__title span > i {
    transform: none;
    opacity: 0;
    animation: rise 700ms var(--ease-out) forwards;
  }
  .hero__geo { width: 116%; right: -26%; bottom: 22%; opacity: 0.28; }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(12,15,18,0.9) 0%, rgba(12,15,18,0.68) 32%, rgba(12,15,18,0.96) 78%);
  }
  .hero__media img { object-position: 58% 46%; }
  .hero__rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5) var(--sp-4);
  }
  .hero__actions .btn { width: 100%; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-4); }
  .values, .model__sheets, .qform__row, .outputs { grid-template-columns: minmax(0, 1fr); }
  .model__sheets > *:first-child { grid-column: auto; }

  .process__step { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .tl-item { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }

  .weight__plate { aspect-ratio: 4 / 5; }
  .weight__panel h2 { max-width: none; }
  .schedule > div { grid-template-columns: minmax(0, 1fr) auto; }

  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .foot__block-strip { justify-content: flex-start; }
}

@media (max-width: 420px) {
  .lrow { grid-template-columns: minmax(0, 1fr); }
  .lrow__body { grid-column: 1; }
  .lrow .tnum { font-size: 1.75rem; }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION — kept last on purpose.

   The hero entrance is animation-driven: elements start at opacity 0 and the
   keyframe brings them in. The narrow-viewport block above re-declares that
   animation on the headline, so an override placed earlier in the file was
   losing to it and the H1 stayed invisible on phones. Everything that relies
   on motion to become visible is neutralised here, after every media query
   that could reinstate it.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero__media img,
  .hero__grid,
  .hero__eyebrow,
  .hero__lead,
  .hero__actions,
  .hero__rail,
  .hero__title span > i {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .hero__sweep { transform: scaleX(1) !important; animation: none !important; }
  .hero__geo path,
  .hero__geo line,
  .hero__geo circle { stroke-dashoffset: 0 !important; animation: none !important; }
}