/* ==========================================================================
   Maktub Signature Services - Design System
   Blue + teal + white identity.
   Aurora gradient surfaces, glass cards, bento layouts.
   HTML5 / CSS3 only - no frameworks.
   ========================================================================== */

:root {
  /* Brand - blue + teal palette */
  /* Brand - sampled from the Maktub Mobile Notary logo:
     a royal navy that deepens to near-black, a brighter royal blue for the
     right-hand stroke, and the logo's gold for accents.
     Gold is a mid-tone, so it needs a dark ground: #c9ab63 measures 5.99:1 on
     the navy but only 2.19:1 on white. Hence two tiers - --gold on dark
     surfaces, --gold-ink (deepened, same hue) anywhere light. */
  /* Brand - sampled directly from assets/logo.png:
     deep navy #062b6f (the M's left stroke and the MAKTUB wordmark),
     bright azure #005b9e (the right stroke and "MOBILE NOTARY"),
     antique gold #c9ab63 (the star, the pen nib dot, the flanking rules).
     Gold needs a dark ground: #c9ab63 is 5.99:1 on the navy but fails on
     white, so --gold-ink carries it on light surfaces. */
  --navy-950: #041634;
  --navy-900: #062b6f;
  --navy-850: #082f78;
  --navy-800: #013c80;
  --navy-700: #004e8e;
  --navy-600: #005b9e;

  /* Azure accent ramp, under the historical --gold-* names */
  --gold-300: #a9d4f0;
  --gold-400: #4a9fd8;
  --gold-500: #007cc2;
  --gold-600: #005b9e;
  --gold-700: #013c80;

  --gold:      #c9ab63;   /* dark ground only - 5.99:1 on --navy-900 */
  --gold-lift: #dcc48a;   /* for the card gradient's bright azure end */
  --gold-ink:  #7d6a2e;   /* light ground - 5.06:1 on paper */

  --teal-500: #005b9e;
  --teal-400: #4a9fd8;

  --ink: #0d1f42;
  --ink-soft: #33456e;
  --muted: #4a5a7d;
  --paper: #fafafa;
  --mist: #f0f3f8;
  --mist-warm: #e6ecf5;
  --line: #dae1ee;
  --line-warm: #ccd6e8;

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Shape */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Elevation */
  --sh-sm: 0 1px 2px rgba(13, 31, 66, 0.06);
  --sh-md: 0 8px 24px -10px rgba(13, 31, 66, 0.18);
  --sh-lg: 0 24px 60px -24px rgba(4, 22, 52, 0.35);
  --glow-gold: 0 8px 28px -8px rgba(0, 91, 158, 0.5);

  --container: 1180px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t: 200ms var(--ease);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  color: var(--navy-900);
}
p { margin: 0 0 1em; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy-800); color: #fff;
  padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Layout ---------- */
.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.wrap-narrow { max-width: 780px; }

.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-mist { background: var(--mist); }
.section-warm { background: var(--mist-warm); }

.center { text-align: center; }
.stack-cta { margin-top: 40px; }

/* ---------- Type utilities ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin: 0 0 14px;
}
.eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  background: currentColor;
}
.center .eyebrow { justify-content: center; }
.eyebrow-light { color: var(--gold-700); }

.h-xl { font-size: clamp(2.4rem, 5.2vw, 3.9rem); }
.h-lg { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.h-md { font-size: clamp(1.4rem, 2.2vw, 1.75rem); }

.lede {
  font-size: 1.09rem;
  color: var(--muted);
  max-width: 60ch;
}
.center .lede { margin-left: auto; margin-right: auto; }
.on-dark .lede, .lede-light { color: var(--ink); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--ink); }

.grad-text {
  background: linear-gradient(96deg, var(--gold-300) 0%, var(--gold-500) 40%, var(--teal-400) 75%, var(--gold-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Over a hero photo the mid stops of the standard gradient are too dark to
   survive a bright image (the old mid-blue measured 1.8:1 against a white
   photo under the scrim). Heroes get an all-light set instead. Light heroes
   override this again further down with their deep version. */
.hero.aurora .grad-text {
  background-image: linear-gradient(96deg, #a9d4f0 0%, #a9d4f0 40%, #a9d4f0 75%, #a9d4f0 100%);
}
.grad-text-dark {
  background: linear-gradient(96deg, var(--navy-700), var(--gold-600) 55%, var(--teal-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Aurora surfaces ---------- */
.aurora {
  position: relative;
  isolation: isolate;
  background: transparent;
  color: var(--ink);
  overflow: hidden;
}
.aurora > .wrap, .aurora > * { position: relative; z-index: 1; }

.aurora-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: transparent;
  overflow: hidden;
  transform: translate3d(var(--cursor-drift-x, 0px), var(--cursor-drift-y, 0px), 0) scale(1.035);
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.aurora-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(6px);
  transform: scale(1.04);
  opacity: 0.90;
  z-index: 0;
}

/* Dark floor behind the hero video: no white flash before it paints, and the
   headline stays readable if the video is blocked or fails to load. */
.home .hero { background-color: var(--navy-950); }
/* The hero video already carries its own visual interest, so the floating
   colour orbs (especially the top-left blue one) just muddy the footage. */
/* Applies to every hero, not just the home one: over a photo or video the
   floating orbs read as uneven blue blotches rather than a gradient. The scrim
   below does the tinting instead, so it stays smooth edge to edge. */
.hero.aurora .orb { display: none; }

/* The headline's first line is dark green everywhere else on the site, which
   would disappear against this video. Here it runs as a light sage green so
   both it and the gold second line read on the dark footage. */
.home .hero h1 { color: #ffffff; }
.home .hero .eyebrow-light { color: var(--gold-300); }

.home .hero .hero-background-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(2px)saturate(0.78) brightness(0.88);
  transform: scale(1.02);
  opacity: 1;
}

.general-notary .hero.aurora .aurora-bg::before {
  background-image: url("https://images.unsplash.com/photo-1562564055-71e051d33c19?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/desk-overview.svg");
}

.loan-signings .hero.aurora .aurora-bg::before {
  background-image: url("https://images.unsplash.com/photo-1564846824194-346b7871b855?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/contract-and-stamp.svg");
}

.estate-planning .hero.aurora .aurora-bg::before {
  background-image: url("https://images.unsplash.com/photo-1635859890085-ec8cb5466806?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/estate-documents.svg");
}

.remote-online-notarization .hero.aurora .aurora-bg::before {
  background-image: url("https://images.unsplash.com/photo-1616587226157-48e49175ee20?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/remote-online-session.svg");
}

.business-notary .hero.aurora .aurora-bg::before {
  background-image: url("https://images.unsplash.com/photo-1686771416282-3888ddaf249b?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/business-office.svg");
}

/* ---------------------------------------------------------------------------
   Service-page photo heroes
   The headline can't depend on how bright the photograph happens to be, or it
   breaks every time a photo is swapped. So these heroes get a scrim sized for
   the worst case - a pure-white image - and the same light headline treatment
   used on the home page. Any real photo now works underneath.
   --------------------------------------------------------------------------- */
.general-notary .hero .aurora-bg::after,
.loan-signings .hero .aurora-bg::after,
.estate-planning .hero .aurora-bg::after,
.remote-online-notarization .hero .aurora-bg::after,
.business-notary .hero .aurora-bg::after{
  /* A gentle diagonal wash rather than a flat two-stop fill: several close
     stops keep it from banding, and the tint is pulled back off full navy so
     the photograph reads through instead of turning solid blue. */
  background: linear-gradient(
    168deg,
    rgba(10, 25, 40, 0.70) 0%,
    rgba(10, 28, 45, 0.75) 35%,
    rgba(9, 31, 50, 0.80) 70%,
    rgba(8, 33, 54, 0.84) 100%
  );
}

/* The eyebrow runs dark gold across the site; over these dark heroes it needs
   the light gold instead. */
.general-notary .hero .eyebrow-light,
.loan-signings .hero .eyebrow-light,
.estate-planning .hero .eyebrow-light,
.remote-online-notarization .hero .eyebrow-light,
.business-notary .hero .eyebrow-light{ color: var(--gold-300); }

.general-notary .hero h1,
.loan-signings .hero h1,
.estate-planning .hero h1,
.remote-online-notarization .hero h1,
.business-notary .hero h1{ color: #ffffff; }

.general-notary .hero .lede,
.loan-signings .hero .lede,
.estate-planning .hero .lede,
.remote-online-notarization .hero .lede,
.business-notary .hero .lede{ color: rgba(255, 255, 255, 0.90); }

/* Dark floor so the headline holds while the photo is still downloading. */
.general-notary .hero,
.loan-signings .hero,
.estate-planning .hero,
.remote-online-notarization .hero,
.business-notary .hero{ background-color: var(--navy-950); }

.aurora-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(4, 22, 52, 0.18);
  backdrop-filter: blur(4px);
  z-index: 2;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
  pointer-events: none;
}
.orb-1 {
  width: 520px; height: 520px; top: -180px; left: -140px;
  background: radial-gradient(circle, rgba(0, 91, 158,0.42), transparent 68%);
  animation: float-a 24s ease-in-out infinite alternate;
}
.orb-2 {
  width: 600px; height: 600px; bottom: -260px; right: -180px;
  background: radial-gradient(circle, rgba(0, 91, 158,0.40), transparent 68%);
  animation: float-b 30s ease-in-out infinite alternate;
}
.orb-3 {
  width: 380px; height: 380px; top: 28%; right: 16%;
  background: radial-gradient(circle, rgba(39,74,117,0.55), transparent 70%);
  animation: float-a 34s ease-in-out infinite alternate-reverse;
}
@keyframes float-a {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(46px, 34px, 0) scale(1.1); }
}
@keyframes float-b {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-38px, -46px, 0) scale(1.12); }
}

/* Thin accent rule used as a section seam */
.seam {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 91, 158, 0.55), rgba(0, 91, 158, 0.55), transparent);
  border: 0; margin: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primary action, inverted by context.
   One saturated blue could not serve both surfaces: bright enough to hold a
   light section, it read as electric against the dark navy-and-teal cards, and
   the blue glow around it made that worse. So the primary flips instead -
   deep navy on light ground, white on dark ground - which is the highest
   contrast either way and keeps the palette to navy, white and teal. */
.btn-gold {
  background: var(--navy-900);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(6, 43, 111, 0.55);
}
.btn-gold:hover {
  background: var(--navy-800);
  box-shadow: 0 12px 26px -10px rgba(6, 43, 111, 0.6);
}

/* Dark ground: the booking cards (always dark) and the photo heroes on the
   home and service pages. Pages carrying .light-hero keep the navy button. */
.closing-copy .btn-gold,
body:not(.light-hero) .hero .btn-gold {
  background: #fff;
  color: var(--navy-900);
  box-shadow: 0 8px 22px -10px rgba(4, 16, 31, 0.55);
}
.closing-copy .btn-gold:hover,
body:not(.light-hero) .hero .btn-gold:hover {
  background: var(--mist);
  color: var(--navy-950);
  box-shadow: 0 12px 28px -10px rgba(4, 16, 31, 0.6);
}

.btn-navy {
  background: #062b6f;
  color: #fff;
  box-shadow: var(--sh-md);
}
.btn-navy:hover { background: #013c80; }

.btn-glass {
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  border-color: rgba(13, 31, 66, 0.12);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(13, 31, 66, 0.04);
}
.btn-glass:hover { background: rgba(255,255,255,0.98); border-color: rgba(13, 31, 66, 0.18); }

.btn-outline {
  background: transparent;
  color: var(--navy-800);
  border-color: var(--line);
}
.btn-outline:hover { border-color: var(--navy-700); background: rgba(16,35,60,0.04); }

.btn-sm { padding: 10px 20px; font-size: 0.87rem; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gold-600);
  transition: gap var(--t), color var(--t);
}
.link-arrow:hover { gap: 11px; color: var(--gold-500); }
.on-dark .link-arrow { color: var(--gold-600); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t);
}
.site-header.is-stuck { box-shadow: 0 6px 24px -14px rgba(4, 22, 52,0.4); }

.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark {
  /* The old logo was a round seal, so this box was a circle with object-fit:
     cover. The new mark is an M-and-infinity monogram, so it needs the whole
     bounding box and contain, or its outer strokes get clipped. */
  width: 48px; height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.08; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 600;
  color: var(--navy-900);
}
.brand-sub {
  font-size: 0.6rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gold-600);
  font-weight: 600;
}

/* Desktop nav */
.nav { display: flex; align-items: center; }
.nav > ul { display: flex; align-items: center; gap: 4px; }
.nav a, .nav .nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: none;
  border: 0;
  transition: color var(--t), background var(--t);
}
.nav a:hover, .nav .nav-trigger:hover { color: var(--navy-900); background: var(--mist); }
.nav a.is-active { color: var(--navy-900); font-weight: 600; }
.nav a.is-active::after {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold-500);
  margin-left: 2px;
}

.has-menu { position: relative; }
.nav-trigger svg { transition: transform var(--t); }
.has-menu:hover .nav-trigger svg,
.has-menu:focus-within .nav-trigger svg { transform: rotate(180deg); }

.submenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 320px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.has-menu:hover .submenu,
.has-menu:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.submenu::before {
  content: "";
  position: absolute;
  top: -10px; left: 0; right: 0; height: 10px;
}
.submenu a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--r-sm);
  width: 100%;
}
.submenu a:hover { background: var(--mist); }
.submenu-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(140deg, rgba(0, 91, 158,0.16), rgba(0, 91, 158,0.12));
  color: var(--gold-600);
}
.submenu-copy { display: flex; flex-direction: column; gap: 1px; }
.submenu-title { font-size: 0.92rem; font-weight: 600; color: var(--navy-900); }
.submenu-desc { font-size: 0.78rem; color: var(--muted); line-height: 1.4; }

.header-actions { display: flex; align-items: center; gap: 12px; }
.site-header .header-actions .btn-navy {
  background: #062b6f;
  box-shadow: 0 8px 20px -10px rgba(6, 43, 111, 0.65);
}
.site-header .header-actions .btn-navy:hover { background: #013c80; }

/* Tap-to-call. Collapses to an icon-only target on narrow screens, where the
   Book button is hidden and calling is the fastest path to a booking. */
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--navy-800);
  white-space: nowrap;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.header-phone svg { color: var(--gold-600); flex: none; }
.header-phone:hover {
  border-color: var(--gold-400);
  color: var(--navy-900);
  background: rgba(0, 91, 158, 0.07);
}

.burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.burger span {
  display: block; width: 18px; height: 1.6px;
  background: var(--navy-900);
  border-radius: 2px;
  transition: transform var(--t), opacity var(--t);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: 16px 24px 26px;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
}
.drawer > ul { display: flex; flex-direction: column; }
.drawer li { border-bottom: 1px solid var(--line); }
.drawer > ul > li > a, .drawer .sub-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 2px;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--navy-900);
  background: none;
  border: 0;
  text-align: left;
}
.drawer a.is-active { color: var(--gold-600); font-weight: 600; }
.sub-toggle svg { transition: transform var(--t); }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer-sub {
  display: none;
  padding: 0 0 12px 6px;
}
.drawer-sub.is-open { display: block; }
.drawer-sub li { border: 0; }
.drawer-sub a {
  display: block;
  padding: 10px 12px;
  font-size: 0.94rem;
  color: var(--ink-soft);
  border-left: 2px solid var(--line-warm);
}
.drawer-sub a:hover, .drawer-sub a.is-active {
  color: var(--navy-900);
  border-left-color: var(--gold-500);
}
.drawer .btn { margin-top: 20px; }

/* ---------- Hero ---------- */
.hero { padding: 116px 0 108px; background: transparent; }
.hero-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.hero h1 { margin-bottom: 22px; }
.hero .lede { font-size: 1.16rem; margin: 0 auto 34px; }
.home .hero .lede { color: #dbe9fb; }
.hero-actions {
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 46px;
}
.hero-map {
  margin-top: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: 26px;
  align-items: stretch;
}
.hero-map iframe {
  width: 100%;
  min-height: 360px;
  border: 0;
  border-radius: 30px;
  box-shadow: 0 36px 110px rgba(20, 30, 60, 0.16);
}
.area-map {
  width: 100%;
  min-height: 520px;
  border: 0;
  border-radius: 30px;
  box-shadow: 0 36px 110px rgba(20, 30, 60, 0.16);
  display: block;
}
.map-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 30px;
  border-radius: 30px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(13, 31, 66,0.08);
  box-shadow: 0 36px 110px rgba(20, 30, 60, 0.1);
}
.map-copy h3 {
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  margin: 0;
}
.map-copy p { color: var(--ink-soft); }
.fineprint { margin: 0; font-size: 0.92rem; color: var(--muted); }
.hero-compact { padding: 92px 0 84px; }
.hero-compact h1 { font-size: clamp(2rem, 4vw, 3rem); }

