/* =====================================================================
   BLOOM · 大事件科技集团 — site styles
   Brand language from the 2026 brochure: warm paper, ink, signature red,
   heavy display type, the red paper "B".
   ===================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Bloom Display";
  src: url("/assets/fonts/bloom-display.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

:root {
  --paper: #f3eee8;
  --paper-2: #ebe4da;
  --paper-3: #e2d9cc;
  --white: #fffdfa;
  --ink: #121111;
  --ink-2: #34312e;
  --mute: #79726a;
  --line: rgba(18, 17, 17, .14);
  --red: #dd2b21;
  --red-2: #c21c13;
  --red-3: #ef4a3f;
  --night: #0e0d0d;
  --night-2: #1a1817;

  --f-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
  --f-disp: "Archivo", "Bloom Display", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --f-num: "Archivo", "Bloom Display", "PingFang SC", sans-serif;

  --pad: clamp(20px, 4.2vw, 72px);
  --nav-h: 76px;
  --r-lg: clamp(20px, 2.4vw, 34px);
  --r-md: 18px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.75, 0, .25, 1);

  interpolate-size: allow-keywords;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
/* Safari doesn't treat body's overflow-x: clip as a viewport clip, so stray wide content let the page pan sideways on iPhone.
   Clip on html itself (hidden = fallback for iOS < 16); unlike hidden on body, this keeps position: sticky working. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.75 var(--f-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* paper grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: .28;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.4 0 0 0 0 0.35 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, dl, dd, blockquote { margin: 0; }
kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  font: 600 11px/1 var(--f-num); letter-spacing: .02em;
  border: 1px solid currentColor; border-radius: 6px; opacity: .7;
}
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - var(--pad) * 2, 1480px); margin-inline: auto; }
.visually-hidden, .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 3000; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 10px; transition: top .2s; }
.skip:focus { top: 16px; }
.red { color: var(--red); }
.lat { font-family: "Archivo", var(--f-disp); font-stretch: 125%; font-weight: 900; letter-spacing: -.02em; }
[data-theme="dark"] { color-scheme: dark; }

/* ------------------------------------------------------------ type */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 12px/1.2 var(--f-num); letter-spacing: .18em; text-transform: uppercase;
  color: var(--mute);
}
[data-theme="dark"] .kicker { color: rgba(243, 238, 232, .6); }
.kicker__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 600 12px/1 var(--f-num); letter-spacing: .2em; color: var(--ink-2); }
.eyebrow > span:not(.pulse):not(.sep) { white-space: nowrap; }
.eyebrow .sep { width: 28px; height: 1px; background: currentColor; opacity: .4; }
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.pulse::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--red); animation: pulse 2.2s var(--ease) infinite; }
@keyframes pulse { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

.sec-head { display: grid; gap: 22px; margin-bottom: clamp(48px, 7vw, 96px); max-width: 1100px; }
.sec-title {
  font: 900 clamp(38px, 5.6vw, 92px)/1.06 var(--f-disp);
  letter-spacing: -.025em;
  text-wrap: balance;
}
.sec-lede { max-width: 40em; font-size: clamp(15px, 1.15vw, 17px); color: var(--ink-2); }
[data-theme="dark"] .sec-lede { color: rgba(243, 238, 232, .72); }
.sec-lede a { color: var(--red); border-bottom: 1px solid currentColor; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--ink-2); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 15px;
  padding-bottom: 4px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .5s var(--ease), color .3s;
}
.link-arrow:hover { color: var(--red); background-size: 0 1px; background-position: 100% 100%; }
.link-arrow .ico { transition: transform .4s var(--ease); }
.link-arrow:hover .ico { transform: translateX(6px); }
.link-arrow--light { color: var(--paper); }

.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.round {
  width: 48px; height: 48px; border-radius: 50%;
  display: inline-grid; place-items: center;
  border: 1px solid var(--line); font: 600 18px/1 var(--f-num);
  transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.round:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.round:active { transform: scale(.94); }

/* ------------------------------------------------------------ buttons */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 28px; border-radius: 999px;
  font-weight: 600; font-size: 15px; letter-spacing: .02em; white-space: nowrap;
  transition: color .45s var(--ease), border-color .45s;
  will-change: transform;
}
.btn::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit;
  background: var(--btn-hover, var(--ink));
  transform: translateY(102%);
  transition: transform .55s var(--ease-out);
}
.btn:hover::before { transform: translateY(0); }
.btn .ico { transition: transform .45s var(--ease); }
.btn:hover .ico { transform: translateX(4px); }
.btn > span { position: relative; }
.btn--red { background: var(--red); color: #fff; --btn-hover: var(--ink); }
.btn--ink { background: var(--ink); color: var(--paper); --btn-hover: var(--red); }
.btn--line { box-shadow: inset 0 0 0 1.5px var(--ink); --btn-hover: var(--ink); }
.btn--line:hover { color: var(--paper); }
.btn--sm { height: 44px; padding: 0 20px; font-size: 14px; }

/* ------------------------------------------------------------ nav */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 800;
  height: var(--nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--pad);
  transition: transform .5s var(--ease), background .4s, color .4s, box-shadow .4s;
}
.nav.is-scrolled {
  background: rgba(243, 238, 232, .78);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  backdrop-filter: saturate(1.4) blur(18px);
  box-shadow: 0 1px 0 var(--line);
}
.nav.is-hidden { transform: translateY(-100%); }
.nav.is-dark { color: var(--paper); }
.nav.is-dark.is-scrolled { background: rgba(14, 13, 13, .72); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.nav__logo { display: inline-flex; align-items: baseline; gap: 12px; justify-self: start; }
.wordmark { font: 900 27px/1 "Archivo", var(--f-disp); font-stretch: 125%; letter-spacing: -.035em; }
.nav__cn { font-size: 12px; font-weight: 600; letter-spacing: .14em; opacity: .7; }
.nav__links { display: flex; gap: 6px; }
.nav__link { position: relative; display: block; height: 40px; padding: 0 14px; font-size: 15px; line-height: 40px; font-weight: 500; overflow: hidden; }
.nav__link span { display: block; text-shadow: 0 40px 0 var(--red); transition: transform .5s var(--ease); }
.nav__link:hover span { transform: translateY(-40px); }
.nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--red); }
.nav__tools { justify-self: end; display: flex; align-items: center; gap: 10px; }
.nav__search {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 14px;
  border-radius: 999px; border: 1px solid var(--line); font-size: 14px; color: inherit;
  transition: border-color .3s, background .3s;
}
.nav.is-dark .nav__search { border-color: rgba(255, 255, 255, .18); }
.nav__search:hover { border-color: currentColor; }
.nav__search svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.nav__search kbd { opacity: .5; }
.nav__burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); position: relative; }
.nav__burger i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease), top .4s var(--ease); }
.nav__burger i:first-child { top: 17px; }
.nav__burger i:last-child { top: 25px; }
.nav__burger[aria-expanded="true"] i:first-child { top: 21px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] i:last-child { top: 21px; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 790; background: var(--red); color: #fff;
  display: flex; flex-direction: column; justify-content: center; padding: 100px var(--pad) 40px;
  clip-path: circle(0 at calc(100% - 44px) 38px);
  transition: clip-path .8s var(--ease-io);
}
.menu.is-open { clip-path: circle(150% at calc(100% - 44px) 38px); }
.menu[hidden] { display: flex; visibility: hidden; }
.menu.is-open[hidden] { visibility: visible; }
.menu__list a { display: flex; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.menu__list small { font: 600 12px var(--f-num); opacity: .7; }
.menu__list span { font: 900 clamp(34px, 9vw, 64px)/1.1 var(--f-disp); }
.menu__list em { margin-left: auto; font: 500 13px var(--f-num); font-style: normal; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.menu__foot { margin-top: 32px; font-size: 13px; opacity: .8; }
.menu li { transform: translateY(30px); opacity: 0; transition: transform .7s var(--ease), opacity .7s; }
.menu.is-open li { transform: none; opacity: 1; }
.menu.is-open li:nth-child(2) { transition-delay: .05s; } .menu.is-open li:nth-child(3) { transition-delay: .1s; }
.menu.is-open li:nth-child(4) { transition-delay: .15s; } .menu.is-open li:nth-child(5) { transition-delay: .2s; }
.menu.is-open li:nth-child(6) { transition-delay: .25s; } .menu.is-open li:nth-child(7) { transition-delay: .3s; }
html.menu-open .nav { color: #fff; background: transparent; box-shadow: none; }

.crumbs { padding-top: calc(var(--nav-h) + 22px); font-size: 13px; color: var(--mute); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.crumbs a:hover { color: var(--red); }
.crumbs + .phero, .crumbs + .case .chero { padding-top: clamp(40px, 6vw, 80px); }
.crumbs:has(+ .phero--dark) { position: absolute; left: 0; right: 0; z-index: 3; color: rgba(243, 238, 232, .55); }
.crumbs + .phero--dark { padding-top: calc(var(--nav-h) + clamp(80px, 10vw, 150px)); }

/* ------------------------------------------------------------ reveal & split */
.js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--ease), transform 1.1s var(--ease-out); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.split-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split-c { display: inline-block; transform: translateY(105%); transition: transform 1.05s var(--ease-out); transition-delay: calc(var(--i) * 22ms); }
.is-in .split-c, .split-done .split-c { transform: none; }

/* ------------------------------------------------------------ loader */
.loader { display: none; }
.js .loader {
  position: fixed; inset: 0; z-index: 2000; background: var(--red); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s var(--ease-io);
}
.js.seen .loader { display: none; }
.loader.is-done { clip-path: inset(0 0 100% 0); }
.loader__word { display: flex; font: 900 clamp(56px, 19vw, 300px)/.8 "Archivo", sans-serif; font-stretch: 125%; letter-spacing: -.04em; overflow: hidden; padding: .06em 0; }
.loader__word span { display: inline-block; transform: translateY(110%); animation: rise .9s var(--ease-out) forwards; }
.loader__word span:nth-child(2) { animation-delay: .06s; } .loader__word span:nth-child(3) { animation-delay: .12s; }
.loader__word span:nth-child(4) { animation-delay: .18s; } .loader__word span:nth-child(5) { animation-delay: .24s; }
.loader__sub { font: 900 clamp(14px, 1.6vw, 20px)/1 var(--f-disp); letter-spacing: .12em; opacity: 0; animation: fade .8s .45s forwards; }
@keyframes rise { to { transform: none; } }
@keyframes fade { to { opacity: 1; } }

/* ------------------------------------------------------------ hero */
.hero {
  position: relative; min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto auto;
  padding-top: calc(var(--nav-h) + 20px);
  overflow-x: clip;
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 2vw; align-items: center; }
.hero__copy { padding-bottom: 4vh; position: relative; z-index: 2; }
.hero__eyebrow { margin-bottom: clamp(24px, 3.4vw, 44px); }
.hero__title { font: 900 clamp(40px, 6.6vw, 104px)/1.04 var(--f-disp); letter-spacing: -.035em; }
.hero__title .line > span { white-space: nowrap; }
.hero__h1-pre { display: block; margin-bottom: 18px; font: 700 clamp(14px, 1.1vw, 17px)/1 var(--f-disp); letter-spacing: .3em; color: var(--ink-2); }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .line > span { display: inline-block; }
.js .hero__title .line > span { transform: translateY(108%); transition: transform 1.2s var(--ease-out); }
.js .hero__title .line:nth-child(3) > span { transition-delay: .09s; }
.js.is-ready .hero__title .line > span { transform: none; }
.hero__lede { margin-top: clamp(22px, 2.6vw, 36px); max-width: 33em; font-size: clamp(15px, 1.12vw, 17.5px); color: var(--ink-2); }
.hero__lede strong { color: var(--ink); font-weight: 650; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 3vw, 44px); }
.js .hero__lede, .js .hero__actions, .js .hero__eyebrow { opacity: 0; transform: translateY(20px); transition: opacity 1s .35s, transform 1.2s .35s var(--ease-out); }
.js .hero__actions { transition-delay: .5s; }
.js .hero__eyebrow { transition-delay: .1s; }
.js.is-ready .hero__lede, .js.is-ready .hero__actions, .js.is-ready .hero__eyebrow { opacity: 1; transform: none; }

.hero__stage {
  position: relative; height: clamp(440px, calc(100svh - var(--nav-h) - 190px), 760px);
  perspective: 1400px;
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 40%;
}
.hero__glow {
  position: absolute; left: 50%; top: 42%; width: 80%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(221, 43, 33, .22), rgba(221, 43, 33, 0));
  filter: blur(20px);
}
.hero__b {
  position: absolute; left: 50%; top: 45%; height: 84%; aspect-ratio: 720 / 754; max-width: 92%;
  transform: translate(-50%, -50%) translate(var(--px, 0), var(--py, 0));
}
.hero__b-in {
  position: relative; height: 100%;
  display: flex; align-items: center;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  filter: drop-shadow(26px 38px 34px rgba(110, 18, 8, .28)) drop-shadow(4px 6px 6px rgba(110, 18, 8, .2));
}
.js .hero__b-in { opacity: 0; scale: .86; transition: opacity 1.2s .1s, scale 1.6s .1s var(--ease-out); }
.js.is-ready .hero__b-in { opacity: 1; scale: 1; }
.hero__sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 38%);
  mix-blend-mode: soft-light;
  -webkit-mask: url("/assets/img/brand/b.webp") center / 100% 100% no-repeat;
  mask: url("/assets/img/brand/b.webp") center / 100% 100% no-repeat;
}
.hcast {
  position: absolute; bottom: 0; margin: 0;
  transform: translate(var(--px, 0), var(--py, 0));
  transition: filter .5s;
}
.hcast img { height: 100%; width: auto; max-width: none; transform-origin: 50% 100%; transition: transform .7s var(--ease-out); }
.hcast--1 { left: -2%; height: calc(64% * var(--s, 1)); z-index: 3; }
.hcast--2 { right: -3%; height: calc(70% * var(--s, 1)); z-index: 2; }
.hcast--3 { left: 33%; height: 56%; z-index: 4; }
.hcast--2 figcaption { left: 74%; }
.js .hcast { opacity: 0; translate: 0 40px; transition: opacity 1s, translate 1.4s var(--ease-out), filter .5s; }
.js.is-ready .hcast { opacity: 1; translate: 0 0; }
.js.is-ready .hcast--1 { transition-delay: .35s; }
.js.is-ready .hcast--2 { transition-delay: .5s; }
.js.is-ready .hcast--3 { transition-delay: .65s; }
.hcast:hover img { transform: scale(1.04); }
.hero__stage:has(.hcast:hover) .hcast:not(:hover) { filter: saturate(.3) brightness(1.04); }
.hcast figcaption {
  position: absolute; left: 50%; bottom: 7%; transform: translate(-50%, 0);
  display: grid; justify-items: center; gap: 2px; white-space: nowrap; pointer-events: none;
  font-size: 12px; line-height: 1.3; text-align: center;
}
.hcast figcaption b { padding: 5px 12px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 700 12px/1.2 var(--f-disp); letter-spacing: .04em; }
.hcast figcaption span { padding: 3px 10px; border-radius: 999px; background: rgba(243, 238, 232, .92); color: var(--ink); font-weight: 700; font-size: 11.5px; }
.hcast figcaption em { font-style: normal; padding: 3px 10px; border-radius: 999px; background: var(--red); color: #fff; font-weight: 700; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s var(--ease); }
.hcast:hover figcaption em { opacity: 1; transform: none; }
.hero__note { position: absolute; right: 0; top: 2%; font: 800 11px/1.3 var(--f-num); letter-spacing: .2em; writing-mode: vertical-rl; color: var(--mute); }

.hero__base { position: relative; z-index: 5; border-top: 1.5px solid var(--ink); }
.hero__stats { display: grid; grid-template-columns: repeat(5, 1fr); }
.hero__stats .stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 20px 20px 18px 0; }
.hero__stats .stat + .stat { padding-left: 20px; border-left: 1px solid var(--line); }
.hero__stats dd { font: 800 clamp(26px, 2.8vw, 46px)/1 var(--f-num); letter-spacing: -.02em; white-space: nowrap; }
.hero__stats dt { font-size: 13px; color: var(--mute); }
/* extra facts beside a number: the three brands / platform icons */
.hero__stats dd { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 18px); }
.stat__brands { display: grid; gap: 3px; font: 700 12px/1.25 var(--f-disp); letter-spacing: .02em; color: var(--ink-2); white-space: nowrap; }
.stat__brands i { font-style: normal; padding-left: 10px; position: relative; }
.stat__brands i::before { content: ""; position: absolute; left: 0; top: .5em; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.stat__icons { display: grid; grid-template-columns: repeat(5, auto); gap: 6px 8px; align-items: center; }
.stat__icons li { display: grid; place-items: center; width: 22px; height: 22px; color: var(--ink-2); transition: color .3s, transform .3s var(--ease-out); }
.stat__icons li:hover { color: var(--red); transform: translateY(-2px); }
.stat__icons svg { width: 19px; height: 19px; fill: currentColor; }
.stat__icons li[title="小红书"] svg { transform: scale(1.45); }  /* wordmark: needs more size to read */
.hero__foot { padding: 0 0 18px; font-size: 11.5px; color: var(--mute); }

/* ------------------------------------------------------------ home: one screen per section */
.hs { position: relative; padding: clamp(90px, 11vw, 160px) 0; }
.hs__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: clamp(26px, 4.4vh, 52px); }
.hs__head .sec-head { margin-bottom: 0; }
.hs__head > .link-arrow, .hs__head > .atlas__tools { flex: none; }
.hs .sec-title { font-size: clamp(32px, min(4.2vw, 7.6vh), 72px); }
.nw { white-space: nowrap; }
.nw--soft { white-space: normal; }
.hs .sec-head { gap: 14px; max-width: none; }
@media (min-width: 1181px) and (min-height: 680px) {
  /* section snapping: gentle JS snap in site.js, not CSS scroll-snap */
  .hs { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 2.4vh) 0 3.6vh; }
  .hs > .wrap { width: min(100% - var(--pad) * 2, 1480px); }
}

