/* ═══════════════════════════════════════════════════════════
   TOOLOR · MAIN STYLES · v2 — INTERNATIONAL BLUE ERA
   Paper fields, night chapters, Klein-blue flares.
   Ornament is structure. Grunge is memory. B2B is the summit.
   ═══════════════════════════════════════════════════════════ */

/* ── base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* global grunge grain */
body::after{
  content: ""; position: fixed; inset: 0;
  background: url("../assets/noise.png") repeat;
  background-size: 128px;
  opacity: .05; pointer-events: none;
  z-index: 850;
}

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

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.s-dark :focus-visible, .s-blue :focus-visible { outline-color: var(--snow); }

[hidden] { display: none !important; }

.mono{
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .25em;
  text-transform: uppercase;
}

.display-xl{
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: .96;
}

.blue { color: var(--blue); }
.blue-hi { color: var(--blue-hi); }
.blue-dot { color: var(--blue); font-style: normal; }
.s-dark .blue-dot { color: var(--blue-hi); }

.visually-hidden{
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link{
  position: fixed; top: -100%; left: var(--gutter);
  background: var(--blue); color: var(--white);
  padding: .6rem 1.2rem; z-index: var(--z-preloader);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .2em; text-transform: uppercase;
  transition: top var(--dur-fast) var(--ease-out-expo);
}
.skip-link:focus { top: 0; }

main { position: relative; z-index: var(--z-base); }
section { position: relative; }

/* ── section themes ───────────────────────────────────────── */
.s-light{ background: var(--paper); color: var(--ink); }
.s-dark{ background: var(--ink); color: var(--snow); }
.s-blue{ background: var(--grad-blue); color: var(--white); }

/* ── buttons ──────────────────────────────────────────────── */
.btn{
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .22em; text-transform: uppercase;
  padding: 1.05em 2.2em; border-radius: 100px;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out-expo),
              color var(--dur-fast) var(--ease-out-expo),
              border-color var(--dur-fast) var(--ease-out-expo),
              box-shadow var(--dur-fast) var(--ease-out-expo);
  min-height: 44px;
  touch-action: manipulation;
  will-change: transform;
}
.btn--blue{
  background: var(--blue); color: var(--white); font-weight: 700;
}
.btn--blue:hover{
  background: var(--blue-deep);
  box-shadow: 0 0 0 1px var(--blue), 0 12px 40px var(--blue-30);
}
.btn--ghost-ink{ border-color: var(--ink-14); color: var(--ink); }
.btn--ghost-ink:hover{ border-color: var(--ink); }
.btn--ghost-blue{ border-color: var(--bluehi-35); color: var(--blue-hi); }
.btn--ghost-blue:hover{ border-color: var(--blue-hi); box-shadow: 0 0 24px var(--bluehi-14); }
.btn--ghost-snow{ border-color: var(--snow-line); color: var(--snow); }
.btn--ghost-snow:hover{ border-color: var(--snow); }

/* ── section headers ─────────────────────────────────────── */
.section-head{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(2.5rem, 6vh, 4.5rem);
}
.section-head--row{
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
}
.section-head--small{ padding-bottom: 1.5rem; }
.section-head__kicker{
  display: block; margin-bottom: 1.2rem; color: var(--blue);
}
.s-dark .section-head__kicker{ color: var(--blue-hi); }
.section-head__title{
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.04;
}
.section-head__sub{
  max-width: 46rem; margin-top: 1.1rem;
  color: var(--stone);
}
.s-dark .section-head__sub{ color: var(--ash); }

/* sections default vertical rhythm */
.origin, .axis, .symbol, .palette, .production, .heritage,
.lookbook, .partnership{ padding: var(--section-gap) 0; }

/* any section hosting drifting contours must clip them */
.origin, .manifesto, .peaks, .heritage, .partnership{ overflow: hidden; }

/* ── 00 · preloader (paper) ──────────────────────────────── */
.preloader{
  position: fixed; inset: 0; z-index: var(--z-preloader);
  background: var(--paper);
  display: grid; place-items: center;
  clip-path: circle(150% at 50% 50%);
  overflow: hidden;
}
.preloader.is-done { pointer-events: none; }
/* faint grain over the paper (global grain sits below the preloader) */
.preloader::before{
  content: ""; position: absolute; inset: 0;
  background: url("../assets/noise.png") repeat; background-size: 128px;
  opacity: .05; pointer-events: none;
}
/* hairline registration marks — technical, editorial */
.preloader::after{
  content: ""; position: absolute; inset: clamp(1.2rem, 4vw, 3rem);
  border: 1px solid var(--ink-08); pointer-events: none;
}

.preloader__stage{
  position: relative; z-index: 2;
  display: grid; place-items: center;
  gap: clamp(1.5rem, 4vh, 2.6rem);
  padding: 0 var(--gutter);
}
.preloader__tunduk{ width: clamp(104px, 17vw, 168px); }
.preloader__tunduk svg{ width: 100%; height: auto; }

/* logo + runes inscribe themselves left-to-right */
.preloader__logo{
  width: clamp(150px, 20vw, 200px); height: auto;
  clip-path: inset(0 100% 0 0); opacity: 0;
  transition: clip-path 1s var(--ease-out-expo), opacity .5s ease;
}
.preloader__runes{
  width: clamp(220px, 32vw, 360px); height: auto;
  clip-path: inset(0 100% 0 0); opacity: 0;
  transition: clip-path 1.1s var(--ease-out-expo), opacity .5s ease;
}
.preloader.is-revealing .preloader__logo{ clip-path: inset(0); opacity: 1; transition-delay: .35s; }
.preloader.is-revealing .preloader__runes{ clip-path: inset(0); opacity: 1; transition-delay: .6s; }

/* status foot: entry line (left) + big counter (right) */
.preloader__foot{
  position: absolute; z-index: 2;
  left: clamp(1.6rem, 5vw, 4rem); right: clamp(1.6rem, 5vw, 4rem);
  bottom: clamp(1.6rem, 5vw, 3.4rem);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
}
.preloader__line{
  font-size: var(--fs-micro);
  letter-spacing: .4em; text-transform: uppercase; color: var(--stone);
  padding-bottom: .35rem;
}
.preloader__counter{
  font-family: var(--font-mono);
  font-size: clamp(2.2rem, 6vw, 4rem); color: var(--blue);
  letter-spacing: .02em; line-height: .9;
  font-variant-numeric: tabular-nums;
}
.preloader__progress{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: 2px; background: var(--ink-08);
}
.preloader__progress-fill{
  display: block; height: 100%; width: 0;
  background: var(--blue);
  box-shadow: 0 0 12px var(--blue-30);
}

/* ── scroll progress ─────────────────────────────────────── */
.scroll-progress{
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  background: var(--blue); transform-origin: 0 50%;
  transform: scaleX(0); z-index: calc(var(--z-nav) + 1);
}

/* ── custom cursor ───────────────────────────────────────── */
.cursor{ display: none; }
@media (pointer: fine) and (min-width: 1024px){
  .cursor{
    display: block; position: fixed; top: 0; left: 0;
    z-index: var(--z-cursor); pointer-events: none;
  }
  .cursor__ring{
    position: absolute; width: 38px; height: 38px;
    border: 1.5px solid var(--blue); border-radius: 50%;
    translate: -50% -50%;
    display: grid; place-items: center;
    transition: width .28s var(--ease-out-expo), height .28s var(--ease-out-expo),
                background .28s var(--ease-out-expo);
  }
  .cursor__dot{
    position: absolute; width: 4px; height: 4px;
    background: var(--blue); border-radius: 50%;
    translate: -50% -50%;
  }
  .cursor__label{
    font-size: .55rem; letter-spacing: .18em; color: var(--white);
    opacity: 0; transition: opacity .2s;
  }
  .cursor.is-magnetic .cursor__ring{ width: 56px; height: 56px; background: var(--blue-08); }
  .cursor.is-view .cursor__ring{ width: 74px; height: 74px; background: var(--blue); border-color: var(--blue); }
  .cursor.is-view .cursor__label{ opacity: 1; }
  .cursor.is-view .cursor__dot{ opacity: 0; }
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
}

