/* ==========================================================================
   DEXTRUM LABORATORIES — "Clean Room"
   Design system. Spec-sheet vernacular: ruled, tabular, every value has a unit.
   ========================================================================== */

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* Ground */
  --paper:     #FAFBFC;
  --panel:     #FFFFFF;
  --panel-alt: #F3F5F8;
  --vault:     #06070E;
  --vault-alt: #0D111C;

  /* Ink */
  --ink:       #0A0C10;
  --graphite:  #5A6472;
  --mute:      #8B95A3;

  /* Structure */
  --rule:      #DFE3E9;
  --rule-firm: #C2C9D4;
  --rule-dark: rgba(255, 255, 255, 0.14);

  /* Mark triad — accent only, never fills a shape */
  --cy: #2FD7E8;
  --bl: #2E7FE0;
  --vi: #3A2A9C;
  --grad: linear-gradient(90deg, var(--cy) 0%, var(--bl) 52%, var(--vi) 100%);
  --grad-d: linear-gradient(135deg, var(--cy) 0%, var(--bl) 48%, var(--vi) 100%);

  /* Type */
  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;

  --t-hero:  clamp(2.2rem, 7.2vw, 6.75rem);
  --t-page:  clamp(1.95rem, 4.6vw, 4.25rem);
  --t-sect:  clamp(1.65rem, 2.9vw, 2.6rem);
  --t-sub:   clamp(1.15rem, 1.6vw, 1.4rem);
  --t-lead:  clamp(1.0625rem, 1.3vw, 1.1875rem);
  --t-body:  1rem;
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  /* Rhythm */
  --gut:   clamp(1.25rem, 3vw, 2rem);
  --bay:   clamp(4.5rem, 9vw, 9rem);     /* section padding */
  --rail:  clamp(0px, 9vw, 150px);        /* left notation rail */
  --shell: 1440px;
  --edge:  clamp(1.25rem, 4vw, 4rem);

  /* Motion — mass and spring, never linear */
  --ease:      cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 220ms;
  --med:  480ms;
  --slow: 820ms;
}

/* --- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

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

::selection { background: var(--vi); color: #fff; }

/* --- Type primitives ----------------------------------------------------- */

.display {
  font-size: var(--t-hero);
  line-height: 0.94;
  letter-spacing: -0.035em;
  font-weight: 600;
  text-wrap: balance;
}

.page-title {
  font-size: var(--t-page);
  line-height: 0.98;
  letter-spacing: -0.032em;
  font-weight: 600;
}

.sect-title {
  font-size: var(--t-sect);
  line-height: 1.06;
  letter-spacing: -0.026em;
  font-weight: 600;
}

.sub-title {
  font-size: var(--t-sub);
  line-height: 1.25;
  letter-spacing: -0.018em;
  font-weight: 600;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--graphite);
  max-width: 62ch;
}

.body { max-width: 68ch; color: var(--graphite); }
.body + .body { margin-top: 1.1em; }

/* Specification notation — values with units, document codes. Not decoration. */
.spec {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}

.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.01em;
}

/* --- Shell & grid -------------------------------------------------------- */

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--edge);
}

/* Controlled-document layout: notation rail left, content right. */
.doc {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0 var(--gut);
}

.doc__rail {
  padding-top: 0.45rem;
  border-top: 1px solid var(--ink);
}

.doc__body { min-width: 0; }

@media (max-width: 860px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .doc__rail { border-top: 0; padding-top: 0; }
}

.bay { padding-block: var(--bay); }
/* Sits directly under a .bay section — that section's bottom padding is the gap. */
.bay--flush { padding-block: 0 var(--bay); }
.ruled-top { border-top: 1px solid var(--rule); }

/* --- Navigation ---------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 251, 252, 0.82);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--rule);
}

.nav__in {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0 var(--edge);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gut);
}

/* Horizontal lockup: the gradient D beside the DEXTRUM wordmark. The supplied
   logo is a stacked lockup and goes illegible below ~60px, so nav and footer
   use the two elements set side by side instead. */
.nav__mark { display: flex; align-items: center; gap: 0.62rem; flex-shrink: 0; }
.nav__mark .lock-mark { height: 27px; width: auto; }
.nav__mark .lock-word { height: 15px; width: auto; margin-bottom: 1px; }

