/* Blackland Advisors — "Blueprint" design system.
   Single source of truth for every real page's tokens, base reset, and shared components
   (grain, plate, card-frame, buttons, header/nav/mobile-nav, section families, the recurring
   compass-arc / stat-band / situations-band / split-visual / meet-blackland devices, quote,
   final-cta, footer). Edit here once — every page that links this file picks it up. NOTE: a
   "sheet-label" corner tag (SHEET 01/02...) was tried and explicitly rejected by BC 2026-09-01 —
   do not reintroduce it on any page.
   Page-specific rules (unique hero copy widths, one-off layout tweaks) belong in that page's own
   <style> block, not here. */

:root{
  --vellum:#F2F5F5;
  --canvas:#D8E4E9;
  --mist:#BBD1DC;
  --mist-line:#9FBBC9;
  --paper-line:#C9D6D9;
  --white:#FFFFFF;
  --ink:#14232B;
  --ink-soft:#4B5C63;
  --ink-faint:#55656D;
  --cobalt:#1D4E89;
  --cobalt-light:#4A7FB8;
  --cobalt-deep:#123258;
  --redline:#C1592F;
  --redline-deep:#8F4023;
  --on-dark:#DCE8F2;
  --on-dark-soft:#A9C2D6;
  --plate-on-dark:#8FC1E8;
  /* 2026-09-01: brighter emphasis tint for bold/large redline text set on the .deep/.ink gradient
     family (e.g. the pull-quote's bolded word) — --redline itself measures 2.2:1 there, well under
     even the 3:1 large-text minimum. --redline-bright measures ~4:1 against the gradient's lightest
     stop and is reserved for that one use, never as a background fill. */
  --redline-bright:#E89B72;
  --display:'Hanken Grotesk', 'Segoe UI', sans-serif;
  --body:'Work Sans', 'Segoe UI', sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--vellum); color:var(--ink); font-family:var(--body); font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased;}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important; scroll-behavior:auto !important;} }
h1,h2,h3,h4{font-family:var(--display); font-weight:600; letter-spacing:-.01em; color:var(--ink); text-wrap:balance; margin:0; line-height:1.3;}
p{margin:0;}
a{color:inherit;}
.container{max-width:1180px; margin:0 auto; padding:0 2rem; position:relative; z-index:1;}
@media (max-width:640px){ .container{padding:0 1.25rem;} }

/* Grain texture: a small pre-rendered noise tile, repeated via background-image — NOT a live
   filter:url(#blueprint-grain) SVG filter. A feTurbulence filter forces the browser onto a slow,
   non-GPU-accelerated compositing path for the whole layer it's applied to; with 14 .grain sections
   stacked on a single ~12,000px page (the homepage), that was enough to stall the compositor and
   render blank white gaps during fast scrolling. Baking the same feTurbulence noise into a 120x120
   tile and tiling it as an ordinary background-image keeps the identical texture at a fraction of
   the paint cost, because a tiled bitmap composites like any other background image. Fixed 2026-09-22
   after a fast-scroll audit reproduced the blanking reliably. Do not revert to filter:url(). */
.grain{position:relative;}
.grain::after{content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat; background-size:120px 120px; mix-blend-mode:overlay;}
.grain-light::after{opacity:.06;}
.grain-dark::after{opacity:.09;}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:.6em 1em; z-index:200;}
.skip-link:focus{left:1rem; top:1rem;}

.plate{font-family:var(--body); font-size:.76rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--cobalt-deep);}
.plate.on-dark{color:var(--plate-on-dark);}

.card-frame{background:var(--white); border:1px solid var(--paper-line); border-top:3px solid var(--cobalt-deep); transition:border-top-color .18s ease;}
a.card-frame:hover{border-top-color:var(--cobalt);}

.btn{appearance:none; -webkit-appearance:none; background:none; display:inline-flex; align-items:center; gap:.6em; font-family:var(--body); font-weight:600; font-size:1rem; padding:.9em 1.8em; border-radius:1px; border:1.5px solid transparent; cursor:pointer; text-decoration:none; transition:background .15s ease, color .15s ease, border-color .15s ease;}
.btn:focus-visible{outline:2px solid var(--cobalt); outline-offset:2px;}
/* 2026-09-01: default fill darkened from --redline to --redline-deep — the button text (#FDF3EE)
   measured 4.1:1 against --redline, under the 4.5:1 minimum for this button's 600-weight 16px label.
   Against --redline-deep it measures ~7:1. --redline (brighter) is now reserved for hover only. */