/* ── 01 · navigation (paper) ─────────────────────────────── */
.nav{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--gutter);
  transition: background var(--dur-mid), backdrop-filter var(--dur-mid), padding var(--dur-mid);
}
.nav.is-scrolled{
  background: var(--paper-veil);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-block: .7rem;
  border-bottom: 1px solid var(--ink-08);
}
.nav__logo{ position: relative; display: block; height: 30px; }
/* wordmark as mask: blue → deep blue on hover */
.nav__logo-mark{
  display: block; width: 118px; height: 30px;
  background: var(--blue);
  -webkit-mask: url("../assets/logo-white.png") left center / contain no-repeat;
          mask: url("../assets/logo-white.png") left center / contain no-repeat;
  transition: background var(--dur-fast);
}
.nav__logo:hover .nav__logo-mark{ background: var(--ink); }

.nav__links{ display: flex; gap: clamp(1.2rem, 2.6vw, 2.6rem); }
.nav__links a{
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .2em; text-transform: uppercase; color: var(--stone);
  padding: .5rem 0; position: relative;
  transition: color var(--dur-fast);
}
.nav__links a::after{
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px; background: var(--blue);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform var(--dur-fast) var(--ease-out-expo);
}
.nav__links a:hover{ color: var(--ink); }
.nav__links a:hover::after{ transform: scaleX(1); transform-origin: 0 50%; }

.nav__right{ display: flex; align-items: center; gap: 1rem; }
.nav__cta{ padding: .75em 1.8em; }

