/* ============================================================================
   Phoenix Surplus

   Aesthetic lane: equipment condition report / evidence photography. The
   reference is a salvage catalogue crossed with a calibration certificate,
   not a landing page. The listing photos are shot on a workbench under bad
   light with hand-written TESTED stickers on them — that is the proof the
   business works, so the treatment leans into it rather than hiding it.

   Type: one family, Archivo variable. The width axis does the work that a
   second font would normally do — 118% heavy for display (a machined
   nameplate, wide rather than condensed), 100% for reading, 72% for spec
   data (a stamped data plate). One woff2 request.

   Color: Committed. Navy carries the surface, orange is rare enough to mean
   "act here", and the metal tones come from the photographs.
   ========================================================================= */

:root {
  /* Navy is the identity, from the logo. Committed strategy: it holds the
     majority of the surface rather than sitting in a footer. */
  --navy-950: oklch(0.16 0.045 254);
  --navy-900: oklch(0.21 0.055 254);
  --navy-800: oklch(0.28 0.070 254);
  --navy-700: oklch(0.38 0.085 253);

  --orange:   oklch(0.68 0.190 47);
  --orange-lo: oklch(0.60 0.190 40);

  /* Cool near-white tinted toward the brand's own hue. Explicitly not cream. */
  --surface:  oklch(0.977 0.004 254);
  --surface-2: oklch(0.945 0.007 254);
  --ink:      oklch(0.23 0.030 254);
  --ink-mid:  oklch(0.45 0.025 254);
  --hair:     oklch(0.87 0.010 254);

  --on-navy:      oklch(0.93 0.012 254);
  --on-navy-mid:  oklch(0.74 0.022 254);
  --on-navy-hair: color-mix(in oklch, var(--on-navy) 18%, transparent);

  --shell: min(1240px, 100% - 3rem);
  --gutter: clamp(1.5rem, 1rem + 2vw, 3rem);

  /* Ease-out-expo. No bounce, no elastic, nothing linear. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Semantic layers. Never an arbitrary 9999. */
  --z-sticky: 100;
  --z-nav: 200;
  --z-overlay: 300;
}

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: 6.5rem;   /* anchors clear the sticky masthead */
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  font-family: Archivo, "Archivo Fallback", system-ui, sans-serif;
  font-variation-settings: "wdth" 100;
  font-size: clamp(1rem, .95rem + .22vw, 1.09rem);
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
::selection { background: var(--orange); color: #fff; }

/* ------------------------------------------------------------ typography -- */
/* Display: wide and heavy. The width axis is the voice — condensed italic is
   the reflex pick for anything industrial and reads as a truck decal. */
h1, h2, .display {
  font-variation-settings: "wdth" 118;
  font-weight: 800;
  line-height: .93;
  letter-spacing: -0.028em;   /* floor is -0.04em; this stays well clear */
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 1.2rem + 4.1vw, 5rem); }   /* ceiling 6rem */
@media (max-width: 520px) {
  /* Wide display type needs room it does not have on a phone. Narrowing the
     width axis keeps "INSTRUMENTS" on one line instead of overflowing. */
  h1, h2, .display { font-variation-settings: "wdth" 103; }
}
h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); }
h3 {
  font-variation-settings: "wdth" 108;
  font-weight: 700; font-size: clamp(1.15rem, 1.05rem + .45vw, 1.45rem);
  line-height: 1.12; letter-spacing: -0.015em; text-transform: uppercase;
  text-wrap: balance;
}
p { text-wrap: pretty; }
.lede {
  font-size: clamp(1.12rem, 1rem + .55vw, 1.4rem);
  line-height: 1.45; color: var(--ink-mid);
  max-width: 46ch;
}
.prose p, .prose li { max-width: 68ch; }        /* 65-75ch cap */
/* The reset zeroes every margin, and .prose is the one reading column that is
   not a .stack -- without this its paragraphs run straight into each other. */
