/* ==========================================================================
   GRIDMARK PARTNERS — Marketing site stylesheet
   Tokens inherited verbatim from This Waay v1.8 / Gridmark Design System v3.
   Three-layer tokens: primitive · semantic · component.
   WCAG 2.1 AA from the foundation up. No build step — vanilla CSS.
   ========================================================================== */

/* ---- L1 · PRIMITIVES — brand (This Waay verbatim) ---- */
:root{
  --navy-900:#0C2A48;   /* Deep Navy */
  --navy-deep:#081F37;  /* Footer / deepest */
  --green-500:#54B987;  /* Waay Green — THE action accent. GUARDRAIL: fails contrast (2.4:1) on white — large text/icons/decorative rules ONLY, never body copy on white. */
  --green-punch:#3DD68C;/* Punch Green — ≤1 emphasis per page */
  --teal-500:#0BABAB;   /* Teal */
  --steel-500:#0D698A;  /* Steel Blue */
  --slate-400:#8DA3B5;  /* Slate */
  --mint-50:#EEF8EC;    /* Mint */
  --ice-50:#F2FBFB;     /* Ice */
  --coral-300:#F2A08D;  /* Path Coral — illustration only */
  --brass-500:#C8A46B;  /* Brass — Gridmark civic accent */

  /* derived functional steps (AA-tuned, never new brand colors) */
  --navy-800:#133A5E; --navy-700:#1C4C77;
  --green-600:#3E9E70; --green-700:#2E7D55; --green-tint:#EAF6EF;
  --brass-600:#A9874F; --brass-700:#7A6039; /* brass-700: AA text on light backgrounds — 5.9:1 on white (brass-600 only manages 3.35:1) */
  --brass-tint:#F6EFE1;
  --neutral-0:#FFFFFF; --neutral-50:#F6F8F9; --neutral-100:#EDF1F3;
  --neutral-200:#DFE6EA; --neutral-300:#C7D2D9; --neutral-500:#57697A;
  --neutral-700:#33454F; --neutral-900:#0C2A48;
  --danger-500:#B23A2E; --danger-700:#8E2C22; --danger-tint:#FBEEEC;
  --warning-500:#B7791F; --warning-tint:#FBF3E2;
  --info-500:#0D698A;  --info-tint:#E6F2F6;
  --success-500:#2E7D55; --success-tint:#EAF6EF;

  /* ---- L2 · SEMANTIC ---- */
  --bg-canvas:var(--neutral-0);
  --bg-soft:linear-gradient(135deg,var(--mint-50) 0%,var(--ice-50) 100%);
  --bg-mint:var(--mint-50);
  --bg-inverse:var(--navy-900);
  --bg-inverse-deep:var(--navy-deep);

  --text-primary:var(--navy-900);      /* 14.6:1 on white */
  --text-secondary:var(--neutral-500); /* ~5:1 on white  */
  --text-muted:var(--slate-400);       /* GUARDRAIL: 2.6:1 on white — large text only (≥18.7px bold / ≥24px normal); never body or caption-size text */
  --text-on-inverse:var(--neutral-0);
  --text-on-accent:var(--neutral-0);
  --text-link:var(--steel-500);        /* 6.2:1 on white */
  --text-link-inverse:var(--green-500);/* 6.0:1 on navy */

  --action:var(--green-500);
  --action-hover:var(--green-600);
  --action-pressed:var(--green-700);
  --action-subtle:var(--green-tint);
  --action-disabled:var(--neutral-200);
  --accent-civic:var(--brass-500);

  --border:var(--neutral-200);
  --border-strong:var(--neutral-300);
  --border-inverse:rgba(255,255,255,.16);
  --focus-ring:0 0 0 3px rgba(84,185,135,.55);
  --focus-ring-inverse:0 0 0 3px rgba(255,255,255,.7);

  /* ---- L1 · SCALES ---- */
  --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px;
  --space-5:32px; --space-6:48px; --space-7:64px; --space-8:96px;
  --section-pad:clamp(56px,8vw,110px);

  --radius-xs:6px; --radius-sm:10px; --radius-card:14px; --radius-pill:999px;

  --elev-1:0 1px 2px rgba(12,42,72,.08);
  --elev-2:0 4px 12px rgba(12,42,72,.10);
  --elev-3:0 14px 34px rgba(12,42,72,.16);
  --elev-4:0 24px 60px rgba(12,42,72,.22);

  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-decelerate:cubic-bezier(0,0,0,1);

  --z-sticky:100; --z-overlay:1000; --z-modal:1100;

  /* Axiforma is the brand face; Poppins is the only approved free fallback. */
  --font-sans:'Axiforma','Poppins','Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

  --container:1080px;
  --measure:66ch;
}

/* ---- reset / base ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;scroll-behavior:smooth;scroll-padding-top:120px}
body{font-family:var(--font-sans);color:var(--text-primary);background:var(--bg-canvas);line-height:1.7;font-size:16px}
img,svg{max-width:100%;height:auto}
a{color:var(--text-link)}
h1,h2,h3,h4{line-height:1.15;letter-spacing:-.015em;color:var(--text-primary)}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:4px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---- skip link ---- */
.skip{position:absolute;left:-9999px;top:0;z-index:calc(var(--z-sticky) + 10);background:var(--navy-900);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-weight:600;font-size:14px}
.skip:focus{left:0}

