/* ============================================================
   BRAND CATALYST — Premium Studio Site
   Design system: monochrome ink/paper · Fraunces + Inter
   Hand-written CSS (no runtime framework) for speed & control
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Ink & paper */
  --ink:        #0B0B0C;
  --ink-soft:   #1C1C1E;
  --paper:      #ECE8E1;
  --paper-2:    #E3DED5;
  --paper-3:    #D8D2C7;
  --panel:      #101011;   /* dark sections */
  --panel-2:    #17171A;

  /* Text */
  --text:       #16161A;
  --text-muted: #6A655C;
  --text-onDark:#F3F0EA;
  --text-onDark-muted: rgba(243,240,234,0.56);

  /* Lines / borders */
  --line:        rgba(11,11,12,0.14);
  --line-soft:   rgba(11,11,12,0.08);
  --line-onDark: rgba(243,240,234,0.16);

  /* Accent — deliberately near-monochrome: "accent" resolves to ink.
     (Overridden to a light tone inside .dark so emphasis stays visible.) */
  --volt:       var(--ink);
  --volt-deep:  #000000;
  --volt-soft:  rgba(11,11,12,0.06);
  --spark:      var(--volt);      /* legacy alias */
  --spark-deep: var(--volt-deep);

  /* Functional */
  --wa:         #25D366;
  --ok:         #1E9E5A;
  --err:        #C0392B;

  /* Type — refined grotesque display, Inter body, DM Sans labels */
  --f-display: 'Hanken Grotesk', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --f-sans:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --f-label:   'DM Sans', 'Inter', sans-serif;
  --f-mono:    'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Shard motif geometry — dialled back */
  --shard-cut: 36px;   /* diagonal divider depth */

  /* Spacing scale (8pt) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* Layout */
  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 80px);
  --radius: 4px;
  --radius-lg: 8px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur: 0.45s;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(11,11,12,0.06), 0 2px 8px rgba(11,11,12,0.04);
  --shadow-md: 0 4px 14px rgba(11,11,12,0.08), 0 14px 40px rgba(11,11,12,0.08);
  --shadow-lg: 0 18px 50px rgba(11,11,12,0.16), 0 40px 90px rgba(11,11,12,0.12);

  /* z-index scale */
  --z-nav: 100; --z-float: 200; --z-menu: 300; --z-grain: 9999;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--f-sans);
  background: var(--paper);
  color: var(--text);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; }
::selection { background: var(--ink); color: var(--paper); }

/* Film grain overlay (brand signature) */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: var(--z-grain);
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* ---------- Accessibility ---------- */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.dark :focus-visible { outline-color: var(--paper); }

.skip-link {
  position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  background: var(--ink); color: var(--paper);
  padding: 10px 18px; border-radius: var(--radius);
  font-size: 0.85rem; font-weight: 600; z-index: 1000;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Typography ---------- */
.display {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.display em {
  font-style: italic;
  font-weight: 700;
}
.h1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
}
.h1 em { font-style: italic; }
.h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.h2 em { font-style: italic; }

/* Inter needs heavier weight than the old serif at display sizes */
.marquee__item, .work-card__title, .svc__title, .svc-row__title, .svc-row__num,
.pstep__title, .stat__n, .price__name, .price__amt, .quote__text, .quote__mark,
.quote__avatar, .hero__stat .n, .contact-info__v, .footer__tag,
.mobile-menu a.m-link {
  font-weight: 700;
}
.footer__tag, .h2 em, .contact-info__v { font-weight: 600; }

/* Old brand: DM Sans for small UI / labels / nav */
.eyebrow, .nav__link, .nav__cta, .scroll-hint, .filter__btn,
.work-card__cat, .work-card__tags, .svc__tag, .svc__num, .price__tag,
.price__note, .contact-info__k, .footer__col-h, .footer__bottom,
.form__status, .hero__loc {
  font-family: var(--f-label);
}
.h3 {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.lede {
  font-family: var(--f-sans);
  font-size: clamp(1.1rem, 1.9vw, 1.38rem);
  line-height: 1.72;
  color: var(--text-muted);
  font-weight: 400;
}
.body { color: var(--text-muted); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-label);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow::before {
  content: '';
  width: 26px; height: 1px;
  background: currentColor; opacity: 0.5;
}
.dark .eyebrow { color: var(--text-onDark-muted); }

/* Tabular figures for numbers */
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(80px, 12vw, 168px); }
.section--tight { padding-block: clamp(56px, 8vw, 104px); }
.dark { background: var(--panel); color: var(--text-onDark); --volt: var(--text-onDark); }
.dark .h1, .dark .h2, .dark .display, .dark .h3 { color: var(--text-onDark); }
.dark .lede, .dark .body { color: var(--text-onDark-muted); }

.divider { height: 1px; background: var(--line); border: 0; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--f-sans);
  font-size: 0.92rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 16px 32px;
  border-radius: var(--radius);
  min-height: 48px;
  cursor: pointer;
  transition: transform 0.18s var(--ease-out), background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  will-change: transform;
}
.btn svg { transition: transform 0.25s var(--ease-out); }
.btn:active { transform: translateY(1px) scale(0.99); }

.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: #000; transform: translateY(-2px); }
.btn--primary:hover svg { transform: translateX(4px); }

.dark .btn--primary { background: var(--paper); color: var(--ink); }
.dark .btn--primary:hover { background: #fff; }

.btn--ghost {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn--ghost:hover svg { transform: translateX(4px); }
.dark .btn--ghost { color: var(--text-onDark); border-color: var(--line-onDark); }
.dark .btn--ghost:hover { border-color: var(--paper); }

.btn--lg { padding: 18px 32px; font-size: 1rem; min-height: 56px; }
.btn--block { width: 100%; }

/* ---- "See our work" pill button ---- */
.btn-frags {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  padding: 15px 36px;
  border: 1.5px solid rgba(243,240,234,0.22);
  background: rgba(243,240,234,0.04);
  color: var(--text-onDark);
  font-family: var(--f-ui);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 100px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s var(--ease-drift), background 0.4s var(--ease-drift);
  white-space: nowrap;
}
.btn-frags::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(214,165,96,0.30) 0%, rgba(214,165,96,0) 70%);
  transform: scale(0);
  transition: transform 0.5s var(--ease-drift);
}
.btn-frags:hover::after { transform: scale(4); }
.btn-frags:hover {
  border-color: rgba(214,165,96,0.55);
  background: rgba(214,165,96,0.05);
}
.btn-frags__text { position: relative; z-index: 1; }
.btn-frags__arr {
  position: relative;
  z-index: 1;
  transition: transform 0.3s var(--ease-drift);
}
.btn-frags:hover .btn-frags__arr { transform: translateX(4px); }
/* Palette-flip */
body.flipped .btn-frags {
  border-color: rgba(11,11,12,0.22);
  background: rgba(11,11,12,0.04);
  color: var(--text-onDark);
}
body.flipped .btn-frags::after {
  background: radial-gradient(circle, rgba(60,48,30,0.25) 0%, rgba(60,48,30,0) 70%);
}
body.flipped .btn-frags:hover {
  border-color: rgba(60,48,30,0.45);
  background: rgba(60,48,30,0.05);
}

/* Link with animated underline */
.link-underline {
  position: relative; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
}
.link-underline::after {
  content: ''; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }
.link-underline svg { transition: transform 0.25s var(--ease-out); }
.link-underline:hover svg { transform: translateX(4px); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 16px var(--gutter);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: padding 0.4s var(--ease-out), background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.nav.scrolled {
  padding-block: 11px;
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 0 rgba(11,11,12,0.04);
}

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand__mark {
  height: 30px; width: auto;
  transition: transform 0.5s var(--ease-out);
  will-change: transform;
}
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.08); }
.brand__word {
  font-family: var(--f-sans);
  font-weight: 700; font-size: 1.0rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
}

/* Brand tagline — slides + fades in beside the wordmark once you scroll past the
   hero (mirrors the original Brand Catalyst nav). Hidden until then so the nav
   stays clean over the hero. */
.brand__tag {
  display: inline-flex; align-items: center;
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  margin-left: 0; padding-left: 0;
  border-left: 1px solid transparent;
  font-family: var(--f-sans);
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.02em; text-transform: lowercase;
  color: var(--text-onDark-muted);
  transform: translateX(-6px);
  transition: max-width 0.7s var(--ease-out), opacity 0.45s var(--ease-out),
              transform 0.7s var(--ease-out), margin 0.7s var(--ease-out),
              padding 0.7s var(--ease-out), border-color 0.7s var(--ease-out);
}
.nav.past-hero .brand__tag {
  max-width: 360px; opacity: 0.92;
  margin-left: 12px; padding-left: 13px;
  border-left-color: var(--line-onDark);
  transform: translateX(0);
}
@media (max-width: 720px) { .brand__tag { display: none; } }

.nav__links { display: flex; align-items: center; gap: 38px; }
.nav__link {
  position: relative;
  font-size: 0.95rem; font-weight: 500; letter-spacing: 0.01em;
  color: var(--text); opacity: 0.78;
  transition: opacity 0.2s;
}
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: -5px;
  width: 0; height: 1.5px; background: var(--ink);
  transition: width 0.3s var(--ease-out);
}
.nav__link:hover, .nav__link[aria-current="page"] { opacity: 1; }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; }

.nav__right { display: flex; align-items: center; gap: 18px; }
.nav__cta {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  background: var(--ink); color: var(--paper);
  padding: 12px 26px; border-radius: 100px;
  transition: transform 0.18s var(--ease-out), background 0.2s;
}
.nav__cta:hover { background: #000; transform: translateY(-2px); }

/* Mobile menu toggle */
.nav__toggle {
  display: none; flex-direction: column; gap: 5px;
  width: 44px; height: 44px; align-items: center; justify-content: center;
}
.nav__toggle span {
  display: block; width: 24px; height: 1.6px; background: var(--ink);
  transition: transform 0.3s var(--ease-out), opacity 0.2s;
}
.nav__toggle.open span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav__toggle.open span:nth-child(2) { opacity: 0; }
.nav__toggle.open span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--paper);
  display: flex; flex-direction: column;
  padding: 96px var(--gutter) 40px;
  opacity: 0; pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.mobile-menu.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.mobile-menu a.m-link {
  font-family: var(--f-display); font-size: 2rem; font-weight: 400;
  letter-spacing: -0.02em; padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  opacity: 0; transform: translateY(14px);
}
.mobile-menu.open a.m-link { animation: mLink 0.5s var(--ease-out) forwards; }
.mobile-menu.open a.m-link:nth-child(1) { animation-delay: 0.06s; }
.mobile-menu.open a.m-link:nth-child(2) { animation-delay: 0.12s; }
.mobile-menu.open a.m-link:nth-child(3) { animation-delay: 0.18s; }
.mobile-menu.open a.m-link:nth-child(4) { animation-delay: 0.24s; }
.mobile-menu.open a.m-link:nth-child(5) { animation-delay: 0.30s; }
@keyframes mLink { to { opacity: 1; transform: translateY(0); } }
.mobile-menu__foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.mobile-menu__close {
  position: absolute; top: 18px; right: clamp(20px, 5vw, 80px);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; line-height: 1;
  color: var(--text-onDark); opacity: 0;
  transition: opacity 0.25s var(--ease-out);
  background: none; border: none; cursor: pointer;
}
.mobile-menu.open .mobile-menu__close { opacity: 0.7; transition-delay: 0.25s; }
.mobile-menu__close:hover { opacity: 1; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 140px; padding-bottom: 40px;
  overflow: hidden;
}
.hero__loc {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono);
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 36px;
}
.hero__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink);
  position: relative; flex-shrink: 0;
}
@keyframes ping { 0%{transform:scale(0.6);opacity:0.7} 70%,100%{transform:scale(1.8);opacity:0} }

