:root {
  --spf-navy: #212157;
  --spf-navy-dark: #12123b;
  --spf-red: #cd3727;
  --spf-red-hover: #b02a1c;
  --spf-cream: #dcd0b6;
  --spf-cream-light: #f7f5ef;
  --spf-white: #ffffff;
  --spf-border: rgba(33, 33, 87, 0.12);
  --spf-border-light: rgba(220, 208, 182, 0.25);
  --spf-text: #1a1e29;
  --spf-text-muted: #565e70;
  --fs-base: 17px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--spf-cream-light);
  color: var(--spf-text);
  /* FIX 4: fonts now match the Group site (Inter) instead of
     Manrope/Playfair Display, so the two sites read as one company. */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  font-size: var(--fs-base);
}
h1, h2, h3, h4, .display-font { font-family: 'Inter', sans-serif; font-weight: 600; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
img { max-width: 100%; }

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

/* Global press feedback, matching the Group site's convention. */
a, button {
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s cubic-bezier(.4,0,.2,1);
}
a:active, button:active { transform: scale(.97); }

.eyebrow {
  display: inline-block;
  color: var(--spf-red);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
}

/* ============================================================
   FIX 3: THE RED-ACCENT CORNER MOTIF
   The diagonal line pair (cream + red) plus a solid red base border —
   this was already present on the Coastguard header only. It's now
   the standard treatment for every page header on the site, so the
   red accent reads as a deliberate brand signature rather than a
   one-off on a single page.
   ============================================================ */
.corner-lines {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.corner-lines::before,
.corner-lines::after {
  content: "";
  position: absolute;
  width: 160%;
  height: 1px;
  right: -30%;
  background: rgba(220, 208, 182, 0.22);
  transform-origin: right center;
}
.corner-lines::before { top: 18%; transform: rotate(11deg); }
.corner-lines::after   { top: 78%; transform: rotate(-7deg); background: rgba(205, 55, 39, 0.28); }

.gov-ribbon {
  background: var(--spf-navy-dark);
  color: var(--spf-cream);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 0;
  border-bottom: 1px solid var(--spf-border-light);
}
/* FIX 1 (part of it): the two spans used to overflow off-screen at
   narrow widths with nowhere to go. flex-wrap lets the second span
   drop to its own line instead of being clipped by the viewport. */
.gov-ribbon .wrap {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center;
  gap: 4px 16px;
}

header {
  background: var(--spf-navy);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
nav.wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 176px;   /* was a fixed "height" — that forced the logo,
    subtitle AND the "NOAH Group" pill into a rigid box, so at certain
    widths the pill got crushed right up against the bottom edge. A
    min-height lets the bar grow taller if its content ever needs more
    room, instead of squeezing everything to fit no matter what. */
  /* BUG FIX: this said "padding: 14px 0", which also zeroed the LEFT and
     RIGHT padding that .wrap provides (nav.wrap is more specific than
     .wrap, so it won). That is why the logo and the burger button were
     glued to the very edges of the phone screen. Only top/bottom now. */
  padding-top: 14px; padding-bottom: 14px;
  gap: 16px;
}
.brand-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex-shrink: 0;
}
/* The logo itself is its own link; focus-visible now targets that
   inner link rather than the (no longer interactive) wrapper div. */
.brand-group > a:first-child { display: block; }
.brand-group > a:first-child:focus-visible { outline: 2px solid var(--spf-cream); outline-offset: 4px; }
.brand-logo {
  width: 128px;
  height: 128px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}
.brand-meta { display: flex; flex-direction: column; text-align: left; gap: 8px; }
.brand-meta .title {
  color: var(--spf-white);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.1;
}
.brand-meta .sub {
  color: var(--spf-cream);
  font-size: 12.5px;
  letter-spacing: 1.6px;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 0;
}
.brand-logo-fallback {
  display: none;
  width: 128px;
  height: 128px;
  border-radius: 4px;
  background: var(--spf-cream);
  color: var(--spf-navy);
  font-weight: 800;
  font-size: 28px;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

/* FIX 5, refined: a bordered pill reads unmistakably as "clickable" —
   plain underlined text is easy to skim past entirely. This sits in
   the sticky header (persists through scroll) and outside .nav-bar
   (so it's never hidden behind the mobile hamburger either). */
.group-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(220, 208, 182, 0.85);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 6px 14px 6px 10px;
  margin-top: 2px;
  border: 1px solid rgba(220, 208, 182, 0.3);
  border-radius: 20px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.group-link:hover { background: rgba(220,208,182,0.12); border-color: var(--spf-cream); color: var(--spf-cream); }
.group-link svg { width: 12px; height: 12px; flex-shrink: 0; }

.nav-bar { display: flex; list-style: none; gap: 2px; align-items: center; flex-wrap: nowrap; }
.nav-bar li a {
  color: var(--spf-white);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 9px 10px;
  border-radius: 4px;
  transition: background 0.2s ease, color 0.2s ease;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
}
.nav-bar li a:hover,
.nav-bar li a.active {
  background: rgba(220, 208, 182, 0.15);
  color: var(--spf-cream);
}
.nav-bar li a.active {
  border-bottom: 3px solid var(--spf-red);
  border-radius: 4px 4px 0 0;
}
.nav-cta {
  background: var(--spf-red) !important;
  color: var(--spf-white) !important;
  padding: 9px 16px !important;
  border-radius: 4px !important;
  margin-left: 6px;
}
.nav-cta:hover { background: var(--spf-red-hover) !important; }

.mobile-toggle {
  display: none; background: none; border: none; color: var(--spf-cream); cursor: pointer;
  flex-shrink: 0; min-width: 48px; min-height: 48px; padding: 7px;
  align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.mobile-toggle:focus-visible { outline: 2px solid var(--spf-cream); outline-offset: 2px; border-radius: 6px; }
.mobile-toggle svg { width: 34px; height: 34px; fill: currentColor; pointer-events: none; }

.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;   /* was a hardcoded "176px" — a guess that assumed a fixed
    header height. Since the header can now grow (min-height, not
    height), this instead means "right after wherever the header
    actually ends," which stays correct automatically at any size. */
  left: 0;
  width: 100%;
  background: var(--spf-navy-dark);
  flex-direction: column;
  border-top: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  z-index: 1000;
  /* never taller than what is left of the screen below the header —
     on a phone held sideways the 8 links do not fit, so scroll inside */
  max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px);
  overflow-y: auto; overscroll-behavior: contain;
}
.mobile-menu.active { display: flex; }
/* FIX 1: this now matches the breakpoint below (1150px) rather than
   901px, so it can never contradict the point where the nav actually
   switches to hamburger mode. */
@media (min-width: 1240px) {
  .mobile-menu { display: none !important; }
}
.mobile-menu a {
  color: var(--spf-white);
  padding: 18px 28px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  letter-spacing: 1px;
  text-align: left;
  transition: background 0.2s;
}
.mobile-menu a:hover {
  background: rgba(255,255,255,0.05);
  color: var(--spf-cream);
}

.scroll-indicator-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90%;
  color: var(--spf-cream);
  font-size: clamp(8.5px, 1.6vw, 10.5px);
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  z-index: 5;
  opacity: 0.85;
  pointer-events: none;
}
.scroll-chevrons { width: clamp(18px, 4vw, 24px); height: clamp(18px, 4vw, 24px); display: block; }
.scroll-chevrons path { animation: chevronPulse 1.6s ease-in-out infinite; transform-origin: center; }
.scroll-chevrons path:nth-child(2) { animation-delay: 0.25s; }
@keyframes chevronPulse {
  0%   { transform: translateY(-3px); opacity: 0.25; }
  50%  { transform: translateY(3px);  opacity: 1; }
  100% { transform: translateY(-3px); opacity: 0.25; }
}

