/* TAS Agency · site layer. Tokens first; the engine's own classes are not restyled. */
:root {
  --sc-canvas:     #0B0A08;
  --sc-surface:    #15130F;
  --sc-ink:        #F4EFE6;
  --sc-ink-soft:   #A9A192;
  --sc-accent:     #E4C46A;
  --sc-accent-ink: #15110A;
  --sc-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sc-font-text:    "Geist", "Helvetica Neue", Arial, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;
  --sc-shadow-color: 36 40% 2%;

  --gold-soft: color-mix(in oklab, var(--sc-accent) 14%, transparent);
  --r: 14px;
  --bar-h: 72px;
}

html { scroll-padding-top: calc(var(--bar-h) + 12px); }
[hidden] { display: none !important; }
/* Lenis owns wheel smoothing when it runs; native smooth-scroll would fight it. */
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
html.lenis.lenis-stopped { overflow: hidden; }
body { font-weight: 400; letter-spacing: 0; }
html.is-switching body { opacity: 0; transition: opacity 180ms var(--sc-ease-out); }

/* Display face: Archivo, widened. Light-on-dark gets one step more weight. */
.hero__title, .h2, .h3, .tension__line, .filter__title, .filter__step, .sys__title,
.book__title, .fact__num, .arc__val, .work__end p {
  font-family: var(--sc-font-display);
  font-stretch: 112%;
  font-variation-settings: "wdth" 112;
  text-wrap: balance;
  margin: 0;
}
.h2 { font-size: var(--sc-t-2xl); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; }
.h3 { font-size: var(--sc-t-xl); font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; }
.body { color: var(--sc-ink-soft); max-width: 58ch; text-wrap: pretty; margin: 0; line-height: 1.65; }
.eyebrow {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sc-accent); margin: 0;
}