.hero__title { max-width: 16ch; }
/* Gentle wavy float — each word bobs on a phase offset (added after the reveal; overflow visible so nothing crops) */
@media (prefers-reduced-motion: no-preference) {
  .hero__title.is-wavy .word {
    overflow: visible;
    animation: wordWave 4.6s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.22s);
    will-change: transform;
  }
}
/* Starts & ends at 0 so each word eases in from its resting position (no snap/
   jump when the staggered wave kicks in); translate3d keeps it on its own GPU
   layer so the sub-pixel motion stays smooth under the desktop zoom. */
@keyframes wordWave {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25%      { transform: translate3d(0, -3px, 0); }
  75%      { transform: translate3d(0, 3px, 0); }
}
.hero__sub {
  max-width: 50ch; margin-top: 52px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 72px; }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 64px);
  margin-top: clamp(48px, 8vw, 96px);
  padding-top: 28px; border-top: 1px solid var(--line);
}
.hero__stat .n {
  font-family: var(--f-mono); font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1; letter-spacing: -0.02em; color: var(--ink);
}
.hero__stat .l {
  font-size: 0.8rem; color: var(--text-muted); margin-top: 8px; max-width: 22ch;
}

/* Hero background shard glyph */
.hero__glyph {
  position: absolute; right: 5vw; top: 50%; transform: translateY(-50%);
  width: auto; height: min(82vh, 760px); opacity: 0.045;
  color: var(--ink);
  pointer-events: none; z-index: 0;
  overflow: visible;   /* let fragments float/scatter past the bolt's box without being clipped */
}
.hero__glyph path { fill: currentColor; }
.hero > .wrap { position: relative; z-index: 1; }

/* Hero mockup CTA — desktop/tablet only */
@media (max-width: 767px) { .hero__cta-mockup { display: none; } }

/* Hero vignette — cinematic edge darkening + warm centre glow */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 72% 55% at 24% 56%, rgba(214,165,96,0.032) 0%, transparent 60%),
    radial-gradient(ellipse 140% 120% at 50% 50%, transparent 28%, rgba(0,0,0,0.52) 100%);
}

/* Scroll hint */
.scroll-hint {
  position: absolute; left: var(--gutter); bottom: 26px;
  display: flex; align-items: center; gap: 12px;
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-muted);
}
.scroll-hint__line { width: 46px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.scroll-hint__line::after {
  content: ''; position: absolute; inset: 0; width: 40%; background: var(--ink);
  animation: scrollLine 2s var(--ease-soft) infinite;
}
@keyframes scrollLine { 0%{transform:translateX(-120%)} 100%{transform:translateX(320%)} }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  border-block: 1px solid var(--line);
  overflow: hidden; padding-block: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; gap: 0; width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 22px;
  padding-inline: 22px;
  font-family: var(--f-display); font-size: 1.5rem; letter-spacing: -0.01em;
  white-space: nowrap; color: var(--ink);
}
.marquee__item span { width: 6px; height: 6px; border-radius: 50%; background: var(--spark); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================
   WORK / PORTFOLIO
   ============================================================ */
.section-head {
  display: grid; grid-template-columns: 1fr; gap: 18px;
  margin-bottom: clamp(36px, 5vw, 64px);
}
@media (min-width: 880px) {
  .section-head { grid-template-columns: 1.3fr 1fr; align-items: end; gap: 40px; }
  .section-head__intro { padding-bottom: 6px; }
}
.section-head .h1, .section-head .h2 { margin-top: 16px; }

.work-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 760px) { .work-grid { grid-template-columns: 1fr 1fr; } }

.work-card { position: relative; display: block; }
.work-card__frame {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  aspect-ratio: 4 / 3;
}
/* <picture> (webp + jpg fallback) must be layout-transparent inside the frame */
.work-card__frame picture { display: contents; }
.work-card__img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform 0.7s var(--ease-out), filter 0.5s;
  will-change: transform;
}
.work-card:hover .work-card__img { transform: scale(1.045); }
.work-card__overlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  padding: 22px;
  background: linear-gradient(to top, rgba(11,11,12,0.55), rgba(11,11,12,0) 55%);
  opacity: 0; transition: opacity 0.4s var(--ease-out);
}
.work-card:hover .work-card__overlay { opacity: 1; }
.work-card__view {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff; font-weight: 600; font-size: 0.9rem;
  transform: translateY(8px); transition: transform 0.4s var(--ease-out);
}
.work-card:hover .work-card__view { transform: translateY(0); }
.work-card__meta {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-top: 18px;
}
.work-card__title { font-family: var(--f-display); font-size: 1.5rem; letter-spacing: -0.015em; }
.work-card--feature .work-card__title { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.work-card--feature .work-card__meta { margin-top: 22px; }
.work-card__cat { font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.04em; }
.work-card__tags { margin-top: 8px; font-size: 0.82rem; color: var(--text-muted); }

/* Work filter */
.filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.filter__btn {
  font-size: 0.84rem; font-weight: 500;
  padding: 9px 16px; border-radius: 999px;
  border: 1.5px solid var(--line);
  color: var(--text-muted);
  transition: all 0.2s var(--ease-out);
}
.filter__btn:hover { border-color: var(--ink); color: var(--ink); }
.filter__btn.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ============================================================
   SERVICES
   ============================================================ */
.svc-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .svc-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.svc {
  position: relative; isolation: isolate;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  padding: clamp(26px, 3vw, 40px);
  overflow: hidden;
  transition: transform 0.55s var(--ease-out), border-color 0.4s, box-shadow 0.55s, background 0.3s;
}
/* soft top glow that fades in on hover */
.svc::after {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(130% 90% at 50% -25%, rgba(255, 255, 255, 0.06), transparent 60%);
  transition: opacity 0.55s;
}
.svc:hover { transform: translateY(-7px); box-shadow: 0 26px 54px rgba(0, 0, 0, 0.16); }
.svc:hover::after { opacity: 1; }
.svc__num { font-family: var(--f-mono); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.06em; color: var(--text-muted); }
.svc__icon {
  width: 48px; height: 48px; padding: 11px; box-sizing: border-box;
  color: var(--ink); stroke-width: 1.35; margin: 20px 0 22px;
  border: 1px solid var(--line-soft); border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  transition: transform 0.55s var(--ease-out), background 0.4s, border-color 0.4s;
}
.svc:hover .svc__icon { transform: translateY(-3px) scale(1.05); }
.svc__title { font-family: var(--f-display); font-weight: 700; font-size: 1.45rem; letter-spacing: -0.015em; margin-bottom: 12px; }
.svc__desc { color: var(--text-muted); font-size: 0.98rem; line-height: 1.55; }
.svc__tag {
  display: block; margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.03em; color: var(--text-muted);
}
.svc__soon {
  position: absolute; top: 20px; right: 20px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted); border: 1px solid var(--line); padding: 4px 9px; border-radius: 999px;
}
.svc.is-soon { opacity: 0.72; }
.svc__inner { position: relative; }
.svc__back  { display: none; }   /* desktop: description in svc__front; back only shows on mobile flip */

/* Big numbered list (services page) */
.svc-list { border-top: 1px solid var(--line); }
.svc-row {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(18px,4vw,56px);
  padding: clamp(28px, 4vw, 52px) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
@media (min-width: 880px) { .svc-row { grid-template-columns: 90px 1.1fr 1fr; } }
.svc-row__num { font-family: var(--f-display); font-size: clamp(1.4rem,2.4vw,2rem); color: var(--text-muted); }
.svc-row__title { font-family: var(--f-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -0.02em; }
.svc-row__body { color: var(--text-muted); }
.svc-row__list { margin-top: 16px; display: grid; gap: 8px; }
.svc-row__list li { position: relative; padding-left: 22px; font-size: 0.95rem; }
.svc-row__list li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 9px; height: 9px; background: var(--ink);
  clip-path: polygon(50% 0, 100% 38%, 62% 100%, 0 62%);
}

/* ============================================================
   PROCESS
   ============================================================ */
.process { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 900px) { .process { grid-template-columns: 0.85fr 1.15fr; } }
.process__intro { align-self: start; }
@media (min-width: 900px) { .process__intro { position: sticky; top: 110px; } }
.process__steps { display: flex; flex-direction: column; }
.pstep {
  display: grid; grid-template-columns: auto 1fr; gap: 22px;
  padding: 28px 0; border-top: 1px solid var(--line);
  transition: padding-left 0.3s var(--ease-out);
}
.pstep:last-child { border-bottom: 1px solid var(--line); }
.pstep:hover { padding-left: 8px; }
.pstep__num {
  font-family: var(--f-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.15em; color: var(--text-muted); padding-top: 7px;
  min-width: 26px;
}
.pstep:hover .pstep__num { color: var(--ink); }
.pstep__title { font-family: var(--f-display); font-size: 1.4rem; letter-spacing: -0.015em; margin-bottom: 8px; }
.pstep__desc { color: var(--text-muted); font-size: 0.98rem; }

/* ============================================================
   WHY IT MATTERS — editorial split
   ============================================================ */
.why { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 920px) {
  .why { grid-template-columns: 1.05fr 1fr; gap: clamp(56px, 7vw, 110px); align-items: start; }
}
.why__points { margin-top: clamp(40px, 5vw, 72px); display: grid; gap: 0 clamp(40px, 5vw, 72px); }
@media (min-width: 760px) { .why__points { grid-template-columns: 1fr 1fr; } }
.why__point { padding: 26px 0 4px; border-top: 1px solid var(--line-onDark); }
.why__k {
  display: block; font-family: var(--f-label);
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-onDark-muted); margin-bottom: 12px;
}
.why__point p { color: var(--text-onDark); font-size: 1.04rem; line-height: 1.6; }

/* ============================================================
   STATS — bold typographic grid
   ============================================================ */
.stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: clamp(64px, 8vw, 112px);
}
.stat {
  padding: clamp(22px, 3.5vw, 38px) clamp(16px, 2.5vw, 28px);
  border-top: 1px solid var(--line-onDark);
  border-right: 1px solid var(--line-onDark);
}
.stat:nth-child(even) { border-right: none; }
@media (min-width: 880px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat:nth-child(even) { border-right: 1px solid var(--line-onDark); }
  .stat:last-child { border-right: none; }
}
.stat__n {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(3.4rem, 6.5vw, 5.2rem); line-height: 0.88;
  letter-spacing: -0.045em; color: var(--text-onDark);
}
.stat__l {
  color: var(--text-onDark-muted); font-size: 0.72rem; line-height: 1.4;
  margin-top: 16px; max-width: 22ch;
  text-transform: uppercase; letter-spacing: 0.07em;
}

/* ============================================================
   PRICING
   ============================================================ */
