/* ================================================================
   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: 999px;
  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;
  bottom: 0;
  background: var(--cream);
  z-index: 99;
  padding: 1.5rem var(--gutter) 3rem;
  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;
  max-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;
  max-height: 100%;
}

/* 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;
}
.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); }
.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; }
.service-rows {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
}
.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;
}
.fork-card {
  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;
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.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: block;
  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-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 3.5rem;
  border-radius: 12px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 10px 24px rgba(15, 36, 87, 0.16);
  transition: filter 0.25s var(--ease);
}
.begin-card-cta-pink { background: var(--pink); }
.begin-card-cta-navy { background: var(--navy-deep); }
.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 */
  .hero { flex-direction: column; justify-content: center; }
  .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-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-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; }

/* 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;
}
/* 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-frame--calendar iframe {
    min-height: 1100px;
  }
}
.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), frosted glass-card framing, one eyebrow heading above the
   grid instead of a heading inside each card, soft gradient ground
   with blurred decorative circles. 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: linear-gradient(135deg, rgba(219, 39, 136, 0.05), var(--cream) 55%, rgba(24, 59, 143, 0.06));
}
.contact-form-section .section-inner { position: relative; z-index: 1; }
.contact-form-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.contact-form-blob--a { top: -80px; right: -60px; width: 320px; height: 320px; background: rgba(229, 97, 168, 0.16); }
.contact-form-blob--b { bottom: -100px; left: -80px; width: 280px; height: 280px; background: rgba(24, 59, 143, 0.12); }
.contact-form-eyebrow { margin-bottom: 1.75rem; }
.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; }

/* ================================================================
   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-steps {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, 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: 860px) {
  .forms-poa-steps { grid-template-columns: 1fr; }
}