/*
 * American Executive Security — v2 stylesheet
 * Editorial obsidian (warm-neutral, no green cast) · 24k brass · brushed titanium · warm-white
 * Designed specifically for the 50-page class taxonomy. Mobile-first. Motion-safe.
 * NO green anywhere. NO cream/beige as surfaces. NO templated defaults.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   1. Tokens
   ───────────────────────────────────────────────────────────────────────────── */
:root{
  /* Obsidian ladder — warm-neutral near-blacks. No blue-green cast. */
  --obsidian:#0B0B0C;
  --obsidian-2:#141416;
  --obsidian-3:#1C1C1F;
  --obsidian-warm:#0E0C09;

  /* 24k brass — assertive, not champagne. */
  --brass:#C8A24B;
  --brass-light:#E0BF6A;
  --brass-deep:#8F6E2E;
  --brass-shadow:#4A3818;

  /* Brushed titanium — the neutrals. */
  --titanium:#2C2C2E;
  --titanium-2:#48484A;
  --titanium-3:#8E8E93;
  --titanium-4:#B8B6AC;

  /* Warm-white for on-dark surfaces only. */
  --warm-white:#F7F5F1;
  --paper:#FFFFFF;

  /* Legacy aliases (referenced by inline scripts). */
  --ink:var(--obsidian);
  --ink-soft:var(--obsidian-2);
  --ink-panel:var(--obsidian-3);
  --gold:var(--brass);
  --gold-light:var(--brass-light);
  --bronze:var(--brass-deep);
  --muted:var(--titanium-3);
  --on-dark:var(--warm-white);

  /* Type. */
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --display: 'Space Grotesk', 'Playfair Display', Georgia, serif;
  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;

  /* Rhythm. */
  --gutter:32px;
  --wrap-max:1240px;
  --radius:2px;

  /* Warm-tinted shadows. Alpha reduced ~30% for restrained feel. */
  --shadow-warm-sm: 0 1px 2px rgba(28,18,4,.07);
  --shadow-warm-md: 0 6px 20px rgba(28,18,4,.10);
  --shadow-warm-lg: 0 20px 44px rgba(28,18,4,.15);
  --shadow-warm-xl: 0 32px 64px rgba(28,18,4,.20);
  --shadow-brass-glow: 0 0 0 1px rgba(200,162,75,.35), 0 16px 40px rgba(74,56,24,.30);

  /* Light surface tokens — warm-white and cream for section rhythm. */
  /* Cool paper — replaces warm/cream. No beige. */
  --surface-warm: #FFFFFF;                 /* pure paper white */
  --surface-cream: #F4F6F8;                /* cool pewter / slate paper */
  --surface-warm-ink: #0A0B0D;             /* near-true-black text */
  --surface-warm-line: rgba(10,11,13,.08); /* thinnest hairline */
  --surface-warm-line-2: rgba(10,11,13,.18);
  --surface-warm-mute: rgba(10,11,13,.62); /* body copy on light */

  /* Brass gradients. */
  --brass-linear: linear-gradient(135deg, var(--brass-light) 0%, var(--brass) 50%, var(--brass-deep) 100%);
  --brass-engraved: linear-gradient(180deg, #E0BF6A 0%, #D9B15A 20%, #C8A24B 45%, #A88839 78%, #6B4E1C 100%);
  --brass-sheen: linear-gradient(90deg, transparent, var(--brass) 50%, transparent);
  --brass-vertical: linear-gradient(180deg, transparent, var(--brass) 50%, transparent);
}

html{color-scheme: light; scroll-behavior:smooth; scroll-padding-top:120px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. Reset + baseline typography
   ───────────────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box; margin:0}
body{
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  color:var(--warm-white);
  background:var(--obsidian);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block; height:auto}
picture{display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--display); letter-spacing:-0.015em; line-height:1.15; color:var(--warm-white)}
h1{font-size:clamp(36px, 3.5vw + 18px, 64px); font-weight:500; letter-spacing:-0.02em; line-height:1.15}
h2{font-size:clamp(26px, 2.2vw + 12px, 44px); font-weight:500; letter-spacing:-0.015em; line-height:1.18}
h3{font-size:clamp(19px, 0.8vw + 14px, 24px); font-weight:600}
h4{font-size:20px; font-weight:600}
p{color:inherit}
::selection{background:var(--brass); color:var(--obsidian)}
:focus-visible{outline:2px solid var(--brass-light); outline-offset:3px; border-radius:2px}

/* Skip link */
.skip{position:absolute; top:-100px; left:16px; background:var(--brass); color:var(--obsidian); padding:10px 18px; font-weight:600; z-index:9999}
.skip:focus{top:16px}

/* SR-only */
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ─────────────────────────────────────────────────────────────────────────────
   3. Layout — .wrap, .eyebrow, generic tokens
   ───────────────────────────────────────────────────────────────────────────── */
.wrap{width:100%; max-width:var(--wrap-max); margin:0 auto; padding:0 var(--gutter)}

.eyebrow{
  display:inline-block;
  font-family:var(--sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:16px;
}

.arrow{display:inline-block; transition:transform .3s cubic-bezier(.2,.65,.3,.9)}
a:hover .arrow, button:hover .arrow{transform:translateX(4px)}

.text-link{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--brass); font-weight:500;
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:border-color .25s, color .25s;
}
.text-link:hover{color:var(--brass-light); border-color:var(--brass-light)}

.button{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px;
  background:var(--brass);
  color:var(--obsidian);
  font-weight:600; font-size:14px; letter-spacing:0.02em;
  border:1px solid var(--brass);
  border-radius:2px;
  transition:background .25s, box-shadow .3s, transform .2s;
  box-shadow: var(--shadow-warm-md);
}
.button:hover{background:var(--brass-light); box-shadow: var(--shadow-warm-md); transform:translateY(-1px)}
.hero-body .button:hover{box-shadow: var(--shadow-brass-glow)}
.button:focus-visible{outline:2px solid var(--brass-light); outline-offset:3px}
.button--light, .button.button--light{
  background:transparent; color:var(--brass); border:1px solid rgba(200,162,75,.5);
  box-shadow:none;
}
.button--light:hover{background:rgba(200,162,75,.08); color:var(--brass-light); border-color:var(--brass-light)}

/* Section + split heading */
.section{padding-block: clamp(60px, 8vw, 120px); background:var(--obsidian)}
.section.dark, .section--dark, .locations-section{background:var(--obsidian-2)}
.section-heading, .split-heading{
  display:grid; grid-template-columns: 1.2fr 1fr; gap:60px; align-items:end;
  margin-bottom: 60px;
}
.split-heading > div:first-child h2{max-width: 20ch}
.split-heading p.intro-copy{color:var(--titanium-4); font-size:16px; line-height:1.7; max-width:48ch; margin-bottom:16px}

@media (max-width:900px){
  .section-heading, .split-heading{grid-template-columns:1fr; gap:24px; margin-bottom:44px}
}

/* Hairline brass rule utility */
.rule-brass{height:1px; background: var(--brass-sheen); border:0; margin: 40px 0}

/* ─────────────────────────────────────────────────────────────────────────────
   4. Header + brand + nav
   ───────────────────────────────────────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:80;
  background: rgba(11,11,12,.86);
  border-bottom: 1px solid rgba(200,162,75,.14);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  color:var(--warm-white);
}
.site-header .nav-row{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:78px;
}

.brand{display:inline-flex; align-items:center; gap:14px}
.brand .monogram{
  font-family:var(--display); font-weight:700;
  font-size:36px; letter-spacing:-0.06em; line-height:1;
  color:var(--warm-white);
}
.brand .monogram .gold{color:var(--brass); background:var(--brass-linear); -webkit-background-clip:text; background-clip:text; color:transparent}
.brand-name{
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase;
  line-height:1.4; color:var(--warm-white);
  padding-left:16px; border-left:1px solid rgba(200,162,75,.28);
}
.brand-name small{
  display:block;
  font-size:9px; font-weight:500;
  letter-spacing:0.16em;
  color:var(--titanium-3);
  margin-top:4px;
  text-transform:uppercase;
}

.desktop-nav{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500}
.desktop-nav .nav-item{position:relative}
.desktop-nav a, .desktop-nav button{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 14px;
  color:var(--warm-white);
  transition:color .2s;
  border-radius:2px;
}
.desktop-nav a:hover, .desktop-nav button:hover, .desktop-nav a[aria-current]{color:var(--brass-light)}
.desktop-nav button[aria-expanded=true]{color:var(--brass-light)}

.header-actions{display:flex; align-items:center; gap:12px}
.icon-button{
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(200,162,75,.24);
  border-radius:2px;
  color:var(--warm-white);
  transition: border-color .2s, color .2s, background .2s;
}
.icon-button:hover{border-color:var(--brass); color:var(--brass-light); background:rgba(200,162,75,.06)}
.search-icon{width:16px; height:16px; border:1.5px solid currentColor; border-radius:50%; position:relative}
.search-icon::after{content:''; position:absolute; right:-5px; bottom:-5px; width:7px; height:1.5px; background:currentColor; transform:rotate(45deg); transform-origin:left top}
.menu-toggle{display:none}
.menu-bars{width:18px; height:12px; position:relative}
.menu-bars::before, .menu-bars::after, .menu-bars{background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat}
.menu-bars{background-size:100% 2px, 100% 2px, 100% 2px; background-position: 0 0, 0 50%, 0 100%; background-image: linear-gradient(currentColor,currentColor), linear-gradient(currentColor,currentColor), linear-gradient(currentColor,currentColor)}

.header-consult{padding:12px 22px; font-size:13px}

/* Mega menu */
.mega{
  position:absolute; top:calc(100% + 6px); left:0;
  min-width: 640px;
  background: var(--obsidian-2);
  border: 1px solid rgba(200,162,75,.22);
  box-shadow: var(--shadow-warm-xl);
  padding: 32px; z-index: 90;
  border-radius:3px;
}
.mega[hidden]{display:none}
.mega-inner{display:grid; grid-template-columns: 1fr 1.4fr; gap:40px; padding:0; max-width:none}
.mega-intro .eyebrow{color:var(--brass)}
.mega-intro h2{font-size:22px; margin:8px 0 12px; letter-spacing:-0.01em}
.mega-intro p{color:var(--titanium-4); font-size:14px; margin-bottom:16px}
.mega-links{display:grid; grid-template-columns: 1fr 1fr; gap:6px 24px}
.mega-links a{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 12px; border-radius:2px;
  color:var(--warm-white); font-size:13.5px; font-weight:500;
  transition: background .2s, color .2s;
}
.mega-links a:hover{color:var(--brass-light); background:rgba(200,162,75,.06)}
.mega-links a > span{color:var(--brass); opacity:.7; transition:transform .25s, opacity .25s}
.mega-links a:hover > span{opacity:1; transform:translate(2px,-2px)}