/* ------------------------------------------------------------ foreword */
.foreword .kicker { margin-bottom: clamp(22px, 4vh, 40px); }
.foreword__text {
  font: 900 clamp(28px, min(3.9vw, 7.4vh), 64px)/1.42 var(--f-disp); letter-spacing: -.015em;
  max-width: 23em; text-wrap: pretty;
}
.foreword__text .sc { transition: opacity .25s, color .25s; opacity: .14; }
.foreword__text .sc.lit { opacity: 1; }
.no-js .foreword__text .sc, .foreword__text:not(.is-scrub) .sc { opacity: 1; }
.foreword__text em {
  font-style: normal; color: var(--red); cursor: none; position: relative; outline-offset: 6px;
  background: linear-gradient(var(--red), var(--red)) 0 92% / 100% .07em no-repeat;
}
.fw-ava { display: inline-flex; vertical-align: -.12em; margin: 0 .1em 0 .18em; }
.fw-ava__i { width: .86em; height: .86em; border-radius: 50%; overflow: hidden; background: var(--paper-3); box-shadow: 0 0 0 .06em var(--paper); transition: transform .5s var(--ease-out); }
.fw-ava__i + .fw-ava__i { margin-left: -.26em; }
.fw-ava__i img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; transform: scale(1.55); transform-origin: 50% 0; }
.foreword__text em:hover + .fw-ava .fw-ava__i, .foreword__text em:focus + .fw-ava .fw-ava__i { transform: translateY(-.12em); }
.foreword__text em:hover + .fw-ava .fw-ava__i:nth-child(2) { transition-delay: .05s; }
.foreword__text em:hover + .fw-ava .fw-ava__i:nth-child(3) { transition-delay: .1s; }
.foreword__foot { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); margin-top: clamp(30px, 6vh, 70px); max-width: 1100px; margin-left: auto; color: var(--ink-2); }
.foreword__hint { margin-top: 18px; text-align: right; font-size: 12.5px; color: var(--mute); }
.foreword__hint::before { content: "↖ "; color: var(--red); }
html:not(.has-cursor) .foreword__hint { display: none; }

/* peek caption (random creator) */
.peek__cap { position: absolute; left: 50%; bottom: 8%; translate: -50% 0; white-space: nowrap; padding: 7px 14px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 700; opacity: 0; transition: opacity .3s .1s; }
.peek__cap b { color: var(--red-3); font: 800 13px var(--f-num); margin-left: 6px; }
.peek.is-on .peek__cap:not(:empty) { opacity: 1; }

/* ------------------------------------------------------------ brands (home carousel) */
.brands .names { margin: 0 0 clamp(16px, 2.6vh, 28px); padding: clamp(8px, 1.4vh, 14px) 0; overflow: hidden; border-block: 1px solid var(--line); }
.names .marquee__track { display: inline-flex; align-items: center; gap: 22px; white-space: nowrap; font: 900 clamp(26px, min(2.6vw, 4.6vh), 46px)/1.1 var(--f-disp); letter-spacing: -.02em; }
.names span { color: transparent; -webkit-text-stroke: 1.1px var(--ink); transition: color .3s; }
.names span:hover { color: var(--red); -webkit-text-stroke-color: var(--red); }
.names i { font-style: normal; font-size: .3em; color: var(--red); }
[data-marquee] { overflow: hidden; }
.marquee__track { will-change: transform; }

.bx__bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: clamp(12px, 2vh, 20px); }
.bx__tabs { display: flex; gap: 8px; min-width: 0; }
.bx__tab { position: relative; overflow: hidden; display: inline-flex; align-items: baseline; gap: 10px; padding: 11px 20px 12px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; transition: background .4s, color .4s, border-color .4s; }
.bx__tab:hover { border-color: var(--ink); }
.bx__no { font: 700 11px var(--f-num); opacity: .55; }
.bx__tname { font: 900 16px/1 var(--f-disp); }
.bx__ttype { font-size: 12.5px; opacity: .65; }
.bx__tab[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bx__prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; }
.bx__ctrl { display: flex; align-items: center; gap: 10px; flex: none; }
.bx__ctrl .link-arrow { margin-right: 14px; }

/* panels: native horizontal scroll by default (no JS / mobile) */
.bx__stage { overflow: hidden; }
.bx__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--pad); }
.bx__track::-webkit-scrollbar { display: none; }
.bp {
  flex: 0 0 min(88vw, 1180px); scroll-snap-align: center;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  height: clamp(430px, calc(100svh - var(--nav-h) - 330px), 640px);
  border-radius: var(--r-lg); overflow: hidden; isolation: isolate; position: relative;
}
.bp--red { background: var(--red); color: #fff; }
.bp--ink { background: var(--night-2); color: var(--paper); }
.bp--white { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.bp--paper { background: var(--paper-3); }
.bp--wall { display: none; }
.js .bx.is-flow .bp--wall { display: grid; }
@media (min-width: 761px) {
  .js .bx__stage { position: relative; height: clamp(430px, calc(100svh - var(--nav-h) - 330px), 640px); perspective: 1800px; overflow: visible; }
  .js .bx__track { display: block; overflow: visible; padding: 0; height: 100%; }
  .js .bp {
    position: absolute; left: 50%; top: 0; width: min(76vw, 1240px); height: 100%;
    --o: 0; --a: 0;
    transform: translateX(calc(-50% + var(--o) * (min(76vw, 1240px) + 2.4vw))) scale(calc(1 - var(--a) * .1)) rotateY(calc(var(--o) * -14deg));
    transition: transform 1s var(--ease-out), opacity .7s, filter .7s;
    opacity: calc(1 - var(--a) * .25); filter: saturate(calc(1 - var(--a) * .5));
  }
  .js .bp.is-far { opacity: 0; pointer-events: none; }
  /* room mode (site.js sets transform / clip-path every frame): back wall + side walls */
  .js .bx.is-flow .bx__track { perspective: 1100px; perspective-origin: 50% 50%; }
  .js .bx.is-flow .bp { width: min(70vw, 1600px); transform-origin: 0 50%; transition: none; filter: none; opacity: 1; will-change: transform, clip-path; }
  .js .bx.is-flow .bp--wall { z-index: 2; cursor: pointer; }
  .js .bx.is-flow .bp--wall::after { content: ""; position: absolute; inset: 0; z-index: 6; background: #000; opacity: .32; pointer-events: none; }
  /* room for the side walls' slanted top/bottom edges; clip anything beyond that band */
  .js .bx.is-flow .bx__stage { --wall-m: clamp(36px, 6vh, 64px); margin-block: var(--wall-m); overflow: visible; clip-path: inset(calc(-1 * var(--wall-m)) 0); cursor: grab; user-select: none; }
  .js .bx.is-flow .bx__stage:active { cursor: grabbing; }
  .js .bx.is-flow .bp img { -webkit-user-drag: none; }
  .js .bp:not(.is-active) { cursor: pointer; }
  .js .bp:not(.is-active) > * { pointer-events: none; }
}
.bcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font: 600 13px/1 var(--f-num); letter-spacing: .1em; }
.bcard__no { font: 800 13px var(--f-num); padding: 6px 10px; border: 1px solid currentColor; border-radius: 999px; }
.bcard__en { opacity: .6; }
.bcard__scenes { font-size: 14px; opacity: .85; }
.bcard__scenes span { display: inline-block; margin-right: 12px; font-weight: 700; }
.bp__copy { position: relative; z-index: 2; padding: clamp(26px, 3.4vw, 52px); display: flex; flex-direction: column; gap: clamp(10px, 1.6vh, 16px); min-width: 0; }
.bp__name { margin-top: auto; font: 900 clamp(40px, min(5.2vw, 9vh), 96px)/.96 var(--f-disp); letter-spacing: -.035em; }
.bp__title { font: 900 clamp(18px, 1.6vw, 26px)/1.3 var(--f-disp); }
.bp__desc { max-width: 30em; opacity: .85; font-size: 15px; line-height: 1.7; }
.bp__more { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.bp__avas { display: inline-flex; }
.bp__ava { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, .25); box-shadow: 0 0 0 2px var(--bp-bg, transparent); }
.bp__ava + .bp__ava { margin-left: -10px; }
.bp__ava img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; transform: scale(1.55); transform-origin: 50% 0; }
.bp--red { --bp-bg: var(--red); } .bp--ink { --bp-bg: var(--night-2); } .bp--white { --bp-bg: var(--white); } .bp--paper { --bp-bg: var(--paper-3); }
.bp__count { opacity: .8; } .bp__count b { font: 800 16px var(--f-num); }
.bp .link-arrow { align-self: flex-start; }
.bp__cast { position: relative; overflow: hidden; }
.bcard__big {
  position: absolute; right: 3%; top: 2%; z-index: 0; pointer-events: none;
  font: 900 clamp(140px, 19vw, 320px)/.8 "Archivo", sans-serif; font-stretch: 125%; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1.5px #fff; opacity: .3;
}
.bp--white .bcard__big, .bp--paper .bcard__big { -webkit-text-stroke-color: var(--ink); opacity: .14; }
.bp--red .bp__cast { background: radial-gradient(70% 60% at 50% 100%, rgba(255, 255, 255, .22), transparent 70%); }
.bp--ink .bp__cast { background: radial-gradient(70% 60% at 50% 100%, rgba(221, 43, 33, .35), transparent 70%); }
.bp--white .bp__cast, .bp--paper .bp__cast { background: radial-gradient(70% 60% at 50% 100%, rgba(221, 43, 33, .12), transparent 70%); }

/* six creators as a group photo; positions come from content/crowd.json (tools/crowd_layout.py),
   computed in a box of aspect --crowd-a so no face is covered by someone in front */
.bp__cast { container-type: size; }
.crowd { position: absolute; bottom: 0; left: 50%; width: min(100cqw, 100cqh * var(--crowd-a)); aspect-ratio: var(--crowd-a); transform: translateX(-50%); }
.crowd__m { position: absolute; top: var(--t); left: var(--l); height: var(--h); z-index: var(--z); outline: none; }
.crowd__m figure { position: relative; height: 100%; }
/* back-row cut-out that ends above the floor: fade its cut edge (78% = FADE in crowd_layout.py) */
.crowd__m--fade img { -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.crowd__m img { height: 100%; width: auto; max-width: none; transform-origin: 50% 100%; transition: transform .8s var(--ease-out), filter .5s; }
.crowd:has(.crowd__m:hover, .crowd__m:focus) .crowd__m:not(:hover):not(:focus) img { filter: grayscale(.85) brightness(.9); }
.crowd__m:hover, .crowd__m:focus { z-index: 9; }
.crowd__m:hover img, .crowd__m:focus img { transform: scale(1.05) translateY(-6px); }
.crowd__m figcaption {
  position: absolute; top: calc(var(--chin) + 2%); left: 50%; transform: translate(-50%, 10px);
  display: grid; justify-items: center; gap: 2px; white-space: nowrap;
  padding: 9px 15px; border-radius: 14px; background: var(--paper); color: var(--ink);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18); opacity: 0; transition: opacity .4s, transform .5s var(--ease-out); pointer-events: none;
}
.crowd__m:hover figcaption, .crowd__m:focus figcaption { opacity: 1; transform: translate(-50%, 0); }
.cast__name { font: 900 16px/1.2 var(--f-disp); }
.cast__fans { font-size: 12px; color: var(--mute); }
.cast__fans b { font: 800 14px var(--f-num); color: var(--red); }
.cast__tag { font-size: 11.5px; color: var(--ink-2); }

/* ------------------------------------------------------------ services explorer (home) */
.services { background: var(--paper-2); }
.svx { display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 44px); align-items: stretch; }
.svx__side { display: grid; gap: 12px; align-content: start; }
/* "pick one of two" cues: header, radio dot, item count, hover "切换", notch pointing at the list */
.svx__hint { display: flex; justify-content: space-between; align-items: center; font: 700 12px/1 var(--f-num); letter-spacing: .12em; color: var(--mute); }
.svx__hint em { font-style: normal; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 6px; }
.svx__hint em::before { content: ""; width: 14px; height: 1px; background: currentColor; }
.svx__groups { display: grid; gap: 12px; align-content: start; }
.svx__g { position: relative; text-align: left; display: grid; gap: 6px; padding: clamp(16px, 2.4vh, 24px); padding-right: 56px; border-radius: var(--r-md); border: 1px solid var(--line); transition: background .4s, color .4s, border-color .4s, transform .4s var(--ease-out); }
.svx__radio { position: absolute; top: clamp(16px, 2.4vh, 24px); right: 20px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .45; transition: opacity .3s; }
.svx__radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--red); transform: scale(0); transition: transform .4s var(--ease-out); }
.svx__g[aria-selected="true"] .svx__radio { opacity: 1; border-color: var(--red); }
.svx__g[aria-selected="true"] .svx__radio::after { transform: scale(1); }
.svx__count { display: flex; align-items: center; gap: 12px; margin-top: 4px; font: 700 12.5px/1 var(--f-body); font-style: normal; opacity: .7; }
.svx__switch { display: inline-flex; align-items: center; gap: 4px; color: var(--red); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .4s var(--ease-out); }
.svx__switch svg { width: 12px; height: 12px; }
.svx__g[aria-selected="false"]:hover { background: var(--paper-3); transform: translateX(4px); }
.svx__g[aria-selected="false"]:hover .svx__switch { opacity: 1; transform: none; }
.svx__g[aria-selected="true"]::after { content: ""; position: absolute; top: 50%; right: -11px; width: 22px; height: 22px; margin-top: -11px; background: var(--ink); transform: rotate(45deg); border-radius: 3px; }
.svx__lhead { display: flex; align-items: baseline; gap: 10px; padding: 0 4px 12px; font-size: 13px; color: var(--mute); }
.svx__lhead b { font: 900 15px/1 var(--f-disp); color: var(--ink); padding-left: 12px; position: relative; }
.svx__lhead b::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--red); }
.svx__g small { font: 700 11px var(--f-num); letter-spacing: .2em; color: var(--red); }
.svx__g b { font: 900 clamp(22px, 2vw, 32px)/1.15 var(--f-disp); }
.svx__g > span { font-size: 14px; font-weight: 600; opacity: .75; }
.svx__g .flow { margin-top: 6px; flex-wrap: nowrap; }
.svx__g .flow li { padding: 5px 10px; font-size: 12px; white-space: nowrap; }
.svx__g .flow li + li { margin-left: 18px; } .svx__g .flow li + li::before { width: 18px; }
.svx__g:hover { border-color: var(--ink); }
.svx__g[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.svx__g[aria-selected="true"] .flow li { background: var(--ink); color: var(--paper); border-color: rgba(243, 238, 232, .6); }
.svx__list ol { border-bottom: 1px solid var(--line); }
.svx__list + .svx__list { margin-top: 30px; }
.js .svx__list { display: none; } .js .svx__list.is-active { display: block; margin-top: 0; }
.svx__row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: clamp(12px, 2vh, 20px) 4px; border-top: 1px solid var(--line); transition: padding .5s var(--ease), color .3s; }
.svx__row::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.svx__row.is-active { padding-left: 14px; color: var(--red); }
.svx__row.is-active::before { transform: scaleX(1); }
.svx__row .svc-row__no { grid-row: 1 / span 2; }
.svx__row .svc-row__go { grid-row: 1 / span 2; grid-column: 3; width: 40px; height: 40px; }
.svx__name { font: 900 clamp(20px, min(1.9vw, 3.6vh), 30px)/1.2 var(--f-disp); letter-spacing: -.01em; }
.svx__line { grid-column: 2; font-size: 13px; color: var(--mute); }
.svx__row.is-active .svc-row__go { background: var(--red); color: #fff; border-color: var(--red); transform: rotate(-45deg); }
.svc-row__no { font: 700 13px var(--f-num); color: var(--mute); }
.svc-row__go { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); transition: background .3s, color .3s, transform .5s var(--ease); }
.svx__view { position: relative; min-height: 100%; }
.svx__card { display: grid; gap: 16px; align-content: start; }
.svx__card + .svx__card { margin-top: 40px; }
.js .svx__card { position: absolute; inset: 0 0 auto; margin: 0; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .45s, transform .6s var(--ease-out), visibility 0s .45s; }
.js .svx__card.is-active { position: relative; opacity: 1; visibility: visible; transform: none; transition: opacity .45s, transform .6s var(--ease-out); }
.svx__fig { display: flex; gap: 8px; aspect-ratio: 16 / 9; max-height: 34vh; border-radius: var(--r-md); overflow: hidden; background: var(--ink); }
.svx__fig img { width: 100%; height: 100%; object-fit: cover; }
.svx__fig--strip { padding: 10px 10px 0; justify-content: center; background: var(--ink); }
.svx__fig--strip img { width: auto; flex: 0 1 auto; min-width: 0; object-fit: cover; object-position: 50% 0; border-radius: 10px 10px 0 0; }
.tpanel { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: clamp(20px, 2.4vw, 36px); color: var(--white);
  background: radial-gradient(120% 90% at 100% 0%, rgba(221, 43, 33, .55), transparent 60%), var(--ink); }
