@charset "UTF-8";
/* WD STYLES v16 - 2026-08-11 - if the live file does not say v16, it is stale */
/* ==========================================================================
   Wastewater Developments -- core stylesheet
   Rebuild v1.0
   Every page inherits from this file. Page-specific rules go at the bottom
   under a clearly labelled section, never inline in the HTML.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   Palette is sampled from the Wastewater Developments mark itself: the blue
   of WATER, the brown of WASTE, and the green leaf in the droplet. Earth to
   water to life, which is what the product actually does. Legacy Controls
   keeps orange and black on its own site -- two companies, two skins.
   -------------------------------------------------------------------------- */
:root {
  /* Derived from the Wastewater Developments mark:
     deep water for the dark, the logo's water blue for action,
     leaf green as the living accent, earth brown held in reserve.
     Legacy Controls' orange/black stays on Legacy Controls' own site. */
  --ink:        #0A1C2A;   /* deep water, near-black */
  --ink-soft:   #12293C;
  --depth:      #0C3B54;   /* mid-water */
  --depth-lift: #135577;
  --mark:       #0B72B8;   /* action blue -- the logo's WATER, tuned for contrast */
  --mark-dark:  #0A5E94;
  --mark-lift:  #6FBCEE;   /* the same blue, lifted for dark backgrounds */
  --leaf:       #5E9E1F;   /* the droplet's leaf */
  --leaf-dark:  #4A7F17;
  --earth:      #7A5B3A;   /* WASTE brown -- sparingly */
  --slate:      #556472;
  --slate-soft: #86939E;
  --hair:       #D6DDE2;
  --paper:      #F2F6F9;   /* cool water-tinted paper */
  --white:      #FFFFFF;

  --ok:   #1A7F37;
  --warn: #B58900;
  --bad:  #C62828;

  /* Type */
  --display: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
  --body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 7rem;

  --shell: 1200px;
  --nav-h: 72px;
  --radius: 4px;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

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

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

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
}

img, video, iframe { max-width: 100%; }
img { height: auto; border: 0; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--depth-lift); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--mark); }

/* Visible keyboard focus everywhere. Never remove this. */
:focus-visible {
  outline: 3px solid var(--mark);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 2000;
  background: var(--mark);
  color: var(--white);
  padding: var(--s-3) var(--s-5);
  font-weight: 600;
  border-radius: var(--radius);
  transition: top 0.18s var(--ease);
}
.skip-link:focus { top: var(--s-3); color: var(--white); }

/* Anchor targets clear the sticky header */
[id] { scroll-margin-top: calc(var(--nav-h) + var(--s-5)); }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.band { padding-block: var(--s-8); }
.band--tight { padding-block: var(--s-7); }
.band--paper { background: var(--paper); }
.band--ink { background: var(--ink); color: var(--white); }
.band--depth { background: var(--depth); color: var(--white); }

.band--ink h2, .band--depth h2,
.band--ink h3, .band--depth h3 { color: var(--white); }

/* Eyebrow: a small mono label. Used to name a section, never to decorate. */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mark);
  margin: 0 0 var(--s-3);
  display: block;
}
.eyebrow--muted { color: var(--slate); }

.lede {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  color: var(--slate);
  max-width: 62ch;
}
.band--ink .lede, .band--depth .lede { color: rgba(255, 255, 255, 0.78); }

/* Grade line -- the survey/benchmark rule. These systems are specified in
   inches below grade, so the divider carries meaning rather than decoration. */
.grade {
  height: 1px;
  background: color-mix(in srgb, var(--earth) 38%, var(--hair));
  border: 0;
  margin: 0;
  position: relative;
}
.grade::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 5px;
  background-image: repeating-linear-gradient(
    to right,
    var(--hair) 0 1px,
    transparent 1px 14px
  );
}
.grade--dark { background: rgba(255, 255, 255, 0.22); }
.grade--dark::after {
  background-image: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, 0.22) 0 1px,
    transparent 1px 14px
  );
}

/* Spacing utilities -- used sparingly, so the HTML stays free of inline styles */
.mt-6 { margin-top: var(--s-6); }
.grade--spaced { margin: var(--s-6) 0 var(--s-7); }

.label-hint { font-weight: 400; color: var(--slate); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  padding: var(--s-4) var(--s-6);
  border: 2px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.btn--primary { background: var(--mark); color: var(--white); border-color: var(--mark); }
.btn--primary:hover { background: var(--mark-dark); border-color: var(--mark-dark); color: var(--white); }

.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.55); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--white); color: var(--white); }

/* On the light hero, ghost has to invert or it disappears */
.phero .btn--ghost { color: var(--ink); border-color: var(--hair); }
.phero .btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }

.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--white); }

.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

/* --------------------------------------------------------------------------
   5. Header / navigation
   Disclosure menus open on click and on hover. Click is the accessible path:
   hover alone locks out keyboard and touch users.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--white);
  border-bottom: 1px solid var(--hair);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: var(--nav-h);
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

/* One brand mark at every size. The company name is the brand, so it never
   gets swapped out for the droplet -- it just scales down and the header
   tightens its padding to make room. The droplet lives on as the favicon. */
.brand { display: flex; align-items: center; min-width: 0; }

.brand__word {
  height: 46px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

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

.nav__link,
.nav__trigger {
  font-family: var(--body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  transition: color 0.16s var(--ease), background 0.16s var(--ease);
}
.nav__link:hover,
.nav__trigger:hover,
.nav__link[aria-current="page"] { color: var(--mark); background: var(--paper); }
.nav__link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--mark); }

