/* Traffy lander — site-specific styles
   Layered on top of ../../colors_and_type.css */

/* ============================================================
   SCROLL PROGRESS — thin accent bar at top of viewport
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--c-accent);
  z-index: 300;
  pointer-events: none;
  box-shadow:
    0 0 8px rgba(var(--accent-rgb, 122,78,224), 0.85),
    0 0 20px rgba(var(--accent-rgb, 122,78,224), 0.5);
}

/* CTA ripple animation */
@keyframes cta-ripple {
  to { transform: scale(1); opacity: 0; }
}

/* Smooth hero-inner parallax transition on load */
.hero-inner {
  will-change: transform, opacity;
}

/* Section exit fade */
.section-inner {
  will-change: transform, opacity;
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.section-exited .section-inner {
  opacity: 0;
  transform: translateY(56px);
}

/* Why tiles enter individually */
.why-tile {
  will-change: transform, opacity;
}

/* Source cards get a subtle stagger */
.source-card {
  will-change: transform;
}

/* ============================================================
   GLOBAL: atmosphere
   ============================================================ */
body {
  overflow-x: hidden;
  position: relative;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1200px 700px at 12% -10%, rgba(var(--accent-rgb, 122,78,224), calc(0.18 * var(--atmos-pool, 1))), transparent 60%),
    radial-gradient(900px 600px at 90% 110%, rgba(var(--accent-rgb, 122,78,224), calc(0.10 * var(--atmos-pool, 1))), transparent 60%);
  transition: opacity .4s var(--ease-out);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: calc(0.35 * var(--atmos-grain, 1));
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  transition: opacity .4s var(--ease-out);
}

/* ATMOSPHERE: drenched intensifies pools, grain, and adds bloom shadows */
body[data-atmos="drenched"] {
  --atmos-pool: 2.4;
  --atmos-grain: 1.6;
}
/* Word glow removed by request — the hero logo + italic-purple emphases
   used to carry a purple text-shadow bloom under data-atmos="drenched".
   Keeping the rule slot empty preserves the cascade order for other atmos
   tweaks. */
