/*
Theme Name: Auditree
Theme URI: https://auditree.com
Author: Thumb360 Digital
Author URI: https://thumb360.com
Description: Hand-coded WordPress theme for Auditree, offshore audit and financial transformation services for CPA firms. Token-based design system, no page builder.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: auditree
*/
/* ==========================================================================
   AUDITREE V3 — "Quiet Confidence"
   Minimal, spacious direction: generous whitespace, restrained colour use,
   flat quiet surfaces instead of decorative gradients/textures. Palette is
   the client's exact brand kit — teal #4BC3C7, deep teal #3BAFA8, navy
   #445970, gray #5F6567, orange #F7941D, near-black #161616, white — plus
   the client's own defined tints: a pale navy wash (#E4EDF3) for quiet
   section backgrounds, and two black overlay strengths (15%/50%) reserved
   for dimming layers (scrims, image overlays), never for surface colour.
   Every other tint is one of these same hues at reduced opacity.
   ========================================================================== */
:root{
  --teal:#4BC3C7; --teal-deep:#3BAFA8; --navy:#445970; --gray:#5F6567;
  --orange:#F7941D; --ink-000:#161616; --ink-fff:#fff;
  --tint-navy:#E4EDF3; --overlay-15:rgba(0,0,0,.15); --overlay-50:rgba(0,0,0,.5);
  --header-sticky-bg:#606161;

  --c-heading:var(--navy); --c-text:var(--navy); --c-muted:var(--gray);
  --c-border:rgba(68,89,112,.16); --c-border-soft:rgba(68,89,112,.09);
  --c-focus:var(--navy);

  --shadow-sm:0 1px 2px rgba(68,89,112,.08);
  --shadow-md:0 8px 24px rgba(68,89,112,.10);
  --shadow-lg:0 28px 64px rgba(68,89,112,.14);
  --shadow-teal:0 16px 40px rgba(75,195,199,.35);

  --font-head:"Poppins",-apple-system,"Segoe UI",sans-serif;
  --font-body:"Poppins",-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Poppins",-apple-system,"Segoe UI",sans-serif;

  --fs-micro:.72rem; --fs-small:.86rem; --fs-body:15px; --fs-lead:15px;
  --fs-h6:1rem; --fs-h5:1.25rem;
  --fs-h4:clamp(1.25rem,1.05rem + .8vw,1.5rem);
  --fs-h3:clamp(1.5rem,1.1rem + 1.6vw,2.125rem);
  --fs-h2:clamp(1.875rem,1.25rem + 2.6vw,3rem);
  --fs-h1:clamp(2.25rem,1.35rem + 3.8vw,3.75rem);
  --fs-mega:clamp(2rem,5.2vw,3.8rem);

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:140px;

  --radius-sm:6px; --radius:14px; --radius-lg:26px;
  --maxw:1280px; --gutter:clamp(20px,4vw,56px);

  --dur-fast:150ms; --dur-base:260ms; --dur-slow:460ms;
  --ease-out:cubic-bezier(.16,.8,.24,1); --ease-spring:cubic-bezier(.34,1.5,.64,1);

  --header-h:84px; --header-h-scrolled:64px;
  --z-header:100; --z-panel:110; --z-scrim:120; --z-drawer:130;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h-scrolled) + var(--sp-4));scrollbar-gutter:stable}
body{margin:0;background:var(--ink-fff);color:var(--c-text);font-family:var(--font-body);
  font-size:var(--fs-body);font-weight:300;line-height:1.66;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);color:var(--c-heading);line-height:1.12;margin:0;text-wrap:balance}
h1{font-size:var(--fs-h1);font-weight:500;letter-spacing:-.02em}
h2{font-size:36px;font-weight:600;letter-spacing:-.015em}
h3{font-size:var(--fs-h3);font-weight:500}
h4{font-size:var(--fs-h4);font-weight:500}
h5{font-size:var(--fs-h5);font-weight:400}
h6{font-size:var(--fs-h6);font-weight:500}
p{margin:0;font-weight:300}
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-mono);
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--navy)}
.eyebrow::before{content:"";width:.5em;height:1em;background:var(--orange);display:inline-block;
  transform:skewX(-12deg);flex-shrink:0}
.eyebrow.on-dark{color:rgba(255,255,255,.92)}
.eyebrow.on-teal{color:var(--navy)}
.lead{font-size:var(--fs-lead);color:var(--c-muted)}
.measure{max-width:60ch}
section{padding-block:var(--sp-10)}
@media (max-width:900px){ section{padding-block:var(--sp-9)} }
@media (max-width:640px){ section{padding-block:var(--sp-7)} }
.tabular{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:2.5px solid var(--c-focus);outline-offset:3px;border-radius:3px}
.on-dark :focus-visible,.on-teal :focus-visible{outline-color:var(--ink-fff)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Buttons ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--font-body);font-weight:400;font-size:.96rem;padding:15px 30px;
  border-radius:var(--radius-sm);border:1.5px solid transparent;cursor:pointer;text-decoration:none;
  transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),
  border-color var(--dur-base) var(--ease-out);white-space:nowrap;position:relative}
.btn-primary{background:var(--teal-deep);color:var(--ink-fff);border-color:var(--ink-fff)}
.btn-primary:hover{background:var(--header-sticky-bg);border-color:var(--teal)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--c-border)}
.btn-ghost:hover{background:var(--navy);border-color:var(--navy);color:var(--ink-fff)}
.btn-outline{background:transparent;color:var(--teal-deep);border-color:var(--teal-deep)}
.btn-outline:hover{background:var(--teal-deep);border-color:var(--teal-deep);color:var(--ink-fff)}
.btn-inverse{background:var(--ink-fff);color:var(--navy)}
.btn-inverse:hover{background:var(--teal)}
.header-actions .btn-inverse{border-width:2px;border-color:var(--navy)}
.header-actions .btn-inverse:hover{border-color:var(--ink-fff)}
.btn-on-teal{background:var(--navy);color:var(--ink-fff)}
.btn-on-teal:hover{background:var(--ink-000)}

/* Text-link button — underline wipes in on hover instead of a filled box.
   Wrap the label in <span> so the underline only tracks the text, not any
   icon. Growing/shrinking is split across two transitions (size animates,
   position snaps after a matching delay) so the underline always appears to
   travel in one direction rather than mirror-reversing on hover-out. */
.btn-link{display:inline-flex;align-items:center;gap:var(--sp-2);
  font-family:var(--font-body);font-weight:400;font-size:.96rem;color:var(--navy);
  text-decoration:none;background:none;border:none;padding:0;cursor:pointer}
.btn-link span{padding-bottom:2px;background-image:linear-gradient(currentColor 0 0);
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size .5s,background-position 0s .5s}
.btn-link:hover span{background-position:100% 100%;background-size:100% 1px}
.btn-link.on-dark{color:var(--ink-fff)}
.btn-sm{padding:10px 20px;font-size:.85rem}

/* ==========================================================================
   HEADER
   ========================================================================== */
