/* ==========================================================================
   One Stop Tax Filers — Design System
   Premium enterprise stylesheet. No build step; custom properties + modern CSS.
   ========================================================================== */

:root {
  /* Color tokens — One Stop navy + crimson */
  --navy: #0B3162;          /* brand navy (headings, dark bands) */
  --navy-800: #071F40;
  --navy-700: #12407A;
  --blue: #CF1A4B;          /* brand crimson (buttons, links, icons) */
  --blue-600: #B01540;
  --blue-050: #FCE8EE;      /* light crimson tint (icon tiles) */
  --gold: #FFB15D;          /* warm accent (on navy) */
  --gold-050: #FFF4E6;
  --green-deep: #0B3162;
  --sage: #FFB15D;
  --cream: #F5F7FA;
  --silver: #CBD5E1;
  --white: #FFFFFF;
  --section: #F5F7FA;
  --ink: #13233A;
  --muted: #4A5567;
  --muted-2: #6B7689;
  --border: #E2E8F0;
  --border-2: #EEF2F6;

  /* Typography — Plus Jakarta Sans everywhere */
  --font-serif: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-logo: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  /* Layout */
  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 40px);
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Shadows — soft, premium */
  --shadow-xs: 0 1px 2px rgba(11,49,98, 0.05);
  --shadow-sm: 0 2px 8px rgba(11,49,98, 0.07);
  --shadow-md: 0 10px 30px rgba(11,49,98, 0.09);
  --shadow-lg: 0 24px 60px rgba(11,49,98, 0.14);
  --shadow-blue: 0 12px 30px rgba(207,26,75, 0.28);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.5s;
}

/* ---------- Reset-ish base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* prevent stray horizontal scroll; NOT on <html> — that breaks the iOS fixed nav drawer */
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
/* fallback size: an unsized inline SVG otherwise defaults to 300x150 and wrecks layout */
svg { width: 1em; height: 1em; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--navy);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 700;
}
h1 { font-size: clamp(1.85rem, 3.6vw, 3.1rem); font-weight: 700; line-height: 1.14; }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
h3 { font-size: clamp(1.12rem, 1.6vw, 1.3rem); font-weight: 600; }
p { margin: 0 0 1rem; color: var(--muted); }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: clamp(46px, 6vw, 74px); }
.section--tight { padding-block: clamp(36px, 4.5vw, 56px); }
.section--bg { background: var(--section); }
.section--navy { background: var(--navy); color: #dbe4f2; }
.section--navy h2, .section--navy h3 { color: #fff; }
.narrow { max-width: 760px; }
.center { text-align: center; margin-inline: auto; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
.section--navy .eyebrow { color: var(--gold); }
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.section-head { max-width: 720px; margin-bottom: clamp(30px, 3.8vw, 46px); }
.section-head.center { margin-inline: auto; max-width: 780px; }
.section-head h2 {
  margin-top: 14px;
  letter-spacing: -0.015em;
  text-wrap: balance;          /* keeps the two lines evenly weighted */
}
.section-head p {
  margin-top: 14px; margin-bottom: 0;
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 60ch;
}
.section-head.center p { margin-inline: auto; }
/* Centred heads get a symmetrical eyebrow (rule on both sides) and a small
   accent under the title. */
.section-head.center .eyebrow::after {
  content: "";
  width: 26px; height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.section-head.center h2::after {
  content: "";
  display: block;
  width: 54px; height: 3px;
  margin: 16px auto 0;
  background: var(--gold);
  border-radius: 3px;
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--blue);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.2s, color 0.2s, border-color 0.2s;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-blue); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid rgba(207,26,75,0.4); outline-offset: 2px; }
/* ripple */
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.5) 10%, transparent 10.5%);
  background-position: center;
  background-size: 220%;
  opacity: 0;
  transition: opacity 0.5s, background-size 0.5s;
  z-index: -1;
}
.btn:active::after { background-size: 0%; opacity: 1; transition: 0s; }

.btn--gold { --btn-bg: var(--blue); --btn-fg: #fff; }
.btn--gold:hover { --btn-bg: var(--blue-600); box-shadow: 0 12px 30px rgba(207,26,75,0.35); }
.btn--dark { --btn-bg: var(--navy); --btn-fg: #fff; }
.btn--dark:hover { box-shadow: var(--shadow-lg); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--navy);
  border-color: var(--border);
}
.btn--ghost:hover { --btn-fg: var(--blue); border-color: var(--blue); box-shadow: var(--shadow-sm); }
/* On dark grounds the ghost button needs light text — without this its navy
   label disappears into the background. */
.section--navy .btn--ghost,
.page-hero .btn--ghost,
.cta-inner .btn--ghost {
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.section--navy .btn--ghost:hover,
.page-hero .btn--ghost:hover,
.cta-inner .btn--ghost:hover {
  --btn-fg: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.10);
  box-shadow: none;
}
.btn--lg { padding: 17px 34px; font-size: 1.05rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--blue);
}
.link-arrow svg { width: 17px; height: 17px; transition: transform 0.25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Top contact bar (above the sticky header; scrolls away) ---------- */
.topbar { background: var(--navy-800); color: #C9D3E1; font-size: .82rem; }
.topbar__in { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; min-height: 40px; }
.topbar a, .topbar__badge { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.topbar a { color: #E2E8F0; transition: color .2s; }
.topbar a:hover { color: #fff; }
.topbar b { font-size: .7rem; font-weight: 800; letter-spacing: .06em; color: var(--gold); }
.topbar svg { width: 14px; height: 14px; color: var(--gold); }
.topbar__badge { margin-left: auto; font-weight: 600; }
@media (max-width: 1080px) { .topbar .topbar__mail { display: none; } }
@media (max-width: 760px) {
  .topbar__badge, .topbar a[data-fixed-phone] { display: none; }
  .topbar__in { justify-content: center; }
}

/* ---------- Header / Nav ---------- */
/* Clean white bar: the logo (on a white background) sits flush, the menu is a
   centred pill group, and the bar slims down with a soft shadow once scrolled. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(13,48,94,0.08);
  transition: box-shadow 0.3s, border-color 0.3s, background 0.3s;
}
.site-header.is-stuck {
  background: rgba(255,255,255,0.95);
  border-color: transparent;
  box-shadow: 0 10px 30px -14px rgba(13,48,94,0.35);
}
.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  /* min-height, not height: a taller logo grows the header instead of
     overflowing the bar. align-items:center keeps the logo, menu and CTA
     vertically centred however tall the bar gets. */
  min-height: var(--nav-h, 92px);
  transition: min-height 0.3s var(--ease);
}
.site-header.is-stuck .nav { min-height: 72px; }
/* ---- Emblem + wordmark logo ---- */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); }
.brand__logo {
  height: var(--logo-h, 68px); width: auto; flex: none;
  display: block;
  transition: height 0.3s var(--ease);
}
.site-header.is-stuck .brand__logo { height: calc(var(--logo-h, 68px) * 0.78); }
/* The uploaded logo is a JPG on a near-white square — multiply drops that
   square into the white bar so only the mark shows. */
.site-header .brand__logo { mix-blend-mode: multiply; filter: brightness(1.02); }
/* Name beside the header logo — text set in Admin → Settings (blank hides it). */
.site-header .brand__wordmark { display: block; padding-left: 14px; border-left: 1px solid var(--border); }
.site-header .brand__wordmark strong {
  font-family: var(--font-head); font-size: 1.28rem; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.1; color: var(--navy); white-space: nowrap;
}
.site-header .brand__wordmark small {
  margin-top: 4px; padding-top: 0; border-top: 0;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.01em; text-transform: none; color: var(--muted);
}
.site-header .brand__wordmark[hidden], .site-header .brand__wordmark small[hidden] { display: none; }
.brand__emblem {
  width: 52px; height: 62px; flex: none;
  display: grid; place-items: center;
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 2px;
  color: #fff;
}
.brand__emblem svg { width: 30px; height: 34px; }
.brand__wordmark { display: inline-block; padding-left: 12px; border-left: 1px solid rgba(255,255,255,0.22); }
.brand__wordmark strong {
  display: block;
  font-family: var(--font-logo);
  font-weight: 500; font-size: 1.75rem;
  letter-spacing: 0.14em; line-height: 0.95;
  color: #fff;
}
.brand__wordmark em {
  display: block; font-style: normal;
  font-family: var(--font-head);
  font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.3em; color: #CEDEF3;
  margin-top: 4px;
}
.brand__wordmark small {
  display: block;
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #9DA7B4; margin-top: 5px;
  border-top: 1px solid rgba(255,255,255,0.25); padding-top: 5px;
}
.nav__cta .link-arrow { color: var(--blue); }
.nav__cta .link-arrow:hover { color: var(--navy); }
/* Client Portal button — solid purple pill */
.btn--portal {
  --btn-bg: var(--blue);
  --btn-fg: #fff;
  padding: 12px 22px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 8px 20px -8px rgba(20,82,164,0.65);
}
.btn--portal svg { width: 17px; height: 17px; }
.btn--portal:hover { --btn-bg: var(--navy); box-shadow: 0 14px 28px -10px rgba(20,82,164,0.75); }

.nav__panel { display: contents; } /* children join the nav flex row on desktop; becomes a drawer on mobile */
/* Menu: one soft pill group centred between logo and CTA */
.nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline: auto;
  padding: 5px;
  background: #F3F6FB;
  border: 1px solid #E5ECF5;
  border-radius: var(--radius-pill);
}
.nav__links > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 17px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 0.93rem;
  color: #4B4553;
  transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.nav__links > li > a:hover { color: var(--blue); background: rgba(20,82,164,0.07); }
.nav__links > li > a[aria-current="page"] {
  color: var(--blue);
  font-weight: 600;
  background: #fff;
  box-shadow: 0 2px 10px -3px rgba(13,48,94,0.22), 0 0 0 1px rgba(13,48,94,0.05);
}
.nav__cta { display: inline-flex; align-items: center; gap: 12px; }

/* dropdown */
.has-menu { position: relative; }
.has-menu > a svg { width: 15px; height: 15px; transition: transform 0.2s; }
.has-menu:hover > a svg, .has-menu:focus-within > a svg { transform: rotate(180deg); }
.dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  transform: translateY(8px);
  width: 240px;
  background: #fff;
  border: 1px solid #E5ECF5;
  border-radius: 16px;
  box-shadow: 0 28px 60px -18px rgba(13,48,94,0.3);
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.has-menu:hover .dropdown, .has-menu:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* invisible bridge over the gap, so the menu stays open on the way down */
.has-menu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.dropdown a {
  display: block;
  padding: 12px 14px;
  border-radius: 6px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  transition: background 0.18s, color 0.18s;
}
.dropdown a:hover { background: var(--blue-050); color: var(--blue); }

/* mega dropdown: Individual | Business columns */
.dropdown--mega {
  width: 640px;
  grid-template-columns: 1fr 1fr;
  gap: 4px 22px;
  padding: 18px 16px;
}
.dropdown__col h4 {
  font-family: var(--font-head);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--blue);
  padding: 4px 12px 10px;
  margin: 0 0 4px;
  border-bottom: 1px solid var(--border);
}
.dropdown__col a { font-size: 0.85rem; padding: 9px 12px; font-weight: 500; }

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  border: 1px solid #E5ECF5;
  border-radius: 12px;
  background: #F3F6FB;
  color: var(--blue);
  place-items: center;
}
.nav__toggle svg { width: 22px; height: 22px; }
.nav__toggle .ic-close { display: none; }
body.nav-open .nav__toggle .ic-open { display: none; }
body.nav-open .nav__toggle .ic-close { display: block; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 96px); }
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero__eyebrow { margin-bottom: 22px; }
.hero h1 { margin-bottom: 22px; }
.hero__lead { font-size: 1.18rem; max-width: 40ch; margin-bottom: 30px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 22px 30px; }
.hero__badge { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 0.92rem; color: var(--navy); }
.hero__badge svg { width: 20px; height: 20px; color: var(--blue); flex: none; }

