/* ==========================================================================
   build-site BASELINE stylesheet — copy verbatim, then THEME the block below.
   To theme per client, change ONLY: (1) the color tokens, (2) --font-sans /
   --font-display, (3) the --radius-* scale, and load the matching Google font
   <link> in each HTML <head>. Do NOT edit the component rules or structural
   tokens further down — that is what guarantees the consistent, slick result.

   ⛔ THE TOKEN VALUES BELOW ARE PLACEHOLDERS, NOT A PALETTE TO SHIP. They are an
   arbitrary slate-teal + lime example so the file renders before theming. You MUST
   overwrite --primary / --accent / the band + surface colors / the fonts / radius
   with the CLIENT'S MEASURED brand (from 02-brand.spec.json design_system, derived
   from the logo swatches + Firecrawl branding). Shipping a site still on this teal/
   lime placeholder default (or its placeholder font) when the client's brand is
   different is THE "every site looks the same" defect — it is a build failure, not
   an acceptable fallback.

   COLOR PAIRING CONTRACT (the fix for white-on-white / invisible header):
   - Keep these EXACT token names — the components read them. Do not rename to
     --brand/--ink/--accent-ink (those are ignored -> defaults -> unreadable text).
   - --text/--text-secondary/--text-muted are for LIGHT bands only (--bg/--surface).
     On dark bands (--dark/--dark-mid/--primary) text is #fff / rgba(255,255,255,.8).
   - --accent is ALWAYS a BRIGHT highlight (CTA fills, dots, underlines). Never a
     text color on a light band. If the brand's main color is dark, it is --primary
     (a band/button color), NOT --accent — pick a separate bright accent.
   - --text must be near-black; --bg near-white. Verify body contrast >=4.5:1.
   ========================================================================== */

:root{
  /* --- FONT (theme me): the BODY face from the client's design-dna §2.1 industry pairing
     (Inter / Figtree / Inter Tight …). Never one default face for every client.
     Keep 'sans-fb' (the size-adjusted local fallback below) right after the client
     families when theming — it makes the web-font swap reflow-free (design-dna §2.8). --- */
  --font-sans:'Inter','sans-fb',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  /* Display: Inter Tight for the crisp modern-fintech feel (brand spec §fonts) */
  --font-display:'Inter Tight','sans-fb',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  /* Weight law: 400/500/600/650 only. Fonts loaded at wght@400..650. */
  /* --- COLOR (Lendora Funding brand — sampled from lendora_logo: green #17a24a + navy #141827, per 02-brand.spec.json) --- */
  --primary:#13883e;
  --primary-dark:#10763a;
  --primary-darker:#0f6f33;
  --accent:#22c455;
  --accent-dark:#17a24a;
  --secondary:#ebf4ee;
  --bg:#f8fbf9;
  --surface:#f2f6f4;
  --surface-2:#eaefec;
  --text:#0e391d;
  --text-secondary:#416c50;
  --text-muted:#597162;
  --border:rgba(14,57,29,.10);
  --dark:#0b1d11;
  --dark-mid:#102719;
  --dark-soft:#1a3724;
  --white:#fff;
  --ink-rgb:14, 57, 29;
  --brand-rgb:19, 136, 62;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --radius-pill:40px;
  /* Motion (design-dna §5.1): exactly TWO easing curves sitewide (+ one for move-and-return).
     Never the `ease` keyword, never `linear` (marquee/progress excepted), never `transition:all`, and no duration between .35s and .6s (except the sanctioned .5s image zoom). */
  --ease-out:cubic-bezier(.23,1,.32,1);       /* entrances / reveals */
  --ease-hover:cubic-bezier(.25,.46,.45,.94); /* hovers / toggles */
  --ease-inout:cubic-bezier(.645,.045,.355,1);/* move-and-return: accordions */
  /* Reveal shape (theme me from the archetype's motion level). `design_system.motion` has been
     recorded in the brand spec since day one and had NOWHERE to land, so every scroll reveal on
     every site was the identical hardcoded 24px / .7s regardless of what the archetype asked
     for. These two are the landing pad. The EASING is deliberately NOT themeable — §5.1 above
     fixes every entrance at --ease-out, and a per-client easing token would be the fourth curve
     that rule exists to forbid. Defaults are exactly the current hardcoded values, so an
     un-themed build is byte-identical.
       restrained → --motion-dist:12px; --motion-dur:.6s
       pronounced → --motion-dist:40px; --motion-dur:.9s
     Durations must clear the .35–.6s dead band in §5.1. Only these two — do NOT invent new
     animations; the reveal itself is baseline. */
  --motion-dist:24px;
  --motion-dur:.7s;
  --shadow-sm:0 1px 2px rgba(14,57,29,.06), 0 1px 3px rgba(14,57,29,.10);
  --shadow-md:0 1px 1px rgba(14,57,29,.05), 0 2px 8px rgba(14,57,29,.06), 0 4px 16px rgba(14,57,29,.06), 0 8px 32px rgba(14,57,29,.05);
  --shadow-lg:0 12px 24px -6px rgba(14,57,29,.14), 0 4px 8px -2px rgba(14,57,29,.08), 0 0 0 1px rgba(14,57,29,.04);
  --maxw:1200px;
  --header-h:72px;       /* nav bar height */
  --topbar-h:36px;       /* utility top bar height */
  --header-total:108px;  /* topbar + nav bar — body offset on non-transparent pages */
}

/* Size-adjusted LOCAL FALLBACK face (design-dna §2.8 / T11): metric-matched to a typical
   grotesk so the swap to the web font causes no visible reflow/CLS. Referenced from
   --font-sans above; tune the overrides per family if the pairing is metrically unusual. */
@font-face{font-family:'sans-fb';src:local('Arial');size-adjust:99%;ascent-override:97%;descent-override:24%;line-gap-override:0%}

/* ---------- Reset & Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-sans);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.65;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}/* height:auto is REQUIRED: without it an HTML height="N" attribute on an inline-styled img leaks through and stretches the image (a width:100%+aspect-ratio img with no CSS height renders at the attribute height). Canonical responsive-image rule. */
/* SAFETY NET — inline ICONS never balloon. Every icon is a 24-grid line SVG; this gives a
   small default size so an icon dropped in a container without its own rule (faq-ico, ci-ico,
   a bare <ul><li>, an improvised block, etc.) can't render at its 300×150 intrinsic size.
   The specific `.x svg{width:Npx}` component rules below are higher-specificity and override
   this for the known containers. Logos are <img> (PNG/webp), not inline SVG, so they're safe. */
svg{width:1.25em;height:1.25em;flex-shrink:0;vertical-align:middle}
/* SAFETY NET — a large source photo must never blow a section apart (the "images broke in size"
   bug: a 1500px product PNG rendered full-width, one per row). Content images are capped and
   cover-cropped; full-bleed hero/CTA backgrounds and logos are explicitly exempt. The canonical
   card/media wrappers (.cat-card/.img-card/.related-card/.split-media …) still set their own
   fixed aspect ratios; this only catches improvised bare <img>. */
main img:not(.hero-dark-bg):not(.cta-band-bg):not(.logo-img):not(.footer-logo):not([class*="-bg"]){max-height:560px;object-fit:cover}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit;border:none;outline:none;background:none}
button{cursor:pointer}
/* Keyboard focus (design-dna §3.5 / C8): a soft brand ring on every interactive element —
   never the browser default outline, never zero focus styles. Element-level specificity so
   component focus rules (e.g. .form-control:focus) still win where they define their own. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 38%,transparent)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.14;color:var(--text)}
/* Widow/orphan control (design-dna §2.5 / T10): balanced headings, no orphan words in prose.
   Declarative — unsupported browsers ignore both. */
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
h1{font-size:clamp(1.95rem,1.24rem + 3.14vw,3.6rem);font-weight:650;letter-spacing:-.022em}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.3rem}
p{color:var(--text-secondary)}
main{flex:1 0 auto}
::selection{background:var(--accent);color:var(--text)}

/* ---------- Utilities ---------- */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
@media(min-width:640px){.container{padding:0 24px}}
@media(min-width:1024px){.container{padding:0 32px}}
.text-center{text-align:center}
.text-accent{color:var(--accent)}
.text-primary{color:var(--primary-darker)}
.text-white{color:#fff}
.muted{color:var(--text-muted)}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-12{margin-top:12px}.mt-18{margin-top:18px}.mt-20{margin-top:20px}.mt-22{margin-top:22px}.mt-26{margin-top:26px}.mt-28{margin-top:28px}
.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex-wrap{flex-wrap:wrap}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}
.prose-block{max-width:820px;margin:0 auto}.cta-narrow-center{text-align:center;max-width:640px;margin:0 auto}
.error-code{font-size:clamp(6rem,20vw,12rem);font-weight:650;color:var(--primary);line-height:1;letter-spacing:-.04em}
.form-hint{font-size:.92rem;margin-top:8px}.form-consent{font-size:.82rem;color:var(--text-muted);margin-top:12px}
.hm-pill-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 20px}
.lead{font-size:1.12rem;color:var(--text-secondary)}
/* ── JUSTIFIED BODY COPY ──────────────────────────────────────────────────────────────────
   Multi-line prose set flush on BOTH edges, so a section reads as a clean block instead of a
   ragged right edge. Deliberate limits, because naive justification is WORSE than ragged:
   - hyphens:auto is mandatory — without it justification stretches word gaps into white
     "rivers" down the column (needs lang on <html>; the baseline sets lang="en").
   - >=768px only. A ~340px phone column is ~6 words wide; justifying that opens huge gaps.
   - Never on centered headers, blurbs, labels, nav or buttons — justification needs ~3+ lines.
   Opt a block out with .no-justify. */
.prose p,.prose li,.split-body p,.section-body p,.rich-text p,.justify{text-wrap:pretty}
@media(min-width:768px){
  .prose p,.prose li,.split-body p,.section-body p,.rich-text p,.justify{
    text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto}
  .prose p,.split-body p,.section-body p,.rich-text p,.justify{text-align-last:left}
}
.no-justify,.no-justify p,.no-justify li{text-align:left!important;hyphens:manual!important}
.section-header p,.hero-sub,.lead,.card p,.cat-card p,.testi-quote,.stat-label,
.di-sub,.footer-col p{text-align:inherit;hyphens:manual}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--primary-darker);background:var(--secondary);padding:6px 14px;border-radius:var(--radius-pill);margin-bottom:16px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-dark)}
.eyebrow-light{color:var(--primary-darker);background:var(--secondary)}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:.97rem;line-height:1;padding:14px 26px;border-radius:var(--radius-pill);border:2px solid transparent;transition:transform .16s var(--ease-hover),box-shadow .16s var(--ease-hover),background .16s var(--ease-hover),color .16s var(--ease-hover);cursor:pointer;white-space:nowrap}
.btn svg{width:17px;height:17px;flex-shrink:0}
/* Filled CTA is always brand + white type. --accent is a highlight (dots, .hl), never
   the button fill — when a lite build copies the brand red into both --primary AND
   --accent, accent-fill + body --text became maroon-on-red (unreadably muddy). */
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary-darker)}
.btn-primary:hover{background:var(--primary-dark);color:#fff;border-color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 10px 24px color-mix(in srgb,var(--primary-dark) 40%,transparent)}
.btn-dark{background:var(--primary);color:#fff;border-color:var(--primary-darker)}
.btn-dark:hover{background:var(--primary-dark);border-color:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-outline:hover{background:#fff;color:var(--text);border-color:#fff;transform:translateY(-2px)}
.btn-outline-dark{background:transparent;color:var(--primary-darker);border-color:var(--primary-darker)}
.btn-outline-dark:hover{background:var(--primary);color:#fff;transform:translateY(-2px)}
.btn-sm{padding:10px 18px;font-size:.88rem}
.btn-lg{padding:17px 34px;font-size:1.05rem}
.btn-block{width:100%}

/* ---------- Header ---------- */
/* Frosted sticky bar (design-dna §4.6): translucent surface + heavy blur + a HAIRLINE —
   never a drop shadow on the bar. */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,.72);backdrop-filter:blur(20px) saturate(1.8);-webkit-backdrop-filter:blur(20px) saturate(1.8);border-bottom:1px solid var(--border);transition:background-color .3s var(--ease-hover),box-shadow .3s var(--ease-hover)}
@supports not ((-webkit-backdrop-filter:blur(12px)) or (backdrop-filter:blur(12px))){.site-header{background:rgba(255,255,255,.97)}}
body{padding-top:var(--header-total)}
body.has-transparent-header{padding-top:0}
/* No utility topbar (SITE.topbar=false): header is just the 72px nav, so the offset
   that body padding + the mobile menu read collapses to --header-h. */
html.no-topbar{--topbar-h:0px;--header-total:var(--header-h)}
.topbar{background:var(--primary-darker);color:rgba(255,255,255,.82);font-size:.82rem}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:36px}
.topbar a{color:rgba(255,255,255,.82);display:inline-flex;align-items:center;gap:6px;transition:color .15s var(--ease-hover)}
.topbar a:hover{color:var(--accent)}
.topbar svg{width:14px;height:14px}
.topbar-right{display:flex;gap:20px;align-items:center}
.topbar-hours{display:none;align-items:center;gap:6px;color:rgba(255,255,255,.82)}
.topbar .topbar-loc{display:none}
@media(min-width:768px){.topbar .topbar-loc{display:inline-flex}.topbar-hours{display:inline-flex}}
/* white-space:nowrap on the bar INHERITS to every text descendant, so no header item
   (logo wordmark, nav link, phone, CTA — even one added later) can ever wrap to a 2nd/3rd
   line. If items then exceed the width they overflow horizontally, and initHeaderFit sheds
   them / collapses to the hamburger. Dropdown + mobile panels reset to normal wrapping. */
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:nowrap;white-space:nowrap;height:var(--header-h)}
.dropdown-menu,.mobile-menu{white-space:normal}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;max-width:min(46vw,240px)}
/* The logo is CAPPED in both axes so a large/wide brand mark can never push the nav to a
   second line. A tall or wide source logo is scaled down (object-fit:contain), not allowed
   to dictate the header width. */
/* min-width:0 overrides the flex item's default auto min-size (which is the
   aspect-ratio-derived width from the fixed 42px height, ~295px for a wide
   wordmark) — without it the image can't shrink below that floor and pokes
   out through the chip's edge on narrow viewports where .logo's own
   max-width (46vw) is tighter than the image's 200px cap. */
.logo-img{height:42px;width:auto;max-width:min(200px,100%);min-width:0;object-fit:contain}
/* LOGO VISIBILITY GUARD — set at runtime by initLogoContrast(): the chip contrasts the
   LOGO (not the bar), so a light/white logo stays visible on the white header and a dark
   logo stays visible over a dark hero, in every header state. A chip that happens to match
   the bar is simply invisible (harmless). Never ship a logo that blends into its bar. */
