/* =========================================================
   Ryan Mock, personal site
   White base. Ink type. One gradient family (sky, violet,
   pink) used sparingly: a few words, one aura, the map.
   ========================================================= */

:root {
  --bg: #FFFFFF;
  --bg-2: #F6F6F3;
  --ink: #0F0F12;
  --ink-60: rgba(15, 15, 18, 0.64);
  --ink-40: rgba(15, 15, 18, 0.46);
  --line: rgba(15, 15, 18, 0.1);
  --line-strong: rgba(15, 15, 18, 0.22);
  --panel: rgba(15, 15, 18, 0.025);
  --panel-2: rgba(15, 15, 18, 0.05);

  /* gradient family */
  --c1: #0284C7;   /* sky, deep enough to pass 3:1 as small text on white */
  --c2: #7C3AED;   /* violet */
  --c3: #EC4899;   /* pink */
  --grad: linear-gradient(100deg, var(--c1) 0%, var(--c2) 50%, var(--c3) 100%);
  --accent: var(--c2);

  /* dark stage for the live map */
  --stage: #0E0E14;
  --stage-ink: #F4F4F8;

  --font-head: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;
  --slow: 1.4s;
  --gutter: clamp(20px, 5vw, 72px);
  --section: clamp(88px, 12vw, 176px);
  --max: 1440px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--c2); color: #fff; }
html { caret-color: var(--c2); accent-color: var(--c2); }

:focus-visible { outline: 2px solid var(--c2); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible, .tile:focus-visible { outline-offset: 4px; }

.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;
}

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ---------- type ---------- */

.kicker {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.kicker--muted { color: var(--ink-40); }

.giant {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.035em;
  margin: 0;
}

.giant .line { display: block; overflow: hidden; padding-bottom: 0.04em; overflow-wrap: anywhere; }
.giant .line > span { display: inline-block; }

.giant--xl { font-size: clamp(56px, 11vw, 176px); }
.giant--lg { font-size: clamp(44px, 8.5vw, 132px); }
.giant--md { font-size: clamp(36px, 6vw, 92px); }

.accent { color: var(--accent); }

/* gradient ink, used on a handful of words only */
.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.outline { color: var(--ink-40); }

.lede {
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.45;
  color: var(--ink-60);
  max-width: 34em;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 0.4s var(--ease-out), background 0.3s, color 0.3s, box-shadow 0.4s;
  will-change: transform;
}

.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -18px rgba(15, 15, 18, 0.6); }
.btn--ghost { border: 1px solid var(--line-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }

.btn:active { transform: scale(0.97); transition-duration: 0.12s; }

.btn svg { width: 16px; height: 16px; transition: transform 0.4s var(--ease-out); }
.btn:hover svg { transform: translate(3px, -3px); }

/* ---------- nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 14px 0;
  transition: background 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}

.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-color: var(--line);
}

.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.wordmark {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.wordmark .mono {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--ink); color: #fff;
  font-size: 12px; letter-spacing: -0.02em;
  transition: transform 0.6s var(--ease-out);
}
.wordmark:hover .mono { transform: rotate(-6deg) scale(1.05); }
.nav__links a.is-current { color: var(--ink); }
.nav__links a.is-current::after { transform: scaleX(1); }

.nav__links { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }

.nav__links a {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-60);
  position: relative;
  transition: color 0.3s;
}

.nav__links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}

.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav .btn { padding: 11px 18px; font-size: 12px; }

@media (max-width: 760px) {
  .nav__links { display: none; }
}

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

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* the one soft aura on the page */
.hero__media::before {
  content: '';
  position: absolute;
  right: -10%;
  top: -20%;
  width: 70vw;
  height: 90vh;
  background:
    radial-gradient(closest-side, rgba(2, 132, 199, 0.22), transparent 70%) 20% 30% / 60% 60% no-repeat,
    radial-gradient(closest-side, rgba(124, 58, 237, 0.22), transparent 70%) 70% 40% / 60% 70% no-repeat,
    radial-gradient(closest-side, rgba(236, 72, 153, 0.18), transparent 70%) 55% 85% / 70% 50% no-repeat;
  filter: blur(48px);
  opacity: 0;
  animation: aura-in 2.4s var(--ease-out) 0.3s forwards, aura-drift 26s var(--ease-in-out) 2.7s infinite alternate;
  will-change: transform, opacity;
}

@keyframes aura-in { to { opacity: 1; } }
@keyframes aura-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-6%, 5%, 0) scale(1.12); }
}

.hero__media img {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  object-position: 50% 0%;
  transform: translate3d(0, var(--py, 0px), 0) scale(1.04);
  transform-origin: 100% 0%;
  animation: hero-zoom 2.8s var(--ease-out) forwards;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%), linear-gradient(180deg, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%), linear-gradient(180deg, #000 70%, transparent 100%);
  mask-composite: intersect;
}

@keyframes hero-zoom { to { transform: translate3d(0, var(--py, 0px), 0) scale(1); } }

@media (max-width: 900px) {
  .hero__media img {
    width: 100%; height: 100%;
    object-position: 50% 0%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 66%);
    -webkit-mask-composite: source-over;
    mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 66%);
    mask-composite: add;
  }
  .hero__media::before { right: -30%; width: 120vw; }
}

.hero__content {
  position: relative;
  z-index: 1;
  padding-block: clamp(120px, 18vh, 200px) clamp(40px, 6vh, 80px);
  display: grid;
  gap: 28px;
}

.hero__name { margin-top: 8px; }

.hero__name .char {
  display: inline-block;
  transform: translateY(115%) rotate(4deg);
  opacity: 0;
  transform-origin: 0 100%;
}

.is-loaded .hero__name .char {
  animation: rise 1.4s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 110ms + var(--j, 0) * 45ms + 200ms);
}

@keyframes rise { to { transform: translateY(0) rotate(0); opacity: 1; } }

.hero__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: min(46%, 640px);
}

.hero__sub { font-size: clamp(16px, 1.2vw, 19px); }

.hero__headline {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

.hero__sub { margin: 0; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.hero__fade { opacity: 0; transform: translateY(40px); }
.is-loaded .hero__fade {
  animation: fade-up 1.4s var(--ease-out) forwards;
  animation-delay: var(--d, 900ms);
}

@keyframes fade-up { to { opacity: 1; transform: translateY(0); } }

.hero__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-40);
  font-family: var(--font-head);
}

.scroll-cue { display: inline-flex; align-items: center; gap: 10px; }
.scroll-cue span { display: inline-block; width: 1px; height: 36px; background: var(--line-strong); position: relative; overflow: hidden; }
.scroll-cue span::after {
  content: ''; position: absolute; inset: 0; background: var(--ink);
  animation: cue 1.8s var(--ease-in-out) infinite;
}
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

@media (max-width: 900px) {
  .hero__row { max-width: none; }
  .hero__content { padding-top: 58vh; }
}

/* ---------- reveal system ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(56px);
  transition: opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
  will-change: opacity, transform;
}

[data-reveal="scale"] { transform: translateY(40px) scale(0.94); }
[data-reveal="moment"] { opacity: 1; transform: scale(0.96); }
[data-reveal="moment"].is-visible { transform: scale(1); }
[data-reveal].is-visible { opacity: 1; transform: none; }

.giant[data-reveal] { opacity: 1; transform: none; }
.giant[data-reveal] .line > span { transform: translateY(112%); filter: blur(6px); transition: transform 1.3s var(--ease-out), filter 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms); }
.giant[data-reveal].is-visible .line > span { transform: translateY(0); filter: blur(0); }

/* ---------- section scaffolding ---------- */

.section { padding-block: var(--section); position: relative; }

.section-head { display: grid; gap: 20px; margin-bottom: clamp(40px, 5vw, 72px); }

.section-index {
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-40);
  text-transform: uppercase;
  margin: 0 0 16px;
}

/* ---------- mission ---------- */

.mission { padding-block: var(--section); background: var(--bg-2); }

.statement {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 20em;
}

