/* ==========================================================================
   Byla Digital — v2 design system
   Ink, paper and one yellow. Gilroy for everything; highlighted words
   are set in gold. Dark panels float inside the page in both themes.
   ========================================================================== */

/* ---------- Fonts (self-hosted Gilroy) ---------- */
@font-face { font-family: "Gilroy"; src: url("../fonts/Gilroy-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("../fonts/Gilroy-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("../fonts/Gilroy-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("../fonts/Gilroy-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("../fonts/Gilroy-Heavy.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --ink: #050505;
  --ink-2: #0d0d0c;
  --ink-3: #171614;
  --ink-4: #22201c;
  --paper: #f7f7f2;
  --paper-2: #efede4;
  --white: #ffffff;
  --yellow: #ffcc00;
  --yellow-2: #ffe066;
  --gold-text: #7a6000; /* no longer used: accents are pure yellow in both themes */

  /* dark theme (default) */
  --bg: var(--ink);
  --bg-alt: var(--ink-2);
  --surface: var(--ink-3);
  --surface-2: var(--ink-4);
  --text: var(--paper);
  --muted: #a9a89e;
  --faint: #6f6e66;
  --line: rgba(255, 255, 255, .11);
  --line-2: rgba(255, 255, 255, .22);
  --accent-text: var(--yellow);
  --panel: var(--ink-2);
  --panel-line: rgba(255, 255, 255, .1);
  --header-bg: rgba(16, 16, 15, .72);
  --shadow: 0 30px 80px rgba(0, 0, 0, .5);
  --field: rgba(255, 255, 255, .04);
  --logo: var(--yellow);
  --chip-bg: rgba(255, 255, 255, .04);

  --font: "Gilroy", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: var(--font);

  --gutter: clamp(1rem, .5rem + 2vw, 2.25rem);
  --max: 1320px;
  --section: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --r-panel: clamp(24px, 1rem + 1.5vw, 40px);
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 12px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --fast: 180ms;
  --med: 380ms;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: var(--paper);
  --bg-alt: var(--white);
  --surface: var(--white);
  --surface-2: var(--paper-2);
  --text: #0b0b0a;
  --muted: #55554e;
  --faint: #8c8b82;
  --line: rgba(5, 5, 5, .1);
  --line-2: rgba(5, 5, 5, .2);
  --accent-text: var(--text);
  --panel: var(--ink);
  --header-bg: rgba(255, 255, 255, .78);
  --shadow: 0 30px 70px rgba(40, 30, 0, .12);
  --field: var(--white);
  --logo: var(--ink);
  --chip-bg: rgba(5, 5, 5, .03);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: var(--paper); --bg-alt: var(--white); --surface: var(--white); --surface-2: var(--paper-2);
    --text: #0b0b0a; --muted: #55554e; --faint: #8c8b82; --line: rgba(5,5,5,.1); --line-2: rgba(5,5,5,.2);
    --accent-text: var(--text); --panel: var(--ink); --header-bg: rgba(255,255,255,.78);
    --shadow: 0 30px 70px rgba(40,30,0,.12); --field: var(--white); --logo: var(--ink); --chip-bg: rgba(5,5,5,.03);
    color-scheme: light;
  }
}

/* Dark panels: always ink with paper text, in both themes */
.panel {
  --text: var(--paper); --muted: #b3b2a8; --faint: #6f6e66;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.24);
  --accent-text: var(--yellow); --surface: var(--ink-3); --surface-2: var(--ink-4);
  --chip-bg: rgba(255,255,255,.05); --field: rgba(255,255,255,.05);
  background: var(--panel); color: var(--text);
  border: 1px solid var(--panel-line); border-radius: var(--r-panel);
  position: relative; overflow: hidden; isolation: isolate;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; letter-spacing: -.04em; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6.5rem; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 1rem; line-height: 1.6; font-weight: 400; letter-spacing: -.04em;
  overflow-x: clip; -webkit-font-smoothing: antialiased;
  transition: background-color var(--med) ease, color var(--med) ease;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
button, input, textarea, select { letter-spacing: -.04em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 8px; }
:root[data-theme="light"] :focus-visible { outline-color: var(--ink); }
:root[data-theme="light"] .panel :focus-visible { outline-color: var(--yellow); }
.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 300; background: var(--yellow); color: var(--ink); padding: .8rem 1.1rem; border-radius: 999px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.wrap--wide { width: min(100% - 2 * clamp(.5rem, .25rem + 1vw, 1rem), 1440px); margin-inline: auto; }
.section { padding-block: var(--section); }
.section--sm { padding-block: calc(var(--section) * .55); }
.section--alt { background: var(--bg-alt); }
.panel-pad { padding: clamp(2rem, 1rem + 4vw, 5rem) clamp(1.25rem, .5rem + 4vw, 5rem); }

/* ---------- Type ---------- */
.serif { font-style: normal; font-weight: inherit; }
.hl { color: var(--accent-text); }
.h-xl { font-size: clamp(3rem, 1.5rem + 6.4vw, 7.25rem); line-height: .92; letter-spacing: -.04em; }
.h-lg { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.75rem); line-height: .96; letter-spacing: -.04em; }
.h-md { font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.75rem); line-height: 1.02; letter-spacing: -.04em; }
.h-sm { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); line-height: 1.12; letter-spacing: -.04em; }
.h-xl .serif, .h-lg .serif, .h-md .serif { letter-spacing: -.04em; }
.lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.55; color: var(--muted); max-width: 38rem; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.num { font-variant-numeric: tabular-nums; }

/* Label chip */
.chip {
  display: inline-flex; align-items: center; gap: .55rem; width: fit-content;
  min-height: 34px; padding: .35rem .9rem .35rem .45rem; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--chip-bg);
  font-size: .75rem; font-weight: 600; letter-spacing: -.04em; text-transform: uppercase; color: var(--text);
}
.chip__dot { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--yellow); color: var(--ink); }
.chip__dot svg { width: 13px; height: 13px; }

