:root{
  --navy:#0b2a55;
  --navy2:#0a234d;
  --text:#0b1220;
  --muted:#5f6b7a;
  --line:#e5e7eb;
  --soft:#f5f7fb;
  --green:#2e7d32;
  --green2:#256628;
  --shadow:0 14px 30px rgba(15,23,42,.12);
  --r:14px;
  --max:1100px;

  --font: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* ===== Global Font Styling ===== */

body{
  font-family: var(--font);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,.section-title,.hero-title{
  font-family: var(--font);
  letter-spacing: -0.02em;
}

*{ box-sizing:border-box; }
body{ margin:0; background:#fff; color:var(--text); }
a{ color:inherit; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 18px; }

h1,h2,h3{ margin:0; }
p{ margin:0; color:var(--muted); line-height:1.65; }

/* ================= HEADER ================= */
.site-header{
  position:sticky;
  top:0;
  z-index:999;
  border-bottom:1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(rgba(11,42,85,.90), rgba(11,42,85,.90)),
    url("assets/header-bg.jpg") center/cover no-repeat;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 0;
}

/* Brand LEFT */
.brand .logo-badge{
  background:#fff;
  border-radius:12px;
  padding:6px;
  display:inline-flex;
  align-items:center;
}

.brand img {
  height: 56px;   /* try 56–64 */
  width: auto;
}

.brand-text{ display:flex; flex-direction:column; }
.brand-name{
  color:#fff;
  font-weight:900;
  font-size:18px;
  line-height:1.1;
}
.brand-tag{
  color:#dbe7ff;
  font-size:12px;
  margin-top:2px;
}

/* Nav RIGHT */
.nav{
  display:flex;
  align-items:center;
  gap:18px;
  margin-left:auto; /* forces right */
}
.nav-link{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  opacity:.95;
}
.nav-link:hover{ opacity:1; text-decoration:underline; text-underline-offset:7px; }
.nav-cta{
  background:#fff;
  color:var(--navy);
  font-weight:900;
  padding:10px 14px;
  border-radius:10px;
  text-decoration:none;
}

/* ================= HERO ================= */
.hero{
  background:linear-gradient(90deg, var(--navy), var(--navy2));
  color:#fff;
}
.hero-inner{
  padding:44px 0;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:22px;
  align-items:center;
}
.hero-copy h1{
  color:#fff;
  font-size:44px;
  line-height:1.05;
}
.hero-subline{ font-weight:900; }
.hero-sub{
  margin-top:12px;
  color:rgba(255,255,255,.92);
  font-weight:650;
}
.hero-checks{
  list-style:none;
  padding:0;
  margin:18px 0 0;
  display:grid;
  gap:8px;
}
.hero-checks li{
  color:#fff;
  font-weight:800;
  position:relative;
  padding-left:26px;
}
.hero-checks li::before{
  content:"✓";
  position:absolute;
  left:0; top:0;
  width:18px; height:18px;
  display:grid; place-items:center;
  border-radius:999px;
  background:rgba(46,125,50,.25);
  border:1px solid rgba(46,125,50,.55);
  color:#d6ffe2;
  font-weight:900;
}
.hero-buttons{ margin-top:18px; display:flex; gap:12px; flex-wrap:wrap; }

.btn{
  display:inline-block;
  border-radius:10px;
  padding:12px 18px;
  font-weight:900;
  text-decoration:none;
}
.btn-primary{
  background:linear-gradient(180deg, var(--green), var(--green2));
  color:#fff;
  box-shadow:0 12px 24px rgba(34,197,94,.18);
}
.btn-ghost{
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  background:rgba(255,255,255,.08);
}

/* Hero card */
.hero-card{
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.16);
  background:#fff;
}
.hero-card-img{ width:100%; height:320px; object-fit:cover; display:block; }
.hero-card-cap{
  padding:14px;
  color:#1f2a3a;
  background:#fff;
  border-top:1px solid #eef2f7;
  font-weight:700;
}

/* ================= FEATURES ================= */
.features{
  background:var(--soft);
  padding:26px 0;
}
.feature-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}
.feature{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow: var(--shadow);
  padding:18px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.feature-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  background:#eef2f7;
  display:grid;
  place-items:center;
  font-size:20px;
}
.feature h3{ font-size:18px; margin-bottom:6px; }
.feature p{ color:var(--muted); }

/* ================= SECTIONS ================= */
.section{ padding:42px 0; }
.section-head{
  max-width:860px;
  margin-bottom:18px;
}
.section-head h2{
  font-size:30px;
  margin-bottom:10px;
  color:var(--text);
}
.section-head p{ color:var(--muted); }

/* ================= SERVICES CARDS ================= */
/* FORCE EQUAL CARD HEIGHTS */
.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  align-items: stretch; /* key */
}

