/* ================================================================
   KT Bradley CPA - sandbox rebuild
   Brand: pink #E561A8 · navy #183B8F · deep navy #0F2457 · cream #FCFAFB
   ================================================================ */

:root {
  --pink: #E561A8;
  --pink-hover: #d44d93;
  --navy: #183B8F;
  --navy-deep: #0F2457;
  --cream: #FCFAFB;
  --ink: #1c2333;
  --ink-soft: rgba(15, 36, 87, 0.68);
  --line: #dde1ea;
  --card: #ffffff;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 76px;
  --max: 1240px;
  --gutter: clamp(1.5rem, 5vw, 4rem);
  /* AA-safe companions, adapted from the portal platform index.css
     --accent-aa / --primary-aa -- same values, this brand's pink is the
     same hue family so the source's contrast fixes carry over exactly. */
  --pink-aa: #c41f76;
  --pink-cta: #db2788;
  --pink-cta-hover: #c2216d;
}

*, *::before, *::after { box-sizing: border-box; }
/* entry-state transforms (converging heading segs, fork cards) extend the
   scrollable area sideways before they animate in; clip that overflow at
   the root so no viewport can pan horizontally */
html, body { overflow-x: clip; }
/* Lenis drives the scroll. The browser's own smooth-scroll engine must be
   OFF or the two fight over the same scroll position, which reads as jank
   and overshoot. Native smooth only applies when Lenis is absent. */
html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  color: var(--navy-deep);
  margin: 0;
  font-weight: 600;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; background: none; border: none; cursor: pointer; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy-deep);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 999;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}

.tnum { font-variant-numeric: tabular-nums; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
  white-space: nowrap;
}
.btn-pink {
  background: var(--pink);
  color: #fff;
  box-shadow: 0 8px 24px rgba(229, 97, 168, 0.32);
}
.btn-pink:hover, .btn-pink:focus-visible {
  background: var(--pink-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(229, 97, 168, 0.42);
}
.btn-pink:active { transform: translateY(0) scale(0.98); }
.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid rgba(24, 59, 143, 0.35);
}
.btn-outline:hover, .btn-outline:focus-visible {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
  transform: translateY(-2px);
}

/* ── Rule link (underline wipe) ───────────────────────────── */
.rule-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--pink);
}
.rule-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0.22);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.rule-link:hover::after, .rule-link:focus-visible::after { transform: scaleX(1); }
.rule-link span { transition: transform 0.3s var(--ease); }
.rule-link:hover span, .rule-link:focus-visible span { transform: translateX(4px); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--pink);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1.5px;
  background: currentColor;
  opacity: 0.7;
}

.rule {
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease);
}
.rule.is-visible { transform: scaleX(1); }

/* ── Reveal system (JS toggles .is-visible; CSS fallback never leaves blank) ── */
.reveal-el {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal-el.dir-left { transform: translate3d(-46px, 0, 0); }
.reveal-el.dir-right { transform: translate3d(46px, 0, 0); }
.reveal-el.is-visible { animation: none; opacity: 1; transform: none; }
/* No-JS fallback only: JS drives reveals via IntersectionObserver + .is-visible.
   html.js is set by an inline head script before CSS applies, so this timer
   never fires when JS is present. */
html:not(.js) .reveal-el { animation: reveal-fallback 0.7s var(--ease) 1.8s forwards; }
html:not(.js) .peak-copy { opacity: 1; transform: none; }
@keyframes reveal-fallback { to { opacity: 1; transform: none; } }

/* ================================================================
   NAV
   ================================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(252, 250, 251, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(24, 59, 143, 0.08);
}
.nav-inner {
  max-width: var(--max);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
/* Sized up from 34px per the portal platform's nav spec (legibility) --
   nav-h grew 10px alongside it to keep breathing room without losing the
   slim-nav feel. */
.nav-logo img { height: 44px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1;
}
.nav-link {
  position: relative;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy-deep);
  padding: 0.35rem 0;
  white-space: nowrap;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }

.nav-more { position: relative; }
.nav-more-btn { display: inline-flex; align-items: center; gap: 0.3rem; }
.caret { font-size: 0.65rem; transition: transform 0.25s var(--ease); }
.nav-more.open .caret { transform: rotate(180deg); }
.nav-more-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 36, 87, 0.14);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.nav-more.open .nav-more-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-more-menu a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy-deep);
  transition: background 0.2s;
}
.nav-more-menu a:hover, .nav-more-menu a:focus-visible { background: rgba(229, 97, 168, 0.08); color: var(--pink); }

.nav-cta { flex-shrink: 0; padding: 0.6rem 1.4rem; font-size: 0.88rem; }

/* Client Portal button: sits directly left of Book Now, per the portal
   platform's nav spec -- outline pink, fills solid on hover, sized off
   the same .btn pill base, a touch smaller than Book Now. Reuses the
   AA-safe pink companions already adapted from the portal platform's
   index.css (see :root above). */
.nav-cta-group { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.nav-portal-btn {
  padding: 0.5rem 1.2rem;
  font-size: 0.85rem;
  background: transparent;
  color: var(--pink-aa);
  border: 1.5px solid var(--pink-aa);
}
.nav-portal-btn:hover, .nav-portal-btn:focus-visible {
  background: var(--pink-cta);
  color: #fff;
  border-color: var(--pink-cta);
}
.nav-portal-btn:active { transform: translateY(0) scale(0.98); }

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy-deep);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  /* NOT bottom:0 - the .nav ancestor sets backdrop-filter, which makes it the
     containing block for this fixed child, so bottom:0 resolved to the 76px
     nav bar and clipped the menu to one link. An explicit height off the
     viewport fills correctly regardless of the containing block. */
  bottom: auto;
  height: calc(100dvh - var(--nav-h));
  background: var(--cream);
  z-index: 99;
  /* generous bottom clearance + safe-area inset so the Client Portal / Book Now
     CTA row is never clipped behind the iOS Safari bottom toolbar */
  padding: 1.5rem var(--gutter) calc(4.5rem + env(safe-area-inset-bottom, 0px));
  flex-direction: column;
  gap: 0.25rem;
  overflow-y: auto;
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.mobile-menu.open { opacity: 1; transform: translateY(0); visibility: visible; }
.mobile-menu a {
  padding: 1rem 0.25rem;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--navy-deep);
}
/* Mobile mirror of .nav-cta-group -- Portal + Book Now as a pair, bigger
   tap targets per the portal platform's mobile drawer spec. Book Now
   still closes the drawer on tap (main.js), which a hash-only nav
   otherwise wouldn't trigger. */
.mobile-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}
.mobile-cta-row .btn { min-height: 44px; padding-left: 1.4rem; padding-right: 1.4rem; }

/* ================================================================
   HERO
   ================================================================ */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  overflow: hidden;
  background: var(--cream);
}
/* faint ruled lines, the way a ledger page is ruled: gives the empty left
   side structure and reads as accounting rather than as blank canvas */
