/* Kaizer v2.0. Mobile first. Values come from tokens.css only. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: var(--fs-15);
  line-height: var(--lh-156);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3 { text-wrap: balance; font-weight: inherit; }
p { text-wrap: pretty; }
em { font-style: italic; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: var(--s-16); top: var(--s-16); z-index: 100;
  padding: var(--s-12) var(--s-16); border-radius: var(--r-pill);
  background: var(--c-ink); color: var(--c-bg); font-weight: 600;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: calc(var(--section) * 0.5); }
section[id] { scroll-margin-top: calc(var(--nav-h) + var(--s-24)); }

.h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-100);
  letter-spacing: var(--tr-tight);
}
.eyebrow {
  font-size: var(--fs-12);
  line-height: var(--lh-130);
  letter-spacing: var(--tr-tight);
  color: var(--c-ink);
}

/* ---------- Nav (Figma 246:868 at the top, 246:922 once the page scrolls) ----------
   At the top: a full-width strip. As soon as the page scrolls, the same bar morphs into a floating pill
   (width, radius, height and surface transition together). A 2px line on its lower edge tracks reading progress. */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  pointer-events: none;
}
.nav__bar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-16);
  width: 100%;
  height: var(--nav-h);
  margin: 0 auto;
  padding-inline: max(var(--gutter), calc((100% - var(--container) - var(--s-8)) / 2));
  border: 1px solid var(--c-line-soft);
  border-inline-color: transparent;
  border-radius: 0;
  background: var(--c-strip);
  overflow: clip;
  pointer-events: auto;
  transition:
    width 700ms var(--ease-out), height 700ms var(--ease-out), margin 700ms var(--ease-out),
    padding 700ms var(--ease-out), border-radius 700ms var(--ease-out), border-color 700ms var(--ease-out),
    background-color 700ms var(--ease-out), box-shadow 700ms var(--ease-out);
}
.nav.is-float .nav__bar {
  width: min(calc(var(--container) + var(--s-8)), calc(100% - var(--gutter) * 2));
  height: var(--nav-float-h);
  margin-top: var(--s-12);
  padding-inline: var(--s-32) var(--s-8);
  border-color: var(--c-line-soft);
  border-radius: calc(var(--nav-float-h) / 2);
  background-color: rgb(13 13 13 / 0.92);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 18px 40px rgb(0 0 0 / 0.45);
}
.nav__brand {
  display: inline-flex; align-items: center; min-height: var(--hit);
  font-weight: 900;
  font-size: clamp(1.5rem, 1.2rem + 0.5vw, 1.75rem);  /* Figma: Inter Black 38, reduced at José's request */
  line-height: var(--lh-095);
  letter-spacing: var(--tr-tight);
}
/* Links: the dark chip (Figma "What i build") slides to the hovered link and back to the current section */
.pill { position: relative; display: none; align-items: center; gap: var(--s-4); }
.pill__indicator {
  position: absolute; top: 50%; left: 0;
  width: var(--w, 0px); height: 2.0625rem;              /* Figma chip: 33 tall */
  border: 1px solid var(--c-pill-line);
  border-radius: var(--r-pill);
  background: var(--c-pill);
  transform: translate(var(--x, 0px), -50%);
  opacity: var(--o, 0);
  transition: transform var(--d-hover) var(--ease-out), width var(--d-hover) var(--ease-out), opacity var(--d-fast) linear;
}
.pill__link {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center;
  min-height: var(--hit);
  padding-inline: var(--s-12);
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: var(--tr-tight);
  color: var(--c-ink-soft);
  transition: color var(--d-hover) var(--ease-out);
}
.pill__link.is-on, .pill__link[aria-current] { color: var(--c-ink); }
@media (hover: hover) { .pill__link:hover { color: var(--c-ink); } }

.nav .cta--nav { display: none; }
.nav .btn--nav { --h: 2.75rem; --fs: var(--fs-14); padding: 0 var(--s-20); }
.nav__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.nav__progress i { position: absolute; inset: 0; background: var(--c-ink); transform-origin: left center; transform: scaleX(0); }

/* Menu button (below 1100) */
.nav__menu {
  display: inline-flex; align-items: center; gap: var(--s-12);
  min-height: var(--hit);
  padding: 0 var(--s-4) 0 var(--s-16);
  font-size: var(--fs-15); font-weight: 600; letter-spacing: var(--tr-tight);
}
.nav__menu-icon { position: relative; width: var(--s-24); height: var(--s-12); }
.nav__menu-icon i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--c-ink); transition: transform 500ms var(--ease-out), top 500ms var(--ease-out); }
.nav__menu-icon i:first-child { top: 0; }
.nav__menu-icon i:last-child { top: calc(100% - 2px); }
.nav__menu[aria-expanded="true"] .nav__menu-icon i { top: calc(50% - 1px); }
.nav__menu[aria-expanded="true"] .nav__menu-icon i:first-child { transform: rotate(45deg); }
.nav__menu[aria-expanded="true"] .nav__menu-icon i:last-child { transform: rotate(-45deg); }

/* Full-screen menu */
.menu {
  position: fixed; inset: 0; z-index: 49;
  display: grid; align-content: space-between; gap: var(--s-40);
  padding: calc(var(--nav-h) + var(--s-40)) var(--gutter) calc(var(--s-32) + env(safe-area-inset-bottom, 0px));
  background: var(--c-bg);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 700ms var(--ease-out), visibility 0s linear 700ms;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 700ms var(--ease-out), visibility 0s; }
.menu__list { display: grid; gap: var(--s-4); }
.menu__link {
  display: flex; align-items: baseline; gap: var(--s-16);
  padding-block: var(--s-8);
  border-bottom: 1px solid var(--c-line);
  font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
  font-weight: 600;
  line-height: var(--lh-100);
  letter-spacing: var(--tr-tight);
  opacity: 0; transform: translateY(16px);
  transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out);
}
.menu__n { font-size: var(--fs-13); font-weight: 500; color: var(--c-ink-muted); font-variant-numeric: tabular-nums; }
.menu.is-open .menu__link { opacity: 1; transform: none; transition-delay: calc(150ms + var(--i, 0) * 50ms); }
.menu__ctas { display: grid; gap: var(--s-12); }
.menu__ctas .cta, .menu__ctas .btn { width: 100%; }

