/* Ed Cetera — Lué / Figma craft */

:root {
  --canvas: #ffffff;
  --soft: #f7f5f2;
  --ink: #050505;
  --ink-soft: rgba(5, 5, 5, .8);
  --ink-head: rgba(5, 5, 5, .92);
  --mute: rgba(5, 5, 5, .45);
  --line: rgba(5, 5, 5, .12);
  --gold: #b89a6a;
  --sky-top: #1a1240;
  --sky-mid: #5a3d8c;
  --sky-bot: #f0b8c8;
  --map-land: #ebe4dc;
  --map-partner: #2a1b4a;
  --map-hot: #1a1240;
  --map-link: #b89a6a;
  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --max: 1240px;
  --out: cubic-bezier(.16, 1, .3, 1);
  --io: cubic-bezier(.65, 0, .35, 1);
  --font: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #2a1b4a #efe8f0;
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink-soft);
  font-family: var(--font);
  font-size: clamp(.95rem, .25vw + .9rem, 1.05rem);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* custom scrollbar (Chrome / Edge / Safari) */
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 12px; height: 12px; }
html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: #efe8f0;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6a4a9a 0%, #2a1b4a 100%);
  border: 3px solid #efe8f0;
  border-radius: 999px;
  min-height: 48px;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #7b5bb0 0%, #1a1240 100%);
}
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner { background: #efe8f0; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--font);
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--ink-head);
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; }

.skip {
  position: fixed; top: -100px; left: 1rem; z-index: 90;
  background: var(--ink); color: #fff; padding: .65rem 1.1rem;
  border-radius: 999px; font-weight: 500;
}
.skip:focus { top: 1rem; }

.prog {
  position: fixed; inset: 0 0 auto; height: 1.5px; z-index: 70;
  background: var(--ink); transform: scaleX(0); transform-origin: 0 50%;
}

/* ---------- header ---------- */

.top {
  position: fixed; inset: 0 0 auto; z-index: 60;
  display: flex; align-items: center; gap: 1.2rem;
  padding: 0 var(--pad); height: 68px;
  background: transparent;
  color: rgba(255, 255, 255, .92);
  transition: background .35s linear, color .35s linear, border-color .35s linear, box-shadow .35s linear;
  border-bottom: 1px solid transparent;
}
.top.stuck {
  background: color-mix(in srgb, #fff 86%, transparent);
  backdrop-filter: blur(16px);
  color: var(--ink-head);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(5, 5, 5, .04);
}

.top-left {
  display: flex; align-items: center; gap: .85rem;
  margin-right: auto; min-width: 0;
}
.mark { font-weight: 500; font-size: .92rem; letter-spacing: -.02em; white-space: nowrap; }
.mark:hover { opacity: .65; }
.top-sub, .top-clock {
  font-size: .72rem; font-weight: 450; color: inherit; opacity: .55;
  white-space: nowrap;
}
@media (max-width: 1100px) { .top-sub, .top-clock { display: none; } }

.nav { display: none; gap: 1.25rem; font-size: .82rem; font-weight: 450; opacity: .72; }
.nav a { transition: opacity .2s linear; }
.nav a:hover, .nav a.on { opacity: 1; }

.top-cta {
  display: none;
  font-size: .8rem; font-weight: 500;
  padding: .55rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(10px);
  color: inherit;
  transition: transform .35s var(--out), background .25s linear, border-color .25s linear;
}
.top-cta:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .22); }
.top.stuck .top-cta {
  background: var(--ink); color: #fff; border-color: var(--ink);
}

.burger {
  display: grid; gap: 5px; width: 26px; padding: 0;
  background: none; border: 0; cursor: pointer;
}
.burger span { display: block; height: 1.5px; background: currentColor; transition: transform .35s var(--out); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.sheet {
  position: fixed; inset: 68px 0 auto; z-index: 55;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(26, 18, 64, .1);
  padding: 1rem var(--pad) 1.6rem; display: grid; gap: .1rem;
  color: var(--ink-head);
}
.sheet[hidden] { display: none; }
.sheet a {
  font-size: 1.45rem; font-weight: 500;
  padding: .6rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-head);
  transition: opacity .2s linear, padding .3s var(--out);
}
.sheet a:hover { opacity: .55; padding-left: .2rem; }
.sheet a:last-child { border-bottom: 0; }

@media (min-width: 900px) {
  .nav, .top-cta { display: flex; }
  .burger, .sheet { display: none !important; }
}

