/* ==========================================================================
   Turtle Mountain USA — Design 1 (Variation A)
   Static build. Tokens extracted from Figma file v8TkZA1tUpLjGbqYnIShAX.

   Structured for a later port into a Drupal 11 theme:
   - every token is a CSS custom property on :root
   - block-level class names map 1:1 to intended Twig templates
   - no framework dependencies
   ========================================================================== */

/* ---------- Tokens ------------------------------------------------------- */

:root {
  /* Surfaces */
  --bg:              #050b1a;
  --surface:         #0e1a30;
  --surface-alt:     #0a1426;

  /* Text */
  --text:            #ffffff;
  --text-body:       #cbd5e1;
  --text-muted:      #94a3b8;

  /* Accent
     --accent is the brand red taken from the design.
     --accent-strong is used wherever white text sits on the red, because
     #e63946 with white measures 4.17:1 and fails WCAG AA (needs 4.5:1).
     #c1121f measures 5.9:1 and holds the same visual character. */
  --accent:          #e63946;
  --accent-strong:   #c1121f;
  --accent-deep:     #5c1d24;
  /* --accent-text is --accent lifted for accent-coloured *text*.
     #e63946 on the --surface panels measures 4.17:1, which fails WCAG AA for
     body text (needs 4.5:1). It is the same 4.17:1 that forced --accent-strong
     for white-on-red, but that fix only covered text *on* the red; this covers
     red text on the dark surfaces. #ef5c67 measures 5.29:1 on --surface,
     5.29:1 on --surface-alt and 5.98:1 on the page background, and holds the
     same visual character. --accent itself is unchanged and still carries the
     rules, borders, focus outlines and hover states, none of which are text. */
  --accent-text:     #ef5c67;

  /* Lines */
  --line:            rgba(255, 255, 255, 0.10);
  --line-strong:     rgba(255, 255, 255, 0.18);
  --line-accent:     #5c1d24;

  /* Type */
  --font-display: 'Big Shoulders Display', 'Big Shoulders', 'Oswald', 'Arial Narrow', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Rhythm */
  --radius:       2px;
  --radius-lg:    4px;
  --container:    1200px;
  --gutter:       40px;
  --section-y:    112px;
  --header-h:     95px;
}

/* ---------- Reset -------------------------------------------------------- */

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

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* ---------- Flag backdrop ------------------------------------------------ */

/* Doyle asked for a static USA flag behind the blue design (5 Sep 2026).
   flag-usa.jpg from the asset set rather than a hand-coded SVG, so the
   backdrop carries the same photograph the rest of the site was art-directed
   around.

   It is texture, not illustration. The page navy moves up to `html` and the
   flag paints on `body::before` at low opacity, so --bg still reads as the
   dominant surface and the flag is a suggestion underneath it. One number to
   tune: the opacity, and it has a narrow window. Push it high enough and the
   light areas of the flag drop --accent-text under WCAG AA, and the stripe
   edges stop reading as texture and start cutting across the card grid.

   `position: fixed` on the layer itself rather than `background-attachment:
   fixed`. Same static result, but it does not misbehave on iOS Safari and it
   does not force a full repaint on every scroll frame. Nothing animates and
   nothing moves relative to anything else.

   Every opaque panel in this file (.product-card, .inquiry, .location,
   .person, table.spec, .site-footer, the hero media stack and most
   .section--surface bands) paints over this layer, so the inquiry form, the
   maps and the hero all keep flat ground. The flag shows through the open
   .section and .freedom bands, and through any band carrying
   .section--translucent. */

html { background: var(--bg); }
body { background: transparent; }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;          /* behind in-flow content, above the canvas */
  pointer-events: none;
  opacity: 0.2;
  background: url('../img/flag-usa.jpg') center / cover no-repeat;
}

/* Mobile: the union is allowed to crop out, deliberately. A wide flag
   covering a 390x844 viewport scales on height, so only the centre strip is
   on screen. Anchoring left instead keeps the union in frame, but at that
   scale the stars blow up and the whole screen becomes a field of giant
   stars, which is worse than no stars at all. Centred, what is left is quiet
   horizontal bands, which is what a texture should be. No separate media
   query needed - the centred `cover` above already does it. */

