/* ==========================================================================
   CutlipBPM — v2 refresh
   Loaded last. Goal: strip the "AI look" (glow halos, gradient meshes,
   rainbow rims, pulsing everything) and replace it with a calm, premium
   system: one accent, hairline borders, real whitespace, tight type.
   ========================================================================== */

:root {
  --v-ink: #0f172a;
  --v-body: #475569;
  --v-muted: #64748b;
  --v-line: #e6e9ef;
  --v-line-strong: #d7dbe3;
  --v-surface: #ffffff;
  --v-bg: #f7f8fa;
  --v-accent: #2563eb;
  --v-accent-ink: #1d4ed8;
  --v-accent-soft: #eef3ff;
  --v-green: #059669;
  --v-green-soft: #ecfdf5;
  --v-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
  --v-shadow-lift: 0 10px 28px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  --v-r: 16px;
  --v-r-sm: 10px;
}

/* ---------- 1. Canvas: kill the aurora mesh, one clean paper background ---------- */
body, body.home, body:not(.home) { background: var(--v-surface) !important; color: var(--v-body); }
body::before, body.home::before, body:not(.home)::before { display: none !important; background: none !important; }
.hero { background: var(--v-surface) !important; border-bottom: none !important; }
.section, .rv-section, .pricing, .about, .services, .promise, .how, .our-services { background: transparent !important; }
.capstrip, .trust-strip, .contact, .promise, .ab-strip, .ab-skills, .ab-cta, .faq-cta-band {
  background: var(--v-bg) !important;
}

/* ---------- 2. Typography: sharper hierarchy ---------- */
h1, h2, h3, h4 { color: var(--v-ink) !important; letter-spacing: -0.025em; }
h1 { font-weight: 800 !important; letter-spacing: -0.035em !important; line-height: 1.04 !important; }
.hero-copy2 h1 { font-size: clamp(2.5rem, 3.6vw, 3.5rem) !important; }
.hero h1 .accent { color: var(--v-accent) !important; -webkit-text-fill-color: var(--v-accent); background: none !important; }
h2 { font-weight: 800 !important; letter-spacing: -0.03em !important; line-height: 1.12 !important; }
.section-head h2, .ours-head h2, .ap-head h2, .offers-title, .ab-story-copy h2, .contact h2, .rv-section h2 {
  font-size: clamp(1.85rem, 2.6vw, 2.45rem) !important;
}
p, .section-sub, .lede, li { color: var(--v-body); }
.section-sub, .lede { font-size: 1.08rem !important; line-height: 1.65 !important; color: var(--v-muted) !important; max-width: 62ch; }
.section-head.center .section-sub { margin-left: auto; margin-right: auto; }
.eyebrow, .hero-eyebrow, .svc-kicker, .ab-strip-label, .svc-model, .hero-scroll-label, .g-kicker {
  color: var(--v-muted) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  font-size: 0.72rem !important;
  text-transform: uppercase;
  text-shadow: none !important;
}
.section-head { margin-bottom: 44px !important; }
.section { padding: 96px 0 !important; }

