/* ==========================================================================
   LPM Safety Partners — stylesheet
   Palette taken from the supplied brand lockups:
     #0E1724 navy (dark ground)   #1B2B45 navy (light ground / ink)
     #24374F shield navy          #F26A21 safety orange

   Contrast note (WCAG 2.1 AA, re-measured against the LPM palette):
     white on orange ....... 3.06:1  FAILS — never used
     navy  on orange ....... 5.88:1  PASS   — all orange CTAs use navy text
     orange on navy ........ 5.88:1  PASS
     white on navy ......... 18.00:1 PASS
   Orange is therefore never used as text on white, and never carries white
   text. It appears as fills (with navy text), rules, and marks only.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --navy-900: #070E17;
  --navy-800: #101C2B;
  --navy:     #0E1724;   /* brand */
  --navy-600: #24374F;
  --navy-500: #3A5372;

  --orange:      #F26A21; /* brand */
  --orange-dark: #D9591A; /* hover state for orange fills */

  --ink:     #1B2B45;   /* brand navy for light grounds (on-white lockup) */
  --body:    #41525F;
  --muted:   #6B7C8A;
  --line:    #DDE4EA;
  --line-2:  #EDF1F5;
  --surface: #FFFFFF;
  --wash:    #F4F7FA;

  --font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;    --space-8: 4rem;    --space-9: 6rem;

  --radius:    4px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(14,23,36,.08), 0 2px 8px rgba(14,23,36,.06);
  --shadow-md: 0 4px 12px rgba(14,23,36,.10), 0 12px 32px rgba(14,23,36,.10);
  --shadow-lg: 0 12px 28px rgba(14,23,36,.14), 0 32px 64px rgba(14,23,36,.16);

  --wrap: 1200px;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: .005em;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 { font-size: clamp(2.75rem, 6vw, 4.5rem); font-weight: 700; }
h2 { font-size: clamp(2rem, 4vw, 3rem);      font-weight: 700; }
h3 { font-size: 1.375rem;                    font-weight: 600; }

p { margin: 0 0 var(--space-4); max-width: 68ch; }

a { color: var(--navy-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy); }

img, svg { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 2px;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--space-5); }

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

.skip-link {
  position: absolute; left: var(--space-4); top: -100px;
  background: var(--navy); color: #fff; padding: var(--space-3) var(--space-4);
  z-index: 200; border-radius: var(--radius); font-weight: 600;
  transition: top .15s var(--ease);
}
.skip-link:focus { top: var(--space-4); color: #fff; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .8125rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--navy-500);
  margin: 0 0 var(--space-3);
  display: flex; align-items: center; gap: var(--space-3);
}
.eyebrow::before {
  content: ''; width: 28px; height: 3px; border-radius: 2px;
  background: var(--orange); flex: none;
}
.eyebrow--center { justify-content: center; }

.lede { font-size: 1.1875rem; color: var(--body); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-3);
  min-height: 52px; padding: var(--space-3) var(--space-6);
  font-family: var(--font-body); font-size: 1rem; font-weight: 700;
  letter-spacing: .01em; white-space: nowrap;   /* labels must never wrap */
  border: 2px solid transparent; border-radius: var(--radius);
  cursor: pointer; text-decoration: none;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }

/* Orange fill carries NAVY text — white would fail contrast (2.87:1). */
.btn--primary { background: var(--orange); color: var(--navy); }
.btn--primary:hover { background: var(--orange-dark); color: var(--navy); }

.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-600); color: #fff; }

.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

.btn--outline { background: transparent; color: var(--navy); border-color: var(--line); }
.btn--outline:hover { border-color: var(--navy); background: var(--wash); color: var(--navy); }