.badge-row {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(13, 31, 66,0.08);
  font-size: 0.8rem;
  color: var(--ink);
  backdrop-filter: blur(10px);
}
.badge-dot {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  /* Flat navy with white text. The blue gradient carrying near-black text was
     the same electric problem as the old primary button, and at this size the
     gradient did nothing but muddy a very small label. */
  background: var(--navy-900);
  color: #fff;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

/* Stat rail */
.stat-rail {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.stat {
  flex: 1 1 220px;
  max-width: 280px;
  padding: 22px 26px;
  border-radius: var(--r-md);
  text-align: left;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(13, 31, 66,0.08);
  box-shadow: 0 18px 45px rgba(13, 31, 66,0.08);
  background-image: none;
  backdrop-filter: blur(10px);
}
.stat-value {
  font-family: var(--font-display);
  font-size: 1.55rem;
  /* Sits on a near-white card, so the mid gold was only reaching 2:1. */
  color: var(--gold-700);
  line-height: 1.1;
}
.stat-label { font-size: 0.79rem; color: var(--ink-soft); }

/* ---------- Trust bar ---------- */
.trustbar { background: #062b6f; color: #dce8f5; }
.trustbar-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  padding: 46px 0;
}
.trust-item { display: flex; gap: 14px; align-items: flex-start; }
.trust-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: linear-gradient(140deg, rgba(0, 91, 158,0.24), rgba(74, 159, 216,0.2));
  color: var(--gold-400);
}
.trust-item h3 { font-size: 0.98rem; color: #fff; margin-bottom: 3px; }
.trust-item p { font-size: 0.86rem; color: #b9cbe0; margin: 0; line-height: 1.5; }

/* ---------- Bento grid (services) ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  margin-top: 52px;
}
.bento-card {
  position: relative;
  z-index: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t);
  --mouse-x: 50%;
  --mouse-y: 50%;
  background-image: linear-gradient(140deg, rgba(0, 91, 158,0.10), transparent 42%);
}
.bento-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(0, 91, 158,0.10), transparent 42%);
  opacity: 0;
  transition: opacity var(--t);
  pointer-events: none;
}
.bento-card:hover,
.bento-card.is-hovered {
  transform: translateY(-4px);
  z-index: 1;
  box-shadow: 0 18px 42px -18px rgba(6, 43, 111, 0.32), 0 0 0 1px rgba(74, 159, 216, 0.12);
  border-color: var(--line-warm);
  background: rgba(247, 250, 252, 0.97);
  background-image:
    radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.45), rgba(255,255,255,0.16) 18%, transparent 52%),
    linear-gradient(140deg, rgba(0, 91, 158,0.10), transparent 42%);
}
.bento-card:hover::after,
.bento-card.is-hovered::after { opacity: 1; }

.bento-a { grid-column: span 3; }
.bento-b { grid-column: span 3; }
.bento-c { grid-column: span 2; }
.bento-d { grid-column: span 2; }
.bento-e { grid-column: span 2; }

.bento-feature {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
}
.bento-feature h3 { color: var(--ink); }
.bento-feature p { color: var(--muted); }
.bento-feature .link-arrow { color: var(--gold-600); }
.bento-feature .svc-icon {
  background: linear-gradient(140deg, rgba(0, 91, 158,0.15), rgba(0, 91, 158,0.10));
  color: var(--gold-600);
}
.bento-glow {
  position: absolute;
  width: 300px; height: 300px;
  right: -90px; top: -110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 91, 158,0.30), transparent 68%);
  filter: blur(48px);
  pointer-events: none;
}

.svc-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  margin-bottom: 18px;
  background: linear-gradient(140deg, rgba(0, 91, 158,0.15), rgba(0, 91, 158,0.10));
  color: var(--gold-600);
}
.bento-card h3 { font-size: 1.2rem; margin-bottom: 9px; }
.bento-card p { font-size: 0.93rem; color: var(--muted); margin-bottom: 20px; flex-grow: 1; }

/* ---------- Pricing ---------- */
.price-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.price-panel + .price-panel { margin-top: 22px; }
.price-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 26px;
  background: linear-gradient(120deg, #062b6f, #004e8e 65%, #005b9e);
  color: #fff;
}
.price-head h3 { color: #fff; font-size: 1.06rem; margin: 0; }
.price-head span { font-size: 0.76rem; color: var(--gold-300); letter-spacing: 0.09em; text-transform: uppercase; font-weight: 600; }

.price-table { width: 100%; border-collapse: collapse; font-size: 0.96rem; }
.price-table th, .price-table td { padding: 15px 26px; text-align: left; }
.price-table tbody tr + tr th,
.price-table tbody tr + tr td { border-top: 1px solid var(--line); }
.price-table tbody th { font-weight: 500; color: var(--ink); }
.price-table td {
  text-align: right;
  font-weight: 600;
  color: var(--navy-800);
  white-space: nowrap;
}
.price-table tbody tr:hover { background: var(--mist-warm); }
.price-amt {
  font-family: var(--font-display);
  font-size: 1.06rem;
  color: var(--gold-700);
}

.note-card {
  display: flex;
  gap: 14px;
  padding: 20px 24px;
  border-radius: var(--r-md);
  background: var(--mist-warm);
  border: 1px solid var(--line-warm);
  margin-top: 26px;
}
.note-card svg { flex-shrink: 0; color: var(--gold-600); margin-top: 2px; }
.note-card p { font-size: 0.88rem; color: var(--ink-soft); margin: 0; }
.note-card p + p { margin-top: 8px; }
.note-card strong { color: var(--navy-900); }

.fineprint { font-size: 0.84rem; color: var(--muted); }

/* Example cost cards */
.examples {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 40px;
}
.example {
  padding: 26px 24px;
  border-radius: var(--r-md);
  background: var(--paper);
  border: 1px solid var(--line);
}
.example h3 { font-size: 1rem; margin-bottom: 14px; }
.example ul { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.example li {
  display: flex; justify-content: space-between;
  font-size: 0.89rem; color: var(--muted);
}
.example-total {
  display: flex; justify-content: space-between;
  padding-top: 12px;
  border-top: 1px dashed var(--line-warm);
  font-weight: 700;
  color: var(--navy-900);
}
.example-total span:last-child { color: var(--gold-700); font-family: var(--font-display); font-size: 1.1rem; }

/* ==========================================================================
   Blog index - composition modelled on aircall.io/blog:
   no heavy hero, a light page header, plain-text topic links, uniform cards,
   and a category | date | read-time kicker. Rendered in the Maktub palette.
   ========================================================================== */

.blog-section { padding-top: clamp(40px, 5vw, 64px); }

/* Gold rules either side of the hero eyebrow */
.eyebrow-rules { display: inline-flex; align-items: center; gap: 14px; }
.eyebrow-rules::before,
.eyebrow-rules::after {
  content: "";
  width: clamp(24px, 5vw, 52px);
  height: 1px;
  background: currentColor;
  opacity: 0.65;
}

/* Topic filter - centred text tabs with a gold underline on the active one. */
.blog-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 28px;
  padding-bottom: 6px;
}
.blog-topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 30px;
  min-width: 0;
}
.topic-link {
  position: relative;
  padding: 6px 0 12px;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t);
}
.topic-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-500);
  opacity: 0;
  transition: opacity var(--t);
}
.topic-link:hover { color: var(--navy-900); }
.topic-link.is-active { color: var(--navy-900); }
.topic-link.is-active::after { opacity: 1; }
.blog-add { flex-shrink: 0; }

.blog-count { margin: 0; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 30px;
  margin-top: clamp(34px, 4vw, 52px);
}

/* Section heading between the featured story and the card grid */
.grid-heading {
  grid-column: 1 / -1;
  margin: clamp(24px, 3.5vw, 44px) 0 4px;
  text-align: center;
}
.grid-heading .rule-mark {
  display: block;
  width: 52px;
  height: 2px;
  margin: 0 auto 22px;
  border-radius: 2px;
  background: var(--gold-500);
}
.grid-heading h2 { margin: 0 0 10px; }
.grid-heading p { margin: 0; color: var(--ink-soft); }

/* Cards - white panels, photo flush to the top edge. */
.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: 0 1px 2px rgba(6, 43, 111, 0.04);
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.post-card:not(.is-featured):hover {
  transform: translateY(-3px);
  border-color: var(--line-warm);
  box-shadow: var(--sh-md);
}
.post-thumb {
  display: block;
  overflow: hidden;
  background: var(--mist);
}
/* A post exported without a featured image still needs to hold its place
   in the grid at the right proportions, rather than collapsing to nothing. */
.post-thumb--empty {
  aspect-ratio: 16 / 10;
  border: 1px dashed var(--line-warm);
}
.post-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.post-card:hover .post-thumb img { transform: scale(1.045); }

.post-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding: 22px 22px 24px;
  min-height: 0;
}
.post-cat {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0, 91, 158, 0.16);
  color: var(--gold-700);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.post-copy h3 {
  margin: 0 0 11px;
  font-size: 1.18rem;
  line-height: 1.34;
}
.post-copy h3 a { transition: color var(--t); }
.post-card:hover h3 a { color: var(--gold-700); }
.post-excerpt {
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.7;
}
.post-facts {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.82rem;
}
.post-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}
.post-link {
  margin-top: auto;
  color: var(--gold-700);
  font-weight: 700;
  font-size: 0.9rem;
}

/* Blog-page CTA on the soft blurred asset. hero-blur.svg is a light cream
   field, so the copy runs dark here rather than white, and the aurora overlay
   and orbs are suppressed to keep the blur clean rather than muddied. */
.cta-band.cta-band--solid {
  background-image: url("../assets/hero-blur.svg");
  background-position: center;
  background-size: cover;
  border-top: 1px solid var(--line-warm);
  border-bottom: 1px solid var(--line-warm);
}
.cta-band--solid .aurora-bg,
.cta-band--solid .orb { display: none; }
.cta-band--solid h2 { color: var(--navy-900); }
.cta-band--solid .lede { color: var(--ink-soft); }
.cta-band--solid .btn-glass {
  background: var(--navy-900);
  color: #fff;
  border-color: var(--navy-900);
  box-shadow: none;
}
.cta-band--solid .btn-glass:hover { background: var(--navy-800); border-color: var(--navy-800); }

/* Featured (newest) article - a full-width row above the grid. The featured
   treatment only applies while "All" is selected; inside a filtered topic the
   card drops back to a normal grid cell (see the blog filter in script.js). */
.post-flag { display: none; }
.post-card.is-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 54px);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.post-card.is-featured .post-thumb {
  border-radius: var(--r-lg);
  border: 1px solid var(--line-warm);
}
.post-card.is-featured .post-thumb img { aspect-ratio: 16 / 11; }
.post-card.is-featured .post-copy { padding: 0; }
.post-card.is-featured h3 {
  margin-bottom: 15px;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.18;
}
.post-card.is-featured .post-excerpt {
  margin-bottom: 18px;
  font-size: 1.02rem;
}
.post-card.is-featured .post-facts { margin-bottom: 16px; }

.post-card[hidden] { display: none; }
.blog-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 56px 0;
  text-align: center;
  color: var(--muted);
}

/* Newsletter band */
.news-section { padding-top: 0; }
.news-band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 420px);
  align-items: center;
  gap: 20px 26px;
  padding: 26px clamp(24px, 3vw, 34px);
  border: 1px solid var(--line-warm);
  border-radius: var(--r-lg);
  background: var(--mist);
}
.news-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--line-warm);
  color: var(--gold-700);
}
.news-copy h2 {
  margin: 0 0 5px;
  font-size: 1.14rem;
  line-height: 1.35;
}
.news-copy p { margin: 0; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.6; }
.news-form { display: flex; flex-wrap: wrap; gap: 10px; }
.news-form input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 12px 15px;
  border: 1px solid var(--line-warm);
  border-radius: var(--r-sm);
  background: #fff;
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink);
}
.news-form input::placeholder { color: var(--muted); }
.news-form input:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 1px; }
.news-form .btn { flex: 0 0 auto; }
.news-note {
  flex: 1 0 100%;
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.news-note:empty { display: none; }

/* ---------- Article detail pages ---------- */
.article-hero { padding: clamp(64px, 9vw, 116px) 0 56px; }
.article-hero__inner { max-width: 820px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; color: var(--muted); font-size: 0.9rem; }
.article-byline { display: flex; align-items: center; gap: 13px; margin: 0 0 26px; color: var(--ink-soft); font-size: 0.88rem; }
.article-byline img { width: 52px; height: 52px; border-radius: 13px; border: 1px solid var(--line-warm); background: #fff; object-fit: contain; padding: 2px; }
.article-byline strong { display: block; font-size: 1rem; color: var(--navy-900); }
.article-byline .byline-label { display: block; font-size: 0.76rem; letter-spacing: 0.02em; color: var(--muted); }
.article-byline .byline-role { display: block; font-size: 0.8rem; color: var(--muted); }
.article-body { max-width: var(--container); margin: 0 auto; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: clamp(30px, 4vw, 54px); align-items: start; }
.article-content { min-width: 0; }

/* ---- Article sidebar ---- */
.article-aside {
  display: grid;
  align-content: start;
  gap: 22px;
}
.article-body .side-card {
  padding: 22px 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: 0 1px 2px rgba(6, 43, 111, 0.04);
}
.article-body .side-title {
  position: relative;
  margin: 0 0 16px;
  padding-bottom: 12px;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy-900);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 0;
}
.article-body .side-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 46px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-500);
}
.article-body .article-aside ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.article-body .article-aside a:not(.btn) {
  background: none;
  border-bottom: 0;
  text-decoration: none;
}

/* Widget: on this page */
.article-body .article-toc .toc-nav {
  position: relative;
  padding-left: 15px;
  border-left: 2px solid var(--line);
}
.article-body .article-toc .toc-nav li + li { margin-top: 2px; }
.article-body .article-toc .toc-nav a {
  position: relative;
  display: block;
  padding: 7px 0;
  color: var(--ink-soft);
  font-size: 0.855rem;
  font-weight: 500;
  line-height: 1.45;
  transition: color 0.18s ease, transform 0.18s ease;
}
.article-body .article-toc .toc-nav a::before {
  content: "";
  position: absolute;
  left: -17px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--gold-500);
  opacity: 0;
  transform: scaleY(0.35);
  transform-origin: top;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.article-body .article-toc .toc-nav a:hover { color: var(--navy-900); transform: translateX(2px); }
.article-body .article-toc .toc-nav a:hover::before { opacity: 0.45; transform: scaleY(1); }
.article-body .article-toc .toc-nav a.is-current { color: var(--navy-900); font-weight: 700; }
.article-body .article-toc .toc-nav a.is-current::before { opacity: 1; transform: scaleY(1); }

/* Widget: recent posts */
.article-body .side-recent li + li { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }
.article-body .side-recent a {
  display: block;
  color: var(--navy-900);
  font-weight: 600;
  font-size: 0.925rem;
  line-height: 1.45;
  transition: color 0.18s ease;
}
.article-body .side-recent a:hover { color: var(--gold-700); }
.article-body .side-date {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.775rem;
}
.article-body .side-date svg { color: var(--gold-600); flex: none; }

/* Widget: have any question */
.article-body .side-card--dark {
  border-color: transparent;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(0, 91, 158, 0.13), rgba(0, 91, 158, 0) 62%),
    linear-gradient(165deg, var(--navy-900), var(--navy-950));
  box-shadow: var(--sh-md);
}
.article-body .side-card--dark .side-title { color: var(--gold-300); border-bottom-color: rgba(255, 255, 255, 0.14); }
.article-body .side-card--dark .side-title::after { display: none; }
.article-body .side-card--dark p {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.875rem;
  line-height: 1.6;
}
.article-body .side-reach { margin-bottom: 18px !important; }
.article-body .side-reach li { display: flex; align-items: center; gap: 10px; }
.article-body .side-reach li + li { margin-top: 10px; }
.article-body .side-reach .reach-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(169, 212, 240, 0.14);
  color: var(--gold-300);
}
.article-body .side-reach a { color: #fff; font-size: 0.885rem; font-weight: 500; }
.article-body .side-reach a:hover { color: var(--gold-300); }

/* Widget: categories */
.article-body .side-cats li + li { border-top: 1px solid var(--line); }
.article-body .side-cats a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 0;
  color: var(--ink-soft);
  font-size: 0.885rem;
  font-weight: 500;
  transition: color 0.18s ease, transform 0.18s ease;
}
.article-body .side-cats a svg { color: var(--gold-600); flex: none; transition: transform 0.18s ease; }
.article-body .side-cats a:hover { color: var(--navy-900); }
.article-body .side-cats a:hover svg { transform: translateX(3px); }
.article-body .side-cats a.is-current { color: var(--navy-900); font-weight: 700; }

/* ---- Tags + share footer ---- */
.article-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 24px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.article-tags, .article-share { display: flex; align-items: center; gap: 10px; }
.article-body .foot-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--navy-900);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.article-body .foot-label svg { color: var(--gold-600); }
.article-body .article-tags a:not(.btn) {
  display: inline-flex;
  padding: 6px 14px;
  border: 1px solid var(--line-warm);
  border-radius: 999px;
  background: var(--mist);
  color: var(--gold-700);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.article-body .article-tags a:not(.btn):hover { background: var(--gold-500); color: var(--navy-950); }
.article-body .share-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gold-500);
  color: var(--navy-950);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease;
}
.article-body .share-dot:hover { background: var(--gold-600); transform: translateY(-2px); }
.article-body .share-dot.is-copied { background: var(--navy-900); color: var(--gold-300); }

/* Sidebar links must beat the generic .article-body a:not(.btn) gold rule
   that is declared later in this file. */
.article-body .article-aside a:not(.btn) { color: var(--ink-soft); }
.article-body .article-aside .side-recent a:not(.btn) { color: var(--navy-900); }
.article-body .article-aside .side-recent a:not(.btn):hover { color: var(--gold-700); }
.article-body .article-aside .side-reach a:not(.btn) { color: #fff; }
.article-body .article-aside .side-reach a:not(.btn):hover { color: var(--gold-300); }
.article-body .article-aside .side-cats a:not(.btn) { color: var(--ink-soft); }
.article-body .article-aside .side-cats a:not(.btn):hover,
.article-body .article-aside .side-cats a:not(.btn).is-current { color: var(--navy-900); }
.article-body .article-aside .toc-nav a:not(.btn) { color: var(--ink-soft); }
.article-body .article-aside .toc-nav a:not(.btn):hover,
.article-body .article-aside .toc-nav a:not(.btn).is-current { color: var(--navy-900); }

/* ---- Hero meta row ---- */
.article-meta--icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.article-meta--icons .meta-bit { display: inline-flex; align-items: center; gap: 8px; }
.article-meta--icons .meta-bit svg { color: var(--gold-400); flex: none; }
.article-cover { margin: 0 0 34px; overflow: hidden; border-radius: var(--r-lg); background: var(--mist); box-shadow: var(--sh-md); }
.article-cover img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.article-content > img.article-cover,
.article-body > img.article-cover { width: 100%; max-height: 380px; margin: 0 0 30px; border-radius: var(--r-lg); object-fit: cover; box-shadow: var(--sh-md); }
.article-content > .lede:first-child,
.article-body > .lede:first-child { font-size: 1.18rem; color: var(--ink); line-height: 1.75; }
.article-content h2,
.article-body h2 { margin-top: 2.1em; font-size: clamp(1.45rem, 3vw, 2rem); scroll-margin-top: 100px; }
.article-content p, .article-content li,
.article-body p, .article-body li { color: var(--ink-soft); }
.article-content ul, .article-content ol,
.article-body ul, .article-body ol { margin: 0 0 1.3em; padding-left: 1.25em; list-style: disc; }
.article-content ol,
.article-body ol { list-style: decimal; }
.article-content li + li,
.article-body li + li { margin-top: 0.55em; }
/* Checklist blocks exported from the post editor reuse the About page's
   .checklist treatment (gold check icons, no bullet) instead of the generic
   disc/decimal list styling above - override list-style and padding back out. */
.article-content .checklist,
.article-body .checklist { list-style: none; padding-left: 0; margin: 22px 0 30px; }
.article-content .checklist li + li,
.article-body .checklist li + li { margin-top: 0; }
.article-checklist li.is-done span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-warm); }
/* Links inside article copy inherit colour globally, which makes them
   indistinguishable from the surrounding text. Give them their own treatment. */