/* Nothing to gain from a ghosted flag on paper, and it costs ink. */
@media print {
  body::before { display: none; }
}
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text);
  margin: 0;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

p { margin: 0; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent-strong);
  color: #fff;
  padding: 12px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  z-index: 200;
}
.skip-link:focus { left: 0; }

/* Available to screen readers, invisible on screen. Used to announce that a
   link opens in a new tab, which sighted users infer from context. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout helpers ---------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: 80px; }
.section--surface { background: var(--surface); }

/* Lets the fixed flag backdrop read through a surface band instead of sealing
   it off. Stacks on .section--surface and has to stay after it - same
   specificity, so source order is what decides. The colour is --surface's own
   #0e1a30; the token cannot be reused here because a custom property holds a
   hex, not the three channels rgba() needs.

   Every band carrying this holds prose, cards, a form or a table, all of
   which paint their own opaque panels, so the flag reads in the gutters
   rather than behind text. */
.section--translucent { background: rgba(14, 26, 48, 0.8); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 18px;
}
.eyebrow--muted { color: var(--text-muted); }

.section-head { max-width: 780px; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(34px, 4.4vw, 56px); font-weight: 800; }
.section-head p { margin-top: 22px; font-size: 16px; color: var(--text-body); }

.lede { font-size: 18px; line-height: 1.6; color: var(--text-body); }

/* ---------- Buttons ------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.btn--primary {
  background: var(--accent-strong);
  color: #fff;
  border-color: var(--accent-strong);
}
.btn--primary:hover { background: #a20e19; border-color: #a20e19; }

/* Secondary: filled, but in the surface blue rather than the accent red, so it
   ranks below the primary and above the outlines.
   It keeps a border deliberately. #0e1a30 on the #050b1a page background is
   only a couple of steps apart, so without an edge the button shape dissolves
   into the section behind it. White text on the fill measures about 17:1. */
.btn--secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line-strong);
}
.btn--secondary:hover { background: #16243f; border-color: var(--text-muted); }

.btn--outline {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }

/* .btn--outline is transparent by design, which reads as a hole on the two
   spots where it sits on open ground and the flag backdrop shows through the
   button itself. --bg is the page colour, so this restores exactly the ground
   these had before the flag layer existed rather than restyling them; filling
   with --surface instead would make them read as .btn--secondary. Every other
   outline button sits inside an opaque panel and stays clear. */
#finder-reset,
.spec-download .btn { background: var(--bg); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
/* Forces a wrap at a chosen point rather than leaving it to whatever the
   viewport happens to allow. A zero-height item that fills the line, so the
   flex items after it start a new row. Empty and aria-hidden, so it is not
   announced and is not a tab stop. */
.btn-row__break {
  flex-basis: 100%;
  height: 0;
  /* The row gap applies above and below this item, so the two rows sit 28px
     apart rather than 14px. That reads as a deliberate split between the
     primary actions and the two Explore links. Set margin-block: -7px to
     collapse it back to a single 14px gap. */
  margin: 0;
}

/* ---------- Header ------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(5, 11, 26, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 56px; width: auto; }
.brand__fallback {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.04em;
  line-height: 1.05;
}

.site-nav { display: flex; align-items: center; gap: 34px; }

.site-nav a {
  font-family: var(--font-mono);
  font-size: 15px;
  text-decoration: none;
  color: var(--text-body);
  letter-spacing: 0.04em;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }

.site-nav .btn { font-size: 13px; padding: 12px 20px; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  margin-inline: auto;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before, .nav-toggle span::after { content: ''; position: relative; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 4px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Hero --------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: 118px 104px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero__inner { position: relative; z-index: 2; max-width: 900px; }
.hero h1 {
  font-size: clamp(44px, 6.6vw, 72px);
  font-weight: 900;
  line-height: 0.96;
}
.hero .lede { margin-top: 28px; max-width: 700px; }

.hero--page { padding-block: 96px 84px; }
.hero--page h1 { font-size: clamp(40px, 6vw, 64px); }

/* Hero media stack: photograph plus scrim. Kept as CSS layers rather than
   baked into the JPG so the scrim opacity stays adjustable without
   re-exporting artwork. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}

/* Scrim. Interior pages sit darker than the home hero. */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #050b1a;
  opacity: 0.80;
}
.hero--home .hero__bg::after { opacity: 0.0; }

/* Per-page hero photographs */
.hero--home  .hero__bg { background-image: url('../img/hero-home.jpg'); opacity: 0.5;}
.hero--delta .hero__bg { background-image: url('../img/hero-delta.jpg'); opacity: 0.5;}
.hero--cet   .hero__bg { background-image: url('../img/hero-cet.jpg'); opacity: 0.5;}
/* Team, Privacy and Terms carry no photograph in the Figma design. This is a
   frame from the client's own product shoot (511A9428), dark enough on the left
   that the headline stays legible. Swap if Doyle sends a team or yard shot. */
.hero--interior .hero__bg { background-image: url('../img/hero-interior.jpg'); opacity: 0.5;}

/* ---------- Product cards ------------------------------------------------ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.product-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* The border is semi-transparent white. Without padding-box clipping, the
     card's own background paints under it and brightens the border, which
     shows up worst at the rounded corners. */
  background-clip: padding-box;
  /* Own stacking context. A transformed child (the hover zoom) inside a
     rounded overflow:hidden parent otherwise leaves pale fringes at the
     corners in Chrome. */
  isolation: isolate;
}
/* The card already clips, but the media box needs its own overflow so the
   scaled image is cropped by the frame rather than pushing past the radius. */
