/* =========================================================
   Stronghold Contracting Group — Design System v3
   One family throughout: Instrument Sans. Hierarchy comes from scale and
   weight, never from all-caps — that is what read as a template.
   ========================================================= */
:root {
  --blue: #14559e;
  --blue-2: #2f7ce0;
  --blue-dark: #0f4aa0;
  --green: #1f9a4d;
  --green-2: #35b862;
  --green-deep: #17803f;
  --navy-900: #050e18;
  --navy-800: #0a1826;
  --navy-700: #0f2436;
  --navy-600: #16324a;
  --ink: #101d29;
  --slate: #55636f;
  --slate-2: #79868f;
  --line: #e4e9ee;
  --line-2: #eef2f6;
  --bg: #ffffff;
  --bg-soft: #f4f6f9;
  --bg-mint: #f1f7f2;
  --white: #ffffff;

  --grad-blue: linear-gradient(135deg, #14559e 0%, #1d6cc0 100%);
  --grad-green: linear-gradient(135deg, #1f9a4d 0%, #35b862 100%);
  --grad-mix: linear-gradient(125deg, #0a1826 0%, #10365f 60%, #17803f 130%);

  --radius: 12px;
  --radius-lg: 18px;
  --radius-sm: 8px;
  --shadow-xs: 0 1px 3px rgba(16,40,70,.05), 0 1px 2px rgba(16,40,70,.04);
  --shadow-sm: 0 4px 14px rgba(16,40,70,.07);
  --shadow: 0 14px 38px rgba(16,40,70,.11);
  --shadow-lg: 0 30px 70px rgba(8,24,50,.20);
  --glow-green: 0 8px 20px rgba(31,154,77,.22);
  --glow-blue: 0 8px 20px rgba(20,85,158,.20);
  --maxw: 1220px;
  --header-h: 86px;
  --font: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --display: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg);
  font-size: 1.0625rem; line-height: 1.68; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
h1,h2,h3,h4 { font-family: var(--display); line-height: 1.06; margin: 0 0 .5em; color: var(--ink); letter-spacing: -.028em; font-weight: 700; }
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.032em; line-height: 1.04; }
h1 { font-size: clamp(2.6rem, 5.3vw, 4.4rem); }
h2 { font-size: clamp(1.85rem, 3.1vw, 2.7rem); }
h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -.018em; }
h3 { font-size: 1.4rem; font-weight: 700; }
p { margin: 0 0 1rem; }
.container { width: min(100% - 44px, var(--maxw)); margin-inline: auto; }
.container-wide { width: min(100% - 44px, 1340px); margin-inline: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 11px; text-transform: uppercase;
  letter-spacing: .2em; font-size: .74rem; font-weight: 700; color: var(--green);
  margin-bottom: 18px; font-family: var(--font);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--green); border-radius: 2px; }
.eyebrow.center { justify-content: center; }
.eyebrow.on-dark { color: var(--green-2); }
.eyebrow.on-dark::before { background: var(--green-2); }
/* Hero brand lockup: the company name sits above the headline so a visitor
   knows whose site this is before they read anything else. */
.hero__brand { margin-bottom: 20px; letter-spacing: .24em; }
@media (max-width: 640px){ .hero__brand { letter-spacing: .18em; font-size: .7rem; } }

