/* ============================================================
   PIVOT AIDE TAX — PAGE-SPECIFIC LAYOUTS & WIDGETS
   ============================================================ */

/* ============================================================
   SORABAN FROSTED CURTAIN SCROLL TRANSITION
   ============================================================ */

.scroll-pin-wrapper {
  position: relative;
  overflow: visible;
  width: 100%;
}

/* ---------- Section 01: Hero (Full-Viewport Pinned Stage) ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 100vh;
  width: 100%;
  background: var(--night);
  color: var(--night-ink);
  padding: 0;
  overflow: hidden;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero-dim-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(4, 10, 15, 0.4) 0%, rgba(4, 10, 15, 0.85) 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  will-change: opacity;
}

.hero .shell.in > div:first-child {
  position: relative;
  z-index: 6;
  will-change: transform, opacity;
}

#owl-container {
  position: relative;
  z-index: 6;
  will-change: transform, opacity;
  transform-origin: 50% 60%;
}

/* ---------- Section 02: Incoming Frosted Sheet (Thesis) ---------- */
.section-thesis {
  position: relative;
  z-index: 10;
  width: 100%;
  min-height: 100vh;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;

  /* Soraban Frosted Glass Specification */
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  background: rgba(14, 22, 33, 0.88);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.4);

  /* Performance */
  will-change: transform, opacity;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Coordinated Stagger Targets */
.section-thesis .sechead .eyebrow,
.section-thesis .sechead h2,
.section-thesis .sechead .lede,
.section-thesis .versus,
.section-thesis .versus > div,
.section-thesis .patsays,
.section-thesis .wait {
  will-change: transform, opacity;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ============================================================
   SORABAN-STYLE PINNED SHEET WIPE: WHITE → DARK PRICE SHEET
   ============================================================ */

/* Pinned wrapper container holding both the white stage and the incoming dark curtain sheet */
/* Pinned White Stage base styling (applies across all viewport sizes and themes) */
#white-pin-stage {
  background: var(--paper, #F9F9F8);
  color: #0C1D28;
}

#white-pin-stage .sechead .eyebrow {
  color: #08557F !important;
}

#white-pin-stage .sechead h2 {
  color: #0C1D28 !important;
}

#white-pin-stage .sechead .lede {
  color: #2D4352 !important;
}

.pinned-wipe-wrapper {
  position: relative;
  width: 100%;
}

@media (min-width: 1024px) {
  .pinned-wipe-wrapper {
    overflow: hidden;
  }

  /* Pinned white stage (Why us + Testimonials) */
  #white-pin-stage {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--paper, #F9F9F8);
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  #white-pin-stage section {
    padding: 56px 0 40px;
  }

  #white-pin-stage section.tight {
    padding: 40px 0 56px;
  }

  /* White testimonial cards target */
  #white-pin-stage .quotes figure {
    will-change: transform, opacity;
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* Incoming dark curtain sheet — high-depth floating sheet directly over white section */
  #dark-price-sheet {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 32px 32px 0 0;
    background: #0E1621;
    box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.45);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    overflow: hidden;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    pointer-events: auto;
  }

  /* Internal elements for stagger upward into view */
  #price-sheet-inner .eyebrow,
  #price-sheet-inner h2,
  #price-sheet-inner p,
  #price-sheet-inner a.btn,
  #price-sheet-inner > div:last-child > div {
    will-change: transform, opacity;
    backface-visibility: hidden;
  }
}

/* Fallback for screens < 1024px or prefers-reduced-motion: clean standard native scrolling */
@media (max-width: 1023px) {
  .pinned-wipe-wrapper {
    position: static;
    overflow: visible;
  }
  #white-pin-stage {
    position: relative;
    z-index: auto;
    min-height: auto;
    display: block;
    transform: none !important;
    opacity: 1 !important;
  }
  #white-pin-stage section {
    padding: 76px 0;
  }
  #white-pin-stage section.tight {
    padding: 54px 0;
  }
  #white-pin-stage .quotes figure {
    transform: none !important;
    opacity: 1 !important;
  }
  #dark-price-sheet {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: auto !important;
    transform: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-top: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #0E1621;
  }
  #price-sheet-inner .eyebrow,
  #price-sheet-inner h2,
  #price-sheet-inner p,
  #price-sheet-inner a.btn,
  #price-sheet-inner > div:last-child > div {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ============================================================
   SORABAN-STYLE PINNED SHEET WIPE: WHITE SPLIT → DARK FOCUS SHEET
   ============================================================ */

.focus-pinned-wipe-wrapper {
  position: relative;
  width: 100%;
}

@media (min-width: 1024px) {
  .focus-pinned-wipe-wrapper {
    overflow: hidden;
  }

  /* Pinned white stage (Free help 6 items + 3 FAQs) */
  #white-help-pin-stage {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--ground);
    transform-origin: 50% 50%;
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  #white-help-pin-stage .free-help-section {
    padding: 60px 0;
  }

  /* White section content elements targets for receding animation */
  #white-help-pin-stage #free-help-split,
  #white-help-pin-stage .free-help-col-left,
  #white-help-pin-stage .free-help-col-right,
  #white-help-pin-stage #free-help-ticks li,
  #white-help-pin-stage #free-help-faqs > div {
    will-change: transform, opacity, filter;
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* Incoming dark curtain sheet — elevated high-depth rounded card sheet directly over white section */
  #dark-focus-sheet {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 32px 32px 0 0;
    background: #0E1621;
    box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.45);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    overflow: hidden;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    pointer-events: auto;
    padding: 48px 0;
  }

  #dark-focus-sheet .shell {
    width: 100%;
  }

  /* Internal elements for stagger upward into view */
  #dark-focus-sechead .eyebrow,
  #dark-focus-sechead h2,
  #dark-focus-sechead .lede,
  #dark-focus-grid .focus-card,
  .focus-callout {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
}

/* Fallback for screens < 1024px or prefers-reduced-motion: clean standard native scrolling */
@media (max-width: 1023px) {
  .focus-pinned-wipe-wrapper {
    position: static;
    overflow: visible;
  }
  #white-help-pin-stage {
    position: relative;
    z-index: auto;
    min-height: auto;
    display: block;
    background: transparent;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  #white-help-pin-stage .free-help-section {
    padding: 54px 0;
  }
  #white-help-pin-stage #free-help-split,
  #white-help-pin-stage .free-help-col-left,
  #white-help-pin-stage .free-help-col-right,
  #white-help-pin-stage #free-help-ticks li,
  #white-help-pin-stage #free-help-faqs > div {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  #dark-focus-sheet {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: auto !important;
    transform: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-top: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #0E1621;
    padding: 60px 0;
  }
  #dark-focus-sechead .eyebrow,
  #dark-focus-sechead h2,
  #dark-focus-sechead .lede,
  #dark-focus-grid .focus-card,
  .focus-callout {
    transform: none !important;
    opacity: 1 !important;
  }
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(62% 78% at 78% 36%,
    rgba(1, 159, 255, 0.22) 0%,
    rgba(1, 159, 255, 0.10) 44%,
    rgba(1, 159, 255, 0) 74%);
  pointer-events: none;
  z-index: 2;
}

.hero .in {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 74px 24px 78px;
  width: 100%;
}

.hero .in > div {
  min-width: 0;
}

.hero h1 {
  color: #FFFFFF;
}

.hero h1 em {
  font-style: normal;
  color: var(--gold);
  font-weight: 400;
}

.hero .sub {
  color: var(--night-ink-2);
  font-size: 1.06rem;
  line-height: 1.65;
  max-width: 52ch;
  margin-top: 22px;
}

.hero .acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.hero .strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--night-line);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--night-ink-2);
}

.hero .strip b {
  color: var(--gold);
  font-weight: 500;
}

/* ─── Uncle Pat 3D Stage ──────────────────────────────────────────────────── */

/*
  1. STAGE WRAPPER
  perspective + perspective-origin establish the vanishing point for all
  translateZ offsets on child layers. 1000 px gives a natural depth field
  without excessive fish-eye distortion at the layer offsets we use (0–50 px).
*/
.hero-owl,
.hero-owl-wrap,
#owl-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  perspective: 550px;
  transform-style: preserve-3d;
  perspective-origin: 50% 45%;

  /* ── Mobile gesture & highlight fixes ────────────────────────────────────
     pan-y: let vertical scroll pass through freely while touch tracking runs.
     tap-highlight: suppress the gray flash iOS shows on tapped elements.    */
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

/*
  2. ROOT SVG — preserve-3d so translateZ on child <g> elements propagates
  through the browser's compositing layer stack correctly.
*/
#hero-owl-svg {
  width: 100%;
  max-width: 220px;
  flex: none;
  transform-style: preserve-3d;
  /* Base ambient shadow for the whole character */
  filter: drop-shadow(0 22px 44px rgba(0, 0, 0, 0.50));
  overflow: visible;
}

.owlmeet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex: none;
  max-width: 186px;
}

.owlmeet .meet {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.16rem;
  line-height: 1.15;
  color: #FFFFFF;
  text-decoration: none;
  letter-spacing: -0.01em;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 5px;
  white-space: nowrap;
}

.owlmeet .meet i {
  display: inline-block;
  font-style: normal;
  color: var(--gold);
  margin-left: 5px;
  transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: arrowGlide 2s ease-in-out infinite;
}

.owlmeet .meet:hover i,
.hero-owl:hover .owlmeet .meet i {
  transform: translateX(8px);
  animation: none;
}

@keyframes arrowGlide {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
}

/* Subtle idle float for hero owl — zero transition delay to avoid fighting JS tracking */
.hero-owl svg,
.hero-owl img,
#hero-owl-svg,
#hero-owl-svg * {
  transition: none !important;
}
.hero-owl:hover svg, .hero-owl:hover img {
  transform: none;
}

/* ─── Uncle Pat Interactive SVG Layer Rigging & 3D Parallax ──────────────── */

/*
  ROOT GROUP — outermost transform anchor.
  JS will apply rotateX / rotateY / translateX / translateY here.
*/
#owl-root {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  will-change: transform;
  transition: none !important;
}

/*
  3. TRANSLATEZ DEPTH OFFSETS
  Each layer gets a static translateZ that the browser renderer compounds
  with JS-driven rotateX/rotateY on #owl-root to produce genuine parallax.
  Inline style="transform" from JS will be composed on top via
  transform-box: fill-box so the layer's own fill bbox is the pivot.
*/

/* Layer 1 — back feathers / base ambient drop shadow (deepest) */
#owl-layer-bg,
#owl-3d-shadow {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  will-change: transform;
  transform: translateZ(0px);
  transition: none !important;
}

/* Layer 2 — torso body */
#owl-layer-torso,
#owl-3d-torso {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  will-change: transform;
  transform: translateZ(5px);
  transition: none !important;
}

/* Layer 3 — collar flaps + gold tie */
#owl-layer-collar-tie,
#owl-3d-collar-tie {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  will-change: transform;
  transform: translateZ(22px);
  transition: none !important;
  /*
    Dynamic depth shadow: a tighter, crisper shadow than the ambient one
    on the SVG root. JS will nudge the x/y offset via CSS custom properties
    to simulate a key light that follows the cursor direction.
  */
  filter:
    drop-shadow(
      var(--owl-shadow-x, -3px)
      var(--owl-shadow-y, 6px)
      8px
      rgba(0, 0, 0, 0.35)
    );
}

/* Layer 4 — head plate, disc, tufts, beak */
#owl-layer-head,
#owl-3d-head {
  transform-box: fill-box;
  transform-origin: 50% 70%;
  transform-style: preserve-3d;
  will-change: transform;
  transform: translateZ(42px);
  transition: none !important;
  /*
    Slightly stronger shadow on the head — it sits highest in 3D space
    and should cast the most visible depth shadow.
  */
  filter:
    drop-shadow(
      var(--owl-shadow-x, -3px)
      var(--owl-shadow-y, 6px)
      12px
      rgba(0, 0, 0, 0.40)
    );
}

/* Layer 5 — sclera, irises, pupils (closest to viewer) */
#owl-layer-eyes,
#owl-3d-eyes {
  transform-box: fill-box;
  transform-origin: 50% 60%;
  transform-style: preserve-3d;
  will-change: transform;
  transform: translateZ(58px);
  transition: none !important;
}

/* Pupils — sub-layer inside eyes, only translate for tracking */
#owl-pupil-left,
#owl-pupil-right {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  will-change: transform;
  transition: none !important;
}

/* ─── Specular / Key-Light Overlay ───────────────────────────────────────── */
/*
  #owl-specular is an SVG <radialGradient>-backed <ellipse> placed at the top
  of #owl-root. JS shifts its cx/cy opposite the cursor to simulate a
  hemisphere key light rotating around Uncle Pat.
  The element itself is pointer-events: none so it never interferes with
  the mousemove bounding rect used for tracking.
*/
#owl-specular {
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.18;
  transition: opacity 0.3s ease;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

/* Increase specular intensity slightly when the pointer is inside the owl */
#owl-container:hover #owl-specular {
  opacity: 0.26;
}

/* ─── Legacy selectors — kept for backwards compat ───────────────────────── */
#owl-head,
#owl-torso,
#owl-pupils {
  transform-box: fill-box;
  transform-style: preserve-3d;
  will-change: transform;
  transition: none;
}

/* Touch / coarse-pointer: gentle breathing shown until JS orientation tracking kicks in.
   JS suppresses this by setting owlSvg.style.animation = 'none' once gyro/touch is active. */
@media (pointer: coarse) {
  #hero-owl-svg {
    animation: owlMobileBreathe 4s ease-in-out infinite;
  }
}

@keyframes owlMobileBreathe {
  0%, 100% { transform: translateY(0);      }
  50%       { transform: translateY(-2px);   }
}

/* ─── Responsive 3D Perspective — Mobile (≤ 768 px) ───────────────────────── */
/*
  On narrow viewports:
    • Reduce perspective to 650 px — punchy 3D parallax without overflow.
    • Anchor transform-origin to 50% 50% so rotateY/rotateX pivot at the
      visual centre of the owl, not a corner that would shift it off-screen.
    • Set overflow-x: hidden on body and .hero so any residual sub-pixel
      horizontal shift from 3D transforms never creates a scrollbar or
      causes side-scroll jank on iOS Safari.
*/
@media (max-width: 768px) {
  /* Keep perspective at 550px on the owl wrapper */
  .hero-owl,
  .hero-owl-wrap,
  #owl-container {
    perspective: 550px;
    perspective-origin: 50% 45%;
    transform-style: preserve-3d;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
  }

  /* SVG pivot must stay centred so rotateX/rotateY don't shift the owl sideways */
  #hero-owl-svg,
  #owl-root,
  .hero-owl,
  .hero-owl-wrap {
    transform-origin: center center;
  }

  /* Prevent micro-rotation pixel fringe from creating horizontal scrollbars */
  body,
  .hero,
  section.night {
    overflow-x: hidden;
  }

  /* ── Very narrow phones (≤ 420 px) ───────────────────────────────────────
     Ensure transform-origin remains anchored at center so 3D rotation
     does not cause horizontal overflow or side-scrolling.                 */
  @media (max-width: 420px) {
    #hero-owl-svg,
    #owl-root,
    .hero-owl,
    .hero-owl-wrap {
      transform-origin: center center;
    }
  }
}

/* ─── Reduced-Motion Fallback ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #hero-owl-svg,
  #owl-root,
  #owl-3d-shadow,
  #owl-3d-torso,
  #owl-3d-collar-tie,
  #owl-3d-head,
  #owl-3d-eyes,
  #owl-layer-bg,
  #owl-layer-torso,
  #owl-layer-collar-tie,
  #owl-layer-head,
  #owl-layer-eyes,
  #owl-head,
  #owl-torso,
  #owl-pupils,
  #owl-pupil-left,
  #owl-pupil-right,
  #owl-eyelid-left,
  #owl-eyelid-right,
  #owl-specular,
  .hero-owl svg,
  .hero-owl img {
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
    filter: none !important;
    animation: none !important;
  }
}

/* ---------- Thesis: Pat vs. Sam ---------- */
.versus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--night-line);
  border: 1px solid var(--night-line);
  margin-top: 32px;
}

.versus > div {
  background: var(--night-2);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.versus > div.pat {
  background: rgba(1, 159, 255, 0.15);
}

.versus .who {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--night-ink-2);
}

.versus .pat .who {
  color: var(--gold);
}

.versus h3 {
  font-size: 1.5rem;
  font-weight: 400;
  color: #FFFFFF;
}

.versus p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--night-ink-2);
}

.versus .job {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  padding-top: 12px;
  border-top: 1px solid var(--night-line);
  margin-top: auto;
}

.wait {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  border-top: 1px solid var(--night-line);
  margin-top: 28px;
  padding-top: 24px;
}

.wait p {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 1.42rem;
  line-height: 1.25;
  color: #FFFFFF;
  max-width: 36ch;
}