.division-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: -60px 0 60px;
  position: relative;
  z-index: 10;
}
.division-card {
  background: var(--spf-white);
  border: 1px solid var(--spf-border);
  border-top: 5px solid var(--spf-navy);
  border-radius: 4px;
  padding: 36px 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.division-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(0,0,0,0.12); }
.division-card.cg-highlight { border-top-color: var(--spf-red); }
.division-card .badge-code {
  display: inline-block;
  align-self: flex-start;
  background: var(--spf-navy);
  color: var(--spf-cream);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}
.division-card.cg-highlight .badge-code { background: var(--spf-red); color: var(--spf-white); }
.division-card h3 { font-size: 23px; color: var(--spf-navy); margin-bottom: 12px; }
.division-card p { font-size: 15px; color: var(--spf-text-muted); line-height: 1.65; margin-bottom: 24px; }

.card-btn {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--spf-navy); font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.5px;
  cursor: pointer; background: none; border: none;
}
.card-btn:hover { color: var(--spf-red); }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.25s ease; }
.reveal.reveal-visible { opacity: 1; transform: translateY(0); }

.stats-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  background: var(--spf-navy); border-radius: 6px; padding: 34px 20px;
  margin-bottom: 56px; box-shadow: 0 16px 36px rgba(0,0,0,0.1);
}
.stat-item { text-align: center; }
.stat-number {
  display: block; font-size: clamp(24px, 3.4vw, 34px); font-weight: 700;
  color: var(--spf-cream); line-height: 1.1;
}
.stat-label {
  display: block; margin-top: 6px; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.8px; text-transform: uppercase; color: rgba(220, 208, 182, 0.75);
}