/* ---------- shared ---------- */

.wrap {
  max-width: var(--max); width: 100%;
  margin-inline: auto;
  padding-inline: var(--pad);
}

.display {
  font-size: clamp(2.6rem, 7.5vw, 5.6rem);
  line-height: 1.05; letter-spacing: -.04em; font-weight: 450;
}
.head {
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1.1; letter-spacing: -.035em; font-weight: 450;
}
.flare-txt { color: var(--ink-head); font-style: italic; font-weight: 400; }

.eyebrow {
  display: flex; align-items: center; gap: .65rem;
  font-size: .75rem; font-weight: 500; letter-spacing: .04em;
  color: var(--mute); margin-bottom: 1.4rem;
}
.eyebrow span {
  font-variant-numeric: tabular-nums;
  color: var(--ink-head);
}

.meta {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mute); font-weight: 500;
}

.ln { display: block; overflow: hidden; padding-bottom: .06em; }
.ln > span {
  display: block; transform: translateY(110%);
  transition: transform 1s var(--out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.in .ln > span, .ln.in > span { transform: none; }

.anim { opacity: 0; transform: translateY(18px); }
.anim.in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--out), transform .8s var(--out);
}
.anim[data-anim="fade"] { transform: none; }
.anim[data-anim="lines"] { opacity: 1; transform: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff;
  font-weight: 500; font-size: .9rem;
  padding: .75rem 1.35rem;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  transition: transform .35s var(--out), opacity .2s linear, background .2s linear, color .2s linear;
}
.btn:hover { transform: translateY(-1px); opacity: .9; }
.btn.ghost {
  background: transparent; color: var(--ink-head);
}
.btn.ghost:hover { background: var(--ink); color: #fff; opacity: 1; }
.hero .btn {
  background: #fff; color: var(--ink); border-color: #fff;
}
.hero .btn.ghost {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
  backdrop-filter: blur(8px);
}
.hero .btn.ghost:hover { background: rgba(255, 255, 255, .22); opacity: 1; }

/* ---------- hero atmosphere ---------- */

.hero {
  position: relative; min-height: 100vh;
  display: grid; place-items: center;
  padding: 5.5rem var(--pad) 5.5rem;
  overflow: hidden;
  color: #fff;
  background: var(--sky-top);
}
.sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sky-grad {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 55% at 50% 100%, #ffd0da 0%, transparent 55%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 48%, #c48aa8 72%, var(--sky-bot) 100%);
}
.stars { position: absolute; inset: 0; }
.stars i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: #fff; opacity: .55;
  box-shadow: 0 0 6px rgba(255, 255, 255, .8);
  animation: twinkle 3.2s ease-in-out infinite;
}
.cloud {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .85) 0%, rgba(255, 210, 220, .35) 45%, transparent 70%);
  filter: blur(2px);
  animation: floatCloud 18s ease-in-out infinite;
}
.cloud.c1 { width: 48vw; height: 22vw; left: -8%; bottom: 6%; opacity: .85; }
.cloud.c2 { width: 36vw; height: 16vw; right: -6%; bottom: 14%; opacity: .7; animation-delay: -4s; }
.cloud.c3 { width: 28vw; height: 12vw; left: 18%; top: 28%; opacity: .4; animation-delay: -8s; filter: blur(8px); }
.cloud.c4 { width: 40vw; height: 18vw; right: 10%; top: 18%; opacity: .35; animation-delay: -11s; filter: blur(10px); }

/* hero book (replaces moon / orbits) */
.hero-book-wrap {
  position: absolute; inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}