/* ---------- 12-Month Timeline / Calendar (Interactive Fintech Timeline) ---------- */
.cal-progress-track {
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(1, 159, 255, 0.12);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 24px;
  z-index: 5;
}

.cal-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #019FFF 0%, #0076C6 100%);
  transform-origin: 0% 50%;
  transform: scaleX(0);
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(1, 159, 255, 0.6);
  will-change: transform;
}

.cal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  background: transparent;
  border: none;
  position: relative;
}

.cal-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(14, 22, 33, 0.04);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease;
  will-change: transform, opacity, box-shadow;
  transform-style: preserve-3d;
}

/* Tactile Hover Physics */
.cal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px -8px rgba(1, 159, 255, 0.2), 0 4px 16px rgba(14, 22, 33, 0.06);
  border-color: rgba(1, 159, 255, 0.45);
}

.cal-card.is-active {
  opacity: 1 !important;
  border-color: rgba(1, 159, 255, 0.35);
  box-shadow: 0 12px 30px -6px rgba(1, 159, 255, 0.16), 0 2px 8px rgba(14, 22, 33, 0.04);
}

.cal-card .mo {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 600;
  padding: 4px 10px;
  background: rgba(1, 159, 255, 0.08);
  border-radius: 6px;
  align-self: flex-start;
  transform-origin: 0% 50%;
  will-change: transform;
}

.cal-card.peak .mo {
  background: rgba(234, 228, 47, 0.18);
  color: var(--gold-dp);
}

.cal-card.peak {
  background: var(--surface);
}

.cal h3 {
  font-size: 1.14rem;
  color: var(--ink);
  margin: 0;
}

.cal .say {
  font-size: 0.86rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}

.cal-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
  margin-top: auto;
}

.cal-card li {
  font-size: 0.82rem;
  color: var(--ink-2);
  line-height: 1.45;
  padding-left: 14px;
  position: relative;
  will-change: transform, opacity;
}

.cal-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 2px;
  border-radius: 1px;
  background: var(--blue);
}

.year-callout {
  position: relative;
  margin-top: 24px;
  padding: 20px 28px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 10px;
  transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
  will-change: transform, opacity, box-shadow;
}

.year-callout.is-revealed {
  box-shadow: 0 8px 30px rgba(1, 159, 255, 0.14);
  border-color: rgba(1, 159, 255, 0.4);
  border-left-color: var(--brand);
}

.year-callout .h {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 600;
  margin-bottom: 6px;
}

.year-callout p {
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.6;
}

.night .cal.night-cal {
  background: var(--night-line);
  border-color: var(--night-line);
}

.night .cal.night-cal > div {
  background: var(--night-2);
}

.night .cal.night-cal h3 {
  color: #FFFFFF;
}

.night .cal.night-cal .mo {
  color: var(--gold);
}

.night .cal.night-cal .say {
  color: var(--night-ink-2);
}

.night .cal.night-cal ul {
  border-top-color: var(--night-line);
}

.night .cal.night-cal li {
  color: var(--night-ink-2);
}

.night .cal.night-cal li::before {
  background: var(--gold);
}

/* ---------- Packages ---------- */
.pkgs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.pkgs.biz {
  grid-template-columns: repeat(2, 1fr);
}

.pkg {
  background: var(--surface);
  padding: 26px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  /* Hover micro-physics */
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.35s ease,
    border-color 0.25s ease;
  will-change: transform, box-shadow, opacity;
  border: 1px solid transparent;
  box-sizing: border-box;
  margin: -1px;  /* absorb the gap border on hover */
  z-index: 1;
}

/* Hover state — lift with ambient double shadow */
.pkg:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 40px -15px rgba(14, 22, 33, 0.12),
    0 0 0 1px #019FFF;
  z-index: 10;
  background: var(--surface);
}

/* Sibling dimming when any card in the grid is hovered */
.pkgs:hover .pkg:not(:hover),
.pkgs.biz:hover .pkg:not(:hover) {
  opacity: 0.72;
}

/* Active button on hovered card */
.pkg:hover .btn-o {
  background: #019FFF;
  color: #ffffff;
  border-color: #019FFF;
}

/* Premium / flag card base state */
.pkg.flag {
  background: var(--surface-2);
}

/* Badge pop prep (GSAP will animate from scale:0.8) */
.pkg .badge {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #1A1A05;
  background: var(--gold);
  padding: 3px 7px;
  border-radius: 2px;
  transform-origin: center center;
  will-change: transform;
}

.pkg .nm {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.14rem;
  letter-spacing: -0.01em;
}

.pkg .for {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.5;
  min-height: 2.2em;
}

.pkg .fig {
  font-family: var(--f-mono);
  font-size: 2rem;
  font-weight: 500;
  color: var(--blue-dk);
  letter-spacing: -0.02em;
  margin: 8px 0 2px;
  font-variant-numeric: tabular-nums;
}

.pkg .fig sup {
  font-size: 0.9rem;
  vertical-align: 0.75em;
  font-weight: 400;
}

.pkg ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.pkg li {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-2);
  padding-left: 14px;
  position: relative;
}

.pkg li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 1.5px;
  background: var(--blue);
}

.pkg li.no {
  color: var(--ink-3);
}

.pkg li.no::before {
  background: var(--ink-3);
  opacity: 0.5;
}

.pkg .btn {
  margin-top: 18px;
  justify-content: center;
}

/* ---------- Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.steps.s3 {
  grid-template-columns: repeat(3, 1fr);
}

.steps > div {
  background: var(--surface);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.steps .k {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 1.9rem;
  color: var(--blue);
  line-height: 0.9;
}

.steps h3 {
  font-size: 0.98rem;
  color: var(--ink);
}

.steps p {
  font-size: 0.82rem;
  color: var(--ink-2);
  line-height: 1.5;
}

/* ---------- Testimonials ---------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.quotes figure {
  margin: 0;
  padding: 24px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.quotes blockquote {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--ink);
}

.quotes figcaption {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: auto;
}

/* ---------- 50-State Grid ---------- */
.states {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--night-line);
  border: 1px solid var(--night-line);
}

.states span {
  background: var(--night-2);
  padding: 10px 4px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--night-ink-2);
  transform-origin: center center;
  will-change: transform, opacity;
  border: 1px solid transparent;
  position: relative;
  z-index: 1;
  cursor: default;
}

/* State grid hover — active tile lifts, siblings dim */
.states:hover span:not(:hover) {
  opacity: 0.45;
  transition: opacity 0.2s ease;
}

.states span:hover {
  transform: scale(1.18);
  z-index: 10;
  background: rgba(1, 159, 255, 0.18) !important;
  border-color: rgba(1, 159, 255, 0.6) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  box-shadow: 0 0 18px rgba(1, 159, 255, 0.5);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.states span.home {
  background: rgba(234, 228, 47, 0.16);
  color: var(--gold);
  font-weight: 600;
  border-color: rgba(234, 228, 47, 0.45);
  box-shadow: 0 0 16px rgba(234, 228, 47, 0.4);
}

.states span.home:hover {
  background: rgba(234, 228, 47, 0.22) !important;
  box-shadow: 0 0 24px rgba(234, 228, 47, 0.65) !important;
  border-color: #EAE42F !important;
  color: #EAE42F !important;
}

.states span:empty {
  background: var(--night-2);
}

.states span:empty::before {
  content: '\00a0';
}

/* ---------- FAQ ---------- */
.faq {
  display: flex;
  flex-direction: column;
}

.faq > div {
  padding: 18px 0;
  border-bottom: 1px solid var(--line-2);
}

.faq > div:first-child {
  border-top: 1px solid var(--line-2);
}

.faq dt {
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--ink);
}

.faq dd {
  margin: 6px 0 0;
  font-size: 0.89rem;
  color: var(--ink-2);
  line-height: 1.6;
}

/* ---------- Date List & Reference Figures ---------- */
.dates {
  display: flex;
  flex-direction: column;
}

.dates .d {
  display: grid;
  grid-template-columns: 9rem 1fr 8.5rem;
  gap: 22px;
  padding: 16px 0 16px 14px;
  border-top: 1px solid var(--night-line);
  align-items: baseline;
  border-left: 3px solid transparent;
}

.dates .d:last-child {
  border-bottom: 1px solid var(--night-line);
}

.dates .d.soon {
  border-left-color: var(--gold);
  background: rgba(234, 228, 47, 0.06);
}

.dates .dt {
  font-family: var(--f-mono);
  font-size: 0.84rem;
  color: var(--night-ink);
  white-space: nowrap;
}

.dates .d.soon .dt {
  color: var(--gold);
}

.dates .dt i {
  display: block;
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--night-ink-2);
  margin-top: 4px;
}

.dates h3 {
  font-size: 1rem;
}

.dates .dw p {
  font-size: 0.85rem;
  color: var(--night-ink-2);
  line-height: 1.5;
  margin-top: 4px;
}

.dates .who {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--night-ink-2);
  text-align: right;
  line-height: 1.6;
}

.figcols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
}

.figs {
  width: 100%;
  border-collapse: collapse;
}

.figs caption {
  text-align: left;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--blue);
  padding: 26px 0 8px;
  font-weight: 500;
  border-bottom: 2px solid var(--ink);
}

.figs tr {
  border-bottom: 1px solid var(--line-2);
}

.figs th {
  text-align: left;
  font-weight: 400;
  font-size: 0.86rem;
  color: var(--ink-2);
  padding: 11px 16px 11px 0;
  line-height: 1.45;
}

.figs th small {
  display: block;
  font-size: 0.72rem;
  color: var(--ink-3);
  margin-top: 2px;
}

.figs td {
  text-align: right;
  padding: 11px 0;
  white-space: nowrap;
  vertical-align: top;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--blue-dk);
}

.figs td small {
  display: block;
  font-family: var(--f-body);
  font-size: 0.68rem;
  color: var(--ink-3);
  font-weight: 300;
  margin-top: 2px;
  white-space: normal;
}

/* ---------- File Cards (Standing File Format) ---------- */
.filecards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.filecard {
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

.filecard .fh {
  background: var(--ink);
  color: #FFFFFF;
  padding: 14px 20px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.filecard .fh span {
  font-family: var(--f-mono);
  font-size: 0.63rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--gold);
}

.filecard .fh b {
  font-family: var(--f-display);
  font-size: 1.14rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.filecard .fb {
  padding: 22px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filecard .fb > p {
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.55;
}

.filecard.dark-fc {
  background: var(--night-2);
  border-color: var(--night-line);
}

.filecard.dark-fc .fh {
  background: rgba(0, 0, 0, 0.3);
}

.filecard.dark-fc .fb > p {
  color: var(--night-ink-2);
}

/* ---------- Interactive Triage Widget ---------- */
.triage-widget {
  background: var(--night-2);
  border: 1px solid var(--night-line);
  padding: 32px;
  border-radius: var(--r-md);
  margin-top: 24px;
}

.triage-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.triage-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.triage-opt {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--night-line);
  padding: 16px;
  border-radius: var(--r);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-fast);
  color: var(--night-ink);
}

.triage-opt:hover, .triage-opt.selected {
  background: rgba(1, 159, 255, 0.15);
  border-color: var(--brand);
}

.triage-opt h4 {
  color: #FFFFFF;
  font-size: 0.98rem;
  margin-bottom: 4px;
}

.triage-opt p {
  font-size: 0.8rem;
  color: var(--night-ink-2);
}

.triage-result {
  margin-top: 20px;
  padding: 20px;
  background: rgba(1, 159, 255, 0.1);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r) var(--r) 0;
}

/* ---------- S-Corp Interactive Calculator ---------- */
.calc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 32px;
  border-radius: var(--r-md);
  box-shadow: 0 4px 16px rgba(12, 29, 40, 0.04);
}

.calc-slider-wrap {
  margin: 20px 0;
}

.calc-slider {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--line);
  outline: none;
  cursor: pointer;
}

.calc-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line-2);
}

.calc-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calc-metric .lbl {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.calc-metric .val {
  font-family: var(--f-mono);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--blue-dk);
}

.calc-metric .val.savings {
  color: var(--ok);
}

/* ---------- Problem Cards / Diagnostic Matrix (Soraban-Style) ---------- */
.section-probs {
  position: relative;
  z-index: 2;
  background: var(--ground);
}

.probs.diagnostic-grid,
.probs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 20px rgba(14, 22, 33, 0.03);
  --mouse-x: -1000px;
  --mouse-y: -1000px;
}

/* Spotlight Cursor Border Glow: radial gradient shined across the 1px grid seams */
.probs.diagnostic-grid::before,
.probs::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: radial-gradient(
    380px circle at var(--mouse-x, -500px) var(--mouse-y, -500px),
    rgba(1, 159, 255, 0.45) 0%,
    rgba(1, 159, 255, 0.15) 35%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.probs.diagnostic-grid:hover::before,
.probs:hover::before {
  opacity: 1;
}

.prob {
  position: relative;
  background: var(--surface);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 2;
  border: 1px solid transparent;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease,
              background-color 0.25s ease;
  will-change: transform, box-shadow, opacity;
  transform-style: preserve-3d;
}

/* Subtle local surface illumination inside each card */
.prob::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    300px circle at var(--card-mouse-x, -500px) var(--card-mouse-y, -500px),
    rgba(1, 159, 255, 0.04) 0%,
    transparent 70%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.prob:hover::before {
  opacity: 1;
}

.prob > * {
  position: relative;
  z-index: 1;
}

.prob h3 {
  font-size: 1.14rem;
  color: var(--blue-dk);
  font-weight: 600;
  margin: 0;
  line-height: 1.35;
  transition: color 0.25s ease;
}

.prob:hover h3 {
  color: var(--blue);
}

.prob p {
  font-size: 0.87rem;
  color: var(--ink-2);
  line-height: 1.56;
  flex: 1;
  margin: 0;
}

/* Card Hover Micro-Interaction */
.prob:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px -8px rgba(1, 159, 255, 0.18), 0 4px 16px rgba(14, 22, 33, 0.04);
  border-color: #019FFF;
  z-index: 3;
}

/* CTA Links with Underline Sweep & Arrow Micro-Interaction */
.prob a {
  position: relative;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-top: 12px;
  padding-bottom: 2px;
  margin-top: auto;
  border-top: 1px solid var(--line-2);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  transition: color 0.25s ease;
}

.prob a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.prob:hover a,
.prob a:hover {
  color: var(--blue);
}

.prob:hover a::after,
.prob a:hover::after {
  transform: scaleX(1);
}

.prob a i {
  display: inline-block;
  font-style: normal;
  color: var(--gold-dp);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}

.prob:hover a i,
.prob a:hover i {
  transform: translateX(4px);
  color: var(--blue);
}

/* ---------- Audiences Pinned Wrapper (Services + Sheet Stack) ---------- */
.audiences-pinned-wrapper {
  position: relative;
  width: 100%;
  /* Height is auto on mobile, set by JS pin on desktop */
}

/* ---------- Audiences Sheet: White rounded overlay ---------- */
.section-audiences-sheet {
  position: relative;
  z-index: 20;
  width: 100%;
  background: var(--ground);
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.35);
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Remove tight's default margin-top if any */
  margin-top: 0 !important;
}

/* ---------- Pinned Services Stage & Multi-Stage Choreography ---------- */
.services-pinned-stage {
  position: relative;
  z-index: 10;
  background: var(--night, #0A1622);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -20px 48px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  height: 100vh;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 88px;
  padding-bottom: 30px;
  box-sizing: border-box;
  perspective: 1200px;
  transform-style: preserve-3d;
  will-change: transform, border-radius;
}

/* Background Lens / Dial Layer with 3D Depth */
.stage-lens-bg {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  background-image: var(--img, url('../Pics/AdobeStock_480131145.jpeg'));
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  opacity: 0.8;
  transform: scale(1);
  transform-origin: 50% 40%;
  transform-style: preserve-3d;
  filter: saturate(0.85) brightness(0.7);
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity;
}

/* Dark gradient overlays over the lens graphic */
.stage-lens-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 40%,
    rgba(10, 22, 34, 0.4) 0%,
    rgba(10, 22, 34, 0.82) 60%,
    rgba(10, 22, 34, 0.98) 100%
  );
}

/* Soft Ambient Radial Back-Glow */
.stage-ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 800px;
  height: 480px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(1, 159, 255, 0.24) 0%,
    rgba(0, 118, 198, 0.12) 45%,
    transparent 70%
  );
  filter: blur(50px);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  will-change: opacity, transform;
}

/* Phase 1: Intro Layer (Section A) - Centered in viewport */
.stage-intro-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 900px;
  padding: 0 24px;
  text-align: center;
  z-index: 4;
  pointer-events: none;
  will-change: transform, opacity, filter;
}

.stage-intro-inner {
  max-width: 900px;
  margin: 0 auto;
}

.stage-intro-inner .eyebrow-mono {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}

.stage-intro-heading {
  color: #FFFFFF;
  margin: 0;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 600;
  line-height: 1.25;
}

