/* =====================================================================
   NextField Energy Solutions Corp. — Design System & Global Styles
   Palette derived from brand mark: deep navy, charcoal, steel/slate gray,
   teal (sustainability/tech accent), amber (action/energy accent).
   ===================================================================== */

:root {
  /* Brand colors */
  --navy-900: #0B121F;   /* deepest background */
  --navy-800: #10192B;   /* primary page background */
  --navy-700: #152238;   /* panels, header */
  --navy-600: #1C2E4A;   /* elevated panels */
  --steel-500: #3A5A78;  /* steel blue accent band */
  --steel-300: #7C8896;  /* muted text on dark */
  --steel-200: #9AA5B1;  /* secondary text on dark */
  --slate-100: #E8ECEF;  /* light text / hairlines on dark */
  --white: #FFFFFF;

  --teal-500: #12817C;   /* primary brand accent — sustainability/tech */
  --teal-400: #1FB8AE;
  --teal-100: #D7F0EC;

  --amber-500: #E8A33D;  /* action accent — CTAs, energy */
  --amber-400: #F4B94F;
  --amber-100: #FCE9C9;

  --ink-900: #101820;    /* text on light surfaces */
  --surface-light: #F5F7F9;

  /* Type */
  --font-head: 'Manrope', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

  /* Spacing / shape */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-pad: clamp(3.5rem, 8vw, 7rem);
  --maxw: 1240px;

  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: .6s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
body, h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

body {
  font-family: var(--font-body);
  background: var(--navy-800);
  color: var(--slate-100);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 800; line-height: 1.15; color: var(--white); letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
p { color: var(--steel-200); }
p.lead { font-size: 1.15rem; color: var(--slate-100); max-width: 46ch; }

/* ---------- Accessibility helpers ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--amber-500); color: var(--navy-900); padding: .75rem 1.25rem; font-weight: 700; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--amber-400); outline-offset: 2px; border-radius: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--amber-400); outline-offset: 3px; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: var(--section-pad) 0; }
.section-light { background: var(--surface-light); color: var(--ink-900); }
.section-light h2, .section-light h3 { color: var(--ink-900); }
.section-light p { color: #45525E; }
.section-steel { background: linear-gradient(135deg, var(--steel-500), var(--navy-700)); }
.section-panel { background: var(--navy-700); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-head); font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  color: var(--amber-500); text-transform: uppercase; margin-bottom: 1rem;
}
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--amber-500); display: inline-block; }
.section-head { max-width: 720px; margin-bottom: 3rem; }
.section-head.center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: var(--gutter); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  padding: .9rem 1.6rem; border-radius: var(--radius-sm);
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
  white-space: nowrap;
}
.btn-primary { background: var(--amber-500); color: var(--navy-900); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--amber-400); transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(232,163,61,.5); }
.btn-outline { border: 1.5px solid var(--steel-300); color: var(--white); }
.btn-outline:hover, .btn-outline:focus-visible { border-color: var(--teal-400); color: var(--teal-400); transform: translateY(-2px); }
.btn-ghost { color: var(--teal-400); font-weight: 700; }
.btn-ghost:hover { color: var(--teal-100); gap: .75rem; }
.btn-sm { padding: .6rem 1.1rem; font-size: .85rem; }
.btn-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }

/* ---------- Header ---------- */
.utility-bar { background: var(--navy-900); font-size: .82rem; color: var(--steel-300); }
.utility-bar .container { display: flex; justify-content: space-between; align-items: center; height: 38px; }
.utility-bar a { display: inline-flex; align-items: center; gap: .4rem; }
.utility-bar a:hover { color: var(--teal-400); }
.utility-left, .utility-right { display: flex; gap: 1.5rem; align-items: center; }
.utility-right .lock { color: var(--amber-500); }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(16,25,43,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: padding .3s var(--ease);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 92px; transition: height .3s var(--ease); }
.site-header.is-compact .container { height: 66px; }
.logo img { height: 76px; width: auto; }
.site-header.is-compact .logo img { height: 60px; }

/* .primary-nav is the <nav> wrapper; wp_nav_menu() renders a <ul><li><a>
   structure inside it (not bare <a> tags), so the <ul>/<li> must be the
   flex row — styling only .primary-nav left <li>s at default browser
   block-level, which stacked the menu vertically even on wide screens. */
.primary-nav { display: flex; align-items: center; gap: 2.1rem; }
.primary-nav ul { display: flex; align-items: center; gap: 2.1rem; list-style: none; margin: 0; padding: 0; }
.primary-nav li { display: flex; align-items: center; }
.primary-nav a { font-family: var(--font-head); font-weight: 600; font-size: .92rem; color: var(--slate-100); position: relative; padding: .3rem 0; }
.primary-nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px; background: var(--teal-400); transition: right .25s var(--ease); }
.primary-nav a:hover::after, .primary-nav a:focus-visible::after, .primary-nav a[aria-current="page"]::after { right: 0; }
.primary-nav a[aria-current="page"] { color: var(--teal-400); }
.header-actions { display: flex; align-items: center; gap: 1rem; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: .4rem; }
.nav-toggle span { width: 24px; height: 2px; background: var(--white); border-radius: 2px; }

@media (max-width: 900px) {
  .primary-nav { position: fixed; inset: 0; top: 0; background: var(--navy-900); flex-direction: column; justify-content: center; gap: 2.2rem; transform: translateX(100%); transition: transform .35s var(--ease); }
  .primary-nav.is-open { transform: translateX(0); }
  .primary-nav ul { flex-direction: column; justify-content: center; gap: 2.2rem; width: 100%; height: 100%; }
  .primary-nav a { font-size: 1.4rem; }
  .nav-toggle { display: flex; z-index: 101; }
  .header-actions .btn-outline { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: 88vh; display: flex; align-items: center;
  background: radial-gradient(ellipse at 20% 0%, #14273f 0%, var(--navy-800) 55%, var(--navy-900) 100%);
  padding-top: var(--section-pad);
}
.hero-topo { position: absolute; inset: 0; opacity: .35; pointer-events: none; }
.hero-topo svg { width: 100%; height: 100%; }
.hero-topo path { animation: topo-drift 26s ease-in-out infinite alternate; }
@keyframes topo-drift { from { transform: translateY(0); } to { transform: translateY(-18px); } }
.hero-content { position: relative; max-width: 680px; }
.hero h1 { margin-bottom: 1.25rem; }
.hero .lead { margin-bottom: 0; font-size: 1.2rem; }
.scroll-cue { position: absolute; right: var(--gutter); bottom: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; color: var(--steel-300); font-size: .75rem; letter-spacing: .1em; }
.scroll-cue svg { animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* Reveal-on-scroll (JS toggles .is-visible) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* ---------- Trust strip ---------- */
.trust-strip { background: var(--navy-700); padding: 2.5rem 0; }
.trust-strip .container { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: center; justify-content: space-between; }
.trust-group { display: flex; gap: 2rem; flex-wrap: wrap; align-items: center; }
.trust-badge { display: flex; align-items: center; gap: .6rem; color: var(--steel-200); font-family: var(--font-head); font-weight: 700; font-size: .82rem; letter-spacing: .03em; }
.trust-badge svg { color: var(--teal-400); flex-shrink: 0; }
.trust-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--steel-300); margin-right: .5rem; }

/* ---------- Stats ---------- */
.stats-band { background: var(--navy-900); }
.stat { text-align: left; border-left: 2px solid var(--teal-500); padding-left: 1.25rem; }
.stat-num { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3rem); color: var(--white); display: flex; align-items: baseline; gap: .15rem; }
.stat-num .suffix { color: var(--teal-400); font-size: .55em; }
.stat-label { color: var(--steel-200); font-size: .92rem; margin-top: .35rem; }
.stat a { color: var(--teal-400); font-size: .82rem; font-weight: 600; margin-top: .6rem; display: inline-block; }

/* ---------- Cards ---------- */
.card {
  background: var(--navy-700); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius-md);
  padding: 2.2rem; border-top: 3px solid transparent; transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  height: 100%;
}
.card:hover, .card:focus-within { transform: translateY(-6px); border-top-color: var(--teal-400); box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); }
.card-thumb { margin: -2.2rem -2.2rem 1.25rem; aspect-ratio: 4/3; overflow: hidden; border-radius: calc(var(--radius-md) - 3px) calc(var(--radius-md) - 3px) 0 0; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .icon { width: 48px; height: 48px; color: var(--teal-400); margin-bottom: 1.25rem; }
.card h3 { margin-bottom: .75rem; }
.card p { margin-bottom: 1rem; }
.card .btn-ghost { font-size: .88rem; }

.card.card-light { background: var(--white); border: 1px solid #E4E9ED; }
.card.card-light h3, .card.card-light p { color: var(--ink-900); }

/* ---------- Split / feature blocks ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split figure { background: var(--navy-900); border-radius: var(--radius-lg); padding: 2rem; border: 1px solid rgba(255,255,255,.06); }
.metric-row { display: flex; gap: 2rem; flex-wrap: wrap; margin: 1.5rem 0; }
.metric-row .m-num { font-family: var(--font-head); font-weight: 800; font-size: 1.9rem; color: var(--teal-400); }
.metric-row .m-label { font-size: .8rem; color: var(--steel-300); }
blockquote { border-left: 3px solid var(--amber-500); padding-left: 1.25rem; font-style: italic; color: var(--slate-100); margin: 1.5rem 0; }
blockquote cite { display: block; font-size: .82rem; font-style: normal; color: var(--steel-300); margin-top: .5rem; }

/* ---------- ESG / Safety split band ---------- */
.dual-band { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .dual-band { grid-template-columns: 1fr; } }
.dual-band > div { padding: var(--section-pad) var(--gutter); }
.dual-band .esg { background: linear-gradient(160deg, #0F2E2C, var(--navy-800)); border-right: 1px solid rgba(255,255,255,.06); }
.dual-band .safe { background: linear-gradient(160deg, #2E2410, var(--navy-800)); }
.dual-band h3 { display: flex; align-items: center; gap: .6rem; }

/* ---------- Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }
.team-card { text-align: left; }
.team-photo { aspect-ratio: 1/1; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--steel-500), var(--navy-700)); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; filter: grayscale(.4); transition: filter .3s var(--ease); position: relative; overflow: hidden; }
.team-card:hover .team-photo { filter: grayscale(0); }
.team-photo span { font-family: var(--font-head); font-weight: 800; font-size: 2.2rem; color: rgba(255,255,255,.85); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card h4 { font-size: 1.05rem; margin-bottom: .2rem; }
.team-card .role { color: var(--teal-400); font-size: .85rem; font-weight: 600; margin-bottom: .5rem; }
.team-card p { font-size: .88rem; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field.full { grid-column: 1 / -1; }
label { font-size: .85rem; font-weight: 600; color: var(--slate-100); }
input, select, textarea {
  background: var(--navy-900); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-sm);
  padding: .8rem 1rem; color: var(--white); font-family: var(--font-body); font-size: .95rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--teal-400); }
textarea { min-height: 120px; resize: vertical; }
.consent { display: flex; align-items: flex-start; gap: .6rem; font-size: .82rem; color: var(--steel-300); }
.consent input { width: 18px; height: 18px; margin-top: 2px; }
.hp-field { position: absolute; left: -9999px; }
.form-note { font-size: .78rem; color: var(--steel-300); margin-top: .75rem; }

/* ---------- CTA bands ---------- */
.cta-band { background: linear-gradient(120deg, var(--navy-700), var(--steel-500)); text-align: center; }
.cta-band .container { max-width: 760px; }
.cta-band .btn-row { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); border-top: 1px solid rgba(255,255,255,.06); padding: var(--section-pad) 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: var(--steel-300); margin-bottom: 1.1rem; }
.footer-grid li { margin-bottom: .65rem; }
.footer-grid a:hover { color: var(--teal-400); }
.footer-brand p { max-width: 32ch; margin: 1rem 0; font-size: .9rem; }
.social-row { display: flex; gap: .9rem; }
.social-row a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; }
.social-row a:hover { border-color: var(--teal-400); color: var(--teal-400); }
.badge-row { display: flex; gap: 1.5rem; flex-wrap: wrap; padding: 1.75rem 0; border-top: 1px solid rgba(255,255,255,.08); color: var(--steel-300); font-size: .8rem; align-items: center; }
.legal-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .8rem; color: var(--steel-300); }
.legal-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.legal-links a:hover { color: var(--teal-400); }

/* ---------- Page hero (secondary pages) ---------- */
.page-hero { padding: calc(var(--section-pad) + 1rem) 0 var(--section-pad); background: linear-gradient(160deg, var(--navy-700), var(--navy-800)); border-bottom: 1px solid rgba(255,255,255,.06); }
.page-hero .lead { max-width: 640px; }
.breadcrumb { font-size: .8rem; color: var(--steel-300); margin-bottom: 1.25rem; }
.breadcrumb a:hover { color: var(--teal-400); }

/* ---------- Tables / lists used on inner pages ---------- */
.check-list li { position: relative; padding-left: 1.75rem; margin-bottom: .85rem; color: var(--steel-200); }
.check-list li::before { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--teal-500); }
.step-list { display: grid; gap: 1.5rem; }
.step { display: grid; grid-template-columns: 60px 1fr; gap: 1.25rem; align-items: start; }
.step-num { width: 48px; height: 48px; border-radius: 50%; background: var(--navy-900); border: 2px solid var(--teal-500); color: var(--teal-400); font-family: var(--font-head); font-weight: 800; display: flex; align-items: center; justify-content: center; }

.filter-bar { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.filter-chip { padding: .5rem 1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); font-size: .82rem; font-weight: 600; }
.filter-chip[aria-pressed="true"] { background: var(--teal-500); border-color: var(--teal-500); color: var(--navy-900); }

.tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .3rem .65rem; border-radius: 4px; background: rgba(18,129,124,.18); color: var(--teal-400); margin-bottom: .75rem; }
.tag.amber { background: rgba(232,163,61,.18); color: var(--amber-400); }

.placeholder-note { font-size: .78rem; color: var(--steel-300); border: 1px dashed rgba(255,255,255,.2); padding: .75rem 1rem; border-radius: var(--radius-sm); margin-top: .75rem; }

/* Chart bars (CSS-driven, animated on scroll) */
.chart { display: flex; align-items: flex-end; gap: 1.5rem; height: 220px; padding-top: 1rem; }
.chart .bar { flex: 1; background: linear-gradient(180deg, var(--teal-400), var(--teal-500)); border-radius: 6px 6px 0 0; position: relative; height: 0; transition: height 1.1s var(--ease); }
.chart.is-visible .bar { height: var(--h); }
.chart .bar span { position: absolute; top: -28px; left: 0; right: 0; text-align: center; font-family: var(--font-head); font-weight: 700; color: var(--ink-900); font-size: .85rem; }
.chart-labels { display: flex; gap: 1.5rem; margin-top: .75rem; }
.chart-labels span { flex: 1; text-align: center; font-size: .78rem; color: #5B6B78; }

.sparkline { width: 100%; height: 60px; }
.sparkline path.line { fill: none; stroke: var(--teal-400); stroke-width: 2.5; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.4s var(--ease); }
.sparkline.is-visible path.line { stroke-dashoffset: 0; }

.job-card { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.5rem; background: var(--navy-700); border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,.06); margin-bottom: 1rem; flex-wrap: wrap; }
.job-card .meta { color: var(--steel-300); font-size: .85rem; }

/* ---------- Legal / long-form content (Privacy, Terms, Accessibility) ---------- */
.legal-meta {
  display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.5rem;
  font-family: var(--font-head); font-size: .82rem; font-weight: 700; letter-spacing: .03em; color: var(--teal-400);
}
.legal-meta span { display: inline-flex; align-items: center; gap: .5rem; }
.legal-body { max-width: 760px; }
.legal-body > p, .legal-body > ul, .legal-body > ol { margin-bottom: 1.4rem; }
.legal-body p { color: var(--steel-200); }
.legal-body h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin: 3rem 0 1.1rem; padding-top: .5rem; border-top: 1px solid rgba(255,255,255,.08); }
.legal-body h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.legal-body h3 { font-size: 1.1rem; margin: 1.75rem 0 .85rem; color: var(--white); }
.legal-body ul, .legal-body ol { list-style: none; margin-left: 0; padding-left: 0; }
.legal-body ul li, .legal-body ol li { position: relative; padding-left: 1.6rem; margin-bottom: .7rem; color: var(--steel-200); }
.legal-body ul li::before { content: ''; position: absolute; left: 0; top: .55rem; width: 7px; height: 7px; border-radius: 50%; background: var(--teal-500); }
.legal-body ol { counter-reset: legal-ol; }
.legal-body ol li { counter-increment: legal-ol; }
.legal-body ol li::before { content: counter(legal-ol) '.'; position: absolute; left: 0; top: 0; font-family: var(--font-head); font-weight: 700; font-size: .85rem; color: var(--teal-400); }
.legal-body a { color: var(--teal-400); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(31,184,174,.4); }
.legal-body a:hover, .legal-body a:focus-visible { text-decoration-color: var(--teal-400); }
.legal-body strong { color: var(--white); font-weight: 700; }
.legal-body .legal-callout {
  background: var(--navy-700); border: 1px solid rgba(255,255,255,.08); border-left: 3px solid var(--amber-500);
  border-radius: var(--radius-sm); padding: 1.25rem 1.5rem; margin: 1.75rem 0; color: var(--slate-100); font-size: .92rem;
}
.legal-toc { background: var(--navy-700); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius-md); padding: 1.75rem 2rem; margin-bottom: 3rem; max-width: 760px; }
.legal-toc p { font-family: var(--font-head); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-500); margin-bottom: 1rem; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; }
.legal-toc li { margin-bottom: .6rem; break-inside: avoid; }
.legal-toc a { color: var(--slate-100); font-size: .92rem; }
.legal-toc a:hover, .legal-toc a:focus-visible { color: var(--teal-400); }
@media (max-width: 640px) { .legal-toc ol { columns: 1; } }