.nav__burger{
  display: none; width: 44px; height: 44px;
  flex-direction: column; justify-content: center; align-items: center; gap: 7px;
}
.nav__burger span{
  display: block; width: 26px; height: 1.5px; background: var(--ink);
  transition: transform var(--dur-fast) var(--ease-out-expo);
}
.nav__burger[aria-expanded="true"] span:first-child{ transform: translateY(4.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform: translateY(-4.25px) rotate(-45deg); }

/* mobile menu (paper) */
.mobile-menu{
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--paper);
  display: grid; align-content: center; gap: .4rem;
  padding: var(--gutter);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-mid) var(--ease-out-expo), visibility var(--dur-mid);
}
.mobile-menu.is-open{ opacity: 1; visibility: visible; }
.mobile-menu__contours{ position: absolute; inset: 0; opacity: .5; pointer-events: none; }
.mobile-menu__links{ display: grid; gap: .4rem; position: relative; }
.mobile-menu__links a{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 8.5vw, 3.2rem); text-transform: uppercase;
  letter-spacing: -0.02em; padding: .35rem 0; color: var(--ink);
  opacity: 0; transform: translateY(24px);
  transition: opacity .5s var(--ease-out-expo), transform .5s var(--ease-out-expo), color .3s;
}
.mobile-menu.is-open .mobile-menu__links a{ opacity: 1; transform: none; }
.mobile-menu__links a:hover{ color: var(--blue); }
.mobile-menu__shop{ color: var(--blue) !important; }
.mobile-menu__foot{
  position: absolute; bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  left: var(--gutter); color: var(--stone);
}
.mobile-menu.is-open .mobile-menu__links a:nth-child(1){ transition-delay: .05s; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(2){ transition-delay: .1s; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(3){ transition-delay: .15s; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(4){ transition-delay: .2s; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(5){ transition-delay: .25s; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(6){ transition-delay: .3s; }

/* ── 02 · hero — paper sky ───────────────────────────────── */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  background: var(--grad-sky);
}
.hero__gl, .hero__fallback{ position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__fallback{ display: none; }
.hero__fallback svg{ width: 100%; height: 100%; }
.hero.no-webgl .hero__fallback{ display: block; }
.hero.no-webgl .hero__gl{ display: none; }

.hero__video-slot{
  position: absolute; inset: 0; opacity: .3; pointer-events: none;
}
.hero__video-slot video{ width: 100%; height: 100%; object-fit: cover; }

.hero__runes{
  position: absolute; top: 50%; right: calc(var(--gutter) * .6);
  translate: 0 -50%;
  width: clamp(14px, 1.6vw, 24px); height: min(72vh, 640px);
  background: var(--ink); opacity: .3;
  -webkit-mask: url("../assets/slogan-runes.webp") center / contain no-repeat;
          mask: url("../assets/slogan-runes.webp") center / contain no-repeat;
}

.hero__content{
  position: relative; z-index: 2;
  /* type lives on the paper field; the cobalt range owns the bottom third */
  padding: 0 var(--gutter) clamp(13rem, 30vh, 19rem);
  max-width: var(--max-w); width: 100%; margin: 0 auto;
}
.hero__b2b{ color: var(--blue); margin-bottom: 1.4rem; letter-spacing: .3em; }
.hero__title{ margin-bottom: 1.6rem; color: var(--ink); }
.hero__title .line{ display: block; overflow: hidden; }
.hero__title .word{ display: inline-block; }
.word--peak{
  background: linear-gradient(120deg, var(--navy) 20%, var(--blue) 80%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.word--peak .blue-dot{ -webkit-text-fill-color: var(--blue); }

.hero__sub{ color: var(--stone); max-width: 52ch; margin-bottom: 2.2rem; }
.hero__cta{ display: flex; gap: 1rem; flex-wrap: wrap; }

.hero__data{ position: absolute; color: var(--stone); z-index: 2; opacity: .85; }
.hero__data--tr{ top: calc(76px + 1rem); right: var(--gutter); }
/* bottom corners sit on the cobalt range → paper type */
.hero__data--bl{ bottom: 1.6rem; left: var(--gutter); color: rgba(244,242,236,.8); }
.hero__data--br{
  bottom: 1.6rem; right: var(--gutter);
  display: inline-flex; align-items: center; gap: .7em;
  color: rgba(244,242,236,.8);
}
.hero__scroll-hint{ display: inline-block; width: 18px; height: 18px; }
.hero__scroll-hint svg{ width: 100%; height: 100%; }

/* ── marquees ────────────────────────────────────────────── */
.marquee{
  position: relative; overflow: hidden;
  padding: .95rem 0;
}
.marquee--blue{ background: var(--grad-blue); color: var(--white); }
.marquee--ink{ background: var(--ink); color: var(--snow); border-top: 1px solid var(--snow-line); }
.marquee__track{
  display: inline-flex; white-space: nowrap;
  will-change: transform;
  animation: marquee 36s linear infinite;
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* ── contours ────────────────────────────────────────────── */
.contours{ position: absolute; inset: -10%; pointer-events: none; }
.contours--light{ opacity: .35; }
.contours--dark{ opacity: .16; }
.contours svg{ width: 100%; height: 100%; }

/* ── 03 · origin ─────────────────────────────────────────── */
.origin__layout{
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 6rem);
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter);
  align-items: start; position: relative;
}
.origin__lead{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.2rem, 2.3vw, 1.7rem); line-height: 1.42;
  margin-bottom: 1.4rem;
}
.origin__body{ color: var(--stone); max-width: 56ch; margin-bottom: 1.6rem; }
.origin__stamp{
  display: inline-block; color: var(--blue);
  border: 1.5px solid var(--blue);
  padding: .7em 1.2em; letter-spacing: .3em;
  transform: rotate(-1.5deg);
  margin-bottom: 2.4rem;
}
.origin__facts{
  display: grid; grid-template-columns: repeat(4, auto);
  gap: 1.2rem 2.6rem; justify-content: start;
  border-top: 1px solid var(--ink-14); padding-top: 1.6rem;
}
.origin__facts dt{ color: var(--stone); margin-bottom: .35rem; }
.origin__facts dd{ font-weight: 600; }

.origin__media{
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  border: 1px solid var(--ink-14);
  background:
    linear-gradient(rgba(244,242,236,.2), rgba(244,242,236,.2)),
    url("../assets/pattern-light.webp") center / cover;
  display: grid; place-items: end start;
}
.origin__media figcaption{ position: relative; padding: 1rem; color: var(--stone); }
.origin__media img, .origin__media video{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* ── 04 · manifesto (night opens) ────────────────────────── */
.manifesto{
  padding: clamp(2rem, 6vh, 4rem) var(--gutter);
  min-height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--grad-dusk);
}
.manifesto__inner{
  position: relative; text-align: center;
  /* fills more of the pinned viewport without overflowing it */
  font-size: clamp(1.5rem, 3.9vw, 3rem);
  max-width: 26ch;
}
.manifesto__line{
  font-family: var(--font-display); font-weight: 500;
  font-size: inherit; line-height: 1.24; letter-spacing: -0.01em;
}
.manifesto__line--gap{ margin-top: clamp(1.8rem, 4.4vh, 3.2rem); }
.manifesto__brand{
  color: var(--blue-hi); font-weight: 700;
  text-shadow: 0 0 40px var(--bluehi-35);
}

/* manifesto terrain — Tian Shan scan behind the pinned lines */
.manifesto{ position: relative; }
.manifesto__inner{ z-index: 3; }
/* soft veil keeps the lines readable over the lit massif */
.manifesto__inner::before{
  content: ""; position: absolute; inset: -14% -22%; z-index: -1;
  background: radial-gradient(closest-side, rgba(11, 12, 14, .58), rgba(11, 12, 14, 0) 78%);
}
.manifesto__gl{
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}
.manifesto__fog{
  position: absolute; left: -6%; width: 112%; height: 40%;
  z-index: 2; pointer-events: none; overflow: hidden;
}
.manifesto__fog--top{
  top: -1px;
  background:
    radial-gradient(56% 90% at 20% 0%, rgba(16, 26, 48, .92) 0%, rgba(16, 26, 48, 0) 66%),
    radial-gradient(62% 96% at 76% 4%, rgba(13, 21, 38, .88) 0%, rgba(13, 21, 38, 0) 68%),
    linear-gradient(180deg, var(--ink) 2%, rgba(11, 12, 14, 0) 92%);
}
.manifesto__fog--bottom{
  bottom: -1px; transform: scaleY(-1);
  background:
    radial-gradient(58% 92% at 30% 0%, rgba(18, 30, 56, .9) 0%, rgba(18, 30, 56, 0) 66%),
    radial-gradient(60% 90% at 82% 5%, rgba(13, 21, 38, .86) 0%, rgba(13, 21, 38, 0) 70%),
    linear-gradient(180deg, #101a30 2%, rgba(16, 26, 48, 0) 90%);
}
/* drifting cloud banks — transform-only, compositor-cheap */
.manifesto__fog::before, .manifesto__fog::after{
  content: ""; position: absolute; inset: -22% -34%;
  background: radial-gradient(38% 52% at 50% 46%, rgba(70, 92, 138, .17), transparent 72%);
  animation: fog-drift 27s ease-in-out infinite alternate;
}
.manifesto__fog::after{
  background: radial-gradient(30% 44% at 38% 60%, rgba(46, 91, 255, .07), transparent 74%);
  animation-duration: 37s; animation-delay: -14s;
}
@keyframes fog-drift{
  from{ transform: translate3d(-5%, -1%, 0) }
  to{   transform: translate3d(6%, 2.5%, 0) }
}
@media (prefers-reduced-motion: reduce){
  .manifesto__fog::before, .manifesto__fog::after{ animation: none; }
}

/* ── 02b · the land — Kyrgyzstan atlas ───────────────────── */
.atlas{ position: relative; padding: var(--section-gap) 0; background: var(--ink); overflow: hidden; }
.atlas__stage{
  max-width: min(1360px, calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 3.4vw, 3.6rem); align-items: center;
}
.atlas__map svg{ width: 100%; height: auto; display: block; }

/* regional locator — where the republic sits */
.atlas__side{ display: grid; gap: 1.1rem; align-content: center; }
.atlas__side-tag{
  color: var(--cyan); letter-spacing: .3em; font-size: .66rem;
  display: inline-flex; align-items: center; gap: .7em;
}
.atlas__side-tag::before{ content: ""; width: 24px; height: 1px; background: var(--cyan); }
.atlas__locator{ border: 1px solid var(--snow-line); background: rgba(244, 245, 242, .02); }
.atlas__locator svg{ width: 100%; height: auto; display: block; }
.loc-name{ font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .3em; fill: rgba(244,245,242,.34); }
.loc-name--kg{ fill: var(--snow); font-weight: 700; font-size: 12.5px; letter-spacing: .2em; }
.atlas__stage.is-live .loc-kg{ animation: loc-breathe 4.5s ease-in-out infinite 1.2s; }
@keyframes loc-breathe{
  0%, 100%{ fill: rgba(46, 91, 255, .22); }
  50%{ fill: rgba(46, 91, 255, .44); }
}
.loc-dot{ opacity: 0; transition: opacity .6s ease 1.7s; }
.atlas__stage.is-live .loc-dot{ opacity: 1; animation: loc-blink 2.4s steps(2, start) infinite 1.7s; }
@keyframes loc-blink{ 50%{ opacity: .3; } }
.atlas__side-note{ color: var(--ash); font-size: .95rem; line-height: 1.6; max-width: 40ch; }
.atlas__side-note b{ color: var(--snow); font-weight: 600; }
@media (max-width: 980px){
  .atlas__stage{ grid-template-columns: 1fr; }
  .atlas__side{ max-width: 480px; }
}
.atlas-geo{ font-family: var(--font-mono); font-size: 12px; letter-spacing: .5em; fill: rgba(244,245,242,.22); }
.atlas-tag{ font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .18em; fill: var(--snow); }
.atlas-sub{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; fill: var(--ash); }

/* armed by IO — border draws, relief fades, plants pulse, line runs */
.atlas-dots{ opacity: 0; transition: opacity 1.6s ease .9s; }
.atlas__map.is-live .atlas-dots{ opacity: 1; }
.atlas-plant{ opacity: 0; transition: opacity .7s ease var(--pd, .5s); }
.atlas__map.is-live .atlas-plant{ opacity: 1; }
.atlas-link{ opacity: 0; transition: opacity .9s ease 1.2s; }
.atlas__map.is-live .atlas-link{ opacity: 1; animation: atlas-dash 9s linear infinite; }
@keyframes atlas-dash{ to{ stroke-dashoffset: -260; } }
.atlas-pulse{ fill: none; opacity: 0; transform-box: fill-box; transform-origin: center; }
.atlas__map.is-live .atlas-pulse{ animation: atlas-pulse 3s ease-out infinite var(--pd, 0s); }
.atlas__map.is-live .atlas-pulse--late{ animation-delay: calc(var(--pd, 0s) + 1.5s); }
@keyframes atlas-pulse{
  0%{ transform: scale(.5); opacity: .9; }
  70%{ opacity: 0; }
  100%{ transform: scale(3.4); opacity: 0; }
}
.atlas .prod-facts{ margin: clamp(2.8rem, 7vh, 5rem) auto 0; }
.prod-facts--dark .prod-fact{ border-left-color: var(--snow-line); }
.prod-facts--dark .prod-fact__num{ color: var(--blue-hi); }
.prod-facts--dark .prod-fact__label{ color: var(--ash); }
@media (max-width: 760px){
  .atlas-tag{ font-size: 24px; }
  .atlas-sub{ font-size: 17px; }
  .atlas-geo{ font-size: 18px; }
}
@media (prefers-reduced-motion: reduce){
  .atlas-dots, .atlas-plant, .atlas-link{ opacity: 1; transition: none; }
  .atlas__map.is-live .atlas-link, .atlas__map.is-live .atlas-pulse{ animation: none; }
}

/* ── 05 · seven peaks (night) ────────────────────────────── */
.peaks{ padding: var(--section-gap) 0; overflow: hidden; }
.peaks__layout{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 6rem);
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter);
  align-items: start;
}
.peaks__list{ display: grid; border-top: 1px solid var(--snow-line); }
.peak{ border-bottom: 1px solid var(--snow-line); position: relative; }
.peak__btn{
  display: grid; grid-template-columns: 3.4rem 1fr auto;
  align-items: baseline; gap: 1rem;
  width: 100%; text-align: left;
  padding: 1.35rem .5rem;
  transition: padding var(--dur-fast) var(--ease-out-expo);
}
.peak__num{ color: var(--ash); }
.peak__name{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  text-transform: uppercase; letter-spacing: -0.01em;
  transition: color var(--dur-fast), font-size .45s var(--ease-out-expo);
}
.peak__aka{ font-weight: 300; color: var(--ash); font-size: .6em; letter-spacing: .05em; }
.peak__alt{ color: var(--ash); font-size: .8rem; }
.peak__coord{
  display: block; padding: 0 .5rem 1rem 4.9rem;
  color: var(--ash); opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity var(--dur-fast), max-height var(--dur-fast) var(--ease-out-expo);
}
.peak.is-active .peak__coord{ opacity: .85; max-height: 3rem; }
.peak.is-active .peak__name{ color: var(--blue-hi); font-size: clamp(1.6rem, 3vw, 2.5rem); }
.peak.is-active .peak__btn{ padding-block: 1.7rem; }
.peak--summit .peak__num{ color: var(--blue-hi); }
.peak--summit::before{
  content: ""; position: absolute; left: -1.1rem; top: 50%;
  width: 6px; height: 6px; background: var(--blue-hi);
  transform: translateY(-50%) rotate(45deg);
}

.peaks__stage{ position: sticky; top: 12vh; display: grid; gap: 1.4rem; }
.peaks__ridge svg{ width: 100%; height: auto; }
.peaks__readout{
  font-size: clamp(3rem, 7vw, 6rem);
  letter-spacing: .02em; line-height: 1; color: var(--snow);
}
.peaks__unit{ color: var(--blue-hi); font-size: .5em; margin-left: .15em; }

.peaks__media{ position: relative; aspect-ratio: 3 / 4; max-height: 46vh; }
.peak-media{
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(18,35,74,.8), transparent),
    linear-gradient(160deg, var(--ink-soft), var(--ink) 70%);
  border: 1px solid var(--snow-line);
  display: grid; place-items: end start;
  opacity: 0; clip-path: inset(0 0 100% 0);
  transition: opacity .6s var(--ease-out-expo), clip-path .8s var(--ease-out-expo);
  overflow: hidden;
}
.peak-media::before{
  content: ""; position: absolute; inset: 0;
  background: url("../assets/pattern-alakiyiz.webp") center / cover;
  opacity: .2;
}
.peak-media.is-active{ opacity: 1; clip-path: inset(0 0 0% 0); }
.peak-media figcaption{ position: relative; padding: 1rem; color: var(--ash); letter-spacing: .3em; }
.peak-media img, .peak-media video{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* ── ridge divider — night resolves to paper ─────────────── */
.ridge-divider{
  position: relative; margin-top: -1px;
  max-height: 44vh; overflow: hidden;
  background: var(--ink);
}
.ridge-divider img{
  width: 100%; height: auto; opacity: .96;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%);
          mask-image: linear-gradient(180deg, transparent 0, #000 18%);
}

/* ── 06 · the fourth axis ────────────────────────────────── */
.axis__grid{
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--ink-14);
  border: 1px solid var(--ink-14);
  max-width: 1100px; margin: 0 auto;
}
.axis-card{
  background: var(--paper);
  padding: clamp(1.6rem, 3.4vw, 3rem);
  min-height: 230px;
  display: grid; gap: .8rem; align-content: start;
  transition: background var(--dur-mid);
}
.axis-card:hover{ background: var(--white); }
.axis-card__num{ color: var(--stone); }
.axis-card__name{
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h3); text-transform: uppercase; letter-spacing: -0.01em;
}
.axis-card__desc{ color: var(--stone); max-width: 38ch; }
.axis-card--ours{ background: var(--blue); color: var(--white); }
.axis-card--ours:hover{ background: var(--blue-deep); }
.axis-card--ours .axis-card__num{ color: rgba(255,255,255,.75); }
.axis-card--ours .axis-card__desc{ color: rgba(255,255,255,.85); }
.axis__foot{
  text-align: center; margin: 3rem auto 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
}
.axis__foot em{ font-style: normal; color: var(--blue); border-bottom: 2px solid var(--blue); }

/* ── 07 · pillars — blue band ────────────────────────────── */
.pillars{
  padding: clamp(4rem, 10vh, 7rem) var(--gutter);
  text-align: center; overflow: hidden;
}
.pillars__kicker{ display: block; margin-bottom: 2rem; color: rgba(255,255,255,.7); }
.pillars__words{
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.2rem, 3.5vw, 3rem); flex-wrap: wrap;
}
.pillars__word{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.6rem, 5.4vw, 4.6rem);
  text-transform: uppercase; letter-spacing: -0.02em;
  color: var(--white);
}
.pillars__dot{
  width: 10px; height: 10px; background: var(--white);
  transform: rotate(45deg); opacity: .8; flex-shrink: 0;
}

