/* ==========================================================================
   Precambrian Products Inc. — design system
   Brand tokens are exact values from the precambrian-brand skill. Do not
   substitute. Everything else is derived from them.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */

:root {
  /* Brand — exact, from the official design files */
  --teal:        #145D62;
  --navy:        #0E4775;
  --mint:        #BFE6DA;
  --rust:        #AF3300;
  --grad-from:   #0E4775;
  --grad-to:     #3CB891;
  --black:       #000000;
  --white:       #FFFFFF;

  /* Derived — tints and shades of the brand hues only */
  --teal-dark:   #0E4448;
  --teal-tint:   #E7F2F1;
  --mint-tint:   #F2FAF7;
  --navy-tint:   #EDF2F7;
  --ink:         #10201F;
  --ink-soft:    #40595A;   /* 6.1:1 on white */
  --rule:        #D6E3E2;
  --rule-strong: #A9C6C4;

  --brand-gradient: linear-gradient(100deg, var(--grad-from) 0%, var(--grad-to) 100%);

  /* The filament web. A line grid pushed around by fractal noise — the
     texture of a meltblown nonwoven, generated rather than photographed.
     Held at a small intrinsic size so the browser rasterises it once. */
  --fibre-web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='420'%3E%3Cdefs%3E%3Cpattern id='l' width='7' height='7' patternUnits='userSpaceOnUse'%3E%3Cpath d='M-1 3.5H8' stroke='%23ffffff' stroke-width='0.9' fill='none'/%3E%3C/pattern%3E%3Cfilter id='w' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016' numOctaves='4' seed='9' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='78' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3ClinearGradient id='d' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='0.04'/%3E%3Cstop offset='0.5' stop-color='%23ffffff' stop-opacity='0.42'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='1'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='760' height='420' fill='url(%23d)'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m)'%3E%3Crect width='760' height='420' fill='url(%23l)' filter='url(%23w)'/%3E%3C/g%3E%3C/svg%3E");

  /* Type — Libre Franklin is the single brand typeface (brand mandate).
     Roles are separated by weight, tracking and case rather than by family. */
  --font: "Libre Franklin", "Franklin Gothic", Arial, system-ui, sans-serif;

  --step--2: clamp(0.69rem, 0.67rem + 0.10vw, 0.75rem);
  --step--1: clamp(0.81rem, 0.78rem + 0.14vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.16vw, 1.10rem);
  --step-1:  clamp(1.20rem, 1.13rem + 0.35vw, 1.44rem);
  --step-2:  clamp(1.45rem, 1.29rem + 0.78vw, 2.00rem);
  --step-3:  clamp(1.85rem, 1.53rem + 1.55vw, 2.90rem);
  --step-4:  clamp(2.40rem, 1.72rem + 3.30vw, 4.60rem);

  /* Space */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 6rem;     --s10: 8rem;

  --measure: 68ch;
  --page: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  --focus: 0 0 0 3px var(--white), 0 0 0 6px var(--teal);
}

/* ------------------------------------------------------------- 2. Elements */

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.08;
  color: var(--teal);
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.01em; }
h4 { font-size: var(--step-0); letter-spacing: 0; }

p { margin: 0 0 var(--s4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--teal); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--teal-dark); }

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

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 2px; }

.skip {
  position: absolute; left: var(--s4); top: -100%;
  background: var(--teal); color: var(--white);
  padding: var(--s3) var(--s5); z-index: 200; font-weight: 700;
}
.skip:focus { top: var(--s4); }

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

/* -------------------------------------------------------------- 3. Utility */

.wrap { width: min(var(--page), 100%); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--mint { background: var(--mint-tint); }
.section--teal { background: var(--teal); color: var(--white); }
.section--navy { background: var(--navy); color: var(--white); }
.section--teal h2, .section--teal h3, .section--navy h2, .section--navy h3 { color: var(--white); }
.section--teal p, .section--navy p { color: rgba(255,255,255,0.88); }

/* The eyebrow is a data label, not decoration: it carries the material,
   polymer or capability class of the block it sits above. */
.eyebrow {
  display: flex; align-items: center; gap: var(--s3);
  margin: 0 0 var(--s4);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.eyebrow::before {
  content: ""; width: 10px; height: 11px; flex: none;
  background: var(--teal);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.section--teal .eyebrow, .section--navy .eyebrow { color: rgba(255,255,255,0.75); }
.section--teal .eyebrow::before, .section--navy .eyebrow::before { background: var(--mint); }

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); }
.section--teal .lede, .section--navy .lede { color: rgba(255,255,255,0.9); }

.section-head { margin-bottom: var(--s7); }
.section-head p { color: var(--ink-soft); }

/* Hexagon bullets — the logo's shape doing a second job. */
.hex-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.hex-list--2col { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s3) var(--s6); }
.hex-list li { position: relative; padding-left: var(--s5); max-width: var(--measure); }
.hex-list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 9px; height: 10px;
  background: var(--teal);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.section--teal .hex-list li::before, .section--navy .hex-list li::before { background: var(--mint); }

/* ------------------------------------------------------------- 4. Controls */

.btn {
  display: inline-flex; align-items: center; gap: var(--s3);
  padding: 0.95rem 1.6rem;
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; border: 2px solid transparent; border-radius: 0;
  cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn svg { width: 14px; height: 14px; flex: none; }

/* white on #145D62 = 7.3:1 */
.btn--primary { background: var(--teal); color: var(--white); border-color: var(--teal); }
.btn--primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: var(--white); }

.btn--ghost { background: transparent; color: var(--teal); border-color: var(--rule-strong); }
.btn--ghost:hover { border-color: var(--teal); background: var(--teal-tint); color: var(--teal); }

.btn--onDark { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn--onDark:hover { background: var(--mint); color: var(--navy); }

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

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s4); }

/* --------------------------------------------------------------- 5. Header */

.masthead { position: sticky; top: 0; z-index: 100; background: var(--white); border-bottom: 1px solid var(--rule); }

.masthead__bar {
  display: flex; align-items: center; gap: var(--s5);
  min-height: 96px; padding-block: var(--s4);
}
.masthead__logo { flex: none; display: block; text-decoration: none; }
.masthead__logo img { display: block; width: clamp(150px, 16vw, 196px); }
.masthead__tag {
  display: block; margin-top: -6px;
  /* Sits under the wordmark, not under the hex icon. */
  padding-left: 22%;
  white-space: nowrap;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--teal);
}

.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(var(--s2), 1vw, var(--s4)); }
.nav a { white-space: nowrap; }
.nav .btn { white-space: nowrap; padding: 0.75rem 1.1rem; }
.nav a {
  font-size: var(--step-0); font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; text-decoration: none; color: var(--ink);
  padding-block: var(--s2); border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--teal); border-bottom-color: var(--teal); }
/* The CTA is a button, not a nav link — .nav a's ink color and teal hover
   must not win over the button's white-on-teal. */
.nav a.btn--primary, .nav a.btn--primary:hover { color: var(--white); border-bottom-color: transparent; }
.nav a.nav__dist, .nav a.nav__dist:hover { border-bottom-color: transparent; }
/* Between the mobile menu and full desktop width there is no room for a
   second button without wrapping the bar — the distributor CTA lives in the
   hero, the contact page and the mobile menu at those widths. */
@media (min-width: 941px) and (max-width: 1500px) { .nav__dist { display: none; } }


.masthead__tel {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--step--1); font-weight: 700; letter-spacing: 0.04em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.masthead__tel svg { width: 14px; height: 14px; color: var(--teal); }
.masthead__tel:hover { color: var(--teal); }

.nav-toggle { display: none; }

@media (max-width: 940px) {
  .masthead__bar { flex-wrap: wrap; gap: var(--s4); }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: var(--s2);
    margin-left: auto; background: none; border: 2px solid var(--rule-strong);
    padding: 0.6rem 0.9rem; font: inherit; font-size: var(--step--1);
    font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--teal); cursor: pointer;
  }
  .nav {
    order: 3; width: 100%; margin-left: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    border-top: 1px solid var(--rule); padding-block: var(--s3);
  }
  .nav[hidden] { display: none; }
  .nav a { width: 100%; padding-block: var(--s3); border-bottom: 1px solid var(--rule); }
  .nav .btn { justify-content: center; border-bottom: 2px solid transparent; margin-top: var(--s3); }
  .masthead__tel { order: 2; }
}

