/* =====================================================================
   PLH USA — Design System
   Tokens live here. NEO = pop identity below.
   SLIM will reuse the SAME components with an alternate token set
   (body[data-theme="slim"]) — elegant, quieter, less saturated.
   ===================================================================== */

:root {
  /* --- Brand / NEO palette (pop) --- */
  --c-paper:      #FFFFFF;   /* layout background */
  --c-ink:        #14161A;   /* near-black text */
  --c-ink-soft:   #5A5E66;
  --c-blue:       #1C3AD8;   /* royal blue */
  --c-red:        #E4322B;   /* PLH red */
  --c-yellow:     #F2B21A;
  --c-copper:     #C36B3E;
  --c-line:       rgba(20,22,26,.14);
  /* headline accent gradient: red → orange → yellow → sky → navy */
  --accent-grad: linear-gradient(100deg, #A82D2D 0%, #EE5A24 27%, #F6C500 52%, #58A6C9 77%, #2B2F6F 100%);

  /* --- Typographic scale (fluid) --- */
  --f-sans: -apple-system, "Helvetica Neue", "Inter", Arial, sans-serif;
  --fs-eyebrow: clamp(.72rem, .68rem + .2vw, .82rem);
  --fs-body:    clamp(1rem, .95rem + .3vw, 1.18rem);
  --fs-h3:      clamp(1.6rem, 1.2rem + 1.8vw, 2.8rem);
  --fs-h2:      clamp(2.2rem, 1.4rem + 3.4vw, 4.4rem);
  --fs-h1:      clamp(2.8rem, 1.6rem + 5.2vw, 6.5rem);
  --fs-display: clamp(3.5rem, 2rem + 8vw, 9rem);

  /* --- Space / rhythm --- */
  --sp-section: clamp(3.5rem, 2.5rem + 4vw, 7rem);
  --gutter:     clamp(1.25rem, .8rem + 2.5vw, 4rem);
  --maxw:       1320px;
  --radius:     18px;
  --gap:        clamp(1rem, 2vw, 2rem);
  /* left/right margin of the centered content box (matches maxw container) */
  --edge:       calc(max(0px, (100vw - var(--maxw)) / 2) + var(--gutter));

  /* --- Motion tokens (consumed by Layer 2 / reduced-motion aware) --- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur:      .7s;
}

/* SLIM override sketch — kept here so the system is visibly one thing.
body[data-theme="slim"] {
  --c-paper:#EFEDE9; --c-blue:#2A2E38; --c-red:#8A2B25; --c-yellow:#C9A24B;
  --fs-h1: clamp(2.4rem, 1.4rem + 4vw, 5rem);
} */

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* NB: no `scroll-behavior: smooth` — it fights Lenis (double smoothing → lag/jump).
   Lenis owns smoothing when JS is on; native jump is fine as a no-JS fallback. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }   /* kill any stray sideways pan; clip (not hidden) keeps position:sticky working */
body {
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  /* theme tokens — flipped per active section (see [data-section-theme]) */
  --bg: #fff; --fg: var(--c-ink); --fg-soft: var(--c-ink-soft); --line: rgba(20,22,26,.14);
  color: var(--fg);
  background-color: var(--bg);
  transition: background-color .6s ease, color .6s ease;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-dark { --bg: #000; --fg: #fff; --fg-soft: rgba(255,255,255,.68); --line: rgba(255,255,255,.16); }
img, video { display: block; max-width: 100%; height: auto; }
/* headline emphasis = same colour as the heading (mono, theme-aware) */
em { font-style: normal; color: inherit; }
/* …except the hero's "Infinite possibilities." which keeps the gradient */
.hero__title em {
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
h1, h2, h3 { line-height: 1.02; letter-spacing: -.02em; font-weight: 800; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--c-ink); color: #fff; padding: .6rem 1rem;
}
.skip-link:focus { left: 0; }

/* media placeholders (stand-ins for real photo/video assets) */
.media-placeholder {
  display: grid; place-items: center; text-align: center;
  aspect-ratio: 16 / 10; border-radius: var(--radius);
  font-size: var(--fs-eyebrow); letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--c-ink);
}
.media-placeholder--product { background: linear-gradient(115deg, var(--c-blue), #7A2BD8); }
.media-placeholder--gold    { background: var(--c-blue); }
.media-placeholder--red      { background: var(--c-red); }
.media-placeholder--blue     { background: var(--c-blue); }
.media-placeholder--steel    { background: linear-gradient(160deg,#9aa0a8,#4c5158); }
.media-placeholder--copper   { background: linear-gradient(160deg,#d78a5a,var(--c-copper)); }
.media-placeholder--neutral  { background: linear-gradient(160deg,#7c8189,#44484e); }  /* uniform neutral until photos land */

/* ---------------------------------------------------------------- header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem var(--gutter);
  /* transparent at the top of the page (a hero video/image will sit behind it) */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: transform .3s var(--ease-out), background .4s ease, border-color .4s ease, padding .4s ease;
  will-change: transform;
}
/* solid background once scrolled away from the top (applied by JS) — slimmer bar */
.site-header.is-solid { background: var(--bg); border-bottom-color: var(--line); padding-top: 8px; padding-bottom: 8px; }
/* slides up out of view when scrolling down (applied by JS) */
.site-header.is-hidden { transform: translateY(-100%); }
.brand { font-weight: 900; letter-spacing: .04em; color: var(--c-red); text-decoration: none; font-size: 1.15rem; }
.site-header .brand { display: inline-flex; align-items: center; }
/* logo: white while the header is transparent (top), ink once it goes solid */
.brand-logo { height: 26px; width: auto; display: block; fill: #fff; transition: fill .4s ease; }
.site-header.is-solid .brand-logo { fill: var(--fg); }
.site-nav { display: flex; gap: clamp(.8rem, 2vw, 2rem); align-items: center; }
/* default = transparent header at top: white nav + white outline button */
.site-nav a { color: #fff; text-decoration: none; font-size: .92rem; transition: color .3s ease; }
.site-nav a:hover { color: rgba(255,255,255,.7); }
/* NB: use a.nav-cta so these beat the `.site-nav a` colour rules (which have an element in them) */
.site-nav a.nav-cta {
  padding: .55rem 1.05rem; border: none; border-radius: 999px;
  background: #fff; color: #14161A;   /* transparent header: white pill, dark text */
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.site-nav a.nav-cta:hover { background: var(--c-red); color: #fff; }
/* solid header (scrolled): dark nav on the paper background */
.site-header.is-solid .site-nav a { color: var(--fg); }
.site-header.is-solid .site-nav a:hover { color: var(--c-red); }
.site-header.is-solid .site-nav a.nav-cta { background: #14161A; color: #fff; }              /* light page: dark pill, white text */
body.is-dark .site-header.is-solid .site-nav a.nav-cta { background: #fff; color: #14161A; } /* dark page: white pill, dark text */
.site-header.is-solid .site-nav a.nav-cta:hover,
body.is-dark .site-header.is-solid .site-nav a.nav-cta:hover { background: var(--c-red); color: #fff; }
@media (max-width: 720px) { .site-nav a:not(.nav-cta) { display: none; } }

/* ---------------------------------------------------------------- layout */
main { display: block; }
section { padding: var(--sp-section) var(--gutter); max-width: var(--maxw); margin-inline: auto; }
.section-title { font-size: var(--fs-h2); line-height: 1; max-width: 16ch; margin-bottom: 1rem; }

/* ---------------------------------------------------------------- statement (Apple-style centred) */
.statement { max-width: var(--maxw); margin-inline: auto; padding: clamp(4.5rem, 13vh, 9rem) var(--gutter); text-align: center; }
/* eyebrow, title and body all share the same colour — ink (black) */
.statement__eyebrow, .statement__title, .statement__text { color: var(--c-ink); }
.statement__eyebrow { font-size: var(--fs-eyebrow); letter-spacing: .22em; text-transform: uppercase; font-weight: 700; margin: 0; }
.statement__title { font-size: clamp(2.6rem, 1rem + 4.6vw, 5.6rem); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; max-width: 20ch; margin: clamp(.5rem, 1.4vh, 1rem) auto 0; }
/* rotating last word (masked one-line slot; JS cycles it) */
.rotator { display: inline-block; overflow: hidden; height: 1.05em; line-height: 1.05; vertical-align: bottom; }
.rotator__list { display: flex; flex-direction: column; }
.rotator__list > span { display: block; height: 1.05em; line-height: 1.05; white-space: nowrap; }
.statement__text { font-size: clamp(1rem, .95rem + .35vw, 1.25rem); line-height: 1.5; max-width: 58ch; margin: clamp(1.2rem, 3.5vh, 2.2rem) auto 0; }
/* 90vw photo (centred on the viewport) with a scroll-driven mask reveal */
.statement__media { width: 90vw; max-width: 90vw; margin-left: 50%; transform: translateX(-50%);
  margin-top: clamp(2.5rem, 6vh, 5rem); margin-bottom: 0;
  clip-path: inset(12% 14% round 18px); will-change: clip-path; }   /* 18px = --radius, matches cards/gallery */
.statement__media img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; will-change: transform; }
/* eyebrows: mono, inherit the surrounding text colour (no red) */
.eyebrow { font-size: var(--fs-eyebrow); letter-spacing: .22em; text-transform: uppercase; color: inherit; font-weight: 700; }

/* ---------------------------------------------------------------- hero */
/* Native CSS sticky pinning: the section is a tall track, the inner sticks.
   No ScrollTrigger pin (no pin-spacer / position:fixed toggle → no snap). */
.hero { max-width: none; padding: 0; height: 450vh; }  /* extra room so each of the 3 states can dwell */
.hero__sticky {
  height: 100vh; position: sticky; top: 0; overflow: hidden;
  display: flex; align-items: center;
  padding: 6rem var(--edge) 3rem;
}
/* Full-bleed background layer. Blue stays as a fallback; clips to a boxed card on scroll-out. */
.hero__bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background-color: #14161A;   /* fallback while the video loads (dark, matches the footage + Safari chrome) */
  clip-path: inset(0% round 0px);
}
.hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* "neo." signature revealed at the end of the hero, centred over the boxed card */
.hero__neo { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; }
.hero__neo .neo-svg { width: clamp(190px, 24vw, 400px); height: auto; fill: #fff; }

/* States: stacked in no-JS, overlapped + cross-faded when enhanced. White over the media. */
.hero__states { position: relative; z-index: 1; width: min(42rem, 100%); color: #fff; }
.hero__state + .hero__state { margin-top: 2.5rem; }
/* enhanced: all states overlap in one grid cell (container sizes to the tallest) for the cross-fade */
.is-enhanced .hero__states { display: grid; }
.is-enhanced .hero__state {
  grid-area: 1 / 1; margin: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.hero__title { font-size: var(--fs-h1); margin: .3em 0 .35em; }
.line-mask { display: block; overflow: hidden; padding-bottom: .04em; }
.line { display: block; }
.hero__lede { font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem); color: rgba(255,255,255,.85); max-width: 32ch; }
.hero__big { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.hero__quote { font-size: clamp(2.7rem, 1.5rem + 4.8vw, 4.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.06; max-width: 16ch; }
.hero__quote cite { display: block; font-style: normal; font-weight: 400; font-size: .32em; letter-spacing: 0; color: rgba(255,255,255,.7); margin-top: 1.4rem; }

/* Product mock (CSS stand-in for hero video/photo) */
.hero__media { justify-self: center; }
.hero__product { position: relative; width: min(44vh, 380px); aspect-ratio: 1; display: grid; place-items: center; }
.product__ring {
  position: absolute; inset: -2%; border-radius: 50%;
  background: conic-gradient(from 210deg, var(--c-blue), #7a2bd8, var(--c-red), var(--c-blue));
  filter: blur(26px); opacity: .8;
}
.product__disc {
  position: absolute; inset: 7%; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #f3c19b 0%, #cd784d 44%, #8a4a29 76%, #5c3018 100%);
  box-shadow: inset 0 -16px 32px rgba(0,0,0,.5), inset 0 12px 26px rgba(255,255,255,.28), 0 34px 66px rgba(0,0,0,.32);
}
.product__disc::after {
  content: ''; position: absolute; inset: 22%; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.14), transparent 62%);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.35);
}
.product__sweep { position: absolute; inset: 7%; border-radius: 50%; overflow: hidden; pointer-events: none; }
.product__sweep::after {
  content: ''; position: absolute; inset: -25%;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
  transform: translateX(-130%); animation: sweep 4.5s var(--ease-out) infinite;
}
@keyframes sweep { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(130%); } }

.hero__hint {
  position: absolute; z-index: 1; bottom: 1.5rem; right: var(--gutter); left: auto;
  color: rgba(255,255,255,.75);
}
.hero__hint svg { display: block; width: 22px; height: 22px; animation: hintbob 1.8s ease-in-out infinite; }
@keyframes hintbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

@media (max-width: 860px) {
  .hero__sticky { grid-template-columns: 1fr; }
  .hero__media { grid-row: 1; }
  .hero__states { grid-row: 2; }
}

/* ---------------------------------------------------------------- milestone */
.milestone { max-width: none; padding: 0; margin: 0; }
.milestone__pin { min-height: 100vh; display: grid; align-items: center; }
.milestone__grid {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding: var(--sp-section) var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center;
}
.milestone__value { font-size: clamp(3rem, 2rem + 6vw, 7rem); font-weight: 900; line-height: .9; margin-top: 1.6rem; }
.milestone__value .ms-unit { font-size: .26em; font-weight: 600; vertical-align: super; margin-left: .25em; letter-spacing: .04em; color: var(--c-ink-soft); }
.milestone__fn { margin-top: 1rem; font-weight: 600; letter-spacing: .01em; color: var(--c-ink-soft); font-size: clamp(1rem, .9rem + .3vw, 1.15rem); }
.milestone__stage { display: grid; place-items: center; }
.ms-svg { width: 100%; max-width: 480px; height: auto; }
.ms-svg .ms-top, .ms-svg .ms-wall, .ms-svg .ms-bottom, .ms-svg .ms-plate,
.ms-svg .ms-dim-line, .ms-svg .ms-dim-cap {
  stroke: var(--c-ink); fill: none; vector-effect: non-scaling-stroke;
}
.ms-svg .ms-top, .ms-svg .ms-wall, .ms-svg .ms-bottom { stroke-width: 1.6; }
.ms-svg .ms-plate { stroke-width: 1.2; opacity: .32; }
.ms-svg .ms-top-inner { stroke-width: 1.2; opacity: .5; }
.ms-svg .ms-dim-line, .ms-svg .ms-dim-cap { stroke-width: 1.1; opacity: .55; }
.ms-svg .ms-dim-text { fill: var(--c-ink-soft); font-family: var(--f-sans); font-size: 15px; font-weight: 600; letter-spacing: .03em; }
.ms-svg .ms-trace { stroke: var(--c-red); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
@media (max-width: 800px) {
  .milestone__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- features */
.features { display: grid; gap: clamp(2.5rem, 4vw, 4.5rem); }
.feature { display: grid; gap: clamp(1.5rem,4vw,3rem); align-items: center; }
.feature--spec, .feature--demo { grid-template-columns: 1fr 1fr; }
.feature--spec .feature__figure .media-placeholder { aspect-ratio: 1; }
.spec-value { font-size: var(--fs-display); font-weight: 900; line-height: .9; }
.spec-unit { font-size: .28em; font-weight: 600; vertical-align: super; margin-left: .3em; letter-spacing: .05em; }
.spec-label { font-size: var(--fs-h3); color: var(--c-ink-soft); }
.feature__heading { font-size: var(--fs-h3); }
.feature__intro, .feature__foot { color: var(--c-ink-soft); margin-top: .8rem; }

@media (max-width: 720px){ .feature--spec, .feature--demo { grid-template-columns: 1fr; } }

/* ------------------------------------- Choose your presence: horizontal carousel */
.cyp { max-width: none; padding: 0; margin: 0; }
.cyp__pin { padding: var(--sp-section) 0; }
.is-enhanced .cyp__pin { height: 100vh; padding: 0; overflow: hidden; display: flex; flex-direction: column; }

/* white "neo" logo shown only while the video slide is fullscreen (JS-driven) */
.cyp__neo {
  position: absolute; top: clamp(1.4rem, 3.4vh, 2.4rem); left: clamp(1.1rem, 3vw, 2.2rem);
  width: clamp(74px, 8vw, 104px); height: auto; z-index: 6;
  pointer-events: none; opacity: 0; visibility: hidden;
}
.cyp__neo path, .cyp__neo rect { fill: #fff; }

/* Fixed heading (does not translate) */
.cyp__head { max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter); }
/* In the enhanced flex-column pin, margin:auto would shrink+center the header;
   force full width and align its content to the same --edge as the slides. */
.is-enhanced .cyp__head {
  max-width: none; margin: 0; width: 100%;
  padding: clamp(1.2rem, 3vh, 2.2rem) var(--edge) clamp(.6rem, 1.4vh, 1rem);   /* trimmed → taller card */
}
.cyp__lead { font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem); color: var(--c-ink); margin-top: .55rem; margin-bottom: clamp(.6rem, 2.5vw, 1.2rem); max-width: 52ch; }
.is-enhanced .cyp__lead { margin-bottom: clamp(1rem, 2.6vh, 1.9rem); }   /* breathing room before the cards */

/* Track: vertical stack in no-JS, horizontal row when enhanced.
   Left/right padding = --edge so the first slide aligns with the heading (boxed). */
.cyp__track { display: flex; flex-direction: column; gap: var(--gutter); padding: var(--gutter); }
/* Track: first card aligns to the heading (--edge). Cards are wide, so only a
   sliver of the next shows. */
.is-enhanced .cyp__track {
  flex-direction: row; flex: 1; min-height: 0; align-items: stretch;
  gap: var(--gap); padding: 0 var(--edge) clamp(1.2rem, 2.6vh, 2.2rem);   /* less bottom → taller card */
  will-change: transform;
}

/* Card = full-bleed media with the content overlaid inside (bottom). */
.cyp__slide { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--c-ink); aspect-ratio: 16 / 11; }
.is-enhanced .cyp__slide { flex: 0 0 calc((100vw - var(--edge) - var(--gap)) / 1.15); aspect-ratio: auto; }
.cyp__media { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center; border-radius: 0; }
.cyp__video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.cyp__img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; display: block; }  /* keep the button + glow (lower area) when a wide card crops top/bottom */
/* wide desktop (e.g. 15" MacBook Pro): narrower cards so they don't read as a thin wide band */
@media (min-width: 1024px) {
  .is-enhanced .cyp__slide { flex-basis: calc((100vw - var(--edge) - var(--gap)) / 1.42); }
}
/* mobile: shorter card + product kept toward centre/right so the crop keeps it in frame */
@media (max-width: 700px) {
  .is-enhanced .cyp__track { align-items: center; }
  .is-enhanced .cyp__slide { flex: 0 0 84vw; aspect-ratio: 4 / 5; }
  .cyp__img { object-position: 72% center; }
  /* the big mobile cards were reading with tiny captions → scale the slide copy up */
  .cyp__title  { font-size: clamp(2rem, 1.1rem + 4.6vw, 2.6rem); }
  .cyp__note   { font-size: 1.05rem; }
  .cyp__detail { font-size: 1.05rem; }
}

/* detail line inside the video slide's caption — hidden until the slide goes fullscreen.
   Absolutely positioned (below the note) so it does NOT push the caption up in the normal card. */
.cyp__detail { overflow: hidden; height: 0; margin-top: 0; opacity: 0;
  max-width: 44ch; color: rgba(255,255,255,.9); font-size: clamp(1rem, .9rem + .4vw, 1.2rem); line-height: 1.45; }
/* the video caption ends up over the raw video when fullscreen → keep it legible */
.cyp__body--video { text-shadow: 0 2px 22px rgba(0,0,0,.45); will-change: transform; }
.cyp__slide::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(15,16,20,.62), rgba(15,16,20,0) 52%); }
.cyp__media--finishes, .cyp__media--icons { background: var(--c-ink); }
.cyp__media--finishes .swatches { margin: 0; }
.cyp__media--finishes .swatches li { color: #fff; }
.cyp__media--icons .icon-grid { max-width: 300px; width: 100%; }

.cyp__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(1.25rem, 3vw, 2.4rem); color: #fff; }
.cyp__title { font-size: var(--fs-h3); color: #fff; }
.cyp__spec { color: #fff; font-weight: 800; }
.cyp__note { color: rgba(255,255,255,.82); margin-top: .4rem; max-width: 42ch; }

.swatches { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem; font-size: .95rem; }
.swatches li { display: grid; justify-items: center; gap: .5rem; }
.swatch { width: 54px; height: 54px; border-radius: 50%; box-shadow: inset 0 -6px 12px rgba(0,0,0,.25); }
.swatch--black { background: radial-gradient(circle at 35% 30%, #4a4a4a, #101010); }
.swatch--silver{ background: radial-gradient(circle at 35% 30%, #f2f2f2, #9aa0a6); }
.swatch--copper{ background: radial-gradient(circle at 35% 30%, #e6a074, #b45f34); }
.swatch--brass { background: radial-gradient(circle at 35% 30%, #f0d488, #b8942f); }

.feature--custom { grid-template-columns: 1.2fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.icon-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; }
.icon-grid li { aspect-ratio: 1; display: grid; place-items: center; background: var(--c-blue); color: #fff; border-radius: 50%; font-size: 1.3rem; }
@media (max-width: 720px){ .feature--custom { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- faq */
.faq__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: start; max-width: var(--maxw); margin-inline: auto; }
/* left column stays in view while the (longer) list of questions scrolls past */
.faq__intro { position: sticky; top: clamp(1.5rem, 8vh, 5rem); align-self: start; }
.faq__intro .section-title { max-width: 100%; }   /* never overflow into the questions column */
/* tablet & down: drop the sticky (it made the two columns overlap while scrolling) */
@media (max-width: 1100px) { .faq__intro { position: static; } }
/* full-width row of partner logos, below the columns (outside the sticky inner) */
.faq__logos { max-width: var(--maxw); margin: clamp(4.5rem, 13vh, 8rem) auto 0; display: none; }   /* TEMP: partner logos hidden on request */
/* one row, evenly distributed, solid black, big */
.ecosystem { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: nowrap;
  align-items: center; justify-content: space-between; gap: clamp(1.2rem, 3.4vw, 3.4rem); width: 100%; }
.ecosystem li { position: relative; display: flex; align-items: center; }
.ecosystem img { height: clamp(24px, 2.8vw, 36px); width: auto; display: block; object-fit: contain; }
/* optical balance: KNX is a stacked/square mark, RTI a small monogram */
.ecosystem img[alt="KNX"] { height: clamp(32px, 3.8vw, 48px); }
.ecosystem img[alt="RTI"] { height: clamp(20px, 2.4vw, 30px); }
@media (max-width: 680px){ .ecosystem { flex-wrap: wrap; justify-content: flex-start; gap: 1.2rem 1.8rem; } }
.faq__tag { margin-top: 1.2rem; color: var(--c-ink-soft); font-size: .9rem; }
.faq__list { display: grid; gap: 0; }
.qa { border-top: 1px solid var(--c-line); }
.qa:last-child { border-bottom: 1px solid var(--c-line); }
.qa summary { cursor: pointer; list-style: none; padding: 1.2rem 0; font-weight: 700; font-size: 1.1rem; display: flex; justify-content: space-between; gap: 1rem; }
.qa summary::-webkit-details-marker { display: none; }
/* black chevron: points DOWN when closed, flips UP when open (small springy animation) */
.qa summary { align-items: center; }
.qa summary::after {
  content: ''; flex: 0 0 auto; width: 11px; height: 11px; margin: -3px 3px 0 0;
  border-right: 2.5px solid var(--c-ink); border-bottom: 2.5px solid var(--c-ink);
  transform: rotate(45deg); transition: transform .2s var(--ease-out);
}
.qa[open] summary::after { transform: translateY(4px) rotate(-135deg); }
.qa__body { padding-bottom: 1.2rem; color: var(--c-ink-soft); max-width: 60ch; }
@media (max-width: 800px){ .faq__inner { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- reveal (colour card → neo dot → CTA) */
.reveal { max-width: none; padding: 0; margin: 0; height: 600vh; background: #fff; }   /* length for the colour cycle; white shows in the box margins at the end */
/* native CSS sticky (no ScrollTrigger pin); opaque + own light palette so the
   dark gallery behind never bleeds through when the card is masked to a dot.
   bg/colour are scroll-scrubbed by GSAP (colour cycle) → NO CSS transition here.
   clip-path (starts full-bleed) is animated to a rounded box in the last instance. */
.reveal__pin { height: 100vh; position: sticky; top: 0; overflow: hidden; background: #fff; color: var(--c-ink); }
/* NB: no base clip-path here — clip-path would clip the fixed .reveal__card during the milestone
   rise (parallax), hiding it. The box clip is applied ONLY at the end via GSAP (immediateRender:false). */

/* colour flood: a big circle centred on the "o" (JS sets left; scaled 0→1 by GSAP) so each new
   colour bursts out from the logo's point. Above the pin bg, behind the wordmark/text. */
.reveal__flood { position: absolute; top: 40%; left: 50%; width: 210vmax; height: 210vmax;
  border-radius: 50%; z-index: 0; pointer-events: none; }

/* colour video card: fixed so it can rise from the bottom OVER the milestone,
   then masks down to a central dot. Starts below the viewport (translated). */
.reveal__card { position: fixed; inset: 0; z-index: 45; overflow: hidden; clip-path: circle(150% at 50% 40%); }
.reveal__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* the hole punched in the dot's centre → turns the solid disc into the logo's ring "o".
   A perfect circle acting as a MASK: it shows the stage behind (white now, black once the
   dark gallery arrives), so the counter is never a painted disc. Scaled 0→1 by JS. */
.reveal__ohole { position: absolute; left: 50%; top: 40%; width: 60px; height: 60px; margin: -30px 0 0 -30px;
  border-radius: 50%; background: #fff; z-index: 2; transform: scale(0); }
/* covers the video once the "o" is formed so the ring is solid ink (like n & e); follows the pin colour */
.reveal__ofill { position: absolute; inset: 0; background-color: currentColor; opacity: 0; z-index: 1; }
/* "neo" lockup — positioned by JS so the colour dot sits exactly where the "o" is.
   fill inherits the pin colour, so it flips ink → white when the stage goes black. */
.reveal__neo { position: fixed; z-index: 46; pointer-events: none; visibility: hidden; color: inherit; overflow: visible; }
.reveal__neo path, .reveal__neo rect { fill: currentColor; }
.reveal__neo #neo-o { opacity: 0; }   /* the "o" is the living video dot, not this glyph */
@media (max-width: 759px) { .reveal__neo { display: none; } }  /* dot fixed at 56px — lockup is desktop-only */

/* mobile / portrait: "n" and "e" stacked vertically just above the colour "o" */
.reveal__neo-m { display: none; }
@media (max-width: 759px) {
  .reveal__neo-m {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    position: fixed; left: 0; right: 0; margin-inline: auto; width: max-content;   /* centred without transform, so GSAP y scroll-off is clean */
    bottom: calc(60% + 54px);                       /* o centre is 40% from top → sit just above it */
    z-index: 46; pointer-events: none; color: inherit;
  }
  .reveal__neo-m svg { display: block; height: clamp(72px, 11vh, 92px); width: auto; fill: currentColor; }
  /* shrink the colour "o" to match the smaller mobile n/e (JS uses oR=46 for the ring) */
  .reveal__ohole { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
}
.reveal__scrim { position: absolute; inset: 0; background: rgba(15,16,20,.30); }
.reveal__headline { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center; padding: 0 var(--gutter); color: #fff; }
.reveal__headline h2 { font-size: var(--fs-h1); max-width: 16ch; text-shadow: 0 2px 30px rgba(0,0,0,.4); }
.reveal__headline .line-mask { display: block; overflow: hidden; padding-bottom: .08em; }
.reveal__headline .line { display: block; }

/* finish name that swaps per colour — masked one-line "slot" under the wordmark */
.reveal__finish {
  position: absolute; left: 0; right: 0; top: 48.5%; z-index: 4; text-align: center;
  height: 1.15em; overflow: hidden; line-height: 1.15; color: inherit; opacity: 0; pointer-events: none;
  font-size: clamp(1.2rem, .9rem + 1.5vw, 2rem); font-weight: 700; letter-spacing: -.01em;
}
.reveal__finish-track { display: flex; flex-direction: column; }
.reveal__finish-track span { display: block; height: 1.15em; }

/* final centred content, revealed below the dot */
.reveal__final {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  justify-content: flex-start; padding: 53vh var(--gutter) 0;
  pointer-events: none;
}
.reveal__final-title { font-size: var(--fs-h2); max-width: 18ch; margin-top: .8rem; color: inherit; }
.reveal__final-text { color: inherit; opacity: .72; max-width: 42ch; margin-top: 1rem; } /* follows the pin colour (ink → white on black) */
.reveal__cta {
  display: inline-block; margin-top: 2rem; padding: .95rem 2.1rem; border-radius: 999px;
  background: var(--c-ink); color: #fff; font-weight: 700; text-decoration: none;
  transition: transform .16s var(--ease-out);   /* bg/colour are scrubbed by GSAP */
}

/* ---------------------------------------------------------------- gallery (sticky-scroll) */
/* gallery uses the page theme (is-dark) so its foot turns white again as the FAQ approaches.
   The reveal above is intrinsically black, so entering the gallery stays black (no blink). */
.gallery { max-width: none; }
/* inline PLH logo inside the gallery heading (follows the text colour) */
.inline-plh { height: .82em; width: auto; fill: currentColor; vertical-align: -0.04em; }
.sticky-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; align-items: start; }
.sg-col { display: grid; gap: .75rem; }
/* middle column stays put while the outer (taller) columns scroll past */
.sg-col--sticky { position: sticky; top: 0; height: 100vh; grid-template-rows: repeat(3,1fr); }

.shot { border: 0; padding: 0; background: var(--c-ink); cursor: pointer; width: 100%; overflow: hidden; border-radius: var(--radius); display: block; }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur) var(--ease-out); }
/* outer columns: each tile takes its own photo's shape (width/height in the
   markup), so a horizontal shot is never squeezed into a vertical frame */
.sg-col--scroll .shot img { height: auto; }
.sg-col--sticky .shot { height: 100%; }

@media (max-width: 640px) {
  /* flatten the 3 column-groups so every tile lands in one clean 2-col grid */
  /* two columns, still: every photo at its own shape, flowing down each column */
  .sticky-gallery { display: block; columns: 2; column-gap: .75rem; }
  .sg-col { display: contents; }
  .sg-col--sticky { position: static; height: auto; }
  .sticky-gallery .shot { height: auto; break-inside: avoid; margin-bottom: .75rem; }
  .sticky-gallery .shot img { height: auto; }
  /* arrows are obsolete on touch — swipe navigates instead */
  .lightbox__nav { display: none; }
}

/* ---------------------------------------------------------------- lightbox */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem);
  background: transparent;
}
/* Separate backdrop so it can fade independently of the (always-opaque) media */
.lightbox__backdrop {
  position: absolute; inset: 0; z-index: 0;
  background: color-mix(in srgb, var(--c-ink) 92%, transparent);
}
.lightbox__media {
  position: relative; z-index: 1;
  width: min(92vw, 1180px); height: min(80vh, 820px);
  border-radius: var(--radius); background: var(--c-ink);
  background-size: cover; background-position: center;
  display: grid; place-items: center; overflow: hidden;
}
.lightbox__label { color: #fff; letter-spacing: .15em; text-transform: uppercase; font-size: 1rem; opacity: .8; }
.lightbox__close, .lightbox__nav {
  position: absolute; z-index: 2; cursor: pointer;
  display: grid; place-items: center; color: var(--c-ink);
  background: var(--c-paper); border: 0; border-radius: 999px;
  transition: transform .3s var(--ease-out), background .3s var(--ease-out);
}
.lightbox__close { top: clamp(1rem,3vw,1.6rem); right: clamp(1rem,3vw,1.6rem); width: 46px; height: 46px; font-size: 1.1rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 1.6rem; }
.lightbox__nav--prev { left: clamp(.5rem,2vw,1.5rem); }
.lightbox__nav--next { right: clamp(.5rem,2vw,1.5rem); }
.lightbox__count { position: absolute; bottom: clamp(1rem,3vw,1.8rem); left: 0; right: 0; text-align: center; color: var(--c-paper); font-size: .9rem; letter-spacing: .1em; }
@media (max-width: 600px){ .lightbox__nav { width: 44px; height: 44px; } }

/* ---------------------------------------------------------------- contact */
/* The FAQ sits ON TOP with a rounded BOTTOM; the dark "closer" (contact + footer) is UNDER it.
   The FAQ's rounded bottom shows the dark sheet behind it, and scrolling reveals it beneath. */
.faq {
  position: relative; z-index: 1;
  max-width: none; margin: 0;
  background: #fff;                                               /* intrinsic — clean edge with the dark gallery above */
  border-radius: 0 0 clamp(28px,4vw,44px) clamp(28px,4vw,44px);   /* rounded bottom */
  padding: var(--sp-section) var(--gutter) clamp(2rem, 5vh, 3.5rem);
}

/* ---- CURTAIN REVEAL ----------------------------------------------------------------
   The dark closer (contact + footer) is FIXED to the viewport. Its wrapper sits in normal
   flow with a clip-path, which clips the fixed child to the wrapper's box — so the closer is
   only visible where the wrapper is. As the page scrolls up, the wrapper's window uncovers the
   fixed closer, which appears to stay still while everything above lifts off it. Pure CSS. */
/* the reveal window is square, but pulled up under the FAQ's rounded bottom so the WHITE FAQ's
   rounded corners sit over the dark (the radius reads on the white sheet, not the dark). */
.closer-reveal { position: relative; height: 100vh; margin-top: calc(-1 * clamp(28px,4vw,44px));
  clip-path: inset(0); }
.closer {
  position: fixed; bottom: 0; left: 0; width: 100%; height: 100vh; z-index: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: #1546E0; color: #fff;   /* cobalt closer */
}
/* giant faded background wordmark (centred; text-align keeps it centred so GSAP can own transform) */
.closer__bgtext {
  position: absolute; left: 0; right: 0; top: 56%; text-align: center;
  z-index: 0; pointer-events: none; user-select: none; white-space: nowrap;
  font-size: 21vw; line-height: .8; font-weight: 900; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,0) 70%);
  -webkit-background-clip: text; background-clip: text;
}
.contact {
  position: relative; z-index: 1;
  flex: 1 1 auto; display: flex; align-items: center;
  max-width: none; margin: 0;
  padding: clamp(2rem,5vh,4rem) var(--gutter);
}
.contact__inner { width: 100%; }
.site-footer { position: relative; z-index: 1; }
/* small screens: the fixed 100vh closer can't hold a tall stacked form — fall back to normal flow */
@media (max-width: 800px) {
  .closer-reveal { height: auto; clip-path: none; }
  .closer { position: static; height: auto; }
  .contact { display: block; padding: clamp(3rem,8vh,5rem) var(--gutter); }
}
.contact__inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem,5vw,4rem);
  align-items: start; max-width: var(--maxw); margin-inline: auto; }
.contact .section-title { color: #fff; }
.contact__copy p { color: rgba(255,255,255,.68); }
.contact__form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.field { display: grid; gap: .4rem; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: .85rem; font-weight: 600; color: #fff; }
.field input, .field select {
  font: inherit; padding: .85rem 1rem; border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px; background: rgba(255,255,255,.06); color: #fff; width: 100%;
}
.field input::placeholder { color: rgba(255,255,255,.4); }
.field select option { color: #14161A; }
.field input:focus, .field select:focus { outline: 2px solid var(--c-blue); outline-offset: 1px; }
.field--consent label { display: flex; gap: .6rem; align-items: center; font-weight: 400; font-size: .9rem; color: rgba(255,255,255,.7); }
.field--consent input { width: auto; color-scheme: light; accent-color: #fff; }   /* light checkbox on the cobalt form (not black) */
.submit {
  grid-column: 1 / -1; justify-self: start; font: inherit; font-weight: 700;
  padding: .95rem 2rem; border: 0; border-radius: 999px; cursor: pointer;
  color: #14161A; background: #fff;
  transition: transform .16s var(--ease-out), background .2s ease, color .2s ease;
}
@media (max-width: 800px){ .contact__inner { grid-template-columns: 1fr; } .contact__form { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- footer (continues the dark closer) */
.site-footer {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 1.25rem 1.5rem; flex-wrap: wrap;
  padding: 2.2rem var(--gutter); border-top: 1px solid rgba(255,255,255,.18);
  background: #1546E0; color: rgba(255,255,255,.72); font-size: .9rem;   /* cobalt footer */
  max-width: none; margin: 0;
}
.footer-brand { display: inline-flex; }
.footer-brand .brand-logo { height: 34px; width: auto; fill: #fff; display: block; }
.site-footer p { margin: 0; }
/* social icons pushed to the right */
.socials { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; align-items: center; gap: .35rem; }
.socials a { display: inline-flex; padding: .5rem; border-radius: 50%; color: rgba(255,255,255,.7);
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out); }
.socials a:hover { color: #fff; background: rgba(255,255,255,.1); }
.socials svg { width: 20px; height: 20px; fill: currentColor; display: block; }
@media (max-width: 560px){
  .closer__bgtext { display: none; }                        /* cleaner footer on phones */
  .site-footer { flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
  .socials { margin: 0 auto; }                              /* logo+text, then socials, all centred */
}

/* ---------------------------------------------------------------- a11y */
:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ------------------------------------------------ pointer & press feedback
   Hover motion only where there is a real pointer: on touch a tap fires
   :hover and leaves it stuck — a lifted button, a zoomed photo — until the
   next tap somewhere else. Press feedback answers everyone, finger included. */
@media (hover: hover) and (pointer: fine) {
  .reveal__cta:hover { transform: translateY(-2px); }
  .shot:hover img { transform: scale(1.03); }
  .lightbox__nav:hover, .lightbox__close:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
  .lightbox__close:hover { transform: scale(1.08); }
  .submit:hover { transform: translateY(-2px); background: var(--c-red); color: #fff; }
}
.submit:active, .reveal__cta:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  /* keep the colour changes, drop the movement */
  .reveal__cta:hover, .submit:hover, .shot:hover img,
  .reveal__cta:active, .submit:active { transform: none; }
}

/* FAQ answers from the client file: several paragraphs, a list of interface modules, links */
.qa__body p + p, .qa__body p + ul, .qa__body ul + p { margin-top: .75em; }
.qa__body ul { list-style: disc; padding-left: 1.2em; margin: .5em 0 0; display: grid; gap: .2em; }
.qa__body strong { color: var(--c-ink); font-weight: 700; }
.qa__body a { text-decoration: underline; text-underline-offset: .18em; }
/* the closer keeps only the name, set under the title rather than across the form */
.closer__bgtext { text-align: left; padding-left: var(--gutter); transform-origin: 0 100%; }