.statement .hl {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mission__foot {
  margin-top: clamp(40px, 5vw, 72px);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* ---------- ACAM ---------- */

.acam { --accent: var(--c1); }

.acam__intro { margin-bottom: clamp(48px, 6vw, 88px); }
.acam__intro p { margin: 0; }

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.card {
  background: var(--bg-2);
  border-radius: var(--r-md);
  padding: clamp(24px, 3vw, 40px);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 28px;
  min-height: 200px;
  position: relative;
  transition: transform 0.9s var(--ease-out), box-shadow 0.9s var(--ease-out);
}

.card:hover { transform: translateY(-6px); box-shadow: 0 40px 80px -48px rgba(124, 58, 237, 0.35); }

.card__num {
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-40);
  display: flex;
  justify-content: space-between;
}

.card__num { font-variant-numeric: tabular-nums; }
.card__num em { font-style: normal; color: var(--c1); }
.card:nth-child(3n+2) .card__num em { color: var(--c2); }
.card:nth-child(3n) .card__num em { color: var(--c3); }

.card p {
  margin: 0;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.5;
}

.card--callout {
  grid-column: 1 / -1;
  background: var(--ink);
  color: #fff;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: end;
  gap: 24px;
}

.card--callout { border-radius: var(--r-lg); }
.card--callout .card__num { color: rgba(255, 255, 255, 0.5); }
.card--callout .card__num em { color: #fff; }

.card--callout p {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 18em;
  grid-column: 1 / -1;
}

.card--callout .card__stat {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-align: right;
}

.card--callout .card__stat b {
  font-weight: inherit;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.card--callout .card__stat small {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.6);
}

.credential {
  margin-top: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
  padding: 28px 0 0;
  border-top: 1px solid var(--line);
  max-width: 760px;
}

.credential__mark {
  width: 44px; height: 44px;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--grad) border-box;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink);
  flex: none;
}

.credential p { margin: 0; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.45; color: var(--ink-60); }
.credential p strong { font-weight: 500; color: var(--ink); }

@media (max-width: 760px) {
  .cards { grid-template-columns: 1fr; }
  .card--callout { grid-template-columns: 1fr; }
  .card--callout .card__stat { text-align: left; }
}

/* ---------- showreel ---------- */

.reel { padding: 0 0 clamp(88px, 12vw, 176px); background: var(--bg); }

.reel__panel {
  position: relative;
  width: min(100% - 2 * var(--gutter), var(--max));
  margin: 0 auto;
  min-height: clamp(460px, 78vh, 760px);
  border-radius: clamp(28px, 4vw, 56px);
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  align-content: center;
  gap: clamp(28px, 4vw, 56px);
  padding-block: clamp(48px, 6vw, 96px);
  transform: scale(0.88) translateY(60px);
  opacity: 0;
  transition: transform 1.6s var(--ease-out), opacity 1.2s var(--ease-out);
  will-change: transform;
}

[data-reveal="reel"] { opacity: 1; transform: none; }
[data-reveal="reel"].is-visible .reel__panel { transform: none; opacity: 1; }

.reel__aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.reel__aurora i {
  position: absolute;
  width: 55vw; height: 55vw;
  max-width: 820px; max-height: 820px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.75;
  mix-blend-mode: screen;
  will-change: transform;
}
.reel__aurora i:nth-child(1) { left: -15%; top: -30%; background: radial-gradient(circle, var(--c1), transparent 62%); animation: drift-a 22s var(--ease-in-out) infinite alternate; }
.reel__aurora i:nth-child(2) { right: -20%; top: -10%; background: radial-gradient(circle, var(--c2), transparent 62%); animation: drift-b 26s var(--ease-in-out) infinite alternate; }
.reel__aurora i:nth-child(3) { left: 20%; bottom: -55%; background: radial-gradient(circle, var(--c3), transparent 62%); animation: drift-c 30s var(--ease-in-out) infinite alternate; }

@keyframes drift-a { to { transform: translate3d(22%, 30%, 0) scale(1.15); } }
@keyframes drift-b { to { transform: translate3d(-28%, 34%, 0) scale(0.9); } }
@keyframes drift-c { to { transform: translate3d(18%, -30%, 0) scale(1.2); } }

.reel__track { position: relative; z-index: 1; display: grid; gap: 6px; overflow: hidden; }

.reel__row {
  display: flex;
  width: max-content;
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.95;
  white-space: nowrap;
}

.reel__row span { padding-right: 0.35em; }
.reel__row span::after { content: '\00b7'; margin-left: 0.35em; opacity: 0.35; }

.reel__row--a { font-size: clamp(64px, 12vw, 190px); animation: reel-left 46s linear infinite; }
.reel__row--b {
  font-size: clamp(28px, 4.6vw, 72px);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.6);
  animation: reel-right 38s linear infinite;
}

@keyframes reel-left { to { transform: translateX(-50%); } }
@keyframes reel-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.reel__caption {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  width: min(100% - 2 * clamp(24px, 4vw, 64px), 640px);
  text-align: center;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(15px, 1.15vw, 18px);
}

@media (prefers-reduced-motion: reduce) {
  .reel__row, .reel__aurora i { animation: none; }
  .reel__panel { transform: none; opacity: 1; }
}

/* ---------- study ---------- */

.study { --accent: var(--c3); background: var(--bg-2); }

.study__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}

.study__list { margin: 0; }

.study__item {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.study__item dt {
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c1);
}
.study__item:nth-child(3) dt { color: var(--c2); }

.study__item dd {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink-60);
}

.study__item dd strong { font-weight: 600; color: var(--ink); }
.study__item--hl dt { color: var(--accent); }
.study__item--hl dd strong { color: var(--accent); }

@media (max-width: 900px) {
  .study__grid { grid-template-columns: 1fr; }
  .study__item { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- built with Claude ---------- */

.built { --accent: var(--c2); position: relative; overflow: hidden; background: var(--bg); }


.built::before {
  content: '';
  position: absolute;
  left: -10%; top: 0;
  width: 60vw; height: 36vh;
  background:
    radial-gradient(closest-side, rgba(124, 58, 237, 0.14), transparent 70%) 30% 40% / 70% 70% no-repeat,
    radial-gradient(closest-side, rgba(236, 72, 153, 0.1), transparent 70%) 70% 60% / 60% 60% no-repeat;
  filter: blur(50px);
  pointer-events: none;
}

.built .wrap { position: relative; }

.built__head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
}

@media (max-width: 900px) { .built__head { grid-template-columns: 1fr; } }

/* stage: the live map, the one dark surface on the page */

.stage {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--stage);
  color: var(--stage-ink);
  box-shadow: 0 60px 120px -60px rgba(15, 15, 18, 0.55), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.stage__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 244, 248, 0.5);
}

.stage__dots { display: inline-flex; gap: 6px; }
.stage__dots i { width: 8px; height: 8px; border-radius: 50%; }
.stage__dots i:nth-child(1) { background: var(--c1); }
.stage__dots i:nth-child(2) { background: var(--c2); }
.stage__dots i:nth-child(3) { background: var(--c3); }

.stage__body { position: relative; aspect-ratio: 16 / 9; min-height: 420px; }

@media (max-width: 760px) {
  .stage__body { aspect-ratio: auto; height: 720px; }
  .stage__bar .stage__legend { display: none; }
  .stage__bar { justify-content: flex-start; }
  .stage__panel { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .stage__hint { bottom: 12px; right: 12px; }
}

.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }

.stage__panel {
  position: absolute;
  left: 18px; bottom: 18px;
  max-width: 340px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(14, 14, 20, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transform: translateY(12px);
  opacity: 0;
  transition: opacity 0.35s, transform 0.5s var(--ease-out);
  pointer-events: none;
}

.stage__panel.is-open { opacity: 1; transform: none; }
.stage__panel .kicker { margin-bottom: 6px; display: block; color: var(--c1); }
.stage__panel h3 { margin: 0 0 6px; font-family: var(--font-head); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.stage__panel p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(244, 244, 248, 0.7); }

.stage__hint {
  position: absolute;
  right: 18px; bottom: 18px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244, 244, 248, 0.45);
  font-family: var(--font-head);
  pointer-events: none;
  transition: opacity 0.4s;
}

.stage__legend {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 16px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}

.stage__legend span { display: inline-flex; align-items: center; gap: 8px; }
.stage__legend i { width: 8px; height: 8px; border-radius: 50%; background: rgba(244, 244, 248, 0.5); }
.stage__legend i.a { background: var(--c1); }
.stage__legend i.b { background: var(--c2); }
.stage__legend i.c { background: var(--c3); }

/* maps strip */

.maps { margin-top: clamp(40px, 5vw, 72px); }

.maps__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 20px;
}

.maps__head p { margin: 0; color: var(--ink-60); font-size: 15px; max-width: 28em; text-align: right; }

@media (max-width: 640px) {
  .maps__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .maps__head p { text-align: left; }
}

.maps__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 1fr);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.map {
  scroll-snap-align: start;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-2);
  display: grid;
  margin: 0;
  transition: transform 0.9s var(--ease-out), box-shadow 0.9s var(--ease-out);
}

.map:hover { transform: translateY(-6px); box-shadow: 0 40px 80px -50px rgba(15, 15, 18, 0.4); }

