/* ============================================================
   Fairlight Accounting — fairlightaccounting.com
   Palette: Bayview theme — deep navy ink, teal accent, warm sand/paper
   Type: Fraunces (headings) + Hanken Grotesk (body)
   (logo wordmark keeps Playfair Display + Inter, loaded in base.html)
   ============================================================ */

:root {
  /* Bayview theme transplant — colors + fonts (logo kept unchanged) */
  --ink: #0b2540;
  --ink-2: #16395e;
  --sea: #1391a4;
  --beacon: #1391a4;
  --beacon-deep: #0e7c8c;
  --beacon-soft: #dceff1;
  --accent-soft: #7bd0d9;
  --mist: #f1ece1;
  --paper: #fbf9f4;
  --text: #16395e;
  --muted: #566976;
  --line: rgba(11, 37, 64, 0.12);
  --radius: 14px;
  --shadow: 0 24px 60px -28px rgba(11, 37, 64, 0.38);
  --container: 1680px;
  --body: #16395e;
  --band: #f1ece1;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--sans);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.55;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(40px, 5vw, 60px); line-height: 1.05; }
h2 { font-size: clamp(28px, 3.5vw, 42px); line-height: 1.08; margin-bottom: 12px; }
h3 { font-size: 21px; line-height: 1.12; }

p + p { margin-top: 1em; }

a { color: var(--sea); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--beacon);
  outline-offset: 2px;
  border-radius: 4px;
}

em.accent { font-style: italic; color: var(--beacon-deep); }

/* Standing layout rule (docs/README-BUILD.md): ONE shared container for every
   section, every page. 1240px max, centered, with fluid horizontal padding so
   content reaches near the screen edges. Vertical spacing stays with sections;
   padding here is horizontal only. Sections must NOT set their own narrower
   max-width — only long-form text gets the ~680px measure (below). */
.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); }
/* Long-form paragraph blocks keep a readable measure inside the wide container;
   structural blocks (grids, cards, rows, hero) use the full width. */
section > .container > p:not([class]) { max-width: 680px; }

/* ---------- Eyebrow with beam rule (signature) ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--beacon);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: linear-gradient(90deg, var(--beacon), transparent);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  border: 2px solid transparent;
  cursor: pointer;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--beacon); color: #fff; }
.btn-primary:hover { background: #17a6bc; box-shadow: 0 8px 20px rgba(19, 145, 164, 0.35); }
.btn-ghost { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.btn-ghost:hover { border-color: #fff; }
.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
}
.brand { display: flex; align-items: center; text-decoration: none; }
.brand:hover { text-decoration: none; opacity: 0.88; }
.brand-logo { height: 46px; width: auto; display: block; }

.nav-toggle { display: none; }
.nav-toggle-label {
  display: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  position: relative;
  content: "";
}
.nav-toggle-label span::before { position: absolute; top: -7px; }
.nav-toggle-label span::after { position: absolute; top: 7px; }

/* ---------- Nav links — centered menu (3-zone bar: logo · menu · CTA).
   All items share height: 72px so they sit on one baseline regardless of
   whether they're <a> or <label> elements. */
.site-nav { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1; }
.site-nav > a:not(.btn) {
  display: flex;
  align-items: center;
  height: 72px;
  padding: 0 16px;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.9rem;
  white-space: nowrap;
  text-decoration: none;
}
.site-nav > a:not(.btn):hover { color: var(--sea); text-decoration: none; }

/* "Free Consultation" CTA — navy pill, pinned to the right of the bar */
.nav-cta {
  padding: 11px 24px;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  white-space: nowrap;
}
.nav-cta:hover { background: var(--sea); border-color: var(--sea); box-shadow: none; transform: none; color: #fff; }

/* Secondary "Client Login" — outlined teal pill, sits left of the solid CTA */
.nav-login {
  padding: 11px 20px;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 999px;
  background: transparent;
  color: var(--beacon);
  border: 2px solid var(--beacon);
  white-space: nowrap;
}
.nav-login:hover { background: var(--beacon); color: #fff; box-shadow: none; transform: none; }
/* The in-menu Client Login link only appears in the mobile dropdown (below). */
.site-nav a.nav-login-mobile { display: none; }

/* ---------- Dropdown menus ---------- */
.nav-item.has-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  height: 72px;
}
.dropdown-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.site-nav .nav-link {
  display: flex;
  align-items: center;
  height: 72px;
  padding: 0 16px;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.site-nav .nav-link:hover { color: var(--sea); }
/* Down-chevron on nav items that expand a dropdown (flips up when open). */
.nav-item.has-dropdown > .nav-link::after {
  content: "";
  flex: none;
  width: 0.46em;
  height: 0.46em;
  margin-left: 0.42em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.75;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.nav-item.has-dropdown > .nav-link:hover::after { opacity: 1; }
@media (min-width: 921px) {
  .nav-item.has-dropdown:hover > .nav-link::after,
  .nav-item.has-dropdown:focus-within > .nav-link::after { transform: translateY(2px) rotate(225deg); }
}
.dropdown-toggle:checked ~ .nav-link::after { transform: translateY(2px) rotate(225deg); }
.nav-item .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 230px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 10px 0;
  z-index: 60;
}
.nav-item .dropdown a {
  display: block;
  padding: 9px 18px;
  font-weight: 500;
  font-size: 0.9rem;
}
.nav-item .dropdown a:hover { background: var(--mist, #f4f7f9); }
/* "All Service Areas" — the see-everything item, set off by a divider above */
.nav-item .dropdown a.dropdown-all {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-weight: 600;
  color: var(--sea);
}

/* Locations is a hybrid: a real link on desktop (click -> locations.html,
   hover -> dropdown) and a tap-toggle on mobile. Show one trigger per width.
   (.site-nav prefix matches the specificity of .site-nav .nav-link.) */
.site-nav .nav-link-link, .site-nav .nav-link-toggle { display: none; }

/* Desktop: reveal on hover / keyboard focus only. */
@media (min-width: 921px) {
  .nav-item.has-dropdown:hover .dropdown,
  .nav-item.has-dropdown:focus-within .dropdown { display: block; }
  .site-nav .nav-link-link { display: flex; }
}

/* Mobile: hamburger opens the bar; tapping a label toggles its dropdown.
   Layout collapses to: logo (left) · CTA + hamburger (grouped right). */
@media (max-width: 920px) {
  .nav-toggle-label { display: block; order: 3; }
  .nav-cta { order: 2; margin-left: auto; padding: 9px 18px; }
  .site-nav {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 16px 24px 24px;
    gap: 14px;
    box-shadow: var(--shadow);
  }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .nav-item.has-dropdown { display: flex; flex-direction: column; height: auto; }
  .site-nav > a:not(.btn) { height: auto; padding: 4px 0; }
  /* Mobile: Locations is a tap-toggle (the label), not a direct link. */
  .site-nav .nav-link-toggle { display: flex; }
  .site-nav .nav-link-link { display: none; }
  /* Dropdown stays hidden until its checkbox is tapped. */
  .dropdown-toggle:checked ~ .dropdown { display: block; }
  .nav-item .dropdown {
    position: static;
    min-width: 0;
    border: none;
    border-left: 2px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    margin: 6px 0 0 12px;
    padding: 0;
  }
  .nav-item .dropdown a { padding: 8px 14px; }
  /* Declutter the bar: the outlined button drops out, Client Login moves
     into the mobile menu instead. */
  .nav-login { display: none; }
  .site-nav a.nav-login-mobile {
    display: flex;
    align-items: center;
    height: auto;
    padding: 4px 0;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.9rem;
  }
  .site-nav a.nav-login-mobile:hover { color: var(--sea); text-decoration: none; }
}

/* ---------- Announcement bar (light utility strip above the nav) ---------- */
.announce-bar {
  background: var(--beacon-soft);            /* soft teal #dceff1 — a clean, light strip above the white nav */
  color: var(--muted);
  font-size: 14px;
}
.announce-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 38px;
}
/* The hook can shrink and ellipsize (never wrap) so a long line can't push the
   right-side items off-screen or trigger horizontal scroll. */
.announce-msg { margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.announce-msg strong { font-weight: 700; color: var(--ink); }
.announce-msg-rest { color: var(--muted); }
.announce-right { display: flex; align-items: center; gap: 14px; white-space: nowrap; flex: none; }
.announce-email { color: var(--beacon); font-weight: 700; }
.announce-email:hover { color: var(--ink); text-decoration: none; }
.announce-divider { width: 1px; height: 15px; background: rgba(11, 37, 64, 0.18); }
.announce-phone { color: var(--beacon); font-weight: 700; }
.announce-phone:hover { color: var(--ink); text-decoration: none; }
@media (max-width: 1280px) { .announce-bar { font-size: 13px; } }
/* Narrow screens: show only the bold hook — hide the lighter second line and
   the long email; keep the tappable phone. One line tall, no wrap/scroll. */
@media (max-width: 600px) {
  .announce-msg-rest { display: none; }
  .announce-email, .announce-divider { display: none; }
  .announce-inner { gap: 12px; }
}
/* Smallest phones: the hook needs the full width, so the phone drops too. */
@media (max-width: 420px) {
  .announce-phone { display: none; }
}

/* ---------- Client login (placeholder portal page) ---------- */
.login-card {
  max-width: 420px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 36px 32px;
}
.login-card h1 { font-size: 1.6rem; line-height: 1.15; margin-bottom: 8px; }
.login-sub { color: var(--muted); margin-bottom: 22px; }
.login-card label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin: 14px 0 6px;
  color: var(--ink);
}
.login-card input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  color: var(--body);
  background: var(--paper);
}
.login-card input:focus-visible {
  outline: 3px solid var(--beacon);
  outline-offset: 1px;
  border-color: var(--beacon);
}
.login-submit { width: 100%; margin-top: 20px; }
.login-error {
  background: #fdecec;
  border: 1px solid #e6a6a6;
  color: #9b2c2c;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.92rem;
  margin-bottom: 18px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--ink);
  color: #e8eef2;
  overflow: hidden;
}
.hero::before {
  /* the beacon: a soft sweep of light across the harbor-dark hero */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 420px at 82% -10%, rgba(19, 145, 164, 0.28), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(43, 93, 116, 0.45), transparent 60%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
  /* Inherit the shared .container horizontal padding so the hero lines up with
     the nav and every other section; only set the vertical rhythm here. */
  padding-block: 90px;
}
/* Let grid columns shrink instead of overflowing the container (grid items
   default to min-width:auto, which lets the large H1 force horizontal scroll
   and knock the whole centered block out of alignment with the nav). */
.hero-inner > * { min-width: 0; }
.hero h1 { color: #fff; margin: 14px 0 18px; overflow-wrap: break-word; }
.hero h1 em { font-style: italic; color: var(--beacon); }
.hero .lead { font-size: 1.15rem; color: #c9d6dd; max-width: 34em; }
.hero .eyebrow { color: var(--accent-soft); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hero-proof {
  margin-top: 26px;
  font-size: 0.92rem;
  color: #a9bac4;
}
.hero-proof strong { color: var(--beacon); letter-spacing: 0.08em; }

.hero-card {
  background: #fff;
  color: var(--text);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.38);
  padding: 36px 38px;
}
.hero-card .tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1c7a4d;
  background: #e4f5ec;
  border-radius: 999px;
  padding: 4px 12px;
}
.hero-card h3 { margin: 18px 0 4px; font-family: var(--sans); font-size: 1.2rem; }
.hero-card .sub { font-size: 0.95rem; color: var(--muted); }
.hero-card .tag { font-size: 0.78rem; }
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 19px 0;
  border-bottom: 1px solid var(--line);
}
.stat-row:last-of-type { border-bottom: 0; }
.stat-row .label { font-size: 1.02rem; color: var(--muted); }
.stat-row .value { font-weight: 700; color: var(--ink); font-size: 1.55rem; }
.stat-row .delta { font-size: 0.92rem; color: #1c7a4d; font-weight: 700; margin-left: 8px; }

@media (max-width: 880px) {
  .hero-inner { grid-template-columns: 1fr; padding-block: 64px; }
  .hero-card { max-width: 440px; }
}

/* ---------- "Everything in one place" services overview ---------- */
.eip-grid {
  display: grid;
  grid-template-columns: 52fr 48fr;
  gap: 60px;
  align-items: center;
}
.eip-intro { color: var(--muted); max-width: 48ch; margin-bottom: 26px; }
.svc-list { list-style: none; margin: 0 0 28px; }
.svc-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
}
.svc-row:last-child { border-bottom: 0; }
.svc-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--beacon-soft);
  color: var(--beacon);
}
.svc-icon svg { width: 21px; height: 21px; }
.svc-label { flex: 1; font-weight: 700; color: var(--ink); }
.svc-label:hover { color: var(--beacon); text-decoration: none; }
.svc-tag { font-size: 0.82rem; font-weight: 600; color: var(--beacon); white-space: nowrap; }
/* The bundle row reads as the premium option without a hard sell. */
.svc-row-feature {
  background: var(--beacon-soft);
  border-radius: 14px;
  border-bottom: 0;
  margin-top: 8px;
  padding: 16px 14px;
}
.svc-row-feature .svc-icon { background: #fff; }

/* Right column: soft-teal anchor panel with floating stat cards */
.eip-visual { position: relative; min-height: 460px; display: flex; align-items: center; justify-content: center; }
/* Soft offset blob behind the figure for depth (the figure carries its own
   teal circle; this larger, lighter ring peeks out behind it). */
.eip-blob {
  position: absolute;
  top: 48%;
  left: 53%;
  width: min(92%, 460px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--beacon-soft) 0%, #e9f6f7 70%);
  border-radius: 50%;
  opacity: 0.5;
}
.eip-person {
  position: relative;
  width: min(82%, 400px);
  height: auto;
}
.eip-stat {
  position: absolute;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 46px -18px rgba(11, 37, 64, 0.34);
  padding: 15px 18px;
}
.eip-stat strong { display: block; color: var(--ink); font-size: 1.02rem; line-height: 1.2; }
.eip-stat-sub { display: block; color: var(--muted); font-size: 0.84rem; margin-top: 3px; }
.eip-stat-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--beacon-soft);
  color: var(--beacon);
}
.eip-stat-icon svg { width: 20px; height: 20px; }
.eip-stat-1 { top: 10px; left: 16px; right: 78px; display: flex; align-items: center; gap: 13px; }
.eip-stat-2 { top: 45%; left: -10px; display: flex; align-items: center; gap: 13px; }
.eip-stat-3 { bottom: 8px; right: 6px; width: 250px; }
.eip-pill {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--beacon);
  background: var(--beacon-soft);
  border-radius: 999px;
  padding: 3px 11px;
  margin-bottom: 8px;
}
.eip-price { display: block; font-family: var(--display); font-size: 2rem; color: var(--ink); line-height: 1; }
.eip-price-unit { font-size: 1rem; color: var(--muted); font-weight: 400; }