.nav__caret { width: 9px; height: 9px; flex-shrink: 0; transition: transform 0.18s var(--ease); }
[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.nav__group { position: relative; }

.nav__panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 268px;
  background: var(--white);
  border: 1px solid var(--hair);
  border-top: 3px solid var(--mark);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(10, 28, 42, 0.18);
  padding: var(--s-2);
  z-index: 1001;
}
.nav__group[data-open="true"] .nav__panel { display: block; }

.nav__panel a {
  display: block;
  padding: var(--s-3) var(--s-4);
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  border-radius: 3px;
}
.nav__panel a:hover { background: var(--paper); color: var(--mark); }

.nav__panel-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-soft);
  padding: var(--s-3) var(--s-4) var(--s-1);
  display: block;
}

.nav__cta { margin-left: var(--s-2); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  color: var(--ink);
  padding: var(--s-3) var(--s-4);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  align-items: center;
  gap: var(--s-2);
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}

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

/* Positive z-index layering: media 0, scrim 1, copy 2. Negative z-index with
   isolation behaves inconsistently on mobile Safari, and when it fails the
   text lands straight on bright video. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(10, 28, 42, 0.94) 0%, rgba(10, 28, 42, 0.78) 55%, rgba(10, 28, 42, 0.6) 100%),
    linear-gradient(to top, rgba(12, 59, 84, 0.55), transparent 60%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--shell);
  margin-inline: auto;
  padding: var(--s-9) var(--s-5) var(--s-7);
}

.hero__copy { max-width: 46rem; }
.hero h1 { color: var(--white); margin-bottom: var(--s-5); }
.hero__lede { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: rgba(255, 255, 255, 0.8); max-width: 54ch; }

/* --- Signature element: the model index ---------------------------------
   Competitors publish brochures. This company publishes a catalogue with
   real part data, so the homepage opens with the catalogue itself. Figures
   are the shipped tank dimensions from the Hydro-Action design data. */
.model-index { margin-top: var(--s-7); }
.model-index__group + .model-index__group { margin-top: var(--s-6); }

.model-index__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.model-index__note {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
}

.model-index__scroll {
  overflow-x: auto;
  padding-bottom: var(--s-3);
  scrollbar-width: thin;
}

.model-index__track {
  display: flex;
  gap: 0;
  min-width: max-content;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.model {
  padding: var(--s-4) var(--s-5) var(--s-4) 0;
  margin-right: var(--s-5);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  min-width: 116px;
}
.model:last-child { border-right: 0; }

.model__id {
  font-family: var(--mono);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--white);
  display: block;
  letter-spacing: -0.01em;
}
.model__spec {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.58);
  display: block;
  margin-top: var(--s-1);
  white-space: nowrap;
}

/* System rows carry more weight than component rows */
.model--system { min-width: 148px; }
.model--system .model__id { font-size: 1.16rem; color: var(--white); }
.model--system .model__weight {
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--mark);
  display: block;
  margin-top: var(--s-1);
}
.model__parts {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.42);
  display: block;
  margin-top: 2px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   7. Audience doors
   -------------------------------------------------------------------------- */
.doors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}

.door {
  padding: var(--s-6);
  border-right: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s var(--ease);
}
.door:last-child { border-right: 0; }
.door:hover { background: var(--paper); color: inherit; }

.door__rank {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--slate-soft);
  margin-bottom: var(--s-4);
}
.door h3 { margin-bottom: var(--s-3); }
.door p { color: var(--slate); font-size: 0.94rem; flex-grow: 1; }
.door__go {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--mark);
  margin-top: var(--s-5);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.door:hover .door__go { gap: var(--s-3); }

/* --------------------------------------------------------------------------
   8. Split feature
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: center;
}
.split--flip .split__media { order: -1; }

.split__media img {
  width: 100%;
  border-radius: var(--radius);
  display: block;
}

.checks { list-style: none; margin: var(--s-5) 0 0; padding: 0; }
.checks li {
  position: relative;
  padding-left: var(--s-6);
  margin-bottom: var(--s-3);
  color: var(--slate);
  font-size: 0.96rem;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 12px;
  height: 2px;
  background: var(--leaf);
}
.band--ink .checks li, .band--depth .checks li { color: rgba(255, 255, 255, 0.78); }

/* --------------------------------------------------------------------------
   9. Product grid
   -------------------------------------------------------------------------- */
.grid-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-6);
}

.product {
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.product:hover {
  border-color: var(--mark);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(10, 28, 42, 0.1);
  color: inherit;
}

.product__shot {
  aspect-ratio: 4 / 3;
  background: var(--white);
  border-bottom: 1px solid var(--hair);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
}
.product__shot img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.25s var(--ease);
}
.product:hover .product__shot img { transform: scale(1.04); }

.product__body { padding: var(--s-5); display: flex; flex-direction: column; flex-grow: 1; }
.product__tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mark);
  margin-bottom: var(--s-2);
}
.product h3 { font-size: 1.22rem; margin-bottom: var(--s-2); }
.product p { color: var(--slate); font-size: 0.9rem; margin: 0; }

/* --------------------------------------------------------------------------
   10. Tool promo
   -------------------------------------------------------------------------- */
.tool {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s-8);
  align-items: center;
}