/* Global header — default (solid) state for every page WITHOUT a photo
   hero. Pages with a full-bleed hero (body.home / body.has-photo-hero,
   below) override this to sit transparent on top of the banner instead. */
header[data-header]{position:sticky;top:0;z-index:var(--z-header);background:var(--header-sticky-bg);
  border-bottom:1px solid transparent;box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur-base) var(--ease-out),height var(--dur-base),background var(--dur-base)}
.header-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:var(--sp-6);height:var(--header-h);
  transition:height var(--dur-base) var(--ease-out)}
header[data-header].is-scrolled .header-row{height:var(--header-h-scrolled)}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0;justify-self:start}
/* Approved logo — sized by height (the binding constraint inside the existing
   84px/64px header row) so width follows the file's real aspect ratio; never
   hard-coded, never stretched. Lands close to the ~250-330px desktop guideline
   without changing header height. */
.logo-img{display:block;width:auto;height:auto;max-height:42px;max-width:100%}
header[data-header].is-scrolled .logo-img{max-height:31.2px}
@media (max-width:640px){ .logo-img{max-height:34.8px} }
.logo-img--drawer{max-height:40px}
.logo-img--footer{max-height:60px}
.logo-mark{width:36px;height:36px;border-radius:50%;border:2.5px solid var(--navy);position:relative;flex-shrink:0;
  transition:transform var(--dur-base) var(--ease-spring)}
.logo:hover .logo-mark{transform:rotate(-12deg) scale(1.08)}
.logo-mark::after{content:"";position:absolute;width:11px;height:2.5px;background:var(--navy);bottom:-6px;right:-5px;
  transform:rotate(45deg);border-radius:2px}
.logo-mark::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--teal);opacity:.35}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-word{font-family:var(--font-head);font-weight:800;font-size:1.32rem;color:var(--navy)}
.logo-word span{color:var(--teal-deep)}
.logo-tag{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.13em;color:var(--gray);margin-top:3px}
nav[data-nav]{display:flex;align-items:center;gap:var(--sp-6);justify-self:center}
.nav-link{font-weight:400;font-size:15px;text-decoration:none;color:#fff;padding:8px 2px;position:relative}
.nav-link[aria-current]{color:var(--orange)}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:.75px;background:var(--teal);
  border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease-out)}
.nav-link:hover::after,.nav-link[aria-current]::after{transform:scaleX(1)}
.nav-item{position:relative}
.nav-trigger{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;
  font-family:var(--font-body);font-weight:400;font-size:15px;color:#fff;padding:8px 2px}
.nav-trigger svg{width:11px;height:11px;transition:transform var(--dur-base) var(--ease-out)}
.nav-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 16px);left:50%;transform:translate(-50%,10px) scale(.98);
  width:min(600px,88vw);background:var(--ink-fff);border:1px solid var(--c-border-soft);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:var(--sp-5);display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-spring),visibility var(--dur-base);
  z-index:var(--z-panel)}
.mega[data-open="true"]{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0) scale(1)}
.mega-group-label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gray);display:block;margin-bottom:var(--sp-3)}
.mega-link{display:block;padding:9px 10px;margin-inline:-10px;border-radius:var(--radius-sm);text-decoration:none;
  color:var(--navy);font-size:.92rem;font-weight:500;
  background-image:linear-gradient(currentColor 0 0);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-color var(--dur-fast),color var(--dur-fast),padding-left var(--dur-fast),background-size .4s,background-position 0s .4s}
.mega-link:hover{background-color:rgba(75,195,199,.1);font-weight:700;padding-left:16px;background-position:100% 100%;background-size:100% 1px}
.header-actions{display:flex;align-items:center;gap:var(--sp-4);justify-self:end}
.call-link{display:flex;align-items:center;gap:9px;font-size:.9rem;font-weight:400;text-decoration:none;color:#fff;white-space:nowrap}
.call-link-shape{display:inline-block;width:10px;height:20px;background:var(--teal);transform:skewX(-12deg);flex-shrink:0}
.call-link svg{width:16px;height:16px;color:#fff;flex-shrink:0}
.call-link .call-num{font-family:var(--font-mono)}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;margin-left:var(--sp-2)}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:5px 0;border-radius:2px;
  transition:transform var(--dur-base),opacity var(--dur-base)}
@media (max-width:1023px){ nav[data-nav],.call-link{display:none} .burger{display:block} }

/* When viewing while logged in, WordPress adds a 32px (46px on mobile) admin
   toolbar fixed to the very top — offset our own fixed/sticky header so it
   doesn't sit underneath it. Logged-out visitors never see #wpadminbar, so
   this has zero effect on real traffic. */
body.admin-bar header[data-header]{top:32px}
body.admin-bar .scrim,body.admin-bar .drawer{top:32px}
@media (max-width:782px){
  body.admin-bar header[data-header]{top:46px}
  body.admin-bar .scrim,body.admin-bar .drawer{top:46px}
}

/* Transparent overlay header on pages with a full-bleed photo hero, so the
   header and banner read as one continuous section. Scoped to body.home
   (front page) and body.has-photo-hero (interior pages opted in via
   auditree_photo_hero_body_class()) — every other page keeps the solid
   #606161 header above. Fixed position so the banner image continues
   directly behind the header instead of the header pushing content down. */
body.home header[data-header],
body.has-photo-hero header[data-header]{position:fixed;left:0;right:0;top:0;width:100%;
  background:transparent;box-shadow:none;border-bottom:1px solid rgba(255,255,255,.25)}