.pricing { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 920px) { .pricing { grid-template-columns: repeat(3, 1fr); } }
.price {
  position: relative; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(26px,3vw,36px);
  background: var(--paper); display: flex; flex-direction: column;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s, border-color 0.3s;
}
.price:hover { transform: translateY(-4px); border-color: var(--ink); }
.price.featured { background: var(--panel); color: var(--text-onDark); border-color: var(--panel); }
.price.featured .price__name, .price.featured .price__amt { color: var(--text-onDark); }
.price.featured .price__sub, .price.featured .price__per, .price.featured .price__feat li { color: var(--text-onDark-muted); }
.price__badge {
  position: absolute; top: -11px; left: clamp(26px,3vw,36px);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); padding: 5px 11px; border-radius: 999px;
}
.price.featured .price__badge { background: var(--paper); color: var(--ink); }
.price.is-soon { opacity: 0.66; }
.price__tag { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.price__name { font-family: var(--f-display); font-size: 1.9rem; letter-spacing: -0.02em; margin: 10px 0 4px; }
.price__sub { font-size: 0.9rem; color: var(--text-muted); min-height: 2.6em; }
.price__amt { font-family: var(--f-display); font-size: 2.6rem; letter-spacing: -0.02em; margin-top: 18px; }
.price__per { font-size: 0.9rem; color: var(--text-muted); }
.price__strike { text-decoration: line-through; opacity: 0.42; margin-right: 8px; }
.price__feat { margin: 24px 0; display: grid; gap: 11px; flex: 1; }
.price__feat li { position: relative; padding-left: 26px; font-size: 0.93rem; }
.price__feat li::before {
  content: ''; position: absolute; left: 0; top: 6px; width: 12px; height: 12px;
  background: currentColor; opacity: 0.85;
  clip-path: polygon(50% 0, 100% 38%, 62% 100%, 0 62%);
}
.price.featured .price__feat li::before { background: var(--paper); opacity: 1; }
.price__note { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-left: 8px; }
.price.is-soon .price__amt { filter: blur(7px); user-select: none; }

/* ============================================================
   TESTIMONIAL
   ============================================================ */
.quote { max-width: 22ch; }
.quote__mark { font-family: var(--f-display); font-size: 5rem; line-height: 0.5; color: var(--text-onDark-muted); }
.quote__text { font-family: var(--f-display); font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.18; letter-spacing: -0.015em; max-width: 24ch; }
.quote__by { margin-top: 26px; display: flex; align-items: center; gap: 14px; }
.quote__avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--paper-3); display: grid; place-items: center; font-weight: 700; font-family: var(--f-display); }
.quote__name { font-weight: 600; font-size: 0.95rem; }
.quote__role { font-size: 0.84rem; color: var(--text-muted); }

/* ============================================================
   CTA BAND / CONTACT
   ============================================================ */
.cta-band { text-align: center; }
.cta-band .display { margin: 18px auto 0; max-width: 16ch; }
.cta-band .lede { margin: 24px auto 0; max-width: 46ch; }
.cta-band__actions { margin-top: 36px; display: inline-flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.contact-grid { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 5vw, 72px); }
@media (min-width: 920px) { .contact-grid { grid-template-columns: 0.85fr 1.15fr; } }
.contact-info__item { padding: 20px 0; border-top: 1px solid var(--line); }
.contact-info__item:last-child { border-bottom: 1px solid var(--line); }
.contact-info__k { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.contact-info__v { font-family: var(--f-display); font-size: 1.3rem; letter-spacing: -0.01em; }

.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 0.82rem; font-weight: 600; }
.field .opt { font-weight: 400; color: var(--text-muted); }
.field input, .field select, .field textarea {
  background: var(--paper); border: 1.5px solid var(--line);
  border-radius: var(--radius); padding: 14px 15px; min-height: 50px;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(11,11,12,0.08);
}
.field input::placeholder, .field textarea::placeholder { color: #a39e95; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--err); }
.field__err { font-size: 0.78rem; color: var(--err); display: none; }
.field.invalid .field__err { display: block; }
.form__status { font-size: 0.9rem; text-align: center; display: none; padding: 12px; border-radius: var(--radius); }
.form__status.ok { display: block; background: rgba(30,158,90,0.12); color: var(--ok); }
.form__status.bad { display: block; background: rgba(192,57,43,0.1); color: var(--err); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--panel); color: var(--text-onDark); padding-block: clamp(56px, 7vw, 96px) 32px; }
.footer__top { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 760px) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__brand .brand__word { color: var(--text-onDark); }
.footer__tag { margin-top: 18px; color: var(--text-onDark-muted); max-width: 34ch; font-family: var(--f-display); font-size: 1.4rem; line-height: 1.25; letter-spacing: -0.01em; }
.footer__col-h { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-onDark-muted); margin-bottom: 18px; }
.footer__col a { display: block; padding: 7px 0; color: var(--text-onDark-muted); transition: color 0.2s; }
.footer__col a:hover { color: var(--text-onDark); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
  margin-top: clamp(48px, 6vw, 80px); padding-top: 26px; border-top: 1px solid var(--line-onDark);
  font-size: 0.82rem; color: var(--text-onDark-muted);
}
.footer__legal { display: flex; gap: 20px; }
.footer__legal a { color: var(--text-onDark-muted); font-size: 0.82rem; transition: color 0.2s; text-decoration: underline; text-underline-offset: 3px; }
.footer__legal a:hover { color: var(--text-onDark); }

/* ============================================================
   LEGAL PAGES (privacy.html, terms.html)
   ============================================================ */
.legal-block { margin-top: 52px; }
.legal-block h2 { margin-bottom: 18px; }
.legal-block p { margin-top: 12px; line-height: 1.75; color: var(--text); }
.legal-block ul { margin-top: 12px; padding-left: 22px; }
.legal-block li { margin-top: 8px; line-height: 1.7; color: var(--text); }
.legal-block a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal-block a:hover { opacity: 0.7; }

/* ============================================================
   FLOATING WHATSAPP + MOBILE STICKY CTA
   ============================================================ */
.float-wa {
  position: fixed; right: 24px; bottom: 24px; z-index: var(--z-float);
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  box-shadow: 0 6px 22px rgba(11,11,12,0.22);
  transition: transform 0.2s var(--ease-out), background 0.2s;
}
.float-wa:hover { transform: translateY(-2px); background: #000; }
@keyframes wa-pulse {
  0%   { transform: scale(1);    opacity: 0.55; }
  70%  { transform: scale(1.6);  opacity: 0; }
  100% { transform: scale(1.6);  opacity: 0; }
}
.float-wa::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.55);
  animation: wa-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
body.flipped .float-wa::before { border-color: rgba(11,11,12,0.35); }

.mobile-cta {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: var(--z-float);
  display: none;
  transition: opacity 0.25s var(--ease-out), transform 0.3s var(--ease-out);
}
.mobile-cta .btn {
  border-radius: 999px;
  padding: 0 28px;
  height: 52px;                     /* matches WhatsApp bubble height */
  white-space: nowrap;
  width: auto;
  box-shadow: 0 8px 28px rgba(11,11,12,0.32), 0 2px 8px rgba(11,11,12,0.14);
}
.mobile-cta--hidden {
  opacity: 0; pointer-events: none;
  transform: translateX(-50%) translateY(10px);
}

/* ---- Lightning-bolt particles that continuously rise from the CTA pill ---- */
.mobile-cta { overflow: visible; }
.cta-bolt {
  position: absolute;
  bottom: calc(100% + 2px);
  pointer-events: none;
  animation: cta-bolt-rise var(--dur, 1100ms) ease-out forwards;
  color: rgba(243, 240, 234, 0.88);
  filter: drop-shadow(0 0 5px rgba(243, 240, 234, 0.40));
  line-height: 1;
}
body.flipped .cta-bolt {
  color: rgba(11, 11, 12, 0.65);
  filter: drop-shadow(0 0 4px rgba(11, 11, 12, 0.22));
}
@keyframes cta-bolt-rise {
  0%   { opacity: 0; transform: translateY(5px) translateX(0px) rotate(var(--rot, 0deg)) scale(0.45); }
  12%  { opacity: 0.95; }
  72%  { opacity: 0.60; }
  100% { opacity: 0; transform: translateY(-60px) translateX(var(--dx, 0px)) rotate(var(--rot, 0deg)) scale(0.88); }
}

