/* ==========================================================================
   Atelier 23 — Design System
   Warm off-white canvas · gold accent · soft rounded cards ·
   geometric grotesque type · pill buttons · generous whitespace.
   ========================================================================== */

:root {
  /* Canvas — warm off-white, sand tint for alternating sections */
  --cream:        #FBFAF6;
  --ivory:        #FBFAF6;   /* alias kept for legacy references */
  --sand:         #FDFCF8;
  --ivory-deep:   #FDFCF8;   /* alias */
  --paper:        #FFFFFF;
  --ink:          #1A1A1A;
  --ink-soft:     #54524D;
  --ink-faint:    #8C887F;
  --line:         #E7E2D7;

  /* Gradient-bar endpoints — the one bit of color we keep (golden yellow -> marine) */
  --coral:        #F5B82E;   /* golden yellow — bright accent (bar, nav underline, dot) */
  --coral-deep:   #C8860D;   /* deep gold — darker endpoint + legible text accent */
  --marine:       #3E5FD9;

  /* Card fills — neutral warm greys (minimal black & white) */
  --coral-soft:   #E4E0D8;
  --periwinkle:   #ECEAE4;
  --mint:         #E7E8E3;
  --evolved:      #2F8F5B;
  --acai:         #E8E5E5;
  --sandcard:     #ECE7DD;

  /* Audience accents (kept names for HTML hooks) */
  --biz:          #3E5FD9;   /* marine — used in gradient bar */
  --biz-deep:     #2C46AE;
  --biz-tint:     #ECEAE4;   /* neutral */
  --biz-accent:   #3E5FD9;

  --crt:          #54524D;   /* neutral ink-soft */
  --crt-deep:     #3A3833;
  --crt-tint:     #E4E0D8;   /* neutral */
  --crt-accent:   #54524D;

  --brick:        #9C4A35;   /* warm brick red — deeper cousin of the coral; section fill */

  /* Type — Newsreader (headings) + Inter (body) */
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Scale */
  --maxw: 1240px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --radius: 12px;        /* inputs / small */
  --radius-lg: 28px;     /* cards */
  --radius-pill: 999px;  /* buttons */

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --charcoal:     #1F2023;   /* dark service-section block */

  /* Film grain — monochrome fractal noise, overlaid on every image */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  /* Glimmer — sparse white specks (thresholded noise) for a subtle glitter / city-lights sparkle */
  --glimmer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='1' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 11 -8.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");

  /* Shared dark card palette — deep plum base, warm amber glow lower-right,
     soft violet wash rising from below. Used by the inner-circle card and the "Join us" CTA band. */
  --dusk-base: #1f1a2b;
  --dusk-glow:
    radial-gradient(85% 65% at 86% 80%, rgba(247, 158, 99, 0.22), transparent 60%),
    radial-gradient(130% 85% at 42% 122%, rgba(206, 166, 208, 0.20), transparent 62%),
    radial-gradient(70% 55% at 16% 4%, rgba(132, 108, 178, 0.18), transparent 60%),
    linear-gradient(168deg, #332a4c 0%, #2b2640 50%, #1c1726 100%);
}

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

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

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.025em;
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--coral-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.55ch;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--coral);
}

.lede {
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 54ch;
}

/* --------------------------------------------------------------------------
   Buttons — pill shaped
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.9em 1.6em;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover { transform: translateY(-2px); background: #000; border-color: #000; color: var(--paper); }
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn--light {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.btn--light:hover { background: transparent; border-color: var(--paper); color: var(--paper); }

/* --------------------------------------------------------------------------
   Site header / nav
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 76px;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4ch;
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.brand b { font-weight: 700; }
.brand .num {
  font-feature-settings: "tnum";
  color: inherit;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.7rem;
}
.nav a:not(.btn) {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  padding: 0.25rem 0;
  transition: color .25s var(--ease);
}
.nav a:not(.btn):hover { color: var(--ink); }
.nav a.is-active { color: var(--ink); }
.nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--coral), var(--coral-deep));
  border-radius: 2px;
}

.nav__cta { margin-left: 0.4rem; }
.nav__cta .btn { padding: 0.6em 1.25em; font-size: 0.92rem; }

.nav-toggle { display: none; }

/* --------------------------------------------------------------------------
   Hero / brand intro (Section 1)
   -------------------------------------------------------------------------- */
.intro {
  position: relative;
  padding: clamp(3.5rem, 10vw, 8rem) 0 clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
}
/* soft mesh-gradient art */
.intro::before {
  content: "";
  position: absolute;
  top: -20%; right: -10%;
  width: 70vw; height: 70vw;
  max-width: 900px; max-height: 900px;
  background:
    radial-gradient(closest-side at 30% 35%, color-mix(in srgb, var(--coral-soft) 85%, transparent), transparent 70%),
    radial-gradient(closest-side at 70% 30%, color-mix(in srgb, var(--periwinkle) 85%, transparent), transparent 70%),
    radial-gradient(closest-side at 55% 70%, color-mix(in srgb, var(--mint) 80%, transparent), transparent 70%),
    radial-gradient(closest-side at 80% 65%, color-mix(in srgb, var(--acai) 80%, transparent), transparent 70%);
  filter: blur(40px);
  opacity: 0.65;
  z-index: 0;
  pointer-events: none;
}
.intro__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: end;
}
.intro h1 {
  font-size: clamp(2.7rem, 7vw, 5.8rem);
  margin-top: 1.4rem;
  letter-spacing: -0.035em;
}
.intro h1 em {
  font-style: normal;
  color: var(--coral-deep);
}
.intro__detail {
  border-left: 0;
  padding-left: 0;
}
.intro__detail p { color: var(--ink-soft); font-size: 1.02rem; }
.intro__detail p + p { margin-top: 1rem; }

/* Centered hero variant — simple, all-black title + two buttons */
.intro--center {
  text-align: center;
  padding-top: clamp(4rem, 10vw, 7.5rem);
  padding-bottom: clamp(3rem, 6.5vw, 5rem);
}
.intro--center::before {
  top: -8%;
  left: 50%; right: auto;
  transform: translateX(-50%);
  width: 85vw; height: 540px;
  max-width: 1100px; max-height: 540px;
  filter: blur(60px);
  opacity: 0.42;
}
.intro--center .wrap { position: relative; z-index: 1; }
.intro--center .hero-title {
  font-size: clamp(2.1rem, 4.2vw, 3.6rem);
  font-weight: 500;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.0;
}
.hero-sub {
  max-width: 44ch;
  margin: clamp(0.75rem, 1.2vw, 1rem) auto 0;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.15vw, 1.2rem);
  line-height: 1.5;
}
.hero-actions {
  margin-top: clamp(2.25rem, 3.2vw, 3rem);
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-actions .btn {
  font-size: 0.95rem;
  padding: 0.75em 1.5em;
}
@media (max-width: 560px) {
  /* Tighten the sparse top gap on phones so the hero feels intentional */
  .intro--center { padding-top: clamp(2rem, 7vw, 3.25rem); padding-bottom: clamp(2rem, 5vw, 3rem); }
}

/* Hero media — two visual blocks below the hero (wide + tall), full-bleed */
.hero-media { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.hero-media .wrap { max-width: none; }
.media-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;   /* 1.6 : 1 makes the 16:10 and 1:1 frames exactly equal height */
  gap: clamp(1rem, 1.6vw, 1.5rem);
  align-items: start;                 /* let each frame use its own height; `stretch` makes Safari collapse aspect-ratio-only grid items to 0 */
}
.media-frame {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--sand);
}
/* Fixed aspect ratios so the frames render identically at any width.
   The ::before padding spacer is what actually gives the frame its height: the
   <img> inside is position:absolute and contributes none, and Safari collapses
   an aspect-ratio-only grid item to zero height (Chrome/Firefox don't). The
   percentage is height ÷ width of each ratio (10/16 = 62.5%, 1/1 = 100%). */
.media-frame--wide { aspect-ratio: 16 / 10; }
.media-frame--tall { aspect-ratio: 1 / 1; }
.media-frame--wide::before { content: ""; display: block; padding-top: 62.5%; }
.media-frame--tall::before { content: ""; display: block; padding-top: 100%; }
/* Drop an <img class="media-img"> inside a frame to replace the placeholder */
.media-frame .media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  text-align: center;
  padding: 1.5rem;
  color: var(--ink);
}
.media-frame--wide .media-ph { background: linear-gradient(135deg, var(--periwinkle), var(--coral-soft)); }
.media-frame--tall .media-ph { background: linear-gradient(150deg, var(--coral-soft), var(--acai)); }
.media-ph svg { width: 38px; height: 38px; opacity: 0.55; }
.media-ph span { font-weight: 600; font-size: 1rem; }
.media-ph small { color: var(--ink-soft); font-size: 0.85rem; max-width: 28ch; line-height: 1.4; }

/* Slow Ken Burns drift on the wide hero image only — barely-there motion so
   the frame feels alive without video. The tall frame stays fully static. */