@media (min-width: 640px) {
  .nav .cta--nav { display: inline-flex; margin-left: auto; }
}
@media (min-width: 1100px) {
  .pill { display: flex; }
  .nav__menu, .menu { display: none; }
  .nav .cta--nav { margin-left: 0; }
}
@media (min-width: 1440px) {
  /* Figma sizes: links Inter SemiBold 19, 53 apart; CTA 64 tall */
  .pill { gap: var(--s-8); }
  .pill__link { padding-inline: var(--s-16); font-size: var(--fs-15); }
  .nav .btn--nav { --h: 3rem; --fs: var(--fs-15); padding: 0 var(--s-24); }
}

/* ---------- Buttons (Bonança fill + text roll, black and white) ---------- */
.cta { position: relative; display: inline-flex; isolation: isolate; }
/* Diffuse glow from the button base */
.cta::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 14%; right: 14%; bottom: -10px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.42), rgb(255 255 255 / 0));
  filter: blur(10px);
  opacity: 0.55;
  transform: scaleX(0.9);
  transition: opacity var(--d-hover) var(--ease-out), transform var(--d-hover) var(--ease-out);
}
[data-glow="color"] .cta::before {
  background: var(--glow-rainbow);
  filter: blur(16px);
  opacity: 0.32;
}
.cta--nav::before { display: none; }
[data-glow="none"] .cta::before { display: none; }

.btn {
  --h: 4rem;
  --fs: var(--fs-18);
  --l1: var(--c-fill-1); --l2: var(--c-fill-2); --l3: var(--c-ink);
  --fg: var(--c-ink); --fg-h: var(--c-bg); --pt: var(--c-ink);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8);
  min-height: var(--h);
  padding: 0 var(--s-32);
  border-radius: var(--r-pill);
  font-size: var(--fs);
  font-weight: 700;
  line-height: var(--lh-100);
  letter-spacing: var(--tr-tight);
  white-space: nowrap;
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--d-fast) var(--ease-out), color 500ms var(--ease-out);
}
.btn--primary {
  border: 1px solid var(--c-line-soft);
  background: radial-gradient(70% 100% at 50% 100%, var(--c-line) 0%, var(--c-surface) 100%);
  box-shadow: var(--glow-btn);
}
/* Inner top highlight + ring, as in the reference */
.btn--primary::before {
  content: ""; position: absolute; inset: 1px; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(178deg, rgb(255 255 255 / 0.10) 0%, rgb(255 255 255 / 0) 52%);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
  transition: box-shadow 600ms var(--ease-out);
}
.btn--ghost {
  --h: 4rem; --fs: var(--fs-14);
  --l1: var(--c-ghost); --l2: var(--c-ink-muted); --l3: var(--c-ink);
  font-weight: 400;
  border: 1px solid var(--c-ink);
}
.btn--sm { --h: 2.75rem; --fs: var(--fs-14); padding: 0 var(--s-20); }
.btn--lg { --h: 4.5rem; --fs: var(--fs-20); padding: 0 var(--s-40); }

.btn__fill, .btn__pts {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none;
}
.btn__fill { z-index: 0; }
.btn__fill i {
  position: absolute; left: 50%; top: -60%;
  width: max(200%, 10rem); aspect-ratio: 1;
  margin-left: calc(max(200%, 10rem) * -0.5);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 700ms var(--ease-expo) 120ms;
}
.btn__fill i:nth-child(1) { background: var(--l1); transition-delay: 200ms; }
.btn__fill i:nth-child(2) { background: var(--l2); transition-delay: 100ms; }
.btn__fill i:nth-child(3) { background: var(--l3); transition-delay: 0ms; }
.btn__pts { z-index: 1; }
.btn__pts i {
  position: absolute; bottom: -6px; left: var(--x);
  width: 2px; height: 2px; border-radius: 50%;
  background: var(--pt); opacity: var(--o);
  animation: btn-pt var(--t) ease-in-out var(--d) infinite;
}
@keyframes btn-pt {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: var(--o); }
  100% { transform: translateY(-64px); opacity: 0; }
}
.btn > .btn__label, .btn > .btn__arrow { position: relative; z-index: 3; }
.btn__label { display: inline-grid; overflow: hidden; padding: 2px 0; line-height: var(--lh-130); }
.btn__label > span {
  grid-area: 1 / 1;
  text-align: center;
  transition: transform 700ms var(--ease-out), opacity 400ms linear;
}
.btn__label > span:nth-child(2) { opacity: 0; transform: translateY(70%); }
.btn__done { opacity: 0; transform: translateY(70%); }
.btn__arrow {
  /* SVG arrow centred on the cap height (Inter caps sit on the middle of the line box); on hover it swaps:
     the arrow leaves through the top-right corner and a new one enters from the bottom-left, ending in place */
  display: inline-grid; flex: none;
  width: 0.72em; height: 0.72em;
  overflow: hidden;
}
.btn__arrow svg {
  grid-area: 1 / 1;
  width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 600ms var(--ease-out);
}
.btn__arrow svg + svg { transform: translate(-110%, 110%); }