.readout {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 3px solid var(--mark);
  border-radius: var(--radius);
  padding: var(--s-5);
  font-family: var(--mono);
  font-size: 0.84rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.88);
}
.readout dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 0 var(--s-4); }
.readout dt { color: rgba(255, 255, 255, 0.55); }
.readout dd { margin: 0; text-align: right; color: var(--white); }
.readout__caption {
  margin-top: var(--s-4);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   11. Credentials strip
   -------------------------------------------------------------------------- */
.creds {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
  align-items: start;
}

.cred { text-align: left; }
.cred__mark {
  height: 58px;
  display: flex;
  align-items: center;
  margin-bottom: var(--s-4);
}
.cred__mark img { max-height: 58px; width: auto; object-fit: contain; }
.cred h3 { font-size: 1.02rem; margin-bottom: var(--s-2); }
.cred p { font-size: 0.87rem; color: var(--slate); margin: 0; }
.cred a { font-size: 0.87rem; font-weight: 600; }

/* --------------------------------------------------------------------------
   12. Form
   -------------------------------------------------------------------------- */
.form-wrap {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: var(--s-8);
  align-items: start;
}

.contact-facts { font-size: 0.95rem; }
.contact-facts dl { margin: var(--s-5) 0 0; }
.contact-facts dt {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-soft);
  margin-top: var(--s-4);
}
.contact-facts dd { margin: var(--s-1) 0 0; color: var(--ink); }
.contact-facts a { font-weight: 600; }

.field { margin-bottom: var(--s-4); }
.field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: var(--s-2);
  color: var(--ink);
}
.field .req { color: var(--mark); }

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 0.95rem;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--mark);
  box-shadow: 0 0 0 3px rgba(11, 114, 184, 0.18);
}

.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-4); }

.field-error {
  display: block;
  font-size: 0.8rem;
  color: var(--bad);
  margin-top: var(--s-2);
  min-height: 1px;
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--bad); }

/* Spam honeypot -- hidden from people, visible to bots. */
.trap {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-status {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--radius);
  font-size: 0.9rem;
  border-left: 3px solid;
}
.form-status[hidden] { display: none; }
.form-status--warn { background: #FFF8E6; border-color: var(--warn); color: #6B5200; }
.form-status--bad  { background: #FDECEC; border-color: var(--bad);  color: #7A1C1C; }
.form-status--ok   { background: #EFF7EA; border-color: var(--leaf); color: #2E5310; }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, 0.72); padding-block: var(--s-8) var(--s-5); }
.site-footer h4 {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-soft);
  margin: 0 0 var(--s-4);
}
.site-footer a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.site-footer a:hover { color: var(--mark); text-decoration: underline; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--s-6);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: var(--s-2); font-size: 0.9rem; }

.footer-logo { height: 46px; width: auto; max-width: 250px; margin-bottom: var(--s-4); display: block; }
.footer-blurb { font-size: 0.88rem; max-width: 34ch; color: rgba(255, 255, 255, 0.6); }

.footer-base {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}
.footer-base nav { display: flex; gap: var(--s-5); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   14. Responsive
   Breakpoint is 900px. The previous build collapsed the desktop nav at
   1600px, which hid it from nearly every laptop.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .creds { grid-template-columns: repeat(2, 1fr); }
  .grid-products { grid-template-columns: repeat(2, 1fr); }
  .split, .tool, .form-wrap { gap: var(--s-6); }
}

@media (max-width: 900px) {
  :root { --s-8: 3.25rem; --s-9: 4.5rem; }

  .nav-toggle { display: inline-flex; }

  .nav {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-top: 1px solid var(--hair);
    border-bottom: 3px solid var(--mark);
    box-shadow: 0 18px 34px rgba(10, 28, 42, 0.14);
    padding: var(--s-3);
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
  .nav[data-open="true"] { display: flex; }

  .nav__link, .nav__trigger { width: 100%; justify-content: space-between; padding: var(--s-4); }

  .nav__group { position: static; }
  .nav__panel {
    position: static;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--mark);
    border-radius: 0;
    background: transparent;
    margin: 0 0 var(--s-2) var(--s-4);
    padding: 0;
    min-width: 0;
  }
  .nav__panel a { color: var(--ink); }
  .nav__panel a:hover { background: var(--paper); color: var(--mark); }
  .nav__panel-label { color: var(--slate-soft); }
  .nav__cta { margin: var(--s-3) 0 0; justify-content: center; }

  .doors { grid-template-columns: 1fr; }
  .door { border-right: 0; border-bottom: 1px solid var(--hair); }
  .door:last-child { border-bottom: 0; }

  .split, .tool, .form-wrap { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------------
   Mobile vertical rhythm. Every component spaces itself from these tokens, so
   shrinking them here tightens the whole site at once instead of page by page.
   Desktop: band padding 52px top and bottom = 104px between sections, which is
   right on a wide screen and cavernous on a 390px phone.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root {
    --s-6: 1.5rem;    /* 32 -> 24 */
    --s-7: 2rem;      /* 48 -> 32 */
    --s-8: 2.25rem;   /* 52 -> 36 */
    --s-9: 2.75rem;   /* 72 -> 44 */
  }
}

@media (max-width: 560px) {
  /* Tighter header gutters buy back the width the wordmark needs. */
  .site-header__inner { padding-inline: var(--s-4); gap: var(--s-4); }
  .brand__word { height: 36px; }
  .grid-products { grid-template-columns: 1fr; }
  .creds { grid-template-columns: 1fr; }
  .field-pair { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .btn { width: 100%; justify-content: center; }
  .btn-row { flex-direction: column; }
}

/* 320-360px: iPhone SE and friends. Name still wins over the menu button. */
@media (max-width: 380px) {
  .brand__word { height: 32px; }
  .nav-toggle { padding: var(--s-3) var(--s-3); }
}


/* --------------------------------------------------------------------------
   15. Motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  /* The video is paused by script.js rather than hidden here, so the poster
     frame still renders. A still image is the right fallback; a blank hero
     is not. */
}

@media print {
  .site-header, .hero__media, .nav-toggle, .btn { display: none !important; }
  body { color: #000; background: #fff; }
  .band--ink, .band--depth { background: #fff !important; color: #000 !important; }
}

/* ==========================================================================
   16. Mega-menu
   One Products entry that opens a multi-column panel. This is what lets the
   catalogue grow to hundreds of SKUs without ever adding a nav item.
   ========================================================================== */
.nav__group--mega { position: static; }

.mega {
  display: none;
  position: absolute;
  top: var(--nav-h);
  left: 0;
  right: 0;
  background: var(--white);
  border-top: 1px solid var(--hair);
  border-bottom: 3px solid var(--mark);
  box-shadow: 0 22px 44px rgba(10, 28, 42, 0.16);
  z-index: 1001;
}
.nav__group--mega[data-open="true"] .mega { display: block; }

.mega__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: var(--s-6) var(--s-5);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-6);
}

.mega__col h4 {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mark);
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--hair);
}
.mega__col ul { list-style: none; margin: 0; padding: 0; }
.mega__col li { margin-bottom: 1px; }
.mega__col a {
  display: block;
  padding: var(--s-2) var(--s-3);
  margin-left: calc(var(--s-3) * -1);
  font-size: 0.88rem;
  color: var(--ink);
  text-decoration: none;
  border-radius: 3px;
}
.mega__col a:hover { background: var(--paper); color: var(--mark); }
.mega__soon { color: var(--slate-soft) !important; }
.mega__soon::after {
  content: "soon";
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  margin-left: var(--s-2);
  padding: 1px 5px;
  border: 1px solid var(--hair);
  border-radius: 2px;
  vertical-align: 1px;
}

