:root{
  --bg: #0b0f14;
  --panel: #0f1620;
  --text: #e7edf5;
  --muted: #a9b6c5;
  --line: rgba(231,237,245,.14);
  --accent: #8aa4b8;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:
    radial-gradient(1200px 900px at 20% 0%, rgba(138,164,184,.18), transparent 55%),
    radial-gradient(1000px 700px at 85% 30%, rgba(138,164,184,.12), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
}
a{ color:inherit; text-decoration:none; }
.container{ width:min(1120px, 92vw); margin:0 auto; }
.hr{ height:1px; background:var(--line); border:0; margin:0; }
.kicker{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.16em;
  text-transform: uppercase;
  font-size:.78rem;
  color: var(--muted);
}
.h1{
  font-size: clamp(2.2rem, 3.4vw, 3.35rem);
  line-height: 1.05;
  margin: .5rem 0 0;
  letter-spacing:.01em;
}
.lead{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(231,237,245,.85);
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 70ch;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.55rem;
  padding:.9rem 1.05rem;
  border-radius: 12px;
  border:1px solid rgba(231,237,245,.18);
  background: rgba(15,22,32,.65);
  backdrop-filter: blur(10px);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
}
.btn:hover{ border-color: rgba(231,237,245,.30); }
.btn.primary{
  background: linear-gradient(180deg, rgba(138,164,184,.24), rgba(15,22,32,.65));
  border-color: rgba(138,164,184,.45);
}
.btnRow{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top: 1.35rem; }

.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 920px){ .grid3{ grid-template-columns: 1fr; } }

.card{
  border:1px solid rgba(231,237,245,.14);
  background: rgba(15,22,32,.45);
  border-radius: 18px;
  padding: 18px;
}

.small{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(231,237,245,.75);
  font-size: .95rem;
  line-height: 1.55;
}

.section{ padding: 20px 0; }
.sectionTitle{
  font-size: 1.55rem;
  margin: 0 0 10px;
}

/* ============================= */
/* Header + Navigation (clean)   */
/* ============================= */

header{ padding:18px 0; }

/* Your header flex wrapper (matches your HTML: class="container header-row") */
.header-row{
  display:flex;
  align-items:center;
  gap:18px;
}

/* Desktop nav */
.nav{
  margin-left:auto;
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  align-items:center;
}

.navlink{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:.95rem;
  color: rgba(231,237,245,.86);
  padding:8px 10px;
  border-radius:10px;
  border:1px solid transparent;
}
.navlink:hover{ border-color: rgba(231,237,245,.18); }

/* Logo (keep simple + safe) */
.logo{
  height:auto;
  max-height: 90px;
  width:auto;
  display:block;
  background:none;
  padding:0;
  border:0;
  box-shadow:none;
  filter:none;
  opacity:1;
}

/* Hamburger hidden on desktop */
.menu-toggle{
  display:none;
  background:none;
  border:none;
  font-size:34px;
  color:#DCE1E6;
  cursor:pointer;
}

/* ============================= */
/* Mobile                         */
/* ============================= */
@media (max-width: 768px){

  /* Stack everything */
  .header-row{
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  /* Hamburger under logo */
  .menu-toggle{
    display:block;
    margin:0;
  }

  /* Menu panel: horizontal + wraps to new rows (so horizontal & vertical) */
  .nav{
    display:none;
    width:100%;
    margin-left:0;
    margin-top:10px;

    /* panel look */
    background: rgba(11,15,20,.85);
    border: 1px solid rgba(231,237,245,.16);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,.55);

    padding: 12px;

    /* layout */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    gap: 10px;
  }

  .nav.open{ display:flex; }

  /* Link "chips" */
  .navlink{
    padding: 8px 12px;
    margin:0;
    font-size:15px;
    border-radius: 12px;
    border: 1px solid rgba(231,237,245,.14);
    background: rgba(255,255,255,.04);
  }

  /* Apply button matches chips */
  .nav .btn{
    padding: 8px 12px;
    margin:0;
    font-size:15px;
    border-radius: 12px;
  }

  /* optional: keep panel from feeling too wide */
  .nav{
    max-width: 560px;
  }
}

/* ============================= */
/* Form styling (dark-friendly)  */
/* ============================= */

form .field { margin-top: 12px; }

label{
  display:block;
  margin-bottom:6px;
  color: rgba(231,237,245,.86);
  font-weight:600;
  font-size: 14px;
}

input, textarea, select{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(231,237,245,.16);
  background: rgba(11,15,20,.55);
  color: rgba(231,237,245,.92);
  outline:none;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

input::placeholder, textarea::placeholder{
  color: rgba(231,237,245,.45);
}

input:focus, textarea:focus, select:focus{
  border-color: rgba(120,185,240,.65);
  box-shadow: 0 0 0 3px rgba(120,185,240,.20);
}

/* ============================= */
/* Primary submit buttons        */
/* ============================= */

button[type="submit"],
form .btn.primary{
  background: #3fa9f5;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.15);
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: .02em;
}

button[type="submit"]:hover,
form .btn.primary:hover{
  background: #5bb8ff;
}

button[type="submit"]:active{
  transform: translateY(1px);
}

.vault-dot{
  margin-left:10px;
  opacity:.12;
  font-size:18px;
  text-decoration:none;
}
.vault-dot:hover{ opacity:.85; }

/* =========================================================
   MARINE ROADGUARD — MOBILE BRAND TEXT ON BOTTOM ROW
   Applies ONLY when <body class="mrg-page">
   ========================================================= */

/* Desktop defaults (safe + scoped) */
body.mrg-page header.mrgHeader{
  padding: 0 !important;
}
body.mrg-page .mrgNavRow{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;         /* bottom align on desktop */
  gap: 14px;
  padding: 10px 0 8px;
}
body.mrg-page .mrgBrandLogo{
  display: inline-flex;
  align-items: flex-end;
}
body.mrg-page .brandText h1{
  margin: 0;
  line-height: 1.05;
}
body.mrg-page .brandText p{
  margin: 2px 0 0;
  line-height: 1.1;
  opacity: .9;
}

/* Keep desktop nav horizontal */
body.mrg-page .mrgDesktopNav ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 18px;
}

