/*
Theme Name: Numble
Theme URI: https://www.numble.ca
Author: Numble Accounting Services
Author URI: https://www.numble.ca
Description: Custom one-page marketing theme for Numble Accounting Services (St. Albert small-business accounting). The full homepage markup, design tokens, and styles live in index.php (styles are inline for byte-identical fidelity to the approved design). Brand: single teal, Poppins/Lato, Jost uppercase nav, frosted-glass dark sections.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: numble
*/

/* The full design system + all template styles live in this stylesheet (enqueued site-wide via functions.php). */
/* ============================================================
   NUMBLE TOKENS: authentic values from the design system.
   Radii kept SOFT (subtle, ≤10px) per brand guidance; buttons 6px,
   cards 8-10px. (Deliberately different from the squared Concept A.)
   ============================================================ */
:root{
  --teal-50:#e6f6f9;--teal-100:#ccedf2;--teal-200:#99dbe5;--teal-300:#5fc6d6;
  --teal-400:#2bb0c6;--teal-500:#0097b2;--teal-600:#007f98;--teal-700:#00697e;
  --teal-800:#0a505f;--teal-900:#0b3a45;
  --neutral-0:#ffffff;--neutral-50:#f5f8f9;--neutral-100:#eaeff1;--neutral-200:#dbe3e7;
  --neutral-300:#c2ced4;--neutral-400:#98a7af;--neutral-500:#6c7c84;--neutral-600:#4e5c63;
  --neutral-700:#394449;--neutral-800:#222b2f;--neutral-900:#121a1d;
  --green-50:#e7f5ee;--green-500:#1f9d6b;--green-700:#157350;
  --red-50:#fceceb;--red-500:#d8483f;--red-700:#a8352e;
  --amber-50:#fdf3e1;--amber-500:#e09a2c;--amber-700:#b0741a;

  --surface-page:var(--neutral-50);--surface-card:var(--neutral-0);--surface-sunken:var(--neutral-100);
  --surface-brand-soft:var(--teal-50);--surface-brand-deep:var(--teal-900);--surface-inverse:var(--neutral-900);
  --text-primary:var(--neutral-900);--text-secondary:var(--neutral-600);--text-muted:var(--neutral-500);
  --text-brand:var(--teal-600);--text-inverse:var(--neutral-0);--text-on-brand:var(--neutral-0);
  --border-subtle:var(--neutral-200);--border-default:var(--neutral-300);--border-brand:var(--teal-500);

  --font-display:'Poppins','Segoe UI',system-ui,sans-serif;
  --font-body:'Lato','Helvetica Neue',system-ui,sans-serif;
  /* Figures & labels: brand Poppins (replaces the monospace look per owner preference) */
  --font-mono:'Poppins','Segoe UI',system-ui,sans-serif;
  --font-nav:'Jost','Segoe UI',system-ui,sans-serif;
  --fs-display:4rem;--fs-h1:3rem;--fs-h2:2.25rem;--fs-h3:1.625rem;--fs-h4:1.25rem;
  --fs-lg:1.125rem;--fs-base:1rem;--fs-sm:.875rem;--fs-xs:.75rem;
  --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-black:800;
  --lh-tight:1.08;--lh-snug:1.25;--lh-normal:1.5;--lh-relaxed:1.65;
  --ls-tight:-.02em;--ls-caps:.14em;--ls-wide:.04em;

  /* SOFT radii: authentic Numble scale */
  --radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:10px;--radius-pill:999px;

  --shadow-xs:0 1px 2px rgba(11,58,69,.06);--shadow-sm:0 2px 6px rgba(11,58,69,.07);
  --shadow-md:0 6px 18px rgba(11,58,69,.09);--shadow-lg:0 16px 40px rgba(11,58,69,.12);
  --shadow-xl:0 28px 70px rgba(11,58,69,.16);

  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;
  --space-6:2rem;--space-7:2.5rem;--space-8:3rem;--space-9:4rem;--space-10:5rem;--space-12:7.5rem;
  --container-xl:1200px;--container-lg:1040px;
  --dur-fast:120ms;--dur-normal:200ms;--ease-out:cubic-bezier(.16,1,.3,1);--ease-std:cubic-bezier(.2,0,.1,1);
  --focus-ring:0 0 0 3px color-mix(in srgb, var(--teal-500) 38%, transparent);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-normal);color:var(--text-primary);background:var(--surface-card);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:var(--ls-tight);color:var(--text-primary);line-height:var(--lh-snug);text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
ul{list-style:none}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}

.container{max-width:var(--container-xl);margin-inline:auto;padding-inline:var(--space-5)}
.section{padding-block:var(--space-10)}
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-brand);display:inline-block;margin-bottom:var(--space-3)}
.head{max-width:720px;margin-bottom:var(--space-8)}
.head.center{margin-inline:auto;text-align:center}
.head h2{font-size:var(--fs-h2)}
.head p{margin-top:var(--space-4);font-size:var(--fs-lg);color:var(--text-secondary);line-height:var(--lh-relaxed)}

/* ---------- Buttons (authentic: 6px radius, solid teal, darken on hover) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-base);line-height:1;letter-spacing:.01em;height:var(--control-md,44px);padding:0 var(--space-5);border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:background var(--dur-fast) var(--ease-std),border-color var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-normal);white-space:nowrap}
.btn svg{width:18px;height:18px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--teal-500);color:var(--text-on-brand)}
.btn-primary:hover{background:var(--teal-600);box-shadow:var(--shadow-sm)}
.btn-secondary{background:var(--surface-card);color:var(--text-brand);border-color:var(--border-brand)}
.btn-secondary:hover{background:var(--surface-brand-soft)}
.btn-amber{background:var(--amber-500);color:#3a2708}
.btn-amber:hover{background:var(--amber-700);color:#fff}
.btn-light{background:#fff;color:var(--teal-700)}
.btn-light:hover{background:var(--teal-50)}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-outline-light:hover{background:rgba(255,255,255,.12)}
.btn-lg{height:54px;padding:0 var(--space-6);font-size:var(--fs-lg)}

/* ---------- Announcement bar ---------- */
.announce{background:var(--surface-brand-deep);color:#fff;font-size:var(--fs-sm)}
.announce .container{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding-block:var(--space-2);text-align:center;flex-wrap:wrap}
.announce strong{font-family:var(--font-display);font-weight:var(--fw-semibold)}
.announce .rosette{width:18px;height:18px;flex:none}

/* ---------- Header ---------- */
.topbar{position:sticky;top:0;z-index:60}
.header{position:relative;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--border-subtle)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:var(--space-5)}
.brand{display:flex;align-items:center;gap:var(--space-3)}
.brand img{height:36px;width:auto}
.nav-links{display:flex;align-items:center;gap:var(--space-5)}
.nav-links a{font-family:var(--font-nav);text-transform:uppercase;font-weight:400;font-size:.8rem;letter-spacing:.12em;color:var(--text-secondary);transition:color var(--dur-normal);white-space:nowrap}
.nav-links a:hover{color:var(--text-brand)}
.nav-cta{display:flex;align-items:center;gap:var(--space-3)}
.nav-phone{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:.95rem;color:var(--text-primary);display:flex;align-items:center;gap:var(--space-2)}
.nav-phone svg{width:16px;height:16px;stroke:var(--teal-500)}
/* Hamburger button: animates into an X when open */
.nav-toggle{display:none;position:relative;width:44px;height:44px;border:none;background:transparent;border-radius:var(--radius-md);cursor:pointer;z-index:90;transition:background var(--dur-fast)}
.nav-toggle:hover{background:var(--surface-sunken)}
.nav-toggle .bar{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--text-primary);transition:transform var(--dur-normal) var(--ease-out),opacity var(--dur-fast),top var(--dur-normal) var(--ease-out)}
.nav-toggle .bar:nth-child(1){top:16px}
.nav-toggle .bar:nth-child(2){top:22px}
.nav-toggle .bar:nth-child(3){top:28px}
body.menu-open .nav-toggle .bar:nth-child(1){top:22px;transform:rotate(45deg)}
body.menu-open .nav-toggle .bar:nth-child(2){opacity:0}
body.menu-open .nav-toggle .bar:nth-child(3){top:22px;transform:rotate(-45deg)}