body[data-atmos="drenched"] .cta-pill {
  box-shadow: 0 0 32px rgba(76, 234, 145, 0.45), 0 0 80px rgba(76, 234, 145, 0.20);
}
/* ATMOSPHERE: stripped kills pools + grain entirely */
body[data-atmos="stripped"] {
  --atmos-pool: 0;
  --atmos-grain: 0;
}
body[data-atmos="stripped"] .header-inner {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* PALETTE: accent swap. CTA stays turquoise (action ≠ brand). */
body[data-palette="cyan"]    { --c-accent: #4cc6f0; --accent-rgb: 76, 198, 240; }
body[data-palette="amber"]   { --c-accent: #f5a84b; --accent-rgb: 245, 168, 75; }
body[data-palette="magenta"] { --c-accent: #ec4899; --accent-rgb: 236, 72, 153; }
body[data-palette="purple"]  { --c-accent: #7a4ee0; --accent-rgb: 122, 78, 224; }
/* hex aliases (TweakColor stores the hex) */
body[data-palette="#7a4ee0"] { --c-accent: #7a4ee0; --accent-rgb: 122, 78, 224; }
body[data-palette="#4cc6f0"] { --c-accent: #4cc6f0; --accent-rgb: 76, 198, 240; }
body[data-palette="#f5a84b"] { --c-accent: #f5a84b; --accent-rgb: 245, 168, 75; }
body[data-palette="#ec4899"] { --c-accent: #ec4899; --accent-rgb: 236, 72, 153; }

/* SURFACE: page background variants.
   dark      — near-black (#0b0b0c)
   grey      — distinctly grey but still dark mode (#1a1a1c)
   alternate — sections alternate dark / grey for visual rhythm
   light     — full inverse: brandbook light-gray (#D9D9D9) bg, dark text
*/
body[data-surface="dark"] { background: var(--c-bg); }
body[data-surface="grey"] { background: #1a1a1c; }
body[data-surface="alternate"] main > section:nth-child(even) {
  background: #1a1a1c;
}
body[data-surface="alternate"] main > section:nth-child(odd) {
  background: var(--c-bg);
}

/* Light mode — flips text/surfaces using the brand light-gray. */
body[data-surface="light"] {
  background: #D9D9D9;
  --c-bg:        #D9D9D9;
  --c-bg-soft:   #c9c9c9;
  --c-bg-lift:   #bcbcbc;
  --c-fg:        #0b0b0c;
  --c-fg-dim:    #4d4e4e;
  --c-fg-mute:   #8a8a8d;
  --c-hairline:  rgba(11,11,12,0.10);
  color: #0b0b0c;
}
/* Light: invert the white-on-transparent logos so they read on the light bg. */
body[data-surface="light"] .brand-mark,
body[data-surface="light"] img.hero-logo {
  filter: invert(1);
}
/* Header capsule — light glass instead of dark glass */
body[data-surface="light"] .header-inner {
  background: rgba(255,255,255,0.55);
  border-color: rgba(11,11,12,0.10);
  box-shadow: 0 8px 32px rgba(11,11,12,0.08);
}
body.scrolled[data-surface="light"] .header-inner {
  background: rgba(255,255,255,0.85);
  border-color: rgba(11,11,12,0.14);
}
body[data-surface="light"] .nav a { color: #0b0b0c; }
body[data-surface="light"] .lang { color: #4d4e4e; }
body[data-surface="light"] .lang button[aria-pressed="true"] { color: #0b0b0c; }

body[data-surface="light"] .hero-title { color: #0b0b0c; }
body[data-surface="light"] .hero-aura span:nth-child(3) {
  background: radial-gradient(closest-side, rgba(11,11,12,0.06), transparent 70%);
}

/* Body grain + section halo are too noisy on light bg — soften */
body[data-surface="light"]::after { opacity: 0.12; mix-blend-mode: multiply; }
body[data-surface="light"] .section::after { opacity: 0.5; }

/* Why tiles on light */
body[data-surface="light"] .why-tile {
  background: linear-gradient(160deg,
    rgba(11,11,12,0.04) 0%,
    rgba(11,11,12,0.02) 40%,
    rgba(11,11,12,0.0) 100%),
    #cfcfcf;
  border-color: rgba(11,11,12,0.12);
}
body[data-surface="light"] .why-tile-num { color: #0b0b0c; }
body[data-surface="light"] .why-tile-desc { color: #4d4e4e; }
body[data-surface="light"] .why-tile-kicker { color: #8a8a8d; }
body[data-surface="light"] .why-tile-feature {
  background:
    radial-gradient(closest-side at 78% 30%,
      rgba(var(--accent-rgb, 122,78,224), 0.20),
      transparent 70%),
    #cfcfcf;
}

/* Cases cards on light */
body[data-surface="light"] .case-card {
  background: #cfcfcf;
  border-color: rgba(11,11,12,0.12);
}

/* Same grey card on light surface for service columns, mtt cards,
   creative-stack, and library items so all frames feel cohesive. */
body[data-surface="light"][data-services-layout="columns"] .service-row,
body[data-surface="light"][data-mtt-layout="cards"] .mtt-item,
body[data-surface="light"][data-creatives-layout="stack"] .creative-item,
body[data-surface="light"] .lib-item,
body[data-surface="light"] .study-case,
body[data-surface="light"] .study-frame {
  background: #cfcfcf;
  border-color: rgba(11,11,12,0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-surface="light"][data-services-layout="columns"] .service-row:last-child {
  border-bottom-color: rgba(11,11,12,0.12);
}
/* Bullet pills inside service columns on light */
body[data-surface="light"][data-services-layout="columns"] .service-bullets li,
body[data-surface="light"][data-mtt-layout="cards"] .mtt-item ul li {
  background: rgba(11,11,12,0.06);
  border-color: rgba(11,11,12,0.14);
  color: #1a1a1c;
}
/* Tone text inside the now-light grey cards */
body[data-surface="light"][data-services-layout="columns"] .service-body h3,
body[data-surface="light"][data-mtt-layout="cards"] .mtt-item h3,
body[data-surface="light"][data-creatives-layout="stack"] .creative-item h3 { color: #0b0b0c; }
body[data-surface="light"][data-services-layout="columns"] .service-payoff,
body[data-surface="light"][data-mtt-layout="cards"] .mtt-item li,
body[data-surface="light"][data-creatives-layout="stack"] .creative-item p { color: #4a4a4d; }
body[data-surface="light"] .case-card .summary,
body[data-surface="light"] .case-card .head h3 { color: #0b0b0c; }
body[data-surface="light"] .case-card .glyph { border-color: rgba(11,11,12,0.16); color: #4d4e4e; }
body[data-surface="light"] .case-card:hover .glyph { border-color: #0b0b0c; color: #0b0b0c; }
body[data-surface="light"] .lib-tab {
  border-color: rgba(11,11,12,0.16);
  color: #4d4e4e;
}
body[data-surface="light"] .lib-tab.is-active {
  background: #0b0b0c;
  border-color: #0b0b0c;
  color: #D9D9D9;
}
body[data-surface="light"] .lib-item { border-color: rgba(11,11,12,0.12); }
body[data-surface="light"] .lib-item .label {
  background: rgba(255,255,255,0.85);
  color: #0b0b0c;
  backdrop-filter: blur(8px);
}

/* Section rule + sources */
body[data-surface="light"] .source-logo { color: #4d4e4e; }
body[data-surface="light"] .source-logo:hover { color: var(--c-accent); }

/* Contacts on light */
body[data-surface="light"] .person-col h4 { color: #4d4e4e; }
body[data-surface="light"] .person-col .divider { background: rgba(11,11,12,0.18); }
body[data-surface="light"] .person-row .avatar {
  background: rgba(11,11,12,0.06);
  border-color: rgba(11,11,12,0.10);
}
body[data-surface="light"] .person-row .name-line {
  color: #0b0b0c;
  text-decoration-color: #0b0b0c;
}
body[data-surface="light"] .person-row .li-chip {
  background: rgba(11,11,12,0.10);
  color: #0b0b0c;
}
body[data-surface="light"] .person-row .email { color: #4d4e4e; }
body[data-surface="light"] .legal-block .name { color: #0b0b0c; }
body[data-surface="light"] .legal-block { color: #4d4e4e; }
body[data-surface="light"] .contacts-footer {
  border-top-color: rgba(11,11,12,0.12);
  color: #4d4e4e;
}
body[data-surface="light"] .contacts-footer a {
  color: #0b0b0c;
  text-decoration-color: #0b0b0c;
}
body[data-surface="light"] .contacts::before { display: none; }

/* CTA pill stays green on light — it's the action color */
/* About + Services + MTT bodies on light */
body[data-surface="light"] .about-body p,
body[data-surface="light"] .service-row .service-body h3,
body[data-surface="light"] .service-row .service-bullets li,
body[data-surface="light"] .mtt-item h3,
body[data-surface="light"] .mtt-item li,
body[data-surface="light"] .creative-item h3,
body[data-surface="light"] .creative-item p,
body[data-surface="light"] .services-head h2,
body[data-surface="light"] .mtt-head h2,
body[data-surface="light"] .creatives-head h2,
body[data-surface="light"] .why-head h2,
body[data-surface="light"] .cases-head h2 {
  color: inherit;
}

/* ============================================================
   REVEAL — keyframe animations on .in-view. The hook adds .in-view
   to each .reveal as it enters the viewport. Variants set via
   <body data-anim="fade|slide|scale|glitch">.
   A JS fallback (in chrome.jsx) detects paused animations and
   snaps elements to their end state so static screenshot tools
   still show the content.
   ============================================================ */
.reveal { opacity: 0; }
.reveal.in-view {
  /* AdSkill-style fade-up — short duration (--rv-dur), CSS 'ease' curve via
     --ease-out (cubic-bezier(.25,.1,.25,1)), no blur. Per-element stagger
     comes from --rv-d, set by useReveals(). */
  animation: rv-fade var(--rv-dur) var(--ease-out) var(--rv-d, 0ms) both;
}
body[data-anim="slide"] .reveal.in-view {
  animation: rv-slide var(--rv-dur) var(--ease-out) var(--rv-d, 0ms) both;
}
body[data-anim="scale"] .reveal.in-view {
  animation: rv-scale 700ms cubic-bezier(.34,1.4,.5,1) var(--rv-d, 0ms) both;
}
body[data-anim="glitch"] .reveal.in-view {
  animation: rv-glitch 600ms steps(8, end) var(--rv-d, 0ms) both;
}

@keyframes rv-fade {
  /* Clean AdSkill-style fade-up: opacity + translateY only, no blur.
     Distance honours --rv-dist so it stays in sync with the slide variant. */
  0%   { opacity: 0; transform: translateY(var(--rv-dist, 30px)); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes rv-slide {
  /* Vertical fade-up — distance pulled from --rv-dist so the token can
     drive both rv-fade and rv-slide consistently. */
  0%   { opacity: 0; transform: translateY(var(--rv-dist, 30px)); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes rv-scale {
  0%   { opacity: 0; transform: scale(.92); filter: blur(4px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes rv-glitch {
  0%   { opacity: 0; transform: translate(-6px, 0); clip-path: inset(40% 0 40% 0); }
  20%  { opacity: 1; transform: translate( 4px,-2px); clip-path: inset(10% 0 60% 0); }
  40%  { transform: translate(-3px, 2px); clip-path: inset(60% 0 10% 0); }
  60%  { transform: translate( 2px, 0); clip-path: inset(20% 0 40% 0); }
  100% { opacity: 1; transform: none; clip-path: inset(0); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; }
  .reveal.in-view { animation: none !important; }
}
/* Snap fallback: any .reveal.in-view forced visible via class */
.reveal.in-view.snap {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  animation: none !important;
}

/* ============================================================
   HEADER capsule
   ============================================================ */
.site-header {
  position: fixed;
  top: 18px;
  left: 0; right: 0;
  z-index: 50;
  padding: 0 var(--pad-x);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.header-inner {
  width: 100%;
  max-width: var(--max-w);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  background: var(--cap-bg);
  border: 1px solid var(--cap-stroke);
  backdrop-filter: blur(var(--cap-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--cap-blur)) saturate(140%);
  border-radius: var(--r-cap);
  padding: 10px 12px 10px 28px;
  transition: background .25s var(--ease), border-color .25s var(--ease);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}
body.scrolled .header-inner {
  background: var(--cap-bg-scrolled);
  border-color: var(--cap-stroke-scrolled);
}
.brand {
  font-family: var(--ff);
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--c-fg);
  text-decoration: none;
  line-height: 1;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
}
.brand-mark {
  height: 22px;
  width: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* ============================================================
   On-site surface toggle: a tiny two-dot pill that flips
   between dark and grey backgrounds. Lives in the header next
   to the language switcher.
   ============================================================ */
.surface-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  padding: 5px 8px;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.surface-toggle:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}
.surface-toggle .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
  border: 1px solid rgba(255,255,255,0.18);
  transition: outline .2s var(--ease);
  outline: 0 solid transparent;
  outline-offset: 1px;
}
.surface-toggle .dot-dark { background: #0b0b0c; }
.surface-toggle .dot-grey { background: #b8b8b8; }
.surface-toggle .dot-light { background: #D9D9D9; }
body[data-surface="dark"] .surface-toggle .dot-dark,
body[data-surface="alternate"] .surface-toggle .dot-dark {
  outline: 2px solid var(--c-accent);
}
body[data-surface="grey"] .surface-toggle .dot-grey {
  outline: 2px solid var(--c-accent);
}
body[data-surface="light"] .surface-toggle .dot-light {
  outline: 2px solid var(--c-accent);
}
/* Light surface — invert chrome to read on light bg */
body[data-surface="light"] .surface-toggle {
  background: rgba(11,11,12,0.06);
  border-color: rgba(11,11,12,0.12);
}
body[data-surface="light"] .surface-toggle:hover {
  background: rgba(11,11,12,0.10);
  border-color: rgba(11,11,12,0.18);
}
body[data-surface="light"] .surface-toggle .dot {
  border-color: rgba(11,11,12,0.18);
}

/* ============================================================
   HEADER VARIANTS — body[data-header]
   capsule (default): floating pill
   flush:             full-width thin bar pinned to top, no capsule
   pinned:            taller bar with bigger logo, integrated background
   ============================================================ */
body[data-header="flush"] .site-header {
  top: 0;
  padding: 0;
}
body[data-header="flush"] .header-inner {
  max-width: none;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--c-hairline);
  background: rgba(11,11,12,0.72);
  padding: 14px clamp(20px, 4vw, 56px);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: none;
}
body[data-header="pinned"] .site-header {
  top: 0;
  padding: 0;
}
body[data-header="pinned"] .header-inner {
  max-width: none;
  border-radius: 0;
  border: 0;
  background: transparent;
  padding: 24px clamp(20px, 4vw, 56px);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  gap: 56px;
}
body[data-header="pinned"] .brand-mark { height: 32px; }
body.scrolled[data-header="pinned"] .header-inner {
  background: rgba(11,11,12,0.72);
  border-bottom: 1px solid var(--c-hairline);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  padding-top: 14px;
  padding-bottom: 14px;
}
.nav { display: flex; gap: 28px; justify-content: center; }
.nav a {
  color: var(--c-fg);
  opacity: 0.78;
  font-size: var(--fs-nav);
  font-weight: 400;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: opacity .2s var(--ease);
  cursor: pointer;
}
.nav a:hover { opacity: 1; }
.header-tools { display: flex; align-items: center; gap: 16px; }
.lang { display: inline-flex; font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.08em; color: var(--c-fg-dim); }
.lang button {
  background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit;
  padding: 6px 4px; cursor: pointer; opacity: 0.55;
  transition: opacity .2s var(--ease), color .2s var(--ease);
}
.lang button:hover { opacity: 0.85; }
.lang button[aria-pressed="true"] { opacity: 1; color: var(--c-fg); }
.lang .sep { padding: 6px 2px; opacity: 0.25; }

/* ============================================================
   HAMBURGER + MOBILE NAV
   ============================================================ */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  padding: 0 9px;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--c-fg);
  border-radius: 2px;
  transition: transform .25s var(--ease-out), opacity .2s var(--ease-out);
  pointer-events: none;
}
.site-header.menu-open .hamburger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.site-header.menu-open .hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.site-header.menu-open .hamburger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile nav — right-side drawer (шторка) */
.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(300px, 82vw);
  background: rgba(10,10,13,0.98);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-left: 1px solid rgba(255,255,255,0.07);
  box-shadow: -24px 0 80px rgba(0,0,0,0.55);
  z-index: 49;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0;
  padding: 100px 32px 40px;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity .3s var(--ease-out), transform .32s var(--ease-out);
  pointer-events: none;
}
.mobile-nav.is-open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
/* Close button inside the drawer */
.drawer-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  background: none;
  color: var(--c-fg);
  font-size: 20px;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0.7;
  transition: opacity .15s var(--ease-out), background .15s var(--ease-out);
}
.drawer-close:hover { opacity: 1; background: rgba(255,255,255,0.07); }

/* Backdrop behind the drawer */
.site-header.menu-open::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 48;
}
.mobile-nav a {
  font-family: var(--ff);
  font-size: clamp(18px, 4.5vw, 24px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--c-fg);
  text-decoration: none;
  opacity: 0.72;
  padding: 12px 0;
  transition: opacity .15s var(--ease-out), color .15s var(--ease-out);
  text-align: left;
  width: 100%;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mobile-nav a:hover { opacity: 1; color: var(--c-accent); }
.mobile-nav-tools {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
  padding-top: 28px;
  width: 100%;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.cta-pill {
  display: inline-flex; align-items: center;
  background: var(--c-cta);
  color: var(--c-cta-fg);
  font-size: var(--fs-nav);
  font-weight: 500;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font-family: var(--ff);
  letter-spacing: 0.01em;
  transition: transform .2s var(--ease), filter .2s var(--ease);
  white-space: nowrap;
}
.cta-pill.large { font-size: 16px; padding: 16px 28px; }
.cta-pill.huge  { font-size: 18px; padding: 18px 36px; box-shadow: 0 0 60px rgba(76,234,145,0.30); }
.cta-pill:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* ============================================================
   SECTION shell + dot label
   ============================================================ */
.section {
  position: relative;
  z-index: var(--z-content);
  padding: 120px var(--pad-x);
}
.section-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
}
.dot-label {
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--c-fg-dim);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.dot-label .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100vh;
  padding: calc(var(--header-h) + 40px) var(--pad-x) 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: var(--z-content);
  overflow: hidden;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.55;
  pointer-events: none;
  filter: saturate(1.15) contrast(1.05);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 50%, black 0%, black 32%, transparent 78%);
          mask-image: radial-gradient(ellipse 72% 62% at 50% 50%, black 0%, black 32%, transparent 78%);
}
body[data-atmos="stripped"] .hero-video { opacity: 0.25; }
body[data-atmos="drenched"] .hero-video { opacity: 0.7; }
body[data-surface="light"] .hero-video {
  mix-blend-mode: multiply;
  opacity: 0.4;
  filter: invert(1) saturate(1.2);
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}
.hero .dot-label { margin-bottom: 48px; }
img.hero-logo {
  display: block;
  width: clamp(260px, 38vw, 600px);
  max-width: 600px;
  height: auto;
  margin: 0 auto;
  user-select: none;
  -webkit-user-drag: none;
  position: relative;
  z-index: 2;
  animation: hero-logo-float 7s ease-in-out infinite;
}
.hero-logo-wrap {
  position: relative;
  margin: 0 auto 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Designerly hero: animated aura behind the logo + word-by-word title */
.hero-aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  display: grid;
  place-items: center;
}
.hero-aura span {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(var(--accent-rgb, 122,78,224), 0.22),
    transparent 70%);
  filter: blur(20px);
}
.hero-aura span:nth-child(1) {
  width: clamp(420px, 60vw, 880px);
  height: clamp(420px, 60vw, 880px);
  animation: aura-breathe 9s ease-in-out infinite;
}
.hero-aura span:nth-child(2) {
  width: clamp(280px, 36vw, 540px);
  height: clamp(280px, 36vw, 540px);
  background: radial-gradient(closest-side,
    rgba(var(--accent-rgb, 122,78,224), 0.16),
    transparent 70%);
  animation: aura-orbit 14s linear infinite;
}
.hero-aura span:nth-child(3) {
  width: clamp(160px, 22vw, 320px);
  height: clamp(160px, 22vw, 320px);
  background: radial-gradient(closest-side,
    rgba(255, 255, 255, 0.06),
    transparent 70%);
  animation: aura-orbit-reverse 18s linear infinite;
}

@keyframes hero-logo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes aura-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.06); opacity: 1; }
}
@keyframes aura-orbit {
  from { transform: translate(-2%, -1%) rotate(0deg); }
  to   { transform: translate(-2%, -1%) rotate(360deg); }
}
@keyframes aura-orbit-reverse {
  from { transform: translate(3%, 2%) rotate(0deg); }
  to   { transform: translate(3%, 2%) rotate(-360deg); }
}

/* Title word-by-word reveal */
.hero-title {
  font-size: clamp(42px, 5.5vw, 82px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.03em;
  max-width: 18ch;
  color: var(--c-fg);
  position: relative;
  z-index: 2;
  text-wrap: balance;
}
/* "Real growth." emphasis — italic + purple, but light weight (500) so the
   contrast against the heavy display-weight parent is style-driven (italic
   + colour), not weight-driven. Earlier global "headings bold" rule
   pushed this to 900 — overridden here with !important so the cascade
   wins over the later collected ruleset. */
.hero-title em {
  font-style: italic;
  font-weight: 700 !important;
  color: var(--hl, var(--c-accent));
}
.hero-line {
  display: block;
}
.hero-title .hw {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  animation: hero-word-in 700ms cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(600ms + var(--i, 0) * 90ms);
}
@keyframes hero-word-in {
  0%   { opacity: 0; transform: translateY(28px); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
/* CTA button row below the hero title */
.hero-cta-row {
  margin-top: 44px;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
}
body[data-hero-align="left"] .hero-cta-row { justify-content: flex-start; }

/* Hero subtitle + stat */
.hero-sub {
  font-size: clamp(16px, 1.7vw, 20px);
  color: var(--c-fg-dim);
  line-height: 1.6;
  max-width: 560px;
  margin: 28px auto 0;
  position: relative;
  z-index: 2;
}
body[data-hero-align="left"] .hero-sub { margin-left: 0; text-align: left; }
.hero-stat {
  margin-top: 24px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
.stat-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 18px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}
.stat-chip strong {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-fg);
  line-height: 1;
}
.stat-chip em {
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-fg-dim);
  opacity: 0.7;
}
/* Clients single-row strip in Hero */
.hero-clients {
  margin-top: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  position: relative;
  z-index: 2;
}
body[data-hero-align="left"] .hero-clients { justify-content: flex-start; }
.hero-client-logo {
  height: 28px;
  opacity: 0.45;
  transition: opacity .2s ease;
  filter: brightness(0) invert(1);
}
.hero-client-logo:hover { opacity: 0.75; }
.hero-client-logo img {
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Foot line — tagline below the title */
.hero-foot {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-fg-mute);
  margin-top: 52px;
  position: relative;
  z-index: 2;
}

/* The hero kicker pulses in on load */
.hero-kicker.reveal {
  animation: hero-kicker-in 700ms cubic-bezier(.16,1,.3,1) 200ms both;
}
.hero-kicker .dot {
  animation: kicker-dot-pulse 2.4s ease-in-out infinite 1.5s;
}
@keyframes hero-kicker-in {
  0%   { opacity: 0; transform: translateY(-12px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes kicker-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 122,78,224), 0.0),
                         0 0 8px 0  rgba(var(--accent-rgb, 122,78,224), 0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(var(--accent-rgb, 122,78,224), 0.0),
                         0 0 14px 0 rgba(var(--accent-rgb, 122,78,224), 0.85); }
}
/* hero-logo wrapper itself rides in */
.hero-logo-wrap.reveal {
  animation: hero-logo-in 1200ms cubic-bezier(.2,.8,.2,1) 300ms both;
}
@keyframes hero-logo-in {
  0%   { opacity: 0; transform: scale(0.92) translateY(16px); filter: blur(8px); }
  100% { opacity: 1; transform: scale(1)    translateY(0);    filter: blur(0); }
}

/* ============================================================
   ABOUT (two-column)
   ============================================================ */
.about-inner {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(0, 2.2fr);
  gap: var(--gutter);
  align-items: start;
}
/* When block labels are hidden by tweak, drop the empty label column so the
   body uses the full content width. Without this the body collapses into the
   narrow 1fr column and the inner 2-paragraph grid becomes unreadable. */
body[data-block-labels="off"] .about-inner,
body[data-block-labels="off"] .services-head,
body[data-block-labels="off"] .cases-head,
body[data-block-labels="off"] .why-head,
body[data-block-labels="off"] .mtt-head {
  grid-template-columns: 1fr;
}
.about-label {
  position: sticky;
  top: 120px;
}
.about-body {
  font-size: var(--fs-lead);
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--c-fg);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 36px);
  max-width: none;
}
.about-body em { font-style: italic; color: var(--c-accent); font-weight: 500; }
.about-body p { margin: 0; }
.about-body p + p {
  color: var(--c-fg-dim);
  font-size: 0.78em;
}
@media (max-width: 900px) {
  .about-body {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .about-body p + p {
    /* On narrow screens fall back to stacked rhythm. */
    margin-top: 8px;
  }
}

/* ============================================================
   SERVICES
   ============================================================ */
.services-head {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(0, 2.2fr);
  gap: var(--gutter);
  align-items: end;
  margin-bottom: 80px;
}
.services-head h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--c-fg);
  /* Inter Tight at weight 800 is wider than the old Inter 500; bump max-width
     so "Full-Service In-App" fits on a single line as in the brand reference. */
  max-width: 26ch;
}
.service-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(0, 2.2fr);
  gap: var(--gutter);
  padding: 56px 0;
  border-top: 1px solid var(--c-hairline);
  align-items: start;
}
.service-row:last-child { border-bottom: 1px solid var(--c-hairline); }
.service-num {
  font-family: var(--ff);
  font-weight: 500;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--c-fg);
}
.service-body h3 {
  font-family: var(--ff);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-fg);
  margin-bottom: 24px;
}
.service-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}
.service-bullets li {
  font-size: var(--fs-body);
  color: var(--c-fg-dim);
  line-height: 1.5;
  display: flex;
  gap: 12px;
}
.service-bullets li::before {
  content: '–';
  color: var(--c-fg-mute);
}
.service-payoff {
  font-style: italic;
  color: var(--c-accent);
  font-size: var(--fs-body);
  font-weight: 500;
}
.service-payoff::before { content: '→  '; color: var(--c-fg-mute); font-style: normal; }

/* ============================================================
   MORE THAN TRAFFIC
   ============================================================ */
.mtt-head { margin-bottom: 56px; }
.mtt-head h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--c-fg);
  margin-top: 18px;
  max-width: 22ch;
}
.mtt-head .sub {
  font-size: var(--fs-h3);
  color: var(--c-fg-dim);
  margin-top: 8px;
  font-weight: 400;
}
.mtt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}
.mtt-item {
  border-top: 1px solid var(--c-hairline);
  padding: 40px 32px 40px 0;
}
.mtt-item h3 {
  font-family: var(--ff);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-h3);
  color: var(--c-fg);
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}
.mtt-item ul { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.mtt-item li { font-size: 15px; color: var(--c-fg-dim); line-height: 1.5; }
.mtt-item .pay { font-style: italic; color: var(--c-accent); font-size: 15px; }
.mtt-item .pay::before { content: '→  '; color: var(--c-fg-mute); font-style: normal; }

/* ============================================================
   CREATIVES
   ============================================================ */
.creatives-head { margin-bottom: 56px; }
.creatives-head h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--c-fg);
  margin-top: 18px;
  max-width: 22ch;
}
.creatives-head .sub {
  font-size: var(--fs-h3);
  color: var(--c-fg-dim);
  font-style: italic;
  margin-top: 8px;
}
.creatives-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}
.creative-item {
  border-top: 1px solid var(--c-hairline);
  padding: 40px 32px 40px 0;
}
.creative-num {
  font-family: var(--ff);
  font-weight: 500;
  font-size: 18px;
  color: var(--c-accent);
  font-style: italic;
  margin-bottom: 16px;
}
.creative-item h3 {
  font-family: var(--ff);
  font-weight: 500;
  font-size: var(--fs-h3);
  color: var(--c-fg);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.creative-item p {
  font-size: 15px;
  color: var(--c-fg-dim);
  line-height: 1.55;
}

/* ============================================================
   CASES — branching block
   ============================================================ */
.cases-head { margin-bottom: 56px; }
.cases-head h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--c-fg);
  margin-top: 18px;
}
.cases-head .sub {
  font-size: var(--fs-h3);
  color: var(--c-fg-dim);
  margin-top: 8px;
}
.verticals-wrap {
  position: relative;
  padding: 80px 0;
}
.verticals-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.verticals {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  row-gap: 80px;
  column-gap: var(--gutter);
}
.vertical {
  text-align: center;
}
.vertical .name {
  font-family: var(--ff);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: -0.02em;
  color: var(--c-fg);
  margin-bottom: 8px;
}
.vertical.alt .name { color: var(--c-fg); }
.vertical .desc {
  font-size: 14px;
  color: var(--c-fg-dim);
  max-width: 26ch;
  margin: 0 auto;
  line-height: 1.5;
}

.sources-head { margin-top: 80px; margin-bottom: 32px; }
.sources-head h3 {
  font-family: var(--ff);
  font-weight: 500;
  font-size: var(--fs-h3);
  font-style: italic;
  color: var(--c-fg);
}
.sources-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 18px 24px;
  align-items: center;
}
.source-logo {
  height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--c-fg-dim);
  opacity: 0.6;
  filter: grayscale(1);
  transition: color .2s var(--ease), opacity .2s var(--ease), filter .2s var(--ease);
  cursor: default;
  text-align: center;
  line-height: 1;
}
.source-logo:hover {
  color: var(--c-accent);
  opacity: 1;
  filter: none;
  font-style: italic;
}
.sources-flag {
  font-size: 11px;
  color: var(--c-fg-mute);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-top: 32px;
  border-top: 1px dashed var(--c-hairline);
  padding-top: 16px;
  font-weight: 500;
}

/* ============================================================
   WHY TRAFFY — integrated card combining stats + premium sources,
   followed by the clients block.
   ============================================================ */
.why-head { margin-bottom: 64px; }
.why-head h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--c-fg);
  margin-top: 18px;
}

/* ============================================================
   WHY TRAFFY — 4×2 bento per brandbook reference. Each tile is
   a rounded rectangle with a big chunky number top + 2-3 line
   description below. Subtle dark gradient, hairline border,
   gentle hover glow.
   ============================================================ */
.why-head { margin-bottom: 56px; }
.why-head h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--c-fg);
  margin-top: 18px;
}

.why-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 16px;
  position: relative;
}
.why-tile {
  position: relative;
  /* Match Services / Creatives card surface: subtle gradient on transparency,
     no solid #17171a fill, and the same rgba(255,255,255,0.10) hairline. */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.04),
      rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 22px;
  padding: 28px;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 18px 44px rgba(0,0,0,0.45);
  transition: border-color .25s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  overflow: hidden;
}
.why-tile::before {
  content: "";
  position: absolute;
  right: -20%;
  top: -30%;
  width: 80%;
  height: 80%;
  background: radial-gradient(closest-side,
    rgba(var(--accent-rgb, 122,78,224), 0.18),
    transparent 70%);
  pointer-events: none;
  opacity: 0.5;
  transition: opacity .35s var(--ease-out);
}
.why-tile:hover {
  border-color: rgba(var(--accent-rgb, 122,78,224), 0.5);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(var(--accent-rgb, 122,78,224), 0.25),
    0 26px 56px rgba(0,0,0,0.5);
}
.why-tile:hover::before { opacity: 1; }

.why-tile-kicker {
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--hl, var(--c-accent));
  font-weight: 500;
  position: relative;
  z-index: 1;
}
.why-tile-num {
  font-family: var(--ff);
  font-weight: 500;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--c-fg);
  position: relative;
  z-index: 1;
}
.why-tile-desc {
  font-size: 14px;
  color: var(--c-fg-dim);
  line-height: 1.55;
  letter-spacing: 0.005em;
  font-weight: 500;
  max-width: 32ch;
  position: relative;
  z-index: 1;
}

/* "traffy" wordmark inside the Why heading. Uses Inter Tight (same family
   as the surrounding heading set in Inter Tight 800) at italic 600 so the
   x-height aligns with "Why" perfectly. Letter-spacing -0.05em ties it to
   the logo lockup. */
.why .why-head h2 .brand-word {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: -0.05em;
  color: var(--c-fg);
}

/* Feature tile — 30M+. Visually uniform with the rest of the tiles now:
   the previous bright purple radial wash + top accent stripe made the tile
   read as a different border colour. We keep it identical to its siblings
   so the grid feels cohesive. */
.why-tile-feature {
  /* identical to .why-tile background — no override */
}
.why-tile-feature::after { display: none; }
.why-tile-feature .why-tile-num {
  font-size: clamp(40px, 4.4vw, 64px);
  letter-spacing: -0.04em;
  font-weight: 800;
}
.why-tile-feature .why-tile-desc {
  font-size: 15px;
  max-width: 38ch;
}

/* Wide tile — uniform footprint now; just allow its copy to breathe. */
.why-tile-wide .why-tile-desc { max-width: 100%; }

@media (max-width: 1100px) {
  .why-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .why-tiles { grid-template-columns: 1fr; }
}

/* hide legacy why-card chrome — superseded by .why-tiles */
.why-card,
.stats,
.premium-row,
.stat-feature,
.stat-kicker { display: none !important; }
.why-card::before {
  content: '';
  position: absolute;
  right: -10%;
  top: -10%;
  width: 60%;
  height: 60%;
  background: radial-gradient(closest-side,
    rgba(var(--accent-rgb, 122,78,224), 0.15),
    transparent 70%);
  pointer-events: none;
}

.stats {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "a a b"
    "c d e"
    "f f e";
  gap: 1px;
  background: rgba(255,255,255,0.10);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.stats .stat:nth-child(1) { grid-area: a; }
.stats .stat:nth-child(2) { grid-area: b; }
.stats .stat:nth-child(3) { grid-area: c; }
.stats .stat:nth-child(4) { grid-area: d; }
.stats .stat:nth-child(5) { grid-area: e; }
.stats .stat:nth-child(6) { grid-area: f; }

.stats .stat {
  background: rgba(11,11,12,0.55);
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 200px;
  transform: none;
  transition: background .25s var(--ease-out);
  position: relative;
}
.stats .stat:hover {
  background: rgba(var(--accent-rgb, 122,78,224), 0.05);
}

.stat-kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--c-fg-mute);
  font-weight: 500;
}

.stat .num {
  font-family: var(--ff);
  font-weight: 500;
  font-size: clamp(48px, 5.5vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--c-fg);
  margin-top: auto;
}
.stat .num em { font-style: italic; color: var(--hl, var(--c-accent)); font-weight: 600; }
.stat .desc {
  font-size: 13px;
  color: var(--c-fg-dim);
  line-height: 1.55;
  max-width: 32ch;
  letter-spacing: 0.01em;
}

/* Feature stat: 30M+ — gets the dramatic treatment */
.stats .stat-feature {
  min-height: 280px;
  background:
    radial-gradient(closest-side at 75% 35%, rgba(var(--accent-rgb, 122,78,224), 0.18), transparent 70%),
    rgba(11,11,12,0.55);
  position: relative;
}
.stats .stat-feature::before {
  content: "";
  position: absolute;
  left: clamp(28px, 3vw, 44px);
  top: 0;
  width: 48px;
  height: 3px;
  background: var(--hl, var(--c-accent));
  border-radius: 0 0 4px 4px;
  box-shadow: 0 0 16px rgba(var(--accent-rgb, 122,78,224), 0.7);
}
.stats .stat-feature .num {
  font-size: clamp(80px, 9vw, 144px);
  letter-spacing: -0.05em;
}
.stats .stat-feature .desc {
  font-size: 16px;
  max-width: 36ch;
}

/* Premium sources row — integrated INSIDE the why-card, full-width band */
.premium-row {
  margin-top: 20px;
  padding: 28px clamp(28px, 3vw, 44px);
  background: rgba(11,11,12,0.55);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  display: flex;
  align-items: baseline;
  gap: 32px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.premium-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--c-fg-dim);
  font-weight: 500;
  flex-shrink: 0;
}
.premium-list {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  font-size: clamp(18px, 1.8vw, 24px);
  color: var(--c-fg);
}
.premium-list strong {
  font-weight: 600;
  font-style: italic;
  color: var(--c-fg);
}
.premium-list .sep {
  color: var(--c-accent);
  opacity: 0.6;
}

.clients-block { margin-top: 80px; }
.clients-label { margin-bottom: 24px; }

/* legacy classes from older layout — kept for backward compat */
.why-card .sub,
.premium { display: none; }

/* ============================================================
   CONTACTS — cleaner layout, no "let's get started" heading
   ============================================================ */
.cta-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 48px 0 32px;
  text-align: center;
}
.cta-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--ff);
  font-size: clamp(28px, 3.4vw, 56px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--c-fg);
  max-width: 22ch;
}
.cta-copy p:nth-child(2) {
  font-style: italic;
  color: var(--hl, var(--c-accent));
  font-weight: 600;
}
.get-started-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
/* hide any legacy h2 that may have leaked in */
.contacts .get-started > h2,
.contacts > h2 { display: none; }