body.home header[data-header] .nav-link,
body.has-photo-hero header[data-header] .nav-link,
body.home header[data-header] .nav-trigger,
body.has-photo-hero header[data-header] .nav-trigger,
body.home header[data-header] .call-link,
body.has-photo-hero header[data-header] .call-link,
body.home header[data-header] .call-link svg,
body.has-photo-hero header[data-header] .call-link svg{color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.35)}
body.home header[data-header] .nav-link[aria-current],
body.has-photo-hero header[data-header] .nav-link[aria-current]{color:var(--orange)}
body.home header[data-header] .nav-link::after,
body.has-photo-hero header[data-header] .nav-link::after{background:#fff}
body.home header[data-header] .burger span,
body.has-photo-hero header[data-header] .burger span{background:#fff}
body.home header[data-header].is-scrolled,
body.has-photo-hero header[data-header].is-scrolled{background:var(--header-sticky-bg);box-shadow:var(--shadow-sm)}
body.home header[data-header].is-scrolled .nav-link,
body.has-photo-hero header[data-header].is-scrolled .nav-link,
body.home header[data-header].is-scrolled .nav-trigger,
body.has-photo-hero header[data-header].is-scrolled .nav-trigger,
body.home header[data-header].is-scrolled .call-link,
body.has-photo-hero header[data-header].is-scrolled .call-link,
body.home header[data-header].is-scrolled .call-link svg,
body.has-photo-hero header[data-header].is-scrolled .call-link svg{text-shadow:none}

/* Mobile drawer -------------------------------------------------------*/
.scrim{position:fixed;inset:0;background:var(--overlay-50);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:var(--z-scrim);
  opacity:0;visibility:hidden;transition:opacity var(--dur-base),visibility var(--dur-base)}
.scrim[data-open="true"]{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(360px,86vw);background:var(--ink-fff);z-index:var(--z-drawer);
  transform:translateX(100%);transition:transform var(--dur-slow) var(--ease-out);padding:var(--sp-5);overflow-y:auto}
.drawer[data-open="true"]{transform:translateX(0)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-5)}
.drawer-close{background:none;border:none;font-size:1.7rem;line-height:1;cursor:pointer;color:var(--navy);padding:4px 8px}
.drawer-link{display:block;padding:14px 4px;border-bottom:1px solid var(--c-border-soft);text-decoration:none;
  color:var(--navy);font-weight:700}
.drawer details summary{padding:14px 4px;border-bottom:1px solid var(--c-border-soft);font-weight:700;cursor:pointer;
  color:var(--navy);list-style:none}
.drawer details summary::-webkit-details-marker{display:none}
.drawer details[open] summary{color:var(--navy);text-decoration:underline;text-decoration-color:var(--teal)}
.drawer-sub{padding:4px 4px 10px 14px}
.drawer-sub a{display:block;padding:8px 0;text-decoration:none;color:var(--gray);font-size:.92rem}

/* ==========================================================================
   TICKER — the signature "ledger tape" device
   ========================================================================== */
.ticker{background:var(--navy);overflow:hidden;padding-block:14px}
.ticker-track{display:flex;width:max-content;animation:ticker-scroll 32s linear infinite}
.ticker[data-paused="true"] .ticker-track{animation-play-state:paused}
.ticker-item{display:flex;align-items:center;gap:10px;padding-inline:var(--sp-6);font-family:var(--font-mono);
  font-size:.78rem;letter-spacing:.05em;color:rgba(255,255,255,.85);white-space:nowrap}
.ticker-item svg{width:14px;height:14px;color:var(--teal);flex-shrink:0}
@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================================
   HERO — full-bleed photo background (homepage only)
   ========================================================================== */
.hero{position:relative;min-height:640px;display:flex;align-items:flex-end;
  padding-top:calc(var(--header-h) + var(--sp-7));padding-bottom:var(--sp-8);overflow:hidden}
.hero > .container{width:100%}
@media (max-width:960px){ .hero{min-height:560px;padding-top:calc(var(--header-h-scrolled) + var(--sp-8));padding-bottom:var(--sp-7)} }
.hero-bg{position:absolute;inset:0;z-index:-1;--hero-photo:url('assets/img/getty-hero-v2.jpg');
  background-image:
    linear-gradient(90deg, rgba(68,89,112,.78) 0%, rgba(68,89,112,.45) 45%, rgba(68,89,112,.12) 75%, rgba(68,89,112,.04) 100%),
    linear-gradient(0deg, rgba(68,89,112,.55) 0%, rgba(68,89,112,.08) 45%, rgba(68,89,112,0) 70%),
    var(--hero-photo);
  background-size:cover,cover,cover;
  background-position:center,center,center 40%;
  background-repeat:no-repeat,no-repeat,no-repeat}
.hero-content{max-width:900px;position:relative;z-index:1}
/* Global banner typography — single source of truth for every H1/lead used
   in a page banner across the whole site (Home, About, Audit, AI in Audit,
   Insights, Services, Contact). Shared via combined selectors rather than
   duplicated per page-hero variant, specifically so this can't drift out of
   sync the way .hero and .page-hero once did. Only color is ever set
   separately, since that depends on whether the banner sits over a photo
   (white) or a plain tint background (navy). */
.hero h1,.page-hero h1{margin-top:var(--sp-5);font-size:36px;font-weight:600;line-height:1.15;letter-spacing:-.01em}
.hero h1{color:#fff}
.hero h1 .accent{white-space:nowrap}
.hero .eyebrow{color:rgba(255,255,255,.92)}
.hero .lead,.page-hero .lead{margin-top:var(--sp-5)}
.hero .lead,.page-hero .lead,.page-hero-lead-below{font-size:15px;font-weight:300}
.hero .lead,.page-hero .lead{max-width:52ch}
.hero .lead{color:rgba(255,255,255,.86)}
.hero-ctas{display:flex;gap:var(--sp-4);margin-top:var(--sp-7);flex-wrap:wrap}
.hero .btn-primary{background:transparent;border-color:#fff;color:#fff}
.hero .btn-primary:hover{background:#fff;color:var(--navy);border-color:var(--navy)}
.hero .btn-ghost{border-color:rgba(255,255,255,.65);color:#fff}
.hero .btn-ghost:hover{background:#fff;border-color:var(--navy);color:var(--navy)}
.hero-proof{margin-top:var(--sp-8);display:flex;gap:var(--sp-8);flex-wrap:wrap;padding-top:var(--sp-6);
  border-top:1px solid rgba(255,255,255,.25)}
.proof-item{display:flex;flex-direction:column;gap:3px}
.proof-num{font-family:var(--font-mono);font-weight:700;font-size:1.7rem;color:#fff;line-height:1}
.proof-label{font-size:.78rem;color:rgba(255,255,255,.75);font-weight:500}

/* Animated ledger panel ------------------------------------------------*/
.ledger-panel{position:relative;background:var(--navy);border-radius:var(--radius-lg);padding:var(--sp-6);
  box-shadow:var(--shadow-lg);overflow:hidden}
.ledger-panel-head{display:flex;align-items:center;justify-content:space-between;position:relative;margin-bottom:var(--sp-5)}
.ledger-panel-head .dot-row{display:flex;gap:6px}
.ledger-panel-head .dot-row span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25)}
.ledger-panel-head .dot-row span:first-child{background:var(--orange)}
.ledger-panel-title{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:rgba(255,255,255,.6)}
.ledger-rows{display:flex;flex-direction:column;gap:10px;position:relative}
.ledger-row{display:flex;align-items:center;gap:var(--sp-3);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);padding:13px 15px;
  opacity:0;transform:translateX(-14px)}
.ledger-row.is-in{animation:row-in .5s var(--ease-spring) forwards}
@keyframes row-in{to{opacity:1;transform:translateX(0)}}
.ledger-row .tick{width:22px;height:22px;border-radius:50%;background:var(--teal);flex-shrink:0;
  display:flex;align-items:center;justify-content:center}
.ledger-row .tick svg{width:12px;height:12px;color:var(--navy);stroke-dasharray:20;stroke-dashoffset:20}
.ledger-row.is-in .tick svg{animation:draw .4s .3s var(--ease-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.ledger-row .bar{height:9px;border-radius:5px;background:rgba(255,255,255,.14);flex:1}
.ledger-row .amt{font-family:var(--font-mono);font-size:.78rem;color:rgba(255,255,255,.55);flex-shrink:0}
.ledger-row:nth-child(1) .bar{width:64%} .ledger-row:nth-child(2) .bar{width:82%}
.ledger-row:nth-child(3) .tick{background:var(--orange)} .ledger-row:nth-child(3) .bar{width:48%}
.ledger-row:nth-child(4) .bar{width:72%}
.ledger-panel-foot{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sp-5);
  padding-top:var(--sp-5);border-top:1px solid rgba(255,255,255,.12);position:relative}
.ledger-total-label{font-family:var(--font-mono);font-size:.72rem;color:rgba(255,255,255,.55)}
.ledger-total-value{font-family:var(--font-mono);font-weight:700;font-size:1.3rem;color:var(--teal)}
.ledger-seal{position:absolute;top:-16px;right:-16px;width:88px;height:88px;border-radius:50%;
  background:var(--orange);display:flex;align-items:center;justify-content:center;transform:rotate(12deg);
  box-shadow:0 12px 28px rgba(247,148,29,.4);border:3px solid var(--navy)}
.ledger-seal span{font-family:var(--font-mono);font-size:.58rem;font-weight:700;color:var(--navy);text-align:center;
  line-height:1.25;transform:rotate(-12deg)}

/* ==========================================================================
   SECTION HEAD / SHARED
   ========================================================================== */
.section-head{max-width:680px;margin-bottom:var(--sp-8)}
.section-head h2{margin-top:var(--sp-3)}
.section-head .lead{margin-top:var(--sp-4)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .eyebrow{justify-content:center}
.section-teal{background:var(--tint-navy)}
.section-inverse{background:var(--navy);color:var(--ink-fff)}
.section-inverse h2,.section-inverse h3,.section-inverse h4{color:var(--ink-fff)}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-5)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}
@media (max-width:900px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} }

.card{background:var(--ink-fff);border:1px solid var(--c-border-soft);border-radius:var(--radius);
  padding:var(--sp-6);transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),
  transform var(--dur-base) var(--ease-out)}
.card:hover{border-color:var(--c-border);box-shadow:var(--shadow-md);transform:translateY(-4px)}
.icon-tile{width:48px;height:48px;border-radius:var(--radius-sm);background:var(--tint-navy);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-4);
  transition:background var(--dur-base),transform var(--dur-base) var(--ease-spring)}

/* "Why Choose" tile grid — flip cards matching auditree.com's own layout:
   front face is icon+label, hovering flips to a dark navy back face with a
   one-line description. Deliberately separate from .card/.icon-tile (used
   everywhere else on the site) rather than reworking that shared component
   for one section. */
.why-choose-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}
@media (max-width:900px){ .why-choose-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .why-choose-grid{grid-template-columns:1fr} }
.why-choose-tile{min-height:220px;perspective:1200px}
.why-choose-tile-inner{position:relative;width:100%;height:100%;min-height:220px;
  transition:transform var(--dur-slow) var(--ease-out);transform-style:preserve-3d}
