/* ==========================================================================
   Kafoo CPA, Design System
   Brand: #0f3837 dark teal · #1e7575 teal · #cde8e8 light blue · #fcf9e2 cream
   Type: Inter (self-hosted variable). Buttons: sharp corners. Motif: rising arrows.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Fonts */
/* Inter variable, subset to Latin plus the punctuation this site uses and
   converted to WOFF2: 875 KB down to 95 KB, with both the wght and opsz axes
   intact. The italic face was removed because nothing on the site renders
   italic (every cite, em and address is set to font-style: normal), and the
   browser synthesises an oblique in the unlikely event something needs one. */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- 2. Tokens */
:root {
  /* Brand */
  --dark: #0f3837;
  --teal: #1e7575;
  --lightblue: #cde8e8;
  --cream: #fcf9e2;
  --white: #ffffff;

  /* Gold, derived from the cream so the palette's warm side is actually
     visible. DECORATIVE ONLY: --gold sits at roughly 2.5:1 on white, which is
     fine for a filled star or a 1px rule and far too low for text. Never set
     it on body copy, a link, a heading, or any text-bearing surface. Use
     --gold-on-dark on the dark band, where it clears 4.5:1. */
  --gold: #c9a227;
  --gold-on-dark: #e0c05a;

  /* Derived, one continuous flow, no disconnected gray boxes (audit #6) */
  --dark-2: #0b2b2a;
  --dark-3: #16504e;
  --teal-hover: #175d5d;
  --tint-1: #fbfcfb;   /* barely-there warm white */
  --tint-2: #f4f8f7;   /* whisper teal */
  --tint-3: #eaf3f2;   /* soft teal wash */
  --cream-2: #fdfcf1;
  --line: #dfe9e8;
  --line-strong: #c6d9d8;
  --line-warm: #e8e2c8;   /* borders on cream, so edges do not read cold */

  /* Text */
  --ink: #0f3837;
  --ink-2: #40605e;
  --ink-3: #6b8583;
  --on-dark: #f2f8f7;
  --on-dark-2: #b9d4d2;

  /* Type scale (fluid) */
  --fs-display: clamp(2.55rem, 1.35rem + 3.6vw, 4.5rem);
  --fs-h1: clamp(2.2rem, 1.3rem + 2.9vw, 3.65rem);
  --fs-h2: clamp(1.85rem, 1.25rem + 1.85vw, 2.75rem);
  --fs-h3: clamp(1.35rem, 1.1rem + 0.85vw, 1.8rem);
  --fs-h4: clamp(1.12rem, 1.02rem + 0.34vw, 1.32rem);
  --fs-lead: clamp(1.06rem, 0.99rem + 0.32vw, 1.28rem);
  --fs-body: 1.0rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-label: 0.75rem;

  /* Space */
  --sp-section: clamp(4rem, 2.4rem + 5vw, 7.5rem);
  --sp-section-sm: clamp(2.75rem, 1.8rem + 3vw, 4.5rem);
  --gutter: clamp(1.15rem, 0.6rem + 2vw, 2.5rem);
  --maxw: 1240px;
  --maxw-narrow: 760px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.5s;
  --dur-fast: 0.22s;

  --shadow-sm: 0 1px 2px rgba(15, 56, 55, 0.05), 0 4px 14px rgba(15, 56, 55, 0.05);
  --shadow-md: 0 2px 6px rgba(15, 56, 55, 0.06), 0 16px 42px rgba(15, 56, 55, 0.09);
  --shadow-lg: 0 4px 12px rgba(15, 56, 55, 0.07), 0 30px 70px rgba(15, 56, 55, 0.13);

  --header-h: 78px;
}

/* --------------------------------------------------------------- 3. Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  /* `clip` (not `hidden`) so the off-canvas mobile nav and decorative
     overhangs cannot create horizontal scroll, without turning the root
     into a scroll container and breaking the sticky header. */
  overflow-x: clip;
}
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.68;
  color: var(--ink-2);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv05' 1, 'cv11' 1, 'ss01' 1;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--teal); text-decoration: none; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 400; line-height: 1.22; }
h4 { font-size: var(--fs-h4); font-weight: 500; line-height: 1.34; letter-spacing: -0.012em; }
p { text-wrap: pretty; }
strong, b { font-weight: 600; color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
::selection { background: var(--lightblue); color: var(--dark); }

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 2000;
  background: var(--dark); color: var(--cream);
  padding: 12px 20px; font-size: var(--fs-sm); font-weight: 600;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 12px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- 4. Layout */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: 100%; max-width: var(--maxw-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sp-section); position: relative; }
.section--sm { padding-block: var(--sp-section-sm); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Continuous background flow (audit #6) */
.bg-white  { background: var(--white); }
.bg-tint   { background: var(--tint-2); }
.bg-tint-3 { background: var(--tint-3); }
.bg-cream  { background: var(--cream); }
.bg-dark   { background: var(--dark); color: var(--on-dark-2); }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 { color: var(--cream); }

/* White cards sitting on cream need a warm edge, or the teal-grey --line
   reads cold against it. */
.bg-cream .card,
.bg-cream .quote-card,
.bg-cream .service-card,
.bg-cream .post-card,
.bg-cream .faq,
.bg-cream .faq__item,
.bg-cream .stats { border-color: var(--line-warm); }

/* Soft gradient seams so sections read as one page, not stacked boxes */
.seam-top::before,
.seam-bottom::after {
  content: ''; position: absolute; left: 0; right: 0; height: 90px; pointer-events: none;
}
.seam-top::before { top: 0; background: linear-gradient(to bottom, rgba(234,243,242,.75), transparent); }
.seam-bottom::after { bottom: 0; background: linear-gradient(to top, rgba(234,243,242,.75), transparent); }

.grid { display: grid; gap: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- 5. Type helpers */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 1.15rem;
}
.eyebrow::before {
  content: ''; width: 26px; height: 2px; background: var(--gold); flex: none;
}
.bg-dark .eyebrow { color: var(--lightblue); }
.bg-dark .eyebrow::before { background: var(--gold-on-dark); }

.display { font-size: var(--fs-display); font-weight: 200; letter-spacing: -0.032em; line-height: 1.06; }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-2); }
.bg-dark .lead { color: var(--on-dark-2); }
.small { font-size: var(--fs-sm); }
.muted { color: var(--ink-3); }
.center { text-align: center; }
.measure { max-width: 62ch; }
.measure-sm { max-width: 52ch; }
.center .measure, .center .measure-sm { margin-inline: auto; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .6rem; } .mt-2 { margin-top: 1.15rem; }
.mt-3 { margin-top: 1.9rem; } .mt-4 { margin-top: 2.75rem; } .mt-5 { margin-top: 4rem; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 1.15rem; } .mb-3 { margin-bottom: 1.9rem; }
.mb-4 { margin-bottom: 2.75rem; }

.section-head { max-width: 62ch; margin-bottom: clamp(2.2rem, 1.4rem + 2vw, 3.6rem); }
.section-head.center { margin-inline: auto; }

/* --------------------------------------------------------------- 6. Buttons (sharp corners) */
.btn {
  --btn-bg: var(--teal);
  --btn-fg: var(--cream);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.65em;
  padding: 1.05rem 1.9rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: 0;                       /* sharp corners, brand rule */
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.005em;
  text-align: center; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--dark);
  transform: translateY(101%);
  transition: transform 0.42s var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--cream); border-color: var(--dark); }
.btn:active { transform: translateY(1px); }
.btn .ico-arrow { transition: transform var(--dur-fast) var(--ease); flex: none; }
.btn:hover .ico-arrow { transform: translate(4px, -4px); }

.btn--outline { --btn-bg: transparent; --btn-fg: var(--dark); border-color: var(--dark); }
.btn--outline::before { background: var(--dark); }
.btn--light { --btn-bg: var(--cream); --btn-fg: var(--dark); }
.btn--light::before { background: var(--white); }
.btn--light:hover, .btn--light:focus-visible { color: var(--dark); border-color: var(--white); }
.btn--on-dark-outline { --btn-bg: transparent; --btn-fg: var(--cream); border-color: rgba(205,232,232,.45); }
.btn--on-dark-outline::before { background: var(--cream); }
.btn--on-dark-outline:hover, .btn--on-dark-outline:focus-visible { color: var(--dark); border-color: var(--cream); }
.btn--sm { padding: 0.72rem 1.3rem; font-size: var(--fs-xs); }
.btn--lg { padding: 1.2rem 2.3rem; font-size: var(--fs-body); }
.btn--block { display: flex; width: 100%; }