.media-frame--wide.is-in .media-img {
  animation: img-drift 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes img-drift {
  from { transform: scale(1) translateX(0); }
  to   { transform: scale(1.07) translateX(-1.6%); }
}

/* Glimmer twinkle over the night skyline — sparse white specks (two offset
   layers) that breathe and drift, reading as city lights. Sits under the film
   grain (z3) and over the image. */
.media-glimmer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: var(--glimmer), var(--glimmer);
  background-size: 220px 220px, 340px 340px;
  background-position: 0 0, 60px 90px;
  mix-blend-mode: screen;
  opacity: 0;
}
.media-frame.is-in .media-glimmer { animation: glimmer-twinkle 7s ease-in-out infinite 0.8s; }
@keyframes glimmer-twinkle {
  0%, 100% { opacity: 0.14; background-position: 0 0, 60px 90px; }
  50%      { opacity: 0.4;  background-position: 8px -6px, 52px 102px; }
}

/* Campaign demo over the wide hero image — a dark frosted app panel (same
   glass treatment as the For Brands cards), centered over the city. The flow:
   a month is picked for the sample campaign → the
   tracker lands and its budget bar fills → the sheet blurs while key figures
   lift off it as white callouts → a results screen of engagement analytics,
   weekly bars growing. One shared 12s timeline (2.2s after pop-in) keeps
   every layer in lockstep. Sits at z4, above the film grain (z3). */
.media-app {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: clamp(260px, 48%, 460px);
  pointer-events: none;
  background: rgba(23, 22, 40, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 34px 70px -30px rgba(9, 7, 30, 0.75);
  opacity: 0;
  transform: translate(-50%, calc(-50% + 20px)) scale(0.96);
  transition: opacity 0.9s var(--ease) 0.5s, transform 0.9s var(--ease) 0.5s;
}
.media-frame.is-in .media-app { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.media-app__screen { padding: clamp(0.9rem, 1.7vw, 1.5rem) clamp(1rem, 1.9vw, 1.7rem); }
/* Screen D (results) sits in flow and defines the panel's height; the other
   screens overlay it and fade through in sequence: B → C → D → B… */
.media-app__screen--b,
.media-app__screen--c { position: absolute; inset: 0; opacity: 0; }
.media-app__screen--d { opacity: 0; }
/* Screen B (month picker) is the resting state, so the panel isn't blank
   during the 2.2s pre-demo beat (and wherever animations can't run) */
.media-app__screen--b { opacity: 1; }
.media-frame.is-in .media-app__screen--b { animation: app-screen-b 12s ease-in-out infinite 2.2s; }
.media-frame.is-in .media-app__screen--c { animation: app-screen-c 12s ease-in-out infinite 2.2s; }
.media-frame.is-in .media-app__screen--d { animation: app-screen-d 12s ease-in-out infinite 2.2s; }
@keyframes app-screen-b {
  0%, 15%  { opacity: 1; }
  19%, 94% { opacity: 0; }
  98%, 100% { opacity: 1; }
}
@keyframes app-screen-c {
  0%, 19%  { opacity: 0; }
  23%, 60% { opacity: 1; }
  64%, 100% { opacity: 0; }
}
@keyframes app-screen-d {
  0%, 62%  { opacity: 0; }
  66%, 94% { opacity: 1; }
  98%, 100% { opacity: 0; }
}
/* Tracker sheet blurs late in its window while the callouts lift off it */
.media-frame.is-in .media-app__sheet { animation: sheet-blur 12s ease-in-out infinite 2.2s; }
@keyframes sheet-blur {
  0%, 40%   { filter: blur(0); opacity: 1; }
  44%, 100% { filter: blur(5px); opacity: 0.72; }
}
/* Key figures lifted off the blurred tracker — white callouts */
.media-app__callouts { position: absolute; inset: 0; pointer-events: none; }
.media-app__callout {
  position: absolute;
  background: #FFFDF6;
  color: var(--ink);
  font-weight: 600;
  font-size: clamp(0.68rem, 0.95vw, 0.88rem);
  padding: 0.55em 1em;
  border-radius: 10px;
  box-shadow: 0 14px 32px -12px rgba(9, 7, 30, 0.55);
  opacity: 0;
  transform: translateY(8px) scale(0.92);
}
.media-app__callout--1 { top: 20%; left: -5%; }
.media-app__callout--2 { top: 47%; right: -6%; }
.media-app__callout--3 { bottom: 9%; left: 10%; }
.media-frame.is-in .media-app__callout { animation: callout-pop 12s var(--ease) infinite; }
.media-frame.is-in .media-app__callout--1 { animation-delay: 2.2s; }
.media-frame.is-in .media-app__callout--2 { animation-delay: 2.45s; }
.media-frame.is-in .media-app__callout--3 { animation-delay: 2.7s; }
@keyframes callout-pop {
  0%, 44%   { opacity: 0; transform: translateY(8px) scale(0.92); }
  47%, 60%  { opacity: 1; transform: translateY(0) scale(1); }
  64%, 100% { opacity: 0; transform: translateY(0) scale(1); }
}
/* Results screen — stat grid, weekly bars */
.media-app__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.4rem, 0.9vw, 0.7rem) clamp(0.8rem, 1.5vw, 1.2rem);
  padding-block: clamp(0.35rem, 0.7vw, 0.55rem) clamp(0.55rem, 1vw, 0.8rem);
}
.media-app__stat { display: flex; flex-direction: column; gap: 2px; }
.media-app__stat span {
  font-size: clamp(0.62rem, 0.8vw, 0.74rem);
  color: rgba(244, 243, 239, 0.55);
}
.media-app__stat b {
  font-size: clamp(1.02rem, 1.65vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #F4F3EF;
}
.media-app__trend-label {
  display: block;
  font-size: clamp(0.62rem, 0.8vw, 0.74rem);
  color: rgba(244, 243, 239, 0.55);
  margin-bottom: 0.45rem;
}
.media-app__bars {
  display: flex;
  align-items: flex-end;
  gap: clamp(3px, 0.5vw, 6px);
  height: clamp(26px, 3.6vw, 42px);
}
.media-app__bars i {
  flex: 1;
  height: var(--h);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--coral), var(--coral-deep));
  transform-origin: bottom;
}
.media-frame.is-in .media-app__bars i { animation: bars-grow 12s var(--ease) infinite 2.2s; }
.media-frame.is-in .media-app__bars i:nth-child(2) { animation-delay: 2.28s; }
.media-frame.is-in .media-app__bars i:nth-child(3) { animation-delay: 2.36s; }
.media-frame.is-in .media-app__bars i:nth-child(4) { animation-delay: 2.44s; }
.media-frame.is-in .media-app__bars i:nth-child(5) { animation-delay: 2.52s; }
.media-frame.is-in .media-app__bars i:nth-child(6) { animation-delay: 2.6s; }
.media-frame.is-in .media-app__bars i:nth-child(7) { animation-delay: 2.68s; }
@keyframes bars-grow {
  0%, 64%   { transform: scaleY(0); }
  72%, 100% { transform: scaleY(1); }
}
/* Picker rows: hover glow, click flash, settle. Padded so the highlight
   carries comfortable space around the label, and pulled back out by the
   same amount so the text stays aligned with the rest of the screen. */