/* ── 08 · logotype decode — three shapes, one word ───────── */
.symbol__stage{
  display: flex; align-items: stretch; justify-content: center;
  gap: clamp(.8rem, 2vw, 2rem); flex-wrap: wrap;
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter);
}
.symbol__part{
  display: grid; justify-items: center; align-content: start; gap: .7rem;
  padding: clamp(1.2rem, 2.6vw, 2.4rem);
  border: 1px solid var(--ink-14);
  background: var(--white);
  width: clamp(150px, 17vw, 230px);
  text-align: center;
  color: inherit; font: inherit;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-out-expo);
}
button.symbol__part{ cursor: pointer; }
button.symbol__part:hover, button.symbol__part:focus-visible{
  border-color: var(--blue); box-shadow: 0 18px 44px var(--blue-14); transform: translateY(-4px);
  outline: none;
}
.symbol__part .mono{ color: var(--blue); letter-spacing: .22em; }
.symbol__part em{ font-style: normal; color: var(--stone); font-size: .8rem; line-height: 1.45; }
.symbol__art{ width: clamp(74px, 8vw, 116px); aspect-ratio: 1; display: grid; place-items: center; color: var(--navy); }
.symbol__art svg{ width: 100%; height: 100%; overflow: visible; }
button.symbol__part:hover .symbol__art{ color: var(--blue); }

.symbol__plus{
  align-self: center;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.6rem); color: var(--stone);
}
.symbol__plus--eq{ color: var(--blue); font-weight: 700; }

/* the wordmark card — result of the equation */
.symbol__part--mark{
  border-color: var(--blue); border-width: 1.5px;
  justify-content: center; align-content: center; gap: 1rem;
  box-shadow: 0 24px 60px var(--blue-14);
  position: relative;
}
.symbol__wordmark{ position: relative; width: 100%; display: grid; place-items: center; }
.symbol__wordmark img{ width: 100%; max-width: 174px; height: auto; }
/* a scan sweep runs across the wordmark when a shape is queried */
.symbol__wordmark::after{
  content: ""; position: absolute; inset: -6% -2%;
  background: linear-gradient(90deg, transparent, var(--blue-14), transparent);
  transform: translateX(-120%); opacity: 0; pointer-events: none;
}
.symbol__part--mark.is-scanning .symbol__wordmark::after{
  animation: wm-scan .9s var(--ease-in-out);
}
@keyframes wm-scan{
  0%{ transform: translateX(-120%); opacity: 1; }
  100%{ transform: translateX(120%); opacity: 0; }
}
.symbol__hint{
  min-height: 1.2em; color: var(--stone); letter-spacing: .2em;
  transition: color var(--dur-fast);
}
.symbol__part--mark.is-active .symbol__hint{ color: var(--blue); }

.symbol__foot{
  text-align: center; margin: 3.4rem auto 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
}
.symbol__foot b{ color: var(--blue); }

/* ── 08b · slogan decode — the oldest script, the newest word ── */
.slogan-decode{ overflow: hidden; }
.decode{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter);
  border-top: 1px solid var(--ink-14);
  padding-top: clamp(2.4rem, 5vw, 4rem);
}
.decode__col{
  display: grid; justify-items: center; gap: 1.1rem; text-align: center;
}
.decode__runes{
  display: grid; place-items: center; width: 100%;
  height: clamp(48px, 7vw, 96px);
}
.decode__runes img{ height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.decode__bracket{
  width: 78%; height: 14px;
  border: 1.5px solid var(--blue);
  border-top: 0;
  border-radius: 0 0 3px 3px;
  position: relative;
}
.decode__bracket::after{
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 1.5px; height: 12px; background: var(--blue); translate: -50% 0;
}
.decode__latin{
  color: var(--ink); letter-spacing: .16em; font-size: .82rem;
  margin-top: .6rem;
}
.decode__mean{
  font-family: var(--font-display); font-weight: 500; color: var(--stone);
  font-size: clamp(1rem, 1.8vw, 1.35rem);
}
.decode__result{
  display: grid; justify-items: center; gap: .7rem; text-align: center;
  margin-top: clamp(2.6rem, 6vw, 4.4rem);
}
.decode__result-big{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.6rem, 5vw, 3.6rem); text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 1;
}
.decode__result-sub{ color: var(--blue); letter-spacing: .3em; }

