/* Compassionate Leaders Circle, homepage concept, 2026-09-30.
   Structure, spacing, radii, breakpoints and motion ported from the BYQ Supply "Avenir"
   family (receipt: SOURCES.json). Colour and type are CLC's own: navy rgb(22,36,55) and
   red rgb(204,32,40) measured on compassionateleaderscircle.com, Poppins (their only face),
   the red pill button their site uses. Avenir's values are noted where CLC's replaced them. */

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/poppins-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/poppins-500-latin.woff2) format('woff2'); }
@font-face { font-family: 'Poppins Fallback'; src: local('Arial'); size-adjust: 112%; ascent-override: 93%; descent-override: 31%; line-gap-override: 9%; }

:root {
  --navy: #162437;                 /* Avenir #0b2e3c */
  --navy-88: rgba(22, 36, 55, .88);
  --navy-64: rgba(22, 36, 55, .64);
  --navy-48: rgba(22, 36, 55, .48);
  --navy-16: rgba(22, 36, 55, .16);
  --navy-08: rgba(22, 36, 55, .08);
  --navy-04: rgba(22, 36, 55, .04);
  --red: #CC2028;
  --red-dark: #A8161D;
  --light: #F7F6F5;                /* Avenir ground, CLC's own page grey is #F6F6F6 */
  --light-88: rgba(247, 246, 245, .88);
  --light-16: rgba(247, 246, 245, .16);
  --light-06: rgba(247, 246, 245, .06);
  --wash: #DEE5EC;                 /* Avenir #b8cdd4, re-mixed from CLC navy */
  --depth: #E5E3E1;
  --font: 'Poppins', 'Poppins Fallback', system-ui, sans-serif;
  --r-m: 12px; --r-s: 8px; --r-xs: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; color-scheme: light; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--light); color: var(--navy); font: 400 16px/24px var(--font); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, h4, h5, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 60; background: var(--navy); color: var(--light); padding: 14px 18px; border-radius: var(--r-s); }
.skip:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.container { max-width: 1800px; margin: 0 auto; padding: 0 32px; }
.section { padding: 120px 0; }

/* Avenir labels are Fragment Mono 14/16 500 0.75px uppercase; CLC has no mono face. */
.label { font: 500 13px/16px var(--font); letter-spacing: .1em; text-transform: uppercase; }
/* Avenir h2: Lora 52/60 400 -3px. Poppins is wider, so tracking is -1.5px. */
.h2 { font-size: 52px; line-height: 60px; font-weight: 400; letter-spacing: -1.5px; }
.h5 { font-size: 28px; line-height: 34px; font-weight: 400; letter-spacing: -.5px; }
.muted { color: var(--navy-88); }
.small { font-size: 14px; line-height: 20px; }