/* Mobile nav */
.mobile-nav{
  position:fixed;
  top:78px; left:0; right:0; bottom:0;
  height: calc(100dvh - 78px);
  min-height: 320px;
  background: var(--obsidian-2);
  padding: 24px var(--gutter);
  overflow-y:auto;
  border-top:1px solid rgba(200,162,75,.14);
  z-index:70;
  display:block;
}
.mobile-nav[hidden]{display:none !important}
.mobile-nav > a, .mobile-nav > details > summary{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 0;
  border-bottom:1px solid rgba(200,162,75,.10);
  color:var(--warm-white); font-weight:500;
  cursor:pointer;
}
.mobile-nav details summary::after{content:'⌄'; color:var(--brass); font-size:16px; transition:transform .25s}
.mobile-nav details[open] summary::after{transform:rotate(180deg)}
.mobile-nav .mobile-sub{padding: 6px 0 14px 12px; display:flex; flex-direction:column; gap:2px}
.mobile-nav .mobile-sub a{padding:8px 0; color:var(--titanium-4); font-size:14px}
.mobile-nav .mobile-sub a:hover{color:var(--brass-light)}
.mobile-nav .button{margin-top:24px; width:100%; justify-content:center}

/* ─────────────────────────────────────────────────────────────────────────────
   5. Hero (home + inner)
   ───────────────────────────────────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; background: var(--obsidian); color:var(--warm-white); isolation:isolate}
.hero .hero-media{position:absolute; inset:0; margin:0}
.hero .hero-media img{width:100%; height:100%; object-fit:cover; object-position:center 40%}
.hero::before{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,11,12,.45) 0%, rgba(11,11,12,.72) 55%, rgba(11,11,12,.94) 100%),
              radial-gradient(ellipse at 20% 40%, rgba(200,162,75,.18), transparent 55%);
  z-index:1;
}
.hero-home, .approved-hero{min-height: clamp(560px, 78vh, 780px); display:flex; align-items:center}
.hero-body{position:relative; z-index:2; padding-block: clamp(80px, 10vw, 140px)}
.hero-body .eyebrow{color:var(--brass-light); margin-bottom:22px}
.hero-body h1{
  max-width: 16ch; margin-bottom: 24px;
  color: var(--warm-white);
  font-weight:500;
}
.hero-deck{
  max-width:56ch; font-size:clamp(17px, 1vw + 10px, 22px);
  color:var(--titanium-4); line-height:1.55; margin-bottom:38px;
  font-weight:400;
}
.hero-body .button{font-size:14px; padding:16px 30px}
.hero-meta{
  margin-top: 44px;
  display:flex; align-items:center; gap:24px;
  font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--titanium-3);
}
.hero-meta a{color:var(--brass); font-family:var(--display); letter-spacing:0.06em; font-size:15px; text-transform:none}
.hero-annotation{
  position:absolute; right: max(var(--gutter), 5vw); bottom: 40px; z-index:3;
  display:flex; align-items:center; gap:16px;
  color:var(--titanium-4); font-family:var(--serif); font-style:italic; font-size:14px; line-height:1.4;
  max-width:220px;
}
.hero-annotation span{width:40px; height:1px; background:var(--brass)}
.hero-annotation p{color:var(--warm-white)}

/* Inner hero (about/services/industries/service pages) */
.hero-inner, .signature-inner{
  position:relative;
  min-height:clamp(400px, 50vh, 520px);
  display:flex; align-items:center;
  padding-block: clamp(80px, 9vw, 120px);
  background: linear-gradient(180deg, var(--obsidian) 0%, var(--obsidian-2) 100%);
  isolation:isolate; overflow:hidden;
}
.hero-inner::before, .signature-inner::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(11,11,12,.55) 0%, rgba(11,11,12,.82) 100%),
    radial-gradient(ellipse at 15% 30%, rgba(200,162,75,.15), transparent 60%);
  pointer-events:none;
}
.hero-inner > .photo, .signature-inner > .photo{
  position:absolute; inset:0; margin:0; z-index:0;
}
.hero-inner > .photo img, .signature-inner > .photo img{
  width:100%; height:100%; object-fit:cover;
  filter: brightness(.55) saturate(1.02);
}
.hero-inner .wrap, .signature-inner .wrap{position:relative; z-index:2}
.hero-inner h1, .signature-inner h1{
  max-width:24ch;
  color: var(--warm-white);
}
.hero-inner .hero-deck, .signature-inner .hero-deck{
  max-width:56ch; margin-top:24px;
  color: var(--warm-white);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Crumbs */
.crumbs{display:flex; gap:6px; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--titanium-3); margin-bottom:24px}
.crumbs a{color:var(--brass)}
.crumbs a:hover{color:var(--brass-light)}
.crumbs > *:not(:last-child)::after{content:'/'; margin-left:8px; color:var(--titanium-3); opacity:.6}

/* ─────────────────────────────────────────────────────────────────────────────
   6. Signature blocks (home)
   ───────────────────────────────────────────────────────────────────────────── */
.signature-services{padding-block: clamp(70px, 9vw, 110px); background:var(--obsidian)}
.signature-grid{display:grid; grid-template-columns: repeat(5, 1fr); gap: 24px}
.signature-grid > a{
  display:block; padding: 36px 26px 28px;
  border:1px solid rgba(200,162,75,.16); border-radius:2px;
  background: linear-gradient(180deg, rgba(20,20,22,0), rgba(20,20,22,.55));
  color:var(--warm-white);
  transition: border-color .3s, transform .3s, box-shadow .3s, background .3s;
}
.signature-grid > a:hover{
  border-color: var(--brass);
  background: linear-gradient(180deg, rgba(200,162,75,.04), rgba(20,20,22,.7));
  box-shadow: var(--shadow-warm-lg);
  transform: translateY(-2px);
}
.signature-grid .line-icon{width:36px; height:36px; color:var(--brass); margin-bottom:22px}
.signature-grid h2{font-size:20px; line-height:1.15; margin-bottom:12px; letter-spacing:-0.01em}
.signature-grid p{font-size:13.5px; color:var(--titanium-4); line-height:1.55; margin-bottom:20px}
.signature-grid .rail-link{color:var(--brass); font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase}

@media (max-width:1100px){.signature-grid{grid-template-columns: repeat(3, 1fr)}}
@media (max-width:720px){.signature-grid{grid-template-columns: 1fr}}

/* About split */
.signature-about{padding-block: clamp(80px, 10vw, 130px); background: var(--obsidian-2); display:grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items:center; padding-inline: var(--gutter); max-width:var(--wrap-max); margin: 0 auto}
.signature-story{position:relative; aspect-ratio:498/332; border-radius:2px; overflow:hidden}
.signature-story .photo, .signature-story figure{width:100%; height:100%; margin:0}
.signature-story img{width:100%; height:100%; object-fit:cover}
.story-overlay{
  position:absolute; inset:auto 0 0 0; padding:28px 32px 28px;
  background: linear-gradient(180deg, rgba(11,11,12,0) 0%, rgba(11,11,12,.55) 45%, rgba(11,11,12,.94) 100%);
  color:#ffffff;
  display:flex; justify-content:space-between; align-items:end; gap:20px;
}
.signature-story .story-overlay p{font-family:var(--display); font-size:22px; line-height:1.15; letter-spacing:-0.01em; color:#ffffff; text-shadow: 0 2px 4px rgba(0,0,0,.6); margin:0; border-left: 2px solid var(--brass); padding-left: 14px}
.signature-story .story-overlay a{color:var(--brass-light); display:inline-flex; gap:8px; align-items:center; font-size:11px; text-transform:uppercase; letter-spacing:0.18em; font-weight:600; text-decoration:none; white-space: nowrap; padding: 8px 12px; background: rgba(11,11,12,.6); border: 1px solid rgba(200,162,75,.45); border-radius: 2px}
.story-overlay a:hover{background: rgba(200,162,75,.15); border-color: var(--brass)}
.story-arrow{font-size:16px; color:var(--brass-light)}

.signature-about-copy .eyebrow{color:var(--brass)}
.signature-about-copy h2{margin-bottom:20px; max-width:14ch}
.signature-about-copy p{color:var(--titanium-4); font-size:17px; margin-bottom:24px}
.signature-checklist{list-style:none; padding:0; display:grid; gap:14px; margin: 24px 0 32px}
.signature-checklist li{display:flex; gap:14px; align-items:center; color:var(--warm-white); font-size:15px}
.round-check{
  width:28px; height:28px; flex-shrink:0;
  border:1px solid var(--brass);
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--brass);
}
.round-check .line-icon{width:14px; height:14px}
.about-signoff{
  display:block; margin-top:32px;
  font-family:var(--serif); font-style:italic;
  font-size:15px; color:var(--titanium-3); line-height:1.5;
  padding-top:24px;
  border-top:1px solid rgba(200,162,75,.18);
}