/* the slogan, worn — anamorphic RUKH strip (85:36 source) */
.slogan-film{
  position: relative; overflow: hidden;
  max-width: min(1180px, calc(100% - 2 * var(--gutter)));
  margin: clamp(2.6rem, 6vw, 4.4rem) auto 0;
  border: 1px solid var(--ink-14);
  aspect-ratio: 85 / 36;
  background: var(--ink);
}
.slogan-film video{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.slogan-film figcaption{
  position: absolute; left: .9rem; bottom: .9rem; z-index: 2;
  padding: .45em .8em; font-size: .58rem; letter-spacing: .22em;
  background: var(--paper-veil); color: var(--ink);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
@media (max-width: 700px){
  .slogan-film{ aspect-ratio: 16 / 9; }   /* anamorphic is unreadably short on phones */
}
.palette__strip{
  display: flex; gap: 6px;
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter);
  height: clamp(220px, 38vh, 360px);
}
.swatch{
  flex: 1; position: relative;
  background: var(--sw); color: var(--tx);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: 1.2rem;
  border: 1px solid var(--ink-08);
  transition: flex .55s var(--ease-out-expo);
  overflow: hidden; text-align: left;
}
.swatch:hover, .swatch:focus-visible{ flex: 2.4; }
.swatch__name{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(.8rem, 1.2vw, 1.05rem); text-transform: uppercase;
  white-space: nowrap;
}
.swatch__hex{ opacity: .75; margin-top: .3rem; letter-spacing: .18em; }
.palette__foot{
  text-align: center; color: var(--stone);
  margin: 2.6rem auto 0; max-width: 46rem; padding: 0 var(--gutter);
}

/* ── 10 · four lines (night) ─────────────────────────────── */
.lines{ padding: var(--section-gap) 0; overflow: hidden; }
.lines__rows{
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter);
  border-top: 1px solid var(--snow-line);
}
.line-row{
  display: grid; grid-template-columns: 8rem 1fr minmax(14rem, auto);
  gap: 1.5rem 2.5rem; align-items: start;
  padding: 2rem .5rem;
  border-bottom: 1px solid var(--snow-line);
  transition: background var(--dur-mid), padding var(--dur-fast);
}
.line-row:hover{ background: var(--ink-soft); padding-left: 1rem; }
.line-row__share{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.8rem);
  color: var(--blue-hi); line-height: 1;
}
.line-row__name{
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h3); text-transform: uppercase; margin-bottom: .5rem;
}
.line-row__desc{ color: var(--ash); max-width: 56ch; }
.line-row__meta{ color: var(--cyan); letter-spacing: .18em; text-align: right; line-height: 1.9; }
.lines__foot{
  text-align: center; color: var(--ash);
  padding: 2.4rem var(--gutter) 0; letter-spacing: .3em;
}

/* ── 11 · capsules (night) ───────────────────────────────── */
.capsules{ background: linear-gradient(var(--ink), #101a30 160%); }
.capsules__pin{
  padding: var(--section-gap) 0 calc(var(--section-gap) * .6);
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
}
.capsules__hint{ color: var(--ash); padding-bottom: 1.4rem; }
.capsules__viewport{ overflow: hidden; }
.capsules__track{
  display: flex; gap: clamp(1.2rem, 3vw, 3rem);
  padding: 0 var(--gutter);
  width: max-content;
  will-change: transform;
}
.capsule{
  width: clamp(280px, 24vw, 390px);
  flex-shrink: 0;
  background: var(--ink-soft);
  border: 1px solid var(--snow-line);
  transition: border-color var(--dur-fast);
  will-change: transform;
}
.capsule:hover{ border-color: var(--bluehi-35); }
.capsule__media{
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background:
    radial-gradient(140% 100% at 70% 0%, rgba(18,35,74,.85), transparent),
    linear-gradient(200deg, var(--ink-soft), var(--ink));
  border-bottom: 1px solid var(--snow-line);
  display: grid; place-items: center;
}
.capsule__media::before{
  content: ""; position: absolute; inset: 0;
  background: url("../assets/pattern-alakiyiz.webp") center / cover;
  opacity: .16; transition: opacity var(--dur-mid), transform 1.2s var(--ease-out-expo);
}
.capsule:hover .capsule__media::before{ opacity: .26; transform: scale(1.04); }
.capsule__ghost{
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(3rem, 6vw, 5rem); letter-spacing: .02em;
  color: transparent; -webkit-text-stroke: 1px rgba(244,245,242,.22);
  user-select: none;
}
.capsule__media img, .capsule__media video{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.capsule__body{ padding: 1.4rem; display: grid; gap: .55rem; }
.capsule__collab{ color: var(--cyan); letter-spacing: .28em; }
.capsule__name{
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h3); text-transform: uppercase;
}
.capsule__story{ color: var(--ash); font-size: .95rem; max-width: 34ch; }
.capsule__tags{ color: var(--ash); opacity: .7; letter-spacing: .18em; }
.capsule__view{
  margin-top: .5rem; color: var(--blue-hi); letter-spacing: .3em;
  width: fit-content; position: relative;
}
.capsule__view::after{
  content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 100%;
  background: var(--blue-hi); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur-fast) var(--ease-out-expo);
}
.capsule__view:hover::after{ transform: scaleX(1); }

/* ── 12 · technology (night) ─────────────────────────────── */
.tech{ padding: var(--section-gap) 0; background: linear-gradient(var(--ink), #101a30 140%); }
.tech__layout{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 6rem);
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter);
  align-items: stretch;
}
.tech__diagram-wrap{ align-self: start; position: sticky; top: 14vh; }
.tech__diagram svg{ width: 100%; height: auto; }

.tech__cards{ display: grid; gap: 1.2rem; align-content: space-between; }
.spec-card{
  border: 1px solid var(--snow-line);
  border-left: 2px solid var(--cyan);
  background: var(--ink-soft);
  padding: 1.6rem 1.8rem;
  display: grid; gap: .5rem;
  transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out-expo);
}
.spec-card:hover{ transform: translateX(6px); }
.spec-card.is-lit{ border-left-color: var(--blue-hi); }
.spec-card__label{ color: var(--cyan); letter-spacing: .3em; }
.spec-card.is-lit .spec-card__label{ color: var(--blue-hi); }
.spec-card__copy{ color: var(--snow); }

/* ── 12b · material intelligence — innovation showcase ───── */
.innov{ max-width: var(--max-w); margin: clamp(4rem, 8vh, 7rem) auto 0; padding: 0 var(--gutter); }
.innov__head{ max-width: 62ch; margin-bottom: clamp(1.6rem, 3vw, 2.8rem); }
.innov__kicker{ color: var(--cyan); letter-spacing: .34em; font-size: .7rem; display: inline-flex; align-items: center; gap: .7em; }
.innov__kicker::before{ content: ""; width: 26px; height: 1px; background: var(--cyan); }
.innov__title{
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3);
  color: var(--snow); line-height: 1.02; margin: .55rem 0 .85rem;
}
.innov__lead{ color: var(--ash); max-width: 56ch; }

.innov__grid{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}
.innov-card{
  border: 1px solid var(--snow-line); background: var(--ink-soft);
  display: flex; flex-direction: column;
  transition: border-color var(--dur-fast);
}
.innov-card:hover{ border-color: var(--bluehi-35); }
.innov-card--wide{ grid-column: 1 / -1; display: grid; grid-template-columns: 1.5fr 1fr; }