/* ---------- utility bar ---------- */
.utility {
  background: var(--navy-900); color: rgba(255,255,255,.85);
  font-size: .875rem;
}
.utility .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); min-height: 44px; flex-wrap: wrap;
}
.utility a { color: #fff; text-decoration: none; font-weight: 600; padding-block: var(--space-1); }
.utility a:hover { text-decoration: underline; }
.utility__group { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.utility__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.utility__item svg { color: var(--orange); }

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header .wrap {
  display: flex; align-items: center; gap: var(--space-5);
  min-height: 84px;
}
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; margin-right: auto; flex: none; }
.brand__mark { width: 40px; height: auto; flex: none; }  /* height auto: the shield is 260x302, forcing both axes squashes it */
.brand__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.brand__name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  color: var(--navy); letter-spacing: .01em;
  white-space: nowrap;          /* the company name must never stack */
}
.brand__name em { font-style: normal; color: var(--orange); }
.brand__tag {
  font-size: .5625rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-top: 4px;
  white-space: nowrap;
  /* Hidden by default. At 36 characters this is the widest thing in the brand
     block (261px at the old size), and forcing it onto one line pushed the
     header 44px past its container at 1024. Shown only where it genuinely
     fits — see the 1201px breakpoint below. The footer lockup carries the
     tagline everywhere else. */
  display: none;
}

.nav { display: flex; align-items: center; gap: var(--space-6); }
.nav a {
  font-weight: 600; font-size: 1rem; color: var(--ink);
  text-decoration: none; padding: var(--space-2) 0; position: relative;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px;
  background: var(--orange); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- nav dropdown ---------- */
.navdrop { position: relative; }
.navdrop__btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  color: var(--ink); background: none; border: 0; padding: var(--space-2) 0;
  cursor: pointer; position: relative;
}
.navdrop__btn::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px;
  background: var(--orange); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease);
}
.navdrop__btn:hover::after,
.navdrop__btn.is-current::after,
.navdrop.is-open .navdrop__btn::after { transform: scaleX(1); }
.navdrop__btn svg { transition: transform .2s var(--ease); }
.navdrop.is-open .navdrop__btn svg { transform: rotate(180deg); }

.navdrop__menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 250px; padding: var(--space-2);
  margin-top: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); z-index: 120;
  display: grid; gap: 2px;
}
/* MUST come after the rule above. An author `display` declaration beats the
   browser's [hidden] { display: none }, so without this the menu stays visible
   even though the JS sets the attribute correctly. */
.navdrop__menu[hidden] { display: none; }

/* Invisible bridge across the 12px gap, so moving the pointer from the trigger
   down to the menu does not count as leaving the dropdown. */
.navdrop__menu::after {
  content: ''; position: absolute; left: 0; right: 0; top: -13px; height: 13px;
}
/* little pointer up to the trigger */
.navdrop__menu::before {
  content: ''; position: absolute; top: -6px; left: 50%; margin-left: -6px;
  width: 11px; height: 11px; background: #fff;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.navdrop__menu a {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius);
  font-weight: 600; font-size: .9375rem; color: var(--ink); text-decoration: none;
  position: relative; z-index: 1;
}
.navdrop__menu a:hover { background: var(--wash); color: var(--navy); }
.navdrop__menu a[aria-current="page"] {
  background: var(--navy); color: #fff;
}
.navdrop__menu a::after { display: none; }

.header__actions { display: flex; align-items: center; gap: var(--space-3); }
.header__phone {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: 52px; padding: var(--space-2) var(--space-5);
  border: 2px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--navy); font-weight: 700;
  white-space: nowrap; flex: none;
  transition: border-color .18s var(--ease);
}
.header__phone:hover { border-color: var(--navy); }
.header__phone svg { color: var(--orange); }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  flex: none;                 /* never let flex shrink it below the 44px target */
  width: 52px; height: 52px; background: transparent;
  border: 2px solid var(--line); border-radius: var(--radius);
  cursor: pointer; color: var(--navy);
}

@media (min-width: 1201px) {
  .brand__tag { display: block; }
}

/* ---------- hero ---------- */
.hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 8% 0%, rgba(44,83,120,.55), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-800) 100%);
}
/* Angled orange seam echoing the diagonal collage in the reference */
.hero::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: 38%;
  width: 3px; background: var(--orange); opacity: .9;
  transform: skewX(-9deg); transform-origin: top;
  display: none;
}
.hero .wrap { position: relative; z-index: 1; }