/* Phase 2: Core Services Stage (Section B) - Starts cleanly below navbar */
.stage-services-layer {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: var(--shell-max, 1200px);
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  will-change: transform, opacity;
}

.stage-services-layer .shell {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.stage-services-layer .sechead {
  margin-bottom: 22px;
  text-align: left;
}

.stage-services-layer .sechead .eyebrow.night {
  margin-bottom: 8px;
  display: inline-block;
}

.stage-services-layer .sechead h2 {
  color: #FFFFFF;
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  line-height: 1.22;
}

.stage-services-layer .sechead .lede {
  color: var(--night-ink-2);
  max-width: 620px;
  font-size: 0.85rem;
  line-height: 1.48;
  margin: 0;
}

/* Equalizer Board: 5-Column Grid */
.svcs.equalizer-grid,
.svcs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  background: transparent;
  border: none;
  position: relative;
}

/* Sibling Drop in Brightness on Hover */
.svcs.equalizer-grid:hover .svc,
.svcs:hover .svc {
  opacity: 0.55;
  transform: scale(0.99);
}

/* Individual Service Equalizer Card */
.svcs .svc {
  position: relative;
  background: rgba(14, 28, 42, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              opacity 0.35s ease;
  will-change: transform, opacity, box-shadow;
  transform-origin: 50% 100%;
}

/* Top Glowing Beam Animation Sweep */
.svcs .svc::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #019FFF 50%, #EAE42F 80%, transparent);
  transition: opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.svcs .svc.beam-active::before,
.svcs .svc:hover::before {
  opacity: 1;
  animation: beamSweep 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes beamSweep {
  0% { transform: translateX(0); }
  100% { transform: translateX(200%); }
}

/* Kinetic Hover Physics: Active Card Expands */
.svcs .svc:hover {
  opacity: 1 !important;
  transform: translateY(-8px) scale(1.02) !important;
  z-index: 10;
  border-color: #019FFF;
  box-shadow: 0 20px 50px -15px rgba(1, 159, 255, 0.35), 0 0 25px rgba(1, 159, 255, 0.15);
  background: rgba(18, 36, 56, 0.96);
}

.svcs .svc .k {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

.svcs .svc h3 {
  font-size: 1.05rem;
  color: #FFFFFF;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  transition: color 0.25s ease;
}

.svcs .svc:hover h3 {
  color: #019FFF;
}

.svcs .svc p {
  font-size: 0.79rem;
  color: var(--night-ink-2);
  line-height: 1.48;
  flex: 1;
  margin: 0;
}

.svcs .svc a {
  font-family: var(--f-body);
  font-size: 0.76rem;
  font-weight: 500;
  color: #FFFFFF;
  text-decoration: none;
  padding-top: 10px;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 0.25s ease;
}

.svcs .svc a i {
  display: inline-block;
  font-style: normal;
  color: var(--gold);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}

.svcs .svc:hover a {
  color: #019FFF;
}

.svcs .svc:hover a i {
  transform: translateX(6px);
  color: var(--gold);
}

/* ---------- Audience Journeys ---------- */
.auds {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.aud {
  background: var(--surface);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.aud .k {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}

.aud h3 {
  font-size: 1.06rem;
  font-weight: 600;
  margin: 0;
}

.aud ul {
  list-style: none;
  margin: 4px 0 0;
  padding: 11px 0 0;
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.aud li {
  font-size: 0.79rem;
  color: var(--ink-2);
  line-height: 1.45;
  padding-left: 13px;
  position: relative;
}

.aud li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 1.5px;
  background: var(--blue);
}

.aud.flag {
  background: var(--surface-2);
}

.aud.flag .k {
  color: var(--gold-dp);
}

/* ---------- Audience Card Hover Physics ---------- */
.aud {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease;
  border: 1px solid transparent;
  will-change: transform, box-shadow;
}

.aud:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px -10px rgba(14, 22, 33, 0.12);
  border-color: #019FFF;
  z-index: 2;
}

.aud:hover .k {
  color: #019FFF;
}

/* ---------- FAQ ---------- */
dl.faq {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

dl.faq dt {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 4px;
}

dl.faq dd {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-2);
  line-height: 1.55;
}

/* Responsive Media Queries */
@media (max-width: 980px) {
  .hero .in {
    grid-template-columns: 1fr;
    padding: 52px 24px 56px;
  }
  .hero-owl {
    justify-content: flex-start;
  }
  .hero-owl svg, .hero-owl img {
    max-width: 190px;
  }
  .versus {
    grid-template-columns: 1fr;
  }
  .cal, .pkgs, .pkgs.biz {
    grid-template-columns: repeat(2, 1fr);
  }
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .probs.diagnostic-grid,
  .probs,
  .svcs.equalizer-grid,
  .svcs,
  .auds {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .quotes {
    grid-template-columns: 1fr;
  }
  .states {
    grid-template-columns: repeat(4, 1fr);
  }
  .figcols {
    grid-template-columns: 1fr;
  }
  .filecards {
    grid-template-columns: 1fr;
  }
  .calc-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .probs.diagnostic-grid,
  .probs,
  .svcs.equalizer-grid,
  .svcs,
  .auds,
  .cal,
  .pkgs,
  .pkgs.biz,
  .steps,
  .steps.s3 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .probs.diagnostic-grid,
  .probs {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  .prob {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    padding: 22px 20px !important;
    box-shadow: 0 2px 10px rgba(14, 22, 33, 0.04) !important;
  }
  .auds {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  .aud {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    padding: 22px 20px !important;
    box-shadow: 0 2px 10px rgba(14, 22, 33, 0.04) !important;
  }
  .aud.flag {
    background: var(--surface-2) !important;
  }
  .cal {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  .cal-card {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(14, 22, 33, 0.04) !important;
  }
}

@media (max-width: 620px) {
  .hero-owl {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .cal, .pkgs, .pkgs.biz, .steps, .steps.s3, .probs.diagnostic-grid, .probs, .svcs.equalizer-grid, .svcs, .auds {
    grid-template-columns: 1fr !important;
  }
  .states {
    grid-template-columns: repeat(3, 1fr);
  }
  .dates .d {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .dates .who {
    text-align: left;
  }
}

/* Pinned Hero Transition Fallback for Mobile & Reduced Motion */
@media (max-width: 768px) {
  .scroll-pin-wrapper {
    overflow: visible !important;
  }
  .hero {
    height: auto !important;
    min-height: auto !important;
    display: block !important;
    padding: 16px 0 32px !important;
    overflow: visible !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .hero-dim-overlay {
    display: none !important;
  }
  .hero .shell.in > div:first-child {
    transform: none !important;
    opacity: 1 !important;
  }
  .hero .in {
    grid-template-columns: 1fr !important;
    padding: 20px 20px 32px !important;
    gap: 32px !important;
  }
  .hero h1 {
    font-size: clamp(2rem, 6.8vw, 2.6rem);
    line-height: 1.15;
    margin-top: 14px;
  }
  .hero .sub {
    font-size: 0.96rem;
    line-height: 1.55;
    margin-top: 14px;
  }
  .hero .acts {
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
    width: 100%;
  }
  .hero .acts .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .hero .strip {
    flex-direction: column;
    gap: 8px;
    margin-top: 22px;
    padding-top: 16px;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
  }
  .hero-owl {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 10px;
    transform: none !important;
    opacity: 1 !important;
  }
  .hero-owl svg,
  .hero-owl img {
    max-width: 190px !important;
    height: auto !important;
  }
  .owlmeet {
    margin-top: 12px;
  }
  .section-thesis {
    height: auto !important;
    min-height: auto !important;
    display: block !important;
    padding: 48px 0 54px !important;
    margin-top: 0 !important;
    border-radius: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--night) !important;
    transform: none !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
  .section-thesis::before {
    display: none !important;
  }
  .section-thesis .sechead .eyebrow,
  .section-thesis .sechead h2,
  .section-thesis .sechead .lede,
  .section-thesis .versus,
  .section-thesis .versus > div,
  .section-thesis .patsays,
  .section-thesis .wait {
    transform: none !important;
    opacity: 1 !important;
  }
  .section-thesis .sechead h2 {
    font-size: clamp(1.6rem, 5.5vw, 2.1rem);
    line-height: 1.2;
  }
  .section-thesis .versus {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
  }
  .section-thesis .patsays {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 18px;
    margin-top: 22px;
  }
  .section-thesis .patsays img,
  .section-thesis .patsays svg {
    margin: 0 auto;
  }
  .section-thesis .patsays q {
    font-size: 1.08rem;
    line-height: 1.45;
  }
  .section-thesis .wait {
    margin-top: 24px;
  }
  .section-thesis .wait div {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .section-thesis .wait .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .cal-progress-track {
    display: none !important;
  }
  .section-audiences-sheet {
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 44px 0 !important;
    background: var(--ground) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero,
  .section-thesis {
    min-height: auto !important;
    transform: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
  }
  .hero-dim-overlay,
  .section-thesis::before {
    display: none !important;
  }
}

/* ============================================================
   SORABAN ASYMMETRICAL PINNED SPLIT & CARD-SHEET REVEAL
   ============================================================ */

/* Desktop & Laptop Choreography (>= 768px) */
@media (min-width: 768px) {
  .img-split {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    background: var(--night);
    z-index: 2;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .img-split .img-col {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: 1;
  }

  /* Inner Photo Frame with subtle luminous inner border/hairline */
  .img-split .img-frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  }

  .img-split .img-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    background: linear-gradient(to right, rgba(10, 28, 40, 0.15) 0%, rgba(10, 28, 40, 0) 100%);
    pointer-events: none;
    z-index: 2;
  }

  .img-split .img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform-origin: 50% 50%;
    will-change: transform;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: none !important; /* Prevents CSS transition conflict with GSAP scrub */
  }

  /* Right-hand Content Column */
  .img-split .text-col {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(64px, 7vw, 100px) clamp(36px, 5vw, 84px);
    background: var(--night);
    z-index: 2;
    will-change: transform, opacity;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* Incoming Elevated White Card Sheet */
  .section-year {
    position: relative;
    z-index: 10;
    background: var(--ground) !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(70px, 9vh, 120px) 0;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.35);
    margin-top: 0;
    will-change: transform;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .section-year .sechead .eyebrow,
  .section-year .sechead h2,
  .section-year .sechead .lede {
    will-change: transform, opacity;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* Ensure all content following the split section stacks cleanly on top */
  .section-year ~ section,
  .section-year ~ div,
  .section-year ~ footer {
    position: relative;
    z-index: 10;
    background: var(--ground);
  }
}

/* Soft Backdrop Dimming Overlay */
.split-dim-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(10, 22, 33, 0.5) 0%, rgba(4, 10, 15, 0.88) 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  will-change: opacity;
}

/* Yellow CTA Micro-Interactions */
.img-split .btn-g {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow;
}

.img-split .btn-g:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(234, 228, 47, 0.25);
}

.img-split .btn-g:active {
  transform: translateY(-1px) scale(0.98);
}

/* Responsive & Reduced-Motion Fallbacks */
@media (max-width: 767px) {
  .img-split {
    min-height: auto;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    transform: none !important;
    opacity: 1 !important;
  }

  .img-split .img-col {
    min-height: 320px;
    height: 380px;
  }

  .img-split .img-frame {
    height: 100%;
  }

  .img-split .img-frame img {
    height: 100%;
    transform: none !important;
  }

  .img-split .text-col {
    padding: 44px 28px;
    transform: none !important;
    opacity: 1 !important;
  }

  .section-year {
    border-radius: 0;
    box-shadow: none;
    background: var(--ground) !important;
    transform: none !important;
  }

  .split-dim-overlay {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .img-split,
  .img-split .img-frame img,
  .img-split .text-col,
  .section-year,
  .section-year .sechead .eyebrow,
  .section-year .sechead h2,
  .section-year .sechead .lede {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }

  .split-dim-overlay {
    display: none !important;
  }
}

/* Responsive adjustments for Pinned Services Stage */
@media (max-width: 1023px) {
  .services-pinned-stage {
    min-height: auto;
    height: auto;
    padding: 0;
    display: block;
    transform: none !important;
  }
  .stage-lens-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none !important;
    opacity: 0.35 !important;
  }
  .stage-intro-layer {
    position: relative;
    inset: auto;
    padding: 64px 24px 44px;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  .stage-services-layer {
    position: relative;
    padding: 20px 0 80px;
    transform: none !important;
    opacity: 1 !important;
  }
  .svcs.equalizer-grid,
  .svcs {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .svcs.equalizer-grid,
  .svcs {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-pinned-stage,
  .stage-lens-bg,
  .stage-intro-layer,
  .stage-services-layer,
  .svcs .svc {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
  }
  .svcs .svc::before {
    display: none !important;
  }
}

/* ============================================================
   SORABAN-STYLE FIXED-UNDERLAY CURTAIN REVEAL FOOTER
   ============================================================ */

:root {
  --footer-height: 420px;
}

/* Interactive Link Physics (Global) */
footer li a,
footer .cols a {
  display: inline-flex;
  align-items: center;
  color: var(--night-ink-2, rgba(255, 255, 255, 0.65));
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, color;
}

footer li a:hover,
footer .cols a:hover {
  color: #FFFFFF !important;
  transform: translateX(4px);
}

footer .fine a {
  color: #8B98A5;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

footer .fine a:hover {
  color: var(--gold, #EAE42F) !important;
}

@media (min-width: 768px) {
  /* Prevent horizontal scroll without breaking layout */
  body {
    overflow-x: hidden;
  }

  /* Main page body directly preceding the footer: elevated z-index, rounded bottom lip, and deep drop-shadow */
  main,
  #main {
    position: relative !important;
    z-index: 2 !important;
    background: var(--ground, #F5F8FB);
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
  }

  /* Homepage dark bottom lip matching the dark focus sheet */
  body:has(#dark-focus-sheet) main,
  body:has(#dark-focus-sheet) #main {
    background: var(--night, #0E1621) !important;
  }

  /* Pinned / Fixed Footer Underlay */
  footer,
  #site-footer {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    z-index: 10 !important;
    height: auto !important;
    background: #070C12 !important;
    pointer-events: auto !important;
    display: block !important;
    clear: both !important;
  }

  /* Footer choreography hardware acceleration */
  .footer-brand-col,
  .footer-nav-col,
  .footer-hairline,
  .footer-legal {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
}

/* Mobile Fallback (< 768px): clean standard native document scroll */
@media (max-width: 767px) {
  main,
  #main {
    position: static !important;
    z-index: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
  }

  footer,
  #site-footer {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    z-index: auto !important;
  }

  .footer-brand-col,
  .footer-nav-col,
  .footer-legal {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ============================================================
   FILE-TAXES: SORABAN PINNED HERO, FROSTED DOCK & DOCUMENT PARALLAX
   ============================================================ */

/* 1. Dark Hero Section */
.tax-hero-section {
  position: relative;
  background: var(--night, #0E1621);
  overflow: visible;
  z-index: 5;
}

.tax-hero-content {
  will-change: transform, opacity;
  transform-origin: center top;
}

/* 2. Overlapping Callout Banner / Dock Zone */
.tax-quickprepare-dock-section {
  position: relative;
  z-index: 10;
  width: 100%;
}

/* Frosted Card Elevation matching Soraban */
.tax-frosted-card {
  position: relative;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(1, 159, 255, 0.2) !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 60px -20px rgba(14, 22, 33, 0.2) !important;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.tax-frosted-card:hover {
  border-color: rgba(1, 159, 255, 0.38) !important;
  box-shadow: 0 28px 70px -18px rgba(14, 22, 33, 0.26), 0 0 24px rgba(1, 159, 255, 0.12) !important;
}

/* Explicit text contrast overrides inside the frosted card (preventing .night white text inheritance) */
.tax-frosted-card {
  color: #0E1621 !important;
}

.tax-frosted-card h3 {
  color: #0E1621 !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  margin: 6px 0 0 0 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em;
}

.tax-frosted-card p {
  color: #394A59 !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  margin: 8px 0 0 0 !important;
  max-width: 58ch;
}

.tax-frosted-card .eyebrow {
  color: var(--blue, #019FFF) !important;
  font-weight: 600 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  display: block;
}

/* CTA & Micro-Interactions */
.tax-quickprepare-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer;
  will-change: transform, box-shadow;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.2s ease !important;
}

.tax-quickprepare-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px -6px rgba(1, 159, 255, 0.4) !important;
}

.tax-cta-arrow {
  display: inline-block;
  will-change: transform;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.tax-quickprepare-btn:hover .tax-cta-arrow {
  transform: translateX(4px) !important;
}

/* 3. Lower Document Section (IRS Forms 1040 / 1120) */
.tax-document-band {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0b1722;
}

.tax-document-band::before {
  display: none !important; /* Replaced by dedicated hardware-accelerated parallax element */
}

.tax-document-bg {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 140%;
  background-image: var(--img, url('../Pics/AdobeStock_47747648.jpeg'));
  background-size: cover;
  background-position: center;
  filter: saturate(0.85) brightness(0.72);
  will-change: transform;
  transform: translate3d(0, 0, 0);
  z-index: 1;
}

.tax-document-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10, 28, 40, 0.68) 0%,
    rgba(190, 155, 18, 0.20) 100%
  );
  z-index: 2;
  pointer-events: none;
}

.tax-document-inner {
  position: relative;
  z-index: 3;
}

.tax-document-eyebrow {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
  will-change: transform, opacity;
}

.tax-document-headline {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.95);
  will-change: transform, opacity;
}

.tax-document-headline em {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}

/* Desktop & Tablets (>= 900px) */
@media (min-width: 900px) {
  .tax-hero-section {
    min-height: calc(100vh - 68px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 28px;
    padding-bottom: 28px;
    box-sizing: border-box;
  }

  .tax-hero-content {
    margin-bottom: 20px;
  }

  .tax-quickprepare-dock-section {
    padding-top: 0;
  }
}

@media (min-width: 900px) and (max-height: 750px) {
  .tax-hero-section {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .tax-hero-content {
    margin-bottom: 12px;
  }

  .tax-frosted-card {
    padding: 20px 28px !important;
    gap: 20px !important;
  }
}

/* Mobile & Small Screen Fallback (< 900px) */
@media (max-width: 899px) {
  .tax-hero-section {
    min-height: auto !important;
    display: block !important;
    padding-top: 40px !important;
    padding-bottom: 24px !important;
  }

  .tax-quickprepare-dock-section {
    padding-top: 20px !important;
    padding-bottom: 32px !important;
  }

  .tax-hero-content,
  .tax-frosted-card,
  .tax-document-bg,
  .tax-document-headline {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Pricing tables & daylight sections on file-taxes */
.pricing-tables-section {
  background: var(--ground, #F5F8FB) !important;
  color: var(--ink, #0C1D28) !important;
}

.pricing-tables-section .sechead h2 {
  color: var(--ink, #0C1D28) !important;
}

.pricing-tables-section .sechead p.lede {
  color: var(--ink-2, #3F5A6B) !important;
}

.pricing-tables-section .ptab td.n {
  color: var(--ink, #0C1D28) !important;
}

.pricing-tables-section .ptab td.d {
  color: var(--ink-2, #3F5A6B) !important;
}

.pricing-tables-section .ptab td.p {
  color: var(--blue-dk, #08557F) !important;
}

/* ============================================================
   SORABAN FINTECH INTERACTIVE LEDGER TABLE & TACTILE DATA ROWS
   ============================================================ */

.tax-ledger-header {
  position: relative;
  z-index: 10;
  background: var(--ground, #F5F8FB);
  padding-top: 12px;
  padding-bottom: 8px;
  will-change: transform, opacity;
}

.tax-ledger-twrap {
  position: relative;
  overflow: visible;
  margin-bottom: 32px;
}

.tax-ledger-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
}

.tax-ledger-table caption {
  text-align: left;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--blue, #0A6BA8);
  padding: 22px 14px 10px;
  border-bottom: 2px solid var(--ink, #0C1D28);
  font-weight: 600;
}

/* Ledger Rows */
.tax-ledger-table tr.ledger-row {
  position: relative;
  background: transparent;
  transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, background-color, box-shadow, opacity;
  cursor: pointer;
}

.tax-ledger-table tr.ledger-row td {
  padding: 18px 16px;
  vertical-align: top;
  border-top: 1px solid transparent;
  border-bottom: 1px solid var(--line-2, #E5EDF3);
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.tax-ledger-table tr.ledger-row td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.tax-ledger-table tr.ledger-row td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.tax-ledger-table tr.ledger-row td.n {
  width: 13rem;
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--ink, #0C1D28);
}

.tax-ledger-table tr.ledger-row td.n .tier-name {
  display: inline-block;
  transition: font-weight 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.tax-ledger-table tr.ledger-row td.d {
  font-size: 0.90rem;
  color: var(--ink-2, #3F5A6B);
  line-height: 1.6;
}

.tax-ledger-table tr.ledger-row td.p {
  width: 8.5rem;
  text-align: right;
  padding-right: 18px;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--blue-dk, #08557F);
  white-space: nowrap;
}

.tax-ledger-table tr.ledger-row td.p .price-val {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 3. Tactile Row Micro-Interactions (Soraban Hover Mechanics) */
.tax-ledger-table tr.ledger-row:hover {
  background-color: #F7F9FB !important;
  transform: translateX(4px) !important;
  box-shadow: 0 4px 16px rgba(14, 22, 33, 0.06) !important;
}

.tax-ledger-table tr.ledger-row:hover td {
  border-bottom-color: transparent;
  border-top-color: rgba(1, 159, 255, 0.15);
}

.tax-ledger-table tr.ledger-row:hover td.p .price-val,
.tax-ledger-table tr.ledger-row:hover td.p {
  color: #019FFF !important;
}

.tax-ledger-table tr.ledger-row:hover td.n .tier-name {
  font-weight: 700 !important;
  color: #019FFF !important;
}

/* "Most Chosen" Tag Pop */
.most-chosen-tag {
  display: inline-block;
  font-size: 0.62rem;
  vertical-align: middle;
  margin-left: 6px;
  background: var(--surface-2, #EDF4F9);
  color: var(--blue, #0A6BA8);
  border: 1px solid rgba(1, 159, 255, 0.3);
  border-radius: 4px;
  padding: 2px 7px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transform-origin: center;
  will-change: transform, opacity;
}

/* 4. Lower Section Bridge, Business Section, Bookkeeping Callout & Add-Ons */
.tax-business-header,
.tax-business-twrap,
.tax-addons-header,
.tax-addons-twrap {
  will-change: transform, opacity;
}

/* Bookkeeping Advantage Banner */
.tax-bookkeeping-callout {
  position: relative;
  border-left: none !important;
  background-color: var(--surface-2, #EDF4F9);
  padding: 22px 24px 22px 28px;
  border-radius: 0 8px 8px 0;
  overflow: hidden;
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: background-color, transform, box-shadow;
}

.tax-bookkeeping-callout .callout-accent-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 3.5px;
  height: 100%;
  background-color: #EAE42F;
  transform-origin: top center;
  transform: scaleY(0);
  will-change: transform;
}

.tax-bookkeeping-callout:hover {
  background-color: #F7F9FB !important;
  box-shadow: 0 8px 24px rgba(14, 22, 33, 0.06);
  transform: translateX(2px);
}

/* ==========================================================================
   PHOTO SPLIT: 3D TAX KNOB DIAL & INTERACTIVE PRODUCT STORYTELLING
   ========================================================================== */

#tax-dial-section {
  position: relative;
  background: var(--night, #0E1621);
  overflow: hidden;
  z-index: 5;
}

@media (min-width: 1024px) {
  #tax-dial-section {
    height: 100vh;
    min-height: 100vh;
  }
}

.tax-dial-col {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #09131D;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tax-dial-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tax-dial-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform-origin: 32% 52%;
  will-change: transform;
}

.tax-dial-glow {
  position: absolute;
  top: 14%;
  left: 12%;
  width: 44%;
  height: 44%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(1, 159, 255, 0.45) 0%, rgba(234, 228, 47, 0.25) 50%, transparent 75%);
  pointer-events: none;
  opacity: 0.15;
  filter: blur(32px);
  mix-blend-mode: screen;
  will-change: opacity, transform;
}

/* Checklist & Animated Divider Rules */
.tax-dial-checklist-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 26px;
}

.checklist-top-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}

.tax-dial-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.tax-dial-checklist li.tax-dial-item {
  position: relative;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--night-ink-2, #8EA4B8);
  padding: 13px 0 13px 22px;
  border-bottom: none !important;
  border-top: none !important;
  will-change: transform, opacity;
}

.tax-dial-checklist li.tax-dial-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22px;
  width: 10px;
  height: 2px;
  background: var(--blue, #019FFF);
  border-radius: 1px;
}

.tax-dial-checklist li.tax-dial-item .item-divider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}

/* Yellow CTA Button Physics */
.tax-dial-cta-btn {
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease;
  will-change: transform, box-shadow, opacity;
}

.tax-dial-cta-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 36px rgba(234, 228, 47, 0.35) !important;
}

.tax-dial-cta-btn:active {
  transform: translateY(-1px) scale(0.99);
}

/* ==========================================================================
   5-STEP PIPELINE LASER-FILL, 3-COLUMN CHECKLIST & DOCKING CTA (SORABAN MECHANICS)
   ========================================================================== */

/* 5-Step Pipeline Laser Track */
.tax-steps-section {
  position: relative;
  overflow: hidden;
}

.tax-steps-header {
  will-change: transform, opacity;
}

.steps-pipeline-track {
  position: relative;
  width: 100%;
  margin-top: 18px;
}

.pipeline-guide-svg {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 4px;
  overflow: visible;
  z-index: 5;
  pointer-events: none;
}

.pipeline-bg-line {
  stroke: rgba(1, 159, 255, 0.15);
  stroke-width: 2;
}

.pipeline-laser-line {
  stroke: #019FFF;
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(1, 159, 255, 0.7));
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  will-change: stroke-dashoffset;
}

.tax-steps-grid {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(14, 22, 33, 0.04);
}

.tax-steps-grid .step-card {
  position: relative;
  background: var(--surface, #FFFFFF);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease;
  will-change: transform, box-shadow, opacity;
  cursor: pointer;
  z-index: 1;
}

.tax-steps-grid .step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -6px rgba(1, 159, 255, 0.18), 0 0 0 1px #019FFF;
  z-index: 10;
  background: var(--surface-hover);
}

.tax-steps-grid .step-card:hover .step-k {
  color: #019FFF;
  text-shadow: 0 0 12px rgba(1, 159, 255, 0.45);
}

.tax-steps-grid .step-card:hover h3 {
  color: #019FFF;
}

.tax-steps-grid .step-card:hover p {
  color: var(--ink, #0C1D28);
}

.step-card .step-k {
  transition: color 0.25s ease, text-shadow 0.25s ease;
  display: inline-block;
  will-change: color, text-shadow, transform;
}

/* Three-Column Checklist & Border Spotlight */
.tax-checklist-header {
  will-change: transform, opacity;
}

.tax-checklist-grid {
  position: relative;
}

.tax-check-card {
  position: relative;
  border-radius: 8px;
  border: 1px solid var(--line-2, #E5EDF3);
  background: var(--surface, #FFFFFF);
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s ease;
  will-change: transform, opacity, box-shadow;
  --spot-x: -500px;
  --spot-y: -500px;
}

.tax-check-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background: radial-gradient(
    280px circle at var(--spot-x, -500px) var(--spot-y, -500px),
    rgba(1, 159, 255, 0.5) 0%,
    rgba(1, 159, 255, 0.12) 35%,
    transparent 70%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1.5px;
}

.tax-check-card:hover::before {
  opacity: 1;
}

.tax-check-card > * {
  position: relative;
  z-index: 1;
}

.tax-check-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -10px rgba(14, 22, 33, 0.08), 0 0 0 1px rgba(1, 159, 255, 0.35);
}

.tax-check-card ul.ticks.tight li {
  will-change: transform, opacity;
}

/* "Ready to File?" Docking Action Banner */
.tax-cta-dock-wrap {
  will-change: transform, opacity;
}

.tax-docking-cta {
  display: inline-block;
  padding: 16px 36px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 6px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease;
  will-change: transform, box-shadow, opacity;
}

.tax-docking-cta:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 25px rgba(234, 228, 47, 0.35) !important;
}

.tax-docking-cta:active {
  transform: translateY(-1px) scale(0.99);
}

/* Responsive & Mobile Stepper (< 800px) */
@media (max-width: 799px) {
  .steps-pipeline-track {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 14px;
    scroll-snap-type: x mandatory;
  }
  .pipeline-guide-svg {
    display: none;
  }
  .tax-steps-grid {
    display: flex;
    grid-template-columns: none;
    min-width: 680px;
    gap: 8px;
    background: transparent;
    border: none;
  }
  .tax-steps-grid .step-card {
    flex: 0 0 220px;
    scroll-snap-align: start;
    border: 1px solid var(--line-2, #E5EDF3);
    border-radius: 8px;
  }
}

/* ============================================================
   TAX STRATEGY: HERO PIN & CASE STUDY ELEVATED SHEET WIPE
   Soraban-grade B2B fintech interaction suite
   ============================================================ */

/* ── Hero Buttons Micro-Interactions ── */
.strategy-btn-primary {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.28s ease !important;
  will-change: transform, box-shadow;
}

.strategy-btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(234, 228, 47, 0.35) !important;
  background-color: #F5EF3E !important;
}

.strategy-btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 12px rgba(234, 228, 47, 0.25) !important;
}

.strategy-btn-outline {
  position: relative;
  overflow: hidden;
  transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: background-color, color, border-color, transform;
}

.strategy-btn-outline:hover {
  background: #ffffff !important;
  color: #0E1621 !important;
  border-color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.strategy-btn-outline:active {
  transform: translateY(0) !important;
}

/* ── Case Study Callout Card & Yellow Accent Bar ── */
.strategy-callout-card {
  position: relative;
  border-left: none !important;
  border-radius: 0 var(--r, 8px) var(--r, 8px) 0;
  overflow: hidden;
  will-change: transform, opacity;
}

.strategy-callout-accent-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--gold, #EAE42F);
  transform-origin: top center;
  transform: scaleY(0);
  will-change: transform;
}

/* ── Desktop Stage & Pinned Sheet Geometry (>= 1024px) ── */
@media (min-width: 1024px) {
  .strategy-pinned-wrapper {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 68px);
    overflow: hidden;
    background: var(--night, #0C1D28);
  }

  .strategy-hero-stage {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 68px);
    display: flex;
    align-items: center;
    padding: 72px 0;
    box-sizing: border-box;
    will-change: transform, opacity;
  }

  .strategy-hero-stage .shell {
    width: 100%;
  }

  .strategy-hero-copy {
    will-change: transform, opacity;
  }

  .strategy-hero-owl {
    will-change: transform, opacity;
  }

  .strategy-case-sheet {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: calc(100vh - 68px);
    z-index: 10;
    border-radius: 32px 32px 0 0;
    background: var(--ground);
    box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.45);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 72px 0;
    box-sizing: border-box;
    will-change: transform;
    pointer-events: auto;
  }

  .strategy-case-sheet .shell {
    width: 100%;
  }

  .strategy-case-header,
  .strategy-case-table,
  .strategy-case-split {
    will-change: transform, opacity;
  }
}

/* ── Mobile & Tablet Clean Fallback (< 1024px) ── */
@media (max-width: 1023px) {
  .strategy-pinned-wrapper {
    position: relative;
    width: 100%;
  }

  .strategy-hero-stage {
    position: relative;
    min-height: auto;
    padding: 50px 0;
  }

  .strategy-case-sheet {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    border-radius: 0;
    background: var(--ground);
    box-shadow: none;
    border-top: none;
    transform: none !important;
    padding: 50px 0;
  }

  .strategy-callout-accent-line {
    transform: scaleY(1) !important;
  }
}

/* ── Accessibility & Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .strategy-btn-primary,
  .strategy-btn-outline,
  .strategy-case-sheet,
  .strategy-hero-stage,
  .strategy-hero-copy,
  .strategy-hero-owl,
  .strategy-callout-card,
  .strategy-callout-accent-line {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }

  .strategy-callout-accent-line {
    transform: scaleY(1) !important;
  }
}

/* ============================================================
   TAX STRATEGY: DARK SHEET WIPE & PINNED STRATEGY STAGE
   Soraban-style elevated sheet and synchronized triad
   ============================================================ */

/* ── Desktop Stage & Sheet Geometry (>= 1024px) ── */
@media (min-width: 1024px) {
  .dark-strategy-pinned-stage {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 68px);
    margin-top: calc(-100vh + 68px);
    z-index: 20;
    overflow: hidden;
    background: transparent;
    pointer-events: none;
  }

  .dark-strategy-sheet {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 68px);
    border-radius: 32px 32px 0 0;
    background: #0E1621 !important;
    box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.45);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 72px 0;
    box-sizing: border-box;
    will-change: transform;
    pointer-events: auto;
  }

  .dark-strategy-sheet .shell {
    width: 100%;
  }

  .dark-strategy-head {
    will-change: transform, opacity;
  }

  .dark-strategy-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    background: transparent !important;
    border: none !important;
    margin-top: 28px !important;
  }

  .strategy-card {
    background: #ffffff !important;
    border: 1px solid rgba(229, 237, 243, 0.9) !important;
    border-radius: 14px !important;
    padding: 26px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform, box-shadow, opacity;
    cursor: default;
  }

  .strategy-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 36px rgba(1, 159, 255, 0.12) !important;
    border-color: #019FFF !important;
  }

  .strategy-card h3 {
    color: #0E1621 !important;
    font-size: 1.05rem !important;
    margin: 0 !important;
  }

  .strategy-card p {
    color: #4A5B68 !important;
    font-size: 0.86rem !important;
    line-height: 1.55 !important;
    margin: 0 !important;
  }

  .strategy-card p b {
    color: #0E1621 !important;
  }

  .strategy-numeral {
    font-family: var(--f-display, 'Outfit', sans-serif) !important;
    font-weight: 300 !important;
    font-size: 2.4rem !important;
    color: #019FFF !important;
    line-height: 1 !important;
    transition: color 0.35s ease, text-shadow 0.35s ease, transform 0.35s ease !important;
    display: inline-block;
    will-change: color, text-shadow, transform;
  }

  .dark-strategy-callout {
    border-radius: 0 12px 12px 0 !important;
    border-left: 3.5px solid var(--gold, #EAE42F) !important;
    background: rgba(255, 255, 255, 0.055) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    will-change: transform, opacity;
  }
}

/* ── Mobile Fallback (< 1024px) ── */
@media (max-width: 1023px) {
  .dark-strategy-pinned-stage {
    position: relative;
    width: 100%;
    margin-top: 0 !important;
  }

  .dark-strategy-sheet {
    position: relative;
    width: 100%;
    border-radius: 0;
    background: #0E1621 !important;
    box-shadow: none;
    border-top: none;
    padding: 50px 0;
    transform: none !important;
  }

  .dark-strategy-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    background: transparent !important;
    border: none !important;
    margin-top: 20px !important;
  }

  .strategy-card {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 22px 18px !important;
    transform: none !important;
  }

  .strategy-card h3 {
    color: #0E1621 !important;
  }

  .strategy-card p {
    color: #4A5B68 !important;
  }

  .strategy-numeral {
    color: #019FFF !important;
    font-size: 2rem !important;
  }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .dark-strategy-pinned-stage,
  .dark-strategy-sheet,
  .dark-strategy-head,
  .strategy-card,
  .strategy-numeral,
  .dark-strategy-callout {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ============================================================
   TAX STRATEGY: FINANCIAL SCOREBOARD & PHOTO BRIDGE
   Interactive fintech data displays & tabular numeral cards
   ============================================================ */

/* ── Scoreboard Grids & Geometry ── */
.exposure-ba-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
  background: transparent !important;
  border: none !important;
  margin-top: 24px !important;
}

.exposure-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  background: transparent !important;
  border: none !important;
  margin-top: 20px !important;
}

/* ── Interactive Metric Cards ── */
.exposure-card {
  background: #ffffff !important;
  border: 1px solid rgba(225, 233, 240, 0.95) !important;
  border-radius: 14px !important;
  padding: 26px 24px !important;
  box-shadow: 0 4px 18px rgba(14, 22, 33, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform, opacity, box-shadow;
  cursor: default;
  position: relative;
  overflow: hidden;
}

.exposure-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 32px -10px rgba(14, 22, 33, 0.12) !important;
  border-color: rgba(1, 159, 255, 0.35) !important;
}

.exposure-card .k {
  font-family: var(--f-mono, monospace) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #475569 !important;
  display: block;
}

.exposure-num {
  font-family: var(--f-display, 'Outfit', sans-serif) !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: 'tnum' 1 !important;
  letter-spacing: -0.025em !important;
  color: #0E1621 !important;
  margin: 12px 0 10px !important;
  will-change: transform;
}

.exposure-card-ba .exposure-num {
  font-size: clamp(2.3rem, 4.4vw, 3.2rem) !important;
}

.exposure-card-kpi .exposure-num {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem) !important;
}

.exposure-card p {
  font-size: 0.84rem !important;
  color: #334155 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* ── "After the Strategy" Brand-Blue Wash Tile ── */
.exposure-card-after {
  background: #F0F7FD !important;
  border-color: #019FFF !important;
  box-shadow: 0 8px 24px rgba(1, 159, 255, 0.08) !important;
}

.exposure-card-after .exposure-num {
  color: #0066A4 !important;
  font-weight: 400 !important;
}

.exposure-card-after .k {
  color: #08557F !important;
}

.exposure-card-after p {
  color: #2D4352 !important;
}

.exposure-card-after:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 36px -8px rgba(1, 159, 255, 0.2) !important;
  border-color: #019FFF !important;
}

/* ── "Combined First-Year Impact" Luminous Hairline Tile ── */
.exposure-card-total {
  background: linear-gradient(135deg, #ffffff 0%, #F5F9FD 100%) !important;
  border: 1px solid rgba(1, 159, 255, 0.45) !important;
  box-shadow: 0 8px 24px rgba(1, 159, 255, 0.1), inset 0 0 0 1px rgba(1, 159, 255, 0.18) !important;
  position: relative;
}

.exposure-card-total::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: linear-gradient(90deg, #019FFF, #EAE42F);
  z-index: 2;
}

.exposure-card-total .exposure-num {
  color: #0060A6 !important;
  font-weight: 400 !important;
}

.exposure-card-total:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 40px -10px rgba(1, 159, 255, 0.24), inset 0 0 0 1px rgba(1, 159, 255, 0.3) !important;
  border-color: #019FFF !important;
}

/* ── Asset Benefits Stagger ── */
.exposure-benefit-item {
  will-change: transform, opacity;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease !important;
}

.exposure-benefit-item:hover {
  transform: translateX(4px) !important;
  color: #019FFF !important;
}

/* ── Architectural Photo Parallax Bridge ── */
.exposure-photo-col {
  overflow: hidden !important;
  position: relative !important;
}

.exposure-photo-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.15) !important;
  will-change: transform;
}

/* ── Responsive Stacking Breakpoints ── */
@media (max-width: 767px) {
  .exposure-ba-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .exposure-kpi-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .exposure-card-ba .exposure-num {
    font-size: 2.2rem !important;
  }

  .exposure-card-kpi .exposure-num {
    font-size: 1.8rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .exposure-kpi-grid {
    gap: 14px !important;
  }

  .exposure-card-kpi {
    padding: 20px 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .exposure-card,
  .exposure-num,
  .exposure-benefit-item,
  .exposure-photo-img {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
}

/* =========================================================================
   PROACTIVE ADVISORY PINNED SPLIT SECTION (SORABAN INTERACTION PHYSICS)
   ========================================================================= */

.standing-split-stage {
  position: relative;
  background: var(--night, #0E1621);
  overflow: hidden;
  z-index: 5;
}

/* Photo Column & Inner Mask */
.standing-split-photo-col {
  position: relative;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.standing-split-img-mask {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.standing-split-photo-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Left Content Column */
.standing-split-text-col {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 6vw, 96px) clamp(32px, 5vw, 80px);
  background: var(--night, #0E1621);
  z-index: 2;
}

.standing-split-content-inner {
  max-width: 540px;
  width: 100%;
}

/* Checklist Items & Hairline Dividers */
.standing-split-checklist {
  list-style: none;
  margin: 0 0 28px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.standing-split-item {
  position: relative;
  padding: 14px 0 16px 24px;
}

.standing-split-item::before {
  content: '—';
  position: absolute;
  left: 0;
  top: 14px;
  color: var(--cyan, #019FFF);
  font-weight: 600;
  line-height: 1.5;
}

.standing-split-item-text {
  display: block;
  color: #F8FAFC;
  font-size: 0.98rem;
  line-height: 1.55;
  font-weight: 450;
  letter-spacing: -0.01em;
}

.standing-split-divider {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  transform-origin: left center;
  transform: scaleX(1);
  will-change: transform;
}

/* Micro-Interactions: Yellow CTA Button */
.standing-split-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              background-color 0.2s ease !important;
  will-change: transform, box-shadow;
}

.standing-split-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(234, 228, 47, 0.3) !important;
}

/* Responsive & Mobile Fallback (< 1024px) */
@media (max-width: 1023px) {
  .standing-split-stage {
    display: flex !important;
    flex-direction: column-reverse !important;
    min-height: auto !important;
    height: auto !important;
  }

  .standing-split-photo-col {
    height: 380px !important;
    min-height: 380px !important;
    border-left: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .standing-split-img-mask {
    height: 100% !important;
  }

  .standing-split-photo-img {
    height: 100% !important;
    transform: none !important;
  }

  .standing-split-text-col {
    padding: 56px 24px 48px !important;
  }
}

@media (max-width: 767px) {
  .standing-split-photo-col {
    height: 280px !important;
    min-height: 280px !important;
  }

  .standing-split-text-col {
    padding: 44px 18px 40px !important;
  }

  .standing-split-item-text {
    font-size: 0.92rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .standing-split-photo-img,
  .standing-split-eyebrow,
  .standing-split-heading,
  .standing-split-lede,
  .standing-split-item,
  .standing-split-divider,
  .standing-split-btn {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }
}

/* =========================================================================
   ADVISORY PINNED STAGE -> CLOSING WHITE SHEET WIPE (SORABAN MECHANICS)
   ========================================================================= */

/* Dark Advisory Pinned Stage */
.advisory-pinned-stage {
  position: relative;
  background: var(--night, #0E1621) !important;
  color: #FFFFFF !important;
  overflow: hidden;
  z-index: 6;
}

.advisory-pinned-head {
  will-change: transform, opacity;
}

.advisory-pillar-grid {
  margin-top: 36px;
  margin-bottom: 36px;
}

/* Pillar Cards: Border highlight to brand blue (#019FFF) and text opacity lift */
.advisory-pillar-card {
  position: relative;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  padding: 28px 24px !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.25s ease !important;
  will-change: transform, opacity, border-color, box-shadow;
}

.advisory-pillar-card h3 {
  color: #FFFFFF !important;
  font-size: 1.15rem !important;
  margin-bottom: 12px !important;
  transition: color 0.2s ease !important;
}

.advisory-pillar-card p {
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.65 !important;
  font-size: 0.93rem !important;
  transition: color 0.2s ease, opacity 0.2s ease !important;
}

.advisory-pillar-card:hover {
  transform: translateY(-4px) !important;
  border-color: #019FFF !important;
  background: rgba(1, 159, 255, 0.04) !important;
  box-shadow: 0 16px 36px -10px rgba(1, 159, 255, 0.25) !important;
}

.advisory-pillar-card:hover h3 {
  color: #019FFF !important;
}

.advisory-pillar-card:hover p {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Advisory Wait Banner & Tactile CTA Hover */
.advisory-wait-wrap {
  will-change: transform, opacity;
}

.advisory-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease !important;
  will-change: transform, box-shadow;
}

.advisory-cta-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(234, 228, 47, 0.35) !important;
}

/* Incoming White Closing Sheet */
.closing-white-sheet {
  position: relative;
  z-index: 10;
  background: #FFFFFF !important;
  color: #0C1D28 !important;
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.45);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 0;
  padding-top: 80px;
  padding-bottom: 80px;
  will-change: transform;
}

.closing-white-left {
  will-change: transform, opacity;
}

.closing-white-left h3 {
  color: #0C1D28 !important;
}

.closing-white-left .lede {
  color: #2D4352 !important;
}

.closing-white-left .lede b {
  color: #0C1D28 !important;
}

/* Crisp 1px border on IMPORTANT disclaimer card */
.closing-disclaimer-card {
  border: 1px solid #E3E8ED !important;
  border-left: 4px solid #08557F !important;
  background: #F8FAFC !important;
  border-radius: 12px !important;
  padding: 24px 28px !important;
  will-change: transform, opacity;
  box-shadow: 0 4px 18px rgba(14, 22, 33, 0.04) !important;
}

.closing-disclaimer-card .h {
  color: #08557F !important;
}

.closing-disclaimer-card p {
  color: #2D4352 !important;
}

/* Responsive & Mobile Fallback (< 1024px) */
@media (max-width: 1023px) {
  .closing-white-sheet {
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -16px 36px rgba(0, 0, 0, 0.25);
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

@media (max-width: 767px) {
  .closing-white-sheet {
    border-radius: 20px 20px 0 0;
    padding-top: 48px;
    padding-bottom: 48px;
  }
  
  .advisory-pillar-card {
    padding: 20px 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .advisory-pinned-head,
  .advisory-pillar-card,
  .advisory-wait-wrap,
  .advisory-cta-btn,
  .closing-white-sheet,
  .closing-white-left,
  .closing-disclaimer-card {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }
}

/* =========================================================================
   ENGAGEMENT SCOPE THREE PILLARS (SORABAN INTERACTION DEPTH & ELEVATIONS)
   ========================================================================= */

.engagement-scope-section {
  position: relative;
  background: #FFFFFF;
  color: #0C1D28 !important;
  padding: 80px 0 100px;
  overflow: visible;
  z-index: 12;
}

.engagement-scope-head {
  margin-bottom: 40px;
  will-change: transform, opacity;
}

.engagement-scope-head .engagement-scope-eyebrow {
  color: #08557F !important;
}

.engagement-scope-head .engagement-scope-h2 {
  color: #0C1D28 !important;
}

/* Grid & Equal Vertical Height System */
.engagement-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

/* Value Cards: 1px #E3E8ED border, 6px radius, 32px 28px padding */
.engagement-value-card {
  position: relative;
  background: #FFFFFF !important;
  border: 1px solid #E3E8ED !important;
  border-radius: 6px !important;
  padding: 32px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  height: 100% !important;
  box-sizing: border-box !important;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform, box-shadow, opacity;
  cursor: default;
  overflow: hidden;
}

/* Card Top Luminous Hairline Indicator */
.engagement-value-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #019FFF;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.25s ease;
  z-index: 2;
}

/* Tag / Numeral ("01", "02", "03") */
.engagement-num-tag {
  display: inline-block !important;
  font-family: var(--f-mono, monospace) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  color: var(--ink-3, #64748B) !important;
  margin-bottom: 20px !important;
  transition: color 0.3s ease, text-shadow 0.3s ease !important;
}

.engagement-value-card h3 {
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: #0E1621 !important;
  margin: 0 0 16px 0 !important;
  letter-spacing: -0.01em !important;
}

.engagement-value-card p {
  font-size: 0.94rem !important;
  line-height: 1.68 !important;
  color: #475569 !important;
  margin: 0 !important;
  flex-grow: 1 !important;
}

/* Tactile Card Hover Micro-Physics */
.engagement-value-card:hover {
  transform: translateY(-6px) scale(1.015) !important;
  box-shadow: 0 20px 40px -12px rgba(1, 159, 255, 0.16), 0 0 0 1px #019FFF !important;
  border-color: #019FFF !important;
  z-index: 10 !important;
  opacity: 1 !important;
}

.engagement-value-card:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

.engagement-value-card:hover .engagement-num-tag {
  color: #019FFF !important;
  text-shadow: 0 0 12px rgba(1, 159, 255, 0.35) !important;
}

/* Sibling Hover Focus: When grid is hovered, non-hovered siblings drop to opacity: 0.7 */
.engagement-cards-grid:hover .engagement-value-card:not(:hover) {
  opacity: 0.7 !important;
}

/* Responsive Breakpoints */
@media (max-width: 1023px) {
  .engagement-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .engagement-value-card {
    padding: 26px 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .engagement-scope-head,
  .engagement-value-card,
  .engagement-num-tag {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }
  .engagement-cards-grid:hover .engagement-value-card:not(:hover) {
    opacity: 1 !important;
  }
}

/* =========================================================================
   TWO TRACKS (PERSONA STAGE) -> INCLUDED DARK SHEET WIPE (SORABAN MECHANICS)
   ========================================================================= */

/* Pinned White Persona Stage */
.persona-tracks-stage {
  position: relative;
  background: #FFFFFF;
  color: #0C1D28 !important;
  padding: 80px 0 100px;
  overflow: visible;
  z-index: 14;
}

.persona-tracks-head {
  will-change: transform, opacity;
}

.persona-tracks-head .persona-tracks-eyebrow {
  color: #08557F !important;
}

.persona-tracks-head .persona-tracks-h2 {
  color: #0C1D28 !important;
}

.persona-tracks-head .persona-tracks-lede {
  color: #2D4352 !important;
}

.persona-track-body ul.ticks li {
  color: #2D4352 !important;
}

.persona-track-body ul.ticks li b {
  color: #0C1D28 !important;
}

.persona-cards-wrap {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 28px !important;
  align-items: stretch !important;
  margin-top: 36px !important;
}

/* Tactile Persona Track Cards */
.persona-track-card {
  position: relative;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  box-shadow: 0 4px 20px rgba(14, 22, 33, 0.04) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform, box-shadow, opacity, filter;
  cursor: default;
}

/* Header with dark contrast and uppercase track label */
.persona-track-head {
  background: var(--night, #0E1621) !important;
  color: #FFFFFF !important;
  padding: 20px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.persona-track-head span {
  font-family: var(--f-mono, monospace) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #EAE42F !important; /* Accent yellow */
}

.persona-track-head b {
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
}

.persona-track-body {
  padding: 28px 24px !important;
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

.persona-track-body > p {
  color: #334155 !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
}

/* Hover Micro-Physics */
.persona-track-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px -10px rgba(1, 159, 255, 0.15) !important;
  border-color: #019FFF !important;
}

/* Incoming Dark Sheet Wipe ("No line items. No surprise invoices.") */
.included-dark-sheet {
  position: relative;
  z-index: 18;
  background: #0E1621 !important;
  color: #FFFFFF !important;
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.45);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  margin-top: 0;
  padding-top: 90px;
  padding-bottom: 90px;
  will-change: transform;
}

.included-dark-head {
  will-change: transform, opacity;
}

.included-dark-eyebrow {
  color: #EAE42F !important; /* Yellow eyebrow */
  font-family: var(--f-mono, monospace) !important;
  letter-spacing: 0.16em !important;
  font-size: 0.72rem !important;
}

.included-dark-h2 {
  color: #FFFFFF !important;
}

.included-dark-lede {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* Responsive & Mobile Breakpoints */
@media (max-width: 1023px) {
  .persona-cards-wrap {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .included-dark-sheet {
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -16px 36px rgba(0, 0, 0, 0.25);
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

@media (max-width: 767px) {
  .persona-tracks-stage {
    padding: 60px 0 70px;
  }

  .included-dark-sheet {
    border-radius: 20px 20px 0 0;
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .persona-track-body {
    padding: 22px 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .persona-tracks-head,
  .persona-track-card,
  .included-dark-sheet,
  .included-dark-head {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }
}

/* =========================================================================
   INCLUDED IN ENGAGEMENT (SCOPE PINNED STAGE) -> PREMIUM SUPPORT SHEET
   (SORABAN DUAL-COLUMN LASER CASCADE & SHEET ELEVATION)
   ========================================================================= */

.scope-pinned-stage {
  position: relative;
  background: var(--night, #0E1621) !important;
  color: #FFFFFF !important;
  overflow: hidden;
  z-index: 18;
}

.scope-pinned-head {
  will-change: transform, opacity;
}

.scope-dual-split {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 40px !important;
  align-items: start !important;
  margin-top: 36px !important;
}

.scope-colhead {
  font-family: var(--f-mono, monospace) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #019FFF !important; /* Brand cyan */
  padding-bottom: 12px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  transition: letter-spacing 0.3s ease !important;
}

.scope-item-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Individual Scope Line Item */
.scope-item {
  position: relative !important;
  padding: 12px 14px 14px 22px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  transition: background-color 0.22s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform, opacity, background-color;
  cursor: default;
}

.scope-item::before {
  content: '—' !important;
  position: absolute !important;
  left: 6px !important;
  top: 12px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-weight: 600 !important;
  transition: color 0.22s ease !important;
}

.scope-item-text {
  display: block !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.94rem !important;
  line-height: 1.6 !important;
}

.scope-item-text b {
  color: #FFFFFF !important;
}

/* Hairline Divider Beneath Each Scope Item */
.scope-item-divider {
  position: absolute !important;
  bottom: 0 !important;
  left: 6px !important;
  right: 6px !important;
  height: 1px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  transform-origin: left center !important;
  transform: scaleX(1);
  will-change: transform;
}

/* Micro-Interactions on Scope Line Items */
.scope-item:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
  transform: translateX(3px) !important;
}

.scope-item:hover::before {
  color: #019FFF !important; /* Leading dash illuminates brand cyan */
}

/* Bottom Boundary Card Dock ("One boundary, stated plainly") */
.scope-boundary-card {
  position: relative !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-left: 4px solid #EAE42F !important;
  border-radius: 12px !important;
  padding: 24px 28px !important;
  margin-top: 36px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  will-change: transform, opacity;
}

.scope-boundary-card .h {
  color: #EAE42F !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}

.scope-boundary-card p {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.9rem !important;
  line-height: 1.65 !important;
}

/* ── Premium Support: spec-precise sheet layering ── */
.support-white-sheet {
  position: relative;
  z-index: 22;
  background: #FFFFFF !important;
  color: #0C1D28 !important;
  border-radius: 36px 36px 0 0;
  box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.45);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 0;
  padding-top: 80px;
  padding-bottom: 80px;
  will-change: transform;
}

.support-white-head {
  will-change: transform, opacity;
}

.support-white-sheet .support-eyebrow {
  color: #08557F !important;
}

.support-white-sheet .support-h2 {
  color: #0C1D28 !important;
}

.support-white-sheet .support-lede {
  color: #2D4352 !important;
}

/* Responsive & Mobile Breakpoints */
@media (max-width: 1023px) {
  .scope-dual-split {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .support-white-sheet {
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -16px 36px rgba(0, 0, 0, 0.25);
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

@media (max-width: 767px) {
  .support-white-sheet {
    border-radius: 20px 20px 0 0;
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .scope-boundary-card {
    padding: 20px 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scope-pinned-head,
  .scope-colhead,
  .scope-item,
  .scope-item-divider,
  .scope-boundary-card,
  .support-white-sheet,
  .support-white-head {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }
}



/* ═══════════════════════════════════════════════════════════════
   PREMIUM SUPPORT — PINNED SHEET OVERLAY & 4-CARD EQUALIZER
   ═══════════════════════════════════════════════════════════════ */

.support-pinned-stage {
  position: relative;
  width: 100%;
  overflow: visible;
}

/* Override the base .grid gap:1px/background tile pattern for support section */
.support-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
  margin-top: 48px;
  background: transparent !important;
  border: none !important;
}

.support-pillar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--blue);
  border-radius: 8px;
  cursor: default;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
  z-index: 1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .support-pillar-card {
    background: #0E2430;
    border-color: #1F4558;
    border-top-color: #3FB4FF;
  }
  :root:not([data-theme="light"]) .support-card-h3 {
    color: #FFFFFF !important;
  }
  :root:not([data-theme="light"]) .support-pillar-card p {
    color: #B2CBD8 !important;
  }
}

:root[data-theme="dark"] .support-pillar-card {
  background: #0E2430;
  border-color: #1F4558;
  border-top-color: #3FB4FF;
}
:root[data-theme="dark"] .support-card-h3 {
  color: #FFFFFF !important;
}
:root[data-theme="dark"] .support-pillar-card p {
  color: #B2CBD8 !important;
}

.support-tag {
  display: block;
  font-family: var(--f-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Override base .card .tag which sets color: var(--ink-3) */
  color: #019FFF !important;
  transition: letter-spacing 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.support-card-h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink, #0A2533);
  margin: 0;
  line-height: 1.3;
}

.support-pillar-card p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-2, #3A4B5A);
  margin: 0;
  flex: 1;
}

/* Sibling dimming: native :has() fallback — GSAP handles this on JS side */
.support-cards-grid:has(.support-pillar-card:hover) .support-pillar-card:not(:hover) {
  opacity: 0.7;
}

.support-pillar-card:hover {
  transform: translateY(-6px) scale(1.015);
  z-index: 10;
  box-shadow: 0 20px 40px -12px rgba(1, 159, 255, 0.16),
              0 0 0 1px #019FFF;
  border-color: #019FFF;
  border-top-color: #019FFF;
}

.support-pillar-card:hover .support-tag {
  letter-spacing: 0.14em;
}

.support-eyebrow {
  color: #019FFF !important;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   QUARTERLY CADENCE — LASER-RAIL SCRUB & DIAL PARALLAX BANNER
   ═══════════════════════════════════════════════════════════════ */

/* ── Quarterly incoming dark sheet geometry (set by GSAP wipe) ── */
.quarterly-dark-sheet {
  position: relative;
  z-index: 24;                          /* above support white sheet z:22 */
  border-radius: 36px 36px 0 0;
  box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.45);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  background: #0E1621;
  will-change: transform;
}

/* White support cards compressed state during dark-sheet wipe */
.support-pillar-card.is-compressed {
  transform: scale(0.96) translateY(-30px);
  opacity: 0.3;
  filter: blur(6px);
}

.quarterly-pinned-stage {
  position: relative;
  width: 100%;
  overflow: visible;
}

.quarterly-rail-wrap {
  width: 100%;
  margin: 0 0 -4px;
  padding: 0;
  line-height: 0;
}

.quarterly-rail-svg {
  width: 100%;
  height: 4px;
  display: block;
  overflow: visible;
}

.quarterly-rail-node {
  transition: stroke 0.25s ease, fill 0.25s ease;
}

.quarterly-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: stretch;
  margin-top: 0;
}

.quarterly-card {
  position: relative;
  padding: 28px 24px 32px;
  border-top: 2px solid rgba(255, 255, 255, 0.1);
  /* opacity is set to 0.45 by GSAP in JS, not here — avoids pre-JS flash */
  opacity: 1;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
  cursor: default;
}

.quarterly-card.is-active {
  opacity: 1;
  transform: translateY(-4px);
  border-top-color: #019FFF;
  box-shadow: inset 0 4px 0 0 rgba(1, 159, 255, 0.08);
}

.quarterly-rail-node.is-active {
  stroke: #019FFF;
  fill: #019FFF;
}

.quarterly-period {
  display: block;
  font-family: var(--f-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 6px;
  transition: color 0.3s ease;
}

.quarterly-card.is-active .quarterly-period {
  color: #019FFF;
}

.quarterly-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
}

.quarterly-body {
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  margin: 0 0 12px;
}

.quarterly-bullets {
  padding-left: 14px;
  margin: 0;
}

.quarterly-bullets li {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
  margin-bottom: 4px;
  transition: color 0.3s ease;
}

.quarterly-card.is-active .quarterly-bullets li {
  color: rgba(255, 255, 255, 0.85);
}

.quarterly-card:hover {
  opacity: 1 !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 36px -10px rgba(1, 159, 255, 0.25);
}

.quarterly-dial-banner {
  will-change: transform;
  overflow: hidden;
}

.quarterly-dial-inner {
  will-change: transform, opacity;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .support-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .quarterly-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quarterly-rail-wrap {
    display: none;
  }

  .quarterly-card {
    opacity: 1;
    border-top-color: rgba(255, 255, 255, 0.15);
  }
}

@media (max-width: 767px) {
  .support-cards-grid {
    grid-template-columns: 1fr;
  }

  .quarterly-cards-grid {
    grid-template-columns: 1fr;
  }

  .quarterly-card {
    border-top-color: rgba(255, 255, 255, 0.12);
    padding: 22px 0 26px;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .support-pillar-card,
  .quarterly-card,
  .quarterly-dial-inner,
  .quarterly-rail-node {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }
}


/* ============================================================
   DIAL-FIT PINNED STAGE
   Gauge Banner Pin + Elevated White Sheet Curtain Wipe
   ============================================================ */

/* ── Outer orchestration wrapper ── */
.dial-fit-pinned-stage {
  position: relative;
  /* isolation:isolate creates a stacking context so the white sheet's
     z-index:10 is scoped — does NOT use overflow:hidden which would break
     ScrollTrigger's position:fixed pinning mechanism */
  isolation: isolate;
}

/* ── Dark Banner: base sizing & stacking ── */
#dial-banner-wrap {
  position: relative;
  z-index: 1;          /* sits beneath the incoming white sheet */
  will-change: transform;
}

.dial-banner {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

/* ── Rotating gauge background graphic ── */
.dial-gauge-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  will-change: transform;
  transform-origin: 50% 50%;
  /* Initial rotation handled by GSAP */
}

.dial-gauge-svg {
  width: 560px;
  height: 560px;
  max-width: 100%;
  opacity: 0.65;
  /* Subtle slow CSS breathe — overridden by GSAP scrub on desktop */
  animation: dial-gauge-breathe 18s ease-in-out infinite;
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

@keyframes dial-gauge-breathe {
  0%   { transform: rotate(-5deg) scale(1.01); }
  50%  { transform: rotate(8deg)  scale(1.04); }
  100% { transform: rotate(-5deg) scale(1.01); }
}

/* ── Elevated White Fit Sheet ── */
.fit-white-sheet {
  position: relative;
  background: #ffffff;
  color: #0C1D28 !important;
  border-radius: 36px 36px 0 0;
  box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.45);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: clamp(48px, 7vw, 96px) 0 clamp(48px, 6vw, 80px);
  /* z-index and margin-top are set dynamically by GSAP on desktop
     (margin-top = -bannerHeight to overlap the pinned banner; z-index: 10).
     On mobile the sheet sits naturally in flow. */
  will-change: transform;
  transform-origin: 50% 0%;
}

/* ── Fit section header ── */
.fit-sechead {
  margin-bottom: clamp(28px, 4vw, 48px);
  will-change: transform, opacity;
}

.fit-eyebrow {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #08557F !important;
  margin-bottom: 10px;
}

.fit-headline {
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  font-weight: 300;
  line-height: 1.08;
  color: #0C1D28 !important;
  margin: 0 0 16px;
}

.fit-lede {
  max-width: 62ch;
  color: #2D4352 !important;
}

/* ── Two-column ledger split ── */
.fit-ledger-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
}

/* ── Column ── */
.fit-col {
  padding: 0 40px 0 0;
}

.fit-col-right {
  padding: 0 0 0 40px;
  /* Vertical hairline divider between the two columns */
  border-left: 1px solid var(--line);
}

/* ── Column headings ── */
.fit-colhead {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid currentColor;
}

.fit-colhead-cyan {
  color: #08557F !important;
  border-bottom-color: #08557F !important;
}

.fit-colhead-warn {
  color: #475569 !important;
  border-bottom-color: #CBD5E1 !important;
}

/* ── List items ── */
.fit-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fit-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 10px 8px;
  border-radius: var(--r-md);
  cursor: default;
  /* smooth micro-interaction */
  transition:
    background-color 0.18s ease,
    transform 0.18s ease;
  will-change: transform, opacity;
}

/* ── Hover micro-interaction ── */
.fit-item:hover {
  background-color: #F0F7FD !important;
  transform: translateX(3px);
}

/* Illuminate the dash marker on hover */
.fit-item:hover .fit-dash {
  color: #08557F !important;
  font-weight: 600;
}

.fit-item-warn:hover .fit-dash {
  color: var(--warn);
}

/* The leading em-dash marker */
.fit-dash {
  flex-shrink: 0;
  color: #64748B !important;
  font-size: 0.95rem;
  line-height: 1.6;
  transition: color 0.18s ease;
  user-select: none;
}

.fit-item-text {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #0C1D28 !important;
}

.fit-item-warn .fit-item-text {
  color: #2D4352 !important;
}

/* Service redirect links inside right column */
.fit-redirect {
  color: #08557F !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(8, 85, 127, 0.35) !important;
  transition: border-color 0.16s ease, color 0.16s ease;
}

.fit-redirect:hover {
  color: #019FFF !important;
  border-bottom-color: #019FFF !important;
}

/* Redirect note below the right column list */
.fit-redirect-note {
  color: #475569 !important;
  font-size: 0.82rem;
  line-height: 1.6;
  max-width: 44ch;
  margin-top: 14px;
}

/* ── Bottom seam — dark "Scoped, not listed" section ── */
.fit-seam-section {
  position: relative;
  z-index: 3;
  /* Appears naturally below the fit sheet on mobile;
     on desktop it peeks as the white sheet finishes docking */
}


/* ─────────────────────────────────────────────────────────────
   RESPONSIVE OVERRIDES
   ─────────────────────────────────────────────────────────────*/

/* Tablet: single-column ledger */
@media (max-width: 860px) {
  .fit-ledger-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .fit-col {
    padding: 0;
  }

  .fit-col-right {
    padding: 0;
    border-left: none;
    border-top: 1px solid var(--line);
    padding-top: 28px;
  }
}

/* Mobile: no rounded corners on white sheet (it's just flow content) */
@media (max-width: 767px) {
  .fit-white-sheet {
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.25);
  }

  .dial-gauge-svg {
    width: 100%;
    max-width: 360px;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* Reduced-motion: disable all animated props on dial-fit stage */
@media (prefers-reduced-motion: reduce) {
  .dial-gauge-svg {
    animation: none !important;
  }

  .fit-item {
    transition: background-color 0.18s ease !important;
    /* Keep hover background wash but remove the translate */
  }

  .fit-item:hover {
    transform: none !important;
  }

  .fit-white-sheet,
  #dial-banner-wrap,
  .dial-gauge-bg {
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ============================================================
   FEE PINNED STAGE
   Dark Sheet Wipe · Two-Column Stagger · Dossier Card · Uncle Pat Spring
   ============================================================ */

/* ── Stage orchestration wrapper ── */
.fee-pinned-stage {
  position: relative;
  isolation: isolate;   /* scopes z-index without overflow:hidden (which breaks GSAP pin) */
}

/* ── Elevated Dark Fee Sheet ──────────────────────────────── */
.fee-dark-sheet {
  position: relative;
  background:    #0E1621;
  border-radius: 36px 36px 0 0;
  box-shadow:    0 -30px 60px rgba(0, 0, 0, 0.45);
  border-top:    1px solid rgba(255, 255, 255, 0.16);
  padding:       clamp(56px, 8vw, 104px) 0 clamp(56px, 7vw, 88px);
  z-index:       2;
  will-change:   transform;
  transform-origin: 50% 0%;
  /* GSAP sets initial y/scale on desktop — sheet in natural flow on mobile */
}

/* ── Left-column bullet list ─────────────────────────────── */
.fee-bullet-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fee-bullet-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 9px 8px;
  border-radius: var(--r-md);
  transition: background-color 0.18s ease, transform 0.18s ease;
  cursor: default;
  will-change: transform, opacity;
}

.fee-bullet-item:hover {
  background-color: rgba(1, 159, 255, 0.06);
  transform: translateX(3px);
}

.fee-dash {
  flex-shrink: 0;
  color: #019FFF;           /* brand cyan always-on */
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 600;
  user-select: none;
  transition: color 0.16s ease;
}

.fee-bullet-item:hover .fee-dash {
  color: #7dd3fc;           /* lightened on hover */
}

/* ── CTA block micro-interactions ─────────────────────────── */
/* Gold primary button: tactile lift + ambient glow */
.fee-cta-primary {
  transition:
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.fee-cta-primary:hover {
  transform:  translateY(-2px);
  box-shadow: 0 10px 24px rgba(234, 228, 47, 0.35);
}

/* Ghost phone link: subtle lift */
.fee-cta-phone {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.fee-cta-phone:hover {
  transform: translateY(-1px);
}

/* ── Dossier Card ("How it starts") ─────────────────────── */
.fee-dossier-card {
  border-radius: var(--r-lg);
  /* Base border comes from .filecard.dark-fc — we layer transitions on top */
  transition:
    border-color 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow   0.32s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

/* Border illuminates to brand blue on hover */
.fee-dossier-card:hover {
  border-color: #019FFF;
  box-shadow:   0 0 0 1px rgba(1, 159, 255, 0.18),
                0 16px 40px rgba(0, 0, 0, 0.4);
}

/* Step list */
.fee-step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fee-step-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  position: relative;
  will-change: transform, opacity;
}

.fee-step-item:last-child {
  border-bottom: none;
}

/* Accent beam: a left-edge line that "illuminates" on reveal */
.fee-step-item::before {
  content: '';
  position: absolute;
  left:   -20px;              /* outside the card's padding, along the card edge */
  top:    0;
  bottom: 0;
  width:  2px;
  background: #019FFF;
  border-radius: 1px;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top center;
  transition: none;           /* GSAP drives this on scroll; CSS handles hover */
}

/* Step number badge */
.fee-step-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(1, 159, 255, 0.12);
  border: 1px solid rgba(1, 159, 255, 0.28);
  color: #019FFF;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  /* illumination driven by GSAP .is-lit class */
  transition: background-color 0.28s ease, border-color 0.28s ease, color 0.28s ease;
}

/* Lit state — applied by GSAP stagger */
.fee-step-item.is-lit .fee-step-num {
  background:    rgba(1, 159, 255, 0.28);
  border-color:  #019FFF;
  color:         #fff;
  box-shadow:    0 0 8px rgba(1, 159, 255, 0.45);
}

.fee-step-item.is-lit::before {
  opacity: 1;
  transform: scaleY(1);
  transition: opacity 0.24s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.fee-step-text {
  font-size: 0.9rem;
  line-height: 1.62;
  color: var(--night-ink-2);
}

.fee-step-text b {
  color: var(--night-ink);
  font-weight: 600;
}

.fee-dossier-note {
  color: var(--night-ink-3);
  font-size: 0.8rem;
  line-height: 1.55;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 12px;
}

/* ── Uncle Pat Quote Card ─────────────────────────────────── */
.fee-patsays {
  will-change: transform, opacity;
}

/* Owl avatar: float micro-animation */
#fee-pat-avatar {
  animation: fee-pat-float 5.5s ease-in-out infinite;
  transform-origin: 50% 50%;
}

@keyframes fee-pat-float {
  0%,  100% { transform: translateY(0)    rotate(-1deg); }
  40%        { transform: translateY(-4px) rotate(0.5deg); }
  70%        { transform: translateY(-2px) rotate(-0.5deg); }
}


/* ─────────────────────────────────────────────────────────────
   RESPONSIVE OVERRIDES
   ─────────────────────────────────────────────────────────────*/

@media (max-width: 860px) {
  .fee-dark-sheet {
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -16px 36px rgba(0, 0, 0, 0.35);
  }
}

@media (max-width: 767px) {
  .fee-dossier-card {
    margin-top: 32px;
  }
}

/* Reduced-motion: disable avatar float and CTA glow; keep hover bg wash */
@media (prefers-reduced-motion: reduce) {
  #fee-pat-avatar {
    animation: none !important;
  }

  .fee-cta-primary,
  .fee-cta-phone,
  .fee-bullet-item {
    transition: background-color 0.18s ease !important;
  }

  .fee-cta-primary:hover,
  .fee-cta-phone:hover,
  .fee-bullet-item:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  .fee-dark-sheet {
    transform: none !important;
    opacity:   1 !important;
  }
}

/* ============================================================
   NEW LAW HERO STAGE & LEGISLATIVE BREAKDOWN
   Dual Policy Cards · 3D Perspective · Expiration Accent · Frosted Callout
   ============================================================ */

.newlaw-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(56px, 8vw, 96px) 0 clamp(64px, 8vw, 104px);
}

.newlaw-badge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
}

.newlaw-eyebrow {
  margin-bottom: 0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  will-change: transform, opacity, letter-spacing;
}

.newlaw-date-stamp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  background: rgba(234, 228, 47, 0.08);
  border: 1px solid rgba(234, 228, 47, 0.28);
  border-radius: 20px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--gold);
  text-transform: uppercase;
  will-change: transform, opacity, letter-spacing;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.newlaw-date-stamp:hover {
  background: rgba(234, 228, 47, 0.15);
  border-color: rgba(234, 228, 47, 0.5);
}

.newlaw-headline-wrap {
  overflow: hidden;
  margin-bottom: 12px;
}

.newlaw-headline {
  color: #FFFFFF;
  margin-bottom: 0;
  will-change: transform, opacity;
}

.newlaw-lede {
  will-change: transform, opacity;
  max-width: 72ch;
}

/* ── Dual Policy Cards with 3D Perspective ── */
.newlaw-versus {
  perspective: 1200px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 36px;
  background: transparent;
  border: none;
}

.newlaw-card {
  position: relative;
  background: #0E1621;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform-style: preserve-3d;
  will-change: transform, opacity, box-shadow;
  transition:
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
}

.newlaw-card .who {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--night-ink-2);
}

.newlaw-card h3 {
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.3;
  color: #FFFFFF;
}

.newlaw-card p {
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--night-ink-2);
}

.newlaw-card .job {
  font-family: var(--f-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Arrow micro-shift on hover */
.card-arrow {
  display: inline-block;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.newlaw-card:hover .card-arrow {
  transform: translateX(4px);
}

/* Left Card (PERMANENT) — Clean slate hairline top border */
.newlaw-card-perm {
  border-top: 2px solid rgba(255, 255, 255, 0.2);
}

.newlaw-card-perm:hover {
  transform: translateY(-4px);
  border-top-color: #019FFF;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(1, 159, 255, 0.15);
}

/* Right Card (GONE AFTER 2028) — Ambient warning glow */
.newlaw-card-temp {
  border-top: 2px solid #EAE42F;
  box-shadow: 0 -8px 24px -6px rgba(234, 228, 47, 0.18);
  background: linear-gradient(180deg, rgba(234, 228, 47, 0.04) 0%, rgba(14, 22, 33, 0.96) 100%), #0E1621;
}

.newlaw-card-temp .who {
  color: var(--gold);
}

.newlaw-card-temp:hover {
  transform: translateY(-4px);
  border-top-color: #EAE42F;
  border-color: rgba(234, 228, 47, 0.35);
  box-shadow:
    0 -8px 28px -4px rgba(234, 228, 47, 0.32),
    0 16px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(234, 228, 47, 0.25);
}

/* ── Reality Check Banner ("THE HONEST HEADLINE") ── */
.newlaw-callout {
  margin-top: 28px;
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-left: 3px solid var(--gold) !important;
  border-radius: var(--r-md);
  padding: 24px 28px;
  will-change: transform, opacity;
}

.newlaw-callout .h {
  color: var(--gold) !important;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}

.newlaw-callout p {
  color: var(--night-ink-2) !important;
  font-size: 0.92rem;
  line-height: 1.62;
  margin: 0;
}

/* ── CTAs ── */
.newlaw-ctas {
  margin-top: 26px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.newlaw-cta-primary {
  will-change: transform, box-shadow;
  transition:
    transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.newlaw-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(234, 228, 47, 0.35);
}

.newlaw-cta-secondary {
  will-change: transform;
  transition:
    transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.24s ease,
    border-color 0.24s ease;
}

.newlaw-cta-secondary:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ── Responsive & Motion Safe ── */
@media (max-width: 860px) {
  .newlaw-versus {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .newlaw-card:hover,
  .newlaw-cta-primary:hover,
  .newlaw-cta-secondary:hover {
    transform: none !important;
  }

  .newlaw-card:hover .card-arrow {
    transform: none !important;
  }

  .newlaw-headline,
  .newlaw-lede,
  .newlaw-eyebrow,
  .newlaw-date-stamp,
  .newlaw-card,
  .newlaw-callout,
  .newlaw-cta-primary,
  .newlaw-cta-secondary {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ============================================================
   NEW LAW — INDIVIDUAL DEDUCTIONS SECTION
   2x2 Matrix Stagger · Illuminated Tags · Schedule 1-A Callout · Sibling Hover Dimming
   ============================================================ */

.indiv-section {
  position: relative;
  padding: clamp(56px, 8vw, 96px) 0;
}

.indiv-headline-wrap {
  overflow: hidden;
  margin-bottom: 12px;
}

.indiv-headline {
  margin-bottom: 0;
  will-change: transform, opacity;
}

.indiv-eyebrow,
.indiv-lede {
  will-change: transform, opacity;
}

/* ── 2x2 Deduction Grid ── */
.indiv-deduction-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 36px;
}

.indiv-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition:
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow, opacity;
  cursor: default;
}

.indiv-card h3 {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.indiv-card p {
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--ink-2);
  margin: 0;
}

/* Expiration Tag */
.indiv-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition:
    background-color 0.4s ease,
    border-color 0.4s ease,
    color 0.4s ease,
    box-shadow 0.4s ease;
  width: fit-content;
}

.indiv-tag b {
  color: var(--blue);
  font-weight: 600;
  transition: color 0.4s ease;
}

/* Warning yellow illumination accent */
.indiv-tag.is-illuminated {
  background: rgba(234, 228, 47, 0.22);
  border-color: rgba(212, 196, 26, 0.55);
  color: #6d6000;
  box-shadow: 0 0 12px rgba(234, 228, 47, 0.3);
}

.indiv-tag.is-illuminated b {
  color: #857400;
}

/* Bold Tabular Figures for monetary caps */
.monetary-cap {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink);
}

/* ── Tactile Card Hover Micro-Physics ── */
.indiv-card:hover {
  transform: translateY(-4px) scale(1.01);
  z-index: 10;
  box-shadow: 0 16px 36px -10px rgba(1, 159, 255, 0.14), 0 0 0 1px #019FFF;
  border-color: #019FFF;
}

/* Sibling non-hovered cards drop slightly in opacity to 0.75 */
.indiv-deduction-grid:has(.indiv-card:hover) .indiv-card:not(:hover) {
  opacity: 0.75;
}

/* ── Schedule 1-A Callout Card ── */
.indiv-sched1a-callout {
  margin-top: 24px;
  background: #F0F7FD !important;
  border: 1px solid rgba(1, 159, 255, 0.25) !important;
  border-left: 4px solid #08557F !important;
  border-radius: var(--r-md);
  padding: 24px 28px;
  will-change: transform, opacity;
  transition:
    box-shadow 0.26s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

.indiv-sched1a-callout:hover {
  box-shadow: 0 12px 28px rgba(1, 159, 255, 0.12);
  transform: translateY(-2px);
}

.indiv-sched1a-h {
  color: #08557F !important;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

.indiv-sched1a-callout p {
  color: #2D4352 !important;
  font-size: 0.92rem;
  line-height: 1.62;
  margin: 0;
}

.indiv-sched1a-callout strong,
.indiv-sched1a-callout b {
  color: #0C1D28 !important;
}

/* ── Responsive & Motion Safety ── */
@media (max-width: 860px) {
  .indiv-deduction-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .indiv-card {
    padding: 24px 20px;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .indiv-card:hover,
  .indiv-sched1a-callout:hover {
    transform: none !important;
  }

  .indiv-deduction-grid:has(.indiv-card:hover) .indiv-card:not(:hover) {
    opacity: 1 !important;
  }

  .indiv-eyebrow,
  .indiv-headline,
  .indiv-lede,
  .indiv-card,
  .indiv-sched1a-callout {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ============================================================
   NEW LAW — LEGISLATIVE POLICY MATRIX & CLOSED PROVISIONS
   2x2 Policy Grid · Status Tags Illumination · Sunset Accent Beam
   ============================================================ */

/* ── 2x2 Policy Grid Geometry ── */
.policy-matrix-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.policy-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition:
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow, opacity;
  cursor: default;
}

.policy-card h3 {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.policy-card p {
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--ink-2);
  margin: 0;
}

/* ── Tactile Card Hover Micro-Physics ── */
.policy-card:hover {
  transform: translateY(-4px) scale(1.01);
  z-index: 10;
  box-shadow: 0 16px 36px -10px rgba(1, 159, 255, 0.15), 0 0 0 1px #019FFF;
  border-color: #019FFF;
}

/* Sibling non-hovered cards drop slightly in opacity (0.75) */
.policy-matrix-grid:has(.policy-card:hover) .policy-card:not(:hover) {
  opacity: 0.75;
}

/* ── Status Tags ── */
.policy-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition:
    background-color 0.4s ease,
    border-color 0.4s ease,
    color 0.4s ease,
    box-shadow 0.4s ease;
  width: fit-content;
}

.policy-tag b {
  color: var(--blue);
  font-weight: 600;
  transition: color 0.4s ease;
}

/* "PERMANENT" badges illuminate in brand cyan (#019FFF) */
.policy-tag-perm.is-illuminated {
  background: rgba(1, 159, 255, 0.14);
  border-color: rgba(1, 159, 255, 0.5);
  color: #0077c2;
  box-shadow: 0 0 12px rgba(1, 159, 255, 0.3);
}

.policy-tag-perm.is-illuminated .policy-tag-status {
  color: #019FFF;
}

/* "2025-2029 · THEN REVERTS" and "NEW IN 2026" illuminate in accent yellow (#EAE42F) */
.policy-tag-reverts.is-illuminated,
.policy-tag-new.is-illuminated {
  background: rgba(234, 228, 47, 0.22);
  border-color: rgba(212, 196, 26, 0.55);
  color: #6d6000;
  box-shadow: 0 0 12px rgba(234, 228, 47, 0.3);
}

.policy-tag-reverts.is-illuminated .policy-tag-status,
.policy-tag-new.is-illuminated .policy-tag-status {
  color: #857400;
}

/* ── Sunset Alert Banner ("CREDITS THAT HAVE ALREADY CLOSED") ── */
.sunset-alert-banner {
  position: relative;
  overflow: hidden;
  margin-top: 28px;
  background: #FFFDF8 !important;
  border: 1px solid rgba(217, 119, 6, 0.2) !important;
  border-radius: var(--r-md);
  padding: 24px 28px 24px 30px;
  will-change: transform, opacity;
  transition:
    box-shadow 0.26s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

.sunset-alert-banner:hover {
  box-shadow: 0 12px 28px rgba(217, 119, 6, 0.12);
  transform: translateY(-2px);
}

/* Animated amber left accent border */
.sunset-accent-beam {
  position: absolute;
  top: 0;
  left: 0;
  width: 3.5px;
  height: 100%;
  background: #E57A24;
  transform-origin: top center;
  transform: scaleY(0);
  will-change: transform;
}

.sunset-eyebrow {
  color: #D97706 !important;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
  will-change: letter-spacing, opacity;
}

.sunset-alert-banner p {
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.62;
  margin: 0;
}

/* ── Responsive & Motion Safety ── */
@media (max-width: 860px) {
  .policy-matrix-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .policy-card {
    padding: 24px 20px;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .policy-card:hover,
  .sunset-alert-banner:hover {
    transform: none !important;
  }

  .policy-matrix-grid:has(.policy-card:hover) .policy-card:not(:hover) {
    opacity: 1 !important;
  }

  .sunset-accent-beam {
    transform: scaleY(1) !important;
  }

  .policy-card,
  .sunset-alert-banner,
  .sunset-eyebrow {
    transform: none !important;
    opacity: 1 !important;
    letter-spacing: 0.14em !important;
}
}

/* ── Dark Mode Adaptations for New Law Cards & Callouts ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .indiv-card,
  :root:not([data-theme="light"]) .policy-card {
    background: #0E2430;
    border-color: #1F4558;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  }

  :root:not([data-theme="light"]) .indiv-card h3,
  :root:not([data-theme="light"]) .policy-card h3 {
    color: #FFFFFF !important;
  }

  :root:not([data-theme="light"]) .indiv-card p,
  :root:not([data-theme="light"]) .policy-card p {
    color: #B2CBD8 !important;
  }

  :root:not([data-theme="light"]) .indiv-card .monetary-cap,
  :root:not([data-theme="light"]) .policy-card .monetary-cap {
    color: #3FB4FF !important;
  }

  :root:not([data-theme="light"]) .indiv-tag,
  :root:not([data-theme="light"]) .policy-tag {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #8EB4C8;
  }

  :root:not([data-theme="light"]) .indiv-tag b,
  :root:not([data-theme="light"]) .policy-tag b {
    color: #3FB4FF;
  }

  :root:not([data-theme="light"]) .indiv-tag.is-illuminated,
  :root:not([data-theme="light"]) .policy-tag-reverts.is-illuminated,
  :root:not([data-theme="light"]) .policy-tag-new.is-illuminated {
    background: rgba(234, 228, 47, 0.14);
    border-color: rgba(234, 228, 47, 0.4);
    color: #EAE42F;
    box-shadow: 0 0 14px rgba(234, 228, 47, 0.25);
  }

  :root:not([data-theme="light"]) .indiv-tag.is-illuminated b,
  :root:not([data-theme="light"]) .policy-tag-reverts.is-illuminated .policy-tag-status,
  :root:not([data-theme="light"]) .policy-tag-new.is-illuminated .policy-tag-status {
    color: #FFF275;
  }

  :root:not([data-theme="light"]) .policy-tag-perm.is-illuminated {
    background: rgba(1, 159, 255, 0.18);
    border-color: rgba(1, 159, 255, 0.55);
    color: #7CCBFF;
    box-shadow: 0 0 14px rgba(1, 159, 255, 0.3);
  }

  :root:not([data-theme="light"]) .policy-tag-perm.is-illuminated .policy-tag-status {
    color: #3FB4FF;
  }

  :root:not([data-theme="light"]) .indiv-sched1a-callout {
    background: #0A2230 !important;
    border: 1px solid rgba(1, 159, 255, 0.3) !important;
    border-left: 4px solid #3FB4FF !important;
  }

  :root:not([data-theme="light"]) .indiv-sched1a-h {
    color: #3FB4FF !important;
  }

  :root:not([data-theme="light"]) .indiv-sched1a-callout p {
    color: #B2CBD8 !important;
  }

  :root:not([data-theme="light"]) .indiv-sched1a-callout strong,
  :root:not([data-theme="light"]) .indiv-sched1a-callout b {
    color: #FFFFFF !important;
  }

  :root:not([data-theme="light"]) .sunset-alert-banner {
    background: #1C1810 !important;
    border: 1px solid rgba(217, 119, 6, 0.35) !important;
  }

  :root:not([data-theme="light"]) .sunset-eyebrow {
    color: #F59E0B !important;
  }

  :root:not([data-theme="light"]) .sunset-alert-banner p {
    color: #D3BCA6 !important;
  }

  :root:not([data-theme="light"]) .sunset-alert-banner strong,
  :root:not([data-theme="light"]) .sunset-alert-banner b {
    color: #FFFDF8 !important;
  }
}

:root[data-theme="dark"] .indiv-card,
:root[data-theme="dark"] .policy-card {
  background: #0E2430;
  border-color: #1F4558;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

:root[data-theme="dark"] .indiv-card h3,
:root[data-theme="dark"] .policy-card h3 {
  color: #FFFFFF !important;
}

:root[data-theme="dark"] .indiv-card p,
:root[data-theme="dark"] .policy-card p {
  color: #B2CBD8 !important;
}

:root[data-theme="dark"] .indiv-card .monetary-cap,
:root[data-theme="dark"] .policy-card .monetary-cap {
  color: #3FB4FF !important;
}

:root[data-theme="dark"] .indiv-tag,
:root[data-theme="dark"] .policy-tag {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #8EB4C8;
}

:root[data-theme="dark"] .indiv-tag b,
:root[data-theme="dark"] .policy-tag b {
  color: #3FB4FF;
}

:root[data-theme="dark"] .indiv-tag.is-illuminated,
:root[data-theme="dark"] .policy-tag-reverts.is-illuminated,
:root[data-theme="dark"] .policy-tag-new.is-illuminated {
  background: rgba(234, 228, 47, 0.14);
  border-color: rgba(234, 228, 47, 0.4);
  color: #EAE42F;
  box-shadow: 0 0 14px rgba(234, 228, 47, 0.25);
}

:root[data-theme="dark"] .indiv-tag.is-illuminated b,
:root[data-theme="dark"] .policy-tag-reverts.is-illuminated .policy-tag-status,
:root[data-theme="dark"] .policy-tag-new.is-illuminated .policy-tag-status {
  color: #FFF275;
}

:root[data-theme="dark"] .policy-tag-perm.is-illuminated {
  background: rgba(1, 159, 255, 0.18);
  border-color: rgba(1, 159, 255, 0.55);
  color: #7CCBFF;
  box-shadow: 0 0 14px rgba(1, 159, 255, 0.3);
}

:root[data-theme="dark"] .policy-tag-perm.is-illuminated .policy-tag-status {
  color: #3FB4FF;
}

:root[data-theme="dark"] .indiv-sched1a-callout {
  background: #0A2230 !important;
  border: 1px solid rgba(1, 159, 255, 0.3) !important;
  border-left: 4px solid #3FB4FF !important;
}

:root[data-theme="dark"] .indiv-sched1a-h {
  color: #3FB4FF !important;
}

:root[data-theme="dark"] .indiv-sched1a-callout p {
  color: #B2CBD8 !important;
}

:root[data-theme="dark"] .indiv-sched1a-callout strong,
:root[data-theme="dark"] .indiv-sched1a-callout b {
  color: #FFFFFF !important;
}

:root[data-theme="dark"] .sunset-alert-banner {
  background: #1C1810 !important;
  border: 1px solid rgba(217, 119, 6, 0.35) !important;
}

:root[data-theme="dark"] .sunset-eyebrow {
  color: #F59E0B !important;
}

:root[data-theme="dark"] .sunset-alert-banner p {
  color: #D3BCA6 !important;
}

:root[data-theme="dark"] .sunset-alert-banner strong,
:root[data-theme="dark"] .sunset-alert-banner b {
  color: #FFFDF8 !important;
}

/* ============================================================
   NEW LAW — CONSULTATION PINNED SPLIT STAGE
   Elevated Rounded Sheet · Parallax Photo Scaling · Divider Sweeps
   ============================================================ */

.counsel-pinned-stage {
  position: relative;
  background: #0E1621;
  z-index: 5;
}

.counsel-split {
  border-radius: 36px 36px 0 0;
  background: #0E1621;
  box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.45);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  min-height: calc(100vh - 68px);
  overflow: hidden;
}

/* ── Left Column: Image Parallax Container ── */
.counsel-img-col {
  position: relative;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  height: 100%;
  min-height: 100%;
}

.counsel-img-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

#counsel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(0.85) brightness(0.9);
  transition: none !important;
  will-change: transform;
  transform-origin: 50% 50%;
}

/* ── Right Column: Text & List ── */
.counsel-text-col {
  background: #0E1621 !important;
  padding: clamp(48px, 6vw, 80px) clamp(36px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.counsel-eyebrow {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  will-change: transform, opacity;
}

.counsel-headline,
.counsel-narrative {
  will-change: transform, opacity;
}

/* ── 3 Line Items with Hairline Dividers ── */
.counsel-items-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.counsel-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}

.counsel-item {
  display: flex;
  flex-direction: column;
}

.counsel-item-content {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 14px 0;
  will-change: transform, opacity;
}

.counsel-dash {
  color: #019FFF;
  font-weight: 600;
  font-size: 0.95rem;
  flex-shrink: 0;
  user-select: none;
}

.counsel-item-text {
  color: var(--night-ink-2);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* ── Yellow CTA Button Tactile Hover ── */
.counsel-cta {
  will-change: transform, box-shadow;
  transition:
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.counsel-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(234, 228, 47, 0.35);
}

/* ── Responsive & Motion Safe ── */
@media (max-width: 860px) {
  .counsel-split {
    grid-template-columns: 1fr;
    border-radius: 24px 24px 0 0;
    min-height: auto;
  }

  .counsel-img-col {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    min-height: 340px;
    height: 340px;
  }

  .counsel-text-col {
    padding: 40px 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .counsel-cta:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  .counsel-divider {
    transform: scaleX(1) !important;
  }

  #counsel-img,
  .counsel-headline,
  .counsel-narrative,
  .counsel-item-content,
  .counsel-cta {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ============================================================
   NEW LAW — BUSINESS REFORMS PINNED SECTION
   3x2 Matrix Cascade · Tag Illumination · Hover Micro-Physics
   ============================================================ */

.biz-reforms-section {
  position: relative;
  background: var(--night, #0E1621);
  padding: 80px 0 72px;
  overflow: hidden;
  z-index: 6;
}

@media (min-width: 1100px) {
  .biz-reforms-section {
    min-height: calc(100vh - 68px);
    display: flex;
    align-items: center;
    padding: 60px 0;
  }

  .biz-reforms-shell {
    width: 100%;
  }
}

.biz-headline-wrap {
  overflow: hidden;
  display: block;
}

.biz-headline {
  margin-bottom: 14px;
  color: #fff;
  will-change: transform, opacity;
}

.biz-eyebrow {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  margin-bottom: 12px;
  display: inline-block;
  will-change: transform, opacity;
}

.biz-lede {
  color: var(--night-ink-2);
  max-width: 64ch;
  line-height: 1.65;
  will-change: transform, opacity;
}

/* ── 3x2 Grid Geometry ── */
.biz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}

@media (max-width: 1099px) and (min-width: 768px) {
  .biz-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 767px) {
  .biz-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ── Individual Provision Card ── */
.biz-card {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, box-shadow;
  min-height: 44px;
}

/* Top Hairline Accent */
.biz-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 12px 12px 0 0;
  transition:
    background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.biz-card h3 {
  color: #fff;
  font-size: 1.12rem;
  margin: 10px 0 10px 0;
  font-weight: 600;
  line-height: 1.35;
}

.biz-card p {
  color: var(--night-ink-2);
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0;
}

/* Tabular Numerals for Monetary Caps */
.biz-card .monetary-cap {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: #fff;
}

/* ── Status Tags ── */
.biz-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--night-ink-2);
  margin-bottom: 4px;
  transition: color 0.4s ease, text-shadow 0.4s ease;
}

.biz-tag .tag-perm {
  color: #019FFF;
  font-weight: 600;
  letter-spacing: 0.1em;
  transition: color 0.35s ease, text-shadow 0.35s ease;
}

.biz-tag .tag-perm.is-illuminated {
  color: #019FFF;
  text-shadow: 0 0 12px rgba(1, 159, 255, 0.85);
}

.biz-tag .tag-date {
  color: #EAE42F;
  font-weight: 600;
  transition: color 0.35s ease, text-shadow 0.35s ease;
}

.biz-tag .tag-date.is-illuminated {
  color: #EAE42F;
  text-shadow: 0 0 12px rgba(234, 228, 47, 0.85);
}

/* ── Tactile Hover Micro-Physics ── */
@media (hover: hover) and (pointer: fine) {
  .biz-card:hover {
    transform: translateY(-5px) scale(1.015);
    z-index: 10;
    border-color: rgba(1, 159, 255, 0.4);
    box-shadow: 0 20px 40px -10px rgba(1, 159, 255, 0.2), 0 0 0 1px #019FFF;
  }

  .biz-card:hover::before {
    background: #019FFF;
    box-shadow: 0 0 12px rgba(1, 159, 255, 0.8);
  }

  /* Sibling dimming */
  .biz-grid:has(.biz-card:hover) .biz-card:not(:hover) {
    opacity: 0.65;
    transform: scale(0.99);
  }
}

.biz-secondary-section {
  padding: 0 0 72px;
  background: var(--night, #0E1621);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .biz-card:hover {
    transform: none !important;
  }

  .biz-grid:has(.biz-card:hover) .biz-card:not(:hover) {
    opacity: 1 !important;
    transform: none !important;
  }

  .biz-tag .tag-perm.is-illuminated,
  .biz-tag .tag-date.is-illuminated {
    text-shadow: none !important;
  }
}

/* ============================================================
   NEW LAW — BUSINESS ADDENDA INTO STATE NON-CONFORMITY WIPE
   Warning Banner · 3-Card Grid · Elevated White Sheet Curtain Unmask
   ============================================================ */

.state-wipe-wrapper {
  position: relative;
  width: 100%;
}

/* ── Warning Banner ("ONE WINDOW THAT HAS ALREADY SHUT") ── */
.biz-shut-window {
  background: rgba(255, 255, 255, 0.055) !important;
  border-left: 3px solid #EAE42F !important;
  border-radius: 8px;
  padding: 24px 28px;
  margin-bottom: 24px;
  will-change: transform, opacity;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.biz-shut-window:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.biz-shut-eyebrow {
  color: #EAE42F !important;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}

.biz-shut-copy {
  color: var(--night-ink-2);
  line-height: 1.65;
  margin: 0;
  font-size: 0.92rem;
}

.biz-shut-copy b {
  color: #ffffff;
}

/* ── 3-Column Business Addenda Grid & Cards ── */
.biz-addenda-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.biz-addenda-card {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 24px;
  transition:
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, box-shadow;
}

.biz-addenda-card h3 {
  color: #fff;
  font-size: 1.1rem;
  margin: 0 0 10px 0;
  font-weight: 600;
  line-height: 1.35;
}

.biz-addenda-card p {
  color: var(--night-ink-2);
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0;
}

/* Tactile Card Hover Micro-Physics */
@media (hover: hover) and (pointer: fine) {
  .biz-addenda-card:hover {
    transform: translateY(-5px) scale(1.015);
    z-index: 10;
    border-color: rgba(1, 159, 255, 0.4);
    box-shadow: 0 16px 36px -10px rgba(1, 159, 255, 0.2), 0 0 0 1px #019FFF;
  }

  .biz-addenda-grid:has(.biz-addenda-card:hover) .biz-addenda-card:not(:hover) {
    opacity: 0.7;
    transform: scale(0.99);
  }
}

/* ── Desktop Pinned Sheet Wipe Architecture (>= 1024px) ── */
@media (min-width: 1024px) {
  .state-wipe-wrapper {
    overflow: hidden;
  }

  #biz-addenda-stage {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--night, #0E1621);
    padding: 80px 0;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
  }

  .biz-addenda-shell {
    width: 100%;
  }

  #state-white-sheet {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    z-index: 10;
    display: flex;
    align-items: center;
    border-radius: 36px 36px 0 0;
    background: #ffffff;
    box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.45);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    will-change: transform;
    pointer-events: auto;
  }

  .state-sheet-inner {
    width: 100%;
  }
}

/* ── Incoming State Section Typography & Layout ── */
.state-conformity-sheet {
  background: #ffffff;
  color: #0C1D28 !important;
  padding: 80px 0;
}

.state-eyebrow {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  margin-bottom: 12px;
  display: inline-block;
  color: #08557F !important;
  will-change: transform, opacity;
}

.state-headline-wrap {
  overflow: hidden;
  display: block;
}

.state-headline {
  color: #0C1D28 !important;
  margin-bottom: 14px;
  will-change: transform, opacity;
}

.state-lede {
  color: #2D4352 !important;
  max-width: 64ch;
  line-height: 1.65;
  will-change: transform, opacity;
}

.state-split-copy,
.state-split-callout {
  will-change: transform, opacity;
}

.state-split-copy p {
  color: #2D4352 !important;
}

.state-split-copy strong,
.state-split-copy b {
  color: #0C1D28 !important;
}

.state-split-callout {
  color: #2D4352 !important;
}

.state-split-callout .h {
  color: #08557F !important;
}

.state-split-callout p {
  color: #2D4352 !important;
}

/* ── Tablet & Mobile Responsiveness (< 1024px) ── */
@media (max-width: 1023px) {
  .state-wipe-wrapper {
    position: static;
    overflow: visible;
  }

  #biz-addenda-stage {
    min-height: auto;
    padding: 60px 0;
  }

  #state-white-sheet {
    position: static;
    min-height: auto;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.15);
    padding: 60px 0;
  }

  .biz-addenda-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .biz-addenda-card:hover {
    transform: none !important;
  }

  .biz-addenda-grid:has(.biz-addenda-card:hover) .biz-addenda-card:not(:hover) {
    opacity: 1 !important;
    transform: none !important;
  }
}