/* ---------- Buttons: pill with round icon end ---------- */
.btn {
  --bg-b: transparent; --fg-b: var(--text); --bd-b: var(--line-2); --ic-bg: var(--text); --ic-fg: var(--bg);
  position: relative; display: inline-flex; align-items: center; gap: .9rem;
  min-height: 54px; padding: .4rem .4rem .4rem 1.4rem; border-radius: 999px;
  background: var(--bg-b); color: var(--fg-b); border: 1px solid var(--bd-b);
  font-weight: 600; font-size: .9375rem; text-decoration: none; white-space: nowrap;
  transition: background-color var(--fast) ease, border-color var(--fast) ease, transform var(--fast) var(--ease);
  touch-action: manipulation;
}
.btn__ic {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--ic-bg); color: var(--ic-fg); transition: transform var(--med) var(--ease);
}
.btn__ic svg { width: 18px; height: 18px; }
.btn:hover .btn__ic { transform: rotate(45deg) scale(1.04); }
.btn:active { transform: scale(.97); }
.btn--yellow { --bg-b: var(--yellow); --fg-b: var(--ink); --bd-b: var(--yellow); --ic-bg: var(--ink); --ic-fg: var(--yellow); }
.btn--yellow:hover { --bg-b: var(--yellow-2); --bd-b: var(--yellow-2); }
.btn--ink { --bg-b: var(--ink); --fg-b: var(--paper); --bd-b: var(--ink); --ic-bg: var(--yellow); --ic-fg: var(--ink); }
.btn--ghost:hover { --bd-b: var(--text); }
.btn--sm { min-height: 46px; padding-left: 1.1rem; font-size: .875rem; gap: .7rem; }
.btn--sm .btn__ic { width: 36px; height: 36px; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.arrow-link {
  display: inline-flex; align-items: center; gap: .5rem; width: fit-content; font-weight: 600; text-decoration: none;
  padding-bottom: .2rem; border-bottom: 1px solid var(--line-2); transition: gap var(--fast) var(--ease), border-color var(--fast) ease;
}
.arrow-link svg { width: 16px; height: 16px; }
.arrow-link:hover { gap: .8rem; border-color: var(--accent-text); }

/* ---------- Header: floating pill with segmented nav ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding-top: .75rem; pointer-events: none; }
.site-header__bar {
  pointer-events: auto; display: flex; align-items: center; gap: 1rem;
  min-height: 64px; padding: .45rem .45rem .45rem 1.35rem;
  background: var(--header-bg); border: 1px solid var(--line); border-radius: 999px;
  backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
  transition: transform var(--med) var(--ease), box-shadow var(--med) ease;
}
.site-header.is-scrolled .site-header__bar { box-shadow: var(--shadow); }
.site-header.is-hidden .site-header__bar { transform: translateY(-140%); }
.logo { display: inline-flex; color: var(--logo); text-decoration: none; flex-shrink: 0; }
.logo svg { height: 25px; width: auto; }
.seg { position: relative; margin-inline: auto; display: flex; padding: 4px; border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--line); }
.seg a {
  position: relative; z-index: 1; padding: .55rem 1rem; border-radius: 999px; text-decoration: none;
  font-size: .9rem; font-weight: 500; color: var(--muted); transition: color var(--fast) ease;
}
.seg a:hover, .seg a[aria-current="page"] { color: var(--text); }
.seg__pill {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); opacity: 0;
  transition: transform var(--med) var(--ease), width var(--med) var(--ease), opacity var(--fast) ease;
}
:root[data-theme="light"] .seg__pill { background: var(--white); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.header-actions { display: flex; align-items: center; gap: .5rem; }
.icon-btn {
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--text); transition: background-color var(--fast) ease, border-color var(--fast) ease;
}
.icon-btn:hover { background: var(--chip-bg); border-color: var(--line-2); }
.icon-btn svg { width: 20px; height: 20px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: block; }
:root[data-theme="light"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme="dark"]) .theme-toggle .i-moon { display: none; }
}
.menu-toggle { display: none; }
@media (max-width: 1080px) {
  .seg, .header-actions .btn { display: none; }
  .menu-toggle { display: inline-grid; }
  .header-actions { margin-left: auto; }
}
.mobile-nav { position: fixed; inset: 0; z-index: 200; display: none; flex-direction: column; background: var(--bg); padding: .75rem var(--gutter) 2rem; overflow-y: auto; }
.mobile-nav.is-open { display: flex; }
.mobile-nav.is-open ul { animation: drop var(--med) var(--ease); }
.mobile-nav__top { display: flex; align-items: center; justify-content: space-between; min-height: 66px; padding-left: 1.35rem; }
.mobile-nav ul { list-style: none; margin: 2rem 0; }
.mobile-nav li a {
  display: flex; align-items: center; justify-content: space-between; padding: 1.05rem .25rem;
  border-bottom: 1px solid var(--line); font-size: 2rem; font-weight: 500; letter-spacing: -.04em; text-decoration: none;
}
.mobile-nav li a svg { width: 22px; height: 22px; color: var(--muted); }
.mobile-nav li a[aria-current="page"] { color: var(--accent-text); }
.mobile-nav .btn { margin-top: auto; justify-content: space-between; }
@keyframes drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ---------- Hero (home) ---------- */
.hero { padding-top: 5.75rem; }
.hero__panel { min-height: min(880px, calc(100svh - 6.5rem)); display: flex; flex-direction: column; }
.hero__photo { position: absolute; inset: 0; z-index: -3; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%; }
.hero__shade {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(55% 65% at var(--mx, 72%) var(--my, 38%), rgba(255, 170, 30, .26), transparent 60%),
    linear-gradient(90deg, rgba(5,5,5,.96) 0%, rgba(5,5,5,.82) 34%, rgba(5,5,5,.25) 66%, rgba(5,5,5,.08) 100%),
    linear-gradient(0deg, rgba(5,5,5,.85), transparent 42%);
}
.grain { position: absolute; inset: 0; z-index: -1; opacity: .08; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero__inner { flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2rem; padding: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(1.25rem, .5rem + 4vw, 4.5rem) clamp(1.5rem, 1rem + 2vw, 3rem); }
.hero__copy { display: flex; flex-direction: column; justify-content: center; gap: 1.6rem; max-width: 46rem; }
.hero__copy .lead { color: #c9c8be; max-width: 34rem; }
.hero__side { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.hero__trust { display: flex; flex-wrap: wrap; gap: .6rem; padding: 0 clamp(1.25rem, .5rem + 4vw, 4.5rem) clamp(1.25rem, 1rem + 2vw, 3rem); }
.trust {
  display: flex; align-items: center; gap: .65rem; padding: .7rem 1rem .7rem .75rem; border-radius: var(--r-md);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.trust svg { width: 18px; height: 18px; color: var(--yellow); flex-shrink: 0; }
.trust strong { display: block; font-size: .875rem; font-weight: 600; line-height: 1.2; }
.trust span { display: block; font-size: .78rem; color: #b3b2a8; line-height: 1.3; }

/* Figma-style selection box */
.sel { position: relative; display: inline-block; padding: 0 .1em; }
.sel__box { position: absolute; inset: .02em -.02em .04em; border: 1.5px solid var(--yellow); background: rgba(255, 204, 0, .08); pointer-events: none; transform-origin: left center; animation: sel-draw 1.1s var(--ease) .5s both; }
.sel__box i { position: absolute; width: 9px; height: 9px; background: var(--paper); border: 1.5px solid var(--yellow); }
.sel__box i:nth-child(1) { top: -5px; left: -5px; } .sel__box i:nth-child(2) { top: -5px; right: -5px; }
.sel__box i:nth-child(3) { bottom: -5px; left: -5px; } .sel__box i:nth-child(4) { bottom: -5px; right: -5px; }
.sel__tag {
  position: absolute; right: -.4rem; bottom: -2.1rem; display: inline-flex; align-items: center;
  font-family: var(--font); font-style: normal; font-size: .8rem; font-weight: 600; letter-spacing: -.04em; line-height: 1;
  padding: .4rem .65rem; border-radius: 4px 999px 999px 999px; background: var(--yellow); color: var(--ink); white-space: nowrap;
  animation: tag-in .6s var(--ease) 1.4s both;
}
.sel__tag svg { position: absolute; left: -13px; top: -13px; width: 17px; height: 17px; color: var(--yellow); }
@keyframes sel-draw { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tag-in { from { opacity: 0; transform: translate(-8px, -8px); } to { opacity: 1; transform: none; } }

/* Rotating badge */
.badge { position: relative; display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; text-decoration: none; color: var(--paper); flex-shrink: 0; }
.badge__ring { position: absolute; inset: 0; animation: spin 18s linear infinite; }
.badge__ring text { font-size: 10.4px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; fill: currentColor; }
.badge__core { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--yellow); color: var(--ink); transition: transform var(--med) var(--ease); }
.badge__core svg { width: 24px; height: 24px; }
.badge:hover .badge__core { transform: scale(1.1) rotate(45deg); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Diagnostic widget (glass) */
.diag {
  width: min(100%, 390px); padding: 1.1rem; border-radius: var(--r-lg);
  background: rgba(20, 18, 14, .55); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.diag__q { font-weight: 500; font-size: 1rem; margin-bottom: .8rem; }
.diag__opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.diag__opt {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: .35rem .75rem;
  border-radius: 999px; font-size: .8125rem; font-weight: 500; color: #e6e5dc;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  transition: background-color var(--fast) ease, color var(--fast) ease, border-color var(--fast) ease;
}
.diag__opt svg { width: 13px; height: 13px; }
.diag__opt:hover { border-color: rgba(255,255,255,.35); }
.diag__opt[aria-pressed="true"] { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.diag__out { margin-top: .9rem; padding: .8rem .9rem; border-radius: var(--r-sm); background: rgba(0,0,0,.35); border: 1px dashed rgba(255,255,255,.18); font-size: .875rem; color: #cfcec4; min-height: 3.3rem; }
.diag__out strong { color: var(--yellow); font-weight: 600; }
.diag__out a { color: var(--paper); font-weight: 600; }

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__side { align-items: stretch; }
  .hero__side .badge { display: none; }
  .diag { width: 100%; }
  .hero__shade { background: radial-gradient(80% 60% at 70% 20%, rgba(255,170,30,.22), transparent 60%), linear-gradient(180deg, rgba(5,5,5,.5) 0%, rgba(5,5,5,.86) 45%, rgba(5,5,5,.97) 100%); }
  .hero__photo img { object-position: 70% 15%; }
}
@media (max-width: 520px) {
  .hero__copy .btn-row .btn { width: 100%; justify-content: space-between; }
  .sel__tag { display: none; }
  .trust { flex: 1 1 100%; }
}

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: 1.4rem; user-select: none; }
.marquee__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem; }
.marquee__item { display: inline-flex; align-items: center; gap: 2.5rem; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem); font-weight: 500; letter-spacing: -.04em; white-space: nowrap; }
.marquee__item .serif { color: var(--accent-text); font-weight: 400; }
.marquee__star { width: 22px; height: 22px; color: var(--accent-text); flex-shrink: 0; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee--reverse .marquee__track { animation-direction: reverse; }

/* ---------- Arc gallery + intro ---------- */
.arc { position: relative; overflow: hidden; }
.arc__stage {
  --p: 1; --cw: clamp(112px, 7vw + 60px, 200px); --step: 10deg; --R: calc(var(--cw) * 6.6);
  position: relative; height: calc(var(--cw) * 2.25 + 30px);
}
.arc__card {
  --i: 0; --a: 0; --t: calc(var(--i) * var(--step) * var(--p));
  position: absolute; left: 50%; top: 20px; width: var(--cw); aspect-ratio: 4 / 5; margin-left: calc(var(--cw) / -2);
  border-radius: 22px; overflow: hidden; background: var(--surface-2); border: 4px solid var(--bg-alt);
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
  transform-origin: 50% 50%;
  transform: translate(calc(var(--R) * sin(var(--t))), calc(var(--R) * (1 - cos(var(--t))))) rotate(var(--t));
  z-index: calc(10 - var(--a));
}
:root[data-theme="light"] .arc__card { border-color: var(--white); }
.arc__card img { width: 100%; height: 100%; object-fit: cover; }
.arc__ring { position: absolute; left: 50%; top: calc(20px + var(--cw) * .625); width: calc(var(--R) * 2); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; border: 1px dashed var(--line-2); pointer-events: none; }
.arc__ring::before { content: ""; position: absolute; inset: calc(var(--cw) * .7); border-radius: 50%; border: 1px solid var(--line); }
.arc__intro { position: relative; text-align: center; display: grid; justify-items: center; gap: 1.4rem; }
.arc__intro .lead { margin-inline: auto; text-align: center; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(3rem, 2rem + 3vw, 5rem); position: relative; }
.stat { padding: .5rem 1.25rem; text-align: center; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat__v { font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4.25rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.stat__v sup { font-size: .45em; color: var(--accent-text); vertical-align: top; position: relative; top: .25em; margin-left: .05em; }
.stat__l { margin-top: .6rem; color: var(--muted); font-size: .9375rem; }
@media (max-width: 760px) {
  .stats { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
  .stat:nth-child(3) { border-left: 0; }
}

/* ---------- Scroll-lit statement ---------- */
.statement { display: grid; grid-template-columns: minmax(0, .45fr) minmax(0, 1.55fr); gap: 2rem 4rem; }
.lit { font-size: clamp(1.65rem, 1.1rem + 2.2vw, 3.2rem); line-height: 1.16; letter-spacing: -.04em; font-weight: 500; }
.lit .w { color: var(--faint); transition: color 260ms ease; }
:root[data-theme="light"] .lit .w { color: #c9c7bb; }
.lit .w.on { color: var(--text); }
.lit .w.k.on, .lit .serif.w.on { color: var(--accent-text); }
@media (max-width: 860px) { .statement { grid-template-columns: 1fr; } }

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.tile { border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); padding: 1.75rem; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .75rem; min-height: 300px; }
.tile--img { padding: 0; }
.tile--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.tile--img:hover img { transform: scale(1.04); }
.tile--img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(5,5,5,.82)); }
.tile__cap { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.4rem; z-index: 2; color: var(--paper); font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.1; }
.tile__cap .serif { color: var(--yellow); }
.tile--y { background: var(--yellow); color: var(--ink); border-color: var(--yellow); --muted: #4a4426; }
.tile--ink { background: var(--ink-3); color: var(--paper); border-color: rgba(255,255,255,.1); --muted: #b3b2a8; }
.tile__big { font-size: clamp(3rem, 2rem + 3vw, 5rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.tile__label { font-size: .78rem; font-weight: 600; letter-spacing: -.04em; text-transform: uppercase; color: var(--muted); }
.bars { display: flex; align-items: flex-end; gap: .5rem; height: 120px; margin-top: auto; }
.bars span { flex: 1; height: var(--h); border-radius: 10px 10px 4px 4px; background: var(--yellow); transform-origin: bottom; transform: scaleY(var(--s, 1)); transition: transform 1000ms var(--ease); }
.bars span:nth-child(odd) { background: repeating-linear-gradient(135deg, var(--yellow) 0 6px, transparent 6px 11px); border: 1.5px solid var(--yellow); }
.span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-3 { grid-column: span 3; }
@media (max-width: 900px) { .bento > * { grid-column: span 12; } .bento > .half-m { grid-column: span 6; } }
@media (max-width: 520px) { .bento > .half-m { grid-column: span 12; } }

/* ---------- Section heading row ---------- */
.head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.head > div { display: grid; gap: 1.25rem; }
.head > .lead, .head > .head__side { justify-self: end; }
.head__side { display: grid; gap: 1.25rem; max-width: 38rem; }
@media (max-width: 860px) { .head { grid-template-columns: 1fr; } .head > .lead, .head > .head__side { justify-self: start; } }

/* ---------- Layer accordion with image ---------- */
.acc { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 3vw, 4.5rem); align-items: start; }
.acc__media { position: sticky; top: 7rem; aspect-ratio: 4 / 4.4; border-radius: var(--r-panel); overflow: hidden; background: var(--surface-2); }
.acc__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 600ms ease, transform 1200ms var(--ease); }
.acc__media img.is-on { opacity: 1; transform: none; }
.acc__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(5,5,5,.7)); }
.acc__label { position: absolute; left: 1.25rem; bottom: 1.1rem; z-index: 2; display: flex; align-items: baseline; gap: .6rem; color: var(--paper); }
.acc__label b { font-family: var(--serif); font-style: normal; font-weight: 400; font-size: 3.5rem; line-height: .8; color: var(--yellow); }
.acc__label span { font-weight: 500; }
.acc__list { border-top: 1px solid var(--line); list-style: none; }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn { width: 100%; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.6rem 0; text-align: left; }
.acc__n { font-size: .9rem; font-weight: 500; color: var(--faint); font-variant-numeric: tabular-nums; }
.acc__t { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.05; color: var(--muted); transition: color var(--fast) ease; }
.acc__i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); transition: transform var(--med) var(--ease), background-color var(--fast) ease, color var(--fast) ease, border-color var(--fast) ease; }
.acc__i svg { width: 18px; height: 18px; }
.acc__btn:hover .acc__t, .acc__btn[aria-expanded="true"] .acc__t { color: var(--text); }
.acc__btn[aria-expanded="true"] .acc__n { color: var(--accent-text); }
.acc__btn[aria-expanded="true"] .acc__i { transform: rotate(45deg); background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--med) var(--ease); }
.acc__panel > div { overflow: hidden; }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__body { padding: 0 0 1.75rem 4.5rem; display: grid; gap: 1.1rem; }
.acc__body p { color: var(--muted); max-width: 52ch; }
.acc__tags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; }
.acc__tags li { padding: .3rem .75rem; border-radius: 999px; border: 1px solid var(--line-2); font-size: .8125rem; color: var(--muted); }
@media (max-width: 900px) { .acc { grid-template-columns: 1fr; } .acc__media { position: relative; top: 0; aspect-ratio: 16 / 10; } .acc__body { padding-left: 0; } .acc__btn { grid-template-columns: 2.5rem minmax(0,1fr) auto; } }

/* ---------- Feature work panel ---------- */
.feature { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 2.5rem; align-items: center; text-decoration: none; }
.feature__copy { display: grid; gap: 1.25rem; align-content: center; }
.feature__copy p { color: var(--muted); max-width: 44ch; }
.feature__shot { position: relative; border-radius: var(--r-lg); overflow: hidden; transform: rotate(-2.5deg); box-shadow: 0 40px 80px rgba(0,0,0,.5); transition: transform 700ms var(--ease); }
.feature:hover .feature__shot { transform: rotate(0) scale(1.015); }
.feature__shot img { width: 100%; }
.feature__glow { position: absolute; z-index: -1; right: -10%; bottom: -50%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,204,0,.32), transparent 65%); filter: blur(20px); }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; }
.tag { display: inline-flex; align-items: center; min-height: 28px; padding: .2rem .7rem; border-radius: 999px; border: 1px solid var(--line-2); font-size: .72rem; font-weight: 600; letter-spacing: -.04em; text-transform: uppercase; color: var(--muted); }
.tag--y { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; } .feature__shot { transform: none; } }