.card{
  display:flex;
  flex-direction:column;
  height:100%;
}

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.card-img{
  width:100%;
  height:180px;
  object-fit:cover;
}
.card-body{
  padding:16px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.card-body p{
  flex-grow:1; /* fills space evenly */
}

.card-btn{
  margin-top:14px;
}
.stars span{
  color:var(--muted);
  font-weight:700;
  margin-left:8px;
  font-size:13px;
}
.card-btn{
  display:block;
  text-align:center;
  padding:12px 14px;
  border-radius:10px;
  background:linear-gradient(90deg, var(--navy), var(--navy2));
  color:#fff;
  font-weight:900;
  text-decoration:none;
}

/* ================= CTA ================= */
.cta{
  background:#eef3fb;
  border-top:1px solid #e8eef8;
  border-bottom:1px solid #e8eef8;
  padding:30px 0;
}
.cta-inner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  align-items:center;
}
.cta-copy h2{ font-size:28px; margin-bottom:10px; }
.cta-copy p{ margin-bottom:14px; }
.cta-media{
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  background:#fff;
}
.cta-media img{ width:100%; height:240px; object-fit:cover; display:block; }

/* ================= EMBED ================= */
.embed{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:16px;
  overflow:hidden;
}

/* ================= CONTACT ================= */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:start;
}
.contact-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:18px;
}
.contact-card h3{ margin-bottom:10px; }
.contact-card p{ margin:8px 0; }
.contact-buttons{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }

.map{
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  background:#fff;
}
.map iframe{ width:100%; height:360px; border:0; display:block; }

/* ================= FOOTER ================= */
.footer{
  background:#081a33;
  color:#cbd5e1;
  padding:18px 0;
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.footer-note{ opacity:.9; }

/* ================= RESPONSIVE ================= */
@media (max-width:980px){
  .nav{ display:none; }
  .hero-inner{ grid-template-columns: 1fr; }
  .feature-grid{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; }
  .cta-inner{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .hero-copy h1{ font-size:36px; }
}
/* ================= WHAT TO BRING ================= */
#what-to-bring{
  background:#ffffff;
}

.bring-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  margin-top:12px;
}

.bring-card{
  border:2px solid #102a56;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  height:100%;
}

.bring-top{
  background:#0b2a55;
  color:#fff;
  padding:18px;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:92px;
}

.bring-num{
  width:44px;
  height:44px;
  border-radius:999px;
  background:#fff;
  color:#0b2a55;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:18px;
  flex:0 0 auto;
}

.bring-title{
  font-size:20px;
  font-weight:900;
  line-height:1.2;
}

.bring-body{
  padding:18px;
  color:#1f2a3a;
}

.bring-body p{
  margin:0 0 10px;
  color:#1f2a3a;
}

.bring-body ol{
  margin:8px 0 10px 18px;
  color:#1f2a3a;
  line-height:1.6;
}

.bring-list{
  list-style:none;
  padding:0;
  margin:8px 0 10px;
  display:grid;
  gap:8px;
}

.bring-note{
  margin-top:10px;
  color:#5f6b7a !important;
  font-size:14px;
}