/* ----------------------------------------------------------------- 6. Hero
   The hero is the material. A displaced line grid produces a filament web —
   what meltblown actually looks like magnified — laid over the brand
   gradient, thinning to the left so type sits on clear ground. No stock
   photography.

   It is a data-URI background at a small intrinsic size, not a live SVG
   filter on a full-bleed element: the browser rasterises it once and scales
   it, instead of running feTurbulence over 2500px every repaint.           */

.hero { position: relative; background: var(--grad-from); color: var(--white); overflow: hidden; }
.hero__media {
  position: absolute; inset: 0;
  background-image: var(--fibre-web), var(--brand-gradient);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
}
/* Scrim holds >=0.86 navy across the whole text column, so white type never
   falls below 4.5:1 even over the light end of the brand gradient. */
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(95deg, rgba(14,71,117,0.96) 0%, rgba(14,71,117,0.88) 58%, rgba(14,71,117,0.28) 100%); }

.hero__inner { position: relative; padding-block: clamp(4rem, 11vw, 9rem); }
.hero__eyebrow { color: rgba(255,255,255,0.8); }
.hero__eyebrow::before { background: var(--mint); }
.hero h1 { color: var(--white); max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--mint); }
.hero__lede { margin-top: var(--s5); font-size: var(--step-1); line-height: 1.5; color: rgba(255,255,255,0.92); max-width: 52ch; }
.hero .btn-row { margin-top: var(--s6); }

/* Spec rail: the four numbers a filtration buyer scans for, stated up front. */
.specrail { position: relative; background: var(--white); border-bottom: 1px solid var(--rule); }
.specrail__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s5) var(--s6); padding-block: var(--s6);
}
.specrail__item { display: flex; align-items: center; gap: var(--s4); }
.specrail__text { min-width: 0; }
.specrail__value { display: block; font-size: var(--step-1); font-weight: 800; color: var(--navy); letter-spacing: -0.01em; line-height: 1.15; }
.specrail__label { display: block; font-size: var(--step--2); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-soft); margin-top: 2px; }

/* ------------------------------------------------------- 7. Hexagon badge
   The signature element. Clean duotone gradient in the brand palette with a
   soft top light — no texture noise. Grade density is encoded by gradient
   depth: a Level 1 (95%) badge ends lighter and more open than a Level 3
   (99%) badge, and MERV 8 lighter than MERV 13.                             */

.hex {
  --hex-deep: #123A5E;   /* gradient start — fixed */
  --hex-end:  #1E8573;   /* gradient end — deeper = denser = higher grade */
  --hex-size: 108px;
  --value: 1.32rem;
  position: relative; flex: none;
  width: var(--hex-size); aspect-ratio: 1 / 1.12;
  display: grid; place-items: center; align-content: center;
  /* Fixed padding: percentage padding resolves against the parent container,
     which made the text box overflow and sit off-centre. */
  padding-inline: 8px;
  background:
    radial-gradient(120% 85% at 28% 12%, rgba(255,255,255,0.16), transparent 55%),
    linear-gradient(160deg, var(--hex-deep) 0%, var(--teal) 58%, var(--hex-end) 100%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  color: var(--white);
  text-align: center;
}
/* Unit reads first, value second — the badge is a gauge, not a sticker. */
.hex__unit {
  display: block; order: -1;
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--white); line-height: 1; margin-bottom: 5px;
  text-shadow: 0 1px 2px rgba(10,32,50,0.4);
}
.hex__value {
  display: block; white-space: nowrap;
  font-size: var(--value); font-weight: 800; line-height: 1; letter-spacing: -0.03em;
  text-shadow: 0 1px 3px rgba(10,32,50,0.4);
}
.hex__sub { display: block; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); margin-top: 4px; text-shadow: 0 1px 2px rgba(10,32,50,0.4); }

/* Small badge carries the value only — its unit is stated in the label beside it. */
.hex--sm { --hex-size: 84px; --value: 1.2rem; }
.hex--sm .hex__unit { font-size: 0.5rem; letter-spacing: 0.12em; margin-bottom: 3px; }
.hex--lg { --hex-size: 148px; --value: 2.2rem; }
.hex--lg .hex__unit { font-size: 0.66rem; }

/* Density steps: deeper gradient end = denser web = higher grade. */
.hex--d1 { --hex-end: #3CB891; }
.hex--d2 { --hex-end: #2FA285; }
.hex--d3 { --hex-end: #1E8573; }
.hex--d4 { --hex-end: #156B5D; }
.hex--d5 { --hex-end: #0F5148; }

/* Hexagon as icon container */
.hexicon {
  width: 46px; aspect-ratio: 1 / 1.1; flex: none;
  display: grid; place-items: center;
  background: var(--teal);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  color: var(--white);
}
.hexicon svg { width: 20px; height: 20px; }
.section--teal .hexicon, .section--navy .hexicon { background: var(--mint); color: var(--navy); }

/* ------------------------------------------------------------- 8. Products */

.grid { display: grid; gap: var(--s6); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); }

.product {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--teal);
  padding: var(--s6);
  transition: border-color .18s ease, transform .18s ease;
}
.product:hover { border-color: var(--rule-strong); border-top-color: var(--teal-dark); transform: translateY(-2px); }
.product__badges { display: flex; gap: var(--s3); margin-bottom: var(--s5); }
/* Full-bleed photo across the top of a tile. */
.product__photo { margin: calc(var(--s6) * -1) calc(var(--s6) * -1) var(--s5); }
.product__photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-bottom: 1px solid var(--rule); }
.product__eyebrow { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--s2); }
/* A tile's heading level depends on where the tile sits in the page outline,
   so both levels get the same treatment. */
.product h2, .product h3 { font-size: var(--step-1); letter-spacing: -0.01em; margin-bottom: var(--s3); }
.product h2 a, .product h3 a { color: inherit; text-decoration: none; }
.product h2 a:hover, .product h3 a:hover { text-decoration: underline; }
.product p { font-size: var(--step--1); color: var(--ink-soft); }
.product__spec { margin: var(--s4) 0 var(--s5); border-top: 1px solid var(--rule); }
.product__spec div { display: flex; justify-content: space-between; gap: var(--s4); padding: 0.5rem 0; border-bottom: 1px solid var(--rule); font-size: var(--step--1); }
.product__spec dt { color: var(--ink-soft); }
.product__spec dd { margin: 0; font-weight: 700; color: var(--navy); text-align: right; }
.product__link { margin-top: auto; }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--step--1); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; color: var(--teal);
  border-bottom: 2px solid var(--mint); padding-bottom: 2px;
}
.link-arrow:hover { border-bottom-color: var(--teal); }
.link-arrow svg { width: 13px; height: 13px; }
.section--teal .link-arrow, .section--navy .link-arrow { color: var(--white); border-bottom-color: rgba(255,255,255,0.5); }
.section--teal .link-arrow:hover, .section--navy .link-arrow:hover { border-bottom-color: var(--white); }

/* ----------------------------------------------------------- 9. Capability */

.cap {
  display: flex; gap: var(--s4); align-items: flex-start;
  padding: var(--s5) 0; border-top: 1px solid var(--rule);
}
.cap h3 { font-size: var(--step-0); margin-bottom: var(--s2); }
.cap h3 a, .capdetail h2 a { color: inherit; text-decoration: none; }
.cap h3 a:hover, .capdetail h2 a:hover { text-decoration: underline; }
.cap p { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }
.section--navy .cap { border-top-color: rgba(255,255,255,0.2); }
.section--navy .cap h3 { color: var(--white); }
.section--navy .cap p { color: rgba(255,255,255,0.78); }

/* ------------------------------------------------------------- 10. Proof */

.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s6); margin-top: var(--s6); }
.proof__item { display: flex; gap: var(--s4); align-items: flex-start; }
.proof__item strong { display: block; font-size: var(--step-0); color: var(--navy); }
/* Label span only — the hexicon is also a span, so scope to the text column. */
.proof__item div > span { display: block; font-size: var(--step--1); color: var(--ink-soft); margin-top: 2px; }
.section--navy .proof__item strong, .section--teal .proof__item strong { color: var(--white); }
.section--navy .proof__item div > span, .section--teal .proof__item div > span { color: rgba(255,255,255,0.78); }

.made-row { margin-top: var(--s7); }
.footer .made-row { margin-top: var(--s5); }