/* Elevated full-screen mobile menu: deep-teal takeover with soft glows */
body.menu-open{overflow:hidden}
.menu-backdrop{position:fixed;inset:0;z-index:80;background:rgba(11,58,69,.5);opacity:0;visibility:hidden;transition:opacity var(--dur-normal),visibility var(--dur-normal)}
body.menu-open .menu-backdrop{opacity:1;visibility:visible}
.menu-drawer{position:fixed;inset:0;z-index:85;display:flex;flex-direction:column;color:#fff;overflow:hidden;background:linear-gradient(160deg,rgba(0,105,126,.82) 0%,rgba(11,58,69,.9) 100%);-webkit-backdrop-filter:blur(22px) saturate(135%);backdrop-filter:blur(22px) saturate(135%);opacity:0;visibility:hidden;transform:scale(1.03);transition:opacity var(--dur-normal) var(--ease-out),transform var(--dur-slow) var(--ease-out),visibility var(--dur-slow)}
body.menu-open .menu-drawer{opacity:1;visibility:visible;transform:none}
.menu-drawer::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;top:-170px;right:-120px;background:radial-gradient(circle,rgba(0,151,178,.55),transparent 70%);filter:blur(40px);pointer-events:none}
.menu-drawer::after{content:"";position:absolute;width:440px;height:440px;border-radius:50%;bottom:-150px;left:-130px;background:radial-gradient(circle,rgba(224,154,44,.26),transparent 70%);filter:blur(50px);pointer-events:none}
.menu-top,.menu-nav,.menu-foot{position:relative;z-index:1}
.menu-top{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5);border-bottom:1px solid rgba(255,255,255,.14)}
.menu-top .brand{display:flex;align-items:center;gap:var(--space-3)}
.menu-top .brand img{height:32px;width:auto}
.menu-close{width:44px;height:44px;flex:none;border:none;background:rgba(255,255,255,.12);border-radius:var(--radius-md);display:grid;place-items:center;cursor:pointer;color:#fff;transition:background var(--dur-fast)}
.menu-close:hover{background:rgba(255,255,255,.22)}
.menu-close svg{width:22px;height:22px}
.menu-nav{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--space-1);padding:var(--space-6)}
.menu-nav a{display:block;text-align:center;padding:var(--space-3) var(--space-4);font-family:var(--font-nav);text-transform:uppercase;font-weight:300;font-size:1.5rem;letter-spacing:.1em;color:#fff;opacity:0;transform:translateY(16px);transition:opacity var(--dur-slow) var(--ease-out) var(--d,0ms),transform var(--dur-slow) var(--ease-out) var(--d,0ms),color var(--dur-fast)}
.menu-nav a:hover{color:var(--teal-200)}
body.menu-open .menu-nav a{opacity:1;transform:none}
body.menu-open .menu-nav a:nth-child(1){--d:80ms}
body.menu-open .menu-nav a:nth-child(2){--d:130ms}
body.menu-open .menu-nav a:nth-child(3){--d:180ms}
body.menu-open .menu-nav a:nth-child(4){--d:230ms}
body.menu-open .menu-nav a:nth-child(5){--d:280ms}
body.menu-open .menu-nav a:nth-child(6){--d:330ms}
.menu-foot{padding:var(--space-7) var(--space-6) var(--space-8);border-top:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}
.menu-phone{display:inline-flex;align-items:center;gap:var(--space-3);font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-h4);color:#fff}
.menu-phone svg{width:20px;height:20px;color:var(--teal-200)}
.menu-foot .btn{width:100%;max-width:320px}
@media (prefers-reduced-motion:reduce){.menu-nav a{opacity:1;transform:none}.menu-drawer{transform:none}}

/* ---------- Hero (centered editorial) ---------- */
.hero{position:relative;overflow:hidden;text-align:center;color:#fff;background:linear-gradient(150deg,var(--teal-700) 0%,var(--teal-900) 100%)}
.hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,58,69,.62) 0%,rgba(11,58,69,.82) 100%)}
.hero .container{position:relative;z-index:2;padding-top:var(--space-10);padding-bottom:var(--space-10)}
.hero .pill{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--amber-50);color:var(--amber-700);font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-sm);padding:.4rem .9rem;border-radius:var(--radius-pill);margin-bottom:var(--space-5)}
.hero .pill svg{width:16px;height:16px;fill:var(--amber-500)}
.hero h1{font-size:var(--fs-h1);line-height:var(--lh-tight);font-weight:var(--fw-bold);max-width:14ch;margin-inline:auto;color:#fff}
.hero .sub{margin:var(--space-5) auto 0;font-size:var(--fs-lg);color:rgba(255,255,255,.86);line-height:var(--lh-relaxed);max-width:620px}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;margin-top:var(--space-7)}
.hero-micro{margin-top:var(--space-5);font-size:var(--fs-sm);color:rgba(255,255,255,.8);display:inline-flex;align-items:center;gap:var(--space-2);justify-content:center}
.hero-micro svg{width:16px;height:16px;stroke:var(--amber-500)}

/* trust-badge row */

/* ---------- Proof strip (trust bar of 6 points) ---------- */
/* Full-width trust band that acts as a divider between the hero and the page */
.proof{background:var(--surface-card);border-block:1px solid var(--border-subtle)}
.trustbar{display:grid;grid-template-columns:repeat(3,1fr)}
.trust-pt{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-3);padding:var(--space-7) var(--space-5);border-right:1px solid var(--border-subtle)}
.trust-pt:last-child{border-right:none}
.trust-pt .ic{flex:none;width:52px;height:52px;border-radius:var(--radius-md);background:var(--surface-brand-soft);color:var(--teal-600);display:grid;place-items:center}
.trust-pt .ic svg{width:26px;height:26px}
.trust-pt b{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-lg);color:var(--text-primary);display:block;letter-spacing:var(--ls-tight)}
.trust-pt small{display:block;margin-top:2px;font-size:var(--fs-sm);color:var(--text-secondary);line-height:var(--lh-snug)}

/* ---------- Problem ---------- */
.problem{background:var(--surface-page)}
.problem-split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.problem-media{position:relative;min-height:0}
.problem-media .img-ph{position:absolute;inset:0;height:100%;border-radius:0;border-width:0 2px 0 0}
.problem-body{padding-block:var(--space-10);padding-left:clamp(var(--space-6),5vw,var(--space-9));padding-right:max(var(--space-6),calc((100vw - var(--container-xl))/2 + var(--space-5)))}
.problem-body h2{font-size:var(--fs-h2);line-height:var(--lh-snug)}
.problem-body .lead{margin-top:var(--space-4);font-size:var(--fs-lg);color:var(--text-secondary);line-height:var(--lh-relaxed)}
.pain-list{margin-top:var(--space-6);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);overflow:hidden}
.pain{display:flex;gap:var(--space-4);align-items:center;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-subtle);transition:background var(--dur-normal) var(--ease-out)}
.pain:last-child{border-bottom:none}
.pain:hover{background:var(--surface-page)}
.pain .x{flex:none;width:38px;height:38px;border-radius:var(--radius-md);background:var(--amber-50);color:var(--amber-700);display:grid;place-items:center}
.pain .x svg{width:19px;height:19px}
.pain span{font-size:var(--fs-base);color:var(--text-primary);line-height:var(--lh-snug)}
.reassure{display:flex;gap:var(--space-4);align-items:center;margin-top:var(--space-7);padding:var(--space-5) var(--space-6);background:var(--surface-card);border:1px solid var(--border-subtle);border-left:4px solid var(--teal-500);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.reassure .ic{flex:none;width:46px;height:46px;border-radius:var(--radius-pill);background:var(--surface-brand-soft);color:var(--teal-600);display:grid;place-items:center}
.reassure .ic svg{width:24px;height:24px}
.reassure p{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-h4);color:var(--text-primary);line-height:var(--lh-snug)}
.reassure strong{color:var(--teal-600)}
@media (max-width:980px){
  .problem-split{grid-template-columns:1fr}
  .problem-media{min-height:300px}
  .problem-media .img-ph{border-width:0 0 2px 0}
  .problem-body{padding:var(--space-9) var(--space-5)}
}