.hero__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-7);
  padding-block: var(--space-8) var(--space-9);
  align-items: center;
}
.hero h1 { color: #fff; }
.hero h1 .accent { color: var(--orange); display: block; }
.hero__lede { color: rgba(255,255,255,.82); font-size: 1.1875rem; max-width: 52ch; }

.hero__badge {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  border-radius: 100px; font-size: .875rem; font-weight: 600; color: #fff;
  margin-bottom: var(--space-5);
}
.hero__badge svg { color: var(--orange); }

.hero__rule { width: 84px; height: 4px; background: var(--orange); border-radius: 2px; margin: var(--space-5) 0; }

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }

/* photo slot — replace .hero__media background with a real photograph */
.hero__media {
  position: relative; min-height: 380px; border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, var(--navy-600), var(--navy-800));
  border: 1px solid rgba(255,255,255,.14);
  display: grid; place-items: center; text-align: center; padding: var(--space-6);
  overflow: hidden;
}
.hero__media-note {
  font-size: .875rem; color: rgba(255,255,255,.6); max-width: 32ch;
  font-weight: 600; letter-spacing: .02em;
}
.hero__media-note strong { color: var(--orange); display: block; margin-bottom: var(--space-2); letter-spacing: .12em; text-transform: uppercase; font-size: .75rem; }

/* capability list, floating up over the hero media at desktop widths */
.hero__panel { display: grid; gap: var(--space-5); }
.capabilities {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--space-3); display: grid; gap: 1px; background-clip: padding-box;
  list-style: none; margin: 0;
}
.capability {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-4); border-radius: var(--radius);
  transition: background-color .18s var(--ease);
}
.capability + .capability { border-top: 1px solid var(--line-2); }
.capability:hover { background: var(--wash); }
.capability__icon {
  flex: none; width: 44px; height: 44px; border-radius: var(--radius);
  display: grid; place-items: center; background: var(--wash); color: var(--navy);
}
.capability__icon--accent { background: rgba(242,106,33,.14); color: #8A3A05; }
.capability p { font-size: .9375rem; margin: 0; color: var(--muted); line-height: 1.5; }
/* Scoped to beat `.capability p` (0,1,1) — a bare class would lose to it. */
.capability .capability__title {
  font-family: var(--font-body); font-size: 1rem; font-weight: 700;
  color: var(--ink); margin: 0 0 2px; line-height: 1.35;
}

/* ---------- trust strip ---------- */
.trust { background: #fff; margin-top: calc(var(--space-7) * -1); position: relative; z-index: 2; }
.trust__inner {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  display: grid; grid-template-columns: 1fr; gap: 1px; overflow: hidden;
  border: 1px solid var(--line);
}
.trust__item { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-5); }
.trust__item + .trust__item { border-top: 1px solid var(--line-2); }
.trust__icon {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; background: var(--navy); color: var(--orange);
}
.trust__item h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin: 0 0 2px; color: var(--ink); }
.trust__item p { font-size: .875rem; margin: 0; color: var(--muted); line-height: 1.45; }

/* ---------- sections ---------- */
.section { padding-block: var(--space-9); }
.section--wash { background: var(--wash); }
.section--navy { background: var(--navy); color: rgba(255,255,255,.82); }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy .eyebrow { color: rgba(255,255,255,.75); }

.section__head { max-width: 62ch; margin-bottom: var(--space-7); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center p { margin-inline: auto; }

/* ---------- mission ---------- */
.mission__statement {
  font-size: clamp(2rem, 5.2vw, 3.5rem);
  line-height: 1.02;
  max-width: 20ch;
  margin-bottom: var(--space-6);
}
/* Orange full stops punctuate the three clauses without needing three lines
   of markup — they carry the rhythm at any width. */
.mission__dot { color: var(--orange); }

.mission__body { max-width: 68ch; }
.mission__body .lede { font-size: 1.1875rem; color: var(--ink); font-weight: 500; }
.mission__body p:last-child { margin-bottom: 0; }

@media (min-width: 1024px) {
  .mission .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
  .mission .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
  .mission__statement { margin-bottom: 0; }
}

/* ---------- services ---------- */
.cards { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-6); position: relative; overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--orange); transform: scaleY(0); transform-origin: top;
  transition: transform .25s var(--ease);
}
.card:hover { border-color: var(--navy-500); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card:hover::before { transform: scaleY(1); }
.card__icon {
  width: 52px; height: 52px; border-radius: var(--radius); margin-bottom: var(--space-5);
  display: grid; place-items: center; background: var(--navy); color: var(--orange);
}
.card h3 { margin-bottom: var(--space-3); }
.card p { font-size: .9375rem; margin-bottom: var(--space-4); }
.card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.card__list li { position: relative; padding-left: var(--space-5); font-size: .9375rem; color: var(--body); }
.card__list li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--orange);
}