/* Rust is reserved for exactly one job on this site: Canadian manufacture. */
.made {
  display: inline-flex; align-items: center; gap: var(--s3);
  border: 2px solid var(--rust); color: var(--rust);
  padding: 0.5rem 0.9rem;
  font-size: var(--step--2); font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase;
  background: var(--white);
}
.made svg { width: 15px; height: 15px; }
.made--onDark { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.55); }

/* Invitation tile closing the product grid — same shape, different job. */
.product--invite { background: var(--mint-tint); border-top-color: var(--navy); }
.product--invite .product__link { margin-top: var(--s5); }

/* Capability columns share one hairline scale; each column closes with a rule. */
.caps { gap: 0 var(--s8); }
.caps > div > .cap:last-child { border-bottom: 1px solid rgba(255,255,255,0.2); }

.closer { display: flex; flex-wrap: wrap; gap: var(--s6) var(--s7); align-items: center; justify-content: space-between; }
.closer h2 { max-width: 18ch; }
.closer .lede { margin-top: var(--s4); max-width: 46ch; }

.footer__contact { margin-top: var(--s4); }

/* --------------------------------------------------------------- 11. Table */

.spectable { width: 100%; border-collapse: collapse; font-size: var(--step--1); margin-bottom: var(--s5); }
.spectable caption { text-align: left; font-weight: 700; color: var(--ink-soft); font-size: var(--step--2); letter-spacing: 0.13em; text-transform: uppercase; padding-bottom: var(--s3); }
.spectable th, .spectable td { text-align: left; padding: 0.8rem 1rem; border: 1px solid var(--rule-strong); vertical-align: top; }
.spectable thead th { background: var(--mint); color: var(--black); font-weight: 800; }
.spectable tbody th { background: var(--mint-tint); font-weight: 700; color: var(--navy); width: 40%; }

/* ------------------------------------------------- 9b. Capability detail */

.capdetail { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s6); padding-block: var(--s7); border-top: 1px solid var(--rule); }
.capdetail:first-of-type { border-top: 0; padding-top: 0; }
.capdetail:last-of-type { border-bottom: 1px solid var(--rule); }
.capdetail__body h2 { font-size: var(--step-2); margin-bottom: var(--s3); }
.capdetail__body p { color: var(--ink-soft); }
@media (max-width: 640px) { .capdetail { grid-template-columns: 1fr; gap: var(--s4); } }

.hexicon--lg { width: 82px; }
.hexicon--lg svg { width: 34px; height: 34px; }

/* -------------------------------------------------- 11b. Product page body */

.productpage { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.9fr); gap: var(--s8); align-items: start; }
@media (max-width: 900px) { .productpage { grid-template-columns: 1fr; } }

.productpage__main h2 { margin-bottom: var(--s4); }
.subhead { margin-top: var(--s7); margin-bottom: var(--s4); color: var(--navy); }

.productpage__aside { position: sticky; top: 104px; display: grid; gap: var(--s6); }
@media (max-width: 900px) { .productpage__aside { position: static; } }

.speccard { border: 1px solid var(--rule); border-top: 3px solid var(--teal); background: var(--mint-tint); padding: var(--s6); }
.speccard__badges { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s4); }
.speccard__note { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: var(--s5); }
.speccard__contact { font-size: var(--step--1); color: var(--ink-soft); margin-top: var(--s4); }
.speccard .btn { width: 100%; justify-content: center; }
.speccard .btn + .btn { margin-top: var(--s3); }

/* Per-product information rows on the absorbents page. */
.oilitem {
  display: grid; grid-template-columns: minmax(140px, 220px) 1fr;
  gap: var(--s5); align-items: start;
  padding-block: var(--s6); border-top: 1px solid var(--rule);
}
.oilitem:last-of-type { border-bottom: 1px solid var(--rule); }
.oilitem__media { margin: 0; }
.oilitem__media img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.oilitem h3 { margin-bottom: var(--s2); }
.oilitem h3 a { color: inherit; text-decoration: none; }
.oilitem h3 a:hover { text-decoration: underline; }
.oilitem__media a { display: block; }
.oilitem__media a:hover img { border-color: var(--teal); }
.oilitem .product__spec { margin-top: var(--s3); }
.oilitem__links { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s3); }
@media (max-width: 560px) { .oilitem { grid-template-columns: 1fr; } }

/* Closing strapline under a CTA band. */
.strapline { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.9); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.02em; }

/* Three-across variant: what happens after a distributor applies. */
.steps--row { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--s6); align-items: start; }
.steps strong { display: block; color: var(--navy); margin-bottom: var(--s2); }
.formnote { font-size: var(--step--1); color: var(--ink-soft); margin-top: var(--s4); max-width: 54ch; }

/* Numbered how-to-use steps on the individual product pages. */
.steps { list-style: none; counter-reset: step; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s4); }
.steps li { counter-increment: step; position: relative; padding-left: calc(var(--s6) + 12px); }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px; display: grid; place-items: center;
  font-size: var(--step--1); font-weight: 700; color: #fff;
  background: linear-gradient(140deg, var(--navy), var(--teal));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* Storefront callout — currently unused; kept for a possible retail channel. */
.amazoncard {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5);
  border: 1px solid var(--rule); border-left: 3px solid var(--teal);
  background: var(--mint-tint); padding: var(--s6);
  margin-block: var(--s6);
}
.amazoncard > div { flex: 1 1 320px; }
.amazoncard__eyebrow {
  font-size: var(--step--1); font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--teal); margin-bottom: var(--s2);
}
.amazoncard h3 { margin-bottom: var(--s2); }
.amazoncard p:last-child { margin-bottom: 0; font-size: var(--step--1); color: var(--ink-soft); }
.amazoncard .btn { flex: none; }

/* Marked placeholder — real photography replaces this before launch. */
.placeholder { margin: 0; }
.placeholder__box {
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--rule-strong);
  background:
    repeating-linear-gradient(135deg, var(--teal-tint) 0 10px, var(--white) 10px 20px);
}
.placeholder figcaption { font-size: var(--step--2); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-top: var(--s3); }

/* ---------------------------------------------------------------- 12. Form */

.form { display: grid; gap: var(--s5); max-width: 640px; }
.field { display: grid; gap: var(--s2); }
.field label { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--step-0); color: var(--ink);
  padding: 0.8rem 0.9rem; border: 1px solid var(--rule-strong); border-radius: 0; background: var(--white);
  width: 100%;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--teal); }
.field textarea { min-height: 150px; resize: vertical; }
.field__hint { font-size: var(--step--1); color: var(--ink-soft); letter-spacing: 0; text-transform: none; font-weight: 400; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }

.contactgrid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.9fr); gap: var(--s8); align-items: start; }
@media (max-width: 900px) { .contactgrid { grid-template-columns: 1fr; } }
.contactaside { display: grid; gap: var(--s6); }
.contactgrid h2 { margin-bottom: var(--s4); }
.contactgrid form { margin-top: var(--s6); }

.placeholder__box--map {
  display: grid; place-items: center; text-decoration: none;
  color: var(--teal); font-size: var(--step--2); font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  aspect-ratio: 4 / 3;
}
.placeholder__box--map:hover { background: var(--mint-tint); border-color: var(--teal); }

.contact-detail { display: grid; gap: var(--s5); }
.contact-detail__item { display: flex; gap: var(--s4); align-items: flex-start; }
.contact-detail__item strong { display: block; font-size: var(--step--2); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2px; }
.contact-detail__item a, .contact-detail__item p { font-size: var(--step-0); color: var(--ink); text-decoration: none; margin: 0; }
.contact-detail__item a:hover { color: var(--teal); text-decoration: underline; }

/* ----------------------------------------------------------- 13. Page head */

.pagehead { position: relative; background: var(--navy); color: var(--white); overflow: hidden; }
.pagehead__media {
  position: absolute; inset: 0;
  background-image: var(--fibre-web), var(--brand-gradient);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
}
.pagehead__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(14,71,117,0.96) 0%, rgba(14,71,117,0.88) 60%, rgba(14,71,117,0.42) 100%); }
.pagehead__inner { position: relative; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.pagehead h1 { color: var(--white); font-size: var(--step-3); }
.pagehead .lede { color: rgba(255,255,255,0.9); margin-top: var(--s4); }
.pagehead .eyebrow { color: var(--mint); margin-bottom: var(--s3); }
.pagehead .eyebrow::before { background: var(--mint); }

.crumbs { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s4); font-size: var(--step--2); font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; }
.crumbs a { color: rgba(255,255,255,0.8); text-decoration: none; }
.crumbs a:hover { color: var(--white); text-decoration: underline; }
.crumbs span { color: rgba(255,255,255,0.5); }
.crumbs [aria-current] { color: var(--white); }