.innov-card__media{ position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--ink); }
.innov-card__media img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.innov-card:hover .innov-card__media img{ transform: scale(1.04); }
.innov-card__chip{
  position: absolute; left: .9rem; bottom: .9rem; z-index: 2;
  padding: .4em .7em; font-size: .56rem; letter-spacing: .24em; color: var(--snow);
  background: rgba(11, 12, 14, .55); border: 1px solid var(--snow-line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.innov-card__pair{ display: grid; grid-template-columns: 1fr 1fr; }
.innov-card__pair .innov-card__media{ aspect-ratio: 1 / 1; }
.innov-card__pair .innov-card__media + .innov-card__media{ border-left: 1px solid var(--snow-line); }

.innov-card__body{ padding: clamp(1.3rem, 2vw, 1.9rem); display: flex; flex-direction: column; gap: .7rem; }
.innov-card__body--wide{ justify-content: center; }
.innov-card__tag{ color: var(--cyan); letter-spacing: .24em; font-size: .62rem; }
.innov-card__name{
  font-family: var(--font-display); font-weight: 500; color: var(--snow);
  font-size: clamp(1.1rem, 1.7vw, 1.5rem); line-height: 1.1;
}
.innov-card__copy{ color: var(--ash); font-size: .96rem; line-height: 1.56; }
.innov-card__specs{
  display: flex; flex-wrap: wrap; column-gap: 1.4rem; margin-top: .5rem;
  border-top: 1px solid var(--snow-line);
}
.innov-card__specs li{ flex: 1; min-width: 92px; padding-top: .9rem; display: flex; flex-direction: column; gap: .25em; }
.innov-card__specs b{ font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--blue-hi); }
.innov-card__specs span{ font-size: .52rem; letter-spacing: .16em; color: var(--ash); opacity: .8; }

/* FLX-THERMO™ loop — plays like a gif under the innovation grid */
.tech-film{
  position: relative; overflow: hidden;
  margin: clamp(1rem, 2vw, 1.6rem) auto 0;   /* stays centred when 78vh caps the width */
  border: 1px solid var(--snow-line);
  aspect-ratio: 16 / 9; max-height: 78vh;
  background: var(--ink);
}
.tech-film video{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.tech-film figcaption{
  position: absolute; left: .9rem; bottom: .9rem; z-index: 2;
  padding: .4em .7em; font-size: .56rem; letter-spacing: .24em; color: var(--snow);
  background: rgba(11, 12, 14, .55); border: 1px solid var(--snow-line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

@media (max-width: 860px){
  .innov__grid{ grid-template-columns: 1fr; }
  .innov-card--wide{ grid-template-columns: 1fr; }
  .tech-film{ aspect-ratio: 4 / 3; }
}

/* ── 13 · production ─────────────────────────────────────── */
/* full-cycle in numbers — drafting-grid band */
.prod-facts{
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: var(--max-w); margin: 0 auto clamp(2.6rem, 6vh, 4.5rem);
  padding: 0 var(--gutter);
}
.prod-fact{
  border-left: 1px solid var(--ink-14);
  padding: .5rem 1rem .5rem clamp(1rem, 1.8vw, 1.8rem);
  display: grid; gap: .6rem; align-content: start;
}
.prod-fact__num{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 3.7vw, 3.5rem); line-height: 1;
  letter-spacing: -0.02em; color: var(--blue);
}
.prod-fact__label{
  color: var(--stone); letter-spacing: .18em; font-size: .62rem;
  max-width: 26ch; line-height: 1.7;
}

/* two factories — one standard */
.plants{
  max-width: var(--max-w); margin: 0 auto clamp(2.6rem, 6vh, 4.5rem);
  padding: 0 var(--gutter);
}
.plants__lead{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.05rem, 1.9vw, 1.5rem); line-height: 1.4;
  max-width: 56ch; margin-bottom: clamp(1.4rem, 3vh, 2.4rem);
}
.plants__lead b{ color: var(--blue); font-weight: 600; }
.plants__grid{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.6rem);
}
.plant{
  position: relative; background: var(--white);
  border: 1px solid var(--ink-14); border-top: 2px solid var(--blue);
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
  display: grid; gap: .7rem; align-content: start;
}
.plant__tag{ color: var(--stone); letter-spacing: .26em; font-size: .62rem; }
.plant__city{
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.7rem, 3.2vw, 2.8rem); letter-spacing: -0.01em; line-height: 1;
}
.plant__role{ color: var(--blue); letter-spacing: .22em; font-size: .62rem; }
.plant__copy{ color: var(--stone); max-width: 52ch; }
.plant__coord{
  margin-top: .5rem; padding-top: .9rem;
  border-top: 1px solid var(--ink-08);
  color: var(--stone); opacity: .8; letter-spacing: .2em; font-size: .6rem;
}
@media (max-width: 900px){
  .prod-facts{ grid-template-columns: repeat(2, 1fr); row-gap: 1.8rem; }
  .plants__grid{ grid-template-columns: 1fr; }
}

.production__strip{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 2rem);
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter);
}
.production__photo{
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid var(--ink-14);
  background:
    linear-gradient(rgba(244,242,236,.35), rgba(244,242,236,.1)),
    url("../assets/pattern-light.webp") center / cover;
  display: grid; place-items: end start;
}
.production__photo figcaption{ position: relative; padding: 1rem; color: var(--stone); }
.production__photo img, .production__photo video{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.production__claims{
  display: flex; gap: clamp(1.5rem, 4vw, 4rem); flex-wrap: wrap; justify-content: center;
  margin-top: 3rem; padding: 0 var(--gutter);
}
.production__claims p{ display: flex; align-items: baseline; gap: .8rem; font-weight: 500; }

.tumar-bullet{
  flex-shrink: 0; width: 11px; height: 11px;
  background: var(--blue);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  translate: 0 1px;
}
.s-dark .tumar-bullet{ background: var(--blue-hi); }

/* ── pattern accent band — logo + runes on ala-kiyiz ─────── */
.pattern-band{
  position: relative; overflow: hidden;
  border-block: 1px solid var(--ink-14);
  background:
    linear-gradient(rgba(244,242,236,.55), rgba(244,242,236,.55)),
    url("../assets/pattern-light.webp") center / 640px repeat;
  padding: 1.6rem 0;
}
.pattern-band__track{
  display: inline-flex; align-items: center; gap: clamp(3rem, 6vw, 6rem);
  white-space: nowrap; will-change: transform;
  animation: marquee 50s linear infinite;
}
.pattern-band__logo{
  display: inline-block; height: 36px; width: auto; flex-shrink: 0;
}
.pattern-band__runes{
  display: inline-block; height: 30px; width: auto; flex-shrink: 0;
  opacity: .85;
}

/* ── 14 · heritage (paper) ───────────────────────────────── */
.heritage{ overflow: hidden; }
.heritage__quote{
  max-width: 44rem; margin: 0 auto clamp(3rem, 7vh, 5rem);
  padding: 0 var(--gutter); text-align: center;
}
.heritage__quote p{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem); line-height: 1.5;
  color: var(--terra);
}

.ornaments{
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--ink-14);
  border-block: 1px solid var(--ink-14);
  max-width: var(--max-w); margin: 0 auto;
}
.motif{
  aspect-ratio: 1; background: var(--paper);
  display: grid; place-items: center;
  grid-template-rows: 1fr auto;
  padding: clamp(1.2rem, 3vw, 2.6rem);
  transition: background var(--dur-mid);
  position: relative;
}
.motif:hover{ background: var(--white); }
.motif__art{ width: min(58%, 190px); aspect-ratio: 1; display: grid; place-items: center; }
.motif__art svg{ width: 100%; height: 100%; }
.motif:hover svg .draw{ animation: redraw 1.4s var(--ease-in-out) forwards; }
@keyframes redraw{
  from{ stroke-dashoffset: var(--dash, 600); }
  to  { stroke-dashoffset: 0; }
}
.motif__art--pattern{
  background: url("../assets/pattern-alakiyiz.webp") center / cover;
  border: 1px solid var(--ink-14); border-radius: 2px;
}
.motif__art--runes{
  background: var(--navy);
  -webkit-mask: url("../assets/slogan-runes.webp") center / contain no-repeat;
          mask: url("../assets/slogan-runes.webp") center / contain no-repeat;
  width: min(24%, 64px); aspect-ratio: 1 / 4;
}
.motif__name{ color: var(--stone); transition: color var(--dur-fast); }
.motif:hover .motif__name{ color: var(--blue); }