.map__img { aspect-ratio: 16 / 10; overflow: hidden; position: relative; background: var(--stage); }
.map__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s var(--ease-out); }
.map:hover .map__img img { transform: scale(1.04); }

.map__meta {
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.06em;
}

.map__meta span:last-child { color: var(--ink-40); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }

/* tiles */

.tiles {
  margin-top: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.tile {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--bg-2);
  padding: clamp(24px, 2.8vw, 38px);
  display: grid;
  gap: 18px;
  align-content: start;
  overflow: hidden;
  transition: transform 0.9s var(--ease-out), box-shadow 0.9s var(--ease-out);
}

.tile:hover { transform: translateY(-6px); box-shadow: 0 40px 80px -48px rgba(2, 132, 199, 0.35); }

.tile h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(20px, 1.8vw, 28px);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.tile p { margin: 0; color: var(--ink-60); font-size: 15px; line-height: 1.55; }

.tile__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.tile__arrow {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  transition: background 0.3s, border-color 0.3s, transform 0.5s var(--ease-out), color 0.3s;
}

.tile__arrow svg { width: 16px; height: 16px; }
.tile:hover .tile__arrow { background: var(--ink); border-color: var(--ink); color: #fff; transform: rotate(45deg); }

.tile--wide { grid-column: span 7; grid-template-rows: auto auto 1fr; }
.tile--tall { grid-column: span 5; }
.tile--full { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }

@media (max-width: 900px) {
  .tile--wide, .tile--tall { grid-column: 1 / -1; }
  .tile--full { grid-template-columns: 1fr; }
}

.browser {
  margin-top: 6px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 40px 80px -50px rgba(15, 15, 18, 0.5);
  transform: perspective(1200px) rotateX(5deg) translateY(10px);
  transform-origin: 50% 100%;
  transition: transform 1.2s var(--ease-out);
}

.tile:hover .browser { transform: perspective(1200px) rotateX(0deg) translateY(0); }

.browser__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  color: var(--ink-40);
  font-family: var(--font-head);
  letter-spacing: 0.06em;
}

.browser__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.browser__bar span { margin-left: 8px; padding: 4px 10px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); flex: 1; }

.browser img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

.tile__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tile__list li {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline;
  font-family: var(--font-head); font-size: 14px; letter-spacing: 0.02em;
  padding: 10px 14px; border-radius: 10px; background: var(--bg);
}
.tile__list li span:first-child { color: var(--accent); font-size: 11px; letter-spacing: 0.14em; }

.tile--ink { background: var(--ink); color: #fff; }
.tile--ink p { color: rgba(255, 255, 255, 0.65); }
.tile--ink .kicker { color: var(--c1); }

.tile__big {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-align: right;
  color: #fff;
}

@media (max-width: 900px) { .tile__big { text-align: left; } }

/* ---------- writing ---------- */

.writing { --accent: var(--c3); background: var(--bg-2); }

.writing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}

.writing__list { list-style: none; margin: 0; padding: 0; }

.writing__list li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.writing__list h3 { margin: 0 0 8px; font-family: var(--font-head); font-weight: 600; font-size: clamp(20px, 1.9vw, 30px); letter-spacing: -0.02em; }
.writing__list p { margin: 0; color: var(--ink-60); }
.writing__list .card__num { align-self: start; }
.writing__list .tag {
  font-family: var(--font-head); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--line); background: var(--bg);
  padding: 6px 10px; border-radius: 999px; white-space: nowrap;
}

@media (max-width: 900px) {
  .writing__grid { grid-template-columns: 1fr; }
  .writing__list li { grid-template-columns: 48px 1fr; }
  .writing__list .tag { grid-column: 2; justify-self: start; }
}

/* ---------- marquee ---------- */

.marquee {
  padding: 36px 0;
  overflow: hidden;
  background: var(--bg);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track { display: flex; width: max-content; animation: marquee 70s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; }

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding: 0 28px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 22px);
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--ink-60);
}

.marquee__item::after {
  content: '';
  width: 6px; height: 6px;
  background: var(--c2);
  border-radius: 50%;
  flex: none;
}

.marquee__item:nth-child(3n+1)::after { background: var(--c1); }
.marquee__item:nth-child(3n)::after { background: var(--c3); }

@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- footer ---------- */

.footer { padding-block: clamp(72px, 10vw, 140px) 40px; background: var(--bg); }

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 96px);
}

.footer__links { display: grid; gap: 14px; justify-items: start; }
.footer__links a {
  font-family: var(--font-head); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-60); display: inline-flex; align-items: center; gap: 10px; transition: color 0.3s;
}
.footer__links a:hover { color: var(--ink); }
.footer__links a svg { width: 14px; height: 14px; }

.footer__bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-40);
}

.footer__built {
  font-family: var(--font-head);
  font-weight: 500;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.footer__built::before { content: ''; width: 8px; height: 8px; background: var(--c2); border-radius: 50%; }

@media (max-width: 900px) { .footer__top { grid-template-columns: 1fr; } }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
  [data-reveal], .giant[data-reveal] .line > span, .hero__name .line > span, .hero__fade { opacity: 1 !important; transform: none !important; }
  .hero__media::before { opacity: 1; }
  .marquee__track { animation: none; }
}

/* ---------- case studies ---------- */

.case {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(28px, 3.5vw, 56px);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  margin-bottom: 20px;
  transform-style: preserve-3d;
  transition: transform 1.2s var(--ease-out), box-shadow 1.2s var(--ease-out), opacity var(--slow) var(--ease-out);
}

.case.is-visible:hover { box-shadow: 0 60px 120px -70px rgba(124, 58, 237, 0.35); }

.case--ds { background: var(--ink); color: #fff; }
.case--ds .kicker { color: var(--c1); }
.case--ds .case__copy p { color: rgba(255, 255, 255, 0.72); }

.case__copy { display: grid; gap: 18px; }
.case__copy p { margin: 0; color: var(--ink-60); font-size: clamp(15px, 1.1vw, 17px); }

.case__title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.case__facts {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}

.case__facts li {
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-60);
}

.case--ds .case__facts li { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.8); }
.case__facts li:nth-child(1) { box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.5); }
.case__facts li:nth-child(2) { box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.5); }
.case__facts li:nth-child(3) { box-shadow: inset 0 0 0 1px rgba(236, 72, 153, 0.5); }
.case__facts li:nth-child(4) { box-shadow: inset 0 0 0 1px var(--line-strong); }

.case__visual {
  position: relative;
  min-height: 460px;
  perspective: 1400px;
}

[data-float] { will-change: transform; transition: transform 0.3s linear; }

.frame {
  position: absolute;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 50px 100px -50px rgba(15, 15, 18, 0.5);
}

.frame img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }

.frame--browser {
  left: 0; top: 6%;
  width: 78%;
  aspect-ratio: 16 / 10.6;
  border-radius: var(--r-sm);
  display: grid;
  grid-template-rows: auto 1fr;
}

.frame__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-head);
  font-size: 11px;
  color: var(--ink-40);
}

.frame__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.frame__bar span { margin-left: 8px; padding: 3px 10px; border-radius: 6px; background: #fff; border: 1px solid var(--line); flex: 1; }

.frame--phone {
  right: 0; bottom: 0;
  width: 28%;
  aspect-ratio: 9 / 18.5;
  border-radius: 26px;
  border: 6px solid var(--ink);
  background: var(--ink);
}

.frame--phone img { border-radius: 20px; object-position: 0 0; }

.frame--banner {
  left: 6%; bottom: -2%;
  width: 52%;
  aspect-ratio: 16 / 5;
  border-radius: 12px;
}

/* design system specimen */

.case__visual--ds { min-height: 520px; }

.spec {
  position: absolute;
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  padding: 16px 18px;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6);
}

.spec__label {
  display: block;
  font-family: var(--font-head);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 12px;
}

.spec--swatches { left: 0; top: 0; width: 44%; }
.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.swatches i { display: block; aspect-ratio: 1; border-radius: 8px; }