.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); }

.nav__link {
  position: relative;
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--graphite);
  padding-block: 0.4rem;
  transition: color var(--fast) var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--med) var(--ease);
}

.nav__link:hover { color: var(--ink); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--ink); }

.nav__cta { display: flex; align-items: center; gap: 1.1rem; flex-shrink: 0; }

/* Buyers in this category phone. Keep the number one tap away in the header. */
.nav__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--t-small);
  font-weight: 550;
  letter-spacing: -0.01em;
  color: var(--graphite);
  white-space: nowrap;
  transition: color var(--fast) var(--ease);
}
.nav__tel svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.nav__tel:hover { color: var(--ink); }

@media (max-width: 1150px) { .nav__tel { display: none; } }

/* The quote CTA lives in the bar on desktop and inside the menu panel on
   mobile, so it is never more than one tap away. */
/* Both live in the menu panel only — the header carries its own versions. */
.nav__link--cta,
.nav__link--tel { display: none; }

.nav__toggle { display: none; width: 40px; height: 40px; position: relative; }
.nav__toggle span {
  position: absolute;
  left: 9px;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: transform var(--med) var(--ease), opacity var(--fast) var(--ease);
}
.nav__toggle span:nth-child(1) { top: 16px; }
.nav__toggle span:nth-child(2) { top: 23px; }
.nav[data-open="true"] .nav__toggle span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav[data-open="true"] .nav__toggle span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav__links,
  .nav__cta .btn { display: none; }
  .nav__toggle { display: block; }

  .nav__links {
    position: fixed;
    inset: 72px 0 auto 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--panel);
    border-bottom: 1px solid var(--rule);
    padding: 0.5rem var(--edge) 1.5rem;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--med) var(--ease), transform var(--med) var(--ease);
  }
  .nav[data-open="true"] .nav__links { opacity: 1; transform: none; pointer-events: auto; }
  .nav__link {
    padding-block: 1rem;
    border-bottom: 1px solid var(--rule);
    font-size: 1.05rem;
    color: var(--ink);
  }
  .nav__link::after { display: none; }

  .nav__link--cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    border-bottom: 0;
    margin-top: 1rem;
    padding: 0.95rem 1.4rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--ink);
    background:
      linear-gradient(var(--panel), var(--panel)) padding-box,
      var(--grad-d) border-box;
  }
  .nav__link--cta span { display: grid; place-items: center; width: 13px; height: 13px; }
  .nav__link--cta svg { width: 13px; height: 13px; stroke: currentColor; }

  /* The header number is hidden at this width, so it reappears in the menu. */
  .nav__link--tel { display: flex; align-items: center; gap: 0.55rem; font-weight: 600; }
  .nav__link--tel svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }
}

/* --- Buttons ------------------------------------------------------------- */

/* Transparent pill with a gradient hairline ring. The gradient is a state, not
   a fill: at rest it is a 1px edge, on hover it wipes across the button. The
   pill is the only rounded form on the site, which is what marks it as the
   interactive element among all the rectilinear rules and tables. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.82rem 1.4rem;
  border-radius: 999px;
  font-size: var(--t-small);
  font-weight: 550;
  letter-spacing: -0.008em;
  color: var(--ink);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    var(--grad-d) border-box;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s var(--ease);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-d);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--ease);
}

.btn:hover { color: #fff; }
.btn:hover::before { transform: scaleX(1); }

/* Bare arrow — no chiclet. It travels on hover. */
.btn__pip {
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  background: none;
  border-radius: 0;
  transition: transform 0.45s var(--ease);
}
.btn__pip svg { width: 13px; height: 13px; stroke: currentColor; }
.btn:hover .btn__pip { transform: translate(3px, -3px); }