/* ---------- Case-study layout helpers ---------- */
@media (min-width: 720px) {
  .dnd-detail { grid-template-columns: 1fr 1fr !important; }
  .dnd-outcomes { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ---------- FAQ accordion ---------- */
details > summary { list-style: none; position: relative; padding-right: 40px; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after {
  content: ''; position: absolute; right: 4px; top: 50%; width: 12px; height: 12px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s var(--ease-out);
}
details[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
details > summary:focus-visible { outline-offset: 6px; }
details > summary { transition: color 0.25s; }
details > summary:hover { color: var(--text-muted); }
.dark details > summary:hover { color: var(--text-onDark-muted); }

/* Answer reveal: blur-to-crisp + subtle rise, matches site's reveal rhythm */
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); filter: blur(4px); }
  to   { opacity: 1; transform: none;              filter: blur(0);   }
}
details[open] > p,
details[open] > div {
  animation: faqOpen 0.45s var(--ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
  details[open] > p,
  details[open] > div { animation: none; }
}

/* ============================================================
   FRAGMENT LOGO  (hover shimmer · full-screen intro · rebuild)
   ============================================================ */
.bc-logo {
  position: relative;
  height: 30px;
  aspect-ratio: 328 / 742;
  flex-shrink: 0;
  display: inline-block;
}
.bc-frag {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  transition: transform 0.55s var(--ease-out), opacity 0.55s var(--ease-out);
  will-change: transform;
  pointer-events: none;
}
.bc-frag path { fill: var(--ink); }

/* Hover shimmer on the nav logo (any page) */
@media (hover: hover) {
  header.nav .brand:hover .bc-frag.f4  { transform: translate(0.3px,  -3.3px); }
  header.nav .brand:hover .bc-frag.f6  { transform: translate(0.5px,  -3.3px); }
  header.nav .brand:hover .bc-frag.f10 { transform: translate(-1.0px, -3.2px); }
  header.nav .brand:hover .bc-frag.f11 { transform: translate(-3.2px, -1.0px); }
  header.nav .brand:hover .bc-frag.f13 { transform: translate(2.6px,  -2.1px); }
  header.nav .brand:hover .bc-frag.f14 { transform: translate(3.4px,  -0.2px); }
  header.nav .brand:hover .bc-frag.f15 { transform: translate(0.4px,  -3.3px); }
  header.nav .brand:hover .bc-frag.f17 { transform: translate(-0.6px,  3.3px); }
  header.nav .brand:hover .bc-frag.f18 { transform: translate(-3.2px,  0.9px); }
  header.nav .brand:hover .bc-frag.f19 { transform: translate(1.0px,   3.2px); }
  header.nav .brand:hover .bc-frag.f21 { transform: translate(-0.5px,  3.3px); }
}

/* Nav logo "rebuild" pre-state (fragments scattered + invisible — snaps instantly) */
.bc-logo--prebuild .bc-frag { opacity: 0; transition: none; }
.bc-logo--prebuild .bc-frag.f4  { transform: translate(4px,  -30px) rotate(-26deg); }
.bc-logo--prebuild .bc-frag.f6  { transform: translate(7px,  -30px) rotate(18deg); }
.bc-logo--prebuild .bc-frag.f10 { transform: translate(-12px,-28px) rotate(-34deg); }
.bc-logo--prebuild .bc-frag.f11 { transform: translate(-32px,-10px) rotate(-40deg); }
.bc-logo--prebuild .bc-frag.f13 { transform: translate(26px, -20px) rotate(34deg); }
.bc-logo--prebuild .bc-frag.f14 { transform: translate(34px,  -3px) rotate(44deg); }
.bc-logo--prebuild .bc-frag.f15 { transform: translate(3px,  -32px) rotate(-18deg); }
.bc-logo--prebuild .bc-frag.f17 { transform: translate(-6px,  32px) rotate(24deg); }
.bc-logo--prebuild .bc-frag.f18 { transform: translate(-32px, 10px) rotate(-36deg); }
.bc-logo--prebuild .bc-frag.f19 { transform: translate(10px,  32px) rotate(30deg); }
.bc-logo--prebuild .bc-frag.f21 { transform: translate(-5px,  32px) rotate(-24deg); }

/* The reassembly itself — slow, clearly visible */
.bc-logo.is-rebuilding .bc-frag {
  transition: transform 1.1s var(--ease-out), opacity 1.1s var(--ease-out);
}


/* ============================================================
   KINETIC HOUSE STYLE — "Charged"
   Bricolage display · electric ultramarine accent · shard motif
   ============================================================ */

::selection { background: var(--volt); color: #fff; }

/* Display type voice */
.display { font-weight: 800; letter-spacing: -0.04em; line-height: 0.96; }
.h1 { font-weight: 700; letter-spacing: -0.03em; }
.h2 { font-weight: 700; letter-spacing: -0.025em; }
/* New emphasis device: volt-coloured word (replaces the old italic tic) */
.display em, .h1 em, .h2 em, .hero__title em { font-style: normal; color: var(--volt); }
.dark .display em, .dark .h1 em, .dark .h2 em { color: var(--volt); }

/* Volt button */
.btn--volt { background: var(--volt); color: #fff; }
.btn--volt:hover { background: var(--volt-deep); transform: translateY(-2px); }
.btn--volt:hover svg { transform: translateX(4px); }

/* Kicker label (volt tick) */
.kx-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-label); font-size: 0.74rem;
  font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-muted);
}
.kx-kicker::before { content: ''; width: 26px; height: 2px; background: var(--volt); }
.dark .kx-kicker { color: var(--text-onDark-muted); }

/* Big outlined index numeral */
.kx-num {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(3.2rem, 8vw, 7rem); line-height: 0.8; letter-spacing: -0.04em;
  -webkit-text-stroke: 1.5px var(--ink); color: transparent;
  display: inline-block;
}
.kx-num .d { color: var(--volt); -webkit-text-stroke: 0; }
.dark .kx-num { -webkit-text-stroke-color: var(--text-onDark); }

/* Asymmetric section header */
.kx-head { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: clamp(40px, 5vw, 72px); }
@media (min-width: 900px) {
  .kx-head { grid-template-columns: auto 1fr; gap: clamp(28px, 4vw, 64px); align-items: end; }
  .kx-head__aside { align-self: start; }
}
.kx-head__title { margin-top: 16px; }
.kx-head__intro { color: var(--text-muted); max-width: 42ch; }
.dark .kx-head__intro { color: var(--text-onDark-muted); }

/* Shard divider — angled section edge (the recurring motif) */
.section.shard {
  clip-path: polygon(0 var(--shard-cut), 100% 0, 100% calc(100% - var(--shard-cut)), 0 100%);
  padding-block: calc(clamp(80px, 12vw, 168px) + var(--shard-cut));
  margin-block: calc(var(--shard-cut) * -0.5);
}
@media (max-width: 600px) { :root { --shard-cut: 38px; } }

/* Volt full-bleed section */
.section--volt { background: var(--volt); color: #fff; }
.section--volt .display, .section--volt .h1, .section--volt .h2 { color: #fff; }
.section--volt .h1 em, .section--volt .display em { color: var(--ink); }
.section--volt .lede { color: rgba(255,255,255,0.82); }
.section--volt .kx-kicker { color: rgba(255,255,255,0.7); }
.section--volt .kx-kicker::before { background: #fff; }
.section--volt .btn--primary { background: #fff; color: var(--volt-deep); }
.section--volt .btn--primary:hover { background: var(--ink); color: #fff; }
.section--volt .btn--ghost { border-color: rgba(255,255,255,0.5); color: #fff; }
.section--volt .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

/* Hero glyph — refined, subtle (no echo) */
.hero__glyph {
  opacity: 0.07;
  filter: none;
}
@media (max-width: 760px) { .hero__glyph { opacity: 0.05; } }

/* Art-directed work — subtle shard nick */
.work-card--feature .work-card__frame {
  border: 1px solid var(--line-soft); border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
.work-card--feature .work-card__overlay {
  background: linear-gradient(to top, rgba(11,11,12,0.55), rgba(11,11,12,0.05) 60%);
}
.work-card__num {
  font-family: var(--f-display); font-weight: 800; color: var(--volt);
  font-size: 0.9rem; letter-spacing: 0.04em;
}
.work-card__title em { color: var(--volt); font-style: normal; }

/* Scroll progress bar (volt) */
.kx-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--volt); z-index: 1000;
  transition: width 0.1s linear;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1.5s var(--ease-out), transform 1.5s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 0.18s; }
.reveal[data-d="2"] { transition-delay: 0.36s; }
.reveal[data-d="3"] { transition-delay: 0.54s; }
.reveal[data-d="4"] { transition-delay: 0.72s; }

/* MASKLESS headline reveal — fade + a small rise, with NO overflow:hidden. With
   no clip box, glyph descenders / letter-bottoms can NEVER be cropped in any
   state (initial, mid-rise or at rest). The display line-heights are sub-1.0 and
   the desktop zoom 0.75 would otherwise shave a hairline off a clipped box —
   removing the box removes the problem entirely. */
.clip { opacity: 0; transform: translateY(28px); transition: opacity 1.2s var(--ease-out), transform 1.6s var(--ease-out); }
.clip.in { opacity: 1; transform: none; }
.clip > * { display: inline-block; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .nav__links, .nav__right .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  /* CTA pill + WhatsApp sit side by side on the same horizontal line */
  .float-wa { bottom: calc(24px + env(safe-area-inset-bottom)); }
  .mobile-cta {
    display: block;
    left: 24px;
    right: auto;
    bottom: calc(24px + env(safe-area-inset-bottom));
    transform: none;
  }
  .mobile-cta--hidden { transform: translateY(10px); }
  body { padding-bottom: 0; }
  .scroll-hint { display: none; }
  .footer { padding-bottom: calc(36px + 52px + env(safe-area-inset-bottom)); }
}

/* Un-revealed drift elements (translate ±110px) widen the scrollable area on
   small screens — clip (NOT hidden: clip can't break position:sticky) */
@media (max-width: 767px) {
  html { overflow-x: clip; }
}

@media (max-width: 760px) {
  .hero { min-height: auto; padding-top: 130px; padding-bottom: 64px; }
  .hero__glyph { opacity: 0.04; width: 70vw; right: -18vw; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .clip, .clip.in { opacity: 1; transform: none; }
  .clip > * { transform: none; animation: none; }
  .marquee__track { animation: none; }
.bc-frag { transform: none !important; opacity: 1 !important; }
}

/* ============================================================
   IMMERSIVE MOTION  (v8) — word reveals, page transitions
   ============================================================ */

/* ---- Word-by-word headline reveal ---- */
/* Pre-split hide: the inline head script adds html.split-hide (only when JS is
   on AND motion is allowed) so the headline never paints its raw, un-split text
   before main.js splits it into per-word spans (the "flash then disappear" bug).
   main.js removes the class the instant the words are split — at which point the
   words are individually opacity:0, so the reveal proceeds with no flash — and
   the 4s safety net removes it on any failure, so the headline can never get
   stuck hidden. JS-off users never get the class: the raw text shows, fully
   accessible. */
html.split-hide [data-split] { opacity: 0; }
[data-split] { }
/* MASKLESS split-word reveal — each word fades + rises with NO overflow:hidden,
   so per-word descenders can never be clipped (hero + case-study display H1s).
   No mask also means a dropped transitionend can't leave a word cropped — the
   worst case is a word that appears un-animated, never one that's hidden. */
.word { display: inline-block; vertical-align: top; }
/* Each word fades + rises into place. Maskless (no overflow:hidden), so descenders
   are never clipped at any point in the rise. */
.word__i { display: inline-block; opacity: 0; transform: translateY(0.6em); }
[data-split].is-in .word__i {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease, transform 1.35s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i) * 0.07s);
}

/* ---- Clip / wipe reveal for media ---- */
.reveal-clip { clip-path: inset(0 0 101% 0); transition: clip-path 1.15s cubic-bezier(0.16, 1, 0.3, 1); will-change: clip-path; }
.reveal-clip.in { clip-path: inset(0 0 0 0); }

/* ---- Soft scale-in for blocks ---- */
.reveal-scale { opacity: 0; transform: scale(0.96); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal-scale.in { opacity: 1; transform: none; }

/* ---- Page transition wipe (immersive navigation) ---- */
#nav-trans {
  position: fixed; inset: 0; z-index: 9000;
  background: var(--ink);
  transform: translateY(-100%);
  pointer-events: none;
  display: grid; place-items: center;
}
#nav-trans .nt-bolt { width: auto; height: 16vh; opacity: 0.92; }
#nav-trans .nt-bolt path { fill: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  [data-split] .word__i { transform: none !important; opacity: 1 !important; }
  .reveal-clip { clip-path: none !important; }
  .reveal-scale { opacity: 1 !important; transform: none !important; }
  #nav-trans { display: none !important; }
}

/* ============================================================
   HIGH-CONTRAST DARK THEME (v9) — near-black base, bright jolts
   ============================================================ */
body { background: var(--ink); color: var(--text-onDark); }
body::after { opacity: 0.05; }

.display, .h1, .h2, .h3 { color: var(--text-onDark); }
.display { font-size: clamp(2.2rem, 9.5vw, 8rem); line-height: 0.92; letter-spacing: -0.045em; }
.h1 { font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: 0.98; }
.h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
.lede, .body { color: rgba(243,240,234,0.72); }
.eyebrow, .kx-kicker, .section-head__intro, .kx-head__intro { color: var(--text-onDark-muted); }
.kx-num { -webkit-text-stroke-color: var(--text-onDark); }
.display em, .h1 em, .h2 em, .hero__title em { color: var(--text-onDark); }

.nav { background: color-mix(in srgb, var(--ink) 72%, transparent); border-bottom-color: transparent; }
.nav.scrolled { border-bottom-color: var(--line-onDark); box-shadow: none; }
.brand__word { color: var(--text-onDark); }
.bc-frag path { fill: var(--text-onDark); }
.nav__link { color: var(--text-onDark); }
.nav__link::after { background: var(--text-onDark); }
.nav__cta { background: var(--paper); color: var(--ink); }
.nav__toggle span { background: var(--text-onDark); }
.mobile-menu { background: var(--ink); }
.mobile-menu a.m-link { color: var(--text-onDark); border-bottom-color: var(--line-onDark); }

.btn--primary { background: var(--paper); color: var(--ink); }
.btn--primary:hover { background: #fff; }
.btn--ghost { color: var(--text-onDark); border-color: var(--line-onDark); }
.btn--ghost:hover { border-color: var(--paper); }

.hero__loc { color: var(--text-onDark-muted); }
.hero__dot { background: var(--text-onDark); }
.hero__glyph { color: var(--text-onDark); opacity: 1; filter: none; }
/* Hero bolt — fragments idle-float + glow (JS-driven, max 2 at once, never adjacent); hover drifts them outward */
.hero__shard {
  opacity: 0.07;
  transition: opacity 0.7s linear;
}
.hero__shard.is-lit { opacity: 0.58; }
@media (prefers-reduced-motion: no-preference) {
  .hero__shard {
    animation: heroShardFloat var(--fdur, 8s) linear var(--delay, 0s) infinite;
    will-change: opacity, transform;
  }
}
/* gentle constant-speed orbit per fragment (linear — never speeds up or slows down) */
@keyframes heroShardFloat {
  0%   { transform: translate(var(--fx, 0), 0); }
  25%  { transform: translate(0, var(--fy, 0)); }
  50%  { transform: translate(calc(var(--fx, 0) * -1), 0); }
  75%  { transform: translate(0, calc(var(--fy, 0) * -1)); }
  100% { transform: translate(var(--fx, 0), 0); }
}
/* Hover → each fragment's GROUP drifts outward (composes with the float, never freezes it); brighten so it reads */
.hero__shard-wrap { transition: transform 1.2s var(--ease-out); }
.hero__glyph.is-scattered .hero__shard-wrap { transform: translate(var(--tx, 0), var(--ty, 0)); }
.hero__glyph.is-scattered .hero__shard { opacity: 0.3; }
.hero__stat .n { color: var(--text-onDark); }
.hero__stat .l { color: var(--text-onDark-muted); }
.hero__meta { border-top-color: var(--line-onDark); }
.scroll-hint { color: var(--text-onDark-muted); }
.scroll-hint__line { background: var(--line-onDark); }

.section-head, .kx-head { border-color: var(--line-onDark); }
.divider { background: var(--line-onDark); }
.kx-progress { background: var(--text-onDark); }

.work-card__title { color: var(--text-onDark); }
.work-card__cat, .work-card__tags { color: var(--text-onDark-muted); }
.work-card__frame { background: var(--panel-2); border-color: var(--line-onDark); }

.pstep { border-top-color: var(--line-onDark); }
.pstep__title { color: var(--text-onDark); }
.pstep__num { color: var(--text-onDark-muted); }
.pstep:hover .pstep__num { color: var(--text-onDark); }
.pstep__desc { color: var(--text-onDark-muted); }

.svc-list { border-top-color: var(--line-onDark); }
.svc-row { border-bottom-color: var(--line-onDark); }
.svc-row__title { color: var(--text-onDark); }
.svc-row__num, .svc-row__body { color: var(--text-onDark-muted); }
.svc-row__list li::before { background: var(--text-onDark); }
details > summary::after { border-color: var(--text-onDark); }

.svc { background: var(--panel); border-color: var(--line-onDark); }
.svc:hover { background: var(--panel-2); border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 26px 54px rgba(0, 0, 0, 0.5); }
.svc__title, .svc__icon { color: var(--text-onDark); }
.svc__desc, .svc__num, .svc__tag { color: var(--text-onDark-muted); }
.svc__icon { border-color: var(--line-onDark); background: rgba(255, 255, 255, 0.035); }
.svc:hover .svc__icon { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); }
.svc__tag { border-top-color: var(--line-onDark); }
.svc__soon { color: var(--text-onDark-muted); border-color: var(--line-onDark); }

.price { background: var(--panel); border-color: var(--line-onDark); }
.price:hover { border-color: var(--text-onDark); }
.price__name, .price__amt { color: var(--text-onDark); }
.price__tag, .price__sub, .price__per, .price__feat li { color: var(--text-onDark-muted); }
.price__feat li::before { background: var(--text-onDark); }
.price__badge { background: var(--paper); color: var(--ink); }
.price.featured { background: var(--paper); border-color: var(--paper); }
.price.featured .price__name, .price.featured .price__amt { color: var(--ink); }
.price.featured .price__tag, .price.featured .price__sub, .price.featured .price__per, .price.featured .price__feat li { color: var(--text-muted); }
.price.featured .price__feat li::before { background: var(--ink); }
.price.featured .price__badge { background: var(--ink); color: var(--paper); }
.price.featured .btn--primary { background: var(--ink); color: var(--paper); }

.field label { color: var(--text-onDark); }
.field input, .field select, .field textarea { background: var(--panel-2); border-color: var(--line-onDark); color: var(--text-onDark); }
.field input::placeholder, .field textarea::placeholder { color: rgba(243,240,234,0.4); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--paper); box-shadow: 0 0 0 3px rgba(243,240,234,0.12); }
.contact-info__item { border-color: var(--line-onDark); }
.contact-info__k { color: var(--text-onDark-muted); }
.contact-info__v { color: var(--text-onDark); }

.filter__btn { color: var(--text-onDark-muted); border-color: var(--line-onDark); }
.filter__btn:hover { color: var(--text-onDark); border-color: var(--text-onDark); }
.filter__btn.active { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.quote__avatar { background: var(--panel-2); color: var(--text-onDark); }
.quote__name { color: var(--text-onDark); }

.float-wa { background: var(--paper); color: var(--ink); box-shadow: 0 6px 22px rgba(0,0,0,0.5); }
.float-wa:hover { background: #fff; }
.mobile-cta .btn { box-shadow: 0 8px 28px rgba(0,0,0,0.42), 0 2px 8px rgba(0,0,0,0.2); }

/* ---- .invert : bright jolt section (light island on dark) ---- */
.invert { background: var(--paper); color: var(--text); }
.invert .display, .invert .h1, .invert .h2, .invert .h3,
.invert .display em, .invert .h1 em, .invert .h2 em { color: var(--ink); }
.invert .lede, .invert .body, .invert .eyebrow, .invert .kx-kicker,
.invert .section-head__intro, .invert .kx-head__intro { color: var(--text-muted); }
.invert .kx-num { -webkit-text-stroke-color: var(--ink); }
.invert .svc { background: var(--paper); border-color: var(--line-soft); }
.invert .svc:hover { background: var(--paper-2); border-color: rgba(11, 11, 12, 0.18); box-shadow: 0 26px 54px rgba(0, 0, 0, 0.10); }
.invert .svc__title, .invert .svc__icon { color: var(--ink); }
.invert .svc__desc, .invert .svc__num, .invert .svc__tag { color: var(--text-muted); }
.invert .svc__icon { border-color: var(--line-soft); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.invert .svc__tag { border-top-color: var(--line-soft); }
.invert .svc__soon { color: var(--text-muted); border-color: var(--line); }
.invert .work-card__title { color: var(--ink); }
.invert .work-card__cat, .invert .work-card__tags { color: var(--text-muted); }
.invert .btn--primary { background: var(--ink); color: var(--paper); }
.invert .btn--ghost { color: var(--ink); border-color: var(--line); }
.invert .dnd-outcomes .h2 { color: var(--ink); }

/* ---- Subtle sub-page crossfade ---- */
#page-fade {
  position: fixed; inset: 0; z-index: 9000;
  background: var(--ink);
  opacity: 0; pointer-events: none;
  transition: opacity 0.16s ease;
}
/* Arriving via our own crossfade: covered from the very first paint (the inline
   head script adds .pf-cover before any rendering), so the incoming page can
   never flash its content before the overlay appears. main.js dissolves it. */
.pf-cover #page-fade { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #page-fade { display: none !important; } }

/* ============================================================
   HELLOUP-STYLE DRIFT MOTION + GENEROUS SPACING (dark v16)
   Elegant scroll: text & boxes ease/drift together into place
   ============================================================ */
:root { --ease-drift: cubic-bezier(0.22, 1, 0.36, 1); }

/* --- Elegant drift reveal (replaces the plain rise) --- */
.reveal {
  opacity: 0;
  transform: translateY(72px);
  transition: opacity 1.1s var(--ease-drift), transform 1.25s var(--ease-drift);
  will-change: transform, opacity;
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-rise="left"]  { transform: translate(-110px, 24px); }
.reveal[data-rise="right"] { transform: translate(110px, 24px); }
.reveal[data-rise="scale"] { transform: translateY(40px) scale(0.965); }
/* gentler, more cinematic stagger — sub-text trails the headline by a short beat */
.reveal[data-d="1"] { transition-delay: 0.15s; }
.reveal[data-d="2"] { transition-delay: 0.3s; }
.reveal[data-d="3"] { transition-delay: 0.46s; }
.reveal[data-d="4"] { transition-delay: 0.62s; }

/* LANDING hero ONLY: the blurb under the bold headline holds back a reading
   beat — the headline lands and is read first, then the supporting text softly
   enters. Scoped to .is-home so every OTHER hero (and the landing buttons) uses
   the normal reveal stagger at original speed. */
.is-home .hero .reveal[data-d="2"] { transition-delay: 2.3s; transition-duration: 1.8s; }

/* Clip headline reveal — same smooth drift rhythm */
.clip > * { transition: transform 1.35s var(--ease-drift); }

/* Continuous parallax drift (transform set by JS) */
[data-parallax] { will-change: transform; }

/* --- Generous, premium spacing (text trimmed slightly to give it air) --- */
.section { padding-block: clamp(104px, 15vw, 224px); }
.section--tight { padding-block: clamp(72px, 10vw, 140px); }
.kx-head, .section-head { margin-bottom: clamp(56px, 7vw, 104px); }
.work-grid { gap: clamp(40px, 6vw, 96px); }
.stats { gap: 0; margin-top: clamp(80px, 9vw, 130px); }
.why { gap: clamp(48px, 7vw, 120px); }
.process { gap: clamp(40px, 6vw, 88px); }
.svc { padding: clamp(32px, 4vw, 52px); }
.pstep { padding: 34px 0; }
.svc-row { padding-block: clamp(34px, 4.5vw, 60px); }

/* Section type trimmed a touch (hero/.display untouched) */
.h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
.h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.section .lede, .kx-head__intro, .section-head__intro { font-size: clamp(1rem, 1.35vw, 1.16rem); }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; }
  [data-parallax] { transform: none !important; }
}

/* ---- Lenis smooth scroll — required CSS (prevents native scroll-behavior conflict) ---- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---- verteal-style hero overlap: content sheet slides up over a pinned hero (home, desktop) ---- */
@media (min-width: 768px) {
  .overlap-hero > .hero { position: sticky; top: 0; z-index: 0; }
  /* one opaque off-white sheet rides up over the pinned hero (clips reveal the sheet, never the hero) */
  .overlap-hero .overlap-sheet {
    position: relative; z-index: 1;
    background: var(--paper);
    border-top-left-radius: 28px; border-top-right-radius: 28px;
    box-shadow: 0 -30px 70px rgba(0,0,0,0.55);
  }
  /* flatten the diagonal shard cut inside the sheet so dark panels stay clean rectangles */
  .overlap-sheet .section.shard { clip-path: none; margin-block: 0; }
}

/* invert (light) variants — stat band + process steps render on off-white */
.invert .stat { border-color: var(--line); }
.invert .stat__n { color: var(--ink); }
.invert .stat__l { color: var(--text-muted); }
.invert .pstep__title { color: var(--ink); }
.invert .pstep__num { color: var(--text-muted); }
.invert .pstep:hover .pstep__num { color: var(--ink); }
.invert .pstep__desc { color: var(--text-muted); }
.invert .pstep:last-child { border-bottom-color: var(--line); }

/* svc-row / FAQ accordion in light (.invert) sections */
.invert { color-scheme: light; }
.invert .svc-list { border-top-color: var(--line); }
.invert .svc-row { border-bottom-color: var(--line); }
.invert .svc-row__title { color: var(--ink); }
.invert .svc-row__num,
.invert .svc-row__body { color: var(--text-muted); }
.invert .svc-row__list li::before { background: var(--ink); }
.invert details > summary { color: var(--ink); background: transparent; }
.invert details > summary::after { border-color: var(--ink); }
.invert details > summary:hover { color: var(--text-muted); }
.invert .link-underline { color: var(--ink); }
.invert .link-underline:hover { color: var(--text-muted); }

/* dark service cards (section 04) — lift off the panel + correct hover */
.dark .svc { background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0) 46%), var(--ink-soft); }
.dark .svc:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 46%), #232327; }