.hero__media { position: relative; }
.hero__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/5;
  object-fit: cover;
}
.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  animation: floaty 6s ease-in-out infinite;
}
.float-card__ic {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--blue-050); color: var(--blue);
}
.float-card__ic svg { width: 21px; height: 21px; }
.float-card--gold .float-card__ic { background: var(--gold-050); color: var(--blue); }
.float-card strong { display: block; font-family: var(--font-head); font-size: 0.95rem; color: var(--navy); }
.float-card span { display: block; font-size: 0.78rem; color: var(--muted-2); }
.float-card.f1 { top: 6%; left: -22px; }
.float-card.f2 { bottom: 16%; right: -20px; animation-delay: -2s; }
.float-card.f3 { bottom: -18px; left: 12%; animation-delay: -4s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ---------- Utility top bar ---------- */
.topbar { background: var(--navy); color: #b9c5da; font-size: 0.84rem; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; }
.topbar a { color: #cdd8ec; transition: color 0.2s; }
.topbar a:hover { color: #fff; }
.topbar__left, .topbar__right { display: flex; align-items: center; gap: 24px; }
.topbar__item { display: inline-flex; align-items: center; gap: 8px; }
.topbar__item svg { width: 15px; height: 15px; color: var(--gold); flex: none; }
.topbar__socials { display: inline-flex; gap: 12px; }
.topbar__socials a { display: inline-grid; place-items: center; color: #9fb0cc; }
.topbar__socials a:hover { color: #fff; }
.topbar__socials svg { width: 16px; height: 16px; }
@media (max-width: 820px) { .topbar__hours { display: none; } }
@media (max-width: 620px) { .topbar__email, .topbar__socials { display: none; } .topbar__inner { justify-content: center; } .topbar__right { display: none; } }

/* ---------- Banner slider (homepage hero replacement) ---------- */
/* Banner stage is a fixed 1280x500 (2.56:1). It scales down proportionally on
   narrower screens, so the height never jumps between slides of differing sizes. */
.bslider {
  position: relative;
  /* Full-bleed, like the header — a capped width left white gaps at the sides
     that read as the banner being cut off. */
  width: 100%;
  /* The default ratio reserves the banner's space from the very first paint, so
     the sections below never jump up while the image is loading. main.js then
     overrides --bslider-ratio with the banner's real proportions. */
  aspect-ratio: var(--bslider-ratio, 1920 / 830);
  overflow: hidden;
  background: #fff;
}
/* Quiet placeholder shown only until the first banner is ready. */
.bslider.is-loading {
  background: linear-gradient(100deg, #EEF0F2 30%, #f7faf8 50%, #EEF0F2 70%) #EEF0F2;
  background-size: 200% 100%;
  animation: bsliderShimmer 1.4s ease-in-out infinite;
}
@keyframes bsliderShimmer {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bslider.is-loading { animation: none; }
}
.bslider__track {
  display: flex;
  align-items: stretch;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
/* Set while snapping from the cloned slide back to the real one. */
.bslider__track.is-instant { transition: none; }
.bslider__slide { position: relative; flex: 0 0 100%; height: 100%; }
/* contain, not cover: the whole banner is always visible and nothing is
   trimmed. A banner that is exactly 1280x500 fills the stage edge to edge. */
.bslider__slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bslider__slide a { display: block; height: 100%; }
.bslider__dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 9px; z-index: 2; }
.bslider__dot { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.55); cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
.bslider__dot.is-active { background: #fff; transform: scale(1.25); }
.bslider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(18,73,144,0.45); color: #fff; display: grid; place-items: center;
  transition: background .2s;
}
.bslider__arrow:hover { background: rgba(18,73,144,0.75); }
.bslider__arrow svg { width: 22px; height: 22px; }
.bslider__arrow--prev { left: 14px; }
.bslider__arrow--next { right: 14px; }
@media (max-width: 640px) { .bslider__arrow { width: 34px; height: 34px; } .bslider__arrow svg { width: 18px; height: 18px; } }

/* ---------- Royal hero (luxury green, full-bleed image) ---------- */
.hero--royal {
  position: relative;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(44px, 5vw, 72px);
  overflow: hidden;
  isolation: isolate;
}
/* subtle dot texture, top-left (matches reference) */
.hero--royal::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 190px; height: 150px;
  background-image: radial-gradient(#A6C3E9 1.3px, transparent 1.3px);
  background-size: 13px 13px;
  opacity: 0.75;
  pointer-events: none;
}
.hero--royal .container { position: relative; z-index: 2; }
.hero--royal .hero__content { max-width: 610px; }

/* image bleeds off the right edge and feathers into the background */
.hero__bg {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 56%;
  z-index: 1;
}
.hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--cream) 0%, rgba(245,248,253,0.65) 22%, rgba(245,248,253,0) 46%);
  pointer-events: none;
}

.hero__title { font-size: clamp(1.75rem, 3.6vw, 3rem); line-height: 1.22; letter-spacing: -0.025em; font-weight: 700; color: var(--ink); margin-bottom: 16px; }
.hero__title .accent { color: var(--blue); }

/* kicker: rule — icon + label — rule */
.hero__kicker {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--font-head);
  font-weight: 700; font-size: 0.75rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink);
  margin: 4px 0 16px;
}
.hero__kicker::before, .hero__kicker::after { content: ""; height: 1px; background: #ADC7EA; flex: 1; }
.hero__kicker svg { width: 16px; height: 16px; color: var(--blue); flex: none; }

.hero__tags { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 20px; }
.hero__tags li { font-size: 0.72rem; font-weight: 500; color: var(--muted); padding: 2px 8px; border-left: 1px solid #F5C189; white-space: nowrap; }
.hero__tags li:first-child { padding-left: 0; border-left: none; }
.hero--royal .hero__lead { font-size: 0.98rem; max-width: 42ch; margin-bottom: 26px; color: var(--muted); line-height: 1.7; }
.hero--royal .hero__actions { margin-bottom: 30px; gap: 12px; }

/* rectangular, uppercase hero buttons (reference) */
.hero--royal .btn {
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.76rem;
  padding: 15px 24px;
}
.hero--royal .btn svg { width: 16px; height: 16px; }
.hero--royal .btn--ghost { background: #fff; border-color: #F5C189; }
.hero--royal .btn--ghost:hover { border-color: var(--blue); }

.hero__badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hbadge { display: flex; align-items: center; gap: 10px; }
.hbadge__ic {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 0 0 4px #EEEBE2;
}
.hbadge__ic svg { width: 22px; height: 22px; }
.hbadge strong {
  display: block; font-family: var(--font-head);
  font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink);
}
/* scope to the text wrapper only — `.hbadge span` also matched .hbadge__ic
   (it IS a span) and was overriding the icon's white colour with muted grey */
.hbadge > div span { display: block; font-size: 0.71rem; color: var(--muted-2); margin-top: 2px; }

/* ---------- Business hero (lead-capture) ---------- */
.hero--business { background: var(--section); border-bottom: 1px solid var(--border); padding-block: clamp(36px, 4.5vw, 60px); overflow: visible; }
.hero--business .hero__grid { grid-template-columns: 1.12fr 0.88fr; align-items: start; gap: clamp(28px, 4vw, 56px); }
.hero--business h1 { margin-bottom: 16px; }
.hero--business .hero__lead { font-size: 1.06rem; max-width: 46ch; margin-bottom: 20px; }
.hero__checks { display: grid; gap: 11px; margin: 0 0 26px; }
.hero__checks li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.98rem; color: var(--ink); font-weight: 500; }
.hero__checks li svg { width: 21px; height: 21px; color: var(--blue); flex: none; margin-top: 1px; }
.hero__trustline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.hero__trustline span { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; font-weight: 600; color: var(--navy); }
.hero__trustline svg { width: 18px; height: 18px; color: var(--gold); flex: none; }

/* Quote form card */
.quote-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden; }
.quote-card__head { background: var(--navy); color: #fff; padding: 20px 26px; }
.quote-card__head h2 { color: #fff; font-size: 1.35rem; margin: 0; }
.quote-card__head p { margin: 5px 0 0; font-size: 0.88rem; color: #b7c4da; }
.quote-card form { padding: 22px 26px 26px; }
.quote-card .field { margin-bottom: 13px; }
.quote-card .field input, .quote-card .field select { padding: 11px 13px; border-radius: 9px; font-size: 0.95rem; }
.quote-card .field label { font-size: 0.82rem; margin-bottom: 5px; }
.quote-card .form-note { margin-top: 10px; }

/* ---------- Trust bar ---------- */
.trustbar { border-block: 1px solid var(--border); background: #fff; }
.trustbar__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding-block: 26px;
}
.trust-item { display: flex; align-items: center; gap: 11px; }
.trust-item svg { width: 24px; height: 24px; color: var(--blue); flex: none; }
.trust-item span { font-family: var(--font-head); font-weight: 700; font-size: 0.9rem; color: var(--navy); line-height: 1.25; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 24px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #dfe4ee; }

.service-card { display: flex; flex-direction: column; height: 100%; text-align: center; align-items: center; padding: 30px 24px; }
.service-card__ic {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 0;
  background: transparent; color: var(--blue);
  margin: 2px auto 14px;
  transition: transform 0.3s var(--ease), color 0.3s;
}
.service-card__ic svg { width: 36px; height: 36px; }
.service-card:hover .service-card__ic { transform: scale(1.08); color: var(--navy); }
.service-card h3 { font-size: 1.14rem; margin-bottom: 8px; }
.service-card p { font-size: 0.94rem; margin-bottom: 18px; flex: 1; }
.service-card .link-arrow {
  justify-content: center;
  margin: auto auto 0;
  padding-top: 13px;
  border-top: 2px solid var(--navy);
  font-family: var(--font-head);
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--navy);
}
.service-card .link-arrow:hover { color: var(--blue); }
.service-card .link-arrow svg { width: 14px; height: 14px; }
.service-card .link-arrow { margin-top: auto; }

/* ---------- Why choose us / split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.split--rev .split__media { order: -1; }
.split__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); aspect-ratio: 5/4; object-fit: cover; }
.feature-list { display: grid; gap: 18px; margin-top: 30px; }
.feature {
  display: flex; gap: 16px;
  padding: 4px 0;
}
.feature__ic {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  /* sage-on-pale-green was invisible after the green re-theme */
  background: var(--blue-050); color: var(--blue);
}
.feature__ic svg { width: 22px; height: 22px; }
.feature h3 { font-size: 1.08rem; margin-bottom: 4px; }
.feature p { font-size: 0.95rem; margin: 0; }

/* Compact 2-col feature grid */
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; }

/* ---------- Process timeline ---------- */
.timeline { position: relative; display: grid; gap: 8px; }
.tl-step {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 22px;
  position: relative;
  padding-bottom: 34px;
}
.tl-step:last-child { padding-bottom: 0; }
.tl-num {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--blue);
  font-size: 1.15rem;
  z-index: 1;
  box-shadow: var(--shadow-xs);
}
.tl-step::before {
  content: "";
  position: absolute;
  left: 27px; top: 56px; bottom: -4px;
  width: 2px;
  background: linear-gradient(var(--border), var(--border));
  background: var(--border);
}
.tl-step:last-child::before { display: none; }
.tl-body { padding-top: 6px; }
.tl-body h3 { font-size: 1.15rem; margin-bottom: 6px; }
.tl-body p { margin: 0; font-size: 0.98rem; }
.section--navy .tl-num { background: var(--navy-800); border-color: rgba(255,255,255,0.15); color: var(--gold); }
.section--navy .tl-step::before { background: rgba(255,255,255,0.15); }
.section--navy .tl-body p { color: #b7c4da; }

/* ---------- Industries ---------- */
.chip-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 14px;
  padding: 26px 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
}
.chip-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: #dfe4ee; }
.chip-card__ic {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--section); color: var(--navy);
  transition: background 0.3s, color 0.3s;
}
.chip-card:hover .chip-card__ic { transform: scale(1.08); }
.chip-card__ic svg { width: 25px; height: 25px; }
.chip-card span { font-family: var(--font-head); font-weight: 700; font-size: 0.96rem; color: var(--navy); }

/* ---------- Stats ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat { text-align: center; padding: 20px; }
.stat__num {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.5vw, 3.1rem);
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat__num .suffix { color: var(--gold); }
.stat__label { margin-top: 10px; color: #b7c4da; font-size: 0.98rem; font-weight: 500; }

/* ---------- Testimonials ---------- */
.tst-card { display: flex; flex-direction: column; height: 100%; }
.stars { display: inline-flex; gap: 2px; color: var(--blue); margin-bottom: 16px; }
.stars svg { width: 18px; height: 18px; }
.tst-card blockquote { margin: 0 0 22px; font-size: 1.04rem; color: var(--ink); line-height: 1.6; flex: 1; }
.tst-author { display: flex; align-items: center; gap: 13px; }
.tst-author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.tst-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--navy); color: var(--gold);
  font-family: var(--font-head); font-weight: 800; font-size: 1.05rem;
}
.tst-author strong { display: block; font-family: var(--font-head); color: var(--navy); font-size: 0.98rem; }
.tst-author span { display: block; font-size: 0.85rem; color: var(--muted-2); }