/* Hover (pointer) and active (touch) share the fill */
@media (hover: hover) {
  .btn:hover .btn__fill i, .btn:focus-visible .btn__fill i { transform: scale(1); transition: transform var(--d-fill) var(--ease-expo); }
  .btn:hover .btn__fill i:nth-child(1), .btn:focus-visible .btn__fill i:nth-child(1) { transition-delay: 0ms; }
  .btn:hover .btn__fill i:nth-child(2), .btn:focus-visible .btn__fill i:nth-child(2) { transition-delay: 100ms; }
  .btn:hover .btn__fill i:nth-child(3), .btn:focus-visible .btn__fill i:nth-child(3) { transition-delay: 200ms; }
  .btn:hover, .btn:focus-visible { color: var(--fg-h); }
  .btn:hover .btn__pts i, .btn:focus-visible .btn__pts i { background: var(--fg-h); }
  .btn:hover::after { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.5); }
  .btn:hover .btn__label > span:first-child, .btn:focus-visible .btn__label > span:first-child { opacity: 0; transform: translateY(-70%); transition: transform 1400ms var(--ease-expo), opacity 300ms linear; }
  .btn:hover .btn__label > span:nth-child(2), .btn:focus-visible .btn__label > span:nth-child(2) { opacity: 1; transform: none; transition: transform 1400ms var(--ease-expo), opacity 1400ms var(--ease-expo); }
  .btn:hover .btn__arrow svg:first-child, .btn:focus-visible .btn__arrow svg:first-child { transform: translate(110%, -110%); }
  .btn:hover .btn__arrow svg + svg, .btn:focus-visible .btn__arrow svg + svg { transform: none; transition-delay: 120ms; }
  .cta:hover::before, .cta:focus-within::before { opacity: 0.9; transform: scaleX(1.05); }
}
@media (hover: none) {
  .btn:active .btn__fill i { transform: scale(1); transition: transform 600ms var(--ease-expo); }
  .btn:active { color: var(--fg-h); }
}
.btn:active { transform: scale(0.96); }
/* Copied state keeps the button width (all labels share one grid cell) */
.btn.is-copied .btn__label > span:first-child,
.btn.is-copied .btn__label > span:nth-child(2) { opacity: 0; transform: translateY(-70%); }
.btn.is-copied .btn__done { opacity: 1; transform: none; transition: transform 700ms var(--ease-expo), opacity 300ms linear; }