.btn-group { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: var(--fs-sm); font-weight: 600; color: var(--teal);
  position: relative; padding-bottom: 3px;
}
.link-arrow::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.link-arrow:hover::after, .link-arrow:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.link-arrow .ico-arrow { transition: transform var(--dur-fast) var(--ease); }
.link-arrow:hover .ico-arrow { transform: translate(3px, -3px); }
.bg-dark .link-arrow { color: var(--lightblue); }

/* --------------------------------------------------------------- 7. Icons */
.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.ico-arrow { width: 0.95em; height: 0.95em; }
.brand-icon { width: 76px; height: 76px; flex: none; }
.brand-icon--sm { width: 54px; height: 54px; }
.brand-icon--lg { width: 104px; height: 104px; }

/* --------------------------------------------------------------- 8. Header + Mega menu */
.site-header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px rgba(15, 56, 55, 0.06);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  height: var(--header-h);
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  transition: height var(--dur-fast) var(--ease);
}
.site-header.is-stuck .header-inner { height: 66px; }

/* Logo: K mark, rule, KAFOO wordmark. The "Modern Accounting" tagline is
   cropped out of the master artwork per audit edit #2. */
.logo { display: inline-flex; align-items: center; flex: none; }
.logo__img {
  height: 34px; width: auto; flex: none;
  transition: transform 0.45s var(--ease-out), height var(--dur-fast) var(--ease);
}
.logo:hover .logo__img { transform: translateY(-2px); }
.site-header.is-stuck .logo__img { height: 30px; }
.footer-brand .logo__img { height: 38px; }
.footer-brand .logo:hover .logo__img { transform: none; }
@media (max-width: 400px) { .logo__img { height: 30px; } }

.nav { display: flex; align-items: center; gap: 0.15rem; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.65rem 0.95rem;
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink);
  position: relative; background: none; border: 0; cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link::after {
  content: ''; position: absolute; left: 0.95rem; right: 0.95rem; bottom: 0.3rem; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.nav__link:hover, .nav__link[aria-expanded="true"], .nav__link.is-current { color: var(--teal); }
.nav__link:hover::after, .nav__link[aria-expanded="true"]::after, .nav__link.is-current::after { transform: scaleX(1); }
.nav__chev { width: 11px; height: 11px; transition: transform var(--dur-fast) var(--ease); opacity: .65; }
.nav__link[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

.header-cta { display: flex; align-items: center; gap: 0.75rem; flex: none; }

/* Mega panel */
.mega {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 890;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(15, 56, 55, 0.13);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.28s var(--ease), transform 0.34s var(--ease-out), visibility 0.28s;
}
.mega.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.mega__inner {
  max-width: var(--maxw); margin-inline: auto; padding: 2.6rem var(--gutter) 2.2rem;
  display: grid; gap: 2.5rem;
}
.mega--services .mega__inner,
.mega--resources .mega__inner { grid-template-columns: 1fr 1fr 1fr 0.92fr; }
@media (max-width: 1080px) {
  .mega--services .mega__inner,
  .mega--resources .mega__inner { grid-template-columns: 1fr 1fr; }
}
.mega__title {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 1.15rem;
}
.mega__card {
  display: block; padding: 1.15rem 1.15rem 1.25rem; margin: -1.15rem -1.15rem 0;
  border-left: 2px solid transparent;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.mega__card:hover, .mega__card:focus-visible { background: var(--tint-2); border-left-color: var(--teal); }
.mega__card-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.mega__card-head .brand-icon { width: 46px; height: 46px; }
.mega__card h3 {
  font-size: 1.05rem; font-weight: 600; color: var(--dark); letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 0.45rem;
}
.mega__card h3 .ico-arrow { opacity: 0; transform: translateX(-4px); transition: all var(--dur-fast) var(--ease); }
.mega__card:hover h3 .ico-arrow { opacity: 1; transform: translateX(0); }
.mega__card p { font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-3); }
/* Secondary links sitting under a mega card, so a column can offer the hub
   plus the individual pages without a second card. */
.mega__list { list-style: none; margin: 0.9rem 0 0; padding: 0 0 0 1.15rem; border-left: 1px solid var(--line); }
.mega__list li + li { margin-top: 0.1rem; }
.mega__list a {
  display: block; padding: 0.3rem 0; font-size: var(--fs-xs); color: var(--ink-3);
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.mega__list a:hover, .mega__list a:focus-visible { color: var(--teal); transform: translateX(3px); }

.mega__links li + li { margin-top: 0.15rem; }
.mega__links a {
  display: flex; align-items: baseline; gap: 0.55rem;
  padding: 0.5rem 0; font-size: var(--fs-sm); color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.mega__links a:hover { color: var(--teal); transform: translateX(3px); }
.mega__links .meta { font-size: var(--fs-xs); color: var(--ink-3); }
.mega__feature {
  background: var(--dark); color: var(--on-dark-2);
  padding: 1.75rem; position: relative; overflow: hidden;
}
.mega__feature h3 { color: var(--cream); font-size: 1.15rem; font-weight: 500; margin-bottom: 0.6rem; }
.mega__feature p { font-size: var(--fs-xs); line-height: 1.65; margin-bottom: 1.25rem; }
.mega__feature .arrow-deco {
  position: absolute; right: -22px; bottom: -26px; width: 130px; opacity: 0.13; color: var(--lightblue);
}

/* Mobile nav */
.burger {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  margin-right: -10px;
}
.burger span {
  display: block; width: 22px; height: 1.5px; background: var(--dark); position: relative;
  transition: background 0.1s var(--ease);
}
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 22px; height: 1.5px; background: var(--dark);
  transition: transform 0.32s var(--ease-out), top 0.2s var(--ease);
}
.burger span::before { top: -7px; } .burger span::after { top: 7px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

.mobile-nav {
  /* Full viewport and above the header (900). The panel used to start at
     var(--header-h) and sit below it, but locking body scroll drops the
     sticky header to its static position off-screen, leaving that strip
     showing the page behind. */
  position: fixed; inset: 0; z-index: 950;
  background: var(--white); overflow-y: auto;
  padding: 0 var(--gutter) 4rem;
  transform: translateX(100%); visibility: hidden;
  transition: transform 0.42s var(--ease-out), visibility 0.42s;
  overscroll-behavior: contain;
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; }

/* Sticks to the top of the panel's own scroll area, so the close button stays
   reachable however far down the menu you are. */
.mobile-nav__top {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--header-h);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  margin-bottom: 1.25rem;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.mobile-nav__close {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  margin-right: -10px;                 /* optical alignment with the gutter */
  color: var(--dark); background: none; border: 0; cursor: pointer;
}
.mobile-nav__close .ico { width: 22px; height: 22px; }
.mobile-nav__group { border-bottom: 1px solid var(--line); }
.mobile-nav__toggle, .mobile-nav__direct {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 1.15rem 0; font-size: 1.1rem; font-weight: 500; color: var(--dark); text-align: left;
}
.mobile-nav__toggle .nav__chev { width: 14px; height: 14px; }
.mobile-nav__toggle[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.mobile-nav__panel { display: none; padding-bottom: 1rem; }
.mobile-nav__panel.is-open { display: block; animation: fadeUp 0.34s var(--ease-out) both; }
.mobile-nav__panel a {
  display: block; padding: 0.7rem 0 0.7rem 1rem; font-size: var(--fs-sm); color: var(--ink-2);
  border-left: 2px solid var(--line);
}
.mobile-nav__panel a:hover { color: var(--teal); border-left-color: var(--teal); }
.mobile-nav__panel .desc { display: block; font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }

@media (max-width: 1024px) {
  .nav, .header-cta .btn { display: none; }
  .burger { display: flex; }
}
/* Pinning body rather than only hiding overflow: iOS Safari ignores
   overflow:hidden on body and scrolls the page behind the panel. main.js sets
   the top offset to the saved scroll position and restores it on close. */
body.nav-open {
  position: fixed; left: 0; right: 0; width: 100%;
  overflow: hidden;
}

.mega-scrim {
  position: fixed; inset: var(--header-h) 0 0; z-index: 880;
  background: rgba(15, 56, 55, 0.22);
  opacity: 0; visibility: hidden; transition: opacity 0.28s var(--ease), visibility 0.28s;
}
.mega-scrim.is-visible { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------- 9. Hero */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(2.5rem, 1.4rem + 3.4vw, 4.75rem) clamp(3rem, 2rem + 4vw, 6rem);
  background: linear-gradient(168deg, var(--white) 0%, var(--tint-2) 55%, var(--tint-3) 100%);
}
.hero__grid {
  display: grid; grid-template-columns: 1.06fr 0.94fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center;
}
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; } }
.hero h1 { font-size: var(--fs-display); font-weight: 200; letter-spacing: -0.032em; line-height: 1.07; }
.hero h1 em { font-style: normal; color: var(--teal); font-weight: 400; }
.hero__sub { font-size: var(--fs-lead); max-width: 54ch; margin-top: 1.6rem; }
.hero__geo {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-top: 1.5rem; font-size: var(--fs-sm); font-weight: 500; color: var(--teal);
}
.hero__geo svg { width: 16px; height: 16px; }
.hero .btn-group { margin-top: 2.4rem; }
.hero__trust {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; margin-top: 2.6rem;
  padding-top: 1.75rem; border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--ink-3);
}
.hero__trust li { display: flex; align-items: center; gap: 0.45rem; }
.hero__trust svg { width: 15px; height: 15px; color: var(--teal); }

/* Arrow-masked photo, brand signature device.
   The SVG arrow sits behind; the photo's clip-path traces the arrow's inner edge,
   so the teal reads as a border along the V and sweeps up-right into the head. */
.arrow-photo { position: relative; width: 100%; aspect-ratio: 118 / 112; }
.arrow-photo__arrow {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: var(--teal); overflow: visible;
}
.arrow-photo__media {
  position: absolute; left: 11%; top: 0; width: 71.2%; height: 86.4%;
  clip-path: polygon(0% 0%, 100% 0%, 100% 40%, 50% 100%, 0% 60%);
  overflow: hidden; background: var(--tint-3);
}
.arrow-photo__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 26%; }
.arrow-photo--cream .arrow-photo__arrow { color: var(--dark); }
/* Portrait artwork that already carries the brand arrow, shown without the
   .arrow-photo frame so the arrow is not drawn twice. */
.founder-portrait {
  width: 100%; max-width: min(440px, 100%); height: auto;
  margin-inline: auto;
}

/* Hero visual composition */
.hero__visual { position: relative; }
.hero__visual .float-card {
  position: absolute; background: var(--white); box-shadow: var(--shadow-md);
  padding: 0.95rem 1.15rem; display: flex; align-items: center; gap: 0.75rem;
  border-left: 3px solid var(--teal);
}
.hero__visual .float-card strong { display: block; font-size: 1.32rem; font-weight: 600; color: var(--dark); line-height: 1.1; }
.hero__visual .float-card span { font-size: var(--fs-xs); color: var(--ink-3); }
.hero__visual .float-card--a { left: -4%; bottom: 16%; animation: floatY 6s ease-in-out infinite; }
.hero__visual .float-card--b { right: -2%; top: -7%; animation: floatY 6s ease-in-out 1.6s infinite; }
@media (max-width: 940px) { .hero__visual .float-card { display: none; } }

/* --------------------------------------------------------------- 10. Experience marquee */
.marquee-wrap { overflow: hidden; position: relative; }
.marquee-wrap::before, .marquee-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.marquee-wrap::before { left: 0; background: linear-gradient(to right, var(--tint-3), transparent); }
.marquee-wrap::after  { right: 0; background: linear-gradient(to left, var(--tint-3), transparent); }
.marquee {
  --marquee-gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  display: flex; align-items: center;
  width: max-content; animation: marquee 42s linear infinite;
}
.marquee-wrap:hover .marquee { animation-play-state: paused; }
.marquee__item { display: flex; align-items: center; flex: none; margin-inline-end: var(--marquee-gap); }
/* Real client-experience logos: muted by default so the mixed brand colors
   do not fight the palette, full color on hover. */
.marquee__item img {
  height: clamp(26px, 1.4rem + 1vw, 38px); width: auto;
  filter: grayscale(1) contrast(0.85);
  opacity: 0.55;
  transition: filter var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.marquee__item:hover img { filter: none; opacity: 1; }
/* Starbucks and Kemper are stacked marks, so cap them a little shorter
   to keep optical weight even across the row. */
.marquee__item img[src*="starbucks"],
.marquee__item img[src*="kemper"],
.marquee__item img[src*="pmr"] { height: clamp(34px, 1.8rem + 1.4vw, 50px); }

/* --------------------------------------------------------------- 11. Cards */
.card {
  background: var(--white); padding: clamp(1.6rem, 1.2rem + 1.1vw, 2.25rem);
  border: 1px solid var(--line); border-radius: 0;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out),
              border-color 0.45s var(--ease-out);
}
.card::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--teal); transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.card:hover::after { transform: scaleX(1); }
.card h3 { margin-bottom: 0.7rem; }
.card p { font-size: var(--fs-sm); }
.card .btn, .card .link-arrow { margin-top: auto; }
.card .brand-icon { margin-bottom: 1.15rem; }
.card--flat { border-color: var(--line); }
.card--flat:hover { transform: none; box-shadow: none; border-color: var(--line-strong); }