/* 01 stat section — sit the header nearer the top + tighten the gap to the stats */
#numbers { padding-top: clamp(52px, 6vw, 92px); }
#numbers .stats { margin-top: clamp(36px, 4.5vw, 60px); }

/* ============================================================
   PALETTE FLIP — clicking the hero bolt toggles body.flipped,
   which swaps the colour tokens so the whole site inverts
   (hero + every section) in one go. Reuses all existing rules.
   ============================================================ */
body.flipped {
  --ink:        #ECE8E1;   /* base surface now light */
  --ink-soft:   #E3DED5;
  --paper:      #0B0B0C;   /* "paper" surfaces (invert, sheet) now dark */
  --paper-2:    #1C1C1E;
  --paper-3:    #2A2A2C;
  --panel:      #E3DED5;   /* dark sections now light */
  --panel-2:    #DCD6CC;
  --text:       #F3F0EA;   /* dark text now light */
  --text-muted: rgba(243,240,234,0.56);
  --text-onDark:#16161A;   /* light text now dark */
  --text-onDark-muted: #3D3933;
  --line:        rgba(243,240,234,0.16);
  --line-soft:   rgba(243,240,234,0.10);
  --line-onDark: rgba(11,11,12,0.14);
}
/* Fix: .lede/.body use a hardcoded cream colour that doesn't respond to the flip variable.
   Override it here so all body/lede text reads on the inverted light background. */