.accred-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.accred-badge {
  display: flex; align-items: center; gap: 12px;
  background: var(--spf-white); border: 1px solid var(--spf-border);
  border-radius: 30px; padding: 10px 20px 10px 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.04);
}
.accred-badge svg { width: 26px; height: 26px; color: var(--spf-red); flex-shrink: 0; }
.accred-badge span {
  font-size: 12px; font-weight: 700; color: var(--spf-navy);
  line-height: 1.35; text-transform: uppercase; letter-spacing: 0.3px;
}

.hero-banner {
  background: linear-gradient(135deg, var(--spf-navy-dark) 0%, var(--spf-navy) 60%, #2f3275 100%);
  color: var(--spf-white); padding: 90px 0 160px;
  position: relative; overflow: hidden;
}
.hero-banner::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(220, 208, 182, 0.03) 35px, rgba(220, 208, 182, 0.03) 70px);
  z-index: 1;
}
.hero-media-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.hero-watermark-logo {
  position: absolute; top: 50%; left: 50%; width: 560px; max-width: 75vw;
  transform: translate(-50%, -50%); opacity: 0.07;
  filter: grayscale(1) brightness(2.4); pointer-events: none;
}
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(18,18,59,0.86) 0%, rgba(33,33,87,0.8) 55%, rgba(47,50,117,0.72) 100%);
}
.hero-wave { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: 64px; z-index: 1; display: block; }
.hero-body { position: relative; z-index: 2; max-width: 820px; }
.hero-tag {
  color: var(--spf-cream); font-size: 12.5px; font-weight: 800; letter-spacing: 3px;
  text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
}
.hero-tag::before { content: ""; width: 24px; height: 2px; background: var(--spf-red); }
.hero-body h1 { font-size: clamp(35px, 5vw, 56px); line-height: 1.15; font-weight: 700; margin-bottom: 20px; }
.hero-body h1 span { color: var(--spf-cream); }
.hero-body p { font-size: 18px; color: rgba(247, 245, 239, 0.85); line-height: 1.7; margin-bottom: 32px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px; border-radius: 4px;
  cursor: pointer; border: none; transition: background 0.2s ease, color 0.2s ease;
}
.btn-red { background: var(--spf-red); color: var(--spf-white); }
.btn-red:hover { background: var(--spf-red-hover); }
.btn-outline { background: transparent; border: 1.5px solid var(--spf-cream); color: var(--spf-cream); }
.btn-outline:hover { background: var(--spf-cream); color: var(--spf-navy); }
.btn-outline.on-light { border-color: var(--spf-navy); color: var(--spf-navy); }
.btn-outline.on-light:hover { background: var(--spf-navy); color: var(--spf-cream); }
.btn:focus-visible { outline: 2px solid var(--spf-red); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.section-pad { padding: 80px 0; }
.section-head { margin-bottom: 46px; }
.section-head.center { text-align: center; max-width: 700px; margin-left: auto; margin-right: auto; }
.section-head h2 { font-size: 36px; color: var(--spf-navy); margin-top: 6px; }
.section-head p { color: var(--spf-text-muted); font-size: 17px; margin-top: 10px; }

/* Every page header now gets the red base border by default (used to
   be Coast-Guard-only) — see FIX 3 note above. */
.division-page-header {
  background: var(--spf-navy); color: var(--spf-white);
  padding: 60px 0 100px; border-bottom: 4px solid var(--spf-red);
  position: relative; overflow: hidden;
}
.division-page-header .wrap { position: relative; z-index: 2; }
.division-page-header h1 { font-size: 39px; color: var(--spf-cream); margin-top: 6px; }
.division-page-header p { font-size: 16.5px; color: rgba(255,255,255,0.8); margin-top: 8px; }

.two-col-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center; }
.two-col-grid h2 { font-size: 27px; color: var(--spf-navy); }
.two-col-grid > div > p { margin-top: 14px; color: var(--spf-text-muted); font-size: 16px; }