/* ------------------------------------------------------------- 14. Footer */

.footer { background: var(--navy); color: rgba(255,255,255,0.82); font-size: var(--step--1); }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s7) var(--s6); padding-block: var(--s8); }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

.footer h4, .footer__head { color: var(--white); font-size: var(--step--2); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--s4); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.footer a { color: rgba(255,255,255,0.82); text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; }
.footer__logo { background: var(--white); padding: var(--s3) var(--s4); display: inline-block; margin-bottom: var(--s5); }
.footer__logo img { width: 168px; }
.footer address { font-style: normal; line-height: 1.8; }

/* Partner logos — white plates so third-party marks keep their own colours. */
.footer__partners { padding-bottom: var(--s7); border-top: 1px solid rgba(255,255,255,0.14); padding-top: var(--s6); }
.footer ul.partners { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); }
.partner {
  display: grid; place-items: center;
  background: var(--white); padding: var(--s3) var(--s5);
  min-width: 168px; min-height: 62px;
}
.partner img { display: block; height: 34px; width: auto; }
@media (max-width: 520px) { .partners { gap: var(--s4); } .partner { min-width: 140px; } }

.footer__legal {
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-block: var(--s5);
  display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; justify-content: space-between;
  font-size: var(--step--2); letter-spacing: 0.06em;
}

/* Gradient wedge closing the page — the brand's footer band pattern. */
.footer__wedge { height: 8px; background: var(--brand-gradient); }

/* ------------------------------------------------- 17. Angled dividers
   Rensa-pattern slanted section edges. The slant is cut from the section
   itself, so the band above shows through the wedge. Applied only to
   full-bleed colour bands; white sections keep straight edges.            */

.section--slant {
  --slant: clamp(1.2rem, 2.6vw, 2.6rem);
  clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
  padding-top: calc(clamp(3.5rem, 8vw, 7rem) + var(--slant));
}
.section--slant-down {
  --slant: clamp(1.2rem, 2.6vw, 2.6rem);
  clip-path: polygon(0 0, 100% var(--slant), 100% 100%, 0 100%);
  padding-top: calc(clamp(3.5rem, 8vw, 7rem) + var(--slant));
}

/* ------------------------------------------------------ 18. Stats band
   Amcor's count-up tiles in Precambrian form: the tile is the hexagon.
   Values are technical claims only — sourced from spec sheets, never
   marketing counts. data-count marks integers the observer animates.      */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s6); text-align: center; }
.stats__item { display: grid; justify-items: center; gap: var(--s3); }
.stats__value { font-size: var(--step-3); font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--navy); }
.stats__value sub, .stats__value sup { font-size: 0.5em; }
.stats__label { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-soft); max-width: 22ch; }
.section--navy .stats__value, .section--teal .stats__value { color: var(--white); }
.section--navy .stats__label, .section--teal .stats__label { color: rgba(255,255,255,0.78); }

/* --------------------------------------------------------- 19. Photography
   Real photographs share one treatment so mixed sources read as one set:
   flat edge, brand hairline, caption in the label voice.                  */

.photo { margin: 0; }
.photo img { width: 100%; border: 1px solid var(--rule); }
.photo figcaption { font-size: var(--step--2); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-top: var(--s3); }

/* Alternating media rows — Rensa/Amcor two-column pattern. */
.mediarow { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s7) var(--s8); align-items: center; }
.mediarow + .mediarow { margin-top: var(--s9); }
.mediarow--flip .mediarow__media { order: 2; }
/* Give the photo the larger share of the row. */
@media (min-width: 701px) { .mediarow--wide-media { grid-template-columns: 1fr 1.35fr; } }
@media (max-width: 700px) { .mediarow--flip .mediarow__media { order: 0; } }
.mediarow h2 { margin-bottom: var(--s4); }
.mediarow .lede { margin-bottom: var(--s4); }

/* -------------------------------------------------------- 20. News cards */

.newscard {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--navy);
  padding: var(--s6);
  transition: border-color .18s ease, transform .18s ease;
}
.newscard:hover { border-color: var(--rule-strong); transform: translateY(-2px); }
.newscard__cat { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); margin-bottom: var(--s3); }
.newscard h2, .newscard h3 { font-size: var(--step-1); letter-spacing: -0.01em; margin-bottom: var(--s3); }
.newscard h2 a, .newscard h3 a { color: inherit; text-decoration: none; }
.newscard h2 a:hover, .newscard h3 a:hover { text-decoration: underline; }
.newscard p { font-size: var(--step--1); color: var(--ink-soft); }
.newscard time { display: block; font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-top: auto; padding-top: var(--s4); }

/* Article body — news post prose. */
.article { max-width: var(--measure); }
.article time { display: block; font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--s6); }
.article h2 { font-size: var(--step-2); margin: var(--s7) 0 var(--s4); }
.article .photo { margin-block: var(--s6); }
/* Attributed quotes in an article — press releases, customer statements. */
.article blockquote { margin: var(--s6) 0; padding: var(--s2) 0 var(--s2) var(--s5); border-left: 3px solid var(--teal); }
.article blockquote p { font-size: var(--step-1); line-height: 1.5; color: var(--navy); }
.article blockquote p:last-child { margin-bottom: 0; }
.article blockquote cite {
  display: block; font-style: normal; font-size: var(--step--2); font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-top: var(--s3);
}

/* -------------------------------------------------------- 21. Values grid */

.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s6) var(--s8); }
.value { display: flex; gap: var(--s4); align-items: flex-start; }
.value h3 { font-size: var(--step-0); margin-bottom: var(--s2); }
.value p { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }
.section--navy .value h3 { color: var(--white); }
.section--navy .value p { color: rgba(255,255,255,0.78); }

/* Industry tiles open with a hexicon above the eyebrow. */
.product > .hexicon { margin-bottom: var(--s4); }

/* Footer social row */
.footer__social { margin-top: var(--s4); display: grid; gap: var(--s3); justify-items: start; }
.footer__social a { display: inline-flex; align-items: center; gap: var(--s3); font-weight: 700; }
.footer__social svg { width: 18px; height: 18px; flex: none; }

/* Hero video: sits under the scrim, over the generated web. Hidden under
   reduced motion (the SVG background takes over) and on small screens
   where the bandwidth is not worth it. */
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce), (max-width: 640px) {
  .hero__video { display: none; }
}

/* Header LinkedIn shortcut — icon button at the far right of the nav. */
.nav__linkedin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none; box-sizing: border-box;
  padding: 0 !important;
  border: 2px solid var(--rule-strong); color: var(--teal);
}
.nav a.nav__linkedin { padding-block: 0; border-bottom: 2px solid var(--rule-strong); }
.nav a.nav__linkedin:hover { border-color: var(--teal); }
.nav__linkedin:hover { border-color: var(--teal); background: var(--teal-tint); }
.nav__linkedin svg { width: 18px; height: 18px; }
@media (max-width: 940px) { .nav__linkedin { width: 100%; height: auto; padding: var(--s3); justify-content: flex-start; gap: var(--s3); border: 0; border-bottom: 1px solid var(--rule); } }

/* LinkedIn live feed on the news page. The iframe is a third-party widget
   (e.g. SociableKIT LinkedIn Page Posts) — swap data-src for the real embed
   URL once the widget exists. Until then the fallback card shows. */
.lifeed { border: 1px solid var(--rule); border-top: 3px solid var(--navy); background: var(--white); }
.lifeed iframe { display: block; width: 100%; height: 640px; border: 0; }
.lifeed__fallback { padding: var(--s7); display: grid; gap: var(--s4); justify-items: start; }
.lifeed__fallback p { color: var(--ink-soft); }
.lifeed--ig { border-top-color: var(--teal); }
.igname { display: inline-flex; align-items: center; gap: var(--s3); font-weight: 800; color: var(--navy) !important; letter-spacing: 0.02em; }
.igname svg { width: 22px; height: 22px; flex: none; }