/* ---------- industries ---------- */
.industries {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.industry {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.industry:hover { background: rgba(255,255,255,.09); border-color: rgba(242,106,33,.5); }
.industry svg { flex: none; color: var(--orange); }
.industry span { font-weight: 600; color: #fff; font-size: 1rem; }

/* ---------- about / split ---------- */
.split { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: center; }
.split__media {
  min-height: 340px; border-radius: var(--radius-lg); border: 1px solid var(--line);
  background:
    repeating-linear-gradient(135deg, rgba(14,23,36,.04) 0 12px, transparent 12px 24px),
    var(--wash);
  display: grid; place-items: center; text-align: center; padding: var(--space-6);
}
.split__media-note { font-size: .875rem; color: var(--muted); font-weight: 600; max-width: 32ch; }
.split__media-note strong { display: block; color: var(--navy); text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; margin-bottom: var(--space-2); }

.checklist { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-4); }
.checklist li { display: flex; gap: var(--space-4); align-items: flex-start; }
.checklist svg { flex: none; color: var(--orange); margin-top: 3px; }
.checklist strong { display: block; color: var(--ink); font-weight: 700; }
.checklist span { font-size: .9375rem; color: var(--muted); }

/* division callout */
.division {
  border-left: 4px solid var(--orange); background: var(--wash);
  padding: var(--space-5) var(--space-6); border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: var(--space-6);
}
.division p { margin: 0; font-size: .9375rem; }
.division strong { color: var(--ink); }

/* ---------- process ---------- */
.steps { display: grid; grid-template-columns: 1fr; gap: var(--space-5); counter-reset: step; }
.step { position: relative; padding-top: var(--space-6); border-top: 3px solid var(--line); counter-increment: step; }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-size: 2.5rem; font-weight: 700;
  color: var(--orange); line-height: 1; display: block; margin-bottom: var(--space-3);
}
.step h3 { font-size: 1.25rem; margin-bottom: var(--space-2); }
.step p { font-size: .9375rem; margin: 0; }

/* Netlify honeypot — must be genuinely hidden, not just off-screen, so it is
   never announced, focusable or visible. Bots fill it; humans cannot. */
.hp { display: none !important; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); }