/* Testimonials marquee: cards slide continuously right-to-left, pause on hover. */
.tst-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tst-track { display: flex; gap: 24px; width: max-content; animation: tstScroll 42s linear infinite; }
.tst-marquee:hover .tst-track { animation-play-state: paused; }
.tst-track .tst-card { flex: 0 0 360px; max-width: 360px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 28px; height: auto; }
@keyframes tstScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) { .tst-track .tst-card { flex-basis: 280px; max-width: 280px; padding: 22px; } .tst-track { gap: 16px; } }
@media (prefers-reduced-motion: reduce) { .tst-track { animation: none; } }

/* Trusted-by logo marquee: logos scroll right-to-left, always in full colour. */
.logo-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-track { display: flex; align-items: center; gap: 72px; width: max-content; animation: logoScroll 40s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-item { flex: 0 0 auto; display: flex; align-items: center; }
.logo-item img { height: 90px; width: auto; max-width: 260px; object-fit: contain; }
@keyframes logoScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) { .logo-track { gap: 48px; } .logo-item img { height: 64px; max-width: 190px; } }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } }

/* ---------- Promo popup (admin-managed modal) ---------- */
.cx-pop-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(20,46,80,0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.25s var(--ease); }
.cx-pop-overlay.show { opacity: 1; }
.cx-pop {
  position: relative; background: #fff; border-radius: 18px;
  max-width: 430px; width: 100%;
  box-shadow: 0 24px 64px rgba(20,46,80,0.4);
  border-top: 6px solid #104488;                 /* flat brand accent */
  overflow: hidden;
  transform: translateY(16px) scale(0.96); transition: transform 0.3s var(--ease);
}
.cx-pop-overlay.show .cx-pop { transform: none; }
.cx-pop__close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: #EEF0F2; color: #3F4752; font-size: 20px; line-height: 1;
  cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s;
}
.cx-pop__close:hover { background: #104488; color: #fff; }
.cx-pop__img { display: block; width: 100%; height: auto; }

.cx-pop__body { padding: 40px 32px 34px; text-align: center; position: relative; }
/* flat-colour icon badge (text popups) */
.cx-pop__body::before {
  content: "★"; display: grid; place-items: center;
  width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%;
  background: #F5EBE1; color: #D47611; font-size: 28px;
  box-shadow: 0 0 0 7px rgba(236,134,25,0.16);
}
.cx-pop__body h3 {
  margin: 0 0 14px; font-size: 1.55rem; font-weight: 700; color: #104488; line-height: 1.2;
}
.cx-pop__body h3::after {
  content: ""; display: block; width: 46px; height: 3px;
  background: #C97B27; border-radius: 2px; margin: 14px auto 0;   /* flat gold accent */
}
.cx-pop__body p { margin: 0 0 26px; color: #5B5161; line-height: 1.65; font-size: 1rem; }
/* solid flat-green CTA (overrides the generic gold button inside the popup) */
.cx-pop__body .btn {
  background: #104488; color: #fff; border: 0;
  padding: 14px 34px; border-radius: 40px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 8px 20px rgba(16,68,136,0.28); transition: background .15s, transform .15s, box-shadow .15s;
}
.cx-pop__body .btn:hover { background: #173E72; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(16,68,136,0.34); }

/* ---------- Accordion / FAQ ---------- */
.accordion { display: grid; gap: 14px; }
.acc-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: box-shadow 0.25s, border-color 0.25s;
}
.acc-item.is-open { box-shadow: var(--shadow-sm); border-color: #d7deea; }
.acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-align: left;
  padding: 22px 24px;
  background: none;
  border: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--navy);
}
.acc-btn__ic {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--blue-050); color: var(--blue);
  transition: transform 0.3s var(--ease), background 0.3s;
}
.acc-btn__ic svg { width: 17px; height: 17px; }
.acc-item.is-open .acc-btn__ic { transform: rotate(45deg); background: var(--blue); color: #fff; }
.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease);
}
.acc-panel > div { overflow: hidden; }
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel p { margin: 0; padding: 0 24px 24px; font-size: 0.99rem; }

/* ---------- Pricing ---------- */
.price-card { display: flex; flex-direction: column; height: 100%; position: relative; }
.price-card.is-featured { border-color: var(--blue); box-shadow: var(--shadow-md); }
.price-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--blue); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--radius-pill);
}
.price-card h3 { font-size: 1.2rem; }
.price-card__amount { font-family: var(--font-serif); font-weight: 800; color: var(--navy); font-size: 2.5rem; margin: 12px 0 2px; letter-spacing: -0.02em; }
.price-card__amount span { font-size: 1rem; font-weight: 600; color: var(--muted-2); }
.price-card ul { display: grid; gap: 12px; margin: 22px 0 26px; }
.price-card li { display: flex; gap: 11px; font-size: 0.95rem; color: var(--ink); }
.price-card li svg { width: 20px; height: 20px; color: var(--blue); flex: none; }
.price-card .btn { margin-top: auto; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; }
/* Sits directly under the full-bleed banner. The shared .section floor of 46px
   is tuned for desktop and leaves a dead band on a phone, so tighten just the
   top edge once the layout has stacked. */