.media-app__row--pick {
  grid-template-columns: 1fr auto;
  border-radius: 10px;
  padding-inline: 0.95em;
  margin-inline: -0.95em;
}
.media-frame.is-in .media-app__row--pick-b { animation: row-pick-b 12s ease-in-out infinite 2.2s; }
@keyframes row-pick-b {
  0%, 4%    { background: rgba(255, 255, 255, 0); }
  6%        { background: rgba(255, 255, 255, 0.08); }
  8%        { background: rgba(255, 255, 255, 0.22); }
  10%, 15%  { background: rgba(255, 255, 255, 0.1); }
  19%, 100% { background: rgba(255, 255, 255, 0); }
}
.media-app__chev { color: rgba(244, 243, 239, 0.4); font-size: 0.9em; justify-self: end; }
/* Budget line — label, gold fill bar, committed/total */
.media-app__budget {
  display: flex;
  align-items: center;
  gap: clamp(0.55rem, 1vw, 0.85rem);
  padding-block: clamp(0.5rem, 0.95vw, 0.8rem);
  font-size: clamp(0.68rem, 0.85vw, 0.8rem);
  color: rgba(244, 243, 239, 0.55);
}
.media-app__budget b { color: #F4F3EF; font-weight: 600; white-space: nowrap; }
.media-app__budget-bar {
  flex: 1;
  height: 5px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.media-app__budget-bar i {
  display: block;
  height: 100%;
  width: 78%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--coral), var(--coral-deep));
  transform-origin: left;
  transform: scaleX(1);
}
.media-frame.is-in .media-app__budget-bar i { animation: budget-fill 12s var(--ease) infinite 2.2s; }
@keyframes budget-fill {
  0%, 26%   { transform: scaleX(0); }
  36%, 100% { transform: scaleX(1); }
}
.media-app__head {
  display: flex;
  align-items: center;
  gap: 0.6ch;
  font-size: clamp(0.66rem, 0.85vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(244, 243, 239, 0.68);
  margin-bottom: clamp(0.5rem, 1vw, 0.85rem);
}
.media-app__head::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--coral);
  flex: none;
}
.media-app__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.6rem, 1.2vw, 1rem);
  padding-block: clamp(0.5rem, 0.95vw, 0.8rem);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.media-app__who {
  font-size: clamp(0.76rem, 1vw, 0.95rem);
  font-weight: 600;
  color: #F4F3EF;
  white-space: nowrap;
}
.media-app__what {
  font-size: clamp(0.7rem, 0.9vw, 0.85rem);
  color: rgba(244, 243, 239, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.media-app__status {
  font-size: clamp(0.62rem, 0.8vw, 0.76rem);
  font-weight: 600;
  padding: 0.35em 0.85em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  justify-self: end;
}
.media-app__status--gold   { background: rgba(245, 184, 46, 0.18); color: #F5C55E; }
.media-app__status--violet { background: rgba(160, 140, 220, 0.22); color: #C9BCF0; }
.media-app__status--blue   { background: rgba(120, 150, 255, 0.2);  color: #A9BCFF; }
.media-app__status--green  { background: rgba(80, 200, 130, 0.2);   color: #7ADFA8; }
/* Reduced motion: skip the guided demo — show the results screen, static */
@media (prefers-reduced-motion: reduce) {
  .media-frame.is-in .media-app__screen--b,
  .media-frame.is-in .media-app__screen--c,
  .media-frame.is-in .media-app__screen--d,
  .media-frame.is-in .media-app__row--pick-b,
  .media-frame.is-in .media-app__budget-bar i,
  .media-frame.is-in .media-app__sheet,
  .media-frame.is-in .media-app__callout,
  .media-frame.is-in .media-app__bars i { animation: none; }
  .media-app__screen--b { opacity: 0; }
  .media-app__screen--d { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .media-frame.is-in .media-img,
  .media-frame.is-in .media-glimmer { animation: none; }
}

@media (max-width: 760px) {
  .media-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* Phones only: hide the skyline photo (it doesn't read at this size) and set
     the campaign card on a soft brand gradient panel, sized to fit with margin
     — far less vertical bulk. Desktop keeps the skyline photo + floating card. */
  .media-frame--wide {
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 6vw, 32px);
    background:
      radial-gradient(82% 68% at 82% 6%, color-mix(in srgb, var(--coral) 15%, transparent), transparent 60%),
      linear-gradient(150deg, var(--periwinkle), var(--acai));
  }
  .media-frame--wide::before { content: none; }
  .media-frame--wide .media-img,
  .media-frame--wide .media-glimmer { display: none; }
  .media-app {
    position: static;
    width: min(100%, 320px);
    transform: translateY(16px) scale(0.98);
  }
  .media-frame.is-in .media-app { transform: translateY(0) scale(1); }
  /* Drop the middle "what" column so campaign rows read cleanly (name + status). */
  .media-app__what { display: none; }
  .media-app__row { grid-template-columns: auto 1fr; }
}

/* --------------------------------------------------------------------------
   Stat band — the network in numbers (quiet hairline-framed proof strip)
   -------------------------------------------------------------------------- */
.stat-band { padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2.5rem, 5.5vw, 4.5rem); }
.stat-band__grid {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat-band__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  text-align: center;
  padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 2.5vw, 2rem);
}
.stat-band__item + .stat-band__item { border-left: 1px solid var(--line); }
.stat-band__value {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4.2vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.stat-band__label {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.45;
  max-width: 24ch;
}
@media (max-width: 700px) {
  /* Keep the two stats side by side on phones — just tighten spacing so they fit */
  .stat-band__item { padding: clamp(1.5rem, 5vw, 2.4rem) clamp(0.7rem, 3vw, 1.4rem); gap: 0.5rem; }
}
@media (max-width: 380px) {
  .stat-band__value { font-size: 2rem; }
  .stat-band__label { font-size: 0.82rem; }
}

/* --------------------------------------------------------------------------
   Clip strip — vertical phone-aspect video frames (placeholders until clips land)
   -------------------------------------------------------------------------- */
.clip-strip { padding: 0 0 clamp(3rem, 6.5vw, 5.5rem); }
.clip-strip__head { text-align: center; margin-bottom: clamp(1.5rem, 3vw, 2.2rem); }
.clip-strip__head .eyebrow { margin: 0; }
.clip-strip__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  max-width: 1040px;
  margin: 0 auto;
}
/* Each clip keeps its 4-up width; a partial row (e.g. 3 clips) centers instead of left-aligning */
.clip-strip__row > .clip-frame { flex: 0 0 calc((100% - 3 * clamp(0.9rem, 1.6vw, 1.4rem)) / 4); }
.clip-frame {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--sand);
  border: 1px solid var(--line);
}
/* 9:16 phone aspect via padding spacer — aspect-ratio-only grid items collapse in Safari */
.clip-frame::before { content: ""; display: block; padding-top: 177.78%; }
.clip-frame__video,
.clip-frame__ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.clip-frame__video { object-fit: cover; }
.clip-frame__ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  color: var(--ink-faint);
}
.clip-frame__ph svg { width: 34px; height: 34px; opacity: 0.55; }
.clip-frame__ph span { font-size: 0.8rem; letter-spacing: 0.02em; }
@media (max-width: 700px) {
  .clip-strip__row { gap: 0.8rem; }
  .clip-strip__row > .clip-frame,
  .clip-strip__row > .clip-credit { flex-basis: calc((100% - 0.8rem) / 2); }
}

/* Night variant — frosted-glass frames for the For Brands field */
.clip-strip--night { padding-top: clamp(1.5rem, 4vw, 3rem); }
.clip-strip--night .eyebrow { color: var(--coral); }
.clip-strip--night .clip-frame {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.clip-strip--night .clip-frame__ph { color: rgba(240, 236, 228, 0.6); }

/* Credited clip — a client label sitting under one frame in the row */
.clip-strip__row > .clip-credit {
  flex: 0 0 calc((100% - 3 * clamp(0.9rem, 1.6vw, 1.4rem)) / 4);
  margin: 0;
}
.clip-credit .clip-frame { width: 100%; }
.clip-credit__label {
  margin-top: 0.7rem;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(242, 238, 230, 0.85);
}

/* Case-study blurb sitting above the clip row — same light-on-indigo
   treatment as the service cards (#F4F3EF heading, #FBFAF7 body). */
.case-study__head h2 { color: #F4F3EF; font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-top: 0.5rem; letter-spacing: -0.01em; }
.case-study__head p:not(.eyebrow) { color: #FBFAF7; max-width: 60ch; margin: 1rem auto 0; font-size: 1.05rem; }

/* Big ordinal marker above each numbered case study (01, 02, …) */
.case-study__no {
  display: block;
  font-family: var(--sans);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(244, 243, 239, 0.26);
  margin-bottom: 0.5rem;
}
/* One-line hook under the client name — larger than the body paragraphs */
.case-study__head p.case-study__lede {
  color: #F4F3EF;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  line-height: 1.4;
  max-width: 46ch;
  margin: 0.85rem auto 0.2rem;
}
/* Hairline divider between stacked case studies */
.case-study + .case-study {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-top: clamp(2.5rem, 5vw, 4rem);
}

/* --------------------------------------------------------------------------
   Homepage flywheel — one network, both sides
   -------------------------------------------------------------------------- */
.flywheel-home { padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(3.5rem, 7vw, 6rem); }
.flywheel-home__head {
  max-width: 52ch;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.flywheel-home__head h2 { font-size: clamp(1.8rem, 3.3vw, 2.6rem); margin: 0 0 0.9rem; }
.flywheel-home__head p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; margin: 0; }

.flywheel-home__stage {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
  max-width: 1040px;
  margin: 0 auto;
}

/* The wheel */
.flywheel-home__wheel { position: relative; aspect-ratio: 1 / 1; }
.flywheel-home__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flywheel-home__track { fill: none; stroke: var(--line); stroke-width: 1.5; }
.flywheel-home__spin { transform-origin: 300px 300px; animation: flywheel-home-rotate 36s linear infinite; }
.flywheel-home__comet {
  fill: none;
  stroke: var(--coral);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 10 40; /* two golden arcs opposite each other */
}
.flywheel-home__arrow {
  fill: none;
  stroke: var(--coral-deep);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes flywheel-home-rotate { to { transform: rotate(360deg); } }

.flywheel-home__arc-text {
  font-size: 15px; /* SVG units — scales with the wheel */
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: var(--ink-soft);
}

.flywheel-home__center {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 0.45rem;
  justify-items: center;
  text-align: center;
  max-width: 52%;
}
.flywheel-home__center-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
/* Brands / Creators chips sit on the ring's left + right */
.flywheel-home__chip {
  position: absolute;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1.15em;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.flywheel-home__chip--brands  { left: 15%; transform: translate(-50%, -50%); }
.flywheel-home__chip--creators { left: 85%; transform: translate(-50%, -50%); }
.flywheel-home__chip:hover { background: var(--ink); color: var(--paper); }
.flywheel-home__chip:hover .flywheel-home__dot { background: var(--coral); }
.flywheel-home__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
  transition: background .35s var(--ease);
}

/* The two sides, in words */
/* min-width: 0 lets this grid item shrink to its track instead of holding its
   480px min-content and overflowing the page on phones. */
.flywheel-home__sides { display: grid; gap: clamp(1.8rem, 4vw, 2.8rem); min-width: 0; }
.flywheel-home__side h3 { font-size: 1.15rem; margin: 0 0 0.55rem; }
.flywheel-home__side p { color: var(--ink-soft); line-height: 1.6; margin: 0 0 0.8rem; max-width: 44ch; }
.flywheel-home__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 0.15em;
}
.flywheel-home__link .arrow { transition: transform .35s var(--ease); }
.flywheel-home__link:hover .arrow { transform: translateX(4px); }

@media (max-width: 880px) {
  /* minmax(0, 1fr) keeps this a definite-width column so the inner auto-fit grid
     below can actually collapse to one column instead of forcing a 480px
     min-content that blows the page out horizontally on phones. */
  .flywheel-home__stage { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .flywheel-home__wheel { width: min(76vw, 420px); margin: 0 auto; }
  .flywheel-home__sides {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    max-width: 640px;
    margin: 0 auto;
  }
}
@media (max-width: 560px) {
  .flywheel-home__wheel { width: min(86vw, 340px); }
  .flywheel-home__chip { font-size: 0.85rem; padding: 0.4em 0.9em; }
  .flywheel-home__arc-text { font-size: 17px; }
  /* Stack the two sides on phones — auto-fit won't reliably collapse here */
  .flywheel-home__sides { grid-template-columns: 1fr; max-width: 32rem; }
  /* Tighten the center label so the Brands/Creators chips clear it */
  .flywheel-home__center { max-width: 42%; gap: 0.3rem; }
  .flywheel-home__center-label { font-size: 0.62rem; letter-spacing: 0.12em; }
}
@media (prefers-reduced-motion: reduce) {
  .flywheel-home__spin { animation: none; }
}

/* Service detail sections */
.service-detail { scroll-margin-top: 92px; }
.service-detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.service-detail__grid--rev .service-detail__media { order: -1; }
.service-detail__text h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.service-detail__text > p { color: var(--ink-soft); margin-top: 1rem; max-width: 48ch; font-size: 1.05rem; }
.service-detail__list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.65rem; }
.service-detail__list li { position: relative; padding-left: 1.5rem; color: var(--ink-soft); }
.service-detail__list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
}
.service-detail__media {
  position: relative;
  min-height: clamp(280px, 32vw, 430px);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Drop an <img class="media-img"> inside .service-detail__media to replace the placeholder */
.service-detail__media .media-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
@media (max-width: 760px) {
  .service-detail__grid { grid-template-columns: 1fr; }
  .service-detail__grid--rev .service-detail__media { order: 0; }
}

/* Service sections with a decorative background instead of an image.
   Shared layout; each section picks a motif modifier (rings / mesh / dots /
   beams / sunburst / grid) for variety. Colour driven by --design-accent. */
.service-detail--design { position: relative; overflow: hidden; }
.service-detail--design .service-detail__grid { display: block; }
.service-detail--design .service-detail__text { position: relative; z-index: 1; max-width: 58ch; margin-left: clamp(1rem, 14vw, 14rem); }
.service-detail--design::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* Rings — concentric circles glowing from the top-right */
.service-detail--rings::before {
  top: clamp(-220px, -11vw, -70px); right: clamp(-200px, -8vw, -40px);
  width: min(62vw, 640px); aspect-ratio: 1 / 1;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--design-accent) 24%, transparent) 0%, transparent 60%),
    repeating-radial-gradient(circle, transparent 0 44px, color-mix(in srgb, var(--design-accent) 17%, transparent) 44px 47px);
  -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 78%);
          mask-image: radial-gradient(circle, #000 55%, transparent 78%);
}

/* Mesh — soft overlapping colour blobs */
.service-detail--mesh::before {
  inset: 0;
  background:
    radial-gradient(42% 58% at 80% 22%, color-mix(in srgb, var(--design-accent) 32%, transparent), transparent 70%),
    radial-gradient(36% 52% at 98% 82%, color-mix(in srgb, var(--coral) 26%, transparent), transparent 70%),
    radial-gradient(30% 46% at 60% 66%, color-mix(in srgb, var(--design-accent) 18%, transparent), transparent 72%);
}

/* Dots — dot grid clustered in the top-right */
.service-detail--dots::before {
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--design-accent) 42%, transparent) 2.2px, transparent 2.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 68%);
          mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 68%);
}