/* Right group */
body.mrg-page .mrgHeaderRight{
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

/* Hamburger hidden on desktop */
body.mrg-page .mrgHamburger{
  display: none;
}

/* Mobile menu hidden when [hidden] */
body.mrg-page .mrgMobileMenu[hidden]{
  display: none !important;
}

/* -------------------------
   MOBILE (<= 860px)
   Row 1: logo + hamburger
   Row 2: brand text full width
   ------------------------- */
@media (max-width: 860px){

  /* Switch header row to grid */
  body.mrg-page .mrgNavRow{
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    padding: 10px 0;
    row-gap: 10px;
  }

  /* Logo top-left */
  body.mrg-page .mrgBrandLogo{
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  /* Brand text on its own bottom row */
  body.mrg-page .brandText{
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    padding-top: 2px;
  }

  /* Hide desktop nav + header CTA */
  body.mrg-page .mrgDesktopNav{ display: none !important; }
  body.mrg-page .mrgCta{ display: none !important; }

  /* Hamburger top-right */
  body.mrg-page .mrgHeaderRight{
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
  }

  body.mrg-page .mrgHamburger{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    font-size: 34px;
    line-height: 1;
    border-radius: 14px;
    border: 1px solid rgba(231,237,245,.18);
    background: rgba(15,22,32,.55);
    color: var(--text);
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
    cursor: pointer;
    padding: 0;
  }

  /* Stacked mobile menu */
  body.mrg-page .mrgMobileMenu{
    margin-top: 12px;
    border: 1px solid rgba(231,237,245,.14);
    background: rgba(15,22,32,.55);
    border-radius: 18px;
    padding: 12px;
    box-shadow: 0 14px 34px rgba(0,0,0,.35);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  body.mrg-page .mrgMobileMenu a{
    display: block;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(231,237,245,.14);
    background: rgba(7,12,18,.35);
    color: var(--text);
  }

  body.mrg-page .mrgMobileMenu .btn.primary{
    width: 100%;
    justify-content: center;
    font-weight: 800;
  }
}
/* =========================================================
   Marine RoadGuard (page-only) — MOBILE FIX + HEADER LAYOUT
   Safe: only applies when <body class="mrg-page">
   ========================================================= */

/* Ensure the mobile menu truly hides when [hidden] is present */
body.mrg-page #mrgMobileMenu[hidden]{
  display:none !important;
}

/* Remove bullets + normalize nav list if it appears */
body.mrg-page .mrgDesktopNav ul{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* Desktop: keep nav horizontal and visible */
@media (min-width: 861px){
  body.mrg-page .mrgDesktopNav{ display:block !important; }
  body.mrg-page .mrgDesktopNav ul{
    display:flex !important;
    flex-direction:row !important;
    align-items:flex-end !important;
    gap:18px !important;
  }

  body.mrg-page .mrgHamburger{ display:none !important; }
  body.mrg-page .mrgCta{ display:inline-flex !important; }

  /* Bottom-align nav + CTA with bottom of logo/text */
  body.mrg-page .mrgNavRow{
    display:flex !important;
    align-items:flex-end !important;
  }
}

/* Mobile: logo + hamburger on top row, brand text on bottom row */
@media (max-width: 860px){

  /* Hide desktop nav + header CTA on mobile */
  body.mrg-page .mrgDesktopNav{ display:none !important; }
  body.mrg-page .mrgCta{ display:none !important; }

  /* Grid header layout for mobile */
  body.mrg-page .mrgNavRow{
    display:grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items:center !important;
    gap:10px !important;
    padding:10px 0 !important;
  }

  /* Logo sits top-left */
  body.mrg-page .mrgLogoLink{
    grid-column: 1;
    grid-row: 1;
    display:inline-flex;
    align-items:center;
  }

  /* Hamburger sits top-right */
  body.mrg-page .mrgHamburger{
    grid-column: 3;
    grid-row: 1;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:54px;
    height:54px;
    font-size:34px;
    line-height:1;
    border-radius:14px;
    border:1px solid rgba(231,237,245,.18);
    background: rgba(15,22,32,.55);
    color: rgba(231,237,245,.92);
    cursor:pointer;
  }

  /* Brand text spans the bottom row */
  body.mrg-page .mrgBrandText{
    grid-column: 1 / -1;
    grid-row: 2;
    text-align:left;
  }
  body.mrg-page .mrgBrandText h1{
    margin:0 !important;
    line-height:1.05 !important;
  }
  body.mrg-page .mrgBrandText p{
    margin:2px 0 0 !important;
    line-height:1.1 !important;
    opacity:.85;
  }

  /* Mobile menu panel (stacked) */
  body.mrg-page #mrgMobileMenu{
    margin-top:12px;
    border:1px solid rgba(231,237,245,.14);
    background: rgba(15,22,32,.55);
    border-radius:18px;
    padding:12px;
    box-shadow: 0 14px 34px rgba(0,0,0,.35);

    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }

  body.mrg-page #mrgMobileMenu a{
    display:block;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid rgba(231,237,245,.14);
    background: rgba(7,12,18,.35);
    color: rgba(231,237,245,.92);
    text-decoration:none;
  }

  body.mrg-page #mrgMobileMenu a:hover{
    border-color: rgba(63,169,245,.55);
  }

  /* CTA inside the mobile menu */
  body.mrg-page #mrgMobileMenu .btn.primary{
    width:100%;
    justify-content:center;
    border:0;
    font-weight:800;
  }
}
/* =========================================================
   Marine RoadGuard — MOBILE HEADER HARD FIX (page-only)
   Applies ONLY when <body class="mrg-page">
   ========================================================= */

