/* =====================================================================
   MOORGEN x WIIKTO — LUXURY DESIGN SYSTEM
   Strict two-tone palette: #000000 / #FFFFFF only (opacity for depth).
   Typography: Manrope (display) + Inter (body).
   ===================================================================== */

/* ---------------------------------------------------------------------
   01. RESET & BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --black: #000000;
  --white: #ffffff;

  /* black-derived opacities (for lines, muted text, surfaces on white) */
  --ink-90: rgba(0,0,0,0.92);
  --ink-70: rgba(0,0,0,0.72);
  --ink-55: rgba(0,0,0,0.55);
  --ink-40: rgba(0,0,0,0.40);
  --ink-25: rgba(0,0,0,0.25);
  --ink-12: rgba(0,0,0,0.12);
  --ink-08: rgba(0,0,0,0.08);
  --ink-05: rgba(0,0,0,0.05);

  /* white-derived opacities (for lines, muted text, glass on black) */
  --snow-90: rgba(255,255,255,0.92);
  --snow-70: rgba(255,255,255,0.70);
  --snow-55: rgba(255,255,255,0.55);
  --snow-40: rgba(255,255,255,0.40);
  --snow-25: rgba(255,255,255,0.25);
  --snow-12: rgba(255,255,255,0.12);
  --snow-08: rgba(255,255,255,0.08);

  --font-display: 'Manrope', 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;

  --container: 1360px;
  --ease-lux: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 88px;
}

html { scroll-behavior: auto; }
html, body { background: var(--white); }

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink-90);
  line-height: 1.6;
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; max-height: 700px; display:block; }
a { color: inherit; }
button { font-family: inherit; }

::selection { background: var(--black); color: var(--white); }

/* thin, quiet scrollbar so it never fights the two-tone palette */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--white); }
::-webkit-scrollbar-thumb { background: var(--ink-25); border: 2px solid var(--white); border-radius: 8px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--black);
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(24px, 5vw, 64px); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--ink-55);
}
.eyebrow.center { justify-content: center; text-align: center; }
.eyebrow.center::before { display: none; }
.eyebrow.on-dark { color: var(--snow-70); }
.eyebrow.on-dark::before { background: var(--snow-70); }

/* ---------------------------------------------------------------------
   02. PREMIUM LOADING SCREEN
   --------------------------------------------------------------------- */
#loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--black);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.8s var(--ease-lux), visibility 0.8s var(--ease-lux);
}
#loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-mark {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.loader-mark .loader-word {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--white);
  opacity: 0;
  animation: loader-fade 0.8s var(--ease-lux) 0.15s forwards;
}
.loader-bar {
  width: 160px; height: 1px;
  background: var(--snow-25);
  overflow: hidden;
  position: relative;
}
.loader-bar::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--white);
  transform: translateX(-100%);
  animation: loader-fill 1.4s var(--ease-lux) forwards;
}
@keyframes loader-fade { to { opacity: 1; } }
@keyframes loader-fill { to { transform: translateX(0); } }

/* ---------------------------------------------------------------------
   03. HEADER / NAVIGATION
   --------------------------------------------------------------------- */
header.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 clamp(24px, 5vw, 64px);
  height: var(--header-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.5s var(--ease-lux), border-color 0.5s var(--ease-lux), height 0.4s var(--ease-lux), backdrop-filter 0.5s var(--ease-lux);
}
header.site-header.is-solid {
  background: var(--snow-90);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--ink-08);
  height: 76px;
}
/* dark hero variant: force logo/nav to white until the header solidifies */
header.site-header.on-dark:not(.is-solid) .logo { filter: invert(1) brightness(2); }
header.site-header.on-dark:not(.is-solid) nav a { color: var(--snow-70); }
header.site-header.on-dark:not(.is-solid) nav a:hover,
header.site-header.on-dark:not(.is-solid) nav a.active { color: var(--white); }

.logo-link {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; text-decoration: none;
  z-index: 1;
}
.logo { height: 30px; width: auto; display: block; transition: filter 0.4s ease; }

nav.site-nav { display: flex; align-items: center; gap: 2.4rem; }
nav.site-nav a {
  position: relative;
  font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-55);
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.25s ease;
}
nav.site-nav a::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--black);
  transition: right 0.35s var(--ease-lux);
}
nav.site-nav a:hover, nav.site-nav a.active { color: var(--black); }
nav.site-nav a:hover::after, nav.site-nav a.active::after { right: 0; }

.nav-toggle {
  display: none;
  width: 34px; height: 22px;
  position: relative;
  background: none; border: none; cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--black);
  transition: transform 0.3s var(--ease-lux), opacity 0.3s ease, top 0.3s var(--ease-lux);
}
.nav-toggle span { top: 10px; }
.nav-toggle span::before { top: -8px; }
.nav-toggle span::after { top: 8px; }
header.on-dark:not(.is-solid) .nav-toggle span,
header.on-dark:not(.is-solid) .nav-toggle span::before,
header.on-dark:not(.is-solid) .nav-toggle span::after { background: var(--white); }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); background: var(--black); }
body.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); background: var(--black); }