/* ================= CONTACT (REDESIGNED) ================= */
.contact2{
  background:#ffffff;
}

.contact2-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:stretch;
}

/* Card */
.contact2-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:18px;
}

.contact2-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-bottom:12px;
  border-bottom:1px solid #eef2f7;
  margin-bottom:14px;
}

.contact2-head h3{
  font-size:20px;
  margin:0;
  color:var(--text);
}

.contact2-sub{
  margin-top:4px;
  font-size:13px;
  color:var(--muted);
}

.contact2-badge{
  background:#eef3fb;
  border:1px solid #d7e3ff;
  color:var(--navy);
  font-weight:900;
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  white-space:nowrap;
}

/* Rows */
.contact2-rows{
  display:grid;
  gap:12px;
  margin-bottom:16px;
}

.contact2-row{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:10px;
  align-items:start;
}

.contact2-label{
  color:var(--muted);
  font-weight:800;
  font-size:13px;
}

.contact2-value{
  color:var(--text);
  font-weight:700;
  line-height:1.5;
}

.contact2-value a{
  color:var(--navy);
  font-weight:900;
  text-decoration:underline;
  text-underline-offset:4px;
}

/* Actions */
.contact2-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:6px;
}

/* Note */
.contact2-note{
  margin-top:14px;
  padding:12px 14px;
  border-radius:12px;
  background:#f6f9ff;
  border:1px solid #e3ecff;
  color:#1f2a3a;
  font-size:14px;
  line-height:1.55;
}

/* Map */
.contact2-map{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow);
  min-height:360px;
}

.contact2-map iframe{
  width:100%;
  height:100%;
  min-height:360px;
  border:0;
  display:block;
}