.map-graphic { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,.08); }

/* =====================================================================
   Native block-editor compatibility
   As of this update, page content is built from real WordPress core
   blocks (Heading, Paragraph, Image, Buttons, Columns, Group, List,
   Cover) instead of hardcoded page templates, so it's directly editable
   in wp-admin. These rules make WordPress's own block markup pick up the
   existing design system classes above rather than introducing a
   parallel style language.
   ===================================================================== */

/* Buttons: WP puts the custom class on the OUTER .wp-block-button div,
   not the <a> itself, so re-target the link with the same values .btn /
   .btn-primary / .btn-outline used on hand-written markup. */
.wp-block-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }
.wp-block-buttons .wp-block-button__link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  padding: .9rem 1.6rem; border-radius: var(--radius-sm);
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
  white-space: nowrap; text-decoration: none;
}
.wp-block-button.btn-primary .wp-block-button__link { background: var(--amber-500); color: var(--navy-900); }
.wp-block-button.btn-primary .wp-block-button__link:hover,
.wp-block-button.btn-primary .wp-block-button__link:focus-visible { background: var(--amber-400); transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(232,163,61,.5); }
.wp-block-button.btn-outline .wp-block-button__link { background: transparent; border: 1.5px solid var(--steel-300); color: var(--white); }
.wp-block-button.btn-outline .wp-block-button__link:hover,
.wp-block-button.btn-outline .wp-block-button__link:focus-visible { border-color: var(--teal-400); color: var(--teal-400); transform: translateY(-2px); }

/* Cover block used for the hero / page-hero photo bands: keep text
   left-aligned like the original hand-coded hero instead of the block's
   default centered content. */
.wp-block-cover.hero, .wp-block-cover.page-hero { justify-content: flex-start; text-align: left; }
.wp-block-cover.hero .wp-block-cover__inner-container,
.wp-block-cover.page-hero .wp-block-cover__inner-container { width: 100%; }
.wp-block-cover.hero .lead, .wp-block-cover.page-hero .lead { margin-bottom: 0; }
.wp-block-cover.page-hero { min-height: 420px !important; }

/* Photos dropped into page content via the Image block. */
.nf-photo img, .wp-block-image.nf-photo img { border-radius: var(--radius-md); }

/* Utility container widths used on the Investors page. */
.container.narrow { max-width: 760px; }
.container.narrow-center { max-width: 560px; text-align: center; margin-inline: auto; }

/* Job cards built from a Group block instead of hand-written HTML. */
.wp-block-group.job-card { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.5rem; background: var(--navy-700); border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,.06); margin-bottom: 1rem; flex-wrap: wrap; }
.wp-block-group.job-card p { margin: 0; }