/* ============================================================
   CONTACTS / FINAL CTA + FOOTER (legacy — superseded by .contacts)
   Kept here only so the .final-cta selector still resolves if any
   leftover element references it. The actual contacts layout is
   styled via .contacts above.
   ============================================================ */
.final-cta {
  min-height: 80vh;
  padding: 120px var(--pad-x);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  position: relative;
  z-index: var(--z-content);
}
.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 600px at 50% 80%, rgba(76,234,145,0.10), transparent 60%);
  pointer-events: none;
}
.final-cta h2 {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-snug);
  max-width: 22ch;
  color: var(--c-fg);
  margin-bottom: 56px;
  position: relative;
}
.final-cta h2 em { font-style: italic; font-weight: 600; color: var(--c-accent); }

.final-lines { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.final-lines svg { width: 100%; height: 100%; }

.footer {
  padding: 80px var(--pad-x) 40px;
  border-top: 1px solid var(--c-hairline);
  position: relative;
  z-index: var(--z-content);
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gutter);
  margin-bottom: 64px;
}
.footer-col h4 {
  font-family: var(--ff);
  font-weight: 500;
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--c-fg-dim);
  margin-bottom: 24px;
}
.footer-col p, .footer-col a {
  font-size: 15px;
  color: var(--c-fg);
  line-height: 1.7;
  text-decoration: none;
  display: block;
}
.footer-col a { opacity: 0.78; transition: opacity .2s var(--ease); }
.footer-col a:hover { opacity: 1; }
.footer-col .muted { color: var(--c-fg-dim); font-size: 14px; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--c-hairline);
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--c-fg-mute);
  font-weight: 500;
}
.footer-bottom .brand-mini {
  font-family: var(--ff);
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  color: var(--c-fg);
  text-transform: none;
  letter-spacing: -0.01em;
}
.footer-bottom .links { display: flex; gap: 20px; }
.footer-bottom a { color: var(--c-fg-mute); text-decoration: none; }
.footer-bottom a:hover { color: var(--c-fg-dim); }

/* ============================================================
   LINE — atmospheric WebGL substitute
   A fixed canvas at z=1 between bg and content. Pure SVG path
   with bloom-ish gaussian blur. Follows cursor in hero only.
   ============================================================ */
.line-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.9;
  transition: opacity .4s var(--ease-out);
}
.ambient-lines {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  display: none;
}
body[data-line="everywhere"] .ambient-lines { display: block; }

/* Accent override: any SVG path/circle painted with the brand purple
   picks up the active palette. White threads (#f5f5f5) stay white. */
.line-canvas path[stroke="#7a4ee0"],
.verticals-svg path[stroke="#7a4ee0"],
.final-lines path[stroke="#7a4ee0"],
.ambient-lines path[stroke="#7a4ee0"] {
  stroke: var(--c-accent);
}
.verticals-svg circle[fill="#7a4ee0"] {
  fill: var(--c-accent);
}

/* LINE PRESENCE */
body[data-line="off"] .line-canvas,
body[data-line="off"] .verticals-svg,
body[data-line="off"] .final-lines,
body[data-line="off"] .ambient-lines { display: none; }
body[data-line="whisper"] .line-canvas { opacity: 0.22; }
body[data-line="whisper"] .verticals-svg { opacity: 0.4; }
body[data-line="whisper"] .final-lines { opacity: 0.4; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 820px) {
  .nav { display: none; }
  .surface-toggle { display: none; } /* designer toggle — hide on mobile */
  .header-inner {
    /* Nav is hidden on mobile so the old "auto 1fr auto" grid leaves tools
       sitting in the empty middle 1fr column instead of pinning right.
       Switch to a two-column layout: brand left, tools hard-right. */
    grid-template-columns: auto auto;
    justify-content: space-between;
    padding: 8px 10px 8px 20px;
    gap: 12px;
  }
  .header-tools { justify-self: end; }
  .cta-pill { padding: 8px 14px; font-size: 13px; }
  .brand { font-size: 18px; }
  .about-inner,
  .services-head,
  .service-row { grid-template-columns: 1fr; gap: 24px; }
  .about-label { position: static; }
  .mtt-grid, .creatives-grid, .verticals, .stats, .footer-cols { grid-template-columns: 1fr; }
  .sources-grid { grid-template-columns: repeat(3, 1fr); }
  .stats .stat { transform: none !important; }
}

/* ============================================================
   NEW: SECTION TRANSITIONS — wow effect between blocks
   A thin rule draws across the top of each .section as it enters
   view, the kicker rises, the title floods in. The whole block
   feels like it "opens" rather than just appearing.
   ============================================================ */
.section-rule {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0,
    rgba(var(--accent-rgb, 122,78,224), 0.7) 12%,
    rgba(var(--accent-rgb, 122,78,224), 0.7) 88%,
    transparent 100%);
  transform-origin: left center;
  transform: scaleX(0);
  margin-bottom: 52px;
  position: relative;
  z-index: 2;
}
.section-rule.in-view {
  animation: rule-draw 900ms cubic-bezier(.2,.8,.2,1) both;
}
.section-rule::after {
  content: '';
  position: absolute;
  right: -2px; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  transform: translateY(-50%);
  box-shadow: 0 0 12px rgba(var(--accent-rgb, 122,78,224), 0.8),
              0 0 28px rgba(var(--accent-rgb, 122,78,224), 0.4);
  opacity: 0;
}
.section-rule.in-view::after {
  animation: rule-dot 900ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rule-draw {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
@keyframes rule-dot {
  0%, 70% { opacity: 0; }
  85%     { opacity: 1; transform: translateY(-50%) scale(1.4); }
  100%    { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* Section spacing tightened — each section earns its room via the rule */
.section { padding: 80px var(--pad-x); }

/* ============================================================
   NEW: GLASS CARDS — body[data-glass="on"]
   Wraps the main content blocks in subtle glass-morphism frames.
   ============================================================ */
body[data-glass="on"] .glass-target {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.015));
  border: 1px solid var(--c-card-stroke);
  border-radius: 18px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding: clamp(28px, 4vw, 56px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset,
              0 24px 60px rgba(0,0,0,0.35);
  position: relative;
}
body[data-glass="on"] .glass-target::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb, 122,78,224), 0.12),
    transparent 40%,
    transparent 70%,
    rgba(var(--accent-rgb, 122,78,224), 0.08));
  pointer-events: none;
}
body[data-glass="on"] .service-row {
  border-top: 0;
  margin-bottom: 18px;
}
body[data-glass="on"] .service-row:last-child { border-bottom: 0; }
body[data-glass="on"] .mtt-item,
body[data-glass="on"] .creative-item {
  border-top: 0;
}

/* ============================================================
   NEW: HIGHLIGHT COLOR — body[data-hl="accent" | "green"]
   The italic <em> emphasis can use the brand accent or the
   action green. Set as a CSS var so the existing rules pick it up.
   ============================================================ */
body                       { --hl: var(--c-accent); }
body[data-hl="green"]      { --hl: #4cea91; }
body[data-hl="accent"]     { --hl: var(--c-accent); }

.hero-title em,
.about-body em,
.t-h1 em,
.t-h2 em,
.about-body em,
.cases-head em,
.cases-cta-text em,
.final-cta h2 em,
.stat .num em,
.mtt-item .pay,
.creative-num,
.service-payoff,
.premium em,
.vertical .name em {
  color: var(--hl, var(--c-accent));
}

/* ============================================================
   NEW: CASES — split into Case Library + Case Study
   Two side-by-side cards. Click one to expand inline; the other
   collapses out of the way. A branching line draws into the split
   from above. Sources grid only renders when Library is open.
   ============================================================ */
.cases-branch-wrap {
  position: relative;
  height: 220px;
  margin: 32px 0 -60px;
  z-index: 1;
}
.cases-branch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.cases-branch path,
.cases-branch circle {
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb, 122,78,224), 0.75))
          drop-shadow(0 0 18px rgba(var(--accent-rgb, 122,78,224), 0.45));
}
/* Merge — bottom of Cases, two threads come back into one */
.cases-merge-wrap {
  position: relative;
  height: 220px;
  margin-top: -10px;
  z-index: 1;
}
.cases-merge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.cases-merge path,
.cases-merge circle {
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb, 122,78,224), 0.75))
          drop-shadow(0 0 18px rgba(var(--accent-rgb, 122,78,224), 0.45));
}
body[data-line="off"] .cases-branch,
body[data-line="off"] .cases-merge { display: none; }

.cases-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 24px;
  transition: grid-template-columns .55s cubic-bezier(.2,.8,.2,1);
}
/* When Library is open, give it the whole row; Study collapses out */
.cases.cases-state-library .cases-split { grid-template-columns: 1fr 0fr; }
.cases.cases-state-study   .cases-split { grid-template-columns: 0fr 1fr; }

.case-card {
  position: relative;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.025),
    rgba(255,255,255,0.005));
  border: 1px solid var(--c-card-stroke);
  border-radius: 20px;
  padding: 40px 36px;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color .35s var(--ease-out),
    background .35s var(--ease-out),
    opacity .45s var(--ease-out),
    transform .55s cubic-bezier(.2,.8,.2,1),
    padding .55s cubic-bezier(.2,.8,.2,1);
}
.case-card:hover {
  border-color: rgba(var(--accent-rgb, 122,78,224), 0.45);
  background: linear-gradient(180deg,
    rgba(var(--accent-rgb, 122,78,224), 0.06),
    rgba(255,255,255,0.01));
}
/* Hidden state — collapses out of the grid */
.case-card.is-hidden {
  opacity: 0;
  transform: scale(0.92);
  padding: 0;
  border-color: transparent;
  pointer-events: none;
  min-width: 0;
}
.case-card .head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.case-card .head h3 {
  font-family: var(--ff);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--c-fg);
}
/* Library / Study emphasis uses the secondary brand color (turquoise CTA)
   instead of the default purple accent to give Cases its own visual tag. */
.case-card .head h3 em { font-style: italic; color: var(--c-cta); }
.case-card .glyph {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.16);
  display: grid; place-items: center;
  color: var(--c-fg-dim);
  font-size: 18px;
  flex-shrink: 0;
  transition: transform .35s var(--ease-out), border-color .35s var(--ease-out), color .35s var(--ease-out);
}
.case-card:hover .glyph {
  border-color: var(--c-fg);
  color: var(--c-fg);
}
.case-card.is-open .glyph {
  transform: rotate(45deg);
  border-color: var(--c-accent);
  color: var(--c-accent);
}
.case-card .summary {
  font-size: 14px;
  color: var(--c-fg-dim);
  line-height: 1.6;
  max-width: 42ch;
  letter-spacing: 0.02em;
}

/* expanding panel */
.case-card .panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .6s var(--ease-out);
}
.case-card.is-open .panel { max-height: 1800px; }
.case-card .panel-inner {
  padding-top: 32px;
  margin-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.10);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s var(--ease-out) .15s, transform .5s var(--ease-out) .15s;
}
.case-card.is-open .panel-inner {
  opacity: 1;
  transform: translateY(0);
}

/* Library — verticals tab bar (appears when Library is expanded) */
.lib-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.lib-tab {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--c-fg-dim);
  font-family: var(--ff);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: all .25s var(--ease-out);
}
.lib-tab:hover {
  color: var(--c-fg);
  border-color: rgba(255,255,255,0.24);
}
.lib-tab.is-active {
  color: var(--c-bg);
  background: var(--c-fg);
  border-color: var(--c-fg);
}

/* Library — grid of cases + videos. Wider when expanded full-row. */
.lib-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.cases-state-library .lib-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* ============================================================
   CASE LIBRARY — grouped rows
   Each vertical (Betting / iGaming / Playable) gets its own row of
   exactly 3 cards. Tighter card sizes than the old auto-fill grid
   so video posters don't dominate the viewport.
   ============================================================ */
.lib-groups {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.lib-group-head {
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-fg-dim);
  margin-bottom: 12px;
  padding-left: 4px;
}
/* Video cards fill the row equally — always 3 columns so there's no
   empty space to the right when a vertical has exactly 3 items. */
.lib-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.lib-row .lib-item {
  flex: none;
  width: 100%;
  max-width: none;
}
@media (max-width: 760px) {
  .lib-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
@media (max-width: 480px) {
  .lib-row .lib-item { flex-basis: 100%; }
}
.lib-item {
  position: relative;
  /* Restored to 9/16 — vertical ad creatives' native aspect. Pairs with
     the fullscreen modal expansion on click. */
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  cursor: pointer;
}
.lib-item image-slot { width: 100%; height: 100%; display: block; }
.lib-item .label {
  position: absolute;
  bottom: 12px; left: 14px;
  font-size: 12px;
  color: var(--c-fg);
  font-weight: 500;
  background: rgba(11,11,12,0.65);
  backdrop-filter: blur(8px);
  padding: 5px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  z-index: 2;
}
.lib-item .play {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  color: rgba(255,255,255,0.7);
  pointer-events: none;
  z-index: 2;
}
.lib-item .play svg { width: 36px; height: 36px; opacity: 0.85; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.45)); }

/* Study — single big media */
.study-media {
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
}
.study-media image-slot { width: 100%; height: 100%; display: block; }

/* Cases > sources — appears only when Library expanded */
.cases-sources {
  margin-top: 80px;
}

/* ============================================================
   NEW: CONTACTS — redesign per attached image
   Top: SALES + PR columns with avatar + name + LinkedIn + email
   Mid: big italic "let's get started?" + green CTA + arrow circle
   Bottom right: Legal (AdWave LTD ...)
   Footer bar: traffy mark · WhatsApp · Telegram · LinkedIn · ©2026
   ============================================================ */
.contacts {
  position: relative;
  padding: 80px var(--pad-x) 32px;
  min-height: 100vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  z-index: var(--z-content);
}
.contacts::before {
  content: '';
  position: absolute;
  right: -10%; top: 40%;
  width: 60vw; height: 80vh;
  background: radial-gradient(closest-side, rgba(76,234,145,0.42), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}
.contacts-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 88px);
  min-height: calc(100vh - 112px);
}

/* 1. CTA — centered headline + buttons */
.cta-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: clamp(40px, 6vw, 88px) 0 0;
  text-align: center;
}
.cta-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--ff);
  font-size: clamp(32px, 4vw, 64px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--c-fg);
  max-width: 24ch;
}
.cta-copy p:nth-child(2) {
  font-style: italic;
  color: var(--hl, var(--c-accent));
  font-weight: 600;
}
.get-started-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.cta-pill.huge {
  font-size: 16px;
  padding: 18px 32px;
}
.cta-arrow {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--c-cta);
  border: 0;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--c-cta-fg);
  transition: filter .2s var(--ease), transform .2s var(--ease);
  flex-shrink: 0;
}
.cta-arrow:hover { filter: brightness(1.06); transform: translateY(-1px); }
.cta-arrow svg { width: 22px; height: 22px; }

/* 2. People row — 2 columns, left-aligned */
.contacts-people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  margin-top: clamp(60px, 8vw, 120px);
}
.person-col h4 {
  font-family: var(--ff);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 48px);
  letter-spacing: -0.02em;
  color: var(--c-fg-dim);
  line-height: 1;
  margin-bottom: 20px;
}
.person-col .divider {
  height: 1px;
  background: rgba(255,255,255,0.18);
  margin-bottom: 28px;
}
.person-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* 3. Legal block — right-aligned bottom */
.contacts-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  margin-top: auto;
}
.legal-block {
  grid-column: 2;
  text-align: right;
  font-size: 13px;
  color: var(--c-fg-dim);
  line-height: 1.8;
}
.legal-block .name { color: var(--c-fg); font-weight: 500; }

/* 4. Footer — 3 cols, brand left / links center / copy right */
.contacts-footer {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  font-size: 13px;
  color: var(--c-fg-dim);
}
.contacts-footer .brand-mark { height: 24px; width: auto; justify-self: start; }
.contacts-footer .center-links {
  display: flex;
  gap: 32px;
}
.contacts-footer a {
  color: var(--c-fg);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: 14px;
  font-weight: 500;
}
.contacts-footer .copy { text-align: right; justify-self: end; color: var(--c-fg-dim); }
.footer-legal {
  grid-column: 1 / -1;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.07);
  text-align: center;
  font-size: 11px;
  color: var(--c-fg-dim);
  opacity: 0.55;
  line-height: 1.7;
}

/* hide legacy "get-started" big text + brand-mini chrome */
.contacts h2,
.contacts-footer .brand-mini,
.contacts .get-started > * { display: none; }
.contacts-footer .brand-mark { display: block; }
.person-col h4 {
  font-family: var(--ff);
  font-weight: 500;
  font-size: clamp(36px, 4.2vw, 64px);
  letter-spacing: -0.02em;
  color: var(--c-fg-dim);
  line-height: 1;
  margin-bottom: 24px;
}
.person-col .divider {
  height: 1px;
  background: rgba(255,255,255,0.18);
  margin-bottom: 32px;
}
.person-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.person-row .avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: transparent;
  border: none;
  overflow: hidden;
  flex-shrink: 0;
}
.person-row .avatar image-slot {
  width: 100%; height: 100%; display: block;
}
.person-row .who {
  display: flex; flex-direction: column; gap: 4px;
}
.person-row .name-line {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--c-fg);
  text-decoration: underline;
  text-decoration-color: var(--c-fg);
  text-underline-offset: 4px;
}
.person-row .name-line .li-chip {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  text-decoration: none;
  font-size: 11px;
  color: var(--c-fg);
}
.person-row .email {
  font-size: 14px;
  color: var(--c-fg-dim);
}