/* Beams — diagonal light beams sweeping the top-right */
.service-detail--beams::before {
  top: -25%; right: -12%; width: min(64vw, 660px); height: 150%;
  background: repeating-linear-gradient(118deg,
    transparent 0 24px,
    color-mix(in srgb, var(--design-accent) 16%, transparent) 24px 40px);
  -webkit-mask-image: radial-gradient(circle at 78% 32%, #000 38%, transparent 74%);
          mask-image: radial-gradient(circle at 78% 32%, #000 38%, transparent 74%);
}

/* Sunburst — conic rays radiating from the top-right */
.service-detail--sunburst::before {
  top: clamp(-280px, -14vw, -100px); right: clamp(-240px, -10vw, -70px);
  width: min(68vw, 720px); aspect-ratio: 1 / 1; border-radius: 50%;
  background: repeating-conic-gradient(
    color-mix(in srgb, var(--design-accent) 17%, transparent) 0deg 5deg,
    transparent 5deg 11deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, #000 34%, transparent 70%);
          mask-image: radial-gradient(circle, #000 0%, #000 34%, transparent 70%);
}

/* Grid — fine line grid fading from the top-right */
.service-detail--grid::before {
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--design-accent) 24%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--design-accent) 24%, transparent) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 62%);
          mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 62%);
}

/* Flipped layout (zig-zag): text on the right, design mirrored to the left.
   Matches the non-flip inset (clamp(1rem, 14vw, 14rem)) so left- and
   right-set cards sit as mirror images around the rail instead of the
   right-set cards hugging the edge. */
.service-detail--flip .service-detail__text { margin-left: auto; margin-right: clamp(1rem, 14vw, 14rem); }
.service-detail--flip.service-detail--rings::before { right: auto; left: clamp(-200px, -8vw, -40px); }
.service-detail--flip.service-detail--sunburst::before { right: auto; left: clamp(-240px, -10vw, -70px); }
.service-detail--flip.service-detail--beams::before {
  right: auto; left: -12%;
  background: repeating-linear-gradient(62deg,
    transparent 0 24px,
    color-mix(in srgb, var(--design-accent) 16%, transparent) 24px 40px);
  -webkit-mask-image: radial-gradient(circle at 22% 32%, #000 38%, transparent 74%);
          mask-image: radial-gradient(circle at 22% 32%, #000 38%, transparent 74%);
}
.service-detail--flip.service-detail--mesh::before,
.service-detail--flip.service-detail--dots::before,
.service-detail--flip.service-detail--grid::before { transform: scaleX(-1); }

/* Wandering thread that connects the service sections.
   Each section's segment enters at top-centre and exits at bottom-centre, so
   adjacent segments line up seamlessly; it bows toward that section's text. */
.flow-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
  /* Fade the thread where it passes behind the text; crisp at the junctions */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 22%, transparent 40%, transparent 60%, #000 78%, #000 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 22%, transparent 40%, transparent 60%, #000 78%, #000 100%);
}
.flow-line path {
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-opacity: 0.6;
}
.service-detail--flip .flow-line { transform: scaleX(-1); }

/* One large section: light-navy field with grain and slow drifting white light.
   The inner service sections are transparent so the field shows through, and
   their individual motif backgrounds are disabled. */
.services-flow {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Espresso field — warm tan up top fading to a deep espresso-brown in the
     lower-right corner; the warm For Brands palette (replaces the indigo field) */
  background-color: #43311F;
  background-image:
    radial-gradient(115% 85% at 24% 6%, #8a6a48 0%, rgba(138, 106, 72, 0) 56%),
    radial-gradient(125% 110% at 102% 104%, #1c1108 0%, rgba(28, 17, 8, 0) 52%),
    linear-gradient(152deg, #5c4630 0%, #43311F 48%, #2b1c0f 100%);
  /* The page hero lives inside the field and brings its own top padding */
  padding-top: 0;
}
.services-flow > *:not(.flow-fx) { position: relative; z-index: 1; }

/* Animated white light + grain layer, behind the content */
.flow-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* Night glimmer — sparse light specks at two scales, same token as the homepage
   inner-circle card, blended so they read as tiny glints over the indigo field */
.flow-fx::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--glimmer), var(--glimmer);
  background-size: 200px 200px, 340px 340px;
  background-position: 0 0, 70px 50px;
  mix-blend-mode: screen;
  opacity: 0.34;
  animation: glimmer-breathe 7s var(--ease) infinite;
}
.flow-fx__orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
  will-change: transform, opacity;
}
.flow-fx__orb--1 { width: 48vw; height: 48vw; top: 3%;    left: -12%; animation: flow-orb-a 26s ease-in-out infinite alternate; }
.flow-fx__orb--2 { width: 42vw; height: 42vw; top: 40%;   right: -14%; animation: flow-orb-b 33s ease-in-out infinite alternate; }
.flow-fx__orb--3 { width: 38vw; height: 38vw; bottom: 0%; left: 32%;  animation: flow-orb-c 29s ease-in-out infinite alternate; }
.flow-fx::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 150px 150px;
  opacity: 0.55;
  mix-blend-mode: overlay;
}
@keyframes flow-orb-a { from { transform: translate(0, 0) scale(1);    opacity: 0.5;  } to { transform: translate(16%, 12%)  scale(1.2); opacity: 0.9;  } }
@keyframes flow-orb-b { from { transform: translate(0, 0) scale(1.15); opacity: 0.85; } to { transform: translate(-14%, -10%) scale(1);  opacity: 0.45; } }
@keyframes flow-orb-c { from { transform: translate(0, 0) scale(1);    opacity: 0.45; } to { transform: translate(10%, -12%) scale(1.22); opacity: 0.8; } }
@media (prefers-reduced-motion: reduce) {
  .flow-fx__orb { animation: none; }
  .flow-fx::before { animation: none; }
}