/* Mobile */
@media (max-width:980px){
  .contact2-grid{
    grid-template-columns: 1fr;
  }
  .contact2-row{
    grid-template-columns: 1fr;
  }
  .contact2-label{
    margin-bottom:-6px;
  }
}
/* ===== MOBILE FIX: "What to Bring" section ===== */
@media (max-width: 900px){

  /* stack cards */
  .bring-grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* make cards full width + readable */
  .bring-card{
    border-radius: 16px;
  }

  /* header row: keep number + title on one line */
  .bring-top{
    min-height: auto !important;
    padding: 16px !important;
    gap: 12px !important;
  }

  .bring-num{
    width: 42px !important;
    height: 42px !important;
    font-size: 18px !important;
    flex: 0 0 auto;
  }

  .bring-title{
    font-size: 18px !important;
    line-height: 1.2 !important;
    word-break: normal;
  }

  /* body text spacing */
  .bring-body{
    padding: 16px !important;
  }

  .bring-body ol{
    margin-left: 18px !important;
  }
}
@media (max-width: 900px){
  .bring-note{
    margin-top: 8px !important;
    font-size: 13px !important;
  }
}
/* ===== MOBILE HERO PADDING FIX ===== */
@media (max-width: 900px){

  .hero-inner{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .hero-copy{
    padding-right: 10px; /* extra breathing room */
  }

}
@media (max-width: 900px){
  .hero-inner{
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
/* ===== TOP INFO BAR (FIXED ALIGNMENT) ===== */
.top-bar{
  background:#0b2a4a;
  color:#fff;
  font-size:14px;
}

.top-bar-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;          /* no vertical padding here */
  height:34px;             /* fixed bar height */
  display:flex;
  align-items:center;      /* vertical centering */
  justify-content:space-between;
  gap:12px;
}

.top-bar-inner span{
  display:flex;            /* fixes emoji baseline issue */
  align-items:center;
  gap:8px;
  line-height:1;           /* prevents drifting */
  white-space:nowrap;
}

.top-bar a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  line-height:1;           /* keeps link aligned */
}

/* Mobile */
@media (max-width:768px){
  .top-bar-inner{
    height:auto;
    padding:8px 14px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
  }

  .top-bar-inner span{
    white-space:normal;
  }
}


/* Mobile */
@media (max-width: 768px) {
  .top-bar-inner {
    flex-direction: column;
    text-align: center;
    font-size: 13px;
  }
}
/* ===== TOP BAR HARD FIX (PASTE AT VERY END) ===== */
.top-bar{
  background:#0b2a4a !important;
  color:#fff !important;
  font-size:14px !important;
}

.top-bar > div,
.top-bar .top-bar-inner,
.top-bar .wrap{
  height:34px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  padding:0 20px !important;     /* IMPORTANT: no vertical padding */
}

.top-bar span,
.top-bar a{
  line-height:1 !important;      /* fixes text sitting off-line */
}

.top-bar span{
  display:flex !important;        /* fixes emoji baseline alignment */
  align-items:center !important;
  gap:8px !important;
  white-space:nowrap !important;
}

.top-bar a{
  color:#fff !important;
  text-decoration:none !important;
  font-weight:700 !important;
}

/* Mobile stacking */
@media (max-width:768px){
  .top-bar > div,
  .top-bar .top-bar-inner,
  .top-bar .wrap{
    height:auto !important;
    padding:8px 14px !important;
    flex-direction:column !important;
    justify-content:center !important;
    text-align:center !important;
  }

  .top-bar span{
    white-space:normal !important;
  }
}
/* ===== CONTACT ADDRESS FIX ===== */
.contact-item {
  margin-bottom: 16px;
}

.contact-item .label {
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 4px;
}

.contact-address {
  font-style: normal;       /* removes italic */
  font-weight: 600;
  color: #111827;
  line-height: 1.5;
}

.contact-address a {
  text-decoration: none;
  color: inherit;
}
/* ===== CONTACT ROW CONSISTENCY ===== */
.contact-item{
  margin-bottom:16px;
}

.contact-item .label{
  font-weight:600;
  color:#6b7280;
  margin-bottom:4px;
}

.contact-value{
  font-weight:600;
  color:#111827;
  line-height:1.5;
}
/* Contact link styling */
.contact-link{
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}
.contact-link:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* If you already have a .container, keep yours and delete this */
.container { max-width: 1140px; margin: 0 auto; padding: 0 22px; }

/* HERO */
.hero{
  padding: 54px 0 26px;
  background:
    radial-gradient(1100px 520px at 22% 20%, rgba(47,140,255,.18), transparent 55%),
    radial-gradient(900px 520px at 78% 35%, rgba(57,181,74,.16), transparent 55%);
}

.hero-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 34px;
  align-items: center;
}

/* LEFT */
.kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(234,242,255,.78);
  font-size: 13px;
  margin-bottom: 14px;
  backdrop-filter: blur(8px);
}

.k-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #39b54a;
}

.hero-title{
  margin: 0 0 12px;
  font-size: 54px;
  line-height: 1.02;
  letter-spacing: -0.8px;
  color: #eaf2ff;
}

.hero-title span{
  color: #cfe2ff;
}

.hero-sub{
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(234,242,255,.70);
  max-width: 56ch;
}

.checks{
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  gap: 10px;
}

.checks li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 700;
  color: #eaf2ff;
}

.check{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(57,181,74,.14);
  border: 1px solid rgba(57,181,74,.35);
  margin-top: 1px;
  flex: 0 0 auto;
}

.hero-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 800;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: #eaf2ff;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  transition: transform .12s ease, filter .12s ease;
}

.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

.btn-primary{
  background: linear-gradient(180deg, rgba(57,181,74,.98), rgba(36,140,55,.98));
  border-color: rgba(57,181,74,.55);
  box-shadow: 0 16px 34px rgba(57,181,74,.22);
}

.btn-ghost{
  background: rgba(255,255,255,.06);
}

.arrow{ opacity: .95; }

/* RIGHT CARD */
.hero-card{
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

.hero-media{
  height: 330px;
  position: relative;
  background:
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.35)),
    radial-gradient(800px 280px at 30% 15%, rgba(47,140,255,.45), transparent 55%),
    radial-gradient(700px 280px at 75% 30%, rgba(57,181,74,.25), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
}