/* Service card with bullets */
.service-card__list { margin: 1.15rem 0 1.75rem; }
.service-card__list li {
  display: flex; gap: 0.7rem; align-items: flex-start;
  padding: 0.5rem 0; font-size: var(--fs-sm); color: var(--ink-2);
  border-top: 1px solid var(--line);
}
.service-card__list li:first-child { border-top: 0; }
.service-card__list svg { width: 15px; height: 15px; margin-top: 6px; color: var(--teal); flex: none; }

/* --------------------------------------------------------------- 12. Approach / step-up */
.step {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center;
  padding-block: clamp(2.25rem, 1.5rem + 2.6vw, 4rem);
}
.step + .step { border-top: 1px solid var(--line); }
.step:nth-child(even) .step__media { order: -1; }
@media (max-width: 900px) {
  .step { grid-template-columns: 1fr; gap: 2rem; }
  .step:nth-child(even) .step__media { order: 0; }
}
.step__num {
  display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.15rem;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; color: var(--teal);
}
.step__num b { font-size: 2.6rem; font-weight: 200; letter-spacing: -0.03em; color: var(--lightblue); line-height: 1; }
.step__media { background: var(--tint-2); padding: clamp(1.25rem, 1rem + 1vw, 2.25rem); }
.step__media img { width: 100%; }

/* Stage ladder, the brand's ascending step-up connector, rebuilt as an
   animated SVG. Mirrors the Kafoo homepage infographics. */
/* One continuous staircase. Each item draws the tread under itself and each
   connector draws the tread across its own column plus the riser at its right
   edge, so the grid columns being adjacent guarantees the segments touch.
   A single growth arrow terminates the line at the top right. */
.stage-ladder {
  --rise: 56px;
  display: grid;
  grid-template-columns: 1fr var(--rise) 1fr var(--rise) 1fr;
  align-items: end;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
/* That margin separates the ladder from content beneath it. When the ladder
   is the last thing in the section, the section's own padding is the gap. */
.stage-ladder:last-child { margin-bottom: 0; }
.stage-ladder__item { position: relative; text-align: center; padding-bottom: 1.15rem; }
.stage-ladder__item--2 { margin-bottom: var(--rise); }
.stage-ladder__item--3 { margin-bottom: calc(var(--rise) * 2); }
.stage-ladder__item .brand-icon { margin: 0 auto 0.9rem; }
/* the tread under each item */
.stage-ladder__item::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--teal);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.stage-ladder__num {
  display: block; font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.16em; color: var(--teal); margin-bottom: 0.3rem;
}
.stage-ladder__name {
  display: block; font-size: var(--fs-h4); font-weight: 500; color: var(--dark);
  letter-spacing: -0.01em;
}
/* The stage headline. Items are aligned to the bottom of the grid, so a
   second or third line of this pushes the icon up rather than moving the
   tread, and the staircase keeps its geometry. */
.stage-ladder__desc {
  display: block; max-width: 30ch; margin: 0.5rem auto 0;
  font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2);
  text-wrap: balance;
}

/* Connector cell: carries the tread across its own column and the riser that
   lifts the line to the next step. Both edges meet the neighbouring columns. */
