/* ==========================================================================
   BrightFront Web - styles.css
   Mobile-first. Two Google Fonts families:
   Bricolage Grotesque (display) + Plus Jakarta Sans (body).
   Palette: deep ink navy + warm sunrise gold + coral, on warm paper.
   Section transitions use one language: the "sunrise sweep" rounded overlap,
   with varied radii, warm seam washes, and large scroll-parallax pieces.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Color */
  --ink: #0d1a2b;          /* deep navy, base */
  --ink-soft: #16283f;     /* raised navy surfaces */
  --ink-line: #24374f;     /* borders on dark */
  --paper: #faf6ee;        /* warm off-white background */
  --paper-raised: #ffffff; /* cards on paper */
  --sand: #f1e9da;         /* tinted section background */
  --gold: #f4a83a;         /* sunrise gold, primary accent */
  --gold-deep: #d88a17;    /* gold for text on light (contrast-safe for large text) */
  --coral: #e8603f;        /* secondary accent */
  --text: #23303f;         /* body text on light */
  --text-soft: #55636f;    /* secondary text on light */
  --text-on-dark: #e9eef5;
  --text-soft-on-dark: #a8b6c6;
  --focus: #1f6feb;

  /* Type */
  --font-display: "Bricolage Grotesque", "Avenir Next", "Trebuchet MS", sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

  /* Rhythm */
  --wrap: 68rem;
  --radius: 22px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(13, 26, 43, 0.05),
            0 10px 28px rgba(13, 26, 43, 0.08),
            0 26px 60px rgba(13, 26, 43, 0.06);
  --shadow-lift: 0 2px 4px rgba(13, 26, 43, 0.06),
                 0 18px 44px rgba(13, 26, 43, 0.14),
                 0 38px 90px rgba(13, 26, 43, 0.12);

  /* Sunrise sweep seams */
  --sweep-r: clamp(28px, 5vw, 64px);
  --sweep-overlap: clamp(40px, 6vw, 64px);
}

/* ---------- Reset-ish ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
  background: var(--paper);
  overflow-x: clip;
}

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

h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.6rem, 4.6vw + 1rem, 4.5rem);
  line-height: 1.03;
  letter-spacing: -0.025em;
  max-width: 16ch;
}
h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.22rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.6em;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }

a { color: var(--coral); text-underline-offset: 2px; }
a:hover { color: var(--ink); }

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

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: #fff;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
  color: #fff;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease,
              background-color 180ms ease, color 180ms ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-gold {
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(244, 168, 58, 0.35),
              0 14px 34px rgba(232, 96, 63, 0.18);
}
.btn-gold:hover {
  background: #ffb84f;
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(244, 168, 58, 0.45),
              0 20px 44px rgba(232, 96, 63, 0.22);
}

.btn-ghost {
  background: transparent;
  color: var(--text-on-dark);
  border-color: var(--ink-line);
}
.btn-ghost:hover {
  color: #fff;
  border-color: var(--gold);
  box-shadow: 0 8px 18px rgba(13, 26, 43, 0.35);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 8px 18px rgba(13, 26, 43, 0.2);
}

.btn-small { padding: 0.45rem 1.05rem; font-size: 0.92rem; }
.btn-block { width: 100%; text-align: center; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid var(--ink-line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.7rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: #fff;
}
.logo-mark { color: #fff; flex-shrink: 0; }
.logo-sun { fill: var(--gold); }
.logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.26rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.logo-accent { color: var(--gold); }
.logo:hover { color: #fff; }
.logo:hover .logo-sun { fill: #ffc46a; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-sm);
  color: var(--text-on-dark);
  padding: 0.5rem 0.8rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}
.nav-toggle-bar {
  position: relative;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform 150ms ease;
}
.nav-toggle-bar::before { top: -6px; }
.nav-toggle-bar::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { transform: translateY(-6px) rotate(-45deg); }

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mobile: dropdown panel */
@media (max-width: 47.99rem) {
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    background: var(--ink);
    border-bottom: 1px solid var(--ink-line);
    padding: 0.75rem 1.25rem 1.25rem;
    box-shadow: var(--shadow-lift);
  }
  .nav-menu.is-open { display: flex; }
  .nav-menu > li > a {
    display: block;
    padding: 0.65rem 0.5rem;
  }
  .nav-menu .btn { margin-top: 0.5rem; text-align: center; }
}

.nav-menu a:not(.btn) {
  color: var(--text-on-dark);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
}
.nav-menu a:not(.btn):hover,
.nav-menu a[aria-current="page"] { color: var(--gold); }