.form { display: grid; gap: var(--space-5); }
.field { display: grid; gap: var(--space-2); }
.field label { font-weight: 700; font-size: .9375rem; color: var(--ink); }
.field .req { color: #B4340B; }
.field .hint { font-size: .8125rem; color: var(--muted); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 1rem; color: var(--ink);
  min-height: 52px; padding: var(--space-3) var(--space-4);
  background: #fff; border: 2px solid var(--line); border-radius: var(--radius);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(14,23,36,.12);
}
.field--row { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }

.form__note { font-size: .8125rem; color: var(--muted); margin: 0; }

.contact-aside { display: grid; gap: var(--space-5); align-content: start; }
.contact-card {
  background: var(--navy); color: rgba(255,255,255,.82);
  border-radius: var(--radius-lg); padding: var(--space-6);
}
.contact-card h3 { color: #fff; margin-bottom: var(--space-5); }
.contact-row { display: flex; gap: var(--space-4); align-items: flex-start; padding-block: var(--space-4); }
.contact-row + .contact-row { border-top: 1px solid rgba(255,255,255,.14); }
.contact-row svg { flex: none; color: var(--orange); margin-top: 3px; }
.contact-row dt { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 2px; }
.contact-row dd { margin: 0; color: #fff; font-weight: 600; }
.contact-row dd a { color: #fff; text-decoration: none; }
.contact-row dd a:hover { text-decoration: underline; color: #fff; }
.contact-card dl { margin: 0; }

/* ---------- interior page header ---------- */
.pagehead {
  background: var(--navy); color: rgba(255,255,255,.82);
  padding-block: var(--space-7) var(--space-8);
  position: relative; overflow: hidden;
}
.pagehead::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(900px 400px at 12% 0%, rgba(44,83,120,.5), transparent 62%);
}
.pagehead .wrap { position: relative; z-index: 1; }
.pagehead h1 { color: #fff; font-size: clamp(2.5rem, 5vw, 3.75rem); }
.pagehead .eyebrow { color: rgba(255,255,255,.75); }
.pagehead__lede { color: rgba(255,255,255,.82); font-size: 1.1875rem; max-width: 56ch; margin: 0; }

.crumbs { margin-bottom: var(--space-6); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: .875rem; }
.crumbs li { display: flex; align-items: center; gap: var(--space-3); color: rgba(255,255,255,.6); }
.crumbs li + li::before { content: '/'; color: rgba(255,255,255,.35); }
.crumbs a { color: rgba(255,255,255,.8); text-decoration: none; padding-block: var(--space-1); }
.crumbs a:hover { color: #fff; text-decoration: underline; }

/* ---------- team roster ---------- */
/* auto-fit rather than fixed column counts: the roster fills whole rows at any
   size, so adding or removing a consultant never strands one on its own row.
   280px min resolves to 3 columns inside the 1152px container, so a six-person
   roster reads 3+3 rather than 4+2. */
.team-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.member {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.member:hover { border-color: var(--navy-500); box-shadow: var(--shadow-md); transform: translateY(-2px); }

.member__photo {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%;
  background: var(--line-2); display: block;
}

.member__body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }

.member__name {
  font-family: var(--font-display); font-size: 1.625rem; font-weight: 700;
  color: var(--ink); margin: 0 0 var(--space-1);
}
.member__role {
  font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--navy-500); margin: 0 0 var(--space-4);
}

.member__creds {
  list-style: none; margin: 0 0 var(--space-4); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.member__creds li {
  font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  padding: var(--space-1) var(--space-3);
  background: var(--navy); color: #fff; border-radius: 100px;
}

.member__bio { font-size: .9375rem; margin: 0; color: var(--body); }

/* pushed to the card foot so contact rows line up across a row of cards */
.member__contact {
  list-style: none; margin: auto 0 0; padding: var(--space-5) 0 0;
  border-top: 1px solid var(--line-2); display: grid; gap: var(--space-1);
}
.member__contact a {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding-block: var(--space-2);
  font-size: .9375rem; font-weight: 600; color: var(--navy);
  text-decoration: none; word-break: break-word;
}
.member__contact a:hover { color: var(--navy-600); text-decoration: underline; }
.member__contact svg { flex: none; color: var(--orange); }

/* ---------- resources page ---------- */

/* on-page jump nav */
.toc { background: var(--wash); border-bottom: 1px solid var(--line); }
.toc .wrap { padding-block: var(--space-5); }
.toc__label {
  font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 var(--space-3);
}
.toc__list {
  list-style: none; margin: 0; padding: 0; counter-reset: toc;
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
}
.toc__list li { counter-increment: toc; }
.toc__list a {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  padding-block: var(--space-2);
  font-size: .9375rem; font-weight: 600; color: var(--navy);
  text-decoration: none;
}
.toc__list a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-display); font-size: .8125rem; color: var(--orange);
}
.toc__list a:hover { color: var(--navy-600); text-decoration: underline; }

/* body copy blocks */
.prose > p { font-size: 1.0625rem; }
.prose > p:last-child { margin-bottom: 0; }
.prose--invert > p { color: rgba(255,255,255,.82); }
.prose--invert strong { color: #fff; }

/* statutory quotation */
.lawquote {
  margin: 0 0 var(--space-6); padding: var(--space-6);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-left: 4px solid var(--orange); border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.lawquote p {
  font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 600; line-height: 1.35; color: #fff; margin: 0 0 var(--space-4);
  max-width: 60ch;
}
.lawquote footer { font-size: .875rem; color: rgba(255,255,255,.7); }
.lawquote cite { font-style: normal; font-weight: 700; color: #fff; }
.lawquote footer a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.lawquote footer a:hover { color: #fff; }

/* two-column checklist for the obligations list */
.checklist--cols { gap: var(--space-5); }

.linkgroup__title {
  font-family: var(--font-body); font-size: .8125rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--navy-500);
  margin: var(--space-7) 0 var(--space-4);
}
.linkgroup__title:first-of-type { margin-top: 0; }

.split-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }

.reccard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-6); position: relative; overflow: hidden;
}
.reccard::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--navy-500);
}
.reccard--urgent::before { background: var(--orange); }
.reccard__tag {
  display: inline-block; font-size: .6875rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: var(--space-1) var(--space-3); border-radius: 100px;
  background: var(--wash); color: var(--navy-600); margin-bottom: var(--space-4);
}
.reccard--urgent .reccard__tag { background: rgba(242,106,33,.14); color: #8A3A05; }
.reccard h3 { margin-bottom: var(--space-3); }
.reccard p { font-size: .9375rem; }

/* the two reporting deadlines — the sharpest facts on the page */
.deadlines { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.deadlines li {
  display: flex; align-items: baseline; gap: var(--space-4);
  padding: var(--space-4); border-radius: var(--radius);
  background: var(--wash); border-left: 3px solid var(--orange);
}
.deadline__time {
  flex: none; font-family: var(--font-display); font-size: 1.75rem; font-weight: 700;
  color: var(--navy); line-height: 1; min-width: 5.5ch;
}
.deadline__what { font-size: .9375rem; color: var(--body); }

/* official link list */
.reslinks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.reslinks a {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5); background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  text-decoration: none; color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.reslinks a:hover {
  border-color: var(--navy-500); box-shadow: var(--shadow-md);
  transform: translateY(-1px); color: var(--ink);
}
.reslink__icon {
  flex: none; width: 44px; height: 44px; border-radius: var(--radius);
  display: grid; place-items: center; background: var(--navy); color: var(--orange);
}
.reslink__body { display: grid; gap: 2px; flex: 1; min-width: 0; }
.reslink__body strong { font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.reslink__body span { font-size: .9375rem; color: var(--muted); }
.reslink__ext { flex: none; color: var(--muted); }
.reslinks a:hover .reslink__ext { color: var(--navy); }

.disclaimer {
  display: flex; gap: var(--space-4); align-items: flex-start;
  margin: var(--space-7) 0 0; padding: var(--space-5);
  background: #fff; border: 1px solid var(--line);
  border-left: 4px solid var(--navy-500); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .875rem; color: var(--muted); max-width: none;
}
.disclaimer svg { flex: none; color: var(--navy-500); margin-top: 2px; }

/* ---------- toolbox talks ---------- */
.packnote {
  background: var(--navy); color: rgba(255,255,255,.82);
  border-radius: var(--radius-lg); padding: var(--space-6);
}
.packnote h3 { color: #fff; margin-bottom: var(--space-4); }
.packnote p { font-size: .9375rem; }
.packnote p:last-child { margin-bottom: 0; }
.packnote strong { color: #fff; }
.packnote a { color: var(--orange); font-weight: 700; }
.packnote a:hover { color: #fff; }

.talks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }

.talk {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-6); position: relative; overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.talk::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--orange); transform: scaleY(0); transform-origin: top;
  transition: transform .25s var(--ease);
}
.talk:hover { border-color: var(--navy-500); box-shadow: var(--shadow-md); }
.talk:hover::before { transform: scaleY(1); }

.talk__head { display: flex; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-4); }
.talk__num {
  flex: none; font-family: var(--font-display); font-size: 2.25rem; font-weight: 700;
  line-height: .9; color: var(--orange); min-width: 2.2ch;
}
.talk__head h3 { margin: 0 0 var(--space-1); font-size: 1.5rem; }
.talk__std {
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy-500);
}

.talk__why {
  font-size: 1rem; color: var(--body); padding-left: var(--space-5);
  border-left: 3px solid var(--line-2); margin-bottom: var(--space-5);
}

.talk__points { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-3); }
.talk__points li { position: relative; padding-left: var(--space-5); font-size: .9375rem; }
.talk__points li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--navy-500);
}