.hero-media::after{
  content:"";
  position: absolute;
  inset: 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}

.scan-text{
  position: absolute;
  top: 18px;
  right: 22px;
  font-weight: 900;
  letter-spacing: .8px;
  color: rgba(255,255,255,.88);
  text-shadow: 0 6px 18px rgba(0,0,0,.35);
}

.hero-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-caption{
  padding: 14px 16px;
  background: rgba(7,27,47,.65);
  border-top: 1px solid rgba(255,255,255,.10);
  color: #eaf2ff;
  font-weight: 650;
}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-media{ height: 280px; }
  .hero-title{ font-size: 42px; }
}
/* === FIX: Make the HERO section dark regardless of the page background === */
.hero{
  background:
    radial-gradient(1100px 520px at 22% 20%, rgba(47,140,255,.18), transparent 55%),
    radial-gradient(900px 520px at 78% 35%, rgba(57,181,74,.16), transparent 55%),
    linear-gradient(180deg, #071b2f, #061525 70%); /* <-- this is the missing dark base */
  color: #eaf2ff;
}

/* Make sure hero text stays readable even if your theme overrides it */
.hero .hero-title,
.hero .hero-sub,
.hero .checks li,
.hero .kicker,
.hero .hero-caption{
  color: #eaf2ff !important;
}

/* Kicker text slightly muted (optional) */
.hero .kicker{
  color: rgba(234,242,255,.82) !important;
}

/* If your site has global link colors, keep hero buttons correct */
.hero .btn { color:#eaf2ff !important; text-decoration:none !important; }
/* ===== Header Fix: ensures top bar + menu show correctly ===== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 9999;
}

.topbar{
  background: rgba(8,28,48,.86);
  border-bottom: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  color: #eaf2ff;
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  flex-wrap:wrap;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color: inherit;
  min-width: 240px;
}

.brand-logo{
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.brand-name{
  font-weight:900;
  letter-spacing:.2px;
}

.brand-sub{
  margin-top:2px;
  font-size:12px;
  color: rgba(234,242,255,.72);
}

.topmeta{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  font-size:13px;
  color: rgba(234,242,255,.78);
}

.topmeta strong{ color:#fff; }

.pill{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
}

.pill.primary{
  background: linear-gradient(180deg, rgba(57,181,74,.98), rgba(36,140,55,.98));
  border-color: rgba(57,181,74,.55);
  box-shadow: 0 10px 24px rgba(57,181,74,.20);
}

.navwrap{
  background: rgba(8,28,48,.86);
  border-bottom: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}

.nav{
  display:flex;
  align-items:center;
  gap:24px;
  padding:12px 0;
  flex-wrap:wrap;
}

.nav a{
  color:#eaf2ff;
  text-decoration:none;
  font-weight:800;
  opacity:.92;
}

.nav a:hover{ opacity:1; }

.nav .cta{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
}

/* Prevent hero from covering header if your hero has positioning */
.hero{ position: relative; z-index: 1; }
/* === FIX: Contact section ghost buttons look faded (Call Now / Get Directions) === */
.contact2-actions .btn.btn-ghost{
  opacity: 1 !important;
  filter: none !important;
  background: #ffffff !important;
  color: #0b2a4a !important;
  border: 1px solid rgba(11,42,74,.18) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;
}

/* keep hover nice */
.contact2-actions .btn.btn-ghost:hover{
  transform: translateY(-1px);
}

/* optional: make primary button consistent too (if needed) */
.contact2-actions .btn.btn-primary{
  opacity: 1 !important;
  filter: none !important;
}
.footer-backlink{
  color: inherit;
  font-weight: 800;
  text-decoration: none;
}
.footer-backlink:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Mobile: add side padding to the top header + nav */
@media (max-width: 768px){
  .topbar .wrap,
  .navwrap .wrap,
  .topbar .container,
  .navwrap .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
.fees-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 18px;
}

.fees-head h2{
  margin: 0 0 6px;
  font-size: 42px;
  letter-spacing: -0.02em;
}

.fees-sub{
  margin: 0 0 18px;
  opacity: .75;
}

.fee-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.fee-card{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  padding: 16px 16px 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.04);
}

.fee-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}