/* ---------- Flagship paths ---------- */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.path{border-radius:var(--radius-xl);padding:var(--space-8);position:relative;background:var(--surface-card);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm)}
.path.catchup{border-color:var(--amber-500);box-shadow:0 0 0 1px var(--amber-500),var(--shadow-md);background:linear-gradient(180deg,var(--amber-50) 0%,#fff 22%)}
.path .tag{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;font-weight:var(--fw-semibold);display:inline-block;margin-bottom:var(--space-4);padding:.35rem .75rem;border-radius:var(--radius-pill);background:var(--teal-50);color:var(--teal-700)}
.path.catchup .tag{background:var(--amber-500);color:#3a2708}
.path h3{font-size:var(--fs-h3);margin-bottom:var(--space-3)}
.path>p{color:var(--text-secondary);margin-bottom:var(--space-5);line-height:var(--lh-relaxed)}
.path ul{display:grid;gap:var(--space-3);margin-bottom:var(--space-7)}
.path li{display:flex;gap:var(--space-3);align-items:center;font-size:var(--fs-sm);color:var(--text-secondary)}
.path li svg{width:18px;height:18px;flex:none;stroke:var(--teal-500)}
.path.catchup li svg{stroke:var(--amber-700)}

/* ---------- Services grid (real isometric illustrations) ---------- */
/* One seamless white grid: hairline dividers, no gaps, subtle hover tint */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:1px;background:var(--border-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden}
.svc{display:flex;flex-direction:column;background:var(--surface-card);padding:var(--space-6);transition:background var(--dur-normal) var(--ease-out)}
.svc:hover{background:var(--surface-brand-soft)}
.svc .tile{width:84px;height:84px;border-radius:var(--radius-lg);background:var(--surface-card);display:grid;place-items:center;margin-bottom:var(--space-4);transition:background var(--dur-normal) var(--ease-out)}
.svc:hover .tile{background:var(--surface-brand-soft)}
.svc .tile img{width:60px;height:60px;object-fit:contain}
.svc h3{font-size:var(--fs-h4);margin-bottom:var(--space-2)}
.svc p{color:var(--text-secondary);font-size:var(--fs-sm);line-height:var(--lh-relaxed)}
.svc .more{margin-top:auto;padding-top:var(--space-4);align-self:flex-start;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--text-brand);display:inline-flex;gap:6px;align-items:center}

/* ---------- Cleanup feature band (dark, centerpiece) ---------- */
.cleanup{position:relative;overflow:hidden;background:var(--surface-brand-deep);color:#fff}
/* soft colour glows that the frosted-glass panels blur over */
.cleanup::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;top:-180px;right:-90px;background:radial-gradient(circle,rgba(0,151,178,.6),transparent 70%);filter:blur(30px);pointer-events:none}
.cleanup::after{content:"";position:absolute;width:460px;height:460px;border-radius:50%;bottom:-160px;left:-120px;background:radial-gradient(circle,rgba(224,154,44,.30),transparent 70%);filter:blur(40px);pointer-events:none}
.cleanup .container{position:relative;z-index:1}
.cleanup .eyebrow{color:var(--amber-500)}
.cleanup .head h2{color:#fff}
.cleanup .head p{color:rgba(255,255,255,.82)}
.cleanup-head{max-width:760px;margin-bottom:var(--space-9)}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.timeline.cols3{grid-template-columns:repeat(3,1fr)}
/* About page: services directory links */
.about-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-3)}
.about-links a{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--text-primary);transition:border-color var(--dur-normal),box-shadow var(--dur-normal),color var(--dur-normal)}
.about-links a::after{content:"\2192";margin-left:auto;color:var(--text-brand);transition:transform var(--dur-normal) var(--ease-out)}
.about-links a:hover{border-color:var(--teal-300);box-shadow:var(--shadow-sm);color:var(--text-brand)}
.about-links a:hover::after{transform:translateX(4px)}
.tl-step{background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.tl-step .n{width:48px;height:48px;border-radius:var(--radius-pill);background:var(--teal-500);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-h4);margin-bottom:var(--space-4)}
.tl-step h3{color:#fff;font-size:var(--fs-h4);margin-bottom:var(--space-2)}
.tl-step p{color:rgba(255,255,255,.74);font-size:var(--fs-sm);line-height:var(--lh-relaxed)}
.cleanup-foot{margin-top:var(--space-8);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-5) var(--space-7);padding:var(--space-7);border-radius:var(--radius-xl);
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.05));
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--shadow-xl)}
.cleanup-foot .copy{flex:1;min-width:260px}
.cleanup-foot p{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-lg);color:#fff}
.cleanup-foot small{display:block;font-family:var(--font-body);font-weight:var(--fw-regular);color:rgba(255,255,255,.72);font-size:var(--fs-sm);margin-top:4px}
/* Services page: Cleanup & Catch-Up spotlight (reuses the dark frosted-glass treatment) */
.svc-spotlight .spotlight-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-9);align-items:center}
.svc-spotlight .head p{margin-top:var(--space-3)}
.spotlight-actions{margin-top:var(--space-7);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6)}
.spotlight-link{color:#fff;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-base)}
.spotlight-link:hover{color:var(--amber-500)}
.spotlight-panel{padding:var(--space-7);border-radius:var(--radius-xl);
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.05));
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--shadow-xl)}
.spotlight-panel-title{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-lg);color:#fff;margin-bottom:var(--space-5)}
.spotlight-panel ul{display:grid;gap:var(--space-4)}
.spotlight-panel li{display:flex;gap:var(--space-3);align-items:flex-start;color:rgba(255,255,255,.88);font-size:var(--fs-base);line-height:var(--lh-snug)}
.spotlight-panel li svg{width:22px;height:22px;flex:0 0 22px;margin-top:1px;stroke:var(--teal-300)}
@media (max-width:860px){
  .svc-spotlight .spotlight-grid{grid-template-columns:1fr;gap:var(--space-7)}
  .spotlight-actions .btn{width:100%}
}

/* ---------- Industries ---------- */
/* Who-we-work-with: mirror of the Problem section (image on the RIGHT), in blue */
.industries{background:var(--surface-brand-soft)}
.industries-split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.industries-body{padding-block:var(--space-10);padding-left:max(var(--space-6),calc((100vw - var(--container-xl))/2 + var(--space-5)));padding-right:clamp(var(--space-6),5vw,var(--space-9))}
.industries-body h2{font-size:var(--fs-h2);line-height:var(--lh-snug)}
.industries-body .lead{margin-top:var(--space-4);font-size:var(--fs-lg);color:var(--text-secondary);line-height:var(--lh-relaxed)}
.industries-media{position:relative;min-height:0}
.industries-media .img-ph{position:absolute;inset:0;height:100%;border-radius:0;border-width:0 0 0 2px}
.ind-list{margin-top:var(--space-6);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);overflow:hidden}
.ind-row{display:flex;gap:var(--space-4);align-items:center;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-subtle);transition:background var(--dur-normal) var(--ease-out)}
.ind-row:last-child{border-bottom:none}
.ind-row:hover{background:var(--surface-brand-soft)}
.ind-row .ic{flex:none;width:40px;height:40px;border-radius:var(--radius-md);background:var(--teal-100);color:var(--teal-700);display:grid;place-items:center}
.ind-row .ic svg{width:20px;height:20px}
.ind-row h3{font-size:var(--fs-base);font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--text-primary)}
.ind-row p{font-size:var(--fs-xs);color:var(--text-muted)}
@media (max-width:980px){
  .industries-split{grid-template-columns:1fr}
  .industries-media{min-height:300px}
  .industries-media .img-ph{border-width:2px 0 0 0}
  .industries-body{padding:var(--space-9) var(--space-5)}
}

/* ---------- Pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6);max-width:860px;margin-inline:auto;align-items:start}
.price{border:1px solid var(--border-subtle);border-radius:var(--radius-xl);overflow:hidden;background:var(--surface-card);box-shadow:var(--shadow-sm)}
.price.featured{border:2px solid var(--teal-500);box-shadow:var(--shadow-lg)}
.price-top{padding:var(--space-6);border-bottom:1px solid var(--border-subtle)}
.price.featured .price-top{background:var(--surface-brand-soft)}
.price .plan{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-h4);display:flex;align-items:center;gap:var(--space-3)}
.price .ribbon{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-xs);background:var(--teal-500);color:#fff;padding:.2rem .65rem;border-radius:var(--radius-pill)}
.price .from{font-size:var(--fs-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:var(--ls-caps);font-family:var(--font-mono);display:block;margin-top:var(--space-4)}
.price .amount{font-family:var(--font-display);letter-spacing:var(--ls-tight);margin-top:var(--space-1)}
.price .amount b{font-size:2.75rem;font-weight:var(--fw-black)}
.price .amount small{font-size:var(--fs-sm);color:var(--text-muted);font-weight:var(--fw-medium)}
.price ul{display:grid;gap:var(--space-3);padding:var(--space-6)}
.price li{display:flex;gap:var(--space-3);align-items:center;font-size:var(--fs-sm);color:var(--text-secondary)}
.price li svg{width:18px;height:18px;stroke:var(--teal-500);flex:none}
.price .pay{padding:0 var(--space-6) var(--space-6)}
.price .btn{width:100%}
.price-note{margin:var(--space-6) auto 0;text-align:center;font-size:var(--fs-sm);color:var(--text-muted);max-width:660px;line-height:var(--lh-relaxed)}
.price-aside{margin:var(--space-4) auto 0;text-align:center;font-size:var(--fs-sm);color:var(--text-muted);max-width:680px;line-height:var(--lh-relaxed)}
.price-aside a{color:var(--text-brand);font-weight:var(--fw-semibold)}

/* ---------- Process ---------- */
.process{background:var(--surface-card)}
.proc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-7)}
.proc{position:relative;text-align:center;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:var(--space-8) var(--space-6);transition:transform var(--dur-normal) var(--ease-out),box-shadow var(--dur-normal)}
.proc:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.proc .n{width:60px;height:60px;margin:0 auto var(--space-5);border-radius:var(--radius-pill);background:var(--teal-500);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-h3);box-shadow:var(--shadow-sm)}
.proc h3{font-size:var(--fs-h4);margin-bottom:var(--space-2)}
.proc p{color:var(--text-secondary);font-size:var(--fs-sm);line-height:var(--lh-relaxed);max-width:34ch;margin-inline:auto}
/* connector between steps (desktop) */
.proc:not(:last-child)::after{content:"";position:absolute;top:calc(var(--space-8) + 30px);left:100%;width:var(--space-7);height:2px;background:var(--border-default)}
@media (max-width:980px){.proc-grid{grid-template-columns:1fr;gap:var(--space-5);max-width:560px;margin-inline:auto}.proc:not(:last-child)::after{display:none}}

