/* =============================================================================
   VPG Theme — main stylesheet
   Design tokens → base → layout → components → modules → utilities
   ============================================================================= */

/* ---------- Tokens ---------- */
:root {
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --cream: #f5f1ea;
  --cream-deep: #efe9df;
  --stone: #e7e0d4;
  --stone-deep: #d8cfc0;
  --navy: #0e1f3a;
  --navy-deep: #091529;
  --navy-soft: #1a3050;
  --navy-footer: #16284a;
  --ink: #15191f;
  --ink-muted: #5d6572;
  --ink-faint: #8a919c;
  --accent: #1f7a74;
  --accent-deep: #155e59;
  --accent-soft: #7fcbc4;
  --gold: #c69a3c;
  --white: #ffffff;
  --line: rgba(21, 25, 31, 0.14);

  /* Semantic — light theme defaults; overridden per .theme-* */
  --bg: var(--cream);
  --fg: var(--ink);
  --fg-muted: var(--ink-muted);
  --rule: var(--line);
  --link: var(--accent);
  --surface: var(--white);
  --ph-bg: var(--stone);
  --ph-fg: var(--ink-faint);

  --container: 1640px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --section-sm: clamp(3rem, 6vw, 5rem);
  --radius: 4px;
  --radius-lg: 10px;
  --header-h: 88px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1.25em; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 200; padding: .75rem 1rem; background: var(--navy); color: #fff; border-radius: var(--radius); }
.skip-link:focus { top: 1rem; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, .display-xl, .display-lg, .display-md, .display-sm, .display-xs {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  color: inherit;
  text-wrap: balance;
}
.display-xl { font-size: clamp(2.75rem, 6.4vw, 5.6rem); line-height: 1.02; letter-spacing: -0.025em; }
.display-lg { font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1.06; letter-spacing: -0.02em; }
.display-md { font-size: clamp(1.75rem, 3.1vw, 2.6rem); line-height: 1.12; }
.display-sm { font-size: clamp(1.5rem, 2.3vw, 1.95rem); line-height: 1.2; }
.display-xs { font-size: clamp(1.25rem, 1.7vw, 1.45rem); line-height: 1.3; }
em, .display-xl em, .display-lg em, .display-md em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 60; }
.u-accent { color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; text-decoration-color: var(--link); }
.eyebrow {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 1.25rem;
}
.lede { font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.6; color: var(--fg-muted); max-width: 42em; }
.muted { color: var(--fg-muted); }
.small { font-size: .875rem; }
.prose { font-size: 1.0625rem; line-height: 1.7; }
.prose > * + * { margin-top: 1.1em; }
.prose p { margin-bottom: 0; }
.prose h2, .prose h3, .prose h4 { margin-top: 1.75em; margin-bottom: .5em; }
.prose h2 { font-size: clamp(1.5rem, 2.3vw, 1.95rem); }
.prose h3 { font-size: 1.35rem; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: .4em; }
.prose a { color: var(--link); text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose blockquote { margin: 1.5em 0; padding-left: 1.25em; border-left: 2px solid var(--link); font-family: var(--font-display); font-size: 1.3em; line-height: 1.35; }
.prose img { border-radius: var(--radius-lg); }
.prose strong { color: var(--fg); }

/* ---------- Themes ---------- */
.theme-light { --bg: var(--cream); --fg: var(--ink); --fg-muted: var(--ink-muted); --rule: var(--line); --link: var(--accent); --surface: var(--white); --ph-bg: var(--stone); --ph-fg: var(--ink-faint); }
.theme-stone { --bg: var(--stone); --fg: var(--ink); --fg-muted: var(--ink-muted); --rule: rgba(21,25,31,.16); --link: var(--accent-deep); --surface: var(--cream); --ph-bg: var(--stone-deep); --ph-fg: var(--ink-muted); }
.theme-dark  { --bg: var(--navy); --fg: #f3efe7; --fg-muted: rgba(243,239,231,.68); --rule: rgba(255,255,255,.14); --link: var(--accent-soft); --surface: var(--navy-soft); --ph-bg: var(--navy-soft); --ph-fg: rgba(243,239,231,.55); }
.theme-light, .theme-stone, .theme-dark { background: var(--bg); color: var(--fg); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.module { position: relative; padding-block: var(--section); }
.module + .module.theme-light:not(.module--stat_band):not(.module--testimonial) { }
.module--page_header, .module--hero { padding-top: calc(var(--header-h) + var(--section-sm)); }
.site-main > .module:last-child { }
.module-header { max-width: 52rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.module-header--center { margin-inline: auto; text-align: center; }
.module-header--center .lede { margin-inline: auto; }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-top: 2rem; }
.btn-row--center { justify-content: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 1rem 1.6rem; border-radius: 999px; border: 1.5px solid transparent;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
  line-height: 1;
}
.btn__icon { display: inline-flex; transition: transform .3s var(--ease); }
.btn:hover .btn__icon { transform: translateX(4px); }
.btn--primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.theme-dark .btn--primary { background: var(--accent-soft); color: var(--navy); border-color: var(--accent-soft); }
.theme-dark .btn--primary:hover { background: #fff; border-color: #fff; }
.btn--secondary, .btn--outline { background: transparent; color: var(--fg); border-color: currentColor; }
.btn--secondary:hover, .btn--outline:hover { background: var(--fg); color: var(--bg); }
.btn--text {
  padding: 0 0 .35rem; border-radius: 0; border: 0; border-bottom: 1.5px solid var(--link); color: var(--fg);
}
.btn--text:hover { color: var(--link); }
.theme-dark .btn--text { color: #fff; }
.theme-dark .btn--text:hover { color: var(--accent-soft); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h);
  display: flex; align-items: center;
  background: transparent; transition: background .3s var(--ease), box-shadow .3s var(--ease), height .3s var(--ease);
}
.site-header.is-scrolled { background: rgba(245,241,234,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); height: 72px; }
.site-header.is-over-dark:not(.is-scrolled) { color: #fff; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.site-logo { display: inline-flex; align-items: center; }
.site-logo__img { height: 40px; width: auto; }
.site-logo__img--dark { display: none; }
.site-logo__text { font-family: var(--font-display); font-size: 1.75rem; letter-spacing: .04em; font-weight: 500; }
.site-nav { display: none; align-items: center; gap: 2.5rem; }
.site-nav__list { display: flex; gap: 2rem; list-style: none; }
.site-nav__list a { font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .5rem 0; position: relative; }
.site-nav__list a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px; background: currentColor; transition: right .3s var(--ease); }
.site-nav__list a:hover::after, .site-nav__list .current-menu-item > a::after, .site-nav__list .current-menu-ancestor > a::after { right: 0; }
.site-nav__list .sub-menu { display: none; }
.site-nav__cta { display: none; }
.site-header__actions { display: flex; align-items: center; gap: 1rem; }
.site-header__cta { display: none; }
.nav-toggle { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; }
.nav-toggle__close { display: none; }
body.nav-open .nav-toggle__open { display: none; }
body.nav-open .nav-toggle__close { display: block; }
body.nav-open { overflow: hidden; }
body.nav-open .site-header { background: var(--navy); color: #fff; }
body.nav-open .site-nav {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2rem;
  position: fixed; inset: 0; padding: var(--header-h) var(--gutter) 3rem; background: var(--navy); color: #fff;
}
body.nav-open .site-nav__list { flex-direction: column; gap: 1.25rem; }
body.nav-open .site-nav__list a { font-family: var(--font-display); font-size: clamp(2rem, 8vw, 3rem); text-transform: none; letter-spacing: -.02em; font-weight: 400; }
body.nav-open .site-nav__cta { display: block; }
@media (min-width: 900px) {
  .site-nav { display: flex; }
  .nav-toggle { display: none; }
  .site-header__cta { display: inline-flex; padding: .8rem 1.3rem; font-size: .75rem; }
}

/* ---------- Placeholders ---------- */
.media { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--ph-bg); }
.media__img, .media__video { width: 100%; height: 100%; object-fit: cover; }
.media--embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }
.media--placeholder {
  aspect-ratio: var(--ratio, 16 / 9);
  display: grid; place-items: center;
  background-color: var(--ph-bg);
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(0,0,0,.035) 14px 15px);
  border: 1px dashed color-mix(in srgb, var(--ph-fg) 45%, transparent);
  color: var(--ph-fg);
}
.media--placeholder-video { background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(0,0,0,.035) 14px 15px), radial-gradient(circle at center, rgba(0,0,0,.08), transparent 60%); }
.media__ph { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem; text-align: center; }
.media__ph-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid currentColor; }
.media__ph-label { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.media--full { border-radius: 0; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--words .word { display: inline-block; opacity: 0; transform: translateY(.35em); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * 60ms); }
.reveal--words.is-visible .word { opacity: 1; transform: none; }
.reveal--words.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal--words .word { opacity: 1; transform: none; transition: none; } }
.no-js .reveal, .no-js .reveal--words .word { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.module--hero { padding-bottom: var(--section); overflow: visible; }
.hero__inner { display: grid; gap: 3rem; align-items: center; }
.hero__content { max-width: 46rem; }
.hero__sub { margin-top: 1.5rem; max-width: 36em; }
.hero--has-media .hero__inner { grid-template-columns: 1fr; }
@media (min-width: 1000px) { .hero--has-media .hero__inner { grid-template-columns: 1.2fr .8fr; gap: 5rem; } }
.selector {
  display: grid; grid-template-columns: 1fr; margin-top: 2.5rem; max-width: 46rem;
  border: 1.5px solid var(--ink); border-radius: 999px; overflow: hidden; background: var(--cream);
}
.selector__label { display: none; }
.selector__field { position: relative; }
.selector__select {
  width: 100%; appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--ink);
  font-family: var(--font-display); font-size: clamp(1.15rem, 1.6vw, 1.45rem); padding: 1.1rem 3.25rem 1.1rem 1.6rem; cursor: pointer;
}
.selector__chevron { position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
.selector__go {
  display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 1rem 1.6rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep);
  border-top: 1.5px solid var(--ink); transition: background .25s, color .25s;
}
.selector__go:hover { background: var(--navy); color: #fff; }
@media (min-width: 720px) {
  .selector { grid-template-columns: auto 1fr auto; align-items: stretch; }
  .selector__label { display: flex; align-items: center; padding: 0 1.5rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; border-right: 1.5px solid var(--ink); white-space: nowrap; }
  .selector__go { border-top: 0; border-left: 1.5px solid var(--ink); }
}

/* ---------- Statement + media ---------- */
.module--statement_media { padding: 0; overflow: hidden; }
.statement-media--overlay { min-height: min(92vh, 900px); display: grid; align-items: end; }
.statement-media__bg { position: absolute; inset: 0; }
.statement-media__bg .media { height: 100%; border-radius: 0; aspect-ratio: auto; }
.statement-media__bg .media--placeholder { border: 0; }
.statement-media__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(9,21,41,.9) 0%, rgba(9,21,41,.35) 55%, rgba(9,21,41,.1) 100%); }
.statement-media--overlay .statement-media__content { position: relative; padding-block: var(--section); max-width: 60rem; }
.statement-media--overlay .statement-media__content .lede { color: rgba(255,255,255,.8); }
.statement-media--above .statement-media__content, .statement-media--split { padding-block: var(--section); }
.statement-media__figure--full { padding-inline: 0; }
.statement-media__figure--full .media { border-radius: 0; }
.statement-media__split { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .statement-media__split { grid-template-columns: 1fr 1fr; gap: 5rem; } }