@media (min-width: 48rem) {
  .nav-toggle { display: none; }
  .nav-menu {
    display: flex;
    align-items: center;
    gap: 1.4rem;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    linear-gradient(to top, rgba(244, 168, 58, 0.12), transparent 26%),
    radial-gradient(60rem 30rem at 85% -20%, rgba(244, 168, 58, 0.28), transparent 60%),
    radial-gradient(40rem 24rem at -10% 110%, rgba(232, 96, 63, 0.18), transparent 60%),
    var(--ink);
  color: var(--text-on-dark);
}

/* Decorative layer, clipped to the hero so nothing bleeds past its edges */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ---------- Hero atmosphere: Neon Horizon + Light Trails ----------
   A gold-to-coral sun rises over a minimal dark horizon on the right,
   with soft light beams, a faint perspective grid, the barest skyline
   suggestion, and blurred gradient ribbons sweeping around the headline
   space. Performance notes: the big glow is a pre-blurred radial
   gradient, the beam group is the only CSS-filtered element (static),
   and the ribbon glow is baked into an SVG filter. The only per-frame
   work is transform-only: the ribbon layers get a gentle scroll-driven
   wave and the two glass panes a tiny parallax drift (script.js). */
.hero-bg {
  --horizon: calc(var(--sweep-overlap) + 88px);
  --sun-x: 66%;
}

.hero-sky {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: var(--horizon);
  overflow: hidden;
}

.hero-sun-glow {
  position: absolute;
  left: var(--sun-x);
  bottom: -230px;
  width: 640px;
  height: 640px;
  margin-left: -320px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(244, 168, 58, 0.42),
    rgba(232, 96, 63, 0.18) 52%,
    transparent 72%);
}

.hero-beams {
  position: absolute;
  left: var(--sun-x);
  bottom: 0;
  width: 0;
  filter: blur(16px);
}
.hero-beam {
  position: absolute;
  left: -30px;
  bottom: -50px;
  width: 60px;
  height: 360px;
  background: linear-gradient(0deg, rgba(244, 168, 58, 0.22), transparent 85%);
  transform-origin: bottom center;
}
.hero-beam-a { transform: rotate(-26deg); }
.hero-beam-b { transform: rotate(24deg); opacity: 0.75; }
.hero-beam-c { width: 40px; left: -20px; opacity: 0.9; }

.hero-sun {
  position: absolute;
  left: var(--sun-x);
  bottom: -120px;
  width: 260px;
  height: 260px;
  margin-left: -130px;
  border-radius: 50%;
  background: linear-gradient(180deg,
    #f8c56a 0%,
    var(--gold) 34%,
    var(--coral) 78%,
    #c14a30 100%);
}

.hero-trails {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Ribbon layers that wave on scroll (script.js writes transform only).
   fill-box keeps the tiny rotation pivoting around each ribbon's own
   center instead of the SVG origin. */
.hero-trails .trail-wave {
  will-change: transform;
  transform-box: fill-box;
  transform-origin: center;
}

.hero-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--horizon);
  background:
    linear-gradient(rgba(13, 26, 43, 0) 0%, rgba(13, 26, 43, 0.92) 92%),
    repeating-linear-gradient(90deg, rgba(244, 168, 58, 0.13) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(0deg, rgba(244, 168, 58, 0.11) 0 1px, transparent 1px 26px);
  transform: perspective(340px) rotateX(38deg);
  transform-origin: top center;
}

.hero-skyline {
  position: absolute;
  left: var(--sun-x);
  bottom: var(--horizon);
  width: 360px;
  margin-left: -180px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
}
.hero-skyline i {
  display: block;
  background: #091322;
  opacity: 0.92;
  border-radius: 2px 2px 0 0;
}
.hero-skyline i:nth-child(1) { width: 28px; height: 15px; }
.hero-skyline i:nth-child(2) { width: 15px; height: 30px; }
.hero-skyline i:nth-child(3) { width: 36px; height: 20px; }
.hero-skyline i:nth-child(4) { width: 12px; height: 40px; }
.hero-skyline i:nth-child(5) { width: 26px; height: 26px; }
.hero-skyline i:nth-child(6) { width: 16px; height: 34px; }
.hero-skyline i:nth-child(7) { width: 32px; height: 14px; }

.hero-horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--horizon);
  height: 2px;
  background: linear-gradient(90deg,
    transparent 8%,
    rgba(244, 168, 58, 0.9) 50%,
    rgba(232, 96, 63, 0.9) 78%,
    transparent 97%);
  box-shadow: 0 0 22px rgba(244, 168, 58, 0.55);
}