.tpanel small { position: absolute; top: clamp(20px, 2.4vw, 36px); left: clamp(20px, 2.4vw, 36px); font: 700 12px var(--f-num); letter-spacing: .24em; color: var(--red-3); }
.tpanel b { font: 900 clamp(22px, 2.2vw, 36px)/1.25 var(--f-disp); letter-spacing: -.02em; }
.tpanel em { font-style: normal; font-size: 13px; color: rgba(255, 253, 250, .6); padding-top: 14px; border-top: 1px solid rgba(255, 253, 250, .18); }
.sv__panel { width: 100%; height: 100%; }
.sv__panel b { font-size: clamp(26px, 3vw, 46px); }
.svx__k { font: 700 11px var(--f-num); letter-spacing: .16em; color: var(--mute); }
.svx__body { display: grid; gap: 10px; }
.svx__body h3 { font: 900 clamp(22px, 2vw, 30px)/1.2 var(--f-disp); }
.svx__desc { font-size: 14.5px; color: var(--ink-2); line-height: 1.7; }
.svx__badge { justify-self: start; padding: 5px 12px; border-radius: 999px; background: var(--red); color: #fff; font-size: 12.5px; font-weight: 700; }
.svx__facts { display: flex; gap: 28px; }
.svx__facts dd { font: 800 26px/1 var(--f-num); color: var(--red); }
.svx__facts dt { font-size: 12px; color: var(--mute); margin-top: 4px; }
.svx__rel { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; }
.svx__rel span { color: var(--mute); }
.svx__rel a { border-bottom: 1px solid var(--line); } .svx__rel a:hover { color: var(--red); border-color: currentColor; }
.svx__body .link-arrow { justify-self: start; margin-top: 4px; }

.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-top: 10px; }
.flow li { position: relative; padding: 6px 13px; border: 1.5px solid var(--ink); border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--paper); }
.flow li + li { margin-left: 26px; }
.flow li + li::before {
  content: ""; position: absolute; right: 100%; top: 50%; width: 26px; height: 1.5px;
  background: repeating-linear-gradient(90deg, var(--red) 0 5px, transparent 5px 9px);
  background-size: 18px 100%;
  animation: dash 1s linear infinite;
}
@keyframes dash { to { background-position: 18px 0; } }
.flow--dark li { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ------------------------------------------------------------ case atlas (home) */
.atlas__legend { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 16px; border-radius: 999px; background: rgba(255, 253, 250, .86); box-shadow: 0 0 0 1px var(--line), 0 10px 30px -16px rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); white-space: nowrap; }
.atlas__legend > span { font-size: 12px; color: var(--mute); margin-right: 6px; }
.atlas__chip { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; transition: background .3s, color .3s, border-color .3s; }
.atlas__chip:hover, .atlas__chip.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.atlas {
  position: relative; height: clamp(400px, calc(100svh - var(--nav-h) - 220px), 660px);
  border-radius: var(--r-lg); background: #ece5da; box-shadow: inset 0 0 0 1px var(--line); overflow: visible;
}
.atlas__svg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.atlas__gridline { fill: none; stroke: rgba(18, 17, 17, .06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.atlas__fill { fill: var(--paper); stroke: rgba(18, 17, 17, .45); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: fill .4s, opacity .4s; }
.atlas__contour { fill: none; stroke: rgba(18, 17, 17, .14); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.atlas__route { fill: none; stroke: var(--red); stroke-width: 1.4; stroke-dasharray: 2 7; vector-effect: non-scaling-stroke; opacity: .65; animation: route 1.6s linear infinite; }
@keyframes route { to { stroke-dashoffset: -18; } }
.atlas__land.is-dim .atlas__fill { opacity: .35; }
.atlas__land.is-hot .atlas__fill { fill: var(--white); }
.atlas__zone { display: contents; }
.atlas__zlabel { position: absolute; left: var(--x); top: var(--y); display: grid; font: 900 clamp(14px, 1.15vw, 18px)/1.15 var(--f-disp); color: var(--ink); pointer-events: none; transition: opacity .4s; }
.atlas__zlabel small { font: 700 10px var(--f-num); letter-spacing: .26em; color: var(--mute); margin-bottom: 3px; }
.atlas__zlabel em { position: absolute; left: calc(100% + 8px); top: 14px; font: 800 11px var(--f-num); font-style: normal; color: #fff; background: var(--red); border-radius: 999px; padding: 2px 7px; }
.atlas__pins { display: contents; }
.pin { position: absolute; left: var(--x); top: var(--y); z-index: 2; }
.pin > a { display: flex; align-items: center; gap: 8px; translate: -7px -50%; padding: 4px 10px 4px 4px; border-radius: 999px; white-space: nowrap; transition: background .3s, color .3s, box-shadow .3s; }
.pin__dot { position: relative; width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--paper); transition: transform .4s var(--ease-out), background .3s; }
.pin--star .pin__dot { background: var(--red); }
.pin--star .pin__dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--red); animation: pulse 2.4s var(--ease) infinite; }
.pin__label { font: 900 14.5px/1.2 var(--f-disp); }
.pin > a:hover, .pin > a:focus-visible, .pin.is-on > a { background: var(--ink); color: var(--paper); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .4); }
.pin > a:hover .pin__dot, .pin.is-on .pin__dot { transform: scale(1.25); background: var(--red); }
.pin:hover, .pin:focus-within, .pin.is-on { z-index: 20; }
.atlas.is-filter .pin:not(.is-hot) { opacity: .25; }
.atlas.is-filter .atlas__zlabel:not(.is-hot) { opacity: .3; }
/* hover card: CSS fallback inside each pin; JS uses one floating card */
.pin__card { position: absolute; top: -30px; left: calc(100% + 14px); width: 340px; display: none; border-radius: 18px; overflow: hidden; background: var(--white); color: var(--ink); box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .45), 0 0 0 1px var(--line); white-space: normal; }
.pin--l .pin__card { left: auto; right: calc(100% + 14px); }
.pin--u .pin__card { top: auto; bottom: -30px; }
.atlas:not(.has-card) .pin > a:hover .pin__card, .atlas:not(.has-card) .pin > a:focus-visible .pin__card { display: block; }
.pin__fig, .atlas__card .pin__fig { display: flex; gap: 6px; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.pin__fig img { width: 100%; height: 100%; object-fit: cover; }
.pin__fig--strip { justify-content: center; padding: 10px 10px 0; }
.pin__fig--strip img { width: auto; min-width: 0; flex: 0 1 auto; object-position: 50% 0; border-radius: 8px 8px 0 0; }
.pin__body { display: grid; gap: 6px; padding: 16px 18px 18px; }
.pin__cats { font-size: 11.5px; color: var(--mute); }
.pin__title { font: 900 20px/1.25 var(--f-disp); }
.pin__head { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.pin__metric { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.pin__metric b { font: 800 30px/1 var(--f-num); color: var(--red); letter-spacing: -.02em; }
.pin__metric span { font-size: 12px; color: var(--mute); }
.pin__go { font-size: 13px; font-weight: 700; color: var(--red); margin-top: 2px; }
.atlas__card { position: absolute; left: 0; top: 0; z-index: 30; width: 340px; border-radius: 18px; overflow: hidden; background: var(--white); color: var(--ink); box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .45), 0 0 0 1px var(--line); pointer-events: none; opacity: 0; scale: .96; transition: opacity .25s, scale .35s var(--ease-out); }
.atlas__card.is-on { opacity: 1; scale: 1; }
.atlas__card > .pin__card { display: contents; }
.atlas__cartouche { position: absolute; right: 22px; bottom: 18px; display: grid; justify-items: end; gap: 2px; font-size: 11.5px; color: var(--mute); pointer-events: none; }
.atlas__cartouche b { font: 900 13px "Archivo", sans-serif; font-stretch: 125%; letter-spacing: .2em; color: var(--ink); }
.atlas__rose { position: absolute; left: 22px; bottom: 18px; width: 54px; height: 54px; overflow: visible; pointer-events: none; }
.atlas__rose circle { fill: none; stroke: rgba(18, 17, 17, .3); stroke-dasharray: 2 3; }
.atlas__rose path { fill: var(--ink); opacity: .75; }
.atlas__rose .atlas__rose-x { fill: var(--red); opacity: .6; }
.atlas__rose text { font: 800 9px var(--f-num); text-anchor: middle; fill: var(--ink); }

/* ------------------------------------------------------------ impact tiles */
.impact:not(.hs) { padding: clamp(100px, 12vw, 170px) 0; }
.otiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; gap: clamp(30px, 3.4vw, 54px) clamp(20px, 2.4vw, 36px); }
.impact.hs .otiles { gap: clamp(20px, 3.4vh, 40px) clamp(20px, 2.4vw, 36px); }
.impact.hs .otile { gap: 12px; }
.impact.hs .otile__img { aspect-ratio: auto; height: clamp(80px, 11vh, 140px); }
.impact.hs .otile--wide .otile__img img { height: 100%; aspect-ratio: auto; }
.impact.hs .otile__line { display: none; }
.impact.hs .otile__body { padding-top: 12px; }
.impact.hs .otile__value b { font-size: clamp(34px, min(3.6vw, 6.4vh), 60px); }
.otile { display: grid; gap: 18px; }
.otile--wide { grid-column: span 2; }
.otile__img { aspect-ratio: 2.75; border-radius: 14px; overflow: hidden; background: var(--paper-3); }
.otile--wide .otile__img { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: inherit; background: none; border-radius: 0; }
.otile--wide .otile__img img { height: auto; aspect-ratio: 2.75; border-radius: 14px; background: var(--paper-3); }
.otile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out), filter .6s; filter: saturate(.85); }
.otile:hover .otile__img img { transform: scale(1.06); filter: saturate(1.1); }
.otile__body { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; border-top: 1.5px solid var(--ink); padding-top: 16px; }
.otile__no { font: 700 12px var(--f-num); color: var(--mute); padding-top: 6px; }
.otile__name { font: 900 20px/1.3 var(--f-disp); }
.otile__value, .otile__label, .otile__line { grid-column: 2; }
.otile--wide .otile__body { grid-template-columns: auto 1fr 1fr; grid-template-areas: "no name name" ". v1 v2" ". l1 l2" ". line line"; }
.otile--wide .otile__no { grid-area: no; } .otile--wide .otile__name { grid-area: name; }
.otile--wide .otile__value { grid-area: v1; } .otile--wide .otile__label { grid-area: l1; }
.otile--wide .otile__value--2 { grid-area: v2; } .otile--wide .otile__label--2 { grid-area: l2; }
.otile--wide .otile__line { grid-area: line; }
.otile__value b { font: 800 clamp(40px, 4.4vw, 72px)/1.05 var(--f-num); color: var(--red); letter-spacing: -.03em; }
.otile__label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.otile__line { font-size: 14px; color: var(--mute); }

/* ------------------------------------------------------------ Bloom AI */
.ai, .aidemo, .phero--dark, .mvv { position: relative; background: var(--night); color: var(--paper); overflow: hidden; }
.ai:not(.hs) { padding: clamp(110px, 13vw, 190px) 0; }
.ai__field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .95; }
.ai__inner { position: relative; z-index: 1; }
.ai__top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 5vw; align-items: end; margin-bottom: clamp(50px, 6vw, 90px); }
.ai.hs .ai__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; margin-bottom: clamp(20px, 3.2vh, 40px); }
.ai.hs .ai__title { white-space: nowrap; font-size: clamp(30px, min(4.4vw, 8vh), 78px); margin: 14px 0 12px; }
.ai.hs .ai__title .lat { font-size: 1em; line-height: 1; }
.ai__side { display: grid; gap: 22px; }
.ai.hs .link-arrow { margin-top: 0; justify-self: start; }
.ai.hs .matcher__list { height: clamp(220px, calc(100svh - var(--nav-h) - 500px), 470px); }
.ai.hs .matcher__side { padding: 18px 22px; gap: 6px; }
.ai.hs .ai__top .link-arrow { margin-top: 14px; }
.ai.hs .mchip { padding: 6px 12px; font-size: 12.5px; }
.ai.hs .matcher__search input { height: 38px; margin-top: 4px; }
.ai.hs .matcher__count { padding-top: 8px; }
.ai.hs .matcher__count b { font-size: 30px; }
.ai.hs .matcher__head { padding: 12px 28px; }
.ai.hs .matcher__note { padding: 10px 28px; }
.ai.hs .ai__foot { margin-top: 14px; }
.ai__title { font: 900 clamp(34px, 4.6vw, 74px)/1.12 var(--f-disp); letter-spacing: -.02em; margin: 22px 0 24px; }
.ai__title .lat, .phero__title .lat { display: inline-block; font-size: 1.62em; line-height: .9; color: var(--paper); background: linear-gradient(100deg, #fff 30%, #ff8a7f 60%, var(--red) 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ai__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255, 255, 255, .2); }
.ai__stats .stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 20px 16px 0 0; }
.ai__stats .stat + .stat { padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .14); }
.ai__stats dd { font: 800 clamp(26px, 2.6vw, 46px)/1 var(--f-num); letter-spacing: -.02em; white-space: nowrap; }
.ai__stats dt { font-size: 13px; opacity: .65; margin-top: 8px; }
.ai__stats--light { color: var(--ink); border-color: var(--ink); margin-top: 50px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ai__stats--light .stat + .stat { border-color: var(--line); }
.ai__foot { margin-top: 26px; font-size: 12px; line-height: 1.7; opacity: .55; max-width: 70em; }
.ai .link-arrow { margin-top: 30px; }

.matcher {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0;
  border-radius: var(--r-lg); overflow: hidden;
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.matcher__side { padding: 28px; border-right: 1px solid rgba(255, 255, 255, .1); display: flex; flex-direction: column; gap: 12px; }
.matcher__label { font: 600 12px var(--f-num); letter-spacing: .14em; opacity: .55; margin-top: 6px; }
.mchips { display: flex; flex-wrap: wrap; gap: 8px; }
.mchip { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); font-size: 13px; font-weight: 600; transition: background .3s, border-color .3s, transform .3s var(--ease); }
.mchip:hover { border-color: rgba(255, 255, 255, .6); }
.mchip[aria-pressed="true"] { background: var(--red); border-color: var(--red); }
.mchip:active { transform: scale(.95); }
.matcher__search input { width: 100%; margin-top: 8px; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); outline: none; transition: border-color .3s; }
.matcher__search input:focus { border-color: var(--red); }
.matcher__count { margin-top: auto; padding-top: 18px; font-size: 14px; opacity: .8; }
.matcher__count b { font: 800 40px/1 var(--f-num); color: var(--red); margin-right: 6px; }
.matcher__reset { align-self: flex-start; font-size: 13px; opacity: .6; border-bottom: 1px solid currentColor; }
.matcher__reset:hover { opacity: 1; }
.matcher__main { display: flex; flex-direction: column; min-width: 0; }
.matcher__head { display: flex; justify-content: space-between; padding: 16px 28px; font: 600 12px var(--f-num); letter-spacing: .14em; opacity: .5; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.matcher__list { height: 470px; overflow: auto; padding: 8px 14px 8px 20px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.mrow { display: grid; grid-template-columns: 46px minmax(0, 1.2fr) minmax(0, 1fr) 84px; align-items: center; gap: 16px; padding: 9px 8px; border-radius: 12px; transition: background .25s, opacity .4s, transform .5s var(--ease-out); }
.mrow:hover { background: rgba(255, 255, 255, .06); }
.mrow.is-hidden { display: none; }
.mrow.is-enter { animation: rowin .6s var(--ease-out) both; animation-delay: calc(var(--k, 0) * 18ms); }
@keyframes rowin { from { opacity: 0; transform: translateY(10px); } }
.mrow__ava { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: linear-gradient(160deg, #3a3532, #1e1b1a); }
.mrow__ava img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; transform: scale(1.5); transform-origin: 50% 0; }
.mrow__name { font-weight: 700; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow__name small { display: block; font-weight: 400; font-size: 12px; opacity: .55; }
.mrow__bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.mrow__bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #ff8a7f, var(--red)); transform-origin: left; transition: transform 1.2s var(--ease-out); }
.js .matcher:not(.is-in) .mrow__bar i { transform: scaleX(0); }
.mrow__fans { text-align: right; font: 800 15px var(--f-num); }
.matcher__note { padding: 14px 28px; font-size: 12px; opacity: .5; border-top: 1px solid rgba(255, 255, 255, .08); }

/* ------------------------------------------------------------ journey */
.journey { padding: clamp(100px, 12vw, 180px) 0; overflow: hidden; }
.journey.hs { padding-block: calc(var(--nav-h) + 2.4vh) 3.6vh; }
.journey__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 4vw, 70px); align-items: center; }
.journey__grid .fp { grid-template-columns: 1fr; gap: 10px; }
.journey__grid .fp__svg { max-height: calc(100svh - var(--nav-h) - 330px); min-height: 280px; }
.journey__grid .fp__lists { display: none; }
.journey__tl { min-width: 0; }
.journey__grid .journey__sub { margin: 0 0 22px; font-size: clamp(22px, 2.2vw, 34px); }
.journey__grid .tl__ctrl { top: -66px; }
.journey__grid .tl__track { grid-auto-columns: clamp(220px, 18vw, 290px); }
.journey__grid .tl__item time { font-size: clamp(26px, 2.2vw, 38px); margin-bottom: 12px; }
.fp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: center; }
.fp__svg { width: 100%; max-width: 540px; overflow: visible; margin-inline: auto; display: block; }
.fp__h { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin: 0 0 6px; }
.fp__h b { font: 900 18px var(--f-disp); }
.fp__h span { font-size: 13px; color: var(--mute); }
.fp__ring { fill: none; stroke: var(--line); stroke-dasharray: 2 6; }
.fp__ring--gl { stroke: rgba(221, 43, 33, .35); }
.fp__arc { fill: none; stroke: var(--ink); stroke-width: .8; opacity: .35; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 2s var(--ease-out), opacity .3s, stroke .3s; transition-delay: var(--d); }
.fp__arc--gl { stroke: var(--red); stroke-width: 1.4; opacity: .9; }
.is-in .fp__arc, .no-js .fp__arc { stroke-dashoffset: 0; }
.fp__pt circle { fill: var(--ink); transition: r .3s, fill .3s; }
.fp__pt--gl circle { fill: var(--red); }
.fp__pt text { font: 600 13px var(--f-body); fill: var(--ink-2); transition: fill .3s; }
.fp__pt--gl text { font: 900 15px var(--f-disp); fill: var(--red); }
.fp__pt:hover circle, .fp__pt:focus circle { fill: var(--red); r: 7; }
.fp__pt:hover text, .fp__pt:focus text { fill: var(--red); }
.fp__pt { outline: none; cursor: default; }
.fp__hq { fill: var(--red); }
.fp__hq-pulse { fill: none; stroke: var(--red); stroke-width: 1.5; transform-origin: 280px 280px; animation: hq 2.6s var(--ease) infinite; }
@keyframes hq { from { transform: scale(.6); opacity: 1; } to { transform: scale(3.4); opacity: 0; } }
.fp__hq-label { font: 900 18px var(--f-disp); fill: var(--ink); }
.fp__lists { display: grid; gap: 0; }
.fp__lists > div { padding: 24px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 130px 1fr; gap: 20px; }
.fp__lists dt { font: 900 18px var(--f-disp); }
.fp__lists dd { color: var(--ink-2); }
.fp__lists strong { display: block; font: 900 clamp(28px, 2.6vw, 42px)/1.1 var(--f-disp); color: var(--red); margin-bottom: 6px; }
.journey__sub { margin: clamp(80px, 10vw, 140px) 0 34px; font: 900 clamp(30px, 3.6vw, 58px)/1.1 var(--f-disp); letter-spacing: -.02em; }

.tl { position: relative; }
.tl__ctrl { position: absolute; right: 0; top: -84px; display: flex; gap: 10px; }
.tl__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 24vw, 360px);
  overflow-x: auto; scrollbar-width: none; cursor: grab; outline: none;
  scroll-snap-type: x proximity; padding-bottom: 8px;
}
.tl__track::-webkit-scrollbar { display: none; }
.tl__track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.tl__track.is-drag * { pointer-events: none; }
.tl__item { scroll-snap-align: start; padding: 26px 30px 30px 0; border-top: 1.5px solid var(--ink); position: relative; user-select: none; }
.tl__item::before { content: ""; position: absolute; left: 0; top: -6px; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); transition: background .3s, border-color .3s; }
.tl__item:hover::before { background: var(--red); border-color: var(--red); }
.tl__item time { display: block; font: 800 clamp(30px, 2.8vw, 46px)/1 var(--f-num); color: var(--red); letter-spacing: -.02em; margin-bottom: 18px; }
.tl__item h3 { font: 900 22px/1.3 var(--f-disp); margin-bottom: 8px; }
.tl__item p { color: var(--ink-2); font-size: 15px; }
.tl__bar { height: 2px; background: var(--line); margin-top: 22px; position: relative; overflow: hidden; }
.tl__bar i { position: absolute; inset: 0; background: var(--red); transform-origin: left; transform: scaleX(var(--p, .2)); transition: transform .2s; }