.prose > * + * { margin-top: 1.15rem; }
.prose > * + h2 {
  margin-top: clamp(2.6rem, 2rem + 1.8vw, 4rem);
  padding-top: 1.3rem;
  border-top: 1px solid var(--hair);
}
.on-navy .lede, .on-navy p { color: var(--on-navy-mid); }
.on-navy { color: var(--on-navy); }
.on-navy h1, .on-navy h2, .on-navy h3 { color: #fff; }

/* Spec voice: the narrow width. Used for data — model numbers, labels,
   record indices. Never for reading copy. */
.spec {
  font-variation-settings: "wdth" 72;
  font-weight: 600; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.3;
}

/* --------------------------------------------------------------- layout -- */
.shell { width: var(--shell); margin-inline: auto; }
.bleed { width: 100%; }
section { padding-block: clamp(3.5rem, 2.4rem + 4.4vw, 6.5rem); }
.roomy { padding-block: clamp(4.5rem, 2.8rem + 6.5vw, 9rem); }
.tight { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.navy { background: var(--navy-900); }
.navy-deep { background: var(--navy-950); }
.tone { background: var(--surface-2); }
.stack > * + * { margin-top: 1.1rem; }
.stack-lg > * + * { margin-top: 2rem; }

/* Section openers: a hairline, the title, and — where the content genuinely
   is a sequence — a right-aligned index. No kicker label above every heading. */
.opener {
  display: grid; gap: 1.1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hair);
  margin-bottom: clamp(2.2rem, 1.6rem + 2vw, 3.5rem);
}
.on-navy .opener { border-top-color: var(--on-navy-hair); }
.opener__row { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; }
.opener__idx { color: var(--ink-mid); flex: none; }
.on-navy .opener__idx { color: var(--on-navy-mid); }

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; gap: .8rem;
  font-variation-settings: "wdth" 92;
  font-weight: 700; font-size: 1rem;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 1rem 1.5rem;
  background: var(--orange); color: var(--navy-950);
  border: 0; border-radius: 2px; cursor: pointer; text-decoration: none;
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.btn:hover { background: oklch(0.74 0.175 55); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn__arrow { transition: transform .35s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--line {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.btn--line:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--ink); }
.on-navy .btn--line, .hero .btn--line {
  color: #fff; box-shadow: inset 0 0 0 1px color-mix(in oklch, #fff 45%, transparent);
}
.on-navy .btn--line:hover, .hero .btn--line:hover { box-shadow: inset 0 0 0 1px #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* The TESTED stamp. Lifted from the hand-written stickers on the actual
   inventory — the one decorative element on the site, and it is theirs. */
.stamp {
  display: inline-block;
  font-variation-settings: "wdth" 80;
  font-weight: 800; font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .3rem .7rem;
  /* Brand orange on the light panel is 2.63:1 at this size. The darker step
     keeps the signal and clears AA; the rule stays full orange. */
  color: oklch(0.47 0.155 40);
  border: 2px solid var(--orange);
  transform: rotate(-3deg);
}

/* ---------------------------------------------------------------- header -- */
.masthead {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: #fff;
  border-bottom: 1px solid var(--hair);
  transition: box-shadow .5s var(--ease);
}
/* Reading position, shown continuously. Two pixels of orange under the
   masthead: the only thing on the page that knows where you are. */
.progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--orange); transform: scaleX(0); transform-origin: left;
  pointer-events: none;
}
@keyframes prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress { animation: prog linear both; animation-timeline: scroll(root block); }
  }
}
/* The bar condenses once you leave the top, so the page gains room as you read
   and the header stops competing with the content it is sitting on. */