.hero-field {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(24, 59, 143, 0.055) 0px,
      rgba(24, 59, 143, 0.055) 1px,
      transparent 1px,
      transparent 46px
    ),
    radial-gradient(60% 55% at 82% 45%, rgba(24, 59, 143, 0.07), transparent 70%),
    radial-gradient(38% 38% at 6% 12%, rgba(229, 97, 168, 0.07), transparent 70%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 38%, transparent 55%);
  mask-image: linear-gradient(90deg, #000 0%, #000 38%, transparent 55%);
  pointer-events: none;
}
/* Full bleed right: the container is NOT centred with a max-width, or the
   portrait can only ever reach the container edge. Instead the left padding
   is computed so the copy column lines up exactly with the centred content
   used everywhere else on the page, while the right column runs all the way
   to the viewport edge. */
.hero-inner {
  /* deliberately not position:relative - the portrait anchors to .hero */
  z-index: 1;
  width: 100%;
  /* percentage resolves against .hero, which excludes the scrollbar, so this
     lands on exactly the same left edge as every centred section below */
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2rem, 5vw, 3.5rem)
           max(var(--gutter), calc((100% - var(--max)) / 2));
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(42%, 50%, 54%);
  /* second track is intentionally empty: it holds space for the absolutely
     positioned portrait so copy can never run underneath it */
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  min-height: 0;
}

/* the editorial rail: one hairline holding the whole column */
.hero-copy {
  position: relative;
  max-width: 620px;
  padding-left: clamp(1.1rem, 2vw, 1.9rem);
}
.hero-copy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--pink), rgba(229, 97, 168, 0.18));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.1s var(--ease) 0.05s;
}
.hero.hero-in .hero-copy::before { transform: scaleY(1); }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--pink);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.hero-eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--pink);
  transform: rotate(45deg);
  flex: none;
}
.hero.hero-in .hero-eyebrow { opacity: 1; transform: none; }

.hero-headline {
  margin-top: 1.15rem;
  font-size: clamp(2.6rem, 5.5vw, 4.5rem);
  line-height: 1.07;
  font-weight: 700;
  letter-spacing: -0.032em;
  color: var(--navy-deep);
}
.hero-headline .hl-line { display: block; }
/* each word is its own mask: it rises out of the line above it */
.hero-headline .hw {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* the mask has to clear the descenders or the g in "working." gets cut.
     Pad the box, then pull the same amount back so layout is unchanged. */
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.hero-headline .hw > em,
.hero-headline .hw {
  font-style: normal;
}
.hero-headline .hw {
  opacity: 0;
  transform: translateY(0.9em);
  transition: opacity 0.55s var(--ease), transform 0.75s var(--ease);
}
.hero.hero-in .hero-headline .hw { opacity: 1; transform: none; }
/* the accent word carries the colour and gets its own drawn underline */
.hero-headline em {
  font-style: normal;
  color: var(--pink);
}

.hero-sub {
  margin-top: 1.3rem;
  font-size: clamp(1.05rem, 1.55vw, 1.22rem);
  color: var(--ink-soft);
  max-width: 470px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease) 0.55s, transform 0.7s var(--ease) 0.55s;
}
.hero.hero-in .hero-sub { opacity: 1; transform: none; }

.hero-cred {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--navy);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease) 0.64s, transform 0.7s var(--ease) 0.64s;
}
.hero-cred span { color: var(--pink); }
.hero.hero-in .hero-cred { opacity: 1; transform: none; }

.hero-ctas {
  margin-top: 1.7rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease) 0.72s, transform 0.7s var(--ease) 0.72s;
}
.hero.hero-in .hero-ctas { opacity: 1; transform: none; }

/* proof, in the first screen instead of buried below */
.hero-proof {
  margin-top: clamp(1.5rem, 3vw, 2.1rem);
  padding-top: clamp(1.1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--line);
  display: flex;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease) 0.9s, transform 0.7s var(--ease) 0.9s;
}
.hero.hero-in .hero-proof { opacity: 1; transform: none; }
.hero-proof-item { display: flex; flex-direction: column; gap: 0.15rem; }
.hero-proof-num {
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.7rem, 2.9vw, 2.35rem);
  font-weight: 700;
  line-height: 1;
  color: var(--navy-deep);
  letter-spacing: -0.01em;
}
.hero-proof-label {
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ink-soft);
  line-height: 1.35;
}

/* full bleed: the portrait runs off the right edge, no card, no corners */
/* The portrait is not a picture sitting in a slot: it is the right half of
   the page. Absolute so it fills nav-to-floor regardless of how tall the
   copy column happens to be, which is what kills the pasted-in look. */
/* Sized to the portrait's own 4:5 ratio so the WHOLE frame is visible with
   nothing cropped, anchored to the hero floor so she never spills into the
   section below. Enters from the right, after the headline has set. */
/* A centred grid item, not an absolute element: that guarantees the whole
   portrait is inside the fold no matter how tall the copy column gets, and
   it still reaches the right edge because this track ends at the screen. */
.hero-visual {
  position: relative;
  justify-self: end;
  align-self: center;
  /* Sized off the VIEWPORT, not the hero: the hero can grow taller than one
     screen on short or narrow windows, and a hero-relative size is what kept
     pushing her below the fold. This can never exceed the space between the
     nav and the bottom of the first screen. */
  height: min(calc(100dvh - var(--nav-h) - 54px), 820px);
  aspect-ratio: 3072 / 3840;
  width: auto;
  max-width: 100%;
  opacity: 0;
  transform: translateX(70px);
  transition: opacity 0.9s var(--ease) 0.95s, transform 1.15s var(--ease) 0.95s;
  /* Errol 8/30-8/31: on scroll the portrait visibly "framed out" - a hard
     rectangular edge appeared inside the photo as the hero scrolled away.
     Cause: main.js scroll-scrubs .hero-portrait's transform:scale 1 -> 1.07
     as the hero exits. The portrait is object-fit:cover inside this box, so
     scaling the IMG (not the box) makes it render up to 7% larger than this
     container on every side. This box had no overflow rule of its own (only
     the much bigger outer .hero clips), so the enlarged image bled past this
     box's edge - and past the ::after cream feather below, which is sized to
     THIS box, not the scaled image - reading as a frame/border snapping into
     place mid-scroll. Clipping the scale to this box removes the artifact at
     every scroll position without touching the zoom itself. */
  overflow: hidden;
}
.hero.hero-in .hero-visual { opacity: 1; transform: none; }
.hero-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* container matches the file ratio, so nothing crops */
  object-position: center;
}
/* a thin brand edge where the image meets the copy, instead of a border */
.hero-visual::before { content: none; }
/* soft feather into the cream field so it reads composed, not pasted */
.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* a wider, softer wash on the left so the photo dissolves into the cream
     instead of butting up against the headline as a hard edge */
  background: linear-gradient(
    90deg,
    rgba(252, 250, 251, 1) 0%,
    rgba(252, 250, 251, 0.92) 8%,
    rgba(252, 250, 251, 0.55) 20%,
    rgba(252, 250, 251, 0.18) 32%,
    rgba(252, 250, 251, 0) 44%
  );
}

/* ================================================================
   SECTIONS (shared shell)
   ================================================================ */
.section { padding: clamp(4.5rem, 9vw, 7.5rem) var(--gutter); }
/* Errol 8/30-8/31: "move up" the section right after the hero - the generic
   .section top padding above left too much air between the hero floor and
   the services head. Scoped to whatever section directly follows the hero
   (homepage only - every other page's first section keeps the full rhythm)
   so this doesn't touch spacing anywhere else on the site. */