.stage-ladder__link { position: relative; align-self: end; height: var(--rise); }
.stage-ladder__link--2 { margin-bottom: var(--rise); }
.stage-ladder__link::before,
.stage-ladder__link::after { content: ''; position: absolute; background: var(--teal); }
.stage-ladder__link::before {          /* tread */
  left: 0; right: 0; bottom: 0; height: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.stage-ladder__link::after {           /* riser, flush with the next column */
  right: 0; bottom: 0; top: 0; width: 2px;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.35s var(--ease-out);
}

/* Terminal growth arrow at the end of the last tread */
.stage-ladder__tip {
  position: absolute; right: 0; bottom: 0; width: 2px; height: 38px;
  background: var(--teal);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.4s var(--ease-out);
}
.stage-ladder__tip::after {
  content: ''; position: absolute; left: -7px; top: -13px;
  width: 0; height: 0; border-style: solid;
  border-width: 0 8px 14px 8px;
  border-color: transparent transparent var(--gold) transparent;
  opacity: 0; transition: opacity 0.25s var(--ease);
}

/* Draw the staircase left to right, one segment at a time */
.stage-ladder.is-in .stage-ladder__item::after,
.stage-ladder.is-in .stage-ladder__link::before { transform: scaleX(1); }
.stage-ladder.is-in .stage-ladder__link::after,
.stage-ladder.is-in .stage-ladder__tip { transform: scaleY(1); }
.stage-ladder.is-in .stage-ladder__tip::after { opacity: 1; }

.stage-ladder.is-in .stage-ladder__item:nth-child(1)::after { transition-delay: 0s; }
.stage-ladder.is-in .stage-ladder__link:nth-child(2)::before { transition-delay: 0.30s; }
.stage-ladder.is-in .stage-ladder__link:nth-child(2)::after  { transition-delay: 0.50s; }
.stage-ladder.is-in .stage-ladder__item:nth-child(3)::after { transition-delay: 0.70s; }
.stage-ladder.is-in .stage-ladder__link:nth-child(4)::before { transition-delay: 1.00s; }
.stage-ladder.is-in .stage-ladder__link:nth-child(4)::after  { transition-delay: 1.20s; }
.stage-ladder.is-in .stage-ladder__item:nth-child(5)::after { transition-delay: 1.40s; }
.stage-ladder.is-in .stage-ladder__tip { transition-delay: 1.70s; }
.stage-ladder.is-in .stage-ladder__tip::after { transition-delay: 2.00s; }

@media (max-width: 880px) {
  .stage-ladder { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; }
  .stage-ladder__item--2, .stage-ladder__item--3 { margin-bottom: 0; }
  .stage-ladder__link, .stage-ladder__tip { display: none; }
  .stage-ladder__item::after { display: none; }
}
@media (max-width: 560px) {
  .stage-ladder { grid-template-columns: 1fr; gap: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-ladder__item::after, .stage-ladder__link::before { transform: scaleX(1); }
  .stage-ladder__link::after, .stage-ladder__tip { transform: scaleY(1); }
  .stage-ladder__tip::after { opacity: 1; }
}

/* --------------------------------------------------------------- 13. Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--white); padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }
.bg-dark .stats { background: rgba(205,232,232,.16); }
.bg-dark .stat { background: var(--dark); }
.stat__num {
  display: flex; align-items: baseline; gap: 0.3rem;
  font-size: clamp(2rem, 1.5rem + 1.9vw, 3rem); font-weight: 200; letter-spacing: -0.03em;
  color: var(--dark); line-height: 1; margin-bottom: 0.55rem;
}
.bg-dark .stat__num { color: var(--cream); }
.stat__num svg { width: 0.55em; height: 0.55em; color: var(--teal); }
.bg-dark .stat__num svg { color: var(--lightblue); }
.stat__label { font-size: var(--fs-sm); color: var(--ink-3); }
.bg-dark .stat__label { color: var(--on-dark-2); }

/* --------------------------------------------------------------- 14. Testimonials */
.quote-card {
  background: var(--white); border: 1px solid var(--line);
  padding: clamp(1.75rem, 1.3rem + 1.2vw, 2.35rem);
  display: flex; flex-direction: column; height: 100%;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.quote-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.stars { display: flex; gap: 3px; margin-bottom: 1.15rem; }
.stars svg { width: 16px; height: 16px; fill: var(--gold); stroke: none; }
.bg-dark .stars svg { fill: var(--gold-on-dark); }
.quote-card blockquote { font-size: var(--fs-sm); line-height: 1.72; color: var(--ink-2); margin-bottom: 1.6rem; }
.quote-card__by { display: flex; align-items: center; gap: 0.85rem; margin-top: auto; }
.avatar {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  background: var(--lightblue); color: var(--dark);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.02em;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.quote-card__by cite { font-style: normal; font-weight: 600; color: var(--dark); font-size: var(--fs-sm); display: block; }
.quote-card__by span { font-size: var(--fs-xs); color: var(--ink-3); }

/* Source line under a review name. Google reviews get the mark; testimonials
   carried over from the old site show the client's industry instead, so the
   two sources stay visually distinct. The mark carries its own brand colors,
   so it must not inherit currentColor like the other UI icons. */
.review__src { display: inline-flex; align-items: center; gap: 0.4rem; }
.ico-google { width: 14px; height: 14px; flex: none; fill: none; stroke: none; }

/* --------------------------------------------------------------- Review rail */
.reviews { position: relative; }

.reviews__rail {
  list-style: none; margin: 0; padding: 0.4rem 0 1.4rem;
  display: flex; gap: 1.25rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  /* Deliberately no scroll-snap. Snap points sit at card starts, which never
     coincide with the true scroll maximum, so the rail could not come to rest
     at the end and the next arrow stayed enabled forever. The arrows already
     scroll by whole-card multiples, so alignment survives without it. */
  scroll-behavior: smooth;
  /* Bleed to the gutter so a card can sit flush with the page edge on small
     screens instead of stopping short of it. */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.reviews__rail > li { flex: 0 0 clamp(270px, 80vw, 355px); display: flex; }
.reviews__rail > li > .quote-card { width: 100%; }
.reviews__rail:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

.reviews__rail::-webkit-scrollbar { height: 6px; }
.reviews__rail::-webkit-scrollbar-track { background: transparent; }
.reviews__rail::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 0; }
.reviews__rail::-webkit-scrollbar-thumb:hover { background: var(--teal); }

/* Arrows sit over the rail edges. Hidden until the script confirms the rail
   actually overflows, so they never appear on a wide screen showing everything. */
.reviews__nav {
  position: absolute; top: calc(50% - 1.4rem); z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--white); border: 1px solid var(--line-strong); color: var(--dark);
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.reviews__nav:hover:not(:disabled) { background: var(--teal); border-color: var(--teal); color: var(--cream); }
.reviews__nav:disabled { opacity: 0.3; cursor: default; }
.reviews__nav[hidden] { display: none; }
.reviews__nav .ico { width: 18px; height: 18px; }
.reviews__nav--prev { left: calc(var(--gutter) * -1); }
.reviews__nav--next { right: calc(var(--gutter) * -1); }
.reviews__nav--prev .ico { transform: rotate(90deg); }
.reviews__nav--next .ico { transform: rotate(-90deg); }

/* On narrow screens swiping is the natural gesture, so the arrows only get in
   the way of the cards they overlap. */
@media (max-width: 900px) { .reviews__nav { display: none; } }

@media (prefers-reduced-motion: reduce) { .reviews__rail { scroll-behavior: auto; } }

/* --------------------------------------------------------------- 15. FAQ accordion */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  width: 100%; padding: 1.5rem 0; text-align: left;
  font-size: var(--fs-h4); font-weight: 500; color: var(--dark); line-height: 1.4;
  transition: color var(--dur-fast) var(--ease);
}
.faq__q:hover { color: var(--teal); }
.faq__icon { position: relative; width: 18px; height: 18px; margin-top: 6px; flex: none; }
.faq__icon::before, .faq__icon::after {
  content: ''; position: absolute; background: var(--teal); transition: transform 0.35s var(--ease-out);
}
.faq__icon::before { top: 50%; left: 0; width: 18px; height: 1.5px; margin-top: -0.75px; }
.faq__icon::after  { left: 50%; top: 0; width: 1.5px; height: 18px; margin-left: -0.75px; }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: scaleY(0); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.42s var(--ease-out); }
.faq__a > div { overflow: hidden; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a p { padding-bottom: 1.6rem; max-width: 75ch; font-size: var(--fs-sm); }
.faq__a p + p { padding-bottom: 1.6rem; margin-top: -0.8rem; }
.bg-dark .faq, .bg-dark .faq__item { border-color: rgba(205,232,232,.2); }
.bg-dark .faq__q { color: var(--cream); }
.bg-dark .faq__icon::before, .bg-dark .faq__icon::after { background: var(--lightblue); }

/* --------------------------------------------------------------- 16. CTA band */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--lightblue); color: var(--dark);
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.cta-band__pattern { position: absolute; inset: 0; opacity: 0.55; pointer-events: none; }
.cta-band__inner { position: relative; z-index: 1; }
.cta-band h2 { color: var(--dark); }
.cta-band--dark { background: var(--dark); color: var(--on-dark-2); }
.cta-band--dark h2 { color: var(--cream); }
.cta-band--dark .cta-band__pattern { opacity: 0.16; }

/* --------------------------------------------------------------- 17. Footer */
.site-footer { background: var(--dark); color: var(--on-dark-2); padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem; }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 2.5rem clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  padding-bottom: 3rem;
}
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px)  { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-brand .logo__word { color: var(--cream); }
.footer-brand .logo__rule { background: rgba(205,232,232,.35); }
.footer-brand p { font-size: var(--fs-xs); line-height: 1.75; margin-top: 1.15rem; max-width: 30ch; }
.footer-col h3 {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--cream); margin-bottom: 1.15rem;
}
.footer-col li + li { margin-top: 0.6rem; }
.footer-col a, .footer-col address {
  font-size: var(--fs-sm); color: var(--on-dark-2); font-style: normal; line-height: 1.7;
  transition: color var(--dur-fast) var(--ease);
}
.footer-col a:hover { color: var(--cream); }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: 2rem; border-top: 1px solid rgba(205,232,232,.18);
  font-size: var(--fs-xs); color: rgba(185,212,210,.75);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1.5rem; }