/* 0) Kill bullets + spacing for ANY nav list inside the MRD header */
body.mrg-page header.mrgHeader nav ul,
body.mrg-page header.mrgHeader nav li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 1) Mobile menu must respect [hidden] no matter what */
body.mrg-page header.mrgHeader #mrgMobileMenu[hidden]{
  display: none !important;
}

/* 2) DESKTOP behavior (keep horizontal, no stacking) */
@media (min-width: 861px){

  body.mrg-page header.mrgHeader .mrgNavRow{
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 14px !important;
  }

  body.mrg-page header.mrgHeader .mrgDesktopNav{
    display: block !important;
  }

  body.mrg-page header.mrgHeader .mrgDesktopNav ul{
    display: flex !important;
    flex-direction: row !important;
    gap: 18px !important;
    align-items: flex-end !important;
  }

  body.mrg-page header.mrgHeader .mrgCta{
    display: inline-flex !important;
  }

  body.mrg-page header.mrgHeader .mrgHamburger{
    display: none !important;
  }

  body.mrg-page header.mrgHeader #mrgMobileMenu{
    display: none !important;
  }
}

/* 3) MOBILE behavior — force a clean header layout (no duplicates) */
@media (max-width: 860px){

  /* Stop Elsey's global mobile header system from reformatting this header */
  body.mrg-page header.mrgHeader .header-row,
  body.mrg-page header.mrgHeader .nav{
    display: unset !important;
    flex-direction: unset !important;
    align-items: unset !important;
  }

  /* Hide the DESKTOP nav + DESKTOP CTA so you don't see duplicates */
  body.mrg-page header.mrgHeader .mrgDesktopNav{
    display: none !important;
  }
  body.mrg-page header.mrgHeader .mrgCta{
    display: none !important;
  }

  /* Mobile header layout: logo left, hamburger right (top row), brand text full width (row 2) */
  body.mrg-page header.mrgHeader .mrgNavRow{
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 0 !important;
  }

  body.mrg-page header.mrgHeader .mrgLogoLink{
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  body.mrg-page header.mrgHeader .mrgHamburger{
    grid-column: 3 !important;
    grid-row: 1 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 62px !important;      /* bigger tap target */
    height: 62px !important;
    font-size: 38px !important;  /* bigger icon */
    line-height: 1 !important;

    border-radius: 16px !important;
    border: 1px solid rgba(231,237,245,.18) !important;
    background: rgba(15,22,32,.60) !important;
    color: rgba(231,237,245,.92) !important;
    cursor: pointer !important;
  }

  /* Brand text row: centered, smaller, not left-justified */
  body.mrg-page header.mrgHeader .mrgBrandText{
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    text-align: center !important;
  }

  body.mrg-page header.mrgHeader .mrgBrandText h1{
    margin: 0 !important;
    font-size: 1.05rem !important;  /* smaller than before */
    line-height: 1.08 !important;
    letter-spacing: .2px !important;
  }

  body.mrg-page header.mrgHeader .mrgBrandText p{
    margin: 4px 0 0 !important;
    font-size: .88rem !important;
    line-height: 1.15 !important;
    opacity: .85 !important;
  }

  /* Mobile menu panel: stacked, clean */
  body.mrg-page header.mrgHeader #mrgMobileMenu{
    margin-top: 12px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(231,237,245,.14) !important;
    background: rgba(15,22,32,.55) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.35) !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  body.mrg-page header.mrgHeader #mrgMobileMenu a{
    display: block !important;
    padding: 14px 14px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(231,237,245,.14) !important;
    background: rgba(7,12,18,.35) !important;
    text-decoration: none !important;
  }

  body.mrg-page header.mrgHeader #mrgMobileMenu .btn.primary{
    width: 100% !important;
    justify-content: center !important;
    font-weight: 800 !important;
  }
}
/* =========================================================
   Marine RoadGuard header — FINAL (page-only)
   Requires: <body class="mrg-page">
   ========================================================= */

body.mrg-page header.mrgHeader { padding: 0 !important; }

/* Make sure UL bullets never appear */
body.mrg-page header.mrgHeader ul,
body.mrg-page header.mrgHeader li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* [hidden] must actually hide */
body.mrg-page #mrgMobileMenu[hidden]{ display:none !important; }

/* Base logo sizing (uses your trimmed PNG spacing) */
body.mrg-page .mrgHeaderLogo{
  display:block;
  height: 110px;
  width:auto;
  max-width: 280px;
  object-fit: contain;
}