.hero + .section { padding-top: clamp(2rem, 4vw, 3.25rem); }
.section-inner { max-width: var(--max); margin: 0 auto; }
.section-head { max-width: 640px; margin-bottom: 2.5rem; }
/* one long line: the 640px head is what was wrapping it */
.section-head:has(.section-title-wide) { max-width: none; }

/* centred head: sits in the middle of the page, not pushed left */
.section-head-center {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom: 3rem;
}
.section-title-wide {
  font-size: clamp(1.35rem, 3.1vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 0.42em;
}
.section-line-split {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.35em;
}

/* segments converge on the centre: outer pieces travel in, middle fades up */
.seg {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.85s var(--ease), transform 1s var(--ease);
  will-change: transform, opacity;
}
.seg-l { transform: translate3d(-70px, 0, 0); }
.seg-r { transform: translate3d(70px, 0, 0); }
.seg-c { transform: translate3d(0, 14px, 0); transition-delay: 0.16s; }
.title-in .seg,
.line-in .seg { opacity: 1; transform: none; }
/* the supporting line follows the heading in */
.section-line-split .seg { transition-delay: 0.22s; }
.section-line-split .seg-r { transition-delay: 0.3s; }
.section-title {
  font-size: clamp(2.15rem, 4.4vw, 3.35rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
  position: relative;
}
/* one accent word carries the colour, the rest stays navy */
.section-title em {
  font-style: normal;
  color: var(--pink);
}
/* a rule that draws itself under the heading as it comes into view */
.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.55rem;
  height: 4px;
  width: 132px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--pink), rgba(229, 97, 168, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease) 0.15s;
}
.section-title.title-in::after { transform: scaleX(1); }
/* the accent word lifts in just behind the rule */
.section-title em {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.7s var(--ease) 0.1s, transform 0.7s var(--ease) 0.1s;
}
.section-title.title-in em { opacity: 1; transform: none; }
/* consult band sits centred, so centre its rule too */
.consult-band .section-title::after,
.section-head-center .section-title::after { left: 50%; transform: translateX(-50%) scaleX(0); }
.consult-band .section-title.title-in::after,
.section-head-center .section-title.title-in::after { transform: translateX(-50%) scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .section-title::after { transform: scaleX(1); transition: none; }
  html:not(.force-motion) :is(.consult-band .section-title, .section-head-center .section-title)::after { transform: translateX(-50%) scaleX(1); }
  html:not(.force-motion) .seg { opacity: 1 !important; transform: none !important; transition: none; }
  .section-title em { opacity: 1; transform: none; transition: none; }
}
.section-line {
  margin-top: 0.9rem;
  font-size: 1.1rem;
  color: var(--ink-soft);
}

/* ================================================================
   STAT STRIP - slim, static, sits directly under the hero
   ================================================================ */
