/* v47CGT: align the mobile picture wrapper, raise caption 10px, and protect the header before text overlap. */
/* v44-CLD. Palette: --blue #007bff to #0063da and --muted #65739f to #5b6892 so text in both tokens passes 4.5:1 on white and paper (approved by Daniel); hover deepens to #0052bd. How we partner on phones: tab strip pinned under the nav while the section is in view, closed rows show the title only, an opened row scrolls to sit beneath the tabs (Option C).
   v44-CLD. v43-CLD plus: hero field deepened one step (#006ce4) so white small text on it passes 4.5:1; phones get a tighter hero (face in the first viewport), a single Let's talk button in place of the three nav links, a scrolling brand strip with a pause control, and a two-column footer.
   v43-CLD. v42-CLD plus: self-hosted WOFF2 font, responsive hero image, shorter entrance timing, no other visual change.
   v42-CLD. v41-CLD plus: the bar button replaces the Contact link in the nav (one shared slot) instead of sitting beside it, and a small "Multifamily marketing consulting" eyebrow above the hero headline.
   v41-CLD. v40-CLD plus: process steps on a timeline (line and dots), the About photo contained inside the page margins, and a nav CTA slot that is reserved on the hero so the links never move.
   v40-CLD: v39-CLD plus the quieter About block (panel photo, facts beside the bio) and the Spotlight testimonial slider.
   v39-CLD: v38-CLD plus the v33 motion (hero load sequence, nav that settles as you scroll with a page progress line, animated tabs, panel swap, accordion open transition), service summaries under each service title, the v33 footer arrangement on the navy field, and the retouched portrait.
   Built on the v37-CLD simplification pass (Tier 1 remove, Tier 2 unify) on the approved v36 direction.
   Six color tokens, one typeface, a seven-step type scale, and a four-surface page rhythm:
   blue (hero), white / paper alternating, navy (contact and footer). */