@media (max-width:960px){.signature-about{grid-template-columns:1fr; gap:44px}}

/* Principles row (four-word rhythm) */
.signature-principles{background:var(--obsidian); padding-block: 60px; border-block: 1px solid rgba(200,162,75,.14)}
.signature-principles .wrap{display:grid; grid-template-columns: repeat(4, 1fr); gap:36px}
.signature-principles > .wrap > div{display:flex; flex-direction:column; gap:4px}
.signature-principles strong{font-family:var(--display); font-size:28px; font-weight:500; color:var(--warm-white); letter-spacing:-0.01em}
.signature-principles span{font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--brass)}
@media (max-width:820px){.signature-principles .wrap{grid-template-columns: repeat(2, 1fr); gap:32px}}

/* Environments */
.signature-environments{padding-block: clamp(60px, 7vw, 90px); background: var(--obsidian-2)}
.signature-environments .eyebrow{color:var(--brass); margin-bottom:32px}
.signature-environments > .wrap > div{display:grid; grid-template-columns: repeat(6, 1fr); gap:22px}
.signature-environments a{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:24px 16px;
  border:1px solid rgba(200,162,75,.14); border-radius:2px;
  color:var(--warm-white);
  transition: border-color .25s, transform .2s, background .25s;
}
.signature-environments a:hover{border-color:var(--brass); background:rgba(200,162,75,.06); transform:translateY(-2px)}
.signature-environments .line-icon{width:34px; height:34px; color:var(--brass)}
.signature-environments span{font-size:13px; letter-spacing:0.05em; text-align:center}
@media (max-width:900px){.signature-environments > .wrap > div{grid-template-columns: repeat(3, 1fr)}}
@media (max-width:520px){.signature-environments > .wrap > div{grid-template-columns: repeat(2, 1fr)}}

/* Sector section — industries preview grid */
.sector-section{padding-block: clamp(80px, 10vw, 130px); background:var(--obsidian)}
.signature-sector-grid{display:grid; grid-template-columns: repeat(5, 1fr); gap:20px}
@media (max-width:1180px){.signature-sector-grid{grid-template-columns: repeat(3, 1fr)}}
@media (max-width:720px){.signature-sector-grid{grid-template-columns: repeat(2, 1fr)}}
@media (max-width:420px){.signature-sector-grid{grid-template-columns: 1fr}}

.sector-card{
  background:var(--obsidian-2); border:1px solid rgba(200,162,75,.14);
  border-radius:2px; overflow:hidden;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.sector-card:hover{border-color: rgba(200,162,75,.30); transform:translateY(-3px); box-shadow: var(--shadow-warm-lg)}
.sector-card > a{display:block; color:var(--warm-white)}
.sector-card .photo, .sector-card figure{margin:0; aspect-ratio: 4/3; overflow:hidden; background:var(--obsidian-3)}
.sector-card img{width:100%; height:100%; object-fit:cover}
.sector-card-copy{padding:24px 22px 26px}
.sector-card-copy .line-icon{width:28px; height:28px; color:var(--brass); margin-bottom:14px}
.sector-card-copy h3{font-size:18px; line-height:1.2; margin-bottom:8px}
.sector-card-copy p{font-size:13.5px; color:var(--titanium-4); margin-bottom:16px; line-height:1.55}
.card-cta{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--brass); font-size:12px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
}
.card-cta > span{transition: transform .25s}
.sector-card:hover .card-cta > span{transform: translateX(4px)}

/* Locations section */
.locations-section{padding-block: clamp(80px, 10vw, 130px); background: var(--obsidian-warm)}
.location-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; margin-bottom: 44px}
.location-card{
  display:block; padding: 40px 32px;
  border:1px solid rgba(200,162,75,.16); border-radius:2px;
  background: linear-gradient(180deg, rgba(200,162,75,0.04), transparent);
  color:var(--warm-white);
  transition: border-color .3s, background .3s, transform .3s;
}
.location-card:hover{border-color:var(--brass); background: linear-gradient(180deg, rgba(200,162,75,0.10), transparent); transform:translateY(-2px)}
.location-card .eyebrow{color:var(--brass); margin-bottom:14px; font-size:10px; letter-spacing:0.22em}
.location-card h3{font-size:28px; margin-bottom:14px}
.location-card p{color:var(--titanium-4); font-size:15px; margin-bottom:22px}
.region-footnote{display:flex; gap:32px; flex-wrap:wrap; padding-top:20px; border-top:1px solid rgba(200,162,75,.14)}
@media (max-width:960px){.location-grid{grid-template-columns:1fr}}

/* Insights */
.insights-section{padding-block: clamp(80px, 10vw, 130px); background: var(--obsidian)}
.insight-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:24px}
.insight-link{
  display:block; padding:32px 28px;
  border:1px solid rgba(200,162,75,.14); border-radius:2px;
  background:var(--obsidian-2);
  color:var(--warm-white);
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.insight-link:hover{border-color:var(--brass); transform:translateY(-2px); box-shadow: var(--shadow-warm-lg)}
.insight-link .eyebrow{color:var(--brass); margin-bottom:14px; font-size:10px}
.insight-link h3{font-size:22px; line-height:1.25; margin-bottom:14px}
.insight-link p{color:var(--titanium-4); font-size:14px; margin-bottom:20px}
@media (max-width:900px){.insight-grid{grid-template-columns:1fr}}

/* FAQ */
.home-faq{background: var(--obsidian-2); padding-block: clamp(60px, 8vw, 100px)}
.faq-layout{display:grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items:start}
.faq-layout > div:first-child .eyebrow{color:var(--brass); margin-bottom:14px}
.faq-layout h2{margin-bottom:20px}
.faqs details{
  border-top: 1px solid rgba(200,162,75,.16);
  padding: 22px 0;
}
.faqs details:last-child{border-bottom: 1px solid rgba(200,162,75,.16)}
.faqs summary{
  cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-family:var(--display); font-size:18px; font-weight:500; color:var(--warm-white);
  padding-right:12px;
}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{
  content:'+'; color:var(--brass); font-size:22px; font-weight:400;
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--brass); border-radius:50%;
  transition: transform .3s, background .3s;
  flex-shrink:0;
}
.faqs details[open] summary::after{content:'−'; background:var(--brass); color:var(--obsidian)}
.faqs details > div{padding-top:14px; color:var(--titanium-4); font-size:15px; line-height:1.7}

@media (max-width:900px){.faq-layout{grid-template-columns:1fr; gap:32px}}

/* CTA band */
.cta-band, .approved-cta{
  position:relative; overflow:hidden;
  padding-block: clamp(80px, 10vw, 130px);
  background: var(--obsidian-warm);
  color:var(--warm-white);
  text-align:center;
}
.cta-band > .photo, .approved-cta > .photo{
  position:absolute; inset:0; margin:0; z-index:0;
}
.cta-band > .photo img, .approved-cta > .photo img{
  width:100%; height:100%; object-fit:cover;
  filter: brightness(.38) saturate(1.05);
}
.cta-band::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(11,11,12,.55), rgba(11,11,12,.86)),
    radial-gradient(ellipse at 50% 50%, rgba(200,162,75,.10), transparent 70%);
  pointer-events:none;
}
.cta-band .wrap{position:relative; z-index:2}
.cta-band .eyebrow{color:var(--brass-light); margin-bottom:16px}
.cta-band h2, .approved-cta h2{
  max-width:14ch; margin: 0 auto 20px;
  color: var(--warm-white);
}
.cta-band p{color:var(--titanium-4); font-size:17px; max-width:44ch; margin: 0 auto 32px}

/* ─────────────────────────────────────────────────────────────────────────────
   7. Inner-page cards (about, services, industries directory)
   ───────────────────────────────────────────────────────────────────────────── */
.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:24px}
.card{
  padding:36px 30px;
  border:1px solid rgba(200,162,75,.16);
  background: var(--obsidian-2);
  color:var(--warm-white);
  border-radius:2px;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.card:hover{border-color:var(--brass); transform:translateY(-3px); box-shadow: var(--shadow-warm-lg)}
.card .card-kicker{
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--brass); margin-bottom:14px;
}
.card h3{font-size:22px; line-height:1.2; margin-bottom:14px}
.card-copy p{color:var(--titanium-4); font-size:14.5px; margin-bottom:18px; line-height:1.65}
.card-arrow{color:var(--brass); font-size:18px}
@media (max-width:960px){.cards{grid-template-columns:1fr}}