.product-card__media {
  aspect-ratio: 320 / 260;
  background: var(--surface-alt);
  overflow: hidden;
}
.product-card__media img {
  display: block;          /* inline images sit on the text baseline, which
                              leaves a few pixels of the box showing beneath */
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.product-card:hover .product-card__media img,
.product-card:focus-within .product-card__media img {
  transform: scale(1.1);
}
/* No reduced-motion override here on purpose. The global rule at the bottom of
   this file already collapses every transition to 0.01ms, so with Reduce Motion
   on the image still zooms, it just does it instantly with no travel. That is
   what the preference asks for: remove the animation, not the effect. An
   earlier version killed the transform outright, which made the feature look
   broken to anyone with Reduce Motion enabled in System Settings. */
.product-card__body { padding: 26px 26px 30px; }
.product-card__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.product-card h3 { font-size: 32px; font-weight: 700; margin-top: 10px; }
.product-card p { margin-top: 14px; font-size: 15px; }

/* Stretched link. The <a> is on the heading for a sensible accessible name;
   its ::after covers the whole card so the entire card is the hit area.
   .product-card needs position: relative for that to work, and the media and
   body sit above it so text stays selectable. */
.product-card { position: relative; }
.product-card__link {
  color: inherit;
  text-decoration: none;
}
.product-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.product-card:hover .product-card__link { color: var(--accent); }

/* Focus ring draws around the whole card rather than the few words of the
   heading, so keyboard users see what they are about to activate. */
.product-card:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.product-card__link:focus-visible { outline: none; }

/* Same face and size as the card's body copy, just bold. It reads as the last
   line of the paragraph rather than as a separate UI control, which is the
   point: the whole card is the link, so this is a cue, not a button. */
.product-card__cta {
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  transition: color .16s ease;
}
.product-card:hover .product-card__cta { color: var(--accent); }

/* ---------- Split (text + image) ---------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 500px;
  gap: 72px;
  align-items: center;
}
.split__media img { width: 100%; border-radius: var(--radius-lg); }
.split h2 { font-size: clamp(32px, 4vw, 48px); font-weight: 800; }
.split .lede { margin-top: 24px; font-size: 16px; }

.feature-list { margin-top: 40px; display: grid; gap: 26px; }
.feature-list h3 { font-size: 18px; font-weight: 700; }
.feature-list p { margin-top: 6px; font-size: 14px; }

/* ---------- Numbered claim grid ----------------------------------------- */

.claim-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); }
.claim {
  background: var(--bg);
  padding: 44px 40px;
}
.claim__index {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--accent-text);
}
.claim h3 { font-size: 28px; font-weight: 700; margin-top: 14px; }
.claim p { margin-top: 14px; font-size: 15px; }