/* Inner sections sit transparent over the shared field; no per-section design */
.services-flow .service-detail.service-detail--design { background: transparent; }
.services-flow .service-detail--design::before { display: none; }
/* White connecting thread + lavender bullets to suit the indigo + white palette */
.services-flow .flow-line path { stroke: rgba(255, 255, 255, 0.5); }
.services-flow .service-detail--design .service-detail__list li::before { background: #C9BEFF; }
.service-detail--design .service-detail__text h2 { color: #F4F3EF; }
/* Near-opaque warm white so body + bullet copy clears WCAG AA (4.5:1) even over
   the bright periwinkle peak of the indigo field. Headings stay a touch softer
   (#F4F3EF) because as large text they only need 3:1. */
.service-detail--design .service-detail__text > p,
.service-detail--design .service-detail__list li { color: #FBFAF7; }

/* Hero inside the indigo field — drop the cream corner glow, go light-on-dark */
.services-flow .page-hero::before { display: none; }
.services-flow .page-hero h1 { color: #F4F3EF; }
.services-flow .page-hero .lede { color: #FBFAF7; }

/* Intro heading between the hero and the service sections — same type style
   as the service-card h2s so it adds no new size/weight to the page; enough
   bottom padding that the first waypoint dot sits clearly below it */
.flow-intro { text-align: center; padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(1.5rem, 3.5vw, 2rem); }
.flow-intro h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  color: #F4F3EF;
}
/* Pull the first service card up toward the intro so the label reads as the
   title of the list that follows, not a stray caption floating in the field */
.services-flow .flow-intro + .service-detail { padding-top: clamp(1.75rem, 4vw, 3rem); }

/* Tighter rhythm inside the night field: the default .section padding leaves
   ~13rem of empty field between cards, which reads as dead space now that the
   sections carry no imagery. */
.services-flow .service-detail { padding-block: clamp(2.25rem, 5vw, 4rem); }

/* Phase markers along the thread — "We start with strategy" / "Then we execute".
   Symmetric padding keeps the label centred in its gap, clear of the waypoint
   dot that glows on the seam below it. */
.flow-phase { text-align: center; padding-block: clamp(3.5rem, 7.5vw, 6rem); }
.flow-phase p {
  display: inline-flex;
  align-items: center;
  gap: 1em;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(244, 243, 239, 0.92);
  text-shadow: 0 0 24px rgba(224, 178, 120, 0.35);
}
.flow-phase p::before,
.flow-phase p::after {
  content: "";
  width: 56px;
  height: 1px;
}
.flow-phase p::before { background: linear-gradient(90deg, transparent, rgba(244, 243, 239, 0.6)); }
.flow-phase p::after { background: linear-gradient(90deg, rgba(244, 243, 239, 0.6), transparent); }
/* Centre each marker in its gap: trim the previous card's bottom padding and
   the next card's top padding so the marker's own padding sets the gap */
.services-flow .service-detail:has(+ .flow-phase) { padding-bottom: clamp(2rem, 4vw, 3rem); }
.services-flow .flow-phase + .service-detail { padding-top: clamp(2.25rem, 5vw, 3.75rem); }
.services-flow .flow-intro + .flow-phase { padding-top: 0.5rem; }
@media (max-width: 560px) {
  .flow-phase p { font-size: 0.88rem; letter-spacing: 0.22em; }
  .flow-phase p::before, .flow-phase p::after { width: 24px; }
}

/* Frosted-glass service cards floating on the field */
.services-flow .service-detail--design .service-detail__text {
  position: relative;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -35px rgba(30, 18, 8, 0.6);
  /* The card is also the .reveal element, whose transition this overrides —
     transform runs a touch faster here so the hover zoom feels responsive
     (the reveal slide just gets slightly snappier). Reduced-motion visitors
     are covered by the .reveal transform:none !important override. */
  transition: opacity .7s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.services-flow .service-detail--design .service-detail__text:hover {
  transform: scale(1.02);
  box-shadow: 0 36px 70px -35px rgba(9, 7, 55, 0.7);
}
/* Keep long headings clear of the ghost number in the corner */
.services-flow .service-detail--design .service-detail__text h2 { padding-right: clamp(3rem, 6vw, 5rem); }

/* Ghost service number in the card corner */
.service-detail__no {
  position: absolute;
  top: 1.1rem;
  right: 1.4rem;
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(233, 232, 245, 0.18);
  pointer-events: none;
}

/* Glowing waypoint where the thread crosses into each service. The sections'
   overflow is opened up so the dot's halo isn't clipped at the seam (their
   motif ::before layers are display:none inside the field, so nothing else
   can spill out). */
.services-flow .service-detail--design { overflow: visible; }
.services-flow .service-detail--design::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #E9E5FF;
  box-shadow:
    0 0 0 4px rgba(201, 190, 255, 0.22),
    0 0 20px 6px rgba(201, 190, 255, 0.5);
}

/* Thread draws itself in as each service scrolls into view (paths carry
   pathLength="1" so one dash covers the whole curve) */
.js .services-flow .flow-line path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s var(--ease) 0.15s;
}
.js .services-flow .service-detail.is-in .flow-line path { stroke-dashoffset: 0; }

/* Bullets stagger in after their card reveals */
.js .services-flow .service-detail__list li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s var(--ease) .2s, transform .55s var(--ease) .2s;
}
.js .services-flow .service-detail__list li:nth-child(2) { transition-delay: .34s; }
.js .services-flow .service-detail__list li:nth-child(3) { transition-delay: .48s; }
.js .services-flow .reveal.is-in .service-detail__list li { opacity: 1; transform: none; }


@media (prefers-reduced-motion: reduce) {
  .js .services-flow .flow-line path { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  .js .services-flow .service-detail__list li { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Night-field refinements (2026-07-13)
   1) The thread is one straight luminous rail down the centre of the field —
      the curved per-section SVGs never aligned at the seams. Every waypoint
      dot sits exactly on it, and it breaks cleanly around the phase labels.
   2) One disciplined type ladder: hero → section label → card titles, with a
      single tracked-caps kicker style for the phase markers.
   3) Field CTAs are quiet outline buttons, not white slabs.
   -------------------------------------------------------------------------- */

/* 1 — the rail. `all: unset` wipes the per-variant motif styles (opacity,
   border-radius, insets, sizes) that otherwise leak into these ::before
   elements and break the line into disconnected stubs. */
.services-flow .service-detail--design::before {
  all: unset;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.5px;
  transform: translateX(-50%);
  background: rgba(233, 229, 255, 0.45);
  box-shadow: 0 0 12px rgba(201, 190, 255, 0.35);
}
.services-flow section.service-detail:last-of-type::before {
  background: linear-gradient(180deg, rgba(233, 229, 255, 0.45) 0%, rgba(233, 229, 255, 0) 88%);
}
.flow-phase { position: relative; }
.flow-phase::before,
.flow-phase::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1.5px;
  transform: translateX(-50%);
  background: rgba(233, 229, 255, 0.45);
  box-shadow: 0 0 12px rgba(201, 190, 255, 0.35);
}
.flow-phase::before { top: 0; height: calc(50% - 1.6em); }
.flow-phase::after { bottom: 0; height: calc(50% - 1.6em); }
/* Nothing above the first marker to connect to */
.services-flow .flow-intro + .flow-phase::before { display: none; }

/* 2 — the type ladder (hero 51 → section 32 → card 27 → kicker 16) */
.services-flow .page-hero h1 { font-size: clamp(2.2rem, 4.2vw, 3.2rem); }
.services-flow .page-hero .lede { font-size: 1.05rem; }
.services-flow .flow-intro h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
.services-flow .service-detail__text h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
.services-flow .service-detail--design .service-detail__text h2 { padding-right: clamp(2rem, 3.5vw, 3rem); }
.services-flow .service-detail__text > p { font-size: 0.98rem; }
.services-flow .service-detail__list li { font-size: 0.92rem; }
.services-flow .service-detail__no {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  top: 1.4rem;
  right: 1.6rem;
  color: rgba(233, 232, 245, 0.24);
}


@media (max-width: 760px) {
  .service-detail--design::before { opacity: 0.7; }
  /* Collapse the desktop zig-zag indent (524 / 594) so every block shares one
     left gutter instead of alternating flush-left / deep-indent on phones. */
  .service-detail--design .service-detail__text { margin-inline: 0; }
}

/* --------------------------------------------------------------------------
   Audience selection (Section 2) — pastel rounded panels
   -------------------------------------------------------------------------- */
.choose { padding-bottom: clamp(3rem, 8vw, 6rem); }
.choose__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.choose__head h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }

.panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.panel {
  --panel-bg: var(--periwinkle);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(420px, 54vh, 580px);
  padding: clamp(1.9rem, 3vw, 2.9rem);
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.panel--businesses { --panel-bg: var(--periwinkle); }
.panel--creators  { --panel-bg: var(--coral-soft); }
/* Full-bleed photo that fades into the panel colour so bottom-aligned text stays legible */
.panel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* (2) Soft scrim — only behind the bottom text block, photo stays clear above */
.panel:has(.panel__img)::after {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--panel-bg) 80%, transparent) 0%,
    color-mix(in srgb, var(--panel-bg) 42%, transparent) 30%,
    transparent 54%
  );
  opacity: 1;
}
/* (1) Subtle halo so the type stays crisp over busy areas of the photo */
.panel:has(.panel__img) h3,
.panel:has(.panel__img) .panel__body {
  text-shadow: 0 1px 10px color-mix(in srgb, var(--panel-bg) 78%, transparent);
}
/* Shift the cityscape down so more skyline shows and less sky */
.panel--businesses .panel__img { object-position: center 82%; }

/* ==========================================================================
   Choose your path — full-width stacked rows. Each row is two separate rounded
   boxes (text + image) split by a diagonal, with a consistent margin (--m) that
   hugs every box on all sides.
   ========================================================================== */
.paths {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}
.path-row {
  --m: clamp(7px, 0.8vw, 12px);        /* the margin that hugs the boxes */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--m);
  padding: var(--m);
  border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--ink) 8%, var(--paper));   /* shows through as the margin */
  isolation: isolate;
  transition: box-shadow .5s var(--ease);
}
.path-row:hover { box-shadow: 0 30px 60px -38px color-mix(in srgb, var(--ink) 40%, transparent); }
.path-row__text {
  display: flex;
  flex-direction: column;
  padding: clamp(1.7rem, 4.5vw, 2.4rem);
  background: var(--paper);
  border-radius: calc(var(--radius-lg) - var(--m));
  z-index: 2;
}
.path-row h3 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.06;
  margin-top: 0;
}
.path-row__body {
  margin-top: 1rem;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 44ch;
}
.path-row__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  align-self: flex-start;
  margin-top: 1.6rem;
  font-weight: 600;
  color: var(--ink);
}
.path-row__link .arrow { transition: transform .4s var(--ease); }
.path-row:hover .path-row__link .arrow { transform: translateX(5px); }
.path-row__media {
  position: relative;
  min-height: clamp(220px, 56vw, 320px);
  border-radius: calc(var(--radius-lg) - var(--m));
  overflow: hidden;
}
.path-row__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.path-row--businesses .path-row__media img { object-position: center center; }
/* Her head/hair sit high in this portrait shot; bias the crop up so the face
   isn't clipped when the landscape frame covers it (esp. the tighter mobile box). */
/* Her head/hair sit high in this portrait shot; bias the crop down so the top
   of the frame lands just at her bun (no zoom — natural cover scale). */
.path-row--creators .path-row__media img { object-position: center 12%; }

@media (min-width: 760px) {
  .path-row {
    display: block;
    padding: 0;
    min-height: clamp(360px, 38vw, 500px);
    --slant: clamp(40px, 5vw, 100px);
    --L: 55%;                          /* text box's right edge (bottom of diagonal) */
  }
  /* Text box: hugged by --m on top/left/bottom, diagonal on the right */
  .path-row__text {
    position: absolute;
    top: var(--m); left: var(--m); bottom: var(--m);
    right: calc(100% - var(--L));
    padding-right: calc(var(--slant) + clamp(1.7rem, 4.5vw, 2.4rem));
    clip-path: polygon(0 0, calc(100% - var(--slant)) 0, 100% 100%, 0 100%);
  }
  /* Image box: hugged by --m on top/right/bottom, its diagonal left edge sits
     --m to the right of the text box's diagonal, so the gap is uniform */
  .path-row__media {
    position: absolute;
    top: var(--m); right: var(--m); bottom: var(--m);
    left: calc(var(--L) - var(--slant) + var(--m));
    min-height: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--slant) 100%);
  }
  .path-row__link { margin-top: auto; }
}
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--paper) 55%, transparent) 0%, transparent 55%);
  opacity: 0.7;
  z-index: -1;
  transition: opacity .5s var(--ease);
}
.panel:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--ink) 50%, transparent); }
.panel:hover::after { opacity: 1; }

.panel__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  align-self: flex-start;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 0.45em 0.95em;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  color: var(--ink);
}
.panel__num {
  position: absolute;
  top: clamp(1.5rem, 3vw, 2.5rem);
  right: clamp(1.5rem, 3vw, 2.6rem);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.8rem, 6vw, 4.4rem);
  line-height: 1;
  color: color-mix(in srgb, var(--ink) 12%, transparent);
  z-index: -1;
}
.panel h3 {
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  margin-top: auto;
}
.panel__body {
  margin-top: 0.9rem;
  font-size: 1.04rem;
  color: var(--ink-soft);
  max-width: 38ch;
}
.panel__meta {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chip {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.4em 0.85em;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--paper) 65%, transparent);
  color: var(--ink-soft);
}
.panel__cta {
  margin-top: 1.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6ch;
  align-self: flex-start;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.8em 1.4em;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.panel__cta .arrow { transition: transform .4s var(--ease); }
.panel:hover .panel__cta { background: #000; color: var(--paper); }
.panel:hover .panel__cta .arrow { transform: translateX(5px); }
.panel__link { color: inherit; }
.panel__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
}

/* --------------------------------------------------------------------------
   Generic content sections (interior pages)
   -------------------------------------------------------------------------- */
.section { padding: clamp(3rem, 7vw, 6.5rem) 0; }
.section--tint { background: var(--sand); }

/* Warm brick-red section with film grain to match the site's image treatment */
.section--brick { position: relative; background: #F2ECE4; isolation: isolate; padding-block: clamp(7.5rem, 15vw, 11rem); }
.section--brick::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 180px 180px;
  background-repeat: repeat;
  opacity: 0.28;
  mix-blend-mode: multiply;
}
.section--brick > .wrap { position: relative; z-index: 1; }
.section--brick .section__head h2 { color: var(--ink); }
.service-cta { text-align: center; background: transparent; padding: clamp(1rem, 3vw, 2.5rem) 0 clamp(5.5rem, 12vw, 9rem); margin-top: 0; }

/* --------------------------------------------------------------------------
   Momentum — dark gradient process showcase (For Brands)
   -------------------------------------------------------------------------- */
.momentum {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(4rem, 8vw, 7rem);
  color: var(--ink);
  /* Faint warm wash at the base ties the light section back to the espresso field above */
  background: linear-gradient(180deg, #fff 55%, #F5F1E9 100%);
}
.momentum::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--coral), var(--coral-deep));
  z-index: 2;
}
.momentum > .wrap { position: relative; z-index: 1; }
.momentum__glow { display: none; }
.momentum__lines {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  stroke: var(--ink);
  stroke-width: 1;
  opacity: 0.07;
  z-index: 0;
}
.momentum__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.momentum__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.momentum__eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: linear-gradient(90deg, var(--coral), var(--coral-deep));
}
.momentum__intro h2 {
  color: var(--ink);
  margin-top: 1rem;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  letter-spacing: -0.02em;
}
.momentum__intro .btn { margin-top: 2rem; }