@media (max-width: 1320px) {
  /* Raised from 860px: with the logo now centered in the header, the
     right-aligned nav needs to collapse to the mobile menu earlier —
     below ~1320px a 4-item nav visually collides with a centered 35px
     logo, since both are competing for the same horizontal space. */
  .nav-toggle { display: block; z-index: 620; }
  nav.site-nav {
    /* Explicit vw/vh instead of inset:0 — the header gets backdrop-filter
       once solid, which makes it a containing block for fixed-position
       descendants; inset:0 would then resolve against the header's own
       ~76px height instead of the viewport. vh/vw units are immune to
       that, since they always resolve against the true viewport. */
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    flex-direction: column; justify-content: center; align-items: flex-start;
    gap: 1.8rem;
    padding: 0 32px;
    background: var(--white);
    transform: translateX(100%);
    transition: transform 0.5s var(--ease-lux);
    z-index: 610;
  }
  body.nav-open nav.site-nav { transform: translateX(0); }
  nav.site-nav a { font-size: 1.5rem; color: var(--black); }
}

/* ---------------------------------------------------------------------
   04. BUTTONS (glass, magnetic, ripple)
   --------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-body);
  font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 17px 32px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.5s var(--ease-lux), background 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.4s ease;
}
.btn span.arrow { transition: transform 0.4s var(--ease-lux); }
.btn:hover span.arrow { transform: translateX(6px); }

.btn-solid { background: var(--black); color: var(--white); }
.btn-solid:hover { box-shadow: 0 14px 40px var(--ink-25); transform: translateY(-2px); }

.btn-solid-invert { background: var(--white); color: var(--black); }
.btn-solid-invert:hover { box-shadow: 0 14px 40px rgba(0,0,0,0.45); transform: translateY(-2px); }

.btn-ghost {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(14px);
  color: var(--black);
  border-color: var(--ink-12);
}
.btn-ghost:hover { background: var(--black); color: var(--white); border-color: var(--black); transform: translateY(-2px); }

.btn-outline-dark {
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(14px);
  color: var(--white);
  border-color: var(--snow-40);
}
.btn-outline-dark:hover { background: var(--white); color: var(--black); border-color: var(--white); transform: translateY(-2px); }

.btn.is-small { padding: 12px 22px; font-size: 0.66rem; }

/* ripple */
.btn .ripple {
  position: absolute; border-radius: 50%;
  background: currentColor; opacity: 0.28;
  transform: scale(0); pointer-events: none;
  animation: ripple-out 0.7s var(--ease-soft) forwards;
}
@keyframes ripple-out { to { transform: scale(2.6); opacity: 0; } }

/* magnetic wrapper offsets are applied inline via JS transform */
[data-magnetic] { transition: transform 0.35s var(--ease-lux); will-change: transform; }

/* ---------------------------------------------------------------------
   05. SCROLL-REVEAL ENGINE (data-reveal attributes)
   --------------------------------------------------------------------- */
[data-reveal] { opacity: 0; transition: opacity 1s var(--ease-lux), transform 1s var(--ease-lux), filter 1s var(--ease-lux); }
[data-reveal="up"] { transform: translateY(56px); }
[data-reveal="down"] { transform: translateY(-40px); }
[data-reveal="left"] { transform: translateX(64px); }
[data-reveal="right"] { transform: translateX(-64px); }
[data-reveal="zoom"] { transform: scale(0.92); }
[data-reveal="blur"] { filter: blur(14px); transform: translateY(24px); }

[data-reveal].is-in {
  opacity: 1; transform: translate(0,0) scale(1); filter: blur(0);
}

@media (max-width: 900px) {
  /* [data-reveal="left"/"right"] sit at translateX(±64px) before their
     entrance animation fires. Any section not yet scrolled into view
     still carries that offset, and on mobile that reads as real
     horizontal overflow — enough that some mobile browsers inflate the
     whole layout viewport to fit it, which pushes the off-canvas nav
     into view and can break the hamburger toggle. Desktop is unaffected
     (this query only applies at tablet width and below); mobile just
     gets the same vertical-fade motion as [data-reveal="up"] instead. */
  [data-reveal="left"], [data-reveal="right"] { transform: translateY(40px); }
}

/* stagger children automatically when parent has [data-reveal-group] */
[data-reveal-group] > * { transition-delay: calc(var(--stagger-i, 0) * 90ms); }