/* ---------- Desktop ---------- */
@media (min-width: 861px){

  body.mrg-page .mrgTopBar{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    padding: 10px 0 6px;
  }

  body.mrg-page .mrgBrandText{
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
    gap:12px;
    padding-bottom: 6px;
  }

  body.mrg-page .mrgBrandText h1{
    margin:0;
    font-size: 1.15rem;
    line-height:1.05;
  }
  body.mrg-page .mrgBrandText p{
    margin:0 0 2px;
    font-size:.9rem;
    opacity:.8;
  }

  body.mrg-page .mrgDesktopRow{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    padding: 0 0 10px;
    gap: 18px;
  }

  body.mrg-page .mrgDesktopNav ul{
    display:flex;
    gap:18px;
    align-items:flex-end;
  }

  body.mrg-page .mrgHamburger{ display:none !important; }
  body.mrg-page .mrgMobileMenu{ display:none !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 860px){

  /* Top bar: logo left, hamburger right */
  body.mrg-page .mrgTopBar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 10px 0 6px;
  }

  /* Brand text moves to its own row and centers */
  body.mrg-page .mrgBrandText{
    text-align:center;
    padding: 2px 0 10px;
  }
  body.mrg-page .mrgBrandText h1{
    margin:0;
    font-size: 1.05rem;     /* FIX: smaller than your screenshot */
    line-height:1.08;
  }
  body.mrg-page .mrgBrandText p{
    margin:4px 0 0;
    font-size: .88rem;
    line-height:1.15;
    opacity:.8;
  }

  /* Hide desktop nav + desktop CTA to prevent duplicates */
  body.mrg-page .mrgDesktopRow{ display:none !important; }

  /* Big hamburger in upper right */
  body.mrg-page .mrgHamburger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width: 62px;
    height: 62px;
    font-size: 38px;
    line-height:1;
    border-radius: 16px;
    border: 1px solid rgba(231,237,245,.18);
    background: rgba(15,22,32,.60);
    color: rgba(231,237,245,.92);
    cursor:pointer;
  }

  /* Mobile menu panel (stacked) */
  body.mrg-page .mrgMobileMenu{
    margin: 10px 0 14px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(231,237,245,.14);
    background: rgba(15,22,32,.55);
    box-shadow: 0 14px 34px rgba(0,0,0,.35);
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  body.mrg-page .mrgMobileMenu a{
    display:block;
    padding: 14px 14px;
    border-radius: 14px;
    border: 1px solid rgba(231,237,245,.14);
    background: rgba(7,12,18,.35);
  }

  body.mrg-page .mrgMobileMenu .btn.primary{
    width:100%;
    justify-content:center;
    font-weight:800;
  }
}
/* =========================================
   Marine RoadGuard ONLY — Header + Mobile Menu (FINAL)
   Scope: only pages using <body class="mrg-page">
   ========================================= */

/* Safety: never allow bullets in this header */
body.mrg-page .mrgHeader ul{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Desktop layout */
body.mrg-page .mrgHeader .mrgNavRow{
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-items: end;            /* bottom align desktop row */
  padding: 6px 0 4px;          /* tight header */
}

body.mrg-page .mrgHeader .mrgBrandLogo{
  grid-column: 1;
  grid-row: 1 / span 2;        /* logo spans both rows */
  display: inline-flex;
  align-items: end;
}

body.mrg-page .mrgHeader .mrgHeaderRight{
  grid-column: 3;
  grid-row: 1;
  display: flex;
  gap: 12px;
  align-items: end;            /* bottom align CTA */
  justify-content: flex-end;
}

body.mrg-page .mrgHeader .mrgBrandText{
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  text-align: left;
}

body.mrg-page .mrgHeader .mrgBrandText h1{
  margin: 0 !important;
  font-size: 1.05rem;
  line-height: 1.05;
}

body.mrg-page .mrgHeader .mrgBrandText p{
  margin: 2px 0 0 !important;
  font-size: .86rem;
  line-height: 1.15;
  opacity: .85;
}

body.mrg-page .mrgHeader .mrgDesktopNav{
  grid-column: 2;
  grid-row: 2;
  justify-self: end;           /* nav sits toward right under brand row */
  align-self: end;
}

body.mrg-page .mrgHeader .mrgDesktopNav ul{
  display: flex;
  gap: 18px;
  align-items: end;
}

body.mrg-page .mrgHeader .mrgDesktopNav a{
  color: rgba(231,237,245,.86);
  font-size: .95rem;
  text-decoration: none;
}

body.mrg-page .mrgHeader .mrgDesktopNav a:hover{
  color: rgba(231,237,245,1);
}

/* Hamburger hidden on desktop */
body.mrg-page .mrgHeader .mrgHamburger{
  display: none;
}

/* Mobile menu hidden MUST win even if older CSS used display:flex !important */
body.mrg-page .mrgMobileMenu[hidden]{
  display: none !important;
}

/* Mobile menu panel base */
body.mrg-page .mrgMobileMenu{
  margin-top: 12px;
  border: 1px solid rgba(231,237,245,.14);
  background: rgba(15,22,32,.55);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

body.mrg-page .mrgMobileMenu a{
  display:block;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(231,237,245,.14);
  background: rgba(7,12,18,.35);
}

/* MOBILE RULES */
@media (max-width: 860px){

  /* Rebuild the header into:
     Row 1: logo left + hamburger right
     Row 2: brand text full width centered
  */
  body.mrg-page .mrgHeader .mrgNavRow{
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    padding: 10px 0 8px;
  }

  body.mrg-page .mrgHeader .mrgBrandLogo{
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  /* Optional: smaller logo on phones */
  body.mrg-page .mrgHeader img.mrgHeaderLogo{
    height: 110px !important;
    max-height: 110px !important;
    max-width: 320px !important;
  }

  /* Brand text across bottom (your request) */
  body.mrg-page .mrgHeader .mrgBrandText{
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: center;
    margin-top: 6px;
  }

  /* Reduce H1 size on mobile */
  body.mrg-page .mrgHeader .mrgBrandText h1{
    font-size: 1.0rem !important;
  }
  body.mrg-page .mrgHeader .mrgBrandText p{
    font-size: .85rem !important;
  }

  /* Hide desktop nav entirely on mobile (kills the bullets + always-on links) */
  body.mrg-page .mrgHeader .mrgDesktopNav{
    display: none !important;
  }

  /* Hide the desktop CTA on mobile (CTA lives inside the opened menu) */
  body.mrg-page .mrgHeader .mrgCta{
    display: none !important;
  }

  /* Big hamburger, upper-right */
  body.mrg-page .mrgHeader .mrgHeaderRight{
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
  }

  body.mrg-page .mrgHeader .mrgHamburger{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    font-size: 34px;
    line-height: 1;
    border-radius: 14px;
    border: 1px solid rgba(231,237,245,.18);
    background: rgba(15,22,32,.55);
    color: rgba(231,237,245,.92);
    cursor: pointer;
    padding: 0;
  }

  /* Make mobile menu STACKED + CTA full width */
  body.mrg-page .mrgMobileMenu{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  body.mrg-page .mrgMobileMenu .btn.primary{
    width: 100%;
    justify-content: center;
  }
}
/* =========================================================
   Marine RoadGuard — MOBILE HEADER ONLY FIX (SAFE)
   Does NOT affect desktop. Does NOT affect Elsey pages.
   Requires: <body class="mrg-page"> and header class="mrgHeader"
   ========================================================= */

@media (max-width: 860px){

  /* Make sure no bullets / spacing show up in the header nav */
  body.mrg-page header.mrgHeader ul,
  body.mrg-page header.mrgHeader li{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Prevent the DESKTOP nav list from showing on mobile (this stops duplicates) */
  body.mrg-page header.mrgHeader .mrgDesktopNav,
  body.mrg-page header.mrgHeader .mrgDesktopNav ul,
  body.mrg-page header.mrgHeader nav ul{
    display: none !important;
  }

  /* Prevent the DESKTOP CTA from showing on mobile (CTA is inside the mobile panel) */
  body.mrg-page header.mrgHeader .mrgCta{
    display: none !important;
  }

  /* Header row becomes 2-row grid:
     Row 1: logo left, hamburger right
     Row 2: brand text centered across */
  body.mrg-page header.mrgHeader .mrgNavRow{
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center !important;
    column-gap: 12px;
    row-gap: 8px;
    padding: 10px 0 8px !important;
  }

  /* Brand link (logo+text container) sits on row 1 */
  body.mrg-page header.mrgHeader a.brand{
    grid-column: 1;
    grid-row: 1;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px;
    min-width: 0;
  }

  /* Brand text forced to row 2, centered */
  body.mrg-page header.mrgHeader .brandText,
  body.mrg-page header.mrgHeader .mrgBrandText{
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: center !important;
  }

  /* Fix: mobile h1 too large */
  body.mrg-page header.mrgHeader .brandText h1,
  body.mrg-page header.mrgHeader .mrgBrandText h1{
    margin: 0 !important;
    font-size: 1.0rem !important;
    line-height: 1.08 !important;
    letter-spacing: .2px;
  }

  body.mrg-page header.mrgHeader .brandText p,
  body.mrg-page header.mrgHeader .mrgBrandText p{
    margin: 4px 0 0 !important;
    font-size: .86rem !important;
    line-height: 1.15 !important;
    opacity: .85 !important;
  }

  /* Right group (hamburger) sits top-right */
  body.mrg-page header.mrgHeader .mrgHeaderRight{
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    display: flex;
    align-items: center;
  }

  /* Bigger hamburger, top-right */
  body.mrg-page header.mrgHeader .mrgHamburger{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    font-size: 38px;
    line-height: 1;
    border-radius: 16px;
    border: 1px solid rgba(231,237,245,.18);
    background: rgba(15,22,32,.60);
    color: rgba(231,237,245,.92);
    cursor: pointer;
    padding: 0;
  }

  /* CRITICAL: hidden must actually hide */
  body.mrg-page header.mrgHeader #mrgMobileMenu[hidden]{
    display: none !important;
  }

  /* Only show menu when NOT hidden */
  body.mrg-page header.mrgHeader #mrgMobileMenu{
    display: none;
  }
  body.mrg-page header.mrgHeader #mrgMobileMenu:not([hidden]){
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(231,237,245,.14);
    background: rgba(15,22,32,.55);
    box-shadow: 0 14px 34px rgba(0,0,0,.35);
  }

  body.mrg-page header.mrgHeader #mrgMobileMenu a{
    display: block;
    padding: 14px 14px;
    border-radius: 14px;
    border: 1px solid rgba(231,237,245,.14);
    background: rgba(7,12,18,.35);
    text-decoration: none;
  }

  body.mrg-page header.mrgHeader #mrgMobileMenu .btn.primary{
    width: 100%;
    justify-content: center;
    font-weight: 800;
  }
}
/* =========================================================
   Marine RoadGuard — MOBILE HEADER ONLY FIX (SAFE)
   Does NOT affect desktop. Does NOT affect Elsey pages.
   Requires: <body class="mrg-page"> and header class="mrgHeader"
   ========================================================= */