body.flipped .lede,
body.flipped .body { color: var(--text-onDark-muted); }
/* smooth cross-fade when the palette flips — CONTAINER BACKGROUNDS ONLY.
   (Never list reveal/text classes here: the transition shorthand would reset
   their reveal transitions and break the scroll animations.) */
body, .overlap-sheet, .section, .hero {
  transition: background-color 0.55s ease;
}

/* ---- Landing page: Why-it-matters heading parallax (JS-driven translateY) ---- */

/* ---- Landing: Selected-work → Brand Catalyst card via a brand-diagonal "shutter" on hover ---- */
.work-card--flip .work-card__frame {
  overflow: hidden; clip-path: none; border-radius: 18px;
  border: 1px solid var(--line-soft); background: var(--panel-2);
}
.work-card--flip .work-card__img { width: 100%; height: 100%; object-fit: cover; }
.work-card--flip:hover .work-card__img { transform: none; }   /* the shutter is the motion, no zoom */
/* two ink panels sweep in from the top-right & bottom-left corners and meet on the diagonal.
   Grouped so the see-through tint is applied ONCE (no double-darkened overlap band). */
.work-card--flip .shutter-group { position: absolute; inset: 0; z-index: 2; opacity: 0.85; }
.work-card--flip .shutter {
  position: absolute; inset: 0; background: #0B0B0C;
  will-change: transform;
  transition: transform 0.78s cubic-bezier(0.66, 0, 0.2, 1);
}
/* each panel reaches ~9% past the diagonal so they OVERLAP (same ink) — no seam, fully shut */
.work-card--flip .shutter--tr { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 9%); transform: translate(112%, -112%); }
.work-card--flip .shutter--bl { clip-path: polygon(0 0, 9% 0, 100% 100%, 0 100%); transform: translate(-112%, 112%); }
.work-card--flip:hover .shutter--tr, .work-card--flip:focus-visible .shutter--tr { transform: translate(0, 0); }
.work-card--flip:hover .shutter--bl, .work-card--flip:focus-visible .shutter--bl { transform: translate(0, 0); }
/* the card content settles in once the shutter has closed */
.work-card--flip .bizcard {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.8rem; text-align: center; padding: 24px; color: #F3F0EA;
  opacity: 0; transform: translateY(9px);
  transition: opacity 0.4s ease, transform 0.5s var(--ease-out);
}
.work-card--flip:hover .bizcard, .work-card--flip:focus-visible .bizcard {
  opacity: 1; transform: none; transition-delay: 0.36s;
}
.work-card--flip .bizcard__logo { width: clamp(42px, 6vw, 60px); color: #F3F0EA; display: block; position: relative; }
/* soft round spotlight centred on the bolt — gradient sized to the closest side so it
   fades to nothing well before the box corners (no squared footprint) */
.work-card--flip .bizcard__logo::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(180px, 24vw, 280px); aspect-ratio: 1; border-radius: 50%;
  pointer-events: none; z-index: -1;
  background: radial-gradient(circle closest-side, rgba(243,240,234,0.24) 0%, rgba(243,240,234,0.07) 46%, rgba(243,240,234,0) 80%);
}
.work-card--flip .bizcard__logo svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 26px rgba(243,240,234,0.16)); }
.work-card--flip .bizcard__logo path { fill: currentColor; }
.work-card--flip .bizcard__brand {
  font-family: var(--f-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(1.3rem, 2.4vw, 1.85rem); line-height: 1; position: relative;
}
.work-card--flip .bizcard__cta {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(243,240,234,0.62); display: inline-flex; align-items: center; gap: 8px; position: relative;
}
@media (prefers-reduced-motion: reduce) {
  .work-card--flip .shutter { transition: none; }
  .work-card--flip .bizcard { transition: none; }
}

/* Work card shutter: tap to trigger on touch screens (JS adds .is-touch-flipped) */
.work-card--flip.is-touch-flipped .shutter--tr,
.work-card--flip.is-touch-flipped .shutter--bl { transform: translate(0, 0); }
.work-card--flip.is-touch-flipped .bizcard { opacity: 1; transform: none; transition-delay: 0.36s; }

/* Regular work cards: always show gradient overlay + view link on touch-only screens */
@media (hover: none) {
  .work-card__overlay { opacity: 1; }
  .work-card__view { transform: translateY(0); }
}

/* ---- Landing: trim the Selected-work (03) section height a touch ---- */
#work { padding-block: clamp(72px, 9vw, 144px); }
#work .kx-head { margin-bottom: clamp(32px, 4vw, 52px); }

/* ---- Titles: gentle float (matches the hero) + stop the wipe-mask clipping descenders ---- */
@media (prefers-reduced-motion: no-preference) {
  /* float the INNER span (not .clip) so it never overrides .clip's reveal transform */
  .clip.in > * { animation: titleFloat 5.5s ease-in-out infinite; }
}
@keyframes titleFloat {
  0%, 100% { transform: translateY(-2.5px); }
  50%      { transform: translateY(2.5px); }
}

/* ---- Triangulated colour-bleed divider between contrasting sections ---- */
.tri-bleed {
  position: relative; width: 100%; height: 116px; line-height: 0; overflow: hidden;
  background: none;   /* tiles fully tile the band — no background line/gradient behind them */
  margin: 0;
}
.tri-bleed svg { display: block; width: 100%; height: 100%; }
/* fill+stroke are set inline per tile (continuous gradient shade); stroke matches fill → no seams */
.tri-bleed polygon { stroke-width: 1.2; }
@media (prefers-reduced-motion: no-preference) {
  .tri-bleed polygon { transition: fill 0.55s linear, stroke 0.55s linear; }   /* smooths the slow gradient sweep */
}


/* ============================================================
   WORK PAGE (lane1) — pinned-hero overlap + visual polish
   Every rule is scoped to .page-work so shared components and
   the other pages stay untouched. Appended as its own block.
   ============================================================ */

/* —— Pinned hero overlap ——
   The .hero (sticky) + .overlap-sheet machinery is shared with the home
   page; sticky/rounded-corner/shadow come from the base .overlap-hero rules.
   We only re-tone the sheet: on Work the content below the hero is dark, so
   the sheet rides up as a dark panel (a hair above the ink hero) with a
   hairline lip — the overlap still reads against the dark hero. */
@media (min-width: 768px) {
  .page-work .overlap-sheet {
    background: var(--panel);
    border-top: 1px solid var(--line-onDark);
  }
}

/* —— Hero meta strip under the lede —— */
.page-work .wk-hero-meta {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 12px; margin-top: 36px; padding-top: 22px;
  max-width: 50ch;
  border-top: 1px solid var(--line-onDark);
  font-family: var(--f-mono);
  font-size: 0.76rem; letter-spacing: 0.02em;
  color: var(--text-onDark-muted);
}
.page-work .wk-hero-meta b {
  color: var(--text-onDark); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.page-work .wk-hero-meta .dot {
  width: 4px; height: 4px; border-radius: 999px;
  background: currentColor; opacity: 0.5;
}

/* —— Work cards: editorial index badge + hover lift —— */
.page-work .work-grid { counter-reset: wk; }
.page-work .work-card {
  counter-increment: wk;
  transition: transform 0.5s var(--ease-out);
}
.page-work .work-card:hover { transform: translateY(-6px); }
.page-work .work-card__frame {
  transition: border-color 0.4s var(--ease-out), box-shadow 0.55s var(--ease-out);
}
.page-work .work-card:hover .work-card__frame {
  border-color: var(--text-onDark);
  box-shadow: 0 26px 64px rgba(0,0,0,0.5);
}
.page-work .work-card__frame::before {
  content: counter(wk, decimal-leading-zero);
  position: absolute; top: 14px; left: 16px; z-index: 2;
  font-family: var(--f-mono); font-weight: 500;
  font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--text-onDark);
  padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--line-onDark);
  opacity: 0; transform: translateY(-4px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.page-work .work-card:hover .work-card__frame::before { opacity: 1; transform: none; }
/* hairline under the card meta that wipes bright on hover */
.page-work .work-card__meta { position: relative; padding-bottom: 16px; }
.page-work .work-card__meta::before,
.page-work .work-card__meta::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px;
}
.page-work .work-card__meta::before { width: 100%; background: var(--line-onDark); }
.page-work .work-card__meta::after {
  width: 0; background: var(--text-onDark);
  transition: width 0.6s var(--ease-out);
}
.page-work .work-card:hover .work-card__meta::after { width: 100%; }

/* —— Case-study outcomes → numbered editorial cards (works on dark + invert) —— */
.page-work .dnd-outcomes { counter-reset: oc; }
.page-work .dnd-outcomes > div {
  counter-increment: oc;
  position: relative;
  padding-top: 26px;
  border-top: 1px solid var(--line-onDark);
  transition: transform 0.4s var(--ease-out);
}
.page-work .invert .dnd-outcomes > div { border-top-color: var(--line); }
.page-work .dnd-outcomes > div::before {
  content: counter(oc, decimal-leading-zero);
  display: block; margin-bottom: 14px;
  font-family: var(--f-mono); font-weight: 500;
  font-size: 0.78rem; letter-spacing: 0.06em;
  color: var(--text-onDark-muted);
  transition: color 0.3s var(--ease-out);
}
.page-work .invert .dnd-outcomes > div::before { color: var(--text-muted); }
.page-work .dnd-outcomes > div:hover { transform: translateY(-3px); }
.page-work .dnd-outcomes > div:hover::before { color: var(--text-onDark); }
.page-work .invert .dnd-outcomes > div:hover::before { color: var(--ink); }

/* —— Case-study hero shots: gentle zoom on hover —— */
.page-work .wk-shot img {
  transition: transform 0.9s var(--ease-out);
  will-change: transform;
}
.page-work .wk-shot:hover img { transform: scale(1.035); }

/* —— Case-study sub-pages (work-*.html): back link + fact strip —— */
.page-work .cs-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--text-onDark-muted); margin-bottom: 26px;
  transition: color 0.25s var(--ease-out), gap 0.25s var(--ease-out);
}
.page-work .cs-back:hover { color: var(--text-onDark); gap: 13px; }
.page-work .cs-back svg { transition: transform 0.25s var(--ease-out); }
.page-work .cs-back:hover svg { transform: translateX(-3px); }
.page-work .invert .cs-back { color: var(--text-muted); }
.page-work .invert .cs-back:hover { color: var(--ink); }