/* ------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  height: 3.1rem; padding: 0 1.4rem; border-radius: 10px;
  font-family: var(--sc-font-text); font-weight: 600; font-size: 0.98rem; letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer; border: 1px solid transparent;
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out),
              border-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--gold { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: var(--sc-e2), inset 0 1px 0 rgb(255 255 255 / 0.35); }
.btn--ghost { color: var(--sc-ink); border-color: var(--sc-hairline-strong); background: color-mix(in oklab, var(--sc-ink) 3%, transparent); }
.btn--sm { height: 2.5rem; padding: 0 1rem; font-size: 0.9rem; }
.btn--lg { height: 3.5rem; padding: 0 1.8rem; font-size: 1.02rem; }
.btn:disabled { opacity: 0.55; cursor: progress; }
@media (hover: hover) and (pointer: fine) {
  .btn--gold:hover { background: #EDD186; }
  .btn--ghost:hover { border-color: color-mix(in oklab, var(--sc-accent) 60%, transparent); color: var(--sc-accent); }
}
.link-btn {
  background: none; border: 0; padding: 0.4rem 0; cursor: pointer;
  color: var(--sc-accent); font-weight: 600; font-size: 0.95rem;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
  transition: color 160ms var(--sc-ease-out);
}
.link-btn:hover { color: #EDD186; }

/* ----------------------------------------------------------------- bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); display: flex; align-items: center; gap: var(--sc-6);
  padding-top: env(safe-area-inset-top, 0px);
  padding-inline: max(var(--sc-gutter), env(safe-area-inset-left, 0px)) max(var(--sc-gutter), env(safe-area-inset-right, 0px));
  transition: background-color 240ms var(--sc-ease-out), border-color 240ms var(--sc-ease-out);
  border-bottom: 1px solid transparent;
}
.bar.is-scrolled {
  background: color-mix(in oklab, var(--sc-canvas) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--sc-hairline);
}
.bar__mark img { height: 24px; width: auto; }
.bar__nav { display: flex; gap: var(--sc-5); margin-left: var(--sc-4); }
.bar__nav a { color: var(--sc-ink-soft); text-decoration: none; font-size: 0.92rem; font-weight: 500; transition: color 160ms var(--sc-ease-out); }
.bar__nav a:hover { color: var(--sc-ink); }
.bar__end { margin-left: auto; display: flex; align-items: center; gap: var(--sc-4); }
.lang { display: inline-flex; border: 1px solid var(--sc-hairline-strong); border-radius: 10px; padding: 3px; }
.lang__btn {
  background: none; border: 0; cursor: pointer; padding: 0.3rem 0.55rem; border-radius: 7px;
  font-family: var(--sc-font-mono); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--sc-ink-soft);
  transition: color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.lang__btn[aria-pressed="true"] { background: color-mix(in oklab, var(--sc-accent) 16%, transparent); color: var(--sc-accent); }
.lang__btn:hover { color: var(--sc-ink); }

/* ---------------------------------------------------------- mobile menu -- */
.bar__menu {
  display: none; position: relative; width: 42px; height: 40px; padding: 0; cursor: pointer;
  border-radius: 10px; border: 1px solid var(--sc-hairline-strong); background: none;
}
.bar__menu span {
  position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--sc-ink); border-radius: 2px;
  transition: transform 220ms var(--sc-ease-out);
}
.bar__menu span:first-child { top: 15px; }
.bar__menu span:last-child { top: 23px; }
.bar__menu[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.bar__menu[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.mnav {
  position: fixed; z-index: calc(var(--sc-z-chrome) - 1); inset: 0 0 auto 0;
  padding: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 0.5rem) max(var(--sc-gutter), env(safe-area-inset-right, 0px)) 1.6rem max(var(--sc-gutter), env(safe-area-inset-left, 0px));
  background: var(--sc-canvas); border-bottom: 1px solid var(--sc-hairline);
  box-shadow: var(--sc-e3);
  animation: mnav-in 260ms var(--sc-ease-out);
}
@keyframes mnav-in { from { opacity: 0; transform: translateY(-12px); } }
.mnav__links { display: flex; flex-direction: column; }
.mnav__links a {
  padding: 0.85rem 0; border-bottom: 1px solid var(--sc-hairline); text-decoration: none; color: var(--sc-ink);
  font-family: var(--sc-font-display); font-stretch: 110%; font-variation-settings: "wdth" 110;
  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em;
}
.mnav__links a:active { color: var(--sc-accent); }
.mnav__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.3rem; flex-wrap: wrap; }
.mnav__ig { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; }
.mnav__ig a { color: var(--sc-accent); text-decoration: none; font-size: var(--sc-t-sm); }

