/* =========================================================
   Ideal Certification Pvt Ltd — Global Stylesheet
   Palette: Navy Blue + Gold
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  --navy-900: #061C3A;
  --navy-800: #0A2B57;
  --navy-700: #0E3A72;
  --navy-600: #14508F;
  --navy-500: #1C63AC;
  --navy-100: #E7EFF9;
  --navy-50:  #F2F7FD;

  --gold-700: #8A6412;
  --gold-600: #A87C1B;
  --gold-500: #C9971F;
  --gold-400: #E0B33C;
  --gold-300: #F0CE6E;
  --gold-100: #FBF2DA;

  --ink:      #10192B;
  --body:     #4A5568;
  --muted:    #5F6D80;   /* darkened from #6B7A90 to clear WCAG AA (4.5:1) on white and on --bg */
  --line:     #E3E9F2;
  --line-2:   #F0F4F9;
  --bg:       #F5F8FC;
  --white:    #FFFFFF;

  --ok:       #1F9254;
  --ok-text:  #16733F;   /* darker green for small labels — clears AA on white and on --ok-bg */
  --ok-bg:    #E9F7EF;

  --ff-head: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --ff-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;

  --sh-sm: 0 1px 2px rgba(6, 28, 58, .06), 0 2px 6px rgba(6, 28, 58, .04);
  --sh-md: 0 4px 10px rgba(6, 28, 58, .06), 0 12px 28px rgba(6, 28, 58, .07);
  --sh-lg: 0 10px 24px rgba(6, 28, 58, .09), 0 30px 60px rgba(6, 28, 58, .10);
  --sh-gold: 0 6px 18px rgba(201, 151, 31, .32);

  --wrap: 1220px;
  --hdr-h: 90px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 150px; }