/* ---------- Reviews ---------- */
.reviews{background:var(--surface-page)}
.rev-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:var(--space-5)}
.review{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-6);display:flex;flex-direction:column}
.review.feature{background:var(--surface-brand-deep);border-color:transparent}
.stars{display:flex;gap:2px;margin-bottom:var(--space-4)}
.stars svg{width:18px;height:18px;fill:var(--amber-500)}
.review p{color:var(--text-secondary);line-height:var(--lh-relaxed);flex:1}
.review.feature p{color:#fff;font-size:var(--fs-lg);font-family:var(--font-display);font-weight:var(--fw-medium);line-height:var(--lh-snug)}
.who{margin-top:var(--space-5);display:flex;align-items:center;gap:var(--space-3)}
.who .av{width:42px;height:42px;border-radius:var(--radius-pill);background:var(--teal-100);color:var(--teal-700);display:grid;place-items:center;font-family:var(--font-display);font-weight:var(--fw-bold)}
.review.feature .who .av{background:var(--teal-500);color:#fff}
.who b{font-family:var(--font-display);font-size:var(--fs-sm)}
.who small{color:var(--text-muted);font-size:var(--fs-xs)}
.review.feature .who b{color:#fff}.review.feature .who small{color:rgba(255,255,255,.7)}
.rev-cta{text-align:center;margin-top:var(--space-8);display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap}

/* ---------- Local SEO ---------- */
.local{background:var(--surface-card)}
.local-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7);align-items:stretch}
.contact{border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-7)}
.contact .row{display:flex;gap:var(--space-4);align-items:flex-start;padding-block:var(--space-4);border-bottom:1px solid var(--border-subtle)}
.contact .row:last-of-type{border-bottom:none}
.contact .ic{width:44px;height:44px;flex:none;border-radius:var(--radius-md);background:var(--surface-brand-soft);color:var(--teal-600);display:grid;place-items:center}
.contact .ic svg{width:22px;height:22px}
.contact small{color:var(--text-muted);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--ls-wide)}
.contact .row a,.contact .row span.v{display:block;font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--text-primary);font-size:var(--fs-base)}
.contact .row a:hover{color:var(--text-brand)}
.areas{margin-top:var(--space-5);padding:var(--space-5);background:var(--surface-page);border-radius:var(--radius-lg)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}
.chips span{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);padding:.35rem .85rem;font-size:var(--fs-sm);color:var(--text-secondary)}
.contact-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.map{border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--border-subtle);min-height:440px;position:relative;background:var(--surface-sunken)}
.map .map-embed{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ---------- FAQ ---------- */
.faq{background:var(--surface-page)}
.faq-wrap{max-width:var(--container-lg);margin-inline:auto}
.faq-item{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);margin-bottom:var(--space-3);overflow:hidden;background:var(--surface-card)}
.faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-5);font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-lg)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .plus{flex:none;width:28px;height:28px;border-radius:var(--radius-pill);background:var(--surface-brand-soft);color:var(--teal-600);display:grid;place-items:center;font-size:18px;font-weight:bold;transition:transform var(--dur-normal)}
.faq-item[open] .plus{transform:rotate(45deg)}
.faq-item .a{padding:0 var(--space-5) var(--space-5);color:var(--text-secondary);line-height:var(--lh-relaxed)}

/* ---------- Final CTA ---------- */
.final{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--teal-700) 0%,var(--teal-900) 100%);color:#fff;text-align:center}
.final::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;top:-200px;left:-120px;background:radial-gradient(circle,rgba(0,151,178,.55),transparent 70%);filter:blur(30px);pointer-events:none}
.final::after{content:"";position:absolute;width:480px;height:480px;border-radius:50%;bottom:-180px;right:-120px;background:radial-gradient(circle,rgba(224,154,44,.28),transparent 70%);filter:blur(40px);pointer-events:none}
.final .container{position:relative;z-index:1}
.final-card{max-width:780px;margin:0 auto;padding:var(--space-9) clamp(var(--space-6),5vw,var(--space-9));border-radius:var(--radius-xl);
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),var(--shadow-xl)}
.final h2{color:#fff;font-size:var(--fs-h2);max-width:680px;margin-inline:auto}
.final p{color:rgba(255,255,255,.9);font-size:var(--fs-lg);max-width:620px;margin:var(--space-5) auto 0;line-height:var(--lh-relaxed)}
.final-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;margin-top:var(--space-7)}

/* ---------- Footer ---------- */
.footer{background:var(--surface-inverse);color:rgba(255,255,255,.72);padding-block:var(--space-9) var(--space-7)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:var(--space-7);padding-bottom:var(--space-8);border-bottom:1px solid rgba(255,255,255,.12)}
.footer .f-brand img{height:64px;width:auto;margin-bottom:var(--space-4)}
.footer p{font-size:var(--fs-sm);line-height:var(--lh-relaxed)}
.footer .f-award{margin-top:var(--space-3);font-weight:var(--fw-semibold);color:rgba(255,255,255,.92)}
.footer .f-award::before{content:"\2605 ";color:var(--amber-500)}
.footer h4{color:#fff;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:var(--ls-caps);font-family:var(--font-mono);margin-bottom:var(--space-4)}
.footer ul{display:grid;gap:var(--space-3)}
.footer ul a{font-size:var(--fs-sm);color:rgba(255,255,255,.72);transition:color var(--dur-normal)}
.footer ul a:hover{color:#fff}
.footer .nap{font-style:normal;font-size:var(--fs-sm);line-height:var(--lh-relaxed)}
.footer .nap a{color:rgba(255,255,255,.72)}
.footer .f-badges{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-5);flex-wrap:wrap}
.footer .f-badges img{height:72px;width:auto}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);padding-top:var(--space-6);font-size:var(--fs-xs);color:rgba(255,255,255,.5)}

/* ---------- Responsive ---------- */
/* ---------- Image placeholders (swap each for real photography) ---------- */
.img-ph{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--space-2);background:var(--surface-brand-soft);border:2px dashed var(--teal-300);border-radius:var(--radius-xl);color:var(--teal-700);padding:var(--space-6)}
.img-ph svg{width:34px;height:34px;stroke:var(--teal-500);opacity:.85}
.img-ph b{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-base);color:var(--teal-800)}
.img-ph small{font-size:var(--fs-xs);color:var(--text-muted);max-width:36ch;line-height:var(--lh-snug)}
.img-ph .dim{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--teal-700);background:#fff;border:1px solid var(--teal-200);border-radius:var(--radius-pill);padding:.15rem .6rem}
.img-ph .alt{font-style:italic;color:var(--teal-700)}
.ratio-43{aspect-ratio:4/3}.ratio-169{aspect-ratio:16/9}.ratio-11{aspect-ratio:1/1}.ratio-219{aspect-ratio:21/9}

/* ---------- Blog / insights ---------- */
.blog{background:var(--surface-brand-soft);border-block:1px solid var(--teal-100)}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,360px));justify-content:center;gap:var(--space-5)}
.post{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--dur-normal) var(--ease-out),box-shadow var(--dur-normal)}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.post .img-ph{border-radius:0;border:none;border-bottom:2px dashed var(--teal-200)}
.post .body{padding:var(--space-5);display:flex;flex-direction:column;flex:1}
.post .cat{font-family:var(--font-mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--text-brand)}
.post h3{font-size:var(--fs-h4);margin:var(--space-2) 0 var(--space-3)}
.post p{font-size:var(--fs-sm);color:var(--text-secondary);line-height:var(--lh-relaxed);flex:1}
.post .more{margin-top:var(--space-4);font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--text-brand)}
.post-meta-row{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-muted)}
.post-meta-row .more{margin-top:0}

/* ---------- Mobile sticky CTA bar (conversion) ---------- */
.mobile-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--border-subtle);padding:var(--space-3) var(--space-4);gap:var(--space-3);box-shadow:0 -6px 18px rgba(11,58,69,.08)}
.mobile-cta .btn{flex:1;height:48px}

