/* ═══════════════════════════════════════════════════════════════
   ALTELIX AV — V4
   Top: cinematic slideshow hero (the long page's presentation hero, now 5 scenes).
   Below: the V3 bento plate (Plate UI arc family), recoloured to the pre-rebrand slate palette.
   Palette: slate #313440 (structure), ink #1B1D24 (plate), paper #F5F5F3 (blocks), red #E70000 (action only)
   Type: Montserrat (display) / Inter (body)

   ARC RULE (from V3): every cut's interior radius = node radius + gutter (12), concentric with the node.
   Every cut overhangs the block edges it touches by 8px, and every place a cut meets a block edge
   gets a 20px junction (.jn) whose transparent disc points back into the block.

   Contrast: ink on paper 15.9 · mute .66 on paper 6.6 · white on slate 11.2 · #C6CBD9 on slate 7.5
             white on red 4.6 · slate on paper 10.6
   ═══════════════════════════════════════════════════════════════ */

:root {
  --page-bg: #0b0c10;
  --plate: #1b1d24;
  --block: #f5f5f3;
  --ink: #1b1d24;
  --mute: rgba(27, 29, 36, 0.66);
  --hair: rgba(27, 29, 36, 0.13);
  --slate: #313440;
  --slate-2: #3b3f4d;
  --mute-b: #c6cbd9;
  --eyebrow-b: #a8b0c9;
  --red: #e70000;
  --red-dark: #c20000;
  --font-h: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --font-b: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --page: clamp(10px, 3.4vw, 56px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --slide: 7000ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--page-bg); }