.why-choose-tile:hover .why-choose-tile-inner{transform:rotateY(180deg)}
.why-choose-tile-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--radius);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:var(--sp-4);padding:var(--sp-7) var(--sp-5)}
.why-choose-tile-front{background:var(--tint-navy);box-shadow:var(--shadow-sm)}
.why-choose-tile-front svg{width:44px;height:44px;color:var(--teal-deep)}
.why-choose-tile-front h4{margin:0;font-size:20px}
@media (max-width:560px){ .why-choose-tile-front h4{font-size:18px} }
.why-choose-tile-back{background:var(--navy);color:var(--ink-fff);transform:rotateY(180deg)}
.why-choose-tile-back p{font-size:15px;font-weight:300;color:var(--ink-fff);margin:0}
.card:hover .icon-tile{background:var(--teal);transform:scale(1.05)}
.icon-tile svg{width:24px;height:24px;color:var(--navy);transition:color var(--dur-base)}
.card:hover .icon-tile svg{color:var(--ink-fff)}
.card h3,.card h4{margin-bottom:var(--sp-2)}
.card p{color:var(--c-muted)}
.card-link{display:inline-flex;align-items:center;gap:6px;margin-top:var(--sp-4);font-weight:700;font-size:.88rem;
  color:var(--navy);text-decoration:none;
  background-image:linear-gradient(var(--underline,currentColor) 0 0);background-repeat:no-repeat;
  background-position:0 100%;background-size:0 1px;
  transition:background-size .4s,background-position 0s .4s}
.card-link svg{width:13px;height:13px;transition:transform var(--dur-fast) var(--ease-out)}
.card-link:hover svg{transform:translateX(4px)}
.card-link:hover{background-position:100% 100%;background-size:100% 1px}

/* ==========================================================================
   SERVICES OVERVIEW — asymmetric bento split
   ========================================================================== */
.bento-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);align-items:stretch}
@media (max-width:860px){ .bento-2{grid-template-columns:1fr} }
.bento-tile{position:relative;border-radius:var(--radius-lg);padding:var(--sp-8);overflow:hidden;
  height:100%;display:flex;flex-direction:column;
  background:var(--navy);color:var(--ink-fff);
  transition:background var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.bento-tile:hover{background:var(--ink-000);transform:translateY(-6px)}
/* Both tiles share one flat structure now (heading, description, tags, link) so
   they line up exactly. Heading and description each get a min-height sized to
   the longer of the two tiles' real copy, so the shorter tile's shorter text
   doesn't pull the tags/link upward — the link is also pinned to the bottom via
   margin-top:auto as a second guarantee regardless of tag-row wrap differences. */
.bento-tile h3{font-size:clamp(1.5rem,2.6vw,2rem);color:var(--ink-fff);min-height:2.3em}
.bento-tile p{margin-top:var(--sp-3);max-width:38ch;color:rgba(255,255,255,.78);
  line-height:1.6;min-height:6.4em}
.bento-num{position:absolute;top:var(--sp-6);right:var(--sp-7);font-family:var(--font-mono);font-weight:700;
  font-size:4rem;line-height:1;opacity:.14;color:var(--ink-fff)}
.bento-tile .card-link{margin-top:auto;padding-top:var(--sp-6);color:var(--ink-fff);--underline:var(--teal)}
.bento-ticks{display:flex;gap:8px;margin-top:var(--sp-6);flex-wrap:wrap}
.bento-ticks span{font-family:var(--font-mono);font-size:.72rem;padding:6px 12px;border-radius:999px;
  display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12)}

/* ==========================================================================
   TABS — animated sliding indicator
   ========================================================================== */
.tabs-nav{position:relative;display:inline-flex;gap:2px;padding:6px;background:rgba(75,195,199,.09);
  border-radius:999px;margin-bottom:var(--sp-8)}
.tabs-indicator{position:absolute;top:6px;bottom:6px;left:6px;border-radius:999px;background:var(--navy);
  transition:transform var(--dur-base) var(--ease-spring),width var(--dur-base) var(--ease-spring);z-index:0}
.tab-btn{position:relative;z-index:1;border:none;background:transparent;padding:12px 24px;border-radius:999px;
  font-weight:700;font-size:.9rem;cursor:pointer;color:var(--navy);transition:color var(--dur-base)}