/* motif viewer (light sheet) */
.motif-viewer{
  position: fixed; inset: auto 0 0 0; z-index: var(--z-viewer);
  background: var(--white);
  border-top: 2px solid var(--blue);
  padding: clamp(1.6rem, 5vw, 3rem) var(--gutter) calc(clamp(1.6rem, 5vw, 3rem) + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: auto 1fr; gap: 1.5rem 2rem; align-items: center;
  transform: translateY(101%);
  transition: transform .55s var(--ease-out-expo);
  box-shadow: 0 -30px 80px rgba(11,12,14,.18);
}
.motif-viewer.is-open{ transform: none; }
.motif-viewer__close{
  position: absolute; top: 1rem; right: var(--gutter);
  width: 44px; height: 44px; color: var(--stone);
  transition: color var(--dur-fast);
}
.motif-viewer__close:hover{ color: var(--ink); }
.motif-viewer__art{ width: clamp(90px, 16vw, 150px); aspect-ratio: 1; }
.motif-viewer__art svg{ width: 100%; height: 100%; }
.motif-viewer__name{
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--fs-h3);
}
.motif-viewer__meaning{ color: var(--stone); grid-column: 2; max-width: 52ch; }

/* ── 15 · who wears toolor (night) ───────────────────────── */
.nomad{ padding: var(--section-gap) 0; }
.nomad__layout{
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter);
  align-items: center;
}
.nomad__media{
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  border: 1px solid var(--snow-line);
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(18,35,74,.85), transparent),
    linear-gradient(160deg, var(--ink-soft), var(--ink) 70%);
  display: grid; place-items: end start;
}
.nomad__media::before{
  content: ""; position: absolute; inset: 0;
  background: url("../assets/pattern-alakiyiz.webp") center / cover; opacity: .18;
}
.nomad__media figcaption{ position: relative; padding: 1rem; color: var(--ash); }
.nomad__media img, .nomad__media video{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.nomad__big{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 2.3rem); line-height: 1.3;
  margin: 1.6rem 0 2rem;
}
.nomad__facts{ display: grid; gap: 1.1rem; margin-bottom: 2rem; }
.nomad__facts li{
  display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: baseline;
  border-top: 1px solid var(--snow-line); padding-top: 1rem;
}
.nomad__facts .mono{ color: var(--cyan); }
.nomad__wave{ color: var(--ash); max-width: 52ch; }

/* ── 16 · ascent (night) ─────────────────────────────────── */
.ascent{
  position: relative;
  padding: var(--section-gap) 0;
  background:
    radial-gradient(90% 60% at 80% 10%, rgba(18,35,74,.9), transparent 60%),
    linear-gradient(#101a30, var(--ink) 80%);
  overflow: hidden;
}
.ascent__route{ position: absolute; inset: 0; pointer-events: none; opacity: .6; }
.ascent__route svg{ width: 100%; height: 100%; }
.ascent__layout{
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter);
  align-items: center;
}
.ascent__copy .section-head__title{ margin-top: .6rem; }
.ascent__features{ display: grid; gap: 1.1rem; margin: 2.2rem 0 2.6rem; }
.ascent__features li{ display: flex; align-items: baseline; gap: .9rem; color: var(--snow); }

.phone-frame{
  width: clamp(230px, 24vw, 320px);
  aspect-ratio: 9 / 19;
  margin: 0 auto;
  border: 1.5px solid var(--snow-line);
  border-radius: clamp(28px, 3vw, 44px);
  padding: 10px;
  background: var(--ink-soft);
  box-shadow: 0 40px 90px rgba(0,0,0,.55), inset 0 0 0 1px rgba(244,245,242,.04);
}
.phone-frame__screen{
  position: relative; width: 100%; height: 100%;
  border-radius: clamp(20px, 2.4vw, 34px); overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 110%, rgba(18,35,74,.95), transparent 70%),
    linear-gradient(var(--ink), #101a30);
  display: grid; place-items: center;
}
.phone-frame__screen video{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.phone-frame__loader{ position: absolute; inset: 0; }
.phone-frame__loader svg{ width: 100%; height: 100%; }
.phone-frame__tag{ position: relative; color: var(--ash); }

/* ── 17 · lookbook (paper) ───────────────────────────────── */
.lookbook__grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 2rem);
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter);
  align-items: start;
}
.lookbook__col{ display: grid; gap: clamp(1rem, 2.4vw, 2rem); will-change: transform; }
.lookbook__col:nth-child(2){ margin-top: clamp(2rem, 6vw, 5rem); }
.look{
  position: relative; overflow: hidden;
  border: 1px solid var(--ink-14);
  display: grid; place-items: end start;
  cursor: pointer;
  background:
    linear-gradient(rgba(244,242,236,.4), rgba(244,242,236,.15)),
    url("../assets/pattern-light.webp") center / cover;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.look:hover{ border-color: var(--blue); box-shadow: 0 18px 50px var(--blue-14); }
.look--45{ aspect-ratio: 4 / 5; }
.look--11{ aspect-ratio: 1; }
.look--34{ aspect-ratio: 3 / 4; }
.look span{ padding: 1rem; color: var(--stone); position: relative; }
.look img, .look video{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease-out-expo);
}
.look:hover img{ transform: scale(1.05); }

/* lightbox */
.lightbox{
  position: fixed; inset: 0; z-index: var(--z-viewer);
  background: var(--ink-veil);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: grid; place-items: center;
  grid-template-columns: auto 1fr auto;
  padding: var(--gutter); gap: 1rem;
  color: var(--snow);
}
.lightbox__stage{
  width: min(70vw, 900px); height: min(78vh, 900px);
  border: 1px solid var(--snow-line);
  background: linear-gradient(190deg, var(--ink-soft), var(--ink));
  display: grid; place-items: center;
}
.lightbox__stage img, .lightbox__stage video{ width: 100%; height: 100%; object-fit: contain; }
.lightbox__nav{
  width: 54px; height: 54px; border: 1px solid var(--snow-line); border-radius: 50%;
  color: var(--snow); font-size: 1.1rem;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.lightbox__nav:hover{ border-color: var(--blue-hi); background: var(--bluehi-14); }
.lightbox__close{
  position: absolute; top: var(--gutter); right: var(--gutter);
  width: 44px; height: 44px; color: var(--ash);
}
.lightbox__caption{
  position: absolute; bottom: var(--gutter); left: 50%; translate: -50% 0;
  color: var(--ash);
}

/* ── 18 · snapshot — blue numbers band ───────────────────── */
.snapshot{ padding: clamp(4rem, 10vh, 7rem) var(--gutter); }
.snapshot__grid{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: var(--max-w); margin: 0 auto;
}
.stat{ display: grid; gap: .8rem; justify-items: start; }
.stat__num{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: 1;
  color: var(--white);
}
.stat__label{ color: rgba(255,255,255,.72); letter-spacing: .22em; }

/* ── 19 · partnership (paper) — the conversion ───────────── */
.partnership{ overflow: hidden; }
.routes{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--ink-14);
  border: 1px solid var(--ink-14);
  max-width: var(--max-w); margin: 0 auto 3rem;
}
.route{
  background: var(--paper);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: grid; gap: .8rem; align-content: start; text-align: left;
  min-height: 240px;
  transition: background var(--dur-mid), color var(--dur-mid);
}
.route:hover{ background: var(--white); }
.route.is-picked{ background: var(--blue); color: var(--white); }
.route__num{ color: var(--blue); }
.route.is-picked .route__num{ color: rgba(255,255,255,.75); }
.route__name{
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.3rem; text-transform: uppercase;
}
.route__desc{ color: var(--stone); font-size: .95rem; }
.route.is-picked .route__desc{ color: rgba(255,255,255,.85); }
.route__pick{ color: var(--blue); letter-spacing: .3em; margin-top: auto; }
.route.is-picked .route__pick{ color: var(--white); }