.is-scrolled .masthead { box-shadow: 0 10px 30px -14px rgba(8, 24, 47, .3); }
.is-scrolled .masthead__in { min-height: 68px; }
.is-scrolled .brand__logo { height: 54px; }
.masthead__in {
  width: var(--shell); margin-inline: auto;
  display: flex; align-items: center; gap: 2rem; min-height: 96px;
  transition: min-height .5s var(--ease);
}
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: auto; }
.brand__logo { width: auto; height: 74px; transition: height .5s var(--ease); }
.brand__mark { flex: none; width: auto; height: 46px; }
.brand__name {
  font-variation-settings: "wdth" 112; font-weight: 800;
  font-size: 1.12rem; letter-spacing: .01em; text-transform: uppercase;
  color: #fff; line-height: 1;
}
.brand__name b { color: var(--orange); font-weight: 800; }
.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav a {
  font-variation-settings: "wdth" 88;
  font-weight: 600; font-size: .84rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-mid); text-decoration: none;
  padding-block: .55rem;          /* 22px tall was under the 24px target floor */
  transition: color .3s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav .btn { color: var(--navy-950); font-size: .84rem; padding: .7rem 1.1rem; }
.nav-toggle {
  display: none; background: transparent; border: 1px solid var(--rule, var(--hair));
  color: var(--ink); padding: .55rem .9rem; cursor: pointer; border-radius: 2px;
  font-variation-settings: "wdth" 80; font-weight: 700;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
}
@media (max-width: 960px) {
  .masthead__in { min-height: 68px; position: relative; }
  .is-scrolled .masthead__in { min-height: 56px; }
  .is-scrolled .brand__logo { height: 42px; }
  .nav-toggle { display: inline-block; }
  .nav {
    position: absolute; inset: 100% 0 auto; flex-direction: column; align-items: stretch;
    gap: 0; background: #fff; padding: .5rem var(--gutter) 1.5rem;
    border-bottom: 1px solid var(--hair); box-shadow: 0 18px 40px rgba(8,24,47,.16);
    z-index: var(--z-overlay);
  }
  .nav[hidden] { display: none; }
  .nav a { padding-block: .95rem; font-size: 1rem; border-bottom: 1px solid var(--hair); }
  .nav .btn { margin-top: 1rem; justify-content: center; font-size: 1rem; padding: 1rem; }
}

/* ------------------------------------------------------------------ hero -- */
.hero { position: relative; background: var(--navy-950); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 155%; max-width: none; height: 100%; object-fit: cover;
  /* Crop onto the TESTED sticker and off the carpet it was shot on. */
  object-position: 24% 30%;
  /* Unifies bench photos shot under mixed light into one series. */
  filter: saturate(.3) contrast(1.16) brightness(.72);
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(94deg,
      var(--navy-950) 26%,
      color-mix(in oklch, var(--navy-950) 88%, transparent) 44%,
      color-mix(in oklch, var(--navy-950) 45%, transparent) 68%,
      color-mix(in oklch, var(--navy-950) 18%, transparent) 100%),
    linear-gradient(to top, var(--navy-950) 1%, transparent 38%);
}
/* The wide scrim is horizontal, so on a narrow screen the copy ends up over
   the bright part of the photo. Below the breakpoint it becomes vertical. */
@media (max-width: 860px) {
  .hero__media::after {
    background:
      linear-gradient(to bottom,
        color-mix(in oklch, var(--navy-950) 92%, transparent) 0%,
        color-mix(in oklch, var(--navy-950) 82%, transparent) 46%,
        color-mix(in oklch, var(--navy-950) 62%, transparent) 78%,
        color-mix(in oklch, var(--navy-950) 88%, transparent) 100%);
  }
  .hero__media img { width: 100%; object-position: 50% 28%; }
}
.hero__in {
  position: relative;
  width: var(--shell); margin-inline: auto;
  padding-block: clamp(5rem, 3rem + 12vw, 11rem);
  max-width: 100%;
}
.hero__copy { max-width: min(48rem, 100%); }
.hero h1 { max-width: 13ch; }
.hero .lede { max-width: 34ch; }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--orange); }
.hero .lede { color: var(--on-navy-mid); margin-top: 1.6rem; }
.hero__cta { margin-top: 2.2rem; }
/* Photo credit line — names the actual unit in the shot. Evidence, not decor. */
.hero__caption {
  position: absolute; right: var(--gutter); bottom: 1.5rem;
  color: var(--on-navy); opacity: .75; text-align: right; max-width: 24ch;
}
@media (max-width: 780px) { .hero__caption { display: none; } }