.page-work .cs-meta {
  display: grid; gap: 22px 48px; grid-template-columns: 1fr;
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: 26px; border-top: 1px solid var(--line-onDark);
  max-width: 640px;
}
@media (min-width: 620px) { .page-work .cs-meta { grid-template-columns: repeat(3, 1fr); } }
.page-work .cs-meta dt {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-onDark-muted); margin-bottom: 8px;
}
.page-work .cs-meta dd { font-size: 0.95rem; color: var(--text-onDark); line-height: 1.5; }
.page-work .invert .cs-meta { border-top-color: var(--line); }
.page-work .invert .cs-meta dt { color: var(--text-muted); }
.page-work .invert .cs-meta dd { color: var(--ink); }

/* —— Filing-cabinet stack (desktop) ——
   Each panel pins at the top, then the next drawer slides up and covers it.
   Hero (sticky via .overlap-hero) is the base; the grid + CTA are stacked
   drawers with progressively lighter tone + a rounded lip + shadow, so the
   page reads like drawers being pushed shut over one another. */
@media (min-width: 768px) {
  .page-work.cab .cab__drawer {
    position: sticky; top: 0;
    min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    border-top-left-radius: 28px; border-top-right-radius: 28px;
    border-top: 1px solid var(--line-onDark);
    box-shadow: 0 -30px 70px rgba(0,0,0,0.55);
  }
  .page-work.cab .cab__drawer--grid { background: var(--panel); z-index: 1; }
  /* CTA drawer = off-white paper panel (matches index.html .invert sections) */
  .page-work.cab .cab__drawer--cta {
    background: var(--paper); z-index: 2;
    border-top-color: var(--line);
  }
  /* a hairline "drawer pull" highlight sitting just under the rounded lip */
  .page-work.cab .cab__drawer::before {
    content: ''; position: absolute; left: 50%; top: 12px;
    width: 46px; height: 4px; border-radius: 999px;
    background: var(--line-onDark);
    transform: translateX(-50%);
  }
  .page-work.cab .cab__drawer--cta::before { background: var(--line); }
}

/* ============================================================
   PRICING FLIP CARDS  (services.html)
   Front = name + price; hover (desktop) / tap (touch) / Enter
   (keyboard) flips the card to reveal what's included.
   Ported from a uiverse styled-components component into the
   studio's monochrome system — the original orange gradient
   sweep is replaced by a subtle ink/paper rotating rim-glow.
   ============================================================ */
.price.flip {
  padding: 0; border: none; background: none; display: block;
  min-height: 470px; perspective: 1600px;
  cursor: pointer; outline: none;
}
.price.flip:hover { transform: none; box-shadow: none; }   /* the flip replaces the base lift */
.price.flip .flip__inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform 1.4s var(--ease-out);
}
.price.flip:hover .flip__inner,
.price.flip.is-flipped .flip__inner { transform: rotateY(180deg); }
.price.flip:focus-visible { box-shadow: 0 0 0 3px rgba(243,240,234,0.28); border-radius: var(--radius-lg); }

/* Default (non-featured) card matches the site's dark cards: panel surface, light text.
   The featured card is the light/paper one (themed below). Content colours
   (name, amount, features) come from the global .price__* rules. */
.flip__face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 1px solid var(--line-onDark); border-radius: var(--radius-lg);
  background: var(--panel);
  color: var(--text-onDark);
  padding: clamp(26px, 3vw, 34px);
  display: flex; flex-direction: column;
  /* NB: no overflow:hidden here — it triggers a coplanar-backface "page-curl" artifact in Chrome */
}
/* keep the two faces on separate 3D planes — prevents coplanar z-fighting / mirror bleed */
.flip__front { transform: translateZ(1px); }
.flip__grow { flex: 1 1 auto; min-height: 20px; }
.flip__hint {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-onDark-muted);
}
.flip__hint svg { transition: transform 0.3s var(--ease-out); }
.price.flip:hover .flip__hint svg { transform: translateX(4px); }

/* badge sits as an in-flow chip (overflow:hidden faces would clip a negative-offset one) */
.price.flip .price__badge {
  position: static; top: auto; left: auto;
  align-self: flex-start; margin: 0 0 14px;
}

/* Back face — opaque surface (no front-face bleed) */
.flip__back { transform: rotateY(180deg) translateZ(1px); }
.flip__back-body {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column;
}
.flip__back-head {
  font-family: var(--f-display); font-size: 1.5rem; letter-spacing: -0.02em;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line-onDark);
}
.flip__back-head span { font-family: var(--f-mono); font-size: 0.95rem; color: var(--text-onDark-muted); }
.flip__back-body .price__feat { margin: 16px 0 18px; }
.flip__back-body .price__feat li { font-size: 0.9rem; }
.flip__back-body .btn { margin-top: auto; }

/* Featured = the light/paper raised card (matches the global .price.featured rules,
   which already colour its content in ink). */
.price.flip.featured .flip__face { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.price.flip.featured .flip__hint { color: var(--text-muted); }
.price.flip.featured .flip__back-head { border-bottom-color: var(--line); }
.price.flip.featured .flip__back-head span { color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .price.flip .flip__inner { transition: none; }
}

/* Faint brand bolt bleeding off the edge of each pricing card (echoes the hero glyph).
   Drawn with a CSS mask + currentColor so it themes per card and the mask clips it to
   the card edge — no overflow:hidden, which would bring back the flip page-curl. */
:root {
  --bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 328 742'%3E%3Cpath fill='%23fff' d='M260.7,5.0 L116.0,235.0 L141.3,256.7Z M260.7,16.0 L125.0,325.7 L195.7,268.7Z M165.7,129.0 L60.0,265.0 L60.0,270.7 L70.0,292.7Z M135.7,268.0 L110.0,252.0 L1.0,430.7 L99.7,349.7 L135.7,273.7Z M324.7,263.0 L208.0,283.0 L208.0,284.7 L230.0,314.7 L235.3,318.7Z M327.7,265.0 L236.0,336.0 L187.0,443.0 L211.3,464.7Z M194.7,288.0 L110.0,355.0 L135.0,404.7 L224.7,330.7Z M212.7,356.0 L132.0,427.0 L53.0,722.7Z M122.7,410.0 L100.7,368.0 L98.3,367.0 L4.0,433.7 L121.7,411.7Z M261.7,409.0 L144.0,620.7 L273.7,443.7Z M180.7,458.0 L52.0,737.7 L207.7,483.7Z'/%3E%3C/svg%3E");
}
.flip__front::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: currentColor; opacity: 0.055;
  -webkit-mask: var(--bolt) no-repeat right -36px center / auto 162%;
          mask: var(--bolt) no-repeat right -36px center / auto 162%;
}

/* The services overlap-sheet is dark (this is a dark-themed page) — unlike the home
   page's paper sheet — so plain sections inside it keep light text on a dark surface. */
@media (min-width: 768px) {
  .overlap-hero .overlap-sheet--dark { background: var(--panel); }
}

/* Tighter vertical rhythm for the services sheet — crops the big black gaps between
   pricing, the "What we do" carousel and the FAQ. Scoped to this page's sheet only. */
.overlap-sheet--dark .section { padding-block: clamp(44px, 6vw, 84px); }
.overlap-sheet--dark .section--tight { padding-block: clamp(38px, 4.5vw, 64px); }

/* ============================================================
   SERVICE CAROUSEL  (services.html — "What we do")
   One service shown at a time in a fixed-height viewport; numbered
   tabs on the left jump between them and an auto-advance cycles
   through. Replaces the tall 4-row stack to save vertical space.
   ============================================================ */
.svcc {
  --svcc-h: 410px;
  --svcc-i: 0;
  display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3.5vw, 44px);
  margin-top: clamp(32px, 4vw, 56px);
}
@media (min-width: 860px) { .svcc { grid-template-columns: 0.82fr 1.18fr; align-items: start; --svcc-h: clamp(300px, 28vw, 338px); } }

/* Index rail (tabs) */
.svcc__rail { display: flex; flex-direction: column; }
.svcc__tab {
  position: relative; width: 100%; text-align: left;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 16px 0; border-top: 1px solid var(--line-onDark);
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem); letter-spacing: -0.01em;
  color: var(--text-onDark-muted); cursor: pointer;
  transition: color 0.3s var(--ease-out), padding-left 0.4s var(--ease-out);
}
.svcc__rail li:last-child .svcc__tab { border-bottom: 1px solid var(--line-onDark); }
.svcc__tab-n { font-family: var(--f-mono); font-weight: 500; font-size: 0.78rem; color: var(--text-onDark-muted); transition: color 0.3s; }
.svcc__tab:hover { color: var(--text-onDark); }
.svcc__tab.is-active { color: var(--text-onDark); padding-left: 18px; }
.svcc__tab.is-active .svcc__tab-n { color: var(--text-onDark); }
.svcc__tab::before {
  content: ''; position: absolute; left: 0; top: calc(16px + 0.7em);
  width: 9px; height: 2px; background: var(--text-onDark);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.svcc__tab.is-active::before { transform: scaleX(1); }

/* Sliding viewport */
.svcc__viewport { position: relative; height: var(--svcc-h); overflow: hidden; }
.svcc__track {
  display: flex; flex-direction: column;
  transform: translateY(calc(var(--svcc-i, 0) * var(--svcc-h) * -1));
  transition: transform 0.9s var(--ease-out);
}
.svcc__slide {
  flex: 0 0 var(--svcc-h); height: var(--svcc-h);
  display: flex; flex-direction: column; padding: 4px 8px 24px 0;
}
.svcc__num { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--text-onDark-muted); }
.svcc__title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.02em; line-height: 1.05;
  color: var(--text-onDark); margin: 8px 0 14px;
}
.svcc__desc { color: var(--text-onDark-muted); max-width: 52ch; line-height: 1.6; }
.svcc__list { margin-top: 18px; display: grid; gap: 9px; }
.svcc__list li { position: relative; padding-left: 22px; font-size: 0.95rem; color: var(--text-onDark); }
.svcc__list li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 9px; height: 9px;
  background: var(--text-onDark);
  clip-path: polygon(50% 0, 100% 38%, 62% 100%, 0 62%);
}

/* Progress bar pinned to the bottom of the viewport */
.svcc__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line-onDark); }
.svcc__bar { display: block; height: 100%; background: var(--text-onDark); transform: scaleX(0); transform-origin: left; }

/* "Soon" pill (rail + slide title) */
.svcc__soon {
  font-family: var(--f-mono); font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-onDark-muted);
  border: 1px solid var(--line-onDark); padding: 3px 8px; border-radius: 999px;
  vertical-align: middle; margin-left: 8px; white-space: nowrap;
}
.svcc__title .svcc__soon { font-size: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  .svcc__track { transition: none; }
}