.article-section{padding-block: clamp(60px, 8vw, 100px); background:var(--obsidian)}
.article-copy{max-width: 72ch; color:var(--titanium-4); font-size:17px}
.article-copy h2, .article-copy h3{color:var(--warm-white); margin: 32px 0 14px}
.article-copy p{margin-bottom:20px; line-height:1.75}
.article-copy a{color:var(--brass); border-bottom:1px solid rgba(200,162,75,.36)}
.article-copy a:hover{color:var(--brass-light); border-color: var(--brass-light)}
.article-copy ul, .article-copy ol{margin: 0 0 24px 24px; color:var(--titanium-4)}

.inner-signoff{
  display:block; margin-top:60px; padding-top:24px;
  border-top:1px solid rgba(200,162,75,.20);
  font-family:var(--serif); font-style:italic; color:var(--titanium-3); line-height:1.5;
}

.editorial-image{margin:32px 0; border-radius:2px; overflow:hidden}
.editorial-image img{width:100%; height:auto; display:block}

.button-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:24px}

/* Directory listing (industries.html) */
.directory-hero{background: var(--obsidian-2); padding-block: clamp(60px, 8vw, 100px)}
.directory-hero .eyebrow{color:var(--brass); margin-bottom:14px}
.directory-hero h1{max-width: 20ch}
.filter-bar{display:flex; gap:16px; align-items:center; margin: 32px 0 40px; padding:14px; border:1px solid rgba(200,162,75,.20); background: var(--obsidian-2); border-radius:2px}
.filter-input{
  flex:1; background:transparent; border:0; color:var(--warm-white); padding:6px 10px;
  font-size:15px;
}
.filter-count{color:var(--titanium-3); font-size:12px; letter-spacing:0.14em; text-transform:uppercase}

.directory-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:24px}
.directory-card{
  padding:32px 28px;
  background: var(--obsidian-2);
  border:1px solid rgba(200,162,75,.16); border-radius:2px;
  color:var(--warm-white);
  transition: border-color .3s, transform .25s, box-shadow .3s;
}
.directory-card:hover{border-color:var(--brass); transform:translateY(-2px); box-shadow: var(--shadow-warm-lg)}
.directory-card h3{font-size:20px; line-height:1.2; margin-bottom:14px}
.directory-card p{color:var(--titanium-4); font-size:14px; margin-bottom:18px}
.hub-note{color:var(--titanium-3); font-size:13px; margin-top:32px; padding-top:20px; border-top:1px solid rgba(200,162,75,.14)}
@media (max-width:960px){.directory-grid{grid-template-columns:1fr}}

/* Contact page */
.contact-hero{background: var(--obsidian-2); padding-block: clamp(60px, 8vw, 100px)}
.contact-info{padding: 40px 0}
.contact-info h2{font-size:32px; margin-bottom:24px}
.contact-detail{padding: 20px 0; border-top:1px solid rgba(200,162,75,.16)}
.contact-detail:last-child{border-bottom:1px solid rgba(200,162,75,.16)}
.contact-detail .card-kicker{font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--brass); margin-bottom:8px}
.contact-detail a{color:var(--brass)}

/* Notice bar */
.notice-bar{padding: 20px 0; background:var(--obsidian-2); border-block: 1px solid rgba(200,162,75,.14)}
.notice-bar .wrap{display:flex; gap:16px; justify-content:space-between; align-items:center; font-size:13px; color:var(--titanium-3)}

/* Detail hero (single service/industry pages) */
.detail-hero{background: linear-gradient(180deg, var(--obsidian), var(--obsidian-2)); padding-block: clamp(60px, 8vw, 110px)}
.detail-hero .eyebrow{color:var(--brass); margin-bottom:14px}
.detail-hero h1{max-width:22ch; color: var(--warm-white)}
.detail-hero-copy{max-width:52ch}
.detail-hero-copy p{color:var(--titanium-4); font-size:18px; margin: 20px 0 32px; line-height:1.6}
.detail-hero--photo{position:relative; overflow:hidden}
.detail-hero--photo .photo{position:absolute; inset:0; z-index:0}
.detail-hero--photo .photo img{width:100%; height:100%; object-fit:cover; opacity:.5}
.detail-hero--photo::before{content:''; position:absolute; inset:0; background: linear-gradient(90deg, var(--obsidian) 40%, transparent), linear-gradient(180deg, transparent, var(--obsidian) 90%); z-index:1}
.detail-hero--photo .wrap{position:relative; z-index:2}
.detail-hero-art{margin-top:20px}

/* Closing / band */
.closing{background: var(--obsidian-warm); padding-block: clamp(80px, 10vw, 130px); position:relative; overflow:hidden; isolation:isolate}

/* Location band */
.location-band{padding-block: clamp(60px, 8vw, 100px); background:var(--obsidian-2)}

/* Statement band */
.statement-band{padding-block: clamp(80px, 10vw, 140px); background:var(--obsidian); text-align:center}
.statement-band p{font-family:var(--display); font-size: clamp(28px, 3vw + 14px, 48px); line-height:1.2; max-width:22ch; margin: 0 auto; color:var(--warm-white); letter-spacing:-0.02em}

/* Split story block */
.split-story{padding-block: clamp(80px, 10vw, 130px); background: var(--obsidian-2)}
.split-story > .wrap{display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center}
@media (max-width:960px){.split-story > .wrap{grid-template-columns:1fr}}

/* ─────────────────────────────────────────────────────────────────────────────
   8. Footer
   ───────────────────────────────────────────────────────────────────────────── */
.site-footer{
  background: var(--obsidian-warm);
  color: var(--titanium-4);
  padding-block: 72px 32px;
  border-top: 1px solid rgba(200,162,75,.16);
}
.footer-grid{display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 48px; margin-bottom: 48px}
.footer-brand p{color: var(--titanium-3); font-size:14px; max-width: 32ch; margin: 20px 0}
.footer-brand .brand{margin-bottom:16px}
.footer-grid h2{
  font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--brass); margin-bottom:20px;
}
.footer-grid ul{list-style:none; padding:0; display:grid; gap:10px}
.footer-grid a{color:var(--warm-white); font-size:14px; transition:color .2s}
.footer-grid a:hover{color:var(--brass-light)}
.footer-grid address{font-style:normal; font-size:14px; line-height:1.7; color:var(--warm-white); margin-bottom:14px}
.footer-grid address a{color:var(--brass)}
.footer-bottom{
  border-top: 1px solid rgba(200,162,75,.14);
  padding-top: 24px;
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  font-size:12px; color:var(--titanium-3);
}
.footer-bottom nav{display:flex; gap:20px; flex-wrap:wrap}
.footer-bottom a:hover{color:var(--brass-light)}
.footer-note{
  margin-top: 20px;
  padding: 16px; background: var(--obsidian-2);
  font-size:11.5px; color: var(--titanium-3); line-height:1.6;
  border: 1px solid rgba(200,162,75,.10); border-radius:2px;
}
.footer-note a{color:var(--brass); border-bottom:1px solid rgba(200,162,75,.36)}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr; gap:36px}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* ─────────────────────────────────────────────────────────────────────────────
   9. Search dialog
   ───────────────────────────────────────────────────────────────────────────── */
.dialog{
  border: 0; padding: 0;
  background: var(--obsidian-2); color: var(--warm-white);
  border-radius:2px;
  box-shadow: var(--shadow-warm-xl);
  max-width: 560px; width: 90%;
}
.dialog::backdrop{background: rgba(11,11,12,.85); backdrop-filter: blur(8px)}
.dialog-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:24px 28px; border-bottom:1px solid rgba(200,162,75,.14);
}
.dialog-head h2{font-size:20px; margin:0}
.dialog-close{
  width:36px; height:36px; border:1px solid rgba(200,162,75,.24);
  border-radius:2px; font-size:20px;
  color:var(--warm-white);
}
.dialog-close:hover{border-color:var(--brass); color:var(--brass-light)}
.search-field{
  width: calc(100% - 56px);
  margin: 20px 28px;
  background: transparent; border: 0;
  border-bottom: 1px solid rgba(200,162,75,.24);
  padding: 12px 0;
  color: var(--warm-white); font-size: 18px;
}
.search-field:focus{border-color:var(--brass); outline:none}
.search-field::placeholder{color: var(--titanium-3)}
.search-status{padding: 0 28px 12px; color:var(--titanium-3); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase}
.search-results{padding: 0 20px 24px; max-height: 50vh; overflow-y:auto}
.search-results a{display:block; padding: 14px 16px; border-radius: 2px; color:var(--warm-white); transition: background .2s}
.search-results a:hover{background: rgba(200,162,75,.08); color:var(--brass-light)}

/* ─────────────────────────────────────────────────────────────────────────────
   10. Photo utility — default is INLINE FLOW; heros/cta-band explicitly absolute.
   ───────────────────────────────────────────────────────────────────────────── */
.photo{margin:0; overflow:hidden; background: var(--obsidian-3); position:relative}
.photo img{width:100%; height:100%; object-fit:cover; display:block}
img[src=""], img:not([src]){opacity: 0}