/* Works grid with sticky intro */
.works { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 2rem clamp(2rem, 1rem + 3vw, 4.5rem); }
.works__intro { position: sticky; top: 7rem; align-self: start; display: grid; gap: 1.25rem; }
.works__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.work { display: grid; gap: .6rem; align-content: start; padding: .6rem .6rem 1.4rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); transition: border-color var(--fast) ease, transform var(--med) var(--ease); }
.work:hover { border-color: var(--accent-text); transform: translateY(-3px); }
.work h3, .work p { padding-inline: .65rem; }
.work h3 { margin-top: .35rem; }
.work__img { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface-2); border: 1px solid var(--line); }
.work__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.work:hover .work__img img { transform: scale(1.05); }
.work__img .tag { position: absolute; top: .75rem; left: .75rem; background: rgba(5,5,5,.6); color: var(--paper); border-color: rgba(255,255,255,.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.work h3 { font-size: 1.15rem; letter-spacing: -.04em; }
.work p { color: var(--muted); font-size: .9rem; }
@media (max-width: 900px) { .works { grid-template-columns: 1fr; } .works__intro { position: static; } }
@media (max-width: 520px) { .works__grid { grid-template-columns: 1fr; } }

/* ---------- Process ---------- */
.process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; list-style: none; position: relative; }
.process::before { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 1px; background: var(--line-2); }
.process::after { content: ""; position: absolute; left: 0; top: 26px; height: 3px; width: calc(var(--prog, 0) * 100%); background: var(--yellow); border-radius: 3px; }
.pstep { position: relative; padding-right: 1rem; }
.pstep__n { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-2); font-weight: 600; margin-bottom: 1.5rem; transition: background-color var(--med) ease, color var(--med) ease, border-color var(--med) ease; }
.section--alt .pstep__n { background: var(--bg-alt); }
.panel .pstep__n { background: var(--panel); }
.pstep.is-on .pstep__n { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.pstep h3 { font-size: 1.4rem; letter-spacing: -.04em; margin-bottom: .5rem; }
.pstep p { color: var(--muted); }
@media (max-width: 860px) { .process { grid-template-columns: 1fr; gap: 2rem; } .process::before, .process::after { display: none; } .pstep { display: grid; grid-template-columns: 56px 1fr; gap: 0 1.25rem; } .pstep__n { margin: 0; grid-row: span 2; } }

/* ---------- Carousel ---------- */
.carousel__bar { display: flex; align-items: center; gap: 1.5rem; justify-content: flex-end; }
.carousel__nav { display: flex; gap: .5rem; }
.carousel__nav button { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line-2); transition: opacity var(--fast) ease, transform var(--fast) var(--ease); }
.carousel__nav button:last-child { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.carousel__nav button:active { transform: scale(.94); }
.carousel__nav button:disabled { opacity: .35; cursor: default; }
.carousel__nav svg { width: 20px; height: 20px; }
.carousel__progress { width: 160px; height: 2px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.carousel__progress span { display: block; height: 100%; width: var(--w, 30%); background: var(--text); margin-left: var(--x, 0%); transition: margin-left 160ms ease; }
.carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3rem) / 4); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: .5rem; scrollbar-width: none; list-style: none; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }
@media (max-width: 1100px) { .carousel__track { grid-auto-columns: calc((100% - 2rem) / 3); } }
@media (max-width: 760px) { .carousel__track { grid-auto-columns: 82%; } }
.pcard { position: relative; display: flex; flex-direction: column; min-height: 470px; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.pcard__top { padding: 1.5rem 1.5rem 1.25rem; display: grid; gap: .75rem; }
.pcard__top h3 { font-size: 1.6rem; letter-spacing: -.04em; }
.pcard__top p { color: var(--muted); font-size: .9375rem; }
.pcard__img { position: relative; flex: 1; min-height: 210px; margin: 0 .6rem .6rem; border-radius: calc(var(--r-lg) - 6px); overflow: hidden; }
.pcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.pcard:hover .pcard__img img { transform: scale(1.05); }
.pcard--y { background: var(--yellow); color: var(--ink); border-color: var(--yellow); --muted: #4a4426; }
.pcard--y .tag { color: var(--ink); border-color: rgba(5,5,5,.3); }

/* ---------- Ways to work ---------- */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.way { display: flex; flex-direction: column; gap: 1.1rem; min-height: 480px; padding: clamp(1.75rem, 1rem + 2.5vw, 3rem); border-radius: var(--r-panel); position: relative; overflow: hidden; }
.way--ink { background: var(--ink-3); color: var(--paper); border: 1px solid rgba(255,255,255,.1); --muted: #b3b2a8; }
.way--y { background: var(--yellow); color: var(--ink); --muted: #4a4426; }
.way__label { font-size: .75rem; font-weight: 600; letter-spacing: -.04em; text-transform: uppercase; opacity: .7; }
.way h3 { font-size: clamp(3rem, 2rem + 3.6vw, 5.5rem); letter-spacing: -.04em; line-height: .9; margin-top: auto; }
.way__sub { font-size: 1.25rem; font-weight: 500; letter-spacing: -.04em; }
.way p { color: var(--muted); max-width: 44ch; }
.way ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.way li { padding: .35rem .8rem; border-radius: 999px; border: 1px solid currentColor; font-size: .8125rem; font-weight: 500; opacity: .85; }
.way .btn { align-self: flex-start; }
.way__deco { position: absolute; right: -50px; top: -50px; width: 240px; height: 240px; border-radius: 50%; border: 1px dashed currentColor; opacity: .25; animation: spin 60s linear infinite; }
.way__deco::after { content: ""; position: absolute; inset: 34px; border-radius: 50%; border: 1px solid currentColor; }
@media (max-width: 860px) { .ways { grid-template-columns: 1fr; } .way { min-height: 420px; } }

/* ---------- Proof + CTA pair ---------- */
.pair { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; }
.quote { display: flex; flex-direction: column; gap: 1.5rem; padding: clamp(1.75rem, 1rem + 2.5vw, 3rem); border-radius: var(--r-panel); background: var(--ink-3); color: var(--paper); border: 1px solid rgba(255,255,255,.1); --muted: #b3b2a8; min-height: 420px; }
.quote__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.quote__mark { font-family: var(--serif); font-size: 7rem; line-height: .7; height: 3rem; color: var(--yellow); }
.quote__slides { display: grid; }
.quote__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 500ms ease, transform 500ms var(--ease), visibility 0s 500ms; }
.quote__slide.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 500ms ease, transform 500ms var(--ease), visibility 0s; }
.quote blockquote { margin: 0 0 1.25rem; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.3; letter-spacing: -.04em; }
.quote blockquote em { font-style: normal; color: var(--yellow); }
.quote__src { font-size: .875rem; color: var(--muted); }
.quote__meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.quote__nav { display: flex; gap: .4rem; }
.quote__nav button { min-width: 44px; height: 44px; padding: 0 .9rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); font-size: .8125rem; font-weight: 600; }
.quote__nav button[aria-pressed="true"] { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.ctacard { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: clamp(1.75rem, 1rem + 2.5vw, 3rem); border-radius: var(--r-panel); background: var(--yellow); color: var(--ink); position: relative; overflow: hidden; }
.ctacard h2 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.75rem); letter-spacing: -.04em; line-height: .95; }
.ctacard h2 .serif { letter-spacing: -.04em; }
.ctacard p { color: #4a4426; max-width: 34ch; }
.ctacard ul { list-style: none; display: grid; gap: .45rem; font-weight: 500; }
.ctacard li { display: flex; gap: .5rem; align-items: center; }
.ctacard li svg { width: 18px; height: 18px; }
@media (max-width: 900px) { .pair { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faqwrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2rem clamp(2rem, 1rem + 4vw, 5rem); }
.faqwrap__intro { display: grid; gap: 1.25rem; align-content: start; }
.faq { display: grid; gap: .6rem; }
.faq details { border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); transition: background-color var(--fast) ease; }
.faq details[open] { background: var(--ink-3); color: var(--paper); border-color: rgba(255,255,255,.1); --muted: #b3b2a8; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.25rem 1.2rem 1.5rem; cursor: pointer; list-style: none; font-size: 1.05rem; font-weight: 500; letter-spacing: -.04em; }
.faq summary::-webkit-details-marker { display: none; }
.faq__i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); flex-shrink: 0; transition: transform var(--med) var(--ease); }
.faq__i svg { width: 16px; height: 16px; }
.faq details[open] .faq__i { transform: rotate(45deg); background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.faq details > div { padding: 0 1.5rem 1.4rem; color: var(--muted); max-width: 66ch; }
.faq details > div a { color: inherit; }
@media (max-width: 860px) { .faqwrap { grid-template-columns: 1fr; } }

/* ---------- Forms ---------- */
.contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2rem clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.contact__intro { display: grid; gap: 1.4rem; }
.points { list-style: none; display: grid; gap: .8rem; }
.points li { display: flex; gap: .75rem; align-items: flex-start; color: var(--muted); }
.points svg { width: 20px; height: 20px; color: var(--accent-text); flex-shrink: 0; margin-top: .15rem; }
.formcard { padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.form { display: grid; gap: 1.2rem; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1.2rem; }
.field { display: grid; gap: .45rem; }
.field label { font-size: .875rem; font-weight: 600; }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 54px; padding: .85rem 1.1rem; border-radius: var(--r-sm);
  background: var(--field); color: var(--text); border: 1px solid var(--line-2); font: inherit; font-size: 1rem;
  transition: border-color var(--fast) ease, box-shadow var(--fast) ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field select { appearance: none; padding-right: 2.75rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 17px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.field select option { color: #111; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(255,204,0,.25); }
.field__hint { font-size: .8125rem; color: var(--muted); }
.field__err { display: none; font-size: .8125rem; color: #ff9180; }
:root[data-theme="light"] .field__err { color: #b42318; }
.field.has-error input, .field.has-error textarea { border-color: #ff9180; }
.field.has-error .field__err { display: block; }
.check { display: flex; gap: .75rem; align-items: flex-start; font-size: .9rem; color: var(--muted); }
.check input { width: 22px; height: 22px; margin: .1rem 0 0; accent-color: var(--yellow); flex-shrink: 0; }
.check.has-error { color: #ff9180; }
:root[data-theme="light"] .check.has-error { color: #b42318; }
.form__status { display: none; padding: 1rem 1.2rem; border-radius: var(--r-sm); background: var(--surface-2); border-left: 3px solid var(--yellow); }
.form__status.is-visible { display: block; }
.btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

/* ---------- Inner page hero ---------- */
.phero { padding-top: 5.75rem; }
.phero__panel { padding: clamp(3rem, 2rem + 5vw, 7rem) clamp(1.25rem, .5rem + 4vw, 4.5rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.mesh { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(50% 80% at 92% 0%, rgba(255, 204, 0, .3), transparent 60%),
  radial-gradient(40% 60% at 70% 115%, rgba(255, 140, 20, .2), transparent 60%),
  radial-gradient(30% 40% at 8% 100%, rgba(255, 204, 0, .08), transparent 70%); }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 2rem; align-items: end; }
.phero__copy { display: grid; gap: 1.5rem; }
.phero__copy .lead { color: #c9c8be; }
.phero__aside { display: flex; justify-content: flex-end; }
.phero__img { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 6; }
.phero__img img { width: 100%; height: 100%; object-fit: cover; }
.crumb { display: inline-flex; align-items: center; gap: .5rem; width: fit-content; color: #c9c8be; font-size: .9rem; text-decoration: none; }
.crumb svg { width: 16px; height: 16px; }
.crumb:hover { color: var(--yellow); }
@media (max-width: 860px) { .phero__grid { grid-template-columns: 1fr; } .phero__aside { justify-content: flex-start; } .phero__img { aspect-ratio: 4 / 3; } }

/* Cards (generic) */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.card { display: flex; flex-direction: column; gap: .9rem; padding: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); transition: transform var(--med) var(--ease), border-color var(--fast) ease; }
.card:hover { transform: translateY(-4px); border-color: var(--line-2); }
.card__ic { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--yellow); color: var(--ink); }
.card__ic svg { width: 24px; height: 24px; }
.card__n { font-family: var(--serif); font-style: normal; font-size: 2.25rem; line-height: 1; color: var(--accent-text); }
.card h3 { font-size: 1.45rem; letter-spacing: -.04em; }
.card p { color: var(--muted); }
.card--y { background: var(--yellow); color: var(--ink); border-color: var(--yellow); --muted: #4a4426; --accent-text: var(--ink); }
.card__foot { margin-top: auto; padding-top: .5rem; }

/* Layer rows (system page) */
.lrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 1rem + 4vw, 5rem); align-items: center; padding-block: clamp(2.5rem, 2rem + 3vw, 5rem); }
.lrow + .lrow { border-top: 1px solid var(--line); }
.lrow__media { position: relative; border-radius: var(--r-panel); overflow: hidden; aspect-ratio: 5 / 4; }
.lrow__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.lrow:hover .lrow__media img { transform: scale(1.04); }
.lrow__num { position: absolute; top: 1rem; left: 1.25rem; font-family: var(--serif); font-style: normal; font-size: 5rem; line-height: .8; color: var(--yellow); text-shadow: 0 4px 30px rgba(0,0,0,.5); }
.lrow__copy { display: grid; gap: 1.25rem; }
.lrow:nth-child(even) .lrow__media { order: 2; }
.lists { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.lists h3 { font-size: .75rem; font-weight: 600; letter-spacing: -.04em; text-transform: uppercase; color: var(--accent-text); margin-bottom: .8rem; line-height: 1.4; }
.ticks { list-style: none; display: grid; gap: .5rem; }
.ticks li { display: flex; gap: .6rem; align-items: flex-start; }
.ticks svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: .2rem; color: var(--accent-text); }
@media (max-width: 860px) { .lrow { grid-template-columns: 1fr; } .lrow:nth-child(even) .lrow__media { order: 0; } .lists { grid-template-columns: 1fr; } }

/* Case study */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.fact { padding: 1.25rem 1.4rem; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.fact dt { font-size: .72rem; font-weight: 600; letter-spacing: -.04em; text-transform: uppercase; color: var(--accent-text); margin-bottom: .4rem; }
.fact dd { margin: 0; font-weight: 500; }
@media (max-width: 860px) { .facts { grid-template-columns: 1fr 1fr; } }
.chap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.5rem clamp(2rem, 1rem + 4vw, 5rem); padding-block: clamp(3rem, 2rem + 3vw, 5rem) 2rem; }
.chap__n { font-family: var(--serif); font-style: normal; font-size: 3.25rem; line-height: 1; color: var(--accent-text); display: block; margin-bottom: .75rem; }
.chap p + p { margin-top: 1rem; }
.chap p { color: var(--muted); max-width: 62ch; font-size: 1.0625rem; }
.chap strong { color: var(--text); font-weight: 600; }
@media (max-width: 860px) { .chap { grid-template-columns: 1fr; } }
.board { margin: 0; border-radius: var(--r-panel); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 1.5rem; }
.swatch { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.swatch span { display: block; aspect-ratio: 3 / 2; }
.swatch p { padding: .7rem .9rem; font-size: .82rem; color: var(--muted); }
.swatch strong { display: block; color: var(--text); font-weight: 600; }

/* Founder */
.founder { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2rem clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.founder__mark { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-panel); overflow: hidden; background: var(--ink-3); display: grid; place-items: center; color: var(--yellow); }
.founder__mark svg { position: relative; width: 40%; height: auto; }
.founder__copy { display: grid; gap: 1.25rem; }
.founder__copy p { color: var(--muted); max-width: 58ch; }
.sign { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.sign strong { font-family: var(--serif); font-style: normal; font-weight: 400; font-size: 2.25rem; color: var(--accent-text); line-height: 1; }
.sign span { color: var(--muted); font-size: .9rem; }
@media (max-width: 860px) { .founder { grid-template-columns: 1fr; } .founder__mark { aspect-ratio: 16 / 10; } }

/* Insights list */
.posts { display: grid; gap: 1rem; }
.post { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; align-items: center; gap: 1rem 2rem; padding: 1.5rem 1.75rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: transform var(--med) var(--ease), border-color var(--fast) ease; }
a.post:hover { transform: translateX(6px); border-color: var(--yellow); }
.post__cat { font-size: .72rem; font-weight: 600; letter-spacing: -.04em; text-transform: uppercase; color: var(--accent-text); }
.post h3 { font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem); letter-spacing: -.04em; margin-bottom: .3rem; }
.post p { color: var(--muted); font-size: .9375rem; }
@media (max-width: 760px) { .post { grid-template-columns: 1fr; } }

/* Article */
.article { max-width: 44rem; margin-inline: auto; }
.article h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); margin: 3rem 0 1rem; }
.article h2 .serif { color: var(--accent-text); }
.article p { font-size: 1.125rem; line-height: 1.75; color: var(--muted); }
.article p + p { margin-top: 1.2rem; }
.article strong { color: var(--text); font-weight: 600; }
.article a { color: var(--text); }
.pull { margin: 2.5rem 0; font-family: var(--serif); font-style: normal; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem); line-height: 1.15; color: var(--text); padding-left: 1.5rem; border-left: 3px solid var(--yellow); }

/* Prose */
.prose { max-width: 46rem; }
.prose h2 { font-size: 1.5rem; margin: 2.5rem 0 .75rem; }
.prose p, .prose li { color: var(--muted); }
.prose ul { padding-left: 1.2rem; display: grid; gap: .4rem; margin-top: .75rem; }

/* Note */
.note { display: flex; gap: .75rem; align-items: flex-start; margin-top: 2rem; padding: 1rem 1.25rem; border-radius: var(--r-md); background: var(--surface-2); color: var(--muted); font-size: .9375rem; }
.note svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent-text); }
.note a { color: var(--text); }

/* Big CTA panel */
.bigcta { text-align: center; display: grid; justify-items: center; gap: 1.5rem; padding: clamp(3.5rem, 2rem + 6vw, 7.5rem) clamp(1.25rem, 1rem + 4vw, 4rem); }
.bigcta .lead { margin-inline: auto; text-align: center; color: #c9c8be; }
.bigcta__glow { position: absolute; left: 0; right: 0; bottom: -70%; height: 130%; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, rgba(255,204,0,.32), transparent 70%); }

/* ---------- Footer ---------- */
.site-footer { padding-top: calc(var(--section) * .4); overflow: hidden; }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, .6fr)); gap: 2.5rem; padding-bottom: 3rem; }
.footer__cta { display: grid; gap: 1.25rem; align-content: start; }
.footer__cta h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem); letter-spacing: -.04em; max-width: 16ch; }
.footer__col h3 { font-size: .75rem; font-weight: 600; letter-spacing: -.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.footer__col ul { list-style: none; display: grid; gap: .15rem; }
.footer__col a { display: inline-block; padding: .3rem 0; text-decoration: none; color: var(--text); }
.footer__col a:hover { color: var(--accent-text); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .875rem; }
.footer__bottom a { color: inherit; }
.footer__word { color: var(--logo); padding-top: 1.5rem; -webkit-mask-image: linear-gradient(180deg, #000 25%, transparent 100%); mask-image: linear-gradient(180deg, #000 25%, transparent 100%); }
.footer__word svg { width: 100%; height: auto; }
@media (max-width: 860px) { .footer__top { grid-template-columns: 1fr 1fr; } .footer__cta { grid-column: 1 / -1; } }

/* Cursor bubble */
.cursor { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; display: grid; place-items: center; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: var(--yellow); color: var(--ink); font-size: .8rem; font-weight: 600; text-align: center; line-height: 1.1; transform: translate(var(--cx, -300px), var(--cy, -300px)) scale(0); transition: transform 380ms var(--ease); }
.cursor.is-on { transform: translate(var(--cx), var(--cy)) scale(1); }
@media (pointer: coarse) { .cursor { display: none; } }

/* ---------- Reveal motion ---------- */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); transition-delay: var(--d, 0ms); }
.js .rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .rv { opacity: 1; transform: none; }
  .lit .w, :root[data-theme="light"] .lit .w { color: var(--text); }
  .marquee__track { flex-wrap: wrap; width: auto; }
  .marquee__group[aria-hidden] { display: none; }
}

/* Former serif accents, now Gilroy */
.acc__label b, .card__n, .lrow__num, .chap__n, .sign strong { font-weight: 700; letter-spacing: -.04em; }
.pull { font-weight: 500; letter-spacing: -.04em; }
.quote__mark { font-weight: 800; }

/* Carousel card icon area (replaces photo, keeps card height) */
.pcard__icon { position: relative; flex: 1; min-height: 210px; margin: 0 .6rem .6rem; border-radius: calc(var(--r-lg) - 6px); display: grid; place-items: center; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line); }
.pcard__icon::before, .pcard__icon::after { content: ""; position: absolute; border-radius: 50%; border: 1px dashed var(--line-2); width: 190px; height: 190px; }
.pcard__icon::after { width: 130px; height: 130px; border-style: solid; border-color: var(--line); }
.pcard__icon span { position: relative; z-index: 1; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 26px; background: var(--yellow); color: var(--ink); box-shadow: 0 14px 34px rgba(255, 204, 0, .25); transition: transform var(--med) var(--ease); }
.pcard__icon svg { width: 38px; height: 38px; stroke-width: 1.6; }
.pcard:hover .pcard__icon span { transform: rotate(-6deg) scale(1.06); }
.pcard--y .pcard__icon { background: rgba(5, 5, 5, .06); border-color: rgba(5, 5, 5, .12); }
.pcard--y .pcard__icon::before { border-color: rgba(5, 5, 5, .25); }
.pcard--y .pcard__icon::after { border-color: rgba(5, 5, 5, .15); }
.pcard--y .pcard__icon span { background: var(--ink); color: var(--yellow); box-shadow: 0 14px 34px rgba(0, 0, 0, .2); }