/* ============================================================
   BOTTOM-SECTION SLIDING DRAWER  (the work.html "cab" effect, generalised)
   The second-to-last section (.drawer--under) pins to the top of the
   viewport; the final section (.drawer--over) then rises up and slides
   over it on scroll, with a rounded lip + upward shadow + drawer-pull pill.
   The UNDER section is sticky (kept to ~100vh); the OVER section stays in
   normal flow so a tall section (e.g. a contact form) never gets stuck
   pinned. Desktop only — on mobile the sections just stack normally.
   ============================================================ */
@media (min-width: 768px) {
  .drawer--under {
    position: sticky; top: 0;
    min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    z-index: 5;
  }
  .drawer--over {
    position: relative;
    min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    z-index: 6;
    border-top-left-radius: 28px; border-top-right-radius: 28px;
    box-shadow: 0 -30px 70px rgba(0, 0, 0, 0.55);
    /* bright hairline lip so the edge reads even on a dark-over-dark slide */
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  /* paper (.invert) over-drawer, like work.html's CTA: dark hairline instead */
  .drawer--over.invert { border-top-color: var(--line); }
  /* drawer-pull pill sitting just under the rounded lip */
  .drawer--over::before {
    content: ''; position: absolute; left: 50%; top: 14px;
    width: 46px; height: 4px; border-radius: 999px;
    background: var(--line-onDark); transform: translateX(-50%);
    pointer-events: none; z-index: 1;
  }
  .drawer--over.invert::before { background: var(--line); }
}

/* ============================================================
   CONTRASTING-SEAM SHADOW FADE
   The same soft shadow the work.html drawers cast — applied to every
   place a light section meets a dark one, so the seam reads as a gentle
   fade into shadow rather than a hard cut. Desktop only.

   .section--seam       → a DARK section sitting below a LIGHT one. Casts the
                          drawer shadow UPWARD onto the light section above
                          (this is the look from the reference screenshot).
   .section--seam-light → a LIGHT section sitting below a DARK one. Gets a
                          subtle shadow gradient on its top edge, as if the
                          dark section above casts down onto it.
   ============================================================ */
@media (min-width: 768px) {
  .section--seam {
    position: relative;
    z-index: 2;
    box-shadow: 0 -30px 70px rgba(0, 0, 0, 0.55);
  }
  .section--seam-light {
    position: relative;
    z-index: 2;
  }
  .section--seam-light::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 110px;
    background: linear-gradient(to bottom, rgba(11, 11, 12, 0.40), rgba(11, 11, 12, 0));
    pointer-events: none;
    z-index: 0;
  }
}

/* ============================================================
   GLOBAL 75% SCALE (desktop only)
   The site is designed to read best at ~75% magnification, so we apply a CSS
   zoom on desktop — a browser left at its default 100% then renders at that
   density. CSS `zoom` scales the whole layout INCLUDING viewport units, so
   every element that must fill the viewport (the hero + the sliding drawers)
   divides 100vh by the same factor to compensate and still fill the screen.
   Mobile (<768px) is left at 1:1 so it isn't shrunk to an unreadable size.
   ============================================================ */
@media (min-width: 768px) {
  html { zoom: 0.95; }
  .hero { min-height: calc(100svh / 0.95); }
  /* Only the elements that must FILL the viewport divide by the zoom: the hero,
     the pinned under-drawers, and the work cab's sliding grid. The bottom CTA
     over-drawers are intentionally content-sized (below) so they don't leave a
     big empty band. */
  .drawer--under,
  .page-work.cab .cab__drawer { min-height: calc(100vh / 0.95); }
}

/* Bottom CTA over-drawers: content-sized, not full-viewport. They still rise up
   over the pinned under-section with the rounded lip + shadow, but the section
   is only as tall as its content + padding — no acres of empty space.
   The margin-top adds a stretch of scroll where the under-section sits fully
   settled BEFORE the drawer starts pulling up (the pinned under fills it, so
   there's no visible gap) — the pullover no longer fires the instant you arrive. */
@media (min-width: 768px) {
  .drawer--over { min-height: 0; margin-top: 42vh; }
}

/* ============================================================
   MOBILE ELEGANCE — blur-to-crisp reveals, tighter rhythm
   ============================================================ */
@media (max-width: 767px) {

  /* Content materialises (blur → sharp + subtle rise) rather than flying
     in from 72px — feels far more refined on small screens */
  .reveal {
    transform: translateY(24px);
    filter: blur(6px);
    transition:
      opacity   0.7s  var(--ease-drift),
      transform 0.85s var(--ease-drift),
      filter    0.6s  var(--ease-drift);
  }
  .reveal.in { filter: blur(0); }

  /* Neutralise the ±110px horizontal drift — reads choppy at <390px wide */
  .reveal[data-rise="left"],
  .reveal[data-rise="right"] { transform: translateY(24px); }

  /* Reading beat: 2.3s is too long once scrolling — halve it on mobile */
  .is-home .hero .reveal[data-d="2"] { transition-delay: 1.2s; transition-duration: 1.1s; }

  /* Section headlines: same blur-to-crisp treatment */
  .clip {
    filter: blur(5px);
    transition:
      opacity   0.65s var(--ease-drift),
      transform 0.95s var(--ease-drift),
      filter    0.55s var(--ease-drift);
  }
  .clip.in { filter: blur(0); }

  /* Hero: fill viewport; anchor content near the top-third, not dead-centre */
  .hero { min-height: 100svh; padding-bottom: 80px; justify-content: flex-start; }

  /* Hero CTAs: full-width stack — cleaner and easier to tap */
  .hero__actions { flex-direction: column; gap: 10px; }
  .hero__actions .btn { width: 100%; justify-content: center; }

  /* Tighter section rhythm */
  .section { padding-block: clamp(72px, 16vw, 104px); }
  .section--tight { padding-block: clamp(52px, 12vw, 80px); }
  .kx-head, .section-head { margin-bottom: clamp(36px, 8vw, 56px); }

  /* Service cards: icon + title + tag reads cleanly — drop the paragraph */
  .svc__desc { display: none; }
  .svc { padding: clamp(20px, 5vw, 30px); }
  .svc-grid { gap: 16px; }

  /* Process steps: tighter vertical rhythm */
  .pstep { padding: 22px 0; }

  /* Typography: more commanding on mobile */
  .display { font-size: clamp(2.9rem, 11vw, 5.6rem); }
  .h1 { font-size: clamp(2.2rem, 8.5vw, 3.3rem); }
  .lede { font-size: 1.05rem; line-height: 1.65; }

  /* Hero: tighter sub + actions spacing on small screens */
  .hero__sub  { margin-top: 28px; }
  .hero__actions { margin-top: 40px; }

  /* Section numbers: smaller on mobile so titles dominate */
  .kx-num { font-size: clamp(2rem, 7vw, 3.2rem); }
  .kx-head { gap: 12px; }

  /* Stats: editorial full-width rows — number dominates left, label right */
  .stats {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: clamp(36px, 9vw, 56px);
  }
  .stat {
    display: flex;
    align-items: baseline;
    gap: clamp(16px, 4.5vw, 22px);
    padding: 22px 0;
    border-right: none !important;
    border-bottom: none;
  }
  .stat:last-child { border-bottom: 1px solid var(--line-onDark); }
  .invert .stat:last-child { border-bottom-color: var(--line); }
  .stat__n {
    font-size: clamp(2.8rem, 11vw, 3.8rem);
    min-width: 3.2ch;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 0.88;
  }
  .stat__l { margin-top: 0; flex: 1; font-size: 0.74rem; }

  /* ---- Hero overlap: paper sheet rides up over the pinned dark hero ---- */
  .overlap-hero > .hero {
    position: sticky; top: 0; z-index: 0;
  }
  .overlap-hero .overlap-sheet {
    position: relative; z-index: 1;
    background: var(--paper);
    border-top-left-radius: 28px; border-top-right-radius: 28px;
    box-shadow: 0 -30px 70px rgba(0,0,0,0.55);
  }
  /* Dark-variant sheet (services page) must NOT inherit the cream background */
  .overlap-hero .overlap-sheet--dark {
    background: var(--ink);
    border-radius: 0;
    box-shadow: none;
  }
  /* Work subpages: sheet is dark (var(--panel) on desktop, ink on mobile) */
  .page-work .overlap-sheet {
    background: var(--ink);
    border-radius: 0;
    box-shadow: none;
  }

  /* Drawer: disabled on mobile — sections stack normally to avoid cream CTA
     z-index-bleeding over the dark FAQ section and making text invisible */
}

/* Skip blur for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .clip { filter: none !important; }
}

/* ============================================================
   SERVICE CARDS — compact list rows on mobile
   ============================================================ */
@media (max-width: 767px) {
  .svc-grid { gap: 0; }
  .svc {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--line-soft);
    padding: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    perspective: none;
  }
  .dark .svc { border-bottom-color: rgba(255,255,255,0.08); }
  .svc-grid .svc:first-child { border-top: 1px solid var(--line-soft); }
  .dark .svc-grid .svc:first-child { border-top-color: rgba(255,255,255,0.08); }
  .svc:hover { transform: none; box-shadow: none; }
  .svc::after { display: none; }
  .svc__soon { display: none; }
  .svc__inner { transform-style: flat; }
  .svc.is-flipped .svc__inner { transform: none; }
  .svc__back { display: none; }

  .svc__front {
    display: grid;
    grid-template-columns: 28px 1fr 24px;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    padding: 17px 0;
    position: relative;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }
  .svc__num  { grid-column: 1; grid-row: 1 / 3; align-self: center; font-size: 0.68rem; margin: 0; }
  .svc__icon { display: none; }
  .svc__title { grid-column: 2; grid-row: 1; font-size: 1.02rem; letter-spacing: -0.01em; margin-bottom: 0; }
  .svc__desc  { display: none; }
  .svc__tag   { grid-column: 2; grid-row: 2; margin-top: 3px; padding-top: 0; border-top: none; font-size: 0.65rem; }
  .svc__front::after {
    content: "→";
    grid-column: 3; grid-row: 1 / 3;
    align-self: center;
    justify-self: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    opacity: 0.5;
    position: static;
    pointer-events: none;
  }
  .dark .svc__front::after { color: var(--text-onDark-muted); }
}


/* ---- Hero service chips ---- */
.hero__chips {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.hero__chip {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-onDark-muted);
}
.hero__chip-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-onDark-muted);
  opacity: 0.45;
  flex-shrink: 0;
}

/* ---- Trust strip ---- */
.trust-strip {
  background: var(--paper);
  padding-block: clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--line);
}
.trust-strip__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
}
.trust-strip__item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-inline: clamp(18px, 3vw, 40px);
}
.trust-strip__item:first-child { padding-left: 0; }
.trust-strip__sep {
  width: 1px;
  height: 28px;
  background: var(--line);
  flex-shrink: 0;
}
.trust-strip__k {
  font-family: var(--f-mono);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.trust-strip__v {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
@media (max-width: 560px) {
  .trust-strip__items { gap: 20px 0; }
  .trust-strip__item { padding-inline: 0; width: 50%; }
  .trust-strip__sep { display: none; }
}

/* ---- Mobile hero spacing tightener ---- */
@media (max-width: 760px) {
  .hero__sub     { margin-top: 24px; }
  .hero__actions { margin-top: 32px; }
  .hero__chips   { margin-top: 20px; }
}