.fee-card h3{
  margin: 0;
  font-size: 18px;
}

.fee-price{
  font-size: 22px;
  font-weight: 800;
  white-space: nowrap;
}

.fee-meta{
  margin-top: 6px;
  font-size: 13px;
  opacity: .7;
}

.fee-table-wrap{
  margin-top: 16px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.04);
}

.fee-table{
  width: 100%;
  border-collapse: collapse;
}

.fee-table thead th{
  text-align: left;
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: uppercase;
  opacity: .8;
  padding: 14px 16px;
  background: rgba(0,0,0,.03);
}

.fee-table tbody td{
  padding: 14px 16px;
  border-top: 1px solid rgba(0,0,0,.08);
  vertical-align: top;
}

.fee-col{
  width: 140px;
  font-weight: 800;
  white-space: nowrap;
}

.fees-note{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  font-size: 14px;
}
.brand img,
.brand-logo{
  height: 56px !important;
  width: auto !important;
}
.brand-logo{
  width: 72px !important;
  height: 72px !important;
}
.hero{ position:relative; overflow:hidden; }

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("/assets/logo.png") no-repeat;
  background-size:520px;
  background-position:52% 8%;
  opacity:.05;
  pointer-events:none;
  z-index:0;
}

.hero > *{ position:relative; z-index:1; }

@media (max-width: 980px){
  .hero::before{
    background-size:420px;
    background-position:95% 10%;
    opacity:.04;
  }
}
/* FAQ spacing improvement */
.faq-seo h2{
  margin-bottom: 20px;
}

.faq-seo h3{
  margin-top: 22px;
  margin-bottom: 8px;
}

.faq-seo p{
  margin-bottom: 16px;
  line-height: 1.85;
}
/* FAQ spacing (force) */
.faq-seo h2{ margin: 0 0 22px !important; }
.faq-seo h3{ margin: 18px 0 8px !important; line-height: 1.35 !important; }
.faq-seo p{ margin: 0 0 16px !important; line-height: 1.75 !important; }
.faq-seo{ padding-top: 10px; padding-bottom: 10px; }


/* ===== Global FAQ accordion (premium) ===== */
#faq .faq2{max-width:980px;margin-top:18px;border-top:1px solid rgba(15,23,42,.35)}
#faq details{border-bottom:1px solid rgba(15,23,42,.35)}
#faq summary{
  list-style:none;
  cursor:pointer;
  padding:22px 8px;
  font-size:22px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
#faq summary::-webkit-details-marker{display:none}
#faq summary::after{
  content:"";
  width:10px;height:10px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .2s ease;
  flex:0 0 auto;
}
#faq details[open] summary::after{transform:rotate(-135deg)}
#faq .faq2-a{padding:0 8px 22px;color:rgba(15,23,42,.75);line-height:1.65;font-size:16.5px}

/* ===== Equal hero height across pages (match index ~510px) ===== */
@media (min-width: 900px){
  .hero{ padding: 42px 0 !important; }
  .hero .hero-grid{ min-height: 510px !important; align-items:center !important; }
  .hero .hero-media{ min-height: 360px !important; }
  .hero .hero-media img{
    height: 360px !important;
    width: 100% !important;
    object-fit: cover !important;
  }
}


/* =========================
   Global FAQ accordion (details/summary)
   Applies to all pages using .faq container
   ========================= */