/* ---------- Feature tiles ------------------------------------------------ */

.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tile {
  border: 1px solid var(--line);
  border-top: 2px solid var(--line-accent);
  border-radius: var(--radius);
  padding: 30px 26px;
  background: var(--surface);
}
.tile__index {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}
.tile h3 { font-size: 20px; font-weight: 700; margin-top: 12px; }
.tile p { margin-top: 10px; font-size: 14px; }

/* ---------- Spec table --------------------------------------------------- */

.spec-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }

table.spec {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 14px;
  min-width: 720px;
  /* The caption and thead already paint --surface; the body rows did not, so
     the flag backdrop showed through them. Solid ground across the whole
     table also keeps the zebra striping reading as a stripe rather than as a
     change in the flag behind it. */
  background: var(--surface);
}
table.spec caption {
  text-align: left;
  padding: 20px 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
table.spec th, table.spec td {
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
table.spec thead th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface);
  white-space: nowrap;
}
table.spec tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
table.spec tbody th { color: var(--text); font-weight: 600; white-space: nowrap; }
table.spec td { color: var(--text-body); white-space: nowrap; }
table.spec tbody tr:last-child th,
table.spec tbody tr:last-child td { border-bottom: 0; }

.spec-download { margin-top: 26px; }

/* ---------- Torque finder ----------------------------------------------- */

.finder { margin-top: 40px; }
.finder__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 24px;
}
.finder__controls .field { flex: 1 1 260px; }
/* .field styles the form inputs already; select is not covered there. */
.finder__controls select {
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 14px 16px;
}
.finder__controls select:focus { border-color: var(--accent); outline: none; }
.finder__controls .btn { flex: 0 0 auto; }

.finder__count {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
  min-height: 1.2em;          /* hold the space so the table does not jump */
}

.finder__scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* Sortable headers are real buttons, so they are keyboard reachable and
   announced as controls rather than looking clickable and not being. */
.finder__sort {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.finder__sort::after {
  content: '\2195';           /* up-down arrow: sortable, not yet sorted */
  opacity: .35;
  font-size: 12px;
}
.finder__sort:hover { color: var(--text); }
.finder__sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[aria-sort='ascending']  .finder__sort::after { content: '\2191'; opacity: 1; color: var(--accent); }
[aria-sort='descending'] .finder__sort::after { content: '\2193'; opacity: 1; color: var(--accent); }

.finder__table tbody th a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.finder__table tbody th a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.finder__note {
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-muted);
  border-left: 2px solid var(--accent);
  padding-left: 16px;
}
.finder__note strong { color: var(--text); }

@media (max-width: 640px) {
  .finder__controls { gap: 16px; }
  .finder__controls .field { flex: 1 1 100%; }
}

/* ---------- Producing freedom ------------------------------------------- */

.freedom {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: 132px;
  border-block: 1px solid var(--line);
  /* Opaque, so the flag backdrop stops at this band. Two things in here need
     flat ground: the rig silhouette, which is a 5% white knockout and turns to
     mud over stripes, and the PBPA / ISN / ComplyWorks marks, which are third
     party logos and should not be read as sitting on a flag. Everything above
     and below this band still carries the backdrop. */
  background: var(--bg);
}
.freedom__bg {
  position: absolute;
  inset: 0;
  /* Cropped to the silhouette and knocked out to transparency, so the shape sits
     on the dark band instead of dragging a white plate along with it. Rendered
     white in the PNG, which makes `opacity` below the only intensity control.
     Two numbers to tune: the width cap here, and the opacity. */
  background-image: url('../img/rig-bg.png');
  background-size: min(980px, 88%) auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  opacity: 0.05;
}
/* The gradient scrim that used to sit here existed to hold the headline legible
   over a full-bleed photographic plate. The plate is gone, the band is already
   dark, and the scrim inherited the wrapper's opacity anyway so it was doing
   almost nothing. Removed rather than left as decoration. */