/* Light mode: lit words go black, highlighted phrases get a yellow marker */
:root[data-theme="light"] .lit .w { color: #bfbdb2; }
:root[data-theme="light"] .lit .w.on { color: #000000; }
:root[data-theme="light"] .lit .w.k, :root[data-theme="light"] .lit .serif.w {
  background: linear-gradient(var(--yellow), var(--yellow)) no-repeat 0 85% / 0% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .12em; margin: 0 -.06em; border-radius: .12em;
  transition: color 260ms ease, background-size 700ms var(--ease);
}
:root[data-theme="light"] .lit .w.k.on, :root[data-theme="light"] .lit .serif.w.on { color: #000000; background-size: 100% 100%; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .lit .w { color: #bfbdb2; }
  :root:not([data-theme]) .lit .w.on { color: #000000; }
  :root:not([data-theme]) .lit .w.k, :root:not([data-theme]) .lit .serif.w { background: linear-gradient(var(--yellow), var(--yellow)) no-repeat 0 85% / 0% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .12em; margin: 0 -.06em; border-radius: .12em; transition: color 260ms ease, background-size 700ms var(--ease); }
  :root:not([data-theme]) .lit .w.k.on, :root:not([data-theme]) .lit .serif.w.on { color: #000000; background-size: 100% 100%; }
}

/* Pillar cards: one uniform structure */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.pillar { display: flex; flex-direction: column; gap: .9rem; min-height: 320px; padding: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); transition: border-color var(--fast) ease, transform var(--med) var(--ease); }
.pillar:hover { border-color: var(--accent-text); transform: translateY(-4px); }
.pillar__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: auto; padding-bottom: 2.5rem; }
.pillar__ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--yellow); color: var(--ink); transition: transform var(--med) var(--ease); }
.pillar__ic svg { width: 26px; height: 26px; }
.pillar:hover .pillar__ic { transform: rotate(-6deg); }
.pillar__n { font-size: .875rem; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.pillar__t { font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem); font-weight: 500; line-height: 1.1; }
.pillar__p { color: var(--muted); max-width: 40ch; }
.pillar__foot { margin-top: .4rem; }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } .pillar { min-height: 0; } .pillar__top { padding-bottom: 1.5rem; } }

/* Scope list: numbered, one line per item, easy to scan */
.scope { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 2rem clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.scope__intro { position: sticky; top: 7rem; display: grid; gap: 1.25rem; }
.scope__list { list-style: none; border-top: 1px solid var(--line-2); }
.scope__row { display: grid; grid-template-columns: 3rem minmax(0, .9fr) minmax(0, 1.1fr); gap: .35rem 1.5rem; align-items: baseline; padding: 1.6rem .5rem; border-bottom: 1px solid var(--line-2); transition: background-color var(--fast) ease; }
.scope__row:hover { background: var(--surface); }
.scope__n { font-size: .875rem; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; transition: color var(--fast) ease; }
.scope__row:hover .scope__n { color: var(--accent-text); }
.scope__t { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); font-weight: 500; line-height: 1.15; }
.scope__d { color: var(--muted); }
.scope__cta { display: grid; gap: 1rem; justify-items: start; margin-top: .75rem; padding: 1.25rem 1.4rem; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-2); border-left: 3px solid var(--yellow); }
.scope__cta p { color: var(--muted); }
.scope__cta strong { color: var(--text); font-weight: 600; }
@media (max-width: 900px) { .scope { grid-template-columns: 1fr; } .scope__intro { position: static; } }
@media (max-width: 640px) { .scope__row { grid-template-columns: 2.5rem minmax(0, 1fr); } .scope__d { grid-column: 2; } }
/* Compact variant (no descriptions) used on The Byla System */
.scope__label { font-size: .75rem; font-weight: 600; text-transform: uppercase; color: var(--accent-text); }
.scope__list--compact .scope__row { grid-template-columns: 3rem minmax(0, 1fr); padding: .85rem .5rem; }
.scope__list--compact .scope__t { font-size: 1.05rem; font-weight: 500; }
.scope__when { padding: 1rem 1.2rem; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-2); border-left: 3px solid var(--yellow); color: var(--muted); }
.scope__when strong { color: var(--text); font-weight: 600; }

/* Hero intro: exactly two lines on wider screens */
.hero__copy .hero__lead { max-width: none; }
.hero__lead span { display: block; white-space: nowrap; }
@media (max-width: 1180px) { .hero__lead span { white-space: normal; } }