.stat-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--cream);
}
.stat-strip-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1.1rem, 2.5vw, 1.6rem) var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.stat-strip-item {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.55rem;
  padding: 0 1rem;
  border-left: 1px solid var(--line);
}
.stat-strip-item:first-child { border-left: none; }
.stat-strip-item .stat-num {
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.stat-strip-label {
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-weight: 600;
  white-space: nowrap;
}

/* ================================================================
   SERVICES STRIP - seven rows, seven devices. Each `.service-row`
   is full-bleed (background band); `.service-row-inner` holds the
   centred two-column grid. Alternating light bands; the peak row
   (tax debt / thread) sits on the one deep-navy band on the page.
   ================================================================ */
.services { padding-bottom: 0; }
/* the three intake-fork cards now sit between the services header and
   this row strip (index.html moved them there); this section reopens
   "services" for the rows only, and needs zero top padding so the rows
   sit flush under the cards, same as when rows were still inside the
   single services section. Scoped like .hero + .section above. */
.intake-fork + .services { padding-top: 0; }
.service-rows {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
}
.service-group-label {
  padding: 1.75rem var(--gutter) 0.75rem;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  color: var(--pink-aa);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.service-group-label + .service-row { border-top: none; }
.service-row {
  border-top: 1px solid var(--line);
  background: #fff;
}
.service-row:first-child { border-top: none; }
.service-row:nth-of-type(even) { background: linear-gradient(180deg, #f6f1f5, #fff); }

.service-row-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.service-row-reverse .service-row-inner { grid-template-columns: 0.95fr 1.05fr; }
.service-row-inner .service-row-media,
.service-row-inner .pan-visual { order: 1; }
.service-row-inner .service-row-copy { order: 2; }
.service-row-reverse .service-row-inner .service-row-media,
.service-row-reverse .service-row-inner .pan-visual { order: 2; }
.service-row-reverse .service-row-inner .service-row-copy { order: 1; }

.service-row-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  background: var(--navy-deep);
  box-shadow: 0 30px 70px -20px rgba(15, 36, 87, 0.28);
}
.service-row-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% center;
}
.service-row-copy { max-width: 440px; }
.service-row-copy .eyebrow { color: var(--pink); }
.service-row-line {
  margin-top: 1rem;
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  line-height: 1.35;
  color: var(--navy-deep);
}
.service-row-copy .rule-link { margin-top: 1.4rem; }
.service-row-wealth .service-row-copy .wealth-time {
  font-size: 0.72em;
  font-weight: 500;
  color: var(--ink-soft);
  font-family: 'Manrope', sans-serif;
}
.service-row-wealth .service-row-copy .btn { margin-top: 1.5rem; }

/* ── Device 1 + 4: frame scrub (canvas), pinned ─────────────── */
.service-row-scrub .service-row-media { background: #0b1a3d; }
.frame-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.frame-poster { opacity: 1; transition: opacity 0.35s var(--ease); }
.service-row-media.is-ready .frame-canvas { opacity: 1; }
.service-row-media.is-ready .frame-poster { opacity: 0; }

/* Row 4 - the peak - deep navy band, copy withheld until the scrub completes */
/* .service-row:nth-of-type(even) is a class+pseudo-class and therefore
   outranked this single class, so the light gradient was winning and the
   near-white peak copy was landing on a near-white band: unreadable.
   Doubling the class raises specificity above it. */
.service-row.service-row-peak {
  background: var(--navy-deep);
  background-image: none;
  border-top-color: rgba(255, 255, 255, 0.14);
}
.service-row-peak + .service-row { border-top-color: var(--navy-deep); }
.service-row.service-row-peak .service-row-line {
  color: #ffffff;
  font-weight: 600;               /* carries against the dark band */
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.35);
}
/* pink at small sizes is thin on navy: lift it for the eyebrow only */
.service-row.service-row-peak .eyebrow { color: #FF8CC6; }
.service-row.service-row-peak .eyebrow::before { background: #FF8CC6; }
.service-row.service-row-peak .rule-link { color: #FF8CC6; font-weight: 700; }
.service-row-peak .service-row-media { box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.55); }
.peak-copy {
  opacity: 0;
  transform: translate3d(-32px, 0, 0);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.peak-copy.is-visible { opacity: 1; transform: none; }

/* ── Device 2: spotlight reveal ─────────────────────────────── */
.service-row-spotlight .service-row-media { will-change: transform; }
.service-row-spotlight .service-row-img { will-change: transform; }
.spot-mask {
  position: absolute;
  inset: -60%;
  width: 220%;
  height: 220%;
  background: radial-gradient(circle at 55% 42%, transparent 0%, transparent 20%, rgba(11, 26, 61, 0.62) 46%);
  transform: scale(0.34);
  transform-origin: 55% 42%;
  pointer-events: none;
  will-change: transform;
}

/* ── Device 3: lateral pan (transform-driven, not object-position) ── */
.service-row-pan .service-row-media { content-visibility: auto; contain-intrinsic-size: 700px 500px; overflow: hidden; }
.pan-img {
  width: 132%;
  height: 100%;
  left: 0;
  transform: translateX(0%);
  will-change: transform;
}
.pan-progress {
  margin-top: 14px;
  height: 2px;
  border-radius: 2px;
  background: rgba(24, 59, 143, 0.14);
  overflow: hidden;
}
.pan-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

/* ── Device 5: iris reveal ──────────────────────────────────── */
.service-row-iris .service-row-media { content-visibility: auto; contain-intrinsic-size: 700px 500px; }
.service-row-iris .service-row-img {
  --iris: 15;
  clip-path: circle(calc(var(--iris) * 1%) at 60% 35%);
  transform: scale(1.15);
  will-change: clip-path, transform;
}

/* ── Device 6: kinetic rise ─────────────────────────────────── */
.service-row-kinetic .service-row-media { content-visibility: auto; contain-intrinsic-size: 700px 500px; overflow: visible; }
.service-row-kinetic [data-kinetic-media] { transform: translateY(55px); will-change: transform; }
.service-row-kinetic .service-row-img { position: absolute; inset: 0; border-radius: 20px; }
.kinetic-glow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -10%;
  height: 46%;
  background: radial-gradient(ellipse at center, rgba(229, 97, 168, 0.85), transparent 70%);
  filter: blur(6px);
  opacity: 0.22;
  will-change: opacity;
  pointer-events: none;
}

/* ── Device 7: light sweep ──────────────────────────────────── */
.service-row-sweep .service-row-media { content-visibility: auto; contain-intrinsic-size: 700px 500px; }
.sweep-base { filter: brightness(0.55) saturate(0.92); }
.sweep-bright {
  filter: brightness(1.14) saturate(1.05);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 20%, transparent 38%);
  mask-image: linear-gradient(to top, #000 0%, #000 20%, transparent 38%);
  -webkit-mask-size: 100% 340%;
  mask-size: 100% 340%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 -240%;
  mask-position: 0 -240%;
  will-change: mask-position, -webkit-mask-position;
}

/* ================================================================
   CONSULTATION CTA - simple light band, no scrub, no pin
   ================================================================ */
.consult-band { background: linear-gradient(180deg, #f5f1f6, var(--cream)); }
.consult-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.consult-inner .section-line { margin-left: auto; margin-right: auto; }
.consult-inner .btn { margin-top: 2rem; }
.consult-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2rem; }
.consult-cta-row .btn { margin-top: 0; }

/* ================================================================
   INTAKE FORK
   ================================================================ */
.intake-fork {
  background: linear-gradient(180deg, var(--cream), #f5f1f6);
}
.fork-grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}
.intake-returning-link { margin-top: 1.25rem; text-align: center; }
@media (min-width: 900px) {
  .fork-grid:has(.fork-advising) { grid-template-columns: repeat(3, 1fr); }
}
.fork-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(2rem, 3.5vw, 3rem);
  box-shadow: 0 20px 50px rgba(15, 36, 87, 0.08);
  opacity: 0;
  min-width: 0; /* grid items default to min-width:auto, which would let the
    nowrap CTA label below force this card wider than its 1fr/3-col track */
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.fork-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), var(--card-bg);
  background-size: cover;
  background-position: center;
  border-radius: inherit;
  pointer-events: none;
}
.fork-card > * { position: relative; z-index: 1; }
.fork-left { transform: translateX(-70px); }
.fork-right { transform: translateX(70px); }
.fork-card.is-visible { opacity: 1; transform: none; }
.fork-card:hover { box-shadow: 0 28px 64px rgba(15, 36, 87, 0.14); }
.fork-card.is-visible:hover { transform: translateY(-4px); }
.fork-title { font-size: 1.5rem; margin-bottom: 0.75rem; }
.fork-desc { color: var(--ink-soft); font-size: 1rem; line-height: 1.55; margin-bottom: 1.75rem; }
.fork-btn { width: 100%; }

/* begin-card: the fork-card is now a <button> that opens #intakeModal
   instead of an <a> to ktbportal.com/personal-tax-intake|business-tax-intake.
   Adds the icon + big CTA-bar treatment from Home.tsx's ReadyToBegin cards
   on top of the existing fork-card shell (kept so the .fork-card
   IntersectionObserver reveal in main.js keeps working untouched). */
.begin-card {
  /* display:flex (not block) so a <button>'s Chromium/WebKit internal
     content-centering quirk never fires: a block-level <button> taller
     than its own content (min-height below) gets its children vertically
     centered by the browser regardless of this rule, which is what put
     the Business Tax card's icon/title ~12px lower than the other two
     (its description text is short enough to leave that extra height).
     flex + column stacks children top-down exactly like block did. */
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  min-height: 340px;
}
.begin-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  margin-bottom: 1.1rem;
}
.begin-card-icon svg { width: 24px; height: 24px; }
.begin-card-icon-pink { background: rgba(229, 97, 168, 0.12); color: var(--pink); }
.begin-card-icon-navy { background: rgba(24, 59, 143, 0.1); color: var(--navy); }
.begin-card-icon-gold { background: rgba(180, 141, 47, 0.12); color: #B48D2F; }
.begin-card-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  width: 100%;
  height: 3.5rem;
  padding: 0 0.65rem;
  border-radius: 8px;
  /* one step down from 1.15rem, then shrinks further via clamp() rather
     than wrapping once a card gets too narrow to hold the label on one
     line (as low as 3-col cards run at ~900-1100px viewports) */
  font-size: clamp(0.6rem, 3.2vw, 1.05rem);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(15, 36, 87, 0.16);
  transition: filter 0.25s var(--ease);
}
.begin-card-cta > span:last-child { flex-shrink: 0; }
@media (min-width: 900px) {
  /* the 3-col fork-grid (.fork-grid:has(.fork-advising)) kicks in at 900px,
     which is a narrower card than the single-column layout below it -
     needs its own, smaller clamp so the label still fits on one line */
  .begin-card-cta { font-size: clamp(0.55rem, calc(1.352vw - 0.2rem), 1rem); }
}
.begin-card-cta-pink { background: var(--pink); }
.begin-card-cta-navy { background: var(--navy-deep); }
.begin-card-cta-gold { background: #B48D2F; }
.begin-card:hover .begin-card-cta { filter: brightness(1.06); }
.begin-card:hover { transform: translateY(-4px); }

/* modal-enter: exact clone of ktb-tax-site/src/index.css:111-115 */
.modal-enter { animation: modal-enter 0.35s var(--ease) both; }
@keyframes modal-enter {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* ================================================================
   INTAKE MODAL - static clone of IntakeFlow.tsx
   ================================================================ */
.intake-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 1rem;
}
.intake-modal[hidden] { display: none; }
@media (min-width: 640px) { .intake-modal { padding: 1.5rem; } }
.intake-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 36, 87, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.intake-modal-card {
  position: relative;
  margin: auto 0;
  width: 100%;
  max-width: 672px;
  max-height: 96dvh;
  overflow-y: auto;
  background: #fff;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 25px 70px rgba(15, 36, 87, 0.28);
}
@media (min-width: 640px) { .intake-modal-card { padding: 1.5rem; } }
.intake-modal-close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  line-height: 1;
  font-size: 1.5rem;
  color: var(--ink-soft);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.intake-modal-close:hover, .intake-modal-close:focus-visible { color: var(--navy-deep); }
.intake-modal-dots { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.intake-dot {
  height: 6px;
  width: 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  transition: all 0.3s var(--ease);
}
.intake-dot.is-active { width: 32px; background: var(--pink); border-color: var(--pink); }

.intake-modal-title { font-size: 1.25rem; font-weight: 700; color: var(--navy-deep); }
.intake-modal-sub { margin-top: 0.25rem; font-size: 0.9rem; color: var(--ink-soft); }

.intake-questions { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.65rem; }
.intake-q { transition: opacity 0.25s var(--ease); }
.intake-q.is-locked { opacity: 0.4; pointer-events: none; }
.intake-q-prompt { margin: 0 0 0.35rem; font-size: 0.875rem; font-weight: 600; color: var(--navy-deep); }
.intake-q-prompt.is-current { color: var(--pink-aa); }
.intake-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.intake-pill {
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid var(--line);
  padding: 0.35rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--navy-deep);
  background: #fff;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.intake-pill:hover { border-color: rgba(229, 97, 168, 0.6); }
.intake-pill.is-selected { border-color: var(--pink); background: var(--pink); color: #fff; }

.intake-modal-footer {
  margin: 1.25rem -1rem -1rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--line);
  background: #fff;
}
@media (min-width: 640px) { .intake-modal-footer { margin: 1.25rem -1.5rem -1.5rem; padding: 0.75rem 1.5rem; } }
.intake-hint { margin: 0 0 0.4rem; font-size: 0.75rem; font-weight: 600; color: var(--pink-aa); }
.intake-continue {
  min-height: 44px;
  width: 100%;
  border-radius: 8px;
  border: none;
  padding: 0.6rem 1.5rem;
  background: var(--pink-cta);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(15, 36, 87, 0.14);
  cursor: pointer;
  transition: background 0.2s var(--ease), opacity 0.2s var(--ease);
}
.intake-continue:hover:not(:disabled), .intake-continue:focus-visible:not(:disabled) { background: var(--pink-cta-hover); }
.intake-continue:disabled { opacity: 0.4; cursor: not-allowed; }
@media (min-width: 640px) { .intake-continue { width: auto; } }

.intake-step-handoff { padding: 1rem 0; text-align: center; }
.intake-handoff-sub { max-width: 28rem; margin: 0.5rem auto 0; font-size: 0.9rem; color: var(--ink-soft); }
.intake-upload-cta { margin-top: 1.5rem; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .intake-modal-card.modal-enter { animation: none !important; }
  html:not(.force-motion) .intake-q { transition: none !important; }
}

/* ================================================================
   FOOTER
   ================================================================ */
.footer { background: var(--cream); border-top: 1px solid var(--line); }
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(4rem, 7vw, 6rem) var(--gutter) 3rem;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
}
.footer-logo { height: 52px; width: auto; margin-bottom: 1.5rem; }
.footer-desc { color: var(--ink-soft); max-width: 340px; line-height: 1.6; margin-bottom: 1.5rem; }
.footer-contact { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-contact li { font-size: 0.95rem; color: var(--ink-soft); }
.footer-contact a { font-weight: 600; color: var(--navy); transition: color 0.25s; }
.footer-contact a:hover, .footer-contact a:focus-visible { color: var(--pink); }
.footer-links h4, .footer-legal h4 {
  font-family: 'Manrope', sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--navy-deep);
  margin-bottom: 1.25rem;
}
.footer-links ul, .footer-legal ul { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-links a, .footer-legal a {
  font-size: 0.95rem;
  color: var(--ink-soft);
  transition: color 0.25s;
}
.footer-links a:hover, .footer-legal a:hover,
.footer-links a:focus-visible, .footer-legal a:focus-visible { color: var(--pink); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 1.5rem var(--gutter);
  text-align: center;
}
.footer-bottom p { font-size: 0.85rem; color: var(--ink-soft); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1020px) {
  .nav-links { display: none; }
  .nav-cta-group { display: none; }
  .hamburger { display: flex; }
  .mobile-menu { display: flex; }

  .hero-inner {
    grid-template-columns: 1fr;
    text-align: left;
    /* no side padding here: the portrait spans the full column edge to edge
       and the copy carries its own gutter, which avoids negative-margin
       overhang entirely */
    padding-left: 0;
    padding-right: 0;
    gap: clamp(1.75rem, 5vw, 2.5rem);
    min-height: 0;
  }
  .hero-copy {
    padding-left: calc(var(--gutter) + 0.9rem);
    padding-right: var(--gutter);
  }
  /* portrait sits above the copy and spans the full width, still no card.
     Release the desktop one-viewport cap: stacked mobile content (portrait +
     full copy column) is taller than 100dvh, so max-height:100dvh + overflow
     :hidden + align-items:center from the base rule was clipping it and
     center-collapsing the portrait onto the first headline line. Let the hero
     grow to its content and top-align instead. */
  .hero {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }
  .hero-visual {
    position: relative;
    top: auto; right: auto; bottom: auto;
    /* the portrait img is absolutely positioned, so an auto width collapses
       this wrapper to zero. Explicit width plus one negative margin gives a
       clean bleed to both screen edges without overflowing. */
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    order: -1;
    min-height: 0;
    margin-left: 0;
    margin-right: 0;
  }
  .hero-visual .hero-portrait { object-position: 50% 20%; }
  /* one-line heading must be allowed to wrap on a phone */
  .section-title-wide { white-space: normal; text-wrap: balance; }
  .hero-field { -webkit-mask-image: none; mask-image: none; }
  .hero-portrait { object-position: 52% 18%; }
  .hero-visual::before { display: none; }
  .hero-visual::after {
    background: linear-gradient(0deg, rgba(252, 250, 251, 0.9) 0%, rgba(252, 250, 251, 0) 30%);
  }
  .hero-copy { max-width: 100%; }
  .hero-proof { gap: clamp(1.1rem, 5vw, 2rem); }
  .hero-proof-label { font-size: 0.68rem; letter-spacing: 0.08em; }

  .fork-grid { grid-template-columns: 1fr; }
  .fork-left, .fork-right { transform: translateY(50px); }

  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-inner > :first-child { grid-column: 1 / -1; }
}

/* Service rows stack image-over-text below tablet width; JS gates every
   device (frame scrub, pins, spotlight, pan, iris, kinetic, sweep) off
   at the same width, so mobile is always static stills. */
@media (max-width: 860px) {
  .service-row-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .service-row-inner .service-row-media,
  .service-row-inner .pan-visual,
  .service-row-reverse .service-row-inner .service-row-media,
  .service-row-reverse .service-row-inner .pan-visual { order: -1; }
  .service-row-inner .service-row-copy,
  .service-row-reverse .service-row-inner .service-row-copy { order: 0; }
  .service-row-copy, .peak-copy { max-width: 100%; }

  /* content-visibility reserves a fixed 700px placeholder for rows that have
     not painted yet, which overflows a phone screen sideways. Off here. */
  .service-row-media,
  .pan-visual,
  .service-row-pan .service-row-media,
  .service-row-iris .service-row-media,
  .service-row-kinetic .service-row-media,
  .service-row-sweep .service-row-media {
    content-visibility: visible;
    contain-intrinsic-size: auto;
    max-width: 100%;
  }
  .pan-visual { overflow: hidden; }

  /* devices off: static stills only */
  .frame-canvas { display: none; }
  .frame-poster { opacity: 1 !important; }
  .spot-mask { display: none; }
  .pan-img { width: 100%; transform: none !important; }
  .pan-progress { display: none; }
  .service-row-iris .service-row-img { clip-path: none; transform: none; }
  .service-row-kinetic [data-kinetic-media] { transform: none !important; }
  .kinetic-glow { display: none; }
  .sweep-bright { display: none; }
  .sweep-base { filter: none; }
  .peak-copy { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .footer-inner { grid-template-columns: 1fr; }
  .hero-headline { font-size: clamp(2rem, 9vw, 2.6rem); }
  .stat-strip-inner { grid-template-columns: 1fr; gap: 0.85rem; }
  .stat-strip-item { border-left: none; border-top: 1px solid var(--line); padding-top: 0.85rem; justify-content: flex-start; }
  .stat-strip-item:first-child { border-top: none; padding-top: 0; }
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) { scroll-behavior: auto; }
  html:not(.force-motion) * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  html:not(.force-motion) :is(.reveal-el, .fork-card, .hero-headline, .hero-sub, .hero-ctas, .hero-visual, .peak-copy, .hero-eyebrow, .hero-headline .hw, .hero-proof, .hero-cred) {
    opacity: 1 !important;
    transform: none !important;
  }
  html:not(.force-motion) .hero-copy::before { transform: scaleY(1) !important; }
  html:not(.force-motion) .service-row-img { transform: none !important; object-position: 50% center !important; clip-path: none !important; }
  html:not(.force-motion) .frame-canvas { display: none; }
  html:not(.force-motion) .frame-poster { opacity: 1 !important; }
  html:not(.force-motion) .spot-mask { display: none; }
  html:not(.force-motion) .pan-img { width: 100%; }
  html:not(.force-motion) .pan-progress { display: none; }
  html:not(.force-motion) .kinetic-glow { display: none; }
  html:not(.force-motion) .service-row-kinetic [data-kinetic-media] { transform: none !important; }
  html:not(.force-motion) .sweep-bright { display: none; }
  html:not(.force-motion) .sweep-base { filter: none; }
}

/* scrub-word: words cascade in during a pinned frame-scrub, driven by JS */
.scrub-word { display: inline-block; opacity: 0; will-change: opacity, transform; }
/* the scrub only initialises at 861px and wider, so words must be
   fully visible on mobile no matter what */
@media (max-width: 860px) {
  .scrub-word { opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .scrub-word { opacity: 1 !important; transform: none !important; }
}

/* focus-journey peak: media owns its own visibility; image travels under JS */
.service-row-journey .journey-media { overflow: hidden; }
.service-row-journey .service-row-img { will-change: transform; }
@media (max-width: 860px) {
  .service-row-journey .service-row-img { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .service-row-journey .service-row-img { transform: none !important; }
}


/* ================================================================
   SHORT VIEWPORTS - keep the entire hero, portrait included, on one
   screen instead of letting the copy push the photo below the fold
   ================================================================ */
@media (min-width: 1021px) and (max-height: 860px) {
  .hero-headline { font-size: clamp(2.1rem, 3.9vw, 3.35rem); }
  .hero-sub { margin-top: 1rem; font-size: 1.02rem; }
  .hero-cred { margin-top: 0.8rem; font-size: 0.76rem; }
  .hero-ctas { margin-top: 1.25rem; }
  .hero-proof { margin-top: 1.15rem; padding-top: 0.9rem; }
  .hero-proof-num { font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
  .hero-inner { padding-top: 1.5rem; padding-bottom: 1.5rem; }
}
@media (min-width: 1021px) and (max-height: 720px) {
  .hero-headline { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
  .hero-proof { display: none; }
}

/* ================================================================
   SERVICES PAGE - card grid overview (services.html only)
   ================================================================ */
.services-head { padding-bottom: 0; }
.services-head .section-head-center .eyebrow { justify-content: center; margin-bottom: 0.9rem; }
.services-head .section-line { max-width: 620px; margin-left: auto; margin-right: auto; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 3vw, 2.5rem);
}
.service-group-heading {
  grid-column: 1 / -1;
  margin: 0.75rem 0 -0.5rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--line);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  color: var(--navy-deep);
}
.services-grid .service-group-heading:first-child { margin-top: 0; border-top: none; }
.service-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 36, 87, 0.08);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.service-card:hover { box-shadow: 0 28px 64px rgba(15, 36, 87, 0.14); transform: translateY(-4px); }
.service-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--navy-deep);
}
.service-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% center;
}
.service-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
}
.service-card-line {
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--navy-deep);
}
.service-card-body .rule-link { margin-top: 0.2rem; }

