/* =========================================================
   Layer 3/3: page compositions
   home hero · bento · product detail · rfq · contact ·
   article · search · team · map · misc
   ========================================================= */

/* ---------- HOME: blueprint hero on brand navy ---------- */
.hero {
  position: relative;
  background:
    linear-gradient(160deg, rgb(0 23 60 / 97%), rgb(11 46 79 / 97%)),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 5%) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 5%) 0 1px, transparent 1px 24px),
    var(--navy);
  color: var(--on-dark);
  padding-block: clamp(3rem, 6.5vw, 5rem) clamp(2.5rem, 5vw, 4rem);
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--lime); }
.hero .eyebrow { color: var(--lime); }
.hero .lede { color: var(--on-dark-muted); margin-top: 1.3rem; }
.hero .lede strong { color: #fff; }
.hero__ctas { display: flex; align-items: center; gap: 1rem 1.25rem; flex-wrap: wrap; margin-top: 2rem; }
.hero__ctas .link-arrow { color: var(--sky-bright); }
.hero__caption { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; color: var(--on-dark-muted); margin-top: .6rem; max-width: 46ch; }

@media (prefers-reduced-motion: no-preference) {
  .hero__copy .eyebrow, .hero__copy h1, .hero__copy .lede, .hero__ctas {
    opacity: 0; transform: translateY(14px); animation: rise .55s var(--ease) forwards;
  }
  .hero__copy h1 { animation-delay: .12s; }
  .hero__copy .lede { animation-delay: .26s; }
  .hero__ctas { animation-delay: .4s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* blueprint cross-section drawing (white/lime linework on navy) */
.xsection { display: block; width: 100%; }
.xsection text { user-select: none; }
.xsection .svg-dim, .xsection .svg-meta { font-size: 10px; fill: var(--on-dark-muted); letter-spacing: .08em; }
.xsection .sheet, .xsection .tblock { stroke: var(--dark-line); }
.xsection .feat { stroke: #CFE0F2; transition: opacity .25s var(--ease); }
.xsection .accentline { stroke: var(--lime); }
.callout rect { fill: var(--navy); stroke: var(--lime); stroke-width: 1.2; }
.callout .code { font-size: 12px; fill: var(--lime); font-weight: 500; }
.callout .label { font-size: 10px; fill: var(--on-dark-muted); letter-spacing: .12em; }
.callout .leader { stroke: var(--on-dark-muted); stroke-width: 1; }
.callout a:hover rect, .callout a:focus rect { fill: var(--lime); }
.callout a:hover .code, .callout a:focus .code { fill: var(--navy); }
.callout { transition: opacity .25s var(--ease); }
.xsection.has-focus .feat:not(.is-hi) { opacity: .22; }
.xsection.has-focus .callout:not(.is-hi) { opacity: .45; }
@media (prefers-reduced-motion: no-preference) {
  .draw path, .draw circle, .draw ellipse {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: drawline 1.1s var(--ease) forwards; animation-delay: var(--d, 0s);
  }
  @keyframes drawline { to { stroke-dashoffset: 0; } }
}

/* credibility strip under hero — glass marquee */
.cred { background: rgb(255 255 255 / 3%); border-block: 1px solid var(--hairline); overflow: hidden; }
.cred__row { display: flex; align-items: center; gap: 1.5rem 2.5rem; padding-block: 1.05rem; flex-wrap: nowrap; }
.cred__label { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; color: var(--muted); flex: none; }
.cred__marks {
  display: flex; gap: 3.2rem; align-items: baseline; flex: 1; min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cred__track { display: flex; gap: 3.2rem; align-items: baseline; flex: none; }
.cred__marks span { font-family: var(--font-cond); font-weight: 600; letter-spacing: .14em; color: #DFE8F2; font-size: .98rem; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .cred__track { animation: credScroll 30s linear infinite; }
  .cred:hover .cred__track { animation-play-state: paused; }
  @keyframes credScroll { to { transform: translateX(calc(-100% - 3.2rem)); } }
}

/* bento capability block (genuine cluster: what R&A does) */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(150px, auto); gap: 1rem; }
.bento > * { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.3rem 1.4rem; background: var(--paper); display: flex; flex-direction: column; gap: .5rem; }
.bento__wide { grid-column: span 2; }
.bento__tall { grid-row: span 2; }
.bento__navy { background: linear-gradient(160deg, var(--navy), var(--navy-2)); border-color: var(--navy); color: var(--on-dark); }
.bento__navy h3 { color: #fff; }
.bento__navy p { color: var(--on-dark-muted); }
.bento h3 { font-size: 1.05rem; }
.bento p { font-size: .88rem; color: var(--muted); }
.bento .mono { font-size: .64rem; letter-spacing: .12em; color: var(--green-text); }
.bento__navy .mono { color: var(--lime); }
@media (max-width: 980px) { .bento { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .bento__wide, .bento__tall { grid-column: auto; grid-row: auto; } }

/* home industries explorer (horizontal scroll on mobile) */
.explorer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.explorer a { background: var(--paper); padding: 1.2rem 1.3rem; color: var(--ink); display: flex; flex-direction: column; gap: .3rem; transition: background .2s var(--ease); }
.explorer a:hover { background: rgb(255 255 255 / 8%); text-decoration: none; }
.explorer h3 { font-family: var(--font-cond); font-size: 1rem; letter-spacing: .03em; }
.explorer p { font-size: .82rem; color: var(--muted); }
@media (max-width: 980px) { .explorer { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .explorer { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .explorer a { min-width: 220px; scroll-snap-align: start; }
}

/* ---------- PRODUCT DETAIL ---------- */
.pdetail { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.pdetail__aside { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 1rem; }
.pdetail__panel { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.3rem; }
.pdetail__panel h3 { font-size: .95rem; margin-bottom: .6rem; }
.pdetail__media { border: 1px solid var(--hairline); background: var(--surface); border-radius: var(--radius); aspect-ratio: 4/3; display: grid; place-items: center; color: var(--muted); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; }
@media (max-width: 980px) { .pdetail { grid-template-columns: 1fr; } .pdetail__aside { position: static; } }

/* ---------- RFQ multi-step ---------- */
.rfq-steps { display: flex; gap: .4rem; margin-bottom: 2rem; counter-reset: step; flex-wrap: wrap; }
.rfq-steps li { flex: 1 1 140px; counter-increment: step; border-top: 3px solid var(--hairline); padding-top: .6rem; font-family: var(--font-cond); font-size: .82rem; color: var(--muted); font-weight: 600; letter-spacing: .04em; }
.rfq-steps li::before { content: "0" counter(step) " · "; font-family: var(--font-mono); color: var(--field-border); }
.rfq-steps li[aria-current="step"] { border-top-color: var(--lime); color: var(--ink); }
.rfq-steps li[aria-current="step"]::before { color: var(--green-text); }
.rfq-steps li.is-done { border-top-color: var(--sky); color: var(--muted); }
.rfq-panel { display: grid; gap: 1.1rem; }
.rfq-panel .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 720px) { .rfq-panel .row { grid-template-columns: 1fr; } }
.rfq-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; }
.rfq-review dt { font-family: var(--font-cond); font-size: .7rem; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; margin-top: .8rem; }
.rfq-review dd { margin: .1rem 0 0; font-size: .95rem; color: var(--ink); }
.upload {
  border: 1.5px dashed var(--field-border); border-radius: var(--radius); padding: 1.4rem;
  text-align: center; color: var(--muted); font-size: .9rem; background: var(--surface);
}

/* ---------- CONTACT routing ---------- */
.route-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; }
.route-grid .card h3 { font-size: 1rem; }
.office { border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--paper); padding: 1.4rem 1.5rem; }
.office__stamp {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; color: var(--navy);
  border: 1px solid var(--hairline); display: inline-block; padding: .25rem .55rem;
  margin-bottom: .9rem; background: var(--surface);
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.office:hover .office__stamp { background: var(--navy); border-color: var(--navy); color: #fff; }
.office p { font-size: .9rem; color: #C3D0DF; margin-top: .4rem; }
.office .mono { font-size: .68rem; color: var(--muted); }
.map-region {
  border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface);
  min-height: 320px; display: grid; place-items: center; color: var(--muted);
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-align: center; padding: 1rem;
}

/* ---------- ARTICLE / case study ---------- */
.article { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
.article__body { max-width: 68ch; }
.article__body h2 { font-size: 1.45rem; margin-top: 2rem; }
.article__body h3 { font-size: 1.15rem; margin-top: 1.4rem; }
.article__body p { margin-top: .9em; color: #C3D0DF; }
.article__body ul { margin-top: .9em; padding-inline-start: 1.2rem; color: #C3D0DF; }
.article__aside { display: grid; gap: 1rem; align-content: start; }
@media (max-width: 980px) { .article { grid-template-columns: 1fr; } }
.figure-ph { border: 1px solid var(--hairline); background: var(--surface); border-radius: var(--radius); aspect-ratio: 16/9; display: grid; place-items: center; color: var(--muted); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; }
.metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
.metric-row > div { border-inline-start: 3px solid var(--lime); padding-inline-start: .9rem; }
.metric-row dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; color: var(--lime); text-shadow: 0 0 18px var(--glow-lime); font-variant-numeric: tabular-nums; }
.metric-row dt { font-size: .78rem; color: var(--muted); }

/* ---------- team ---------- */
.person { text-align: start; }
.person__photo { aspect-ratio: 1; background: linear-gradient(160deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 2%)); border: 1px solid var(--hairline); border-radius: var(--radius); display: grid; place-items: center; color: var(--muted); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; margin-bottom: .8rem; }
.person h3 { font-size: 1.05rem; }
.person .mono { font-size: .68rem; color: var(--green-text); letter-spacing: .08em; }
.person p { font-size: .88rem; color: var(--muted); margin-top: .4rem; }

/* ---------- 404 ---------- */
.notfound { text-align: center; padding-block: clamp(4rem, 10vw, 8rem); }
.notfound .mono { font-size: clamp(3rem, 8vw, 5rem); color: var(--hairline); letter-spacing: .1em; }
.notfound h1 { margin-top: .5rem; }
.notfound p { color: var(--muted); margin-top: .8rem; }
.notfound .hero__ctas { justify-content: center; margin-top: 1.6rem; }

/* ---------- drafting-ruler scroll progress ---------- */
.ruler { display: none; }
@media (min-width: 1100px) {
  .ruler { display: block; position: fixed; top: 50%; inset-inline-end: 18px; transform: translateY(-50%); z-index: 40; pointer-events: none; }
  .ruler__track {
    position: relative; width: 10px; height: 38vh;
    border-inline-end: 1px solid var(--hairline);
    background-image: repeating-linear-gradient(to bottom, var(--hairline) 0, var(--hairline) 1px, transparent 1px, transparent calc(38vh / 10));
    background-position: 100% 0; background-size: 5px 100%; background-repeat: no-repeat;
  }
  .ruler__fill { position: absolute; top: 0; inset-inline-end: -1px; width: 2px; height: 100%; background: var(--green-text); transform: scaleY(0); transform-origin: top; }
  .ruler__label { display: block; margin-top: .6rem; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em; color: var(--muted); text-align: end; }
}

/* =========================================================
   HERO SLIDER (sliding banner) — homepage + inner pages
   Track-based; controls injected by slider.js.
   ========================================================= */
/* MATERIA — light editorial hero on gallery paper */
.hero-slider {
  position: relative;
  overflow: hidden;
  background: transparent;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
}
.hero-slider__track {
  position: relative;
  z-index: 1;
  display: flex;
  transition: transform .6s var(--ease);
}
.cell-field { display: none; }         /* retired in MATERIA */
.hero-slider__nav, .hero-slider__progress { z-index: 3; }
@media (prefers-reduced-motion: reduce) { .hero-slider__track { transition: none; } }
.hero-slider__slide { min-width: 100%; flex: 0 0 100%; }
.hero-slide { position: relative; background: transparent; }
.hero-slide__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5.5rem);
  min-height: clamp(460px, 60vh, 600px);
}
.hero-slide__index {
  font-family: var(--font-sans);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
  display: inline-flex; align-items: center; gap: .6rem;
  margin-bottom: 1.2rem;
}
.hero-slide__index::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--tint, var(--lime)); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--tint, var(--lime)) 45%, transparent); }
.hero-slide__index b { color: var(--ink); font-weight: 600; }
.hero-slide h1, .hero-slide h2 {
  color: var(--ink);
  font-family: var(--font-display); font-weight: 800; text-transform: none;
  font-size: clamp(2.7rem, 5.6vw, 4.9rem); line-height: .98; letter-spacing: -.032em;
}
/* the signature lime underline mark on the emphasised word */
/* em words use the global gradient (.grad) */
.hero-slide__sub { color: #C3D0DF; font-size: clamp(1.05rem, 1.4vw, 1.18rem); line-height: 1.62; max-width: 34rem; margin-top: 1.4rem; }
.hero-slide__sub strong { color: #fff; font-weight: 600; }
.hero-slide__ctas { display: flex; align-items: center; gap: 1rem 1.25rem; flex-wrap: wrap; margin-top: 2rem; }

/* SIGNATURE — the material-swatch mosaic (six divisions as sample tiles) */
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.swatch {
  position: relative;
  aspect-ratio: 1 / 1.02;
  background: color-mix(in srgb, var(--tint, var(--lime)) 7%, var(--paper));
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: .85rem .9rem;
  display: flex; flex-direction: column; justify-content: space-between;
  color: var(--ink); overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.swatch::after {   /* material tint chip, bottom-left, per division via --tint */
  content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0;
  width: 40%; height: 6px; background: var(--tint, var(--lime));
  transition: width .3s var(--ease);
}
.swatch:hover { transform: translateY(-6px); box-shadow: 0 16px 30px rgb(16 26 20 / 12%); border-color: var(--ink); text-decoration: none; }
.swatch:hover::after { width: 100%; }
.swatch__code { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; line-height: 1; letter-spacing: -.03em; }
.swatch__name { font-size: .72rem; font-weight: 500; color: var(--muted); letter-spacing: .01em; }
.swatch__no { position: absolute; top: .7rem; inset-inline-end: .8rem; font-size: .6rem; letter-spacing: .12em; color: var(--field-border); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .hero-slider__slide[aria-hidden="false"] .swatch { animation: swatchIn .5s var(--ease) both; }
  .hero-slider__slide[aria-hidden="false"] .swatch:nth-child(2){animation-delay:.05s}
  .hero-slider__slide[aria-hidden="false"] .swatch:nth-child(3){animation-delay:.1s}
  .hero-slider__slide[aria-hidden="false"] .swatch:nth-child(4){animation-delay:.15s}
  .hero-slider__slide[aria-hidden="false"] .swatch:nth-child(5){animation-delay:.2s}
  .hero-slider__slide[aria-hidden="false"] .swatch:nth-child(6){animation-delay:.25s}
  @keyframes swatchIn { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }
}

/* entrance: current slide's copy rises once (no perpetual motion) */
@media (prefers-reduced-motion: no-preference) {
  .hero-slider__slide[aria-hidden="false"] .hero-slide__index,
  .hero-slider__slide[aria-hidden="false"] :is(h1,h2),
  .hero-slider__slide[aria-hidden="false"] .hero-slide__sub,
  .hero-slider__slide[aria-hidden="false"] .hero-slide__ctas {
    animation: heroRise .55s var(--ease) both;
  }
  .hero-slider__slide[aria-hidden="false"] :is(h1,h2) { animation-delay: .06s; }
  .hero-slider__slide[aria-hidden="false"] .hero-slide__sub { animation-delay: .16s; }
  .hero-slider__slide[aria-hidden="false"] .hero-slide__ctas { animation-delay: .26s; }
  @keyframes heroRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* controls */
.hero-slider__nav {
  position: absolute;
  inset-inline: 0;
  bottom: clamp(1rem, 3vw, 1.6rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .6rem;
  justify-content: center;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.hero-slider__arrow, .hero-slider__play {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgb(255 255 255 / 7%);
  backdrop-filter: blur(8px);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.hero-slider__arrow:hover, .hero-slider__play:hover { background: var(--lime); border-color: var(--lime); color: var(--navy); }
.hero-slider__arrow svg { width: 20px; height: 20px; }
.hero-slider__dots { display: flex; gap: .5rem; align-items: center; margin-inline: .4rem; }
.hero-slider__dot {
  width: 30px; height: 4px; padding: 0;
  border: 0; border-radius: 2px;
  background: var(--hairline);
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.hero-slider__dot:hover { background: rgb(255 255 255 / 45%); }
.hero-slider__dot[aria-selected="true"] { background: var(--lime); }
.hero-slider__play { margin-inline-start: .2rem; }
.hero-slider__play-pause {
  width: 10px; height: 12px; display: block;
  border-inline: 3px solid currentColor; /* pause bars */
}
.hero-slider:not(.is-playing) .hero-slider__play-pause {
  width: 0; height: 0;
  border: 0;
  border-inline-start: 11px solid currentColor; /* play triangle */
  border-block: 7px solid transparent;
}
/* countdown progress rail */
.hero-slider__progress {
  position: absolute;
  inset-inline: 0; bottom: 0;
  height: 3px;
  background: var(--hairline);
  z-index: 3;
}
.hero-slider__progress-fill {
  display: block; height: 100%;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
}
.hero-slider.is-reduced .hero-slider__progress, .hero-slider.is-reduced .hero-slider__play { display: none; }

/* inner-page slider: slimmer */
.hero-slider--inner .hero-slide__grid { min-height: clamp(300px, 38vh, 400px); grid-template-columns: 1fr; }
.hero-slider--inner .hero-slide__art { display: none; }
.hero-slider--inner .hero-slide h1 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }

@media (max-width: 900px) {
  .hero-slide__grid { grid-template-columns: 1fr; min-height: 0; padding-bottom: 4.75rem; }
  .hero-slide__art { display: none; }
  .hero-slider__nav { justify-content: flex-start; }
}

/* =========================================================
   THE ENGINE — hero scene (aurora + animated isometric
   supply world behind the sliding messages)
   ========================================================= */
.hero-scene {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.hero-scene__aurora-a, .hero-scene__aurora-b {
  position: absolute; border-radius: 50%; filter: blur(30px); will-change: transform;
}
.hero-scene__aurora-a {
  width: 780px; height: 780px; inset-inline-end: -220px; top: -380px;
  background: radial-gradient(circle, var(--glow-lime), transparent 62%); opacity: .6;
}
.hero-scene__aurora-b {
  width: 640px; height: 640px; inset-inline-start: -240px; bottom: -380px;
  background: radial-gradient(circle, var(--glow-sky), transparent 62%); opacity: .55;
}
.hero-scene__world {
  position: absolute; inset-inline-end: max(-4vw, -60px); bottom: -2%;
  width: min(58vw, 880px); will-change: transform;
}
@media (max-width: 900px) {
  .hero-scene__world { width: 130%; inset-inline-end: -40%; opacity: .28; }
}
/* grid floor glow */
.hero-scene__floor {
  position: absolute; inset-inline: 0; bottom: 0; height: 42%;
  background:
    linear-gradient(180deg, transparent, rgb(51 150 209 / 6%)),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 4%) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 4%) 0 1px, transparent 1px 46px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%);
  mask-image: linear-gradient(180deg, transparent, #000 55%);
}

/* scene SVG animations — mechanical, continuous, quiet */
@media (prefers-reduced-motion: no-preference) {
  .sc-trolley { animation: scTrolley 9s ease-in-out infinite alternate; }
  @keyframes scTrolley { from { transform: translateX(0); } to { transform: translateX(120px); } }
  .sc-hook { animation: scHook 9s ease-in-out infinite alternate; transform-origin: top; }
  @keyframes scHook { from { transform: translateX(0) } to { transform: translateX(120px) } }
  .sc-truck { animation: scTruck 14s linear infinite; }
  @keyframes scTruck { 0% { transform: translateX(-70px); opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(430px); opacity: 0; } }
  .sc-beam { stroke-dasharray: 6 10; animation: scBeam 1.6s linear infinite; }
  @keyframes scBeam { to { stroke-dashoffset: -16; } }
  .sc-beacon { animation: scBeacon 2.4s ease-in-out infinite; }
  .sc-beacon--2 { animation-delay: 1.2s; }
  @keyframes scBeacon { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
  .sc-window { animation: scWindow 6s ease-in-out infinite alternate; }
  .sc-window--2 { animation-delay: 2.4s; }
  @keyframes scWindow { from { opacity: .35; } to { opacity: .9; } }
}

/* hero grid: copy left over the world */
.hero-slide__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.hero-slide__spacer { min-height: 1px; }
.hero-slide__ctas .link-arrow { color: var(--sky-text); }

/* scroll-reveal cards get glass tilt (JS adds .tilt transforms) */
.tilt { transform-style: preserve-3d; }

/* =========================================================
   THE ENGINE — per-division hero scenes
   Each slide carries its own animated world; the shared
   aurora + floor stay behind all of them. CMS: media field.
   ========================================================= */
.hero-slide__scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* the svg inside reuses .hero-scene__world placement rules */
/* off-screen slides stop animating (battery + compositor) */
.hero-slider__slide[aria-hidden="true"] svg * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: no-preference) {
  /* shared motions */
  .sc-spin, .sc-fan, .sc-gear, .sc-roll, .sc-drum { transform-box: fill-box; transform-origin: center; animation: scSpin var(--spin, 6s) linear infinite; }
  .sc-fan { --spin: 2.6s; }
  .sc-roll { --spin: 3.4s; }
  .sc-gear { --spin: 8s; }
  .sc-drum { --spin: 10s; }
  .sc-gear--r, .sc-roll--r { animation-direction: reverse; }
  @keyframes scSpin { to { transform: rotate(360deg); } }
  .sc-flow { stroke-dasharray: 5 9; animation: scBeam 1.3s linear infinite; }
  .sc-flow--up { stroke-dasharray: 5 9; animation: scBeamUp 1.3s linear infinite; }
  @keyframes scBeamUp { to { stroke-dashoffset: 14; } }
  .sc-pulse { stroke-dasharray: 2 26; animation: scBeam .85s linear infinite; }
  .sc-spray { stroke-dasharray: 3 7; animation: scBeam .9s linear infinite; }
  .sc-bub { animation: scBub 4.2s ease-in infinite; }
  .sc-bub--2 { animation-delay: 1.4s; }
  .sc-bub--3 { animation-delay: 2.8s; }
  .sc-bub--4 { animation-delay: 2.1s; }
  @keyframes scBub { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .85; } 100% { transform: translateY(-110px); opacity: 0; } }
  .sc-foamgrow { transform-origin: bottom; animation: scFoam 7s ease-in-out infinite alternate; }
  @keyframes scFoam { from { transform: scaleY(.28); } to { transform: scaleY(1); } }
  .sc-pass { animation: scPass 7s ease-in-out infinite alternate; }
  @keyframes scPass { from { transform: translateX(-58px); } to { transform: translateX(58px); } }
  .sc-spark { animation: scSpark 1.1s steps(2, jump-none) infinite; }
  .sc-spark--2 { animation-delay: .35s; }
  .sc-spark--3 { animation-delay: .7s; }
  @keyframes scSpark { 0%, 100% { opacity: .1; } 50% { opacity: .95; } }
  .sc-jib { animation: scJib 11s ease-in-out infinite alternate; }
  @keyframes scJib { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
  .sc-convey { animation: scConvey 5.5s linear infinite; }
  @keyframes scConvey { to { transform: translateX(180px); } }
  .sc-arm { animation: scArm 5.5s ease-in-out infinite alternate; }
  @keyframes scArm { from { transform: rotate(-7deg); } to { transform: rotate(6deg); } }
  .sc-drip { animation: scDrip 2.4s ease-in infinite; }
  .sc-drip--2 { animation-delay: 1.2s; }
  @keyframes scDrip { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .9; } 85% { opacity: .9; } 100% { transform: translateY(92px); opacity: 0; } }
  .sc-brick { animation: scBrick 5s ease-in-out infinite; }
  @keyframes scBrick { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
}

/* per-slide worlds ride a little higher than the old fixed world so the
   ground line stays inside the hero's clip box on shorter slides */
.hero-slide__scene .hero-scene__world { bottom: 42px; width: min(53vw, 800px); inset-inline-end: clamp(6px, 1.5vw, 28px); }
@media (max-width: 900px) {
  .hero-slide__scene .hero-scene__world { bottom: 0; width: 130%; }
}

/* =========================================================
   PRODUCT CATEGORY PAGES — interactive visuals + creative layout
   Code-drawn technical visuals (theme-aware); no external images.
   ========================================================= */
/* asymmetric category hero with a signature visual panel */
.cat-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--hairline); }
.cat-hero::before { content: ""; position: absolute; width: 620px; height: 620px; border-radius: 50%; inset-inline-end: -200px; top: -320px; background: radial-gradient(circle, var(--glow-lime), transparent 62%); filter: blur(26px); opacity: .5; pointer-events: none; }
.cat-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(2.5rem, 5vw, 4.25rem); }
.cat-hero__visual { position: relative; border: 1px solid var(--hairline); border-radius: 18px; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; color: var(--ink);
  background: radial-gradient(130% 120% at 75% 10%, rgb(141 198 63 / 12%), transparent 55%),
    repeating-linear-gradient(0deg, var(--hairline) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, var(--hairline) 0 1px, transparent 1px 26px), var(--paper); }
.cat-hero__visual svg { width: 68%; height: auto; overflow: visible; }
.cat-hero__visual .a { stroke: var(--lime); }
@media (max-width: 860px) { .cat-hero__grid { grid-template-columns: 1fr; } .cat-hero__visual { order: -1; aspect-ratio: 16 / 9; } }

/* interactive product cards */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 1.1rem; }
.prod-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--hairline); border-radius: 14px; background: var(--paper); backdrop-filter: blur(8px); transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.prod-card:hover { transform: translateY(-5px); border-color: rgb(141 198 63 / 45%); box-shadow: 0 22px 46px rgb(0 0 0 / 38%), 0 0 26px rgb(141 198 63 / 12%); }
.prod-card__visual { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; color: var(--muted); overflow: hidden; border-bottom: 1px solid var(--hairline);
  background: radial-gradient(120% 130% at 82% 0%, rgb(141 198 63 / 9%), transparent 58%),
    repeating-linear-gradient(0deg, var(--hairline) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, var(--hairline) 0 1px, transparent 1px 22px); }
.prod-card__visual svg { width: 54%; height: auto; overflow: visible; transition: transform .4s var(--ease), color .25s var(--ease); }
.prod-card__visual .a { stroke: var(--lime); }
.prod-card:hover .prod-card__visual { color: var(--ink); }
.prod-card:hover .prod-card__visual svg { transform: scale(1.07); }
.prod-card__code { position: absolute; top: .7rem; inset-inline-start: .8rem; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; color: var(--green-text); background: var(--surface); border: 1px solid var(--hairline); border-radius: 5px; padding: .16rem .45rem; }
.prod-card__body { padding: 1.05rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.prod-card__name { font-family: var(--font-display); font-weight: 600; font-size: 1.04rem; line-height: 1.22; letter-spacing: -.01em; color: var(--ink); }
.prod-card__spec { font-family: var(--font-mono); font-size: .71rem; letter-spacing: .01em; color: var(--green-text); }
.prod-card__desc { font-size: .89rem; color: var(--muted); }
.prod-card__more { margin-top: auto; padding-top: .5rem; font-family: var(--font-cond); font-weight: 600; font-size: .85rem; color: var(--sky-text); opacity: 0; transform: translateY(4px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.prod-card:hover .prod-card__more, .prod-card:focus-within .prod-card__more { opacity: 1; transform: none; }
.prod-card__more::after { content: " →"; }
.prod-card--feature { grid-column: span 2; }
.prod-card--feature .prod-card__visual { aspect-ratio: auto; min-height: 240px; }
.prod-card--feature .prod-card__visual svg { width: 42%; }
@media (max-width: 680px) { .prod-card--feature { grid-column: auto; } .prod-card--feature .prod-card__visual { aspect-ratio: 16 / 9; min-height: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .prod-card__visual .draw { stroke-dashoffset: 1; stroke-dasharray: 1; transition: stroke-dashoffset .7s var(--ease); }
  .prod-card:hover .prod-card__visual .draw, .prod-card:focus-within .prod-card__visual .draw { stroke-dashoffset: 0; }
}

/* creative process stepper (PU page) */
.stepper { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 1rem; counter-reset: step; }
.step { position: relative; padding: 1.2rem 1.25rem; border: 1px solid var(--hairline); border-radius: 12px; background: var(--paper); backdrop-filter: blur(8px); transition: border-color .2s var(--ease), transform .2s var(--ease); }
.step:hover { border-color: rgb(141 198 63 / 40%); transform: translateY(-3px); }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; color: var(--lime); text-shadow: 0 0 18px var(--glow-lime); margin-bottom: .5rem; }
.step h3 { font-size: 1rem; margin-bottom: .35rem; }
.step p { font-size: .88rem; color: var(--muted); }

/* labelled product group (aluminum/stainless) */
.prod-group + .prod-group { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.prod-group__label { display: inline-flex; align-items: center; font-family: var(--font-cond); font-weight: 600; font-size: .78rem; letter-spacing: .1em; padding: .32rem .8rem; border-radius: 100px; background: rgb(141 198 63 / 14%); color: var(--green-text); border: 1px solid rgb(141 198 63 / 32%); margin-bottom: 1rem; }

/* home solutions — asymmetric feature composition of visual boxes */
.sol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; align-items: stretch; }
.sol-grid .prod-card--feature { grid-column: span 2; grid-row: span 2; }
/* feature card is 2 rows tall — let its visual panel absorb the extra height so the
   heading/tags/foot sit compactly instead of leaving a dead gap above the foot */
.sol-grid .prod-card--feature .prod-card__visual { flex: 1 1 auto; min-height: 260px; }
.sol-grid .prod-card--feature .prod-card__body { flex: 0 0 auto; }
.sol-grid .prod-card--feature .prod-card__foot { margin-top: 0; }
.sol-grid .prod-card__body { gap: .6rem; }
.sol-grid .prod-card .chips { margin-top: .1rem; }
.sol-grid .prod-card__foot { margin-top: auto; padding-top: .9rem; border-top: 1px dashed var(--hairline); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .9rem; }
@media (max-width: 820px) { .sol-grid { grid-template-columns: 1fr 1fr; } .sol-grid .prod-card--feature { grid-column: 1 / -1; grid-row: auto; } .sol-grid .prod-card--feature .prod-card__visual { flex: 0 0 auto; } }
@media (max-width: 560px) { .sol-grid { grid-template-columns: 1fr; } }

/* home solutions — "live" shuffle entrance + a slow scan on the featured panel.
   .sol-reveal is added by JS ONLY when motion is allowed, so no-JS / reduced-motion
   users always see fully-visible, un-animated cards. */
.sol-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.sol-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .sol-grid .prod-card--feature .prod-card__visual:not(.has-img)::after {
    content: ""; position: absolute; left: 0; right: 0; height: 42%; top: -42%; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgb(141 198 63 / 7%), transparent);
    animation: sol-scan 7s linear infinite;
  }
  @keyframes sol-scan { 0% { top: -42%; } 100% { top: 100%; } }
}

/* ---------- real photography support (live images) ---------- */
.prod-card__visual.has-img, .cat-hero__visual.has-img { background: none; padding: 0; }
.prod-card__visual.has-img img, .cat-hero__visual.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-card__visual.has-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(5 13 26 / 55%)); pointer-events: none; }
html[data-theme="light"] .prod-card__visual.has-img::after { background: linear-gradient(180deg, transparent 60%, rgb(12 24 38 / 22%)); }
.prod-card:hover .prod-card__visual.has-img img { transform: scale(1.06); }
.prod-card__visual.has-img img { transition: transform .5s var(--ease); }

/* media row — real photo beside text (alternating), a creative editorial device */
.media-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(1.5rem, 4vw, 3.25rem); align-items: center; }
.media-row + .media-row { margin-top: clamp(2rem, 4vw, 3.25rem); }
.media-row__fig { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--hairline); aspect-ratio: 4 / 3; box-shadow: var(--shadow-1); }
.media-row__fig img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.media-row__fig:hover img { transform: scale(1.05); }
.media-row__fig figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: .8rem 1rem; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: linear-gradient(0deg, rgb(5 13 26 / 78%), transparent); }
.media-row--rev .media-row__fig { order: 2; }
.media-row__body h3 { margin-bottom: .6rem; }
.media-row__body ul { margin: .8rem 0 0; padding-inline-start: 1.1rem; display: grid; gap: .5rem; color: var(--muted); }
@media (max-width: 820px) { .media-row { grid-template-columns: 1fr; } .media-row--rev .media-row__fig { order: 0; } }

/* image gallery strip */
.img-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,220px),1fr)); gap: 1rem; }
.img-strip figure { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--hairline); aspect-ratio: 4 / 3; position: relative; }
.img-strip img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.img-strip figure:hover img { transform: scale(1.06); }