.spec--type { left: 0; bottom: 8%; width: 58%; }
.spec__h1 { font-weight: 700; font-size: clamp(26px, 2.6vw, 40px); line-height: 0.98; letter-spacing: -0.02em; }
.spec__h3 { font-weight: 700; font-size: 16px; margin-top: 14px; }
.spec__body { font-size: 13px; color: #4A5A6A; margin-top: 4px; }

.spec--chips { right: 0; top: 14%; width: 50%; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips b { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 9px; border-radius: 6px; }
.spec__btns { display: flex; gap: 8px; margin-top: 12px; }
.spec__btn { font-size: 12px; font-weight: 700; padding: 9px 14px; border-radius: 999px; background: #0F13D6; color: #fff; }
.spec__btn--teal { background: #00D4D4; color: #fff; box-shadow: 0 0 0 4px rgba(0, 212, 212, 0.25); }

.spec--render { right: 4%; bottom: 0; width: 46%; padding: 0; overflow: hidden; aspect-ratio: 16 / 9; }
.spec--render img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spec__label--onimage { position: absolute; left: 12px; bottom: 10px; margin: 0; color: #fff; background: rgba(15, 15, 18, 0.55); padding: 5px 8px; border-radius: 6px; }

.spec--mark { left: 46%; top: 2%; width: 72px; padding: 14px; border-radius: 50%; aspect-ratio: 1; display: grid; place-items: center; }
.spec--mark img { width: 100%; height: auto; }

@media (max-width: 900px) {
  .case { grid-template-columns: 1fr; padding: 22px; }
  .case--ds .case__visual { order: 2; }
  .case__visual { min-height: 0; aspect-ratio: 4 / 3.4; }
  .case__visual--ds { aspect-ratio: 4 / 3.8; }
  .spec { padding: 12px 14px; }
  .spec__h1 { font-size: 22px; }
  .spec--type { width: 62%; }
  .spec--chips { width: 54%; }
  .spec--mark { width: 52px; padding: 10px; }
}

/* ---------- selected work ---------- */

.work { --accent: var(--c1); background: var(--bg); }
.case--work .case__copy .btn { justify-self: start; margin-top: 6px; }
.case__note { font-size: 13px !important; color: var(--ink-40) !important; margin-top: 4px; }
.case--ds .case__note { color: rgba(255, 255, 255, 0.45) !important; }
.case--alt .frame--browser { left: auto; right: 0; }
.frame--phone-left { right: auto; left: 0; }
.spec__diamond { display: block; width: 26px; height: 26px; border-radius: 6px; background: var(--grad); transform: rotate(45deg); }
.case--ds .spec--type .spec__h1 { font-size: clamp(22px, 2.2vw, 34px); line-height: 1; margin-bottom: 4px; }

/* ---------- theme explorer ---------- */

.explore { --accent: var(--c2); background: var(--bg-2); }

.explorer { display: grid; gap: 18px; }

.explorer__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-60);
  transition: transform 0.6s var(--ease-out), background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.6s;
}
.chip i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.chip:hover { transform: translateY(-2px); color: var(--ink); border-color: var(--line-strong); }
.chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 20px 40px -24px rgba(15, 15, 18, 0.5); }
.chip:active { transform: scale(0.97); }

.explorer__frame { position: relative; width: 100%; aspect-ratio: auto; border-radius: var(--r-md); box-shadow: 0 60px 120px -60px rgba(15, 15, 18, 0.45); }
.explorer__frame .frame__bar { position: relative; z-index: 2; }
.explorer__note { margin: 14px 0 0; font-size: 15px; color: var(--ink-60); }
.explorer__note b { font-family: var(--font-head); color: var(--ink); font-weight: 600; margin-right: 6px; }

/* the mock site inside the frame, themed by data-theme */

.mock {
  --m-bg: #FFFFFF; --m-surface: #F6F6F3; --m-ink: #0F0F12; --m-muted: rgba(15, 15, 18, 0.62);
  --m-accent: #7C3AED; --m-accent2: #0284C7; --m-line: rgba(15, 15, 18, 0.1);
  --m-grad: linear-gradient(135deg, #0284C7, #7C3AED 55%, #EC4899);
  --m-head: 'Space Grotesk', sans-serif; --m-case: uppercase; --m-track: -0.035em; --m-weight: 700; --m-radius: 22px; --m-pill: 999px;
  --m-aura: 0.18;
  position: relative;
  overflow: hidden;
  background: var(--m-bg);
  color: var(--m-ink);
  padding: clamp(18px, 2.6vw, 40px) clamp(18px, 3vw, 48px) clamp(18px, 2.6vw, 36px);
  min-height: 520px;
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  align-content: space-between;
  transition: background 0.9s var(--ease-out), color 0.9s var(--ease-out);
  font-family: var(--font-body);
}

.mock__aura {
  position: absolute; right: -10%; top: -30%; width: 60%; height: 120%;
  background: var(--m-grad);
  filter: blur(80px);
  opacity: var(--m-aura);
  transition: opacity 0.9s, background 0.9s;
  pointer-events: none;
}

.mock > * { position: relative; z-index: 1; }

.mock__nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 12px; }
.mock__mark { font-family: var(--m-head); font-weight: var(--m-weight); text-transform: var(--m-case); letter-spacing: 0.08em; display: inline-flex; align-items: center; gap: 8px; }
.mock__mark b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--m-ink); color: var(--m-bg); font-size: 9px; letter-spacing: 0; transition: background 0.9s, color 0.9s, border-radius 0.9s; }
.mock__links { display: flex; gap: 18px; color: var(--m-muted); text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; }
.mock__pill { padding: 8px 14px; border-radius: var(--m-pill); background: var(--m-ink); color: var(--m-bg); font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; transition: background 0.9s, color 0.9s, border-radius 0.9s; }

.mock__hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(20px, 3vw, 48px); align-items: center; }
.mock__copy { display: grid; gap: 12px; }
.mock__kicker { font-family: var(--m-head); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--m-accent); font-weight: 600; transition: color 0.9s; }
.mock__name { margin: 0; font-family: var(--m-head); font-weight: var(--m-weight); text-transform: var(--m-case); letter-spacing: var(--m-track); line-height: 0.92; font-size: clamp(44px, 5.2vw, 84px); display: grid; transition: letter-spacing 0.6s; }
.mock__headline { margin: 6px 0 0; font-family: var(--m-head); font-weight: 500; font-size: clamp(17px, 1.5vw, 24px); line-height: 1.2; letter-spacing: -0.01em; }
.mock__sub { margin: 0; font-size: 14px; line-height: 1.55; color: var(--m-muted); max-width: 32em; }
.mock__cta { justify-self: start; margin-top: 6px; padding: 12px 18px; border-radius: var(--m-pill); background: var(--m-accent); color: #fff; font-family: var(--m-head); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.9s, border-radius 0.9s; }

.mock__portrait {
  position: relative;
  aspect-ratio: 4 / 4.6;
  border-radius: var(--m-radius);
  background: var(--m-grad);
  transition: border-radius 0.9s, background 0.9s;
  overflow: hidden;
}
.mock__portrait::after { content: ''; position: absolute; inset: 0; }
.mock__tag { position: absolute; left: 14px; bottom: 14px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.85); color: #0F0F12; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }

.mock__bar { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 16px; border-top: 1px solid var(--m-line); font-family: var(--m-head); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--m-muted); transition: border-color 0.9s; }