/* Hero + CTA-band background photos ARE absolute (background layer). */
.hero .hero-media,
.hero > .photo,
.approved-hero > .photo,
.cta-band > .photo,
.closing > .photo,
.detail-hero--photo > .photo{
  position:absolute; inset:0; margin:0; z-index:0;
}
.hero .hero-media img,
.hero > .photo img,
.approved-hero > .photo img,
.cta-band > .photo img,
.closing > .photo img,
.detail-hero--photo > .photo img{
  width:100%; height:100%; object-fit:cover;
}

/* Sector card / signature story / editorial photos stay in flow. */
.sector-card .photo,
.sector-card figure,
.signature-story .photo,
.signature-story figure,
.editorial-image{
  position:relative; width:100%; margin:0;
  aspect-ratio: 4/3; overflow:hidden;
  background:var(--obsidian-3);
}
.signature-story .photo,
.signature-story figure{aspect-ratio: 3/2; height:100%}
.sector-card .photo img,
.sector-card figure img,
.signature-story .photo img,
.signature-story figure img{
  width:100%; height:100%; object-fit:cover;
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. Line-icons, small utilities
   ───────────────────────────────────────────────────────────────────────────── */
.line-icon{width:24px; height:24px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; display:inline-block; vertical-align: middle}

.rail-link{display:inline-flex; align-items:center; gap:6px}

/* Mobile break helper */
.desktop-break{display:none}
@media (min-width: 720px){.desktop-break{display:inline}}

/* ─────────────────────────────────────────────────────────────────────────────
   12. Responsive fine-tuning
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1000px){
  .desktop-nav{display:none}
  .menu-toggle{display:inline-flex}
}
@media (max-width: 620px){
  .header-consult{display:none}
  .brand-name small{display:none}
  .hero-annotation{display:none}
  .hero-meta{flex-direction:column; align-items:flex-start; gap:12px}
}

/* ─────────────────────────────────────────────────────────────────────────────
   13. Detail page layout (article + sidebar) — used on service & industry pages
   ───────────────────────────────────────────────────────────────────────────── */
.content-layout{
  display:grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr);
  gap: 80px; padding-block: clamp(60px, 8vw, 100px);
  align-items:start;
}
@media (max-width: 960px){.content-layout{grid-template-columns:1fr; gap:44px}}

.content-layout .article-copy{padding: 0}
.content-layout .article-copy .article-section{padding-block: 22px 0}

.sidebar{
  position:sticky; top: 100px;
  display:flex; flex-direction:column; gap:20px;
}
@media (max-width:960px){.sidebar{position:static; top:auto}}
.side-card{
  padding: 26px 24px;
  background: var(--obsidian-2);
  border:1px solid rgba(200,162,75,.18);
  border-radius:2px;
}
.side-card .eyebrow{color: var(--brass); margin-bottom: 12px}
.side-card h2{font-size:20px; margin-bottom:10px; line-height:1.2}
.side-card p{color:var(--titanium-4); font-size:14px; margin-bottom:14px}
.side-card .button{width:100%; justify-content:center; padding:12px 18px; font-size:13px}
.side-toc{padding-bottom:22px}
.side-links{list-style:none; padding:0; display:grid; gap:8px}
.side-links li{padding:6px 0; border-bottom:1px solid rgba(200,162,75,.10)}
.side-links li:last-child{border-bottom:0}
.side-links a{color:var(--warm-white); font-size:13.5px; line-height:1.4; transition: color .2s}
.side-links a:hover{color: var(--brass-light)}
.side-meta{
  padding: 20px 24px; background: var(--obsidian-warm);
  border:1px solid rgba(200,162,75,.16); border-radius:2px;
  display:flex; flex-direction:column; gap:8px;
  color:var(--titanium-3); font-size: 13px;
}
.side-meta a{color:var(--brass); font-family:var(--display); font-size:20px; letter-spacing:0.02em}
.side-meta a:last-child{font-family:var(--sans); font-size:13px; color:var(--brass-light)}

/* Region callout + environment links (in-article blocks) */
.environment-links, .region-callout{
  margin-top: 44px; padding: 32px;
  background: var(--obsidian-2); border:1px solid rgba(200,162,75,.15);
  border-radius:2px;
}
.environment-links .eyebrow, .region-callout .eyebrow{color:var(--brass); margin-bottom:10px}
.environment-links h2, .region-callout h2{font-size:24px; margin-bottom:14px}
.environment-links p, .region-callout p{color:var(--titanium-4); margin-bottom:20px; font-size:15px}
.environment-grid, .region-chips{
  display:flex; flex-wrap:wrap; gap:10px;
}
.environment-grid a, .region-chips a{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px;
  border:1px solid rgba(200,162,75,.30);
  border-radius:2px;
  color:var(--warm-white); font-size:13px; font-weight:500;
  transition: border-color .2s, color .2s, background .2s;
}
.environment-grid a:hover, .region-chips a:hover{
  border-color:var(--brass); color:var(--brass-light); background:rgba(200,162,75,.06);
}

/* Inner signoff on hero-inner */
.inner-signoff{
  display:block; margin-top:32px; padding-top:20px;
  border-top:1px solid rgba(200,162,75,.20);
  color:var(--titanium-3);
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  line-height:1.6;
}
.inner-signoff span{display:block; color:var(--brass); text-transform:none; letter-spacing:normal; font-size:13px; font-family:var(--serif); font-style:italic; margin-top:6px}

.signature-inner-copy{max-width: 62ch}

/* .section--small (used on service pages for FAQ + narrower blocks) */
.section--small{padding-block: clamp(40px, 5vw, 60px)}
.section--small h2{font-size:26px; margin-bottom:22px}
.section--small .eyebrow{color:var(--brass); margin-bottom:12px}

/* Environment/region blocks look nicer when in the article flow */
.article-copy > .environment-links, .article-copy > .region-callout, .article-copy > .section--small{
  margin-inline: 0;
}

/* Filter bar (industries directory) */
.filter-input:focus{outline:none; border-bottom:1px solid var(--brass)}