/* ------------------------------------------------------------ clients */
.clients { padding: clamp(100px, 12vw, 170px) 0 0; }
.clients.hs { padding-bottom: 0; justify-content: flex-end; }
.clients.hs .band { margin-top: auto; }
.marquee--logos { padding: 7px 0; }
.marquee--logos .marquee__track { display: flex; gap: 14px; width: max-content; }
.marquee--logos li { flex: none; width: clamp(120px, min(10vw, 17vh), 170px); aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.marquee--logos img, .cwall__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.marquee--logos li:hover img, .cwall__grid li:hover img { transform: scale(1.06); }
.marquee--logos li { transition: box-shadow .3s, translate .4s var(--ease-out); }
.marquee--logos li:hover { box-shadow: 0 0 0 1.5px var(--red), 0 14px 30px -14px rgba(0, 0, 0, .3); translate: 0 -3px; }
.clients__more { margin: clamp(20px, 3vh, 36px) 0 clamp(24px, 4vh, 50px); }
.clients__more summary { display: inline-flex; gap: 10px; align-items: center; cursor: pointer; font-weight: 700; list-style: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.clients__more summary::-webkit-details-marker { display: none; }
.clients__more summary::after { content: "+"; font: 600 18px var(--f-num); transition: transform .3s; }
.clients__more[open] summary::after { transform: rotate(45deg); }
.clist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(30px, 5vw, 80px); margin-top: 26px; }
.clist > div { padding: 18px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 110px 1fr; gap: 16px; }
.clist dt { font: 900 16px var(--f-disp); }
.clist dd { color: var(--ink-2); font-size: 14px; }
.band { background: var(--red); color: #fff; padding: 22px 0; }
.band .marquee__track { display: flex; width: max-content; gap: 30px; }
.band li { display: flex; align-items: center; gap: 30px; white-space: nowrap; font: 900 clamp(18px, 1.8vw, 26px)/1.2 var(--f-disp); }
.band i { font-style: normal; font-size: .7em; opacity: .8; }

/* ------------------------------------------------------------ faq */
.faqsec:not(.hs) { padding: clamp(100px, 12vw, 170px) 0; }
.faqsec__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); gap: clamp(30px, 6vw, 110px); align-items: start; }
.faqsec .sec-head { position: sticky; top: calc(var(--nav-h) + 30px); }
.faqsec .sec-title { font-size: clamp(34px, 4vw, 64px); }
.faq { border-bottom: 1px solid var(--line); }
.faq__item { border-top: 1px solid var(--line); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 26px 0; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q { font: 900 clamp(18px, 1.6vw, 24px)/1.4 var(--f-disp); transition: color .3s; }
.faq__item summary:hover .faq__q { color: var(--red); }
.faq__ico { position: relative; width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid var(--line); transition: background .3s, border-color .3s, transform .5s var(--ease); }
.faq__ico::before, .faq__ico::after { content: ""; position: absolute; left: 11px; right: 11px; top: 17px; height: 1.5px; background: currentColor; }
.faq__ico::after { transform: rotate(90deg); transition: transform .4s var(--ease); }
.faq__item[open] .faq__ico { background: var(--red); border-color: var(--red); color: #fff; transform: rotate(180deg); }
.faq__item[open] .faq__ico::after { transform: rotate(0); }
.faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size .5s var(--ease), content-visibility .5s allow-discrete; }
.faq__item[open]::details-content { block-size: auto; }
.faq__a { padding: 0 60px 28px 0; color: var(--ink-2); }
.faqpage { padding: 40px 0 clamp(100px, 12vw, 160px); }
.faqpage .faq { max-width: 1000px; }

/* ------------------------------------------------------------ CTA */
.cta { padding: clamp(110px, 14vw, 220px) 0; background: var(--paper-2); overflow: hidden; }
.cta__inner { position: relative; display: grid; gap: 30px; }
.cta__title { font: 900 clamp(38px, 6.2vw, 108px)/1.08 var(--f-disp); letter-spacing: -.03em; max-width: 13em; }
.cta__btn {
  position: absolute; right: 2vw; bottom: 0;
  width: clamp(150px, 15vw, 230px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; justify-items: center; gap: 10px;
  background: var(--red); color: #fff; font: 900 clamp(16px, 1.4vw, 21px) var(--f-disp);
  transition: background .4s, transform .2s;
  box-shadow: 0 30px 60px -20px rgba(221, 43, 33, .6);
}
.cta__btn .ico { width: 32px; height: 32px; transition: transform .6s var(--ease); }
.cta__btn:hover { background: var(--ink); }
.cta__btn:hover .ico { transform: rotate(45deg) scale(1.1); }

/* ------------------------------------------------------------ footer */
.footer { background: var(--night); color: var(--paper); padding-top: clamp(80px, 9vw, 130px); overflow: hidden; position: relative; }
.footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 6vw; }
.footer__claim { font: 900 clamp(28px, 2.8vw, 44px)/1.3 var(--f-disp); margin-bottom: 30px; }
.footer__pos { margin: -16px 0 12px; font-size: 14px; font-weight: 700; color: rgba(243, 238, 232, .78); }
.footer__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; }
.footer__badges a { display: block; padding: 4px 11px; border: 1px solid rgba(243, 238, 232, .22); border-radius: 999px; font-size: 12.5px; color: rgba(243, 238, 232, .72); transition: color .3s, border-color .3s; }
.footer__badges a:hover { color: var(--red-3); border-color: var(--red-3); }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.footer__h { font: 600 12px var(--f-num); letter-spacing: .16em; opacity: .5; margin-bottom: 16px; }
.footer__col li { padding: 4px 0; font-size: 14.5px; }
.footer__col a { opacity: .85; transition: color .3s, opacity .3s; }
.footer__col a:hover { color: var(--red-3); opacity: 1; }
.footer__mark {
  display: flex; justify-content: space-between; margin-top: clamp(60px, 7vw, 110px);
  padding: 0 calc(var(--pad) * .6);
  font: 900 clamp(70px, 19.6vw, 360px)/.78 "Archivo", sans-serif; letter-spacing: -.04em;
  color: var(--red); user-select: none;
}
.footer__mark span { display: inline-block; font-variation-settings: "wdth" var(--w, 125), "wght" var(--g, 900); transition: font-variation-settings .5s var(--ease-out); }
.footer__base { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; padding: 22px 0 28px; font-size: 12.5px; opacity: .55; border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 18px; }
.footer__keys button { font-size: inherit; display: inline-flex; gap: 8px; align-items: center; }
.footer__act { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.footer__mail { font-size: 13px; line-height: 1.5; transition: color .3s; }
.footer__mail span { opacity: .55; }
.footer__mail:hover { color: var(--red); }
.footer__filings { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer__filings a { display: inline-flex; align-items: center; gap: 6px; transition: color .3s; }
.footer__filings a:hover { color: var(--red-3); }
.footer__filings img { width: 16px; height: 16px; }
.footer__src { flex-basis: 100%; order: 3; }

/* ------------------------------------------------------------ page hero */
.phero { padding: calc(var(--nav-h) + clamp(60px, 9vw, 140px)) 0 clamp(70px, 9vw, 130px); position: relative; }
.phero__title { font: 900 clamp(46px, 7.8vw, 128px)/1.02 var(--f-disp); letter-spacing: -.035em; margin: 26px 0 30px; text-wrap: balance; }
.phero__lede { max-width: 46em; font-size: clamp(15px, 1.2vw, 18px); color: var(--ink-2); }
.phero--dark .phero__lede { color: rgba(243, 238, 232, .78); }
.phero--dark .wrap { position: relative; z-index: 1; }
.phero--dark .ai__stats { margin-top: 56px; }
.note-block { padding: 40px 0 80px; font-size: 13px; color: var(--mute); }

/* ------------------------------------------------------------ creators page */
.ctabs { position: sticky; top: var(--nav-h); z-index: 50; background: rgba(243, 238, 232, .86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-block: 1px solid var(--line); transition: top .5s var(--ease); }
html.nav-hidden .ctabs, html.nav-hidden .cases__bar { top: 0; }
.ctabs__in { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; }
.ctab { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; white-space: nowrap; font-weight: 700; transition: background .3s, color .3s; }
.ctab small { font-weight: 400; font-size: 12px; color: var(--mute); }
.ctab kbd { opacity: .4; }
.ctab:hover { background: var(--paper-3); }
.ctab.is-active { background: var(--ink); color: var(--paper); }
.ctab.is-active small { color: rgba(243, 238, 232, .6); }
.ctabs__search { margin-left: auto; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); min-width: 200px; }
.ctabs__search svg, .cases__search svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; opacity: .6; }
.ctabs__search input, .cases__search input { border: 0; background: none; outline: none; width: 100%; }

.roster { padding: clamp(90px, 10vw, 150px) 0; scroll-margin-top: calc(var(--nav-h) + 60px); }
.roster--red { background: var(--red); color: #fff; --stage: rgba(255, 255, 255, .13); --stage-2: rgba(255, 255, 255, .22); --sub: rgba(255, 255, 255, .75); }
.roster--ink { background: var(--night-2); color: var(--paper); --stage: #252220; --stage-2: #3a1d19; --sub: rgba(243, 238, 232, .6); }
.roster--white { background: var(--white); --stage: #f1ede7; --stage-2: #f7d9d4; --sub: var(--mute); }
.roster--paper { background: var(--paper-2); --stage: #e2dacd; --stage-2: #f1cfc8; --sub: var(--mute); }
.roster.is-empty { display: none; }
.roster__head { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 50px); align-items: end; margin-bottom: clamp(50px, 6vw, 80px); }
.roster__no { font: 800 64px/1 var(--f-num); letter-spacing: -.04em; display: grid; gap: 10px; }
.roster__no span { font: 600 11px var(--f-num); letter-spacing: .16em; color: var(--sub); }
.roster__name { font: 900 clamp(46px, 5.2vw, 92px)/1 var(--f-disp); letter-spacing: -.035em; }
.roster__type { margin-top: 12px; font-weight: 700; color: var(--sub); }
.roster__copy { display: grid; gap: 10px; color: var(--sub); }
.roster__title { font: 900 clamp(20px, 1.8vw, 28px)/1.35 var(--f-disp); color: inherit; }
.roster--red .roster__title, .roster--ink .roster__title { color: inherit; }
.roster__copy p:not(.roster__title) { color: var(--sub); }
.roster__scenes { font-size: 14px; }
.roster__scenes span { font-weight: 700; margin-right: 10px; color: var(--red); }
.roster--red .roster__scenes span { color: #fff; }
.roster__more { margin: clamp(60px, 7vw, 100px) 0 24px; font: 900 22px var(--f-disp); display: flex; align-items: center; gap: 16px; }
.roster__more::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .2; }

.ccr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 16px; }
.ccr-grid--big { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.ccr { transition: opacity .4s; }
.ccr.is-hidden { display: none; }
.ccr figure { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ccr__stage { position: relative; aspect-ratio: 1 / 1.08; border-radius: 16px; overflow: hidden; background: radial-gradient(90% 70% at 50% 100%, var(--stage-2), var(--stage)); display: flex; align-items: flex-end; justify-content: center; }
.ccr--big .ccr__stage { aspect-ratio: 4 / 4.4; border-radius: var(--r-md); }
.ccr__stage img { height: 92%; width: auto; max-width: 112%; object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%; transition: transform .8s var(--ease-out); }
.ccr:hover .ccr__stage img { transform: scale(1.06); }
.ccr__stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .25), transparent 50%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.ccr:hover .ccr__stage::after { opacity: 1; }
.ccr figcaption { display: grid; gap: 2px; }
.ccr--big figcaption { grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; }
.ccr__name { font: 900 15px/1.3 var(--f-disp); }
.ccr--big .ccr__name { font-size: clamp(20px, 1.8vw, 28px); }
.ccr__fans { font-size: 12px; color: var(--sub); white-space: nowrap; }
.ccr__fans b { font: 800 15px var(--f-num); color: var(--red); margin-right: 3px; }
.roster--red .ccr__fans b { color: #fff; }
.ccr--big .ccr__fans b { font-size: clamp(20px, 1.8vw, 28px); }
.ccr__tag { grid-column: 1 / -1; font-size: 13px; color: var(--sub); }

/* ------------------------------------------------------------ services page */
.svsec { padding: clamp(90px, 11vw, 160px) 0; }
.svsec--brand { background: var(--paper-2); }
.svsec__head { display: grid; gap: 22px; margin-bottom: clamp(30px, 4vw, 60px); }
.sv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(30px, 5vw, 90px); align-items: center; padding: clamp(60px, 7vw, 100px) 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 20px); }
.sv:nth-of-type(even) .sv__media { order: -1; }
.sv__copy { display: grid; gap: 16px; align-content: start; }
.sv__no { font: 600 12px var(--f-num); letter-spacing: .12em; color: var(--mute); }
.sv__name { font: 900 clamp(34px, 4vw, 64px)/1.08 var(--f-disp); letter-spacing: -.025em; }
.sv__line { font: 900 clamp(18px, 1.5vw, 23px)/1.4 var(--f-disp); color: var(--red); }
.sv__badge { justify-self: start; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 700; }
.sv__desc { color: var(--ink-2); max-width: 34em; }
.sv__facts { display: flex; gap: 40px; padding: 16px 0; }
.sv__facts dd { font: 800 clamp(40px, 4vw, 64px)/1 var(--f-num); color: var(--red); letter-spacing: -.03em; }
.sv__facts div { display: flex; flex-direction: column-reverse; gap: 8px; }
.sv__facts dt { font-size: 13px; color: var(--mute); }
.sv__media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-3); }
.sv__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.sv__media:hover img { transform: scale(1.05); }
.sv__media--strip { aspect-ratio: auto; background: none; }
.sv__media--strip img { height: auto; }
.sv__cases { margin-top: 10px; }
.sv__cases-h { font: 600 12px var(--f-num); letter-spacing: .14em; color: var(--mute); margin-bottom: 6px; }
.sv__cases a { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-top: 1px solid var(--line); font-weight: 700; transition: color .3s, padding .4s var(--ease); }
.sv__cases a:hover { color: var(--red); padding-left: 8px; }
.sv__cases b { font: 800 16px var(--f-num); color: var(--red); }
.sv__feats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sv__feats li { display: grid; gap: 6px; padding: 18px 0; border-top: 1.5px solid var(--ink); }
.sv__feats b { font: 900 18px var(--f-disp); }
.sv__feats span { color: var(--ink-2); font-size: 14.5px; }
.sv .flow--dark { grid-column: 1 / -1; }

.phones { grid-column: 1 / -1; }
.phones ul { display: flex; justify-content: center; align-items: flex-start; gap: clamp(12px, 2vw, 30px); padding: 20px 0; }
.phone { flex: 0 1 220px; aspect-ratio: 9 / 18.5; border-radius: 34px; overflow: hidden; background: var(--ink); border: 7px solid var(--ink); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .4); }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; border-radius: 26px; }
.phones li:nth-child(even) { margin-top: 50px; }
.phones__cap { text-align: center; font-size: 13px; color: var(--mute); }