/* ---------------------------------------------------------------- hero -- */
.hero {
  position: relative; min-height: 100svh; overflow: clip;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center;
  padding: calc(var(--bar-h) + 3rem) var(--sc-gutter) 4rem;
  isolation: isolate;
}
.hero__far {
  position: absolute; inset: -10% -10% -20%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(42rem 30rem at 72% 46%, color-mix(in oklab, var(--sc-accent) 20%, transparent), transparent 70%),
    radial-gradient(70rem 40rem at 20% 110%, color-mix(in oklab, #6b4f1c 22%, transparent), transparent 70%);
  will-change: transform;
}
.hero__dust { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.hero__copy { position: relative; z-index: 4; max-width: 44rem; }
.hero__title {
  font-size: clamp(2.9rem, 1.3rem + 5vw, 6.4rem);
  font-weight: 800; line-height: 0.94; letter-spacing: -0.045em;
  max-width: 11ch;
}
.hero__sub { margin: 1.6rem 0 0; max-width: 34rem; color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.5; text-wrap: pretty; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.2rem; }

.hero__copy > * { opacity: 0; transform: translateY(16px); transition: opacity 760ms var(--sc-ease-out), transform 760ms var(--sc-ease-out); }
.is-loaded .hero__copy > * { opacity: 1; transform: none; }
.is-loaded .hero__copy > :nth-child(2) { transition-delay: 90ms; }
.is-loaded .hero__copy > :nth-child(3) { transition-delay: 170ms; }

.hero__stage { position: relative; z-index: 2; height: min(78svh, 46rem); perspective: 1400px; }
.phone {
  --w: clamp(200px, 19.5vw, 330px);
  position: absolute; left: 50%; top: 50%; width: var(--w); aspect-ratio: 9 / 16;
  margin: calc(var(--w) * -0.889) 0 0 calc(var(--w) * -0.5);
  padding: 7px; border-radius: 30px;
  background: linear-gradient(160deg, #26221b, #0e0d0b 60%);
  box-shadow: var(--sc-e3), inset 0 1px 0 rgb(255 255 255 / 0.08), 0 0 0 1px rgb(255 255 255 / 0.05);
  will-change: transform; transform-style: preserve-3d;
}
.phone video { width: 100%; height: 100%; object-fit: cover; border-radius: 23px; background: #0e0d0b; }
.phone--back { --w: clamp(160px, 15vw, 255px); filter: brightness(0.62) saturate(0.9); }
.phone--l { translate: -78% 6%; rotate: -9deg; }
.phone--r { translate: 78% 10%; rotate: 8deg; }
.phone--front { z-index: 2; }
.hero__floor {
  position: absolute; left: 10%; right: 10%; bottom: 2%; height: 18%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in oklab, var(--sc-accent) 18%, transparent), transparent 70%);
  filter: blur(18px);
}

/* --------------------------------------------------------------- trust -- */
.trust { padding-block: clamp(2.5rem, 5vw, 4rem); border-block: 1px solid var(--sc-hairline); background: color-mix(in oklab, var(--sc-surface) 55%, var(--sc-canvas)); }
.trust__row { display: flex; align-items: center; justify-content: space-between; gap: clamp(1.5rem, 4vw, 4rem); flex-wrap: wrap; }
.trust__label { margin: 0; max-width: 15rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.45; }
.trust__logo { width: auto; opacity: 0.88; }
.trust__logo--m2k { height: clamp(34px, 3.4vw, 48px); }
.trust__logo--ded { height: clamp(46px, 4.6vw, 66px); }
.trust__word { font-family: var(--sc-font-display); font-weight: 800; color: var(--sc-ink); opacity: 0.88; line-height: 1; letter-spacing: -0.01em; }
.trust__word small { display: block; font-size: 0.42em; letter-spacing: 0.38em; font-weight: 600; margin-top: 0.35em; color: var(--sc-ink-soft); }
.trust__word--dumbo { font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-stretch: 125%; font-variation-settings: "wdth" 125; letter-spacing: 0.02em; }
.trust__word--pt { font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 700; }

/* ----------------------------------------------------------- CTA bands -- */
.cta-band {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
  margin-top: clamp(1.5rem, 3vw, 2.5rem); padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.2rem, 2.4vw, 2rem);
  border-radius: var(--r); border: 1px solid color-mix(in oklab, var(--sc-accent) 28%, transparent);
  background: linear-gradient(100deg, color-mix(in oklab, var(--sc-accent) 9%, var(--sc-canvas)), var(--sc-canvas) 70%);
}
.cta-band__text {
  margin: 0; font-family: var(--sc-font-display); font-stretch: 108%; font-variation-settings: "wdth" 108;
  font-size: var(--sc-t-lg); font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; min-width: 0; flex: 1 1 18rem;
}

/* -------------------------------------------------------------- filter -- */
.filter__stage { background: radial-gradient(60rem 40rem at 72% 42%, color-mix(in oklab, var(--sc-accent) 6%, transparent), transparent 70%); }
.filter__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.filter__copy { position: absolute; z-index: 5; left: var(--sc-gutter); right: var(--sc-gutter); bottom: clamp(3rem, 12vh, 8rem); display: grid; }
.filter__copy > * { grid-area: 1 / 1; align-self: end; }
.filter__step { font-size: clamp(2.1rem, 1rem + 4vw, 5rem); font-weight: 750; line-height: 1; letter-spacing: -0.04em; max-width: 16ch; }
.filter__cta { margin-top: 1.6rem; }
.filter__title { font-size: clamp(2.3rem, 1rem + 4.6vw, 5.8rem); font-weight: 800; line-height: 0.96; letter-spacing: -0.045em; max-width: 14ch; }
.filter__title em { font-style: normal; color: var(--sc-accent); }
.filter__note { margin: 1.4rem 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-lg); max-width: 34ch; line-height: 1.45; }

/* -------------------------------------------------------------- system -- */
.system__head { max-width: 48rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.system__head .h2 { margin-top: 1rem; }
.system__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.4rem); }
.sys {
  grid-column: span 5; position: relative; overflow: hidden;
  padding: clamp(1.5rem, 2.6vw, 2.4rem); border-radius: var(--r);
  background: var(--sc-surface); border: 1px solid var(--sc-hairline);
  box-shadow: var(--sc-e1), var(--sc-edge);
}
.sys--main { grid-column: span 7; grid-row: span 2; display: flex; flex-direction: column; padding-bottom: 0; background: linear-gradient(170deg, color-mix(in oklab, var(--sc-accent) 9%, var(--sc-surface)), var(--sc-surface) 55%); border-color: color-mix(in oklab, var(--sc-accent) 22%, transparent); }
.sys__top { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.4rem; }
.sys__n { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; border: 1px solid var(--sc-hairline-strong); font-family: var(--sc-font-mono); font-size: 0.8rem; color: var(--sc-ink-soft); }
.sys--main .sys__n { border-color: color-mix(in oklab, var(--sc-accent) 45%, transparent); color: var(--sc-accent); }
.sys__tag { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-accent); }
.sys__title { font-size: var(--sc-t-xl); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }
.sys--main .sys__title { font-size: clamp(2.4rem, 1.4rem + 3vw, 4.2rem); letter-spacing: -0.04em; }
.sys__text { margin: 0.9rem 0 0; color: var(--sc-ink-soft); line-height: 1.62; max-width: 52ch; text-wrap: pretty; }
.sys__list { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 0.6rem; }
.sys__list li { position: relative; padding-left: 1.4rem; color: var(--sc-ink); font-size: var(--sc-t-sm); }
.sys__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 2px; background: var(--sc-accent); }
.sys__graph { margin-top: auto; width: calc(100% + 2 * clamp(1.5rem, 2.6vw, 2.4rem)); margin-inline: calc(-1 * clamp(1.5rem, 2.6vw, 2.4rem)); height: 120px; padding-top: 1.5rem; overflow: visible; }
.sys__graph-line { fill: none; stroke: var(--sc-accent); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1600ms var(--sc-ease-out) 300ms; }
.sys.sc-in .sys__graph-line { stroke-dashoffset: 0; }