/* The first scroll gesture has to tell you the page has depth. The plate
   drifts against the page over the first viewport and then it is done: a
   parallax that runs the whole way down is a gimmick, one that resolves is an
   entrance. Scroll-driven, so it rides the compositor; browsers without scroll
   timelines simply get the still. */
@keyframes heroDrift {
  from { transform: translate3d(0, -3.2%, 0) scale(1.13); }
  to   { transform: translate3d(0,  3.2%, 0) scale(1.13); }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__media img {
      animation: heroDrift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }
  }
}

/* ------------------------------------------------- the register (no cards) -- */
/* Category listing as a specification register: hairline rows, a thumbnail,
   and the model numbers in the narrow width. This is what an instrument tech
   actually reads, and it is not a card grid. */
.register { border-top: 1px solid var(--hair); }
.on-navy .register, .on-navy .register .rec { border-color: var(--on-navy-hair); }
.rec {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr) 1.5rem;
  gap: clamp(1rem, .5rem + 1.6vw, 2.5rem);
  align-items: center;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--hair);
  text-decoration: none;
  transition: background .4s var(--ease), padding-inline .4s var(--ease);
}
a.rec:hover { background: color-mix(in oklch, var(--navy-900) 5%, transparent); padding-inline: 1rem; }
.on-navy a.rec:hover { background: color-mix(in oklch, #fff 6%, transparent); }
.rec__thumb {
  aspect-ratio: 1; width: 100%; overflow: hidden; background: var(--navy-800);
  border-radius: 2px;
}
.rec__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.4) contrast(1.1);
  transition: transform .7s var(--ease);
}
a.rec:hover .rec__thumb img { transform: scale(1.06); }
.rec__models { color: var(--ink-mid); font-size: .92rem; line-height: 1.55; max-width: 62ch; }
.on-navy .rec__models { color: var(--on-navy-mid); }
.rec__go { color: oklch(0.47 0.155 40); font-size: 1.1rem; line-height: 1; }
.on-navy .rec__go { color: var(--orange); }
/* The register is the one section built to a different shape: the heading pins
   in its own column while the six rows run past it. One section behaving
   differently in kind breaks up a long page more than another colour band. */
@media (min-width: 1100px) {
  .register-lay {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    gap: clamp(2.5rem, 1rem + 4vw, 5.5rem);
  }
  .opener--stick { position: sticky; top: calc(68px + 2.5rem); margin-bottom: 0; }
  .opener--stick .opener__row { flex-direction: column; align-items: flex-start; gap: .7rem; }
  .opener--stick .lede { max-width: none; font-size: 1.12rem; }
}

/* With photos supplied, add class="register register--photo" to bring the
   thumbnail column back in. */
.register--photo .rec { grid-template-columns: 6.5rem minmax(0, 18rem) minmax(0, 1fr) 1.5rem; }
@media (max-width: 1100px) {
  /* Placement is explicit here. The arrow's grid-column was written for the
     no-thumbnail row; with a thumbnail there are four children, and auto-flow
     pushed the heading into the 24px arrow column, where it overflowed. */
  .rec { grid-template-columns: minmax(0, 1fr) 1.5rem; row-gap: .5rem; align-items: start; }
  .rec > h3          { grid-column: 1; grid-row: 1; }
  .rec__models       { grid-column: 1; grid-row: 2; max-width: none; }
  .rec__go           { grid-column: 2; grid-row: 1; }

  .register--photo .rec { grid-template-columns: 4.5rem minmax(0, 1fr) 1.5rem; }
  .register--photo .rec__thumb  { grid-column: 1; grid-row: 1 / span 2; }
  .register--photo .rec > h3    { grid-column: 2; grid-row: 1; }
  .register--photo .rec__models { grid-column: 2; grid-row: 2; }
  .register--photo .rec__go     { grid-column: 3; grid-row: 1; }
}