/* The global `a` teal is close to the footer's own dark ground, so inherit the
   surrounding text colour and mark the link with a rule instead. */
.footer-bottom a {
  color: inherit; border-bottom: 1px solid rgba(205,232,232,.35);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.footer-bottom a:hover { color: var(--cream); border-bottom-color: var(--cream); }
.social-links { display: flex; gap: 0.65rem; }
.social-links a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgba(205,232,232,.28); color: var(--on-dark-2);
  transition: all var(--dur-fast) var(--ease);
}
.social-links a:hover { background: var(--teal); border-color: var(--teal); color: var(--cream); }
.social-links svg { width: 17px; height: 17px; }

/* --------------------------------------------------------------- 18. Page hero (inner pages) */
.page-hero {
  padding-block: clamp(2.5rem, 1.6rem + 3vw, 4.25rem) clamp(2.5rem, 1.6rem + 3vw, 4rem);
  background: linear-gradient(168deg, var(--white), var(--tint-3));
  position: relative; overflow: hidden;
}
.page-hero h1 { max-width: 20ch; }
.page-hero .lead { max-width: 58ch; margin-top: 1.5rem; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: 1.5rem; }
.breadcrumbs a { color: var(--ink-3); }
.breadcrumbs a:hover { color: var(--teal); }
.breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 0.5rem; opacity: .5; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* --------------------------------------------------------------- 19. Prose (blog/case study body) */
.prose { font-size: 1.0625rem; line-height: 1.78; color: var(--ink-2); }
.prose > * + * { margin-top: 1.4rem; }
.prose h2 {
  font-size: clamp(1.55rem, 1.25rem + 1.1vw, 2.05rem); font-weight: 300;
  margin-top: 3.25rem; padding-top: 0.4rem; scroll-margin-top: calc(var(--header-h) + 24px);
}
.prose h3 {
  font-size: clamp(1.2rem, 1.08rem + 0.5vw, 1.4rem); font-weight: 600; color: var(--dark);
  margin-top: 2.4rem; scroll-margin-top: calc(var(--header-h) + 24px);
}
.prose h2 + p, .prose h3 + p { margin-top: 0.9rem; }
.prose ul, .prose ol { margin-top: 1.2rem; }
.prose li { position: relative; padding-left: 1.85rem; margin-bottom: 0.75rem; }
.prose ul > li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 11px; height: 11px;
  background: var(--teal);
  clip-path: polygon(0 40%, 55% 40%, 55% 0, 100% 50%, 55% 100%, 55% 60%, 0 60%);
}
.prose ol { counter-reset: li; }
.prose ol > li { counter-increment: li; }
.prose ol > li::before {
  content: counter(li); position: absolute; left: 0; top: 0.1em;
  font-size: var(--fs-xs); font-weight: 700; color: var(--teal);
}
.prose a { font-weight: 500; border-bottom: 1px solid var(--lightblue); transition: border-color var(--dur-fast) var(--ease); }
.prose a:hover { border-bottom-color: var(--teal); }
.prose blockquote {
  margin: 2.5rem 0; padding: 0.35rem 0 0.35rem 1.9rem;
  border-left: 3px solid var(--gold);
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); font-weight: 300; line-height: 1.5;
  color: var(--dark); letter-spacing: -0.015em;
}
.prose blockquote cite { display: block; margin-top: 0.9rem; font-size: var(--fs-sm); font-style: normal; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.prose img { margin-block: 2.25rem; width: 100%; }
.prose figure { margin-block: 2.25rem; }
.prose figcaption { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 0.75rem; }
.prose table { margin-block: 2rem; font-size: var(--fs-sm); }
.prose thead th {
  text-align: left; padding: 0.9rem 1rem; background: var(--dark); color: var(--cream);
  font-weight: 600; font-size: var(--fs-xs); letter-spacing: 0.05em; text-transform: uppercase;
}
.prose tbody td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose tbody tr:nth-child(even) { background: var(--tint-2); }
.table-scroll { overflow-x: auto; margin-block: 2rem; }
.table-scroll table { margin-block: 0; min-width: 540px; }

.callout {
  margin-block: 2.25rem; padding: 1.5rem 1.75rem;
  background: var(--cream); border-left: 3px solid var(--teal);
}
.callout h4 { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; color: var(--dark); }
.callout h4 svg { width: 19px; height: 19px; color: var(--teal); }
.callout p { font-size: var(--fs-sm); margin: 0; }
.callout--teal { background: var(--tint-3); }
.callout--dark { background: var(--dark); color: var(--on-dark-2); border-left-color: var(--lightblue); }
.callout--dark h4 { color: var(--cream); } .callout--dark h4 svg { color: var(--lightblue); }

.key-takeaways { background: var(--tint-3); padding: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 2.5rem; }
.key-takeaways h2 { font-size: var(--fs-h4) !important; font-weight: 600 !important; margin: 0 0 1rem !important; text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--fs-label) !important; color: var(--teal); }
.key-takeaways ul { margin: 0; }
.key-takeaways li { font-size: var(--fs-sm); }

/* Article layout with sticky TOC */
.article-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px;
  gap: clamp(2rem, 1rem + 3.5vw, 4.5rem); align-items: start;
}
@media (max-width: 1000px) { .article-layout { grid-template-columns: 1fr; } }
/* margin-top, not padding-top: it drops the heading clear of the article's first
   block without also padding the box, so the sticky `top` offset keeps setting the
   gap under the header on its own. */
.toc { position: sticky; top: calc(var(--header-h) + 28px); margin-top: 2rem; }
@media (max-width: 1000px) { .toc { position: static; margin-top: 0; margin-bottom: 2.5rem; border: 1px solid var(--line); padding: 1.5rem; } }
.toc h2 {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 1rem;
}
.toc ol { border-left: 1px solid var(--line); }
/* Scoped to the list: an unscoped `.toc a` also caught the CTA button below it
   and overrode its display and padding. */
.toc ol a {
  display: block; padding: 0.5rem 0 0.5rem 1rem; margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-3);
  transition: all var(--dur-fast) var(--ease);
}
.toc ol a:hover { color: var(--teal); }
.toc ol a.is-active { color: var(--teal); border-left-color: var(--teal); font-weight: 500; }

.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.1rem;
  font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: 1.75rem;
}
.article-meta .dot { width: 3px; height: 3px; background: var(--line-strong); border-radius: 50%; }
.tag {
  display: inline-flex; align-items: center; padding: 0.5rem 0.9rem;
  background: var(--lightblue); color: var(--dark); line-height: 1;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.tag--outline { background: transparent; border: 1px solid var(--line-strong); color: var(--ink-3); }

.author-box {
  display: flex; gap: 1.5rem; align-items: flex-start;
  margin-top: 3.5rem; padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  background: var(--tint-3);
}
.author-box__img { width: 92px; height: 92px; flex: none; background: var(--teal); overflow: hidden; }
.author-box__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.author-box h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.15rem; }
.author-box .role { font-size: var(--fs-xs); color: var(--teal); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.75rem; }
.author-box p { font-size: var(--fs-sm); margin-bottom: 0.9rem; }
@media (max-width: 560px) { .author-box { flex-direction: column; gap: 1.15rem; } }