.gt { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.gt__item { display: grid; gap: 10px; align-content: start; }
.gt__item img { border-radius: var(--r-md); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.gt__k { font: 600 12px var(--f-num); letter-spacing: .1em; color: var(--red); margin-top: 8px; }
.gt__item h4 { font: 900 22px/1.3 var(--f-disp); }
.gt__item p:last-child { color: var(--ink-2); font-size: 15px; }

/* ------------------------------------------------------------ cases page */
.cases { padding: 0 0 clamp(80px, 10vw, 140px); }
.cases__bar { position: sticky; top: var(--nav-h); z-index: 50; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding: 14px 0; margin-bottom: 40px; background: rgba(243, 238, 232, .86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); transition: top .5s var(--ease); }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; font-size: 14px; transition: background .3s, color .3s, border-color .3s; }
.fchip small { font: 600 11px var(--f-num); opacity: .55; margin-left: 4px; }
.fchip:hover { border-color: var(--ink); }
.fchip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cases__search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); min-width: 240px; }
.cgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(36px, 4vw, 60px) clamp(16px, 2vw, 30px); }
.ccard { grid-column: span 2; }
.ccard--wide { grid-column: span 3; }
.ccard.is-hidden { display: none; }
.ccard > a { display: grid; gap: 18px; }
.ccard__img { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--paper-3); }
.ccard--wide .ccard__img { aspect-ratio: 16 / 10; }
.ccard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.ccard a:hover .ccard__img img { transform: scale(1.06); }
.ccard__body { display: grid; gap: 6px; }
.ccard__cats { font: 600 12px var(--f-num); letter-spacing: .06em; color: var(--red); }
.ccard__title { font: 900 clamp(22px, 1.9vw, 30px)/1.25 var(--f-disp); transition: color .3s; }
.ccard a:hover .ccard__title { color: var(--red); }
.ccard__head { color: var(--ink-2); font-size: 14.5px; }
.ccard__metric { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.ccard__metric b { font: 800 clamp(26px, 2.4vw, 38px)/1 var(--f-num); letter-spacing: -.02em; }
.ccard__metric span { font-size: 12.5px; color: var(--mute); }
.cases__empty { padding: 60px 0; text-align: center; color: var(--mute); }
.impact--page { background: var(--paper-2); }

/* ------------------------------------------------------------ case detail */
.chero { padding: calc(var(--nav-h) + 50px) 0 clamp(50px, 6vw, 80px); }
.chero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: end; }
.chero__copy { display: grid; gap: 18px; }
.chero__title { font: 900 clamp(40px, 5.2vw, 88px)/1.06 var(--f-disp); letter-spacing: -.035em; text-wrap: balance; }
.chero__head { font: 900 clamp(20px, 1.8vw, 28px)/1.4 var(--f-disp); color: var(--red); }
.chero__lede { color: var(--ink-2); max-width: 34em; }
.chero__metric { display: grid; gap: 6px; margin-top: 20px; padding-top: 22px; border-top: 1.5px solid var(--ink); }
.chero__metric b { font: 800 clamp(58px, 7.4vw, 128px)/.95 var(--f-num); letter-spacing: -.04em; color: var(--red); }
.chero__metric span { font-size: 14px; color: var(--mute); }
.chero__media { align-self: center; }
.chero__media figcaption { margin-top: 12px; font-size: 13px; color: var(--mute); text-align: center; }
.chero__poster img, .chero__photo img { width: 100%; border-radius: var(--r-lg); transition: transform 1s var(--ease-out); }
.chero__frames ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }
.chero__frames img { width: 100%; border-radius: var(--r-md); }
.chero__frames li:nth-child(2) { transform: translateY(-18px); }
.chero__phones ul { padding: 0; }
.chero__photos { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: clamp(8px, 1vw, 14px); aspect-ratio: 1.55; }
.chero__photos li { min-height: 0; }
.chero__photos li:first-child { grid-row: span 2; }
.chero__photos img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md); }
.case__body { padding-bottom: clamp(60px, 7vw, 100px); }
.mets { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 24px; margin-bottom: clamp(40px, 5vw, 70px); }
.met { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding: 22px 0; border-top: 1px solid var(--line); }
.met dd { font: 800 clamp(28px, 2.6vw, 42px)/1 var(--f-num); letter-spacing: -.02em; white-space: nowrap; }
.met dd small { font: 600 14px var(--f-body); margin-left: 6px; color: var(--mute); }
.met dt { font-size: 13px; color: var(--mute); }
.met--hero dd { color: var(--red); }
.cmetrics__none { padding: 30px 0 50px; color: var(--mute); }
.case__cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 70px); }
.ctable__h { font: 900 22px/1.3 var(--f-disp); margin-bottom: 16px; }
.cfacts dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 15px; }
.cfacts dt { color: var(--mute); }
.cfacts dd { color: var(--ink-2); }
.cworks { margin-top: clamp(50px, 6vw, 80px); }
.cworks__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.cwork { display: grid; align-content: start; min-width: 0; gap: 8px; padding: 20px 22px; border-radius: var(--r-md); background: var(--paper-2); }
.cwork__meta { font-size: 12.5px; color: var(--mute); }
.cwork__t { font: 800 17px/1.45 var(--f-body); min-width: 0; }
.cwork__x { font-size: 14px; color: var(--ink-2); }
.cwork__stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px 14px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.cwork__stats dt { font-size: 12px; color: var(--mute); }
.cwork__stats dd { font: 800 18px/1.2 var(--f-num); font-variant-numeric: tabular-nums; margin-top: 2px; }
.fine { margin-top: 18px; font-size: 12px; line-height: 1.7; color: var(--mute); }
.cfine { margin-top: clamp(40px, 5vw, 60px); padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.75; color: var(--mute); }
.cfine b { font-weight: 700; margin-right: 6px; }
.cfine p { display: inline; }
.cfine p + p::before { content: "　"; }
.ctable { margin-top: clamp(50px, 6vw, 80px); }
.ctable__wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--white); }
.ctable table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.ctable th, .ctable td { padding: 15px 20px; text-align: left; border-top: 1px solid var(--line); }
.ctable thead th { border-top: 0; font: 600 12px var(--f-num); letter-spacing: .1em; color: var(--mute); background: var(--paper-2); }
.ctable td { font: 700 16px var(--f-num); font-variant-numeric: tabular-nums; }
.ctable tbody tr { transition: background .2s; }
.ctable tbody tr:hover { background: #fff6f4; }
.ctable__note, .ctable__names { margin-top: 12px; font-size: 13px; color: var(--mute); }
.ctable__names { font-size: 16px; color: var(--ink-2); }
.cposter__btn { display: block; width: 100%; border-radius: var(--r-lg); overflow: hidden; cursor: zoom-in; }
.cposter__btn:hover img { transform: scale(1.015); }
.cnav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; padding: 40px 0 clamp(80px, 9vw, 130px); border-top: 1px solid var(--line); }
.cnav a { display: grid; gap: 6px; }
.cnav a[rel="next"] { text-align: right; }
.cnav small { font: 600 12px var(--f-num); letter-spacing: .1em; color: var(--mute); }
.cnav span { font: 900 clamp(20px, 2.2vw, 34px)/1.2 var(--f-disp); transition: color .3s; }
.cnav a:hover span { color: var(--red); }
.cnav__all { padding: 12px 22px; border-radius: 999px; border: 1px solid var(--line); font-weight: 700; transition: background .3s, color .3s; }
.cnav__all:hover { background: var(--ink); color: var(--paper); }

/* ------------------------------------------------------------ AI page */
.pillars { padding: clamp(100px, 12vw, 170px) 0; }
.pillar-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.pillar { padding: 34px 30px 38px; border-radius: var(--r-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 14px; align-content: start; transition: transform .6s var(--ease-out), box-shadow .4s; }
.pillar:hover { transform: translateY(-8px); box-shadow: inset 0 0 0 1.5px var(--red), 0 30px 60px -30px rgba(221, 43, 33, .4); }
.pillar__no { font: 800 54px/1 var(--f-num); color: var(--red); letter-spacing: -.04em; }
.pillar h3 { font: 900 24px/1.3 var(--f-disp); }
.pillar p { color: var(--ink-2); }
.aidemo { padding: clamp(100px, 12vw, 170px) 0; }
.steps { padding: clamp(100px, 12vw, 170px) 0; }
.steps__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 100px); align-items: start; }
.steps__grid > div { position: sticky; top: calc(var(--nav-h) + 30px); }
.step-list { border-bottom: 1px solid var(--line); }
.step { border-top: 1px solid var(--line); }
.step button { width: 100%; display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 16px; padding: 26px 0; text-align: left; }
.step__no { font: 800 22px var(--f-num); color: var(--mute); transition: color .3s; }
.step__t { font: 900 clamp(20px, 1.9vw, 28px)/1.3 var(--f-disp); transition: color .3s; }
.step__tag { font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.step__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.step__body > p { overflow: hidden; padding-left: 76px; color: var(--ink-2); }
.step.is-open .step__body { grid-template-rows: 1fr; }
.step.is-open .step__body > p { padding-bottom: 28px; }
.step.is-open .step__no, .step.is-open .step__t, .step button:hover .step__t { color: var(--red); }
.step.is-open .step__tag { background: var(--red); border-color: var(--red); color: #fff; }
.no-js .step__body { grid-template-rows: 1fr; }
.roadmap { margin-top: 40px; padding: 26px 28px; border-radius: var(--r-md); border: 1.5px dashed var(--red); display: grid; gap: 10px; }
.roadmap__k { font: 900 18px var(--f-disp); color: var(--red); }
.roadmap__n { font-size: 12px; color: var(--mute); }
.autos { padding: clamp(100px, 12vw, 170px) 0; background: var(--paper-2); }
.auto-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); margin-bottom: 50px; }
.auto { display: grid; gap: 22px; align-content: start; }
.auto__img { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3 / 2; }
.auto__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.auto:hover .auto__img img { transform: scale(1.05); }
.auto__body { display: grid; gap: 12px; }
.auto h3 { font: 900 clamp(28px, 2.6vw, 40px)/1.2 var(--f-disp); }
.auto h3 a:hover { color: var(--red); }
.auto p { color: var(--ink-2); }
.auto__metric { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.auto__metric b { font: 800 clamp(44px, 4.6vw, 76px)/1 var(--f-num); color: var(--red); letter-spacing: -.03em; }
.auto__metric span { font-size: 13px; color: var(--mute); }
.quote { margin-top: 60px; font: 900 clamp(28px, 3.4vw, 54px)/1.25 var(--f-disp); letter-spacing: -.02em; max-width: 16em; }

/* ------------------------------------------------------------ about */
.about-ov { padding: 0 0 clamp(90px, 10vw, 150px); }
.ov { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); }
.ov > div { padding: 28px 24px 30px 0; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; }
.ov > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.ov dt { font-size: 14px; color: var(--mute); }
.ov dd { display: grid; gap: 10px; }
.ov dd b { font: 800 clamp(64px, 7vw, 120px)/.9 var(--f-num); letter-spacing: -.04em; color: var(--red); }
.ov dd span { font-weight: 700; }
.ov2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); margin-top: clamp(40px, 5vw, 70px); }
.ov2 h3 { font: 900 22px/1.3 var(--f-disp); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.ov2 h3::before { content: ""; width: 4px; height: 20px; background: var(--red); }
.ov2 p { color: var(--ink-2); }
.mvv { padding: clamp(100px, 12vw, 170px) 0; }
.mvv__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 80px) clamp(30px, 5vw, 90px); }
.mvv__item { display: grid; gap: 20px; align-content: start; }
.mvv__big { font: 900 clamp(30px, 3.6vw, 60px)/1.2 var(--f-disp); letter-spacing: -.02em; }
.mvv__item--values { grid-column: 1 / -1; }
.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .15); }
.values li { display: grid; gap: 14px; padding: 26px 20px 0 0; font: 900 clamp(26px, 2.8vw, 46px)/1.1 var(--f-disp); transition: color .3s; }
.values li + li { padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, .12); }
.values li span { font: 700 13px var(--f-num); color: var(--red); }
.values li:hover { color: var(--red-3); }
.team { padding: clamp(100px, 12vw, 170px) 0; }
.team__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(30px, 3vw, 50px) clamp(14px, 1.8vw, 26px); }
.member { display: grid; gap: 6px; align-content: start; outline: none; }
.member__stage { position: relative; aspect-ratio: 4 / 4.6; border-radius: var(--r-md); overflow: hidden; background: var(--paper-3); display: flex; align-items: flex-end; justify-content: center; margin-bottom: 12px; isolation: isolate; }
.member__stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--red); clip-path: inset(100% 0 0 0); transition: clip-path .7s var(--ease-io); }
.member:hover .member__stage::before, .member:focus .member__stage::before { clip-path: inset(0 0 0 0); }
.member__stage img { height: 94%; width: auto; max-width: 110%; object-fit: contain; object-position: 50% 100%; transition: transform .9s var(--ease-out); }
.member:hover .member__stage img { transform: scale(1.04); }
.member__name { font: 900 22px/1.3 var(--f-disp); }
.member__name span { font: 500 16px var(--f-num); color: var(--mute); margin-left: 4px; }
.member__role { font-weight: 700; font-size: 14.5px; }
.member__duty { font-size: 14px; color: var(--mute); }
.honors { padding: clamp(100px, 12vw, 170px) 0; background: var(--paper-2); }
.honors__img { border-radius: var(--r-lg); overflow: hidden; margin-bottom: clamp(40px, 5vw, 70px); background: #f4f3f2; }
.honors__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; }
.honor { border-top: 1.5px solid var(--ink); padding-top: 20px; }
.honor h3 { font: 900 20px var(--f-disp); display: flex; gap: 10px; align-items: baseline; margin-bottom: 14px; }
.honor h3 span { font: 700 12px var(--f-num); color: var(--red); }
.honor li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; font-weight: 600; transition: color .3s, padding .4s var(--ease); }
.honor li:hover { color: var(--red); padding-left: 6px; }
.charity { padding: clamp(100px, 12vw, 170px) 0; }
.charity__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); }
.charity__grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); }
.charity__grid p { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 14px; }
.charity__grid span { color: var(--red); font-weight: 700; }
.charity__h { margin: clamp(60px, 7vw, 100px) 0 24px; font: 900 24px var(--f-disp); }
.thanks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); }
.thanks button { display: block; width: 100%; cursor: zoom-in; background: var(--paper-2); border-radius: var(--r-md); padding: 18px; }
.thanks img { margin: 0 auto; max-height: 320px; width: auto; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .4); transition: transform .6s var(--ease-out); }
.thanks button:hover img { transform: rotate(-1.5deg) scale(1.03); }
.thanks p { margin-top: 10px; font-size: 13px; color: var(--mute); text-align: center; }
.about .clients, [data-page="about"] .clients { padding-bottom: clamp(80px, 9vw, 130px); }
.cwall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 4vw, 60px) clamp(24px, 3vw, 50px); margin-bottom: 60px; }
.cwall__group h3 { font: 900 20px var(--f-disp); margin-bottom: 16px; display: flex; gap: 12px; align-items: center; }
.cwall__group h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cwall__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.cwall__grid li { aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line); }