/* word-reveal headline animation */
.split-words { display: inline-block; overflow: hidden; padding-bottom: 0.08em; }
.split-words .word {
  display: inline-block;
  transform: translateY(115%) rotate(3deg);
  opacity: 0;
  transition: transform 0.9s var(--ease-lux), opacity 0.7s ease;
  transition-delay: calc(var(--w) * 55ms);
}
.split-words.is-in .word { transform: translateY(0) rotate(0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .split-words .word { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------------------
   06. GLASS CARDS
   --------------------------------------------------------------------- */
.glass {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--ink-08);
  box-shadow: 0 30px 80px -30px var(--ink-25);
}
.glass-dark {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--snow-12);
  color: var(--white);
}

/* ---------------------------------------------------------------------
   07. HOME — CINEMATIC VIDEO HERO
   --------------------------------------------------------------------- */
body.home { background: var(--white); }

.hero {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: calc(var(--header-h) + 40px) 24px 120px;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
}
.hero-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: hero-video-zoom 22s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes hero-video-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
.hero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.22) 32%, rgba(0,0,0,0.28) 62%, rgba(0,0,0,0.78) 100%),
    radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.45) 100%);
}
.hero-noise {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  background-image: radial-gradient(var(--white) 0.6px, transparent 0.6px);
  background-size: 3px 3px;
}
.hero-eyebrow { margin-bottom: 26px; position: relative; z-index: 3; }
.hero h1 {
  position: relative; z-index: 3;
  color: var(--white);
  font-size: clamp(2.6rem, 7vw, 6.4rem);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.03em;
  max-width: 1180px;
  margin-bottom: 26px;
}
.hero h1 em { font-style: normal; font-weight: 300; }
.hero-sub {
  position: relative; z-index: 3;
  max-width: 560px;
  color: var(--snow-70);
  font-size: 1.05rem;
  margin-bottom: 44px;
}
.hero-ctas { position: relative; z-index: 3; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

.hero-video-toggle {
  position: absolute; bottom: 40px; right: clamp(24px, 5vw, 64px); z-index: 4;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(14px);
  border: 1px solid var(--snow-25);
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.4s var(--ease-lux);
}
.hero-video-toggle:hover { background: var(--white); color: var(--black); border-color: var(--white); transform: translateY(-2px); }
.hero-video-toggle .icon-pause,
.hero-video-toggle .icon-play { display: flex; align-items: center; gap: 3px; }
.hero-video-toggle .icon-pause span { width: 3px; height: 12px; background: currentColor; display: block; }
.hero-video-toggle .icon-play { border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 2px; }
.hero-video-toggle .icon-play { display: none; }
.hero-video-toggle.is-paused .icon-pause { display: none; }
.hero-video-toggle.is-paused .icon-play { display: block; }

.scroll-cue {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--snow-55);
}
.scroll-cue span { width: 1px; height: 38px; background: linear-gradient(180deg, var(--snow-55), transparent); animation: cue-pulse 1.8s ease-in-out infinite; }
@keyframes cue-pulse { 0%,100% { opacity: 0.25; transform: scaleY(0.55); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); transform-origin: top; } }

@media (max-width: 640px) {
  .hero-video-toggle { bottom: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { animation: none; }
}

/* ---------------------------------------------------------------------
   08. MARQUEE
   --------------------------------------------------------------------- */
.marquee-wrap {
  padding: 26px 0;
  border-top: 1px solid var(--ink-08);
  border-bottom: 1px solid var(--ink-08);
  overflow: hidden;
}
.marquee-track {
  display: flex; align-items: center; gap: 32px;
  width: max-content; white-space: nowrap;
  animation: marquee-scroll 34s linear infinite;
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
.marquee-track span.item { font-size: 0.86rem; letter-spacing: 0.04em; color: var(--ink-40); }
.marquee-track span.dot { color: var(--ink-25); font-size: 0.5rem; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------------
   09. EDITORIAL SPLIT SECTIONS
   --------------------------------------------------------------------- */
.editorial {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 48px;
  padding: 160px 0;
  border-top: 1px solid var(--ink-08);
}
.editorial.reverse .editorial-visual { order: 3; }
.editorial-index {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700;
  color: var(--ink-40);
}
.editorial-grid {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 72px;
  align-items: center;
}
.editorial.reverse .editorial-grid { grid-template-columns: 0.9fr 1.1fr; }
.editorial.reverse .editorial-grid .editorial-visual { order: 2; }
.editorial.reverse .editorial-grid .editorial-body { order: 1; }
.editorial-body h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.06; margin-bottom: 30px; }
.editorial-text { color: var(--ink-55); font-size: 1.02rem; line-height: 1.9; max-width: 540px; }
.editorial-text strong { color: var(--black); font-weight: 600; }

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.chip-row span {
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--ink-12); border-radius: 999px;
  padding: 9px 16px; color: var(--ink-70);
  transition: border-color 0.3s ease, background 0.3s ease;
}
.chip-row span:hover { border-color: var(--black); background: var(--ink-05); }

.editorial-visual {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 6px;
  overflow: hidden;
  background: var(--ink-05);
}
.editorial-visual img {
  width: 100%; height: 100%; max-height: none; object-fit: cover;
  transition: transform 1.2s var(--ease-lux);
}
.editorial:hover .editorial-visual img { transform: scale(1.05); }
.editorial-visual.contain { display: flex; align-items: center; justify-content: center; }
.editorial-visual.contain img { object-fit: contain; padding: 10%; }

@media (max-width: 980px) {
  .editorial { grid-template-columns: 1fr; padding: 100px 0; gap: 28px; }
  .editorial-grid, .editorial.reverse .editorial-grid { grid-column: 1; grid-template-columns: 1fr; gap: 40px; }
  .editorial.reverse .editorial-grid .editorial-visual,
  .editorial.reverse .editorial-grid .editorial-body { order: initial; }
}

/* ---------------------------------------------------------------------
   09b. STICKY PINNED STORY — image pins full-bleed while the text
        card scrolls up over it, then releases once its content clears.
        Pure CSS: a grid stacks the sticky media and the (taller) text
        layer in the same cell, so the row's height follows the text.
   --------------------------------------------------------------------- */
.story-pin {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  max-width: 100vw;
  display: grid;
}
.story-pin-media, .story-pin-text { grid-area: 1 / 1; }
.story-pin-media {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
}
.story-pin-media img {
  width: 100%; height: 100%; max-height: none;
  object-fit: cover; object-position: center;
}
.story-pin-text {
  position: relative;
  z-index: 1;
  min-height: 190vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 clamp(24px, 6vw, 90px);
  pointer-events: none;
}
/* reverse: text card sits on the right, for images composed with their
   subject on the left (e.g. "about wiikto.png") */
.story-pin.reverse .story-pin-text { justify-content: flex-end; }
.story-pin.reverse .story-pin-media img { object-position: left center; }
.story-pin-card {
  pointer-events: auto;
  max-width: 660px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--ink-08);
  border-radius: 8px;
  padding: clamp(32px, 4vw, 56px);
  box-shadow: 0 40px 90px -40px var(--ink-25);
}
.story-pin-card .editorial-index { display: block; margin-bottom: 18px; }
.story-pin-card h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.06; margin-bottom: 26px; }