/* ---------- Hero ---------- */
.hero {
  padding-top: calc(var(--nav-h) + var(--s-64));
  padding-bottom: var(--s-64);
}
.hero__title {
  margin-top: var(--s-16);
  max-width: 12ch;
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-095);
  letter-spacing: var(--tr-tight);
}
.hero__lead {
  margin-top: var(--s-24);
  max-width: 33rem;
  font-size: var(--fs-18);
  line-height: var(--lh-167);
  letter-spacing: var(--tr-tight);
  color: var(--c-ink-muted);
}
.hero__ctas {
  display: flex; flex-direction: column; gap: var(--s-16);
  margin-top: var(--s-32);
}
.hero__ctas .cta, .hero__ctas .cta .btn, .hero__ctas > .btn { width: 100%; }
.hero__micro {
  margin-top: var(--s-24);
  font-size: var(--fs-13);
  line-height: var(--lh-156);
  letter-spacing: var(--tr-tight);
  color: var(--c-ink-muted);
}
@media (min-width: 640px) {
  .hero__ctas { flex-direction: row; align-items: center; gap: var(--s-20); }
  .hero__ctas .cta, .hero__ctas .cta .btn, .hero__ctas > .btn { width: auto; }
}
@media (min-width: 1024px) {
  .hero { padding-top: calc(var(--nav-h) + var(--s-80)); padding-bottom: var(--s-96); }
  .hero__title { max-width: none; }
}

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--c-line-soft);
  background: var(--c-strip);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track {
  display: flex; width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee__group { display: flex; align-items: center; gap: var(--s-48); padding-right: var(--s-48); min-height: 3.75rem; }
.marquee__group li {
  display: flex; align-items: center; gap: var(--s-48);
  font-family: var(--f-text);
  font-size: var(--fs-14);
  font-weight: 500;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__group li::before { content: ""; width: 1px; height: 22px; background: var(--c-ink); opacity: 0.6; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee.is-js .marquee__track { animation: none; }

/* ---------- Signature ---------- */
.signature { padding-top: var(--s-80); }
.signature__word {
  border-top: 1px solid var(--c-hairline);
  padding-top: var(--s-24);
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 63%;
  font-size: min(var(--fs-490), calc((100vw - var(--gutter) * 2) / 2.5));
  line-height: var(--lh-080);
  letter-spacing: var(--tr-sig);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.signature__glyphs { display: inline-block; }
.signature__word .char { display: inline-block; }
/* SplitText line masks: room for descenders (y, g, p) without moving the layout */
.line-mask { padding-bottom: 0.14em; margin-bottom: -0.14em; }

/* ---------- Manifesto ---------- */
.manifesto { position: relative; padding-top: var(--s-80); }
.manifesto__bg {
  position: absolute; left: 0; right: 0; top: 22%; height: 68%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.manifesto__bg .bg-media { opacity: 0.85; }
.manifesto__card {
  position: relative;
  padding: var(--s-64) var(--s-24) calc(var(--s-64) + var(--s-32));
  border-radius: var(--r-20);
  background: var(--c-paper);
  color: var(--c-paper-ink);
  text-align: center;
  box-shadow: var(--sh-2);
}
.manifesto__text {
  max-width: 58rem; margin-inline: auto;
  font-size: var(--fs-manifesto);
  font-weight: 500;
  line-height: var(--lh-136);
  letter-spacing: var(--tr-tight);
  color: var(--c-ink-muted);
  text-wrap: balance;
}
.manifesto__text .w { position: relative; display: inline-block; }
.manifesto__text .w__fill { position: absolute; inset: 0; color: var(--c-paper-ink); opacity: 0; }
.manifesto__sub {
  margin-top: var(--s-40);
  font-size: var(--fs-18);
  line-height: var(--lh-167);
  letter-spacing: var(--tr-tight);
  color: var(--c-paper-ink);
}
.manifesto__sub em { color: var(--c-paper-muted); }
.manifesto__notch {
  position: absolute; left: 50%; bottom: -1px;
  width: 62.6%; height: clamp(1.75rem, 1rem + 2.6vw, 4.25rem);
  transform: translateX(-50%);
  fill: var(--c-bg);
}
@media (min-width: 1024px) {
  .manifesto { padding-top: var(--s-96); }
  .manifesto__card { padding: var(--s-128) var(--s-80) var(--s-160); }
}

/* ---------- Services ---------- */
.services__list { display: grid; gap: var(--s-24); margin-top: var(--s-48); }
/* Stacking deck: each card sticks a little lower than the previous one */
.service { position: sticky; top: calc(var(--nav-h) + var(--s-24) + var(--i, 0) * var(--s-12)); transform-origin: 50% 0%; }
.service:nth-child(2) { --i: 1; }
.service:nth-child(3) { --i: 2; }
.service:nth-child(4) { --i: 3; }
.service:nth-child(5) { --i: 4; }
.service__card {
  position: relative;
  display: grid; gap: var(--s-12);
  padding: var(--s-32) var(--s-24);
  border: 1px solid var(--c-line);
  border-radius: calc(var(--r-38) - var(--s-12));
  background: var(--c-surface);
  /* nested hairlines (cult-ui TextureCard), black and white */
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), inset 0 0 0 1px rgb(0 0 0 / 0.6), var(--sh-1);
  transition: transform var(--d-hover) var(--ease-out), border-color var(--d-hover) var(--ease-out), box-shadow var(--d-hover) var(--ease-out);
}
.service__num {
  font-weight: 900;
  font-size: var(--fs-numeral);
  line-height: var(--lh-100);
  letter-spacing: var(--tr-tight);
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.service__title { font-size: var(--fs-32); font-weight: 700; line-height: var(--lh-100); letter-spacing: -0.03em; }
.service__body {
  max-width: 22.5rem;
  font-family: var(--f-text);
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: var(--lh-156);
  color: var(--c-ink-muted);
}
@media (hover: hover) {
  .service__card:hover {
    transform: translateY(-2px);
    border-color: var(--c-line-strong);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), inset 0 0 0 1px rgb(0 0 0 / 0.6), var(--sh-2);
  }
}
@media (min-width: 900px) {
  .service__card {
    grid-template-columns: 13.5rem minmax(0, 26rem) minmax(0, 22.5rem);
    justify-content: space-between; align-items: center;
    min-height: 15.9375rem;
    padding: 0 var(--s-48);
    border-radius: var(--r-38);
  }
}

/* ---------- Work ---------- */
.section-head { display: grid; gap: var(--s-16); }
.section-head__lead { max-width: 36rem; font-size: var(--fs-18); line-height: var(--lh-167); letter-spacing: -0.03em; color: var(--c-ink-muted); }

/* Curved reel: cards on the inside of a cylinder (geometry in main.js, units of 1/1440 of the width; 1/560 on phones) */
.reel {
  position: relative;
  margin-top: var(--s-48);
  width: 100%;
  aspect-ratio: 560 / 400;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.reel.is-dragging { cursor: grabbing; }
.reel:focus-visible { outline-offset: -3px; }
.reel__track { position: absolute; inset: 0; }
.reel__card {
  position: absolute; left: 0; top: 0;
  will-change: transform, clip-path;
  background: var(--c-surface);
}
.reel__card img {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  transform-origin: 0 0;
  object-fit: cover; object-position: 50% 0%;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
  pointer-events: none;
}
.reel__card img.is-ready { opacity: 1; }
.reel__chip {
  position: absolute; left: 0; top: 0;
  padding: var(--s-4) var(--s-12);
  border-radius: var(--r-pill);
  background: rgb(10 10 10 / 0.55);
  border: 1px solid rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--c-ink);
}
.reel__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-16);
  margin-top: var(--s-16);
}
.reel__hint { font-size: var(--fs-13); color: var(--c-ink-muted); letter-spacing: var(--tr-tight); }
.reel__toggle {
  display: inline-flex; align-items: center; gap: var(--s-8);
  min-height: var(--hit);
  padding: 0 var(--s-16);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  font-size: var(--fs-13);
  letter-spacing: var(--tr-tight);
  color: var(--c-ink-soft);
  transition: border-color var(--d-hover) var(--ease-out);
}
@media (hover: hover) { .reel__toggle:hover { border-color: var(--c-line-strong); } }
.reel__toggle-icon { width: 8px; height: 10px; border-inline: 2.5px solid currentColor; }
.reel__toggle[aria-pressed="true"] .reel__toggle-icon {
  border: 0; width: 0; height: 0;
  border-left: 8px solid currentColor; border-block: 5px solid transparent;
}
@media (max-width: 820px) { .reel__chip { display: none; } }
@media (min-width: 821px) {
  .reel { aspect-ratio: 1440 / 460; margin-top: var(--s-48); }
  .reel__bar { margin-top: calc(var(--s-32) * -1); }
}

/* Clients: logos strip (Figma 94:2609). Static wrapped row without JS / with reduced motion;
   main.js splits it into groups that swap like spell.sh "Logos Carousel" (enter from below, exit upward, blurred, staggered). */
.logos { padding-top: var(--s-64); }   /* right under the manifesto card, on the page background */
.logos__stage {
  --ls: 0.58;
  display: grid; place-items: center;
  min-height: 8.9375rem;              /* Figma strip: 143 */
  padding: var(--s-24) var(--gutter);
  overflow: hidden;
}
.logos__row, .logos__group { display: flex; align-items: center; justify-content: center; gap: var(--s-24) var(--s-40); }
.logos__row { flex-wrap: wrap; max-width: var(--container); }
.logos__row[hidden] { display: none; }
.logos__item img { width: auto; height: calc(var(--h) * 1px * var(--ls)); max-width: none; }
.logos__group { grid-area: 1 / 1; width: 100%; gap: var(--s-24); }
.logos__group .logos__item { opacity: 0; }
.logos__group .logos__item.is-shown { opacity: 1; }
.logos__group .logos__item.is-enter { animation: logos-enter 600ms ease both; animation-delay: calc(var(--i) * 140ms); }
.logos__group .logos__item.is-exit { animation: logos-exit 600ms ease both; animation-delay: calc(var(--i) * 140ms); }
@keyframes logos-enter {
  0% { transform: translateY(40px); filter: blur(4px); opacity: 0; }
  100% { transform: translateY(0); filter: blur(0); opacity: 1; }
}
@keyframes logos-exit {
  0% { transform: translateY(0); filter: blur(0); opacity: 1; }
  100% { transform: translateY(-40px); filter: blur(4px); opacity: 0; }
}
@media (min-width: 640px) { .logos__stage { --ls: 0.85; } .logos__group { gap: var(--s-40); } }
@media (min-width: 1024px) { .logos__stage { --ls: 1; } .logos__group { gap: var(--s-64); } }

/* ---------- Process ---------- */
.process .h2 { font-size: clamp(2rem, 1.5rem + 1.8vw, var(--fs-48)); font-weight: 600; }
.process__stage { display: grid; gap: var(--s-40); margin-top: var(--s-48); }
.steps { display: grid; gap: var(--s-40); }
.step { position: relative; padding-top: var(--s-24); }
.step__rule { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--c-line-strong); overflow: hidden; }
.step__rule::after { content: ""; position: absolute; inset: 0; background: var(--c-ink); transform-origin: left center; transform: scaleX(var(--fill, 1)); }
.step__num {
  display: block;
  font-size: var(--fs-step);
  font-weight: 800;
  line-height: var(--lh-100);
  letter-spacing: var(--tr-tight);
  font-variant-numeric: tabular-nums;
}
.step__title { margin-top: var(--s-16); font-size: var(--fs-20); line-height: var(--lh-136); letter-spacing: var(--tr-tight); }
.step__body { margin-top: var(--s-12); max-width: 18rem; font-size: var(--fs-15); line-height: var(--lh-172); letter-spacing: -0.04em; color: var(--c-ink-muted); }
.process__cta { display: flex; justify-content: center; margin-top: var(--s-64); }

/* Dial: progress ring, ticks for the 4 steps, an orbiting dot, rolling counter */
.dial { position: relative; width: min(15rem, 60vw, 30vh); aspect-ratio: 1; margin-inline: auto; }
.dial__svg { width: 100%; height: 100%; overflow: visible; }
.dial__ring-out { fill: none; stroke: var(--c-line-strong); stroke-width: 1; stroke-dasharray: 2 6; }
.dial__track { fill: none; stroke: var(--c-line); stroke-width: 2; }
.dial__progress { fill: none; stroke: var(--c-ink); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 100px 100px; }
.dial__ticks circle { fill: var(--c-ink); }
.dial__orbit circle { fill: var(--c-ink); filter: drop-shadow(0 0 6px rgb(255 255 255 / 0.6)); }
.dial__orbit { transform-origin: 100px 100px; }
.dial__count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--s-4); }
.dial__mask { display: block; height: 1em; overflow: hidden; font-size: clamp(3.5rem, 2.6rem + 3vw, 5.5rem); font-weight: 800; line-height: var(--lh-100); letter-spacing: var(--tr-tight); font-variant-numeric: tabular-nums; }
.dial__digits { display: flex; flex-direction: column; }
.dial__digits span { height: 1em; }
.dial__of { align-self: flex-start; margin-top: 0.35em; font-size: var(--fs-14); color: var(--c-ink-muted); font-variant-numeric: tabular-nums; }
/* static (reduced motion / no JS): dial shows the whole process done */
.dial__digits { transform: translateY(-75%); }