.tab-btn[aria-selected="true"]{color:var(--ink-fff)}
.tab-panel{display:none}
.tab-panel[data-active="true"]{display:block;animation:fade-up .4s var(--ease-out)}
@keyframes fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.tab-intro{display:flex;align-items:baseline;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.stack-row{display:grid;grid-template-columns:.55fr 1fr;gap:var(--sp-6);padding-block:var(--sp-6);
  border-top:1px solid var(--c-border-soft);transition:padding-left var(--dur-base) var(--ease-out)}
.stack-row:first-of-type{border-top:none}
@media (max-width:760px){ .stack-row{grid-template-columns:1fr;gap:var(--sp-3)} }
.stack-row h4{color:var(--navy);display:flex;align-items:center;gap:10px}
.stack-row h4::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);flex-shrink:0}
.stack-row p{color:var(--c-muted)}
.tab-panel-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:var(--sp-7);align-items:start}
@media (max-width:820px){ .tab-panel-grid{grid-template-columns:1fr} }
.tab-panel-photo{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);
  aspect-ratio:4/5;position:sticky;top:calc(var(--header-h-scrolled) + 24px)}
@media (max-width:820px){ .tab-panel-photo{position:static;aspect-ratio:16/10} }
.tab-panel-photo img{width:100%;height:100%;object-fit:cover;display:block}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
@media (max-width:760px){ .pillars{grid-template-columns:1fr} }
.tab-panel-text .pillars{grid-template-columns:1fr;gap:var(--sp-4)}
.pillar{border-radius:var(--radius);padding:var(--sp-6);background:rgba(75,195,199,.06);
  border-left:3px solid var(--teal)}
.pillar h4{margin-bottom:var(--sp-2)}
.pillar p{color:var(--c-muted)}

/* Why choose — featured bento -----------------------------------------*/
.why-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-5);margin-bottom:var(--sp-8);flex-wrap:wrap}
.why-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:auto auto;gap:var(--sp-5)}
@media (max-width:900px){ .why-grid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .why-grid{grid-template-columns:1fr} }
.why-feature{grid-row:span 2;background:var(--navy);border-radius:var(--radius-lg);padding:var(--sp-7);
  color:var(--ink-fff);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:340px}
.why-feature-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform var(--dur-slow) var(--ease-out)}
.why-feature:hover .why-feature-photo{transform:scale(1.05)}
.why-feature-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg, rgba(68,89,112,.96) 15%, rgba(68,89,112,.55) 60%, rgba(68,89,112,.25) 100%)}
.why-feature h3{position:relative;z-index:3;font-size:clamp(1.4rem,2.2vw,1.9rem)}
.why-feature p{position:relative;z-index:3;color:rgba(255,255,255,.78);margin-top:var(--sp-3)}
.why-feature .big-stat{position:relative;z-index:3;font-family:var(--font-mono);font-weight:700;font-size:3.2rem;
  color:var(--teal);margin-bottom:var(--sp-3)}

/* Stats band — count-up + ticker texture ------------------------------*/
.stats-band{position:relative;overflow:hidden}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-7);position:relative}
@media (max-width:760px){ .stats-grid{grid-template-columns:1fr;gap:var(--sp-8)} }
.stat{border-top:3px solid var(--teal);padding-top:var(--sp-5)}
.stat-num{font-family:var(--font-mono);font-weight:700;font-size:clamp(2.8rem,6vw,4.4rem);line-height:1;color:var(--ink-fff)}
.stat-label{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.85);margin-top:var(--sp-3)}
.stat-desc{color:rgba(255,255,255,.72);margin-top:var(--sp-2)}

/* Values — connected line list -----------------------------------------*/
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--c-border-soft);
  border-radius:var(--radius-lg);overflow:hidden}
@media (max-width:760px){ .values-grid{grid-template-columns:1fr} }
.value-card{padding:var(--sp-7) var(--sp-6);border-right:1px solid var(--c-border-soft);
  border-bottom:1px solid var(--c-border-soft);transition:background var(--dur-base)}
.values-grid .value-card:nth-child(3n){border-right:none}
.values-grid .value-card:nth-last-child(-n+3){border-bottom:none}
@media (max-width:760px){ .value-card{border-right:none !important} }
.value-card:hover{background:rgba(75,195,199,.06)}
.value-num{font-family:var(--font-mono);font-size:.8rem;color:var(--navy);font-weight:700}
.value-card h4{margin-top:var(--sp-3);margin-bottom:var(--sp-2)}
.value-card p{color:var(--c-muted)}

/* Testimonials — editorial pull-quote -----------------------------------*/
.testi-wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7)}
@media (max-width:800px){ .testi-wrap{grid-template-columns:1fr} }
.testi-card{background:var(--ink-fff);border:1px solid var(--c-border-soft);border-radius:var(--radius-lg);
  padding:var(--sp-7);display:flex;flex-direction:column;position:relative;transition:transform var(--dur-base),box-shadow var(--dur-base)}
.testi-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.testi-quote-mark{font-family:var(--font-head);font-size:3.4rem;color:var(--teal);line-height:.6;margin-bottom:var(--sp-4);
  font-weight:800}
.testi-quote{color:var(--navy);line-height:1.65;flex:1}
.testi-attr{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-6);padding-top:var(--sp-5);
  border-top:1px solid var(--c-border-soft)}
.testi-avatar{width:44px;height:44px;border-radius:50%;background:var(--navy);display:flex;align-items:center;
  justify-content:center;font-family:var(--font-head);font-weight:700;color:var(--ink-fff);flex-shrink:0}
.testi-name{font-weight:700;font-size:.92rem;color:var(--navy)}
.testi-role{font-size:.8rem;color:var(--gray)}

/* ISO — animated stroke badge --------------------------------------------*/
.iso-wrap{display:grid;grid-template-columns:auto 1fr auto;gap:var(--sp-7);align-items:center;
  background:var(--tint-navy);
  border:1px solid var(--c-border-soft);border-radius:var(--radius-lg);padding:var(--sp-8)}
@media (max-width:760px){ .iso-wrap{grid-template-columns:1fr;text-align:center;justify-items:center} }
.iso-badge{width:110px;height:110px;flex-shrink:0}
.iso-badge circle{fill:none;stroke:var(--navy);stroke-width:2.5}
.iso-badge .ring{stroke:var(--teal);stroke-dasharray:320;stroke-dashoffset:320;transition:stroke-dashoffset 1.4s var(--ease-out)}
.iso-badge.is-in .ring{stroke-dashoffset:0}
.iso-badge text{font-family:var(--font-mono);fill:var(--navy);font-weight:700}

/* CTA / contact ----------------------------------------------------------*/
.cta-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--sp-8)}
@media (max-width:900px){ .cta-grid{grid-template-columns:1fr} }
.contact-line{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4);font-size:.96rem}
.contact-line svg{width:19px;height:19px;color:var(--navy);flex-shrink:0}
.contact-line a{text-decoration:none;
  background-image:linear-gradient(currentColor 0 0);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size .4s,background-position 0s .4s}