/* ==========================================================================
   17. Product page
   ========================================================================== */
/* Product heroes are LIGHT.
   Every product render we have is a cut-out on white. On an ink background
   those read as white rectangles floating in the dark -- the image fights the
   panel instead of sitting in it. A warm paper ground lets the cut-outs
   disappear into the page, and the dark is saved for the CTA band at the
   foot of each page, where there is no product photography to wreck. */
.phero {
  background:
    radial-gradient(120% 90% at 82% 20%, rgba(11, 114, 184, 0.05) 0%, transparent 62%),
    linear-gradient(180deg, #FBFAF8 0%, var(--paper) 100%);
  color: var(--ink);
  border-bottom: 1px solid var(--hair);
  box-shadow: inset 0 3px 0 var(--mark);
  padding-block: var(--s-8);
  min-height: 520px;              /* keeps every product page's header the same */
  display: flex;
  align-items: center;
}
.phero > .shell { width: 100%; }

.phero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--s-8);
  align-items: center;
}
.phero h1 { color: var(--ink); }

/* The shot sits on its own white plate, so a cut-out reads as a product
   photograph rather than a hole in the layout. */
/* No plate. Hero art is transparent-cutout, sitting straight on the paper.
   drop-shadow() follows the alpha channel, so the shadow hugs the product's
   silhouette instead of drawing a box around it. */
.phero__shot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}
.phero__shot img {
  max-width: 100%;
  max-height: 400px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 18px 22px rgba(10, 28, 42, 0.18));
}

.crumb {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--slate-soft);
  margin-bottom: var(--s-4);
}
.crumb a { color: var(--slate); text-decoration: none; }
.crumb a:hover { color: var(--mark); }

/* Key figures under the hero */
.figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  border-top: 1px solid var(--hair);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
}
.figure__val {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  color: var(--mark);
  display: block;
  line-height: 1;
}
.figure__lab {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  display: block;
  margin-top: var(--s-2);
}

/* Spec table */
.spec-wrap { overflow-x: auto; margin-top: var(--s-6); }
.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 720px;
}
.spec th {
  background: var(--ink);
  color: var(--white);
  text-align: left;
  padding: var(--s-3) var(--s-4);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 3px solid var(--mark);
  white-space: nowrap;
}
.spec td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--hair);
  font-variant-numeric: tabular-nums;
}
.spec tbody tr:nth-child(even) { background: var(--paper); }
.spec td:first-child { font-family: var(--mono); font-weight: 500; color: var(--ink); }
.spec .num { text-align: right; }

.table-note {
  font-size: 0.82rem;
  color: var(--slate);
  margin-top: var(--s-4);
  padding-left: var(--s-4);
  border-left: 2px solid var(--mark);
}

/* Numbered process -- order genuinely matters here, so the numbers earn it */
.process { counter-reset: step; margin-top: var(--s-6); }
.step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--hair);
}
.step:last-child { border-bottom: 1px solid var(--hair); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 1.5rem;
  color: var(--mark);
  line-height: 1;
}
.step h3 { margin-bottom: var(--s-2); }
.step p { color: var(--slate); margin: 0; font-size: 0.94rem; }

/* Placeholder for artwork not yet supplied */
.placeholder {
  border: 2px dashed var(--hair);
  border-radius: var(--radius);
  background: var(--paper);
  padding: var(--s-7) var(--s-5);
  text-align: center;
  color: var(--slate-soft);
}
.placeholder__tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mark);
  display: block;
  margin-bottom: var(--s-2);
}
.placeholder p { font-size: 0.88rem; margin: 0; }