/* ---------------------------------------------------------------- work -- */
.work__stage { display: flex; align-items: center; }
.work__rail { align-items: center; gap: clamp(1rem, 2vw, 1.75rem); padding-inline: var(--sc-gutter); padding-top: calc(var(--bar-h) * 0.6); }
.work__lead { flex: 0 0 min(26rem, 78vw); padding-right: clamp(1rem, 3vw, 3rem); }
.work__hint { margin: 1rem 0 0; color: var(--sc-ink-soft); max-width: 26ch; line-height: 1.55; }
.reel { flex: 0 0 auto; width: clamp(190px, 16.5vw, 262px); margin: 0; }
.reel--feature { width: clamp(220px, 20vw, 318px); }
.reel__frame {
  position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden;
  background: var(--sc-surface); border: 1px solid var(--sc-hairline);
  box-shadow: var(--sc-e2);
  cursor: pointer;
}
.reel--feature .reel__frame { border-color: color-mix(in oklab, var(--sc-accent) 45%, transparent); }
.reel__frame video { width: 100%; height: 100%; object-fit: cover; }
.reel__sound {
  position: absolute; right: 10px; bottom: 10px; width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid rgb(255 255 255 / 0.18); cursor: pointer;
  background: color-mix(in oklab, var(--sc-canvas) 62%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color 160ms var(--sc-ease-out), transform 140ms var(--sc-ease-out);
}
.reel__sound::before {
  content: ""; position: absolute; inset: 9px; background: var(--sc-ink);
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='m22 9-6 6M16 9l6 6'/%3E%3C/svg%3E");
}
.reel.is-sound .reel__sound { background: var(--sc-accent); }
.reel.is-sound .reel__sound::before {
  background: var(--sc-accent-ink);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E");
}
.reel__sound:active { transform: scale(0.94); }
.reel figcaption { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.8rem; font-size: var(--sc-t-sm); line-height: 1.35; }
.reel figcaption b { font-weight: 600; color: var(--sc-ink); }
.reel figcaption span { color: var(--sc-ink-soft); }
.work__end { flex: 0 0 min(20rem, 70vw); padding-left: clamp(1rem, 3vw, 3rem); }
.work__end p { font-size: var(--sc-t-xl); font-weight: 650; letter-spacing: -0.025em; line-height: 1.15; }

/* -------------------------------------------------------- long + mosaic -- */
.long { padding-top: clamp(3rem, 6vw, 6rem); }
.long__block { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: end; margin-bottom: clamp(5rem, 10vw, 9rem); }
.long__head .body { margin-top: 1.1rem; }
.long__player { border-radius: var(--r); overflow: hidden; border: 1px solid var(--sc-hairline); box-shadow: var(--sc-e3); background: var(--sc-surface); aspect-ratio: 16 / 9; }
.long__player video { width: 100%; height: 100%; object-fit: cover; }

.mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(0, auto); gap: clamp(0.8rem, 1.5vw, 1.25rem); align-items: start; }
.mosaic figure { margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: var(--sc-e2); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.mosaic__copy { grid-column: 1 / span 4; grid-row: 1; align-self: center; padding-right: 1rem; }
.mosaic__copy .h3 { margin-top: 0.9rem; }
.mosaic__copy .body { margin-top: 1rem; }
.mosaic__a { grid-column: 5 / span 3; grid-row: 1; aspect-ratio: 4 / 5; margin-top: 3rem !important; }
.mosaic__b { grid-column: 8 / span 5; grid-row: 1 / span 2; aspect-ratio: 4 / 5.4; }
.mosaic__c { grid-column: 2 / span 3; grid-row: 2; aspect-ratio: 4 / 5; margin-top: -2rem !important; }
.mosaic__d { grid-column: 5 / span 3; grid-row: 2; aspect-ratio: 1; }

/* ------------------------------------------------------------- results -- */
.results__head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.results__head .body { margin-top: 1rem; }
.case { border-radius: calc(var(--r) + 4px); background: var(--sc-surface); border: 1px solid var(--sc-hairline); box-shadow: var(--sc-e2), var(--sc-edge); padding: clamp(1.5rem, 3vw, 3rem); }
.case--m2k { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); gap: clamp(2rem, 4vw, 4rem); }
.case__logo { height: 52px; width: auto; margin-bottom: 1.6rem; }
.case__side .h3 { margin-bottom: 1rem; }
.case__side .body { margin-bottom: 1.2rem; }