.contact-line a:hover{background-position:100% 100%;background-size:100% 1px}
.form-card{background:var(--ink-fff);border:1px solid var(--c-border-soft);border-radius:var(--radius-lg);
  padding:var(--sp-7);box-shadow:var(--shadow-lg)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-bottom:var(--sp-4)}
@media (max-width:560px){ .form-row{grid-template-columns:1fr} }
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.82rem;font-weight:700;color:var(--navy)}
.field input,.field select,.field textarea{font-family:var(--font-body);font-size:15px;padding:12px 14px;
  border-radius:var(--radius-sm);border:1.5px solid var(--c-border);background:var(--ink-fff);color:var(--navy);
  transition:border-color var(--dur-base),box-shadow var(--dur-base)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);
  box-shadow:0 0 0 4px rgba(75,195,199,.2)}
.field-full{grid-column:1/-1}
.form-note{font-size:.78rem;color:var(--gray);margin-top:var(--sp-3)}
.toast{margin-top:var(--sp-4);padding:13px 16px;border-radius:var(--radius-sm);background:rgba(75,195,199,.12);
  color:var(--navy);font-size:.88rem;font-weight:600;display:none}
.toast[data-show="true"]{display:block}

.newsletter-form{display:flex;gap:var(--sp-3);margin-top:var(--sp-6);flex-wrap:wrap;justify-content:center}
.newsletter-form input[type="email"]{flex:1;min-width:220px;font-family:var(--font-body);font-size:15px;
  padding:14px 18px;border-radius:var(--radius-sm);border:1.5px solid transparent;background:var(--ink-fff);
  color:var(--navy)}
.newsletter-form input[type="email"]:focus{outline:none;box-shadow:0 0 0 4px rgba(75,195,199,.35)}
.newsletter-form .btn{white-space:nowrap}

/* Insights ----------------------------------------------------------------*/
.insight-card{display:grid;grid-template-columns:.7fr 1fr;gap:var(--sp-7);align-items:center;background:var(--ink-fff);
  border:1px solid var(--c-border-soft);border-radius:var(--radius-lg);padding:var(--sp-7);
  transition:transform var(--dur-base),box-shadow var(--dur-base)}
.insight-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
@media (max-width:760px){ .insight-card{grid-template-columns:1fr} }
.insight-thumb{aspect-ratio:16/11;border-radius:var(--radius);background:var(--teal);position:relative;overflow:hidden}
.insight-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--sp-3)}
.tag{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;padding:5px 12px;
  border-radius:999px;background:rgba(75,195,199,.12);color:var(--navy)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{background:var(--ink-000);color:var(--ink-fff);padding-block:var(--sp-9) var(--sp-5);position:relative;overflow:hidden}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:var(--sp-7);position:relative}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .footer-grid{grid-template-columns:1fr} }
.footer-logo{display:flex;align-items:center;gap:11px;text-decoration:none;margin-bottom:var(--sp-4)}
.footer-tag{font-family:var(--font-body);font-size:.68rem;letter-spacing:.1em;color:var(--ink-fff);margin-bottom:var(--sp-3)}
.footer-desc{font-size:12.08px;color:var(--ink-fff);max-width:32ch}
.footer-col h4{color:var(--ink-fff);font-size:.92rem;margin-bottom:var(--sp-4)}
.footer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:12.08px;line-height:1.5}
.footer-links a{color:var(--ink-fff);text-decoration:none;font-size:inherit;
  background-image:linear-gradient(currentColor 0 0);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:color var(--dur-fast),padding-left var(--dur-fast),background-size .4s,background-position 0s .4s}
.footer-links a:hover{color:var(--teal);padding-left:4px;background-position:100% 100%;background-size:100% 1px}
.social-row{display:flex;gap:var(--sp-3);margin-top:var(--sp-5)}
.social-btn{width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);display:flex;
  align-items:center;justify-content:center;color:var(--ink-fff);text-decoration:none;
  transition:border-color var(--dur-base),background var(--dur-base),color var(--dur-base),transform var(--dur-base) var(--ease-spring)}
.social-btn:hover{border-color:var(--teal);background:transparent;color:var(--teal);transform:translateY(-3px) scale(1.06)}
.social-btn svg{width:16px;height:16px}
.practice-strip{margin-top:var(--sp-8);padding-top:var(--sp-6);border-top:1px solid rgba(255,255,255,.14);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
@media (max-width:760px){ .practice-strip{grid-template-columns:1fr} }
.practice-item h4{color:var(--ink-fff);font-size:.85rem;font-family:var(--font-body);letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:var(--sp-2)}
.practice-item p{font-size:.85rem;color:var(--ink-fff)}
.footer-bottom{margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-3);font-size:10.8px;
  color:var(--ink-fff)}
.footer-bottom a{color:var(--ink-fff);text-decoration:none;
  background-image:linear-gradient(currentColor 0 0);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:color var(--dur-fast),background-size .4s,background-position 0s .4s}
.footer-bottom a:hover{color:var(--teal);background-position:100% 100%;background-size:100% 1px}

/* Reveal --------------------------------------------------------------*/
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.stagger.is-visible > *{animation:stagger-in .6s var(--ease-out) both}
.stagger.is-visible > *:nth-child(1){animation-delay:0ms} .stagger.is-visible > *:nth-child(2){animation-delay:80ms}
.stagger.is-visible > *:nth-child(3){animation-delay:160ms} .stagger.is-visible > *:nth-child(4){animation-delay:240ms}
.stagger.is-visible > *:nth-child(5){animation-delay:320ms} .stagger.is-visible > *:nth-child(6){animation-delay:400ms}
@keyframes stagger-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ==========================================================================
   INTERIOR PAGES — page hero, breadcrumb, sidebar widget, layout-with-sidebar
   ========================================================================== */
.breadcrumb{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.76rem;
  color:var(--gray);margin-bottom:var(--sp-5)}
.breadcrumb a{color:var(--gray);text-decoration:none;
  background-image:linear-gradient(currentColor 0 0);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:color var(--dur-fast),background-size .4s,background-position 0s .4s}
.breadcrumb a:hover{color:var(--navy);background-position:100% 100%;background-size:100% 1px}
.breadcrumb span:not([aria-current]){font-size:0}
.breadcrumb span:not([aria-current])::before{content:"\203A\203A";font-size:.9rem;font-weight:800;color:var(--orange)}
.breadcrumb span[aria-current]{color:var(--orange);font-weight:700}

.page-hero{position:relative;padding-top:var(--sp-8);padding-bottom:var(--sp-8);overflow:hidden;isolation:isolate}
.page-hero .hero-bg{position:absolute;inset:0;z-index:-1;background:var(--tint-navy)}
/* H1/lead typography for .page-hero is set globally above, shared with
   .hero (see "Global banner typography" near the homepage hero rules) — do
   not redeclare font-size/weight/margin-top here, that's what caused Home
   and interior pages to drift out of sync before. */