/* ---------- Frosted glass panes ----------
   Two tilted glass rectangles floating in the atmosphere zone on the
   right, over the ribbons and sun glow, so the blurred colors smear
   through them. The outer .hero-pane is the parallax carrier (script.js
   translates it via the shared .px-el system); the inner .pane-glass
   holds the static tilt so the two transforms never fight. These are
   the only backdrop-filtered elements on the page. Both sit clear of
   the headline, lead, and CTAs at every width where they show. */
.hero-pane { z-index: 1; }
.hero-pane-a {
  top: 12%;
  right: 6%;
  width: clamp(210px, 22vw, 300px);
  height: clamp(140px, 14vw, 190px);
}
.hero-pane-b {
  top: 30%;
  left: 52%;
  width: clamp(140px, 15vw, 180px);
  height: clamp(96px, 10vw, 120px);
}
.pane-glass {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  /* Fallback when backdrop-filter is unsupported: a slightly stronger
     gradient fill so the panes still read as glass. */
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.07) 55%,
    rgba(244, 168, 58, 0.10));
  box-shadow:
    0 24px 48px rgba(6, 13, 24, 0.35),
    0 6px 18px rgba(6, 13, 24, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.hero-pane-a .pane-glass { transform: rotate(-6deg); }
.hero-pane-b .pane-glass { transform: rotate(4deg); }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pane-glass {
    background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.04));
    -webkit-backdrop-filter: blur(9px) saturate(1.1);
    backdrop-filter: blur(9px) saturate(1.1);
  }
}

@media (max-width: 57.49rem) {
  .hero-bg {
    --horizon: calc(var(--sweep-overlap) + 54px);
    --sun-x: 60%;
  }
  .hero-sun-glow { width: 420px; height: 420px; margin-left: -210px; bottom: -160px; }
  .hero-sun { width: 180px; height: 180px; margin-left: -90px; bottom: -84px; }
  .hero-beams { filter: blur(12px); }
  .hero-beam-a,
  .hero-beam-b { display: none; }
  .hero-skyline { display: none; }
  .hero-trails .trail-upper,
  .hero-trails .trail-fine { display: none; }
  /* The hero copy runs nearly full width here, so the glass panes go:
     no safe patch of pure atmosphere left to float them in. */
  .hero-pane { display: none; }
}

.hero-inner {
  position: relative;
  padding-block: clamp(4rem, 10vw, 7.5rem) clamp(6rem, 12vw, 9rem);
}

.hero h1 { color: #fff; }

/* Accent phrase: roman gold with an inline SVG underline. No italics. */
.h1-accent {
  position: relative;
  display: inline-block;
  color: var(--gold);
  font-style: normal;
}
.accent-underline {
  position: absolute;
  left: 0;
  bottom: -0.14em;
  width: 100%;
  height: 0.16em;
  color: var(--gold);
  overflow: visible;
}

.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 1.1rem;
}
.hero .eyebrow, .audit .eyebrow { color: var(--gold); }

.lead {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--text-soft-on-dark);
  max-width: 52ch;
}
.lead strong { color: var(--text-on-dark); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.8rem;
}

.hero-note {
  margin-top: 1rem;
  font-size: 0.92rem;
  color: var(--text-soft-on-dark);
}

.hero-compact .hero-inner {
  padding-block: clamp(3rem, 8vw, 5.5rem) clamp(5.5rem, 10vw, 7.5rem);
}

/* ---------- Sections ---------- */
.section {
  position: relative;
  padding-block: clamp(4rem, 9vw, 7rem);
}
/* Keep copy above the parallax pieces */
.section > .wrap { position: relative; z-index: 1; }

/* Sunrise sweep: incoming section slides up over the previous one as a
   rounded card. Radii vary per section so the page reads as rolling
   dunes rather than stacked blocks. */
.sweep {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--sweep-overlap) * -1);
  border-radius: var(--sweep-r-l, var(--sweep-r)) var(--sweep-r-r, var(--sweep-r)) 0 0;
  box-shadow: 0 -18px 44px rgba(13, 26, 43, 0.1);
  padding-top: calc(clamp(4rem, 9vw, 7rem) + var(--sweep-overlap));
}
.sweep-alt  { --sweep-r-l: calc(var(--sweep-r) * 2.1); }
.sweep-alt2 { --sweep-r-r: calc(var(--sweep-r) * 2.4); }
.sweep-alt3 { --sweep-r-l: calc(var(--sweep-r) * 1.7); --sweep-r-r: calc(var(--sweep-r) * 0.7); }
.site-footer.sweep { padding-top: calc(2.6rem + var(--sweep-overlap)); }