/* Buttons: Avenir 8px radius; CLC's primary is its red pill. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 50px; font: 500 14px/16px var(--font); text-decoration: none; border: 1px solid transparent; transition: background-color .3s, color .3s, border-color .3s; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); }
.btn-dark { background: var(--navy); color: var(--light); border-color: var(--light-16); }
.btn-dark:hover { background: #0F1826; }
.btn-inverted { background: var(--light); color: var(--navy); border-color: var(--navy-08); }
.btn-inverted:hover { background: #fff; }
.link { display: inline-flex; align-items: center; min-height: 44px; gap: 6px; font: 500 14px/16px var(--font); color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: currentColor; transition: opacity .3s; }
.link:hover { opacity: .7; }
.link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ---------- Nav: avenir-navigation-bar-1 (bar only; mega dropdowns not ported) ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; padding: 24px 32px; }
.nav-bar { position: relative; display: flex; align-items: center; justify-content: space-between; max-width: 1736px; margin: 0 auto; padding: 6px 12px 6px 20px; min-height: 68px; background: rgba(22, 36, 55, .72); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: var(--light); border-radius: var(--r-s); border: 1px solid rgba(247, 246, 245, .12); box-shadow: 0 4px 10px rgba(22, 36, 55, .16); }
.nav-links { display: flex; gap: 24px; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; line-height: 20px; text-decoration: none; transition: color .3s; }
.nav-links a:hover { color: var(--light-88); opacity: .8; }
.nav-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.nav-logo img { height: 44px; width: auto; }
.nav-actions { display: flex; align-items: center; gap: 20px; }
.nav-burger { display: none; width: 40px; height: 40px; position: relative; }
.nav-burger i { position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--light); transition: transform .3s; }
.nav-burger i:first-of-type { top: 15px; } .nav-burger i:last-of-type { top: 23px; }
.nav-burger[aria-expanded="true"] i:first-of-type { transform: translateY(4px) rotate(45deg); }
.nav-burger[aria-expanded="true"] i:last-of-type { transform: translateY(-4px) rotate(-45deg); }
.nav-menu { display: none; flex-direction: column; gap: 4px; margin: 8px auto 0; max-width: 1736px; padding: 24px 20px; background: rgba(22, 36, 55, .92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: var(--light); border-radius: var(--r-s); border: 1px solid rgba(247, 246, 245, .12); box-shadow: 0 4px 10px rgba(22, 36, 55, .16); }
.nav-menu a { display: block; width: 100%; padding: 12px 0; font-size: 24px; line-height: 28px; letter-spacing: -.5px; text-decoration: none; border-bottom: 1px solid rgba(247, 246, 245, .12); }
.nav-menu a:last-child { margin-top: 16px; border: 0; background: var(--red); color: #fff; border-radius: 50px; text-align: center; font: 500 16px/20px var(--font); padding: 16px; }
.nav.is-open .nav-menu { display: flex; }

/* ---------- Hero: avenir-hero-7 ---------- */
.hero { background: var(--navy); color: var(--light); min-height: 100svh; padding: 140px 0 80px; overflow-x: clip; overflow-y: visible; display: flex; align-items: center; }
.hero .container { width: 100%; }
.hero-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px) minmax(0, 1fr); align-items: center; gap: 24px; }
.hero-copy { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.hero-title { font-size: 52px; line-height: 60px; font-weight: 400; letter-spacing: -1.5px; max-width: 484px; }
.hero-title .br { display: block; }
.hero-body { color: var(--light-88); max-width: 362px; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding-top: 8px; }
.hero-cluster { display: grid; gap: 20px; align-items: center; width: max-content; }
/* The tall tile sits on the inner side, fully visible; the small tiles sit outside it and may bleed off the viewport edge (the hero clips sideways), as Avenir's clusters do. */
.hero-cluster.is-left { grid-template-columns: auto auto; justify-self: end; }
.hero-cluster.is-right { grid-template-columns: auto auto; justify-self: start; }
.hero-cluster figure { border-radius: var(--r-m); overflow: hidden; box-shadow: 0 24px 48px rgba(0, 0, 0, .22); }
.hero-cluster img { width: 100%; height: 100%; object-fit: cover; }
.hero-cluster .tall { grid-row: 1 / span 2; width: 320px; aspect-ratio: 3 / 4; }
.hero-cluster .founders { width: 360px; }
.hero-cluster .square { width: 220px; aspect-ratio: 1; }
.hero-cluster .wide { width: 260px; aspect-ratio: 4 / 3; }
.hero-cluster.is-left .tall { grid-column: 2; }
.hero-cluster.is-left .square, .hero-cluster.is-left .wide { grid-column: 1; justify-self: end; }
.hero-cluster.is-right .tall { grid-column: 1; }
.hero-cluster.is-right .square { grid-column: 2; justify-self: start; }
.hero-cluster .up { transform: translateY(-40px); }
.hero-cluster .down { transform: translateY(40px); }

/* ---------- Who it is for: avenir-value-features-2 ---------- */
.split { display: grid; grid-template-columns: 5fr 1fr 6fr; gap: 16px; align-items: center; }
.split-media { grid-column: 1; border-radius: var(--r-m); overflow: hidden; height: 600px; position: relative; background: var(--navy); }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-media::after { content: none; }
.split-body { grid-column: 3; display: flex; flex-direction: column; gap: 80px; }
.split-body .h2 { max-width: 634px; }
.cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.card-soft { display: flex; flex-direction: column; gap: 24px; padding: 24px; border-radius: var(--r-m); background: var(--navy-04); }
.card-soft .icon { width: 60px; height: 60px; }
.card-soft .icon svg { width: 100%; height: 100%; fill: none; stroke: var(--navy); stroke-width: 1.2; }
.card-soft h3 { font-size: 20px; line-height: 28px; font-weight: 500; }
.card-soft p { color: var(--navy-88); }

/* ---------- Programs: avenir-value-features-13 ---------- */
.programs { background: var(--wash); }
.slider-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 64px; }
.slider-head .stack { display: flex; flex-direction: column; gap: 32px; max-width: 564px; }
.slider-nav { display: flex; gap: 8px; }
.slider-nav button { width: 44px; height: 44px; border-radius: var(--r-xs); background: var(--navy-08); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; transition: background-color .3s; }
.slider-nav button:hover { background: var(--navy-16); }
.slider-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.slider { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.slider::-webkit-scrollbar { display: none; }
.program { position: relative; flex: 0 0 564px; max-width: 85vw; aspect-ratio: 564 / 400; border-radius: var(--r-m); overflow: hidden; background: var(--navy); color: var(--light); scroll-snap-align: start; display: flex; align-items: flex-end; padding: 24px; }
.program img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.program::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 36, 55, 0) 30%, rgba(22, 36, 55, .75) 100%); }
.program-panel { position: relative; display: flex; flex-direction: column; gap: 16px; width: 100%; padding: 24px; border-radius: var(--r-m); background: rgba(247, 246, 245, .16); border: 1px solid rgba(247, 246, 245, .16); backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px); }
.program-panel .label { color: var(--light-88); }
.program-panel .h5 { color: var(--light); }
.program-panel p { color: var(--light-88); }
.program-panel .link { color: var(--light); }