.arc { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.6rem, 1.6vw, 1.4rem); height: clamp(220px, 26vw, 300px); align-items: end; }
.arc__col { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.arc__val { font-size: clamp(1.15rem, 0.9rem + 1vw, 1.7rem); font-weight: 750; letter-spacing: -0.03em; margin-bottom: 0.5rem; }
.arc__bar {
  display: block; height: calc(var(--h) * (100% - 5.6rem)); min-height: 10px; border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--sc-accent) 55%, transparent), color-mix(in oklab, var(--sc-accent) 14%, transparent));
  transform-origin: bottom; transform: scaleY(0.04); transition: transform 1200ms var(--sc-ease-out);
}
.arc__col--top .arc__bar { background: linear-gradient(180deg, var(--sc-accent), color-mix(in oklab, var(--sc-accent) 30%, transparent)); }
.arc__col:nth-child(2) .arc__bar { transition-delay: 120ms; }
.arc__col:nth-child(3) .arc__bar { transition-delay: 240ms; }
.arc.is-in .arc__bar { transform: none; }
.arc__name { margin-top: 0.75rem; font-weight: 600; font-size: var(--sc-t-sm); }
.arc__when { color: var(--sc-ink-soft); font-size: var(--sc-t-xs); font-family: var(--sc-font-mono); letter-spacing: 0.02em; }
.arc__unit { margin: 1rem 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-xs); font-family: var(--sc-font-mono); letter-spacing: 0.06em; text-transform: uppercase; }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--sc-hairline); }
.fact { display: flex; flex-direction: column; gap: 0.35rem; }
.fact__num { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.3rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--sc-accent); }
.fact__label { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.45; max-width: 30ch; }
.fact--xl .fact__num { font-size: clamp(3.6rem, 2rem + 5vw, 6.6rem); }