/* ---------------------------------------------- 23. 3D layer breakdowns
   Exploded isometric view of each media construction, in CSS 3D — no
   libraries. Layers sit at translateZ steps; hovering the card widens the
   steps. The diagram is decorative (aria-hidden); the adjacent legend list
   carries the same information as text.                                   */

.x3dgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s6); }

.x3dcard {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule); border-top: 3px solid var(--teal);
  background: var(--white); padding: var(--s6);
}
.x3dcard h3 { font-size: var(--step-1); letter-spacing: -0.01em; margin-bottom: var(--s2); }
.x3dcard h3 a { color: inherit; text-decoration: none; }
.x3dcard h3 a:hover { text-decoration: underline; }
.x3dcard__note { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: var(--s4); }

.x3d { height: 230px; display: grid; place-items: center; perspective: 900px; margin-block: var(--s3) var(--s5); }
.x3d__stack {
  position: relative; width: 158px; height: 158px;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-38deg);
}
.x3d__layer {
  position: absolute; inset: 0;
  border: 1px solid rgba(14, 71, 117, 0.4);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.4) inset;
  transform: translateZ(calc(var(--i) * 18px));
  transition: transform 0.45s ease;
  transform-style: preserve-3d;
}
.x3dcard:hover .x3d__layer, .x3dcard:focus-within .x3d__layer { transform: translateZ(calc(var(--i) * 38px)); }
@media (prefers-reduced-motion: reduce) {
  .x3dcard:hover .x3d__layer, .x3dcard:focus-within .x3d__layer { transform: translateZ(calc(var(--i) * 18px)); }
}

/* Layer skins — density-coded like the hex badges. */
.x3d__layer--fine {
  background:
    repeating-linear-gradient( 64deg, rgba(255,255,255,0.6) 0 0.7px, transparent 0.7px 4px),
    repeating-linear-gradient(-56deg, rgba(255,255,255,0.6) 0 0.7px, transparent 0.7px 4px),
    var(--teal);
}
.x3d__layer--mid {
  background:
    repeating-linear-gradient( 64deg, rgba(255,255,255,0.55) 0 0.7px, transparent 0.7px 7px),
    repeating-linear-gradient(-56deg, rgba(255,255,255,0.55) 0 0.7px, transparent 0.7px 7px),
    #2E7D84;
}
.x3d__layer--coarse {
  background:
    repeating-linear-gradient( 64deg, rgba(20,93,98,0.5) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(-56deg, rgba(20,93,98,0.5) 0 1px, transparent 1px 12px),
    var(--mint);
}
.x3d__layer--backer {
  background:
    repeating-linear-gradient(  0deg, rgba(14,71,117,0.35) 0 1px, transparent 1px 10px),
    repeating-linear-gradient( 90deg, rgba(14,71,117,0.35) 0 1px, transparent 1px 10px),
    var(--navy-tint);
}
.x3d__layer--loft {
  background:
    repeating-linear-gradient( 8deg, rgba(20,93,98,0.35) 0 2px, transparent 2px 14px),
    var(--mint-tint);
}
.x3d__layer--welds {
  background:
    radial-gradient(circle 4px at 20px 20px, rgba(14,71,117,0.55) 0 4px, transparent 5px);
  background-size: 40px 40px;
  border-style: dashed;
}
/* Fluffy loft: soft cloud bumps, rounded edge — reads as lofted fibre. */
.x3d__layer--fluff {
  background:
    radial-gradient(circle 9px at 10px 12px, rgba(255,255,255,0.95) 0 5px, transparent 7px),
    radial-gradient(circle 7px at 26px 26px, rgba(255,255,255,0.8) 0 4px, transparent 6px),
    radial-gradient(circle 8px at 40px 10px, rgba(255,255,255,0.85) 0 5px, transparent 7px),
    radial-gradient(circle 6px at 18px 38px, rgba(255,255,255,0.75) 0 4px, transparent 5px),
    radial-gradient(circle 8px at 44px 34px, rgba(255,255,255,0.85) 0 4px, transparent 6px),
    #BEE0D4;
  background-size: 52px 48px;
  border-radius: 12px;
  border-color: rgba(20, 93, 98, 0.35);
}

/* Sock and boom: outer sleeve wall + loose sorbent filling inside. */
.x3d__layer--sleeve {
  background:
    repeating-linear-gradient( 90deg, rgba(20,93,98,0.18) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(  0deg, rgba(20,93,98,0.18) 0 1px, transparent 1px 6px),
    rgba(242, 247, 245, 0.74);
  border-radius: 999px;
  border-color: rgba(20, 93, 98, 0.4);
}
.x3d__layer--fill {
  background:
    radial-gradient(circle 7px at 12px 14px, rgba(255,255,255,0.9) 0 4px, transparent 6px),
    radial-gradient(circle 6px at 30px 28px, rgba(255,255,255,0.75) 0 3px, transparent 5px),
    radial-gradient(circle 7px at 44px 12px, rgba(255,255,255,0.85) 0 4px, transparent 6px),
    radial-gradient(circle 5px at 22px 40px, rgba(255,255,255,0.7) 0 3px, transparent 5px),
    #2E7D84;
  background-size: 54px 50px;
  border-radius: 999px;
  border-color: rgba(20, 93, 98, 0.45);
}
/* Tube geometry — sock and boom read as a long capsule, not a plate. */
.xbuild .x3d--tube .x3d__stack { width: 340px; height: 122px; transform: rotateX(62deg) rotateZ(-14deg); }
@media (max-width: 640px) { .xbuild .x3d--tube .x3d__stack { width: 236px; height: 88px; } }
.xbuild.is-iso .x3d--tube .x3d__stack { transform: rotateX(52deg) rotateZ(-14deg) scale(1.25); }

/* Master roll: the web sits over a cylindrical core. */
.x3d--roll .x3d__layer--core { inset: 29% -12%; }
.x3d--roll .x3d__layer--mid { inset: 4% 0; }

/* Master roll: the sorbent web wound on a core. */
.x3d__layer--core {
  background:
    repeating-linear-gradient(90deg, rgba(14,71,117,0.25) 0 2px, transparent 2px 9px),
    var(--navy-tint);
  border-radius: 999px;
}
/* Kit stack: each item sized and placed like an object in the bag, not a
   full-width sheet. Insets are used so the Z-transforms stay free. */
.x3d--kit .x3d__layer--mid     { inset: 10% 8%; }
.x3d--kit .x3d__layer--sleeve  { inset: 34% 12% 30% 12%; }
.x3d--kit .x3d__layer--gloves  { inset: 22% 52% 50% 10%; }
.x3d--kit .x3d__layer--goggles { inset: 60% 8% 16% 58%; }
.x3d--kit .x3d__layer--waste   { inset: 58% 44% 18% 12%; }

/* Spill-kit contents — one "layer" per item in the bag. */
.x3d__layer--bag {
  background:
    linear-gradient(160deg, rgba(255,255,255,0.45), rgba(0,0,0,0.08)),
    #E9B824;
  border-radius: 16px; border-color: rgba(90, 66, 0, 0.45);
}
.x3d__layer--gloves {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 0 2px, transparent 2px 8px),
    #1F6FB2;
  border-radius: 10px;
}
.x3d__layer--goggles {
  background:
    radial-gradient(ellipse 22px 12px at 30% 50%, rgba(255,255,255,0.85) 0 60%, transparent 62%),
    radial-gradient(ellipse 22px 12px at 70% 50%, rgba(255,255,255,0.85) 0 60%, transparent 62%),
    #6E7B85;
  border-radius: 10px;
}
.x3d__layer--waste {
  background:
    repeating-linear-gradient(-40deg, rgba(255,255,255,0.25) 0 3px, transparent 3px 11px),
    #2B3138;
  border-radius: 6px;
}

/* Second construction under the first (thermal, then acoustic). */
.xbuild__label {
  text-align: center; font-size: var(--step-1); letter-spacing: -0.01em;
  margin: var(--s8) 0 0;
}
.xbuild + .xbuild { margin-top: var(--s5); }

/* Interactive layer build: the diagram assembles layer by layer on reveal,
   then each layer (and each legend row) is hover/click/focus interactive. */
.xbuild { display: grid; grid-template-columns: minmax(280px, 1.1fr) 1fr; gap: var(--s7); align-items: center; }
@media (max-width: 800px) { .xbuild { grid-template-columns: 1fr; } }
.xbuild .x3d { height: 440px; margin: 0; }
.xbuild .x3d__stack { width: 300px; height: 300px; }
@media (max-width: 640px) {
  .xbuild .x3d { height: 300px; }
  .xbuild .x3d__stack { width: 205px; height: 205px; }
}
.xbuild .x3d__layer {
  transform: translateZ(calc(var(--i) * 34px));
  cursor: pointer;
}
html.js .reveal .xbuild .x3d__layer { opacity: 0; }
html.js .reveal.is-in .xbuild .x3d__layer { opacity: 1; }
/* The assembly animation runs once; after that (.is-built) layers move by
   transition, so leaving isolation glides back instead of re-assembling. */
html.js .reveal.is-in .xbuild:not(.is-built) .x3d__layer {
  animation: layer-assemble 0.8s ease calc(var(--i) * 0.6s + 0.25s) backwards;
}
html.js .reveal.is-in .xbuild.is-built .x3d__layer {
  transition: transform 0.45s ease, opacity 0.35s ease, box-shadow 0.3s ease;
}
@keyframes layer-assemble {
  from { opacity: 0; transform: translateZ(calc(var(--i) * 34px + 150px)); }
  to   { opacity: 1; transform: translateZ(calc(var(--i) * 34px)); }
}
.xbuild .x3d__layer.is-hot {
  box-shadow: 0 0 0 2px var(--rust) inset, 0 0 26px rgba(175, 51, 0, 0.35);
  transform: translateZ(calc(var(--i) * 34px + 24px));
}
.xbuild .x3d-legend > li {
  padding: var(--s3); border-left: 3px solid var(--rule);
  cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease;
}
.xbuild .x3d-legend > li.is-hot { border-left-color: var(--rust); background: var(--mint-tint); }

/* Isolation mode: click a layer to pull it out on its own, close up, with
   buyer-facing notes beside it. Back button restores the stack. */
.layerdetail { list-style: disc; margin: var(--s3) 0 0 1.2em; padding: 0; display: none; color: var(--ink-soft); }
.layerdetail li { padding: 3px 0; }
.xbuild__back {
  display: none; align-items: center; gap: 6px;
  font: inherit; font-weight: 700; font-size: var(--step--1); color: var(--teal);
  background: none; border: 1px solid var(--rule-strong); padding: 0.5rem 0.9rem;
  cursor: pointer; margin-bottom: var(--s4);
}
.xbuild__back:hover { border-color: var(--teal); background: var(--teal-tint); }
.xbuild.is-iso .xbuild__back { display: inline-flex; }
.xbuild.is-iso .x3d-legend > li { display: none; }
.xbuild.is-iso .x3d-legend > li.is-picked {
  display: block; border-left-color: var(--rust); background: var(--mint-tint);
}
.xbuild.is-iso .x3d-legend > li.is-picked .layerdetail { display: block; }
/* Close-up: flatten the view slightly and scale up; hide the other layers. */
.xbuild .x3d__stack { transition: transform 0.5s ease; }
.xbuild.is-iso .x3d__stack { transform: rotateX(46deg) rotateZ(-26deg) scale(1.35); }
html.js .reveal.is-in .xbuild.is-iso .x3d__layer { animation: none; transition: transform 0.45s ease, opacity 0.35s ease; }
html.js .reveal.is-in .xbuild.is-iso .x3d__layer:not(.is-picked) { opacity: 0; pointer-events: none; }
html.js .reveal.is-in .xbuild.is-iso .x3d__layer.is-picked {
  transform: translateZ(30px);
  box-shadow: 0 0 0 2px var(--rust) inset, 0 40px 70px rgba(0, 0, 0, 0.25);
}
@media (prefers-reduced-motion: reduce) {
  .xbuild .x3d__stack, html.js .reveal.is-in .xbuild.is-iso .x3d__layer { transition: none; }
  .xbuild.is-iso .x3d__stack { transform: rotateX(58deg) rotateZ(-38deg); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal.is-in .xbuild .x3d__layer { animation: none; }
  .xbuild .x3d__layer.is-hot { transform: translateZ(calc(var(--i) * 34px)); }
}

/* Legend: chip matches the layer skin. */
.x3d-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); font-size: var(--step--1); }
.x3d-legend li { display: flex; gap: var(--s3); align-items: baseline; }
.x3d-legend .chip {
  flex: none; width: 22px; height: 14px; align-self: center;
  border: 1px solid rgba(14,71,117,0.4);
}
.x3d-legend strong { color: var(--navy); }
.x3d-legend span { color: var(--ink-soft); }