/* Collapse nav to hamburger early enough that the links never crowd */
@media (max-width:1080px){
  .nav-links,.nav-phone{display:none}
  .nav-cta .btn-primary{display:none}
  .nav-toggle{display:block}
}
@media (max-width:980px){
  :root{--fs-h1:2.4rem;--fs-h2:1.85rem;--fs-h3:1.4rem}
  .paths,.local-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .rev-grid{grid-template-columns:1fr 1fr}.review.feature{grid-column:1/-1}
  .timeline{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .section{padding-block:var(--space-9)}
  .services-grid,.price-grid,.rev-grid,.timeline,.footer-grid,.blog-grid{grid-template-columns:1fr}
  .trustbar{grid-template-columns:1fr}
  .trust-pt{border-right:none;border-bottom:1px solid var(--border-subtle)}
  .trust-pt:last-child{border-bottom:none}
  .review.feature{grid-column:auto}
  .mobile-cta{display:flex}
  main{padding-bottom:72px}
  .cleanup-foot{flex-direction:column;align-items:flex-start;padding:var(--space-6)}
  .cleanup-foot .btn{width:100%}
  .hero h1{font-size:2.05rem}
  .price .amount b{font-size:2.4rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);z-index:100}
.skip:focus{left:var(--space-4);top:var(--space-4)}

/* ============================================================
   INNER PAGES, BLOG & UTILITY (full-site templates)
   ============================================================ */
.page-hero{background:var(--surface-page);border-bottom:1px solid var(--border-subtle);padding-block:var(--space-9)}
.page-hero .eyebrow{margin-bottom:var(--space-3)}
.page-hero h1{font-size:var(--fs-h1);line-height:var(--lh-tight)}
.page-hero .meta{color:var(--text-muted);font-size:var(--fs-sm);margin-top:var(--space-3)}
.prose{max-width:760px;font-size:var(--fs-lg);line-height:var(--lh-relaxed);color:var(--text-secondary)}
.prose>*:first-child{margin-top:0}
.prose h2{font-family:var(--font-display);font-size:var(--fs-h2);color:var(--text-primary);line-height:var(--lh-snug);margin:var(--space-8) 0 var(--space-3)}
.prose h3{font-family:var(--font-display);font-size:var(--fs-h3);color:var(--text-primary);line-height:var(--lh-snug);margin:var(--space-6) 0 var(--space-2)}
.prose p{margin-bottom:var(--space-4)}
.prose a{color:var(--text-brand);text-decoration:underline;text-underline-offset:2px}
.prose ul,.prose ol{margin:0 0 var(--space-4) var(--space-6)}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose li{margin-bottom:var(--space-2)}
.prose img{border-radius:var(--radius-lg);margin:var(--space-5) 0}
.prose blockquote{border-left:4px solid var(--teal-500);background:var(--surface-brand-soft);padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);margin:var(--space-5) 0;font-family:var(--font-display);color:var(--text-primary)}
/* Single blog post: centered, editorial card layout */
.post-single{background:var(--surface-page)}
.post-head{text-align:center;padding:var(--space-9) var(--space-5)}
.post-head .container{max-width:760px}
.post-kicker{display:inline-block;background:var(--surface-brand-soft);color:var(--text-brand);padding:.45em 1.1em;border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--ls-caps);text-transform:uppercase}
.post-head h1{font-size:clamp(2.1rem,1.3rem + 2.8vw,var(--fs-h1));line-height:var(--lh-tight);margin-top:var(--space-4)}
.post-meta{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5);color:var(--text-muted);font-family:var(--font-mono);font-size:var(--fs-sm)}
.post-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--border-default)}
.post-canvas{max-width:840px;margin:0 auto;padding:0 var(--space-5)}
.post-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:clamp(var(--space-6),3vw + 1rem,var(--space-9));margin-top:calc(-1 * var(--space-7))}
.post-card .prose{max-width:none}
.post-card .prose>p:first-of-type{font-size:1.2rem;line-height:1.7;color:var(--text-primary)}
.post-card .prose h2{margin-top:var(--space-8);padding-top:var(--space-5);border-top:1px solid var(--border-subtle)}
.post-card .prose>h2:first-child,.post-card .prose>h3:first-child{margin-top:0;padding-top:0;border-top:0}
.post-card .prose ul li::marker{color:var(--teal-500)}
.post-card .prose ol li::marker{color:var(--text-brand);font-weight:var(--fw-semibold)}
.post-card .prose blockquote{font-size:1.2rem}
.post-foot{max-width:840px;margin:var(--space-7) auto var(--space-10);padding:0 var(--space-5);text-align:center}
.post-service{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-2);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-5) var(--space-7)}
.post-service .lbl{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted)}
.post-service a{color:var(--text-brand);font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-h4)}
.post-service a:hover{text-decoration:underline}
.post-back{display:inline-block;margin-top:var(--space-6);font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:var(--fw-semibold);letter-spacing:var(--ls-wide);color:var(--text-muted)}
.post-back:hover{color:var(--text-brand)}
.related-insights{background:var(--surface-brand-soft);border-block:1px solid var(--teal-100)}
.pagination{display:flex;gap:var(--space-2);margin-top:var(--space-8);flex-wrap:wrap}
.pagination .page-numbers{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 var(--space-3);border:1px solid var(--border-subtle);border-radius:var(--radius-md);font-family:var(--font-display);font-weight:var(--fw-medium);color:var(--text-secondary)}
.pagination .page-numbers.current{background:var(--teal-500);color:#fff;border-color:var(--teal-500)}
.pagination a.page-numbers:hover{border-color:var(--teal-400);color:var(--text-brand)}
.text-center{text-align:center}
.pagination .nav-links{display:flex;gap:var(--space-2);flex-wrap:wrap}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;word-wrap:normal !important}

/* ============================================================
   CONTACT FORM (page-contact.php)
   ============================================================ */
.form-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:var(--space-7)}
.form-card h2{font-size:var(--fs-h3);margin-bottom:var(--space-5)}
.form{display:grid;gap:var(--space-4)}
.form .field{display:grid;gap:var(--space-2)}
.form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.form label{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--text-primary)}
.form input,.form textarea{font-family:var(--font-body);font-size:var(--fs-base);color:var(--text-primary);background:var(--surface-page);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:.7rem .85rem;width:100%;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--teal-500);box-shadow:var(--focus-ring)}
.form textarea{resize:vertical;min-height:120px}
.form .btn{margin-top:var(--space-2);justify-self:start}
.form .hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-notice{padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);margin-bottom:var(--space-5);font-family:var(--font-display);font-weight:var(--fw-medium);line-height:var(--lh-snug)}
.form-notice.success{background:var(--green-50);color:var(--green-700);border:1px solid color-mix(in srgb,var(--green-500) 25%,transparent)}
.form-notice.error{background:var(--red-50);color:var(--red-700);border:1px solid color-mix(in srgb,var(--red-500) 25%,transparent)}
@media (max-width:640px){.form .field-row{grid-template-columns:1fr}}
.form select{font-family:var(--font-body);font-size:var(--fs-base);color:var(--text-primary);background:var(--surface-page);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:.7rem .85rem;width:100%;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234e5c63' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .85rem center;padding-right:2.2rem;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.form select:focus{outline:none;border-color:var(--teal-500);box-shadow:var(--focus-ring)}

/* CRA calculator promo band (drop-in link to the estimator) */
.calc-promo{display:flex;align-items:center;gap:var(--space-5);background:var(--surface-card);border:1px solid var(--border-subtle);border-left:4px solid var(--teal-500);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-6) var(--space-7)}
.calc-promo .ic{flex:0 0 auto;width:52px;height:52px;border-radius:var(--radius-lg);background:var(--surface-brand-soft);color:var(--teal-600);display:grid;place-items:center}
.calc-promo .ic svg{width:28px;height:28px}
.calc-promo-body{flex:1;min-width:0}
.calc-promo-body h3{font-size:var(--fs-h4);margin-bottom:var(--space-1)}
.calc-promo-body p{color:var(--text-secondary);font-size:var(--fs-base);line-height:var(--lh-snug)}
.calc-promo .btn{flex:0 0 auto;white-space:nowrap}
@media (max-width:720px){.calc-promo{flex-direction:column;align-items:flex-start}.calc-promo .btn{width:100%;justify-content:center}}

/* CRA balance breakdown: balanced 3-up explainer cards */
.cra-breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-top:var(--space-7)}
.cb-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:var(--space-7);display:flex;flex-direction:column}
.cb-ic{width:56px;height:56px;border-radius:var(--radius-lg);background:var(--surface-brand-soft);color:var(--teal-600);display:grid;place-items:center;margin-bottom:var(--space-4)}
.cb-ic.amber{background:var(--amber-50);color:var(--amber-700)}
.cb-ic svg{width:28px;height:28px}
.cb-card h3{font-family:var(--font-display);font-size:var(--fs-h4);color:var(--text-primary);margin-bottom:var(--space-2)}
.cb-card p{color:var(--text-secondary);font-size:var(--fs-base);line-height:var(--lh-relaxed)}
@media (max-width:860px){.cra-breakdown{grid-template-columns:1fr;gap:var(--space-4)}}