/* Downloads */
.downloads { list-style: none; margin: var(--s-5) 0 0; padding: 0; }
.downloads li { border-bottom: 1px solid var(--hair); }
.downloads a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.94rem;
}
.downloads a:hover { color: var(--mark); }
.downloads .meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--slate-soft);
  white-space: nowrap;
}

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-6); }
.gallery figure { margin: 0; }
.gallery img { width: 100%; border: 1px solid var(--hair); border-radius: var(--radius); display: block; background: var(--white); }
.gallery figcaption {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--slate);
  margin-top: var(--s-2);
  letter-spacing: 0.04em;
}

@media (max-width: 1024px) {
  .mega__inner { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
  .figures { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-5); }
}

@media (max-width: 900px) {
  .phero { min-height: 0; padding-block: var(--s-7); }
  .phero__shot { min-height: 0; }
  .phero__shot img { max-height: 300px; }
  .mega {
    position: static;
    display: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--mark);
    margin: 0 0 var(--s-2) var(--s-4);
  }
  .nav__group--mega[data-open="true"] .mega { display: block; }
  .mega__inner { grid-template-columns: 1fr; padding: var(--s-3) 0; gap: var(--s-5); }
  .phero__grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  /* Two up reads better than a single stacked column: half the height, and the
     mono labels still fit at 390px. */
  .figures { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-4); row-gap: var(--s-5); }
  .gallery { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: var(--s-2); }
}

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

/* ==========================================================================
   18. Menu hover bridge
   The gap between a trigger and its panel belongs to neither element, so
   crossing it used to fire mouseleave and snap the menu shut. These invisible
   bridges make the gap part of the panel's hit area.
   ========================================================================== */
.nav__panel::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.mega::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}
@media (max-width: 900px) {
  .nav__panel::before, .mega::before { display: none; }
}

/* A placeholder standing in for a photo needs to hold the space the photo
   will occupy, or the layout jumps when the real image lands. */
.split__media .placeholder {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   19. Brand strip
   Certifications and supplier brands are different claims and shouldn't share
   a row. Certifications are what the equipment is tested to; brands are who we
   build with. This strip holds the second list and grows without redesign.
   ========================================================================== */
/* Logo wall, not a rigid grid: brands get added and removed over time, and a
   wrapping centred row stays tidy at any count instead of orphaning the last
   tile in a half-empty column. */
.brands {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-5) var(--s-3);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--white);
  padding: var(--s-6) var(--s-5);
  margin-top: var(--s-6);
}

.brand-tile {
  flex: 0 1 152px;
  padding: var(--s-3) var(--s-2);
  border-radius: var(--radius);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-3);
  text-decoration: none;
  color: inherit;
  transition: background 0.18s var(--ease);
}
.brand-tile:hover { background: var(--paper); color: inherit; }

.brand-tile__mark {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-tile__mark img { max-height: 38px; max-width: 128px; width: auto; object-fit: contain; }

/* Stand-in wordmark until a supplier sends real artwork */
.brand-tile__word {
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1;
}
.brand-tile__role {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-soft);
  line-height: 1.4;
}

/* Group headers inside a long spec table */
.spec__group td {
  background: var(--ink) !important;
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--s-2) var(--s-4);
  border-bottom: 0;
}
.spec tbody tr.spec__group:nth-child(even) td { background: var(--ink) !important; }

/* ==========================================================================
   20. Photo band
   A full-bleed photograph carrying a section, with an ink wash over it so
   type stays readable. Used sparingly -- it only works when the photograph is
   worth the bandwidth.
   ========================================================================== */
.band--photo {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
}
.band--photo > .band__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: 0.5;
}
.band--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right,
    rgba(10, 28, 42, 0.94) 0%,
    rgba(10, 28, 42, 0.8) 55%,
    rgba(10, 28, 42, 0.62) 100%);
}
.band--photo h2, .band--photo h3 { color: var(--white); }
.band--photo .lede { color: rgba(255, 255, 255, 0.8); }
.band--photo .checks li { color: rgba(255, 255, 255, 0.78); }

/* Inline video figure -- a video used as content, not decoration */
.vid {
  margin: 0;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
}
.vid video { display: block; width: 100%; height: auto; }
.vid figcaption {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--slate);
  padding: var(--s-3) var(--s-4);
  background: var(--white);
  border-top: 1px solid var(--hair);
}
.band--ink .vid figcaption,
.band--depth .vid figcaption {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
  border-top-color: rgba(255, 255, 255, 0.14);
}

.vid-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  margin-top: var(--s-6);
  max-width: 720px;
}
@media (max-width: 700px) { .vid-pair { grid-template-columns: 1fr; } }

/* Three certifications sit better centred than stretched across four columns */
.creds--3 { grid-template-columns: repeat(3, 1fr); max-width: 940px; }
@media (max-width: 900px) { .creds--3 { grid-template-columns: 1fr; max-width: none; } }

/* Placeholder inside a product card, for a photo we haven't got yet */
.product__shot--tbd {
  background: var(--paper);
  border-bottom: 1px solid var(--hair);
  flex-direction: column;
  gap: var(--s-2);
  text-align: center;
  color: var(--slate-soft);
}
.product__shot--tbd .tbd-mark {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mark);
}
.product__shot--tbd .tbd-note { font-size: 0.8rem; max-width: 24ch; }

/* ==========================================================================
   21. Mobile hardening
   Structural stacking is only half of it. These are the details that decide
   whether a phone is usable or merely renders.
   ========================================================================== */