/* Person cards — photo + info in a glass frame */
.contacts-people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(60px, 8vw, 120px);
}
.person-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 28px 28px 24px;
  border-radius: 20px;
  background:
    linear-gradient(160deg,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0.02) 100%),
    rgba(18,18,22,0.9);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 20px 48px rgba(0,0,0,0.45);
  backdrop-filter: blur(16px);
}
.person-card-main {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-bottom: 20px;
}
.person-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(var(--accent-rgb, 122,78,224), 0.5);
  box-shadow: 0 0 0 5px rgba(var(--accent-rgb, 122,78,224), 0.1);
}
.person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.person-card-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.person-card-name {
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-fg);
  line-height: 1.2;
}
.person-card-subrole {
  font-size: 13px;
  font-weight: 400;
  color: var(--c-fg-dim);
  opacity: 0.7;
}
.person-card-role {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 16px;
  opacity: 0.85;
}
.person-card-divider {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin-bottom: 16px;
}
.person-card-email {
  font-size: 15px;
  color: var(--c-fg-dim);
  text-decoration: none;
  margin-bottom: 16px;
  transition: color .2s ease;
}
.person-card-email:hover { color: var(--c-fg); }
.person-card-links {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.person-card-links a {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-fg-dim);
  text-decoration: none;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.person-card-links a:hover {
  color: var(--c-fg);
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.05);
}
.person-card-links .link-chip { display: none; }
/* light surface */
body[data-surface="light"] .person-card {
  background: rgba(240,240,245,0.9);
  border-color: rgba(11,11,12,0.12);
}
body[data-surface="light"] .person-card-name { color: #0b0b0c; }
body[data-surface="light"] .person-card-email { color: #4d4e4e; }
body[data-surface="light"] .person-card-links a { color: #4d4e4e; }

/* middle: get-started block */
.get-started {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 56px;
  padding: 24px 0 48px;
}
.get-started h2 {
  font-family: var(--ff);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(56px, 9vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--c-fg);
  margin: 0 auto;
  text-align: center;
}
.get-started h2 .reg { font-style: normal; font-weight: 500; }
.get-started h2 em   { color: var(--c-fg); font-weight: 500; }

.get-started-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
}
.cta-arrow {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--c-cta);
  border: 0;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--c-cta-fg);
  transition: filter .2s var(--ease), transform .2s var(--ease);
}
.cta-arrow:hover { filter: brightness(1.06); transform: translateY(-1px); }
.cta-arrow svg { width: 26px; height: 26px; }

/* legal bottom-right */
.contacts-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 32px;
}
.legal-block {
  grid-column: 2;
  text-align: right;
  font-size: 13px;
  color: var(--c-fg-dim);
  line-height: 1.8;
}
.legal-block .name { color: var(--c-fg); font-weight: 500; }

/* footer bar */
.contacts-footer {
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  font-size: 13px;
  color: var(--c-fg-dim);
}
.contacts-footer .brand-mini {
  font-size: 22px;
  letter-spacing: -0.01em;
}
.contacts-footer .center-links {
  display: flex;
  justify-content: center;
  gap: 56px;
}
.contacts-footer a {
  color: var(--c-fg);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: 14px;
  font-weight: 500;
}
.contacts-footer .copy { text-align: right; color: var(--c-fg-dim); }

/* ============================================================
   NEW: CONTINUOUS SITE LINE — through every block
   A second SVG, positioned absolutely against the document height,
   draws a wavy vertical curve down the page past the hero. The hero
   line still cursor-follows; this one is steady scenery.
   ============================================================ */
.site-line {
  position: absolute;
  left: 0; right: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.95;
  transition: opacity .4s var(--ease-out);
}
.site-line svg {
  width: 100%; height: 100%; display: block;
}
body[data-line="off"] .site-line { display: none; }
body[data-line="whisper"] .site-line { opacity: 0.25; }

/* Stronger bloom on hero line + site line for the "glow + blur" feel.
   Heavy filter so the line reads as a soft luminous trail, not a solid stroke. */
.line-canvas path {
  filter: drop-shadow(0 0 4px rgba(var(--accent-rgb, 122,78,224), 0.85))
          drop-shadow(0 0 18px rgba(var(--accent-rgb, 122,78,224), 0.55))
          drop-shadow(0 0 50px rgba(var(--accent-rgb, 122,78,224), 0.35))
          blur(0.5px);
}
.site-line path {
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb, 122,78,224), 0.85))
          drop-shadow(0 0 22px rgba(var(--accent-rgb, 122,78,224), 0.55))
          drop-shadow(0 0 70px rgba(var(--accent-rgb, 122,78,224), 0.35))
          blur(0.8px);
}
.ambient-lines path {
  filter: drop-shadow(0 0 8px rgba(var(--accent-rgb, 122,78,224), 0.6))
          drop-shadow(0 0 24px rgba(var(--accent-rgb, 122,78,224), 0.35))
          blur(1px);
}

/* Each section gets a soft purple halo at its right edge where the
   site-line passes through — the "blur frame under each block". */
.section::after {
  content: '';
  position: absolute;
  right: -6%;
  top: 12%;
  width: 36%;
  height: 76%;
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(var(--accent-rgb, 122,78,224), 0.20),
    transparent 70%);
  filter: blur(28px);
  z-index: 0;
  border-radius: 50%;
}
.section { position: relative; }
.section > * { position: relative; z-index: 2; }
body[data-line="off"] .section::after,
body[data-atmos="stripped"] .section::after { display: none; }

/* image-slot styling — full-bleed, dark fallback */
.lib-item image-slot,
.study-media image-slot,
.person-row .avatar image-slot,
.logo-slot image-slot {
  --slot-bg: rgba(255,255,255,0.04);
  --slot-fg: var(--c-fg-dim);
  --slot-radius: 0;
}
.logo-slot image-slot {
  width: 100%; height: 100%;
  --slot-bg: transparent;
}

/* ============================================================
   HERO — LEFT ALIGNMENT VARIANT
   When body[data-hero-align="left"], pull kicker + logo wordmark
   to the left of the content gutter (not fully flush). Title stays
   in flow under the logo.
   ============================================================ */
.hero-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
}
body[data-hero-align="left"] .hero {
  align-items: flex-start;
  text-align: left;
}
body[data-hero-align="left"] .hero-inner {
  align-items: flex-start;
  text-align: left;
}
body[data-hero-align="left"] .hero .dot-label { margin-bottom: 32px; }
body[data-hero-align="left"] img.hero-logo {
  margin: 0;
  width: clamp(360px, 50vw, 600px);
  max-width: 600px;
}
body[data-hero-align="left"] .hero-logo-wrap {
  margin: 0 0 32px;
  justify-content: flex-start;
}
body[data-hero-align="left"] .hero-title {
  text-align: left;
  margin: 0;
  max-width: 16ch;
  font-size: clamp(52px, 7vw, 96px);
  line-height: 1.03;
  font-weight: 700;
  letter-spacing: -0.035em;
}

/* ============================================================
   CURSOR GLOW — blurred drop following the cursor.
   Brighter in hero, dimmed everywhere else (via .outside / .in-hero
   classes set from JS).
   ============================================================ */
.cursor-glow {
  position: fixed;
  left: 0; top: 0;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(closest-side,
    rgba(var(--accent-rgb, 122,78,224), 0.55) 0%,
    rgba(var(--accent-rgb, 122,78,224), 0.20) 35%,
    transparent 70%);
  filter: blur(50px);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .35s var(--ease-out);
  will-change: transform, opacity;
}
.cursor-glow.is-hidden { opacity: 0; }
.cursor-glow.in-hero  { opacity: 1; }
.cursor-glow.outside  { opacity: 0.35; }
/* On light surface, screen blend would wash out — use multiply with a
   gentler color so the drop is visible on the grey background. */
body[data-surface="light"] .cursor-glow {
  mix-blend-mode: multiply;
  background: radial-gradient(closest-side,
    rgba(var(--accent-rgb, 122,78,224), 0.40) 0%,
    rgba(var(--accent-rgb, 122,78,224), 0.15) 35%,
    transparent 70%);
}
body[data-cursor-glow="off"] .cursor-glow { display: none; }

/* ============================================================
   GREY FRAME TINT — body[data-frame-tint="grey"]
   When glass frames are on AND tint is grey, the .glass-target
   chrome flips to a light grey reference look: warm-grey card
   with a soft purple radial glow at the bottom, mimicking the
   reference Binance/Bybit case treatment.
   ============================================================ */
body[data-frame-tint="grey"][data-glass="on"] .glass-target {
  background:
    radial-gradient(120% 60% at 50% 110%,
      rgba(var(--accent-rgb, 122,78,224), 0.30),
      transparent 60%),
    linear-gradient(180deg, rgba(220, 220, 222, 0.92), rgba(195, 195, 200, 0.90));
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.85) inset,
    0 30px 80px rgba(0,0,0,0.50),
    0 6px 16px rgba(0,0,0,0.25);
  color: #1a1a1c;
}
body[data-frame-tint="grey"][data-glass="on"] .glass-target::before {
  background: none; /* drop the brand-tinted overlay — grey card stands alone */
}

/* Cascade: lift text/headings inside grey-tint frames to a near-black */
body[data-frame-tint="grey"][data-glass="on"] .glass-target h2,
body[data-frame-tint="grey"][data-glass="on"] .glass-target h3,
body[data-frame-tint="grey"][data-glass="on"] .glass-target .about-body,
body[data-frame-tint="grey"][data-glass="on"] .glass-target .service-body h3,
body[data-frame-tint="grey"][data-glass="on"] .glass-target .service-num,
body[data-frame-tint="grey"][data-glass="on"] .glass-target .mtt-item h3,
body[data-frame-tint="grey"][data-glass="on"] .glass-target .creative-item h3 {
  color: #1a1a1c;
}
body[data-frame-tint="grey"][data-glass="on"] .glass-target .service-bullets li,
body[data-frame-tint="grey"][data-glass="on"] .glass-target .mtt-item li,
body[data-frame-tint="grey"][data-glass="on"] .glass-target .creative-item p,
body[data-frame-tint="grey"][data-glass="on"] .glass-target .about-body p + p {
  color: #4a4a4d;
}
body[data-frame-tint="grey"][data-glass="on"] .glass-target .service-bullets li::before,
body[data-frame-tint="grey"][data-glass="on"] .glass-target .creative-item .creative-num {
  color: #6c4ed0;
}
body[data-frame-tint="grey"][data-glass="on"] .glass-target em {
  color: #6c4ed0;
}
body[data-frame-tint="grey"][data-glass="on"] .glass-target .service-row { border-color: rgba(11,11,12,0.12); }
body[data-frame-tint="grey"][data-glass="on"] .glass-target .mtt-item,
body[data-frame-tint="grey"][data-glass="on"] .glass-target .creative-item {
  border-color: rgba(11,11,12,0.12);
}

/* Why tiles in grey-tint take a similar treatment so the whole section reads as one system */
body[data-frame-tint="grey"][data-glass="on"] .why-tile {
  background:
    radial-gradient(120% 60% at 50% 110%,
      rgba(var(--accent-rgb, 122,78,224), 0.30),
      transparent 60%),
    linear-gradient(180deg, rgba(220, 220, 222, 0.92), rgba(195, 195, 200, 0.90));
  border-color: rgba(255,255,255,0.85);
  color: #1a1a1c;
}
body[data-frame-tint="grey"][data-glass="on"] .why-tile-num { color: #1a1a1c; }
body[data-frame-tint="grey"][data-glass="on"] .why-tile-desc { color: #4a4a4d; }
body[data-frame-tint="grey"][data-glass="on"] .why-tile-kicker { color: #6c4ed0; }
body[data-frame-tint="grey"][data-glass="on"] .why-tile::before { opacity: 0; }
body[data-frame-tint="grey"][data-glass="on"] .why-tile-feature {
  background:
    radial-gradient(120% 60% at 50% 110%,
      rgba(var(--accent-rgb, 122,78,224), 0.42),
      transparent 60%),
    linear-gradient(180deg, rgba(220, 220, 222, 0.92), rgba(195, 195, 200, 0.90));
}

/* Case cards in grey-tint */
body[data-frame-tint="grey"][data-glass="on"] .case-card {
  background:
    radial-gradient(120% 60% at 50% 110%,
      rgba(var(--accent-rgb, 122,78,224), 0.30),
      transparent 60%),
    linear-gradient(180deg, rgba(220, 220, 222, 0.92), rgba(195, 195, 200, 0.90));
  border-color: rgba(255,255,255,0.85);
}
body[data-frame-tint="grey"][data-glass="on"] .case-card:hover {
  border-color: rgba(255,255,255,0.95);
}
body[data-frame-tint="grey"][data-glass="on"] .case-card .head h3,
body[data-frame-tint="grey"][data-glass="on"] .case-card .summary { color: #1a1a1c; }
body[data-frame-tint="grey"][data-glass="on"] .case-card .summary { color: #4a4a4d; }
body[data-frame-tint="grey"][data-glass="on"] .case-card .glyph {
  border-color: rgba(11,11,12,0.20);
  color: #1a1a1c;
}
body[data-frame-tint="grey"][data-glass="on"] .lib-tab {
  border-color: rgba(11,11,12,0.20);
  color: #4a4a4d;
}
body[data-frame-tint="grey"][data-glass="on"] .lib-tab.is-active {
  background: #1a1a1c;
  border-color: #1a1a1c;
  color: #fff;
}

/* ============================================================
   LOGO MARQUEE — continuous horizontal scroll
   Two rows of logos (clients + sources) gliding in opposite
   directions. No reaction to cursor. Pure CSS animation on
   a duplicated track.
   ============================================================ */
.logo-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 12px 0;
  /* fade out at edges */
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

/* ============================================================
   PROGRESSIVE BLUR — universal edge-fade overlay
   8 stacked layers with backdrop-filter blur(0, 1, 2, … 7px) and a
   gradient mask per layer. Stacked at the edge they form a smooth
   wave of blur intensity instead of an opacity fade.
   The JSX component lives in chrome.jsx as <ProgressiveBlur>.
   ============================================================ */
.progressive-blur {
  position: absolute;
  /* DO NOT set inset/left/right/top here — author positions the overlay
     via wrapper class (e.g. .logo-marquee-edge-left { left: 0 }). Setting
     inset:auto here previously cascaded over the wrapper's left/right
     because of source order, putting every edge at left:auto;right:auto. */
  pointer-events: none;
}
.progressive-blur-layer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.logo-marquee-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: marquee-scroll 48s linear infinite;
  will-change: transform;
}
.logo-marquee-reverse .logo-marquee-track {
  animation-direction: reverse;
  animation-duration: 56s;
}
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track { animation: none; }
}

/* Client logos — real PNG marks */
.client-logo {
  flex: 0 0 auto;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity .25s var(--ease-out);
}
.client-logo img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: invert(1) brightness(1.05);
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
body[data-surface="light"] .client-logo img {
  filter: none;
}
body[data-frame-tint="grey"][data-glass="on"] .client-logo img {
  /* clients block isn't a glass-target itself, so leave invert as is */
}

/* Source logos (text-styled until real marks exist) */
.marquee-logo.source-logo {
  flex: 0 0 auto;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  opacity: 0.55;
  font-family: var(--ff);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--c-fg);
  text-transform: lowercase;
  white-space: nowrap;
  filter: none;
  cursor: default;
}
.marquee-logo.source-logo span {
  display: inline-block;
  line-height: 1;
}
/* Lock the source logos from reacting to cursor — override the existing
   .source-logo hover rules from earlier in the file */
.marquee-logo.source-logo:hover {
  color: var(--c-fg);
  opacity: 0.55;
  filter: none;
  font-style: normal;
}

/* Section heading inside cases-sources */
.cases-sources {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.sources-block-head {
  margin-bottom: 18px;
}

/* ============================================================
   CASES LINE — smoother transitions when state changes
   ============================================================ */
.cases-branch path,
.cases-merge path {
  transition: d .55s cubic-bezier(.2,.8,.2,1);
}
/* When a card is open, the line is solid + emphasized */
.cases-state-library .cases-branch path,
.cases-state-library .cases-merge path,
.cases-state-study .cases-branch path,
.cases-state-study .cases-merge path {
  filter: drop-shadow(0 0 8px rgba(var(--accent-rgb, 122,78,224), 0.85))
          drop-shadow(0 0 22px rgba(var(--accent-rgb, 122,78,224), 0.55));
}

/* ============================================================
   CASE CARD POLISH — when a case is open, hide the action glyph
   so the line into the card reads as the focus indicator.
   ============================================================ */
.case-card.is-open .glyph {
  opacity: 0.4;
}

/* ============================================================
   HERO LINES — decorative SVG inside hero only. Each style has
   its own subtle animation. Sits at z-index 1 between the
   atmospheric bg and the hero content. Lands at x=600 (50%)
   bottom-center so the SiteLine in the About block picks up
   from where these end.
   ============================================================ */
.hero-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.hero { position: relative; }
.hero > .hero-inner { z-index: 2; }

.hero-lines path {
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb, 122,78,224), 0.75))
          drop-shadow(0 0 18px rgba(var(--accent-rgb, 122,78,224), 0.40));
}

/* hide hero-lines when atmosphere stripped, or when palette line is off */
body[data-atmos="stripped"] .hero-lines,
body[data-line="off"] .hero-lines { display: none; }

/* ── trail: slow drift on opacity ── */
.hero-lines-trail .hl-main {
  stroke-dasharray: 0 0;
  animation: hl-drift 9s ease-in-out infinite;
}
.hero-lines-trail .hl-twin {
  animation: hl-drift 11s ease-in-out infinite reverse;
}
@keyframes hl-drift {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ── descend: solid base lines + brighter "comet" pulse rides each one ── */
.hero-lines-descend path.hl-base {
  /* stays solid */
}
.hero-lines-descend path.hl-d {
  /* a single bright comet — 120px visible segment sliding along the ~906px path */
  stroke-dasharray: 120 800;
  stroke-dashoffset: 0;
  animation: hl-rain 5s linear infinite;
}
.hero-lines-descend .hl-d-1 { animation-delay: 0s; animation-duration: 5.5s; }
.hero-lines-descend .hl-d-2 { animation-delay: 1.4s; animation-duration: 6.5s; }
.hero-lines-descend .hl-d-3 { animation-delay: 2.8s; animation-duration: 7.5s; }
@keyframes hl-rain {
  0%   { stroke-dashoffset: 920; }
  100% { stroke-dashoffset: -920; }
}

/* ── orbit: slow rotation of the loop around hero center ── */
.hero-lines-orbit .hl-orbit,
.hero-lines-orbit .hl-orbit-ghost {
  transform-origin: 600px 400px;
  animation: hl-rotate 22s linear infinite;
}
.hero-lines-orbit .hl-orbit-ghost {
  animation-direction: reverse;
  animation-duration: 30s;
}
.hero-lines-orbit .hl-orbit-tail {
  stroke-dasharray: 8 300;
  animation: hl-tail 4s linear infinite;
}
@keyframes hl-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes hl-tail {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -300; }
}

