/* The Brand Consulting site styles. Built from approved homepage Option AW (2026-10-21). */
/* Layout: full bleed cinematic portrait hero (blurred, color graded, grained) with type over it, then a quiet editorial page that takes its colors from the chosen grade. One committed look per grade, no dark mode swap. */
:root {
  --bar-bg: #121417; --bar-fg: #f2f0eb; --bar-muted: #979ea6; --bar-line: #2b3036;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --wide: "Archivo", "Arial Black", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --blur: 16px;
  --eye-blur: 0px;
  color-scheme: light;
}
/* Site palettes for everything below the hero. --deep paints the About and Let's talk sections. */
/* Legacy palette option, not used. */
/* Blush: pale rose with a deep red as the bold color (legacy option, not used). */
/* Midnight: cool navy ink so the warm hero is the only warm thing on the page. */
/* Gallery: white and black like an agency site, one amber accent. */

.hero { --g1: #4a0a03; --g2: #e7862c; --dk: #3d0601; --lt: #ffa24a; --glow: #ff7a1a; --v-red: #c0140c; --v-deep: #7e0c06; --v-org: #e8661c; --v-gold: #f3ab3e; --v-dark: #1d0d08; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg, #F5EFE6); color: var(--ink, #1F1310); font-family: var(--sans); font-size: 16px; line-height: 1.55; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 760px) { .wrap { padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); } }

/* Review bar */

/* Hero */
.hero { position: relative; overflow: hidden; color: #fff; background: var(--g1); min-height: clamp(560px, 92vh, 940px); display: flex; flex-direction: column; isolation: isolate; }
.hero .lt { display: none; }
.hero .lt { position: absolute; inset: 0; z-index: -5; background: var(--lt); mix-blend-mode: multiply; }
.hero .dk { position: absolute; inset: 0; z-index: -4; background: var(--dk); mix-blend-mode: screen; }
.hero .dk { z-index: -4; mix-blend-mode: multiply; opacity: .75; background: radial-gradient(55% 75% at 40% 32%, #ffe2c4 0%, #e9a374 45%, color-mix(in srgb, var(--v-deep) 85%, #000) 100%); }
.hero .glow { position: absolute; inset: -80px; z-index: -3; pointer-events: none; filter: blur(36px);
  /* New palette, sampled from the reference: solid where it sits, only the edges fade. */
  background:
    radial-gradient(5% 7% at 97% 96%, #e8c7bb 0%, #c98f86 45%, transparent 75%),
    radial-gradient(4% 15% at 96.5% 57%, #c9913f 0%, #a8692e 40%, transparent 80%),
    radial-gradient(9% 38% at 95% 36%, #7d4a44 0%, #6b3d3c 45%, transparent 85%),
    radial-gradient(16% 34% at 88% 24%, #5e3448 0%, #4f2c3a 40%, transparent 85%),
    radial-gradient(7% 9% at 31% 82%, #d9924a 0%, #c37628 45%, transparent 75%),
    radial-gradient(30% 20% at 50% 72%, #c37628 0%, #b8640e 50%, transparent 85%),
    radial-gradient(75% 40% at 45% 104%, #b85e04 0%, #b85e04 48%, transparent 88%),
    radial-gradient(42% 80% at -6% 40%, rgb(172 3 1 / .72) 0%, rgb(168 16 10 / .66) 40%, rgb(162 34 1 / .55) 58%, transparent 84%),
    radial-gradient(36% 40% at 4% 92%, #8c2200 0%, #912600 50%, transparent 85%),
    linear-gradient(32deg, #912600 0%, #8e2c03 22%, transparent 50%),
    radial-gradient(34% 75% at 104% 55%, #34170c 0%, #3a1a10 45%, transparent 85%),
    linear-gradient(180deg, color-mix(in srgb, #2a1f1c 60%, transparent) 0%, transparent 15%); }
.hero .accents { position: absolute; inset: 0; z-index: -3; pointer-events: none; filter: blur(14px);
  /* Right edge, kept sharper than the main wash: a mauve column, a warm yellow highlight, a pale rose bokeh in the corner. */
  background:
    radial-gradient(4% 6% at 97% 95%, #f1d6cc 0%, #d29c92 50%, transparent 78%),
    radial-gradient(3% 13% at 97% 57%, #d9a24a 0%, #b0742f 45%, transparent 82%),
    radial-gradient(7% 34% at 95.5% 35%, #84504a 0%, #6e3f45 50%, transparent 88%),
    radial-gradient(10% 26% at 89% 22%, #64384f 0%, transparent 85%); }
.hero .shade { position: absolute; inset: 0; z-index: -2; background: radial-gradient(140% 110% at 45% 35%, transparent 45%, rgba(0,0,0,.45) 100%); }
.hero .grain { position: absolute; inset: 0; z-index: -1; opacity: .2; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.hnav .wrap { max-width: 1700px; display: flex; align-items: center; justify-content: flex-end; gap: 38px; padding-block: 22px; }
.hnav img { height: 34px; width: auto; filter: brightness(0) invert(1); display: block; }
.hnav nav { display: none; gap: 6px 34px; font-size: 17px; }
@media (min-width: 820px) { .hnav nav { display: flex; gap: 38px; } }
.hnav a { color: #fff; text-decoration: none; }
.hnav .contact { font-size: 17px; }
.logo-m1 { margin-right: auto; display: grid; justify-items: start; line-height: .86; color: #fff; text-decoration: none; }
.logo-m1 .the { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 19px; margin-bottom: 3px; }
.logo-m1 .b { font-family: var(--wide); font-stretch: 108%; font-weight: 900; text-transform: uppercase; font-size: 21px; letter-spacing: -.035em; }
.logo-m1:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }

.hcenter { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; }
.hcenter a { pointer-events: auto; }
.hcenter .wrap { display: grid; gap: 6px; justify-items: center; width: 100%; max-width: none; }
.wordmark { font-family: var(--wide); font-stretch: 108%; font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 12vw, 150px); line-height: .86; letter-spacing: -.04em; margin: 0; }
@media (min-width: 760px) { .wordmark { font-size: min(7.7vw, 12.3vh); } }
.capwrap { position: relative; display: grid; justify-items: center; }
.cap-line { font-family: var(--sans) !important; font-size: clamp(14px, 1.25vw, 17px) !important; letter-spacing: .02em !important; text-transform: none !important; line-height: 1.5 !important; font-weight: 500; opacity: 1 !important; text-shadow: 0 1px 18px rgba(0,0,0,.35); }
.cap { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.45; opacity: .92; margin: 0; }
.cap span { display: block; }


/* Logo ticker, no label, same as the live site */
.ticker { border-bottom: 1px solid var(--line); overflow: hidden; background: var(--bg); }
.track { display: flex; width: max-content; gap: 64px; align-items: center; padding-block: 26px; animation: slide 38s linear infinite; }
.track img { height: 30px; width: auto; filter: grayscale(1) contrast(1.1); opacity: .62; mix-blend-mode: multiply; }
.track img.tall { height: 44px; }
.ticker.in-hero { position: absolute; left: 0; right: 0; bottom: 6vh; z-index: 2; background: transparent; border: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ticker.in-hero .track img { filter: brightness(0) invert(1); opacity: .78; mix-blend-mode: normal; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .track .dup { display: none; } }

/* Body sections */
section.block .wrap { padding-block: 80px; }
.sec-head { display: grid; gap: 14px; margin-bottom: 44px; max-width: 780px; }
h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.8vw, 60px); line-height: 1.03; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
.sec-head p { margin: 0; color: var(--muted); max-width: 60ch; }
.self { font-family: var(--serif); font-style: italic; color: var(--brand); font-size: 21px; }
.modes { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 820px) { .modes { grid-template-columns: repeat(3, 1fr); } }
.mode { background: var(--bg); padding: 34px 28px 30px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.mode h3 { font-family: var(--serif); font-weight: 400; font-size: 32px; margin: 0; color: var(--brand); }
.mode p { margin: 0; color: var(--muted); }
.pl { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-top: 6px; }
.mode .proof { color: var(--ink); }
.mode .proof b { font-weight: 700; }
.band { background: var(--brand); color: var(--brand-ink); }
.band h2 { color: var(--brand-ink); }
.band .sec-head p { color: color-mix(in srgb, var(--brand-ink) 78%, transparent); }
.stats { display: grid; gap: 36px; }
@media (min-width: 820px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { display: grid; gap: 8px; border-top: 1px solid color-mix(in srgb, var(--brand-ink) 30%, transparent); padding-top: 18px; }
.stat .num { font-family: var(--serif); font-size: clamp(46px, 5.2vw, 68px); line-height: 1; color: var(--soft); font-variant-numeric: tabular-nums; }
.stat p { margin: 0; opacity: .86; max-width: 32ch; }
.shapes { display: grid; gap: 22px; }
@media (min-width: 820px) { .shapes { grid-template-columns: repeat(3, 1fr); } }
.shape { border-top: 2px solid var(--ink); padding-top: 18px; display: grid; gap: 10px; align-content: start; }
.shape h3 { font-family: var(--serif); font-size: 28px; font-weight: 400; margin: 0; }
.shape .k { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.shape p { margin: 0; color: var(--muted); }
.closer { background: var(--surface); }
.closer .wrap { display: grid; gap: 24px; padding-block: 88px; }
@media (min-width: 900px) { .closer .wrap { grid-template-columns: 1.5fr 1fr; align-items: end; } }
.closer h2 em { font-style: italic; color: var(--brand); }
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--brand); color: var(--brand-ink); text-decoration: none; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; padding: 16px 26px; border-radius: 999px; justify-self: start; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 28px; font-size: 13px; color: var(--muted); }
:root { --blur: 12px; }
.manifesto { background: var(--deep); color: #fff; }
.manifesto .wrap { padding-block: 110px; display: grid; gap: 34px; justify-items: center; text-align: center; }
.manifesto p.big { font-family: var(--sans); font-weight: 500; text-transform: uppercase; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.22; letter-spacing: -.005em; max-width: 30ch; margin: 0; text-wrap: balance; }
.manifesto p.big em { font-family: var(--serif); font-style: italic; text-transform: none; color: var(--soft); font-weight: 400; }
.manifesto p.small { margin: 0; max-width: 52ch; color: rgba(255,255,255,.72); }
.ping { background: var(--deep); color: #fff; border-top: 1px solid rgba(255,255,255,.12); }
.ping .wrap { padding-block: 120px; display: grid; justify-items: center; text-align: center; gap: 6px; position: relative; }
.ping .q { font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.6vw, 36px); }
.ping a { color: #fff; text-decoration: none; font-family: var(--wide); font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: clamp(56px, 11vw, 168px); line-height: .95; letter-spacing: -.035em; position: relative; padding: 0 .35em; }
.ping a::before, .ping a::after { content: ""; position: absolute; top: 50%; width: .9em; height: 1.5em; border: 2px solid rgba(255,255,255,.55); transform: translateY(-50%); transition: transform .4s ease; }
.ping a::before { left: -.5em; border-right: 0; border-radius: 999px 0 0 999px; }
.ping a::after { right: -.5em; border-left: 0; border-radius: 0 999px 999px 0; }
.ping a:hover::before { transform: translate(-.15em, -50%); } .ping a:hover::after { transform: translate(.15em, -50%); }
.ping a:hover { color: var(--soft); }
.ping .mail { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: rgba(255,255,255,.7); margin-top: 18px; }

/* Option AG: the Inflection Point replaces the portrait. The hero pins while the first scroll draws the line, locks the target on the turn and grows it, then dips and recovers the line for Turnaround. */
.ring-track { height: 230vh; position: relative; }
.ring-track .hero { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; background: #1d0d08; }
.hero .dk { display: none; }
.hero canvas.ring { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hero .hnav, .hero .hcenter, .hero .ticker { z-index: 1; }

/* Option AH: the M1 logo lockup as the hero, italic The over BRAND CONSULTING, flush left inside a centered block (as in Option M); no nav logo. */
@media (min-width: 760px) { .wordmark.m1hero { font-size: min(6.9vw, 12vh); } }
.m1hero { position: relative; display: inline-block; text-align: left; justify-self: center; }
.m1hero .the { position: absolute; left: .02em; bottom: 100%; margin-bottom: .04em; font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .56em; line-height: 1; }
.hcenter:has(.m1hero) { padding-top: 3vh; }

/* Option AJ: the logo and caption move to the top left, on the same left edge as the nav frame, so the line and target own the center and right. */
.hcenter { place-items: start; text-align: left; align-content: start; padding-top: clamp(110px, 15.5vh, 200px); }
.hcenter:has(.m1hero) { padding-top: clamp(110px, 15.5vh, 200px); }
.hcenter .wrap { max-width: 1700px; justify-items: start; gap: 18px; }
.m1hero { justify-self: start; }
@media (min-width: 760px) { .wordmark.m1hero { font-size: min(6.8vw, 12vh); } }
.capwrap { justify-items: start; }
.cap-line { text-align: left; opacity: .92 !important; font-size: clamp(16px, 1.55vw, 24px) !important; line-height: 1.45 !important; }

/* Option AO: Indigo + Ember. Hero colors sampled from her ChatGPT reference (panel 01): deep indigo base, cobalt bloom right of center,
   ember edge on the far left, an orange hot spot top right ringed with Ember crimson, rust and plum where the warm meets the navy. */
:root { --bg: #F6F5F9; --surface: #E8E9F5; --ink: #12142A; --muted: #5A5E7A; --brand: #1B2A5E; --brand-ink: #F6F5F9; --accent: #C9502F; --soft: #F1B434; --line: #DCDDEA; --deep: #0B1233; }
.ring-track .hero { background: #0A1438; }
.hero .accents { display: none; }
.hero .glow { filter: blur(40px); background:
  radial-gradient(26% 46% at 95% 22%, rgba(255,140,54,.82) 0%, rgba(248,125,44,.82) 28%, rgba(217,90,42,.8) 52%, transparent 86%),
  radial-gradient(40% 64% at 90% 26%, rgba(172,3,1,.42) 0%, rgba(150,40,40,.36) 45%, transparent 82%),
  radial-gradient(16% 26% at 96% 60%, #A93D2E 0%, #7A2832 50%, transparent 85%),
  radial-gradient(24% 42% at 80% 32%, rgba(94,30,49,.7) 0%, transparent 80%),
  radial-gradient(11% 15% at 45% 47%, rgba(122,140,232,.42) 0%, transparent 80%),
  radial-gradient(28% 40% at 45% 46%, #2A4C8A 0%, #133276 38%, #012361 64%, transparent 90%),
  radial-gradient(40% 40% at 10% 8%, #031131 0%, transparent 80%),
  linear-gradient(0deg, rgba(10,12,38,.8) 0%, transparent 26%); }
.manifesto p.big em { color: #9AA6F5; }

/* Option AR: AO's original Inflection Point animation (full target, crosshair, tangent, dip for Turnaround), with the logo ticker in the light strip below the hero and AP's softer hot spot. */
.ticker { background: var(--bg); }

/* Option AU: the logo strip is pinned to the bottom of the first screen, so it shows on landing; the hero fills the rest. */
.ring-track .stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; }
.ring-track .stage .hero { position: relative; height: auto; flex: 1 1 auto; min-height: 0; }
.ring-track .stage .ticker { flex: 0 0 auto; }
.ring-track .stage .track { padding-block: 22px; }

/* Option AV: the official full color logos from each brand's own site in the white strip. */
.ticker .track img { filter: none; opacity: 1; mix-blend-mode: normal; width: auto; }
.ticker .track { gap: 72px; }

/* Option AW: nav sits a little lower so it is not so close to the top edge. */
.hnav .wrap { padding-block: 40px 22px; }

/* Phones and small tablets: menu button, full screen menu, headline and caption sized to fit. */
.menu-btn { display: none; }
.menu-btn, .mm-close { align-items: center; min-height: 44px; padding: 10px 18px; font: 600 13px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.45); border-radius: 999px; cursor: pointer; }
.menu-btn:focus-visible, .mm-close:focus-visible, .mobile-menu nav a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mobile-menu { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; color: #fff;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(28px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  background: radial-gradient(70% 45% at 100% 0%, rgba(240,117,49,.38), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(42,76,138,.5), transparent 75%), #0B1233; overflow-y: auto; }
.mobile-menu[hidden] { display: none; }
.mm-top { display: flex; justify-content: space-between; align-items: center; min-height: 64px; }
.mm-brand { font-family: var(--wide); font-weight: 900; font-stretch: 108%; text-transform: uppercase; font-size: 15px; letter-spacing: -.01em; }
.mm-brand i { font-family: var(--serif); font-weight: 400; text-transform: none; font-size: 16px; }
.mm-close { display: inline-flex; }
.mobile-menu nav { display: flex; flex-direction: column; margin-top: 7vh; }
.mobile-menu nav a { font-family: var(--wide); font-weight: 900; font-stretch: 108%; text-transform: uppercase; font-size: clamp(30px, 9.5vw, 46px); line-height: 1.05; letter-spacing: -.02em; color: #fff; text-decoration: none; padding-block: 18px; border-bottom: 1px solid rgba(255,255,255,.16); }
@media (max-width: 819px) {
  .hnav .contact { display: none; }
  .menu-btn { display: inline-flex; }
  .hnav .wrap { padding-block: 20px 10px; }
}
@media (max-width: 759px) {
  .wordmark.m1hero { font-size: 10.4vw; }
  .hcenter .wrap { width: 100%; }
  .capwrap, .cap-line { max-width: 100%; }
  .cap-line { font-size: 15px !important; }
  .cap-line span { white-space: normal; }
}

/* Slim bar that slides in once the visitor is past the hero, so navigation is always reachable. */
.minibar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; color: #fff; background: rgba(11,18,51,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding-top: env(safe-area-inset-top, 0px); transform: translateY(-100%); visibility: hidden; transition: transform .28s ease, visibility 0s linear .28s; }
.minibar.is-on { transform: none; visibility: visible; transition: transform .28s ease, visibility 0s; }
.minibar .wrap { max-width: 1700px; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 60px; }
.mb-brand { color: #fff; text-decoration: none; font-family: var(--wide); font-weight: 900; font-stretch: 108%; text-transform: uppercase; font-size: 15px; letter-spacing: -.01em; }
.mb-brand i { font-family: var(--serif); font-weight: 400; text-transform: none; font-size: 16px; }
.mb-links { display: flex; gap: 32px; }
.mb-links a { color: #fff; text-decoration: none; font-size: 15px; padding-block: 10px; }
.mb-links a:hover { color: #F1B434; }
.mb-brand:focus-visible, .mb-links a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 819px) { .mb-links { display: none; } }
@media (prefers-reduced-motion: reduce) { .minibar, .minibar.is-on { transition: none; } }
/* Leave room for the slim bar when jumping to a section. */
section[id] { scroll-margin-top: 70px; }

/* Phones: let the caption flow as one sentence instead of forcing a break after "Consumer Brands". */
@media (max-width: 759px) { .cap-line span { display: inline; } }

/* Nothing may push the page wider than the screen (Safari lets decorative overflow scroll sideways).
   clip, unlike hidden, keeps the pinned hero working. */
html, body { overflow-x: clip; }
.ping { overflow: hidden; }
/* Phones: the Let's Talk link wraps to two lines, so size its box to the words and the brackets hug them. */
@media (max-width: 759px) { .ping a { width: min-content; } }

/* The hero animation plays on its own, so the hero no longer holds the page: it is the first screen and scrolling is normal. */
.ring-track { height: auto; }
.ring-track .stage { position: relative; }
/* Phones: the screen is tall and narrow, so the glow is re-proportioned (wider shares of the width,
   smaller shares of the height) to keep the ember hot spot round instead of a thin strip down the edge. */
@media (max-width: 759px) {
  .hero .glow { background:
    radial-gradient(80% 52% at 100% 16%, rgba(255,140,54,.86) 0%, rgba(242,112,44,.8) 24%, rgba(200,72,42,.62) 50%, transparent 86%),
    radial-gradient(72% 36% at 100% 46%, rgba(176,60,44,.72) 0%, rgba(126,40,50,.5) 48%, transparent 86%),
    radial-gradient(105% 50% at 94% 30%, rgba(172,3,1,.32) 0%, transparent 82%),
    radial-gradient(56% 24% at 80% 36%, rgba(94,30,49,.55) 0%, transparent 82%),
    radial-gradient(26% 9% at 40% 52%, rgba(122,140,232,.42) 0%, transparent 80%),
    radial-gradient(62% 24% at 40% 52%, #2A4C8A 0%, #133276 38%, #012361 64%, transparent 90%),
    radial-gradient(80% 20% at 10% 6%, #031131 0%, transparent 80%),
    linear-gradient(0deg, rgba(10,12,38,.8) 0%, transparent 26%); }
}

/* ---------- Phase 2: shared pieces for every page ---------- */
/* Menu button: bigger and bolder so it reads at a glance on phones. */
.menu-btn, .mm-close { min-height: 48px; padding: 12px 22px; font: 800 15px var(--sans); letter-spacing: .14em; background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.85); }
.menu-btn:hover, .mm-close:hover { background: rgba(255,255,255,.24); }
.mm-brand { color: #fff; text-decoration: none; }
.mobile-menu nav a[aria-current="page"], .mb-links a[aria-current="page"] { color: #F1B434; }
.hnav nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1.5px; }

/* Small wordmark in the top nav of interior pages and the footer. */
.site-logo { margin-right: auto; color: #fff; text-decoration: none; font-family: var(--wide); font-weight: 900; font-stretch: 108%; text-transform: uppercase; font-size: 17px; line-height: .98; letter-spacing: -.01em; }
.site-logo i { font-family: var(--serif); font-weight: 400; text-transform: none; font-size: 18px; }
.site-logo.dark { color: var(--ink); }

/* Interior page header: the same indigo and ember world as the homepage, shorter. */
.page-hero { position: relative; overflow: hidden; color: #fff; isolation: isolate;
  background: radial-gradient(60% 90% at 100% 0%, rgba(255,140,54,.78) 0%, rgba(214,88,44,.55) 30%, rgba(126,40,50,.3) 58%, transparent 80%),
              radial-gradient(70% 110% at 18% 100%, #2A4C8A 0%, #133276 40%, transparent 80%), #0A1438; }
.page-hero .ph-body { display: grid; gap: 18px; padding-block: 56px 88px; }
.ph-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.ph-title { margin: 0; font-family: var(--wide); font-weight: 900; font-stretch: 108%; text-transform: uppercase; font-size: clamp(42px, 8vw, 112px); line-height: .94; letter-spacing: -.025em; max-width: 14ch; text-wrap: balance; }
.ph-sub { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.3; max-width: 36ch; color: rgba(255,255,255,.9); }
@media (max-width: 759px) {
  .page-hero { background: radial-gradient(110% 60% at 100% 0%, rgba(255,140,54,.8) 0%, rgba(214,88,44,.55) 32%, rgba(126,40,50,.3) 60%, transparent 85%),
                           radial-gradient(120% 70% at 10% 100%, #2A4C8A 0%, #133276 40%, transparent 85%), #0A1438; }
  .page-hero .ph-body { padding-block: 28px 64px; }
  .page-hero .hnav .wrap { padding-block: 20px 12px; }
}

/* Text links that lead to the next page. */
.text-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 40px; color: var(--brand); font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 4px; }
.text-link::after { content: "\2192"; }
.text-link.light { color: #fff; margin-top: 0; }
.text-link:hover { color: var(--accent); }
.text-link.light:hover { color: #F1B434; }

/* Where I step in (home) */
.moment-rows { display: grid; border-top: 1px solid var(--line); }
.moment-row { display: grid; gap: 8px 40px; padding-block: 30px; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .moment-row { grid-template-columns: 240px 1fr 1fr; align-items: baseline; } }
.moment-row h3, .moment h2 { margin: 0; font-family: var(--wide); font-weight: 900; font-stretch: 108%; text-transform: uppercase; letter-spacing: -.015em; color: var(--brand); }
.moment-row h3 { font-size: clamp(28px, 3vw, 38px); }
.mr-line { margin: 0; font-family: var(--serif); font-size: clamp(20px, 1.8vw, 24px); line-height: 1.3; color: var(--ink); }
.mr-proof { margin: 0; color: var(--muted); }
.mr-proof b, .moment b { color: var(--ink); font-weight: 700; }

/* Two ways to work */
.ways { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 820px) { .ways { grid-template-columns: 1fr 1fr; } }
.way { background: var(--bg); padding: 34px 30px; display: grid; gap: 12px; align-content: start; }
.way h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 34px; color: var(--brand); }
.way p { margin: 0; color: var(--muted); max-width: 46ch; }

/* Track record preview (home) */
.tr-preview { background: var(--surface); }
.role-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 640px) { .role-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .role-strip { grid-template-columns: repeat(4, 1fr); } }
.role-strip li { background: var(--bg); padding: 22px 22px 24px; display: grid; gap: 4px; }
.role-strip b { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--ink); }
.role-strip span { font-size: 14px; color: var(--muted); }

/* About */
.about-grid { display: grid; gap: 44px; align-items: start; }
@media (min-width: 900px) { .about-grid { grid-template-columns: minmax(280px, 5fr) 7fr; gap: 72px; } }
.about-photo { width: 100%; height: auto; max-width: 520px; display: block; }
.about-copy { display: grid; gap: 20px; font-size: 18px; line-height: 1.6; max-width: 60ch; }
.about-copy p { margin: 0; }
.about-copy .lead { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.28; color: var(--brand); }
.band-lead { margin: 0; font-family: var(--serif); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.3; max-width: 34ch; }
.principles { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 820px) { .principles { grid-template-columns: 1fr 1fr; } }
.principle { background: var(--bg); padding: 30px 28px; display: grid; gap: 10px; align-content: start; }
.principle h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 28px; color: var(--brand); }
.principle p { margin: 0; color: var(--muted); }

/* How I Work */
.moments { display: grid; }
.moment { display: grid; gap: 18px; padding-block: 44px; border-top: 1px solid var(--line); }
.moment:first-child { border-top: 0; padding-top: 0; }
.moment h2 { font-size: clamp(40px, 6vw, 84px); line-height: .95; }
.m-line { margin: 0; font-family: var(--serif); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.28; max-width: 34ch; }
.m-cols { display: grid; gap: 28px; margin-top: 8px; }
@media (min-width: 820px) { .m-cols { grid-template-columns: 1fr 1fr; gap: 56px; } }
.m-label { display: block; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.m-cols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.m-cols li { padding-left: 22px; position: relative; }
.m-cols li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 1.5px; background: var(--accent); }
.m-cols p { margin: 0; color: var(--muted); }

/* Track Record */
.roles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.role { display: grid; gap: 8px 48px; padding-block: 28px; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .role { grid-template-columns: 340px 1fr; } }
.r-head { display: grid; gap: 4px; }
.r-head b { font-family: var(--serif); font-weight: 500; font-size: 28px; color: var(--ink); }
.r-head span { font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.role p { margin: 0; color: var(--muted); max-width: 62ch; }
.stories-sec { background: var(--surface); }
.stories { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 900px) { .stories { grid-template-columns: 1fr 1fr; } }
.story { background: var(--bg); padding: 36px 30px; display: grid; gap: 14px; align-content: start; }
.story h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 32px; color: var(--brand); }
.story p { margin: 0; color: var(--muted); }

/* Contact */
.contact-grid { display: grid; gap: 56px; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 7fr 4fr; gap: 80px; } }
.contact-form { display: grid; gap: 22px; max-width: 640px; }
.f-row { display: grid; gap: 8px; }
.f-row label { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.f-row input, .f-row select, .f-row textarea { font: 400 17px var(--sans); color: var(--ink); background: #fff; border: 1px solid #c9cbdc; border-radius: 6px; padding: 14px 16px; width: 100%; min-height: 50px; box-sizing: border-box; }
.f-row textarea { resize: vertical; }
.f-row input:focus, .f-row select:focus, .f-row textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.f-note { margin: 0; font-size: 14px; color: var(--muted); }
.f-note a { color: var(--brand); }
.contact-form .btn { border: 0; font: 800 15px var(--sans); letter-spacing: .14em; cursor: pointer; min-height: 52px; padding: 16px 40px; }
.contact-form .btn:hover { background: var(--accent); }
.hp { position: absolute; left: -9999px; }
.contact-direct { display: grid; gap: 18px; align-content: start; }
.contact-direct p { margin: 0; display: grid; gap: 2px; }
.cd-k { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cd-v { font-family: var(--serif); font-size: 22px; color: var(--ink); overflow-wrap: anywhere; }
a.cd-v { color: var(--brand); }

/* Privacy */
.legal > * { max-width: 760px; }
.legal h2 { font-size: clamp(26px, 3vw, 34px); margin: 40px 0 12px; }
.legal p, .legal li { color: var(--ink); line-height: 1.65; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 8px; }

/* Footer */
.site-footer { background: var(--bg); border-top: 1px solid var(--line); }
.site-footer .wrap { display: grid; gap: 28px; padding-block: 48px 36px; font-size: 14px; color: var(--muted); }
@media (min-width: 900px) { .site-footer .wrap { grid-template-columns: 1.2fr 1.4fr 1fr; align-items: start; } }
.sf-brand { display: grid; gap: 10px; }
.sf-links { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.sf-links a, .sf-contact a { color: var(--ink); text-decoration: none; padding-block: 4px; }
.sf-links a:hover, .sf-contact a:hover { color: var(--accent); }
.sf-contact { display: grid; gap: 6px; }
.sf-copy { margin: 0; grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 20px; font-size: 13px; }
.page-hero .hnav .wrap { max-width: 1240px; }
@media (max-width: 639px) { .role-strip { grid-template-columns: 1fr 1fr; } .role-strip li { padding: 16px 14px 18px; } .role-strip b { font-size: 18px; } .role-strip span { font-size: 13px; } }

/* ---------- Homepage: Where we step in, If, then (Option BA, version B) ---------- */
.if-then { background: var(--bg); }
.if-then > .wrap { padding-block: 96px 100px; }
.eyebrow { display: block; font-size: 13px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.b-rows { border-top: 1px solid var(--line); }
.b-row { display: grid; gap: 14px; padding-block: 30px; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .b-row { grid-template-columns: minmax(0, 1.2fr) 150px minmax(0, 1fr); gap: 40px; align-items: center; padding-block: 38px; } }
.b-when { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.18; color: var(--brand); }
.b-tag { justify-self: start; font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; padding: 9px 16px; border-radius: 999px; }
.b-launch { background: var(--peri); color: var(--navy); }
.b-scale { background: var(--hunter); color: #fff; }
.b-reset { background: var(--rose); color: var(--navy); }
.b-row ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.b-row li { position: relative; padding-left: 22px; line-height: 1.45; color: var(--ink); }
.b-row li::before { content: ""; position: absolute; left: 0; top: .7em; width: 11px; height: 2px; background: var(--peri); }
.if-then .text-link { margin-top: 48px; }

/* ---------- Final brand palette, locked 2026-10-22 ----------
   Midnight Navy #0A1438 (PMS 2768 C), Periwinkle #7A8CE8 (2716 C), Dusty Rose #D4A5A5 (7612 C),
   Mustard #F1B434 (7409 C), Hunter #286140 (7734 C), with Mist and Ink underneath. No orange, no red. */
:root { --navy: #0A1438; --peri: #7A8CE8; --rose: #D4A5A5; --mustard: #F1B434; --hunter: #286140;
  --brand: #0A1438; --deep: #0A1438; --accent: #286140; --soft: #F1B434; }
.manifesto p.big em { color: var(--peri); }
/* Hero: plain navy, so the animation reads cleanly, with only a periwinkle glow in the top right (Option BB, 2026-10-22). */
.hero .glow { filter: blur(40px); background:
  radial-gradient(34% 56% at 90% 26%, rgba(172,184,248,1) 0%, rgba(122,140,232,.8) 38%, rgba(122,140,232,.28) 62%, transparent 86%),
  radial-gradient(40% 40% at 10% 8%, #050B26 0%, transparent 80%),
  linear-gradient(0deg, rgba(6,10,32,.8) 0%, transparent 26%); }
@media (max-width: 759px) {
  .hero .glow { background:
    radial-gradient(86% 44% at 100% 22%, rgba(172,184,248,1) 0%, rgba(122,140,232,.75) 40%, rgba(122,140,232,.25) 64%, transparent 88%),
    radial-gradient(80% 20% at 10% 6%, #050B26 0%, transparent 80%),
    linear-gradient(0deg, rgba(6,10,32,.8) 0%, transparent 26%); }
}
.mobile-menu { background: radial-gradient(70% 45% at 100% 0%, rgba(212,165,165,.42), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(122,140,232,.32), transparent 75%), #0A1438; }
.minibar { background: rgba(10,20,56,.94); }
.page-hero { background: radial-gradient(55% 90% at 100% 0%, rgba(212,165,165,.85) 0%, rgba(212,165,165,.4) 34%, rgba(170,120,150,.2) 58%, transparent 80%),
                         radial-gradient(14% 30% at 96% 6%, rgba(241,180,52,.5) 0%, transparent 80%),
                         radial-gradient(70% 110% at 18% 100%, #3A55B8 0%, #1C2E7A 40%, transparent 80%), #0A1438; }
@media (max-width: 759px) {
  .page-hero { background: radial-gradient(110% 60% at 100% 0%, rgba(212,165,165,.85) 0%, rgba(212,165,165,.4) 36%, transparent 82%),
                           radial-gradient(120% 70% at 10% 100%, #3A55B8 0%, #1C2E7A 40%, transparent 85%), #0A1438; }
}
/* Bands (Who we work with on About) in navy; Hunter is never used as a band. */
.band { background: var(--navy); }
.mobile-menu nav a[aria-current="page"], .mb-links a[aria-current="page"], .mb-links a:hover, .text-link.light:hover { color: var(--mustard); }
.text-link:hover, .sf-links a:hover, .sf-contact a:hover { color: var(--hunter); }
.contact-form .btn:hover { background: var(--hunter); }
.m-cols li::before { background: var(--peri); }
/* Phones: page titles shrink to fit their longest word ("TRANSFORMED." is the widest), so nothing runs off the screen. */
@media (max-width: 759px) { .ph-title { font-size: min(42px, calc((100vw - 32px) / 9.4)); max-width: none; } }

/* Where we step in, Dialogue layout (Option BC, version B, 2026-10-23): You say, then We do. */
.dl { display: grid; border-top: 1px solid var(--line); }
.dl-row { display: grid; gap: 16px; padding-block: 34px; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .dl-row { grid-template-columns: 150px minmax(0, 1.15fr) minmax(0, 1fr); gap: 44px; align-items: start; } .dl-row .b-tag { margin-top: 26px; } }
.dl-k { display: block; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.dl-you p { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.5vw, 34px); line-height: 1.2; color: var(--brand); }
.dl-we p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink); }
.dl-we .dl-k { color: var(--hunter); }
.dl-talk { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--hunter); font-weight: 800; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 3px; }
.dl-talk::after { content: "\2192"; }
.dl-talk:hover { color: var(--brand); }

/* Homepage: Who we work with, with the two ways to work together beside it (Option BD, layout A, 2026-10-23). */
.who { background: var(--surface); }
.who > .wrap { padding-block: 96px 104px; }
.who-grid { display: grid; gap: 48px; }
@media (min-width: 900px) { .who-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; } .who-ways { padding-top: 12px; } }
.who-grid h2 { margin-bottom: 30px; }
.who-list { list-style: none; margin: 0; padding: 0; display: grid; }
.who-list li { display: grid; gap: 4px; padding-block: 18px; border-top: 1px solid var(--line); }
.who-list li:last-child { border-bottom: 1px solid var(--line); }
.who-list b { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--brand); }
.who-list span { color: var(--muted); }
.who-k { display: block; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--hunter); margin-bottom: 18px; }
.a-ways { display: grid; gap: 14px; }
.a-way { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px 26px 24px; display: grid; gap: 10px; }
.a-way h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 28px; color: var(--brand); }
.a-way p { margin: 0; color: var(--ink); line-height: 1.55; }

/* ---------- Live site glows (2026-10-23): Mustard and Periwinkle on navy. ----------
   Crimson and Plum were removed from the palette and the site on 2026-10-23 (her call). No secondary colors now.
   Glows only, never as text on light or as flat bands. */
/* Hero: periwinkle on the right, plain navy everywhere else for the animation. No mustard glow (her call, 2026-10-23). */
.hero .glow { filter: blur(44px); background:
  radial-gradient(34% 56% at 90% 26%, rgba(172,184,248,.9) 0%, rgba(122,140,232,.6) 34%, rgba(122,140,232,.25) 58%, transparent 86%); }
@media (max-width: 759px) {
  .hero .glow { background:
    radial-gradient(86% 40% at 100% 20%, rgba(172,184,248,.9) 0%, rgba(122,140,232,.6) 36%, rgba(122,140,232,.2) 60%, transparent 88%); }
}
/* Inside page headers: periwinkle on the right, plain navy elsewhere. No mustard glow (her call, 2026-10-23). */
.page-hero { background:
  radial-gradient(50% 100% at 100% 10%, rgba(122,140,232,.7) 0%, rgba(122,140,232,.25) 40%, transparent 80%), #0A1438; }
@media (max-width: 759px) {
  .page-hero { background: radial-gradient(110% 60% at 100% 0%, rgba(122,140,232,.7) 0%, rgba(122,140,232,.2) 40%, transparent 85%), #0A1438; }
}
.mobile-menu { background: radial-gradient(70% 45% at 100% 0%, rgba(122,140,232,.45), transparent 72%), #0A1438; }
/* The statement: a soft periwinkle glow low on the right, so the navy has depth. */
.manifesto { background: radial-gradient(40% 80% at 100% 100%, rgba(122,140,232,.3) 0%, transparent 75%), var(--deep); }
/* Let's Talk: periwinkle from the right corner. No mustard glow (her call, 2026-10-23). */
.ping { background: radial-gradient(40% 90% at 100% 100%, rgba(122,140,232,.4) 0%, transparent 75%), var(--deep); }
.ping a:hover { color: var(--peri); }
/* About: the bio photo frame, mustard along the bottom and periwinkle on the right. */
.about-grid { position: relative; isolation: isolate; }
.about-photo { box-sizing: border-box; padding: clamp(18px, 2.4vw, 30px); border-radius: 20px;
  background: radial-gradient(70% 40% at 40% 100%, rgba(241,180,52,.8) 0%, rgba(241,180,52,.3) 45%, transparent 80%), radial-gradient(60% 80% at 100% 25%, rgba(122,140,232,.75) 0%, rgba(122,140,232,.3) 45%, transparent 80%), #0A1438; }
/* Who we work with on About: a periwinkle glow at the edge of the navy band. */
.band { background: radial-gradient(45% 120% at 100% 50%, rgba(122,140,232,.35) 0%, transparent 75%), var(--navy); }
/* Homepage Who we work with: a mustard rule and a periwinkle rule above the two ways. */
.who-k { color: var(--hunter); }
.who-ways .a-ways { position: relative; }
.who-ways .a-way:first-child { border-top: 4px solid var(--mustard); }
.who-ways .a-way:last-child { border-top: 4px solid var(--peri); }
/* Small accents */
.dl-we .dl-k { color: var(--hunter); }
/* Type stays periwinkle: the statement italics and Let's Talk (her call, 2026-10-23); mustard lives in the glows. */
.manifesto p.big em { color: var(--peri); }
.mobile-menu nav a[aria-current="page"] { color: var(--mustard); }
.manifesto .text-link.light:hover { color: var(--peri); }

/* ---------- Homepage refresh from her ChatGPT direction (2026-10-24) ---------- */
/* The statement: left aligned, a serif headline, the three moments in periwinkle italic, then the P&L line and a short intro. */
.manifesto .wrap { justify-items: start; text-align: left; gap: 0; padding-block: clamp(80px, 11vw, 140px); }
.st-h { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.6vw, 66px); line-height: 1.08; letter-spacing: -.01em; max-width: 22ch; color: #fff; }
.st-m { margin: 14px 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.1; color: var(--peri); }
.st-p { margin: 8px 0 0; font-family: var(--sans); font-weight: 500; font-size: clamp(22px, 2.5vw, 36px); line-height: 1.2; letter-spacing: -.01em; color: #fff; }
.st-small { margin: clamp(36px, 4.5vw, 60px) 0 0; max-width: 58ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.65; color: rgba(255,255,255,.72); }
.manifesto .text-link.light { margin-top: 36px; }
/* What's keeping your business: the client's words fit on two lines, and one Talk to us at the end. */
.dl-you p { font-size: clamp(20px, 1.85vw, 26px); line-height: 1.25; }
@media (min-width: 900px) { .dl-row { grid-template-columns: 150px minmax(0, 1.3fr) minmax(0, 1fr); } }
.dl-end { display: flex; justify-content: flex-end; margin-top: 36px; }
.dl-end .dl-talk { margin-top: 0; }
/* Who we work with: three columns, a rule, then the two ways to work together, each under a short colored line. */
.who > .wrap { padding-block: clamp(72px, 9vw, 110px); }
.who h2 { margin: 0 0 34px; font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -.01em; color: var(--navy); }
.w-cols { display: grid; gap: 28px; }
.w-cols h3 { margin: 0 0 8px; font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 1.7vw, 24px); color: var(--navy); }
.w-cols h3.big { font-size: clamp(26px, 2.4vw, 34px); font-weight: 400; margin-top: 18px; }
.w-cols p { margin: 0; max-width: 30ch; color: var(--muted); font-size: 17px; line-height: 1.5; }
@media (min-width: 860px) {
  .w-cols.three { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .w-cols.two { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .w-cols .wc + .wc { border-left: 1px solid var(--line); padding-left: clamp(28px, 3vw, 44px); }
  .w-cols .wc { padding-right: clamp(20px, 2vw, 32px); }
}
.w-rule { border: 0; border-top: 1px solid var(--line); margin: clamp(44px, 5vw, 64px) 0; }
.wc-line { display: block; width: 72px; height: 3px; }
.wc-line.rose { background: var(--rose); }
.wc-line.peri { background: var(--peri); }
/* Let's Talk: left aligned, the hero's wordmark size, the same navy as the statement, and shorter. */
.talk-band { background: radial-gradient(40% 80% at 100% 100%, rgba(122,140,232,.3) 0%, transparent 75%), var(--deep); color: #fff; }
.talk-band .wrap { display: grid; justify-items: start; padding-block: clamp(64px, 8vw, 104px); }
.lt-q { margin: 0; font-family: var(--serif); font-size: clamp(24px, 2.4vw, 36px); line-height: 1.18; }
.lt-big { margin: clamp(18px, 2vw, 28px) 0 clamp(24px, 2.6vw, 36px); font-family: var(--wide); font-stretch: 108%; font-weight: 900; text-transform: uppercase; font-size: 10.4vw; line-height: .9; letter-spacing: -.04em; }
@media (min-width: 760px) { .lt-big { font-size: min(6.8vw, 12vh); } }
.lt-btn { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 600; font-size: 17px; padding: 14px 26px; border: 1.5px solid rgba(255,255,255,.85); border-radius: 999px; }
.lt-btn::after { content: "\2192"; }
.lt-btn:hover { background: #fff; color: var(--navy); }
/* Let's Talk is the form itself on the homepage and About (2026-10-24): first and last name side by side, light type on the navy. */
.f-pair { display: grid; gap: 22px; }
@media (min-width: 560px) { .f-pair { grid-template-columns: 1fr 1fr; gap: 16px; } }
.talk-band .lt-big { margin: 0 0 clamp(14px, 1.6vw, 22px); }
.talk-band .lt-q { max-width: 46ch; margin: 0 0 clamp(36px, 4vw, 52px); font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; color: rgba(255,255,255,.85); }
.talk-band .contact-grid { width: 100%; }
.talk-band .f-row label { color: #fff; }
.talk-band .f-row input, .talk-band .f-row select, .talk-band .f-row textarea { border-color: transparent; }
.talk-band .f-row input:focus, .talk-band .f-row select:focus, .talk-band .f-row textarea:focus { outline-color: var(--peri); border-color: var(--peri); }
.talk-band .f-note { color: rgba(255,255,255,.7); }
.talk-band .f-note a { color: #fff; }
.talk-band .contact-form .btn { background: #fff; color: var(--navy); border-radius: 999px; }
.talk-band .contact-form .btn:hover { background: var(--peri); color: var(--navy); }
.talk-band .m-label { color: var(--peri); }
.talk-band .cd-k { color: rgba(255,255,255,.6); }
.talk-band .cd-v, .talk-band a.cd-v { color: #fff; }

/* ---------- Who we work with and how (Option A3, her pick 2026-10-24) ----------
   Light periwinkle. The audience in periwinkle italic like the statement, then Hourly, Project and Embedded as stops on the hero's target line. */
.hw { background: var(--surface); }
.hw .wrap { padding-block: clamp(72px, 9vw, 112px); }
.hw h2 { margin: 0; max-width: 26ch; font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -.01em; color: var(--navy); }
.hw-aud { margin: 12px 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.1; color: var(--peri); }
.hw-sub { margin: 10px 0 clamp(44px, 5vw, 64px); font-family: var(--sans); font-weight: 500; font-size: clamp(20px, 2vw, 28px); line-height: 1.3; color: var(--navy); }
.hw-cols { position: relative; display: grid; gap: 40px; }
@media (min-width: 860px) { .hw-cols { grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.4vw, 56px); } }
.hw .tg { display: block; position: relative; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(10,20,56,.45); background: var(--surface); z-index: 1; }
.hw .tg::before, .hw .tg::after { content: ""; position: absolute; background: rgba(10,20,56,.45); }
.hw .tg::before { left: 50%; top: -8px; bottom: -8px; width: 1px; }
.hw .tg::after { top: 50%; left: -8px; right: -8px; height: 1px; }
.hw .tg i { display: block; position: absolute; inset: 15px; border-radius: 50%; background: var(--navy); z-index: 1; }
.hw .stop:last-child .tg { border-color: var(--peri); box-shadow: 0 0 0 8px rgba(122,140,232,.18), 0 0 34px rgba(122,140,232,.55); }
.hw .stop:last-child .tg i { background: var(--peri); }
.hw .lab { margin: 22px 0 12px; font-family: var(--wide); font-stretch: 108%; font-weight: 900; text-transform: uppercase; font-size: clamp(22px, 2vw, 30px); letter-spacing: -.02em; color: var(--navy); }
.hw .sit { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.3; color: var(--navy); }
.hw .for { margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: var(--muted); }
.hw .go { display: inline-flex; gap: 8px; margin-top: clamp(36px, 4vw, 52px); color: var(--hunter); font-weight: 800; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 4px; }
.hw .go::after { content: "\2192"; }
@media (min-width: 860px) {
  .hw-cols::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 2px; background: linear-gradient(90deg, rgba(10,20,56,.25), rgba(10,20,56,.55) 70%, var(--peri)); }
}
@media (max-width: 859px) {
  .hw .stop { position: relative; padding-left: 70px; }
  .hw .tg { position: absolute; left: 0; top: 0; }
  .hw .lab { margin-top: 8px; }
  .hw-cols::before { content: ""; position: absolute; left: 23px; top: 0; bottom: 0; width: 2px; background: rgba(10,20,56,.3); }
}
.hw .how { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(10,20,56,.14); font-size: 16px; line-height: 1.55; color: var(--ink); }
.hw .how b { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--hunter); }
/* Let's Talk heading at section size, in the serif like the other section headings (her call, 2026-10-24: the wordmark size was too big). */
.talk-band .lt-big { font-family: var(--serif); font-stretch: normal; font-weight: 400; text-transform: none; letter-spacing: -.01em; line-height: 1.05; font-size: clamp(36px, 4.4vw, 60px); margin: 0 0 14px; }

/* ---------- Homepage polish (her notes, 2026-10-25) ---------- */
/* The italic phrases were getting lost: semibold and a touch larger. */
.st-m { font-weight: 600; font-size: clamp(32px, 3.9vw, 56px); }
.hw-aud { font-weight: 600; font-size: clamp(30px, 3.5vw, 50px); }
/* What's keeping your business: less white space, quicker to scroll. */
.if-then > .wrap { padding-block: clamp(56px, 6vw, 72px) clamp(56px, 6vw, 76px); }
.if-then .sec-head { margin-bottom: 26px; }
.dl-row { padding-block: 20px; gap: 10px; }
@media (min-width: 900px) { .dl-row { gap: 40px; } .dl-row .b-tag { margin-top: 20px; } }
.dl-k { margin-bottom: 6px; }
.dl-end { margin-top: 22px; }
/* Logo ticker: light periwinkle so it reads as part of the site, not an ad strip; a bit faster; Red Bull in full view first. */
.ticker { background: #DCDEF0; border-bottom: 0; padding-left: max(24px, 4vw); }  /* a shade deeper than the light periwinkle so it reads the same next to the navy (her call, 2026-10-25) */
.track { animation-duration: 26s; animation-delay: 1.2s; }

/* ---------- Who + How (her ChatGPT version, 2026-10-25): You get, billing and a Let's talk under each column, thin dividers between them. ---------- */
.hw-sub { font-weight: 400; color: var(--muted); max-width: 46ch; }
.hw .stop { display: flex; flex-direction: column; }
.hw .get { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid rgba(10,20,56,.14); font-size: 16px; line-height: 1.5; color: var(--ink); }
.hw .get b { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--hunter); }
.hw .bill { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(10,20,56,.14); font-size: 16px; line-height: 1.5; color: var(--muted); }
.hw .stop .go { align-self: flex-start; margin-top: auto; padding-top: 28px; text-transform: none; letter-spacing: 0; font-size: 16px; font-weight: 700; border-bottom: 0; text-decoration: underline; text-underline-offset: 6px; }
.hw .stop .go { padding-bottom: 0; }
@media (min-width: 860px) { .hw .stop + .stop { border-left: 1px solid rgba(10,20,56,.12); padding-left: clamp(20px, 2.4vw, 36px); } .hw .stop + .stop .tg { margin-left: 0; } }
/* One Let's talk for the whole Who + How section, lower right like Talk to us above it (her call, 2026-10-25). */
.hw-end { display: flex; justify-content: flex-end; margin-top: clamp(32px, 4vw, 48px); }
.hw-end .go { margin-top: 0; }
/* Section labels (her call, 2026-10-25): the same small green label as "About" on the About page, now on Who + How and Contact. On the navy Contact band it's periwinkle, since hunter disappears on navy. */
.kick { display: block; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--hunter); margin-bottom: 14px; }
.talk-band .kick { color: var(--peri); }
/* Phone and email links (2026-10-25): phones auto link numbers in their own blue, which disappeared on navy; these are real links in the site's colors. */
a.cd-v { text-decoration: none; }
.talk-band a.cd-v, .talk-band a[href^="tel"], .talk-band a[x-apple-data-detectors] { color: #fff !important; text-decoration: none; }
a[href^="tel"] { color: inherit; text-decoration: none; }

/* Nav links read as links (her pick 2026-10-25, option A): all three underlined in periwinkle, white on hover, current page underlined in white. */
.hnav nav a, .hnav a.contact, .mb-links a { text-decoration: underline; text-decoration-color: var(--peri); text-decoration-thickness: 2px; text-underline-offset: 9px; font-weight: 600; transition: text-decoration-color .2s ease; }
.hnav nav a:hover, .hnav a.contact:hover, .mb-links a:hover { color: #fff; text-decoration-color: #fff; }
.hnav nav a[aria-current="page"], .hnav a.contact[aria-current="page"], .mb-links a[aria-current="page"] { color: #fff; text-decoration-color: #fff; text-decoration-thickness: 2px; text-underline-offset: 9px; }
.mb-links a { text-underline-offset: 7px; }