@media (max-width: 860px){

  /* Make sure no bullets / spacing show up in the header nav */
  body.mrg-page header.mrgHeader ul,
  body.mrg-page header.mrgHeader li{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Prevent the DESKTOP nav list from showing on mobile (this stops duplicates) */
  body.mrg-page header.mrgHeader .mrgDesktopNav,
  body.mrg-page header.mrgHeader .mrgDesktopNav ul,
  body.mrg-page header.mrgHeader nav ul{
    display: none !important;
  }

  /* Prevent the DESKTOP CTA from showing on mobile (CTA is inside the mobile panel) */
  body.mrg-page header.mrgHeader .mrgCta{
    display: none !important;
  }

  /* Header row becomes 2-row grid:
     Row 1: logo left, hamburger right
     Row 2: brand text centered across */
  body.mrg-page header.mrgHeader .mrgNavRow{
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center !important;
    column-gap: 12px;
    row-gap: 8px;
    padding: 10px 0 8px !important;
  }

  /* Brand link (logo+text container) sits on row 1 */
  body.mrg-page header.mrgHeader a.brand{
    grid-column: 1;
    grid-row: 1;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px;
    min-width: 0;
  }

  /* Brand text forced to row 2, centered */
  body.mrg-page header.mrgHeader .brandText,
  body.mrg-page header.mrgHeader .mrgBrandText{
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: center !important;
  }

  /* Fix: mobile h1 too large */
  body.mrg-page header.mrgHeader .brandText h1,
  body.mrg-page header.mrgHeader .mrgBrandText h1{
    margin: 0 !important;
    font-size: 1.0rem !important;
    line-height: 1.08 !important;
    letter-spacing: .2px;
  }

  body.mrg-page header.mrgHeader .brandText p,
  body.mrg-page header.mrgHeader .mrgBrandText p{
    margin: 4px 0 0 !important;
    font-size: .86rem !important;
    line-height: 1.15 !important;
    opacity: .85 !important;
  }

  /* Right group (hamburger) sits top-right */
  body.mrg-page header.mrgHeader .mrgHeaderRight{
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    display: flex;
    align-items: center;
  }

  /* Bigger hamburger, top-right */
  body.mrg-page header.mrgHeader .mrgHamburger{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    font-size: 38px;
    line-height: 1;
    border-radius: 16px;
    border: 1px solid rgba(231,237,245,.18);
    background: rgba(15,22,32,.60);
    color: rgba(231,237,245,.92);
    cursor: pointer;
    padding: 0;
  }

  /* CRITICAL: hidden must actually hide */
  body.mrg-page header.mrgHeader #mrgMobileMenu[hidden]{
    display: none !important;
  }

  /* Only show menu when NOT hidden */
  body.mrg-page header.mrgHeader #mrgMobileMenu{
    display: none;
  }
  body.mrg-page header.mrgHeader #mrgMobileMenu:not([hidden]){
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(231,237,245,.14);
    background: rgba(15,22,32,.55);
    box-shadow: 0 14px 34px rgba(0,0,0,.35);
  }

  body.mrg-page header.mrgHeader #mrgMobileMenu a{
    display: block;
    padding: 14px 14px;
    border-radius: 14px;
    border: 1px solid rgba(231,237,245,.14);
    background: rgba(7,12,18,.35);
    text-decoration: none;
  }

  body.mrg-page header.mrgHeader #mrgMobileMenu .btn.primary{
    width: 100%;
    justify-content: center;
    font-weight: 800;
  }
}
/* =========================================================
   Marine RoadGuard header — MOBILE FIX (page-only)
   Only runs on pages with <body class="mrg-page">
   Paste at VERY END of the MRD page <style> block
   ========================================================= */