/* ---------- Proof: avenir-team-grid-1 (testimonial slider) plus avenir-stats-1's logo strip ---------- */
.proof .slider-head .stack { max-width: 680px; }
.quote { flex: 0 0 calc(50% - 32px); min-width: 480px; max-width: 85vw; display: flex; gap: 32px; margin-right: 64px; scroll-snap-align: start; }
.quote figure { flex: 0 0 200px; height: 260px; border-radius: var(--r-s); overflow: hidden; background: var(--navy-08); }
.quote img { width: 100%; height: 100%; object-fit: cover; }
.quote-body { display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.quote-body p { color: var(--navy-88); }
.quote-body .name { font-weight: 500; }
.quote-body .role { display: block; margin-top: 4px; font: 500 12px/16px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--navy-88); }
.logos { margin-top: 64px; padding-top: 64px; border-top: 1px solid var(--navy-16); display: flex; flex-direction: column; gap: 32px; }
.logos img { width: 100%; max-width: 1200px; height: auto; margin: 0 auto; opacity: .85; }

/* ---------- Why CLC: avenir-value-features-19 ---------- */
.values { background: var(--navy); color: var(--light); }
.values .slider-head { margin-bottom: 80px; }
.values .slider-head .stack { max-width: 680px; }
.values .slider-nav button { background: var(--light-16); color: var(--light); }
.values .slider-nav button:hover { background: rgba(247, 246, 245, .28); }
.value { flex: 0 0 564px; max-width: 85vw; min-height: 400px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: 24px; border-radius: var(--r-m); background: var(--light-06); scroll-snap-align: start; }
.value .label { color: var(--light-88); }
.value .h5 { color: var(--light); }
.value p { color: var(--light-88); }

/* ---------- Founder: avenir-value-features-10 ---------- */
.founder .split-body { gap: 80px; }
.features { display: flex; flex-direction: column; gap: 64px; }
.feature { display: grid; grid-template-columns: 60px 1fr; gap: 24px; align-items: start; }
.feature .icon svg { width: 60px; height: 60px; fill: none; stroke: var(--navy); stroke-width: 1.2; }
.feature p { color: var(--navy-88); }
.founder .actions { display: flex; align-items: center; gap: 20px; }

