/* EPL Group website
   Brand: ink #2c3a4b, coral #eb5a5d, grey #999ea6, Montserrat + Roboto Mono
   Static site, no build step. */

:root {
  --ink: #2c3a4b;
  --ink-2: #3a4a5e;
  --ink-soft: #5b6476;
  --coral: #eb5a5d;
  --coral-deep: #e04b55;
  --coral-light: #f07c80;
  --coral-tint: #fdecec;
  --grey: #999ea6;
  --mist: #8a929c;
  --paper: #ffffff;
  --card: #f2f4f7;
  --card-text: #e1e5eb;
  --dark: #141c24;
  --line: rgba(44, 58, 75, 0.15);
  --line-soft: rgba(44, 58, 75, 0.12);
  --wrap: 1200px;
  --pad: clamp(20px, 8.33vw, 120px);
  --nav-h: 112px;
  --font: "Montserrat", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "Roboto Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, .8, .22, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .8s;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { padding-top: var(--nav-h); }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--paper);
  font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 200; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--pad) * 2); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ---------- page fade ---------- */
body { opacity: 0; transition: opacity .5s ease; }
body.is-ready { opacity: 1; }

/* ---------- type ---------- */
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); }
.eyebrow .num { margin-right: .5em; }
.display {
  font-weight: 300; font-size: clamp(34px, 3.61vw, 52px); line-height: 1.1; letter-spacing: -.02em; color: var(--ink-2);
}
.display strong, .display b { font-weight: 600; color: var(--coral); }
.display--md { font-size: clamp(30px, 3.05vw, 44px); line-height: 1.12; letter-spacing: -.015em; }
.lead { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.note { font-size: 12px; color: var(--grey); }
.mono { font-family: var(--mono); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 16px; padding: 6px 6px 6px 24px; border-radius: 100px;
  font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; position: relative;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s;
  will-change: transform;
}
.btn__icon {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--coral-light) 14%, var(--coral-deep) 86%);
  transition: transform .45s var(--ease);
}
.btn__icon svg { width: 16px; height: 16px; transition: transform .45s var(--ease); }
.btn--black { background: var(--ink); color: #fff; }
.btn--ghost { background: var(--paper); color: var(--ink); border: 1px solid var(--line); padding-top: 5px; padding-bottom: 5px; }
.btn--ghost .btn__icon { background: linear-gradient(135deg, #3a4a5e 14%, #222e3b 86%); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(28, 38, 51, .35); }
.btn:hover .btn__icon svg { transform: translate(2px, -2px); }
.btn:active { transform: translateY(0); }
.btn--black:hover { background: #22303f; }

.link-arrow { display: inline-flex; align-items: baseline; gap: .5em; font-size: 14px; font-weight: 500; color: var(--coral); }
.link-arrow .arr { display: inline-block; transition: transform .3s var(--ease); }
.link-arrow:hover .arr { transform: translateX(4px); }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: box-shadow .4s, height .3s;
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); padding: 0 56px; gap: 24px; transition: height .35s var(--ease); }
.nav.is-scrolled { box-shadow: 0 1px 0 var(--line-soft), 0 12px 30px -24px rgba(28, 38, 51, .35); }
.nav.is-scrolled .nav__inner { height: 80px; }
.logo { display: inline-flex; align-items: center; color: var(--ink); transition: opacity .3s; }
.logo svg { width: 113px; height: 54px; }
.logo:hover { opacity: .8; }
.nav__links { display: flex; align-items: center; gap: 36px; }
.nav__links a { font-size: 15px; font-weight: 500; color: var(--ink); position: relative; padding: 6px 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--coral); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__cta { display: flex; gap: 36px; align-items: center; }
.nav__cta .btn--ghost { margin-right: 0; }
.nav__toggle { display: none; width: 44px; height: 44px; position: relative; }
.nav__toggle span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--ink); transition: transform .35s var(--ease), top .35s var(--ease), opacity .3s; }
.nav__toggle span:nth-child(1) { top: 16px; }
.nav__toggle span:nth-child(2) { top: 22px; }
.nav__toggle span:nth-child(3) { top: 28px; }
.nav.is-open .nav__toggle span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { top: 22px; transform: rotate(-45deg); }
.nav__mobile { display: none; }