body {
  margin: 0; font-family: var(--font-b); font-size: 16px; line-height: 1.55; color: var(--ink);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background:
    radial-gradient(1200px 700px at 85% 30%, rgba(49, 52, 64, 0.55), transparent 70%),
    radial-gradient(900px 600px at 10% 80%, rgba(49, 52, 64, 0.35), transparent 70%),
    var(--page-bg);
}
/* Engineering grid behind the plate: the "tech" layer. It carries nothing else. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
[hidden] { display: none !important; }

/* Cookie consent controls */
.cookie-banner {
  position: fixed; z-index: 1000; left: 18px; bottom: 18px; width: min(370px, calc(100vw - 24px));
  color: #1b1d24; background: #fff;
  border: 1px solid rgba(27,29,36,.16); border-radius: 12px;
  box-shadow: 0 10px 36px rgba(0,0,0,.24); font-family: var(--font-b);
}
.cookie-inner { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: start; padding: 14px 15px; }
.cookie-copy { max-width: 100%; }
.cookie-kicker { margin: 0 0 3px; color: #565b6e; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cookie-copy h2 { margin: 0 0 4px; font: 700 .9rem/1.3 var(--font-h); }
.cookie-copy p:not(.cookie-kicker) { margin: 0; color: #424653; font-size: .76rem; line-height: 1.4; }
.cookie-copy a { color: #30384f; font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.cookie-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: center; }
.cookie-btn { min-height: 38px; padding: 0 12px; border: 1px solid #424653; border-radius: 8px; background: #fff; color: #1b1d24; font-size: .8rem; font-weight: 650; cursor: pointer; }
.cookie-btn:hover { background: #f0f1f4; }
.cookie-accept { border-color: #bd0000; background: #e70000; color: #fff; }
.cookie-accept:hover { border-color: #a90000; background: #c90000; }
.cookie-manage-link { display: inline; padding: 0; border: 0; background: none; color: #30384f; font: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cookie-preferences { grid-column: 1/-1; border-top: 1px solid #d9dbe1; padding-top: 10px; }
.cookie-preferences > p { display: grid; grid-template-columns: 95px 1fr; gap: 8px; margin: 0 0 8px; font-size: .76rem; }
.cookie-preferences > p span { color: #565b6e; }
.cookie-preferences .cookie-actions { margin-top: 12px; }
@media (max-width: 42rem) {
  .cookie-banner { left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: min(370px, calc(100vw - 24px)); }
  .cookie-inner { gap: 9px; padding: 12px 13px; }
  .cookie-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cookie-btn { min-height: 40px; padding: 0 8px; font-size: .8rem; }
  .cookie-preferences { grid-column: auto; }
  .cookie-preferences > p { grid-template-columns: 1fr; gap: 2px; }
}

/* ══ BUTTONS ══ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 999px; border: 0; cursor: pointer;
  font-family: var(--font-h); font-weight: 700; font-size: 0.95rem; text-decoration: none;
  transition: background-color 0.2s, color 0.2s, transform 0.2s var(--ease), border-color 0.2s;
}
.btn svg { width: 18px; height: 18px; transition: transform 0.2s var(--ease); }
.btn:hover svg { transform: translateY(2px); }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); }
.btn-glass { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-glass:hover { background: #fff; color: var(--ink); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 0.84rem; }

/* ══ NAV ══ */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px var(--page); color: #fff;
  transition: background-color 0.35s, padding 0.35s, border-color 0.35s;
  border-bottom: 1px solid transparent;
}
.nav.is-solid {
  padding-top: 10px; padding-bottom: 10px;
  background: rgba(17, 19, 24, 0.82); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.nav-logo img { width: auto; height: 38px; }
.nav-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (min-width: 75rem) { .nav-links { display: flex; } }
.nav-links a { padding: 8px 15px; border-radius: 999px; font-size: 0.84rem; font-weight: 600; text-decoration: none; color: rgba(255, 255, 255, 0.82); transition: background-color 0.2s, color 0.2s; white-space: nowrap; }
.nav-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.nav-links a.is-on { background: #fff; color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-phone { display: none; font-weight: 600; font-size: 0.9rem; text-decoration: none; color: rgba(255, 255, 255, 0.9); }
.nav-phone:hover { color: #fff; }
@media (min-width: 40rem) { .nav-phone { display: inline; } }

/* ══ HERO: cinematic slideshow ══ */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; max-height: 1100px; overflow: hidden; background: #0b0c10; color: #fff; isolation: isolate; }
.hero-slides, .hs { position: absolute; inset: 0; margin: 0; }
.hs { opacity: 0; transition: opacity 1.4s ease; }
.hs[data-active='true'] { opacity: 1; z-index: 1; }
.hs img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(var(--z, 1.03)); transform-origin: var(--org, var(--pos, 50% 50%)); }
/* --z + --org: a scene whose box sits mid-frame is zoomed from its left edge so the box clears the headline. */
/* Slow push-in. The leaving slide keeps .kb until its fade ends, so it never snaps back. */
.hs.kb img { animation: kb calc(var(--slide) + 1600ms) linear forwards; }
@keyframes kb { from { transform: scale(var(--z, 1.03)); } to { transform: scale(calc(var(--z, 1.03) + 0.1)); } }
.hero.is-paused .hs img { animation-play-state: paused; }
.hero-shade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 12, 16, 0.86) 0%, rgba(11, 12, 16, 0.55) 38%, rgba(11, 12, 16, 0.05) 70%),
    linear-gradient(0deg, rgba(11, 12, 16, 0.9) 0%, rgba(11, 12, 16, 0) 42%),
    linear-gradient(180deg, rgba(11, 12, 16, 0.6) 0%, rgba(11, 12, 16, 0) 22%);
}
/* HUD grid + corner marks over the film: reads "engineered", fades out toward the product */
.hero-grid {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.5) 35%, transparent 60%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.5) 35%, transparent 60%);
}

.hero-copy {
  position: absolute; z-index: 3; left: var(--page); bottom: clamp(150px, 20vh, 190px);
  width: min(760px, calc(100% - 2 * var(--page))); display: grid; gap: 22px;
}
.eyebrow {
  margin: 0; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-h); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #dde2ee;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
}
.eyebrow i { width: 8px; height: 8px; border-radius: 2px; background: var(--red); box-shadow: 0 0 0 4px rgba(231, 0, 0, 0.22); }
.hero h1 {
  margin: 0; font-family: var(--font-h); font-weight: 800; font-size: clamp(2.7rem, 1.2rem + 5vw, 6rem);
  line-height: 0.94; letter-spacing: -0.045em; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
.hero h1 .w { display: inline-block; }
/* Clip-to-text paints only the element box. Tight tracking pushes glyph edges ("p", "y.") and the descender outside it, so pad every side and pull the layout back with matching negative margins. */
.hero h1 .em { padding: 0.04em 0.1em 0.18em; margin: -0.04em -0.1em -0.18em; color: transparent; background: linear-gradient(180deg, #ffffff 10%, #a8b0c9 100%); -webkit-background-clip: text; background-clip: text; text-shadow: none; }
.hero-sub { margin: 0; max-width: 52ch; font-size: clamp(1.02rem, 0.9rem + 0.45vw, 1.24rem); line-height: 1.55; color: #eef0f6; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hero-tags li {
  padding: 7px 13px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; color: #e6e9f1;
  background: rgba(17, 19, 24, 0.4); border: 1px solid rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* Intro: words rise in once. Armed only when JS is alive. */
.js .hero .eyebrow, .js .hero-sub, .js .hero-cta, .js .hero-tags, .js .hud { opacity: 0; animation: fadeUp 0.8s var(--ease) forwards; }
.js .hero .eyebrow { animation-delay: 0.15s; }
.js .hero h1 .w { opacity: 0; transform: translateY(0.5em); animation: rise 0.9s var(--ease) forwards; animation-delay: calc(0.25s + var(--i, 0) * 70ms); }
.js .hero-sub { animation-delay: 0.8s; }
.js .hero-cta { animation-delay: 0.95s; }
.js .hero-tags { animation-delay: 1.1s; }
.js .hud { animation-delay: 1.2s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* HUD: which scene, how long it stays, and the controls (auto-advance must be pausable) */
.hud {
  position: absolute; z-index: 3; right: var(--page); bottom: 32px; width: min(460px, calc(100% - 2 * var(--page)));
  display: grid; gap: 14px; padding: 16px 16px 14px 18px; border-radius: 20px;
  background: rgba(17, 19, 24, 0.5); border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
}
.hud-cap { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: baseline; }
.hud-n { grid-row: span 2; font-family: var(--font-h); font-size: 0.78rem; font-weight: 600; color: var(--eyebrow-b); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
.hud-n b { font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.hud-title { font-family: var(--font-h); font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-sku { font-size: 0.78rem; color: var(--mute-b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-bars { display: flex; gap: 6px; }
.hud-bar { flex: 1; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.hud-bar::before, .hud-bar::after { content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 3px; border-radius: 3px; }
.hud-bar::before { background: rgba(255, 255, 255, 0.22); }
.hud-bar::after { background: #fff; transform: scaleX(0); transform-origin: left; }
.hud-bar.is-done::after { transform: scaleX(1); }
.hud-bar.is-on::after { animation: fill var(--slide) linear forwards; }
.hero.is-paused .hud-bar.is-on::after { animation-play-state: paused; }
@keyframes fill { to { transform: scaleX(1); } }
.hud-ctrl { position: absolute; right: 12px; top: 12px; display: flex; gap: 6px; }
.hud-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); cursor: pointer;
  display: grid; place-content: center; background: rgba(255, 255, 255, 0.08); color: #fff; transition: background-color 0.2s, color 0.2s;
}
.hud-btn:hover { background: #fff; color: var(--ink); }
.hud-btn svg { width: 15px; height: 15px; }
.hud-btn .i-play { display: none; }
.hud-btn[aria-pressed='true'] .i-pause { display: none; }
.hud-btn[aria-pressed='true'] .i-play { display: block; }
.hud-cap { padding-right: 120px; }

.hero-scroll {
  position: absolute; z-index: 3; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: none; flex-direction: column; align-items: center; gap: 8px;
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: #c6cbd9; text-decoration: none;
}
.hero-scroll span { width: 1px; height: 40px; background: rgba(245, 245, 243, 0.3); position: relative; overflow: hidden; }
.hero-scroll span::after { content: ''; position: absolute; inset: 0; background: #fff; transform: translateY(-100%); animation: drop 1.8s ease-in-out infinite; }
@keyframes drop { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
@media (min-width: 72rem) { .hero-scroll { display: flex; } }

@media (max-width: 47.99rem) {
  .hero { min-height: 700px; }
  .hero-copy { bottom: 150px; gap: 16px; }
  .hero-shade { background: linear-gradient(0deg, rgba(11, 12, 16, 0.95) 0%, rgba(11, 12, 16, 0.6) 55%, rgba(11, 12, 16, 0.25) 100%); }
  .hero-tags { display: none; }
  .hud { left: var(--page); right: var(--page); bottom: 16px; width: auto; padding: 12px 12px 10px 14px; }
  .hud-cap { padding-right: 116px; }
  .hud-n b { font-size: 1.2rem; }
  .btn { min-height: 48px; padding: 0 20px; }
}

/* ══ PLATE ══ one plate holds the rest of the page; one gutter, plate padding included */
.plate {
  --gut: 10px; --rp: 26px; --rb: calc(var(--rp) - var(--gut));
  display: grid; gap: var(--gut);
  width: calc(100% - 2 * var(--page)); max-width: 1480px; margin: var(--page) auto; padding: var(--gut);
  border-radius: var(--rp); background: var(--plate);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 50px 110px -40px rgba(0, 0, 0, 0.8);
}
@media (min-width: 60rem) { .plate { --gut: 12px; --rp: 34px; } }
.row { display: grid; gap: var(--gut); scroll-margin-top: 80px; }
.block { position: relative; margin: 0; border-radius: var(--rb); background: var(--block); color: var(--ink); }
.block.slate { background: var(--slate); color: #fff; }
.fill { position: absolute; inset: 0; overflow: hidden; border-radius: var(--rb); }
.fill img { width: 100%; height: 100%; object-fit: cover; }

/* ══ ARC CUTS ══ */
.cut { position: absolute; z-index: 1; background: var(--plate); pointer-events: none; }
.jn {
  position: absolute; z-index: 1; width: 20px; height: 20px; background: var(--plate); pointer-events: none;
  -webkit-mask-image: radial-gradient(circle 20px at var(--jx) var(--jy), transparent 19.5px, #000 20px);
          mask-image: radial-gradient(circle 20px at var(--jx) var(--jy), transparent 19.5px, #000 20px);
}
.node { position: absolute; z-index: 2; }
/* corner tile, top-left of every numbered section: 44px circle -> 76 by 76 */
.cut-num { left: -8px; top: -8px; width: 76px; height: 76px; border-radius: 8px 8px 34px 8px; }
/* corner cut, top-right of a scene: the 44px eye */
.cut-eye { right: -8px; top: -8px; width: 76px; height: 76px; border-radius: 8px 8px 8px 34px; }
/* corner cut, bottom-left of a scene: the product pill, width --pw, 52 tall -> pw+32 by 84 */
.scene { --pw: 270px; }
.cut-pill { left: -8px; bottom: -8px; width: calc(var(--pw) + 32px); height: 84px; border-radius: 8px 38px 8px 8px; }
.jn.pa { left: 0; bottom: 76px; --jx: 100%; --jy: 0; }
.jn.pb { left: calc(var(--pw) + 24px); bottom: 0; --jx: 100%; --jy: 0; }
/* corner cut, bottom-right of the rain photo: 44px circle */
.cut-br { right: -8px; bottom: -8px; width: 76px; height: 76px; border-radius: 34px 8px 8px 8px; }
@media (max-width: 59.99rem) {
  .cut:not(.cut-eye):not(.cut-pill), .jn:not(.pa):not(.pb):not(.eye-jn) { display: none; }
}

/* ══ TYPE ══ */
.kicker { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-h); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.kicker::before { content: ''; width: 6px; height: 6px; border-radius: 1.5px; background: var(--red); }
.slate .kicker { color: var(--eyebrow-b); }
.h2 { margin: 0; font-family: var(--font-h); font-weight: 800; font-size: clamp(1.6rem, 0.9rem + 1.9vw, 2.6rem); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.sub { margin: 0.8rem 0 0; max-width: 52ch; font-size: 0.975rem; line-height: 1.6; color: var(--mute); }
.slate .sub { color: var(--mute-b); }
/* Key phrase in body copy: full-ink weight on a low marker swash, so skimmers land on it */
.hl {
  font-weight: 700; color: var(--ink); text-decoration: none;
  background: linear-gradient(transparent 64%, rgba(231, 0, 0, 0.18) 64%, rgba(231, 0, 0, 0.18) 96%, transparent 96%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 1px;
}
.slate .hl, .hero .hl { color: #fff; background: linear-gradient(transparent 64%, rgba(231, 0, 0, 0.5) 64%, rgba(231, 0, 0, 0.5) 96%, transparent 96%); }

/* ══ NUMBERED SECTIONS ══ */
.num {
  left: 12px; top: 12px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-content: center; background: var(--block); color: var(--ink);
  font-family: var(--font-h); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.02em;
}
.num-kicker { position: absolute; left: 88px; top: 27px; }
.has-num { padding: 96px clamp(22px, 3vw, 44px) clamp(24px, 3vw, 40px); }
.photo.has-num { padding: 0; }
@media (max-width: 59.99rem) {
  .has-num { padding-top: 22px; }
  .num { position: relative; left: auto; top: auto; margin-bottom: 10px; background: var(--ink); color: #fff; }
  .slate .num { background: #fff; color: var(--slate); }
  .photo .num { position: absolute; left: 12px; top: 12px; background: #fff; color: var(--ink); }
  .num-kicker { position: static; margin-bottom: 8px; }
}

/* ══ 01 FIND ══ */
@media (min-width: 60rem) { .find-row { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.group-label { margin: 1.4rem 0 0.6rem; font-family: var(--font-h); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--eyebrow-b); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.3); background: transparent; color: #fff;
  font-size: 0.86rem; font-weight: 600; transition: background-color 0.18s, color 0.18s, border-color 0.18s, transform 0.18s var(--ease);
}
.chip:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.6); }
.chip:active { transform: scale(0.97); }
.chip[aria-pressed='true'] { background: #fff; color: var(--slate); border-color: #fff; }
.chip[aria-pressed='true']::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.chip-other { border-style: dashed; }

.result { display: grid; gap: 14px; align-content: start; padding: clamp(18px, 2.4vw, 30px); }
.res-top { display: grid; gap: 12px; min-width: 0; }
.res-summary { min-width: 0; }
.res-gallery { min-width: 0; }
.res-img { position: relative; display: grid; place-items: center; height: clamp(190px, 25vw, 300px); padding: 10px 42px; border-radius: 14px; background: #fff; overflow: hidden; }
.res-img img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(clamp(190px, 25vw, 300px) - 20px); object-fit: contain; transition: opacity 0.25s, transform 0.4s var(--ease); }
.res-img.is-swapping img { opacity: 0; transform: scale(0.94); }
.res-gallery-nav { position: absolute; z-index: 2; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; transform: translateY(-50%); border: 1px solid rgba(49,52,64,.14); border-radius: 50%; background: rgba(255,255,255,.94); color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.1); }
.res-gallery-nav:hover:not(:disabled) { background: var(--ink); color: #fff; }
.res-gallery-nav:disabled { opacity: .35; cursor: default; }
.res-gallery-prev { left: 12px; }
.res-gallery-next { right: 12px; }
.res-gallery-count { position: absolute; right: 12px; bottom: 10px; padding: 4px 8px; border-radius: 999px; background: rgba(49,52,64,.76); color: #fff; font-size: .68rem; font-variant-numeric: tabular-nums; }
.res-gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 9px 2px 2px; scrollbar-width: thin; overscroll-behavior-inline: contain; }
.res-gallery-thumb { flex: 0 0 64px; width: 64px; height: 58px; padding: 3px; border: 1px solid var(--hair); border-radius: 9px; background: #fff; cursor: pointer; }
.res-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.res-gallery-thumb[aria-pressed='true'] { border: 2px solid var(--red); box-shadow: 0 0 0 2px rgba(230,0,0,.1); }
.res-gallery-thumb:focus-visible, .res-gallery-nav:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
/* Corner ticks on the product photo: a spec-sheet frame */
.res-img::before, .res-img::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid var(--slate); opacity: 0.35; }
.res-img::before { left: 8px; top: 8px; border-right: 0; border-bottom: 0; border-top-left-radius: 4px; }
.res-img::after { right: 8px; bottom: 8px; border-left: 0; border-top: 0; border-bottom-right-radius: 4px; }
.res-sku { margin: 0.35rem 0 0; font-family: var(--font-h); font-size: 1.55rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }
.res-name { margin: 0.35rem 0 0; font-size: 0.86rem; line-height: 1.45; color: var(--mute); }
.result.is-new .res-sku, .result.is-new .res-name, .result.is-new .res-meta, .result.is-new .res-quick { animation: fadeUp 0.45s var(--ease); }
.res-meta { margin: 0; padding: 4px 16px; border-radius: 14px; background: #fff; }
.res-meta div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--hair); }
.res-meta div:last-child { border-bottom: 0; }
.res-meta dt { color: var(--mute); font-size: 0.86rem; }
.res-meta dd { margin: 0; text-align: right; font-weight: 600; font-size: 0.86rem; }
.res-meta dd.price { color: var(--red); font-family: var(--font-h); font-weight: 800; font-size: 1.05rem; }
/* Quick facts only; full specs live on the altelix.com product page */
.res-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.res-quick:empty { display: none; }
.res-quick li { padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--hair); min-width: 0; }
.res-quick small { display: block; font-family: var(--font-h); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.res-quick b { display: block; margin-top: 2px; font-size: 0.84rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.btn-buy {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px;
  border-radius: 999px; background: var(--red); color: #fff; text-decoration: none; font-family: var(--font-h); font-weight: 700; font-size: 0.95rem;
  transition: background-color 0.2s;
}
.btn-buy:hover { background: var(--red-dark); }
.btn-buy svg { width: 18px; height: 18px; flex: none; }
.res-alt { margin: 0; font-size: 0.84rem; color: var(--mute); line-height: 1.45; }
.res-alt:empty { display: none; }
.res-alt a { color: var(--slate); font-weight: 700; }
.res-hint { margin: 0; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 0.75rem; color: var(--mute); }

/* ══ SECTIONS 02-05: one pattern. Slate head block (numbered, like 01) left, bento tiles right. ══ */
.sec { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) {
  .sec { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); margin-top: 14px; }
  .sec::before { content: ''; grid-column: 1 / -1; height: 1px; margin: -14px 8px 2px; background: rgba(255, 255, 255, 0.07); }
}
.sec-head { display: flex; flex-direction: column; gap: 0; }
.sec-head .h2 { max-width: 16ch; }
.sec-facts { display: grid; gap: 8px; margin: auto 0 0; padding: 1.6rem 0 0; list-style: none; }
.sec-facts li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); }
.sec-facts b { font-family: var(--font-h); font-size: 0.86rem; font-weight: 800; color: #fff; white-space: nowrap; }
.sec-facts span { font-size: 0.8rem; color: var(--mute-b); text-align: right; }
.sec-link {
  align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px;
  border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.5); color: #fff; text-decoration: none;
  font-family: var(--font-h); font-weight: 700; font-size: 0.88rem; transition: background-color 0.2s, color 0.2s;
}
.sec-head .sub + .sec-link { margin-top: auto; }
.sec-facts + .sec-link { margin-top: 16px; }
.sec-head .sub { margin-bottom: 1.6rem; }
.sec-link:hover { background: #fff; color: var(--slate); }
.tiles { display: grid; gap: var(--gut); margin: 0; padding: 0; list-style: none; min-width: 0; }

/* ── 02 scenes: one stage, one scene at a time (like the hero), thumbnails below ── */
.tiles-stage { grid-template-rows: minmax(0, 1fr) auto; }
.stage { --pw: 270px; min-height: 0; aspect-ratio: 16 / 9; background: #1a1c22; overflow: visible; }
@media (min-width: 60rem) { .stage { aspect-ratio: auto; min-height: 440px; } }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; }
.slide[data-active='true'] { opacity: 1; z-index: 1; }
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(1.02); }
.slide[data-active='true'] img { animation: kb 9s linear forwards; }
.stage.is-open .slide img, .stage.is-held .slide img { animation-play-state: paused; }
.slide .open { opacity: 0; transition: opacity 0.5s ease; }
.stage.is-open .slide[data-active='true'] .open { opacity: 1; }
.tag-img {
  position: absolute; z-index: 2; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.94);
  font-family: var(--font-h); font-size: 0.72rem; font-weight: 700; color: var(--ink); pointer-events: none;
}
.tag-img i { width: 6px; height: 6px; border-radius: 50%; background: var(--slate); }
.eye {
  right: 12px; top: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-content: center; background: var(--block); color: var(--ink);
  transition: transform 0.2s var(--ease), background-color 0.2s, color 0.2s, opacity 0.2s;
}
.eye svg { width: 19px; height: 19px; }
.eye:hover { transform: scale(1.07); background: #fff; }
.eye[aria-pressed='true'] { background: var(--red); color: #fff; }
.eye[aria-disabled='true'] { opacity: 0.4; cursor: default; transform: none; }
.eye-hint {
  position: absolute; z-index: 2; right: 80px; top: 19px; height: 30px; display: inline-flex; align-items: center;
  padding: 0 12px; border: 0; border-radius: 999px; background: rgba(17, 19, 24, 0.72); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--font-h); font-size: 0.72rem; font-weight: 700;
  animation: pulse 2.6s ease-in-out infinite;
}
.eye-hint[hidden] { display: none; }
.stage.is-open .eye-hint { animation: none; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(231, 0, 0, 0); } 50% { box-shadow: 0 0 0 5px rgba(231, 0, 0, 0.35); } }
.prod {
  left: 12px; bottom: 12px; width: var(--pw); height: 52px; border-radius: 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 8px 0 20px;
  background: var(--block); color: var(--ink); text-decoration: none; font-family: var(--font-h); font-size: 0.82rem; font-weight: 700;
}
.prod span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod b { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-content: center; background: var(--ink); color: #fff; transition: transform 0.2s var(--ease), background-color 0.2s; }
.prod svg { width: 15px; height: 15px; }
.prod:hover b { transform: rotate(45deg); background: var(--red); }

.thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); height: 118px; }
@media (min-width: 60rem) { .thumbs { height: 132px; } }
.thumb { display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: #1a1c22; }
.thumb .fill img { object-fit: cover; transition: transform 0.5s var(--ease), filter 0.3s; filter: saturate(0.7) brightness(0.8); }
.thumb:hover .fill img { transform: scale(1.05); }
.thumb[aria-selected='true'] .fill img { filter: none; }
.thumb-label {
  position: absolute; z-index: 1; left: 10px; bottom: 16px; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.94);
  font-family: var(--font-h); font-size: 0.72rem; font-weight: 700; color: var(--ink); white-space: nowrap;
}
.thumb-label b { display: grid; place-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(27, 29, 36, 0.1); font-size: 0.62rem; }
.thumb[aria-selected='true'] .thumb-label b { background: var(--red); color: #fff; }
/* Progress along the bottom of the active thumbnail, same timing as the stage */
.thumb-bar { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 7px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.28); overflow: hidden; }
.thumb-bar::after { content: ''; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.thumb.is-on .thumb-bar::after { animation: fill var(--stage-dur, 6000ms) linear forwards; }
.tiles-stage.is-held .thumb.is-on .thumb-bar::after { animation-play-state: paused; }
.tiles-stage.is-manual .thumb-bar { display: none; }
@media (max-width: 59.99rem) and (min-width: 40rem) { .thumb-label { font-size: 0.66rem; } }
@media (max-width: 39.99rem) {
  .res-img { height: 210px; padding-inline: 38px; }
  .res-img img { max-height: 190px; }
  .res-gallery-thumb { flex-basis: 58px; width: 58px; height: 54px; }
  .stage { aspect-ratio: 4 / 3; --pw: min(270px, calc(100vw - 2 * var(--page) - 64px)); }
  .thumbs { height: 84px; }
  .thumb-label { font-size: 0; gap: 0; padding: 4px; left: 6px; bottom: 12px; }
}

/* ── 03 inside: the rain photo left, the four features as a vertical drop-down list right ── */
.tiles-inside { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .tiles-inside { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.photo { position: relative; min-height: 440px; background: #1a1c22; }
.photo .fill img { object-position: 50% 45%; }
.circle-link {
  right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-content: center; background: var(--block); color: var(--ink); transition: transform 0.2s var(--ease);
}
.circle-link svg { width: 18px; height: 18px; }
.circle-link:hover { transform: rotate(45deg); }
.feat-list { display: grid; gap: var(--gut); align-content: start; }
.feat summary {
  display: grid; grid-template-columns: 42px minmax(84px, auto) minmax(0, 1fr) 32px; align-items: center; gap: 14px;
  padding: 16px 18px 16px 16px; cursor: pointer; list-style: none;
}
.feat summary::-webkit-details-marker { display: none; }
.feat-ico { width: 42px; height: 42px; border-radius: 50%; display: grid; place-content: center; background: var(--ink); color: #fff; transition: background-color 0.2s; }
.feat-ico svg { width: 19px; height: 19px; }
.feat[open] .feat-ico { background: var(--red); }
.feat-stat { font-family: var(--font-h); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.03em; color: var(--slate); white-space: nowrap; }
.feat h3 { margin: 0; font-family: var(--font-h); font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--mute); }
.feat[open] h3 { color: var(--ink); }
.feat summary i { position: relative; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1px solid var(--hair); }
.feat summary i::before, .feat summary i::after { content: ''; position: absolute; left: 9px; top: 14px; width: 12px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.25s var(--ease); }
.feat summary i::after { transform: rotate(90deg); }
.feat[open] summary i::after { transform: rotate(0); }
.feat p { margin: 0; padding: 0 22px 20px 72px; font-size: 0.93rem; line-height: 1.6; color: var(--mute); }
.feat[open] p { animation: fadeUp 0.35s var(--ease); }
@media (max-width: 29.99rem) {
  .feat summary { grid-template-columns: 42px minmax(0, 1fr) 32px; row-gap: 2px; }
  .feat-stat { grid-column: 2; grid-row: 1; font-size: 1.05rem; }
  .feat h3 { grid-column: 2; grid-row: 2; }
  .feat summary i { grid-column: 3; grid-row: 1 / span 2; }
  .feat p { padding-left: 18px; }
}

/* ── 04 install: three step tiles in a row ── */
.tiles-steps { grid-template-columns: minmax(0, 1fr); counter-reset: none; }
@media (min-width: 40rem) { .tiles-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step { position: relative; display: flex; flex-direction: column; padding: clamp(18px, 2vw, 26px); overflow: hidden; min-height: 240px; }
.step-n { position: absolute; right: clamp(14px, 1.6vw, 22px); top: clamp(8px, 1vw, 14px); font-family: var(--font-h); font-weight: 800; font-size: clamp(3.2rem, 5vw, 4.6rem); line-height: 1; letter-spacing: -0.05em; color: rgba(49, 52, 64, 0.1); }
.step .feat-ico { background: var(--slate); }
.step-img { display: block; flex: 1 1 auto; min-height: 180px; margin-top: 1rem; border-radius: 16px; overflow: hidden; background: #e9e8e4; }
@media (max-width: 39.99rem) { .step-img { flex: none; aspect-ratio: 4 / 3; } }
.step-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.step-img img[src$="step-mount-latch-glossy-smooth.png"] { object-position: 62% 30%; }
.step-img img[src$="step-lock-latches-final.png"] { object-position: 50% 50%; }
.step-img img[src$="step-plug-sequence-final.jpg"] { object-fit: contain; background: #fff; }
.step h3 { margin: auto 0 0.35rem; padding-top: 1.4rem; font-family: var(--font-h); font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; }
.step p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--mute); }
@media (max-width: 39.99rem) { .step { min-height: 0; } .step h3 { margin-top: 0; } }

/* ── 05 FAQ: one tile per question ── */
.tiles-faq { align-content: start; }
.qa summary { display: flex; align-items: center; gap: 14px; padding: 20px 20px 20px 18px; cursor: pointer; list-style: none; font-family: var(--font-h); font-weight: 700; font-size: 1rem; }
.qa summary::-webkit-details-marker { display: none; }
.qa-n { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-content: center; background: var(--slate); color: #fff; font-size: 0.78rem; font-weight: 800; }
.qa summary i { position: relative; flex: none; width: 32px; height: 32px; margin-left: auto; border-radius: 50%; background: #fff; border: 1px solid var(--hair); }
.qa summary i::before, .qa summary i::after { content: ''; position: absolute; left: 9px; top: 14px; width: 12px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.25s var(--ease); }
.qa summary i::after { transform: rotate(90deg); }
.qa[open] summary i::after { transform: rotate(0); }
.qa[open] .qa-n { background: var(--red); }
.qa p { margin: 0; padding: 0 22px 20px 72px; font-size: 0.93rem; line-height: 1.6; color: var(--mute); }
.qa a { color: var(--slate); font-weight: 700; }
@media (max-width: 39.99rem) { .qa p { padding-left: 18px; } }

/* ══ LAST ASK + CONTACT ══ */
@media (min-width: 60rem) { .end-row { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.ask { display: grid; align-content: center; gap: 0.9rem; padding: clamp(24px, 3.4vw, 52px); }
.ask .h2 { max-width: 18ch; }
.ask .sub { margin-top: 0; }
.ask-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 0.6rem; }
.btn-line { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.6); color: #fff; text-decoration: none; font-family: var(--font-h); font-weight: 700; font-size: 0.95rem; transition: background-color 0.2s, color 0.2s; }
.btn-line:hover { background: #fff; color: var(--slate); }
.contact { display: grid; gap: 14px; align-content: center; padding: clamp(22px, 2.6vw, 36px); font-size: 0.88rem; color: var(--mute); }
.contact-logo { width: auto; height: 34px; }
.contact address { font-style: normal; line-height: 1.7; }
.contact a { color: var(--ink); text-decoration: none; font-weight: 600; }
.contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-shop { font-weight: 800 !important; }
.legal-links { display: flex; flex-wrap: wrap; gap: 12px 18px; border-top: 1px solid var(--hair); padding-top: 12px; }
.legal-links button { padding: 0; border: 0; background: none; color: var(--ink); font: 600 .82rem var(--font-b); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fine { margin: 0; padding: 14px 22px; font-size: 0.74rem; line-height: 1.6; color: var(--mute); }

/* Shared phone picker, recoloured for slate */
.mp-blue { --mp-seg-on-fg: var(--slate); --mp-ring: var(--red); }

/* ══ REVEAL ══ armed only when JS is alive */
.js .reveal { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .hero .eyebrow, .js .hero-sub, .js .hero-cta, .js .hero-tags, .js .hud, .js .hero h1 .w { opacity: 1; transform: none; animation: none; }
  .hs { transition-duration: 0.01ms; }
  .hs.kb img, .hud-bar.is-on::after, .hero-scroll span::after, .eye-hint { animation: none; }
  .slide, .slide .open, .thumb .fill img, .chip, .eye, .prod b, .res-img img { transition: none; }
  .slide[data-active='true'] img, .thumb.is-on .thumb-bar::after { animation: none; }
}

/* Phone hero: the frame is portrait, so each slide centres its own box (--mpos) and zooms from the
   bottom edge, which lifts the box above the headline. !important beats the per-slide inline vars. */
@media (max-width: 47.99rem) {
  .hs { --z: 1.2 !important; --org: 50% 100% !important; }
  .hs[data-title='Poolside patio'] { --z: 1 !important; }
  .hs img { object-position: var(--mpos, var(--pos, 50% 50%)); }
}