/* Secondary: plain hairline, no gradient edge. */
.btn--ghost {
  background: transparent;
  border-color: var(--rule-firm);
}
.btn--ghost:hover { color: #fff; border-color: transparent; }

/* On dark grounds: real glass. A gradient border-box layer cannot be used here
   because the translucent fill would let it show through the whole button
   instead of staying a 1px edge, so this variant takes a plain light hairline. */
.btn--light {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.46);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.btn--light:hover { color: #fff; border-color: transparent; }

/* Text link with a drawing rule */
.tlink {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 550;
  font-size: var(--t-small);
  padding-bottom: 3px;
  background-image: var(--grad);
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  background-position: left bottom;
  transition: background-size var(--med) var(--ease);
}
.tlink:hover { background-size: 100% 1.5px; }

/* --- Hero band (the one bold moment) ------------------------------------- */

.vault {
  position: relative;
  background: var(--vault);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* Gradient as a light source, not a fill. Cyan reads as a tight highlight at
   the top right; violet pools low and left. The triad runs the same direction
   as the mark. */
.vault::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(58% 78% at 88% 8%,  rgba(47, 215, 232, 0.26) 0%, rgba(47, 215, 232, 0.09) 38%, transparent 70%),
    radial-gradient(70% 90% at 72% 30%, rgba(46, 127, 224, 0.22) 0%, transparent 66%),
    radial-gradient(85% 100% at 6% 96%, rgba(58, 42, 156, 0.34) 0%, transparent 62%);
  pointer-events: none;
}

/* Fine engineering grid, barely there */
.vault::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: radial-gradient(ellipse 85% 75% at 55% 40%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 55% 40%, #000 25%, transparent 78%);
  pointer-events: none;
}

.vault .spec { color: rgba(255, 255, 255, 0.52); }
.vault .lead { color: rgba(255, 255, 255, 0.68); }
.vault .doc__rail { border-top-color: rgba(255, 255, 255, 0.55); }

/* Photographic hero. The campaign frame is composed with the subject in the
   right half and an empty backdrop left, so the headline sits in the negative
   space the photograph already leaves for it. */
.vault--photo::before,
.vault--photo::after { display: none; }

.vault__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 74% center;
}

.vault__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      var(--vault) 0%,
      rgba(6, 7, 14, 0.94) 26%,
      rgba(6, 7, 14, 0.66) 50%,
      rgba(6, 7, 14, 0.22) 76%,
      rgba(6, 7, 14, 0.05) 100%),
    linear-gradient(to bottom, rgba(6, 7, 14, 0.5) 0%, transparent 20%, transparent 48%, rgba(6, 7, 14, 0.80) 78%, rgba(6, 7, 14, 0.96) 100%);
}

.hero { padding-block: clamp(5rem, 13vh, 9.5rem) clamp(4rem, 9vh, 7rem); }
.hero__title { max-width: 17ch; }
.hero__title em { font-style: normal; color: rgba(255,255,255,0.40); }

/* A photographic hero carries a longer headline, so it runs a size down. */
.vault--photo .display { font-size: clamp(2.05rem, 5.2vw, 4.6rem); }
.vault--photo .hero__title { max-width: 21ch; }
.vault--photo .hero__foot { display: block; }
.vault--photo .hero__foot .lead { max-width: 38ch; margin-bottom: 2rem; }
/* Stop the rule at the text column so it does not draw a line across the photograph. */
.vault--photo .hero__rule { max-width: min(640px, 56%); }

@media (max-width: 900px) {
  .vault__img { object-position: 68% center; }
  .vault__scrim {
    background:
      linear-gradient(to bottom, rgba(6,7,14,0.88) 0%, rgba(6,7,14,0.72) 45%, rgba(6,7,14,0.93) 100%);
  }
}

.hero__rule {
  height: 2px;
  background: var(--grad);
  margin-block: clamp(2.25rem, 5vh, 3.5rem) 1.6rem;
  transform-origin: left;
}

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

/* --- Interior page header ------------------------------------------------ */

.phead { padding-block: clamp(3.75rem, 9vh, 6.5rem) clamp(3rem, 6vh, 4.75rem); }
.phead .lead { margin-top: 1.5rem; }

/* --- Process sequence ----------------------------------------------------
   Numbered because this genuinely is a sequence: material in, product out. */

.steps { border-top: 1px solid var(--ink); counter-reset: step; }

.step {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--gut);
  padding: clamp(1.5rem, 2.8vw, 2.2rem) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}