.feature-list { list-style: none; margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.feature-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; color: var(--spf-text); line-height: 1.55; }
.feature-list li::before {
  content: "✓"; flex: 0 0 22px; background: var(--spf-red); color: var(--spf-white);
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 900; margin-top: 2px;
}
.feature-list li .fl-text { flex: 1 1 auto; min-width: 0; }

.media-box {
  background: var(--spf-navy-dark); border-radius: 6px; overflow: hidden;
  border: 1px solid var(--spf-border); box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}
.media-box video { width: 100%; height: auto; display: block; }
.media-box img { width: 100%; height: 360px; object-fit: cover; display: block; }

.investigation-graphic { display: flex; align-items: center; justify-content: center; }
.investigation-graphic img { max-width: 100%; height: auto; display: block; }

.home-media-frame { position: relative; border: 3px solid var(--spf-cream); }
.home-media-frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,18,59,0) 35%, rgba(18,18,59,0.6) 100%);
  pointer-events: none;
}

.cg-video-frame {
  width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 6px;
  overflow: hidden; border: 1px solid var(--spf-border); box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}
.cg-video-frame video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }

/* ============================================================
   FIX 2: THE RADAR GRAPHIC
   Rebuilt cleanly: every vessel dot now sits exactly on one of the
   three labeled rings, inside the shaded sweep sector, instead of
   scattered at arbitrary points outside the geometry it's meant to
   represent. Recolored to the site's own red/navy pair consistently.
   ============================================================ */
.radar-graphic { position: relative; max-width: 360px; margin: 0 auto; aspect-ratio: 1 / 1; }
.radar-graphic svg { width: 100%; height: 100%; overflow: visible; }
.radar-ring { fill: none; stroke: var(--spf-navy); stroke-opacity: 0.2; stroke-width: 1.5; }
.radar-grid-line { stroke: var(--spf-navy); stroke-opacity: 0.12; stroke-width: 1; }
.radar-sweep { transform-origin: 150px 150px; animation: radarSweep 5s linear infinite; will-change: transform; }
.radar-sweep path { fill: var(--spf-red); opacity: 0.16; }
@keyframes radarSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.radar-center { fill: var(--spf-navy); }
.radar-vessel { fill: var(--spf-red); stroke: var(--spf-white); stroke-width: 1.5; animation: radarBlip 3s ease-in-out infinite; }
.radar-vessel:nth-child(odd) { animation-delay: -1.5s; }
@keyframes radarBlip { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.radar-label {
  position: absolute; top: 50%; left: 50%;
  font-size: 9.5px; font-weight: 800; letter-spacing: 1px;
  color: var(--spf-text-muted); text-transform: uppercase; pointer-events: none;
}
/* Previously offset only 6px sideways (near-vertical, right on the
   wedge's own straight edge — hence "sitting on the boundary" rather
   than clearly inside the shaded zone). Recalculated to the same ~15°
   angle as the dots below, so both sit clearly inside the sector. */
.radar-label-inner { transform: translate(16px, -58px); }
.radar-label-outer { transform: translate(27px, -101px); }
.radar-label-far   { transform: translate(38px, -140px); }

#page-coastguard, #coastguard-page { position: relative; overflow-x: hidden; }
.division-page-header.cg-header { min-height: 380px; display: flex; align-items: center; }
.cg-header-grid { display: flex; align-items: center; justify-content: space-between; gap: 30px; width: 100%; }
.cg-text-side { flex: 1; max-width: 780px; position: relative; z-index: 2; }
.cg-anchor-holder { width: 190px; height: 190px; flex-shrink: 0; position: relative; z-index: 2; }

.cg-anchor-morph {
  position: fixed;
  top: var(--cg-top, 140px); left: var(--cg-left, calc(50% + 400px));
  width: var(--cg-width, 180px); height: auto;
  z-index: var(--cg-z, 5); pointer-events: none;
  transform: translate(-50%, -50%) scale(var(--cg-scale, 1));
  filter: blur(var(--cg-blur, 0px)); opacity: var(--cg-opacity, 0);
  transition: transform 0.08s linear, filter 0.08s linear, opacity 0.08s linear;
  will-change: top, left, transform, filter, opacity;
}

.gallery-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; }
.filter-btn {
  padding: 8px 18px; font-size: 13px; font-weight: 700; text-transform: uppercase;
  background: var(--spf-white); border: 1px solid var(--spf-border); color: var(--spf-navy);
  border-radius: 30px; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.filter-btn.active, .filter-btn:hover { background: var(--spf-navy); color: var(--spf-cream); border-color: var(--spf-navy); }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 24px; }