body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;   /* long words (URLs, "Maharashtra,") never widen the page */
  /* Kept on body, not html: body's overflow propagates to the viewport and body itself
     computes to visible, so it stays a safety net without turning body into a scroll
     container (which would zero out window.scrollY and break the sticky header,
     back-to-top button and service-page scroll spy). */
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--navy-600); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--gold-600); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { margin: 0; padding: 0; }
[hidden] { display: none !important; }
/* spam honeypot — off-screen, not display:none so bots still fill it */
.hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
h1, h2, h3, h4, h5 {
  font-family: var(--ff-head);
  color: var(--ink);
  margin: 0 0 .6em;
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -.02em;
}
h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.45rem); }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); }
h4 { font-size: 1.08rem; }
p  { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
:focus-visible { outline: 3px solid var(--gold-400); outline-offset: 2px; border-radius: 4px; }

/* ---------- 3. Layout helpers ---------- */
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.section { padding: clamp(38px, 4vw, 64px) 0; }
.section--tight { padding: clamp(26px, 3vw, 44px) 0; }
.section--alt { background: var(--bg); }
.section--navy { background: var(--navy-800); color: #C6D5E8; }
.section--navy h2, .section--navy h3 { color: #fff; }

.grid { display: grid; gap: 24px; }
/* Grid and flex items default to min-width:auto, which stops them shrinking below their
   content's min-content width and pushes the page sideways on narrow screens. */
.grid > *, .split > *, .hero__in > *, .phero__in > *, .steps > *, .stats__in > *,
.flist li > *, .checks li, .mini > * { min-width: 0; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.center { text-align: center; }
.mb-0 { margin-bottom: 0; }

/* ---------- 4. Section heading ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-head);
  font-size: .755rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-700); /* gold-600 fails AA on the gold-100 pill */
  background: var(--gold-100);
  border: 1px solid #F2E4BD;
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 16px;
}
.section--navy .eyebrow { background: rgba(224,179,60,.13); border-color: rgba(224,179,60,.3); color: var(--gold-300); }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-500); }

.s-head { max-width: 720px; margin: 0 auto clamp(24px, 3vw, 40px); text-align: center; }
.s-head.left { margin-inline: 0; text-align: left; }
.s-head p { color: var(--muted); font-size: 1.045rem; margin-bottom: 0; }
.section--navy .s-head p { color: #A9BED6; }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--ff-head); font-weight: 700; font-size: .945rem;
  padding: 13px 26px; border-radius: var(--r-sm); border: 1.5px solid transparent;
  cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; white-space: nowrap; line-height: 1.3;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn--gold { background: linear-gradient(135deg, var(--gold-400), var(--gold-500)); color: var(--navy-900); box-shadow: var(--sh-gold); }
.btn--gold:hover { background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: #fff; transform: translateY(-2px); }
.btn--navy { background: var(--navy-700); color: #fff; }
.btn--navy:hover { background: var(--navy-800); color: #fff; transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn--ghost { background: transparent; color: var(--navy-700); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--navy-600); color: var(--navy-700); background: var(--navy-50); }
.btn--light { background: #fff; color: var(--navy-800); }
.btn--light:hover { background: var(--gold-100); color: var(--navy-800); transform: translateY(-2px); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
.btn--outline-light:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
/* a full-width button has room to wrap its label rather than force its container wider */
.btn--block { width: 100%; white-space: normal; }
.btn--lg { padding: 16px 34px; font-size: 1.01rem; }

/* ---------- 6. Top bar ---------- */
.topbar {
  background: var(--navy-900); color: #A9BED6;
  font-size: .82rem; line-height: 1.4;
}
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 42px; flex-wrap: wrap; }
.topbar__l, .topbar__r { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar a { color: #C6D5E8; display: inline-flex; align-items: center; gap: 7px; }
.topbar a:hover { color: var(--gold-300); }
.topbar svg { width: 14px; height: 14px; color: var(--gold-400); flex: none; }
.topbar__tag { display: inline-flex; align-items: center; gap: 7px; color: var(--gold-300); font-weight: 600; }
.topbar__sep { width: 1px; height: 15px; background: rgba(255,255,255,.16); }

/* ---------- 7. Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 900;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease;
}
.hdr.is-stuck { box-shadow: 0 6px 22px rgba(6,28,58,.09); }
.hdr__in { display: flex; align-items: center; gap: 26px; min-height: var(--hdr-h); }
.brand { display: flex; align-items: center; flex: none; }
.brand img, .brand svg { height: calc(var(--hdr-h) - 6px); width: auto; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 6px; list-style: none; flex-wrap: nowrap; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--ff-head); font-weight: 600; font-size: .935rem;
  color: var(--ink); padding: 10px 16px; border-radius: var(--r-sm);
}
/* the in-drawer call-to-action is mobile only */
.nav__mobile-cta { display: none; }
.nav__link:hover, .nav__item.is-open > .nav__link, .nav__link.is-active { color: var(--navy-600); background: var(--navy-50); }
.nav__link .chev { width: 13px; height: 13px; transition: transform .22s ease; opacity: .6; }
.nav__item.is-open .chev { transform: rotate(180deg); }
.hdr__cta { display: flex; align-items: center; gap: 12px; flex: none; }
.hdr__phone { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ff-head); }
.hdr__phone i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--navy-50); color: var(--navy-600); flex: none; }
.hdr__phone i svg { width: 17px; height: 17px; }
.hdr__phone span { display: block; font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.hdr__phone b { font-size: .92rem; color: var(--ink); font-weight: 800; }

/* Mega menu */
.nav__item { position: relative; }
.mega {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-8px);
  width: 640px; max-width: calc(100vw - 40px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); padding: 12px;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease, transform .2s ease; z-index: 60;
}
.nav__item.is-open .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mega__link { display: flex; gap: 12px; padding: 11px 12px; border-radius: var(--r-md); align-items: flex-start; }
.mega__link:hover { background: var(--navy-50); }
.mega__link i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--gold-100); color: var(--gold-600); flex: none; }
.mega__link:hover i { background: var(--navy-600); color: #fff; }
.mega__link i svg { width: 18px; height: 18px; }
.mega__link b { display: block; font-family: var(--ff-head); font-weight: 700; font-size: .9rem; color: var(--ink); line-height: 1.35; }
.mega__link small { display: block; font-size: .775rem; color: var(--muted); line-height: 1.45; }
.mega__foot {
  margin-top: 8px; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--navy-50); display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.mega__foot span { font-size: .84rem; color: var(--navy-800); font-weight: 600; }

/* Burger + mobile drawer */
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; place-items: center; }
.burger span { display: block; width: 19px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; transition: background-color .2s ease, transform .2s ease; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 19px; height: 2px; background: var(--ink); border-radius: 2px; transition: top .2s ease, transform .2s ease; }
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger.is-on span { background: transparent; }
.burger.is-on span::before { top: 0; transform: rotate(45deg); }
.burger.is-on span::after  { top: 0; transform: rotate(-45deg); }
.scrim { position: fixed; inset: 0; background: rgba(6,28,58,.5); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; z-index: 940; }
.scrim.is-on { opacity: 1; visibility: visible; }

/* ---------- 8. Hero (light, search-led — modelled on the reference site) ----------
   The illustration (assets/img/hero.jpg) has a white background, so the hero base is
   white and the soft brand tints are kept to the LEFT (behind the copy), away from the
   image on the right — otherwise a tint would reveal the image's white edge. */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(560px 420px at 4% 16%, rgba(28,99,172,.08), transparent 60%),
    radial-gradient(460px 380px at 10% 98%, rgba(201,151,31,.10), transparent 60%),
    #FFFFFF;
  padding: clamp(34px, 4vw, 58px) 0 clamp(44px, 5vw, 72px);
}
.hero__in {
  position: relative; z-index: 2; display: grid;
  grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  gap: clamp(28px, 3.5vw, 56px); align-items: center;
}
/* slow-drifting ambient wash behind the hero */
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 130%; pointer-events: none;
  background:
    radial-gradient(420px 320px at 20% 25%, rgba(28,99,172,.10), transparent 60%),
    radial-gradient(380px 300px at 78% 70%, rgba(201,151,31,.12), transparent 60%);
  animation: heroDrift 22s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

.hero h1 {
  color: var(--navy-900); margin-bottom: 26px;
  font-size: clamp(1.95rem, 1.15rem + 2.7vw, 3rem); line-height: 1.16;
}
/* accent words are simply gold — no highlighter background */
.hero h1 em { font-style: normal; color: var(--gold-700); }

/* live status pill */
.hero__live {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 16px; box-shadow: var(--sh-sm); font-size: .83rem; color: var(--body);
}
.hero__live b { color: var(--ink); font-family: var(--ff-head); font-weight: 700; }
.hero__live .dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; }
.hero__live .dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ok);
  animation: livePulse 1.9s ease-out infinite;
}
@keyframes livePulse { 0% { transform: scale(1); opacity: .65; } 100% { transform: scale(3); opacity: 0; } }

/* staggered entrance for the hero column */
@keyframes heroRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.js .hero__copy > * { animation: heroRise .75s cubic-bezier(.22,1,.36,1) both; }
.js .hero__copy > *:nth-child(1) { animation-delay: .04s; }
.js .hero__copy > *:nth-child(2) { animation-delay: .12s; }
.js .hero__copy > *:nth-child(3) { animation-delay: .22s; }
.js .hero__copy > *:nth-child(4) { animation-delay: .32s; }
.js .hero__copy > *:nth-child(5) { animation-delay: .40s; }
.js .hero__copy > *:nth-child(6) { animation-delay: .48s; }
.js .hero__art { animation: heroRise .9s .2s cubic-bezier(.22,1,.36,1) both; }