.section-intro {
  max-width: 40rem;
  color: var(--text-soft);
  font-size: 1.12rem;
}

.grid-3 {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (min-width: 48rem) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Problem ---------- */
.problem {
  background:
    radial-gradient(50rem 16rem at 24% 0%, rgba(244, 168, 58, 0.14), transparent 70%),
    var(--paper);
}

.problem-card {
  background: var(--paper-raised);
  border: 1px solid rgba(13, 26, 43, 0.08);
  border-radius: var(--radius);
  padding: 2rem 1.7rem;
  box-shadow: var(--shadow);
}
.problem-card .icon {
  width: 40px;
  height: 40px;
  color: var(--coral);
  margin-bottom: 1rem;
}
.problem-card p { margin-bottom: 0; color: var(--text-soft); }

/* ---------- Pricing ---------- */
.pricing {
  background:
    radial-gradient(46rem 14rem at 78% 0%, rgba(244, 168, 58, 0.18), transparent 70%),
    var(--sand);
}

.price-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
  align-items: start;
}
@media (min-width: 62rem) {
  .price-grid { grid-template-columns: repeat(3, 1fr); }
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper-raised);
  border: 1px solid rgba(13, 26, 43, 0.1);
  border-radius: var(--radius);
  padding: 2.2rem 1.8rem;
  box-shadow: var(--shadow);
}

.price-card-featured {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: var(--shadow-lift);
  color: var(--text-on-dark);
}
.price-card-featured h3 { color: #fff; }
.price-card-featured .price-blurb { color: var(--text-soft-on-dark); }
.price-card-featured .checklist li { color: var(--text-on-dark); }
.price-card-featured .checklist li::before { color: var(--gold); }

@media (min-width: 62rem) {
  .price-card-featured { margin-top: -1rem; padding-block: 2.6rem; }
}

.badge {
  position: absolute;
  top: -0.85rem;
  left: 1.6rem;
  margin: 0;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28rem 0.8rem;
  border-radius: 999px;
}

.price { margin: 0.25rem 0 0.5rem; }
.price .amount {
  font-family: var(--font-display);
  font-size: 2.7rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gold-deep);
}
.price-card-featured .price .amount { color: var(--gold); }
.price .per {
  font-size: 0.95rem;
  color: var(--text-soft);
  font-weight: 600;
}
.price-card-featured .price .per { color: var(--text-soft-on-dark); }

.price-blurb { color: var(--text-soft); min-height: 3.2em; }

.checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.checklist li {
  position: relative;
  padding-left: 1.7em;
  margin-bottom: 0.55em;
}
.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--coral);
}

.price-card .btn { margin-top: auto; align-self: flex-start; }
.price-card-featured .btn { align-self: stretch; text-align: center; }

/* ---------- Process ---------- */
.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 2.5rem 0 0;
  display: grid;
  gap: 2rem;
}
@media (min-width: 48rem) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 75rem) {
  .steps { grid-template-columns: repeat(4, 1fr); }
}

.step { position: relative; padding-top: 0.4rem; }
.step-num {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.9rem;
}
.step p { color: var(--text-soft); margin-bottom: 0; }

/* ---------- Work / portfolio ---------- */
.work {
  background:
    radial-gradient(44rem 14rem at 18% 0%, rgba(232, 96, 63, 0.1), transparent 70%),
    var(--sand);
}