/* CRA interest & penalty estimator */
.cra-rate-note{display:flex;align-items:center;gap:var(--space-4);background:var(--surface-brand-soft);border:1px solid var(--teal-100);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);margin-bottom:var(--space-5)}
.cc-rate-badge{flex:0 0 auto;display:inline-grid;place-items:center;min-width:60px;height:60px;padding:0 var(--space-3);border-radius:var(--radius-md);background:var(--teal-500);color:#fff;font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-h3);line-height:1}
.cc-rate-text{color:var(--text-secondary);font-size:var(--fs-sm);line-height:var(--lh-relaxed)}
.cc-rate-text b{color:var(--text-primary);font-weight:var(--fw-semibold)}
@media (max-width:560px){.cra-rate-note{flex-direction:column;align-items:flex-start}}
.cra-calc-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-6);align-items:start}
.cra-calc .cc-help{color:var(--text-muted);font-size:var(--fs-sm)}
.cra-calc .cc-check{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-body);font-weight:var(--fw-regular);color:var(--text-secondary);font-size:var(--fs-sm);cursor:pointer;line-height:var(--lh-snug)}
.cra-calc .cc-check input{width:auto;flex:0 0 auto;accent-color:var(--teal-500)}
.cra-results{background:var(--surface-brand-deep);color:#fff;border-radius:var(--radius-xl);padding:var(--space-7);box-shadow:var(--shadow-lg);position:sticky;top:calc(var(--space-9) + 40px)}
.cc-error{background:rgba(255,255,255,.12);color:#fff;padding:var(--space-4);border-radius:var(--radius-md);margin-bottom:var(--space-4);font-size:var(--fs-sm);line-height:var(--lh-snug)}
.cc-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid rgba(255,255,255,.14)}
.cc-row span{color:rgba(255,255,255,.82)}
.cc-row b{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-h4);color:#fff;white-space:nowrap}
.cc-total{border-bottom:0;margin-top:var(--space-2);border-top:2px solid rgba(255,255,255,.3);padding-top:var(--space-4)}
.cc-total span{color:#fff;font-family:var(--font-display);font-weight:var(--fw-semibold)}
.cc-total b{font-size:2rem;color:var(--teal-200)}
.cc-detail{color:rgba(255,255,255,.62);font-size:var(--fs-sm);margin:var(--space-4) 0 var(--space-5);line-height:var(--lh-relaxed)}
#cc-cta{width:100%;justify-content:center}
.cra-disclaimer{margin-top:var(--space-6);padding:var(--space-5);background:var(--surface-sunken);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);color:var(--text-muted);font-size:var(--fs-sm);line-height:var(--lh-relaxed)}
.cra-disclaimer a{color:var(--text-brand);text-decoration:underline;text-underline-offset:2px}
@media (max-width:860px){.cra-calc-grid{grid-template-columns:1fr}.cra-results{position:static}}
.cra-reassure{margin-top:var(--space-6);display:flex;align-items:center;gap:var(--space-5);background:var(--surface-brand-soft);border:1px solid var(--teal-100);border-radius:var(--radius-xl);padding:var(--space-6) var(--space-7)}
.cra-reassure .ic{flex:0 0 auto;width:52px;height:52px;border-radius:var(--radius-pill);background:var(--teal-500);color:#fff;display:grid;place-items:center}
.cra-reassure .ic svg{width:26px;height:26px}
.cra-reassure-body{flex:1;min-width:0}
.cra-reassure-body h3{font-size:var(--fs-h4);margin-bottom:var(--space-2);color:var(--text-primary)}
.cra-reassure-body p{color:var(--text-secondary);font-size:var(--fs-base);line-height:var(--lh-relaxed);max-width:62ch}
.cra-reassure-act{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
.cra-reassure-act .btn{white-space:nowrap}
.cra-reassure-phone{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--text-brand)}
.cra-reassure-phone:hover{text-decoration:underline}
@media (max-width:760px){.cra-reassure{flex-direction:column;align-items:flex-start;text-align:left}.cra-reassure-act{align-items:stretch;width:100%}.cra-reassure-act .btn{width:100%;justify-content:center}.cra-reassure-phone{text-align:center}}

/* ---------- Feature/outcome card grid (.ind): used on inner pages ---------- */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}
.ind{display:flex;align-items:center;gap:var(--space-4);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-5);transition:border-color var(--dur-normal),transform var(--dur-normal) var(--ease-out)}
.ind:hover{border-color:var(--teal-300);transform:translateY(-3px)}
.ind .ic{width:48px;height:48px;flex:none;border-radius:var(--radius-md);background:var(--surface-brand-soft);color:var(--teal-600);display:grid;place-items:center}
.ind .ic svg{width:24px;height:24px}
.ind h3{font-size:var(--fs-base);font-family:var(--font-display);font-weight:var(--fw-semibold)}
.ind p{font-size:var(--fs-xs);color:var(--text-muted)}
@media (max-width:1024px){.ind-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ind-grid{grid-template-columns:1fr}}

/* ============================================================
   CLEANUP & CATCH-UP PAGE
   ============================================================ */
/* Hero: copy + bullets/CTAs left, "we can help if" card right */
.clean-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border-subtle);background:
  radial-gradient(900px 480px at 82% -10%, var(--teal-50) 0%, transparent 62%),
  linear-gradient(180deg,#fff 0%,var(--surface-page) 100%)}
.clean-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-9);align-items:center;padding-block:var(--space-10)}
.clean-hero h1{font-size:var(--fs-h1);line-height:var(--lh-tight);font-weight:var(--fw-bold)}
.clean-hero .sub{margin-top:var(--space-5);font-size:var(--fs-lg);color:var(--text-secondary);line-height:var(--lh-relaxed);max-width:580px}
.trust-bullets{display:grid;gap:var(--space-3);margin-top:var(--space-6)}
.trust-bullets li{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--fs-base);color:var(--text-primary)}
.trust-bullets .c{flex:none;width:24px;height:24px;border-radius:var(--radius-pill);background:var(--teal-50);color:var(--teal-600);display:grid;place-items:center;margin-top:1px}
.trust-bullets .c svg{width:14px;height:14px}
.clean-hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-7)}
.help-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--space-7)}
.help-card .eyebrow{margin-bottom:var(--space-1)}
.help-card h2{font-size:var(--fs-h3);margin-bottom:var(--space-5)}
.help-card ul{display:grid;gap:var(--space-3)}
.help-card li{display:flex;gap:var(--space-3);align-items:center;font-size:var(--fs-base);color:var(--text-secondary)}
.help-card li .x{flex:none;width:26px;height:26px;border-radius:var(--radius-pill);background:var(--amber-50);color:var(--amber-700);display:grid;place-items:center;font-weight:var(--fw-bold);font-size:14px}

/* What we clean up: six cards */
.clean-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.clean-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-6);transition:transform var(--dur-normal) var(--ease-out),box-shadow var(--dur-normal),border-color var(--dur-normal)}
.clean-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--teal-200)}
.clean-card .tile{width:52px;height:52px;border-radius:var(--radius-md);background:var(--surface-brand-soft);color:var(--teal-600);display:grid;place-items:center;margin-bottom:var(--space-4)}
.clean-card .tile svg{width:26px;height:26px}
.clean-card h3{font-size:var(--fs-h4);margin-bottom:var(--space-2)}
.clean-card p{font-size:var(--fs-sm);color:var(--text-secondary);line-height:var(--lh-relaxed)}

/* What to gather checklist */
.checklist{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);max-width:880px;margin:var(--space-2) auto 0}
.check-item{display:flex;gap:var(--space-3);align-items:center;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-4)}
.check-item .c{flex:none;width:26px;height:26px;border-radius:var(--radius-pill);background:var(--teal-50);color:var(--teal-600);display:grid;place-items:center}
.check-item .c svg{width:15px;height:15px}
.check-item span{font-size:var(--fs-sm);color:var(--text-secondary)}
.gather-foot{margin-top:var(--space-7);text-align:center}
.gather-foot p{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-lg);color:var(--text-primary);margin-bottom:var(--space-4)}


/* Local proof */
.proof-areas{margin-top:var(--space-7);text-align:center}


@media (max-width:920px){
  .clean-hero-grid{grid-template-columns:1fr;gap:var(--space-7)}
  .clean-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .clean-grid{grid-template-columns:1fr}
  .checklist{grid-template-columns:1fr}
}