.gallery-item {
  background: var(--spf-white); border-radius: 4px; overflow: hidden;
  border: 1px solid var(--spf-border); transition: transform 0.2s, box-shadow 0.2s; cursor: pointer;
}
.gallery-item:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); }
.gallery-item .thumb { height: 200px; background: var(--spf-navy-dark); position: relative; overflow: hidden; }
.gallery-item .thumb img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.gallery-item .folder-tag {
  position: absolute; top: 10px; left: 10px; background: rgba(33, 33, 87, 0.88); color: var(--spf-cream);
  font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 2px; text-transform: uppercase;
}
.gallery-item .info { padding: 16px; }
.gallery-item .info h4 { font-size: 16px; color: var(--spf-navy); margin-bottom: 4px; }
.gallery-item .info p { font-size: 13px; color: var(--spf-text-muted); }

.timeline-graphic { position: relative; max-width: 920px; margin: 0 auto; padding: 10px 0; }
.timeline-spine {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--spf-navy) 0%, var(--spf-red) 100%); transform: translateX(-50%);
}
.timeline-node { position: relative; width: 50%; box-sizing: border-box; padding: 0 46px 48px 0; }
.timeline-node.tl-right { left: 50%; padding: 0 0 48px 46px; }
.timeline-node:last-child { padding-bottom: 0; }
.timeline-node::after {
  content: "✓"; position: absolute; top: 2px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--spf-red); color: var(--spf-white); font-size: 12px; font-weight: 900;
  display: grid; place-items: center;
  box-shadow: 0 0 0 4px var(--spf-cream-light), 0 0 0 5px var(--spf-border); z-index: 2;
}
.timeline-node.tl-left::after { right: -13px; }
.timeline-node.tl-right::after { left: -13px; }
.timeline-card {
  background: var(--spf-white); border: 1px solid var(--spf-border); border-top: 3px solid var(--spf-navy);
  border-radius: 4px; padding: 16px 20px; box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}
.timeline-node.tl-right .timeline-card { border-top-color: var(--spf-red); }
.timeline-date { display: block; font-size: 11px; font-weight: 800; color: var(--spf-red); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 4px; }
.timeline-node.tl-right .timeline-date { color: var(--spf-navy); }
.timeline-card h3 { font-size: 15.5px; color: var(--spf-navy); line-height: 1.4; }
.timeline-node-current::after { content: ""; background: var(--spf-red); animation: timelineLivePulse 1.8s ease-in-out infinite; }
@keyframes timelineLivePulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--spf-cream-light), 0 0 0 5px var(--spf-border); }
  50%      { box-shadow: 0 0 0 4px var(--spf-cream-light), 0 0 0 10px rgba(205, 55, 39, 0.3); }
}
.timeline-card-current { background: var(--spf-navy); border-top-color: var(--spf-red); }
.timeline-card-current .timeline-date, .timeline-node.tl-left .timeline-card-current .timeline-date { color: var(--spf-cream); }
.timeline-card-current h3 { color: var(--spf-white); }

@media (max-width: 760px) {
  .timeline-graphic { padding-left: 34px; }
  .timeline-spine { left: 12px; transform: none; }
  .timeline-node, .timeline-node.tl-right { width: 100%; left: 0; padding: 0 0 34px 34px; }
  .timeline-node::after, .timeline-node.tl-left::after, .timeline-node.tl-right::after {
    left: -34px; right: auto; width: 22px; height: 22px; font-size: 10.5px;
  }
  .timeline-node.tl-right .timeline-date { color: var(--spf-red); }
}