/* ---------- reveal (scroll) ---------- */
.r { opacity: 0; transform: translateY(28px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
.r.in { opacity: 1; transform: none; }
.r--left { transform: translateX(-30px); }
.r--scale { transform: scale(.96); }
.r--fade { transform: none; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 120px 0 96px; min-height: 940px; overflow-x: clip; }
.hero__grid { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero__grid i { position: absolute; background: var(--ink); opacity: 0; }
.hero__grid .v1 { left: 33.33%; top: 0; width: 1px; height: 100%; transform: scaleY(0); transform-origin: top; }
.hero__grid .v2 { left: 66.66%; top: 0; width: 1px; height: 100%; transform: scaleY(0); transform-origin: top; }
.hero__grid .h1 { left: 0; top: -16px; width: 100%; height: 1px; transform: scaleX(0); transform-origin: left; }
.is-ready .hero__grid i { animation: gridIn 1.4s var(--ease-out) forwards; }
.is-ready .hero__grid .h1 { animation-delay: .1s; }
.is-ready .hero__grid .v1 { animation-delay: .35s; }
.is-ready .hero__grid .v2 { animation-delay: .5s; }
@keyframes gridIn { to { opacity: 1; transform: none; } }

.hero__meta { position: absolute; top: -72px; font-size: 11px; color: var(--coral); opacity: 0; animation: fadeIn 1s .6s ease forwards; }
.hero__meta--l { left: 56px; }
.hero__meta--r { right: 230px; }
@keyframes fadeIn { to { opacity: 1; } }

.hero__title {
  font-weight: 500; font-size: clamp(34px, 4.17vw, 60px); line-height: 1.1; letter-spacing: -.03em; color: var(--ink);
  display: flex; flex-wrap: wrap; column-gap: .27em; row-gap: 22px; align-items: flex-start; max-width: 1184px;
}
.hero__title .w { display: inline-block; }
.hero__title .dim { color: var(--grey); }
.hero__title .w > span { display: inline-block; transform: translateY(110%); opacity: 0; }
.is-ready .hero__title .w > span { animation: wordUp .9s var(--ease-out) forwards; animation-delay: calc(.25s + var(--i) * 55ms); }
.hero__title .w { overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.hero__title.is-settled .w { overflow: visible; }
@keyframes wordUp { to { transform: none; opacity: 1; } }

.ann { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ann__u { position: relative; display: inline-block; padding-bottom: 2px; }
.ann__u::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--coral); transform: scaleX(0); transform-origin: left; }
.is-ready .ann__u::after { animation: lineIn .8s var(--ease-out) forwards; animation-delay: calc(1s + var(--i) * 120ms); }
@keyframes lineIn { to { transform: scaleX(1); } }
.ann__label { font-size: 12px; font-weight: 400; color: var(--coral); letter-spacing: 0; white-space: nowrap; opacity: 0; transform: translateY(6px); }
.is-ready .ann__label { animation: labelIn .6s var(--ease-out) forwards; animation-delay: calc(1.4s + var(--i) * 120ms); }
.ann__label .arr { display: inline-block; margin-left: .4em; transition: transform .3s var(--ease); }
.ann__label:hover .arr { transform: translateX(4px); }
@keyframes labelIn { to { opacity: 1; transform: none; } }

.sel { position: relative; display: inline-block; padding: 1.5px 12px 4px 10px; color: var(--coral); }
.sel__box { position: absolute; inset: 0; opacity: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to right, var(--coral) 55%, transparent 0) left top / 10px 1.5px repeat-x,
    linear-gradient(to right, var(--coral) 55%, transparent 0) left bottom / 10px 1.5px repeat-x,
    linear-gradient(to bottom, var(--coral) 55%, transparent 0) left top / 1.5px 10px repeat-y,
    linear-gradient(to bottom, var(--coral) 55%, transparent 0) right top / 1.5px 10px repeat-y; }
.is-ready .sel__box { animation: fadeIn .5s 1.2s ease forwards; }
.sel__h { position: absolute; width: 10px; height: 10px; background: #fff; border: 1.5px solid var(--coral); opacity: 0; transform: scale(0); z-index: 3; box-sizing: border-box; }
.is-ready .sel__h { animation: handleIn .45s var(--ease-out) forwards; }
.sel__h.tl { left: -6.5px; top: -6.5px; animation-delay: 1.5s; }
.sel__h.tr { right: -6.5px; top: -6.5px; animation-delay: 1.6s; }
.sel__h.bl { left: -6.5px; bottom: -6.5px; animation-delay: 1.7s; }
.sel__h.br { right: -6.5px; bottom: -6.5px; animation-delay: 1.8s; }
@keyframes handleIn { to { opacity: 1; transform: none; } }
.sel__cursor { position: absolute; left: calc(100% - 8px); bottom: -24px; width: 26px; height: 28px; opacity: 0; transform: translate(40px, 40px); z-index: 3; }
.is-ready .sel__cursor { animation: cursorIn 1s var(--ease-out) 1.9s forwards; }
@keyframes cursorIn { to { opacity: 1; transform: none; } }
.sel__tag {
  position: absolute; left: calc(100% - 10px); bottom: -46px; z-index: 3; white-space: nowrap;
  background: #fff; border-radius: 100px; padding: 8px 14px; font-size: 14px; font-weight: 500; color: var(--coral);
  box-shadow: 0 4px 7px rgba(0, 0, 0, .12); opacity: 0; transform: translateY(6px) scale(.9); transform-origin: left top;
}
.is-ready .sel__tag { animation: tagIn .55s var(--ease-out) 2.6s forwards; }
@keyframes tagIn { to { opacity: 1; transform: none; } }

.hero__lead { margin-top: 64px; max-width: 560px; font-size: 19px; line-height: 1.55; color: var(--ink); }
.hero__lead .dim { color: var(--grey); }
.hero__actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero__fine { margin-top: 28px; font-size: 13px; color: var(--ink-soft); }
.hero__lead, .hero__actions, .hero__fine { opacity: 0; transform: translateY(18px); }
.is-ready .hero__lead { animation: labelIn .9s var(--ease-out) 1.1s forwards; }
.is-ready .hero__actions { animation: labelIn .9s var(--ease-out) 1.3s forwards; }
.is-ready .hero__fine { animation: labelIn .9s var(--ease-out) 1.5s forwards; }

.hero__tree { position: absolute; right: 40px; bottom: -4px; width: clamp(640px, calc(380px + 22vw), 780px); pointer-events: none; z-index: 1; opacity: 0; transform: translateY(24px) scale(.97); transform-origin: bottom center; }
.hero__tree::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 30px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(44, 58, 75, .22), rgba(44, 58, 75, 0) 70%); filter: blur(6px); z-index: -1; }
.hero__tree img { width: 100%; height: auto; }
.is-ready .hero__tree { animation: treeIn 1.6s var(--ease-out) .9s forwards; }
@keyframes treeIn { to { opacity: 1; transform: none; } }
.hero__lockup {
  position: absolute; right: 13px; top: 150px; writing-mode: vertical-rl; font-size: 12px; font-weight: 600; letter-spacing: .5em; color: var(--coral);
  opacity: 0; transform: translateY(-14px); white-space: nowrap;
}
.is-ready .hero__lockup { animation: labelIn 1s var(--ease-out) 1.6s forwards; }
.hero .wrap { position: relative; z-index: 2; }

/* ---------- journey index ---------- */

/* ---------- sections ---------- */
.section { padding: 120px 0; }
.section--line { border-top: 1px solid var(--ink); }
.section__head { display: flex; align-items: flex-end; gap: 80px; margin-bottom: 48px; }
.section__head .title { max-width: 720px; display: flex; flex-direction: column; gap: 14px; flex: 0 1 720px; }
.section__head .side { flex: 1 1 0; min-width: 0; }
.section__head .side--right { text-align: right; }
.section__head--gap56 { margin-bottom: 56px; }
.side-row { display: flex; gap: 24px; align-items: flex-end; justify-content: flex-end; }
.section__head .title--wide { flex-basis: 760px; max-width: 760px; }
.section__head .side--narrow { flex: 0 0 320px; }

/* ---------- figures ---------- */
.figure__n { font-size: clamp(40px, 4.44vw, 64px); font-weight: 500; letter-spacing: -.03em; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.figure__n.coral { color: var(--coral); }
.figure__l { font-size: 15px; line-height: 1.5; color: var(--ink-soft); }

/* ---------- mesh ---------- */
.mesh {
  position: relative; height: 640px; border-radius: 8px; overflow: hidden; background: linear-gradient(145deg, #e9e3de 0%, #f3d9cf 71%);
}
.mesh__bg { position: absolute; left: -5%; top: -5%; width: 110%; height: 110%; max-width: none; object-fit: cover; animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-2.5%, 2%) scale(1.06); } }
.mesh__connectors { position: absolute; left: 391px; top: 117.5px; width: 606px; height: 423px; }
.mesh__connectors path { stroke-dasharray: 3100; stroke-dashoffset: 3100; }
.in .mesh__connectors path { animation: draw 2.2s var(--ease-out) .6s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.pill {
  position: absolute; display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px 16px 26px; border-radius: 100px;
  background: #fff; box-shadow: 0 6px 18px rgba(28, 38, 51, .12); white-space: nowrap;
  opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), box-shadow .35s;
  transition-delay: calc(.3s + var(--i) * 140ms);
}
.in .pill { opacity: 1; transform: none; }
.pill:hover { box-shadow: 0 14px 32px rgba(28, 38, 51, .18); transform: translateY(-3px); transition-delay: 0s; }
.pill--root { background: var(--ink); color: #fff; font-size: 22px; font-weight: 600; }
.pill--root .dim { color: rgba(255, 255, 255, .6); font-weight: 400; }
.pill__mono { display: inline-flex; gap: 3px; align-items: center; height: 24px; }
.pill__mono img { height: 24px; width: auto; }
.pill__sep { width: 1px; height: 22px; background: var(--line); }
.pill__name { font-size: 19px; font-weight: 600; color: var(--ink); }
.pill__sub { font-size: 15px; color: var(--mist); }
.mesh__caption { position: absolute; left: 40px; bottom: 32px; background: rgba(255, 255, 255, .18); color: #fff; font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 100px; backdrop-filter: blur(4px); }
.platform-notes { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 48px; }
.platform-notes > div { border-top: 1px solid var(--line-soft); padding: 20px 24px 0 0; display: flex; flex-direction: column; gap: 8px; }
.platform-notes > div + div { border-left: 1px solid var(--line-soft); padding-left: 24px; }
.platform-notes h3 { font-size: 16px; font-weight: 600; }
.platform-notes p { font-size: 14px; line-height: 1.55; color: var(--ink-soft); }

/* ---------- team ---------- */
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.person { position: relative; background: var(--card); border-radius: 6px; height: 490px; overflow: hidden; text-align: center; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.person:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(28, 38, 51, .35); }
.person__photo { position: absolute; left: 50%; top: 34px; width: 210px; height: 240px; transform: translateX(-50%); filter: grayscale(1); transition: transform .6s var(--ease), filter .6s; }
.person__photo--sm { width: 168px; height: 192px; top: 53px; }
.person:hover .person__photo { filter: grayscale(.4); transform: translateX(-50%) scale(1.03); }
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__fade { position: absolute; left: 0; right: 0; top: 170px; height: 120px; background: linear-gradient(to bottom, rgba(242, 244, 247, 0), var(--card) 75%); }
.person__big { position: absolute; left: 0; right: 0; top: 228px; font-size: 84px; font-weight: 600; letter-spacing: -.04em; color: var(--card-text); line-height: 1.2; white-space: nowrap; }
.person__role { position: absolute; left: 0; right: 0; top: 326px; font-size: 15px; font-weight: 500; color: var(--ink-soft); }
.person__cred { position: absolute; left: 0; right: 0; top: 354px; font-size: 13px; font-weight: 600; color: var(--coral); }
.person__focus { position: absolute; left: 50%; top: 390px; transform: translateX(-50%); background: var(--coral-tint); color: var(--coral); font-size: 12px; font-weight: 600; letter-spacing: .14em; padding: 8px 14px; border-radius: 6px; white-space: nowrap; }
.person__link { position: absolute; left: 0; right: 0; top: 444px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.person__link .arr { display: inline-block; margin-left: .4em; transition: transform .3s var(--ease); }
.person__link:hover .arr { transform: translateX(4px); }

/* ---------- chart ---------- */
.chart-card { background: var(--card); border-radius: 6px; padding: 28px 40px 24px; }
.chart-card .note { text-align: right; }
.chart { position: relative; height: 470px; margin-top: 0; }
.chart__grid { position: absolute; left: 100px; right: 10px; top: 0; bottom: 0; }
.chart__grid i { position: absolute; left: 0; right: 0; height: 1px; background: rgba(44, 58, 75, .12); }
.chart__y { position: absolute; left: 20px; font-size: 14px; color: var(--ink-soft); transform: translateY(-50%); }
.bar { position: absolute; bottom: 50px; width: 12.87%; border-radius: 14px 14px 0 0; background: linear-gradient(to bottom, #e2e2e0, #eeeeec); transform-origin: bottom; transform: scaleY(0); transition: transform 1.2s var(--ease-out); transition-delay: calc(var(--i) * 120ms); }
.in .bar { transform: scaleY(1); }
.bar--hi { background: linear-gradient(to bottom, #e54f57, #eb5a5d 50%, #f6b3b5); box-shadow: 0 18px 36px -10px rgba(201, 68, 75, .14); }
.bar__val { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); background: rgba(211, 211, 208, .6); color: #6b7280; font-size: 13px; font-weight: 500; padding: 5px 12px; border-radius: 6px; opacity: 0; transition: opacity .6s; transition-delay: calc(1s + var(--i) * 120ms); }
.in .bar__val { opacity: 1; }
.bar--hi .bar__val { background: rgba(185, 58, 68, .5); color: #fff; }
.bar__label { position: absolute; left: 50%; top: calc(100% + 14px); transform: translateX(-50%); width: 200px; text-align: center; font-size: 14px; color: var(--ink-soft); white-space: nowrap; }
.bar--hi .bar__label { font-weight: 600; color: var(--ink); }
.chart__bars { position: absolute; left: 100px; right: 10px; top: 0; bottom: 0; }
.chart__bars .bar { bottom: 50px; }
.bar__label { max-width: 160px; white-space: normal; }

/* ---------- partners (list) ---------- */
.paths-grid { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); display: grid; grid-template-columns: 440px 1fr; }
.stacked { padding: 40px 40px 40px 0; display: flex; flex-direction: column; gap: 4px; }
.stacked span { font-size: clamp(28px, 3.05vw, 44px); font-weight: 500; letter-spacing: -.015em; line-height: 1.15; color: var(--ink); transition: color .35s, transform .35s var(--ease); transform-origin: left; display: inline-block; }
.stacked span.on { color: var(--coral); transform: translateX(6px); }
.stacked small { font-size: 11px; color: var(--grey); margin-top: auto; }
.paths { border-left: 1px solid var(--ink); padding-left: 40px; }
.path { display: flex; align-items: center; gap: 20px; padding: 24px 0; border-top: 1px solid var(--ink); transition: padding-left .35s var(--ease); }
.path:first-child { border-top: 0; }
.path:hover { padding-left: 8px; }
.path .n { width: 28px; font-size: 11px; color: var(--grey); flex: 0 0 28px; }
.path .q { flex: 1 1 0; font-size: 18px; font-weight: 500; }
.path .link-arrow { flex: 0 0 auto; }

/* ---------- partners (report) ---------- */
.report { text-align: center; }
.report .section__head { justify-content: center; margin-bottom: 48px; }
.report .section__head .title { align-items: center; }
.photo-panel { position: relative; height: 720px; border-radius: 16px; overflow: hidden; background: #1c2a24; }
.photo-panel__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); will-change: transform; }
.pcard { position: absolute; background: #fff; border-radius: 8px; padding: 8px 8px 14px; box-shadow: 0 16px 40px -8px rgba(13, 26, 20, .22); text-align: left; width: 226px; opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.in .pcard { opacity: 1; transform: none; }
.pcard--l { left: 40px; top: 88px; transition-delay: .5s; }
.pcard--r { right: 40px; top: 330px; transition-delay: .8s; }
.pcard img { width: 210px; height: 262px; object-fit: cover; border-radius: 5px; }
.pcard figcaption { padding: 10px 0 0 4px; display: flex; flex-direction: column; gap: 3px; }
.pcard b { font-size: 13px; font-weight: 600; color: var(--ink); }
.pcard .link-arrow { font-size: 11px; }
.router {
  position: absolute; left: 290px; top: 80px; width: 620px; background: #fff; border-radius: 8px; padding: 30px 36px 36px; text-align: left;
  box-shadow: 0 20px 50px -10px rgba(13, 26, 20, .18); opacity: 0; transform: translateY(30px) scale(.98); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: .2s;
}
.in .router { opacity: 1; transform: none; }
.router__logo { width: 66px; height: 36px; color: var(--ink); overflow: hidden; }
.router__logo svg { width: 66px; height: 31px; }
.router h3 { font-size: 30px; font-weight: 500; letter-spacing: -.01em; margin-top: 34px; }
.router > p { font-size: 13px; color: var(--mist); margin-top: 8px; }
.router__panel { position: relative; margin-top: 22px; border-radius: 4px; overflow: hidden; padding: 18px 24px 22px; color: #fff; }
.router__panel::before { content: ""; position: absolute; inset: 0; background: url("../assets/photo-motion.jpg") 60% 40% / cover no-repeat; }
.router__panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20, 31, 26, .35), rgba(15, 26, 20, .7)); }
.router__panel > * { position: relative; z-index: 1; }
.router__head { text-align: center; border-bottom: 1px solid rgba(255, 255, 255, .15); padding-bottom: 12px; display: flex; flex-direction: column; gap: 2px; }
.router__head b { font-size: 12px; font-weight: 500; }
.router__head span { font-size: 10px; color: rgba(255, 255, 255, .55); }
.opt { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 6px; width: 100%; text-align: left; transition: background .3s; cursor: pointer; }
.opt .dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .6); flex: 0 0 14px; transition: all .3s; }
.opt .q { flex: 1 1 0; font-size: 13px; color: rgba(255, 255, 255, .85); }
.opt .a { font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, .5); white-space: nowrap; }
.opt:hover { background: rgba(255, 255, 255, .06); }
.opt.on { background: rgba(255, 255, 255, .12); }
.opt.on .dot { background: var(--coral); border-color: var(--coral); }
.opt.on .q { color: #fff; }
.opt.on .a { color: rgba(255, 255, 255, .95); }
.router__reply { display: flex; gap: 10px; align-items: flex-start; padding-top: 16px; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.router__reply img { width: 22px; height: 22px; flex: 0 0 22px; }
.router__reply p { transition: opacity .3s; }
.report__under { margin: 48px auto 0; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 24px; font-size: 20px; line-height: 1.4; color: #5b6778; }

/* ---------- process (calendar) ---------- */
.process { position: relative; color: #fff; padding: 120px 0 110px; overflow: hidden; background: var(--dark); }
.process__bg { position: absolute; left: -6%; top: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; opacity: .55; animation: pan 30s linear infinite alternate; }
@keyframes pan { from { transform: translateX(0); } to { transform: translateX(-3%); } }
.process__veil { position: absolute; inset: 0; background: linear-gradient(to right, rgba(20, 28, 36, .92), rgba(20, 28, 36, .55) 55%, rgba(20, 28, 36, .25)); }
.process .wrap { position: relative; }
.process .section__head { align-items: flex-end; justify-content: space-between; }
.process .display { color: #fff; font-weight: 500; }
.process .display .dim { color: rgba(255, 255, 255, .55); font-weight: 500; }
.process__note { font-family: var(--mono); font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .5); white-space: nowrap; }
.cal { position: relative; height: 470px; }
.cal__cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.cal__cols div { border-left: 1px solid rgba(255, 255, 255, .16); padding: 14px 0 0 16px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; color: rgba(255, 255, 255, .6); }
.cal__cols div:last-child { border-right: 1px solid rgba(255, 255, 255, .16); }
.cal__rule { position: absolute; left: 0; right: 0; top: 44px; height: 1px; background: rgba(255, 255, 255, .16); }
.cal__today { position: absolute; left: 0; top: 44px; width: 2px; height: 426px; background: var(--coral); transform: scaleY(0); transform-origin: top; transition: transform 1.2s var(--ease-out) .2s; }
.in .cal__today { transform: scaleY(1); }
.ev { position: absolute; width: calc(20% - 1px); padding: 12px 14px 14px; background: rgba(14, 21, 28, .55); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px); font-family: var(--mono); display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), background .3s; transition-delay: calc(.4s + var(--i) * 180ms); }
.in .ev { opacity: 1; transform: none; }
.ev:hover { background: rgba(14, 21, 28, .75); }
.ev b { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .9); }
.ev p { font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, .6); }
.ev small { font-size: 11px; color: rgba(255, 255, 255, .5); }
.ev--hi { background: rgba(235, 90, 93, .92); border-color: transparent; }
.ev--hi b { color: #fff; } .ev--hi p { color: rgba(255, 255, 255, .9); }
.ev--hi:hover { background: rgba(235, 90, 93, 1); }
.ev1 { left: 1px; top: 62px; } .ev2 { left: 20%; top: 162px; } .ev3 { left: 40%; top: 262px; width: calc(40% - 1px); } .ev4 { left: 80%; top: 362px; }
.process__actions { display: flex; gap: 12px; margin-top: 48px; flex-wrap: wrap; }

/* ---------- contact / faq ---------- */
.audiences { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); display: grid; grid-template-columns: 1fr 1fr; }
.audience { padding: 32px 32px 32px 0; display: flex; flex-direction: column; gap: 14px; }
.audience + .audience { border-left: 1px solid var(--ink); padding-left: 32px; }
.audience h3 { font-size: 20px; font-weight: 600; }
.audience p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.email { align-self: flex-start; font-size: 17px; font-weight: 500; padding-bottom: 4px; border-bottom: 1.5px solid var(--ink); position: relative; }
.email::after { content: ""; position: absolute; left: 0; bottom: -1.5px; height: 1.5px; width: 100%; background: var(--coral); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.email:hover::after { transform: scaleX(1); }
.faq { margin-top: 56px; }
.faq > .note { font-size: 13px; }
.faq__item { border-top: 1px solid var(--ink); }
.faq__item:first-of-type { border-top: 0; }
.faq__q { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 18px 0; font-size: 18px; font-weight: 500; text-align: left; }
.faq__q .pm { font-size: 22px; font-weight: 400; color: var(--grey); line-height: 1.2; position: relative; width: 14px; height: 26px; flex: 0 0 14px; }
.faq__q .pm::before, .faq__q .pm::after { content: ""; position: absolute; background: var(--grey); left: 1px; top: 12px; width: 12px; height: 1.5px; transition: transform .35s var(--ease); }
.faq__q .pm::after { transform: rotate(90deg); }
.faq__item.open .faq__q .pm::after { transform: rotate(0); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.faq__a > div { overflow: hidden; }
.faq__a p { max-width: 820px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); padding: 0 0 18px; }
.faq__item.open .faq__a { grid-template-rows: 1fr; }

/* ---------- closing band ---------- */
.closing { position: relative; min-height: 640px; display: flex; align-items: center; color: #fff; overflow: hidden; background: #141212; }
.closing__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); will-change: transform; }
.closing__veil { position: absolute; inset: 0; background: linear-gradient(to right, rgba(20, 18, 18, .85), rgba(20, 18, 18, .55) 45%, rgba(20, 18, 18, 0) 75%); }
.closing .wrap { position: relative; display: flex; flex-direction: column; gap: 28px; align-items: flex-start; padding-top: 80px; padding-bottom: 80px; }
.closing__kicker { font-size: 13px; font-weight: 500; letter-spacing: .06em; color: #fab8a8; }
.closing h2 { font-size: clamp(34px, 3.9vw, 56px); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.closing h2 .dim { color: rgba(255, 255, 255, .6); }
.closing p { max-width: 520px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.closing__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: #fff; padding: 96px 0 40px; overflow: hidden; }
.footer__logo { color: #fff; margin-bottom: 0; }
.footer__logo svg { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease-out); }
.footer__logo.in svg { clip-path: inset(0 0 0 0); }
.footer__logo svg { width: 100%; height: auto; }
.footer__cols { display: grid; grid-template-columns: 360px 1fr 1fr 1fr; gap: 48px; border-top: 1px solid #fff; padding: 40px 0 32px; }
.footer__cols p { font-size: 14px; line-height: 1.6; }
.footer__cols h4 { font-size: 12px; font-weight: 400; margin-bottom: 12px; }
.footer__cols li { font-size: 15px; margin-bottom: 12px; }
.footer__cols a { position: relative; }
.footer__cols a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--coral); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.footer__cols a:hover::after { transform: scaleX(1); }
.footer__legal { border-top: 1px solid #fff; padding-top: 24px; font-size: 12px; display: flex; flex-direction: column; gap: 10px; }
.footer__legal p:first-child { line-height: 1.65; }

/* ---------- inner pages ---------- */
.page-hero { position: relative; padding: 96px 0 64px; border-bottom: 1px solid var(--ink); overflow: hidden; }
.page-hero .eyebrow { margin-bottom: 14px; }
.page-hero .display { max-width: 900px; }
.page-hero .lead { max-width: 560px; margin-top: 24px; font-size: 18px; }
.page-hero__actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.page-hero--dark { background: var(--dark); color: #fff; border-bottom: 0; }
.page-hero--dark .display { color: #fff; }
.page-hero--dark .lead { color: rgba(255, 255, 255, .75); }
.page-hero--dark .btn--ghost { background: #fff; }
.page-hero__photo { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; opacity: .5; }
.page-hero__veil { position: absolute; inset: 0; background: linear-gradient(to right, rgba(20, 28, 36, .95), rgba(20, 28, 36, .6) 60%, rgba(20, 28, 36, .3)); }
.page-hero .wrap { position: relative; }

.platform-detail { display: grid; grid-template-columns: 440px 1fr; gap: 80px; padding: 64px 0; border-top: 1px solid var(--ink); }
.platform-detail:first-of-type { border-top: 0; }
.platform-detail__id { display: flex; flex-direction: column; gap: 18px; }
.platform-detail__id .pill { position: static; opacity: 1; transform: none; align-self: flex-start; }
.platform-detail__id h2 { font-size: clamp(28px, 2.5vw, 36px); font-weight: 500; letter-spacing: -.015em; line-height: 1.15; }
.platform-detail__id .stage { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); }
.platform-detail__body { display: flex; flex-direction: column; gap: 24px; }
.platform-detail__body p { font-size: 16px; line-height: 1.65; color: var(--ink-soft); max-width: 640px; }
.spec { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.spec div { padding: 18px 20px 18px 0; display: flex; flex-direction: column; gap: 6px; }
.spec div + div { border-left: 1px solid var(--line); padding-left: 20px; }
.spec dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.spec dd { font-size: 15px; font-weight: 500; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { background: var(--card); border-radius: 6px; padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(28, 38, 51, .35); }
.card .tag { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); }
.card h3 { font-size: 20px; font-weight: 600; line-height: 1.3; }
.card p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.card .meta { font-size: 12px; color: var(--grey); margin-top: auto; }

.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); padding: 0 16px 14px 0; border-bottom: 1px solid var(--ink); }
.table td { padding: 20px 16px 20px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.table td.v { font-weight: 600; white-space: nowrap; }
.table tr:hover td { background: linear-gradient(to right, rgba(242, 244, 247, .9), rgba(242, 244, 247, 0)); }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; max-width: 820px; }
.form .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 15px; color: var(--ink); background: var(--paper); border: 0; border-bottom: 1.5px solid var(--ink); padding: 10px 0; border-radius: 0; transition: border-color .3s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--coral); }
.form__foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 8px; }
.form__foot .note { font-size: 13px; color: var(--ink-soft); }
.choice-row { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); border-radius: 100px; padding: 8px 16px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all .3s; }
.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.form__done { display: none; padding: 32px; background: var(--card); border-radius: 6px; max-width: 820px; }
.form__done h3 { font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.form.is-sent { display: none; }
.form.is-sent + .form__done { display: block; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.sticky-aside { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 24px; }
.sticky-aside .display { font-size: clamp(28px, 2.5vw, 36px); }

.post-list { border-top: 1px solid var(--ink); }
.post { display: grid; grid-template-columns: 140px 1fr 220px; gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--ink); align-items: start; transition: padding-left .35s var(--ease); }
.post:hover { padding-left: 8px; }
.post .date { font-family: var(--mono); font-size: 12px; color: var(--grey); padding-top: 6px; }
.post h3 { font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.post p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin-top: 8px; max-width: 640px; }
.post .tag { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); padding-top: 6px; }

.error-page { min-height: 70vh; display: flex; align-items: center; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; transition-duration: .001s !important; transition-delay: 0s !important; }
  .r { opacity: 1; transform: none; }
  .hero__title .w > span, .ann__label, .sel__box, .sel__h, .sel__cursor, .sel__tag, .hero__lead, .hero__actions, .hero__fine, .hero__tree, .hero__lockup, .hero__meta { opacity: 1; transform: none; }
  .ann__u::after { transform: none; }
  .pill, .pcard, .router, .ev, .bar, .bar__val { opacity: 1; transform: none; }
  .cal__today { transform: none; }
  .footer__logo svg { clip-path: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  .mesh__connectors { display: none; }
  .hero__tree { width: 52vw; top: auto; bottom: 0; }
}
@media (max-width: 1080px) {
  :root { --nav-h: 76px; }
  .nav__inner { padding: 0 24px; }
  .nav.is-scrolled .nav__inner { height: 64px; }
  .logo svg { width: 92px; height: 44px; }
  .nav__links { display: none; }
  .nav__cta .btn--ghost { display: none; }
  .nav__toggle { display: block; }
  .nav__mobile { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--line); padding: 16px 24px 24px; flex-direction: column; gap: 4px; box-shadow: 0 24px 40px -24px rgba(28, 38, 51, .35); }
  .nav.is-open .nav__mobile { display: flex; }
  .nav__mobile a { padding: 12px 0; font-size: 17px; font-weight: 500; border-bottom: 1px solid var(--line-soft); }
  .nav__mobile .btn { margin-top: 16px; align-self: flex-start; border-bottom: 0; }
  .hero { min-height: 0; padding: 72px 0 72px; }
  .hero__meta--r { display: none; }
  .hero__lockup { display: none; }
  .hero__tree { position: relative; right: auto; top: auto; width: min(100%, 640px); margin: 40px auto -4px; bottom: auto; }
  .hero__tree::after { display: none; }
  .section { padding: 80px 0; }
  .section__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .section__head .title, .section__head .title--wide { flex: none; max-width: 100%; }
  .section__head .side, .section__head .side--narrow { flex: none; width: 100%; }
  .hero__grid .v1, .hero__grid .v2 { display: none; }
  .section__head .side--right { text-align: left; }
  .side-row { justify-content: flex-start; }
  .mesh { height: auto; padding: 32px 24px 64px; }
  .pill { position: relative; left: auto !important; top: auto !important; display: inline-flex; margin: 0 0 14px; white-space: normal; max-width: 100%; }
  .mesh__caption { bottom: 20px; left: 24px; }
  .platform-notes { grid-template-columns: 1fr 1fr; gap: 24px 0; }
  .platform-notes > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .people { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .paths-grid { grid-template-columns: 1fr; }
  .stacked { padding: 32px 0; }
  .paths { border-left: 0; padding-left: 0; border-top: 1px solid var(--ink); }
  .path { flex-wrap: wrap; }
  .path .q { flex-basis: calc(100% - 48px); }
  .path .link-arrow { margin-left: 48px; }
  .photo-panel { height: auto; padding: 24px; display: flex; flex-direction: column; gap: 24px; }
  .router { position: relative; left: auto; top: auto; width: 100%; }
  .pcard { position: relative; left: auto !important; right: auto !important; top: auto !important; width: 100%; display: flex; gap: 16px; align-items: center; }
  .pcard img { width: 120px; height: 150px; }
  .cal { height: auto; }
  .cal__cols, .cal__rule, .cal__today { display: none; }
  .ev { position: relative; left: auto !important; top: auto !important; width: 100% !important; margin-bottom: 12px; }
  .audiences { grid-template-columns: 1fr; }
  .audience + .audience { border-left: 0; padding-left: 0; border-top: 1px solid var(--ink); }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .platform-detail { grid-template-columns: 1fr; gap: 32px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .two-col { grid-template-columns: 1fr; gap: 48px; }
  .sticky-aside { position: static; }
  .post { grid-template-columns: 1fr; gap: 8px; }
  .chart-card { padding: 20px; }
  .chart__grid, .chart__bars { left: 60px; }
  .bar { width: 14%; }
  .bar__label { width: 90px; font-size: 12px; }
}
@media (max-width: 640px) {
  :root { --pad: 20px; }
  .hero__title { row-gap: 14px; }
  .sel { padding: 0 6px 2px 6px; }
  .sel__tag { left: 0; bottom: -46px; }
  .sel__cursor { display: none; }
  .platform-notes { grid-template-columns: 1fr; }
  .platform-notes > div + div { border-left: 0; padding-left: 0; }
  .pill { padding: 12px 18px; gap: 10px; }
  .pill__name { font-size: 16px; } .pill__sub { font-size: 13px; }
  .pill--root { font-size: 18px; }
  .footer__cols { grid-template-columns: 1fr; gap: 32px; }
  .cards { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .spec { grid-template-columns: 1fr; }
  .spec div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .closing { min-height: 0; }
  .chart__y { font-size: 11px; left: 8px; }
  .chart__grid, .chart__bars { left: 48px; }
  .bar__label { width: 62px; font-size: 10px; line-height: 1.2; }
  .person__big { font-size: 64px; }
  .router { padding: 24px 20px 28px; }
  .opt { flex-wrap: wrap; }
  .opt .a { padding-left: 26px; width: 100%; }
}

/* ---------- phone refinements ---------- */
@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .display { font-size: 30px; }
  .display--md { font-size: 28px; }
  .section__head { margin-bottom: 32px; }
  .hero { padding: 40px 0 0; }
  .hero__meta { display: none; }
  .hero__title { font-size: clamp(30px, 8.6vw, 36px); row-gap: 12px; }
  .sel { padding: 0 8px 2px 6px; }
  .sel__tag { left: 0; top: calc(100% + 10px); bottom: auto; padding: 0; background: none; box-shadow: none; font-size: 12px; font-weight: 400; letter-spacing: 0; transform: translateY(6px); }
  .sel__tag::after { content: " \2192"; }
  .sel-wrap { margin-bottom: 26px; }
  .hero__lead { margin-top: 36px; font-size: 17px; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: space-between; }
  .hero__fine { font-size: 12px; }
  .hero__tree { width: 100%; margin: 28px 0 -4px; }

  /* section index: one swipeable row instead of a tall grid */

  .figure__n { font-size: 44px; }

  /* platform pills: name on one line, stage underneath */
  .mesh { padding: 24px 16px 60px; border-radius: 8px; }
  .pill { flex-wrap: wrap; row-gap: 2px; border-radius: 18px; padding: 12px 16px; width: 100%; }
  .pill--root { width: auto; border-radius: 100px; }
  .pill__sep { display: none; }
  .pill__sub { flex-basis: 100%; padding-left: 0; font-size: 13px; }
  .pill__mono { margin-right: 4px; }
  .mesh__caption { left: 16px; right: 16px; text-align: center; }

  /* team cards */
  .person { height: 470px; }

  /* chart */
  .chart-card .note { text-align: left; }

  /* partner router */
  .photo-panel { padding: 16px; border-radius: 12px; gap: 16px; }
  .router { padding: 22px 18px 24px; }
  .router h3 { font-size: 24px; margin-top: 22px; }
  .router__panel { padding: 16px 12px 18px; }
  .pcard img { width: 96px; height: 120px; }
  .pcard .link-arrow { display: inline; }
  .report__under { font-size: 17px; }
  .report__under br, .process .display br + .dim { display: inline; }
  .report__under br { display: none; }

  /* process */
  .process { padding: 64px 0; }
  .process__note { white-space: normal; }
  .process__actions .btn, .closing__actions .btn { flex: 1 1 auto; justify-content: space-between; }

  .faq__q { font-size: 16px; }
  .closing .wrap { padding-top: 64px; padding-bottom: 64px; }
  .closing__bg { object-position: 70% center; }
  .closing__veil { background: linear-gradient(to bottom, rgba(20, 18, 18, .75), rgba(20, 18, 18, .88)); }
  .footer { padding-top: 64px; }

  /* inner pages */
  .page-hero { padding: 56px 0 40px; }
  .page-hero .lead { font-size: 16px; }
  .platform-detail { padding: 40px 0; }
  .two-col { gap: 32px; }
  .post { padding: 24px 0; }
  .post h3 { font-size: 19px; }
  .table { font-size: 14px; }
  .table th:nth-child(3), .table td:nth-child(3) { display: none; }
}

/* =====================================================================
   Homepage v5 (editorial layers): centred hero, colour-band index,
   and a backdrop tree that stands on a ground strip in section 01.
   ===================================================================== */
.wind-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- hero: centred ---- */
.hero { padding: 120px 0 456px; min-height: 0; z-index: 2; }
.hero__title { justify-content: center; text-align: center; margin: 0 auto; max-width: 1200px; }
.hero__lead { margin: 64px auto 0; max-width: 926px; text-align: center; }
.hero__actions { justify-content: center; }
.hero__fine { text-align: center; }
.hero__tree { display: none; }

/* ---- shared two-tone block marker (index + figures) ---- */
.blk {
  display: block; width: 16px; flex: 0 0 16px; align-self: stretch;
  background:
    linear-gradient(var(--l1) 0 var(--lp), var(--l2) var(--lp) 100%) left top / 8px 100% no-repeat,
    linear-gradient(var(--r1) 0 var(--rp), var(--r2) var(--rp) 100%) right top / 8px 100% no-repeat;
  transform: scaleY(0); transform-origin: top;
  transition: transform 1s var(--ease-out); transition-delay: calc(.15s + var(--i, 0) * 90ms);
}
.in .blk, .in.blk { transform: scaleY(1); }

/* ---- index: colour band + frosted panel ---- */
.journey { position: relative; z-index: 3; }
.journey__band { display: flex; height: 16px; }
.journey__band i { display: block; height: 100%; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-out); }
.journey__band i:first-child { width: 44.45%; background: var(--ink); }
.journey__band i:last-child { flex: 1; background: var(--coral); transition-delay: .25s; }
.journey.in .journey__band i { transform: scaleX(1); }
.journey__panel { background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); padding: 44px 0 24px; }
.journey ol { display: grid; grid-template-columns: repeat(7, 1fr); }
.journey a { display: flex; gap: 14px; padding-right: 12px; min-height: 96px; }
.journey .blk { height: 96px; }
.journey .t { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.journey .n { font-size: 52px; font-weight: 300; line-height: 1; letter-spacing: -.03em; color: var(--ink); transition: color .3s, transform .4s var(--ease); }
.journey li:first-child .n { color: var(--coral); }
.journey .q { font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.journey a:hover .n { color: var(--coral); transform: translateX(3px); }
.journey .n, .journey .q { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), color .3s; transition-delay: calc(.3s + var(--i, 0) * 90ms); }
.journey.in .n, .journey.in .q { opacity: 1; transform: none; }

/* ---- section 01: veil, ground and backdrop tree ---- */
.trust { position: relative; }
/* no z-index on the wrap: the backdrop art must share the page's stacking context so it sits
   behind the hero and index, while the heading and figures sit above it */
.trust .wrap { position: relative; }
.trust .section__head { position: relative; z-index: 2; align-items: flex-start; margin-bottom: 48px; }
.trust__veil { position: absolute; left: 0; top: 90px; width: calc(50% + 100px); height: 220px; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, .92), rgba(255, 255, 255, .75) 60%, rgba(255, 255, 255, 0)); }
.trust__figures { position: relative; }
.trust__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.trust__ground { position: absolute; top: -59px; left: 50%; width: 100vw; margin-left: -50vw; height: 71px;
  background: url("../assets/ground-tile.jpg") center top / 734px 71px repeat-x; }
.trust__ground::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; background: linear-gradient(#fff, rgba(255, 255, 255, 0)); }
.trust__tree { position: absolute; top: -894px; left: 50%; width: 1114px; margin-left: -553.5px; opacity: 0; transform: translateY(40px); }
.trust__tree img { width: 100%; height: auto; display: block; }
/* same as Figma's darken layer: hides the faint white halo where the mound meets the ground strip */
.trust__tree { mix-blend-mode: darken; }
.is-ready .trust__tree { animation: treeIn 1.8s var(--ease-out) .5s forwards; }
.trust__figures .figures { position: relative; z-index: 2; }

/* ---- figures: block markers instead of rules ---- */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-top: 36px; border: 0; }
.figures .figure { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 0 20px 8px 34px; border: 0; }
.figures .figure .blk { position: absolute; left: 0; top: 0; bottom: 0; height: auto; }
.figures .figure__l { max-width: 222px; }

/* ---- tablet + phone: tree goes back into the hero and stands on the band ---- */
@media (max-width: 1080px) {
  .hero { padding: 72px 0 0; }
  .hero__tree { display: block; position: relative; right: auto; top: auto; bottom: auto; width: min(92%, 720px); margin: 40px auto -6px; z-index: 0; }
  .hero__tree::after { display: none; }
  .trust__art, .trust__veil { display: none; }
  .sel__tag { left: auto; right: -8px; transform-origin: right top; }
  .sel__cursor { left: auto; right: -8px; }
  .journey__panel { background: #fff; padding: 32px 0 20px; }
  .journey ol { grid-template-columns: repeat(4, 1fr); row-gap: 28px; }
  .journey .n { font-size: 44px; }
  .figures { grid-template-columns: 1fr 1fr; row-gap: 40px; }
}
@media (max-width: 640px) {
  .hero { padding: 40px 0 0; }
  .hero__title { justify-content: center; }
  .hero__tree { width: 100%; margin: 28px 0 -4px; }
  .journey__panel { padding: 24px 0 16px; }
  .journey ol { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .journey li:last-child { grid-column: 1 / -1; }
  .journey a { min-height: 66px; gap: 12px; padding-right: 0; }
  .journey .blk { height: 66px; }
  .journey .n { font-size: 34px; }
  .journey .q { font-size: 10.5px; letter-spacing: .08em; }
  .figures { grid-template-columns: 1fr; gap: 28px; padding-top: 8px; }
  .figure__n { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .blk, .journey__band i, .journey .n, .journey .q, .trust__tree { transform: none !important; opacity: 1 !important; }
}

/* =====================================================================
   Living tree: trunk, swaying canopy, fluttering edge leaves and petals.
   Pure CSS so it moves on every browser, including iPhone Safari; the
   SVG turbulence is layered on top only where it is cheap (desktop).
   ===================================================================== */
.tree-stage { position: relative; }
.tree-stage .tl { display: block; }
.tree-stage .tl img { display: block; width: 100%; height: auto; }
.tl--trunk { position: relative; -webkit-mask-image: linear-gradient(to bottom, transparent 50%, #000 60%); mask-image: linear-gradient(to bottom, transparent 50%, #000 60%); }
.tl--canopy, .tl--flutter { position: absolute; inset: 0; }
.tl--canopy {
  -webkit-mask-image: linear-gradient(to bottom, #000 56%, transparent 66%); mask-image: linear-gradient(to bottom, #000 56%, transparent 66%);
  transform-origin: 50% 62%; animation: canopySway 7s ease-in-out infinite alternate;
}
.tl--flutter {
  opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse 58% 40% at 50% 34%, transparent 42%, #000 72%, transparent 100%);
  mask-image: radial-gradient(ellipse 58% 40% at 50% 34%, transparent 42%, #000 72%, transparent 100%);
  transform-origin: 50% 62%; animation: leafFlutter 3.4s ease-in-out infinite alternate;
}
@keyframes canopySway {
  0% { transform: rotate(-.9deg) translateX(-2px); }
  100% { transform: rotate(.9deg) translateX(2px); }
}
@keyframes leafFlutter {
  0% { transform: skewX(-1.4deg) translateY(1px); }
  100% { transform: skewX(1.2deg) translateY(-1px); }
}
@media (min-width: 1081px) {
  .tl--canopy { filter: url(#wind); }
}
.petal {
  position: absolute; width: 8px; height: 6px; border-radius: 60% 40% 60% 40%; background: #f08a8a; opacity: 0; pointer-events: none;
  animation: petalFall var(--t, 9s) linear var(--dl, 0s) infinite;
}
.petal.p1 { left: 28%; top: 30%; --t: 9s; --dl: 0s; --dx: 46px; }
.petal.p2 { left: 62%; top: 24%; --t: 11s; --dl: 2.5s; --dx: -38px; }
.petal.p3 { left: 44%; top: 36%; --t: 8s; --dl: 5s; --dx: 30px; background: #eb5a5d; }
.petal.p4 { left: 74%; top: 34%; --t: 10s; --dl: 1.2s; --dx: 24px; }
.petal.p5 { left: 18%; top: 42%; --t: 12s; --dl: 6.5s; --dx: 52px; background: #f4a3a3; }
.petal.p6 { left: 54%; top: 20%; --t: 9.5s; --dl: 4s; --dx: -44px; background: #eb5a5d; }
@keyframes petalFall {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  8% { opacity: .9; }
  80% { opacity: .75; }
  100% { opacity: 0; transform: translate(var(--dx), 34vh) rotate(320deg); }
}
[data-wind].is-offscreen .tl, [data-wind].is-offscreen .petal { animation-play-state: paused; }

/* phone + tablet: the hero tree stands on the same ground strip as desktop */
.hero__ground { display: none; }
@media (max-width: 1080px) {
  .hero__tree { width: min(86%, 560px); margin: 32px auto 0; }
  .hero__tree .tree-stage { mix-blend-mode: darken; }
  .hero__ground { display: block; position: absolute; left: 50%; width: 100vw; margin-left: -50vw; bottom: 1.1%; height: 44px;
    background: url("../assets/ground-tile.jpg") center top / auto 44px repeat-x; }
  .hero__ground::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; background: linear-gradient(#fff, rgba(255, 255, 255, 0)); }
  .petal { width: 6px; height: 5px; }
}
@media (max-width: 640px) {
  .hero__tree { width: 92%; margin-top: 28px; }
  .hero__ground { height: 36px; background-size: auto 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .tl--canopy, .tl--flutter { animation: none !important; filter: none !important; }
  .petal { display: none; }
}

/* =====================================================================
   Team cards: interactive selection box.
   Closed: four handles in a tight square on the face.
   Open (hover / focus / in view on touch): the square opens out, the
   dashed edges draw corner to corner, the cursor glides in, the name pops.
   ===================================================================== */
.person__sel {
  position: absolute; z-index: 1; pointer-events: none;
  left: calc(50% - 32px); top: 91px; width: 64px; height: 64px;
  transition: left .55s var(--ease-out), top .55s var(--ease-out), width .55s var(--ease-out), height .55s var(--ease-out);
}
.person__sel b { position: absolute; display: block; transition: transform .32s var(--ease-out); }
.person__sel b:nth-of-type(1) { left: 0; right: 0; top: 0; height: 2px; transform: scaleX(0); transform-origin: left; }
.person__sel b:nth-of-type(2) { top: 0; bottom: 0; right: 0; width: 2px; transform: scaleY(0); transform-origin: top; }
.person__sel b:nth-of-type(3) { left: 0; right: 0; bottom: 0; height: 2px; transform: scaleX(0); transform-origin: right; }
.person__sel b:nth-of-type(4) { top: 0; bottom: 0; left: 0; width: 2px; transform: scaleY(0); transform-origin: bottom; }
.person__sel b:nth-of-type(odd) { background: linear-gradient(to right, var(--coral) 55%, transparent 0) left top / 10px 2px repeat-x; }
.person__sel b:nth-of-type(even) { background: linear-gradient(to bottom, var(--coral) 55%, transparent 0) left top / 2px 10px repeat-y; }
.person__sel i { position: absolute; width: 10px; height: 10px; box-sizing: border-box; background: #fff; border: 1.5px solid var(--coral); transition: transform .4s var(--ease-out), box-shadow .4s; }
.person__sel i:nth-of-type(1) { left: -4px; top: -4px; }
.person__sel i:nth-of-type(2) { right: -4px; top: -4px; }
.person__sel i:nth-of-type(3) { right: -4px; bottom: -4px; }
.person__sel i:nth-of-type(4) { left: -4px; bottom: -4px; }
.person__cursor { position: absolute; left: calc(50% + 69px); top: 194px; width: 24px; height: 26px; z-index: 2; pointer-events: none;
  opacity: 0; transform: translate(34px, 34px); transition: opacity .35s var(--ease), transform .7s var(--ease-out); }
.person__tag { position: absolute; right: 12px; top: 218px; z-index: 2; pointer-events: none; background: #fff; border-radius: 100px; padding: 8px 14px;
  font-size: 13px; font-weight: 500; color: var(--ink-2); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); white-space: nowrap;
  opacity: 0; transform: translateY(8px) scale(.9); transform-origin: right top; transition: opacity .3s var(--ease), transform .45s var(--ease-out); }
.person__big { transition: transform .8s var(--ease-out), color .6s; }

.person.is-open .person__sel { left: calc(50% - 75px); top: 48px; width: 150px; height: 150px; }
.person.is-open .person__sel b { transform: none; }
.person.is-open .person__sel b:nth-of-type(1) { transition-delay: .28s; }
.person.is-open .person__sel b:nth-of-type(2) { transition-delay: .42s; }
.person.is-open .person__sel b:nth-of-type(3) { transition-delay: .56s; }
.person.is-open .person__sel b:nth-of-type(4) { transition-delay: .70s; }
.person.is-open .person__cursor { opacity: 1; transform: none; transition-delay: .55s; }
.person.is-open .person__tag { opacity: 1; transform: none; transition-delay: .95s; }
.person.is-open .person__big { transform: translateY(-6px); color: #dde2ea; }
.person.is-open .person__photo { filter: grayscale(.35); }
.person[tabindex] { outline: none; }
.person:focus-visible { box-shadow: 0 0 0 2px var(--coral); }

/* tablets: two cards per row */
@media (max-width: 1080px) and (min-width: 641px) {
  .people { grid-template-columns: 1fr 1fr; max-width: none; }
}
@media (max-width: 640px) {
  .person__tag { right: 10px; }
}