.article-content a:not(.btn),
.article-body a:not(.btn) {
  color: var(--gold-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-content a:not(.btn):hover,
.article-body a:not(.btn):hover { color: var(--gold-600); }
.article-callout { margin: 2rem 0; padding: 24px; border-left: 3px solid var(--gold-500); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--mist-warm); }
.article-callout p { margin: 0; }

/* ---------- WordPress-inspired blog editor ---------- */
.editor-page { min-height: 70vh; background: #f2f6fa; }
.editor-topbar { border-bottom: 1px solid var(--line); background: var(--paper); }
.editor-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 22px; padding-bottom: 22px; }
.editor-topbar .eyebrow { margin-bottom: 4px; }
.editor-topbar h1 { margin: 0; }
.editor-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.editor-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 28px; align-items: start; }
.editor-form, .editor-panel, .editor-preview-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--sh-sm); }
.editor-form { padding: clamp(22px, 4vw, 42px); }
.editor-form > .field:first-child input { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 600; line-height: 1.13; }
.editor-form > .field:first-child input::placeholder { color: #93a4b3; }
.editor-meta-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 16px; }
.slug-field { display: flex; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--mist); }
.slug-field span { padding-left: 14px; color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
.slug-field input { border: 0; border-radius: 0; background: transparent; }
.optional { color: var(--muted); font-weight: 400; }
.editor-content-field textarea { min-height: 360px; padding-top: 18px; font-size: 1rem; line-height: 1.8; background: #fff; }
.editor-toolbar { display: flex; gap: 6px; margin-bottom: 8px; }
.editor-toolbar button { min-width: 38px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--mist); color: var(--navy-800); font-size: 0.85rem; }
.editor-toolbar button:hover { border-color: var(--teal-500); background: #e9f2f6; }
.editor-media-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.8rem; }
.editor-media-button { padding: 7px 11px; border: 1px solid var(--teal-500); border-radius: 5px; background: #f4fbfd; color: var(--teal-500); font-size: 0.8rem; font-weight: 700; }
.editor-media-button:hover { background: #e1f1f6; }
.editor-media-button--wide { width: 100%; margin-top: 10px; }
.editor-status { min-height: 1.5em; margin: 4px 0 0; color: var(--teal-500); font-weight: 600; }
.editor-sidebar { display: grid; gap: 16px; }
.editor-panel { padding: 24px; }
.editor-panel .eyebrow { margin-bottom: 8px; }
.editor-panel h2 { font-size: 1.25rem; }
.editor-panel p, .editor-panel li { color: var(--muted); font-size: 0.9rem; }
.editor-panel ul { padding-left: 18px; list-style: disc; }
.editor-panel li + li { margin-top: 7px; }
.editor-note { border-color: var(--line-warm); background: var(--mist-warm); }
.editor-note strong { color: var(--navy-900); }
/* Clears the sticky header when the Preview button scrolls this into view. */
.editor-preview-section { padding: 0 0 72px; scroll-margin-top: 96px; }
.editor-preview-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-bottom: 16px;
}
.editor-preview-bar .eyebrow { margin-bottom: 4px; }
.editor-preview-url { margin: 0; font-size: 0.88rem; color: var(--muted); word-break: break-all; }
.editor-preview-card { padding: clamp(26px, 5vw, 54px); }
.editor-preview-card img { width: 100%; max-height: 380px; border-radius: var(--r-md); object-fit: cover; }
.editor-preview-card .article-meta { margin: -6px 0 26px; }
.editor-preview-card .article-cover { margin: 0 0 28px; }
.editor-preview-content { line-height: 1.8; }
.editor-preview-content > :first-child { margin-top: 0; }
.editor-preview-content > :last-child { margin-bottom: 0; }
/* Placeholder copy is a prompt, not the author's content - read it differently. */
.editor-preview-card .is-placeholder { color: var(--muted); font-style: italic; }

/* CMS workspace treatment inspired by familiar post editors. */
.editor-page { position: relative; padding-left: 0; background: #eef3f8; }
.editor-admin-nav { position: absolute; inset: 0 auto 0 0; width: 210px; padding: 28px 14px; background: #062b6f; color: #c7d5e6; }
.editor-admin-nav__title { margin: 0 10px 20px; font-size: 0.73rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-300); }
.editor-admin-nav__link, .editor-admin-nav__sub { display: block; border-radius: 7px; color: inherit; font-size: 0.9rem; font-weight: 600; }
.editor-admin-nav__link { margin-top: 5px; padding: 10px 12px; }
.editor-admin-nav__sub { padding: 7px 12px 7px 38px; font-size: 0.82rem; font-weight: 500; }
.editor-admin-nav__link:hover, .editor-admin-nav__link.is-active { color: #fff; background: #004e8e; }
.editor-admin-nav__sub:hover, .editor-admin-nav__sub.is-current { color: var(--gold-300); }
.editor-topbar { background: #fff; }
.editor-topbar__inner { max-width: none; padding: 18px 30px; }
.editor-topbar h1 { font-size: 1.35rem; }
.editor-topbar .eyebrow { font-size: 0.74rem; }   /* was 0.65rem = 10.4px */
.editor-topbar .btn-gold { background: #062b6f; color: #fff; box-shadow: none; }
.editor-shell { max-width: none; grid-template-columns: minmax(0, 1fr) 286px; gap: 20px; padding: 0 30px; }
.editor-form { border-radius: 8px; box-shadow: none; }
.editor-form > .field:first-child input { font-family: var(--font-body); font-size: 1.5rem; font-weight: 400; }
.editor-meta-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.editor-toolbar { margin: 24px -42px 0; padding: 8px 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fafafa; }
.editor-toolbar select { min-width: 115px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink-soft); background: #fff; font: inherit; font-size: 0.8rem; }
.editor-toolbar button { border: 0; background: transparent; }
.editor-content-field textarea { min-height: 390px; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
.editor-content-field textarea:focus { box-shadow: none; }
.editor-status { margin: 0; font-size: 0.8rem; text-align: right; }
/* Post-export instructions. Shown once a post has been downloaded. */
.editor-export-section { padding: 8px 0 64px; }
.editor-export-section .eyebrow { margin-bottom: 6px; }
.editor-export-steps { counter-reset: export-step; margin: 32px 0 0; padding: 0; list-style: none; }
.editor-export-steps > li {
  position: relative;
  padding: 0 0 26px 56px;
  border-left: 1px solid var(--line);
  margin-left: 17px;
}
.editor-export-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.editor-export-steps > li::before {
  counter-increment: export-step;
  content: counter(export-step);
  position: absolute;
  left: -18px;
  top: 0;
  display: grid;
  place-items: center;
  width: 35px; height: 35px;
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--gold-300);
  font-size: 0.83rem;
  font-weight: 700;
}
.editor-export-steps h3 { margin: 5px 0 6px; font-family: var(--font-body); font-size: 0.98rem; }
.editor-export-steps p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.editor-export-steps code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--mist-warm);
  font-size: 0.85em;
}
.editor-export-copy { position: relative; margin-top: 12px; }
.editor-export-copy textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fafafa;
  color: var(--ink-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.79rem;
  line-height: 1.6;
  resize: vertical;
}
.editor-export-copy .btn { position: absolute; top: 9px; right: 9px; }
.editor-seo { margin-top: 26px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: #fafafa; }
.editor-seo__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.editor-seo__head .eyebrow { margin-bottom: 5px; }
.editor-seo__head h2 { margin: 0; font-family: var(--font-body); font-size: 1rem; }
.editor-seo__tabs, .editor-inspector-tabs { display: flex; gap: 3px; margin: 18px 0; border-bottom: 1px solid var(--line); }
.editor-seo__tabs button, .editor-inspector-tabs button { padding: 8px 10px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 0.8rem; }
.editor-seo__tabs button.is-active, .editor-inspector-tabs .is-active { border-bottom-color: var(--teal-500); color: var(--navy-900); font-weight: 700; }
.editor-seo p { margin: 0; color: var(--muted); font-size: 0.85rem; }
.editor-checklist { padding: 4px 0; }
.editor-checklist p + p { margin-top: 8px; }
.schema-markup-field textarea { min-height: 172px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 0.82rem; line-height: 1.6; }
.editor-sidebar { gap: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--sh-sm); }
.editor-sidebar .editor-panel { border: 0; border-radius: 0; box-shadow: none; }
.editor-sidebar .editor-panel + .editor-panel { border-top: 1px solid var(--line); }
.editor-sidebar .editor-panel h2 { margin-bottom: 14px; font-family: var(--font-body); font-size: 0.9rem; }
.editor-summary { margin: 0 0 15px; }
.editor-summary div { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; font-size: 0.8rem; }
.editor-summary dt { color: var(--muted); }
.editor-summary dd { margin: 0; color: var(--teal-500); font-weight: 600; text-align: right; }
.editor-check { display: block; margin-top: 10px; color: var(--ink-soft); font-size: 0.78rem; }
.editor-check input { width: auto; margin-right: 6px; }
.editor-note { margin: 16px; padding: 16px; border: 1px solid var(--line-warm); border-radius: 7px; background: var(--mist-warm); }
.editor-note p { margin: 4px 0 0; font-size: 0.78rem; }

@media (max-width: 900px) {
  .editor-page { padding-left: 0; }
  .editor-admin-nav { display: none; }
  .editor-shell { padding: 0 20px; }
  .editor-shell { grid-template-columns: minmax(0, 1fr); }
  .editor-sidebar { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .editor-topbar__inner { padding: 16px; }
  .editor-shell { padding: 0 16px; }
  .editor-toolbar { margin-right: -22px; margin-left: -22px; overflow-x: auto; }
  .editor-topbar__inner { align-items: flex-start; flex-direction: column; }
  .editor-actions { width: 100%; }
  .editor-actions .btn { flex: 1; }
  .editor-meta-grid, .editor-sidebar { grid-template-columns: minmax(0, 1fr); }
  .editor-content-field textarea { min-height: 280px; }
}

/* ---------- Split feature rows ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.split-reverse .split-visual { order: 2; }
.split-reverse .split-copy { order: 1; }
.split-copy h2 { margin-bottom: 16px; }

.visual-frame {
  position: relative;
  border-radius: var(--r-xl);
  padding: 0;
  min-height: 420px;
  width: 100%;
  background: linear-gradient(150deg, #062b6f, #082f78 45%, #004e8e 75%, #005b9e);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  display: grid;
  place-items: center;
  transform: perspective(900px) translate3d(var(--cursor-drift-x, 0px), var(--cursor-drift-y, 0px), 0) rotateX(var(--cursor-tilt-y, 0deg)) rotateY(var(--cursor-tilt-x, 0deg));
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.visual-frame::before {
content: "";
position: absolute;
inset: 0;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
filter: none;
transform: none;
opacity: 1;
}
.home .visual-frame::before {
  background-image: url("https://images.unsplash.com/photo-1681505531034-8d67054e07f6?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/mobile-visit.svg");
}
.general-notary .visual-frame::before {
  background-image: url("https://images.unsplash.com/photo-1603796846097-bee99e4a601f?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/certified-copies.svg");
}
.loan-signings .visual-frame::before {
  background-image: url("https://images.unsplash.com/photo-1681505504714-4ded1bc247e7?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/meeting-at-table.svg");
}
.estate-planning .visual-frame::before {
  background-image: url("https://images.unsplash.com/photo-1614605844432-731c32334c49?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/appointment-checklist.svg");
}
.remote-online-notarization .visual-frame::before {
  background-image: url("https://images.unsplash.com/photo-1562564055-71e051d33c19?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/desk-overview.svg");
}
.business-notary .visual-frame::before {
  background-image: url("https://images.unsplash.com/photo-1614605844432-731c32334c49?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/appointment-checklist.svg");
}
.visual-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(4, 22, 52, 0.42);
}
.general-notary .visual-frame svg,
.loan-signings .visual-frame svg,
.estate-planning .visual-frame svg,
.remote-online-notarization .visual-frame svg,
.business-notary .visual-frame svg {
  display: none;
}
.visual-frame svg {
  position: relative;
  width: 100%;
  max-width: 330px;
  height: auto;
}

/* Checklist */
.checklist { display: flex; flex-direction: column; gap: 13px; margin: 22px 0 30px; }
.checklist li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 0.96rem; color: var(--ink-soft);
}
.checklist svg { flex-shrink: 0; color: var(--gold-600); margin-top: 3px; }
.on-dark .checklist li { color: var(--ink-soft); }
.on-dark .checklist svg { color: var(--gold-500); }

/* ---------- Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 52px;
  position: relative;
}
.steps::before {
  content: "";
  position: absolute;
  top: 21px; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 91, 158,0.5), rgba(0, 91, 158,0.5), transparent);
}
.step { position: relative; }
.step-num {
  position: relative;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--gold-400);
  background: #062b6f;
  border: 1px solid rgba(0, 91, 158,0.55);
}
.step h3 { font-size: 1.04rem; margin-bottom: 7px; }
.step p { font-size: 0.9rem; margin: 0; }
/* These .on-dark sections carry no photo, so they render light - the step
   captions need the darker ink rather than the muted grey-green. */
.on-dark .step p { color: var(--ink); }

/* ---------- Audience cards ---------- */
.audience {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 48px;
}
.aud-card {
  padding: 28px 24px;
  border-radius: var(--r-md);
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform var(--t), box-shadow var(--t);
}
.aud-card:hover { transform: translateY(-3px); box-shadow: 0 16px 38px -18px rgba(6, 43, 111, 0.28), 0 0 0 1px rgba(74, 159, 216, 0.1); }
.aud-card h3 { font-size: 1rem; margin-bottom: 8px; }
.aud-card p { font-size: 0.88rem; color: var(--muted); margin: 0; }

/* ---------- Why / value cards ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 44px;
  margin-top: 46px;
}
.why-item { padding-left: 22px; border-left: 2px solid; border-image: linear-gradient(180deg, var(--gold-500), rgba(0, 91, 158,0.1)) 1; }
.why-item h3 { font-size: 1.06rem; margin-bottom: 7px; }
.why-item p { font-size: 0.94rem; color: var(--muted); margin: 0; }

/* ---------- Service area ---------- */
.area-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 5vw, 64px);
  align-items: center;
}
.section-area { padding: 72px 0; }
.section-area .lede { margin-bottom: 26px; }
.section-area .chips { margin: 18px 0 24px; }
.section-area .fineprint { max-width: 62ch; }

.area-visual {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
.area-map {
  width: 100%;
  min-height: 500px;
  border: 0;
  border-radius: 30px;
  box-shadow: 0 36px 110px rgba(20, 30, 60, 0.16);
  display: block;
}
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0; }
.chip {
  padding: 8px 17px;
  border-radius: 999px;
  font-size: 0.88rem;
  background: var(--paper);
  border: 1px solid var(--line-warm);
  color: var(--navy-800);
}
.area-visual { width: 100%; max-width: 100%; margin: 0 auto; }
.area-visual svg { width: 100%; height: auto; }

/* ---------- FAQ ---------- */
.faq { margin-top: 44px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 4px;
  background: none;
  border: 0;
  text-align: left;
  font-size: 1.03rem;
  font-weight: 600;
  color: var(--navy-900);
  transition: color var(--t);
}
.faq-q:hover { color: var(--gold-700); }
.faq-ico {
  position: relative;
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line-warm);
  transition: background var(--t), border-color var(--t);
}
.faq-ico::before, .faq-ico::after {
  content: "";
  position: absolute;
  background: var(--gold-600);
  transition: transform var(--t);
}
.faq-ico::before { top: 12px; left: 7px; right: 7px; height: 1.6px; }
.faq-ico::after { left: 12px; top: 7px; bottom: 7px; width: 1.6px; }
.faq-q[aria-expanded="true"] .faq-ico { background: var(--mist-warm); border-color: var(--gold-500); }
.faq-q[aria-expanded="true"] .faq-ico::after { transform: scaleY(0); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 260ms var(--ease); }
.faq-a p {
  padding: 0 4px 24px;
  max-width: 68ch;
  color: var(--muted);
  font-size: 0.96rem;
  margin: 0;
}

/* ---------- Contact form ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: start;
}
.contact-cards { display: flex; flex-direction: column; gap: 16px; margin-top: 30px; }
.contact-card {
  padding: 20px 22px;
  border-radius: var(--r-md);
  background: var(--paper);
  border: 1px solid var(--line);
}
.contact-card h3 { font-size: 0.93rem; margin-bottom: 4px; }
.contact-card p { font-size: 0.9rem; color: var(--muted); margin: 0; }
.contact-card a { color: var(--navy-700); font-weight: 600; }
.contact-card a:hover { color: var(--gold-600); }

.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 36px;
  box-shadow: var(--sh-md);
}
.field { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy-900);
  margin-bottom: 7px;
}
label .req { color: var(--gold-600); }
.field-error {
  min-height: 1.2em;
  margin: 6px 0 0;
  color: #c0392b;
  font-size: 0.85rem;
}
input, select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.96rem;
  color: var(--ink);
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--mist);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--navy-600);
  box-shadow: 0 0 0 3px rgba(0, 91, 158,0.12);
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192,57,43,0.1);
}
textarea { resize: vertical; min-height: 108px; }
.form-status {
  min-height: 1.6em;
  font-size: 0.95rem;
  margin: 0 0 14px;
  font-weight: 600;
}
.form-status.is-error { color: #c0392b; }
.form-status.is-ok { color: #0f7d8c; }

/* ---------- CTA band ---------- */
.cta-band { padding: 86px 0; text-align: center; background-position: center; background-size: cover; background-repeat: no-repeat; }

/* Deep blue-to-teal gradient instead of a background photo, drifting slowly so
   the band feels alive without pulling focus from the copy. Every stop stays
   dark enough for white text. The blog CTA (.cta-band--solid) sits on its own
   light blurred asset and is excluded. */
.cta-band:not(.cta-band--solid) {
  background-color: #062b6f;
  background-image: linear-gradient(
    125deg,
    #06265f 0%,
    #062b6f 22%,
    #082f78 48%,
    #004e8e 72%,
    #013c80 100%
  );
  background-size: 300% 300%;
  background-position: 0% 50%;
  animation: gradient-drift 28s ease-in-out infinite;
}
.cta-band:not(.cta-band--solid) h2 { color: #fff; }
.cta-band:not(.cta-band--solid) .lede { color: rgba(255, 255, 255, 0.90); }
.cta-band h2 { margin-bottom: 14px; }
.cta-band .lede { margin: 0 auto 32px; }
.cta-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ---------- Drifting gradient bands ----------
   Two shared keyframes move the gradient across an oversized background box.
   Nothing layouts or repaints outside the band, and the global
   prefers-reduced-motion rule further down stops both for anyone who asks. */
@keyframes gradient-drift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes gradient-drift-soft {
  0%   { background-position: 0% 50%, 100% 50%, 0% 50%; }
  50%  { background-position: 100% 50%, 0% 50%, 100% 50%; }
  100% { background-position: 0% 50%, 100% 50%, 0% 50%; }
}

/* ---------- Brand motion: document, signature, location ----------
   Three motifs, each placed where it carries meaning, rather than three
   effects competing inside one box:
     document  - a faint ruled grid drifting under every feature surface
     signature - an ink line that signs itself across the booking cards
     location  - a slow locator pulse on the service-area block
   All transform / background-position only, so they stay on the compositor,
   and the global prefers-reduced-motion rule parks all three. */

/* === 1. DOCUMENT: a record-keeping grid, drifting slowly ================== */
@keyframes doc-drift {
  from { background-position: 0 0; }
  to   { background-position: 64px 64px; }
}
.section.aurora.on-dark::before,
.closing-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
  animation: doc-drift 90s linear infinite;
}
.closing-card::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 63.5H64M63.5 0V64' stroke='%239ec5e8' stroke-width='1' opacity='0.20'/%3E%3C/svg%3E");
  /* fade the grid out toward the copy so it never fights the text */
  mask-image: linear-gradient(160deg, rgba(0,0,0,0.85), rgba(0,0,0,0.25) 62%, transparent);
  -webkit-mask-image: linear-gradient(160deg, rgba(0,0,0,0.85), rgba(0,0,0,0.25) 62%, transparent);
}
.section.aurora.on-dark::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 63.5H64M63.5 0V64' stroke='%232563eb' stroke-width='1' opacity='0.10'/%3E%3C/svg%3E");
  mask-image: linear-gradient(170deg, rgba(0,0,0,0.7), transparent 78%);
  -webkit-mask-image: linear-gradient(170deg, rgba(0,0,0,0.7), transparent 78%);
}

/* === 2. SIGNATURE: an ink line that draws itself, then rests and repeats ==
   The path is injected by script.js so the dash animation runs on a real SVG
   element (a data-URI background cannot be dash-animated reliably). */
.sig-ink {
  position: absolute;
  z-index: 0;
  /* tucked into the free bottom-right corner: the buttons are left-aligned in
     the copy column, and the outline button has a transparent fill, so a wider
     flourish showed straight through its label. */
  right: clamp(14px, 2%, 30px);
  bottom: clamp(10px, 2.5%, 22px);
  width: min(29%, 216px);
  height: auto;
  pointer-events: none;
  overflow: visible;
  /* The copy column narrows at some widths and the button row reaches further
     right, so rather than chase breakpoints the ink fades out before its left
     edge: it can never reach a label, whatever the column does. */
  mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 1) 42%);
  -webkit-mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 1) 42%);
}
.sig-ink path {
  fill: none;
  stroke: rgba(169, 212, 240, 0.62);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* --len is measured per path in script.js. A hardcoded dash pattern made the
     stroke jump instead of draw, because the real paths are ~592 and ~233 long
     while the pattern claimed 1400. */
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  animation: sign-ink 3s ease-in-out infinite;
}
.sig-ink path:nth-child(2) {
  stroke: rgba(74, 159, 216, 0.42);
  stroke-width: 1.6;
  animation-delay: 0.2s;
}
@keyframes sign-ink {
  0%   { stroke-dashoffset: var(--len, 600); opacity: 0; }
  6%   { opacity: 1; }
  42%  { stroke-dashoffset: 0; opacity: 1; }
  76%  { stroke-dashoffset: 0; opacity: 1; }
  90%  { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: var(--len, 600); opacity: 0; }
}

/* Below this width the card stacks and the buttons go full-bleed, so there is
   no free corner left - decoration gives way to the label rather than sitting
   behind its transparent fill. */
@media (max-width: 760px) {
  .sig-ink { display: none; }
}

/* === 3. LOCATION: a locator pulse on the service-area block ============== */
.area-pulse {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: min(58%, 230px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.area-pulse span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 91, 158, 0.30);
  transform: scale(0.18);
  opacity: 0;
  animation: locate 7s ease-out infinite;
}
.area-pulse span:nth-child(2) { animation-delay: 2.33s; }
.area-pulse span:nth-child(3) { animation-delay: 4.66s; }
.area-pulse::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: rgba(0, 91, 158, 0.55);
}
@keyframes locate {
  0%   { transform: scale(0.18); opacity: 0; }
  12%  { opacity: 0.9; }
  100% { transform: scale(1); opacity: 0; }
}
.home .section-area { position: relative; overflow: hidden; }
.area-visual { position: relative; }
.home .section-area > .wrap { position: relative; z-index: 1; }

.closing-card { position: relative; }
.closing-photo { z-index: 1; }
.closing-copy { position: relative; z-index: 1; }

/* The "how it works" step band. It runs light because its headings and step
   copy are dark navy, so the tints stay pale and the two drifting colour blobs
   (blue one way, teal the other) supply the movement. The stock aurora scrim
   and orbs are suppressed here or they muddy the gradient. */