.freedom .container { position: relative; z-index: 2; }
.freedom h2 { font-size: clamp(34px, 4.4vw, 56px); font-weight: 800; }
.freedom .lede { margin: 24px auto 0; max-width: 720px; }
.freedom .eyebrow { color: var(--accent-text); }

.compliance {
  margin-top: 62px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 68px;
  flex-wrap: wrap;
}
.compliance figure { margin: 0; text-align: center; }
.compliance a {
  display: inline-block;
  border-radius: 4px;
  transition: opacity .18s ease;
}
.compliance a:hover { opacity: .7; }
.compliance a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}
.compliance img { height: 96px; width: auto; margin-inline: auto; display: block; }
.compliance figcaption {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text);
  margin-top: 16px;
}

/* ---------- Contact ------------------------------------------------------ */

.locations { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-bottom: 72px; }

.location {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: start;
}
.location__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.location h3 { font-size: 28px; font-weight: 700; margin-top: 8px; }
.location address { font-style: normal; margin-top: 14px; font-size: 15px; color: var(--text-body); }
.location__contact { margin-top: 16px; display: grid; gap: 4px; }
.location__contact a {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-body);
  text-decoration: none;
}
.location__contact a:hover { color: var(--accent); }
/* Leaflet map container. Needs an explicit height or Leaflet renders nothing. */
.location__map {
  width: 300px;
  height: 220px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-alt);
}
.location__map img { width: 100%; height: auto; }

.location__map .leaflet-container {
  width: 100%;
  height: 100%;
  background: var(--surface-alt);
  font-family: var(--font-body);
}

/* Matches the address above it, bolded. Same face and size, so it reads as
   part of the address block rather than as a separate control. */
.location__directions {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.location__directions:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Leaflet popups are light by default and would flash white against the dark
   section. The popup link needs its own colour for the same reason. */
.location__map .leaflet-popup-content a {
  color: var(--accent-strong);
  font-weight: 600;
}

/* The star marker. Leaflet gives a divIcon a white background and a border by
   default, which would sit behind the star as a visible square. */
.map-pin {
  background: none;
  border: 0;
}
.map-pin svg {
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
}

/* OpenStreetMap ships light tiles. Darken just the tile pane so the map sits
   with the palette, without depending on a dark-tile provider that wants an
   API key. Applied to the tile pane only, so markers, popups and controls
   keep their real colours. */
.location__map .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9) saturate(0.75);
}
.location__map .leaflet-popup-content-wrapper,
.location__map .leaflet-popup-tip {
  background: var(--surface);
  color: var(--text-body);
  border-radius: var(--radius);
}
.location__map .leaflet-popup-content { margin: 12px 14px; font-size: 13px; line-height: 1.5; }
.location__map .leaflet-popup-content strong { color: var(--text); }
.location__map .leaflet-control-attribution {
  background: rgba(5, 11, 26, .7);
  color: var(--text-muted);
  font-size: 10px;
}
.location__map .leaflet-control-attribution a { color: var(--text-muted); }
.location__map .leaflet-bar a {
  background: var(--surface);
  color: var(--text);
  border-bottom-color: var(--line);
}
.location__map .leaflet-bar a:hover { background: var(--surface-alt); }

/* Form */
.inquiry {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 44px;
}
.inquiry h3 { font-size: 32px; font-weight: 700; }
.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 32px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field input, .field textarea {
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 14px 16px;
}
.field input::placeholder, .field textarea::placeholder { color: #64748b; }
.field input:focus, .field textarea:focus { border-color: var(--accent); outline: none; }
.field textarea { min-height: 140px; resize: vertical; }

/* The Turnstile iframe is a fixed 300px wide. Inside a narrow grid column on a
   small phone that pushes the form past the viewport and the whole page gains a
   horizontal scrollbar, so cap it. */
#turnstile-widget {
  margin: 28px 0 4px;
  max-width: 100%;
  overflow-x: auto;
}