@media (max-width: 900px) {
  .story-pin { display: block; }
  .story-pin-media { position: relative; height: 56vh; }
  .story-pin-text { position: relative; min-height: 0; display: block; padding: 48px 24px; pointer-events: auto; }
  .story-pin-card { max-width: 100%; background: var(--white); backdrop-filter: none; box-shadow: none; border: none; padding: 0; }
  /* Both source photos are very wide (~1.75:1) with the actual subject
     off-center — "about moorgen.png" sits at roughly 55-95% of the frame
     width, "about wiikto.png" at roughly 3-30%. object-position:center
     (moorgen's default) crops a window that mostly misses the subject on
     a narrow mobile box; nudge each crop toward where its subject
     actually is. Desktop keeps the original center/left values. */
  #about .story-pin-media img { object-position: 80% center; }
  .story-pin.reverse .story-pin-media img { object-position: 12% center; }
}
@media (prefers-reduced-motion: reduce) {
  .story-pin-media { position: relative; height: 70vh; }
}

/* ---------------------------------------------------------------------
   10. COLLAB STATEMENT
   --------------------------------------------------------------------- */
.collab-statement {
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
  padding: 170px 24px;
}
.collab-statement h2 {
  font-size: clamp(2.2rem, 5.2vw, 4.4rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
}
.collab-statement h2 strong { font-weight: 800; }
.collab-statement .editorial-text { margin: 0 auto 44px; text-align: center; }

/* ---------------------------------------------------------------------
   11. FEATURE ROWS (home "why moorgen") + ANIMATED COUNTERS
   --------------------------------------------------------------------- */
.feature-rows-section { padding: 40px 0 180px; border-top: 1px solid var(--ink-08); }
.feature-rows-head { text-align: center; margin-bottom: 90px; }
.feature-rows-head h2 { font-size: clamp(2rem, 3.6vw, 3rem); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink-08);
  margin-bottom: 110px;
  border: 1px solid var(--ink-08);
}
.stat-cell {
  background: var(--white);
  padding: 48px 32px;
  text-align: center;
}
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.stat-label { margin-top: 10px; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-55); }

.feature-rows { border-top: 1px solid var(--ink-08); }
.feature-row {
  display: grid; grid-template-columns: 70px 1fr 2fr;
  align-items: baseline; gap: 32px;
  padding: 34px 0;
  border-bottom: 1px solid var(--ink-08);
  transition: background 0.35s ease, padding-left 0.35s ease;
}
.feature-row:hover { background: var(--ink-05); padding-left: 14px; }
.feature-row-num { font-family: var(--font-display); font-size: 1rem; color: var(--ink-40); transition: color 0.3s ease; }
.feature-row:hover .feature-row-num { color: var(--black); }
.feature-row h3 { font-size: 1.02rem; font-weight: 700; }
.feature-row p { font-size: 0.9rem; color: var(--ink-55); line-height: 1.7; }

@media (max-width: 780px) {
  .stat-row { grid-template-columns: 1fr; }
  .feature-row { grid-template-columns: 44px 1fr; }
  .feature-row p { grid-column: 2/3; }
}

/* ---------------------------------------------------------------------
   12. FOOTER
   --------------------------------------------------------------------- */
footer.site-footer {
  background: var(--black);
  color: var(--snow-55);
  padding: 90px 0 34px;
}
.footer-top {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 28px;
  padding-bottom: 56px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--snow-12);
}
.footer-brand { display: flex; flex-direction: column; gap: 22px; }
.footer-logo { font-family: var(--font-display); font-size: 1.3rem; color: var(--white); font-weight: 700; }
.footer-logo em { font-weight: 300; font-style: normal; }
.footer-social-group { display: flex; flex-direction: column; gap: 12px; }
.footer-social-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--snow-55); }
.footer-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 0.8rem; line-height: 1.9;
}
.footer-social { display: flex; gap: 14px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--snow-25);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; color: var(--snow-70);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease-lux);
}
.footer-social a svg { width: 16px; height: 16px; display: block; }
.footer-social a:hover { background: var(--white); color: var(--black); border-color: var(--white); transform: translateY(-3px); }