.duo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(0.9rem, 1.6vw, 1.4rem); margin-top: clamp(0.9rem, 1.6vw, 1.4rem); }
.case--pt, .case--own { display: flex; flex-direction: column; gap: 1.4rem; }
.pt__who { display: flex; align-items: center; gap: 0.9rem; }
.pt__who img { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--sc-hairline-strong); }
.pt__who b { display: block; font-weight: 600; }
.pt__who span { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.pt__quote { margin: 0; }
.pt__quote p { margin: 0; font-family: var(--sc-font-display); font-stretch: 105%; font-size: var(--sc-t-xl); font-weight: 600; line-height: 1.22; letter-spacing: -0.02em; text-wrap: balance; }
.case--pt .link-btn, .case__side .link-btn { align-self: flex-start; }
.case--own { background: linear-gradient(200deg, color-mix(in oklab, var(--sc-accent) 10%, var(--sc-surface)), var(--sc-surface) 60%); }
.own__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.own__row .fact__num { font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.5rem); }
.case--own .body { margin-top: auto; }

/* ------------------------------------------------------------ founders -- */
.founders__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr) minmax(0, 0.62fr); gap: clamp(1rem, 2vw, 1.75rem); align-items: start; }
.founders__copy { align-self: center; padding-right: clamp(0rem, 3vw, 3rem); }
.founders__line {
  margin: 1.6rem 0 0; padding-left: 1rem; border-left: 1px solid var(--sc-accent);
  font-family: var(--sc-font-display); font-stretch: 108%; font-variation-settings: "wdth" 108;
  font-size: var(--sc-t-xl); font-weight: 650; line-height: 1.18; letter-spacing: -0.025em;
  color: var(--sc-ink); max-width: 22ch; text-wrap: balance;
}
.founders__copy .h2 { margin-bottom: 1.4rem; }
.founder { margin: 0; }
.founder--a { margin-top: clamp(3rem, 8vw, 7rem); }
.founder__img { border-radius: var(--r); overflow: hidden; box-shadow: var(--sc-e3); aspect-ratio: 4 / 5; background: var(--sc-surface); }
.founder__img img { width: 100%; height: 100%; object-fit: cover; }
.founder figcaption { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.9rem; }
.founder figcaption b { font-weight: 600; font-size: var(--sc-t-lg); }
.founder figcaption a { color: var(--sc-accent); text-decoration: none; font-size: var(--sc-t-sm); }
.founder figcaption a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- book -- */
.book { padding-bottom: 0; background: radial-gradient(60rem 36rem at 80% 10%, color-mix(in oklab, var(--sc-accent) 8%, transparent), transparent 70%); }
.book__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.book__title { font-size: clamp(2.6rem, 1.2rem + 4.4vw, 5.6rem); font-weight: 800; line-height: 0.96; letter-spacing: -0.045em; max-width: 12ch; }
.book__copy .body { margin-top: 1.4rem; }
.contact { list-style: none; padding: 0; margin: 2.2rem 0 0; border-top: 1px solid var(--sc-hairline); }
.contact li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.95rem 0; border-bottom: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm); }
.contact li > :first-child { color: var(--sc-ink-soft); }
.contact a { color: var(--sc-ink); text-decoration: none; font-weight: 500; transition: color 160ms var(--sc-ease-out); overflow-wrap: anywhere; text-align: right; }
.contact a:hover { color: var(--sc-accent); }