/* ── weave: subtle horizontal drift ── */
.hero-lines-weave .hl-w-1 { animation: hl-weave 9s ease-in-out infinite; }
.hero-lines-weave .hl-w-2 { animation: hl-weave 11s ease-in-out infinite reverse; }
.hero-lines-weave .hl-w-3 { animation: hl-weave 13s ease-in-out infinite; }
@keyframes hl-weave {
  0%, 100% { transform: translateX(0); opacity: 0.7; }
  50%      { transform: translateX(-30px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-lines path,
  .hero-lines .hl-orbit,
  .hero-lines .hl-orbit-ghost { animation: none !important; }
}

/* ============================================================
   CASES — branch line DRAW animation on open.
   The path uses stroke-dasharray equal to its approximate length;
   on .cases-grow class the offset animates from full to 0 — the
   line appears to grow out of the SiteLine into the card.
   ============================================================ */
.cases-grow {
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  animation: cases-grow-draw 700ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes cases-grow-draw {
  to { stroke-dashoffset: 0; }
}
/* Reset transition on path d so the SVG remount handles redraws cleanly */
.cases-branch path,
.cases-merge path { transition: none; }

/* The branch wraps no longer need to reserve height when nothing renders.
   Keep them so the SVG has a stable origin when one IS rendered. */
.cases-branch-wrap,
.cases-merge-wrap {
  pointer-events: none;
}

/* ============================================================
   SOURCES — beautiful static list (no animation)
   3-column grid of numbered items with hairline dividers.
   ============================================================ */
.sources-list {
  margin-top: 24px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.sources-list-item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 24px 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: var(--ff);
  transition: color .2s var(--ease-out);
}
.sources-list-item:hover {
  color: var(--c-accent);
}
.sources-list-num {
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  color: var(--c-fg-mute);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  width: 24px;
  flex-shrink: 0;
}
.sources-list-name {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--c-fg);
  font-style: italic;
}
@media (max-width: 900px) {
  .sources-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .sources-list { grid-template-columns: 1fr; }
}
body[data-surface="light"] .sources-list { border-top-color: rgba(11,11,12,0.10); }
body[data-surface="light"] .sources-list-item { border-bottom-color: rgba(11,11,12,0.08); }
body[data-surface="light"] .sources-list-name { color: #0b0b0c; }
body[data-surface="light"] .sources-list-num { color: #8a8a8d; }
body[data-frame-tint="grey"][data-glass="on"] .sources-list { border-top-color: rgba(11,11,12,0.10); }
body[data-frame-tint="grey"][data-glass="on"] .sources-list-item { border-bottom-color: rgba(11,11,12,0.08); }
body[data-frame-tint="grey"][data-glass="on"] .sources-list-name { color: #1a1a1c; }
body[data-frame-tint="grey"][data-glass="on"] .sources-list-num { color: #6c4ed0; }

/* ============================================================
   CLIENTS — two rows scrolling in opposite directions
   ============================================================ */
.clients-marquees {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.clients-marquees .logo-marquee {
  padding: 8px 0;
}
.clients-marquees .logo-marquee-track {
  gap: 72px;
  animation-duration: 60s;
}
.clients-marquees .logo-marquee-reverse .logo-marquee-track {
  animation-duration: 72s;
}
.clients-marquees .client-logo { height: 40px; }
.clients-marquees .client-logo img { max-width: 180px; }

/* ============================================================
   END
   ============================================================ */

/* ============================================================
   SECTION SIZING — body[data-section-size="full"]
   Each main section becomes at least 100vh, content vertically
   centered. Hero stays as-is (already 100vh-ish). Contacts/footer
   skipped — too tall to force.
   ============================================================ */
body[data-section-size="full"] main > section.section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 80px;
  padding-bottom: 80px;
}
body[data-section-size="full"] main > section.section > .section-rule {
  position: absolute;
  top: 0; left: var(--pad-x); right: var(--pad-x);
  margin: 0;
}
body[data-section-size="full"] main > section.section > .section-inner {
  width: 100%;
  margin: 0 auto;
}

/* ============================================================
   SERVICES — "columns" variant
   5 narrow vertical cards, green number tag at top, title, body,
   bullets as pill-chips. Existing content (i18n) is unchanged —
   only the visual structure is reflowed.
   ============================================================ */
body[data-services-layout="columns"] .services .glass-target {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  background: none !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  /* stretch (not start) so all cards equal the tallest one;
     .service-body flex:1 + .service-bullets margin-top:auto then
     anchor the payoff line to a shared bottom baseline. */
  align-items: stretch;
}
body[data-services-layout="columns"] .services .glass-target::before {
  display: none;
}
body[data-services-layout="columns"] .service-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding: 28px 22px 24px;
  min-height: 260px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 22px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.01));
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  margin-bottom: 0;
  cursor: pointer;
  transition: border-color .25s var(--ease),
              background .25s var(--ease), transform .25s var(--ease);
}
body[data-services-layout="columns"] .service-row:hover {
  border-color: rgba(122, 78, 224, 0.30);
  transform: translateY(-2px);
}
body[data-services-layout="columns"] .service-row.is-open {
  border-color: rgba(122, 78, 224, 0.45);
  background: linear-gradient(180deg,
    rgba(122, 78, 224, 0.10),
    rgba(255, 255, 255, 0.02));
  transform: translateY(-2px);
  cursor: default;
}
body[data-services-layout="columns"] .service-row:last-child {
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
body[data-services-layout="columns"] .service-num {
  font-size: 12px;
  letter-spacing: var(--tracking-wide);
  font-weight: 600;
  color: var(--c-accent);
  line-height: 1;
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: default;
  user-select: none;
}
body[data-services-layout="columns"] .service-chevron {
  width: 16px;
  height: 16px;
  color: var(--c-fg-dim);
  flex-shrink: 0;
  transition: transform 0.3s var(--ease), color 0.2s;
}
body[data-services-layout="columns"] .service-chevron.is-open {
  transform: rotate(180deg);
  color: var(--c-accent);
}
body[data-services-layout="columns"] .service-row {
  cursor: default;
}
body[data-services-layout="columns"] .service-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
body[data-services-layout="columns"] .service-body h3 {
  font-size: clamp(20px, 1.4vw, 26px);
  line-height: 1.15;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
body[data-services-layout="columns"] .service-bullets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
  margin-top: auto;
  /* Hidden at rest — reveals on row hover/focus below. */
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: opacity .35s var(--ease), max-height .4s var(--ease),
              transform .35s var(--ease);
  pointer-events: none;
}
body[data-services-layout="columns"] .service-row.is-open .service-bullets {
  opacity: 1;
  max-height: 400px;
  transform: translateY(0);
  pointer-events: auto;
}
body[data-services-layout="columns"] .service-bullets li {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--c-fg);
  line-height: 1;
  font-style: normal;
}
body[data-services-layout="columns"] .service-bullets li::before {
  content: none;
}
body[data-services-layout="columns"] .service-payoff {
  font-size: 13px;
  margin-top: 4px;
  line-height: 1.4;
  /* Hidden at rest — reveals on row hover/focus with a tiny extra delay. */
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: opacity .35s var(--ease) 60ms, max-height .4s var(--ease) 60ms,
              transform .35s var(--ease) 60ms;
}
body[data-services-layout="columns"] .service-row.is-open .service-payoff {
  opacity: 1;
  max-height: 120px;
  transform: translateY(0);
}
body[data-services-layout="columns"] .service-payoff::before {
  content: "→ ";
  color: var(--c-fg-mute);
  font-style: normal;
}

@media (max-width: 1100px) {
  body[data-services-layout="columns"] .services .glass-target {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  body[data-services-layout="columns"] .services .glass-target {
    grid-template-columns: 1fr;
  }
  body[data-services-layout="columns"] .service-row { min-height: auto; }
}

/* ============================================================
   MTT — "cards" variant
   3 wide rounded cards with prominent title, bullets as chips,
   payoff as footer line.
   ============================================================ */
body[data-mtt-layout="cards"] .mtt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  background: none !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
body[data-mtt-layout="cards"] .mtt-grid::before { display: none; }
body[data-mtt-layout="cards"] .mtt-item {
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* Frameless, left purple accent — visually distinct from Services
     (which keeps the rounded glass card). Anchor on the left edge,
     no background, no full border. */
  padding: 24px 24px 28px 28px;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-left: 1px solid var(--c-accent);
  transition: border-left-color .25s var(--ease), padding-left .25s var(--ease);
}
body[data-mtt-layout="cards"] .mtt-item:hover {
  border-left-color: var(--c-fg);
  padding-left: 32px;
}
body[data-mtt-layout="cards"] .mtt-item h3 {
  font-size: clamp(22px, 1.8vw, 30px);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 0;
}
body[data-mtt-layout="cards"] .mtt-item ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0;
}
body[data-mtt-layout="cards"] .mtt-item ul li {
  font-size: var(--fs-body);
  color: var(--c-fg-dim);
  line-height: 1.5;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  display: flex;
  gap: 12px;
}
body[data-mtt-layout="cards"] .mtt-item ul li::before {
  content: '–';
  color: var(--c-fg-mute);
  flex-shrink: 0;
}
body[data-mtt-layout="cards"] .mtt-item .pay {
  font-size: 14px;
  margin-top: auto;
  padding-top: 4px;
  line-height: 1.4;
}

@media (max-width: 900px) {
  body[data-mtt-layout="cards"] .mtt-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CREATIVES — "stack" variant
   Vertical stack of 3 wide cards.
   ============================================================ */
body[data-creatives-layout="stack"] .creatives-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: none !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
body[data-creatives-layout="stack"] .creatives-grid::before { display: none; }
body[data-creatives-layout="stack"] .creative-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 36px 30px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 22px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.01));
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-top: 1px solid rgba(255,255,255,0.10);
  max-width: 640px;
}
body[data-creatives-layout="stack"] .creative-num {
  font-size: 12px;
  letter-spacing: var(--tracking-wide);
  font-weight: 600;
  color: var(--c-accent);
  font-style: normal;
  margin-bottom: 4px;
}
body[data-creatives-layout="stack"] .creative-item h3 {
  font-size: clamp(22px, 1.8vw, 30px);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
body[data-creatives-layout="stack"] .creative-item p {
  font-size: 15px;
  line-height: 1.6;
}

/* Grey frame tint also re-themes the layout variants */
body[data-frame-tint="grey"][data-glass="on"][data-services-layout="columns"] .service-row,
body[data-frame-tint="grey"][data-glass="on"][data-mtt-layout="cards"] .mtt-item,
body[data-frame-tint="grey"][data-glass="on"][data-creatives-layout="stack"] .creative-item {
  background:
    radial-gradient(120% 60% at 50% 110%,
      rgba(var(--accent-rgb, 122,78,224), 0.30),
      transparent 60%),
    linear-gradient(180deg, rgba(220, 220, 222, 0.92), rgba(195, 195, 200, 0.90));
  border-color: rgba(255,255,255,0.85);
}
body[data-frame-tint="grey"][data-glass="on"][data-services-layout="columns"] .service-row h3,
body[data-frame-tint="grey"][data-glass="on"][data-mtt-layout="cards"] .mtt-item h3,
body[data-frame-tint="grey"][data-glass="on"][data-creatives-layout="stack"] .creative-item h3 {
  color: #1a1a1c;
}
body[data-frame-tint="grey"][data-glass="on"][data-services-layout="columns"] .service-bullets li,
body[data-frame-tint="grey"][data-glass="on"][data-mtt-layout="cards"] .mtt-item ul li {
  background: rgba(11,11,12,0.06);
  border-color: rgba(11,11,12,0.14);
  color: #1a1a1c;
}
body[data-frame-tint="grey"][data-glass="on"][data-creatives-layout="stack"] .creative-item p {
  color: #4a4a4d;
}



/* ============================================================
   CASES — Y-fork lines above the cards
   A single line drops in from the SiteLine and splits into two
   curves landing on top of the Library / Study cards.
   ============================================================ */
.cases-fork-wrap {
  position: relative;
  height: 200px;
  margin: 32px 0 -110px;
  pointer-events: none;
  z-index: 1;
}
.cases-fork {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.cases-fork path {
  filter: drop-shadow(0 0 4px rgba(var(--accent-rgb, 122,78,224), 0.7))
          drop-shadow(0 0 12px rgba(var(--accent-rgb, 122,78,224), 0.35));
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  animation: cases-fork-draw 1.6s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: 0.15s;
}
.cases-fork path:nth-child(2) { animation-delay: 0.35s; }
.cases-fork path:nth-child(3) { animation-delay: 0.35s; }
.cases-fork-wrap.reveal:not(.in) .cases-fork path { animation-play-state: paused; }

@keyframes cases-fork-draw {
  to { stroke-dashoffset: 0; }
}
/* When the line motif is off, hide the fork too */
body[data-line="off"] .cases-fork-wrap { display: none; }
/* The fork should sit above the cards but BEHIND the card border-radius mask */
.cases.cases-state-library .cases-fork-wrap,
.cases.cases-state-study   .cases-fork-wrap {
  opacity: 0.0;
  transform: translateY(-12px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.cases-fork-wrap {
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}

/* ============================================================
   CASE STUDY — structured spec-sheet body
   Two columns: client + general info  |  KPI frames stacked.
   Frames piggy-back on the same surface tokens as .case-card so
   they don't break out when the surface tweak switches.
   ============================================================ */
.study-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.2fr);
  gap: 16px;
}
.study-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Stretch the column to match its sibling height — the right column hosts
     three KPI frames stacked tall; the left column's General Info frame
     should grow to match instead of leaving empty space at the bottom. */
  align-self: stretch;
  min-width: 0;
}
.study-frame {
  position: relative;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.035),
    rgba(255,255,255,0.012));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 22px 22px 24px;
  min-width: 0;
  transition:
    background .35s var(--ease-out);
}
.study-frame + .study-frame { /* (kept for clarity, gap handles spacing) */ }

.study-label {
  font-family: var(--ff-mono, var(--ff));
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--c-fg-dim);
  margin-bottom: 14px;
}
/* The General Info frame on the left grows to fill its column so it lines
   up with the bottom of the right column's stacked KPI frames (no empty
   space below "Model" anymore). */
.study-info-frame { flex: 1; }
.study-client-frame {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 22px 26px;
  /* subtle accent-tinted backdrop so the brand mark area reads as
     a "spotlight" panel rather than a neutral image well */
  background:
    radial-gradient(120% 80% at 50% 0%,
      rgba(var(--accent-rgb, 122,78,224), 0.10) 0%,
      transparent 70%),
    linear-gradient(180deg,
      rgba(255,255,255,0.035),
      rgba(255,255,255,0.012));
}
.study-client-logo {
  position: relative;
  width: 100%;
  height: 120px;
  border-radius: 12px;
  background:
    radial-gradient(80% 100% at 50% 50%,
      rgba(var(--accent-rgb, 122,78,224), 0.18) 0%,
      rgba(var(--accent-rgb, 122,78,224), 0.04) 60%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(255,255,255,0.03),
      rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  display: grid; place-items: center;
  /* inner inset so a wide logo never touches the rounded corners */
  padding: 14px 18px;
}
/* Real-image case-study logo (Binance / Bybit). Falls back to image-slot
   behaviour when img is absent (e.g., for NDA placeholder cases). */
.study-client-logo > img {
  max-width: 78%;
  max-height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.95); /* render as bright wordmark */
}
.study-client-name {
  margin-top: 14px;
  font-family: var(--ff-display);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-fg);
}
/* Subtle corner ticks — borrowed from the Traffy chrome style — replace
   the dashed-box placeholder look from the image-slot defaults. */
.study-client-logo::before,
.study-client-logo::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(var(--accent-rgb, 122,78,224), 0.55);
  pointer-events: none;
}
.study-client-logo::before {
  top: 8px; left: 8px;
  border-right: 0; border-bottom: 0;
}
.study-client-logo::after {
  bottom: 8px; right: 8px;
  border-left: 0; border-top: 0;
}
/* Once the slot is filled, hide the ticks so the logo can breathe */
.study-client-logo:has(image-slot[data-filled])::before,
.study-client-logo:has(image-slot[data-filled])::after {
  opacity: 0;
}
.study-client-logo image-slot {
  width: 100%; height: 100%;
  display: block;
  /* The image-slot's own placeholder chrome (dashed ring + camera glyph)
     would compete with our corner ticks — neutralize via shadow part API */
}
.study-client-logo image-slot::part(ring) { display: none; }
.study-client-logo image-slot::part(frame) { background: transparent; }
.study-client-logo image-slot::part(empty) { color: rgba(255,255,255,0.42); }

/* Section heading common to every frame */
.study-section-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--c-fg);
  margin: 0 0 18px;
}
.study-section-h strong {
  font-weight: 600;
  color: var(--c-fg);
}
.study-section-h .kpi-sub {
  font-weight: 400;
  color: var(--c-fg-dim);
  font-size: 13px;
  letter-spacing: 0;
}
.study-arrow {
  width: 16px; height: 16px;
  color: var(--c-fg);
  flex-shrink: 0;
}

/* Info frame — definition list */
.study-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}
.study-meta-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.study-meta-row dt {
  font-family: var(--ff);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-fg);
  letter-spacing: -0.005em;
}
.study-meta-row dd {
  margin: 0;
  font-size: 13px;
  color: var(--c-fg-dim);
  line-height: 1.5;
}

/* KPI frames */
.study-kpi-frame { padding: 22px 22px 24px; }
.study-kpi-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
}
.study-kpi-row + .study-kpi-row { padding-top: 10px; }
.study-glyph {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: inline-grid; place-items: center;
}
.study-glyph svg { width: 100%; height: 100%; }
.study-kpi-text { display: flex; flex-direction: column; gap: 1px; }
.study-kpi-num {
  font-family: var(--ff);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.025em;
  color: var(--c-fg);
  line-height: 1;
}
.study-kpi-num .pct {
  font-size: 22px;
  margin-left: 2px;
  color: var(--c-fg);
}
.study-kpi-label {
  font-size: 12px;
  color: var(--c-fg-dim);
  letter-spacing: 0.02em;
}
.study-kpi-foot {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 12px;
  color: var(--c-fg-dim);
}

/* Funnel */
.study-funnel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.study-funnel-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.study-funnel-num {
  font-family: var(--ff);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.025em;
  color: var(--c-fg);
  line-height: 1;
}
.study-funnel-num .pct {
  font-size: 20px;
  margin-left: 2px;
}
.study-funnel-label {
  font-size: 12px;
  color: var(--c-fg-dim);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.study-funnel-bar {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(var(--accent-rgb, 122,78,224), 0.55) 0%,
    rgba(var(--accent-rgb, 122,78,224), 0.55) var(--w, 50%),
    rgba(255,255,255,0.06) var(--w, 50%),
    rgba(255,255,255,0.06) 100%);
}