body.mrg-page .mrgHeader ul,
body.mrg-page .mrgHeader li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Make sure hidden actually hides (some older rules used display:flex) */
body.mrg-page #mrgMobileMenu[hidden]{
  display: none !important;
}

/* ---------- Desktop (keep your desktop working) ---------- */
@media (min-width: 861px){

  body.mrg-page .mrgNavRow{
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas: "logo brand nav cta";
    align-items: end;
    column-gap: 16px;
    padding: 10px 0 8px;
  }

  body.mrg-page .mrgLogoLink{ grid-area: logo; }
  body.mrg-page .mrgBrandText{ grid-area: brand; text-align: left; align-self: end; }
  body.mrg-page .mrgDesktopNav{ grid-area: nav; justify-self: end; align-self: end; }
  body.mrg-page .mrgCta{ grid-area: cta; justify-self: end; align-self: end; }

  body.mrg-page .mrgDesktopNav ul{
    display: flex;
    gap: 18px;
    align-items: end;
  }

  body.mrg-page .mrgHamburger{ display: none !important; }
  body.mrg-page #mrgMobileMenu{ display: none !important; }

  body.mrg-page .mrgBrandText h1{
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.05;
  }
  body.mrg-page .mrgBrandText p{
    margin: 2px 0 0;
    font-size: .9rem;
    opacity: .85;
  }
}

/* ---------- Mobile (fix the mess) ---------- */
@media (max-width: 860px){

  /* Kill desktop-only elements on mobile (prevents duplicates) */
  body.mrg-page .mrgDesktopNav{ display: none !important; }
  body.mrg-page .mrgCta{ display: none !important; }

  /* Header layout:
     Row 1: logo (left) + hamburger (right)
     Row 2: brand text full width (centered)
  */
  body.mrg-page .mrgNavRow{
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "logo ham"
      "brand brand";
    align-items: center;
    row-gap: 10px;
    padding: 10px 0 8px;
  }

  body.mrg-page .mrgLogoLink{ grid-area: logo; justify-self: start; }
  body.mrg-page .mrgHamburger{ grid-area: ham; justify-self: end; }
  body.mrg-page .mrgBrandText{ grid-area: brand; text-align: center; }

  /* Brand text sizing + centering (fix #1 and #2) */
  body.mrg-page .mrgBrandText h1{
    margin: 0 !important;
    font-size: 1.05rem !important;
    line-height: 1.08 !important;
    letter-spacing: .2px;
  }
  body.mrg-page .mrgBrandText p{
    margin: 4px 0 0 !important;
    font-size: .88rem !important;
    line-height: 1.15 !important;
    opacity: .85;
  }

  /* Big hamburger upper-right (fix #6) */
  body.mrg-page .mrgHamburger{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    font-size: 38px;
    line-height: 1;
    border-radius: 16px;
    border: 1px solid rgba(231,237,245,.18);
    background: rgba(15,22,32,.60);
    color: rgba(231,237,245,.92);
    cursor: pointer;
    padding: 0;
  }

  /* Mobile menu panel (stacked, no bullets, no always-on) */
  body.mrg-page #mrgMobileMenu{
    margin-top: 12px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(231,237,245,.14);
    background: rgba(15,22,32,.55);
    box-shadow: 0 14px 34px rgba(0,0,0,.35);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  body.mrg-page #mrgMobileMenu a{
    display: block;
    padding: 14px 14px;
    border-radius: 14px;
    border: 1px solid rgba(231,237,245,.14);
    background: rgba(7,12,18,.35);
    text-decoration: none;
  }

  body.mrg-page #mrgMobileMenu .btn.primary{
    width: 100%;
    justify-content: center;
    font-weight: 800;
  }
}
/* =========================================================
   Marine RoadGuard — Header Layout FIX (DESKTOP FIRST)
   Scope: ONLY <body class="mrg-page">
   Put this at the VERY BOTTOM of the CSS file
   ========================================================= */