.work-card {
  background: var(--paper-raised);
  border: 1px dashed rgba(13, 26, 43, 0.25);
  border-radius: var(--radius);
  padding: 1.4rem 1.4rem 1.6rem;
}
.work-thumb {
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-bottom: 1.1rem;
}
.work-thumb-a { background: linear-gradient(135deg, #16283f, #0d1a2b); }
.work-thumb-b { background: linear-gradient(135deg, #2a3c55, #16283f); }
.work-thumb-c { background: linear-gradient(135deg, #0d1a2b, #24374f); }
.wire { fill: rgba(233, 238, 245, 0.25); }
.wire-strong { fill: rgba(233, 238, 245, 0.55); }
.wire-accent { fill: rgba(244, 168, 58, 0.75); }
.work-card p { color: var(--text-soft); }
.coming-soon {
  display: inline-block;
  margin-bottom: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}

/* ---------- About ---------- */
.about-inner {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 48rem) {
  .about-inner { grid-template-columns: 200px 1fr; gap: 3.5rem; }
}
.about-portrait { max-width: 180px; }
.portrait-ring { fill: var(--sand); stroke: var(--gold); stroke-width: 3; }
.portrait-mark { stroke: var(--ink); }
.portrait-sun { fill: var(--gold); stroke: none; }
.about p:last-child { margin-bottom: 0; }

/* ---------- Audit / forms ---------- */
.audit {
  background:
    linear-gradient(to bottom, rgba(244, 168, 58, 0.14), transparent 16%),
    radial-gradient(50rem 26rem at 110% 0%, rgba(244, 168, 58, 0.22), transparent 60%),
    var(--ink);
  color: var(--text-on-dark);
}
.audit h2 { color: #fff; }
.audit .audit-copy > p { color: var(--text-soft-on-dark); }
.audit .checklist li::before { color: var(--gold); }
.audit a { color: var(--gold); }
.audit a:hover { color: #ffc46a; }

.audit-inner {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 62rem) {
  .audit-inner { grid-template-columns: 1fr 1.05fr; gap: 4rem; }
}

.portal-section { background: var(--paper); }
.portal-section .audit-copy h2 { color: var(--ink); }
.portal-section .checklist li::before { color: var(--coral); }

.card-form {
  background: var(--paper-raised);
  color: var(--text);
  border-radius: var(--radius);
  padding: 1.8rem 1.5rem 1.6rem;
  box-shadow: var(--shadow-lift);
}
@media (min-width: 48rem) {
  .card-form { padding: 2.2rem 2rem 1.9rem; }
}

.form-title { margin-bottom: 1.2rem; }

.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.hint { font-weight: 400; color: var(--text-soft); }
.req { color: var(--coral); }

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: #fff;
  border: 1.5px solid #c8cfd8;
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
}
.field textarea { resize: vertical; min-height: 5.5em; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}
.field input.is-invalid,
.field select.is-invalid,
.field textarea.is-invalid {
  border-color: var(--coral);
  background: #fff6f4;
}

.field-row {
  display: grid;
  gap: 0 1rem;
}
@media (min-width: 34rem) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

.form-error {
  color: #b3341a;
  background: #fdeeea;
  border: 1px solid #f3c4b8;
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
}
.form-success {
  color: #1c5e34;
  background: #e9f6ee;
  border: 1px solid #bfe3cc;
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
}

.form-privacy {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  color: var(--text-soft);
  text-align: center;
}
.form-privacy a { color: var(--coral); }
.form-privacy a:hover { color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--text-soft-on-dark);
  padding-block: 3rem 2.2rem;
}
.footer-inner {
  display: grid;
  gap: 2rem;
}
@media (min-width: 48rem) {
  .footer-inner {
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap: 2.5rem;
  }
}
.footer-brand p {
  margin: 0.9rem 0 0;
  font-size: 0.95rem;
}
.logo-footer .logo-text { font-size: 1.1rem; }
.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.footer-nav a,
.footer-contact a {
  color: var(--text-on-dark);
  text-decoration: none;
  font-size: 0.95rem;
}
.footer-nav a:hover,
.footer-contact a:hover,
.footer-nav a[aria-current="page"] { color: var(--gold); }
.footer-contact p { margin: 0 0 0.5rem; }
.footer-fine { font-size: 0.85rem; }

@media (min-width: 48rem) {
  .footer-contact { text-align: right; }
}

/* ==========================================================================
   Glow-up layer: glass nav, hero depth, reveals, before/after slider,
   micro-interactions. All motion respects prefers-reduced-motion.
   ========================================================================== */

/* ---------- Utility: visually hidden (also used for the form honeypot) ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Glass nav ---------- */
.site-header {
  transition: background-color 300ms ease, border-color 300ms ease,
              box-shadow 300ms ease;
}
.site-header.is-scrolled {
  background: rgba(13, 26, 43, 0.94);
  border-bottom-color: rgba(244, 168, 58, 0.25);
  box-shadow: 0 10px 30px rgba(13, 26, 43, 0.28);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-scrolled {
    background: rgba(13, 26, 43, 0.72);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
  }
}
@media (max-width: 47.99rem) {
  /* Keep the dropdown panel readable over page content */
  .site-header.is-scrolled .nav-menu { background: rgba(13, 26, 43, 0.96); }
}

/* Animated underline on nav links */
.nav-menu a:not(.btn) {
  position: relative;
}
.nav-menu a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.3em;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms ease;
}
.nav-menu a:not(.btn):hover::after,
.nav-menu a:not(.btn):focus-visible::after,
.nav-menu a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- Hero film grain (capped at 0.05) ---------- */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}

/* ---------- Scroll-triggered reveals (classes added by JS only) ---------- */
@keyframes reveal-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.reveal { opacity: 0; }
.reveal.is-visible {
  opacity: 1;
  animation: reveal-rise 500ms ease-out backwards;
  animation-delay: var(--rv-delay, 0ms);
}

/* ---------- Micro-interactions ---------- */
.problem-card,
.work-card,
.price-card {
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
@media (hover: hover) {
  .problem-card:hover,
  .work-card:hover,
  .price-card:hover {
    transform: translateY(-4px);
    border-color: rgba(244, 168, 58, 0.55);
    box-shadow: var(--shadow-lift), 0 12px 34px rgba(244, 168, 58, 0.2);
  }
  /* Gentle tilt on the featured pricing card */
  .price-card-featured:hover {
    transform: translateY(-4px) rotate(-0.6deg);
    box-shadow: var(--shadow-lift), 0 16px 44px rgba(244, 168, 58, 0.28);
  }
}

/* Button hover sheen */
.btn { position: relative; overflow: hidden; }
.btn-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%);
  transform: translateX(-130%) skewX(-16deg);
  transition: transform 600ms ease;
}
.btn-gold:hover::after,
.btn-gold:focus-visible::after { transform: translateX(130%) skewX(-16deg); }

/* ---------- Before / after comparison slider ---------- */
/* The section itself floats above the pricing sweep so the slider frame can
   straddle the seam between the two sections. */
.compare {
  z-index: 3;
  padding-bottom: clamp(1.25rem, 3vw, 2rem);
}

/* Labels live OUTSIDE the comparison frame in their own row, so they can
   never collide with pane content or the handle at any slider position. */
.compare-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.25rem;
  margin-bottom: 0.7rem;
}
.compare-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
}
.compare-tag-before {
  background: var(--ink);
  color: #fff;
}
.compare-tag-after {
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(244, 168, 58, 0.4);
}

.compare-slider {
  --pos: 55%;
  position: relative;
  z-index: 1;
  margin-top: 0;
  border-radius: var(--radius);
  border: 1px solid rgba(13, 26, 43, 0.14);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}
.compare-frames {
  position: relative;
  height: clamp(330px, 54vw, 460px);
}
.compare-pane {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.compare-before {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 3px;
  transform: translateX(-50%);
  background: var(--gold);
  box-shadow: 0 0 14px rgba(244, 168, 58, 0.65);
  z-index: 3;
  pointer-events: none;
}
.compare-handle {
  position: absolute;
  top: 50%;
  left: var(--pos);
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  border: 2px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 3px 12px rgba(13, 26, 43, 0.4);
  display: grid;
  place-items: center;
  cursor: ew-resize;
}
.compare-handle:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.compare-caption {
  margin: -0.5rem 0 0;
  font-size: 0.92rem;
  color: var(--text-soft);
}

/* -- "Before": believable 2015-era small-business page -- */
.old-site {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #e8e8e8;
  color: #555;
  font-family: Verdana, Geneva, sans-serif;
  font-size: clamp(8px, 1.4vw, 11px);
  line-height: 1.4;
  filter: saturate(0.85);
}
.old-site p { margin: 0; }

/* 1. Blue gradient utility bar */
.old-utility {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  background: linear-gradient(#2b6cb8, #1a4f8f);
  color: #fff;
  font-size: 1em;
  padding: 0.35em 0.9em;
  white-space: nowrap;
  overflow: hidden;
}

/* Boxed white content area centered on the gray page background */
.old-box {
  width: min(92%, 620px);
  margin-inline: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}

/* 2. White header: Times brand + clip-art wrench + big red phone number */
.old-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.5em 0.9em;
  background: #fff;
}
.old-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-size: 1.7em;
  color: #1a3d6e;
  text-shadow: 1px 1px 0 #b8c4d4;
  white-space: nowrap;
}
.old-wrench { width: 1.05em; height: 1.05em; flex-shrink: 0; }
.old-phone {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.35em;
  color: #cc0000;
  white-space: nowrap;
}

/* 3. Glossy beveled nav bar */
.old-nav {
  display: flex;
  background: linear-gradient(#e0e0e0, #a8a8a8);
  border-top: 1px solid #f5f5f5;
  border-bottom: 1px solid #808080;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.95em;
  font-weight: bold;
  text-transform: uppercase;
  color: #333;
  overflow: hidden;
}
.old-nav span {
  padding: 0.45em 0.9em;
  border-left: 1px solid #f2f2f2;
  border-right: 1px solid #909090;
  white-space: nowrap;
}

/* 4. Fake stock-photo slider banner */
.old-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  min-height: 5.5em;
  background: linear-gradient(120deg, #6b6f5e, #8a7f66 45%, #55606b);
  color: #fff;
  padding: 0.6em 0.8em 1.2em;
}
.old-banner-text {
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: bold;
  font-size: 1.8em;
  text-shadow: 2px 2px 3px #000;
  text-align: center;
}
.old-chevron {
  font-size: 1.4em;
  text-shadow: 1px 1px 2px #000;
}
.old-dots {
  position: absolute;
  bottom: 0.5em;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4em;
}
.old-dot {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
}
.old-dot-on { background: #fff; }

/* 5. Content box: maroon Georgia heading + justified Times columns */
.old-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0.7em 0.9em;
}
.old-h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: bold;
  font-size: 1.45em;
  color: #7a1f1f;
  margin-bottom: 0.4em !important;
}
.old-cols {
  display: flex;
  gap: 0.9em;
}
.old-cols p {
  flex: 1;
  font-family: "Times New Roman", Times, serif;
  font-size: 1.05em;
  color: #666;
  text-align: justify;
}
.old-more {
  display: inline-block;
  margin-top: 0.5em;
  color: #0000cc;
  text-decoration: underline;
}

/* 6. Clutter row: payment badges, BBB, hit counter */
.old-clutter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
  padding: 0.45em 0.9em;
  border-top: 1px solid #ddd;
  font-size: 0.95em;
}
.old-badge {
  border: 1px solid #999;
  background: #f4f4f4;
  padding: 0.1em 0.5em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  color: #444;
}
.old-bbb {
  background: #e8eef7;
  color: #1a3d6e;
  font-weight: bold;
}
.old-counter {
  margin-left: auto;
  border: 1px solid #888;
  background: #f8f8f8;
  font-family: "Courier New", monospace;
  padding: 0.1em 0.5em;
  color: #333;
  white-space: nowrap;
}