.form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem;
  padding: clamp(1.4rem, 3vw, 2.6rem); border-radius: calc(var(--r) + 4px);
  background: var(--sc-surface); border: 1px solid var(--sc-hairline); box-shadow: var(--sc-e3), var(--sc-edge);
}
.field { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.field--full, .form__end { grid-column: 1 / -1; }
.field label { font-size: var(--sc-t-sm); font-weight: 500; }
.field :is(input, select, textarea) {
  width: 100%; border-radius: 10px; padding: 0.8rem 0.9rem; font-size: 1rem;
  background: color-mix(in oklab, var(--sc-canvas) 70%, var(--sc-surface));
  border: 1px solid var(--sc-hairline-strong); color: var(--sc-ink);
  transition: border-color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9A192' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 18px; padding-right: 2.4rem; }
.field select option { background: var(--sc-surface); color: var(--sc-ink); }
.field textarea { resize: vertical; min-height: 7rem; }
.field :is(input, textarea)::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 70%, transparent); }
.field :is(input, select, textarea):focus { outline: none; border-color: var(--sc-accent); background-color: color-mix(in oklab, var(--sc-canvas) 50%, var(--sc-surface)); }
.field :is(input, select, textarea):focus-visible { outline: 2px solid color-mix(in oklab, var(--sc-accent) 50%, transparent); outline-offset: 1px; }
.field.is-invalid :is(input, select) { border-color: #E07A5F; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__end { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 0.4rem; }
.form__status { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); flex: 1 1 14rem; }
.form__status.is-ok { color: var(--sc-accent); }
.form__status.is-err, .form__status.is-err-plain { color: #EB9B86; }
.form__status a { color: inherit; }

.book__grid > .form, .book__grid > .cal { grid-column: 2; grid-row: 1; }
.cal {
  padding: clamp(1.2rem, 2.4vw, 2rem); border-radius: calc(var(--r) + 4px);
  background: var(--sc-surface); border: 1px solid color-mix(in oklab, var(--sc-accent) 30%, transparent);
  box-shadow: var(--sc-e3), var(--sc-edge); min-width: 0;
  animation: rc-in 420ms var(--sc-ease-out);
}
.cal__title { margin: 0; font-family: var(--sc-font-display); font-stretch: 108%; font-variation-settings: "wdth" 108; font-size: var(--sc-t-xl); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; text-wrap: balance; }
.cal__sub { margin: 0.6rem 0 1.2rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.cal__frame { border-radius: var(--r); overflow: hidden; background: #fff; }
.cal__frame iframe { display: block; width: 100%; height: 720px; border: 0; }
@media (max-width: 860px) { .cal__frame iframe { height: 900px; } }

.foot { display: flex; align-items: center; gap: 1.5rem 2.5rem; flex-wrap: wrap; margin-top: clamp(5rem, 9vw, 8rem); padding-block: 2.2rem; border-top: 1px solid var(--sc-hairline); }
.foot__logo { width: 110px; height: auto; }
.foot__line { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.foot__small { margin: 0 0 0 auto; color: var(--sc-ink-soft); font-size: var(--sc-t-xs); }

/* ------------------------------------------------------------ receipts -- */
.receipts {
  width: min(1100px, calc(100vw - 2rem)); max-height: calc(100svh - 2rem); padding: 0;
  border: 1px solid var(--sc-hairline-strong); border-radius: calc(var(--r) + 4px);
  background: var(--sc-surface); color: var(--sc-ink); box-shadow: var(--sc-e3);
}
.receipts::backdrop { background: rgb(5 4 3 / 0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.receipts[open] { animation: rc-in 260ms var(--sc-ease-out); }
@keyframes rc-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.receipts__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: var(--sc-surface); border-bottom: 1px solid var(--sc-hairline); }
.receipts__title { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 650; }
.receipts__close { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--sc-hairline-strong); background: none; color: var(--sc-ink); cursor: pointer; font-size: 1rem; }
.receipts__close:hover { border-color: var(--sc-accent); color: var(--sc-accent); }
.receipts__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; padding: 1.25rem; align-items: start; }
.receipts__body figure { margin: 0; }
.receipts__body figure.is-wide { grid-column: 1 / -1; }
.receipts__body img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--sc-hairline); }
.receipts__body figcaption { margin-top: 0.5rem; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); font-family: var(--sc-font-mono); }