/* ------------------------------------------------------------ photo slabs -- */
.slab { position: relative; overflow: hidden; background: var(--navy-950); }
.slab img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.35) contrast(1.14) brightness(.86);
}
.slab--tall { aspect-ratio: 3 / 4; }
.slab--wide { aspect-ratio: 16 / 9; }

/* A caption set into the frame rather than under it. Used where the photograph
   has to cross a section boundary: a caption below would land on the next
   band's colour, and one photo carrying its label differently is welcome. */
.slab-fig { position: relative; margin: 0; }
.slab__plate {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3.5rem 1.1rem 1rem;
  color: var(--on-navy); pointer-events: none;
  background: linear-gradient(to top,
    var(--navy-950) 0%,
    color-mix(in oklch, var(--navy-950) 55%, transparent) 45%,
    transparent 100%);
}

/* Lap: the photograph runs past the seam into the band below, so the join is
   broken by content instead of reading as a clean colour flip. Desktop only.
   On a phone the columns are stacked and there is nothing to lap into. */
@media (min-width: 900px) {
  /* Stretched, not centred: the photograph fills its column and then keeps
     going, so the overhang reads as the picture running on past the seam
     rather than as a gap opening above it. */
  .offset.offset--lap { align-items: stretch; }
  .lap { margin-bottom: clamp(-13rem, -7rem - 5vw, -7rem); position: relative; z-index: 1; }
  .lap .slab { height: 100%; aspect-ratio: auto; }
  .after-lap { padding-top: clamp(9rem, 6rem + 6vw, 13rem); }
}

/* Asymmetric two-up: copy offset against a photo that bleeds off one edge. */
.offset {
  display: grid; align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
}
.offset--flip > :first-child { order: 2; }
@media (max-width: 860px) {
  .offset { grid-template-columns: minmax(0, 1fr); }
  .offset--flip > :first-child { order: 0; }
}

/* --------------------------------------------------------------- process -- */
/* The one place numbers appear: this genuinely is an ordered sequence, and
   the order carries information. Set as a typographic list, not as cards. */
.steps { border-top: 1px solid var(--hair); }
.step {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr);
  gap: clamp(1rem, .5rem + 1.5vw, 2.5rem);
  padding-block: 2rem;
  border-bottom: 1px solid var(--hair);
}
.step__n {
  font-variation-settings: "wdth" 118; font-weight: 800;
  font-size: 1.6rem; line-height: 1;
  color: oklch(0.47 0.155 40);          /* AA on the light ground */
}
.on-navy .steps, .on-navy .step { border-color: var(--on-navy-hair); }
.on-navy .step__n { color: var(--orange); }
.step p { margin-top: .5rem; max-width: 58ch; }
@media (max-width: 640px) { .step { grid-template-columns: minmax(0, 1fr); gap: .5rem; } }

/* Four steps that fade in together are four steps in parallel. Each rule draws
   across and its number comes up to full as you reach it, so the sequence
   actually reads as one. */
.js .step { position: relative; }
.js .step::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px;
  width: clamp(6rem, 20%, 13rem);   /* a tick, not four orange underlines */
  background: var(--orange); transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease) .1s;
}
.js .step.in::after { transform: scaleX(1); }
.js .on-navy .step__n { color: var(--on-navy-hair); transition: color .8s var(--ease); }
.js .on-navy .step.in .step__n { color: var(--orange); }

/* ------------------------------------------------------------------ lists -- */
.marks { list-style: none; padding: 0; display: grid; gap: .95rem; }
.marks li { position: relative; padding-left: 1.7rem; max-width: 62ch; }
.marks li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .7rem; height: 2px; background: var(--orange);
}