.partner-form{
  max-width: 980px; margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid; gap: 1rem; justify-items: center;
}
.partner-form__row{
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: .8rem; width: 100%;
}
.partner-form__input{
  background: var(--white);
  border: 1px solid var(--ink-14);
  border-radius: 100px;
  color: var(--ink);
  font-family: var(--font-mono); font-size: .88rem; letter-spacing: .05em;
  padding: 1.05em 1.6em;
  min-height: 52px;
  width: 100%;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  appearance: none;
}
.partner-form__select{
  background-image: linear-gradient(45deg, transparent 50%, var(--blue) 50%),
                    linear-gradient(135deg, var(--blue) 50%, transparent 50%);
  background-position: calc(100% - 1.6em) 55%, calc(100% - 1.2em) 55%;
  background-size: .4em .4em;
  background-repeat: no-repeat;
}
.partner-form__input::placeholder{ color: var(--stone); opacity: .7; }
.partner-form__input:focus{ outline: none; border-color: var(--blue); box-shadow: 0 0 24px var(--blue-14); }
.partner-form__input.is-invalid{ border-color: var(--terra); }
.partner-form__error{ color: var(--terra); letter-spacing: .12em; text-align: center; }
.partner-form__submit.is-loading .partner-form__submit-label{ opacity: .5; }

.partner-form__success{
  display: grid; justify-items: center; gap: 1.2rem;
  padding: 2rem var(--gutter); text-align: center;
}
.partner-form__tunduk{ width: 110px; }
.partner-form__tunduk svg{ width: 100%; height: auto; }
.partner-form__line{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 3.4vw, 2.2rem); letter-spacing: .04em;
  color: var(--blue); text-transform: uppercase;
}
.partner-form__note{ color: var(--stone); }
.partnership__trust{
  text-align: center; color: var(--stone); opacity: .8;
  margin: 2rem auto 0;
}

.partners__strip{
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  max-width: 1100px; margin: 4rem auto 0; padding: 0 var(--gutter);
}
.partner{
  display: grid; place-items: center;
  min-height: 60px; padding: 0 1rem;
  opacity: .4; filter: grayscale(1);
  transition: filter var(--dur-fast), opacity var(--dur-fast), color var(--dur-fast);
}
.partner:hover{ opacity: 1; filter: none; color: var(--blue); }
.partner span{ letter-spacing: .3em; }
.partner img{ max-height: 46px; width: auto; }

/* ── 20 · statement (night) ──────────────────────────────── */
.statement{
  min-height: 76svh;
  display: grid; place-items: center; align-content: center; gap: 2.4rem;
  padding: var(--section-gap) var(--gutter);
  text-align: center;
  background: var(--grad-dusk);
}
.statement__big{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.7rem, 5.6vw, 4.8rem);
  line-height: 1.14; text-transform: uppercase; letter-spacing: -0.02em;
  display: grid; gap: .2em;
}
.statement__big b{
  color: var(--blue-hi);
  border-bottom: 3px solid var(--blue-hi);
}
.statement__sign{ color: var(--ash); letter-spacing: .4em; }

/* ── 21 · footer (night) ─────────────────────────────────── */
.footer{
  position: relative;
  border-top: 1px solid var(--snow-line);
  overflow: hidden;
}
.footer__wordmark{
  display: grid; place-items: center;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter) 0;
  user-select: none;
}
.footer__giant-logo{
  width: min(78vw, 1080px); height: auto;
  opacity: .97;
}
.footer__cols{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: var(--max-w); margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) var(--gutter);
}
.footer__col{ display: grid; gap: .8rem; align-content: start; justify-items: start; }
.footer__head{ color: var(--ash); margin-bottom: .4rem; }
.footer__col a{
  color: var(--snow); opacity: .85; padding: .15rem 0;
  transition: color var(--dur-fast), opacity var(--dur-fast);
}
.footer__col a:hover{ color: var(--blue-hi); opacity: 1; }
.footer__studio{ color: var(--ash); }
.footer__logo{ margin-top: 1.2rem; opacity: .9; }

.footer__bar{
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--snow-line);
  padding: 1.4rem var(--gutter) calc(1.4rem + env(safe-area-inset-bottom, 0px));
  color: var(--ash);
}
.footer__kochkor{ width: 46px; height: 46px; display: inline-block; }
.footer__kochkor svg{ width: 100%; height: 100%; }
.footer__top{ padding: .7em 1.6em; }

/* ── responsive ──────────────────────────────────────────── */
@media (max-width: 1279px){
  .peaks__layout{ gap: 2rem; }
}

@media (max-width: 1023px){
  .nav__links{ display: none; }
  .nav__cta{ display: none; }
  .nav__burger{ display: flex; }
  .hero__runes{ display: none; }

  .origin__layout{ grid-template-columns: 1fr; }
  .origin__media{ max-width: 440px; }
  .origin__facts{ grid-template-columns: repeat(2, auto); }

  .peaks__layout{ grid-template-columns: 1fr; }
  .peaks__stage{ position: relative; top: 0; order: -1; }
  .peaks__media{ max-height: 38vh; margin: 0 auto; width: min(100%, 320px); }
  .peaks__readout{ text-align: center; }

  .axis__grid{ grid-template-columns: 1fr; }
  .axis-card{ min-height: 0; }

  .symbol__stage{ flex-direction: column; align-items: center; }
  .symbol__part{ width: min(100%, 340px); }
  .symbol__plus{ padding: .2rem 0; }
  .decode{ grid-template-columns: 1fr; gap: 2.4rem; }

  .palette__strip{ flex-direction: column; height: auto; gap: 6px; }
  .swatch{ min-height: 84px; flex: none; }
  .swatch:hover, .swatch:focus-visible{ flex: none; min-height: 130px; }

  .line-row{ grid-template-columns: 5rem 1fr; }
  .line-row__meta{ grid-column: 2; text-align: left; }

  .capsules__pin{ min-height: 0; }
  .capsules__viewport{
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .capsules__viewport::-webkit-scrollbar{ display: none; }
  .capsule{ scroll-snap-align: center; width: min(82vw, 400px); }
  .capsules__hint{ display: none; }

  .tech__layout{ grid-template-columns: 1fr; }
  .tech__diagram-wrap{ position: relative; top: 0; max-width: 480px; margin: 0 auto; }

  .production__strip{ grid-template-columns: 1fr; max-width: 560px; }

  .ornaments{ grid-template-columns: repeat(2, 1fr); }

  .nomad__layout{ grid-template-columns: 1fr; }
  .nomad__media{ max-width: 420px; order: 2; }

  .ascent__layout{ grid-template-columns: 1fr; }
  .ascent__phone{ order: 2; }

  .lookbook__grid{ grid-template-columns: repeat(2, 1fr); }
  .lookbook__col:nth-child(3){ display: none; }

  .snapshot__grid{ grid-template-columns: repeat(2, 1fr); gap: 2.6rem; }

  .routes{ grid-template-columns: 1fr; }
  .route{ min-height: 0; }
  .partner-form__row{ grid-template-columns: 1fr; }

  .lightbox__stage{ width: min(88vw, 700px); height: min(64vh, 700px); }

  .footer__cols{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px){
  .hero__data--tr{ display: none; }
  .hero__data--br{ display: none; }
  .hero__title{ font-size: clamp(2rem, 10.5vw, 4.2rem); }
  .hero__b2b{ font-size: .62rem; letter-spacing: .22em; }

  .peak__btn{ grid-template-columns: 2.4rem 1fr auto; padding: 1.1rem .25rem; }
  .peak__coord{ padding-left: 3.15rem; }

  .origin__facts{ gap: 1rem 1.6rem; }

  .pillars__words{ flex-direction: column; gap: .6rem; }
  .pillars__dot{ display: none; }

  .tech__macros{ grid-template-columns: repeat(3, 1fr); gap: .6rem; }

  .statement__big{ font-size: clamp(1.5rem, 8vw, 2.6rem); }

  .lightbox{ grid-template-columns: 1fr; }
  .lightbox__nav{ position: fixed; bottom: calc(var(--gutter) + 3rem); }
  .lightbox__nav--prev{ left: var(--gutter); }
  .lightbox__nav--next{ right: var(--gutter); }
  .lightbox__stage{ width: 92vw; height: 60vh; }

  .snapshot__grid{ grid-template-columns: 1fr 1fr; }

  .footer__cols{ grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .footer__bar{ justify-content: center; text-align: center; }
}

/* ── reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html{ scroll-behavior: auto; }
  .marquee__track, .pattern-band__track{ animation: none; transform: none; }
}