.section.aurora.on-dark {
  background-color: #f4f7fb;
  background-image:
    radial-gradient(58% 78% at 18% 26%, rgba(0, 91, 158, 0.16), transparent 62%),
    radial-gradient(54% 74% at 82% 72%, rgba(0, 91, 158, 0.18), transparent 62%),
    linear-gradient(125deg, #f4f7fb 0%, #e9eef7 38%, #ebf0f8 68%, #f4f7fb 100%);
  background-size: 200% 200%, 200% 200%, 300% 300%;
  background-position: 0% 50%, 100% 50%, 0% 50%;
  animation: gradient-drift-soft 34s ease-in-out infinite;
}
.section.aurora.on-dark .aurora-bg,
.section.aurora.on-dark .orb { display: none; }

/* ---------- Breadcrumb ---------- */
.crumbs { background: var(--mist); border-bottom: 1px solid var(--line); }
.crumbs ol {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 0;
  font-size: 0.82rem;
  color: var(--muted);
  flex-wrap: wrap;
}
.crumbs li:not(:last-child)::after { content: "›"; margin-left: 9px; color: var(--line-warm); }
.crumbs a:hover { color: var(--navy-900); }
.crumbs [aria-current] { color: var(--navy-900); font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #062b6f 0%, #06265f 55%, #061f52 100%);
  color: rgba(235, 242, 246, 0.72);
  border-top: 1px solid rgba(74, 159, 216, 0.24);
}
/* MAKTUB-WATERMARK-OFF: the oversized wordmark across the bottom of the
   footer. Uncomment this rule to bring it back. */
/*
.site-footer::after {
  content: "MAKTUB";
  position: relative;
  display: block;
  width: 100%;
  margin: 30px 0 14px;
  color: transparent;
  background: linear-gradient(
  180deg,
  rgba(169, 212, 240, 0.18) 0%,
  rgba(0, 91, 158, 0.14) 38%,
  rgba(0, 91, 158, 0.18) 100%
);
  background-clip: text;
  filter: blur(1px);
  -webkit-text-fill-color: transparent;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 13vw, 16rem);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.09em;
  text-align: center;
  -webkit-text-stroke: 1px rgba(169, 212, 240, 0.38);
  transform: translate3d(var(--cursor-drift-x, 0px), var(--cursor-drift-y, 0px), 0) scaleX(1.72);
  transform-origin: center;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
*/
.footer-intro {
  max-width: var(--container);
  margin: 0 auto;
  padding: 32px 24px 22px;
  border-bottom: 1px solid rgba(235, 242, 246, 0.16);
}
.footer-intro p { max-width: 20ch; margin: 0; font-size: 0.84rem; line-height: 1.45; color: rgba(235, 242, 246, 0.72); }
.footer-intro strong { color: #fff; }
.footer-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 42px 0;
  border-bottom: 1px solid rgba(235, 242, 246, 0.16);
}
.footer-brand-mark {
  /* a white plaque so the navy monogram reads on the dark footer */
  width: 64px; height: 64px;
  border-radius: 14px;
  background: #fff;
  padding: 7px;
  margin-bottom: 16px;
}
.footer-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.footer-name { font-family: var(--font-display); color: #fff; font-size: 1.16rem; margin-bottom: 6px; }
.footer-tag { font-size: 0.89rem; margin: 0 0 18px; max-width: 30ch; }
.footer-reach { margin: 0 0 18px; padding: 0; list-style: none; }
.footer-reach li + li { margin-top: 6px; }
.footer-reach a { font-size: 0.89rem; font-weight: 600; color: var(--gold-300); }
.footer-reach a:hover { color: #fff; }
.footer-social { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 600; color: var(--gold-300); }
.footer-social::before { content: "in"; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(169, 212, 240, 0.38); border-radius: 50%; font-family: Georgia, serif; }
.footer-col h3 {
  font-family: var(--font-body);
  font-size: 0.76rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: 15px;
}
.footer-col li + li { margin-top: 9px; }
.footer-col a, .footer-col li { font-size: 0.89rem; }
.footer-col a:hover { color: #fff; }
.footer-contact {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  padding-top: 26px;
  border-top: 1px solid rgba(235, 242, 246, 0.16);
}
.footer-contact h3 { margin: 0 0 11px; font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-300); }
.footer-contact p { margin: 0 0 18px; font-size: 0.86rem; line-height: 1.55; }
.footer-contact strong { display: block; color: #fff; }
.footer-contact a { color: var(--gold-300); font-weight: 600; }
.footer-bottom {
  padding: 18px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.82rem;
}
.footer-legal { display: flex; gap: 22px; }
.footer-legal a:hover { color: #fff; }

/* ---------- Legal page body ---------- */
.legal-body h2 { font-size: 1.3rem; margin-top: 36px; }
.legal-body p, .legal-body li { color: var(--ink-soft); font-size: 0.97rem; }
.legal-body ul { list-style: disc; padding-left: 22px; margin-bottom: 1em; }
.legal-body li { margin-bottom: 6px; }

/* ---------- Reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
[data-reveal].in { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1040px) {
  .nav { display: none; }
  .burger { display: flex; }
  .header-actions .btn { display: none; }
  .header-phone { padding: 9px; }
  .header-phone span { display: none; }
  .bento-a, .bento-b { grid-column: span 6; }
  .bento-c, .bento-d, .bento-e { grid-column: span 2; }
}

@media (max-width: 900px) {
  .wrap { padding-right: 20px; padding-left: 20px; }
  .section { padding: 72px 0; }
  .hero-map { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 36px; }
  .hero-map iframe { min-height: clamp(260px, 58vw, 380px); border-radius: var(--r-lg); }
  .area-map { min-height: clamp(320px, 72vw, 500px); border-radius: var(--r-lg); }
  .map-copy { padding: 26px; border-radius: var(--r-lg); }
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .article-foot { margin-top: 32px; }
  .article-meta--icons { gap: 8px 18px; font-size: 0.85rem; }
  .trustbar-inner { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .split, .split-reverse { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .split-reverse .split-visual { order: 1; }
  .split-reverse .split-copy { order: 2; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .steps::before { display: none; }
  .audience { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: minmax(0, 1fr); }
  .area-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .section-area { padding: 64px 0; }
  .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .examples { grid-template-columns: minmax(0, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-contact { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-a, .bento-b, .bento-c, .bento-d, .bento-e { grid-column: span 1; }
}

@media (max-width: 620px) {
  .wrap { padding-right: 16px; padding-left: 16px; }
  .header-inner { padding: 10px 16px; gap: 12px; }
  .drawer { padding: 12px 16px 22px; }
  .brand { min-width: 0; gap: 9px; }
  .brand-mark { width: 40px; height: 40px; }
  .brand-name { font-size: 1.12rem; }
  .brand-sub { font-size: 0.52rem; letter-spacing: 0.13em; }
  .burger { width: 42px; height: 42px; flex-shrink: 0; }
  .blog-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .post-card.is-featured { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .post-card.is-featured .post-thumb img { aspect-ratio: 5 / 4; }
  .blog-toolbar { align-items: stretch; }
  .blog-add { width: 100%; justify-content: center; }
  .news-band { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .news-form { width: 100%; }
  .blog-topics {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 22px;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .blog-topics::-webkit-scrollbar { display: none; }
  .topic-link { flex-shrink: 0; }
    .article-hero { padding-bottom: 38px; }
  .article-callout { padding: 18px; }
  .article-cover { margin-bottom: 26px; border-radius: var(--r-md); }
  .hero { padding: 76px 0 68px; }
  .hero-compact { padding: 62px 0 56px; }
  .hero-map { margin-top: 30px; }
  .hero-map iframe { min-height: 260px; }
  .area-map { min-height: 320px; }
  .section-area { padding: 56px 0; }
  .map-copy { padding: 22px 20px; }
  .hero .lede { font-size: 1.04rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .stat-rail { flex-direction: column; align-items: stretch; }
  .stat { max-width: none; }
  .trustbar-inner { grid-template-columns: minmax(0, 1fr); }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .audience { grid-template-columns: minmax(0, 1fr); }
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
  .footer-contact { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .footer-contact p { margin-bottom: 4px; }
  .footer-intro { padding: 26px 16px 18px; }
  .footer-inner { padding-top: 32px; padding-bottom: 32px; }
  .site-footer::after { margin-top: 22px; font-size: clamp(4.2rem, 20vw, 7rem); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .form-card { padding: 24px 20px; }
  /* Stack fee rows so long labels and amounts never fight for width */
  .price-head {
    padding: 15px 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .price-table, .price-table tbody, .price-table tr,
  .price-table tbody th, .price-table tbody td { display: block; width: 100%; }
  .price-table tbody tr { padding: 14px 18px; border-top: 1px solid var(--line); }
  .price-table tbody tr:first-child { border-top: 0; }
  .price-table tbody th, .price-table tbody td,
  .price-table tbody tr + tr th, .price-table tbody tr + tr td {
    padding: 0;
    border-top: 0;
    text-align: left;
    white-space: normal;
  }
  .price-table tbody th { margin-bottom: 3px; }
  .visual-frame { padding: 26px; }
  .cta-actions { flex-direction: column; }
  .cta-actions .btn { width: 100%; }
  .orb { filter: blur(50px); }
}

/* Small phones and narrow split-screen windows */
@media (max-width: 420px) {
  .section { padding: 56px 0; }
  .section-sm { padding: 48px 0; }
  .h-xl { font-size: 2.15rem; }
  .h-lg { font-size: 1.75rem; }
  .badge { max-width: 100%; text-align: left; }
  .badge-row { justify-content: flex-start; }
  .hero-actions, .cta-actions { gap: 10px; }
  .btn { padding: 13px 18px; white-space: normal; }
  .trustbar-inner { gap: 20px; padding: 34px 0; }
  .trust-item { gap: 11px; }
  .bento { margin-top: 34px; gap: 14px; }
  .bento-card { padding: 24px 20px; }
  .post-copy { min-height: 0; padding: 20px 18px 22px; }
  .visual-frame { min-height: 300px; padding: 22px; border-radius: var(--r-lg); }
  .note-card { padding: 18px; }
  .chip { padding: 7px 13px; }
  .faq-q { gap: 14px; padding: 18px 2px; font-size: 0.98rem; }
  .form-card { padding: 22px 16px; }
  .footer-legal { flex-wrap: wrap; gap: 8px 18px; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .drawer, .cta-band, .site-footer, .orb, .aurora-bg { display: none !important; }
  body { color: #04101f; }
  .aurora { background: #fff; color: #04101f; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Service pages: intro, at-a-glance, related ---------- */
.service-intro p { color: var(--ink-soft); font-size: 1.04rem; line-height: 1.8; }
.service-intro p + p { margin-top: 1em; }

.glance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}
.glance-card, .glance-related {
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--sh-sm);
}
.glance-related { background: var(--mist-warm); border-color: var(--line-warm); }

.glance-list { margin: 0 0 18px; }
.glance-list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 13px 0;
}
.glance-list > div + div { border-top: 1px solid var(--line); }
.glance-list dt { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }
.glance-list dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  color: var(--navy-900);
}
.glance-note {
  margin: 0 0 20px;
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--muted);
}
.related-list { display: flex; flex-direction: column; gap: 13px; }
.related-list a { font-weight: 600; color: var(--gold-700); }
.related-list a:hover { color: var(--gold-600); }

.faq-more { margin: 26px 0 0; text-align: center; }
.faq-more a { font-weight: 600; color: var(--gold-700); }

/* Services index */
.service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-card { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 32px); }
.service-card h3 { margin-bottom: 10px; font-size: 1.16rem; }
.service-card p { color: var(--ink-soft); }
.service-card__fee {
  margin: 14px 0 18px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--gold-700);
}
.service-card .link-arrow { margin-top: auto; font-weight: 600; color: var(--gold-700); }

@media (max-width: 900px) {
  .glance-grid { grid-template-columns: minmax(0, 1fr); }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .service-grid { grid-template-columns: minmax(0, 1fr); }
  .glance-list > div { flex-direction: column; gap: 4px; }
  .glance-list dd { text-align: left; }
}

/* The gold half of a headline is a light gold, which only works on a dark
   hero. On the pages whose hero stays light it needs the deep gold instead -
   at the light value it was measuring about 1.1:1. */
.light-hero .hero .grad-text {
  background-image: linear-gradient(96deg, var(--gold-700), var(--teal-500) 50%, var(--gold-700));
}

/* ---------- Breadcrumb over the hero ----------
   No bar, no rule - the trail sits on the hero image itself in gold. */
.hero > .crumbs{
  position: absolute;
  top: clamp(18px, 3vw, 30px);
  left: 0;
  right: 0;
  z-index: 3;
  background: none;
  border: 0;
}
.hero > .crumbs ol{ padding: 0; }
.hero > .crumbs a,
.hero > .crumbs li,
.hero > .crumbs [aria-current]{ color: var(--gold-300); }
.hero > .crumbs a:hover{ color: #fff; }
.hero > .crumbs li:not(:last-child)::after{ color: var(--gold-300); opacity: 0.55; }

/* Light heroes need the deep gold instead of the pale one. */
.light-hero .hero > .crumbs a,
.light-hero .hero > .crumbs li,
.light-hero .hero > .crumbs [aria-current]{ color: #013c80; }
.light-hero .hero > .crumbs li:not(:last-child)::after{ color: var(--gold-700); opacity: 0.6; }
.light-hero .hero > .crumbs a:hover{ color: var(--navy-900); }

/* Make room so the trail never collides with the hero copy. */
.hero { padding-top: calc(116px + 14px); }
.hero-compact { padding-top: calc(92px + 14px); }


/* Article meta sits inside the shared centred header on post pages. */
.hero .article-meta { justify-content: center; margin-top: 6px; }

/* =========================================================================
   Service-page sections modelled on the partner-program reference
   ========================================================================= */

/* --- Ways to work with us: tabs --- */
.ways { max-width: 900px; margin: 0 auto; }
.way-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 26px;
}
.way-tab {
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  transition: color var(--t), background var(--t), border-color var(--t);
}
.way-tab:hover { border-color: var(--gold-500); color: var(--gold-700); }
.way-tab.is-active {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: #fff;
}
.way-panel {
  padding: clamp(26px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--sh-sm);
  text-align: center;
}
.way-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: rgba(0, 91, 158, 0.13);
  color: var(--gold-700);
}
.way-panel h3 { margin-bottom: 10px; font-size: 1.16rem; }
.way-panel p { max-width: 62ch; margin: 0 auto; color: var(--ink-soft); line-height: 1.8; }

/* --- Why choose: six icon cards --- */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 44px;
}
.benefit-card {
  padding: clamp(24px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--sh-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.benefit-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-warm);
  box-shadow: 0 20px 46px -22px rgba(6, 43, 111, 0.32);
}
.benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: rgba(0, 91, 158, 0.13);
  color: var(--gold-700);
}
.benefit-card h3 { margin-bottom: 8px; font-size: 1.05rem; }
.benefit-card p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.7; }

/* --- How to get started: three numbered steps --- */
.flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 44px;
  position: relative;
}
.flow::before {
  content: "";
  position: absolute;
  top: 23px; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 91, 158,0.45), rgba(0, 91, 158,0.45), transparent);
}
.flow-step { position: relative; text-align: center; }
.flow-num {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--navy-900);
  border: 1px solid rgba(0, 91, 158,0.5);
  color: var(--gold-300);
  font-family: var(--font-display);
  font-size: 0.95rem;
}
.flow-step h3 { margin-bottom: 8px; font-size: 1.06rem; }
.flow-step p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.75; }

/* --- The figures band --- */
.figures-band { background-color: var(--navy-950); }
.figures-band .aurora-bg::after { background: rgba(4, 22, 52, 0.55); }
.figure-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 44px;
}
.figure-tile {
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(169, 212, 240, 0.22);
  text-align: center;
}
.figure-value {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1.05;
  color: var(--gold-300);
}
.figure-label {
  margin: 0 0 10px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.figure-note { margin: 0; font-size: 0.9rem; line-height: 1.7; color: rgba(255,255,255,0.82); }
.figures-band h2 { color: #fff; }

/* --- Tick bullets in the closing CTA --- */
.cta-ticks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 26px;
  margin: 0 0 30px;
}
.cta-ticks li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.95);
}
.cta-ticks svg { color: var(--gold-300); flex-shrink: 0; }

@media (max-width: 900px) {
  .benefit-grid, .flow, .figure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow::before { display: none; }
}
@media (max-width: 620px) {
  .benefit-grid, .flow, .figure-grid { grid-template-columns: minmax(0, 1fr); }
  .way-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .way-tabs::-webkit-scrollbar { display: none; }
  .way-tab { flex-shrink: 0; }
  .cta-ticks { flex-direction: column; align-items: center; gap: 10px; }
}

/* Dark full-bleed bands need the light gold eyebrow. The hero override does not
   reach them, so every dark band belongs in this list. */
.figures-band .eyebrow-light,
.cta-band:not(.cta-band--solid) .eyebrow-light { color: var(--gold-300); }
/* the trust band runs light, so its eyebrow takes the deep gold instead */
.trust-band .eyebrow-light { color: #013c80; }

/* =========================================================================
   Service pages, second reference (phonepe.com/payments device set)
   ========================================================================= */

/* --- Three-column icon row directly under the hero --- */
.tri-row-band { background: var(--paper); border-bottom: 1px solid var(--line); }
.tri-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.tri-card { display: flex; align-items: flex-start; gap: 14px; }
.tri-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 12px;
  background: rgba(0, 91, 158, 0.13);
  color: var(--gold-700);
}
.tri-card h3 { margin-bottom: 4px; font-size: 1rem; }
.tri-card p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft); }

/* --- Two-column showcase cards with tick features --- */
.show-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 44px;
}
.show-card {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--mist-warm);
  box-shadow: var(--sh-sm);
}
.show-card h3 { margin-bottom: 8px; font-size: 1.3rem; }
.show-sub { margin: 0 0 20px; color: var(--ink-soft); }
.show-ticks { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.show-ticks li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.95rem; color: var(--ink-soft); }
.show-ticks svg { flex-shrink: 0; margin-top: 3px; color: var(--gold-600); }
.show-link {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: auto;
  font-weight: 700;
  color: var(--gold-700);
}
.show-link:hover { color: var(--gold-600); }

/* --- Horizontal scrolling rail of priced options --- */
.rail { margin-top: 44px; }
.rail-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 4px 4px 18px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.rail-card {
  flex: 0 0 260px;
  scroll-snap-align: start;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--sh-sm);
}
.rail-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(0, 91, 158, 0.13);
  color: var(--gold-700);
}
.rail-card h3 { margin-bottom: 12px; font-size: 1.02rem; }
.rail-card ul { display: flex; flex-direction: column; gap: 7px; }
.rail-card li {
  position: relative;
  padding-left: 15px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.rail-card li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold-500);
}

/* --- Full-bleed trust band ---
   Sits on the soft blurred asset. hero-blur.svg is a light cream field, so the
   copy runs dark green and dark gold here, and the aurora overlay and orbs are
   suppressed to keep the blur clean rather than muddied. */
.trust-band {
  background-image: url("../assets/hero-blur.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-block: 1px solid var(--line-warm);
}
.trust-band .aurora-bg,
.trust-band .orb { display: none; }
.trust-band h2 { color: var(--navy-900); }
.trust-band .lede { color: var(--ink-soft); margin-left: auto; margin-right: auto; }
.trust-source {
  margin: 18px 0 30px;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* --- Large stat row --- */
.statline-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  text-align: center;
}
.statline { padding: 8px 10px; }
.statline + .statline { border-left: 1px solid var(--line); }
.statline-value {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1;
  color: var(--gold-700);
}
.statline-label {
  margin: 0 0 10px;
  font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--navy-900);
}
.statline-note { margin: 0 auto; max-width: 34ch; font-size: 0.9rem; line-height: 1.65; color: var(--ink-soft); }

@media (max-width: 900px) {
  .tri-row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .show-grid { grid-template-columns: minmax(0, 1fr); }
  .statline-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .statline + .statline { border-left: 0; border-top: 1px solid var(--line); padding-top: 26px; }
}
@media (max-width: 620px) {
  .rail-card { flex-basis: 232px; }
}

/* =========================================================================
   Spotlight segment - split copy + layered collage
   ========================================================================= */
.spotlight { background: var(--paper); }
.spot-grid-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

/* --- copy --- */
.spot-label {
  display: flex;
  align-items: center;
  gap: 0.32em;
  margin-bottom: 22px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  color: var(--navy-900);
}
/* Sits alongside the rest of the label as plain emphasised text - the blue
   pill it used to carry read as a stray tag rather than part of the heading. */