.btn-solid{background:var(--redline-deep); color:#FDF3EE; border-color:var(--redline-deep);}
.btn-solid:hover{background:var(--redline); border-color:var(--redline);}
.btn-line{border-color:var(--cobalt-deep); color:var(--cobalt-deep);}
.btn-line:hover{background:var(--cobalt-deep); color:#fff;}
.btn-ghost-dark{border-color:rgba(255,255,255,.5); color:#fff;}
.btn-ghost-dark:hover{border-color:#fff; background:rgba(255,255,255,.1);}

header.site{position:sticky; top:0; z-index:100; background:rgba(242,245,245,.96); backdrop-filter:blur(6px); border-bottom:1px solid var(--paper-line);}
header.site .bar{display:flex; align-items:center; justify-content:space-between; padding:1.15rem 0;}
.wordmark{font-family:var(--display); font-weight:700; font-size:1.28rem; text-decoration:none; color:var(--cobalt-deep); letter-spacing:-.005em;}
.wordmark span{color:var(--redline-deep);}
nav.primary{display:flex; align-items:center; gap:2.1rem;}
nav.primary a{font-family:var(--body); font-size:.98rem; font-weight:500; text-decoration:none; color:var(--ink-soft);}
nav.primary a:hover, nav.primary a.active{color:var(--ink);}

/* MEGAMENU — About > Services/Leadership, Industries > the 3 focus industries. Pure CSS (:hover +
   :focus-within, no JS) so tabbing to the trigger link opens its panel the same as hovering it. */
nav.primary .nav-item{position:relative;}
nav.primary .nav-item > a::after{content:''; display:inline-block; width:6px; height:6px; margin-left:.4em; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); opacity:.6;}
/* padding-top (not margin-top) closes the hover gap: the buffer between the nav link and the visible
   menu must be part of the panel's own hit-area, or the mouse loses :hover crossing empty space and the
   menu snaps shut before you can reach it. */
nav.primary .dropdown-panel{position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(4px); min-width:230px; padding:1.4rem 0 .5rem; background:#fff; border:1px solid var(--paper-line); border-top:3px solid var(--cobalt-deep); box-shadow:0 16px 32px rgba(20,35,43,.14); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s ease, transform .15s ease; z-index:120;}
nav.primary .nav-item:hover .dropdown-panel, nav.primary .nav-item:focus-within .dropdown-panel{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);}
nav.primary .dropdown-panel a{display:block; padding:.65em 1.3rem; font-size:.94rem; font-weight:500; color:var(--ink-soft); white-space:nowrap;}
nav.primary .dropdown-panel a:hover, nav.primary .dropdown-panel a:focus-visible{color:var(--ink); background:var(--vellum);}
.header-actions{display:flex; align-items:center; gap:1.4rem;}
.phone-link{font-family:var(--body); font-weight:600; font-size:.94rem; text-decoration:none; color:var(--ink); white-space:nowrap;}
@media (max-width:940px){ nav.primary, .phone-link{display:none;} }

.menu-toggle{display:none; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; padding:0; border:1px solid var(--paper-line); border-radius:1px; background:transparent; cursor:pointer; flex-direction:column; gap:5px;}
.menu-toggle span{display:block; width:1.3rem; height:2px; background:var(--ink); border-radius:1px; transition:transform .2s ease, opacity .2s ease;}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (max-width:940px){ .menu-toggle{display:inline-flex;} }

.mobile-nav{display:none; position:fixed; inset:0; z-index:150; background:var(--cobalt-deep); color:var(--on-dark); padding:6.5rem 1.5rem 2.5rem; overflow-y:auto;}
.mobile-nav.open{display:block;}
.mobile-nav a{display:block; font-family:var(--body); font-size:1.2rem; font-weight:500; color:var(--on-dark); text-decoration:none; padding:.9em 0; border-bottom:1px solid rgba(255,255,255,.14);}
.mobile-nav a:hover, .mobile-nav a:focus-visible{color:#fff;}
.mobile-nav a.sub-link{padding:.7em 0 .7em 1.2rem; font-size:1.02rem; font-weight:400; color:var(--on-dark-soft); border-bottom:0;}
.mobile-nav a.sub-link:hover, .mobile-nav a.sub-link:focus-visible{color:#fff;}
.mobile-nav a.sub-link + a:not(.sub-link){border-top:1px solid rgba(255,255,255,.14); margin-top:.2em;}
.mobile-nav .phone-link{display:block; margin-top:1.6rem; font-size:1.1rem; color:#fff;}
.mobile-nav .btn{margin-top:1.6rem; width:100%; justify-content:center;}
.mobile-nav .close-toggle{position:absolute; top:1.15rem; right:1.4rem; border-color:rgba(255,255,255,.4);}
.mobile-nav .close-toggle span{background:#fff;}
@media (min-width:941px){ .mobile-nav{display:none !important;} }

.breadcrumb{padding:1.2rem 0; font-size:.9rem; color:var(--ink-faint); font-family:var(--body);}
.breadcrumb a{color:var(--ink-faint); text-decoration:none;}
.breadcrumb a:hover{color:var(--ink);}

section{padding:5.2rem 0;}
section.tint{background:linear-gradient(165deg, #E7F0F2 0%, var(--canvas) 52%, #CADCE2 100%);}
section.panel{background:linear-gradient(165deg, #FFFFFF 0%, var(--vellum) 52%, #E7EDED 100%);}
section.deep{background:linear-gradient(165deg, #1A4677 0%, var(--cobalt-deep) 55%, #0C2338 100%); color:var(--on-dark); position:relative; overflow:hidden;}
section.deep h1, section.deep h2, section.deep h3{color:#fff;}
section.deep .kicker .lede{color:var(--on-dark-soft);}
/* MIST — a genuine third paper tone, not just a darker canvas: the breather between near-white
   tint/panel sections and full Cobalt Deep, so a long run of light sections doesn't read as one field. */
section.mist{background:linear-gradient(165deg, #CDDFE7 0%, var(--mist) 52%, #A2C0CE 100%);}
section.mist .card-frame{border-color:var(--mist-line);}

.kicker{margin-bottom:2.4rem;}
.kicker .plate{display:block; margin-bottom:1em;}
.kicker h1, .kicker h2{font-size:clamp(1.95rem,3.3vw,2.6rem); line-height:1.3;}
.kicker .lede{margin-top:.7em; font-size:1.14rem; color:var(--ink-soft); line-height:1.6; font-family:var(--body); font-weight:400;}

/* STAT BAND + blueprint grid texture — the literal drafting-grid motif, reused wherever a stat band appears */
.grid-blueprint{position:relative; overflow:hidden;}
.grid-blueprint::before{content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:
  linear-gradient(rgba(220,232,242,.14) 1px, transparent 1px),
  linear-gradient(90deg, rgba(220,232,242,.14) 1px, transparent 1px);
  background-size:36px 36px;}
.grid-blueprint.on-light::before{background-image:
  linear-gradient(rgba(18,50,88,.16) 1px, transparent 1px),
  linear-gradient(90deg, rgba(18,50,88,.16) 1px, transparent 1px);}
.stat-band{background:var(--cobalt-deep); padding:2.1rem 0; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); position:relative;}
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:2.2rem;}
@media (max-width:700px){ .stat-row{grid-template-columns:1fr; gap:1.6rem;} }
.stat-cell{text-align:center; padding:0 1rem; position:relative;}
.stat-cell + .stat-cell::before{content:''; position:absolute; left:calc(-1.1rem - 1px); top:10%; bottom:10%; width:1px; background:linear-gradient(to bottom, transparent, rgba(255,255,255,.18) 30%, rgba(255,255,255,.18) 70%, transparent);}
@media (max-width:700px){ .stat-cell + .stat-cell::before{display:none;} }
.stat-cell .n{font-family:var(--display); font-size:2.15rem; font-weight:700; color:#fff; display:block; font-variant-numeric:tabular-nums;}
.stat-cell .tick{display:block; width:2.2rem; height:2px; background:var(--cobalt-light); margin:.55em auto 0; border-radius:1px;}
.stat-cell .l{margin-top:.6em; font-family:var(--body); font-weight:600; font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; color:var(--on-dark-soft);}

/* SITUATIONS-BAND PANEL — canvas band + floating white panel; the homepage's "There isn't one reason
   owners call us" device, reusable anywhere a page wants a card-grid to sit on its own elevated surface */
.situations-band{background:linear-gradient(160deg, #E7F0F2 0%, var(--canvas) 100%); padding:4.4rem 0;}
.situations-panel{background:var(--white); border-radius:10px; box-shadow:0 30px 60px -24px rgba(18,35,43,.35); padding:3.2rem 3rem;}
@media (max-width:640px){ .situations-panel{padding:2.2rem 1.5rem;} }
.rb-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;}
@media (max-width:800px){ .rb-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .rb-grid{grid-template-columns:1fr;} }
.rb-item{padding:1.9rem 2rem;}
.rb-item h3{font-size:1.18rem; line-height:1.3;}
.rb-item p{margin-top:.7em; font-size:.98rem; color:var(--ink-soft); line-height:1.55; font-family:var(--body); font-weight:400;}

/* SERVE SPLIT — "Who We Serve in {City}" on the regional pages. Replaced a 3-card .rb-grid where two
   equal-width cards sat beside a third card forced to span the full row alone (grid-column:1/-1) —
   a leftover shape with no reason for that one criterion to be wider than the other two. The revenue
   range is the one criterion that's actually a number, so it gets pulled out as its own stat panel
   (the site's existing big-number-plus-label language, e.g. .bio-stat/.region-stat) and anchors the
   section; the two narrative criteria read as a simple divided list beside it, not a third card
   competing for the same shape. */
.serve-split{display:grid; grid-template-columns:272px 1fr; gap:2.4rem; margin-top:2.2rem; align-items:stretch;}
@media (max-width:800px){ .serve-split{grid-template-columns:1fr;} }
.serve-stat{background:var(--cobalt-deep); color:#fff; padding:2.2rem 2rem; border-top:3px solid var(--redline); display:flex; flex-direction:column; justify-content:center;}
.serve-stat .n{display:block; font-family:var(--display); font-weight:700; font-size:2rem; line-height:1.15;}
.serve-stat .l{display:block; margin-top:.35em; font-family:var(--body); font-weight:700; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--plate-on-dark);}
.serve-stat p{margin-top:1.1em; font-size:.92rem; line-height:1.55; color:var(--on-dark-soft); font-family:var(--body); font-weight:400;}
.serve-list{display:flex; flex-direction:column; justify-content:center;}
.serve-list-item{padding:1.5rem 0; border-bottom:1px solid var(--paper-line);}
.serve-list-item:first-child{padding-top:0;}
.serve-list-item:last-child{border-bottom:0; padding-bottom:0;}
.serve-list-item h3{font-size:1.2rem; line-height:1.3;}
.serve-list-item p{margin-top:.5em; font-size:.98rem; color:var(--ink-soft); line-height:1.6; font-family:var(--body); font-weight:400;}

/* SPLIT VISUAL — duotone credential photography, shared wherever the banking/operating split appears */
.split-visual{padding:0;}
.split-visual .kicker{padding-top:3.4rem;}
@media (max-width:640px){ .split-visual .kicker{padding-top:2.4rem;} }
.split-visual-grid{display:grid; grid-template-columns:1fr 1fr;}
@media (max-width:800px){ .split-visual-grid{grid-template-columns:1fr;} }
.split-half{margin:0; position:relative; height:26rem; overflow:hidden; background:var(--ink);}
@media (max-width:800px){ .split-half{height:20rem;} }
.split-half img{width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.1) brightness(1.04);}
.split-half::before{content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(160deg, rgba(18,50,88,.88), rgba(193,89,47,.5)); mix-blend-mode:multiply;}
.split-half figcaption{position:absolute; z-index:2; left:0; right:0; bottom:0; padding:2.2rem 2.4rem 1.9rem; background:linear-gradient(to top, rgba(18,35,43,.9), rgba(18,35,43,.42) 55%, transparent);}
.split-half figcaption .plate{display:block; margin-bottom:.5em;}
.split-half figcaption p{margin:0; font-family:var(--display); font-size:1.35rem; font-weight:600; line-height:1.32; max-width:24ch; color:#fff;}

/* MEET BLACKLAND — the founder narrative */
.meet-copy p + p{margin-top:1.1em;}
.meet-copy p{color:var(--ink-soft); line-height:1.75; font-size:1.1rem; font-weight:400;}

/* MEET BLACKLAND — an editorial-letter treatment: a physical "note" card (dark eyebrow bar with a
   folded-corner tab, a drop shadow, a signature line) instead of a plain two-column split, with the
   banker/operator/owner identity as a marginal note beside the letter rather than a boxed plate. */
.meet-frame{position:relative; max-width:960px; margin:0 auto; background:var(--white); box-shadow:0 24px 48px rgba(18,50,88,.14), 0 2px 8px rgba(18,50,88,.06);}
.meet-bar{position:relative; background:var(--cobalt-deep); padding:.85rem 2.6rem;}
@media (max-width:640px){ .meet-bar{padding:.75rem 1.6rem;} }
.meet-bar span{font-family:var(--display); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,.92);}
.meet-bar::after{content:''; position:absolute; left:2.6rem; bottom:-6px; width:12px; height:12px; background:var(--cobalt-deep); transform:rotate(45deg);}
@media (max-width:640px){ .meet-bar::after{left:1.6rem;} }
.meet-body{display:grid; grid-template-columns:1fr 200px; gap:0 3rem; padding:2.8rem 2.6rem 2.4rem;}
@media (max-width:860px){ .meet-body{grid-template-columns:1fr; gap:2.2rem;} }
@media (max-width:640px){ .meet-body{padding:2.2rem 1.6rem 2rem;} }
.meet-body h2{font-size:clamp(1.7rem,3vw,2.1rem); color:var(--cobalt-deep); line-height:1.3;}
.meet-body .meet-copy{margin-top:1.3rem;}
.meet-sign{margin-top:1.6rem; padding-top:1.3rem; border-top:1px solid var(--paper-line); font-family:var(--display); font-weight:500; font-size:.98rem; color:var(--cobalt-deep);}
.meet-side{display:flex; flex-direction:column; gap:1.6rem;}
@media (max-width:860px){ .meet-side{flex-direction:row; flex-wrap:wrap; gap:1.6rem 2.4rem; padding-top:1.6rem; border-top:1px solid var(--paper-line);} }
.meet-side-item{padding-left:.9rem; border-left:2px solid var(--cobalt);}
@media (max-width:860px){ .meet-side-item{flex:1 1 220px;} }
.meet-side-label{display:block; font-family:var(--body); font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cobalt-deep);}
.meet-side-item p{margin-top:.4em; font-size:.88rem; color:var(--ink-soft); line-height:1.5; font-family:var(--body); font-weight:400;}

/* CRITERIA GRID — the 2x2 dark bordered-panel pattern (Buyer Fit on the homepage, Our Values on About) */
.criteria-grid{list-style:none; margin:2.8rem 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:1.4rem;}
@media (max-width:760px){ .criteria-grid{grid-template-columns:1fr;} }
.criteria-grid .criteria-item{border:1px solid rgba(255,255,255,.22); border-top:3px solid var(--plate-on-dark); border-bottom:1px solid rgba(255,255,255,.22); padding:1.9rem 2.1rem; background:rgba(255,255,255,.04);}
.criteria-grid .criteria-item h3{font-size:1.22rem; color:#fff; line-height:1.3;}
.criteria-grid .criteria-item p{margin-top:.6em; font-size:1.02rem; line-height:1.6; color:var(--on-dark-soft); font-family:var(--body); font-weight:400;}

/* COMPASS ARCS — the site's one recurring signature device. .compass-strong is the full-strength
   appearance (exactly one per page, at that page's own framework/authority section); .compass-echo is
   the quiet bookend (exactly one per page, at the Final CTA). Never used a third time on the same page. */
.compass-strong{position:relative; overflow:hidden;}
.compass-strong::before{content:''; position:absolute; z-index:0; top:-32%; right:-14%; width:62vw; height:62vw; max-width:840px; max-height:840px; pointer-events:none; background:
  radial-gradient(circle, transparent 38%, rgba(143,193,232,.15) 39%, rgba(143,193,232,.15) 40%, transparent 41%),
  radial-gradient(circle, transparent 52%, rgba(143,193,232,.11) 53%, rgba(143,193,232,.11) 54%, transparent 55%),
  radial-gradient(circle, transparent 66%, rgba(143,193,232,.07) 67%, rgba(143,193,232,.07) 68%, transparent 69%);}
.compass-echo{position:relative; overflow:hidden;}
.compass-echo::before{content:''; position:absolute; z-index:0; bottom:-42%; left:-8%; width:34vw; height:34vw; max-width:480px; max-height:480px; pointer-events:none; background:
  radial-gradient(circle, transparent 55%, rgba(143,193,232,.09) 56%, rgba(143,193,232,.09) 57%, transparent 58%);}

.quote{font-family:var(--display); font-weight:600; font-size:clamp(1.9rem,3.6vw,2.5rem); line-height:1.32; letter-spacing:-.01em;}
@media (min-width:1024px){ .quote{white-space:nowrap;} }
.quote b{font-weight:700; color:var(--redline);}
section.deep .quote b, section.ink .quote b{color:var(--redline-bright);}
.quote-support{margin-top:1.3em; max-width:58ch; color:var(--ink-soft); font-size:1.06rem; line-height:1.7; font-family:var(--body); font-weight:400;}
.quote-attr{margin-top:1.2em; font-family:var(--body); font-weight:600; color:var(--ink); font-size:.92rem; letter-spacing:.02em;}
section.deep .quote-support, section.deep .quote-attr{color:var(--on-dark-soft);}
section.deep .quote-attr{color:#fff;}

.final-cta{background:linear-gradient(165deg, #1A4677 0%, var(--cobalt-deep) 55%, #0C2338 100%); padding:4.6rem 0; position:relative; overflow:hidden;}
.final-cta-inner{display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;}
.final-cta h2{font-size:clamp(1.95rem,3.3vw,2.5rem); max-width:22ch; color:#fff; line-height:1.32;}
.final-cta p{margin-top:.7em; color:var(--on-dark); max-width:52ch; line-height:1.6; font-size:1.1rem; font-family:var(--body); font-weight:400;}

/* .on-light — a light-background variant of the final-cta block, used when it's repositioned as an
   interior section rather than the page's true closing CTA (e.g. the region pages, where it now sits
   before the FAQ instead of after it). Reuses .tint's gradient so it reads as the same family of
   light section as the rest of the page, not a one-off. compass-echo is deliberately dropped wherever
   this variant is used — those rings are tuned for a dark background and read as a nearly-invisible
   smudge here, and the device is reserved for the page's true final CTA per the compass-arc rule. */
.final-cta.on-light{background:linear-gradient(165deg, #E7F0F2 0%, var(--canvas) 52%, #CADCE2 100%);}
.final-cta.on-light h2{color:var(--ink);}
.final-cta.on-light p{color:var(--ink-soft);}

footer.site{background:var(--ink); color:var(--on-dark-soft); padding:4rem 0 2.4rem;}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.5rem;}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr; gap:2rem 2.5rem;} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr; gap:2rem;} }
footer.site .wordmark{color:#fff;}
footer.site .wordmark span{color:var(--redline-bright);}
footer.site .about{margin-top:1.1em; font-size:1rem; line-height:1.6; max-width:44ch; color:var(--on-dark-soft); font-family:var(--body); font-weight:400;}
footer.site .phone{margin-top:1.3em; display:block; font-family:var(--body); font-weight:600; color:#fff; text-decoration:none; font-size:1rem;}
footer.site h4{font-family:var(--body); font-size:.74rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#fff; margin-bottom:1.1em;}
footer.site ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.75em;}
footer.site a{text-decoration:none; font-size:1rem; color:var(--on-dark-soft);}
footer.site a:hover{color:#fff;}
.footer-bottom{margin-top:3.2rem; padding-top:1.8rem; border-top:1px solid #2A3B44; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8em; font-family:var(--body); font-size:.8rem; color:#7690A0;}

/* CONTACT FORM — the one real form on the site besides the readiness-assessment email gate */
.contact-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:3.5rem; align-items:start;}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr; gap:2.6rem;} }
.trust-item{padding-top:1.6rem; border-top:1px solid var(--paper-line);}
.trust-item:first-child{padding-top:0; border-top:0;}
.trust-item + .trust-item{margin-top:1.6rem;}
.trust-item h3{font-size:1.1rem; line-height:1.3;}
.trust-item p{margin-top:.5em; color:var(--ink-soft); line-height:1.6; font-size:1.04rem; font-family:var(--body); font-weight:400;}
.big-phone{margin-top:2.2rem; display:block; font-family:var(--display); font-weight:700; font-size:1.7rem; color:var(--cobalt-deep); text-decoration:none;}
.big-phone-label{display:block; font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-top:2.2rem; font-family:var(--body);}
form.card{background:var(--white); border:1px solid var(--paper-line); border-top:3px solid var(--cobalt-deep); padding:2.4rem;}
@media (max-width:520px){ form.card{padding:1.6rem;} }
.field{margin-bottom:1.3rem;}
.field label{display:block; font-size:.88rem; font-weight:600; color:var(--ink); margin-bottom:.45em; font-family:var(--body);}
.field input, .field textarea{width:100%; font-family:var(--body); font-size:1rem; padding:.8em .9em; border:1px solid var(--paper-line); border-radius:1px; background:var(--white); color:var(--ink);}
.field input:focus, .field textarea:focus{outline:2px solid var(--cobalt); outline-offset:1px; border-color:var(--cobalt);}
.field textarea{resize:vertical; min-height:7rem;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;}
@media (max-width:480px){ .field-row{grid-template-columns:1fr;} }
.form-note{margin-top:1.1rem; font-size:.86rem; color:var(--ink-faint); text-align:center; font-family:var(--body);}

/* FAQ accordion — shared wherever a page needs Q&A (Services, industry pages, ...).
   .faq-columns splits the list into two side-by-side .faq-list halves — moved here from being
   homepage-only local CSS (2026-09) so every FAQ section can use it instead of just the homepage's;
   a single full-width column of 8-12 questions was the one inconsistency between an otherwise
   identical component used on nine different pages. */
.faq-columns{display:grid; grid-template-columns:1fr 1fr; gap:0 3.2rem; margin-top:2.2rem;}
@media (max-width:760px){ .faq-columns{grid-template-columns:1fr;} }
.faq-columns .faq-list{margin-top:0;}
@media (max-width:760px){ .faq-columns .faq-list + .faq-list{border-top:none;} }
.faq-list{margin-top:2.2rem; border-top:1px solid var(--paper-line);}
.faq-item{border-bottom:1px solid var(--paper-line);}
.faq-item summary{list-style:none; cursor:pointer; padding:1.5rem 0; display:flex; align-items:center; justify-content:space-between; gap:1.2rem;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary h3{font-size:1.08rem; font-weight:600; transition:color .15s ease;}
.faq-item summary:hover h3{color:var(--cobalt-deep);}
.faq-icon{position:relative; width:26px; height:26px; flex:none; border:1.5px solid var(--paper-line); border-radius:50%; transition:border-color .15s ease;}
.faq-item summary:hover .faq-icon{border-color:var(--cobalt-deep);}
.faq-icon::before, .faq-icon::after{content:''; position:absolute; background:var(--cobalt-deep); border-radius:1px; transition:transform .2s ease;}
.faq-icon::before{left:7px; top:12px; width:12px; height:1.5px;}
.faq-icon::after{left:12px; top:7px; width:1.5px; height:12px;}
.faq-item[open] .faq-icon::after{transform:scaleY(0);}
.faq-item[open] summary h3{color:var(--cobalt-deep);}
.faq-body{padding:0 1.8rem 1.6rem 0;}
.faq-body p{color:var(--ink-soft); font-size:.98rem; line-height:1.6; font-family:var(--body); font-weight:400;}
.faq-body a{color:var(--cobalt-deep); font-weight:600; text-decoration:underline;}
/* Trailing "Read more →" style links at the end of an answer are short enough to always fit on one
   line, but sitting at the tail of a long paragraph in a ~530px .faq-columns column, they'd otherwise
   get cut mid-phrase by the paragraph's own line wrap (e.g. "...exit readiness" / "assessment →"),
   stranding a fragment. nowrap only above the 760px breakpoint where .faq-columns is actually two
   columns — below it FAQ reverts to one full-width column, wide enough that this doesn't happen. */
@media (min-width:761px){ .faq-body a{white-space:nowrap;} }
/* 2026-09-02: dark-section override. The FAQ accordion's default colors (--paper-line dividers,
   --cobalt-deep open-state heading, --cobalt-deep icon) are tuned for a light background. Services page
   worked around this with inline styles per item; every blog post's FAQ (on a .deep section) had no such
   override, so the open-state heading and the answer text were nearly invisible against the dark navy
   gradient the moment a reader actually clicked a question. */
section.deep .faq-list{border-top-color:rgba(255,255,255,.18);}
section.deep .faq-item{border-bottom-color:rgba(255,255,255,.18);}
section.deep .faq-item summary:hover h3, section.deep .faq-item[open] summary h3{color:#fff;}
section.deep .faq-icon{border-color:rgba(255,255,255,.35);}
section.deep .faq-item summary:hover .faq-icon{border-color:rgba(255,255,255,.6);}
section.deep .faq-icon::before, section.deep .faq-icon::after{background:#fff;}
section.deep .faq-body p{color:var(--on-dark-soft);}
section.deep .faq-body a{color:#fff; text-decoration-color:rgba(255,255,255,.4);}
section.deep .faq-body a:hover{text-decoration-color:#fff;}

/* SVC-DECISION — the homepage teaser: a dark "which path" sidebar (services index, no fabricated
   stats) beside the sell-side flagship + two secondary cards. Deliberately no negative-margin overlap
   between the sidebar and the cards — BC's call, real gap throughout instead. Homepage-only; the full
   Services page uses its own SVC-FEATURE treatment below. */
.svc-decision{display:flex; gap:1.8rem; align-items:stretch; margin-top:2.2rem; background:var(--white); border:1px solid var(--paper-line); border-radius:14px; padding:1.8rem;}
@media (max-width:900px){ .svc-decision{flex-direction:column; padding:1.4rem; gap:1.4rem;} }
.svc-decision-side{flex:0 0 280px; background:var(--cobalt-deep); border-radius:10px; padding:2.2rem 2rem; display:flex; flex-direction:column; color:var(--on-dark);}
.svc-decision-side h2{color:#fff; margin-top:.5em; font-size:1.6rem; line-height:1.3;}
.svc-decision-side p{margin-top:1em; font-size:.98rem; line-height:1.6; color:var(--on-dark-soft); font-family:var(--body); font-weight:400;}
.svc-idx{margin-top:2.2rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.15);}
@media (max-width:900px){ .svc-idx{margin-top:1.6rem;} }
.svc-idx-row{display:flex; align-items:center; gap:.65em; padding:.4em 0; font-family:var(--body); font-size:.86rem; color:#fff;}
.svc-idx-row::before{content:''; width:.4rem; height:.4rem; border-radius:50%; background:rgba(255,255,255,.35); flex:none;}
.svc-idx-row.is-flagship{color:#fff; font-weight:600;}
.svc-idx-row.is-flagship::before{background:#fff;}
.svc-decision-main{flex:1; display:flex; flex-direction:column; gap:1.2rem; min-width:0;}
.svc-flagship{background:var(--white); border:1px solid var(--paper-line); border-left:3px solid var(--cobalt-deep); border-radius:10px; padding:1.8rem 2rem; display:flex; flex-direction:column;}
.plate-fill{display:inline-block; background:var(--cobalt-deep); color:#fff; padding:.35em .85em; border-radius:3px; font-family:var(--body); font-weight:700; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; width:fit-content;}
.svc-flagship h3{font-size:1.55rem; margin-top:.6em; line-height:1.3;}
.svc-flagship p{margin-top:.7em; font-size:1rem; line-height:1.65; color:var(--ink-soft); font-family:var(--body); font-weight:400;}
.svc-secondary-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; flex:1;}
@media (max-width:640px){ .svc-secondary-grid{grid-template-columns:1fr;} }
.svc-panel{background:var(--white); border:1px solid var(--paper-line); border-radius:10px; padding:1.6rem 1.7rem; display:flex; flex-direction:column;}
.svc-panel h3{font-size:1.2rem; margin-top:.5em; line-height:1.3;}
.svc-panel p{margin-top:.6em; font-size:.94rem; line-height:1.55; color:var(--ink-soft); font-family:var(--body); font-weight:400;}
.svc-best{margin-top:auto; padding-top:1.1rem; border-top:1px dashed var(--paper-line); font-family:var(--body); font-size:.86rem; color:var(--ink-faint);}
.svc-best b{color:var(--ink); font-weight:600;}
/* A second .svc-best stacked directly under the first (e.g. Best For + Timeline on a narrow
   secondary card) shouldn't repeat the dashed rule or the auto top-margin — only the group as a
   whole gets pushed to the card's bottom and gets one divider. */
.svc-panel .svc-best + .svc-best{margin-top:.5em; padding-top:0; border-top:0;}
.svc-more{margin-top:1.8rem; text-align:right;}
@media (max-width:900px){ .svc-more{text-align:left;} }

/* SVC-FEATURE — the Services page's expanded per-service treatment: alternating full-width image+text
   rows with real photography, giving each service room to actually explain how we approach that kind
   of work (vs. the compact 3-card .svc-grid used as a teaser on the homepage). */
.svc-feature-list{display:flex; flex-direction:column; margin-top:2.8rem;}
.svc-feature{display:grid; grid-template-columns:1fr 1fr; gap:3.4rem; align-items:start; padding:3.4rem 0; border-top:1px solid var(--paper-line);}
.svc-feature-title{margin-bottom:1.8rem;}
.svc-feature:first-child{border-top:0; padding-top:0;}
.svc-feature:last-child{padding-bottom:0;}
@media (max-width:860px){ .svc-feature{grid-template-columns:1fr; gap:1.7rem;} }
.svc-feature.reverse .svc-feature-media{order:2;}
.svc-feature.reverse .svc-feature-copy{order:1;}
@media (max-width:860px){ .svc-feature.reverse .svc-feature-media, .svc-feature.reverse .svc-feature-copy{order:0;} }
.svc-feature-media{position:relative; aspect-ratio:6/5; overflow:hidden; border-radius:16px; background:var(--canvas); box-shadow:0 0 40px 6px rgba(29,78,137,.3), 0 0 85px 18px rgba(29,78,137,.14);}
.svc-feature-media img{width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(.35) contrast(1.05);}

/* REGION STATS — real firm-level stats stacked under an intro photo (originally distribution-only,
   promoted here since manufacturing/transportation-logistics now reuse it too). */
.region-media-col{display:flex; flex-direction:column; gap:1.4rem;}
.region-stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;}
@media (max-width:640px){ .region-stat-row{grid-template-columns:1fr;} }
.region-stat{text-align:center;}
.region-stat .n{display:block; font-family:var(--display); font-weight:700; font-size:1.3rem; color:var(--cobalt-deep); font-variant-numeric:tabular-nums;}
.region-stat .l{display:block; margin-top:.3em; font-family:var(--body); font-weight:600; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);}

/* WHY-SPLIT — closing "Why Blackland" panel, dark/light split with a bulleted tagline column
   instead of a plain paragraph block (originally distribution-only, promoted for reuse). */
.why-split{display:flex; border-radius:4px; overflow:hidden; border:1px solid var(--paper-line);}
@media (max-width:860px){ .why-split{flex-direction:column;} }
.why-split-dark{flex:0 0 34%; background:var(--cobalt-deep); color:var(--on-dark); padding:2.4rem 2.2rem; display:flex; flex-direction:column;}
.why-split-dark h2{color:#fff; margin-top:.6em; font-size:1.5rem; line-height:1.15;}
.why-points{margin-top:1.6rem; padding:0; list-style:none; display:flex; flex-direction:column; gap:.9rem;}
.why-points li{padding-left:1em; position:relative; font-family:var(--body); font-size:.88rem; line-height:1.5; color:var(--on-dark-soft);}
.why-points li::before{content:'\2022'; position:absolute; left:0; color:var(--cobalt-light);}
.why-split-copy{flex:1; padding:2.4rem 2.6rem; background:var(--white);}
@media (max-width:860px){ .why-split-copy{padding:2rem 1.7rem;} }
/* The copy panel is always its own white card even when .why-split sits inside a dark section
   wrapper, so it needs plain ink text here rather than the pale on-dark-soft color that
   section.deep .meet-copy p applies to every other dark-section paragraph. */
section.deep .meet-copy.why-split-copy p{color:var(--ink-soft);}
section.deep .meet-copy.why-split-copy a{color:var(--cobalt-deep); text-decoration-color:rgba(18,50,88,.35);}
section.deep .meet-copy.why-split-copy a:hover{text-decoration-color:var(--cobalt-deep);}
.svc-feature-copy h3{font-size:1.9rem; margin-top:.4em; line-height:1.3;}
.svc-feature-copy p{margin-top:1em; font-size:1.06rem; line-height:1.7; color:var(--ink-soft); font-family:var(--body); font-weight:400;}
.svc-feature-copy .svc-best{margin-top:1.4rem; padding-top:1.1rem; border-top:1px dashed var(--paper-line); font-family:var(--body); font-size:.9rem; color:var(--ink-faint);}
.svc-feature-copy .svc-best b{color:var(--ink); font-weight:600;}

/* SVC-SUBNAV — sticky in-page jump links on the Services page, sits directly under the sticky
   site header (header.site is 84px tall in practice: 1.15rem top+bottom padding plus the CTA
   button's rendered height). */
.svc-subnav{position:sticky; top:84px; z-index:90; background:rgba(242,245,245,.97); backdrop-filter:blur(6px); border-bottom:1px solid var(--paper-line);}
.svc-subnav .container{display:flex; gap:2rem; padding:.85rem 0; overflow-x:auto;}
.svc-subnav a{font-family:var(--body); font-weight:600; font-size:.85rem; color:var(--ink-soft); text-decoration:none; white-space:nowrap; padding-bottom:.2rem; border-bottom:2px solid transparent; transition:color .15s ease, border-color .15s ease;}
.svc-subnav a:hover{color:var(--ink); border-color:var(--cobalt-deep);}

/* SVC-ROW — a single full-width labeled row per item (used on the regional pages' "How We Work in
   {City}" dark section) */
.svc-row{border-top:1px solid var(--paper-line); padding:2.4rem 0; display:grid; grid-template-columns:220px 1fr; gap:2.2rem;}
.svc-row:last-child{border-bottom:1px solid var(--paper-line);}
@media (max-width:760px){ .svc-row{grid-template-columns:1fr; gap:.7rem;} .svc-row h3, .svc-row p{grid-column:1;} }
/* Explicit grid-column (not just source order) because some .svc-row blocks hold two <p> — without
   this, the second paragraph auto-wraps into the 220px label column instead of stacking under the
   first paragraph in the content column. Fixed 2026-09-22 after it shipped broken on the regional pages. */
.svc-row h3{grid-column:1; font-size:1.4rem; line-height:1.3;}
.svc-row p{grid-column:2; color:var(--ink-soft); line-height:1.7; font-size:1.08rem; font-family:var(--body); font-weight:400;}
/* 2026-09-01: .svc-row reused on the regional pages' dark "How We Work in {City}" section — its default
   text color (--ink-soft, tuned for light backgrounds) measured unreadable against that gradient. */
section.deep .svc-row{border-top-color:rgba(255,255,255,.18);}
section.deep .svc-row:last-child{border-bottom-color:rgba(255,255,255,.18);}
section.deep .svc-row h3{color:#fff;}
section.deep .svc-row p{color:var(--on-dark-soft);}

/* BIO PAGE (Chapman Syme) */
.role{display:block; margin-top:.4em; font-size:1.05rem; font-weight:600; color:var(--plate-on-dark); font-family:var(--body);}
.bio p{color:var(--ink-soft); line-height:1.8; font-size:1.12rem; font-family:var(--body); font-weight:400;}
.bio p + p{margin-top:1.2em;}
.bio p a{color:var(--cobalt-deep); text-decoration:underline; text-decoration-color:rgba(18,50,88,.35); text-underline-offset:2px;}
.bio p a:hover{text-decoration-color:var(--cobalt-deep);}

/* SITUATION LIST — a single-column row list for "which of these describes you" content (Family Business) */
.situation-list{border-top:1px solid var(--paper-line);}
.situation{padding:2.1rem 0; border-bottom:1px solid var(--paper-line); display:grid; grid-template-columns:1fr 1.4fr; gap:2.4rem;}
@media (max-width:800px){ .situation{grid-template-columns:1fr; gap:.7rem;} }
.situation h3{font-size:1.3rem; line-height:1.35;}
.situation p{color:var(--ink-soft); line-height:1.7; font-size:1.08rem; font-family:var(--body); font-weight:400;}
section.deep .situation-list{border-top-color:rgba(255,255,255,.18);}
section.deep .situation{border-bottom-color:rgba(255,255,255,.18);}
section.deep .situation h3{color:#fff;}
section.deep .situation p{color:var(--on-dark-soft);}
section.deep .meet-copy p{color:var(--on-dark-soft);}
section.deep .meet-copy a{color:#fff; text-decoration-color:rgba(255,255,255,.4);}
section.deep .meet-copy a:hover{text-decoration-color:#fff;}

/* HELP GRID — three simple bordered cards on a dark section, quieter than criteria-grid's 2x2 framework
   treatment (no top-accent rule) since this is a supporting recap, not the page's own signature framework */
.help-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;}
@media (max-width:800px){ .help-grid{grid-template-columns:1fr;} }
.help-card{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.18); padding:1.9rem;}
.help-card h3{font-size:1.2rem; color:#fff; line-height:1.3;}
.help-card p{margin-top:.6em; font-size:1.03rem; color:var(--on-dark-soft); line-height:1.6; font-family:var(--body); font-weight:400;}

/* IND-CARD — the industries grid (hub page + homepage), a card-frame link with a "go" arrow */
.ind-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;}
@media (max-width:800px){ .ind-grid{grid-template-columns:1fr;} }
.ind-card{padding:2.1rem; text-decoration:none; color:var(--ink); display:flex; flex-direction:column;}
.ind-card .plate{display:block; margin-bottom:.8em;}
.ind-card h3{font-size:1.55rem; line-height:1.3;}
.ind-card p{margin-top:.7em; font-size:1.02rem; color:var(--ink-soft); line-height:1.6; font-family:var(--body); font-weight:400;}
.ind-card .go{margin-top:auto; padding-top:1.3em; font-family:var(--body); font-weight:600; font-size:.86rem; color:var(--cobalt-deep);}

/* MARKET GRID — the "Where We Work, by market" city cards on each industry page. Always exactly 4
   cities, so a fixed 2x2 (not .ind-grid's responsive repeat(3,1fr), which leaves an orphaned 4th
   card alone in its own row). */
.market-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem;}
@media (max-width:640px){ .market-grid{grid-template-columns:1fr;} }

/* SITUATION CARD — self-recognition card (a short quoted "I think/want..." line + one-line context
   + a "go" link), originally homepage-only for Owner Situations, now shared since Services reuses
   it for its own "Where are you today?" pathway cards. Grid wrapper stays page-local since each
   page needs a different column count. Flex column so "go" pins to the card's bottom edge instead
   of trailing right after a short paragraph — matters once cards in the same row have uneven copy
   length and the grid stretches them to equal height. */
.situation-card{padding:1.9rem 2rem; text-decoration:none; color:var(--ink); display:flex; flex-direction:column;}
.situation-card h3{font-size:1.18rem; line-height:1.35;}
.situation-card p{margin-top:.7em; font-size:.98rem; color:var(--ink-soft); line-height:1.55; font-family:var(--body); font-weight:400;}
.situation-card .go{margin-top:auto; padding-top:1.1em; font-family:var(--body); font-weight:600; font-size:.84rem; color:var(--cobalt-deep);}

/* RESOURCE POST CARDS — article teasers reused wherever a page recaps a few blog posts */
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;}
@media (max-width:860px){ .post-grid{grid-template-columns:1fr;} }
.post-card{padding:1.8rem 1.9rem; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; height:100%;}
.post-card .tag{font-family:var(--body); font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--cobalt-deep);}
.post-card h3{margin-top:.7em; font-size:1.18rem; line-height:1.32;}
.post-card p{margin-top:.6em; color:var(--ink-soft); font-size:.96rem; line-height:1.55; font-family:var(--body); font-weight:400; flex:1;}
.post-card .meta{margin-top:1.2em; font-family:var(--body); font-size:.84rem; color:var(--ink-faint);}

/* BLOG POST — article header meta line, two-column layout, long-form prose, and the recurring
   in-article devices (callout, pull-quote, table of contents, author card). Shared by every real
   post under /post/<slug>/, one source of truth instead of the old system's per-post <style> block. */
.article-meta{margin-top:1.3em; display:flex; gap:1.2em; flex-wrap:wrap; align-items:center; font-family:var(--body); font-size:.92rem; color:var(--on-dark-soft);}
.article-meta b{color:#fff; font-weight:600;}
.article-layout{display:grid; grid-template-columns:1fr 280px; gap:3.5rem; align-items:start;}
@media (max-width:900px){ .article-layout{grid-template-columns:1fr;} }
.article-body{max-width:70ch;}
.article-body > p{color:var(--ink-soft); font-size:1.08rem; line-height:1.75; margin-top:1.4em; font-family:var(--body); font-weight:400;}
.article-body > p:first-child{margin-top:0;}
.article-body h2{font-size:1.5rem; margin-top:2.4em; padding-top:.2em; line-height:1.3;}
.article-body h3{font-size:1.18rem; margin-top:1.8em; color:var(--cobalt-deep); line-height:1.3;}
.article-body a{color:var(--cobalt-deep); text-decoration:underline; text-decoration-color:rgba(18,50,88,.35); text-underline-offset:2px;}
.article-body a:hover{text-decoration-color:var(--cobalt-deep);}
/* Inline contextual links reused wherever industry-page prose (.meet-copy, .situation) links out to a
   related blog post — same treatment as article-body links, just not scoped to the blog template. */
.meet-copy a, .situation p a{color:var(--cobalt-deep); text-decoration:underline; text-decoration-color:rgba(18,50,88,.35); text-underline-offset:2px;}
.meet-copy a:hover, .situation p a:hover{text-decoration-color:var(--cobalt-deep);}
section.deep .situation p a{color:#fff; text-decoration-color:rgba(255,255,255,.4);}
section.deep .situation p a:hover{text-decoration-color:#fff;}
.kicker .lede a{color:var(--cobalt-deep); text-decoration:underline; text-decoration-color:rgba(18,50,88,.35); text-underline-offset:2px;}
.kicker .lede a:hover{text-decoration-color:var(--cobalt-deep);}
section.deep .kicker .lede a{color:#fff; text-decoration-color:rgba(255,255,255,.4);}
section.deep .kicker .lede a:hover{text-decoration-color:#fff;}
.article-body ol, .article-body ul{color:var(--ink-soft); font-size:1.08rem; line-height:1.75; margin-top:1.4em; padding-left:1.4em; font-family:var(--body); font-weight:400;}
.article-body li + li{margin-top:.6em;}
.article-body li b{color:var(--ink); font-weight:600;}
.pull-quote{margin:2.2em 0; padding:1.6rem 2rem; border-top:3px solid var(--cobalt-deep); background:var(--white); border:1px solid var(--paper-line); border-top-width:3px; border-top-color:var(--cobalt-deep);}
.pull-quote p{font-family:var(--display); font-size:1.28rem; font-weight:600; line-height:1.45; color:var(--ink); margin:0;}
.callout{margin:2.2em 0; padding:1.5rem 1.8rem; background:var(--canvas); border-top:2px solid var(--cobalt);}
.callout p{font-size:1rem; color:var(--ink-soft); margin:0; line-height:1.6; font-family:var(--body);}
.callout b{color:var(--ink); font-weight:600;}
.toc{border:1px solid var(--paper-line); background:var(--white); padding:1.6rem 1.7rem; position:sticky; top:5.5rem;}
.toc-label{font-family:var(--body); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--cobalt-deep); display:block; margin-bottom:1em;}
.toc ol{list-style:none; margin:0; padding:0;}
.toc li{padding:.5em 0; border-top:1px solid var(--paper-line); font-size:.92rem;}
.toc li:first-child{border-top:0; padding-top:0;}
.toc a{text-decoration:none; color:var(--ink-soft); line-height:1.4; display:block; font-family:var(--body);}
.toc a:hover{color:var(--cobalt-deep);}
.toc-cta{margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--paper-line);}
.toc-cta p{font-size:.9rem; color:var(--ink-faint); margin-bottom:.9em; line-height:1.4; font-family:var(--body);}
/* 2026-09-02: .toc a{color:var(--ink-soft)} above has higher specificity (class+element) than
   .btn-solid{color:#FDF3EE} (single class), so the sidebar CTA button's text was silently reverting to
   the sidebar's default dark link color instead of the intended off-white. */
.toc .btn{width:100%; justify-content:center; padding:.75em 1em; font-size:.92rem; color:#FDF3EE;}
.toc .btn:hover{color:#FDF3EE;}
@media (max-width:900px){ .toc{position:static; margin-bottom:0;} }
.author-card{margin-top:3rem; padding:1.8rem; border:1px solid var(--paper-line); border-top:3px solid var(--cobalt-deep); background:var(--white); display:flex; gap:1.4rem; align-items:flex-start; max-width:70ch;}
.author-avatar{flex:none; width:3.2rem; height:3.2rem; border-radius:50%; background:linear-gradient(160deg, var(--cobalt), var(--cobalt-deep)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:1.1rem;}
.author-card p{font-size:.96rem; color:var(--ink-soft); line-height:1.55; font-family:var(--body); font-weight:400;}
.author-card b{color:var(--ink); font-weight:600;}
.author-card a{color:var(--cobalt-deep); text-decoration:none; font-weight:600;}

/* Post-index row list — the /blog listing page's post-per-row layout */
.post-index{border-top:1.5px solid var(--ink); margin-top:2.2rem;}
.post-index-row{display:grid; grid-template-columns:9rem 1fr 8rem; gap:1.6rem; padding:1.5rem 0; border-bottom:1px solid var(--paper-line); align-items:baseline; text-decoration:none; color:var(--ink);}
.post-index-row[hidden]{display:none;}
.post-index-row:hover .post-index-title{color:var(--cobalt-deep);}
.post-index-cat{font-family:var(--body); font-size:.74rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--cobalt-deep);}
.post-index-title{font-family:var(--display); font-weight:600; font-size:1.18rem; line-height:1.35; transition:color .15s ease;}
.post-index-excerpt{margin-top:.4em; font-size:.96rem; color:var(--ink-soft); line-height:1.5; font-family:var(--body); font-weight:400; max-width:64ch;}
.post-index-date{font-family:var(--body); font-size:.86rem; color:var(--ink-faint); text-align:right; white-space:nowrap;}
@media (max-width:760px){
  .post-index-row{grid-template-columns:1fr; gap:.4rem; padding:1.3rem 0;}
  .post-index-date{text-align:left;}
}
.filter-row{display:flex; gap:.6rem; flex-wrap:wrap;}
.filter-chip{appearance:none; -webkit-appearance:none; cursor:pointer; font-family:var(--body); font-size:.82rem; font-weight:600; padding:.5em 1em; border:1px solid var(--paper-line); color:var(--ink-soft); background:var(--white); border-radius:1px; transition:border-color .15s ease, color .15s ease, background .15s ease;}
.filter-chip:hover{border-color:var(--cobalt);}
.filter-chip:focus-visible{outline:2px solid var(--cobalt); outline-offset:2px;}
.filter-chip.is-active{border-color:var(--cobalt-deep); color:var(--cobalt-deep); background:var(--vellum);}
.filter-empty{margin-top:2.2rem; color:var(--ink-faint); font-family:var(--body); font-size:1rem;}

/* HERO CONTACT — a hero's practical details (address/phone/email), used on the regional landing
   pages. Replaced the earlier boxed .hero-facts card stack (2026-09) — three stacked bordered rows
   read as a form/widget dropped into the hero, not part of its typography. Plain bold-label-inline
   lines instead, same device the site already uses for kicker/lede copy in this same hero. */
.hero-contact{margin-top:1.7em; display:flex; flex-direction:column; gap:.5em;}
.hero-contact p{font-family:var(--body); font-size:1.02rem; color:var(--on-dark); line-height:1.5;}
.hero-contact .hc-label{font-weight:700; color:#fff; margin-right:.3em;}
.hero-contact a{color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.35); text-decoration-thickness:1px; transition:text-decoration-color .15s ease;}
.hero-contact a:hover{text-decoration-color:#fff;}

/* REGION HERO PHOTO — each city hero gets its own skyline photograph behind it, same navy-scrim
   treatment as the homepage's .hero (photo dialed down to texture, not a bright stock-photo moment).
   The photo itself is set per page via the --hero-photo custom property (one inline style attribute
   on the hero section) so this mechanic lives once here instead of copy-pasted across 4 pages.
   `section.deep.region-hero-photo` (two classes) is required to outrank plain `section.deep`'s own
   `background` shorthand — see the specificity note below for why a single class alone would lose. */
section.deep.region-hero-photo{
  background-image: linear-gradient(180deg, rgba(18,50,88,.9), rgba(12,33,56,.88)), var(--hero-photo);
  background-size: cover;
  background-position: center 38%;
}
.region-hero-credit{position:absolute; z-index:1; right:2rem; bottom:1rem; font-family:var(--body); font-size:.68rem; color:rgba(255,255,255,.45);}
.region-hero-credit a{color:rgba(255,255,255,.6); text-decoration:underline; text-decoration-color:rgba(255,255,255,.3);}
.region-hero-credit a:hover{color:#fff;}
@media (max-width:640px){ .region-hero-credit{right:1.25rem; left:1.25rem; text-align:right;} }

/* REGIONAL LANDING PAGES — Atlanta/Charlotte/Jacksonville/Nashville market pages (and the blog index hero,
   which reuses the h1/kicker pair) share this exact hero, mid-CTA, and "who we serve" structure; these
   classes replace what were one-off inline styles duplicated identically across all 4 pages.
   NOTE: doubled up as .kicker.region-hero-kicker etc. on purpose — .kicker/.kicker h1/.kicker .lede are
   class+element or two-class selectors, which silently outrank a single new class no matter where in the
   file it's declared. Matching that specificity (or exceeding it) is what actually makes the override work,
   not source order. */
.kicker.region-hero-kicker{margin-bottom:0; max-width:52rem;}
.kicker.hero-kicker-flush{margin-bottom:0;}
.kicker.kicker-tight{margin-bottom:1.4rem;}
.kicker .region-hero-h1{font-size:clamp(2.2rem,4.2vw,3.1rem); color:#fff; margin-top:.4em; line-height:1.1;}
.kicker .region-hero-h1.industries-hero-h1{line-height:1.0;}
.kicker .lede.region-hero-lede{font-size:1.2rem; max-width:60ch;}
.region-hero-cta{margin-top:1.8em;}
.rb-item-full{grid-column:1/-1;}
/* REGION-MID-CTA — its own standalone dark banner section between Overview and Sectors, not an
   inline divider inside another section anymore, so it lays out its own flex row. */
.region-mid-cta{display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;}
.region-mid-cta h2{font-size:clamp(1.4rem,2.6vw,1.9rem); max-width:32ch; line-height:1.3;}

/* CONTACT PAGE hero — its own slightly smaller clamp/width than the regional pages', so it gets its own
   classes rather than reusing .region-hero-* (which would change its size). */
.kicker.contact-hero-kicker{margin-bottom:0; max-width:52rem;}
.kicker .contact-hero-h1{font-size:clamp(2.1rem,4vw,2.9rem); color:#fff; margin-top:.4em;}
.kicker .lede.contact-hero-lede{font-size:1.2rem; max-width:48ch;}
.form-privacy{margin-top:.8rem; font-size:.86rem; color:var(--ink-faint); text-align:center; font-family:var(--body);}
.form-privacy a{color:var(--cobalt-deep); text-decoration:underline;}
.kicker .lede.family-hero-lede{font-size:1.2rem; max-width:56ch;}
.help-card .plate{color:var(--plate-on-dark); display:block; margin-bottom:.6em;}
.faq-cta{text-align:center; margin-top:2.6rem;}
.kicker.kicker-split{display:flex; align-items:flex-end; justify-content:space-between; max-width:none; gap:1.5rem; flex-wrap:wrap;}
.kicker-split h2{margin-top:.4em;}
.hp-field{position:absolute; left:-9999px;}
.region-stat-source{margin-top:1rem; text-align:center; font-family:var(--body); font-size:.78rem; color:var(--on-dark-soft);}

/* THANK-YOU CARD — the small noindex confirmation pages after a form submit */
.thanks-wrap{max-width:36rem; margin:0 auto;}
.thanks-card{padding:3rem; text-align:center;}
@media (max-width:560px){ .thanks-card{padding:2rem 1.5rem;} }
.thanks-card .plate{display:block; margin-bottom:1em;}
.thanks-card h1{font-size:clamp(1.8rem,4vw,2.4rem);}
.thanks-card p{margin-top:1rem; color:var(--ink-soft); font-size:1.1rem; line-height:1.6; font-family:var(--body); font-weight:400;}
.thanks-card p a{color:var(--cobalt-deep); text-decoration:underline;}
.thanks-actions{margin-top:2rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;}
.thanks-return{display:block; margin-top:1.4rem; font-family:var(--body); font-size:.92rem; color:var(--ink-faint); text-decoration:underline;}
.thanks-return:hover{color:var(--cobalt-deep);}

/* LEGAL BODY — plain long-form text for Terms of Use / Privacy Policy */
.legal-body{max-width:72ch; font-family:var(--body); color:var(--ink-soft); font-size:1.02rem; line-height:1.75;}
.legal-body h2{font-size:1.4rem; margin-top:2rem; color:var(--ink); font-family:var(--display); font-weight:600; line-height:1.3;}
.legal-body h2:first-child{margin-top:0;}
.legal-body h3{font-size:1.05rem; margin-top:1.4em; color:var(--ink); font-family:var(--display); font-weight:600; line-height:1.3;}
.legal-body p{margin-top:1em;}
.legal-body p:first-child{margin-top:0;}
.legal-body ul{margin-top:1em; padding-left:1.4em;}
.legal-body li{margin-top:.5em;}

/* REFRAME TABLE — "buyer says / we show" two-column rows, first used on the distribution industry
   page to reformat the existing 7-valuation-factors list with more edge. Real content only: the
   buyer line is a generic objection, the "we show" line restates what's already in the page's own
   prose above, never a new claim. Currently distribution-only; not yet wired into the other two
   industry pages. */
.reframe-table{border:1px solid var(--paper-line); border-radius:4px; overflow:hidden; margin-top:2.4rem;}
.reframe-row{display:grid; grid-template-columns:220px 1fr 1fr; border-bottom:1px solid var(--paper-line); background:var(--white);}
.reframe-table .reframe-row:last-child{border-bottom:none;}
.reframe-row:nth-child(even){background:#F9FBFD;}
@media (max-width:860px){ .reframe-row{grid-template-columns:1fr;} }
.reframe-title{background:var(--cobalt-deep); color:#fff; padding:1.4rem 1.6rem; display:flex; align-items:center; gap:.8em;}
.reframe-num{font-family:var(--display); font-weight:700; font-size:.82rem; letter-spacing:.1em; color:rgba(255,255,255,.55); flex:none;}
.reframe-title h3{font-family:var(--display); font-weight:700; font-size:.98rem; color:#fff; line-height:1.25; margin:0;}
.reframe-buyer, .reframe-we{padding:1.4rem 1.6rem; display:flex; flex-direction:column; justify-content:center;}
.reframe-buyer{border-right:1px solid var(--paper-line);}
@media (max-width:860px){ .reframe-buyer{border-right:none; border-bottom:1px solid var(--paper-line);} }
.reframe-label{font-family:var(--body); font-weight:700; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.4em;}
.reframe-buyer .reframe-label{color:var(--ink-faint);}
.reframe-we .reframe-label{color:var(--cobalt);}
.reframe-buyer p{margin:0; font-size:.9rem; color:var(--ink-soft); line-height:1.5; font-family:var(--body); font-weight:400;}
.reframe-we p{margin:0; font-size:.92rem; color:var(--cobalt-deep); font-weight:600; line-height:1.5; font-family:var(--body);}

/* SECTOR GROUPS — the same industry-card content as .rb-grid, organized into labeled categories
   instead of one flat grid. Distribution-only for now; .rb-grid stays as-is for the other pages. */
.sector-groups{display:grid; grid-template-columns:repeat(3,1fr); gap:2.2rem; margin-top:2.2rem;}
@media (max-width:800px){ .sector-groups{grid-template-columns:1fr; gap:1.8rem;} }
.sector-group-label{display:inline-block; font-family:var(--body); font-weight:700; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--ink); padding:.4em .9em; border-radius:2px; margin-bottom:1.3rem;}
.sector-group-list{border-top:1px solid var(--paper-line);}
.sector-group-item{padding:1.1rem 0 1.1rem .9rem; border-bottom:1px solid var(--paper-line); border-left:2px solid var(--cobalt); transition:border-left-width .2s;}
.sector-group-item:hover{border-left-width:5px;}
.sector-group-item h3{font-size:1rem; font-weight:600; color:var(--ink); margin:0; line-height:1.3;}
.sector-group-item p{margin-top:.4em; font-size:.88rem; color:var(--ink-soft); line-height:1.5; font-family:var(--body); font-weight:400;}

/* MULTIPLE PILLS — dashed = judgment/soft factor that compresses a multiple, solid = the factor
   that expands it. Same solid-vs-dashed language as the homepage's valuation bridge. */
.multiple-pills{margin-top:2rem; display:grid; grid-template-columns:1fr 1fr; gap:2rem;}
@media (max-width:760px){ .multiple-pills{grid-template-columns:1fr;} }
.pill-group-label{display:block; font-family:var(--body); font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.9rem;}
.pill-group-label.compress{color:var(--ink-faint);}
.pill-group-label.expand{color:var(--cobalt-deep);}
.pill-row{display:flex; flex-wrap:wrap; gap:.55rem;}
.pill{display:inline-block; padding:.45em 1em; border-radius:999px; font-family:var(--body); font-weight:600; font-size:.82rem;}
.pill-dashed{border:1.5px dashed var(--mist-line); background:var(--vellum); color:var(--ink-soft);}
.pill-solid{background:var(--cobalt-deep); color:#fff;}