@media (max-width: 900px) {
  /* Comfortable touch targets. 44px is the accepted floor. */
  .nav__link, .nav__trigger, .nav__panel a, .mega__col a, .nav-toggle {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .downloads a { min-height: 48px; }
  .btn { min-height: 48px; }

  /* iOS zooms the whole page when a focused input is under 16px. */
  .field input, .field select, .field textarea { font-size: 16px; }

  /* Long part numbers and emails shouldn't push the layout sideways. */
  body { overflow-wrap: break-word; }
  .readout dl { grid-template-columns: 1fr; gap: 0; }
  .readout dd { text-align: left; margin-bottom: var(--s-3); }

  /* Wide tables get a visible edge so it's obvious they scroll. */
  .spec-wrap {
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--white) 30%, rgba(255,255,255,0)) left / 40px 100% no-repeat,
      linear-gradient(to left,  var(--white) 30%, rgba(255,255,255,0)) right / 40px 100% no-repeat;
  }
}

@media (max-width: 560px) {
  .figures { gap: var(--s-4); }
  .phero__shot img { max-height: 240px; }
  .model-index__head { gap: var(--s-2); }
  .footer-base { flex-direction: column; gap: var(--s-3); }
  .doors, .brands { border-radius: var(--radius); }
}

/* Simple FAQ disclosure list */
.faq { border-top: 1px solid var(--hair); margin-top: var(--s-6); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  cursor: pointer;
  padding: var(--s-4) var(--s-6) var(--s-4) 0;
  font-weight: 600;
  font-size: 1rem;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 1.2rem;
  color: var(--mark);
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--mark); }
.faq details > p { padding: 0 var(--s-6) var(--s-5) 0; color: var(--slate); margin: 0; }
.faq details > p + p { padding-top: 0; }


/* ---------- Interactive 3D model viewer ---------------------------------
   <model-viewer> handles orbit, pinch-zoom and AR. touch-action:pan-y is the
   important bit on phones: vertical drags still scroll the page, horizontal
   drags spin the model, so the viewer never traps the reader. */
.model-box {
  position: relative;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  /* Deep-water stage. The assembly is mostly white PVC, which disappeared
     against a light background -- the pipe edges need something to sit on. */
  background: radial-gradient(120% 90% at 50% 18%, #1B3D55 0%, #12293C 45%, #08161F 100%);
  overflow: hidden;
  margin-top: var(--s-6);
}
.model-box model-viewer[hidden] { display: none !important; }
.model-box model-viewer {
  width: 100%;
  height: clamp(360px, 56vw, 620px);
  display: block;
  background-color: transparent;
  --poster-color: transparent;
  --progress-bar-color: var(--mark);
  --progress-bar-height: 3px;
}
.model-hint {
  position: absolute;
  left: var(--s-4);
  bottom: var(--s-4);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  gap: var(--s-4);
  align-items: center;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: rgba(10, 28, 42, 0.72);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.model-hint[hidden] { display: none; }
.model-reset {
  position: absolute;
  right: var(--s-4);
  bottom: var(--s-4);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(10, 28, 42, 0.72);
  color: #fff;
  border-radius: var(--radius);
  padding: 0.5rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.model-reset:hover { background: var(--mark); border-color: var(--mark); color: #fff; }

/* Shown only if the .glb is missing or the browser can't do WebGL */
.model-fallback { display: block; width: 100%; height: auto; }

/* Site-wide guard: the hidden attribute always wins, even over an explicit
   display on the same element. This bug has now bitten twice (viewer, then
   fallback image) -- this rule retires the whole class of it. */
[hidden] { display: none !important; }

@media (max-width: 560px) {
  .model-hint { font-size: 0.66rem; gap: var(--s-3); left: var(--s-3); bottom: var(--s-3); }
  .model-reset { right: var(--s-3); bottom: var(--s-3); }
}


/* ---------- 3D hotspots & part navigation ------------------------------- */
.hs {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  --dot: 26px;
}
.hs__dot {
  display: grid;
  place-items: center;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--mark);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  border: 2px solid #fff;
  box-shadow: 0 2px 10px rgba(10, 28, 42, 0.35);
  transition: transform 0.18s var(--ease), background 0.18s var(--ease);
}
.hs:hover .hs__dot,
.hs.is-open .hs__dot { transform: scale(1.18); background: var(--ink); }

.hs__card {
  position: absolute;
  left: calc(var(--dot) + 10px);
  top: 50%;
  transform: translateY(-50%) scale(0.96);
  width: 232px;
  background: rgba(10, 28, 42, 0.95);
  color: #fff;
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
  pointer-events: none;
}
.hs__card strong {
  display: block;
  font-family: var(--cond);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  margin-bottom: 0.2rem;
}
.hs__card span { display: block; font-size: 0.78rem; line-height: 1.45; color: #C3D3DE; }
.hs.is-open .hs__card { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); }
@media (hover: hover) {
  .hs:hover .hs__card { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); }
}
/* model-viewer flips this when a hotspot rotates behind the model */
.hs:not([data-visible]) { opacity: 0.22; pointer-events: none; }
.hs:not([data-visible]) .hs__card { opacity: 0 !important; visibility: hidden !important; }

/* mirror the card to the left when the hotspot sits on the right edge */
.hs.flip .hs__card { left: auto; right: calc(var(--dot) + 10px); }

.part-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.part-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--hair);
  background: var(--white);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.45rem 0.9rem 0.45rem 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.part-btn span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--mark);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
}
.part-btn:hover { border-color: var(--mark); color: var(--mark); }
.part-btn.is-active { border-color: var(--mark); background: var(--mark); color: #fff; }
.part-btn.is-active span { background: rgba(255,255,255,0.22); color: #fff; }

@media (max-width: 560px) {
  .hs { --dot: 30px; }
  .hs__card { width: 190px; font-size: 0.75rem; }
  .part-btn { font-size: 0.78rem; }
}


/* Shown only when the 3D model genuinely cannot load */
.model-note {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--hair);
  background: var(--paper);
  font-size: 0.85rem;
  color: var(--slate);
}
.model-note code {
  font-family: var(--mono);
  font-size: 0.82em;
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
}
.model-debug {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--hair);
  background: var(--ink);
  color: #C3D3DE;
}
.model-debug b { color: #fff; font-weight: 600; }


/* Selected-part card, floating inside the model box */
.part-card {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  max-width: min(300px, 72%);
  background: rgba(8, 22, 31, 0.94);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  padding: 0.8rem 2.2rem 0.9rem 1rem;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}
.part-card strong {
  display: block;
  font-family: var(--cond);
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}
.part-card span { display: block; font-size: 0.82rem; line-height: 1.5; color: #C3D3DE; }
.part-card__close {
  position: absolute;
  top: 0.35rem;
  right: 0.45rem;
  border: 0;
  background: none;
  color: #C3D3DE;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem;
}
.part-card__close:hover { color: #fff; }
@media (max-width: 560px) {
  .part-card { max-width: 82%; font-size: 0.9rem; top: var(--s-3); left: var(--s-3); }
}


/* Loading state -- replaces the poster image entirely */
.model-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  background: transparent;
  color: #9FB4C4;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}
.model-loading__spin {
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--mark);
  border-radius: 50%;
  animation: model-spin 0.9s linear infinite;
}
@keyframes model-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .model-loading__spin { animation: none; } }

.model-bar { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: transparent; }
.model-bar__fill { height: 100%; width: 0; background: var(--mark); transition: width 0.2s linear; }


.build-stamp {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--slate-soft);
  margin: var(--s-4) 0 0;
}