/* Tax Debt card: the peak treatment, reused from the homepage scroll row */
.service-card-peak {
  background: var(--navy-deep);
  border-color: rgba(255, 255, 255, 0.14);
}
.service-card-peak .service-card-line { color: #ffffff; font-weight: 600; text-shadow: 0 1px 18px rgba(0, 0, 0, 0.35); }
.service-card-peak .eyebrow { color: #FF8CC6; }
.service-card-peak .eyebrow::before { background: #FF8CC6; }
.service-card-peak .rule-link { color: #FF8CC6; font-weight: 700; }
.service-card-peak:hover { box-shadow: 0 28px 64px rgba(0, 0, 0, 0.4); }

@media (max-width: 1020px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   SERVICES GRID - PEAK BANNER (Tax Debt): full-width horizontal
   band, image left ~45%, copy right, deep navy, pink accents.
   grid-column:1/-1 spans every column count the grid ever uses
   (3-col, 2-col at 1020px, 1-col at 860px) so it is always full
   width and the surrounding cards never leave an empty cell at
   3-col: 3 cards, banner, 3 cards divides evenly.
   ================================================================ */
.service-banner {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 45% 1fr;
  align-items: stretch;
  background: var(--navy-deep);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(15, 36, 87, 0.28);
}
.service-banner-media { position: relative; min-height: 280px; background: var(--navy-deep); }
.service-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% center;
}
.service-banner-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.9rem;
  padding: clamp(2rem, 4vw, 3rem);
}
.service-banner-body .eyebrow { color: #FF8CC6; }
.service-banner-body .eyebrow::before { background: #FF8CC6; }
.service-banner-line {
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.4;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.35);
  max-width: 46ch;
}
.service-banner-body .rule-link { color: #FF8CC6; font-weight: 700; }
@media (max-width: 1020px) {
  .service-banner { grid-template-columns: 40% 1fr; }
}
@media (max-width: 860px) {
  .service-banner { grid-template-columns: 1fr; }
  .service-banner-media { min-height: 220px; }
}

/* Tablet fix (861-1020px): at 2-col, the banner sitting at DOM position 4
   of 7 splits the six cards into a 3-then-3 run. Three cards can never fill
   a 2-col grid evenly, so each run leaves one empty cell (before and after
   the banner). Push the banner to the end with `order` at this width only:
   the six cards then run together as one contiguous block (3 full rows of
   2, zero remainder) and the banner closes the grid as its own full-width
   row. Below 861px the grid is already 1-col, where this never mattered. */
@media (min-width: 861px) and (max-width: 1020px) {
  .service-banner { order: 8; }
}

/* ================================================================
   SERVICE DETAIL PAGES - shared template for the seven
   tax-preparation.html / bookkeeping.html / tax-planning.html /
   tax-debt.html / business-consulting.html / business-funding.html /
   wealth-strategy.html pages. Reveal-el entrances only, no pins,
   no scrubs - main.js already drives every piece used here.
   ================================================================ */

/* ── Hero band: full-bleed service image, navy overlay ─────── */
.detail-hero {
  position: relative;
  min-height: 52vh;
  display: flex;
  align-items: flex-end;
  padding-top: var(--nav-h);
  overflow: hidden;
  background: var(--navy-deep);
}
.detail-hero-media { position: absolute; inset: 0; }
.detail-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% center;
}
.detail-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 36, 87, 0.5) 0%, rgba(15, 36, 87, 0.74) 55%, rgba(15, 36, 87, 0.94) 100%);
}
.detail-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 5rem) var(--gutter) clamp(2.5rem, 5vw, 3.5rem);
}
.detail-hero-inner .eyebrow { color: #FF8CC6; }
.detail-hero-inner .eyebrow::before { background: #FF8CC6; }
.detail-hero-title {
  margin-top: 0.9rem;
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.detail-hero-sub {
  margin-top: 1.1rem;
  max-width: 640px;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}
@media (max-width: 860px) {
  .detail-hero { min-height: 42vh; }
}

/* ── Body: readable measure, drawn-rule headings, diamonds ──── */
.detail-body-section { padding: clamp(3.5rem, 7vw, 6rem) var(--gutter); }
.detail-body-section + .detail-body-section { padding-top: 0; }
.detail-body { max-width: 68ch; margin: 0 auto; }
.detail-body-block { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.detail-body-block:first-child { margin-top: 0; }
.detail-lead {
  font-size: 1.12rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.detail-lead + .detail-lead { margin-top: 1rem; }

.detail-heading {
  position: relative;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 700;
  color: var(--navy-deep);
  padding-bottom: 0.65rem;
  margin-bottom: 1.35rem;
}
.detail-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 68px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--pink), rgba(229, 97, 168, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease) 0.1s;
}
.detail-heading.title-in::after { transform: scaleX(1); }

.detail-body p { color: var(--ink-soft); font-size: 1.03rem; line-height: 1.7; }
.detail-summary {
  margin: -0.55rem 0 1.15rem;
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.6;
}
.detail-body-block p + .detail-block-grid,
.detail-body-block p + .detail-list,
.detail-body-block p + .detail-price-grid,
.detail-body-block p + .detail-faq { margin-top: 1.75rem; }

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.25rem;
  margin-top: 2.25rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.legal-nav a {
  color: var(--navy);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(229, 97, 168, 0.55);
  text-underline-offset: 0.2em;
}
.legal-nav a:hover, .legal-nav a:focus-visible { color: var(--pink-aa); }

/* diamond-marker list */
.detail-list { display: flex; flex-direction: column; gap: 0.85rem; }
.detail-list li {
  position: relative;
  padding-left: 1.65rem;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.6;
}
.detail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 9px;
  height: 9px;
  background: var(--pink);
  transform: rotate(45deg);
  border-radius: 2px;
}

/* subhead + paragraph blocks, two per row on wide screens */
.detail-block-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 2rem;
}
.detail-block-grid.is-single { grid-template-columns: 1fr; }
.detail-subhead {
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 0.4rem;
}
.detail-block p { margin: 0; }
@media (max-width: 640px) {
  .detail-block-grid { grid-template-columns: 1fr; }
}

/* pricing cards */
.detail-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}
.detail-price-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.6rem;
  box-shadow: 0 14px 34px rgba(15, 36, 87, 0.06);
}
.detail-price-card h4 {
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.05rem;
  color: var(--navy-deep);
}
.detail-price-desc { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.55; }
.detail-price-num {
  margin-top: auto;
  padding-top: 0.3rem;
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--pink);
}
.detail-price-card ul { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.2rem; }
.detail-price-card ul li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.detail-price-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 7px;
  height: 7px;
  background: var(--pink);
  transform: rotate(45deg);
  border-radius: 1px;
}