.logo.logo-chip-dark{background:var(--dark,#101828);padding:5px 9px;border-radius:9px}
.logo.logo-chip-light{background:#fff;padding:5px 9px;border-radius:9px}
/* Text wordmark beside the logo — FORBIDDEN unless the logo is a bare icon/monogram with
   no legible name, attested with data-icon-only-logo="true" on the .logo anchor (the QA
   probe blocks any unattested text beside the logo: the name-written-twice defect). MUST
   be styled (never let it inherit the dark body --text, or it goes dark-on-dark over the
   transparent hero header — a real defect). Color flips with the header state below. */
.logo-wordmark{font-weight:650;font-size:1.12rem;letter-spacing:-.02em;line-height:1.06;color:var(--text);white-space:nowrap}
.logo-wordmark-sub{display:block;font-weight:600;font-size:.68rem;letter-spacing:.01em;text-transform:none;color:var(--text-muted)}
.desktop-nav{display:none;align-items:center;gap:6px;flex-wrap:nowrap}
@media(min-width:1024px){.desktop-nav{display:flex}}
.nav-link{display:inline-flex;align-items:center;gap:5px;padding:9px 14px;font-weight:600;font-size:clamp(.9rem,.7rem + .3125vw,.95rem);white-space:nowrap;color:var(--text);border-radius:var(--radius-sm);transition:color .15s var(--ease-hover),background .15s var(--ease-hover)}
.nav-link:hover{color:var(--primary-darker);background:var(--surface)}
.nav-link[aria-current="page"]{color:var(--primary-darker)}   /* current page's own item — stamped per page when inlining the header partial */
.nav-link svg{width:14px;height:14px;transition:transform .2s var(--ease-hover)}
.nav-dropdown{position:relative}
.nav-dropdown:hover .nav-link svg,.nav-dropdown:focus-within .nav-link svg,.nav-dropdown.open .nav-link svg{transform:rotate(180deg)}
/* HOVER BRIDGE — the fix for "the dropdown closes before I can click it". The panel sits
   10px below the trigger; without a bridge the cursor crosses dead space on the way down,
   :hover drops, and the menu vanishes mid-reach. This invisible strip spans that gap and is
   part of .nav-dropdown, so hover is continuous from link to panel. It exists only while the
   menu is open, so it can never intercept clicks on the hero underneath. */
.nav-dropdown::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px;display:none}
.nav-dropdown:hover::after,.nav-dropdown:focus-within::after,.nav-dropdown.open::after{display:block}
.dropdown-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:480px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:16px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease,visibility .18s;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dropdown-menu.single-col{grid-template-columns:1fr;min-width:280px}
/* OPEN STATE — hover (mouse), focus-within (keyboard), .open (click/touch via
   initNavDropdowns). Touch devices fire no hover at all, so without .open the whole mega-nav
   was unreachable on tablets and touch laptops. */
.nav-dropdown:hover .dropdown-menu,.nav-dropdown:focus-within .dropdown-menu,.nav-dropdown.open .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
/* Tap targets: every row >=44px (WCAG 2.5.8). The old 10px/5px padding gave ~24px rows. */
.dropdown-item{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:12px 14px;min-height:44px;border-radius:var(--radius-sm);transition:background .15s}
.dropdown-item:hover,.dropdown-item:focus-visible{background:var(--surface)}
.dropdown-item .di-title{font-weight:600;font-size:.94rem;color:var(--text);display:flex;align-items:center;gap:8px;line-height:1.3}
.dropdown-item .di-title svg{width:16px;height:16px;color:var(--primary-darker)}
.dropdown-item .di-sub{font-size:.81rem;line-height:1.45;color:var(--text-muted);padding-left:24px}
.dropdown-foot{grid-column:1/-1;margin-top:8px;padding:12px 14px;min-height:44px;border-top:1px solid var(--border);font-weight:600;font-size:.88rem;color:var(--primary-darker);display:flex;align-items:center;gap:6px;border-radius:var(--radius-sm)}
.dropdown-foot:hover{background:var(--surface)}
.dropdown-foot svg{width:15px;height:15px}
/* mega menu (Our Services) */
.dropdown-menu.mega{min-width:580px}
.mega-col{padding:10px 12px}
.mega-col .mc-head{display:flex;align-items:center;gap:9px;font-weight:650;font-size:.92rem;color:var(--text);margin-bottom:10px;padding:6px 8px;min-height:44px;border-radius:var(--radius-sm)}
.mega-col .mc-head .mc-ico{width:30px;height:30px;border-radius:8px;background:var(--secondary);color:var(--primary-darker);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mega-col .mc-head .mc-ico svg{width:16px;height:16px}
.mega-col .mc-head:hover{color:var(--primary-darker);background:var(--surface)}
.mega-col .mc-links{display:flex;flex-direction:column;gap:4px}
.mega-col .mc-links a{display:flex;align-items:center;font-size:.88rem;line-height:1.35;color:var(--text-secondary);padding:11px 10px 11px 39px;min-height:44px;border-radius:var(--radius-sm);transition:background .15s,color .15s}
.mega-col .mc-links a:hover,.mega-col .mc-links a:focus-visible{background:var(--surface);color:var(--primary-darker)}
/* Below 1024px the desktop nav is hidden and links live in the drawer — a stale :hover/.open
   must never leave an absolutely-positioned panel floating over the page. */
@media(max-width:1023px){.nav-dropdown .dropdown-menu{display:none}.nav-dropdown::after{display:none}}
.header-actions{display:none;align-items:center;gap:14px}
@media(min-width:1024px){.header-actions{display:flex}}
.header-phone{display:none;align-items:center;gap:7px;font-weight:600;white-space:nowrap;color:var(--text);font-size:.95rem}
.header-phone svg{width:17px;height:17px;color:var(--primary-darker)}
@media(min-width:1200px){.header-phone{display:inline-flex}}
.mobile-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-sm);color:var(--text)}
.mobile-toggle svg{width:26px;height:26px}
@media(min-width:1024px){.mobile-toggle{display:none}}

/* transparent header over dark hero */
.header-transparent{background:transparent;border-bottom-color:transparent}
.header-transparent .nav-link,.header-transparent .header-phone{color:#fff}
.header-transparent .nav-link:hover{background:rgba(255,255,255,.12);color:#fff}
.header-transparent .header-phone svg{color:var(--accent)}
.header-transparent .mobile-toggle{color:#fff}
.header-transparent .logo-wordmark{color:#fff}
.header-transparent .logo-wordmark-sub{color:rgba(255,255,255,.78)}
.header-scrolled{background:rgba(255,255,255,.92);border-bottom-color:var(--border);box-shadow:none}/* frost + hairline only — no drop shadow (design-dna §4.6) */
.header-scrolled .nav-link,.header-scrolled .header-phone{color:var(--text)}
.header-scrolled .nav-link:hover{color:var(--primary-darker);background:var(--surface)}
.header-scrolled .header-phone svg{color:var(--primary-darker)}
.header-scrolled .mobile-toggle{color:var(--text)}
.header-scrolled .logo-img{filter:none}
.header-scrolled .logo-wordmark{color:var(--text)}
.header-scrolled .logo-wordmark-sub{color:var(--text-muted)}

/* Keep the ENTIRE header on ONE line — a big/wide logo must SHRINK before the nav wraps.
   When the brand logo is large, it is capped (above) and the nav is tightened at mid widths
   rather than allowed to fall to a second row (the "crammed, two-line header" defect). */
@media(min-width:1024px) and (max-width:1279px){
  .header-inner{gap:14px}
  /* .nav-link font-size is a fluid clamp in the base rule (.9rem@1024 → .95rem@1280, dna T5) */
  .nav-link{padding:9px 10px}
  .logo-img{height:38px;max-width:min(168px,100%)}
}

/* Header FIT-GUARD states (toggled by initHeaderFit so the bar never wraps/overflows).
   Step 1 — tight: shed the phone + wordmark and tighten nav so a heavy nav still fits one line. */
.site-header.header-tight .header-phone{display:none}
.site-header.header-tight .logo-wordmark{display:none}
.site-header.header-tight .desktop-nav{gap:2px}
.site-header.header-tight .nav-link{padding:8px 9px;font-size:.9rem}
/* Step 2 — collapse: still doesn't fit → fall back to the hamburger drawer at desktop width
   (far better than a wrapped/overflowing bar; the build should also lean the header). */
.site-header.header-collapse .desktop-nav,
.site-header.header-collapse .header-actions{display:none}
.site-header.header-collapse .mobile-toggle{display:inline-flex}

/* SOLID header over a dark hero — for a DARK brand logo that would vanish on the transparent
   (white-text) header. The header stays OPAQUE WHITE with DARK nav text, sitting on top of the
   dark hero, so the dark logo + nav are always legible. Set via SITE.solidHeader=true in main.js
   (no `header-transparent` is added; the body still gets `has-transparent-header` so the hero is
   full-bleed and the white bar overlaps its top). */
.header-solid{background:rgba(255,255,255,.97);border-bottom:1px solid var(--border);box-shadow:none}
.header-solid .nav-link,.header-solid .header-phone{color:var(--text)}
.header-solid .nav-link:hover{color:var(--primary-darker);background:var(--surface)}
.header-solid .header-phone svg{color:var(--primary-darker)}
.header-solid .mobile-toggle{color:var(--text)}
.header-solid .logo-img{filter:none}
.header-solid .logo-wordmark{color:var(--text)}
.header-solid .logo-wordmark-sub{color:var(--text-muted)}

/* ---------- mobile menu ----------
   ⛔ THE DRAWER MUST NEVER BE SIZED WITH `bottom:0`, AND `.site-header` MUST NEVER BE ITS
   ONLY POSITIONING CONTEXT.
   Why: the frosted bar sets `backdrop-filter`, and ANY filter / backdrop-filter / transform /
   perspective / contain / will-change on an ancestor makes THAT ancestor the containing block
   for `position:fixed` descendants (CSS Filter Effects §containing-block). The drawer is
   authored INSIDE <header class="site-header">, so `top:var(--header-total); bottom:0` resolved
   against the 72px BAR, not the viewport: the panel opened 58px tall — one visible link — and
   read as "the hamburger does nothing". It shipped on effectively every site.
   Two independent guards, both required — do not remove either:
     1. main.js `hoistMobileMenu()` re-parents #mobileMenu to <body> on load, so no header
        effect added later can ever trap it again;
     2. the EXPLICIT height below, so the panel is full-height even un-hoisted (old pages,
        a hand-edited header, a build that inlines the drawer somewhere else).
   z-index sits ABOVE the header (1000) and below the quote modal (1100). */
.mobile-menu{position:fixed;top:var(--header-total);left:0;right:0;background:#fff;z-index:1050;
  height:calc(100vh - var(--header-total));height:calc(100dvh - var(--header-total));
  max-height:none;transform:translateX(-100%);visibility:hidden;
  transition:transform .28s var(--ease-hover),visibility 0s linear .28s;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:18px 20px calc(40px + env(safe-area-inset-bottom))}
.mobile-menu.active{transform:translateX(0);visibility:visible;transition:transform .28s var(--ease-hover),visibility 0s}
@media(prefers-reduced-motion:reduce){.mobile-menu{transition:none}.mobile-menu.active{transition:none}}
.mobile-menu .mm-link{display:block;padding:14px 6px;font-weight:600;font-size:1.05rem;border-bottom:1px solid var(--border)}
.mobile-menu .mm-link[aria-current="page"]{color:var(--primary-darker)}
.mobile-menu .mm-group-label{padding:16px 6px 6px;font-size:.78rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.mobile-menu .mm-sub{display:block;padding:10px 6px 10px 18px;font-weight:600;color:var(--text-secondary);border-bottom:1px solid var(--surface)}
.mobile-menu .mm-cta{margin-top:22px}
.mobile-menu .mm-contact{margin-top:22px;padding-top:18px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px;font-size:.92rem}
.mobile-menu .mm-contact a{display:flex;align-items:center;gap:9px;color:var(--text-secondary)}
.mobile-menu .mm-contact svg{width:16px;height:16px;color:var(--primary-darker)}

/* ---------- Sections ---------- */
.section{padding:80px 0}
.section-sm{padding:52px 0}
.section-lg{padding:104px 0}
.section.surface,.section-sm.surface{background:var(--surface)}
.section.dark{background:var(--dark);color:#fff}
.section.dark h1,.section.dark h2,.section.dark h3,.section.dark h4{color:#fff}
.section.dark p{color:rgba(255,255,255,.74)}
.section-header{max-width:680px;margin:0 auto 48px;text-align:center;display:flex;flex-direction:column;align-items:center}
.section-header.left{margin-left:0;text-align:left;align-items:flex-start}
.section-header.label-below{display:flex;flex-direction:column;align-items:center;text-align:center}
.section-header.label-below .eyebrow{order:1;margin:0 0 16px}
.section-header.label-below h2{order:2;margin:0}
.section-header.label-below p{order:3;margin-top:20px}
.section-header h2{margin:10px 0 26px}
.section-header p{font-size:1.08rem}

/* ---------- Hero (dark) ---------- */
.hero-dark{position:relative;color:#fff;overflow:hidden;background:var(--dark)}
.hero-dark-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.68);z-index:0}
/* Directional TEXT-SIDE scrim (design-dna §3.10) — dark where the headline sits, letting the
   photo/video stay visible on the right. Never a flat full-frame dim. ≤639px it flips to a
   bottom-heavy 180° scrim (copy stacks over the lower half on mobile). */
.hero-dark::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--dark) 72%,transparent) 0%,color-mix(in srgb,var(--dark) 35%,transparent) 55%,transparent 100%);z-index:1}
@media(max-width:639px){.hero-dark::before{background:linear-gradient(180deg,color-mix(in srgb,var(--dark) 20%,transparent) 0%,color-mix(in srgb,var(--dark) 45%,transparent) 55%,color-mix(in srgb,var(--dark) 78%,transparent) 100%)}}
.hero-dark .container{position:relative;z-index:2}
.hero-pad{padding:130px 0 96px}
.hero-pad-sm{padding:120px 0 70px}
.hero-fullscreen{min-height:88vh;display:flex;flex-direction:column;justify-content:center;padding:150px 0 96px}
.hero-content{max-width:760px}
.hero-content.center{max-width:820px;margin:0 auto;text-align:center}
.hero-label{display:inline-flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);font-weight:600;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;padding:7px 16px;border-radius:var(--radius-pill);margin-bottom:20px}
.hero-label svg{width:15px;height:15px}
.hero-dark h1{color:#fff;margin-bottom:18px}
.hero-dark h1 .hl{color:var(--accent)}
.hero-sub{font-size:1.18rem;color:rgba(255,255,255,.82);max-width:600px;margin-bottom:30px}
.hero-content.center .hero-sub{margin-left:auto;margin-right:auto}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-content.center .hero-actions{justify-content:center}
.hero-trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;font-size:.9rem;color:rgba(255,255,255,.8)}
.hero-trust span{display:inline-flex;align-items:center;gap:8px}
.hero-trust svg{width:17px;height:17px;color:var(--accent)}

/* hero stat ticker (inline) — misalignment-proof (design-dna §4.8): equal flexible tracks,
   tabular numerals, nowrap values, labels capped + only ever growing DOWNWARD. */
.hero-ticker{display:flex;gap:48px;flex-wrap:wrap;max-width:760px;margin:42px 0 0;padding-top:28px;border-top:1px solid rgba(255,255,255,.18)}
.hero-ticker>div{flex:0 1 150px;min-width:110px}
.hero-content.center .hero-ticker{margin-left:auto;margin-right:auto;justify-content:center}
.hero-ticker .ht-num{font-size:clamp(1.6rem,1.09rem + 2.29vw,2rem);font-weight:650;color:#fff;line-height:1}
/* Stat VALUES never wrap or jitter; tabular-nums keeps count-up digits from dancing. */
.ht-num,.stat-num,.stat-value{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";min-width:4ch;white-space:nowrap}
/* All counters get tabular numerals, even improvised ones. */
[data-count],.pm-num,.bf-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.hero-ticker .ht-num .text-accent{color:var(--accent)}
.hero-ticker .ht-label{font-size:.84rem;color:rgba(255,255,255,.66);margin-top:5px}
/* Labels (never values) may wrap — capped so a long label can't stretch its column.
   Centering the capped label box is CONTEXT-scoped: .stat-label centers inside the
   centered .stat-grid (its own rule below), and a hero-ticker label centers only in a
   centered hero — the default hero ticker is LEFT-aligned, so its label box stays
   flush left under its value (an auto-centered box there reads as a ~15px indent). */
.ht-label,.stat-label{max-width:16ch;overflow-wrap:anywhere}
.hero-content.center .ht-label{margin-inline:auto}

/* ---------- Hero (light) — the light/warm counterpart of .hero-dark ----------
   .hero-dark was the ONLY hero band in the library, so every site opened with a near-black
   band whatever the client was: a therapy practice and an industrial coatings firm got the
   same hero. Archetype C ("Heritage Trust") asks for a warm hero and archetype A for a light
   one, and neither had a class to build with — and build-site-teaser has been telling the
   builder to use a "light page-hero" that did not exist, which is an invitation to improvise
   a section (the thing this baseline exists to prevent).

   PURELY ADDITIVE. Every rule is scoped under .hero-light, so .hero-dark renders
   byte-identically. The skeleton is SHARED and untouched: .hero-content / .hero-actions /
   .hero-pad* / .hero-fullscreen / .hero-ticker are the same elements in the same markup.

   The trap this block exists to close: .hero-sub, .hero-trust, .ht-num, .ht-label, the ticker
   border and .btn-outline all hardcode #fff and are NOT scoped to .hero-dark — on a light
   band every one of them is invisible. Each is overridden below. Same reasoning as the
   .cta-form auto-repair further down, which solves this for the white form card.

   There is no separate .hero-warm: warmth comes from the client's own themed --surface
   (archetype C sets a cream/warm neutral), so one class covers light AND warm.

   NOTE ON THE HEADER: initTransparentHeader() only goes transparent when the first child of
   <main> is .hero-dark, so a light hero correctly keeps the solid header with dark nav text.
   That is the wanted behaviour — do not "fix" it by adding .hero-light there, or you get a
   white wordmark on a cream band. */
.hero-light{position:relative;color:var(--text);overflow:hidden;background-color:var(--surface);background-image:radial-gradient(1200px 640px at 88% 22%,color-mix(in srgb,var(--primary) 14%,transparent) 0%,transparent 62%),radial-gradient(700px 460px at 8% 92%,color-mix(in srgb,var(--accent) 10%,transparent) 0%,transparent 60%);background-repeat:no-repeat}
/* Lifted, not dimmed — the mirror of .hero-dark-bg's brightness(.68). */
.hero-light-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(1.06);z-index:0}
/* Directional TEXT-SIDE scrim (design-dna §3.10), same contract as .hero-dark::before: opaque
   where the headline sits, clearing to nothing on the right so the photograph stays a
   photograph. A flat full-frame wash (the first cut of this block used 90%/74%/58% and never
   reached transparent) turns every hero image into milky pastel. ≤639px it flips to a
   bottom-heavy 180° scrim, because copy stacks over the lower half on mobile. */
.hero-light::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--surface) 88%,transparent) 0%,color-mix(in srgb,var(--surface) 55%,transparent) 55%,transparent 100%);z-index:1}
@media(max-width:639px){.hero-light::before{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 30%,transparent) 0%,color-mix(in srgb,var(--surface) 60%,transparent) 55%,color-mix(in srgb,var(--surface) 90%,transparent) 100%)}}
.hero-light .container{position:relative;z-index:2}
.hero-light h1{color:var(--text);margin-bottom:18px}
/* --primary is NOT guaranteed to be dark — for a warm brand it is a tan, for a healthcare
   brand a mid teal, and on their own --surface it can fall to ~2:1. So on-light text uses
   --text / --text-secondary (which ARE guaranteed to pair with --surface — they are the body
   colours), and --primary survives only as a tint or as a blend anchored to --text. */
