/* ============================================================================
   THE ACCOUNTS HUB — Design System for NATIVE Elementor (Free) widgets
   ----------------------------------------------------------------------------
   HOW THIS WORKS
   - Build the page with NATIVE Elementor widgets (Heading, Text, Button,
     Icon List, Image, Container).
   - On each widget/container, add a `tah-*` class in Advanced -> CSS Classes.
   - LEAVE THE ELEMENTOR STYLE TAB EMPTY. All look-and-feel is defined here so
     there is ONE source of truth (versioned in this child theme).
   - Selectors target Elementor's DOM: the tah-* class lands on the outer
     `.elementor-element`; inner text is `.elementor-heading-title`,
     `.elementor-widget-container`, `.elementor-button`, etc.
   ============================================================================ */

:root{
  --tah-ink:#0c1c13;      --tah-muted:#556a5c;     --tah-muted-2:#7f9184;
  --tah-forest:#0e3d24;   --tah-forest-deep:#092718;
  --tah-green:#2f9e44;    --tah-green-700:#177a2f;
  --tah-lime:#a6e15a;     --tah-lime-bright:#c2f06f; --tah-lime-soft:#e6f7c9;
  --tah-bg-soft:#f2f7ee;  --tah-bg-warm:#faf8f1;    --tah-bg-mint:#e7f2e1;
  --tah-line:#e1ebdb;     --tah-line-2:#d3e2ca;
  --tah-radius:18px;
  --tah-shadow-sm:0 1px 2px rgba(14,61,36,.05),0 8px 24px -12px rgba(14,61,36,.14);
  --tah-shadow-md:0 30px 60px -28px rgba(14,61,36,.35);
  --tah-shadow-lg:0 44px 90px -40px rgba(9,39,24,.5);
  --tah-ease:cubic-bezier(.22,.61,.36,1);
  --tah-maxw:1180px;
}

/* ---------------------------------------------------------------- TYPOGRAPHY */
/* NOTE: this Elementor version renders NO `.elementor-widget-container` wrapper —
   widget content (h1..h6 / p) sits directly inside the `.elementor-widget` div,
   so we target the widget element (the tah-* class) and its inner tag directly. */

/* Eyebrow / kicker — Heading (H6) or Text widget + class `tah-kicker` */
.tah-kicker{display:inline-flex!important;align-items:center;gap:9px}
.tah-kicker .elementor-heading-title,
.tah-kicker p{
  font-family:"IBM Plex Mono",monospace!important;font-size:12px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--tah-green-700);margin:0;
}
.tah-kicker::before{
  content:"";width:15px;height:15px;border-radius:5px;flex:none;
  background:linear-gradient(135deg,var(--tah-lime),var(--tah-green));
  box-shadow:0 0 0 4px var(--tah-lime-soft);
}
.tah-on-dark .elementor-heading-title,.tah-on-dark p{color:var(--tah-lime)!important}
.tah-on-dark.tah-kicker::before{box-shadow:0 0 0 4px rgba(166,225,90,.14)}

/* H1 — Heading widget (H1) + class `tah-h1` (span.tah-hl wraps the accent word) */
.tah-h1 .elementor-heading-title{
  font-family:"Bricolage Grotesque",sans-serif!important;font-weight:700;
  font-size:clamp(40px,5.6vw,60px);line-height:1.04;letter-spacing:-.03em;color:var(--tah-ink);
}
/* highlight painted as a background (no z-index pseudo — survives section backgrounds) */
.tah-hl{
  color:var(--tah-green-700);white-space:nowrap;padding:0 2px;
  background-image:linear-gradient(90deg,var(--tah-lime),var(--tah-lime-soft));
  background-repeat:no-repeat;background-position:0 86%;background-size:100% .34em;
}

/* H2 — Heading (H2) + class `tah-h2` */
.tah-h2 .elementor-heading-title{
  font-family:"Bricolage Grotesque",sans-serif!important;font-weight:700;
  font-size:clamp(29px,3.6vw,44px);line-height:1.05;letter-spacing:-.03em;color:var(--tah-ink);
}

/* Body / lead — Text Editor + class `tah-lead` or `tah-body` */
.tah-lead p{
  font-family:"Figtree",sans-serif;font-size:18.5px;line-height:1.6;color:var(--tah-muted);max-width:40ch;margin:0;
}
.tah-body p{
  font-family:"Figtree",sans-serif;font-size:15px;line-height:1.6;color:var(--tah-muted);margin:0;
}
.tah-mono p{
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--tah-green-700);letter-spacing:.01em;margin:0;
}

/* --------------------------------------------------------------------- BUTTONS */
/* Button widget + `tah-btn` and a variant class */
.tah-btn .elementor-button{
  font-family:"Figtree",sans-serif;font-weight:600;font-size:15.5px;
  padding:13px 22px;border-radius:12px;border:1.5px solid transparent;
  display:inline-flex;align-items:center;gap:9px;transition:transform .28s var(--tah-ease),background .28s,color .28s,box-shadow .28s,border-color .28s;
}
.tah-btn .elementor-button:hover{transform:translateY(-2px)}
/* !important on colors: Astra / Elementor-kit global button styles can load AFTER this sheet
   (order varies by page/cache) and were painting buttons white with a blue hover. The tah-btn
   variants are the design system — they must win regardless of enqueue order. */