/* ---------- 3. Surfaces: hairline cards, one quiet shadow, no halos ---------- */
.rv-section .rv-card, .rv-grid .rv-card, .fr-grid .fr-card, .price-grid .price-card,
.hero-showcase .hero-report, .hero-minis .hero-mini, .rp-cases .rp-case, .ap-shot,
.ab-hero-grid .ab-portrait, .ab-badges .ab-badge, .hero-founder, .hero-info-card,
.feature.svc-card, .svc-card, .promise-item, .cap, .faq-item, .offer-card, .hero-ads-row,
.rp-metric, .intake-price, .contact-form, .services-more, .hero-guarantee, .rev-card {
  background: var(--v-surface) !important;
  border: 1px solid var(--v-line) !important;
  border-radius: var(--v-r) !important;
  box-shadow: var(--v-shadow) !important;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.rv-section .rv-card:hover, .fr-grid .fr-card:hover, .price-grid .price-card:hover,
.hero-showcase .hero-report:hover, .feature.svc-card:hover, .rp-cases .rp-case:hover, .faq-item:hover {
  box-shadow: var(--v-shadow-lift) !important;
  border-color: var(--v-line-strong) !important;
  transform: translateY(-2px);
}
.rev-card { border: none !important; box-shadow: none !important; background: transparent !important; }
.price-card::before, .guarantee-panel::before { display: none !important; }
.hero-report figcaption, .fr-cap { border-top: 1px solid var(--v-line); color: var(--v-muted) !important; }

/* ---------- 4. Header: quiet glass, no sheen, no rainbow rim ---------- */
.site-header, body.home .site-header, body:not(.home) .site-header,
body.home .site-header.over-hero, body.home .site-header:not(.over-hero) {
  background: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  border: 1px solid var(--v-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--v-shadow) !important;
}
.site-header::before, .site-header::after { display: none !important; }
.site-header .nav-links a:not(.btn) { color: var(--v-ink) !important; font-weight: 600 !important; }
.site-header .nav-links a:not(.btn):hover { color: var(--v-accent) !important; }
.site-header .nav-links a:not(.btn)::after { background: var(--v-accent) !important; height: 2px !important; }

/* ---------- 5. Buttons: flat, confident, no molten rims ---------- */
.btn { border-radius: var(--v-r-sm) !important; font-weight: 700 !important; letter-spacing: -0.005em; }
.btn::before, .btn::after, main .btn.btn-primary::before, main .btn.btn-book::before,
.site-header .nav-cta::before, .hero-copy2 .hero-full-ctas .btn::before, .faq-cta .btn::before,
.contact .btn::before, .intake .btn::before, .ab-cta .btn::before, .rp-cta-section .btn::before {
  display: none !important; animation: none !important; content: none !important;
}
.btn-primary, .nav-cta, .hero-copy2 .btn-primary.btn-lg, .btn-block, .offers-btn {
  background: var(--v-accent) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  animation: none !important;
  filter: none !important;
}
.btn-primary:hover, .nav-cta:hover, .offers-btn:hover { background: var(--v-accent-ink) !important; transform: translateY(-1px); }
.btn-book, .hero-copy2 .btn-book, .intake-book {
  background: var(--v-green) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(5, 150, 105, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
.btn-book:hover, .intake-book:hover { background: #047857 !important; filter: none !important; }
.hero-copy2 .btn-book, .hero-copy2 .btn-primary.btn-lg { padding: 15px 26px !important; font-size: 0.98rem !important; }
.rev-pause { border-color: var(--v-line) !important; box-shadow: none !important; }

/* ---------- 6. Hero ---------- */
.hero-full-ctas { margin: 30px 0 26px !important; gap: 12px !important; }
.hero-tools .tool {
  background: var(--v-surface) !important; border: 1px solid var(--v-line) !important;
  color: var(--v-ink) !important; box-shadow: none !important; font-weight: 600 !important;
}
.hero-founder { border-radius: 999px !important; padding: 8px 18px 8px 8px !important; }
.hero-founder-text { color: var(--v-body) !important; }
.hero-info-caret { background: var(--v-bg) !important; border: 1px solid var(--v-line) !important; box-shadow: none !important; }
.hero-scroll { color: var(--v-muted) !important; }
.hero-scroll-chevs svg { filter: none !important; }
.hero-gbp-cap, .hero-ads-cap { color: var(--v-muted) !important; }
.ip17-body { box-shadow: 0 2px 3px rgba(74,32,10,.30), 0 10px 22px rgba(74,32,10,.18), 0 34px 64px rgba(74,32,10,.20), inset 0 1px 1px rgba(255,255,255,.45), inset 0 -2px 3px rgba(0,0,0,.34) !important; }
.ip17-card { animation: none !important; box-shadow: inset 4px 0 0 #10B981, 0 0 0 1px rgba(16,185,129,.26) !important; }

/* guarantee: a clean statement, not a glowing badge */
.hero-guarantee {
  background: var(--v-green-soft) !important;
  border: 1px solid rgba(5, 150, 105, 0.22) !important;
  box-shadow: none !important;
  animation: none !important;
  padding: 16px 20px !important;
}
.hg-badge { background: var(--v-surface) !important; border: 1px solid rgba(5,150,105,.3) !important; box-shadow: none !important; animation: none !important; color: var(--v-green) !important; }
.hg-text { color: #1f2937 !important; }
.hg-text strong { color: var(--v-ink); }
.hg-text em {
  animation: none !important;
  background: none !important;
  color: var(--v-green) !important;
  font-weight: 700;
  padding: 0 !important; margin: 0 !important;
  text-decoration: underline; text-decoration-color: rgba(5,150,105,.45); text-underline-offset: 4px; text-decoration-thickness: 2px;
}

/* ---------- 7. Reviews ---------- */
.rc-text { color: var(--v-ink) !important; font-weight: 500 !important; }
.rc-name { color: var(--v-ink) !important; }
.rc-by { color: var(--v-muted) !important; }
.rc-reply { background: var(--v-bg) !important; color: #166534 !important; border-radius: 10px !important; }
.rv-section .rv-reply, .rv-reply { color: #166534 !important; }
.rv-stars, .rc-stars { color: #f59e0b !important; }

/* ---------- 8. Pricing ---------- */
.exclusive-banner {
  background: var(--v-ink) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--v-r) !important;
  padding: 26px 30px !important;
}
.exclusive-icon { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.14) !important; box-shadow: none !important; }
.exclusive-banner strong, .exclusive-banner b { color: #fff; font-size: 1.32rem !important; }
.exclusive-banner div, .exclusive-banner p { color: rgba(255,255,255,.78) !important; font-size: 0.98rem !important; }
.plan-name { font-size: 1.05rem !important; color: var(--v-ink) !important; }
.plan-badge, .plan-badge-alt { background: var(--v-accent-soft) !important; color: var(--v-accent-ink) !important; border: none !important; }
.amount, .price .amount, .price-card .amount, .price-card-ads .amount { color: var(--v-ink) !important; letter-spacing: -0.04em; }
.period, .price-sub { color: var(--v-muted) !important; }
.price-list li { color: var(--v-body) !important; }
.price-list li::before, .svc-list li::before { color: var(--v-green) !important; }
.price-more { background: var(--v-bg) !important; border: 1px solid var(--v-line) !important; border-radius: 12px !important; color: var(--v-body) !important; }
.price-more strong { color: var(--v-ink) !important; }
.sub-guarantee { color: var(--v-green) !important; }

/* ---------- 9. Google Ads offers + misc panels ---------- */
.offer-card { background: var(--v-ink) !important; border: none !important; box-shadow: none !important; }
.rate-row { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.12) !important; }
.rate-row-best { background: #fff !important; }
.no-setup { animation: none !important; text-shadow: none !important; color: var(--v-green) !important; }
.offers-btn { animation: none !important; }

/* ---------- 10. Steps, services, about, contact ---------- */
.how-num { background: var(--v-ink) !important; box-shadow: none !important; border: 3px solid #fff !important; }
.how-timeline::before, .how-step:not(:last-child)::before { background: var(--v-line-strong) !important; opacity: 1 !important; }
.feature-icon { background: var(--v-accent-soft) !important; color: var(--v-accent-ink) !important; }
.feature:hover .feature-icon { background: var(--v-accent) !important; color: #fff !important; transform: none !important; }
.svc-pin-sub { color: var(--v-muted) !important; }
.services-more { background: var(--v-ink) !important; color: #fff !important; border: none !important; }
.services-more-body, .services-more p { color: rgba(255,255,255,.8) !important; }
.ab-roster li, .ab-skill-list li { background: var(--v-surface) !important; border: 1px solid var(--v-line) !important; color: var(--v-ink) !important; box-shadow: none !important; }
.ab-when { color: var(--v-accent-ink) !important; }
.ab-item { border-bottom: 1px solid var(--v-line) !important; }
.contact input, .contact textarea, .contact select {
  border: 1px solid var(--v-line-strong) !important; border-radius: var(--v-r-sm) !important; background: #fff !important; box-shadow: none !important;
}
.contact input:focus, .contact textarea:focus, .contact select:focus { border-color: var(--v-accent) !important; box-shadow: 0 0 0 4px rgba(37,99,235,.12) !important; }
.contact-form { padding: 28px !important; }
.contact label span { color: var(--v-ink) !important; font-weight: 600; }
.faq-cta { background: var(--v-ink) !important; box-shadow: none !important; border-radius: var(--v-r) !important; }
.faq-cta::before { display: none !important; }
.faq-cta h2 { color: #fff !important; }
.faq-cta p, .faq-cta-phone { color: rgba(255,255,255,.8) !important; }
.faq-group-label { border-bottom-color: var(--v-line) !important; }
.faq-q { color: var(--v-ink) !important; }
.site-footer { background: var(--v-bg) !important; border-top: 1px solid var(--v-line) !important; }
.g-fine summary { color: var(--v-muted) !important; }

/* ---------- 11. Decorative noise: off ---------- */
.hero-overlay, .hero-funnel, .hero-watermark, .promise::before, .contact::before,
.services-more::before, .exclusive-banner::before, .faq-cta::after, .price-card::after {
  display: none !important;
}
[data-reveal], [data-reveal].is-visible { opacity: 1 !important; transform: none !important; }

/* ---------- 12. Mobile refinements ---------- */
@media (max-width: 768px) {
  .section { padding: 44px 0 !important; }
  .section-head { margin-bottom: 20px !important; }
  .hero-copy2 h1 { font-size: 1.85rem !important; }
  .exclusive-banner { padding: 20px 18px !important; }
  .exclusive-banner strong, .exclusive-banner b { font-size: 1.12rem !important; }
  .hero-founder { border-radius: 20px !important; }
}

/* ---------- 13. Contrast tune (WCAG AA) ---------- */
:root { --v-green: #047857; --v-muted: #5b6577; }
.btn-book, .hero-copy2 .btn-book, .intake-book { background: #047857 !important; }
.btn-book:hover, .intake-book:hover { background: #065f46 !important; }
.hg-text em, .sub-guarantee, .no-setup { color: #047857 !important; }
.rc-reply, .rv-section .rv-reply, .rv-reply { color: #14532d !important; }
.rc-reply strong, .rv-reply strong { color: #14532d !important; }
.eyebrow, .hero-eyebrow, .svc-kicker, .ab-strip-label, .svc-model, .hero-scroll-label, .g-kicker { color: #5b6577 !important; }
.offer-card .svc-kicker, .offer-card .svc-model { color: rgba(255,255,255,.82) !important; }
.rc-reply, .rc-reply strong { color: #0b3b20 !important; }
body.home .hero, .hero, .faq-hero { background: #ffffff !important; }
.faq-hero::before, .faq-hero::after { display: none !important; }

/* ==========================================================================
   14. OPENING — logo splash with motion design, then a clean hand-off
   ========================================================================== */
body.home::after { display: none !important; }              /* old veil: off */

#intro {
  position: fixed; inset: 0; z-index: 99999;
  background: #ffffff;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.intro-lockup { display: flex; align-items: center; gap: 20px; will-change: transform, opacity, filter; }
.intro-mark {
  width: 84px; height: 84px; display: block;
  opacity: 0;
  animation: introMarkIn .85s cubic-bezier(.2,.8,.2,1) .12s forwards;
}
@keyframes introMarkIn {
  0%   { opacity: 0; transform: scale(.5) rotate(-14deg) translateY(10px); filter: blur(14px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1) rotate(0) translateY(0); filter: blur(0); }
}
.intro-wordwrap { position: relative; }
.intro-word {
  display: flex;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800; font-size: 3rem; line-height: 1; letter-spacing: -0.035em;
  color: #0f172a;
}
.intro-word span {
  display: inline-block; opacity: 0;
  transform: translateY(22px) rotate(4deg);
  animation: introLetter .6s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(.42s + var(--i) * 45ms);
}
.intro-word span.b { color: #2563eb; }
@keyframes introLetter {
  to { opacity: 1; transform: translateY(0) rotate(0); }
}
.intro-line {
  position: absolute; left: 2px; right: 2px; bottom: -14px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #0f172a 0%, #0f172a 62%, #2563eb 62%, #2563eb 100%);
  transform: scaleX(0); transform-origin: left center;
  animation: introLine .7s cubic-bezier(.2,.8,.2,1) .95s forwards;
}
@keyframes introLine { to { transform: scaleX(1); } }

/* exit: lockup lifts and dissolves, veil clears */
#intro.is-leaving .intro-lockup { animation: introLockupOut .55s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes introLockupOut {
  to { opacity: 0; transform: translateY(-22px) scale(1.06); filter: blur(10px); }
}
#intro.is-leaving { animation: introVeilOut .7s cubic-bezier(.4,0,.2,1) .18s forwards; }
@keyframes introVeilOut { to { opacity: 0; } }

/* while the splash runs, hold the hero cascade back so it starts as the veil clears */
html.intro-run body.home .site-header   { animation-delay: 2.30s !important; }
html.intro-run body.home .hero-eyebrow  { animation-delay: 2.45s !important; }
html.intro-run body.home .hero h1       { animation-delay: 2.55s !important; }
html.intro-run body.home .hero-full-ctas{ animation-delay: 2.71s !important; }
html.intro-run body.home .hero-guarantee{ animation-delay: 2.77s !important; }
html.intro-run body.home .hero-tools    { animation-delay: 2.81s !important; }
html.intro-run body.home .hero-info     { animation-delay: 2.91s !important; }
html.intro-run body.home .hero-ads      { animation-delay: 3.03s !important; }
html.intro-run body.home .hero-gbp      { animation-delay: 2.65s !important; }
html.intro-run body.home .hero-scroll   { animation-delay: 3.20s !important; }
html.intro-run body.home .rev-cf        { animation-delay: 3.30s !important; }
html.intro-run body.home .hero-showcase { animation-delay: 3.40s !important; }
html.intro-run body.home .hero-mini     { animation-delay: 2.7s !important; }
html.intro-run .hg-text em              { animation-delay: 3.6s !important; }
/* the header sits in a 'both' animation, so it stays hidden until its turn */

@media (prefers-reduced-motion: reduce) { #intro { display: none !important; } }
@media (max-width: 768px) {
  .intro-lockup { gap: 14px; }
  .intro-mark { width: 60px; height: 60px; }
  .intro-word { font-size: 2.1rem; }
}

/* ==========================================================================
   15. Round two — badges, exclusivity, CTA motion, crisp service cards
   ========================================================================== */
/* PAY PER CLICK / PAY PER LEAD: plain text, no chip */
.plan-badge, .plan-badge-alt, .price-card-head .plan-badge {
  background: transparent !important; padding: 0 !important; border: none !important;
  color: var(--v-accent-ink) !important; letter-spacing: 0.12em;
}

/* exclusivity: unmistakable */
.exclusive-banner {
  position: relative;
  background: linear-gradient(135deg, #0f172a 0%, #111c3a 70%, #17306b 100%) !important;
  border: 1px solid rgba(96, 165, 250, 0.35) !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
  padding: 34px 38px !important;
  gap: 26px !important;
  max-width: 920px !important;
}
.exclusive-banner::after {
  content: 'Exclusive';
  position: absolute; top: 16px; right: 18px;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: #93c5fd; border: 1px solid rgba(147,197,253,.45); border-radius: 999px; padding: 5px 10px;
  display: block !important;
}
.exclusive-icon {
  width: 60px !important; height: 60px !important; flex: 0 0 60px !important;
  background: var(--v-accent) !important; border: none !important;
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.45) !important; color: #fff !important;
}
.exclusive-banner strong, .exclusive-banner b { color: #ffffff !important; font-size: 1.6rem !important; letter-spacing: -0.02em; margin-bottom: 6px; }
.exclusive-banner div, .exclusive-banner p { color: rgba(255,255,255,.86) !important; font-size: 1.04rem !important; line-height: 1.55 !important; }

/* CTA motion: a slow light sweep, a soft breath on the primary, a nudge on hover */
.hero-copy2 .btn, a.nav-cta, .btn-block, .offers-btn, .intake-book, .faq-cta .btn, .rp-cta-section .btn, .ab-cta .btn {
  position: relative; overflow: hidden !important; isolation: isolate;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, background .2s ease;
}
.hero-copy2 .btn::after, a.nav-cta::after, .btn-block::after, .offers-btn::after, .intake-book::after,
.faq-cta .btn::after, .rp-cta-section .btn::after, .ab-cta .btn::after {
  content: '' !important; display: block !important;
  position: absolute; top: -30%; bottom: -30%; left: -70%; width: 46%;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg); pointer-events: none;
  animation: ctaSheen 4.2s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes ctaSheen { 0%, 58% { left: -70%; } 82%, 100% { left: 140%; } }
.hero-copy2 .btn-primary.btn-lg::after, a.nav-cta::after { animation-delay: 1.3s; }
.hero-copy2 .btn-book { animation: ctaBreathe 3.4s ease-in-out infinite; }
@keyframes ctaBreathe {
  0%, 100% { box-shadow: 0 1px 2px rgba(4,120,87,.25), 0 0 0 0 rgba(4,120,87,0); }
  50%      { box-shadow: 0 8px 22px rgba(4,120,87,.30), 0 0 0 7px rgba(4,120,87,.09); }
}
.hero-copy2 .btn:hover, a.nav-cta:hover, .btn-block:hover, .offers-btn:hover, .intake-book:hover {
  transform: translateY(-2px) scale(1.02) !important;
}
.btn .btn-ico, .btn .btn-ico-cal { transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.btn:hover .btn-ico { transform: translateX(4px); }
.btn:hover .btn-ico-cal { transform: rotate(-8deg) scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .hero-copy2 .btn::after, a.nav-cta::after, .btn-block::after, .offers-btn::after, .intake-book::after { animation: none !important; display: none !important; }
  .hero-copy2 .btn-book { animation: none !important; }
}

/* services coverflow: icons sized to read at every depth */
.feature.svc-card .feature-icon { width: 46px !important; height: 46px !important; border-radius: 12px !important; }
.feature.svc-card .feature-icon svg { width: 22px !important; height: 22px !important; }

/* ---------- 16. Phone number CTAs are real buttons ---------- */
.offers-phone, .faq-cta-phone, .ab-phone, .rp-cta-section .rp-phone {
  display: inline-flex !important; align-items: center; gap: 9px;
  margin-top: 14px;
  padding: 13px 22px !important;
  border-radius: var(--v-r-sm) !important;
  background: #ffffff !important;
  border: 1.5px solid var(--v-line-strong) !important;
  color: var(--v-ink) !important;
  font-weight: 700 !important; font-size: 0.98rem !important;
  text-decoration: none !important;
  box-shadow: var(--v-shadow) !important;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s ease, box-shadow .2s ease;
}
.offers-phone::before, .faq-cta-phone::before, .ab-phone::before {
  content: ''; width: 16px; height: 16px; flex: none;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232563eb"><path d="M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .57 3.6 1 1 0 0 1-.25 1z"/></svg>') center/contain no-repeat;
}
.offers-phone:hover, .faq-cta-phone:hover, .ab-phone:hover {
  transform: translateY(-2px); border-color: var(--v-accent) !important; box-shadow: var(--v-shadow-lift) !important; color: var(--v-accent-ink) !important;
}
/* on the dark FAQ CTA panel, keep the button legible */
.faq-cta .faq-cta-phone { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.28) !important; color: #fff !important; }
.faq-cta .faq-cta-phone:hover { background: #fff !important; color: var(--v-ink) !important; }
.faq-cta .btn { margin-right: 10px; }

/* google-ads offers: no haze behind the panels */
.offers::before, .offers::after, .offer-pair::before, .offer-pair::after { display: none !important; }
.offers { background: transparent !important; box-shadow: none !important; }
.offer-card { box-shadow: var(--v-shadow) !important; }

/* ==========================================================================
   17. ABOUT — editorial layout
   ========================================================================== */
.ab-hero { padding: 120px 0 64px !important; }
@media (min-width: 1100px) {
  .ab-hero-grid { grid-template-columns: 340px minmax(0, 1fr) 320px !important; gap: 56px !important; align-items: start !important; }
}
/* portrait: photo-first, no card chrome */
.ab-hero-grid .ab-portrait {
  background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important;
}
.ab-portrait img {
  width: 100% !important; aspect-ratio: 4 / 5 !important; object-fit: cover !important; object-position: center 20% !important;
  border-radius: 22px !important; box-shadow: 0 24px 50px rgba(15, 23, 42, 0.16) !important;
  display: block !important; margin: 0 !important;
}
.ab-portrait-meta { padding: 16px 4px 0 !important; text-align: left !important; }
.ab-portrait-meta strong { display: block; font-size: 1.15rem !important; color: var(--v-ink) !important; margin-bottom: 4px; }
.ab-portrait-meta span { display: block; font-size: 0.9rem !important; color: var(--v-muted) !important; line-height: 1.45; }
.ab-portrait-loc { color: var(--v-accent-ink) !important; font-weight: 600 !important; margin-top: 4px; }

/* intro */
.ab-intro h1 { font-size: clamp(2.6rem, 4vw, 3.6rem) !important; margin: 10px 0 18px !important; }
.ab-intro .ab-lede { font-size: 1.28rem !important; line-height: 1.5 !important; color: var(--v-ink) !important; font-weight: 600 !important; max-width: 34ch; margin-bottom: 22px !important; }
.ab-intro p { font-size: 1.05rem !important; line-height: 1.7 !important; color: var(--v-body) !important; max-width: 62ch; }
.ab-intro p strong { color: var(--v-ink) !important; }
.ab-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 30px !important; }
.ab-hero-cta .ab-phone { margin-top: 0 !important; }

/* badges -> stat tiles */
.ab-badges { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
.ab-badges .ab-badge {
  background: var(--v-bg) !important; border: 1px solid transparent !important; box-shadow: none !important;
  border-radius: 14px !important; padding: 18px 16px !important; border-left: none !important;
  transition: background .2s ease, border-color .2s ease;
}
.ab-badges .ab-badge:hover { background: #fff !important; border-color: var(--v-line) !important; }
.ab-badge strong { display: block; font-size: 1.05rem !important; color: var(--v-ink) !important; letter-spacing: -0.015em; margin-bottom: 6px; }
.ab-badge span { font-size: 0.86rem !important; color: var(--v-muted) !important; line-height: 1.45 !important; }
.ab-badges .ab-badge:first-child { grid-column: 1 / -1; background: var(--v-ink) !important; }
.ab-badges .ab-badge:first-child strong { color: #fff !important; font-size: 1.2rem !important; }
.ab-badges .ab-badge:first-child span { color: rgba(255,255,255,.75) !important; }
.ab-badges .ab-badge:first-child::before {
  content: 'Eagle Scout · National Award'; display: block; font-size: 0.62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #93c5fd; margin-bottom: 8px;
}

/* trusted-by strip */
.ab-strip { padding: 34px 0 !important; border-top: 1px solid var(--v-line) !important; border-bottom: 1px solid var(--v-line) !important; }
.ab-roster li { padding: 9px 16px !important; font-weight: 600 !important; }

/* background: a real timeline */
.ab-story { padding: 96px 0 !important; }
.ab-story-copy h2 { font-size: clamp(2rem, 3vw, 2.7rem) !important; }
.ab-story-copy p { font-size: 1.05rem !important; line-height: 1.7 !important; color: var(--v-body) !important; }
.ab-track { position: relative; padding-left: 26px !important; border-top: none !important; }
.ab-track::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--v-line-strong); border-radius: 2px; }
.ab-track .ab-item { position: relative; border-bottom: none !important; padding: 14px 0 18px !important; grid-template-columns: 96px 1fr !important; column-gap: 18px !important; }
.ab-track .ab-item::before { content: ''; position: absolute; left: -24px; top: 22px; width: 10px; height: 10px; border-radius: 50%; background: var(--v-accent); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--v-line-strong); }
.ab-track .ab-item:first-child::before { background: var(--v-green); }
.ab-when { font-size: 0.68rem !important; letter-spacing: .12em; color: var(--v-accent-ink) !important; padding-top: 4px !important; }
.ab-item strong { font-size: 1.05rem !important; color: var(--v-ink) !important; }
.ab-item div { font-size: 0.96rem !important; line-height: 1.6 !important; color: var(--v-body) !important; }

/* skills + closing */
.ab-skills { padding: 48px 0 !important; }
.ab-cta { padding: 88px 0 !important; background: var(--v-ink) !important; }
.ab-cta h2, .ab-cta p { color: #fff !important; }
.ab-cta p { color: rgba(255,255,255,.75) !important; }
.ab-cta .ab-phone { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.28) !important; color: #fff !important; }
.ab-cta .ab-phone:hover { background: #fff !important; color: var(--v-ink) !important; }

@media (max-width: 768px) {
  .ab-hero { padding: 84px 0 34px !important; }
  .ab-portrait img { aspect-ratio: 1 / 1 !important; max-width: 260px; margin: 0 auto !important; }
  .ab-portrait-meta { text-align: center !important; }
  .ab-badges { grid-template-columns: 1fr 1fr !important; }
  .ab-track .ab-item { grid-template-columns: 1fr !important; }
  .ab-track { padding-left: 22px !important; }
}
.ab-hero, .ab-hero::before, .ab-hero::after { background: #ffffff !important; }
.ab-hero::before, .ab-hero::after { display: none !important; }
.hero-scroll, .hero-scroll-label { color: #4b5563 !important; }
.rc-by, .rc-meta .rc-by { color: #3f4756 !important; }

/* ==========================================================================
   18. CTAs — done properly. Depth from a soft colour shadow + gradient,
   a light sweep every few seconds, a lift on hover. (Everything !important
   so nothing earlier can flatten it again.)
   ========================================================================== */
.skip-link:not(:focus) { box-shadow: none !important; }

.hero-copy2 .hero-full-ctas .btn, a.nav-cta, .btn-block, .offers-btn, .intake-book,
.faq-cta .btn, .rp-cta-section .btn, .ab-cta .btn, .contact .btn, .rv-more .btn, .how-cta .btn {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  border: none !important;
  border-radius: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  color: #fff !important;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, filter .2s ease !important;
  will-change: transform;
}
.hero-copy2 .hero-full-ctas .btn { padding: 17px 30px !important; font-size: 1.04rem !important; gap: 10px !important; }
a.nav-cta { padding: 11px 20px !important; font-size: 0.92rem !important; border-radius: 11px !important; }

/* blue */
a.nav-cta, .btn-block, .offers-btn, .faq-cta .btn, .rp-cta-section .btn, .ab-cta .btn, .contact .btn,
.rv-more .btn, .how-cta .btn, .hero-copy2 .btn-primary.btn-lg {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 8px 20px -6px rgba(37, 99, 235, .55), 0 2px 4px rgba(15, 23, 42, .08) !important;
}
/* green */
.hero-copy2 .btn-book, .intake-book {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 8px 20px -6px rgba(5, 150, 105, .55), 0 2px 4px rgba(15, 23, 42, .08) !important;
}
/* hover / active */
.hero-copy2 .hero-full-ctas .btn:hover, a.nav-cta:hover, .btn-block:hover, .offers-btn:hover, .intake-book:hover,
.faq-cta .btn:hover, .rp-cta-section .btn:hover, .ab-cta .btn:hover, .contact .btn:hover, .rv-more .btn:hover, .how-cta .btn:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.06) !important;
}
.hero-copy2 .btn-primary.btn-lg:hover, a.nav-cta:hover, .btn-block:hover, .offers-btn:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 14px 28px -8px rgba(37, 99, 235, .6), 0 3px 6px rgba(15, 23, 42, .08) !important;
}
.hero-copy2 .btn-book:hover, .intake-book:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 14px 28px -8px rgba(5, 150, 105, .6), 0 3px 6px rgba(15, 23, 42, .08) !important;
}
.hero-copy2 .hero-full-ctas .btn:active, a.nav-cta:active { transform: translateY(0) scale(.99) !important; }

/* light sweep */
.hero-copy2 .hero-full-ctas .btn::after, a.nav-cta::after, .btn-block::after, .offers-btn::after, .intake-book::after,
.faq-cta .btn::after, .rp-cta-section .btn::after, .ab-cta .btn::after, .contact .btn::after, .rv-more .btn::after, .how-cta .btn::after {
  content: '' !important; display: block !important;
  position: absolute !important; top: -40% !important; bottom: -40% !important; left: -80% !important; width: 40% !important;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 100%) !important;
  transform: skewX(-20deg) !important; pointer-events: none !important; z-index: 1 !important;
  animation: v2Sheen 5.2s cubic-bezier(.4,0,.2,1) infinite !important;
  opacity: 1 !important; filter: none !important; inset: auto !important; padding: 0 !important; border-radius: 0 !important;
  -webkit-mask: none !important; mask: none !important;
}
@keyframes v2Sheen { 0%, 62% { left: -80%; } 88%, 100% { left: 150%; } }
.hero-copy2 .btn-primary.btn-lg::after { animation-delay: 1.4s !important; }
a.nav-cta::after { animation-delay: 2.6s !important; }
.hero-copy2 .hero-full-ctas .btn > *, a.nav-cta > * { position: relative; z-index: 2; }

/* icon nudge */
.btn .btn-ico, .btn .btn-ico-cal { transition: transform .22s cubic-bezier(.2,.8,.2,1) !important; }
.btn:hover .btn-ico { transform: translateX(4px) !important; }
.btn:hover .btn-ico-cal { transform: rotate(-8deg) scale(1.1) !important; }

/* kill the old breathe experiment */
.hero-copy2 .btn-book { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hero-copy2 .hero-full-ctas .btn::after, a.nav-cta::after, .btn-block::after, .offers-btn::after, .intake-book::after,
  .faq-cta .btn::after, .rp-cta-section .btn::after, .ab-cta .btn::after, .contact .btn::after, .rv-more .btn::after, .how-cta .btn::after { animation: none !important; display: none !important; }
}
@media (max-width: 768px) {
  .hero-copy2 .hero-full-ctas .btn { padding: 15px 22px !important; font-size: 0.98rem !important; }
}

/* guarantee band: restore its entrance (the glow-kill above had also killed the fade-in) */
body.home .hero-guarantee { animation: hgIn .6s cubic-bezier(.22,.8,.3,1) .72s both !important; }
html.intro-run body.home .hero-guarantee { animation-delay: 2.77s !important; }
html.intro-done body.home .hero-guarantee, body:not(.home) .hero-guarantee { }
@media (prefers-reduced-motion: reduce) { body.home .hero-guarantee { animation: none !important; } }

/* ==========================================================================
   19. LOGO REVEAL v2 — motion-logo treatment
   elastic mark-in with a light burst, a masked shine pass across the
   monogram, letters that overshoot into place, a drawn rule, a tagline,
   then a cinematic upward wipe out.
   ========================================================================== */
.intro-markwrap { position: relative; width: 84px; height: 84px; flex: none; }
.intro-mark {
  position: relative; z-index: 2;
  animation: introMarkIn 1.05s cubic-bezier(.34,1.56,.64,1) .08s forwards !important;
}
@keyframes introMarkIn {
  0%   { opacity: 0; transform: scale(.28) rotate(-22deg); filter: blur(10px); }
  45%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0); }
}
.intro-burst {
  position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; z-index: 1;
  border-radius: 50%; transform: translate(-50%,-50%) scale(.2); opacity: 0;
  background: radial-gradient(circle, rgba(37,99,235,.35) 0%, rgba(37,99,235,.12) 45%, rgba(37,99,235,0) 70%);
  animation: introBurst 1.1s cubic-bezier(.2,.8,.2,1) .18s forwards;
}
@keyframes introBurst {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.2); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(3.2); }
}
.intro-shine {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  -webkit-mask: url('assets/logo-mark.png?v=2') center / contain no-repeat;
          mask: url('assets/logo-mark.png?v=2') center / contain no-repeat;
  background: linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 65%);
  background-size: 260% 100%; background-repeat: no-repeat; background-position: 160% 0;
  animation: introShine .85s cubic-bezier(.4,0,.2,1) 1.15s forwards;
}
@keyframes introShine { from { background-position: 160% 0; } to { background-position: -110% 0; } }

.intro-word span {
  animation: introLetter2 .62s cubic-bezier(.34,1.4,.64,1) forwards !important;
  animation-delay: calc(.5s + var(--i) * 42ms) !important;
  transform: translateY(26px) rotate(3deg);
}
@keyframes introLetter2 { to { opacity: 1; transform: translateY(0) rotate(0); } }
.intro-line { animation-delay: 1.05s !important; }
.intro-tag {
  margin-top: 26px; text-align: center;
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #64748b;
  opacity: 0; transform: translateY(8px);
  animation: introTag .6s cubic-bezier(.2,.8,.2,1) 1.35s forwards;
}
@keyframes introTag { to { opacity: 1; transform: translateY(0); } }

/* exit: lockup lifts + dissolves; the veil wipes upward like a curtain */
#intro.is-leaving .intro-lockup { animation: introLockupOut .5s cubic-bezier(.4,0,.2,1) forwards !important; }
#intro.is-leaving {
  animation: introVeilWipe .75s cubic-bezier(.65,0,.15,1) .22s forwards !important;
}
@keyframes introVeilWipe {
  0%   { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 100% 0); opacity: 1; }
}

/* hero cascade shifts with the longer reveal */
html.intro-run body.home .site-header   { animation-delay: 2.62s !important; }
html.intro-run body.home .hero-eyebrow  { animation-delay: 2.78s !important; }
html.intro-run body.home .hero h1       { animation-delay: 2.88s !important; }
html.intro-run body.home .hero-full-ctas{ animation-delay: 3.04s !important; }
html.intro-run body.home .hero-guarantee{ animation-delay: 3.10s !important; }
html.intro-run body.home .hero-tools    { animation-delay: 3.14s !important; }
html.intro-run body.home .hero-info     { animation-delay: 3.24s !important; }
html.intro-run body.home .hero-ads      { animation-delay: 3.36s !important; }
html.intro-run body.home .hero-gbp      { animation-delay: 2.98s !important; }
html.intro-run body.home .hero-scroll   { animation-delay: 3.52s !important; }
html.intro-run body.home .rev-cf        { animation-delay: 3.62s !important; }
html.intro-run body.home .hero-showcase { animation-delay: 3.72s !important; }
html.intro-run body.home .hero-mini     { animation-delay: 3.0s !important; }
@media (max-width: 768px) {
  .intro-markwrap { width: 60px; height: 60px; }
  .intro-burst { width: 60px; height: 60px; }
  .intro-tag { font-size: .62rem; letter-spacing: .14em; margin-top: 20px; }
}

/* ==========================================================================
   20. LOGO REVEAL — stacked, centred, and more distinctive
   ========================================================================== */
.intro-lockup { flex-direction: column !important; align-items: center !important; gap: 22px !important; text-align: center; }
.intro-markwrap { width: 104px !important; height: 104px !important; display: grid; place-items: center; }
.intro-mark { width: 84px !important; height: 84px !important; }
.intro-burst { width: 104px !important; height: 104px !important; }

/* a ring that draws itself around the mark, then lets go */
.intro-ring {
  position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); z-index: 1;
  transform: rotate(-90deg); opacity: 0;
  animation: introRingIn 1s cubic-bezier(.4,0,.2,1) .3s forwards, introRingOut .5s ease 1.7s forwards;
}
.intro-ring circle { stroke-dasharray: 100; stroke-dashoffset: 100; animation: introRingDraw 1s cubic-bezier(.4,0,.2,1) .3s forwards; }
@keyframes introRingDraw { to { stroke-dashoffset: 0; } }
@keyframes introRingIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes introRingOut { to { opacity: 0; transform: rotate(-90deg) scale(1.18); } }

/* wordmark: centred, tracks in from wide, BPM in a blue gradient */
.intro-wordwrap { display: flex; flex-direction: column; align-items: center; }
.intro-word {
  justify-content: center !important; font-size: 3.3rem !important;
  letter-spacing: .28em !important;
  animation: introTrack 1.1s cubic-bezier(.2,.8,.2,1) .5s forwards;
}
@keyframes introTrack { to { letter-spacing: -0.035em; } }
.intro-word span.b {
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 55%, #60a5fa 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.intro-word span { animation-delay: calc(.55s + var(--i) * 48ms) !important; }
.intro-line {
  position: static !important; display: block; width: 72px; height: 3px; margin: 14px auto 0;
  transform-origin: center !important;
  background: linear-gradient(90deg, #0f172a 0 62%, #2563eb 62% 100%) !important;
}
.intro-tag { margin-top: 16px !important; }
@media (max-width: 768px) {
  .intro-markwrap { width: 80px !important; height: 80px !important; }
  .intro-mark { width: 64px !important; height: 64px !important; }
  .intro-word { font-size: 2.2rem !important; }
}

/* ==========================================================================
   21. LOGO REVEAL — mark and wordmark side by side, on one true centreline
   (the rule + tagline sit underneath the pair, so they no longer push the
   word up above the logo)
   ========================================================================== */
.intro-lockup {
  display: grid !important;
  grid-template-columns: auto auto;
  grid-template-areas: "m w" "l l" "t t";
  column-gap: 22px; row-gap: 0;
  align-items: center !important; justify-items: center;
  text-align: center;
}
.intro-wordwrap { display: contents !important; }
.intro-markwrap { grid-area: m; }
.intro-word { grid-area: w; align-self: center; line-height: 1 !important; }
.intro-line { grid-area: l; margin: 18px auto 0 !important; width: 96px !important; }
.intro-tag  { grid-area: t; margin-top: 14px !important; }
@media (max-width: 768px) {
  .intro-lockup { column-gap: 14px; }
}

/* ==========================================================================
   22. LOGO REVEAL — tighter, faster (whole thing ≈1.9s), snappier hand-off
   ========================================================================== */
.intro-lockup { column-gap: 16px !important; }
.intro-mark { animation: introMarkIn .7s cubic-bezier(.34,1.56,.64,1) .05s forwards !important; }
.intro-burst { animation: introBurst .8s cubic-bezier(.2,.8,.2,1) .1s forwards !important; }
.intro-ring { animation: introRingIn .5s cubic-bezier(.4,0,.2,1) .18s forwards, introRingOut .35s ease 1.1s forwards !important; }
.intro-ring circle { animation: introRingDraw .6s cubic-bezier(.4,0,.2,1) .18s forwards !important; }
.intro-word {
  letter-spacing: .10em !important;
  animation: introTrack .6s cubic-bezier(.2,.8,.2,1) .3s forwards !important;
}
.intro-word span {
  animation: introLetter2 .45s cubic-bezier(.34,1.4,.64,1) forwards !important;
  animation-delay: calc(.28s + var(--i) * 30ms) !important;
}
.intro-shine { animation: introShine .6s cubic-bezier(.4,0,.2,1) .72s forwards !important; }
.intro-line  { margin: 10px auto 0 !important; width: 72px !important; animation: introLine .45s cubic-bezier(.2,.8,.2,1) .72s forwards !important; }
.intro-tag   { margin-top: 8px !important; animation: introTag .4s cubic-bezier(.2,.8,.2,1) .88s forwards !important; }

/* exit: quick */
#intro.is-leaving .intro-lockup { animation: introLockupOut .32s cubic-bezier(.4,0,.2,1) forwards !important; }
#intro.is-leaving { animation: introVeilWipe .5s cubic-bezier(.65,0,.15,1) .08s forwards !important; }

/* hero cascade: right behind the curtain, tight stagger */
html.intro-run body.home .site-header   { animation-delay: 1.50s !important; }
html.intro-run body.home .hero-eyebrow  { animation-delay: 1.60s !important; }
html.intro-run body.home .hero h1       { animation-delay: 1.66s !important; }
html.intro-run body.home .hero-full-ctas{ animation-delay: 1.76s !important; }
html.intro-run body.home .hero-guarantee{ animation-delay: 1.82s !important; }
html.intro-run body.home .hero-tools    { animation-delay: 1.86s !important; }
html.intro-run body.home .hero-info     { animation-delay: 1.93s !important; }
html.intro-run body.home .hero-ads      { animation-delay: 2.02s !important; }
html.intro-run body.home .hero-gbp      { animation-delay: 1.72s !important; }
html.intro-run body.home .hero-mini     { animation-delay: 1.78s !important; }
html.intro-run body.home .hero-scroll   { animation-delay: 2.10s !important; }
html.intro-run body.home .rev-cf        { animation-delay: 2.16s !important; }
html.intro-run body.home .hero-showcase { animation-delay: 2.22s !important; }
/* and the cascade itself is snappier */
html.intro-run body.home .site-header, html.intro-run body.home .hero-eyebrow, html.intro-run body.home .hero h1,
html.intro-run body.home .hero-full-ctas, html.intro-run body.home .hero-guarantee, html.intro-run body.home .hero-tools,
html.intro-run body.home .hero-info, html.intro-run body.home .hero-ads, html.intro-run body.home .hero-mini { animation-duration: .45s !important; }
html.intro-run body.home .hero-scroll, html.intro-run body.home .rev-cf, html.intro-run body.home .hero-showcase { animation-duration: .5s !important; }

/* ==========================================================================
   23. LOGO REVEAL — tight wordmark + true crossfade (logo out = site in)
   ========================================================================== */
.intro-word { letter-spacing: .03em !important; animation: introTrack2 .5s cubic-bezier(.2,.8,.2,1) .3s forwards !important; }
@keyframes introTrack2 { to { letter-spacing: -0.045em; } }
.intro-word span { animation-delay: calc(.26s + var(--i) * 26ms) !important; }

/* exit is a crossfade: lockup dissolves while the veil fades away at the same time */
#intro.is-leaving .intro-lockup { animation: introLockupOut .45s cubic-bezier(.4,0,.2,1) forwards !important; }
#intro.is-leaving { animation: introVeilFade .55s cubic-bezier(.4,0,.2,1) 0s forwards !important; clip-path: none !important; }
@keyframes introVeilFade { to { opacity: 0; } }

/* the site rises in underneath during that same window */
html.intro-run body.home .site-header   { animation-delay: 1.36s !important; }
html.intro-run body.home .hero-eyebrow  { animation-delay: 1.40s !important; }
html.intro-run body.home .hero h1       { animation-delay: 1.44s !important; }
html.intro-run body.home .hero-full-ctas{ animation-delay: 1.50s !important; }
html.intro-run body.home .hero-guarantee{ animation-delay: 1.54s !important; }
html.intro-run body.home .hero-tools    { animation-delay: 1.58s !important; }
html.intro-run body.home .hero-info     { animation-delay: 1.63s !important; }
html.intro-run body.home .hero-ads      { animation-delay: 1.70s !important; }
html.intro-run body.home .hero-gbp      { animation-delay: 1.46s !important; }
html.intro-run body.home .hero-mini     { animation-delay: 1.48s !important; }
html.intro-run body.home .hero-scroll   { animation-delay: 1.74s !important; }
html.intro-run body.home .rev-cf        { animation-delay: 1.78s !important; }
html.intro-run body.home .hero-showcase { animation-delay: 1.82s !important; }
/* pull the rule + tagline up snug under the wordmark */
.intro-line { margin: -14px auto 0 !important; }
.intro-tag  { margin-top: 7px !important; }
.intro-lockup { row-gap: 0 !important; column-gap: 16px !important; }
.intro-line { margin: -12px auto 0 !important; }
/* lockup is just mark + wordmark now */
.intro-lockup { grid-template-areas: "m w" !important; }
.intro-line, .intro-tag { display: none !important; }
/* intro lockup sits 65% up the screen (35% from the top) instead of dead centre */
#intro { align-items: flex-start !important; }
#intro .intro-lockup { position: absolute; top: 35vh; left: 50%; transform: translate(-50%, -50%); }
#intro.is-leaving .intro-lockup { animation: introLockupOut2 .45s cubic-bezier(.4,0,.2,1) forwards !important; }
@keyframes introLockupOut2 { to { opacity: 0; transform: translate(-50%, calc(-50% - 22px)) scale(1.06); filter: blur(10px); } }
#intro .intro-lockup { top: 41vh !important; }

/* ==========================================================================
   24. REVIEWS CAROUSEL — smooth on phones
   The card "surfaces" rule above gave .rev-card a CSS transition on
   transform; that fought the per-frame JS motion and made cards judder and
   tear. No transition here, GPU-composited, and the stage clips its edges.
   ========================================================================== */
.rev-card {
  transition: none !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
  contain: layout paint;
}
.rev-cf { overflow: hidden !important; }
@media (max-width: 768px) {
  .rev-cf { height: 300px !important; }
  .rev-card { width: min(300px, 86vw) !important; padding: 16px 16px !important; }
}

/* ---------- Meta Ads joins the line-up ---------- */
/* homepage pricing: four cards */
@media (min-width: 1200px) {
  .price-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; max-width: 1400px !important; gap: 18px !important; }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 940px !important; }
}
/* google-ads offers: three panels */
@media (min-width: 1100px) {
  .offer-pair { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; max-width: 1400px !important; gap: 18px !important; }
}
@media (min-width: 781px) and (max-width: 1099px) {
  .offer-pair { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
.hero-tools .tool svg { width: 20px; height: 20px; flex: none; }

/* ---------- Meta Ads page ---------- */
.offer-pair.offer-solo { grid-template-columns: minmax(0, 560px) !important; justify-content: center !important; }
.offers-xlink { margin: 18px 0 0 !important; font-size: .95rem !important; color: var(--v-muted) !important; text-align: center; }
.offers-xlink a { color: var(--v-accent-ink) !important; font-weight: 700; }
/* six nav links: a touch tighter on laptop widths */
@media (min-width: 1025px) and (max-width: 1280px) {
  .site-header .nav-links { gap: 24px !important; }
  .site-header .nav-links a:not(.btn) { font-size: .88rem !important; }
}