@media (max-width: 900px) {
  .eip-grid { grid-template-columns: 1fr; gap: 44px; }
  .eip-visual { width: 100%; max-width: 460px; margin: 8px auto 0; }
}
@media (max-width: 460px) {
  .eip-stat-1 { right: 40px; }
  .eip-stat-2 { left: 0; }
  .eip-stat-3 { width: 220px; }
}

/* ---------- "Build Your Plan" pricing estimator ---------- */
.estimator .section-head { margin-bottom: 36px; }
.est-grid {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 26px;
  align-items: stretch;
}
.est-inputs {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px 30px 34px;
}
.est-group + .est-group { margin-top: 28px; }
.est-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.est-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.est-pill {
  border: 1.5px solid transparent;
  background: var(--beacon-soft);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.est-pill:hover { border-color: var(--beacon); }
.est-pill[aria-pressed="true"] { background: var(--beacon); color: #fff; }
.est-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.est-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: 13px;
  padding: 13px 15px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.est-toggle:hover { border-color: var(--accent-soft); }
.est-toggle-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--beacon-soft);
  color: var(--beacon);
}
.est-toggle-icon svg { width: 20px; height: 20px; }
.est-toggle-label { flex: 1; font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.est-check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  color: #fff;
}
.est-check svg { width: 13px; height: 13px; opacity: 0; transition: opacity 0.12s ease; }
.est-toggle[aria-pressed="true"] { border-color: var(--beacon); background: var(--beacon-soft); }
.est-toggle[aria-pressed="true"] .est-toggle-icon { background: #fff; }
.est-toggle[aria-pressed="true"] .est-check { background: var(--beacon); border-color: var(--beacon); }
.est-toggle[aria-pressed="true"] .est-check svg { opacity: 1; }

/* Right: dark navy live-result card */
.est-result {
  background: var(--ink);
  color: #e8eef2;
  border-radius: 18px;
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
}
.est-result-label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 16px;
}
.est-amount { font-family: var(--display); color: #fff; line-height: 1.02; min-height: 56px; }
.est-amount .est-num { font-size: 3rem; font-weight: 600; letter-spacing: -0.01em; }
.est-amount .est-unit { font-size: 1.1rem; color: rgba(255, 255, 255, 0.7); font-family: var(--sans); margin-left: 6px; }
.est-amount .est-from { margin-left: 0; margin-right: 4px; }
.est-prompt {
  font-family: var(--sans);
  font-size: 1.08rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.74);
  letter-spacing: 0;
}
.est-separate { margin-top: 16px; font-size: 0.97rem; color: rgba(255, 255, 255, 0.74); }
.est-separate strong { color: #fff; font-weight: 600; }
.est-save { margin-top: 10px; font-weight: 700; color: var(--accent-soft); display: none; }
.est-save.show { display: block; }
.est-cta { margin-top: auto; align-self: flex-start; }
.est-result-label + .est-amount { margin-top: 0; }
.est-save + .est-cta, .est-separate + .est-cta, .est-amount + .est-cta { margin-top: 26px; }
.est-fine { margin-top: 16px; font-size: 0.79rem; color: rgba(255, 255, 255, 0.55); line-height: 1.5; }

@media (max-width: 900px) {
  .est-grid { grid-template-columns: 1fr; gap: 18px; }
  .est-cta { margin-top: 24px; }
}
@media (max-width: 440px) {
  .est-toggles { grid-template-columns: 1fr; }
}

/* ---------- Sections ---------- */
section { padding: 90px 0; }
section.tight { padding: 60px 0; }
section.alt { background: var(--band); }
.section-head { max-width: 680px; margin-bottom: 44px; }
/* Heading-to-paragraph gap is driven uniformly by the base h2 margin-bottom. */
.section-head p { color: var(--muted); }

/* ---------- Tools strip ---------- */
section.tools { text-align: center; padding: 38px 0; }
/* Let the heading + paragraph use the full width so each sits on one line on
   wide monitors (they still wrap naturally when the viewport is narrow). */
.tools .section-head { max-width: none; margin: 0 auto 24px; }
.tools .section-head h2 { margin-bottom: 8px; }
.tool-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 820px; margin: 0 auto; }
.tool-chips span {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
}
.tools .note { margin-top: 14px; font-size: 0.92rem; color: var(--muted); }