.momentum__steps {
  position: relative;
  list-style: none;
  margin: 0; padding: 0;
}
.momentum__step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.15rem;
  align-items: start;
  padding: 1.4rem 1.25rem;
  border-radius: 16px;
  border: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.momentum__step:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  transform: translateX(4px);
}
.momentum__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(150deg, #5c4630, #2b1c0f);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 8px 20px -8px rgba(92, 70, 48, 0.5);
}
.momentum__copy h3 { font-size: 1.2rem; color: var(--ink); }
.momentum__copy p {
  margin-top: 0.4rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
@media (max-width: 820px) {
  .momentum__inner { grid-template-columns: 1fr; gap: 2.25rem; }
}
.section__head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__head h2 { font-size: clamp(1.8rem, 3.3vw, 2.6rem); margin-top: 0.9rem; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.feature {
  padding: clamp(1.6rem, 2.5vw, 2.1rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.feature:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -34px color-mix(in srgb, var(--ink) 45%, transparent); }
.feature__no {
  display: inline-flex;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--accent-tint, var(--coral-soft));
  width: 2.4em; height: 2.4em;
  align-items: center; justify-content: center;
  border-radius: 50%;
}
.feature h3 { font-size: 1.35rem; margin: 1rem 0 0.5rem; }
.feature p { color: var(--ink-soft); font-size: 0.98rem; }

/* Cards with an image space above the content (scoped to audience grid) */
.audience-grid .feature {
  padding: 0;
  background: transparent;
  border: none;
}
.audience-grid .feature:hover { transform: none; box-shadow: none; }
.audience-grid .feature__media {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1.1rem;
  background: linear-gradient(135deg, #EDEAE2, #E1DDD3);
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
.audience-grid .feature__media svg { width: 32px; height: 32px; opacity: 0.4; color: var(--ink); }
.audience-grid .feature__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.audience-grid .feature h3 { font-size: 1.2rem; line-height: 1.15; margin: 0 0 0.35rem; }
.audience-grid .feature p { font-size: 0.9rem; line-height: 1.4; }

/* Audience — editorial split (single image + numbered list) */
.audience-split {
  --accent: var(--crt);
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.audience-split__media {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 34px 64px -36px rgba(0, 0, 0, 0.32);
}
.audience-split__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.audience-split__title {
  font-size: clamp(1.8rem, 3.3vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--ink);
}
.audience-list { list-style: none; margin: 0; padding: 0; }
.audience-list__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
  padding: clamp(1.1rem, 2.2vw, 1.5rem) 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.audience-list__item:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.audience-list__no {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--coral-deep);
}
.audience-list__text h3 { font-size: 1.25rem; line-height: 1.2; margin: 0 0 0.3rem; }
.audience-list__text p { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.45; margin: 0; }

@media (max-width: 760px) {
  .audience-split { grid-template-columns: 1fr; gap: clamp(1.5rem, 5vw, 2.25rem); }
  .audience-split__media { aspect-ratio: 5 / 4; }
}

/* Vertical member list — alternating image + text rows with subtle motion */
.member-list { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
.member-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: center;
}
.member-row:nth-child(even) .member-row__media { order: 2; }
.member-row__media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #EDEAE2, #E1DDD3);
}
.member-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.member-ph svg { width: 40px; height: 40px; opacity: 0.4; color: var(--ink); }
.member-row__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.member-row:hover .member-row__img { transform: scale(1.05); }
.member-row__no {
  display: block;
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
}
.member-row__body h3 {
  font-size: clamp(1.55rem, 2.6vw, 2.15rem);
  margin: 0.7rem 0 0;
  display: inline-block;
}
/* Gradient accent line that draws in on reveal + hover */
.member-row__body h3::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  margin-top: 0.7rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--coral), var(--coral-deep));
  transition: width .7s var(--ease);
}
.member-row.is-in .member-row__body h3::after { width: 52px; }
.member-row:hover .member-row__body h3::after { width: 84px; }
.member-row__body p {
  color: var(--ink-soft);
  margin-top: 1.1rem;
  max-width: 46ch;
  font-size: 1.05rem;
  line-height: 1.6;
}
@media (max-width: 760px) {
  .member-row { grid-template-columns: 1fr; gap: 1.25rem; }
  .member-row:nth-child(even) .member-row__media { order: 0; }
}

/* Page hero for interior pages */
.page-hero { position: relative; padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(2rem, 4vw, 3rem); overflow-x: clip; overflow-y: visible; }
.page-hero.biz  { --accent: var(--biz); --accent-tint: var(--periwinkle); }
.page-hero.crt  { --accent: var(--crt); --accent-tint: var(--coral-soft); }
.page-hero::before {
  content: "";
  position: absolute;
  top: -30%; right: -8%;
  width: 50vw; height: 50vw;
  max-width: 620px; max-height: 620px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-tint, var(--coral-soft)) 90%, transparent), transparent 70%);
  filter: blur(30px);
  opacity: 0.8;
  z-index: 0;
  pointer-events: none;
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(2.1rem, 5.2vw, 4rem); font-weight: 550; margin-top: 1rem; letter-spacing: -0.02em; text-wrap: balance; }
.page-hero .lede { font-size: 1.125rem; line-height: 1.4; max-width: 32rem; }
.page-hero .btn { font-size: 0.9375rem; font-weight: 500; padding: 0.8rem 1.6rem; }
/* Smaller hero heading — matches the "Content-led GTM" size on /businesses */
.page-hero--sm h1 { font-size: clamp(2.2rem, 4.2vw, 3.2rem); }
.page-hero--center { text-align: center; }
.page-hero--center .lede { margin-left: auto; margin-right: auto; }

/* Split hero — text left, tilted image collage right.
   Clip the x-axis so the decorative ::before glow can't bleed past the
   viewport (which caused horizontal page scroll), while keeping y visible
   so the tilted collage cards and their shadows can still overhang. */
.page-hero--split { overflow-x: clip; overflow-y: visible; padding-bottom: clamp(4.5rem, 9vw, 8rem); }
.hero-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero-collage {
  position: relative;
  width: 100%;
  aspect-ratio: 8 / 9;
}
.hero-collage__item {
  position: absolute;
  margin: 0;
  background: #fff;
  padding: 8px;
  border-radius: 16px;
  box-shadow: 0 26px 55px -26px rgba(0, 0, 0, 0.35);
  transform: var(--rot, none);
  will-change: transform;
}
.hero-collage__item .collage-ph,
.hero-collage__item .collage-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  object-fit: cover;
  background: linear-gradient(135deg, #EDEAE2, #E1DDD3);
}
.hero-collage__item .collage-ph svg { width: 34px; height: 34px; opacity: 0.4; color: var(--ink); }
.hero-collage__item--1 { --rot: rotate(-2deg); width: 48%; top: 11%;   left: 7%;   z-index: 2; }
.hero-collage__item--2 { --rot: rotate(3deg);  width: 37%; top: 7%;    right: 10%; z-index: 1; }
.hero-collage__item--3 { --rot: rotate(2deg);  width: 40%; bottom: 3%; right: 12%; z-index: 3; }
.hero-collage__item--1 .collage-ph,
.hero-collage__item--1 .collage-img { aspect-ratio: 5 / 6; }

.hero-collage__badge {
  position: absolute;
  left: 26%;
  bottom: 9%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: #fff;
  border-radius: 14px;
  padding: 0.6rem 0.85rem;
  box-shadow: 0 20px 45px -22px rgba(0, 0, 0, 0.35);
}
.hero-collage__avatar {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--coral), var(--coral-deep));
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}
.hero-collage__copy { display: grid; line-height: 1.25; }
.hero-collage__copy strong { font-size: 0.92rem; font-weight: 600; }
.hero-collage__copy span { font-size: 0.78rem; color: var(--ink-faint); }

@media (max-width: 860px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-collage { aspect-ratio: 5 / 6; margin-top: 1.5rem; }
}
@media (max-width: 480px) {
  .hero-collage__badge { left: 0; bottom: 8%; }
}