/* ---------------------------------------------------------------------------
   Text on dark grounds. The action blue is tuned for contrast against white;
   on the ink and depth bands it drops to 3.4:1 and 2.3:1, which is why the
   hero eyebrow was unreadable. Everything dark-backed uses the lifted tint.
   --------------------------------------------------------------------------- */
.hero .eyebrow,
.band--ink .eyebrow,
.band--depth .eyebrow,
.band--photo .eyebrow,
.site-footer .eyebrow { color: var(--mark-lift); }

.band--ink .lede,
.band--depth .lede,
.band--photo .lede { color: rgba(255, 255, 255, 0.84); }

.band--ink .crumb,
.band--depth .crumb,
.band--photo .crumb { color: rgba(255, 255, 255, 0.62); }
.band--ink .crumb a,
.band--depth .crumb a,
.band--photo .crumb a { color: var(--mark-lift); }

/* Links inside dark bands */
.band--ink a:not(.btn):not(.brand-tile),
.band--depth a:not(.btn):not(.brand-tile),
.band--photo a:not(.btn) { color: var(--mark-lift); }

/* The readout panel sits on the depth band */
.band--depth .readout dt { color: rgba(255, 255, 255, 0.66); }
.band--depth .readout dd { color: #fff; }
.band--depth .readout__caption { color: rgba(255, 255, 255, 0.6); }


/* The model index sits on the dark hero: its blue weights and faint labels
   were at 3.4:1 and below. Same lifted tint, and stronger secondary text. */
.hero .model__weight { color: var(--mark-lift); }
.hero .model-index__note { color: rgba(255, 255, 255, 0.68); }
.hero .model__parts { color: rgba(255, 255, 255, 0.62); }

.band--ink .figure__val,
.band--depth .figure__val,
.band--photo .figure__val,
.hero .figure__val { color: var(--mark-lift); }
.band--ink .figure__lab,
.band--depth .figure__lab,
.band--photo .figure__lab,
.hero .figure__lab { color: rgba(255, 255, 255, 0.66); }
.band--ink .figures,
.band--depth .figures,
.band--photo .figures { border-top-color: rgba(255, 255, 255, 0.18); }


/* Phone hero: the copy runs edge to edge, so the horizontal scrim no longer
   covers it. Use a flat, heavier overlay instead. */
@media (max-width: 900px) {
  .hero__scrim {
    background:
      linear-gradient(to bottom, rgba(10, 28, 42, 0.88) 0%, rgba(10, 28, 42, 0.9) 55%, rgba(10, 28, 42, 0.95) 100%);
  }
}


/* ---------------------------------------------------------------------------
   Document downloads. Each row states format and file size before the click —
   an installer on cell data deserves to know it is about to pull 5 MB.
   --------------------------------------------------------------------------- */
.dl-group + .dl-group { margin-top: var(--s-7); }
.dl-group h3 { margin-bottom: var(--s-4); }
.dl-list { border-top: 1px solid var(--hair); }
.dl-item {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--hair);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s var(--ease);
}
.dl-item:hover { background: var(--paper); color: inherit; }
.dl-item:hover .dl-name { color: var(--mark); }
.dl-icon {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--white);
  background: var(--depth);
  border-radius: 3px;
  padding: 0.2rem 0.4rem;
}
.dl-name { font-weight: 600; }
.dl-desc { display: block; font-size: 0.85rem; color: var(--slate); margin-top: 0.15rem; }
.dl-meta {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--slate-soft);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .dl-item { flex-wrap: wrap; gap: var(--s-3); }
  .dl-meta { margin-left: 0; width: 100%; }
}