/* Callouts: a full inset panel, not a side stripe. */
.panel {
  background: var(--surface-2); padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  border-radius: 2px;
}
.on-navy .panel { background: color-mix(in oklch, #fff 6%, transparent); }
.panel h3 { margin-bottom: .6rem; }
.panel p { color: var(--ink-mid); max-width: 60ch; }
.on-navy .panel p { color: var(--on-navy-mid); }

/* ------------------------------------------------------------------ forms -- */
.form { display: grid; gap: 1.4rem; }
.form-row { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.field { display: grid; gap: .45rem; }
.field > label, .legend {
  font-variation-settings: "wdth" 82;
  font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink);
}
.hint { font-size: .85rem; color: var(--ink-mid); }
.field input, .field select, .field textarea {
  font: inherit; font-family: Archivo, system-ui, sans-serif; color: var(--ink);
  padding: .85rem .9rem; width: 100%;
  background: #fff; border: 1px solid var(--hair); border-radius: 2px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: oklch(0.58 0.02 254); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--orange); box-shadow: 0 0 0 3px color-mix(in oklch, var(--orange) 22%, transparent);
  outline: none;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input[type="file"] { padding: .6rem; background: var(--surface-2); }
fieldset { border: 0; padding: 0; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: block; padding: .5rem .95rem; font-size: .9rem;
  border: 1px solid var(--hair); border-radius: 2px; background: #fff;
  cursor: pointer; transition: all .3s var(--ease);
}
.chip input:checked + span { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; }
.form-card { background: #fff; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); border: 1px solid var(--hair); }

/* -------------------------------------------------------------------- faq -- */
.faq { border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  font-variation-settings: "wdth" 106; font-weight: 700;
  font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); text-transform: uppercase;
  letter-spacing: -.01em;
  padding: 1.3rem 2.5rem 1.3rem 0; cursor: pointer; list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .4rem; top: 50%;
  width: .8rem; height: 2px; background: var(--orange);
  transition: transform .4s var(--ease);
}
.faq summary::before {
  content: ""; position: absolute; right: .4rem; top: 50%;
  width: .8rem; height: 2px; background: var(--orange);
  transform: rotate(90deg); transition: transform .4s var(--ease);
}
.faq details[open] summary::before { transform: rotate(0deg); }
.faq p { padding-bottom: 1.4rem; color: var(--ink-mid); max-width: 70ch; }

/* ----------------------------------------------------------------- misc -- */
.crumbs { color: var(--on-navy-mid); padding-bottom: .6rem; }
.crumbs a { text-decoration: none; display: inline-block; padding-block: .4rem; }
.crumbs a:hover { color: #fff; }
.skip {
  position: absolute; left: -9999px; background: var(--orange); color: var(--navy-950);
  padding: .8rem 1.2rem; z-index: var(--z-overlay); text-decoration: none; font-weight: 700;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------------------------------------------------------------- footer -- */
.foot { background: var(--navy-950); color: var(--on-navy-mid); padding-block: 4rem 2rem; }
.foot__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.foot h4 { color: #fff; margin-bottom: 1rem; }
.foot ul { list-style: none; padding: 0; display: grid; gap: .15rem; }
.foot ul a { display: inline-block; padding-block: .42rem; }
.foot a { text-decoration: none; transition: color .3s var(--ease); }
.foot a:hover { color: var(--orange); }
.foot__bar {
  margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--on-navy-hair);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
}

/* ---------------------------------------------------------------- motion -- */
/* A vocabulary, not one effect. Prose rises, photographs uncover, register
   rows write in from the leading edge, rules draw themselves. The move fits
   what it reveals; one identical fade on every block is what makes a long page
   read as a stack of interchangeable slabs.

   Everything here enhances an already-visible default. Only `.reveal-armed`
   (set by script, cleared by a failsafe) hides anything, so a renderer that
   never fires the observer -- headless capture, print, a throttled tab -- still
   gets the whole page. */
.reveal { opacity: 1; transform: none; clip-path: none; }

/* Prose and statements: a short rise. Short, because 22px on every block in a
   column turns a scroll into a slideshow. */
.js .reveal-armed .reveal {
  opacity: 0; transform: translate3d(0, 13px, 0);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.js .reveal-armed .reveal.in { opacity: 1; transform: none; }

/* Photographs uncover rather than fade: the frame wipes up while the image
   settles out of a slight overscale, so the picture arrives as an object
   instead of as a change in opacity. */
.js .reveal-armed .rv-uncover {
  opacity: 1; transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s var(--ease);
}
.js .reveal-armed .rv-uncover.in { clip-path: inset(0 0 0 0); }
.js .reveal-armed .rv-uncover img { transform: scale(1.07); transition: transform 1.6s var(--ease); }
.js .reveal-armed .rv-uncover.in img { transform: none; }

/* Register rows arrive from the leading edge, the way a line lands on a printed
   list. No stagger here: you scroll past these one at a time, so the scroll is
   already the stagger. */
.js .reveal-armed .rv-row {
  opacity: 0; transform: translate3d(-18px, 0, 0);
  transition: opacity .6s var(--ease), transform .75s var(--ease);
}
.js .reveal-armed .rv-row.in { opacity: 1; transform: none; }

/* Some things should not arrive at all -- a rule simply draws itself across. */
.js .conditions { position: relative; }
.js .conditions::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: var(--orange); transform: scaleX(0); transform-origin: left;
  transition: transform 1.3s var(--ease);
}
.js .conditions.in::before { transform: scaleX(1); }

@media print {
  .js .reveal-armed .reveal {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
}

/* Stagger belongs to items that enter together in one viewport -- a row of four
   statements, a photo grid -- never to sections down a page. */
.js .reveal-d1 { transition-delay: .09s; }
.js .reveal-d2 { transition-delay: .18s; }
.js .reveal-d3 { transition-delay: .27s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal-armed .reveal { opacity: 1; transform: none; clip-path: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------ utilities -- */
.mt-s { margin-top: .7rem; }
.mt-l { margin-top: 2.5rem; }
.cap { margin-top: .85rem; color: var(--ink-mid); }
.end { justify-content: flex-end; align-items: center; }
.shell--read { width: var(--shell); margin-inline: auto; }
.shell--read .faq, .shell--read .opener { max-width: 52rem; }
.brand--foot { margin-bottom: 1.1rem; }
.pos-high { object-position: 50% 30%; }
@media (max-width: 860px) { .end { justify-content: flex-start; } }

/* Closing CTA: headline left, actions right, not a 50/50 content split. */
.cta-row {
  display: grid; align-items: center; gap: 2rem;
  grid-template-columns: minmax(0, 1.6fr) auto;
}
.cta-row h2 { max-width: 16ch; }
@media (max-width: 860px) { .cta-row { grid-template-columns: minmax(0, 1fr); } }

/* Buyer-side section: no photograph here on purpose. Every section carrying an
   image is its own kind of monotony. */
.buy-split {
  display: grid; gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  align-items: start;
}
@media (max-width: 860px) { .buy-split { grid-template-columns: minmax(0, 1fr); } }

/* Condition band: four statements across a rule, not four boxes. */
.conditions {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  border-top: 1px solid var(--hair);
}
.cond { padding: 1.9rem 1.5rem 2.1rem 0; border-bottom: 1px solid var(--hair); }
.cond h3 { margin-bottom: .75rem; }
.cond p { color: var(--ink-mid); font-size: .95rem; max-width: 30ch; }
@media (min-width: 1101px) {
  .cond + .cond { padding-left: 1.75rem; border-left: 1px solid var(--hair); }
}
.on-navy .conditions, .on-navy .cond { border-color: var(--on-navy-hair); }
.on-navy .cond p { color: var(--on-navy-mid); }
@media (min-width: 1101px) {
  .on-navy .cond + .cond { border-left-color: var(--on-navy-hair); }
}

.scrap {
  display: flex; align-items: flex-start; gap: 1.6rem;
  margin-top: 3rem; padding-top: 2rem;
}
.scrap .stamp { flex: none; margin-top: .2rem; }
.scrap__line { color: var(--ink-mid); max-width: 68ch; }
@media (max-width: 620px) { .scrap { flex-direction: column; gap: 1rem; } }

/* On the navy band the stamp sits on dark, so it takes the bright orange. */
.on-navy .stamp { color: var(--orange); border-color: var(--orange); }

/* ---------------------------------------------------------- brand band -- */
/* The one place the full lockup appears at readable size. Below ~400px wide
   the "Industrial Instrumentation & Equipment" line turns to mud, so the
   image is given a floor rather than a percentage. */
.brandband {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1.75rem, 1rem + 4vw, 4.5rem);
}
.brandband__logo {
  width: clamp(300px, 34vw, 460px); height: auto; flex: none;
}
.brandband__say { flex: 1 1 18rem; }
.brandband__line {
  font-family: Archivo, system-ui, sans-serif;
  font-variation-settings: "wdth" 104;
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.75rem);
  line-height: 1.12; letter-spacing: -.015em;
  text-wrap: balance; max-width: 20ch;
}
.brandband__line em { font-style: normal; color: var(--orange-lo); }
.brandband__rrr { margin-top: 1rem; color: var(--ink-mid); }
.brandband__rrr span { color: oklch(0.47 0.155 40); margin-inline: .3rem; }
@media (max-width: 760px) {
  .brandband { gap: 1.5rem; }
  .brandband__logo { width: min(340px, 100%); }
}

/* The per-section call to action on the reference pages. Eight identical
   bordered buttons down one page is what makes it read as a template; a ruled
   link carries the same action without the repetition. */
.golink {
  display: inline-block; padding-block: .5rem;
  font-variation-settings: "wdth" 88;
  font-weight: 700; font-size: .86rem; letter-spacing: .07em; text-transform: uppercase;
  color: oklch(0.47 0.155 40); text-decoration: none;
  border-bottom: 2px solid color-mix(in oklch, var(--orange) 42%, transparent);
  transition: border-color .3s var(--ease);
}
.golink:hover { border-bottom-color: var(--orange); }
.golink span { display: inline-block; transition: transform .3s var(--ease); }
.golink:hover span { transform: translateX(4px); }
.on-navy .golink { color: var(--orange); }

/* A photo-led split, for breaking the metronome on a page of repeated two-ups. */
.offset--media { grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr); }
@media (max-width: 860px) { .offset--media { grid-template-columns: minmax(0, 1fr); } }

/* A link alone in a paragraph is a control, not prose: give it a target size. */
.panel p > a:only-child, .prose p > a:only-child {
  display: inline-block; padding-block: .3rem;
}

/* Main column + sidebar (forms, About). Fixed tracks cannot auto-collapse, so
   this needs a real breakpoint. */
.split {
  display: grid; gap: clamp(1.2rem, .8rem + 1.6vw, 2.5rem);
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------- gallery -- */
/* A photo grid, not a card grid: no boxes, no borders, the images carry it.
   Mixed portrait and landscape sources are normalised with a fixed ratio. */
.shots {
  display: grid; gap: clamp(.6rem, .3rem + 1vw, 1.1rem);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.shots .shot { margin: 0; }
.shots img {
  /* height:auto is required: the width/height attributes land as CSS
     dimensions, and aspect-ratio is ignored when both are already set. */
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 2px; background: var(--navy-800);
  filter: saturate(.72) contrast(1.05);
  transition: filter .5s var(--ease);
}
.shots .shot:hover img { filter: saturate(1) contrast(1.05); }
.shots figcaption { margin-top: .6rem; color: var(--ink-mid); }
.on-navy .shots figcaption { color: var(--on-navy-mid); }
@media (max-width: 560px) {
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shots img { aspect-ratio: 1; }
}