@media (min-width: 640px) { .steps { grid-template-columns: 1fr 1fr; gap: var(--s-48) var(--s-16); } }
@media (min-width: 1024px) {
  .process__stage { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: center; gap: var(--s-80); margin-top: var(--s-64); }
  .dial { width: min(100%, 52vh); }
  .steps { gap: var(--s-48) var(--s-24); }
}

/* Live (pinned) mode, set by main.js only with motion allowed */
.process--live .dial__digits { transform: none; }
@media (max-width: 1023.98px) { .process--live .process__stage { gap: var(--s-32); margin-top: var(--s-32); } .process--live .process__cta { margin-top: var(--s-32); } }
.process--live .step__rule::after { transform: scaleX(var(--fill, 0)); }
@media (max-width: 1023.98px) {
  .process--live .steps { display: grid; grid-template-columns: 1fr; }
  .process--live .step { grid-area: 1 / 1; }
}

/* ---------- The honest version ---------- */
.honest { position: relative; }
.honest__bg {
  position: absolute; left: 0; right: 0; top: 30%; height: 55%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}
.honest__bg .bg-media { opacity: 0.7; }
/* Waves: lazy loop video over its own poster image */
.bg-media { position: absolute; inset: 0; }
.bg-media img, .bg-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.waves { opacity: 0; transition: opacity 900ms var(--ease-out); }
.waves.is-playing { opacity: 1; }
.honest__grid { position: relative; display: grid; gap: var(--s-16); }
.honest__photo { border-radius: var(--r-24); overflow: hidden; background: var(--c-surface-2); box-shadow: var(--sh-2); }
.honest__photo img { width: 100%; aspect-ratio: 413 / 520; object-fit: cover; object-position: 50% 30%; }
@media (min-width: 640px) and (max-width: 899.98px) { .honest__photo img { aspect-ratio: 16 / 10; object-position: 50% 25%; } }
.honest__panel {
  display: grid; gap: var(--s-24);
  padding: var(--s-24);
  border: 1px solid var(--c-line);
  border-radius: var(--r-24);
  background: rgb(10 10 10 / 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--sh-2);
}
.honest__rail {
  display: flex; justify-content: center; gap: var(--s-16);
  padding: var(--s-12);
  border-radius: var(--r-20);
  background: var(--c-surface-2);
}
.honest__rail img { width: var(--s-48); height: var(--s-48); }
[data-icons="mono"] .honest__rail img { filter: grayscale(1) contrast(1.1); }
.tags { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.tags li {
  padding: var(--s-4) var(--s-12);
  border-radius: var(--r-8);
  background: var(--c-line-soft);
  font-family: var(--f-text);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.honest__body { display: grid; gap: var(--s-20); align-content: start; justify-items: start; }
.honest__lead { font-size: var(--fs-18); line-height: var(--lh-156); letter-spacing: -0.03em; color: var(--c-ink-soft); max-width: 34rem; }
.honest__list { display: grid; gap: var(--s-12); max-width: 34rem; }
.honest__list li {
  position: relative; padding-left: var(--s-24);
  font-size: var(--fs-15); line-height: var(--lh-156); color: var(--c-ink-muted);
}
.honest__list li::before {
  content: ""; position: absolute; left: 0; top: 0.7em;
  width: var(--s-12); height: 1px; background: var(--c-ink);
}
.honest__body .cta { margin-top: var(--s-8); }
@media (min-width: 900px) {
  .honest__grid { grid-template-columns: minmax(0, 25.8rem) minmax(0, 1fr); align-items: center; gap: 0; }
  .honest__photo img { aspect-ratio: 413 / 658; }
  .honest__panel {
    grid-template-columns: auto minmax(0, 1fr); gap: var(--s-40);
    padding: var(--s-40);
    border-left: 0;
    border-radius: 0 var(--r-24) var(--r-24) 0;
  }
  .honest__rail { flex-direction: column; justify-content: center; align-self: center; padding: var(--s-16); }
  .honest__rail img { width: 3.875rem; height: 3.875rem; }
}

/* ---------- FAQ ---------- */
.faq {
  border-top: 1px solid var(--c-line);
  background: radial-gradient(100% 70% at 50% 0%, var(--c-surface-2) 0%, var(--c-bg) 100%);
}
.faq__grid { display: grid; gap: var(--s-48); }
.faq__aside { position: relative; display: grid; gap: var(--s-32); align-content: start; }
.faq__ghost {
  position: absolute; top: calc(var(--fs-ghost) * -0.35); left: calc(var(--fs-ghost) * -0.04);
  font-weight: 200;
  letter-spacing: var(--tr-tight);
  font-size: var(--fs-ghost);
  line-height: var(--lh-100);
  color: var(--c-ghost);
  pointer-events: none;
  user-select: none;
}
.faq__head { position: relative; display: grid; gap: var(--s-4); padding-top: var(--s-48); }
.faq__eyebrow {
  display: flex; align-items: center; gap: var(--s-8);
  font-weight: 400;
  font-size: var(--fs-14); letter-spacing: var(--tr-tight); text-transform: uppercase;
  color: var(--c-ink-soft);
}
.faq__dash { width: 31px; height: 7px; border-radius: 10px; background: var(--c-ink); }
.faq__title {
  font-weight: 300;
  letter-spacing: var(--tr-tight);
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  line-height: var(--lh-130);
  color: var(--c-ink-muted);
}
.contact-cards { display: grid; gap: var(--s-20); }
.contact-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: var(--s-16);
  width: 100%; min-height: 6.25rem;
  padding: 0 var(--s-24);
  border-radius: var(--r-12);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  text-align: left;
}
.contact-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 120% at 0% 50%, rgb(255 255 255 / 0.07), transparent 70%);
  opacity: 0; transition: opacity var(--d-hover) var(--ease-out);
}
.contact-card__icon { flex: none; width: 2.5rem; height: 2.5rem; fill: var(--c-ink); }
.contact-card__text { display: grid; gap: var(--s-4); }
.contact-card__title {
  display: inline-grid;
  font-weight: 300; letter-spacing: var(--tr-tight);
  font-size: var(--fs-20); line-height: var(--lh-130); color: var(--c-ink-soft);
}
.contact-card__title > * { grid-area: 1 / 1; transition: opacity 300ms linear; }
.contact-card__done { opacity: 0; }
.contact-card.is-copied .ulink { opacity: 0; }
.contact-card.is-copied .contact-card__done { opacity: 1; }
.contact-card__sub { font-size: var(--fs-13); color: var(--c-ink-muted); }
/* skiper40 Link001: underline draws from the left on hover, retracts to the right */
.ulink { position: relative; justify-self: start; }
.ulink::before {
  content: ""; position: absolute; left: 0; bottom: -0.05em; width: 100%; height: 0.05em;
  background: currentColor;
  transform: scaleX(0); transform-origin: right center;
  transition: transform 300ms var(--ease-std);
}
@media (hover: hover) {
  .contact-card:hover::before { opacity: 1; }
  .contact-card:hover .ulink::before { transform: scaleX(1); transform-origin: left center; }
}
.contact-card:active { transform: none; }