/* ----------------------------------------------------------- responsive -- */
@media (max-width: 1080px) {
  .bar__nav { display: none; }
  .bar__menu { display: block; }
  .system__grid > .sys, .sys--main { grid-column: 1 / -1; grid-row: auto; }
  .case--m2k, .duo, .long__block, .book__grid { grid-template-columns: 1fr; }
  .book__grid > .form, .book__grid > .cal { grid-column: 1; grid-row: auto; }
  .founders__grid { grid-template-columns: 1fr 1fr; }
  .founders__copy { grid-column: 1 / -1; padding-right: 0; margin-bottom: 1rem; }
}
@media (max-width: 860px) {
  :root { --bar-h: 62px; }
  .bar { gap: 0.75rem; }
  .bar__end { gap: 0.6rem; }
  .bar .lang { display: none; }              /* lives in the menu on phones */
  .mnav .lang { display: inline-flex; }
  /* Phone budget: no full-screen grain layer, no live blur behind the bar. */
  .sc-grain { display: none; }
  .bar.is-scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in oklab, var(--sc-canvas) 96%, transparent); }
  .reel__sound { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in oklab, var(--sc-canvas) 80%, transparent); }
  .bar__mark img { height: 20px; }
  .hero { grid-template-columns: 1fr; align-content: start; gap: 1.5rem; padding-top: calc(var(--bar-h) + 1.8rem); padding-bottom: 0; }
  .hero__title { font-size: clamp(2.6rem, 1.4rem + 6vw, 3.6rem); max-width: 12ch; }
  .hero__sub { font-size: var(--sc-t-base); margin-top: 1.1rem; }
  .hero__ctas { margin-top: 1.5rem; }
  .hero__stage { height: 64svh; min-height: 400px; margin-inline: calc(var(--sc-gutter) * -1); }
  .phone { --w: min(46vw, 210px); }
  .phone--back { --w: min(36vw, 168px); }
  .phone--l { translate: -70% 8%; }
  .phone--r { translate: 70% 12%; }
  .trust__row { justify-content: flex-start; gap: 1.5rem 2.2rem; }
  .trust__label { flex-basis: 100%; max-width: none; }
  .filter__step { font-size: clamp(2rem, 1rem + 6vw, 3rem); }
  .filter__copy { bottom: clamp(2rem, 9vh, 5rem); }
  .work__rail { padding-top: var(--bar-h); }
  .reel { width: 58vw; }
  .reel--feature { width: 64vw; }
  .mosaic__copy { grid-column: 1 / -1; grid-row: auto; margin-bottom: 1rem; }
  .mosaic__a { grid-column: 1 / span 6; grid-row: auto; margin-top: 0 !important; }
  .mosaic__b { grid-column: 7 / span 6; grid-row: auto; }
  .mosaic__c { grid-column: 1 / span 6; grid-row: auto; margin-top: 0 !important; }
  .mosaic__d { grid-column: 7 / span 6; grid-row: auto; }
  .facts, .own__row { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .foot__small { margin-left: 0; }
}
@media (max-width: 420px) {
  .bar .btn--sm { padding: 0 0.75rem; font-size: 0.84rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__copy > * { opacity: 1; transform: none; transition: none; }
  .arc__bar { transform: none; transition: none; }
  .sys__graph-line { stroke-dashoffset: 0; transition: none; }
  .phone { will-change: auto; }
}