/* ---------- Sequence ---------- */
.sequence__list { list-style: none; display: grid; gap: clamp(4rem, 8vw, 8rem); }
.sequence__item { display: grid; gap: 2rem; align-items: center; }
.sequence__text { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.18; letter-spacing: -.015em; }
.sequence__text p { margin: 0; }
.sequence__text a, .sequence__text strong { font-weight: 400; color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .14em; }
.sequence__media { width: 100%; max-width: 560px; }
@media (min-width: 900px) {
  .sequence__item { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .sequence--alternate .sequence__item:nth-child(even) .sequence__text { order: 2; }
  .sequence--alternate .sequence__item:nth-child(even) .sequence__media { margin-left: auto; }
}

/* ---------- Statement ---------- */
.statement__inner > * { max-width: 62rem; }
.statement--center .statement__inner { text-align: center; }
.statement--center .statement__inner > * { margin-inline: auto; }
.statement--center .lede, .statement--center .anchor-links { margin-inline: auto; justify-content: center; }
.statement__heading { margin-bottom: .35em; }
.statement__text { margin-top: 1.5rem; }
.anchor-links { list-style: none; display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.anchor-links a { font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; display: inline-flex; gap: .5rem; align-items: center; }
.anchor-links a::after { content: "↓"; opacity: .6; }
.anchor-links a:hover { color: var(--link); }

/* ---------- Anchor nav ---------- */
.anchor-nav { position: relative; z-index: 20; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--bg); margin-bottom: var(--section-sm); }
.anchor-nav--sticky { position: sticky; top: 72px; }
.anchor-nav__list { list-style: none; display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.anchor-nav__list::-webkit-scrollbar { display: none; }
.anchor-nav__link { display: inline-block; white-space: nowrap; padding: 1rem 1rem; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .2s; }
.anchor-nav__link:hover, .anchor-nav__link.is-active { color: var(--fg); border-color: var(--link); }
.anchor-nav--tabs { position: static; border: 0; background: transparent; }
.anchor-nav--tabs .anchor-nav__link { border: 1px solid var(--rule); border-radius: 999px; margin: 0 .25rem .5rem 0; padding: .7rem 1.1rem; }
.anchor-nav--tabs .anchor-nav__link.is-active { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ---------- Services ---------- */
.services__list { display: grid; gap: clamp(4rem, 8vw, 7rem); }
.service { display: grid; gap: 2.5rem; align-items: center; scroll-margin-top: 140px; padding-top: 2rem; border-top: 1px solid var(--rule); }
.service:first-child { border-top: 0; padding-top: 0; }
.service__content { max-width: 34rem; }
.service__desc { margin-top: .5rem; }
.service__details { margin-top: 1.25rem; }
.service--no-proof .service__content { max-width: 46rem; }
@media (min-width: 900px) {
  .service { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .services--stacked .service:nth-child(even) .service__content { order: 2; }
}
.services--tabs .services__list { gap: 0; }
.services--tabs .service { display: none; border: 0; padding: 0; }
.services--tabs .service.is-active { display: grid; }

/* ---------- Proof card ---------- */
.proof-card { display: block; position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: 0 1px 0 var(--rule); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
a.proof-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(9,21,41,.35); }
.proof-card__media { position: relative; }
.proof-card__media .media { border-radius: 0; }
.proof-card__arrow { position: absolute; right: 1rem; bottom: 1rem; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; transition: transform .3s var(--ease); }
a.proof-card:hover .proof-card__arrow { transform: translateX(4px); }
.proof-card__body { display: grid; gap: .25rem; padding: 1.25rem 1.5rem 1.5rem; }
.proof-card__eyebrow { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
.proof-card__client { font-weight: 600; }
.proof-card__result { color: var(--fg-muted); font-size: .95rem; }

/* ---------- Stat band ---------- */
.stat-band { list-style: none; display: grid; gap: 2rem 3rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .stat-band { grid-template-columns: repeat(var(--count, 4), 1fr); } }
.stat { display: grid; gap: .4rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.stat__value { font-family: var(--font-display); font-size: clamp(2.25rem, 3.6vw, 3.5rem); white-space: nowrap; line-height: 1; letter-spacing: -.03em; color: var(--fg); }
.stat__label { font-size: .875rem; color: var(--fg-muted); max-width: 16em; }
.module--stat_band .module-header { margin-bottom: 2.5rem; }

/* ---------- Testimonial ---------- */
.testimonial { margin: 0; display: grid; gap: 1.5rem; }
.testimonial__mark { color: var(--link); }
.testimonial__quote { margin: 0; font-style: italic; }
.testimonial__quote::before { content: "\201C"; } .testimonial__quote::after { content: "\201D"; }
.testimonial__cite { display: flex; align-items: center; gap: 1rem; font-size: .9375rem; }
.testimonial__avatar img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.testimonial__who { display: grid; }
.testimonial__who span { color: var(--fg-muted); }
.testimonial--inline { margin-top: 3rem; padding: 2rem; border-radius: var(--radius-lg); background: var(--surface); }

/* ---------- Logo band ---------- */
.logo-band__heading { margin-bottom: 2rem; }
.logo-band { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; align-items: center; }
@media (min-width: 640px) { .logo-band { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .logo-band { grid-template-columns: repeat(5, 1fr); gap: 2rem 3rem; } }
.logo-band__item { display: grid; place-items: center; min-height: 80px; }
.logo-band__item img { max-height: 56px; width: auto; filter: grayscale(1); opacity: .75; transition: opacity .3s, filter .3s; }
.logo-band__item:hover img { filter: none; opacity: 1; }
.logo-band__ph { display: grid; place-items: center; width: 100%; min-height: 72px; padding: .5rem 1rem; text-align: center; font-family: var(--font-display); font-size: 1.05rem; color: var(--ph-fg); border: 1px dashed color-mix(in srgb, var(--ph-fg) 45%, transparent); border-radius: var(--radius); }

/* ---------- Post grid / cards ---------- */
.post-grid, .creative-grid, .case-cards--grid { display: grid; gap: 2.5rem 2rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .post-grid, .creative-grid, .case-cards--grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .post-grid, .creative-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card__body, .creative-card__body { padding-top: 1.25rem; }
.post-card__title, .creative-card__title { font-size: 1.35rem; line-height: 1.25; margin-bottom: .75rem; }
.post-card__media .media, .creative-card__media .media { transition: transform .5s var(--ease); }
.post-card:hover .media img, .creative-card:hover .media img { transform: scale(1.03); }
.post-card .eyebrow, .creative-card .eyebrow { margin-bottom: .6rem; }
.creative-card__client { color: var(--fg-muted); font-size: .9375rem; margin: 0; }
.creative-card.is-hidden { display: none; }

/* ---------- Case study cards ---------- */
.case-cards--alternating { display: grid; gap: clamp(3rem, 7vw, 6rem); }
.case-card { display: grid; gap: 2rem; align-items: center; }
.case-card__media .media { aspect-ratio: 4 / 3; }
.case-card__meta { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.25rem; }
.case-card__meta .eyebrow { margin: 0; }
.case-card__number { font-family: var(--font-display); font-size: 1.5rem; color: var(--link); }
.case-card__title { font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.12; }
.case-card__title a:hover { color: var(--link); }
.case-card__excerpt { color: var(--fg-muted); font-size: 1.0625rem; }
.case-card .btn { margin-top: 1.5rem; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; }
.chip { display: inline-block; padding: .4rem .8rem; border: 1px solid var(--rule); border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
@media (min-width: 900px) {
  .case-card--alternating { grid-template-columns: 1.1fr .9fr; gap: 5rem; }
  .case-cards--alternating .case-card:nth-child(even) .case-card__media { order: 2; }
}
.case-card--grid { display: block; }
.case-card--grid .case-card__body { padding-top: 1.25rem; }

/* ---------- Compact cards ---------- */
.compact-cards__heading { margin-bottom: 1.5rem; }
.compact-cards { list-style: none; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .compact-cards { grid-template-columns: repeat(3, 1fr); } }
.compact-card { padding: 1.75rem; background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 1px 0 var(--rule); }
.compact-card__title { font-size: 1.25rem; margin-bottom: .6rem; }
.compact-card p { color: var(--fg-muted); margin: 0; font-size: .9875rem; }
.compact-card .btn { margin-top: 1rem; }

/* ---------- Feature list ---------- */
.features { list-style: none; display: grid; gap: 2.5rem 3rem; counter-reset: feature; }
@media (min-width: 720px) { .features--cols-2 { grid-template-columns: repeat(2, 1fr); } .features--cols-3 { grid-template-columns: repeat(3, 1fr); } }
.feature { padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.feature__title { font-size: 1.45rem; margin-bottom: .6rem; }
.feature__text { color: var(--fg-muted); margin: 0; }
.feature .btn { margin-top: 1rem; }
.feature__num { display: block; font-family: var(--font-display); color: var(--link); font-size: 1.25rem; margin-bottom: .75rem; }
.features--cards .feature { border: 0; padding: 2rem; background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 1px 0 var(--rule); }

/* ---------- Content ---------- */
.content__inner { display: grid; gap: 1.5rem; }
.content--split .content__inner { gap: 2rem; }
@media (min-width: 900px) { .content--split .content__inner { grid-template-columns: 1fr 1.4fr; gap: 5rem; align-items: start; } .content--split.content--wide .content__inner { grid-template-columns: 1fr 2fr; } }
.content__heading h2 { margin: 0; }
.content__body { max-width: 44em; }

/* ---------- Resource CTA ---------- */
.resource { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .resource { grid-template-columns: .8fr 1.2fr; gap: 6rem; } }
.resource__cover { max-width: 420px; }
.resource__img { box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }
.inline-form { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.inline-form__input { flex: 1 1 240px; padding: 1rem 1.25rem; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--surface); color: var(--fg); }
.theme-dark .inline-form__input { background: rgba(255,255,255,.08); color: #fff; }

/* ---------- CTA ---------- */
.cta__inner { display: grid; gap: 2.5rem; align-items: end; }
@media (min-width: 900px) { .cta__inner { grid-template-columns: 1.3fr .7fr; gap: 5rem; } }
.cta__text { max-width: 40rem; }
.cta__actions .btn-row { margin-top: 0; }
.contact-line { margin: 1.5rem 0 0; color: var(--fg-muted); font-size: .9375rem; }
.contact-line a:hover { color: var(--link); }
.contact-line__sep { margin-inline: .35rem; }

/* ---------- Page header ---------- */
.page-header__inner { display: grid; gap: 3rem; align-items: center; }
.page-header--has-media .page-header__inner { grid-template-columns: 1fr; }
@media (min-width: 1000px) { .page-header--has-media .page-header__inner { grid-template-columns: 1.1fr .9fr; gap: 5rem; } }
.page-header__content { max-width: 50rem; }
.page-header--center .page-header__content { margin-inline: auto; text-align: center; }
.page-header--center .lede, .page-header--center .btn-row { margin-inline: auto; justify-content: center; }
.page-header__content .lede { margin-top: 1.25rem; }
.module--page_header + .module--stat_band { padding-top: 0; }

/* ---------- Profile ---------- */
.profile { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .profile { grid-template-columns: .8fr 1.2fr; gap: 6rem; } .profile--img-right .profile__media { order: 2; } }
.profile__media { max-width: 480px; }
.profile__name { font-size: 1.125rem; margin-bottom: 1.25rem; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .faq { grid-template-columns: 1fr 1.6fr; gap: 5rem; align-items: start; } .faq__intro { position: sticky; top: calc(var(--header-h) + 1rem); } }
.faq__intro .module-header { margin-bottom: 0; }
.faq__item { border-top: 1px solid var(--rule); }
.faq__item:last-child { border-bottom: 1px solid var(--rule); }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.35rem 0; font-family: var(--font-display); font-size: 1.3rem; cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__icon { position: relative; flex: 0 0 24px; height: 24px; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--link); transform: translate(-50%, -50%); transition: transform .3s var(--ease); }
.faq__icon::before { width: 16px; height: 1.5px; }
.faq__icon::after { width: 1.5px; height: 16px; }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__a { padding: 0 0 1.5rem; max-width: 40em; }

/* ---------- Media block ---------- */
.media-block__full .media { border-radius: 0; }
.media-block__caption { margin-top: .75rem; }

/* ---------- Contact ---------- */
.contact { display: grid; gap: 3rem; }
@media (min-width: 900px) { .contact { grid-template-columns: .9fr 1.1fr; gap: 6rem; align-items: start; } }
.contact__details { display: grid; gap: 1.25rem; margin: 2rem 0 0; }
.contact__details dt { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
.contact__details dd { margin: .2rem 0 0; font-size: 1.05rem; }
.contact__details a:hover { color: var(--link); }
.form { display: grid; gap: 1.25rem; padding: 2rem; background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 1px 0 var(--rule); }
.form__row--2 { display: grid; gap: 1.25rem; }
@media (min-width: 600px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.form__field { display: grid; gap: .4rem; }
.form__field > span { font-size: .8125rem; font-weight: 600; color: var(--fg-muted); }
.form__field input, .form__field select, .form__field textarea { width: 100%; padding: .85rem 1rem; border: 1.5px solid var(--rule); border-radius: var(--radius); background: var(--bg); color: var(--fg); }
.form__field input:focus, .form__field select:focus, .form__field textarea:focus { outline: none; border-color: var(--accent); }
.form .btn { justify-self: start; }
.form .small { margin: 0; }

/* ---------- Filter bar ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.filter-bar__btn { padding: .65rem 1.1rem; border: 1px solid var(--rule); border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); transition: all .2s; }
.filter-bar__btn:hover { color: var(--fg); border-color: var(--fg); }
.filter-bar__btn.is-active { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ---------- Pagination ---------- */
.pagination { margin-top: 3rem; }
.pagination .nav-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .75rem; border: 1px solid var(--rule); border-radius: 999px; font-size: .875rem; }
.pagination .page-numbers.current { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ---------- Case study single ---------- */
.case-study__header { padding-bottom: var(--section-sm); }
.case-study__stats { padding-block: var(--section-sm); }
.case-study__hero { padding-top: var(--section-sm); }
.case-study__grid { display: grid; gap: 3rem; }
@media (min-width: 900px) { .case-study__grid { grid-template-columns: 260px 1fr; gap: 6rem; } .case-study__aside { position: sticky; top: calc(var(--header-h) + 1rem); align-self: start; } }
.case-study__logo { margin-bottom: 2rem; }
.case-study__logo img { max-height: 64px; width: auto; }
.case-study__toc ul, .case-study__related ul { list-style: none; display: grid; gap: .5rem; }
.case-study__toc a { font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.case-study__toc a:hover { color: var(--fg); }
.case-study__related { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.case-study__related a { text-decoration: underline; text-underline-offset: .15em; }
.case-study__related a:hover { color: var(--link); }
.case-study__content { max-width: 44em; }
.case-study__section { scroll-margin-top: 120px; }
.case-study__section + .case-study__section { margin-top: 3.5rem; }
.case-study__next { padding-block: var(--section-sm); }
.case-study__next h2 a:hover { color: var(--link); }

/* ---------- Post single ---------- */
.post-single__header { padding-bottom: var(--section-sm); }
.post-meta { display: flex; align-items: center; gap: 1rem; color: var(--fg-muted); font-size: .9375rem; }
.post-single__media { margin-bottom: var(--section-sm); }
.post-single .module { padding-top: 0; }

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--section-sm) 2rem; }
.site-footer__top { display: grid; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--rule); }
@media (min-width: 900px) { .site-footer__top { grid-template-columns: 1.2fr 1fr 1fr; gap: 4rem; } }
.site-logo--footer .site-logo__img { height: 44px; }
.site-footer__tagline { margin-top: 1.25rem; max-width: 26em; color: var(--fg-muted); }
.site-footer__menu, .site-footer__legal { list-style: none; display: grid; gap: .6rem; }
.site-footer__menu a { font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.site-footer__menu a:hover, .site-footer__line:hover { color: var(--link); }
.site-footer__contact { display: grid; gap: .5rem; align-content: start; }
.site-footer__line { font-size: 1.05rem; }
.site-footer__address { font-style: normal; color: var(--fg-muted); white-space: pre-line; }
.social-list { list-style: none; display: flex; gap: .75rem; margin-top: 1rem; }
.social-list a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--rule); border-radius: 50%; transition: background .2s, color .2s; }
.social-list a:hover { background: #fff; color: var(--navy); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; padding-top: 1.5rem; font-size: .8125rem; color: var(--fg-muted); }
.site-footer__copy { margin: 0; }
.site-footer__legal { display: flex; gap: 1.5rem; }
.site-footer__legal a:hover { color: #fff; }

/* ---------- Utilities ---------- */
.module--404 { min-height: 70vh; }
@media (max-width: 600px) { :root { --header-h: 72px; } }

/* ---------- Mobile nav overlay stacking ---------- */
.site-logo, .site-header__actions { position: relative; z-index: 2; }
body.nav-open .site-nav__cta .btn { color: #fff; border-color: rgba(255,255,255,.6); }
body.nav-open .site-nav__cta .btn:hover { background: #fff; color: var(--navy); }

/* =============================================================================
   Scroll-driven effects (homepage narrative). JS sets --fx (0→1) on
   [data-scroll-fx]; sequence/marquee are driven in assets/js/main.js.
   ============================================================================= */

/* ---------- Header recolours over dark sections ---------- */
.site-header { transition: background .5s var(--ease), color .5s var(--ease), box-shadow .3s var(--ease), height .3s var(--ease); }
.site-header.is-over-dark { color: #f3efe7; }
.site-header.is-over-dark.is-scrolled { background: rgba(14,31,58,.88); box-shadow: 0 1px 0 rgba(255,255,255,.1); }
.site-header.is-over-dark .site-logo__img--light { display: none; }
.site-header.is-over-dark .site-logo__img--dark { display: block; }
.site-header .btn--outline { color: inherit; border-color: currentColor; }
.site-header .btn--outline:hover, .site-header .btn--outline:focus-visible { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.site-header.is-over-dark .btn--outline:hover, .site-header.is-over-dark .btn--outline:focus-visible { background: #fff; color: var(--navy); border-color: #fff; }
body.nav-open .site-header .btn--outline:hover { background: #fff; color: var(--navy); border-color: #fff; }

/* ---------- Statement + media: grows to full-bleed ---------- */
.statement-media--scroll { padding-bottom: 0; overflow: hidden; }
.statement-media__content--centered { text-align: center; max-width: 74rem; margin-inline: auto; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.statement-media__content--centered .lede { margin-inline: auto; }
.statement-media__grow { width: calc(78% + 22% * var(--fx, 0)); margin-inline: auto; will-change: width; }
.statement-media__grow .media { border-radius: calc(var(--radius-lg) * (1 - var(--fx, 0))); }
.statement-media__grow .media--placeholder { border-color: transparent; }
@media (max-width: 700px) { .statement-media__grow { width: 100%; } }

/* ---------- Sequence: sticky media column ---------- */
.sequence--sticky { padding-block: 0; }
.sequence__sticky { display: grid; grid-template-columns: 1fr; gap: 0 4rem; align-items: start; }
.sequence__lines { list-style: none; }
.sequence__line { min-height: 100vh; display: flex; align-items: center; }
.sequence__line .sequence__text { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.7rem); line-height: 1.18; letter-spacing: -.015em; max-width: 14em; opacity: .28; transform: translateY(6px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.sequence__line.is-active .sequence__text { opacity: 1; transform: none; }
.sequence__text p { margin: 0; }
.sequence__text a { font-weight: 400; color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .14em; }
.sequence__stage { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; }
.sequence__stage-inner { position: relative; aspect-ratio: 4 / 3; width: 100%; max-width: 620px; margin-left: auto; perspective: 1600px; transform-style: preserve-3d; }
.sequence__slide { position: absolute; inset: 0; opacity: 0; backface-visibility: hidden; transform-origin: 50% 50%; transform: rotateY(90deg); transition: transform .55s cubic-bezier(.5,0,.75,.3), opacity .2s .35s; pointer-events: none; }
.sequence__slide.is-prev { transform: rotateY(-90deg); }
.sequence__slide.is-active { opacity: 1; transform: rotateY(0); transition: transform .75s cubic-bezier(.16,1,.3,1) .3s, opacity .15s .3s; pointer-events: auto; }
.sequence__slide .media { height: 100%; aspect-ratio: auto; }
@media (min-width: 900px) {
  .sequence__sticky { grid-template-columns: 1fr 1fr; }
  .sequence__stage { order: 2; }
}


/* ---------- Statement: pinned marquee + palette swap ---------- */
.statement--marquee { padding: 0; }
.statement--marquee, .statement--marquee .marquee__viewport { transition: background-color .9s var(--ease), color .9s var(--ease); }
.marquee__viewport { position: relative; overflow: hidden; }
.marquee__track { display: none; }
.marquee__text { margin: 0; white-space: nowrap; font-family: var(--font-display); font-size: clamp(3rem, 8.5vw, 8rem); line-height: 1; letter-spacing: -.025em; font-variation-settings: "opsz" 144, "SOFT" 30; will-change: transform; }
.marquee__text em { font-style: italic; }
.marquee__text .u-accent { text-decoration-thickness: 3px; }
.marquee__fallback { padding-block: var(--section); max-width: 62rem; }
.statement--marquee.is-ready .marquee__viewport { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; }
.statement--marquee.is-ready .marquee__fallback { display: none; }
.statement--marquee.is-ready .marquee__track { display: block; }
.statement--marquee.is-swapped { --bg: var(--navy); --fg: #f3efe7; --fg-muted: rgba(243,239,231,.68); --rule: rgba(255,255,255,.14); --link: var(--accent-soft); background: var(--bg); color: var(--fg); }

/* ---------- Media module effects ---------- */
.media-block__figure[data-scroll-fx="scale"] { transform: scale(calc(.6 + .4 * var(--fx, 0))); transform-origin: center; will-change: transform; }
.media-block__figure[data-scroll-fx="grow"] { width: calc(78% + 22% * var(--fx, 0)); margin-inline: auto; }
.media-block--medium .media-block__figure { max-width: 640px; margin-inline: auto; }
.media-block--circle .media { border-radius: 50%; }
.media-block--circle .media--placeholder { border-radius: 50%; }
.module--media.theme-dark { padding-block: var(--section-sm); }
@media (prefers-reduced-motion: reduce) {
  [data-scroll-fx] { --fx: 1 !important; }
  .sequence__slide, .sequence__line .sequence__text { transition: none; }
}



/* ---------- Services: tabbed variant (reference-site pattern) ---------- */
.services--tabs .module-header { margin-bottom: 2rem; }
.services--tabs .anchor-nav--tabs { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.anchor-nav--tabs .anchor-nav__list { flex-wrap: wrap; overflow: visible; gap: .5rem; }
.anchor-nav--tabs .anchor-nav__link { margin: 0; border-color: var(--rule); color: var(--fg-muted); transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.anchor-nav--tabs .anchor-nav__link:hover { color: var(--fg); border-color: var(--fg); }
.anchor-nav--tabs .anchor-nav__link.is-active { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.theme-dark .anchor-nav--tabs .anchor-nav__link.is-active { background: var(--cream); color: var(--navy); border-color: var(--cream); }
.services--tabs .service { opacity: 1; transform: none; grid-template-columns: 1fr; }
@media (min-width: 900px) { .services--tabs .service { grid-template-columns: 1fr 1.1fr; gap: 5rem; align-items: center; } }
.services--tabs .service.is-entering .service__content { animation: vpg-tab-in .7s var(--ease) both; }
.services--tabs .service.is-entering .service__proof { animation: vpg-card-in .85s cubic-bezier(.2,.9,.25,1) both; }
.services--tabs .service.is-leaving .service__content { animation: vpg-tab-out .45s ease-in both; }
.services--tabs .service__proof.is-leaving { animation: vpg-card-out .5s cubic-bezier(.5,0,.75,.3) both; }
.services--tabs .service__proof { transform-origin: 150% 50%; will-change: transform, opacity; }
.services--tabs { overflow: hidden; }
@keyframes vpg-tab-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes vpg-tab-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-10px); } }
@keyframes vpg-card-out { from { opacity: 1; transform: rotate(0); } 60% { opacity: .4; } to { opacity: 0; transform: rotate(38deg); } }
@keyframes vpg-card-in { from { opacity: 0; transform: rotate(-42deg); } 35% { opacity: 1; } to { opacity: 1; transform: rotate(0); } }
.theme-dark .proof-card { background: var(--navy-soft); box-shadow: none; }
.theme-dark .proof-card__client { color: #fff; }
.theme-dark .proof-card__arrow { background: var(--accent-soft); color: var(--navy); }
/* "Here's how" statement flows straight into the tabbed services with no seam. */
.module--statement.theme-dark + .module--services.theme-dark,
.module--statement.theme-light + .module--services.theme-light,
.module--statement.theme-stone + .module--services.theme-stone { padding-top: 0; }
.module--statement.theme-dark:has(+ .module--services.theme-dark),
.module--statement.theme-light:has(+ .module--services.theme-light),
.module--statement.theme-stone:has(+ .module--services.theme-stone) { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
@media (prefers-reduced-motion: reduce) { .services--tabs .service.is-entering .service__content, .services--tabs .service.is-entering .service__proof, .services--tabs .service.is-leaving .service__content, .services--tabs .service__proof.is-leaving { animation: none; } }

/* ---------- Full-width header (logo left edge, nav centred, CTA right edge) ---------- */
.site-header { border-bottom: 1px solid var(--line); }
.site-header.is-over-dark { border-bottom-color: rgba(255,255,255,.12); }
.site-header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; }
@media (min-width: 900px) {
  .site-nav { justify-content: center; }
  .site-nav__list { gap: clamp(1.25rem, 2.2vw, 2.25rem); }
}
/* Hero selector spans the hero content width, as on the reference site. */
.selector { max-width: none; }
.hero__content { max-width: none; }
.hero__content > .display-xl { max-width: 12em; }
.hero__sub { max-width: 34em; }


/* ---------- Hero selector: reference-site styling ---------- */
.selector { position: relative; border-color: var(--navy); background: var(--cream); overflow: visible; border-radius: 999px; }
.selector__label { display: none; }
.selector__field { position: relative; }
.selector__toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 1.4rem 1.6rem 1.4rem 1.7rem; text-align: left; font-family: var(--font-display); font-size: clamp(1.25rem, 1.9vw, 1.9rem); line-height: 1.1; letter-spacing: -.01em; color: var(--navy); cursor: pointer; border-radius: 0; }
.selector__toggle:focus-visible { outline-offset: -4px; }
.selector__chevron { position: static; transform: none; display: inline-flex; color: var(--navy); transition: transform .3s var(--ease); }
.selector__chevron svg { width: 26px; height: 26px; }
.selector.is-open .selector__chevron { transform: rotate(180deg); }
.selector__go { padding: 1.4rem 2rem; font-family: var(--font-body); font-size: 1.25rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--accent); border-top: 1.5px solid var(--navy); gap: .5rem; border-bottom-left-radius: 999px; border-bottom-right-radius: 999px; }
.selector__go-arrow { font-size: 1.35em; line-height: 1; transition: transform .3s var(--ease); }
.selector__go:hover { background: var(--navy); color: #fff; }
.selector__go:hover .selector__go-arrow { transform: translateX(4px); }
.selector__list { list-style: none; position: absolute; left: .5rem; right: .5rem; top: calc(100% + .6rem); z-index: 30; margin: 0; padding: .9rem; background: #fbf9f5; border-radius: 12px; box-shadow: 0 24px 60px -20px rgba(9,21,41,.35), 0 2px 8px rgba(9,21,41,.08); }
.selector__list[hidden] { display: none; }
.selector__option { padding: 1rem 1.5rem; border-radius: 8px; font-family: var(--font-body); font-size: clamp(1.05rem, 1.3vw, 1.35rem); color: var(--ink); cursor: pointer; transition: background .15s, color .15s; }
.selector__option + .selector__option { margin-top: .15rem; }
.selector__option:hover, .selector__option:focus-visible { background: var(--stone); outline: none; }
.selector__option.is-selected { background: var(--navy); color: #fff; }
@media (min-width: 720px) {
  .selector { grid-template-columns: auto 1fr auto; }
  .selector__label { display: flex; align-items: center; padding: 0 clamp(1.5rem, 3vw, 3.5rem); border-right: 1.5px solid var(--navy); border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
  .selector__go { border-top: 0; border-left: 1.5px solid var(--navy); padding-inline: clamp(2rem, 3.5vw, 4rem); border-radius: 0 999px 999px 0; }
  .selector__list { left: 1rem; right: 1rem; }
}
/* Keep the open dropdown above the following section; sentence-case the options. */
.module--hero { z-index: 5; }
.selector__value { display: block; }
.selector__value::first-letter, .selector__option::first-letter { text-transform: uppercase; }
/* Header grid slots (keeps the menu toggle at the right edge when the nav is hidden). */
.site-logo { grid-column: 1; }
.site-nav { grid-column: 2; }
.site-header__actions { grid-column: 3; justify-self: end; }
/* On phones the options panel drops below the whole pill, not over the Let's Go button. */
@media (max-width: 719px) {
  .selector__field { position: static; }
  .selector__list { left: 0; right: 0; }
}

/* ---------- Logo band: equal visual weight ---------- */
.logo-band { grid-template-columns: repeat(2, 1fr); gap: 1rem; align-items: stretch; }
@media (min-width: 640px) { .logo-band { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .logo-band { grid-template-columns: repeat(5, 1fr); gap: 1.25rem; } }
.logo-band__item { height: 112px; min-height: 0; padding: 1.25rem 1.25rem; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--surface); }
.logo-band__item a { display: grid; place-items: center; width: 100%; height: 100%; }
/* Real logos: normalised into the same box so no mark dominates. */
.logo-band__item img { max-height: calc(48px * var(--logo-scale, 1)); max-width: min(calc(176px * var(--logo-scale, 1)), 100%); width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .8; transition: opacity .3s, filter .3s; }
.logo-band__item:hover img { filter: none; opacity: 1; }
.theme-dark .logo-band__item img { filter: grayscale(1) brightness(10); }
/* Placeholder tiles: identical size and typography. */
.logo-band__ph { width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; font-family: var(--font-body); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.35; text-align: center; color: var(--fg-muted); }


/* ---------- Marquee colour grade (scroll-driven, cream → navy) ---------- */
@supports (background: color-mix(in oklab, red 50%, blue)) {
  .statement--marquee.is-ready {
    transition: none;
    background: color-mix(in oklab, var(--navy) calc(var(--swap, 0) * 100%), var(--cream));
    color: color-mix(in oklab, #f3efe7 calc(var(--swap-text, var(--swap, 0)) * 100%), var(--ink));
  }
  .statement--marquee.is-ready .marquee__viewport { transition: none; }
}

/* ---------- Track record block: stats + testimonial + logos read as one navy section ---------- */
.module--stat_band.theme-dark + .module--testimonial.theme-dark,
.module--testimonial.theme-dark + .module--logo_band.theme-dark { padding-top: 0; }
.module--stat_band.theme-dark + .module--testimonial.theme-dark .testimonial { padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--rule); }
.theme-dark .logo-band__item { background: var(--cream); border-color: transparent; }
.theme-dark .logo-band__item img { filter: grayscale(1); opacity: .85; }
.theme-dark .logo-band__ph { color: var(--ink-muted); }
/* Media circle → light "Here’s How": keep the dark block’s bottom breathing room. */
.module--media.theme-dark + .module--statement.theme-light { padding-top: var(--section); }

/* Embedded video and charts inside case-study copy. */
.prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius-lg); }
.prose figure { margin: 1.5em 0; }
.prose figure img { width: 100%; height: auto; border-radius: var(--radius-lg); background: #fff; }
.prose figcaption { font-size: .8125rem; color: var(--fg-muted); margin-top: .5rem; }

/* Video pieces: poster frame with a play badge; imported covers are contained inside the 4:3 tile. */
.creative-card__media { position: relative; display: block; }
.creative-card__media .media:not(.media--placeholder) { aspect-ratio: 4 / 3; }
.creative-card__media .media__img { width: 100%; height: 100%; object-fit: cover; }
.play-badge { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; background: rgba(9,21,41,.72); color: #fff; backdrop-filter: blur(4px); transition: transform .3s var(--ease), background .3s; }
.play-badge svg { width: 28px; height: 28px; margin-left: 3px; }
.creative-card:hover .play-badge { transform: translate(-50%, -50%) scale(1.08); background: var(--accent); }

.filter-bar__btn { text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; }
.filter-bar__count { font-size: .6875rem; opacity: .6; letter-spacing: 0; }


/* ---------- Media module: cutout style (transparent figure standing on the section’s bottom edge) ---------- */
.module--media.media-block--cutout { padding-bottom: 0; overflow: hidden; }
.media-block--cutout .media-block__figure { display: flex; justify-content: center; align-items: flex-end; max-width: 960px; margin-inline: auto; }
.media-block--cutout .media { background: transparent; border-radius: 0; overflow: visible; aspect-ratio: auto; }
.media-block--cutout .media:not(.media--placeholder) .media__img { width: auto; max-width: 100%; max-height: min(72vh, 760px); height: auto; object-fit: contain; display: block; margin-inline: auto; }
.media-block--cutout .media--placeholder { width: min(100%, 720px); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.media-block--cutout .media-block__figure[data-scroll-fx="scale"] { transform-origin: 50% 100%; }
.media-block--cutout .media-block__caption { display: none; }

/* ---------- Marquee → cutout: the figure rises in beneath the pinned line ---------- */
@media (min-width: 900px) {
  .statement--marquee.is-ready .marquee__viewport { align-items: start; padding-top: 26vh; }
  .statement--marquee.is-ready + .module--media.media-block--cutout.theme-dark { position: relative; z-index: 2; margin-top: -56vh; padding-top: 0; }
  .statement--marquee.is-ready + .module--media.media-block--cutout .media:not(.media--placeholder) .media__img { max-height: min(58vh, 640px); }
}


/* ---------- Case-study image sets ---------- */
.image-set { display: grid; gap: 1.25rem; margin-top: 2rem; }
.image-set--cols-2 { grid-template-columns: repeat(2, 1fr); }
.image-set--cols-3 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .image-set--cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .image-set--cols-2, .image-set--cols-3 { grid-template-columns: 1fr; } }
.image-set__item { margin: 0; }
.image-set__img { width: 100%; height: auto; border-radius: var(--radius-lg); background: var(--stone); }
.image-set--cols-2 .image-set__img, .image-set--cols-3 .image-set__img { aspect-ratio: 4 / 3; object-fit: cover; }
.image-set__caption { font-size: .8125rem; color: var(--fg-muted); margin-top: .5rem; }


/* ---------- Lightbox ---------- */
.image-set__link { position: relative; display: block; cursor: zoom-in; border-radius: var(--radius-lg); overflow: hidden; }
.image-set__link img { display: block; transition: transform .5s var(--ease); }
.image-set__link:hover img { transform: scale(1.02); }
.image-set__zoom { position: absolute; right: .75rem; bottom: .75rem; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(9,21,41,.72); color: #fff; opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; backdrop-filter: blur(4px); }
.image-set__link:hover .image-set__zoom, .image-set__link:focus-visible .image-set__zoom { opacity: 1; transform: none; }
.prose figure .image-set__link { margin: 0; }
.lightbox { border: 0; padding: 0; margin: 0; width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; background: transparent; color: #f3efe7; }
.lightbox::backdrop { background: rgba(9,21,41,.94); backdrop-filter: blur(6px); }
.lightbox[open] { display: grid; place-items: center; animation: vpg-lightbox-in .35s var(--ease); }
@keyframes vpg-lightbox-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.lightbox__figure { margin: 0; display: grid; justify-items: center; gap: 1rem; max-width: min(92vw, 1500px); }
.lightbox__img { max-width: min(92vw, 1500px); max-height: 82vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-lg); background: #fff; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.lightbox__caption { font-size: .9375rem; color: rgba(243,239,231,.8); text-align: center; max-width: 60ch; }
.lightbox__close, .lightbox__nav { position: fixed; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; transition: background .2s; }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,.22); }
.lightbox__close { top: 1.25rem; right: 1.25rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 1.25rem; } .lightbox__nav--next { right: 1.25rem; }
.lightbox__nav[hidden] { display: none; }
.lightbox__count { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); font-size: .75rem; letter-spacing: .12em; color: rgba(243,239,231,.6); }
body.lightbox-open { overflow: hidden; }
@media (max-width: 700px) { .lightbox__nav { top: auto; bottom: 3.5rem; transform: none; } .lightbox__img { max-height: 70vh; } }


/* ---------- Footer: one step lighter than section navy so it reads as its own band ---------- */
.site-footer.theme-dark { --bg: var(--navy-footer); background: var(--navy-footer); }
.site-footer .site-footer__top { border-bottom-color: rgba(255,255,255,.12); }


/* ---------- Content icons ---------- */
.icon-badge { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--rule); color: var(--link); margin-bottom: 1.1rem; background: var(--surface); }
.theme-dark .icon-badge { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--accent-soft); }
.features--cards .icon-badge { background: var(--bg); }
.feature__icon + .feature__num { margin-top: -.25rem; }
.service__kicker { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.service__kicker .eyebrow { margin: 0; }
.service__icon { display: inline-grid; width: 40px; height: 40px; margin: 0; }
.service__icon svg { width: 20px; height: 20px; }
.services--tabs .service__icon { display: none; }

/* ---------- Staggered reveals (JS sets --stagger per sibling) ---------- */
.reveal { transition-delay: var(--stagger, 0ms); }
.reveal.is-visible { transition-delay: var(--stagger, 0ms); }
@media (prefers-reduced-motion: reduce) { .reveal { transition-delay: 0ms !important; } }
.stat__value[data-countup] { font-variant-numeric: tabular-nums; }

/* ---------- WPForms (base styling only; theme look) ---------- */
.wpforms-container { max-width: none; margin: 0; }
.wpforms-container .wpforms-form { display: grid; gap: 1.25rem; padding: 2rem; background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 1px 0 var(--rule); }
.wpforms-container .wpforms-field-container { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.wpforms-container .wpforms-field { grid-column: 1 / -1; padding: 0; margin: 0; }
@media (min-width: 600px) { .wpforms-container .wpforms-field.vpg-half { grid-column: span 1; } }
.wpforms-container .wpforms-field-label { display: block; font-size: .8125rem; font-weight: 600; color: var(--fg-muted); margin: 0 0 .4rem; }
.wpforms-container .wpforms-required-label { color: var(--accent); }
.wpforms-container .wpforms-field input[type="text"], .wpforms-container .wpforms-field input[type="email"], .wpforms-container .wpforms-field input[type="tel"], .wpforms-container .wpforms-field select, .wpforms-container .wpforms-field textarea { width: 100%; max-width: none; padding: .85rem 1rem; border: 1.5px solid var(--rule); border-radius: var(--radius); background: var(--bg); color: var(--fg); font: inherit; line-height: 1.4; }
.wpforms-container .wpforms-field input:focus, .wpforms-container .wpforms-field select:focus, .wpforms-container .wpforms-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: none; }
.wpforms-container .wpforms-field textarea { min-height: 140px; }
.wpforms-container .wpforms-field-description, .wpforms-container .wpforms-field-sublabel { font-size: .8125rem; color: var(--fg-muted); margin-top: .35rem; }
.wpforms-container .wpforms-submit-container { padding: 0; }
.wpforms-container button.wpforms-submit { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-body); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 1rem 1.6rem; border-radius: 999px; border: 1.5px solid var(--navy); background: var(--navy); color: #fff; line-height: 1; cursor: pointer; transition: background .25s var(--ease), border-color .25s var(--ease); }
.wpforms-container button.wpforms-submit:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.wpforms-container .wpforms-error, .wpforms-container label.wpforms-error { color: #b4452c; font-size: .8125rem; margin-top: .35rem; display: block; }
.wpforms-container .wpforms-field input.wpforms-error, .wpforms-container .wpforms-field textarea.wpforms-error, .wpforms-container .wpforms-field select.wpforms-error { border-color: #b4452c; }
.wpforms-confirmation-container-full, .wpforms-confirmation-container { padding: 1.5rem 1.75rem; background: var(--surface); border-left: 3px solid var(--accent); border-radius: var(--radius); font-size: 1.05rem; }
.wpforms-confirmation-container-full p:last-child, .wpforms-confirmation-container p:last-child { margin: 0; }
.wpforms-container .wpforms-hidden, .wpforms-container .wpforms-field-hp { display: none; }

/* Buttons placed inside rich text should not inherit the link underline. */
.prose a.btn { text-decoration: none; }

/* Open mobile menu: drop the header's backdrop blur (a backdrop-filter makes the header the
   containing block for the fixed overlay, which trapped the menu inside the header bar). */
body.nav-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; transition: none; }
body.nav-open .site-nav { z-index: 1; }
body.nav-open .site-logo, body.nav-open .site-header__actions { z-index: 2; }


/* =============================================================================
   Phone layout aligned with the reference site
   ============================================================================= */
@media (max-width: 899px) {
  /* Service tabs: one horizontally scrolling row. */
  .anchor-nav--tabs .anchor-nav__list { flex-wrap: nowrap; overflow-x: auto; gap: .5rem; padding-bottom: .25rem; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-snap-type: x proximity; }
  .anchor-nav--tabs .anchor-nav__link { flex: 0 0 auto; scroll-snap-align: start; }
}

/* Hero selector on phones: label above, one pill with an arrow button at the right end. */
@media (max-width: 719px) {
  .selector { display: grid; grid-template-columns: 1fr auto; border: 0; background: transparent; border-radius: 0; overflow: visible; }
  .selector__label { display: block; grid-column: 1 / -1; padding: 0; border: 0; margin-bottom: .75rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
  .selector__field { position: static; border: 1.5px solid var(--navy); border-right: 0; border-radius: 999px 0 0 999px; background: var(--cream); }
  .selector__toggle { padding: 1.1rem 1rem 1.1rem 1.4rem; font-size: 1.15rem; }
  .selector__toggle .selector__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .selector__chevron svg { width: 22px; height: 22px; }
  .selector__go { border: 1.5px solid var(--navy); border-radius: 0 999px 999px 0; padding: 0 1.4rem 0 1.2rem; background: var(--cream); }
  .selector__go > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .selector__go-arrow { font-size: 1.6rem; }
  .selector__list { left: 0; right: 0; top: calc(100% + .5rem); }
}
/* Hero/selector grids may not grow past the viewport because of the single-line selector value. */
.hero__inner { grid-template-columns: minmax(0, 1fr); }
.hero__content, .selector__field, .selector__toggle { min-width: 0; }
.selector { grid-template-columns: minmax(0, 1fr) auto; }
@media (min-width: 720px) { .selector { grid-template-columns: auto minmax(0, 1fr) auto; } }
@media (min-width: 1000px) { .hero--has-media .hero__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
/* Stat band on phones: values may wrap; columns may not exceed the viewport. */
.stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 800px) { .stat-band { grid-template-columns: repeat(var(--count, 4), minmax(0, 1fr)); } }
@media (max-width: 600px) { .stat__value { white-space: normal; font-size: clamp(1.9rem, 9vw, 2.4rem); overflow-wrap: anywhere; } }



/* ---------- Enumeration on phones: media pinned to the bottom, lines scroll up from behind it ---------- */
@media (max-width: 899px) {
  .sequence__sticky { display: grid; grid-template-columns: minmax(0, 1fr); }
  .sequence__lines { order: 1; }
  .sequence__stage { order: 2; position: sticky; top: auto; bottom: 0; height: auto; z-index: 2; display: block; padding: 1.25rem 0 1.25rem; background: var(--bg); }
  .sequence__stage::before { content: ""; position: absolute; left: 0; right: 0; top: -48px; height: 48px; background: linear-gradient(to top, var(--bg), transparent); pointer-events: none; }
  .sequence__stage-inner { max-width: none; width: 100%; aspect-ratio: 4 / 3; margin: 0; }
  .sequence__slide .media { border-radius: 18px; }
  .sequence__line { min-height: 72vh; min-height: 72svh; align-items: start; padding-top: calc(var(--header-h) + 1.5rem); }
  .sequence__line .sequence__text { max-width: none; font-size: clamp(1.75rem, 7.5vw, 2.3rem); opacity: 1; transform: none; }
  .sequence__line:last-child { min-height: 56svh; }
}

/* Phones: breathing room between the stakes video and the pinned enumeration media. */
@media (max-width: 899px) {
  .statement-media--scroll { padding-bottom: 22vh; }
  .statement-media--scroll + .sequence--sticky .sequence__line:first-child { padding-top: calc(var(--header-h) + 1.5rem); }
}