.accordion { display: grid; gap: var(--s-16); align-content: start; }
.acc {
  border: 1px solid var(--c-line);
  border-radius: var(--r-11);
  background: var(--c-surface);
}
.acc__btn {
  display: flex; align-items: center; gap: var(--s-8);
  width: 100%; min-height: 4.1875rem;
  padding: var(--s-20) var(--s-24);
  border-radius: var(--r-11);
  text-align: left;
  font-weight: 400;
  letter-spacing: var(--tr-tight);
  font-size: var(--fs-18);
  line-height: var(--lh-136);
  transition: background-color var(--d-hover) var(--ease-out);
}
.acc__n { color: var(--c-ink-muted); font-variant-numeric: tabular-nums; }
.acc__q { flex: 1; }
.acc__icon {
  flex: none; width: 10px; height: 10px; margin-left: var(--s-12);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 9 9 1M3 1h6v6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 9 9 1M3 1h6v6'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(90deg);
  transition: transform var(--d-hover) var(--ease-out);
}
.acc__btn[aria-expanded="true"] .acc__icon { transform: rotate(0deg); }
.acc__panel {
  display: grid; grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 500ms var(--ease-out), visibility 0s linear 500ms;
}
.acc__inner { overflow: hidden; }
.acc__inner p {
  padding: 0 var(--s-24) var(--s-24);
  max-width: 42rem;
  font-size: var(--fs-15);
  line-height: var(--lh-167);
  color: var(--c-ink-muted);
}
.acc__btn[aria-expanded="true"] + .acc__panel,
.acc.is-open .acc__panel {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows 500ms var(--ease-out), visibility 0s;
}
.no-js .acc__panel { grid-template-rows: 1fr; visibility: visible; }
@media (hover: hover) { .acc__btn:hover { background-color: rgb(255 255 255 / 0.025); } }