@media (max-width: 700px) {
  .footer-top, .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   13. PRODUCTS CATALOGUE PAGE
   ===================================================================== */
.cat-intro {
  padding: calc(var(--header-h) + 90px) 0 70px;
}
.cat-intro h1 {
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  line-height: 1.04;
  max-width: 900px;
  margin: 24px 0 30px;
}
.cat-intro h1 em { font-style: normal; font-weight: 300; }
.cat-rule { width: 100%; height: 1px; background: var(--ink-12); margin: 34px 0; }
.cat-sub { max-width: 520px; color: var(--ink-55); font-size: 0.95rem; line-height: 1.8; }

/* -- category filter tabs (plain text tabs + underline, B&O-style) -- */
.cat-filters {
  display: flex; flex-wrap: wrap; gap: 34px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ink-12);
}
.cat-filter-btn {
  position: relative;
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding-bottom: 20px;
  border: none;
  background: none;
  color: var(--ink-40);
  cursor: pointer;
  transition: color 0.3s ease;
}
.cat-filter-btn::after {  content: "";
  position: absolute; left: 0; right: 100%; bottom: -21px;
  height: 1px; background: var(--black);
  transition: right 0.35s var(--ease-lux);
}
.cat-filter-btn:hover { color: var(--black); }
.cat-filter-btn.is-active { color: var(--black); }
.cat-filter-btn.is-active::after { right: 0; }

/* -- flagship spotlight (Zaha Hadid designer edition) -- */
.flagship {
  background: var(--black);
  color: var(--white);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 130px clamp(24px, 5vw, 64px);
}
.flagship-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
}
.flagship-media { position: relative; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
.flagship-media::before {
  content: ""; position: absolute; inset: 4%;
  background: radial-gradient(circle, var(--snow-08) 0%, transparent 70%);
  border-radius: 50%;
}
.flagship-media img {
  position: relative; max-width: 80%; max-height: 86%; object-fit: contain;
  filter: drop-shadow(0 50px 90px rgba(0,0,0,0.6));
  transition: transform 0.9s var(--ease-lux);
}
.flagship:hover .flagship-media img { transform: scale(1.045) translateY(-8px); }
.flagship-body .eyebrow { margin-bottom: 22px; }
.flagship-body h2 { color: var(--white); font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.05; margin-bottom: 24px; }
.flagship-body p { color: var(--snow-55); font-size: 1rem; line-height: 1.85; max-width: 460px; margin-bottom: 38px; }

@media (max-width: 900px) {
  .flagship-inner { grid-template-columns: 1fr; gap: 40px; }
}

/* -- product grid: flat, edge-to-edge modular tiles (Bang & Olufsen style) --
   No cards, no shadows, no radius, no glass. Tiles sit on a neutral tone,
   separated by a thin white seam; the image floats with headroom above
   it and the copy sits quiet and left-aligned underneath. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--white);
}
.product-card {
  position: relative;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: var(--ink-05);
  transition: background 0.4s ease;
}
.product-card:hover { background: var(--ink-08); }
.product-card.is-hidden { display: none; }

.product-card-media {
  position: relative;
  aspect-ratio: 1/1;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
  padding-top: 14%;
}
.product-card-media img {
  max-width: 58%; max-height: 82%; object-fit: contain;
  filter: drop-shadow(0 18px 30px var(--ink-12));
  transition: transform 0.8s var(--ease-lux);
}
.product-card:hover .product-card-media img { transform: scale(1.06) translateY(-4px); }

.product-card-plus {
  position: absolute; top: 18px; right: 18px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--ink-25);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; color: var(--ink-55);
  opacity: 0; transform: scale(0.8);
  transition: opacity 0.35s ease, transform 0.35s var(--ease-lux), border-color 0.3s ease, color 0.3s ease;
}
.product-card:hover .product-card-plus {
  opacity: 1; transform: scale(1);
  border-color: var(--black); color: var(--black);
}

.product-card-body {
  padding: 0 24px 28px;
  display: flex; flex-direction: column; gap: 6px;
}
.product-card-tag { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-40); }
.product-card h3 { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.product-card-spec { font-size: 0.8rem; color: var(--ink-55); }

@media (max-width: 980px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   14. PRODUCT DETAIL PAGES
   ===================================================================== */
.product-hero {
  max-width: var(--container);
  margin: 0 auto;
  padding: calc(var(--header-h) + 60px) clamp(24px, 5vw, 64px) 60px;
}
.product-hero-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 110px; align-items: center;
}
.product-hero-media {
  position: relative;
  aspect-ratio: 1/1.05;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  height: 800px;
}
.product-hero-media::before {
  content: ""; position: absolute; inset: 4%;
  background: radial-gradient(circle, var(--ink-05) 0%, transparent 70%);
  border-radius: 50%;
}
.product-hero-media img {
  position: relative;
  max-width: 78%; max-height: 88%; object-fit: contain;
  filter: drop-shadow(0 40px 70px var(--ink-25));
  transition: transform 0.9s var(--ease-lux);
}
.product-hero-media:hover img { transform: scale(1.045) translateY(-6px); }