.share-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.share-row span { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; }
.share-row a {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--ink-3);
  transition: all var(--dur-fast) var(--ease);
}
.share-row a:hover { background: var(--teal); border-color: var(--teal); color: var(--cream); }
.share-row svg { width: 15px; height: 15px; }

.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); margin-top: 3.5rem; }
@media (max-width: 640px) { .prevnext { grid-template-columns: 1fr; } }
.prevnext a { background: var(--white); padding: 1.5rem; transition: background var(--dur-fast) var(--ease); }
.prevnext a:hover { background: var(--tint-2); }
.prevnext .dir { display: block; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); margin-bottom: 0.5rem; }
.prevnext strong { font-size: var(--fs-sm); font-weight: 500; color: var(--dark); line-height: 1.45; display: block; }
.prevnext .next { text-align: right; }

/* --------------------------------------------------------------- 20. Blog cards / listing */
.post-card { display: flex; flex-direction: column; background: var(--white); height: 100%; }
.post-card__media { overflow: hidden; aspect-ratio: 16 / 10; background: var(--tint-3); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); }
.post-card:hover .post-card__media img { transform: scale(1.05); }
/* The card has a white background, so the body needs real inset from the box
   edge. The media stays full-bleed. */
.post-card__body {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex; flex-direction: column; flex: 1;
}
/* Category chip sits on its own line at its natural width, so a long label
   cannot push the date and read time onto a ragged extra row. */
.post-card__body > .tag { align-self: flex-start; margin-bottom: 0.8rem; }
.post-card .article-meta { margin-bottom: 0; }
.post-card h3 {
  font-size: 1.15rem; font-weight: 500; line-height: 1.4; margin: 0.85rem 0 0.75rem;
  transition: color var(--dur-fast) var(--ease);
}
.post-card:hover h3 { color: var(--teal); }
.post-card p { font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: 1.5rem; line-height: 1.65; }
.post-card .article-meta { margin: 0; }
.post-card__link::after { content: ''; position: absolute; inset: 0; }
.post-card { position: relative; }

.featured-post {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: center; background: var(--white);
}
@media (max-width: 900px) { .featured-post { grid-template-columns: 1fr; } }
.featured-post__media { overflow: hidden; aspect-ratio: 16 / 11; }
.featured-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.featured-post:hover .featured-post__media img { transform: scale(1.04); }
.featured-post__tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.85rem; }
.featured-post h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); font-weight: 300; margin-block: 1rem; }

/* Filters + search */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between;
  padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); margin-bottom: 2.5rem;
}
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  padding: 0.55rem 1.1rem; border: 1px solid var(--line-strong); background: var(--white);
  font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2); cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--teal); color: var(--teal); }
.chip.is-active { background: var(--dark); border-color: var(--dark); color: var(--cream); }
.search-field { position: relative; min-width: 250px; flex: 1 1 250px; max-width: 340px; }
.search-field input {
  width: 100%; padding: 0.75rem 1rem 0.75rem 2.6rem;
  border: 1px solid var(--line-strong); background: var(--white); border-radius: 0;
  font-size: var(--fs-sm); color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease);
}
.search-field input:focus { outline: none; border-color: var(--teal); }
.search-field svg { position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--ink-3); }
.empty-state { padding: 4rem 1rem; text-align: center; color: var(--ink-3); }
.empty-state svg { width: 46px; height: 46px; margin: 0 auto 1.25rem; color: var(--line-strong); }

/* --------------------------------------------------------------- 21. Forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-xs); font-weight: 600; color: var(--dark); letter-spacing: 0.02em; }
.field label .req { color: var(--teal); }
.field input, .field select, .field textarea {
  padding: 0.85rem 1rem; border: 1px solid var(--line-strong); background: var(--white);
  border-radius: 0; font-size: var(--fs-sm); color: var(--ink); width: 100%;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(30,117,117,.1);
}
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
@media (max-width: 620px) { .check-grid { grid-template-columns: 1fr; } }
.check {
  display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.8rem 0.95rem;
  border: 1px solid var(--line-strong); cursor: pointer; font-size: var(--fs-sm);
  transition: all var(--dur-fast) var(--ease);
}
.check:hover { border-color: var(--teal); background: var(--tint-2); }
.check input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--teal); flex: none; }
.check:has(input:checked) { border-color: var(--teal); background: var(--tint-3); }
.form-note { font-size: var(--fs-xs); color: var(--ink-3); }

/* Consultation form. The two branches are grids in their own right so their
   fields line up with the rest of the form, and each spans the full width of
   the parent grid rather than sitting in one column. */
.form-legend {
  font-size: var(--fs-xs); font-weight: 600; color: var(--dark);
  letter-spacing: 0.02em; padding: 0; margin-bottom: 0.6rem;
}
.form-legend .req { color: var(--teal); }
.branch {
  grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.25rem; align-items: start;
}
.branch[hidden] { display: none; }
@media (max-width: 620px) { .branch { grid-template-columns: 1fr; } }
.check-grid--1 { grid-template-columns: 1fr; }

/* Wrapper for the embedded Go High Level survey. Deliberately has no card of
   its own: the survey draws its own white panel inside the iframe, and putting
   a bordered white box around that produced a card inside a card, with our
   padding eating ~74px of the column width. Heading and iframe sit directly on
   the section background instead, so the survey's own panel is the only card.

   The iframe is sized by GHL's form_embed.js, so it gets a min-height only, to
   hold the space while it loads and stop the page jumping when it resizes. */
/* The embedded survey has its own breakpoint: given less than roughly 480px it
   drops from a full-width "Next" bar to a cramped "1 of 3" arrow. An even split
   starves it of that on anything narrower than about 1140px, which is most
   laptops, so this variant stacks earlier and lets the form take a comfortable
   width on its own row rather than being squeezed beside the contact details. */
.split--form { align-items: start; }
@media (max-width: 1140px) {
  .split--form { grid-template-columns: 1fr; }
  .split--form > * { max-width: 640px; }
}

.ghl-embed { background: none; border: 0; padding: 0; --survey-gutter: 16px; }
/* GHL draws its card inset inside the iframe it is given, measured at roughly
   16px a side, and that padding is cross-origin so no rule here can remove it.
   The heading is nudged in by the same amount instead, so its left edge lines
   up with the card rather than with the iframe. Adjust --survey-gutter if the
   survey's own padding is ever changed in its Styles panel. */
.ghl-embed > h2,
.ghl-embed > p { padding-left: var(--survey-gutter); }
@media (max-width: 620px) { .ghl-embed { --survey-gutter: 12px; } }
.ghl-embed iframe { display: block; width: 100%; min-height: 560px; border: 0; }
@media (max-width: 620px) { .ghl-embed iframe { min-height: 620px; } }

/* --------------------------------------------------------------- Calculator */
.calc {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: start;
}
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }

.calc__form { display: flex; flex-direction: column; gap: 1.35rem; }
.field__hint { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; margin-top: -0.25rem; }

/* Currency prefix sits inside the input frame rather than beside it, so the
   dollar sign cannot be mistaken for part of the value. */
.calc__input {
  display: flex; align-items: stretch;
  border: 1px solid var(--line-strong); background: var(--white);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.calc__input span {
  display: grid; place-items: center; padding-inline: 0.9rem;
  background: var(--tint-3); color: var(--ink-3);
  font-size: var(--fs-sm); font-weight: 600; border-right: 1px solid var(--line-strong);
}
.calc__input input { border: 0; font-variant-numeric: tabular-nums; }
.calc__input input:focus { outline: none; box-shadow: none; }
.calc__input:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(30,117,117,.1); }

.calc__out {
  background: var(--dark); color: var(--on-dark-2);
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  position: sticky; top: calc(var(--header-h) + 1.25rem);
}
@media (max-width: 860px) { .calc__out { position: static; } }
.calc__label {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--lightblue); margin-bottom: 0.6rem;
}
.calc__headline {
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); font-weight: 300; line-height: 1.08;
  letter-spacing: -0.02em; color: var(--cream); font-variant-numeric: tabular-nums;
}
.calc__verdict {
  font-size: var(--fs-sm); line-height: 1.65; margin-top: 0.85rem;
  padding-left: 0.9rem; border-left: 2px solid var(--gold-on-dark);
}
.calc__verdict--yes   { border-left-color: var(--gold-on-dark); }
.calc__verdict--maybe { border-left-color: var(--lightblue); }
.calc__verdict--no    { border-left-color: rgba(205,232,232,.4); }