/* pull-quote / highlight band */
.detail-highlight {
  border-left: 3px solid var(--pink);
  background: linear-gradient(90deg, rgba(229, 97, 168, 0.08), transparent);
  padding: 1.4rem 1.75rem;
  border-radius: 0 14px 14px 0;
}
.detail-highlight p {
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--navy-deep);
}

/* FAQ (question/answer pairs, single column) */
.detail-faq { display: flex; flex-direction: column; gap: 1.5rem; }

@media (max-width: 640px) {
  .detail-body-section { padding-left: var(--gutter); padding-right: var(--gutter); }
  .detail-price-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   ABOUT PAGE - split hero (name + portrait), reuses the detail-*
   body components below it. Reveal-el entrances only.
   ================================================================ */
.about-hero {
  position: relative;
  padding-top: var(--nav-h);
  background: var(--cream);
  overflow: hidden;
}
.about-hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) var(--gutter);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.about-hero-copy { max-width: 560px; }
.about-hero-name {
  margin-top: 0.9rem;
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy-deep);
}
.about-hero-role {
  margin-top: 0.5rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--pink);
}
.about-hero-headline {
  margin-top: 1.25rem;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 480px;
}
.about-hero-visual {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 3072 / 3840;
  max-height: 640px;
  width: 100%;
  box-shadow: 0 30px 70px -20px rgba(15, 36, 87, 0.28);
}
.about-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
}
@media (max-width: 860px) {
  .about-hero-inner { grid-template-columns: 1fr; }
  .about-hero-copy { max-width: 100%; }
  .about-hero-visual { order: -1; max-height: 420px; max-width: 320px; margin: 0 auto; }
}