body.mrg-page .mrgHeader ul,
body.mrg-page .mrgHeader li{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* Make [hidden] always win */
body.mrg-page #mrgMobileMenu[hidden]{ display:none !important; }

/* ---------- DESKTOP (default) ---------- */
body.mrg-page .mrgHeader .mrgNavRow{
  display:flex !important;
  align-items:flex-end !important;      /* bottom-align */
  justify-content:flex-start !important;
  gap:18px !important;
  padding:10px 0 8px !important;
}

/* Brand stays as a single “left group” */
body.mrg-page .mrgHeader .mrgBrand{
  display:flex !important;
  align-items:flex-end !important;
  gap:12px !important;
  min-width:0 !important;
  flex:0 0 auto !important;
}

/* Keep brand text from drifting */
body.mrg-page .mrgHeader .brandText{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
}

body.mrg-page .mrgHeader .brandText h1{
  margin:0 !important;
  line-height:1.05 !important;
}
body.mrg-page .mrgHeader .brandText p{
  margin:2px 0 0 !important;
  line-height:1.1 !important;
  opacity:.85 !important;
}

/* Nav pushes to the right */
body.mrg-page .mrgHeader .mrgDesktopNav{
  margin-left:auto !important;
}
body.mrg-page .mrgHeader .mrgDesktopNav ul{
  display:flex !important;
  flex-direction:row !important;
  gap:18px !important;
  align-items:flex-end !important;
}

/* CTA group at far right */
body.mrg-page .mrgHeader .mrgHeaderRight{
  display:flex !important;
  align-items:flex-end !important;
  gap:12px !important;
  flex:0 0 auto !important;
}

/* Hamburger hidden on desktop */
body.mrg-page .mrgHeader .mrgHamburger{
  display:none !important;
}

/* ---------- MOBILE ---------- */
@media (max-width: 860px){

  /* Hide desktop nav + desktop CTA to prevent duplicates */
  body.mrg-page .mrgHeader .mrgDesktopNav{ display:none !important; }
  body.mrg-page .mrgHeader .mrgCta{ display:none !important; }

  /* Mobile header: logo/brand left, hamburger right */
  body.mrg-page .mrgHeader .mrgNavRow{
    align-items:center !important;
    padding:10px 0 !important;
  }

  /* Bigger hamburger in upper-right */
  body.mrg-page .mrgHeader .mrgHamburger{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:62px !important;
    height:62px !important;
    font-size:38px !important;
    line-height:1 !important;
    border-radius:16px !important;
    border:1px solid rgba(231,237,245,.18) !important;
    background: rgba(15,22,32,.60) !important;
    color: rgba(231,237,245,.92) !important;
    cursor:pointer !important;
    padding:0 !important;
  }

  /* Stack the mobile menu items (no bullets, no inline row) */
  body.mrg-page .mrgMobileMenu{
    margin-top:12px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }

  body.mrg-page .mrgMobileMenu a{
    display:block !important;
    padding:14px 14px !important;
    border-radius:14px !important;
    border:1px solid rgba(231,237,245,.14) !important;
    background: rgba(7,12,18,.35) !important;
  }

  body.mrg-page .mrgMobileMenu .btn.primary{
    width:100% !important;
    justify-content:center !important;
    font-weight:800 !important;
  }
}
/* =========================================================
   Marine RoadGuard — MOBILE HEADER FIX (final override)
   Safe: only applies on pages with <body class="mrg-page">
   Paste at VERY BOTTOM of CSS file
   ========================================================= */

/* Never show bullets in MR header nav lists */
body.mrg-page header.mrgHeader nav ul,
body.mrg-page header.mrgHeader nav li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobile menu MUST hide when [hidden] is present */
body.mrg-page #mrgMobileMenu[hidden]{
  display: none !important;
}

/* ---------------- DESKTOP (keep what is working) ---------------- */
@media (min-width: 861px){
  body.mrg-page .mrgDesktopNav{ display: block !important; }
  body.mrg-page .mrgDesktopNav ul{
    display: flex !important;
    flex-direction: row !important;
    gap: 18px !important;
    align-items: flex-end !important;
  }

  body.mrg-page .mrgCta{ display: inline-flex !important; }
  body.mrg-page .mrgHamburger{ display: none !important; }
  body.mrg-page #mrgMobileMenu{ display: none !important; }
}

/* ---------------- MOBILE ---------------- */
@media (max-width: 860px){

  /* Hide desktop nav + desktop CTA so no duplicates/overlap */
  body.mrg-page .mrgDesktopNav{ display: none !important; }
  body.mrg-page .mrgCta{ display: none !important; }

  /* Mobile header layout:
     Row 1: brand (logo) left, hamburger right
     Row 2: brand text full width under it
  */
  body.mrg-page header.mrgHeader .mrgNavRow{
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    padding: 10px 0 8px !important;
  }

  /* Brand link: keep logo on top row */
  body.mrg-page header.mrgHeader a.brand{
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  /* Logo sizing on phones */
  body.mrg-page header.mrgHeader img.mrgHeaderLogo{
    height: 86px !important;
    max-height: 86px !important;
    max-width: 200px !important;
    width: auto !important;
    display: block !important;
    object-fit: contain !important;
  }

  /* Brand text forced onto its own bottom row */
  body.mrg-page header.mrgHeader .brandText{
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    text-align: center !important;
    margin: 0 !important;
  }

  /* Fix: brand H1 too large + align/center */
  body.mrg-page header.mrgHeader .brandText h1{
    margin: 0 !important;
    font-size: 1.15rem !important;
    line-height: 1.08 !important;
    letter-spacing: .2px !important;
  }

  body.mrg-page header.mrgHeader .brandText p{
    margin: 4px 0 0 !important;
    font-size: .90rem !important;
    line-height: 1.15 !important;
    opacity: .85 !important;
  }

  /* Hamburger in upper-right (bigger) */
  body.mrg-page header.mrgHeader .mrgHeaderRight{
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    z-index: 5 !important;
  }

  body.mrg-page header.mrgHeader .mrgHamburger{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 60px !important;
    height: 60px !important;
    font-size: 36px !important;
    line-height: 1 !important;
    border-radius: 16px !important;
    border: 1px solid rgba(231,237,245,.18) !important;
    background: rgba(15,22,32,.60) !important;
    color: rgba(231,237,245,.92) !important;
    cursor: pointer !important;
    padding: 0 !important;
  }

  /* Mobile menu panel stacked */
  body.mrg-page header.mrgHeader #mrgMobileMenu{
    margin-top: 12px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(231,237,245,.14) !important;
    background: rgba(15,22,32,.55) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.35) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  body.mrg-page header.mrgHeader #mrgMobileMenu a{
    display: block !important;
    padding: 14px 14px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(231,237,245,.14) !important;
    background: rgba(7,12,18,.35) !important;
    text-decoration: none !important;
  }

  body.mrg-page header.mrgHeader #mrgMobileMenu .btn.primary{
    width: 100% !important;
    justify-content: center !important;
    font-weight: 800 !important;
  }
}
/* =========================================================
   Marine RoadGuard — MOBILE HEADER FIX (NO HTML CHANGES)
   Safe: only applies on <body class="mrg-page"> and <= 860px
   ========================================================= */