.calc__rows { margin-top: 1.9rem; border-top: 1px solid rgba(205,232,232,.22); }
.calc__rows > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem;
  padding: 0.8rem 0; border-bottom: 1px solid rgba(205,232,232,.14);
}
.calc__rows dt { font-size: var(--fs-xs); color: var(--on-dark-2); margin: 0; }
.calc__rows dd {
  margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--on-dark);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.calc__rows-total dt { color: var(--cream); font-weight: 600; }
.calc__rows-total dd { color: var(--cream); }
.form-success {
  display: none; padding: 1.5rem 1.75rem; background: var(--tint-3); border-left: 3px solid var(--teal);
  font-size: var(--fs-sm); color: var(--dark);
}
.form-success.is-visible { display: block; animation: fadeUp 0.45s var(--ease-out) both; }

/* --------------------------------------------------------------- 22. Misc modules */
.pill-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1rem; background: var(--white); border: 1px solid var(--line-strong);
  font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2);
}
.pill svg { width: 15px; height: 15px; color: var(--teal); }

.credential-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 1px; background: var(--line); }
.credential {
  background: var(--white); padding: 2rem 1.25rem 1.75rem; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
/* Seal treatment so an earned credential reads as a badge rather than a bullet.
   Swap .credential__seal for <img class="credential__logo"> when the real
   issuer artwork is available; nothing else needs to change. */
.credential__seal {
  width: 68px; height: 68px; flex: none; margin-bottom: 1.15rem;
  display: grid; place-items: center; position: relative;
  background: var(--cream); border-radius: 50%;
  box-shadow: 0 0 0 2px var(--teal), 0 0 0 6px var(--white), 0 0 0 7px var(--lightblue);
}
.credential__seal svg { width: 30px; height: 30px; color: var(--teal); }
/* Capped on BOTH axes rather than on height alone. The five marks have very
   different aspect ratios: the UW block W is landscape, while the ProAdvisor
   badge and the WSCPA lockup are stacked. A fixed height rendered the stacked
   pair about 45px wide, too small to read the wordmark inside them. A box lets
   each mark grow until it meets whichever edge it reaches first. */
.credential__logo {
  height: auto; width: auto; max-height: 72px; max-width: 132px; object-fit: contain;
  margin-bottom: 1.15rem; flex: none;
}
.credential strong {
  display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--dark);
  line-height: 1.35; margin-bottom: 0.35rem;
}
.credential > span:last-child {
  font-size: var(--fs-xs); color: var(--ink-3); margin-top: auto; padding-top: 0.15rem;
}

.timeline { border-left: 1px solid var(--line-strong); padding-left: 2rem; }
.timeline li { position: relative; padding-bottom: 2rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ''; position: absolute; left: calc(-2rem - 5px); top: 0.5rem;
  width: 9px; height: 9px; background: var(--white); border: 2px solid var(--teal);
}
.timeline .when { display: block; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); margin-bottom: 0.35rem; }
.timeline strong { display: block; font-size: var(--fs-h4); font-weight: 500; color: var(--dark); margin-bottom: 0.25rem; }
.timeline p { font-size: var(--fs-sm); }

/* Founder profile card */
.profile-card {
  border: 1px solid var(--line); background: var(--white);
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  box-shadow: var(--shadow-sm);
}
.profile-card__top { display: flex; gap: 1.25rem; align-items: center; margin-bottom: 1.75rem; }
.profile-card__top img {
  width: 104px; height: 104px; flex: none; object-fit: cover;
  object-position: center 15%; background: var(--tint-3);
}
.profile-card__top h3 { font-size: 1.24rem; font-weight: 600; margin-bottom: 0.15rem; }
.profile-card__role {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 0.55rem;
}
.profile-card__tagline { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.profile-card__loc {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: var(--fs-xs); color: var(--ink-3); margin-top: 0.5rem;
}
.profile-card__loc svg { width: 14px; height: 14px; }
.profile-card__facts { border-top: 1px solid var(--line); }
.profile-card__facts > div { padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.profile-card__facts dt {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.3rem;
}
.profile-card__facts dd { margin: 0; font-size: var(--fs-sm); color: var(--ink); line-height: 1.55; }
.profile-card .btn { margin-top: 1.75rem; }
@media (max-width: 460px) {
  .profile-card__top { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

.result-card {
  display: grid; grid-template-columns: 1fr; background: var(--white);
  border: 1px solid var(--line); overflow: hidden; height: 100%;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
  position: relative;
}
.result-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.result-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--tint-3); }
.result-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); }
.result-card:hover .result-card__media img { transform: scale(1.05); }
.result-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.result-card h3 { font-size: 1.12rem; font-weight: 500; line-height: 1.4; margin: 0.85rem 0 0.75rem; }
.result-card p { font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: 1.25rem; }
.result-card .link-arrow { margin-top: auto; }
.result-card__link::after { content: ''; position: absolute; inset: 0; }

.ba-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: center; }
@media (max-width: 720px) { .ba-grid { grid-template-columns: 1fr; } .ba-grid .ba-arrow { transform: rotate(90deg); margin-inline: auto; } }
.ba-box { padding: 1.5rem; border: 1px solid var(--line); background: var(--white); }
.ba-box--after { background: var(--tint-3); border-color: var(--lightblue); }
.ba-box h4 { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.9rem; }
.ba-box--after h4 { color: var(--teal); }
.ba-box li { font-size: var(--fs-sm); padding-left: 1.4rem; position: relative; margin-bottom: 0.5rem; }
.ba-box li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 8px; height: 1.5px; background: var(--line-strong); }
.ba-box--after li::before {
  width: 10px; height: 10px; top: 0.42em; background: var(--teal);
  clip-path: polygon(0 40%, 55% 40%, 55% 0, 100% 50%, 55% 100%, 55% 60%, 0 60%);
}
.ba-arrow { width: 44px; height: 44px; color: var(--teal); }

.facts-panel { background: var(--tint-3); padding: clamp(1.5rem, 1.2rem + 1vw, 2rem); position: sticky; top: calc(var(--header-h) + 28px); }
@media (max-width: 1000px) { .facts-panel { position: static; } }
.facts-panel dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); margin-bottom: 0.35rem; }
.facts-panel dd { font-size: var(--fs-sm); color: var(--ink-2); margin: 0 0 1.35rem; }
.facts-panel dd:last-of-type { margin-bottom: 0; }

.newsletter {
  background: var(--dark); color: var(--on-dark-2); padding: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  position: relative; overflow: hidden;
}
.newsletter h2 { color: var(--cream); }
.newsletter form { display: flex; gap: 0.75rem; margin-top: 1.75rem; flex-wrap: wrap; }
.newsletter input {
  flex: 1 1 240px; padding: 1.05rem 1.15rem; border: 1px solid rgba(205,232,232,.32);
  background: rgba(255,255,255,.06); color: var(--cream); border-radius: 0; font-size: var(--fs-sm);
}
.newsletter input::placeholder { color: rgba(185,212,210,.65); }
.newsletter input:focus { outline: none; border-color: var(--lightblue); }

.back-to-top {
  position: fixed; right: clamp(1rem, 0.5rem + 1.5vw, 2rem); bottom: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  z-index: 700; width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--dark); color: var(--cream);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: all 0.38s var(--ease-out);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--teal); }
.back-to-top svg { width: 19px; height: 19px; }

/* Brand diagonal parallelogram pattern (from the CTA section rules) */
.pattern-diag {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(112deg,
      rgba(226, 216, 213, 0.85) 0 34px,
      transparent 34px 78px),
    repeating-linear-gradient(112deg,
      transparent 0 56px,
      rgba(255, 255, 255, 0.5) 56px 74px);
  background-size: 100% 116px, 100% 116px;
  background-position: 0 0, 58px 58px;
}
.cta-band--dark .pattern-diag {
  background-image:
    repeating-linear-gradient(112deg,
      rgba(205, 232, 232, 0.28) 0 34px,
      transparent 34px 78px);
}

/* --------------------------------------------------------------- 23. Animations */
@keyframes fadeUp   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes floatY   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes marquee  { from { transform: translateX(0); } to { transform: translateX(-25%); } }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out); }
.reveal-stagger.is-in > * { opacity: 1; transform: none; }
.reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0.03s; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: 0.11s; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: 0.19s; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: 0.27s; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: 0.35s; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: 0.43s; }

.draw-path { stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); }
.is-in .draw-path { animation: drawLine 1.5s var(--ease-out) forwards; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  .draw-path { stroke-dashoffset: 0 !important; }
}