@media (min-width: 1024px) {
  .faq__grid { grid-template-columns: minmax(0, 25.8rem) minmax(0, 1fr); gap: var(--s-96); }
}

/* ---------- Final ---------- */
.final__inner { display: grid; justify-items: center; text-align: center; gap: var(--s-24); }
.final__title {
  max-width: 14ch;
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  font-weight: 600;
  line-height: var(--lh-095);
  letter-spacing: var(--tr-tight);
}
.final__lead { max-width: 30rem; font-size: var(--fs-18); line-height: var(--lh-167); letter-spacing: -0.03em; color: var(--c-ink-muted); }
.final__ctas { display: flex; flex-direction: column; gap: var(--s-16); width: 100%; margin-top: var(--s-16); }
.final__ctas .cta, .final__ctas .btn { width: 100%; }
@media (min-width: 640px) {
  .final__ctas { flex-direction: row; justify-content: center; align-items: center; width: auto; gap: var(--s-20); }
  .final__ctas .cta, .final__ctas .btn { width: auto; }
}

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--c-line-soft); padding-block: var(--s-32); }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-12); font-size: var(--fs-13); color: var(--c-ink-muted); }
.footer__brand { font-family: var(--f-display); font-weight: 800; letter-spacing: var(--tr-sig); color: var(--c-ink); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .btn__pts { display: none; }
  .btn, .btn *, .pill__indicator, .acc__panel, .acc__icon, .service__card, .reel__card img { transition-duration: 1ms !important; transition-delay: 0ms !important; }
}

/* ---------- Footer links ---------- */
.footer__links { display: flex; flex-wrap: wrap; gap: var(--s-16); }
.footer__links a, .footer__links button { color: var(--c-ink-muted); font-size: var(--fs-13); min-height: var(--hit); display: inline-flex; align-items: center; }
@media (hover: hover) { .footer__links a:hover, .footer__links button:hover { color: var(--c-ink); } }

/* ---------- Sticky CTA (phones) ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: none;
  padding: var(--s-12) var(--gutter) calc(var(--s-12) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(0deg, var(--c-bg) 40%, rgb(10 10 10 / 0));
  transform: translateY(110%);
  transition: transform 500ms var(--ease-out);
}
.dock.is-on { transform: none; }
.dock .cta, .dock .btn { width: 100%; }
@media (max-width: 639.98px) { .dock { display: block; } }

/* ---------- Cookie banner (only rendered when analytics is configured) ---------- */
.consent {
  position: fixed; z-index: 60;
  left: var(--gutter); right: var(--gutter); bottom: var(--s-16);
  display: grid; gap: var(--s-16);
  max-width: 30rem;
  padding: var(--s-20);
  border: 1px solid var(--c-line);
  border-radius: var(--r-20);
  background: rgb(17 17 17 / 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--sh-2);
  opacity: 0; transform: translateY(16px);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.consent.is-in { opacity: 1; transform: none; }
.consent.is-leaving { opacity: 0; transform: translateY(16px); }
.consent__text { font-size: var(--fs-14); line-height: var(--lh-156); color: var(--c-ink-soft); }
.consent__text a { text-decoration: underline; text-underline-offset: 3px; }
.consent__actions { display: flex; gap: var(--s-8); justify-content: flex-end; }
.consent__btn {
  min-height: var(--hit); padding: 0 var(--s-20);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-pill);
  font-size: var(--fs-14); font-weight: 500;
}
.consent__btn--accept { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
@media (min-width: 640px) { .consent { left: auto; } }

/* ---------- Simple pages: legal + 404 ---------- */
.page-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-16);
  padding-block: var(--s-24);
}
.page-head__back { display: inline-flex; align-items: center; min-height: var(--hit); font-size: var(--fs-14); color: var(--c-ink-muted); }
@media (hover: hover) { .page-head__back:hover { color: var(--c-ink); } }
.legal { padding-block: var(--s-64) var(--s-96); }
.legal__inner { max-width: 44rem; }
.legal h1 { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-100); letter-spacing: var(--tr-tight); }
.legal__updated { margin-top: var(--s-16); font-size: var(--fs-13); color: var(--c-ink-muted); }
.legal h2 { margin-top: var(--s-48); font-size: var(--fs-20); font-weight: 600; letter-spacing: -0.03em; }
.legal p, .legal li { margin-top: var(--s-12); font-size: var(--fs-15); line-height: var(--lh-172); color: var(--c-ink-soft); }
.legal ul { list-style: disc; padding-left: var(--s-20); }
.legal a { text-decoration: underline; text-underline-offset: 3px; }

.notfound { min-height: 100svh; display: grid; align-content: center; justify-items: start; gap: var(--s-24); padding-block: var(--s-96); }
.notfound__code {
  font-size: clamp(7rem, 4rem + 18vw, 18rem);
  font-weight: 800;
  line-height: var(--lh-080);
  letter-spacing: var(--tr-tight);
  font-variant-numeric: tabular-nums;
}
.notfound__title { font-size: var(--fs-h2); font-weight: 600; letter-spacing: var(--tr-tight); line-height: var(--lh-100); }
.notfound__lead { max-width: 30rem; font-size: var(--fs-18); line-height: var(--lh-167); color: var(--c-ink-muted); letter-spacing: -0.03em; }
.notfound__ctas { display: flex; flex-wrap: wrap; gap: var(--s-16); margin-top: var(--s-8); }

@media (prefers-reduced-motion: reduce) {
  .dock, .consent, .nav__bar, .menu, .menu__link, .nav__menu-icon i { transition: none; }
}

/* ---------- Loader: KAIZER mark, first visit of the session only ----------
   The wordmark is painted on the very first frame (it is the LCP), a light sweeps across it while a line fills.
   main.js plays the exit and hands over to the hero opening. Failsafe: hides itself after 4s if JS never runs. */