.product-hero-tag { margin-bottom: 20px; }
.product-hero-body h1 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.06; margin-bottom: 22px; text-wrap: balance; }
.product-hero-desc { color: var(--ink-55); font-size: 1.02rem; line-height: 1.85; margin-bottom: 40px; max-width: 460px; }
.product-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.back-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-55); text-decoration: none;
  margin-bottom: 34px;
  transition: color 0.3s ease, gap 0.3s ease;
}
.back-link:hover { color: var(--black); gap: 16px; }
.back-link .arrow-back { transform: rotate(180deg); display: inline-block; }

@media (max-width: 900px) {
  .product-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  /* The desktop box uses a fixed height + aspect-ratio to keep every hero
     image the same height next to the text column. Once the grid stacks
     to one column that fixed height no longer has a text column to match,
     and combined with aspect-ratio it was forcing a ~762px intrinsic width
     that overflowed the whole page horizontally on phones. Let width drive
     the box instead. */
  .product-hero-media { height: auto; width: 100%; }
}

/* -- feature capsule (alternating image/text rows) -- */
.feature-capsule {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 150px; align-items: center;
  max-width: var(--container);
  margin: 0 auto;
  padding: 130px clamp(24px, 5vw, 10px);
  border-top: 1px solid var(--ink-08);
  /* [data-reveal="left"/"right"] sections sit at translateX(±64px) before
     their entrance animation fires. On a page with several of them below
     the fold, that pre-reveal offset briefly (or on some mobile browsers,
     persistently) reads as real horizontal overflow, which forces the
     whole page to zoom out to fit — clipping it here contains that at
     the section, instead of reaching for overflow-x on html/body, which
     breaks every position:sticky element on the page. */
  overflow-x: clip;
}
.feature-capsule.reverse { grid-template-columns: 0.95fr 1.05fr; }
.feature-capsule.reverse .capsule-media { order: 2; }
.feature-capsule.reverse .capsule-body { order: 1; }

.capsule-media { position: relative; overflow: hidden; border-radius: 4px; max-width: fit-content;
    max-height: 750px; justify-self: center; }
.capsule-media img { width: auto; height: 700px; transition: transform 1s var(--ease-lux); }
.feature-capsule:hover .capsule-media img { transform: scale(1.045); }

.capsule-body h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.16; margin-bottom: 22px; }
.capsule-body p { color: var(--ink-55); font-size: 0.98rem; line-height: 1.85; max-width: 460px; }
.capsule-body p strong { color: var(--black); font-weight: 600; }

/* dark full-bleed variant — reset the base grid so the single
   .container-inner child spans the whole section instead of being
   confined to the first grid track, then re-grid inside it */
.feature-capsule.on-dark {
  display: block;
  grid-template-columns: none;
  background: var(--black);
  color: var(--white);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  max-width: 100vw;
  padding: 130px clamp(24px, 5vw, 64px);
  border-top: none;
}
.feature-capsule.on-dark .container-inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 90px; align-items: center; width: 100%; }
.feature-capsule.on-dark.reverse .container-inner { grid-template-columns: 0.95fr 1.05fr; }
.feature-capsule.on-dark.reverse .container-inner .capsule-media { order: 2; }
.feature-capsule.on-dark.reverse .container-inner .capsule-body { order: 1; }
.feature-capsule.on-dark .capsule-body h3 { color: var(--white); }
.feature-capsule.on-dark .capsule-body p { color: var(--snow-55); }

@media (max-width: 900px) {
  .feature-capsule, .feature-capsule.reverse,
  .feature-capsule.on-dark .container-inner, .feature-capsule.on-dark.reverse .container-inner {
    grid-template-columns: 1fr; gap: 36px; padding: 80px 0;
  }
  .feature-capsule.reverse .capsule-media, .feature-capsule.on-dark.reverse .container-inner .capsule-media { order: 1; }
  .feature-capsule.reverse .capsule-body, .feature-capsule.on-dark.reverse .container-inner .capsule-body { order: 2; }
  .feature-capsule.on-dark { padding: 80px clamp(24px, 5vw, 64px); }
  /* Desktop pins every capsule image to a fixed 700px height so mismatched
     source photos still line up next to the text column. With no text
     column left once the grid stacks, that fixed height (plus the image's
     own aspect ratio) was rendering some photos ~480px wide — wider than
     the phone itself — which forced the whole page to overflow
     horizontally. Cap by width instead so nothing can exceed the column. */
  .capsule-media { max-width: 100%; }
  .capsule-media img { width: auto; height: auto; max-width: 100%; max-height: 420px; }
}

/* -- centered showcase (colours / single hero image) -- */
.feature-centered {
  max-width: var(--container);
  margin: 0 auto;
  padding: 110px clamp(24px, 5vw, 64px);
  text-align: center;
  border-top: 1px solid var(--ink-08);
}
.feature-centered img { max-width: 70%; margin: 0 auto; }
.feature-centered h3 { margin-bottom: 30px; }
.feature-centered.full-bleed {
  max-width: 100vw;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0;
  border-top: 1px solid var(--ink-08);
}
.feature-centered.full-bleed img { width: 100%; max-height: none; display: block; }