/* Print */
@media print{
  .site-header, .site-footer, .cta-band, .signature-environments, .signature-principles, .mobile-nav, .sidebar{display:none}
  body{background:#fff; color:#000}
  h1,h2,h3{color:#000!important; background:none!important; -webkit-text-fill-color: initial}
  .content-layout{grid-template-columns:1fr}
}

/* ─────────────────────────────────────────────────────────────────────────────
   14. Light-surface utilities — for section rhythm (dark → light → dark).
       Add .surface-warm or .surface-cream to a <section> to swap it light.
   ───────────────────────────────────────────────────────────────────────────── */
.surface-warm{background: var(--surface-warm); color: var(--surface-warm-ink)}
.surface-warm h1, .surface-warm h2, .surface-warm h3{color: var(--surface-warm-ink)}
.surface-warm p, .surface-warm li{color: rgba(11,11,12,.75)}
.surface-warm .eyebrow{color: var(--brass-deep)}
.surface-warm hr, .surface-warm .rule-brass{background: linear-gradient(90deg, transparent, var(--brass) 50%, transparent); opacity:.7}
.surface-warm a{color: var(--brass-deep)}
.surface-warm a:hover{color: var(--brass)}
.surface-warm .button{background: var(--surface-warm-ink); color: var(--surface-warm); border-color: var(--surface-warm-ink)}
.surface-warm .button:hover{background: var(--brass-deep); color: var(--surface-warm); border-color: var(--brass-deep)}
.surface-warm .card,
.surface-warm .sector-card,
.surface-warm .location-card,
.surface-warm .insight-link,
.surface-warm .directory-card{
  background: var(--surface-warm);
  border-color: var(--surface-warm-line-2);
  box-shadow: 0 1px 2px rgba(11,11,12,.05);
  color: var(--surface-warm-ink);
}
.surface-warm .card:hover,
.surface-warm .sector-card:hover,
.surface-warm .insight-link:hover,
.surface-warm .directory-card:hover{
  border-color: var(--brass-deep);
  background: #FFFFFF;
}
.surface-warm .card h3,
.surface-warm .sector-card h3,
.surface-warm .location-card h3,
.surface-warm .insight-link h3,
.surface-warm .directory-card h3{color: var(--surface-warm-ink)}
.surface-warm .card p,
.surface-warm .sector-card p,
.surface-warm .location-card p,
.surface-warm .insight-link p,
.surface-warm .directory-card p{color: rgba(11,11,12,.70)}
.surface-warm .faqs details{border-color: var(--surface-warm-line)}
.surface-warm .faqs details:last-child{border-color: var(--surface-warm-line)}
.surface-warm .faqs summary{color: var(--surface-warm-ink)}
.surface-warm .faqs details > div p,
.surface-warm .faqs details > div{color: rgba(11,11,12,.70)}
.surface-warm .card-cta,
.surface-warm .card-arrow,
.surface-warm .rail-link{color: var(--brass-deep)}

.surface-cream{background: var(--surface-cream); color: var(--surface-warm-ink)}
.surface-cream h1, .surface-cream h2, .surface-cream h3{color: var(--surface-warm-ink)}
.surface-cream p, .surface-cream li{color: rgba(11,11,12,.75)}
.surface-cream .eyebrow{color: var(--brass-deep)}
.surface-cream .card,
.surface-cream .sector-card,
.surface-cream .insight-link,
.surface-cream .directory-card{
  background: var(--surface-warm);
  border-color: var(--surface-warm-line-2);
  color: var(--surface-warm-ink);
}
.surface-cream .card h3,
.surface-cream .sector-card h3,
.surface-cream .insight-link h3,
.surface-cream .directory-card h3{color: var(--surface-warm-ink)}
.surface-cream .card p,
.surface-cream .sector-card p,
.surface-cream .insight-link p,
.surface-cream .directory-card p{color: rgba(11,11,12,.70)}
.surface-cream a{color: var(--brass-deep)}
.surface-cream a:hover{color: var(--brass)}

/* Safe small-mark utilities — use ONLY on small marks (max ~14px caps eyebrow-style),
   NEVER on H1/H2. Kept for legacy inline callers; page-element usage is banned. */
.text-engraved-brass{
  font-size: 14px;
  background: var(--brass-engraved);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.text-brass-linear{
  font-size: 14px;
  background: var(--brass-linear);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Wave v4→v5 · Motion, advanced effects, mega menu v2
   Append-only. Motion-safe. Editorial-cinematic (no SaaS bounce / no shine gimmicks).
   ───────────────────────────────────────────────────────────────────────────── */

/* 1. Scroll-reveal utility classes (paired with a tiny IntersectionObserver in <head>) */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0; transform: translateY(20px); transition: opacity .8s cubic-bezier(.2,.65,.3,.9), transform .8s cubic-bezier(.2,.65,.3,.9)}
  .reveal.in{opacity:1; transform: none}
  .reveal-slow{transition-duration: 1.2s}
  .reveal-fast{transition-duration: .5s}
  .reveal-delay-1{transition-delay: .08s}
  .reveal-delay-2{transition-delay: .16s}
  .reveal-delay-3{transition-delay: .24s}
  .reveal-delay-4{transition-delay: .32s}
}

/* 2. Mega menu v2 — full-width dropdown from the header with photo/banner column */
.mega-v2{
  position: fixed; left: 0; right: 0; top: 78px; z-index: 70;
  background: var(--obsidian);
  border-top: 1px solid rgba(200,162,75,.15);
  border-bottom: 1px solid rgba(200,162,75,.15);
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: transform .35s cubic-bezier(.2,.65,.3,.9), opacity .28s;
}
.mega-v2[data-open="true"]{transform: none; opacity: 1; pointer-events: auto}
.mega-v2 .mega-grid{
  max-width: var(--wrap-max); margin: 0 auto; padding: 44px 32px 48px;
  display: grid; grid-template-columns: 1.2fr 2fr 1.6fr; gap: 56px;
}
.mega-v2 .mega-lede h3{
  font-size: 28px; color: var(--warm-white); font-weight: 500;
  margin: 12px 0 10px; letter-spacing: -0.01em;
}
.mega-v2 .mega-lede p{
  color: var(--titanium-4); font-size: 14.5px; line-height: 1.6; margin-bottom: 24px;
}
.mega-v2 .mega-lede .text-link{color: var(--brass); font-size: 13px}
.mega-v2 .mega-cols{
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 32px;
}
.mega-v2 .mega-cols a{
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 2px;
  color: var(--warm-white); font-size: 14px; font-weight: 500;
  transition: background .2s, color .2s, padding .25s;
}
.mega-v2 .mega-cols a small{
  display: block; color: var(--titanium-3); font-size: 11.5px; margin-top: 2px; font-weight: 400;
}
.mega-v2 .mega-cols a .mark{color: var(--brass); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s}
.mega-v2 .mega-cols a:hover{background: rgba(200,162,75,.06); color: var(--brass-light); padding-left: 20px}
.mega-v2 .mega-cols a:hover .mark{opacity: 1; transform: translateX(0)}
.mega-v2 .mega-cols a div{flex: 1}
.mega-v2 .mega-banner{
  position: relative; overflow: hidden; border-radius: 2px; min-height: 260px;
  background: var(--obsidian-2);
}
.mega-v2 .mega-banner img{
  width: 100%; height: 100%; object-fit: cover; opacity: .82;
}
.mega-v2 .mega-banner::after{
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(11,11,12,.85));
}
.mega-v2 .mega-banner .mega-banner-copy{
  position: absolute; left: 0; right: 0; bottom: 0; padding: 24px;
  color: var(--warm-white); z-index: 2;
}
.mega-v2 .mega-banner .mega-banner-copy .eyebrow{color: var(--brass-light); margin-bottom: 8px}
.mega-v2 .mega-banner .mega-banner-copy h4{font-size: 20px; margin-bottom: 6px; line-height: 1.2; color: var(--warm-white)}
.mega-v2 .mega-banner .mega-banner-copy p{color: var(--titanium-4); font-size: 13.5px; margin-bottom: 10px}
.mega-v2 .mega-banner .mega-banner-copy a{color: var(--brass-light); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase}
@media (max-width: 1080px){.mega-v2 .mega-grid{grid-template-columns: 1fr; gap: 32px}.mega-v2 .mega-banner{display: none}}

/* Nav triggers for v2 */
.nav-item-v2{position: static}
.nav-item-v2 button[aria-expanded="true"]{color: var(--brass-light)}

/* 3. Mobile drawer v2 — full-screen overlay with staggered reveal */
.mnav-v2{
  position: fixed; inset: 0; z-index: 90;
  background: var(--obsidian);
  padding: 24px;
  overflow-y: auto;
  display: none;
}
.mnav-v2[data-open="true"]{display: block}
.mnav-v2 .mnav-head{
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 24px; border-bottom: 1px solid rgba(200,162,75,.15); margin-bottom: 32px;
}
.mnav-v2 .mnav-head .brand{color: var(--warm-white)}
.mnav-v2 .mnav-close{
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(200,162,75,.25); border-radius: 2px; color: var(--warm-white); font-size: 24px;
}
.mnav-v2 details{border-bottom: 1px solid rgba(200,162,75,.10)}
.mnav-v2 details summary{
  padding: 18px 0; display: flex; justify-content: space-between; align-items: center;
  color: var(--warm-white); font-size: 18px; font-weight: 500; cursor: pointer; list-style: none;
}
.mnav-v2 details summary::-webkit-details-marker{display: none}
.mnav-v2 details summary::after{content: '+'; color: var(--brass); font-size: 22px; font-weight: 400}
.mnav-v2 details[open] summary::after{content: '−'}
.mnav-v2 details > div{padding: 8px 0 20px 12px; display: grid; gap: 8px}
.mnav-v2 details a{color: var(--titanium-4); font-size: 15px; padding: 8px 0; display: block}
.mnav-v2 details a:hover, .mnav-v2 details a:focus{color: var(--brass-light)}
.mnav-v2 > a{display: flex; padding: 18px 0; color: var(--warm-white); border-bottom: 1px solid rgba(200,162,75,.10); font-size: 18px; font-weight: 500}
.mnav-v2 .mnav-cta{margin-top: 32px; display: flex; flex-direction: column; gap: 12px}
.mnav-v2 .mnav-cta a{text-align: center; padding: 16px}
.mnav-v2 .mnav-cta .tel{color: var(--brass-light); font-family: var(--font-display); font-size: 20px; letter-spacing: 0.02em}

/* 4. Cinematic full-bleed editorial quote section */
.editorial-marquee{
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(420px, 55vh, 620px);
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--obsidian);
}
.editorial-marquee > .photo, .editorial-marquee > img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.42) saturate(1.05); z-index: 0;
  animation: kenburns 24s ease-in-out infinite alternate;
}
@keyframes kenburns{
  0%{transform: scale(1.02) translate(0,0)}
  100%{transform: scale(1.12) translate(-1.5%, -1%)}
}
@media (prefers-reduced-motion: reduce){.editorial-marquee > .photo, .editorial-marquee > img{animation: none}}
.editorial-marquee::after{
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,11,12,.35), rgba(11,11,12,.75));
}
.editorial-marquee .quote-inner{
  position: relative; z-index: 2; max-width: 900px; padding: 60px 32px; color: var(--warm-white);
}
.editorial-marquee .quote-inner .eyebrow{color: var(--brass-light); margin-bottom: 20px}
.editorial-marquee .quote-inner blockquote{
  font-family: var(--font-display); font-size: clamp(30px, 3vw + 12px, 52px);
  font-weight: 400; line-height: 1.18; letter-spacing: -0.015em;
  color: var(--warm-white); font-style: italic; max-width: 22ch; margin: 0 auto 24px;
}
.editorial-marquee .quote-inner cite{
  font-family: var(--font-body); font-style: normal;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--titanium-4);
}

/* 5. Credibility strip (below hero) */
.cred-strip{
  border-block: 1px solid rgba(200,162,75,.15);
  background: linear-gradient(180deg, var(--obsidian-2), var(--obsidian));
  padding: 28px 0;
}
.cred-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: stretch;
}
.cred-cell{
  display: flex; align-items: flex-start; gap: 14px;
  padding: 6px 26px;
  border-left: 1px solid rgba(200,162,75,.14);
  min-height: 68px;
}
.cred-cell:first-child{border-left: 0; padding-left: 0}
.cred-cell:last-child{padding-right: 0}
.cred-ic{
  width: 26px; height: 26px; flex-shrink: 0;
  color: var(--brass);
  margin-top: 2px;
}
.cred-body{display: flex; flex-direction: column; gap: 2px; min-width: 0}
.cred-label{
  font-size: 10.5px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--brass); font-weight: 600;
  margin-bottom: 4px;
}
.cred-val{
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  color: var(--warm-white); letter-spacing: 0.01em; line-height: 1.35;
}
.cred-sub{
  font-size: 11.5px; color: var(--titanium-3); font-weight: 400;
  margin-top: 2px; line-height: 1.4;
}