/* Software-compatibility logo marquee (Simple Icons, nominative fair use).
   The logo set is rendered twice; the track scrolls translateX(0 -> -50%) so
   the second copy lands exactly where the first started — a seamless loop. */
.logo-marquee {
  overflow: hidden;
  margin: 0 auto;
  /* fade the left/right edges so logos appear/disappear instead of hard-cutting */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: logo-marquee 36s linear infinite;
}
.tool-logo {
  height: 46px; /* 20% larger than the prior 38px */
  width: auto;
  flex: 0 0 auto;
  margin-right: 84px; /* even gap; wide enough that one logo set exceeds the widest
                         viewport, so translateX(-50%) never reveals an empty edge */
  color: var(--ink); /* for monochrome currentColor icons (e.g. NetSuite) */
  filter: grayscale(0%);
  opacity: 1;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.tool-logo:hover { filter: grayscale(100%); opacity: 0.5; }
@keyframes logo-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { -webkit-mask-image: none; mask-image: none; }
  .logo-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 20px 48px; }
  .logo-track .tool-logo { margin-right: 0; }
  .tool-logo.dup { display: none; } /* hide the duplicate set when static */
}
.tool-pill {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.tool-pill:hover { opacity: 1; }
.tool-attribution {
  margin: 10px auto 0;
  max-width: 620px;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--muted);
  opacity: 0.8;
}

/* ---------- Split feature rows ---------- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 44px 0;
}
.feature-row + .feature-row { border-top: 1px solid var(--line); }
.feature-row .visual {
  background: linear-gradient(150deg, var(--ink) 0%, var(--sea) 100%);
  border-radius: var(--radius);
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--beacon);
}
.feature-row .visual svg { width: 96px; height: 96px; }
.feature-row p { color: var(--muted); }
.feature-row .more { display: inline-block; margin-top: 16px; font-weight: 700; }
/* unDraw illustration variant: sits directly on the white section, no box */
.feature-row .visual.illus { background: none; min-height: 0; padding: 0; }
.feature-row .visual.illus .illustration {
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto;
}
/* Alternating rhythm: flagged rows put the illustration on the left (desktop) */
@media (min-width: 821px) {
  .feature-row.reverse .visual { order: -1; }
}
@media (max-width: 820px) {
  .feature-row { grid-template-columns: 1fr; gap: 24px; }
  .feature-row .visual { min-height: 160px; order: -1; }
  /* Illustrations stack above their text and scale down on mobile */
  .feature-row .visual.illus { min-height: 0; }
  .feature-row .visual.illus .illustration { max-width: 70%; }
}

/* ---------- Card grids ---------- */
.grid { display: grid; gap: 22px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; } }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card .kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--beacon);
  margin-bottom: 10px;
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 0.98rem; flex: 1; }
.card .more { margin-top: 18px; font-weight: 700; }

/* ---------- Checklist ---------- */
.checklist { list-style: none; display: grid; gap: 14px; }
.checklist li { padding-left: 32px; position: relative; color: var(--text); }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23dceff1' stroke='%231391a4' stroke-width='2'/%3E%3Cpath d='M5.5 10.2 L8.5 13.2 L14.5 7' fill='none' stroke='%230e7c8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.checklist li::after { content: none; }
.checklist strong { color: var(--ink); }

/* ---------- Process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; }
.step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  counter-increment: step;
}
.step::before {
  content: "Step " counter(step);
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--beacon);
  margin-bottom: 12px;
}
.step h3 { font-size: 1.1rem; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
/* Four-step variant (How it works): four across on desktop, single column on mobile. */
@media (min-width: 821px) { .steps.steps-4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; }
.faq details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  margin-bottom: 12px;
  padding: 0 20px;
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  padding: 18px 0;
  list-style: none;
  position: relative;
  padding-right: 32px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 14px;
  font-size: 1.4rem;
  color: var(--beacon-deep);
}
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 18px; color: var(--muted); }

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.quote {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}
.quote .stars { color: var(--beacon); letter-spacing: 2px; margin-bottom: 12px; }
.quote blockquote { font-size: 0.98rem; color: var(--text); }
.quote .who { margin-top: 16px; font-size: 0.88rem; color: var(--muted); font-weight: 600; }
@media (max-width: 820px) { .quotes { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--ink);
  color: #dbe6ec;
  border-radius: var(--radius);
  padding: 56px 48px;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(640px 300px at 90% -20%, rgba(19, 145, 164, 0.3), transparent 65%);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; margin-bottom: 12px; }