.step__n {
  counter-increment: step;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  padding-top: 0.3rem;
}
.step__n::before { content: counter(step, decimal-leading-zero); }

.step__t { font-weight: 600; font-size: var(--t-sub); letter-spacing: -0.018em; line-height: 1.25; }
.step__d { color: var(--graphite); font-size: var(--t-small); }

@media (max-width: 900px) {
  .step { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
}

/* --- Key/value register --------------------------------------------------- */

.kv { border-top: 1px solid var(--ink); }

.kvrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--gut);
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.kvrow__k { font-weight: 550; font-size: var(--t-small); }
.kvrow__v { color: var(--graphite); font-size: var(--t-small); }
.vault .kvrow { border-bottom-color: var(--rule-dark); }
.vault .kv { border-top-color: rgba(255,255,255,0.55); }
.vault .kvrow__k { color: #fff; }
.vault .kvrow__v { color: rgba(255,255,255,0.66); }

@media (max-width: 700px) { .kvrow { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; } }

/* --- Market blocks -------------------------------------------------------- */

.mkt { border-top: 1px solid var(--ink); }

.mktrow {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--gut);
  padding: clamp(2rem, 4vw, 3.25rem) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.mktrow__list { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; margin-top: 1rem; }
.chip {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  padding: 0.32rem 0.6rem;
  border: 1px solid var(--rule-firm);
  border-radius: 3px;
  color: var(--graphite);
}

@media (max-width: 900px) {
  .mktrow { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
}

/* --- Certification strip ------------------------------------------------- */

.certs {
  border-top: 1px solid var(--rule-dark);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.cert {
  padding: 1.6rem var(--gut) 1.6rem 0;
  border-right: 1px solid var(--rule-dark);
}
.cert:last-child { border-right: 0; }
.cert:not(:first-child) { padding-left: var(--gut); }

.cert__k { display: block; color: #fff; font-weight: 600; font-size: var(--t-small); letter-spacing: -0.01em; }
.cert__v { display: block; margin-top: 0.3rem; }

@media (max-width: 860px) {
  .certs { grid-template-columns: repeat(2, 1fr); }
  .cert:nth-child(2n) { border-right: 0; }
  .cert:nth-child(-n+2) { border-bottom: 1px solid var(--rule-dark); }
  .cert:nth-child(odd) { padding-left: 0; }
}

@media (max-width: 560px) {
  .certs { grid-template-columns: minmax(0, 1fr); }
  .cert { border-right: 0; padding-left: 0; padding-block: 1.15rem; }
  .cert:not(:last-child) { border-bottom: 1px solid var(--rule-dark); }
}

/* --- Spec table (real data, real units) ---------------------------------- */

/* The table has a minimum readable width. Below that it scrolls inside its own
   container rather than widening the page. */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tablewrap .spectable { min-width: 540px; }

@media (max-width: 600px) {
  .tablewrap { margin-right: calc(var(--edge) * -1); padding-right: var(--edge); }
}

.spectable thead th {
  text-align: left;
  padding: 0 0 0.7rem;
  border-bottom: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 400;
}

.spectable td {
  padding: 1.05rem 1rem 1.05rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
  font-size: var(--t-small);
}

.spectable tbody tr { transition: background var(--fast) var(--ease); }
.spectable tbody tr:hover { background: var(--panel-alt); }

.spectable td:first-child { font-weight: 550; color: var(--ink); font-size: var(--t-body); }
.spectable td:last-child { padding-right: 0; }
.spectable .num { color: var(--graphite); white-space: nowrap; }

/* Capacity bar — data, not decoration */
.bar {
  display: block;
  position: relative;
  height: 4px;
  width: 100%;
  min-width: 70px;
  background: var(--rule-firm);
  border-radius: 2px;
  overflow: hidden;
}
.bar__fill {
  position: absolute;
  inset: 0;
  background: var(--grad);
  border-radius: 2px;
  transform-origin: left;
  transform: scaleX(0);
}

/* --- Index rows (capability / service listings) -------------------------- */

.index { border-top: 1px solid var(--ink); }

.irow {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, 1.15fr) auto;
  gap: var(--gut);
  align-items: start;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: background var(--med) var(--ease);
}

.irow::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--med) var(--ease);
}
.irow:hover::before { transform: scaleX(1); }
.irow:hover { background: var(--panel); }

.irow__code { padding-top: 0.28rem; }
.irow__arrow {
  width: 34px; height: 34px;
  border: 1px solid var(--rule-firm);
  border-radius: 4px;
  display: grid; place-items: center;
  transition: transform var(--med) var(--ease), border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.irow__arrow svg { width: 13px; height: 13px; stroke: var(--ink); }
.irow:hover .irow__arrow { transform: translate(3px, -3px); border-color: var(--ink); background: var(--panel-alt); }

@media (max-width: 900px) {
  .irow {
    grid-template-columns: minmax(0, 1fr) 34px;
    grid-template-areas:
      "code  arrow"
      "title title"
      "desc  desc";
    gap: 0.55rem var(--gut);
  }
  .irow__code  { grid-area: code; padding-top: 0; }
  .irow__t     { grid-area: title; }
  .irow__d     { grid-area: desc; }
  .irow__arrow { grid-area: arrow; justify-self: end; }
}

/* --- Stat block ---------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink);
}

.stat {
  padding: clamp(1.6rem, 3vw, 2.4rem) var(--gut) clamp(1.6rem, 3vw, 2.4rem) 0;
  border-right: 1px solid var(--rule);
}
.stat:last-child { border-right: 0; }
.stat:not(:first-child) { padding-left: var(--gut); }

.stat__n {
  display: block;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(2rem, 4.2vw, 3.35rem);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 500;
}
.stat__n sup { font-size: 0.42em; vertical-align: super; letter-spacing: 0; color: var(--bl); }
.stat__l { display: block; margin-top: 0.85rem; font-size: var(--t-small); color: var(--graphite); max-width: 24ch; }

@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .stat:nth-child(odd) { padding-left: 0; }
}

/* --- Google reviews ------------------------------------------------------
   Presented as a record rather than a consumer star-card: hairline columns,
   the quote doing the work, attribution in document notation. */

.revhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.4rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

.revscore {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 500;
}

.stars { display: inline-flex; gap: 3px; vertical-align: middle; }
.stars svg { width: 14px; height: 14px; fill: var(--bl); }
.stars svg.is-off { fill: var(--rule-firm); }

.revs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
}

.rev {
  padding: clamp(1.5rem, 2.8vw, 2.2rem) var(--gut) clamp(1.5rem, 2.8vw, 2.2rem) 0;
  border-right: 1px solid var(--rule);
}
.rev:last-child { border-right: 0; }
.rev:not(:first-child) { padding-left: var(--gut); }

.rev__q {
  margin: 1rem 0 1.4rem;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--graphite);
}
.rev__who { display: block; font-weight: 550; font-size: var(--t-small); }