/* Responsive — collapse to single column on narrow */
@media (max-width: 760px) {
  .study-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CASE-STUDY frame surface adaptations
   Mirror the patterns used for .case-card so the frames don't
   stand out when surface / frame-tint switches.
   ============================================================ */

/* Light surface */
body[data-surface="light"] .study-frame {
  background: linear-gradient(180deg,
    rgba(11,11,12,0.025),
    rgba(11,11,12,0.005));
  border-color: rgba(11,11,12,0.12);
}
body[data-surface="light"] .study-client-logo {
  background:
    radial-gradient(80% 100% at 50% 50%,
      rgba(var(--accent-rgb, 122,78,224), 0.18) 0%,
      rgba(var(--accent-rgb, 122,78,224), 0.04) 60%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(11,11,12,0.03),
      rgba(11,11,12,0.01));
  border-color: rgba(11,11,12,0.10);
}
body[data-surface="light"] .study-client-logo image-slot::part(empty) {
  color: rgba(11,11,12,0.45);
}
body[data-surface="light"] .study-kpi-foot {
  border-top-color: rgba(11,11,12,0.08);
}
body[data-surface="light"] .study-funnel-bar {
  background: linear-gradient(90deg,
    rgba(var(--accent-rgb, 122,78,224), 0.55) 0%,
    rgba(var(--accent-rgb, 122,78,224), 0.55) var(--w, 50%),
    rgba(11,11,12,0.08) var(--w, 50%),
    rgba(11,11,12,0.08) 100%);
}

/* Grey-tint glass — match the .case-card grey override */
body[data-frame-tint="grey"][data-glass="on"] .study-frame {
  background:
    radial-gradient(120% 60% at 50% 110%,
      rgba(122,78,224,0.18) 0%,
      transparent 70%),
    linear-gradient(180deg, #e7e7e9, #d6d6d9);
  border-color: rgba(255,255,255,0.85);
}
body[data-frame-tint="grey"][data-glass="on"] .study-frame .study-label,
body[data-frame-tint="grey"][data-glass="on"] .study-frame .study-section-h,
body[data-frame-tint="grey"][data-glass="on"] .study-frame .study-section-h strong,
body[data-frame-tint="grey"][data-glass="on"] .study-frame .study-arrow,
body[data-frame-tint="grey"][data-glass="on"] .study-frame .study-meta-row dt,
body[data-frame-tint="grey"][data-glass="on"] .study-frame .study-kpi-num,
body[data-frame-tint="grey"][data-glass="on"] .study-frame .study-kpi-num .pct,
body[data-frame-tint="grey"][data-glass="on"] .study-frame .study-funnel-num {
  color: #1a1a1c;
}
body[data-frame-tint="grey"][data-glass="on"] .study-frame .study-section-h .kpi-sub,
body[data-frame-tint="grey"][data-glass="on"] .study-frame .study-meta-row dd,
body[data-frame-tint="grey"][data-glass="on"] .study-frame .study-kpi-label,
body[data-frame-tint="grey"][data-glass="on"] .study-frame .study-funnel-label,
body[data-frame-tint="grey"][data-glass="on"] .study-frame .study-kpi-foot {
  color: #4a4a4d;
}
body[data-frame-tint="grey"][data-glass="on"] .study-client-logo {
  background:
    radial-gradient(80% 100% at 50% 50%,
      rgba(122,78,224,0.22) 0%,
      rgba(122,78,224,0.05) 60%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(11,11,12,0.03),
      rgba(11,11,12,0.01));
  border-color: rgba(11,11,12,0.12);
}
body[data-frame-tint="grey"][data-glass="on"] .study-client-logo image-slot::part(empty) {
  color: rgba(11,11,12,0.55);
}
body[data-frame-tint="grey"][data-glass="on"] .study-kpi-foot {
  border-top-color: rgba(11,11,12,0.10);
}
body[data-frame-tint="grey"][data-glass="on"] .study-funnel-bar {
  background: linear-gradient(90deg,
    rgba(122,78,224,0.7) 0%,
    rgba(122,78,224,0.7) var(--w, 50%),
    rgba(11,11,12,0.10) var(--w, 50%),
    rgba(11,11,12,0.10) 100%);
}

/* When the parent .case-card is open, the .panel-inner border-top reads
   as a divider above the study body — give it a touch of breathing room. */
.case-card.is-open .panel-inner > .study-grid {
  margin-top: 4px;
}


/* ============================================================
   CASE LIBRARY — video controls per item
   The play overlay flips between "add video" (when empty) and
   actual playback (when a URL/file is attached). A small toolbar
   at the bottom-right manages it; a setter pop-over collects the
   URL / file upload.
   ============================================================ */
.lib-item .play { display: none; } /* legacy decorative play — replaced */
.lib-play {
  position: absolute;
  inset: 0;
  margin: 0;
  appearance: none;
  background: transparent;
  border: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  z-index: 2;
  opacity: 0.55;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.lib-play svg { width: 44px; height: 44px; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.55)); }
.lib-item:hover .lib-play { opacity: 1; transform: scale(1.04); }
.lib-item.has-video .lib-play { opacity: 0.9; }
/* The "+" affordance when no video is set */
.lib-item:not(.has-video) .lib-play::after {
  content: 'add video';
  position: absolute;
  bottom: 10px; right: 10px;
  font-family: var(--ff);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  background: rgba(11,11,12,0.6);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(6px);
  padding: 4px 8px;
  border-radius: 999px;
}

.lib-video-ctl {
  position: absolute;
  top: 10px; right: 10px;
  display: flex;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease-out);
  z-index: 3;
}
.lib-item:hover .lib-video-ctl,
.lib-item:focus-within .lib-video-ctl { opacity: 1; pointer-events: auto; }
.lib-video-ctl button {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(11,11,12,0.7);
  backdrop-filter: blur(8px);
  color: var(--c-fg);
  font-family: var(--ff);
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out);
}
.lib-video-ctl button:hover {
  background: rgba(var(--accent-rgb, 122,78,224), 0.4);
  border-color: rgba(var(--accent-rgb, 122,78,224), 0.7);
}

/* When the item has a video attached, draw a thin accent badge */
.lib-item.has-video {
  border-color: rgba(var(--accent-rgb, 122,78,224), 0.5);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb, 122,78,224), 0.25) inset;
}

/* Setter pop-over */
.lib-video-setter {
  position: absolute;
  inset: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: rgba(20,20,22,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  z-index: 4;
  backdrop-filter: blur(14px);
}
.lib-video-setter-h {
  font-family: var(--ff);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-fg);
  letter-spacing: -0.005em;
}
.lib-video-setter-row {
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--c-fg-dim);
}
.lib-video-setter-row > span:first-child {
  font-family: var(--ff);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
}
.lib-video-setter-row input[type="text"] {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: var(--c-fg);
  font-family: var(--ff);
  font-size: 12px;
  padding: 7px 10px;
  outline: none;
  transition: border-color .2s var(--ease-out);
}
.lib-video-setter-row input[type="text"]:focus {
  border-color: rgba(var(--accent-rgb, 122,78,224), 0.7);
}
.lib-video-setter-upload {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px dashed rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 12px;
  cursor: pointer;
  color: var(--c-fg-dim);
}
.lib-video-setter-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.lib-video-setter-upload:hover { border-color: rgba(var(--accent-rgb, 122,78,224), 0.7); color: var(--c-fg); }
.lib-video-setter-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
}
.lib-video-setter-foot button {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent;
  color: var(--c-fg);
  font-family: var(--ff);
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out);
}
.lib-video-setter-foot button:hover { border-color: var(--c-fg); }
.lib-video-setter-foot button.primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}
.lib-video-setter-foot button.primary:hover { filter: brightness(1.08); }

/* ============================================================
   VIDEO MODAL — full-viewport overlay
   ============================================================ */
.video-modal {
  position: fixed;
  inset: 0;
  background: rgba(8,8,10,0.92);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  z-index: 300;
  display: grid;
  place-items: center;
  /* No outer padding — modal goes edge-to-edge for a true fullscreen feel. */
  padding: 0;
  animation: vm-backdrop-in .35s var(--ease-out);
}
@keyframes vm-backdrop-in {
  from { opacity: 0; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
  to   { opacity: 1; }
}
.video-modal-inner {
  position: relative;
  /* Full viewport. The video element inside sizes to its own aspect
     within these bounds (object-fit: contain). */
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  background: #000;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Scale-up entrance — player "expands" into existence. */
  animation: vm-frame-in .5s cubic-bezier(.22, 1.1, .36, 1) both;
  transform-origin: center center;
}
@keyframes vm-frame-in {
  0%   {
    opacity: 0;
    transform: scale(0.78);
    filter: blur(8px);
  }
  60%  {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: scale(1);
  }
}
.video-modal-frame {
  display: block;
  border: 0;
  background: #000;
}
/* Fullscreen MP4 — video element fills the viewport, contains within. */
video.video-modal-frame {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
}
/* Playable HTML demos / YouTube — full viewport with 9:16 ratio cap so
   vertical playables stay portrait inside the wider modal. */
iframe.video-modal-frame {
  width: min(100vw, calc(100vh * 9 / 16));
  height: 100vh;
  border: 0;
}
.video-modal-close {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(20,20,22,0.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--c-fg);
  font-size: 22px;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 310;
  transition: background .2s var(--ease-out), transform .2s var(--ease-out);
}
.video-modal-close:hover { background: var(--c-accent); transform: scale(1.06); }

/* ============================================================
   CASE STUDY — collapsed tiles → expand on click
   .study-tile is a logo + name + 1-line summary tile. Clicking
   it reveals the full .study-case KPI body inline (the previous
   side-by-side layout caused frame collisions).
   Legacy .study-cases (2-col grid) kept for backwards-compat
   when used outside the tile wrapper.
   ============================================================ */
.study-cases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
/* When tiles are used, stack them vertically — one per row so an
   expanded tile's KPI grid doesn't fight a sibling for width. */
.study-cases.study-cases-stacked {
  grid-template-columns: 1fr;
  gap: 12px;
}
.study-tile {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.03),
    rgba(255,255,255,0.008));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 18px 22px;
  cursor: pointer;
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out);
}
.study-tile:hover { border-color: rgba(var(--accent-rgb, 122,78,224), 0.32); }
.study-tile.is-open {
  border-color: rgba(var(--accent-rgb, 122,78,224), 0.5);
  background: linear-gradient(180deg,
    rgba(var(--accent-rgb, 122,78,224), 0.06),
    rgba(255,255,255,0.01));
}
.study-tile-head {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 18px;
  align-items: center;
}
.study-tile-logo {
  width: 64px; height: 64px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: grid; place-items: center;
  overflow: hidden;
  padding: 10px;
}
.study-tile-logo img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.95);
}
.study-tile-name {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-fg);
  line-height: 1.1;
}
.study-tile-summary {
  font-size: 14px;
  color: var(--c-fg-dim);
  line-height: 1.4;
  margin-top: 4px;
}
.study-tile-glyph {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  display: grid; place-items: center;
  color: var(--c-fg);
  font-size: 20px;
  line-height: 1;
  transition: background .2s var(--ease-out), color .2s var(--ease-out),
              border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.study-tile.is-open .study-tile-glyph {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-fg);
  transform: rotate(180deg);
}
.study-tile-body {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  animation: study-tile-in .35s var(--ease-out);
}
@keyframes study-tile-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Inside an expanded tile, the legacy 2-col study-grid would render the
   client logo frame next to the KPI frames — but we already show the
   logo + name on the tile head. Hide the redundant client-frame inside
   the tile body. */
.study-tile-body .study-client-frame { display: none; }
.study-case {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.025),
    rgba(255,255,255,0.005));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 16px;
  min-width: 0;
}

/* Drop down to a single column on narrow viewports */
@media (max-width: 1100px) {
  .study-cases { grid-template-columns: 1fr; }
}

/* Surface adaptations for the outer .study-case wrapper */
body[data-surface="light"] .study-case {
  background: linear-gradient(180deg,
    rgba(11,11,12,0.025),
    rgba(11,11,12,0.005));
  border-color: rgba(11,11,12,0.12);
}
body[data-frame-tint="grey"][data-glass="on"] .study-case {
  background:
    radial-gradient(120% 60% at 50% 110%,
      rgba(122,78,224,0.14) 0%,
      transparent 70%),
    linear-gradient(180deg, #ececee, #dadade);
  border-color: rgba(255,255,255,0.85);
}


/* ============================================================
   CASE LIBRARY — video poster preview
   When a video is attached the captured first-frame (or YouTube
   thumbnail) is overlaid on top of the image-slot, filling the
   cell. The play overlay sits on top.
   ============================================================ */
.lib-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* cover with the card sized 4/5 instead of 9/16 — most creatives fit
     cleanly without big letterbox bars, and key elements (logos, CTAs)
     stay in frame instead of being cropped out. */
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  z-index: 1;
  background: #0a0a0c;
  pointer-events: none;
  /* Subtle vignette so the play overlay remains readable */
  background: #000;
}
.lib-item.has-poster image-slot { visibility: hidden; }
.lib-item.has-poster .label {
  background: rgba(11,11,12,0.78);
  border: 1px solid rgba(255,255,255,0.08);
}
/* Gentle dim on the poster so the play glyph stays prominent */
.lib-item.has-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.25) 60%,
    rgba(0,0,0,0.55) 100%);
  z-index: 1;
  pointer-events: none;
}

.lib-poster-loading {
  position: absolute;
  inset: auto 0 0 0;
  padding: 8px 12px;
  font-family: var(--ff);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: rgba(255,255,255,0.78);
  background: rgba(11,11,12,0.55);
  backdrop-filter: blur(6px);
  z-index: 3;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Once a poster is present the lib-play should sit on top */
.lib-item.has-poster .lib-play { z-index: 3; opacity: 0.85; }
.lib-item.has-poster:hover .lib-play { opacity: 1; }

/* The .has-video accent ring already exists — strengthen it slightly
   when a poster is present so it reads as "video attached, ready". */
.lib-item.has-video.has-poster {
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb, 122,78,224), 0.45) inset,
    0 6px 24px rgba(var(--accent-rgb, 122,78,224), 0.15);
}

/* ============================================================
   INLINE PREVIEW VIDEO (mp4 items — replaces static poster)
   The <video> autoplays muted/loop when the card is in view.
   ============================================================ */
.lib-preview-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  z-index: 1;
  pointer-events: none;
  background: #000;
}
.lib-item.has-preview-video image-slot { visibility: hidden; }
.lib-item.has-preview-video .label {
  background: rgba(11,11,12,0.78);
  border: 1px solid rgba(255,255,255,0.08);
}
.lib-item.has-preview-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.25) 60%,
    rgba(0,0,0,0.0) 100%);
  z-index: 2;
  pointer-events: none;
}
.lib-item.has-preview-video .lib-play { z-index: 3; opacity: 0.85; }
.lib-item.has-preview-video:hover .lib-play { opacity: 1; }
.lib-item.has-video.has-preview-video {
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb, 122,78,224), 0.45) inset,
    0 6px 24px rgba(var(--accent-rgb, 122,78,224), 0.15);
}


/* ============================================================
   COMPREHENSIVE MOBILE / TABLET RESPONSIVE
   Layered breakpoints so each block degrades gracefully:
     1100px  big tablet / small laptop
     820px   tablet portrait
     640px   mobile landscape / small tablet
     480px   mobile portrait
   ============================================================ */

/* ── 1100px: laptop / large tablet ───────────────────────────────── */
@media (max-width: 1100px) {
  .section { padding: 110px var(--pad-x); }
  body[data-section-size="full"] .section { padding: 110px var(--pad-x); }
  .cases-split { gap: 22px; }
  .study-cases { gap: 14px; }
  .study-case { padding: 14px; }
  .lib-grid { grid-template-columns: 1fr 1fr; }
  .cases-state-library .lib-grid { grid-template-columns: repeat(2, 1fr); }
  .contacts-people { grid-template-columns: 1fr; gap: 36px; }
}

/* ── 820px: tablet portrait ──────────────────────────────────────── */
@media (max-width: 820px) {
  /* show hamburger + CTA pill, hide desktop nav and lang switcher */
  .hamburger { display: flex; }
  .nav { display: none; }
  .header-tools .lang { display: none; }
  .header-tools > .cta-pill { display: inline-flex; }
  .mobile-nav { display: flex; }

  /* tighten vertical rhythm */
  .section { padding: 80px var(--pad-x); }
  body[data-section-size="full"] .section { padding: 80px var(--pad-x); }
  .section-rule { margin-bottom: 56px; }

  /* hero */
  .hero { padding: calc(var(--header-h) + 24px) var(--pad-x) 48px; }
  .hero .dot-label { margin-bottom: 32px; }
  body[data-hero-align="left"] img.hero-logo,
  img.hero-logo { width: clamp(260px, 70vw, 520px); }
  .hero-title { text-wrap: balance; }
  body[data-hero-align="left"] .hero-title { text-align: left; }

  /* cases — fully stack the two cards */
  .cases-split {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .cases-split .case-card.is-hidden {
    display: none; /* in collapsed mode keep the other out of flow */
  }
  .case-card { padding: 28px 22px; }
  .case-card .head { gap: 14px; margin-bottom: 18px; }
  .case-card .head h3 { font-size: clamp(26px, 7vw, 36px); }
  .case-card .summary { font-size: 13px; }
  .case-card .glyph { width: 36px; height: 36px; font-size: 16px; }
  .case-card .panel-inner { padding-top: 22px; margin-top: 22px; }

  /* library tabs — scroll horizontally instead of wrapping */
  .lib-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 18px;
    margin-bottom: 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lib-tabs::-webkit-scrollbar { display: none; }
  .lib-tab { flex-shrink: 0; }

  /* library grid */
  .cases-state-library .lib-grid,
  .lib-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .lib-item .label { font-size: 11px; bottom: 8px; left: 8px; padding: 4px 8px; }
  .lib-play svg { width: 36px; height: 36px; }
  .lib-video-ctl { top: 6px; right: 6px; }
  .lib-video-ctl button { font-size: 10px; padding: 4px 8px; }

  /* video setter pop-over — full overlay on small */
  .lib-video-setter { padding: 14px; }
  .lib-video-setter-row { grid-template-columns: 44px 1fr; gap: 8px; }
  .lib-video-setter-row input[type="text"] { font-size: 11px; padding: 6px 8px; }

  /* contacts */
  .contacts { padding: 64px var(--pad-x) 24px; }
  .contacts-inner { gap: 48px; min-height: 0; }
  .cta-stack { gap: 28px; padding: 24px 0 0; }
  .cta-pill.huge { font-size: 14px; padding: 14px 26px; }
  .cta-arrow { width: 52px; height: 52px; }
  .contacts-footer {
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: center;
  }
  .contacts-footer .brand-mark,
  .contacts-footer .copy { justify-self: center; }
  .contacts-footer .center-links { justify-content: center; gap: 18px; flex-wrap: wrap; }
  .contacts-bottom { grid-template-columns: 1fr; }
  .legal-block { grid-column: 1; text-align: left; }

  /* clients marquee — smaller logos, softer edge mask */
  .marquee-logo { width: 110px; height: 56px; }
  .clients-marquees .client-logo { height: 32px; }
  .clients-marquees .client-logo img { max-width: 140px; }
  .clients-marquees .logo-marquee-track { gap: 48px; }
  .logo-marquee {
    mask-image: linear-gradient(90deg, transparent, black 3%, black 97%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 3%, black 97%, transparent);
  }

  /* tweaks panel — push out of the way (the toolbar can still summon it) */
  .twk-panel { transform: scale(.85); transform-origin: bottom right; }

  /* footer brand mark in contacts is fine */
}

/* ── 640px: small tablet / mobile landscape ─────────────────────── */
@media (max-width: 640px) {
  .section { padding: 64px var(--pad-x); }
  body[data-section-size="full"] .section { padding: 64px var(--pad-x); }

  /* tighten hero */
  body[data-hero-align="left"] img.hero-logo,
  img.hero-logo { width: clamp(200px, 70vw, 380px); }
  .hero-title { font-size: clamp(36px, 11vw, 58px); }

  /* about: stack and reduce */
  .about-inner { gap: 18px !important; }
  .about-label { font-size: 12px; }
  .about-body { font-size: 18px !important; line-height: 1.45; }

  /* services / mtt / creatives */
  body[data-services-layout="columns"] .services .glass-target,
  body[data-services-layout="rows"] .service-row,
  body[data-mtt-layout="cards"] .mtt-grid,
  body[data-creatives-layout="stack"] .creatives-grid,
  body[data-creatives-layout="grid"] .creatives-grid {
    grid-template-columns: 1fr !important;
    gap: 18px;
  }
  .service-row { padding: 22px 0; }

  /* why tiles */
  .why-tile { padding: 22px; }
  .why-tile-num { font-size: clamp(40px, 10vw, 56px) !important; }
  .why-tile-feature .why-tile-num { font-size: clamp(40px, 10vw, 56px) !important; }

  /* cases */
  .lib-grid,
  .cases-state-library .lib-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .lib-item { aspect-ratio: 9 / 16; }

  /* case study — frames a bit tighter */
  .study-case { padding: 12px; border-radius: 14px; }
  .study-frame { padding: 18px; border-radius: 12px; }
  .study-client-logo { height: 96px; padding: 10px 14px; }
  .study-section-h { font-size: 14px; margin-bottom: 14px; }
  .study-kpi-num { font-size: 24px; }
  .study-funnel-num { font-size: 22px; }
  .study-meta { gap: 12px; }
  .study-meta-row dt { font-size: 12px; }
  .study-meta-row dd { font-size: 12px; }

  /* contacts */
  .cta-copy { font-size: clamp(26px, 7vw, 40px); }
  .cta-pill.huge { padding: 12px 22px; font-size: 13px; }
  .cta-arrow { width: 46px; height: 46px; }
  .person-col h4 { font-size: clamp(26px, 7vw, 36px); margin-bottom: 14px; }
  .person-col .divider { margin-bottom: 18px; }
  .person-row .avatar { width: 48px; height: 48px; }
  .person-row .name-line { font-size: 16px; }
  .person-row .email { font-size: 13px; }
  .contacts-footer .center-links { font-size: 13px; gap: 14px; }

  /* video modal — mobile: portrait-constrained, fills full height */
  .video-modal { padding: 0; }
  .video-modal-inner {
    width: min(100vw, calc(100dvh * 9 / 16));
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    margin: 0;
  }
  video.video-modal-frame {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
  }
  iframe.video-modal-frame {
    width: 100%;
    height: 100%;
    max-height: 100dvh;
  }
  .video-modal-close {
    position: fixed;
    top: max(env(safe-area-inset-top, 0px), 16px);
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 20px;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* tweaks panel — collapsed to a tiny chip on mobile */
  .twk-panel { transform: scale(.75); transform-origin: bottom right; }
}

/* ── 480px: mobile portrait ─────────────────────────────────────── */
@media (max-width: 480px) {
  .section { padding: 56px var(--pad-x); }
  .section-rule { margin-bottom: 40px; }
  .header-inner { padding: 8px 10px 8px 14px; gap: 8px; }
  .brand { font-size: 16px; }
  .cta-pill { font-size: 12px; padding: 7px 12px; }
  /* Keep the EN/RU switch visible on mobile right next to the CTA — was
     hidden previously. Compact font + tight padding so the trio (lang +
     pill) fits on tiny screens. */
  .lang { font-size: 10px; gap: 2px; }
  .lang button { padding: 4px 2px; }
  .header-tools { gap: 10px; }

  /* tighten cases card padding even more */
  .case-card { padding: 22px 16px; border-radius: 16px; }
  .case-card .head h3 { font-size: clamp(24px, 8vw, 30px); }
  .case-card .glyph { width: 32px; height: 32px; }
  .lib-video-ctl button { padding: 3px 7px; }

  /* footer marquee — even smaller logo cells */
  .marquee-logo { width: 96px; height: 48px; }

  /* contacts */
  .contacts-footer .center-links a { font-size: 13px; }
}

/* ── Tap target safety: anything clickable should be ≥40px on touch ── */
@media (hover: none) and (pointer: coarse) {
  .lib-tab { padding: 9px 14px; font-size: 13px; }
  .case-card .glyph { width: 40px; height: 40px; }
  .video-modal-close { width: 44px; height: 44px; font-size: 20px; }
  /* video controls always visible on touch — no hover affordance */
  .lib-video-ctl { opacity: 1; pointer-events: auto; }
}

/* ============================================================
   SERVICES / MTT — ROW BULLETS with icons + hairlines
   Overrides the chip styling from the columns/cards layouts so
   each item card holds a vertical stack of icon-prefixed rows
   separated by thin lines (per the reference image).
   ============================================================ */
body[data-services-layout="columns"] .service-bullets,
body[data-mtt-layout="cards"] .mtt-item ul {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255,255,255,0.08);
}
body[data-services-layout="columns"] .service-bullets li,
body[data-mtt-layout="cards"] .mtt-item ul li {
  /* reset the chip pill look */
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 !important;
  padding: 14px 0 !important;
  color: var(--c-fg) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-style: normal !important;
  display: flex !important;
  align-items: center;
  gap: 14px;
}
body[data-services-layout="columns"] .service-bullets li:last-child,
body[data-mtt-layout="cards"] .mtt-item ul li:last-child {
  border-bottom: 0 !important;
}
body[data-services-layout="columns"] .service-bullets li::before,
body[data-mtt-layout="cards"] .mtt-item ul li::before {
  content: none !important;
}

.row-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: inline-grid;
  place-items: center;
  background:
    linear-gradient(160deg,
      rgba(var(--accent-rgb, 122,78,224), 0.22),
      rgba(var(--accent-rgb, 122,78,224), 0.08));
  border: 1px solid rgba(var(--accent-rgb, 122,78,224), 0.35);
  color: var(--c-accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform .35s var(--ease-out),
              background .35s var(--ease-out),
              border-color .35s var(--ease-out),
              box-shadow .35s var(--ease-out);
}
.row-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
/* Brand-pure variant: the only "icon" in the system — a 6px purple dot.
   Overrides the larger glass-tile look above for every bullet across
   Services and MTT. No background, no border, no SVG. */
.row-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  border: 0;
  box-shadow: none;
  align-self: center;
  /* Optical lift so the dot sits on the cap-height of the bullet text. */
  transform: translateY(-1px);
}
.row-text {
  font-size: 14px;
  color: var(--c-fg);
  line-height: 1.4;
  font-weight: 400;
}