/* search */
.hsearch { position: relative; margin-bottom: 26px; max-width: 520px; }
.hsearch__field { display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  padding: 7px 7px 7px 16px; box-shadow: var(--sh-sm); transition: border-color .18s ease, box-shadow .18s ease; }
.hsearch:focus-within .hsearch__field { border-color: var(--navy-500); box-shadow: 0 0 0 4px rgba(28,99,172,.11); }
.hsearch__field > svg { width: 19px; height: 19px; color: var(--muted); flex: none; }
.hsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: .98rem; padding: 11px 0; color: var(--ink); }
.hsearch input::placeholder { color: var(--muted); opacity: 1; }  /* placeholder text must meet AA too */
.hsearch button {
  flex: none; border: 0; border-radius: 9px; padding: 12px 24px;
  background: var(--navy-700); color: #fff;
  font-family: var(--ff-head); font-weight: 700; font-size: .93rem; transition: background .18s ease;
}
.hsearch button:hover { background: var(--navy-800); }

/* search results dropdown */
.hsearch__out {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--sh-lg); padding: 6px; overflow: hidden; max-height: 330px; overflow-y: auto;
}
.hsearch__out[hidden] { display: none; }
.hsearch__opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; border: 0; background: none; border-radius: 9px; cursor: pointer;
}
.hsearch__opt:hover, .hsearch__opt.is-active { background: var(--navy-50); }
.hsearch__opt i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  background: var(--gold-100); color: var(--gold-700); flex: none; }
.hsearch__opt i svg { width: 17px; height: 17px; }
.hsearch__opt b { display: block; font-family: var(--ff-head); font-weight: 700; font-size: .9rem; color: var(--ink); }
.hsearch__opt small { display: block; font-size: .78rem; color: var(--muted); }
.hsearch__none { padding: 16px 14px; font-size: .87rem; color: var(--muted); }
.hsearch__none a { font-weight: 600; }

/* recommended services pills */
.hero__reclbl {
  font-family: var(--ff-head); font-size: .715rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--navy-600); margin: 0 0 12px;
}
.pills { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin-bottom: 26px; }
.pills a {
  display: inline-block; padding: 8px 15px; border-radius: 6px;
  font-size: .795rem; font-weight: 600; color: var(--ink);
  background: #EDF1F6; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.pills li:nth-child(3n+2) a { background: var(--gold-100); }
.pills li:nth-child(3n+3) a { background: var(--navy-100); }
.pills a:hover { background: var(--navy-700); color: #fff; transform: translateY(-2px); box-shadow: var(--sh-sm); }
.pills .pills__more a { background: transparent; border: 1.5px dashed var(--line); color: var(--navy-700); }
.pills .pills__more a:hover { background: var(--navy-700); color: #fff; border-color: var(--navy-700); }

/* rating line */
.hero__rating { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; font-size: .89rem; color: var(--body); margin: 0; }
.hero__stars { display: inline-flex; gap: 2px; color: var(--gold-500); }
.hero__stars svg { width: 16px; height: 16px; }
.hero__rating b { color: var(--ink); font-family: var(--ff-head); }

/* ===== Hero illustration (right column) ===== */
.hero__art { position: relative; }
.hero__frame {
  position: relative; width: 100%; aspect-ratio: 1 / 0.95;
  display: grid; place-items: center;
}
.hero__img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  /* no drop-shadow: the image has a white background that blends into the white hero, so a
     shadow would trace the white square's edge. */
}

/* Branded placeholder shown until assets/img/hero.png exists (main.js removes the <img>
   when the file is missing, so this is what you see meanwhile). */
.hero__ph {
  position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px;
  border: 2px dashed var(--line); border-radius: var(--r-xl);
  background:
    radial-gradient(60% 55% at 50% 40%, rgba(28,99,172,.07), transparent 70%),
    linear-gradient(160deg, #F7FAFE, #FFFFFF);
  color: var(--muted);
}
.hero__img { position: relative; z-index: 1; }   /* real image sits above the placeholder */
.hero__ph-ico {
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px;
  background: linear-gradient(140deg, var(--navy-600), var(--navy-800)); color: var(--gold-300);
  box-shadow: var(--sh-md);
}
.hero__ph-ico svg { width: 30px; height: 30px; }
.hero__ph b { font-family: var(--ff-head); font-size: 1rem; color: var(--navy-800); }
.hero__ph small { font-size: .82rem; }
.hero__ph code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .78rem;
  background: var(--navy-50); color: var(--navy-700); padding: 2px 7px; border-radius: 5px; }

/* the hero illustration sits still — no float/parallax — so its edges never shift into view */

@media (max-width: 1024px) {
  .hero__art { width: 100%; max-width: 460px; margin-inline: auto; }
}

/* ---------- 9. Lead form ---------- */
.lead {
  background: #fff; border-radius: var(--r-xl); padding: 26px; box-shadow: var(--sh-lg);
  border: 1px solid rgba(255,255,255,.5); position: relative;
}
.lead__top { text-align: center; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px dashed var(--line); }
.lead__top h3 { margin-bottom: 4px; font-size: 1.3rem; }
.lead__top p { font-size: .855rem; color: var(--muted); margin: 0; }
.lead__off {
  position: absolute; top: -13px; right: 22px;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color: var(--navy-900); font-family: var(--ff-head); font-weight: 800; font-size: .74rem;
  padding: 6px 14px; border-radius: 999px; box-shadow: var(--sh-gold); letter-spacing: .03em;
}
.field { margin-bottom: 13px; }
.field label { display: block; font-size: .8rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; font-family: var(--ff-head); }
.field label .req { color: #D64545; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--navy-50); font-size: .93rem; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease; font-family: var(--ff-body);
}
.field textarea { resize: vertical; min-height: 88px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy-500); background: #fff; box-shadow: 0 0 0 4px rgba(28,99,172,.11); }
.field input::placeholder, .field textarea::placeholder { color: #9AA8BB; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A90' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 15px; padding-right: 38px;
}
.field--phone { display: grid; grid-template-columns: 64px 1fr; gap: 8px; }
.field--phone .cc { display: grid; place-items: center; background: var(--navy-100); border: 1.5px solid var(--line); border-radius: var(--r-sm); font-weight: 700; font-size: .9rem; color: var(--navy-800); }
.field .err { display: none; color: #D64545; font-size: .765rem; margin-top: 5px; font-weight: 600; }
.field.is-bad input, .field.is-bad select { border-color: #E9A0A0; background: #FDF4F4; }
.field.is-bad .err { display: block; }
.check { display: flex; gap: 9px; align-items: flex-start; font-size: .8rem; color: var(--muted); margin: 4px 0 15px; line-height: 1.55; }
.check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--navy-600); flex: none; }
.lead__note { text-align: center; font-size: .755rem; color: var(--muted); margin-top: 13px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.lead__note svg { width: 13px; height: 13px; color: var(--ok); }
.form-ok {
  display: none; text-align: center; padding: 28px 12px;
}
.form-ok.is-on { display: block; }
.form-ok i { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); margin: 0 auto 16px; }
.form-ok i svg { width: 30px; height: 30px; }
.form-ok h4 { font-size: 1.2rem; margin-bottom: 6px; }
.form-ok p { font-size: .88rem; color: var(--muted); }

/* ---------- 10. Stats ---------- */
/* bright-gold rolling banner band */
.marquee-band { background: linear-gradient(180deg, var(--gold-300), var(--gold-400)); border-top: 1px solid var(--gold-500); border-bottom: 1px solid var(--gold-500); padding: 18px 0; }

/* stats sit inside a raised card */
.stats { padding: clamp(30px, 4vw, 54px) 0; }
.stats__card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md); padding: clamp(22px,2.6vw,34px) clamp(14px,2vw,26px); }
.stats__in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat { text-align: center; padding: 8px 14px; position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 16%; height: 68%; width: 1px; background: var(--line); }
.stat b { display: block; font-family: var(--ff-head); font-size: clamp(1.85rem, 1.3rem + 1.9vw, 2.7rem); font-weight: 800; color: var(--navy-700); line-height: 1.05; letter-spacing: -.03em; }
.stat b span { color: var(--gold-500); }
.stat p { margin: 6px 0 0; font-size: .87rem; color: var(--muted); font-weight: 500; }