.talk__ask { background: var(--wash); border-radius: var(--radius); padding: var(--space-5); }
.talk__ask > strong {
  display: block; font-size: .75rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--navy-500); margin-bottom: var(--space-3);
}
.talk__ask ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.talk__ask li { position: relative; padding-left: var(--space-5); font-size: .9375rem; color: var(--ink); font-weight: 500; }
.talk__ask li::before { content: '?'; position: absolute; left: 0; color: var(--orange); font-weight: 700; }

/* ---------- lead magnet ---------- */
.magnet { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: start; }
.magnet__pitch p { font-size: 1.0625rem; }
.magnet__list { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.magnet__list li {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: .9375rem; font-weight: 600; color: var(--ink);
}
.magnet__list svg { flex: none; color: var(--orange); }

.magnet__form {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-md);
}
.magnet__form h3 { margin-bottom: var(--space-5); }

/* ---------- thank-you page ---------- */
.thanks { text-align: center; }
.thanks__inner { max-width: 62ch; margin-inline: auto; }
.thanks__check {
  display: grid; place-items: center; width: 76px; height: 76px;
  margin: 0 auto var(--space-5); border-radius: 50%;
  background: rgba(242,106,33,.14); color: #8A3A05;
}
.thanks h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); }
.thanks .lede { margin-inline: auto; }
.btn--lg { min-height: 60px; font-size: 1.0625rem; padding-inline: var(--space-7); margin-top: var(--space-4); }
.thanks__note { font-size: .875rem; color: var(--muted); margin: var(--space-5) auto 0; }

