/* ============================================================
   Dalgo — app.css
   ONE consolidated stylesheet. No importance overrides. Inter only.
   One 1200px container. Consumes tokens.css.
   Order = cascade: base → type → components → responsive.
   Any specificity need is solved by selector scope, never by importance overrides.
   ============================================================ */

/* ---------- 0. Fonts (self-hosted Inter, variable) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
}

/* ---------- 1. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video, iframe, canvas { max-width: 100%; }
img { display: block; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul, ol { margin: 0; padding: 0; }
:where(a) { color: var(--teal-ink); text-decoration: none; }
:where(a):hover { color: color-mix(in srgb, var(--teal-ink) 78%, #000); }

/* ---------- 2. Container ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--ink); font-weight: 700; line-height: 1.15; text-wrap: balance; }
h1 { font-size: 56px; letter-spacing: -0.02em; }
h2 { font-size: 40px; letter-spacing: -0.02em; }
h3 { font-size: 28px; letter-spacing: -0.01em; }
h4 { font-size: 20px; font-weight: 600; }
p { margin: 0; }
.lede { font-size: 20px; line-height: 1.5; color: var(--ink-2); max-width: 640px; text-wrap: pretty; }

/* Page-hero H1 tier (fluid → 56 max) */
.cvh-h1, .pg-h1, .cs-title, .st-intro-h { font-size: var(--fs-hero); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }

/* Section H2 tier (40/700) */
.section-title, .pg-h2, .vp-h, .final-cta-h, .trust-h, .comm-cta-h, .st-h, .st-intro-h,
.zz-h, .we-bigh, .pf-title, .pex-h, .cmh-wa-h,
.pricing-h2, .faq-h { font-size: 40px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }

/* Sub-section / feature H3 tier (28/700) */

/* Card headings H4 tier (20/600) */
.nurture-h, .cmh-news-title, .team-name, .plan-name, .res-card h3, .we-title, .si-title,
.trust-point h3, .vp-pf-block h3, .pl-afford-card h3, .flow-row h3, .about-triad-col h3,
.pex-card h3, .pfaq-q, .legal-h, .proof-card h4, .cust-story-org, .zz-media + * h3,
.prf-quote, .hc-quote p, .imx-tile-label, .contact-method a
{ font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }

/* Lead / intro paragraphs (18) */

/* Body copy (18/1.6) */
.vp-card-p, .md-card-body, .nurture-p, .about-p, .zz-p, .faq-a, .res-card p, .proof-card p,
.plan-desc, .plan-features li, .pex-card p, .pfaq-a, .legal-block p, .legal-list li,
.we-desc, .we-row-d, .csf-copy, .cmh-news-desc, .why-copy p, .pl-afford-card p,
.st-body, .flow-row p, .imx-seq-card p, .about-triad-col p
{ font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 66ch; }

/* Small / caption (14) */
.team-role, .team-li, .price-note, .si-pill, .csf-metric-cap, .cmh-news-tagline,
.fx-sub-note, .imx-seq-cap, .pricing-region-note, .plan-note, .fx-brand-col p
{ font-size: 14px; line-height: 1.5; }

/* Eyebrows / labels — uppercase, teal-ink (AA on white) */
.cvh-eyebrow, .pg-eyebrow, .nurture-label, .prf-stat-overline, .st-label, .st-intro-eyebrow,
.imx-seq-step, .tc-eyebrow, .final-cta-eyebrow, .cmh-eyebrow, .ll-eyebrow, .pf-eyebrow,
.we-panel-tag, .csf-eyebrow, .faq-cat, .marquee-label, .cust-ba-label,
.hdh-eyebrow, .hdh-cat {
  font-family: "Inter", sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1.4; color: var(--teal-ink);
}

/* ---------- Accent word: ONE per H1/H2 — teal colour only, NEVER underlined ---------- */
.hl-underline, .cvh-hl, .pf-title-hl, .cmh-wa-h .hl-underline {
  white-space: nowrap;
  color: var(--teal-ink);
  -webkit-text-fill-color: var(--teal-ink);
  font-style: normal; font-weight: inherit;
}