.page-hero-meta{display:flex;gap:var(--sp-7);flex-wrap:wrap;margin-top:var(--sp-7);padding-top:var(--sp-5);
  border-top:1px solid var(--c-border-soft)}

/* Lead paragraph pulled out of a photo hero to sit on the plain page
   background right below it (used on About) — max-width comes from the
   shared banner-typography rule above (kept equal to the homepage's), only
   the surrounding breathing room is specific to this out-of-hero layout. */
.page-hero-lead-below{padding-top:var(--sp-7);padding-bottom:var(--sp-9);max-width:950px}
@media (max-width:640px){ .page-hero-lead-below{padding-top:var(--sp-6);padding-bottom:var(--sp-5)} }

/* Photo variant — interior page hero with a full-bleed background image and a
   dark navy scrim for readability, same treatment as the homepage hero. Opt
   in per page with .page-hero--photo; plain .page-hero elsewhere is unaffected. */
.page-hero--photo{padding-top:calc(var(--header-h) + var(--sp-7));padding-bottom:var(--sp-6);
  display:flex;align-items:flex-end}
.page-hero--photo > .container{width:100%}
@media (max-width:960px){ .page-hero--photo{padding-top:calc(var(--header-h-scrolled) + var(--sp-7));padding-bottom:var(--sp-5)} }
.page-hero--photo .hero-bg{--page-photo:none;
  background-image:
    linear-gradient(0deg, rgba(68,89,112,.92) 0%, rgba(68,89,112,.55) 55%, rgba(68,89,112,.3) 100%),
    var(--page-photo);
  background-size:cover;background-position:center;background-repeat:no-repeat}
.page-hero--photo .breadcrumb a{color:rgba(255,255,255,.85)}
.page-hero--photo .breadcrumb a:hover{color:#fff}
.page-hero--photo .eyebrow{color:rgba(255,255,255,.9)}
.page-hero--photo h1{color:#fff}
.page-hero--photo .lead{color:rgba(255,255,255,.82)}

/* Flat black overlay variant — a uniform black wash instead of the navy
   gradient above, for pages that ask for it specifically (e.g. Audit,
   AI in Audit, Insights). Image stays at full opacity; only this overlay
   layer carries the alpha. Default strength is 40%, but each page can set
   --overlay-alpha inline (e.g. style="--overlay-alpha:.52") when its own
   photo is brighter and needs a stronger wash to match the others visually. */
.page-hero--overlay-black .hero-bg{--overlay-alpha:.4;
  background-image:linear-gradient(rgba(0,0,0,var(--overlay-alpha)), rgba(0,0,0,var(--overlay-alpha))), var(--page-photo)}

.about-photo-band{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  aspect-ratio:21/8;margin-bottom:var(--sp-9)}
.about-photo-band img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){ .about-photo-band{aspect-ratio:16/11} }

/* About intro — text + accent-framed photo, two columns ------------------*/
.about-intro{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-9);align-items:center;
  padding-block:var(--sp-9)}
@media (max-width:860px){ .about-intro{grid-template-columns:1fr;gap:var(--sp-7)} }
.about-intro-text h2{margin-top:var(--sp-3)}
.about-intro-text .lead{margin-top:var(--sp-4);color:var(--c-muted)}
.about-intro-stats{display:flex;gap:var(--sp-7);margin-top:var(--sp-7);flex-wrap:wrap}
.about-intro-stat{display:flex;align-items:center;gap:var(--sp-3)}
.about-intro-stat-icon{width:52px;height:52px;border-radius:var(--radius-sm);background:var(--tint-navy);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.about-intro-stat-icon svg{width:24px;height:24px;color:var(--teal-deep)}
.about-intro-stat-num{display:block;font-family:var(--font-mono);font-weight:700;font-size:1.6rem;
  color:var(--navy);line-height:1}
.about-intro-stat-label{display:block;font-size:.82rem;color:var(--c-muted);margin-top:4px}
.about-intro-media{position:relative}
.about-intro-accent{position:absolute;inset:24px -24px -24px 24px;z-index:0;
  background:var(--teal);border-radius:var(--radius-lg)}
.about-intro-photo{position:relative;z-index:1;display:block;width:100%;aspect-ratio:4/3;
  object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
@media (max-width:640px){ .about-intro-accent{inset:16px -16px -16px 16px} }

/* About alternating image/text pairing — mirrors about-intro's split but
   with the photo on the left, so the two sections read as a deliberate
   left-right rhythm down the page instead of two identical layouts. */
.about-alt{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--sp-8);align-items:center}
@media (max-width:860px){ .about-alt{grid-template-columns:1fr;gap:var(--sp-6)} }
.about-alt-media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);display:block}
@media (max-width:860px){ .about-alt-media img{aspect-ratio:16/10} }
.about-alt-text h2{margin-top:var(--sp-3)}
.about-alt-body{display:flex;flex-direction:column;gap:var(--sp-4);color:var(--c-muted);
  line-height:1.75;margin-top:var(--sp-4)}

/* Article body — raw the_content() HTML from the WP editor. p{margin:0} and
   h1-h6{margin:0} are deliberate global resets for the component-based
   pages elsewhere, but plain long-form content still needs real vertical
   rhythm and a comfortable reading width, so both are restored here rather
   than globally. */
.article-body{max-width:720px;line-height:1.75;color:var(--navy)}
.article-body > * + *{margin-top:var(--sp-5)}
.article-body h2{font-size:var(--fs-h3);margin-top:var(--sp-8)}
.article-body h3{font-size:var(--fs-h4);margin-top:var(--sp-7)}
.article-body h2 + *,.article-body h3 + *{margin-top:var(--sp-3)}
.article-body ul,.article-body ol{padding-left:1.3em;display:flex;flex-direction:column;gap:var(--sp-2)}
.article-body li{padding-left:.2em}
.article-body blockquote{margin-inline:0;padding-left:var(--sp-5);border-left:3px solid var(--teal);
  color:var(--gray);font-style:italic}
.article-body img{border-radius:var(--radius);width:100%;height:auto}
.article-body a{color:var(--navy);text-decoration:none;font-weight:600;
  background-image:linear-gradient(currentColor 0 0);background-repeat:no-repeat;
  background-position:0 100%;background-size:0 1px;
  transition:background-size .4s,background-position 0s .4s}
.article-body a:hover{background-position:100% 100%;background-size:100% 1px}

/* Accordion — native <details>/<summary>, no JS. Same pattern already used
   for the drawer's Services submenu, just styled as a standalone component. */
.accordion{display:flex;flex-direction:column;gap:var(--sp-3)}
.accordion-item{border:1px solid var(--c-border-soft);border-radius:var(--radius-sm);overflow:hidden}
.accordion-item summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);cursor:pointer;list-style:none;font-weight:600;color:var(--navy)}
.accordion-item summary::-webkit-details-marker{display:none}
.accordion-item summary svg{flex-shrink:0;width:14px;height:14px;color:var(--teal-deep);
  transition:transform var(--dur-base) var(--ease-out)}