/* ---- layout primitives ---- */
.container{max-width:var(--container);margin:0 auto;padding:0 28px}
.container-wide{max-width:1200px;margin:0 auto;padding:0 28px}
.measure{max-width:var(--measure)}
.section{padding:var(--section-pad) 0}
.section.soft{background:var(--bg-soft)}
.section.mint{background:var(--bg-mint)}
.section.navy{background:var(--bg-inverse);color:var(--text-on-inverse)}
.section.navy h1,.section.navy h2,.section.navy h3,.section.navy h4{color:#fff}
.section-head{text-align:center;max-width:62ch;margin:0 auto var(--space-6)}
.section-head.left{text-align:left;margin-left:0}
.eyebrow{display:block;font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--green-700);margin-bottom:14px} /* was var(--action)/green-500 — 2.4:1 on white, failed AA */
.eyebrow.brass{color:var(--brass-700)} /* was brass-600 — 3.35:1 on white, failed AA */
.section.navy .eyebrow{color:var(--green-500)}
.section.navy .eyebrow.brass{color:var(--brass-500)}
h1.display{font-size:clamp(2.05rem,4.8vw,3.05rem);font-weight:700;letter-spacing:-.02em;line-height:1.06}
h2{font-size:clamp(1.55rem,3.3vw,2.1rem);font-weight:700;letter-spacing:-.01em}
h3{font-size:1.22rem;font-weight:600}
.hl{color:var(--green-500)}
.hl-on-light{color:var(--green-700)} /* 5.02:1 on white */
.lede{font-size:1.08rem;color:var(--text-secondary);max-width:62ch;margin:14px auto 0}
.section-head.left .lede{margin-left:0;margin-right:0}
.section.navy .lede{color:#c5d3dd}
.text-secondary{color:var(--text-secondary)}
.section.navy .text-secondary{color:#c5d3dd}
.stack > * + *{margin-top:var(--space-3)}

/* ---- buttons ---- */
.btn{font-family:var(--font-sans);font-weight:600;font-size:.95rem;border-radius:var(--radius-pill);padding:13px 26px;border:1.5px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;line-height:1;transition:background var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard);min-height:44px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--action);color:var(--navy-900)} /* navy on green-500: 6.02:1 AA */
.btn-primary:hover{background:var(--green-700);color:#fff} /* white on green-700: 5.02:1 AA */
.btn-primary:active{background:var(--green-700);color:#fff}
.btn-secondary{background:transparent;color:var(--navy-900);border-color:var(--border-strong)}
.btn-secondary:hover{border-color:var(--navy-900);background:var(--neutral-50)}
.btn-ghost-navy{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-ghost-navy:hover{border-color:var(--green-500);color:var(--green-500)}
.btn-tertiary{background:transparent;color:var(--text-link);padding:8px 4px;min-height:0}
.btn-tertiary:hover{color:var(--navy-900)}
.section.navy .btn-tertiary{color:var(--green-500)}
.section.navy .btn-tertiary:hover{color:#fff}
.btn-lg{font-size:1rem;padding:16px 32px}

/* ---- header / nav (two-row, sticky) ---- */
.site-header{position:sticky;top:0;z-index:var(--z-sticky);background:var(--navy-900);color:#fff;border-bottom:1px solid var(--border-inverse)}
.header-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;max-width:1200px;margin:0 auto}
.brand-lockup{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.brand-lockup .mark{flex:none}
.header-cta{display:flex;align-items:center;gap:20px}
.nav-endorse{font-size:.75rem;letter-spacing:.03em;color:var(--green-500);font-weight:600;white-space:nowrap;text-decoration:none}
.nav-endorse:hover,.nav-endorse:focus-visible{text-decoration:underline}
@media(max-width:480px){.nav-endorse{display:none}}
.nav-row{border-top:1px solid var(--border-inverse)}
.nav-row .nav-inner{display:flex;align-items:center;gap:4px;max-width:1200px;margin:0 auto;padding:0 22px;flex-wrap:wrap}
.site-nav{display:flex;gap:2px;flex-wrap:wrap}
.site-nav a{color:#B9CBDC;text-decoration:none;font-size:.85rem;font-weight:600;padding:14px 14px;border-bottom:2px solid transparent;transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);white-space:nowrap}
.site-nav a:hover{color:var(--green-500)}
.site-nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--green-500)}
.nav-toggle{display:none;background:transparent;border:1.5px solid rgba(255,255,255,.4);color:#fff;border-radius:8px;padding:9px 12px;cursor:pointer;font-size:.8rem;font-weight:600;align-items:center;gap:8px}

/* ---- credential rail — moved out of header chrome; page content, not chrome ----
   Renders its items with the existing .badge-cert component (see below) so credentials
   read as bordered/icon-led cards, not a second nav-like bar under the sticky header. */
.credential-rail{background:var(--bg-mint);border-bottom:1px solid var(--border);padding:18px 0}
.credential-rail .container-wide{display:flex;flex-wrap:nowrap;gap:14px;justify-content:center;overflow-x:auto}
.credential-rail .badge-cert{white-space:nowrap;font-size:.85rem;padding:11px 16px}

/* ---- hero ---- */
.hero{background:var(--navy-900);color:#fff;position:relative;overflow:hidden;padding:clamp(64px,9vw,120px) 0}
.hero .container{position:relative;z-index:1}
.hero h1{max-width:18ch}
.hero .lede{color:#c5d3dd;margin-left:0;max-width:60ch}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
/* abstract grid / reference-point motif */
.hero-motif{position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none}

/* ---- belief / statement block ---- */
.lead-heading{margin-bottom:var(--space-4)}
.lead-heading .hl{color:var(--green-600)}
.section.navy .lead-heading .hl{color:var(--green-500)}
.hl-on-light{color:var(--green-700)} /* 5.02:1 on white */
.statement{font-size:clamp(1.25rem,2.6vw,1.7rem);font-weight:600;letter-spacing:-.01em;line-height:1.4;max-width:40ch;margin:0 auto;text-align:center;color:var(--navy-900)}
.statement .hl{color:var(--green-600)}
.section.navy .statement{color:#fff}
.section.navy .statement .hl{color:var(--green-500)}
.hl-on-light{color:var(--green-700)} /* 5.02:1 on white */

/* ---- grids ---- */
.grid{display:grid;gap:var(--space-4)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:32px}

/* ---- cards ---- */
.card{background:var(--neutral-0);border:1px solid var(--border);border-radius:var(--radius-card);padding:28px 26px}
.card.on-soft{background:rgba(255,255,255,.7)}
.card h3{margin-bottom:8px}
.card p{color:var(--text-secondary);font-size:.95rem}
.card .card-icon{margin-bottom:16px;color:var(--navy-900)}

/* content card — green ground, angled top edge echoing the wing */
.card-content{background:var(--action);color:#fff;border-radius:var(--radius-card);padding:30px 28px;clip-path:polygon(0 8px,100% 0,100% 100%,0 100%)}
.card-content h3{color:#fff}
.card-content p,.card-content li{color:rgba(255,255,255,.92)}
.card-content .card-icon{color:#fff}
.card-content ul{list-style:none;margin-top:14px;font-size:.9rem}
.card-content ul li{padding-left:18px;position:relative;margin-top:7px;line-height:1.5}
.card-content ul li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:#fff;opacity:.85}

/* badge card — centered, navy shield */
.card-badge{background:#fff;border:1px solid var(--border);border-radius:var(--radius-card);padding:32px 26px;text-align:center;box-shadow:var(--elev-2)}
.card-badge .shield{margin:0 auto 16px;display:block}

/* method cards (Find/Build) */
.method-card ul{list-style:none;margin-top:16px}
.method-card ul li{padding-left:22px;position:relative;margin-top:9px;font-size:.92rem;color:var(--text-secondary);line-height:1.5}
.method-card ul li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--action)}

/* feature card / panel */
.panel{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-card);padding:28px 26px}
.panel.navy{background:var(--navy-800);border-color:var(--border-inverse);color:#fff}
.panel.navy p,.panel.navy li{color:#c5d3dd}

/* ---- provenance line (restrained, no logo wall) ---- */
.provenance-line{display:flex;align-items:center;gap:12px;font-size:.85rem;font-weight:600;color:var(--text-secondary);margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}
.provenance-line::before{content:"";width:22px;height:2px;background:var(--brass-500);flex:none}
.section.navy .provenance-line{color:#c5d3dd;border-color:var(--border-inverse)}
.section.navy .provenance-line::before{background:var(--green-500)}
/* quieter variant — a footnote aside rather than a called-out credential line */
.provenance-line.subtle{font-size:.78rem;font-weight:500;border-top:none;padding-top:0;margin-top:18px;opacity:.72}
.provenance-line.subtle::before{width:16px;opacity:.7}

/* ---- OutcomeMetric — numeral + label + optional context; proof strip & case capsules ----
   Only ever bind real, verified results here. If a real number isn't available yet,
   use the engagement-type/sector fallback pattern instead — never a placeholder numeral. */
.proof-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px}
.outcome-metric{text-align:center}
.outcome-metric .num{display:block;font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:700;color:var(--navy-900);letter-spacing:-.01em;line-height:1.1}
.section.navy .outcome-metric .num{color:#fff}
.outcome-metric .label{display:block;font-size:.9rem;font-weight:600;color:var(--text-secondary);margin-top:6px}
.section.navy .outcome-metric .label{color:#c5d3dd}
.outcome-metric .ctx{display:block;font-size:.8rem;color:var(--text-secondary);margin-top:2px} /* was text-muted — 2.6:1 on white at this size, failed AA */

/* ---- proof fallback (engagement types / sectors, when no verified metric exists yet) ----
   Icon-led cards instead of flat pills, for more visual weight in a section that's
   otherwise all text. */
.proof-groups{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.proof-group-title{text-align:center;font-size:.95rem;color:var(--text-secondary);font-weight:600;margin-bottom:16px}
.proof-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.proof-card{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;background:var(--neutral-0);border:1px solid var(--border);border-radius:var(--radius-sm);padding:20px 14px;transition:transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
.proof-card:hover{transform:translateY(-3px);box-shadow:var(--elev-2);border-color:var(--action)}
.proof-card .ic{color:var(--action);flex:none}
.proof-card span:last-child{font-size:.85rem;font-weight:600;color:var(--navy-900);line-height:1.35}
@media(max-width:700px){.proof-groups{grid-template-columns:1fr;gap:28px}}

/* ---- FirstEngagement — named, right-sized entry offer ----
   Text on the Waay Green ground is NAVY, not white: navy on green-500 is
   6.02:1 (AA) while white on green-500 is only 2.42:1 and fails. Same
   guardrail as .btn-primary. Fixed 2026-09-04 — the white-on-green version
   was a live AA violation caught by axe. */
.engagement-offer{background:var(--action);color:var(--navy-900);border-radius:var(--radius-card);padding:34px 32px;clip-path:polygon(0 8px,100% 0,100% 100%,0 100%)}
.engagement-offer h3{color:var(--navy-900);font-size:1.35rem;margin-bottom:8px}
.engagement-offer p{color:var(--navy-900)}
.engagement-offer .mechanism{margin-top:16px;font-size:.9rem;color:var(--navy-900);background:rgba(255,255,255,.38);border-radius:var(--radius-sm);padding:14px 16px}

/* who-we-serve item */
.serve-item{display:flex;gap:16px;align-items:flex-start}
.serve-item .ic{flex:none;color:var(--action);margin-top:2px}
.serve-item h4{font-size:1rem;font-weight:600;margin-bottom:4px}
.serve-item p{font-size:.9rem;color:var(--text-secondary)}

/* ---- services list (rows) ---- */
.service-row{display:flex;gap:18px;align-items:flex-start;padding:22px 0;border-bottom:1px solid var(--border)}
.service-row:last-child{border-bottom:none}
.service-row .ic{flex:none;color:var(--action);margin-top:3px}
.service-row h3{font-size:1.05rem;margin-bottom:4px}
.service-row p{color:var(--text-secondary);font-size:.95rem}
.service-row.featured h3 .feat{display:inline-block;margin-left:8px;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brass-700);border:1px solid var(--brass-500);border-radius:999px;padding:2px 9px;vertical-align:middle} /* was brass-600 — 3.35:1 on white, failed AA */

/* ---- pills / tags / chips ---- */
.pillset{display:flex;gap:8px;flex-wrap:wrap;align-items:center;list-style:none}
.tag{border:1.5px solid var(--action);color:var(--green-700);font-weight:600;font-size:.72rem;padding:5px 13px;border-radius:999px;display:inline-block} /* text was var(--action)/green-500 — 2.4:1 on white, failed AA */
.section.navy .tag{color:var(--green-500);border-color:var(--green-500)}
.badge-cert{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-left:3px solid var(--brass-500);border-radius:var(--radius-sm);padding:14px 18px;font-weight:600;font-size:.9rem;box-shadow:var(--elev-1)}
.badge-cert .ic{color:var(--action);flex:none}

/* ---- principles strip ---- */
.principles{display:flex;flex-wrap:wrap;gap:10px 14px;justify-content:center}
.principles .p{font-weight:600;font-size:.9rem;color:var(--navy-900);background:#fff;border:1px solid var(--border);border-radius:999px;padding:9px 18px}
.section.navy .principles .p{background:var(--navy-800);color:#fff;border-color:var(--border-inverse)}

/* ---- accordion ---- */
.acc{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.acc .item + .item{border-top:1px solid var(--border)}
.acc .head{width:100%;text-align:left;background:#fff;border:none;font-family:var(--font-sans);font-size:1rem;font-weight:600;color:var(--navy-900);padding:18px 20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px}
.acc .head:hover{background:var(--neutral-50)}
.acc .head .chev{color:var(--action);transition:transform var(--dur-base) var(--ease-standard);flex:none}
.acc .head[aria-expanded="true"] .chev{transform:rotate(90deg)}
.acc .body{padding:0 20px;max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease-standard),padding var(--dur-slow) var(--ease-standard);color:var(--text-secondary);font-size:.95rem}
.acc .body[data-open="true"]{padding:0 20px 18px;max-height:400px}

/* ---- data table ---- */
.data-table{width:100%;border-collapse:collapse;font-size:.92rem;margin-top:8px}
.data-table th{text-align:left;background:var(--neutral-50);font-weight:600;font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary);padding:11px 14px;border-bottom:2px solid var(--border-strong)}
.data-table td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:top}
.data-table tr:last-child td{border-bottom:none}
.kv-table{width:100%;border-collapse:collapse;font-size:.95rem}
.kv-table th{text-align:left;width:38%;font-weight:700;color:var(--navy-900);padding:12px 16px 12px 0;border-bottom:1px solid var(--border);vertical-align:top}
.kv-table td{padding:12px 0;border-bottom:1px solid var(--border);color:var(--text-secondary)}
.code-list{font-size:.9rem;color:var(--text-secondary);line-height:1.9}
.code-list b{color:var(--navy-900)}

/* ---- forms ---- */
.field{margin-bottom:20px}
.field label{display:block;font-size:.9rem;font-weight:600;margin-bottom:6px;color:var(--navy-900)}
.field .req{color:var(--danger-500)}
.field .hint{font-size:.8rem;color:var(--text-secondary);margin-top:6px}
.field .err{font-size:.8rem;color:var(--danger-500);margin-top:6px;font-weight:500}
.input,.textarea{width:100%;font-family:var(--font-sans);font-size:1rem;padding:12px 14px;border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);background:#fff;color:var(--navy-900);transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.input::placeholder,.textarea::placeholder{color:var(--text-secondary)} /* was text-muted — 2.6:1 on white, failed AA */
.input:hover,.textarea:hover{border-color:var(--neutral-500)}
.input:focus,.textarea:focus{outline:none;border-color:var(--action);box-shadow:var(--focus-ring)}
.textarea{min-height:140px;resize:vertical;line-height:1.6}
.form-note{font-size:.85rem;color:var(--text-secondary);margin-top:8px}
.form-status{margin-top:16px;padding:14px 16px;border-radius:var(--radius-sm);font-size:.95rem;display:none}
.form-status.show{display:block}
.form-status.ok{background:var(--success-tint);color:var(--success-500);border:1px solid rgba(46,125,85,.25)}
.form-status.err{background:var(--danger-tint);color:var(--danger-700);border:1px solid rgba(178,58,46,.25)}

/* ---- alert / callout ---- */
.callout{border-left:3px solid var(--action);background:var(--neutral-50);padding:16px 20px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:.95rem;color:var(--text-secondary)}
.callout.navy{background:var(--navy-800);color:#c5d3dd;border-color:var(--green-500)}

/* ---- CTA block ---- */
.cta-block{background:var(--bg-soft)}
.cta-block .inner{text-align:center;max-width:46ch;margin:0 auto}
.cta-block h2{margin-bottom:12px}
.cta-block p{color:var(--text-secondary);margin-bottom:26px}

/* ---- footer ---- */
.site-footer{background:var(--navy-deep);color:#cdd9e3;padding:var(--space-7) 0 var(--space-5)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1.4fr 1fr;gap:36px}
.site-footer h2{color:#fff;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:16px}
.site-footer a{color:#cdd9e3;text-decoration:none;font-size:.9rem}
.site-footer a:hover{color:var(--green-500)}
.site-footer ul{list-style:none}
.site-footer ul li{margin-bottom:9px}
.footer-brand .descriptor{font-size:.85rem;color:#9fb4c4;margin-top:10px;line-height:1.6}
.footer-brand .endorse{color:var(--green-500);font-weight:600;font-size:.85rem;margin-top:8px;display:block}
.footer-facts li{font-size:.85rem;line-height:1.5}
.footer-facts b{color:#fff;font-weight:600}
.footer-bottom{border-top:1px solid var(--border-inverse);margin-top:var(--space-6);padding-top:var(--space-4);display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;font-size:.8rem;color:#9fb4c4}
.footer-bottom a{font-size:.8rem;color:#9fb4c4}

/* ---- misc ---- */
.center{text-align:center}
.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}
.link-arrow{font-weight:600;text-decoration:none;color:var(--text-link);display:inline-flex;align-items:center;gap:6px}
.link-arrow:hover{gap:9px}
.section.navy .link-arrow{color:var(--green-500)}
.subtle-note{font-size:.85rem;color:var(--text-secondary)}
.client-needed{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brass-700);border:1px dashed var(--brass-500);border-radius:999px;padding:3px 12px;display:inline-block;background:var(--brass-tint)} /* was brass-600 — 3.35:1 on white, failed AA */

/* ---- reveal on scroll (respects reduced motion) ---- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity var(--dur-slow) var(--ease-decelerate),transform var(--dur-slow) var(--ease-decelerate)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---- relevant experience: teaser cards ---- */
.exp-grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(3,1fr)}
.exp-card{position:relative;padding:0;overflow:hidden;display:flex;flex-direction:column;transition:opacity var(--dur-slow) var(--ease-decelerate) var(--stagger,0ms),transform var(--dur-slow) var(--ease-decelerate) var(--stagger,0ms),box-shadow var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.exp-grid .exp-card:nth-child(2){--stagger:60ms}
.exp-grid .exp-card:nth-child(3){--stagger:120ms}
.exp-grid .exp-card:nth-child(4){--stagger:180ms}
.exp-grid .exp-card:nth-child(5){--stagger:240ms}
.exp-card:hover{box-shadow:var(--elev-2);border-color:var(--green-500)}
.exp-card:hover .card-link{color:var(--green-700);text-decoration:underline}
.card-link::after{content:"";position:absolute;inset:0;z-index:1}
.card-link:focus-visible{box-shadow:none}
.card-link:focus-visible::after{box-shadow:var(--focus-ring);border-radius:var(--radius-card)}
.exp-thumb{display:block;line-height:0;background:var(--navy-900)}
.exp-thumb svg{width:100%;height:auto;display:block}
.exp-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.exp-body h3{font-size:.98rem;line-height:1.35}
.exp-body h3 a{color:var(--navy-900);text-decoration:none}
.exp-body h3 a:hover,.exp-body h3 a:focus-visible{color:var(--green-700);text-decoration:underline}
.exp-teaser{font-size:.86rem;line-height:1.55}
.chip{display:inline-block;padding:2px 8px 1px;color:var(--green-700);font-size:11px;line-height:16px;font-weight:500;background:transparent;border:1px solid var(--green-500);border-radius:2px;white-space:nowrap} /* This Waay work-page tag treatment; green-700 text for AA (green-500 fails on white) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.exp-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding-top:4px}
.exp-foot .link-arrow{font-size:.88rem}

/* ---- case-study detail pages ---- */
.case-hero{background:var(--bg-inverse);color:var(--text-on-inverse);padding:var(--space-6) 0 var(--space-7)}
.case-hero .eyebrow{color:var(--brass-500);margin:22px 0 0}
.case-hero h1{color:#fff;font-size:clamp(1.65rem,3.4vw,2.4rem);max-width:28ch;margin-top:12px}
.case-hero .lede{color:#c5d3dd;margin-left:0;max-width:66ch}
.crumb{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;color:#c5d3dd;text-decoration:none}
.crumb:hover,.crumb:focus-visible{color:#fff}
.fact-box{background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px 18px}
.fact-box .label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-700);margin-bottom:5px}
.fact-box .value{font-weight:600;color:var(--navy-900);font-size:.95rem;line-height:1.45}
.role-quote{border-left:3px solid var(--brass-500);padding:6px 0 6px 20px;margin-top:24px;color:var(--text-secondary)}
.role-quote .label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-700);margin-bottom:6px}
.artifact-figure{margin:var(--space-5) 0 0;border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;background:#fff}
.artifact-figure img{display:block;width:100%;height:auto}
.artifact-figure figcaption{padding:12px 18px;font-size:.85rem;color:var(--text-secondary);border-top:1px solid var(--border)}
.case-list{margin:14px 0 0 20px;color:var(--text-secondary);font-size:.97rem}
.case-list li{margin-top:8px}
.group-panel h3{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-700);margin-bottom:10px}
.group-panel ul{list-style:none;font-size:.93rem;color:var(--text-secondary)}
.group-panel ul li{padding-left:18px;position:relative;margin-top:7px;line-height:1.5}
.group-panel ul li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--brass-500)}
.group-panel ul + h3{margin-top:26px}

/* ---- responsive ---- */
@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .exp-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .exp-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .nav-toggle{display:inline-flex}
  .site-nav{display:none;flex-direction:column;width:100%;padding:6px 0 12px}
  .site-nav.open{display:flex}
  .site-nav a{padding:12px 6px;border-bottom:1px solid var(--border-inverse)}
  .site-nav a[aria-current="page"]{border-bottom-color:var(--green-500)}
  .nav-row .nav-inner{padding:0 22px}
  .header-cta .btn{display:none}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}

/* ---- print (capability statement → PDF) ---- */
@media print{
  body{background:#fff;font-size:11pt}
  .site-header,.credential-rail,.site-footer,.cta-block,.no-print,.nav-toggle{display:none!important}
  .section{padding:18px 0}
  a{color:var(--navy-900);text-decoration:none}
  .wrap-print{max-width:100%;padding:0}
}

/* ---- hero WOSB seal — top-right corner medallion, oversized for prominence ---- */
.hero-seal{position:absolute;top:clamp(20px,4vw,40px);right:clamp(20px,4vw,40px);z-index:1;width:clamp(96px,11vw,148px);height:auto;opacity:.95}
@media(max-width:640px){.hero-seal{position:static;margin:8px 28px 4px;width:104px}}

/* ==========================================================================
   Services restructure — seven code-aligned groups under the two movements
   ========================================================================== */

/* ---- home overview: movement band labels ---- */
.band-label{display:flex;align-items:center;justify-content:center;gap:18px;margin:var(--space-6) 0 var(--space-4);font-size:.8rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--green-700);text-align:center}
.band-label::before,.band-label::after{content:"";height:1px;background:var(--border-strong);flex:1;max-width:170px}
.band-label.brass{color:var(--brass-700)}

/* ---- home overview: group cards (icon + name + one-liner, nothing more) ---- */
.svc-card h4{font-size:1.05rem;font-weight:600;margin-bottom:6px;color:var(--navy-900)}

/* featured Responsible AI card — the bridge; breaks the grid full-width on purpose */
.svc-feature{background:var(--navy-900);color:#fff;border-left:3px solid var(--brass-500);border-radius:var(--radius-card);padding:32px 30px;display:flex;gap:22px;align-items:flex-start;box-shadow:var(--elev-2)}
.svc-feature .card-icon{color:var(--green-500);flex:none;margin-top:2px}
.svc-feature h4{color:#fff;font-size:1.15rem;font-weight:600;margin-bottom:6px}
.svc-feature p{color:#c5d3dd;font-size:.98rem;max-width:72ch}
@media(max-width:560px){.svc-feature{flex-direction:column;gap:14px}}

/* ==========================================================================
   WHAT WE DO — v3 (Sep 2026)
   Tier 1 ambient (§6A): decorative inline SVG, ≤5% navy on light / ≤8% white
     on navy, corner-anchored and gradient-masked. Never animated.
   Tier 2 structural (§6B): hairline rules instead of bordered cards, and the
     brass spine — now a HORIZONTAL orientation rail tracking position through
     the six-service carousel.
   Tier 3 focal (§6C): exactly ONE composition, in the hero.
   ========================================================================== */

/* hairline rules — the "drawn, not boxed" layer */
:root{
  --rule-brass:rgba(200,164,107,.55);
  --rule-mint:rgba(84,185,135,.30);
}

/* ---- tier 1 · ambient decorative layer ---- */
.sec-hero,.sec-situations,.sec-services,.sec-serve,.sec-modern,.sec-proof,.sec-engage,.has-amb{position:relative;overflow:hidden}
.sec-hero > .container,.sec-situations > .container,.sec-services > .container,
.sec-serve > .container,.sec-modern > .container,.sec-proof > .container,
.has-amb > .container{position:relative;z-index:1}
.amb{position:absolute;inset:0;pointer-events:none;z-index:0;color:var(--navy-900);opacity:.05}
.section.navy .amb{color:#fff;opacity:.08}
.amb-svg{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---- 1 · hero — statement + the page's one focal composition ---- */
.sec-hero{padding:clamp(72px,9vw,122px) 0}
.hero-grid{display:grid;grid-template-columns:1.38fr .62fr;gap:clamp(28px,4vw,56px);align-items:center}
.hero-title{font-size:clamp(1.85rem,3.9vw,2.72rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;max-width:30ch}
.hero-sub{font-size:clamp(1.1rem,1.9vw,1.32rem);font-weight:600;line-height:1.5;color:#fff;max-width:52ch;margin-top:22px}
.hero-sub .hl{color:var(--green-500)} /* 6.02:1 on navy */
.hero-sub .hero-beat{display:block}
.hero-support{font-size:.95rem;line-height:1.75;color:#c5d3dd;max-width:62ch;margin-top:22px;padding-top:18px;border-top:1px solid var(--border-inverse)}
.focal-svg{display:block;width:100%;max-width:430px;height:auto;margin-left:auto}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .focal-svg{max-width:360px;margin:10px auto 0}
}

/* ---- 2 · where we come in — recognition, not diagnosis ---- */
.sec-situations .eyebrow{margin-bottom:var(--space-5)}
.situations{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px)}
.situation{border-left:2px solid var(--rule-brass);padding:2px 0 2px 20px}
.situation h3{font-size:1.06rem;font-weight:700;line-height:1.35;margin-bottom:10px;max-width:22ch}
.situation p{font-size:.95rem;color:var(--text-secondary);line-height:1.65}
@media(max-width:820px){.situations{grid-template-columns:1fr;gap:24px}}

/* ---- 3 · the six cards ARE the navigation (ARIA tablist) ----
   One horizontal row of six. Selection is a filled white card with a green
   accent bar; brass stays reserved for the Responsible AI differentiator, so
   the two signals never collide. The duotone icons are navy line-art, so the
   selected state must stay LIGHT — never a navy fill. */
.svc-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
/* The accent bar is a ::after, never a border — a transparent bottom border
   reads as the card fading out at the base. Every edge stays 1px, always. */
.svc-tab{position:relative;overflow:hidden;appearance:none;-webkit-appearance:none;font:inherit;color:inherit;text-decoration:none;
  text-align:left;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  width:100%;height:100%;background:rgba(255,255,255,.55);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:16px 14px 19px;
  transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
.svc-tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent;
  transition:background var(--dur-fast) var(--ease-standard)}
.svc-tab .tw-ic{width:42px;height:42px;flex:none;opacity:.9;transition:opacity var(--dur-fast) var(--ease-standard)}
.svc-tab-name{display:block;font-size:.88rem;font-weight:600;line-height:1.3;color:var(--navy-900)}
.svc-tab:hover{background:rgba(255,255,255,.8);border-color:var(--border-strong)}
.svc-tab:hover .tw-ic{opacity:1}
.svc-tab[aria-selected="true"]{background:#fff;border-color:var(--brass-500)}
.svc-tab[aria-selected="true"]::after{background:var(--brass-500)}
.svc-tab[aria-selected="true"] .tw-ic{opacity:1}
.svc-tab[aria-selected="true"] .svc-tab-name{font-weight:700}

.svc-tab.featured .svc-tab-name{color:var(--brass-700)}
@media(max-width:1000px){.svc-tabs{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.svc-tabs{grid-template-columns:repeat(2,1fr)}}

/* ---- the spine, turned on its side: position through the set ---- */
.svc-rail{position:relative;display:flex;justify-content:space-between;align-items:center;margin:var(--space-6) 0 var(--space-5);padding:0 6px}
.svc-rail::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--rule-brass);transform:translateY(-50%)}
.rail-node{position:relative;width:11px;height:11px;border-radius:50%;border:1px solid var(--rule-brass);background:transparent;
  transition:background var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.rail-node.is-on{background:var(--brass-500);border-color:var(--brass-500);transform:scale(1.4)}
@media(prefers-reduced-motion:reduce){.rail-node{transition:none}}

/* ---- service panels — one at a time, entering horizontally ----
   With JS off nothing is hidden: the panels simply stack, spaced apart. */
.svc-panels{position:relative}
.svc-panel + .svc-panel{margin-top:var(--space-7);padding-top:var(--space-6);border-top:1px solid var(--border)}
.is-tabbed .svc-panel + .svc-panel{margin-top:0;padding-top:0;border-top:0}
.svc-panel:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:6px}
@keyframes svc-slide-next{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
@keyframes svc-slide-prev{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
.svc-panel.from-next{animation:svc-slide-next .4s var(--ease-decelerate) both}
.svc-panel.from-prev{animation:svc-slide-prev .4s var(--ease-decelerate) both}
@media(prefers-reduced-motion:reduce){
  .svc-panel.from-next,.svc-panel.from-prev{animation:none}
}

/* ---- panel anatomy — icon ABOVE the name so every line starts at the same x ---- */
.svc-panel-ic{display:block;width:52px;height:52px;margin-bottom:16px}
.svc-title{max-width:34ch;font-size:clamp(1.3rem,2.2vw,1.58rem);font-weight:700;letter-spacing:-.01em;line-height:1.26}
.svc-title .kicker{display:block;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px;color:var(--green-700)}
.svc-panel.is-featured .svc-title .kicker{color:var(--brass-700)}
.svc-what{font-size:1rem;color:var(--text-secondary);max-width:66ch;margin-top:14px;line-height:1.7}
/* the two boxed cards from the wireframe: quiet panel + navy panel */
.svc-detail{margin-top:var(--space-5);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);align-items:start}
/* both cards sit on the same white ground — the pair reads as one unit */
.svc-subs,.svc-gets{background:#fff;border:1px solid var(--border);border-radius:var(--radius-card);padding:24px 26px}
.svc-gets ul{list-style:none}
.svc-gets li{padding-left:24px;position:relative;margin-top:9px;font-size:.94rem;color:var(--navy-900);line-height:1.55}
.svc-gets li::before{content:"✓";position:absolute;left:0;top:0;font-weight:700;color:var(--green-700)}
@media(max-width:820px){.svc-detail{grid-template-columns:1fr}}
.svc-subhead{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:10px}
.svc-list{list-style:none}
.svc-list li{padding-left:20px;position:relative;margin-top:9px;font-size:.94rem;color:var(--text-secondary);line-height:1.55}
.svc-list li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--green-600)}
.svc-list li.strong{color:var(--navy-900);font-weight:600}
.svc-list li.strong::before{background:var(--brass-500)}
/* what-you-get — a hairline rule, not a panel */

/* procurement codes — quiet type on a rule, no chip */
.proc-tag{margin-top:var(--space-5);padding-top:12px;border-top:1px solid var(--border);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.02em;line-height:1.8;color:var(--text-secondary)}
.proc-tag .proc-label{display:inline-block;margin-right:10px;font-family:var(--font-sans);font-weight:700;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-700)}

/* ---- 4 · who we serve — bordered cards + duotone icons ---- */
.serve-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px)}
.serve-card{display:flex;flex-direction:column;gap:10px;padding:24px 22px}
.serve-card .tw-ic{width:46px;height:46px}
.serve-card h3{font-size:1rem;font-weight:600;line-height:1.35}
.serve-card p{font-size:.92rem;color:var(--text-secondary);line-height:1.6}
@media(max-width:980px){.serve-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.serve-grid{grid-template-columns:1fr}}

/* ---- 5 · modern by default — white cards ON the navy band. The duotone
   icons are navy line-art, so they need a light ground to stay legible. ---- */
.modern-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,28px)}
.modern-card{display:flex;flex-direction:column;gap:10px;padding:26px 24px}
.modern-card .tw-ic{width:46px;height:46px}
/* .section.navy h3 (0,2,1) would otherwise paint these white-on-white —
   a light card on a dark band needs to out-specify the band's heading rule. */
.section.navy .modern-card h3{font-size:1.02rem;font-weight:600;color:var(--navy-900)}
.modern-card p{font-size:.93rem;color:var(--text-secondary);line-height:1.65}
@media(max-width:820px){.modern-grid{grid-template-columns:1fr}}

/* ---- 6 · proof teasers ---- */
.proof-teasers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,36px)}
.proof-teaser{border-top:1px solid var(--rule-brass);padding-top:16px}
.proof-teaser h3{font-size:1rem;font-weight:600;line-height:1.4;margin-bottom:8px}
.proof-teaser h3 a{color:var(--navy-900);text-decoration:none}
.proof-teaser h3 a:hover,.proof-teaser h3 a:focus-visible{color:var(--green-700);text-decoration:underline}
.proof-teaser p{font-size:.92rem;color:var(--text-secondary);line-height:1.6}
@media(max-width:820px){.proof-teasers{grid-template-columns:1fr;gap:0}.proof-teaser{margin-top:22px}}

/* ---- 7 · how to engage ---- */
/* The engage band (mint) and the shared CTA (mint→ice gradient) would otherwise
   read as one continuous field; a hairline keeps the page's last transition
   crisp without altering the sitewide .cta-block component. */
.sec-engage + .cta-block{border-top:1px solid var(--rule-mint)}
.engage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,36px)}
.engage-card{background:#fff;border:1px solid var(--border);border-left:3px solid var(--brass-500);
  border-radius:var(--radius-sm);padding:22px 24px}
.engage-card h3{font-size:1rem;font-weight:600;margin-bottom:8px}
.engage-card p{font-size:.93rem;color:var(--text-secondary);line-height:1.65}
@media(max-width:820px){.engage-grid{grid-template-columns:1fr}}

/* ---- method-card illustrated icons ----
   .draw strokes self-draw and .pop/.pulse accents scale in when the card's
   .reveal observer adds .in; --d staggers each element. Path/rect/circle all
   carry pathLength="1" so one dasharray rule fits every shape. */
.method-card .card-icon{margin-bottom:18px}
.method-card .illus{display:block;overflow:visible;transition:transform .25s var(--ease-standard)}
.method-card:hover .illus{transform:translateY(-3px)}
.illus .draw{stroke-dasharray:1;stroke-dashoffset:1}
.method-card.in .illus .draw{animation:illus-draw 1s var(--ease-decelerate) forwards;animation-delay:var(--d,0s)}
.illus .pop,.illus .pulse{opacity:0;transform:scale(.3);transform-origin:center;transform-box:fill-box}
.method-card.in .illus .pop{animation:illus-pop .5s var(--ease-decelerate) forwards;animation-delay:var(--d,1s)}
.method-card.in .illus .pulse{animation:illus-pop .5s var(--ease-decelerate) forwards,illus-pulse 3.4s ease-in-out infinite;animation-delay:var(--d,1s),calc(var(--d,1s) + .8s)}
@keyframes illus-draw{to{stroke-dashoffset:0}}
@keyframes illus-pop{to{opacity:1;transform:scale(1)}}
@keyframes illus-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){
  .illus .draw{stroke-dasharray:none;stroke-dashoffset:0;animation:none!important}
  .illus .pop,.illus .pulse{opacity:1;transform:none;animation:none!important}
  .method-card:hover .illus{transform:none}
}

/* ==========================================================================
   HOME — alignment pass (Sep 2026)
   Home and What We Do are one system read at two depths: Home echoes the
   belief and the visual language, never the depth or the interactivity.
   ========================================================================== */

/* ---- methodology statement — Home's ONE focal moment ---- */
.sec-method{padding:clamp(72px,9vw,116px) 0}
.method-grid{display:grid;grid-template-columns:1.32fr .68fr;gap:clamp(28px,4vw,56px);align-items:center}
.method-title{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:700;letter-spacing:-.02em;line-height:1.18;max-width:28ch}
.method-sub{font-size:clamp(1.05rem,1.8vw,1.24rem);font-weight:600;line-height:1.55;color:var(--navy-900);max-width:52ch;margin-top:20px}
.method-beat{display:block}
@media(max-width:900px){
  .method-grid{grid-template-columns:1fr}
  .sec-method .focal-svg{max-width:330px;margin:8px auto 0}
}

/* ---- services overview — What We Do's card treatment, static links ----
   Three-up rather than six-across: Home keeps the one-line descriptors, which
   need roughly twice the column width the six-across tab row allows. */
.home-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,20px)}
.home-svc-grid .svc-tab{gap:8px;padding:20px 18px 22px}
.svc-tab-desc{display:block;font-size:.9rem;color:var(--text-secondary);line-height:1.55}
.home-svc-grid .svc-tab:hover::after{background:var(--green-600)}
.home-svc-grid .svc-tab.featured:hover::after{background:var(--brass-500)}
@media(max-width:900px){.home-svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.home-svc-grid{grid-template-columns:1fr}}

/* ---- who-we-serve + why-Gridmark — hairline rules, no boxes or shadows ---- */
.home-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,30px)}
.home-tiles-3{grid-template-columns:repeat(3,1fr)}
.home-tile{display:flex;flex-direction:column;gap:9px;padding:0 0 20px;border-bottom:1px solid var(--rule-mint)}
.home-tile .tw-ic{width:42px;height:42px;margin-bottom:2px}
.home-tile h3{font-size:1rem;font-weight:600;line-height:1.35}
.home-tile p{font-size:.92rem;color:var(--text-secondary);line-height:1.6}
.home-tile p.mt-4{margin-top:auto;padding-top:var(--space-3)}
@media(max-width:900px){.home-tiles,.home-tiles-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.home-tiles,.home-tiles-3{grid-template-columns:1fr}}