@media (max-width: 900px) {
  .revs { grid-template-columns: minmax(0, 1fr); }
  .rev { border-right: 0; padding-left: 0; border-bottom: 1px solid var(--rule); }
  .rev:last-child { border-bottom: 0; }
}

/* --- Instagram grid ------------------------------------------------------ */

.igrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 3px;
}

.ig {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--panel-alt);
}

.ig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.ig:hover img { transform: scale(1.06); }

.ig__o {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(6, 7, 14, 0.55);
  opacity: 0;
  transition: opacity var(--med) var(--ease);
}
.ig:hover .ig__o { opacity: 1; }
.ig__o svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 1.5; }

/* Placeholder tiles while the feed loads, and if it never does. */
.ig--skel { background: linear-gradient(100deg, var(--panel-alt) 30%, var(--panel) 50%, var(--panel-alt) 70%); background-size: 220% 100%; animation: skel 1.5s linear infinite; }
@keyframes skel { to { background-position: -120% 0; } }

@media (max-width: 900px) { .igrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Sections that depend on a live feed stay hidden until it answers. */
[data-feed][hidden] { display: none !important; }

/* --- Full-bleed statement band ------------------------------------------- */

.band { position: relative; overflow: hidden; isolation: isolate; }

.band__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(96deg, rgba(250, 251, 252, 0.95) 0%, rgba(250, 251, 252, 0.80) 42%, rgba(250, 251, 252, 0.42) 100%);
}