/* Light surface — soften the icon tile to a muted purple on light bg */
body[data-surface="light"] .row-icon {
  background:
    linear-gradient(160deg,
      rgba(var(--accent-rgb, 122,78,224), 0.18),
      rgba(var(--accent-rgb, 122,78,224), 0.05));
  border-color: rgba(var(--accent-rgb, 122,78,224), 0.35);
  box-shadow: none;
}
body[data-surface="light"] .row-text { color: #0b0b0c; }
body[data-surface="light"][data-services-layout="columns"] .service-bullets,
body[data-surface="light"][data-mtt-layout="cards"] .mtt-item ul {
  border-top-color: rgba(11,11,12,0.10);
}
body[data-surface="light"][data-services-layout="columns"] .service-bullets li,
body[data-surface="light"][data-mtt-layout="cards"] .mtt-item ul li {
  border-bottom-color: rgba(11,11,12,0.10) !important;
}

/* Grey frame tint — match darker text in row */
body[data-frame-tint="grey"][data-glass="on"] .row-text { color: #1a1a1c; }
body[data-frame-tint="grey"][data-glass="on"][data-services-layout="columns"] .service-bullets,
body[data-frame-tint="grey"][data-glass="on"][data-mtt-layout="cards"] .mtt-item ul {
  border-top-color: rgba(11,11,12,0.10);
}
body[data-frame-tint="grey"][data-glass="on"][data-services-layout="columns"] .service-bullets li,
body[data-frame-tint="grey"][data-glass="on"][data-mtt-layout="cards"] .mtt-item ul li {
  border-bottom-color: rgba(11,11,12,0.10) !important;
}

/* ============================================================
   ROW ICONS OFF — body[data-row-icons="off"]
   The four bullet glyphs repeat across every block, so this lets
   them be switched off. With icons gone, the text gets a little
   more size + weight and a refined accent diamond marker so the
   rows still feel intentional rather than bare.
   ============================================================ */
body[data-row-icons="off"] .row-icon { display: none; }
body[data-row-icons="off"][data-services-layout="columns"] .service-bullets li,
body[data-row-icons="off"][data-mtt-layout="cards"] .mtt-item ul li {
  gap: 14px;
  padding: 15px 0 !important;
}
body[data-row-icons="off"] .row-text {
  font-size: 15px !important;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--c-fg);
}
body[data-row-icons="off"][data-services-layout="columns"] .service-bullets li::before,
body[data-row-icons="off"][data-mtt-layout="cards"] .mtt-item ul li::before {
  content: "" !important;
  display: block;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--c-accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb, 122,78,224), 0.55);
}
body[data-surface="light"][data-row-icons="off"] .row-text { color: #0b0b0c; }

/* ============================================================
   CARD HOVER — scale + glow on each service/mtt card
   ============================================================ */
body[data-services-layout="columns"] .service-row,
body[data-mtt-layout="cards"] .mtt-item {
  will-change: transform;
  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    border-color .35s var(--ease-out),
    box-shadow .45s var(--ease-out),
    background .35s var(--ease-out);
}
body[data-services-layout="columns"] .service-row:hover,
body[data-mtt-layout="cards"] .mtt-item:hover {
  transform: scale(1.018) translateY(-2px);
  border-color: rgba(var(--accent-rgb, 122,78,224), 0.55) !important;
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb, 122,78,224), 0.30),
    0 0 28px rgba(var(--accent-rgb, 122,78,224), 0.35),
    0 40px 80px rgba(0,0,0,0.45);
  z-index: 2;
}
body[data-services-layout="columns"] .service-row:hover .row-icon,
body[data-mtt-layout="cards"] .mtt-item:hover .row-icon {
  background:
    linear-gradient(160deg,
      rgba(var(--accent-rgb, 122,78,224), 0.35),
      rgba(var(--accent-rgb, 122,78,224), 0.14));
  border-color: rgba(var(--accent-rgb, 122,78,224), 0.6);
  box-shadow: 0 0 14px rgba(var(--accent-rgb, 122,78,224), 0.45);
}

/* ============================================================
   CREATIVES + PHONE — 2-column layout: stack of creative cards
   on the left, 3D phone mockup floating on the right.
   ============================================================ */
.creatives-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.creatives-phone {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 540px;
}
.creatives-phone .mtt-phone-wrap {
  padding: 0;
  position: sticky;
  top: 140px;
}
.creatives-kpi {
  position: sticky;
  top: 120px;
  align-self: start;
  display: flex;
  align-items: flex-start;
}
@media (max-width: 900px) {
  .creatives-layout { grid-template-columns: 1fr; }
  .creatives-phone { min-height: auto; padding-top: 24px; }
  .creatives-phone .mtt-phone-wrap { position: static; }
  .creatives-kpi { position: static; }
}

/* ============================================================
   CSS-3D PHONE MOCKUP — feature element. Rotated phone with a
   tiny in-app ad UI + stat cards + bar chart. Floats gently.
   Pure CSS, no images.
   ============================================================ */
.mtt-phone-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 56px 0 72px;
  perspective: 1400px;
  perspective-origin: 50% 30%;
  position: relative;
}
.mtt-phone-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 36%;
  transform: translate(-50%, -50%);
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(var(--accent-rgb, 122,78,224), 0.22),
    transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.phone3d {
  width: 260px;
  height: 540px;
  transform-style: preserve-3d;
  transform: rotateY(-22deg) rotateX(8deg);
  animation: phone-float 7s ease-in-out infinite;
  position: relative;
  z-index: 1;
}
@keyframes phone-float {
  0%, 100% { transform: rotateY(-22deg) rotateX(8deg) translateY(0); }
  50%      { transform: rotateY(-20deg) rotateX(6deg) translateY(-10px); }
}
.phone-frame {
  width: 100%;
  height: 100%;
  border-radius: 36px;
  padding: 9px;
  background:
    linear-gradient(155deg, #2a2030 0%, #14101a 50%, #1d1626 100%);
  border: 1px solid rgba(var(--accent-rgb, 122,78,224), 0.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 -1px 0 rgba(0,0,0,0.6) inset,
    0 0 0 1px rgba(0,0,0,0.5),
    0 30px 60px rgba(0,0,0,0.55),
    0 0 60px rgba(var(--accent-rgb, 122,78,224), 0.25);
  position: relative;
  transform-style: preserve-3d;
}
.phone-frame::after {
  /* side-edge sheen */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 36px;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255,255,255,0.06) 40%,
    transparent 60%);
  pointer-events: none;
}
.phone-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 22px;
  background: #050307;
  border-radius: 999px;
  z-index: 2;
}
.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 27px;
  background:
    radial-gradient(120% 80% at 50% 0%,
      rgba(var(--accent-rgb, 122,78,224), 0.12) 0%,
      transparent 60%),
    #0b0810;
  overflow: hidden;
  padding: 42px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--ff);
  color: var(--c-fg);
}
.phone-ad {
  background: linear-gradient(160deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.phone-ad-tag {
  font-size: 8px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
}
.phone-ad-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
}
.phone-ad-btn {
  align-self: flex-start;
  appearance: none;
  border: 0;
  background: #4cea91;
  color: #053122;
  font-family: var(--ff);
  font-size: 11px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: default;
  box-shadow: 0 6px 16px rgba(76,234,145,0.30);
  margin-top: 2px;
}
.phone-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.phone-stat {
  background: linear-gradient(160deg,
    rgba(255,255,255,0.05),
    rgba(255,255,255,0.012));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.phone-stat span {
  font-family: var(--ff);
  font-weight: 600;
  font-size: 13px;
  color: #4cea91;
  letter-spacing: -0.01em;
}
.phone-stat em {
  font-style: normal;
  font-size: 8px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
}
.phone-progress {
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.phone-progress i {
  display: block;
  width: 64%;
  height: 100%;
  background: linear-gradient(90deg,
    rgba(var(--accent-rgb, 122,78,224), 0.85),
    #4cea91);
  border-radius: 2px;
  animation: phone-prog 4s ease-in-out infinite;
}
@keyframes phone-prog {
  0%, 100% { width: 42%; }
  50%      { width: 86%; }
}
.phone-bars {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  gap: 6px;
  padding: 8px 4px 6px;
}
.phone-bars i {
  display: block;
  width: 100%;
  height: var(--h, 50%);
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg,
    rgba(var(--accent-rgb, 122,78,224), 0.7),
    rgba(var(--accent-rgb, 122,78,224), 0.25));
  border: 1px solid rgba(var(--accent-rgb, 122,78,224), 0.45);
  animation: phone-bar-grow 3.4s ease-in-out infinite;
  transform-origin: bottom;
}
.phone-bars i.acc {
  background: linear-gradient(180deg, #4cea91, rgba(76,234,145,0.25));
  border-color: rgba(76,234,145,0.5);
}
.phone-bars i:nth-child(2) { animation-delay: .12s; }
.phone-bars i:nth-child(3) { animation-delay: .22s; }
.phone-bars i:nth-child(4) { animation-delay: .35s; }
.phone-bars i:nth-child(5) { animation-delay: .48s; }
.phone-bars i:nth-child(6) { animation-delay: .60s; }
@keyframes phone-bar-grow {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(.78); }
}
.phone-shadow {
  position: absolute;
  left: 50%;
  bottom: -36px;
  transform: translateX(-50%);
  width: 220px;
  height: 28px;
  background: radial-gradient(closest-side, rgba(0,0,0,0.55), transparent 70%);
  filter: blur(8px);
  border-radius: 50%;
  z-index: 0;
}
.mtt-phone-caption {
  position: relative;
  z-index: 1;
  font-family: var(--ff);
  font-size: 12px;
  color: var(--c-fg-mute);
  letter-spacing: 0.02em;
}
.mtt-phone-caption strong {
  color: var(--c-fg);
  font-weight: 600;
}
body[data-surface="light"] .mtt-phone-caption strong { color: #0b0b0c; }

@media (prefers-reduced-motion: reduce) {
  .phone3d, .phone-bars i, .phone-progress i { animation: none !important; }
}
@media (max-width: 600px) {
  .phone3d { width: 220px; height: 460px; }
}

/* ============================================================
   FRAME REVISIONS (round 2)
   1. Remove the resting outline on every card frame.
   2. On hover: lift via scale + a soft accent glow ("highlight").
   3. Block-label eyebrows are toggle-driven (data-block-labels).
   ============================================================ */
.why-tile,
.mtt-item,
.creative-item,
.study-frame,
.lib-item,
.case-card,
body[data-services-layout="columns"] .service-row {
  /* Restore a visible resting hairline so frames separate from the
     near-black background (previously border-color was transparent,
     which made every card blend in). */
  border-color: rgba(255,255,255,0.16) !important;
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s var(--ease-out),
    border-color .35s var(--ease-out),
    background .35s var(--ease-out) !important;
  will-change: transform;
}
body[data-surface="light"] .why-tile,
body[data-surface="light"] .mtt-item,
body[data-surface="light"] .creative-item,
body[data-surface="light"] .study-frame,
body[data-surface="light"] .lib-item,
body[data-surface="light"] .case-card,
body[data-surface="light"][data-services-layout="columns"] .service-row {
  border-color: rgba(11,11,12,0.16) !important;
}

.why-tile:hover,
.mtt-item:hover,
.creative-item:hover,
.study-frame:hover,
.lib-item:hover,
body[data-services-layout="columns"] .service-row:hover,
.case-card:hover:not(.is-open):not(.is-hidden) {
  transform: scale(1.035);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb, 122,78,224), 0.55),
    0 22px 60px -18px rgba(var(--accent-rgb, 122,78,224), 0.55),
    0 0 42px -6px rgba(var(--accent-rgb, 122,78,224), 0.30);
  z-index: 5;
}
/* keep the why-tile's inner glow flaring up on hover too */
.why-tile:hover::before { opacity: 1; }

/* Light surface: glow stays subtle, ring a touch darker for contrast */
body[data-surface="light"] .why-tile:hover,
body[data-surface="light"] .mtt-item:hover,
body[data-surface="light"] .creative-item:hover,
body[data-surface="light"] .study-frame:hover,
body[data-surface="light"] .lib-item:hover,
body[data-surface="light"][data-services-layout="columns"] .service-row:hover,
body[data-surface="light"] .case-card:hover:not(.is-open):not(.is-hidden) {
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb, 122,78,224), 0.45),
    0 22px 55px -20px rgba(var(--accent-rgb, 122,78,224), 0.40);
}

/* ---- Block-label eyebrows: hidden unless the tweak turns them on.
   The hero kicker (In-App Advertising Agency) is intentionally exempt. ---- */
body[data-block-labels="off"] :is(
  .services-head,
  .mtt-head,
  .creatives-head,
  .cases-head,
  .why-head,
  .about-inner
) .dot-label {
  display: none;
}

/* ============================================================
   ROUND 3 additions
   ============================================================ */

/* "traffy" wordmark — reusable, matches the header/logo lockup.
   Used in the Why heading and the final CTA headline. */
/* Render "traffy" as the actual logo wordmark (image), so it always
   matches the lockup — never a font approximation. The text is kept for
   a11y/SEO but visually replaced by the white wordmark PNG. */
/* Inline "traffy" inside sentences/headings. Uses Inter Tight (same family
   as the surrounding heavy heading) at italic 600 so the x-height matches
   its neighbours exactly — previously we used plain Inter which has a
   shorter x-height, making "traffy" read as a smaller word next to a
   heading set in Inter Tight 800. -0.05em tracking preserves the wordmark
   logo feel. */
.brand-word {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: var(--c-fg);
  vertical-align: baseline;
}
body[data-surface="light"] .brand-word { color: #0b0b0c; }

/* Traffic Sources — now a standalone section */
.sources-section-head { margin-bottom: 8px; }
.sources-section-head h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.04;
}
.sources-section .sources-list { margin-top: 36px; }

/* ============================================================
   TRAFFIC SOURCES — reference-style cards, dark Traffy styling.
   Each card: a monogram chip (stands in for the network logo) +
   the network name. Cards are clearly lifted off the background.
   ============================================================ */