/* ------------------------------------------------------------ contact */
.brief { padding: 0 0 clamp(100px, 12vw, 170px); }
.brief__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.bf { display: grid; gap: 34px; }
.bf__group { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; }
.bf__group legend { font: 900 20px var(--f-disp); margin-bottom: 14px; padding: 0; }
.bf__opts { display: flex; flex-wrap: wrap; gap: 10px; }
.bf__opt input { position: absolute; opacity: 0; pointer-events: none; }
.bf__opt span { display: inline-block; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; font-size: 14.5px; cursor: pointer; transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease); user-select: none; }
.bf__opt span:hover { border-color: var(--ink); }
.bf__opt input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bf__opt input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.bf__opt:active span { transform: scale(.96); }
.bf__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bf__fields label { display: grid; gap: 8px; font-size: 13px; font-weight: 600; color: var(--mute); }
.bf__fields input, .bf__fields textarea { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--white); outline: none; color: var(--ink); font-size: 15px; resize: vertical; transition: border-color .3s, box-shadow .3s; }
.bf__fields input:focus, .bf__fields textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(221, 43, 33, .12); }
.bf__wide { grid-column: 1 / -1; }
.brief__out { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 20px; }
.brief__card { padding: 28px; border-radius: var(--r-lg); background: var(--night); color: var(--paper); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .5); }
.brief__k { font: 600 12px var(--f-num); letter-spacing: .18em; color: var(--red-3); margin-bottom: 18px; }
.brief__text { margin: 0; min-height: 260px; white-space: pre-wrap; font: 14px/1.85 ui-monospace, "SF Mono", Menlo, var(--f-body); color: rgba(243, 238, 232, .9); }
.brief__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.brief__card .btn--ink { background: var(--paper); color: var(--ink); --btn-hover: var(--red); }
.brief__card .btn--ink:hover { color: #fff; }
.brief__note { margin-top: 14px; font-size: 12px; opacity: .5; }
.brief__info > div { display: grid; grid-template-columns: 80px 1fr; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.brief__info dt { color: var(--mute); }
/* ---- contact methods (email + wechat qr, contact page) */
.reach { padding: clamp(80px, 9vw, 140px) 0 clamp(90px, 10vw, 150px); }
.qr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.qr li { display: flex; align-items: center; gap: 22px; padding: 22px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); }
.qr figure { margin: 0; flex: none; }
.qr img { width: clamp(120px, 10vw, 150px); height: auto; display: block; }
.qr p { display: grid; gap: 6px; }
.qr b { font: 900 22px var(--f-disp); }
.qr span { font-size: 14px; color: var(--mute); }
.qr__mail figure { display: grid; place-items: center; width: clamp(120px, 10vw, 150px); aspect-ratio: 1; border-radius: var(--r-md); background: var(--red); color: #fff; font: 900 clamp(56px, 5vw, 72px)/1 var(--f-disp); }
.qr__mail a { font: 700 clamp(17px, 1.5vw, 20px) var(--f-disp); color: var(--red); word-break: break-all; }
.qr__mail a:hover { text-decoration: underline; }
.brief__info a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.brief__info a:hover { color: var(--red); }
.toast { position: fixed; left: 50%; bottom: 40px; z-index: 1500; transform: translate(-50%, 20px); padding: 12px 22px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 600; opacity: 0; transition: opacity .4s, transform .5s var(--ease-out); pointer-events: none; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------ en / 404 */
.en { padding: 0 0 clamp(90px, 10vw, 150px); }
.en__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 80px); }
.en h2 { font: 900 26px "Archivo", var(--f-disp); font-stretch: 112%; margin-bottom: 16px; }
.en h2 + p { margin-bottom: 30px; }
.en li { padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.en__note { margin-top: 12px; font-size: 13px; color: var(--mute); }
.nf { min-height: 100svh; display: grid; align-items: center; padding: var(--nav-h) 0 60px; }
.nf__inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 5vw; align-items: center; }
.nf__b img { animation: wobble 6s var(--ease) infinite alternate; filter: drop-shadow(20px 30px 30px rgba(110, 18, 8, .25)); }
@keyframes wobble { from { transform: rotate(-4deg) translateY(0); } to { transform: rotate(5deg) translateY(-16px); } }
.nf .btn { margin-top: 30px; }

/* ------------------------------------------------------------ overlays */
.cmdk, .keys { position: fixed; inset: 0; z-index: 1600; display: grid; justify-items: center; align-items: start; padding-top: 14vh; }
.cmdk[hidden], .keys[hidden], .lightbox[hidden] { display: none; }
.cmdk__scrim, .keys__scrim { position: absolute; inset: 0; background: rgba(14, 13, 13, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade .3s; }
.cmdk__panel, .keys__panel { position: relative; width: min(680px, 92vw); border-radius: 22px; background: var(--paper); box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .5), 0 0 0 1px var(--line); overflow: hidden; animation: pop .45s var(--ease-out); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.cmdk__bar { display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.cmdk__bar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; opacity: .5; flex: none; }
.cmdk__bar input { flex: 1; height: 64px; border: 0; outline: none; background: none; font-size: 18px; }
.cmdk__bar input::-webkit-search-cancel-button { display: none; }
.cmdk__list { max-height: min(56vh, 480px); overflow: auto; padding: 8px; }
.cmdk__list li a { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center; padding: 12px 14px; border-radius: 12px; }
.cmdk__list li a b { font-weight: 700; }
.cmdk__list li a small { grid-column: 1; font-size: 12.5px; color: var(--mute); }
.cmdk__list li a i { grid-row: 1 / span 2; grid-column: 2; font-style: normal; opacity: 0; transition: opacity .2s, transform .3s var(--ease); transform: translateX(-6px); }
.cmdk__list li[aria-selected="true"] a { background: var(--ink); color: var(--paper); }
.cmdk__list li[aria-selected="true"] a small { color: rgba(243, 238, 232, .6); }
.cmdk__list li[aria-selected="true"] a i { opacity: 1; transform: none; color: var(--red-3); }
.cmdk__list mark { background: none; color: var(--red); }
.cmdk__list li[aria-selected="true"] mark { color: var(--red-3); }
.cmdk__empty { padding: 30px; text-align: center; color: var(--mute); }
.cmdk__foot { display: flex; gap: 20px; padding: 12px 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--mute); }
.cmdk__foot span { display: inline-flex; gap: 6px; align-items: center; }
.keys__panel { padding: 30px; }
.keys__title { font: 900 24px var(--f-disp); margin-bottom: 18px; }
.keys dl > div { display: grid; grid-template-columns: 150px 1fr; padding: 12px 0; border-top: 1px solid var(--line); }
.keys dd { color: var(--ink-2); }

.lightbox { position: fixed; inset: 0; z-index: 1700; background: rgba(14, 13, 13, .94); color: var(--paper); animation: fade .3s; }
.lightbox__stage { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; cursor: grab; touch-action: none; }
.lightbox__stage.is-drag { cursor: grabbing; }
.lightbox__stage img { max-width: 92vw; max-height: 88vh; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; border-radius: 8px; }
.lightbox__close { position: absolute; right: 22px; top: 22px; z-index: 2; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .1); font-size: 18px; transition: background .3s, transform .4s var(--ease); }
.lightbox__close:hover { background: var(--red); transform: rotate(90deg); }
.lightbox__hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-size: 12px; opacity: .6; }

.peek { position: fixed; left: 0; top: 0; z-index: 700; width: clamp(220px, 20vw, 320px); pointer-events: none; opacity: 0; transition: opacity .35s; will-change: transform; }
.peek.is-on { opacity: 1; }
.peek img { width: 100%; border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45); transform: scale(.85); transition: transform .5s var(--ease-out); }
.peek.is-on img { transform: scale(1); }
.peek.is-cut img { box-shadow: none; border-radius: 0; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .25)); }

.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .has-cursor, .has-cursor a, .has-cursor button, .has-cursor summary, .has-cursor label { cursor: none; }
  .has-cursor input, .has-cursor textarea { cursor: text; }
  .has-cursor .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 2500; pointer-events: none; }
  .cursor__dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--red); transition: transform .3s var(--ease), opacity .3s; }
  .cursor__ring {
    position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
    border: 1.5px solid #fff; mix-blend-mode: difference;
    display: grid; place-items: center;
    transition: width .45s var(--ease-out), height .45s var(--ease-out), margin .45s var(--ease-out), background .3s, border-color .3s, opacity .3s;
  }
  .cursor.is-hover .cursor__ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .cursor.is-hover .cursor__dot { transform: scale(0); }
  .cursor.is-label .cursor__ring { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--red); border-color: var(--red); mix-blend-mode: normal; }
  .cursor__label { font: 800 12.5px/1 var(--f-disp); color: #fff; letter-spacing: .06em; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .4s var(--ease-out); white-space: nowrap; }
  .cursor.is-label .cursor__label { opacity: 1; transform: none; }
  .cursor.is-text .cursor__ring { opacity: 0; }
  .cursor.is-down .cursor__ring { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
  .cursor.is-gone { opacity: 0; }
}

.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 850; pointer-events: none; }
.progress i { position: absolute; inset: 0; background: var(--red); transform-origin: left; transform: scaleX(var(--p, 0)); }

.sidenav { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 600; display: none; flex-direction: column; gap: 4px; }
@media (min-width: 1240px) and (hover: hover) { .js .sidenav { display: flex; } }
.sidenav button { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 12px; height: 22px; }
.sidenav button i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .3; transition: opacity .3s, transform .4s var(--ease), background .3s; }
.sidenav button span { font-size: 12px; font-weight: 600; white-space: nowrap; padding: 3px 10px; border-radius: 999px; background: var(--ink); color: var(--paper); opacity: 0; transform: translateX(8px); transition: opacity .3s, transform .4s var(--ease); pointer-events: none; }
.sidenav:hover button span { opacity: .9; transform: none; }
.sidenav button:hover span { background: var(--red); opacity: 1; }
.sidenav button.is-active i { opacity: 1; background: var(--red); transform: scale(1.6); }
.sidenav.is-dark { color: var(--paper); }