/* Body links (the only place body text turns teal) */
p a, li a, .section-sub a, .cvh-sub a, .nurture-p a, .zz-p a, .faq-a a, .legal-block p a {
  color: var(--teal-ink); text-decoration: underline; text-underline-offset: 2px;
}
p a:hover, li a:hover, .section-sub a:hover, .cvh-sub a:hover { color: color-mix(in srgb, var(--teal-ink) 78%, #000); }
p strong, li strong { font-weight: 600; color: inherit; }

/* ---------- 4. Buttons ---------- */
.btn, .cmh-btn, .pg-btn, .hero-cta-primary, .hero-cta-secondary,
.vp-section-cta, .si-readall, .nurture-btn, .comm-cta-btn, .webinar-register, .pf-cta,
.final-cta-btn, .final-cta-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Inter", sans-serif; font-weight: 600; font-size: 15px;
  padding: 13px 26px; border-radius: var(--r-pill);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1.5px solid transparent;
  transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn svg, .cmh-btn svg, .pf-cta svg, .webinar-register svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Primary — teal pill, white text */
.btn-primary, .btn-teal, .cmh-btn-primary, .hero-cta-primary, .pg-btn:not(.pg-btn-ghost),
.vp-section-cta, .si-readall, .nurture-btn, .comm-cta-btn, .webinar-register, .pf-cta {
  background: var(--teal-ink); color: #fff; border-color: transparent;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover, .btn-teal:hover, .cmh-btn-primary:hover, .hero-cta-primary:hover,
.pg-btn:not(.pg-btn-ghost):hover, .vp-section-cta:hover, .si-readall:hover, .nurture-btn:hover,
.comm-cta-btn:hover, .webinar-register:hover, .pf-cta:hover {
  background: color-mix(in srgb, var(--teal-ink) 80%, #000); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md);
}
/* arrow for text-only primaries */
.btn.btn-primary::after, .pg-btn:not(.pg-btn-ghost)::after, .nurture-btn::after { content: "→"; font-weight: 600; transition: transform var(--dur) var(--ease); }
.btn.btn-primary:hover::after, .pg-btn:not(.pg-btn-ghost):hover::after, .nurture-btn:hover::after { transform: translateX(3px); }

/* Secondary — white pill, navy text, hairline border */
.btn-ghost, .btn-secondary, .cmh-btn-ghost, .hero-cta-secondary, .pg-btn-ghost {
  background: var(--surface-0); color: var(--ink);
  border: 1.5px solid color-mix(in srgb, var(--ink) 16%, #fff);
}
.btn-ghost:hover, .btn-secondary:hover, .cmh-btn-ghost:hover, .hero-cta-secondary:hover, .pg-btn-ghost:hover {
  border-color: var(--teal); background: var(--surface-1); color: var(--ink); transform: translateY(-1px);
}
.pg-btn-ghost::after { content: none; }
.cmh-btn-sm { font-size: 14px; padding: 11px 22px; }

/* ---------- 5. Section utilities ---------- */
.section { padding: var(--section-pad) 0; position: relative; }
.section-head { margin: 0 auto 32px; max-width: 760px; }
/* Widened so section descriptions set in two lines without touching the copy (Stuti,
   7 Aug: fix by widening the container, never by editing copy). The heading keeps its own
   narrower measure so only the description gets the extra width. */
.section-head-center { text-align: center; max-width: 1120px; margin: 0 auto 32px; }
.section-head-center .section-title { max-width: var(--measure-heading-wide); margin-left: auto; margin-right: auto; }
.section-head-center .section-sub { margin: 16px auto 0; max-width: 1080px; }
.section-head-center .se-sub { max-width: 1080px; }
.cvc-section .section-head-center { max-width: none; }

/* ---------- 6. Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease); }
.nav.scrolled { border-bottom-color: var(--hairline); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.nav-left { display: flex; align-items: center; gap: 36px; }
.nav-logo { display: inline-flex; align-items: center; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-link { position: relative; display: inline-flex; align-items: center; color: var(--ink); font-size: 15px; font-weight: 500; padding: 8px 0; transition: color var(--dur-fast) var(--ease); }
.nav-link:hover { color: var(--teal-ink); }
.nav-link.is-active { color: var(--teal-ink); font-weight: 600; }
.nav-link.is-active::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: -8px; height: 2px; background: var(--teal); border-radius: 2px; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-right .btn { padding: 10px 20px; font-size: 15px; }
/* Dropdown */
.nav-dd { position: relative; display: inline-flex; }
.nav-dd-trigger { display: inline-flex; align-items: center; gap: 5px; }
.nav-dd-caret { width: 13px; height: 13px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: transform var(--dur) var(--ease); }
.nav-dd:hover .nav-dd-caret, .nav-dd-trigger.is-open .nav-dd-caret { transform: rotate(180deg); }
.nav-dd-menu { position: absolute; top: 100%; left: 0; min-width: 210px; background: var(--surface-0); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast) var(--ease); z-index: 60; }
.nav-dd:hover .nav-dd-menu, .nav-dd-menu.is-open, .nav-dd:focus-within .nav-dd-menu { opacity: 1; visibility: visible; transform: translateY(4px); }
.nav-dd-menu a { display: block; padding: 9px 12px; border-radius: var(--r-sm); font-size: 14px; color: var(--ink); }
.nav-dd-menu a:hover { background: var(--surface-1); color: var(--teal-ink); }
/* Resources panel — grouped columns with descriptions + ONE featured card (psychology #3, #4, #10) */
#nav-dd-resources { display: flex; gap: 8px; min-width: 480px; padding: 14px; }
.nav-dd-col { display: flex; flex-direction: column; gap: 2px; min-width: 220px; }
.nav-dd-col-label { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding: 6px 12px 8px; }
.nav-dd-menu a.nav-dd-item { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; }
.nav-dd-item-t { font-weight: 600; font-size: 14px; color: var(--ink); }
.nav-dd-item-d { font-size: 12.5px; color: var(--ink-2); }
.nav-dd-menu a.nav-dd-featcard { display: flex; flex-direction: column; gap: 6px; padding: 9px 12px; max-width: 264px; border-radius: var(--r-md); }
.nav-dd-menu a.nav-dd-featcard:hover .nav-dd-feattitle { color: var(--teal-ink); }
.nav-dd-featimg { position: relative; display: block; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 800 / 420; background: var(--surface-1); margin-bottom: 4px; }
.nav-dd-featimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-dd-featimg .nav-dd-feattag { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,.92); border-radius: var(--r-pill); padding: 3px 9px; }
.nav-dd-feattag { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-ink); }
.nav-dd-feattitle { font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.nav-dd-featdate { font-size: 12.5px; color: var(--ink-2); }
.nav-dd-featkicker { display: block; margin-top: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-ink); }
.nav-dd-featblurb { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.nav-dd-featcta { font-size: 13px; font-weight: 600; color: var(--teal-ink); margin-top: 3px; }
/* Mobile chrome hidden on desktop */
.nav-burger { display: none; }
.nav-mobile, .nav-scrim { display: none; }

/* ---------- 7. SiteHero (.cvh) ---------- */
.cvh { background: var(--surface-0); border-bottom: 1px solid var(--hairline); padding: var(--section-pad-sm) 0; }
/* Consistent hero height across ALL pages → no vertical jump when switching nav tabs.
   The floor sits just above the tallest hero copy (Consulting, ~417px); shorter heroes
   grow to match and centre their content. Mobile drops the floor (heroes stack). */
.cvh-grid { max-width: var(--container); margin: 0 auto; padding: 0 clamp(24px, 5vw, 32px); display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(40px, 5vw, 72px); align-items: start; min-height: 440px; }
/* Copy is TOP-aligned in every hero so the eyebrow starts at the same y on every page.
   With align-items:center the start position depended on how tall that page's copy was,
   so the eyebrow sat anywhere from 32px to 125px down and the fold jumped between tabs.
   The figure keeps its own align-self:center, so the image is unaffected. */
/* Solo heroes (no right-hand visual — About/FAQ/Pricing/Case Studies): their own
   consistent, shorter floor so they equalise with each other without inheriting the
   tall visual-hero height (which would leave a big empty band under short copy).
   Top-aligned so the heading sits naturally under the nav. */
.cvh-grid-solo { grid-template-columns: 1fr; align-items: start; min-height: 300px; }
/* Cap the text measure on solo heroes. Without this the copy column ran the full 1136px
   while visual heroes sit at 597px, so the headline measure nearly doubled when switching
   tabs — the width jump. 720px keeps the longest solo H1 (case-studies, 484px) comfortable
   while landing close to the visual tier. */
.cvh-grid-solo .cvh-copy { max-width: 720px; }
.cvh-copy { min-width: 0; }
.cvh-eyebrow { margin-bottom: 18px; }
.cvh-h1 { margin: 0 0 20px; }
.cvh-sub { max-width: var(--measure-hero-sub); margin: 0 0 32px; }
.cvh-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.cvh-help { margin: 22px 0 0; font-size: 14px; color: var(--ink-2); }
.cvh-help a { color: var(--teal-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cvh-visual { position: relative; min-width: 0; align-self: center; }
.cvh-figure { position: relative; width: 100%; max-width: 512px; margin-left: auto; aspect-ratio: 4/3; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.cvh-figure img { width: 100%; height: 100%; object-fit: cover; }
/* Illustration hero (product): wider ratio so the mint-gradient artwork isn't cropped;
   softer elevation because it's a graphic, not a photo. */
.cvh-figure-illus { aspect-ratio: 16 / 10; box-shadow: var(--shadow-card); background: var(--surface-1); }
.cvh-figure-illus img { object-fit: cover; }
/* End-to-end frame (consulting): the photo panel stretches to the full height of the
   copy column and fills its column width edge-to-edge — a bolder, framed portrait. */
.cvh-grid:has(.cvh-visual-cover) { align-items: stretch; }
.cvh-visual-cover { align-self: stretch; display: flex; }
.cvh-figure-cover { max-width: none; aspect-ratio: auto; height: 100%; min-height: 380px; }
/* Community-hero collage */
.cvh-collage { position: relative; height: 540px; }
.cvh-card { position: absolute; border-radius: var(--r-md); overflow: hidden; background: var(--surface-0); box-shadow: var(--shadow-lg); }
.cvh-card img { width: 100%; height: 100%; object-fit: cover; }
.cvh-c1 { width: 56%; aspect-ratio: 16/9; top: 2%; left: 0; transform: rotate(-3deg); z-index: 1; }
.cvh-c2 { width: 64%; aspect-ratio: 16/9; top: 22%; right: 0; transform: rotate(2deg); z-index: 3; }
.cvh-c3 { width: 46%; aspect-ratio: 4/3; top: 48%; left: 1%; transform: rotate(-2deg); z-index: 2; }
.cvh-note { position: absolute; top: 0; right: 5%; z-index: 4; display: inline-flex; align-items: center; gap: 8px; background: var(--note-bg); border: 1px solid var(--note-border); border-radius: var(--r-md); padding: 11px 15px; transform: rotate(2.5deg); font-weight: 600; font-size: 12.5px; color: var(--note-ink); box-shadow: var(--shadow-md); }
.cvh-note svg { width: 15px; height: 15px; fill: none; stroke: var(--note-accent); stroke-width: 1.8; stroke-linecap: round; }
.cvh-wa { width: 60%; right: 2%; bottom: 0; z-index: 4; transform: rotate(1deg); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; overflow: visible; }
.cvh-wa-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12.5px; color: var(--ink); padding-bottom: 8px; border-bottom: 1px solid var(--hairline); }
.cvh-wa-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wa-green); }
.cvh-wa-msg { display: flex; align-items: flex-end; gap: 8px; }
.cvh-wa-me { justify-content: flex-end; }
.cvh-wa-av { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: inline-grid; place-items: center; color: #fff; font-weight: 700; font-size: 10px; letter-spacing: .02em; }
.cvh-wa-bubble { background: var(--surface-2); border-radius: 12px 12px 12px 3px; padding: 8px 12px; font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.cvh-wa-bubble-me { background: color-mix(in srgb, var(--teal) 16%, #fff); border-radius: 12px 12px 3px 12px; }
.cvh-avs { position: absolute; left: 3%; bottom: 3%; z-index: 5; display: inline-flex; align-items: center; gap: 10px; background: var(--surface-0); border-radius: var(--r-pill); padding: 8px 16px 8px 10px; font-weight: 600; font-size: 12.5px; color: var(--ink); box-shadow: var(--shadow-md); }
.cvh-avs-stack { display: inline-flex; }
.cvh-avs-stack .cvh-wa-av { border: 2px solid #fff; }
.cvh-avs-stack .cvh-wa-av + .cvh-wa-av { margin-left: -8px; }

/* WhatsApp group thumbnail (community page). Single card, not a split panel: the
   section heading beside it already says "Dalgo Data Community on WhatsApp", so a
   titled left half repeated the same line. The Dalgo logo carries the brand instead,
   and the card stretches to the copy column so the two sides finish level. */
.cmh-wa-panel { flex: 0 0 clamp(300px, 40%, 460px); align-self: stretch; display: flex; flex-direction: column; background: var(--surface-1); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.cmh-wa-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; background: var(--surface-0); border-bottom: 1px solid var(--hairline); }
.cmh-wa-panel-logo { height: 26px; width: auto; display: block; }
.cmh-wa-panel-pill { flex-shrink: 1; background: var(--teal); color: var(--navy); font-size: 10.5px; font-weight: 700; letter-spacing: .01em; line-height: 1.25; padding: 6px 10px; border-radius: var(--r-pill); text-align: center; }
.cmh-wa-thread { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 20px 18px; }
.cmh-wa-b { max-width: 86%; background: var(--surface-0); color: var(--ink); font-size: 13px; line-height: 1.4; padding: 10px 13px; border-radius: 12px 12px 12px 3px; box-shadow: var(--shadow-sm); align-self: flex-start; }
.cmh-wa-b-me { background: var(--teal-ink); color: #fff; border-radius: 12px 12px 3px 12px; align-self: flex-end; box-shadow: none; }
.cmh-wa-typing { align-self: flex-start; display: inline-flex; gap: 4px; background: var(--surface-0); padding: 10px 12px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm); }
.cmh-wa-typing i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 34%, #fff); }
@media (max-width: 720px) { .cmh-wa-panel { flex-basis: auto; width: 100%; } }



/* ---------- 8. Collage / product visual / triad / portrait ---------- */
.hc-avs-stack { display: inline-flex; }
.hc-avs-av { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-weight: 700; font-size: 10.5px; letter-spacing: .02em; border: 2px solid #fff; }
/* Initial-avatar palette (tokens) — replaces per-span inline backgrounds */
.av-blue { background: var(--avatar-blue); }
.av-rust { background: var(--avatar-rust); }
.av-pine { background: var(--avatar-pine); }
.av-violet { background: var(--avatar-violet); }
.hc-avs-av + .hc-avs-av { margin-left: -10px; }
.pv { position: relative; max-width: 560px; margin: 0 auto; }
.pv-main { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-0); box-shadow: var(--shadow-lg); display: block; position: relative; }
.pv-main img { display: block; width: 100%; height: auto; }
.pv-pill { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; background: var(--surface-0); border-radius: var(--r-pill); padding: 9px 15px; font-weight: 600; font-size: 12.5px; color: var(--ink); box-shadow: var(--shadow-md); }
.pv-pill-tr { top: -16px; right: -8px; } .pv-pill-bl { bottom: -16px; left: -8px; }
.pv-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.about-triad { background: var(--surface-0); padding: clamp(48px, 6vw, 72px) 0; }
.about-triad-inner { max-width: var(--container); margin: 0 auto; padding: 0 clamp(24px, 5vw, 32px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 52px); }
.about-triad-col { border-top: 2px solid var(--teal); padding-top: 22px; }
.about-triad-col h3 { margin: 0 0 12px; }
.about-triad-col p { margin: 0; }
.impact-portrait { position: relative; width: 100%; max-width: 440px; margin-left: auto; }
.ip-photo { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--shadow-lg); }
.ip-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 26%; }
.ip-chip { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 7px; background: var(--surface-0); border-radius: var(--r-pill); padding: 8px 14px; font-weight: 700; font-size: 13.5px; color: var(--ink); box-shadow: var(--shadow-md); }
.ip-chip svg { width: 15px; height: 15px; fill: none; stroke: var(--teal); stroke-width: 2.2; }
.ip-quote { margin: 0; background: var(--surface-0); border-radius: var(--r-xl); padding: 40px 40px 32px; box-shadow: var(--shadow-lg); }
.ip-mark { display: block; font-weight: 700; font-size: 60px; line-height: .6; color: var(--teal-ink); margin-bottom: 14px; }
.ip-quote p { font-weight: 600; font-size: 20px; line-height: 1.5; color: var(--ink); margin: 0 0 26px; }
.ip-attr { display: flex; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.ip-av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.ip-who { display: flex; flex-direction: column; line-height: 1.25; }
.ip-who strong { font-weight: 700; font-size: 15px; color: var(--ink); }
.ip-org { font-size: 13px; color: var(--ink-2); }
.hero-photo { position: relative; width: 100%; max-width: 480px; margin-left: auto; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.hero-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 18px 14px; font-size: 13.5px; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(10,37,64,.74)); }

/* ---------- 9. Stories carousel (.fc) — clean auto-advancing showcase ---------- */
.fc { position: relative; max-width: var(--container); margin: 0; }
.hero-carousel { position: relative; margin-top: 18px; }
.hero-carousel .fc { max-width: 100%; }
.fc-stage { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.fc-track { display: flex; height: 100%; will-change: transform; transition: transform .8s cubic-bezier(.4, 0, .2, 1); }
.fc-track.no-anim { transition: none; }
.fc-slide { flex: 0 0 100%; height: 100%; }
.fc-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-playpause { position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hairline); background: var(--surface-0); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.fc-playpause svg { fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .fc-track { transition: none; } }

/* ---------- 10. Marquee ---------- */
.marquee-wrap { padding: var(--section-pad-sm) 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.marquee-label { text-align: center; color: color-mix(in srgb, var(--ink-2) 82%, #fff); margin-bottom: 32px; }
.logo-marquee { 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); }
/* Seamless loop: tiles have a FIXED width, so the track is exactly 2 identical sets and
   translateX(-50%) lands precisely on one set — no jump, no gap, and (crucially) the geometry
   does NOT depend on images loading. GPU-composited. */
.logo-marquee-track { display: flex; align-items: center; width: max-content; animation: logoScroll 55s linear infinite; will-change: transform; }
@keyframes logoScroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
/* Fixed-width slots → uniform spacing, load-independent layout, centered logos. */
.logo-tile { flex: 0 0 auto; width: 190px; height: 44px; display: grid; place-items: center; }
/* Monochrome logo wall — TWO measured treatments (see Marquee.jsx header):
   default = SILHOUETTE (brightness(0)) so pale wordmarks (TAP/Antarang/MAD) are visible;
   .is-solid = GRAYSCALE for filled emblems (SHOFCO/Ummeed/Baala/Dasra) that would
   otherwise collapse to black blobs. Both land at a similar grey weight. */
.logo-tile .logo-img { height: 34px; width: auto; max-width: 150px; object-fit: contain; filter: brightness(0); opacity: 0.55; }
.logo-tile .logo-img.is-solid { filter: grayscale(1) contrast(1.02); opacity: 0.72; }

/* ---------- 10b. How Dalgo Helps (solution cards) ---------- */
.hdh-section { padding: var(--section-pad) 0; }
.hdh-eyebrow { margin: 0 0 12px; }
.hdh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.hdh-card { display: flex; flex-direction: column; overflow: hidden; background: var(--surface-0); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.hdh-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); border-color: color-mix(in srgb, var(--ink) 12%, #fff); }
.hdh-thumb { aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-2); }
.hdh-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hdh-body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 26px; gap: 10px; }
.hdh-cat { margin: 0; }
.hdh-title { font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--ink); margin: 2px 0 0; }
.hdh-text { color: var(--ink-2); line-height: 1.6; margin: 0; flex: 1; }
.hdh-cta { align-self: flex-start; margin-top: 6px; }
@media (max-width: 900px) { .hdh-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .hdh-grid { grid-template-columns: 1fr; } }

/* ---------- 11. Proof collage ---------- */
.pcx-section { background: var(--surface-0); padding: var(--section-pad) 0; }
.pcx-grid { display: grid; grid-template-columns: 1fr 1fr 0.86fr; gap: 22px; align-items: stretch; }
.prf-card { border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; background: var(--surface-0); box-shadow: var(--shadow-md); }
.prf-media { position: relative; aspect-ratio: 16/11; overflow: hidden; background: var(--surface-1); }
.prf-media img { width: 100%; height: 100%; object-fit: cover; }
.prf-chip { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; background: var(--surface-0); border-radius: var(--r-md); padding: 9px 13px; box-shadow: var(--shadow-md); }
.prf-chip img { height: 22px; width: auto; max-width: 110px; object-fit: contain; }
.prf-chip-dark { background: var(--navy); }
.prf-panel { flex: 1; display: flex; flex-direction: column; padding: 28px 26px 26px; background: color-mix(in srgb, var(--teal) 10%, #fff); }
.prf-quote { font-size: 18px; line-height: 1.44; font-weight: 600; color: var(--ink); margin: 0 0 22px; text-wrap: pretty; }
.prf-mark { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--teal) 22%, transparent) 0); color: var(--teal-ink); font-weight: 700; padding: 0 1px; }
.prf-meta { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.prf-who { font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.prf-stat { background: color-mix(in srgb, var(--teal) 10%, #fff); color: var(--ink); padding: 36px 30px; display: flex; flex-direction: column; }
.prf-metrics { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.prf-metric { display: flex; align-items: center; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--hairline); }
.prf-metric:last-child { border-bottom: 0; }
.prf-metric-chip { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--surface-0); display: grid; place-items: center; padding: 7px; box-shadow: var(--shadow-sm); }
.prf-metric-chip img { max-width: 100%; max-height: 100%; object-fit: contain; }
.prf-metric-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.prf-metric-delta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 4px; min-width: 0; }
.prf-metric-from { font-size: 15px; font-weight: 500; color: color-mix(in srgb, var(--ink-2) 80%, #fff); text-decoration: line-through; white-space: nowrap; }
.prf-metric-arw { width: 20px; height: 20px; fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.prf-metric-to { font-size: clamp(24px, 1.9vw, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; color: var(--ink); white-space: nowrap; }
.prf-metric-cap { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.vp-cta-row, .si-cta-row { display: flex; justify-content: center; margin-top: 40px; }

/* ---------- 12. Case feature + proof cards ---------- */
.cs-section { padding: var(--section-pad) 0; background: var(--surface-0); }
.cs-head { margin-bottom: 44px; }
.csf { margin-top: 8px; position: relative; }
.csf-tabs { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--hairline); margin-bottom: 44px; }
.csf-tab { background: none; border: 0; cursor: pointer; padding: 14px 22px 16px; border-bottom: 2.5px solid transparent; margin-bottom: -1px; filter: grayscale(1); opacity: .55; transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.csf-tab img { height: 34px; width: auto; max-width: 120px; object-fit: contain; }
.csf-tab:hover { filter: none; opacity: 1; }
.csf-tab.is-active { filter: none; opacity: 1; border-bottom-color: var(--teal); }
.csf-stage { position: relative; }
.csf-panel { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: center; animation: csfFade var(--dur-slow) var(--ease) both; }
@keyframes csfFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.csf-media { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--hairline); background: var(--surface-1); }
.csf-media img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.csf-logo { height: 36px; width: auto; max-width: 140px; object-fit: contain; margin-bottom: 18px; }
.csf-headline { margin: 0 0 14px; }
.csf-copy { margin: 0 0 22px; max-width: 54ch; }
.csf-readlink { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 15.5px; color: var(--teal-ink); text-decoration: none; margin-bottom: 34px; }
.csf-readlink svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--dur) var(--ease); }
.csf-readlink:hover svg { transform: translateX(3px); }
.csf-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.csf-metric-value { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.csf-metric-before { font-weight: 700; font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -0.02em; color: color-mix(in srgb, var(--ink-2) 80%, #fff); line-height: 1.1; white-space: nowrap; }
.csf-metric-value svg { width: 16px; height: 16px; fill: none; stroke: color-mix(in srgb, var(--teal) 45%, #fff); stroke-width: 2.2; align-self: center; }
.csf-metric-after { font-weight: 700; font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -0.02em; color: var(--teal-hover); line-height: 1.1; }
.csf-metric-cap { font-size: 13.5px; color: var(--ink-2); margin-top: 5px; }
.csf-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-0); box-shadow: var(--shadow-sm); cursor: pointer; opacity: .45; transition: opacity var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); z-index: 3; }
.csf-nav:hover { opacity: 1; border-color: var(--teal); }
.csf-nav svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.csf-nav-prev { left: -22px; } .csf-nav-next { right: -22px; }
/* Play/Pause toggle for the story rotation (was inline-styled) */
.csf-playpause { margin-left: 8px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hairline); background: var(--surface-0); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.csf-playpause svg { fill: var(--ink); }
.csf-playpause:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.si-readall { color: #fff; }
/* Impact / case thumbnail grid */
.si-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.si-card { display: flex; flex-direction: column; background: var(--surface-0); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; text-decoration: none; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.si-card:hover { transform: translateY(-4px); border-color: var(--teal); box-shadow: var(--shadow-pop); }
.si-thumb { aspect-ratio: 16/11; background: var(--surface-1); overflow: hidden; }
.si-thumb img { width: 100%; height: 100%; object-fit: cover; }
.si-thumb img[src*="image-1-1"] { object-fit: contain; background: #fff; padding: 6px; }
.si-body { padding: 18px 18px 20px; gap: 8px; display: flex; flex-direction: column; flex: 1; }
.si-kicker { color: var(--teal-ink); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.si-title { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }
.si-desc { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.si-readmore { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 6px; color: var(--teal-ink); font-size: 13.5px; font-weight: 600; }
.si-readmore svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform var(--dur) var(--ease); }
.si-card:hover .si-readmore svg { transform: translateX(3px); }

/* ---------- 13. Lifecycle loop ---------- */
.ll-section { background: var(--surface-0); padding: clamp(64px, 8vw, 104px) 0; }
.ll-head { max-width: 900px; margin: 0 auto clamp(44px, 5vw, 66px); text-align: center; padding: 0 24px; }
.ll-h { margin: 0 0 16px; font-size: clamp(28px, 3vw, 40px); }
.ll-sub { margin: 0 auto; max-width: 620px; }
.ll-wrap { max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.ll-grid { display: grid; grid-template-columns: 1fr 56px 1fr 56px 1fr; grid-template-rows: auto 54px auto; grid-template-areas: "aP aT1 aC aT2 aS" "aL . . . aR" "aA aB1 aV aB2 aCl"; gap: 16px 6px; align-items: stretch; }
.ll-card { position: relative; min-width: 0; background: var(--surface-0); border-radius: var(--r-md); padding: 22px 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px; }
.ll-dot { position: absolute; top: 13px; right: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 14%, transparent); }
.ll-ico { width: 44px; height: 44px; border-radius: var(--r-md); background: color-mix(in srgb, var(--teal) 10%, #fff); display: grid; place-items: center; flex-shrink: 0; }
.ll-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ll-name { font-weight: 700; font-size: 17px; color: var(--ink); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ll-cap { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.ll-chip { display: inline-flex; align-items: center; font-weight: 700; font-size: 10.5px; letter-spacing: .03em; color: var(--teal-ink); background: color-mix(in srgb, var(--teal) 12%, #fff); border: 1px solid color-mix(in srgb, var(--teal) 35%, #fff); border-radius: var(--r-pill); padding: 3px 9px; }
.ll-card--handoff { background: var(--surface-2); border: 1.5px dashed color-mix(in srgb, var(--ink) 18%, #fff); box-shadow: none; }
.ll-ico--handoff { background: var(--surface-2); border: 1px dashed color-mix(in srgb, var(--ink) 18%, #fff); }
.ll-ico--handoff svg { stroke: color-mix(in srgb, var(--ink-2) 70%, #fff); }
.ll-tools { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.ll-tool { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-0); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 4px 9px 4px 7px; font-size: 12px; font-weight: 600; color: var(--ink); }
.ll-tool img { width: 15px; height: 15px; object-fit: contain; }
.ll-ar { display: flex; align-items: center; justify-content: center; }
.ll-ar svg { width: 44px; height: 24px; overflow: visible; fill: none; }
.ll-ar line, .ll-ar path { stroke-width: 2.2; }
.ll-ar path { fill: none; }
.ll-ar--flow svg { stroke: var(--teal); }
.ll-ar--handoff svg { stroke: color-mix(in srgb, var(--ink) 30%, #fff); }
.ll-ar--handoff line { stroke-dasharray: 4 4; }
.ll-ar--loop svg { stroke: color-mix(in srgb, var(--teal) 55%, #fff); }
.ll-ar--loop line { stroke-dasharray: 4 4; }
.ll-ar--left svg { transform: rotate(180deg); } .ll-ar--down svg { transform: rotate(90deg); } .ll-ar--up svg { transform: rotate(-90deg); }
.ll-loopnote { display: none; align-items: center; justify-content: center; gap: 8px; margin-top: 26px; font-weight: 600; font-size: 13px; color: var(--teal-ink); }
.ll-loopnote svg { width: 17px; height: 17px; fill: none; stroke: var(--teal); stroke-width: 2; }
.ll-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px; margin-top: 30px; }
.ll-legend-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.ll-legend-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 14%, transparent); }
.ll-legend-box { width: 14px; height: 14px; border-radius: 4px; background: var(--surface-2); border: 1.5px dashed color-mix(in srgb, var(--ink) 18%, #fff); }
/* Grid-area placement lives on classes (not inline) so the ≤980 single-column stack wins by cascade */
@media (min-width: 981px) {
  .ll-aP { grid-area: aP; } .ll-aC { grid-area: aC; } .ll-aS { grid-area: aS; } .ll-aCl { grid-area: aCl; } .ll-aV { grid-area: aV; } .ll-aA { grid-area: aA; }
  .ll-aT1 { grid-area: aT1; } .ll-aT2 { grid-area: aT2; } .ll-aR { grid-area: aR; } .ll-aB2 { grid-area: aB2; } .ll-aB1 { grid-area: aB1; } .ll-aL { grid-area: aL; }
}

/* ---------- 14. Trust band ---------- */

/* ---------- 15. Nurture / community cards ---------- */

/* ---------- 16. Final CTA ---------- */

/* From the Consultant's Desk — Embla carousel (touch/mouse drag, momentum, snap) */
/* Viewport + track */

/* Card — a strict two-zone grid so the carousel reads as a clean structured row:
   [body: grows] + [attribution: FIXED height]. Because the attribution zone is a fixed height
   anchored to the bottom, its divider sits on the SAME baseline on every card regardless of
   quote length. Uniform full-width text cards — one consistent structure for every testimonial. */

/* Occasional accent card — subtle surface tint only, for rhythm. */

/* Testimonial carousel internals (restored) */
/* Top region — head, tag, quote. Grows to fill; the quote holds the slack so short and long
   testimonials both leave the divider on the same baseline. */

/* Head — reduced logo + subtle quote mark, top row. */

/* Attribution — fixed-height zone at the bottom; round avatar (where a portrait exists) beside
   name / role / org on three lines. Fixed height keeps the divider aligned across ALL cards. */

/* Dots */

@media (max-width: 900px) { .cvc-slide { width: clamp(300px, 64%, 372px); } }
@media (max-width: 600px) {
  .cvc-slide { width: 88%; }
  .cvc-card { --cvc-attr-h: 104px; }
  .cvc-body { padding: 24px 22px 0; }
  .cvc-attr { margin: 0 22px; }
}

/* ---------- 13. Lifecycle loop ---------- */
/* Grid-area placement lives on classes (not inline) so the ≤980 single-column stack wins by cascade */
@media (min-width: 981px) {
  .ll-aP { grid-area: aP; } .ll-aC { grid-area: aC; } .ll-aS { grid-area: aS; } .ll-aCl { grid-area: aCl; } .ll-aV { grid-area: aV; } .ll-aA { grid-area: aA; }
  .ll-aT1 { grid-area: aT1; } .ll-aT2 { grid-area: aT2; } .ll-aR { grid-area: aR; } .ll-aB2 { grid-area: aB2; } .ll-aB1 { grid-area: aB1; } .ll-aL { grid-area: aL; }
}

/* ---------- 14. Trust band ---------- */

/* ---------- 15. Nurture / community cards ---------- */

/* ---------- 16. Final CTA ---------- */

/* From the Consultant's Desk — Embla carousel (touch/mouse drag, momentum, snap) */
/* Viewport + track */

/* Card — a strict two-zone grid so the carousel reads as a clean structured row:
   [body: grows] + [attribution: FIXED height]. Because the attribution zone is a fixed height
   anchored to the bottom, its divider sits on the SAME baseline on every card regardless of
   quote length. Uniform full-width text cards — one consistent structure for every testimonial. */

/* Occasional accent card — subtle surface tint only, for rhythm. */

/* Testimonial carousel internals (restored) */
/* Top region — head, tag, quote. Grows to fill; the quote holds the slack so short and long
   testimonials both leave the divider on the same baseline. */
.cvc-body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 28px 28px 0; min-width: 0; }
/* Head — reduced logo + subtle quote mark, top row. */
.cvc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 30px; margin-bottom: 16px; }
.cvc-logo { height: 30px; width: auto; max-width: 116px; object-fit: contain; object-position: left center; }
.cvc-org-top { font-weight: 700; font-size: 16px; color: var(--ink); letter-spacing: -0.01em; }
.cvc-mark { font-weight: 700; font-size: 34px; line-height: .6; color: color-mix(in srgb, var(--teal) 42%, #fff); }
.cvc-tag { margin: 0 0 12px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-ink); }
.cvc-quote { margin: 0; font-size: 16.5px; line-height: 1.62; color: var(--ink); flex: 1 1 auto; text-wrap: pretty; }
.cvc-quote strong { font-weight: 600; color: var(--ink); }
/* Attribution — fixed-height zone at the bottom; round avatar (where a portrait exists) beside
   name / role / org on three lines. Fixed height keeps the divider aligned across ALL cards. */
.cvc-attr { flex: 0 0 auto; box-sizing: border-box; height: var(--cvc-attr-h); margin: 0 28px; padding-top: 20px; border-top: 1px solid var(--hairline); display: flex; flex-direction: row; align-items: center; gap: 13px; }
.cvc-avatar { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--surface-2); box-shadow: 0 0 0 1px var(--hairline); }
.cvc-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cvc-name { font-weight: 600; font-size: 15px; color: var(--ink); }
.cvc-desig { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.cvc-orgname { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
/* Dots */
.cvc-dots { display: flex; justify-content: center; gap: 0; margin-top: 32px; }
/* Button is a 24x24 hit area (WCAG 2.2 AA 2.5.8); the visible dot is the ::before,
   so the 8px dot / 26px active pill look is unchanged. gap:0 keeps 24px centre-to-centre. */
.cvc-dot { width: 24px; height: 24px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; transition: width var(--dur) var(--ease); }
.cvc-dot::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 18%, #fff); transition: width var(--dur) var(--ease), background var(--dur) var(--ease), border-radius var(--dur) var(--ease); }
.cvc-dot:hover::before { background: color-mix(in srgb, var(--ink) 34%, #fff); }
.cvc-dot.on { width: 42px; }
.cvc-dot.on::before { width: 26px; border-radius: var(--r-pill); background: var(--teal-ink); }
.cvc-dot:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-pill); }
@media (max-width: 900px) { .cvc-slide { width: clamp(300px, 64%, 372px); } }
@media (max-width: 600px) {
  .cvc-slide { width: 88%; }
  .cvc-card { --cvc-attr-h: 104px; }
  .cvc-body { padding: 24px 22px 0; }
  .cvc-attr { margin: 0 22px; }
}

/* ---------- 13. Lifecycle loop ---------- */
/* Grid-area placement lives on classes (not inline) so the ≤980 single-column stack wins by cascade */
@media (min-width: 981px) {
  .ll-aP { grid-area: aP; } .ll-aC { grid-area: aC; } .ll-aS { grid-area: aS; } .ll-aCl { grid-area: aCl; } .ll-aV { grid-area: aV; } .ll-aA { grid-area: aA; }
  .ll-aT1 { grid-area: aT1; } .ll-aT2 { grid-area: aT2; } .ll-aR { grid-area: aR; } .ll-aB2 { grid-area: aB2; } .ll-aB1 { grid-area: aB1; } .ll-aL { grid-area: aL; }
}

/* ---------- 14. Trust band ---------- */

/* ---------- 15. Nurture / community cards ---------- */

/* ---------- 16. Final CTA ---------- */

/* From the Consultant's Desk — Embla carousel (touch/mouse drag, momentum, snap) */
/* Viewport + track */

/* Card — a strict two-zone grid so the carousel reads as a clean structured row:
   [body: grows] + [attribution: FIXED height]. Because the attribution zone is a fixed height
   anchored to the bottom, its divider sits on the SAME baseline on every card regardless of
   quote length. Uniform full-width text cards — one consistent structure for every testimonial. */

/* Occasional accent card — subtle surface tint only, for rhythm. */

/* ---------- 13. Lifecycle loop ---------- */
/* Grid-area placement lives on classes (not inline) so the ≤980 single-column stack wins by cascade */
@media (min-width: 981px) {
  .ll-aP { grid-area: aP; } .ll-aC { grid-area: aC; } .ll-aS { grid-area: aS; } .ll-aCl { grid-area: aCl; } .ll-aV { grid-area: aV; } .ll-aA { grid-area: aA; }
  .ll-aT1 { grid-area: aT1; } .ll-aT2 { grid-area: aT2; } .ll-aR { grid-area: aR; } .ll-aB2 { grid-area: aB2; } .ll-aB1 { grid-area: aB1; } .ll-aL { grid-area: aL; }
}

/* ---------- 14. Trust band ---------- */
.trust-section { padding: var(--section-pad) 0; background: var(--surface-0); }
.trust-section .container { max-width: var(--container); }
.trust-head { margin-bottom: 52px; }
.trust-link { display: inline-flex; align-items: center; gap: 8px; color: var(--teal-ink); font-weight: 600; font-size: 15px; text-decoration: none; }
.trust-link:hover { color: color-mix(in srgb, var(--teal-ink) 78%, #000); }
.trust-grid { display: grid; grid-template-columns: repeat(5, 1fr); background: color-mix(in srgb, var(--teal) 8%, #fff); border-radius: var(--r-lg); overflow: hidden; }
.trust-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 14px; padding: 40px 18px; border-right: 1px solid var(--hairline); text-decoration: none; }
.trust-cell:last-child { border-right: 0; }
.trust-cell-link:hover .trust-label { color: var(--teal-ink); }
.trust-ic { width: 52px; height: 52px; display: grid; place-items: center; }
.trust-ic svg { width: 40px; height: 40px; stroke: var(--ink); fill: none; stroke-width: 1.6; }
.trust-ic img { max-height: 52px; max-width: 52px; object-fit: contain; }
.trust-label { font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.trust-soon { position: absolute; top: 12px; right: 12px; background: color-mix(in srgb, var(--teal) 12%, #fff); color: var(--teal-ink); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--teal) 35%, #fff); }
.trust-dpdp { width: fit-content; max-width: 100%; margin: 32px auto 0; text-align: center; font-weight: 600; color: var(--ink); background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 18px 36px; }

/* ---------- 15. Nurture / community cards ---------- */
.nurture-section { padding: var(--section-pad-lg) 0; background: var(--surface-1); }
.nurture-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.nurture-grid-4 { grid-template-columns: repeat(4, 1fr); }
.nurture-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: var(--surface-0); box-shadow: var(--shadow-sm); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.nurture-card:hover { border-color: color-mix(in srgb, var(--ink) 12%, #fff); box-shadow: var(--shadow-pop); transform: translateY(-3px); }
.nurture-thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--navy-2); }
.nurture-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.nurture-card:hover .nurture-thumb img { transform: scale(1.04); }
.nurture-thumb-panel { display: grid; place-items: center; background: linear-gradient(150deg, var(--wa-mid), var(--wa-dark)); }
.nurture-thumb-ic svg { width: 54px; height: 54px; stroke: #fff; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nurture-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 22px; flex: 1; }
.nurture-label { margin: 0; }
.nurture-h { margin: 0; }
.nurture-p { flex: 1; }
.nurture-btn { align-self: flex-start; margin-top: 8px; }

/* ---------- 16. Final CTA ---------- */
.final-cta { padding: var(--section-pad) 0; position: relative; overflow: hidden; isolation: isolate; text-align: center; background: var(--navy); }
.final-cta-photo .final-cta-bg { position: absolute; inset: 0; z-index: 0; }
.final-cta-photo .final-cta-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; filter: blur(7px) saturate(.9); transform: scale(1.12); }
.final-cta-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 82% 12%, color-mix(in srgb, var(--teal) 30%, transparent), transparent 60%), linear-gradient(180deg, rgba(10,37,64,.86) 0%, rgba(10,37,64,.92) 100%); }
.final-cta .container { position: relative; z-index: 2; }
.final-cta-eyebrow { font-weight: 700; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--teal) 55%, #fff); margin: 0 0 18px; }
.final-cta-h { color: #fff; margin: 0 auto 28px; max-width: var(--measure-heading); }
.final-cta-h .hl-underline { color: color-mix(in srgb, var(--teal) 55%, #fff); -webkit-text-fill-color: color-mix(in srgb, var(--teal) 55%, #fff); }
.final-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* On-dark CTA pair. These two were listed in the shared button base (§4) but in NEITHER
   variant list, so they shipped with no fill and a transparent border — two bare text
   links at 2.96:1 on the navy band, failing WCAG AA. On dark the hierarchy inverts:
   the solid white pill leads, the hairline ghost follows. Both clear AA with margin
   (white/navy = 15.5:1; the ghost's border against navy = 3.8:1). */
.final-cta-btn { background: var(--surface-0); color: var(--ink); border-color: transparent; box-shadow: var(--shadow-md); }
.final-cta-btn:hover { background: var(--surface-0); color: var(--teal-ink); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.final-cta-btn-ghost { background: transparent; color: var(--on-dark); border-color: var(--hairline-on-dark); }
.final-cta-btn-ghost:hover { background: color-mix(in srgb, var(--on-dark) 12%, transparent); border-color: var(--on-dark); color: var(--on-dark); transform: translateY(-1px); }
.final-cta-btn:focus-visible, .final-cta-btn-ghost:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 3px; }
.final-cta-sub { max-width: 900px; margin: -8px auto 30px; color: var(--on-dark); font-size: 17px; line-height: 1.6; }

/* From the Consultant's Desk — Embla carousel (touch/mouse drag, momentum, snap) */
/* Viewport + track */
.cvc-embla { overflow: hidden; margin-top: 44px; cursor: grab; }
.cvc-embla:active { cursor: grabbing; }
.cvc-embla-container { display: flex; gap: 28px; align-items: stretch; padding: 6px 2px 4px; }
.cvc-slide { flex: 0 0 auto; width: clamp(320px, 33.333%, 384px); min-width: 0; display: flex; }

/* Card — a strict two-zone grid so the carousel reads as a clean structured row:
   [body: grows] + [attribution: FIXED height]. Because the attribution zone is a fixed height
   anchored to the bottom, its divider sits on the SAME baseline on every card regardless of
   quote length. Uniform full-width text cards — one consistent structure for every testimonial. */
.cvc-card {
  --cvc-attr-h: 100px;   /* fixed attribution-zone height → shared divider baseline */
  position: relative;
  width: 100%; display: flex; flex-direction: column;
  background: var(--surface-0);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cvc-card:hover { box-shadow: var(--shadow-pop); transform: translateY(-2px); }
/* Occasional accent card — subtle surface tint only, for rhythm. */
.cvc-card.is-accent { background: var(--surface-1); }

/* ---------- 17. Footer (light) — redesigned: a calm destination,
   not a dense list. Wider brand rail, credentials in-flow, links with
   an underline-grow micro-interaction, social as consistent icon chips. */
.fx-links { background: var(--surface-2); color: var(--ink-2); padding: clamp(64px, 8vw, 96px) 0 32px; position: relative; border-top: 1px solid var(--hairline); }
.fx-links-inner { max-width: var(--container); margin: 0 auto clamp(48px, 6vw, 72px); padding: 0 32px; display: grid; grid-template-columns: 1.9fr 1fr 1fr 1.1fr; gap: clamp(32px, 4vw, 64px); }
.fx-brand-col { max-width: 380px; }
.fx-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.fx-brand-tag { color: var(--ink-2); line-height: 1.6; margin: 0 0 18px; font-size: 15px; max-width: 34ch; }
.fx-bottom-parent { color: color-mix(in srgb, var(--ink-2) 88%, #fff); font-weight: 600; text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.fx-bottom-parent:hover { color: var(--teal-ink); }
/* DPG credential — a quiet inline trust line on the column's left edge. Deliberately not
   a pill/button: it states a fact, it isn't a second CTA competing with Subscribe. */
/* Credential chips (DPG + GitHub). Same 40px geometry, radius, border and hover as
   .fx-social so the footer reads as one icon system rather than two. */
.fx-creds { display: flex; gap: 10px; margin-top: 20px; }
.fx-cred-chip { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-0); border: 1px solid var(--hairline); color: var(--ink-2); box-shadow: var(--shadow-sm); text-decoration: none; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.fx-cred-chip:hover { color: var(--teal-ink); border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.fx-cred-chip svg { width: 18px; height: 18px; fill: currentColor; }
/* The DPG badge carries its own lockup, so it is not re-framed in a chip — just sized to
   the 40px row height and given the same lift on hover. 175x84 source at 83x40 = ~2.1x. */
.fx-cred-badge { display: inline-flex; align-items: center; height: 40px; text-decoration: none; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.fx-cred-badge img { height: 40px; width: auto; display: block; }
.fx-cred-badge:hover { transform: translateY(-2px); }
.fx-cred-badge:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-sm); }
/* Link columns */
.fx-col { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.fx-col .fx-h { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin: 0 0 18px; }
.fx-col > a { position: relative; display: inline-flex; align-items: center; width: fit-content; color: var(--ink-2); text-decoration: none; padding: 6px 0; font-size: 14.5px; transition: color var(--dur-fast) var(--ease); }
.fx-col > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1.5px; background: var(--teal-ink); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); }
.fx-col > a:hover { color: var(--teal-ink); }
.fx-col > a:hover::after { transform: scaleX(1); }
/* Social icon chips */
.fx-social { display: flex; gap: 10px; margin-top: 18px; }
.fx-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-0); border: 1px solid var(--hairline); color: var(--ink-2); box-shadow: var(--shadow-sm); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.fx-social a:hover { color: var(--teal-ink); border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.fx-social svg { width: 18px; height: 18px; fill: currentColor; }
.fx-social .fx-soc-line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Bottom bar */
.fx-bottom { max-width: var(--container); margin: 0 auto; padding: 28px 32px 0; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 12.5px; color: color-mix(in srgb, var(--ink-2) 72%, #fff); }
.fx-bottom-right { display: flex; gap: 24px; flex-wrap: wrap; }
.fx-bottom-right a { display: inline-flex; align-items: center; min-height: 24px; color: color-mix(in srgb, var(--ink-2) 80%, #fff); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.fx-bottom-right a:hover { color: var(--teal-ink); }
@media (max-width: 900px) { .fx-links-inner { grid-template-columns: 1fr 1fr; } .fx-brand-col { grid-column: 1 / -1; max-width: 460px; } }
@media (max-width: 560px) { .fx-links-inner { grid-template-columns: 1fr; } .fx-bottom { flex-direction: column; gap: 12px; } }

/* ---------- 18. Inner-page hero + sections ---------- */
.pg-hero { padding: calc(var(--section-pad) + var(--space-4)) 0 var(--section-pad); background: var(--navy-2); text-align: center; }
.pg-hero .container { max-width: var(--container); }
.pg-hero .pg-eyebrow { color: color-mix(in srgb, var(--teal) 55%, #fff); }
.pg-hero .pg-h1 { color: #fff; }
.pg-hero .pg-sub { color: rgba(255,255,255,.92); max-width: 1000px; margin: 0 auto; }
.pg-eyebrow { display: block; margin-bottom: 18px; }
.pg-h1 { margin: 0 0 24px; }
.pg-hero-ctas { margin-top: 36px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.pg-section { padding: var(--section-pad) 0; }
.pg-section.alt { background: var(--surface-1); padding: var(--section-pad-lg) 0; }
.pg-section .container { max-width: var(--container); }
.pg-section-head { max-width: 760px; margin: 0 auto 32px; text-align: center; }
.pg-section-head.left { text-align: left; margin-left: 0; }
.pg-h2 { margin: 0; }
.pg-section-sub { margin: 16px auto 0; max-width: 560px; }
.pg-section-head.left .pg-section-sub { margin-left: 0; }
/* Legal / privacy */
.legal-hero { padding-bottom: 64px; }
.legal-updated { margin-top: 18px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.7); }
.legal-section { background: var(--surface-1); }
.legal-wrap { max-width: 760px; margin: 0 auto; }
.legal-intro { font-size: 18px; line-height: 1.7; color: var(--ink-2); padding-bottom: 32px; margin-bottom: 8px; border-bottom: 1px solid var(--hairline); }
.legal-block { margin-top: 40px; }
.legal-h { margin: 0 0 12px; }
.legal-list { margin: 4px 0 14px; padding-left: 22px; }
.legal-section a { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 2px; }
.legal-section a:hover { color: color-mix(in srgb, var(--teal-ink) 78%, #000); }

/* ---------- 19. Platform / About page ---------- */
/* Product explainer video frame (was inline-styled) */
.pl-video-frame { position: relative; width: 100%; max-width: 900px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-pop); }
.pl-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pl-afford { background: var(--navy); padding: var(--section-pad) 0; }
.pl-afford .container { max-width: var(--container); }
.pl-afford-head { text-align: center; margin-bottom: 48px; }
.pl-afford-head .pg-h2 { color: #fff; }
.pl-afford-head .pg-h2 .hl-underline { color: color-mix(in srgb, var(--teal) 55%, #fff); -webkit-text-fill-color: color-mix(in srgb, var(--teal) 55%, #fff); }
.pl-afford-sub { font-size: 18px; color: rgba(255,255,255,.82); margin: 14px 0 0; }
.pl-afford-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pl-afford-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); padding: 30px; }
.pl-afford-card h3 { color: #fff; margin: 0 0 10px; }
.pl-afford-card p { color: rgba(255,255,255,.78); margin: 0; }
.pg-btn-ondark { background: #fff; color: var(--navy); }
.pg-btn-ondark:hover { background: var(--surface-1); color: var(--navy); }
/* Zig-zag feature rows */
.zz-stack { display: flex; flex-direction: column; gap: 100px; }
.zz-row { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: center; }
.zz-row.zz-reverse .zz-media { order: 2; } .zz-row.zz-reverse .zz-copy { order: 1; }
.zz-media { border-radius: var(--r-lg); overflow: hidden; background: var(--surface-0); box-shadow: var(--shadow-lg); }
.zz-media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.zz-media-shot { background: var(--surface-0); aspect-ratio: 16/10; }
.zz-media-shot img { object-position: left top; }
.zz-h { margin: 0 0 18px; }
.zz-p { margin: 0; }
/* Sources viz chips */
.srcviz { position: relative; width: 100%; aspect-ratio: 16/10; }
.srcviz-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.srcviz-chip, .srcviz-proc { position: absolute; display: inline-flex; align-items: center; gap: 8px; background: var(--surface-0); border: 1.5px solid var(--navy-2); font-weight: 600; font-size: 12px; color: var(--navy-2); box-shadow: var(--shadow-sm); white-space: nowrap; }
.srcviz-chip { border-radius: var(--r-md); padding: 6px 11px 6px 8px; }
.srcviz-proc { border-radius: var(--r-pill); padding: 7px 14px 7px 11px; }
.srcviz-chip img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.srcviz-proc svg { width: 15px; height: 15px; fill: none; stroke: var(--teal); stroke-width: 1.8; flex-shrink: 0; }
/* Dashboard showcase */
.dsh-section { background: var(--surface-0); padding: 0 0 var(--section-pad); }
.dsh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dsh-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; background: var(--surface-0); border-radius: var(--r-lg); padding: 24px 24px 22px; box-shadow: var(--shadow-sm); }
.dsh-native-badge { position: absolute; top: 16px; right: 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--teal-ink); background: color-mix(in srgb, var(--teal) 14%, #fff); border: 1px solid color-mix(in srgb, var(--teal) 30%, transparent); padding: 4px 10px; border-radius: var(--r-pill); }
.dsh-logo { height: 46px; display: flex; align-items: center; margin-bottom: 18px; }
.dsh-logo img { max-height: 46px; max-width: 170px; width: auto; object-fit: contain; }
.dsh-name { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.dsh-use { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); margin: 0 0 18px; text-wrap: pretty; flex: 1; }
.dsh-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.dsh-link { display: inline-flex; align-items: center; min-height: 24px; gap: 6px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--teal-ink); }
.dsh-link:hover { color: var(--ink); }
.dsh-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--dur) var(--ease); }
.dsh-link:hover svg { transform: translate(2px, -2px); }
/* Why / engagement areas */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.why-copy p { margin: 0 0 20px; }
.why-photo { border-radius: var(--r-md); overflow: hidden; margin-bottom: 24px; box-shadow: var(--shadow-lg); }
.why-photo img { width: 100%; height: 220px; object-fit: cover; }
.why-areas-label { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-ink); margin-bottom: 16px; }
.why-areas ul { list-style: none; }
.why-areas li { font-size: 16px; color: var(--ink); padding: 16px 0; border-top: 1px solid var(--hairline); display: flex; gap: 16px; align-items: baseline; }
.why-areas li:last-child { border-bottom: 1px solid var(--hairline); }
.why-num { font-size: 13px; color: var(--teal-ink); flex-shrink: 0; }
.we-split { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 40px; align-items: stretch; }
.we-photo-col { display: flex; flex-direction: column; gap: 18px; }
.we-photo-col img { width: 100%; flex: 1 1 0; min-height: 0; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.we-panel { display: flex; flex-direction: column; background: var(--surface-0); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.we-panel-head { display: flex; align-items: center; gap: 10px; padding: 16px 24px; background: var(--navy); }
.we-panel-tag { color: color-mix(in srgb, var(--teal) 55%, #fff); }
.we-panel-name { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.we-rows { padding: 2px 26px; list-style: none; flex: 1; }
.we-row { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--hairline); }
.we-row:last-child { border-bottom: 0; }
.we-row-ico { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--r-md); background: color-mix(in srgb, var(--teal) 12%, #fff); display: grid; place-items: center; color: var(--teal-hover); }
.we-row-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.we-row-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.we-row-t { font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
/* Platform 3-point trust band */
.trust-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.trust-point { text-align: center; padding: 0 16px; }
.trust-ico { width: 56px; height: 56px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--teal) 12%, #fff); display: grid; place-items: center; margin: 0 auto 20px; }
.trust-ico svg { width: 26px; height: 26px; stroke: var(--teal-hover); fill: none; stroke-width: 1.6; }
.trust-point h3 { margin: 0 0 8px; }
.trust-point p { margin: 0; }

/* PlatformFor capability selector (§ "Dalgo for …") */
.pf-section { padding: 0 0 var(--section-pad); }
.pf-header { max-width: none; margin: 0 0 32px; }
.pf-eyebrow { display: inline-block; margin-bottom: 14px; }
.pf-title { margin: 0 0 14px; }
.pf-sub { margin: 0; }
.pf-card { background: var(--surface-0); border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.pf-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 16px; background: color-mix(in srgb, var(--teal) 10%, #fff); border-bottom: 1px solid var(--hairline); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.pf-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-pill { font-weight: 600; font-size: 14.5px; color: var(--teal-ink); background: var(--surface-0); border: 1px solid color-mix(in srgb, var(--teal) 30%, #fff); border-radius: var(--r-pill); padding: 9px 18px; cursor: pointer; box-shadow: var(--shadow-sm); transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform .1s var(--ease); }
.pf-pill:hover { background: var(--surface-1); border-color: var(--teal); color: var(--teal-ink); box-shadow: var(--shadow-pop); }
.pf-pill:active { transform: translateY(1px); }
.pf-pill.is-active { background: var(--teal-ink); border-color: var(--teal-ink); color: #fff; box-shadow: var(--shadow-md); }
.pf-card-body { display: grid; padding: 30px 26px 4px; }
/* Every panel sits in the same cell (1/1), so the body's height is the tallest panel's and
   never changes between tabs. Inactive panels stay in flow but are hidden. */
.pf-panel { grid-area: 1 / 1; display: grid; grid-template-columns: 1fr 0.82fr; gap: 40px; align-items: start; visibility: hidden; }
.pf-panel.is-active { visibility: visible; }
.pf-desc { margin: 0 0 22px; animation: pfFade var(--dur-slow) var(--ease); }
.pf-checks { list-style: none; display: flex; flex-direction: column; gap: 14px; animation: pfFade var(--dur-slow) var(--ease); }
.pf-checks li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.pf-check-ic { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px; background: color-mix(in srgb, var(--teal) 12%, #fff); display: grid; place-items: center; }
.pf-check-ic svg { width: 13px; height: 13px; fill: none; stroke: var(--teal-hover); stroke-width: 2.6; }
.pf-card-foot { padding: 22px 26px 28px; }
.pf-cta-wrap { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pf-cta { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 15px 28px; }
.pf-cta-pending { background: var(--surface-2); color: var(--ink-2); cursor: default; box-shadow: none; }
.pf-cta-pending:hover { background: var(--surface-2); transform: none; }
.pf-pending-tag { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pending-ink); background: var(--pending-bg); border: 1px solid var(--pending-border); border-radius: var(--r-pill); padding: 4px 11px; }
.pf-shot { margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--surface-0); box-shadow: var(--shadow-md); animation: pfFade var(--dur-slow) var(--ease); }
.pf-shot-frame { aspect-ratio: 16/11; overflow: hidden; background: var(--surface-1); }
.pf-shot-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pf-shot-frame img.pf-shot-center { object-position: center; }
.pf-shot-cap { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-top: 1px solid var(--hairline); font-size: 13px; font-weight: 500; color: var(--ink-2); }
.pf-shot-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }
@keyframes pfFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- 20. Pricing ---------- */
.pricing-section { background: var(--surface-0); padding: var(--section-pad) 0; }
.pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 380px)); gap: 24px; align-items: stretch; justify-content: center; }
.plan-card { position: relative; display: flex; flex-direction: column; background: var(--surface-0); border-radius: var(--r-lg); padding: 30px 28px 34px; box-shadow: var(--shadow-md); }
.plan-card-accent { border-color: var(--teal); box-shadow: var(--shadow-lg); }
.plan-head { min-height: 140px; }
.plan-name { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.plan-priceblock { min-height: 82px; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.plan-price { display: flex; align-items: baseline; gap: 7px; }
.plan-amt { font-weight: 700; font-size: 34px; line-height: 1; color: var(--ink); letter-spacing: -0.03em; }
.plan-from { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.plan-period { font-size: 15px; font-weight: 500; color: var(--ink-2); }
.plan-note { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.plan-cta { width: 100%; justify-content: center; margin-top: 18px; padding-top: 11px; padding-bottom: 11px; }
.plan-includes { display: flex; flex-direction: column; flex: 1; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.plan-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.plan-features li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.plan-check { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--teal) 13%, #fff); display: grid; place-items: center; }
.plan-check svg { width: 14px; height: 14px; fill: none; stroke: var(--teal-hover); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* Region toggle + two headline plan cards, Anthropic-style tier disclosure (pricing page) */
.pricing-region-toggle { display: flex; justify-content: center; gap: 8px; margin: 20px 0 40px; flex-wrap: wrap; }
.pr-toggle-btn { font-weight: 600; font-size: 14.5px; color: var(--teal-ink); background: var(--surface-0); border: 1px solid color-mix(in srgb, var(--teal) 30%, #fff); border-radius: var(--r-pill); padding: 9px 18px; cursor: pointer; box-shadow: var(--shadow-sm); transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.pr-toggle-btn:hover { background: var(--surface-1); border-color: var(--teal); }
.pr-toggle-btn.is-active { background: var(--teal-ink); border-color: var(--teal-ink); color: #fff; box-shadow: var(--shadow-md); }
.pricing-grid-two { grid-template-columns: repeat(2, minmax(0, 400px)); }
.plan-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--surface-1); margin-bottom: 16px; }
.plan-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--teal-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.plan-tagline { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.plan-includes-h { margin: 0 0 14px; font-size: 12px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.plan-features-tags li { font-size: 15px; }
/* Prominent "not sure? schedule a call" callout — tinted card, centred, → consultation form. */
.pricing-help-line { margin: 32px auto 0; max-width: 720px; text-align: center; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.pricing-help-line a { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; color: var(--teal-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pricing-help-line a:hover { color: var(--ink); }
.pricing-help-line a svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Costs-to-plan-for accordion (pricing page) */
.ctpf-section { background: var(--surface-1); border-top: 1px solid var(--hairline); padding: var(--section-pad-lg) 0; }
.ctpf-list { max-width: 760px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 12px; }
.ctpf-item { background: var(--surface-0); border: 1px solid var(--hairline); border-radius: var(--r-md); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.ctpf-item.is-open { border-color: var(--teal); box-shadow: var(--shadow-sm); }
.ctpf-q { width: 100%; display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: none; border: none; cursor: pointer; text-align: left; }
.ctpf-ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; background: var(--surface-1); display: grid; place-items: center; }
.ctpf-ic svg { width: 18px; height: 18px; fill: none; stroke: var(--teal-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ctpf-q-text { flex: 1; font-weight: 700; font-size: 15.5px; color: var(--ink); }
.ctpf-chev { flex-shrink: 0; width: 20px; height: 20px; color: var(--ink-2); transition: transform var(--dur) var(--ease); }
.ctpf-chev svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ctpf-item.is-open .ctpf-chev { transform: rotate(180deg); color: var(--teal-ink); }
.ctpf-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease); }
.ctpf-item.is-open .ctpf-a-wrap { grid-template-rows: 1fr; }
.ctpf-a { min-height: 0; overflow: hidden; padding: 0 20px 0 68px; }
.ctpf-item.is-open .ctpf-a { padding-bottom: 18px; }
.ctpf-a p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.ctpf-a a { color: var(--teal-ink); font-weight: 600; }
@media (max-width: 1024px) { .pricing-grid-two { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
@media (max-width: 480px) { .ctpf-a { padding-left: 20px; } }

.pricing-explainer { background: var(--surface-1); border-top: 1px solid var(--hairline); padding: clamp(56px, 7vw, 92px) 0; }
.pex-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.pex-h { margin: 0 0 14px; }
.pex-sub { margin: 0; }
.pex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 820px; margin: 0 auto; }
.pex-card { background: var(--surface-0); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 28px 26px; }
.pex-ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-md); background: color-mix(in srgb, var(--teal) 12%, #fff); margin-bottom: 16px; }
.pex-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--teal-hover); stroke-width: 1.7; }
.pex-card h3 { margin: 0 0 8px; }
.pex-card p { margin: 0; }
.pex-never { text-align: center; margin: 28px auto 0; font-weight: 600; font-size: 15px; color: var(--teal-ink); }
.pricing-faq { max-width: 720px; margin: 48px auto 0; text-align: center; border-top: 1px solid var(--hairline); padding-top: 40px; }
.pfaq-q { margin: 0 0 12px; }
.pfaq-a { margin: 0 auto; max-width: 620px; }
.pricing-region-note { color: var(--ink-2); margin: 22px 0 0; }

/* ---------- 21. Impact page ---------- */
/* (Old .imx-hero collage block removed — page uses the shared SiteHero/.cvh pattern.) */
.imx-section { padding: var(--section-pad) 0; }
/* Quote interstitial directly below a hero — slim strip: 64 top (air off the hero hairline),
   0 bottom (the next section's own --section-pad provides exactly one unit of separation). */
.imx-quote-strip { padding: var(--section-pad-sm) 0 0; }
.imx-glance, .imx-browse { background: var(--surface-0); }
.imx-spotlight, .imx-byorg { background: var(--surface-1); padding: var(--section-pad-lg) 0; }
.imx-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.imx-tiles-5 { grid-template-columns: repeat(5, 1fr); }
.imx-tile { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 26px 16px; background: var(--surface-0); border: 1px solid var(--hairline); border-radius: var(--r-lg); text-decoration: none; }
.imx-tile-link { transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.imx-tile-link:hover { border-color: var(--teal); transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.imx-tile-ic { width: 48px; height: 48px; border-radius: var(--r-md); display: grid; place-items: center; background: color-mix(in srgb, var(--teal) 12%, #fff); }
.imx-tile-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--teal-hover); stroke-width: 1.7; }
.imx-seq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; margin-bottom: 24px; }
.imx-seq-card { background: var(--surface-0); border-radius: var(--r-lg); padding: 32px 28px; display: flex; flex-direction: column; box-shadow: var(--shadow-card); }
.imx-seq-step { margin-bottom: 14px; }
.imx-seq-card p { color: var(--ink-2); margin: 0; }
.imx-seq-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 18px; }
.imx-seq-tag { display: inline-flex; align-items: center; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--surface-1); border-radius: var(--r-pill); padding: 5px 12px; }
.imx-seq-stats { display: flex; flex-direction: column; gap: 22px; margin-top: auto; padding-top: 18px; }
.imx-seq-stat { display: flex; flex-direction: column; gap: 5px; }
.imx-seq-stat-row { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.imx-seq-before { font-weight: 500; font-size: 22px; letter-spacing: -0.02em; line-height: 1; color: color-mix(in srgb, var(--ink-2) 78%, #fff); text-decoration: line-through; }
.imx-seq-statarrow { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--teal-hover); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.imx-seq-after { font-weight: 500; font-size: 26px; letter-spacing: -0.02em; line-height: 1; color: var(--teal-ink); }
.imx-seq-after-lg { font-size: 40px; }
/* STiR pull-quote — a proportionate testimonial (not a headline). Aligned to the design system. */
.imx-band { position: relative; display: grid; grid-template-columns: 1fr 260px; background: var(--surface-0); border-radius: var(--r-xl); overflow: hidden; margin-top: 24px; box-shadow: var(--shadow-card); }
.imx-band-main { padding: 36px 40px; display: flex; flex-direction: column; }
.imx-band-mark { font-weight: 700; font-size: 36px; line-height: .6; color: color-mix(in srgb, var(--teal) 42%, #fff); margin-bottom: 10px; height: 22px; }
.imx-band-quote { margin: 0 0 24px; font-size: 20px; line-height: 1.55; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }
.imx-band-quote strong { color: var(--ink); font-weight: 600; }
.imx-band-quote .imx-mark { background: color-mix(in srgb, var(--teal) 16%, #fff); color: var(--ink); padding: 0 3px; border-radius: 3px; font-weight: 600; }
.imx-band-attr { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.imx-band-name { font-weight: 600; font-size: 15px; color: var(--ink); }
.imx-band-role { font-size: 13.5px; color: var(--ink-2); }
/* Solo quote card (no photo panel) + avatar attribution — canonical pattern §4 */
.imx-band-solo { grid-template-columns: 1fr; }
.imx-band-attr-row { flex-direction: row; align-items: center; gap: 14px; }
.imx-band-av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--hairline); background: var(--surface-2); flex-shrink: 0; }
.imx-band-who { display: flex; flex-direction: column; gap: 2px; }
.imx-band-aside { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; justify-content: center; border-left: 1px solid var(--hairline); padding: 36px 36px 36px 40px; }
.imx-band-trust { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.imx-band-photo { position: relative; min-height: 240px; }
.imx-band-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 26%; }
/* Endorsement panel — the org's mark in place of a headshot. Same footprint as the
   photo panel so the canonical quote card keeps one shape. */
.imx-band-logo { display: grid; place-items: center; padding: 24px; background: var(--surface-1); }
.imx-band-logo img { max-width: 172px; width: 100%; height: auto; opacity: .88; }
.imx-band-photo.is-placeholder { display: grid; place-items: center; background: var(--surface-2); }
.imx-band-ph-ic { width: 56px; height: 56px; fill: none; stroke: color-mix(in srgb, var(--ink) 22%, #fff); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.imx-band-ph-label { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 34%, #fff); }

.imx-si-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.imx-select-wrap { position: relative; max-width: 420px; margin: 0 auto; }
.imx-select { width: 100%; appearance: none; -webkit-appearance: none; font-size: 16px; font-weight: 500; color: var(--ink); background: var(--surface-0); border: 1.5px solid color-mix(in srgb, var(--ink) 16%, #fff); border-radius: var(--r-pill); padding: 15px 48px 15px 22px; cursor: pointer; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.imx-select:hover { border-color: var(--teal); }
.imx-select:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
.imx-select-caret { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; fill: none; stroke: var(--ink-2); stroke-width: 2; pointer-events: none; }

/* ---------- 22. Community page (cmh) ---------- */
/* First section under the hero takes the slim pad (documented below-hero rule).
   Two classes so it outranks the .pg-section padding shorthand defined later. */
.pg-section.cmh-section-first { padding-top: var(--section-pad-sm); }
.cmh-section { padding: var(--section-pad) 0; }
.cmh-head { margin-bottom: 44px; }
.cmh-head .pg-eyebrow { text-align: center; margin-bottom: 12px; }
.cmh-meta-item { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; font-weight: 500; }
.cmh-meta-item svg { width: 17px; height: 17px; fill: none; stroke: var(--teal-ink); stroke-width: 1.8; }
.cmh-news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 980px; margin: 0 auto; }
.cmh-news-card { display: flex; flex-direction: column; background: var(--surface-0); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.cmh-news-card:hover { transform: translateY(-4px); border-color: var(--teal); box-shadow: var(--shadow-pop); }
.cmh-news-thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--surface-1); }
.cmh-news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.cmh-news-card:hover .cmh-news-thumb img { transform: scale(1.04); }
.cmh-news-body { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 28px; flex: 1; }
.cmh-news-title { margin: 0; }
.cmh-news-tagline { color: var(--teal-ink); font-weight: 600; font-size: 14.5px; }
.cmh-news-desc { color: var(--ink-2); font-size: 15px; line-height: 1.55; flex: 1; }
.cmh-news-card .cmh-btn { align-self: flex-start; margin-top: 8px; }
/* align-items:flex-start, not center: centring floated the icon ~74px below the eyebrow
   it belongs to, reading as a detached ornament. Top-aligned it anchors the heading. */
.cmh-wa { display: flex; align-items: stretch; gap: 32px; background: linear-gradient(135deg, #0F5C52 0%, var(--wa-dark) 100%); border-radius: var(--r-xl); padding: 48px 56px; color: #fff; }
.cmh-wa-icon { flex-shrink: 0; width: 72px; height: 72px; border-radius: var(--r-lg); background: rgba(255,255,255,.12); display: grid; place-items: center; }
.cmh-wa-icon svg { width: 36px; height: 36px; fill: none; stroke: #fff; stroke-width: 1.7; }
.cmh-wa-copy .pg-eyebrow { color: color-mix(in srgb, var(--teal) 45%, #fff); margin-bottom: 12px; }
.cmh-wa-h { color: #fff; margin-bottom: 14px; }
.cmh-wa-h .hl-underline { color: color-mix(in srgb, var(--teal) 50%, #fff); -webkit-text-fill-color: color-mix(in srgb, var(--teal) 50%, #fff); }
.cmh-wa .comm-lead { color: rgba(255,255,255,.9); max-width: 58ch; text-wrap: pretty; }
.cmh-btn-wa { background: #fff; color: #0F5C52; margin-top: 26px; }
.cmh-btn-wa svg { stroke: #0F5C52; }
.cmh-btn-wa:hover { transform: translateY(-2px); background: var(--surface-1); }

/* ---------- 23. Case Studies page ---------- */
.cs-hero { background: var(--navy-2); color: #fff; padding: var(--section-pad) 0; position: relative; overflow: hidden; }
.cs-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--teal) 18%, transparent), transparent 50%); pointer-events: none; }
.cs-hero .container { position: relative; z-index: 1; max-width: var(--container); }
.cs-back { display: inline-flex; align-items: center; color: rgba(255,255,255,.7); font-size: 13px; font-weight: 500; text-decoration: none; margin-bottom: 32px; }
.cs-back:hover { color: var(--teal); }
.cs-title { color: #fff; max-width: 840px; margin-bottom: 20px; }
.cs-sub { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.8); max-width: 620px; margin-bottom: 40px; }
.cs-stats { display: flex; gap: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); flex-wrap: wrap; }
.cs-stats > div { display: flex; flex-direction: column; gap: 4px; }
.cs-stats strong { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.cs-stats span { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.ch-section { padding: var(--section-pad) 0; background: var(--surface-0); }
.ch-filters { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-md); margin-bottom: 24px; }
.ch-filter-group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ch-filter-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); min-width: 100px; }
.ch-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ch-chip { background: var(--surface-0); border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: all var(--dur-fast) var(--ease); font-family: inherit; }
.ch-chip:hover { border-color: var(--teal); color: var(--teal-ink); }
.ch-chip-on { background: var(--teal-ink); border-color: var(--teal-ink); color: #fff; }
.cs-count { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 20px; }
.ch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ch-card { background: var(--surface-0); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ch-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); border-color: var(--teal); }
.ch-thumb { aspect-ratio: 16/9; position: relative; overflow: hidden; background: var(--surface-2); }
.ch-type-pill { position: absolute; top: 12px; right: 12px; background: rgba(10,37,64,.82); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--r-pill); }
.ch-card-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ch-meta { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); display: flex; gap: 6px; }
.ch-org { color: var(--ink); }
.ch-sep { opacity: .4; }
.ch-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; text-wrap: pretty; flex: 1; }
.ch-blurb { font-size: 14px; line-height: 1.5; color: var(--ink-2); flex: 1; }
.ch-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--hairline); }
.ch-read { font-size: 13px; font-weight: 600; color: var(--teal-ink); }
.ch-arrow { color: var(--teal-ink); font-weight: 600; transition: transform var(--dur) var(--ease); }
.ch-card:hover .ch-arrow { transform: translateX(4px); }
.ch-empty { padding: 40px; text-align: center; color: var(--ink-2); background: var(--surface-2); border-radius: var(--r-md); border: 1px dashed var(--hairline); margin-top: 24px; }

/* ---------- 24. Story page ---------- */
.st-intro { background: var(--surface-0); text-align: center; padding: clamp(72px, 9vw, 116px) 24px clamp(36px, 5vw, 60px); }
.st-intro-inner { max-width: 720px; margin: 0 auto; }
.st-intro-eyebrow { margin: 0 0 18px; }
.st-intro-h { margin: 0 0 22px; }
.st-intro-sub { margin: 0 auto; max-width: 560px; }
.st { background: var(--surface-0); position: relative; }
.st-railwrap { position: sticky; top: 76px; z-index: 20; background: rgba(255,255,255,.85); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.st-rail { position: relative; max-width: 640px; margin: 0 auto; padding: 20px clamp(24px, 5vw, 48px) 18px; display: grid; grid-template-columns: repeat(3, 1fr); }
.st-rail-track { position: absolute; top: 30px; left: 16.667%; right: 16.667%; height: 2px; background: var(--hairline); border-radius: 2px; }
.st-rail-fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--teal-hover); border-radius: 2px; transition: width .6s cubic-bezier(.16,.84,.44,1); }
.st-rail-col { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.st-rail-node { position: relative; z-index: 2; width: 15px; height: 15px; border-radius: 50%; background: var(--surface-0); border: 2px solid var(--hairline); transition: border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease); }
.st-rail-col.is-reached .st-rail-node { background: var(--teal-hover); border-color: var(--teal-hover); }
.st-rail-col.is-current .st-rail-node { transform: scale(1.15); box-shadow: 0 0 0 5px color-mix(in srgb, var(--teal) 14%, transparent); }
.st-rail-label { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--ink-2); transition: color .4s var(--ease); white-space: nowrap; }
.st-rail-col.is-reached .st-rail-label { color: var(--ink); }
.st-rail-num { font-size: 11px; color: var(--ink-2); opacity: .7; }
.st-rail-col.is-reached .st-rail-num { color: var(--teal-ink); opacity: 1; }
.st-chapters { max-width: var(--container); margin: 0 auto; padding: 0 clamp(24px, 5vw, 48px); }
.st-chapter { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; padding: clamp(64px, 7vw, 92px) 0; position: relative; }
.st-chapter.st-reverse .st-media { order: 2; } .st-chapter.st-reverse .st-copy { order: 1; }
.st-chapter::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hairline); }
.st-chapter:last-child::after { display: none; }
.st-baseline { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }
.st-baseline-fill { height: 100%; width: 0; background: var(--teal-hover); }
.st-media { min-width: 0; }
.st-media-inner { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.st-photo { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.st-copy { min-width: 0; max-width: 460px; }
.st-chapter.st-reverse .st-copy { margin-left: auto; }
.st-label { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 20px; }
.st-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.st-h { margin: 0 0 22px; }
.st-body { margin: 0; }

/* ---------- 25. Team · Resources · Contact · FAQ accordion ---------- */
.team-intro { max-width: 760px; margin: 0 auto 60px; text-align: center; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 48px 24px; max-width: var(--container); margin: 0 auto; }
.team-card { text-align: center; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.team-avatar { width: 150px; height: 150px; border-radius: 50%; background: var(--surface-1); display: grid; place-items: center; margin-bottom: 18px; border: 1px solid var(--hairline); overflow: hidden; }
.team-avatar img { width: 100%; height: 100%; object-fit: cover; }
.team-avatar svg { width: 54px; height: 54px; fill: none; stroke: var(--ink-2); stroke-width: 1.5; }
.team-name { color: var(--ink); }
.team-role { color: var(--ink-2); }
.team-li { margin-top: 4px; color: var(--teal-ink); font-weight: 500; }
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; max-width: var(--container); margin: 0 auto; }
.res-card { border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; background: var(--surface-0); box-shadow: var(--shadow-sm); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.res-card:hover { border-color: var(--teal); transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.res-kind { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-ink); }
.res-card h3 { margin: 0; }
.res-card p { margin: 0; }
.res-card .res-link { margin-top: auto; font-weight: 500; font-size: 14px; color: var(--teal-ink); }
.res-card-video { padding-top: 0; overflow: hidden; }
.res-thumb { position: relative; margin: 0 -32px 18px; aspect-ratio: 16/9; overflow: hidden; background: var(--navy); }
.res-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.res-card-video:hover .res-thumb img { transform: scale(1.04); }
.res-play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: rgba(10,37,64,.72); display: grid; place-items: center; pointer-events: none; }
.res-play svg { width: 24px; height: 24px; fill: #fff; margin-left: 2px; }
.res-card-video:hover .res-play { background: var(--teal-hover); }
/* .res-card is an <a> on the community page, so its children need block flow */
.res-card-video .res-thumb { display: block; }
.res-card h3 { font-size: 17px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }
.res-card .res-kind, .res-card .res-link { display: block; }
/* Section-level "see everything" link under a card grid */
.cmh-more { margin: 32px 0 0; text-align: center; }
/* ---------- Contact — one centred Fillout embed ----------
   Single focal point. An earlier two-column version put a 53px email aside beside the
   702px form, leaving ~650px of dead space; the email now lives in the hero instead. */
/* Sits directly under the hero, so it takes --section-pad-sm on top, not --section-pad:
   the composition rule for a below-hero section (same as .imx-quote-strip). Avoids the
   double-padding trap where the hero's min-height slack and a full section pad stack up. */
.ct-section { padding: var(--section-pad-sm) 0 var(--section-pad-lg); }
.ct-form { width: 100%; max-width: 780px; margin: 0 auto; min-width: 0; }
.ct-fillout { width: 100%; height: 702px; }
.ct-noscript { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.ct-noscript a { color: var(--teal-ink); font-weight: 600; }
@media (max-width: 860px) { .ct-fillout { height: 760px; } }
.contact-method { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.contact-method .label { color: var(--teal-ink); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.contact-method a { font-weight: 600; color: var(--ink); text-decoration: none; }
.contact-method a:hover { color: var(--teal-ink); }
.webinar-section { padding: var(--section-pad) 0; }
.webinar-feature { display: grid; grid-template-columns: 1fr 460px; gap: 56px; align-items: center; }
.webinar-copy { max-width: 460px; }
.webinar-h { margin: 0 0 18px; }
.webinar-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.webinar-browse { color: var(--ink-2); font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--hairline); padding-bottom: 2px; }
.webinar-browse:hover { color: var(--teal-ink); border-color: currentColor; }
.webinar-embed { width: 100%; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.webinar-embed iframe { display: block; width: 100%; border: 0; border-radius: var(--r-lg); background: var(--surface-0); }
/* FAQ accordion */
.faq-section { padding: var(--section-pad) 0; background: var(--surface-0); }
.faq-wrap { max-width: 880px; margin: 0 auto; padding: 0 32px; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface-0); overflow: hidden; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.faq-item:hover { border-color: color-mix(in srgb, var(--teal) 45%, var(--hairline)); }
.faq-item.open { border-color: var(--teal); box-shadow: var(--shadow-md); }
.faq-q { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 20px; text-align: left; cursor: pointer; padding: 22px 26px; background: transparent; border: 0; font-size: 18px; font-weight: 600; color: var(--ink); transition: color var(--dur) var(--ease); }
.faq-q:hover, .faq-item.open .faq-q { color: var(--teal-ink); }
.faq-q-text { flex: 1 1 auto; }
.faq-tag-pending { display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: var(--r-sm); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pending-ink); background: var(--pending-bg); vertical-align: 2px; white-space: nowrap; }
.faq-q-icon { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; color: var(--ink-2); transition: transform .28s var(--ease), color var(--dur) var(--ease); }
.faq-q-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.faq-item.open .faq-q-icon { transform: rotate(180deg); color: var(--teal); }
.faq-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease); }
.faq-item.open .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a { min-height: 0; overflow: hidden; padding: 0 26px; color: var(--ink-2); }
.faq-item.open .faq-a { padding: 2px 26px 22px; }
.faq-a p { margin: 0 0 12px; line-height: 1.6; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a-ul { margin: 0 0 12px; padding-left: 22px; }
.faq-a-ul li { margin: 0 0 7px; line-height: 1.55; }
.faq-a ul, .faq-a ol { margin: 0 0 12px; padding-left: 22px; }
.faq-a ul:last-child, .faq-a ol:last-child { margin-bottom: 0; }
.faq-a li { margin: 0 0 7px; line-height: 1.55; }
.faq-a strong { color: var(--ink); font-weight: 700; }
.faq-a-tablewrap { overflow-x: auto; margin: 0 0 14px; border: 1px solid var(--hairline); border-radius: var(--r-md); }
.faq-a-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.faq-a-table th, .faq-a-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--hairline); }
.faq-a-table th { background: var(--surface-1); font-weight: 700; color: var(--ink); white-space: nowrap; }
.faq-a-table tr:last-child td { border-bottom: none; }

/* ============================================================
   26. RESPONSIVE — layout overrides live only in max-width
   queries; desktop stays as authored. No override hacks needed:
   these rules come later in the file at equal/greater specificity.
   ============================================================ */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, [role="tab"]:focus-visible,
.fc-dot:focus-visible, .ch-chip:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px;
}
html, body { max-width: 100%; overflow-x: clip; }

/* ============================================================
   27. Interaction & State System
   Completes the state matrix (pressed / disabled / loading),
   adds skeleton loading, scroll-reveal, and micro-interactions.
   New selectors only; placed after all component defs so states
   win by source order — no importance overrides (house rule).
   ============================================================ */

/* --- Buttons: pressed (rest + hover already defined in §4) --- */
.btn:active, .cmh-btn:active, .pg-btn:active, .nurture-btn:active,
.hero-cta-primary:active, .hero-cta-secondary:active, .final-cta-btn:active,
.final-cta-btn-ghost:active, .pf-cta:active, .comm-cta-btn:active,
.webinar-register:active, .cmh-btn-wa:active {
  transform: translateY(0) scale(.98);
  transition-duration: var(--dur-fast);
}

/* --- Buttons: disabled --- */
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"],
.pg-btn[disabled], .cmh-btn[disabled] {
  opacity: .5; cursor: not-allowed; box-shadow: var(--shadow-sm);
  transform: none; filter: saturate(.85);
}
.btn:disabled:hover, .btn[disabled]:hover, .btn[aria-disabled="true"]:hover {
  transform: none; box-shadow: var(--shadow-sm);
}

/* --- Buttons: loading (add .is-loading + aria-busy). Label fades,
       centred spinner appears; ::after arrow inherits transparent. --- */
.btn.is-loading, .pg-btn.is-loading, .cmh-btn.is-loading {
  color: transparent; pointer-events: none; position: relative;
}
.btn.is-loading::before, .pg-btn.is-loading::before, .cmh-btn.is-loading::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: dg-spin .7s linear infinite;
}
.btn-ghost.is-loading::before, .btn-secondary.is-loading::before,
.hero-cta-secondary.is-loading::before, .pg-btn-ghost.is-loading::before {
  border-color: color-mix(in srgb, var(--ink) 22%, transparent);
  border-top-color: var(--ink);
}
@keyframes dg-spin { to { transform: rotate(360deg); } }

/* --- Linked cards: pressed feedback --- */
.hdh-card:active, .si-card:active, .ch-card:active, .nurture-card:active,
.cmh-news-card:active, .res-card:active, .imx-tile-link:active {
  transform: translateY(-1px) scale(.995);
  transition-duration: var(--dur-fast);
}

/* --- Logo tiles: reveal colour + lift on hover (marquee pauses on hover) --- */
.logo-img { transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.logo-tile:hover .logo-img, .logo-tile:hover .logo-img.is-solid { filter: none; opacity: 1; }

/* --- Skeleton loading placeholder (utility) --- */
.skeleton {
  position: relative; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 7%, var(--surface-2));
  border-radius: var(--r-sm);
}
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: dg-shimmer 1.4s ease-in-out infinite;
}
@keyframes dg-shimmer { 100% { transform: translateX(100%); } }

/* --- Progressive reveal — CSS scroll-driven, no JS. Cards fade + rise as
       they enter the viewport. Pure progressive enhancement: browsers
       without scroll-timeline simply show content normally. --- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hdh-card, .si-card, .ch-card, .nurture-card, .cmh-news-card,
    .prf-card, .dsh-card, .pex-card, .imx-tile, .plan-card, .res-card {
      animation: dg-reveal both linear;
      animation-timeline: view();
      animation-range: entry 0% entry 62%;
    }
    @keyframes dg-reveal {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

@media (max-width: 1024px) {
  .nav-links, .nav-right { display: none; }
  .nav-inner { padding: 0 20px; }
  .nav-left { gap: 0; }
  .nav-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-left: auto; background: none; border: 0; cursor: pointer; padding: 10px; border-radius: var(--r-md); }
  .nav-burger span { display: block; height: 2px; width: 100%; border-radius: 2px; background: var(--ink); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
  .nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger.is-open span:nth-child(2) { opacity: 0; }
  .nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-scrim.is-open { display: block; position: fixed; inset: 68px 0 0; z-index: 40; background: rgba(10,37,64,.32); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; animation: navScrimIn var(--dur) var(--ease) forwards; }
  @keyframes navScrimIn { to { opacity: 1; } }
  .nav-mobile.is-open { display: block; position: fixed; top: 68px; left: 0; right: 0; z-index: 45; background: var(--surface-0); border-bottom: 1px solid var(--hairline); box-shadow: var(--shadow-lg); max-height: calc(100vh - 68px); overflow-y: auto; transform: translateY(-8px); opacity: 0; animation: navDrawerIn .22s var(--ease) forwards; }
  @keyframes navDrawerIn { to { transform: translateY(0); opacity: 1; } }
  .nav-mobile-scroll { padding: 12px 20px 24px; display: flex; flex-direction: column; }
  .nav-m-link { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 12px 4px; font-size: 17px; font-weight: 600; color: var(--ink); text-decoration: none; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--hairline); cursor: pointer; }
  .nav-m-link.is-active { color: var(--teal-ink); }
  .nav-m-acc svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur) var(--ease); }
  .nav-m-acc.is-open svg { transform: rotate(180deg); }
  .nav-m-sub { display: flex; flex-direction: column; padding: 4px 0 8px 12px; }
  .nav-m-sub[hidden] { display: none; }
  .nav-m-sub a { display: flex; align-items: center; min-height: 46px; padding: 8px 4px; font-size: 15.5px; color: var(--ink-2); text-decoration: none; }
  .nav-m-sub a:hover { color: var(--teal-ink); }
  .nav-m-ctas { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
  .nav-m-ctas .btn { width: 100%; justify-content: center; min-height: 48px; font-size: 16px; }
  .cvh-grid, .imx-hero-grid { grid-template-columns: 1fr; gap: 44px; min-height: 0; align-items: start; }
  .cvh-collage { height: 440px; max-width: 560px; margin: 0 auto; width: 100%; }
  .cvh-copy, .cvh-sub { max-width: none; }
  .cvh-figure, .impact-portrait { margin: 0 auto; }
  .fx-badges-tr { position: static; margin: 0 0 32px auto; }
}

@media (max-width: 980px) {
  .pcx-grid { grid-template-columns: 1fr; gap: 18px; }
  .prf-media { aspect-ratio: 16/9; }
  .csf-panel, .imx-band, .we-split, .zz-row, .zz-row.zz-reverse { grid-template-columns: 1fr; gap: 32px; }
  .zz-row.zz-reverse .zz-media, .zz-row.zz-reverse .zz-copy { order: initial; }
  .pl-afford-grid, .dsh-grid, .trust-band, .why-grid { grid-template-columns: 1fr; gap: 28px; }
  .vp-grid, .nurture-grid, .nurture-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .pf-panel { grid-template-columns: 1fr; gap: 24px; }
  .ll-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: none; gap: 0; max-width: 440px; margin: 0 auto; }
  .ll-card { grid-area: auto; }
  .ll-ar { display: none; }
  .ll-card:not(:last-child) { margin-bottom: 46px; }
  .ll-loopnote { display: flex; }
  .trust-grid { grid-template-columns: repeat(3, 1fr); }
  .st-chapter, .st-chapter.st-reverse { grid-template-columns: 1fr; gap: 28px; padding: 52px 0; }
  .st-chapter .st-media, .st-chapter.st-reverse .st-media { order: 1; }
  .st-chapter .st-copy, .st-chapter.st-reverse .st-copy { order: 2; margin: 0; max-width: 600px; }
  .si-grid, .imx-si-grid, .ch-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .cmh-wa { flex-direction: column; text-align: center; padding: 40px 28px; }
  .imx-band-photo { min-height: 240px; order: -1; }
}

@media (max-width: 768px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .cvh-collage { display: none; }
  h1, .cvh-h1, .pg-h1, .cs-title, .st-intro-h { font-size: 36px; }
  h2, .section-title, .pg-h2, .vp-h, .final-cta-h, .trust-h, .comm-cta-h, .st-h, .zz-h, .we-bigh, .pf-title, .pex-h, .cmh-wa-h, .faq-h { font-size: 28px; }
  .imx-band-quote { font-size: 18px; }
  h4 { font-size: 18px; }
  body { font-size: 16px; }
  .cvh-sub, .section-sub, .pg-sub, .pg-section-sub, .comm-lead, .team-intro, .comm-cta-p, .nurture-intro, .st-intro-sub, .pex-sub, .pf-sub, .trust-intro { font-size: 16px; }
  .fx-links-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
  .fx-brand-col { grid-column: 1 / -1; }
  .fx-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
  .btn, .cmh-btn, .pg-btn { min-height: 44px; }
  .contact-grid, .pex-grid { grid-template-columns: 1fr; gap: 36px; }
  select, input, textarea { font-size: 16px; }
  .srcviz { aspect-ratio: auto; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
  .srcviz-bg, .srcviz-proc { display: none; }
  .srcviz-chip { position: static; }
}

@media (max-width: 560px) {
  .si-grid, .imx-si-grid, .ch-grid, .trust-grid, .nurture-grid, .nurture-grid-4, .imx-tiles, .imx-tiles-5 { grid-template-columns: 1fr; }
  .st-rail-num { display: none; }
}

@media (max-width: 480px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .fx-links-inner { grid-template-columns: 1fr; }
  .cvh-ctas .cmh-btn, .final-cta-actions a { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track, .fc-slide, .st-rail-fill { animation: none; transition: none; }
}

/* ============ Pricing v2 ============ */
.pricing-anchor { flex-basis: 100%; margin: 0; font-size: 13.5px; color: var(--ink-2); font-weight: 500; }

/* Plan tag on the elevated centre card */
.plan-card { position: relative; }
.plan-tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--teal); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em; padding: 6px 16px; border-radius: 999px; box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--teal) 70%, transparent); }

/* Section 3 — feature grid */
.feat-section { padding: var(--section-pad) 0; background: var(--surface-0); border-top: 1px solid var(--hairline); }
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.feat-tile { display: flex; gap: 16px; align-items: flex-start; background: var(--surface-0); border-radius: var(--r-lg); padding: 22px 22px; box-shadow: var(--shadow-sm); }
.feat-ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; }
.feat-ic svg { width: 22px; height: 22px; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.feat-body { min-width: 0; }
.feat-label { font-weight: 700; font-size: 16px; color: var(--ink); letter-spacing: -0.01em; }
.feat-desc { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin-top: 3px; }
.feat-notes { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--hairline); }
.feat-note { flex: 1 1 300px; display: flex; gap: 11px; align-items: flex-start; margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.feat-note svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--teal-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Section 4 — how we work together */
.hww-section { padding: 96px 0; }
.hww-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.hww-card { background: var(--surface-0); border-radius: var(--r-lg); padding: 30px 28px; box-shadow: var(--shadow-sm); }
.hww-badge { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--ink); color: #fff; font-weight: 700; font-size: 17px; }
.hww-title { font-size: 21px; font-weight: 700; color: var(--ink); margin: 18px 0 8px; letter-spacing: -0.01em; }
.hww-value { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); margin: 0 0 18px; }
.hww-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.hww-tag { font-size: 12.5px; font-weight: 600; color: var(--teal-ink); background: color-mix(in srgb, var(--teal) 12%, #fff); border: 1px solid color-mix(in srgb, var(--teal) 24%, #fff); border-radius: 999px; padding: 5px 12px; }
.hww-never { text-align: center; margin: 40px 0 0; font-size: 18px; font-weight: 700; color: var(--teal-ink); letter-spacing: -0.01em; }

/* Section 5 — pro bono band */
.probono-band { background: var(--surface-0); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: var(--section-pad-sm) 0; }
.probono-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.probono-copy { max-width: 620px; }
.probono-h { font-size: 26px; font-weight: 700; color: var(--ink); margin: 0 0 8px; letter-spacing: -0.02em; }
.probono-sub { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.probono-cta { flex-shrink: 0; }

/* Section 6 — social proof card */
.pproof-section { background: var(--surface-1); border-top: 1px solid var(--hairline); padding: var(--section-pad) 0; }

@media (max-width: 900px) {
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .hww-grid { grid-template-columns: 1fr; }
    }
@media (max-width: 560px) {
  .feat-grid { grid-template-columns: 1fr; }
  .probono-inner { flex-direction: column; align-items: flex-start; }
  .probono-cta { width: 100%; justify-content: center; }
  }

/* ---------- 31. Interactive demo tour (About) ---------- */
.dtr-frame { position: relative; max-width: 1000px; margin: 0 auto; background: var(--surface-0); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; outline: none; }
.dtr-frame:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 35%, transparent), var(--shadow-lg); }
.dtr-frame.is-expanded { position: fixed; inset: 0; z-index: 2000; max-width: none; border-radius: 0; border: 0; overflow: auto; }
.dtr-chrome { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--navy); }
.dtr-dot { width: 10px; height: 10px; border-radius: var(--r-pill); }
.dtr-dot-r { background: #FF5F57; } .dtr-dot-y { background: #FEBC2E; } .dtr-dot-g { background: #28C840; }
.dtr-url { flex: 1; margin-left: 10px; padding: 6px 14px; background: rgba(255,255,255,.08); border-radius: var(--r-sm); font-size: 12.5px; letter-spacing: .01em; color: rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.dtr-expand { width: 30px; height: 30px; display: grid; place-items: center; background: none; border: 0; border-radius: var(--r-sm); color: rgba(255,255,255,.5); cursor: pointer; }
.dtr-expand:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); }
.dtr-expand svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dtr-progress { display: flex; gap: 4px; padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--hairline); }
.dtr-seg { height: 4px; flex: 1; border-radius: var(--r-pill); background: var(--hairline); transition: background var(--dur-slow) var(--ease); }
.dtr-seg.is-active { background: var(--teal); }
.dtr-seg.is-done { background: var(--navy); }
.dtr-viewport { position: relative; background: var(--surface-2); }
.dtr-slide { display: none; position: relative; }
.dtr-slide.is-active { display: block; animation: dtrFade var(--dur-slow) var(--ease); }
.dtr-viewport::after { content: ""; display: none; }
.dtr-frame:not(.is-expanded) .dtr-viewport { padding-bottom: 24px; }
@keyframes dtrFade { from { opacity: 0; } to { opacity: 1; } }
.dtr-slide img { width: 100%; height: auto; display: block; }
.dtr-frame.is-expanded .dtr-viewport { min-height: calc(100vh - 80px); display: flex; align-items: center; justify-content: center; }
.dtr-frame.is-expanded .dtr-slide.is-active { width: min(100%, calc((100vh - 90px) * 1.86)); margin: 0 auto; }
.dtr-dim { position: absolute; inset: 0; background: rgba(10,37,64,.16); z-index: 5; opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease); }
.dtr-dim.is-visible { opacity: 1; }
.dtr-hotspot { position: absolute; width: 44px; height: 44px; border-radius: var(--r-pill); border: 0; background: transparent; cursor: pointer; z-index: 10; transform: translate(-50%,-50%); padding: 0; }
.dtr-hotspot::before { content: ""; position: absolute; inset: -4px; border-radius: var(--r-pill); border: 2px solid var(--teal); animation: dtrPulse 2s ease-in-out infinite; }
.dtr-hotspot::after { content: ""; position: absolute; inset: 4px; border-radius: var(--r-pill); background: var(--teal); opacity: .25; animation: dtrGlow 2s ease-in-out infinite; }
.dtr-hotspot:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@keyframes dtrPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0; } }
@keyframes dtrGlow { 0%, 100% { opacity: .25; } 50% { opacity: .5; } }
.dtr-tip { position: absolute; z-index: 20; width: 300px; background: var(--navy); color: #fff; border-radius: var(--r-md); padding: 18px 20px; box-shadow: var(--shadow-lg); animation: dtrFade var(--dur-slow) var(--ease) both; }
.dtr-tip::after { content: ""; position: absolute; width: 12px; height: 12px; background: var(--navy); transform: rotate(45deg); }
.dtr-tip.p-below { transform: translate(-50%, 32px); }
.dtr-tip.p-below::after { top: -6px; left: 50%; margin-left: -6px; }
.dtr-tip.p-above { transform: translate(-50%, calc(-100% - 32px)); }
.dtr-tip.p-above::after { bottom: -6px; left: 50%; margin-left: -6px; }
.dtr-tip.p-below-end { transform: translate(calc(-100% + 40px), 32px); }
.dtr-tip.p-below-end::after { top: -6px; right: 26px; }
.dtr-kicker { font-size: 11px; font-weight: 600; color: var(--teal); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.dtr-tip-title { font-size: 16px; font-weight: 600; line-height: 1.3; margin-bottom: 6px; }
.dtr-tip-desc { font-size: 13px; color: rgba(255,255,255,.72); line-height: 1.5; margin-bottom: 14px; }
.dtr-tip-actions { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.dtr-counter { font-size: 12px; color: rgba(255,255,255,.45); font-variant-numeric: tabular-nums; }
.dtr-btn { padding: 8px 18px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; border: 0; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.dtr-btn-primary { background: var(--teal-ink); color: #fff; }
.dtr-btn-primary:hover { background: color-mix(in srgb, var(--teal-ink) 80%, #000); }
.dtr-btn-ghost { background: transparent; color: rgba(255,255,255,.65); padding: 8px 10px; }
.dtr-btn-ghost:hover { color: #fff; }
.dtr-overlay { position: absolute; inset: 0; background: rgba(10,37,64,.72); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 30; padding: 24px; overflow: auto; }
.dtr-card { background: var(--surface-0); border-radius: var(--r-lg); padding: 40px 44px; text-align: center; max-width: 460px; box-shadow: var(--shadow-lg); }
.dtr-card h3 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); margin: 0 0 10px; }
.dtr-card p { font-size: 15px; color: var(--ink-2); line-height: 1.55; margin: 0 0 24px; }
.dtr-card-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.dtr-hint { margin-top: 14px; font-size: 13px; color: var(--ink-2); display: flex; align-items: center; justify-content: center; gap: 6px; }
.dtr-hint svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.dtr-mcard { display: none; }
.dtr-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 768px) {
  .dtr-tip, .dtr-hotspot, .dtr-dim, .dtr-url { display: none; }
  .dtr-mcard { display: block; padding: 16px; border-top: 1px solid var(--hairline); background: var(--surface-0); }
  .dtr-mcard .dtr-kicker { color: var(--teal-ink); }
  .dtr-mtitle { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
  .dtr-mdesc { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin-bottom: 12px; }
  .dtr-mactions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .dtr-mbtn { min-height: 44px; padding: 10px 20px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; border: 0; cursor: pointer; font-family: inherit; }
  .dtr-mbtn-primary { background: var(--teal-ink); color: #fff; }
  .dtr-mbtn-ghost { background: var(--surface-0); color: var(--ink); border: 1.5px solid var(--hairline); }
  .dtr-mbtn-ghost:disabled { opacity: .4; cursor: default; }
  .dtr-mcounter { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .dtr-card { padding: 28px 22px; }
  .dtr-frame.is-expanded .dtr-viewport { min-height: 0; display: block; }
  .dtr-frame.is-expanded .dtr-slide.is-active { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .dtr-slide.is-active, .dtr-tip, .dtr-hotspot::before, .dtr-hotspot::after { animation: none; }
  .dtr-seg, .dtr-dim { transition: none; }
}

/* Key engagement areas — icon tiles (About) */
.we-section .pg-section-head{text-align:center}
.we-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:12px}
.we-tile{background:var(--surface-0);border-radius:var(--r-lg);padding:28px 24px 26px;min-height:208px;display:flex;flex-direction:column;box-shadow:var(--shadow-card);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.we-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-pop)}
.we-tile-ico{color:var(--ink)}
.we-tile-ico svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.we-tile-ico svg [fill="currentColor"]{fill:currentColor;stroke:none}
.we-tile-t{margin-top:auto;font-size:19px;font-weight:700;line-height:1.25;letter-spacing:-0.01em;color:var(--ink)}
.we-cta{text-align:center;margin-top:40px}
@media (max-width:1000px){.we-tiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.we-tiles{grid-template-columns:repeat(2,1fr)}}

/* ---------- 31b. Demo tour v2 — combined 27-step demo (mode switcher, phase grouping, tooltip variants) ---------- */
.dtr-frame { max-width: 1100px; border-radius: var(--r-lg); box-shadow: 0 24px 48px -12px rgba(0,191,166,.15), 0 40px 80px -20px rgba(10,37,64,.18); }
.dtr-frame.is-expanded .dtr-slide.is-active { width: min(100%, calc((100vh - 90px) * 1.98)); }
.dtr-modes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: fit-content; margin: 0 auto 32px; padding: 5px; background: var(--surface-0); border: 1px solid var(--hairline); border-radius: var(--r-pill); box-shadow: 0 2px 8px rgba(10,37,64,.06); }
.dtr-mode { border: 0; padding: 9px 18px; border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.dtr-mode:hover { background: var(--surface-2); color: var(--ink); }
.dtr-mode.is-active { background: var(--navy); color: #fff; }
.dtr-mode:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dtr-mode-n { opacity: .6; margin-left: 4px; font-variant-numeric: tabular-nums; }
.dtr-seg { cursor: default; }
.dtr-seg.is-gap { margin-right: 8px; }
.dtr-tip { border-radius: var(--r-md); padding: 20px; box-shadow: 0 12px 32px rgba(10,37,64,.25); transform: none; animation: dtrTipEnter var(--dur-slow) var(--ease) both; }
.dtr-tip.s-below::after { top: -6px; left: var(--ax); margin-left: -6px; }
.dtr-tip.s-above::after { bottom: -6px; left: var(--ax); margin-left: -6px; }
.dtr-tip.s-right::after { left: -6px; top: var(--ay); margin-top: -6px; }
.dtr-tip.s-left::after { right: -6px; top: var(--ay); margin-top: -6px; }
@keyframes dtrTipEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dtr-tip-desc { margin-bottom: 16px; }
.dtr-counter { color: rgba(255,255,255,.4); }
.dtr-btn-ghost.is-hidden { visibility: hidden; }
.dtr-url, .dtr-counter, .dtr-mcounter { font-family: "Inter", sans-serif; font-size: 12px; }
.dtr-counter, .dtr-mcounter { white-space: nowrap; }
@media (max-width: 768px) { .dtr-modes { margin-bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { .dtr-tip { animation: none; } .dtr-mode { transition: none; } }

/* ---------- 32. v2 IA: nav pricing text button, twin cards, consulting, contact steps, ext-link icon ---------- */
.nav-pricing { margin-right: 2px; }
.x-ext { width: 13px; height: 13px; margin-left: 4px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: -1px; display: inline-block; }
.tc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1040px; margin: 0 auto; }
.tc-card { display: flex; flex-direction: column; gap: 10px; background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 40px 36px; }
.tc-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-ink); }
.tc-h { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0; text-wrap: pretty; }
.tc-p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.tc-link { font-weight: 600; font-size: 15px; color: var(--teal-ink); margin-top: 8px; }
.tc-link:hover { color: var(--navy); }
.tc-sub { font-size: 13.5px; font-weight: 600; color: var(--ink-2); display: inline-flex; align-items: center; }
.tc-sub:hover { color: var(--teal-ink); }
@media (max-width: 768px) { .tc-grid { grid-template-columns: 1fr; } .tc-card { padding: 28px 24px; } }
.co-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1040px; margin: 0 auto; }
.co-pillar h3 { font-size: 19px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.co-pillar p { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; }
@media (max-width: 768px) { .co-pillars { grid-template-columns: 1fr; } }
.co-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 20px; }
.co-card { background: var(--surface-0); border-radius: var(--r-md); padding: 26px 22px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-md); transition: box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
.co-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.co-ico { width: 40px; height: 40px; color: var(--teal-ink); }
.co-ico svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.co-card h3 { font-size: 16.5px; font-weight: 700; color: var(--ink); margin: 4px 0 0; }
.co-card p { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.co-link { font-size: 14px; font-weight: 600; color: var(--teal-ink); margin-top: auto; padding-top: 6px; }
.co-link:hover { color: var(--navy); }
/* Pro bono — a light-green accent card sitting in the grid, with the CTA inside it. */
.co-probono-card { background: var(--surface-1); box-shadow: var(--shadow-md), inset 0 0 0 1px color-mix(in srgb, var(--teal) 22%, transparent); }
.co-probono-card .co-ico { color: var(--teal-ink); }
.co-probono-btn { margin-top: 16px; align-self: flex-start; font-size: 13px; line-height: 1; padding: 10px 18px; }
@media (max-width: 1024px) { .co-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .co-grid { grid-template-columns: 1fr; } }
.ct-steps { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.ct-step { display: flex; gap: 14px; align-items: flex-start; }
.ct-n { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--teal-ink); color: #fff; font-size: 13px; font-weight: 700; }
.ct-step p { margin: 2px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
/* BM-302: contrast-safe hover states for core button variants */
.btn-primary:hover { background: var(--teal-ink); color: #fff; }
.btn-ghost:hover { background: var(--surface-1); color: var(--ink); }
.cmh-btn-primary:hover { background: var(--teal-ink); color: #fff; }
.cmh-btn-ghost:hover { background: var(--surface-1); color: var(--ink); }
.pg-btn:hover { background: var(--teal-ink); color: #fff; }
.pf-shot-empty { display: grid; place-items: center; width: 100%; min-height: 260px; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-md); color: var(--ink-2); opacity: .55; }
.pf-shot-empty svg { width: 56px; height: 56px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.pf-creds { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; width: 100%; height: 100%; padding: 28px; text-align: left; background: linear-gradient(160deg, var(--surface-1), color-mix(in srgb, var(--teal) 9%, var(--surface-1))); }
.pf-cred-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; max-width: 380px; }
.pf-cred-list li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.45; color: var(--ink); }
.pf-cred-badge { display: block; text-decoration: none; transition: transform var(--dur) var(--ease); }
.pf-cred-badge img { width: 96px; height: auto; display: block; }
.pf-cred-badge:hover { transform: translateY(-2px); }
.pf-cred-badge:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-sm); }
.pf-cred-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--teal-ink); font-weight: 700; }
.fx-col a:hover, .fx-bottom a:hover { color: var(--teal-ink); }

/* ---------- 33. FAQ distribution (Pratiksha set, answers pending review) ---------- */
.faqg { border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface-1); overflow: hidden; }
.faqg.open { border-color: color-mix(in srgb, var(--teal) 45%, var(--hairline)); }
.faqg-h { margin: 0; font-size: 20px; }
.faqg-btn { display: flex; align-items: center; width: 100%; gap: 14px; text-align: left; cursor: pointer; padding: 22px 26px; background: transparent; border: 0; font-family: inherit; font-size: 20px; font-weight: 700; color: var(--ink); }
.faqg-btn:hover { color: var(--teal-ink); }
.faqg-btn > span:first-child { flex: 1 1 auto; }
.faqg-n { font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border-radius: var(--r-pill); padding: 3px 10px; font-variant-numeric: tabular-nums; }
.faqg.open .faqg-btn .faq-q-icon { transform: rotate(180deg); color: var(--teal); }
.faqg-body { padding: 0 18px 18px; }
.faqg-body .faq-item { background: var(--surface-0); }
.faq-a-pending { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--ink-2); opacity: .65; }
/* FaqMini inherits .faq-section (white, --section-pad) — tinted bands around it stay unambiguous (§1). */
.faq-viewall-row { margin: 28px 0 0; text-align: center; }
.faq-still { text-align: center; }
.faq-still-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.faq-still-inner p { max-width: 840px; margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 768px) { .faqg-btn { font-size: 17px; padding: 18px 20px; } .faqg-body { padding: 0 12px 12px; } }

/* ---------- 34. Native contact form (BM-344) + responsive pass (§3) ---------- */
.cform { display: flex; flex-direction: column; gap: 18px; background: var(--surface-0); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--shadow-md); max-width: 640px; }
.contact-trust { background: var(--surface-0); border-radius: var(--r-xl); box-shadow: var(--shadow-card); padding: 32px 30px; max-width: 420px; margin-left: auto; display: flex; flex-direction: column; gap: 22px; }
.contact-trust-badge { width: 92px; height: auto; display: block; }
.contact-trust-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.contact-trust-list li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.contact-trust-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--teal-ink); font-weight: 700; }
.cf-field { display: flex; flex-direction: column; gap: 7px; }
.cf-field label { font-size: 14px; font-weight: 600; color: var(--ink); }
.cf-field input, .cf-field textarea { min-height: 44px; padding: 10px 14px; font-family: inherit; font-size: 15.5px; color: var(--ink); background: var(--surface-1); border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: var(--r-sm); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.cf-field input:hover, .cf-field textarea:hover { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.cf-field textarea { resize: vertical; min-height: 120px; }
.cf-field input:focus, .cf-field textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); background: var(--surface-0); }
.cf-field input[aria-invalid="true"], .cf-field textarea[aria-invalid="true"] { border-color: var(--error); }
.cf-err { font-size: 13px; color: var(--error); }
.cf-fail { margin: 0; font-size: 14px; color: var(--error); }
.cf-submit { align-self: flex-start; min-height: 44px; }
.cf-submit[disabled] { background: var(--teal-ink); color: #fff; cursor: wait; }
.cf-done { background: var(--surface-0); border-radius: var(--r-lg); padding: 40px 32px; box-shadow: var(--shadow-md); max-width: 640px; }
.cf-done h3 { margin: 0 0 10px; font-size: 22px; color: var(--ink); }
.cf-done p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 768px) {
  .cform { padding: 22px 18px; }
  .cf-submit { align-self: stretch; width: 100%; justify-content: center; }
  .co-pillars { gap: 20px; }
  .dtr-modes { max-width: 100%; }
}
@media (max-width: 480px) {
  .btn, .cmh-btn { width: 100%; justify-content: center; }
  .nav-right .btn { width: auto; }
  .faq-viewall-row .btn { width: auto; }
  .pcx-grid { grid-template-columns: 1fr; }
}

/* ---------- 35. Testimonial wall (replaces photo proof collage) ---------- */
.pcx-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-ink); margin: 0 0 14px; }
.prf-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; max-width: var(--container); margin: 0 auto; }
.prf-tcard { display: flex; flex-direction: column; margin: 0; background: var(--surface-1); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 28px; }
.prf-tcard blockquote { margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: var(--ink); }
.prf-tcard figcaption { margin-top: auto; min-height: 120px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--hairline) 70%, transparent); display: flex; flex-direction: column; justify-content: flex-start; gap: 3px; font-size: 14px; }
.prf-tname { font-weight: 600; color: var(--ink); }
.prf-trole { color: var(--ink-2); }
@media (max-width: 768px) { .prf-wall { grid-template-columns: 1fr; max-width: 640px; } }

/* ---------- 36. A11y pass: focus visibility + reduced motion ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible, .cmh-btn:focus-visible, .pg-btn:focus-visible { outline-offset: 3px; border-radius: var(--r-pill); }
.cf-done-h { margin: 0 0 10px; font-size: 22px; color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track { animation: none; }
  .pf-shot, .pf-desc { animation: none; }
  .btn, .cmh-btn, .pg-btn, .nav-link, .logo-tile, .nurture-card, .si-card, .imx-tile-link,
  .hdh-card, .dsh-card, .res-card, .cmh-news-card, .ch-card, .co-card, .plan-card, .principle, .feat-tile, .hww-card { transition: none; }
  .nurture-card:hover, .si-card:hover, .logo-tile:hover, .imx-tile-link:hover,
  .hdh-card:hover, .dsh-card:hover, .res-card:hover, .cmh-news-card:hover, .ch-card:hover, .co-card:hover, .imx-tile-link:hover,
  .btn-primary:hover, .btn:hover, .pg-btn:hover, .nurture-btn:hover, .hdh-cta:hover { transform: none; }
  .btn-primary:hover .arw, .nurture-btn:hover::after, .btn:hover::after { transform: none; }
  /* image scale-on-hover and shimmer are motion too */
  .nurture-card:hover .nurture-thumb img, .cmh-news-card:hover .cmh-news-thumb img,
  .res-card-video:hover .res-thumb img, .logo-tile:hover .logo-img { transform: none; }
  .skeleton::after { animation: none; }
}

/* ---------- 37. Impeccable audit (BM-357): tokenized implementation-partner block ---------- */
.team-partner { margin-top: clamp(56px, 7vw, 80px); text-align: center; }
.tp-eyebrow { font-weight: 700; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-ink); margin-bottom: 22px; }
.tp-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--navy); border-radius: var(--r-lg); padding: 30px 52px; box-shadow: var(--shadow-lg); }
.tp-badge img { height: 38px; width: auto; display: block; }


/* Keyboard focus was invisible on both accordion controls (WCAG 2.4.7). */
.faq-q:focus-visible, .faqg-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--r-md); }

/* Keep the capability panel a fixed size across tabs. The left column's copy and checklist
   differ per tab, so the card was resizing 507->557px as you switched. min-height holds the
   tallest; the spacer reserves the CTA row on the one tab that has no CTA. Desktop only —
   below 900px the panel stacks and should size to its content. */
.pf-cta-spacer { display: block; height: 54px; }   /* matches the real .pf-cta height exactly */

/* ============================================================
   WRAP HANDLING — last block in the file on purpose.
   Placing these earlier let component rules override them on source order, which is
   exactly how orphaned last lines kept coming back. Set by element, not by class list,
   so new copy inherits the behaviour without anyone remembering to opt in.
     headings + short display lines -> balance (even line lengths)
     prose                          -> pretty  (never strand a lone word)
   Browsers cap balance at short blocks, so long prose falls back safely.
   ============================================================ */
main :is(h1, h2, h3, h4), footer :is(h2, h3) { text-wrap: balance; }
main p, footer p, main li, main figcaption, main blockquote { text-wrap: pretty; }
main :is(.section-sub, .se-sub, .comm-lead, .cvh-sub, .pricing-help-line, .cmh-news-desc,
         .si-desc, .si-title, .plan-tagline, .plan-note, .dsh-use, .hdh-text, .nurture-p,
         .st-body, .pf-desc, .co-card p, .faq-still p, .cmh-head p, .section-head p) { text-wrap: balance; }
/* FAQ answers and legal prose stay prose: a short final line is correct there. */
main :is(.faq-a p, .legal p, .privacy-body p) { text-wrap: pretty; }