/* Responsive: 2-col tablet, 1-col mobile */
@media (max-width: 1000px){
  .cred-grid{grid-template-columns: 1fr 1fr; gap: 22px 0}
  .cred-cell{border-left: 0; padding: 0 0 0 20px; border-left: 1px solid rgba(200,162,75,.14)}
  .cred-cell:nth-child(2n+1){border-left: 0; padding-left: 0}
}
@media (max-width: 560px){
  .cred-grid{grid-template-columns: 1fr; gap: 18px}
  .cred-cell{border-left: 0 !important; padding-left: 0 !important}
}

/* 6. Three-step "How we work" section */
.how-we-work{padding-block: clamp(80px, 10vw, 130px); background: var(--surface-warm)}
.how-we-work .head{max-width: 780px; margin: 0 auto 72px; text-align: center}
.how-we-work .head .eyebrow{color: var(--brass-deep); margin-bottom: 16px}
.how-we-work .head h2{margin-bottom: 16px; color: var(--surface-warm-ink)}
.how-we-work .head p{color: var(--surface-warm-mute); font-size: 17px}
.how-we-work .steps{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 40px;
  max-width: 1120px; margin: 0 auto; position: relative;
}
.how-we-work .steps::before{
  content: ''; position: absolute; top: 30px; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass) 20%, var(--brass) 80%, transparent);
  opacity: .5;
}
.how-we-work .step{padding: 20px 4px; position: relative; z-index: 1}
.how-we-work .step .num{
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--surface-warm); border: 1px solid var(--surface-warm-line-2);
  color: var(--brass-deep); font-family: var(--font-display); font-size: 20px; font-weight: 600;
  margin-bottom: 24px;
}
.how-we-work .step h3{font-size: 22px; margin-bottom: 12px; color: var(--surface-warm-ink)}
.how-we-work .step p{color: var(--surface-warm-mute); font-size: 15px; line-height: 1.65}
.how-we-work .step .kv{
  display: block; padding-top: 14px; border-top: 1px solid var(--surface-warm-line);
  margin-top: 14px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass-deep);
}
@media (max-width: 880px){.how-we-work .steps{grid-template-columns: 1fr; gap: 32px}.how-we-work .steps::before{display: none}}

/* 7. Larger portrait industry cards with hover-photo-reveal */
.industry-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  padding-top: 20px;
}
@media (max-width: 1080px){.industry-grid{grid-template-columns: repeat(3, 1fr)}}
@media (max-width: 720px){.industry-grid{grid-template-columns: repeat(2, 1fr)}}
@media (max-width: 460px){.industry-grid{grid-template-columns: 1fr}}
.industry-card{
  position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: 2px;
  background: var(--obsidian-2);
  transition: transform .35s cubic-bezier(.2,.65,.3,.9);
}
.industry-card img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.65,.3,.9), filter .35s;
  filter: brightness(.72) saturate(1.05);
}
.industry-card::after{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,11,12,.55) 0%, transparent 22%, transparent 100%);
  z-index: 1;
}
.industry-card .meta{
  position: absolute; inset: 12px 14px auto 14px; padding: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--warm-white);
}
.industry-card .meta .n{color: var(--brass-light); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; padding: 5px 9px; background: rgba(11,11,12,.72); border: 1px solid rgba(200,162,75,.32); border-radius: 2px; backdrop-filter: blur(6px)}
.industry-card .meta .go{
  font-size: 10.5px; color: var(--brass-light); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  padding: 5px 9px; background: rgba(11,11,12,.72); border: 1px solid rgba(200,162,75,.32); border-radius: 2px; backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s;
}
.industry-card:hover img{transform: scale(1.06); filter: brightness(.55) saturate(1.1)}
.industry-card:hover .meta .go{opacity: 1; transform: translateY(0)}

/* 8. Location card with image */
.location-image-card{
  position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: 2px;
  background: var(--obsidian-2);
  transition: transform .35s;
}
.location-image-card img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s;
  filter: brightness(.55);
}
.location-image-card::after{
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(11,11,12,.92));
  pointer-events: none;
}
.location-image-card:hover img{transform: scale(1.05); filter: brightness(.42)}
.location-image-card .body{
  position: absolute; inset: auto 0 0 0; padding: 32px; z-index: 2; color: var(--warm-white);
}
.location-image-card .body .eyebrow{color: var(--brass-light); margin-bottom: 10px}
.location-image-card .body h3{font-size: 28px; color: var(--warm-white); margin-bottom: 8px}
.location-image-card .body p{color: var(--titanium-4); font-size: 14px; margin-bottom: 14px; line-height: 1.55}
.location-image-card .body .go{color: var(--brass-light); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600}

/* 8a. Process ledger — dark editorial 3-step timeline (home 02).
   Replaces the flat .how-we-work light surface. */
.process-ledger{padding-block: clamp(90px, 11vw, 140px); background: var(--obsidian); color: var(--warm-white); position: relative; overflow: hidden}
.process-ledger::before{content: ""; position: absolute; inset: 0; background: radial-gradient(1200px 400px at 20% 0%, rgba(200,162,75,.06), transparent 60%); pointer-events: none}
.process-ledger > .wrap{position: relative; z-index: 1}

.process-track{list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; counter-reset: none}
.process-track::before{content: ""; position: absolute; left: 0; right: 0; top: 46px; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(200,162,75,.22) 8%, rgba(200,162,75,.42) 50%, rgba(200,162,75,.22) 92%, transparent 100%); z-index: 0}
.process-step{position: relative; padding: 0 32px 0 0; display: flex; flex-direction: column; gap: 20px; z-index: 1}
.process-step + .process-step{padding-left: 32px; border-left: 1px solid rgba(200,162,75,.14)}
.process-numeral{width: 92px; height: 92px; border-radius: 50%; border: 1px solid rgba(200,162,75,.42); background: linear-gradient(180deg, rgba(200,162,75,.12), rgba(200,162,75,.02)); color: var(--brass); font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06)}
.process-body{display: flex; flex-direction: column; gap: 10px}
.process-body h3{font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--warm-white); margin: 4px 0 6px; line-height: 1.15; letter-spacing: -0.01em}
.process-body p{font-size: 15px; color: var(--titanium-3); line-height: 1.7; margin: 0}
.process-kv{font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-light); font-weight: 600; padding-top: 16px; border-top: 1px solid rgba(200,162,75,.16); margin-top: 8px}

@media (max-width: 900px){
  .process-track{grid-template-columns: 1fr; gap: 32px; margin-top: 32px}
  .process-track::before{display: none}
  .process-step{padding: 0; border-left: 0 !important}
  .process-step + .process-step{border-top: 1px solid rgba(200,162,75,.14); padding-top: 32px}
  .process-numeral{width: 72px; height: 72px; font-size: 24px}
}

/* 9. Reading room — dark editorial planning-library cards (home 06).
   Replaces the flat .insight-grid on pewter surface. */
.reading-room{padding-block: clamp(90px, 11vw, 140px); background: linear-gradient(180deg, var(--obsidian-2), var(--obsidian)); color: var(--warm-white); position: relative; overflow: hidden}
.reading-room::before{content: ""; position: absolute; inset: 0; background: radial-gradient(900px 300px at 80% 100%, rgba(200,162,75,.05), transparent 60%); pointer-events: none}
.reading-room > .wrap{position: relative; z-index: 1}

.reading-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px}
.reading-card{display: flex; gap: 22px; padding: 28px 26px; border: 1px solid rgba(200,162,75,.16); border-left: 3px solid rgba(200,162,75,.42); border-radius: 2px; background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005)); text-decoration: none; color: inherit; transition: border-color .25s ease, background .25s ease, transform .25s ease}
.reading-card:hover{border-color: rgba(200,162,75,.5); border-left-color: var(--brass); background: linear-gradient(180deg, rgba(200,162,75,.05), rgba(255,255,255,.005)); transform: translateY(-2px)}
.reading-numeral{flex: 0 0 auto; font-family: var(--font-display); font-size: 40px; font-weight: 600; color: var(--brass); letter-spacing: -0.02em; line-height: 1; padding-top: 4px; opacity: .85}
.reading-body{display: flex; flex-direction: column; gap: 8px}
.reading-body h3{font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--warm-white); margin: 4px 0 6px; line-height: 1.2; letter-spacing: -0.01em}
.reading-body p{font-size: 14.5px; color: var(--titanium-3); line-height: 1.65; margin: 0 0 12px}
.reading-cta{font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-light); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; margin-top: auto}
.reading-cta .mark{font-size: 14px; color: var(--brass)}
.reading-card:hover .reading-cta{color: var(--brass)}

.reading-footer{margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(200,162,75,.14); text-align: center}

@media (max-width: 1000px){
  .reading-grid{grid-template-columns: 1fr; gap: 16px; margin-top: 32px}
}
@media (max-width: 560px){
  .reading-card{padding: 22px 20px; gap: 16px}
  .reading-numeral{font-size: 32px}
  .reading-body h3{font-size: 19px}
}