.spot-mark {
  display: inline-block;
  color: var(--navy-900);
  font-weight: 700;
}
.spot-head {
  margin-bottom: 20px;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.spot-sub {
  max-width: 52ch;
  margin: 0 0 34px;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--ink-soft);
}
.spot-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; }
.spot-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  color: var(--gold-700);
}
.spot-link:hover { color: var(--gold-600); }

/* --- collage --- */
.spot-art {
  position: relative;
  aspect-ratio: 1 / 0.86;
  min-height: 320px;
}
.spot-art > * { position: absolute; }
.spot-mesh {
  inset: 8% 4% 10% 8%;
  background-image:
    linear-gradient(to right, rgba(6, 43, 111,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(6, 43, 111,0.08) 1px, transparent 1px);
  background-size: 34px 34px;
}
.spot-block {
  top: 4%; right: 6%;
  width: 58%; height: 44%;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
}
.spot-photo {
  left: 2%; bottom: 6%;
  width: 62%; height: 62%;
  border-radius: var(--r-md);
  background-position: center;
  background-size: cover;
  background-image: url("https://images.unsplash.com/photo-1562564055-71e051d33c19?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/desk-overview.svg");
  box-shadow: 0 26px 60px -26px rgba(6, 43, 111, 0.55);
  filter: grayscale(1) contrast(1.06);
}
.spot-wave {
  top: 9%; right: 10%;
  width: 48%; height: 15%;
  color: rgba(255, 255, 255, 0.92);
}
.spot-wave svg { width: 100%; height: 100%; }
.spot-seal {
  right: 4%; bottom: 12%;
  width: clamp(64px, 8vw, 92px); height: auto;
  padding: 10px;
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 18px 40px -18px rgba(6, 43, 111, 0.5);
}
.spot-chip {
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 26px -12px rgba(6, 43, 111, 0.5);
}
.spot-chip--done {
  top: 1%; left: 30%;
  background: var(--navy-900);
  color: var(--gold-300);
  text-transform: uppercase;
}
.spot-chip--tag {
  top: 46%; left: 0;
  background: var(--paper);
  border: 1px solid var(--line-warm);
  color: var(--gold-700);
  font-family: var(--font-display);
  font-size: 1rem;
}

/* The collage photo reuses each page's own hero photograph, at a smaller size. */
.loan-signings-art .spot-photo { background-image: url("https://images.unsplash.com/photo-1564846824194-346b7871b855?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/contract-and-stamp.svg"); }
.estate-planning-art .spot-photo { background-image: url("https://images.unsplash.com/photo-1635859890085-ec8cb5466806?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/estate-documents.svg"); }
.remote-online-notarization-art .spot-photo { background-image: url("https://images.unsplash.com/photo-1616587226157-48e49175ee20?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/remote-online-session.svg"); }
.business-notary-art .spot-photo { background-image: url("https://images.unsplash.com/photo-1686771416282-3888ddaf249b?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/business-office.svg"); }

@media (max-width: 900px) {
  .spot-grid-wrap { grid-template-columns: minmax(0, 1fr); }
  .spot-art { order: -1; aspect-ratio: 1 / 0.72; min-height: 260px; }
}
@media (max-width: 620px) {
  .spot-art { min-height: 230px; }
  .spot-actions { flex-direction: column; align-items: flex-start; gap: 16px; }
}



/* ===========================================================================
   About page - split hero, story rows, capability strip, process steps,
   service-area block and closing card.
   =========================================================================== */
.split-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(96px, 12vw, 148px) 0 clamp(64px, 8vw, 96px);
  background: var(--navy-950);
}
.split-hero > .crumbs { z-index: 4; }
.split-hero-photo {
  position: absolute;
  inset: 0 0 0 42%;
  z-index: 0;
}
.split-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.split-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--navy-950) 0%, rgba(4, 22, 52, 0.92) 26%, rgba(4, 22, 52, 0.34) 68%, rgba(4, 22, 52, 0.34) 100%);
}
.split-hero-inner { position: relative; z-index: 2; }
.split-hero-copy { max-width: 560px; }
.split-hero-copy h1 { margin: 0 0 10px; color: #fff; }
.split-hero-sub {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.24;
  color: var(--gold-400);
}
.split-hero-copy .lede { margin: 0 0 28px; color: rgba(255, 255, 255, 0.88); font-size: 0.98rem; }

.section-head { margin-bottom: clamp(34px, 4.5vw, 54px); }
.section-head h2 { margin: 0; }

/* Story rows */
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(32px, 5vw, 68px);
}
.story-copy h2 { margin: 0 0 18px; }
.story-copy p { color: var(--ink-soft); }
.story-photo {
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-warm);
  background: var(--mist);
  box-shadow: var(--sh-md);
}
.story-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.signature-block { margin: 26px 0 0 !important; }
.signature {
  display: block;
  font-family: "Great Vibes", "Segoe Script", cursive;
  font-size: 2.1rem;
  line-height: 1.1;
  color: var(--navy-900);
}
.signature-name {
  display: block;
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

/* Capability strip */
.capability-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.capability-row li { padding: 4px clamp(12px, 1.6vw, 22px); }
.capability-row li + li { border-left: 1px solid var(--line); }
.capability-row li > a { display: block; color: inherit; text-decoration: none; border-radius: 10px; transition: transform 0.15s ease; }
.capability-row li > a:hover, .capability-row li > a:focus-visible { transform: translateY(-3px); }
.capability-row li > a:hover h3, .capability-row li > a:focus-visible h3 { color: var(--gold-600); }
.cap-ico { display: inline-flex; margin-bottom: 14px; color: var(--gold-600); }
.capability-row h3 {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy-900);
}
.capability-row p { margin: 0; color: var(--ink-soft); font-size: 0.815rem; line-height: 1.6; }

/* Process steps */
.approach-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.approach-row li { position: relative; padding: 0 12px; }
.approach-row li + li::before {
  content: "";
  position: absolute;
  top: 39px;
  right: calc(50% + 46px);
  left: calc(-50% + 46px);
  height: 1px;
  background: var(--gold-500);
  opacity: 0.5;
}
.approach-row .step-art { position: relative; display: inline-flex; margin-bottom: 16px; }
.approach-row .step-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 1px solid var(--gold-500);
  background: #fff;
  color: var(--gold-600);
}
.approach-row .step-num {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--navy-900);
  color: #fff;
  font-size: 0.73rem;
  font-weight: 700;
  z-index: 2;
}
.approach-row h3 {
  margin: 0 0 7px;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--navy-900);
}
.approach-row p { margin: 0; color: var(--ink-soft); font-size: 0.855rem; line-height: 1.6; }

/* Service area */
.serve-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) auto;
  align-items: center;
  gap: clamp(26px, 4vw, 56px);
}
.serve-grid h2 { margin: 0 0 16px; }
.serve-grid p { margin: 0; color: var(--ink-soft); }
.serve-map {
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-warm);
  background: var(--mist);
}
.serve-map .area-map { display: block; width: 100%; min-height: clamp(230px, 26vw, 300px); border: 0; }
.serve-list { margin: 0; padding: 0; list-style: none; }
.serve-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.serve-list li::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  color: var(--gold-600);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Closing card */
.closing-section { padding-top: 0; }
.closing-card {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--r-lg);
  /* Same drifting blue-to-teal treatment as the full-bleed CTA band, so the
     closing card on About and Contact reads as the same moment. */
  background-color: #062b6f;
  background-image: linear-gradient(
    150deg,
    #06265f 0%,
    #062b6f 22%,
    #082f78 48%,
    #004e8e 72%,
    #013c80 100%
  );
  background-size: 300% 300%;
  background-position: 0% 50%;
  animation: gradient-drift 28s ease-in-out infinite;
  box-shadow: var(--sh-md);
}
.closing-photo { position: relative; min-height: 260px; }
.closing-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.closing-copy { padding: clamp(30px, 4vw, 52px); }
.closing-copy h2 { margin: 0 0 12px; color: #fff; }
.closing-copy p { margin: 0 0 24px; color: rgba(255, 255, 255, 0.94); }
.closing-copy .cta-actions { justify-content: flex-start; }
/* Inside the card the copy column is narrower than the old full-bleed band, so
   the tick list stacks and left-aligns instead of running as a centred row. */
.closing-copy .cta-ticks {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  margin: 0 0 26px;
}
.btn-outline-light {
  border: 1px solid rgba(255, 255, 255, 0.80);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

@media (max-width: 1080px) {
  .capability-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 0; }
  .capability-row li:nth-child(3n + 1) { border-left: 0; }
  .serve-grid { grid-template-columns: 1fr 1fr; }
  .serve-grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .split-hero { padding-top: clamp(76px, 14vw, 110px); }
  .split-hero-photo { inset: 0; }
  .split-hero-photo::after {
    background: linear-gradient(180deg, rgba(4, 22, 52, 0.9), rgba(4, 22, 52, 0.82));
  }
  .split-hero-copy { max-width: none; }
  .story-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .story-grid--flip .story-photo { order: 2; }
  .approach-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 0; }
  .approach-row li + li::before { display: none; }
  .closing-card { grid-template-columns: minmax(0, 1fr); }
  .closing-photo { min-height: 200px; }
}

@media (max-width: 640px) {
  .capability-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capability-row li { border-left: 0 !important; }
  .serve-grid { grid-template-columns: minmax(0, 1fr); }
  .serve-grid > :first-child { grid-column: auto; }
}

/* The About hero is dark even though the page body is .light-hero, so the
   breadcrumb has to switch back to the on-dark treatment. */
.light-hero .hero.split-hero > .crumbs a,
.light-hero .hero.split-hero > .crumbs li,
.light-hero .hero.split-hero > .crumbs [aria-current] { color: var(--gold-300); }
.light-hero .hero.split-hero > .crumbs a:hover { color: #fff; }
.light-hero .hero.split-hero > .crumbs li:not(:last-child)::after { color: var(--gold-300); opacity: 0.55; }

/* ===========================================================================
   Contact page - split photo hero, help-topic cards, reach row, service-area
   card and closing note. Every line of copy runs dark green here.
   =========================================================================== */
.contact-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(74px, 9vw, 104px) 0 clamp(58px, 8vw, 92px);
  background: var(--mist);
}
.contact-hero-photo { position: absolute; inset: 0 0 0 38%; z-index: 0; }
.contact-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.contact-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--mist) 0%, rgba(238, 244, 249, 0.97) 24%, rgba(238, 244, 249, 0.18) 66%, rgba(238, 244, 249, 0) 100%);
}
.contact-hero > .crumbs { z-index: 4; }
.contact-hero-inner { position: relative; z-index: 2; }
.contact-hero-copy { max-width: 470px; }
.contact-hero-copy h1 { margin: 0 0 16px; color: var(--navy-900); }
.contact-hero-copy .lede { margin: 0; color: var(--ink); }

.section-tight { padding-top: clamp(26px, 3.4vw, 44px); }

/* Help-topic cards */
.help-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.help-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 26px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  text-align: center;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.help-card:hover { transform: translateY(-3px); border-color: var(--line-warm); box-shadow: var(--sh-md); }
.help-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 18px;
  border-radius: 50%;
  border: 1px solid var(--gold-500);
  color: var(--gold-600);
}
.help-card h3 {
  margin: 0 0 10px;
  font-size: 1.16rem;
  line-height: 1.3;
  color: var(--navy-900);
}
.help-card p {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: 0.885rem;
  line-height: 1.68;
}
.help-link { margin-top: auto; color: var(--gold-700); font-weight: 700; }