@font-face { font-family: Outfit; src: url('assets/fonts/outfit-9ec88942.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }
:root {
  --navy: #07146a; --blue: #0063da; --ice: #e8f1fd; --paper: #f6f5f3; --white: #fff; --muted: #5b6892; --blue-hover: #0052bd;
  --navy-deep: #091F3E; --line: rgba(7,20,106,.14); --line-on-dark: rgba(255,255,255,.22);
  /* Hero field: one step deeper than the brand blue. White text at 15px measures 4.92:1 on it (3.98:1 on #007bff). Buttons, links and tabs keep --blue. */
  --hero-blue: #006ce4;
  --t-hero: clamp(40px, 4.3vw, 62px); --t-h2: clamp(30px, 2.8vw, 40px); --t-h3: clamp(19px, 1.6vw, 23px);
  --t-lede: 19px; --t-body: 17px; --t-small: 15px; --t-label: 12px;
  --font-body: Outfit, Arial, sans-serif;
  --sec-y: clamp(52px, 5.5vw, 76px);
  --ps-blue: var(--blue); --ps-royal: var(--blue-hover); --fg: var(--navy); --fg-2: var(--navy); --fg-3: var(--muted);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--navy); font: 400 var(--t-body)/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,p,figure,blockquote,ul,dl,dd,fieldset { margin: 0; padding: 0; }
h1,h2,h3 { text-wrap: balance; }
a { color: var(--blue); text-underline-offset: 4px; }
button,input,textarea { font: inherit; }
button { cursor: pointer; }
img,svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #ffb73e; outline-offset: 4px; }
.wrap { width: min(88%, 1180px); margin-inline: auto; }
.vh,.hp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; top: -100px; left: 20px; z-index: 500; padding: 12px 20px; background: var(--white); color: var(--navy); }
.skip:focus { top: 12px; }
.h2 { font-size: var(--t-h2); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; }
.eyebrow { font-size: var(--t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.btn,.btn:visited { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 26px; border: 1px solid transparent; border-radius: 6px; color: var(--white); background: var(--blue); font-size: var(--t-body); font-weight: 500; line-height: 1.15; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn,.tab,.nav-link,.nav { transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.btn:hover { background: var(--blue-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* Announcement bar. Editable text lives in index.html; this bar sits above the hero on the same blue field. */
.announce { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; background: var(--navy); color: var(--white); }
.announce-msg { padding: 9px 48px; font-size: var(--t-small); font-weight: 400; text-align: center; }
.announce-close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--white); opacity: .75; display: grid; place-items: center; }
.announce-close:hover { opacity: 1; background: rgba(255,255,255,.12); }

/* Navigation: sits on the blue hero at the top; becomes a white bar once scrolled. */
.nav { position: sticky; top: 0; z-index: 20; background: transparent; transition: background-color .3s ease, box-shadow .3s ease; }
.nav-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--blue); opacity: 0; transition: opacity .3s ease; }
.nav.is-compact .nav-progress { opacity: 1; }
.nav-inner { display: flex; align-items: center; gap: 32px; height: 84px; transition: height .3s cubic-bezier(.4,0,.2,1); }
.lockup { color: var(--white); flex: none; display: inline-flex; text-decoration: none; }
.lockup svg { width: 250px; height: auto; transition: width .3s cubic-bezier(.4,0,.2,1); }
.lk-icon,.lk-word,.lk-dot,.lk-desc { transition: fill .3s ease, opacity .3s ease; }
.lk-icon,.lk-word,.lk-dot,.lk-desc { fill: currentColor; } .lk-desc { opacity: .78; }
.nav.is-compact .lk-icon { fill: #091F3E; } .nav.is-compact .lk-word { fill: #111315; } .nav.is-compact .lk-dot { fill: #2654D3; } .nav.is-compact .lk-desc { fill: #75777C; opacity: 1; }
.nav-links { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.nav-link { position: relative; color: var(--white); white-space: nowrap; font-size: var(--t-small); font-weight: 500; text-decoration: none; opacity: 1; padding: 10px 0; }
.nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav-link:hover,.nav-link[aria-current=true] { opacity: 1; }
.nav-link:hover::after,.nav-link[aria-current=true]::after { transform: scaleX(1); }
.nav.is-compact .nav-link::after { background: var(--blue); }
/* Contact link and bar button share one slot sized to the button, so the links sit still and Contact simply gives way to the button once the hero button has scrolled away. */
.nav-swap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; justify-items: start; width: var(--swap-w, auto); }
.nav-swap > * { grid-area: 1 / 1; white-space: nowrap; }
.nav-swap .nav-link { transition: opacity .3s ease, visibility 0s linear .3s, color .18s ease; }
.nav-swap.is-cta .nav-link { visibility: hidden; opacity: 0; pointer-events: none; }
.nav-cta.btn { min-height: 44px; padding: 8px 18px; font-size: var(--t-small); background: var(--white); color: var(--blue); }
.nav-cta.btn:hover { background: var(--ice); }
.nav-cta.is-ghost { visibility: hidden; opacity: 0; pointer-events: none; }
.nav-cta.btn { transition: opacity .3s ease, visibility 0s linear .3s, background-color .18s ease, color .18s ease; }
.nav-cta.btn:not(.is-ghost) { transition-delay: 0s; }
.nav-cta .short { display: none; }
.nav.is-compact { background: rgba(255,255,255,.96); box-shadow: 0 1px 0 var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.nav.is-compact .nav-inner { height: 70px; } .nav.is-compact .lockup svg { width: 220px; }
.nav.is-compact .lockup,.nav.is-compact .nav-link { color: var(--navy); }
.nav.is-compact .nav-cta.btn { background: var(--blue); color: var(--white); }
.nav.is-compact .nav-cta.btn:hover { background: var(--blue-hover); }

/* Hero: one blue field, headline, one line of support, one button, portrait. */
.hero { position: relative; background: var(--hero-blue); color: var(--white); margin-top: -84px; padding-top: 84px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
.hero-copy { padding: 72px 0 80px; align-self: center; }
.hero-kicker { margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2; color: var(--white); }
.hero h1 { white-space: nowrap; font-size: var(--t-hero); font-weight: 650; line-height: 1.0; letter-spacing: -.035em; }
.hero-sub { margin-top: 22px; max-width: 30em; font-size: var(--t-lede); font-weight: 300; line-height: 1.4; }
.hero-actions { margin-top: 28px; }
.hero-actions .btn { background: var(--white); color: var(--blue); }
.hero-actions .btn:hover { background: var(--ice); }
/* The portrait runs to the right edge of the screen: the figure cancels the page gutter on its right side. */
.hero-side { align-self: end; display: grid; grid-template-columns: max-content auto; gap: 22px; align-items: end; margin-right: calc((min(88vw, 1180px) - 100vw) / 2); padding-top: 36px; }
.hero-portrait { width: min(410px, 29vw); height: auto; display: block; margin-bottom: -26px; }
.hero-id { padding-bottom: 64px; color: var(--white); font-size: var(--t-body); line-height: 1.35; text-align: right; }
.hero-name { display: block; font-weight: 600; }
.hero-title { display: block; font-weight: 400; }
.hero-sep { display: none; }

/* Hero load sequence (from v33): copy rises in, portrait and caption follow. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-copy > * { opacity: 0; transform: translateY(12px); animation: rise .5s cubic-bezier(.16,1,.3,1) forwards; }
  .js .hero-copy > *:nth-child(2) { animation-delay: .05s; } .js .hero-copy > *:nth-child(3) { animation-delay: .1s; } .js .hero-copy > *:nth-child(4) { animation-delay: .15s; }
  .js .hero-side > * { opacity: 0; transform: translateY(12px); animation: rise .5s cubic-bezier(.16,1,.3,1) .05s forwards; }
  .js .hero-side > .hero-id { animation-delay: .15s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* Brand strip: one tone, one cap height. */
.brands-band { background: var(--white); padding: 40px 0 44px; border-bottom: 1px solid var(--line); }
.brands-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.brands-band h2 { font-size: var(--t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.brand-logos { display: grid; grid-template-columns: 1.2fr .85fr 1.1fr 1.08fr .95fr 1.25fr; align-items: center; gap: 40px; }
.brand-track { display: contents; }
.brand-track[aria-hidden="true"] { display: none; } /* the second copy of the strip exists only for the phone marquee */
.brand-logos img { width: 100%; height: 34px; object-fit: contain; filter: brightness(0); opacity: .62; }
.brand-logos img[alt="Wells Fargo"], .brand-logos img[alt="Snappt"], .brand-logos img[data-tall] { height: 39px; }
.brand-pause { display: none; }

/* How we partner: audience tabs and single-open service rows. */
#priorities { background: var(--paper); padding: var(--sec-y) 0; }
.hwh-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: 28px 0 22px; }
.perspective-label { font-size: var(--t-body); color: var(--muted); white-space: nowrap; }
.tabs { position: relative; display: flex; gap: 10px; }
.tabs-ind { position: absolute; top: 0; bottom: 0; left: var(--ind-x, 0); width: var(--ind-w, 0); border-radius: 6px; background: var(--navy); opacity: 0; transition: left .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1); }
.tabs.has-ind .tabs-ind { opacity: 1; }
.tab { position: relative; z-index: 1; padding: 9px 20px; min-height: 44px; border: 1px solid var(--blue); border-radius: 6px; color: var(--blue); background: var(--white); font-size: var(--t-body); font-weight: 500; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.tab:hover { background: var(--ice); }
.tab[aria-selected=true] { background: var(--navy); color: var(--white); border-color: var(--navy); }
.tabs.has-ind .tab[aria-selected=true] { background: transparent; border-color: transparent; }
.areas.swap { animation: swap .32s ease both; }
@keyframes swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.area { border-top: 1px solid var(--line); }
.area:last-child { border-bottom: 1px solid var(--line); }
.area[open] { background: var(--ice); border-radius: 8px; border-color: transparent; margin: 6px 0; }
.area[open] + .area { border-top-color: transparent; }
.area summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; cursor: pointer; padding: 18px 20px; }
.area-head { min-width: 0; }
.area-sum { margin-top: 6px; font-size: var(--t-small); font-weight: 300; line-height: 1.5; color: var(--navy); }
.area summary:hover h3 { color: var(--blue); }
.area summary::-webkit-details-marker { display: none; }
.area h3 { font-size: var(--t-h3); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; transition: color .18s ease; }
.area[open] h3 { font-weight: 600; }
.area-icon { flex: none; width: 32px; height: 32px; border: 1.5px solid var(--blue); border-radius: 50%; display: grid; place-items: center; color: var(--blue); }
.area-icon svg { width: 18px; height: 18px; }
.area-icon { transition: background-color .2s ease, color .2s ease; }
.area-icon .v { transform-box: fill-box; transform-origin: center; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.area[open] .area-icon { color: var(--white); background: var(--blue); }
.area[open] .area-icon .v { transform: rotate(90deg); }
@supports (interpolate-size: allow-keywords) {
  .area::details-content { block-size: 0; overflow: clip; transition: block-size .32s cubic-bezier(.16,1,.3,1), content-visibility .32s allow-discrete; }
  .area[open]::details-content { block-size: auto; }
}
.area-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; padding: 2px 20px 26px; }
.area-body > div + div { border-left: 1px solid rgba(7,20,106,.16); padding-left: 28px; }
.area-lbl { color: var(--blue); font-size: var(--t-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.area-help,.area-gain,.area-body ul { font-size: var(--t-small); line-height: 1.5; color: var(--navy); }
.area-body ul { list-style: none; }
.area-body li { padding-left: 18px; position: relative; }
.area-body li + li { margin-top: 6px; }
.area-body li::before { content: ''; position: absolute; top: .6em; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }

/* Process: three columns on white. */
.diag { background: var(--white); padding: var(--sec-y) 0; }
.diag-intro { margin-top: 14px; max-width: 34em; font-size: var(--t-lede); font-weight: 300; line-height: 1.4; color: var(--muted); }
.diag-steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; position: relative; }
.diag-steps::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line); }
.diag-steps li { position: relative; padding-top: 30px; }
.diag-steps li::before { content: ''; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--white); border: 2px solid var(--blue); }
.diag-steps li:first-child::before { background: var(--blue); }
.diag-num { display: block; margin-bottom: 10px; font-size: var(--t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.diag h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.diag-steps p { margin-top: 10px; font-size: var(--t-body); line-height: 1.5; max-width: 22em; }

/* About the founder: the panel photo sits inside the page margins with rounded corners, then headline, then the bio with the facts stacked beside it. */
#about { background: var(--paper); padding: var(--sec-y) 0; }
.founder-photo img { width: 100%; aspect-ratio: 16 / 6.5; height: auto; object-fit: cover; object-position: center 45%; border-radius: 10px; }
.founder-photo figcaption { display: block; margin-top: 12px; font-size: var(--t-small); color: var(--muted); }
.about-lead { margin-top: 36px; }
.about .eyebrow { margin-bottom: 14px; }
.about-title { font-size: var(--t-h2); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; }
.about-cols { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px 72px; align-items: start; margin-top: 28px; }
.bio { font-size: var(--t-lede); font-weight: 300; line-height: 1.5; max-width: 36em; }
.bio + .bio { margin-top: 16px; }
.founder-links { margin-top: 22px; font-size: var(--t-body); }
.founder-links a { font-weight: 500; text-decoration: none; }
.founder-links a:hover { text-decoration: underline; }
.founder-facts { display: grid; }
.founder-facts > div { padding: 14px 0; border-top: 1px solid var(--line); }
.founder-facts > div:last-child { border-bottom: 1px solid var(--line); }
.founder-facts dt { font-weight: 500; font-size: 22px; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.founder-facts dd { margin: 4px 0 0; font-size: 14px; color: var(--muted); }

/* Testimonials: one quote at a time (Spotlight). Arrows and a progress bar sit on a rule beneath the quote. */
/* Testimonials: section title and controls in the left column, the quote in the right. One quote at a time. */
.perspective { background: var(--white); padding: var(--sec-y) 0; }
.pgrid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 24px 80px; align-items: start; }
.perspective-title { grid-column: 1; max-width: 8em; }
.pstage { display: grid; grid-column: 2; grid-row: 1 / span 2; }
.pquote { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
.pquote.is-on { opacity: 1; transform: none; pointer-events: auto; }
.no-js .pquote { position: static; opacity: 1; transform: none; pointer-events: auto; margin-bottom: 40px; }
.plead { font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; line-height: 1.18; letter-spacing: -.025em; text-wrap: balance; }
.pbody { margin-top: 18px; font-size: 20px; font-weight: 300; line-height: 1.5; }
.pquote figcaption { margin-top: 26px; font-size: var(--t-small); color: var(--muted); line-height: 1.4; }
.pquote figcaption > b { display: block; font-weight: 600; color: var(--navy); font-size: var(--t-body); }
.pctl { grid-column: 1; grid-row: 2; display: flex; align-items: center; justify-content: flex-start; gap: 22px; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--line); }
.pbar { flex: 0 0 120px; height: 2px; background: var(--line); position: relative; }
.pbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--blue); width: calc(100% / var(--n, 1)); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .45s ease; }
.perspective { --n: 1; --i: 0; }
.pcount { font-size: var(--t-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.parrows { display: inline-flex; gap: 8px; }
.parrow { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--blue); background: transparent; color: var(--blue); display: grid; place-items: center; transition: background-color .18s ease, color .18s ease; }
.parrow:hover { background: var(--blue); color: var(--white); }
.parrow svg { width: 18px; height: 18px; }

/* Contact and footer: one navy field. */
#contact { background: var(--navy-deep); color: var(--white); padding: var(--sec-y) 0 48px; }
.cgrid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.ccopy .h2 { max-width: 12em; }
.contact-lede { margin-top: 18px; max-width: 30em; font-size: var(--t-lede); font-weight: 300; line-height: 1.45; }
.cplate { padding: 26px; border-radius: 8px; color: var(--navy); background: var(--white); }
.cform { display: grid; gap: 16px; }
.cform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.field { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.field label,.topics legend { font-size: var(--t-small); font-weight: 500; line-height: 1.2; color: var(--navy); padding: 0; }
.field input,.field textarea,.tpick-btn { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid rgba(7,20,106,.28); border-radius: 6px; color: var(--navy); background: var(--white); font-size: var(--t-body); font-weight: 400; line-height: 1.3; }
.field input::placeholder,.field textarea::placeholder { color: var(--muted); opacity: 1; }
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus,.field textarea:focus,.tpick-btn:focus-visible { border-color: var(--blue); outline: 2px solid var(--blue); outline-offset: 1px; }
.field.invalid input { border-color: #9b1c1c; }
.ferr { font-size: 14px; line-height: 1.4; color: #9b1c1c; font-weight: 500; }
.ferr:empty { display: none; }
.topics { border: 0; min-width: 0; }
.tpick { position: relative; margin-top: 6px; }
.tpick-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; cursor: pointer; }
.tpick-btn:hover { border-color: var(--blue); }
.tpick-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpick-val.is-empty { color: var(--muted); }
.tpick-chev { flex: none; color: var(--blue); transition: transform .2s ease; }
.tpick-btn[aria-expanded="true"] .tpick-chev { transform: rotate(180deg); }
.tpick-list { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; width: max(100%, 310px); border: 1px solid rgba(7,20,106,.2); border-radius: 6px; background: var(--white); box-shadow: 0 12px 28px -12px rgba(7,20,106,.3); padding: 6px 0; }
.tpick-list label { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 14px; font-size: var(--t-small); color: var(--navy); cursor: pointer; }
.tpick-list label:hover { background: var(--ice); }
.tpick-list .tpick-last { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.tpick-list input { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--muted); border-radius: 4px; background: var(--white); cursor: pointer; }
.tpick-list input:checked { border-color: var(--blue); background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.tpick-list input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cform-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
.cform-status { font-size: var(--t-small); line-height: 1.4; }
.cform-status:empty { display: none; }
.cform-status.err { color: #9b1c1c; }
.cform-done { font-size: var(--t-h3); font-weight: 600; margin-bottom: 8px; }
.cf-ts:not(.is-active) { height: 0; overflow: hidden; margin: -8px 0; }
.footer { background: var(--navy-deep); color: var(--white); padding-bottom: 36px; }
.footer-top { display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: center; column-gap: 28px; row-gap: 4px; border-top: 1px solid var(--line-on-dark); padding-top: 40px; }
.footer .lockup { grid-row: 1; grid-column: 1; color: var(--white); }
.footer .lockup svg { width: 220px; }
.footer-lockup .lk-icon, .footer-lockup .lk-dot { fill: #2654D3; } .footer-lockup .lk-word { fill: #fff; } .footer-lockup .lk-desc { fill: #E6EBF2; opacity: 1; }
.footer-links { grid-row: 1; grid-column: 2; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 4px 28px; }
.footer-links a { color: var(--white); font-size: var(--t-small); font-weight: 400; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; opacity: .88; }
.footer-links a:hover { opacity: 1; text-decoration: underline; }
.footer-legal { grid-row: 2; grid-column: 2; text-align: right; font-size: 13.3px; /* desktop: 14px -5% (v44); phones set 13px below */ opacity: .8; }
.footer :focus-visible, #contact :focus-visible { outline-color: #fff; }

@media (max-width: 1024px) {
  .hero-side { grid-template-columns: auto; }
  .hero-id { grid-row: 1; padding: 0 0 14px; text-align: left; }
  .hero-portrait { width: min(360px, 34vw); }
  .hero-copy { padding: 64px 0 64px; }
  .brand-logos { gap: 26px; }
  .area-body { grid-template-columns: 1fr 1fr; }
  .area-body > div:last-child:nth-child(odd) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid rgba(7,20,106,.16); padding: 18px 0 0; }
  .about-cols { grid-template-columns: 1fr; gap: 24px; }
  .cgrid { grid-template-columns: 1fr; gap: 32px; }
}
/* Wide screens: the page wrap grows so the copy and the portrait stay in one composition, and the hero scales with it. */
@media (min-width: 1600px) {
  .wrap { width: min(88%, 1320px); }
  .hero-side { margin-right: calc((min(88vw, 1320px) - 100vw) / 2); }
  :root { --t-hero: clamp(40px, 4.3vw, 70px); --t-lede: 21px; }
  .hero-portrait { width: min(520px, 28vw); }
  .hero-copy { padding: 88px 0 96px; }
}
@media (max-width: 760px) {
  :root { --t-lede: 18px; --t-body: 16px; --sec-y: 52px; }
  /* Phones and small tablets: the three links give way to one Let's talk button, which stays visible on the hero as well as once scrolled. */
  /* Become fully opaque immediately so scrolling text never shows through the header. */
  .nav.is-compact { background: #fff; }
  .nav, .nav .lk-icon, .nav .lk-word, .nav .lk-dot, .nav .lk-desc { transition: none; }
  .nav-inner, .nav.is-compact .nav-inner { height: 60px; gap: 16px; }
  .lockup svg, .nav.is-compact .lockup svg { width: 160px; }
  /* Add breathing room below the wordmark without scaling the mobile logo. */
  .lockup svg { overflow: visible; }
  .lockup .lk-desc { transform: translateY(12px); }
  .nav-links { gap: 14px; }
  .nav-links .nav-link { display: none; }
  .nav-swap { width: auto; }
  .nav-cta.btn { min-height: 40px; padding: 6px 16px; }
  .nav-cta.is-ghost { visibility: visible; opacity: 1; pointer-events: auto; }
  .nav-cta .long { display: none; } .nav-cta .short { display: inline; }
  /* Announcement on one line at phone widths. */
  .announce { min-height: 36px; }
  .announce-msg { padding: 8px 36px 8px 14px; font-size: 13.5px; line-height: 1.3; }
  .announce-close { right: 2px; }
  /* Hero: tighter vertical rhythm so the portrait's face lands inside the first screen (announcement + nav + copy + face within about 620px at 390 wide). */
  .hero-kicker { font-size: 12px; margin-bottom: 12px; }
  .hero { margin-top: -60px; padding-top: 60px; }
  .hero-grid { grid-template-columns: 1fr; gap: 0; }
  .hero-copy { padding: 26px 0 18px; }
  .hero h1 { white-space: normal; font-size: clamp(30px, 8.8vw, 40px); line-height: 1.02; }
  .hero-sub { margin-top: 12px; font-size: 16px; line-height: 1.4; }
  .hero-actions { margin-top: 18px; }
  .hero-actions .btn { min-height: 41px; padding: 7px 20px; font-size: 15px; }
  .hero-side { grid-template-columns: 1fr; gap: 0; padding-top: 0; margin-right: calc((min(88vw, 1180px) - 100vw) / 2); }
  /* picture is the grid item; aligning its child image cannot position it in the grid. */
  .hero-side > picture { display: block; justify-self: end; }
  .hero-portrait { width: min(66vw, 320px); margin-bottom: -22px; transform: translateX(15px); }
  /* Caption sits 104px above the hero crop after the mobile spacing follow-ups. */
  .hero-id { position: absolute; left: calc((100vw - min(88vw, 1180px)) / 2); right: auto; bottom: 104px; z-index: 2; padding: 0; max-width: 130px; text-align: left; font-size: 13px; line-height: 1.35; }
  .hero-name, .hero-title { display: block; }
  .hero-sep { display: none; }
  /* Brand strip: a continuous scroll with a pause control instead of a stacked grid. */
  .brands-band { padding: 26px 0 30px; }
  .brands-head { margin-bottom: 18px; }
  .brand-logos { display: flex; gap: 44px; align-items: center; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .brand-track { display: flex; flex: none; align-items: center; gap: 44px;  }
  .brand-track[aria-hidden="true"] { display: flex; }
  .brand-logos::-webkit-scrollbar { display: none; }
  .brand-logos img { width: auto; height: 24px; max-width: none; }
  .brand-logos img[alt="Wells Fargo"], .brand-logos img[alt="Snappt"], .brand-logos img[data-tall] { height: 28px; }
  .brand-logos img.brand-wells-fargo { height: 20px; }
  .js .brand-pause { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--muted); }
  .brand-pause:hover { color: var(--navy); border-color: var(--navy); }
  .brand-pause svg { width: 14px; height: 14px; }
  .brand-pause .i-play { display: none; }
  .brand-pause[aria-pressed="true"] .i-pause { display: none; } .brand-pause[aria-pressed="true"] .i-play { display: block; }
  /* Without scripts or with reduced motion the strip is a single row the visitor can scroll sideways. */
  .no-js .brand-logos { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .no-js .brand-track, .no-js .brand-track[aria-hidden="true"] { animation: none; }
  .no-js .brand-track[aria-hidden="true"] { display: none; }
  /* How we partner (Option C): the audience strip stays pinned under the nav while the section is on screen; closed rows are
     title-only (the summary shows inside an open row); an opened row is scrolled to sit just below the pinned strip. */
  .hwh-bar { position: sticky; top: 60px; z-index: 5; margin: 16px 0 0; padding: 10px 0 12px; background: var(--paper); box-shadow: 0 1px 0 var(--line); }
  .hwh-bar .perspective-label { display: none; }
  .area:not([open]) .area-sum { display: none; }
  .area summary { padding: 14px 14px; }
  .area h3 { font-size: 18px; }
  .area { scroll-margin-top: 136px; }
  .perspective-label { width: 100%; }
  .tabs { width: 100%; }
  .tab { flex: 1; min-width: 0; padding-inline: 10px; }
  .area summary { padding: 16px 14px; }
  .area-body { grid-template-columns: 1fr; gap: 18px; padding: 0 14px 22px; }
  .area-body > div + div { border-left: 0; border-top: 1px solid rgba(7,20,106,.16); padding: 18px 0 0; }
  .diag-steps { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .diag-steps::before { display: none; }
  .founder-photo img { aspect-ratio: 16 / 9; }
  .pgrid { grid-template-columns: 1fr; gap: 20px; }
  .perspective-title { max-width: none; }
  .pstage { grid-column: 1; grid-row: auto; }
  .pctl { grid-column: 1; grid-row: auto; margin-top: 20px; flex-wrap: wrap; }
  .cplate { padding: 20px; }
  .cform-row { grid-template-columns: 1fr; }
  .tpick-list { width: 100%; }
  /* Footer: lockup, then the six links in two columns (site links left, LinkedIn and legal right), then the copyright under a rule. */
  .footer { padding-bottom: 28px; }
  .footer-top { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-top: 30px; }
  .footer .lockup, .footer-links, .footer-legal { grid-row: auto; grid-column: 1; }
  .footer .lockup svg { width: 170px; }
  .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; justify-content: start; column-gap: 24px; row-gap: 0; margin-top: 18px; }
  .footer-links a { min-height: 42px; font-size: var(--t-body); }
  .footer-legal { text-align: left; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-on-dark); font-size: 13px; }
}
@media (max-width: 560px) {
  .nav-inner, .nav.is-compact .nav-inner { gap: 12px; }
  .nav-cta.btn { min-height: 38px; padding: 6px 14px; font-size: 14px; }
  .lockup svg, .nav.is-compact .lockup svg { width: 150px; }
}
@media (max-width: 370px) {
  .lockup svg, .nav.is-compact .lockup svg { width: 124px; }
  .nav-inner, .nav.is-compact .nav-inner { gap: 8px; }
  .hero-portrait { width: min(72vw, 320px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; } *,*::before,*::after { animation: none !important; transition: none !important; }
  .brand-logos { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .brand-track[aria-hidden="true"], .js .brand-pause { display: none; }
}

/* v54: Insights and speaking strip above the contact form (Option B, three cards). Two article cards and a dark speaking card at equal weight;
   on screens up to 900px the cards become a sideways-swipe row that bleeds to the screen edge, so the section stays about one screen tall. */
.pubstrip { background: var(--paper); padding: var(--sec-y) 0; border-top: 1px solid var(--line); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pubhead { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.pubhead .eyebrow { margin-bottom: 10px; }
.pubhead .text-link { font-size: 15px; font-weight: 500; color: var(--blue); text-decoration: none; white-space: nowrap; padding: 10px 0; min-height: 44px; display: inline-block; }
.pubhead .text-link:hover { text-decoration: underline; }
.pubcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pubcards > li { display: flex; }
.pubcard { display: flex; flex-direction: column; width: 100%; background: var(--white); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--navy); transition: box-shadow .2s ease, transform .2s ease; }
.pubcard:hover { box-shadow: 0 14px 36px rgba(7,20,106,.10); transform: translateY(-2px); }
.pubcard:hover .pubtitle { color: var(--blue); }
.pubcard-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy-deep); }
.pubcard-img img, .pubcard-img picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.pubcard-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; flex: 1; }
.pubmeta { display: block; font-size: 13px; color: var(--muted); }
.pubtitle { display: block; font-size: 21px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; transition: color .18s ease; }
.pubsum { display: block; font-size: 16px; line-height: 1.45; color: var(--muted); }
.pubcta { display: block; margin-top: auto; padding-top: 8px; font-size: 15px; font-weight: 500; color: var(--blue); }
.pubcard.is-stage { background: var(--navy-deep); color: var(--white); border-color: transparent; }
.pubcard.is-stage .pubcard-img img { object-position: 50% 38%; }
.pubcard.is-stage .eyebrow { color: #9cc3ff; }
.pubcard.is-stage .pubcta, .pubcard.is-stage:hover .pubtitle { color: var(--white); }
@media (max-width: 900px) {
  .pubhead { flex-direction: column; align-items: start; gap: 4px; margin-bottom: 20px; }
  .pubcards { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46%; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: -6vw; padding: 4px 6vw 8px; scroll-padding-inline: 6vw; }
  .pubcards::-webkit-scrollbar { display: none; }
  .pubcards > li { scroll-snap-align: start; }
  .pubcard:hover { transform: none; box-shadow: none; }
}
@media (max-width: 760px) {
  .pubcards { grid-auto-columns: 84%; }
  .pubcard-body { padding: 18px 20px 20px; }
  .pubtitle { font-size: 19px; }
}

/* v51: contact heading spans both columns so it sits on one line at desktop widths */
@media (min-width: 1025px) {
  .contact-split .cgrid { row-gap: 28px; }
  .contact-split .ccopy { display: contents; }
  .contact-split #contact-title { grid-column: 1 / -1; grid-row: 1; max-width: none; }
  .contact-split .contact-lede { grid-column: 1; grid-row: 2; margin-top: 0; }
  .contact-split .cplate { grid-column: 2; grid-row: 2; }
}
/* v51: lockup 16% smaller at rest over the cobalt (250 to 210) and 190 once the bar turns white; phones unchanged */
@media (min-width: 761px) {
  .lockup svg { width: 210px; }
  .nav.is-compact .lockup svg { width: 190px; }
}