.band__in { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.band__t {
  font-size: var(--t-sect);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.1;
  max-width: 19ch;
  margin-bottom: 1rem;
}

/* --- Panels / figures ---------------------------------------------------- */

.fig { position: relative; background: var(--panel-alt); overflow: hidden; }
.fig img { width: 100%; height: 100%; object-fit: cover; }

.fig__cap {
  position: absolute;
  left: 0; bottom: 0;
  padding: 0.5rem 0.8rem;
  background: rgba(6, 7, 14, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255,255,255,0.82);
}

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* --- Forms --------------------------------------------------------------- */

.field { display: block; margin-bottom: 1.5rem; }
.field__l {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 0.55rem;
}
.field__i {
  width: 100%;
  padding: 0.85rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-firm);
  font: inherit;
  color: var(--ink);
  border-radius: 0;
  transition: border-color var(--fast) var(--ease);
}
.field__i:focus { outline: none; border-bottom-color: var(--bl); }
.field__i::placeholder { color: var(--mute); }
textarea.field__i { resize: vertical; min-height: 120px; }

select.field__i {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.5rem;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--graphite) 50%),
    linear-gradient(135deg, var(--graphite) 50%, transparent 50%);
  background-position: calc(100% - 9px) center, calc(100% - 4px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gut); }
@media (max-width: 700px) { .fgrid { grid-template-columns: minmax(0, 1fr); } }

/* --- Inline lead intake --------------------------------------------------
   The fast path, sitting directly under the hero. The full RFQ lives on the
   contact page; this asks only what is needed to open a conversation. */

/* A compact dark card, deliberately a different ground from the page so it
   reads as the one thing to act on. It shares its section with the pitch copy
   rather than filling a band on its own. */
.intake {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: 440px;
  margin-left: auto;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border-radius: 10px;
  background: var(--vault-alt);
  color: #fff;
}

.intake::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad);
}

/* the same light source as the hero band, at a smaller scale */
.intake::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(75% 55% at 88% 4%, rgba(47, 215, 232, 0.16) 0%, transparent 68%),
    radial-gradient(85% 70% at 4% 98%, rgba(58, 42, 156, 0.34) 0%, transparent 66%);
  pointer-events: none;
}

.intake__t {
  display: block;
  font-size: var(--t-sub);
  font-weight: 600;
  letter-spacing: -0.018em;
  margin-bottom: 1.4rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule-dark);
}

/* Filled input boxes, not hairlines: on a dark card a solid field reads as
   something to type into, and it is what the reference format uses. */
.intake .field { margin-bottom: 1rem; }

.intake .field__l {
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 0.45rem;
}
.req { color: var(--cy); margin-left: 0.15em; }

.intake .field__i {
  padding: 0.78rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 6px;
  /* background-color, not the shorthand — the select caret is a background-image
     on the base rule and the shorthand would wipe it out. */
  background-color: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.intake .field__i::placeholder { color: var(--mute); }
.intake .field__i:focus {
  outline: none;
  border-color: var(--cy);
  box-shadow: 0 0 0 3px rgba(47, 215, 232, 0.2);
}
.intake select.field__i { padding-right: 2rem; }

/* Dial code beside the number, as one control. */
.intake__phone {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 0.5rem;
}

/* Consent — required before anyone may be texted. */
.intake__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 1.2rem 0 0.3rem;
}
.intake__consent input {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 0.2rem;
  accent-color: var(--bl);
}
.intake__consent span {
  font-size: 0.76rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
}
.intake__consent strong { color: rgba(255, 255, 255, 0.82); font-weight: 550; }

.intake__sent {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: 6px;
  font-size: var(--t-small);
  line-height: 1.5;
  border: 1px solid rgba(47, 215, 232, 0.45);
  background: rgba(47, 215, 232, 0.12);
  color: #fff;
}
.intake__sent[data-state="error"] {
  border-color: rgba(255, 138, 128, 0.5);
  background: rgba(255, 138, 128, 0.12);
}

.intake .btn { width: 100%; justify-content: center; margin-top: 0.9rem; }
.intake__note { display: block; margin-top: 1rem; text-align: center; }