.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 24px; }
.news-card {
  background: var(--spf-white); border: 1px solid var(--spf-border); border-top: 4px solid var(--spf-navy);
  border-radius: 4px; display: flex; flex-direction: column; padding: 24px 22px 26px; box-shadow: 0 8px 22px rgba(0,0,0,0.05);
}
.news-card .news-date { font-size: 11.5px; font-weight: 800; color: var(--spf-red); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 10px; }
.news-card h3 { font-size: 19px; color: var(--spf-navy); line-height: 1.35; margin-bottom: 10px; }
.news-card p { font-size: 14.5px; color: var(--spf-text-muted); line-height: 1.6; }

.lic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 22px; }
.lic-card {
  background: var(--spf-white); border: 1px solid var(--spf-border); border-radius: 4px; overflow: hidden;
  cursor: pointer; text-align: left; padding: 0; transition: transform 0.2s, box-shadow 0.2s;
}
.lic-card:hover, .lic-card:focus-visible { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0,0,0,0.1); outline: none; }
.lic-card .lic-thumb { height: 150px; background-size: cover; background-position: center; background-color: var(--spf-navy-dark); position: relative; }
.lic-card .lic-pages-badge {
  position: absolute; bottom: 8px; right: 8px; background: rgba(18,18,59,0.85); color: var(--spf-cream);
  font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.5px;
}
.lic-card .lic-info { padding: 14px 16px; }
.lic-card .lic-info h4 { font-size: 14.5px; color: var(--spf-navy); line-height: 1.4; }
.lic-card .lic-request-tag {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px;
  background: rgba(18,18,59,0.6); color: var(--spf-cream); font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1px; opacity: 0; transition: opacity 0.2s;
}
.lic-card:hover .lic-request-tag, .lic-card:focus-visible .lic-request-tag { opacity: 1; }