/* Make sure hidden works even if older CSS forces display */
body.mrg-page #mrgMobileMenu[hidden]{ display:none !important; }

/* Kill any bullets if something leaks */
body.mrg-page header.mrgHeader nav ul,
body.mrg-page header.mrgHeader nav li{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}

@media (max-width: 860px){

  /* Header row becomes a positioning container */
  body.mrg-page .mrgNavRow{
    position: relative !important;
    align-items: flex-start !important;
    padding: 10px 0 8px !important;
  }

  /* Hide desktop nav + desktop CTA (this removes duplicates + floating CTA) */
  body.mrg-page .mrgDesktopNav{ display:none !important; }
  body.mrg-page .mrgCta{ display:none !important; }

  /* Brand stacks: LOGO (top) then BRAND TEXT (bottom) */
  body.mrg-page .mrgNavRow .brand{
    display:flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* Logo sizing on mobile (adjust if you want) */
  body.mrg-page .mrgHeaderLogo{
    height: 120px !important;
    width: auto !important;
    max-width: 320px !important;
    display:block !important;
  }

  /* Brand text on bottom row */
  body.mrg-page .brandText{
    width: 100% !important;
    text-align: center !important;
  }

  body.mrg-page .brandText h1{
    margin: 0 !important;
    font-size: 1.15rem !important;     /* FIX: smaller than your screenshot */
    line-height: 1.08 !important;
    letter-spacing: .2px !important;
  }

  body.mrg-page .brandText p{
    margin: 4px 0 0 !important;
    font-size: .92rem !important;
    line-height: 1.15 !important;
    opacity: .85 !important;
  }

  /* Hamburger goes to upper-right */
  body.mrg-page .mrgHeaderRight{
    position:absolute !important;
    top: 10px !important;
    right: 0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap: 0 !important;
  }

  body.mrg-page .mrgHamburger{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width: 60px !important;
    height: 60px !important;
    font-size: 36px !important;
    line-height: 1 !important;
    border-radius: 16px !important;
    border: 1px solid rgba(231,237,245,.18) !important;
    background: rgba(15,22,32,.60) !important;
    color: rgba(231,237,245,.92) !important;
    cursor:pointer !important;
    padding:0 !important;
  }

  /* Mobile menu panel stacked + clean */
  body.mrg-page #mrgMobileMenu{
    margin-top: 12px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(231,237,245,.14) !important;
    background: rgba(15,22,32,.55) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.35) !important;

    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }

  body.mrg-page #mrgMobileMenu a{
    display:block !important;
    padding: 14px 14px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(231,237,245,.14) !important;
    background: rgba(7,12,18,.35) !important;
    text-decoration:none !important;
  }

  body.mrg-page #mrgMobileMenu .btn.primary{
    width: 100% !important;
    justify-content: center !important;
    font-weight: 800 !important;
  }
}
/* =========================================
   MRD MOBILE — tighten brand text spacing + shrink logo
   Paste at VERY END of CSS
   ========================================= */
@media (max-width: 860px){

  /* Reduce the vertical gap between logo and text */
  body.mrg-page header.mrgHeader a.mrgBrand{
    gap: 10px !important;   /* was 10px */
  }

  /* Shrink logo ~30% (120px -> 84px) */
  body.mrg-page header.mrgHeader img.mrgHeaderLogo{
    height: 120px !important;
    max-height: 120px !important;
    max-width: 260px !important; /* keeps it tidy */
  }

  /* Tighten the spacing between title + subtitle */
  body.mrg-page header.mrgHeader .brandText h2{
    margin: 0 !important;
    line-height: 1.06 !important;
  }

  body.mrg-page header.mrgHeader .brandText p{
    margin: 2px 0 0 !important;  /* kills the big default margin */
    line-height: 1.12 !important;
  }
}
/* =========================================
   MRD DESKTOP — tighten brand text spacing
   Desktop only (>= 861px)
   ========================================= */
@media (min-width: 861px){

  /* Reduce space between logo and text block */
  body.mrg-page header.mrgHeader a.mrgBrand{
    gap: 84px !important;   /* was larger */
  }

  /* Tighten brand title */
  body.mrg-page header.mrgHeader .brandText h2{
    margin: 0 !important;
    line-height: 1.05 !important;
  }

  /* Kill default paragraph margin causing the big gap */
  body.mrg-page header.mrgHeader .brandText p{
    margin: 2px 0 0 !important;
    line-height: 1.12 !important;
    opacity: .85; /* optional polish */
  }
}