/* Other ways to reach us */
.reach-row {
  display: grid;
  /* three cards, not four: the "Email us" card was removed because the site
     publishes no email address - enquiries come through the booking form */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.reach-row > li { padding: 4px clamp(14px, 2vw, 30px); }
.reach-row > li + li { border-left: 1px solid var(--line); }
.reach-ico-lg { display: inline-flex; margin-bottom: 14px; color: var(--gold-600); }
.reach-row h3 { margin: 0 0 10px; font-size: 1.05rem; color: var(--navy-900); }
.reach-row p { margin: 0 0 14px; color: var(--ink); font-size: 0.865rem; line-height: 1.65; }
.reach-row a { color: var(--gold-700); font-weight: 700; font-size: 0.9rem; word-break: break-word; }
.reach-row a:hover { color: var(--gold-600); }

/* Service-area card */
.area-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(26px, 3.4vw, 42px);
  border: 1px solid var(--line-warm);
  border-radius: var(--r-lg);
  background: var(--mist);
}
.area-art { color: var(--navy-800, #013c80); opacity: 0.75; }
.area-art svg { display: block; width: 100%; height: auto; }
.area-copy h2 { margin: 0 0 14px; color: var(--navy-900); }
.area-copy p { margin: 0 0 22px; color: var(--ink); }

/* Closing note */
.closing-note { padding-top: clamp(30px, 4vw, 52px); }
.closing-note h2 { margin: 0 0 12px; color: var(--navy-900); }
.closing-note p { margin: 0; color: var(--ink); }
.note-legal { margin-top: 18px !important; display: flex; justify-content: center; gap: 16px; }
.note-legal a { color: var(--navy-900); text-decoration: underline; text-underline-offset: 3px; }
.note-legal a:hover { color: var(--gold-700); }
.note-legal span { color: var(--muted); }

/* Dark green copy throughout the contact page */
.contact-page main h1, .contact-page main h2,
.contact-page main h3, .contact-page main h4,
.contact-page main label { color: var(--navy-900); }
.contact-page main p, .contact-page main li,
.contact-page main .lede { color: var(--ink); }
.contact-page main .eyebrow { color: var(--gold-700); }
.contact-page main .closing-card h2 { color: #fff; }
.contact-page main .closing-card p { color: rgba(255, 255, 255, 0.86); }
.contact-page main .fineprint, .contact-page main .field-error { color: var(--ink-soft); }

@media (max-width: 1080px) {
  .help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reach-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 0; }
  .reach-row > li:nth-child(odd) { border-left: 0; }
}

@media (max-width: 900px) {
  .contact-hero { padding-top: clamp(64px, 12vw, 92px); }
  .contact-hero-photo { inset: 0; }
  .contact-hero-photo::after { background: linear-gradient(180deg, rgba(238, 244, 249, 0.95), rgba(238, 244, 249, 0.9)); }
  .contact-hero-copy { max-width: none; }
  .area-card { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .help-grid { grid-template-columns: minmax(0, 1fr); }
  .reach-row { grid-template-columns: minmax(0, 1fr); }
  .reach-row > li { border-left: 0 !important; }
}

/* ==========================================================================
   Homepage - modern restyle
   Scoped to body.home throughout, so the rest of the site is unaffected.
   Four moves: a tighter vertical rhythm, a larger and tighter display type
   scale, one calm cool surface instead of warm/cool tint alternation, and
   flatter cards that rely on a border rather than a wash plus shadow.
   ========================================================================== */

/* --- rhythm: slightly tighter, and scaling with the viewport rather than fixed --- */
.home .section { padding: clamp(60px, 6.4vw, 98px) 0; }
.home .section-sm { padding: clamp(44px, 4.6vw, 68px) 0; }

/* --- surfaces: the page alternated cool mist against warm cream, which reads
       dated. One cool tint at two depths gives rhythm without the clash. --- */
.home .section-mist { background: #f4f7fb; }
.home .section-warm { background: #f4f7fb; }
.home .section-warm.section-area { background: #e9eef7; }

/* --- display type: larger, tighter tracking and leading. text-wrap: balance
       stops single-word orphans on the headline without manual <br>. --- */
.home h1.h-xl {
  font-size: clamp(2.6rem, 5.9vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.home h2.h-lg {
  font-size: clamp(2rem, 3.8vw, 2.95rem);
  line-height: 1.12;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.home h3 { letter-spacing: -0.008em; }
.home .lede {
  font-size: clamp(1.04rem, 1.15vw, 1.16rem);
  line-height: 1.72;
  text-wrap: pretty;
}

/* --- heading blocks: more air under the intro, and a measured lede.
       .stack-cta is excluded - those .center blocks are button rows. --- */
.home .section .center:not(.stack-cta) { margin-bottom: clamp(34px, 3.4vw, 52px); }
.home .section .center:not(.stack-cta) .lede { margin-left: auto; margin-right: auto; max-width: 56ch; }
.home .eyebrow { margin-bottom: 16px; }

/* --- cards: drop the diagonal wash and lean on a crisp border; lift on hover
       with a shorter, tighter shadow instead of a large soft one. --- */
.home .bento-card {
  padding: clamp(26px, 2.4vw, 34px) clamp(24px, 2.2vw, 32px);
  border-radius: 18px;
  background-image: none;
  border-color: #dae1ee;
}
.home .bento-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-400);
  box-shadow: 0 14px 30px -16px rgba(6, 43, 111, 0.28);
}
.home .stat, .home .price-card, .home .aud-card { border-radius: 16px; }

/* --- capability strip: a touch more room per item so the icons breathe --- */
.home .capability-row li > a { padding: clamp(18px, 2vw, 26px) 14px; }


/* ==========================================================================
   Real imagery in place of the illustration stand-ins
   ========================================================================== */

/* The dark panel used to centre a line-art SVG; it now frames a photograph
   edge to edge, so the inner padding goes and the image fills the radius. */
.visual-photo {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* Every service page was showing the same inset photo (the general-notary
   one). Each now carries an image matching its own subject, and the grayscale
   filter is eased so they read as photographs rather than washed-out texture. */
.general-notary .spot-photo { background-image: url("https://images.unsplash.com/photo-1681505504714-4ded1bc247e7?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/meeting-at-table.svg"); }
.loan-signings .spot-photo { background-image: url("https://images.unsplash.com/photo-1564846824194-346b7871b855?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/contract-and-stamp.svg"); }
.estate-planning .spot-photo { background-image: url("https://images.unsplash.com/photo-1635859890085-ec8cb5466806?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/estate-documents.svg"); }
.remote-online-notarization .spot-photo { background-image: url("https://images.unsplash.com/photo-1614605844432-731c32334c49?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/appointment-checklist.svg"); }
.business-notary .spot-photo { background-image: url("https://images.unsplash.com/photo-1686771416282-3888ddaf249b?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/business-office.svg"); }
.spot-photo { filter: grayscale(0.55) contrast(1.04); }


/* ==========================================================================
   Gold accents, from the logo
   Gold appears in the logo as three things only: the star, the pen-nib dot,
   and the hairlines flanking "MOBILE NOTARY". So it is used here the same way -
   small marks, hairline rules and the ink detail - never as a fill or a
   large field. --gold on dark ground, --gold-ink on light.
   ========================================================================== */

/* the dash before every eyebrow: the logo's flanking rule */
.eyebrow::before { background: var(--gold-ink) !important; opacity: 1; }
.on-dark .eyebrow::before,
.hero .eyebrow::before,
.cta-band .eyebrow::before { background: var(--gold) !important; }
.section.aurora.on-dark .eyebrow::before { background: var(--gold-ink) !important; }

/* section seam hairline */
.seam { background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.55; }

/* tick marks: gold on the dark cards, deepened on light sections.
   The booking card's gradient reaches a bright royal blue where the logo gold
   measured only 2.72:1, so that surface takes the lifted gold (3.55:1). */
.cta-ticks svg { color: var(--gold); }
.checklist svg { color: var(--gold-ink); }
.on-dark .checklist svg { color: var(--gold); }
/* last, so it wins: the card's gradient reaches a bright royal blue where the
   logo gold measured only 2.72:1, so that one surface takes the lifted gold. */
.closing-copy .cta-ticks svg,
.closing-copy .checklist svg { color: var(--gold-lift); }

/* the pen writes in gold, like the nib dot in the mark */
.sig-ink path { stroke: rgba(201, 171, 99, 0.68) !important; }
.sig-ink path:nth-child(2) { stroke: rgba(220, 196, 138, 0.42) !important; }

/* hairline rule under the big figures, and the locator dot */
.statline-value { color: var(--gold-ink); }
.figures-band .statline-value,
.on-dark .statline-value { color: var(--gold); }
.area-pulse::after { background: var(--gold) !important; }
.area-pulse span { border-color: rgba(201, 171, 99, 0.38) !important; }

/* a gold hairline above the footer, echoing the logo lock-up */
.site-footer { border-top: 1px solid rgba(201, 171, 99, 0.42); }

/* ==========================================================================
   Gradient & gold polish layer
   --------------------------------------------------------------------------
   Deepens the blue with directional gradients and threads the logo's antique
   gold through the page as hairlines and rules. Appended last on purpose:
   every rule here is additive and can be lifted out in one block.

   Gold has two tiers, as elsewhere in this sheet: --gold on dark grounds,
   --gold-ink on light ones. The mid gold fails contrast on white, so it never
   carries text or a meaningful edge on a pale surface.
   ========================================================================== */

:root {
  /* Directional blues. No stop is lighter than #0a3a86 on the text-bearing
     bands, or the small grey captions drop below 4.5:1. */
  --grad-band: linear-gradient(122deg, #05204d 0%, #062b6f 46%, #0a3a86 100%);
  --grad-mist: linear-gradient(176deg, #f7fafd 0%, #e9f0f9 54%, #f4f8fc 100%);
  --grad-warm: linear-gradient(174deg, #fbfcfe 0%, #f1f5fb 100%);
  --grad-btn: linear-gradient(135deg, #062b6f 0%, #013c80 52%, #00558f 100%);
  --grad-btn-hover: linear-gradient(135deg, #082f78 0%, #004e8e 52%, #0066a8 100%);
  --grad-wash: linear-gradient(152deg, rgba(0, 91, 158, 0.085) 0%, rgba(0, 91, 158, 0) 46%);

  /* Centre-weighted gold rules, echoing the lock-up's MOBILE NOTARY lines. */
  --gold-rule: linear-gradient(90deg, rgba(201, 171, 99, 0) 0%, rgba(201, 171, 99, 0.9) 26%, #efdca8 50%, rgba(201, 171, 99, 0.9) 74%, rgba(201, 171, 99, 0) 100%);
  --gold-rule-ink: linear-gradient(90deg, rgba(125, 106, 46, 0) 0%, rgba(125, 106, 46, 0.85) 26%, #a58f4c 50%, rgba(125, 106, 46, 0.85) 74%, rgba(125, 106, 46, 0) 100%);
  --gold-hair: rgba(201, 171, 99, 0.42);
}

/* ---- 1. a gold rule under every section heading ---- */
.h-lg::after,
.section-head h2::after {
  content: "";
  display: block;
  width: 78px;
  height: 2px;
  margin-top: 17px;
  border-radius: 2px;
  background: var(--gold-rule-ink);
}
.center > .h-lg::after,
.section-head.center h2::after { margin-left: auto; margin-right: auto; }
/* on the navy CTA card the rule needs the bright tier */
.closing-copy .h-lg::after,
.cta-band .h-lg::after,
.figures-band .h-lg::after { background: var(--gold-rule); }

/* ---- 2. gradient blue on the section headings ---- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .h-lg,
  .section-head h2 {
    background-image: linear-gradient(96deg, #062b6f 0%, #013c80 44%, #005b9e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  /* dark grounds keep the solid light heading they already had */
  .closing-copy .h-lg,
  .cta-band .h-lg,
  .figures-band .h-lg,
  .contact-page main .closing-card .h-lg {
    background-image: none;
    -webkit-text-fill-color: #fff;
  }
  /* the ::after rules must not inherit the text clip, or they disappear */
  .h-lg::after,
  .section-head h2::after { -webkit-text-fill-color: initial; }
}

/* ---- 3. cards: blue corner wash + a gold top edge that lifts on hover ---- */
.bento-card,
.home .bento-card { background-image: var(--grad-wash); }
.bento-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 2;
  background: var(--gold-rule);
  opacity: 0.5;
  transition: opacity var(--t);
}
.bento-card:hover::before,
.bento-card.is-hovered::before { opacity: 1; }

/* ---- 4. primary button: gradient body, gold hairline ---- */
.btn-gold {
  background-image: var(--grad-btn);
  box-shadow: 0 10px 24px -12px rgba(6, 43, 111, 0.55), inset 0 0 0 1px rgba(201, 171, 99, 0.3);
}
.btn-gold:hover {
  background-image: var(--grad-btn-hover);
  box-shadow: 0 14px 30px -12px rgba(6, 43, 111, 0.6), inset 0 0 0 1px rgba(201, 171, 99, 0.5);
}
/* the light-on-dark variants stay white, with the hairline in gold */
.closing-copy .btn-gold,
body:not(.light-hero) .hero .btn-gold {
  background-image: none;
  background: #fff;
  color: var(--navy-900);
  box-shadow: 0 10px 26px -14px rgba(4, 22, 52, 0.5), inset 0 0 0 1px rgba(201, 171, 99, 0.55);
}
.closing-copy .btn-gold:hover,
body:not(.light-hero) .hero .btn-gold:hover { background: #f4f8fc; }
.editor-topbar .btn-gold { background-image: none; background: #062b6f; box-shadow: none; }

/* ---- 5. trust bar: directional navy with gold hairlines top and bottom ---- */
.trustbar { position: relative; background: var(--grad-band); }
.trustbar::before,
.trustbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--gold-rule);
  opacity: 0.6;
}
.trustbar::before { top: 0; }
.trustbar::after { bottom: 0; }
.trust-item p { color: #c9d9ec; }

/* ---- 6. section grounds get a soft vertical gradient ---- */
.section-mist,
.home .section-mist { background-image: var(--grad-mist); }
.section-warm { background-image: var(--grad-warm); }

/* ---- 7. step markers: gradient disc, gold ring ---- */
.step-num {
  color: #fff;
  background-image: linear-gradient(140deg, #082f78 0%, #013c80 55%, #005b9e 100%);
  border-color: rgba(201, 171, 99, 0.6);
  box-shadow: 0 0 0 4px rgba(201, 171, 99, 0.1);
}
.steps::before {
  background: linear-gradient(90deg, transparent, rgba(201, 171, 99, 0.55) 20%, rgba(201, 171, 99, 0.55) 80%, transparent);
}

/* ---- 8. hero stat cards ---- */
.stat { position: relative; overflow: hidden; background-image: var(--grad-wash); }
.stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold-rule);
  opacity: 0.65;
}

/* ---- 9. area chips pick up gold on hover ---- */
.chip { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.chip:hover { border-color: rgba(201, 171, 99, 0.75); box-shadow: 0 5px 16px -9px rgba(6, 43, 111, 0.45); }

/* ---- 10. pricing panel: gold hairline beneath the gradient head ---- */
.price-head { box-shadow: inset 0 -2px 0 0 rgba(201, 171, 99, 0.6); }

/* ---- 11. capability strip: gold dividers and hover icon ---- */
.capability-row li + li {
  border-left-color: transparent;
  background-image: linear-gradient(180deg, transparent 0%, rgba(201, 171, 99, 0.5) 22%, rgba(201, 171, 99, 0.5) 78%, transparent 100%);
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: left center;
}
.capability-row li > a:hover .cap-ico,
.capability-row li > a:focus-visible .cap-ico { color: var(--gold-ink); }

/* ---- 12. closing CTA card: gold hairline frame ---- */
.closing-card { box-shadow: inset 0 0 0 1px rgba(201, 171, 99, 0.34); }

/* ---- 13. the map panel gets the blue wash rather than sitting flat ---- */
.area-visual { border-radius: 30px; background-image: var(--grad-wash); }

/* ---- 14. FAQ: gold ring on the open row ---- */
.faq-q[aria-expanded="true"] .faq-ico { border-color: rgba(201, 171, 99, 0.75); }

/* ---- 15. footer: gold rule above the legal line ---- */
.footer-bottom { position: relative; margin-top: 4px; }
.footer-bottom::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--gold-rule);
  opacity: 0.5;
}

/* ==========================================================================
   Responsive hardening
   --------------------------------------------------------------------------
   Appended last so it can be lifted out in one block. Three concerns:
     1. nothing may push the document wider than the viewport
     2. touch targets and label sizes have to hold up on a real phone
     3. short landscape viewports and very wide desktops need their own rules
   Single-column grid tracks above were changed from `1fr` to `minmax(0, 1fr)`
   in place: a bare `1fr` track floors at min-content, so one wide child forces
   the whole row past the viewport.
   ========================================================================== */

/* ---- 1. overflow safety net --------------------------------------------- */

/* replaced media queries cannot help a child that simply refuses to shrink */
img, svg, video, canvas, iframe, picture { max-width: 100%; }
video, iframe { height: auto; }
table { max-width: 100%; }

/* grid and flex children default to min-width:auto, which is min-content.
   Zero it on the layout wrappers so a long word can never widen the page. */
.spot-grid-wrap > *,
.split-layout > *,
.area-layout > *,
.closing-card > *,
.footer-inner > *,
.bento-grid > *,
.capability-row > *,
.steps > *,
.statline-grid > *,
.show-grid > *,
.tri-row > *,
.article-layout > * { min-width: 0; }

/* the hero's scaled backdrop layer is decoration; clip it to its section
   rather than relying on body { overflow-x: hidden } to mask it */
.hero { overflow: hidden; }

/* email addresses and long unbroken strings */
p, li, dd, td, th, figcaption, .lede, .footer-reach a, .footer-contact a {
  overflow-wrap: break-word;
}

/* the collage panel derived its width from min-height x aspect-ratio, which
   overflowed a 320px screen */
.spot-art { min-height: clamp(230px, 62vw, 320px); }
.spot-label { flex-wrap: wrap; }

/* aspect-ratio plus min-height derives a *width*, which is what pushed the
   collage past a 320px screen. Pin the width so the ratio drives height only. */
.spot-art { width: 100%; }

/* the "come to us / we come to you" tabs wrap rather than scroll, so a single
   long label must be allowed to shrink */
.way-tabs { max-width: 100%; }
.way-tab { flex: 0 1 auto; min-width: 0; }

/* ---- 2. phones: touch targets and label sizes --------------------------- */
@media (max-width: 600px) {
  /* icon-and-number button in the header was 37px square */
  .header-phone { min-height: 44px; padding: 10px 16px 10px 13px; }

  /* standalone call-to-action links, not links inside prose */
  .link-arrow, .spot-link, .cta-link {
    min-height: 44px;
    align-items: center;
  }

  /* footer link lists stay dense, but not finger-hostile */
  .site-footer a { display: inline-block; padding: 8px 0; }
  .site-footer .footer-brand-mark a { padding: 0; }
  .footer-legal a { padding: 10px 0; }

  /* filter pills in the blog rail */
  .topic-link { min-height: 44px; }
  .way-tab { min-height: 44px; padding: 11px 18px; }

  /* standalone call-to-action links on the service pages */
  .show-link { min-height: 44px; align-items: center; }

  /* links that are the whole content of a list item are navigation, not prose,
     so they get a real target - prose lists are excluded below */
  li > a:not(.btn):not(.chip):not(.topic-link) { display: inline-block; padding: 7px 0; }
  .article-content li > a,
  .legal-body li > a,
  .faq-a li > a,
  .lede li > a { display: inline; padding: 0; }

  /* a card heading that is also the card's only link */
  .bento-card h3 > a, .service-card h3 > a, .post-card h3 > a { display: inline-block; padding: 6px 0; }

  /* tap-to-call and tap-to-email anywhere in the page body */
  main a[href^="tel:"], main a[href^="mailto:"] { display: inline-block; padding: 6px 0; }

  /* uppercase letterspaced labels were rendering as small as 8.3px */
  .brand-sub { font-size: 0.66rem; letter-spacing: 0.13em; }
  .post-cat { font-size: 0.78rem; }
  /* keep the pill on one line and let the sentence wrap under it */
  .badge-dot { font-size: 0.78rem; white-space: nowrap; }
  .badge { flex-wrap: wrap; row-gap: 4px; }
  .foot-label { font-size: 0.79rem; }

  /* keep the reveal's skip control reachable */
  .lr-skip { min-height: 44px; right: 10px; bottom: 10px; }
}

@media (max-width: 380px) {
  /* the very bottom of the range: buy back horizontal room */
  .wrap { padding: 0 14px; }
  .section { padding: 56px 0; }
  .stat { padding: 18px 20px; }
  .chip { padding: 9px 14px; font-size: 0.84rem; }
}

/* ---- 3. short landscape viewports --------------------------------------- */
/* a phone held sideways is ~390px tall; a 100vh hero leaves nothing visible */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: 0; padding-top: 84px; padding-bottom: 48px; }
  .hero .stat-rail { margin-top: 16px; }
  .drawer { max-height: calc(100vh - 56px); overflow-y: auto; }
  .lr-stage { width: min(300px, calc(34vh * 1.517)); }
}

/* ---- 4. very wide desktops ---------------------------------------------- */
/* the container caps at 1180px; give the full-bleed bands a matching ceiling
   so nothing looks marooned in the middle of a 2560px display */
@media (min-width: 1600px) {
  :root { --container: 1280px; }
  .hero .lede, .section-head .lede { max-width: 68ch; }
}

/* ==========================================================================
   Figures band - restore the dark ground
   --------------------------------------------------------------------------
   `.figures-band` asked for --navy-950, but `.section.aurora.on-dark` carries
   three classes to its one and was repainting the panel near-white. Its text
   is all styled for a dark ground, so white labels and notes were landing on
   a pale blue wash at roughly 1.2:1 - effectively invisible. The panel is
   designed dark, so the ground is what gets fixed, not the text.
   ========================================================================== */
.section.aurora.on-dark.figures-band {
  background-color: var(--navy-950);
  background-image: linear-gradient(122deg, #041634 0%, #062b6f 46%, #0a3a86 100%);
  background-size: auto;
  background-position: 0 0;
  animation: none;
}
.section.aurora.on-dark.figures-band .h-lg { color: #fff; }

/* tiles read as glass on the restored navy */
.figures-band .figure-tile {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(169, 212, 240, 0.3);
}

/* ==========================================================================
   Spotlight collage - fill the last two placeholders
   --------------------------------------------------------------------------
   `.spot-block` was a flat azure rectangle with a decorative zigzag over it,
   which read as a stand-in rather than a design element once every other slot
   carried real artwork. It now carries a second illustration, chosen to differ
   from the one in `.spot-photo` on the same page, and the zigzag comes off.
   ========================================================================== */
.spot-block {
  background-image: url("https://images.unsplash.com/photo-1444427169197-de497742b62d?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/seal-and-papers.svg");
  background-size: cover;
  background-position: center;
  border-radius: var(--r-md);
  box-shadow: 0 22px 50px -24px rgba(6, 43, 111, 0.5);
}
.general-notary-art .spot-block,
.general-notary .spot-block { background-image: url("https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/notary-stamping-document.svg"); }
.loan-signings-art .spot-block,
.loan-signings .spot-block { background-image: url("https://images.unsplash.com/photo-1642237517617-a7c1c419e82e?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/signing-loan-documents.svg"); }
.estate-planning-art .spot-block,
.estate-planning .spot-block { background-image: url("https://images.unsplash.com/photo-1710010966147-35c53f427a9b?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/document-and-seal.svg"); }
.remote-online-notarization-art .spot-block,
.remote-online-notarization .spot-block { background-image: url("https://images.unsplash.com/photo-1616587226157-48e49175ee20?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/remote-online-session.svg"); }
.business-notary-art .spot-block,
.business-notary .spot-block { background-image: url("https://images.unsplash.com/photo-1564846824194-346b7871b855?auto=format&fit=crop&w=1400&q=80"), url("/assets/img/contract-and-stamp.svg"); }

/* the zigzag existed only to decorate the empty block */
.spot-wave { display: none; }

/* the collage artwork is already in the brand palette - the grayscale pass that
   suited photographs just washes it out */
.spot-photo { filter: none; }

/* ==========================================================================
   Notary advertising disclaimer
   --------------------------------------------------------------------------
   RCW 42.45.230 requires a Washington notary who is not an attorney to carry
   this exact statement in their advertising, and a website is advertising.
   Set quietly but legibly - it has to be readable to do its job.
   ========================================================================== */
.footer-disclaimer {
  padding: 20px 24px 0;
  margin-top: 8px;
}
.footer-disclaimer p {
  max-width: 88ch;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.65;
  color: rgba(226, 236, 246, 0.72);
}
@media (max-width: 600px) {
  .footer-disclaimer { padding: 16px 0 0; }
  .footer-disclaimer p { font-size: 0.76rem; }
}

/* ==========================================================================
   Hero headline: solid, not gradient
   --------------------------------------------------------------------------
   The pale blue gradient was washing out against the hero photograph - it read
   as faded rather than deliberate. The headline is now one solid colour, and
   `inherit` is doing the work on purpose: every hero's h1 colour was already
   verified for contrast, so the span simply matches its heading. White on the
   dark heroes, navy on the light ones, with no new colour to re-check.

   Do NOT drive this off `body.light-hero`. That class does not mean the hero is
   light - /pricing/, /about/, /faq/ and /blog/ all carry it over a navy
   split-hero, and forcing navy type there put the headline at 1.35:1.
   ========================================================================== */

.hero .grad-text,
.hero.aurora .grad-text,
.light-hero .hero .grad-text {
  background: none;
  background-image: none;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

/* the homepage hero sat behind an 18% scrim, which is why the type looked grey
   and the photograph looked muddy. Deepen it so white type stays crisp. */
.home .hero .aurora-bg::after {
  background: linear-gradient(
    170deg,
    rgba(4, 18, 42, 0.62) 0%,
    rgba(5, 22, 48, 0.68) 45%,
    rgba(4, 20, 44, 0.74) 100%
  );
  backdrop-filter: blur(2px);
}
.home .hero .h-xl { text-shadow: 0 2px 18px rgba(4, 18, 40, 0.45); }
.home .hero .lede { color: rgba(255, 255, 255, 0.94); }

/* ==========================================================================
   Travel cards - "we travel to you" and the travel fee
   --------------------------------------------------------------------------
   A pair of framed cards on the booking page: where we go, and what travel
   costs. The heavy navy frame and the icon disc give each card its own weight,
   so the two answer the two questions people actually ask before booking.
   ========================================================================== */
.travel-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
}
.travel-card {
  padding: clamp(26px, 3vw, 40px);
  border: 3px solid var(--navy-900);
  border-radius: var(--r-lg);
  background: #fff;
  background-image: var(--grad-wash);
}
.travel-ico {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 20px;
  border-radius: 50%;
  color: var(--navy-900);
  background: var(--mist-warm);
  box-shadow: inset 0 0 0 1px rgba(201, 171, 99, 0.45);
}
.travel-card h2 {
  margin: 0 0 14px;
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--navy-900);
}
.travel-card h2::after { content: none; }   /* the sitewide gold rule is too much here */
.travel-card p { margin: 0 0 14px; font-size: 0.98rem; line-height: 1.7; color: var(--ink-soft); }
/* declared after the generic paragraph rule on purpose - at equal specificity
   source order decides, and the headline price has to win */
.travel-card .travel-price {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.2vw, 2.45rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--navy-900);
}
.travel-card p strong { color: var(--navy-900); }
.travel-note { font-size: 0.9rem !important; color: var(--muted) !important; }
.travel-card .link-arrow { margin-top: 4px; }

@media (max-width: 860px) {
  .travel-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .travel-card { border-width: 2px; }
  .travel-ico { width: 54px; height: 54px; margin-bottom: 16px; }
}

/* ==========================================================================
   Documents-we-can-notarize grid
   Categorised list of common notarial documents. Cards are equal-height,
   collapse to two columns at 980px and one at 620px.
   ========================================================================== */
.docs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 26px);
  margin-top: clamp(34px, 4vw, 52px);
}
.doc-card {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  background-image: var(--grad-wash);
  box-shadow: 0 18px 40px -30px rgba(6, 43, 111, 0.45);
}
.doc-card > .doc-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 13px;
  color: var(--navy-900);
  background: var(--mist-warm);
  box-shadow: inset 0 0 0 1px rgba(201, 171, 99, 0.45);
}
.doc-card h3 {
  margin: 0 0 6px;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--navy-900);
}
.doc-card h3::after { content: none; }
.doc-card .doc-rule {
  width: 46px;
  height: 2px;
  margin: 0 0 15px;
  border-radius: 2px;
  background: var(--gold-rule-ink);
}
.doc-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.doc-card li {
  position: relative;
  padding-left: 18px;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.doc-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c9ab63 0%, #efdca8 100%);
}
@media (max-width: 980px) {
  .docs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .docs-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Hero stat rail on phones
   `.stat` carries `flex: 1 1 220px`. Once `.stat-rail` flips to
   `flex-direction: column` at 620px that 220px basis becomes a *height*, and
   flex-grow then stretched each card further - which is where the tall empty
   cards came from. Reset the basis, centre the type, tighten the padding.
   ========================================================================== */
@media (max-width: 620px) {
  .stat-rail { gap: 12px; margin-top: 20px; }
  .stat {
    flex: 0 0 auto;
    max-width: none;
    padding: 15px 18px;
    text-align: center;
  }
  .stat-value { font-size: 1.42rem; }
  .stat-label { font-size: 0.82rem; }
}

/* ==========================================================================
   LS-OFF LAYER - loan signings switched off
   With the loan-signings card commented out, both service grids hold four
   cards instead of five, so a 3-across grid left one card stranded on its own
   row. Two-by-two fills cleanly. Delete this whole block when the LS-OFF
   markup elsewhere is uncommented.
   ========================================================================== */
@media (min-width: 861px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-a, .bento-c, .bento-d, .bento-e { grid-column: span 3; }
}
/* LS-END */

/* ==========================================================================
   Form field hint
   Sits under an input to explain why we are asking (used by the appointment
   address field, where the answer is only there to measure travel distance).
   ========================================================================== */
.field-hint {
  margin: 7px 0 0;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--muted);
}
.field-hint + .field-error { min-height: 0; }
.field[hidden] { display: none; }

/* ==========================================================================
   About page: the opening line of the story
   Slightly larger than the paragraphs that follow, so the meaning of the name
   reads as the lede it is.
   ========================================================================== */
.story-copy .story-lede {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.72;
  color: var(--navy-900);
}
.story-copy .story-lede em {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
}

/* ==========================================================================
   GOLD ACCENT LAYER
   A restrained pass of antique gold. Everything here is a hairline, a border
   or a hover state - no body text changes colour, so every contrast ratio
   measured earlier still holds. --gold (#c9ab63) is used only where it sits
   on a dark ground or as a thin rule; --gold-ink (#7d6a2e) carries anything
   that needs to read on white.
   ========================================================================== */

/* ---- 1. a gilt hairline under the header once the page is scrolled ------- */
.site-header { position: sticky; }
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--gold-rule-ink);
  opacity: 0;
  transition: opacity var(--t);
  pointer-events: none;
}
.site-header.is-stuck::after { opacity: 0.55; }

/* ---- 2. nav links draw a short gold underline on hover ------------------ */
.nav a { position: relative; }
.nav a::before {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: 4px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--gold-ink);
  opacity: 0;
  transition: left 0.24s ease, right 0.24s ease, opacity 0.24s ease;
}
.nav a:hover::before,
.nav a:focus-visible::before { left: 14px; right: 14px; opacity: 0.85; }
.nav a.is-active::before { left: 14px; right: 14px; opacity: 0.6; }

/* ---- 3. cards catch a gilt edge on hover -------------------------------- */
.doc-card, .benefit-card, .show-card, .rail-card, .post-card, .example, .travel-card {
  position: relative;
}
.doc-card::after, .benefit-card::after, .show-card::after,
.rail-card::after, .post-card::after, .example::after {
  content: "";
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--gold-rule);
  opacity: 0;
  transition: opacity 0.28s ease, left 0.28s ease, right 0.28s ease;
  pointer-events: none;
}
.doc-card:hover::after, .benefit-card:hover::after, .show-card:hover::after,
.rail-card:hover::after, .post-card:hover::after, .example:hover::after {
  opacity: 0.95; left: 0; right: 0;
}

/* ---- 4. the outline button warms to gold on hover ---------------------- */
.btn-outline:hover {
  border-color: var(--gold-ink);
  background: rgba(201, 171, 99, 0.08);
}

/* ---- 5. the hero badge gets a gold pip --------------------------------- */
.badge { box-shadow: inset 0 0 0 1px rgba(201, 171, 99, 0.35); }
.badge-dot::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 7px;
  vertical-align: middle;
  border-radius: 50%;
  background: linear-gradient(135deg, #c9ab63 0%, #efdca8 100%);
}

/* ---- 6. warm the text selection ---------------------------------------- */
::selection { background: rgba(201, 171, 99, 0.28); color: var(--navy-900); }

/* ---- 7. a short gilt rule under the footer brand name ------------------- */
/* not on .footer-brand-mark: that is a fixed 64px white plaque and extra
   padding would distort it */
.footer-name { position: relative; padding-bottom: 12px; }
.footer-name::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 54px; height: 1px;
  background: var(--gold-rule);
  opacity: 0.7;
}

@media (hover: none) {
  /* touch devices have no hover, so show the card rule at rest instead */
  .doc-card::after, .benefit-card::after, .show-card::after,
  .rail-card::after, .post-card::after, .example::after { opacity: 0.5; left: 0; right: 0; }
}

/* ==========================================================================
   Signature block: the monogram, not a script font
   "Great Vibes" was never loaded, so the old .signature fell back to whatever
   cursive the device happened to have. The M-and-infinity mark says the same
   thing and is actually the brand.
   ========================================================================== */
.signature-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}
.signature-mark {
  display: block;
  width: clamp(140px, 14vw, 178px);
  height: auto;
  /* the full logo lockup: it already carries the business name, so the
     .signature-name line beneath it was removed as a duplicate */
}
.signature-block .signature-name {
  margin-top: 0;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}