/* ---- Hero media: grid variant (structured, aligned, no rotation) ---- */
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(0.55rem, 1.3vw, 0.9rem);
  aspect-ratio: 5 / 6;
}
.hero-grid__item {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 26px 55px -30px rgba(0, 0, 0, 0.30);
  background: linear-gradient(135deg, #EDEAE2, #E1DDD3);
}
.hero-grid__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-grid__item--tall { grid-column: 1; grid-row: 1 / 3; }
.hero-grid__item--tall img { object-position: center 28%; }
.hero-grid__badge {
  position: absolute;
  left: 5%;
  bottom: 6%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: #fff;
  border-radius: 14px;
  padding: 0.6rem 0.85rem;
  box-shadow: 0 20px 45px -22px rgba(0, 0, 0, 0.35);
}

.page-hero .accent-bar {
  width: 60px; height: 5px; border-radius: 5px;
  background: var(--accent, var(--coral));
  margin-bottom: 1.5rem;
}

.cta-band {
  text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter);
}
.cta-band .wrap {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Warm bridge-orange field — matches the homepage newsletter card */
  background-color: #a85327;
  background-image:
    radial-gradient(115% 85% at 24% 6%, #e6a266 0%, rgba(230, 162, 102, 0) 56%),
    radial-gradient(125% 110% at 102% 104%, #5e2413 0%, rgba(94, 36, 19, 0) 52%),
    linear-gradient(152deg, #d98d52 0%, #c26a34 48%, #8f3f1d 100%);
  color: var(--paper);
  border-radius: clamp(20px, 2.5vw, 32px);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 3rem);
  max-width: 860px;
}
/* Glitter layer — same sparse light specks as the newsletter card.
   border-radius on the texture layers themselves: WebKit doesn't clip
   mix-blend-mode layers to the ancestor's rounded corners. */
.cta-band .wrap::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  background-image: var(--glimmer), var(--glimmer);
  background-size: 200px 200px, 340px 340px;
  background-position: 0 0, 70px 50px;
  mix-blend-mode: screen;
  opacity: 0.5;
  animation: glimmer-breathe 7s var(--ease) infinite;
  pointer-events: none;
}
/* Film grain — same pass as the newsletter card */
.cta-band .wrap::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  background-image: var(--grain);
  background-size: 100px 100px;
  background-repeat: repeat;
  opacity: 0.9;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.cta-band .wrap > * { position: relative; z-index: 2; }
.cta-band h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); color: #FAF3E9; }
.cta-band p { color: rgba(250, 240, 228, 0.85); margin: 0.7rem auto 1.3rem; max-width: 48ch; }
.cta-band h2 + .btn { margin-top: 1.3rem; }
.cta-band .btn { padding: 0.7em 1.5em; font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   Inner-circle CTA — contained "city at night" card on the cream canvas
   -------------------------------------------------------------------------- */
.newsletter {
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  background: var(--paper);
}
.newsletter__card {
  position: relative;
  overflow: hidden;
  border-radius: clamp(20px, 2.5vw, 32px);
  min-height: clamp(150px, 14vw, 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 5vw, 4rem);
  max-width: 860px;
  margin-inline: auto;
}
/* Softened indigo field — the For Brands "services-flow" palette with the saturation
   pulled down: dusty periwinkle up top fading to a muted navy-indigo in the lower-right.
   Drop <img class="newsletter__img" …> to replace with a real image */
.newsletter__bg {
  position: absolute; inset: 0; z-index: 0;
  background-color: #6a4e34;
  background-image:
    radial-gradient(115% 85% at 24% 6%, #b88f57 0%, rgba(184, 143, 87, 0) 56%),
    radial-gradient(125% 110% at 102% 104%, #2e1f12 0%, rgba(46, 31, 18, 0) 52%),
    linear-gradient(152deg, #8a6842 0%, #6d5236 48%, #3d2c1a 100%);
}
.newsletter__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* Glitter layer — sparse light specks at two scales, blended so they read as tiny glints */
.newsletter__overlay {
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  background-image: var(--glimmer), var(--glimmer);
  background-size: 200px 200px, 340px 340px;
  background-position: 0 0, 70px 50px;
  mix-blend-mode: screen;
  opacity: 0.5;
  animation: glimmer-breathe 7s var(--ease) infinite;
}
@keyframes glimmer-breathe {
  0%, 100% { opacity: 0.28; }
  50%      { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .newsletter__overlay, .cta-band .wrap::before { animation: none; }
}
/* Heavy film-grain pass — sits above the indigo field + glimmer but below the copy so
   text stays crisp. Denser tile + higher opacity for a grittier, grainier finish. */
.newsletter__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 100px 100px;
  opacity: 0.9;
  mix-blend-mode: overlay;
}
.newsletter__inner { position: relative; z-index: 2; max-width: 660px; margin-inline: auto; }
.newsletter__title {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #F5EFE6;
}
.newsletter__desc {
  margin: 0.7rem auto 1.3rem;
  max-width: 52ch;
  color: rgba(240, 233, 222, 0.82);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.55;
}
.newsletter__form {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}
.newsletter__form input {
  flex: 1 1 280px;
  max-width: 330px;
  font: inherit;
  font-size: 0.95rem;
  padding: 0.7em 1.15em;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(232, 214, 190, 0.34);
  background: rgba(240, 230, 218, 0.10);
  color: var(--paper);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.newsletter__form .btn { padding: 0.7em 1.5em; font-size: 0.95rem; }
.newsletter__form input::placeholder { color: rgba(236, 222, 205, 0.6); }
.newsletter__form input:focus { outline: none; border-color: rgba(232, 214, 190, 0.75); background: rgba(240, 230, 218, 0.16); }
.newsletter__note { margin-top: 0.75rem; font-size: 0.8rem; color: rgba(236, 222, 205, 0.5); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: color-mix(in srgb, var(--paper) 76%, transparent);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
}
.site-footer a { color: color-mix(in srgb, var(--paper) 76%, transparent); transition: color .25s var(--ease); }
.site-footer a:hover { color: var(--paper); }
.footer__top {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 2rem 3.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
}
.footer__brand .brand { color: var(--paper); font-size: 1.5rem; }
.footer__brand p { margin-top: 1rem; max-width: 32ch; font-size: 0.92rem; }
.footer__col h4 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 52%, transparent);
  margin-bottom: 1rem;
}
.footer__col ul { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.footer__col a { font-size: 0.92rem; }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.75rem;
  font-size: 0.84rem;
  color: color-mix(in srgb, var(--paper) 52%, transparent);
}
.footer__social { display: flex; gap: 1.25rem; }

/* --------------------------------------------------------------------------
   Reveal-on-scroll
   -------------------------------------------------------------------------- */
/* Hidden only when JS is active (.js added by main.js); without JS, content stays visible */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
  .intro__grid { grid-template-columns: 1fr; align-items: start; }
  .intro__detail { border-top: 1px solid var(--line); padding-top: 1.5rem; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  /* PRD: stack vertically, Businesses first then Creators */
  .panels { grid-template-columns: 1fr; }
  .panel { min-height: 360px; }

  .nav {
    position: fixed;
    inset: 76px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1.5rem;
    transform: translateY(-130%);
    transition: transform .4s var(--ease);
    box-shadow: 0 18px 40px -24px rgba(0,0,0,.3);
  }
  .nav.is-open { transform: translateY(0); }
  .nav a:not(.btn) { padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
  .nav a.is-active::after { display: none; }
  .nav__cta { margin: 1rem 0 0; }
  .nav__cta .btn { width: 100%; justify-content: center; }

  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    background: transparent;
    border: 0;
    padding: 10px;
  }
  .nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s var(--ease); }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .footer__top { grid-template-columns: 1fr 1fr; }
}

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

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   Film grain overlay — applied to every image container that holds an <img>
   -------------------------------------------------------------------------- */
/* No position:relative helper needed — every target below already establishes
   its own positioning context (.path-row__media and .hero-collage__item become
   position:absolute at desktop widths, so overriding them here collapsed them). */
.media-frame:has(> img)::after,
.service-detail__media:has(> img)::after,
.member-row__media:has(> img)::after,
.path-row__media:has(> img)::after,
.feature__media:has(> img)::after,
.hero-collage__item:has(> img)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 180px 180px;
  background-repeat: repeat;
  opacity: 0.5;
  mix-blend-mode: overlay;
}

/* Hero collage cards have an 8px white frame + rounded inner image */
.hero-collage__item:has(> img)::after {
  inset: 8px;
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   Case study page + For Brands "Selected work" teaser
   -------------------------------------------------------------------------- */
/* Eyebrow sits on the dark indigo hero — use the bright accent so it reads */
.services-flow .page-hero .eyebrow { color: var(--coral); }

/* "View the … case study →" link under the Selected-work clip row (on indigo) */
.clip-strip__more { text-align: center; margin-top: clamp(1.6rem, 3.2vw, 2.4rem); }
.clip-strip__more a {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  color: var(--paper);
  font-weight: 600;
  font-size: 0.95rem;
}
.clip-strip__more a .arrow { transition: transform .35s var(--ease); }
.clip-strip__more a:hover .arrow { transform: translateX(4px); }

/* "← Back to For Brands" link below the case study (on the light page base) */
.case-study-back { text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(4rem, 9vw, 7rem); }
.case-study-back a {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  color: var(--ink);
  font-weight: 500;
}
.case-study-back a .arrow { transition: transform .35s var(--ease); }
.case-study-back a:hover { color: var(--coral-deep); }
.case-study-back a:hover .arrow { transform: translateX(-4px); }


/* ==========================================================================
   For Brands — condensed service grid (icon cards)
   Replaces the six stacked text sections with two labelled bands of icon
   cards on the same indigo "night" field. Frosted-glass styling mirrors the
   former .service-detail cards; the central rail is dropped (grid, not stack).
   ========================================================================== */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.9rem, 1.8vw, 1.35rem);
  margin-top: clamp(1.25rem, 3vw, 2rem);
}
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -35px rgba(30, 18, 8, 0.6);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.svc-card:hover {
  transform: translateY(-4px);
  border-color: rgba(214, 178, 130, 0.55);
  box-shadow: 0 38px 72px -35px rgba(30, 18, 8, 0.78);
}
.svc-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: #F3ECDF;
  background: rgba(214, 178, 130, 0.14);
  border: 1px solid rgba(214, 178, 130, 0.32);
  margin-bottom: clamp(0.9rem, 1.8vw, 1.15rem);
}
.svc-card__icon svg { width: 24px; height: 24px; display: block; }
.svc-card__no {
  position: absolute;
  top: 1.15rem;
  right: 1.35rem;
  font-family: var(--sans);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(240, 232, 220, 0.22);
}
.svc-card__title {
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  color: #F4F3EF;
  margin: 0 0 0.5rem;
}
.svc-card__desc {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #EFE7DA;
  margin: 0;
}

/* Reveal fade + gentle per-card stagger as each band scrolls in
   (wins over the generic .js .reveal transition by source order) */
.js .svc-card {
  transition: opacity .7s var(--ease), transform .4s var(--ease),
              box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.js .svc-grid .svc-card:nth-child(2) { transition-delay: .08s; }
.js .svc-grid .svc-card:nth-child(3) { transition-delay: .16s; }

/* The condensed grid has no continuous rail, so drop the phase-label rail
   stubs (.flow-phase is used only on this page). The horizontal "— LABEL —"
   flankers are .flow-phase p::before/::after and are unaffected. */
.flow-phase::before,
.flow-phase::after { display: none; }

/* Set the video strip off from the last card band with a section break a touch
   larger than the phase-label rhythm, so the two blocks read as distinct.
   Scoped past .case-study so the Lovable case-study hero strip is untouched. */
.clip-strip--night:not(.case-study) { padding-top: clamp(4rem, 10vw, 8.5rem); }

@media (max-width: 900px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .svc-grid { grid-template-columns: 1fr; }
}

/* Match the Lovable case-study clip strip on mobile: two large phone-aspect
   videos per row (the third centers below) instead of three cramped across.
   The base .clip-credit flex rule is defined after the shared 700px breakpoint,
   so it overrides that breakpoint's 2-up basis — restore it at a later source
   position here. */
@media (max-width: 700px) {
  .clip-strip__row > .clip-credit { flex-basis: calc((100% - 0.8rem) / 2); }
}