/* ---------- 11. Cards ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px 26px; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease; position: relative; overflow: hidden; height: 100%;
}
.card::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(90deg, var(--navy-600), var(--gold-400)); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
/* premium blue hover — the whole card turns navy, like the "Not sure where to start?" card */
.card:hover {
  transform: translateY(-8px); border-color: transparent;
  background: linear-gradient(150deg, var(--navy-800), var(--navy-600));
  box-shadow: 0 18px 40px rgba(6,28,58,.28);
}
.card:hover::after { transform: scaleX(0); }
.card:hover h3 { color: #fff; }
.card:hover p { color: #C6D5E8; }
.card:hover .tag { background: rgba(255,255,255,.16); color: var(--gold-300); }
.card:hover .tag--navy { background: rgba(255,255,255,.12); color: #DCE7F3; }
.card__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 15px; background: var(--navy-50); color: var(--navy-600); margin-bottom: 18px; transition: background .28s ease, color .28s ease, transform .28s ease; }
.card__ico svg { width: 27px; height: 27px; }
.card:hover .card__ico { background: rgba(255,255,255,.15); color: var(--gold-300); transform: rotate(-6deg) scale(1.08); }
.card h3 { font-size: 1.16rem; margin-bottom: 9px; transition: color .28s ease; }
.card p { font-size: .91rem; color: var(--muted); margin-bottom: 16px; transition: color .28s ease; }
.card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tag { font-size: .715rem; font-weight: 700; font-family: var(--ff-head); padding: 4px 10px; border-radius: 5px; background: var(--gold-100); color: var(--gold-700); }
.tag--navy { background: var(--navy-100); color: var(--navy-700); }
.card__link { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ff-head); font-weight: 700; font-size: .87rem; color: var(--navy-600); }
.card__link { transition: color .28s ease; }
.card__link svg { width: 15px; height: 15px; transition: transform .22s ease; }
.card:hover .card__link { color: var(--gold-300); }
.card:hover .card__link svg { transform: translateX(4px); }

/* mini card (categories) */
.mini {
  display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px 18px; transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.mini:hover { border-color: var(--navy-500); box-shadow: var(--sh-sm); transform: translateY(-3px); }
.mini i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: var(--gold-100); color: var(--gold-600); flex: none; }
.mini i svg { width: 21px; height: 21px; }
.mini:hover i { background: var(--navy-600); color: #fff; }
.mini b { display: block; font-family: var(--ff-head); font-size: .95rem; color: var(--ink); line-height: 1.3; }
.mini small { color: var(--muted); font-size: .79rem; }

/* ---------- 12. Process ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; }
.steps::before {
  content: ""; position: absolute; top: 34px; left: 12%; right: 12%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--navy-100) 0 10px, transparent 10px 20px);
}
.step { text-align: center; position: relative; z-index: 2; }
.step i {
  display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 18px;
  border-radius: 20px; background: #fff; border: 2px solid var(--navy-100); color: var(--navy-600);
  transition: background .26s ease, border-color .26s ease, color .26s ease, transform .26s ease, box-shadow .26s ease; position: relative;
}
.step i svg { width: 28px; height: 28px; }
.step:hover i { background: linear-gradient(135deg, var(--navy-600), var(--navy-800)); border-color: transparent; color: var(--gold-300); transform: translateY(-5px); box-shadow: var(--sh-md); }
.step i b {
  position: absolute; top: -9px; right: -9px; width: 27px; height: 27px; border-radius: 50%;
  background: var(--gold-400); color: var(--navy-900); font-family: var(--ff-head); font-size: .8rem;
  font-weight: 800; display: grid; place-items: center; border: 2px solid #fff;
}
.step h4 { font-size: 1.02rem; margin-bottom: 6px; }
.step p { font-size: .865rem; color: var(--muted); margin: 0; }

/* ---------- 13. Feature list ---------- */
.flist { list-style: none; display: grid; gap: 16px; }
.flist li { display: flex; gap: 13px; align-items: flex-start; }
.flist i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--ok-bg); color: var(--ok); flex: none; margin-top: 2px; }
.flist i svg { width: 15px; height: 15px; }
.flist b { display: block; font-family: var(--ff-head); font-size: .99rem; color: var(--ink); margin-bottom: 2px; }
.flist span { font-size: .89rem; color: var(--muted); }
.section--navy .flist b { color: #fff; }
.section--navy .flist span { color: #A9BED6; }
.section--navy .flist i { background: rgba(224,179,60,.15); color: var(--gold-300); }

/* checklist (compact) */
.checks { list-style: none; display: grid; gap: 11px; }
.checks li { display: flex; gap: 11px; align-items: flex-start; font-size: .92rem; }
.checks li::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  background: var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F9254' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}
.checks--light li { color: #C6D5E8; }
.checks--light li::before { background-color: rgba(224,179,60,.16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0CE6E' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }

/* ---------- 14. Split media block ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4.5vw, 68px); align-items: center; }
.split--form { grid-template-columns: 1fr 420px; align-items: start; }
.visual { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--navy-50); }
.visual img { width: 100%; height: 100%; object-fit: cover; }
.visual__badge {
  position: absolute; left: 22px; bottom: 22px; background: #fff; border-radius: var(--r-md);
  padding: 15px 20px; box-shadow: var(--sh-md); display: flex; align-items: center; gap: 13px;
}
.visual__badge b { font-family: var(--ff-head); font-size: 1.5rem; color: var(--navy-700); display: block; line-height: 1; }
.visual__badge span { font-size: .78rem; color: var(--muted); }
.visual__badge i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--gold-100); color: var(--gold-600); }

/* decorative illustration panel (no external images needed) */
.panel {
  border-radius: var(--r-xl); padding: 34px; position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--navy-800), var(--navy-600));
  color: #C6D5E8; box-shadow: var(--sh-lg);
}
.panel::before {
  content: ""; position: absolute; width: 300px; height: 300px; right: -110px; top: -110px;
  border-radius: 50%; background: radial-gradient(circle, rgba(224,179,60,.32), transparent 68%);
}
.panel__row { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.12); position: relative; z-index: 2; }
.panel__row:last-child { border-bottom: 0; }
.panel__row i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.1); color: var(--gold-300); flex: none; }
.panel__row i svg { width: 21px; height: 21px; }
.panel__row b { display: block; color: #fff; font-family: var(--ff-head); font-size: .98rem; }
.panel__row small { font-size: .82rem; color: #A9BED6; }
.panel__row .val { margin-left: auto; font-family: var(--ff-head); font-weight: 800; color: var(--gold-300); font-size: 1.05rem; }

/* ---------- 15. Testimonials ---------- */
.rail { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 20px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.quote {
  flex: 0 0 clamp(280px, 33%, 380px); scroll-snap-align: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px;
  display: flex; flex-direction: column; gap: 15px;
}
.quote__stars { display: flex; gap: 3px; color: var(--gold-400); }
.quote__stars svg { width: 17px; height: 17px; }
.quote p { font-size: .93rem; color: var(--body); margin: 0; flex: 1; }
.quote__by { display: flex; align-items: center; gap: 12px; padding-top: 15px; border-top: 1px solid var(--line-2); }
.quote__by i {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--navy-600), var(--navy-800)); color: var(--gold-300);
  font-family: var(--ff-head); font-weight: 800; font-size: .93rem;
}
.quote__by b { display: block; font-family: var(--ff-head); font-size: .93rem; color: var(--ink); }
.quote__by small { color: var(--muted); font-size: .8rem; }
.rail__nav { display: flex; justify-content: center; gap: 10px; margin-top: 6px; }
.rail__nav button {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff;
  display: grid; place-items: center; color: var(--navy-700); transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.rail__nav button:hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.rail__nav svg { width: 18px; height: 18px; }

/* auto-scrolling testimonial banner — two rows moving in opposite directions */
.tmarquee {
  display: grid; gap: 22px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.tmarquee__row { overflow: hidden; }
.tmarquee__t { display: flex; gap: 22px; width: max-content; align-items: stretch; animation: tslide 95s linear infinite; }
.tmarquee__row--rev .tmarquee__t { animation-direction: reverse; }
.tmarquee:hover .tmarquee__t { animation-play-state: paused; }
@keyframes tslide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tquote { flex: 0 0 clamp(290px, 80vw, 372px); width: clamp(290px, 80vw, 372px); padding: 22px 24px; }
.tquote p { font-size: .9rem; }

/* ---------- 16. Accordion ---------- */
.acc { display: grid; gap: 12px; }
.acc__item { border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; overflow: hidden; transition: border-color .22s ease, box-shadow .22s ease; }
.acc__item.is-open { border-color: var(--navy-500); box-shadow: var(--sh-sm); }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; background: none; border: 0; text-align: left;
  font-family: var(--ff-head); font-weight: 700; font-size: 1rem; color: var(--ink); line-height: 1.45;
}
.acc__btn:hover { color: var(--navy-600); }
.acc__btn i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy-50); color: var(--navy-600); flex: none; transition: background-color .22s ease, color .22s ease, transform .22s ease; }
.acc__btn i svg { width: 15px; height: 15px; }
.acc__item.is-open .acc__btn i { background: var(--navy-600); color: #fff; transform: rotate(180deg); }
.acc__body { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.acc__body > div { padding: 0 22px 20px; font-size: .93rem; color: var(--muted); }
.acc__body p { margin-bottom: .8em; }
.acc__body ul { padding-left: 20px; }
.acc__body li { margin-bottom: 5px; }

/* FAQ two-column with a spot illustration */
.faq-split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.faq-aside { position: sticky; top: calc(var(--hdr-h) + 22px); }
.faq-aside p { color: var(--muted); margin-bottom: 6px; }
.faq-art { width: 100%; max-width: 340px; margin: 6px 0 22px; }
.spot { width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
  .faq-split { grid-template-columns: 1fr; }
  .faq-aside { position: static; text-align: center; }
  .faq-aside .eyebrow { }
  .faq-art { margin: 10px auto 20px; }
}

/* ---------- 17. CTA band ---------- */
.cta {
  border-radius: var(--r-xl); padding: clamp(34px, 4vw, 56px); position: relative; overflow: hidden;
  background: linear-gradient(130deg, var(--navy-800), var(--navy-600) 70%, var(--navy-700));
  color: #C6D5E8; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.cta::before {
  content: ""; position: absolute; width: 380px; height: 380px; right: -100px; bottom: -180px;
  border-radius: 50%; background: radial-gradient(circle, rgba(224,179,60,.3), transparent 68%);
}
.cta > * { position: relative; z-index: 2; }
.cta h2 { color: #fff; margin-bottom: 8px; }
.cta p { color: #C6D5E8; margin: 0; max-width: 560px; }
.cta__act { display: flex; gap: 13px; flex-wrap: wrap; }

/* thin inline CTA used inside service copy */
.cta-slim {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: var(--navy-50); border: 1px solid var(--navy-100); border-left: 4px solid var(--gold-500);
  border-radius: var(--r-md); padding: 20px 24px; margin: 30px 0;
}
.cta-slim b { font-family: var(--ff-head); font-size: 1.05rem; color: var(--ink); display: block; }
.cta-slim span { font-size: .875rem; color: var(--muted); }

/* ---------- 18. Page hero (inner pages) ---------- */
.phero {
  background:
    radial-gradient(760px 380px at 85% 0%, rgba(28,99,172,.55), transparent 60%),
    linear-gradient(150deg, var(--navy-900), var(--navy-700));
  color: #C6D5E8; padding: clamp(34px,3.5vw,48px) 0 clamp(44px,5vw,74px); position: relative; overflow: hidden;
}
.phero h1 { color: #fff; margin-bottom: 14px; }
.phero__lead { font-size: 1.04rem; color: #B4C8DE; max-width: 640px; }
.phero__in { display: grid; grid-template-columns: 1fr 400px; gap: clamp(30px,4vw,56px); align-items: start; }
.phero--plain .phero__in { grid-template-columns: 1fr; text-align: center; }
.phero--plain .phero__lead { margin-inline: auto; }
/* decorative compliance background on the plain (About / Contact) heroes */
.phero--plain::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(../img/phero-bg.svg) center right / cover no-repeat;
}
.phero .phero__in { position: relative; z-index: 2; }
.phero .crumb { position: relative; z-index: 2; }

.crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .82rem; margin-bottom: 18px; color: #B4C8DE; }
.crumb a { color: #B4C8DE; }
.crumb a:hover { color: var(--gold-300); }
.crumb svg { width: 13px; height: 13px; opacity: .7; }
.crumb [aria-current] { color: var(--gold-300); font-weight: 600; }

.incl { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); border-radius: var(--r-lg); padding: 22px 24px; margin-top: 26px; }
.incl h4 { color: #fff; font-size: .96rem; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.incl h4 svg { width: 17px; height: 17px; color: var(--gold-400); }
.incl ul { columns: 2; column-gap: 26px; }
.incl .checks li { break-inside: avoid; margin-bottom: 11px; font-size: .875rem; }

/* ---------- 19. Service page body ---------- */
/* Section progress nav as a floating dark card. The wrapper is transparent and lets clicks
   pass through its margins; the inner .subnav__in is the navy pill. */
.subnav { position: sticky; top: calc(var(--hdr-h) + 10px); z-index: 700; pointer-events: none; margin-top: 14px; }
.subnav__in {
  pointer-events: auto;
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-700));
  border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 6px;
  box-shadow: 0 12px 30px rgba(6,28,58,.24);
}
.subnav__in::-webkit-scrollbar { display: none; }
.subnav a {
  padding: 11px 16px; font-family: var(--ff-head); font-weight: 600; font-size: .87rem;
  color: #B4C8DE; border-radius: 9px; white-space: nowrap; transition: background-color .18s ease, color .18s ease;
}
.subnav a:hover { color: #fff; background: rgba(255,255,255,.09); }
.subnav a.is-active { color: var(--navy-900); background: linear-gradient(135deg, var(--gold-400), var(--gold-500)); }

.doc { display: grid; grid-template-columns: 1fr 340px; gap: clamp(30px,4vw,54px); align-items: start; }
/* Grid items default to min-width:auto, so the 540px min-width on the data tables would
   stop this column shrinking on small screens and push the whole page sideways. Allowing
   it to shrink lets .tbl-wrap's own overflow-x:auto scroll the table instead. */
.doc__main, .doc__aside { min-width: 0; }
.doc__main h2 { margin-top: 0; }
/* flow-root contains the floated section illustration within its own section */
.doc__main section { padding-block: clamp(28px, 3vw, 44px); border-bottom: 1px solid var(--line-2); display: flow-root; }
.doc__main section:first-child { padding-top: clamp(30px,3.4vw,46px); }
.doc__main section:last-child { border-bottom: 0; }
.doc__main h3 { margin-top: 26px; }

/* related spot illustration, floated so the section text wraps beside it */
.sec-ill { float: right; width: min(34%, 272px); margin: 2px 0 16px 30px; }
.sec-ill svg { width: 100%; height: auto; display: block; }
.doc__main .tbl-wrap { clear: right; }   /* tables always take the full width, below the float */
@media (max-width: 640px) {
  .sec-ill { float: none; width: 100%; max-width: 300px; margin: 0 auto 18px; }
}
.doc__main ul, .doc__main ol { padding-left: 0; list-style: none; }
.doc__main .plain { padding-left: 22px; list-style: disc; }
.doc__main .plain li { margin-bottom: 7px; }

.aside { position: sticky; top: calc(var(--hdr-h) + 66px); display: grid; gap: 20px; }
/* Without this the nowrap button inside a padded card sets the grid column's min-content
   width, blowing the sidebar wider than its container on narrow screens. */
.aside > * { min-width: 0; }
.aside .lead { padding: 22px; box-shadow: var(--sh-md); border: 1px solid var(--line); }
.side-card { background: var(--navy-50); border: 1px solid var(--navy-100); border-radius: var(--r-lg); padding: 22px; }
.side-card h4 { font-size: 1rem; margin-bottom: 14px; }
.side-card .checks li { font-size: .87rem; }
.side-card__call { background: linear-gradient(140deg, var(--navy-800), var(--navy-600)); color: #C6D5E8; border: 0; text-align: center; }
.side-card__call h4 { color: #fff; }
.side-card__call p { font-size: .86rem; color: #A9BED6; margin-bottom: 16px; }
.side-card__call a.tel { display: block; font-family: var(--ff-head); font-weight: 800; font-size: 1.22rem; color: var(--gold-300); margin-bottom: 4px; }

/* numbered process list */
.plist { list-style: none; display: grid; gap: 18px; counter-reset: p; }
.plist li { display: flex; gap: 16px; counter-increment: p; }
.plist li::before {
  content: counter(p); flex: none; width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(135deg, var(--navy-600), var(--navy-800)); color: var(--gold-300);
  font-family: var(--ff-head); font-weight: 800; font-size: .95rem; display: grid; place-items: center;
}
.plist b { display: block; font-family: var(--ff-head); font-size: 1.02rem; color: var(--ink); margin-bottom: 3px; }
.plist span { font-size: .91rem; color: var(--muted); }

/* comparison / info table */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
table.tbl { width: 100%; border-collapse: collapse; min-width: 540px; font-size: .91rem; }
table.tbl th, table.tbl td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); }
table.tbl th { background: var(--navy-50); font-family: var(--ff-head); font-weight: 700; color: var(--navy-800); font-size: .87rem; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: var(--navy-50); }

/* ---------- 20. Footer ---------- */
.ft { background: var(--navy-900); color: #97ACC6; font-size: .89rem; padding-top: clamp(48px,5vw,72px); }
.ft h5 { font-family: var(--ff-head); font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-400); margin-bottom: 18px; font-weight: 800; }
.ft__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; gap: 34px; padding-bottom: 44px; }
.ft ul { list-style: none; display: grid; gap: 10px; }
.ft a { color: #97ACC6; }
.ft a:hover { color: var(--gold-300); }
/* the logo has dark text, so on the navy footer it sits on a white rounded panel */
.ft__logo { display: inline-flex; background: #fff; border-radius: 14px; padding: 12px 18px; margin-bottom: 20px; box-shadow: var(--sh-sm); }
.ft__logo img { height: 52px; width: auto; display: block; }
.ft__brand p { font-size: .875rem; line-height: 1.75; margin-bottom: 20px; }
.ft__soc { display: flex; gap: 10px; }
.ft__soc a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.07); color: #C6D5E8; }
.ft__soc a:hover { background: var(--gold-500); color: var(--navy-900); transform: translateY(-3px); }
.ft__soc svg { width: 17px; height: 17px; }
.ft__contact li { display: flex; gap: 12px; align-items: flex-start; }
.ft__contact svg { width: 16px; height: 16px; color: var(--gold-400); flex: none; margin-top: 4px; }
.ft__contact b { color: #DCE7F3; font-weight: 600; display: block; }
.ft__bar { border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem; }
.ft__bar nav { display: flex; gap: 20px; flex-wrap: wrap; }
.ft__note { border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0 24px; font-size: .765rem; color: #7A8EA9; line-height: 1.7; }

/* ---------- 21. Floating actions ---------- */
.fab { position: fixed; right: 18px; bottom: 18px; z-index: 880; display: grid; gap: 10px; }
.fab a, .fab button {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; border: 0;
  box-shadow: var(--sh-md); color: #fff; transition: transform .2s ease;
}
.fab a:hover, .fab button:hover { transform: scale(1.08); }
.fab svg { width: 24px; height: 24px; }
.fab .wa { background: #25D366; }
.fab .ph { background: var(--navy-700); }
.fab .top { background: var(--gold-500); color: var(--navy-900); opacity: 0; visibility: hidden; }
.fab .top.is-on { opacity: 1; visibility: visible; }
.fab .top svg { width: 20px; height: 20px; }

/* ---------- 22. Misc ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__t { display: flex; gap: 52px; width: max-content; animation: slide 34s linear infinite; }
.marquee:hover .marquee__t { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee__t span {
  font-family: var(--ff-head); font-weight: 800; font-size: 1.08rem; color: var(--navy-800);
  white-space: nowrap; display: flex; align-items: center; gap: 12px; letter-spacing: .01em;
}
.marquee__t span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--navy-700); }

/* Scroll reveal is opt-in via the .js class set by the inline head script, so that
   content is never left invisible if scripts are blocked or fail to load. */
/* transform kept at a moderate duration so it serves both the entrance rise and the card
   hover lift; background/shadow/border animate too so the premium card hover is smooth. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .4s ease, background .3s ease, box-shadow .3s ease, border-color .3s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

.note {
  background: var(--gold-100); border: 1px solid #F2E4BD; border-left: 4px solid var(--gold-500);
  border-radius: var(--r-sm); padding: 15px 18px; font-size: .9rem; color: #6D5310; margin: 22px 0;
}
.note b { color: #4F3B08; }

/* ---------- 23. Responsive ---------- */
/* the header phone block is the first thing to go when the row gets tight */
@media (max-width: 1300px) {
  .hdr__phone { display: none; }
}
@media (max-width: 1120px) {
  .hero__in { grid-template-columns: 1fr 380px; }
  .doc { grid-template-columns: 1fr 310px; }
  .phero__in { grid-template-columns: 1fr 360px; }
  .ft__grid { grid-template-columns: 1.6fr 1fr 1fr; row-gap: 40px; }
}
@media (max-width: 1024px) {
  .nav, .hdr__phone { display: none; }
  .burger { display: grid; margin-left: auto; }
  .hdr__cta .btn { display: none; }
  .nav__mobile-cta { display: grid; }

  /* Mobile drawer.
     It stays display:none while closed rather than merely sitting off-screen. A
     position:fixed element translated past the right edge is NOT clipped by body's
     overflow, and it made the whole page horizontally scrollable into empty space on
     every screen under 1024px. main.js mounts it (.is-mounted) a frame before sliding
     it in (.is-on), so the animation is unchanged. */
  .nav {
    display: none; position: fixed; top: 0; right: 0; bottom: 0; width: min(88vw, 380px);
    background: #fff; z-index: 950; padding: 20px 18px 40px; overflow-y: auto;
    transform: translateX(105%); transition: transform .3s cubic-bezier(.4,0,.2,1); box-shadow: var(--sh-lg); margin: 0;
  }
  .nav.is-mounted { display: block; }
  .nav.is-on { transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__item { border-bottom: 1px solid var(--line-2); }
  .nav__link { justify-content: space-between; padding: 14px 10px; font-size: 1rem; border-radius: 0; }
  .nav__link:hover, .nav__item.is-open > .nav__link { background: none; }
  .mega {
    position: static; transform: none; width: auto; max-width: none; box-shadow: none; border: 0;
    padding: 0 0 12px; opacity: 1; visibility: visible; display: none; border-radius: 0;
  }
  .nav__item.is-open .mega { display: block; transform: none; }
  .mega__grid { grid-template-columns: 1fr; }
  .mega__link { padding: 10px 10px; }
  .mega__link small { display: none; }
  .mega__foot { flex-direction: column; align-items: stretch; text-align: center; }
  .nav__mobile-cta { display: grid; gap: 10px; margin-top: 20px; }

  .hero__in, .phero__in, .doc, .split, .split--form { grid-template-columns: 1fr; }
  .aside { position: static; }
  .doc__aside { max-width: 520px; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .steps::before { display: none; }
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .stats__in { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .stat:nth-child(3)::before { display: none; }
}
@media (max-width: 760px) {
  :root { --hdr-h: 76px; }
  .topbar__l .topbar__sep, .topbar__r { display: none; }
  .topbar__in { justify-content: center; }
  .brand img, .brand svg { height: calc(var(--hdr-h) - 6px); }
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .cta { flex-direction: column; align-items: flex-start; text-align: left; }
  .incl ul { columns: 1; }
  .ft__grid { grid-template-columns: 1fr 1fr; }
  .ft__brand { grid-column: 1 / -1; }
  .ft__bar { flex-direction: column; text-align: center; align-items: center; }
  .quote { flex: 0 0 84%; }
  .lead { padding: 22px 18px; }
  .cta-slim { flex-direction: column; align-items: stretch; }
  .cta-slim .btn { width: 100%; }
}
@media (max-width: 480px) {
  .wrap { width: calc(100% - 32px); }
  /* the CTA band clips its own overflow, so its buttons must fit rather than be cut off */
  .cta { padding: 26px 20px; }
  .cta__act { width: 100%; }
  .cta__act .btn { width: 100%; }
  .btn { white-space: normal; }
  .btn--lg { padding: 14px 22px; font-size: .95rem; }
  .steps, .stats__in { grid-template-columns: 1fr; }
  .stat + .stat::before { display: none; }
  .ft__grid { grid-template-columns: 1fr; }
  .hero__trust { gap: 10px; }
  .field--phone { grid-template-columns: 58px 1fr; }
}

@media print {
  .topbar, .hdr, .fab, .subnav, .aside, .cta, .ft__grid { display: none !important; }
  body { color: #000; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }

  /* These start hidden and are revealed BY their animation, so don't rely on a 0.001ms
     animation completing — state the finished appearance outright. */
  .js .hero__copy > *, .js .hero__art { animation: none !important; opacity: 1; transform: none; }
  .hero::before,
  .js .hero__live .dot::after, .marquee__t, .tmarquee__t { animation: none !important; }
}