.tah-btn--primary .elementor-button{background:var(--tah-forest)!important;color:#eafff0!important;border-color:transparent!important;box-shadow:var(--tah-shadow-sm)}
.tah-btn--primary .elementor-button:hover,.tah-btn--primary .elementor-button:focus{background:var(--tah-forest-deep)!important;color:#eafff0!important;box-shadow:var(--tah-shadow-md)}
.tah-btn--lime .elementor-button{background:var(--tah-lime)!important;color:var(--tah-forest-deep)!important;border-color:transparent!important}
.tah-btn--lime .elementor-button:hover,.tah-btn--lime .elementor-button:focus{background:var(--tah-lime-bright)!important;color:var(--tah-forest-deep)!important}
.tah-btn--ghost .elementor-button{background:#fff!important;color:var(--tah-ink)!important;border-color:var(--tah-line-2)!important}
.tah-btn--ghost .elementor-button:hover,.tah-btn--ghost .elementor-button:focus{background:#fff!important;border-color:var(--tah-green)!important;color:var(--tah-green-700)!important}
.tah-btn--ghost-dark .elementor-button{background:transparent!important;color:#eafff0!important;border-color:rgba(255,255,255,.34)!important}
.tah-btn--ghost-dark .elementor-button:hover,.tah-btn--ghost-dark .elementor-button:focus{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.6)!important}

/* ----------------------------------------------------------------- ICON LISTS */
/* Icon List widget + `tah-list-check` (green ticks) or `tah-list-x` (amber) */
.tah-list-check .elementor-icon-list-icon i,
.tah-list-check .elementor-icon-list-icon svg{color:var(--tah-green-700);fill:var(--tah-green-700)}
.tah-list-x .elementor-icon-list-icon i,
.tah-list-x .elementor-icon-list-icon svg{color:#c08a3e;fill:#c08a3e}
.tah-list-check .elementor-icon-list-text,
.tah-list-x .elementor-icon-list-text{font-family:"Figtree",sans-serif;font-size:15px;color:var(--tah-ink)}
.tah-list-check .elementor-icon-list-item,
.tah-list-x .elementor-icon-list-item{margin-bottom:12px;align-items:flex-start}

/* --------------------------------------------------------------------- HELPERS */
.tah-assure p{font-family:"Figtree",sans-serif;font-size:14px;color:var(--tah-muted);margin:0}

/* ============================================================ SECTION: HERO === */
/* Root container — class `tah-hero` (content width: Full) */
.tah-hero{
  padding:66px 0 46px;
  background:
    radial-gradient(58% 52% at 84% 6%,rgba(166,225,90,.24),transparent 60%),
    radial-gradient(46% 42% at 4% 4%,rgba(47,158,68,.10),transparent 55%),
    linear-gradient(180deg,#ffffff 0%,var(--tah-bg-soft) 100%);
}
/* Inner container — class `tah-hero__inner` (content width: Boxed, direction: Row) */
.tah-hero__inner{max-width:var(--tah-maxw);margin-inline:auto;gap:50px;align-items:center}
.tah-hero__copy{flex:1 1 55%;min-width:0;display:flex;flex-direction:column;gap:0}
.tah-hero__copy > .elementor-element{margin-bottom:0}
.tah-hero__copy .tah-h1{margin:20px 0 0}
.tah-hero__copy .tah-lead{margin-top:22px}
.tah-hero__copy .tah-hero__cta{margin-top:30px}
.tah-hero__copy .tah-assure{margin-top:22px}
.tah-hero__visual{flex:1 1 45%;min-width:0}
/* CTA row — container `tah-hero__cta` (direction Row) */
.tah-hero__cta{display:flex;gap:13px;flex-wrap:wrap;align-items:center}

/* Hero visual card — container `tah-hero-card` (direction Column) */
.tah-hero-card{
  background:#fff;border:1px solid var(--tah-line);border-radius:var(--tah-radius);
  box-shadow:var(--tah-shadow-lg);padding:22px;gap:0;
}
.tah-hero-card__top{display:flex;justify-content:space-between;align-items:center;
  padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--tah-line)}
.tah-card-title .elementor-heading-title{font-family:"Bricolage Grotesque",sans-serif!important;font-weight:700;font-size:16px;color:var(--tah-ink)}
.tah-card-stamp p{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;margin:0;
  text-transform:uppercase;color:var(--tah-green-700);border:1px solid var(--tah-line-2);border-radius:6px;padding:4px 8px}
.tah-hero-card .tah-list-check{margin:0}
.tah-hero-foot{margin-top:15px;padding-top:14px;border-top:1px solid var(--tah-line)}
.tah-hero-foot p{font-family:"Figtree",sans-serif;font-size:13px;font-weight:600;color:var(--tah-green-700);margin:0}

/* ------------------------------------------------------------------ RESPONSIVE */
.tah-hero__copy,.tah-hero__visual{min-width:0}        /* allow flex children to shrink */
.tah-h1 .elementor-heading-title{overflow-wrap:break-word}
@media(max-width:960px){
  .tah-hero__inner{flex-direction:column;gap:40px}
  .tah-hero__copy,.tah-hero__visual{flex:1 1 auto;width:100%;max-width:min(480px,100%)}
  .tah-hero-card{max-width:100%}
}
@media(max-width:640px){
  .tah-hero{padding:48px 0 32px;overflow-x:clip}
  .tah-h1 .elementor-heading-title{font-size:clamp(28px,8vw,34px)}
  .tah-hero__cta{flex-wrap:wrap}
  .tah-hero__cta .tah-btn{flex:1 1 100%}
  .tah-hero__cta .tah-btn .elementor-button{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .tah-btn .elementor-button{transition:none}
}

/* ===== SECTION PARTS (assembled) ===== */


/* ---- conversion.css ---- */
/* ============================================================================
   THE ACCOUNTS HUB — SECTION: CONVERSION (native Elementor, id `quote` / class `tah-convert`)
   ----------------------------------------------------------------------------
   Same DOM notes as tah.css: NO `.elementor-widget-container` wrapper.
   Widget content sits directly inside `.elementor-element`, so selectors
   target the widget's `tah-*` class + inner tag.
   ============================================================================ */

/* Root container — class `tah-convert` (content width: Full) */
.tah-convert{padding:26px}

/* Gradient panel — container `tah-convert__panel` (content width: Boxed, direction: Column) */
.tah-convert__panel{
  max-width:var(--tah-maxw);margin-inline:auto;
  background:linear-gradient(135deg,var(--tah-forest-deep),var(--tah-green-700));
  border-radius:30px;padding:74px 40px;text-align:center;color:#eafff0;
  position:relative;overflow:hidden;gap:0;align-items:center;
}
.tah-convert__panel::before{
  content:"";position:absolute;inset:0;opacity:.6;pointer-events:none;
  background:radial-gradient(50% 120% at 50% -8%,rgba(166,225,90,.34),transparent 55%);
}
.tah-convert__panel > .elementor-element{position:relative;max-width:100%}

/* Kicker — reuse `tah-kicker tah-on-dark`, centered here */
.tah-convert__panel .tah-kicker{justify-content:center}

/* H2 — reuse `tah-h2 tah-on-dark`, centered + max width */
.tah-convert__panel .tah-h2{margin-top:18px}
.tah-convert__panel .tah-h2 .elementor-heading-title{
  font-size:clamp(30px,4vw,50px);max-width:20ch;margin-inline:auto;
}

/* Body text — class `tah-lead tah-on-dark tah-convert__text` */
.tah-convert__text{margin-top:18px}
.tah-convert__text p{
  color:#bfe0c6!important;font-size:17.5px;max-width:50ch;margin-inline:auto;
}

/* CTA row — container `tah-convert__cta` (direction Row), centered */
.tah-convert__cta{
  display:flex;gap:13px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:30px;
}

/* Ghost-on-dark button modifier — class `tah-btn--ghost-dark` */
.tah-btn--ghost-dark .elementor-button{
  background:transparent;color:#eafff0;border-color:rgba(255,255,255,.28);
}
.tah-btn--ghost-dark .elementor-button:hover{
  border-color:var(--tah-lime);color:var(--tah-lime);
}

/* Assurance list — icon-list `tah-list-check tah-convert__assure`, centered row */
.tah-convert__assure{margin-top:26px}
.tah-convert__assure .elementor-icon-list-items{
  display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin:0;
}
.tah-convert__assure .elementor-icon-list-item{margin-bottom:0;align-items:center}
.tah-convert__assure .elementor-icon-list-icon i,
.tah-convert__assure .elementor-icon-list-icon svg{color:var(--tah-lime)!important;fill:var(--tah-lime)!important}
.tah-convert__assure .elementor-icon-list-text{
  font-family:"Figtree",sans-serif;font-size:13.5px;color:#cfe6d4!important;
}

/* ------------------------------------------------------------------ RESPONSIVE */
@media(max-width:640px){
  .tah-convert__panel{padding:54px 22px}
  .tah-convert__cta{flex-wrap:wrap}
  .tah-convert__cta .tah-btn{flex:1 1 100%}
  .tah-convert__cta .tah-btn .elementor-button{width:100%;justify-content:center}
}

/* === FIX: panel is now a FULL container (like .tah-how) so CSS background works;
   style it as a centered rounded card. === */
.tah-convert__panel{
  background-color:#0e3d24;                         /* solid fallback (survives Elementor bg-image lazy-load) */
  background-image:linear-gradient(135deg,#092718,#177a2f);
  max-width:var(--tah-maxw);margin-inline:auto;
  border-radius:30px;padding:74px 40px;text-align:center;
  position:relative;overflow:hidden;
}
.tah-convert__panel .tah-h2 .elementor-heading-title{color:#eafff0!important}
@media(max-width:640px){.tah-convert__panel{padding:54px 22px}}

/* The band is also rendered (via the shared template) inside .tah-page / .tah-svcp scopes whose
   `.e-con{padding:0}` reset outguns these class rules — reassert the panel + outer padding there. */
.tah-page .e-con.tah-convert,.tah-svcp .e-con.tah-convert{padding:26px!important}
.tah-page .e-con.tah-convert__panel,.tah-svcp .e-con.tah-convert__panel{padding:74px 40px!important}
@media(max-width:640px){.tah-page .e-con.tah-convert__panel,.tah-svcp .e-con.tah-convert__panel{padding:54px 22px!important}}
/* Same scope-reset issue for widget margins (`.tah-page/.tah-svcp .elementor-widget{margin:0}`) —
   reassert the band's internal rhythm inside those scopes. */
.tah-page .tah-convert__panel .elementor-widget.tah-h2,.tah-svcp .tah-convert__panel .elementor-widget.tah-h2{margin-top:18px!important}
.tah-page .tah-convert__panel .elementor-widget.tah-convert__text,.tah-svcp .tah-convert__panel .elementor-widget.tah-convert__text{margin-top:18px!important}
.tah-page .tah-convert__panel .e-con.tah-convert__cta,.tah-svcp .tah-convert__panel .e-con.tah-convert__cta{margin-top:30px!important;display:flex;gap:13px;flex-wrap:wrap;align-items:center;justify-content:center;flex-direction:row!important}
.tah-page .tah-convert__panel .elementor-widget.tah-convert__assure,.tah-svcp .tah-convert__panel .elementor-widget.tah-convert__assure{margin-top:26px!important}
.tah-page .tah-convert__assure .elementor-icon-list-icon i,.tah-svcp .tah-convert__assure .elementor-icon-list-icon i,
.tah-page .tah-convert__assure .elementor-icon-list-icon svg,.tah-svcp .tah-convert__assure .elementor-icon-list-icon svg{color:var(--tah-lime)!important;fill:var(--tah-lime)!important;font-size:13px;width:13px;height:13px;display:inline-block}
.tah-page .tah-convert__assure .elementor-icon-list-text,.tah-svcp .tah-convert__assure .elementor-icon-list-text{color:#cfe6d4;font-size:13.5px}
.tah-page .tah-convert__assure .elementor-icon-list-item,.tah-svcp .tah-convert__assure .elementor-icon-list-item{display:flex;gap:8px;align-items:center;padding:0!important}
/* Owner fix 2026-07-24: band content must be CENTERED in every scope (page-scope resets/left
   defaults were winning in some contexts). */
.tah-page .e-con.tah-convert__panel,.tah-svcp .e-con.tah-convert__panel,.e-con.tah-convert__panel{align-items:center!important;text-align:center!important}
.tah-page .tah-convert__panel .elementor-heading-title,.tah-svcp .tah-convert__panel .elementor-heading-title{text-align:center!important}
.tah-page .tah-convert__panel .tah-lead p,.tah-svcp .tah-convert__panel .tah-lead p{text-align:center!important;margin-inline:auto}
.tah-page .tah-convert__panel .e-con.tah-convert__cta,.tah-svcp .tah-convert__panel .e-con.tah-convert__cta{justify-content:center!important;width:100%}
.tah-page .tah-convert__assure .elementor-icon-list-items,.tah-svcp .tah-convert__assure .elementor-icon-list-items{display:flex;gap:12px 22px;justify-content:center!important;flex-wrap:wrap;margin:0;padding:0}
.tah-page .tah-convert__panel .tah-kicker,.tah-svcp .tah-convert__panel .tah-kicker{justify-content:center!important;display:flex}
.tah-page .e-con.tah-convert__panel,.tah-svcp .e-con.tah-convert__panel{margin-inline:auto!important;width:100%;max-width:var(--tah-maxw)}
/* Order-proof band geometry: on native theme templates (single.php etc.) Elementor's late-loaded
   default container padding (10px) was beating these — the band's geometry is canonical design,
   make it win regardless of enqueue order or page type. */
.e-con.tah-convert{padding:26px!important}
.e-con.tah-convert__panel{padding:74px 40px!important;max-width:var(--tah-maxw);margin-inline:auto!important;width:100%}
@media(max-width:640px){.e-con.tah-convert__panel{padding:54px 22px!important}}
.e-con.tah-convert__cta{display:flex;flex-direction:row!important;gap:13px;flex-wrap:wrap;align-items:center;justify-content:center!important;width:100%;margin-top:30px!important;padding:0!important}
.tah-convert__panel .elementor-widget.tah-h2{margin-top:18px!important}
.tah-convert__panel .elementor-widget.tah-convert__text{margin-top:18px!important}
.tah-convert__panel .elementor-widget.tah-convert__assure{margin-top:26px!important}
/* Order/enqueue-proof assure-row: on theme templates Elementor's own svg-sizing CSS
   (.e-font-icon-svg{width:1em}) is not reliably present — giant SVG checks resulted.
   Size and lay out the band's icon list unconditionally. */
.tah-convert__assure .elementor-icon-list-items{display:flex!important;gap:12px 22px;justify-content:center!important;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.tah-convert__assure .elementor-icon-list-item{display:flex!important;gap:8px;align-items:center;padding:0!important;margin:0}
.tah-convert__assure .elementor-icon-list-icon{width:auto!important;flex:none;display:inline-flex;align-items:center}
.tah-convert__assure .elementor-icon-list-icon svg{width:13px!important;height:13px!important;fill:var(--tah-lime)!important}
.tah-convert__assure .elementor-icon-list-icon i{font-size:13px!important;color:var(--tah-lime)!important}
.tah-convert__assure .elementor-icon-list-text{color:#cfe6d4;font-size:13.5px}
.e-con.tah-convert__panel{border-radius:30px!important;overflow:hidden}


/* ---- faq.css ---- */
/* ============================================================================
   THE ACCOUNTS HUB — SECTION: FAQ (native Elementor, id `faqs` / class `tah-faq-sec`)
   ----------------------------------------------------------------------------
   Same DOM notes as tah.css: NO `.elementor-widget-container` wrapper for
   heading/text/button/icon-list widgets. The Toggle widget (HM-2: converted
   from Accordion for all-closed, independently-openable semantics) has its
   OWN internal markup (elementor-toggle-item / elementor-tab-title /
   elementor-toggle-title / elementor-tab-content) — style those directly,
   never `.elementor-widget-container`.
   ============================================================================ */

/* Root container — class `tah-faq-sec` (content width: Full) */
.tah-faq-sec{padding:92px 0}

/* Inner container — class `tah-faq-sec__inner` (content width: Boxed, direction: Column) */
.tah-faq-sec__inner{max-width:var(--tah-maxw);margin-inline:auto}

/* Head — container `tah-faq-sec__head` (direction Column) */
.tah-faq-sec__head{max-width:660px;gap:0;margin-bottom:6px}
.tah-faq-sec__head .tah-h2{margin-top:16px}

/* Grid — container `tah-faq-grid` (direction Row) */
.tah-faq-grid{display:flex;gap:48px;align-items:flex-start;margin-top:6px}
.tah-faq-grid > .elementor-element{min-width:0}
.tah-faq-aside{flex:0 0 34%}
.tah-faq-grid .tah-faq{flex:1 1 60%}

/* Aside card — container `tah-faq-aside` (direction Column) */
.tah-faq-aside{
  background:var(--tah-bg-mint);border-radius:20px;padding:30px;
  position:sticky;top:96px;gap:0;
}
.tah-faq-aside__title .elementor-heading-title{
  font-family:"Bricolage Grotesque",sans-serif!important;font-weight:700;font-size:22px;color:var(--tah-ink);
}
.tah-faq-aside__text p{
  font-family:"Figtree",sans-serif;color:var(--tah-muted);font-size:15px;margin-top:12px;
}
.tah-faq-aside__btn{margin-top:20px;display:inline-block}

/* --------------------------------------------------------------- TOGGLE (FAQ) */
/* Toggle widget — class `tah-faq`. Elementor Free renders its own inner markup
   for this widget: .elementor-toggle > .elementor-toggle-item /
   .elementor-tab-title (clickable header, SAME class name as accordion) /
   .elementor-toggle-title (header text) / .elementor-tab-content (answer
   panel, SAME class name as accordion) / .elementor-toggle-icon.
   HM-2: retargeted from `.elementor-accordion*` (accordion DOM) to
   `.elementor-toggle*` (toggle DOM) — all values unchanged from the
   owner-approved accordion look; only selectors changed. */
.tah-faq .elementor-toggle{display:flex;flex-direction:column;gap:12px}
.tah-faq .elementor-toggle-item{
  border:1px solid var(--tah-line);border-radius:14px;background:#fff;
  overflow:hidden;transition:border-color .3s,box-shadow .3s;
}
.tah-faq .elementor-tab-title{
  list-style:none;cursor:pointer;padding:19px 22px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;font-weight:600;font-size:16px;min-height:44px;
  outline:none;
}
.tah-faq .elementor-tab-title .elementor-toggle-title{
  font-family:"Figtree",sans-serif;font-weight:600;font-size:16px;color:var(--tah-ink);
}
.tah-faq .elementor-tab-title .elementor-toggle-icon{
  width:26px;height:26px;border-radius:50%;background:var(--tah-bg-mint);color:var(--tah-green-700);
  display:grid;place-items:center;flex:none;transition:transform .3s,background .3s,color .3s;
}
.tah-faq .elementor-tab-title.elementor-active .elementor-toggle-icon,
.tah-faq .elementor-tab-title[aria-expanded="true"] .elementor-toggle-icon{
  transform:rotate(45deg);background:var(--tah-forest);color:var(--tah-lime);
}
.tah-faq .elementor-tab-title.elementor-active,
.tah-faq .elementor-tab-title[aria-expanded="true"]{border-bottom:1px solid var(--tah-line)}
.tah-faq .elementor-toggle-item:has(.elementor-tab-title.elementor-active){
  border-color:var(--tah-line-2);box-shadow:var(--tah-shadow-sm);
}
.tah-faq .elementor-tab-content{
  padding:0 22px 20px;color:var(--tah-muted);font-family:"Figtree",sans-serif;font-size:14.5px;line-height:1.6;
}
.tah-faq .elementor-icon-plus:after,
.tah-faq .elementor-icon-minus:after{content:"+";font-size:16px;line-height:1}
.tah-faq .elementor-tab-title.elementor-active .elementor-icon-plus:after,
.tah-faq .elementor-tab-title[aria-expanded="true"] .elementor-icon-plus:after{content:"\2715"}

/* ------------------------------------------------------------------ RESPONSIVE */
@media(max-width:960px){
  .tah-faq-grid{flex-direction:column;gap:30px}
  .tah-faq-aside,.tah-faq-grid .tah-faq{flex:1 1 auto;width:100%}
  .tah-faq-aside{position:static}
}
@media(max-width:640px){
  .tah-faq-sec{padding:60px 0}
  .tah-faq .elementor-tab-title{padding:16px 18px}
  .tah-faq .elementor-tab-content{padding:0 18px 16px}
}

/* === FIX: Elementor forces flex children to `0 1 auto`, stacking the two columns. Force the split. === */
.tah-faq-aside{flex:0 0 34%!important}
.tah-faq-grid .tah-faq{flex:1 1 60%!important;min-width:0}
@media(max-width:960px){
  .tah-faq-aside,.tah-faq-grid .tah-faq{flex:1 1 auto!important;width:100%}
}

/* === FIX: Elementor toggle renders the icon on the LEFT (blue). Move it to the right + brand-colour it. === */
.tah-faq .elementor-toggle-title{order:1;flex:1 1 auto;text-align:left}
.tah-faq .elementor-toggle-icon{order:2;float:none!important;margin:0 0 0 auto!important}
.tah-faq .elementor-toggle-icon i,
.tah-faq .elementor-toggle-icon svg{color:var(--tah-green-700)!important;fill:var(--tah-green-700)!important}
.tah-faq .elementor-tab-title.elementor-active .elementor-toggle-icon i,
.tah-faq .elementor-tab-title.elementor-active .elementor-toggle-icon svg{color:var(--tah-lime)!important;fill:var(--tah-lime)!important}

@media(max-width:960px){ .tah-faq-grid{flex-direction:column!important} }
.tah-faq-aside{transition:transform .3s var(--tah-ease),box-shadow .3s var(--tah-ease)}
.tah-faq-aside:hover{transform:translateY(-4px);box-shadow:var(--tah-shadow-md)}
.tah-faq .elementor-toggle-item{transition:box-shadow .3s var(--tah-ease),border-color .3s,transform .3s var(--tah-ease)}
.tah-faq .elementor-toggle-item:hover{border-color:var(--tah-line-2);box-shadow:var(--tah-shadow-sm);transform:translateY(-2px)}

/* Orchestrator patch: default toggle glyph is a caret — hide it and draw the approved plus.
   (Elementor's own display rules need !important to beat.) */
.tah-faq .elementor-toggle-icon-closed,
.tah-faq .elementor-toggle-icon-opened{display:none!important}
.tah-faq .elementor-toggle-icon{display:grid;place-items:center}
.tah-faq .elementor-toggle-icon::after{content:"+";font-size:16px;line-height:1;font-weight:500;color:var(--tah-green-700)}
.tah-faq .elementor-tab-title.elementor-active .elementor-toggle-icon::after,
.tah-faq .elementor-tab-title[aria-expanded="true"] .elementor-toggle-icon::after{content:"–"}


/* ---- hero-card.css ---- */
/* ==== HERO CARD (bespoke "What we keep on track" — rendered via one HTML widget) ==== */
.tah-dash{position:relative}
.tah-dash .dash-card{background:#fff;border:1px solid var(--tah-line);border-radius:18px;box-shadow:var(--tah-shadow-lg);overflow:hidden}
.tah-dash .dash-top{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--tah-line);background:linear-gradient(180deg,#fbfdfa,#fff)}
.tah-dash .dash-top .dt-l{display:flex;align-items:center;gap:11px}
.tah-dash .dash-top .doc{width:30px;height:30px;border-radius:8px;background:var(--tah-bg-mint);display:grid;place-items:center;color:var(--tah-green-700)}
.tah-dash .dash-top b{font-family:"Bricolage Grotesque";font-size:15px;display:block;color:var(--tah-ink)}
.tah-dash .dash-top small{font-size:11px;color:var(--tah-muted-2)}
.tah-dash .dash-top .stamp{font-family:"IBM Plex Mono";font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--tah-green-700);border:1.5px solid var(--tah-line-2);border-radius:6px;padding:4px 8px;transform:rotate(2deg)}
.tah-dash .dash-body{padding:20px 22px 22px}
.tah-dash .rep-h{font-family:"IBM Plex Mono";font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--tah-muted-2);margin-bottom:12px}
.tah-dash .tasks{display:flex;flex-direction:column;gap:9px}
.tah-dash .task{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid var(--tah-line);border-radius:12px;background:#fdfefc;gap:10px}
.tah-dash .task .tl{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:500;color:var(--tah-ink)}
.tah-dash .task .ck{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;flex:none}
.tah-dash .task .ck.done{background:var(--tah-bg-mint);color:var(--tah-green-700)}
.tah-dash .task .st{font-family:"IBM Plex Mono";font-size:11px;color:var(--tah-muted-2);white-space:nowrap}
.tah-dash .task .st.g{color:var(--tah-green-700)}
.tah-dash .keepfoot{margin-top:15px;padding-top:14px;border-top:1px solid var(--tah-line);font-size:13px;color:var(--tah-green-700);font-weight:600;display:flex;align-items:center;gap:9px}
.tah-dash .keepfoot svg{flex:none}
.tah-dash .dash-cap{text-align:center;font-size:12px;color:var(--tah-muted-2);margin-top:12px;font-style:italic}
.tah-dash .float-badge{position:absolute;left:-24px;bottom:44px;background:#fff;border:1px solid var(--tah-line);border-radius:14px;padding:10px 15px 10px 10px;box-shadow:var(--tah-shadow-md);display:flex;align-items:center;gap:11px}
.tah-dash .float-badge img{width:44px;height:44px;border-radius:9px;object-fit:cover}
.tah-dash .float-badge .fb-t{font-family:"Bricolage Grotesque";font-weight:700;font-size:13px;line-height:1.15;color:var(--tah-ink)}
.tah-dash .float-badge .fb-s{font-size:11px;color:var(--tah-muted)}
@media(max-width:520px){.tah-dash .float-badge{display:none}}

/* === FIX: badge hung below the card so it doesn't cover the foot text === */
.tah-dash .float-badge{left:-18px;bottom:-26px}

/* Hover: card lift (badge text stays always-visible, matches mock — no collapse-to-icon) */
.tah-dash .dash-card{transition:transform .34s var(--tah-ease),box-shadow .34s var(--tah-ease)}
.tah-dash:hover .dash-card{transform:translateY(-6px);box-shadow:0 50px 90px -36px rgba(9,39,24,.55)}
.tah-dash .float-badge{transition:transform .3s var(--tah-ease),box-shadow .3s var(--tah-ease)}
.tah-dash .float-badge:hover{transform:translateY(-3px);box-shadow:var(--tah-shadow-md)}
/* HM-3 fix: text chip must never clip — always full width/visible, per mock (no hover-gated collapse) */
.tah-dash .float-badge > div{min-width:max-content;max-width:none;opacity:1;overflow:visible;white-space:nowrap}


/* ---- how.css ---- */
/* ============================================================================
   THE ACCOUNTS HUB — SECTION: HOW IT WORKS (native Elementor, class `tah-how`)
   ----------------------------------------------------------------------------
   Same DOM notes as tah.css: NO `.elementor-widget-container` wrapper.
   Widget content sits directly inside `.elementor-element`, so selectors
   target the widget's `tah-*` class + inner tag.
   ============================================================================ */

/* Root container — class `tah-how` (content width: Full) */
.tah-how{
  padding:92px 0;
  background:var(--tah-forest);
  color:#e7f4ea;
  position:relative;
  overflow:hidden;
}
.tah-how::before{
  content:"";position:absolute;bottom:-120px;left:-80px;width:420px;height:420px;
  background:radial-gradient(circle,rgba(166,225,90,.12),transparent 65%);
  pointer-events:none;
}

/* Inner container — class `tah-how__inner` (content width: Boxed, direction: Column) */
.tah-how__inner{max-width:var(--tah-maxw);margin-inline:auto;position:relative;gap:0}

/* Head — container `tah-how__head` (direction Column) */
.tah-how__head{max-width:660px;gap:0}
.tah-how__head .tah-h2 .elementor-heading-title{color:#fff}
.tah-how__head .tah-kicker{margin-bottom:0}
.tah-how__head .tah-h2{margin-top:16px}
.tah-how__intro p{color:#a9cbb0!important;font-size:17.5px;max-width:none;margin-top:16px}

/* Steps row — container `tah-how__steps` (direction Row) */
.tah-how__steps{display:flex;gap:24px;flex-wrap:wrap;margin-top:48px;position:relative}

/* Step card — container `tah-step` (direction Column) */
.tah-step{
  flex:1 1 300px;min-width:0;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:18px;padding:28px;position:relative;gap:0;
}
.tah-step__num{
  font-family:"IBM Plex Mono",monospace!important;font-size:13px;color:var(--tah-lime);
  letter-spacing:.1em;
}
.tah-step__num p{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--tah-lime);letter-spacing:.1em;margin:0}
.tah-step__title .elementor-heading-title{
  font-family:"Bricolage Grotesque",sans-serif!important;font-weight:700;
  font-size:20px;margin:14px 0 11px;color:#fff;
}
.tah-step__text p{font-family:"Figtree",sans-serif;font-size:14.5px;color:#a9cbb0;margin:0}

/* Progress bar — container `tah-step__bar` (empty; fill painted via ::after) */
.tah-step__bar{
  position:relative;margin-top:18px;height:3px;border-radius:3px;
  background:rgba(255,255,255,.1);overflow:hidden;
}
.tah-step__bar::after{
  content:"";position:absolute;inset:0 auto 0 0;height:100%;width:33%;
  background:linear-gradient(90deg,var(--tah-lime),var(--tah-green));
}
.tah-step:nth-child(2) .tah-step__bar::after{width:66%}
.tah-step:nth-child(3) .tah-step__bar::after{width:100%}

/* Privacy note bar — icon-list widget `tah-how-note` (single item) */
.tah-how-note{margin-top:32px;position:relative}
.tah-how-note .elementor-icon-list-items{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:16px 20px;margin:0;
}
.tah-how-note .elementor-icon-list-item{margin-bottom:0;align-items:center}
.tah-how-note .elementor-icon-list-icon i,
.tah-how-note .elementor-icon-list-icon svg{color:var(--tah-lime);fill:var(--tah-lime)}
.tah-how-note .elementor-icon-list-text{
  font-family:"Figtree",sans-serif;font-size:14.5px;color:#cfe6d4;
}

/* ------------------------------------------------------------------ RESPONSIVE */
@media(max-width:960px){
  .tah-how__steps{flex-direction:column}
  .tah-step{flex:1 1 auto;width:100%}
}
@media(max-width:640px){
  .tah-how{padding:60px 0;overflow-x:clip}
  .tah-how__intro p{font-size:16px}
  .tah-how-note .elementor-icon-list-items{padding:14px 16px}
}

/* === FIX: H2 on dark should be white, not lime (override tah-on-dark !important) === */
.tah-how__head .tah-h2 .elementor-heading-title{color:#fff!important}

/* === FIX: Elementor forces child-container flex to `0 1 auto` (overriding ours),
   so the 3 steps sized to full-width content and stacked. Force equal columns. === */
.tah-how__steps{flex-wrap:nowrap}
.tah-step{flex:1 1 0!important;min-width:0}
@media(max-width:960px){
  .tah-how__steps{flex-direction:column;flex-wrap:wrap}
  .tah-step{flex:1 1 auto!important;width:100%}
}

@media(max-width:960px){ .tah-how__steps{flex-direction:column!important} }
.tah-step{transition:transform .32s var(--tah-ease),background .32s var(--tah-ease),border-color .32s}
.tah-step:hover{transform:translateY(-5px);background:rgba(255,255,255,.08);border-color:rgba(166,225,90,.25)}


/* ---- hub.css ---- */
/* ========================================================== SECTION: HUB === */
/* Root container — class `tah-hub` (content width: Full) */
.tah-hub{background:#fff;overflow:hidden;padding:92px 0}
/* Inner container — class `tah-hub__inner` (content width: Boxed, direction: Column) */
.tah-hub__inner{max-width:var(--tah-maxw);margin-inline:auto;padding:0 26px;gap:0}

/* Head — container `tah-hub__head` (direction Column) */
.tah-hub__head{max-width:660px;gap:0}
.tah-hub__head > .elementor-element{margin-bottom:0}
.tah-hub__head .tah-h2{margin-top:16px}
.tah-hub__head .tah-hub-intro{margin-top:16px}
.tah-hub-intro p{font-family:"Figtree",sans-serif;font-size:17.5px;line-height:1.6;color:var(--tah-muted);margin:0}
.tah-hub-intro strong{color:var(--tah-ink);font-weight:600}

/* Grid — container `tah-hub__grid` (direction Row) */
.tah-hub__grid{display:flex;gap:42px;align-items:stretch;margin-top:46px}
.tah-hub__grid > .elementor-element{flex:1 1 0;min-width:0}

/* Before card — container `tah-before` (direction Column) */
.tah-before{
  background:var(--tah-bg-warm);border:1px dashed var(--tah-line-2);border-radius:22px;
  padding:32px;gap:0;
}
.tah-before > .elementor-element{margin-bottom:0}
.tah-before .tah-list-x{margin-top:20px}
.tah-before__lbl p{
  font-family:"IBM Plex Mono",monospace!important;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tah-muted-2);display:inline-flex;align-items:center;gap:8px;margin:0;
}
.tah-before__lbl p::before{content:"";width:9px;height:9px;border-radius:50%;background:#c9b34a;flex:none}
.tah-list-x .elementor-icon-list-item{margin-bottom:14px;align-items:flex-start}
.tah-list-x .elementor-icon-list-text{color:var(--tah-muted);font-size:15px}

/* After card — container `tah-after` (direction Column, dark forest) */
.tah-after{
  position:relative;background:var(--tah-forest);color:#e7f4ea;border-radius:22px;
  padding:32px;gap:0;overflow:hidden;box-shadow:var(--tah-shadow-md);
}
.tah-after > .elementor-element{margin-bottom:0;position:relative;z-index:2}
.tah-after .tah-list-check{margin-top:20px}
.tah-after .tah-after__cta{margin-top:26px}
.tah-after__lbl p{
  font-family:"IBM Plex Mono",monospace!important;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;margin:0!important;color:var(--tah-lime)!important;
}
.tah-after__lbl p::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--tah-lime);box-shadow:0 0 8px var(--tah-lime);flex:none}
.tah-list-check--dark .elementor-icon-list-item{margin-bottom:14px;align-items:flex-start}
.tah-list-check--dark .elementor-icon-list-text{color:#e7f4ea;font-size:15px}
.tah-list-check--dark .elementor-icon-list-icon i,
.tah-list-check--dark .elementor-icon-list-icon svg{color:var(--tah-lime);fill:var(--tah-lime)}

/* ------------------------------------------------------------------ RESPONSIVE */
@media(max-width:960px){
  .tah-hub__grid{flex-direction:column;gap:30px}
}
@media(max-width:640px){
  .tah-hub{padding:60px 0}
  .tah-before,.tah-after{padding:26px}
}

/* === FIX: Elementor's native flex_direction:row overrides the media query — force stack on mobile === */
@media(max-width:960px){ .tah-hub__grid{flex-direction:column!important;gap:30px} .tah-hub__grid > .elementor-element{flex:1 1 auto!important;width:100%} }

/* === Depth: card shadows + circular icon chips === */
.tah-before{box-shadow:var(--tah-shadow-sm)}
.tah-after{box-shadow:var(--tah-shadow-md)}
.tah-before .elementor-icon-list-icon{width:26px;height:26px;border-radius:50%;background:#f4ead2;display:grid!important;place-items:center;flex:none}
.tah-before .elementor-icon-list-icon i,.tah-before .elementor-icon-list-icon svg{color:#c08a3e!important;fill:#c08a3e!important;font-size:11px}
.tah-after .elementor-icon-list-icon{width:26px;height:26px;border-radius:50%;background:rgba(166,225,90,.16);display:grid!important;place-items:center;flex:none}
.tah-after .elementor-icon-list-icon i,.tah-after .elementor-icon-list-icon svg{color:var(--tah-lime)!important;fill:var(--tah-lime)!important;font-size:11px}

/* === Card hover === */
.tah-before,.tah-after{transition:transform .32s var(--tah-ease),box-shadow .32s var(--tah-ease)}
.tah-before:hover{transform:translateY(-5px);box-shadow:var(--tah-shadow-md)}
.tah-after:hover{transform:translateY(-5px);box-shadow:var(--tah-shadow-lg)}

/* === FIX: decorative orbit on the "after" card via ::before (pseudo-element = lazy-load-safe) === */
.tah-after{overflow:hidden}
.tah-after::before{content:"";position:absolute;right:-70px;bottom:-70px;width:240px;height:240px;opacity:.3;pointer-events:none;z-index:0;background-repeat:no-repeat;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none'%3E%3Ccircle cx='100' cy='100' r='88' stroke='%23a6e15a' stroke-width='1' stroke-dasharray='3 6'/%3E%3Ccircle cx='100' cy='100' r='58' stroke='%23a6e15a' stroke-width='1' stroke-dasharray='3 6'/%3E%3Ccircle cx='100' cy='12' r='5' fill='%23a6e15a'/%3E%3Ccircle cx='188' cy='100' r='5' fill='%23a6e15a'/%3E%3Ccircle cx='100' cy='188' r='5' fill='%23a6e15a'/%3E%3Ccircle cx='12' cy='100' r='5' fill='%23a6e15a'/%3E%3Ccircle cx='100' cy='100' r='12' fill='%23a6e15a'/%3E%3C/svg%3E")}
.tah-after > .elementor-element{position:relative;z-index:1}
.tah-after::before{display:none!important}


/* ---- moment.css ---- */
/* ======================================================= SECTION: MOMENT === */
/* Root container — class `tah-moment` (content width: Full) */
.tah-moment{
  position:relative;overflow:hidden;
  background-color:var(--tah-forest-deep);
  background-image:
    linear-gradient(rgba(166,225,90,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(166,225,90,.05) 1px,transparent 1px),
    radial-gradient(60% 90% at 80% 20%,rgba(166,225,90,.14),transparent 60%);
  background-size:34px 34px,34px 34px,100% 100%;
}
/* Inner container — class `tah-moment__inner` (content width: Boxed, direction: Column) */
.tah-moment__inner{max-width:var(--tah-maxw);margin-inline:auto;padding:88px 26px;gap:0}
.tah-moment__inner > .elementor-element{margin-bottom:0}
.tah-moment__inner .tah-moment-q{margin-top:22px}
.tah-moment__inner .tah-moment-body{margin-top:24px}

/* Quote — Heading (H2) + class `tah-moment-q` (inline span.tah-q is the lime accent) */
.tah-moment-q .elementor-heading-title{
  max-width:20ch;font-family:"Bricolage Grotesque",sans-serif!important;font-weight:600;
  font-size:clamp(30px,4.6vw,54px);line-height:1.06;letter-spacing:-.03em;color:#eaf6ec;
}
.tah-q{color:var(--tah-lime)}

/* Body — Text Editor + class `tah-moment-body` */
.tah-moment-body p{
  font-family:"Figtree",sans-serif;font-size:18px;line-height:1.6;color:#a9cbb0;max-width:54ch;margin:0;
}

/* ------------------------------------------------------------------ RESPONSIVE */
@media(max-width:640px){
  .tah-moment__inner{padding:64px 20px}
}

/* === FIX: texture via ::before — Elementor lazy-load strips container background-images below the fold === */
.tah-moment{position:relative;overflow:hidden;background-image:none!important}
.tah-moment::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(166,225,90,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(166,225,90,.05) 1px,transparent 1px),radial-gradient(60% 90% at 80% 20%,rgba(166,225,90,.16),transparent 60%);
  background-size:34px 34px,34px 34px,100% 100%}
.tah-moment__inner{position:relative;z-index:1}


/* === Right-side art: on-brand illustration + bar-chart mark (fills the empty space) === */
.tah-moment{position:relative;overflow:hidden}
.tah-moment__inner{max-width:var(--tah-maxw);margin-inline:auto;padding:88px 26px;position:relative;z-index:1}
.tah-moment-artw{position:absolute!important;inset:0;z-index:0;pointer-events:none;margin:0!important}
.tah-moment-art{position:absolute;right:4%;top:50%;transform:translateY(-50%);width:min(40vw,420px)}
.tah-moment-illus{width:100%;height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.35))}
.tah-moment-bars{position:absolute;right:-2%;bottom:-8%;width:150px;opacity:.14}
@media(max-width:900px){.tah-moment-art{display:none}}


/* ---- services.css ---- */
/* ====================================================== SECTION: SERVICES === */
/* Root container — class `tah-services` (content width: Full) */
.tah-services{
  padding:96px 0;
  background:var(--tah-bg-soft);
}
/* Inner container — class `tah-services__inner` (content width: Boxed, direction: Column) */
.tah-services__inner{max-width:var(--tah-maxw);margin-inline:auto;padding:0 26px;gap:0}
.tah-services__inner > .elementor-element{margin-bottom:0}
.tah-services__inner .tah-svc-grid{margin-top:44px}

/* Top row — container `tah-services__top` (direction Row, space-between) */
.tah-services__top{
  display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;
}
.tah-services__head{flex:1 1 auto;max-width:660px;gap:0}
.tah-services__head > .elementor-element{margin-bottom:0}
.tah-services__head .tah-h2{margin-top:16px}

/* Intro paragraph — Text Editor + class `tah-svc-intro` */
.tah-svc-intro p{
  font-family:"Figtree",sans-serif;font-size:16px;line-height:1.6;color:var(--tah-muted);
  max-width:34ch;margin:0;
}

/* -------------------------------------------------------------------- GRID === */
/* Grid container — class `tah-svc-grid` (direction Row, wrap) */
.tah-svc-grid{
  display:grid!important;grid-template-columns:repeat(3,1fr);gap:18px;
  counter-reset:svc;
}

/* Card — container `tah-svc` (direction Column) */
.tah-svc{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--tah-line);border-radius:var(--tah-radius);
  padding:28px;gap:0;
  transition:transform .36s var(--tah-ease),box-shadow .36s var(--tah-ease),border-color .36s var(--tah-ease);
}
.tah-svc > .elementor-element{margin-bottom:0}
.tah-svc::before{
  content:"";position:absolute;left:0;top:0;height:100%;width:4px;
  background:linear-gradient(180deg,var(--tah-lime),var(--tah-green));
  transform:scaleX(0);transform-origin:top;transition:transform .36s var(--tah-ease);
}
.tah-svc:not(.tah-svc--cta)::after{
  counter-increment:svc;content:counter(svc,decimal-leading-zero);
  position:absolute;right:20px;top:18px;
  font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--tah-line-2);
}
.tah-svc:hover{transform:translateY(-6px);box-shadow:var(--tah-shadow-md);border-color:transparent}
.tah-svc:hover::before{transform:scaleX(1)}

/* Icon box — icon-box widget + class `tah-svc__icon` */
.tah-svc__icon .elementor-icon-box-icon{
  width:50px;height:50px;border-radius:13px;background:var(--tah-bg-mint);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  transition:background .36s var(--tah-ease),color .36s var(--tah-ease);
}
.tah-svc__icon .elementor-icon-box-icon i{font-size:20px;color:var(--tah-green-700);transition:color .36s var(--tah-ease)}
.tah-svc:hover .tah-svc__icon .elementor-icon-box-icon{background:var(--tah-forest)}
.tah-svc:hover .tah-svc__icon .elementor-icon-box-icon i{color:var(--tah-lime)}
.tah-svc__icon .elementor-icon-box-content{padding:0}
.tah-svc__icon .elementor-icon-box-title{
  margin:0;font-family:"Bricolage Grotesque",sans-serif!important;font-weight:700;
  font-size:20px;line-height:1.2;color:var(--tah-ink);
}
.tah-svc__icon .elementor-icon-box-title a{color:inherit;text-decoration:none}
.tah-svc__icon .elementor-icon-box-description{
  margin:10px 0 0;font-family:"Figtree",sans-serif;font-size:14px;line-height:1.55;color:var(--tah-muted);
}

/* Tag chips — Text Editor + class `tah-svc__tags` (spans styled by `tah-tag`) */
.tah-svc__tags{margin-top:14px}
.tah-svc__tags p{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.tah-tag{
  display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  color:var(--tah-green-700);background:var(--tah-bg-mint);padding:4px 9px;border-radius:20px;
}

/* ---------------------------------------------------------------- CTA CARD === */
/* 7th card — container classes `tah-svc tah-svc--cta` (dark, direction Column, justify center) */
.tah-svc--cta{
  background:var(--tah-forest);border-color:transparent;color:#e7f4ea;
  display:flex;flex-direction:column;justify-content:center;
}
.tah-svc--cta::before{display:none}
.tah-svc--cta:hover{transform:translateY(-6px);box-shadow:var(--tah-shadow-md)}

.tah-svc__cta-title .elementor-heading-title{
  margin:0;font-family:"Bricolage Grotesque",sans-serif!important;font-weight:700;
  font-size:20px;line-height:1.25;color:#fff;
}
.tah-svc__cta-text p{
  margin:10px 0 0;font-family:"Figtree",sans-serif;font-size:14px;line-height:1.55;color:#a9cbb0;
}
.tah-svc--cta .tah-btn{margin-top:22px;align-self:flex-start}

/* ------------------------------------------------------------------ RESPONSIVE */
@media(max-width:960px){
  .tah-svc-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .tah-services{padding:64px 0}
  .tah-svc-grid{grid-template-columns:1fr}
  .tah-services__top{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .tah-svc,.tah-svc::before{transition:none}
}

/* === FIX: Elementor renders FA icons as <svg> (not <i>); left-align card (icon-box defaults to centered) === */
.tah-svc__icon .elementor-icon-box-wrapper{text-align:left}
.tah-svc__icon .elementor-icon-box-icon{margin:0 0 20px 0!important}
.tah-svc__icon .elementor-icon{background:transparent;width:auto;height:auto}
.tah-svc__icon .elementor-icon svg{width:24px;height:24px;fill:var(--tah-green-700)!important;color:var(--tah-green-700)!important}
.tah-svc:hover .tah-svc__icon .elementor-icon svg{fill:var(--tah-lime)!important;color:var(--tah-lime)!important}
.tah-svc__icon .elementor-icon-box-title,
.tah-svc__icon .elementor-icon-box-description{text-align:left}


/* ---- trust.css ---- */
/* ============================================================ SECTION: TRUST === */
/* Root container — class `tah-trust` (content width: Full) */
.tah-trust{
  padding:74px 0;
  background:var(--tah-bg-warm);
  border-top:1px solid var(--tah-line);
  border-bottom:1px solid var(--tah-line);
}
/* Inner container — class `tah-trust__inner` (content width: Boxed, direction: Row) */
.tah-trust__inner{
  max-width:var(--tah-maxw);margin-inline:auto;gap:46px;align-items:center;
}

/* Person column — container `tah-person` (direction Column) */
.tah-person{flex:1 1 58%;min-width:0;display:flex;flex-direction:column;gap:0}
.tah-person .tah-kicker{margin-bottom:12px}
.tah-person .tah-h2 .elementor-heading-title{font-size:clamp(23px,2.6vw,30px)}
.tah-person__name p{margin-top:6px!important}
.tah-person__desc p{margin-top:14px!important;max-width:46ch}
.tah-person__how{margin-top:16px}
.tah-person__how.tah-list-check .elementor-icon-list-item{margin-bottom:9px;font-size:14px}
.tah-person__how.tah-list-check .elementor-icon-list-text{font-size:14px}

/* Badge column — container `tah-badge-col` (direction Column) */
.tah-badge-col{flex:1 1 42%;min-width:0;display:flex;flex-direction:column;gap:14px}

/* Badge card — container `tah-badge-mini` (direction Row) */
.tah-badge-mini{
  display:flex;align-items:flex-start;gap:14px;background:#fff;
  border:1px solid var(--tah-line);border-radius:14px;padding:16px;
  box-shadow:var(--tah-shadow-sm);
}
.tah-badge-mini__img img{
  width:62px;height:62px;object-fit:contain;flex:none;
  filter:drop-shadow(0 6px 12px rgba(9,39,24,.14));
}
.tah-badge-mini__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:0}
.tah-badge-mini__title .elementor-heading-title{
  font-family:"Bricolage Grotesque",sans-serif!important;font-weight:700;
  font-size:15px;line-height:1.2;color:var(--tah-ink);
}
.tah-badge-mini__sub p{font-size:12.5px;color:var(--tah-muted);margin-top:2px!important}

/* "View certificate" links — text-editor `tah-verify` */
.tah-verify p{margin:8px 0 0!important;display:flex;gap:16px;flex-wrap:wrap}
.tah-verify a{
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--tah-green-700);
  border-bottom:1px solid var(--tah-line-2);padding-bottom:1px;
  transition:color .2s,border-color .2s;
}
.tah-verify a:hover{color:var(--tah-forest);border-color:var(--tah-green)}

/* ------------------------------------------------------------------ RESPONSIVE */
@media(max-width:960px){
  .tah-trust__inner{flex-direction:column;gap:30px}
  .tah-person,.tah-badge-col{flex:1 1 auto;width:100%;max-width:min(560px,100%)}
}
@media(max-width:640px){
  .tah-trust{padding:54px 0}
}
@media(max-width:520px){
  .tah-badge-mini{flex-direction:column}
}

/* === Commitment "green box" — styled dark-forest card (matches the mockup) === */
.tah-person__how{margin-top:20px!important;background:var(--tah-forest);border-radius:14px;padding:14px 20px}
.tah-person__how.tah-list-check .elementor-icon-list-item{margin-bottom:12px;align-items:flex-start}
.tah-person__how.tah-list-check .elementor-icon-list-icon i,
.tah-person__how.tah-list-check .elementor-icon-list-icon svg{color:var(--tah-lime)!important;fill:var(--tah-lime)!important}
.tah-person__how.tah-list-check .elementor-icon-list-text{color:#dcecd6!important;font-size:14px}

/* === Card hover === */
.tah-badge-mini{transition:transform .32s var(--tah-ease),box-shadow .32s var(--tah-ease)}
.tah-badge-mini:hover{transform:translateY(-5px);box-shadow:var(--tah-shadow-md)}
.tah-person__how{transition:transform .3s var(--tah-ease),box-shadow .3s var(--tah-ease)}
.tah-person__how:hover{transform:translateY(-4px);box-shadow:0 26px 50px -24px rgba(9,39,24,.5)}


/* ---- who.css ---- */
/* ========================================================== SECTION: WHO IT'S FOR === */
/* Root container — class `tah-who` (content width: Full) */
.tah-who{
  padding:92px 0;
  background:var(--tah-bg-soft);
}
/* Inner container — class `tah-who__inner` (content width: Boxed, direction: Column) */
.tah-who__inner{max-width:var(--tah-maxw);margin-inline:auto}

/* Band — container `tah-who-band` (direction Row) */
.tah-who-band{
  background:#fff;border:1px solid var(--tah-line);border-radius:22px;
  padding:34px;gap:36px;align-items:center;
}

/* Primary statement — container `tah-who-primary` (direction Column) */
.tah-who-primary{flex:1 1 42%;min-width:0;display:flex;flex-direction:column;gap:0}
.tah-who-primary .tah-kicker{margin-bottom:12px}
.tah-who-primary__h .elementor-heading-title{
  font-family:"Bricolage Grotesque",sans-serif!important;font-weight:700;
  font-size:22px;line-height:1.15;color:var(--tah-ink);
}
.tah-who-primary__p p{margin-top:12px!important;max-width:38ch;font-size:15px}

/* Segment list — icon-list `tah-who-list` (reuses tah-list-check ticks) */
.tah-who-list{flex:1 1 58%;min-width:0}
.tah-who-list.tah-list-check .elementor-icon-list-items{display:flex;flex-direction:column;gap:0}
.tah-who-list.tah-list-check .elementor-icon-list-item{
  padding:13px 0;margin-bottom:0!important;border-bottom:1px solid var(--tah-line);
  align-items:center;
}
.tah-who-list.tah-list-check .elementor-icon-list-item:last-child{border-bottom:none}
.tah-who-list.tah-list-check .elementor-icon-list-text{font-size:15px;font-weight:600;color:var(--tah-ink)}

/* ------------------------------------------------------------------ RESPONSIVE */
@media(max-width:960px){
  .tah-who{padding:60px 0}
}
@media(max-width:820px){
  .tah-who-band{flex-direction:column;gap:26px;padding:26px}
}
@media(max-width:640px){
  .tah-who{padding:48px 0}
  .tah-who-band{padding:22px;border-radius:16px}
}

/* === Enhanced "who" list (icon chip + label + meta pill) + band depth === */
.tah-who-band{box-shadow:var(--tah-shadow-md);position:relative;overflow:hidden}
.tah-who-band::after{content:"";position:absolute;top:-70px;right:-50px;width:260px;height:260px;background:radial-gradient(circle,rgba(166,225,90,.14),transparent 65%);pointer-events:none}
.tah-who-list2{flex:1 1 56%!important;min-width:0;position:relative;z-index:1}
.tah-who-list2 .who-row{display:flex;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid var(--tah-line)}
.tah-who-list2 .who-row:last-child{border-bottom:none}
.tah-who-list2 .who-ck{width:32px;height:32px;border-radius:9px;background:var(--tah-bg-mint);color:var(--tah-green-700);display:grid;place-items:center;flex:none}
.tah-who-list2 .who-lbl{flex:1;font-weight:600;font-size:15px;color:var(--tah-ink);font-family:"Figtree",sans-serif}
.tah-who-list2 .who-meta{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--tah-green-700);background:var(--tah-bg-mint);padding:4px 10px;border-radius:20px;white-space:nowrap}
@media(max-width:520px){.tah-who-list2 .who-row{flex-wrap:wrap}.tah-who-list2 .who-lbl{flex:1 1 100%;order:2}.tah-who-list2 .who-meta{order:3;margin-left:46px}}

/* === Declutter + hover: cleaner rows, hover highlight (was too busy with chips+pills+dividers) === */
.tah-who-list2{display:flex;flex-direction:column;gap:4px}
.tah-who-list2 .who-row{border-bottom:none!important;padding:13px 14px;border-radius:12px;transition:background .25s var(--tah-ease),transform .25s var(--tah-ease)}
.tah-who-list2 .who-row:hover{background:var(--tah-bg-mint);transform:translateX(4px)}
.tah-who-list2 .who-ck{width:26px;height:26px;border-radius:50%;background:rgba(47,158,68,.12)}
.tah-who-list2 .who-meta{background:transparent!important;color:var(--tah-muted-2)!important;padding:0!important;border-radius:0!important}

/* === FIX: Elementor reset the primary column to flex:0 1 auto (heading on 1 line = too wide, squeezing the list so labels wrap). Force the split like the mockup. === */
.tah-who-primary{flex:1 1 40%!important;min-width:0}
.tah-who-list2{flex:1 1 58%!important}
.tah-who-list2 .who-lbl{flex:1 1 auto!important}

/* ---- native icon-list DOM mapping for who-list2 (2026-07-23) ---- */
.tah-who-list2 .elementor-icon-list-items{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;width:100%}
.tah-who-list2 .elementor-icon-list-item{display:flex;align-items:center;gap:14px;padding:13px 14px!important;margin:0;border-radius:12px;transition:background .25s var(--tah-ease),transform .25s var(--tah-ease)}
.tah-who-list2 .elementor-icon-list-item:hover{background:var(--tah-bg-mint);transform:translateX(4px)}
.tah-who-list2 .elementor-icon-list-icon{width:26px;height:26px;border-radius:50%;background:rgba(47,158,68,.12);display:grid;place-items:center;flex:none;margin:0}
.tah-who-list2 .elementor-icon-list-icon i{color:var(--tah-green-700);font-size:13px}
.tah-who-list2 .elementor-icon-list-text{flex:1;display:flex;align-items:center;gap:14px;justify-content:space-between;color:inherit}
@media(max-width:520px){.tah-who-list2 .elementor-icon-list-text{flex-wrap:wrap}.tah-who-list2 .who-lbl{flex:1 1 100%}}


/* ---- services-page.css ---- */
/* ============================================================================
   THE ACCOUNTS HUB — PAGE: SERVICES (U6 clean rewrite — native Elementor
   containers + native widgets only, zero HTML widgets).
   Source of truth: prototype/pages/services.html inline <style> (lines 13-113)
   + prototype/assets/site.css `.convert` component (lines 274-283, reused
   verbatim per mockup's own comment "final CTA reuse of .convert, no change
   needed"). Everything below is scoped under `.tah-svcp` so it cannot collide
   with Astra / Elementor / the homepage tah.css / other pages.
   ============================================================================ */

/* ---- token aliases (identical literal values to prototype/assets/site.css :root) ---- */
.tah-svcp{
  --ink:#0c1c13;--forest:#0e3d24;--forest-deep:#092718;--green:#2f9e44;--green-600:#1f8a37;--green-700:#177a2f;
  --lime:#a6e15a;--lime-bright:#c2f06f;--lime-soft:#e6f7c9;
  --bg:#fff;--bg-soft:#f2f7ee;--bg-warm:#faf8f1;--bg-mint:#e7f2e1;
  --line:#e1ebdb;--line-2:#d3e2ca;--muted:#556a5c;--muted-2:#7f9184;
  --radius:20px;--maxw:1180px;--ease:cubic-bezier(.22,.61,.36,1);
  --shadow-sm:0 1px 2px rgba(14,61,36,.05),0 8px 24px -12px rgba(14,61,36,.14);
  --shadow-md:0 30px 60px -28px rgba(14,61,36,.35);
  --shadow-lime:0 18px 40px -16px rgba(120,190,50,.55);
  font-family:"Figtree",system-ui,sans-serif;color:var(--ink);line-height:1.6;letter-spacing:-.006em;
}
.tah-svcp,.tah-svcp *{box-sizing:border-box}

/* ---- Elementor container chrome reset: no default padding/gap; `.wrap` centers content ---- */
.tah-svcp{padding:0;gap:0}
/* S-P7 root cause: this page's root uses .tah-svcp (not the shared .tah-page
   class other pages use), so the shared `.tah-page .e-con{--gap:0px}` reset in
   pages-native.css (DO-NOT-TOUCH, line 16) never reaches these containers.
   Elementor's un-zeroed default container gap was stacking on top of every
   margin-top below (mock lines 61-101), making the whole page's rhythm loosen
   uniformly — restore the zero here, scoped to this page only. */
.tah-svcp .e-con{padding:0;gap:0}
.tah-svcp .elementor-widget{margin:0}
.tah-svcp h1,.tah-svcp h2,.tah-svcp h3,.tah-svcp h4{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:600;line-height:1.03;letter-spacing:-.028em;color:var(--ink)}
.tah-svcp p{margin:0}
.tah-svcp a{color:inherit;text-decoration:none}
.tah-svcp ul{list-style:none;margin:0;padding:0}
.tah-svcp .wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px;position:relative}
/* guard: never let a stray boxed container break flex targeting (P-E7) */
.tah-svcp .e-con-boxed > .e-con-inner{display:contents}

/* ============================================================================
   MOCKUP PORT — services.html inline <style>, lines 13-113
   ============================================================================ */

/* ---- secondary sticky jump-nav (mock lines 16-24) ---- */
.tah-svcp .jumpnav{position:sticky;top:72px;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line);padding:14px 0}
.tah-svcp .jumpnav .wrap{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.tah-svcp .jn-lbl p{font-family:"IBM Plex Mono";font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);margin-right:4px}
.tah-svcp .jn-link .elementor-button{font-size:13.5px;font-weight:600;color:var(--muted);background:var(--bg-soft);border:1px solid var(--line);
  border-radius:20px;padding:8px 14px;min-height:0;transition:background .25s,color .25s,border-color .25s}
.tah-svcp .jn-link .elementor-button:hover{background:var(--forest);color:#eafff0;border-color:var(--forest)}
@media(max-width:780px){
  .tah-svcp .jumpnav{top:0}
  .tah-svcp .jumpnav .wrap{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
  .tah-svcp .jn-link{flex:none}
  .tah-svcp .jn-link .elementor-button{white-space:nowrap}
}

/* ---- page hero, compact (mock lines 26-35) ---- */
.tah-svcp .svc-hero{position:relative;padding:60px 0 44px;overflow:hidden;background:
  radial-gradient(58% 60% at 88% 0%,rgba(166,225,90,.22),transparent 60%),
  linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%)}
.tah-svcp .svc-hero .wrap{max-width:820px}
.tah-svcp .svc-hero h1.elementor-heading-title{font-size:clamp(34px,4.6vw,52px);font-weight:700;letter-spacing:-.03em;margin-top:16px}
.tah-svcp .svc-hero-lead p{font-size:17.5px;color:var(--muted);max-width:62ch;margin-top:18px}
.tah-svcp .svc-hero .hero-cta{display:flex;gap:13px;margin-top:26px;flex-wrap:wrap}
.tah-svcp .svc-hero .hint{margin-top:20px;font-size:13.5px;color:var(--muted-2)}
.tah-svcp .svc-hero .hint .elementor-icon-list-items{display:flex;align-items:center;gap:10px;margin:0;padding:0}
.tah-svcp .svc-hero .hint .elementor-icon-list-item{padding:0!important;margin:0}
.tah-svcp .svc-hero .hint .elementor-icon-list-icon i{color:var(--green-700);font-size:14px}
.tah-svcp .svc-hero .hint .elementor-icon-list-text{font-size:13.5px;color:var(--muted-2)}

/* ---- service detail blocks (mock lines 37-56) ---- */
.tah-svcp .svc-block{padding:80px 0;border-bottom:1px solid var(--line)}
.tah-svcp .svc-block.bg-white{background:#fff}
.tah-svcp .svc-block.bg-soft{background:var(--bg-soft)}
.tah-svcp .svc-block.bg-mint{background:var(--bg-mint)}
.tah-svcp .svc-block.bg-dark{background:var(--forest);color:#e7f4ea;border-bottom-color:transparent}
.tah-svcp .svc-block.bg-dark .tah-kicker .elementor-heading-title{color:var(--lime)}
.tah-svcp .svc-block.bg-dark .tah-kicker::before{box-shadow:0 0 0 4px rgba(166,225,90,.14)}
.tah-svcp .svc-block.bg-dark h2.elementor-heading-title{color:#fff}
.tah-svcp .svc-block.bg-dark .svc-intro p{color:#bfe0c6}
.tah-svcp .svc-block.bg-dark .svc-col h3.elementor-heading-title{color:#fff}
.tah-svcp .svc-block.bg-dark .svc-list .elementor-icon-list-text{color:#cfe6d4}
.tah-svcp .svc-block.bg-dark .svc-list .elementor-icon-list-icon i{color:var(--lime)}
.tah-svcp .svc-block.bg-dark .meta-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.tah-svcp .svc-block.bg-dark .meta-card h4.elementor-heading-title{color:#fff}
.tah-svcp .svc-block.bg-dark .meta-list .elementor-icon-list-text{color:#cfe6d4}
.tah-svcp .svc-block.bg-dark .svc-tag{background:rgba(255,255,255,.1);color:var(--lime)}
.tah-svcp .svc-block.bg-dark .svc-limits{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#cfe6d4}
.tah-svcp .svc-block.bg-dark .svc-limits b{color:#fff}
.tah-svcp .svc-block.bg-dark .svc-audit{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}

/* ---- eyebrow row / head typography (mock lines 58-67) ---- */
.tah-svcp .svc-eyebrow{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.tah-svcp .num p{font-family:"IBM Plex Mono";font-size:13px;color:var(--muted-2)}
.tah-svcp .svc-block.bg-dark .num p{color:#8fbf98}
.tah-svcp .svc-head h2.elementor-heading-title{font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.03em;margin-top:14px}
.tah-svcp .svc-dek p{font-family:"Bricolage Grotesque";font-weight:600;font-size:17px;color:var(--green-700);margin-top:10px}
.tah-svcp .svc-block.bg-dark .svc-dek p{color:var(--lime)}
.tah-svcp .svc-intro p{color:var(--muted);font-size:16.5px;margin-top:14px;max-width:74ch}
.tah-svcp .svc-chips p{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.tah-svcp .svc-tag{font-family:"IBM Plex Mono";font-size:11px;color:var(--green-700);background:#fff;border:1px solid var(--line-2);padding:5px 11px;border-radius:20px;display:inline-block}
.tah-svcp .svc-block.bg-soft .svc-tag,.tah-svcp .svc-block.bg-mint .svc-tag{background:#fff}

/* ---- who/include two-column grid (mock lines 69-75) ---- */
.tah-svcp .svc-cols{margin-top:40px;display:grid!important;grid-template-columns:.85fr 1.15fr;gap:36px}
.tah-svcp .svc-col h3.elementor-heading-title{font-size:15px;font-family:"IBM Plex Mono";text-transform:uppercase;letter-spacing:.1em;color:var(--ink);font-weight:600}
.tah-svcp .svc-list .elementor-icon-list-items{display:flex;flex-direction:column;gap:12px;margin-top:16px;padding:0}
.tah-svcp .svc-list .elementor-icon-list-item{display:flex;gap:10px;align-items:flex-start;padding:0!important;margin:0;line-height:1.5}
.tah-svcp .svc-list .elementor-icon-list-icon{flex:none;margin-top:3px;width:auto}
.tah-svcp .svc-list .elementor-icon-list-icon i{color:var(--green-700);font-size:13px}
.tah-svcp .svc-list .elementor-icon-list-text{font-size:15px;color:var(--muted)}
.tah-svcp .svc-col.include .svc-list .elementor-icon-list-items{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
@media(max-width:640px){.tah-svcp .svc-col.include .svc-list .elementor-icon-list-items{grid-template-columns:1fr}}

/* ---- "what you may need" / "expected outcomes" cards (mock lines 77-83) ---- */
.tah-svcp .svc-meta{margin-top:34px;display:grid!important;grid-template-columns:1fr 1fr;gap:18px}
.tah-svcp .meta-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px}
.tah-svcp .svc-block.bg-white .meta-card,.tah-svcp .svc-block.bg-mint .meta-card{background:var(--bg-soft)}
.tah-svcp .meta-card h4.elementor-heading-title{font-family:"Bricolage Grotesque";font-size:16px;font-weight:700}
.tah-svcp .meta-list .elementor-icon-list-items{display:flex;flex-direction:column;gap:9px;margin-top:12px;padding:0}
.tah-svcp .meta-list .elementor-icon-list-item{display:flex;gap:9px;align-items:flex-start;padding:0!important;margin:0}
.tah-svcp .meta-list .elementor-icon-list-icon{flex:none;margin-top:3px;width:auto}
.tah-svcp .meta-list .elementor-icon-list-icon i{color:var(--green-700);font-size:11px}
.tah-svcp .meta-list .elementor-icon-list-text{font-size:14px;color:var(--muted)}

/* ---- limitations notice (mock lines 85-88) ---- */
.tah-svcp .svc-limits{margin-top:24px;display:flex;gap:12px;align-items:flex-start;background:var(--bg-warm);
  border:1px dashed var(--line-2);border-radius:14px;padding:16px 20px;font-size:13.5px;color:var(--muted)}
.tah-svcp .svc-limits::before{content:"\26A0";flex:none;margin-top:2px;color:#b9791b;font-size:15px;line-height:1.4}
.tah-svcp .svc-limits b{color:var(--ink)}

/* ---- cta row (mock line 90) ---- */
.tah-svcp .svc-cta{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ---- nested audit subsection inside bookkeeping (mock lines 92-101) ---- */
.tah-svcp .svc-audit{margin-top:46px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px 36px}
.tah-svcp .svc-audit .au-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* S-P2: mock's `.ai` icon chip (line 95: 38px mint rounded square, green-700
   shield+check icon, mock lines 263) has no dedicated widget in the native
   data (au-h only contains the heading + au-tag) — recreate as a pseudo-element
   so it renders first in the row (au-h is forced flex-direction:row, and a
   ::before box is always the first flex item in source order). SVG below is
   the mock's own shield+check path (lines 263), inlined at the mock's 19x19
   size and var(--green-700)=#177a2f baked in (data-URIs cannot read CSS vars). */
.tah-svcp .svc-audit .au-h::before{
  content:"";display:block;flex:none;width:38px;height:38px;border-radius:10px;
  background-color:var(--bg-mint);
  background-image:url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2219%22%20height%3D%2219%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M12%203l7%203v6c0%204-3%206.5-7%208-4-1.5-7-4-7-8V6l7-3z%22%20stroke%3D%22%23177a2f%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9%2012l2%202%204-4%22%20stroke%3D%22%23177a2f%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
  background-repeat:no-repeat;background-position:center;background-size:19px 19px;
}
.tah-svcp .svc-audit .au-h h3.elementor-heading-title{font-size:21px;font-weight:700}
.tah-svcp .svc-audit .au-tag p{font-family:"IBM Plex Mono";font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--green-700);background:var(--lime-soft);padding:4px 10px;border-radius:20px;display:inline-block}
.tah-svcp .svc-audit .svc-intro p{margin-top:14px}
.tah-svcp .svc-audit .svc-cols{margin-top:26px;gap:28px}
.tah-svcp .svc-audit .svc-limits{margin-top:20px}
.tah-svcp .svc-audit .svc-cta{margin-top:24px}

/* ============================================================================
   SHARED `.convert` COMPONENT — reused verbatim from prototype/assets/site.css
   lines 274-283 (mockup's own comment: "final CTA reuse of .convert component
   from homepage, no change needed").
   ============================================================================ */
.tah-svcp .convert{padding:26px}
.tah-svcp .convert-inner{background:linear-gradient(135deg,var(--forest-deep),var(--green-700));border-radius:30px;padding:74px 40px;text-align:center;color:#eafff0;position:relative;overflow:hidden}
.tah-svcp .convert-inner::before{content:"";position:absolute;inset:0;opacity:.6;background:radial-gradient(50% 120% at 50% -8%,rgba(166,225,90,.34),transparent 55%)}
.tah-svcp .convert-inner .tah-kicker{justify-content:center}
.tah-svcp .convert-inner h2.elementor-heading-title{font-size:clamp(30px,4vw,50px);font-weight:700;max-width:20ch;margin:18px auto 0;position:relative;letter-spacing:-.03em;color:#fff}
.tah-svcp .convert-lead p{color:#bfe0c6;font-size:17.5px;max-width:50ch;margin:18px auto 0;position:relative}
.tah-svcp .convert-inner .hero-cta{justify-content:center;position:relative;margin-top:30px}
.tah-svcp .assure-row .elementor-icon-list-items{margin-top:26px;display:flex;gap:22px;justify-content:center;flex-wrap:wrap;position:relative;padding:0}
.tah-svcp .assure-row .elementor-icon-list-item{display:inline-flex;align-items:center;gap:8px;padding:0!important;margin:0;font-size:13.5px;color:#cfe6d4}
.tah-svcp .assure-row .elementor-icon-list-icon i{color:var(--lime);font-size:14px}
.tah-svcp .assure-row .elementor-icon-list-text{font-size:13.5px;color:#cfe6d4}

/* ============================================================================
   RESPONSIVE — mockup's own breakpoints (services.html lines 105-112; jumpnav's
   780px is above at line 24). No breakpoints besides 780/960/640 exist in the
   mockup's inline <style> for this page — none invented.
   ============================================================================ */
@media(max-width:960px){
  .tah-svcp .svc-cols{grid-template-columns:1fr;gap:26px}
  .tah-svcp .svc-meta{grid-template-columns:1fr}
}
@media(max-width:640px){
  .tah-svcp .svc-block{padding:56px 0}
  .tah-svcp .svc-audit{padding:26px 22px}
  .tah-svcp .convert-inner{padding:52px 22px}
}

/* ============================================================================
   NATIVE-DOM STRUCTURE ENFORCEMENT — Elementor 4.2 ignores nested container
   flex_direction, so every row layout in the JSON needs its direction forced
   here (P-E4 in the KIT). Grid layouts (svc-cols / svc-meta) are handled above
   via `display:grid!important` and don't need this.
   ============================================================================ */
.tah-svcp .svc-eyebrow,
.tah-svcp .hero-cta,
.tah-svcp .svc-cta,
.tah-svcp .au-h,
.tah-svcp .jumpnav .wrap{flex-direction:row!important}
.tah-svcp .svc-hero .wrap,
.tah-svcp .svc-block .wrap,
.tah-svcp .svc-head,
.tah-svcp .svc-col,
.tah-svcp .meta-card,
.tah-svcp .svc-audit,
.tah-svcp .convert-inner{flex-direction:column!important}
.tah-svcp .convert-inner{align-items:center}
.tah-svcp .svc-eyebrow{align-items:center}

/* button size modifier — mockup's `.btn-lg` (site.css line 49: padding:16px 28px;
   font-size:16.5px). Base `.tah-btn .elementor-button` (tah-child/build/base.css)
   already equals the mockup's plain, non-lg `.btn` size, so the audit ghost cta
   (mockup class "btn btn-ghost", no -lg) needs no extra class — it matches the
   shared default exactly. Every other button on this page is `.btn ... btn-lg`
   in the mockup, hence this scoped modifier. */
.tah-svcp .tah-btn--lg .elementor-button{padding:16px 28px;font-size:16.5px}
/* Orchestrator: shared CTA template renders inside .tah-svcp — on-dark kicker treatment */
.tah-svcp .convert .tah-kicker .elementor-heading-title{color:var(--lime)}
.tah-svcp .convert .elementor-heading-title{color:#fff}
.tah-svcp .convert .convert-lead p{color:#bfe0c6}
/* Orchestrator final polish: jumpnav label mock-verbatim */
.tah-svcp .jn-lbl,.tah-svcp .jn-lbl p{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);margin-right:4px}
/* Orchestrator mobile polish: jumpnav scrolls (mock @780), hero buttons full width (mock small-screen) */
@media(max-width:780px){
  .tah-svcp .jumpnav__inner{overflow-x:auto;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .tah-svcp .jn-link{flex:none}
  .tah-svcp .jn-link .elementor-button{white-space:nowrap}
  .tah-svcp .jn-lbl{flex:none}
}
@media(max-width:640px){
  .tah-svcp .hero-cta{width:100%}
  .tah-svcp .hero-cta .tah-btn{flex:1 1 100%}
  .tah-svcp .hero-cta .tah-btn .elementor-button{width:100%;justify-content:center}
}

/* ============================================================================
   "IMPORTANT LIMITATIONS" BAND — REDESIGN (2026-07-31)
   ----------------------------------------------------------------------------
   Was: dashed border + amber ⚠ glyph + washed warm fill. That is the visual
   vocabulary of a form-validation error, and it read as one ("looks like a
   computer error").

   This content is not an error — it is the firm being straight about what it
   can and cannot promise, and it carries the compliance rails (no guaranteed
   outcomes). So it should read as CANDOUR: a deliberate, brand-coloured note,
   confident enough to stand out rather than apologise.

   Overrides the earlier `.svc-limits` rules at lines ~132-135 of this file.
   ============================================================================ */
.tah-svcp .svc-limits{
  display:block;                 /* was flex — label now sits on its own line */
  margin-top:26px;
  background:
    linear-gradient(180deg, rgba(231,242,225,.85) 0%, rgba(242,247,238,.65) 100%);
  border:1px solid var(--line-2);
  border-left:4px solid var(--green);
  border-radius:14px;
  padding:18px 22px 18px 20px;
  font-size:14.5px; line-height:1.65; color:var(--muted);
  box-shadow:0 1px 2px rgba(14,61,36,.04);
}
/* kill the warning triangle */
.tah-svcp .svc-limits::before{ content:none }

/* "Important limitations:" becomes a mono label chip above the copy */
.tah-svcp .svc-limits b{
  display:flex; align-items:center; gap:8px;
  font-family:"IBM Plex Mono",monospace; font-weight:500;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-700); margin-bottom:8px;
}
/* small brand dot in place of the ⚠ */
.tah-svcp .svc-limits b::before{
  content:""; width:9px; height:9px; border-radius:3px; flex:none;
  background:linear-gradient(135deg,var(--lime),var(--green));
  box-shadow:0 0 0 3px rgba(166,225,90,.28);
}
.tah-svcp .svc-limits p{ margin:0 }

/* on the dark service blocks */
.tah-svcp .svc-block.bg-dark .svc-limits{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.14);
  border-left-color:var(--lime);
  color:#cfe6d4;
  box-shadow:none;
}
.tah-svcp .svc-block.bg-dark .svc-limits b{ color:var(--lime) }
.tah-svcp .svc-block.bg-dark .svc-limits b::before{
  box-shadow:0 0 0 3px rgba(166,225,90,.18);
}

/* ============================================================================
   JUMP NAV — default / hover / ACTIVE states (2026-07-31)
   ----------------------------------------------------------------------------
   Previously default and hover only, so while scrolling there was no way to
   tell which service you were currently reading. `tah-motion.js` sets
   `.is-active` on the link whose section is in view (scroll-spy).
   ============================================================================ */
.tah-svcp .jn-link .elementor-button{
  position:relative;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), box-shadow .25s var(--ease);
}
/* hover — lifts toward the active look without claiming it */
.tah-svcp .jn-link .elementor-button:hover{
  background:var(--forest); color:#eafff0; border-color:var(--forest);
  box-shadow:0 6px 14px -8px rgba(14,61,36,.55);
}
/* ACTIVE — the section you are currently in */
.tah-svcp .jn-link .elementor-button.is-active,
.tah-svcp .jn-link.is-active .elementor-button{
  background:var(--forest)!important; color:#fff!important;
  border-color:var(--forest)!important;
  box-shadow:0 6px 18px -8px rgba(14,61,36,.55), 0 0 0 3px rgba(166,225,90,.30)!important;
}
/* lime dot marker on the active pill */
.tah-svcp .jn-link .elementor-button.is-active::before,
.tah-svcp .jn-link.is-active .elementor-button::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--lime); margin-right:8px; flex:none;
  box-shadow:0 0 8px rgba(166,225,90,.9);
}
.tah-svcp .jn-link .elementor-button{ display:inline-flex; align-items:center }

/* keep the active pill in view inside the mobile horizontal scroller */
@media(max-width:780px){
  .tah-svcp .jumpnav .wrap{ scroll-behavior:smooth }
}

/* anchor offset so a jumped-to section isn't hidden under the sticky bars */
.tah-svcp .svc-block{ scroll-margin-top:132px }

/* ============================================================================
   AUDIT HEADING ICON CHIP — OVERLAP FIX (2026-07-31)
   ----------------------------------------------------------------------------
   The 38px shield chip was rendering ON TOP of the words "Also included…"
   instead of sitting before them in the flex row.

   Cause: `.au-h` is an Elementor container (`.e-con`), and Elementor ships its
   own `.e-con::before` for container background overlays, declared
   `position:absolute; top:0; left:0`. The chip rule above (line ~150) set
   content/display/size/background but never reset `position`, so Elementor's
   absolute positioning won and pulled the chip out of the flex flow into the
   container's top-left corner.

   Fix: put it back in flow. `position:static` + `inset:auto` makes it a normal
   first flex item again, which is what the `flex:none` there always assumed.
   ============================================================================ */
.tah-svcp .svc-audit .au-h::before{
  position:static!important;
  inset:auto!important;
  align-self:center;
}


/* ---- quote-page.css ---- */
/* ============================================================================
   THE ACCOUNTS HUB — PAGE: GET A QUOTE  (native containers + Fluent Forms embed)
   ----------------------------------------------------------------------------
   Scoped under `.tah-qp`. Ports the mockup page styling AND skins the Fluent
   Forms markup (.fluentform / .ff-el-*) to match the mockup form fields.

   RESOLVED (GQ-2, contact-row pairing): FF Lite DOES ship a free "container"
   field type (verified in
   plugins/fluentform/app/Services/FormBuilder/DefaultElements.php:1633-1651,
   `container_2_col` — `{element:"container",settings:{container_class,
   container_width,is_width_auto_calc:true},columns:[{width:50,fields:[…]},
   {width:50,fields:[…]}]}`) and a matching renderer
   (Components/Container.php) that emits `.ff-t-container.ff-column-container
   .ff_columns_total_2` (+ any custom container_class) wrapping two
   `.ff-t-cell.ff-t-column-N` cells (inline `style="flex-basis:50%"`). Form 3's
   `form_fields` (wp_fluentform_forms) has been edited (scratchpad
   `ff_columns.php`) to wrap Full-name+Email and Phone+Preferred-contact-method
   each in a `container_2_col`, tagged with `container_class:"tah-ff-row"` for
   scoping — every other field/section/name/validation left byte-identical
   (verified before/after field-name list). This is a form-data change, not a
   CSS-only workaround; the CSS below only skins the now-real `.tah-ff-row`
   markup to match the mock's `.frow{grid-template-columns:1fr 1fr;gap:16px}`
   (960px breakpoint, verbatim from mock line 127-131). NOTE: the mock also
   pairs US-state|Country in a third `.frow` (get-a-quote.html:271-333), but
   this unit's SPEC scoped only the Full-name|Email and Phone|Method rows —
   US-state|Country left single-column, unmodified, per the assigned scope.
   ============================================================================ */

/* ---- NATIVE-WIDGET DOM base (this page scopes `.tah-qp`, not `.tah-page`, so
   pages-native.css does NOT reach it — replicate the same resets here). ---- */
.tah-qp .e-con{padding:0}
.tah-qp .elementor-widget{margin:0}
.tah-qp .elementor-heading-title{margin:0}
.tah-qp .elementor-widget-text-editor p{margin:0}
.tah-qp .elementor-icon-list-items{margin:0;padding:0;list-style:none}
.tah-qp .elementor-icon-list-item{padding:0!important;margin:0;display:flex;gap:10px;align-items:flex-start}
.tah-qp .elementor-icon-list-icon{flex:none;margin-top:3px;width:auto}
.tah-qp .elementor-icon-list-icon i{color:var(--green-700)}

/* Elementor 4.2 ignores flex_direction on nested containers — force the row
   layouts this page actually needs; column is the (buggy) effective default. */
.tah-qp .privacy-banner{flex-direction:row!important}
.tah-qp .qhero-note .elementor-icon-list-item{flex-direction:row!important;align-items:center;gap:11px}
.tah-qp .aside-step{flex-direction:row!important}
.tah-qp .call{flex-direction:row!important;align-items:center}

/* ---- token aliases + scoped base (same values as --tah-*) ---- */
.tah-qp{
  --ink:#0c1c13;--forest:#0e3d24;--forest-deep:#092718;--green:#2f9e44;--green-700:#177a2f;
  --lime:#a6e15a;--lime-bright:#c2f06f;--lime-soft:#e6f7c9;
  --bg:#fff;--bg-soft:#f2f7ee;--bg-warm:#faf8f1;--bg-mint:#e7f2e1;
  --line:#e1ebdb;--line-2:#d3e2ca;--muted:#556a5c;--muted-2:#7f9184;
  --radius:20px;--maxw:1180px;--ease:cubic-bezier(.22,.61,.36,1);
  --shadow-sm:0 1px 2px rgba(14,61,36,.05),0 8px 24px -12px rgba(14,61,36,.14);
  --shadow-md:0 30px 60px -28px rgba(14,61,36,.35);
  font-family:"Figtree",system-ui,sans-serif;color:var(--ink);line-height:1.6;letter-spacing:-.006em;
}
.tah-qp,.tah-qp *{box-sizing:border-box}
.tah-qp{padding:0;gap:0}
.tah-qp > .elementor-element{width:100%;margin:0}
.tah-qp .elementor-widget-html,.tah-qp .elementor-widget-shortcode,
.tah-qp .elementor-widget-html .elementor-widget-container,
.tah-qp .elementor-widget-shortcode .elementor-widget-container{width:100%}
.tah-qp h1,.tah-qp h2,.tah-qp h3,.tah-qp h4{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:600;line-height:1.03;letter-spacing:-.028em;color:var(--ink)}
.tah-qp p{margin:0}
.tah-qp a{color:inherit;text-decoration:none}
.tah-qp .wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px;position:relative}
/* NOTE: this page's headings use the site's `tah-kicker`/`tah-on-dark` classes
   (see elementor data), whose full look (font, dot, color) is already defined
   unscoped in the theme's base layer — only page-specific spacing is added here. */
.tah-qp .qhero .tah-kicker{margin-bottom:18px}

/* ---- hero ---- */
.tah-qp .qhero{position:relative;padding:60px 0 20px;overflow:hidden;background:
  radial-gradient(58% 52% at 84% 6%,rgba(166,225,90,.22),transparent 60%),
  radial-gradient(46% 42% at 4% 4%,rgba(47,158,68,.1),transparent 55%),
  linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%)}
.tah-qp .qhero h1{font-size:clamp(34px,4.6vw,52px);font-weight:700;letter-spacing:-.03em;max-width:18ch}
/* mock's `.qhero p.lead` targets a `<p class="lead">`; the native text-editor
   widget carries the "lead" class on its own widget wrapper (not the inner
   bare <p> — see KIT native-DOM notes), so the working selector is `.lead`. */
.tah-qp .qhero .lead{font-size:17.5px;color:var(--muted);max-width:58ch;margin-top:18px}
.tah-qp .qhero-note{margin-top:24px;display:flex;align-items:center;gap:11px;font-size:14px;color:var(--muted)}
/* native icon-list stands in for the .shield span — size/colour the actual icon slot */
.tah-qp .qhero-note .elementor-icon-list-icon{width:34px;height:34px;border-radius:9px;background:var(--bg-mint);color:var(--green-700);display:grid;place-items:center;flex:none;margin-top:0}

/* ---- privacy banner ---- */
.tah-qp .privacy-banner{margin-top:30px;display:flex;gap:16px;align-items:flex-start;background:var(--forest);color:#eafff0;border-radius:18px;padding:22px 24px;box-shadow:var(--shadow-md)}
.tah-qp .privacy-banner .pb-ic{width:38px;height:38px;border-radius:10px;background:rgba(166,225,90,.16);color:var(--lime);display:grid;place-items:center;flex:none}
/* native icon-list stands in for the .pb-ic span — size/colour the actual icon slot, hide the empty text node */
.tah-qp .privacy-banner .pb-ic .elementor-icon-list-item{padding:0!important;margin:0}
.tah-qp .privacy-banner .pb-ic .elementor-icon-list-icon{margin:0;color:var(--lime)}
.tah-qp .privacy-banner .pb-ic .elementor-icon-list-text{display:none}
.tah-qp .privacy-banner b{font-family:"Bricolage Grotesque";font-weight:700;font-size:16.5px;display:block;color:#fff}
.tah-qp .privacy-banner p{font-size:14px;color:#bfe0c6;margin-top:6px;line-height:1.6}
.tah-qp .privacy-banner .tags{margin-top:10px;display:flex;flex-wrap:wrap;gap:7px}
.tah-qp .privacy-banner .tag{font-family:"IBM Plex Mono";font-size:10.5px;letter-spacing:.02em;color:var(--lime);background:rgba(166,225,90,.12);border:1px solid rgba(166,225,90,.28);padding:4px 9px;border-radius:20px}

/* ---- form section layout ---- */
.tah-qp .qform-sec{background:var(--bg-soft);padding:64px 0 96px}
/* mock's `.qform-grid` sits inside a `.wrap`; the native container is a direct
   child of `.qform-sec` (no intervening wrap), so max-width/centering/gutter
   are added here using the same `.wrap` values — margin-top:8px is verbatim. */
.tah-qp .qform-grid{display:grid!important;grid-template-columns:1.6fr 1fr;gap:34px;align-items:start;max-width:var(--maxw);margin:8px auto 0;padding:0 26px}
.tah-qp .qcard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px;box-shadow:var(--shadow-sm)}
.tah-qp .qcard-head h2{font-size:22px;font-weight:700}
.tah-qp .qcard-head .qintro{color:var(--muted);font-size:14.5px;margin-top:8px}
.tah-qp .qcard-head .req{color:var(--green-700)}

/* ---- aside ---- */
.tah-qp .qaside{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px}
.tah-qp .aside-card{background:var(--forest);color:#e7f4ea;border-radius:20px;padding:26px;box-shadow:var(--shadow-md)}
.tah-qp .aside-card .tah-kicker{margin-bottom:14px}
.tah-qp .aside-card h3{font-size:19px;font-weight:700;color:#fff}
.tah-qp .aside-steps{margin-top:16px;display:flex;flex-direction:column;gap:14px}
.tah-qp .aside-step{display:flex;gap:12px;align-items:flex-start}
.tah-qp .aside-step .an{font-family:"IBM Plex Mono";font-size:11px;color:var(--lime);border:1.5px solid rgba(166,225,90,.4);border-radius:8px;width:26px;height:26px;display:grid;place-items:center;flex:none}
.tah-qp .aside-step p{font-size:13.5px;color:#cfe6d4;line-height:1.55}
.tah-qp .aside-step b{color:#fff;display:block;font-size:14.5px;margin-bottom:3px}
.tah-qp .aside-card.light{background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:var(--shadow-sm)}
.tah-qp .aside-card.light h3{color:var(--ink)}
.tah-qp .aside-card.light .call{margin-top:14px;display:flex;align-items:center;gap:12px;padding:14px;border:1.5px dashed var(--line-2);border-radius:14px}
.tah-qp .aside-card.light .call svg{color:var(--green-700);flex:none}
.tah-qp .aside-card.light .call b{display:block;font-size:15.5px}
.tah-qp .aside-card.light .call span{font-size:12.5px;color:var(--muted)}
.tah-qp .aside-card.light p{font-size:13.5px;color:var(--muted);line-height:1.6;margin-top:10px}
/* native "call" box: a Button widget (icon+phone number) + a caption Text-Editor,
   standing in for the mockup's single <a class="call"> anchor + icon + two-line text */
.tah-qp .aside-card.light .call .call-btn .elementor-button{background:none;border:none;padding:0;margin:0;
  min-height:0;box-shadow:none;color:var(--ink);font-weight:700;font-size:15.5px;gap:10px}
.tah-qp .aside-card.light .call .call-btn .elementor-button:hover{background:none;transform:none;box-shadow:none;color:var(--green-700)}
.tah-qp .aside-card.light .call .call-btn i{color:var(--green-700)}
.tah-qp .aside-card.light .call .call-sub{font-size:12.5px;color:var(--muted)}

/* ============================================================================
   FLUENT FORMS SKIN — map .fluentform markup to the mockup form fields
   ============================================================================ */
.tah-qp .fluentform{margin:0}
.tah-qp .fluentform .ff-el-group{margin-bottom:16px}
.tah-qp .fluentform .ff-el-input--label label,
.tah-qp .fluentform .ff-el-input--label{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:7px;padding:0}
.tah-qp .fluentform .ff-el-is-required.asterisk-right label:after,
.tah-qp .fluentform .ff-el-input--label .ff-el-is-required:after{color:var(--green-700)}
.tah-qp .fluentform .ff-el-form-control{
  font-family:"Figtree";font-size:15px;color:var(--ink);background:#fdfefc;
  border:1.5px solid var(--line-2);border-radius:12px;padding:12px 14px;width:100%;
  transition:border-color .2s,box-shadow .2s;min-height:46px}
.tah-qp .fluentform textarea.ff-el-form-control{min-height:120px;resize:vertical;line-height:1.55}
.tah-qp .fluentform .ff-el-form-control:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(47,158,68,.14)}
.tah-qp .fluentform select.ff-el-form-control{
  appearance:none;-webkit-appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="%23556a5c" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}

/* GQ-2 FF container rows — skins the real `.ff-t-container`/`.ff-t-cell` DOM
   (rendered by Fluent Forms' native "Two Column Container" field, tagged
   container_class:"tah-ff-row") to match the mock's `.frow{grid-template-
   columns:1fr 1fr;gap:16px}` (get-a-quote.html:52). FF's own base CSS already
   sets `.ff-t-container{display:flex;gap:15px}` — only the gap and the
   cells' internal spacing/margins need correcting to mirror the mock exactly;
   the container's own margin-top:16px between the two rows matches the mock's
   inline `style="margin-top:16px"` on the second `.frow` (get-a-quote.html:233). */
.tah-qp .fluentform .tah-ff-row{gap:16px;margin-bottom:16px}
.tah-qp .fluentform .tah-ff-row + .tah-ff-row{margin-top:16px}
.tah-qp .fluentform .tah-ff-row .ff-t-cell{padding:0}
.tah-qp .fluentform .tah-ff-row .ff-t-cell .ff-el-group{margin-bottom:0}

/* section breaks -> mockup fieldset legends
   (mock: `.fset{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}`,
   `.fset:first-of-type{margin-top:26px}` only overrides margin-top — border/padding
   stay on the first section too; ported verbatim, not zeroed out). */
.tah-qp .fluentform .ff-el-section-break{margin:30px 0 6px;padding-top:26px;border-top:1px solid var(--line)}
.tah-qp .fluentform .ff-el-section-break:first-child,
.tah-qp .fluentform .ff_form_group:first-child .ff-el-section-break{margin-top:26px}
/* mock: `.fset legend{...margin-bottom:16px}` — gap between legend and first field */
.tah-qp .fluentform .ff-el-section-title{font-family:"IBM Plex Mono";font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--green-700);margin:0 0 16px;display:flex;align-items:center;gap:8px;font-weight:600}
.tah-qp .fluentform .ff-el-section-title:before{content:"";width:8px;height:8px;border-radius:3px;background:var(--lime);flex:none}
/* mock's inline "— select one or more *" legend suffix (class="req") is Figtree,
   not mono, and green-700 — the FF form renders this as the section's own
   "description" line beneath the legend (real DOM has no inline-suffix slot to
   target), so only the req-style colour/family are ported onto that line. */
.tah-qp .fluentform .ff-section_break_desk{font-family:"Figtree";font-size:12.5px;color:var(--green-700);margin-top:6px}
.tah-qp .fluentform .ff-el-section-break hr{display:none}

/* help message (e.g. the privacy hint under the textarea) */
.tah-qp .fluentform .ff-el-help-message{font-size:12.5px;color:var(--muted-2);margin-top:4px;line-height:1.55}

/* checkbox option groups -> chip grid (services + tools).
   FF markup: .ff-el-input--content > .ff-el-form-check > label.ff-el-form-check-label > input + span */
.tah-qp .fluentform .tah-choices .ff-el-input--content{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tah-qp .fluentform .tah-choices .ff-el-form-check{margin:0;position:relative}
.tah-qp .fluentform .tah-choices .ff-el-form-check-input{position:absolute;opacity:0;width:1px;height:1px}
.tah-qp .fluentform .tah-choices .ff-el-form-check-label{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--ink);border:1.5px solid var(--line-2);border-radius:12px;padding:12px 14px;cursor:pointer;background:#fdfefc;transition:border-color .2s,background .2s,box-shadow .2s;min-height:44px;margin:0}
.tah-qp .fluentform .tah-choices .ff-el-form-check-label:before{content:"";width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line-2);flex:none;transition:background .2s,border-color .2s;background:#fff}
.tah-qp .fluentform .tah-choices .ff-el-form-check-label:has(input:checked){border-color:var(--green);background:var(--bg-mint);box-shadow:0 0 0 3px rgba(47,158,68,.1)}
.tah-qp .fluentform .tah-choices .ff-el-form-check-label:has(input:checked):before{border-color:var(--green);background:var(--green) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M5 12l4 4L19 7" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/12px no-repeat}
/* mock: `.choice input:focus-visible+label{outline:3px solid var(--green);outline-offset:2px}` —
   input is a child of the label here (not a sibling), so :has() reaches it */
.tah-qp .fluentform .tah-choices .ff-el-form-check-label:has(.ff-el-form-check-input:focus-visible){outline:3px solid var(--green);outline-offset:2px}

/* consent -> mint acknowledgement row (real checkbox kept visible, text wraps) */
.tah-qp .fluentform .tah-consent{margin-top:28px;background:var(--bg-mint);border-radius:14px;padding:16px 18px}
.tah-qp .fluentform .tah-consent > .ff-el-input--label{display:none}
.tah-qp .fluentform .tah-consent .ff-el-input--content,
.tah-qp .fluentform .tah-consent .ff-el-form-check{margin:0}
.tah-qp .fluentform .tah-consent .ff-el-form-check-label{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--ink);line-height:1.6;font-weight:400;margin:0;cursor:pointer}
.tah-qp .fluentform .tah-consent .ff-el-form-check-input{width:18px;height:18px;accent-color:var(--green-700);flex:none;margin-top:3px}

/* submit button (mirrors the shared .btn.btn-primary.btn-lg component values —
   the FF button can't carry that class, so its exact look is re-derived here) */
.tah-qp .fluentform .ff-el-group.ff_submit_btn_wrapper,
.tah-qp .fluentform .ff-el-group.ff_submit_btn_wrapper_center{margin-top:28px;margin-bottom:0}
.tah-qp .fluentform .ff-btn-submit{display:inline-flex;align-items:center;gap:9px;font-family:"Figtree";font-weight:600;font-size:16.5px;padding:16px 28px;border-radius:12px;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;background:var(--forest)!important;color:#eafff0!important;min-height:44px;box-shadow:var(--shadow-sm);transition:transform .28s var(--ease),background .28s,color .28s,box-shadow .28s,border-color .28s}
.tah-qp .fluentform .ff-btn-submit:hover{background:var(--forest-deep)!important;transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* validation + success messages (no mockup equivalent — the mock's JS demo had
   no error/success states; styled to match the page's palette for real-form UX) */
.tah-qp .fluentform .error,.tah-qp .fluentform .text-danger,.tah-qp .fluentform .ff-el-is-error .error{color:#b3261e;font-size:12.5px;margin-top:5px}
.tah-qp .fluentform .ff-el-form-control.ff-el-is-error-container,
.tah-qp .fluentform .has-error .ff-el-form-control{border-color:#d98b8b}
.tah-qp .ff-message-success{background:#fff;border:1.5px solid var(--green);border-radius:16px;padding:26px;color:var(--ink);font-size:15px;box-shadow:var(--shadow-sm)}

/* ---- responsive (breakpoints verbatim from mock: 960 / 640) ---- */
@media(max-width:960px){
  .tah-qp .qform-grid{grid-template-columns:1fr}
  .tah-qp .qaside{position:static;order:-1}
  .tah-qp .fluentform .tah-choices .ff-el-input--content{grid-template-columns:1fr}
  /* GQ-2: mirrors mock's `.frow,.frow.f3,.choice-grid{grid-template-columns:1fr}`
     at the same 960px breakpoint — stack the FF container's two cells. */
  .tah-qp .fluentform .tah-ff-row{flex-direction:column!important}
  .tah-qp .fluentform .tah-ff-row .ff-t-cell{flex-basis:100%!important;width:100%}
}
@media(max-width:640px){
  .tah-qp .qcard{padding:24px}
  .tah-qp .privacy-banner{flex-direction:column!important;padding:20px}
}

/* Orchestrator final polish (mock-verbatim values) */
.tah-qp .qhero .lead,.tah-qp .qhero .lead p{max-width:58ch}
.tah-qp .qhero-note .elementor-icon-list-icon{width:34px;height:34px;border-radius:9px;background:var(--bg-mint);display:grid;place-items:center;flex:none;margin:0}
.tah-qp .qhero-note .elementor-icon-list-icon i,.tah-qp .qhero-note .elementor-icon-list-icon svg{color:var(--green-700);fill:var(--green-700);width:18px;height:18px;font-size:18px}
/* (removed: mock's own mobile order is aside-first, DOM order already matches) */


/* ---- pages-shared.css ---- */
/* ============================================================================
   THE ACCOUNTS HUB — SHARED interior-page styles (auto-scoped from mockup site.css)
   ----------------------------------------------------------------------------
   Every rule is scoped under `.tah-page` so About / FAQs / Privacy can reuse the
   proven mockup markup verbatim. Header/nav/footer rules are inert here (Astra
   owns site chrome). Generated by scratchpad/scope_sitecss.py — do not hand-edit;
   per-page tweaks live in about/faqs/privacy .css parts.
   Elementor container chrome: full-bleed bands, .wrap centers content.
   ============================================================================ */
.tah-page{padding:0;gap:0}
.tah-page > .elementor-element{width:100%;margin:0}
.tah-page .elementor-widget-html,.tah-page .elementor-widget-html .elementor-widget-container{width:100%}

.tah-page{--ink:#0c1c13;--forest:#0e3d24;--forest-deep:#092718;--green:#2f9e44;--green-600:#1f8a37;--green-700:#177a2f;
    --lime:#a6e15a;--lime-bright:#c2f06f;--lime-soft:#e6f7c9;
    --bg:#ffffff;--bg-soft:#f2f7ee;--bg-warm:#faf8f1;--bg-mint:#e7f2e1;
    --line:#e1ebdb;--line-2:#d3e2ca;--muted:#556a5c;--muted-2:#7f9184;
    --radius:20px;--shadow-sm:0 1px 2px rgba(14,61,36,.05),0 8px 24px -12px rgba(14,61,36,.14);
    --shadow-md:0 30px 60px -28px rgba(14,61,36,.35);--shadow-lg:0 44px 90px -40px rgba(9,39,24,.5);
    --shadow-lime:0 18px 40px -16px rgba(120,190,50,.55);--ease:cubic-bezier(.22,.61,.36,1);--maxw:1180px;}
.tah-page *{box-sizing:border-box;margin:0;padding:0}
.tah-page{scroll-behavior:smooth}
.tah-page{font-family:"Figtree",system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;letter-spacing:-.006em}
.tah-page h1, .tah-page h2, .tah-page h3, .tah-page h4, .tah-page .display{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:600;line-height:1.03;letter-spacing:-.028em}
.tah-page a{color:inherit;text-decoration:none}
.tah-page img{display:block;max-width:100%}
.tah-page .wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px;position:relative}
.tah-page ::selection{background:var(--lime);color:var(--forest-deep)}
.tah-page a:focus-visible, .tah-page button:focus-visible, .tah-page summary:focus-visible, .tah-page .btn:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:8px}
.tah-page .on-dark:focus-visible, .tah-page .moment a:focus-visible, .tah-page .how a:focus-visible, .tah-page .convert a:focus-visible, .tah-page .after a:focus-visible, .tah-page .prob-card a:focus-visible{outline-color:var(--lime)}
.tah-page .kicker{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500;letter-spacing:.15em;
    text-transform:uppercase;color:var(--green-700);display:inline-flex;align-items:center;gap:9px}
.tah-page .kicker::before{content:"";width:15px;height:15px;border-radius:5px;flex:none;
    background:linear-gradient(135deg,var(--lime),var(--green));box-shadow:0 0 0 4px var(--lime-soft)}
.tah-page .kicker.on-dark{color:var(--lime)}
.tah-page .kicker.on-dark::before{box-shadow:0 0 0 4px rgba(166,225,90,.14)}
.tah-page .btn{display:inline-flex;align-items:center;gap:9px;font-family:"Figtree";font-weight:600;font-size:15.5px;
    padding:13px 22px;border-radius:12px;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;min-height:44px;
    transition:transform .28s var(--ease),background .28s,color .28s,box-shadow .28s,border-color .28s}
.tah-page .btn .arw{transition:transform .28s var(--ease)}
.tah-page .btn:hover .arw{transform:translateX(3px)}
.tah-page .btn-primary{background:var(--forest);color:#eafff0;box-shadow:var(--shadow-sm)}
.tah-page .btn-primary:hover{background:var(--forest-deep);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.tah-page .btn-lime{background:var(--lime);color:var(--forest-deep);border-color:var(--lime)}
.tah-page .btn-lime:hover{background:var(--lime-bright);transform:translateY(-2px);box-shadow:var(--shadow-lime)}
.tah-page .btn-ghost{background:#fff;color:var(--ink);border-color:var(--line-2)}
.tah-page .btn-ghost:hover{border-color:var(--green);color:var(--green-700);transform:translateY(-2px)}
.tah-page .btn-ghost.on-dark{background:transparent;color:#eafff0;border-color:rgba(255,255,255,.28)}
.tah-page .btn-ghost.on-dark:hover{border-color:var(--lime);color:var(--lime)}
.tah-page .btn-lg{padding:16px 28px;font-size:16.5px}
.tah-page .util{background:var(--forest-deep);color:#bfe0c6;font-size:13px}
.tah-page .util .wrap{display:flex;align-items:center;justify-content:space-between;height:38px;gap:20px}
.tah-page .util-l{display:flex;align-items:center;gap:9px}
.tah-page .util .dot{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime)}
.tah-page .util-r{display:flex;gap:20px;align-items:center}
.tah-page .util a{color:#cfe6d4;display:inline-flex;align-items:center;gap:7px}
.tah-page .util a:hover{color:#fff}
@media(max-width:560px){
.tah-page .util-r .hidesm{display:none}
}
.tah-page header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);backdrop-filter:blur(16px) saturate(1.4);
    border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.tah-page header.scrolled{border-color:var(--line);box-shadow:0 10px 40px -30px rgba(14,61,36,.5)}
.tah-page .nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.tah-page .brand{display:flex;align-items:center;gap:11px}
.tah-page .brand svg{width:40px;height:40px;flex:none}
.tah-page .brand .bt{display:flex;flex-direction:column;line-height:1}
.tah-page .brand .bt b{font-family:"Bricolage Grotesque";font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--ink)}
.tah-page .brand .bt span{font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);margin-top:3px;font-weight:600}
.tah-page .nav-links{display:flex;align-items:center;gap:30px}
.tah-page .nav-links a{font-size:15px;font-weight:500;color:var(--muted);position:relative;transition:color .2s}
.tah-page .nav-links a:hover{color:var(--ink)}
.tah-page .nav-links a::after{content:"";position:absolute;left:0;bottom:-7px;height:2px;width:0;border-radius:2px;background:var(--green);transition:width .3s var(--ease)}
.tah-page .nav-links a:hover::after{width:100%}
.tah-page .nav-cta{display:flex;align-items:center;gap:12px}
.tah-page .menu-btn{display:none;width:44px;height:44px;flex-direction:column;gap:5px;align-items:center;justify-content:center;background:none;border:none;cursor:pointer}
.tah-page .menu-btn span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}
.tah-page .drawer{position:fixed;inset:0;z-index:70;background:rgba(9,39,24,.42);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s}
.tah-page .drawer.open{opacity:1;pointer-events:auto}
.tah-page .drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(84vw,340px);background:#fff;padding:26px;
    display:flex;flex-direction:column;gap:2px;transform:translateX(100%);transition:transform .4s var(--ease)}
.tah-page .drawer.open .drawer-panel{transform:none}
.tah-page .drawer-panel .dh{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.tah-page .drawer-panel a{padding:14px 4px;font-size:17px;font-weight:600;border-bottom:1px solid var(--line);color:var(--ink);min-height:44px;display:flex;align-items:center}
.tah-page .drawer-panel .btn{margin-top:20px;justify-content:center}
.tah-page .x{background:none;border:none;font-size:26px;cursor:pointer;color:var(--muted);line-height:1;width:44px;height:44px}
.tah-page .hero{position:relative;padding:66px 0 46px;overflow:hidden;background:
    radial-gradient(58% 52% at 84% 6%,rgba(166,225,90,.24),transparent 60%),
    radial-gradient(46% 42% at 4% 4%,rgba(47,158,68,.1),transparent 55%),
    linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%)}
.tah-page .hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:50px;align-items:center}
.tah-page .hero .kicker{margin-bottom:20px}
.tah-page .hero h1{font-size:clamp(40px,5.6vw,66px);font-weight:700;letter-spacing:-.035em}
.tah-page .hero h1 .hl{position:relative;color:var(--green-700)}
.tah-page .hero h1 .hl::after{content:"";position:absolute;left:-1px;right:-1px;bottom:.06em;height:.32em;z-index:-1;
    background:linear-gradient(90deg,var(--lime),var(--lime-soft));border-radius:3px;opacity:.8}
.tah-page .hero p.lead{font-size:18.5px;color:var(--muted);max-width:40ch;margin-top:22px}
.tah-page .hero p.lead b{color:var(--ink);font-weight:600}
.tah-page .hero-cta{display:flex;gap:13px;margin-top:30px;flex-wrap:wrap;align-items:center}
.tah-page .hero-assure{margin-top:22px;display:flex;align-items:center;gap:11px;font-size:14px;color:var(--muted)}
.tah-page .hero-assure .shield{width:34px;height:34px;border-radius:9px;background:var(--bg-mint);display:grid;place-items:center;flex:none;color:var(--green-700)}
.tah-page .dash{position:relative}
.tah-page .dash-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden}
.tah-page .dash-top{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fbfdfa,#fff)}
.tah-page .dash-top .dt-l{display:flex;align-items:center;gap:11px}
.tah-page .dash-top .doc{width:30px;height:30px;border-radius:8px;background:var(--bg-mint);display:grid;place-items:center;color:var(--green-700)}
.tah-page .dash-top b{font-family:"Bricolage Grotesque";font-size:15px;display:block}
.tah-page .dash-top small{font-size:11px;color:var(--muted-2)}
.tah-page .dash-top .stamp{font-family:"IBM Plex Mono";font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-700);border:1.5px solid var(--line-2);border-radius:6px;padding:4px 8px;transform:rotate(2deg)}
.tah-page .dash-body{padding:20px 22px 22px}
.tah-page .rep-h{font-family:"IBM Plex Mono";font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px}
.tah-page .tasks{display:flex;flex-direction:column;gap:9px}
.tah-page .task{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fdfefc}
.tah-page .task .tl{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:500}
.tah-page .task .ck{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;flex:none}
.tah-page .task .ck.done{background:var(--bg-mint);color:var(--green-700)}
.tah-page .task .ck.due{background:#fff4e0;color:#b9791b}
.tah-page .task .st{font-family:"IBM Plex Mono";font-size:11px;color:var(--muted-2)}
.tah-page .task .st.g{color:var(--green-700)}
.tah-page .chartbox{margin-top:14px;border:1px solid var(--line);border-radius:12px;padding:15px 16px 11px}
.tah-page .chartbox .cbh{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.tah-page .chartbox .cbh span{font-size:12.5px;color:var(--muted);font-weight:500}
.tah-page .chartbox .cbh em{font-family:"IBM Plex Mono";font-style:normal;font-size:11px;color:var(--green-700);background:var(--lime-soft);padding:3px 8px;border-radius:20px}
.tah-page .bars{display:flex;align-items:flex-end;gap:9px;height:60px}
.tah-page .bars i{flex:1;border-radius:5px 5px 3px 3px;background:linear-gradient(180deg,var(--lime),var(--green));transform-origin:bottom}
.tah-page .js .bars i{transform:scaleY(0);animation:grow .9s var(--ease) forwards}
.tah-page .bars i:nth-child(6){background:linear-gradient(180deg,var(--green),var(--forest))}
@keyframes grow{to{transform:scaleY(1)}}
.tah-page .keepfoot{margin-top:15px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--green-700);font-weight:600;display:flex;align-items:center;gap:9px}
.tah-page .keepfoot svg{flex:none}
.tah-page .dash-cap{text-align:center;font-size:12px;color:var(--muted-2);margin-top:12px;font-style:italic}
.tah-page .float-badge{position:absolute;left:-24px;bottom:44px;background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:10px 15px 10px 10px;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:11px}
.tah-page .js .float-badge{animation:floaty 5s ease-in-out infinite}
.tah-page .float-badge img{width:44px;height:44px;border-radius:9px;object-fit:cover}
.tah-page .float-badge .fb-t{font-family:"Bricolage Grotesque";font-weight:700;font-size:13px;line-height:1.15}
.tah-page .float-badge .fb-s{font-size:11px;color:var(--muted)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(max-width:520px){
.tah-page .float-badge{display:none}
}
.tah-page .trust{padding:74px 0;background:var(--bg-warm);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tah-page .trust-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:46px;align-items:center}
.tah-page .person{display:flex;gap:24px;align-items:flex-start}
.tah-page .avatar{width:118px;height:118px;border-radius:18px;flex:none;position:relative;overflow:hidden;
    background:linear-gradient(150deg,var(--forest),var(--green));display:grid;place-items:center;box-shadow:var(--shadow-md)}
.tah-page .avatar svg{width:56px;height:56px;opacity:.9}
.tah-page .avatar .ph{position:absolute;bottom:7px;left:0;right:0;text-align:center;font-family:"IBM Plex Mono";font-size:9px;letter-spacing:.1em;color:rgba(255,255,255,.7);text-transform:uppercase}
.tah-page .person .p-body .kicker{margin-bottom:12px}
.tah-page .person .p-body h2{font-size:clamp(23px,2.6vw,30px);font-weight:700}
.tah-page .person .p-name{font-family:"IBM Plex Mono";font-size:12.5px;color:var(--green-700);margin-top:6px;letter-spacing:.02em}
.tah-page .person .p-body p{color:var(--muted);font-size:15.5px;margin-top:14px;max-width:46ch}
.tah-page .person .person-how{margin-top:20px;background:var(--forest);border-radius:14px;padding:16px 20px;display:flex;flex-direction:column;gap:12px}
.tah-page .person .person-how div{display:flex;gap:11px;font-size:14px;align-items:flex-start;color:#dcecd6;line-height:1.5}
.tah-page .person .person-how svg{flex:none;margin-top:2px;color:var(--lime)}
.tah-page .badge-col{display:flex;flex-direction:column;gap:14px}
.tah-page .badge-mini{display:flex;align-items:flex-start;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow-sm)}
.tah-page .badge-mini img{width:62px;height:62px;object-fit:contain;flex:none;filter:drop-shadow(0 6px 12px rgba(9,39,24,.14))}
.tah-page .badge-mini .bm-t{font-family:"Bricolage Grotesque";font-weight:700;font-size:15px;line-height:1.2}
.tah-page .badge-mini .bm-s{font-size:12.5px;color:var(--muted);margin-top:2px}
.tah-page .verify{margin-top:8px;display:flex;gap:16px;flex-wrap:wrap}
.tah-page .verify a{font-family:"IBM Plex Mono";font-size:11px;color:var(--green-700);border-bottom:1px solid var(--line-2);padding-bottom:1px;transition:color .2s,border-color .2s}
.tah-page .verify a:hover{color:var(--forest);border-color:var(--green)}
@media(max-width:960px){
.tah-page .trust-grid{grid-template-columns:1fr;gap:30px}
}
@media(max-width:520px){
.tah-page .person{flex-direction:column}
}
.tah-page section{position:relative}
.tah-page .sec{padding:92px 0}
.tah-page .sec-head{max-width:660px}
.tah-page .sec-head h2{font-size:clamp(29px,3.6vw,44px);font-weight:700;margin-top:16px;letter-spacing:-.03em}
.tah-page .sec-head p{color:var(--muted);font-size:17.5px;margin-top:16px}
.tah-page .services{background:var(--bg-soft)}
.tah-page .svc-top{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap}
.tah-page .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.tah-page .svc{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;position:relative;overflow:hidden;
    transition:transform .36s var(--ease),box-shadow .36s,border-color .36s}
.tah-page .svc::after{content:"";position:absolute;left:0;top:0;height:100%;width:4px;background:linear-gradient(180deg,var(--lime),var(--green));transform:scaleX(0);transform-origin:top;transition:transform .36s var(--ease)}
.tah-page .svc:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent}
.tah-page .svc:hover::after{transform:scaleX(1)}
.tah-page .svc .si{width:50px;height:50px;border-radius:13px;background:var(--bg-mint);display:grid;place-items:center;color:var(--green-700);margin-bottom:20px;transition:background .36s,color .36s}
.tah-page .svc:hover .si{background:var(--forest);color:var(--lime)}
.tah-page .svc h3{font-size:20px;font-weight:700}
.tah-page .svc p{font-size:14px;color:var(--muted);margin-top:10px}
.tah-page .svc .tags{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}
.tah-page .svc .tag{font-family:"IBM Plex Mono";font-size:10.5px;color:var(--green-700);background:var(--bg-mint);padding:4px 9px;border-radius:20px}
.tah-page .svc .num{position:absolute;right:20px;top:18px;font-family:"IBM Plex Mono";font-size:12px;color:var(--line-2)}
.tah-page .svc.cta-card{background:var(--forest);color:#e7f4ea;display:flex;flex-direction:column;justify-content:center;border-color:transparent}
.tah-page .svc.cta-card::after{display:none}
.tah-page .svc.cta-card h3{color:#fff}
.tah-page .svc.cta-card p{color:#a9cbb0}
.tah-page .svc.cta-card .btn{margin-top:22px;align-self:flex-start}
.tah-page .moment{background:var(--forest-deep);color:#eaf6ec;position:relative;overflow:hidden;
    background-image:linear-gradient(rgba(166,225,90,.05) 1px,transparent 1px),
      linear-gradient(90deg,rgba(166,225,90,.05) 1px,transparent 1px),
      radial-gradient(60% 90% at 80% 20%,rgba(166,225,90,.14),transparent 60%);
    background-size:34px 34px,34px 34px,100% 100%}
.tah-page .moment .wrap{padding:88px 26px}
.tah-page .moment blockquote{max-width:20ch;font-family:"Bricolage Grotesque";font-weight:600;font-size:clamp(30px,4.6vw,54px);line-height:1.06;letter-spacing:-.03em}
.tah-page .moment blockquote .q{color:var(--lime)}
.tah-page .moment p{color:#a9cbb0;font-size:18px;max-width:54ch;margin-top:24px}
.tah-page .moment-mark{position:absolute;right:-30px;top:50%;transform:translateY(-50%);width:min(36vw,400px);opacity:.13;z-index:0}
@media(max-width:720px){
.tah-page .moment-mark{display:none}
}
.tah-page .hub{background:#fff;overflow:hidden}
.tah-page .hub .sec-head p b{color:var(--ink);font-weight:600}
.tah-page .hub-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:42px;align-items:stretch;margin-top:46px}
.tah-page .before{background:var(--bg-warm);border:1px dashed var(--line-2);border-radius:22px;padding:32px}
.tah-page .before .lbl, .tah-page .after .lbl{font-family:"IBM Plex Mono";font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;margin-bottom:20px}
.tah-page .before .lbl{color:var(--muted-2)}
.tah-page .before .lbl::before{content:"";width:9px;height:9px;border-radius:50%;background:#c9b34a}
.tah-page .before ul, .tah-page .after ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.tah-page .before li{display:flex;gap:12px;font-size:15px;color:var(--muted);align-items:flex-start}
.tah-page .before li svg{flex:none;margin-top:3px;color:#c08a3e}
.tah-page .after{position:relative;background:var(--forest);color:#e7f4ea;border-radius:22px;padding:32px;overflow:hidden;box-shadow:var(--shadow-md)}
.tah-page .after .lbl{color:var(--lime)}
.tah-page .after .lbl::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime)}
.tah-page .after ul{position:relative;z-index:2}
.tah-page .after li{display:flex;gap:12px;font-size:15px;align-items:flex-start}
.tah-page .after li svg{flex:none;margin-top:2px;color:var(--lime)}
.tah-page .hub-orbit{position:absolute;right:-70px;bottom:-70px;width:260px;height:260px;opacity:.5;z-index:1}
.tah-page .hub-foot{margin-top:26px;position:relative;z-index:2}
.tah-page .who{background:var(--bg-soft)}
.tah-page .who-band{margin-top:38px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px;display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:center}
.tah-page .who-primary .kicker{margin-bottom:12px}
.tah-page .who-primary h3{font-size:22px;font-weight:700}
.tah-page .who-primary p{color:var(--muted);font-size:15px;margin-top:12px;max-width:38ch}
.tah-page .who-list{display:flex;flex-direction:column;gap:2px}
.tah-page .who-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.tah-page .who-row:last-child{border-bottom:none}
.tah-page .who-row svg{flex:none;color:var(--green-700)}
.tah-page .who-row b{font-weight:600;font-size:15px}
.tah-page .who-row span{color:var(--muted);font-size:13.5px;margin-left:auto;text-align:right}
@media(max-width:820px){
.tah-page .who-band{grid-template-columns:1fr;gap:26px;padding:26px}
.tah-page .who-row span{display:none}
}
.tah-page .how{background:var(--forest);color:#e7f4ea;position:relative;overflow:hidden}
.tah-page .how::before{content:"";position:absolute;bottom:-120px;left:-80px;width:420px;height:420px;background:radial-gradient(circle,rgba(166,225,90,.12),transparent 65%)}
.tah-page .how .sec-head h2{color:#fff}
.tah-page .how .sec-head p{color:#a9cbb0}
.tah-page .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.tah-page .step{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:28px;position:relative}
.tah-page .step .sn{font-family:"IBM Plex Mono";font-size:13px;color:var(--lime);letter-spacing:.1em}
.tah-page .step h3{font-size:20px;font-weight:700;margin:14px 0 11px;color:#fff}
.tah-page .step p{font-size:14.5px;color:#a9cbb0}
.tah-page .step .sbar{margin-top:18px;height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.tah-page .step .sbar i{display:block;height:100%;background:linear-gradient(90deg,var(--lime),var(--green));width:33%}
.tah-page .step:nth-child(2) .sbar i{width:66%}
.tah-page .step:nth-child(3) .sbar i{width:100%}
.tah-page .how-note{margin-top:32px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:16px 20px}
.tah-page .how-note svg{color:var(--lime);flex:none}
.tah-page .how-note span{font-size:14.5px;color:#cfe6d4}
.tah-page .faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start;margin-top:6px}
.tah-page .faq-list{display:flex;flex-direction:column;gap:12px}
.tah-page .faq{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;transition:border-color .3s,box-shadow .3s}
.tah-page .faq[open]{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.tah-page .faq summary{list-style:none;cursor:pointer;padding:19px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:600;font-size:16px;min-height:44px}
.tah-page .faq summary::-webkit-details-marker{display:none}
.tah-page .faq summary .pm{width:26px;height:26px;border-radius:50%;background:var(--bg-mint);color:var(--green-700);display:grid;place-items:center;flex:none;transition:transform .3s,background .3s}
.tah-page .faq[open] summary .pm{transform:rotate(45deg);background:var(--forest);color:var(--lime)}
.tah-page .faq .fa{padding:0 22px 20px;color:var(--muted);font-size:14.5px}
.tah-page .faq-aside{background:var(--bg-mint);border-radius:20px;padding:30px;position:sticky;top:96px}
.tah-page .faq-aside h3{font-size:22px;font-weight:700}
.tah-page .faq-aside p{color:var(--muted);font-size:15px;margin-top:12px}
.tah-page .faq-aside .btn{margin-top:20px}
.tah-page .convert{padding:26px}
.tah-page .convert-inner{background:linear-gradient(135deg,var(--forest-deep),var(--green-700));border-radius:30px;padding:74px 40px;text-align:center;color:#eafff0;position:relative;overflow:hidden}
.tah-page .convert-inner::before{content:"";position:absolute;inset:0;opacity:.6;background:radial-gradient(50% 120% at 50% -8%,rgba(166,225,90,.34),transparent 55%)}
.tah-page .convert-inner .kicker{justify-content:center}
.tah-page .convert-inner h2{font-size:clamp(30px,4vw,50px);font-weight:700;max-width:20ch;margin:18px auto 0;position:relative;letter-spacing:-.03em}
.tah-page .convert-inner p{color:#bfe0c6;font-size:17.5px;max-width:50ch;margin:18px auto 0;position:relative}
.tah-page .convert-inner .hero-cta{justify-content:center;position:relative;margin-top:30px}
.tah-page .assure-row{margin-top:26px;display:flex;gap:22px;justify-content:center;flex-wrap:wrap;position:relative}
.tah-page .assure-row span{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:#cfe6d4}
.tah-page .assure-row svg{color:var(--lime)}
.tah-page footer{background:var(--forest-deep);color:#bcd8c2;padding:64px 0 30px}
.tah-page .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:38px}
.tah-page .foot-brand .fbrand{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.tah-page .foot-brand .fbrand svg{width:38px;height:38px}
.tah-page .foot-brand .fbrand b{font-family:"Bricolage Grotesque";font-weight:800;font-size:20px;color:#fff}
.tah-page .foot-brand .fbrand span{font-size:9px;letter-spacing:.19em;text-transform:uppercase;color:#8fbf98;display:block;margin-top:2px}
.tah-page .foot-brand p{font-size:14px;color:#8fbf98;max-width:34ch}
.tah-page .foot-tag{font-family:"Bricolage Grotesque";font-weight:600;color:var(--lime);font-size:15px;margin-top:16px}
.tah-page .foot-col h4{font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);margin-bottom:15px}
.tah-page .foot-col a{display:block;font-size:14.5px;color:#bcd8c2;padding:6px 0;transition:color .2s,padding-left .25s}
.tah-page .foot-col a:hover{color:#fff;padding-left:5px}
.tah-page .foot-contact div{font-size:14px;padding:5px 0;display:flex;align-items:center;gap:9px}
.tah-page .foot-contact svg{color:var(--lime);flex:none}
.tah-page .disclaimer{margin-top:46px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;color:#7ba885;line-height:1.7;max-width:96ch}
.tah-page .foot-bottom{margin-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:#7ba885}
.tah-page .foot-bottom b{color:var(--lime);font-weight:600;font-family:"Bricolage Grotesque"}
.tah-page .js .reveal{opacity:0;transform:translateY(24px)}
.tah-page .reveal{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.tah-page .reveal.in{opacity:1;transform:none}
.tah-page .js .stagger>*{opacity:0;transform:translateY(18px)}
.tah-page .stagger>*{transition:opacity .65s var(--ease),transform .65s var(--ease)}
.tah-page .stagger.in>*{opacity:1;transform:none}
.tah-page .stagger.in>*:nth-child(1){transition-delay:.04s}
.tah-page .stagger.in>*:nth-child(2){transition-delay:.1s}
.tah-page .stagger.in>*:nth-child(3){transition-delay:.16s}
.tah-page .stagger.in>*:nth-child(4){transition-delay:.22s}
.tah-page .stagger.in>*:nth-child(5){transition-delay:.28s}
.tah-page .stagger.in>*:nth-child(6){transition-delay:.34s}
.tah-page .stagger.in>*:nth-child(7){transition-delay:.4s}
@media(max-width:960px){
.tah-page .hero-grid{grid-template-columns:1fr;gap:44px}
.tah-page .dash{max-width:480px}
.tah-page .faq-grid, .tah-page .hub-grid{grid-template-columns:1fr;gap:30px}
.tah-page .svc-grid, .tah-page .steps{grid-template-columns:repeat(2,1fr)}
.tah-page .foot-grid{grid-template-columns:1fr 1fr}
.tah-page .faq-aside{position:static}
}
@media(max-width:640px){
.tah-page .wrap{padding:0 20px}
.tah-page .nav-links, .tah-page .nav-cta .btn{display:none}
.tah-page .menu-btn{display:flex}
.tah-page .sec{padding:60px 0}
.tah-page .trust{padding:54px 0}
.tah-page .moment .wrap{padding:64px 20px}
.tah-page .svc-grid, .tah-page .steps{grid-template-columns:1fr}
.tah-page .foot-grid{grid-template-columns:1fr}
.tah-page .hero-cta .btn{flex:1;justify-content:center}
.tah-page .convert-inner{padding:54px 22px}
}
@media(prefers-reduced-motion:reduce){
.tah-page *{animation:none!important;transition:none!important}
.tah-page .js .reveal, .tah-page .js .stagger>*{opacity:1;transform:none}
.tah-page .js .bars i{transform:scaleY(1)}
}
.tah-page .person .person-how{margin-top:20px;background:var(--forest);border-radius:14px;padding:16px 20px;display:flex;flex-direction:column;gap:12px}
.tah-page .person .person-how div{display:flex;gap:11px;font-size:14px;align-items:flex-start;color:#dcecd6;line-height:1.5}
.tah-page .person .person-how svg{flex:none;margin-top:2px;color:var(--lime)}


/* ---- pages-native.css ---- */
/* ============================================================================
   THE ACCOUNTS HUB — NATIVE-WIDGET DOM base for interior .tah-page rebuilds
   ----------------------------------------------------------------------------
   The interior pages (About/FAQs/Privacy/Get-a-Quote) are built with NATIVE
   Elementor Free widgets (Heading/Text-Editor/Icon-List/Accordion/Button/Image)
   inside Containers carrying the mockup's class names, so the mockup layout CSS
   (pages-shared + per-page parts) keeps working against the native DOM. This
   file neutralises Elementor's container/widget chrome and sets the shared
   native-DOM resets. Loads AFTER pages-shared and BEFORE the per-page parts, so
   any page-specific native rule (about-page.css etc.) still overrides it.

   Mirrors the proven recipe used for the Services page (services-page.css).
   ============================================================================ */

/* Elementor container defaults: kill padding/gap so mockup .wrap/.sec spacing governs */
.tah-page .e-con{padding:0;--padding-block-start:0px;--padding-block-end:0px;--padding-inline-start:0px;--padding-inline-end:0px;--gap:0px}
.tah-page .elementor-widget{margin:0}
.tah-page .elementor-widget:not(:last-child){margin-bottom:0}

/* Native Heading renders a real <hN class="elementor-heading-title"> — reset its
   margin; colour already inherits via pages-overrides. */
.tah-page .elementor-heading-title{margin:0}

/* Native Text-Editor emits bare <p> (NO .elementor-widget-container wrapper on the
   text) — zero the default margins; per-page CSS restores intended spacing. */
.tah-page .elementor-widget-text-editor p{margin:0}

/* Native Icon-List DOM: .elementor-icon-list-items > .elementor-icon-list-item >
   (.elementor-icon-list-icon i + .elementor-icon-list-text). Base reset only —
   per-page parts set gaps/columns/colours. */
.tah-page .elementor-icon-list-items{margin:0;padding:0;list-style:none}
.tah-page .elementor-icon-list-item{padding:0!important;margin:0;display:flex;gap:10px;align-items:flex-start}
.tah-page .elementor-icon-list-icon{flex:none;margin-top:3px;width:auto}
.tah-page .elementor-icon-list-icon i{color:var(--green-700)}
.tah-page .elementor-icon-list-item:hover .elementor-icon-list-text{color:inherit}

/* Elementor 4.2 ignores flex_direction on nested containers — force the common
   structural directions; per-page parts add their own. Column is the default;
   these are the row exceptions shared across interior pages. */
.tah-page .hero-cta,.tah-page .convert .hero-cta{flex-direction:row!important;flex-wrap:wrap;align-items:center}

/* Widget-wrapper class collision (found 2026-07-23): mock layout classes land on the icon-list
   WIDGET wrapper div; scoped mock rules then grid/flex the wrapper and the UL collapses.
   Neutralize the wrapper ONLY when the class sits on a widget; ULs carry the real layout. */
.tah-page .elementor-widget-icon-list.aud-list,
.tah-page .elementor-widget-icon-list.phil-list,
.tah-page .elementor-widget-icon-list.faq-list,
.tah-page .elementor-widget-icon-list.assure-row,
.tah-page .elementor-widget-icon-list.clarity-grid{display:block!important}
.tah-page .assure-row .elementor-icon-list-items{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:26px;padding:0;list-style:none}
.tah-page .assure-row .elementor-icon-list-item{padding:0!important;margin:0}


/* ---- about-page.css ---- */
/* THE ACCOUNTS HUB — about page-specific styles (U6 rewrite).
   Source of truth: prototype/pages/about.html inline <style> (verbatim values) +
   prototype/assets/site.css shared component rules (trust/svc — read-only elsewhere,
   NOT duplicated here except where a defensive About-only reinforcement is required).
   All rules scoped under .tah-page; page-rhythm reinforcements additionally scoped
   body.page-id-8 .tah-page (WordPress's default page-id body class for About, post id 8)
   so they cannot leak onto Services/FAQs/Quote/Privacy, which share several class
   names (.sec, .how, .convert, .svc, .trust-grid, .person, .badge-mini …). */

/* ---- hero (about.html lines 17-23, verbatim) ---- */
.tah-page .about-hero{position:relative;padding:66px 0 54px;overflow:hidden;background:
    radial-gradient(58% 52% at 84% 6%,rgba(166,225,90,.24),transparent 60%),
    radial-gradient(46% 42% at 4% 4%,rgba(47,158,68,.1),transparent 55%),
    linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%)}
.tah-page .about-hero .hero-copy{max-width:760px}
.tah-page .about-hero h1{font-size:clamp(36px,5vw,58px);font-weight:700;letter-spacing:-.032em}
.tah-page .about-hero p.lead{font-size:18.5px;color:var(--muted);max-width:56ch;margin-top:20px}

/* ---- positioning: single full-width clarity card (about.html lines 26-33) ---- */
.tah-page .clarity-card{position:relative;background:var(--forest);color:#e7f4ea;border-radius:22px;padding:36px;overflow:hidden;box-shadow:var(--shadow-md);margin-top:40px}
.tah-page .clarity-card .lbl{font-family:"IBM Plex Mono";font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);display:inline-flex;align-items:center;gap:8px;margin-bottom:18px}
.tah-page .clarity-card .lbl::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime)}
.tah-page .clarity-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;list-style:none}
.tah-page .clarity-grid li{display:flex;gap:10px;font-size:14.5px;align-items:flex-start}
.tah-page .clarity-grid li svg{flex:none;margin-top:2px;color:var(--lime)}
@media(max-width:960px){
.tah-page .clarity-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
.tah-page .clarity-grid{grid-template-columns:1fr}
}

/* ---- approach cards — 2x2, reuses sitewide .svc card (about.html lines 35-37) ---- */
.tah-page .approach-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:44px}
@media(max-width:720px){
.tah-page .approach-grid{grid-template-columns:1fr}
}

/* ---- audiences panel (about.html lines 39-47) ---- */
.tah-page .aud-panel{margin-top:38px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px}
.tah-page .aud-panel .kicker{margin-bottom:12px}
.tah-page .aud-panel h3{font-size:22px;font-weight:700}
.tah-page .aud-panel p{color:var(--muted);font-size:15px;margin-top:12px;max-width:56ch}
.tah-page .aud-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:2px 28px;margin-top:26px}
.tah-page .aud-list li{display:flex;gap:11px;align-items:flex-start;font-size:15px;font-weight:500;padding:13px 0;border-bottom:1px solid var(--line)}
.tah-page .aud-list li svg{flex:none;margin-top:2px;color:var(--green-700)}
@media(max-width:720px){
.tah-page .aud-list{grid-template-columns:1fr}
}

/* ---- service philosophy — dark band pill list (about.html lines 49-54) ---- */
.tah-page .phil-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:44px}
.tah-page .phil-item{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:18px 20px}
.tah-page .phil-item svg{flex:none;margin-top:2px;color:var(--lime)}
.tah-page .phil-item span{font-size:14.5px;color:#cfe6d4}
@media(max-width:720px){
.tah-page .phil-list{grid-template-columns:1fr}
}

/* ============================================================================
   NATIVE WIDGET DOM — About page rebuilt with native Elementor Free widgets.
   Containers carry the mockup's own class names (layout CSS above still
   applies verbatim to real <h1-4>/<p> tags and to plain wrapper <div>s); these
   rules map Elementor's native widget markup (Icon-List / Icon-Box / Button /
   Text-Editor bare <p> / Heading real <hN>) onto the mockup look. Same DOM
   notes as tah.css/services-page.css: NO `.elementor-widget-container` wrapper
   for heading/text/button/icon-list widgets.
   ============================================================================ */

/* ---- positioning section: was an inline `style="background:var(--bg-soft)"`
   on the mockup's <section> — moved to a class per brief (no inline styles). ---- */
.tah-page .sec.bg-soft{background:var(--bg-soft)}

/* ---- kicker (global `tah-kicker` system from tah.css) + on-dark variant ---- */
.tah-page .tah-kicker.on-dark .elementor-heading-title{color:var(--lime)}
.tah-page .tah-kicker.on-dark::before{box-shadow:0 0 0 4px rgba(166,225,90,.14)}
.tah-page .hero .tah-kicker{margin-bottom:20px}
.tah-page .person .p-body .tah-kicker{margin-bottom:12px}
.tah-page .convert-inner .tah-kicker{justify-content:center}

/* ---- hero lead paragraph: was combined selector `p.lead` (tag+class on the
   SAME element) — native Text-Editor puts the class on the wrapper div and the
   plain <p> underneath, so it needs a descendant selector instead. ---- */
.tah-page .about-hero .hero-copy .lead p{font-size:18.5px;color:var(--muted);max-width:56ch;margin-top:20px}

/* ---- trust / founder card: credential line + body copy live in separate
   Text-Editor widgets (`p-name` / `p-desc`) so each can be targeted precisely
   without one rule bleeding onto the other via a shared `.p-body p` selector.
   Values verbatim from site.css .person .p-name / .p-body p (lines ~153-154). ---- */
.tah-page .person .p-name p{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--green-700);margin-top:6px;letter-spacing:.02em}
.tah-page .person .p-desc p{color:var(--muted);font-size:15.5px;margin-top:14px;max-width:46ch}
/* nested container flex_direction is ignored in Elementor 4.2 — force the row */
.tah-page .badge-mini{flex-direction:row!important}
/* "View certificate" links: the two <a> tags are both inside ONE bare <p>
   emitted by the Text-Editor widget — target that <p> as the flex row
   (verbatim from site.css .verify: margin-top 8px, gap 16px, wrap). */
.tah-page .verify p{margin:8px 0 0!important;display:flex;gap:16px;flex-wrap:wrap}
/* AB-5 defensive reinforcement: badge card sizing/padding is already correct in
   pages-shared (.badge-mini padding:16px, img 62x62) — re-assert !important here,
   About-scoped only, in case the native Image widget's own wrapper/inline CSS
   (Elementor per-element generated CSS loads after theme stylesheets and can carry
   higher effective priority) inflates the card. If cards still read taller/looser
   than the mock after this, the residual cause is the Image widget's default
   sizing setting, not CSS — FLAG to orchestrator (see return notes). */
body.page-id-8 .tah-page .badge-mini{padding:16px!important}
body.page-id-8 .tah-page .badge-mini img{width:62px!important;height:62px!important;object-fit:contain!important}
/* AB-5: founder credential line 2-line wrap depends on the trust-grid 1.15fr/.85fr
   split (pages-shared, already verbatim) actually reaching the .person column at
   full width; content_width:"full" containers should honour it, but reinforce the
   grid ratio here defensively, About-scoped only. */
body.page-id-8 .tah-page .trust-grid{grid-template-columns:1.15fr .85fr!important}

/* ---- positioning: clarity-card icon-list (5-up check grid on dark forest).
   AB-1: strengthened with !important so the mock's one-row 5-col grid always
   wins over Elementor's own icon-list default flex/wrap behaviour, whatever the
   load-order/specificity of that default turns out to be on the live site. ---- */
.tah-page .clarity-card .clarity-grid .elementor-icon-list-items{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:18px;list-style:none;margin:0}
.tah-page .clarity-card .clarity-grid .elementor-icon-list-item{display:flex;gap:10px;font-size:14.5px;align-items:flex-start;color:inherit}
.tah-page .clarity-card .clarity-grid .elementor-icon-list-icon i{color:var(--lime);margin-top:2px}
@media(max-width:960px){
.tah-page .clarity-card .clarity-grid .elementor-icon-list-items{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:560px){
.tah-page .clarity-card .clarity-grid .elementor-icon-list-items{grid-template-columns:1fr!important}
}

/* ---- approach: 4 icon-box cards reuse the sitewide `.svc` card look (already
   defined in pages-shared.css: background/border/radius/padding/hover/left
   accent bar) — only the icon-box's own internal DOM needs mapping.
   AB-2: values are the mock's own `.svc .si` / `.svc h3` / `.svc p` declarations
   (site.css ~lines 184-187) re-targeted at the native icon-box selectors, with
   !important + explicit left-alignment because Elementor's icon-box widget
   defaults the wrapper to a centred layout (this is the "large black icon,
   centred text" regression seen live). ---- */
.tah-page .approach-grid .svc .elementor-icon-box-wrapper{display:flex!important;flex-direction:column!important;align-items:flex-start!important;text-align:left!important}
.tah-page .approach-grid .svc .elementor-icon-box-icon{width:50px!important;height:50px!important;border-radius:13px!important;background:var(--bg-mint)!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:0 0 20px!important;color:var(--green-700)!important;transition:background .36s,color .36s}
.tah-page .approach-grid .svc .elementor-icon-box-icon i{font-size:20px!important;line-height:1}
.tah-page .approach-grid .svc .elementor-icon-box-content{text-align:left!important}
.tah-page .approach-grid .svc .elementor-icon-box-title{margin:0!important;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:20px;color:var(--ink);text-align:left!important}
.tah-page .approach-grid .svc .elementor-icon-box-description{margin:10px 0 0!important;font-size:14px;color:var(--muted);text-align:left!important}
.tah-page .approach-grid .svc:hover .elementor-icon-box-icon{background:var(--forest)!important;color:var(--lime)!important}

/* ---- audiences: aud-list icon-list (2-col check rows). AB-3: strengthened
   with !important on the grid/border declarations so the mock's 2-col row
   layout with thin bottom borders always wins (live regression was rows
   collapsing to a single wrapped column with borders lost). ---- */
.tah-page .aud-panel .aud-list .elementor-icon-list-items{list-style:none;display:grid!important;grid-template-columns:1fr 1fr!important;gap:2px 28px;margin-top:26px}
.tah-page .aud-panel .aud-list .elementor-icon-list-item{display:flex;gap:11px;align-items:flex-start;font-size:15px;font-weight:500;padding:13px 0!important;border-bottom:1px solid var(--line)!important}
.tah-page .aud-panel .aud-list .elementor-icon-list-icon i{color:var(--green-700);margin-top:2px}
.tah-page .aud-panel .aud-list .elementor-icon-list-item:last-child{border-bottom:none!important}
@media(max-width:720px){
.tah-page .aud-panel .aud-list .elementor-icon-list-items{grid-template-columns:1fr!important}
}

/* ---- philosophy: phil-list icon-list (2-col cards, dark forest band; last
   item spans both columns exactly like the mockup's inline grid-column rule).
   AB-4: strengthened with !important on the grid columns/last-child span so
   pills keep the mock's 2-col width (narrow single-column pills were causing
   2-line text wrap live) plus explicit .sec/.sec-head bottom rhythm so the
   section doesn't collapse into the convert band (see AB-6 block below). ---- */
.tah-page .phil-list .elementor-icon-list-items{display:grid!important;grid-template-columns:1fr 1fr!important;gap:14px;margin-top:44px;list-style:none}
.tah-page .phil-list .elementor-icon-list-item{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:18px 20px!important}
.tah-page .phil-list .elementor-icon-list-icon i{color:var(--lime);margin-top:2px}
.tah-page .phil-list .elementor-icon-list-text{font-size:14.5px;color:#cfe6d4}
.tah-page .phil-list .elementor-icon-list-item:last-child{grid-column:1/-1!important}
@media(max-width:720px){
.tah-page .phil-list .elementor-icon-list-items{grid-template-columns:1fr!important}
}

/* ---- AB-6: global section rhythm for About specifically. pages-shared.css
   already ports `.sec{padding:92px 0}`, `.sec-head{max-width:660px}`, and
   `.convert{padding:26px}` / `.convert-inner{padding:74px 40px}` verbatim from
   site.css, and those values are correct — but Elementor's container reset in
   pages-native.css (`.e-con{padding:0;--padding-block-*:0px}`) shares the same
   specificity (two classes) and loads AFTER pages-shared, so on any section
   whose outer element is itself the `.e-con` (rather than a plain wrapper), the
   container reset can win the cascade and silently zero the section's own
   vertical padding — visually this reads as the philosophy (`.how`) section's
   bottom padding collapsing straight into the `.convert`/quote band, which is
   exactly the AB-6 symptom seen on About. Reassert the mock's own values with
   !important, scoped strictly to page-id-8 (About) via the WP body class so
   Services/FAQs/Quote/Privacy — which share `.sec`/`.how`/`.convert` — are
   never touched by this file. ---- */
body.page-id-8 .tah-page .sec{padding:92px 0!important}
body.page-id-8 .tah-page .sec-head{max-width:660px!important}
body.page-id-8 .tah-page .about-hero{padding:66px 0 54px!important}
body.page-id-8 .tah-page .convert{padding:26px!important}
body.page-id-8 .tah-page .convert-inner{padding:74px 40px!important}
@media(max-width:640px){
body.page-id-8 .tah-page .sec{padding:60px 0!important}
body.page-id-8 .tah-page .convert-inner{padding:54px 22px!important}
}

/* ---- closing CTA (quote): reuses the site's `.convert > .convert-inner`
   component verbatim (see build_services_native.py section 4); force column
   stacking + centring since Elementor ignores nested flex_direction, and map
   the assure-row icon-list onto the centred pill row. ---- */
.tah-page .convert-inner{flex-direction:column!important;align-items:center;text-align:center}
.tah-page .convert .assure-row .elementor-icon-list-items{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:26px;padding:0;list-style:none}
.tah-page .convert .assure-row .elementor-icon-list-item{padding:0!important;margin:0}
.tah-page .convert .assure-row .elementor-icon-list-icon i{color:var(--lime)}
.tah-page .convert .assure-row .elementor-icon-list-text{color:#cfe6d4;font-size:13.5px}

/* Orchestrator patch: Elementor renders FA as inline SVG — cover svg + .elementor-icon (i-only selectors miss) */
.tah-page .approach-grid .svc .elementor-icon-box-icon .elementor-icon{color:var(--green-700)!important;font-size:20px!important}
.tah-page .approach-grid .svc .elementor-icon-box-icon svg{width:20px!important;height:20px!important;fill:var(--green-700)!important}
.tah-page .clarity-card .clarity-grid .elementor-icon-list-icon svg{width:13px;height:13px;fill:var(--lime)}
.tah-page .aud-list .elementor-icon-list-icon svg,.tah-page .phil-list .elementor-icon-list-icon svg{width:13px;height:13px;fill:var(--green-700)}
/* Orchestrator patch 2: the icon-list WIDGET wrapper carries the mock class `clarity-grid`,
   so pages-shared's scoped mock rule turned the wrapper itself into the 5-col grid and the UL
   collapsed into one track. Neutralize the wrapper; the UL is the real grid. */
.tah-page .clarity-card .clarity-grid{display:block!important}
.tah-page .clarity-card .clarity-grid .elementor-icon-list-items{width:100%}

/* ============================================================================
   CLARITY-CARD ICON ALIGNMENT FIX (2026-07-31, second attempt)
   ----------------------------------------------------------------------------
   First attempt only equalised line-heights and looked correct — but I verified
   it on the ONE item that wraps to two lines, where the bug happens to cancel
   out. On the single-line items the check still sat 11px high.

   Real cause: Elementor gives `.elementor-icon-list-text` an explicit
   `align-self:center` while the icon inherits `flex-start`. On a two-line item
   the row height equals the text height so centred == flex-start and they agree;
   on a one-line item the text gets pushed down and the icon does not.

   Fix: pin BOTH to flex-start, give the icon a box exactly one text line-height
   tall, and centre the glyph inside it. The check then optically centres on the
   first line whether the label wraps or not.
   ============================================================================ */
.tah-page .clarity-card .clarity-grid .elementor-icon-list-item{
  display:flex!important; align-items:flex-start!important; gap:10px;
}
.tah-page .clarity-card .clarity-grid .elementor-icon-list-text{
  align-self:flex-start!important;
  line-height:1.5!important;
  display:block;
}
.tah-page .clarity-card .clarity-grid .elementor-icon-list-icon{
  align-self:flex-start!important;
  display:inline-flex!important; align-items:center; justify-content:center;
  height:1.5em!important; min-height:1.5em; width:auto; flex:none;
  margin-top:0!important; padding:0!important;
}
.tah-page .clarity-card .clarity-grid .elementor-icon-list-icon i,
.tah-page .clarity-card .clarity-grid .elementor-icon-list-icon svg{
  margin-top:0!important; display:block; line-height:1;
}


/* ---- faqs-page.css ---- */
/* THE ACCOUNTS HUB — faqs page-specific styles (auto-scoped under .tah-page from mockup inline <style>) */
.tah-page .nav-links a.active, .tah-page .drawer-panel a.active{color:var(--ink)}
.tah-page .nav-links a.active::after{width:100%}
.tah-page .page-hero{position:relative;padding:60px 0 54px;overflow:hidden;background:
    radial-gradient(58% 60% at 88% 0%,rgba(166,225,90,.22),transparent 60%),
    radial-gradient(40% 40% at 2% 10%,rgba(47,158,68,.1),transparent 55%),
    linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%)}
.tah-page .page-hero .ph-inner{max-width:760px}
.tah-page .page-hero h1{font-size:clamp(36px,5vw,58px);font-weight:700;letter-spacing:-.035em;margin-top:16px}
.tah-page .page-hero p.lead{font-size:17.5px;color:var(--muted);max-width:56ch;margin-top:20px}
.tah-page .page-hero .hero-cta{margin-top:28px}
.tah-page .page-hero .breadcrumb{font-family:"IBM Plex Mono";font-size:11.5px;letter-spacing:.08em;color:var(--muted-2);margin-bottom:2px}
.tah-page .page-hero .breadcrumb a{color:var(--muted-2);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.tah-page .page-hero .breadcrumb a:hover{color:var(--green-700);border-color:var(--line-2)}
.tah-page .faqs-body{background:#fff}
.tah-page .faqs-layout{display:grid;grid-template-columns:.74fr 1.26fr;gap:48px;align-items:start}
.tah-page .faqs-aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px}
.tah-page .faqs-aside .faq-aside{padding:28px}
.tah-page .faqs-toc{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 24px}
.tah-page .faqs-toc .tt{font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px}
.tah-page .faqs-toc ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.tah-page .faqs-toc a{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500;color:var(--muted);padding:8px 0;border-bottom:1px solid var(--line);transition:color .2s,padding-left .2s}
.tah-page .faqs-toc li:last-child a{border-bottom:none}
.tah-page .faqs-toc a:hover{color:var(--green-700);padding-left:4px}
.tah-page .faqs-toc a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--line-2);flex:none;transition:background .2s}
.tah-page .faqs-toc a:hover::before{background:var(--green)}
.tah-page .faq-groups{display:flex;flex-direction:column;gap:52px}
.tah-page .faq-group{scroll-margin-top:96px}
.tah-page .faq-group .kicker{margin-bottom:16px}
.tah-page .faq-group .faq-list{display:flex;flex-direction:column;gap:12px}
@media(max-width:960px){
.tah-page .faqs-layout{grid-template-columns:1fr;gap:30px}
.tah-page .faqs-aside{position:static}
}

/* ============================================================================
   NATIVE WIDGET DOM — FAQs page rebuilt with native Elementor Free widgets.
   (Heading/Text-Editor/Icon-List/Button/Toggle inside Containers carrying the
   mockup's class names — the rules above still apply; these map the native
   markup shapes onto the same look. The per-category FAQ widget carries class
   `tah-faq` — same class name the home page's accordion uses in parts/faq.css,
   but this page's widgets are the Toggle type with their own DOM; see the
   TOGGLE block below, not parts/faq.css.)
   ============================================================================ */

/* Text-Editor renders a bare <p> with NO element-level class of its own — the
   css class lands on the ancestor wrapper, so fix the compound `p.lead`
   selector (mockup-only) with a descendant one that matches the native DOM. */
.tah-page .page-hero .lead p{font-size:17.5px;color:var(--muted);max-width:56ch;margin-top:20px}
.tah-page .page-hero .breadcrumb p{margin:0}

/* Structural direction — Elementor 4.2 ignores nested container flex_direction;
   force it here (mirrors the fix already used in pages-native.css/services-page.css). */
.tah-page .ph-inner{display:flex;flex-direction:column!important}
.tah-page .faqs-layout{display:grid!important;grid-template-columns:.74fr 1.26fr!important;gap:48px!important;align-items:start!important}
.tah-page .faqs-aside{display:flex!important;flex-direction:column!important}
.tah-page .faq-aside{display:flex!important;flex-direction:column!important}
.tah-page .faqs-toc{display:flex!important;flex-direction:column!important}
.tah-page .faq-groups{display:flex!important;flex-direction:column!important;gap:52px!important}
.tah-page .faq-group{display:flex!important;flex-direction:column!important}
.tah-page .convert-inner{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center}
@media(max-width:960px){
.tah-page .faqs-layout{grid-template-columns:1fr!important}
}

/* faq-group category kicker spacing (heading widget replaces the mockup <span>) */
.tah-page .faq-group .kicker{margin-bottom:16px}
.tah-page .faq-group .tah-faq{margin-top:0}

/* faqs-toc: category jump list kept as one rich-text list (still a real <ul><li><a>,
   so every existing `.faqs-toc a` / `::before` dot rule above keeps matching). */
.tah-page .faqs-toc .tt p{font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px}

/* faq-aside help card: native Heading/Text/Button */
.tah-page .faq-aside h3.elementor-heading-title{font-size:22px;font-weight:700}
.tah-page .faq-aside p{color:var(--muted);font-size:15px;margin-top:12px}
.tah-page .faq-aside .tah-btn{margin-top:20px}

/* kicker heading — native <h6> resets browser UA defaults so it inherits the pill look
   already defined on the ancestor `.kicker` div above (font-family/color already cascade
   via pages-overrides.css's `color:inherit` + h6 being excluded from the h1-h4 font rule) */
.tah-page .kicker .elementor-heading-title{font-size:inherit;font-weight:inherit;font-family:inherit;letter-spacing:inherit;text-transform:inherit;line-height:inherit}

/* convert band assurance row — native Icon-List (mirrors services-page.css treatment) */
.tah-page .assure-row .elementor-icon-list-items{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:26px;padding:0}
.tah-page .assure-row .elementor-icon-list-item{padding:0!important;margin:0;align-items:center}
.tah-page .assure-row .elementor-icon-list-icon i{color:var(--lime);font-size:13px}
.tah-page .assure-row .elementor-icon-list-text{color:#cfe6d4;font-size:13.5px}

/* native heading colours (pages-overrides.css sets color:inherit; set the base ink here) */
.tah-page .page-hero .elementor-heading-title,
.tah-page .faqs-body .elementor-heading-title{color:var(--ink)}
.tah-page .convert .elementor-heading-title{color:#eafff0}
.tah-page .convert .kicker.on-dark .elementor-heading-title{color:var(--lime)}

/* ------------------------------------------------------------- TOGGLE (per-category FAQ) */
/* FQ-1: widgets converted accordion -> toggle in post meta (each item independently
   openable, all start closed — Elementor's accordion.js forces the first item active on
   load; toggle.js does not). Native DOM changes shape with the widget type: toggle renders
   .elementor-toggle > .elementor-toggle-item > .elementor-tab-title (+ .elementor-toggle-icon)
   + .elementor-tab-content — DIFFERENT class names from accordion's .elementor-accordion-item
   / .elementor-accordion-icon / .elementor-accordion-title, so the `.tah-faq` accordion rules
   in parts/faq.css (home page's own FAQ section, untouched — not this page's file) no longer
   match this page's widgets at all. The mock's shared `.faq-list`/`.faq`/`.faq summary`/`.pm`/
   `.fa` declarations (site.css lines 261-268, already globally pre-ported onto the *mock's*
   `<details class="faq">` markup in pages-shared.css but inert here since that markup doesn't
   exist in the native rebuild) are ported again below, verbatim, onto the actual toggle DOM. */

/* FQ-2 — item spacing: each answer its own rounded bordered card, 12px gap between items
   (mock `.faq-list{gap:12px}` + `.faq{border-radius:14px;border:1px solid var(--line)}`) */
.tah-page .tah-faq .elementor-toggle{display:flex;flex-direction:column;gap:12px}
.tah-page .tah-faq .elementor-toggle-item{
  border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;
  transition:border-color .3s,box-shadow .3s;
}
.tah-page .tah-faq .elementor-toggle-item:has(.elementor-tab-title.elementor-active),
.tah-page .tah-faq .elementor-toggle-item:has(.elementor-tab-title[aria-expanded="true"]){
  border-color:var(--line-2);box-shadow:var(--shadow-sm);
}

/* FQ-3 — question row: layout/typography ported from `.faq summary`; icon reordered to the
   end (native default is start-aligned) to match the mock's right-aligned badge */
.tah-page .tah-faq .elementor-tab-title{
  list-style:none;cursor:pointer;padding:19px 22px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;font-weight:600;font-size:16px;min-height:44px;
  outline:none;
}
.tah-page .tah-faq .elementor-toggle-title{
  order:1;flex:1 1 auto;text-align:left;color:var(--ink);text-decoration:none;
  font-family:"Figtree",sans-serif;font-weight:600;font-size:16px;
}

/* FQ-3 — icon: mock's `.pm` is a hand-drawn inline-SVG plus inside a circular badge (closed:
   mint background/green plus; open: forest background/lime plus, rotated 45deg — a plus
   rotated 45deg reads as an X, so no separate "minus" glyph is needed). The toggle widget has
   no equivalent literal SVG slot, so the badge/colour/size/rotation are ported verbatim onto
   `.elementor-toggle-icon` and the actual FA glyph Elementor renders underneath is swapped for
   a CSS-drawn "+" (same non-literal substitution technique already used for this exact icon on
   the home page's accordion, parts/faq.css `.elementor-icon-plus:after{content:"+"}`). */
.tah-page .tah-faq .elementor-toggle-icon{
  order:2;width:26px;height:26px;border-radius:50%;background:var(--bg-mint);color:var(--green-700);
  display:grid;place-items:center;flex:none;margin:0!important;transition:transform .3s,background .3s;
}
.tah-page .tah-faq .elementor-toggle-icon-closed,
.tah-page .tah-faq .elementor-toggle-icon-opened{display:none!important}
.tah-page .tah-faq .elementor-toggle-icon::after{content:"+";font-size:16px;line-height:1;font-weight:400}
.tah-page .tah-faq .elementor-tab-title.elementor-active .elementor-toggle-icon,
.tah-page .tah-faq .elementor-tab-title[aria-expanded="true"] .elementor-toggle-icon{
  transform:rotate(45deg);background:var(--forest);color:var(--lime);
}

/* FQ-3 — answer: typography/padding ported from `.faq .fa`; the WYSIWYG `tab_content` wraps
   its text in a native <p> (the mock's plain text has none) — margin reset only, no new
   values introduced. */
.tah-page .tah-faq .elementor-tab-content{padding:0 22px 20px;color:var(--muted);font-size:14.5px}
.tah-page .tah-faq .elementor-tab-content p{margin:0;color:inherit;font-size:inherit;font-family:"Figtree",sans-serif}

/* Orchestrator FAQ polish (mock-verbatim): hero rhythm + aside gap */
.tah-page .page-hero .ph-inner{max-width:760px}
.tah-page .page-hero h1.elementor-heading-title{font-size:clamp(36px,5vw,58px);font-weight:700;letter-spacing:-.035em;margin-top:16px}
.tah-page .page-hero .lead,.tah-page .page-hero .lead p{font-size:17.5px;color:var(--muted);max-width:56ch;margin-top:20px}
.tah-page .page-hero .lead p{margin-top:0}
.tah-page .page-hero .hero-cta{margin-top:28px}
.tah-page .page-hero .breadcrumb,.tah-page .page-hero .breadcrumb p{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.08em;color:var(--muted-2);margin-bottom:2px}
.tah-page .page-hero .tah-kicker{margin-bottom:0}
.tah-page .faqs-aside{gap:18px}

/* Group 1 is an accordion widget (mock's first item open) — mirror the toggle skin onto accordion DOM */
.tah-page .tah-faq .elementor-accordion{display:flex;flex-direction:column;gap:12px}
.tah-page .tah-faq .elementor-accordion-item{border:1px solid var(--line)!important;border-radius:14px;background:#fff;overflow:hidden}
.tah-page .tah-faq .elementor-accordion-item .elementor-tab-title{display:flex;align-items:center;gap:12px;padding:15px 18px;font-weight:600;font-size:15px;border:0}
.tah-page .tah-faq .elementor-accordion-item .elementor-tab-content{border:0;padding:0 18px 16px;font-size:14.5px;color:var(--muted);line-height:1.55}
.tah-page .tah-faq .elementor-accordion-item .elementor-tab-content p{margin:0}
.tah-page .tah-faq .elementor-accordion-icon{order:2;margin:0 0 0 auto!important;float:none!important;width:26px;height:26px;border-radius:50%;background:var(--bg-mint);color:var(--green-700);display:grid;place-items:center}
.tah-page .tah-faq .elementor-accordion-icon-closed,.tah-page .tah-faq .elementor-accordion-icon-opened{display:none!important}
.tah-page .tah-faq .elementor-accordion-icon::after{content:"+";font-size:16px;line-height:1;font-weight:500}
.tah-page .tah-faq .elementor-tab-title.elementor-active .elementor-accordion-icon{background:var(--forest);color:var(--lime)}
.tah-page .tah-faq .elementor-tab-title.elementor-active .elementor-accordion-icon::after{content:"–"}

/* ============================================================================
   FAQ PAGE — BREATHING ROOM, STICKY TOC, LIVE ACCORDION (2026-07-31)
   ----------------------------------------------------------------------------
   Three issues: the hero ran straight into the FAQ grid with no gap; the
   "Jump to a section" card scrolled away so you lost your place; and the
   accordion rows were inert — no hover, no visible open state ("faqs are dead").
   ============================================================================ */

/* ---- 1. space between hero and the grid ------------------------------- */
/* The real structure is `.page-hero` followed immediately by `.sec.faqs-body`,
   which carried padding-top:0 — so the two ran straight into each other. */
.tah-page .faqs-body{ padding-top:72px!important }
.tah-page .page-hero{ padding-bottom:64px }

/* ---- 2. "Jump to a section" stays with you ---------------------------- */
/* NOTE: do NOT make `.faqs-toc` itself sticky. Its parent `.faqs-aside` is
   already sticky by design, and a sticky child can only travel inside its
   parent's box — which here is barely taller than the card, so it would stick
   for ~0px while also fighting the parent. The whole aside sticks instead, and
   the TOC rides along with it. */
.tah-page .faqs-aside{ align-self:start; z-index:20 }

/* active link — mirrors the services jump-nav idiom */
.tah-page .faqs-toc a.is-active{
  color:var(--forest); font-weight:600; padding-left:6px;
}
.tah-page .faqs-toc a.is-active::before{
  background:var(--green);
  box-shadow:0 0 0 3px rgba(166,225,90,.30);
}
.tah-page .faqs-toc a:focus-visible{ outline:2px solid var(--green); outline-offset:2px }

/* ---- 3. accordion rows: hover, open state, travelling edge ------------ */
.tah-page .elementor-accordion-item,
.tah-page .elementor-toggle-item{
  position:relative; isolation:isolate;
  border-radius:14px; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease),
             border-color .3s var(--ease);
}
.tah-page .elementor-accordion-item:hover,
.tah-page .elementor-toggle-item:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px -20px rgba(14,61,36,.55);
  border-color:rgba(166,225,90,.75)!important;
}
.tah-page .elementor-tab-title{ transition:color .25s var(--ease), background .25s var(--ease) }
.tah-page .elementor-tab-title:hover{ color:var(--green-700) }

/* OPEN row — travelling lime edge + soft halo, so the one you've opened is
   unmistakable. Elementor marks the open tab with `.elementor-active`. */
.tah-page .elementor-accordion-item:has(.elementor-tab-title.elementor-active),
.tah-page .elementor-toggle-item:has(.elementor-tab-title.elementor-active){
  box-shadow:0 16px 34px -22px rgba(14,61,36,.5), 0 0 0 3px rgba(166,225,90,.22);
}
.tah-page .elementor-accordion-item:has(.elementor-tab-title.elementor-active)::after,
.tah-page .elementor-toggle-item:has(.elementor-tab-title.elementor-active)::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
  background:conic-gradient(from var(--tah-ang),
      transparent 0deg, transparent 246deg,
      rgba(166,225,90,.55) 294deg, var(--tah-lime-bright) 328deg,
      rgb(214,255,150) 344deg, var(--tah-lime-bright) 353deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; z-index:3;
  animation:tahRingSpin 4.5s linear infinite;
}
/* fallback for browsers without :has() — JS mirrors the state onto the row */
.tah-page .elementor-accordion-item.tah-open,
.tah-page .elementor-toggle-item.tah-open{
  box-shadow:0 16px 34px -22px rgba(14,61,36,.5), 0 0 0 3px rgba(166,225,90,.22);
}

@media(max-width:960px){
  .tah-page .faqs-toc{ position:static }
}
@media(prefers-reduced-motion:reduce){
  .tah-page .elementor-accordion-item::after,
  .tah-page .elementor-toggle-item::after{ animation:none!important }
  .tah-page .elementor-accordion-item:hover,
  .tah-page .elementor-toggle-item:hover{ transform:none!important }
}


/* ---- privacy-terms-page.css ---- */
/* THE ACCOUNTS HUB — privacy-terms page-specific styles (U6 clean rewrite).
   Every rule below is a verbatim port of prototype/pages/privacy-terms.html's inline
   <style> block (lines 15-44), scoped under .tah-page and re-pointed at the native
   Elementor DOM (see KIT.md "Native rendered DOM" + P-E3). No class names invented —
   all selectors below (tah-page, hero--legal, tah-kicker, legal-sec, toc-wrap, toc,
   toc-list, toc-list--sep, prose-main, draft-note, prose, legal-h2, legal-h2--first,
   legal-sub, prose-list) are the actual css_classes present in post 10's
   _elementor_data (verified via WP-CLI dump). Site-wide vars/.kicker/.lead/.hero
   base rules live in pages-shared.css (untouched) — only the page's own inline
   <style> block is re-implemented here. */

/* ---- prose column (mock lines 15-23) ---- */
.tah-page .prose{max-width:72ch;margin:0 auto;color:var(--ink);line-height:1.7}
.tah-page .prose h2{font-family:"Bricolage Grotesque";font-size:clamp(26px,3vw,32px);font-weight:700;letter-spacing:-.025em}
/* Native rebuild wraps each h2 in its own .legal-h2 container (so Elementor can carry
   the anchor id via settings._element_id) — that breaks :first-of-type (each h2 becomes
   the "only" h2 among its own container's children), so the border/spacing that used to
   live on `h2` / `h2:first-of-type` (mock lines 16-17) is carried by the wrapper instead. */
.tah-page .prose .legal-h2{margin:56px 0 16px;padding-top:40px;border-top:1px solid var(--line);margin-top:48px}
.tah-page .prose .legal-h2--first{border-top:none;margin-top:0;padding-top:0}
.tah-page .prose h3{font-family:"Bricolage Grotesque";font-size:18px;font-weight:600;margin:28px 0 12px;letter-spacing:-.015em}
.tah-page .prose p{margin:14px 0;color:var(--muted);font-size:15.5px}
.tah-page .prose ul{list-style:none;padding:0;margin:14px 0}
.tah-page .prose li{margin:10px 0 10px 24px;position:relative;color:var(--muted);font-size:15.5px}
.tah-page .prose li::before{content:"–";position:absolute;left:0;color:var(--green-700)}
.tah-page .prose strong{font-weight:600;color:var(--ink)}

/* ---- TOC sidebar grid (mock lines 26-33, 41-44) ---- */
.tah-page .toc-wrap{display:grid;grid-template-columns:220px 1fr;gap:40px;margin-top:32px}
.tah-page .toc{position:sticky;top:110px;height:fit-content;background:var(--bg-soft);border-radius:16px;padding:24px;font-size:14px}
.tah-page .toc h4{font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-weight:600}
@media(max-width:960px){
.tah-page .toc-wrap{grid-template-columns:1fr;gap:30px}
.tah-page .toc{position:static;background:transparent;border-radius:0;padding:0}
}

/* TOC is a native linked Icon-List (two lists — Privacy group + Terms group, anchoring
   to each legal-sub's _element_id) rather than a raw <ul>/<a> (mock lines 29-33).
   pages-native.css forces `display:flex` + a check icon on all site icon-lists — undo
   both and hide the icon so the text row alone carries the mock's border-left/padding
   treatment. IMPORTANT: apply the row's box model (padding/border-left/transition) to
   .elementor-icon-list-link ONLY, not also to the nested .elementor-icon-list-text —
   the text span sits inside the link, so styling both would double the padding and
   offset the border-left instead of the mock's single 6px/10px row. */
.tah-page .toc .toc-list{width:100%}
.tah-page .toc .toc-list .elementor-icon-list-items{display:flex;flex-direction:column;gap:0;margin:0;padding:0}
.tah-page .toc .toc-list .elementor-icon-list-item{margin:0;padding:0!important;display:block}
.tah-page .toc .toc-list .elementor-icon-list-icon{display:none}
.tah-page .toc .toc-list .elementor-icon-list-link{
    color:var(--muted);text-decoration:none;display:block;padding:6px 0 6px 10px;
    border-left:2px solid transparent;transition:color .2s,border-color .2s}
.tah-page .toc .toc-list .elementor-icon-list-text{color:inherit;font-size:14px}
.tah-page .toc .toc-list .elementor-icon-list-link:hover{color:var(--ink);border-left-color:var(--green)}
.tah-page .toc .toc-list .elementor-icon-list-link.active{color:var(--forest);border-left-color:var(--forest);font-weight:600}
.tah-page .toc .toc-list.toc-list--sep{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}

/* ---- main column layout (mock line 35) ---- */
.tah-page .prose-main{display:flex;flex-direction:column}

/* ---- draft note (mock lines 38-39) ---- */
.tah-page .draft-note{background:var(--bg-mint);border:1px solid var(--line);border-radius:14px;padding:16px 18px;font-size:14px;color:var(--muted);display:flex;align-items:flex-start;gap:12px;margin-bottom:32px}
.tah-page .draft-note::before{content:"⚠";flex:none;font-size:18px;color:var(--green-700)}

/* ============================================================================
   NATIVE WIDGET DOM — Privacy & Terms rebuilt with native Elementor Free widgets
   (Heading / Text-Editor / Icon-List inside Containers). The rules above still
   govern layout via the mockup's original class names; these rules map the
   native widget markup onto that look.
   ============================================================================ */

/* ---- hero (mock: <section class="hero" style="padding:66px 0 46px">) ---- */
.tah-page .hero.hero--legal{padding:66px 0 46px}
.tah-page .hero.hero--legal h1{font-size:clamp(40px,5.6vw,56px)}
.tah-page .hero.hero--legal .lead p{font-size:18.5px;color:var(--muted);max-width:60ch;margin-top:24px}

/* ---- kicker heading (native Heading = real <h6>, styled to read as a kicker).
   Base .kicker (pages-shared.css) never applies to the nested <h6> itself since
   font-size/weight are set on the wrapping div and h6's UA-stylesheet defaults
   (bold, own font-size) win over inherited values — so tah-kicker is defined
   fully here, self-contained, mirroring the proven Services-page pattern. ---- */
.tah-page .tah-kicker{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500;
    letter-spacing:.15em;text-transform:uppercase;color:var(--green-700);display:inline-flex;
    align-items:center;gap:9px;margin-bottom:20px}
.tah-page .tah-kicker::before{content:"";width:15px;height:15px;border-radius:5px;flex:none;
    background:linear-gradient(135deg,var(--lime),var(--green));box-shadow:0 0 0 4px var(--lime-soft)}
.tah-page .tah-kicker .elementor-heading-title{font-size:12px;font-weight:500;letter-spacing:.15em;
    text-transform:uppercase;color:inherit;font-family:inherit}

/* ---- legal section wrapper (mock: <section style="padding:54px 0">) ---- */
.tah-page .legal-sec{padding:54px 0}

/* ---- legal body: prose paragraphs are real <p> nested inside .legal-sub wrapper
   containers — the base `.tah-page .prose p` rule above still matches them
   (descendant selector, wrapper depth is irrelevant), so no extra rule is needed
   for text. Native Icon-List for the two in-copy <ul> lists (pp-use,
   tos-responsibilities): the base `.tah-page .prose li` rule also still matches the
   icon-list's real <li> tags, but pages-native.css forces `display:flex` + a check
   icon on all icon-lists site-wide, which fights the prose look — override both back
   to the plain hanging-dash list style the mockup used (mock li::before, line 22). ---- */
.tah-page .prose-list .elementor-icon-list-items{margin:14px 0;padding:0}
.tah-page .prose-list .elementor-icon-list-item{display:block;padding:0!important;margin:10px 0 10px 24px;position:relative}
.tah-page .prose-list .elementor-icon-list-icon{display:none}
.tah-page .prose-list .elementor-icon-list-item::before{content:"\2013";position:absolute;left:-24px;color:var(--green-700)}
.tah-page .prose-list .elementor-icon-list-text{color:var(--muted);font-size:15.5px}

/* Elementor 4.2.0 ignores flex_direction on nested containers — force the
   structural directions explicitly (mirrors the fix used on the Services page). */
.tah-page .hero--legal .wrap,.tah-page .hero--legal .reveal,.tah-page .prose-main,
.tah-page .prose,.tah-page .legal-sub,.tah-page .legal-h2,.tah-page .toc,
.tah-page .legal-sec .wrap,.tah-page .draft-note{flex-direction:column!important}

/* Orchestrator final polish (mock-verbatim values) */
.tah-page .prose-main h2.elementor-heading-title,.tah-page .prose h2{font-size:clamp(26px,3vw,32px);font-weight:700;letter-spacing:-.025em;margin:48px 0 16px;padding-top:40px;border-top:1px solid var(--line)}
.tah-page .prose-main h3.elementor-heading-title,.tah-page .prose h3{font-size:18px;font-weight:600;margin:28px 0 12px;letter-spacing:-.015em}
.tah-page .toc a,.tah-page .toc .elementor-icon-list-item a{color:var(--muted);text-decoration:none;display:block;padding:6px 0 6px 10px;border-left:2px solid transparent;transition:color .2s,border-color .2s}
.tah-page .toc a:hover{color:var(--ink);border-left-color:var(--green)}
.tah-page .draft-note{background:var(--bg-mint);border:1px solid var(--line);border-radius:14px;padding:16px 18px;font-size:14px;color:var(--muted);display:flex;align-items:flex-start;gap:12px;margin-bottom:32px}


/* ---- blog.css ---- */
/* ============================================================================
   THE ACCOUNTS HUB — BLOG INDEX (UNIT BLOG-W1)
   ----------------------------------------------------------------------------
   Ported VERBATIM (values unchanged) from the approved mockup's inline
   <style> block: prototype/pages/blog.html (UNIT BLOG-M1), sections:
   .page-hero / .blog-hero-meta, .blog-filter/.filter-pill, .featured*,
   .post-tag/.post-meta, .post-grid/.post-card*, .pagination/.page-pill.
   Everything is scoped under `.tah-blog` — this is a NATIVE child-theme
   template (home.php + category.php), NOT an Elementor page, so the mockup's
   own class names are reused as-is (no tah-* prefixing needed/possible here,
   there is no Elementor "Advanced > CSS Classes" step to route through).
   Card art uses CSS-only gradients/patterns (no images) with a per-category
   hue-rotate modifier for visual variety across the 7 categories.
   FLAG: not yet wired into tah.css — build/assemble.py's ORDER list needs a
   "blog" entry added by the orchestrator (see UNIT report FLAGS).
   ============================================================================ */

.tah-blog{
  --ink:#0c1c13;--forest:#0e3d24;--forest-deep:#092718;--green:#2f9e44;--green-600:#1f8a37;--green-700:#177a2f;
  --lime:#a6e15a;--lime-bright:#c2f06f;--lime-soft:#e6f7c9;
  --bg:#ffffff;--bg-soft:#f2f7ee;--bg-warm:#faf8f1;--bg-mint:#e7f2e1;
  --line:#e1ebdb;--line-2:#d3e2ca;--muted:#556a5c;--muted-2:#7f9184;
  --radius:20px;--shadow-sm:0 1px 2px rgba(14,61,36,.05),0 8px 24px -12px rgba(14,61,36,.14);
  --shadow-md:0 30px 60px -28px rgba(14,61,36,.35);--shadow-lg:0 44px 90px -40px rgba(9,39,24,.5);
  --shadow-lime:0 18px 40px -16px rgba(120,190,50,.55);--ease:cubic-bezier(.22,.61,.36,1);--maxw:1180px;
  font-family:"Figtree",system-ui,sans-serif;color:var(--ink);
}
.tah-blog h1,.tah-blog h2,.tah-blog h3,.tah-blog h4{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:600;line-height:1.03;letter-spacing:-.028em}
.tah-blog a{color:inherit;text-decoration:none}
.tah-blog .wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px;position:relative}
.tah-blog section{position:relative}

/* kicker (shared idiom, plain-text version — no Elementor heading wrapper here) */
.tah-blog .kicker{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--green-700);display:inline-flex;align-items:center;gap:9px}
.tah-blog .kicker::before{content:"";width:15px;height:15px;border-radius:5px;flex:none;
  background:linear-gradient(135deg,var(--lime),var(--green));box-shadow:0 0 0 4px var(--lime-soft)}

/* page hero — same recipe as faqs.html page-hero (verbatim from blog.html mockup) */
.tah-blog .page-hero{position:relative;padding:60px 0 50px;overflow:hidden;background:
  radial-gradient(58% 60% at 88% 0%,rgba(166,225,90,.22),transparent 60%),
  radial-gradient(40% 40% at 2% 10%,rgba(47,158,68,.1),transparent 55%),
  linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%)}
.tah-blog .page-hero .ph-inner{max-width:720px}
.tah-blog .page-hero h1{font-size:clamp(36px,5vw,58px);font-weight:700;letter-spacing:-.035em;margin-top:16px}
.tah-blog .page-hero p.lead{font-size:17.5px;color:var(--muted);max-width:58ch;margin-top:20px}
.tah-blog .page-hero .breadcrumb{font-family:"IBM Plex Mono";font-size:11.5px;letter-spacing:.08em;color:var(--muted-2);margin-bottom:2px}
.tah-blog .page-hero .breadcrumb a{color:var(--muted-2);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.tah-blog .page-hero .breadcrumb a:hover{color:var(--green-700);border-color:var(--line-2)}
.tah-blog .blog-hero-meta{margin-top:26px;display:flex;gap:22px;flex-wrap:wrap;font-family:"IBM Plex Mono";font-size:12px;color:var(--muted-2)}
.tah-blog .blog-hero-meta b{color:var(--green-700);font-weight:600}

/* filter pills — jumpnav idiom from services.html; REAL links here (category archives), not JS-static */
.tah-blog .blog-filter{background:#fff;border-bottom:1px solid var(--line);padding:20px 0}
.tah-blog .blog-filter .wrap{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tah-blog .blog-filter .bf-lbl{font-family:"IBM Plex Mono";font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);margin-right:2px}
.tah-blog .filter-pill{font-family:"Figtree";font-size:13.5px;font-weight:600;color:var(--muted);background:var(--bg-soft);
  border:1px solid var(--line);padding:9px 16px;border-radius:20px;transition:background .2s,color .2s,border-color .2s;cursor:pointer;min-height:44px;display:inline-flex;align-items:center}
.tah-blog .filter-pill:hover{background:var(--forest);color:#eafff0;border-color:var(--forest)}
.tah-blog .filter-pill.is-active{background:var(--forest);color:#eafff0;border-color:var(--forest)}
@media(max-width:640px){.tah-blog .blog-filter .wrap{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}.tah-blog .filter-pill{white-space:nowrap}}

/* featured post */
.tah-blog .featured-sec{background:var(--bg-soft);padding:64px 0 20px}
.tah-blog .featured{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-sm);
  display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch}
.tah-blog .feat-art{position:relative;min-height:280px;background:var(--forest);overflow:hidden;
  background-image:linear-gradient(rgba(166,225,90,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(166,225,90,.07) 1px,transparent 1px),
    radial-gradient(64% 90% at 82% 12%,rgba(166,225,90,.22),transparent 62%);
  background-size:30px 30px,30px 30px,100% 100%}
.tah-blog .feat-art .fa-kicker{position:absolute;left:28px;top:26px;font-family:"IBM Plex Mono";font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lime);display:flex;align-items:center;gap:8px}
.tah-blog .feat-art .fa-kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime)}
.tah-blog .feat-body{padding:40px 42px;display:flex;flex-direction:column;justify-content:center}
.tah-blog .feat-body .post-tag{margin-bottom:16px}
.tah-blog .feat-body h2{font-size:clamp(24px,2.9vw,32px);font-weight:700;letter-spacing:-.03em;line-height:1.12}
.tah-blog .feat-body h2 a:hover{color:var(--green-700)}
.tah-blog .feat-body p{color:var(--muted);font-size:15.5px;margin-top:16px;max-width:52ch}
.tah-blog .feat-body .post-meta{margin-top:20px}
.tah-blog .feat-body .feat-link{margin-top:24px;display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--green-700);font-size:15px;transition:gap .2s}
.tah-blog .feat-body .feat-link:hover{gap:12px}
@media(max-width:820px){.tah-blog .featured{grid-template-columns:1fr}.tah-blog .feat-art{min-height:170px}.tah-blog .feat-body{padding:32px 28px}}

/* shared chip + meta idiom for post cards */
.tah-blog .post-tag{font-family:"IBM Plex Mono";font-size:10.5px;color:var(--green-700);background:var(--bg-mint);
  padding:5px 11px;border-radius:20px;display:inline-flex;align-items:center}
.tah-blog .post-meta{font-family:"IBM Plex Mono";font-size:11.5px;color:var(--muted-2);display:flex;align-items:center;gap:8px}
.tah-blog .post-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted-2)}

/* section head (reused .sec/.sec-head idiom from site.css) */
.tah-blog .sec{padding:92px 0}
.tah-blog .sec-head{max-width:660px}
.tah-blog .sec-head h2{font-size:clamp(29px,3.6vw,44px);font-weight:700;margin-top:16px;letter-spacing:-.03em}
.tah-blog .sec-head p{color:var(--muted);font-size:17.5px;margin-top:16px}

/* post grid */
.tah-blog .blog-body{background:var(--bg-soft);padding:20px 0 92px}
.tah-blog .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.tah-blog .post-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .32s var(--ease),box-shadow .32s,border-color .32s}
.tah-blog .post-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent}
.tah-blog .post-card-art{height:108px;position:relative;overflow:hidden;background:var(--bg-mint);
  background-image:linear-gradient(rgba(23,122,47,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(23,122,47,.08) 1px,transparent 1px);
  background-size:22px 22px}
.tah-blog .post-card-art::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 14% 0%,rgba(166,225,90,.4),transparent 60%)}
.tah-blog .post-card-art i{position:absolute;right:16px;bottom:-14px;width:74px;height:74px;border-radius:16px;
  background:linear-gradient(150deg,var(--forest),var(--green));opacity:.9;transform:rotate(8deg)}
.tah-blog .post-card-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.tah-blog .post-card .post-tag{align-self:flex-start}
.tah-blog .post-card h3{font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.tah-blog .post-card h3 a:hover{color:var(--green-700)}
.tah-blog .post-card p{color:var(--muted);font-size:14px;line-height:1.55;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tah-blog .post-card .post-meta{margin-top:2px;padding-top:14px;border-top:1px solid var(--line)}

/* per-category card-art variety — CSS-only (no images); subtle hue-rotate so the
   7 topic areas read as distinct without introducing off-brand colors */
.tah-blog .cat-tax-preparation{filter:hue-rotate(-14deg)}
.tah-blog .cat-payroll{filter:hue-rotate(0deg)}
.tah-blog .cat-bookkeeping{filter:hue-rotate(0deg)}
.tah-blog .cat-business-formation{filter:hue-rotate(22deg)}
.tah-blog .cat-compliance{filter:hue-rotate(-30deg) saturate(1.15)}
.tah-blog .cat-quickbooks-tips{filter:hue-rotate(12deg) saturate(1.1)}
.tah-blog .cat-case-studies{filter:hue-rotate(40deg) saturate(1.2)}

@media(max-width:960px){.tah-blog .post-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.tah-blog .post-grid{grid-template-columns:1fr}}

/* pagination stub, now real WP pagination markup (paginate_links) */
.tah-blog .pagination{margin-top:48px;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}
.tah-blog .page-pill{font-family:"IBM Plex Mono";font-size:13px;font-weight:600;color:var(--muted);background:#fff;
  border:1px solid var(--line-2);min-width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 16px;transition:border-color .2s,color .2s,background .2s}
.tah-blog .page-pill:hover{border-color:var(--green);color:var(--green-700)}
.tah-blog .page-pill.is-current{background:var(--forest);color:#eafff0;border-color:var(--forest)}
.tah-blog .page-pill.is-arrow{padding:0 20px}
.tah-blog .page-pill.is-dots{border-color:transparent;background:none}

.tah-blog .blog-empty{padding:40px 0;color:var(--muted);font-size:15.5px}

@media(max-width:640px){
.tah-blog .sec{padding:60px 0}
}

/* Elementor-page hero polish (native widget DOM) + meta stat row */
.tah-blog .page-hero .breadcrumb p{margin:0;font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.08em;color:var(--muted-2)}
.tah-blog .page-hero .breadcrumb{margin-bottom:2px}
.tah-blog .page-hero .tah-kicker{margin:10px 0 0}
.tah-blog .page-hero h1.elementor-heading-title{font-size:clamp(36px,5vw,58px);font-weight:700;letter-spacing:-.035em;margin-top:16px}
.tah-blog .page-hero .lead p{font-size:17.5px;color:var(--muted);max-width:56ch;margin:20px 0 0}
.tah-blog .blog-hero-meta p{margin:26px 0 0;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted-2);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tah-blog .blog-hero-meta b{color:var(--green-700);font-weight:600}
.tah-blog .blog-hero-meta .bhm-sep{width:4px;height:4px;border-radius:50%;background:var(--line-2);display:inline-block}

/* ============================================================================
   CATEGORY RAIL — STICKY + STATES (2026-07-31)
   Mirrors the services page jump-nav so the blog behaves the same way.
   ============================================================================ */
.tah-blog .blog-filter,
.tah-blog .filter-rail{
  position:sticky; top:72px; z-index:40;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line,#e1ebdb);
  padding:12px 0; margin-bottom:8px;
}
.tah-blog .filter-pill{
  position:relative;
  transition:background .25s var(--tah-ease), color .25s var(--tah-ease),
             border-color .25s var(--tah-ease), box-shadow .25s var(--tah-ease);
}
.tah-blog .filter-pill:hover{
  background:var(--tah-forest); color:#eafff0; border-color:var(--tah-forest);
  box-shadow:0 6px 14px -8px rgba(14,61,36,.55);
}
.tah-blog .filter-pill.is-active,
.tah-blog .filter-pill.active,
.tah-blog .filter-pill[aria-current]{
  background:var(--tah-forest)!important; color:#fff!important;
  border-color:var(--tah-forest)!important;
  box-shadow:0 6px 18px -8px rgba(14,61,36,.55), 0 0 0 3px rgba(166,225,90,.30)!important;
}
.tah-blog .filter-pill.is-active::before,
.tah-blog .filter-pill.active::before,
.tah-blog .filter-pill[aria-current]::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--tah-lime); margin-right:8px; flex:none;
  box-shadow:0 0 8px rgba(166,225,90,.9);
}
.tah-blog .filter-pill{ display:inline-flex; align-items:center }
@media(max-width:780px){
  .tah-blog .blog-filter,.tah-blog .filter-rail{ top:0 }
  .tah-blog .blog-filter .wrap,.tah-blog .filter-rail .wrap{
    overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
  }
  .tah-blog .filter-pill{ flex:none; white-space:nowrap }
}

/* result count for the live filter (announced to screen readers via aria-live) */
.tah-blog .blog-filter .bf-count{
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.06em;
  color:var(--muted-2,#7f9184); margin:10px 0 0; padding-left:2px;
}
.tah-blog .post-card[hidden],
.tah-blog .featured-sec[hidden]{ display:none!important }


/* ---- blog-post.css ---- */
/* ============================================================================
   THE ACCOUNTS HUB — SINGLE BLOG ARTICLE (UNIT BLOG-W2)
   ----------------------------------------------------------------------------
   Ported VERBATIM (values unchanged) from the approved mockup's inline
   <style> block: prototype/pages/blog-post.html (UNIT BLOG-M2), sections:
   .post-hero/.post-tag/.post-meta, .article-sec/.article-layout, .prose
   (h2/h3/p/ul/blockquote/table), .callout-mint, .phase-table, .limit-band,
   .article-side/.article-toc/.side-card/.related-list/.aside-card, .pager.
   Everything is scoped under `.tah-post` — this is a NATIVE child-theme
   template (single.php), NOT an Elementor page, so the mockup's own class
   names are reused as-is (same convention as parts/blog.css / .tah-blog).

   Base tokens/.wrap/.kicker/.btn are ALSO ported here (verbatim from
   prototype/assets/site.css) because .tah-post is a standalone scope, not
   `.tah-page` — mirrors the self-contained approach already used by
   parts/blog.css (.tah-blog) rather than depending on pages-shared.css.

   Prose rules target the WP editor's plain output (bare h2/h3/p/ul/ol/
   blockquote/table) so post authors need no custom classes for normal body
   copy; .callout-mint/.phase-table/.limit-band are ALSO usable directly by
   an author adding that class name to a block in the editor (no required
   wrapper markup) per the build spec.

   FLAG: not yet wired into tah.css — build/assemble.py's ORDER list needs a
   "blog-post" entry added by the orchestrator (same open item already
   flagged for "blog" in parts/blog.css).
   ============================================================================ */

/* ---- base tokens + primitives (verbatim from site.css :root/body/.wrap/.kicker/.btn) ---- */
.tah-post{
  --ink:#0c1c13;--forest:#0e3d24;--forest-deep:#092718;--green:#2f9e44;--green-600:#1f8a37;--green-700:#177a2f;
  --lime:#a6e15a;--lime-bright:#c2f06f;--lime-soft:#e6f7c9;
  --bg:#ffffff;--bg-soft:#f2f7ee;--bg-warm:#faf8f1;--bg-mint:#e7f2e1;
  --line:#e1ebdb;--line-2:#d3e2ca;--muted:#556a5c;--muted-2:#7f9184;
  --radius:20px;--shadow-sm:0 1px 2px rgba(14,61,36,.05),0 8px 24px -12px rgba(14,61,36,.14);
  --shadow-md:0 30px 60px -28px rgba(14,61,36,.35);--shadow-lg:0 44px 90px -40px rgba(9,39,24,.5);
  --shadow-lime:0 18px 40px -16px rgba(120,190,50,.55);--ease:cubic-bezier(.22,.61,.36,1);--maxw:1180px;
  font-family:"Figtree",system-ui,sans-serif;color:var(--ink);line-height:1.6;letter-spacing:-.006em;
}
.tah-post h1,.tah-post h2,.tah-post h3,.tah-post h4{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:600;line-height:1.03;letter-spacing:-.028em}
.tah-post a{color:inherit;text-decoration:none}
.tah-post .wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px;position:relative}
.tah-post section{position:relative}

.tah-post .kicker{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--green-700);display:inline-flex;align-items:center;gap:9px}
.tah-post .kicker::before{content:"";width:15px;height:15px;border-radius:5px;flex:none;
  background:linear-gradient(135deg,var(--lime),var(--green));box-shadow:0 0 0 4px var(--lime-soft)}
.tah-post .kicker.on-dark{color:var(--lime)}
.tah-post .kicker.on-dark::before{box-shadow:0 0 0 4px rgba(166,225,90,.14)}

.tah-post .btn{display:inline-flex;align-items:center;gap:9px;font-family:"Figtree";font-weight:600;font-size:15.5px;
  padding:13px 22px;border-radius:12px;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;min-height:44px;
  transition:transform .28s var(--ease),background .28s,color .28s,box-shadow .28s,border-color .28s}
.tah-post .btn .arw{transition:transform .28s var(--ease)}
.tah-post .btn:hover .arw{transform:translateX(3px)}
.tah-post .btn-lime{background:var(--lime);color:var(--forest-deep);border-color:var(--lime)}
.tah-post .btn-lime:hover{background:var(--lime-bright);transform:translateY(-2px);box-shadow:var(--shadow-lime)}

/* ---- compact article hero (mock lines 84-101) ---- */
.tah-post .post-hero{position:relative;padding:44px 0 40px;overflow:hidden;background:
  radial-gradient(58% 60% at 88% 0%,rgba(166,225,90,.22),transparent 60%),
  radial-gradient(40% 40% at 2% 10%,rgba(47,158,68,.1),transparent 55%),
  linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%)}
.tah-post .post-hero .ph-inner{max-width:780px}
.tah-post .post-hero .breadcrumb{font-family:"IBM Plex Mono";font-size:11.5px;letter-spacing:.08em;color:var(--muted-2);margin-bottom:14px}
.tah-post .post-hero .breadcrumb a{color:var(--muted-2);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.tah-post .post-hero .breadcrumb a:hover{color:var(--green-700);border-color:var(--line-2)}
.tah-post .post-hero .post-tag{margin-bottom:16px}
.tah-post .post-hero h1{font-size:clamp(30px,4.4vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.tah-post .post-hero .dek{font-size:16.5px;color:var(--muted);max-width:64ch;margin-top:16px}
.tah-post .post-hero .post-meta{margin-top:22px}

/* shared chip + meta idiom (verbatim, same recipe as parts/blog.css .post-tag/.post-meta) */
.tah-post .post-tag{font-family:"IBM Plex Mono";font-size:10.5px;color:var(--green-700);background:var(--bg-mint);
  padding:5px 11px;border-radius:20px;display:inline-flex;align-items:center}
.tah-post .post-meta{font-family:"IBM Plex Mono";font-size:11.5px;color:var(--muted-2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tah-post .post-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted-2)}

/* ---- layout (mock lines 104-105) ---- */
.tah-post .article-sec{background:#fff;padding:54px 0 96px}
.tah-post .article-layout{display:grid;grid-template-columns:1fr 300px;gap:56px;align-items:start}

/* ---- prose column — WP editor emits bare h2/h3/p/ul/ol/blockquote/table, so
   these rules target the plain tags directly (no custom classes required by
   authors for normal body copy). Values verbatim from mock lines 107-116. ---- */
.tah-post .prose{max-width:760px;color:var(--ink);line-height:1.72}
.tah-post .prose h2{font-family:"Bricolage Grotesque";font-size:clamp(22px,2.6vw,28px);font-weight:700;margin:46px 0 14px;letter-spacing:-.022em;padding-top:36px;border-top:1px solid var(--line);scroll-margin-top:100px}
.tah-post .prose h2:first-child{border-top:none;margin-top:0;padding-top:0}
.tah-post .prose h3{font-family:"Bricolage Grotesque";font-size:18px;font-weight:600;margin:24px 0 10px;letter-spacing:-.012em}
.tah-post .prose p{margin:14px 0;color:var(--muted);font-size:15.5px}
.tah-post .prose ul,.tah-post .prose ol{list-style:none;padding:0;margin:14px 0}
.tah-post .prose li{margin:9px 0 9px 22px;position:relative;color:var(--muted);font-size:15.5px}
.tah-post .prose ul>li::before{content:"–";position:absolute;left:0;color:var(--green-700)}
.tah-post .prose ol{counter-reset:tah-ol}
.tah-post .prose ol>li{counter-increment:tah-ol}
.tah-post .prose ol>li::before{content:counter(tah-ol)".";position:absolute;left:-2px;color:var(--green-700);font-weight:600;font-size:13.5px}
.tah-post .prose strong{font-weight:600;color:var(--ink)}
.tah-post .prose a{color:var(--green-700);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:2px}
.tah-post .prose a:hover{color:var(--forest)}
.tah-post .prose blockquote{margin:24px 0;padding:6px 0 6px 20px;border-left:3px solid var(--green);color:var(--muted);font-style:italic;font-size:15.5px}
.tah-post .prose img{display:block;max-width:100%;border-radius:14px;margin:24px 0}
.tah-post .prose figcaption{font-size:12.5px;color:var(--muted-2);margin-top:8px;font-style:italic}

/* generic <table> fallback so a plain WP Table block (no class) still reads well */
.tah-post .prose table{width:100%;border-collapse:collapse;font-size:14px}
.tah-post .prose th,.tah-post .prose td{text-align:left;padding:14px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.tah-post .prose thead th{background:var(--bg-soft);font-weight:600;font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.tah-post .prose .wp-block-table{margin:32px 0;overflow-x:auto;border:1px solid var(--line);border-radius:16px}

/* ---- mint checklist callout ("what we needed from the client") — mock lines 119-125.
   Usable directly: an author can add class "callout-mint" to a Group/Custom-HTML
   block in the editor; an optional .cm-lbl / h4 / ul inside it get the same look. ---- */
.tah-post .callout-mint{background:var(--bg-mint);border-radius:20px;padding:28px 30px;margin:32px 0}
.tah-post .callout-mint .cm-lbl{font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-700);font-weight:600;display:flex;align-items:center;gap:8px}
.tah-post .callout-mint .cm-lbl svg{flex:none}
.tah-post .callout-mint h4{font-family:"Bricolage Grotesque";font-size:19px;font-weight:700;margin:10px 0 4px;color:var(--ink)}
.tah-post .callout-mint ul{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:11px}
.tah-post .callout-mint li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink);margin:0}
.tah-post .callout-mint li::before{content:none}
.tah-post .callout-mint li svg{flex:none;margin-top:2px;color:var(--green-700)}

/* ---- phase table — mock lines 128-136. Usable directly: author adds class
   "phase-table" to a WP Table block; caption/thead/td.ph/td.dur are optional
   refinements that also apply if present. ---- */
.tah-post .phase-table-wrap{margin:32px 0;overflow-x:auto;border:1px solid var(--line);border-radius:16px}
.tah-post .phase-table{width:100%;border-collapse:collapse;font-size:14px;min-width:480px}
.tah-post .phase-table caption{text-align:left;padding:16px 20px 0;font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.tah-post .phase-table th,.tah-post .phase-table td{text-align:left;padding:14px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.tah-post .phase-table thead th{font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);background:var(--bg-soft);font-weight:600}
.tah-post .phase-table tbody tr:last-child td{border-bottom:none}
.tah-post .phase-table td.ph{font-weight:600;color:var(--ink);white-space:nowrap}
.tah-post .phase-table td.dur{color:var(--muted-2);font-family:"IBM Plex Mono";font-size:12.5px;white-space:nowrap}
.tah-post .phase-table-note{font-size:12.5px;color:var(--muted-2);padding:2px 20px 16px;font-style:italic}

/* ---- limitations note band — mock lines 139-143. Usable directly via class
   "limit-band" on a Group block; .lb-lbl / p refinements apply if present. ---- */
.tah-post .limit-band{background:var(--bg-warm);border:1px dashed var(--line-2);border-radius:20px;padding:26px 28px;margin:40px 0 8px}
.tah-post .limit-band .lb-lbl{font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);display:flex;align-items:center;gap:8px;margin-bottom:12px}
.tah-post .limit-band .lb-lbl::before{content:"";width:9px;height:9px;border-radius:50%;background:#c9b34a}
.tah-post .limit-band p{font-size:14px;color:var(--muted);margin:8px 0}
.tah-post .limit-band p:first-of-type{margin-top:0}

/* ---- sidebar (mock lines 146-167) ---- */
.tah-post .article-side{display:flex;flex-direction:column;gap:20px;position:sticky;top:96px}
.tah-post .article-toc{background:var(--bg-soft);border-radius:16px;padding:22px 24px}
.tah-post .article-toc h4{font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-weight:600}
.tah-post .article-toc ul{list-style:none;padding:0;margin:0}
.tah-post .article-toc li{margin:6px 0}
.tah-post .article-toc a{color:var(--muted);text-decoration:none;display:block;padding:6px 0 6px 10px;border-left:2px solid transparent;font-size:13.5px;transition:color .2s,border-color .2s}
.tah-post .article-toc a:hover{color:var(--forest);border-left-color:var(--green)}

.tah-post .side-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow-sm)}
.tah-post .side-card h4{font-family:"Bricolage Grotesque";font-size:15.5px;font-weight:700;margin-bottom:4px}
.tah-post .related-list{display:flex;flex-direction:column;margin-top:8px}
.tah-post .related-list a{display:block;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:500;color:var(--ink);transition:color .2s,padding-left .2s}
.tah-post .related-list a:last-child{border-bottom:none}
.tah-post .related-list a:hover{color:var(--green-700);padding-left:4px}
.tah-post .related-list .rl-tag{display:block;font-family:"IBM Plex Mono";font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-top:3px;font-weight:400}

/* CTA card — same recipe as get-a-quote.html .aside-card, redeclared locally (mock lines 163-167) */
.tah-post .aside-card{background:var(--forest);color:#e7f4ea;border-radius:18px;padding:24px;box-shadow:var(--shadow-md)}
.tah-post .aside-card .kicker{margin-bottom:12px}
.tah-post .aside-card h3{font-size:17px;font-weight:700;color:#fff}
.tah-post .aside-card p{font-size:13.5px;color:#cfe6d4;margin-top:10px;line-height:1.6}
.tah-post .aside-card .btn{margin-top:16px;width:100%;justify-content:center}

/* ---- prev/next pager (mock lines 170-177) ---- */
.tah-post .pager{max-width:760px;margin:56px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tah-post .pager a,.tah-post .pager span{border:1px solid var(--line);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:6px;transition:border-color .2s,transform .2s,box-shadow .2s}
.tah-post .pager a{color:var(--ink)}
.tah-post .pager a:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.tah-post .pager span{color:var(--muted-2);cursor:not-allowed;opacity:.7}
.tah-post .pager .pg-lbl{font-family:"IBM Plex Mono";font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.tah-post .pager .pg-title{font-size:14.5px;font-weight:600}
.tah-post .pager .pg-next{text-align:right;align-items:flex-end}

/* ---- responsive — verbatim breakpoints from mock lines 179-188 ---- */
@media(max-width:960px){
.tah-post .article-layout{grid-template-columns:1fr;gap:36px}
.tah-post .article-side{position:static}
.tah-post .pager{grid-template-columns:1fr}
.tah-post .pager .pg-next{text-align:left;align-items:flex-start}
}
@media(max-width:640px){
.tah-post .article-sec{padding:40px 0 64px}
.tah-post .callout-mint,.tah-post .limit-band{padding:22px}
}

/* extra guard (not in mock, needed since real WP tables can be wider than the
   prose column on very small viewports — keeps the DoD's "no overflow at 360"
   guarantee for editor-authored tables, same intent as .phase-table-wrap). */
@media(max-width:400px){
.tah-post .wrap{padding:0 16px}
}

/* Orchestrator patch: editor-authored callout lists get the mock's green check markers */
.tah-post .callout-mint ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.tah-post .callout-mint ul li{position:relative;padding-left:26px;margin:0}
.tah-post .callout-mint ul li::before{content:"";position:absolute;left:0;top:3px;width:15px;height:15px;border-radius:50%;background:var(--green-700);-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M5 12l4 4L19 7" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M5 12l4 4L19 7" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat}

/* ============================================================================
   "IN THIS ARTICLE" — STICKY + ACTIVE STATE (2026-07-31)
   tah-motion.js sets `.is-active` on the entry whose H2 is currently in view.
   ============================================================================ */
.tah-post .article-toc{ position:sticky; top:104px }
.tah-post .article-toc a{ border-left:2px solid transparent }
.tah-post .article-toc a:hover{ color:var(--green-700); border-left-color:var(--line-2) }
.tah-post .article-toc a.is-active{
  color:var(--forest); font-weight:600;
  border-left-color:var(--green);
  background:linear-gradient(90deg, rgba(166,225,90,.16), transparent 70%);
  border-radius:0 8px 8px 0;
}
.tah-post .article-toc a:focus-visible{ outline:2px solid var(--green); outline-offset:2px }
/* headings need clearance under the sticky header when jumped to */
.tah-post .post-body h2{ scroll-margin-top:120px }
@media(max-width:960px){ .tah-post .article-toc{ position:static } }


/* ---- pages-overrides.css ---- */
/* ============================================================================
   THE ACCOUNTS HUB — interior-page overrides (applied AFTER pages-shared + per-page)
   ----------------------------------------------------------------------------
   Astra (parent theme) is enqueued even on Elementor Canvas and sets a fixed
   heading color that overrode the mockup's inherited colors — making white
   headings on dark bands (the green CTA) render dark. Restore the mockup's
   behaviour: headings inherit their section's text color (light sections -> ink,
   dark bands -> light). Explicit heading colors in scoped parts still win
   (higher specificity).
   ============================================================================ */
.tah-page h1,.tah-page h2,.tah-page h3,.tah-page h4,.tah-page h5,.tah-page h6{color:inherit}


/* ---- pages-hovers.css ---- */
/* ============================================================================
   THE ACCOUNTS HUB — consistent card / interactive hover effects (all pages)
   ----------------------------------------------------------------------------
   Applied AFTER every page part so it wins. Literal token values (not scope
   vars) so the same rule works across .tah-svcp / .tah-qp / .tah-page.
   Homepage hovers already live in the per-section parts; this covers the
   Services, Quote, About and FAQs pages. Respects reduced-motion below.
   ============================================================================ */

/* --- Light elevating cards: lift + shadow + border tint --- */
.tah-svcp .meta-card,
.tah-svcp .svc-audit,
.tah-qp .aside-card.light,
.tah-page .badge-mini,
.tah-page .faq-aside{
  transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s cubic-bezier(.22,.61,.36,1),border-color .28s;
}
.tah-svcp .meta-card:hover,
.tah-svcp .svc-audit:hover,
.tah-qp .aside-card.light:hover,
.tah-page .badge-mini:hover,
.tah-page .faq-aside:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 60px -28px rgba(14,61,36,.35);
  border-color:#d3e2ca;
}

/* --- Dark elevating card (Quote "What happens next") --- */
.tah-qp .aside-card{transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s cubic-bezier(.22,.61,.36,1)}
.tah-qp .aside-card:not(.light):hover{transform:translateY(-4px);box-shadow:0 40px 80px -30px rgba(9,39,24,.55)}

/* --- FAQ accordion items (native <details>) --- */
.tah-page details.faq{transition:border-color .25s,box-shadow .28s cubic-bezier(.22,.61,.36,1),transform .28s cubic-bezier(.22,.61,.36,1)}
.tah-page details.faq:hover{border-color:#d3e2ca;box-shadow:0 1px 2px rgba(14,61,36,.05),0 8px 24px -12px rgba(14,61,36,.14);transform:translateY(-2px)}

/* --- About philosophy chips (dark) --- */
.tah-page .phil-item{transition:background .25s,border-color .25s,transform .25s cubic-bezier(.22,.61,.36,1)}
.tah-page .phil-item:hover{background:rgba(255,255,255,.08);border-color:rgba(166,225,90,.32);transform:translateX(3px)}

/* --- About audiences checklist rows --- */
.tah-page .aud-list li{transition:color .2s,transform .25s cubic-bezier(.22,.61,.36,1);border-radius:8px}
.tah-page .aud-list li:hover{color:var(--ink);transform:translateX(4px)}

/* --- Quote: reassurance phone box --- */
.tah-qp .aside-card.light .call{transition:border-color .25s,background .25s}
.tah-qp .aside-card.light .call:hover{border-color:var(--green);background:var(--bg-mint)}

/* --- Quote: service/tools choice chips (unchecked hover only; checked state wins) --- */
.tah-qp .fluentform .tah-choices .ff-el-form-check-label:hover:not(:has(input:checked)){
  border-color:var(--green);background:#fafdf7;
}

/* --- Respect reduced-motion --- */
@media(prefers-reduced-motion:reduce){
  .tah-svcp .meta-card,.tah-svcp .svc-audit,.tah-qp .aside-card,.tah-qp .aside-card.light,
  .tah-page .badge-mini,.tah-page .faq-aside,.tah-page details.faq,.tah-page .phil-item,
  .tah-page .aud-list li,.tah-qp .aside-card.light .call{transition:none}
  .tah-svcp .meta-card:hover,.tah-svcp .svc-audit:hover,.tah-qp .aside-card:hover,
  .tah-qp .aside-card.light:hover,.tah-page .badge-mini:hover,.tah-page .faq-aside:hover,
  .tah-page details.faq:hover,.tah-page .phil-item:hover,.tah-page .aud-list li:hover{transform:none}
}


/* ---- chrome.css ---- */
/* ============================================================================
   THE ACCOUNTS HUB — SITE CHROME (custom header.php + footer.php)
   ----------------------------------------------------------------------------
   Sticky header, real WP nav menu, CSS-only mobile menu, full footer.
   Uses the --tah-* tokens from tah.css :root. All classes are tah-* prefixed
   so nothing collides with Astra/Elementor.
   ============================================================================ */
.tah-util,.tah-header,.tah-footer{font-family:"Figtree",system-ui,sans-serif}
.tah-util *,.tah-header *,.tah-footer *{box-sizing:border-box}
.tah-header ul,.tah-footer ul{margin:0;padding:0;list-style:none}
.tah-footer p{margin:0}
.tah-wrap{max-width:var(--tah-maxw);margin:0 auto;padding:0 26px;position:relative}

/* skip link */
.tah-skip{position:absolute;left:-9999px;top:auto;z-index:1000}
.tah-skip:focus{left:12px;top:12px;background:var(--tah-forest);color:#fff;padding:10px 16px;border-radius:8px}

/* ---------- utility / announcement bar ---------- */
.tah-util{background:var(--tah-forest-deep);color:#bfe0c6;font-size:13px}
.tah-util .tah-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:38px;padding-top:6px;padding-bottom:6px}
.tah-util-l{display:flex;align-items:center;gap:9px}
.tah-dot{width:6px;height:6px;border-radius:50%;background:var(--tah-lime);box-shadow:0 0 8px var(--tah-lime);flex:none}
.tah-util-r{display:flex;gap:20px;align-items:center}
.tah-util a{color:#cfe6d4;display:inline-flex;align-items:center;gap:7px;text-decoration:none;transition:color .2s}
.tah-util a:hover{color:#fff}

/* ---------- sticky primary header ---------- */
.tah-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--tah-line)}
.tah-navtoggle{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.tah-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}

.tah-brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.tah-brand svg{width:40px;height:40px;flex:none}
.tah-bt{display:flex;flex-direction:column;line-height:1}
.tah-bt b{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--tah-ink)}
.tah-bt > span{font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--tah-muted);margin-top:3px;font-weight:600}

.tah-navlinks{display:flex;align-items:center}
.tah-navlinks .tah-menu{display:flex;align-items:center;gap:30px}
.tah-navlinks .tah-menu li{margin:0}
.tah-navlinks .tah-menu a{font-size:15px;font-weight:500;color:var(--tah-muted);text-decoration:none;position:relative;transition:color .2s;display:inline-block;padding:4px 0}
.tah-navlinks .tah-menu a:hover{color:var(--tah-ink)}
.tah-navlinks .tah-menu li:not(.menu-item-has-children) > a::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;border-radius:2px;background:var(--tah-green);transition:width .3s var(--tah-ease)}
.tah-navlinks .tah-menu li:not(.menu-item-has-children) > a:hover::after{width:100%}
.tah-navlinks .tah-menu .current-menu-item > a,.tah-navlinks .tah-menu .current_page_item > a{color:var(--tah-ink)}
.tah-navlinks .tah-menu .current-menu-item:not(.menu-item-has-children) > a::after,.tah-navlinks .tah-menu .current_page_item:not(.menu-item-has-children) > a::after{width:100%}

/* ---------- desktop dropdown (Services > children) ---------- */
.tah-navlinks .tah-menu li.menu-item-has-children{position:relative}
.tah-navlinks .tah-menu li.menu-item-has-children > a::after{content:"\25BE";display:inline-block;margin-left:5px;font-size:11px;position:relative;top:-1px;transition:transform .2s var(--tah-ease)}
.tah-navlinks .tah-menu li.menu-item-has-children:hover > a::after{transform:rotate(225deg);top:0}

.tah-navlinks .tah-menu li.menu-item-has-children:focus-within > a::after{transform:rotate(225deg);top:0}
.tah-navlinks .tah-menu .sub-menu{position:absolute;top:100%;left:0;margin-top:14px;min-width:240px;background:#fff;border:1px solid var(--tah-line);border-radius:14px;box-shadow:var(--tah-shadow-md);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s var(--tah-ease),transform .2s var(--tah-ease),visibility .2s;z-index:110}
.tah-navlinks .tah-menu li.menu-item-has-children:hover > .sub-menu,
.tah-navlinks .tah-menu li.menu-item-has-children:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.tah-navlinks .tah-menu .sub-menu li{margin:0}
.tah-navlinks .tah-menu .sub-menu a{display:block;font-size:13.5px;font-weight:500;color:var(--tah-muted);padding:9px 14px;border-radius:9px;white-space:nowrap}
.tah-navlinks .tah-menu .sub-menu a::after{display:none}
.tah-navlinks .tah-menu .sub-menu a:hover,
.tah-navlinks .tah-menu .sub-menu a:focus{background:var(--tah-bg-mint);color:var(--tah-green-700)}

.tah-navcta{display:flex;align-items:center;gap:12px}
.tah-hbtn{display:inline-flex;align-items:center;gap:8px;font-family:"Figtree",sans-serif;font-weight:600;font-size:15px;padding:11px 18px;border-radius:11px;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;min-height:42px;text-decoration:none;transition:transform .25s var(--tah-ease),background .25s,color .25s,box-shadow .25s,border-color .25s}
.tah-hbtn--primary{background:var(--tah-forest);color:#eafff0;box-shadow:var(--tah-shadow-sm)}
.tah-hbtn--primary:hover{background:var(--tah-forest-deep);transform:translateY(-2px);box-shadow:var(--tah-shadow-md)}
.tah-hbtn--ghost{background:#fff;color:var(--tah-ink);border-color:var(--tah-line-2)}
.tah-hbtn--ghost:hover{border-color:var(--tah-green);color:var(--tah-green-700);transform:translateY(-2px)}
.tah-hbtn .tah-arw{transition:transform .25s var(--tah-ease)}
.tah-hbtn--primary:hover .tah-arw{transform:translateX(3px)}

/* hamburger (mobile only) */
.tah-burger{display:none;width:44px;height:44px;flex-direction:column;gap:5px;align-items:center;justify-content:center;cursor:pointer;background:none;border:none;padding:0}
.tah-burger span{width:24px;height:2px;background:var(--tah-ink);border-radius:2px;transition:transform .3s var(--tah-ease),opacity .2s}

/* CSS-only mobile menu */
.tah-mobilemenu{display:none;background:#fff;border-top:1px solid var(--tah-line);padding:12px 26px 22px}
.tah-mobilemenu .tah-menu{display:flex;flex-direction:column}
.tah-mobilemenu .tah-menu a,.tah-mm-phone{display:block;padding:14px 2px;font-size:16px;font-weight:600;color:var(--tah-ink);text-decoration:none;border-bottom:1px solid var(--tah-line)}
.tah-mm-phone{color:var(--tah-green-700)}
.tah-mm-cta{margin-top:18px;justify-content:center;width:100%}
.tah-navtoggle:checked ~ .tah-mobilemenu{display:block;animation:tah-mm-in .25s var(--tah-ease)}
@keyframes tah-mm-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* animate hamburger -> X when open */
.tah-navtoggle:checked ~ .tah-nav .tah-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.tah-navtoggle:checked ~ .tah-nav .tah-burger span:nth-child(2){opacity:0}
.tah-navtoggle:checked ~ .tah-nav .tah-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- footer ---------- */
.tah-footer{background:var(--tah-forest-deep);color:#bcd8c2;padding:64px 0 30px}
.tah-foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:38px}
.tah-foot-brand .tah-fbrand{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.tah-fbrand svg{width:38px;height:38px;flex:none}
.tah-fbrand b{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:20px;color:#fff;display:block;line-height:1}
.tah-fbrand span{font-size:9px;letter-spacing:.19em;text-transform:uppercase;color:#8fbf98;display:block;margin-top:2px}
.tah-foot-brand p{font-size:14px;color:#8fbf98;max-width:34ch;line-height:1.6}
.tah-foot-tag{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;color:var(--tah-lime);font-size:15px;margin-top:16px}
.tah-foot-col h4{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tah-lime);margin:0 0 15px}
.tah-foot-col a{display:block;font-size:14.5px;color:#bcd8c2;padding:6px 0;text-decoration:none;transition:color .2s,padding-left .25s}
.tah-foot-col a:hover{color:#fff;padding-left:5px}
.tah-foot-contact div{font-size:14px;padding:5px 0;display:flex;align-items:center;gap:9px}
.tah-foot-contact svg{color:var(--tah-lime);flex:none}
.tah-foot-contact a{color:inherit;text-decoration:none}
.tah-foot-contact a:hover{color:#fff}
.tah-disclaimer{margin-top:46px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;color:#7ba885;line-height:1.7;max-width:96ch}
.tah-foot-bottom{margin-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:#7ba885}
.tah-foot-bottom b{color:var(--tah-lime);font-weight:600;font-family:"Bricolage Grotesque",sans-serif}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .tah-navlinks{display:none}
  .tah-navcta .tah-hbtn{display:none}
  .tah-burger{display:flex}
  .tah-foot-grid{grid-template-columns:1fr 1fr;gap:30px}

  /* mobile drawer: render sub-menu items inline, statically, no hover dependency */
  .tah-mobilemenu .tah-menu li.menu-item-has-children > a::after{content:"\25BE";display:inline-block;margin-left:5px;font-size:10px;position:relative;top:-1px}
  .tah-mobilemenu .tah-menu .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;border-radius:0;background:transparent;margin-top:0;padding:0;min-width:0}
  .tah-mobilemenu .tah-menu .sub-menu li{margin:0}
  .tah-mobilemenu .tah-menu .sub-menu a{padding:11px 2px 11px 18px;font-size:14px;font-weight:500;border-bottom:1px solid var(--tah-line)}
}
@media(max-width:600px){
  .tah-wrap{padding:0 20px}
  .tah-mobilemenu{padding:12px 20px 20px}
  .tah-foot-grid{grid-template-columns:1fr}
  .tah-foot-bottom{flex-direction:column;gap:6px}
}
@media(max-width:560px){
  .tah-util a.tah-hidesm{display:none}
  .tah-util{font-size:12px}
  .tah-util .tah-wrap{gap:12px}
}
@media(prefers-reduced-motion:reduce){
  .tah-hbtn,.tah-burger span,.tah-navlinks .tah-menu a::after{transition:none}
  .tah-navtoggle:checked ~ .tah-mobilemenu{animation:none}
}


/* ---- motion.css ---- */
/* ============================================================================
   MOTION SYSTEM
   ----------------------------------------------------------------------------
   Approved 2026-07-31. Brief: "avoid a flat feel, still some level of poster
   type vibes." Reference was aqi.punjab.gov.pk — but rebuilt, not copied:
   that site animates width/height/left (layout properties, reflow every frame)
   across ~40 infinite loops. Everything here animates ONLY transform, opacity
   and box-shadow, so it stays on the compositor.

   RULES OBSERVED
   - Rest-state loops are limited to: kicker dots, primary buttons, the closing
     CTA panel, and the hero ring. Everything else is hover- or scroll-triggered.
   - Breathing on buttons animates box-shadow ONLY — `.tah-btn .elementor-button`
     already owns `transform:translateY(-2px)` on hover, and an animated
     transform would silently win over it.
   - Rules are UNSCOPED (no `.tah-page` prefix) for the same reason as
     conversion.css: theme templates (single.php) and late Elementor defaults
     don't reliably get scoped rules. See P-E laws in northstar/PRINCIPLES.md.
   - A real prefers-reduced-motion kill switch lives at the bottom of this file.
   ============================================================================ */

/* ---------------------------------------------------------- 1. KICKER DOT */
/* The green dot above every heading — 41 instances across the six pages.
   One rule, zero markup change. Ring swells and softens, dot scales 6%. */
/* Intensity note: v1 used --tah-lime-soft (#e6f7c9) for the ring — near-white, so
   the pulse was invisible against a light page. These use actual lime/green at
   real alpha, a wider ring travel (3px→10px), a bigger scale step, and a
   brightness lift at the peak so the dot itself visibly kindles. */
@keyframes tahDotBreathe{
  0%,100%{ box-shadow:0 0 0 3px rgba(166,225,90,.45), 0 0 0 0 rgba(47,158,68,.50);
           transform:scale(1); filter:brightness(1) }
  50%    { box-shadow:0 0 0 10px rgba(166,225,90,.20), 0 0 20px 5px rgba(47,158,68,.75);
           transform:scale(1.18); filter:brightness(1.22) saturate(1.15) }
}
@keyframes tahDotBreatheDark{
  0%,100%{ box-shadow:0 0 0 3px rgba(166,225,90,.35), 0 0 0 0 rgba(166,225,90,.55);
           transform:scale(1); filter:brightness(1) }
  50%    { box-shadow:0 0 0 10px rgba(166,225,90,.22), 0 0 24px 6px rgba(166,225,90,.85);
           transform:scale(1.18); filter:brightness(1.3) saturate(1.1) }
}
.tah-kicker::before,
.tah-post .kicker::before,
.tah-blog .kicker::before{
  animation:tahDotBreathe 3.2s var(--tah-ease) infinite;
}
.tah-on-dark.tah-kicker::before,
.tah-kicker.on-dark::before,
.tah-post .kicker.on-dark::before,
.tah-blog .kicker.on-dark::before{
  animation-name:tahDotBreatheDark;
}

/* ------------------------------------------------- 2. PRIMARY CTA BUTTONS */
/* Gentle breathing at rest (poster presence, no flatness) + a shine sweep on
   hover, with the breathing continuing tighter underneath it. */
/* Intensity note: v1's expanding ring sat at .05–.09 alpha — mathematically
   present, visually nothing. These carry a real ring (.16–.20) plus a genuine
   blurred glow, so the swell reads at a glance without the button jumping. */
@keyframes tahBtnBreathe{
  0%,100%{ box-shadow:0 4px 14px -8px rgba(14,61,36,.50), 0 0 0 0 rgba(47,158,68,.50), 0 0 0 0 rgba(47,158,68,0) }
  50%    { box-shadow:0 12px 30px -8px rgba(14,61,36,.70), 0 0 0 9px rgba(47,158,68,.16), 0 0 28px 5px rgba(47,158,68,.55) }
}
@keyframes tahBtnBreatheLime{
  0%,100%{ box-shadow:0 4px 14px -8px rgba(14,61,36,.45), 0 0 0 0 rgba(166,225,90,.60), 0 0 0 0 rgba(166,225,90,0) }
  50%    { box-shadow:0 12px 32px -8px rgba(14,61,36,.60), 0 0 0 10px rgba(166,225,90,.20), 0 0 32px 6px rgba(166,225,90,.80) }
}
@keyframes tahBtnShine{ to{ left:165% } }

.tah-btn--primary .elementor-button,
.tah-btn--lime .elementor-button{
  position:relative; overflow:hidden;
}
.tah-btn--primary .elementor-button{ animation:tahBtnBreathe 3.6s var(--tah-ease) infinite }
.tah-btn--lime .elementor-button{ animation:tahBtnBreatheLime 3.6s var(--tah-ease) infinite }

/* hover: breathe faster, and sweep the shine once */
.tah-btn--primary .elementor-button:hover,
.tah-btn--lime .elementor-button:hover{ animation-duration:2.2s }

.tah-btn--primary .elementor-button::after,
.tah-btn--lime .elementor-button::after{
  content:""; position:absolute; top:0; bottom:0; left:-150%; width:55%;
  transform:skewX(-18deg); pointer-events:none; z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
}
.tah-btn--lime .elementor-button::after{
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
}
.tah-btn--primary .elementor-button:hover::after,
.tah-btn--lime .elementor-button:hover::after{ animation:tahBtnShine 1s var(--tah-ease) }
/* keep label/icon above the sweep */
.tah-btn .elementor-button-content-wrapper{ position:relative; z-index:2 }

/* Secondary buttons do NOT breathe — only one thing asks at a time — but they
   DO get the shine on hover, so they still feel alive when pointed at. */
.tah-btn--ghost .elementor-button,
.tah-btn--ghost-dark .elementor-button{ animation:none!important; position:relative; overflow:hidden }
.tah-btn--ghost .elementor-button::after,
.tah-btn--ghost-dark .elementor-button::after{
  content:""; position:absolute; top:0; bottom:0; left:-150%; width:55%;
  transform:skewX(-18deg); pointer-events:none; z-index:1;
}
/* dark text on light chrome -> tint the sweep green so it reads */
.tah-btn--ghost .elementor-button::after{
  background:linear-gradient(100deg,transparent,rgba(47,158,68,.22),transparent);
}
.tah-btn--ghost-dark .elementor-button::after{
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.40),transparent);
}
.tah-btn--ghost .elementor-button:hover::after,
.tah-btn--ghost-dark .elementor-button:hover::after{ animation:tahBtnShine 1s var(--tah-ease) }

/* ------------------------------------------ 3. CLOSING CTA PANEL — GLOW */
@keyframes tahPanelBreathe{
  0%,100%{ box-shadow:0 30px 60px -28px rgba(9,39,24,.45), 0 0 55px -10px rgba(166,225,90,.45) }
  50%    { box-shadow:0 30px 60px -28px rgba(9,39,24,.45), 0 0 110px -4px rgba(166,225,90,.85) }
}
.e-con.tah-convert__panel{ animation:tahPanelBreathe 5s ease-in-out infinite }

/* ---------------------------------------- 4. TRAVELLING BORDER LIGHT (ring) */
/* Utility class `tah-ring` — add in Elementor → Advanced → CSS Classes.
   Masked conic gradient rotated via one custom property: one element, GPU. */
@property --tah-ang{ syntax:'<angle>'; initial-value:0deg; inherits:false }
@keyframes tahRingSpin{ to{ --tah-ang:360deg } }
@keyframes tahRingHalo{
  0%,100%{ box-shadow:0 0 26px -8px rgba(47,158,68,.45) }
  50%    { box-shadow:0 0 46px -2px rgba(47,158,68,.75) }
}
@keyframes tahRingHaloLime{
  0%,100%{ box-shadow:0 0 30px -8px rgba(166,225,90,.45) }
  50%    { box-shadow:0 0 60px -2px rgba(166,225,90,.85) }
}
.tah-ring,.tah-badge-mini,.tah-svc{ position:relative; isolation:isolate }
.tah-ring::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2.5px;
  background:conic-gradient(from var(--tah-ang),
      transparent 0deg, transparent 232deg,
      rgba(166,225,90,.55) 286deg, var(--tah-lime-bright) 322deg,
      rgb(214,255,150) 340deg, var(--tah-lime-bright) 352deg,
      rgba(47,158,68,.5) 358deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; z-index:2;
  animation:tahRingSpin 4.5s linear infinite;
}
.tah-ring::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  pointer-events:none; z-index:1;
  animation:tahRingHalo 4.5s ease-in-out infinite;
}
/* Fallback: browsers without @property can't interpolate the angle — show a
   static lime edge rather than a stuck gradient. */
@supports not (background:conic-gradient(from var(--tah-ang),red,blue)){
  .tah-ring::before{ background:none; border:1.5px solid rgba(166,225,90,.75); padding:0 }
}

/* --------------------------------------------- 5. SERVICE CARD HOVER LIFT */
.tah-svc{
  transition:transform .4s var(--tah-ease), box-shadow .4s var(--tah-ease), border-color .4s var(--tah-ease);
}
.tah-svc:hover{
  transform:translateY(-5px); border-color:rgba(166,225,90,.85);
  box-shadow:0 22px 44px -24px rgba(14,61,36,.45), 0 0 0 5px rgba(166,225,90,.32);
}

/* ------------------------------------------------- 6. STEP BARS ON REVEAL */
/* The real markup is `.tah-step__bar` with the fill painted by ::after, whose
   width is already set per step (33% / 66% / 100%, how.css:58-63). So animate
   scaleX from a left origin — the 33/66/100 targets are preserved exactly and
   it stays on the compositor (animating width would relayout). */
.tah-motion .tah-step__bar::after{
  transform:scaleX(0); transform-origin:left center;
  transition:transform 1.15s var(--tah-ease);
}
.tah-motion .tah-step.tah-in .tah-step__bar::after{ transform:scaleX(1) }
.tah-motion .tah-step:nth-child(2) .tah-step__bar::after{ transition-delay:.12s }
.tah-motion .tah-step:nth-child(3) .tah-step__bar::after{ transition-delay:.24s }

/* ------------------------------------------------------- 7. SCROLL REVEAL */
/* NOTE: the native Elementor pages carry NO `.reveal`/`.stagger` markup — that
   belonged to the old HTML-dump mockups. So tah-motion.js tags below-the-fold
   top-level sections with `tah-rv` itself. Anything already on screen at load
   is never tagged, so there is no hide-then-reveal flash and no LCP penalty. */
.tah-motion .tah-rv{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--tah-ease), transform .7s var(--tah-ease);
}
.tah-motion .tah-rv.tah-in{ opacity:1; transform:none }

/* legacy hooks — still honoured if a mockup-derived template uses them */
.tah-motion .reveal{ opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--tah-ease), transform .7s var(--tah-ease) }
.tah-motion .reveal.tah-in,.tah-motion .reveal.in{ opacity:1; transform:none }

/* ================================================================
   REDUCED MOTION — a real kill switch.
   (The reference site keeps ~37 loops running under `reduce`; this
   stops every one of ours and leaves all content fully visible.)
   ================================================================ */
@media (prefers-reduced-motion:reduce){
  .tah-kicker::before,
  .tah-on-dark.tah-kicker::before,
  .tah-kicker.on-dark::before,
  .tah-post .kicker::before,
  .tah-blog .kicker::before,
  .tah-btn--primary .elementor-button,
  .tah-btn--lime .elementor-button,
  .tah-btn--primary .elementor-button:hover::after,
  .tah-btn--lime .elementor-button:hover::after,
  .e-con.tah-convert__panel,
  .tah-ring::before,
  .tah-ring::after{ animation:none!important }

  .tah-svc{ transition:none!important }
  .tah-svc:hover{ transform:none!important }

  .tah-motion .tah-rv,
  .tah-motion .reveal{ opacity:1!important; transform:none!important; transition:none!important }
  .tah-motion .tah-step__bar::after{ transform:scaleX(1)!important; transition:none!important }
}


/* ============================================================================
   8. RING + GLOW ON CARDS  (2026-07-31, second pass)
   ----------------------------------------------------------------------------
   Requested on the QuickBooks/Intuit certification cards, the six service cards
   + the dark "see what's included" card, and the forest panel in "From
   scattered to sorted".

   ⚠ WHY THIS DOESN'T USE ::before/::after ON .tah-svc
   Both pseudo-elements are ALREADY TAKEN on that card:
     ::before = the 4px lime accent bar that scales in on hover (services.css:41)
     ::after  = the 01/02/03 counter, top-right           (services.css:47)
   A first attempt overwrote both and silently destroyed the accent bar and the
   card numbering. So the service cards use the padding-box/border-box gradient
   trick instead — a rotating conic border painted by the element's OWN
   background, needing no pseudo-element and surviving `overflow:hidden`
   (which these cards set, and which would clip an inset ring anyway).

   Cards whose pseudo-elements ARE free (.tah-badge-mini, .tah-after) use the
   masked-ring approach, which gives a slightly crisper edge.
   ============================================================================ */

/* ---- service cards: gradient border, no pseudo-elements ---------------- */
.tah-svc{
  border:2px solid transparent!important;
  background:
    linear-gradient(#fff,#fff) padding-box,
    conic-gradient(from var(--tah-ang),
      rgba(225,235,219,1) 0deg, rgba(225,235,219,1) 236deg,
      rgba(166,225,90,.65) 288deg, var(--tah-lime-bright) 326deg,
      rgb(214,255,150) 342deg, var(--tah-lime-bright) 352deg,
      rgba(225,235,219,1) 360deg) border-box;
  box-shadow:0 0 20px -8px rgba(47,158,68,.40);
  animation:tahRingSpin 4.5s linear infinite;
}
/* de-sync so the grid doesn't strobe in lockstep */
.tah-svc:nth-child(2){ animation-delay:-.6s }
.tah-svc:nth-child(3){ animation-delay:-1.2s }
.tah-svc:nth-child(4){ animation-delay:-1.8s }
.tah-svc:nth-child(5){ animation-delay:-2.4s }
.tah-svc:nth-child(6){ animation-delay:-3.0s }
.tah-svc:nth-child(7){ animation-delay:-3.6s }

/* dark card in the same grid — forest fill, lime light */
.tah-svc--cta{
  background:
    linear-gradient(var(--tah-forest),var(--tah-forest)) padding-box,
    conic-gradient(from var(--tah-ang),
      rgba(255,255,255,.10) 0deg, rgba(255,255,255,.10) 236deg,
      rgba(166,225,90,.70) 288deg, var(--tah-lime-bright) 326deg,
      rgb(226,255,176) 342deg, var(--tah-lime-bright) 352deg,
      rgba(255,255,255,.10) 360deg) border-box;
  box-shadow:0 0 28px -8px rgba(166,225,90,.45);
}
/* hover must not blank the gradient border (services.css sets border-color:transparent) */
.tah-svc:hover{
  border-color:transparent!important;
  box-shadow:var(--tah-shadow-md), 0 0 30px -6px rgba(47,158,68,.55);
}
.tah-svc--cta:hover{ box-shadow:var(--tah-shadow-md), 0 0 40px -6px rgba(166,225,90,.65) }

/* ---- certification cards: masked ring (pseudo-elements are free) ------- */
.tah-badge-mini{ position:relative; isolation:isolate }
.tah-badge-mini::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
  background:conic-gradient(from var(--tah-ang),
      transparent 0deg, transparent 244deg,
      rgba(166,225,90,.55) 292deg, var(--tah-lime-bright) 328deg,
      rgb(214,255,150) 344deg, var(--tah-lime-bright) 353deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; z-index:3;
  animation:tahRingSpin 4.5s linear infinite;
}
.tah-badge-mini{ animation:tahCardHalo 4.5s ease-in-out infinite }
.tah-badge-mini:nth-of-type(2),
.tah-badge-mini:nth-of-type(2)::after{ animation-delay:-2.2s }
@keyframes tahCardHalo{
  0%,100%{ box-shadow:var(--tah-shadow-sm), 0 0 20px -8px rgba(47,158,68,.40) }
  50%    { box-shadow:var(--tah-shadow-sm), 0 0 38px -4px rgba(47,158,68,.70) }
}

/* ---- "From scattered to sorted" forest panel --------------------------- */
/* ::before there is a decorative dial (hub.css:79) and is display:none'd, but
   ::after is genuinely free — use it and leave ::before alone. */
.tah-after{ position:relative; isolation:isolate; animation:tahPanelHaloLime 5s ease-in-out infinite }
.tah-after::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
  background:conic-gradient(from var(--tah-ang),
      rgba(255,255,255,.08) 0deg, rgba(255,255,255,.08) 240deg,
      rgba(166,225,90,.60) 290deg, var(--tah-lime-bright) 326deg,
      rgb(226,255,176) 344deg, var(--tah-lime-bright) 353deg,
      rgba(255,255,255,.08) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; z-index:3;
  animation:tahRingSpin 4.5s linear infinite;
}
@keyframes tahPanelHaloLime{
  0%,100%{ box-shadow:var(--tah-shadow-md), 0 0 34px -10px rgba(166,225,90,.40) }
  50%    { box-shadow:var(--tah-shadow-md), 0 0 64px -4px rgba(166,225,90,.75) }
}

/* ---- reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .tah-svc,.tah-svc--cta,.tah-badge-mini,.tah-badge-mini::after,
  .tah-after,.tah-after::after{ animation:none!important }
  /* keep a static lime edge so the treatment doesn't simply disappear */
  .tah-svc{ background:#fff!important; border:2px solid rgba(166,225,90,.55)!important }
  .tah-svc--cta{ background:var(--tah-forest)!important }
  .tah-badge-mini::after,.tah-after::after{
    background:none; border:1.5px solid rgba(166,225,90,.5); padding:0;
  }
  .tah-btn--ghost .elementor-button:hover::after,
  .tah-btn--ghost-dark .elementor-button:hover::after{ animation:none!important }
}

/* ============================================================================
   9. RING + GLOW — REMAINING CARD SURFACES (2026-07-31, third pass)
   ----------------------------------------------------------------------------
   Covers what pass 2 missed:
     .meta-card     services — "What you may need to provide" / "Expected outcomes"
     .svc-limits    services — the Important limitations band
     .badge-mini    about    — the QuickBooks / Intuit cards (NOTE: unprefixed;
                              the about page uses the ported mockup class name,
                              which is why the `.tah-badge-mini` rule missed it)
     .tah-who-band  home     — the "Who it's for" card

   Per-surface technique is dictated by what's already occupied:
     .meta-card / .svc-limits / .badge-mini -> ::after is free, no overflow
                                               clipping => masked ring.
     .tah-who-band -> ::after is TAKEN (radial glow, who.css:49) AND the card
                      sets overflow:hidden, which would clip an inset ring.
                      So it uses the padding-box/border-box gradient border,
                      same as .tah-svc.
   ============================================================================ */

/* ---- shared masked ring for the free-pseudo surfaces ------------------- */
.tah-svcp .meta-card,
.tah-svcp .svc-limits,
.badge-mini{ position:relative; isolation:isolate }

.tah-svcp .meta-card::after,
.tah-svcp .svc-limits::after,
.badge-mini::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
  background:conic-gradient(from var(--tah-ang),
      transparent 0deg, transparent 246deg,
      rgba(166,225,90,.50) 294deg, var(--tah-lime-bright) 328deg,
      rgb(214,255,150) 344deg, var(--tah-lime-bright) 353deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; z-index:3;
  animation:tahRingSpin 4.5s linear infinite;
}
/* the limitations band keeps its 4px green left bar — inset the ring past it
   so the two don't fight, and run it dimmer since this is a quiet note */
.tah-svcp .svc-limits::after{
  opacity:.75;
  border-top-left-radius:0; border-bottom-left-radius:0;
  left:0;
}

/* halos — none of these three set a hover box-shadow, so animating the
   element's own box-shadow is safe here */
.tah-svcp .meta-card{ animation:tahCardHalo 4.5s ease-in-out infinite }
.badge-mini{ animation:tahCardHalo 4.5s ease-in-out infinite }

/* de-sync: the two meta-cards sit side by side, the badges stack */
.tah-svcp .meta-card:nth-of-type(2),
.tah-svcp .meta-card:nth-of-type(2)::after{ animation-delay:-2.2s }
.badge-mini:nth-of-type(2),
.badge-mini:nth-of-type(2)::after{ animation-delay:-2.2s }
.tah-svcp .svc-limits::after{ animation-delay:-1.1s }

/* dark service blocks — lime light instead of green */
.tah-svcp .svc-block.bg-dark .meta-card::after,
.tah-svcp .svc-block.bg-dark .svc-limits::after{
  background:conic-gradient(from var(--tah-ang),
      rgba(255,255,255,.10) 0deg, rgba(255,255,255,.10) 244deg,
      rgba(166,225,90,.60) 292deg, var(--tah-lime-bright) 328deg,
      rgb(226,255,176) 344deg, var(--tah-lime-bright) 353deg,
      rgba(255,255,255,.10) 360deg);
}
.tah-svcp .svc-block.bg-dark .meta-card{ animation-name:tahPanelHaloLime }

/* ---- "Who it's for" card: gradient border (::after taken, overflow:hidden) */
.tah-who-band{
  border:2px solid transparent!important;
  background:
    linear-gradient(#fff,#fff) padding-box,
    conic-gradient(from var(--tah-ang),
      rgba(225,235,219,1) 0deg, rgba(225,235,219,1) 238deg,
      rgba(166,225,90,.65) 290deg, var(--tah-lime-bright) 326deg,
      rgb(214,255,150) 342deg, var(--tah-lime-bright) 352deg,
      rgba(225,235,219,1) 360deg) border-box;
  animation:tahRingSpin 4.5s linear infinite, tahWhoHalo 5s ease-in-out infinite;
}
@keyframes tahWhoHalo{
  0%,100%{ box-shadow:var(--tah-shadow-md), 0 0 24px -10px rgba(47,158,68,.35) }
  50%    { box-shadow:var(--tah-shadow-md), 0 0 46px -4px rgba(47,158,68,.60) }
}

/* ---- reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .tah-svcp .meta-card,.tah-svcp .meta-card::after,
  .tah-svcp .svc-limits::after,
  .badge-mini,.badge-mini::after,
  .tah-who-band{ animation:none!important }
  .tah-svcp .meta-card::after,.tah-svcp .svc-limits::after,.badge-mini::after{
    background:none; border:1.5px solid rgba(166,225,90,.5); padding:0;
  }
  .tah-who-band{ background:#fff!important; border:2px solid rgba(166,225,90,.5)!important }
}

/* ============================================================================
   10. GET A QUOTE PAGE (2026-07-31, fourth pass)
   ----------------------------------------------------------------------------
   .qcard            the enquiry form card (white, 22px radius)
   .aside-card       dark forest "What happens next" card
   .aside-card.light white "Prefer to call?" card
   All three have both pseudo-elements free and no overflow clipping, so they
   take the masked ring directly.
   ============================================================================ */
.tah-qp .qcard,
.tah-qp .aside-card{ position:relative; isolation:isolate }

.tah-qp .qcard::after,
.tah-qp .aside-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
  background:conic-gradient(from var(--tah-ang),
      transparent 0deg, transparent 246deg,
      rgba(166,225,90,.50) 294deg, var(--tah-lime-bright) 328deg,
      rgb(214,255,150) 344deg, var(--tah-lime-bright) 353deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; z-index:3;
  animation:tahRingSpin 4.5s linear infinite;
}
/* dark aside card -> lime light on forest */
.tah-qp .aside-card:not(.light)::after{
  background:conic-gradient(from var(--tah-ang),
      rgba(255,255,255,.10) 0deg, rgba(255,255,255,.10) 244deg,
      rgba(166,225,90,.60) 292deg, var(--tah-lime-bright) 328deg,
      rgb(226,255,176) 344deg, var(--tah-lime-bright) 353deg,
      rgba(255,255,255,.10) 360deg);
}
/* halos — no hover box-shadow on these, so animating the element's own is safe */
.tah-qp .qcard{ animation:tahCardHalo 4.5s ease-in-out infinite }
.tah-qp .aside-card.light{ animation:tahCardHalo 4.5s ease-in-out infinite; animation-delay:-2.2s }
.tah-qp .aside-card:not(.light){ animation:tahPanelHaloLime 5s ease-in-out infinite }

/* de-sync the stacked right-hand column against the form */
.tah-qp .aside-card:not(.light)::after{ animation-delay:-1.5s }
.tah-qp .aside-card.light::after{ animation-delay:-3.0s }

@media (prefers-reduced-motion:reduce){
  .tah-qp .qcard,.tah-qp .qcard::after,
  .tah-qp .aside-card,.tah-qp .aside-card::after{ animation:none!important }
  .tah-qp .qcard::after,.tah-qp .aside-card::after{
    background:none; border:1.5px solid rgba(166,225,90,.5); padding:0;
  }
}

/* ============================================================================
   11. ABOUT PAGE CARDS + HEADER CTAs (2026-07-31, fifth pass)
   ----------------------------------------------------------------------------
   .approach-grid .svc  "Clear scope / Practical support / Responsible guidance"
   .clarity-card        "On every engagement, we make clear"
   .aud-panel           "Who The Accounts Hub serves"
   .tah-hbtn--*         the sticky header's Get a Quote / View Services

   Technique per surface, again dictated by what's occupied:
     .svc         -> ::after is the hover accent bar (pages-shared.css:181) and
                     the card sets overflow:hidden => gradient border.
     .clarity-card-> overflow:hidden => gradient border (lime, on forest).
     .aud-panel   -> both pseudos free, no clipping => masked ring.
   ============================================================================ */

/* ---- "Clear scope / Practical support / Responsible guidance" ---------- */
.tah-page .approach-grid .svc{
  border:2px solid transparent!important;
  background:
    linear-gradient(#fff,#fff) padding-box,
    conic-gradient(from var(--tah-ang),
      rgba(225,235,219,1) 0deg, rgba(225,235,219,1) 238deg,
      rgba(166,225,90,.65) 290deg, var(--tah-lime-bright) 326deg,
      rgb(214,255,150) 342deg, var(--tah-lime-bright) 352deg,
      rgba(225,235,219,1) 360deg) border-box;
  box-shadow:0 0 20px -8px rgba(47,158,68,.40);
  animation:tahRingSpin 4.5s linear infinite;
}
.tah-page .approach-grid .svc:nth-child(2){ animation-delay:-1.1s }
.tah-page .approach-grid .svc:nth-child(3){ animation-delay:-2.2s }
.tah-page .approach-grid .svc:nth-child(4){ animation-delay:-3.3s }
.tah-page .approach-grid .svc:hover{
  border-color:transparent!important;
  box-shadow:var(--shadow-md), 0 0 30px -6px rgba(47,158,68,.55);
}

/* ---- "On every engagement, we make clear" (dark forest) ---------------- */
.tah-page .clarity-card{
  border:2px solid transparent!important;
  background:
    linear-gradient(var(--forest),var(--forest)) padding-box,
    conic-gradient(from var(--tah-ang),
      rgba(255,255,255,.10) 0deg, rgba(255,255,255,.10) 236deg,
      rgba(166,225,90,.70) 288deg, var(--tah-lime-bright) 326deg,
      rgb(226,255,176) 342deg, var(--tah-lime-bright) 352deg,
      rgba(255,255,255,.10) 360deg) border-box;
  animation:tahRingSpin 4.5s linear infinite, tahPanelHaloLime 5s ease-in-out infinite;
}

/* ---- "Who The Accounts Hub serves" ------------------------------------ */
.tah-page .aud-panel{ position:relative; isolation:isolate;
  animation:tahCardHalo 4.5s ease-in-out infinite; animation-delay:-1.6s }
.tah-page .aud-panel::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
  background:conic-gradient(from var(--tah-ang),
      transparent 0deg, transparent 246deg,
      rgba(166,225,90,.50) 294deg, var(--tah-lime-bright) 328deg,
      rgb(214,255,150) 344deg, var(--tah-lime-bright) 353deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; z-index:3; animation:tahRingSpin 4.5s linear infinite;
}

/* ---- header CTAs ------------------------------------------------------- */
.tah-hbtn{ position:relative; overflow:hidden }
.tah-hbtn--primary{ animation:tahBtnBreathe 3.6s var(--tah-ease) infinite }
.tah-hbtn:hover{ animation-duration:2.2s }
.tah-hbtn::after{
  content:""; position:absolute; top:0; bottom:0; left:-150%; width:55%;
  transform:skewX(-18deg); pointer-events:none; z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
}
.tah-hbtn--ghost::after{
  background:linear-gradient(100deg,transparent,rgba(47,158,68,.22),transparent);
}
.tah-hbtn:hover::after{ animation:tahBtnShine 1s var(--tah-ease) }
.tah-hbtn > *{ position:relative; z-index:2 }

@media (prefers-reduced-motion:reduce){
  .tah-page .approach-grid .svc,.tah-page .clarity-card,
  .tah-page .aud-panel,.tah-page .aud-panel::after,
  .tah-hbtn--primary,.tah-hbtn:hover::after{ animation:none!important }
  .tah-page .approach-grid .svc{ background:#fff!important; border:2px solid rgba(166,225,90,.55)!important }
  .tah-page .clarity-card{ background:var(--forest)!important; border:2px solid rgba(166,225,90,.5)!important }
  .tah-page .aud-panel::after{ background:none; border:1.5px solid rgba(166,225,90,.5); padding:0 }
}

/* ============================================================================
   12. NESTED-SCROLLER FIX (2026-07-31)
   ----------------------------------------------------------------------------
   Symptom: the FAQ page grew a second scrollbar, the page scroll shortened, and
   scrolling with the cursor over the content stopped almost immediately — while
   the sticky "Jump to a section" card refused to stick.

   Cause: `.tah-page` (an Elementor container) computes `overflow-x:hidden` from
   Elementor's container defaults. Per CSS Overflow, when ONE axis is `hidden`
   the other axis computes from `visible` to **`auto`** — so the page wrapper
   silently became a scroll container. Two consequences:
     1. It scrolled internally (only ~26px of travel) and swallowed wheel events,
        which is why scrolling "ended right away" over the content but still
        worked over the header.
     2. `position:sticky` anchors to the nearest scrollport — that inner one, not
        the viewport — so sticky elements never moved with the page.

   Fix: `overflow-x:clip`. Clip still prevents horizontal scroll, but unlike
   `hidden` it does NOT force the other axis to `auto` and does NOT create a
   scroll container — so the page scrolls once, and sticky anchors to the
   viewport as intended. `overflow-y` is pinned to visible explicitly.
   ============================================================================ */
.tah-page,
.tah-svcp,
.tah-blog,
.tah-post{
  overflow-x:clip;
  overflow-y:visible;
}