/* ------------------------------------------------- 24. Product stage
   Photo + CGI showcase (vibex-style): dark stage, giant display numeral,
   product photos floating as tilted specimen cards, captions cycling.
   All motion is CSS keyframes — killed globally under reduced motion.    */

.stage {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(60, 184, 145, 0.16), transparent 70%),
    #0C2A44;
  color: var(--white);
  padding-block: clamp(4rem, 10vw, 8rem);
}
/* Angled top edge against a white section above. */
.stage--slant-top {
  --slant: clamp(1.2rem, 2.6vw, 2.6rem);
  clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
  padding-top: calc(clamp(4rem, 10vw, 8rem) + var(--slant));
}
/* Family-to-family seams: the next stage overlaps the previous on a
   diagonal, with a mint hairline tracing the edge. Directions alternate. */
.stage--seam-up, .stage--seam-down {
  --slant: clamp(1.6rem, 3vw, 3rem);
  margin-top: calc(var(--slant) * -1);
  padding-top: calc(clamp(4rem, 10vw, 8rem) + var(--slant));
  filter: drop-shadow(0 -2px 0 rgba(191, 230, 218, 0.45));
}
.stage--seam-up   { clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%); }
.stage--seam-down { clip-path: polygon(0 0, 100% var(--slant), 100% 100%, 0 100%); }

/* Cross-page transition: same-origin navigations crossfade instead of
   snapping (View Transitions API; browsers without it just navigate). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root) { animation-duration: 0.22s; }
::view-transition-new(root) { animation-duration: 0.32s; }
.stage__word {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: clamp(7rem, 26vw, 24rem); font-weight: 800; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(191, 230, 218, 0.22);
  user-select: none; pointer-events: none;
}
.stage__inner { position: relative; display: grid; justify-items: center; gap: var(--s6); }
.stage__eyebrow { color: rgba(191, 230, 218, 0.9); }
.stage__eyebrow::before { background: var(--mint); }

/* Family stages: a ghosted product photo sits under the navy wash, so each
   family keeps the stage colour but carries its own material texture. */
.stage--photo { background-size: cover, cover, cover; background-position: center; }
.stage--meltblown {
  background:
    linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.8)),
    url("img/line-hardware.jpg") center/cover;
}
.stage--hvac {
  background:
    linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.8)),
    url("img/product-hvac-media.jpg") center/cover;
}
.stage--absorbents {
  background:
    linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.8)),
    url("img/greenstrength-pad-workshop.jpg") center/cover;
}
.stage--loft {
  background:
    linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.8)),
    url("img/highloft-crosssection.png") center/cover;
}

/* Light stage: white ground, dark type, brand accents. */
.stage--light { color: var(--ink); }
.stage--light .stage__head h2 { color: var(--navy); }
.stage--light .stage__intro { color: var(--ink-soft); }
.stage--light .stage__eyebrow { color: var(--teal); }
.stage--light .stage__eyebrow::before { background: var(--teal); }
.stage--light .stage__word { -webkit-text-stroke-color: rgba(14, 71, 117, 0.1); }
.stage--light .stage__claims span { color: var(--teal); }
.stage--light .stage__card { border-color: var(--rule-strong); box-shadow: 0 22px 44px rgba(14, 71, 117, 0.2); }
.stage--light .stage__cardlink:hover, .stage--light .stage__cardlink:focus-visible { filter: brightness(1.03) drop-shadow(0 0 16px rgba(20, 93, 98, 0.3)); }

/* Per-family header + description inside the stage. */
.stage__head { text-align: center; max-width: 62ch; }
.stage__head h2 { color: var(--white); margin-bottom: var(--s3); }
.stage__intro { color: rgba(255, 255, 255, 0.78); max-width: 56ch; margin-inline: auto; }
.stage__link { margin-top: var(--s2); }
.stage__link a { color: var(--mint); font-weight: 700; }