/* The full RFQ carries far more fields, so it gets a wider card and sits left. */
.intake--wide { max-width: 560px; }
.intake--left { margin-left: 0; margin-right: auto; }

.intake .sub-title { color: #fff; }
.intake textarea.field__i { min-height: 104px; }

.welcome {
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  max-width: 58ch;
}
.welcome__t { margin-bottom: 1.25rem; }
.welcome .lead + .lead { margin-top: 1rem; }
.welcome em { font-style: normal; font-weight: 550; color: var(--ink); }

/* Asymmetric: the argument gets more room than the form. */
.intake__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* The copy column now outruns the form; keep the form in view beside it. */
@media (min-width: 861px) {
  .intake__row > .intake { position: sticky; top: 96px; }
}

@media (max-width: 860px) {
  .intake__row { grid-template-columns: minmax(0, 1fr); }
  .intake { margin-left: 0; max-width: 460px; }
}

.formnote {
  margin-top: 2rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--rule-firm);
  border-left: 2px solid var(--bl);
  border-radius: 3px;
  background: var(--panel);
}

/* --- Footer -------------------------------------------------------------- */

.foot { background: var(--vault); color: rgba(255,255,255,0.62); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; }
.foot a { transition: color var(--fast) var(--ease); }
.foot a:hover { color: #fff; }
.foot__top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--gut); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.foot__h { color: #fff; font-size: var(--t-micro); font-family: var(--mono); letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 1.1rem; display: block; }
.foot__li { padding: 0.32rem 0; font-size: var(--t-small); }
.foot__bar { border-top: 1px solid var(--rule-dark); padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }

.foot__social { display: flex; gap: 0.55rem; margin-top: 1.4rem; }
.foot__social a {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-dark);
  border-radius: 50%;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.foot__social a:hover { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.06); }
.foot__social svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.foot__lock { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.5rem; }
.foot__lock .lock-mark { height: 38px; width: auto; }
.foot__lock .lock-word { height: 34px; width: auto; }

@media (max-width: 860px) { .foot__top { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; } }

/* --- Motion staging ------------------------------------------------------ */

/* Line masks: the <i> slides up out of an overflow-hidden line box. */
.ln { display: block; overflow: hidden; padding-bottom: 0.06em; }
.ln > i { display: block; font-style: inherit; will-change: transform; }

[data-mask] { display: block; overflow: hidden; padding-bottom: 0.06em; }
[data-mask] > i { display: block; font-style: inherit; will-change: transform; }

[data-rise] { will-change: transform, opacity; }
.js [data-rise] { opacity: 0; }

/* Page transition sweep.
   The intro clears itself in CSS so a failed/blocked script can never leave
   the page under a black sheet. JS only drives the outgoing sweep. */
.wipe {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--vault);
  pointer-events: none;
  transform-origin: top;
  transform: scaleY(1);
  animation: wipe-out 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.05s forwards;
}
.wipe::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--grad);
}
.wipe[data-leaving="true"] { animation: none; transform-origin: bottom; }

@keyframes wipe-out {
  to { transform: scaleY(0); visibility: hidden; }
}

/* --- Language switch ----------------------------------------------------- */

.lang {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--rule-firm);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.lang a {
  display: grid;
  place-items: center;
  min-width: 2.1rem;
  padding: 0.34rem 0.5rem;
  border-radius: 999px;
  line-height: 1;
  color: var(--graphite);
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.lang a:hover { color: var(--ink); }
.lang a[aria-current] { background: var(--ink); color: #fff; }

/* Spanish runs longer; let long words break inside headings rather than overflow. */
:lang(es) :is(.display, .page-title, .sect-title, .sub-title, .band__t, .step__t) {
  -webkit-hyphens: auto;
  hyphens: auto;
}
:is(.display, .page-title, .sect-title, .sub-title, .band__t) { overflow-wrap: break-word; }

/* --- Mobile & touch hardening -------------------------------------------- */

a, button, summary, label { -webkit-tap-highlight-color: transparent; }

/* Notched phones in landscape: keep content out from under the camera housing. */
.shell,
.nav__in {
  padding-left: max(var(--edge), env(safe-area-inset-left));
  padding-right: max(var(--edge), env(safe-area-inset-right));
}
.foot { padding-bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1rem)); }