.hero-book {
  position: absolute; left: 50%; top: 44%;
  width: min(78vw, 620px); height: min(40vw, 330px);
  transform: translate(-50%, -52%);
  will-change: transform;
  opacity: .72;
  filter: saturate(.92);
}
.hero-book-glow {
  position: absolute; left: 50%; top: 50%;
  width: 92%; height: 82%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 255, .78) 0%, rgba(255, 230, 236, .3) 44%, transparent 72%);
  filter: blur(16px);
}
.hero-book-shadow {
  position: absolute; left: 50%; bottom: 0;
  width: 72%; height: 14%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(30, 10, 50, .42), transparent 70%);
  filter: blur(14px);
}
.hero-book-stage {
  position: absolute; inset: 12% 7% 18%;
  perspective: 2000px;
  transform-style: preserve-3d;
  transform: rotateX(24deg);
}
.hero-book-spine {
  position: absolute; left: 50%; top: 4%;
  width: 2.2%; height: 92%;
  transform: translateX(-50%) translateZ(8px);
  background: linear-gradient(180deg, #f3ebe0, #c8bdae 50%, #8a8074);
  border-radius: 2px;
  z-index: 9;
  box-shadow: 0 8px 24px rgba(20, 10, 40, .3);
}
.hero-book-half {
  position: absolute; top: 0; width: 50%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 1.6s var(--out);
}
.hero-book-half.left {
  left: 0; transform-origin: right center;
  transform: rotateY(88deg);
}
.hero-book-half.right {
  right: 0; transform-origin: left center;
  transform: rotateY(-88deg);
}
.hero-book.is-open .hero-book-half.left { transform: rotateY(14deg); }
.hero-book.is-open .hero-book-half.right { transform: rotateY(-14deg); }

.hero-book-cover,
.hero-book-sheet,
.hero-book-leaf,
.hero-book-leaf .front,
.hero-book-leaf .back {
  position: absolute; inset: 0;
  border-radius: 2px 16px 16px 2px;
}
.hero-book-half.left .hero-book-cover,
.hero-book-half.left .hero-book-sheet {
  border-radius: 16px 2px 2px 16px;
}

.hero-book-cover {
  background:
    linear-gradient(145deg, rgba(255,255,255,.14), transparent 40%),
    linear-gradient(165deg, #4a3f5c 0%, #1c1528 55%, #2a2138 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 12px 32px rgba(20, 8, 40, .3);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.hero-book-half.left .hero-book-cover {
  background:
    linear-gradient(215deg, rgba(255,255,255,.14), transparent 40%),
    linear-gradient(200deg, #4a3f5c 0%, #1c1528 55%, #2a2138 100%);
}

.hero-book-sheet {
  background:
    linear-gradient(90deg, rgba(55, 30, 70, .12), transparent 16%),
    repeating-linear-gradient(180deg, #fffaf2 0 13px, #fffaf2 13px 14px, #e8dfd0 14px 15px);
  box-shadow: 0 6px 20px rgba(20, 10, 40, .16);
  transform: translateZ(2px);
  backface-visibility: hidden;
}
.hero-book-half.left .hero-book-sheet {
  background:
    linear-gradient(270deg, rgba(55, 30, 70, .12), transparent 16%),
    repeating-linear-gradient(180deg, #fffaf2 0 13px, #fffaf2 13px 14px, #e8dfd0 14px 15px);
}

.hero-book-leaf {
  transform-origin: left center;
  transform: translateZ(4px) rotateY(0deg);
  transform-style: preserve-3d;
  transition: transform 1.75s var(--out) .25s;
  z-index: 5;
}
.hero-book-leaf .front,
.hero-book-leaf .back {
  backface-visibility: hidden;
  background:
    linear-gradient(90deg, rgba(55, 30, 70, .14), transparent 18%),
    linear-gradient(180deg, #fffdf8, #f2e8db);
  box-shadow: 0 8px 22px rgba(20, 10, 40, .18);
}
.hero-book-leaf .back {
  transform: rotateY(180deg);
  background:
    linear-gradient(270deg, rgba(55, 30, 70, .14), transparent 18%),
    linear-gradient(180deg, #fffaf2, #efe4d6);
}
.hero-book.is-open .hero-book-leaf {
  transform: translateZ(4px) rotateY(-172deg);
}

@media (prefers-reduced-motion: reduce) {
  .hero-book-half, .hero-book-leaf { transition: none; }
  .hero-book .hero-book-half.left { transform: rotateY(14deg); }
  .hero-book .hero-book-half.right { transform: rotateY(-14deg); }
  .hero-book .hero-book-leaf { transform: translateZ(4px) rotateY(-172deg); }
}

.coords {
  position: absolute; top: 48%; z-index: 5;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55); font-weight: 500;
  pointer-events: none; white-space: nowrap;
}
.coords.left { left: var(--pad); }
.coords.right { right: var(--pad); text-align: right; }
@media (max-width: 900px) { .coords { display: none; } }

.hero-inner {
  position: relative; z-index: 5;
  width: min(100%, 40rem); text-align: center;
  margin-top: -2vh;
  pointer-events: none;
  isolation: isolate;
  transform: translateZ(0);
}
.hero-inner a { pointer-events: auto; }
.hero-kicker {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .65); margin-bottom: 1rem; font-weight: 500;
}
.hero-brand {
  color: #fff;
  text-shadow:
    0 2px 0 rgba(30, 12, 55, .25),
    0 8px 28px rgba(30, 12, 55, .55),
    0 0 40px rgba(255, 255, 255, .22);
}
.hero-brand .name {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(3.4rem, 10vw, 7rem); line-height: .95; letter-spacing: -.03em;
}
.hero-tag {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.65rem);
  letter-spacing: .02em; margin: .85rem 0 1.25rem;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 4px 18px rgba(30, 12, 55, .45);
}
.hero .lead {
  max-width: 38ch; margin: 0 auto 1.6rem;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(.95rem, 1.1vw, 1.08rem); line-height: 1.5;
  text-shadow: 0 2px 16px rgba(30, 12, 55, .55);
}
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; }

.scroll-hint {
  position: absolute; bottom: 1.4rem; left: 50%; z-index: 5;
  width: 20px; height: 32px; margin-left: -10px;
  border: 1.5px solid rgba(255, 255, 255, .4); border-radius: 12px;
}
.scroll-hint span {
  display: block; width: 3px; height: 7px; margin: 7px auto 0;
  background: #fff; border-radius: 2px;
  animation: drip 1.6s var(--out) infinite;
}
@keyframes drip {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(10px); }
}
@keyframes twinkle {
  0%, 100% { opacity: .25; }
  50% { opacity: .9; }
}
@keyframes floatCloud {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(2%, -1.5%, 0); }
}

/* ---------- impact ---------- */

.impact {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0;
  padding: clamp(3rem, 7vw, 5rem) max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
  border-top: 1px solid var(--line);
  background: var(--canvas);
}
@media (min-width: 900px) { .impact { grid-template-columns: repeat(4, 1fr); } }

.fig {
  padding: 1.4rem 1.2rem 1.4rem 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) {
  .fig { padding-right: 1.5rem; }
  .fig + .fig { border-left: 1px solid var(--line); padding-left: 1.5rem; }
}
.fig > span {
  display: block; margin-top: .65rem; max-width: 18ch;
  color: var(--mute); font-size: .88rem;
}
.odo {
  display: block; font-weight: 450;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  line-height: 1; letter-spacing: -.04em;
  color: var(--ink-head); font-variant-numeric: tabular-nums;
}

/* ---------- story ---------- */

.story {
  position: relative;
  background: var(--canvas);
  padding: clamp(4.5rem, 10vw, 8rem) max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
  overflow: hidden;
}
.wash {
  position: absolute; width: min(42vw, 420px); height: min(42vw, 420px);
  border-radius: 50%; pointer-events: none; filter: blur(60px); opacity: .55;
}
.wash-a {
  top: -8%; left: -6%;
  background: radial-gradient(circle, #f0a090 0%, transparent 70%);
}
.wash-b {
  top: -10%; right: -8%;
  background: radial-gradient(circle, #e8b8c8 0%, #f0c8a0 40%, transparent 70%);
}
.sec-no {
  position: relative; text-align: center;
  font-size: .8rem; font-weight: 500; color: var(--mute);
  letter-spacing: .08em; margin-bottom: 1.6rem;
}
.story-lead {
  position: relative;
  text-align: center;
  font-size: clamp(1.45rem, 3.2vw, 2.45rem);
  line-height: 1.35; letter-spacing: -.03em; font-weight: 400;
  color: rgba(5, 5, 5, .38);
  max-width: 22ch; margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.story-lead b { color: var(--ink-head); font-weight: 600; }
.story-lead em { color: var(--ink-head); font-style: normal; font-weight: 600; }

.story-mid {
  position: relative;
  display: grid; gap: 2rem; align-items: center;
  max-width: 920px; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 800px) {
  .story-mid { grid-template-columns: 220px 1fr; gap: 3rem; }
}
/* routes relic (story) */
.relic {
  width: min(200px, 52vw);
  aspect-ratio: 1;
  position: relative;
  margin-inline: auto;
}
.relic-svg {
  width: 100%; height: 100%;
  display: block;
  filter: drop-shadow(0 14px 28px rgba(42, 27, 74, .12));
}
.relic-plate {
  fill: #f7f4ee;
  stroke: rgba(42, 27, 74, .1);
  stroke-width: 1.2;
}
.relic-links path {
  fill: none;
  stroke: var(--map-link);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  opacity: .85;
  transition: stroke-dashoffset 1.1s var(--out), opacity .4s linear;
}
.relic.is-on .relic-links path {
  stroke-dashoffset: 0;
}
.relic-links path:nth-child(1) { transition-delay: .05s; }
.relic-links path:nth-child(2) { transition-delay: .15s; }
.relic-links path:nth-child(3) { transition-delay: .25s; }
.relic-links path:nth-child(4) { transition-delay: .35s; }
.relic-links path:nth-child(5) { transition-delay: .45s; }
.relic-nodes circle {
  fill: var(--map-partner);
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  transform: scale(.4);
  transition: opacity .45s var(--out), transform .55s var(--out);
}
.relic-nodes .hub {
  fill: var(--map-hot);
  stroke: var(--map-link);
  stroke-width: 2;
}
.relic.is-on .relic-nodes circle {
  opacity: 1;
  transform: scale(1);
}
.relic.is-on .relic-nodes circle:nth-child(1) { transition-delay: .2s; }
.relic.is-on .relic-nodes circle:nth-child(2) { transition-delay: .3s; }
.relic.is-on .relic-nodes circle:nth-child(3) { transition-delay: .38s; }
.relic.is-on .relic-nodes circle:nth-child(4) { transition-delay: .46s; }
.relic.is-on .relic-nodes circle:nth-child(5) { transition-delay: .54s; }
.relic.is-on .relic-nodes circle:nth-child(6) { transition-delay: .62s; }

@media (prefers-reduced-motion: reduce) {
  .relic-links path { stroke-dashoffset: 0; transition: none; }
  .relic-nodes circle { opacity: 1; transform: none; transition: none; }
}
.story-copy { display: grid; gap: 1.25rem; }
.story-copy p {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.65; color: rgba(5, 5, 5, .42); font-weight: 400;
}
.story-copy b { color: var(--ink-head); font-weight: 600; }
.story-copy .dim { color: rgba(5, 5, 5, .32); }

.story-close {
  position: relative; text-align: center;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.55; color: rgba(5, 5, 5, .5);
  max-width: 40ch; margin: 0 auto clamp(3rem, 6vw, 4.5rem);
}
.story-close .gold { color: var(--gold); font-weight: 600; }

.pair {
  position: relative;
  display: grid; gap: 2rem;
  padding-top: 2rem; border-top: 1px solid var(--line);
}
@media (min-width: 760px) { .pair { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.pair h3 {
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mute); margin-bottom: .65rem; font-weight: 500;
}
.pair p { color: var(--ink-soft); max-width: 42ch; }

/* ---------- expertise rows ---------- */

.services {
  background: var(--canvas);
  padding: clamp(4rem, 9vw, 7rem) max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
  border-top: 1px solid var(--line);
}
.services .head { margin-bottom: clamp(1.8rem, 3vw, 2.8rem); }

.svc {
  display: grid; gap: .35rem 2rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--line);
  transition: padding .35s var(--out);
}
.svc:last-child { border-bottom: 1px solid var(--line); }
.svc:hover { padding-left: .4rem; }
.svc span {
  font-size: .72rem; font-weight: 500; letter-spacing: .06em;
  color: var(--mute); font-variant-numeric: tabular-nums;
}
.svc h3 { font-size: clamp(1.2rem, 2.2vw, 1.65rem); font-weight: 450; }
.svc p { color: var(--mute); max-width: 56ch; font-size: .95rem; }
@media (min-width: 800px) {
  .svc { grid-template-columns: 48px 1fr 1.3fr; align-items: baseline; }
}

/* ---------- method ---------- */

.method {
  background: var(--soft);
  padding: clamp(4rem, 9vw, 7rem) max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
  border-top: 1px solid var(--line);
}
.method .head { margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }

.steps { display: grid; }
.steps li {
  display: grid; gap: .4rem 2rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
  transition: padding .35s var(--out);
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li:hover { padding-left: .35rem; }
.steps span {
  font-size: .72rem; font-weight: 500; letter-spacing: .06em;
  color: var(--mute); font-variant-numeric: tabular-nums;
}
.steps h3 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 450; }
.steps p { color: var(--mute); max-width: 52ch; }
@media (min-width: 860px) {
  .steps li { grid-template-columns: 56px 1fr 1.4fr; align-items: baseline; }
}

/* ---------- values ---------- */

.values {
  background: var(--canvas);
  padding: clamp(4rem, 9vw, 7rem) max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
  border-top: 1px solid var(--line);
}
.values .head { margin-bottom: clamp(1.5rem, 2.5vw, 2.2rem); }

.fold-item { border-top: 1px solid var(--line); }
.fold-item:last-child { border-bottom: 1px solid var(--line); }
.fold-item button {
  width: 100%; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  display: grid; grid-template-columns: 44px 1fr 18px; align-items: center; gap: 1rem;
  padding: 1.15rem 0;
}
.fold-item button span {
  font-size: .72rem; font-weight: 500; letter-spacing: .06em;
  color: var(--mute); font-variant-numeric: tabular-nums;
}
.fold-item h3 { font-size: clamp(1.05rem, 2vw, 1.4rem); font-weight: 450; }
.fold-item i { position: relative; height: 12px; }
.fold-item i::before, .fold-item i::after {
  content: ""; position: absolute; top: 50%; left: 0; width: 12px; height: 1.5px;
  background: var(--ink); transition: transform .4s var(--out);
}
.fold-item i::after { transform: rotate(90deg); }
.fold-item.open i::after { transform: rotate(0); }
.fold-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--out); }
.fold-item.open .fold-panel { grid-template-rows: 1fr; }
.fold-panel p {
  overflow: hidden; color: var(--mute); max-width: 60ch;
  padding-left: 60px;
}
.fold-item.open .fold-panel p { padding-bottom: 1.2rem; }
@media (max-width: 600px) {
  .fold-item button { grid-template-columns: 36px 1fr 18px; gap: .6rem; }
  .fold-panel p { padding-left: 0; }
}

/* ---------- people ---------- */

.people {
  background: var(--soft);
  padding: clamp(4rem, 9vw, 7rem) max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
  border-top: 1px solid var(--line);
}
.people .head { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 16ch; }

.crew {
  display: grid;
  gap: 2rem;
  align-items: stretch;
}
@media (min-width: 900px) {
  .crew {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2.25rem;
    row-gap: 0;
  }
}
.who {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-width: 0;
  height: 100%;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--line);
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .crew {
      grid-template-rows: auto auto auto 1fr auto;
    }
    .who {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 5;
      align-items: start;
    }
  }
}
.mono {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: var(--canvas); color: var(--ink-head);
  font-weight: 500; font-size: .85rem;
  margin: 0 0 1.15rem;
}
.who h3 {
  font-size: 1.15rem; font-weight: 500;
  margin: 0 0 .35rem;
  letter-spacing: -.02em;
  width: 100%;
}
.who .role {
  font-size: .72rem; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mute);
  margin: 0 0 .85rem;
  width: 100%;
}
.who .bio {
  color: var(--ink-soft); font-size: .92rem; line-height: 1.55;
  margin: 0;
  width: 100%;
}
.who .tags {
  width: 100%;
  margin-top: auto;
  padding-top: .8rem;
  border-top: 1px solid var(--line);
  font-size: .78rem; font-weight: 500; color: var(--mute);
  line-height: 1.4;
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .who .tags { margin-top: 0; padding-top: .95rem; }
  }
}