/* ==========================================================================
   RESPONSIVE: minimum legible type
   An audit across 31 pages x 16 widths (280px to 1920px) found no overflow
   and nothing escaping the viewport, but four small-caps labels were rendering
   below the ~11.5px floor where tracked uppercase stops being comfortable:
   .brand-sub at 9.6px, .eyebrow at 10.4px and .post-cat at 10.9px. Tracking is
   eased slightly at the same time so the wider glyphs do not cost more room
   than the larger size buys back.
   ========================================================================== */
.brand-sub { font-size: 0.72rem; letter-spacing: 0.15em; }
.eyebrow { font-size: 0.78rem; }
.post-cat { font-size: 0.73rem; }

@media (max-width: 600px) {
  /* the earlier phone override set this to 0.66rem / 10.6px */
  .brand-sub { font-size: 0.72rem; letter-spacing: 0.13em; }
}
@media (max-width: 360px) {
  /* the header is tight here, so buy the room back from tracking, not size */
  .brand-sub { letter-spacing: 0.1em; }
}

/* ==========================================================================
   RESPONSIVE: post-editor tab strip
   The only overflow the audit found anywhere: on /blog/create/ the SEO and
   inspector tab rows are a non-wrapping flex row, so below ~330px the last
   tab pushed past the viewport. Let them wrap, and scroll rather than
   overflow if a single tab is still too wide.
   ========================================================================== */
.editor-seo__tabs, .editor-inspector-tabs {
  flex-wrap: wrap;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.editor-seo__tabs button, .editor-inspector-tabs button { flex: 0 0 auto; }
@media (max-width: 380px) {
  .editor-seo__tabs button, .editor-inspector-tabs button { padding: 8px 7px; font-size: 0.76rem; }
}

/* ==========================================================================
   Contact page: grids that centre their last row
   Both of these are fixed-column grids, so an incomplete final row hugged the
   left edge and read as a mistake. Flex with `justify-content: center` keeps
   the same three-across track width but centres whatever is left over, and it
   keeps working if a card is added or switched back on later.
   ========================================================================== */
.help-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}
.help-grid > .help-card {
  flex: 0 1 calc((100% - 44px) / 3);   /* 3 across, 22px gutters */
  min-width: 240px;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .help-grid > .help-card { flex-basis: calc((100% - 22px) / 2); }
}
@media (max-width: 620px) {
  .help-grid > .help-card { flex-basis: 100%; min-width: 0; }
}

.reach-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
}
.reach-row > li {
  flex: 0 1 calc(100% / 3);
  min-width: 220px;
  box-sizing: border-box;
}
@media (max-width: 780px) {
  .reach-row > li { flex-basis: 50%; }
  /* the divider rule is keyed to nth-child, which no longer lines up */
  .reach-row > li + li { border-left: 0; }
  .reach-row > li:nth-child(even) { border-left: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .reach-row > li { flex-basis: 100%; min-width: 0; border-left: 0 !important; }
}

/* ==========================================================================
   Capability row: fill the width, whatever the count
   The row is a fixed five-column grid, so with four tiles live (Loan Signings
   is commented out) the set hugged the left and left a blank fifth column.
   `flex: 1 1 0` makes the tiles share the row equally however many there are,
   so four fill it now and five would fill it again if that tile comes back.
   Only applied above the breakpoint where the grid starts wrapping anyway.
   ========================================================================== */
@media (min-width: 901px) {
  .capability-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .capability-row > li {
    flex: 1 1 0;
    min-width: 180px;
    box-sizing: border-box;
  }
}

/* two-by-two on tablets, so four tiles never leave an orphan on its own row */
@media (min-width: 621px) and (max-width: 900px) {
  .capability-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 30px;
  }
  .capability-row > li {
    flex: 0 1 50%;
    min-width: 0;
    box-sizing: border-box;
    /* the divider rule is keyed to nth-child(3n+1) from the three-column
       grid, which no longer describes where the rows break */
    border-left: 0;
  }
  .capability-row > li:nth-child(even) { border-left: 1px solid var(--line); }
}

/* ==========================================================================
   WIDER CONTAINER
   The grid was capped at 1180px, which left a lot of dead margin on a normal
   desktop and squeezed the four-step timeline into the middle of the screen.
   Widening the container is the whole change: `.wrap` keeps its 24px inner
   padding, so gutters and alignment stay exactly as they were and every
   breakpoint below still behaves the same way.
   ========================================================================== */
:root { --container: 1320px; }

@media (min-width: 1600px) {
  :root { --container: 1440px; }
}

/* Prose has a comfortable reading measure regardless of how wide the shell
   gets: past roughly 75 characters a line is hard to track back from. These
   are the blocks that would otherwise run the full new width. */
.legal-body,
.article-content > p,
.article-content > ul,
.article-content > ol,
.service-intro { max-width: 74ch; }
.center .lede,
.section-head .lede { max-width: 68ch; margin-left: auto; margin-right: auto; }

/* the small print under the price tables, and the card copy in the wider
   bento cells, were the two blocks that ran long once the shell grew */