.hero-light h1 .hl{color:color-mix(in srgb,var(--primary) 55%,var(--text))}
.hero-light .hero-label{background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--text)}
.hero-light .hero-sub{color:var(--text-secondary)}
.hero-light .hero-trust{color:var(--text-secondary)}
.hero-light .hero-trust svg{color:color-mix(in srgb,var(--primary) 55%,var(--text))}
.hero-light .hero-ticker{border-top-color:var(--border)}
.hero-light .hero-ticker .ht-num{color:var(--text)}
.hero-light .hero-ticker .ht-label{color:var(--text-secondary)}
.hero-light .btn-outline{color:var(--text);border-color:var(--border)}
.hero-light .btn-outline:hover{background:var(--text);color:var(--surface);border-color:var(--text)}

/* breadcrumb */
.breadcrumb{background:var(--surface);border-bottom:1px solid var(--border)}
.breadcrumb-inner{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:13px 0;font-size:.86rem;color:var(--text-muted)}
.breadcrumb-inner a{color:var(--text-secondary);transition:color .15s var(--ease-hover)}
.breadcrumb-inner a:hover{color:var(--primary-darker)}
.breadcrumb-inner .sep{width:14px;height:14px;color:var(--text-muted);display:inline-flex}
.breadcrumb-inner .current{color:var(--text);font-weight:600}

/* ---------- Stat bar ---------- */
.stat-bar{background:var(--dark);color:#fff;padding:48px 0}
/* Misalignment-proof stats band (design-dna §4.8): a GRID of equal minmax tracks — column
   width is never content-driven, so baselines cannot drift and unequal labels only grow
   downward (values are nowrap + tabular above). The band (.stat-bar) owns the vertical
   padding; the grid owns none (kills the double-padding gap). Targets the direct children
   so it applies whether they are bare <div> (legacy markup) or .stat-item. */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:30px 40px;padding:0}
.stat-grid>*,.stat-item{text-align:center}
/* Stats default to on-LIGHT type. White numbers are a .stat-bar / .on-dark override
   (see contrast block). A lite build that drops .stat-grid onto .surface-2 used to
   ship white-on-cream numbers — they read as "0" or vanish. */
.stat-num{font-size:clamp(1.7rem,1.18rem + 2.32vw,2.8rem);font-weight:650;line-height:1;color:var(--text)}
.stat-num .text-accent{color:var(--primary-darker)}
.stat-label{font-size:.9rem;color:var(--text-muted);margin-top:8px;margin-inline:auto}
.stat-bar .stat-num,.on-dark .stat-num{color:#fff}
.stat-bar .stat-label,.on-dark .stat-label,.stat-bar .stat-item .stat-label{color:rgba(255,255,255,.88)}

/* ---------- Trust bar ---------- */
.trust-bar{background:var(--dark);padding:32px 0}
.trust-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.trust-pill{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.9);font-weight:600;font-size:clamp(.84rem,.76rem + .34vw,.9rem);padding:10px 18px;border-radius:var(--radius-pill)}
.trust-pill svg{width:17px;height:17px;color:var(--accent)}

/* brands strip */
.brand-strip{display:flex;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)}
.brand-track{display:flex;gap:56px;align-items:center;width:max-content;animation:brand-scroll 34s linear infinite}
.brand-track:hover{animation-play-state:paused}
.brand-track span{font-size:1.4rem;font-weight:650;letter-spacing:-.02em;color:var(--text-muted);opacity:.7;white-space:nowrap}
/* Real brand/partner LOGOS in the marquee (preferred over text). Height-capped, never stretched,
   grayscale at rest → full color on hover, like a credible trust bar. */
.brand-track img{height:36px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.62;transition:filter .25s var(--ease-hover),opacity .25s var(--ease-hover)}
.brand-track img:hover{filter:none;opacity:1}
@keyframes brand-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Grids ---------- */
/* display:grid lives on EVERY grid class, not just the base `.grid`, so `class="grid-3"`
   on its own lays out as a grid. (Before, `.grid-3` alone only set columns with no
   display:grid, so a card grid written as class="grid-3" — without the base `grid` —
   rendered as display:block and the cards stacked VERTICALLY full-width. Real defect.) */
.grid,.grid-2,.grid-3,.grid-4{display:grid;gap:24px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr}
@media(min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}

/* ---------- Cards ---------- */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px 26px;transition:transform .2s var(--ease-hover),box-shadow .2s var(--ease-hover),border-color .2s var(--ease-hover);height:100%;display:flex;flex-direction:column}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent}
.card-icon{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--secondary);color:var(--primary-darker);margin-bottom:18px;flex-shrink:0}
.card-icon svg{width:26px;height:26px}
.card h3{font-size:1.18rem;margin-bottom:10px}
.card p{font-size:.95rem;flex:1}
.card-link{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-weight:600;font-size:.9rem;color:var(--primary-darker)}
.card-link svg{width:15px;height:15px;transition:transform .16s var(--ease-hover)}
.card:hover .card-link svg{transform:translateX(4px)}

/* service/category card with accent top */
.svc-card{position:relative;overflow:hidden}
.svc-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-hover)}
.svc-card:hover::before{transform:scaleX(1)}
.svc-card .num{position:absolute;top:24px;right:26px;font-size:1.4rem;font-weight:650;color:var(--surface-2)}

/* image card */
.img-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:transform .2s var(--ease-hover),box-shadow .2s var(--ease-hover);height:100%;display:flex;flex-direction:column}
.img-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.img-card .ic-media{aspect-ratio:16/10;overflow:hidden;position:relative}
.img-card .ic-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.img-card:hover .ic-media img{transform:scale(1.06)}
.img-card .ic-body{padding:22px 22px 26px;flex:1;display:flex;flex-direction:column}
.img-card h3{font-size:1.1rem;margin-bottom:8px}
.img-card p{font-size:.92rem;flex:1}
.img-card .cc-foot,.img-card .card-link{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.92rem;color:var(--primary-darker)}

/* category card */
.cat-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px 28px;transition:transform .2s var(--ease-hover),box-shadow .2s var(--ease-hover),border-color .2s var(--ease-hover);height:100%}
.cat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent}
.cat-card .cc-icon{width:58px;height:58px;border-radius:15px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.cat-card .cc-icon svg{width:28px;height:28px}
.cat-card h3{font-size:1.32rem;margin-bottom:10px}
.cat-card p{font-size:.95rem;margin-bottom:16px}
.cat-card ul{margin-bottom:20px;display:flex;flex-direction:column;gap:9px}
.cat-card ul li{display:flex;align-items:flex-start;gap:9px;font-size:.92rem;color:var(--text-secondary)}
.cat-card ul li svg{width:17px;height:17px;color:var(--accent-dark);flex-shrink:0;margin-top:2px}
.cat-card .cc-foot{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.92rem;color:var(--primary-darker)}
.cat-card .cc-foot svg{width:15px;height:15px;transition:transform .16s var(--ease-hover)}
.cat-card:hover .cc-foot svg{transform:translateX(4px)}
.cat-card .cc-count{display:inline-block;font-size:.76rem;font-weight:600;color:var(--primary-darker);background:var(--secondary);padding:4px 11px;border-radius:var(--radius-pill);margin-bottom:18px}

/* retention / feature card (image top) */
.retention-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;height:100%;display:flex;flex-direction:column;transition:transform .2s var(--ease-hover),box-shadow .2s var(--ease-hover)}
.retention-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.retention-card .rc-media{aspect-ratio:3/2;overflow:hidden}
.retention-card .rc-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.retention-card:hover .rc-media img{transform:scale(1.06)}
.retention-card .rc-body{padding:22px 22px 26px;flex:1}
.retention-card h3{font-size:1.08rem;margin-bottom:8px}
.retention-card p{font-size:.9rem}

/* ---------- Movable card carousel ----------
   A horizontal scroll-snap rail used INSTEAD of a `.grid-*` when a card row may
   overflow (mobile, or many cards). It only "moves" when the cards actually
   overflow the container: on a wide desktop a small set (3–4 cards) flexes to
   fill the row and there is nothing to scroll, so it reads as a static grid —
   you never hide content behind a swipe when it already fits. Native overflow
   gives swipe (touch) + trackpad for free; main.js adds mouse drag-to-scroll
   and (only with data-autoscroll) a slow auto-drift that respects
   prefers-reduced-motion and pauses on hover/focus/drag. The cards inside are
   the SAME `.img-card` / `.cat-card` / `.retention-card` divs — never anchors. */
.card-carousel{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 2px 8px;margin:0 -2px}
.card-carousel::-webkit-scrollbar{display:none}
.card-carousel>*{scroll-snap-align:start;flex:0 0 auto;width:300px;max-width:82%}
.card-carousel.dragging{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;user-select:none}
@media(min-width:1024px){
  /* enough room: cards flex to fill the row and only scroll if they overflow */
  .card-carousel>*{width:auto;flex:1 1 0;min-width:262px;max-width:none}
}
@media(prefers-reduced-motion:reduce){.card-carousel{scroll-behavior:auto}}
/* optional author-supplied prev/next controls (wired by main.js if present) */
.cc-nav{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.cc-nav button{width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .16s var(--ease-hover),color .16s var(--ease-hover),border-color .16s var(--ease-hover)}
.cc-nav button:hover{background:var(--primary);color:#fff;border-color:transparent}
.cc-nav button svg{width:18px;height:18px}
.cc-nav button[disabled]{opacity:.35;cursor:default;pointer-events:none}

/* ---------- Split section ---------- */
.split{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media(min-width:1024px){.split{grid-template-columns:1fr 1fr;gap:64px}.split.reverse .split-media{order:2}}
.split-media{position:relative}
.split-media img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);aspect-ratio:4/3;object-fit:cover}
.split-media .badge-float{position:absolute;bottom:-22px;left:24px;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:16px 22px;display:flex;align-items:center;gap:14px}
.split-media .badge-float .bf-num{font-size:1.9rem;font-weight:650;color:var(--primary-darker);line-height:1}
.split-media .badge-float .bf-label{font-size:.82rem;color:var(--text-secondary);max-width:130px}
.split-body h2{margin-bottom:16px}
.split-body p{margin-bottom:14px}
.split-body .check-list{margin:20px 0 26px}
.check-list{display:flex;flex-direction:column;gap:12px;list-style:none}
/* The <li> is NORMAL FLOW, never a flex container — so inline content (text mixed with
   <strong>/<a>/<em>) flows as one sentence and can NEVER fragment into mis-sized columns
   (the real "Up / to | 15%… | from…" defect: a flex <li> turns each text node + inline
   element into a separate flex item). The check marker is an absolutely-positioned ::before
   disc + tick; an authored leading <svg> becomes the marker instead and suppresses it. */
.check-list li{position:relative;padding-left:30px;color:var(--text-secondary)}
.check-list li::before{content:"";position:absolute;left:0;top:.3em;width:19px;height:19px;border-radius:50%;background:var(--secondary)}
.check-list li::after{content:"";position:absolute;left:6.5px;top:.5em;width:5px;height:9px;border:solid var(--accent-dark);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.check-list li:has(> svg:first-child)::before,.check-list li:has(> svg:first-child)::after{display:none}
.check-list li > svg:first-child{position:absolute;left:0;top:.16em;width:20px;height:20px;margin:0;color:var(--accent-dark)}
.check-list li b,.check-list li strong{color:var(--text);font-weight:600}

/* ---------- Process ---------- */
.process{background:var(--dark);color:#fff}
.process-grid{display:grid;grid-template-columns:1fr;gap:30px;counter-reset:step}
@media(min-width:768px){.process-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.process-grid.cols-5{grid-template-columns:repeat(5,1fr);gap:20px}}
.process-step{position:relative;padding-top:8px}
.process-num{width:54px;height:54px;border-radius:50%;border:2px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:650;font-size:1.2rem;margin-bottom:18px}
.process-step h3{color:#fff;font-size:1.08rem;margin-bottom:8px}
.process-step p{color:rgba(255,255,255,.7);font-size:.92rem}

/* ---------- Industry scroll ---------- */
.industry-scroll{display:flex;gap:20px;overflow-x:auto;padding:6px 4px 22px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.industry-scroll::-webkit-scrollbar{height:7px}
.industry-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}
.ind-card{position:relative;flex:0 0 270px;aspect-ratio:3/4;border-radius:var(--radius-lg);overflow:hidden;scroll-snap-align:start}
.ind-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.ind-card:hover img{transform:scale(1.07)}
.ind-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--dark) 88%,transparent) 0%,color-mix(in srgb,var(--dark) 15%,transparent) 55%,transparent 100%)}
.ind-card .ind-label{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;color:#fff}
.ind-card .ind-label h3{color:#fff;font-size:1.18rem;margin-bottom:4px}
.ind-card .ind-label p{color:rgba(255,255,255,.82);font-size:.85rem}
.ind-card .ind-arrow{position:absolute;top:16px;right:16px;z-index:2;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;color:#fff;transition:background .2s var(--ease-hover)}
.ind-card:hover .ind-arrow{background:var(--accent);color:var(--text)}
.ind-card .ind-arrow svg{width:16px;height:16px}

/* ---------- Testimonials ---------- */
.testi-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){.testi-grid{grid-template-columns:repeat(3,1fr)}}
.testi-card{background:var(--dark-mid);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);padding:30px 28px;display:flex;flex-direction:column;height:100%}
.testi-stars{display:flex;gap:3px;margin-bottom:16px}
.testi-stars svg{width:18px;height:18px;color:var(--accent)}
.testi-quote{color:rgba(255,255,255,.86);font-size:1rem;line-height:1.7;flex:1;margin-bottom:20px}
.testi-author{display:flex;align-items:center;gap:13px}
.testi-avatar{width:46px;height:46px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:650;font-size:1.05rem;flex-shrink:0}
.testi-meta .ta-name{font-weight:600;color:#fff;font-size:.95rem}
.testi-meta .ta-loc{font-size:.82rem;color:rgba(255,255,255,.6)}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;transition:box-shadow .2s var(--ease-hover),border-color .2s var(--ease-hover)}
.faq-item.active{box-shadow:var(--shadow-md);border-color:transparent}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;font-weight:600;font-size:clamp(.96rem,.885rem + .34vw,1.02rem);text-align:left;color:var(--text)}
.faq-question .faq-ico{width:30px;height:30px;border-radius:50%;background:var(--secondary);color:var(--primary-darker);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .25s var(--ease-hover),background .2s var(--ease-hover),color .2s var(--ease-hover)}
.faq-question .faq-ico svg{width:16px;height:16px}
.faq-item.active .faq-ico{background:var(--accent);color:var(--text);transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s var(--ease-inout)}
.faq-answer-inner{padding:0 22px 22px;color:var(--text-secondary);font-size:.97rem}

/* ---------- CTA ---------- */
.cta-dark{position:relative;background:var(--primary);color:#fff;overflow:hidden}
.cta-dark::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%);top:-180px;right:-120px}
.cta-dark::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%);bottom:-200px;left:-100px}
.cta-content{position:relative;z-index:2;text-align:center;max-width:780px;margin:0 auto}
.cta-content h2{color:#fff;margin-bottom:16px}
.cta-content p{color:rgba(255,255,255,.85);font-size:1.1rem;margin-bottom:28px}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* CTA with form */
.cta-band{position:relative;background:var(--dark);color:#fff;overflow:hidden}
.cta-band-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.16;z-index:0}
.cta-band::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,color-mix(in srgb,var(--dark) 95%,transparent),color-mix(in srgb,var(--primary-darker) 80%,transparent));z-index:1}
.cta-form-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
@media(min-width:1024px){.cta-form-grid{grid-template-columns:1.05fr .95fr;gap:60px}}
/* QA-FIX: cta-form-grid text was hard-coded WHITE, which turned the contact page's
   .section > .cta-form-grid heading into white-on-white. Scope the white cascade to
   dark-band contexts only; on plain .section (light) the h2/p keep --text / --text-secondary. */
:is(.cta-band,.cta-dark,.on-dark,.section.dark,.hero-dark,.sidebar-cta) .cta-form-grid .cfg-text h2{color:#fff;margin-bottom:16px}
:is(.cta-band,.cta-dark,.on-dark,.section.dark,.hero-dark,.sidebar-cta) .cta-form-grid .cfg-text p{color:rgba(255,255,255,.78);margin-bottom:24px}
.cta-form-grid .cfg-text{margin-bottom:0}
.cta-form-grid .cfg-text h2{margin-bottom:16px}
.cta-form-grid .cfg-text p{margin-bottom:24px}
.cfg-contact{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.cfg-contact .ci{display:flex;align-items:center;gap:14px}
.cfg-contact .ci-ico{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0}
.cfg-contact .ci-ico svg{width:20px;height:20px}
.cfg-contact .ci-label{font-size:.78rem;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.06em}
.cfg-contact .ci-val{font-weight:600;color:#fff;font-size:1rem}
.cta-form{background:#fff;border-radius:var(--radius-lg);padding:30px 28px;box-shadow:var(--shadow-lg)}
.cta-form h3{color:var(--text);font-size:1.3rem;margin-bottom:6px}
.cta-form .cf-sub{color:var(--text-secondary);font-size:.9rem;margin-bottom:20px}

/* ---------- Forms ---------- */
.form-group{margin-bottom:16px}
.form-row{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:560px){.form-row{grid-template-columns:1fr 1fr}}
.form-label{display:block;font-weight:600;font-size:.86rem;color:var(--text);margin-bottom:7px}
.form-label .req{color:#d05a4f}
.form-control{width:100%;padding:12px 15px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:#fff;color:var(--text);font-size:.95rem;transition:border-color .15s var(--ease-hover),box-shadow .15s var(--ease-hover)}
.form-control::placeholder{color:var(--text-muted)}
.form-control:focus{border-color:var(--primary-darker);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent)}
textarea.form-control{resize:vertical;min-height:110px}
select.form-control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2351636a' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:17px;padding-right:40px}
.form-success{display:none;text-align:center;padding:30px 20px;background:var(--secondary);border-left:4px solid var(--accent-dark);border-radius:var(--radius-sm)}
.form-success.show{display:block}
/* Shown INSTEAD of .form-success when there is nowhere to send the submission (see bindForms).
   Deliberately not styled as an error the user caused — it is our gap, not their mistake. */
.form-error{display:none;margin-top:14px;padding:14px 16px;background:var(--secondary);border-left:4px solid var(--accent-dark);border-radius:var(--radius-sm);font-size:.95rem}
.form-error.show{display:block}
.form-error a{color:var(--accent-dark);font-weight:600;text-decoration:underline}
.form-success .fs-ico{width:56px;height:56px;border-radius:50%;background:var(--accent);color:var(--text);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.form-success .fs-ico svg{width:28px;height:28px}
.form-success h4{font-size:1.2rem;margin-bottom:8px}
/* PRE-FOOTER LEAD FORM — injected on every page by renderFooterForm() so no page is
   conversion-dead. A LIGHT band (the footer below is dark) so it never forms an
   adjacent-dark-bands pair, with dark text overriding the dark-band .cfg-text defaults. */
.footer-cta-band{background:var(--surface-2);border-top:1px solid var(--border)}
.footer-cta-band .cfg-text h2{color:var(--text)}
.footer-cta-band .cfg-text p{color:var(--text-secondary)}
.footer-cta-band .cfg-text a{color:var(--primary-darker);font-weight:600}
.form-note{font-size:.8rem;color:var(--text-muted);margin-top:6px}
/* Form CHOICE chips — the canonical multi/single-select control INSIDE A FORM (e.g. "Services
   interested in: LTL / FTL / Expedited …"). Self-contained: needs NO extra markup, keeps the
   NATIVE checkbox/radio VISIBLE + clickable (accent-colored), and the whole chip highlights when
   checked via :has(). Use THIS in forms — NOT .filter-check (that's the catalog sidebar and is
   invisible without a .fc-box span). Markup:
     <div class="form-check-grid">
       <label class="form-check"><input type="checkbox" name="services" value="LTL"><span>LTL</span></label> …
     </div>  (use type="radio" for single-select). */
.form-check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px;margin-top:8px}
.form-check{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--radius-md);background:#fff;cursor:pointer;font-size:.93rem;color:var(--text-secondary);transition:border-color .15s var(--ease-hover),background .15s var(--ease-hover),color .15s var(--ease-hover);-webkit-user-select:none;user-select:none}
.form-check:hover{border-color:var(--primary-darker);color:var(--text)}
.form-check input{width:18px;height:18px;flex-shrink:0;margin:0;accent-color:var(--primary-darker);cursor:pointer}
.form-check:has(input:checked){border-color:var(--primary-darker);background:var(--secondary);color:var(--text);font-weight:600}
/* Safety net: a .filter-check MISUSED in a form (no .fc-box span) must NOT hide its native input
   into an invisible, un-selectable control — the real "can't select the LTL/FTL" defect. Only hide
   the native box when the custom .fc-box replacement is actually present. */
.filter-check:not(:has(.fc-box)) input{position:static;opacity:1;width:18px;height:18px;accent-color:var(--primary-darker);cursor:pointer}

/* ---------- Contact ---------- */
.contact-layout{display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:1024px){.contact-layout{grid-template-columns:1.2fr .8fr;gap:56px}}
.contact-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 26px;margin-bottom:22px}
.contact-card h3{font-size:1.15rem;margin-bottom:6px;display:flex;align-items:center;gap:9px}
.contact-card h3 .cc-tag{font-size:.7rem;font-weight:600;color:var(--primary-darker);background:var(--secondary);padding:3px 9px;border-radius:var(--radius-pill);text-transform:uppercase;letter-spacing:.05em}
.contact-item{display:flex;align-items:flex-start;gap:13px;padding:11px 0;border-bottom:1px solid var(--surface)}
.contact-item:last-child{border-bottom:none}
.contact-icon{width:42px;height:42px;border-radius:11px;background:var(--secondary);color:var(--primary-darker);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-icon svg{width:19px;height:19px}
.contact-item .ci-label{font-size:.78rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
.contact-item .ci-val{font-weight:600;color:var(--text);font-size:.98rem}
.contact-item .ci-val a:hover{color:var(--primary-darker)}
.quick-response{background:var(--primary);color:#fff;border-radius:var(--radius-lg);padding:24px 26px}
.quick-response h4{color:#fff;font-size:1.05rem;margin-bottom:8px;display:flex;align-items:center;gap:9px}
.quick-response h4 svg{width:20px;height:20px;color:var(--accent)}
.quick-response p{color:rgba(255,255,255,.84);font-size:.92rem}
.map-embed{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);height:300px}
.map-embed iframe{width:100%;height:100%;border:0;display:block}

/* ---------- Catalog (all-services) ---------- */
.catalog-layout{display:grid;grid-template-columns:1fr;gap:30px}
@media(min-width:1024px){.catalog-layout{grid-template-columns:260px 1fr;gap:40px}}
.filter-panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px 22px}
@media(min-width:1024px){.filter-panel{position:sticky;top:calc(var(--header-total) + 20px)}}
.filter-panel h4{font-size:1.05rem;margin-bottom:6px}
.filter-panel .fp-sub{font-size:.85rem;color:var(--text-muted);margin-bottom:18px}
.filter-group{margin-bottom:20px}
.filter-group .fg-title{font-size:.78rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:11px}
.filter-check{display:flex;align-items:center;gap:10px;padding:7px 0;cursor:pointer;font-size:.93rem;color:var(--text-secondary)}
.filter-check input{position:absolute;opacity:0;width:0;height:0}
.filter-check .fc-box{width:20px;height:20px;border:1.5px solid var(--border);border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s var(--ease-hover),border-color .15s var(--ease-hover)}
.filter-check .fc-box svg{width:13px;height:13px;color:#fff;opacity:0;transition:opacity .15s var(--ease-hover)}
.filter-check input:checked + .fc-box{background:var(--primary);border-color:var(--primary-darker)}
.filter-check input:checked + .fc-box svg{opacity:1}
.filter-check:hover{color:var(--text)}
.filter-toggle-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-bottom:18px;padding:13px;border:1.5px solid var(--border);border-radius:var(--radius-pill);font-weight:600;color:var(--text)}
.filter-toggle-btn svg{width:18px;height:18px}
@media(min-width:1024px){.filter-toggle-btn{display:none}}
.catalog-count{font-size:.9rem;color:var(--text-muted);margin-bottom:18px}
.catalog-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:640px){.catalog-grid{grid-template-columns:repeat(2,1fr)}}
.catalog-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px 24px;transition:transform .2s var(--ease-hover),box-shadow .2s var(--ease-hover),border-color .2s var(--ease-hover);display:flex;flex-direction:column;height:100%}
.catalog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.catalog-card .cat-tag{display:inline-block;align-self:flex-start;font-size:.72rem;font-weight:600;color:var(--primary-darker);background:var(--secondary);padding:4px 11px;border-radius:var(--radius-pill);margin-bottom:14px}
.catalog-card .cat-ico{width:48px;height:48px;border-radius:12px;background:var(--secondary);color:var(--primary-darker);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.catalog-card .cat-ico svg{width:24px;height:24px}
.catalog-card h3{font-size:1.1rem;margin-bottom:8px}
.catalog-card p{font-size:.9rem;flex:1}
.catalog-card .card-link{margin-top:14px}
.filter-empty{display:none;text-align:center;padding:48px 20px;color:var(--text-muted)}
.filter-empty.show{display:block}

/* ---------- Detail grid + sidebar ---------- */
.detail-grid{display:grid;grid-template-columns:1fr;gap:34px}
@media(min-width:1024px){.detail-grid{grid-template-columns:2fr 1fr;gap:44px;align-items:start}}
.detail-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px 28px;margin-bottom:24px}
.detail-card h2{font-size:1.5rem;margin-bottom:14px}
.detail-card h3{font-size:1.15rem;margin:22px 0 12px}
.detail-card p{margin-bottom:14px}
.feature-list{display:grid;grid-template-columns:1fr;gap:13px;margin:18px 0}
@media(min-width:560px){.feature-list{grid-template-columns:1fr 1fr}}
.feature-list li{display:flex;align-items:flex-start;gap:10px;font-size:.94rem;color:var(--text-secondary)}
.feature-list li svg{width:19px;height:19px;color:var(--accent-dark);flex-shrink:0;margin-top:2px}
.app-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:8px}
@media(min-width:560px){.app-grid{grid-template-columns:1fr 1fr}}
.app-item{display:flex;gap:13px;padding:16px;background:var(--surface);border-radius:var(--radius-md)}
.app-item .ai-ico{width:40px;height:40px;border-radius:10px;background:#fff;color:var(--primary-darker);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--shadow-sm)}
.app-item .ai-ico svg{width:20px;height:20px}
.app-item h4{font-size:.98rem;margin-bottom:3px}
.app-item p{font-size:.85rem;margin:0}
.sidebar-cta{position:sticky;top:calc(var(--header-total) + 20px);background:var(--primary);color:#fff;border-radius:var(--radius-lg);padding:28px 26px}
.sidebar-cta h3{color:#fff;font-size:1.2rem;margin-bottom:10px}
.sidebar-cta p{color:rgba(255,255,255,.84);font-size:.92rem;margin-bottom:18px}
.sidebar-cta .sc-list{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.sidebar-cta .sc-list li{display:flex;align-items:center;gap:10px;font-size:.92rem;color:rgba(255,255,255,.9)}
.sidebar-cta .sc-list svg{width:18px;height:18px;color:var(--accent);flex-shrink:0}
.sidebar-cta .sc-phone{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);font-size:.92rem;color:rgba(255,255,255,.84)}
.sidebar-cta .sc-phone a{font-weight:650;color:#fff;font-size:1.15rem}

/* product hero grid (service detail top) */
.product-hero-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;position:relative;z-index:2}
@media(min-width:1024px){.product-hero-grid{grid-template-columns:1.05fr .95fr;gap:56px}}
.product-visual{position:relative}
.product-visual img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);aspect-ratio:4/3;object-fit:cover}
.product-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0}
.product-meta-item{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-md);padding:15px 14px;text-align:center}
.product-meta-item .pm-num{font-size:1.25rem;font-weight:650;color:var(--accent)}
.product-meta-item .pm-label{font-size:.74rem;color:rgba(255,255,255,.7);margin-top:3px}
.delivery-note{display:inline-flex;align-items:center;gap:9px;font-size:.88rem;color:rgba(255,255,255,.82);margin-top:6px}
.delivery-note svg{width:17px;height:17px;color:var(--accent)}

/* ---------- Related ---------- */
.related-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:640px){.related-grid{grid-template-columns:repeat(3,1fr)}}
.related-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:18px 20px;transition:transform .2s var(--ease-hover),box-shadow .2s var(--ease-hover),border-color .2s var(--ease-hover)}
.related-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:transparent}
.related-card .rc-ico{width:42px;height:42px;border-radius:11px;background:var(--secondary);color:var(--primary-darker);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.related-card .rc-ico svg{width:21px;height:21px}
.related-card h4{font-size:.97rem;margin-bottom:2px}
.related-card p{font-size:.8rem;margin:0;color:var(--text-muted)}

/* ---------- Photo strip ---------- */
.photo-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:768px){.photo-strip{grid-template-columns:repeat(4,1fr)}}
.photo-strip img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-md)}

/* ---------- Value props (icon row) ---------- */
.value-row{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:640px){.value-row{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.value-row{grid-template-columns:repeat(4,1fr)}}
.value-item{text-align:center;padding:8px}
.value-item .vi-ico{width:60px;height:60px;border-radius:50%;background:var(--secondary);color:var(--primary-darker);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.value-item .vi-ico svg{width:28px;height:28px}
.value-item h3{font-size:1.05rem;margin-bottom:7px}
.value-item p{font-size:.9rem}

/* ---------- Timeline ---------- */
.timeline{max-width:760px;margin:0 auto;position:relative;padding-left:38px}
.timeline::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:var(--border)}
.timeline-item{position:relative;padding-bottom:32px}
.timeline-item:last-child{padding-bottom:0}
.timeline-dot{position:absolute;left:-38px;top:2px;width:24px;height:24px;border-radius:50%;background:var(--primary);border:4px solid var(--surface);box-shadow:0 0 0 1px var(--border)}
.timeline-year{font-size:.8rem;font-weight:650;letter-spacing:.06em;color:var(--primary-darker);margin-bottom:5px}
.timeline-item h3{font-size:1.1rem;margin-bottom:6px}
.timeline-item p{font-size:.93rem}

/* ---------- Footer ---------- */
.site-footer{background:var(--dark);color:rgba(255,255,255,.7);margin-top:auto}
.footer-top{padding:62px 0 44px}
.footer-grid{display:grid;grid-template-columns:1fr;gap:38px}
@media(min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}
.footer-grid:has(> :nth-child(3):last-child){grid-template-columns:1.5fr 1fr 1.4fr}
.footer-grid:has(> :nth-child(2):last-child){grid-template-columns:1.5fr 1fr}}
.footer-logo{height:46px;width:auto;margin-bottom:16px;background:#fff;padding:8px 12px;border-radius:10px}
/* The default white chip suits a dark/colored logo on the dark footer. A LIGHT/white logo
   on a white chip is the exact "invisible logo" failure — initLogoContrast() tags it
   .logo-chip-dark so it sits directly on the dark footer instead. (dark logo keeps the chip.) */
.footer-logo.logo-chip-dark{background:transparent;padding:0;border-radius:0}
.footer-about{font-size:.92rem;line-height:1.7;margin-bottom:18px;max-width:340px}
.footer-social{display:flex;gap:10px}
.footer-social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.78);transition:background .2s var(--ease-hover),color .2s var(--ease-hover)}
.footer-social a:hover{background:var(--accent);color:var(--text)}
.footer-social svg{width:18px;height:18px}
.footer-col h3{color:#fff;font-size:.95rem;font-weight:650;letter-spacing:.03em;margin-bottom:18px}
.footer-col ul{display:flex;flex-direction:column;gap:11px}
.footer-col ul li a{font-size:.91rem;color:rgba(255,255,255,.66);transition:color .15s var(--ease-hover),padding-left .15s var(--ease-hover)}
.footer-col ul li a:hover{color:var(--accent);padding-left:3px}
/* NAP rows are reused on LIGHT contact pages AND the dark footer. Default is on-light;
   .site-footer overrides to light type. Unscoped white labels made address/hours
   invisible on the contact split (white-on-white). */
.footer-contact-item{display:flex;align-items:center;gap:11px;margin-bottom:15px;font-size:.9rem}
.footer-contact-item svg{width:17px;height:17px;color:var(--primary-darker);flex-shrink:0}
.footer-contact-item .fci-label{color:var(--text-muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.05em}
.footer-contact-item .fci-val{color:var(--text);font-weight:600}
.footer-contact-item a:hover,.footer-contact-item .fci-val:hover{color:var(--primary-darker)}
.site-footer .footer-contact-item svg{color:var(--accent)}
.site-footer .footer-contact-item .fci-label{color:rgba(255,255,255,.62)}
.site-footer .footer-contact-item .fci-val,.site-footer a.fci-val{color:#fff}
.site-footer .footer-contact-item a:hover,.site-footer .footer-contact-item .fci-val:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:20px 0}
.footer-bottom-inner{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;font-size:.84rem;color:rgba(255,255,255,.55)}
@media(min-width:768px){.footer-bottom-inner{flex-direction:row;justify-content:space-between;text-align:left}}
.footer-bottom a{color:rgba(255,255,255,.55)}
.footer-bottom a:hover{color:var(--accent)}
.footer-legal{display:flex;gap:18px}

/* ==========================================================================
   Slick / futuristic layer
   ========================================================================== */

/* Scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 50%,var(--primary)) 50%,var(--primary));z-index:1200;box-shadow:0 0 12px color-mix(in srgb,var(--accent) 60%,transparent);transition:width .08s linear}

/* Video hero. THE STACK BUG: the static fallback <img class="hero-dark-bg"> comes AFTER
   the <video> in the DOM, and both defaulted to z-index:0 — so the image painted ON TOP
   of the video and the video was never visible (a real shipped bug; the editor "added the
   video" but it stayed hidden under the still). Explicit, fallback-preserving stack for
   video heroes: fallback img 0 → video 1 → scrim ::before 2 → content 3. (.hero-dark
   sets no stacking context, so negative z-index would hide the img behind the dark bg —
   don't use it here.) */
.hero-video .hero-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;transition:opacity .8s var(--ease-out);filter:saturate(.9) brightness(.72)}
.hero-video .hero-bg-video.ready{opacity:1}
.hero-video .hero-dark-bg{z-index:0}     /* fallback stays UNDER the video (still visible if the video fails) */
.hero-video::before{z-index:2;will-change:transform;transform:translateZ(0)}           /* readability scrim sits ABOVE the video */
.hero-video .container{z-index:3}        /* hero copy sits above the scrim */

/* Animated aurora glow over dark heroes (sits above overlay, below content) */
.hero-dark::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 18% 28%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 38%),
             radial-gradient(circle at 82% 72%,color-mix(in srgb,color-mix(in srgb,var(--primary) 45%,#fff) 18%,transparent),transparent 42%);
  animation:aurora 16s ease-in-out infinite alternate}
@keyframes aurora{0%{transform:translate3d(-2%,-1%,0) scale(1);opacity:.85}50%{opacity:1}100%{transform:translate3d(3%,2%,0) scale(1.12);opacity:.9}}

/* Subtle animated grid lines in dark heroes */
.hero-grid-lines{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:54px 54px;-webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%);mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%);
  animation:grid-pan 26s linear infinite}
@keyframes grid-pan{from{background-position:0 0}to{background-position:54px 54px}}

/* Card glow + lift on hover */
.card:hover,.cat-card:hover,.img-card:hover,.retention-card:hover,.catalog-card:hover{box-shadow:0 18px 44px rgba(20,40,46,.14),0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
.svc-card,.cat-card,[data-tilt]{transition:transform .25s var(--ease-hover),box-shadow .25s var(--ease-hover),border-color .25s var(--ease-hover);transform-style:preserve-3d;will-change:transform}

/* Pulsing / glowing CTA */
.btn-glow{position:relative;animation:btn-pulse 2.8s ease-in-out infinite}
@keyframes btn-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent),0 8px 22px color-mix(in srgb,var(--accent-dark) 35%,transparent)}50%{box-shadow:0 0 0 12px color-mix(in srgb,var(--accent) 0%,transparent),0 8px 26px color-mix(in srgb,var(--accent-dark) 50%,transparent)}}
.btn-glow:hover{animation-play-state:paused}

/* Animated underline accent under section h2 */
.section-header h2{position:relative;display:inline-block}
.section-header h2::after{content:"";position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);width:54px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--primary));opacity:.9}
.section-header.left h2::after{left:0;transform:none}
.section.dark .section-header h2::after,.process .section-header h2::after{background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--primary) 40%,#fff))}