/* -- fingerprint sensor exploded scroll view -- */
.fp-explode {
  position: relative; height: 260vh;
  background: var(--black); color: var(--white);
  width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw);
}
.fp-sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; justify-content: center; gap: 90px;
  padding: 0 clamp(24px, 5vw, 64px);
  overflow: hidden;
}
.fp-stage { position: relative; width: min(460px, 42vw); aspect-ratio: 4/5; flex-shrink: 0; }
.fp-layer { position: absolute; will-change: transform, opacity; }
.fp-base { left: 0; top: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; }
.fp-ring1, .fp-ring2, .fp-lens, .fp-icon, .fp3-cap, .fp3-icon {
  left: 34%; top: 58%;
  opacity: calc(0.25 + 0.75 * var(--progress, 0));
  transform: translate(-50%, -50%) translate(calc(var(--tx) * var(--progress, 0)), calc(var(--ty) * var(--progress, 0))) scale(calc(0.7 + 0.3 * var(--progress, 0)));
}
.fp-ring1 { width: 30%; --tx: 20%; --ty: -26%; z-index: 2; }
.fp-ring2 { width: 32%; --tx: 46%; --ty: -58%; z-index: 3; }
.fp-lens  { width: 34%; --tx: 80%; --ty: -98%; z-index: 4; }
.fp-icon  { width: 26%; --tx: 125%; --ty: -145%; z-index: 5; }
.fp3-cap  { left: 50%; top: 56%; width: 16%; --tx: 12%; --ty: -16%; z-index: 2; }
.fp3-icon { left: 50%; top: 56%; width: 24%; --tx: 40%; --ty: -52%; z-index: 3; }
.fp-text { max-width: 400px; }
.fp-text h3 { color: var(--white); margin-bottom: 16px; font-size: clamp(1.4rem, 2.4vw, 2rem); }
.fp-text p { color: var(--snow-55); font-size: 0.98rem; line-height: 1.85; }

@media (max-width: 780px) {
  .fp-explode { height: 200vh; }
  .fp-sticky { flex-direction: column; gap: 32px; padding: 40px 24px; }
  .fp-stage { width: 74vw; }
  .fp-text { max-width: 92%; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-explode { height: auto; }
  .fp-sticky { position: relative; height: auto; padding: 100px clamp(24px,5vw,64px); }
}

/* =====================================================================
   15. INSTALLATION REQUEST
   ===================================================================== */
.ir-hero {
  max-width: var(--container);
  margin: 0 auto;
  padding: calc(var(--header-h) + 70px) clamp(24px, 5vw, 64px) 140px;
}
.ir-hero-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(48px, 6vw, 100px);
  align-items: start;
}

/* -- left: context, process, fallback contact -- */
.ir-intro {
  position: sticky;
  top: calc(var(--header-h) + 40px);
}
.ir-intro h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.08; margin: 20px 0 18px; text-wrap: balance; }
.ir-sub { color: var(--ink-55); font-size: 0.98rem; line-height: 1.8; max-width: 46ch; margin-bottom: 48px; }

.ir-steps { list-style: none; margin: 0 0 48px; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.ir-steps li { display: flex; gap: 20px; align-items: flex-start; }
.ir-step-num {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 0.82rem; font-weight: 700; color: var(--ink-40);
  padding-top: 0.2em;
}
.ir-steps h4 { font-size: 1rem; font-weight: 700; margin: 0 0 6px; }
.ir-steps p { font-size: 0.9rem; color: var(--ink-55); line-height: 1.65; margin: 0; max-width: 38ch; }

.ir-contact-fallback {
  padding-top: 28px;
  border-top: 1px solid var(--ink-08);
}
.ir-contact-fallback p { font-size: 0.8rem; color: var(--ink-40); margin: 0 0 10px; }
.ir-contact-fallback a {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700;
  color: var(--black); text-decoration: none;
  margin-bottom: 4px;
  transition: opacity 0.25s ease;
}
.ir-contact-fallback a:hover { opacity: 0.6; }

/* -- right: the form itself -- */
.ir-form-card {
  padding: clamp(28px, 4vw, 48px);
  border-radius: 16px;
}
.ir-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.2rem; }
.ir-group-title {
  grid-column: 1 / -1;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-40);
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink-08);
}
.ir-group-title:not(:first-child) { margin-top: 0.6rem; }
.ir-field { display: flex; flex-direction: column; gap: 0.6rem; }
.ir-field.full { grid-column: 1 / -1; }
.ir-field label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-55); }
.ir-field input, .ir-field select {
  font-family: var(--font-body); font-size: 0.94rem;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--ink-12);
  border-radius: 6px;
  background: rgba(255,255,255,0.7);
  color: var(--black);
  outline: none;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.ir-field input:focus, .ir-field select:focus { border-color: var(--black); background: var(--white); box-shadow: 0 0 0 4px var(--ink-05); }