/* themes */
.mock[data-theme="paper"] { --m-bg: #FBF8F2; --m-surface: #F2EDE3; --m-ink: #161412; --m-muted: rgba(22,20,18,0.62); --m-accent: #C2552E; --m-accent2: #C2552E; --m-line: rgba(22,20,18,0.1); --m-grad: linear-gradient(135deg, #E8C9A8, #C2552E); --m-head: 'Fraunces', serif; --m-case: none; --m-track: -0.02em; --m-weight: 600; --m-radius: 18px; --m-pill: 8px; --m-aura: 0.2; }
.mock[data-theme="slate"] { --m-bg: #0F1720; --m-surface: #162230; --m-ink: #EEF2F6; --m-muted: rgba(238,242,246,0.66); --m-accent: #5EEAD4; --m-accent2: #5EEAD4; --m-line: rgba(238,242,246,0.12); --m-grad: linear-gradient(135deg, #1C3A4A, #5EEAD4); --m-head: 'Manrope', sans-serif; --m-case: uppercase; --m-track: -0.03em; --m-weight: 800; --m-radius: 14px; --m-pill: 10px; --m-aura: 0.22; }
.mock[data-theme="slate"] .mock__cta, .mock[data-theme="slate"] .mock__pill { color: #0F1720; }
.mock[data-theme="chair"] { --m-bg: #111214; --m-surface: #17181B; --m-ink: #F2EFE8; --m-muted: rgba(242,239,232,0.62); --m-accent: #C2A66B; --m-accent2: #C2A66B; --m-line: rgba(242,239,232,0.12); --m-grad: linear-gradient(135deg, #2A2418, #C2A66B); --m-head: 'Newsreader', serif; --m-case: none; --m-track: -0.015em; --m-weight: 500; --m-radius: 8px; --m-pill: 6px; --m-aura: 0.16; }
.mock[data-theme="chair"] .mock__cta { color: #111214; }
.mock[data-theme="harbour"] { --m-bg: #F1F7F5; --m-surface: #E3F0EC; --m-ink: #0B2B27; --m-muted: rgba(11,43,39,0.62); --m-accent: #0F7C72; --m-accent2: #8E6A1E; --m-line: rgba(11,43,39,0.1); --m-grad: linear-gradient(135deg, #0F7C72, #8FD3C8); --m-head: 'Sora', sans-serif; --m-case: none; --m-track: -0.03em; --m-weight: 700; --m-radius: 32px; --m-pill: 999px; --m-aura: 0.25; }
.mock[data-theme="sunrise"] { --m-bg: #FFFFFF; --m-surface: #FBF6F1; --m-ink: #141215; --m-muted: rgba(20,18,21,0.62); --m-accent: #F43F5E; --m-accent2: #F59E0B; --m-line: rgba(20,18,21,0.1); --m-grad: linear-gradient(135deg, #F59E0B, #F43F5E 55%, #D946EF); --m-head: 'Space Grotesk', sans-serif; --m-case: uppercase; --m-track: -0.035em; --m-weight: 700; --m-radius: 32px; --m-pill: 999px; --m-aura: 0.4; }

@media (max-width: 760px) {
  .mock__hero { grid-template-columns: 1fr; }
  .mock__portrait { aspect-ratio: 16 / 9; }
  .mock__links { display: none; }
  .mock { min-height: 0; }
}

/* three directions */

.directions { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.directions__copy h3 { margin: 10px 0 12px; font-family: var(--font-head); font-weight: 600; font-size: clamp(22px, 2.2vw, 34px); line-height: 1.08; letter-spacing: -0.025em; }
.directions__copy p { margin: 0; color: var(--ink-60); }
.directions__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.thumb { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-md); padding: 14% 12%; display: flex; flex-direction: column; gap: 6%; overflow: hidden; box-shadow: 0 30px 60px -40px rgba(15, 15, 18, 0.4); }
.thumb i { display: block; border-radius: 4px; }
.thumb .t-kicker { width: 40%; height: 4%; opacity: 0.7; }
.thumb .t-name { width: 82%; height: 11%; border-radius: 6px; }
.thumb .t-name--short { width: 58%; }
.thumb .t-line { width: 90%; height: 4%; opacity: 0.5; }
.thumb .t-line--short { width: 64%; }
.thumb .t-band { margin-top: auto; width: 100%; height: 22%; border-radius: 8px; }
.thumb .t-table { margin-top: auto; width: 100%; height: 26%; border-radius: 8px; background-image: repeating-linear-gradient(0deg, transparent 0 22%, rgba(255,255,255,0.18) 22% 24%); }
.thumb .t-photo { width: 34%; aspect-ratio: 1; height: auto; border-radius: 50%; margin-bottom: 4%; }
.thumb__label { position: absolute; right: 12px; top: 10px; font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; opacity: 0.6; }

.thumb--a { background: #F2F5F4; color: #0F1B1A; }
.thumb--a i { background: #0F1B1A; }
.thumb--a .t-kicker, .thumb--a .t-band { background: #1F5F5B; }
.thumb--b { background: #111214; color: #F2EFE8; }
.thumb--b i { background: #F2EFE8; }
.thumb--b .t-kicker { background: #C2A66B; }
.thumb--b .t-table { background-color: #F2EFE8; }
.thumb--c { background: #FFFFFF; color: #16212B; border: 1px solid var(--line); }
.thumb--c i { background: #16212B; }
.thumb--c .t-kicker { background: #7A3844; }
.thumb--c .t-photo { background: linear-gradient(135deg, #1E2C3C, #E0B3BB); }

@media (max-width: 900px) { .directions { grid-template-columns: 1fr; } }

/* ---------- how it works ---------- */

.start { --accent: var(--c3); background: var(--bg); }
.start__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.start__ctas { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.step { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: start; padding: clamp(20px, 2.4vw, 30px); border-radius: var(--r-md); background: var(--bg-2); transition: transform 0.9s var(--ease-out), box-shadow 0.9s var(--ease-out); }
.step:hover { transform: translateY(-4px); box-shadow: 0 40px 80px -50px rgba(236, 72, 153, 0.3); }
.step__num { font-family: var(--font-head); font-weight: 700; font-size: 34px; letter-spacing: -0.04em; line-height: 1; color: var(--c1); font-variant-numeric: tabular-nums; }
.step:nth-child(2) .step__num { color: var(--c2); }
.step:nth-child(3) .step__num { color: var(--c3); }
.step h3 { margin: 0 0 6px; font-family: var(--font-head); font-weight: 600; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -0.02em; }
.step p { margin: 0; color: var(--ink-60); font-size: 15px; line-height: 1.55; }

.proof { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.proof__item { padding: clamp(22px, 2.6vw, 34px); border-radius: var(--r-md); background: var(--ink); color: #fff; display: grid; gap: 12px; align-content: start; }
.proof__stat { font-family: var(--font-head); font-weight: 700; font-size: clamp(44px, 5vw, 72px); letter-spacing: -0.04em; line-height: 0.9; font-variant-numeric: tabular-nums; color: var(--c1); }
.proof__item:nth-child(2) .proof__stat { color: #A78BFA; }
.proof__item:nth-child(3) .proof__stat { color: #F472B6; }
.proof__item p { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.7); }

@media (max-width: 900px) {
  .start__grid { grid-template-columns: 1fr; }
  .proof { grid-template-columns: 1fr; }
}

/* ---------- credentials ticker (hero) ---------- */

.ticker {
  margin-top: 18px;
  max-width: 560px;
  width: 100%;
  min-width: 0;
  contain: inline-size;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ticker__track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__track span {
  display: inline-flex; align-items: center; gap: 14px;
  padding-right: 14px;
  font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-60); white-space: nowrap;
}
.ticker__track span::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--c2); }
.ticker__track span:nth-child(4n+1)::after { background: var(--c1); }
.ticker__track span:nth-child(4n+3)::after { background: var(--c3); }

/* ---------- experience page hero ---------- */

.page-hero { padding: clamp(120px, 16vh, 180px) 0 clamp(40px, 6vw, 72px); background: var(--bg); }
.page-hero .hero__name { margin: 10px 0 28px; }
.page-hero__row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.page-hero__facts { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
.page-hero__facts span { padding: 9px 13px; border-radius: 999px; background: var(--bg-2); font-family: var(--font-head); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-60); }
@media (max-width: 900px) { .page-hero__row { grid-template-columns: 1fr; } }

/* ---------- realistic devices (work panels) ---------- */

.device { position: absolute; }
.device--laptop { left: 0; top: 6%; width: 82%; }
.device__screen {
  position: relative;
  background: #121216;
  border-radius: 16px 16px 6px 6px;
  padding: 2.4% 2.4% 2.8%;
  box-shadow: 0 60px 110px -50px rgba(15, 15, 18, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.device__screen::before { content: ''; position: absolute; top: 1.1%; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #2a2a30; }
.device__screen img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 5px; }
.device__base {
  position: relative; height: 16px; margin: 0 -4%;
  background: linear-gradient(180deg, #e9e9ee, #c8c8cf 70%, #a9a9b1);
  border-radius: 0 0 18px 18px;
  box-shadow: 0 30px 60px -30px rgba(15, 15, 18, 0.6);
}
.device__base::after { content: ''; position: absolute; top: 0; left: 50%; width: 14%; height: 6px; transform: translateX(-50%); background: #b4b4bb; border-radius: 0 0 8px 8px; }
.device--phone {
  right: 0; bottom: 0; width: 25%; aspect-ratio: 9 / 19;
  border-radius: 12% / 6%;
  background: #121216;
  padding: 3.4%;
  box-shadow: 0 50px 90px -40px rgba(15, 15, 18, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.device--phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 10% / 5%; display: block; }
.device__island { position: absolute; top: 5.2%; left: 50%; width: 30%; height: 3.4%; transform: translateX(-50%); background: #000; border-radius: 999px; z-index: 2; }
.device--phone-left { right: auto; left: 0; }
.case--alt .device--laptop { left: auto; right: 0; }
@media (max-width: 900px) { .device--laptop { width: 86%; } .device--phone { width: 28%; } }

/* ---------- before and after ---------- */

.compare {
  margin-top: clamp(40px, 5vw, 72px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.compare__side { display: grid; gap: 14px; align-content: start; }
.compare__side p { margin: 0; font-size: 15px; color: var(--ink-60); max-width: 30em; }
.compare__tag { font-family: var(--font-head); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-40); }
.compare__side--after .compare__tag { color: var(--c2); }

.diy {
  border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line);
  font-family: Arial, Helvetica, sans-serif; color: #444; filter: saturate(0.85);
  box-shadow: 0 30px 60px -45px rgba(15, 15, 18, 0.35);
}
.diy__ad { background: #ffe680; color: #5a4a00; font-size: 11px; padding: 6px 12px; text-align: center; }
.diy__nav { display: flex; justify-content: center; gap: 14px; padding: 12px; border-bottom: 1px solid #eee; }
.diy__nav i { width: 44px; height: 6px; background: #ccc; border-radius: 3px; }
.diy__hero { position: relative; background: linear-gradient(135deg, #c9c9c9, #8f8f8f); min-height: 180px; display: grid; place-content: center; text-align: center; padding: 28px 20px; color: #fff; }
.diy__stock { position: absolute; top: 10px; left: 12px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.diy__hero b { font-size: 22px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.diy__hero small { display: block; margin-top: 6px; font-size: 12px; opacity: 0.9; }
.diy__row { display: flex; gap: 10px; padding: 16px; }
.diy__row i { flex: 1; height: 46px; border-radius: 4px; background: #eee; }
.diy__foot { font-size: 10px; text-align: center; color: #999; padding: 8px 0 12px; }

.rebuilt {
  border-radius: 14px; overflow: hidden; background: #FBF8F2; color: #161412;
  padding: 16px 18px 14px; display: grid; gap: 14px;
  box-shadow: 0 30px 60px -45px rgba(194, 85, 46, 0.4);
}
.rebuilt__nav { display: flex; align-items: center; gap: 12px; font-size: 11px; }
.rebuilt__nav b { font-family: 'Fraunces', serif; font-weight: 600; font-size: 13px; }
.rebuilt__nav span { flex: 1; }
.rebuilt__nav em { font-style: normal; padding: 5px 10px; border-radius: 6px; background: #161412; color: #fff; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.rebuilt__hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr); gap: 14px; align-items: center; }
.rebuilt__hero small { display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #C2552E; font-weight: 700; margin-bottom: 8px; }
.rebuilt__hero h4 { margin: 0 0 8px; font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); line-height: 1; letter-spacing: -0.02em; }
.rebuilt__hero p { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: rgba(22,20,18,0.66); max-width: 26em; }
.rebuilt__hero em { font-style: normal; display: inline-block; padding: 7px 12px; border-radius: 6px; background: #C2552E; color: #fff; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.rebuilt__panel { aspect-ratio: 4 / 4.4; border-radius: 12px; background: radial-gradient(70% 60% at 50% 30%, #F3D9C4, #C2552E 80%); }
.rebuilt__bar { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid rgba(22,20,18,0.1); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(22,20,18,0.6); }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }

/* ---------- explorer: mode toggle and business mock ---------- */

.explorer__mode { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); gap: 2px; justify-self: start; }
.mode { padding: 9px 18px; border-radius: 999px; font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; color: var(--ink-60); transition: background 0.4s, color 0.3s; }
.mode.is-active { background: var(--ink); color: #fff; }
.explorer__flag { display: inline-block; margin-left: 8px; font-size: 12px; color: var(--ink-40); }

.biz {
  --b-bg: #0B1F3A; --b-surface: rgba(255,255,255,0.06); --b-ink: #F3F1EA; --b-muted: rgba(243,241,234,0.66); --b-accent: #C9A55A; --b-line: rgba(243,241,234,0.14);
  --b-head: 'Newsreader', serif; --b-case: none; --b-weight: 500; --b-radius: 10px; --b-pill: 6px;
  --b-grad: linear-gradient(135deg, #16325A, #C9A55A);
  position: relative; overflow: hidden;
  background: var(--b-bg); color: var(--b-ink);
  padding: clamp(18px, 2.6vw, 40px) clamp(18px, 3vw, 48px) clamp(18px, 2.6vw, 36px);
  min-height: 520px; display: grid; gap: clamp(18px, 2.6vw, 34px); align-content: start;
  font-family: var(--font-body);
  transition: background 0.9s var(--ease-out), color 0.9s var(--ease-out);
}
.biz > * { position: relative; z-index: 1; }
.biz__nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 12px; }
.biz__mark { font-family: var(--b-head); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 10px; }
.biz__mark b { width: 18px; height: 18px; border-radius: 4px; background: var(--b-accent); transition: background 0.9s, border-radius 0.9s; }
.biz__links { display: flex; gap: 18px; color: var(--b-muted); text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; }
.biz__pill { padding: 8px 14px; border-radius: var(--b-pill); background: var(--b-accent); color: var(--b-bg); font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; transition: background 0.9s, color 0.9s, border-radius 0.9s; }
.biz__hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); grid-template-areas: "copy panel" "stats panel"; gap: clamp(16px, 2.4vw, 32px); align-items: center; }
.biz__copy { grid-area: copy; display: grid; gap: 12px; }
.biz__panel { grid-area: panel; position: relative; aspect-ratio: 4 / 3.6; border-radius: var(--b-radius); overflow: hidden; transition: border-radius 0.9s; }
.biz__panel::after { content: ''; position: absolute; inset: 0; }
.biz__tag { position: absolute; left: 14px; bottom: 14px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.88); color: #0F0F12; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
.biz__kicker { font-family: var(--font-head); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--b-accent); font-weight: 600; transition: color 0.9s; }
.biz__headline { margin: 0; font-family: var(--b-head); font-weight: var(--b-weight); text-transform: var(--b-case); font-size: clamp(30px, 3.6vw, 56px); line-height: 1.02; letter-spacing: -0.02em; max-width: 14em; }
.biz__sub { margin: 0; font-size: 14px; line-height: 1.55; color: var(--b-muted); max-width: 34em; }
.biz__ctas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.biz__cta { padding: 11px 16px; border-radius: var(--b-pill); background: var(--b-accent); color: var(--b-bg); font-family: var(--font-head); font-weight: 600; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.9s, color 0.9s, border-radius 0.9s; }
.biz__cta--ghost { background: transparent; color: var(--b-ink); box-shadow: inset 0 0 0 1px var(--b-line); }
.biz__stats { grid-area: stats; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.biz__stats div { padding: 12px 14px; border-radius: var(--b-radius); background: var(--b-surface); display: grid; gap: 2px; }
.biz__stats b { font-family: var(--b-head); font-size: 26px; line-height: 1; color: var(--b-accent); }
.biz__stats span { font-size: 11px; color: var(--b-muted); }
.biz__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.biz__cards div { padding: 14px 16px; border-radius: var(--b-radius); background: var(--b-surface); display: grid; gap: 4px; border-top: 2px solid var(--b-accent); }
.biz__cards b { font-family: var(--b-head); font-size: 16px; font-weight: 600; }
.biz__cards span { font-size: 12px; color: var(--b-muted); }
.biz__quote { font-family: var(--b-head); font-size: clamp(16px, 1.5vw, 22px); line-height: 1.3; color: var(--b-ink); display: grid; gap: 6px; max-width: 36em; }
.biz__quote small { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--b-muted); }

/* business layouts: each theme also changes structure */
.biz[data-theme="ledger"] .biz__cards { display: none; }
.biz[data-theme="civic"] { --b-bg: #F5F7F4; --b-surface: #FFFFFF; --b-ink: #0F2A1E; --b-muted: rgba(15,42,30,0.64); --b-accent: #1B4332; --b-line: rgba(15,42,30,0.12); --b-head: 'Manrope', sans-serif; --b-weight: 800; --b-radius: 18px; --b-pill: 999px; --b-grad: linear-gradient(135deg, #1B4332, #74C69D); }
.biz[data-theme="civic"] .biz__pill, .biz[data-theme="civic"] .biz__cta:not(.biz__cta--ghost) { color: #fff; }
.biz[data-theme="civic"] .biz__hero { grid-template-columns: 1fr; grid-template-areas: "copy" "stats"; }
.biz[data-theme="civic"] .biz__panel { display: none; }
.biz[data-theme="civic"] .biz__headline { max-width: 18em; font-size: clamp(30px, 4vw, 60px); }
.biz[data-theme="civic"] .biz__quote { display: none; }
.biz[data-theme="studio"] { --b-bg: #F4F1EA; --b-surface: #FFFFFF; --b-ink: #111111; --b-muted: rgba(17,17,17,0.62); --b-accent: #111111; --b-line: rgba(17,17,17,0.14); --b-head: 'Fraunces', serif; --b-weight: 600; --b-radius: 4px; --b-pill: 4px; --b-grad: linear-gradient(135deg, #D9D2C5, #111111); }
.biz[data-theme="studio"] .biz__pill, .biz[data-theme="studio"] .biz__cta:not(.biz__cta--ghost) { color: #F4F1EA; }
.biz[data-theme="studio"] .biz__hero { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-areas: "panel copy" "panel stats"; }
.biz[data-theme="studio"] .biz__stats { display: none; }
.biz[data-theme="studio"] .biz__cards div { background: transparent; border-top: 1px solid var(--b-line); border-radius: 0; padding-left: 0; }
.biz[data-theme="tide"] { --b-bg: #0F5C5C; --b-surface: rgba(255,255,255,0.1); --b-ink: #F2F7F5; --b-muted: rgba(242,247,245,0.7); --b-accent: #F2D3A2; --b-line: rgba(242,247,245,0.16); --b-head: 'Sora', sans-serif; --b-weight: 700; --b-radius: 22px; --b-pill: 999px; --b-grad: linear-gradient(135deg, #0F5C5C, #F2D3A2); }
.biz[data-theme="tide"] .biz__hero { grid-template-columns: 1fr; grid-template-areas: "copy" "panel"; }
.biz[data-theme="tide"] .biz__panel { aspect-ratio: 16 / 5; }
.biz[data-theme="tide"] .biz__stats { display: none; }
.biz[data-theme="tide"] .biz__headline { max-width: 20em; text-align: center; margin: 0 auto; }
.biz[data-theme="tide"] .biz__copy { text-align: center; justify-items: center; }
.biz[data-theme="tide"] .biz__quote { display: none; }
.biz[data-theme="atelier"] { --b-bg: #FFFFFF; --b-surface: #F6F1F2; --b-ink: #16212B; --b-muted: rgba(22,33,43,0.64); --b-accent: #7A3844; --b-line: rgba(22,33,43,0.12); --b-head: 'Newsreader', serif; --b-weight: 500; --b-radius: 28px; --b-pill: 999px; --b-grad: linear-gradient(135deg, #1E2C3C, #E0B3BB); }
.biz[data-theme="atelier"] .biz__pill, .biz[data-theme="atelier"] .biz__cta:not(.biz__cta--ghost) { color: #fff; }
.biz[data-theme="atelier"] .biz__cards { display: none; }
@media (max-width: 760px) {
  .biz__hero, .biz[data-theme] .biz__hero { grid-template-columns: 1fr; grid-template-areas: "copy" "panel" "stats"; }
  .biz__links { display: none; }
  .biz__cards, .biz__stats { grid-template-columns: 1fr; }
  .biz { min-height: 0; }
}

/* ---------- mobile hero: portrait panel above the copy ---------- */

@media (max-width: 900px) {
  .hero { min-height: 0; align-items: start; grid-template-rows: auto auto; padding-top: 88px; }
  .hero__media { position: relative; inset: auto; z-index: 0; height: min(58vh, 480px); margin: 0 var(--gutter); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-2); }
  .hero__media::before { display: none; }
  .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; transform: none !important; animation: none; -webkit-mask-image: none; mask-image: none; }
  .hero__content { padding-top: 32px; padding-bottom: 40px; gap: 22px; }
  .hero__row { max-width: none; }
  .ticker { max-width: 100%; }
  .hero > * { min-width: 0; }
  .hero__meta { display: none; }
}

/* ---------- the problem, louder ---------- */
.mission__title { margin-bottom: clamp(24px, 3vw, 40px); }
.statement--sub { font-size: clamp(20px, 2vw, 30px); font-weight: 400; color: var(--ink-60); max-width: 30em; }
.statement--sub .hl { font-weight: 500; }

/* ---------- photos inside the example mocks ---------- */
.mock__portrait img, .biz__panel img, .rebuilt__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.mock__portrait::after { background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.22) 100%); }
.biz__panel::after { background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.28) 100%); }
.mock__portrait, .biz__panel { background: var(--m-surface, #EEE); }
.biz__panel { filter: saturate(0.85); }
.rebuilt__panel { position: relative; overflow: hidden; background: #E8D9CC; }
.mock__tag, .biz__tag { background: rgba(255,255,255,0.92); }

/* business mark: initials, not a shape */
.biz__mark b { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-family: var(--font-head); font-size: 9px; font-weight: 700; letter-spacing: 0; color: var(--b-bg); }

/* granite replaces signal */
.biz[data-theme="granite"] { --b-bg: #F2F3F5; --b-surface: #FFFFFF; --b-ink: #1C2430; --b-muted: rgba(28,36,48,0.64); --b-accent: #1F3A93; --b-line: rgba(28,36,48,0.12); --b-head: 'Manrope', sans-serif; --b-case: none; --b-weight: 800; --b-radius: 12px; --b-pill: 8px; }
.biz[data-theme="granite"] .biz__pill, .biz[data-theme="granite"] .biz__cta:not(.biz__cta--ghost), .biz[data-theme="granite"] .biz__mark b { color: #fff; }
.biz[data-theme="granite"] .biz__headline { letter-spacing: -0.03em; line-height: 0.98; }
.biz[data-theme="granite"] .biz__quote { display: none; }
.biz[data-theme="granite"] .biz__cards div { border-top: 3px solid var(--b-accent); }
.biz[data-theme="ledger"] .biz__mark b, .biz[data-theme="tide"] .biz__mark b { color: var(--b-bg); }
.biz[data-theme="civic"] .biz__mark b, .biz[data-theme="studio"] .biz__mark b, .biz[data-theme="atelier"] .biz__mark b { color: #fff; }

/* professional finish for the firm mock: a hairline under the nav, no glow */
.biz__nav { padding-bottom: 14px; border-bottom: 1px solid var(--b-line); }

/* phone mockup: real proportions, thinner bezel */
.device--phone { width: 24%; aspect-ratio: 9 / 19.5; border-radius: 16% / 7.4%; padding: 2.6%; background: #0f0f12; box-shadow: 0 50px 90px -40px rgba(15, 15, 18, 0.7), inset 0 0 0 1.5px rgba(255, 255, 255, 0.14), inset 0 0 0 4px #1a1a1e; }
.device--phone img { border-radius: 14% / 6.4%; object-position: top; }
.device__island { top: 2.2%; width: 26%; height: 2.6%; }

/* ---------- monogram, typographic ---------- */
.wordmark .mono { width: auto; height: auto; padding: 0; background: none; color: var(--ink); border-radius: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.09em; line-height: 1; display: inline-flex; align-items: baseline; }
.wordmark .mono i { font-style: normal; color: var(--c2); margin-left: 1px; }
.wordmark:hover .mono { transform: none; }
.wordmark:hover .mono i { color: var(--c3); transition: color 0.4s; }
.footer__bottom .wordmark .mono { font-size: 18px; }

/* ---------- proof, redesigned ---------- */
.proof {
  margin: 0 0 clamp(56px, 7vw, 104px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  border-radius: var(--r-lg); background: var(--ink); color: #fff; overflow: hidden;
}
.proof__item { padding: clamp(28px, 3.2vw, 48px) clamp(24px, 2.8vw, 40px); display: grid; gap: 14px; align-content: start; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.proof__item:first-child { border-left: 0; }
.proof__stat { font-family: var(--font-head); font-weight: 700; font-size: clamp(56px, 6.4vw, 104px); letter-spacing: -0.05em; line-height: 0.9; font-variant-numeric: tabular-nums; color: #fff; display: inline-flex; align-items: flex-start; gap: 2px; }
.proof__stat small { font-size: 0.42em; font-weight: 600; margin-top: 0.22em; letter-spacing: -0.02em; }
.proof__item:nth-child(1) .proof__stat { color: #7DD3FC; }
.proof__item:nth-child(2) .proof__stat { color: #C4B5FD; }
.proof__item:nth-child(3) .proof__stat { color: #F9A8D4; }
.proof__item p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.78); max-width: 26em; }
.proof__src { font-family: var(--font-head); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: auto; }
@media (max-width: 900px) { .proof { grid-template-columns: 1fr; } .proof__item { border-left: 0; border-top: 1px solid rgba(255,255,255,0.1); } .proof__item:first-child { border-top: 0; } }

/* ---------- palette dial (personal directions) ---------- */
.dial { display: grid; gap: 10px; max-width: 720px; }
.dial__label { font-family: var(--font-head); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-40); }
.dial__range { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; border-radius: 999px; outline-offset: 6px;
  background: linear-gradient(90deg, #7C3AED 0%, #7C3AED 12%, #C2552E 20%, #C2552E 30%, #0F1720 38%, #0F1720 46%, #C2A66B 54%, #C2A66B 62%, #0F7C72 70%, #0F7C72 80%, #F43F5E 88%, #F59E0B 100%);
  box-shadow: inset 0 0 0 1px rgba(15, 15, 18, 0.08); cursor: pointer; }
.dial__range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); box-shadow: 0 8px 20px -8px rgba(15, 15, 18, 0.5); transition: transform 0.4s var(--ease-out); }
.dial__range::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); box-shadow: 0 8px 20px -8px rgba(15, 15, 18, 0.5); }
.dial__range:active::-webkit-slider-thumb { transform: scale(1.12); }
.dial__stops { display: grid; grid-template-columns: repeat(6, 1fr); font-family: var(--font-head); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-40); }
.dial__stops span { cursor: pointer; transition: color 0.3s; }
.dial__stops span:first-child { text-align: left; } .dial__stops span:last-child { text-align: right; } .dial__stops span:not(:first-child):not(:last-child) { text-align: center; }
.dial__stops span.is-active { color: var(--ink); font-weight: 600; }

/* ---------- phone frame, like an actual phone ---------- */
.device--phone { width: 21%; aspect-ratio: 9 / 19.5; padding: 2.2%; border-radius: 17% / 7.8%; background: linear-gradient(160deg, #2a2a2f, #0f0f12 40%, #1b1b20); box-shadow: 0 50px 90px -40px rgba(15, 15, 18, 0.7), inset 0 0 0 1px rgba(255,255,255,0.18), inset 0 0 0 3px #0b0b0d; overflow: visible; }
.device--phone img { border-radius: 15% / 6.9%; }
.device__island { top: 1.9%; width: 24%; height: 2.4%; }
.device__btn { position: absolute; width: 2.5%; background: #2a2a2f; border-radius: 2px; }
.device__btn--power { right: -2.5%; top: 24%; height: 9%; }
.device__btn--vol { left: -2.5%; top: 20%; height: 7%; box-shadow: 0 130% 0 0 #2a2a2f; }
@media (max-width: 900px) { .device--phone { width: 24%; } }

/* ---------- tide layout: photo panel that keeps the face ---------- */
.biz[data-theme="tide"] .biz__panel { aspect-ratio: 16 / 8; width: min(100%, 760px); margin: 0 auto; }
.biz[data-theme="tide"] .biz__panel img { object-position: 50% 24%; }
.biz__panel img { object-position: 50% 8%; }

/* ---------- directions, emphasised ---------- */
.directions { padding: clamp(28px, 3.5vw, 56px); border-radius: var(--r-lg); background: var(--bg); box-shadow: 0 40px 90px -60px rgba(15, 15, 18, 0.35); }
.directions__copy h3 { font-size: clamp(26px, 2.8vw, 44px); }
.directions__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.directions__list li { display: flex; align-items: center; gap: 12px; font-family: var(--font-head); font-size: 14px; letter-spacing: 0.02em; color: var(--ink-60); }
.directions__list b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg-2); color: var(--ink); font-size: 11px; font-weight: 700; }
.directions__thumbs { gap: 18px; }
.thumb { transition: transform 0.9s var(--ease-out), box-shadow 0.9s var(--ease-out); }
.thumb:hover { transform: translateY(-6px) !important; }
.thumb--pick { animation: wiggle 5s var(--ease-in-out) 1.5s infinite; transform-origin: 50% 100%; overflow: visible; }
@keyframes wiggle {
  0%, 78%, 100% { rotate: 0deg; }
  80% { rotate: -2.5deg; } 84% { rotate: 2.5deg; } 88% { rotate: -2deg; } 92% { rotate: 1.5deg; } 96% { rotate: -0.5deg; }
}
.thumb__pick {
  position: absolute; left: 50%; top: -14px; transform: translate(-50%, 0) scale(0.6); opacity: 0;
  padding: 8px 12px; border-radius: 999px; background: var(--ink); color: #fff;
  font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; z-index: 2;
  animation: pickme 5s var(--ease-out) 1.5s infinite;
}
.thumb__pick::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--ink); transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
@keyframes pickme {
  0%, 76% { opacity: 0; transform: translate(-50%, 6px) scale(0.6); }
  82%, 96% { opacity: 1; transform: translate(-50%, -6px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 6px) scale(0.6); }
}
.thumb--pick .thumb__label { color: #C2A66B; opacity: 1; }
.reel__caption b { color: #fff; font-weight: 600; display: block; font-family: var(--font-head); font-size: clamp(18px, 1.6vw, 26px); letter-spacing: -0.01em; margin-bottom: 6px; }
@media (prefers-reduced-motion: reduce) { .thumb--pick, .thumb__pick { animation: none; } .thumb__pick { opacity: 1; transform: translate(-50%, -6px); } }
@media (max-width: 900px) { .directions { padding: 22px; } }

/* ---------- work cards: laptop only, no phone ---------- */
.case__visual--solo { min-height: 0; }
.case__visual--solo .device--laptop { position: relative; left: auto; right: auto; top: auto; width: 100%; }
.case--alt .case__visual--solo .device--laptop { left: auto; right: auto; }
@media (max-width: 900px) { .case__visual--solo { aspect-ratio: auto; } }

/* ---------- tide: an empty photo slot, not a portrait ---------- */
.biz__placeholder { display: none; }
.biz[data-theme="tide"] .biz__panel { background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1.5px var(--b-line); filter: none; display: grid; place-items: center; }
.biz[data-theme="tide"] .biz__panel img, .biz[data-theme="tide"] .biz__tag { display: none; }
.biz[data-theme="tide"] .biz__panel::after { display: none; }
.biz[data-theme="tide"] .biz__placeholder { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; border: 1.5px dashed rgba(242,247,245,0.45); color: var(--b-ink); font-family: var(--font-head); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.biz[data-theme="tide"] .biz__placeholder::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--b-accent); }

/* ---------- directions card sits above the explorer ---------- */
.directions { margin-top: 0; margin-bottom: clamp(28px, 3.5vw, 48px); }

/* ---------- explorer: whole mock visible with the controls on one screen ---------- */
.explorer { gap: 14px; }
.mock { min-height: 0; padding: clamp(14px, 1.8vw, 26px) clamp(16px, 2.4vw, 36px) clamp(14px, 1.8vw, 24px); gap: clamp(14px, 1.8vw, 24px); }
.mock__hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
.mock__copy { gap: 9px; }
.mock__name { font-size: clamp(36px, 3.8vw, 56px); }
.mock__headline { font-size: clamp(16px, 1.3vw, 20px); }
.mock__sub { font-size: 13px; }
.mock__portrait { aspect-ratio: 4 / 3.4; max-height: 260px; }
.mock__bar { padding-top: 12px; }
.biz { min-height: 0; padding: clamp(14px, 1.8vw, 26px) clamp(16px, 2.4vw, 36px) clamp(14px, 1.8vw, 24px); gap: clamp(12px, 1.6vw, 20px); }
.biz__nav { padding-bottom: 10px; }
.biz__copy { gap: 9px; }
.biz__headline { font-size: clamp(26px, 2.8vw, 40px); }
.biz[data-theme="civic"] .biz__headline { font-size: clamp(26px, 3vw, 44px); }
.biz__sub { font-size: 13px; }
.biz__panel { aspect-ratio: 4 / 3; max-height: 250px; }
.biz[data-theme="tide"] .biz__panel { aspect-ratio: 16 / 5; max-height: 190px; }
.biz__stats div { padding: 10px 12px; }
.biz__stats b { font-size: 22px; }
.biz__cards div { padding: 12px 14px; }
.biz__quote { font-size: clamp(15px, 1.2vw, 18px); }
.explorer__note { margin-top: 10px; }

/* ---------- showreel closes the page: tight to How it works and the footer ---------- */
.start { padding-bottom: clamp(40px, 5vw, 72px); }
.reel { padding: 0 0 clamp(40px, 5vw, 72px); }
.reel__panel { min-height: clamp(400px, 60vh, 620px); }
.footer { padding-top: clamp(48px, 6vw, 88px); }
.biz[data-theme="tide"] .biz__cards { display: none; }
.biz[data-theme="tide"] .biz__panel { max-height: 170px; }
.biz[data-theme="civic"] .biz__headline { font-size: clamp(24px, 2.6vw, 38px); }
.biz[data-theme="studio"] .biz__panel { aspect-ratio: 4 / 3.2; max-height: 260px; }

/* the explorer frame is in flow, so the base .frame--browser offset must not apply */
.explorer__frame { top: auto; left: auto; }