.cta-band p { max-width: 38em; }
.cta-band .hero-ctas { margin-top: 24px; }
@media (max-width: 640px) { .cta-band { padding: 40px 26px; } }

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  background: var(--ink);
  color: #d7e2e9;
  position: relative;
  overflow: hidden;
  padding: 72px 0;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 360px at 85% -20%, rgba(19, 145, 164, 0.24), transparent 60%);
}
.page-hero .container { position: relative; }
.page-hero h1 { color: #fff; margin: 12px 0 16px; max-width: 18em; }
.page-hero .lead { font-size: 1.12rem; color: #c2d0d8; max-width: 36em; }
.page-hero .eyebrow { color: var(--accent-soft); }
.page-hero .hero-ctas { margin-top: 26px; }
.breadcrumbs { font-size: 0.85rem; margin-bottom: 18px; color: #93a7b3; position: relative; }
.breadcrumbs a { color: #b9c9d3; }

/* ---------- Locations grid ---------- */
.loc-links { display: flex; flex-wrap: wrap; gap: 10px; }
.loc-links a {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
}
.loc-links a:hover { border-color: var(--beacon); text-decoration: none; background: var(--beacon-soft); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info .item { margin-bottom: 22px; }
.contact-info .item strong { display: block; color: var(--ink); margin-bottom: 4px; }
form .field { margin-bottom: 18px; }
form label { display: block; font-weight: 700; font-size: 0.9rem; color: var(--ink); margin-bottom: 6px; }
form input, form select, form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  background: #fff;
  color: var(--text);
}
form input:focus, form select:focus, form textarea:focus {
  outline: 3px solid var(--beacon-soft);
  border-color: var(--beacon);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: #aebfc9;
  padding: 64px 0 32px;
  margin-top: 80px;
  font-size: 0.94rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 36px 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
/* Top row: brand (left) + Get in Touch (right). The five link groups sit on
   the row below, one per column. */
.footer-brand {
  grid-column: 1 / 4;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-brand svg { margin-bottom: 0; flex: none; }
.footer-logo { display: inline-block; line-height: 0; }
.footer-logo svg { height: 42px; width: auto; }
.footer-brand-text { max-width: 52ch; }
.footer-brand-text h4 { margin-bottom: 6px; }
.footer-contact {
  grid-column: 4 / 6;
  grid-row: 1;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; grid-row: auto; }
  .footer-contact { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 620px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .footer-brand { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 {
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: #aebfc9; }
.site-footer a:hover { color: var(--beacon); }
.footer-brand svg { height: 42px; width: auto; margin-bottom: 14px; }
.footer-brand p { max-width: 26em; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  font-size: 0.85rem;
  color: #7e93a0;
}

/* ---------- Utility ---------- */
.center { text-align: center; }
.mt-2 { margin-top: 20px; }
.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--beacon);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
  z-index: 100;
}
.skip-link:focus { left: 16px; top: 12px; }

/* ---------- Pricing components (service pages, from docs/ specs) ---------- */
.trust-line { margin-top: 14px; color: #c2d0d8; font-weight: 600; font-size: 0.95rem; position: relative; }
.cta-note { margin-top: 10px; font-size: 0.88rem; color: #93a7b3; position: relative; }

.price-card { position: relative; }
.price-card .btn { margin-top: 22px; text-align: center; }
.price-card.popular { border-color: var(--beacon, #1391a4); box-shadow: var(--shadow); }
.price-card .badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--beacon, #1391a4);
  color: #0b2540;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.price-card .price {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--ink);
  margin: 6px 0 4px;
}
.price-card .price small { font-size: 0.95rem; font-weight: 400; color: var(--muted); margin-left: 2px; }
.price-card .best-for { color: var(--muted); font-size: 0.92rem; flex: 0; margin-bottom: 16px; }
.price-card .checklist { gap: 10px; flex: 1; }
.price-card .checklist li { font-size: 0.93rem; }
.price-card .per-emp { white-space: nowrap; }
/* Premium top tier — Dedicated CFO, distinguished as the highest offering */
.price-card.premium { background: var(--ink); border-color: var(--ink); box-shadow: var(--shadow); }
.price-card.premium h3 { color: #fff; }
.price-card.premium .price { color: var(--beacon); font-size: 1.4rem; }
.price-card.premium .card-desc { color: rgba(255, 255, 255, 0.82); font-size: 0.96rem; flex: 1; }

.pricing-disclaimer { margin-top: 22px; text-align: center; color: var(--muted); font-size: 0.9rem; }

/* Monthly / Prepay-12 toggle (pure CSS) */
.price-switch { position: absolute; opacity: 0; pointer-events: none; }
.toggle-row { display: flex; justify-content: center; gap: 0; margin-bottom: 34px; }
.toggle-row .opt {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 22px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
}
.toggle-row .opt-a { border-radius: 999px 0 0 999px; }
.toggle-row .opt-b { border-radius: 0 999px 999px 0; border-left: none; }
.price-switch:not(:checked) ~ .toggle-row .opt-a,
.price-switch:checked ~ .toggle-row .opt-b { background: var(--ink); color: #fff; border-color: var(--ink); }
.price-b { display: none; }
.price-switch:checked ~ .price-grid .price-a { display: none; }
.price-switch:checked ~ .price-grid .price-b { display: inline; }

/* Return-prep cards (tax page) */
.prep-list li { font-size: 0.95rem; }
.prep-price { font-weight: 700; color: var(--ink); }

/* CFO strategic projects */
.project-card .price { font-size: 1.3rem; margin: 0 0 8px; }

/* Cross-border gateway + snowbird */
.gateway ol.gateway-steps { margin: 18px 0 18px 22px; display: grid; gap: 10px; max-width: 44em; }
.snowbird-card { max-width: 860px; margin: 0 auto; }
.snowbird-card .cols-2-list { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .snowbird-card .cols-2-list { grid-template-columns: 1fr; } }

/* ============================================================
   Cross-border page — full visual rebuild
   ============================================================ */

/* ---- 1. Hero (two-column navy) ---- */
/* Top-align the two hero columns instead of centering. The text column makes
   the navy band ~1000px+ tall; centering the image cluster in that tall band
   pushed the circle/subject below the laptop viewport fold (it read as clipped
   at the band's bottom edge). Top-aligning anchors the cluster near the top of
   the band at a fixed offset, independent of band height, so the circle always
   keeps clear space above the fold/band bottom. */
.cb-hero .hero-inner { align-items: start; }
.cb-hero-text .lead { max-width: 40em; }
.cb-trust-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.cb-trust-chips span {
  font-size: 0.8rem; font-weight: 600; color: #d7e4ea;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px; padding: 7px 14px;
}
/* A small extra upward lift on top of the top-alignment above, for clear fold
   margin on short laptops. Transform only — no reflow; the cards move with it
   as a group and horizontal placement is unchanged. */
.cb-hero-visual { position: relative; min-height: 480px; transform: translateY(-40px); }
.cb-hero-panel {
  position: absolute; inset: 14px 6px; z-index: 0;
  background: linear-gradient(155deg, #dceff1, #bfe6ea);
  border-radius: 26px;
}
/* Hero: a soft pale-teal blob sized to the person (peeking out behind the
   head/shoulders) that fades into the navy section — no boxy panel framing. */
.cb-hero-blob {
  position: absolute; z-index: 0;
  left: 50%; top: 32%; transform: translate(-50%, -50%);
  width: 360px; height: 360px; max-width: 92%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    #dceff1 0%, #dceff1 50%, rgba(220, 239, 241, 0.5) 70%, rgba(220, 239, 241, 0) 80%);
}
/* Ambient professional photo: a true background-removed cutout (transparent
   PNG) floating on the pale blob — no panel box, no studio-grey rectangle.
   A light bottom-only fade melts the cropped torso into the section. The whole
   .cb-hero-visual is aria-hidden; the photo is decorative and is never
   captioned as a named staff member. */
.cb-hero-photo {
  position: absolute; z-index: 1;
  left: 50%; bottom: 0; transform: translateX(-50%);
  width: 76%; max-width: 350px; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}
.cb-float {
  position: absolute; z-index: 2; background: #fff; color: var(--text);
  border-radius: 14px; box-shadow: 0 22px 50px -18px rgba(0, 0, 0, 0.5);
}
.cb-float-cal { top: 8px; left: -10px; width: 268px; padding: 16px 18px; }
.cb-float-title { font-weight: 700; color: var(--ink); font-size: 0.92rem; margin-bottom: 10px; }
.cb-cal-row { display: flex; gap: 10px; align-items: baseline; font-size: 0.82rem; color: var(--muted); padding: 5px 0; border-top: 1px solid var(--line); }
.cb-cal-row:first-of-type { border-top: 0; }
.cb-cal-date { flex: 0 0 56px; font-weight: 700; color: var(--beacon); }
.cb-float-pill {
  top: 47%; right: -6px; background: var(--beacon); color: #fff;
  font-weight: 700; font-size: 0.9rem; padding: 12px 20px; border-radius: 999px;
}
.cb-float-checks { bottom: 10px; left: 22px; width: 240px; padding: 15px 18px; }
.cb-chk { display: flex; align-items: center; gap: 9px; font-weight: 600; color: var(--ink); font-size: 0.92rem; padding: 4px 0; }
.cb-chk-ic { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--beacon-soft); color: var(--beacon); font-weight: 800; font-size: 0.75rem; }
@media (max-width: 560px) {
  /* Taller visual so the portrait's face clears the floating cards (which are
     large relative to the narrow column); face sits in the gap between the
     calendar card (top) and the checks card (bottom), clear of the pill. */
  .cb-hero-visual { min-height: 580px; }
  .cb-hero-photo { max-width: 248px; bottom: 0; }
  .cb-hero-blob { width: 270px; height: 270px; top: 40%; }
  .cb-float-cal { left: 0; width: min(86%, 268px); }
  .cb-float-checks { left: 0; bottom: 0; }
  .cb-float-pill { right: 0; top: 38%; }
}

/* ---- 2. Icon stat bar ---- */
.cb-statbar-sec { background: var(--band); padding: 30px 0; }
.cb-statbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.cb-stat { display: flex; align-items: flex-start; gap: 13px; }
.cb-stat-ic { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--beacon); }
.cb-stat-ic svg { width: 23px; height: 23px; }
.cb-stat strong { display: block; color: var(--ink); font-size: 1rem; line-height: 1.25; }
.cb-stat span { color: var(--muted); font-size: 0.86rem; }
@media (max-width: 860px) { .cb-statbar { grid-template-columns: 1fr 1fr; gap: 22px; } }
@media (max-width: 480px) { .cb-statbar { grid-template-columns: 1fr; } }

/* ---- 3. Border gap — numbered question cards ---- */
.cb-qgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cb-qcard { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px 24px 26px; }
.cb-qnum { font-family: var(--display); font-weight: 600; font-size: 2.1rem; color: var(--beacon); line-height: 1; display: block; margin-bottom: 12px; }
.cb-qcard p { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .cb-qgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cb-qgrid { grid-template-columns: 1fr; } }

/* ---- 4. Persona cards + wide checks ---- */
.cb-persona .cb-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--beacon-soft); color: var(--beacon); margin-bottom: 14px; }
.cb-persona .cb-ic svg { width: 24px; height: 24px; }
.cb-persona p { color: var(--muted); }
.cb-checks-wide { margin-top: 30px; display: grid; gap: 14px; max-width: 1000px; }
.cb-checks-wide li { font-size: 1.02rem; }

/* ---- 5. Coordinated approach — roman-numeral cards + callout ---- */
.cb-numgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cb-numcard { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px 24px; }
.cb-num { font-family: var(--display); font-weight: 600; font-size: 1.7rem; color: var(--beacon); display: block; margin-bottom: 8px; letter-spacing: 0.02em; }
.cb-numcard h3 { margin-bottom: 8px; }
.cb-numcard p { color: var(--muted); }
.cb-callout { margin-top: 22px; text-align: center; background: var(--beacon); color: #fff; font-weight: 700; border-radius: 14px; padding: 18px 24px; }
@media (max-width: 760px) { .cb-numgrid { grid-template-columns: 1fr; } }

/* ---- 6. Move year — two-column with floating tags ---- */
.cb-moveyear { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.cb-moveyear-text .section-head { margin-bottom: 24px; }
/* Match the framed move-year photo to the "Built for both sides" couple photo
   (max-width 560px) so the page's section photos read at a consistent size. */
.cb-moveyear-visual { position: relative; width: 100%; max-width: 560px; margin: 0 auto; }
/* Single, subtle floating tag anchored to the photo's bottom-left corner. */
.cb-tag {
  position: absolute; z-index: 2; bottom: 14px; left: 14px;
  background: #fff; color: var(--ink);
  font-weight: 700; font-size: 0.76rem; padding: 6px 13px;
  border-radius: 999px; box-shadow: 0 8px 22px -10px rgba(11, 37, 64, 0.32);
}
@media (max-width: 820px) { .cb-moveyear { grid-template-columns: 1fr; gap: 32px; } .cb-moveyear-visual { max-width: 560px; } }

/* ---- 7. What it replaces — receipt comparison ---- */
.cb-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.cb-col { border-radius: 18px; padding: 30px 30px 26px; }
.cb-usual { background: #fff; border: 1px solid var(--line); font-size: 0.95rem; }
.cb-usual h3 { color: var(--muted); margin-bottom: 16px; font-size: 1.05rem; }
.cb-receipt { list-style: none; display: grid; gap: 0; margin: 0 0 14px; }
.cb-receipt li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px dashed var(--line); color: var(--ink); font-weight: 500; }
.cb-rtag { color: var(--muted); font-weight: 500; font-size: 0.82rem; white-space: nowrap; }
.cb-receipt-none { color: var(--muted); }
.cb-rtag-none { color: #b4623c; font-style: italic; font-weight: 600; font-size: 0.85rem; }
.cb-fineprint { color: var(--muted); font-size: 0.92rem; }
.cb-fairlight { background: var(--ink); color: #e8eef2; border: 2px solid var(--beacon); font-size: 1.05rem; padding: 36px 34px 30px; box-shadow: 0 30px 70px -34px rgba(11, 37, 64, 0.6); }
.cb-fairlight h3 { color: #fff; margin-bottom: 18px; font-size: 1.4rem; }
.cb-included { list-style: none; margin: 0 0 6px; }
.cb-included li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 13px 0 13px 28px; position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.cb-included li:last-child { border-bottom: 0; }
.cb-included li::before { content: "\2713"; position: absolute; left: 0; top: 13px; color: var(--accent-soft); font-weight: 800; }
.cb-incl { color: var(--accent-soft); font-weight: 600; font-size: 0.82rem; white-space: nowrap; }
.cb-bottomline { color: var(--accent-soft); font-weight: 700; }
/* Comparison pricing — left market-rate ranges (illustrative) + right Fairlight anchor */
.cb-usual-note { color: var(--muted); font-size: 0.82rem; margin: -8px 0 14px; }
.cb-rprice { color: var(--ink); font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.cb-receipt li.cb-receipt-total { border-bottom: 0; border-top: 2px solid var(--ink); margin-top: 2px; padding-top: 14px; font-weight: 800; }
.cb-receipt li.cb-receipt-total .cb-rprice { font-weight: 800; font-size: 1rem; }
.cb-fairlight-price { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 0 4px; margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font-weight: 700; font-size: 1.05rem; }
.cb-fp-amount { color: var(--accent-soft); font-weight: 800; font-size: 1.65rem; white-space: nowrap; }
/* Centered, slightly smaller headline so it fits one line above the two cards */
.cb-compare-head { max-width: none; text-align: center; margin-bottom: 36px; }
.cb-compare-head h2 { font-size: clamp(21px, 2.3vw, 30px); }
@media (max-width: 760px) { .cb-compare { grid-template-columns: 1fr; } }

/* ---- 8. How it works — 4-step timeline ---- */
.cb-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; }
.cb-timeline::before { content: ""; position: absolute; top: 26px; left: 12%; right: 12%; height: 2px; background: var(--accent-soft); opacity: 0.55; z-index: 0; }
.cb-tstep { position: relative; z-index: 1; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 24px; }
.cb-tstep-num { width: 38px; height: 38px; border-radius: 50%; background: var(--beacon); color: #fff; display: grid; place-items: center; font-weight: 800; margin-bottom: 16px; }
/* Centered heading above the steps (no hero photo) */
.cb-center-head { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
/* Consistent soft-teal art panel on every step, holding a coded mini-graphic */
.cb-tstep-art { height: 100px; margin-bottom: 16px; padding: 12px; background: var(--beacon-soft); border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.cb-tstep-art > * { box-shadow: 0 6px 14px -8px rgba(11, 37, 64, 0.3); }
/* Step 1 — mini calendar + duration pill */
.cb-mini-cal { display: grid; grid-template-columns: repeat(3, 10px); gap: 3px; padding: 5px; background: #fff; border-radius: 8px; }
.cb-mini-cal .cb-cal-top { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--beacon); }
.cb-mini-cal span:not(.cb-cal-top) { height: 9px; border-radius: 2px; background: #cfe4e9; }
.cb-mini-cal span.on { background: var(--beacon); }
.cb-mini-pill { background: var(--beacon); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
/* Step 2 — scope rows with checks */
.cb-mini-doc { display: grid; gap: 8px; background: #fff; border-radius: 8px; padding: 11px 13px; }
.cb-doc-row { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.cb-tick { width: 14px; height: 14px; border-radius: 50%; background: var(--beacon); position: relative; flex: none; }
.cb-tick::before { content: "\2713"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 9px; font-weight: 900; }
/* Step 3 — seal/badge */
.cb-mini-seal { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 8px; padding: 10px 14px; }
.cb-seal-check { width: 30px; height: 30px; border-radius: 50%; background: var(--beacon); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 15px; flex: none; }
.cb-seal-text { font-size: 0.76rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
/* Step 4 — results chart + filed badge */
.cb-mini-chart { display: flex; flex-direction: column; align-items: center; gap: 8px; box-shadow: none; }
.cb-bars { display: flex; align-items: flex-end; gap: 4px; height: 40px; background: #fff; border-radius: 8px; padding: 6px 9px; box-shadow: 0 6px 14px -8px rgba(11, 37, 64, 0.3); }
.cb-bars i { width: 7px; border-radius: 2px 2px 0 0; background: var(--beacon); }
.cb-bars i:last-child { background: var(--beacon-deep); }
.cb-done { background: #e4f5ec; color: #1c7a4d; font-size: 0.7rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.cb-tstep h3 { font-size: 1.06rem; margin-bottom: 6px; }
.cb-tstep p { color: var(--muted); font-size: 0.94rem; }
@media (max-width: 900px) { .cb-timeline { grid-template-columns: 1fr 1fr; } .cb-timeline::before { display: none; } }
@media (max-width: 540px) { .cb-timeline { grid-template-columns: 1fr; } }

/* ---- 9. Pricing — gateway + groups ---- */
.cb-gateway { display: grid; grid-template-columns: 1.05fr 1fr; gap: 32px; align-items: center; background: var(--beacon-soft); border: 1px solid var(--accent-soft); border-radius: 20px; padding: 34px 36px; }
.cb-gw-tag { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--beacon-deep); margin-bottom: 10px; }
.cb-gateway h3 { font-size: 1.45rem; margin-bottom: 6px; }
.cb-gateway .price { font-family: var(--display); font-size: 2.4rem; color: var(--ink); line-height: 1; }
.cb-gw-credit { color: var(--muted); margin: 8px 0 18px; }
.cb-gw-feat { background: #fff; border-radius: 14px; padding: 22px 24px; }
.cb-gw-feat .checklist { margin: 0; }
@media (max-width: 760px) { .cb-gateway { grid-template-columns: 1fr; gap: 24px; } }
.cb-pricing-group { margin-top: 42px; }
.cb-pricing-group > h3 { font-size: 1.2rem; margin-bottom: 18px; color: var(--ink); }
.cb-pricing-group > h3 span { color: var(--muted); font-weight: 500; font-size: 0.86rem; }
/* Secondary pricing folded into FAQ-style accordions, collapsed by default */
.cb-pricing-more { margin: 30px 0 16px; color: var(--ink); font-weight: 600; }
.cb-pricing-acc { display: grid; gap: 14px; }
.cb-acc { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 0 26px; }
.cb-acc > summary { cursor: pointer; list-style: none; position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; padding: 20px 40px 20px 0; font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.cb-acc > summary::-webkit-details-marker { display: none; }
.cb-acc > summary span { font-weight: 500; font-size: 0.85rem; color: var(--muted); }
.cb-acc > summary::after { content: "+"; position: absolute; right: 2px; top: 12px; font-size: 1.6rem; line-height: 1; color: var(--beacon-deep); }
.cb-acc[open] > summary::after { content: "\2013"; }
.cb-acc-body { padding: 2px 0 28px; }
/* Cards inside a collapsed accordion must not stay hidden by the scroll-reveal;
   they appear (already opaque) the moment the panel is expanded. */
.cb-acc-body .reveal { opacity: 1; transform: none; }

/* ---- 10. Experience — case-study cards ---- */
.cb-case { display: flex; flex-direction: column; }
.cb-case-label { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--beacon); margin-bottom: 10px; }
.cb-case h3 { font-size: 1.15rem; margin-bottom: 10px; }
.cb-case p { color: var(--muted); margin-bottom: 16px; }
.cb-result { margin-top: auto; font-size: 0.9rem; color: var(--ink); background: #e4f5ec; border-radius: 10px; padding: 12px 14px; }
.cb-result-tag { display: inline-block; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #1c7a4d; margin-right: 6px; }
.cb-case-note { margin-top: 22px; text-align: center; color: var(--muted); font-size: 0.85rem; }

/* ---- 11. Who you work with — credentials chips ---- */
.cb-creds { max-width: 880px; }
.cb-creds > p { color: var(--body); }
.cb-cred-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.cb-cred-chips span { font-weight: 700; color: var(--beacon-deep); background: var(--beacon-soft); border: 1px solid var(--accent-soft); border-radius: 999px; padding: 9px 18px; font-size: 0.92rem; }
/* Credentials visual: a background-removed cutout floating on a soft-teal blob
   (no frame, no card, no drop-shadow box) with two code-built badge cards
   layered over it. Ambient only — never captioned as a named staff member. */
.cb-creds-visual { position: relative; display: grid; place-items: center; min-height: 440px; max-width: 420px; margin-inline: auto; }
.cb-creds-blob {
  position: absolute; z-index: 0; left: 50%; top: 43%; transform: translate(-50%, -50%);
  width: 330px; height: 330px; max-width: 86%; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    #dceff1 0%, #dceff1 52%, rgba(220, 239, 241, 0.45) 72%, rgba(220, 239, 241, 0) 82%);
}
.cb-creds-cutout {
  position: relative; z-index: 1; width: auto; height: auto;
  max-height: 440px; max-width: 86%;
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}
.cb-creds-badge {
  position: absolute; z-index: 2; max-width: 235px;
  display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 14px; padding: 11px 15px;
  box-shadow: 0 18px 40px -18px rgba(11, 37, 64, 0.42);
}
.cb-creds-badge-1 { top: -40px; left: -64px; }
.cb-creds-badge-2 { bottom: 30px; right: -8px; }
.cb-creds-badge-ic { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--beacon-soft); color: var(--beacon); }
.cb-creds-badge-ic svg { width: 18px; height: 18px; }
.cb-creds-badge-t { font-weight: 700; color: var(--ink); font-size: 0.84rem; line-height: 1.25; }
.cb-creds-badge-sub { display: block; font-weight: 500; color: var(--muted); font-size: 0.72rem; margin-top: 1px; }
@media (max-width: 820px) {
  .cb-creds-visual { min-height: 400px; }
  .cb-creds-badge { max-width: 210px; }
  .cb-creds-badge-1 { top: -22px; left: -6px; }
  .cb-creds-badge-2 { right: 0; }
}

/* ---- 13. Final CTA — two-column ---- */
.cb-finalcta { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 36px; align-items: center; background: var(--mist); border-radius: 22px; padding: 44px 46px; }
.cb-finalcta-text h2 { margin-bottom: 12px; }
.cb-finalcta-checks { margin-top: 20px; display: grid; gap: 12px; }
.cb-finalcta-card { background: var(--ink); color: #e8eef2; border-radius: 18px; padding: 30px 30px 28px; text-align: center; }
.cb-finalcta-card h3 { color: #fff; margin-bottom: 8px; }
.cb-finalcta-card p { color: #b9c9d3; font-size: 0.95rem; margin-bottom: 20px; }
.cb-finalcta-card .btn { display: block; margin-top: 12px; }
.cb-finalcta-card .btn-outline { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.cb-finalcta-card .btn-outline:hover { background: rgba(255, 255, 255, 0.1); }
@media (max-width: 820px) { .cb-finalcta { grid-template-columns: 1fr; gap: 28px; padding: 34px 28px; } }

/* All-in-one executive callout */
.exec-callout { margin-top: 34px; }
.exec-callout .eyebrow { color: var(--beacon, #1391a4); }

.pricing-addons { margin-top: 26px; text-align: center; color: var(--muted); font-size: 0.92rem; max-width: 54em; margin-left: auto; margin-right: auto; }

/* ---------- Contact page (spec: docs/page-contact.md) ---------- */
.contact-grid { padding-top: 8px; }
.contact-info h1 { margin: 10px 0 14px; }
.contact-info .lead { font-size: 1.12rem; color: var(--muted); max-width: 32em; }
.contact-subhead { font-size: 1.15rem; margin: 28px 0 14px; }
.contact-form-col .contact-subhead:first-child { margin-top: 0; }
.response-note { margin-top: 14px; font-size: 0.9rem; color: var(--muted); }
.contact-details { margin-top: 26px; display: grid; gap: 14px; }
.contact-details .item { display: flex; align-items: flex-start; gap: 12px; margin: 0; }
.contact-details .ico { font-size: 1.2rem; line-height: 1.4; }
.contact-details strong { color: var(--ink); }
.area-note { margin-top: 24px; font-size: 0.88rem; color: var(--muted); max-width: 34em; }
.contact-form-col { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.optional { font-weight: 400; color: var(--muted); font-size: 0.82rem; }
.form-msg { margin-top: 18px; padding: 14px 16px; border-radius: 10px; font-weight: 600; font-size: 0.95rem; }
.form-success { background: #e4f5ec; color: #1c7a4d; border: 1px solid #b9e3cc; }
.form-error { background: #fbeaea; color: #a23232; border: 1px solid #f0c9c9; }
.no-pressure { margin-top: 40px; text-align: center; font-size: 0.9rem; color: var(--muted); }
@media (max-width: 820px) { .contact-form-col { padding: 24px; } }

/* ---------- Industry pages: service link cards ---------- */
.service-link-grid .card { text-decoration: none; color: inherit; }
.service-link-grid .card:hover { text-decoration: none; }
.service-link-grid .card .more { color: var(--sea); font-weight: 700; margin-top: 16px; display: inline-block; }

/* ---------- Legal / document pages (terms, privacy, cookies, security) ---------- */
.legal-doc {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--text);
}
.legal-doc h1 { margin-bottom: 6px; }
.legal-doc .legal-updated { color: var(--muted); margin: 0 0 28px; }
.legal-doc .legal-updated strong { font-weight: 600; }
.legal-doc h2 {
  font-size: 1.3rem;
  margin: 1.9em 0 0.5em;
  padding-top: 0.4em;
}
.legal-doc p { margin: 0 0 1.1em; }
.legal-doc ul { margin: 0 0 1.2em 1.4em; display: grid; gap: 8px; }
.legal-doc li { line-height: 1.7; }
.legal-doc a { color: var(--sea); text-decoration: underline; word-break: break-word; }
.legal-doc a:hover { color: var(--beacon-deep); }

/* Footer legal link row */
.footer-legal a { color: #7e93a0; }
.footer-legal a:hover { color: var(--teal-light, #cfe0e6); }

/* ---------- About: intro hero (H1 + intro paragraphs, centered block) ---------- */
.about-hero .about-intro { max-width: 800px; margin: 0 auto; text-align: center; }
.about-hero .about-intro .eyebrow { justify-content: center; }
.about-hero .about-intro h1 { max-width: none; }
.about-hero .about-intro .lead { max-width: none; margin: 0 auto; }
.about-hero .about-intro .lead + .lead { margin-top: 1.1em; }

/* ---------- About: Mission statement band (full-width, centered) ---------- */
.mission-band { padding: 96px 0; }
.mission-statement { max-width: 800px; margin: 0 auto; text-align: center; }
.mission-statement .eyebrow { justify-content: center; }
.mission-statement h2 { margin: 0 0 12px; }
.mission-statement p { font-size: 1.2rem; line-height: 1.7; color: var(--text); }
@media (max-width: 820px) { .mission-band { padding: 64px 0; } }

/* ---------- About: image + content rows (unDraw, white sections only) ---------- */
.media-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.media .illustration {
  width: 100%;
  max-width: 420px;
  height: auto;
  /* Cap height so portrait illustrations don't tower over the text column;
     the replaced-element sizing rules keep the aspect ratio intact. */
  max-height: 460px;
  display: block;
  margin: 0 auto;
}
/* Checklists read cleaner as a single column when set beside an illustration */
.media-body .checklist.cols-2 { grid-template-columns: 1fr; }
.media-body .section-head { margin-bottom: 24px; }
.media-body .about-prose { max-width: none; }
/* Image-right sections: push the illustration to the right column on desktop */
@media (min-width: 821px) {
  .media-row.media-right .media { order: 2; }
}
@media (max-width: 820px) {
  .media-row { grid-template-columns: 1fr; gap: 24px; }
  .media .illustration { max-width: 70%; }
  /* Founder image stacks BELOW the opening paragraphs (DOM order already
     places it after the text, so nothing extra is needed here). */
}

/* ---------- About ---------- */
.about-prose { max-width: 780px; font-size: 1.08rem; line-height: 1.75; }
.about-prose p + p { margin-top: 1.1em; }
.about-industry { margin-top: 36px; }
.about-industry h3 { margin-bottom: 8px; }
.about-industry p { color: var(--muted); margin-bottom: 12px; }
.about-industry .checklist { max-width: 640px; }

/* ---------- Blog ---------- */
.cat-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--beacon-deep);
  background: var(--beacon-soft);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 12px;
}

/* Blog index */
.cat-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.cat-tab {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 8px 18px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cat-tab:hover { border-color: var(--beacon); color: var(--ink); }
.cat-tab.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 980px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } }

.post-card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); text-decoration: none; }
.post-card a { text-decoration: none; color: inherit; display: block; }
.post-card h2, .post-card h3 { font-size: 1.2rem; line-height: 1.3; margin-bottom: 8px; }
.post-card-date { font-size: 0.82rem; color: var(--muted); margin-bottom: 12px; }
.post-card-excerpt { color: var(--muted); font-size: 0.96rem; }
.post-card .more { display: inline-block; margin-top: 16px; font-weight: 700; color: var(--sea); }
.post-empty { color: var(--muted); font-size: 1.05rem; }

/* Blog post */
.post .breadcrumbs { color: var(--muted); }
.post .breadcrumbs a { color: var(--sea); }
.post-header { max-width: 720px; margin: 18px 0 28px; }
.post-header h1 { margin: 6px 0 14px; }
.post-meta { font-size: 0.9rem; color: var(--muted); }
.post-prose { max-width: 680px; font-size: 1.08rem; line-height: 1.75; }
.post-prose h2 { font-size: 1.6rem; margin: 1.6em 0 0.5em; }
.post-prose h3 { font-size: 1.25rem; margin: 1.4em 0 0.4em; }
.post-prose p { margin: 0 0 1.1em; }
.post-prose ul, .post-prose ol { margin: 0 0 1.2em 1.4em; display: grid; gap: 8px; }
.post-prose li { line-height: 1.6; }
.post-prose a { color: var(--beacon-deep); font-weight: 600; text-decoration: underline; }
.post-prose a:hover { color: var(--beacon); }
.post-prose blockquote {
  margin: 0 0 1.3em;
  padding: 6px 20px;
  border-left: 4px solid var(--beacon);
  background: var(--mist);
  border-radius: 0 10px 10px 0;
  color: var(--text);
}
.post-prose blockquote p { margin: 0.6em 0; }
.post-prose code {
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 0.92em;
}
.post-prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.post-service-link { max-width: 680px; margin-top: 36px; font-weight: 600; }
.post-service-link a { color: var(--sea); }

/* ---------- Scroll-reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-group .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-group .reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal-group .reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal-group .reveal:nth-child(4) { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Cross-border section photographs (Unsplash, free commercial license) ----
   Replaces the earlier unDraw illustrations on cross-border.html. The imgs
   carry `illustration cb-photo`: the `illustration` class lets gen.py's central
   reveal injection animate them; these rules sit after `.media .illustration`
   in the file, so on equal specificity they win and give the photo treatment
   (rounded corners + soft shadow) at a larger size than a line illustration. */
.cb-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--line, #e7e2d8);
  box-shadow: 0 26px 60px -28px rgba(11, 37, 64, 0.45);
}
.media .cb-photo {
  max-width: 600px;
  max-height: none;
  margin: 0 auto;
}
/* Move-year: the photo sits on the soft-teal panel, floating tag pills
   overlapping its corners. */
.cb-moveyear-photo {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 18px 40px -24px rgba(11, 37, 64, 0.35);
}
@media (max-width: 820px) {
  .media .cb-photo { max-width: 100%; }
}

/* "Built for both sides" section: the persona-card grid was butting directly
   against the bottom of the photo row (zero gap), so the photo's shadow and
   its reveal-in dip crowded the cards. Add clear separation, and back the
   photo with a small offset teal panel for depth (sized to the image — no
   large empty teal area). */
.cb-bothsides .grid.cols-3 { margin-top: 64px; }
.cb-bothsides .cb-figure {
  position: relative; display: block; max-width: 560px; margin: 0 auto;
}
.cb-bothsides .cb-figure-blob {
  position: absolute; inset: 0; z-index: 0;
  transform: translate(16px, 16px);
  background: #dceff1; border-radius: 22px;
}
.cb-bothsides .cb-figure .cb-photo {
  position: relative; z-index: 1; margin: 0; max-width: 100%;
}

/* ============================================================
   About page elements: stat bar, all-in-one card, comparison
   ============================================================ */

/* 1) Stat bar — 4-up, big navy value with a teal accent, muted label,
   thin dividers between items on desktop; 2x2 then single on mobile. */
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.about-stat { padding: 4px 30px; border-left: 1px solid var(--line); }
.about-stat:first-child { border-left: 0; padding-left: 0; }
.about-stat-num { color: var(--ink); font-weight: 800; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.06; letter-spacing: -0.01em; }
.about-stat-num::after { content: ""; display: block; width: 26px; height: 3px; background: var(--beacon); border-radius: 2px; margin: 11px 0 12px; }
.about-stat-label { color: var(--muted); font-size: 0.9rem; line-height: 1.4; }
@media (max-width: 760px) {
  .about-stats { grid-template-columns: 1fr 1fr; gap: 28px 0; }
  .about-stat { padding: 0 22px; }
  .about-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 430px) {
  .about-stats { grid-template-columns: 1fr; gap: 22px; }
  .about-stat { border-left: 0; padding: 0; }
}

/* 2) All-in-one card — white card on a soft-teal panel, navy text, teal accents. */
.aio-stage { max-width: 460px; margin: 0 auto; background: var(--beacon-soft); border-radius: 26px; padding: clamp(22px, 4vw, 40px); }
.aio-card { background: #fff; border-radius: 16px; padding: 24px 26px; box-shadow: 0 26px 56px -30px rgba(11, 37, 64, 0.4); }
.aio-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.aio-card-head h3 { color: var(--ink); font-size: 1.18rem; line-height: 1.2; }
.aio-pill { flex: none; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--beacon); border-radius: 999px; padding: 5px 12px; }
.aio-rows { list-style: none; margin: 0; }
.aio-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--line); color: var(--ink); font-weight: 500; }
.aio-rows li:last-child { border-bottom: 0; }
.aio-v { color: var(--ink); font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.aio-v-zero { color: var(--beacon); }

/* 3) Comparison — muted "before" (left) vs teal/navy "Fairlight" (right). */
.cmp-head { max-width: none; text-align: center; margin-bottom: 34px; }
.cmp-head h2 { font-size: clamp(21px, 2.3vw, 30px); }
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.cmp-col { border-radius: 18px; padding: 28px 28px 24px; }
.cmp-col h3 { font-size: 1.15rem; margin-bottom: 16px; }
.cmp-list { list-style: none; margin: 0 0 16px; display: grid; gap: 12px; }
.cmp-list li { position: relative; padding-left: 28px; line-height: 1.45; }
.cmp-list li::before { position: absolute; left: 0; top: 0.05em; font-weight: 800; }
.cmp-foot { margin: 0; font-size: 0.95rem; }
/* before */
.cmp-before { background: #fff; border: 1px solid var(--line); }
.cmp-before h3 { color: var(--muted); }
.cmp-before .cmp-list li { color: var(--muted); }
.cmp-before .cmp-list li::before { content: "\2013"; color: #b0b7bd; }
.cmp-before .cmp-foot { color: var(--muted); }
/* after (mirrors the all-in-one card: white card, teal accents, navy text) */
.cmp-after { background: #fff; border: 2px solid var(--beacon); box-shadow: 0 28px 64px -34px rgba(11, 37, 64, 0.4); }
.cmp-after h3 { color: var(--ink); }
.cmp-after .cmp-list li { color: var(--ink); }
.cmp-after .cmp-list li::before { content: "\2713"; color: var(--beacon); }
.cmp-after .cmp-foot { color: var(--beacon-deep); font-weight: 700; }
@media (max-width: 760px) { .cmp-grid { grid-template-columns: 1fr; } }

/* ============================================================
   How It Works graphics + sections, Contact polish, FAQ nav
   (code-built mini-graphics in the cross-border card style)
   ============================================================ */

/* Reusable mini-graphic card */
.mg-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; box-shadow: 0 24px 54px -30px rgba(11, 37, 64, 0.45); text-align: left; }
.mg-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 700; color: var(--ink); font-size: 0.95rem; margin-bottom: 10px; }
.mg-tag { flex: none; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--beacon); border-radius: 999px; padding: 4px 9px; }
.mg-li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.86rem; color: var(--ink); font-weight: 600; padding: 8px 0; border-top: 1px solid var(--line); }
.mg-card > .mg-li:first-of-type { border-top: 0; }
.mg-ic { flex: none; width: 21px; height: 21px; border-radius: 6px; background: var(--beacon-soft); color: var(--beacon); display: grid; place-items: center; font-weight: 800; font-size: 0.72rem; margin-top: 1px; }
.mg-sub { display: block; color: var(--muted); font-weight: 500; font-size: 0.78rem; }
.mg-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.86rem; color: var(--ink); font-weight: 600; padding: 8px 0; border-top: 1px solid var(--line); }
.mg-card > .mg-kv:first-of-type { border-top: 0; }
.mg-val { color: var(--beacon); font-weight: 700; white-space: nowrap; }
.mg-val-none { color: var(--muted); font-style: italic; }
.mg-chip { display: inline-block; margin-top: 12px; font-size: 0.72rem; font-weight: 700; color: var(--beacon-deep); background: var(--beacon-soft); border-radius: 999px; padding: 6px 12px; }
.mg-slots { display: flex; gap: 8px; flex-wrap: wrap; }
.mg-slot { font-size: 0.78rem; font-weight: 700; color: var(--beacon-deep); background: var(--beacon-soft); border: 1px solid #cfe7ea; border-radius: 8px; padding: 7px 11px; }

/* How It Works hero — two columns with the onboarding card */
.hiw-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hiw-hero-aside .mg-card { max-width: 360px; }
@media (max-width: 860px) { .hiw-hero { grid-template-columns: 1fr; } .hiw-hero-aside .mg-card { max-width: 420px; margin: 24px auto 0; } }

/* Per-step mini-graphic */
.step-mg { margin-top: 16px; box-shadow: 0 16px 38px -26px rgba(11, 37, 64, 0.4); }
.step-mg .mg-title { font-size: 0.85rem; }

/* "What you'll never deal with here" — 4 cards with a teal strike mark */
.hiw-never { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.never-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px 22px; }
.never-x { width: 34px; height: 34px; border-radius: 9px; background: var(--beacon-soft); color: var(--beacon); display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; margin-bottom: 14px; }
.never-card h3 { font-size: 1.02rem; color: var(--ink); margin-bottom: 7px; }
.never-card p { color: var(--muted); font-size: 0.92rem; }
@media (max-width: 860px) { .hiw-never { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .hiw-never { grid-template-columns: 1fr; } }

/* Onboarding timeline — numbered 1–4 */
.hiw-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.tl-num { width: 40px; height: 40px; border-radius: 50%; background: var(--beacon); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; margin-bottom: 14px; }
.tl-when { font-weight: 700; color: var(--ink); font-size: 1rem; margin-bottom: 6px; }
.tl-step p { color: var(--muted); font-size: 0.93rem; }
@media (max-width: 860px) { .hiw-timeline { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .hiw-timeline { grid-template-columns: 1fr; } }

/* Contact: themed icons, "what we'll discuss", reassurance strip */
.contact-details .ico { width: 38px; height: 38px; border-radius: 10px; background: var(--beacon-soft); color: var(--beacon); display: grid; place-items: center; flex: none; }
.contact-details .ico svg { width: 20px; height: 20px; }
.contact-discuss { margin-bottom: 26px; }
.contact-discuss h2 { font-size: 1.15rem; margin-bottom: 12px; }
.contact-reassure { background: var(--beacon-soft); border-radius: 18px; padding: 30px 32px; text-align: center; max-width: 760px; margin: 0 auto; }
.contact-reassure h2 { font-size: 1.2rem; color: var(--ink); margin-bottom: 8px; }
.contact-reassure p { color: var(--muted); max-width: 46em; margin: 0 auto 16px; }
.reassure-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.reassure-chips span { font-size: 0.84rem; font-weight: 700; color: var(--beacon-deep); background: #fff; border: 1px solid #cfe7ea; border-radius: 999px; padding: 7px 16px; }

/* FAQ: intro, jump-nav, category headings */
.faq-intro { color: #c2d0d8; font-size: 1.08rem; max-width: 40em; margin: 14px auto 0; }
.faq-jumpnav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 10px; }
.faq-jumpnav a { font-size: 0.86rem; font-weight: 700; color: var(--beacon-deep); background: var(--beacon-soft); border-radius: 999px; padding: 8px 15px; }
.faq-jumpnav a:hover { background: var(--beacon); color: #fff; text-decoration: none; }
.faq-cat { margin-top: 40px; scroll-margin-top: 90px; }
.faq-cat:first-of-type { margin-top: 14px; }
.faq-cat-head { font-size: 1.25rem; color: var(--ink); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--beacon-soft); }

/* ============================================================
   Industry pages — shared upgraded template components
   ============================================================ */
/* hero topic chips (light pills on the navy hero) */
.ind-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 6px; }
.ind-chips span { font-size: 0.8rem; font-weight: 600; color: #d7e4ea; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; padding: 7px 14px; }

/* "Built for [industry]" 4-up strip */
.ind-builtfor { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ind-bf { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.ind-bf-ic { width: 36px; height: 36px; border-radius: 9px; background: var(--beacon-soft); color: var(--beacon); display: grid; place-items: center; margin-bottom: 12px; }
.ind-bf-ic svg { width: 19px; height: 19px; }
.ind-bf strong { display: block; color: var(--ink); font-size: 0.98rem; margin-bottom: 5px; }
.ind-bf strong + span { color: var(--muted); font-size: 0.88rem; line-height: 1.45; }
@media (max-width: 880px) { .ind-builtfor { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ind-builtfor { grid-template-columns: 1fr; } }

/* icon cards — challenges (2-col beside illustration) + what-we-handle (3-col) */
.ind-cardgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ind-cardgrid.cols-2 { grid-template-columns: 1fr 1fr; }
.ind-icard { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px 20px; }
.ind-icard-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--beacon-soft); color: var(--beacon); display: grid; place-items: center; margin-bottom: 12px; }
.ind-icard-ic svg { width: 20px; height: 20px; }
.ind-icard h3 { font-size: 1rem; color: var(--ink); margin-bottom: 6px; }
.ind-icard p { color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
@media (max-width: 880px) { .ind-cardgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ind-cardgrid, .ind-cardgrid.cols-2 { grid-template-columns: 1fr; } }

/* small teal icon added to the existing Who-we-serve cards */
.card .ind-card-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--beacon-soft); color: var(--beacon); display: grid; place-items: center; margin-bottom: 12px; }
.card .ind-card-ic svg { width: 18px; height: 18px; }

/* typical engagements (3 representative scenario cards) */
.ind-typical { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ind-teng { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px 22px; }
.ind-teng h3 { font-size: 1.05rem; color: var(--ink); margin-bottom: 14px; }
.ind-teng .te-row { margin-bottom: 12px; }
.ind-teng .te-row:last-child { margin-bottom: 0; }
.ind-teng .te-k { display: block; font-weight: 800; color: var(--beacon-deep); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 3px; }
.ind-teng .te-row p { color: var(--muted); font-size: 0.92rem; line-height: 1.5; margin: 0; }
.ind-rep-note { color: var(--muted); font-size: 0.86rem; margin-top: 18px; font-style: italic; }
@media (max-width: 880px) { .ind-typical { grid-template-columns: 1fr; } }

/* engagement paths / where to start (3 cards) */
.ind-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ind-path { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px 22px; display: flex; flex-direction: column; }
.ind-path .eyebrow { margin-bottom: 10px; }
.ind-path h3 { font-size: 1.1rem; color: var(--ink); margin-bottom: 8px; }
.ind-path p { color: var(--muted); font-size: 0.93rem; line-height: 1.5; }
.ind-path-price { color: var(--ink); font-weight: 800; font-size: 1.1rem; margin-top: 12px; }
.ind-path .more { margin-top: 14px; font-weight: 600; color: var(--beacon); }
.ind-paths-note { text-align: center; color: var(--muted); margin-top: 24px; }
@media (max-width: 880px) { .ind-paths { grid-template-columns: 1fr; } }

/* what you can count on (points + engagement mini-graphic) */
.ind-counton { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.ind-counton-list { list-style: none; display: grid; gap: 18px; margin: 0; }
.ind-counton-list li { padding-left: 34px; position: relative; color: var(--text); line-height: 1.5; }
.ind-counton-list li::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 7px; background: var(--beacon-soft); color: var(--beacon); font-weight: 800; font-size: 0.78rem; display: grid; place-items: center; }
.ind-counton-list strong { color: var(--ink); }
.ind-counton .mg-card { max-width: 380px; }
@media (max-width: 860px) { .ind-counton { grid-template-columns: 1fr; } }

/* who you work with */
.ind-who { max-width: 760px; display: grid; gap: 16px; }
.ind-who p { color: var(--text); }
.ind-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.ind-badge { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; font-weight: 700; color: var(--ink); font-size: 0.9rem; }
.ind-badge-ic { width: 26px; height: 26px; border-radius: 7px; background: var(--beacon-soft); color: var(--beacon); display: grid; place-items: center; flex: none; }
.ind-badge-ic svg { width: 15px; height: 15px; }

/* ============================================================
   About page — added sections after "Our promise"
   ============================================================ */
.about-add-intro { color: var(--muted); font-size: 1.08rem; max-width: 42em; margin: -4px 0 28px; }

/* Section 1: How we work, in writing — points + Engagement Letter card */
.eng-row { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 56px); align-items: center; }
.eng-stage { position: relative; max-width: 420px; margin: 0 auto; }
.eng-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px 30px 24px; box-shadow: 0 30px 70px -34px rgba(11, 37, 64, 0.5); }
.eng-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 16px; }
.eng-title { font-family: var(--display); font-size: 1.3rem; font-weight: 600; color: var(--ink); }
.eng-sub { font-size: 0.76rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.eng-doclabel { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--beacon-deep); margin-bottom: 8px; }
.eng-body { color: var(--text); font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; }
.eng-sign { border-top: 1px dashed var(--line); padding-top: 14px; }
.eng-sign-name { font-family: var(--display); font-style: italic; font-size: 1.15rem; color: var(--ink); }
.eng-chip { position: absolute; z-index: 2; font-weight: 700; font-size: 0.78rem; padding: 8px 14px; border-radius: 999px; box-shadow: 0 14px 32px -14px rgba(11, 37, 64, 0.55); }
.eng-chip-1 { top: -14px; right: 16px; background: var(--beacon); color: #fff; }
.eng-chip-2 { bottom: -14px; left: 16px; background: #fff; color: var(--beacon-deep); border: 1px solid var(--line); }
@media (max-width: 860px) { .eng-row { grid-template-columns: 1fr; } .eng-stage { margin: 28px auto 14px; } }

/* Section 2: The whole back office — service rows + ambient card stack */
.bo-row { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 56px); align-items: center; }
.svc-rows { display: grid; gap: 10px; }
.svc-row { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; transition: border-color 0.15s, transform 0.15s; }
.svc-row:hover { border-color: var(--beacon); transform: translateX(3px); text-decoration: none; }
.svc-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--beacon-soft); color: var(--beacon); display: grid; place-items: center; }
.svc-ic svg { width: 18px; height: 18px; }
.svc-name { font-weight: 700; color: var(--ink); font-size: 0.98rem; }
.svc-desc { margin-left: auto; color: var(--muted); font-size: 0.88rem; text-align: right; }
.svc-row-hl { border-color: var(--beacon); background: var(--beacon-soft); }
.svc-row-hl .svc-ic { background: var(--beacon); color: #fff; }
.svc-row-hl .svc-name { color: var(--ink); }
.bo-graphic { position: relative; background: var(--beacon-soft); border-radius: 24px; padding: clamp(22px, 4vw, 36px); display: grid; gap: 14px; max-width: 400px; margin: 0 auto; }
.bo-graphic .mg-card { margin: 0; }
.bo-mini { color: var(--muted); font-size: 0.86rem; margin: 2px 0 0; }
.bo-price-card { display: block; }
.bo-price-card:hover { text-decoration: none; }
.bo-price { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bo-price .bo-amt { color: var(--ink); font-weight: 800; font-size: 1.15rem; }
@media (max-width: 860px) { .bo-row { grid-template-columns: 1fr; } .bo-graphic { margin-top: 28px; } }

/* Section 3: How It Works preview — 4 compact cards with mini-graphics */
.hiw-preview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.hp-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 20px; }
.hp-graphic { background: var(--paper); border: 1px solid var(--line); border-radius: 11px; padding: 14px; margin-bottom: 16px; min-height: 86px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.hp-card h3 { font-size: 1rem; color: var(--ink); margin-bottom: 6px; }
.hp-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.hp-cal { display: flex; gap: 7px; flex-wrap: wrap; }
.hp-slot { font-size: 0.74rem; font-weight: 700; color: var(--beacon-deep); background: var(--beacon-soft); border: 1px solid #cfe7ea; border-radius: 7px; padding: 6px 9px; }
.hp-kv { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.hp-kv .hp-tag { color: #fff; background: var(--beacon); border-radius: 999px; padding: 3px 10px; font-size: 0.72rem; font-weight: 800; }
.hp-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--beacon-soft); color: var(--beacon); display: grid; place-items: center; }
.hp-ic svg { width: 19px; height: 19px; }
.hp-spark { color: var(--beacon); }
.hp-spark svg { width: 100%; height: 34px; }
.about-preview-link { margin-top: 24px; font-weight: 700; }
.about-preview-link a { color: var(--beacon); }
@media (max-width: 880px) { .hiw-preview { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .hiw-preview { grid-template-columns: 1fr; } }

/* Section 4 closing band: two buttons on navy */
.about-faq-band .hero-ctas { justify-content: center; }