.fineprint { max-width: 78ch; }
.fineprint.center { margin-left: auto; margin-right: auto; }
.bento-card p { max-width: 62ch; }
.bento-card.center p, .center .bento-card p { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   MOBILE HERO
   Three things were wrong on a phone:

   1. The small-phone type step never applied on the homepage. `.h-xl` is
      overridden by `.home h1.h-xl` (0,1,2 beats 0,1,0), so the 2.15rem rule in
      the 420px block lost and the headline stayed at 41.6px, breaking into
      four ragged lines. Fixed with a matching selector, not !important.
   2. The hero headline carries a hard <br> that is right on a wide screen and
      wrong on a narrow one, where it forces a break the text does not need.
   3. The badge is inline-flex, so when its two parts no longer fit on one line
      it wrapped and sat at full width, left aligned, while everything around
      it was centred. It reads as a broken box rather than a pill.
   ========================================================================== */
@media (max-width: 600px) {
  .home h1.h-xl,
  .hero h1.h-xl { font-size: clamp(1.85rem, 8vw, 2.45rem); line-height: 1.1; }

  /* let the headline find its own breaks at this width */
  .hero .h-xl br { display: none; }

  /* a badge that stays a pill */
  .badge-row { justify-content: center; }
  .badge {
    max-width: 100%;
    justify-content: center;
    text-align: center;
    gap: 7px;
    padding: 6px 14px 6px 6px;
    font-size: 0.78rem;
    line-height: 1.4;
  }
  .badge-dot { font-size: 0.7rem; padding: 3px 9px; }
}

/* below 400px the two halves genuinely cannot share a line, so let them
   stack inside the pill rather than stretch it edge to edge */
@media (max-width: 400px) {
  .badge {
    flex-direction: column;
    gap: 5px;
    padding: 8px 16px 10px;
    border-radius: 18px;
  }
}

/* ==========================================================================
   Eyebrow on dark grounds: gold, not pale blue
   `--gold-300` is #a9d4f0, a light blue left over from the old palette. On the
   navy heroes and bands it read as washed-out baby blue next to white type.
   Antique gold is the logo's own accent and measures 5.99:1 on --navy-900, so
   it stays comfortably above the 4.5:1 floor for this size.
   ========================================================================== */
.figures-band .eyebrow-light,
.cta-band:not(.cta-band--solid) .eyebrow-light,
.trust-band .eyebrow-light { color: var(--gold); }

/* Over the photographic heroes the ground is not a known flat colour, so the
   lighter gold is used there: it stays unmistakably gold while holding its
   contrast even where a photograph is brighter than the overlay expects. */
.home .hero .eyebrow-light,
.general-notary .hero .eyebrow-light,
.loan-signings .hero .eyebrow-light,
.estate-planning .hero .eyebrow-light,
.remote-online-notarization .hero .eyebrow-light,
.business-notary .hero .eyebrow-light,
.services .hero .eyebrow-light { color: var(--gold-lift); }
.hero .eyebrow-light::before { background: var(--gold-lift) !important; }

/* ==========================================================================
   The hero badge: one pill, one line
   Tightened so the label and the caption share a row on a normal phone
   instead of stacking into a tall white blob. Only below 340px, where they
   genuinely cannot fit, do they stack.
   ========================================================================== */
@media (max-width: 600px) {
  .badge {
    gap: 6px;
    padding: 5px 12px 5px 5px;
    font-size: 0.72rem;
    line-height: 1.35;
    white-space: nowrap;
  }
  .badge-dot { font-size: 0.66rem; padding: 3px 8px; letter-spacing: 0.01em; }
}
@media (max-width: 400px) and (min-width: 341px) {
  /* undo the earlier stacking: it now fits on one row */
  .badge { flex-direction: row; padding: 5px 12px 5px 5px; border-radius: 999px; }
}
@media (max-width: 340px) {
  .badge { flex-direction: column; gap: 5px; padding: 8px 14px 10px; border-radius: 16px; white-space: normal; }
}

/* ==========================================================================
   Footer: the full logo lockup
   Replaces the small mark on a white plaque plus a separate "Maktub Mobile
   Notary" line. assets/logo-light.png is the same artwork with the navy ink
   pulled to white and the gold star kept gold, so it needs no plate behind it
   on the navy footer. The short gold rule that used to sit under the name now
   sits under the logo.
   ========================================================================== */
.footer-logo {
  display: block;
  width: clamp(180px, 17vw, 230px);
  height: auto;
  margin: 0 0 18px;
}
.footer-brand-rule,
.footer-logo + .footer-tag { position: relative; }
@media (max-width: 620px) {
  .footer-logo { width: clamp(170px, 46vw, 210px); margin-bottom: 16px; }
}

/* ==========================================================================
   FIX: footer gutters
   `.footer-inner` carries `.wrap` but then sets `padding: 42px 0`, wiping out
   the 24px horizontal padding. That went unnoticed while the container was
   1180px, because `margin: 0 auto` left a gutter at any viewport wider than
   that. Widening the container removed the gutter between 1280px and 1320px
   and the first column ran to the very edge. Restore the padding explicitly.
   ========================================================================== */
.footer-inner { padding-left: 24px; padding-right: 24px; }
@media (max-width: 380px) {
  .footer-inner { padding-left: 14px; padding-right: 14px; }
}

/* Same bug in three more bands: each carries `.wrap` and then re-declares
   padding with a `<vertical> 0` shorthand, silently dropping the 24px gutter.
   It was invisible while `margin: 0 auto` on a narrow container supplied the
   space; it is not invisible now. Set the horizontal padding explicitly so it
   no longer depends on how wide the container happens to be. */
.trustbar-inner,
.footer-bottom,
.footer-disclaimer { padding-left: 24px; padding-right: 24px; }
@media (max-width: 380px) {
  .trustbar-inner,
  .footer-bottom,
  .footer-disclaimer { padding-left: 14px; padding-right: 14px; }
}

/* ==== Shared footer: logo + contact rows + aligned dividers ==== */
.site-footer .footer-logo-link { display: inline-block; margin: 0 0 18px; padding: 0; line-height: 0; }
.site-footer .footer-logo-img { display: block; width: 190px; max-width: 100%; height: auto; }
.site-footer .footer-tag { margin: 0 0 20px; }
.site-footer .footer-reach { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.site-footer .footer-reach li { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 0.92rem; font-weight: 500; line-height: 1.4; color: rgba(235, 242, 246, 0.86); }
.site-footer .footer-reach li + li { margin-top: 0; }
.site-footer .footer-reach li::before { content: ""; display: block; flex: 0 0 18px; width: 18px; height: 18px; border: 0; border-radius: 0; background: var(--gold-300, #a9d4f0); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.site-footer .footer-reach li.footer-social { display: flex; font-size: 0.92rem; font-weight: 500; color: rgba(235, 242, 246, 0.86); }
.site-footer .footer-reach a { display: inline; padding: 0; font-size: inherit; font-weight: 600; color: #fff; }
.site-footer .footer-reach a:hover { color: var(--gold-300, #a9d4f0); }
.site-footer .footer-reach li.footer-phone::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z%27%2F%3E%3C%2Fsvg%3E"); }
.site-footer .footer-reach li.footer-social::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2010c0%207-9%2013-9%2013s-9-6-9-13a9%209%200%200%201%2018%200z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%273%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2010c0%207-9%2013-9%2013s-9-6-9-13a9%209%200%200%201%2018%200z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%273%27%2F%3E%3C%2Fsvg%3E"); }
.footer-inner { position: relative; border-bottom: 0; }
.footer-inner::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 1px; background: rgba(235, 242, 246, 0.16); }
.footer-bottom::before { left: 24px; right: 24px; }
@media (max-width: 380px) {
  .footer-inner::after, .footer-bottom::before { left: 14px; right: 14px; }
}
/* shared footer: dividers drawn inside the gutter (specificity raised over later inline rules) */
.site-footer .footer-inner { border-bottom: 0 !important; position: relative; }
.site-footer .footer-inner::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 1px; background: rgba(235, 242, 246, 0.16); }
.site-footer .footer-bottom::before { left: 24px !important; right: 24px !important; }
@media (max-width: 380px) {
  .site-footer .footer-inner::after, .site-footer .footer-bottom::before { left: 14px !important; right: 14px !important; }
}

/* ==== Button system: one primary, one secondary, everywhere ====
   PRIMARY   = solid fill  (navy on light ground, white on dark ground), no ring
   SECONDARY = outline only (navy outline on light, white outline on dark)
   Applies to every mk-btn variant, atomic and legacy Elementor buttons alike. */
.elementor .mk-btn-gold:not(.elementor-widget-button),
.elementor .mk-btn-gold .elementor-button,
.elementor .mk-btn-navy:not(.elementor-widget-button),
.elementor .mk-btn-navy .elementor-button,
.elementor .mk-btn-navy-grad:not(.elementor-widget-button),
.elementor .mk-btn-navy-grad .elementor-button {
  background-color: #062b6f !important; background-image: none !important; color: #fff !important;
  border: 2px solid #062b6f !important; box-shadow: 0 10px 24px -12px rgba(6, 43, 111, 0.55) !important;
}
.elementor .mk-btn-gold:not(.elementor-widget-button):hover,
.elementor .mk-btn-gold .elementor-button:hover,
.elementor .mk-btn-navy:not(.elementor-widget-button):hover,
.elementor .mk-btn-navy .elementor-button:hover,
.elementor .mk-btn-navy-grad:not(.elementor-widget-button):hover,
.elementor .mk-btn-navy-grad .elementor-button:hover {
  background-color: #013c80 !important; border-color: #013c80 !important; color: #fff !important;
}
.elementor .mk-btn-glass:not(.elementor-widget-button),
.elementor .mk-btn-glass .elementor-button,
.elementor .mk-btn-outline:not(.elementor-widget-button),
.elementor .mk-btn-outline .elementor-button,
.elementor .mk-btn-outline-light:not(.elementor-widget-button),
.elementor .mk-btn-outline-light .elementor-button {
  background-color: transparent !important; background-image: none !important; color: #062b6f !important;
  border: 2px solid #062b6f !important; box-shadow: none !important; backdrop-filter: none !important;
}
.elementor .mk-btn-glass:not(.elementor-widget-button):hover,
.elementor .mk-btn-glass .elementor-button:hover,
.elementor .mk-btn-outline:not(.elementor-widget-button):hover,
.elementor .mk-btn-outline .elementor-button:hover,
.elementor .mk-btn-outline-light:not(.elementor-widget-button):hover,
.elementor .mk-btn-outline-light .elementor-button:hover {
  background-color: rgba(6, 43, 111, 0.07) !important; border-color: #062b6f !important; color: #062b6f !important;
}
body:not(.light-hero) .elementor .mk-hero .mk-btn-gold:not(.elementor-widget-button),
body:not(.light-hero) .elementor .mk-hero .mk-btn-gold .elementor-button,
body:not(.light-hero) .elementor .mk-hero .mk-btn-navy:not(.elementor-widget-button),
body:not(.light-hero) .elementor .mk-hero .mk-btn-navy .elementor-button,
body:not(.light-hero) .elementor .mk-hero .mk-btn-navy-grad:not(.elementor-widget-button),
body:not(.light-hero) .elementor .mk-hero .mk-btn-navy-grad .elementor-button,
.elementor .mk-closing-copy .mk-btn-gold:not(.elementor-widget-button),
.elementor .mk-closing-copy .mk-btn-gold .elementor-button,
.elementor .mk-closing-copy .mk-btn-navy:not(.elementor-widget-button),
.elementor .mk-closing-copy .mk-btn-navy .elementor-button,
.elementor .mk-closing-copy .mk-btn-navy-grad:not(.elementor-widget-button),
.elementor .mk-closing-copy .mk-btn-navy-grad .elementor-button,
.elementor .mk-about-hero .mk-btn-gold:not(.elementor-widget-button),
.elementor .mk-about-hero .mk-btn-gold .elementor-button,
.elementor .mk-about-hero .mk-btn-navy:not(.elementor-widget-button),
.elementor .mk-about-hero .mk-btn-navy .elementor-button,
.elementor .mk-about-hero .mk-btn-navy-grad:not(.elementor-widget-button),
.elementor .mk-about-hero .mk-btn-navy-grad .elementor-button,
.elementor .mk-ah-inner .mk-btn-gold:not(.elementor-widget-button),
.elementor .mk-ah-inner .mk-btn-gold .elementor-button,
.elementor .mk-ah-inner .mk-btn-navy:not(.elementor-widget-button),
.elementor .mk-ah-inner .mk-btn-navy .elementor-button,
.elementor .mk-ah-inner .mk-btn-navy-grad:not(.elementor-widget-button),
.elementor .mk-ah-inner .mk-btn-navy-grad .elementor-button,
.elementor .mk-fh-inner .mk-btn-gold:not(.elementor-widget-button),
.elementor .mk-fh-inner .mk-btn-gold .elementor-button,
.elementor .mk-fh-inner .mk-btn-navy:not(.elementor-widget-button),
.elementor .mk-fh-inner .mk-btn-navy .elementor-button,
.elementor .mk-fh-inner .mk-btn-navy-grad:not(.elementor-widget-button),
.elementor .mk-fh-inner .mk-btn-navy-grad .elementor-button,
.elementor .mk-bh-inner .mk-btn-gold:not(.elementor-widget-button),
.elementor .mk-bh-inner .mk-btn-gold .elementor-button,
.elementor .mk-bh-inner .mk-btn-navy:not(.elementor-widget-button),
.elementor .mk-bh-inner .mk-btn-navy .elementor-button,
.elementor .mk-bh-inner .mk-btn-navy-grad:not(.elementor-widget-button),
.elementor .mk-bh-inner .mk-btn-navy-grad .elementor-button,
.elementor .mk-split-hero .mk-btn-gold:not(.elementor-widget-button),
.elementor .mk-split-hero .mk-btn-gold .elementor-button,
.elementor .mk-split-hero .mk-btn-navy:not(.elementor-widget-button),
.elementor .mk-split-hero .mk-btn-navy .elementor-button,
.elementor .mk-split-hero .mk-btn-navy-grad:not(.elementor-widget-button),
.elementor .mk-split-hero .mk-btn-navy-grad .elementor-button {
  background-color: #fff !important; background-image: none !important; color: #062b6f !important;
  border: 2px solid #fff !important; box-shadow: 0 10px 26px -14px rgba(4, 22, 52, 0.55) !important;
}
body:not(.light-hero) .elementor .mk-hero .mk-btn-gold:not(.elementor-widget-button):hover,
body:not(.light-hero) .elementor .mk-hero .mk-btn-gold .elementor-button:hover,
body:not(.light-hero) .elementor .mk-hero .mk-btn-navy:not(.elementor-widget-button):hover,
body:not(.light-hero) .elementor .mk-hero .mk-btn-navy .elementor-button:hover,
body:not(.light-hero) .elementor .mk-hero .mk-btn-navy-grad:not(.elementor-widget-button):hover,
body:not(.light-hero) .elementor .mk-hero .mk-btn-navy-grad .elementor-button:hover,
.elementor .mk-closing-copy .mk-btn-gold:not(.elementor-widget-button):hover,
.elementor .mk-closing-copy .mk-btn-gold .elementor-button:hover,
.elementor .mk-closing-copy .mk-btn-navy:not(.elementor-widget-button):hover,
.elementor .mk-closing-copy .mk-btn-navy .elementor-button:hover,
.elementor .mk-closing-copy .mk-btn-navy-grad:not(.elementor-widget-button):hover,
.elementor .mk-closing-copy .mk-btn-navy-grad .elementor-button:hover,
.elementor .mk-about-hero .mk-btn-gold:not(.elementor-widget-button):hover,
.elementor .mk-about-hero .mk-btn-gold .elementor-button:hover,
.elementor .mk-about-hero .mk-btn-navy:not(.elementor-widget-button):hover,
.elementor .mk-about-hero .mk-btn-navy .elementor-button:hover,
.elementor .mk-about-hero .mk-btn-navy-grad:not(.elementor-widget-button):hover,
.elementor .mk-about-hero .mk-btn-navy-grad .elementor-button:hover,
.elementor .mk-ah-inner .mk-btn-gold:not(.elementor-widget-button):hover,
.elementor .mk-ah-inner .mk-btn-gold .elementor-button:hover,
.elementor .mk-ah-inner .mk-btn-navy:not(.elementor-widget-button):hover,
.elementor .mk-ah-inner .mk-btn-navy .elementor-button:hover,
.elementor .mk-ah-inner .mk-btn-navy-grad:not(.elementor-widget-button):hover,
.elementor .mk-ah-inner .mk-btn-navy-grad .elementor-button:hover,
.elementor .mk-fh-inner .mk-btn-gold:not(.elementor-widget-button):hover,
.elementor .mk-fh-inner .mk-btn-gold .elementor-button:hover,
.elementor .mk-fh-inner .mk-btn-navy:not(.elementor-widget-button):hover,
.elementor .mk-fh-inner .mk-btn-navy .elementor-button:hover,
.elementor .mk-fh-inner .mk-btn-navy-grad:not(.elementor-widget-button):hover,
.elementor .mk-fh-inner .mk-btn-navy-grad .elementor-button:hover,
.elementor .mk-bh-inner .mk-btn-gold:not(.elementor-widget-button):hover,
.elementor .mk-bh-inner .mk-btn-gold .elementor-button:hover,
.elementor .mk-bh-inner .mk-btn-navy:not(.elementor-widget-button):hover,
.elementor .mk-bh-inner .mk-btn-navy .elementor-button:hover,
.elementor .mk-bh-inner .mk-btn-navy-grad:not(.elementor-widget-button):hover,
.elementor .mk-bh-inner .mk-btn-navy-grad .elementor-button:hover,
.elementor .mk-split-hero .mk-btn-gold:not(.elementor-widget-button):hover,
.elementor .mk-split-hero .mk-btn-gold .elementor-button:hover,
.elementor .mk-split-hero .mk-btn-navy:not(.elementor-widget-button):hover,
.elementor .mk-split-hero .mk-btn-navy .elementor-button:hover,
.elementor .mk-split-hero .mk-btn-navy-grad:not(.elementor-widget-button):hover,
.elementor .mk-split-hero .mk-btn-navy-grad .elementor-button:hover {
  background-color: #f1f6fc !important; border-color: #f1f6fc !important; color: #062b6f !important;
}
body:not(.light-hero) .elementor .mk-hero .mk-btn-glass:not(.elementor-widget-button),
body:not(.light-hero) .elementor .mk-hero .mk-btn-glass .elementor-button,
body:not(.light-hero) .elementor .mk-hero .mk-btn-outline:not(.elementor-widget-button),
body:not(.light-hero) .elementor .mk-hero .mk-btn-outline .elementor-button,
body:not(.light-hero) .elementor .mk-hero .mk-btn-outline-light:not(.elementor-widget-button),
body:not(.light-hero) .elementor .mk-hero .mk-btn-outline-light .elementor-button,
.elementor .mk-closing-copy .mk-btn-glass:not(.elementor-widget-button),
.elementor .mk-closing-copy .mk-btn-glass .elementor-button,
.elementor .mk-closing-copy .mk-btn-outline:not(.elementor-widget-button),
.elementor .mk-closing-copy .mk-btn-outline .elementor-button,
.elementor .mk-closing-copy .mk-btn-outline-light:not(.elementor-widget-button),
.elementor .mk-closing-copy .mk-btn-outline-light .elementor-button,
.elementor .mk-about-hero .mk-btn-glass:not(.elementor-widget-button),
.elementor .mk-about-hero .mk-btn-glass .elementor-button,
.elementor .mk-about-hero .mk-btn-outline:not(.elementor-widget-button),
.elementor .mk-about-hero .mk-btn-outline .elementor-button,
.elementor .mk-about-hero .mk-btn-outline-light:not(.elementor-widget-button),
.elementor .mk-about-hero .mk-btn-outline-light .elementor-button,
.elementor .mk-ah-inner .mk-btn-glass:not(.elementor-widget-button),
.elementor .mk-ah-inner .mk-btn-glass .elementor-button,
.elementor .mk-ah-inner .mk-btn-outline:not(.elementor-widget-button),
.elementor .mk-ah-inner .mk-btn-outline .elementor-button,
.elementor .mk-ah-inner .mk-btn-outline-light:not(.elementor-widget-button),
.elementor .mk-ah-inner .mk-btn-outline-light .elementor-button,
.elementor .mk-fh-inner .mk-btn-glass:not(.elementor-widget-button),
.elementor .mk-fh-inner .mk-btn-glass .elementor-button,
.elementor .mk-fh-inner .mk-btn-outline:not(.elementor-widget-button),
.elementor .mk-fh-inner .mk-btn-outline .elementor-button,
.elementor .mk-fh-inner .mk-btn-outline-light:not(.elementor-widget-button),
.elementor .mk-fh-inner .mk-btn-outline-light .elementor-button,
.elementor .mk-bh-inner .mk-btn-glass:not(.elementor-widget-button),
.elementor .mk-bh-inner .mk-btn-glass .elementor-button,
.elementor .mk-bh-inner .mk-btn-outline:not(.elementor-widget-button),
.elementor .mk-bh-inner .mk-btn-outline .elementor-button,
.elementor .mk-bh-inner .mk-btn-outline-light:not(.elementor-widget-button),
.elementor .mk-bh-inner .mk-btn-outline-light .elementor-button,
.elementor .mk-split-hero .mk-btn-glass:not(.elementor-widget-button),
.elementor .mk-split-hero .mk-btn-glass .elementor-button,
.elementor .mk-split-hero .mk-btn-outline:not(.elementor-widget-button),
.elementor .mk-split-hero .mk-btn-outline .elementor-button,
.elementor .mk-split-hero .mk-btn-outline-light:not(.elementor-widget-button),
.elementor .mk-split-hero .mk-btn-outline-light .elementor-button {
  background-color: rgba(255, 255, 255, 0.04) !important; background-image: none !important; color: #fff !important;
  border: 2px solid rgba(255, 255, 255, 0.85) !important; box-shadow: none !important; backdrop-filter: none !important;
}
body:not(.light-hero) .elementor .mk-hero .mk-btn-glass:not(.elementor-widget-button):hover,
body:not(.light-hero) .elementor .mk-hero .mk-btn-glass .elementor-button:hover,
body:not(.light-hero) .elementor .mk-hero .mk-btn-outline:not(.elementor-widget-button):hover,
body:not(.light-hero) .elementor .mk-hero .mk-btn-outline .elementor-button:hover,
body:not(.light-hero) .elementor .mk-hero .mk-btn-outline-light:not(.elementor-widget-button):hover,
body:not(.light-hero) .elementor .mk-hero .mk-btn-outline-light .elementor-button:hover,
.elementor .mk-closing-copy .mk-btn-glass:not(.elementor-widget-button):hover,
.elementor .mk-closing-copy .mk-btn-glass .elementor-button:hover,
.elementor .mk-closing-copy .mk-btn-outline:not(.elementor-widget-button):hover,
.elementor .mk-closing-copy .mk-btn-outline .elementor-button:hover,
.elementor .mk-closing-copy .mk-btn-outline-light:not(.elementor-widget-button):hover,
.elementor .mk-closing-copy .mk-btn-outline-light .elementor-button:hover,
.elementor .mk-about-hero .mk-btn-glass:not(.elementor-widget-button):hover,
.elementor .mk-about-hero .mk-btn-glass .elementor-button:hover,
.elementor .mk-about-hero .mk-btn-outline:not(.elementor-widget-button):hover,
.elementor .mk-about-hero .mk-btn-outline .elementor-button:hover,
.elementor .mk-about-hero .mk-btn-outline-light:not(.elementor-widget-button):hover,
.elementor .mk-about-hero .mk-btn-outline-light .elementor-button:hover,
.elementor .mk-ah-inner .mk-btn-glass:not(.elementor-widget-button):hover,
.elementor .mk-ah-inner .mk-btn-glass .elementor-button:hover,
.elementor .mk-ah-inner .mk-btn-outline:not(.elementor-widget-button):hover,
.elementor .mk-ah-inner .mk-btn-outline .elementor-button:hover,
.elementor .mk-ah-inner .mk-btn-outline-light:not(.elementor-widget-button):hover,
.elementor .mk-ah-inner .mk-btn-outline-light .elementor-button:hover,
.elementor .mk-fh-inner .mk-btn-glass:not(.elementor-widget-button):hover,
.elementor .mk-fh-inner .mk-btn-glass .elementor-button:hover,
.elementor .mk-fh-inner .mk-btn-outline:not(.elementor-widget-button):hover,
.elementor .mk-fh-inner .mk-btn-outline .elementor-button:hover,
.elementor .mk-fh-inner .mk-btn-outline-light:not(.elementor-widget-button):hover,
.elementor .mk-fh-inner .mk-btn-outline-light .elementor-button:hover,
.elementor .mk-bh-inner .mk-btn-glass:not(.elementor-widget-button):hover,
.elementor .mk-bh-inner .mk-btn-glass .elementor-button:hover,
.elementor .mk-bh-inner .mk-btn-outline:not(.elementor-widget-button):hover,
.elementor .mk-bh-inner .mk-btn-outline .elementor-button:hover,
.elementor .mk-bh-inner .mk-btn-outline-light:not(.elementor-widget-button):hover,
.elementor .mk-bh-inner .mk-btn-outline-light .elementor-button:hover,
.elementor .mk-split-hero .mk-btn-glass:not(.elementor-widget-button):hover,
.elementor .mk-split-hero .mk-btn-glass .elementor-button:hover,
.elementor .mk-split-hero .mk-btn-outline:not(.elementor-widget-button):hover,
.elementor .mk-split-hero .mk-btn-outline .elementor-button:hover,
.elementor .mk-split-hero .mk-btn-outline-light:not(.elementor-widget-button):hover,
.elementor .mk-split-hero .mk-btn-outline-light .elementor-button:hover {
  background-color: rgba(255, 255, 255, 0.16) !important; border-color: #fff !important; color: #fff !important;
}
.elementor .mk-btn .elementor-button-text, .elementor .mk-btn .elementor-button-content-wrapper { color: inherit !important; }

/* ==== Header nav: no pill/shadow at rest; pill only on hover or while the menu is open ==== */
.site-header .nav .nav-trigger, .site-header .nav a { background: transparent !important; box-shadow: none !important; border: 0 !important; }
.site-header .nav .nav-trigger:hover, .site-header .nav .has-menu:hover > .nav-trigger, .site-header .nav .has-menu:focus-within > .nav-trigger, .site-header .nav .nav-trigger[aria-expanded="true"], .site-header .nav a:hover { background: var(--mist, #f0f3f8) !important; color: var(--navy-900, #062b6f); }

/* ==== Mobile footer: link lists in columns instead of one long stack ==== */
@media (max-width: 640px) {
  .site-footer .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 28px; }
  .site-footer .footer-inner > div:first-child { grid-column: 1 / -1; }
  .site-footer .footer-col:last-child { grid-column: 1 / -1; }
  .site-footer .footer-col:last-child ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 9px; }
  .site-footer .footer-col:last-child li + li { margin-top: 0; }
  .site-footer .footer-col h3 { margin-bottom: 8px; }
  .site-footer .footer-col li + li { margin-top: 0; }
  .site-footer .footer-col a { padding: 6px 0; line-height: 1.35; }
}

/* ==== Footer verse: centred in the copyright row ==== */
.site-footer .footer-verse { margin: 0; text-align: center; font-size: 0.86rem; font-weight: 500; letter-spacing: 0.08em; color: rgba(235, 242, 246, 0.78); }
@media (min-width: 641px) {
  .site-footer .footer-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .site-footer .footer-bottom .footer-legal { justify-self: end; }
}
@media (max-width: 640px) {
  .site-footer .footer-bottom .footer-verse { align-self: center; }
}

/* ==== Footer disclaimer on a single line (wide screens) ==== */
@media (min-width: 1200px) {
  .site-footer .footer-disclaimer p { max-width: none; white-space: nowrap; font-size: 0.7rem; letter-spacing: 0; }
}

/* ==== Footer disclaimer: centred, equal space above and below ==== */
.site-footer .footer-disclaimer { margin-top: 0; padding-top: 18px; padding-bottom: 14px; text-align: center; }
.site-footer .footer-disclaimer p { margin-left: auto; margin-right: auto; text-align: center; }

/* ==== Capability rows (e.g. Documents): one column on phones, no orphan on tablets ==== */
@media (max-width: 620px) {
  .elementor .mk-capability-row { grid-template-columns: minmax(0, 1fr) !important; row-gap: 0 !important; }
  .elementor .mk-capability-row > .mk-li { padding: 22px 8px !important; border-left: 0 !important; background-image: none !important; }
  .elementor .mk-capability-row > .mk-li + .mk-li { border-top: 1px solid rgba(201, 171, 99, 0.4) !important; }
  .elementor .mk-capability-row > .mk-li:first-child { padding-top: 6px !important; }
}
@media (min-width: 621px) and (max-width: 1080px) {
  .elementor .mk-capability-row > .mk-li:nth-child(3):last-child { grid-column: 1 / -1; border-left: 0 !important; background-image: none !important; }
}

/* ==== Contact note links: no dangling divider when the row wraps on phones ==== */
@media (max-width: 560px) {
  .elementor .mk-note-legal .elementor-element-5d1a7c2 { display: none; }
}

/* ==== Contact form note link ==== */
.elementor .mk-form-card .elementor-element-fccfe84 a { color: #062b6f; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(201, 171, 99, 0.9); }
.elementor .mk-form-card .elementor-element-fccfe84 a:hover { color: #005b9e; }

/* ==== Mobile footer: Lakewood & University Place last in Service Area ==== */
@media (max-width: 640px) {
  .site-footer .footer-col:last-child li:nth-child(2) { order: 99; }
}

/* ==== Booking form: hidden estimate field (filled by the estimator) ==== */
.wpforms-field.mkf-estimate { display: none !important; }

/* ==== Hero badge: centre the gold dot vertically against the label ==== */
.elementor .mk-badge-dot { align-items: center; }
.elementor .mk-badge-dot::before { flex: 0 0 auto; margin-right: 8px; }

/* ==== Contact: space between stacked 'Other ways to reach us' cards on phones ==== */
@media (max-width: 767px) {
  .elementor .mk-reach-row { --row-gap: 28px; row-gap: 28px; }
}

/* ==== Service page collage: the price chip sits on the photo's top-left corner, like the status chip on the other photo ==== */
.elementor .mk-spot-art .mk-spot-chip--tag { top: calc(32% - 21px); left: 0; }

.elementor .mk-spot-art .mk-spot-chip--tag { white-space: nowrap; }