/* ---------- network ---------- */

.net {
  background: var(--canvas);
  padding: clamp(4rem, 9vw, 7rem) max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
  border-top: 1px solid var(--line);
}
.net .head { margin-bottom: 1rem; }
.net-lead { max-width: 48ch; color: var(--mute); margin-bottom: 2rem; }

.map-wrap { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 1080px) { .map-wrap { grid-template-columns: 1fr 240px; gap: 2.5rem; } }

.map {
  width: 100%; height: auto; overflow: visible;
  background: #f7f4ee; padding: .8rem;
  border: 1px solid rgba(42, 27, 74, .1);
}

.land path {
  fill: var(--map-land);
  stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity .45s linear, fill .35s linear;
  transition-delay: calc(var(--i, 0) * 12ms);
}
.map.in .land path { opacity: 1; }
.land path.on { fill: #d9cfc4; }
.map.in .land path.on {
  fill: var(--map-partner);
  transition: opacity .45s linear, fill .55s var(--io);
  transition-delay: calc(.55s + var(--j, 0) * 60ms);
}
.map.in .land path.on.hot {
  fill: var(--map-hot);
  transition-delay: 0s;
}

.links path {
  fill: none; stroke: var(--map-link); stroke-width: 1.35; vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len); opacity: 0;
}
.links path.hot {
  opacity: 1; stroke-dashoffset: 0;
  transition: stroke-dashoffset .6s var(--out), opacity .1s linear;
}