.accordion-item[open] summary svg{transform:rotate(180deg)}
.accordion-body{padding:0 var(--sp-5) var(--sp-5);color:var(--c-muted);line-height:1.65}

/* Related-content card — one small teaser link, used at the foot of
   service pages the same way auditree.com surfaces a related Insights
   article under each service. */
.related-card{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
  border:1px solid var(--c-border-soft);border-radius:var(--radius);padding:var(--sp-5) var(--sp-6);
  flex-wrap:wrap}
.related-card-label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gray);margin-bottom:6px;display:block}

.layout-sidebar{display:grid;grid-template-columns:1fr .34fr;gap:var(--sp-8);align-items:start}
@media (max-width:960px){ .layout-sidebar{grid-template-columns:1fr} }
.layout-main > section:first-child,.layout-main > *:first-child{margin-top:0}
.layout-main{display:flex;flex-direction:column;gap:var(--sp-9)}

.sidebar-widget{position:sticky;top:calc(var(--header-h-scrolled) + var(--sp-5));display:flex;flex-direction:column;gap:var(--sp-4)}
.widget-card{background:var(--ink-fff);border:1px solid var(--c-border-soft);border-radius:var(--radius);
  padding:var(--sp-6);box-shadow:var(--shadow-sm)}
.widget-card h4{margin-bottom:var(--sp-3)}
.widget-quick{display:flex;flex-direction:column;gap:10px}
.widget-quick-btn{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:var(--radius-sm);
  text-decoration:none;font-weight:700;font-size:.9rem;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base)}
.widget-quick-btn:hover{transform:translateY(-2px)}
.widget-quick-btn.whatsapp{background:rgba(75,195,199,.12);color:var(--navy)}
.widget-quick-btn.whatsapp:hover{box-shadow:var(--shadow-teal)}
.widget-quick-btn.linkedin{background:rgba(68,89,112,.08);color:var(--navy)}
.widget-quick-btn.linkedin:hover{box-shadow:var(--shadow-md)}
.widget-quick-btn svg{width:20px;height:20px;flex-shrink:0}
.widget-quick-btn.whatsapp svg{color:var(--teal-deep)}
.widget-quick-btn.linkedin svg{color:var(--navy)}
.widget-mini-form .field{margin-bottom:var(--sp-3)}
.widget-mini-form .field input,.widget-mini-form .field textarea{width:100%}
.widget-mini-form button{width:100%}
.widget-note{font-size:.72rem;color:var(--gray);margin-top:var(--sp-2)}

/* Leadership / team ------------------------------------------------------*/
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
@media (max-width:900px){ .team-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .team-grid{grid-template-columns:1fr} }
.team-card{background:var(--ink-fff);border:1px solid var(--c-border-soft);border-radius:var(--radius);
  padding:var(--sp-6);text-align:center;transition:transform var(--dur-base),box-shadow var(--dur-base)}
.team-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.team-avatar{width:180px;height:180px;border-radius:50%;margin:0 auto var(--sp-4);overflow:hidden;flex-shrink:0;
  border:3px solid var(--teal)}
.team-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.team-avatar.no-photo{background:var(--navy);color:var(--ink-fff);display:flex;align-items:center;
  justify-content:center;font-family:var(--font-head);font-weight:800;font-size:1.6rem}
@media (max-width:640px){ .team-avatar{width:130px;height:130px} .team-avatar.no-photo{font-size:1.2rem} }
.team-card h4{margin-bottom:3px;font-size:18px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-role{font-size:.82rem;font-weight:600;color:var(--teal-deep);margin-bottom:var(--sp-3);display:block}
.team-linkedin{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--gray);color:var(--ink-fff);margin-bottom:var(--sp-4);
  transition:background var(--dur-fast)}
.team-linkedin:hover{background:var(--navy)}
.team-linkedin svg{width:13px;height:13px}
.team-card p{color:var(--c-muted)}

/* Philosophy quote band --------------------------------------------------*/
.philosophy{background:var(--navy);border-radius:var(--radius-lg);padding:var(--sp-9) var(--sp-8);
  text-align:center;position:relative;overflow:hidden}
.philosophy blockquote{position:relative;font-family:var(--font-head);font-weight:800;color:var(--ink-fff);
  font-size:clamp(1.6rem,3.4vw,2.6rem);margin:0;line-height:1.2}
.philosophy p{position:relative;color:rgba(255,255,255,.7);margin-top:var(--sp-5);max-width:60ch;
  margin-inline:auto}

/* Numbered process steps --------------------------------------------------*/
.process-list{display:flex;flex-direction:column}
.process-step{display:grid;grid-template-columns:64px 1fr;gap:var(--sp-5);padding-block:var(--sp-6);
  border-top:1px solid var(--c-border-soft)}
.process-step:first-child{border-top:none}
.process-num{font-family:var(--font-mono);font-weight:800;font-size:1.6rem;color:var(--navy)}
.process-step h4{margin-bottom:var(--sp-2)}
.process-step p{color:var(--c-muted)}

/* Two-column contrast list (Risks vs Benefits, etc.) ----------------------*/
.contrast-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
@media (max-width:760px){ .contrast-grid{grid-template-columns:1fr} }
.contrast-col{border-radius:var(--radius);padding:var(--sp-6)}
.contrast-col.risk{background:rgba(247,148,29,.08);border:1px solid rgba(247,148,29,.25)}
.contrast-col.benefit{background:rgba(75,195,199,.08);border:1px solid rgba(75,195,199,.3)}
.contrast-col h4{margin-bottom:var(--sp-4)}
.contrast-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.contrast-col li{display:flex;gap:10px;color:var(--navy)}
.contrast-col li::before{content:"";width:6px;height:6px;border-radius:50%;margin-top:8px;flex-shrink:0}
.contrast-col.risk li::before{background:var(--orange)}
.contrast-col.benefit li::before{background:var(--teal-deep)}

/* Simple checklist / covers list -------------------------------------------*/
.covers-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
@media (max-width:700px){ .covers-grid{grid-template-columns:1fr} }
.covers-grid{list-style:none;padding:0;margin:0}
.covers-grid li{display:flex;gap:12px;align-items:flex-start;color:var(--navy)}
.covers-grid li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--teal);
  flex-shrink:0;margin-top:7px}

/* Tech stack chips ---------------------------------------------------------*/
.stack-chips{display:flex;gap:10px;flex-wrap:wrap}
.stack-chip{font-family:var(--font-mono);font-size:.82rem;font-weight:600;padding:9px 16px;border-radius:999px;
  background:rgba(68,89,112,.07);color:var(--navy);border:1px solid var(--c-border-soft)}

/* Frameworks / scenario card grid ------------------------------------------*/
.mini-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-4)}
.mini-card{background:var(--ink-fff);border:1px solid var(--c-border-soft);border-radius:var(--radius);
  padding:var(--sp-5);transition:transform var(--dur-base),box-shadow var(--dur-base)}
.mini-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.mini-card h4{font-size:1rem;margin-bottom:6px}
.mini-card p{color:var(--c-muted)}