.faq{
  max-width: 980px;
  margin: 0 auto;
  border-top: 1px solid rgba(15,23,42,.35);
}
.faq details{
  border-bottom: 1px solid rgba(15,23,42,.35);
}
.faq summary{
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 18px;
  font-weight: 750;
  color: var(--text);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"";
  width:10px;height:10px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .2s ease;
  flex:0 0 auto;
}
.faq details[open] summary::after{
  transform:rotate(-135deg);
}
.faq p{
  padding: 0 8px 22px;
  margin: 0;
  color: rgba(15,23,42,.75);
  font-size: 16px;
  line-height: 1.65;
}

/* Optional: tighter on small screens */
@media (max-width: 520px){
  .faq summary{ font-size: 18px; padding: 18px 6px; }
  .faq p{ padding: 0 6px 18px; }
}

/* ================= FAQ (unified, premium) ================= */
/* Applies to any section that contains .faq (all pages) */
section#faq .section-head h2{
  font-size: clamp(34px, 3.0vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
section#faq .section-head p{
  margin: 0 0 18px;
  color: var(--muted);
}

/* the divider line under the FAQ title */
section#faq .section-head::after{
  content:"";
  display:block;
  height:1px;
  background: rgba(15,23,42,.35);
  margin-top: 18px;
}

/* Accordion container */
.faq{
  max-width: 980px;
  margin-top: 12px;
  border-top: 1px solid rgba(15,23,42,.35);
}

/* Items */
.faq details{
  border-bottom: 1px solid rgba(15,23,42,.35);
  padding: 0;
  margin: 0;
}

/* Summary row */
.faq summary{
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 18px;
  font-weight: 750;
  color: var(--text);
}

/* remove default markers */
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::marker{ content:""; }

/* Right chevron */
.faq summary::after{
  content:"";
  width: 14px;
  height: 14px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
  flex: 0 0 auto;
  opacity: .9;
}

.faq details[open] summary::after{
  transform: rotate(-135deg);
}

/* Answer */
.faq p{
  padding: 0 0 22px;
  margin: 0;
  color: rgba(15,23,42,.75);
  font-size: 16px;
  line-height: 1.65;
}

/* Mobile tune */
@media (max-width: 640px){
  section#faq .section-head h2{
  font-size: clamp(34px, 3.0vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
  .faq summary{ font-size: 18px; padding: 18px 0; }
  .faq summary::after{ width: 14px; height: 14px; border-right-width:2px; border-bottom-width:2px; }
  .faq p{ padding-bottom: 18px; }
}

/* ===== FAQ STYLE OVERRIDE (match index / line-style, no boxes) ===== */
/* Some pages had global <details> styling (borders/radius). Force the clean line accordion everywhere. */
.faq{ background: transparent !important; box-shadow:none !important; }
.faq details{
  border: 0 !important;
  border-bottom: 1px solid rgba(15,23,42,.35) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.faq details:first-child{ border-top: 1px solid rgba(15,23,42,.35) !important; }
.faq summary{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
/* If any older rule added padding around the whole details element, ensure consistent */
.faq p{ background: transparent !important; }


/* v18: tighten FAQ typography (match screenshot style) */
.faq-seo h2, #faq h2{
  font-size: clamp(34px, 3vw, 44px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}
.faq details > summary{
  font-size: 17px !important;
  font-weight: 700 !important;
}
.faq details .faq-a{
  font-size: 15.5px !important;
}
/* FAQ: make it full width inside the page container (like glendalenotary) */
.faq,
.faq2{
  max-width: none !important;
  width: 100% !important;
}

/* If you used a dedicated FAQ wrapper */
#faq .wrap{
  max-width: var(--max) !important; /* keeps site consistent */
}

/* Make the divider lines full width too */
.faq details,
.faq2 details{
  width: 100%;
}
/* FIX: Notary fee cards price getting cut off on narrower screens */
@media (max-width: 980px){
  .fee-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px){
  .fee-grid{
    grid-template-columns: 1fr !important;
  }
}

/* Extra safety: keep price visible */
.fee-price{
  font-size: clamp(18px, 2.2vw, 22px);
}

.fee-top h3{
  min-width: 0;             /* allows flex to behave properly */
}