/* ================================================================
   WHY CHOOSE US - quote cards for the client-testimonial copy block
   ================================================================ */
.detail-quotes { display: flex; flex-direction: column; gap: 1.1rem; }
.detail-quote {
  position: relative;
  padding: 1.25rem 1.5rem 1.25rem 2rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(15, 36, 87, 0.06);
}
.detail-quote p {
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  font-style: italic;
  color: var(--navy-deep);
  font-size: 1.02rem;
  line-height: 1.6;
}
.detail-quote::before {
  content: "\201C";
  position: absolute;
  left: 0.55rem;
  top: 0.35rem;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--pink);
  font-style: normal;
  font-family: Georgia, serif;
}

/* numbered step list (upload instructions) - same rhythm as .detail-list
   but a filled pink numeral instead of a diamond, since order matters */
.detail-list-steps { display: flex; flex-direction: column; gap: 0.9rem; counter-reset: step; }
.detail-list-steps li {
  position: relative;
  padding-left: 2.35rem;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.6;
}
.detail-list-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.05em;
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pink);
  color: #fff;
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ================================================================
   EMBED BAND - contact.html / upload.html. Framed panel that holds
   a live GHL iframe when one is captured. The height listener never
   hardcodes a pixel value: it reads the postMessage the embed sends
   and applies it, with min-height as the only fallback.
   ================================================================ */