/* 8b. Coverage ledger — editorial regions section (home page).
   Flagship pane on the left, three grouped jurisdiction blocks on the right. */
.coverage-ledger{display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 44px; margin-top: 48px}
.coverage-flag{background: linear-gradient(180deg, rgba(200,162,75,0.06), rgba(255,255,255,0.01)); border: 1px solid rgba(200,162,75,0.16); border-radius: 2px; overflow: hidden; display: flex; flex-direction: column}
.coverage-flag-media{position: relative; aspect-ratio: 4/3; overflow: hidden}
.coverage-flag-media img{width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.82)}
.coverage-flag-media::after{content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,12,0) 45%, rgba(11,11,12,.85) 100%); pointer-events: none}
.coverage-flag-body{padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 6px}
.coverage-flag-city{font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--warm-white); line-height: 1.1; margin: 4px 0 6px; letter-spacing: -0.01em}
.coverage-flag-sub{font-size: 14px; color: var(--titanium-3); line-height: 1.6; margin: 0 0 10px}

.coverage-groups{display: flex; flex-direction: column; gap: 20px}
.coverage-group{display: block; padding: 26px 28px; border: 1px solid rgba(200,162,75,0.14); border-radius: 2px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005)); text-decoration: none; color: inherit; transition: border-color .25s ease, background .25s ease; position: relative}
a.coverage-group:hover{border-color: rgba(200,162,75,0.42); background: linear-gradient(180deg, rgba(200,162,75,0.04), rgba(255,255,255,0.005))}
.coverage-group-head{display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 10px}
.coverage-group-head h3{font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--warm-white); margin: 0; letter-spacing: -0.01em; flex: 1}
.coverage-group-head .cred-label{flex: 0 0 auto; margin: 0 0 0 0; align-self: baseline}
.coverage-group-head .mark{margin-left: auto; color: var(--brass); font-size: 20px; line-height: 1; align-self: center; opacity: .9}
.coverage-group-head .text-link.small{margin-left: auto; font-size: 13px; letter-spacing: 0.02em}
.coverage-group > p{font-size: 14.5px; color: var(--titanium-3); line-height: 1.65; margin: 0 0 14px}

.chip-cluster{display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px}
.chip{display: inline-flex; align-items: center; padding: 6px 12px; font-size: 12.5px; letter-spacing: 0.02em; color: var(--warm-white); background: rgba(255,255,255,0.03); border: 1px solid rgba(200,162,75,0.20); border-radius: 2px; text-decoration: none; transition: background .18s ease, border-color .18s ease, color .18s ease; white-space: nowrap}
a.chip:hover{background: rgba(200,162,75,0.10); border-color: rgba(200,162,75,0.55); color: var(--brass-light)}

@media (max-width: 900px){
  .coverage-ledger{grid-template-columns: 1fr; gap: 20px; margin-top: 32px}
  .coverage-flag-media{aspect-ratio: 16/9}
  .coverage-flag-body{padding: 20px 22px 22px}
  .coverage-flag-city{font-size: 24px}
}
@media (max-width: 560px){
  .coverage-group{padding: 22px 20px}
  .coverage-group-head h3{font-size: 21px}
  .coverage-flag-city{font-size: 22px}
  .coverage-group-head .text-link.small{margin-left: 0; margin-top: 4px; flex: 1 0 100%}
  .coverage-group-head .mark{align-self: baseline}
  .chip{padding: 5px 10px; font-size: 12px}
}

/* 9. Header scroll compaction (subtle) */
@media (prefers-reduced-motion: no-preference){
  .site-header{transition: background .3s, backdrop-filter .3s, box-shadow .3s}
  .site-header.scrolled{background: rgba(11,11,12,.94); box-shadow: 0 6px 24px rgba(0,0,0,.28)}
}

/* 10. Hero enhancement — subtle Ken Burns on hero photo */
@media (prefers-reduced-motion: no-preference){
  .hero .hero-media img{animation: kenburns 26s ease-in-out infinite alternate}
}

/* ─────────────────────────────────────────────────────────────────────────────
   14. Mobile sticky bottom bar — always-visible CTA on small viewports.
   Two buttons: Call dispatch (tel:) and Request consultation (form).
   Hidden on ≥821px so desktop uses the header CTA.
   ───────────────────────────────────────────────────────────────────────────── */
.m-sticky{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
  display: none;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) 14px;
  background: rgba(11, 11, 12, .96);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(200, 162, 75, .28);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.2,.65,.3,.9);
  will-change: transform;
}
.m-sticky.on{ transform: translateY(0); }
@media (prefers-reduced-motion: reduce){ .m-sticky{ transition: none; } }
.m-sticky > .row{
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px;
  max-width: 640px; margin: 0 auto;
}
.m-sticky a{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 12px; font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  border-radius: 4px; text-decoration: none;
  min-height: 48px;
  transition: background .2s, transform .1s;
}
.m-sticky a.call{
  background: transparent;
  color: var(--brass-light);
  border: 1px solid rgba(200, 162, 75, .5);
}
.m-sticky a.call:active{background: rgba(200, 162, 75, .10); transform: translateY(1px)}
.m-sticky a.call svg{width: 16px; height: 16px}
.m-sticky a.book{
  background: var(--brass);
  color: var(--obsidian);
}
.m-sticky a.book:active{background: var(--brass-light); transform: translateY(1px)}
.m-sticky a.book span.arr{transition: transform .2s}
.m-sticky a.book:active span.arr{transform: translateX(3px)}

@media (max-width: 820px){
  .m-sticky{display: block}
  /* Give the page bottom breathing room so footer content is not hidden by the bar. */
  body{padding-bottom: 72px}
}

/* Sales-funnel touches — inline trust chip + response promise */
.trust-inline{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(200,162,75,.10);
  border: 1px solid rgba(200,162,75,.32);
  border-radius: 100px;
  font-size: 12px; letter-spacing: 0.04em; color: var(--brass-light);
  font-weight: 500;
  margin: 6px 6px 6px 0;
}
.trust-inline .dot{
  width: 6px; height: 6px; background: var(--brass-light); border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(200,162,75,.20);
}
.surface-warm .trust-inline, .surface-cream .trust-inline{
  color: var(--brass-deep);
  background: rgba(143,110,46,.06);
  border-color: rgba(143,110,46,.30);
}
.surface-warm .trust-inline .dot, .surface-cream .trust-inline .dot{
  background: var(--brass-deep);
  box-shadow: 0 0 0 4px rgba(143,110,46,.15);
}

/* Post-hero response promise strip — subtle, one-line */
.promise-strip{
  padding: 14px 0;
  background: linear-gradient(90deg, transparent, rgba(200,162,75,.06), transparent);
  border-top: 1px solid rgba(200,162,75,.14);
  border-bottom: 1px solid rgba(200,162,75,.14);
  text-align: center;
  font-size: 13px; color: var(--titanium-4); letter-spacing: 0.02em;
}
.promise-strip strong{color: var(--brass-light); font-weight: 600}
.surface-warm .promise-strip, .surface-cream .promise-strip{
  color: var(--surface-warm-mute);
  border-color: var(--surface-warm-line);
}
.surface-warm .promise-strip strong, .surface-cream .promise-strip strong{color: var(--brass-deep)}

/* ─── Hero slides · 4-image crossfade w/ Ken Burns + brass dot indicators ── */
.hero-media.slides{overflow:hidden; position:absolute; inset:0}
.hero-media .slide{position:absolute; inset:0; opacity:0; transition:opacity 1.4s cubic-bezier(.4,0,.2,1)}
.hero-media .slide.on{opacity:1}
.hero-media .slide img{width:100%; height:100%; object-fit:cover; object-position:center 40%}
@media (prefers-reduced-motion: no-preference){
  .hero-media .slide.on img{animation: kenburns 12s ease-in-out infinite alternate}
}
.hero-dots{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%); z-index:5;
  display:flex; gap:10px; align-items:center;
}
.hero-dots button{
  width:34px; height:2px; border:0; padding:0; cursor:pointer;
  background: rgba(247, 245, 241, .30);
  transition: background .3s, transform .3s;
}
.hero-dots button[aria-current="true"]{background: var(--brass); transform: scaleY(2)}
.hero-dots button:hover{background: rgba(247, 245, 241, .55)}

/* Hero pill row · quick trust chips in the hero body */
.hero-body .pills{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px}
.hero-body .pills span{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:100px;
  background:rgba(200,162,75,.10); border:1px solid rgba(200,162,75,.30);
  color:var(--brass-light); font-size:11.5px; font-weight:600; letter-spacing:.03em;
}
.hero-body .pills span .dot{width:6px; height:6px; border-radius:50%; background:var(--brass-light); box-shadow: 0 0 0 3px rgba(200,162,75,.20)}

/* Hero CTAs — ensure a third "watch approach" link is styled */
.hero-body .cta-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:24px}
.hero-body .cta-row .watch{
  color: var(--warm-white); font-size:13.5px; font-weight:500; letter-spacing:0.02em;
  display:inline-flex; align-items:center; gap:10px; padding:8px 4px;
  border-bottom:1px solid rgba(247, 245, 241, .28);
  transition: color .2s, border-color .2s;
}
.hero-body .cta-row .watch:hover{color: var(--brass-light); border-color: var(--brass)}
.hero-body .cta-row .watch svg{width:16px; height:16px}