/* 7. Footer */
.old-footer {
  margin-top: auto;
  background: #4a4a4a;
  color: #ddd;
  text-align: center;
  font-size: 0.9em;
  padding: 0.5em;
}

/* -- "After": genuine 2026-quality small-business page -- */
.new-site {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(28em 14em at 85% -15%, rgba(244, 168, 58, 0.3), transparent 60%),
    var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(9px, 1.6vw, 13px);
  overflow: hidden;
}
.new-site p { margin: 0; }

/* 1. Slim glass nav */
.new-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8em;
  padding: 0.6em 1.2em;
  background: rgba(255, 255, 255, 0.65);
  border-bottom: 1px solid rgba(13, 26, 43, 0.06);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.new-logo {
  font-weight: 700;
  font-size: 1.05em;
  color: var(--ink);
  white-space: nowrap;
}
.new-links {
  display: flex;
  gap: 1.1em;
  color: var(--text-soft);
  font-weight: 600;
  font-size: 0.88em;
}
.new-cta {
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.85em;
  padding: 0.35em 1em;
  border-radius: 999px;
  white-space: nowrap;
}

/* 2. Hero: bold copy on the left, warm "photo" and review card on the right */
.new-hero {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2.4em;
  align-items: center;
  padding: 1em 1.8em 1.3em;
}
.new-copy { min-width: 0; }
.new-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  font-size: 0.72em;
  color: var(--coral);
  margin-bottom: 1.1em !important;
}
.new-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.2em;
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 0.4em !important;
  text-wrap: balance;
}
.new-sub {
  color: var(--text-soft);
  font-size: 0.98em;
  margin-bottom: 1.1em !important;
}
.new-btn {
  display: inline-block;
  align-self: flex-start;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  padding: 0.55em 1.4em;
  border-radius: 999px;
  box-shadow: 0 5px 14px rgba(244, 168, 58, 0.45),
              0 12px 26px rgba(232, 96, 63, 0.16);
}