/* Hero v3: yellow studio set on the right, ink on the left */
.hero__photo { left: 36%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%); mask-image: linear-gradient(90deg, transparent 0%, #000 28%); }
.hero__photo img { object-position: 50% 62%; }
.hero__shade {
  background:
    radial-gradient(45% 55% at var(--mx, 70%) var(--my, 45%), rgba(255, 190, 40, .18), transparent 65%),
    linear-gradient(90deg, rgba(5,5,5,.55) 0%, rgba(5,5,5,.15) 45%, rgba(5,5,5,0) 70%),
    linear-gradient(0deg, rgba(5,5,5,.55), transparent 35%);
}
@media (max-width: 960px) {
  .hero__photo { left: 0; -webkit-mask-image: none; mask-image: none; }
  .hero__photo img { object-position: 50% 40%; }
  .hero__shade { background: linear-gradient(180deg, rgba(5,5,5,.35) 0%, rgba(5,5,5,.88) 48%, rgba(5,5,5,.97) 100%); }
}
.hero__photo img { object-position: 78% 62%; }
.hero .badge { background: rgba(5, 5, 5, .62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 40px rgba(0,0,0,.35); }
@media (max-width: 960px) {
  .hero__photo img { object-position: 50% 70%; }
  .hero__shade { background: linear-gradient(180deg, rgba(5,5,5,.78) 0%, rgba(5,5,5,.7) 40%, rgba(5,5,5,.9) 70%, rgba(5,5,5,.97) 100%); }
}

/* Timeline: keep the line (grey track + yellow fill) behind the numbered circles */
.process::before, .process::after { z-index: 0; }
.pstep__n { z-index: 1; }

/* Headings: tracking -60 (body text stays at -40) */
h1, h2, h3, h4, .h-xl, .h-lg, .h-md, .h-sm,
h1 *, h2 *, h3 *, h4 *, .h-xl *, .h-lg *, .h-md *, .h-sm * { letter-spacing: -.06em !important; }

/* Hero v4 layout (photo on the right, faded into ink) */
.hero__photo { left: 30%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%); }
.hero__photo img { object-position: 50% 24%; }
.hero__shade {
  background:
    radial-gradient(40% 50% at var(--mx, 66%) var(--my, 40%), rgba(255, 190, 40, .14), transparent 65%),
    linear-gradient(90deg, rgba(5,5,5,.6) 0%, rgba(5,5,5,.1) 45%, rgba(5,5,5,0) 70%),
    linear-gradient(0deg, rgba(5,5,5,.7), transparent 38%);
}
@media (max-width: 960px) {
  .hero__photo { left: 0; -webkit-mask-image: none; mask-image: none; }
  .hero__photo img { object-position: 50% 20%; }
}
@media (max-width: 960px) {
  .hero__photo img { object-position: 50% 12%; }
  .hero__shade { background: linear-gradient(180deg, rgba(5,5,5,.74) 0%, rgba(5,5,5,.8) 35%, rgba(5,5,5,.92) 60%, rgba(5,5,5,.97) 100%); }
}

/* Hero v5: abstract gold coil. Alternate: hero-gold-wave.webp */
.hero__photo img { object-position: 55% 50%; }
@media (max-width: 960px) {
  .hero__photo img { object-position: 70% 50%; }
  .hero__shade { background: linear-gradient(180deg, rgba(5,5,5,.6) 0%, rgba(5,5,5,.72) 40%, rgba(5,5,5,.9) 65%, rgba(5,5,5,.97) 100%); }
}

/* Hero motion: the gold coil slowly turns and breathes, a soft light sweeps across it,
   and the whole layer leans toward the pointer. All of it stops under reduced motion. */
.hero__photo { transform: translate3d(var(--px, 0px), var(--py, 0px), 0); transition: transform 900ms var(--ease); }
.hero__photo img {
  transform-origin: 62% 50%;
  animation: hero-turn 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes hero-turn {
  0%   { transform: scale(1.2) rotate(-4deg) translate3d(-1%, .5%, 0); }
  35%  { transform: scale(1.26) rotate(2deg) translate3d(.8%, -1.2%, 0); }
  70%  { transform: scale(1.22) rotate(6deg) translate3d(1.2%, .8%, 0); }
  100% { transform: scale(1.28) rotate(9deg) translate3d(-.5%, 1.4%, 0); }
}
.hero__photo::after {
  content: ""; position: absolute; inset: -20%; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 236, 170, .32) 48%, rgba(255, 214, 90, .12) 53%, transparent 62%);
  mix-blend-mode: overlay; transform: translateX(-60%);
  animation: hero-sheen 9s cubic-bezier(.45, 0, .25, 1) 1.5s infinite;
}
@keyframes hero-sheen {
  0%   { transform: translateX(-60%); opacity: 0; }
  12%  { opacity: 1; }
  55%  { transform: translateX(60%); opacity: 1; }
  65%, 100% { transform: translateX(60%); opacity: 0; }
}
@media (max-width: 960px) {
  @keyframes hero-turn {
    0%   { transform: scale(1.32) rotate(-3deg); }
    50%  { transform: scale(1.38) rotate(1deg); }
    100% { transform: scale(1.34) rotate(3deg); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__photo { transform: none; transition: none; }
  .hero__photo img { animation: none; transform: scale(1.15); }
  .hero__photo::after { display: none; }
}
/* Bleed the image layer past the panel so the parallax never exposes an edge */
.hero__photo { top: -28px; right: -28px; bottom: -28px; }
@media (max-width: 960px) { .hero__photo { left: -28px; } }

/* Light mode highlights: black words on a yellow highlighter stripe (readable on cream).
   Dark panels and dark cards keep plain yellow text. */
:root[data-theme="light"] .hl {
  color: var(--text);
  background: linear-gradient(180deg, transparent 50%, var(--yellow) 50%, var(--yellow) 90%, transparent 90%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .06em;
}
:root[data-theme="light"] :is(.panel, .way--ink, .quote, .tile--ink) .hl { color: var(--yellow); background: none; padding: 0; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .hl {
    color: var(--text);
    background: linear-gradient(180deg, transparent 50%, var(--yellow) 50%, var(--yellow) 90%, transparent 90%);
    -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .06em;
  }
  :root:not([data-theme]) :is(.panel, .way--ink, .quote, .tile--ink) .hl { color: var(--yellow); background: none; padding: 0; }
}


/* ==========================================================================
   Hero v6: text-led, full screen, plain colour with soft drifting blurs
   ========================================================================== */
.hero2 { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: flex; background: var(--bg); }
.hero2__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero2__orb {
  position: absolute; border-radius: 50%; filter: blur(clamp(60px, 9vw, 140px)); opacity: .55;
  transform: translate3d(var(--ox, 0px), var(--oy, 0px), 0);
  transition: transform 1200ms var(--ease);
}
.hero2__orb::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--g); animation: orb-drift 18s ease-in-out infinite alternate; }
.hero2__orb--a { width: clamp(320px, 42vw, 680px); aspect-ratio: 1; right: -8%; top: -12%; --g: radial-gradient(circle at 40% 40%, #ffcc00, rgba(255, 204, 0, 0) 70%); }
.hero2__orb--b { width: clamp(260px, 32vw, 520px); aspect-ratio: 1; left: -10%; bottom: -14%; --g: radial-gradient(circle at 50% 50%, #ff9e1b, rgba(255, 158, 27, 0) 70%); opacity: .4; }
.hero2__orb--b::before { animation-duration: 22s; animation-delay: -6s; }
.hero2__orb--c { width: clamp(200px, 22vw, 380px); aspect-ratio: 1; left: 42%; top: 38%; --g: radial-gradient(circle at 50% 50%, #ffe066, rgba(255, 224, 102, 0) 70%); opacity: .28; }
.hero2__orb--c::before { animation-duration: 26s; animation-delay: -12s; }
@keyframes orb-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(6%, 8%) scale(1.08); }
  100% { transform: translate(-6%, 4%) scale(.94); }
}
.hero2 .grain { opacity: .06; }
:root[data-theme="light"] .hero2__orb { opacity: .65; }
:root[data-theme="light"] .hero2__orb--b { opacity: .45; }
:root[data-theme="light"] .hero2__orb--c { opacity: .4; }

.hero2__inner { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(2rem, 1rem + 3vw, 4rem); width: min(100% - 2 * var(--gutter), 1440px); padding-top: clamp(6.5rem, 5rem + 4vw, 9rem); padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.hero2__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.hero2__meta { font-size: .9375rem; font-weight: 500; color: var(--muted); }
.hero2__meta span { color: var(--accent-text); margin-inline: .35rem; }
:root[data-theme="light"] .hero2__meta span { color: var(--yellow); }
.hero2__title { font-size: clamp(3.4rem, 1rem + 10.4vw, 12.5rem); font-weight: 500; line-height: .9; display: grid; gap: .02em; }
.hero2__line { display: block; white-space: nowrap; }
.hero2__title .sel__tag { font-size: clamp(.8rem, .6rem + .4vw, 1rem); bottom: -1.6em; }
.hero2__title .sel__box i { width: clamp(9px, .4rem + .4vw, 14px); height: clamp(9px, .4rem + .4vw, 14px); }
.hero2__title .sel__box i:nth-child(1), .hero2__title .sel__box i:nth-child(2) { top: calc(clamp(9px, .4rem + .4vw, 14px) / -2); }
.hero2__title .sel__box i:nth-child(3), .hero2__title .sel__box i:nth-child(4) { bottom: calc(clamp(9px, .4rem + .4vw, 14px) / -2); }
.hero2__title .sel__box i:nth-child(1), .hero2__title .sel__box i:nth-child(3) { left: calc(clamp(9px, .4rem + .4vw, 14px) / -2); }
.hero2__title .sel__box i:nth-child(2), .hero2__title .sel__box i:nth-child(4) { right: calc(clamp(9px, .4rem + .4vw, 14px) / -2); }
:root[data-theme="light"] .hero2__title .sel__box i { background: var(--white); }

.hero2__bottom { display: grid; grid-template-columns: minmax(0, 1.1fr) auto auto; align-items: end; gap: 1.5rem 2.5rem; padding-top: clamp(1.5rem, 1rem + 1vw, 2rem); border-top: 1px solid var(--line-2); }
.hero2__lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.3rem); line-height: 1.5; color: var(--muted); }
.hero2__lead span { display: block; }
.hero2__badge { color: var(--text); }
.hero2__badge .badge__ring text { fill: currentColor; }

@media (max-width: 1100px) {
  .hero2__bottom { grid-template-columns: 1fr auto; }
  .hero2__bottom .btn-row { grid-row: 2; }
  .hero2__badge { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
}
@media (max-width: 640px) {
  .hero2__inner { padding-top: 6.5rem; }
  .hero2__line { white-space: normal; }
  .hero2__title { font-size: clamp(3rem, 15vw, 5rem); }
  .hero2__meta { display: none; }
  .hero2__bottom { grid-template-columns: 1fr; }
  .hero2__bottom .btn-row { grid-row: auto; }
  .hero2__bottom .btn-row .btn { width: 100%; justify-content: space-between; }
  .hero2__badge { display: none; }
  .hero2 .sel__tag { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero2__orb::before { animation: none; }
  .hero2__orb { transition: none; transform: none; }
}
/* Fit the whole hero in one screen: headline scales with width AND height */
.hero2__title { font-size: clamp(3.4rem, min(1rem + 10.4vw, 15.5svh), 12.5rem); }
@media (max-width: 640px) { .hero2__title { font-size: clamp(3rem, 15vw, 5rem); } }
@media (max-width: 640px) { .hero2__title { font-size: clamp(3rem, 17.2vw, 5.6rem); } }


/* ==========================================================================
   Hero v7: dark-to-gradient panel in brand colours, two-line headline
   ========================================================================== */
.hero3 { padding-top: 5.75rem; }
.hero3__panel {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100svh - 6.75rem);
  display: flex; flex-direction: column;
  padding: clamp(1.75rem, 1rem + 2.5vw, 3.25rem) clamp(1.25rem, .5rem + 3.5vw, 4.25rem) clamp(1.5rem, 1rem + 2vw, 3rem);
  border-radius: var(--r-panel); background: #120c02; color: var(--paper);
}
.hero3__mesh { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero3__blob {
  position: absolute; border-radius: 50%; filter: blur(clamp(50px, 6vw, 110px));
  transform: translate3d(var(--ox, 0px), var(--oy, 0px), 0); transition: transform 1200ms var(--ease);
}
.hero3__blob::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--g); animation: orb-drift 16s ease-in-out infinite alternate; }
.hero3__blob--a { --g: #ffcc00; width: 62%; aspect-ratio: 1.5; right: -12%; bottom: -34%; }
.hero3__blob--b { --g: #ff9e1b; width: 48%; aspect-ratio: 1.4; left: -10%; bottom: -30%; }
.hero3__blob--b::before { animation-duration: 21s; animation-delay: -7s; }
.hero3__blob--c { --g: #ffe58a; width: 34%; aspect-ratio: 1.6; left: 34%; bottom: -16%; opacity: .9; }
.hero3__blob--c::before { animation-duration: 25s; animation-delay: -11s; }
.hero3__blob--d { --g: #c77700; width: 30%; aspect-ratio: 1.2; left: 18%; bottom: 18%; opacity: .75; }
.hero3__blob--d::before { animation-duration: 19s; animation-delay: -4s; }
.hero3__fade { position: absolute; inset: 0; background: linear-gradient(180deg, #050505 0%, #050505 26%, rgba(5,5,5,.72) 42%, rgba(5,5,5,.2) 58%, rgba(5,5,5,0) 70%); }
.hero3 .grain { opacity: .09; mix-blend-mode: overlay; }

.hero3__kicker { display: inline-flex; align-items: center; gap: .6rem; font-size: .8125rem; font-weight: 600; text-transform: uppercase; color: #d9d7cc; }
.hero3__kicker span { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 12px var(--yellow); }

.hero3__title {
  margin-top: clamp(1.5rem, 1rem + 3vw, 4.5rem);
  font-size: clamp(2.8rem, min(.6rem + 8.1vw, 15svh), 10rem); font-weight: 500; line-height: .95; color: var(--paper);
}
.hero3__line { display: block; white-space: nowrap; }
.hero3__title .hl { color: var(--yellow); background: none; padding: 0; }
.hero3__title .sel__tag { font-size: clamp(.8rem, .6rem + .4vw, 1rem); bottom: -1.7em; }

.hero3__bottom { margin-top: auto; padding-top: 2rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; color: var(--ink); }
.hero3__copy { display: grid; gap: 1.25rem; }
.hero3__lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.3rem); line-height: 1.5; color: #241c04; font-weight: 500; }
.hero3__lead span { display: block; }
.hero3__ghost { --fg-b: var(--ink); --bd-b: rgba(5,5,5,.35); --ic-bg: var(--ink); --ic-fg: var(--yellow); background: rgba(255,255,255,.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero3__ghost:hover { --bd-b: var(--ink); }
.hero3__badge { color: var(--ink); background: rgba(255, 255, 255, .16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero3__badge .badge__core { background: var(--ink); color: var(--yellow); }
.hero3 :focus-visible { outline-color: var(--ink); }
.hero3__title :focus-visible { outline-color: var(--yellow); }

@media (max-width: 900px) {
  .hero3__line { white-space: normal; }
  .hero3__title { font-size: clamp(2.8rem, 11.5vw, 5.5rem); }
  .hero3__fade { background: linear-gradient(180deg, #050505 0%, #050505 34%, rgba(5,5,5,.7) 46%, rgba(5,5,5,.15) 58%, rgba(5,5,5,0) 66%); }
  .hero3__blob--a { width: 110%; bottom: -20%; right: -40%; }
  .hero3__blob--b { width: 95%; bottom: -18%; left: -35%; }
  .hero3__blob--c { width: 70%; left: 15%; bottom: -6%; }
  .hero3__blob--d { width: 60%; left: 0; bottom: 22%; }
  .hero3__badge { display: none; }
}
@media (max-width: 520px) {
  .hero3__bottom .btn-row .btn { width: 100%; justify-content: space-between; }
  .hero3 .sel__tag { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero3__blob::before { animation: none; }
  .hero3__blob { transition: none; transform: none; }
}
/* Bigger two-line headline: fill the panel width, capped by screen height */
.hero3__title { font-size: clamp(2.8rem, min(.4rem + 11.1vw, 19.5svh), 13rem); line-height: .92; }
@media (max-width: 900px) { .hero3__title { font-size: clamp(2.8rem, 11.5vw, 5.5rem); } }
/* The hero panel is always dark at the top: keep "right order." plain yellow in every theme */
:root .hero3__title .hl, :root[data-theme="light"] .hero3__title .hl { color: var(--yellow); background: none; padding: 0; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .hero3__title .hl { color: var(--yellow); background: none; padding: 0; } }

/* Phones: panel hugs its content; dark fade ends above the intro so dark text sits on full colour */
@media (max-width: 900px) {
  .hero3__panel { min-height: 0; }
  .hero3__bottom { padding-top: clamp(4.5rem, 14vw, 7rem); }
  .hero3__fade { background: linear-gradient(180deg, #050505 0%, #050505 26%, rgba(5,5,5,.65) 38%, rgba(5,5,5,0) 50%); }
  .hero3__blob--a { width: 120%; aspect-ratio: 1; bottom: -25%; right: -45%; }
  .hero3__blob--b { width: 105%; aspect-ratio: 1; bottom: -20%; left: -40%; }
  .hero3__blob--c { width: 80%; aspect-ratio: 1.2; left: 10%; bottom: 5%; }
  .hero3__blob--d { width: 75%; aspect-ratio: 1.3; left: -5%; bottom: 30%; }
}

/* ==========================================================================
   Site-wide texture: a faint film grain over every background (both themes)
   ========================================================================== */
:root { --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body::after {
  content: ""; position: fixed; inset: 0; z-index: 250; pointer-events: none;
  background-image: var(--noise); background-size: 220px 220px;
  opacity: .07; mix-blend-mode: overlay;
}
:root[data-theme="light"] body::after { opacity: .09; mix-blend-mode: multiply; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) body::after { opacity: .09; mix-blend-mode: multiply; } }
/* A touch more grain inside the hero gradient */
.hero3 .grain { opacity: .14; background-image: var(--noise); background-size: 220px 220px; }
/* Dark mode: plain blend so the grain shows on near-black */
body::after { mix-blend-mode: normal; opacity: .06; }
:root[data-theme="light"] body::after { opacity: .14; mix-blend-mode: multiply; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) body::after { opacity: .14; mix-blend-mode: multiply; } }

/* Hero texture: the gold coil render glowing through the gradient at low strength */
.hero3__texture {
  position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none;
  object-fit: cover; object-position: 65% 50%;
  opacity: .3; mix-blend-mode: screen;
  transform-origin: 62% 50%; animation: hero-turn 30s ease-in-out infinite alternate; will-change: transform;
}
@media (max-width: 900px) { .hero3__texture { object-position: 70% 40%; opacity: .26; } }
@media (prefers-reduced-motion: reduce) { .hero3__texture { animation: none; transform: scale(1.1); } }

/* Hero v7.1: darker, moodier panel; texture dialled down; light text throughout */
.hero3__texture { opacity: .14; }
.hero3__blob { opacity: .8; }
.hero3__fade { background: linear-gradient(180deg, #050505 0%, #050505 34%, rgba(5,5,5,.82) 52%, rgba(5,5,5,.55) 72%, rgba(5,5,5,.38) 100%); }
.hero3__bottom { color: var(--paper); }
.hero3__lead { color: #ece9dd; text-shadow: 0 1px 18px rgba(0,0,0,.45); }
.hero3__ghost { --fg-b: var(--paper); --bd-b: rgba(255,255,255,.35); --ic-bg: var(--paper); --ic-fg: var(--ink); background: rgba(5,5,5,.25); }
.hero3__ghost:hover { --bd-b: var(--paper); }
.hero3__badge { color: var(--paper); background: rgba(5,5,5,.35); }
.hero3__badge .badge__core { background: var(--yellow); color: var(--ink); }
.hero3 :focus-visible { outline-color: var(--yellow); }
@media (max-width: 900px) {
  .hero3__texture { opacity: .12; }
  .hero3__fade { background: linear-gradient(180deg, #050505 0%, #050505 36%, rgba(5,5,5,.8) 52%, rgba(5,5,5,.55) 72%, rgba(5,5,5,.4) 100%); }
}

/* Hero texture v2: black ribbed render, its grey ribs show through the black panel */
.hero3__texture { opacity: 1; mix-blend-mode: screen; object-position: 60% 50%; }
@media (max-width: 900px) { .hero3__texture { opacity: .9; object-position: 70% 50%; } }

/* Hero v7.2: no colour blurs, just the black ribbed texture on black */
.hero3__blob { display: none; }
.hero3__panel { background: #070707; }
.hero3__fade { background: linear-gradient(180deg, rgba(5,5,5,.35) 0%, rgba(5,5,5,0) 40%, rgba(5,5,5,0) 70%, rgba(5,5,5,.45) 100%); }


/* ==========================================================================
   Hero v8: centred type, yellow underline, curved 3D gallery (inside a cylinder)
   ========================================================================== */
.hero4 { position: relative; overflow: hidden; padding-top: clamp(7.5rem, 6rem + 4vw, 10rem); background: var(--bg); }
.hero4__inner { display: grid; justify-items: center; text-align: center; gap: clamp(1.1rem, .8rem + 1vw, 1.75rem); }
.hero4__chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: .4rem 1.1rem; border-radius: 999px;
  font-size: .8125rem; font-weight: 600; text-transform: uppercase;
  color: var(--text); background: rgba(255, 204, 0, .16); border: 1px solid rgba(255, 204, 0, .55);
}
.hero4__title { font-size: clamp(2.6rem, min(.5rem + 7.4vw, 15svh), 8.75rem); font-weight: 500; line-height: .98; color: var(--text); }
.hero4__line { display: block; }
.hero4__mark { position: relative; display: inline-block; padding-bottom: .06em; }
.hero4__mark::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.02em; height: .085em; border-radius: 99px;
  background: var(--yellow); transform-origin: left center; animation: mark-draw 1s var(--ease) .7s both;
}
@keyframes mark-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero4__lead { max-width: 40rem; font-size: clamp(1.0625rem, 1rem + .35vw, 1.3rem); line-height: 1.5; color: var(--muted); }
.hero4__cta { margin-top: .25rem; }

/* Curved gallery: cards sit on the inside of a cylinder, so the outer ones lean in and look bigger */
.hero4__stage {
  --w: clamp(250px, 30vw, 520px); --R: calc(var(--w) * 3.2); --step: 17deg;
  position: relative; height: calc(var(--w) * .82); margin-top: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  perspective: calc(var(--w) * 2.6); perspective-origin: 50% 20%;
}
.hero4__ring {
  position: absolute; left: 50%; top: 0; width: 0; height: 100%;
  transform-style: preserve-3d;
  transform: translateZ(var(--R)) rotateY(var(--tilt, 0deg));
  animation: ring-sway 14s ease-in-out infinite alternate;
}
@keyframes ring-sway { from { rotate: y -3deg; } to { rotate: y 3deg; } }
.hero4__card {
  position: absolute; top: 0; left: calc(var(--w) / -2); width: var(--w); margin: 0;
  aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: var(--surface-2);
  transform: rotateY(calc(var(--i) * var(--step))) translateZ(calc(var(--R) * -1));
  backface-visibility: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
}
.hero4__card img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .hero4__stage { --w: 74vw; --step: 22deg; height: calc(var(--w) * .78); }
  .hero4__lead { max-width: 32rem; }
  .hero4__cta .btn { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .hero4__ring { animation: none; }
  .hero4__mark::after { animation: none; }
}
.hero4__stage { --step: 19.5deg; }
@media (max-width: 760px) { .hero4__stage { --step: 25deg; } }
@media (max-width: 760px) { .hero4__stage { --w: 58vw; --R: calc(var(--w) * 2.6); --step: 23deg; height: calc(var(--w) * .9); } }


/* ==========================================================================
   Hero v9: centred type + the Byla System as a rising staircase of four layers
   ========================================================================== */
.hero4__mark::after { display: none; }
.hero5__sel { padding: 0 .08em; }
.hero5__sel .sel__box i { width: clamp(8px, .3rem + .35vw, 13px); height: clamp(8px, .3rem + .35vw, 13px); }
.hero5__sel .sel__tag { font-size: clamp(.75rem, .6rem + .3vw, .95rem); bottom: -1.75em; right: -.6em; }
:root[data-theme="light"] .hero5__sel .sel__box { background: rgba(255, 204, 0, .14); }

.hero5__stage { margin-top: clamp(2.75rem, 2rem + 3vw, 5rem); padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.hero5__stairs {
  --h: clamp(240px, 30vw, 470px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: clamp(.6rem, .4rem + .8vw, 1.25rem);
  height: var(--h); padding-bottom: 1px; border-bottom: 1px solid var(--line-2);
}
.hero5__step {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  height: calc(var(--h) * (.46 + var(--n) * .18));
  border-radius: 22px 22px 6px 6px; text-decoration: none; color: var(--paper); background: var(--ink-3);
  transform-origin: bottom center;
  transition: transform 600ms var(--ease), box-shadow 600ms var(--ease), filter 400ms ease;
  animation: step-float 6s ease-in-out infinite alternate; animation-delay: calc(var(--n) * -1.4s);
}
@keyframes step-float { from { translate: 0 0; } to { translate: 0 -8px; } }
.hero5__step img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1200ms var(--ease); }
.hero5__step::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,5,5,.1) 0%, rgba(5,5,5,.15) 45%, rgba(5,5,5,.82) 100%); }
.hero5__num { position: absolute; top: 1rem; left: 1.1rem; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.6rem); font-weight: 700; line-height: 1; color: var(--yellow); }
.hero5__name { position: absolute; left: 1.1rem; right: 3.6rem; bottom: 1rem; font-size: clamp(1rem, .85rem + .45vw, 1.35rem); font-weight: 500; line-height: 1.15; }
.hero5__go { position: absolute; right: .9rem; bottom: .9rem; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); transition: background-color var(--fast) ease, color var(--fast) ease, border-color var(--fast) ease, transform var(--med) var(--ease); }
.hero5__go svg { width: 17px; height: 17px; }
.hero5__step:hover, .hero5__step:focus-visible { transform: translateY(-10px); box-shadow: 0 24px 50px rgba(0,0,0,.25); }
.hero5__step:hover img { transform: scale(1.06); }
.hero5__step:hover .hero5__go, .hero5__step:focus-visible .hero5__go { background: var(--yellow); color: var(--ink); border-color: var(--yellow); transform: rotate(45deg); }
.hero5__stairs:hover .hero5__step:not(:hover) { filter: saturate(.6) brightness(.8); }
.hero5__caption { display: flex; justify-content: space-between; gap: 1rem; margin-top: .9rem; font-size: .9375rem; color: var(--muted); }
.hero5__caption span { color: var(--text); font-weight: 600; }

/* Rise in order on load */
.js .hero5__step.rv { opacity: 0; transform: translateY(40px) scaleY(.85); }
.js .hero5__step.rv.in { opacity: 1; transform: none; }
.js .hero5__step.rv.in:hover { transform: translateY(-10px); }

@media (max-width: 760px) {
  .hero5__stairs { --h: 300px; gap: .5rem; }
  .hero5__step { border-radius: 16px 16px 4px 4px; }
  .hero5__name { display: none; }
  .hero5__go { width: 32px; height: 32px; right: .5rem; bottom: .5rem; }
  .hero5__num { top: .7rem; left: .7rem; }
  .hero5__caption { flex-direction: column; gap: .2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero5__step { animation: none; }
}


/* ==========================================================================
   Hero v10: dark stage, multiplayer cursor tags, fanned deck of layer cards
   ========================================================================== */
.hero6 { padding-top: 5.75rem; }
.hero6__panel {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100svh - 6.75rem); display: flex; flex-direction: column; align-items: center;
  border-radius: var(--r-panel); background: #070707; color: var(--paper);
  border: 1px solid rgba(255,255,255,.07);
}
.hero6__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 30%, transparent 85%); mask-image: radial-gradient(80% 70% at 50% 30%, #000 30%, transparent 85%); }
.hero6__glow { position: absolute; left: 50%; top: -30%; width: 70%; aspect-ratio: 1.6; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 204, 0, .16), transparent 70%); filter: blur(30px); }
.hero6__sky i { position: absolute; left: var(--x); top: var(--y); width: 12px; height: 12px; opacity: .5; animation: twinkle 4s ease-in-out infinite; }
.hero6__sky i:nth-child(odd) { animation-delay: -1.7s; } .hero6__sky i:nth-child(3n) { animation-delay: -2.9s; }
.hero6__sky i::before, .hero6__sky i::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(255,255,255,.7); transform: translate(-50%, -50%); }
.hero6__sky i::before { width: 1px; height: 100%; } .hero6__sky i::after { width: 100%; height: 1px; }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: .7; transform: scale(1); } }
.hero6 .grain { opacity: .08; background-image: var(--noise); background-size: 220px 220px; }

.hero6__copy { display: grid; justify-items: center; text-align: center; gap: 1.1rem; padding: clamp(3rem, 2rem + 4vw, 6rem) 1.25rem 0; max-width: 72rem; }
.hero6__eyebrow { display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap; justify-content: center; font-size: .9375rem; color: #c9c7bc; }
.hero6__eyeicon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--yellow); color: var(--ink); }
.hero6__eyeicon svg { width: 14px; height: 14px; }
.hero6__eyehl { color: var(--yellow); font-weight: 500; }
.hero6__title { font-size: clamp(2.6rem, min(.6rem + 6.4vw, 12.5svh), 7.75rem); font-weight: 500; line-height: 1; display: grid; }
.hero6__soft { background: linear-gradient(180deg, #ffffff 10%, #9b9a93 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero6__lead { max-width: 38rem; font-size: clamp(1rem, .95rem + .3vw, 1.2rem); line-height: 1.55; color: #b9b7ad; }

/* Multiplayer cursor tags */
.hero6__tag { position: absolute; z-index: 3; display: inline-flex; align-items: flex-start; pointer-events: none; animation: tag-float 7s ease-in-out infinite alternate; }
.hero6__tag svg { width: 18px; height: 18px; margin-right: -2px; }
.hero6__tag b { margin-top: 14px; padding: .35rem .7rem; border-radius: 4px 999px 999px 999px; font-size: .8125rem; font-weight: 600; }
.hero6__tag--a { left: 13%; top: 26%; color: #ff9e1b; } .hero6__tag--a b { background: #ff9e1b; color: var(--ink); }
.hero6__tag--b { right: 12%; top: 40%; color: #f4f2ea; animation-delay: -2.5s; } .hero6__tag--b b { background: #f4f2ea; color: var(--ink); }
.hero6__tag--b svg { transform: scaleX(-1); }
.hero6__tag--c { left: 30%; top: 52%; color: var(--yellow); animation-delay: -4s; } .hero6__tag--c b { background: var(--yellow); color: var(--ink); }
@keyframes tag-float { 0% { translate: 0 0; } 50% { translate: 14px -10px; } 100% { translate: -8px 6px; } }

/* Floating icon chips near the deck */
.hero6__float { position: absolute; z-index: 4; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: linear-gradient(145deg, #ffe066, #ffb000); color: var(--ink); box-shadow: 0 18px 40px rgba(255, 176, 0, .25), inset 0 1px 0 rgba(255,255,255,.6); animation: tag-float 6s ease-in-out infinite alternate; }
.hero6__float svg { width: 28px; height: 28px; }
.hero6__float--l { left: 18%; bottom: 30%; rotate: -12deg; }
.hero6__float--r { right: 17%; bottom: 34%; rotate: 10deg; animation-delay: -3s; background: linear-gradient(145deg, #2a2a26, #111); color: var(--yellow); box-shadow: 0 18px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12); }

/* Fanned deck */
.hero6__deck { --cw: clamp(170px, 15vw, 270px); position: relative; width: 100%; height: calc(var(--cw) * 1.25); margin-top: auto; }
.hero6__card {
  position: absolute; left: 50%; bottom: calc(var(--cw) * -.3);
  width: var(--cw); height: calc(var(--cw) * 1.45); margin-left: calc(var(--cw) / -2);
  display: flex; flex-direction: column; padding: 1rem 1rem 0; border-radius: 22px 22px 0 0;
  text-decoration: none; overflow: hidden; z-index: calc(10 - var(--a));
  transform: translateX(calc(var(--p) * var(--cw) * .82)) translateY(calc(var(--a) * var(--a) * 10px + var(--a) * 18px)) rotate(calc(var(--p) * 4deg));
  box-shadow: 0 -10px 40px rgba(0,0,0,.45);
  transition: transform 600ms var(--ease), box-shadow 400ms ease;
}
.hero6__card:hover, .hero6__card:focus-visible { transform: translateX(calc(var(--p) * var(--cw) * .82)) translateY(calc(var(--a) * var(--a) * 10px + var(--a) * 18px - 26px)) rotate(0deg); z-index: 20; }
.hero6__card--yellow { background: var(--yellow); color: var(--ink); height: calc(var(--cw) * 1.6); }
.hero6__card--amber { background: #ff9e1b; color: var(--ink); }
.hero6__card--paper { background: #efede4; color: var(--ink); }
.hero6__card--ink { background: #1d1c19; color: var(--paper); border: 1px solid rgba(255,255,255,.1); border-bottom: 0; }
.hero6__card--gold { background: #3a2c08; color: var(--yellow); }
.hero6__ct { font-size: clamp(1.1rem, .9rem + .7vw, 1.6rem); font-weight: 600; line-height: 1.05; }
.hero6__cs { margin-top: .3rem; font-size: .8125rem; opacity: .7; }
.hero6__art { position: relative; flex: 1; margin: .9rem -1rem 0; overflow: hidden; border-radius: 16px 16px 0 0; }
.hero6__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.hero6__card:hover .hero6__art img { transform: scale(1.06); }
.hero6__card--yellow .hero6__art { margin: .9rem 0 0; border-radius: 14px 14px 0 0; }
.hero6__pill { position: absolute; top: .85rem; right: .85rem; display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .55rem .45rem .8rem; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: .78rem; font-weight: 600; }
.hero6__pill svg { width: 15px; height: 15px; padding: 2px; border-radius: 50%; background: var(--yellow); color: var(--ink); }
.hero6__card { animation: deck-in 900ms var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes deck-in { from { opacity: 0; translate: 0 60px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 900px) {
  .hero6__tag--a { left: 6%; top: 18%; } .hero6__tag--b { right: 5%; top: 44%; } .hero6__tag--c { display: none; }
  .hero6__float { width: 48px; height: 48px; border-radius: 15px; }
  .hero6__float svg { width: 22px; height: 22px; }
  .hero6__float--l { left: 4%; bottom: 36%; } .hero6__float--r { right: 4%; bottom: 40%; }
  .hero6__deck { --cw: 40vw; }
  .hero6__card[style*="--a:2"] { display: none; }
}
@media (max-width: 520px) {
  .hero6__tag { display: none; }
  .hero6__deck { --cw: 46vw; }
  .hero6__pill { font-size: 0; gap: 0; padding: .35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero6__tag, .hero6__float, .hero6__sky i, .hero6__card { animation: none; }
}
.hero6__card--yellow .hero6__ct { max-width: 52%; }
.hero6__card { transform: translateX(calc(var(--p) * var(--cw) * .9)) translateY(calc(var(--a) * var(--a) * 10px + var(--a) * 18px)) rotate(calc(var(--p) * 4deg)); }
.hero6__card:hover, .hero6__card:focus-visible { transform: translateX(calc(var(--p) * var(--cw) * .9)) translateY(calc(var(--a) * var(--a) * 10px + var(--a) * 18px - 26px)) rotate(0deg); }

/* ==========================================================================
   Light mode highlights: rough hand-drawn yellow zigzag underline
   (replaces the solid highlighter stripe)
   ========================================================================== */
:root {
  --zig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 10' preserveAspectRatio='none'%3E%3Cpath d='M0 7 L3.2 2.8 L6.4 7.6 L9.6 2.4 L13.1 7.1 L16.2 3.4 L19.6 7.9 L22.7 2.7 L26.1 7.3 L28.2 4.1 L30 7' fill='none' stroke='%23FFCC00' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .hl {
  color: var(--text);
  background: var(--zig) repeat-x 0 100% / 1.1em .34em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 0 .18em;
}
:root[data-theme="light"] .lit .w.k, :root[data-theme="light"] .lit .serif.w {
  background: var(--zig) repeat-x 0 100% / 1.1em 0;
  padding: 0 0 .16em; margin: 0; border-radius: 0;
  transition: color 260ms ease, background-size 600ms var(--ease);
}
:root[data-theme="light"] .lit .w.k.on, :root[data-theme="light"] .lit .serif.w.on { background-size: 1.1em .32em; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .hl { color: var(--text); background: var(--zig) repeat-x 0 100% / 1.1em .34em; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 0 .18em; }
  :root:not([data-theme]) .lit .w.k, :root:not([data-theme]) .lit .serif.w { background: var(--zig) repeat-x 0 100% / 1.1em 0; padding: 0 0 .16em; margin: 0; border-radius: 0; transition: color 260ms ease, background-size 600ms var(--ease); }
  :root:not([data-theme]) .lit .w.k.on, :root:not([data-theme]) .lit .serif.w.on { background-size: 1.1em .32em; }
}
/* Dark panels and dark cards keep plain yellow text, no underline */
:root[data-theme="light"] :is(.panel, .way--ink, .quote, .tile--ink, .hero3__title) .hl { color: var(--yellow); background: none; padding: 0; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) :is(.panel, .way--ink, .quote, .tile--ink, .hero3__title) .hl { color: var(--yellow); background: none; padding: 0; } }

/* ==========================================================================
   Light mode highlights v3: one hand-drawn marker stroke (tapered, slightly curved)
   ========================================================================== */
:root {
  --stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M1.2 6.6 C 18 4.9, 38 5.6, 58 4.6 S 88 3.4, 98.8 3.1 C 99.6 3.9, 99.4 5, 98.2 5.5 C 80 6.1, 62 7.6, 40 8 S 12 8.9, 2 8.8 C 0.6 8.5, 0.4 7.3, 1.2 6.6 Z' fill='%23FFCC00'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .hl {
  background: var(--stroke) no-repeat 0 100% / 100% .3em;
  padding: 0 .04em .16em;
}
:root[data-theme="light"] .lit .w.k, :root[data-theme="light"] .lit .serif.w {
  background: var(--stroke) no-repeat 0 100% / 0% .3em;
  transition: color 260ms ease, background-size 700ms var(--ease);
}
:root[data-theme="light"] .lit .w.k.on, :root[data-theme="light"] .lit .serif.w.on { background-size: 100% .3em; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .hl { background: var(--stroke) no-repeat 0 100% / 100% .3em; padding: 0 .04em .16em; }
  :root:not([data-theme]) .lit .w.k, :root:not([data-theme]) .lit .serif.w { background: var(--stroke) no-repeat 0 100% / 0% .3em; transition: color 260ms ease, background-size 700ms var(--ease); }
  :root:not([data-theme]) .lit .w.k.on, :root:not([data-theme]) .lit .serif.w.on { background-size: 100% .3em; }
}
/* Dark panels and dark cards: plain yellow text, no line */
:root[data-theme="light"] :is(.panel, .way--ink, .quote, .tile--ink, .hero3__title) .hl { background: none; padding: 0; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) :is(.panel, .way--ink, .quote, .tile--ink, .hero3__title) .hl { background: none; padding: 0; } }

/* ==========================================================================
   Light mode highlights v4: yellow highlighter swipe behind the words
   ========================================================================== */
:root {
  --swipe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M2.2 5.6 C 18 4.4, 42 5.4, 66 4.1 S 92 4.4, 98.6 4.8 L 99.5 10.2 L 98.4 16.8 C 80 17.6, 56 16.3, 31 17.7 S 6 17.1, 1.3 16.9 L 0.5 11.2 Z' fill='%23FFCC00'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .hl {
  color: var(--ink);
  background: var(--swipe) no-repeat 0 85% / 100% 78%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 .12em; margin: 0 -.04em;
}
:root[data-theme="light"] .lit .w.k, :root[data-theme="light"] .lit .serif.w {
  background: var(--swipe) no-repeat 0 85% / 0% 78%;
  padding: 0 .1em; margin: 0 -.04em;
  transition: color 260ms ease, background-size 800ms var(--ease);
}
:root[data-theme="light"] .lit .w.k.on, :root[data-theme="light"] .lit .serif.w.on { color: var(--ink); background-size: 100% 78%; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .hl { color: var(--ink); background: var(--swipe) no-repeat 0 85% / 100% 78%; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .12em; margin: 0 -.04em; }
  :root:not([data-theme]) .lit .w.k, :root:not([data-theme]) .lit .serif.w { background: var(--swipe) no-repeat 0 85% / 0% 78%; padding: 0 .1em; margin: 0 -.04em; transition: color 260ms ease, background-size 800ms var(--ease); }
  :root:not([data-theme]) .lit .w.k.on, :root:not([data-theme]) .lit .serif.w.on { color: var(--ink); background-size: 100% 78%; }
}
/* Dark panels and dark cards: plain yellow text, no highlight */
:root[data-theme="light"] :is(.panel, .way--ink, .quote, .tile--ink, .hero3__title) .hl { color: var(--yellow); background: none; padding: 0; margin: 0; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) :is(.panel, .way--ink, .quote, .tile--ink, .hero3__title) .hl { color: var(--yellow); background: none; padding: 0; margin: 0; } }


/* ==========================================================================
   Faint lens-warped grid on every black panel (hero, CTA blocks, page headers)
   ========================================================================== */
:root { --grid-warp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3CradialGradient id='f' cx='50%25' cy='45%25' r='65%25'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.7' stop-color='%23fff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cmask id='m'%3E%3Crect width='100%25' height='100%25' fill='url%28%23f%29'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url%28%23m%29' fill='none' stroke='%23fff' stroke-opacity='.12' stroke-width='1.2'%3E%3Cpath d='M0 -162.7Q800 56.2 1600 -162.7M0 -79.9Q800 111.6 1600 -79.9M0 3.0Q800 167.1 1600 3.0M0 85.8Q800 222.6 1600 85.8M0 168.6Q800 278.1 1600 168.6M0 251.5Q800 333.6 1600 251.5M0 334.3Q800 389.0 1600 334.3M0 417.2Q800 444.5 1600 417.2M0 500.0Q800 500.0 1600 500.0M0 582.8Q800 555.5 1600 582.8M0 665.7Q800 611.0 1600 665.7M0 748.5Q800 666.4 1600 748.5M0 831.4Q800 721.9 1600 831.4M0 914.2Q800 777.4 1600 914.2M0 997.0Q800 832.9 1600 997.0M0 1079.9Q800 888.4 1600 1079.9M0 1162.7Q800 943.8 1600 1162.7M-29.9 0Q-358.2 500 -29.9 1000M39.2 0Q-261.7 500 39.2 1000M108.4 0Q-165.2 500 108.4 1000M177.6 0Q-68.7 500 177.6 1000M246.7 0Q27.8 500 246.7 1000M315.9 0Q124.4 500 315.9 1000M385.0 0Q220.9 500 385.0 1000M454.2 0Q317.4 500 454.2 1000M523.4 0Q413.9 500 523.4 1000M592.5 0Q510.4 500 592.5 1000M661.7 0Q607.0 500 661.7 1000M730.8 0Q703.5 500 730.8 1000M800.0 0Q800.0 500 800.0 1000M869.2 0Q896.5 500 869.2 1000M938.3 0Q993.0 500 938.3 1000M1007.5 0Q1089.6 500 1007.5 1000M1076.6 0Q1186.1 500 1076.6 1000M1145.8 0Q1282.6 500 1145.8 1000M1215.0 0Q1379.1 500 1215.0 1000M1284.1 0Q1475.6 500 1284.1 1000M1353.3 0Q1572.2 500 1353.3 1000M1422.4 0Q1668.7 500 1422.4 1000M1491.6 0Q1765.2 500 1491.6 1000M1560.8 0Q1861.7 500 1560.8 1000M1629.9 0Q1958.2 500 1629.9 1000'/%3E%3C/g%3E%3C/svg%3E"); }
.panel, .hero6__panel, .hero3__panel { background-image: var(--grid-warp); background-size: cover; background-position: 50% 40%; background-repeat: no-repeat; }
.hero6__sky { background-image: none; -webkit-mask-image: none; mask-image: none; }

/* Home philosophy statement stands alone: a bit larger */
.statement--home .lit { font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.9rem); line-height: 1.12; }


/* Social icon links (footer + contact) */
.social { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.social a {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-2); color: var(--text); text-decoration: none;
  transition: background-color var(--fast) ease, color var(--fast) ease, border-color var(--fast) ease, transform var(--med) var(--ease);
}
.social a svg { width: 20px; height: 20px; }
.social a:hover, .social a:focus-visible { background: var(--yellow); color: var(--ink); border-color: var(--yellow); transform: translateY(-2px); }
.contact__social { display: grid; gap: .7rem; margin-top: .5rem; }
.footer__col .social { display: flex; gap: .5rem; }
.footer__col .social a { display: grid; padding: 0; width: 44px; height: 44px; color: var(--text); }
.footer__col .social a:hover { color: var(--ink); }


/* Custom ICP glyphs (Who we work with) */
.pcard__icon .glyph, .pcard--y .pcard__icon .glyph {
  width: clamp(84px, 6vw + 40px, 112px); height: auto; aspect-ratio: 1; border-radius: 0;
  background: none; box-shadow: none; transition: transform 700ms var(--ease);
}
.pcard__icon .glyph svg { width: 100%; height: 100%; }
.glyph--ink { color: var(--ink); }
.glyph--amber { color: #ff9e1b; }
.glyph--text { color: var(--text); }
.glyph--yellow { color: var(--yellow); }
.glyph--gold { color: #e9b100; }
.glyph .g-orbit { transform-origin: 32px 32px; animation: spin 18s linear infinite; }
.pcard:hover .pcard__icon .glyph { transform: rotate(-8deg) scale(1.06); }
.pcard__icon::before, .pcard__icon::after { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .glyph .g-orbit { animation: none; } }
.pcard__icon .glyph--ink, .pcard--y .pcard__icon .glyph--ink { color: var(--ink); }
.pcard__icon .glyph--amber { color: #ff9e1b; }
.pcard__icon .glyph--text { color: var(--text); }
.pcard__icon .glyph--yellow { color: var(--yellow); }
.pcard__icon .glyph--gold { color: #e9b100; }
.pcard__icon .glyph, .pcard--y .pcard__icon .glyph { width: clamp(96px, 7vw + 40px, 128px); }

/* ICP cards: one icon colour, smaller icon box, roomier text */
.pcard { min-height: 0; }
.pcard__top { padding: 1.75rem 1.6rem 1.5rem; gap: 1rem; }
.pcard__top h3 { margin-top: .15rem; }
.pcard__top p { line-height: 1.6; }
.pcard__icon { flex: 0 0 auto; height: clamp(150px, 9vw + 40px, 180px); min-height: 0; margin-top: auto; }
.pcard__icon::before { width: 140px; height: 140px; }
.pcard__icon::after { width: 92px; height: 92px; }
.pcard__icon .glyph, .pcard--y .pcard__icon .glyph { width: clamp(72px, 3vw + 44px, 88px); }

/* ==========================================================================
   SEO copy blocks: answer passages, "signs" lists, comparison tables
   ========================================================================== */
.answer { display: grid; gap: 1.25rem 4rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.answer > div:first-child { display: grid; gap: 1.25rem; }
.answer__text { font-size: clamp(1.1rem, 1rem + .45vw, 1.4rem); line-height: 1.6; color: var(--text); max-width: 40em; }
.answer__text + .answer__text { margin-top: 1rem; }
@media (min-width: 900px) { .answer { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }

.signs { list-style: none; display: grid; gap: .75rem; }
.signs li { display: flex; gap: .85rem; align-items: flex-start; padding: 1.05rem 1.2rem; border: 1px solid var(--line-2); border-radius: var(--r-md); color: var(--text); line-height: 1.5; }
.signs svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: .1rem; color: var(--accent-text); }
:root[data-theme="light"] .signs svg { color: var(--ink); }
@media (min-width: 900px) { .signs--two { grid-template-columns: 1fr 1fr; } }

.compare { width: 100%; border-collapse: collapse; font-size: 1rem; }
.compare th, .compare td { text-align: left; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
.compare thead th { font-weight: 700; font-size: 1.15rem; }
.compare tbody th { color: var(--muted); font-weight: 500; width: 22%; }
.compare-wrap { overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--r-lg); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }

.article__answer { font-size: 1.2rem; line-height: 1.7; color: var(--text); padding: 1.4rem 1.5rem; border-left: 3px solid var(--yellow); background: var(--chip-bg); border-radius: 0 var(--r-md) var(--r-md) 0; margin-bottom: 2rem; }
.article__byline { color: var(--muted); font-size: .95rem; }
.article .compare-wrap { margin: 2rem 0; }
.related { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; margin-top: 2rem; color: var(--muted); }

/* Hero deck cards: slim (Gilroy Light) labels */
.hero6__ct { font-weight: 300; letter-spacing: -.04em; }
.hero6__cs { font-weight: 300; }
.hero6__pill { font-weight: 400; }

/* Work page: long SEO heading sized to sit on three lines */
.phero__title--wide { font-size: clamp(2.5rem, 1.2rem + 4vw, 5rem); line-height: .98; max-width: 21ch; }

/* Brand & Identity cover: square mockup grid shown as a banner */
.phero__img--identity { aspect-ratio: 16 / 7; }
.phero__img--identity img { object-position: 50% 42%; }
@media (max-width: 860px) { .phero__img--identity { aspect-ratio: 1 / 1; } }

/* ==========================================================================
   CMS content: case study blocks, linked work cards, article body, form honeypot
   ========================================================================== */
a.work { color: inherit; text-decoration: none; }
a.work:hover, a.work:focus-visible { border-color: var(--yellow); transform: translateY(-3px); }
a.work:hover .work__img img { transform: scale(1.04); }
.board img { display: block; width: 100%; height: auto; }
.board figcaption, .board-cap { padding: .9rem 1.1rem; font-size: .9rem; color: var(--muted); }
.board-cap { padding-inline: 0; }
.board-pair, .board-grid { display: grid; gap: clamp(.75rem, .5rem + 1vw, 1.25rem); margin-block: 1.5rem; }
.board-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.board-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.board-pair .board, .board-grid .board { border-radius: var(--r-lg); }
.board-grid .board img { aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 700px) { .board-pair, .board-grid { grid-template-columns: 1fr 1fr; } }
.chap__text p + p { margin-top: 1rem; }
.chap__text ul, .chap__text ol { padding-left: 1.2rem; margin-top: 1rem; display: grid; gap: .4rem; color: var(--muted); }
.cs-palette { margin: 0 0 2rem auto; max-width: 60%; }
@media (max-width: 860px) { .cs-palette { max-width: none; } }
.cs-quote { margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto; max-width: 48rem; text-align: center; }
.cs-quote p { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.2; letter-spacing: -.04em; font-weight: 500; }
.cs-quote cite { display: block; margin-top: 1rem; font-style: normal; color: var(--muted); }
.cs-text { max-width: 44rem; margin: 2rem 0 2rem auto; color: var(--muted); line-height: 1.7; }
.article__body h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); margin: 3rem 0 1rem; }
.article__body h3 { font-size: 1.3rem; margin: 2rem 0 .75rem; }
.article__body p { margin-bottom: 1rem; }
.article__body ul, .article__body ol { padding-left: 1.2rem; margin-bottom: 1rem; color: var(--muted); font-size: 1.1rem; line-height: 1.7; }
.article__body blockquote { margin: 2.5rem 0; padding-left: 1.5rem; border-left: 3px solid var(--yellow); }
.article__body blockquote p { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); line-height: 1.15; color: var(--text); font-weight: 500; letter-spacing: -.04em; }
.article__body img { width: 100%; height: auto; border-radius: var(--r-lg); margin: 1.5rem 0; }
.article__body a { color: var(--accent-text); }
:root[data-theme="light"] .article__body a { color: var(--ink); text-decoration-color: var(--yellow); text-decoration-thickness: 2px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }