/* ==========================================================================
   build-site BASELINE stylesheet — copy verbatim, then THEME the block below.
   To theme per client, change ONLY: (1) the color tokens, (2) --font-sans, 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. (Reference brand: slate-teal + lime, Manrope.)

   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.
   ========================================================================== */

/* WAYNE 2026 brand guide — Canela Regular (headlines), Lato (eyebrows/menus/CTAs), Inter (body). */
@font-face{font-family:Canela;src:local("Canela"),local("Canela Regular"),local("Canela-Regular"),local("CanelaText"),local("Canela Text");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Canela;src:local("Canela Italic"),local("Canela Regular Italic"),local("Canela-RegularItalic"),local("CanelaTrial-RegularItalic");font-weight:400;font-style:italic;font-display:swap}

:root{
  /* Type roles from Gushwork Branding 2026.pdf */
  --font-display:Canela,"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --font-ui:Lato,Helvetica,Arial,sans-serif;
  --font-sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --track-ui:.05em; /* guide: +50 kerning on Lato eyebrows, menus, CTAs */

  /* Named palette — hexes copied from the 2026 color guide */
  --forest:#1E5C46;
  --bronze:#D59734;
  --night:#213659;
  --ivory:#F5F2EB;
  --slate:#697774;
  --lavender:#899BBD;
  --charcoal:#1E2323;

  /* Component tokens (names the baseline CSS already reads) */
  --primary:#1E5C46;
  --primary-dark:#174a38;
  --primary-darker:#12382b;
  --accent:#D59734;
  --accent-dark:#b87e28;
  --accent-bright:#ebbd45;
  --green:#1E5C46;
  --secondary:#e4ebe7;
  --bg:#F5F2EB;
  --surface:#ffffff;
  --surface-2:#ebe6dc;
  --text:#1E2323;
  --text-secondary:#697774;
  --text-muted:#7a8784;
  --border:#d2d8d4;
  --dark:#1E5C46;
  --dark-mid:#174a38;
  --dark-soft:#2a7157;
  --white:#fff;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:18px;
  --radius-pill:40px;
  --shadow-sm:0 1px 2px rgba(30,35,35,.06);
  --shadow-md:0 6px 20px rgba(30,35,35,.09);
  --shadow-lg:0 18px 50px rgba(30,35,35,.16);
  --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 */
}

/* ---------- 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}
/* `height:auto` is REQUIRED here: a lot of the imported blog/podcast bodies carry
   WordPress/Kajabi `width="300" height="200"` attributes. Without it, `max-width:100%`
   shrinks the width on narrow viewports while the height attribute stays put — the box
   stops matching the photo and the image gets squashed (or, once object-fit lands on it,
   cropped). With it, every attribute-sized image scales proportionally. */
img{max-width:100%;height:auto;display:block}
/* 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). Full-bleed hero/CTA backgrounds
   and logos are explicitly exempt. This only catches improvised bare <img>.
   TWO THINGS MATTER HERE:
   1. `object-fit:contain`, not cover. A safety net must never CROP — only a component that
      deliberately declares an aspect-ratio box (.ic-media, .ind-card …) gets to crop, because
      only it knows the box was designed for that art. A blanket `cover` silently sliced the
      edges off every image whose box didn't match its source.
   2. The exemptions live in `:where()`, which contributes ZERO specificity. The old
      `:not(.a):not(.b):not(.c):not(.d):not([e])` chain scored (0,5,2) — higher than every
      component rule in this file — so this net was overriding `.ic-media img`, `.split-media img`
      and friends instead of backstopping them. At (0,0,2) it is a floor that any component
      rule beats, which is what a safety net is supposed to be. */
main img:not(:where(.hero-dark-bg,.cta-band-bg,.logo-img,.footer-logo,.hero-brand,.ess-inline,.brand-lockup img,[class*="-bg"])){max-height:560px;object-fit:contain}
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}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:400;letter-spacing:0;line-height:1.18;color:var(--text)}
h1{font-size:clamp(2.1rem,5vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.3rem}
p{color:var(--text-secondary)}
.hl{font-family:var(--font-display);font-style:italic;font-weight:400;color:var(--bronze)}
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)}
.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}
.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}
.lead{font-size:1.12rem;color:var(--text-secondary)}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-ui);font-size:.72rem;font-weight:400;letter-spacing:var(--track-ui);text-transform:uppercase;color:var(--forest);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);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-family:var(--font-ui);font-weight:700;font-size:.78rem;line-height:1;letter-spacing:var(--track-ui);text-transform:uppercase;padding:14px 26px;border-radius:var(--radius-pill);border:2px solid transparent;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;cursor:pointer;white-space:nowrap}
.btn svg{width:17px;height:17px;flex-shrink:0}
.btn-primary{background:var(--accent);color:var(--charcoal);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);transform:translateY(-2px);box-shadow:0 10px 24px rgba(213,151,52,.4)}
.btn-dark{background:var(--primary);color:#fff;border-color:var(--primary)}
.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);border-color:var(--primary)}
.btn-outline-dark:hover{background:var(--primary);color:#fff;transform:translateY(-2px)}
.btn-sm{padding:10px 18px;font-size:.72rem}
.btn-lg{padding:17px 34px;font-size:.88rem}
.btn-block{width:100%}

/* ---------- Header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(30,92,70,.94);backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid rgba(255,255,255,.14);transition:background .25s ease,box-shadow .25s ease}
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}
.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}}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;max-width:min(250px,52vw)}
.logo-img{height:34px;width:auto;max-width:100%}
@media(min-width:1024px){.logo-img{height:38px}}
/* Official Dr. Wayne stamp from the 2026 logo guide.
   Header bar is always Forest green, so the white lockup is the only one shown. */
.logo-on-light{display:none}
.logo-on-dark{display:block}
.desktop-nav{display:none;align-items:center;gap:6px}
@media(min-width:1024px){.desktop-nav{display:flex}}
.nav-link{display:inline-flex;align-items:center;gap:5px;padding:8px 9px;font-family:var(--font-ui);font-weight:400;font-size:.7rem;letter-spacing:var(--track-ui);text-transform:uppercase;color:rgba(255,255,255,.92);border-radius:var(--radius-sm);transition:color .15s,background .15s}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.12)}
.nav-link svg{width:14px;height:14px;transition:transform .2s}
.nav-dropdown{position:relative}
.nav-dropdown:hover .nav-link svg{transform:rotate(180deg)}
.dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:480px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:14px;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .2s ease;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.dropdown-menu.single-col{grid-template-columns:1fr;min-width:260px}
.nav-dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-item{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--radius-sm);transition:background .15s}
.dropdown-item:hover{background:var(--surface)}
.dropdown-item .di-title{font-family:var(--font-ui);font-weight:700;font-size:.88rem;color:var(--text);display:flex;align-items:center;gap:8px}
.dropdown-item .di-title svg{width:16px;height:16px;color:var(--primary)}
.dropdown-item .di-sub{font-size:.8rem;color:var(--text-muted);padding-left:24px}
.dropdown-foot{grid-column:1/-1;margin-top:6px;padding:10px 12px;border-top:1px solid var(--border);font-weight:700;font-size:.88rem;color:var(--primary);display:flex;align-items:center;gap:6px}
.dropdown-foot svg{width:15px;height:15px}
/* mega menu (Our Services) */
.dropdown-menu.mega{min-width:560px}
.mega-col{padding:10px 12px}
.mega-col .mc-head{display:flex;align-items:center;gap:9px;font-family:var(--font-ui);font-weight:400;font-size:.78rem;letter-spacing:var(--track-ui);text-transform:uppercase;color:var(--text);margin-bottom:9px;border-radius:var(--radius-sm)}
.mega-col .mc-head .mc-ico{width:30px;height:30px;border-radius:8px;background:var(--secondary);color:var(--primary);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)}
.mega-col .mc-links{display:flex;flex-direction:column;gap:2px}
.mega-col .mc-links a{font-size:.85rem;color:var(--text-secondary);padding:5px 8px 5px 39px;border-radius:var(--radius-sm);transition:background .15s,color .15s}
.mega-col .mc-links a:hover{background:var(--surface);color:var(--primary)}
.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:700;color:#fff;font-size:.95rem}
.header-phone svg{width:17px;height:17px;color:var(--accent)}
@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:#fff}
.mobile-toggle svg{width:26px;height:26px}
@media(min-width:1024px){.mobile-toggle{display:none}}

/* header over dark hero: same green, slightly glassier so the hero reads through */
.header-transparent{background:rgba(30,92,70,.85);border-bottom-color:transparent}
.header-scrolled{background:rgba(23,74,56,.97);border-bottom-color:rgba(255,255,255,.14);box-shadow:var(--shadow-sm)}
.header-scrolled .logo-img{filter:none}

/* mobile menu */
/* height is set explicitly (not bottom:0): the menu lives inside .site-header, whose
   backdrop-filter makes it the containing block for fixed descendants — bottom:0 would
   resolve against the 72px header and collapse the panel to one item tall. */
.mobile-menu{position:fixed;top:var(--header-total);left:0;right:0;height:calc(100vh - var(--header-total));height:calc(100dvh - var(--header-total));background:var(--ivory);z-index:999;transform:translateX(-100%);transition:transform .28s ease;overflow-y:auto;padding:18px 20px 40px}
.mobile-menu.active{transform:translateX(0)}
.mobile-menu .mm-link{display:block;padding:14px 6px;font-weight:700;font-size:1.05rem;border-bottom:1px solid var(--border)}
.mobile-menu .mm-group-label{padding:16px 6px 6px;font-family:var(--font-ui);font-size:.72rem;font-weight:400;letter-spacing:var(--track-ui);text-transform:uppercase;color:var(--slate)}
.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)}

/* ---------- Sections ---------- */
.section{padding:80px 0}
.section-sm{padding:52px 0}
.section-lg{padding:104px 0}
.section.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}
.section-header.left{margin-left:0;text-align:left}
.section-header.label-below{display:flex;flex-direction:column;align-items:center;text-align:center}
.section-header.label-below h2{order:1;margin:0 0 26px}
.section-header.label-below .eyebrow{order:2;margin:0}
.section-header.label-below p{order:3;margin-top:20px}
.section-header h2{margin:10px 0 14px}
.section-header p{font-size:1.08rem}

/* ---------- Hero (dark) ---------- */
.hero-dark{position:relative;color:#fff;overflow:hidden;background:var(--night)}
.hero-dark-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.7);z-index:0}
.hero-dark::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(33,54,89,.84) 0%,rgba(33,54,89,.58) 48%,rgba(30,92,70,.38) 100%);z-index:1}
.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:rgba(213,151,52,.16);color:var(--accent);font-family:var(--font-ui);font-weight:400;font-size:.72rem;letter-spacing:var(--track-ui);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) */
.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-content.center .hero-ticker{margin-left:auto;margin-right:auto;justify-content:center}
.hero-ticker .ht-num{font-family:var(--font-display);font-size:2rem;font-weight:400;color:#fff;line-height:1}
.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}

/* 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}
.breadcrumb-inner a:hover{color:var(--primary)}
.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(--primary);color:#fff}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 16px;padding:48px 0}
@media(min-width:768px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat-item{text-align:center}
.stat-num{font-family:var(--font-display);font-size:clamp(2rem,4vw,2.8rem);font-weight:400;line-height:1;color:#fff}
.stat-num .text-accent{color:var(--accent)}
.stat-label{font-size:.9rem;color:rgba(255,255,255,.8);margin-top:8px}

/* ---------- Trust bar ---------- */
.trust-bar{background:var(--accent);padding:34px 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:.9rem;padding:10px 18px;border-radius:var(--radius-pill)}
.trust-pill svg{width:17px;height:17px;color:var(--accent)}
/* on the golden band the pills flip to charcoal-on-light for contrast */
.trust-bar .trust-pill{background:rgba(255,255,255,.32);border-color:rgba(255,255,255,.5);color:var(--charcoal)}
.trust-bar .trust-pill svg{color:var(--charcoal)}
.trust-bar .trust-label{color:rgba(30,35,35,.72)}

/* brands strip */
.brand-strip{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:800;letter-spacing:-.02em;color:var(--text-muted);opacity:.7;white-space:nowrap}
@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 ease,box-shadow .2s ease,border-color .2s ease;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);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:700;font-size:.9rem;color:var(--primary)}
.card-link svg{width:15px;height:15px;transition:transform .18s}
.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 ease}
.svc-card:hover::before{transform:scaleX(1)}
.svc-card .num{position:absolute;top:24px;right:26px;font-size:1.4rem;font-weight:800;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 ease,box-shadow .2s ease;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 .4s ease}
/* Ratio modifiers — the crop box must match the art it holds, or `cover` eats the edges.
   One 16/10 box for everything cost us: 37.5% off the top+bottom of every SQUARE podcast
   cover (guest's head and the show title band, gone), and 10% off the sides of every 16:9
   blog card. Each source set here is uniform, so a matching box crops literally nothing:
     --square  225/225 podcast covers are 1:1
     --wide    516/519 blog images are 16:9
     --photo   the category / industry / product photos are 3:2
   Same specificity as `.img-card .ic-media`, so these must stay AFTER it to win. */
.img-card .ic-media--square{aspect-ratio:1/1}
.img-card .ic-media--wide{aspect-ratio:16/9}
.img-card .ic-media--photo{aspect-ratio:3/2}
.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}

/* 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,box-shadow .2s,border-color .2s;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:700;font-size:.92rem;color:var(--primary)}
.cat-card .cc-foot svg{width:15px;height:15px;transition:transform .18s}
.cat-card:hover .cc-foot svg{transform:translateX(4px)}
.cat-card .cc-count{display:inline-block;font-size:.76rem;font-weight:700;color:var(--primary);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,box-shadow .2s}
.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 .4s}
.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 .18s,color .18s,border-color .18s}
.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}
/* No forced aspect-ratio. Half the art dropped into a split is a PORTRAIT (the 2:3 headshots,
   split-cat-speaking, split-ind-healthcare …); a hard 4/3 `cover` box threw away 50% of those —
   a full-length portrait rendered as a cropped face. `width:auto` + both max constraints hands
   sizing to the CSS replaced-element algorithm, which shrinks to fit while PRESERVING the
   source ratio: landscapes still fill the column, portraits render tall and centered. Nothing
   is ever cropped, and nothing can blow out the column. */
.split-media img{width:auto;height:auto;max-width:100%;max-height:620px;margin:0 auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);object-fit:contain}
.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-family:var(--font-display);font-size:1.9rem;font-weight:400;color:var(--primary);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}
.check-list li{display:flex;align-items:flex-start;gap:11px;color:var(--text-secondary)}
.check-list li svg{width:20px;height:20px;color:var(--accent-dark);flex-shrink:0;margin-top:2px}
.check-list li b{color:var(--text);font-weight:700}

/* ---------- 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-family:var(--font-display);font-weight:400;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 .4s}
.ind-card:hover img{transform:scale(1.07)}
.ind-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(30,92,70,.88) 0%,rgba(30,92,70,.15) 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}
.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:800;font-size:1.05rem;flex-shrink:0}
.testi-meta .ta-name{font-weight:700;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,border-color .2s}
.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:700;font-size: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);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .25s,background .2s,color .2s}
.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 ease}
.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,rgba(213,151,52,.22),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:680px;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,rgba(30,92,70,.95),rgba(18,56,43,.82));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}}
.cta-form-grid .cfg-text h2{color:#fff;margin-bottom:16px}
.cta-form-grid .cfg-text p{color:rgba(255,255,255,.78);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-family:var(--font-ui);font-size:.72rem;font-weight:400;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:var(--track-ui)}
.cfg-contact .ci-val{font-weight:700;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,box-shadow .15s}
.form-control::placeholder{color:var(--text-muted)}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(77,108,119,.14)}
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}
.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}
.form-note{font-size:.8rem;color:var(--text-muted);margin-top:6px}

/* ---------- 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:700;color:var(--primary);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);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-icon svg{width:19px;height:19px}
.contact-item .ci-label{font-family:var(--font-ui);font-size:.72rem;font-weight:400;color:var(--slate);text-transform:uppercase;letter-spacing:var(--track-ui)}
.contact-item .ci-val{font-weight:700;color:var(--text);font-size:.98rem}
.contact-item .ci-val a:hover{color:var(--primary)}
.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-family:var(--font-ui);font-size:.72rem;font-weight:400;letter-spacing:var(--track-ui);text-transform:uppercase;color:var(--slate);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,border-color .15s}
.filter-check .fc-box svg{width:13px;height:13px;color:#fff;opacity:0;transition:opacity .15s}
.filter-check input:checked + .fc-box{background:var(--primary);border-color:var(--primary)}
.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:700;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,box-shadow .2s,border-color .2s;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-family:var(--font-ui);font-size:.7rem;font-weight:400;letter-spacing:var(--track-ui);text-transform:uppercase;color:var(--night);background:rgba(137,155,189,.22);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);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:50px 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);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:800;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}
/* Same reasoning as .split-media img — never force a ratio onto art we don't control. */
.product-visual img{width:auto;height:auto;max-width:100%;max-height:620px;margin:0 auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);object-fit:contain}
.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:800;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,box-shadow .2s,border-color .2s}
.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);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);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-family:var(--font-ui);font-size:.72rem;font-weight:400;letter-spacing:var(--track-ui);text-transform:uppercase;color:var(--primary);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-logo{height:72px;width:auto;margin-bottom:18px;display:block}
.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,color .2s}
.footer-social a:hover{background:var(--accent);color:var(--text)}
.footer-social svg{width:18px;height:18px}
.footer-col h4{font-family:var(--font-ui);color:#fff;font-size:.78rem;font-weight:400;letter-spacing:var(--track-ui);text-transform:uppercase;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,padding-left .15s}
.footer-col ul li a:hover{color:var(--accent);padding-left:3px}
.footer-contact-item{display:flex;gap:11px;margin-bottom:15px;font-size:.9rem}
.footer-contact-item svg{width:17px;height:17px;color:var(--accent);flex-shrink:0;margin-top:3px}
.footer-contact-item .fci-label{font-family:var(--font-ui);font-weight:400;color:rgba(255,255,255,.5);font-size:.72rem;text-transform:uppercase;letter-spacing:var(--track-ui)}
.footer-contact-item a:hover,.footer-contact-item .fci-val:hover{color:#fff}
.footer-contact-item .fci-val{color:rgba(255,255,255,.82);font-weight:600}
.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),var(--green) 50%,var(--primary));z-index:1200;box-shadow:0 0 12px rgba(213,151,52,.55);transition:width .08s linear}

/* Video hero */
.hero-video .hero-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0;transition:opacity .9s ease;filter:saturate(.9) brightness(.85)}
.hero-video .hero-bg-video.ready{opacity:1}

/* 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%,rgba(213,151,52,.18),transparent 38%),
             radial-gradient(circle at 82% 72%,rgba(30,92,70,.22),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 rgba(213,151,52,.45)}
.svc-card,.cat-card,[data-tilt]{transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease,border-color .25s ease;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 rgba(213,151,52,.55),0 8px 22px rgba(197,143,42,.35)}50%{box-shadow:0 0 0 12px rgba(213,151,52,0),0 8px 26px rgba(213,151,52,.5)}}
.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),var(--green))}

/* Brand marquee */
.brand-marquee{padding:38px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface)}
.brand-marquee .bm-label{text-align:center;font-family:var(--font-ui);font-size:.72rem;font-weight:400;letter-spacing:var(--track-ui);text-transform:uppercase;color:var(--slate);margin-bottom:22px}
.brand-strip{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,filter .25s,transform .25s}
.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 ease}
.stat-item.in .stat-num{animation:stat-pop .5s ease}
@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 ease}
.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 (light text on every dark surface) ---------- */
.hero-dark .eyebrow,.process .eyebrow,.cta-dark .eyebrow,.cta-band .eyebrow,.section.dark .eyebrow{color:var(--accent);background:rgba(255,255,255,.1)}
.process h2,.process h3,.process h4{color:#fff}
.process .section-header p,.process p{color:rgba(255,255,255,.74)}
.cta-dark h2,.cta-dark h3,.cta-band h2,.cta-band h3{color:#fff}
.sidebar-cta h2,.sidebar-cta h3,.sidebar-cta h4,.quick-response h2,.quick-response h3,.quick-response h4{color:#fff}
.hero-dark h2,.hero-dark h3{color:#fff}

/* ---------- Quote FAB ---------- */
.quote-fab{position:fixed;right:22px;bottom:calc(22px + var(--fab-lift,0px));z-index:1090;display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--charcoal);font-family:var(--font-ui);font-weight:700;font-size:.78rem;letter-spacing:var(--track-ui);text-transform:uppercase;padding:14px 22px;border-radius:var(--radius-pill);box-shadow:0 10px 30px rgba(30,35,35,.28);transition:transform .2s,box-shadow .2s;animation:fab-breathe 3.4s ease-in-out infinite}
.quote-fab:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 38px rgba(30,35,35,.34);animation-play-state:paused}
.quote-fab svg{width:19px;height:19px}
@keyframes fab-breathe{0%,100%{box-shadow:0 10px 30px rgba(30,35,35,.28)}50%{box-shadow:0 10px 30px rgba(213,151,52,.55)}}
@media(max-width:560px){.quote-fab{right:16px;bottom:calc(16px + var(--fab-lift,0px));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)}}

/* ---------- Ask Dr. Wayne — Delphi AI chat ----------
   Two placements share this block:
   (1) .aw-embed  — the live chat embedded inside the homepage "Ask Dr. Wayne
       anything" band, where the section already promises it.
   (2) .wp-chat-* — a site-wide floating launcher + slide-up panel.
   The launcher sits bottom-LEFT on purpose: the gold Quote FAB owns
   bottom-right, and the two must never stack on top of each other.
   The iframe src is set on FIRST OPEN (see main.js) so no page pays for a
   third-party frame it never uses. */
.aw-embed{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-md);overflow:hidden;box-shadow:0 18px 44px rgba(8,14,28,.34)}
.aw-embed iframe{display:block;width:100%;height:540px;border:0;background:#fff}
@media(max-width:899px){.aw-embed iframe{height:470px}}
.aw-embed-note{margin-top:10px;font-size:.78rem;color:rgba(255,255,255,.62);text-align:center}
.aw-embed-note a{color:var(--accent);text-decoration:none;font-weight:700}
.aw-embed-note a:hover{text-decoration:underline}

.wp-chat-fab{position:fixed;left:22px;bottom:calc(22px + var(--fab-lift,0px));z-index:1095;display:inline-flex;align-items:center;gap:10px;background:var(--charcoal);color:#fff;border:1px solid rgba(213,151,52,.55);font-family:var(--font-ui);font-weight:700;font-size:.78rem;letter-spacing:var(--track-ui);text-transform:uppercase;padding:11px 20px 11px 11px;border-radius:var(--radius-pill);box-shadow:0 10px 30px rgba(30,35,35,.34);transition:transform .2s,box-shadow .2s}
.wp-chat-fab:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 38px rgba(16,30,58,.44)}
.wp-chat-fab img{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:2px solid var(--accent);flex-shrink:0}
.wp-chat-fab .wp-chat-dot{position:absolute;left:34px;bottom:9px;width:11px;height:11px;border-radius:50%;background:#3ecf8e;border:2px solid var(--charcoal)}
.wp-chat-fab-label{white-space:nowrap}
@media(max-width:560px){.wp-chat-fab{left:16px;bottom:calc(16px + var(--fab-lift,0px));padding:8px;border-radius:50%}.wp-chat-fab .wp-chat-dot{left:38px;bottom:6px}.wp-chat-fab-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}}

.wp-chat-panel{position:fixed;left:22px;bottom:22px;z-index:1120;width:400px;max-width:calc(100vw - 32px);height:min(640px,calc(100vh - 120px));display:flex;flex-direction:column;background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 26px 70px rgba(8,14,28,.42);transform-origin:0 100%;opacity:0;visibility:hidden;transform:translateY(18px) scale(.97);transition:opacity .22s ease,transform .22s ease,visibility .22s}
.wp-chat-panel.open{opacity:1;visibility:visible;transform:none}
.wp-chat-head{display:flex;align-items:center;gap:11px;padding:12px 12px 12px 15px;background:linear-gradient(150deg,var(--primary) 0%,var(--primary-darker) 100%);color:#fff;flex-shrink:0}
.wp-chat-head img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:2px solid var(--accent);flex-shrink:0}
.wp-chat-id{flex:1;min-width:0}
.wp-chat-id strong{display:block;font-size:.95rem;line-height:1.25}
.wp-chat-id span{display:block;font-size:.74rem;color:rgba(255,255,255,.72);line-height:1.35}
.wp-chat-act{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(255,255,255,.12);flex-shrink:0;transition:background .15s}
.wp-chat-act:hover{background:rgba(255,255,255,.24)}
.wp-chat-act svg{width:17px;height:17px}
.wp-chat-body{flex:1;position:relative;background:#fff;min-height:0}
.wp-chat-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wp-chat-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.85rem;color:var(--text-muted);background:#fff}
.wp-chat-panel.loaded .wp-chat-load{display:none}
@media(max-width:560px){.wp-chat-panel{left:8px;right:8px;bottom:8px;width:auto;max-width:none;height:calc(100vh - 84px);height:calc(100dvh - 84px)}}
/* Only one floating thing at a time on small screens. */
@media(max-width:560px){body.wp-chat-open .quote-fab,body.wp-chat-open .wp-chat-fab{display:none}}

/* ---------- 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 ease}
@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}
.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 ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.brand-track,.quote-fab{animation:none}.wp-chat-panel{transition:opacity .01s linear,visibility .01s;transform:none}.wp-chat-panel.open{transform: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-grid{padding:38px 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}
  .hero-ticker .ht-num{font-size:1.6rem}
  .faq-question{padding:16px 18px;font-size:.96rem}
  .trust-pill{font-size:.84rem;padding:9px 14px}
}
@media(max-width:479px){
  .section{padding:48px 0}
  .btn{white-space:normal;text-align:center}
  .btn-lg{padding:15px 24px}
  .hero-dark h1{font-size:1.95rem}
  .hero-actions .btn{width:100%}
  .product-meta{grid-template-columns:1fr}
  .ind-card{flex-basis:220px}
  .stat-num{font-size:1.7rem}
  .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 table,.split-body .compare-table{width:100%;margin:8px 0 22px}
.split-body > * + .btn,.detail-card > * + .btn,.sidebar-cta > * + .btn{margin-top:22px}

/* ==========================================================================
   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{display:none}
.trust-label{display:block;text-align:center}

/* --- blog post article (generated pages) --- */
.post-article{max-width:780px;margin:0 auto;font-size:1.05rem;line-height:1.85;color:var(--text-secondary)}
.post-article p{margin:0 0 1.15em}
.post-article strong{color:var(--text)}
.post-article a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.post-article blockquote{margin:1.4em 0;padding:.6em 1.2em;border-left:3px solid var(--accent);background:var(--surface);border-radius:var(--radius-sm);color:var(--text)}
/* Imported post bodies carry `width=`/`height=` attributes (book covers, inline photos).
   Deliberately NO `width` declaration — the width attribute is a presentational hint, so any
   author-level `width` (even `auto`) overrides it, and a broken image then loses its intrinsic
   size and stretches to the full 780px column as an empty box. Letting the hint through keeps
   both loaded and missing images at their authored size. `max-width:100%` + `height:auto` scale
   them down proportionally on narrow screens; `max-height:none` opts out of the global 560px cap
   so a tall portrait book cover is never clamped into a box that no longer matches it. */
.post-article img{max-width:100%;height:auto;max-height:none;object-fit:contain;border-radius:var(--radius-md)}
/* A legacy image whose source is gone (the old waynepernell.com WordPress uploads) must not
   leave a hole in the middle of a post. main.js tags those on error; this collapses them. */
.post-article img.img-missing,.post-hero-img img.img-missing{display:none}
.post-article ul,.post-article ol{margin:0 0 1.15em;padding-left:1.4em}
.post-hero-img{max-width:780px;margin:0 auto 40px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
/* `max-height:none` — the post hero is width-driven; letting the global cap clamp its height
   while the width stays 100% would create a box that no longer matches the photo. */
.post-hero-img img{width:100%;height:auto;max-height:none;display:block}
.post-head{max-width:780px;margin:0 auto 32px;text-align:center}
.post-head h1{font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.2;color:var(--text);margin:14px 0 12px}
.post-meta{font-size:.85rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:780px;margin:52px auto 0}
.post-nav a{display:block;padding:18px 20px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg);text-decoration:none;transition:box-shadow .2s}
.post-nav a:hover{box-shadow:var(--shadow-md)}
.post-nav .pn-label{font-family:var(--font-ui);font-size:.72rem;font-weight:400;color:var(--slate);text-transform:uppercase;letter-spacing:var(--track-ui);display:block;margin-bottom:6px}
.post-nav .pn-title{color:var(--text);font-weight:600;font-size:.95rem;line-height:1.35}
.post-nav a.pn-next{text-align:right}
@media(max-width:640px){.post-nav{grid-template-columns:1fr}}

/* --- podcast pages (generated) --- */
.ep-player{max-width:780px;margin:0 auto 36px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px 24px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.ep-player img{width:96px;height:96px;border-radius:var(--radius-md);object-fit:cover;flex-shrink:0}
.ep-player audio{flex:1;min-width:240px}
.ep-duration{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}
.pod-subscribe{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:8px 0 0}


/* --- 8-item nav: Lato all-caps +50 tracking must still fit one line --- */
.desktop-nav .nav-link{white-space:nowrap}
@media(min-width:1024px) and (max-width:1359px){
  .nav-link{padding:8px 5px;font-size:.58rem}
  .logo-img{height:32px}
  .header-actions .btn{padding:10px 14px;font-size:.68rem}
  .desktop-nav{gap:0}
}
@media(min-width:1360px){
  .nav-link{padding:8px 7px;font-size:.66rem}
  .desktop-nav{gap:2px}
}


/* --- Two-path fork: B2B (organizations) vs B2C (individuals) -------------------
   Client's structure, verbatim: "my path is a two-sided path. One is I'm consulting
   with organizations. The other is I'm a coach and strategic advisor to individuals.
   I want to make sure that both are represented." Corporate track sells excellence;
   individual track sells hope and excellence. ------------------------------------ */
.path-fork{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:900px){.path-fork{grid-template-columns:repeat(2,1fr)}}
.path-card{position:relative;display:flex;flex-direction:column;border-radius:var(--radius-lg);padding:38px 34px 32px;border:1px solid var(--border);background:#fff;transition:transform .22s ease,box-shadow .22s ease}
.path-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.path-card.is-org{background:linear-gradient(160deg,var(--dark) 0%,var(--dark-mid) 100%);border-color:transparent;color:rgba(255,255,255,.86)}
.path-card.is-org h3,.path-card.is-org .pc-kicker{color:#fff}
.path-card.is-org .pc-links a{color:rgba(255,255,255,.9);border-bottom-color:rgba(255,255,255,.18)}
.path-card.is-org .pc-links a:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* Individual/coaching track gets the same bold, dark treatment as the org track — same
   visual weight, different brand color (night vs. forest) — so 1:1 Strategic Advising &
   Coaching reads as co-equal, not a lighter/secondary option next to consulting. */
.path-card.is-individual{background:linear-gradient(160deg,var(--night) 0%,#182741 100%);border-color:transparent;color:rgba(255,255,255,.86)}
.path-card.is-individual h3,.path-card.is-individual .pc-kicker{color:#fff}
.path-card.is-individual .pc-links a{color:rgba(255,255,255,.9);border-bottom-color:rgba(255,255,255,.18)}
.path-card.is-individual .pc-links a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.pc-kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-ui);font-size:.72rem;font-weight:400;letter-spacing:var(--track-ui);text-transform:uppercase;color:var(--primary);margin-bottom:14px}
.pc-kicker svg{width:16px;height:16px}
.path-card h3{font-size:1.5rem;line-height:1.2;margin-bottom:10px}
.path-card>p{font-size:.97rem;line-height:1.6;margin-bottom:22px}
.path-card.is-org>p,.path-card.is-individual>p{color:rgba(255,255,255,.74)}
.pc-sell{display:block;font-weight:700;color:var(--accent-dark);margin-bottom:20px;font-size:.9rem;letter-spacing:.01em}
.path-card.is-org .pc-sell,.path-card.is-individual .pc-sell{color:var(--accent-bright)}
.pc-links{display:flex;flex-direction:column;gap:0;margin:0 0 26px;padding:0;list-style:none}
.pc-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;text-decoration:none;color:var(--text);font-weight:600;font-size:.95rem;border-bottom:1px solid var(--border);transition:color .18s,border-color .18s}
.pc-links a:hover{color:var(--primary)}
.pc-links a svg{width:16px;height:16px;flex-shrink:0;opacity:.55}
.path-card .btn{margin-top:auto;align-self:flex-start}

/* --- Ask Dr. Wayne Anything (Delphi AI clone) --- */
.ask-wayne{display:grid;grid-template-columns:1fr;gap:30px;align-items:center;background:linear-gradient(150deg,var(--primary) 0%,var(--primary-darker) 100%);border-radius:var(--radius-lg);padding:44px 36px;color:#fff}
@media(min-width:900px){.ask-wayne{grid-template-columns:1.35fr 1fr;padding:52px 54px}}
.ask-wayne h2{color:#fff;font-size:1.85rem;line-height:1.18;margin-bottom:14px}
.ask-wayne p{color:rgba(255,255,255,.8);font-size:1rem;line-height:1.62;margin-bottom:0}
.ask-wayne .eyebrow{background:rgba(255,255,255,.12);color:#fff}
.aw-prompts{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.aw-prompt{display:block;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-md);padding:14px 18px;color:rgba(255,255,255,.92);font-size:.92rem;text-decoration:none;transition:background .18s,border-color .18s,transform .18s}
a.aw-prompt:hover{background:rgba(255,255,255,.16);border-color:var(--accent);transform:translateX(3px)}
.aw-prompt span{display:block;font-family:var(--font-ui);font-size:.72rem;text-transform:uppercase;letter-spacing:var(--track-ui);color:var(--accent);margin-bottom:4px;font-weight:400}
.fg-cred{font-family:var(--font-ui);font-size:.72rem;font-weight:400;letter-spacing:var(--track-ui);text-transform:uppercase;color:var(--accent-dark);margin-bottom:8px}
.ep-search-wrap{max-width:620px;margin:0 auto;text-align:center}
.ep-search-label{display:block;font-family:var(--font-ui);font-size:.72rem;font-weight:400;letter-spacing:var(--track-ui);text-transform:uppercase;color:var(--slate);margin-bottom:12px}
.ep-search{width:100%;padding:15px 20px;font-family:inherit;font-size:1rem;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-pill);transition:border-color .18s,box-shadow .18s}
.ep-search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(213,151,52,.16)}
.ep-search-count{margin:12px 0 0;font-size:.85rem;color:var(--text-muted);min-height:1.2em}
.ep-search-empty{text-align:center;color:var(--text-muted);margin-top:36px}

/* --- Official brand lockups (2026 files) --- */
.hero-brand{height:96px;width:auto;margin:0 0 18px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.28))}
@media(min-width:768px){.hero-brand{height:120px}}
.brand-lockup{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:22px 0 8px}
.brand-lockup img{height:64px;width:auto}
.brand-lockup img.brand-lockup-dl{height:88px}
.ess-inline{height:110px;width:auto;margin:0 0 18px;display:block}