.thanks__next {
  margin-top: var(--space-8); padding-top: var(--space-6);
  border-top: 1px solid var(--line); text-align: left;
}
.thanks__next h2 {
  font-family: var(--font-body); font-size: .8125rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--navy-500);
  margin-bottom: var(--space-4);
}
.thanks__next ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.thanks__next li { font-size: .9375rem; color: var(--muted); }
.thanks__next a { font-weight: 700; color: var(--navy); }

/* ---------- cta band ---------- */
.cta-band {
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  align-items: center; justify-content: space-between;
}
.cta-band h2 { margin-bottom: var(--space-2); }
.cta-band p { margin: 0; }

/* ---------- footer ---------- */
.footer { background: var(--navy-900); color: rgba(255,255,255,.7); padding-block: var(--space-8) var(--space-6); font-size: .9375rem; }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); margin-bottom: var(--space-7); }
/* Footer column headings are h2 so no page can produce a heading-level skip
   into the footer, whatever its last section used. */
.footer__heading { font-family: var(--font-body); font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin: 0 0 var(--space-4); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
/* padding-block keeps these links clear of the 24px WCAG 2.2 minimum target */
.footer li { padding-block: 3px; }
.footer a { color: rgba(255,255,255,.75); text-decoration: none; display: inline-block; padding-block: var(--space-1); }
.footer a:hover { color: #fff; text-decoration: underline; }
/* the supplied horizontal lockup, sized by width — its own viewBox keeps the
   aspect ratio, and the baked-in dark background rect was stripped so it sits
   on the footer navy rather than showing a mismatched box */
.footer__logo {
  width: 260px; max-width: 100%; height: auto; margin-bottom: var(--space-3);
  /* tagline-free variant: the supplied lockup bakes its tagline in at ~4% of
     its own height, which renders ~4px at any size that fits a layout. The
     tagline below is live text instead. */
}
.footer__tagline {
  font-size: .8125rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
  margin: 0 0 var(--space-4);
}
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.14); padding-top: var(--space-5);
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
  font-size: .875rem; color: rgba(255,255,255,.55);
}
.footer__bottom p { margin: 0; max-width: none; }

