/* Spectruss v11 ("Bring us your hardest problem"). Shared by every v11
   template: tokens, type, sections, components. Values come straight from
   design_handoff/design/Spectruss Homepage v11.dc.html. Square corners
   everywhere except avatars. No left-border callouts. */

@font-face { font-family: Gotham; src: url("../fonts/Gotham-Black.woff2") format("woff2"); font-weight: 800 900; font-style: normal; font-display: swap; }
@font-face { font-family: Gotham; src: url("../fonts/Gotham-Bold.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: Gotham; src: url("../fonts/Gotham-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Gotham; src: url("../fonts/Gotham-Book.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
	--black: #000;
	--gold: #FCD371;
	--coral: #F27477;
	--coral-ink: #D9575B; /* coral for numerals on white/cream, where #F27477 is too light */
	--purple: #51458A;
	--navy: #152337;
	--cream: #FBF7EE;
	--white: #fff;
	--gutter: clamp(20px, 4vw, 56px);
	--sec-pad: clamp(110px, 14vw, 200px);
	--ease: cubic-bezier(.22, 1, .36, 1);
	--sans: Gotham, 'Helvetica Neue', Arial, sans-serif;
	--serif: 'Playfair Display', serif;
}

html { scroll-behavior: smooth; }
body.v11 { margin: 0; background: var(--navy); color: #fff; font-family: var(--sans); -webkit-font-smoothing: antialiased; }
.v11 *, .v11 *::before, .v11 *::after { box-sizing: border-box; }
.v11 a { color: inherit; text-decoration: none; }
.v11 a:hover { opacity: .85; }
.v11 img { max-width: 100%; }
.v11 ::selection { background: var(--gold); color: #000; }
.v-page { overflow: clip; }
.v-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--gold); color: #000; padding: 12px 18px; font-weight: 800; }
.v-skip:focus { left: 12px; top: 12px; }
/* Black outline plus a gold halo: one of the two always shows, on navy, cream,
   white, coral or gold. */
.v11 :focus-visible { outline: 2px solid #000; outline-offset: 2px; box-shadow: 0 0 0 5px var(--gold); }

@keyframes v-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes v-ping { from { transform: scale(1); opacity: 1; } to { transform: scale(5); opacity: 0; } }

/* ---------- layout ---------- */
.v-wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
.v-sec { padding: var(--sec-pad) 0; }
.v-sec--tight { padding: clamp(80px, 10vw, 140px) 0; }
.t-navy { background: var(--navy); color: #fff; }
.t-coral { background: var(--coral); color: #000; }
.t-purple { background: var(--purple); color: #fff; }
.t-cream { background: var(--cream); color: #000; }
.t-white { background: #fff; color: #000; }
.t-black { background: #000; color: #fff; }
.t-gold { background: var(--gold); color: #000; }

.v-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 28px clamp(32px, 5vw, 96px); align-items: end; }
.v-split--start { align-items: start; }
.v-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 28px clamp(32px, 5vw, 96px); }
.v-head-row { display: flex; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; }
.v-head-row > h2 { flex: 1; min-width: 280px; margin: 0; }

/* ---------- type ---------- */
.v-eyebrow { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }
.t-navy .v-eyebrow, .t-purple .v-eyebrow, .t-black .v-eyebrow, .v-hero .v-eyebrow { color: var(--gold); font-weight: 700; }
.t-cream .v-eyebrow, .t-white .v-eyebrow { color: var(--purple); }
.v-em { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -.02em; }
.t-navy .v-em, .t-purple .v-em, .t-black .v-em, .v-hero .v-em { color: var(--gold); }
.t-cream .v-em, .t-white .v-em { color: var(--purple); }
.v-h1 { margin: 24px 0 0; max-width: 1180px; font-size: clamp(54px, 9vw, 156px); font-weight: 900; line-height: .88; letter-spacing: -.045em; text-wrap: balance; }
.v-h1--inner { font-size: clamp(48px, 7.4vw, 124px); }
.v-h2 { margin: 24px 0 0; max-width: 1240px; font-size: clamp(44px, 6.4vw, 108px); font-weight: 900; line-height: .9; letter-spacing: -.045em; text-wrap: balance; }
.v-h2--md { font-size: clamp(44px, 5.6vw, 96px); }
.v-h2--sm { font-size: clamp(36px, 4.2vw, 68px); line-height: .92; }
.v-h3 { margin: 0; font-size: clamp(24px, 2.2vw, 32px); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; }
.v-body { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.6; text-wrap: pretty; }
.v-body p { margin: 0 0 1em; }
.v-body p:last-child { margin-bottom: 0; }
.t-navy .v-body, .t-purple .v-body, .t-black .v-body, .v-hero .v-body { color: rgba(255,255,255,.86); }
.v-lead { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.5; font-weight: 500; text-wrap: pretty; }
.v-statement { margin: 0; font-size: clamp(34px, 4vw, 64px); font-weight: 900; line-height: .98; letter-spacing: -.04em; text-wrap: balance; }
/* The .v-mt-* spacing utilities live at the end of this file. */
.v-measure { max-width: 780px; }

/* ---------- buttons + links ---------- */
.v-btn { display: inline-block; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 20px 32px; background: var(--gold); color: #000 !important; white-space: nowrap; border: 0; cursor: pointer; font-family: inherit; transition: background .25s; }
.v-btn:hover { background: #fff; opacity: 1 !important; }
.v-btn--black { background: #000; color: #fff !important; }
.v-btn--black:hover { background: var(--purple); }
.v-btn--outline { background: transparent; border: 1px solid var(--gold); color: var(--gold) !important; padding: 14px 20px; font-size: 13px; letter-spacing: .1em; }
.v-btn--outline:hover { background: var(--gold); color: #000 !important; }
/* Gold on white fails contrast; on light sections the outline button is black (post.php listen links). */
.t-white .v-btn--outline, .t-cream .v-btn--outline { color: #000 !important; border-color: #000; }
.v-arrow { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; border-bottom: 2px solid currentColor; padding-bottom: 4px; white-space: nowrap; }
.t-black .v-arrow, .t-navy .v-arrow { border-bottom-color: var(--gold); }
.v-step--hot .v-arrow { border-bottom-color: var(--gold); }
.v-textlink { font-size: 15px; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.6); padding-bottom: 3px; }
.v-textlink:hover { color: var(--gold); border-bottom-color: var(--gold); opacity: 1 !important; }
.v-actions { margin-top: 40px; display: flex; align-items: center; gap: 20px 32px; flex-wrap: wrap; }

/* ---------- nav ---------- */
.v-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .35s, backdrop-filter .35s; }
.v-nav.is-solid, .v-nav.is-open { background: rgba(21,35,55,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.v-nav__in { max-width: 1440px; margin: 0 auto; padding: 18px var(--gutter); display: flex; align-items: center; gap: 28px; }
.v-brand { display: flex; align-items: center; gap: 11px; flex: none; }
.v-brand img { width: 30px; height: 30px; display: block; }
.v-brand span { font-size: 14px; font-weight: 800; letter-spacing: .22em; }
.v-nav__links { margin-left: auto; display: flex; gap: 28px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.v-nav__links a[aria-current="page"] { color: var(--gold); }
.v-nav__cta { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 13px 20px; background: var(--gold); color: #000 !important; white-space: nowrap; flex: none; }
.v-nav__cta:hover { background: #fff; opacity: 1 !important; }
.v-burger { display: none; margin-left: auto; width: 44px; height: 44px; background: none; border: 0; padding: 10px; cursor: pointer; flex-direction: column; justify-content: center; align-items: flex-end; gap: 7px; }
.v-burger span { display: block; height: 2px; background: #fff; width: 24px; transition: transform .3s var(--ease); }
.v-burger span + span { width: 16px; background: var(--gold); }
.v-nav.is-open .v-burger span:first-child { transform: translateY(4.5px) rotate(45deg); }
.v-nav.is-open .v-burger span + span { width: 24px; transform: translateY(-4.5px) rotate(-45deg); }
.v-drawer { display: none; }
@media (max-width: 899px) {
	.v-nav__links, .v-nav__cta--desk { display: none; }
	.v-burger { display: flex; }
	.v-nav.is-open .v-drawer { display: flex; }
	.v-drawer { flex-direction: column; gap: 4px; padding: 8px var(--gutter) 28px; max-width: 1440px; margin: 0 auto; }
	.v-drawer a { font-size: 26px; font-weight: 900; letter-spacing: -.03em; padding: 8px 0; }
	.v-drawer .v-nav__cta { margin-top: 16px; text-align: center; font-size: 14px; padding: 18px; letter-spacing: .08em; }
}

/* ---------- hero ---------- */
.v-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--navy); color: #fff; }
.v-hero--inner { min-height: min(86vh, 860px); }
.v-hero__media { position: absolute; inset: 0; pointer-events: none; }
.v-hero__media img, .v-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-hero__media iframe { position: absolute; top: 50%; left: 50%; width: max(100%, 177.78vh); height: max(100%, 56.25vw); transform: translate(-50%, -50%); border: 0; }
.v-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21,35,55,.85) 0%, rgba(21,35,55,.45) 55%, rgba(21,35,55,.15) 100%); }
.v-hero__fade { position: absolute; inset: auto 0 0 0; height: 50%; background: linear-gradient(180deg, rgba(21,35,55,0), var(--navy)); }
.v-hero__in { position: relative; max-width: 1440px; width: 100%; margin: 0 auto; padding: 150px var(--gutter) clamp(64px, 10vh, 120px); }
.v-hero__in > .v-eyebrow { animation: v-rise .8s .1s both; }
.v-hero__in > .v-h1 { animation: v-rise 1s .2s both; }
.v-hero__in > .v-hero__sub { animation: v-rise 1s .35s both; }
.v-hero__in > .v-actions { animation: v-rise 1s .5s both; }
/* Pause control for the background video (front-page.php; js/v11.js unhides it). */
.v-hero__pause { position: absolute; right: var(--gutter); bottom: 24px; z-index: 3; min-height: 44px; padding: 12px 14px; background: rgba(21,35,55,.7); color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 0; font: 700 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.v-hero__pause:hover { background: var(--navy); }
.v-hero__sub { margin: 36px 0 0; max-width: 620px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: rgba(255,255,255,.88); text-wrap: pretty; }
.v-crumbs { margin: 0 0 20px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.v-crumbs a:hover { color: var(--gold); opacity: 1; }

/* ---------- story timeline ---------- */
.v-tl { overflow-x: auto; scrollbar-width: none; }
.v-tl::-webkit-scrollbar { display: none; }
.v-tl__track { position: relative; min-width: 760px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.v-tl__line { position: absolute; top: 44px; left: 10%; right: 10%; height: 2px; background: rgba(255,255,255,.18); }
.v-tl__fill { height: 100%; width: 0; background: var(--gold); }
.v-tl__stop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 0 8px; }
.v-tl__year { height: 28px; line-height: 28px; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5); transition: color .4s; }
.v-tl__dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); background: var(--navy); transition: background .4s, border-color .4s, transform .5s var(--ease); }
.v-tl__name { margin-top: 18px; font-size: clamp(17px, 1.5vw, 22px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: rgba(255,255,255,.55); transition: color .4s; }
.v-tl__stop:last-child .v-tl__name { font-size: clamp(24px, 2.4vw, 36px); }
.v-tl__stop.is-on .v-tl__year { color: var(--gold); }
.v-tl__stop.is-on .v-tl__dot { border-color: var(--gold); background: var(--gold); }
.v-tl__stop.is-on .v-tl__name { color: #fff; }
.v-tl__stop.is-on:last-child .v-tl__dot { transform: scale(1.6); }
.v-tl__stop.is-on:last-child .v-tl__name { color: var(--gold); }
/* Phones: stack the stops as rows instead of a sideways scroll that cuts off. */
@media (max-width: 699px) {
	.v-tl { overflow: visible; }
	.v-tl__track { min-width: 0; grid-template-columns: 1fr; gap: 18px; }
	.v-tl__line { display: none; }
	.v-tl__stop { flex-direction: row; align-items: center; text-align: left; gap: 14px; padding: 0; }
	.v-tl__name { margin-top: 0; }
	.v-tl__year { min-width: 64px; }
	.v-tl__dot { flex: none; }
}

/* ---------- ruled list (problems) ---------- */
.v-rules { border-top: 2px solid currentColor; }
.v-rules__row { display: flex; align-items: baseline; gap: clamp(16px, 3vw, 40px); padding: clamp(18px, 2vw, 26px) 0; border-bottom: 1px solid rgba(0,0,0,.25); }
.t-navy .v-rules__row, .t-purple .v-rules__row, .t-black .v-rules__row { border-bottom-color: rgba(255,255,255,.22); }
.v-rules__n { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.6vw, 24px); width: 36px; flex: none; }
.v-rules__t { font-size: clamp(26px, 3.2vw, 52px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.v-rules--sm .v-rules__t { font-size: clamp(22px, 2.4vw, 38px); }
.v-rules__d { display: block; margin-top: 10px; font-size: clamp(16px, 1.2vw, 18px); font-weight: 400; letter-spacing: 0; line-height: 1.55; opacity: .85; }
/* Linked titles (rules.php, cards.php third element): .v11 a drops the underline. */
.v-rules__t > a, .v-card h3 > a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }

/* ---------- steps ---------- */
.v-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; align-items: stretch; }
.v-step { background: #fff; color: #000; padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; gap: 18px; }
.v-step__n { font-family: var(--serif); font-style: italic; font-size: 64px; line-height: .8; color: var(--coral-ink); }
.v-step p { margin: 0; font-size: 17px; line-height: 1.55; }
.v-step--hot { background: #000; color: #fff; }
.v-step--hot .v-step__n, .v-step--hot .v-h3 { color: var(--gold); }
.v-step--hot p { color: rgba(255,255,255,.88); }

/* ---------- capability grid ---------- */
.v-capgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.v-cap { outline: 1px solid rgba(255,255,255,.22); outline-offset: -.5px; padding: clamp(26px, 2.6vw, 40px); min-height: 230px; display: flex; flex-direction: column; gap: 14px; transition: background .3s, color .3s; }
.t-cream .v-cap, .t-white .v-cap, .t-coral .v-cap, .t-gold .v-cap { outline-color: rgba(0,0,0,.18); }
.v-cap:hover { background: var(--gold); color: #000; opacity: 1 !important; }
.v-cap__n { font-family: var(--serif); font-style: italic; font-size: 22px; opacity: .75; }
.v-cap h3, .v-cap h2 { margin: auto 0 0; font-size: clamp(24px, 2.1vw, 32px); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; }
.v-cap p { margin: 0; font-size: 16px; line-height: 1.5; opacity: .88; }
.v-cap__go { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- case cards ---------- */
.v-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
/* Five cards: the first spans two columns so the last row is never one orphan. */
@media (min-width: 1100px) { .v-cases > :first-child:nth-last-child(5) { grid-column: span 2; } }
.v11 .v-case { padding: clamp(28px, 3vw, 44px); min-height: 420px; display: flex; flex-direction: column; gap: 20px; transition: transform .5s var(--ease); background: var(--bg); color: var(--fg); }
.v-case:hover { transform: translateY(-6px); opacity: 1 !important; }
.v11 .v-case[hidden] { display: none; }
.v-case__client { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.v-case__lbl { font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.v-case__problem { margin: 8px 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.2; }
.v-case__result { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 22px; border-top: 1px solid var(--rule); }
.v-case__big { font-size: clamp(34px, 3.4vw, 52px); font-weight: 900; letter-spacing: -.045em; line-height: .95; color: var(--accent); }
.v-case__result p { margin: 0; font-size: 16px; line-height: 1.5; }
.v-awards { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px 36px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- quotes ---------- */
.v-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 16px; }
.v-quote { margin: 0; background: var(--cream); color: #000; padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; gap: 28px; }
.t-cream .v-quote { background: #fff; }
.v-quote blockquote { margin: 0; flex: 1; font-family: var(--serif); font-style: italic; font-size: clamp(21px, 1.8vw, 27px); line-height: 1.35; text-wrap: pretty; }
.v-quote blockquote strong { color: var(--purple); font-weight: 600; }
.v-quote figcaption { display: flex; align-items: center; gap: 16px; padding-top: 22px; border-top: 1px solid rgba(0,0,0,.15); }
.v-quote figcaption img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: rgba(0,0,0,.06); flex: none; }
/* Initials when there is no real headshot (quotes.php). */
.v-quote__mono { width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: var(--gold); font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 20px; line-height: 1; flex: none; display: grid; place-items: center; }
.v-quote__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.v-quote__who b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.v-quote__who span { font-size: 13.5px; line-height: 1.4; color: rgba(0,0,0,.7); }
.v-quote figcaption a { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; border-bottom: 2px solid #000; padding-bottom: 3px; }
/* Name and role keep the row beside the avatar; the "<Client> case study"
   link wraps onto its own row, lined up under the name (52px avatar + 16px
   gap). At every width: in the two-column grid the long labels would crush
   the name column. */
.v-quote figcaption { flex-wrap: wrap; }
.v-quote__who { flex-basis: calc(100% - 68px); }
.v-quote figcaption a { margin-left: 68px; max-width: calc(100% - 68px); white-space: normal; }
.v-reviewbar { margin-top: 16px; display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; padding: 22px clamp(28px, 3vw, 44px); background: var(--navy); color: #fff !important; transition: background .3s; }
.v-reviewbar:hover { background: var(--purple); opacity: 1 !important; }
.v-reviewbar__stars { font-size: 16px; letter-spacing: .14em; color: var(--gold); }
.v-reviewbar__q { flex: 1; min-width: 240px; font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.35; }
/* Attribution under the review quote (front-page.php), not part of the quotation. */
.v-reviewbar__q b { display: block; margin-top: 8px; font-family: var(--sans); font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.v-reviewbar__go { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }

/* ---------- logo drift ---------- */
.v-logos { margin-top: clamp(64px, 8vw, 112px); display: flex; flex-direction: column; gap: clamp(24px, 3vw, 44px); }
.v-logos__row { display: flex; width: max-content; align-items: center; will-change: transform; }
.v-logos__cell { flex: none; width: clamp(170px, 14vw, 240px); height: clamp(90px, 7.5vw, 120px); display: grid; place-items: center; padding: 0 clamp(20px, 2.2vw, 36px); }
.v-logos__cell img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; opacity: .8; transition: opacity .25s, filter .25s; }
.v-logos__cell img:hover { opacity: 1; filter: none; }
/* Pause control for the drifting logos (front-page.php; js/v11.js). */
.v-logos__pause { margin-top: 24px; min-height: 44px; padding: 12px 14px; background: transparent; color: #000; border: 1px solid rgba(0,0,0,.3); border-radius: 0; font: 700 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.v-logos__pause:hover { border-color: #000; }

/* ---------- podcast ---------- */
.v-pod-logo { height: clamp(56px, 6vw, 84px); width: auto; align-self: flex-start; }
.v-eps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.v-ep { display: flex; flex-direction: column; gap: 16px; }
.v-ep:hover { opacity: 1 !important; color: var(--gold); }
.v-ep__img { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--navy); }
.v-ep__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.v-ep:hover .v-ep__img img { transform: scale(1.05); }
.v-ep__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.v-ep__meta b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.v-ep__meta span { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .7; white-space: nowrap; }

/* ---------- city ---------- */
.v-city { position: relative; min-height: min(92vh, 900px); display: flex; align-items: flex-end; background: var(--navy); }
.v-city iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.v-city__top { position: absolute; inset: 0 0 auto 0; height: 48px; background: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,0)); pointer-events: none; }
.v-city__in { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; padding: clamp(140px, 16vw, 240px) var(--gutter) clamp(40px, 5vw, 72px); pointer-events: none; }
.v-city__card { pointer-events: auto; max-width: 640px; background: var(--gold); color: #000; padding: clamp(22px, 3.6vw, 56px); display: flex; flex-direction: column; gap: 22px; }
.v-city__card p { margin: 0; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.6; text-wrap: pretty; }
.v-city__card .v-arrow { align-self: flex-start; }

/* ---------- book (closing CTA) ---------- */
.v-book { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(48px, 6vw, 100px); align-items: start; padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); }
.v-book__h { margin: 0; font-size: clamp(56px, 8vw, 140px); font-weight: 900; line-height: .86; letter-spacing: -.05em; text-wrap: balance; }
.v-book__copy { display: flex; flex-direction: column; gap: 32px; }
.v-book__copy p { margin: 0; max-width: 520px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; font-weight: 500; text-wrap: pretty; }
/* Side by side, the copy stays in view while the form scrolls past. */
@media (min-width: 900px) { .v-book__copy { position: sticky; top: 120px; } }
.v-form { background: #fff; color: #000; padding: clamp(16px, 2vw, 28px); }
.v-form iframe { display: block; width: 100%; height: 816px; border: 0; }
.v-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Popup Maker's popups (e.g. the pricing-guide popup) are off on v11 pages;
   its own CSS that normally hides them is not loaded here. */
.v11 .pum, .v11 .pum-overlay { display: none !important; }

/* ---------- footer ---------- */
.v-foot { background: #000; color: rgba(255,255,255,.7); }
.v-foot__in { max-width: 1440px; margin: 0 auto; padding: clamp(64px, 7vw, 96px) var(--gutter) 32px; font-size: 14px; }
.v-foot__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.14); }
.v-foot__top > div { display: flex; flex-direction: column; gap: 18px; }
.v-foot__top img { height: 44px; width: auto; align-self: flex-start; }
.v-foot__line { margin: 0; font-size: clamp(28px, 3vw, 44px); font-weight: 900; letter-spacing: -.04em; line-height: 1; color: #fff; }
.v-foot__line .v-em { color: var(--gold); }
.v-foot__cols { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 40px; }
.v-foot__col { display: flex; flex-direction: column; gap: 10px; line-height: 1.6; }
.v-foot__col h2, .v-foot__faq-h { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
/* "Common questions" heading above the footer FAQ (footer.php). */
.v-foot__faq-h { margin: 56px 0 0; }
.v-foot__col a:hover { color: #fff; opacity: 1; }
.v-foot__gap { margin-top: 10px; }
.v-faq { margin-top: 56px; border-top: 1px solid rgba(255,255,255,.12); }
.v-faq--light { border-top-color: rgba(0,0,0,.18); }
.v-faq__item { border-bottom: 1px solid rgba(255,255,255,.12); }
.v-faq--light .v-faq__item { border-bottom-color: rgba(0,0,0,.18); }
.v-foot__faq-h + .v-faq { margin-top: 16px; }
/* faq.php: h3.v-faq__h > button.v-faq__q > span.v-faq__t (question) + span.v-faq__x (+). */
.v-faq__h { margin: 0; font: inherit; }
.v-faq__q { all: unset; display: flex; width: 100%; box-sizing: border-box; align-items: center; gap: 16px; padding: 16px 0; cursor: pointer; font-family: inherit; }
.v-faq__t { margin: 0; flex: 1; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.88); }
.v-faq__x { font-size: 18px; transition: transform .3s; }
.v-faq__q[aria-expanded="true"] .v-faq__x { transform: rotate(45deg); }
/* Answers collapse only once js/v11.js is running; without JS they stay open. */
.v-js .v-faq__a { overflow: hidden; max-height: 0; transition: max-height .4s; }
.v-faq__a p { margin: 0; padding: 0 40px 16px 0; line-height: 1.6; }
.v-faq--light .v-faq__t { color: #000; font-size: clamp(18px, 1.5vw, 22px); font-weight: 800; letter-spacing: -.01em; }
.v-faq--light .v-faq__q { padding: 22px 0; }
.v-faq--light .v-faq__a p { font-size: 17px; }
.v-entity { margin: 32px 0 0; font-size: 12.5px; line-height: 1.7; color: rgba(255,255,255,.55); max-width: 1100px; }
.v-foot__legal { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 28px; font-size: 12.5px; color: rgba(255,255,255,.55); }
.v-foot__legal .v-spacer { flex: 1; }
/* Phones: the spacer becomes a line break, so the social links get their own
   row. A flex line never goes below zero height, so the negative margins
   alone cannot cancel the two row gaps around the empty spacer line; the 10px
   row gap makes the break read as one normal 20px gap. */
@media (max-width: 599px) {
	.v-foot__legal { row-gap: 10px; }
	.v-foot__legal .v-spacer { flex-basis: 100%; height: 0; margin: -10px 0; }
}

/* ---------- Mailchimp signup ---------- */
.v-signup { display: flex; flex-direction: column; gap: 12px; }
.v-signup__lbl { font-size: 14px; font-weight: 700; color: #fff; }
.v-signup__row { display: flex; gap: 8px; }
.v-signup input[type=email] { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.28); border-radius: 0; background: transparent; color: #fff; outline: none; }
.v-signup input[type=email]:focus { border-color: var(--gold); }
.v-signup button { font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 14px 22px; border: 0; border-radius: 0; background: var(--gold); color: #000; cursor: pointer; white-space: nowrap; }
.v-signup button:hover { background: #fff; }
.v-signup button[disabled] { opacity: .6; cursor: default; }
.v-signup__msg { margin: 0; min-height: 1.4em; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.75); }
.v-signup__msg.is-ok { color: var(--gold); }
.v-signup__msg a { text-decoration: underline; }
.v-foot__news { margin-top: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.14); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 24px clamp(32px, 5vw, 96px); align-items: end; }
.v-foot__news-h { margin: 0 0 10px; font-size: clamp(24px, 2.2vw, 32px); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; color: #fff; }
.v-foot__news-h .v-em { color: var(--gold); }
.v-foot__news p { margin: 0; max-width: 520px; line-height: 1.6; }
.v-signup--footer .v-signup__lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Spectruss Intelligence slide-out ---------- */
.v-intel-tab { position: fixed; top: 50%; right: 0; transform: translateY(-50%); z-index: 40; background: var(--gold); color: #000; writing-mode: vertical-rl; font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; padding: 20px 9px; border: 0; cursor: pointer; transition: padding .25s var(--ease), background .25s; }
.v-intel-tab:hover { background: #fff; padding-right: 13px; }
.v-intel-tab { box-shadow: 0 0 0 1px rgba(0,0,0,.55), -6px 0 18px rgba(0,0,0,.18); }
.v-intel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 90; }
.v-intel { position: fixed; top: 0; right: 0; height: 100%; width: min(440px, 92vw); background: var(--navy); color: #fff; z-index: 91; transform: translateX(102%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s; box-shadow: -18px 0 50px rgba(0,0,0,.45); display: flex; flex-direction: column; }
.v-intel.is-open { transform: none; visibility: visible; transition: transform .45s var(--ease); }
.v-intel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 28px 28px 20px; border-bottom: 1px solid rgba(255,255,255,.12); }
.v-intel__head .v-eyebrow { color: var(--gold); font-size: 12px; }
.v-intel__sub { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.75); }
.v-intel__sub a { color: var(--gold); text-decoration: underline; }
.v-intel__close { background: none; border: 0; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; padding: 0; }
.v-intel__list { flex: 1; overflow-y: auto; padding: 8px 28px 20px; }
.v-intel__item { display: block; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.v-intel__item:hover { opacity: 1 !important; }
.v-intel__item:hover .v-intel__title { color: var(--gold); }
.v-intel__date { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.v-intel__title { display: block; margin-top: 6px; font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.35; transition: color .2s; }
.v-intel__go { display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.v-intel__all { display: inline-block; margin-top: 18px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.v-intel__foot { padding: 22px 28px 28px; border-top: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); }
html.v-intel-open { overflow: hidden; }
.v-drawer .v-drawer__intel { all: unset; cursor: pointer; font-size: 26px; font-weight: 900; letter-spacing: -.03em; padding: 8px 0; color: var(--gold); }
.v-drawer .v-drawer__intel:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (min-width: 900px) { .v-drawer__intel { display: none; } }
@media (max-width: 899px) {
	/* On phones the vertical tab covers text; the menu drawer opens it instead. */
	.v-intel-tab { display: none; }
	.v11 .v-case { min-height: 0; }
}

/* ---------- client logo wall ---------- */
.v-logowall { list-style: none; margin-left: 0; margin-right: 0; margin-bottom: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); border-top: 1px solid rgba(0,0,0,.12); border-left: 1px solid rgba(0,0,0,.12); }
.v-logowall li { aspect-ratio: 3 / 2; display: grid; place-items: center; padding: clamp(16px, 2vw, 28px); border-right: 1px solid rgba(0,0,0,.12); border-bottom: 1px solid rgba(0,0,0,.12); }
.v-logowall img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; opacity: .8; transition: opacity .25s, filter .25s; }
.v-logowall li:hover img { opacity: 1; filter: none; }
/* Logos with a case study are links (logowall.php): the link fills the cell. */
.v-logowall a { display: grid; place-items: center; width: 100%; height: 100%; }
.v-logowall a:hover { opacity: 1; }
.v-logowall a:hover img, .v-logowall a:focus-visible img { opacity: 1; filter: none; }
@media (max-width: 699px) {
	.v-logowall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.v-logowall li { padding: 10px; }
}
.v-sec-link { margin-top: 28px; }

/* ---------- inner pages ---------- */
.v-hero--inner { min-height: auto; }
.v-hero--inner .v-hero__in { padding-top: clamp(150px, 18vw, 230px); padding-bottom: clamp(72px, 9vw, 130px); }
.v-hero--inner { background: var(--bgc, var(--navy)); color: var(--fgc, #fff); }
.v-hero--inner .v-hero__sub { color: inherit; opacity: .88; }
.v-hero--inner.is-light .v-eyebrow, .v-hero--inner.is-light .v-crumbs { color: #000; }
/* --emc is the theme's accent (hero.php): black on coral and gold, purple on
   white, gold on dark themes. */
.v-hero--inner .v-em { color: var(--emc, var(--gold)); }
.v-hero--inner.is-light .v-textlink { border-bottom-color: rgba(0,0,0,.5); }
.v-hero--inner.is-light .v-btn { background: #000; color: #fff !important; }
.v-hero--inner.is-light .v-btn:hover { background: var(--purple); }
.v-hero--inner.is-light .v-crumbs { color: rgba(0,0,0,.8); }
.v-hero__mark { position: absolute; right: calc(var(--gutter) * -1); bottom: -8%; width: min(46vw, 640px); opacity: .07; pointer-events: none; }
.v-hero__stats { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px; padding-top: 28px; border-top: 1px solid currentColor; border-top-color: rgba(127,127,127,.35); }
.v-stat b { display: block; font-size: clamp(36px, 4vw, 64px); font-weight: 900; letter-spacing: -.045em; line-height: .95; }
.v-stat span { display: block; margin-top: 10px; font-size: 14px; line-height: 1.45; opacity: .8; }
.t-navy .v-stat b, .t-purple .v-stat b, .t-black .v-stat b { color: var(--gold); }

.v-hook { margin: 0; max-width: 1180px; font-size: clamp(30px, 3.6vw, 58px); font-weight: 900; line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; }

.v-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.v-card { background: #fff; color: #000; padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; gap: 16px; }
.v-card__n { font-family: var(--serif); font-style: italic; font-size: 52px; line-height: .8; color: var(--coral-ink); }
.v-card h3 { margin: 0; font-size: clamp(21px, 1.8vw, 27px); font-weight: 900; letter-spacing: -.03em; line-height: 1.08; }
.v-card p { margin: 0; font-size: 16.5px; line-height: 1.55; }
.v-cards > .v-card:nth-child(2) { background: #000; color: #fff; }
.v-cards > .v-card:nth-child(2) .v-card__n, .v-cards > .v-card:nth-child(2) h3 { color: var(--gold); }
.v-cards > .v-card:nth-child(2) p { color: rgba(255,255,255,.88); }
.t-white .v-card, .t-cream .v-card { outline: 1px solid rgba(0,0,0,.12); outline-offset: -1px; }
.t-cream .v-card { background: #fff; }

.v-includes { list-style: none; margin-left: 0; margin-right: 0; margin-bottom: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); border-top: 1px solid rgba(255,255,255,.22); }
.v-includes li { display: flex; gap: 14px; align-items: baseline; padding: 18px 16px 18px 0; border-bottom: 1px solid rgba(255,255,255,.22); font-size: clamp(17px, 1.3vw, 19px); font-weight: 700; letter-spacing: -.01em; line-height: 1.35; }
.v-includes li::before { content: ''; flex: none; width: 8px; height: 8px; background: var(--gold); transform: translateY(-2px); }
.t-cream .v-includes, .t-white .v-includes, .t-gold .v-includes, .t-coral .v-includes { border-top-color: rgba(0,0,0,.2); }
.t-cream .v-includes li, .t-white .v-includes li, .t-gold .v-includes li, .t-coral .v-includes li { border-bottom-color: rgba(0,0,0,.2); }
.t-cream .v-includes li::before, .t-white .v-includes li::before { background: var(--purple); }
.t-gold .v-includes li::before, .t-coral .v-includes li::before { background: #000; }

.v-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-left: 0; margin-right: 0; margin-bottom: 0; padding: 0; list-style: none; }
.v-tags li, .v-tags a { display: inline-block; padding: 10px 16px; border: 1px solid currentColor; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.v-tags a:hover { background: var(--gold); color: #000; border-color: var(--gold); opacity: 1 !important; }

.v-prose { max-width: 760px; }
.v-prose p { margin: 0 0 1.1em; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.65; text-wrap: pretty; }
.v-prose p:last-child { margin-bottom: 0; }
.t-navy .v-prose p, .t-purple .v-prose p, .t-black .v-prose p { color: rgba(255,255,255,.86); }
.v-prose p:not(.v-sec-link) a { text-decoration: underline; text-underline-offset: 3px; }

.v-quote-big { margin: 0; }
.v-quote-big blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(28px, 3.4vw, 54px); line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.v-quote-big figcaption { margin-top: 32px; font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.v-quote-big figcaption span { display: block; margin-top: 6px; font-weight: 500; letter-spacing: .04em; text-transform: none; font-size: 15px; opacity: .8; }

.v-meta-row { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 40px; font-size: 13px; }
.v-meta-row div { display: flex; flex-direction: column; gap: 6px; }
.v-meta-row b { font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.v-meta-row span { font-size: 16px; font-weight: 700; }

.v-nap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.v-nap > div { background: rgba(255,255,255,.06); padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; gap: 8px; line-height: 1.6; }
.t-cream .v-nap > div, .t-white .v-nap > div, .t-gold .v-nap > div { background: #fff; }
.v-nap h3 { margin: 0 0 6px; font-size: 22px; font-weight: 900; letter-spacing: -.02em; }

.v-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.v-member { display: flex; flex-direction: column; gap: 14px; }
.v-member__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--navy); }
.v-member__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.v-member:hover .v-member__img img { transform: scale(1.04); }
.v-member b { font-size: 20px; font-weight: 900; letter-spacing: -.02em; }
.v-member > span:not(.v-member__img) { font-size: 14px; opacity: .75; }
/* One-line description under the role (team.php): sentence case, not a label. */
.v-member .v-member__line { font-size: 14px; line-height: 1.5; opacity: .75; text-transform: none; letter-spacing: 0; font-weight: 400; }

.v-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.v-filter button { font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 10px 16px; border: 1px solid rgba(0,0,0,.3); background: transparent; color: #000; cursor: pointer; }
.v-filter button[aria-pressed="true"] { background: #000; color: #fff; border-color: #000; }

.v-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 40px 16px; }
.v-post-card { display: flex; flex-direction: column; gap: 14px; }
.v-post-card:hover { opacity: 1 !important; }
.v-post-card:hover h3, .v-post-card:hover h2 { color: var(--purple); }
.v-post-card__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy); }
.v-post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.v-post-card:hover .v-post-card__img img { transform: scale(1.04); }
.v-post-card small { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--purple); }
.v-post-card h3, .v-post-card h2 { margin: 0; font-size: clamp(21px, 1.7vw, 25px); font-weight: 900; letter-spacing: -.025em; line-height: 1.12; transition: color .2s; }
.v-post-card p { margin: 0; font-size: 15.5px; line-height: 1.55; color: rgba(0,0,0,.72); }
.v-pager { margin-top: 64px; display: flex; gap: 8px; flex-wrap: wrap; }
.v-pager .page-numbers { display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 14px; border: 1px solid rgba(0,0,0,.25); font-size: 14px; font-weight: 800; }
.v-pager .page-numbers.current { background: #000; color: #fff; border-color: #000; }

.v-article { max-width: 760px; margin: 0 auto; overflow-wrap: break-word; }
.v-article > * { font-size: clamp(17px, 1.3vw, 19.5px); line-height: 1.7; }
/* Post content can carry GenerateBlocks heading/text styles from the old
   design; keep post typography on the v11 system. */
.v-article h1, .v-article h2, .v-article h3, .v-article h4 { font-family: var(--sans) !important; font-weight: 900 !important; letter-spacing: -.03em !important; color: #000 !important; }
.v-article p, .v-article li { font-family: var(--sans) !important; color: rgba(0,0,0,.85); }
.v-article h2 { font-size: clamp(30px, 3vw, 44px); font-weight: 900; letter-spacing: -.035em; line-height: 1.05; margin: 1.6em 0 .5em; }
.v-article h3 { font-size: clamp(23px, 2vw, 29px); font-weight: 900; letter-spacing: -.025em; line-height: 1.15; margin: 1.5em 0 .4em; }
.v-article a { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; }
.v-article img { height: auto; }
.v-article blockquote { margin: 1.6em 0; font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2vw, 28px); line-height: 1.35; }
.v-article iframe { max-width: 100%; }
/* Core button blocks in posts: v11 buttons. !important beats the block's own
   color classes and inline styles left over from the old palette. */
.v-article .wp-block-button__link { display: inline-block; background: var(--gold) !important; color: #000 !important; border-radius: 0 !important; text-decoration: none !important; font-family: var(--sans) !important; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; padding: 16px 24px; transition: background .25s, color .25s; }
.v-article .wp-block-button.is-style-outline .wp-block-button__link { background: transparent !important; border: 2px solid #000; padding: 16px 24px; }
.v-article .wp-block-button .wp-block-button__link:hover { background: #000 !important; color: #fff !important; opacity: 1; }
.v-byline { display: flex; align-items: center; gap: 14px; margin-top: 36px; font-size: 14px; }
.v-byline img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.v-byline b { display: block; font-size: 15px; }

/* ---------- reveal ---------- */
.v-js [data-reveal].is-pending { opacity: 0; transform: translateY(48px); }
.v-js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1s var(--ease); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.v-hero__in > * { animation: none !important; }
	.v-js [data-reveal].is-pending { opacity: 1; transform: none; }
	.v-case, .v-ep__img img { transition: none; }
}

/* ---------- nav dropdowns (Capabilities, Work, About) ---------- */
.v-dd { position: relative; }
.v-dd__top { display: inline-block; padding: 10px 0; }
.v-dd.has-kids .v-dd__top::after { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 0 3px 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .7; }
.v-dd__panel { position: absolute; top: 100%; left: -24px; min-width: 240px; padding: 14px 0; background: var(--navy); box-shadow: 0 24px 60px rgba(0,0,0,.35); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .25s var(--ease), visibility .2s; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 500; }
.v-dd--wide .v-dd__panel { display: grid; grid-template-columns: 1fr 1fr; min-width: 520px; column-gap: 8px; }
.v-dd__panel a { padding: 9px 24px; color: rgba(255,255,255,.88); }
.v-dd__panel a:hover { color: var(--gold); opacity: 1; }
.v-dd__panel .v-dd__more { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-top: 6px; }
.v-dd:hover .v-dd__panel, .v-dd:focus-within .v-dd__panel { opacity: 1; visibility: visible; transform: none; }
.v-dd__top[aria-current] { color: var(--gold); }
@media (max-width: 1099px) {
	.v-nav__links, .v-nav__cta--desk { display: none; }
	.v-burger { display: flex; }
	.v-nav.is-open .v-drawer { display: flex; }
	.v-drawer { flex-direction: column; gap: 4px; padding: 8px var(--gutter) 28px; max-width: 1440px; margin: 0 auto; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; }
	/* The CTA stays pinned to the bottom of the scrolling drawer, with a navy
	   fade so the links scrolling under it stay legible. */
	.v-drawer .v-nav__cta { margin-top: 16px; text-align: center; font-size: 14px; padding: 18px; letter-spacing: .08em; position: sticky; bottom: 0; box-shadow: 0 -16px 24px rgba(21,35,55,.95); }
	.v-drawer__intel { display: block; }
}
/* Page behind the open drawer does not scroll (js/v11.js toggles the class). */
html.v-nav-open { overflow: hidden; }
.v-drawer__grp { display: flex; flex-direction: column; padding: 6px 0 10px; border-bottom: 1px solid rgba(255,255,255,.12); }
.v-drawer .v-drawer__top { font-size: 26px; font-weight: 900; letter-spacing: -.03em; padding: 6px 0; }
.v-drawer__kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 16px; }
/* The drawer only shows below 1100px, so these sizes are the phone/tablet sizes. */
.v-drawer .v-drawer__kids a { font-size: 14px; font-weight: 500; letter-spacing: 0; padding: 5px 0; color: rgba(255,255,255,.8); }

/* ---------- photography ---------- */
.v-photo { margin: 0; position: relative; overflow: hidden; background: rgba(0,0,0,.06); }
.v-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v-photo figcaption { margin-top: 12px; font-size: 13px; line-height: 1.5; opacity: .7; }
.v-photo--contain { background: none; }
.v-photo--contain img { object-fit: contain; height: auto; }
.v-band { aspect-ratio: 21 / 9; max-height: 78vh; }
.v-band img { height: 100%; }
@media (max-width: 699px) { .v-band { aspect-ratio: 2 / 1; } }
/* The homepage loop in a band: Wistia's fitStrategy=cover crops inside the iframe. */
.v-band--video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.v-band--video .v-band__pause { right: 16px; bottom: 16px; }
.v11 [data-video-band][hidden] { display: none; }
/* Contain bands (band.php 'contain'): show the whole image at its own shape. */
.v-band.v-photo--contain { aspect-ratio: auto; max-height: none; }
.v-band.v-photo--contain img { height: auto; object-fit: contain; }
.v-media { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px clamp(32px, 5vw, 96px); align-items: center; }
.v-media--flip > :first-child { order: 2; }
@media (max-width: 899px) { .v-media--flip > :first-child { order: 0; } }
.v-media .v-photo { aspect-ratio: 4 / 3; }
.v-media .v-photo--tall { aspect-ratio: 4 / 5; }
.v-media__text { display: flex; flex-direction: column; gap: 22px; }
.v-media__text p { margin: 0; }
.v-gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.v-gallery .v-photo { grid-column: span 3; aspect-ratio: 16 / 10; }
.v-gallery .v-photo:nth-child(3n+1) { grid-column: span 6; aspect-ratio: 2 / 1; }
.v-gallery--even .v-photo, .v-gallery--even .v-photo:nth-child(3n+1) { grid-column: span 2; aspect-ratio: 1 / 1; }
@media (max-width: 699px) {
	.v-gallery .v-photo, .v-gallery .v-photo:nth-child(3n+1) { grid-column: span 6; aspect-ratio: 16 / 10; }
	.v-gallery--even .v-photo, .v-gallery--even .v-photo:nth-child(3n+1) { grid-column: span 3; aspect-ratio: 1 / 1; }
}
.t-cream .v-gallery .v-photo, .t-white .v-gallery .v-photo { background: rgba(0,0,0,.06); }
/* Portraits and long strips in a gallery (case-study.php adds v-photo--fit):
   the whole image on white instead of a crop. */
.v11 .v-gallery .v-photo.v-photo--fit { background: #fff; }
.v-gallery .v-photo--fit img { object-fit: contain; }

/* award badges */
.v-badges { list-style: none; margin-left: 0; margin-right: 0; margin-bottom: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 20px; align-items: center; }
.v-badges li { display: grid; place-items: center; }
.v-badges img { width: 100%; max-width: 140px; height: auto; display: block; margin: 0 auto; }
.v-badges a { display: block; width: 100%; max-width: 140px; transition: transform .2s ease; }
.v-badges a:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .v-badges a { transition: none; } .v-badges a:hover { transform: none; } }

/* case cards with the work on top */
.v11 .v-case { padding: 0; gap: 0; }
.v-case__img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(0,0,0,.2); }
.v-case__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.v-case:hover .v-case__img img { transform: scale(1.04); }
/* Client logo on a white chip over the work (cases.php). The img rule has to
   undo the cover/scale rules above. */
.v-case__logo { position: absolute; left: 16px; bottom: 16px; background: #fff; padding: 10px 14px; max-width: 150px; line-height: 0; }
.v-case__img .v-case__logo img { width: auto; height: auto; max-width: 100%; max-height: 40px; object-fit: contain; transform: none; position: static; }
.v-case:hover .v-case__img .v-case__logo img { transform: none; }
.v-case__body { padding: clamp(24px, 2.6vw, 40px); display: flex; flex-direction: column; gap: 20px; flex: 1; }

/* client logo chip in the case-study hero */
.v-logochip { display: inline-grid; place-items: center; background: #fff; padding: 16px 22px; margin-bottom: 28px; max-width: 260px; }
.v-logochip img { display: block; max-height: 64px; width: auto; max-width: 100%; }

/* client avatar in quotes */
.v-quote-big .v-quote-big__who { display: flex; align-items: center; gap: 18px; }
.v-quote-big__who img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.v-quote-big figcaption .v-quote-big__name { display: block; margin: 0; font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: 1; }

/* capabilities index rows */
.v-caprow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 28px clamp(32px, 5vw, 96px); align-items: center; padding: clamp(48px, 6vw, 88px) 0; border-top: 1px solid rgba(255,255,255,.22); }
.t-cream .v-caprow, .t-white .v-caprow { border-top-color: rgba(0,0,0,.15); }
.v-caprow:nth-child(even) > .v-photo { order: 2; }
@media (max-width: 899px) { .v-caprow:nth-child(even) > .v-photo { order: 0; } }
.v-caprow .v-photo { aspect-ratio: 16 / 10; }
/* Screenshots and diagrams (services.php adds v-photo--contain): not cropped. */
.v-caprow .v-photo--contain { background: #fff; }
.v-caprow .v-photo--contain img { height: 100%; object-fit: contain; }
.v-caprow__n { font-size: 12px; font-weight: 800; letter-spacing: .2em; opacity: .7; }
.v-caprow h2 { margin: 12px 0 16px; font-size: clamp(32px, 3.4vw, 52px); font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.v-caprow p { margin: 0 0 20px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; }
.v-caprow ul { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.v-caprow li { font-size: 13px; font-weight: 700; padding: 7px 12px; border: 1px solid currentColor; opacity: .85; }

/* linked capability tags (case-study "What we did") */
.v-meta-row a { border-bottom: 1px solid currentColor; }

/* photo tiles (about: racing, podcast, offices) */
.v-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 32px 16px; }
.v-tiles--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.v-tile { display: flex; flex-direction: column; gap: 12px; }
.v-tile .v-photo { aspect-ratio: 4 / 3; display: block; }
.v-tile .v-photo img { transition: transform .7s var(--ease); }
.v-tile:hover .v-photo img { transform: scale(1.04); }
.v-tile:hover { opacity: 1 !important; }
.v-tile b { margin-top: 8px; font-size: clamp(22px, 1.9vw, 28px); font-weight: 900; letter-spacing: -.03em; }
.v-tile__p { font-size: 16px; line-height: 1.55; opacity: .85; }
.v-tile__go { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--purple); }
.t-navy .v-tile__go, .t-purple .v-tile__go, .t-black .v-tile__go { color: var(--gold); }
.t-navy .v-logowall, .t-navy .v-logowall li { border-color: rgba(255,255,255,.15); }
.v-gallery--row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.v-gallery--row .v-photo, .v-gallery--row .v-photo:nth-child(3n+1) { grid-column: auto; aspect-ratio: 4 / 5; }
.v-photo--cap { overflow: visible; background: none; }
.v-photo--cap img { aspect-ratio: 4 / 5; height: auto; }
.t-navy .v-photo figcaption, .t-black .v-photo figcaption { color: rgba(255,255,255,.8); }

/* ---------- video facades (spx11_video_facade(); js/v11.js swaps in the iframe on click) ---------- */
.v-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; }
.v-video { margin: 0; }
.v-video__play, .v-video iframe { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0; padding: 0; overflow: hidden; background: #000; border: 0; border-radius: 0; cursor: pointer; }
.v-video__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.75); transition: filter .3s; }
.v-video__play:hover img { filter: brightness(.9); }
.v-video__icon { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--gold); }
.v-video__icon::after { content: ""; position: absolute; left: 29px; top: 23px; width: 0; height: 0; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent #000; }
.v-video figcaption { margin-top: 12px; font-size: 15px; font-weight: 700; }

/* ---------- result charts (case-study.php) ---------- */
.v-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; margin-top: 48px; }
.v-chart { margin: 0; padding: 16px; background: #fff; }
.v-chart img { display: block; width: auto; max-width: min(100%, 520px); height: auto; margin: 0 auto; }
.v-chart figcaption { margin-top: 10px; font-size: 14px; color: #000; }

/* ---------- website mockups (capability.php) ---------- */
.v-mockups { list-style: none; margin-left: 0; margin-right: 0; margin-bottom: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.v-mockups img { display: block; width: 100%; max-width: min(100%, 517px); height: auto; margin: 0 auto; }
@media (max-width: 899px) { .v-mockups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- case filter: industry page link (case-studies.php; js/v11.js unhides it) ---------- */
.v-filter__more { display: inline-block; margin: 0 0 24px; }
.v-filter__more[hidden] { display: none; }

/* ---------- author box after a post (post.php) ---------- */
.v-author { display: flex; align-items: flex-start; gap: 20px; max-width: 760px; margin: 56px auto 0; padding-top: 32px; border-top: 1px solid rgba(0,0,0,.15); }
.v-author img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.v-author > div { flex: 1; min-width: 0; }
.v-author p { margin: 6px 0 12px; line-height: 1.6; }
/* When the name, bio and link are direct children (no wrapper div), stack
   them in one column beside the photo instead of one long flex row. No row
   gap, so the p margins set the spacing as they do inside a wrapper div. */
.v-author:has(> p) { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0 20px; }
.v-author:has(> p) > img { grid-row: 1 / span 3; }
.v-author:has(> p) > :not(img) { grid-column: 2; justify-self: start; }
/* Related links after a post (templates/v11/post.php). */
.v-related { max-width: 760px; margin: 40px auto 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.v-related .v-eyebrow { margin: 0; }
.v-related .v-arrow { white-space: normal; line-height: 1.5; }

/* ---------- reduced motion, late so it outranks the hover rules above ---------- */
@media (prefers-reduced-motion: reduce) {
	.v-js .v-faq__a, .v-faq__x, .v-case__img img, .v-member__img img, .v-post-card__img img, .v-tile .v-photo img, .v-video__play img { transition: none; }
	.v-case:hover .v-case__img img, .v-member:hover .v-member__img img, .v-post-card:hover .v-post-card__img img, .v-tile:hover .v-photo img { transform: none; }
}

/* ---------- spacing utilities, last so they outrank component resets of the
   same specificity (.v-photo and .v-quote-big set margin: 0) ---------- */
.v-mt-s { margin-top: 24px; }
.v-mt-m { margin-top: clamp(48px, 6vw, 80px); }
.v-mt-l { margin-top: clamp(56px, 7vw, 96px); }
.v-mt-xl { margin-top: clamp(72px, 9vw, 130px); }