.section { padding: clamp(70px, 8.5vw, 128px) 0; position: relative; }
.section--soft { background: var(--bg-soft); }
.section--mint { background: var(--bg-mint); }
.section--navy { background: var(--navy-800); color: #c7d6e4; }
.section--navy h1,.section--navy h2,.section--navy h3 { color: #fff; }
.lead { font-size: 1.24rem; line-height: 1.6; color: var(--slate); max-width: 62ch; }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.grad-text { background: var(--grad-mix); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-text-green { background: var(--grad-green); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--font);
  font-weight: 700; font-size: .96rem; padding: 14px 26px; border-radius: var(--radius-sm);
  border: 1.5px solid transparent; cursor: pointer; position: relative; letter-spacing: -.005em;
  transition: transform .16s ease, box-shadow .22s ease, background .22s, color .2s, border-color .2s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; transition: transform .2s; }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--green-deep); color: #fff; box-shadow: var(--glow-green); }
.btn--primary:hover { background: #12652f; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(31,154,77,.32); }
.btn--blue { background: var(--navy-800); color: #fff; }
.btn--blue:hover { background: #142d44; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn--ghost { background: rgba(255,255,255,.07); color: #fff; border-color: rgba(255,255,255,.45); backdrop-filter: blur(4px); }
.btn--ghost:hover { background: #fff; color: var(--navy-800); border-color: #fff; transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--navy-800); border-color: #ccd6e0; }
.btn--outline:hover { border-color: var(--green); color: var(--green-deep); background: rgba(31,154,77,.05); }
.btn--sm { padding: 10px 18px; font-size: .86rem; }
.btn--lg { padding: 17px 34px; font-size: 1.02rem; }
.btn--white { background:#fff; color: var(--navy-800); }
.btn--white:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.18); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: box-shadow .3s; background: #fff; border-bottom: 1px solid var(--line);
}
.site-header.scrolled { box-shadow: 0 10px 34px rgba(16,40,70,.12); border-bottom-color: transparent;
  background: rgba(255,255,255,.88); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }

/* --- Transparent glass header over dark heroes --- */
body.has-overlay-hero { padding-top: 0; }
body.has-overlay-hero .hero { min-height: 100vh; }
body.has-overlay-hero .hero .container { padding-top: calc(84px + var(--header-h)); }
body.has-overlay-hero .page-hero { padding-top: calc(92px + var(--header-h)); }
body.has-overlay-hero .svc-hero { padding-top: calc(96px + var(--header-h)); }
body.has-overlay-hero .jb-hero { padding-top: calc(66px + var(--header-h)); }
.site-header.overlay:not(.scrolled) { background: transparent; border-bottom-color: rgba(255,255,255,.14); }
.site-header.overlay:not(.scrolled) .nav a.navlink { color: #e8f0f7; }
.site-header.overlay:not(.scrolled) .nav a.navlink:hover,
.site-header.overlay:not(.scrolled) .nav a.navlink.active { color: #8fe6b1; }
.site-header.overlay:not(.scrolled) 
.site-header.overlay:not(.scrolled) .nav-toggle span { background: #fff; }
.site-header.overlay:not(.scrolled) 

/* utility bar */

/* main nav row */
.nav-main { display: flex; align-items: center; height: 86px; transition: height .3s ease; }
.site-header.scrolled .nav-main { height: 68px; }
.nav-main .container-wide { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { position: relative; display: inline-flex; align-items: center; }
/* One quiet entrance on first paint. Not a loop, not a hover trick. */
@keyframes brandIn { from { opacity: 0; transform: translateY(-7px) scale(.97); } to { opacity: 1; transform: none; } }
.brand img { animation: brandIn .62s cubic-bezier(.2,.75,.25,1) both; }
@media (prefers-reduced-motion: reduce) { .brand img { animation: none; } }
.brand img { height: 64px; width: auto; transition: height .3s; }
.site-header.scrolled .brand img { height: 50px; }
/* two logo variants: color for light surfaces, white for dark surfaces */
.brand-mark--white { display: none; }
.site-header.overlay:not(.scrolled) .brand-mark--color { display: none; }
.site-header.overlay:not(.scrolled) .brand-mark--white { display: block; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a.navlink {
  display: inline-flex; align-items: center; gap: 5px; line-height: 1;
  color: #1e2a36; font-weight: 600; font-size: .95rem; padding: 11px 16px; border-radius: 9px;
  position: relative; font-family: var(--font); letter-spacing: -.005em; isolation: isolate;
  transition: color .22s ease;
}
/* soft upward glow behind link on hover/active */
.nav a.navlink::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 9px;
  background: radial-gradient(72% 130% at 50% 118%, rgba(53,184,98,.22), rgba(53,184,98,0) 72%);
  opacity: 0; transform: translateY(4px); transition: opacity .28s ease, transform .28s ease;
}
/* animated glowing underline */
.nav a.navlink::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; border-radius: 3px;
  background: linear-gradient(90deg, var(--green), var(--green-2));
  box-shadow: 0 0 10px rgba(53,184,98,.8), 0 0 18px rgba(53,184,98,.5);
  transform: scaleX(0); transform-origin: center; opacity: 0;
  transition: transform .32s cubic-bezier(.45,0,.2,1), opacity .28s ease;
}
.nav a.navlink:hover { color: var(--green-deep); }
.nav a.navlink:hover::before,
.nav a.navlink.active::before { opacity: 1; transform: translateY(0); }
.nav a.navlink:hover::after,
.nav a.navlink.active::after { transform: scaleX(1); opacity: 1; }
.nav a.navlink.active { color: var(--green-deep); }

/* nav tools: theme toggle + CTA button */

.nav-mobile-extra { display: none; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; z-index: 3; }
.nav-toggle span { display: block; width: 26px; height: 3px; background: var(--ink); border-radius: 3px; margin: 5px 0; transition: .3s; }
.nav-toggle.on span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav-toggle.on span:nth-child(2){ opacity: 0; }
.nav-toggle.on span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

body { padding-top: var(--header-h); }

/* scroll progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 120; background: var(--grad-green); box-shadow: 0 0 10px rgba(47,165,68,.6); transition: width .1s linear; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: calc(100vh - var(--header-h)); display: flex; align-items: center; color: #fff; overflow: hidden;
  background: #0a1826;
}
.hero__photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; animation: heroZoom 22s ease-out forwards; }
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce){ .hero__photo{ animation: none; } }
/* hero background video — two clips cross-dissolved */
.hero__stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; z-index: 1;
  transition: opacity 1.6s cubic-bezier(.4, 0, .25, 1);
  will-change: opacity; backface-visibility: hidden;
  /* light grade so both clips read as one continuous film */
  filter: saturate(.92) contrast(1.04);
}
/* per-clip trim so all three read as one continuous film, regardless of play order */
/* Bore-pit clip is shot in full sun on bright green — it needs a harder
   knock-down than the others to keep the headline legible over it. */
.hero__video--drill  { filter: saturate(.82) contrast(1.06) brightness(.66); }
.hero__video--climb  { filter: saturate(.92) contrast(1.05) brightness(.78); }
.hero__video--splice { filter: saturate(.92) contrast(1.04); }
.hero__video--aerial { filter: saturate(.9) contrast(1.04) brightness(.86); }
.hero__video.is-ready { opacity: 1; }
/* the incoming clip is lifted above the outgoing one so the dissolve never dips to black */
.hero__video.is-front { z-index: 2; }
@media (prefers-reduced-motion: reduce){ .hero__stage { display: none; } }

/* Filmic grain overlay */
.grain-overlay { position: fixed; inset: 0; z-index: 61; pointer-events: none; opacity: .045; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px; }

/* Cohesive photo grade (re-treat existing imagery) */
.hero__photo, .feature-photo img, .cap-tile img, .proj-card img, .project .pj-bg, .team-photo img {
  filter: saturate(1.08) contrast(1.05) brightness(.985); }
.feature-photo { position: relative; }
.feature-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(10,24,42,0) 46%, rgba(8,18,32,.42)); mix-blend-mode: multiply; }
.feature-photo .badge { z-index: 2; }

.hero__bg { position: absolute; inset: 0; z-index: 0; opacity: .55; }
.hero__grid { position: absolute; inset: 0; z-index: 0; opacity: .25;
  background-image: linear-gradient(rgba(120,170,230,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(120,170,230,.14) 1px, transparent 1px);
  background-size: 60px 60px; mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 80%); }
.hero__overlay { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, rgba(6,14,24,.92) 0%, rgba(6,14,24,.78) 42%, rgba(6,14,24,.35) 72%, rgba(6,14,24,.12) 100%),
  linear-gradient(180deg, rgba(6,14,24,.62) 0%, transparent 26%),
  linear-gradient(0deg, rgba(6,14,24,.6) 0%, transparent 45%); }
.hero .container { position: relative; z-index: 2; padding: 84px 0 84px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 15px 7px 13px; border-radius: 6px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px);
  font-size: .74rem; font-weight: 600; color: #dbe8f5; margin-bottom: 26px; text-transform: uppercase; letter-spacing: .12em;
}
.hero__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-2); box-shadow: 0 0 0 4px rgba(53,184,98,.22); }
.hero__badge b { color:#fff; font-weight: 700; }
.hero h1 { color: #fff; max-width: 20ch; text-shadow: 0 2px 30px rgba(0,0,0,.25); font-size: clamp(2.3rem, 4.4vw, 3.55rem); line-height: 1.04; }
.hero h1 .accent { color: var(--green-2); }
.hero p.sub { font-size: 1.14rem; color: #d3e0ec; max-width: 62ch; margin-top: 24px; line-height: 1.65; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }
.hero__stats { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 28px 52px; margin-top: 54px; border-top: 1px solid rgba(255,255,255,.15); padding-top: 30px; }
.hero__stats .num { font-family: var(--display); font-size: 2.5rem; font-weight: 700; color: #fff; line-height: 1; letter-spacing: -.025em; }
.hero__stats .num .s { color: var(--green-2); }
.hero__stats .lbl { color: #9fb2c4; font-size: .76rem; margin-top: 9px; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.float-card {
  position: absolute; z-index: 2; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px); border-radius: 16px; padding: 16px 18px; color: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.float-card .fc-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--grad-green); }
.float-card .fc-ic svg { width: 22px; height: 22px; stroke: #fff; }
.float-1 { top: 20%; right: 6%; display: flex; align-items: center; gap: 12px; animation: floaty 5s ease-in-out infinite; }
.float-2 { bottom: 26%; right: 15%; display: flex; align-items: center; gap: 12px; animation: floaty 6s ease-in-out infinite .8s; }
.float-card b { display: block; font-family: var(--display); font-size: 1.15rem; }
.float-card span { font-size: .76rem; color: #bcd0e4; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@media (max-width: 900px){ .float-card{ display:none; } }

/* ---------- Page hero (interior) ---------- */
.page-hero {
  position: relative; overflow: hidden; color: #fff; padding: 92px 0 84px;
  background:
    radial-gradient(700px 400px at 85% 0%, rgba(47,165,68,.3), transparent 60%),
    linear-gradient(150deg, #06111d, #0d3468 90%);
}
.page-hero__grid { position:absolute; inset:0; opacity:.18; background-image: linear-gradient(rgba(120,170,230,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,230,.2) 1px,transparent 1px); background-size:52px 52px; mask-image: radial-gradient(circle at 30% 30%, #000, transparent 75%); }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; }
.page-hero p { color: #cfe0f0; max-width: 62ch; font-size: 1.12rem; }
.breadcrumb { color: #93b1cc; font-size: .84rem; margin-bottom: 14px; font-weight: 500; }
.breadcrumb a { color: #cfe0f0; }

/* ---------- Grid helpers ---------- */
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }
.section-head { max-width: 680px; margin-bottom: 54px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 span { display:inline; }

/* ---------- Cards ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px;
  box-shadow: var(--shadow-xs); transition: transform .22s, box-shadow .22s, border-color .22s; position: relative; overflow: hidden;
}
.card::before { content:""; position:absolute; inset:auto 0 0 0; height:3px; background: var(--green); transform: scaleX(0); transform-origin:left; transition: transform .3s; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: #d6dee6; }
.card:hover::before { transform: scaleX(1); }
.card.green::before { background: var(--green); }
.card__icon { width: 54px; height: 54px; border-radius: 12px; display: grid; place-items: center; background: #eef4f0; color: var(--green-deep); margin-bottom: 20px; font-family: var(--display); font-weight: 700; font-size: 1.4rem; transition: background .25s, color .25s; }
.card__icon.green { background: #eef4f0; color: var(--green-deep); }
.card__icon svg { width: 27px; height: 27px; stroke: currentColor; }
.card:hover .card__icon { background: var(--green); color: #fff; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--slate); margin: 0 0 16px; }
.card .more { font-weight: 700; color: var(--green-deep); display: inline-flex; align-items: center; gap: 7px; font-size: .92rem; }
.card .more svg { width: 16px; height: 16px; transition: transform .2s; }
.card:hover .more svg { transform: translateX(5px); }

/* ---------- Stats band ---------- */
.stats-band { background: var(--navy-800); color: #fff; position: relative; overflow: hidden; border-block: 1px solid rgba(255,255,255,.06); }
.stats-band::after { content:""; position:absolute; right:-140px; top:-140px; width:420px; height:420px; border-radius:50%; background: radial-gradient(circle, rgba(31,154,77,.18), transparent 70%); }
.stat { text-align: center; padding: 20px; position: relative; }
.stat + .stat::before { content:""; position:absolute; left:0; top:22%; bottom:22%; width:1px; background: rgba(255,255,255,.1); }
.stat .num { font-family: var(--display); font-size: clamp(2.4rem,4.4vw,3.4rem); font-weight: 700; color: #fff; line-height: 1; letter-spacing: -.02em; }
.stat .num .suffix { color: var(--green-2); }
.stat .lbl { color: #9fb2c4; margin-top: 12px; font-weight: 600; font-size: .84rem; text-transform: uppercase; letter-spacing: .08em; }

/* ---------- Split feature ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; }
.split.rev { grid-template-columns: 1fr 1.05fr; }
.media-panel { border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; position: relative; }
.checklist { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
.checklist li { display: flex; gap: 13px; align-items: flex-start; }
.checklist .tick { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: rgba(47,165,68,.15); color: var(--green); display: grid; place-items: center; margin-top: 2px; }
.checklist .tick svg { width: 15px; height: 15px; stroke: var(--green); }
.checklist b { font-family: var(--display); }

/* ---------- Audience ---------- */
.audience { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 10px; }
.audience .item { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 14px 16px; box-shadow: var(--shadow-xs); transition: transform .18s, box-shadow .2s; }
.audience .item:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.audience .ic { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg,#eaf3ff,#dcecff); color: var(--blue); display: grid; place-items: center; flex: 0 0 auto; }
.audience .ic svg { width: 22px; height: 22px; stroke: var(--blue); }
.audience b { display: block; font-size: .98rem; font-family: var(--display); }
.audience span { color: var(--slate-2); font-size: .8rem; }

/* ---------- Coverage map card ---------- */
.map-card { background: linear-gradient(160deg,#0b1b2b,#123056); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow); }

/* ---------- Process timeline ---------- */
.process { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; position: relative; }
.process .step { position: relative; }
.step .n { width: 56px; height: 56px; border-radius: 16px; background: var(--grad-blue); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1.3rem; box-shadow: var(--glow-blue); margin-bottom: 18px; }
.step:nth-child(even) .n { background: var(--grad-green); box-shadow: var(--glow-green); }
.step h3 { margin-bottom: 6px; }
.step p { color: var(--slate); font-size: .95rem; }
.process .connector { position: absolute; top: 28px; left: 12.5%; right: 12.5%; height: 2px; background: repeating-linear-gradient(90deg,#cdd9e6 0 8px,transparent 8px 16px); z-index: 0; }

/* ---------- Projects ---------- */
.project { border-radius: var(--radius); overflow: hidden; position: relative; min-height: 300px; display: flex; align-items: flex-end; color: #fff; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; }
.project:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.project .pj-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.project:hover .pj-bg { transform: scale(1.06); }
.project .pj-grad { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 20%, rgba(6,17,29,.9) 100%); }
.project .pj-body { position: relative; z-index: 2; padding: 26px; }
.project h3 { color: #fff; margin: 0 0 6px; }
.project p { color: #ccdcec; font-size: .9rem; margin: 0; }
.project .pj-stat { position:absolute; top:22px; right:22px; z-index:2; text-align:right; }
.project .pj-stat b { font-family: var(--display); font-size: 1.7rem; display:block; }
.project .pj-stat span { font-size:.72rem; color:#cfe0f0; }

/* ---------- Testimonials ---------- */
.quote { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-xs); position: relative; }
.quote .mark { font-family: var(--display); font-size: 4rem; line-height: .6; color: var(--green-2); opacity: .35; }
.quote p { font-size: 1.05rem; color: var(--ink); }
.quote .who { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.quote .av { width: 46px; height: 46px; border-radius: 50%; background: var(--grad-blue); color:#fff; display:grid; place-items:center; font-weight:700; font-family: var(--display); }
.quote .who b { display: block; font-size: .95rem; }
.quote .who span { color: var(--slate-2); font-size: .82rem; }
.stars { color: #f5a623; letter-spacing: 2px; margin-bottom: 10px; }

/* ---------- Clients strip ---------- */
.clients { display: flex; flex-wrap: wrap; gap: 40px 56px; align-items: center; justify-content: center; opacity: .8; }
.clients .cl { font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: #7c93a8; letter-spacing: -.01em; display:flex; align-items:center; gap:8px; }
.clients .cl svg { width: 22px; height: 22px; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden; color: #fff; border-radius: var(--radius-lg); padding: 70px; text-align: center;
  background: var(--grad-mix); box-shadow: var(--shadow-lg);
}
.cta-band::before { content:""; position:absolute; inset:0; opacity:.6; background:
  radial-gradient(600px 300px at 82% 20%, rgba(31,154,77,.28), transparent 65%); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #eaf3ff; max-width: 56ch; margin-inline: auto; font-size: 1.1rem; }
.cta-band .btns { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* ---------- Capability tiles (editorial, photo-backed) ---------- */
.cap-tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.cap-tile {
  position: relative; overflow: hidden; border-radius: var(--radius); min-height: 340px;
  display: flex; flex-direction: column; justify-content: flex-end; color: #fff;
  box-shadow: var(--shadow-sm); transition: transform .3s, box-shadow .3s;
}
.cap-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .6s ease; }
.cap-tile::after { content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(6,14,24,.15) 0%, rgba(6,14,24,.55) 55%, rgba(6,14,24,.92) 100%); }
.cap-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.cap-tile:hover img { transform: scale(1.07); }
.cap-tile__body { position: relative; z-index: 2; padding: 30px; }
.cap-tile__num { font-family: var(--display); font-weight: 700; font-size: .8rem; color: var(--green-2); letter-spacing: .1em; }
.cap-tile h3 { color: #fff; margin: 10px 0 8px; font-size: 1.5rem; }
.cap-tile p { color: #cbd7e2; font-size: .95rem; margin: 0 0 16px; max-width: 34ch; }
.cap-tile .tlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; color: #fff; }
.cap-tile .tlink svg { width: 17px; height: 17px; stroke: var(--green-2); transition: transform .2s; }
.cap-tile:hover .tlink svg { transform: translateX(5px); }

/* ---------- Capability list (all trades, clean rows) ---------- */
.cap-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.cap-row { display: flex; align-items: center; gap: 16px; padding: 24px 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .2s; }
.cap-list .cap-row:nth-child(3n) { border-right: 0; }
.cap-list .cap-row:nth-last-child(-n+3) { border-bottom: 0; }
.cap-row:hover { background: var(--bg-soft); }
.cap-row .ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 11px; background: #eef4f0; color: var(--green-deep); display: grid; place-items: center; transition: background .2s, color .2s; }
.cap-row:hover .ic { background: var(--green); color: #fff; }
.cap-row .ic svg { width: 24px; height: 24px; stroke: currentColor; }
.cap-row b { font-family: var(--display); font-size: 1.02rem; display: block; color: var(--ink); }
.cap-row span { color: var(--slate-2); font-size: .86rem; }

/* ---------- Who We Serve / segments ---------- */
.segments { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.seg {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px;
  transition: transform .2s, box-shadow .22s, border-color .22s; position: relative;
}
.seg:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #d6dee6; }
.seg .si { width: 50px; height: 50px; border-radius: 12px; background: var(--navy-800); color: #fff; display: grid; place-items: center; margin-bottom: 18px; }
.seg .si svg { width: 26px; height: 26px; stroke: var(--green-2); }
.seg h3 { font-size: 1.12rem; margin-bottom: 8px; }
.seg p { color: var(--slate); font-size: .9rem; margin: 0; }
.section--navy .seg { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.section--navy .seg:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
.section--navy .seg h3 { color: #fff; }
.section--navy .seg p { color: #a9c2da; }
.section--navy .seg .si { background: rgba(53,184,98,.16); }

/* ---------- Careers / Job board ---------- */
.jobboard { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: start; }
.filters { position: sticky; top: 104px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-xs); }
.filters h4 { margin: 0 0 16px; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--slate); font-family: var(--font); font-weight: 700; }
.filters .field { margin-bottom: 18px; }
.filters label { font-size: .82rem; font-weight: 600; color: var(--slate); display: block; margin-bottom: 7px; }
.filters select, .filters input, .search input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; font: inherit; color: var(--ink); background: #fbfdff;
}
.filters select:focus,.filters input:focus,.search input:focus,.form input:focus,.form textarea:focus,.form select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(20,102,214,.13); background:#fff; }
.search { position: relative; margin-bottom: 24px; }
.search input { padding-left: 42px; }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--slate-2); }
.jobs-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; color: var(--slate); font-size: .92rem; }
.jobs-meta b { color: var(--ink); font-family: var(--display); }
.job-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; margin-bottom: 18px;
  box-shadow: var(--shadow-xs); transition: transform .16s, box-shadow .2s, border-color .2s; position: relative; overflow: hidden;
}
.job-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--grad-blue); }
.job-card.featured::before { background: var(--grad-green); }
.job-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #d3e1f0; }
.job-card__top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.job-card h3 { margin: 0 0 4px; font-size: 1.3rem; }
.job-card h3 a { color: var(--ink); }
.job-card h3 a:hover { color: var(--blue); }
.job-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.tag { font-size: .78rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: #eef3f9; color: #3a5063; display: inline-flex; align-items: center; gap: 6px; }
.tag svg { width: 12px; height: 12px; }
.tag.green { background: rgba(47,165,68,.12); color: #1f7a33; }
.tag.blue { background: rgba(20,102,214,.1); color: var(--blue-dark); }
.badge-featured { background: var(--grad-green); color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; box-shadow: var(--glow-green); }
.job-card p.sum { color: var(--slate); margin: 6px 0 0; }
.pay { font-weight: 700; color: var(--green); font-family: var(--display); }

/* Job detail */
.job-detail { display: grid; grid-template-columns: 1fr 350px; gap: 44px; align-items: start; }
.job-body h3 { margin-top: 30px; color: var(--navy-800); }
.job-body ul { padding-left: 20px; }
.job-body li { margin-bottom: 8px; }
.job-body .lead { margin-bottom: 18px; }
.job-aside { position: sticky; top: 104px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.job-aside .row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: .93rem; }
.job-aside .row:last-of-type { border-bottom: 0; }
.job-aside .row .k { color: var(--slate); }
.job-aside .row .v { font-weight: 700; text-align: right; font-family: var(--display); }

/* ---------- Forms ---------- */
.form { display: grid; gap: 17px; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { font-weight: 600; font-size: .9rem; display: block; margin-bottom: 7px; }
.form label .req { color: #e0483a; }
.form input, .form textarea, .form select { width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; font: inherit; color: var(--ink); background: #fbfdff; }
.form textarea { min-height: 128px; resize: vertical; }
.form .file { border: 1.5px dashed #c3d4e6; border-radius: 12px; padding: 20px; text-align: center; color: var(--slate); cursor: pointer; background: #f8fbff; transition: border-color .2s, background .2s; }
.form .file:hover { border-color: var(--blue); background: #f2f8ff; }
.form .file input { display: none; }
.form-note { font-size: .84rem; color: var(--slate-2); }
.alert { padding: 15px 17px; border-radius: 12px; font-weight: 600; }
.alert.ok { background: rgba(47,165,68,.12); color: #1f7a33; border: 1px solid rgba(47,165,68,.3); }
.alert.err { background: #fdecec; color: #b3261e; border: 1px solid #f4c7c3; }
.card-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow-sm); }

/* ---------- Footer ---------- */
.site-footer { background: linear-gradient(180deg,#081320,#050d16); color: #b3c3d2; padding: 74px 0 28px; position: relative; overflow: hidden; }
.site-footer::before { content:""; position:absolute; left:-120px; top:-120px; width:340px; height:340px; border-radius:50%; background: radial-gradient(circle, rgba(20,102,214,.22), transparent 70%); }
.site-footer .container { position: relative; }
.site-footer .cols { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 44px; }
.site-footer img.flogo { height: 66px; margin-bottom: 18px; }
.site-footer h5 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 18px; font-family: var(--font); font-weight: 700; }
.site-footer a { color: #b3c3d2; display: block; padding: 6px 0; transition: color .18s, transform .18s; }
.site-footer a:hover { color: var(--green-2); transform: translateX(3px); }
.site-footer .contact-line { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 14px; }
.site-footer .contact-line svg { width: 18px; height: 18px; stroke: var(--green-2); flex: 0 0 auto; margin-top: 3px; }
.site-footer .contact-line a, .site-footer .contact-line span { padding: 0; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.09); margin-top: 48px; padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: .85rem; color: #74889a; }
.foot-links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.site-footer .foot-legal { color: #74889a; padding: 0; }
.site-footer a.admin-login {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  color: #d3e6da; font-weight: 700; font-size: .82rem;
  border: 1px solid rgba(53,184,98,.38); background: rgba(53,184,98,.09);
  transition: box-shadow .28s ease, border-color .25s, background .25s, color .2s, transform .2s;
}
.site-footer a.admin-login svg { width: 15px; height: 15px; stroke: var(--green-2); transition: stroke .2s; }
.site-footer a.admin-login:hover {
  color: #fff; transform: translateY(-2px);
  border-color: var(--green-2); background: rgba(53,184,98,.18);
  box-shadow: 0 0 0 4px rgba(53,184,98,.12), 0 8px 26px rgba(53,184,98,.38);
}
.site-footer a.admin-login:hover svg { stroke: #fff; }
.social { display: flex; gap: 10px; margin-top: 14px; }
.social a { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10); display: grid; place-items: center; padding: 0;
  transition: background .2s, transform .2s, border-color .2s; }
.social a:hover { background: #0a66c2; border-color: #0a66c2; transform: translateY(-3px); }
.social svg { width: 19px; height: 19px; fill: #fff; stroke: none; }

/* ---------- Admin ---------- */
.admin-wrap { max-width: 1140px; margin: 0 auto; }
.admin-tabs { display: flex; gap: 8px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.admin-tabs button { background: none; border: 0; padding: 13px 20px; font: inherit; font-weight: 700; color: var(--slate); cursor: pointer; border-bottom: 3px solid transparent; font-family: var(--display); }
.admin-tabs button.active { color: var(--blue); border-bottom-color: var(--blue); }
.stat-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-bottom: 28px; }
.stat-tile { background: #fff; border: 1px solid var(--line); border-radius: 15px; padding: 22px; box-shadow: var(--shadow-xs); position: relative; overflow: hidden; }
.stat-tile::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background: var(--grad-blue); }
.stat-tile:nth-child(3)::before,.stat-tile:nth-child(4)::before { background: var(--grad-green); }
.stat-tile .n { font-size: 2.1rem; font-weight: 700; color: var(--navy-800); font-family: var(--display); }
.stat-tile .l { color: var(--slate); font-size: .85rem; }
table.data { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; box-shadow: var(--shadow-xs); }
table.data th, table.data td { text-align: left; padding: 13px 15px; border-bottom: 1px solid var(--line); font-size: .9rem; }
table.data th { background: var(--bg-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--slate); font-weight: 700; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: #fafcff; }
.pill { font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.pill.open { background: rgba(47,165,68,.14); color: #1f7a33; }
.pill.closed { background: #eef0f2; color: #7a8894; }
.pill.new { background: rgba(20,102,214,.12); color: var(--blue-dark); }
.icon-btn { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px; cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--slate); transition: border-color .18s,color .18s; }
.icon-btn:hover { border-color: var(--blue); color: var(--blue); }
.icon-btn.danger:hover { border-color: #e0483a; color: #e0483a; }
.modal-back { position: fixed; inset: 0; background: rgba(6,17,29,.68); display: none; place-items: center; z-index: 200; padding: 20px; backdrop-filter: blur(3px); }
.modal-back.show { display: grid; }
.modal { background: #fff; border-radius: 20px; padding: 32px; width: min(660px,100%); max-height: 90vh; overflow: auto; box-shadow: var(--shadow-lg); }
.login-card { max-width: 440px; margin: 6vh auto; }

/* reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none} *{animation-duration:.001ms!important;scroll-behavior:auto} }

/* ---------- Mega-menu nav ---------- */
.navitem { position: relative; display: flex; align-items: center; }
.navlink .caret { width: 12px; height: 12px; margin: 0; transition: transform .25s ease; flex: 0 0 auto; }
.navitem.has-mega:hover .caret { transform: rotate(180deg); }
/* full-width mega panel */
.mega {
  position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 200;
  background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .22s ease, transform .26s cubic-bezier(.45,0,.2,1), visibility .22s;
}
.site-header.scrolled .mega { top: 62px; }
.navitem.has-mega:hover .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.navitem.has-mega::after { content: ""; position: absolute; top: 100%; left: -40px; right: -40px; height: 26px; }
.mega-inner { width: min(100% - 44px, 1340px); margin-inline: auto; display: grid; grid-template-columns: 300px 1fr; gap: 34px; padding: 30px 0 34px; }
.mega-feature { border-right: 1px solid var(--line); padding-right: 30px; }
.mega-feature h4 { font-size: 1.35rem; margin: 4px 0 10px; letter-spacing: -.02em; }
.mega-feature p { color: var(--slate); font-size: .92rem; margin: 0 0 16px; }
.mega-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--green-deep); font-size: .92rem; }
.mega-cta svg { width: 16px; height: 16px; transition: transform .2s; }
.mega-cta:hover svg { transform: translateX(4px); }
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mega-link { display: flex; align-items: center; gap: 14px; padding: 15px; border-radius: 12px; position: relative; transition: background .18s; }
.mega-link:hover { background: var(--bg-soft); }
.mega-link .mi { width: 46px; height: 46px; border-radius: 12px; background: #eef4f0; display: grid; place-items: center; flex: 0 0 auto; transition: background .22s, box-shadow .22s; }
.mega-link .mi svg { width: 23px; height: 23px; stroke: var(--green-deep); transition: stroke .22s; }
.mega-link:hover .mi { background: var(--green); box-shadow: 0 8px 18px rgba(31,154,77,.3); }
.mega-link:hover .mi svg { stroke: #fff; }
.mega-link .mt { display: flex; flex-direction: column; gap: 2px; }
.mega-link .mt b { font-family: var(--display); font-size: .96rem; color: var(--ink); line-height: 1.2; }
.mega-link .mt span { font-size: .8rem; color: var(--slate); }
.mega-link .ma { width: 16px; height: 16px; stroke: var(--slate-2); margin-left: auto; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.mega-link:hover .ma { opacity: 1; transform: translateX(0); stroke: var(--green-deep); }

/* ---------- Service detail pages ---------- */
.svc-hero { position: relative; overflow: hidden; color: #fff; padding: 96px 0 88px;
  background: radial-gradient(700px 380px at 82% 0%, rgba(47,165,68,.28), transparent 60%), linear-gradient(150deg, #06111d, #0d3468 92%); }
.svc-hero__grid { position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(120,170,230,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,230,.2) 1px,transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(circle at 30% 30%, #000, transparent 75%); }
.svc-hero .container { position: relative; z-index: 2; }
.svc-hero .svc-ic { width: 66px; height: 66px; border-radius: 16px; background: var(--grad-green); display: grid; place-items: center; margin-bottom: 22px; box-shadow: var(--glow-green); }
.svc-hero .svc-ic svg { width: 34px; height: 34px; stroke: #fff; }
.svc-hero h1 { color: #fff; }
.svc-hero p { color: #cfe0f0; max-width: 60ch; font-size: 1.12rem; }
.svc-layout { display: grid; grid-template-columns: 1fr 300px; gap: 54px; align-items: start; }
.svc-body h2 { margin-top: 6px; }
.svc-body h3 { margin-top: 34px; color: var(--navy-800); }
.svc-cap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; margin: 22px 0 0; list-style: none; padding: 0; }
.svc-cap li { display: flex; gap: 12px; align-items: flex-start; }
.svc-cap .tick { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: rgba(47,165,68,.14); display: grid; place-items: center; margin-top: 2px; }
.svc-cap .tick svg { width: 14px; height: 14px; stroke: var(--green); }
.svc-aside { position: sticky; top: 106px; display: grid; gap: 18px; }
.svc-aside .box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-xs); }
.svc-aside .box h4 { margin: 0 0 14px; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--slate); font-family: var(--font); font-weight: 700; }
.svc-aside .svc-nav a { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line-2); color: var(--ink); font-weight: 600; font-size: .93rem; }
.svc-aside .svc-nav a:last-child { border-bottom: 0; }
.svc-aside .svc-nav a:hover { color: var(--blue); }
.svc-aside .svc-nav a.cur { color: var(--blue); }
.svc-aside .svc-nav a svg { width: 15px; height: 15px; opacity: .5; }
.turnkey { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 26px; counter-reset: tk; }
.turnkey .t { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px; box-shadow: var(--shadow-xs); position: relative; }
.turnkey .t .tn { font-family: var(--display); font-weight: 700; color: var(--blue); font-size: 1.05rem; margin-bottom: 8px; }
.turnkey .t b { display: block; margin-bottom: 4px; }
.turnkey .t p { color: var(--slate); font-size: .88rem; margin: 0; }
@media (max-width: 900px){ .svc-layout { grid-template-columns: 1fr; } .svc-aside { position: static; grid-template-columns: 1fr 1fr; display: grid; } .turnkey { grid-template-columns: 1fr 1fr; } .svc-cap { grid-template-columns: 1fr; } }

/* ---------- Enterprise job board ---------- */
.jb-hero { background: linear-gradient(150deg, #0b1b2b, #123a6e); color: #fff; padding: 66px 0 72px; position: relative; overflow: hidden; }
.jb-hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(47,165,68,.26), transparent 70%); }
.jb-hero .container { position: relative; z-index: 1; }
.jb-hero h1 { color: #fff; }
.jb-hero p { color: #cfe0f0; max-width: 60ch; }
.jb-searchbar { display: flex; gap: 12px; margin-top: 28px; max-width: 720px; }
.jb-searchbar .field { position: relative; flex: 1; }
.jb-searchbar .field svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--slate-2); }
.jb-searchbar input { width: 100%; padding: 15px 16px 15px 46px; border: 0; border-radius: 12px; font: inherit; font-size: 1rem; color: var(--ink); box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.jb-searchbar input:focus { outline: none; box-shadow: 0 0 0 3px rgba(72,200,90,.4); }
.jb-toolbar { position: sticky; top: var(--header-h); z-index: 40; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding: 16px 0; margin-bottom: 8px; }
.jb-toolbar .row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.jb-toolbar select { padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; font: inherit; color: var(--ink); background: #fff; min-width: 160px; }
.jb-toolbar select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(20,102,214,.13); }
.jb-toolbar .count { margin-left: auto; color: var(--slate); font-size: .92rem; }
.jb-toolbar .count b { color: var(--ink); font-family: var(--display); }
.jb-group { margin: 40px 0 8px; }
.jb-group-h { display: flex; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); margin-bottom: 4px; }
.jb-group-h h2 { font-size: 1.35rem; margin: 0; }
.jb-group-h .n { color: var(--slate); font-weight: 600; font-size: .95rem; }
.jb-row { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 22px 4px; border-bottom: 1px solid var(--line); transition: background .15s; }
.jb-row:hover { background: var(--bg-soft); }
.jb-row .jt { font-family: var(--display); font-weight: 700; font-size: 1.12rem; color: var(--ink); margin: 0 0 8px; }
.jb-row a.jt:hover { color: var(--blue); }
.jb-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--slate); font-size: .9rem; }
.jb-meta span { display: inline-flex; align-items: center; gap: 6px; }
.jb-meta svg { width: 15px; height: 15px; stroke: var(--slate-2); }
.jb-row .jb-cta { display: flex; align-items: center; gap: 12px; }
.jb-row .pay-sm { color: var(--ink); font-weight: 700; font-family: var(--display); font-size: .95rem; white-space: nowrap; }
.jb-empty { text-align: center; padding: 60px 20px; color: var(--slate); }
@media (max-width: 720px){ .jb-searchbar { flex-direction: column; } .jb-row { grid-template-columns: 1fr; } .jb-row .jb-cta { justify-content: flex-start; } .jb-toolbar select { min-width: 0; flex: 1; } .jb-toolbar .count { width: 100%; margin: 4px 0 0; } }

/* ---------- Faceted job board ---------- */
.jb-stats { display: flex; gap: 40px; margin-top: 30px; flex-wrap: wrap; }
.jb-stats .s b { font-family: var(--display); font-size: 1.9rem; font-weight: 700; color: #fff; line-height: 1; }
.jb-stats .s span { display: block; color: #9fbdd8; font-size: .82rem; margin-top: 5px; }
.jb-layout { display: grid; grid-template-columns: 288px 1fr; gap: 38px; align-items: start; }
.jb-facets { position: sticky; top: calc(var(--header-h) + 14px); background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; box-shadow: var(--shadow-xs); }
.jb-facets .fh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.jb-facets .fh h3 { font-size: 1.02rem; margin: 0; }
.jb-facets .fclear { background: none; border: 0; color: var(--blue); font-weight: 700; cursor: pointer; font-size: .82rem; padding: 0; }
.facet { border-top: 1px solid var(--line-2); padding: 16px 0; }
.facet h4 { font-size: .76rem; text-transform: uppercase; letter-spacing: .09em; color: var(--slate); margin: 0 0 10px; font-weight: 700; }
.facet label { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; font-size: .91rem; color: var(--ink); }
.facet label:hover { color: var(--blue); }
.facet input { width: 17px; height: 17px; accent-color: var(--blue); cursor: pointer; flex: 0 0 auto; }
.facet .fc { margin-left: auto; color: var(--slate-2); font-size: .8rem; background: var(--bg-soft); padding: 1px 9px; border-radius: 999px; }
.facet label.off { opacity: .4; }

.jb-resbar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line); flex-wrap: wrap; gap: 12px; }
.jb-resbar .rc { color: var(--slate); font-size: .95rem; } .jb-resbar .rc b { color: var(--ink); font-family: var(--display); }
.jb-resbar .sortsel { display: flex; align-items: center; gap: 8px; color: var(--slate); font-size: .9rem; }
.jb-resbar select { padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; font: inherit; background: #fff; }
.jb-resbar select:focus { outline: none; border-color: var(--blue); }

.jbc { display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 14px; padding: 22px 26px; margin-bottom: 14px; transition: transform .15s, box-shadow .2s, border-color .2s; }
.jbc:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #d3e1f0; }
.jbc.feat { border-left-color: var(--green); }
.jbc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.dept-chip { font-size: .7rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--blue-dark); background: rgba(20,102,214,.1); padding: 4px 11px; border-radius: 999px; }
.jbc.feat .dept-chip { color: #1f7a33; background: rgba(47,165,68,.12); }
.feat-star { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--grad-green); padding: 4px 10px; border-radius: 999px; }
.jbc h3 { margin: 0 0 9px; font-size: 1.18rem; }
.jbc h3 a { color: var(--ink); } .jbc h3 a:hover { color: var(--blue); }
.jbc-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--slate); font-size: .88rem; }
.jbc-meta span { display: inline-flex; align-items: center; gap: 6px; } .jbc-meta svg { width: 14px; height: 14px; stroke: var(--slate-2); }
.jbc-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.jbc-side .pay-sm { font-family: var(--display); font-weight: 700; color: var(--ink); white-space: nowrap; }
@media (max-width: 980px){ .jb-layout { grid-template-columns: 1fr; } .jb-facets { position: static; } }
@media (max-width: 720px){ .jbc { grid-template-columns: 1fr; } .jbc-side { align-items: flex-start; text-align: left; flex-direction: row; justify-content: space-between; width: 100%; } .jb-stats { gap: 26px; } }

/* ---------- Customers / logo wall ---------- */
/* legacy grid (kept for any other pages) */
.logo-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1080px; margin: 0 auto; }
.logo-wall .cell { background: #fff; border: 1px solid var(--line); border-radius: 14px; height: 118px; display: grid; place-items: center; box-shadow: var(--shadow-xs); padding: 20px; }
.logo-wall .cell img { max-height: 58px; max-width: 100%; width: auto; object-fit: contain; }

/* ---------- Client / partner logo row ---------- */
/* Logo-wall heading: display type with hairline rules either side. */
.partners-head { display: flex; align-items: center; gap: 28px; max-width: 820px; margin: 0 auto 38px; }
.partners-head::before, .partners-head::after { content: ""; flex: 1; height: 1px; }
.partners-head::before { background: linear-gradient(90deg, transparent, #c9d4df); }
.partners-head::after { background: linear-gradient(90deg, #c9d4df, transparent); }
.partners-head h2 { margin: 0; white-space: nowrap; font-size: clamp(1.75rem, 3vw, 2.4rem); letter-spacing: -.032em; line-height: 1.1; }
@media (max-width: 520px) { .partners-head { gap: 16px; margin-bottom: 28px; } }
.logo-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; max-width: 1140px; margin: 0 auto; }
.mlogo { height: 116px; display: grid; place-items: center; padding: 20px 24px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-xs);
  transition: transform .2s, box-shadow .2s, border-color .2s; }
.mlogo:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: #d6dee6; }
.mlogo img { max-height: 46px; max-width: min(150px, 100%); width: auto; object-fit: contain; }
.mlogo img.sq { max-height: 62px; max-width: min(88px, 100%); }
.mlogo img.lg { max-height: 56px; max-width: min(156px, 100%); }
.mlogo .wm { font-size: 1.9rem; }
@media (max-width: 900px){ .logo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px){ .logo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .mlogo { height: 96px; padding: 16px 14px; } .mlogo .wm { font-size: 1.55rem; } }
.wm { font-family: 'Fredoka', 'Poppins', 'Sora', sans-serif; font-weight: 600; font-size: 2.3rem; letter-spacing: -.01em; line-height: 1; }
.wm-metronet { color: #5EBD3E; } .wm-metronet em { color: #8B4DED; font-style: normal; }
.wm-lumos { color: #4A1E90; }
@media (max-width: 860px){ .logo-wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px){ .logo-wall { grid-template-columns: 1fr; } }

/* ---------- Partners ---------- */
.partner-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-xs); text-align: center; transition: transform .2s, box-shadow .2s; }
.partner-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-sm); }
.partner-card .pic { width: 62px; height: 62px; border-radius: 16px; margin: 0 auto 16px; display: grid; place-items: center; background: linear-gradient(135deg,#eef4fb,#e2edfb); }
.partner-card .pic svg { width: 30px; height: 30px; stroke: var(--blue); }
.partner-card.g .pic { background: linear-gradient(135deg,#ecf9ef,#dcf3e2); }
.partner-card.g .pic svg { stroke: var(--green); }
.partner-card h3 { margin: 0 0 8px; font-size: 1.15rem; }
.partner-card p { color: var(--slate); margin: 0; font-size: .95rem; }

/* ---------- Real photo components ---------- */
.site-footer img.flogo { height: 62px; width: auto; display: block; margin-bottom: 20px; }

.feature-photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.feature-photo img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/3; }
.feature-photo.tall img { aspect-ratio: 3/4; }
.feature-photo.wide img { aspect-ratio: 3/2; }
.feature-photo .badge {
  position: absolute; left: 20px; bottom: 20px; background: rgba(255,255,255,.95); border-radius: 14px; padding: 14px 18px;
  box-shadow: var(--shadow); display: flex; align-items: center; gap: 12px; backdrop-filter: blur(6px);
}
.feature-photo .badge .ic { width: 42px; height: 42px; border-radius: 11px; background: var(--grad-green); display: grid; place-items: center; }
.feature-photo .badge .ic svg { width: 22px; height: 22px; stroke: #fff; }
.feature-photo .badge b { display: block; font-family: var(--display); color: var(--ink); font-size: 1.1rem; line-height: 1; }
.feature-photo .badge span { color: var(--slate); font-size: .8rem; }

/* Service card with photo header */
.pcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-xs); transition: transform .22s, box-shadow .22s; }
.pcard:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.pcard .ph { position: relative; height: 190px; overflow: hidden; }
.pcard .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.pcard:hover .ph img { transform: scale(1.06); }
.pcard .ph .ov { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(6,17,29,.55)); }
.pcard .ph .tag { position: absolute; left: 16px; top: 16px; background: var(--grad-blue); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.pcard .ph .tag.green { background: var(--grad-green); }
.pcard .bd { padding: 24px 26px 28px; }
.pcard h3 { margin: 0 0 8px; }
.pcard p { color: var(--slate); margin: 0; font-size: .96rem; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 150px; gap: 14px; }
.gallery a { position: relative; overflow: hidden; border-radius: 14px; box-shadow: var(--shadow-xs); display: block; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gallery a:hover img { transform: scale(1.08); }
.gallery a::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(6,17,29,.35)); opacity:0; transition:opacity .3s; }
.gallery a:hover::after { opacity:1; }
.gallery .g-lg { grid-column: span 3; grid-row: span 2; }
.gallery .g-md { grid-column: span 3; grid-row: span 1; }
.gallery .g-sm { grid-column: span 2; grid-row: span 1; }
@media (max-width: 900px){ .gallery { grid-template-columns: repeat(2,1fr); grid-auto-rows: 140px; } .gallery .g-lg,.gallery .g-md,.gallery .g-sm { grid-column: span 1; grid-row: span 1; } .gallery .g-lg{ grid-column: span 2; grid-row: span 2; } }

/* ---------- History timeline ---------- */
.timeline { position: relative; max-width: 820px; margin: 0 auto; padding-left: 10px; }
.timeline::before { content:""; position:absolute; left:8px; top:8px; bottom:8px; width:2px; background: linear-gradient(var(--green), var(--line)); }
.tl-item { position: relative; padding: 0 0 34px 34px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content:""; position:absolute; left:0; top:3px; width:17px; height:17px; border-radius:50%; background: var(--white); border:3px solid var(--green); box-shadow: 0 0 0 4px rgba(31,154,77,.12); }
.tl-year { font-family: var(--display); font-weight: 700; color: var(--green-deep); font-size:1.05rem; letter-spacing:-.01em; }
.tl-item h3 { margin:.15em 0 .3em; font-size:1.18rem; }
.tl-item p { color: var(--slate); margin:0; }

/* ---------- Team ---------- */
.team-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }
.team-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-xs); transition: transform .2s, box-shadow .22s; }
.team-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.team-photo { aspect-ratio: 4/3.4; background: linear-gradient(140deg,#12324f,#0b1b2b); display:grid; place-items:center; position:relative; }
.team-photo::after { content:""; position:absolute; inset:0; background: radial-gradient(120px 90px at 70% 10%, rgba(31,154,77,.28), transparent 70%); }
.team-photo .initials { font-family: var(--display); font-weight: 700; font-size:2.5rem; color:#fff; position:relative; z-index:1; letter-spacing:-.02em; }
.team-card .tc-body { padding: 18px 20px 22px; }
.team-card b { font-family: var(--display); font-size:1.05rem; display:block; color:var(--ink); }
.team-card .role { color: var(--green-deep); font-weight:700; font-size:.84rem; margin-top:3px; text-transform:uppercase; letter-spacing:.04em; }
.team-card p { color: var(--slate); font-size:.88rem; margin:11px 0 0; }

/* ---------- Chips & areas ---------- */
.chips { display:flex; flex-wrap:wrap; gap:12px; }
.chip-b { display:inline-flex; align-items:center; gap:9px; padding:11px 17px; border:1px solid var(--line); border-radius:999px; background:#fff; font-weight:600; font-size:.9rem; box-shadow: var(--shadow-xs); }
.chip-b svg { width:16px; height:16px; stroke: var(--green); flex:0 0 auto; }
.area-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
.area-item { display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 20px; box-shadow: var(--shadow-xs); transition: transform .18s, box-shadow .2s; }
.area-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.area-item .st { font-family:var(--display); font-weight: 700; color:#fff; background:var(--green); border-radius:9px; font-size:.92rem; flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center; }
.area-item b { display:block; font-family:var(--display); font-size:1rem; color:var(--ink); }
.area-item span { color:var(--slate); font-size:.85rem; }

/* ---------- Project cards ---------- */
.proj-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.proj-card { position:relative; overflow:hidden; border-radius: var(--radius); min-height: 320px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; box-shadow: var(--shadow-sm); transition: transform .28s, box-shadow .28s; }
.proj-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition: transform .6s; }
.proj-card::after { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(6,14,24,.15), rgba(6,14,24,.55) 55%, rgba(6,14,24,.92)); }
.proj-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.proj-card:hover img { transform: scale(1.07); }
.proj-card .pc-in { position:relative; z-index:2; padding: 26px; }
.proj-card .pc-tag { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background: var(--green); padding:5px 11px; border-radius:999px; margin-bottom:12px; }
.proj-card h3 { color:#fff; margin:0 0 6px; font-size:1.25rem; }
.proj-card p { color:#cbd7e2; font-size:.9rem; margin:0 0 12px; }
.proj-card .pc-stat { display:flex; gap:20px; border-top:1px solid rgba(255,255,255,.16); padding-top:12px; }
.proj-card .pc-stat b { font-family:var(--display); font-size:1.2rem; display:block; }
.proj-card .pc-stat span { font-size:.72rem; color:#aebfce; }

/* ============================================================
   v3 — Immersive homepage systems
   ============================================================ */
/* Industrial numerals */
.stat .num, .hero__stats .num, .proj-card .pc-stat b { font-family: var(--display); font-weight: 600; }

/* --- Section head row --- */
.stack-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom: 34px; flex-wrap:wrap; }

/* --- Operations network map --- */
.netmap-wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: 46px; align-items: center; }
.netmap { position: relative; border-radius: 20px; overflow: hidden; background:
  radial-gradient(640px 380px at 72% 24%, rgba(20,102,214,.25), transparent 65%),
  radial-gradient(520px 360px at 24% 82%, rgba(31,154,77,.2), transparent 65%),
  linear-gradient(150deg, #0a1a2c, #0c2036 55%, #0a1826);
  border: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow); }
.netmap::before { content:""; position:absolute; inset:0; opacity:.16;
  background-image: linear-gradient(rgba(140,180,225,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(140,180,225,.25) 1px, transparent 1px);
  background-size: 46px 46px; mask-image: radial-gradient(circle at 50% 45%, #000 40%, transparent 85%); }
.netmap svg { position: relative; display: block; width: 100%; height: auto; }
.nm-arc { fill: none; stroke: rgba(111,224,160,.5); stroke-width: 1.6; stroke-dasharray: 4 7; animation: nmDash 26s linear infinite; }
@keyframes nmDash { to { stroke-dashoffset: -440; } }
.nm-city { fill: #7cc0ff; }
.nm-city-ring { fill: none; stroke: rgba(124,192,255,.5); animation: nmRing 3.2s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes nmRing { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(2.1); opacity: 0; } }
.nm-hq { fill: var(--green-2); }
.nm-hq-ring { fill: none; stroke: rgba(53,184,98,.65); stroke-width: 1.6; animation: nmRing 2.4s ease-out infinite; transform-origin: center; transform-box: fill-box; }
.nm-label { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; fill: #c8d8e8; letter-spacing: .04em; }
.nm-label.hq { fill: #8fe6b1; font-weight: 700; }
@media (prefers-reduced-motion: reduce){ .nm-arc, .nm-city-ring, .nm-hq-ring { animation: none; } }

/* --- Mega-menu footer strip --- */
.mega-foot { width: min(100% - 44px, 1340px); margin-inline: auto; border-top: 1px solid var(--line);
  padding: 15px 0 20px; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.mega-foot > span { color: var(--slate); font-size: .87rem; }
.mega-foot > span a { color: var(--ink); font-weight: 600; }
.mf-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; color: var(--green-deep); }
.mf-cta svg { width: 16px; height: 16px; transition: transform .2s; }
.mf-cta:hover svg { transform: translateX(4px); }

/* --- Statement footer link --- */
/* Specificity must beat `.site-footer a { display:block }` above, or the two
   halves collapse into inline text and the tagline runs into the headline. */
.site-footer a.foot-hero { display: flex; align-items: center; justify-content: flex-start; gap: 20px;
  flex-wrap: wrap; padding: 6px 0 40px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 48px; }
.site-footer a.foot-hero:hover { transform: none; }
@media (max-width: 720px){ .site-footer a.foot-hero { gap: 8px; } }
.foot-hero span { color: #8ea1b3; font-size: 1rem; font-weight: 600; padding: 0; }
.foot-hero b { font-family: var(--display); font-weight: 600; text-transform: uppercase; color: #fff;
  font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1; display: inline-flex; align-items: center; gap: 18px;
  letter-spacing: .012em; transition: color .25s; }
.foot-hero b svg { width: .82em; height: .82em; stroke: var(--green-2); stroke-width: 2; transition: transform .3s; }
.foot-hero:hover b { color: #8fe6b1; }
.foot-hero:hover b svg { transform: translate(10px, -4px); }

@media (max-width: 1024px){ .netmap-wrap { grid-template-columns: 1fr; } }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .process { grid-template-columns: repeat(2,1fr); }
  .process .connector { display:none; }
  .segments { grid-template-columns: repeat(2,1fr); }
  .team-grid { grid-template-columns: repeat(2,1fr); }
  .area-grid { grid-template-columns: repeat(2,1fr); }
  .proj-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 980px){
  .grid-3 { grid-template-columns: repeat(2,1fr); }
  .proj-grid { grid-template-columns: 1fr; }
  .cap-tiles { grid-template-columns: 1fr; }
  .cap-list { grid-template-columns: 1fr; }
  .cap-list .cap-row { border-right: 0; }
  .cap-list .cap-row:nth-last-child(-n+3):not(:last-child) { border-bottom: 1px solid var(--line); }
  .split, .split.rev { grid-template-columns: 1fr; gap: 38px; }
  .jobboard { grid-template-columns: 1fr; }
  .filters { position: static; }
  .job-detail { grid-template-columns: 1fr; }
  .job-aside { position: static; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
  .stat-row { grid-template-columns: repeat(2,1fr); }
  .audience { grid-template-columns: repeat(2,1fr); }
  .hero__stats { gap: 26px 40px; }
}
@media (max-width: 1040px){
  :root { --header-h: 72px; }
  .nav-toggle { display: block; }
  .nav { position: fixed; inset: 0 0 auto auto; top: 0; right: 0; height: 100dvh; width: min(88vw, 400px);
    flex-direction: column; align-items: stretch; justify-content: flex-start; overflow-y: auto;
    background: #fff; padding: 90px 22px 34px; gap: 3px; transform: translateX(105%);
    transition: transform .34s cubic-bezier(.45,0,.2,1); box-shadow: -24px 0 70px rgba(0,0,0,.20); }
  .nav.open { transform: translateX(0); }
  .nav a.navlink { padding: 14px 12px; font-size: 1.06rem; }
  /* drawer is a light surface — never inherit the overlay's white links */
  .site-header.overlay:not(.scrolled) .nav a.navlink { color: #1e2a36; }
  .site-header.overlay:not(.scrolled) .nav a.navlink:hover,
  .site-header.overlay:not(.scrolled) .nav a.navlink.active { color: var(--green-deep); }
  .site-header.overlay:not(.scrolled) 
  .site-header.overlay:not(.scrolled) 
.nav a.navlink::after, .nav a.navlink::before { display: none; }
  .nav a.navlink.active { background: var(--bg-soft); border-radius: 9px; }
  .navlink .caret { margin-left: auto; }
  .navitem, .navitem.has-mega { flex-direction: column; align-items: stretch; }
  .navitem.has-mega::after { display: none; }
  .mega { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; }
  .mega-inner { display: block; width: auto; padding: 2px 0 8px; }
  .mega-feature { display: none; }
  .mega-grid { grid-template-columns: 1fr; gap: 0; }
  .mega-link { padding: 11px 12px 11px 16px; }
  .mega-link .mi { width: 36px; height: 36px; }
  .mega-link .mi svg { width: 19px; height: 19px; }
  .mega-link .mt span { display: none; }
  .mega-link .ma { display: none; }
  
  
  
  .nav-mobile-extra a { padding: 11px 12px; color: var(--slate); font-weight: 600; font-size: .96rem; }
  .nav-mobile-extra a:hover { color: var(--green-deep); }
}
@media (max-width: 720px){
  .grid-4,.grid-3,.grid-2,.form .two { grid-template-columns: 1fr; }
  .segments { grid-template-columns: 1fr; }
  .team-grid, .area-grid { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; }
  .site-footer .cols { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .cta-band { padding: 40px 24px; }
  .hero__stats { gap: 22px 36px; }
  .audience { grid-template-columns: 1fr; }
  table.data { display: block; overflow-x: auto; white-space: nowrap; }
  .container, .container-wide { width: min(100% - 32px, var(--maxw)); }
}

/* ================= Auth / Portal / Prequal ================= */
.auth-wrap { max-width: 460px; margin: 40px auto; }
.auth-card { background:#fff; border:1px solid var(--line); border-radius:20px; padding:36px; box-shadow:var(--shadow); }
.auth-tabs { display:flex; gap:6px; background:var(--bg-soft); padding:5px; border-radius:12px; margin-bottom:24px; }
.auth-tabs button { flex:1; padding:11px; border:0; background:transparent; border-radius:9px; font:inherit; font-weight:700; color:var(--slate); cursor:pointer; font-family:var(--display); }
.auth-tabs button.active { background:#fff; color:var(--blue); box-shadow:var(--shadow-xs); }

/* status badges */
.stbadge { display:inline-flex; align-items:center; gap:7px; font-size:.78rem; font-weight:700; padding:5px 12px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em; }
.stbadge::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.st-draft{background:#eef0f2;color:#7a8894;} .st-submitted{background:rgba(20,102,214,.12);color:var(--blue-dark);}
.st-under_review{background:rgba(245,166,35,.15);color:#b47600;} .st-approved{background:rgba(47,165,68,.14);color:#1f7a33;}
.st-conditional{background:rgba(245,166,35,.15);color:#b47600;} .st-rejected{background:#fdecec;color:#b3261e;} .st-expired{background:#f0e6e6;color:#8a5a5a;}

/* tier ring */
.tier { width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight: 700;font-size:1.5rem;color:#fff; }
.tier-A{background:var(--grad-green);} .tier-B{background:var(--grad-blue);} .tier-C{background:linear-gradient(135deg,#f0a020,#e07b00);}
.scorebig { font-family:var(--display); font-weight: 700; font-size:2.4rem; line-height:1; }

/* portal wizard */
.pf-layout { display:grid; grid-template-columns:250px 1fr; gap:34px; align-items:start; }
.pf-steps { position:sticky; top:calc(var(--header-h) + 14px); background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow:var(--shadow-xs); }
.pf-steps button { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:none; border:0; padding:11px 12px; border-radius:10px; font:inherit; cursor:pointer; color:var(--slate); font-weight:600; }
.pf-steps button:hover { background:var(--bg-soft); }
.pf-steps button.active { background:rgba(20,102,214,.08); color:var(--blue); }
.pf-steps .sn { width:26px;height:26px;border-radius:50%;background:var(--bg-soft);display:grid;place-items:center;font-size:.8rem;font-weight:700;flex:0 0 auto; }
.pf-steps button.active .sn { background:var(--blue); color:#fff; }
.pf-steps button.done .sn { background:var(--green); color:#fff; }
.pf-panel { background:#fff; border:1px solid var(--line); border-radius:16px; padding:32px; box-shadow:var(--shadow-xs); }
.pf-panel h2 { font-size:1.5rem; margin:0 0 4px; }
.pf-panel .sub { color:var(--slate); margin:0 0 22px; }
.pf-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pf-grid .full { grid-column:1 / -1; }
.pf-field label { display:block; font-weight:600; font-size:.88rem; margin-bottom:6px; }
.pf-field label .req { color:#e0483a; }
.pf-field input, .pf-field select, .pf-field textarea { width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px; font:inherit; background:#fbfdff; }
.pf-field input:focus, .pf-field select:focus, .pf-field textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(20,102,214,.13); background:#fff; }
.pf-field .hint { font-size:.78rem; color:var(--slate-2); margin-top:5px; }
.pf-check { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pf-check label { display:flex; align-items:center; gap:9px; padding:11px 13px; border:1px solid var(--line); border-radius:10px; cursor:pointer; font-size:.92rem; }
.pf-check label:hover { border-color:var(--blue); }
.pf-check input { width:17px;height:17px;accent-color:var(--blue); }
.pf-actions { display:flex; justify-content:space-between; margin-top:26px; gap:12px; }
.repeat-row { display:grid; gap:10px; grid-template-columns:repeat(4,1fr) auto; align-items:center; margin-bottom:10px; }
.repeat-row input { padding:9px 11px; border:1px solid var(--line); border-radius:9px; font:inherit; }
.repeat-row .rm { background:none;border:1px solid var(--line);border-radius:8px;width:36px;height:36px;cursor:pointer;color:var(--slate); }
.repeat-row .rm:hover { border-color:#e0483a;color:#e0483a; }
.doc-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border:1px solid var(--line); border-radius:11px; margin-bottom:10px; background:#fff; }
.doc-row .dt { font-weight:700; font-size:.9rem; }
.doc-row .dn { color:var(--slate); font-size:.82rem; }
.doc-up { border:1.5px dashed #c3d4e6; border-radius:12px; padding:16px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; background:#f8fbff; margin-bottom:18px; }
.doc-up select { padding:10px 12px; border:1px solid var(--line); border-radius:9px; font:inherit; }
.review-sec { border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin-bottom:14px; }
.review-sec h4 { margin:0 0 12px; font-size:.95rem; }
.review-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 24px; font-size:.9rem; }
.review-grid .k { color:var(--slate); } .review-grid .v { font-weight:600; text-align:right; }
.flag { display:flex; gap:8px; align-items:flex-start; color:#b47600; font-size:.88rem; padding:4px 0; }
@media(max-width:900px){ .pf-layout{grid-template-columns:1fr;} .pf-steps{position:static;display:flex;overflow-x:auto;gap:4px;} .pf-steps button{white-space:nowrap;} .pf-grid,.pf-check{grid-template-columns:1fr;} .repeat-row{grid-template-columns:1fr 1fr;} }

/* ================= Command Center Dashboard ================= */
.dash-body { background:#f4f7fb; }
.dash-top { background:#0b1b2b; color:#fff; padding:20px 0; position:sticky; top:0; z-index:50; box-shadow:0 4px 18px rgba(0,0,0,.18); }
.dash-top .container-wide { display:flex; align-items:center; gap:18px; }
.dash-top .logo { height:34px; }
.dash-top h1 { color:#fff; font-size:1.15rem; margin:0; font-family:var(--display); }
.dash-top .who { margin-left:auto; display:flex; align-items:center; gap:14px; color:#9fbdd8; font-size:.85rem; }
.dash-nav { display:flex; gap:4px; }
.dash-nav button { background:none; border:0; color:#cddcec; font:inherit; font-weight:600; padding:8px 14px; border-radius:8px; cursor:pointer; }
.dash-nav button:hover { background:rgba(255,255,255,.08); color:#fff; }
.dash-nav button.active { background:var(--grad-blue); color:#fff; }
.dash-wrap { padding:28px 0 60px; }
.dash-section-title { font-family:var(--display); font-size:1.05rem; font-weight: 700; margin:0 0 16px; color:var(--navy-800); display:flex; align-items:center; gap:10px; }
.dash-section-title .sq { width:6px; height:20px; border-radius:3px; background:var(--grad-blue); }

.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:12px; }
.kpi { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px; box-shadow:var(--shadow-xs); position:relative; overflow:hidden; }
.kpi .kl { color:var(--slate); font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.kpi .kv { font-family:var(--display); font-weight: 700; font-size:2rem; color:var(--navy-800); line-height:1.1; margin-top:6px; }
.kpi .kd { font-size:.8rem; margin-top:4px; color:var(--slate); }
.kpi .kd.up { color:#1f7a33; } .kpi .kd.down { color:#b3261e; }
.kpi .kicon { position:absolute; right:16px; top:16px; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:#eef4fb; }
.kpi .kicon svg { width:19px; height:19px; stroke:var(--blue); }
.kpi.alertred { border-left:4px solid #e0483a; } .kpi.alertamber { border-left:4px solid #f0a020; }

.chart-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:12px; }
.chart-grid.three { grid-template-columns:repeat(3,1fr); }
.chart-card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px 22px; box-shadow:var(--shadow-xs); }
.chart-card h3 { font-size:.98rem; margin:0 0 4px; }
.chart-card .csub { color:var(--slate); font-size:.8rem; margin:0 0 16px; }
.legend { display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:14px; font-size:.82rem; color:var(--slate); }
.legend span { display:inline-flex; align-items:center; gap:7px; }
.legend i { width:11px; height:11px; border-radius:3px; display:inline-block; }
.hbar-row { display:grid; grid-template-columns:130px 1fr 42px; align-items:center; gap:12px; margin-bottom:11px; font-size:.86rem; }
.hbar-row .track { height:12px; background:var(--bg-soft); border-radius:6px; overflow:hidden; }
.hbar-row .fill { height:100%; border-radius:6px; }
.hbar-row .val { text-align:right; font-weight:700; font-family:var(--display); }
.funnel-row { margin-bottom:9px; }
.funnel-row .fl { display:flex; justify-content:space-between; font-size:.84rem; margin-bottom:4px; }
.funnel-row .fbar { height:26px; border-radius:6px; background:var(--grad-blue); display:flex; align-items:center; padding-left:10px; color:#fff; font-weight:700; font-size:.82rem; min-width:34px; }

.alerts-feed { display:grid; gap:10px; }
.alert-item { display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-left:4px solid var(--slate-2); border-radius:11px; padding:13px 16px; }
.alert-item.high { border-left-color:#e0483a; } .alert-item.warn { border-left-color:#f0a020; } .alert-item.info { border-left-color:var(--blue); }
.alert-item .ai { width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;font-size:.8rem;font-weight: 700;color:#fff; }
.alert-item.high .ai { background:#e0483a; } .alert-item.warn .ai { background:#f0a020; } .alert-item.info .ai { background:var(--blue); }
.alert-item .at { font-size:.82rem; color:var(--slate-2); text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.alert-item .atx { font-size:.92rem; color:var(--ink); }

.vfilters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; }
.vfilters input, .vfilters select { padding:10px 12px; border:1px solid var(--line); border-radius:9px; font:inherit; background:#fff; }
.vfilters input { flex:1; min-width:180px; }
.grade-pill { font-family:var(--display); font-weight: 700; font-size:.8rem; width:26px;height:26px;border-radius:7px;display:inline-grid;place-items:center;color:#fff; }
.grade-A{background:#2fa544;} .grade-B{background:#1466d6;} .grade-C{background:#f0a020;} .grade-D{background:#e0483a;}
.ins-dot{width:11px;height:11px;border-radius:50%;display:inline-block;} .ins-green{background:#2fa544;} .ins-yellow{background:#f0a020;} .ins-red{background:#e0483a;}
@media(max-width:1024px){ .kpis{grid-template-columns:repeat(2,1fr);} .chart-grid,.chart-grid.three{grid-template-columns:1fr;} }

/* ================= Enterprise careers table ================= */
.jobtable { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-xs); }
.jobtable thead th { text-align:left; padding:15px 18px; background:#f7fafd; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--slate); font-weight: 700; white-space:nowrap; user-select:none; }
.jobtable thead th.sortable { cursor:pointer; }
.jobtable thead th.sortable:hover { color:var(--blue); }
.jobtable thead th .ar { margin-left:5px; opacity:.35; }
.jobtable thead th.sorted { color:var(--blue); } .jobtable thead th.sorted .ar { opacity:1; }
.jobtable tbody td { padding:17px 18px; border-top:1px solid var(--line); font-size:.92rem; vertical-align:middle; color:var(--slate); }
.jobtable tbody tr { transition:background .12s; }
.jobtable tbody tr:hover { background:#f7fafd; }
.jobtable .jt-title { font-family:var(--display); font-weight:700; font-size:1.02rem; }
.jobtable .jt-title a { color:var(--ink); } .jobtable .jt-title a:hover { color:var(--blue); }
.jt-feat { font-size:.6rem;font-weight: 700;text-transform:uppercase;letter-spacing:.05em;color:#fff;background:var(--grad-green);padding:2px 8px;border-radius:999px;margin-left:8px;vertical-align:middle;box-shadow:var(--glow-green); }
.jt-dept { display:inline-block; font-size:.78rem; color:var(--blue-dark); background:rgba(20,102,214,.09); padding:4px 11px; border-radius:999px; font-weight:600; }
.jt-sub { display:block; color:var(--slate-2); font-size:.8rem; margin-top:3px; }
.jt-apply { display:inline-flex; align-items:center; gap:6px; font-weight:700; color:#fff; background:var(--grad-blue); padding:9px 18px; border-radius:9px; font-size:.86rem; }
.jt-apply:hover { box-shadow:var(--glow-blue); }
.loadmore-wrap { text-align:center; margin-top:26px; }
@media (max-width:860px){
  .jobtable thead { display:none; }
  .jobtable, .jobtable tbody, .jobtable tr, .jobtable td { display:block; width:100%; }
  .jobtable tr { border-top:1px solid var(--line); padding:8px 4px; }
  .jobtable tbody td { border:0; padding:5px 16px; }
  .jobtable tbody td::before { content:attr(data-label); display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--slate-2); font-weight:700; margin-bottom:2px; }
  .jobtable tbody td.no-label::before { display:none; }
}

/* ================= Dark mode ================= */
}
/* white surfaces */
/* keep brand logos legible */
/* keep brand logos legible on dark */
/* text that used navy-800 */
/* inputs */
/* new editorial components */
/* theme toggle button */

.dash-theme{ color:#cddcec; }
.dash-theme:hover{ background:rgba(255,255,255,.1); }
.dash-theme.is-dark{ color:#ffd36b; }
/* back to top */
.to-top{ position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;background:var(--grad-blue);color:#fff;display:grid;place-items:center;box-shadow:var(--glow-blue);cursor:pointer;border:0;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .25s,transform .25s;z-index:90; }
.to-top.show{ opacity:1;transform:none;pointer-events:auto; }
.to-top svg{ width:20px;height:20px;stroke:#fff;fill:none; }
.to-top:hover{ transform:translateY(-3px); }
/* animated hero glow */
.hero__overlay::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(680px 420px at 82% 18%, rgba(47,165,68,.20), transparent 60%),
    radial-gradient(760px 520px at 12% 88%, rgba(20,102,214,.26), transparent 62%);
  opacity:.9; animation:heroGlow 16s ease-in-out infinite alternate; }
@keyframes heroGlow{
  0%{ transform:translate3d(0,0,0) scale(1); opacity:.7; }
  50%{ transform:translate3d(2%,-1.5%,0) scale(1.06); opacity:1; }
  100%{ transform:translate3d(-1.5%,1.5%,0) scale(1.02); opacity:.8; }
}
@media (prefers-reduced-motion:reduce){ .hero__overlay::after{ animation:none; } }

/* ================= Legal / Glossary / Site Map / Licenses ================= */
.legal-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.legal-updated { font-size: .85rem; font-weight: 700; color: var(--slate); text-transform: uppercase; letter-spacing: .1em; }
.legal-flag { font-size: .82rem; color: var(--slate); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; }
.legal-layout { display: grid; grid-template-columns: 260px 1fr; gap: 46px; align-items: start; }
.legal-toc { position: sticky; top: calc(var(--header-h) + 20px); }
.legal-toc .box { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 18px; }
.legal-toc h4 { font-family: var(--display); font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--slate-2); margin: 0 0 12px; }
.toc-links { display: flex; flex-direction: column; }
.toc-links a { font-size: .89rem; color: var(--slate); padding: 7px 0; border-bottom: 1px solid var(--line); line-height: 1.35; transition: color .18s; }
.toc-links a:last-child { border-bottom: 0; }
.toc-links a:hover { color: var(--green-deep); }
.legal-body { max-width: 74ch; }
.legal-sec { padding-bottom: 34px; margin-bottom: 34px; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 24px); }
.legal-sec:last-child { border-bottom: 0; margin-bottom: 0; }
.legal-sec h2 { font-size: clamp(1.15rem, 1.9vw, 1.45rem); margin: 0 0 16px; }
.legal-sec h3 { font-family: var(--display); font-size: 1rem; margin: 24px 0 8px; color: var(--ink); }
.legal-sec p { color: var(--slate); line-height: 1.75; margin: 0 0 14px; }
.legal-list { list-style: none; padding: 0; margin: 4px 0 16px; }
.legal-list li { color: var(--slate); line-height: 1.7; padding: 7px 0 7px 22px; position: relative; }
.legal-list li::before { content: ""; position: absolute; left: 3px; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.legal-card { background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: var(--radius); padding: 20px 22px; color: var(--slate); line-height: 1.8; }

/* Glossary */
.gl-tools { display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 34px; }
.gl-search { position: relative; flex: 1 1 300px; max-width: 420px; }
.gl-search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--slate-2); pointer-events: none; }
.gl-search input { width: 100%; padding: 13px 16px 13px 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; font-size: .95rem; transition: border-color .18s, box-shadow .18s; }
.gl-search input:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 4px rgba(31,154,77,.12); }
.gl-alpha { display: flex; flex-wrap: wrap; gap: 3px; }
.gl-alpha a { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; font-size: .78rem; font-weight: 700; color: var(--slate); transition: background .16s, color .16s; }
.gl-alpha a:hover { background: var(--green); color: #fff; }
.gl-alpha a.off { opacity: .3; pointer-events: none; }
.gl-group { margin-bottom: 40px; scroll-margin-top: calc(var(--header-h) + 24px); }
.gl-letter { font-size: 1.4rem; color: var(--green-deep); border-bottom: 2px solid var(--line); padding-bottom: 10px; margin: 0 0 6px; }
.gl-list { margin: 0; }
.gl-item { padding: 18px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 230px 1fr; gap: 26px; align-items: start; }
.gl-item dt { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 1rem; }
.gl-item dd { margin: 0; color: var(--slate); line-height: 1.7; font-size: .95rem; }
.gl-empty { color: var(--slate); padding: 30px 0; }

/* Site map */
.sm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 34px; }
.sm-group h2 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .1em; color: var(--green-deep); padding-bottom: 12px; border-bottom: 2px solid var(--line); margin: 0 0 6px; }
.sm-list { list-style: none; padding: 0; margin: 0; }
.sm-list li { border-bottom: 1px solid var(--line); }
.sm-list a { display: flex; align-items: center; gap: 10px; padding: 13px 6px; transition: background .16s, padding .16s; border-radius: 8px; }
.sm-list a:hover { background: var(--bg-soft); padding-left: 12px; }
.sm-list b { font-family: var(--display); font-size: .95rem; color: var(--ink); display: block; }
.sm-list span { font-size: .82rem; color: var(--slate); display: block; }
.sm-list a > svg { width: 16px; height: 16px; stroke: var(--slate-2); margin-left: auto; flex: 0 0 auto; }
.sm-list a:hover > svg { stroke: var(--green-deep); }
.sm-note { margin-top: 40px; color: var(--slate); font-size: .92rem; }

/* Licenses */
.lic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.lic-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-sm); }
.lic-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.lic-state { font-family: var(--display); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--slate-2); }
.lic-status { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.lic-status.is-active { background: rgba(31,154,77,.1); color: var(--green-deep); }
.lic-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(31,154,77,.18); }
.lic-card h3 { font-size: 1.35rem; margin: 0 0 20px; }
.lic-meta { margin: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.lic-meta > div { background: var(--bg); padding: 13px 16px; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.lic-meta dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--slate-2); font-weight: 700; flex: 0 0 auto; }
.lic-meta dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; font-size: .93rem; line-height: 1.5; }
.lic-num { font-family: var(--display); font-size: 1.25rem !important; font-weight: 700 !important; color: var(--green-deep) !important; letter-spacing: .02em; }
.lic-verify { margin: 16px 0 0; font-size: .85rem; color: var(--slate); }
.lic-card--add { background: var(--bg-soft); border-style: dashed; display: flex; flex-direction: column; align-items: flex-start; }
.lic-add-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); display: grid; place-items: center; margin-bottom: 16px; }
.lic-add-ic svg { width: 22px; height: 22px; stroke: var(--green-deep); }
.lic-card--add p { color: var(--slate); line-height: 1.7; margin: 0 0 20px; font-size: .95rem; }

/* Footer legal links */
.site-footer .foot-legal { display: flex; flex-wrap: wrap; gap: 4px 0; align-items: center; }
.site-footer .foot-legal a { color: #74889a; padding: 0 12px; border-right: 1px solid rgba(255,255,255,.14); line-height: 1; transition: color .18s; }
.site-footer .foot-legal a:last-child { border-right: 0; padding-right: 0; }
.site-footer .foot-legal a:hover { color: #fff; }

@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; gap: 26px; }
  .legal-toc { position: static; }
  .gl-item { grid-template-columns: 1fr; gap: 6px; }
  .gl-alpha { display: none; }
}

/* =====================================================================
   EDITORIAL SYSTEM — replaces icon-chip cards and the decorative map
   ===================================================================== */

/* ---- Capability index: numbered rows, no icons ---- */
.cap-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cap-index li { border-bottom: 1px solid var(--line); }
.cap-index a {
  display: grid; grid-template-columns: 74px minmax(200px, 1.05fr) 1.5fr 34px;
  align-items: center; gap: 10px; padding: 26px 14px 26px 4px;
  position: relative; transition: padding-left .3s cubic-bezier(.2,.7,.2,1);
}
.cap-index a::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--green); transform: scaleY(0); transform-origin: bottom;
  transition: transform .34s cubic-bezier(.2,.7,.2,1);
}
.cap-index a:hover { padding-left: 22px; }
.cap-index a:hover::before { transform: scaleY(1); transform-origin: top; }
.cx-num { font-family: var(--display); font-size: .82rem; font-weight: 700; letter-spacing: .1em; color: var(--slate-2); transition: color .24s; }
.cap-index a:hover .cx-num { color: var(--green-deep); }
.cx-name { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -.012em; font-size: clamp(1.05rem, 1.7vw, 1.42rem); line-height: 1.1; color: var(--ink); }
.cx-desc { color: var(--slate); font-size: .93rem; line-height: 1.55; }
.cx-go { justify-self: end; width: 26px; height: 26px; opacity: 0; transform: translateX(-8px); transition: opacity .26s, transform .26s; }
.cx-go svg { width: 26px; height: 26px; stroke: var(--green-deep); }
.cap-index a:hover .cx-go { opacity: 1; transform: translateX(0); }
.section--navy .cap-index, .section--navy .cap-index li { border-color: rgba(255,255,255,.12); }
.section--navy .cx-name { color: #fff; }
.section--navy .cx-desc { color: #a9c2da; }
.section--navy .cap-index a:hover { background: rgba(255,255,255,.03); }

/* ---- Audience columns: hairline-divided, no icon chips ---- */
.aud-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.aud { padding: 32px 30px 8px; border-left: 1px solid var(--line); }
.aud:first-child { border-left: 0; padding-left: 0; }
.aud-i { font-family: var(--display); font-size: .74rem; font-weight: 700; letter-spacing: .16em; color: var(--green-deep); display: block; margin-bottom: 16px; }
.aud h3 { font-size: 1.06rem; margin: 0 0 10px; line-height: 1.25; }
.aud p { color: var(--slate); font-size: .91rem; margin: 0; line-height: 1.6; }
.section--navy .aud-cols, .section--navy .aud { border-color: rgba(255,255,255,.13); }
.section--navy .aud-i { color: var(--green-2); }
.section--navy .aud h3 { color: #fff; }
.section--navy .aud p { color: #a9c2da; }

/* ---- Editorial cards: index number instead of an icon chip ---- */
.card-n { display: block; font-family: var(--display); font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; color: var(--green-deep); margin-bottom: 18px; }
.card-n::after { content: ""; display: block; width: 26px; height: 2px; background: var(--green); margin-top: 10px; opacity: .5; transition: width .3s ease, opacity .3s; }
.card:hover .card-n::after { width: 46px; opacity: 1; }
.section--navy .card-n { color: var(--green-2); }

/* ---- Tile-grid US map: real coverage, no invented routes ---- */
.cov-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 54px; align-items: center; }
.cov-map { display: grid; grid-template-columns: repeat(11, 1fr); gap: 5px; }
.cov-cell { aspect-ratio: 1; border-radius: 5px; display: grid; place-items: center;
  font-family: var(--display); font-size: clamp(.5rem, .78vw, .68rem); font-weight: 700; letter-spacing: .02em; }
.cov-cell.on { background: rgba(53,184,98,.17); border: 1px solid rgba(53,184,98,.32); color: #b6f0cd; }
.cov-cell.hq { background: var(--green); border: 1px solid var(--green-2); color: #fff; box-shadow: 0 0 0 3px rgba(53,184,98,.22); }
.cov-cell.off { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07); color: #4d637a; }
.cov-cell.void { visibility: hidden; }
.cov-key { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; font-size: .82rem; color: #a9c2da; }
.cov-key span { display: inline-flex; align-items: center; gap: 9px; }
.cov-key i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.cov-key i.k-hq { background: var(--green); }
.cov-key i.k-on { background: rgba(53,184,98,.17); border: 1px solid rgba(53,184,98,.32); }
.cov-key i.k-off { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.09); }

/* ---- Partner rows (replaces icon-chip partner cards) ---- */
.prt-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.prt-index li { border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 74px minmax(180px,.9fr) 1.6fr; gap: 10px; align-items: baseline; padding: 26px 4px; }
.prt-index .p-i { font-family: var(--display); font-size: .78rem; font-weight: 700; letter-spacing: .12em; color: var(--slate-2); }
.prt-index h3 { font-size: 1.05rem; margin: 0; }
.prt-index p { color: var(--slate); font-size: .92rem; margin: 0; line-height: 1.6; }
.section--navy .prt-index, .section--navy .prt-index li { border-color: rgba(255,255,255,.12); }
.section--navy .prt-index h3 { color: #fff; }
.section--navy .prt-index p { color: #a9c2da; }

/* ---- Service page hero: label instead of a gradient icon tile ---- */
.svc-kicker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px; font-family: var(--display); font-size: .76rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--green-2); }
.svc-kicker::before { content: ""; width: 42px; height: 2px; background: var(--green-2); }

/* ---- Mega menu: plain text list, no icon squares ---- */
.mega-grid { grid-template-columns: repeat(3, 1fr); gap: 2px; }
.mega-link { display: block; padding: 12px 14px; border-radius: 9px; position: relative; }
.mega-link .mt { display: block; }
.mega-link .mt b { font-family: var(--display); font-size: .94rem; color: var(--ink); line-height: 1.25; display: block; transition: color .18s; }
.mega-link .mt span { font-size: .79rem; color: var(--slate-2); display: block; margin-top: 2px; }
.mega-link:hover .mt b { color: var(--green-deep); }
.mega-link .ma { display: none; }

@media (max-width: 1024px) {
  .cov-wrap { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 860px) {
  .cap-index a { grid-template-columns: 46px 1fr; row-gap: 6px; padding: 20px 4px; }
  .cx-desc { grid-column: 2; }
  .cx-go { display: none; }
  .aud-cols { grid-template-columns: 1fr; }
  .aud { border-left: 0; border-top: 1px solid var(--line); padding: 26px 0 6px; }
  .aud:first-child { border-top: 0; }
  .section--navy .aud { border-color: rgba(255,255,255,.13); }
  .prt-index li { grid-template-columns: 40px 1fr; row-gap: 6px; }
  .prt-index p { grid-column: 2; }
}
.cx-name .lc { text-transform: lowercase; }
.cov-map { grid-template-columns: repeat(12, 1fr); gap: 5px; }
.cov-cell { font-size: clamp(.48rem, .72vw, .64rem); }
.cov-cell.on { color: #cdf5de; }
.aud-cols { border-bottom: 1px solid var(--line); }
.section--navy .aud-cols { border-bottom-color: rgba(255,255,255,.13); }
.aud { padding-bottom: 30px; }

/* ================= Interactive U.S. coverage map ================= */
.usmap { display: grid; grid-template-columns: 1.55fr .78fr; gap: 44px; align-items: center; }
.usmap__viz { position: relative; }
.usmap__svg { width: 100%; height: auto; display: block; overflow: visible; }
.us-st {
  fill: #16324a; stroke: #0a1826; stroke-width: 1; cursor: pointer; outline: none;
  transition: fill .22s ease, filter .22s ease;
}
.us-st.is-off { fill: #0f1d2b; stroke: #0a1826; cursor: default; }
.us-st.is-hq { fill: #1a7f45; }
.us-st.is-on:hover, .us-st.is-on:focus-visible { fill: var(--green-2); filter: drop-shadow(0 0 9px rgba(53,184,98,.9)); }
.us-st.is-hq:hover, .us-st.is-hq:focus-visible { fill: #4ad47c; filter: drop-shadow(0 0 13px rgba(74,212,124,.95)); }
.us-st.is-off:hover, .us-st.is-off:focus-visible { fill: #1b2c3d; }
.usmap__states:hover .us-st.is-on:not(:hover) { fill: #14293d; }

.usmap__hq { pointer-events: none; }
.hq-dot { fill: #6ff0a4; stroke: #05131f; stroke-width: 1.4; }
.hq-ring { fill: none; stroke: #6ff0a4; stroke-width: 1.4; opacity: 0; transform-origin: center; transform-box: fill-box; animation: hqPulse 2.8s cubic-bezier(.2,.6,.3,1) infinite; }
.hq-ring--2 { animation-delay: 1.4s; }
@keyframes hqPulse { 0% { transform: scale(.55); opacity: .85; } 70% { opacity: 0; } 100% { transform: scale(3.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hq-ring { animation: none; } }

.usmap__tip {
  position: absolute; transform: translate(14px, -140%); pointer-events: none; z-index: 3;
  background: rgba(6,16,26,.94); border: 1px solid rgba(111,240,164,.28); color: #eaf4ff;
  padding: 6px 12px; border-radius: 8px; font-size: .82rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
}
.usmap__panel { display: flex; flex-direction: column; gap: 18px; }
.usmap__read, .usmap__hqcard {
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius); padding: 22px 24px;
}
.usmap__read { border-left: 3px solid var(--green); }
.um-label { display: block; font-family: var(--display); font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #7e97ae; margin-bottom: 10px; }
.um-name { display: block; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; font-size: 1.5rem; line-height: 1.1; color: #fff; margin-bottom: 10px; }
.um-status { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; }
.um-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.um-status--on { color: #8fe6b1; } .um-status--on::before { background: var(--green-2); box-shadow: 0 0 0 3px rgba(53,184,98,.2); }
.um-status--hq { color: #b9f5d1; } .um-status--hq::before { background: #6ff0a4; box-shadow: 0 0 0 3px rgba(111,240,164,.25); }
.um-status--off { color: #7e97ae; } .um-status--off::before { background: #46617a; }
.usmap__hqcard strong { display: block; font-family: var(--display); color: #fff; font-size: 1.02rem; margin-bottom: 5px; }
.usmap__hqcard span:last-child { font-size: .84rem; color: #a9c2da; }
.usmap__key { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: .82rem; color: #a9c2da; }
.usmap__key li { display: flex; align-items: center; gap: 10px; }
.usmap__key i { width: 13px; height: 13px; border-radius: 3px; flex: 0 0 auto; }
.usmap__key .k-hq { background: #1a7f45; box-shadow: 0 0 0 1px #6ff0a4 inset; }
.usmap__key .k-on { background: #16324a; }
.usmap__key .k-off { background: #0f1d2b; box-shadow: 0 0 0 1px rgba(255,255,255,.09) inset; }

/* Coverage map: active markets vs states available for mobilization */
.us-st.is-active { fill: #1a6b3d; }
.us-st.is-active:hover, .us-st.is-active:focus-visible { fill: var(--green-2); filter: drop-shadow(0 0 9px rgba(53,184,98,.9)); }
.usmap__states:hover .us-st.is-active:not(:hover) { fill: #14402a; }
.usmap__key .k-act { background: #1a6b3d; box-shadow: 0 0 0 1px rgba(111,240,164,.5) inset; }
.section:not(.section--navy) .usmap .us-st.is-active { fill: #6fc08d; }
.section:not(.section--navy) .usmap__key .k-act { background: #6fc08d; box-shadow: none; }
.section:not(.section--navy) .usmap__key .k-hq { background: #1a7f45; }


/* light-surface variant (service areas page) */
.section:not(.section--navy) .usmap .us-st { fill: #d7e2ec; stroke: #fff; }
.section:not(.section--navy) .usmap .us-st.is-off { fill: #eaeff4; }
.section:not(.section--navy) .usmap .us-st.is-hq { fill: var(--green); }
.section:not(.section--navy) .usmap .us-st.is-on:hover { fill: var(--green-2); }
.section:not(.section--navy) .usmap__states:hover .us-st.is-on:not(:hover) { fill: #cfdbe6; }
.section:not(.section--navy) .usmap__read,
.section:not(.section--navy) .usmap__hqcard { background: var(--bg-soft); border-color: var(--line); }
.section:not(.section--navy) .um-name, .section:not(.section--navy) .usmap__hqcard strong { color: var(--ink); }
.section:not(.section--navy) .um-label { color: var(--slate-2); }
.section:not(.section--navy) .usmap__key, .section:not(.section--navy) .usmap__hqcard span:last-child { color: var(--slate); }
.section:not(.section--navy) .um-status--on { color: var(--green-deep); }
.section:not(.section--navy) .um-status--off { color: var(--slate-2); }
.section:not(.section--navy) .usmap__key .k-on { background: #d7e2ec; }
.section:not(.section--navy) .usmap__key .k-off { background: #eaeff4; }

@media (max-width: 1024px) { .usmap { grid-template-columns: 1fr; gap: 28px; } .usmap__panel { flex-direction: row; flex-wrap: wrap; } .usmap__read, .usmap__hqcard { flex: 1 1 240px; } }
@media (max-width: 620px) { .usmap__panel { flex-direction: column; } }

/* ---- Compact homepage "what we do" band ---- */
.dobar { display: grid; grid-template-columns: 1fr .92fr; gap: 60px; align-items: center; }
.dobar h2 { margin: 0 0 18px; }
.dobar .lead { margin-bottom: 28px; }
.dolist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; border-top: 1px solid var(--line); }
.dolist a { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 2px; border-bottom: 1px solid var(--line);
  font-family: var(--display); font-weight: 700; font-size: .96rem; color: var(--ink);
  transition: color .18s, padding-left .24s cubic-bezier(.2,.7,.2,1); }
.dolist a::after { content: "→"; color: var(--slate-2); opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; font-weight: 400; }
.dolist a:hover { color: var(--green-deep); padding-left: 10px; }
.dolist a:hover::after { opacity: 1; transform: translateX(0); color: var(--green-deep); }
@media (max-width: 900px) { .dobar { grid-template-columns: 1fr; gap: 34px; } .dolist { grid-template-columns: 1fr; } }

/* =====================================================================
   AUTH SHELL — product-grade sign-in for portal, staff and dashboard
   ===================================================================== */
body.auth-body { background: var(--bg); }
.authx { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }

.authx__brand {
  position: relative; overflow: hidden; padding: 46px 54px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(155deg, #071624 0%, #0b2237 46%, #0a3a2a 100%);
  color: #fff;
}
.authx__brand::before {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: linear-gradient(rgba(140,190,240,.07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(140,190,240,.07) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 30% 25%, #000 10%, transparent 78%);
}
.authx__brand::after {
  content: ""; position: absolute; width: 620px; height: 620px; right: -220px; bottom: -260px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(31,154,77,.34), transparent 66%);
}
.authx__brand > * { position: relative; z-index: 1; }
.authx__logo img { height: 46px; width: auto; }
.authx__pitch h2 { color: #fff; font-size: clamp(1.7rem, 2.6vw, 2.5rem); margin: 0 0 18px; }
.authx__pitch p { color: #a9c2da; font-size: 1.02rem; line-height: 1.7; max-width: 44ch; margin: 0 0 30px; }
.authx__pts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.authx__pts li { display: flex; gap: 14px; align-items: flex-start; color: #cddcec; font-size: .93rem; line-height: 1.55; }
.authx__pts svg { width: 19px; height: 19px; stroke: var(--green-2); flex: 0 0 auto; margin-top: 2px; }
.authx__foot { display: flex; gap: 22px; flex-wrap: wrap; font-size: .8rem; color: #6f88a0; }
.authx__foot a { color: #6f88a0; }
.authx__foot a:hover { color: #fff; }

.authx__panel { display: flex; align-items: center; justify-content: center; padding: 46px 40px; }
.authx__inner { width: 100%; max-width: 412px; }
.authx__back { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--slate); margin-bottom: 34px; transition: color .18s; }
.authx__back:hover { color: var(--green-deep); }
.authx__back svg { width: 15px; height: 15px; }
.authx__inner h1 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin: 0 0 8px; }
.authx__sub { color: var(--slate); font-size: .94rem; margin: 0 0 30px; line-height: 1.6; }

.authx__tabs { display: inline-flex; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 11px; padding: 4px; margin-bottom: 26px; width: 100%; }
.authx__tabs button {
  flex: 1; border: 0; background: none; cursor: pointer; padding: 9px 16px; border-radius: 8px;
  font: inherit; font-size: .88rem; font-weight: 700; color: var(--slate); transition: background .2s, color .2s, box-shadow .2s;
}
.authx__tabs button.active { background: var(--bg); color: var(--ink); box-shadow: var(--shadow-xs); }

.authx .form > div { margin-bottom: 18px; }
.authx label { display: block; font-size: .8rem; font-weight: 700; color: var(--ink); margin-bottom: 7px; letter-spacing: .01em; }
.authx input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--ink); font: inherit; font-size: .95rem;
  transition: border-color .18s, box-shadow .18s;
}
.authx input:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 4px rgba(31,154,77,.13); }
.authx input::placeholder { color: var(--slate-2); }
.authx .btn { width: 100%; justify-content: center; margin-top: 4px; }
.authx .form-note { font-size: .8rem; color: var(--slate); margin: 7px 0 0; }
.authx__alt { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--slate); text-align: center; line-height: 1.8; }
.authx__alt a { color: var(--green-deep); font-weight: 600; }
.authx__secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; font-size: .76rem; color: var(--slate-2); }
.authx__secure svg { width: 13px; height: 13px; stroke: var(--slate-2); }

@media (max-width: 940px) {
  .authx { grid-template-columns: 1fr; min-height: auto; }
  .authx__brand { padding: 34px 26px 40px; }
  .authx__pitch h2 { font-size: 1.5rem; }
  .authx__pts, .authx__foot { display: none; }
  .authx__panel { padding: 36px 24px 56px; }
}

/* =====================================================================
   APP SHELL — admin + command center
   ===================================================================== */
body.app-body { background: var(--bg-soft); }
.appx { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }

.appx__side {
  background: #071624; color: #cddcec; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; border-right: 1px solid rgba(255,255,255,.07);
}
.appx__brand { padding: 22px 22px 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.appx__brand img { height: 34px; width: auto; display: block; }
.appx__nav { padding: 16px 12px; flex: 1; overflow-y: auto; }
.appx__navlabel { font-family: var(--display); font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #5c7590; padding: 14px 10px 8px; }
.appx__nav button, .appx__nav a.navbtn {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; font: inherit; font-size: .89rem; font-weight: 600;
  color: #9db3c8; padding: 10px 12px; border-radius: 9px; margin-bottom: 2px;
  transition: background .16s, color .16s;
}
.appx__nav button svg, .appx__nav a.navbtn svg { width: 17px; height: 17px; stroke: currentColor; flex: 0 0 auto; }
.appx__nav button:hover, .appx__nav a.navbtn:hover { background: rgba(255,255,255,.05); color: #fff; }
.appx__nav button.active { background: rgba(31,154,77,.18); color: #8fe6b1; box-shadow: inset 2px 0 0 var(--green-2); }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--grad-green, #1f9a4d); color: #fff; font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
tr.lead-unread td:first-child { box-shadow: inset 3px 0 0 var(--green-2, #2fa544); }
tr.lead-unread td b { font-weight: 700; }
.appx__user { padding: 16px; border-top: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; gap: 11px; }
.appx__avatar { width: 34px; height: 34px; border-radius: 9px; background: var(--grad-green); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: .78rem; color: #fff; flex: 0 0 auto; }
.appx__user div b { display: block; font-size: .84rem; color: #fff; font-family: var(--display); }
.appx__user div span { font-size: .74rem; color: #7e97ae; }

.appx__main { display: flex; flex-direction: column; min-width: 0; }
.appx__top {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 20px 30px; background: var(--bg); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.appx__title h1 { font-size: 1.28rem; margin: 0; }
.appx__title p { margin: 3px 0 0; font-size: .84rem; color: var(--slate); }
.appx__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.appx__body { padding: 26px 30px 46px; }

.appx .stat-row { grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; }
.appx .admin-tabs { border-bottom: 1px solid var(--line); margin-bottom: 20px; }

.tbl-wrap { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-xs); }
.tbl-wrap table.data { border: 0; border-radius: 0; box-shadow: none; }
.tbl-wrap .tbl-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.tbl-wrap .tbl-head h3 { margin: 0; font-size: .98rem; }
table.data th { position: sticky; top: 0; z-index: 1; }
table.data tbody tr { transition: background .14s; }
.appx select, .appx input[type="search"], .appx input[type="text"] {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg);
  color: var(--ink); font: inherit; font-size: .88rem;
}
.appx select:focus, .appx input:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px rgba(31,154,77,.12); }
.pill.warn { background: rgba(214,150,20,.14); color: #9a6a05; }
.pill.danger { background: rgba(224,72,58,.13); color: #b3352a; }

@media (max-width: 980px) {
  .appx { grid-template-columns: 1fr; }
  .appx__side { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; }
  .appx__nav { display: flex; gap: 4px; padding: 10px; }
  .appx__nav button, .appx__nav a.navbtn { width: auto; white-space: nowrap; margin: 0; }
  .appx__navlabel, .appx__user { display: none; }
  .appx__top, .appx__body { padding-left: 18px; padding-right: 18px; }
}

/* Auth and app shells are full-bleed — no room for the site header offset. */
body.auth-body, body.app-body, body.dash-body { padding-top: 0; }
body.auth-body .authx, body.dash-body .authx { min-height: 100vh; }

/* ---- Leadership: role index (real functions, no invented names) ---- */
.lead-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); columns: 2; column-gap: 54px; }
.lead-row { display: flex; gap: 18px; align-items: baseline; padding: 20px 2px; border-bottom: 1px solid var(--line); break-inside: avoid; }
.lead-row .lr-i { font-family: var(--display); font-size: .74rem; font-weight: 700; letter-spacing: .12em; color: var(--slate-2); flex: 0 0 auto; }
.lead-row b { font-family: var(--display); font-size: 1rem; color: var(--ink); display: block; margin-bottom: 5px; }
.lead-row p { color: var(--slate); font-size: .89rem; margin: 0; line-height: 1.6; }
.lead-note { margin-top: 38px; background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: var(--radius); padding: 24px 26px; }
.lead-note b { font-family: var(--display); display: block; margin-bottom: 8px; color: var(--ink); }
.lead-note p { color: var(--slate); margin: 0; line-height: 1.7; font-size: .94rem; }
@media (max-width: 820px) { .lead-index { columns: 1; } }

/* ---- History: undated build narrative ---- */
.hist-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 0; border-top: 1px solid var(--line); }
.hist-step { padding: 30px 28px 26px; border-left: 1px solid var(--line); position: relative; }
.hist-step:first-child { border-left: 0; padding-left: 0; }
.hist-step::before { content: ""; position: absolute; top: -1px; left: 0; width: 46px; height: 3px; background: var(--green); }
.hist-step:first-child::before { left: 0; }
.hist-step b { font-family: var(--display); display: block; font-size: 1.02rem; margin-bottom: 10px; color: var(--ink); }
.hist-step p { color: var(--slate); font-size: .92rem; line-height: 1.65; margin: 0; }
@media (max-width: 760px) { .hist-step { border-left: 0; border-top: 1px solid var(--line); padding: 26px 0; } .hist-step:first-child { border-top: 0; } }

/* ---- Careers: values + benefits band ---- */
.cv-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border-top: 1px solid rgba(255,255,255,.14); margin-bottom: 54px; }
.cv-item { padding: 28px 26px 24px; border-left: 1px solid rgba(255,255,255,.14); }
.cv-item:first-child { border-left: 0; padding-left: 0; }
.cv-i { font-family: var(--display); font-size: .72rem; font-weight: 700; letter-spacing: .16em; color: var(--green-2); display: block; margin-bottom: 14px; }
.cv-item b { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; font-size: 1.18rem; color: #fff; display: block; margin-bottom: 9px; }
.cv-item p { color: #a9c2da; font-size: .9rem; line-height: 1.65; margin: 0; }

.ben-block { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); padding: 38px 40px; }
.ben-head { margin-bottom: 26px; }
.ben-head h3 { color: #fff; font-size: 1.5rem; margin: 0; }
.ben-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 44px; }
.ben-list li { padding: 16px 0; border-top: 1px solid rgba(255,255,255,.1); }
.ben-list .cb-t { display: block; font-family: var(--display); font-weight: 700; color: #fff; font-size: .96rem; margin-bottom: 4px; }
.ben-list .cb-t::before { content: "— "; color: var(--green-2); }
.ben-list .cb-d { display: block; color: #a9c2da; font-size: .86rem; line-height: 1.55; padding-left: 18px; }
.ben-note { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); color: #7e97ae; font-size: .82rem; line-height: 1.6; }
@media (max-width: 900px) { .cv-grid { grid-template-columns: 1fr 1fr; } .cv-item { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); padding: 24px 0; } .ben-list { grid-template-columns: 1fr; } .ben-block { padding: 28px 22px; } }
@media (max-width: 560px) { .cv-grid { grid-template-columns: 1fr; } }

/* ================= Alabama facilities map ================= */
.almap { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
.almap__viz { position: relative; }
.almap__svg { width: 100%; height: auto; max-height: 720px; display: block; }
.al-co { fill: #12293e; stroke: rgba(140,180,220,.16); stroke-width: .6; }
.al-outline { fill: none; stroke: rgba(111,240,164,.5); stroke-width: 1.6; stroke-linejoin: round; }
.al-hit { fill: transparent; cursor: pointer; }
.al-dot { fill: var(--green-2); stroke: #051320; stroke-width: 1.8; pointer-events: none; transition: r .18s ease, fill .18s ease; }
.al-pin.is-hq .al-dot { fill: #fff; stroke: var(--green); stroke-width: 3; }
.al-pin.is-office .al-dot { fill: #8fe6b1; }
.al-pin { outline: none; }
.al-pin.on .al-dot { fill: #fff; r: 8; filter: drop-shadow(0 0 8px rgba(111,240,164,.95)); }
.al-pulse { fill: none; stroke: var(--green-2); stroke-width: 1.4; opacity: 0; transform-origin: center; transform-box: fill-box; animation: alPulse 2.9s cubic-bezier(.2,.6,.3,1) infinite; }
@keyframes alPulse { 0% { transform: scale(.4); opacity: .8; } 70% { opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .al-pulse { animation: none; } }

.almap__tip { position: absolute; transform: translate(16px, -50%); pointer-events: none; z-index: 4;
  background: rgba(5,17,28,.96); border: 1px solid rgba(111,240,164,.3); border-radius: 9px; padding: 9px 13px;
  box-shadow: 0 12px 30px rgba(0,0,0,.55); max-width: 250px; }
.almap__tip b { display: block; color: #fff; font-family: var(--display); font-size: .86rem; margin-bottom: 3px; }
.almap__tip span { display: block; color: #a9c2da; font-size: .76rem; line-height: 1.45; }

.almap__side { display: flex; flex-direction: column; }
.almap__count { font-family: var(--display); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #7e97ae; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 4px; }
.almap__count b { color: var(--green-2); font-size: 1.05rem; }
.almap__list { list-style: none; margin: 0; padding: 0; max-height: 640px; overflow-y: auto; }
.al-item { padding: 15px 14px 15px 16px; border-bottom: 1px solid rgba(255,255,255,.09); cursor: default; position: relative; transition: background .16s; outline: none; }
.al-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--green-2); transform: scaleY(0); transition: transform .2s; }
.al-item.on { background: rgba(255,255,255,.045); }
.al-item.on::before { transform: scaleY(1); }
.al-kind { display: block; font-family: var(--display); font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #6f88a0; margin-bottom: 5px; }
.al-item.is-hq .al-kind { color: var(--green-2); }
.al-item b { display: block; font-family: var(--display); color: #fff; font-size: .95rem; margin-bottom: 3px; }
.al-addr { display: block; color: #a9c2da; font-size: .8rem; line-height: 1.45; }
@media (max-width: 900px) { .almap { grid-template-columns: 1fr; gap: 28px; } .almap__list { max-height: none; } }

/* ---- Portal specifics ---- */
.appx__nav a.navbtn.is-current { background: rgba(31,154,77,.18); color: #8fe6b1; box-shadow: inset 2px 0 0 var(--green-2); }
.appx__body .pf-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; }
.appx__body .pf-step { flex: 1 1 120px; padding: 12px 14px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); font-size: .82rem; font-weight: 700; color: var(--slate); position: relative; }
.appx__body .pf-step.done { border-color: rgba(31,154,77,.4); color: var(--green-deep); }
.appx__body .pf-step.cur { border-color: var(--green); box-shadow: 0 0 0 3px rgba(31,154,77,.12); color: var(--ink); }
.pf-panel { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 30px; box-shadow: var(--shadow-xs); }
.pf-panel h3 { margin-top: 0; }
.pq-progress { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; margin: 6px 0 22px; }
.pq-progress i { display: block; height: 100%; background: var(--grad-green); border-radius: 99px; transition: width .4s ease; }
#statusArea .pill { display: inline-block; }

/* =====================================================================
   FIBER BUILD SCHEMATIC — scroll-driven technical cross-section
   ===================================================================== */
.schem { --p: 0; }
.schem__stage { position: relative; }
.schem__svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Every drawn element reveals by unrolling its own stroke. `--a` and `--b`
   define the progress window in which that element draws. */
.schem__svg [style*="--len"] {
  stroke-dasharray: var(--len);
  stroke-dashoffset: calc(var(--len) * (1 - clamp(0, (var(--p) - var(--a, 0)) / var(--w, .2), 1)));
}

.s-soil { opacity: calc(.35 + .65 * clamp(0, var(--p) * 4, 1)); }
.s-grade { stroke: rgba(150,190,225,.55); stroke-width: 2; --a: 0; --w: .08; }
.s-strata line { stroke: rgba(150,190,225,.12); stroke-width: 1; stroke-dasharray: 5 9; }
.s-strata { opacity: calc(.4 + .6 * clamp(0, var(--p) * 3, 1)); }

.s-road rect { fill: #1b3348; stroke: rgba(150,190,225,.4); stroke-width: 1.2; }
.s-road-c { stroke: rgba(230,200,90,.75); stroke-width: 2; stroke-dasharray: 16 12; }
.s-road { opacity: calc(.3 + .7 * clamp(0, var(--p) * 5, 1)); }

.s-note { fill: #6f8ba4; font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  opacity: calc(.25 + .75 * clamp(0, (var(--p) - .04) * 4, 1)); }

.s-pit { fill: none; stroke: rgba(150,190,225,.5); stroke-width: 1.6; --a: .02; --w: .1; }
.s-rig { fill: #16324a; stroke: var(--green-2); stroke-width: 1.8; opacity: clamp(0, var(--p) * 7, 1); }
.s-rig-boom { stroke: var(--green-2); stroke-width: 2.4; --a: .04; --w: .08; }

/* 01 bore → 02 conduit → 03 cable, each on the same profile */
.s-bore    { fill: none; stroke: #6f8ba4; stroke-width: 2; stroke-dasharray: var(--len); --a: .03; --w: .16; opacity: .85; }
.s-conduit { fill: none; stroke: #35b862; stroke-width: 8; stroke-linecap: round; --a: .20; --w: .15; opacity: .5; }
.s-cable   { fill: none; stroke: #b6f0cd; stroke-width: 2.4; stroke-linecap: round; --a: .36; --w: .18; }
.s-head { fill: #fff; stroke: var(--green-2); stroke-width: 2.5; opacity: 0; filter: drop-shadow(0 0 7px rgba(111,240,164,.9)); }

.s-dim line { stroke: rgba(150,190,225,.35); stroke-width: 1; stroke-dasharray: 3 5; }
.s-dim { opacity: calc(clamp(0, (var(--p) - .12) * 5, 1) * .9); }

.s-vault rect { fill: #16324a; stroke: rgba(150,190,225,.55); stroke-width: 1.6; }
.s-vault line { stroke: rgba(150,190,225,.4); stroke-width: 1.2; }
.s-vault { opacity: clamp(0, (var(--p) - .48) * 8, 1); }
.s-splice { fill: #6ff0a4; stroke: none; opacity: clamp(0, (var(--p) - .56) * 9, 1);
  filter: drop-shadow(0 0 9px rgba(111,240,164,.95)); }

.s-riser { fill: none; stroke: #b6f0cd; stroke-width: 2.4; stroke-linejoin: round; --a: .62; --w: .1; }
.s-pole line { stroke: #7d94aa; stroke-width: 3.4; stroke-linecap: round; }
.s-pole { opacity: clamp(0, (var(--p) - .60) * 8, 1); }
.s-strand { fill: none; stroke: #b6f0cd; stroke-width: 2.4; --a: .68; --w: .12; }
.s-drop   { fill: none; stroke: #b6f0cd; stroke-width: 2.2; stroke-linejoin: round; --a: .80; --w: .13; }

.s-home path, .s-home rect { fill: #16324a; stroke: rgba(150,190,225,.55); stroke-width: 1.6; }
.s-home { opacity: clamp(0, (var(--p) - .74) * 7, 1); }
.s-ont { fill: #0a1826 !important; stroke: var(--green-2) !important; }
.s-home .s-ont { filter: drop-shadow(0 0 calc(10px * clamp(0, (var(--p) - .9) * 12, 1)) rgba(111,240,164,.9)); }

/* stage index */
.schem__steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
  border-top: 1px solid rgba(255,255,255,.13); }
.schem__step { padding: 20px 18px 4px; border-left: 1px solid rgba(255,255,255,.13); position: relative;
  opacity: .34; transition: opacity .4s ease; }
.schem__step:first-child { border-left: 0; padding-left: 0; }
.schem__step.on { opacity: 1; }
.schem__step::before { content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 0; background: var(--green-2);
  transition: width .45s cubic-bezier(.2,.7,.2,1); }
.schem__step.on::before { width: 100%; }
.ss-n { font-family: var(--display); font-size: .68rem; font-weight: 700; letter-spacing: .18em; color: #6f8ba4; display: block; margin-bottom: 9px; }
.schem__step.cur .ss-n { color: var(--green-2); }
.schem__step b { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -.01em;
  font-size: 1.05rem; color: #fff; display: block; margin-bottom: 7px; }
.ss-d { color: #a9c2da; font-size: .83rem; line-height: 1.55; display: block; }

.schem.is-static .schem__step, .is-static .schem__step { opacity: 1; }

@media (max-width: 1080px) { .schem__steps { grid-template-columns: repeat(3, 1fr); }
  .schem__step:nth-child(4) { border-left: 0; padding-left: 0; }
  .schem__step:nth-child(n+4) { border-top: 1px solid rgba(255,255,255,.13); margin-top: 8px; } }
@media (max-width: 620px) { .schem__steps { grid-template-columns: 1fr 1fr; }
  .schem__step:nth-child(odd) { border-left: 0; padding-left: 0; } }

/* ================= Content manager ================= */
.cms-loading, .cms-muted { color: var(--slate-2); font-size: .88rem; }
.cms-group { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 26px 28px; margin-bottom: 20px; box-shadow: var(--shadow-xs); }
.cms-group__head { margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.cms-group__head h3 { margin: 0 0 5px; font-size: 1.02rem; }
.cms-group__head p { margin: 0; color: var(--slate-2); font-size: .84rem; }
.cms-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.cms-field { display: block; }
.cms-field textarea { grid-column: 1 / -1; }
.cms-fields > .cms-field:has(textarea) { grid-column: 1 / -1; }
.cms-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .78rem; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.cms-field input, .cms-field textarea, .pf-panel input, .pf-panel select, .pf-panel textarea {
  width: 100%; padding: 10px 13px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg); color: var(--ink); font: inherit; font-size: .9rem; transition: border-color .16s, box-shadow .16s;
}
.cms-field textarea { resize: vertical; line-height: 1.6; }
.cms-field input:focus, .cms-field textarea:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px rgba(31,154,77,.12); }
.cms-reset { background: none; border: 0; cursor: pointer; font: inherit; font-size: .72rem; font-weight: 700; color: var(--slate-2); padding: 0; }
.cms-reset:hover { color: var(--green-deep); }
.cms-saved { font-size: .82rem; font-weight: 700; color: var(--green-deep); }

.cms-count { display: block; font-size: .7rem; color: var(--slate-2); margin-top: 4px; }
.cms-count.warn { color: #b3352a; }
table.data .seo-t, table.data .seo-d { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: .84rem; background: var(--bg); color: var(--ink); }

.cms-chart { width: 100%; height: 170px; display: block; }
.cc-area { fill: rgba(31,154,77,.13); stroke: none; }
.cc-line { fill: none; stroke: var(--green); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cms-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cms-bar { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); background: rgba(31,154,77,.1); z-index: 0; }
table.data td { position: relative; }
table.data td > .cms-bar + * { position: relative; }
.kpi-delta { display: block; font-size: .74rem; font-weight: 700; margin-top: 6px; }
.kpi-delta.up { color: var(--green-deep); }
.kpi-delta.down { color: #b3352a; }

.cms-toggle { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; border-top: 1px solid var(--line); cursor: pointer; }
.cms-toggle:first-of-type { border-top: 0; }
.cms-toggle input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green); flex: 0 0 auto; }
.cms-toggle span { font-size: .86rem; color: var(--slate); line-height: 1.5; }
.cms-toggle b { display: block; color: var(--ink); font-family: var(--display); font-size: .92rem; margin-bottom: 3px; }
.pf-panel h3 { margin: 0 0 18px; font-size: 1.02rem; }
.alert.ok { background: rgba(31,154,77,.1); color: var(--green-deep); padding: 10px 14px; border-radius: 9px; font-size: .86rem; }
.alert.err { background: rgba(224,72,58,.1); color: #b3352a; padding: 10px 14px; border-radius: 9px; font-size: .86rem; }

@media (max-width: 900px) { .cms-fields, .cms-two { grid-template-columns: 1fr; } }

/* `hidden` must win over component display rules */
[hidden] { display: none !important; }

/* CMS metric tiles (kept separate from the marketing .stat styles) */
.cms-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.cms-kpi { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; box-shadow: var(--shadow-xs); }
.ck-l { display: block; font-family: var(--display); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-2); margin-bottom: 10px; }
.ck-v { display: block; font-family: var(--display); font-weight: 700; font-size: 1.7rem; line-height: 1; color: var(--ink); word-break: break-word; }
@media (max-width: 1000px) { .cms-kpis { grid-template-columns: 1fr 1fr; } }

/* =====================================================================
   MOTION — restrained, purposeful
   ===================================================================== */

/* Cross-document view transitions: navigating between pages cross-fades
   instead of flashing white. Progressive enhancement — browsers without
   support simply navigate as before. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vtOut .16s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: vtIn  .26s cubic-bezier(0,0,.2,1) both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn  { from { opacity: 0; transform: translateY(6px); } }

/* The header is the same object on every page — hold it still across the
   transition so only the content below changes. */
.site-header { view-transition-name: site-header; }
.site-footer { view-transition-name: site-footer; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Reveal timing: shorter and firmer than the original easing. */
.reveal { transition: opacity .52s ease, transform .52s cubic-bezier(.2,.7,.2,1); }
.reveal.d1 { transition-delay: .06s } .reveal.d2 { transition-delay: .12s }
.reveal.d3 { transition-delay: .18s } .reveal.d4 { transition-delay: .24s }

/* ---- Unified console: segmented control + clickable KPI ---- */
.rec-seg { display: inline-flex; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 11px; padding: 4px; margin-bottom: 22px; }
.rec-seg button { border: 0; background: none; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 700; color: var(--slate); padding: 9px 20px; border-radius: 8px; transition: background .18s, color .18s, box-shadow .18s; }
.rec-seg button.on { background: var(--bg); color: var(--ink); box-shadow: var(--shadow-xs); }
.cms-kpi--link { text-align: left; cursor: pointer; font: inherit; transition: border-color .16s, transform .16s, box-shadow .16s; }
.cms-kpi--link:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* Media library */
.media-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.media-aspect { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; color: var(--slate); }
.media-aspect select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: .86rem; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.media-card { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.media-thumb { aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: var(--bg-soft); }
.media-meta { padding: 10px 12px 6px; }
.media-name { font-size: .84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-actions { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px 12px; margin-top: auto; }
.media-grid.picker { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); max-height: 60vh; overflow-y: auto; }
.media-card.pick { cursor: pointer; text-align: left; padding: 0; font: inherit; transition: border-color .14s, transform .14s, box-shadow .14s; }
.media-card.pick:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* Branding / theme editor */
.clr-row { display: flex; align-items: center; gap: 10px; }
.clr-row input[type=color] { width: 46px; height: 38px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.clr-row input[type=text] { width: 130px; font-family: ui-monospace, SFMono-Regular, monospace; text-transform: lowercase; }
.theme-preview { margin-top: 24px; padding: 20px; border: 1px dashed var(--line); border-radius: 12px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Member / association logos on white tiles in the footer */
.footer-members { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.fmember { background: #fff; border-radius: 12px; padding: 14px 20px; display: inline-flex; align-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.32); transition: transform .2s ease, box-shadow .2s ease; }
.fmember:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.45); }
.fmember img { height: 56px; width: auto; display: block; image-rendering: auto; }

/* Field crew band — photo blended into the navy background */
.crew-band { position: relative; background: #0a1826 url('../img/field-crew-band.jpg') center/cover no-repeat; }
.crew-band__inner { min-height: 520px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right; padding-top: 64px; padding-bottom: 64px; }
.crew-band h2 { color: #fff; max-width: 600px; }
.crew-band p { color: #a9c2da; max-width: 500px; font-size: 1.06rem; line-height: 1.7; margin: 0 0 26px; }
.crew-band .btns { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
/* The band stacks its content hard right, so the placeholder has to sit in that
   column rather than centre itself across the photo. */
.crew-band .tbd { max-width: 520px; margin: 0 0 26px; text-align: right; }
@media (max-width: 820px) {
  .crew-band { background-position: 26% center; }
  .crew-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, #0a1826 36%, rgba(10,24,38,.35)); }
  .crew-band__inner { position: relative; z-index: 1; min-height: 460px; align-items: flex-end; }
  .crew-band h2 { font-size: 2.1rem; }
}

/* 811 Safe Digging Partner — damage-prevention callout on the Safety page */
.split-811 { display: flex; gap: 34px; align-items: center; max-width: 900px; margin: 0 auto; }
.safety-811 { width: 172px; height: auto; flex: 0 0 auto; }
@media (max-width: 640px) { .split-811 { flex-direction: column; text-align: center; gap: 20px; } }

/* Responsiveness safeguard: media never overflows its container on small screens */
img, svg, video, canvas { max-width: 100%; }
.container { overflow-x: clip; }

/* Keep the mobile drawer readable after the desktop menu refinements. */
@media (max-width: 1040px) {
  .site-header .nav .mega-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .site-header .nav .mega-inner { width: 100%; min-width: 0; }
  .site-header .nav .mega-link { min-width: 0; padding: 12px; }
  .site-header .nav .mega-link .mt span, .site-header .nav .mega-foot { display: none; }
  .site-header .nav { overflow-x: hidden; }
  .site-header.overlay .nav-toggle:not(.on) span { background: #fff; }
  .site-header .nav-toggle.on span { background: #132635; }
}


/* ---- Awaiting real copy -------------------------------------------------
   Deliberate placeholder for sections where invented narrative was removed.
   Reads as intentional rather than broken, and each one names what belongs
   there so it is obvious what to write. Delete the block when the copy lands. */
.tbd { border: 1px dashed var(--line); border-radius: var(--radius-lg); background: var(--bg-soft);
  padding: 40px 34px; text-align: center; max-width: 720px; margin-inline: auto; }
.tbd-tag { display: inline-flex; align-items: center; gap: 9px; font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--green-deep); margin-bottom: 14px; }
.tbd-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.tbd p { color: var(--slate); font-size: 1.02rem; line-height: 1.6; margin: 0; }
.tbd--dark { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.04); }
.tbd--dark .tbd-tag { color: var(--green-2); }
.tbd--dark p { color: #a9c2da; }
@media (max-width: 560px){ .tbd { padding: 30px 22px; } }


/* ---- Embedded HubSpot form ------------------------------------------------
   Scoped to .form-panel so it only touches the embed. HubSpot may render the
   form inside a shadow root depending on the portal's settings; if it does,
   these rules are ignored and the form keeps HubSpot's own theme. The panel
   sizing below applies either way and stops the layout jumping on load. */
.form-panel { padding: 30px 30px 34px; }
@media (max-width: 560px){ .form-panel { padding: 24px 20px 26px; } }
.form-panel > h3 { margin: 0 0 20px; font-size: 1.22rem; }
.form-panel .hs-form-frame { min-height: 420px; }

.form-panel .hs-form-field { margin-bottom: 16px; }
.form-panel .hs-form-field > label { display: block; font-size: .84rem; font-weight: 700;
  color: var(--ink); margin-bottom: 7px; letter-spacing: -.005em; }
.form-panel .hs-field-desc { font-size: .8rem; color: var(--slate-2); margin-bottom: 7px; }
.form-panel .hs-input,
.form-panel input[type=text], .form-panel input[type=email], .form-panel input[type=tel],
.form-panel input[type=number], .form-panel select, .form-panel textarea {
  width: 100%; box-sizing: border-box; font-family: var(--font); font-size: .96rem;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px; transition: border-color .18s, box-shadow .18s; }
.form-panel .hs-input:focus, .form-panel textarea:focus, .form-panel select:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(20,85,158,.13); }
.form-panel textarea { min-height: 130px; resize: vertical; }
.form-panel .hs-form-required { color: #c0392b; }
.form-panel .hs-error-msg, .form-panel .hs-error-msgs label { color: #c0392b; font-size: .82rem; }
.form-panel ul.hs-error-msgs { list-style: none; margin: 6px 0 0; padding: 0; }
.form-panel .inputs-list { list-style: none; margin: 0; padding: 0; }
.form-panel .hs-form-booleancheckbox label,
.form-panel .hs-form-checkbox label, .form-panel .hs-form-radio label {
  display: flex; gap: 9px; align-items: flex-start; font-weight: 400;
  font-size: .9rem; color: var(--slate); }
.form-panel .hs-form-booleancheckbox input, .form-panel .hs-form-checkbox input,
.form-panel .hs-form-radio input { width: auto; margin-top: 3px; flex: 0 0 auto; }
.form-panel .hs-richtext { font-size: .88rem; color: var(--slate); line-height: 1.6; }
.form-panel .hs-button, .form-panel input[type=submit] {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  font-family: var(--font); font-weight: 700; font-size: .96rem; padding: 14px 26px;
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--green-deep); color: #fff; box-shadow: var(--glow-green);
  transition: background .2s, transform .16s; margin-top: 6px; }
.form-panel .hs-button:hover, .form-panel input[type=submit]:hover {
  background: #12652f; transform: translateY(-2px); }
.form-panel .submitted-message { color: var(--slate); font-size: 1rem; line-height: 1.7; }

/* ---------- Console: Documents (private download links) ---------- */
.doc-note { border-radius: 12px; padding: 14px 17px; margin-bottom: 18px; font-size: .9rem; line-height: 1.55; }
.doc-note.warn { background: #fff7e8; border: 1px solid #f3d79b; color: #7a5410; }
.doc-scroll { overflow-x: auto; }
.doc-table { min-width: 880px; border: 0; border-radius: 0; box-shadow: none; }
.doc-table td { vertical-align: middle; }
.doc-table .doc-name { display: block; color: var(--ink); font-weight: 650; line-height: 1.35; }
.doc-table .doc-sub { display: block; color: var(--slate); font-size: .78rem; margin-top: 3px; }
.doc-table tr.is-off .doc-name, .doc-table tr.is-off .doc-link input { color: #98a4ae; }
.doc-link { display: flex; gap: 8px; align-items: center; min-width: 300px; }
.doc-link input { flex: 1; min-width: 0; font: 500 .8rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #34495d; background: var(--bg-soft, #f6f8fa); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; }
.doc-link input:focus { outline: 2px solid rgba(20,85,158,.25); outline-offset: 1px; }
.doc-num b { font-size: 1rem; }
.doc-actions { text-align: right; white-space: nowrap; }
.doc-actions > * { vertical-align: middle; }
.doc-menu { position: relative; display: inline-block; margin-left: 6px; }
.doc-menu > summary { list-style: none; cursor: pointer; }
.doc-menu > summary::-webkit-details-marker { display: none; }
.doc-menu__list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 236px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(16,29,41,.14); padding: 6px; text-align: left; }
.doc-menu__list button { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 9px 11px; font: 600 .86rem/1.3 inherit; font-family: inherit; color: var(--ink); cursor: pointer; }
.doc-menu__list button span { display: block; font-weight: 500; font-size: .74rem; color: var(--slate); margin-top: 2px; }
.doc-menu__list button:hover { background: var(--bg-soft, #f6f8fa); }
.doc-menu__list button.danger { color: #b3261e; border-top: 1px solid var(--line-2); border-radius: 0 0 8px 8px; margin-top: 4px; }
.doc-table tr.doc-cat td { background: var(--bg-soft); color: var(--slate); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 10px 15px; }
.doc-table tbody tr.doc-cat:hover { background: var(--bg-soft); }

/* ---------- Staff sign-in (logo, two fields, one button) ---------- */
.signin { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--bg-soft); }
.signin__card { width: 100%; max-width: 360px; display: grid; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 36px 30px 30px; box-shadow: var(--shadow-sm); }
.signin__logo { display: block; width: 150px; height: auto; margin: 0 auto 16px; }
.signin input { width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; font: inherit; color: var(--ink); background: #fbfdff; }
.signin input::placeholder { color: var(--slate-2, #8a97a3); }
.signin input:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 4px rgba(31,154,77,.13); }
.signin .btn { width: 100%; justify-content: center; margin-top: 4px; }
.signin #loginMsg:empty { display: none; }
.signin #loginMsg .alert { margin-top: 2px !important; font-size: .86rem; }

/* ---------- Staff console: single Documents dashboard ---------- */
.dash-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 28px; background: #fff; border-bottom: 1px solid var(--line); }
.dash-top__logo { display: block; height: 46px; width: auto; }
.dash-top__actions { display: flex; align-items: center; gap: 10px; }
.dash-main { max-width: 1240px; margin: 0 auto; padding: 30px 28px 60px; }
.dash-title { font-size: 1.5rem; margin: 0 0 20px; }
.dash-main #docMsg .alert { margin-top: 16px !important; }
@media (max-width: 640px) {
  .dash-top { padding: 12px 16px; }
  .dash-top__logo { height: 38px; }
  .dash-main { padding: 22px 16px 48px; }
}