@media (max-width: 940px) {
  /* The menu panel scrolls on its own on short and landscape screens. */
  .nav__links {
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
  html.nav-open,
  html.nav-open body { overflow: hidden; }
}

/* Keep the header on one line down to 320px, including the language switch. */
@media (max-width: 400px) {
  .nav__mark { gap: 0.45rem; }
  .nav__mark .lock-mark { height: 24px; }
  .nav__mark .lock-word { height: 12px; }
  .nav__cta { gap: 0.6rem; }
}

/* Two stat columns get too tight for five-digit figures on small phones. */
@media (max-width: 420px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat,
  .stat:nth-child(odd) { padding-left: 0; padding-right: 0; border-right: 0; }
  .stat:not(:last-child) { border-bottom: 1px solid var(--rule); }
}

@media (max-width: 520px) {
  .foot__top { grid-template-columns: minmax(0, 1fr); }
  .foot__bar { flex-direction: column; gap: 0.5rem; }
}

@media (max-width: 380px) {
  .intake__phone { grid-template-columns: 92px minmax(0, 1fr); }
}

/* The desktop column rules use :not(:first-child), which outranks a plain
   class reset — so once these grids collapse to one column, every second
   item kept its left indent. Reset at matching specificity. */
@media (max-width: 860px) {
  .cert:not(:first-child):nth-child(odd) { padding-left: 0; }
  .stat:not(:first-child):nth-child(odd) { padding-left: 0; }
}
@media (max-width: 560px) {
  .cert:not(:first-child) { padding-left: 0; }
}
@media (max-width: 420px) {
  .stat:not(:first-child) { padding-left: 0; }
}
@media (max-width: 900px) {
  .rev:not(:first-child) { padding-left: 0; }
}

/* The sticky form only helps when the whole card fits on screen. */
@media (min-width: 861px) and (max-height: 819px) {
  .intake__row > .intake { position: relative; top: auto; }
}

/* Finger-sized targets: 44px minimum wherever the pointer is a thumb. */
@media (pointer: coarse) {
  .nav__toggle { width: 44px; height: 44px; margin-right: -4px; }
  .nav__toggle span { left: 11px; }
  .nav__toggle span:nth-child(1) { top: 18px; }
  .nav__toggle span:nth-child(2) { top: 25px; }
  .nav__mark { min-height: 44px; }

  .lang a { min-width: 2.6rem; min-height: 40px; padding-block: 0.8rem; }

  .foot__li { padding: 0; }
  .foot__li a { display: inline-block; padding-block: 0.62rem; }
  .foot__social { gap: 0.7rem; }
  .foot__social a { width: 44px; height: 44px; }

  .tlink { padding-block: 0.7rem; background-position: left calc(100% - 0.55rem); }

  .intake__consent input { width: 22px; height: 22px; margin-top: 0.05rem; }
  .intake__consent { gap: 0.8rem; }
}

/* Touch screens have no hover. Without this, a tapped button or row stays in
   its hover state after the finger lifts. Press feedback moves to :active. */
@media (hover: none) {
  .btn:hover::before { transform: scaleX(0); }
  .btn:not(.btn--light):hover { color: var(--ink); }
  .btn--ghost:hover { border-color: var(--rule-firm); }
  .btn:hover .btn__pip { transform: none; }
  .btn:active::before { transform: scaleX(1); transition-duration: 0.18s; }
  .btn:not(.btn--light):active { color: #fff; }

  .nav__link:not([aria-current]):hover::after { transform: scaleX(0); }

  .irow:hover { background: transparent; }
  .irow:hover::before { transform: scaleX(0); }
  .irow:hover .irow__arrow { transform: none; border-color: var(--rule-firm); background: transparent; }
  .irow:active { background: var(--panel); }

  .ig:hover img { transform: none; }
  .ig:hover .ig__o { opacity: 0; }

  .spectable tbody tr:hover { background: transparent; }

  /* No hover to reveal the underline, so text links show it at rest. */
  .tlink { background-size: 100% 1.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-rise] { opacity: 1 !important; transform: none !important; }
  .wipe { display: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}