.pins circle { fill: var(--map-partner); transition: r .3s var(--out), fill .25s linear; }
.pins circle.hot { r: 5.5; fill: var(--map-hot); }
.pins text {
  font-family: var(--font); font-size: 20px; font-weight: 500;
  fill: var(--map-partner);
  paint-order: stroke; stroke: #f7f4ee; stroke-width: 5px; stroke-linejoin: round;
}
.pins .tip { fill: var(--map-partner); opacity: 0; transition: opacity .25s linear; }
.pins .tip.on { opacity: 1; }
.pins .halo { fill: none; stroke: var(--map-link); stroke-width: 1.2; opacity: 0; }
.map.in .pins .halo { animation: ping 4s var(--out) 1.2s infinite; }
@keyframes ping {
  0% { r: 6; opacity: .4; }
  70%, 100% { r: 22; opacity: 0; }
}
.pins { opacity: 0; transition: opacity .55s linear .7s; }
.map.in .pins { opacity: 1; }

.countries { align-self: start; }
.countries li {
  display: flex; justify-content: space-between; gap: .8rem; align-items: baseline;
  padding: .55rem 0; border-top: 1px solid var(--line);
  font-size: .88rem; font-weight: 500; cursor: default;
  transition: color .2s linear, padding .35s var(--out);
}
.countries li:last-child { border-bottom: 1px solid var(--line); }
.countries li i { font-style: normal; font-size: .76rem; color: var(--mute); font-weight: 450; text-align: right; }
.countries li.home i { color: var(--ink-head); }
.countries li.hot { color: var(--ink-head); padding-left: .35rem; }
.countries li.hot i { color: var(--ink-head); }
@media (max-width: 1079px) { .countries { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } }
@media (max-width: 700px) {
  .pins text { font-size: 28px; stroke-width: 7px; }
  .countries { grid-template-columns: 1fr; }
}