/* Brand marquee */
.brand-marquee{padding:40px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface)}
.brand-marquee .bm-label{text-align:center;font-size:.78rem;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:22px}
.brand-strip{display:flex;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)}
.brand-track{display:flex;gap:22px;align-items:center;width:max-content;animation:brand-scroll 42s linear infinite}
.brand-track:hover{animation-play-state:paused}
.brand-item{height:108px;min-width:184px;display:flex;align-items:center;justify-content:center;padding:0 34px;background:#fff;border:1px solid var(--border);border-radius:16px;flex-shrink:0;box-shadow:var(--shadow-sm)}
.brand-item img{height:68px;width:auto;object-fit:contain;opacity:.85;filter:grayscale(.25);transition:opacity .25s var(--ease-hover),filter .25s var(--ease-hover),transform .25s var(--ease-hover)}
.brand-item:hover img{opacity:1;filter:none;transform:scale(1.08)}
@keyframes brand-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Stat pop on reveal */
.stat-num{transition:transform .3s var(--ease-hover)}
.stat-item.in .stat-num{animation:stat-pop .5s var(--ease-out)}
@keyframes stat-pop{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}

/* Glassy lift for hero ticker numbers */
.hero-ticker>div{transition:transform .3s var(--ease-hover)}
.hero-ticker>div:hover{transform:translateY(-4px)}

@media(prefers-reduced-motion:reduce){
  .hero-dark::after,.hero-grid-lines,.btn-glow,.brand-track,.scroll-progress{animation:none!important}
}

/* ---------- Contrast safety: dark bands legible BY CONSTRUCTION ----------
   Every dark-background section/panel/card carries .on-dark (the marker). The
   built-in dark classes are aliased in as a safety net so a forgotten marker
   still self-heals. These rules set a legible LIGHT default for EVERY text
   descendant AND icon, regardless of element type or component class — so a
   brand-new dark band (awards/credentials/stats grid) is readable without being
   named here. Accent/primary stay (they read fine on dark); :where() keeps
   specificity low so a deliberate per-component color still wins.            */
.on-dark,.section.dark,.hero-dark,.process,.cta-dark,.cta-band,.sidebar-cta,.quick-response,.trust-bar,.stat-bar,.site-footer{color:#fff}
:is(.on-dark,.section.dark,.hero-dark,.process,.cta-dark,.cta-band,.sidebar-cta,.quick-response,.trust-bar,.stat-bar,.site-footer) :where(h1,h2,h3,h4,h5,h6,strong,b,dt,.stat-num){color:#fff}
:is(.on-dark,.section.dark,.hero-dark,.process,.cta-dark,.cta-band,.sidebar-cta,.quick-response,.trust-bar,.stat-bar,.site-footer) :where(p,li,dd,blockquote,span,small,figcaption,label,.stat-label,.cert-sub,.section-header p){color:rgba(255,255,255,.78)}
:is(.on-dark,.section.dark,.hero-dark,.process,.cta-dark,.cta-band,.sidebar-cta,.quick-response,.trust-bar,.stat-bar,.site-footer) :where(svg,.icon,i){color:#fff}
:is(.on-dark,.section.dark,.hero-dark,.process,.cta-dark,.cta-band,.sidebar-cta,.quick-response,.trust-bar,.stat-bar,.site-footer) .eyebrow{color:var(--accent);background:rgba(255,255,255,.1)}
/* COMPONENTS THAT CARRY THEIR OWN LIGHT-BAND COLOUR MUST BE RE-STATED FOR DARK BANDS.
   The cascade above is deliberately (0,1,0) — `:is()` counts as one class, `:where()` as zero —
   so that a component's own colour still wins. That is right for accent icons and wrong for
   anything that hard-codes --text / --text-secondary: `.check-list li` is (0,1,1) and
   `.check-list li strong` is (0,1,2), so both OUT-SPECIFY the dark-band rules and render
   near-black on near-black. Measured on a shipped site: 1.02:1 for the bold labels and
   2.18:1 for the body text, inside the quote band the hero's own CTA scrolls to — four bright
   check discs with invisible words beside them. Prefixing with `:is(...)` lifts these to
   (0,2,1)/(0,2,2) so they win on dark and change nothing on light. */
:is(.on-dark,.section.dark,.hero-dark,.process,.cta-dark,.cta-band,.sidebar-cta,.quick-response,.trust-bar,.stat-bar,.site-footer) .check-list li{color:rgba(255,255,255,.78)}
:is(.on-dark,.section.dark,.hero-dark,.process,.cta-dark,.cta-band,.sidebar-cta,.quick-response,.trust-bar,.stat-bar,.site-footer) .check-list li b,
:is(.on-dark,.section.dark,.hero-dark,.process,.cta-dark,.cta-band,.sidebar-cta,.quick-response,.trust-bar,.stat-bar,.site-footer) .check-list li strong{color:#fff}
/* icons that intentionally use the accent on dark keep it (higher specificity below wins) */
:is(.on-dark,.section.dark,.hero-dark,.process,.cta-dark,.cta-band,.sidebar-cta,.quick-response,.trust-bar) .trust-pill svg,
.sidebar-cta .sc-list svg,.site-footer .footer-contact-item svg{color:var(--accent)}

/* ---------- Quote FAB ---------- */
.quote-fab{position:fixed;right:22px;bottom:22px;z-index:1090;display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--text);font-weight:650;font-size:.95rem;padding:14px 22px;border-radius:var(--radius-pill);box-shadow:0 10px 30px rgba(20,40,46,.28);transition:transform .2s var(--ease-hover),box-shadow .2s var(--ease-hover);animation:fab-breathe 3.4s ease-in-out infinite}
.quote-fab:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 38px rgba(20,40,46,.34);animation-play-state:paused}
.quote-fab svg{width:19px;height:19px}
@keyframes fab-breathe{0%,100%{box-shadow:0 10px 30px rgba(20,40,46,.28)}50%{box-shadow:0 10px 30px color-mix(in srgb,var(--accent-dark) 55%,transparent)}}
@media(max-width:560px){.quote-fab{right:16px;bottom:16px;width:56px;height:56px;padding:0;justify-content:center;border-radius:50%}.quote-fab-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}}

/* ---------- Modal ---------- */
.modal-overlay{position:fixed;inset:0;z-index:1100;background:rgba(20,40,46,.6);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
.modal-overlay.active{display:flex}
.modal{background:#fff;border-radius:var(--radius-lg);max-width:560px;width:100%;box-shadow:var(--shadow-lg);animation:modal-in .25s var(--ease-out)}
@keyframes modal-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 26px 0}
.modal-header h3{font-size:1.35rem;margin-bottom:5px}
.modal-header p{font-size:.9rem}
.modal-close{width:38px;height:38px;border-radius:50%;background:var(--surface);color:var(--text);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s var(--ease-hover)}
.modal-close:hover{background:var(--border)}
.modal-close svg{width:20px;height:20px}
.modal-body{padding:20px 26px 28px}
.modal-success{display:none;text-align:center;padding:36px 26px}
.modal-success.show{display:block}
.modal-success .ms-ico{width:64px;height:64px;border-radius:50%;background:var(--accent);color:var(--text);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.modal-success .ms-ico svg{width:32px;height:32px}
.modal-success h3{margin-bottom:8px}

/* ---------- Reveal animation (design-dna §5: 24px rise, .7s, --ease-out, once) ----------
   The hidden state is gated behind html.js — main.js stamps the `js` class on <html> as
   its FIRST statement, so with JS disabled (or main.js failing to load) nothing is ever
   hidden: a no-JS load shows 100% of content (design-dna M3 / layout_rules "usable with
   JS disabled"). */
/* The ONE scroll animation every section uses (main.js just toggles .in). Driving its distance
   and duration from the tokens above is what finally makes design_system.motion mean something;
   the easing stays --ease-out for everyone per design-dna §5.1. */
html.js .reveal{opacity:0;transform:translateY(var(--motion-dist));transition:opacity var(--motion-dur) var(--ease-out),transform var(--motion-dur) var(--ease-out)}
html.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none}.brand-track,.quote-fab{animation:none}}

/* ==========================================================================
   Mobile optimizations
   ========================================================================== */
@media(max-width:767px){
  .section{padding:56px 0}
  .section-sm{padding:40px 0}
  .section-lg{padding:64px 0}
  .section-header{margin-bottom:34px}
  .hero-pad{padding:96px 0 64px}
  .hero-pad-sm{padding:96px 0 52px}
  .hero-fullscreen{min-height:auto;padding:110px 0 64px}
  .footer-top{padding:46px 0 32px}
  .cta-form-grid{gap:34px}
  .stat-bar{padding:40px 0}
  .stat-grid{padding:0;gap:26px 14px}
  .split-media .badge-float{left:50%;transform:translateX(-50%);bottom:-26px}
}
@media(max-width:639px){
  .product-meta{grid-template-columns:1fr 1fr}
  .card{padding:24px 20px}
  .cat-card,.catalog-card,.detail-card,.cta-form{padding:24px 20px}
  .hero-ticker{gap:28px}
  /* font sizes are fluid clamp() tokens in the base rules (dna T5) — only box metrics change here */
  .faq-question{padding:16px 18px}
  .trust-pill{padding:9px 14px}
}
@media(max-width:479px){
  .section{padding:48px 0}
  .btn{white-space:normal;text-align:center}
  .btn-lg{padding:15px 24px}
  .hero-actions .btn{width:100%}
  .product-meta{grid-template-columns:1fr}
  .ind-card{flex-basis:220px}
  /* Stats stack cleanly at phone width; values stay nowrap, only labels may wrap. */
  .stat-grid{grid-template-columns:1fr}
  .modal-body{padding:16px 18px 22px}
  .modal-header{padding:18px 18px 0}
}

/* ==========================================================================
   Spacing floor — every top-level section breathes, even in a free-flowing layout.
   .section / .section-sm / .section-lg / .hero-* / .brand-marquee all set their own
   padding at class-specificity and KEEP it (a class beats this element-only rule);
   this only rescues a <section> whose class forgot vertical padding, so no section
   can ever render flush with zero spacing around it.
   ========================================================================== */
main > section{padding-block:56px}

/* ==========================================================================
   Band-separation safety net (deterministic — does NOT depend on the build
   alternating correctly). When two adjacent sections share the same tone they
   visually merge into one cramped wall ("no spacing"); give the second a hairline
   so every band reads as its own surface even in a free-flowing layout.
   ========================================================================== */
/* light + light (white→white) */
.section:not(.surface):not(.dark):not(.process):not(.cta-band):not(.cta-dark)
  + .section:not(.surface):not(.dark):not(.process):not(.cta-band):not(.cta-dark){border-top:1px solid var(--border)}
/* tint + tint (surface / brand-marquee both use the tinted surface) */
.section.surface + .section.surface,
.section.surface + .brand-marquee,
.brand-marquee  + .section.surface,
.brand-marquee  + .brand-marquee{border-top:1px solid var(--border)}
/* dark + dark — a faint light hairline keeps the seam visible without a harsh line */
.hero-dark + .section.dark,        .hero-dark + .section.process,
.section.dark + .section.dark,     .section.dark + .section.process,
.section.process + .section.dark,  .section.process + .section.process,
.section.dark + .section.cta-band, .section.cta-band + .section.dark,
.section.process + .section.cta-band{border-top:1px solid rgba(255,255,255,.10)}

/* ==========================================================================
   Card safety net — cards must be a <div>, NEVER an <a>, and must NEVER nest an
   <a class="cc-foot"> inside an <a> (illegal nested anchors → the browser ejects
   the inner link, it becomes a stray grid cell, and the whole card grid collapses
   into a vertical full-width mess — a real shipped defect).
   To make the WHOLE card clickable, keep it a <div> and let the single .cc-foot
   link stretch over the card via this overlay. No anchor wrapping needed.
   ========================================================================== */
.cat-card,.img-card,.related-card{position:relative}
.cat-card .cc-foot,.img-card .cc-foot,.img-card .ic-body .cc-foot{position:static}
.cat-card .cc-foot::after,.img-card .cc-foot::after{content:"";position:absolute;inset:0;z-index:1}

/* Defensive: if a build uses a `.cc-media` image box inside a card (the canonical
   image card is `.img-card > .ic-media`, but `.cc-media` was improvised with NO
   css and rendered images at full intrinsic size, blowing the grid apart), still
   constrain it to a fixed-ratio cover box so it can never balloon. */
.cc-media{aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius-md);margin-bottom:18px;position:relative}
.cc-media img{width:100%;height:100%;object-fit:cover;display:block}

/* Last-ditch: a card-footer link that got ejected to be a DIRECT child of a grid
   (the nested-anchor bug) must not sit in a card column and shove everything out of
   alignment — drop it onto its own full-width row instead of interleaving the cards. */
.grid-2 > .cc-foot,.grid-3 > .cc-foot,.grid-4 > .cc-foot{grid-column:1/-1}

/* ==========================================================================
   CTA / button breathing room. A button or actions row that follows content in a
   body column (e.g. the "See the math" button pinned flush under a comparison
   table) must never sit jammed against the element above it.
   ========================================================================== */
.split-body > .btn,.split-body > .hero-actions,.split-body > .btn-row,
.cta-content > * + .btn,.cta-content > * + .hero-actions{margin-top:24px}
.split-body > * + .btn,.detail-card > * + .btn,.sidebar-cta > * + .btn{margin-top:22px}

/* ==========================================================================
   TABLES — for genuinely tabular content (comparison / spec / pricing). Use a REAL
   <table class="data-table"> wrapped in <div class="table-wrap"> (the wrap scrolls
   horizontally on small screens so columns never crush). NEVER fake a table by
   splitting a sentence or key-value data across mis-sized grid/flex columns.
   ========================================================================== */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0 24px;border:1px solid var(--border);border-radius:var(--radius-md)}
.data-table,.compare-table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:440px}
.data-table th,.data-table td,.compare-table th,.compare-table td{padding:13px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
.data-table thead th,.compare-table thead th{background:var(--surface);color:var(--text);font-weight:600;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.data-table tbody tr:last-child td,.compare-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr:nth-child(even),.compare-table tbody tr:nth-child(even){background:var(--surface)}
.data-table td:first-child,.compare-table td:first-child{font-weight:600;color:var(--text)}
.data-table .td-yes{color:var(--accent-dark);font-weight:600}
.data-table .td-no{color:var(--text-muted)}
/* On a dark band the table inherits .on-dark light text; tint the header/zebra for contrast. */
.on-dark .table-wrap{border-color:rgba(255,255,255,.16)}
.on-dark .data-table th,.on-dark .data-table td,.on-dark .compare-table th,.on-dark .compare-table td{border-bottom-color:rgba(255,255,255,.14)}
.on-dark .data-table thead th,.on-dark .compare-table thead th{background:rgba(255,255,255,.08);color:#fff}
.on-dark .data-table tbody tr:nth-child(even),.on-dark .compare-table tbody tr:nth-child(even){background:rgba(255,255,255,.05)}

/* ==========================================================================
   Trust / "backed by" bar — keep it from rendering as a jumbled plain-text list.
   Items are spaced pills; an EMPTY item must not leave a ghost gap.
   ========================================================================== */
.trust-pills{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px}
.trust-pills :empty,.trust-inner :empty,.trust-pill:empty,.brand-item:empty{display:none}
.trust-label{display:block;text-align:center}

/* ============================================================================
   SIGNATURE / DESIGN-PACK LAYER — opt-in, VETTED, responsive + contrast-safe.
   This is the toolkit for making a build DISTINCTIVE and design-heavy (see SKILL
   "Design ceiling"). It EXTENDS the baseline; it never replaces it. Using these
   classes is NOT "improvising CSS" — they are part of the shipped baseline, so you
   reach for them instead of hand-rolling a section's internals. Each is
   self-contained, mobile-safe, and degrades gracefully. Decorative glow/mesh/grid
   layers sit BEHIND content (z-index) and are pointer-events:none. Pair every
   dark/over-media band with .on-dark so text + icons stay light (contrast rule).
   Push these on fitting clients (tech, premium, modern, creative); keep the
   restrained baseline for trust-forward/industrial ones. Never at the cost of
   contrast or responsiveness.
   ============================================================================ */

/* --- Decorative DARK-BAND backgrounds: futuristic glow / mesh / grid / scanlines.
   Add to a `.section.dark` / `.hero-dark` / `.on-dark` band; content sits above. --- */
.bg-aurora{position:relative;overflow:hidden;isolation:isolate}
.bg-aurora::before{content:"";position:absolute;inset:-40% -15% auto -15%;height:95%;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 55% at 18% 20%,color-mix(in srgb,var(--accent) 42%,transparent),transparent 70%),
             radial-gradient(50% 50% at 82% 12%,color-mix(in srgb,var(--primary) 60%,transparent),transparent 72%);
  filter:blur(64px);opacity:.65}
.bg-grid{position:relative;overflow:hidden;isolation:isolate}
.bg-grid::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.45;
  background-image:linear-gradient(color-mix(in srgb,var(--accent) 14%,transparent) 1px,transparent 1px),
                   linear-gradient(90deg,color-mix(in srgb,var(--accent) 14%,transparent) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(72% 60% at 50% 28%,#000,transparent 76%);
          mask-image:radial-gradient(72% 60% at 50% 28%,#000,transparent 76%)}
.bg-glow{position:relative;overflow:hidden;isolation:isolate}
.bg-glow::before{content:"";position:absolute;left:50%;top:-20%;width:70vw;height:70vw;max-width:760px;max-height:760px;
  transform:translateX(-50%);z-index:-1;pointer-events:none;border-radius:50%;opacity:.5;filter:blur(90px);
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 55%,transparent),transparent 65%)}

/* --- BENTO grid: an asymmetric feature grid (a wide/tall lead tile + smaller tiles)
   instead of a flat row of identical cards. Children are normal .cat-card/.img-card/.glass. --- */
.bento{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:768px){
  .bento{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(150px,auto)}
  .bento .bento-lg{grid-column:span 2;grid-row:span 2}
  .bento .bento-wide{grid-column:span 2}
  .bento .bento-tall{grid-row:span 2}
}

/* --- GLASS card (glassmorphism) — only on dark / over-media bands (carry .on-dark). --- */
.glass{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 10px 44px rgba(0,0,0,.28);padding:28px 24px}

/* --- Editorial DISPLAY type, gradient + outline headline words. --- */
.display-xl{font-size:clamp(2.6rem,8vw,5.8rem);font-weight:650;letter-spacing:-.03em;line-height:1.02}
.display-lg{font-size:clamp(2.1rem,5.5vw,3.8rem);font-weight:650;letter-spacing:-.025em;line-height:1.06}
.text-gradient{background:linear-gradient(100deg,var(--accent),var(--primary));-webkit-background-clip:text;background-clip:text;color:transparent}
.text-stroke{-webkit-text-stroke:1.4px currentColor;color:transparent}   /* outline word for editorial heroes */
.eyebrow-line{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.eyebrow-line::before{content:"";width:34px;height:2px;background:var(--accent)}  /* minimalist line-label alt to the pill chip */

/* --- SPLIT-SCREEN hero: media on one side, content on the other (alt to the full-bleed hero). --- */
.hero-split{display:grid;grid-template-columns:1fr;min-height:auto}
.hero-split .hs-media{position:relative;overflow:hidden;min-height:44vh}
.hero-split .hs-media>img,.hero-split .hs-media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-split .hs-body{display:flex;flex-direction:column;justify-content:center;padding:120px 0 64px}
@media(min-width:900px){
  .hero-split{grid-template-columns:1.04fr .96fr;min-height:92vh}
  .hero-split .hs-media{min-height:0}
  .hero-split .hs-body{padding:96px 64px 96px 0}
}

/* --- ANGLED / soft-curve section divider — breaks the flat band-on-band stack.
   Use sparingly (one or two per page) and only on a band with ample vertical padding. --- */
.section-angled{clip-path:polygon(0 0,100% 2.6vw,100% 100%,0 calc(100% - 2.6vw))}
.section-curve{border-top-left-radius:48px 26px;border-top-right-radius:48px 26px;overflow:hidden}

/* --- MARQUEE strip: a moving row of CAPSULE chips (duplicate the track once for a seamless loop).
   ⛔ HARD CONSTRAINT: every phrase is its own `.hm-pill` — a padded, bordered capsule with real
   spacing between items. The old giant bare-text marquee shipped as an unreadable run-on word blur
   and is BANNED. Never put bare text directly in `.hm-track`. Pauses on hover. --- */
.headline-marquee{overflow:hidden;white-space:nowrap;width:100%;padding:6px 0}
.headline-marquee .hm-track{display:inline-flex;gap:16px;align-items:center;width:max-content;
  padding-right:16px;animation:hm-scroll 36s linear infinite}
.headline-marquee .hm-pill{display:inline-flex;align-items:center;gap:10px;padding:11px 24px;
  border-radius:999px;border:1px solid var(--border);background:var(--surface);
  font-weight:600;font-size:1.02rem;letter-spacing:.01em;line-height:1;color:var(--text)}
/* Icons on a LIGHT pill must never be raw --accent — a light client accent (cyan/yellow)
   on near-white --surface drops below 2:1 and the QA probe blocks it as an invisible band.
   Blend the accent toward --text so it stays brand-tinted but always readable; the dark
   override below restores light icons on dark sections. */
.headline-marquee .hm-pill svg,.headline-marquee .hm-pill .icon{width:1.05em;height:1.05em;color:color-mix(in srgb,var(--accent) 55%,var(--text))}
:is(.on-dark,.section.dark,.hero-dark) .headline-marquee .hm-pill{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
:is(.on-dark,.section.dark,.hero-dark) .headline-marquee .hm-pill svg,
:is(.on-dark,.section.dark,.hero-dark) .headline-marquee .hm-pill .icon{color:#fff}
.headline-marquee .hm-dot{color:color-mix(in srgb,var(--accent) 55%,var(--text));font-weight:650}
:is(.on-dark,.section.dark,.hero-dark) .headline-marquee .hm-dot{color:rgba(255,255,255,.6)}
.headline-marquee:hover .hm-track{animation-play-state:paused}
@keyframes hm-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- Accent KICKER rule under a stat / feature, and a hairline "tech" border. --- */
.kicker-rule{width:46px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--primary));margin:14px 0 0}
.edge-glow{border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent),0 14px 50px rgba(0,0,0,.18)}

@media(prefers-reduced-motion:reduce){
  .headline-marquee .hm-track{animation:none}
}
/* Mobile: kill the angled clip (it eats content at small sizes) and calm big type. */
@media(max-width:639px){
  .section-angled{clip-path:none}
  .hero-split .hs-body{padding:104px 0 56px}
}
/* AUTO-REPAIR: any explicit multi-column grid — INCLUDING a hand-written inline
   `style="display:grid;grid-template-columns:repeat(3,1fr)"` — collapses to a single
   column on phones. A stylesheet `!important` beats a non-important inline declaration,
   so this neutralises the #1 cause of mobile horizontal scroll (responsive_hscroll)
   regardless of how the section was authored. */
@media(max-width:600px){
  [style*="grid-template-columns"]{grid-template-columns:1fr !important}
}
/* AUTO-REPAIR: a .cta-form is always a WHITE card. When it sits inside an on-dark band
   (.cta-band / .cta-dark / .on-dark …), the band's white-text cascade turned the form's
   labels, helper text and input text white-on-white — an invisible form. This higher-
   specificity rule restores dark text inside the white card. (Same dark-cascade-into-a-
   light-child defect that hit .process; .cta-form is the reliably-white one we can target.) */
:is(.on-dark,.section.dark,.hero-dark,.process,.cta-dark,.cta-band,.sidebar-cta,.quick-response,.trust-bar,.stat-bar,.site-footer) .cta-form
  :where(h1,h2,h3,h4,h5,h6,p,label,span,small,strong,b,li,dd,dt,.form-label,.form-note,input,textarea,select){color:var(--text)}
/* AUTO-REPAIR: buttons inside the white .cta-form must use on-LIGHT styling. A .btn-outline
   defaults to white text + faint-white border (built for dark bands) — invisible on the
   white card. Force dark ink + a visible border so the form's buttons are always visible. */
.cta-form .btn-outline{color:var(--text);border-color:var(--border)}
.cta-form .btn-primary{color:#fff}
.cta-form :where(.btn,.btn-primary,.btn-outline) span{color:inherit}

/* AUTO-REPAIR: invented trust ticker (lite builds emit .trust-ticker/.tt-item instead
   of .trust-pill). Unstyled, the items stacked as a ragged left column on a dark band. */
.trust-bar .container{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.trust-ticker,[data-autoscroll].trust-ticker{display:flex;align-items:center;gap:36px;width:max-content;animation:brand-scroll 34s linear infinite}
.tt-item{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;white-space:nowrap;font-weight:600;font-size:.9rem;color:inherit}
.trust-bar .tt-item,.on-dark .tt-item{color:rgba(255,255,255,.92)}
.tt-item img{height:28px;width:auto;max-height:28px;object-fit:contain}
.tt-item svg{width:18px;height:18px;flex-shrink:0;color:var(--accent)}

/* AUTO-REPAIR: a .cta-dark nested inside .cta-band is a brand-red panel; a .btn-primary
   also filled with --primary vanished into it. White fill on those bands. */
.cta-dark .btn-primary,.cta-band .btn-primary,.cta-band .cta-dark .btn-primary{
  background:#fff;color:var(--primary-darker);border-color:#fff}
.cta-dark .btn-primary:hover,.cta-band .btn-primary:hover{
  background:var(--surface);color:var(--primary-darker);border-color:#fff}
/* QA-FIX: the on-dark :where(svg){color:#fff} cascade forced the arrow to WHITE inside the
   white .btn-primary pill on cta-band — a white icon on a white pill is invisible (probe:
   `invisible_text_bands` icons <3:1). Restore the arrow's stroke to the button's own text
   color so it stays visible. */
.cta-dark .btn-primary svg,.cta-band .btn-primary svg{color:var(--primary-darker)}
/* And on hover, keep the arrow color following the text. */
.cta-dark .btn-primary:hover svg,.cta-band .btn-primary:hover svg{color:var(--primary-darker)}
/* QA-FIX: .header-phone svg gets a dark-green forced color (see .header-phone svg rule),
   which is invisible on the dark cta-band. Force white when it appears inside a dark band. */
:is(.on-dark,.section.dark,.hero-dark,.process,.cta-dark,.cta-band,.sidebar-cta,.site-footer) .header-phone svg{color:#fff}
.cta-band .cta-dark{background:transparent;overflow:visible}
.cta-band .cta-dark::before,.cta-band .cta-dark::after{content:none}

/* AUTO-REPAIR: testimonials stuffed into .cat-card with ★ text in .cc-icon rendered as
   a 58px red square (looks like a broken image). If the icon has no SVG, drop the chip. */
.cat-card .cc-icon:not(:has(svg)){width:auto;height:auto;background:transparent;color:var(--primary-darker);padding:0;border-radius:0;margin-bottom:12px;font-size:1rem;letter-spacing:2px}

/* AUTO-REPAIR: tolerate the FAQ class-name variants the builder sometimes emits
   (.faq-q / .faq-a / .faq-icon) instead of the canonical .faq-question / .faq-answer /
   .faq-ico, so the accordion still styles + collapses. Paired with a JS selector that
   binds both spellings. */
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 22px;font-weight:600;font-size:1.02rem;text-align:left;color:var(--text);cursor:pointer}
.faq-q .faq-icon{width:30px;height:30px;border-radius:50%;background:var(--secondary);color:var(--primary-darker);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .25s var(--ease-hover),background .2s var(--ease-hover),color .2s var(--ease-hover)}
.faq-q .faq-icon svg{width:16px;height:16px}
.faq-item.active .faq-icon{background:var(--accent);color:var(--text);transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease-inout);color:var(--text-secondary);
  font-size:.97rem;padding:0 22px}
.faq-a > :last-child{margin-bottom:22px}
/* AUTO-REPAIR: tolerate the process-section variant the builder sometimes emits (.ps-num for
   the number circle, and a bare .process with steps not wrapped in .process-grid) so a
   hand-rolled "How It Works" still styles instead of shipping as an unstyled stack. */
.process .ps-num,.ps-num{width:54px;height:54px;border-radius:50%;border:2px solid var(--accent);
  color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:650;font-size:1.2rem;margin-bottom:18px}
.process > .container > .process-step{display:inline-block}
@media(min-width:768px){.process .process-step + .process-step{margin-top:0}}

/* QA-FIX: .need-link on the home "Find the Right Funding" split had a baseline-aligned
   inline SVG next to a possibly wrapping text label — icon drifted ~15px below text center.
   Force inline-flex + align-items:center so the arrow stays centered on the last text line. */
.need-link{display:inline-flex;align-items:center;gap:6px;color:var(--primary-darker);font-weight:600}
.need-link svg{width:15px;height:15px;flex-shrink:0}

/* ==========================================================================
   CLIENT FEEDBACK ROUND 1 — utility topbar, calendar + application embeds
   ========================================================================== */

/* --- Utility topbar (carries the legacy top-level tabs: Partner & Affiliate
   Opportunities, Calendar) so the main nav keeps room for the primary tabs. --- */
.topbar-left{display:flex;align-items:center;gap:22px;min-width:0}
.topbar-phone{font-weight:650;letter-spacing:-.01em}
.topbar-right a{font-weight:600}
/* nowrap so a narrow bar can never grow to two lines — that would push the fixed header
   past --header-total and misalign the body offset and the mobile drawer. */
.topbar-inner{white-space:nowrap}
/* `.topbar a` (0,1,1) outranks a bare `.topbar-wide` (0,1,0), so this must be scoped to win. */
.topbar .topbar-wide{display:none}
@media(min-width:900px){.topbar .topbar-wide{display:inline-flex}}
@media(max-width:639px){
  .topbar{font-size:.76rem}
  .topbar-inner{gap:10px}
  .topbar-right{gap:14px}
  .topbar-left{gap:14px}
}

/* The nav now carries 6 top-level tabs, so the bar (and ONLY the bar) gets a wider
   track than the 1200px content container. Below 1320 the existing header-fit guard
   tightens padding, then falls back to the hamburger — unchanged behaviour. */
@media(min-width:1320px){.site-header .container{max-width:1320px}}
/* Between 1024 and 1319 the six tabs + logo + CTA no longer clear the bar, and the fit guard
   would drop the WHOLE nav to a hamburger on a laptop. Fold the one tab that is also a column
   head inside the Funding Solutions mega menu instead, so the desktop nav survives. */
@media(max-width:1319px){.desktop-nav > .nav-link[href$="real-estate-funding/"]{display:none}}

/* --- Third-party embeds (Google Calendar scheduling, application form) ---------
   Both providers render their own chrome inside the frame, so the wrapper supplies
   only the card, and the iframe fills it. Height is set per embed. --- */
.embed-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden}
.embed-frame{display:block;width:100%;border:0;background:#fff}
.embed-calendar .embed-frame{height:820px}
@media(max-width:767px){.embed-calendar .embed-frame{height:640px}}
.embed-apply .embed-frame{height:2560px}
@media(max-width:767px){.embed-apply .embed-frame{height:3000px}}
/* form_embed.js resizes the frame to its real content height; the values above are the
   pre-script fallback so a blocked script still shows the whole form, never a scrollbox. */
.embed-note{margin-top:18px;font-size:.92rem;color:var(--text-muted)}
.embed-fallback{margin-top:16px;font-size:.95rem;color:var(--text-secondary)}
.embed-fallback a{color:var(--primary-darker);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* --- Hero button pair on the partner page: two equal-weight CTAs ---------------- */
.hero-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
@media(max-width:479px){.hero-cta-row .btn{width:100%}}

/* The injected pre-footer band sits on the LIGHT --surface-2, but .cta-content paints its
   heading and copy white for the dark .cta-band. Repaint them for the light ground. */
.footer-cta-band .cta-content h2{color:var(--text)}
.footer-cta-band .cta-content p{color:var(--text-secondary)}

/* Published NAP row on the contact page — three equal blocks under the reach-us cards. */
.contact-nap{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:768px){.contact-nap{grid-template-columns:repeat(3,1fr);gap:28px}}

/* Pull quote — carries the lines from the Lendora sales letter. */
.letter-quote{max-width:860px;margin:0 auto;text-align:center;position:relative;padding:0 12px}
.letter-quote blockquote{font-family:var(--font-display,var(--font-sans));font-size:clamp(1.35rem,1.05rem + 1.3vw,2rem);line-height:1.35;font-weight:600;letter-spacing:-.02em;color:var(--primary-darker);margin:0}
.letter-quote .lq-mark{display:block;font-size:2.6rem;line-height:1;color:var(--primary-darker);margin:0 0 4px}
.letter-quote cite{display:block;margin-top:18px;font-style:normal;font-size:.92rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.section.dark .letter-quote .lq-mark{color:var(--accent)}
.section.dark .letter-quote blockquote{color:#fff}
.section.dark .letter-quote cite{color:rgba(255,255,255,.7)}

/* Two-column check list — a short "who this is for" list reads better paired than stacked. */
.check-list-2col{max-width:820px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.check-list-2col{grid-template-columns:1fr 1fr;column-gap:40px}}
/* Brand line from the Lendora masthead, above the footer blurb. */
.footer-tagline{font-family:var(--font-display);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;color:var(--accent);margin:0 0 10px}

/* QA FIX — `.text-white` (line 137) and `.header-phone` (line 275) have equal specificity, so
   the later .header-phone won and painted the homepage CTA-band phone link dark-green on the
   dark band (1.35:1, effectively invisible) and kept its display:none below 1200px. This
   restores the intent that .text-white on that element already declared. */
.header-phone.text-white{color:#fff;display:inline-flex}
.header-phone.text-white svg{color:var(--accent)}

/* ==========================================================================
   HOME — "Start with the Goal, Not the Product" (need-list) + "Four Facts
   That Change the Application Conversation" (bento). Both sections were
   rendering with unstyled rows / tiles — plain text over the band. These rules
   give them proper card treatment, hierarchy, and hover-lift. Component-layer
   only — no palette / token changes.
   ========================================================================== */

/* ---------- Need-list: numbered path cards ---------- */
.need-list.need-cards{display:flex;flex-direction:column;gap:14px;counter-reset:need;margin:8px 0 0}
.need-list.need-cards .need-row{
  position:relative;display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:18px;
  padding:20px 22px 20px 20px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:0 1px 2px rgba(14,57,29,.04);counter-increment:need;
  transition:transform .22s var(--ease-hover),box-shadow .22s var(--ease-hover),border-color .22s var(--ease-hover)}
.need-list.need-cards .need-row::before{
  content:counter(need,decimal-leading-zero);grid-column:1;grid-row:1 / span 2;
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:14px;
  background:linear-gradient(135deg,var(--accent-dark),var(--primary-darker));color:#fff;
  font-family:var(--font-display);font-weight:650;font-size:1.02rem;letter-spacing:.02em;
  box-shadow:0 6px 16px -6px rgba(19,136,62,.5)}
.need-list.need-cards .need-row:hover{
  transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  box-shadow:0 14px 34px -14px rgba(14,57,29,.22),0 2px 6px rgba(14,57,29,.06)}
.need-list.need-cards .need-q{
  grid-column:2;grid-row:1;align-self:end;
  font-family:var(--font-display);font-weight:600;font-size:1.12rem;line-height:1.2;letter-spacing:-.01em;color:var(--text)}
.need-list.need-cards .need-a{
  grid-column:2;grid-row:2;align-self:start;
  font-size:.94rem;line-height:1.5;color:var(--text-secondary)}
.need-list.need-cards .need-link{
  grid-column:3;grid-row:1 / span 2;align-self:center;
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;
  border-radius:var(--radius-pill);border:1px solid color-mix(in srgb,var(--primary) 22%,transparent);
  background:var(--secondary);color:var(--primary-darker);font-weight:600;font-size:.88rem;white-space:nowrap;
  transition:background .18s var(--ease-hover),color .18s var(--ease-hover),border-color .18s var(--ease-hover)}
.need-list.need-cards .need-link svg{width:14px;height:14px;transition:transform .18s var(--ease-hover)}
.need-list.need-cards .need-row:hover .need-link{background:var(--primary);color:#fff;border-color:transparent}
.need-list.need-cards .need-row:hover .need-link svg{transform:translateX(4px)}
/* Whole-card click target (the ::after overlays the row above content) */
.need-list.need-cards .need-row .need-link::after{content:"";position:absolute;inset:0;z-index:1}
.need-list.need-cards .need-row > *{position:relative;z-index:2}
/* Tablet + phone: number chip stays on the left, but the CTA drops under the copy */
@media(max-width:719px){
  .need-list.need-cards .need-row{grid-template-columns:52px 1fr;gap:14px;padding:18px 18px 18px 16px}
  .need-list.need-cards .need-row::before{width:46px;height:46px;font-size:.95rem;border-radius:12px}
  .need-list.need-cards .need-q{font-size:1.04rem}
  .need-list.need-cards .need-a{font-size:.9rem}
  .need-list.need-cards .need-link{grid-column:2;grid-row:3;align-self:start;justify-self:start;margin-top:2px}
}

/* ---------- Bento: real cards ---------- */
.bento{gap:20px}
.bento .bento-tile{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:0 1px 2px rgba(14,57,29,.05);
  transition:transform .22s var(--ease-hover),box-shadow .22s var(--ease-hover),border-color .22s var(--ease-hover)}
.bento .bento-tile:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  box-shadow:0 22px 44px -18px rgba(14,57,29,.24),0 2px 8px rgba(14,57,29,.06)}
.bento .bento-media{position:relative;overflow:hidden;background:var(--surface-2);aspect-ratio:16/10}
.bento .bento-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.bento .bento-tile:hover .bento-media img{transform:scale(1.045)}
/* Gentle brand tint on media so it never sits as a raw photo on the tile */
.bento .bento-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--dark) 24%,transparent) 100%)}
.bento .bento-body{
  display:flex;flex-direction:column;gap:10px;padding:26px 24px;flex:1}
.bento .bento-body .eyebrow{
  display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--primary-darker);margin-bottom:2px}
.bento .bento-body h3{
  font-size:1.18rem;line-height:1.22;margin:0;color:var(--text)}
.bento .bento-body p{
  color:var(--text-secondary);font-size:.94rem;line-height:1.55;margin:0}
/* Icon chip — same brand chip the .cat-card icons use, so it doesn't render bare inside .bento */
.bento .bento-tile .bento-body .cc-icon{
  width:52px;height:52px;border-radius:14px;
  background:linear-gradient(135deg,var(--accent-dark),var(--primary));color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px -6px rgba(19,136,62,.5);
  margin-bottom:6px}
.bento .bento-tile .bento-body .cc-icon svg{width:26px;height:26px}
/* Featured (bento-lg) tile: larger type, image gets more room */
@media(min-width:768px){
  .bento .bento-lg .bento-media{aspect-ratio:auto;flex:1;min-height:220px}
  .bento .bento-lg .bento-body{padding:28px 28px 30px}
  .bento .bento-lg .bento-body h3{font-size:1.5rem;letter-spacing:-.015em}
  .bento .bento-lg .bento-body p{font-size:1rem}
  .bento .bento-wide .bento-body{padding:26px 28px}
}
/* Subtle top-corner accent bar on tiles WITHOUT a media image, so an all-copy tile
   doesn't look empty next to the image-led ones */
.bento .bento-tile:not(:has(.bento-media))::before{
  content:"";position:absolute;top:0;left:0;height:4px;width:64px;border-radius:0 0 4px 0;
  background:linear-gradient(90deg,var(--accent),var(--primary))}
/* Reveal effect on hover for the eyebrow-less tiles: the .cc-icon gently tilts */
.bento .bento-tile:hover .cc-icon{transform:translateY(-2px) rotate(-3deg)}
.bento .cc-icon{transition:transform .22s var(--ease-hover)}

/* ==========================================================================
   CLIENT FEEDBACK ROUND 2 — surface Partner & Affiliate + Calendar
   Both lived only in the 36px utility topbar (.82rem, 82%-opacity white, above
   the logo) and Partner was display:none under 900px, so on tablets and narrow
   laptops it was unreachable outside the hamburger. They are now promoted:
   "Partners" is now a primary nav link, and Calendar is a filled "Book a Call"
   pill in the topbar (the nav bar had no width left for a second button — see
   the note below). Neither is duplicated: carrying them in two places is part
   of what split the attention and made them invisible.
   ========================================================================== */

/* The old duplicate topbar link is gone from the markup; drop its rules so the
   selector can't resurrect on a stale page. */
.topbar .topbar-wide{display:none}

/* --- Topbar: "Book a Call" pill ------------------------------------------- */
/* The nav bar was measured at 1255px of its 1256px budget, so a second header
   button forced initHeaderFit straight to .header-collapse (desktop nav replaced
   by the hamburger at every width) — the opposite of making this link visible.
   It lives in the topbar instead, as a filled pill that reads as a CTA rather
   than the 82%-opacity fine print it used to be, and it shows at ALL widths. */
.topbar .topbar-cta{background:var(--accent);color:var(--text);font-weight:700;padding:5px 14px;border-radius:var(--radius-pill);line-height:1.2;transition:background .15s var(--ease-hover),color .15s var(--ease-hover)}
/* --text on --accent is 5.6:1 and #fff/--primary-darker is 6.3:1; the obvious
   --primary-darker on --accent was only 2.7:1 and failed AA at this size. */
.topbar .topbar-cta:hover{background:#fff;color:var(--primary-darker)}
.topbar .topbar-cta svg{width:13px;height:13px}
/* The topbar is 36px tall; the pill must not push it taller. */
.topbar-inner{min-height:36px;height:auto}
@media(max-width:560px){
  .topbar .topbar-cta{padding:4px 11px;font-size:.74rem}
  .topbar .topbar-cta svg{display:none}
}

/* --- Desktop nav: make room for "Partners" -------------------------------- */
/* Reclaimed from inter-item padding rather than from any existing nav item, so
   the seventh link fits on one line and the fit-guard stays out of it. */
@media(min-width:1024px){
  .desktop-nav{gap:2px}
  .header-actions .btn-sm{padding:10px 15px}
}
/* The 1024–1279 band already runs a tighter set (see the "Keep the ENTIRE header
   on ONE line" block above); squeeze it a little further rather than overriding
   it from a min-width:1024 rule, which would have LOOSENED it back to 11px. */
@media(min-width:1024px) and (max-width:1279px){
  .nav-link{padding:9px 8px}
  .logo-img{max-width:150px}
}
@media(min-width:1280px){
  .nav-link{padding:9px 11px}
  .header-inner{gap:16px}
}

/* --- Mobile drawer: featured block ---------------------------------------- */
/* Previously items #9 and #10 of a flat 12-link list. Pulled to the top and
   tinted so they read as destinations, not more page chrome. */
.mm-featured{display:grid;gap:8px;margin:0 0 14px;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md)}
.mm-featured .mm-feat{display:flex;align-items:center;gap:10px;padding:12px 14px;font-weight:650;font-size:1rem;color:var(--primary-darker);background:#fff;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);transition:background .15s var(--ease-hover),color .15s var(--ease-hover)}
.mm-featured .mm-feat:hover,.mm-featured .mm-feat[aria-current="page"]{background:var(--primary);color:#fff}
.mm-featured .mm-feat svg{width:19px;height:19px;flex-shrink:0}

/* --- Footer: lift the two out of the generic link list -------------------- */
.footer-col .fl-feature{color:#fff;font-weight:650}
.footer-col .fl-feature:hover{color:var(--accent)}

/* --- Homepage partner section: justified last lines ----------------------- */
/* The base justify rule (≈line 157) sets text-align-last:left for <p> but not
   for <li>, so the final line of each check-list item stretched edge to edge —
   the "every        business." gap the client flagged in this section. */
.prose li,.split-body li,.section-body li,.rich-text li,.justify li,.check-list li{text-align-last:left}

/* At 1024–1100 the seventh link is the difference between the desktop nav and
   the hamburger, so let the fit-guard's "tight" step squeeze harder in that band
   before it gives up and collapses. */
@media(min-width:1024px) and (max-width:1279px){
  .site-header.header-tight .nav-link{padding:8px 7px;font-size:.87rem}
  .site-header.header-tight .header-actions .btn-sm{padding:9px 12px;font-size:.84rem}
  .site-header.header-tight .logo-img{max-width:136px}
}

/* --- Hero: "Book a Call" as the middle CTA -------------------------------- */
/* Three CTAs need three distinct weights, or the second and third read as the
   same offer. Solid white sits between the filled green primary and the ghost
   outline: clearly a button, clearly not the primary. White on --primary-darker
   text is 6.3:1. Only for dark heroes — on a light band it would vanish. */
.btn-light{background:#fff;color:var(--primary-darker);border-color:#fff}
.btn-light:hover{background:var(--surface);color:var(--primary-darker);border-color:var(--surface);transform:translateY(-2px);box-shadow:var(--shadow-md)}
/* The dark-band rule near line 1019 paints EVERY svg inside .hero-dark white, which
   on this white button made the icon invisible. That selector is :is(...) :where(...),
   and :is() takes its MOST specific argument — `.section.dark` — so it scores (0,2,0),
   not the (0,1,0) it looks like. Hence `.btn.btn-light` (0,2,1) rather than a bare
   `.btn-light svg` (0,1,1), which lost. Scoped to the button, not to .hero-dark, so it
   stays correct wherever this button is used. */
.btn.btn-light svg{color:var(--primary-darker)}

/* --- Thank-you page (/thank-you/) ------------------------------------------ */
.ty-content{max-width:720px;margin:0 auto;text-align:center}
.ty-content .hero-sub{margin-left:auto;margin-right:auto}
.ty-badge{width:76px;height:76px;margin:0 auto 22px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 10px color-mix(in srgb,var(--primary) 14%,transparent)}
.ty-badge svg{width:38px;height:38px;stroke-width:2.6}
.ty-hero .btn svg{width:18px;height:18px}

/* --- We Buy Houses page (/we-buy-houses/) ---------------------------------- */
.process-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px 30px;box-shadow:var(--shadow-md)}
.wbh-steps{list-style:none;counter-reset:wbh;display:flex;flex-direction:column;gap:22px;margin-top:14px}
.wbh-steps li{counter-increment:wbh;position:relative;padding-left:58px;color:var(--text-secondary);min-height:42px}
.wbh-steps li::before{content:counter(wbh,decimal-leading-zero);position:absolute;left:0;top:0;width:42px;height:42px;border-radius:50%;border:2px solid var(--accent-dark);color:var(--primary-darker);font-weight:650;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.wbh-steps li b{display:block;color:var(--text);font-weight:600;margin-bottom:2px}
.wbh-form-card{padding:32px 30px;box-shadow:var(--shadow-md);margin-bottom:0}
.wbh-form-card h3{font-size:1.35rem}
.wbh-form-card > p{margin-bottom:20px}
#cash-offer{scroll-margin-top:110px}