.embed-band {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 20px 50px rgba(15, 36, 87, 0.08);
}
.embed-band-head { padding: 1.6rem clamp(1.5rem, 3vw, 2.25rem) 0; }
.embed-band-frame { padding: clamp(1.5rem, 3vw, 2.25rem); }
.embed-band-frame iframe {
  width: 100%;
  border: none;
  display: block;
  min-height: 640px;
}
.contact-form-card .embed-band-frame iframe {
  min-height: 900px;
}
/* Booking calendar band: full section width (var(--max), 1240px), not the
   68ch reading column. The group widget renders 3 stacked calendars, which
   needs more floor height than the single contact-form widget above.
   No max-height and no overflow rule anywhere in this file, so the card
   only grows, never clips or scrolls internally. The postMessage listener
   still grows the iframe past this floor once the widget reports its
   real height; this is only the pre-message floor. */
.detail-body-section--booking { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.embed-band-frame--calendar iframe {
  min-height: 900px;
}
@media (max-width: 640px) {
  .embed-band-head { padding: 1.25rem 1rem 0; }
  .embed-band-frame { padding: 1rem; }
  .contact-form-card .embed-band-frame iframe {
    min-height: 1100px;
  }
  .embed-band-frame--calendar iframe {
    min-height: 1100px;
  }
}

@media (max-width: 899px) {
  main { display: flex; flex-direction: column; }
  main > .hero { order: 1; }
  main > .intake-fork { order: 2; }
  main > .services { order: 3; }
  main > .consult-band { order: 4; }
}
.embed-gap-note {
  margin: 0 clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem);
  padding: 1.25rem 1.5rem;
  border: 1px dashed rgba(24, 59, 143, 0.28);
  border-radius: 14px;
  background: rgba(24, 59, 143, 0.045);
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}
.embed-gap-note strong { color: var(--navy-deep); }
.embed-gap-note .embed-gap-cta { margin-top: 0.9rem; }

/* contact facts row (footer facts only, restated on the contact page) */
.contact-facts { display: flex; flex-direction: column; gap: 1rem; }
.contact-fact { display: flex; flex-direction: column; gap: 0.2rem; }
.contact-fact-label {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pink);
}
.contact-fact-value {
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--navy-deep);
}
.contact-fact-value a { transition: color 0.25s; }
.contact-fact-value a:hover, .contact-fact-value a:focus-visible { color: var(--pink); }

/* ================================================================
   CONTACT FORM SECTION -- reframed to the portal platform's form-
   section spec: full-width two-column grid (form left, info card
   right), restrained card framing, one eyebrow heading above the grid
   instead of a heading inside each card. The GHL iframe (widget
   MnEkllyIYDAzWj18hrfb) stays the form engine untouched -- only this
   surrounding frame changed. Keeps the .detail-body-section class so
   the booking band directly below still gets its zeroed top padding
   from the existing adjacent-sibling rule, unchanged.
   ================================================================ */
.contact-form-section {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) clamp(1.5rem, 3vw, 2.25rem);
  background: var(--cream);
}
.contact-form-section .section-inner { position: relative; z-index: 1; }
.contact-form-eyebrow { margin-bottom: 1.75rem; }
.contact-form-reassurance { font-weight: 700; color: var(--navy-deep) !important; }
.contact-form-grid { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 860px) {
  .contact-form-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
.glass-card {
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(15, 36, 87, 0.08);
  padding: 1.75rem;
}
@media (min-width: 640px) {
  .glass-card { padding: 2.5rem; }
}
/* embed-band already draws its own card chrome; strip that out when it's
   nested inside .glass-card so the form doesn't get a card-in-a-card. */
.contact-form-card .embed-band { margin-top: 1.25rem; border: none; box-shadow: none; background: transparent; border-radius: 0; }
.contact-form-card .embed-band-frame { padding: 0; }
.contact-info-card .contact-facts { gap: 1.4rem; }

.embed-status {
  margin-bottom: 0.9rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.embed-fallback {
  margin-top: 1rem !important;
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--pink);
  background: rgba(229, 97, 168, 0.06);
  color: var(--ink-soft);
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
}
.embed-fallback a { color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 0.15em; }
.visit-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ================================================================
   FORMS PAGE - download card grid + Form 2848 process band
   ================================================================ */
.forms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.form-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: 16px;
  padding: 1.75rem;
  box-shadow: 0 14px 34px rgba(15, 36, 87, 0.06);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease), border-left-color 0.35s var(--ease);
}
.form-card:hover, .form-card:focus-visible {
  border-left-color: var(--pink);
  box-shadow: 0 24px 54px rgba(15, 36, 87, 0.12);
  transform: translateY(-4px);
}
.form-card-top { display: flex; align-items: center; justify-content: space-between; }
.form-card-num {
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: rgba(229, 97, 168, 0.45);
}
.form-card-arrow { color: var(--pink); font-size: 1.1rem; }
.form-card-name {
  margin-top: 1rem;
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy-deep);
}
.form-card-desc {
  margin-top: 0.5rem;
  flex-grow: 1;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.form-card-download {
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pink);
}
.form-card-download span { transition: transform 0.2s var(--ease); }
.form-card:hover .form-card-download span, .form-card:focus-visible .form-card-download span { transform: translateY(2px); }

.forms-footer-note { margin-top: 2rem; font-size: 0.92rem; color: var(--ink-soft); }

@media (max-width: 1020px) {
  .forms-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .forms-grid { grid-template-columns: 1fr; }
}

.forms-poa-band {
  background: var(--navy-deep);
  padding: clamp(4rem, 8vw, 7rem) var(--gutter);
}
.forms-poa-band .section-inner { max-width: var(--max); margin: 0 auto; padding: 0; }
.eyebrow-steel { color: rgba(255, 255, 255, 0.75); }
.eyebrow-steel::before { background: rgba(255, 255, 255, 0.55); }
.forms-poa-intro {
  max-width: 58ch;
  margin-top: 1rem;
  color: rgba(252, 250, 251, 0.72);
  line-height: 1.65;
}
.forms-poa-steps {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5px;
  background: rgba(252, 250, 251, 0.15);
  border-radius: 14px;
  overflow: hidden;
}
.forms-poa-step { background: var(--navy-deep); padding: 1.9rem; }
.forms-poa-step-num {
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--pink);
}
.forms-poa-step-title {
  margin-top: 0.75rem;
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
}
.forms-poa-step-body {
  margin-top: 0.5rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(252, 250, 251, 0.65);
}
@media (max-width: 1020px) {
  .forms-poa-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .forms-poa-steps { grid-template-columns: 1fr; }
}