/* 3. Reviews strip */
.new-stars {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin-top: 1.1em !important;
  color: var(--text);
  font-weight: 600;
  font-size: 0.85em;
}
.new-star-row {
  width: 6.5em;
  height: 1em;
  fill: var(--gold);
  flex-shrink: 0;
}

/* 4. Trust chip row */
.new-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 1em !important;
}
.new-chips span {
  background: var(--paper-raised);
  border: 1px solid rgba(13, 26, 43, 0.14);
  color: var(--text-soft);
  border-radius: 999px;
  padding: 0.28em 0.85em;
  font-size: 0.78em;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(13, 26, 43, 0.06);
}

/* 5. Photo placeholder: warm gradient with a desert sun-and-mountains motif,
   plus a review card overlapping its bottom-left corner */
.new-media {
  position: relative;
  min-width: 0;
  align-self: center;
}
.new-photo {
  position: relative;
  overflow: hidden;
  border-radius: 1.2em;
  aspect-ratio: 5 / 3.4;
  background: linear-gradient(160deg, #ffd08a, var(--gold) 45%, var(--coral));
  box-shadow: 0 10px 26px rgba(232, 96, 63, 0.28),
              0 24px 50px rgba(13, 26, 43, 0.14);
}
.new-photo svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.new-review {
  position: absolute;
  left: -1.8em;
  bottom: -0.9em;
  width: min(82%, 24em);
  background: var(--paper-raised);
  border-radius: 0.9em;
  box-shadow: 0 8px 22px rgba(13, 26, 43, 0.16);
  padding: 0.8em 1em;
}
.new-quote { font-size: 0.85em; line-height: 1.45; color: var(--text); }
.new-name {
  font-size: 0.75em;
  font-weight: 600;
  color: var(--text-soft);
  margin-top: 0.35em !important;
}

/* 6. Pinned mobile-first CTA bar */
.new-sticky {
  background: var(--gold);
  color: var(--ink);
  text-align: center;
  font-weight: 700;
  font-size: 0.9em;
  letter-spacing: 0.02em;
  padding: 0.6em;
  box-shadow: 0 -4px 14px rgba(13, 26, 43, 0.12);
}

/* Narrow screens: fewer, larger elements so the mini pages stay readable */
@media (max-width: 34rem) {
  .new-links { display: none; }
  .new-chips { display: none; }
  .new-sub { display: none; }
  .new-review { display: none; }
  .new-hero {
    grid-template-columns: 1.25fr 0.75fr;
    gap: 1.2em;
    padding: 0.8em 1.1em 1em;
  }
  .new-h1 { font-size: 1.9em; }
  .old-nav span:nth-child(n+4) { display: none; }
  .old-cols p:nth-child(3) { display: none; }
  .old-clutter .old-bbb { display: none; }
}

/* ---------- Large-element scroll parallax ----------
   A handful of big, aria-hidden background pieces (3 to 5 per page):
   a soft gradient orb, an oversized thin-stroke sun arc, a wide blurred
   gradient ribbon, and a ghost browser outline. Each carries a
   data-speed attribute and is translated by script.js at its own rate
   as the page scrolls, at distinct depths (some rates negative).
   Pointer events stay off and everything sits above the section
   backgrounds but below .wrap content. */
.px-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.px-el {
  position: absolute;
  display: block;
  pointer-events: none;
  will-change: transform;
}
.px-el svg { display: block; width: 100%; height: auto; }

/* Soft gradient orb: the blur is pre-baked into the radial gradient */
.px-orb {
  width: clamp(260px, 34vw, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%,
    rgba(244, 168, 58, 0.5),
    rgba(232, 96, 63, 0.24) 52%,
    transparent 72%);
  opacity: 0.6;
}

/* Ghost browser outline with a faint gold tint so it reads clearly */
.px-ghost { width: clamp(300px, 40vw, 480px); }
.px-ghost svg { width: 100%; height: auto; display: block; }

/* Oversized thin-stroke sun arc */
.px-arc { width: clamp(240px, 32vw, 380px); }

/* Full-width gradient ribbon; its glow is baked into the SVG filter */
.px-ribbon {
  left: -4%;
  width: 108%;
  height: 220px;
}
.px-ribbon svg { width: 100%; height: 100%; }

/* ---------- Reduced motion: belt and suspenders ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible { opacity: 1; animation: none; }
  .btn:hover, .btn-gold:hover { transform: none; }
  .btn-gold::after { display: none; }
  .problem-card:hover, .work-card:hover, .price-card:hover,
  .price-card-featured:hover { transform: none; }
  .nav-menu a:not(.btn)::after { transition: none; }
  .px-el { transform: none !important; }
  /* No ribbon wave; the static tilt on .pane-glass is fine to keep. */
  .hero-trails .trail-wave { transform: none !important; }
}