.ir-submit {
  grid-column: 1 / -1;
  margin-top: 0.6rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 1.1rem 1.6rem; border: none; border-radius: 999px;
  background: var(--black); color: var(--white); cursor: pointer;
  transition: transform 0.4s var(--ease-lux), box-shadow 0.4s ease;
}
.ir-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 40px var(--ink-25); }
.ir-note {
  grid-column: 1 / -1;
  font-size: 0.85rem; color: var(--ink-55); line-height: 1.7;
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.4s ease;
}
.ir-note.visible { opacity: 1; max-height: 200px; }

@media (max-width: 900px) {
  .ir-hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .ir-intro { position: static; }
  .ir-sub, .ir-steps p { max-width: none; }
}

@media (max-width: 640px) {
  .ir-form { grid-template-columns: 1fr; }
  .ir-field.full { grid-column: 1; }
}

/* =====================================================================
   16. CONTACT PAGE
   ===================================================================== */
.ct-intro { max-width: 720px; margin: 0 auto; padding: calc(var(--header-h) + 90px) 24px 20px; text-align: center; }
.ct-intro h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin: 20px 0 18px; }
.ct-sub { color: var(--ink-55); font-size: 0.96rem; line-height: 1.8; }

/* -- quick contact cards -- */
.ct-cards {
  max-width: var(--container);
  margin: 0 auto;
  padding: 46px clamp(24px, 5vw, 64px) 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.ct-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--ink-08);
  border-radius: 14px;
  text-decoration: none;
  color: var(--black);
  transition: border-color 0.3s ease, transform 0.3s var(--ease-lux), box-shadow 0.3s ease;
}
.ct-card:hover { border-color: var(--black); transform: translateY(-4px); box-shadow: 0 20px 44px -20px var(--ink-25); }
.ct-card-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ink-05);
  color: var(--black);
}
.ct-card-icon svg { width: 20px; height: 20px; }
.ct-card-label { font-size: 0.92rem; font-weight: 700; }
.ct-card-value { font-size: 0.86rem; color: var(--ink-55); }

/* -- installation cross-link banner -- */
.ct-install-banner {
  max-width: var(--container);
  margin: 32px auto 0;
  padding: 26px clamp(24px, 5vw, 64px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
  background: var(--ink-05);
  border-radius: 14px;
}
.ct-install-banner p { margin: 0; font-size: 0.92rem; color: var(--ink-70); max-width: 60ch; }
.ct-install-banner p strong { color: var(--black); }

/* -- form + map -- */
.ct-main { max-width: var(--container); margin: 0 auto; padding: 90px clamp(24px, 5vw, 64px) 140px; }
.ct-main-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 5vw, 80px); align-items: start; }

.ct-form-card { padding: clamp(28px, 4vw, 48px); border-radius: 16px; }
.ct-form-card h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 14px 0 26px; }

.ct-type-toggle { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }
.ct-type-btn {
  font-family: var(--font-body); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--ink-12);
  background: transparent; color: var(--ink-55);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.ct-type-btn.is-active { background: var(--black); color: var(--white); border-color: var(--black); }

.ct-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.2rem; }
.ct-field { display: flex; flex-direction: column; gap: 0.6rem; }
.ct-field.full { grid-column: 1 / -1; }
.ct-field[hidden] { display: none; }
.ct-field label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-55); }
.ct-field input, .ct-field textarea {
  font-family: var(--font-body); font-size: 0.94rem;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--ink-12);
  border-radius: 6px;
  background: rgba(255,255,255,0.7);
  color: var(--black);
  outline: none;
  resize: vertical;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.ct-field input:focus, .ct-field textarea:focus { border-color: var(--black); background: var(--white); box-shadow: 0 0 0 4px var(--ink-05); }
.ct-submit {
  grid-column: 1 / -1;
  margin-top: 0.6rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 1.1rem 1.6rem; border: none; border-radius: 999px;
  background: var(--black); color: var(--white); cursor: pointer;
  transition: transform 0.4s var(--ease-lux), box-shadow 0.4s ease;
}
.ct-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 40px var(--ink-25); }
.ct-note {
  grid-column: 1 / -1;
  font-size: 0.85rem; color: var(--ink-55); line-height: 1.7;
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.4s ease;
}
.ct-note.visible { opacity: 1; max-height: 200px; }

/* -- map -- */
.ct-map-wrap { position: sticky; top: calc(var(--header-h) + 40px); }
.ct-map-frame {
  width: 100%; height: 380px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--ink-08);
  filter: grayscale(0.15);
}
.ct-map-address {
  margin-top: 24px;
  padding: 26px;
  border: 1px solid var(--ink-08);
  border-radius: 14px;
}
.ct-map-address h3 { font-size: 1.1rem; margin: 0 0 8px; }
.ct-map-address p { font-size: 0.9rem; color: var(--ink-55); margin: 0 0 20px; }

@media (max-width: 1024px) {
  .ct-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .ct-main-grid { grid-template-columns: 1fr; gap: 56px; }
  .ct-map-wrap { position: static; }
}

@media (max-width: 640px) {
  .ct-cards { grid-template-columns: 1fr; }
  .ct-form { grid-template-columns: 1fr; }
  .ct-field.full { grid-column: 1; }
  .ct-install-banner { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   17. UTILITIES
   ===================================================================== */
.section-divider { height: 1px; background: var(--ink-08); }
.text-center { text-align: center; }