/* ---------- Free guide: avenir-cta-1 ---------- */
.guide { padding: 32px 0 64px; }
.master-cta { position: relative; overflow: hidden; padding: 120px 32px; margin-bottom: 64px; border-radius: var(--r-m); background: var(--wash); text-align: center; display: flex; flex-direction: column; align-items: center; }
.master-cta .h2 { max-width: 640px; margin-top: 32px; }
.master-cta .support { display: flex; align-items: stretch; gap: 12px; margin-top: 48px; width: min(100%, 560px); }
.master-cta .support .input { flex: 1 1 200px; max-width: 360px; }
.master-cta .support .btn { white-space: nowrap; }
.master-cta .deco { opacity: .1; }
.master-cta .support img { width: 48px; height: 48px; border-radius: var(--r-s); object-fit: cover; }
.master-cta .support .who { text-align: left; }
.master-cta .support .who b { display: block; font-weight: 500; }
.master-cta .support .who span { font-size: 14px; line-height: 20px; color: var(--navy-88); }
.master-cta .deco { position: absolute; top: 0; bottom: 0; width: 22%; background: repeating-linear-gradient(180deg, var(--navy) 0 2px, transparent 2px 9px); opacity: .18; }
.master-cta .deco.l { left: 0; -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); }
.master-cta .deco.r { right: 0; -webkit-mask-image: linear-gradient(270deg, #000, transparent); mask-image: linear-gradient(270deg, #000, transparent); }
.cta-bottom { display: grid; grid-template-columns: 3fr 6fr 3fr; gap: 16px; align-items: start; }
.cta-bottom .contact-line .h5 { margin-top: 12px; }
.cta-bottom form { grid-column: 3; display: flex; flex-direction: column; gap: 12px; }
.input { width: 100%; padding: 12px 16px; border-radius: var(--r-s); border: 1px solid transparent; background: var(--depth); color: var(--navy); }
.input { appearance: none; -webkit-appearance: none; }
select.input { background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.input::placeholder { color: var(--navy-48); }
.input:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.cta-bottom .btn { align-self: flex-end; }

/* ---------- Closing ask: avenir-contact-2 ---------- */
.contact-grid { display: grid; grid-template-columns: 5fr 1fr 6fr; gap: 16px; align-items: stretch; }
.contact-card { grid-column: 1; position: relative; min-height: 640px; border-radius: var(--r-m); overflow: hidden; background: var(--navy); color: var(--light); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; }
.contact-card img.mark { position: absolute; right: -40px; top: 40px; width: 55%; height: auto; opacity: .1; }
.contact-card::after { content: none; }
.contact-card > * { position: relative; z-index: 1; }
.contact-card .h2 { max-width: 367px; }
.contact-form { grid-column: 3; display: flex; flex-direction: column; gap: 24px; }
.contact-form .halves { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .field legend { font: 500 12px/16px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--navy-64); }
.field .opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.pills { border: 0; padding: 0; margin: 0; min-width: 0; }
.pills legend { padding: 0; margin-bottom: 8px; }
.field .pill, .pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; margin: 0 8px 8px 0; border-radius: 50px; border: 1px solid var(--navy-16); background: var(--depth); font: 400 14px/20px var(--font); letter-spacing: 0; text-transform: none; color: var(--navy); cursor: pointer; }
.pill:has(input:checked) { background: var(--navy); color: var(--light); border-color: var(--navy); }
.pill input { width: 16px; height: 16px; accent-color: var(--red); margin: 0; }
.call-facts { display: flex; flex-direction: column; gap: 12px; }
.call-facts .label { color: var(--red); }
textarea.input { min-height: 160px; resize: vertical; }
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 20px; color: var(--navy-88); }
.consent a { padding: 12px 0; margin: -12px 0; }
.consent input { width: 20px; height: 20px; margin-top: 1px; flex: 0 0 20px; accent-color: var(--navy); }
.contact-form .btn { align-self: flex-start; }

/* ---------- Footer: avenir-footer-1 ---------- */
.footer { padding: 80px 0 32px; background: var(--navy); color: var(--light); }
.footer-top { display: grid; grid-template-columns: 3fr 1fr 8fr; gap: 16px; }
.footer-left { display: flex; flex-direction: column; gap: 32px; }
.footer-left img { height: 40px; width: auto; align-self: flex-start; }
.footer-left .addr { font-weight: 500; }
.footer-left .desc { font-size: 14px; line-height: 20px; letter-spacing: .25px; color: var(--light-88); max-width: 345px; }
.footer-right { grid-column: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.footer-col { display: flex; flex-direction: column; gap: 20px; }
.footer-col h5 { font-size: 28px; line-height: 34px; font-weight: 400; letter-spacing: -.5px; }
.footer-col ul { display: flex; flex-direction: column; gap: 6px; }
.footer-col a { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; padding: 10px 0; text-decoration: none; color: var(--light-88); transition: color .3s; }
.footer-col a:hover { color: var(--light); }
.footer-rule { height: 1px; background: var(--light-16); margin: 132px 0 24px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-bottom .label { color: var(--light-88); }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Reveals: additive; complete with JS off or reduced motion ---------- */
html.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ---------- 1400 to 1599: the collage at a size that fits without bleeding ---------- */
@media (max-width: 1599px) {
  .hero-wrap { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px) minmax(0, 1fr); }
  .hero-cluster .tall { width: 280px; }
  .hero-cluster .founders { width: 300px; }
  .hero-cluster .square { width: 168px; }
  .hero-cluster .wide { width: 200px; }
  .hero-cluster .up { transform: translateY(-32px); }
  .hero-cluster .down { transform: translateY(32px); }
}

/* ---------- Small laptop and tablet nav: 1199 ---------- */
@media (max-width: 1199px) {
  .nav-links { display: none; }
  .nav-logo { position: static; transform: none; }
  .nav-burger { display: inline-block; }
}

/* ---------- Hero stacks below 1400: the three-column hero needs the width ---------- */
@media (max-width: 1399px) {
  .hero-wrap { grid-template-columns: 1fr; gap: 48px; }
  .hero-copy { max-width: 560px; margin: 0 auto; }
  .hero-cluster.is-left, .hero-cluster.is-right { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; justify-items: stretch; max-width: 880px; margin: 0 auto; width: 100%; justify-self: auto; }
  .hero-cluster figure { grid-column: auto !important; grid-row: auto !important; justify-self: stretch !important; width: 100% !important; transform: none !important; box-shadow: none; }
  .hero-cluster .tall, .hero-cluster .wide, .hero-cluster .square, .hero-cluster .founders { width: 100%; grid-row: auto; grid-column: auto; justify-self: stretch; transform: none; margin: 0; box-shadow: none; }
  .hero-cluster .tall { aspect-ratio: 3 / 4; }
  .hero-cluster .square { aspect-ratio: 1; }
  .hero-cluster .wide { aspect-ratio: 4 / 3; }
  .value { min-height: 320px; }
}
@media (min-width: 992px) and (max-width: 1399px) {
  /* Short laptops: both photo rows become one row above the copy so the headline and buttons sit in the first screen. */
  .hero { padding: 120px 0 64px; }
  .hero-wrap { grid-template-columns: 1fr 1fr; grid-template-areas: "left right" "copy copy"; gap: 32px 24px; }
  .hero-cluster.is-left { grid-area: left; justify-content: end; }
  .hero-cluster.is-right { grid-area: right; justify-content: start; }
  .hero-copy { grid-area: copy; }
  .hero-cluster.is-left, .hero-cluster.is-right { grid-template-columns: repeat(3, 150px); max-width: none; margin: 0; width: auto; justify-self: auto; }
  .hero-cluster figure { grid-column: auto !important; grid-row: auto !important; justify-self: stretch !important; width: 100% !important; transform: none !important; box-shadow: none; }
}

/* ---------- Tablet: 991 ---------- */
@media (max-width: 991px) {
  .container { max-width: 728px; }
  .split, .contact-grid { display: flex; flex-direction: column; gap: 48px; }
  .split-media { order: 9999; height: 480px; }
  .founder .split-media { order: -1; height: 420px; }
  .contact-grid { gap: 64px; }
  .contact-card { min-height: 480px; }
  .footer-top { display: flex; flex-direction: column; gap: 64px; }
  .footer-right { gap: 32px; }
  .footer-rule { margin-top: 64px; }
  .cta-bottom { display: flex; flex-direction: column; gap: 48px; }
  .quote { min-width: 0; flex-basis: 100%; }
}

/* ---------- Mobile: 767 ---------- */
@media (max-width: 767px) {
  .container { padding: 0 16px; }
  .section { padding: 80px 0; }
  .nav { padding: 12px; }
  .nav-logo img { height: 36px; }
  .nav-menu a, .footer-col a { display: block; }
  .nav-bar { padding: 8px 8px 8px 16px; }
  .nav-actions .btn { display: none; }
  .hero { min-height: 0; padding: 120px 0 80px; display: block; }
  .hero-wrap { gap: 80px; }
  .hero-cluster.is-left { display: none; }
  .hero-cluster.is-right { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .hero-copy { max-width: 320px; margin: 0 auto; }
  .hero-title, .h2 { font-size: 36px; line-height: 40px; letter-spacing: -1px; }
  .h5, .footer-col h5 { font-size: 24px; line-height: 30px; }
  .label { font-size: 12px; }
  .split { gap: 32px; }
  .split-body { gap: 48px; }
  .split-media { height: 368px; border-radius: 10px; }
  .card-soft { padding: 20px; }
  .slider-head { margin-bottom: 40px; gap: 24px; flex-direction: column; align-items: flex-start; }
  .slider-nav { display: none; }
  .program, .value { flex-basis: 82vw; }
  .quote { flex-basis: 86vw; }
  .logo-rows { gap: 14px; }
  .program, .value { border-radius: 10px; padding: 20px; }
  .program { aspect-ratio: auto; min-height: 340px; }
  .value { min-height: 0; gap: 32px; }
  .program-panel { padding: 20px; }
  .quote { gap: 24px; margin-right: 40px; }
  .values .slider-head { margin-bottom: 40px; }
  .feature { gap: 16px; }
  .features { gap: 40px; }
  .guide { padding: 24px 0 40px; }
  .master-cta { padding: 80px 16px; border-radius: 10px; margin-bottom: 40px; }
  .master-cta .deco { display: none; }
  .contact-card { min-height: 384px; padding: 20px; }
  .contact-form .halves { gap: 12px; }
  .contact-form { gap: 20px; }
  .footer { padding: 48px 0 16px; }
  .footer-top { gap: 40px; }
  .footer-left { gap: 24px; }
  .footer-rule { margin-top: 40px; }
  .footer-bottom { flex-direction: column; }
  .btn, .link, .footer-col a, .nav-menu a { min-height: 44px; }
  .footer-col a { display: inline-flex; align-items: center; }
}

/* ---------- Mobile portrait: 479 ---------- */
@media (max-width: 479px) {
  .cards-2 { grid-template-columns: 1fr; }
  .quote { flex-direction: column; }
  .quote figure { flex-basis: auto; width: 128px; height: 176px; }
  .contact-form .halves { grid-template-columns: 1fr; }
  .footer-right { grid-template-columns: 1fr 1fr; }
  .hero-cluster.is-right { grid-template-columns: repeat(2, auto); }
}

/* ---------- Motion pass (Greg, 2026-09-30): cards travel on scroll, hero drift, logo marquee ---------- */
/* Pinned drive, from the Stringer pinned horizontal gallery spec: the section pins while the track translates. */
@media (min-width: 992px) {
  html.js [data-drive] { position: relative; }
  html.js [data-drive] .drive-pin { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding-top: 112px; box-sizing: border-box; }
  html.js [data-drive] .drive-pin > .container { width: 100%; }
  html.js [data-drive] .slider { overflow: visible; scroll-snap-type: none; will-change: transform; }
  html.js .values .slider { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  html.js .values .value { flex-basis: auto; max-width: none; }
}
.marquee { width: 100%; max-width: 1000px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 48px; width: max-content; animation: marquee 42s linear infinite; }
.marquee:nth-child(2) .marquee-track { animation-direction: reverse; animation-duration: 50s; }
.marquee:nth-child(3) .marquee-track { animation-duration: 46s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track img { height: 44px; width: auto; opacity: .8; flex: 0 0 auto; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 24px)); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  html.js [data-drive] .drive-pin { position: static; min-height: 0; }
  html.js [data-drive] .slider { overflow-x: auto; transform: none !important; }
}
@media (max-width: 767px) { .marquee-track img { height: 30px; } .marquee-track { gap: 28px; } }

/* ---------- FAQ: avenir-faq-1 (one tab) ---------- */
.faq-grid { display: grid; grid-template-columns: 5fr 1fr 6fr; gap: 16px; align-items: start; }
.faq-head { grid-column: 1; display: flex; flex-direction: column; gap: 24px; }
.faq-list { grid-column: 3; display: flex; flex-direction: column; gap: 32px; }
.faq-item { border-bottom: 1px solid var(--navy-08); padding-bottom: 32px; }
.faq-item h3 { font: inherit; margin: 0; }
.faq-q { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; width: 100%; min-height: 44px; padding: 5px 0; text-align: left; font-size: 28px; line-height: 34px; font-weight: 400; letter-spacing: -.5px; }
.faq-plus { position: relative; flex: 0 0 16px; height: 16px; margin-top: 9px; }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 0; top: 7.5px; width: 16px; height: 1px; background: var(--navy); transition: transform .3s, opacity .3s; }
.faq-plus::after { transform: rotate(90deg); }
.faq-item.is-open .faq-plus::after { transform: rotate(90deg) scaleX(0); }
.faq-a { overflow: hidden; transition: max-height .3s ease; }
.faq-a p { padding-top: 16px; color: var(--navy-88); max-width: 560px; }
html.js .faq-item:not(.is-open) .faq-a { max-height: 0; }
html.js .faq-item.is-open .faq-a { max-height: 500px; }
@media (max-width: 991px) { .faq-grid { display: flex; flex-direction: column; gap: 48px; } }
@media (max-width: 767px) { .faq-q { font-size: 24px; line-height: 30px; } .faq-list { gap: 24px; } .faq-item { padding-bottom: 24px; } }
@media print { .nav, .slider-nav, .skip { display: none !important; } html.js [data-drive] { height: auto !important; } html.js [data-drive] .drive-pin { position: static; min-height: 0; padding-top: 0; } html.js [data-drive] .slider { transform: none !important; flex-wrap: wrap; } .hero { min-height: 0; padding: 40px 0; } html.js .faq-a { max-height: none !important; } * { animation: none !important; transition: none !important; } }

/* ---------- Phones: nothing hides behind a swipe. Tracks stack; testimonials show three, the rest on request. ---------- */
@media (max-width: 767px) {
  .programs .slider, .values .slider { display: grid; grid-template-columns: 1fr; gap: 16px; overflow: visible; scroll-snap-type: none; }
  .program, .value { flex-basis: auto; max-width: none; min-width: 0; width: 100%; }
  .proof .slider { gap: 16px; }
  .quote { flex: 0 0 86vw; min-width: 0; }
  .proof .slider-nav { display: flex; }
  .program { aspect-ratio: auto; min-height: 0; }
  .value { min-height: 0; }
  .quote { flex-direction: column; gap: 16px; padding: 20px; border-radius: var(--r-m); background: var(--navy-04); }
}

/* ---------- Phone fixes, 2026-09-30 ---------- */
@media (max-width: 767px) {
  /* hero: the founders tall on the right, two squares stacked on the left, no hole */
  .hero-cluster.is-right { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; }
  .hero-cluster.is-right .founders { grid-column: 2 !important; grid-row: 1 / span 2 !important; aspect-ratio: 3 / 4; }
  .hero-cluster.is-right .square { grid-column: 1 !important; aspect-ratio: auto; height: 100%; min-height: 0; }
  .hero-cluster.is-right .square.up { grid-row: 1 !important; }
  .hero-cluster.is-right .square.down { grid-row: 2 !important; }
  /* guide: field above button */
  .master-cta .support { flex-wrap: wrap; justify-content: center; }
  .master-cta .support .input { flex: 1 1 100%; max-width: none; }
  .master-cta .support .btn { width: 100%; }
}
.consent span { flex: 1; }

/* Testimonial arrows: beside the heading on desktop (as the source), under the cards on phones. */
.proof-grid { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "head nav" "slider slider" "logos logos"; align-items: end; column-gap: 32px; }
.proof-grid > .slider-head { grid-area: head; }
.proof-grid > .slider-nav { grid-area: nav; margin-bottom: 48px; }
.proof-grid > .slider { grid-area: slider; }
.proof-grid > .logos { grid-area: logos; }
@media (max-width: 767px) {
  .proof-grid { grid-template-columns: 1fr; grid-template-areas: "head" "slider" "nav" "logos"; }
  .proof-grid > .slider-nav { justify-self: end; margin: 16px 0 0; display: flex; }
  .proof-grid > .slider-head { margin-bottom: 24px; }
}

/* Client logos: three strips on desktop; individual marks in a grid on tablets and phones so each mark is legible. */
.logo-grid { display: none; }
@media (max-width: 991px) {
  .logo-rows { display: none; }
  .logo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px; align-items: center; justify-items: center; }
  .logo-grid li { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; }
  .logo-grid img { max-width: 100%; max-height: 44px; width: auto; height: auto; }
}
@media (max-width: 767px) {
  .logo-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .logo-grid li { height: 52px; }
  .logo-grid img { max-height: 52px; }
}

.founder-head { display: flex; flex-direction: column; gap: 16px; }
.founder-name { font-size: 20px; line-height: 28px; font-weight: 500; }
.founder-head .h5 { margin-top: 8px; }