.stage__deck {
  display: flex; justify-content: center; align-items: center;
  gap: clamp(var(--s4), 4vw, var(--s8));
  perspective: 1100px; min-height: 300px; flex-wrap: wrap;
  align-items: flex-start;
}
/* Each card is a link to its spec sheet: JS opens the lightbox below,
   no-JS falls through to the sheet in a new tab. */
.stage__cardlink {
  display: flex; flex: none; text-decoration: none;
  width: clamp(150px, 22vw, 230px);
  transition: filter 0.25s ease;
}
.stage__cardlink:hover, .stage__cardlink:focus-visible { filter: brightness(1.12) drop-shadow(0 0 18px rgba(191, 230, 218, 0.35)); }
.stage__cardlink--b { z-index: 2; }

.stage__card {
  margin: 0; width: 100%;
  display: flex; flex-direction: column;
  border: 1px solid rgba(191, 230, 218, 0.35);
  background: var(--white);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
/* Every card shows the same window on its image, whatever the source
   aspect ratio, so the deck reads as one set. */
.stage__card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.stage__card figcaption {
  flex: 1; min-height: 3.4em; padding: var(--s3) var(--s4);
  font-size: var(--step--2); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--navy); background: var(--white); border-top: 1px solid var(--rule);
}
.stage__card figcaption small {
  display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--teal); margin-top: 2px;
}

/* Spec sheet lightbox */
.sheetdlg { border: 0; padding: 0; background: transparent; max-width: min(92vw, 540px); width: 100%; }
.sheetdlg::backdrop { background: rgba(8, 31, 51, 0.82); }
.sheetdlg__box { background: var(--white); border-top: 3px solid var(--teal); }
.sheetdlg__box img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; }
.sheetdlg__bar { display: flex; align-items: center; gap: var(--s4); padding: var(--s4); border-top: 1px solid var(--rule); }
.sheetdlg__title { font-weight: 700; font-size: var(--step--1); color: var(--navy); margin-right: auto; }
.sheetdlg__close { font: inherit; font-weight: 700; background: none; border: 1px solid var(--rule-strong); padding: 0.45rem 0.8rem; cursor: pointer; color: var(--teal); }
.sheetdlg__close:hover { border-color: var(--teal); background: var(--teal-tint); }

/* "All six products" link under a stage deck. */
.stage__more { margin-top: var(--s5); text-align: center; }
.stage--light .stage__more .link-arrow { color: var(--teal); }

/* Cycling feature captions — one visible at a time, CSS only. */
.stage__claims { position: relative; height: 2.2em; width: 100%; max-width: 34ch; text-align: center; }
.stage__claims span {
  position: absolute; inset: 0;
  font-size: var(--step-1); font-weight: 700; letter-spacing: -0.01em;
  color: var(--mint); opacity: 0;
  animation: stage-claim 12s infinite;
}
.stage__claims span:nth-child(2) { animation-delay: 4s; }
.stage__claims span:nth-child(3) { animation-delay: 8s; }
@keyframes stage-claim {
  0% { opacity: 0; transform: translateY(8px); }
  6%, 27% { opacity: 1; transform: none; }
  33%, 100% { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .stage__card { animation: none; }
  /* Show only the lead claim, statically. */
  .stage__claims span { animation: none; }
  .stage__claims span:first-child { opacity: 1; }
}

/* ------------------------------------------------- 25. 360 spin viewer
   Currently unused.                                                      */
.spin { margin: 0; border: 1px solid var(--rule); border-top: 3px solid var(--teal); background: #081F33; }
.spin__stage { position: relative; cursor: grab; touch-action: pan-y; user-select: none; }
.spin__stage:active { cursor: grabbing; }
.spin__stage img { display: block; width: 100%; height: auto; pointer-events: none; }
/* Second layer for the crossfade rotation — sits over the base frame and
   fades between adjacent angles so the turn reads as continuous motion. */
.spin__stage .spin__blend { position: absolute; inset: 0; height: 100%; opacity: 0; }
.spin__hint {
  position: absolute; right: var(--s3); bottom: var(--s3);
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 0.25rem 0.6rem; font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mint); background: rgba(8, 31, 51, 0.72); border: 1px solid rgba(191, 230, 218, 0.4);
}
.spin__hint svg { width: 14px; height: 14px; }
.spin figcaption { padding: var(--s3) var(--s4); font-size: var(--step--2); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); background: var(--white); border-top: 1px solid var(--rule); }

/* Spec sheet preview cards — thumbnail of the sheet + view/download actions. */
.sheetgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s6); margin-top: var(--s5); }
.sheet { display: flex; flex-direction: column; border: 1px solid var(--rule); border-top: 3px solid var(--teal); background: var(--white); }
.sheet__thumb { display: block; border-bottom: 1px solid var(--rule); }
.sheet__thumb img { width: 100%; height: auto; display: block; }
.sheet__thumb:hover { opacity: 0.92; }
.sheet__body { padding: var(--s4); display: grid; gap: var(--s3); align-content: start; flex: 1; }
.sheet__title { font-weight: 700; font-size: var(--step--1); color: var(--navy); line-height: 1.3; }
.sheet__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: auto; }

/* Spec sheet download row on product tiles and pages */
.speclink {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--step--1); font-weight: 700;
  color: var(--teal); text-decoration: none;
  border: 1px solid var(--rule-strong); padding: 0.45rem 0.8rem;
}
.speclink:hover { border-color: var(--teal); background: var(--teal-tint); }
/* Primary variant — "full product details" beside the secondary sheet links. */
.speclink--go { color: #fff; background: var(--teal); border-color: var(--teal); }
.speclink--go:hover { background: var(--navy); border-color: var(--navy); }
.speclink svg { width: 14px; height: 14px; flex: none; }
.speclink-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }

/* ------------------------------------------------------ 22. Scroll reveal
   Sections drift in as they enter the viewport (all three reference sites
   do this). Gated on html.js so content is never hidden without script,
   and killed entirely under prefers-reduced-motion.                       */

html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
html.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------ 16. Motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .product:hover { transform: none; }
}


/* ------------------------------------------------ 30. Reviews
   Amazon rating strip (in use, product pages) plus a parked review slider.
   The .revslider rules and assets/reviews.js are NOT referenced by any page
   right now — they are kept ready for the day the Google Business Profile
   has reviews to show. Delete both if that never happens.                  */
.revslider { position: relative; }
.revslider__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr);
  gap: var(--s5); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--s4); scrollbar-width: thin;
}
@media (min-width: 900px) { .revslider__track { grid-auto-columns: minmax(0, calc(33.333% - var(--s5))); } }
.revslider__track::-webkit-scrollbar { height: 6px; }
.revslider__track::-webkit-scrollbar-thumb { background: var(--rule-strong); }
.review {
  scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--s3);
  border: 1px solid var(--rule); border-top: 3px solid var(--teal);
  background: var(--white); padding: var(--s5); min-height: 100%;
}
.review__stars { display: inline-flex; gap: 2px; color: var(--rust); }
.review__stars svg { width: 16px; height: 16px; }
.review p { color: var(--ink); margin: 0; }
.review__who { margin-top: auto; font-size: var(--step--1); color: var(--ink-soft); }
.review__who b { color: var(--navy); display: block; font-size: var(--step-0); }
.review__src { font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }

.revslider__bar { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s4); }
.revslider__dots { display: flex; gap: var(--s2); flex: 1; }
.revslider__dot {
  width: 9px; height: 9px; padding: 0; border: 0; cursor: pointer;
  background: var(--rule-strong);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.revslider__dot[aria-current="true"] { background: var(--teal); }
.revslider__nav {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--rule-strong); background: var(--white); color: var(--teal); cursor: pointer;
}
.revslider__nav:hover { border-color: var(--teal); background: var(--teal-tint); }
.revslider__nav svg { width: 16px; height: 16px; }
.section--navy .review, .section--navy .revslider__nav { color: var(--ink); }
.section--navy .revslider__dot { background: rgba(255,255,255,0.35); }
.section--navy .revslider__dot[aria-current="true"] { background: var(--mint); }

/* Rating strip — currently unused; kept for a possible retail channel. */
.ratingstrip { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: var(--s5); }
.ratingcard { border: 1px solid var(--rule); border-left: 3px solid var(--rust); padding: var(--s5); background: var(--white); }
.ratingcard__score { display: flex; align-items: baseline; gap: var(--s3); }
.ratingcard__num { font-size: var(--step-3); font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }
.ratingcard__stars { display: inline-flex; gap: 2px; color: var(--rust); }
.ratingcard__stars svg { width: 18px; height: 18px; }
.ratingcard h3 { font-size: var(--step-0); margin: var(--s3) 0 var(--s2); }
.ratingcard p { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: var(--s3); }
.ratingcard__asof { font-size: var(--step--2); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }

/* =====================================================================
   FORMAT LAYER — added 2026-08-04
   White-dominant surfaces, large photography, flat section joins, calm
   geometry. This block overrides the
   signature elements rather than deleting them, so the original design
   system underneath is intact and this can be lifted out in one piece.
   What it changes: hexagons -> square tiles, tinted/slanted bands -> flat
   neutral, bordered thumbnails -> full-bleed photography, and it adds the
   .feature alternating image/text pattern and .buildlist (what the 3D
   exploded diagrams became).
   ===================================================================== */

/* --- surfaces: white dominant, one neutral alternate --------------- */
.section--mint { background: #F5F8F9; }
.section--slant, .section--slant-down { clip-path: none; margin-block: 0; padding-block: clamp(3.5rem, 8vw, 7rem); }

/* --- geometry: square tiles instead of hexagons -------------------- */
.hex {
  aspect-ratio: 1 / 1;
  clip-path: none;
  background: linear-gradient(160deg, var(--hex-deep) 0%, var(--teal) 100%);
  padding: var(--s4);
}
.hex__unit, .hex__value, .hex__sub { text-shadow: none; }
.hexicon {
  width: 44px; height: 44px; aspect-ratio: 1 / 1;
  clip-path: none;
  background: var(--teal-tint); color: var(--teal);
}
.section--teal .hexicon, .section--navy .hexicon { background: rgba(255,255,255,0.14); color: var(--white); }
.hex-list li::before {
  clip-path: none;
  width: 6px; height: 6px; top: 0.62em;
  background: var(--teal);
}

/* --- photography: no frames, consistent crop ----------------------- */
.photo img {
  border: 0;
  width: 100%; height: auto;
  object-fit: cover;
}
.photo figcaption {
  text-transform: none; letter-spacing: 0;
  font-size: var(--step--1); color: var(--ink-soft);
  padding-top: var(--s3); border-top: 1px solid var(--rule);
}

/* --- feature band: alternating image/text pattern ------------------ */
.feature {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: center;
  gap: 0;
}
.feature + .feature { border-top: 1px solid var(--rule); }
.feature__media { position: relative; min-height: clamp(280px, 34vw, 460px); overflow: hidden; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature__body { padding: clamp(2rem, 5vw, 4.5rem) clamp(1.5rem, 5vw, 4rem); }
.feature__body h2 { font-size: var(--step-2); margin-bottom: var(--s4); }
.feature__body p { color: var(--ink-soft); max-width: 46ch; }
.feature__links { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin-top: var(--s5); }
.feature--flip .feature__media { order: 2; }
@media (max-width: 640px) { .feature--flip .feature__media { order: 0; } }

/* full-bleed helper — a feature row that runs edge to edge like theirs */
.bleed { width: 100%; max-width: none; padding-inline: 0; }

/* --- segment rail: the uppercase market selector under the hero ---- */
.segrail { background: var(--white); border-bottom: 1px solid var(--rule); }
.segrail__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.segrail__list li + li { border-left: 1px solid var(--rule); }
.segrail a {
  display: block; padding: var(--s5) var(--s4); text-align: center;
  font-size: var(--step--2); font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--navy); text-decoration: none;
}
.segrail a:hover { background: #F5F8F9; color: var(--teal); }
@media (max-width: 640px) { .segrail__list li + li { border-left: 0; border-top: 1px solid var(--rule); } }

/* --- what the interactive 3D builds became ------------------------- */
.buildlist { margin-top: var(--s6); }
.buildlist .x3d-legend {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s6) var(--s8);
}
.buildlist .x3d-legend > li {
  padding-top: var(--s4);
  border-top: 2px solid var(--teal);
}
.buildlist .x3d-legend > li > div > strong { display: block; font-size: var(--step-0); color: var(--navy); margin-bottom: var(--s2); }
.buildlist .layerdetail { display: block; list-style: none; margin: var(--s3) 0 0; padding: 0; }
.buildlist .layerdetail li {
  position: relative; padding-left: var(--s5);
  font-size: var(--step--1); color: var(--ink-soft); margin-bottom: var(--s2);
}
.buildlist .layerdetail li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 10px; height: 1px; background: var(--rule-strong);
}

/* --- hero: photography first, one line of type --------------------- */
.hero__scrim {
  background: linear-gradient(180deg, rgba(8,28,46,0.30) 0%, rgba(8,28,46,0.52) 55%, rgba(8,28,46,0.78) 100%);
}
.hero h1 { max-width: 20ch; }
.hero__lede { max-width: 60ch; }

/* --- inner page heads: flat, quieter ------------------------------- */
.pagehead__scrim { background: linear-gradient(100deg, rgba(14,71,117,0.97) 0%, rgba(14,71,117,0.92) 100%); }

/* --- stat band --------------------------------------------------- */
.stats__value { letter-spacing: -0.02em; }

/* --- photographic page heads (their inner-page pattern) ------------- */
.pagehead--photo .pagehead__media,
.hero--photo .hero__media {
  background-image: var(--photo);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.pagehead--photo .pagehead__scrim {
  background: linear-gradient(100deg, rgba(8,28,46,0.86) 0%, rgba(8,28,46,0.60) 55%, rgba(8,28,46,0.34) 100%);
}
.hero--photo .hero__scrim {
  background: linear-gradient(100deg, rgba(8,28,46,0.86) 0%, rgba(8,28,46,0.66) 60%, rgba(8,28,46,0.42) 100%);
}

/* --- video inside a feature band ----------------------------------- */
.feature__media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (prefers-reduced-motion: reduce) {
  .feature__media video { display: none; }
  .feature__media--video { background-size: cover; background-position: center; }
}

/* -------------------------------------------------- 5b. Products dropdown
   Hover/focus dropdown under the Products nav item listing every product
   page plus the spec sheet library. Pure CSS: :hover for mouse,
   :focus-within for keyboard. On mobile the menu renders inline, always
   expanded, indented under the Products link. */

.nav__drop { position: relative; align-self: stretch; display: flex; align-items: center; }
.nav__drop > a { display: inline-flex; align-items: center; gap: 7px; }
.nav__drop > a::after {
  content: ""; width: 7px; height: 7px; margin-top: -4px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.nav__menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 305px; padding-block: var(--s3);
  background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--teal);
  box-shadow: 0 24px 48px rgba(12, 36, 60, 0.16);
  display: none; flex-direction: column; z-index: 120;
}
.nav__drop:hover .nav__menu,
.nav__drop:focus-within .nav__menu { display: flex; }
.nav__menu-label {
  margin: var(--s3) 0 0.2rem; padding-inline: var(--s5);
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft);
}
.nav__menu-label:first-child { margin-top: 0; }
.nav .nav__menu a {
  width: auto; padding: 0.5rem var(--s5);
  font-size: var(--step--1); letter-spacing: 0.05em;
  border-bottom: none;
}
.nav .nav__menu a:hover { color: var(--teal); background: var(--mint-tint); border-bottom: none; }
.nav .nav__menu a.nav__menu-all {
  margin-top: var(--s3); padding-top: 0.7rem;
  border-top: 1px solid var(--rule); color: var(--teal);
}

@media (max-width: 940px) {
  .nav__drop { width: 100%; align-self: auto; flex-direction: column; align-items: stretch; }
  .nav__drop > a { width: 100%; }
  .nav__drop > a::after { margin-left: auto; transform: rotate(-45deg); }
  .nav__menu {
    position: static; transform: none; display: flex; min-width: 0;
    border: 0; border-left: 3px solid var(--rule); box-shadow: none;
    padding: 0 0 0 var(--s4); margin-block: var(--s2);
  }
  .nav .nav__menu a { width: 100%; padding: 0.55rem 0; border-bottom: 1px solid var(--rule); }
  .nav .nav__menu a:hover { background: none; }
  .nav .nav__menu a.nav__menu-all { border-top: none; }
  .nav__menu-label { padding-inline: 0; }
}

/* Anchor jumps land below the sticky masthead instead of underneath it. */
:target { scroll-margin-top: 120px; }