.locals { margin-top: 2.5rem; }
.locals h3 {
  font-size: .72rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-bottom: .8rem;
}
.locals ul { display: grid; gap: 0; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.locals li {
  border-top: 1px solid var(--line); padding: .55rem 0;
  font-size: .9rem; font-weight: 450;
  transition: padding .35s var(--out);
}
.locals li:hover { padding-left: .3rem; }

/* ---------- end ---------- */

.end {
  background: var(--canvas);
  padding: clamp(4rem, 9vw, 7.5rem) max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
  display: grid; gap: clamp(1.4rem, 2.5vw, 2rem);
  border-top: 1px solid var(--line);
}
.end .display { max-width: 14ch; }

.mail {
  font-weight: 450;
  font-size: clamp(1.4rem, 4vw, 2.8rem); letter-spacing: -.03em;
  color: var(--ink-head); width: fit-content;
  border-bottom: 1.5px solid var(--line);
  padding-bottom: .08em;
  transition: border-color .25s linear, opacity .2s linear;
}
.mail:hover { border-bottom-color: var(--ink); }

.end-cta { margin-top: .25rem; }

.end-grid { display: grid; gap: 1.5rem; margin-top: .5rem; }
@media (min-width: 760px) { .end-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.end-grid > div {
  border-top: 1px solid var(--line); padding-top: 1rem; display: grid; gap: .35rem;
}
.end-grid b {
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mute); font-weight: 500;
}
.end-grid a, .end-grid p { color: var(--ink-soft); font-size: .95rem; }
.end-grid a:hover { opacity: .55; }

.base {
  max-width: var(--max); margin: 0 auto;
  padding: 1.4rem var(--pad) 2rem;
  display: grid; gap: .3rem;
  font-size: .78rem; color: var(--mute); font-weight: 450;
  border-top: 1px solid var(--line);
}
.base a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.base a:hover { color: var(--ink-head); }
@media (min-width: 760px) {
  .base { grid-template-columns: repeat(3, 1fr); }
  .base p:last-child { text-align: right; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .anim { opacity: 1; transform: none; }
  .ln > span { transform: none; }
  .land path, .pins { opacity: 1; }
  .land path.on { fill: var(--map-partner); }
  .statement .w.off { color: inherit; }
}