/* ---------- responsive ---------- */
@media (min-width: 640px) {
  .field--row { grid-template-columns: 1fr 1fr; }
  .trust__inner { grid-template-columns: repeat(2, 1fr); }
  .trust__item + .trust__item { border-top: none; }
  .trust__item:nth-child(n+3) { border-top: 1px solid var(--line-2); }
}

@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; }
}

@media (min-width: 1024px) {
  .hero::after { display: block; }
  .hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--space-8); padding-block: var(--space-9); }
  .hero__media { min-height: 380px; }
  /* Overlap the card stack onto the photo, the way the reference does. */
  .hero__panel { gap: 0; }
  .capabilities { margin: calc(var(--space-7) * -1) 0 0 var(--space-6); }
  /* ...but when there is no photo above it, the stack stands on its own and
     must not pull itself upward. Keeps the hero correct whether or not the
     photo block is present. */
  .hero__panel > .capabilities:first-child { margin: 0; }
  .trust__inner { grid-template-columns: repeat(4, 1fr); }
  .trust__item:nth-child(n+3) { border-top: none; }
  .trust__item + .trust__item { border-left: 1px solid var(--line-2); }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  /* With its photo removed the About section has one child, which would
     otherwise sit in a half-width column with dead space beside it. Span the
     row and cap the measure so the prose stays readable. Reverts on its own
     when the photo comes back. */
  .split > :only-child { grid-column: 1 / -1; max-width: 76ch; }
  .contact-grid { grid-template-columns: 1.3fr .7fr; }
  .split-cards { grid-template-columns: 1fr 1fr; }
  .checklist--cols { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); }
  .magnet { grid-template-columns: 1.1fr .9fr; gap: var(--space-8); }
  .talks { grid-template-columns: 1fr 1fr; }
  .pagehead { padding-block: var(--space-8) var(--space-9); }
}

/* Six nav items plus a phone button plus a CTA will not fit between 1024 and
   ~1200px. The number is already in the utility bar at the top of every page,
   so the header phone button is the right thing to drop in that band. */
@media (max-width: 1200px) {
  .header__phone { display: none; }
  .nav { gap: var(--space-5); }
}

@media (max-width: 1023px) {
  .nav, .header__phone { display: none; }
  .nav-toggle { display: flex; }
  .header .wrap { min-height: 72px; }
  .nav--open {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md); padding: var(--space-3);
  }
  .nav--open a { padding: var(--space-4); border-radius: var(--radius); }
  .nav--open a:hover { background: var(--wash); }
  .nav--open a::after { display: none; }

  /* Inside the hamburger panel the dropdown flattens into an indented group —
     a nested collapse inside an already-collapsed menu is worse UX. */
  .navdrop { position: static; }
  .navdrop__btn { display: none; }
  .navdrop__menu {
    position: static; transform: none; min-width: 0;
    background: none; border: 0; box-shadow: none; padding: 0;
    border-left: 3px solid var(--line); border-radius: 0;
    margin: var(--space-2) 0 var(--space-2) var(--space-4);
  }
  .navdrop__menu::before { display: none; }
  .navdrop__menu a[aria-current="page"] { background: var(--wash); color: var(--navy); }
}

@media (max-width: 640px) {
  /* The header CTA crowds the menu button at phone widths and forces its label
     to wrap. The phone number stays in the utility bar and the hero CTA sits
     just below, so nothing is lost by dropping it here. */
  .header__actions .btn--primary { display: none; }
}

@media (max-width: 520px) {
  .industries { grid-template-columns: 1fr; }
  .utility__group--left { display: none; }
  .hero__cta .btn { width: 100%; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- print ---------- */
@media print {
  .utility, .header__actions, .nav-toggle, .hero__cta, .form { display: none; }
  .hero, .section--navy, .footer { background: #fff !important; color: #000 !important; }
  .hero h1, .section--navy h2 { color: #000 !important; }
}