.lic-watermark { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
.lic-watermark span {
  position: absolute; color: rgba(255,255,255,0.55); font-size: 11px; font-weight: 800;
  letter-spacing: 0.5px; white-space: nowrap; transform: rotate(-25deg); text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

.tc-modal { display: none; position: fixed; inset: 0; background: rgba(10, 10, 30, 0.72); z-index: 3200; align-items: center; justify-content: center; padding: 20px; }
.tc-modal.active { display: flex; }
.tc-modal-inner {
  background: var(--spf-white); border-radius: 6px; max-width: 460px; width: 100%; max-height: 88vh;
  overflow-y: auto; padding: 34px 30px; position: relative; box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.tc-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 26px; color: var(--spf-text-muted); cursor: pointer; line-height: 1; }
.tc-step h3 { color: var(--spf-navy); font-size: 21px; margin-bottom: 14px; }
.tc-terms-box {
  max-height: 220px; overflow-y: auto; background: var(--spf-cream-light); border: 1px solid var(--spf-border);
  border-radius: 4px; padding: 16px 18px; margin-bottom: 18px; font-size: 13.5px; color: var(--spf-text-muted); line-height: 1.6;
}
.tc-terms-box p { margin-bottom: 10px; }
.tc-terms-box p:last-child { margin-bottom: 0; }
.tc-agree { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--spf-text); margin-bottom: 20px; cursor: pointer; }
.tc-agree input { margin-top: 3px; flex-shrink: 0; }
.tc-doc-context { font-size: 13.5px; color: var(--spf-text-muted); margin-bottom: 18px; }
.tc-form { display: flex; flex-direction: column; gap: 14px; }
.tc-form input, .tc-form select { padding: 13px; border: 1px solid var(--spf-border); border-radius: 4px; font-size: 14px; font-family: inherit; width: 100%; }
.tc-step#tcStepDone p { color: var(--spf-text-muted); font-size: 14.5px; margin-bottom: 20px; line-height: 1.6; }

.lic-modal { display: none; position: fixed; inset: 0; background: rgba(10, 10, 30, 0.95); z-index: 3000; align-items: center; justify-content: center; padding: 24px; }
.lic-modal.active { display: flex; }
.lic-modal-inner { max-width: 820px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; position: relative; }
.lic-close { position: absolute; top: 18px; right: 24px; background: none; border: none; color: var(--spf-cream); font-size: 34px; line-height: 1; cursor: pointer; z-index: 3010; }
.lic-viewer { position: relative; width: 100%; max-height: 75vh; aspect-ratio: 4 / 3; background: #0d0d26; border-radius: 4px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.lic-image { position: absolute; inset: 0; background-size: contain; background-repeat: no-repeat; background-position: center; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.lic-controls { display: flex; align-items: center; gap: 18px; }
.lic-arrow {
  background: rgba(220,208,182,0.12); border: 1px solid rgba(220,208,182,0.3); color: var(--spf-cream);
  width: 40px; height: 40px; border-radius: 50%; font-size: 20px; cursor: pointer; display: grid; place-items: center; transition: background 0.2s;
}
.lic-arrow:hover { background: rgba(220,208,182,0.25); }
.lic-arrow:disabled { opacity: 0.25; cursor: default; }
.lic-pageinfo { color: var(--spf-cream); font-size: 13.5px; font-weight: 700; letter-spacing: 0.5px; min-width: 100px; text-align: center; }
.lic-doc-title { color: var(--spf-white); font-size: 15px; text-align: center; max-width: 600px; line-height: 1.4; }

.lic-privacy-guard {
  position: fixed; inset: 0; background: #000; color: var(--spf-cream); display: none; align-items: center;
  justify-content: center; text-align: center; font-weight: 700; letter-spacing: 1px; z-index: 3100; padding: 24px;
}
.lic-privacy-guard.active { display: flex; }
.protected-page { -webkit-user-select: none; user-select: none; }

.dispatch-strip { background: var(--spf-navy-dark); color: var(--spf-cream); border-top: 4px solid var(--spf-red); padding: 60px 0; position: relative; overflow: hidden; }
.dispatch-strip .wrap { position: relative; z-index: 2; }
.dispatch-box { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; }
.dispatch-box h2 { font-size: 29px; }
.dispatch-actions { display: flex; flex-direction: column; gap: 14px; }
.btn-whatsapp { background: #25D366; color: #fff; font-weight: 800; }
.btn-whatsapp:hover { background: #1eb856; }
.btn-mail { background: var(--spf-cream); color: var(--spf-navy); font-weight: 800; }
.btn-mail:hover { background: var(--spf-white); }

footer { background: #0d0d26; color: rgba(220, 208, 182, 0.6); font-size: 13px; padding: 56px 0 24px; border-top: 1px solid var(--spf-border-light); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 24px; }
.foot-brand-name { font-size: 22px; font-weight: 700; letter-spacing: 2px; color: var(--spf-cream); margin-bottom: 10px; }
.foot-col p { line-height: 1.6; max-width: 280px; }
.foot-col h5 { color: var(--spf-cream); font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 16px; }
.foot-col a, .foot-col .foot-address { display: block; color: rgba(220, 208, 182, 0.7); margin-bottom: 10px; cursor: pointer; line-height: 1.5; }
.foot-col a:hover { color: var(--spf-white); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.foot-link { text-decoration: underline; cursor: pointer; }
.foot-link:hover { color: var(--spf-cream); }

@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }

/* FIX 1: THE RESPONSIVE NAV BUG
   The old breakpoints left a "dead zone" between 900px and 1300px —
   too narrow for 6 nav items + a CTA to fit on one line (even at a
   shrunk font size), but not yet narrow enough to switch to the
   hamburger menu. That gap is exactly what your screenshots show:
   overlapping, wrapping nav text. Moving the hamburger switch-over
   up to 1150px removes that dead zone entirely — there's no width
   left where the crowded row has to render at all. */
@media (max-width: 1300px) {
  .nav-bar li a { font-size: 11.5px; padding: 9px 8px; }
  .nav-cta { padding: 9px 12px !important; }
}

/* NAVIGATION switch-over: measured with the real Inter font, the 7 desktop
   links + tagline need ~1211px, so the burger takes over below 1240px.
   (Kept separate from the 1150px layout block so page content — cards,
   grids — does not change layout at this width.) */
@media (max-width: 1239px) {
  .nav-bar { display: none; }
  .mobile-toggle { display: block; }
  /* Compact header: logo + tagline/pill on one row, burger on the right.
     It used to stack vertically and take ~170px of a phone's height in a
     STICKY bar. Sizes are by height so both wide and square logo files fit. */
  nav.wrap { min-height: 0; padding-top: 10px; padding-bottom: 10px; gap: 12px; flex-wrap: nowrap; }
  .brand-group { flex-direction: row; align-items: center; gap: 14px; min-width: 0; flex: 1 1 auto; }
  .brand-logo { width: auto; height: 52px; max-width: 132px; }
  .brand-logo-fallback { width: 68px; height: 52px; font-size: 18px; }
  .brand-meta { gap: 6px; min-width: 0; }
  .brand-meta .sub { font-size: 10.5px; letter-spacing: 1.2px; line-height: 1.3; }
  .mobile-toggle { display: flex; }
  .mobile-menu { top: 100%; }   /* was a hard-coded 122px guess; 100% = "right below
    wherever the header actually ends", correct at every size */
}

@media (max-width: 1150px) {
  .division-grid { grid-template-columns: 1fr; margin-top: 20px; }
  .two-col-grid, .dispatch-box { grid-template-columns: 1fr; }
  .cg-header-grid { flex-direction: column; align-items: flex-start; gap: 18px; }
  /* The Coastguard emblem used to be display:none here, and the moving
     copy was parked at left: calc(50% + 400px) — i.e. off the right edge
     of any screen narrower than a laptop. Now it stays, smaller, above
     the title, and the script keeps the moving copy on top of it. */
  .cg-anchor-holder { display: block; width: 104px; height: 104px; order: -1; }
  .lic-viewer { max-height: 58vh; }
  .lic-close { top: 8px; right: 12px; }
  .hero-watermark-logo { width: 360px; }
  .hero-wave { height: 44px; }
  .hero-banner { padding: 70px 0 120px; }
  .tc-modal-inner { padding: 26px 22px; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .brand-meta .sub { display: none; }   /* the ribbon above already says who we are */
}
@media (max-width: 480px) {
  .wrap { padding: 0 18px; }
  .brand-group { gap: 10px; }
  .brand-logo { height: 46px; max-width: 96px; }
  .brand-logo-fallback { width: 60px; height: 46px; font-size: 16px; }
  .group-link { padding: 6px 12px 6px 9px; }
  .cg-anchor-holder { width: 88px; height: 88px; }
  .hero-body h1 { font-size: 30px; }
  .hero-body p { font-size: 16px; }
  .division-page-header h1 { font-size: 29px; }
  .section-head h2 { font-size: 26px; }
  .two-col-grid h2 { font-size: 22px; }
  .dispatch-box h2 { font-size: 22px; }
  .btn { padding: 12px 20px; font-size: 13px; }
  .scroll-indicator-wrap { bottom: 8px; gap: 2px; }
}

@media (max-width: 359px) {
  .brand-group { flex-wrap: wrap; row-gap: 6px; }
  .brand-logo { height: 40px; max-width: 84px; }
  .mobile-toggle { min-width: 44px; }
}

/* ---------- fixes added with the rebuilt script ---------- */

/* Without JavaScript the .reveal blocks (e.g. the stats strip) would stay
   invisible forever, so if scripting is off, just show them. */
@media (scripting: none) { .reveal { opacity: 1; transform: none; } }

/* iOS Safari cannot type into an input whose user-select is none, and the
   licensing page (a .protected-page) inherits that from the body. */
.protected-page input, .protected-page textarea, .protected-page select {
  -webkit-user-select: text; user-select: text;
}

/* Video: overlay play button (autoplay is blocked on some phones, e.g.
   Low-Power Mode) and a clear message if the file cannot be loaded. */
.cg-video-frame { position: relative; }
.video-play-btn {
  position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%;
  background: rgba(205,55,39,0.92); border: 3px solid #fff; color: #fff; cursor: pointer;
  display: grid; place-items: center; z-index: 4; box-shadow: 0 8px 26px rgba(0,0,0,0.45);
  -webkit-tap-highlight-color: transparent;
}
.video-play-btn svg { width: 30px; height: 30px; margin-left: 4px; fill: currentColor; }
.cg-video-frame.video-failed video { visibility: hidden; }
.cg-video-frame.video-failed::after {
  content: "This video could not be loaded on your connection. Please try again later.";
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 24px; color: var(--spf-cream); font-size: 14px; font-weight: 700; line-height: 1.5;
}

/* Licensing cards drawn by the script */
.lic-thumb.no-image { display: grid; place-items: center; background-image: linear-gradient(150deg, var(--spf-navy-dark), var(--spf-navy) 70%); }
.lic-thumb.no-image svg { width: 46px; height: 46px; stroke: var(--spf-cream); opacity: 0.75; fill: none; stroke-width: 1.4; }
.lic-card:focus-visible { outline: 2px solid var(--spf-red); outline-offset: 2px; }
.tc-error { color: var(--spf-red); font-size: 13px; font-weight: 700; min-height: 18px; margin: 0; }