.form-foot {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.form-note {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Honeypot. Off-screen rather than display:none, because some bots skip
   hidden fields but happily fill positioned ones. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field--consent { margin-top: 4px; }
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  cursor: pointer;
}
.consent input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex: none;
  accent-color: var(--accent-strong);
}

.form-status {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text-body);
}
.form-status.is-ok    { border-color: #2f7d4f; color: #a7e0bd; }
.form-status.is-error { border-color: var(--accent-strong); color: #f5b1b6; }

/* ---------- Team --------------------------------------------------------- */

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.person {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 22px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.person__photo { width: 140px; height: 140px; border-radius: var(--radius); object-fit: cover; background: var(--surface-alt); }
.person h3 { font-size: 28px; font-weight: 700; line-height: 1.05; }
.person__role {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-top: 8px;
}
.person__contact { margin-top: 14px; display: grid; gap: 4px; }
.person__contact a {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-body);
  text-decoration: none;
  word-break: break-all;
}
.person__contact a:hover { color: var(--accent); }
.person__linkedin { display: inline-flex; margin-top: 12px; color: var(--text-muted); }
.person__linkedin:hover { color: var(--accent); }
.person__linkedin svg { width: 20px; height: 20px; fill: currentColor; }

/* ---------- Long-form / legal pages -------------------------------------- */

.prose { max-width: 760px; }
.prose h2 {
  font-size: 26px;
  font-weight: 700;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.prose h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-top: 28px;
}
.prose p { margin-top: 14px; font-size: 15px; line-height: 1.75; }
.prose ul { margin: 14px 0 0; padding-left: 20px; }
.prose li { margin-top: 8px; font-size: 15px; line-height: 1.75; }
.prose a { color: var(--accent-text); }
.prose strong { color: var(--text); }
.prose address { font-style: normal; margin-top: 14px; font-size: 15px; line-height: 1.75; }
.prose__updated {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 36px;
}

/* ---------- Footer ------------------------------------------------------- */

.site-footer {
  background: var(--surface-alt);
  border-top: 1px solid var(--line);
  padding-block: 68px 0;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 56px; }
.site-footer h2 { font-size: 26px; font-weight: 800; }
.site-footer p { margin-top: 16px; font-size: 14px; max-width: 420px; }
.footer-col h3 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.footer-col ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { font-size: 14px; text-decoration: none; color: var(--text-body); }
.footer-col a:hover { color: var(--accent); }
/* LinkedIn mark sits inline, to the left of the company name */
.footer-link--social { display: inline-flex; align-items: center; gap: 8px; }
.footer-link--social svg { width: 16px; height: 16px; fill: currentColor; flex: none; }

.footer-bar {
  margin-top: 56px;
  border-top: 1px solid var(--line);
  padding-block: 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Responsive --------------------------------------------------- */

@media (max-width: 1080px) {
  .card-grid, .tile-grid, .team-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 48px; }
  .locations { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  :root { --gutter: 20px; --section-y: 72px; }

  .nav-toggle { display: block; }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 8px 20px 24px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .site-nav[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
  .site-nav a { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--line); color: var(--accent); }
  .site-nav .btn { margin-top: 20px; width: 100%; }

  .card-grid, .tile-grid, .team-grid, .claim-grid, .field-grid { grid-template-columns: 1fr; }
  .claim-grid { gap: 1px; }
  .claim { padding: 32px 24px; }

  .location { grid-template-columns: 1fr; }
  .location__map { width: 100%; }

  .inquiry { padding: 28px 22px; }
  .person { grid-template-columns: 1fr; }
  .person__photo { width: 120px; height: 120px; }

  .compliance { gap: 40px; }
  .compliance img { height: 72px; }

  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .btn-row .btn { width: 100%; }
}

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