@media (max-width: 900px) {
  .cta-band { padding-top: 24px; }
}
@media (max-width: 560px) {
  .cta-band { padding-top: 18px; }
}
/* boxed centered CTA (used on interior pages) */
.cta-inner {
  position: relative;
  text-align: center;
  max-width: 860px;
  margin-inline: auto;
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: clamp(34px, 4.5vw, 52px) clamp(24px, 4vw, 56px);
  box-shadow: var(--shadow-lg);
}
.cta-inner::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 68px; height: 4px; background: var(--gold); border-radius: 0 0 4px 4px;
}
.cta-inner h2 { color: #fff; }
.cta-inner p { color: #c3cee0; font-size: 1.05rem; margin: 14px auto 26px; max-width: 60ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- Split CTA panel (light copy | dark actions, curved divide) ---------- */
.cta-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: stretch;
  background: #fff;
  border-radius: 30px;
  padding: 12px;                       /* the white frame around both halves */
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
/* Left: the message */
.cta-panel__left {
  background: linear-gradient(180deg, #fbfdfa 0%, #F8F6F1 100%);
  border-radius: 22px 0 0 22px;
  padding: clamp(28px, 3.4vw, 46px) clamp(24px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cta-panel__left .eyebrow { color: var(--blue); }
.cta-panel__left h2 { color: var(--ink); margin-top: 12px; text-wrap: balance; }
.cta-panel__left h2 em { font-style: normal; color: var(--blue); }
.cta-panel__left p { color: var(--muted); margin: 14px 0 0; font-size: 1.02rem; max-width: 46ch; }

/* Three reassurances, divided like the reference */
.cta-feats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: clamp(22px, 3vw, 34px);
}
.cta-feats li {
  text-align: center;
  padding: 0 12px;
  border-left: 1px solid var(--border);
}
.cta-feats li:first-child { border-left: 0; padding-left: 0; }
.cta-feats__ic {
  display: grid; place-items: center;
  width: 58px; height: 58px; margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--blue);
}
.cta-feats__ic svg { width: 25px; height: 25px; }
.cta-feats strong { display: block; font-size: 0.92rem; font-weight: 700; color: var(--blue); line-height: 1.3; }
.cta-feats small { display: block; font-size: 0.88rem; color: var(--muted); margin-top: 2px; }

/* Right: the dark action panel, curving into the light half */
.cta-panel__right {
  position: relative;
  z-index: 1;
  background: var(--navy);
  color: #fff;
  margin-left: -64px;                  /* overlap so the curve bites in */
  padding: clamp(26px, 3.2vw, 40px) clamp(22px, 2.6vw, 34px) clamp(26px, 3.2vw, 40px) clamp(52px, 5vw, 76px);
  /* elliptical left edge = the sweeping divide */
  border-radius: 64px 22px 22px 64px / 100% 22px 22px 100%;
  box-shadow: -6px 0 0 0 var(--sage);  /* the light-green edge, follows the curve */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
/* Action buttons */
.cta-act {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px;
  border-radius: 14px;
  font-family: var(--font-head);
  font-weight: 700; font-size: 1rem;
  transition: transform .18s var(--ease), background .18s, border-color .18s;
}
.cta-act__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; flex: none; }
.cta-act__ic svg { width: 21px; height: 21px; }
.cta-act__label { flex: 1; }
.cta-act__go { width: 18px; height: 18px; flex: none; opacity: 0.75; }
.cta-act:hover { transform: translateX(3px); }
.cta-act--primary { background: var(--sage); color: var(--ink); }
.cta-act--primary .cta-act__ic { background: rgba(18,73,144,0.12); color: var(--navy); }
.cta-act--primary:hover { background: #F3B26C; }
.cta-act--outline { border: 1.5px solid var(--sage); color: #fff; }
.cta-act--outline .cta-act__ic { background: rgba(255,255,255,0.10); color: var(--sage); }
.cta-act--outline:hover { background: rgba(242,142,36,0.14); }
/* Phone block */
.cta-phone {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  transition: background .18s;
}
.cta-phone:hover { background: rgba(255,255,255,0.09); }
.cta-phone__ic {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border-radius: 50%; background: var(--blue); color: #fff;
}
.cta-phone__ic svg { width: 20px; height: 20px; }
.cta-phone__txt strong { display: block; font-family: var(--font-head); font-size: 1.16rem; font-weight: 700; letter-spacing: 0.01em; }
.cta-phone__txt small { display: block; font-size: 0.84rem; color: #B7BFC9; margin-top: 1px; }
/* Trust line */
.cta-trust {
  display: flex; align-items: center; gap: 12px;
  margin-top: 4px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.cta-trust svg { width: 26px; height: 26px; color: var(--sage); flex: none; }
.cta-trust strong { display: block; font-size: 0.88rem; font-weight: 600; color: #fff; }
.cta-trust small { display: block; font-size: 0.84rem; color: var(--sage); margin-top: 1px; }

@media (max-width: 900px) {
  /* Stack: the curve moves to the top edge of the dark half. */
  .cta-panel { grid-template-columns: 1fr; border-radius: 24px; padding: 10px; }
  /* The dark half is pulled up 34px for the curve, so the light half needs
     matching room at the bottom or the last feature row ends up underneath it. */
  .cta-panel__left { border-radius: 18px 18px 0 0; padding-bottom: 56px; }
  .cta-panel__right {
    margin-left: 0; margin-top: -34px;
    padding: 46px clamp(20px, 5vw, 30px) clamp(24px, 5vw, 32px);
    border-radius: 18px 18px 18px 18px / 44px 44px 18px 18px;
    box-shadow: 0 -6px 0 0 var(--sage);
  }
}
@media (max-width: 560px) {
  .cta-feats { grid-template-columns: 1fr; gap: 14px; }
  /* Grid, not flex: <strong> and <small> are separate children with no wrapper,
     so flex would sit them side by side. The icon spans both rows instead. */
  .cta-feats li {
    display: grid; grid-template-columns: auto 1fr;
    column-gap: 12px; align-items: center; text-align: left;
    border-left: 0; border-top: 1px solid var(--border); padding: 14px 0 0;
  }
  .cta-feats li:first-child { border-top: 0; padding-top: 0; }
  .cta-feats__ic { grid-row: 1 / span 2; width: 46px; height: 46px; margin: 0; }
  .cta-feats__ic svg { width: 21px; height: 21px; }
  .cta-feats small { margin-top: 0; }

  /* Dark action panel: tighter so the buttons don't run off a 360px screen. */
  .cta-panel { padding: 8px; border-radius: 20px; }
  .cta-panel__right { gap: 10px; padding: 42px 16px 22px; }
  .cta-act { gap: 11px; padding: 13px 14px; font-size: 0.94rem; line-height: 1.25; }
  .cta-act__ic { width: 38px; height: 38px; }
  .cta-act__ic svg { width: 19px; height: 19px; }
  .cta-phone { gap: 11px; padding: 12px 14px; }
  .cta-phone__ic { width: 38px; height: 38px; }
  .cta-phone__txt strong { font-size: 1.02rem; }
  .cta-trust { gap: 10px; padding-top: 14px; }
  .cta-trust svg { width: 22px; height: 22px; }
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero { background: var(--navy); color: #cdd8ec; padding-block: clamp(38px, 5vw, 64px) clamp(32px, 4vw, 52px); position: relative; overflow: hidden; text-align: center; }
.page-hero h1 { color: #fff; max-width: 22ch; margin-inline: auto; }
.page-hero__lead { font-size: 1.1rem; color: #b7c4da; max-width: 62ch; margin: 20px auto 0; }
.page-hero .breadcrumb { justify-content: center; }
.page-hero .hero__actions { justify-content: center; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: #8fa0bf; margin-bottom: 22px; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb svg { width: 14px; height: 14px; opacity: 0.6; }

/* prose */
.prose { max-width: 760px; }
.prose h2 { margin-top: 2.4em; margin-bottom: 0.6em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.6em; margin-bottom: 0.4em; }
.prose p, .prose li { color: var(--muted); }
/* matches both a <ul> inside .prose and a <ul class="prose"> */
.prose ul, ul.prose { display: grid; gap: 10px; margin: 1em 0 1.4em; }
.prose ul li, ul.prose li { display: flex; gap: 11px; align-items: flex-start; }
.prose ul li svg, ul.prose li svg { width: 20px; height: 20px; color: var(--blue); flex: none; margin-top: 3px; }
.prose a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* callout */
.callout {
  display: flex; gap: 16px;
  padding: 22px 24px;
  background: var(--blue-050);
  border: 1px solid #d7e2ff;
  border-radius: var(--radius);
  margin: 26px 0;
}
.callout svg { width: 24px; height: 24px; color: var(--blue); flex: none; }
.callout p { margin: 0; color: var(--navy); font-size: 0.98rem; }

/* ---------- Forms ---------- */
.form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-sm); }
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; color: var(--navy); margin-bottom: 7px; }
.field label .req { color: var(--blue); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  font-family: inherit; font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 11px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(20,82,164,0.14);
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #dc2626; }
.field__error { display: none; color: #dc2626; font-size: 0.82rem; margin-top: 6px; font-weight: 500; }
.field.has-error .field__error { display: block; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-note { font-size: 0.82rem; color: var(--muted-2); margin-top: 4px; }
.form-success {
  display: none;
  align-items: center; gap: 14px;
  padding: 18px 20px;
  background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: var(--radius);
  color: #065f46; font-weight: 600;
  margin-bottom: 20px;
}
.form-success.show { display: flex; }
.form-success svg { width: 24px; height: 24px; color: #059669; flex: none; }
.form-error {
  display: none;
  padding: 14px 18px;
  background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius);
  color: #991b1b; font-weight: 600; font-size: 0.95rem;
  margin-bottom: 18px;
}

/* newsletter inline */
.newsletter-form { display: flex; gap: 10px; }
.newsletter-form input {
  flex: 1;
  padding: 13px 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-pill);
  color: #fff; font-size: 0.95rem;
}
.newsletter-form input::placeholder { color: #8fa0bf; }
.newsletter-form input:focus { outline: none; border-color: var(--gold); }

/* ---------- Contact meta ---------- */
.contact-item { display: flex; gap: 15px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.contact-item:last-child { border-bottom: none; }
.contact-item__ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--blue-050); color: var(--blue); }
.contact-item__ic svg { width: 22px; height: 22px; }
.contact-item strong { display: block; font-family: var(--font-head); color: var(--navy); font-size: 1rem; margin-bottom: 3px; }
.contact-item p { margin: 0; font-size: 0.96rem; }
.contact-item a:hover { color: var(--blue); }

/* "What happens next" — fills the space under the contact details. A real
   sequence, so the steps carry numbers; the grid auto-fits from four across in
   the sidebar down to one on a phone. */
.nextsteps {
  margin-top: 28px; padding: 26px 26px 22px;
  background: var(--section); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.nextsteps__head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-size: 1.18rem; color: var(--navy); margin: 0;
}
.nextsteps__head svg { width: 22px; height: 22px; color: var(--blue); flex: none; }
.nextsteps__sub { margin: 7px 0 22px; font-size: 0.92rem; color: var(--muted); }
.nextsteps__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; /* 4 steps: 2x2, never 3+1 */
}
.nextstep__ic {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 12px; background: var(--blue-050); color: var(--blue);
}
.nextstep__ic svg { width: 21px; height: 21px; }
.nextstep strong {
  display: block; margin: 12px 0 5px;
  font-family: var(--font-head); font-size: 0.92rem; font-weight: 600; color: var(--navy);
}
.nextstep strong i { font-style: normal; color: var(--blue); }
.nextstep p { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--muted); }
.nextsteps__sign {
  margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--border);
  font-family: var(--font-logo); font-style: italic; font-size: 1.05rem; color: var(--navy);
}
@media (max-width: 520px) {
  .nextsteps { padding: 22px 20px 18px; }
}

/* footer variant: contact-item on a dark background */
.site-footer .contact-item { border-bottom: 1px solid rgba(255,255,255,0.08); padding: 14px 0; }
.site-footer .contact-item:first-child { padding-top: 0; }
.site-footer .contact-item:last-child { border-bottom: none; padding-bottom: 0; }
.site-footer .contact-item__ic {
  width: 38px; height: 38px; border-radius: 11px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); color: #B8D2F5;
}
.site-footer .contact-item__ic svg { width: 18px; height: 18px; }
.site-footer .contact-item strong { color: #fff; font-size: 0.95rem; font-weight: 600; }
.site-footer .contact-item p { color: #97A5B8; font-size: 0.86rem; margin: 2px 0 0; }
.site-footer .contact-item a { color: #fff; transition: color 0.2s; }
.site-footer .contact-item p a { color: #BECBDC; }
.site-footer .contact-item a:hover { color: #B8D2F5; }

/* ---------- Footer ---------- */
/* Deep, calm purple-black with a thin brand gradient along the top edge. */
.site-footer {
  position: relative; isolation: isolate; overflow: hidden;
  background: #071F40; color: #A3B1C6; padding-top: clamp(56px, 7vw, 80px);
}
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--blue), var(--gold)); }
.site-footer::after {
  content: ""; position: absolute; z-index: -1; left: -220px; top: -280px; width: 700px; height: 540px;
  border-radius: 50%; background: radial-gradient(circle, rgba(20,82,164,0.36), transparent 65%); pointer-events: none;
}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px 40px; padding-bottom: 52px; align-items: start; }
/* the logo has a white background, so it sits on a deliberate white tile */
.footer-brand .brand { display: inline-flex; padding: 8px; background: #fff; border-radius: 16px; box-shadow: 0 10px 26px -12px rgba(0,0,0,0.6); }
.footer-brand .brand .brand__logo { height: 56px; width: auto; }
.footer-brand .brand small { color: #7a8bab; }
.footer-brand p { color: #97A5B8; font-size: 0.95rem; line-height: 1.7; max-width: 36ch; }
.footer-col h4, .footer-contact h4 { color: #fff; font-family: var(--font-head); font-size: 0.98rem; font-weight: 600; letter-spacing: 0; text-transform: none; margin: 0 0 18px; }
.footer-contact { margin-top: 30px; }
.footer-col ul { display: grid; gap: 12px; }
.footer-col a { display: inline-block; font-size: 0.94rem; color: #97A5B8; transition: color 0.2s, translate 0.2s var(--ease); }
.footer-col a:hover { color: #fff; translate: 3px 0; }
.footer-news p { font-size: 0.9rem; color: #97A5B8; margin-bottom: 14px; }
.socials { display: flex; gap: 10px; margin-top: 22px; }
.socials a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.14); color: #C7D4E4;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s var(--ease);
}
.socials a:hover { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateY(-2px); }
.socials svg { width: 17px; height: 17px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-block: 24px;
  display: flex; flex-wrap: wrap; gap: 12px 26px;
  align-items: center; justify-content: space-between;
  font-size: 0.86rem;
}
.footer-bottom p { color: #7C8B9F; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-bottom a { color: #97A5B8; transition: color 0.2s; }
.footer-bottom a:hover { color: #fff; }

/* ---------- Footer trust strip ---------- */
.footer-trust {
  display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 14px 24px;
  padding-block: 22px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-trust span { display: inline-flex; align-items: center; gap: 10px; font-size: 0.86rem; font-weight: 500; color: #C7D4E4; }
.footer-trust svg { width: 18px; height: 18px; color: #B8D2F5; flex: none; }

/* ---------- Floating call + WhatsApp buttons (all screen sizes) ---------- */
.fab-contact {
  display: flex;
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 90;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--gold);
  color: #201100;
  align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(201,123,39,0.35);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.fab-contact svg { width: 24px; height: 24px; }
.fab-contact:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 36px rgba(201,123,39,0.45); }

/* Call floating button removed — only WhatsApp + chat assistant remain. */
.fab-contact { display: none !important; }

/* WhatsApp floating button (injected by main.js). */
.fab-whatsapp {
  display: flex;
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 90;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(37,211,102,0.35);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.fab-whatsapp svg { width: 28px; height: 28px; }
.fab-whatsapp:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 36px rgba(37,211,102,0.45); }

/* ---------- Chat assistant (above the WhatsApp button) ---------- */
.cx-bot-fab {
  /* Above .site-header (z-index:100) — the sticky nav used to paint over
     the panel, hiding its top edge on short screens. */
  position: fixed; right: 20px; bottom: 86px; z-index: 121;
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  background: #104488; color: #fff; display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(16,68,136,0.4);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.cx-bot-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 36px rgba(16,68,136,0.5); }
.cx-bot-fab__chat { width: 27px; height: 27px; }
.cx-bot-fab__x { width: 24px; height: 24px; display: none; }
.cx-bot-fab.open .cx-bot-fab__chat { display: none; }
.cx-bot-fab.open .cx-bot-fab__x { display: block; }
.cx-bot-fab::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(16,68,136,0.5); animation: cxBotPulse 2.6s infinite;
}
.cx-bot-fab.open::after { animation: none; }
@keyframes cxBotPulse {
  0% { box-shadow: 0 0 0 0 rgba(16,68,136,0.45); }
  70% { box-shadow: 0 0 0 15px rgba(16,68,136,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,68,136,0); }
}

/* Teaser bubble that points at the chat button */
.cx-bot-teaser {
  position: fixed; right: 20px; bottom: 152px; z-index: 119;
  width: 244px; max-width: calc(100vw - 40px);
  background: #fff; color: var(--navy);
  border-radius: 14px; padding: 14px 16px 14px 15px;
  box-shadow: 0 14px 34px rgba(20,46,80,0.26);
  border-left: 4px solid #104488;
  cursor: pointer;
  opacity: 0; transform: translateY(10px) scale(0.96); pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.cx-bot-teaser.show { opacity: 1; transform: none; pointer-events: auto; }
.cx-bot-teaser:hover { box-shadow: 0 18px 40px rgba(20,46,80,0.34); }
.cx-bot-teaser strong { display: block; font-size: 0.95rem; color: #104488; margin-bottom: 3px; }
.cx-bot-teaser span { display: block; font-size: 0.82rem; color: var(--muted); line-height: 1.45; }
.cx-bot-teaser::after {           /* tail pointing down at the button */
  content: ""; position: absolute; right: 22px; bottom: -8px;
  width: 16px; height: 16px; background: #fff; transform: rotate(45deg);
  box-shadow: 3px 3px 8px rgba(20,46,80,0.10);
}
.cx-bot-teaser__x {
  position: absolute; top: 6px; right: 8px;
  width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: transparent; color: #A39AA8; font-size: 17px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.cx-bot-teaser__x:hover { background: #EEF0F2; color: #104488; }

.cx-bot {
  position: fixed; right: 20px; bottom: 156px; z-index: 120;
  width: 344px; max-width: calc(100vw - 40px);
  height: 460px;
  /* Two max-heights on purpose. A browser without dvh support drops that
     declaration entirely and keeps the first — without a fallback the
     panel stayed a fixed 460px and its top ran off the top of short
     screens, hiding the header. On a fixed element a percentage resolves
     against the viewport, so calc(100% - …) works everywhere. */
  max-height: calc(100% - 190px);
  max-height: calc(100dvh - 190px);
  background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(20,46,80,0.35);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(0.98); pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.cx-bot.show { opacity: 1; transform: none; pointer-events: auto; }
.cx-bot__head { background: #104488; color: #fff; padding: 12px 14px; display: flex; align-items: center; gap: 8px; flex: none; position: relative; z-index: 2; }
.cx-bot__head strong { display: block; font-size: 0.95rem; font-family: var(--font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-bot__head small { display: block; color: #B5CDED; font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-bot__title { flex: 1 1 auto; min-width: 0; }
.cx-bot__live, .cx-bot__end {
  display: inline-flex; align-items: center; gap: 5px; flex: none; white-space: nowrap;
  color: #fff; border: 1px solid rgba(255,255,255,0.25); border-radius: 20px;
  padding: 6px 10px; font: inherit; font-size: 0.75rem; font-weight: 600;
  cursor: pointer; transition: background 0.15s;
}
.cx-bot__live { background: rgba(255,255,255,0.14); }
.cx-bot__live:hover { background: rgba(255,255,255,0.26); }
.cx-bot__end { background: rgba(220,90,80,0.3); }
.cx-bot__end:hover { background: rgba(220,90,80,0.55); }
.cx-bot__live svg, .cx-bot__end svg { width: 14px; height: 14px; flex: none; }
/* Narrow panels: keep the buttons on one line by dropping their labels. */
@media (max-width: 400px) {
  .cx-bot__live span, .cx-bot__end span { display: none; }
  .cx-bot__live, .cx-bot__end { padding: 7px 9px; }
}
.cx-bot__msg--sys { align-self: center; background: #E7EAED; color: #655B6B; font-size: 0.78rem; max-width: 92%; text-align: center; border-radius: 10px; }
.cx-bot__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #EC8619; box-shadow: 0 0 0 3px rgba(236,134,25,0.3); }
.cx-bot__msgs { flex: 1; overflow-y: auto; padding: 16px; background: #f4f7f4; display: flex; flex-direction: column; gap: 10px; }
.cx-bot__msg { max-width: 82%; padding: 10px 13px; border-radius: 14px; font-size: 0.9rem; line-height: 1.5; }
.cx-bot__msg--bot { background: #fff; color: #404A56; border: 1px solid #D9E5F5; border-bottom-left-radius: 4px; align-self: flex-start; }
.cx-bot__msg--user { background: #104488; color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.cx-bot__msg--typing { padding: 12px 14px; }
.cx-bot__dots { display: inline-flex; gap: 4px; }
.cx-bot__dots i { width: 7px; height: 7px; border-radius: 50%; background: #AB9FB3; display: inline-block; animation: cxBotDot 1.2s infinite ease-in-out both; }
.cx-bot__dots i:nth-child(2) { animation-delay: 0.15s; }
.cx-bot__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes cxBotDot { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }
.cx-bot__link { display: inline-block; margin-top: 8px; font-weight: 600; color: #104488; text-decoration: none; background: #F5EBE1; padding: 6px 12px; border-radius: 20px; font-size: 0.82rem; }
.cx-bot__msg--user .cx-bot__link { background: rgba(255,255,255,0.2); color: #fff; }
.cx-bot__form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #D9E5F5; background: #fff; }
.cx-bot__input { flex: 1; border: 1px solid #DAD5DD; border-radius: 22px; padding: 10px 14px; font: inherit; font-size: 0.9rem; outline: none; }
.cx-bot__input:focus { border-color: #104488; }
.cx-bot__send { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #104488; color: #fff; cursor: pointer; display: grid; place-items: center; }
.cx-bot__send:hover { background: #173E72; }
.cx-bot__send svg { width: 18px; height: 18px; }
@media (max-width: 480px) {
  .cx-bot {
    right: 12px; left: 12px; width: auto; max-width: none;
    bottom: 150px; height: auto;
    max-height: calc(100% - 180px);
    max-height: calc(100dvh - 180px);
  }
}

/* ---------- Advantage (dark full-bleed benefits) ---------- */
/* ---------- Why One Stop Tax Filers: light top, curved dark base, numbered cards ---------- */
.advantage {
  position: relative;
  background: var(--navy);           /* dark is the ground colour now */
  overflow: hidden;
  padding-bottom: clamp(60px, 7vw, 96px);
}
/* The LIGHT panel sits on top and bulges downward, so the dark green rides
   higher at the left and right edges — the shape in the reference. Rounding the
   bottom corners is what produces that convex-down sweep. */
.advantage::before {
  content: "";
  position: absolute; top: 0; left: -8%; right: -8%;
  height: 64%;
  background: linear-gradient(180deg, #fafcf9 0%, #ECF2FA 100%);
  border-radius: 0 0 50% 50% / 0 0 30% 30%;
}
/* faint dotted texture, top-left, like the reference */
.advantage::after {
  content: "";
  position: absolute; top: 42px; left: 34px;
  width: 150px; height: 96px;
  background-image: radial-gradient(var(--border) 1.6px, transparent 1.6px);
  background-size: 17px 17px;
  opacity: 0.75;
}
.advantage > .container { position: relative; z-index: 1; }

/* Heading: serif, two-tone */
.advantage .section-head h2 {
  font-family: var(--font-head);
  color: var(--ink);
}
.advantage .section-head h2 em { font-style: normal; color: var(--blue); }
.advantage .section-head p { color: var(--muted); }
.advantage .section-head p strong { color: var(--blue); font-weight: 700; }

/* Cards */
.adv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 26px;
}
.adv-card {
  position: relative;
  display: flex; align-items: center; gap: 18px;
  background: #fff;
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 10px 30px rgba(18,73,144,0.10);
  overflow: hidden;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.adv-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(18,73,144,0.18); }
/* numbered corner ribbon */
.adv-card__no { position: absolute; top: 0; right: 0; width: 66px; height: 58px; }
.adv-card__no::before {
  content: ""; position: absolute; inset: 0;
  background: var(--blue);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.adv-card__no span {
  position: absolute; top: 8px; right: 10px;
  font-family: var(--font-head); font-weight: 700;
  font-size: 0.78rem; color: #fff; letter-spacing: 0.03em;
}
/* dark icon disc + hairline divider, as in the reference */
.adv-card__ic {
  flex: none; display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--navy); color: var(--gold);
  box-shadow: 0 0 0 6px #F4F1EA;
}
.adv-card__ic svg { width: 28px; height: 28px; }
.adv-card__txt { padding-left: 18px; border-left: 1px solid var(--border-2); }
.adv-card__txt h3 { font-size: 1.05rem; color: var(--navy); margin-bottom: 5px; }
.adv-card__txt p { margin: 0; font-size: 0.92rem; color: var(--muted); }

/* Closing CTA bar, sitting on the dark field */
.adv-cta {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-top: clamp(30px, 4vw, 46px);
  padding: 14px 18px 14px 22px;
  border: 1px solid rgba(242,142,36,0.45);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04);
}
.adv-cta__ic {
  flex: none; display: grid; place-items: center;
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(242,142,36,0.16); color: var(--gold);
  border: 1px solid rgba(242,142,36,0.5);
}
.adv-cta__ic svg { width: 24px; height: 24px; }
.adv-cta__txt { flex: 1; min-width: 210px; padding-right: 20px; border-right: 1px solid rgba(255,255,255,0.16); }
.adv-cta__txt strong { display: block; font-family: var(--font-head); font-size: 1.08rem; color: #fff; }
.adv-cta__txt span { display: block; font-size: 0.9rem; color: #AEC8EB; margin-top: 2px; }
.adv-cta__btn {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: var(--radius-pill);
  background: var(--gold); color: var(--ink);
  font-family: var(--font-head); font-weight: 700; font-size: 0.95rem;
  transition: background 0.18s, transform 0.18s var(--ease);
}
.adv-cta__btn svg { width: 17px; height: 17px; transition: transform 0.25s var(--ease); }
.adv-cta__btn:hover { background: #F4B674; transform: translateY(-2px); }
.adv-cta__btn:hover svg { transform: translateX(4px); }

@media (max-width: 860px) {
  .adv-grid { grid-template-columns: 1fr; gap: 16px; }
  /* Six stacked cards make this section ~2400px tall on a phone, so a percentage
     height puts the curve straight through card three. Pin it to the heading. */
  .advantage::before { height: 330px; border-radius: 0 0 50% 50% / 0 0 48px 48px; }
  .advantage::after { display: none; }
}
@media (max-width: 620px) {
  .adv-card { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; }
  .adv-card__txt { padding-left: 0; border-left: 0; }
  .adv-cta { flex-direction: column; align-items: stretch; text-align: center; border-radius: 20px; padding: 20px; }
  .adv-cta__txt { border-right: 0; padding-right: 0; }
  .adv-cta__ic { margin: 0 auto; }
  .adv-cta__btn { justify-content: center; }
}

/* ---------- Process circles (homepage) ---------- */
.process-circles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; counter-reset: step; }
.pc-step { position: relative; text-align: center; }
.pc-step::after {
  content: ""; position: absolute; top: 42px; left: calc(50% + 52px); width: calc(100% - 104px); height: 2px;
  background: repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 12px);
}
.pc-step:last-child::after { display: none; }
.pc-circle {
  position: relative;
  width: 84px; height: 84px; margin: 0 auto;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--blue);
  display: grid; place-items: center;
  border: 0;
  transition: transform 0.3s var(--ease), background 0.3s, color 0.3s;
}
.pc-circle svg { width: 30px; height: 30px; }
.pc-step:hover .pc-circle { transform: scale(1.08); }
.pc-num {
  position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold); color: var(--navy);
  font-family: var(--font-head); font-weight: 800; font-size: 0.78rem;
  display: grid; place-items: center;
  border: 3px solid #fff;
}
.pc-step h3 { font-size: 1rem; margin: 26px 0 6px; color: var(--navy); }
.pc-step p { font-size: 0.86rem; margin: 0; }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 90;
  display: none;
  gap: 10px;
  padding: 12px;
  background: rgba(19,54,100,0.96);
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  transform: translateY(150%);
  transition: transform 0.4s var(--ease);
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .btn { flex: 1; }

/* ---------- Scroll reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); will-change: opacity, transform; }
/* Horizontal slide-ins. Elements alternate sides so rows converge toward the
   centre. Long, softly decelerating so the motion reads as unhurried. */
[data-reveal="left"],
[data-reveal="right"] {
  transition: opacity 1.4s cubic-bezier(0.16, 0.84, 0.30, 1),
              transform 1.65s cubic-bezier(0.16, 0.84, 0.30, 1);
}
[data-reveal="left"]  { transform: translateX(-72px); }
[data-reveal="right"] { transform: translateX(72px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="blur"] { filter: blur(10px); }

/* --- Distinct entrances, one per section, so the page reads as composed
       rather than one effect repeated everywhere. --- */
/* cards: lift with a touch of scale */
[data-reveal="rise"] {
  transform: translateY(34px) scale(0.975);
  transition-duration: 0.8s;
}
/* process circles: springy pop */
[data-reveal="pop"] {
  transform: translateY(18px) scale(0.82);
  transition: opacity 0.55s var(--ease), transform 0.62s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* stat cards: tilt upright */
[data-reveal="flip"] {
  transform: perspective(900px) rotateX(-12deg) translateY(26px);
  transform-origin: center bottom;
  transition-duration: 0.85s;
}
/* quiet rows: opacity only */
[data-reveal="fade"] { transform: none; transition-duration: 0.9s; }
/* headings: wipe upward behind a mask */
[data-reveal="mask"] {
  transform: translateY(18px);
  clip-path: inset(0 0 100% 0);
  transition: opacity 0.6s var(--ease), transform 0.75s var(--ease), clip-path 0.85s var(--ease);
}

[data-reveal].in {
  opacity: 1;
  transform: none;
  filter: none;
}
/* Only the mask wipe needs a clip; on everything else it would cut off hover
   shadows and anything that sticks out (tilted sheets, stamps). */
[data-reveal="mask"].in { clip-path: inset(0 0 0 0); }
[data-reveal][data-delay="1"] { transition-delay: 0.16s; }
[data-reveal][data-delay="2"] { transition-delay: 0.32s; }
[data-reveal][data-delay="3"] { transition-delay: 0.48s; }
[data-reveal][data-delay="4"] { transition-delay: 0.64s; }
[data-reveal][data-delay="5"] { transition-delay: 0.8s; }
[data-reveal][data-delay="6"] { transition-delay: 0.96s; }
[data-reveal][data-delay="7"] { transition-delay: 1.12s; }
[data-reveal][data-delay="8"] { transition-delay: 1.28s; }

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.text-center { text-align: center; }
.divider { height: 1px; background: var(--border); border: 0; margin: 0; }
.badge-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px; border-radius: var(--radius-pill);
  background: var(--blue-050); color: var(--blue);
  font-family: var(--font-head); font-weight: 700; font-size: 0.82rem;
}
.badge-pill svg { width: 15px; height: 15px; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-news { grid-column: span 2; }
  .trustbar__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .process-circles { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .pc-step:nth-child(3)::after { display: none; }
}
/* Room is tight on small laptops: drop the tagline, then the name, before the menu wraps. */
@media (max-width: 1280px) { .site-header .brand__wordmark small { display: none; } }
@media (max-width: 1100px) and (min-width: 961px) { .site-header .brand__wordmark { display: none; } }
@media (max-width: 1140px) and (min-width: 961px) {
  .nav { gap: 14px; }
  .nav__links > li > a { padding: 8px 11px; font-size: 0.88rem; }
  .btn--portal { padding: 11px 16px; }
}
@media (max-width: 960px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: grid; }
  .site-header nav { min-height: 76px; height: auto; }
  .brand__logo { height: calc(var(--logo-h, 68px) * 0.78); }
  .brand__emblem { width: 40px; height: 48px; }
  .brand__emblem svg { width: 23px; height: 26px; }
  .brand__wordmark { padding-left: 11px; }
  .brand__wordmark strong { font-size: 1.7rem; letter-spacing: 0.11em; }
  .site-header .brand__wordmark { padding-left: 11px; }
  .site-header .brand__wordmark strong { font-size: 1.1rem; letter-spacing: -0.01em; }
  .brand__wordmark em { font-size: 0.62rem; letter-spacing: 0.24em; margin-top: 4px; }
  .brand__wordmark small { display: none; }

  /* mobile drawer */
  .nav__links.is-open, .nav__cta.is-open { display: flex; }
  body.nav-open .nav__panel { display: block; }
  .nav__panel {
    display: none;
    position: fixed;
    top: 76px; left: 0; right: 0;
    /* .site-header's backdrop-filter is the containing block, so size explicitly instead of bottom:0 */
    height: 100vh; height: calc(100dvh - 76px);
    background: #fff;
    padding: 22px var(--gutter) 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid var(--border);
    animation: drawerIn 0.3s var(--ease);
  }
  @keyframes drawerIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  .nav__panel .nav__links { display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
  .nav__panel .nav__links > li > a[aria-current="page"] { box-shadow: none; }
  .nav__panel .nav__links > li > a { display: flex; width: 100%; } /* full-width rows: easier to tap */
  /* the chat button and its bubble would sit on top of the open menu */
  body.nav-open .cx-bot-fab, body.nav-open .cx-bot-teaser { display: none; }
  .nav__panel .has-menu::after { display: none; } /* hover bridge would cover the next link */
  .nav__panel .nav__links > li > a { padding: 14px 16px; margin-inline: 0; font-size: 1.05rem; border-radius: 12px; color: var(--ink); }
  .nav__panel .nav__links > li > a::after { display: none; }
  .nav__panel .nav__links > li > a:hover,
  .nav__panel .nav__links > li > a[aria-current="page"] { color: var(--blue); background: var(--blue-050); }
  .nav__panel .has-menu > a { justify-content: space-between; }
  .nav__panel .dropdown {
    position: static; transform: none; width: 100%; visibility: visible; opacity: 1;
    box-shadow: none; border: none; padding: 4px 0 8px 12px; grid-template-columns: 1fr; gap: 0;
    background: none;
    display: none; /* collapsed until the Services item is tapped */
  }
  .nav__panel .has-menu.is-expanded .dropdown { display: grid; }
  .nav__panel .has-menu.is-expanded > a svg { transform: rotate(180deg); }
  .nav__panel .dropdown a { padding: 11px 14px; font-size: 0.95rem; }
  .nav__panel .dropdown--mega { width: 100%; grid-template-columns: 1fr; gap: 0; padding: 4px 0 8px 8px; }
  .nav__panel .dropdown__col { margin-bottom: 10px; }
  .nav__panel .dropdown__col h4 { padding: 8px 14px 8px; }
  .nav__panel .nav__cta { display: flex; flex-direction: column; align-items: stretch; margin: 18px 0 0; gap: 10px; }
  .nav__panel .nav__cta .btn { width: 100%; }

  .hero__grid,
  .hero--business .hero__grid { grid-template-columns: 1fr; }
  .hero--business .quote-card { max-width: 480px; }
  .hero__media { max-width: 460px; margin-inline: auto; margin-top: 30px; }
  /* hero image stops floating and stacks under the content */
  .hero--royal { padding-bottom: 0; }
  .hero--royal .hero__content { max-width: none; }
  .hero__bg { position: relative; width: 100%; height: 300px; margin-top: 34px; }
  .hero__bg::after { display: none; }
  .hero__badges { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .split { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
  .dropdown { width: 100%; }
  .process-circles { grid-template-columns: repeat(2, 1fr); }
  .pc-step:nth-child(3)::after { display: block; }
  .pc-step:nth-child(2n)::after { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  /* Scroll-reveal: horizontal slide-in (±28px) overflows the small mobile gutter
     and causes horizontal scrolling. Slide vertically only on phones. */
  [data-reveal="left"], [data-reveal="right"] { transform: translateY(24px); }
  /* Homepage hero kicker: drop the decorative rules, let it wrap so the long
     uppercase label never overflows the viewport (which zoomed the page out). */
  .hero__kicker { flex-wrap: wrap; row-gap: 6px; letter-spacing: 0.05em; font-size: 0.7rem; }
  .hero__kicker::before, .hero__kicker::after { display: none; }
  .grid-2, .grid-3, .grid-4, .feature-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .trustbar__grid { grid-template-columns: 1fr 1fr; }
  .float-card.f1 { left: 4px; top: 2%; }
  .float-card.f2 { right: 2px; }
  .float-card { padding: 11px 14px; }
  .float-card > span:not(.float-card__ic) { display: none; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  /* three trust badges in one row, icon stacked over the label */
  .hero__badges { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .hbadge { flex-direction: column; text-align: center; gap: 7px; }
  .hbadge__ic { width: 40px; height: 40px; }
  .hbadge div { min-width: 0; }
  .hbadge strong { font-size: 0.82rem; }
  .hbadge span { font-size: 0.72rem; }
  .footer-trust { gap: 12px 20px; padding-block: 20px; grid-template-columns: 1fr 1fr; justify-content: stretch; }
  /* Process steps -> centred vertical timeline: circle, title, text, and a
     dashed line running down the middle from one step to the next. */
  .process-circles { grid-template-columns: 1fr; gap: 0; }
  .pc-step { text-align: center; padding: 0 0 34px; }
  /* Connector sits in the padding gap below the text, not behind it. */
  .pc-step::after {
    top: auto; bottom: 5px; left: 50%; transform: translateX(-50%);
    width: 2px; height: 24px;
    background: repeating-linear-gradient(180deg, var(--sage) 0 6px, transparent 6px 12px);
  }
  /* The 2-across tablet layout hides every second connector; vertically we want
     them all back. Matched specificity so this wins over that rule. */
  .pc-step:nth-child(2n)::after { display: block; }
  .pc-step:last-child::after { display: none; }
  .pc-circle { width: 72px; height: 72px; }
  .pc-circle svg { width: 27px; height: 27px; }
  .pc-step h3 { margin: 24px 0 5px; font-size: 1.05rem; }
  .pc-step p { max-width: 32ch; margin-inline: auto; }
}
@media (max-width: 480px) {
  /* Buttons go full-width and stack so they never sit awkwardly cramped. */
  .hero__actions, .cta-actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn, .cta-actions .btn { width: 100%; }
  .btn--lg { padding: 15px 24px; font-size: 1rem; }
  .price-card__amount { font-size: 2.1rem; }
  .quote-card__head h2 { font-size: 1.15rem; }
  .stats-grid { gap: 24px 16px; }
  .stat { padding: 12px 4px; }
  .stat__num { font-size: 2rem; } /* "250,000+" must fit half a phone screen */
  .hero__bg { height: 220px; }
  .section-head p { font-size: 0.95rem; }
}
@media (max-width: 560px) {
  /* Two footer columns on a phone squeeze the link lists into 2-3 words a line. */
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-news { grid-column: auto; }
  .footer-trust { grid-template-columns: 1fr 1fr; justify-content: stretch; }
}
@media (max-width: 400px) {
  .trustbar__grid { grid-template-columns: 1fr; }
}

/* Banner slider on small screens: smaller dots, and arrows out of the way of
   the artwork (swipe is the primary control on touch). */
@media (max-width: 640px) {
  .bslider__dots { bottom: 8px; gap: 7px; }
  .bslider__dot { width: 7px; height: 7px; }
  .bslider__arrow--prev { left: 6px; }
  .bslider__arrow--next { right: 6px; }
}
@media (max-width: 420px) {
  .bslider__arrow { display: none; }
}

/* ---------- Services section (grouped cards + footer CTA) ---------- */
.svc { position: relative; }
/* Two-tone headline: second line in the accent green */
.svc .section-head h2 em { font-style: normal; color: var(--blue); }
/* Eyebrow becomes a pill sitting between two rules */
.svc .section-head .eyebrow {
  background: var(--blue-050);
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  gap: 0;
}
.svc .section-head .eyebrow::before,
.svc .section-head .eyebrow::after {
  width: 34px; margin-inline: 14px;
}
/* the accent bar under centred headings is redundant here */
.svc .section-head h2::after { display: none; }

/* Group label: icon + title + rule running to the edge */
.svc-group { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; }
.svc-group--spaced { margin-top: 46px; }
.svc-group__ic {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--blue); color: #fff;
}
.svc-group__ic svg { width: 22px; height: 22px; }
.svc-group h3 {
  margin: 0; font-size: 1.02rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--blue);
  white-space: nowrap;
}
.svc-group::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* Cards: softer, rounder, with a tinted icon disc */
.service-card {
  border-color: var(--border-2);
  border-radius: 18px;
  box-shadow: var(--shadow-xs);
  padding: 32px 24px 26px;
}
.service-card__ic {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--blue-050);
  margin-bottom: 18px;
}
.service-card__ic svg { width: 30px; height: 30px; }
.service-card:hover .service-card__ic { transform: scale(1.06); }
.service-card h3 { font-size: 1.08rem; color: var(--navy); margin-bottom: 10px; }
.service-card .link-arrow {
  font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
}

/* Footer CTA strip */
.svc-cta {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-top: 40px; padding: 22px clamp(20px, 3vw, 34px);
  background: var(--navy); color: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow-md);
}
.svc-cta__ic {
  flex: none; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--sage); color: var(--navy);
}
.svc-cta__ic svg { width: 26px; height: 26px; }
.svc-cta__txt { flex: 1; min-width: 200px; }
.svc-cta__txt strong {
  display: block; font-family: var(--font-head);
  font-size: 1.16rem; font-weight: 700; color: var(--sage);
}
.svc-cta__txt span { display: block; font-size: 0.96rem; color: #C0D4EF; margin-top: 2px; }
.svc-cta__btn {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: var(--radius-pill);
  background: var(--sage); color: var(--ink);
  font-family: var(--font-head); font-weight: 700;
  font-size: 0.84rem; letter-spacing: 0.08em; text-transform: uppercase;
  transition: background .2s, transform .2s var(--ease);
}
.svc-cta__btn svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.svc-cta__btn:hover { background: #F4B674; transform: translateY(-2px); }
.svc-cta__btn:hover svg { transform: translateX(4px); }

@media (max-width: 700px) {
  .svc-group h3 { font-size: 0.9rem; white-space: normal; }
  .svc-cta { flex-direction: column; text-align: center; gap: 14px; }
  .svc-cta__txt { min-width: 0; }
  .svc-cta__btn { width: 100%; justify-content: center; }
}

/* ---------- Service card hover: solid ink floods out from the icon ---------- */
.service-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s;
}
/* A dot sitting at the icon's centre expands into a solid disc that swallows
   the whole card — the reveal radiates from the icon rather than wiping in. */
.service-card::before {
  content: "";
  position: absolute;
  top: 66px; left: 50%;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--navy);
  transform: scale(0);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}
.service-card:hover::before { transform: scale(80); }

.service-card:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: 0 22px 48px rgba(18,73,144,0.28);
}

/* Everything inverts against the solid ground. */
.service-card__ic { transition: background 0.4s 0.1s var(--ease), color 0.4s 0.1s; }
.service-card:hover .service-card__ic { background: var(--gold); color: var(--navy); }

.service-card h3,
.service-card p,
.service-card .link-arrow { transition: color 0.35s 0.08s, border-color 0.35s 0.08s; }
.service-card:hover h3 { color: #fff; }
.service-card:hover p { color: #C0D4EF; }
.service-card:hover .link-arrow { color: var(--gold); border-top-color: var(--gold); }
.service-card:hover .link-arrow svg { transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card::before,
  .service-card__ic,
  .service-card h3,
  .service-card p,
  .service-card .link-arrow { transition: none; }
  .service-card:hover { transform: none; }
}

/* ---------- Process: CTA + trust strip ---------- */
.btn--proc {
  border-radius: var(--radius-pill);
  padding: 16px 34px;
  font-size: 0.84rem; letter-spacing: 0.09em; text-transform: uppercase;
  max-width: 100%;
}
/* Its label is one long uppercase phrase — at 320-360px it was 372px wide and
   gave the whole page a horizontal scrollbar. Let it breathe less and wrap. */
@media (max-width: 400px) {
  .btn--proc { padding: 14px 20px; letter-spacing: 0.05em; white-space: normal; text-align: center; }
}
.proc-trust {
  display: grid; grid-template-columns: repeat(4, 1fr);
  list-style: none; margin: clamp(30px, 4vw, 46px) 0 0; padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.proc-trust li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 22px;
  border-left: 1px solid var(--border);
}
.proc-trust li:first-child { border-left: 0; }
.proc-trust svg { width: 30px; height: 30px; color: var(--blue); flex: none; margin-top: 1px; }
.proc-trust strong { display: block; font-size: 0.95rem; font-weight: 700; color: var(--navy); }
.proc-trust small { display: block; font-size: 0.85rem; color: var(--muted); margin-top: 3px; line-height: 1.45; }
@media (max-width: 900px) {
  .proc-trust { grid-template-columns: repeat(2, 1fr); }
  .proc-trust li:nth-child(odd) { border-left: 0; }
  .proc-trust li:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 520px) {
  .proc-trust { grid-template-columns: 1fr; }
  .proc-trust li { border-left: 0; }
  .proc-trust li + li { border-top: 1px solid var(--border); }
}

/* ---------- "By the numbers" stat cards ---------- */
.stats2 { background: var(--section); }
.stats2 .section-head h2 em { font-style: normal; color: var(--blue); }
.stats2 .section-head .eyebrow {
  background: var(--blue-050);
  padding: 7px 16px 7px 12px;
  border-radius: var(--radius-pill);
  gap: 8px;
}
.stats2 .section-head .eyebrow::before,
.stats2 .section-head .eyebrow::after { width: 34px; margin-inline: 12px; }
.stats2 .section-head .eyebrow svg { width: 16px; height: 16px; }

.stats2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-2);
  border-radius: 18px;
  padding: 30px 22px 46px;      /* room for the wing + button */
  text-align: center;
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.stat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.stat-card__ic {
  display: grid; place-items: center;
  width: 72px; height: 72px; margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--blue);
  transition: transform 0.3s var(--ease);
}
.stat-card__ic svg { width: 32px; height: 32px; }
.stat-card:hover .stat-card__ic { transform: scale(1.06); }
.stat-card__num {
  font-family: var(--font-head);
  font-size: clamp(2.1rem, 3.4vw, 2.8rem);
  font-weight: 800; line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.stat-card__num .suffix { color: var(--blue); }
/* short rule under the figure */
.stat-card h3 {
  position: relative;
  font-size: 1.02rem; color: var(--navy);
  margin: 22px 0 8px; padding-top: 18px;
}
.stat-card h3::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 46px; height: 3px; background: var(--blue); border-radius: 3px;
}
.stat-card p { font-size: 0.9rem; color: var(--muted); margin: 0; }
/* the angled green "wing" across the bottom, with the chevron button on top */
.stat-card::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 42px;
  background: #2C65AF;
  clip-path: polygon(0 42%, 50% 100%, 100% 42%, 100% 100%, 0 100%);
  transition: background 0.3s;
}
.stat-card:hover::after { background: var(--blue); }
.stat-card__go {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  z-index: 1;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy); color: #fff;
  transition: transform 0.3s var(--ease), background 0.3s;
}
.stat-card__go svg { width: 16px; height: 16px; }
.stat-card__go:hover { background: #153661; }
.stat-card:hover .stat-card__go { transform: translateX(-50%) translateY(-3px); }

/* trust strip beneath the cards */
.stats2-trust {
  display: grid; grid-template-columns: repeat(4, 1fr);
  list-style: none; margin: 20px 0 0; padding: 0;
  background: #fff;
  border: 1px solid var(--border-2);
  border-radius: 16px;
  overflow: hidden;
}
.stats2-trust li {
  display: flex; align-items: center; gap: 13px;
  padding: 20px 22px;
  border-left: 1px solid var(--border-2);
}
.stats2-trust li:first-child { border-left: 0; }
.stats2-trust__ic {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--blue-050); color: var(--blue);
}
.stats2-trust__ic svg { width: 22px; height: 22px; }
.stats2-trust strong { display: block; font-size: 0.94rem; font-weight: 700; color: var(--navy); }
.stats2-trust small { display: block; font-size: 0.85rem; color: var(--muted); margin-top: 2px; line-height: 1.45; }

@media (max-width: 980px) {
  .stats2-grid, .stats2-trust { grid-template-columns: repeat(2, 1fr); }
  .stats2-trust li:nth-child(odd) { border-left: 0; }
  .stats2-trust li:nth-child(n+3) { border-top: 1px solid var(--border-2); }
}
@media (max-width: 560px) {
  .stats2-grid { grid-template-columns: 1fr; }
  .stats2-trust { grid-template-columns: 1fr; }
  .stats2-trust li { border-left: 0; }
  .stats2-trust li + li { border-top: 1px solid var(--border-2); }
}

/* ---------- Services mega dropdown: icon rows + help bar ---------- */
.dropdown--mega {
  display: block;                 /* was a grid; columns now live in __cols */
  width: 660px;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
}
.dropdown--mega .dropdown__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
  padding: 14px 16px 12px;
}
.dropdown--mega .dropdown__cols .dropdown__col + .dropdown__col {
  border-left: 1px solid var(--border-2);
  padding-left: 18px;
}
.dropdown--mega .dropdown__col h4 {
  margin-bottom: 8px; padding: 0 6px 9px;
  border-bottom: 1px solid var(--border-2);
  font-size: 0.72rem; letter-spacing: 0.11em; color: var(--blue);
}

/* .dropdown a sets display:block, so these need the extra specificity. */
.dropdown--mega .ddi {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 6px;
  border-radius: 7px;
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.89rem;
  line-height: 1.35;
  transition: background 0.16s, color 0.16s;
}
.dropdown--mega .ddi__ic {
  flex: none; display: grid; place-items: center;
  width: 22px; height: 22px;
  background: none; color: var(--blue);
  transition: color 0.16s, transform 0.16s;
}
.dropdown--mega .ddi__ic svg { width: 20px; height: 20px; }
.dropdown--mega .ddi__tag {
  display: inline-block; margin-left: 6px; vertical-align: 1px;
  font-style: normal; font-size: 0.56rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #1E4579; background: var(--gold-050);
  padding: 1px 5px; border-radius: 3px;
}
.dropdown--mega .ddi:hover { background: var(--blue-050); color: var(--blue); }
.dropdown--mega .ddi:hover .ddi__ic { color: var(--navy); transform: scale(1.08); }

/* help bar across the bottom */
.dropdown__help {
  /* icon | text | buttons stacked in their own column */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px 13px;
  align-items: center;
  padding: 12px 16px;
  background: var(--section);
  border-top: 1px solid var(--border-2);
}
.dropdown__help-ic  { grid-row: 1 / 3; }
.dropdown__help-txt { grid-row: 1 / 3; }
.dropdown--mega .dd-btn--solid { grid-column: 3; grid-row: 1; }
.dropdown--mega .dd-btn--ghost { grid-column: 3; grid-row: 2; }
.dropdown__help-ic {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--blue-050); color: var(--blue);
}
.dropdown__help-ic svg { width: 17px; height: 17px; }
.dropdown__help-txt { flex: 1; min-width: 140px; }
.dropdown__help-txt strong { display: block; font-size: 0.82rem; color: var(--navy); }
.dropdown__help-txt small { display: block; font-size: 0.75rem; color: var(--muted); margin-top: 1px; }
.dropdown--mega .dd-btn {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px;
  width: 100%;
  padding: 8px 13px; border-radius: 7px;
  font-family: var(--font-head); font-weight: 700;
  font-size: 0.67rem; letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.dropdown--mega .dd-btn svg { width: 13px; height: 13px; }
.dropdown--mega .dd-btn--solid { background: var(--navy); color: #fff; }
.dropdown--mega .dd-btn--solid:hover { background: var(--blue); }
.dropdown--mega .dd-btn--ghost { background: #fff; color: var(--navy); border: 1px solid var(--border); }
.dropdown--mega .dd-btn--ghost:hover { border-color: var(--blue); color: var(--blue); }

@media (max-width: 960px) {
  .nav__panel .dropdown--mega { width: 100%; border-radius: 0; }
  .nav__panel .dropdown--mega .dropdown__cols { grid-template-columns: 1fr; gap: 0; padding: 4px 0 8px; }
  .nav__panel .dropdown--mega .dropdown__cols .dropdown__col + .dropdown__col { border-left: 0; padding-left: 0; }
  .nav__panel .dropdown__help { flex-direction: column; align-items: stretch; }
  .nav__panel .dropdown--mega .dd-btn { justify-content: center; }
}
/* second line under a dropdown item (e.g. form numbers) */
.dropdown--mega .ddi__sub { display: block; font-size: 0.78rem; color: var(--muted); font-weight: 400; }

/* Footer brand shows the admin-uploaded logo only — the text wordmark stays in
   the markup for SEO/screen readers but is not drawn, same as the header. */
.footer-brand .brand__wordmark { display: none; }

/* ---------- Refer & Earn: reward highlights in the hero ---------- */
.ref-perks {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 12px; list-style: none;
  margin: 30px auto 0; padding: 0;
  max-width: 900px;
}
.ref-perks li {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 18px;
  border: 1px solid rgba(242,142,36,0.35);
  border-radius: var(--radius-pill);
  background: rgba(242,142,36,0.10);
  text-align: left;
}
.ref-perks svg { width: 22px; height: 22px; color: var(--gold); flex: none; }
.ref-perks strong { display: block; color: #fff; font-size: 0.92rem; font-weight: 700; }
.ref-perks span { font-size: 0.82rem; color: #A9C5EA; line-height: 1.35; }
@media (max-width: 640px) {
  .ref-perks { flex-direction: column; align-items: stretch; gap: 9px; }
}

/* ---------- About: core values cards ---------- */
.values .service-card {
  border: 1px solid var(--border-2);
  border-radius: 16px;
  box-shadow: var(--shadow-xs);
  padding: 34px 26px 30px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
}
.values .service-card:hover {
  transform: translateY(-6px);
  border-color: var(--blue-050);
  box-shadow: 0 16px 38px rgba(18,73,144,0.12);
}
/* rounded-square tile instead of a bare icon */
.values .service-card__ic {
  width: 62px; height: 62px;
  border-radius: 18px;
  background: var(--blue-050);
  color: var(--blue);
  margin-bottom: 18px;
  transition: background 0.3s var(--ease), color 0.3s, transform 0.3s var(--ease);
}
.values .service-card__ic svg { width: 27px; height: 27px; }
.values .service-card:hover .service-card__ic {
  background: var(--blue);
  color: #fff;
  transform: scale(1.06);
}
.values .service-card h3 {
  color: var(--blue);
  font-size: 1.12rem;
  margin-bottom: 10px;
}
.values .service-card p { color: var(--muted); font-size: 0.93rem; line-height: 1.6; }

/* About-page value cards keep their own lighter treatment — no ink flood. */
.values .service-card::before,
.values .service-card::after { display: none; }
.values .service-card:hover h3 { color: var(--blue); }
.values .service-card:hover p { color: var(--muted); }

/* ---------- Footer certification badge ---------- */
.footer-certs {
  display: flex; justify-content: center; gap: 14px;
  padding: 0 0 36px;
}
/* White panel: the IRS badges disappear on the dark footer without it. */
.footer-certs img {
  height: 96px; width: auto; max-width: 100%; display: block;
  padding: 8px; background: #fff; border-radius: 16px;
  box-shadow: 0 14px 30px -16px rgba(0,0,0,0.6);
}
@media (max-width: 520px) {
  .footer-certs img { height: 80px; }
}
/* Footer logo is navy-on-transparent: give it a white plate on the dark footer. */
.site-footer .brand__logo { background: #fff; border-radius: 12px; padding: 6px 12px; height: 64px; }

/* ---------- Refund Status page ---------- */
.rf-main { background: var(--section); }

/* Primary action card: dark seal panel + content */
.rf-card {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.rf-card__brand {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 34px 24px; text-align: center;
  background: linear-gradient(165deg, #104488 0%, var(--navy) 100%);
  color: #fff;
}
/* faint dotted texture, same language as the homepage advantage band */
.rf-card__brand::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.10) 1.4px, transparent 1.4px);
  background-size: 18px 18px;
  mask-image: linear-gradient(150deg, #000, transparent 70%);
  -webkit-mask-image: linear-gradient(150deg, #000, transparent 70%);
}
.rf-card__brand > * { position: relative; z-index: 1; }
.rf-card__seal {
  display: grid; place-items: center; width: 78px; height: 78px; margin-bottom: 8px;
  border-radius: 50%; background: rgba(255,255,255,0.10);
  border: 1px solid rgba(242,142,36,0.45); color: var(--sage);
}
.rf-card__seal svg { width: 36px; height: 36px; }
.rf-card__brand strong { font-family: var(--font-head); font-size: 1.2rem; letter-spacing: 0.02em; }
.rf-card__brand small { font-size: 0.78rem; color: #A9C5E9; }
.rf-card__body { padding: clamp(26px, 3vw, 38px); }
.rf-card__body h2 { margin: 10px 0 10px; font-size: clamp(1.3rem, 2.4vw, 1.75rem); color: var(--navy); }
.rf-card__body > p { color: var(--muted); margin: 0 0 22px; max-width: 58ch; }
.rf-card__cta svg { width: 17px; height: 17px; }

/* quick facts under the button */
.rf-facts {
  list-style: none; margin: 24px 0 0; padding: 20px 0 0;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 14px 30px;
}
.rf-facts li { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; color: var(--muted); }
.rf-facts svg { width: 18px; height: 18px; color: var(--blue); flex: none; }
.rf-facts strong { color: var(--ink); font-weight: 700; }

.rf-head { margin-top: clamp(50px, 6vw, 76px); }

/* Three-stage tracker */
.rf-track {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.rf-track li {
  position: relative; text-align: center;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px 22px 26px;
  box-shadow: var(--shadow-xs);
}
/* dashed connector between the stages */
.rf-track li:not(:last-child)::after {
  content: ""; position: absolute; top: 52px; right: -14px; width: 14px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--border) 0 5px, transparent 5px 10px);
}
.rf-track__dot {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px;
  border-radius: 50%; background: var(--green-050, var(--blue-050)); color: var(--blue);
  border: 2px solid #fff; box-shadow: 0 0 0 3px var(--blue-050);
}
.rf-track__dot svg { width: 25px; height: 25px; }
.rf-track h3 { font-size: 1.02rem; margin-bottom: 6px; color: var(--navy); }
.rf-track p { font-size: 0.88rem; margin: 0; color: var(--muted); }

/* What you'll need — numbered cards */
.rf-need { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rf-need__item {
  position: relative; overflow: hidden;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px 22px 24px;
  box-shadow: var(--shadow-xs);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.rf-need__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(18,73,144,0.12);
  border-color: var(--blue);
}
.rf-need__no {
  position: absolute; top: 12px; right: 16px;
  font-family: var(--font-head); font-size: 2.4rem; font-weight: 800;
  line-height: 1; color: var(--blue); opacity: 0.10;
}
.rf-need__ic {
  display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 14px;
  border-radius: 14px; background: var(--blue-050); color: var(--blue);
}
.rf-need__ic svg { width: 23px; height: 23px; }
.rf-need h3 { font-size: 1rem; margin-bottom: 6px; }
.rf-need p { font-size: 0.88rem; margin: 0; color: var(--muted); }

/* Reassurance + help, side by side */
.rf-strips {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  margin-top: clamp(40px, 5vw, 60px);
}
.rf-note {
  background: var(--white); border: 1px solid var(--border);
  border-top: 3px solid var(--blue);
  border-radius: var(--radius); padding: 26px 26px 24px;
  box-shadow: var(--shadow-xs);
}
.rf-note__ic {
  display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 14px;
  border-radius: 50%; background: var(--blue-050); color: var(--blue);
}
.rf-note__ic svg { width: 21px; height: 21px; }
.rf-note h3 { font-size: 1.05rem; margin-bottom: 6px; color: var(--navy); }
.rf-note p { margin: 0; font-size: 0.92rem; color: var(--muted); }
.rf-note .link-arrow { margin-top: 12px; }
.rf-note--help { border-top-color: var(--gold); }
.rf-note--help .rf-note__ic { background: var(--gold-050); color: #D47611; }

@media (max-width: 900px) {
  .rf-card { grid-template-columns: 1fr; }
  .rf-card__brand { flex-direction: row; gap: 14px; padding: 20px 24px; text-align: left; }
  .rf-card__seal { width: 52px; height: 52px; margin: 0; }
  .rf-card__seal svg { width: 24px; height: 24px; }
  .rf-card__brand small { display: block; }
  .rf-need { grid-template-columns: repeat(2, 1fr); }
  .rf-strips { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .rf-track { grid-template-columns: 1fr; gap: 12px; }
  .rf-track li:not(:last-child)::after { display: none; }
}
@media (max-width: 520px) {
  .rf-need { grid-template-columns: 1fr; }
  .rf-card__cta { width: 100%; justify-content: center; }
  .rf-facts { flex-direction: column; gap: 10px; }
}

/* Short screens: the floating buttons + panel don't fit at full size, so pull
   the panel down closer to the launcher and let it shrink. Keyed on viewport
   HEIGHT, so a short laptop window gets the same treatment as a phone. */
@media (max-height: 760px) {
  .cx-bot {
    bottom: 104px;
    max-height: calc(100% - 128px);
    max-height: calc(100dvh - 128px);
  }
}
@media (max-height: 600px) {
  .cx-bot {
    /* Belt and braces: pinning BOTH top and bottom means the panel is boxed
       inside the viewport by the layout itself. No calc(), no dvh, no unit
       support required — it physically cannot run off the top of the screen
       even on an old browser that drops everything else here. */
    top: 10px;
    bottom: 88px;
    height: auto;
    max-height: none;
  }
  .cx-bot__head { padding: 9px 12px; }
  .cx-bot__head small { display: none; }
  .cx-bot__msgs { padding: 12px; }
  .cx-bot-teaser { display: none; }   /* no room for it alongside the panel */
}
@media (max-height: 460px) {
  .cx-bot { top: 8px; bottom: 76px; height: auto; max-height: none; }
  .cx-bot__form { padding: 7px; }
  .cx-bot__send { width: 34px; height: 34px; }
}

/* ---------- Blog (blog.php: /blog and /blog/<slug>) ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.blog-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: #C3D6EE; }
.blog-card__img { display: block; aspect-ratio: 1200 / 630; overflow: hidden; background: linear-gradient(135deg, var(--navy), var(--blue)); }
.blog-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.blog-card:hover .blog-card__img img { transform: scale(1.06); }
.blog-card__ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--gold); }
.blog-card__ph svg { width: 54px; height: 54px; opacity: .85; transition: transform .5s var(--ease); }
.blog-card:hover .blog-card__ph svg { transform: rotate(-8deg) scale(1.1); }
.blog-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.blog-card h2 { font-size: 1.2rem; line-height: 1.3; margin: 0 0 10px; }
.blog-card h2 a { transition: color .25s; }
.blog-card h2 a:hover { color: var(--blue); }
.blog-card p { font-size: .94rem; color: var(--muted); margin: 0 0 18px; }
.blog-card .link-arrow { margin-top: auto; }
.blog-card--lead { grid-column: 1 / -1; flex-direction: row; }
.blog-card--lead .blog-card__img { flex: 0 0 52%; aspect-ratio: auto; min-height: 320px; }
.blog-card--lead .blog-card__body { justify-content: center; padding: 36px 40px; }
.blog-card--lead h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.blog-meta { font-size: .84rem; color: var(--muted-2); margin: 0 0 8px; }
.blog-meta--hero { color: rgba(255,255,255,.75); margin: 14px 0 0; font-size: .95rem; }
.blog-title { margin-top: 14px; max-width: 22ch; }
.blog-empty { text-align: center; color: var(--muted); padding: 40px 0; }
.blog-empty a { color: var(--blue); text-decoration: underline; }

.blog-post { max-width: 780px; }
.blog-post__cover { width: 100%; height: auto; border-radius: var(--radius-lg); margin: 0 0 36px; box-shadow: var(--shadow-md); }
.blog-prose { font-size: 1.06rem; line-height: 1.8; color: var(--ink); }
.blog-prose h2 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); margin: 1.8em 0 .5em; }
.blog-prose h3 { font-size: 1.22rem; margin: 1.5em 0 .4em; }
.blog-prose > :first-child { margin-top: 0; }
.blog-prose p, .blog-prose ul, .blog-prose ol, .blog-prose table, .blog-prose blockquote { margin: 0 0 1.2em; }
.blog-prose ul, .blog-prose ol { padding-left: 1.4em; }
.blog-prose ul { list-style: disc; }
.blog-prose ol { list-style: decimal; }
.blog-prose li { margin-bottom: .45em; }
.blog-prose li::marker { color: var(--blue); }
.blog-prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(20,82,164,.35); }
.blog-prose a:hover { text-decoration-color: currentColor; }
.blog-prose blockquote { padding: 16px 22px; border-left: 4px solid var(--gold); background: var(--section); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: italic; }
.blog-prose img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); margin: 1.4em auto; }
.blog-prose hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }
.blog-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .95rem; line-height: 1.55; }
.blog-prose th, .blog-prose td { padding: 11px 14px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.blog-prose th { background: var(--section); color: var(--navy); font-weight: 600; }
.blog-prose td:first-child { font-weight: 600; color: var(--navy); white-space: nowrap; }
.blog-post__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  margin-top: 46px; padding: 26px 28px; border-radius: var(--radius-lg); background: var(--navy); color: #fff;
}
.blog-post__cta strong { display: block; font-size: 1.15rem; }
.blog-post__cta span { display: block; color: rgba(255,255,255,.75); font-size: .95rem; }
.blog-note { margin: 22px 0 0; font-size: .85rem; color: var(--muted-2); }

@media (max-width: 960px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-card--lead { flex-direction: column; }
  .blog-card--lead .blog-card__img { flex: none; min-height: 0; aspect-ratio: 1200 / 630; }
  .blog-card--lead .blog-card__body { padding: 22px 24px 24px; }
}
@media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; } }
/* ---------- Phone polish (640px and below) ----------
   Icon cards turn into compact rows (icon left, text right) instead of tall
   centred blocks, which roughly halves the scroll on the services pages.
   Long breadcrumbs wrap instead of squeezing the last crumb into a column. */
@media (max-width: 640px) {
  .service-card {
    display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px;
    align-items: start; text-align: left; padding: 22px 20px 20px;
  }
  .service-card .service-card__ic { grid-row: span 3; width: 52px; height: 52px; margin: 0; }
  .service-card .service-card__ic svg { width: 24px; height: 24px; }
  .service-card h3, .service-card p, .service-card .link-arrow { grid-column: 2; }
  .service-card h3 { margin: 2px 0 6px; }
  .service-card p { margin: 0 0 12px; }
  .service-card .link-arrow { justify-self: start; justify-content: flex-start; margin: 0; }
  .page-hero .breadcrumb { flex-wrap: wrap; row-gap: 4px; }
}

/* Footer developer credit */
.footer-credit { color: #7C8B9F; }
.footer-credit a { color: #A8C3E6; font-weight: 600; }
.footer-credit a:hover { color: #fff; }