/* Reassurance: image fills the 1/3 column edge-to-edge (no bleed), 2/3 copy */
.reassure-split{display:grid;grid-template-columns:1fr 2fr;gap:var(--space-8);align-items:stretch}
.reassure-media{position:relative;min-height:300px}
.reassure-media .img-ph{position:absolute;inset:0;height:100%}
.reassure-copy h2{font-size:var(--fs-h2);line-height:var(--lh-snug)}
.reassure-copy p{margin-top:var(--space-4);font-size:var(--fs-lg);color:var(--text-secondary);line-height:var(--lh-relaxed)}
@media (max-width:820px){.reassure-split{grid-template-columns:1fr;gap:var(--space-6)}.reassure-media{min-height:240px}}


/* Elevated quote section (Cleanup page) */
.quote-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-8);align-items:center}
.quote-info h2{font-size:var(--fs-h2);line-height:var(--lh-snug)}
.quote-info p{margin-top:var(--space-4);font-size:var(--fs-lg);color:var(--text-secondary);line-height:var(--lh-relaxed)}
.quote-factors{margin-top:var(--space-6);display:grid;gap:var(--space-3)}
.quote-factors li{display:flex;gap:var(--space-3);align-items:center;font-size:var(--fs-base);color:var(--text-primary)}
.quote-factors li::before{content:"";flex:none;width:8px;height:8px;border-radius:var(--radius-pill);background:var(--teal-500)}
.quote-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--space-8);text-align:center}
.quote-card .eyebrow{margin-bottom:var(--space-1)}
.quote-card h3{font-size:var(--fs-h3);margin-bottom:var(--space-3)}
.quote-card>p{color:var(--text-secondary);line-height:var(--lh-relaxed);margin-bottom:var(--space-5)}
.quote-card .btn{width:100%}
.quote-card .btn+.btn{margin-top:var(--space-3)}
.quote-card .quote-note{font-size:var(--fs-sm);color:var(--text-muted);margin:var(--space-5) 0 0;line-height:var(--lh-snug)}
@media (max-width:820px){.quote-grid{grid-template-columns:1fr;gap:var(--space-6)}}

/* ============================================================
   SERVICES PAGE (diagnostic / "by business need" concept)
   ============================================================ */
/* Diagnostic cards: "What do you need help with?" */
.diag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.diag{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-xs);transition:border-color var(--dur-normal),box-shadow var(--dur-normal),transform var(--dur-normal) var(--ease-out)}
.diag:hover{border-color:var(--teal-300);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.diag .ic{flex:none;width:42px;height:42px;border-radius:var(--radius-md);background:var(--teal-50);color:var(--teal-600);display:grid;place-items:center;margin-bottom:var(--space-4)}
.diag .ic svg{width:22px;height:22px}
.diag h3{font-size:var(--fs-h4);line-height:var(--lh-snug);margin-bottom:var(--space-3)}
.diag .rec{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--text-muted);margin-bottom:var(--space-2)}
.diag p{font-size:var(--fs-sm);color:var(--text-secondary);line-height:var(--lh-normal)}

/* Service comparison matrix (and "what we need" docs table) */
.matrix-wrap{overflow-x:auto;border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);-webkit-overflow-scrolling:touch}
.matrix{width:100%;border-collapse:collapse;background:var(--surface-card)}
.matrix.cols4{min-width:820px}
.matrix.cols2{min-width:560px}
.matrix th,.matrix td{text-align:left;padding:var(--space-4) var(--space-5);vertical-align:top;border-bottom:1px solid var(--border-subtle)}
.matrix thead th{background:var(--teal-900);color:#fff;font-family:var(--font-nav);font-weight:400;text-transform:uppercase;letter-spacing:var(--ls-wide);font-size:var(--fs-xs)}
.matrix tbody td{font-size:var(--fs-sm);color:var(--text-secondary);line-height:var(--lh-normal)}
.matrix tbody tr:last-child td{border-bottom:0}
.matrix tbody tr:hover{background:var(--surface-page)}
.matrix td.svc-name{font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--text-primary);white-space:nowrap}

/* Detailed service cards: "is this me?" */
.svcd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6)}
.svcd{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-7);box-shadow:var(--shadow-sm)}
.svcd h3{font-size:var(--fs-h3);line-height:var(--lh-snug)}
.svcd .lbl{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--text-brand);margin:var(--space-5) 0 var(--space-3)}
.svcd ul{display:grid;gap:var(--space-2)}
.svcd li{display:flex;gap:var(--space-3);font-size:var(--fs-sm);color:var(--text-secondary);line-height:var(--lh-snug)}
.svcd li svg{flex:none;width:16px;height:16px;margin-top:2px}
.svcd .need li::before{content:"";flex:none;width:7px;height:7px;margin-top:7px;border-radius:var(--radius-pill);background:var(--teal-400)}
.svcd .incl li svg{stroke:var(--green-500)}
.svcd .pair{margin-top:auto;padding-top:var(--space-5);display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.svcd .pair b{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--text-muted);font-family:var(--font-mono);font-weight:var(--fw-semibold);margin-right:var(--space-1)}
.svcd .pair span{font-size:var(--fs-xs);background:var(--teal-50);color:var(--teal-700);padding:.3rem .7rem;border-radius:var(--radius-pill)}

/* How the services connect: elevated dark-teal frosted band with node rails */
.connect{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--teal-700) 0%,var(--teal-900) 100%);color:#fff}
.connect::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;top:-200px;right:-120px;background:radial-gradient(circle,rgba(0,151,178,.55),transparent 70%);filter:blur(30px);pointer-events:none}
.connect::after{content:"";position:absolute;width:480px;height:480px;border-radius:50%;bottom:-180px;left:-120px;background:radial-gradient(circle,rgba(224,154,44,.26),transparent 70%);filter:blur(40px);pointer-events:none}
.connect .container{position:relative;z-index:1}
.connect .eyebrow{color:var(--amber-500)}
.connect h2{color:#fff;max-width:20ch}
.connect .lead{max-width:760px;margin-top:var(--space-4);font-size:var(--fs-lg);line-height:var(--lh-relaxed);color:rgba(255,255,255,.82)}

/* Service bundles */
.bundle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}
.bundle{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-sm)}
.bundle.feature{border-color:var(--amber-500);box-shadow:0 0 0 1px var(--amber-500),var(--shadow-md);background:linear-gradient(180deg,var(--amber-50) 0%,#fff 20%)}
.bundle h3{font-size:var(--fs-h4)}
.bundle .for{font-size:var(--fs-sm);color:var(--text-muted);line-height:var(--lh-snug);margin:var(--space-2) 0 var(--space-4)}
.bundle ul{display:grid;gap:var(--space-2)}
.bundle li{display:flex;gap:var(--space-2);font-size:var(--fs-sm);color:var(--text-secondary);line-height:var(--lh-snug)}
.bundle li svg{flex:none;width:15px;height:15px;margin-top:2px;stroke:var(--teal-600)}

/* Internal link cards */
.link-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.linkcard{display:flex;align-items:center;gap:var(--space-3);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-5);font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--text-primary);transition:border-color var(--dur-normal),color var(--dur-normal),transform var(--dur-normal) var(--ease-out)}
.linkcard:hover{border-color:var(--teal-300);color:var(--text-brand);transform:translateY(-2px)}
.linkcard .arrow{margin-left:auto;color:var(--teal-400);transition:transform var(--dur-normal) var(--ease-out)}
.linkcard:hover .arrow{transform:translateX(3px)}

@media (max-width:980px){
  .diag-grid{grid-template-columns:repeat(2,1fr)}
  .bundle-grid{grid-template-columns:repeat(2,1fr)}
  .link-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .svcd-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .diag-grid{grid-template-columns:1fr}
  .bundle-grid{grid-template-columns:1fr}
  .link-grid{grid-template-columns:1fr}
}

/* Services hero: two-column with image */
.svc-hero .container{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-8);align-items:center}
.svc-hero .img-ph{min-height:320px;height:100%}
@media (max-width:820px){.svc-hero .container{grid-template-columns:1fr;gap:var(--space-6)}}

/* Illustration in detailed service cards */
.svcd-head{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-2)}
.svcd-head h3{margin:0}
.svcd .ill{flex:none;width:60px;height:60px;border-radius:var(--radius-lg);background:transparent;display:grid;place-items:center}
.svcd .ill img{width:48px;height:48px;object-fit:contain}

/* Brand logo on dark surfaces + uploadable image slots (Customizer) */
.logo-white{filter:brightness(0) invert(1)}
.media-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.media-cover{display:block;width:100%;object-fit:cover;border-radius:var(--radius-xl)}
.svc-hero .media-cover{height:100%;min-height:320px}
.post .media-cover{border-radius:0}

/* Auto blog cards: featured-image focal point + graceful no-image fallback */
.post-thumb{object-position:50% 25%}
.post-noimg{width:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--teal-50),var(--teal-100));color:var(--teal-400)}
.post-noimg svg{width:42px;height:42px}