.kbd-hint { position: fixed; right: 22px; bottom: 22px; z-index: 600; display: none; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 999px; background: rgba(243, 238, 232, .85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px var(--line); font-size: 12px; font-weight: 600; opacity: .7; transition: opacity .3s, transform .4s var(--ease); }
.kbd-hint:hover { opacity: 1; transform: translateY(-2px); }
@media (min-width: 1100px) and (hover: hover) { .js .kbd-hint { display: inline-flex; } }

/* ------------------------------------------------------------ view transitions */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .45s var(--ease-io) both; }
::view-transition-new(root) { animation: vt-in .6s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-24px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(30px); } }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  .hs__head { flex-direction: column; align-items: flex-start; }
  .atlas__legend { display: none; }
  .bp { grid-template-columns: 1fr; height: auto; }
  .js .bx__stage, .bx__stage { height: auto; }
  .js .bp { height: auto; }
  .bp__cast { height: 380px; }
  /* tablet: panels stay absolutely stacked by the carousel, so the stage needs a real height */
  @media (min-width: 761px) {
    .js .bx__stage { height: 740px; }
    .js .bp { height: 100%; grid-template-rows: auto minmax(0, 1fr); }
    .js .bp__cast { height: auto; }
  }
  .bx__tabs { overflow-x: auto; scrollbar-width: none; }
  .bx__tabs::-webkit-scrollbar { display: none; }
  .bx__tab { flex: none; }
  .svx { grid-template-columns: 1fr 1fr; }
  .svx__side { grid-column: 1 / -1; }
  .svx__groups { grid-template-columns: 1fr 1fr; }
  .svx__g[aria-selected="true"]::after { display: none; }
  .journey__grid { grid-template-columns: 1fr; }
  .ai.hs .ai__title { white-space: normal; }
  .ai.hs .ai__top { grid-template-columns: 1fr; }
  .qr { grid-template-columns: 1fr 1fr; }
  .nav__links { display: none; }
  .nav { grid-template-columns: 1fr auto; }
  .nav__burger { display: inline-block; }
  .nav__search span, .nav__search kbd { display: none; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { padding-top: 4vh; }
  .hero__stage { height: clamp(420px, 70vw, 640px); }
  .hero__stats { grid-template-columns: repeat(3, 1fr); }
  .hero__stats .stat:nth-child(4) { border-left: 0; padding-left: 0; }
  .hero__stats .stat:nth-child(n+4) { border-top: 1px solid var(--line); }
  .ai__top, .fp, .faqsec__grid, .steps__grid, .chero__grid, .brief__grid, .footer__top { grid-template-columns: 1fr; }
  .faqsec .sec-head, .steps__grid > div, .brief__out { position: static; }
  .otiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .matcher { grid-template-columns: 1fr; }
  .matcher__side { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .roster__head { grid-template-columns: 1fr; }
  .team__grid, .honors__grid, .charity__grid, .thanks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccard, .ccard--wide { grid-column: span 1; }
  .cwall { grid-template-columns: 1fr; }
  .pillar-list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --nav-h: 64px; }
  .hs { padding: 80px 0; }
  .fw-ava { display: none; }
  .bx__ctrl { display: none; }
  .bp { flex-basis: 86vw; }
  .bp__cast { height: 320px; }
  .bp__more { flex-wrap: wrap; }
  .crowd__m figcaption { display: none; }
  .svx { grid-template-columns: 1fr; }
  .svx__groups { grid-template-columns: 1fr; }
  .svx__hint, .svx__count { display: none; }
  .svx__g .flow { display: none; }
  .svx__view { display: none; }
  .js .svx__list { display: block; } .js .svx__list + .svx__list { margin-top: 24px; }
  .svx__row.is-active { padding-left: 4px; color: inherit; } .svx__row.is-active::before { transform: scaleX(0); }
  .atlas { height: auto; background: none; box-shadow: none; display: grid; gap: 18px; }
  .atlas__svg, .atlas__cartouche, .atlas__rose, .atlas__card, .atlas__legend { display: none; }
  .atlas__zone { display: block; }
  /* one line per category: 文旅目的地 TRAVEL ④ */
  .atlas__zlabel { position: static; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 15px; }
  .atlas__zlabel small { order: 2; margin: 0; font-size: 9px; letter-spacing: .2em; }
  .atlas__zlabel em { position: static; order: 3; margin-left: auto; padding: 1px 8px; }
  .atlas__pins { display: flex; flex-wrap: wrap; gap: 6px; }
  .pin { position: static; }
  .pin > a { translate: none; gap: 6px; border: 1px solid var(--line); padding: 4px 10px 4px 6px; }
  .pin__dot { width: 10px; height: 10px; box-shadow: none; }
  .pin--star .pin__dot::after { inset: -3px; }
  .pin__label { font-size: 13px; }
  .pin__card { display: none !important; }
  .impact.hs .otile__img { height: auto; aspect-ratio: 2.75; }
  .qr { grid-template-columns: 1fr; }
  .qr li { padding: 18px; }
  .footer__base { flex-direction: column; }
  .nav__cn { display: none; }
  .nav__cta { display: none; }
  .hero__title { font-size: clamp(36px, 11.5vw, 64px); }
  .hero__stage { height: 112vw; }
  .hcast--1 { left: -6%; height: calc(58% * var(--s, 1)); } .hcast--2 { right: -10%; height: calc(62% * var(--s, 1)); } .hcast--3 { left: 28%; height: 50%; }
  .hcast figcaption { font-size: 10px; } .hcast figcaption span { display: none; }
  .hero__note { display: none; }
  .hero__eyebrow { flex-wrap: wrap; gap: 8px 10px; font-size: 10.5px; letter-spacing: .14em; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
  .hero__stats .stat:nth-child(n) { padding: 16px 12px 14px 0; border-left: 0; border-top: 1px solid var(--line); }
  .hero__stats .stat:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
  .hero__stats .stat:first-child, .hero__stats .stat:nth-child(2) { border-top: 0; }
  .foreword__foot { grid-template-columns: 1fr; }
  .flow li + li { margin-left: 22px; } .flow li + li::before { width: 22px; }
  .otiles { grid-template-columns: 1fr; }
  .otile--wide { grid-column: auto; }
  .otile--wide .otile__body { grid-template-columns: auto 1fr; grid-template-areas: "no name" ". v1" ". l1" ". v2" ". l2" ". line"; }
  .otile--wide .otile__value--2 { margin-top: 10px; }
  .ai__stats { grid-template-columns: 1fr 1fr 1fr; }
  .ai__stats--light { grid-template-columns: 1fr 1fr; }
  .mrow { grid-template-columns: 40px minmax(0, 1fr) 70px; }
  .mrow__bar { display: none; }
  .mrow__ava { width: 40px; height: 40px; }
  .matcher__list { height: 400px; }
  .fp__lists > div { grid-template-columns: 1fr; gap: 6px; }
  .tl__ctrl { position: static; margin-bottom: 14px; }
  .clist { grid-template-columns: 1fr; }
  .clist > div { grid-template-columns: 1fr; gap: 4px; }
  .cta__btn { position: relative; right: auto; justify-self: end; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .ccr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
  .ccr-grid--big { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .ccr figcaption { grid-template-columns: 1fr; }
  .ctabs__search { min-width: 140px; }
  .sv { grid-template-columns: 1fr; }
  .sv:nth-of-type(even) .sv__media { order: 0; }
  .sv__feats, .gt { grid-template-columns: 1fr; }
  .phones ul { gap: 10px; }
  .phones li:nth-child(even) { margin-top: 24px; }
  .phone { border-width: 4px; border-radius: 22px; }
  .phone img { border-radius: 18px; }
  .cgrid { grid-template-columns: 1fr; }
  .cases__search { min-width: 100%; }
  .cases__bar { gap: 10px; padding: 10px 0; margin-bottom: 28px; }
  .fchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: calc(100% + 2 * var(--pad)); margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); }
  .fchips::-webkit-scrollbar { display: none; }
  .fchips > * { flex: none; }
  .cases__search { height: 40px; }
  .case__cols { grid-template-columns: 1fr; }
  .cnav { grid-template-columns: 1fr 1fr; }
  .cta__title { font-size: clamp(28px, 8.6vw, 40px); }
  .phero__title { font-size: clamp(34px, 10.4vw, 46px); }
  .cnav .cnav__all { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; text-align: center; }
  .ov, .ov2, .values { grid-template-columns: 1fr; }
  .ov > div + div, .values li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .mvv__grid { grid-template-columns: 1fr; }
  .team__grid { gap: 26px 12px; }
  .member__name { font-size: 18px; }
  .honors__grid { grid-template-columns: 1fr; gap: 20px; }
  .cwall__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bf__fields { grid-template-columns: 1fr; }
  .en__grid { grid-template-columns: 1fr; }
  .nf__inner { grid-template-columns: 1fr; }
  .nf__b { max-width: 220px; }
  .keys dl > div { grid-template-columns: 110px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .split-c { transform: none; }
}

/* ------------------------------------------------------------ subpages: compact
   达人资源 / 业务 / 案例 / Bloom AI / 关于：smaller type and tighter spacing everywhere;
   on desktop (≥1181 × ≥600) each block is sized against the viewport so it reads in one screen.
   Kept after "responsive" on purpose: tablet / phone overrides for these rules live at the end of this block. */
html:not([data-page="home"]) .sec-head { gap: 14px; margin-bottom: clamp(24px, 3.2vw, 44px); }
html:not([data-page="home"]) .sec-title { font-size: clamp(28px, 3.5vw, 58px); line-height: 1.1; }
html:not([data-page="home"]) .sec-lede { font-size: clamp(14px, 1vw, 16px); }
.crumbs { padding-top: calc(var(--nav-h) + 16px); }
.crumbs + .phero { padding-top: clamp(22px, 2.8vw, 40px); }
.phero { padding-bottom: clamp(36px, 4.2vw, 68px); }
.phero__title { font-size: clamp(36px, 5.2vw, 88px); margin: 16px 0 18px; }
.phero__lede { font-size: clamp(14px, 1.05vw, 16px); }
.crumbs + .phero--dark { padding-top: calc(var(--nav-h) + clamp(40px, 4.4vw, 76px)); }
.phero--dark .ai__stats { margin-top: clamp(26px, 3vw, 44px); }
.phero--dark .ai__foot { margin-top: 16px; }
html:not([data-page="home"]) .cta { padding: clamp(60px, 7vw, 116px) 0; }
html:not([data-page="home"]) .cta__title { font-size: clamp(30px, 4.3vw, 74px); }
html:not([data-page="home"]) .cta__btn { width: clamp(120px, 11vw, 180px); }
.note-block { padding: 24px 0 48px; }

.roster, .svsec, .pillars, .aidemo, .steps, .autos, .mvv, .team, .honors, .charity, .journey:not(.hs), .impact--page:not(.hs) { padding-block: clamp(52px, 6vw, 96px); }
.clients:not(.hs) { padding-top: clamp(52px, 6vw, 96px); }
[data-page="about"] .clients { padding-bottom: clamp(52px, 6vw, 96px); }
.about-ov { padding-bottom: clamp(52px, 6vw, 96px); }

/* creators */
.roster { scroll-margin-top: 56px; }
.roster__head { grid-template-columns: 96px minmax(0, .62fr) minmax(0, 1.38fr); margin-bottom: clamp(24px, 3vw, 40px); }
.roster__no { font-size: 48px; }
.roster__name { font-size: clamp(36px, 3.9vw, 66px); }
.roster__type { margin-top: 8px; }
.roster__copy { gap: 4px; font-size: 14px; line-height: 1.65; }
.roster__title { font-size: clamp(17px, 1.35vw, 22px); margin-bottom: 2px; }
.roster__scenes { font-size: 13px; }
.roster__more { margin: clamp(24px, 3vw, 40px) 0 12px; font-size: 17px; }
.ccr--big figcaption { grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; }
.ccr--big .ccr__name { grid-column: 1 / -1; }
.ccr--big .ccr__name, .ccr--big .ccr__fans b { font-size: clamp(17px, 1.3vw, 22px); }
.ccr__tag { font-size: 12px; }
/* "more" creators: compact chips (portrait thumb + name + fans) */
.ccr-grid:not(.ccr-grid--big) { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.ccr:not(.ccr--big) figure { grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 10px; padding: 5px 8px 5px 5px; border-radius: 14px; background: var(--stage); }
.ccr:not(.ccr--big) .ccr__stage { aspect-ratio: 1; border-radius: 10px; align-items: flex-start; }
.ccr:not(.ccr--big) .ccr__stage img { height: 150%; max-width: none; margin-top: 4%; object-position: 50% 0; transform-origin: 50% 20%; }
.ccr:not(.ccr--big) .ccr__name { font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ccr:not(.ccr--big) .ccr__fans { font-size: 11px; }
.ccr:not(.ccr--big) .ccr__fans b { font-size: 13px; }

/* services */
.svsec__head { gap: 14px; margin-bottom: clamp(20px, 2.4vw, 36px); }
.sv { gap: clamp(26px, 4vw, 70px); padding: clamp(36px, 4.4vw, 64px) 0; }
.sv__copy { gap: 12px; }
.sv__name { font-size: clamp(28px, 2.8vw, 46px); }
.sv__line { font-size: clamp(16px, 1.25vw, 20px); }
.sv__badge { padding: 6px 12px; font-size: 12.5px; }
.sv__desc { font-size: 15px; line-height: 1.7; }
.sv__facts { gap: 32px; padding: 6px 0; }
.sv__facts dd { font-size: clamp(32px, 3vw, 50px); }
.sv__cases { margin-top: 4px; }
.sv__cases a { padding: 9px 0; font-size: 14.5px; }
.sv__cases b { font-size: 15px; }
.sv__feats { gap: 16px; }
.sv__feats li { padding: 12px 0; gap: 4px; }
.sv__feats b { font-size: 16px; }
.sv__feats span { font-size: 13.5px; line-height: 1.6; }
.phones ul { padding: 10px 0; }
.phone { flex-basis: 170px; border-radius: 28px; border-width: 6px; }
.phone img { border-radius: 22px; }
.phones li:nth-child(even) { margin-top: 34px; }
.gt__item { gap: 6px; }
.gt__k { margin-top: 4px; }
.gt__item h4 { font-size: 18px; }
.gt__item p:last-child { font-size: 13.5px; line-height: 1.65; }

/* cases */
.cases { padding-bottom: clamp(48px, 6vw, 96px); }
.cases__bar { padding: 10px 0; margin-bottom: 26px; }
.fchip { padding: 7px 14px; font-size: 13.5px; }
.cases__search { height: 40px; }
.cgrid { gap: clamp(26px, 2.6vw, 40px) clamp(14px, 1.4vw, 22px); }
.ccard > a { gap: 12px; }
.ccard__body { gap: 4px; }
.ccard__cats { font-size: 11.5px; }
.ccard__title { font-size: clamp(17px, 1.35vw, 22px); }
.ccard__head { font-size: 13px; line-height: 1.6; }
.ccard__metric { margin-top: 4px; padding-top: 8px; gap: 8px; }
.ccard__metric b { font-size: clamp(20px, 1.6vw, 28px); }
.ccard__metric span { font-size: 11.5px; }
.impact--page .otiles { gap: clamp(20px, 2.6vw, 36px) clamp(18px, 2.2vw, 32px); }
.impact--page .otile { gap: 12px; }
.impact--page .otile__body { padding-top: 12px; }
.impact--page .otile__name { font-size: 18px; }
.impact--page .otile__value b { font-size: clamp(30px, 3vw, 52px); }
.impact--page .otile__line { font-size: 13px; }

/* Bloom AI */
.pillar { padding: 24px 24px 26px; gap: 10px; }
.pillar__no { font-size: 40px; }
.pillar h3 { font-size: 20px; }
.pillar p { font-size: 14.5px; line-height: 1.7; }
.step button { padding: 18px 0; }
.step__t { font-size: clamp(18px, 1.5vw, 23px); }
.step.is-open .step__body > p { padding-bottom: 20px; }
.step__body > p { font-size: 15px; }
.roadmap { margin-top: 26px; padding: 18px 22px; gap: 6px; font-size: 14.5px; }
.roadmap__k { font-size: 16px; }
.auto-list { margin-bottom: 28px; }
.auto { gap: 16px; }
.auto__body { gap: 8px; }
.auto h3 { font-size: clamp(22px, 2vw, 32px); }
.auto p { font-size: 14.5px; line-height: 1.7; }
.auto__metric b { font-size: clamp(34px, 3.2vw, 56px); }
.quote { margin-top: 28px; font-size: clamp(22px, 2.3vw, 38px); }

/* about */
.ov > div { padding: 20px 24px 22px 0; gap: 8px; }
.ov dd b { font-size: clamp(48px, 5vw, 90px); }
.ov2 { margin-top: clamp(24px, 3vw, 44px); }
.ov2 h3 { font-size: 19px; margin-bottom: 6px; }
.ov2 h3::before { height: 17px; }
.ov2 p { font-size: 14.5px; line-height: 1.7; }
.mvv__grid { gap: clamp(30px, 3.6vw, 56px) clamp(30px, 5vw, 90px); }
.mvv__item { gap: 14px; }
.mvv__big { font-size: clamp(26px, 2.8vw, 46px); }
.values li { gap: 10px; padding-top: 18px; font-size: clamp(22px, 2.2vw, 36px); }
.fp__lists > div { padding: 14px 0; grid-template-columns: 110px 1fr; gap: 14px; font-size: 14.5px; }
.fp__lists dt { font-size: 16px; }
.fp__lists strong { font-size: clamp(22px, 2vw, 32px); margin-bottom: 2px; }
.journey:not(.hs) .journey__sub { margin: clamp(28px, 3.4vw, 48px) 0 18px; font-size: clamp(20px, 1.9vw, 30px); }
.journey:not(.hs) .tl__ctrl { top: -60px; }
.journey:not(.hs) .tl__ctrl .round { width: 40px; height: 40px; font-size: 15px; }
.journey:not(.hs) .tl__track { grid-auto-columns: clamp(220px, 17vw, 280px); }
.journey:not(.hs) .tl__item { padding: 20px 24px 20px 0; }
.journey:not(.hs) .tl__item time { font-size: clamp(24px, 2vw, 34px); margin-bottom: 10px; }
.journey:not(.hs) .tl__item h3 { font-size: 18px; margin-bottom: 4px; }
.journey:not(.hs) .tl__item p { font-size: 14px; line-height: 1.65; }
.journey:not(.hs) .tl__bar { margin-top: 12px; }
.team__grid { gap: 22px clamp(12px, 1.2vw, 20px); }
.member { gap: 2px; }
.member__stage { margin-bottom: 8px; }
.member__name { font-size: 19px; }
.member__name span { font-size: 14px; }
.member__role { font-size: 13.5px; }
.member__duty { font-size: 13px; line-height: 1.6; text-wrap: pretty; }
.honors__grid { gap: 22px 24px; }
.honor { padding-top: 14px; }
.honor h3 { font-size: 17px; margin-bottom: 8px; }
.honor li { padding: 7px 0; font-size: 14px; }
.charity__grid img { aspect-ratio: 16 / 10; }
.charity__grid p { margin-top: 8px; font-size: 13.5px; }
.charity__h { margin: clamp(28px, 3.4vw, 44px) 0 14px; font-size: 19px; }
.thanks button { padding: 12px; }
.thanks img { max-height: 260px; }
.thanks p { margin-top: 6px; font-size: 12.5px; }
.cwall { gap: 26px clamp(20px, 2.4vw, 40px); margin-bottom: 36px; }
.cwall__group h3 { font-size: 16px; margin-bottom: 10px; }
.cwall__grid { gap: 6px; }
.cwall__grid li { border-radius: 8px; }
.clist { margin-top: 10px; }
.clist > div { padding: 12px 0; grid-template-columns: 96px 1fr; }
.clist dt { font-size: 15px; }
.clist dd { font-size: 13px; line-height: 1.7; }

/* desktop: one block = one screen */
@media (min-width: 1181px) and (min-height: 600px) {
  /* section heading: title left, lede right */
  html:not([data-page="home"]) .sec-head:has(.sec-lede) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 5vw; align-items: end; max-width: none; }
  html:not([data-page="home"]) .sec-head:has(.sec-lede) > .kicker { grid-column: 1; }
  html:not([data-page="home"]) .sec-head:has(.sec-lede) > .sec-title { grid-column: 1; }
  html:not([data-page="home"]) .sec-head:has(.sec-lede) > .sec-lede { grid-column: 2; grid-row: 2; max-width: 34em; }
  html:not([data-page="home"]) :is(.steps, .honors) .sec-head:has(.sec-lede) { grid-template-columns: 1fr; }
  html:not([data-page="home"]) :is(.steps, .honors) .sec-head:has(.sec-lede) > .sec-lede { grid-column: 1; grid-row: auto; }
  html:not([data-page="home"]) .sec-title { font-size: clamp(30px, min(3.4vw, 6.4vh), 58px); }
  .phero__title { font-size: clamp(40px, min(5.2vw, 9.6vh), 88px); }
  .phero--dark .phero__title { font-size: clamp(36px, min(4.4vw, 8vh), 76px); }

  /* creators: head, six portraits, the rest as chips */
  .roster { padding-block: clamp(30px, 4.4vh, 56px); }
  .ctabs__in { padding: 7px 0; }
  .ctab { padding: 8px 16px; }
  .ctabs__search { height: 38px; }
  .ccr-grid--big { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.1vw, 20px); }
  .roster__head { grid-template-columns: 96px max-content minmax(0, 1fr); column-gap: clamp(30px, 3.4vw, 60px); }
  .roster__copy { grid-template-columns: max-content minmax(0, 1fr); column-gap: 28px; }
  .roster__copy > :not(.roster__scenes) { grid-column: 1 / -1; }
  .ccr--big .ccr__stage { aspect-ratio: auto; height: clamp(150px, calc(100svh - 640px), 420px); }

  /* services: header in two columns, every service one screen */
  .svsec { padding-block: clamp(40px, 6vh, 80px) clamp(20px, 3vh, 40px); }
  .svsec__head { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); column-gap: 5vw; align-items: end; }
  .svsec__head > .kicker, .svsec__head > .sec-title { grid-column: 1; }
  .svsec__head > .sec-title { grid-row: 2 / span 2; }
  .svsec__head > .sec-lede { grid-column: 2; grid-row: 2; }
  .svsec__head > .flow { grid-column: 2; grid-row: 3; margin-top: 0; }
  .sv { padding-block: clamp(28px, 4.4vh, 56px); }
  .sv__media:not(.sv__media--strip) { aspect-ratio: auto; height: clamp(300px, calc(100svh - 280px), 520px); }
  .sv__media--strip img { max-height: calc(100svh - 160px); width: auto; margin-inline: auto; border-radius: var(--r-lg); }
  .sv__media--strip { border-radius: 0; }
  #tanchi-mall, #golden-tiger { align-items: start; }
  #tanchi-mall .sv__copy, #golden-tiger .sv__copy { grid-column: 1; grid-row: 1; }
  #tanchi-mall .phones { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  #tanchi-mall .sv__feats { grid-column: 1; grid-row: 2; }
  #tanchi-mall .flow--dark { grid-column: 1; grid-row: 3; margin-top: 0; }
  .phone { flex-basis: 150px; }
  #golden-tiger .gt { grid-column: 2; grid-row: 1; align-self: center; }
  #tiehu .sv__media { height: clamp(260px, 46vh, 420px); }

  /* cases: 18 cards = 6 × 3 */
  .cgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(20px, 3vh, 32px) clamp(12px, 1.1vw, 20px); }
  .ccard, .ccard--wide { grid-column: span 1; }
  .ccard__img, .ccard--wide .ccard__img { aspect-ratio: auto; height: clamp(120px, calc((100svh - 450px) / 3), 230px); }
  .ccard__head { display: none; }
  .ccard > a { gap: 10px; }
  .ccard__title { font-size: clamp(15px, 1.05vw, 18px); }
  .ccard__metric b { font-size: clamp(18px, 1.3vw, 23px); }
  .ccard__metric span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .impact--page .otile__img { aspect-ratio: auto; height: clamp(70px, 10.5vh, 140px); }
  .impact--page .otiles { gap: clamp(18px, 3vh, 36px) clamp(18px, 2.2vw, 32px); }
  .impact--page .otile__line { font-size: 12px; line-height: 1.6; }
  .impact--page:not(.hs) { padding-block: clamp(40px, 7vh, 90px); }
  .impact--page .otile__value b { font-size: clamp(28px, min(2.8vw, 5.4vh), 48px); }
  .impact--page .otile--wide .otile__img img { height: 100%; aspect-ratio: auto; }

  /* Bloom AI */
  .pillars, .aidemo, .steps, .autos { padding-block: clamp(40px, 7vh, 90px); }
  .aidemo .matcher__list { height: clamp(240px, calc(100svh - 430px), 470px); }
  .aidemo .matcher__side { padding: 20px 24px; gap: 8px; }
  .aidemo .matcher__head { padding: 12px 28px; }
  .aidemo .matcher__note { padding: 10px 28px; }
  .aidemo .matcher__count b { font-size: 32px; }
  .steps__grid > div { top: calc(var(--nav-h) + 20px); }
  .auto__img { aspect-ratio: auto; height: clamp(200px, calc(100svh - 590px), 420px); }
  .autos > .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 5vw; }
  .autos .sec-head, .autos .auto-list { grid-column: 1 / -1; }
  .autos .quote { margin: 0; justify-self: end; max-width: none; text-align: right; }

  /* about */
  [data-page="about"] .phero { padding-bottom: clamp(26px, 3.4vh, 44px); }
  .about-ov { padding-bottom: clamp(40px, 7vh, 90px); }
  .ov dd b { font-size: clamp(48px, min(5vw, 9vh), 90px); }
  .mvv, .team, .honors, .charity, .journey:not(.hs), .clients:not(.hs) { padding-block: clamp(36px, 6vh, 80px); }
  /* journey: map left; heading, places and timeline right */
  .journey:not(.hs) > .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(30px, 4vw, 70px); align-items: start; }
  .journey:not(.hs) .fp { display: contents; }
  .journey:not(.hs) .fp__map { grid-column: 1; grid-row: 1 / span 4; align-self: center; }
  .journey:not(.hs) .fp__svg { max-height: calc(100svh - 150px); }
  .journey:not(.hs) .sec-head { grid-column: 2; grid-row: 1; margin-bottom: 18px; }
  .journey:not(.hs) .fp__lists { grid-column: 2; grid-row: 2; }
  .journey:not(.hs) .journey__sub { grid-column: 2; grid-row: 3; margin-top: 26px; }
  .journey:not(.hs) .tl { grid-column: 2; grid-row: 4; }
  .journey:not(.hs) .sec-head:has(.sec-lede) { grid-template-columns: 1fr; }
  .journey:not(.hs) .sec-head:has(.sec-lede) > .sec-lede { grid-column: 1; grid-row: auto; }
  /* team: all eight in one row */
  .team__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  /* portraits are ~square: let narrow cards crop the shoulders rather than shrink the faces */
  .member__stage { aspect-ratio: auto; height: clamp(190px, calc(100svh - 610px), 300px); }
  .member__stage img { height: 98%; max-width: none; }
  /* honors: photo left, lists right */
  .honors > .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(30px, 4vw, 64px); }
  .honors .sec-head { grid-column: 2; grid-row: 1; }
  .honors__img { grid-column: 1; grid-row: 1 / span 2; align-self: center; margin: 0; }
  .honors__grid { grid-column: 2; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* charity: photos and letters each one row */
  .charity__grid img { aspect-ratio: auto; height: clamp(150px, calc((100svh - 400px) / 2), 260px); }
  .thanks img { max-height: clamp(150px, calc((100svh - 470px) / 2), 280px); }
  /* clients: 8 industries as 4 × 2 */
  [data-page="about"] .cwall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  .ccr-grid:not(.ccr-grid--big) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .team__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .charity__grid, .thanks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cwall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roster__head { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 760px) {
  html:not([data-page="home"]) .sec-title { font-size: clamp(26px, 7.6vw, 36px); }
  .phero__title { font-size: clamp(32px, 9.6vw, 44px); }
  html:not([data-page="home"]) .cta__title { font-size: clamp(26px, 8vw, 38px); }
  .roster, .svsec, .pillars, .aidemo, .steps, .autos, .mvv, .team, .honors, .charity, .journey:not(.hs), .impact--page:not(.hs) { padding-block: 48px; }
  .roster__no { font-size: 36px; }
  .roster__name { font-size: clamp(30px, 9vw, 40px); }
  .ccr-grid--big { gap: 14px 10px; }
  .ccr-grid:not(.ccr-grid--big) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ccr:not(.ccr--big) figure { grid-template-columns: 46px minmax(0, 1fr); gap: 8px; }
  .sv { padding: 32px 0; gap: 20px; }
  .sv__name { font-size: 28px; }
  .phone { flex-basis: 30%; }
  .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .ccard__head { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 12px; }
  .ccard__title { font-size: 15px; }
  .ccard__metric { flex-wrap: wrap; gap: 2px 6px; }
  .ccard__metric b { font-size: 19px; }
  .pillar { padding: 20px; }
  .auto__img { aspect-ratio: 16 / 10; }
  .ov > div { padding: 16px 0; }
  .ov dd b { font-size: 48px; }
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .member__stage { aspect-ratio: 4 / 4; }
  .charity__grid, .thanks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .thanks img { max-height: 200px; }
  .cwall { grid-template-columns: 1fr; }
  .clist > div { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ creator profiles (/creators/<slug>/) */
.prof { padding: calc(var(--nav-h) + clamp(16px, 2.4vw, 36px)) 0 clamp(40px, 5vw, 80px); }
.crumbs + .prof { padding-top: clamp(16px, 2vw, 28px); }
.prof__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 4.4vw, 80px); align-items: start; }
.prof__stage { position: sticky; top: calc(var(--nav-h) + 20px); aspect-ratio: 4 / 4.6; border-radius: var(--r-lg); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.prof--red .prof__stage { background: radial-gradient(90% 70% at 50% 100%, #ef4a3f, var(--red)); }
.prof--ink .prof__stage { background: radial-gradient(90% 70% at 50% 100%, #3a1d19, #1f1c1b); }
.prof--white .prof__stage, .prof--paper .prof__stage { background: radial-gradient(90% 70% at 50% 100%, #f1cfc8, var(--paper-3)); }
.prof__stage img { height: 94%; width: auto; max-width: 108%; object-fit: contain; object-position: 50% 100%; }
.prof__copy { display: grid; gap: 14px; align-content: start; min-width: 0; }
.prof__copy .kicker a:hover { color: var(--red); }
.prof__name { font: 900 clamp(38px, 4.6vw, 76px)/1.05 var(--f-disp); letter-spacing: -.03em; }
.prof__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; }
.prof__fans { font-size: 13px; color: var(--mute); }
.prof__fans b { font: 800 clamp(26px, 2.4vw, 38px)/1 var(--f-num); color: var(--red); letter-spacing: -.02em; margin-right: 6px; }
.prof__tag { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.prof__intro { font: 900 clamp(17px, 1.4vw, 22px)/1.5 var(--f-disp); color: var(--red); }
.prof__bio { display: grid; gap: 10px; color: var(--ink-2); font-size: 15.5px; line-height: 1.8; max-width: 44em; }
.prof__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px clamp(20px, 3vw, 44px); margin-top: 6px; }
.prof__cols:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
.prof__h { font: 600 12px var(--f-num); letter-spacing: .14em; color: var(--mute); margin-bottom: 8px; }
.prof__facts > div { display: grid; grid-template-columns: 76px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.prof__facts dt { color: var(--mute); }
.prof__works li { padding: 8px 0 8px 16px; border-top: 1px solid var(--line); font-size: 14px; position: relative; }
.prof__works li::before { content: ""; position: absolute; left: 0; top: 17px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.prof__fit li { font-size: 13px; }
.prof__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.prof__note { font-size: 12px; color: var(--mute); }
.prof__sub { font: 900 clamp(22px, 2vw, 30px)/1.3 var(--f-disp); margin-bottom: 20px; }
.pcases { padding: clamp(30px, 4vw, 60px) 0; background: var(--paper-2); }
.cgrid--prof { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 18px; }
.cgrid--prof .ccard, .cgrid--prof .ccard--wide { grid-column: span 1; }
.cgrid--prof .ccard__img { aspect-ratio: 4 / 3; height: auto; }
.pmore { padding: clamp(36px, 4.4vw, 70px) 0 0; }
.pmates { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.pmate { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px 12px 6px 6px; border-radius: 14px; background: var(--paper-2); transition: background .3s, color .3s; }
.pmate:hover { background: var(--ink); color: var(--paper); }
.pmate__ava { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--paper-3); }
.pmate__ava img { width: 100%; height: 150%; object-fit: cover; object-position: 50% 0; }
.pmate b { display: block; font: 900 14.5px/1.3 var(--f-disp); }
.pmate small { font-size: 12px; color: var(--mute); }
.pmate:hover small { color: rgba(243, 238, 232, .6); }
.pnav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; margin-top: clamp(30px, 4vw, 56px); padding: 28px 0 clamp(50px, 6vw, 90px); border-top: 1px solid var(--line); }
.pnav a { display: grid; gap: 4px; }
.pnav a[rel="next"] { text-align: right; }
.pnav small { font-size: 12px; color: var(--mute); }
.pnav b { font: 900 clamp(18px, 1.6vw, 24px)/1.3 var(--f-disp); transition: color .3s; }
.pnav a:hover b { color: var(--red); }
.pnav__all { padding: 10px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 700; font-size: 14px; }
.pnav__all:hover { background: var(--ink); color: var(--paper); }

/* creators page: cards link to profiles; hover shows the intro */
.ccr__link { position: relative; display: block; color: inherit; }
.ccr__pop { position: absolute; z-index: 5; display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .35); font-size: 13px; line-height: 1.6; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s, transform .4s var(--ease-out), visibility .3s; pointer-events: none; }
.ccr__pop-go { font-weight: 700; color: var(--red); }
.ccr--big .ccr__pop { left: 10px; right: 10px; bottom: 10px; }
.ccr:not(.ccr--big) .ccr__pop { left: 0; bottom: calc(100% + 8px); width: max(100%, 260px); }
.ccr-grid:not(.ccr-grid--big) > .ccr:nth-child(8n) .ccr__pop { left: auto; right: 0; }
@media (max-width: 1180px) {
  .ccr-grid:not(.ccr-grid--big) > .ccr:nth-child(8n) .ccr__pop { left: 0; right: auto; }
  .ccr-grid:not(.ccr-grid--big) > .ccr:nth-child(4n) .ccr__pop { left: auto; right: 0; }
}
.ccr__link:focus-visible .ccr__pop { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .ccr__link:hover .ccr__pop { opacity: 1; visibility: visible; transform: none; }
}
.ccr--prof:hover .ccr__name, .ccr--prof:focus-within .ccr__name { color: var(--red); }
.roster--red .ccr--prof:hover .ccr__name { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.ccr--prof { position: relative; }
.ccr--prof:hover { z-index: 6; }

/* home: linked group-photo members and hero portraits */
.crowd__a { display: block; height: 100%; color: inherit; outline: none; }
.crowd__m:focus-within { z-index: 9; }
.crowd__m:focus-within img { transform: scale(1.05) translateY(-6px); }
.crowd__m:focus-within figcaption { opacity: 1; transform: translate(-50%, 0); }
.crowd:has(.crowd__m:focus-within) .crowd__m:not(:focus-within):not(:hover) img { filter: grayscale(.85) brightness(.9); }
.cast__more { margin-top: 2px; font-size: 11.5px; font-weight: 700; color: var(--red); }
.hcast__a { display: block; height: 100%; color: inherit; }

@media (min-width: 1181px) and (min-height: 600px) {
  .prof__stage { height: min(calc(100svh - var(--nav-h) - 60px), 720px); aspect-ratio: auto; }
}
@media (max-width: 1180px) {
  .prof__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .cgrid--prof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .prof__grid { grid-template-columns: 1fr; }
  .prof__stage { position: relative; top: 0; aspect-ratio: 1 / 1; max-height: 70vh; }
  .prof__cols { grid-template-columns: 1fr; }
  .cgrid--prof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pmates { grid-template-columns: 1fr 1fr; }
  .pmate { grid-template-columns: 40px minmax(0, 1fr); gap: 8px; }
  .pmate__ava { width: 40px; height: 40px; }
  .pnav { grid-template-columns: 1fr 1fr; }
  .pnav__all { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; text-align: center; }
  .ccr__pop { display: none; }
}

/* ------------------------------------------------------------ phone compaction (2026-10-26)
   Tighter rhythm on phones: smaller section padding, swipe rows instead of tall stacks. */
@media (hover: none) { .footer__keys { display: none; } }
@media (max-width: 760px) {
  .hs { padding: 56px 0; }
  .sec-head { gap: 14px; margin-bottom: 28px; }
  .roster, .svsec, .pillars, .aidemo, .steps, .autos, .mvv, .team, .honors, .charity, .journey:not(.hs), .impact--page:not(.hs) { padding-block: 40px; }
  .clients:not(.hs) { padding-top: 40px; }
  [data-page="about"] .clients, .about-ov { padding-bottom: 40px; }
  .reach { padding-top: 48px; }

  /* services: both group lists are already shown, the two switch cards only repeat them */
  .svx__groups { display: none; }
  .svx__row { grid-template-columns: 26px minmax(0, 1fr) 34px; column-gap: 10px; padding: 11px 2px; }
  .svx__row .svc-row__go { width: 34px; height: 34px; }

  /* case overview: one swipe row instead of five stacked tiles */
  .otiles { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 4px; scroll-padding-inline: var(--pad); }
  .otiles::-webkit-scrollbar { display: none; }
  .otile { flex: 0 0 80%; scroll-snap-align: start; align-content: start; }
  .impact.hs .otile__value b, .otile__value b { font-size: 34px; }

  .cta { padding: 64px 0; }
  html:not([data-page="home"]) .cta { padding: 48px 0; }
  .cta__inner { gap: 18px; }
  .cta__btn, html:not([data-page="home"]) .cta__btn { width: 112px; font-size: 15px; gap: 6px; }
  .cta__btn .ico { width: 24px; height: 24px; }

  .cnav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cnav a, .cnav span { min-width: 0; }  /* lets site.js soften a too-long title clause */
  .cnav span { font-size: 18px; }

  /* Bloom AI matcher */
  .matcher__side { padding: 18px; gap: 8px; }
  .mchips { gap: 6px; }
  .mchip { padding: 6px 12px; font-size: 12.5px; }
  .matcher__search input { height: 40px; margin-top: 4px; }
  .matcher__count { padding-top: 10px; }
  .matcher__count b { font-size: 32px; }
  .matcher__list { height: 300px; }
  .matcher__head { padding: 12px 20px; }

  /* services page: the three event photos swipe too */
  .gt { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); scroll-padding-inline: var(--pad); }
  .gt::-webkit-scrollbar { display: none; }
  .gt__item { flex: 0 0 80%; scroll-snap-align: start; }

  /* creators: featured cards three across */
  .ccr-grid--big { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
  .ccr--big .ccr__stage { border-radius: 12px; }
  .ccr--big figure { gap: 6px; }
  .ccr--big figcaption { grid-template-columns: 1fr; gap: 0; }
  .ccr--big .ccr__name { font-size: 15px; }
  .ccr--big .ccr__fans b { font-size: 14px; }
  .ccr--big .ccr__fans { font-size: 11px; }
  .ccr--big .ccr__tag { font-size: 11px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

  /* about: client logo wall five across */
  .cwall { gap: 28px; margin-bottom: 36px; }
  .cwall__group h3 { font-size: 17px; margin-bottom: 10px; }
  .cwall__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .cwall__grid li { border-radius: 7px; }

  /* contact: smaller option pills, QR codes side by side, tighter office list */
  .brief { padding-bottom: 48px; }
  .bf__group { gap: 8px; }
  .bf__group legend { font-size: 17px; margin-bottom: 8px; }
  .bf__opts { gap: 7px; }
  .bf__opt span { padding: 7px 13px; font-size: 13.5px; }
  .bf__fields { gap: 12px; }
  .bf__fields input, .bf__fields textarea { padding: 11px 14px; }
  .qr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .qr li { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; border-radius: var(--r-md); text-align: center; }
  .qr img { width: 100%; }
  .qr b { font-size: 15px; }
  .qr span { font-size: 11.5px; line-height: 1.45; }
  .qr__mail figure { width: 100%; font-size: 52px; }
  .qr__mail a { font-size: 13px; }
  .reach { padding-bottom: 48px; }

  .footer { padding-top: 52px; }
  .footer__claim { font-size: 24px; margin-bottom: 22px; }
  .footer__badges { margin-bottom: 20px; }
  .footer__badges a { font-size: 12px; padding: 3px 10px; }
  .footer__act { gap: 16px; }
  .footer__top { gap: 32px; }
  .footer__cols { gap: 22px 16px; }
  .footer__h { margin-bottom: 8px; }
  .footer__col li { padding: 3px 0; font-size: 14px; }
  .footer__mark { margin-top: 36px; }
  .footer__base { gap: 8px; padding: 18px 0 24px; margin-top: 12px; }
}