/* --------------------------------------------------------------- 24. Print */
@media print {
  .site-header, .site-footer, .cta-band, .back-to-top, .mega, .mobile-nav, .toc, .share-row { display: none !important; }
  body { color: #000; }
  .prose { font-size: 11pt; }
}

/* ==========================================================================
   24. Mobile optimization
   Consolidated here rather than scattered through the file, so the phone
   behaviour of the whole site can be read and changed in one place.
   ========================================================================== */

/* --- Grid blowout guards -------------------------------------------------
   A grid or flex item's automatic minimum size is its min-content width, so a
   single wide descendant can force a track wider than the viewport. That is
   exactly what happened to the articles: `.table-scroll table` carries
   min-width: 540px, which widened the whole article column to 540px on a
   360px screen and pushed roughly 40% of every line of body text off-screen,
   hidden by the overflow clip on body. Opting these containers out of the
   automatic minimum lets the table scroll inside its own wrapper, which is
   what it was always meant to do. */
.prose,
.article-layout > *,
.calc > *,
.footer-grid > *,
.split > *,
.table-scroll { min-width: 0; }

@media (max-width: 1000px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
}

/* --- Form controls -------------------------------------------------------
   iOS zooms the page whenever a focused control is under 16px, which throws
   the layout sideways and makes the user pinch back. Nothing is worth that. */
@media (max-width: 900px) {
  input, select, textarea,
  .field input, .field select, .field textarea,
  .calc__input input,
  .search-field input,
  .newsletter input { font-size: 16px; }
}

/* --- Touch targets -------------------------------------------------------
   44px is the smallest reliably tappable square. Desktop keeps the tighter
   sizes because a cursor is precise. */
@media (max-width: 900px) {
  .social-links a { width: 44px; height: 44px; }
  .share-row a    { width: 44px; height: 44px; }
  .share-row      { gap: 0.6rem; flex-wrap: wrap; }

  /* The logo lockup is short. Pad the link rather than the image, so the
     wordmark keeps its size and only the hit area grows. */
  .logo { padding-block: 8px; }

  /* Extend the hit area without moving anything: the underline lives on
     ::after, so padding here would drag it away from the text. */
  .link-arrow { position: relative; }
  .link-arrow::before {
    content: ''; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px;
  }

  /* Full-width buttons stack into unambiguous targets and stop a two-word
     button sitting alone on a line looking like a mistake. */
  .btn-group { gap: 0.7rem; }
  .btn-group > .btn { width: 100%; }
  .btn { padding-block: 1.1rem; }

  /* The phone and email at the foot of the slide-in menu are the two links
     most likely to be tapped on a phone, and were the smallest on the page. */
  .mobile-nav p a {
    display: inline-block; padding-block: 0.6rem;
    text-decoration: underline; text-underline-offset: 3px;
  }
}

/* --- Vertical rhythm -----------------------------------------------------
   The desktop section padding floor of 4rem top and bottom reads as dead
   space once the content is one column deep. */
@media (max-width: 640px) {
  :root {
    --sp-section: 3.5rem;
    --sp-section-sm: 2.25rem;
    --header-h: 68px;
  }
  .cta-band { padding-block: 3.5rem; }
}

/* --- Footer --------------------------------------------------------------
   The brand column carries a logo with real width, so an even `1fr 1fr` was
   resolving to 183px and 116px. Give the brand its own full-width row and
   let the link columns share the rest evenly. */
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 1.5rem; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Headings ------------------------------------------------------------
   Tighten the largest sizes on the narrowest screens, where the fluid floor
   still produces six-line headlines. */
@media (max-width: 380px) {
  :root {
    --fs-display: 2.3rem;
    --fs-h1: 2rem;
    --fs-h2: 1.7rem;
  }
}

/* --- Calculators ---------------------------------------------------------
   Stacked, the result panel sits below a form roughly 500px tall, so editing
   the last field pushes the number you are trying to watch off-screen. The
   peek bar mirrors the headline at the bottom of the viewport while the form
   is in view, and is created by main.js only when it is needed. */
.calc-peek {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 850;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem clamp(1.15rem, 4vw, 1.5rem);
  padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  background: var(--dark); color: var(--on-dark-2);
  border-top: 2px solid var(--gold-on-dark);
  transform: translateY(101%);
  transition: transform 0.28s var(--ease-out);
}
.calc-peek.is-on { transform: none; }
.calc-peek__label {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--lightblue);
}
.calc-peek__value {
  font-size: 1.15rem; font-weight: 500; color: var(--cream);
  font-variant-numeric: tabular-nums; text-align: right; line-height: 1.2;
}
@media (prefers-reduced-motion: reduce) { .calc-peek { transition: none; } }
@media (min-width: 861px) { .calc-peek { display: none; } }

@media (max-width: 860px) {
  /* Give the sticky bar room so it never covers the last field or the CTA. */
  .calc { padding-bottom: 4.5rem; }
  .calc__headline { font-size: clamp(1.75rem, 1.2rem + 3.4vw, 2.4rem); }
  .calc__out { padding: 1.35rem 1.25rem; }
  .calc__rows > div { padding-block: 0.7rem; }
  .calc__rows dt { padding-right: 0.5rem; }
}

/* --- Review rail ---------------------------------------------------------
   Nudge the first card in from the edge and let the last one clear it. */
@media (max-width: 900px) {
  .reviews__rail { scroll-padding-inline: var(--gutter); }
  .reviews__rail::after { content: ''; flex: 0 0 1px; }
}

/* --- Tables --------------------------------------------------------------
   Make it obvious the table scrolls rather than leaving it looking cropped. */
@media (max-width: 860px) {
  .table-scroll {
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--white) 30%, transparent) left / 28px 100% no-repeat,
      linear-gradient(to left,  var(--white) 30%, transparent) right / 28px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(15,56,55,.14), transparent) left / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(15,56,55,.14), transparent) right / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
}

/* ==========================================================================
   25. Calculator refine panel, warnings, and result tables
   ========================================================================== */

/* Progressive disclosure: the three inputs everyone knows stay visible, and
   the ones that used to be listed as exclusions live one click away. */
.calc__refine { border: 1px solid var(--line); background: var(--tint-1); }
.calc__refine > summary {
  padding: 0.9rem 1.1rem; cursor: pointer; list-style: none;
  font-size: var(--fs-sm); font-weight: 600; color: var(--dark);
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  transition: color var(--dur-fast) var(--ease);
}
.calc__refine > summary::-webkit-details-marker { display: none; }
.calc__refine > summary::after {
  content: ''; flex: none; width: 9px; height: 9px;
  border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-fast) var(--ease);
}
.calc__refine[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.calc__refine > summary:hover { color: var(--teal); }
.calc__refine > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.calc__refine-body {
  display: flex; flex-direction: column; gap: 1.15rem;
  padding: 0.35rem 1.1rem 1.25rem;
  border-top: 1px solid var(--line);
}
.calc__refine-body .field { gap: 0.4rem; }

/* A checkbox that behaves like the other fields rather than like the contact
   form's service picker. */
.check--calc { align-items: flex-start; background: var(--white); }
.check--calc .field__hint { display: block; margin-top: 2px; font-weight: 400; }

/* Flags a result that is technically correct but needs a caveat read, such as
   a salary low enough to attract attention. */
.calc__warn {
  margin-top: 1rem; padding: 0.85rem 1rem;
  background: rgba(224, 192, 90, 0.13);
  border-left: 2px solid var(--gold-on-dark);
  font-size: var(--fs-xs); line-height: 1.6; color: var(--on-dark);
}
.calc__warn[hidden] { display: none; }

/* Schedules and sensitivity grids inside the dark result panel. */
.calc__table { margin-top: 1.75rem; }
.calc__table-cap {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--lightblue); margin-bottom: 0.7rem;
}
.calc__table .table-scroll { margin-block: 0; background: none; }
.calc__table table { width: 100%; border-collapse: collapse; min-width: 0; font-size: var(--fs-xs); }
.calc__table th {
  text-align: left; padding: 0.5rem 0.6rem; background: none; color: var(--lightblue);
  font-weight: 600; border-bottom: 1px solid rgba(205,232,232,.28); white-space: nowrap;
}
.calc__table td {
  padding: 0.5rem 0.6rem; color: var(--on-dark-2);
  border-bottom: 1px solid rgba(205,232,232,.12); white-space: nowrap;
}
.calc__table .num { text-align: right; font-variant-numeric: tabular-nums; }
.calc__table tbody tr:last-child td { border-bottom: 0; }

/* The form column gets taller with the refine panel, so let the result panel
   stay in view on desktop rather than scrolling away. */
@media (min-width: 861px) {
  .calc__out { position: sticky; top: calc(var(--header-h) + 1.25rem); }
}