/* ============================================================
   SERVICE DETAIL PAGE (bookkeeping + future siblings)
   ============================================================ */
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.proof-row{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);justify-content:center;margin-top:var(--space-7)}
.proof-row li{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-secondary)}
.proof-row svg{flex:none;width:16px;height:16px;stroke:var(--green-500)}

.symptoms{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4) var(--space-8);max-width:920px;margin:0 auto}
.symptoms li{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--fs-base);color:var(--text-secondary);line-height:var(--lh-snug)}
.symptoms li::before{content:"";flex:none;width:8px;height:8px;margin-top:8px;border-radius:var(--radius-pill);background:var(--teal-400)}
@media (max-width:640px){.symptoms{grid-template-columns:1fr;gap:var(--space-3)}}

.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7) var(--space-8);max-width:1000px;margin:0 auto}
.feat{display:flex;gap:var(--space-4);align-items:flex-start}
.feat .ic{flex:none;width:46px;height:46px;border-radius:var(--radius-md);background:var(--surface-brand-soft);color:var(--teal-600);display:grid;place-items:center}
.feat .ic svg{width:24px;height:24px}
.feat h3{font-size:var(--fs-h4);margin-bottom:var(--space-1)}
.feat p{font-size:var(--fs-sm);color:var(--text-secondary);line-height:var(--lh-relaxed)}
@media (max-width:720px){.feat-grid{grid-template-columns:1fr;gap:var(--space-6)}}

.steps{max-width:760px;margin:0 auto;display:grid;gap:var(--space-6)}
.step{display:flex;gap:var(--space-5);align-items:flex-start}
.step .n{flex:none;width:48px;height:48px;border-radius:var(--radius-pill);background:var(--teal-500);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-lg)}
.step h3{font-size:var(--fs-h4);margin-bottom:var(--space-1)}
.step p{font-size:var(--fs-base);color:var(--text-secondary);line-height:var(--lh-relaxed)}

/* Bookkeeping "peace of mind" split (image left, contained full-column) */
.bk-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:stretch}
.bk-media{position:relative;min-height:460px;border-radius:var(--radius-xl);overflow:hidden;background:var(--surface-sunken)}
.bk-media .media-fill,.bk-media .img-ph{position:absolute;inset:0;height:100%;border-radius:0}
.bk-peace{align-self:center}
.peace-list{list-style:none;display:grid;gap:var(--space-3);margin-top:var(--space-5)}
.peace-list li{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--fs-base);color:var(--text-secondary);line-height:var(--lh-snug)}
.peace-list li svg{flex:none;width:20px;height:20px;stroke:var(--green-500);margin-top:2px}
@media (max-width:820px){.bk-split{grid-template-columns:1fr;gap:var(--space-6)}.bk-media{min-height:320px}}

/* Factual callout panel (e.g. corporate tax deadlines) */
.callout{max-width:780px;margin:0 auto;text-align:center;background:var(--surface-brand-soft);border:1px solid var(--teal-100);border-radius:var(--radius-xl);padding:var(--space-8)}
.callout .ic{width:58px;height:58px;border-radius:var(--radius-pill);background:#fff;color:var(--teal-600);display:grid;place-items:center;margin:0 auto var(--space-4);box-shadow:var(--shadow-sm)}
.callout .ic svg{width:28px;height:28px}
.callout h2{font-size:var(--fs-h3)}
.callout p{margin-top:var(--space-3);color:var(--text-secondary);line-height:var(--lh-relaxed);font-size:var(--fs-lg)}
.callout p+p{margin-top:var(--space-4);font-size:var(--fs-base)}

/* FAQ answer: clip during the open/close height animation */
.faq-item .a{overflow:hidden}

/* Services dropdown (desktop nav) */
.nav-links .has-dropdown{position:relative}
.nav-links .has-dropdown>a{display:inline-flex;align-items:center;gap:5px}
.nav-links .caret{width:11px;height:11px;transition:transform var(--dur-normal) var(--ease-out)}
.nav-links .has-dropdown:hover .caret,.nav-links .has-dropdown:focus-within .caret{transform:rotate(180deg)}
.nav-links .has-dropdown::after{content:"";position:absolute;top:100%;left:-12px;right:-12px;height:14px}
.nav-links .dropdown{position:absolute;top:calc(100% + 14px);left:0;transform:translateY(6px);min-width:460px;list-style:none;background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-3);display:grid;grid-template-columns:1fr 1fr;gap:2px var(--space-3);opacity:0;visibility:hidden;transition:opacity var(--dur-normal) var(--ease-out),transform var(--dur-normal) var(--ease-out),visibility var(--dur-normal);z-index:70}
.nav-links .has-dropdown:hover .dropdown,.nav-links .has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav-links .dropdown li.dd-all{grid-column:1 / -1;border-bottom:1px solid var(--border-subtle);margin-bottom:var(--space-1);padding-bottom:var(--space-1)}
.nav-links .dropdown li.dd-all a{color:var(--text-brand);font-weight:var(--fw-semibold)}
.nav-links .dropdown a{display:block;text-transform:none;letter-spacing:normal;font-family:var(--font-display);font-weight:var(--fw-medium);font-size:.9rem;color:var(--text-primary);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);white-space:nowrap;transition:background var(--dur-fast),color var(--dur-fast)}
.nav-links .dropdown a:hover{background:var(--surface-brand-soft);color:var(--text-brand)}

/* Mobile menu service sub-links */
.menu-nav a.menu-sub{font-size:1.05rem;font-weight:400;color:var(--teal-200);padding-block:2px;letter-spacing:.06em}

body.menu-open .menu-nav a:nth-child(7){--d:380ms}
body.menu-open .menu-nav a:nth-child(8){--d:430ms}
body.menu-open .menu-nav a:nth-child(9){--d:480ms}
body.menu-open .menu-nav a:nth-child(10){--d:530ms}
body.menu-open .menu-nav a:nth-child(11){--d:580ms}
body.menu-open .menu-nav a:nth-child(12){--d:630ms}
body.menu-open .menu-nav a:nth-child(13){--d:680ms}

/* Detailed service cards are clickable links */
a.svcd{cursor:pointer;transition:border-color var(--dur-normal),box-shadow var(--dur-normal),transform var(--dur-normal) var(--ease-out)}
a.svcd:hover{border-color:var(--teal-300);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.svcd .more{margin-top:var(--space-5);font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--text-brand);display:inline-flex;align-items:center;gap:6px;transition:gap var(--dur-normal) var(--ease-out)}
a.svcd:hover .more{gap:10px}

/* Service-page media bleeds to the screen edge (like the homepage problem section),
   squared, alternating sides per page via .flip. The hero and outcome columns
   break out of the container so the image reaches the viewport edge. */
.svc-hero.page-hero{padding-block:0;overflow:hidden}
.svc-hero .container{max-width:none;width:100%;padding-inline:0;gap:0;align-items:stretch}
.svc-hero .container > div:first-child{padding-block:var(--space-10);padding-right:clamp(var(--space-6),5vw,var(--space-9));padding-left:max(var(--space-6),calc((100vw - var(--container-xl)) / 2 + var(--space-5)))}
.svc-hero .svc-media{position:relative;min-height:0;overflow:hidden}
.svc-hero .svc-media > .media-cover,.svc-hero .svc-media > .img-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;border:0}
.svc-hero .container.flip > :last-child{order:-1}
.svc-hero .container.flip > div:first-child{padding-right:max(var(--space-6),calc((100vw - var(--container-xl)) / 2 + var(--space-5)));padding-left:clamp(var(--space-6),5vw,var(--space-9))}

.section:has(> .container > .bk-split){padding-block:0}
.section:has(> .container > .bk-split) > .container{max-width:none;width:100%;padding-inline:0}
.bk-split{gap:0}
.bk-media{border-radius:0;min-height:0}
.bk-peace{padding-block:var(--space-10);padding-right:max(var(--space-6),calc((100vw - var(--container-xl)) / 2 + var(--space-5)));padding-left:clamp(var(--space-6),5vw,var(--space-9))}
.bk-split.flip .bk-media{order:2}
.bk-split.flip .bk-peace{padding-left:max(var(--space-6),calc((100vw - var(--container-xl)) / 2 + var(--space-5)));padding-right:clamp(var(--space-6),5vw,var(--space-9))}

@media (max-width:860px){
  .svc-hero .container{grid-template-columns:1fr}
  .svc-hero .container > div:first-child,.svc-hero .container.flip > div:first-child{padding:var(--space-9) var(--space-5)!important}
  .svc-hero .svc-media{min-height:280px;order:0!important}
  .bk-media{min-height:320px}
  .bk-peace,.bk-split.flip .bk-peace{padding:var(--space-9) var(--space-5)!important}
  .bk-split.flip .bk-media{order:0}
}