/* ---------------------------------------------------------------------------
   Dealer area
   --------------------------------------------------------------------------- */
.auth-card {
  max-width: 420px;
  margin-inline: auto;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: var(--s-6);
}
.auth-card h1 { margin-bottom: var(--s-3); }
.auth-card .lede { font-size: 0.95rem; margin-bottom: var(--s-5); }
.auth-card .field label { color: rgba(255, 255, 255, 0.82); }
.auth-card .field input {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.auth-card .field input:focus { border-color: var(--mark-lift); background: rgba(255, 255, 255, 0.11); }

.auth-note {
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius);
  font-size: 0.88rem;
  margin-bottom: var(--s-4);
  border: 1px solid;
}
.auth-note--ok  { background: rgba(94, 158, 31, 0.14); border-color: rgba(94, 158, 31, 0.5); color: #C9E8A8; }
.auth-note--bad { background: rgba(198, 40, 40, 0.16); border-color: rgba(198, 40, 40, 0.55); color: #F5B9B9; }

.auth-foot {
  margin-top: var(--s-5);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.6;
}
.auth-foot a { color: var(--mark-lift); }

.auth-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.auth-who {
  text-align: right;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}
.auth-who strong { display: block; color: #fff; }
.auth-who span { display: block; }
.auth-who a { color: var(--mark-lift); display: inline-block; margin-top: 0.3rem; }
@media (max-width: 560px) {
  .auth-bar { flex-direction: column; }
  .auth-who { text-align: left; }
}

.nav__link--trade { color: var(--mark); font-weight: 600; }
.nav__link--trade:hover { color: var(--mark-dark); }


/* ==========================================================================
   Dealer area v2 -- self-service registration and admin queue.  ASCII only.
   -------------------------------------------------------------------------- */

/* Honeypot: parked off-screen, not display:none, so naive bots still fill it. */
.hp-field { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }

.field-opt { color: var(--slate-soft); font-weight: 400; font-size: 0.85em; }

.badge-pending {
  display: inline-block; vertical-align: middle; margin-left: var(--s-2);
  min-width: 1.6em; padding: 0.1em 0.45em; border-radius: 999px;
  background: var(--warn); color: var(--white);
  font: 600 0.65em/1.5 var(--body); text-align: center;
}

.app-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: var(--s-5); margin-top: var(--s-5);
}
.app-card {
  background: var(--white); border: 1px solid var(--hair);
  border-left: 4px solid var(--mark); border-radius: 6px;
  padding: var(--s-5);
}
.app-card h3 { margin: 0 0 var(--s-2); }
.app-meta { color: var(--slate); font-size: 0.9rem; line-height: 1.5; margin: 0 0 var(--s-4); }
.app-meta code { font-family: var(--mono); font-size: 0.85em; }
.app-actions { display: flex; gap: var(--s-3); margin-top: var(--s-3); }
.app-card--notice { border-left-color: var(--warn); max-width: 620px; }
.app-card--notice p { margin: 0 0 var(--s-3); }
.app-card--notice p:last-child { margin-bottom: 0; }

.matrix th { font-family: var(--mono); font-size: 0.75rem; }
.matrix td.m-yes { color: var(--ok); font-weight: 600; text-align: center; }
.matrix td.m-no  { color: var(--slate-soft); text-align: center; }

/* Signed-in nav: the trade link shows the first name; Sign out sits beside it. */
.nav__link--signout { color: var(--slate); font-size: 0.9em; }
.nav__link--signout:hover { color: var(--bad); }

@media (max-width: 640px) {
  .app-grid { grid-template-columns: 1fr; }
  .app-actions { flex-direction: column; }
  .app-actions .btn { width: 100%; }
}


/* ===== Portal console bar (v15) — replaces the site menu when signed in ===== */
.console-bar{background:var(--ink);border-bottom:1px solid rgba(255,255,255,.08)}
.console-bar__inner{max-width:1120px;margin:0 auto;padding:.65rem 1.25rem;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.console-bar__logo img{height:26px;display:block}
.console-bar__tabs{display:flex;gap:.25rem;flex-wrap:wrap}
.console-bar__tab{color:#c8d4dd;text-decoration:none;font:500 .92rem/1 var(--body,inherit);padding:.55rem .8rem;border-radius:6px}
.console-bar__tab:hover{color:#fff;background:rgba(255,255,255,.07)}
.console-bar__tab--active{color:#fff;background:rgba(255,255,255,.1);box-shadow:inset 0 -2px 0 var(--mark)}
.console-bar__who{margin-left:auto;display:flex;align-items:center;gap:.9rem;color:#c8d4dd;font-size:.88rem}
.console-bar__who a{color:#c8d4dd;text-decoration:none;border:1px solid rgba(255,255,255,.25);padding:.4rem .8rem;border-radius:6px}
.console-bar__who a:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.console-foot{background:var(--ink);color:#8fa2af;font-size:.82rem;padding:1.1rem 1.25rem;text-align:center}
.console-foot a{color:#c8d4dd}
.badge-new{display:inline-block;background:var(--mark);color:#fff;font:600 .68rem/1 var(--mono,monospace);letter-spacing:.05em;padding:.22em .5em;border-radius:4px;vertical-align:middle;margin-left:.45em}
@media(max-width:640px){.console-bar__inner{gap:.7rem}.console-bar__who{margin-left:0;width:100%;justify-content:space-between}}