.sources-cards {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.source-card {
  width: 200px;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 16px;
  background:
    linear-gradient(160deg,
      rgba(255,255,255,0.07) 0%,
      rgba(255,255,255,0.025) 100%),
    #17171a;
  border: 1px solid var(--c-card-stroke);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 10px 26px rgba(0,0,0,0.35);
  transition: border-color .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.source-card:hover {
  border-color: rgba(var(--accent-rgb, 122,78,224), 0.5);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 16px 34px rgba(0,0,0,0.45);
}
.source-mark {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-family: var(--ff);
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.03em;
  color: var(--c-accent);
  background:
    linear-gradient(160deg,
      rgba(var(--accent-rgb, 122,78,224), 0.24),
      rgba(var(--accent-rgb, 122,78,224), 0.08));
  border: 1px solid rgba(var(--accent-rgb, 122,78,224), 0.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
}
/* Logo image inside the mark: always in color. */
.source-mark img {
  width: 86%;
  height: 86%;
  object-fit: contain;
  display: block;
  filter: none;
  opacity: 1;
}
/* Per-logo override: render the mark as a solid black silhouette. For marks
   whose own artwork is too light to read on the light tile (e.g. Bideease's
   pale grey wordmark). Only safe for transparent PNG/SVG marks. */
.source-mark img.is-mono {
  filter: brightness(0);
}
/* When a logo loads, drop the purple chip for a uniform light tile so every
   brand mark — colour PNG, white-bg JPEG, transparent SVG — reads on the same
   neutral. This also rescues dark logos (e.g. LiftOff) that vanished on the
   dark chip. The fallback monogram path keeps the original purple chip. */
.source-mark:has(img) {
  background: #f2f2f4;
  border-color: rgba(255,255,255,0.10);
}
/* Per-logo override: keep a dark tile for marks whose artwork is light by
   design (e.g. Jampp's pale lavender app icon) and would vanish on the light
   tile. Two classes beat the .source-mark:has(img) light rule on specificity. */
.source-mark.mark--dark:has(img) {
  background: #141417;
  border-color: rgba(255,255,255,0.12);
}
.source-mono {
  font-family: var(--ff);
  font-style: italic;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.03em;
  color: var(--c-accent);
}
.source-name {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--c-fg);
  text-align: left;
}
/* Light surface */
body[data-surface="light"] .source-card {
  background: #cfcfcf;
  border-color: rgba(11,11,12,0.14);
  box-shadow: 0 8px 22px rgba(11,11,12,0.10);
}
body[data-surface="light"] .source-name { color: #0b0b0c; }
body[data-surface="light"] .source-mark {
  background:
    linear-gradient(160deg,
      rgba(var(--accent-rgb, 122,78,224), 0.18),
      rgba(var(--accent-rgb, 122,78,224), 0.06));
  box-shadow: none;
}
@media (max-width: 560px) {
  .source-card { width: calc(50% - 6px); padding: 10px 12px; gap: 10px; }
  .source-mark { width: 40px; height: 40px; font-size: 14px; }
  .source-name { font-size: 14px; }
}

/* ============================================================
   REEL MOCKUP — single phone with a vertically auto-scrolling
   feed of creative thumbs. Replaces the old PhoneMockup inside
   Creatives. Pure CSS animation, paused on hover for inspection.
   No turquoise — green is reserved for the CTA pill.
   ============================================================ */
.reel-wrap {
  display: grid;
  place-items: center;
  padding: 12px 0;
}
.reel-phone {
  position: relative;
  width: 268px;
  aspect-ratio: 9 / 19.5;
  border-radius: 38px;
  background: #060608;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  overflow: hidden;
}
.reel-notch {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 28px;
  background: #030305;
  border-radius: 18px;
  z-index: 3;
}
.reel-screen {
  position: absolute;
  inset: 8px;
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(180deg, #0e0e12, #08080a);
  /* Top + bottom fade so cards bleed under the bezels softly. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 36px,
                                      #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 36px,
                                      #000 calc(100% - 24px), transparent 100%);
}
.reel-track {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 48px 10px 16px;
  animation: reel-scroll 32s linear infinite;
  will-change: transform;
}
.reel-wrap:hover .reel-track { animation-play-state: paused; }
@keyframes reel-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }   /* loops at the halfway point */
}
.reel-card {
  flex-shrink: 0;
  aspect-ratio: 9 / 13;
  border-radius: 14px;
  background:
    radial-gradient(120% 70% at 20% 0%, rgba(255,255,255,0.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.55)),
    var(--bg, #2a1a4a);
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  letter-spacing: -0.005em;
  position: relative;
  overflow: hidden;
}
.reel-card::after {
  /* Subtle film-grain over each thumb so the placeholder reads like media,
     not a flat color block. */
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.04) 0, transparent 40%),
                    radial-gradient(circle at 70% 80%, rgba(0,0,0,0.18) 0, transparent 50%);
  pointer-events: none;
}
.reel-tag {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.92);
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  align-self: flex-start;
  background: rgba(0,0,0,0.22);
  backdrop-filter: blur(4px);
}
.reel-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reel-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
}
.reel-body {
  font-size: 10px;
  color: rgba(255,255,255,0.72);
  line-height: 1.3;
}
.reel-bar {
  margin-top: 6px;
  height: 3px;
  background: rgba(255,255,255,0.16);
  border-radius: 999px;
  overflow: hidden;
}
.reel-bar i {
  display: block;
  height: 100%;
  background: var(--c-accent);
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .reel-track { animation: none; }
}

@media (max-width: 900px) {
  .reel-phone { width: 220px; }
}

/* ============================================================
   HEADING TYPEFACE + WEIGHTS — global override
   - Display face (Inter Tight) for every section heading so the
     "Full-Service In-App / Traffic Management" lockup matches the
     heavy, slightly condensed look the brand is aiming for.
   - Weight bumped to 800 across H1/H2/H3 — the screenshot reference
     reads as ExtraBold. Italic <em> emphases climb to 900 to keep
     the gap from the surrounding heavy text.
   - Body typography (Inter at 400-600) is untouched.
   ============================================================ */
.hero-title,
.services-head h2,
.mtt-head h2,
.creatives-head h2,
.cases-head h2,
.why-head h2,
.sources-section-head h2,
.t-h1, .t-h2, .t-h3,
.service-body h3,
.mtt-item h3,
.creative-item h3,
.case-card .head h3,
.why-tile-num,
.t-display {
  font-family: var(--ff-display);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.hero-title em,
.services-head h2 em,
.mtt-head h2 em,
.creatives-head h2 em,
.cases-head h2 em,
.why-head h2 em,
.case-card .head h3 em,
.t-h1 em, .t-h2 em, .t-h3 em { font-weight: 900; }

/* Note: .brand-word intentionally keeps the lighter logo style
   (Inter italic 600, -0.05em tracking) instead of inheriting the
   heavy display weight from the heading. See the .brand-word block
   below for the canonical rule. */

/* ============================================================
   KPI DASH MOCKUP — Creatives section variant B
   Phone with a live creative on the left + KPI tiles and a 7-day
   conversion sparkline on the right. Replaces ReelMockup.
   No turquoise inside (CTA color is reserved for action pills only).
   ============================================================ */
.kpi-mockup {
  display: block;
  width: 100%;
  padding: 8px 0;
}
.kpi-phone {
  position: relative;
  width: 220px;
  /* Explicit height instead of aspect-ratio — prevents the phone from
     reflowing when number animation changes panel height in stretch mode. */
  height: 478px;
  flex-shrink: 0;
  border-radius: 34px;
  background: #050507;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  overflow: hidden;
}
.kpi-phone-notch {
  position: absolute;
  top: 9px; left: 50%;
  transform: translateX(-50%);
  width: 96px; height: 24px;
  background: #030305;
  border-radius: 16px;
  z-index: 3;
}
.kpi-phone-video {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border-radius: 28px;
  object-fit: cover;
  background: #0d0d10;
}
.kpi-phone-tag {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--c-fg);
  padding: 5px 10px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.kpi-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.kpi-tile {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.012));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kpi-tile-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-fg-dim);
}
.kpi-tile-value {
  font-family: var(--ff-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-fg);
}
.kpi-tile-delta {
  font-size: 11px;
  color: var(--c-fg-dim);
  letter-spacing: 0.01em;
}

.kpi-chart {
  flex: 1;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.012));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 16px 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 180px;
}
.kpi-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.kpi-chart-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-fg);
}
.kpi-chart-meta {
  font-size: 11px;
  color: var(--c-fg-dim);
  letter-spacing: 0.04em;
}
.kpi-chart-stage {
  position: relative;
  flex: 1;
  min-height: 120px;
  overflow: visible;
}
.kpi-chart-svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* SVG circle dots — share the coordinate system with the line path,
   so they stay exactly on the line at any container size. */
.kpi-chart-dot {
  fill: #cdb6ff;
  filter: drop-shadow(0 0 4px rgba(122, 78, 224, 0.55));
  pointer-events: none;
}
/* Chart entrance — stroke draws left→right, fill + dots fade in once the
   block enters the viewport (the .is-playing class is toggled by the IO in
   KpiDashMockup). */
.kpi-chart-line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 1.8s cubic-bezier(.16, 1, .3, 1);
}
.kpi-mockup.is-playing .kpi-chart-line { stroke-dashoffset: 0 !important; }
.kpi-chart-fill {
  opacity: 0;
  transition: opacity 1.2s ease 0.6s;
}
.is-playing .kpi-chart-fill { opacity: 1; }
.kpi-chart-dot {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.4);
  transition: opacity .35s ease, transform .35s cubic-bezier(.34, 1.4, .5, 1);
  transition-delay: calc(0.4s + var(--i, 0) * 90ms);
}
.is-playing .kpi-chart-dot {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 760px) {
  .kpi-mockup { grid-template-columns: 1fr; gap: 20px; }
  .kpi-phone { width: 180px; margin: 0 auto; }
  .kpi-tile { padding: 10px 12px; }
  .kpi-tile-value { font-size: 18px; }
  .kpi-tile-label { font-size: 9px; }
  .kpi-tile-delta { font-size: 10px; }
  .kpi-chart { min-height: 140px; }
}

/* ============================================================
   SPOTLIGHT GLOW — cursor-tracking radial on every card
   Adapted from the GlowCard component, simplified to one radial
   layer + one border-light layer. Hue locked to Traffy purple
   (hsl(258, 75%, 60%) ≈ #7A4EE0) — no rainbow shift.
   Vars --mx / --my come from useSpotlight() in chrome.jsx.
   background-attachment:fixed means a single global update
   moves the highlight across every visible card simultaneously.
   ============================================================ */
.service-row,
.why-tile,
.lib-item,
.study-tile,
.case-card,
.creative-item {
  position: relative;
  /* Pseudo-elements need a stacking context so the glow stays under
     card content but above its background. */
  isolation: isolate;
}

.service-row::after,
.why-tile::after,
.lib-item::after,
.study-tile::after,
.case-card::after,
.creative-item::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  /* Radial fill — Traffy purple at ~16% opacity, fades to transparent.
     Position is viewport-fixed via background-attachment, so cursor moves
     the highlight across all visible cards in lockstep. */
  background: radial-gradient(
    280px 280px at
    calc(var(--mx, -9999) * 1px)
    calc(var(--my, -9999) * 1px),
    rgba(122, 78, 224, 0.22) 0%,
    rgba(122, 78, 224, 0.06) 30%,
    transparent 70%
  );
  background-attachment: fixed;
  z-index: -1;
  opacity: 0;
  transition: opacity .35s var(--ease-out);
}

/* Glow only appears on hover — keeps the page calm by default and
   avoids the rest of the screen lighting up when cursor moves anywhere. */
.service-row:hover::after,
.why-tile:hover::after,
.lib-item:hover::after,
.study-tile:hover::after,
.case-card:hover:not(.is-hidden)::after,
.creative-item:hover::after {
  opacity: 1;
}

/* Border-light layer — a thin colored ring that traces the card border
   under the cursor. Only the segment near the cursor lights up because
   the radial gradient peaks there and falls off. */
.service-row::before,
.why-tile::before,
.lib-item::before,
.study-tile::before,
.case-card::before,
.creative-item::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    220px 220px at
    calc(var(--mx, -9999) * 1px)
    calc(var(--my, -9999) * 1px),
    rgba(122, 78, 224, 0.85) 0%,
    rgba(122, 78, 224, 0.35) 30%,
    transparent 70%
  );
  background-attachment: fixed;
  /* mask the inner area so only the 1px border ring is filled */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s var(--ease-out);
  z-index: 0;
}
.service-row:hover::before,
.why-tile:hover::before,
.lib-item:hover::before,
.study-tile:hover::before,
.case-card:hover:not(.is-hidden)::before,
.creative-item:hover::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .service-row::after, .why-tile::after, .lib-item::after,
  .study-tile::after, .case-card::after, .creative-item::after,
  .service-row::before, .why-tile::before, .lib-item::before,
  .study-tile::before, .case-card::before, .creative-item::before {
    transition: none;
  }
}

/* ============================================================
   GLASSMORPHISM — unified glass surface for all "framed" cards
   - translucent diagonal gradient fill (white at 4-8% alpha)
   - heavy backdrop-filter blur + saturation boost
   - 1px hairline + inset top highlight to suggest light from above
   - drop shadow under the card for depth
   Lib-item (video posters) is excluded: glass would muddy the image.
   The spotlight ::before/::after overlays (defined above) still work
   on top of these surfaces because they're pseudo-elements + their
   own background-attachment:fixed gradients.
   ============================================================ */
body[data-glass="on"] .service-row,
body[data-glass="on"] .why-tile,
body[data-glass="on"] .study-tile,
body[data-glass="on"] .case-card,
body[data-glass="on"] .creative-item,
body[data-glass="on"] body[data-services-layout="columns"] .service-row,
.service-row,
.why-tile,
.study-tile,
.case-card,
.creative-item {
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.02) 45%,
      rgba(255,255,255,0.05) 100%) !important;
  backdrop-filter: blur(22px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
  /* border + box-shadow intentionally NOT !important so the :hover rule
     below wins via pseudo-class specificity. (When both rest and hover
     used !important, the cascade got brittle and only :hover with the
     specific selector mattering — like .lib-item — appeared to glow.) */
  border: 1px solid rgba(255,255,255,0.14);
  /* Resting state — glass highlights + a soft purple halo so cards already
     read as "luminous" before any hover. Hover state below intensifies this. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(255,255,255,0.04),
    0 0 24px -6px rgba(122, 78, 224, 0.22),
    0 12px 40px rgba(0,0,0,0.45);
  transition: box-shadow .35s var(--ease-out), border-color .25s var(--ease-out);
}

/* MTT items stay frameless (left purple accent) — glass would conflict
   with the brand metaphor we set up. Skip them. */

/* Hover intensifies the glass AND lights up the card with the brand purple
   bloom — inset highlight keeps the glass character, outer shadow turns
   purple for the "lit-from-within" feel.
   No !important — pseudo-class :hover adds specificity (1,0) over the rest
   selector, so this wins naturally. Earlier !important on both sides made
   the cascade fragile. */
.service-row:hover,
.why-tile:hover,
.study-tile:hover,
.case-card:hover:not(.is-hidden),
.creative-item:hover,
.lib-item:hover,
.mtt-item:hover {
  border: 1px solid rgba(122, 78, 224, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(122, 78, 224, 0.55),
    0 22px 60px -18px rgba(122, 78, 224, 0.60),
    0 0 42px -6px rgba(122, 78, 224, 0.40),
    0 18px 40px rgba(0,0,0,0.45);
}

/* ============================================================
   SERVICES — "timeline" layout
   Stacked services as steps of a single agency narrative.
   A 1px purple vertical line connects all step-markers (40px
   circles with the outline numeral inside). Accordion is
   disabled — all content always visible. Glass + spotlight
   from the cards rule above are also disabled here so each
   step reads as a flat editorial entry, not a tile.
   ============================================================ */
body[data-services-layout="timeline"] .services .glass-target {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  position: relative;
  align-items: stretch;
  padding: 0 0 0 4px !important;
  gap: 0;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  min-height: 0 !important;
  isolation: auto !important;
}
body[data-services-layout="timeline"] .services .glass-target::before {
  display: none !important;
}

/* The vertical purple connector — runs from middle of first dot
   down to middle of last dot. Positioned where the dots' centres
   sit (left padding 4 + dot offset 20 → 24px from container left). */
body[data-services-layout="timeline"] .services .glass-target::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 56px;          /* below first dot top */
  bottom: 56px;       /* above last dot bottom */
  width: 1px;
  background: linear-gradient(180deg,
    rgba(122, 78, 224, 0.55) 0%,
    rgba(122, 78, 224, 0.35) 50%,
    rgba(122, 78, 224, 0.55) 100%);
  z-index: 0;
}

body[data-services-layout="timeline"] .service-row {
  position: relative;
  display: grid !important;
  grid-template-columns: 60px 1fr !important;
  gap: 28px !important;
  padding: 36px 0 !important;
  /* Strip the column-mode card chrome — glass + ring + accordion. */
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  min-height: auto !important;
  cursor: default !important;
  transform: none !important;
  align-items: start;
  isolation: auto;
}
/* Disable the spotlight overlays on timeline rows */
body[data-services-layout="timeline"] .service-row::before,
body[data-services-layout="timeline"] .service-row::after {
  display: none !important;
}
/* Disable the columns-mode hover lift / purple ring */
body[data-services-layout="timeline"] .service-row:hover {
  transform: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

/* Hairline separators between rows for editorial rhythm */
body[data-services-layout="timeline"] .service-row + .service-row {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}

/* Dot marker — replaces the outline-number tile from columns mode.
   Renders the index as a 40×40 purple bubble centred on the connector. */
body[data-services-layout="timeline"] .service-row .service-num {
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(160deg,
    rgba(122, 78, 224, 0.28),
    rgba(122, 78, 224, 0.08));
  border: 1px solid rgba(122, 78, 224, 0.6);
  color: var(--c-accent);
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
  box-shadow: 0 0 0 4px var(--c-bg), 0 0 18px rgba(122, 78, 224, 0.35);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
body[data-services-layout="timeline"] .service-row:hover .service-num {
  transform: scale(1.08);
  box-shadow: 0 0 0 4px var(--c-bg), 0 0 28px rgba(122, 78, 224, 0.6);
}

/* Body — always fully visible (no accordion). */
body[data-services-layout="timeline"] .service-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
body[data-services-layout="timeline"] .service-body h3 {
  font-family: var(--ff-display) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: clamp(20px, 1.8vw, 28px) !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 0 !important;
  color: var(--c-fg) !important;
  line-height: 1.15;
}
body[data-services-layout="timeline"] .service-bullets {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  margin: 0 !important;
  opacity: 1 !important;
  max-height: none !important;
  transform: none !important;
  pointer-events: auto !important;
  overflow: visible !important;
}
body[data-services-layout="timeline"] .service-bullets li {
  font-size: 15px !important;
  color: var(--c-fg-dim) !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  line-height: 1.5 !important;
  font-style: normal !important;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
body[data-services-layout="timeline"] .service-bullets li::before {
  content: none !important;
}
/* The row-icon dot is already the 6px brand marker — keep it. */
body[data-services-layout="timeline"] .service-payoff {
  font-size: 15px !important;
  color: var(--c-accent) !important;
  font-style: italic;
  margin-top: 4px !important;
  opacity: 1 !important;
  max-height: none !important;
  transform: none !important;
}
body[data-services-layout="timeline"] .service-payoff::before {
  content: '→  ' !important;
  color: var(--c-fg-mute) !important;
  font-style: normal;
}

/* The services-head h2 ("Full-Service In-App / Traffic Management")
   stays aligned with the section padding — no extra timeline indent. */
body[data-services-layout="timeline"] .services-head {
  margin-bottom: 48px;
}

@media (max-width: 760px) {
  body[data-services-layout="timeline"] .service-row {
    grid-template-columns: 44px 1fr !important;
    gap: 18px !important;
    padding: 28px 0 !important;
  }
  body[data-services-layout="timeline"] .services .glass-target::after {
    left: 19px;
  }
  body[data-services-layout="timeline"] .service-row .service-num {
    width: 36px; height: 36px; font-size: 12px;
  }
}