.loader {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--c-bg);
  animation: loader-failsafe 0s linear 4s forwards;
}
.no-js .loader, .no-loader .loader { display: none; }
html.is-loading, html.is-loading body { overflow: hidden; }
.loader__inner { display: grid; justify-items: center; gap: var(--s-24); }
.loader__mark { width: var(--s-48); height: var(--s-48); }
.loader__mark rect { fill: var(--c-ink); }
.loader__mark path { fill: var(--c-bg); }
.loader__word {
  display: flex; overflow: hidden;
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 63%;
  font-size: clamp(4.5rem, 2rem + 16vw, 13.75rem);
  line-height: var(--lh-080);
  letter-spacing: var(--tr-sig);
  padding-top: 0.06em;
  /* light sweep: the letters are clipped to a moving gradient */
  background: linear-gradient(100deg, var(--c-ink-faint) 0%, var(--c-ink-faint) 38%, var(--c-ink) 50%, var(--c-ink-faint) 62%, var(--c-ink-faint) 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: loader-sweep 1.6s var(--ease-std) 0.1s infinite;
}
.loader__word span { display: inline-block; }
.loader__word.is-lit { animation: none; background: none; color: var(--c-ink); }
.loader__bar { position: relative; width: min(16rem, 60vw); height: 1px; background: var(--c-line-strong); overflow: hidden; }
.loader__bar i { position: absolute; inset: 0; background: var(--c-ink); transform-origin: left center; transform: scaleX(0); animation: loader-fill 1.2s var(--ease-out) forwards; }
.loader__meta { display: flex; justify-content: space-between; width: min(16rem, 60vw); font-size: var(--fs-12); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--c-ink-muted); font-variant-numeric: tabular-nums; }
@keyframes loader-sweep { to { background-position: 0% 0; } }
@keyframes loader-fill { to { transform: scaleX(0.82); } }
@keyframes loader-failsafe { to { visibility: hidden; opacity: 0; pointer-events: none; } }
/* plain exit when GSAP is missing */
.loader.is-out { opacity: 0; visibility: hidden; transition: opacity 500ms var(--ease-out), visibility 0s linear 500ms; }

/* ---------- Method: overlapping fan of 6 cards (Figma 77:91) ----------
   Desktop: cards overlap like the Figma row. Hover/focus lifts and tilts the card, brings it to the front,
   and the others ease away from it (offsets set by main.js as --dx). Phones/tablets: plain readable grid. */
.method__head { display: grid; justify-items: center; gap: var(--s-16); text-align: center; }
.method__tags { justify-content: center; }   /* same chips as "The honest version" (.tags) */

.method__title { max-width: 14ch; }
.method__lead { font-size: var(--fs-14); font-weight: 700; letter-spacing: var(--tr-tight); color: var(--c-ink-muted); }

.fan { display: grid; gap: var(--s-16); margin-top: var(--s-48); }
.fan__card {
  position: relative; overflow: hidden;
  display: grid; align-content: start; gap: var(--s-16);
  min-height: 16.25rem;
  padding: calc(var(--s-48) + var(--s-8)) var(--s-28) var(--s-32);   /* Figma: icon 56 from the top */
  border-radius: 10px;
  /* Figma: black card, inner 4px white glow, and the original bloom (Figma "Mask group" 80:110, exported as SVG) */
  background: url("assets/img/method-glow.svg") center / 100% 100% no-repeat, #000;
  box-shadow: inset 0 0 4px rgb(255 255 255 / 0.25), var(--sh-2);
  color: var(--c-ink-soft);
  outline-offset: 4px;
  translate: var(--dx, 0px) var(--dy, 0px);
  rotate: var(--rot, 0deg);
  scale: var(--sc, 1);
  transition: translate 550ms var(--ease-out), rotate 550ms var(--ease-out), scale 550ms var(--ease-out), box-shadow 550ms var(--ease-out);
}
.fan__icon { width: 2.125rem; height: 2.125rem; color: var(--c-ink-soft); }
.fan__title { font-size: var(--fs-24); font-weight: 700; line-height: var(--lh-100); letter-spacing: var(--tr-tight); color: var(--c-ink); }
.fan__body { max-width: 15.5rem; font-size: var(--fs-14); font-weight: 500; line-height: var(--lh-130); letter-spacing: var(--tr-tight); }

@media (min-width: 640px) and (max-width: 1023.98px) { .fan { grid-template-columns: 1fr 1fr; } }

@media (min-width: 1024px) {
  .fan {
    --cw: min(19.0625rem, 24%);      /* 305px card */
    display: flex; gap: 0;
    margin-top: var(--s-64);
    padding-block: var(--s-24);      /* room for the lift */
  }
  .fan__item { position: relative; flex: none; width: var(--cw); z-index: var(--z, 1); }
  /* 6 cards + 5 negative gaps fill the row exactly (Figma: 305 wide, 195 apart at 1280) */
  .fan__item + .fan__item { margin-left: calc((100% - var(--cw) * 6) / 5); }
  .fan__card { min-height: 16.25rem; }
  .fan.is-active .fan__card { box-shadow: inset 0 0 4px rgb(255 255 255 / 0.2), 0 12px 32px rgb(0 0 0 / 0.55); }
  .fan .fan__item.is-on .fan__card { box-shadow: inset 0 0 4px rgb(255 255 255 / 0.35), 0 28px 60px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.08); }
}
@media (prefers-reduced-motion: reduce) {
  .fan__card { transition-duration: 1ms; }
}

/* ---------- Light rays: top of the page only (assets/js/light-rays.js) ---------- */
.rays {
  position: absolute; left: 0; right: 0; top: 0; z-index: 0;
  height: 100vh; height: 100svh;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.rays canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1600ms var(--ease-out); }
.rays canvas.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rays canvas { transition: none; } }
.has-rays .hero, .has-rays .marquee { position: relative; z-index: 1; }
.has-rays .marquee { background: transparent; }