/* Hero */
.hero { position: relative; overflow: hidden; padding: var(--space-4xl) 0 var(--space-3xl); }
.hero--full { padding: 0; min-height: 70svh; display: grid; place-items: center; }
.hero--full .hero-video-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.05) brightness(.92); }
.hero--full .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in oklab, var(--color-bg) 35%, transparent), color-mix(in oklab, var(--color-bg) 60%, transparent)); pointer-events: none; }
.hero--full .hero-center { position: relative; z-index: 1; text-align: center; width: min(90vw, 900px); margin: 0 auto; }
.hero--full .hero-actions { justify-content: center; }
.hero--full .hero-trust { justify-content: center; }
/* Ensure header dropdowns render above hero content */
.hero, .video-hero { isolation: isolate; }

/* Ensure hero subtitle is centered with readable width */
.hero-subtitle { text-align: center; margin-left: auto; margin-right: auto; max-width: 800px; }

.hero--center { padding: 0; min-height: calc(100svh - var(--header-h)); display: flex; align-items: center; justify-content: center; }
.hero-inner--center { width: 100%; text-align: center; }
.hero-content--center { position: static; transform: none; text-align: center; width: min(90vw, 900px); margin: 0 auto; }
.hero-content--center .hero-actions { justify-content: center; }
.hero-content--center .hero-trust { justify-content: center; }
.hero-video { position: absolute; inset: 0; z-index: -1; }
.hero-video-el { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1) contrast(1.05) brightness(0.9); }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in oklab, var(--color-bg) 35%, transparent), color-mix(in oklab, var(--color-bg) 65%, transparent)); }
@media (prefers-reduced-motion: reduce) {
  .hero-video-el { display: none; }
}
.hero-inner { display: grid; gap: var(--space-2xl); align-items: center; }
.hero-content { display: grid; gap: var(--space); }
.hero-title { font-family: var(--font-display); font-weight: 700; }
.hero-subtitle { font-size: var(--font-size-lg); max-width: 62ch; line-height: 1.9; margin-left: auto; margin-right: auto; color: #0b1220; }
[data-theme="dark"] .hero-subtitle { color: #e6edf3; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--space); }
/* Enforce primary then ghost order across hero/CTA areas */
.hero-actions .button.button-primary { order: 1; }
.hero-actions .button.button-ghost { order: 2; }
.cta-actions .button.button-primary { order: 1; }
.cta-actions .button.button-ghost { order: 2; }
.steps-cta .button.button-primary { order: 1; }
.steps-cta .button.button-ghost { order: 2; }
.hero-trust { display: flex; gap: 0.5rem; margin-top: var(--space); flex-wrap: wrap; }
.hero-media { display: none; }

.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.bg-gradient { position: absolute; inset: -20%; background: radial-gradient(800px 600px at 20% -10%, color-mix(in oklab, var(--color-accent-600) 24%, transparent), transparent 60%), radial-gradient(800px 600px at 90% 10%, color-mix(in oklab, var(--color-brand-600) 28%, transparent), transparent 60%); filter: blur(20px); opacity: .7; }
.bg-orb { position: absolute; width: 180px; height: 180px; border-radius: 50%; filter: blur(8px); opacity: .6; animation: float 8s ease-in-out infinite; }
.orb-1 { background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--color-accent-600) 90%, transparent), color-mix(in oklab, var(--color-accent-600) 20%, transparent)); top: 10%; left: 6%; }
.orb-2 { background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--color-brand-600) 90%, transparent), color-mix(in oklab, var(--color-brand-600) 20%, transparent)); bottom: 12%; right: 8%; animation-duration: 10s; }
.orb-3 { background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--color-brand-700) 90%, transparent), color-mix(in oklab, var(--color-brand-700) 20%, transparent)); top: 40%; right: 30%; animation-duration: 12s; }

.device-mockup { width: 220px; height: 440px; border-radius: 32px; background: linear-gradient(180deg, #0c1219, #0a0f15); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 -10px 40px rgba(255,255,255,.04), var(--shadow-lg); padding: 10px; }
.device-screen { width: 100%; height: 100%; border-radius: 24px; background: linear-gradient(135deg, #0f1720, #0b1218); position: relative; overflow: hidden; }
.device-screen.shimmer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.06) 40%, transparent 80%); transform: translateX(-100%); animation: shimmer 3.2s ease-in-out infinite; }

@media (min-width: 960px) {
  .hero-inner { grid-template-columns: 1.2fr 1fr; }
  .hero-media { display: block; }
}

/* Cards */
.cards-grid { display: grid; gap: var(--space); grid-template-columns: repeat(1, 1fr); }
.card { background: linear-gradient(180deg, color-mix(in oklab, var(--color-panel) 98%, transparent), color-mix(in oklab, var(--color-panel) 96%, transparent)); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space); box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in oklab, var(--color-brand-600) 35%, var(--color-border)); }
.card-media { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); object-fit: cover; margin-bottom: .75rem; border: 1px solid var(--color-border); }
/* Make service cards square without affecting other image uses */
.service-card .card-media { aspect-ratio: 1 / 1; }
.card-icon { font-size: 1.5rem; }
.card-title { margin: var(--space-xs) 0; }
.card-link { display: inline-flex; gap: 0.5rem; align-items: center; color: #cfeaff; }

/* Carousel */
.carousel { position: relative; }
.carousel-viewport { overflow: hidden; border-radius: var(--radius-lg); }
.carousel-track { display: flex; gap: 0; transition: transform .4s ease; will-change: transform; }
.carousel-item { flex: 0 0 100%; padding: .25rem; box-sizing: border-box; }
.carousel-item > .card { display: block; width: 100%; height: 100%; }
@media (min-width: 640px) { .carousel-item { flex: 0 0 50%; } }
@media (min-width: 960px) { .carousel-item { flex: 0 0 33.3333%; } }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: color-mix(in oklab, var(--color-panel) 96%, transparent); border: 1px solid var(--color-border); width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; box-shadow: var(--shadow-sm); z-index: 2; }
.carousel-btn:hover { box-shadow: var(--shadow); }
.carousel-btn[disabled] { opacity: .5; cursor: not-allowed; }
.carousel-prev { left: 8px; }
.carousel-next { right: 8px; }

/* Header call-to-action buttons */
.button-icon { display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; border-radius: 0; border: 0; background: transparent; box-shadow: none; font-size: 20px; margin-left: .25rem; padding: 0 4px; }
.button-icon:hover { transform: translateY(-1px); }
/* revert theme toggle to iOS-style switch already defined */
/* uses .switch and .knob styles below */

/* Final strip */
.final-strip { padding: var(--space-xl) 0; border-top: 1px solid var(--color-border); background: linear-gradient(180deg, color-mix(in oklab, var(--color-panel) 98%, transparent), color-mix(in oklab, var(--color-panel) 94%, transparent)); }
.final-grid { display: grid; gap: var(--space); grid-template-columns: repeat(1, 1fr); text-align: center; }
.final-item { background: color-mix(in oklab, var(--color-panel) 98%, transparent); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space); box-shadow: var(--shadow-sm); }
.final-emoji { font-size: 1.35rem; }
@media (min-width: 720px) { .final-grid { grid-template-columns: repeat(4, 1fr); text-align: left; } }

@media (min-width: 640px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .cards-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Two column visuals */
.two-col { display: grid; gap: var(--space-xl); align-items: center; }
.visual-grid { display: grid; grid-template-columns: repeat(2, 120px); gap: 14px; justify-content: center; }
.visual-tile { width: 120px; height: 120px; border-radius: 20px; background: linear-gradient(180deg, rgba(14,165,233,.12), rgba(14,165,233,.02)); border: 1px solid rgba(14,165,233,.18); box-shadow: inset 0 -12px 32px rgba(14,165,233,.08), var(--shadow-sm); }
.tilt { transform: perspective(800px) rotateX(8deg) rotateY(-8deg) translateY(0); transform-style: preserve-3d; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.tilt:hover { transform: perspective(800px) rotateX(0) rotateY(0) translateY(-2px); }
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }

@media (min-width: 960px) {
  .two-col { grid-template-columns: 1fr 1fr; }
  .visual-grid { justify-content: end; }
}

/* CTA banner */
.cta-banner { padding: var(--space-2xl) 0; background: linear-gradient(180deg, color-mix(in oklab, var(--color-brand-600) 12%, transparent), color-mix(in oklab, var(--color-brand-600) 2%, transparent)); border-top: 1px solid color-mix(in oklab, var(--color-brand-600) 20%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--color-brand-600) 15%, transparent); overflow: hidden; }
.cta-inner { display: grid; gap: var(--space); text-align: center; }
.cta-title { position: relative; display: inline-block; margin-inline: auto; padding-bottom: .4rem; }
.cta-title::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 64%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--color-brand-600) 90%, transparent), transparent); animation: gradient-move 8s ease-in-out infinite; opacity: .9; }
.cta-actions { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.cta-actions .button { min-width: 180px; }
.cta-primary { position: relative; overflow: hidden; border-radius: 999px; padding-inline: 1.25rem; }
.cta-primary::after { content: ""; position: absolute; inset: -140% -20% auto; height: 320%; width: 40%; transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); opacity: 0; }
.cta-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(14,165,233,.35); }
.cta-primary:hover::after { animation: sheen 1.2s ease forwards; opacity: 1; }

/* Animated call button to drive action */
.cta-call { position: relative; overflow: hidden; border-radius: 999px; }
.cta-call::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(27,78,115,.0);
}
.cta-call::after {
  content: ""; position: absolute; inset: -140% -20% auto; height: 320%; width: 40%;
  transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  opacity: 0; transition: opacity .2s ease;
}
.cta-call { animation: call-pulse 2.8s ease-in-out infinite; }
@keyframes call-pulse {
  0%,100% { filter: brightness(1); box-shadow: 0 4px 14px rgba(27,78,115,.18); }
  50% { filter: brightness(1.06); box-shadow: 0 8px 28px rgba(27,78,115,.35); }
}
.cta-call:hover::after { opacity: 1; animation: sheen 1.1s ease forwards; }

/* CTA title halo and staggered reveal */
.cta-banner { position: relative; }
.cta-title::before {
  content: ""; position: absolute; inset: -24px -48px; z-index: -1;
  background: radial-gradient(320px 140px at 50% 60%, color-mix(in oklab, var(--color-brand-600) 26%, transparent), transparent 70%);
  opacity: 0; filter: blur(14px); transform: scale(.9); transition: opacity .8s ease, transform .8s ease;
}
.in-view .cta-title::before { opacity: .45; transform: scale(1); }
.cta-inner > * { transform: translateY(6px); opacity: 0; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease; will-change: transform, opacity; }
.in-view .cta-inner > * { transform: none; opacity: 1; }
.in-view .cta-inner > :nth-child(1) { transition-delay: .05s; }
.in-view .cta-inner > :nth-child(2) { transition-delay: .12s; }
.in-view .cta-inner > :nth-child(3) { transition-delay: .2s; }

/* Lists */
.list-check { list-style: none; padding: 0; display: grid; gap: 0.5rem; }

/* Comparison table */
.compare { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; background: linear-gradient(180deg, color-mix(in oklab, var(--color-panel) 98%, transparent), color-mix(in oklab, var(--color-panel) 96%, transparent)); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.compare-table thead th { position: sticky; top: 0; background: color-mix(in oklab, var(--color-panel) 95%, transparent); text-align: left; padding: .75rem; border-bottom: 1px solid var(--color-border); }
.compare-table tbody th { text-align: left; padding: .75rem; border-top: 1px solid var(--color-border); width: 50%; }
.compare-table td { text-align: center; padding: .75rem; border-top: 1px solid var(--color-border); width: 25%; }
.compare-table .yes { color: #0a8f3a; font-weight: 700; }
.compare-table .no { color: var(--color-muted); }
.compare-table tr:first-child th, .compare-table tr:first-child td { border-top: 0; }
.compare-table { border-radius: var(--radius-lg); overflow: hidden; }

/* Stabilize CTA section: remove any micro-motions that can feel like scroll */
.cta-banner { overflow: hidden; }
.cta-banner .cta-inner > * { transform: none !important; opacity: 1 !important; transition: none !important; }
.cta-banner .cta-title::before { animation: none !important; transform: none !important; }
.cta-banner .cta-call { animation: none !important; }

/* Testimonials */
.testimonials .testimonial { display: grid; gap: .5rem; align-content: start; }
.t-head { display: grid; grid-template-columns: auto 1fr; gap: .5rem; align-items: center; }
.t-avatar { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; border: 1px solid var(--color-border); background: var(--color-panel); }
.t-name { font-weight: 600; }

/* Stats */
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space); margin-top: calc(var(--space) * -1.5); }
.stat-card { background: linear-gradient(180deg, color-mix(in oklab, var(--color-panel) 98%, transparent), color-mix(in oklab, var(--color-panel) 96%, transparent)); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space); text-align: center; box-shadow: var(--shadow-sm); }
.stat-num { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; }
@media (min-width: 960px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } .stat-num { font-size: 2.5rem; } }

/* FAQ */
.faq { display: grid; gap: .5rem; }
.faq-item { background: linear-gradient(180deg, color-mix(in oklab, var(--color-panel) 98%, transparent), color-mix(in oklab, var(--color-panel) 96%, transparent)); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: .75rem 1rem; }
.faq-item > summary { cursor: pointer; list-style: none; font-weight: 600; position: relative; padding-right: 1.25rem; }
.faq-item > summary::after { content: "\25BC"; /* down triangle */ position: absolute; right: .25rem; top: 50%; transform: translateY(-50%) rotate(0deg); font-size: .85rem; color: var(--color-muted); transition: transform .2s ease, color .2s ease; }
.faq-item:hover > summary::after { color: var(--color-text); }
.faq-item[open] > summary { color: var(--color-brand-700); }
.faq-item[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
.faq-a { padding-top: .5rem; color: var(--color-muted); }

.list-check li { position: relative; padding-left: 1.5rem; }
.list-check li::before { content: "✔"; position: absolute; left: 0; color: var(--color-accent-600); }

/* Tight section spacing helper */
.section-tight { padding-top: calc(var(--space) * 0.25) !important; padding-bottom: calc(var(--space) * 0.25) !important; }

/* Feature split for Boom Lift */
.feature-split { display: grid; gap: var(--space-xl); align-items: start; }
.split-left { display: grid; gap: .75rem; }
.pill { display: inline-block; font-size: var(--font-size-sm); padding: .25rem .5rem; border-radius: var(--radius-full); background: color-mix(in oklab, var(--color-accent-600) 20%, var(--color-panel)); border: 1px solid color-mix(in oklab, var(--color-accent-600) 30%, var(--color-border)); color: color-mix(in oklab, var(--color-accent-600) 70%, var(--color-text)); }
.contact-inline { display: grid; grid-template-columns: auto 1fr; gap: .5rem; align-items: center; margin-top: .5rem; }
.contact-inline a { text-decoration: none; position: relative; background-image: linear-gradient(currentColor, currentColor); background-position: left 100%; background-size: 0% 2px; background-repeat: no-repeat; transition: color .2s ease, background-size .2s ease, transform .2s ease; }
.contact-inline a:hover, .contact-inline a:focus-visible { background-size: 100% 2px; transform: translateY(-1px); outline: none; }
.contact-icon { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; background: color-mix(in oklab, var(--color-brand-600) 18%, var(--color-panel)); border: 1px solid var(--color-border); }
.split-right .form-title { margin: 0 0 .25rem 0; }

/* Contact page: equalize form/map card heights */
.contact-equal { align-items: stretch !important; }
.contact-equal .card { height: 100%; display: grid; }
.contact-equal .card > .map { height: 100%; }

/* Map hover subtle zoom */
.map iframe { transition: transform .4s ease, box-shadow .3s ease; will-change: transform; }
.map:hover iframe { transform: scale(1.01); box-shadow: var(--shadow); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--color-panel); border: 1px solid var(--color-border); color: var(--color-text); padding: .75rem 1rem; border-radius: 10px; box-shadow: var(--shadow-sm); z-index: 100000; opacity: 0; transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }

@media (min-width: 960px) {
  .feature-split { grid-template-columns: 1.1fr 1fr; align-items: start; }
  .split-right { align-self: stretch; justify-self: center; }
}

/* Mosaic gallery */
.mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mosaic img, .mosaic .mosaic-media { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); background: var(--color-panel); display: block; }
/* Mobile: make the 3rd tile span full width to avoid empty cell */
.mosaic img:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (min-width: 960px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto auto; height: 100%; align-content: space-between; }
  .mosaic .m1 { grid-column: span 2; aspect-ratio: 16 / 9; }
  /* Desktop: restore the third tile to single column square */
  .mosaic img:last-child { grid-column: auto; aspect-ratio: 1 / 1; }
}

/* Section with background video */
.video-hero { position: relative; overflow: clip; padding-top: calc(var(--header-h) + var(--space-xl)); min-height: 48vh; display: grid; place-items: center; }
.video-hero .section-video-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.05) brightness(.92); transition: opacity .15s ease, transform .25s ease; }
@media (prefers-reduced-motion: reduce) {
  .video-hero .section-video-el { transition: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .video-hero .section-video-el { will-change: opacity, transform; }
  .video-hero:hover .section-video-el { transform: scale(1.01); }
}
.video-hero .section-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in oklab, var(--color-bg) 35%, transparent), color-mix(in oklab, var(--color-bg) 60%, transparent)); pointer-events: none; }
.video-hero .container { position: relative; z-index: 1; }

/* Steps */
.steps { display: grid; gap: var(--space); grid-template-columns: repeat(1, 1fr); }
.steps { overscroll-behavior: none; }
.step * { overscroll-behavior: none; }
.steps, .step { height: auto; max-height: none; -webkit-overflow-scrolling: auto !important; }
.step { background: linear-gradient(180deg, color-mix(in oklab, var(--color-panel) 98%, transparent), color-mix(in oklab, var(--color-panel) 96%, transparent)); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
/* Prevent any nested scrolling in the Steps section */
.section .container, .steps { overflow: visible; }
.step::after { content: ""; position: absolute; inset: -40% -20% auto; height: 240%; width: 36%; transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.step:hover { box-shadow: var(--shadow); transform: translateY(-2px); transition: transform .25s ease, box-shadow .25s ease; }
.step:hover::after { opacity: 1; animation: sheen 1.2s ease forwards; }
.step-num { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; background: linear-gradient(180deg, var(--color-brand-600), var(--color-brand-700)); color: #fff; font-weight: 700; margin-bottom: .5rem; }
.step-title { margin: 0 0 .25rem 0; }

@media (min-width: 720px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
}

/* staggered appear for steps */
.steps [data-animate] { opacity: 0; transform: translateY(10px); transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease; }
.steps .in-view { opacity: 1 !important; transform: none !important; }
.steps [data-animate]:nth-child(1) { transition-delay: .05s; }
.steps [data-animate]:nth-child(2) { transition-delay: .12s; }
.steps [data-animate]:nth-child(3) { transition-delay: .19s; }
.steps [data-animate]:nth-child(4) { transition-delay: .26s; }

/* Steps CTA spacing and animations */
.steps-cta { justify-content: center; display: flex; gap: .75rem; margin-top: var(--space-xl); }
.steps-cta .button { transform: translateY(0); transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease; min-width: 180px; }
.steps-cta .button:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.steps-cta .button.button-primary { position: relative; overflow: hidden; }
.steps-cta .button.button-primary::after {
  content: ""; position: absolute; inset: -140% -20% auto; height: 320%; width: 40%;
  transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  opacity: 0; transition: opacity .2s ease;
}
.steps-cta .button.button-primary:hover::after { opacity: 1; animation: sheen 1.2s ease forwards; }
/* Trust strip */
.trust-strip { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space); background: color-mix(in oklab, var(--color-panel) 96%, transparent); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space); box-shadow: var(--shadow-sm); margin-bottom: calc(var(--space) * 0.25); }
.trust-item { text-align: center; color: var(--color-text); }
@media (min-width: 720px) { .trust-strip { grid-template-columns: repeat(4,1fr); } }

/* Horizontal services scroll */
.services-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: 10px; overflow-x: auto; padding: 0 var(--space); scroll-snap-type: x mandatory; }
.service-pill { scroll-snap-align: start; background: color-mix(in oklab, var(--color-panel) 98%, transparent); border: 1px solid var(--color-border); color: var(--color-text); padding: 10px 14px; border-radius: 999px; white-space: nowrap; box-shadow: var(--shadow-sm); }
.service-pill:hover { border-color: color-mix(in oklab, var(--color-brand-600) 40%, var(--color-border)); }

/* Floating Quote Form */
.quote-float { position: relative; margin-top: clamp(-520px, calc(var(--space-4xl) * -1.9), -200px); padding-bottom: var(--space-2xl); }
.quote-card {
  background: linear-gradient(180deg, color-mix(in oklab, var(--color-panel) 98%, transparent), color-mix(in oklab, var(--color-panel) 96%, transparent));
  border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: none;
  padding: var(--space); width: min(100%, 960px); margin: 0 auto; position: relative;
  /* Hard-disable any internal scrolling on the card and its children */
  overflow: hidden !important;
  -webkit-overflow-scrolling: auto !important;
}
.quote-title { margin: 0 0 .25rem 0; font-size: var(--font-size-2xl); }
.quote-grid { display: grid; gap: var(--space); grid-template-columns: 1fr; }
.form-span-2 { grid-column: span 1; }
/* removed range row */
@media (min-width: 720px) {
  .quote-card { padding: var(--space-xl); overflow: hidden !important; }
  .quote-grid { grid-template-columns: repeat(2, 1fr); align-items: end; }
  .form-actions { display: grid; place-items: center; }
  .form-actions .button { min-width: 320px; border-radius: 999px; position: relative; overflow: hidden; }
  .form-span-2 { grid-column: 1 / -1; }
}

/* Mobile: lower the floating quote form so it doesn't collide with header */
@media (max-width: 719.98px) {
  /* Place the form just below the hero CTA button on mobile */
  .quote-float { margin-top: 10px !important; }
}

/* Quote button upgraded */
.quote-card .button.button-primary {
  background: linear-gradient(180deg, var(--color-brand-600), var(--color-brand-700));
  box-shadow: none;
}
.quote-card .button.button-primary::after {
  content: ""; position: absolute; inset: -140% -20% auto; height: 320%; width: 40%;
  transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  opacity: 0; transition: opacity .2s ease;
}
.quote-card .button.button-primary:hover { transform: translateY(-2px); box-shadow: none; }
.quote-card .button.button-primary:hover::after { opacity: 1; animation: sheen 1.2s ease forwards; }
.quote-card .button.button-primary:active { transform: translateY(-1px); }

/* Hero button enhanced visuals */
.button-hero {
  padding: 0.95rem 1.4rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--color-brand-600), var(--color-brand-700));
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 10px 30px rgba(27,78,115,.28);
  position: relative; overflow: hidden;
}
.button-hero::after {
  content: ""; position: absolute; inset: -140% -20% auto; height: 320%; width: 40%;
  transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  opacity: 0; pointer-events: none;
}
.button-hero:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(27,78,115,.38); }
.button-hero:hover::after { animation: sheen 1.2s ease forwards; opacity: 1; }
.button-hero:active { transform: translateY(-1px); }

/* Hero primary call button: subtle pulse and icon spacing */
.hero-call { display: inline-flex; align-items: center; padding-left: 1.4rem; padding-right: 1.4rem; letter-spacing: .2px; }
.hero-call { animation: hero-call-pulse 3.8s ease-in-out infinite; will-change: transform, box-shadow; }
@keyframes hero-call-pulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 10px 30px rgba(27,78,115,.28);
    filter: brightness(1);
  }
  50% {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 20px 50px rgba(27,78,115,.48);
    filter: brightness(1.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-call { animation: hero-call-pulse-reduced 5.5s ease-in-out infinite; }
}
@keyframes hero-call-pulse-reduced {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 8px 24px rgba(27,78,115,.24); }
  50% { transform: translateY(-1px) scale(1.01); box-shadow: 0 12px 30px rgba(27,78,115,.34); }
}

@media (max-width: 640px) {
  .button-hero { padding: 0.85rem 1.2rem; }
}

/* Before / After slider */
.ba-grid { display: grid; gap: var(--space); }
@media (min-width: 960px) { .ba-grid { grid-template-columns: repeat(2, 1fr); } }
.ba { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--color-panel); border: 1px solid var(--color-border); aspect-ratio: 1 / 1; }
.ba-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; will-change: transform; }
.ba:hover { box-shadow: var(--shadow-lg); }
.ba:hover .ba-img { transform: scale(1.045); }
.ba-before { clip-path: none; }
.ba-after { clip-path: inset(0 0 0 50%); }
/* Horizontal slider control with custom marker */
.ba-range { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(520px, 90%); }
.ba-marker { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: color-mix(in oklab, var(--color-brand-600) 60%, transparent); pointer-events: none; transform: translateX(-50%); box-shadow: 0 0 0 2px rgba(0,0,0,.04); }

@media (prefers-reduced-motion: reduce) {
  .ba-img { transition: none; }
  .ba:hover .ba-img { transform: none; }
}

/* iOS-style theme switch */
.switch {
  --w: 60px; --h: 30px; --p: 3px;
  position: relative; display: inline-flex; width: var(--w); height: var(--h);
  background: color-mix(in oklab, var(--color-muted) 25%, var(--color-panel));
  border: 1px solid var(--color-border); border-radius: var(--h); align-items: center; padding: var(--p);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.switch:hover { box-shadow: var(--shadow-sm); }
.switch .knob {
  width: calc(var(--h) - var(--p) * 2); height: calc(var(--h) - var(--p) * 2);
  background: linear-gradient(180deg, #fff, #f3f6f9);
  border: 1px solid color-mix(in oklab, var(--color-border) 80%, transparent);
  border-radius: 999px; transform: translateX(0); transition: transform .18s ease, background .18s ease, border-color .18s ease;
  position: relative; z-index: 1;
}
[data-theme="dark"] .switch { background: color-mix(in oklab, var(--color-brand-700) 40%, var(--color-panel)); border-color: color-mix(in oklab, var(--color-brand-700) 40%, var(--color-border)); }
[aria-checked="true"].switch { background: color-mix(in oklab, var(--color-brand-600) 60%, var(--color-panel)); border-color: color-mix(in oklab, var(--color-brand-600) 50%, var(--color-border)); }
[aria-checked="true"].switch .knob { transform: translateX(calc(var(--w) - var(--h) - var(--p) * 2)); }

/* Sun/Moon icons inside switch */
/* Icons on opposite sides of the knob to avoid overlap */
.switch::before { content: "🌙"; position: absolute; left: 8px; font-size: 14px; opacity: 0; transition: opacity .15s ease; z-index: 0; }
.switch::after  { content: "🌞"; position: absolute; right: 8px; font-size: 14px; opacity: 1; transition: opacity .15s ease; z-index: 0; }
[aria-checked="true"].switch::before { opacity: 1; }
[aria-checked="true"].switch::after  { opacity: 0; }

/* Header interactions & button animations */
.hdr-right .button { transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease; }
.hdr-right .button:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.hdr-right .button:active { transform: translateY(0); }

/* Subtle attention pulse for CTA */
@keyframes cta-pulse {
  0%, 90%, 100% { box-shadow: 0 0 0 rgba(14,165,233,0); }
  45% { box-shadow: 0 10px 34px rgba(14,165,233,.35); }
}
/* Subtle idle float to attract attention (very gentle) */
@keyframes idle-float {
  0%, 100% { transform: translateY(0); box-shadow: none; }
  50% { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
}
.hdr-right .button { animation: none; }
/* New, more noticeable yet subtle "breath" animation */
@keyframes breath {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: none; }
  40% { transform: translateY(-1px) scale(1.035); box-shadow: var(--shadow-sm); }
}
@keyframes glow {
  0%, 100% { filter: saturate(1) brightness(1); }
  40% { filter: saturate(1.08) brightness(1.04); }
}
.hdr-right .button-ghost { animation: breath 5.5s ease-in-out infinite; }
.hdr-right .button-primary { animation: breath 4s ease-in-out infinite, glow 4s ease-in-out infinite; }

/* Shimmer on primary hover */
.hdr-right .button-primary { position: relative; overflow: hidden; }
.hdr-right .button-primary::after {
  content: ""; position: absolute; inset: -120% -20% auto; height: 300%; width: 40%;
  transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.hdr-right .button-primary:hover::after { opacity: 1; animation: sheen 1.1s ease forwards; }
@keyframes sheen { from { translate: -120% 0; } to { translate: 160% 0; } }

/* Nav underline animation */
.center-inner .nav-left .nav-link,
.center-inner .nav-right .nav-link { position: relative; }
.center-inner .nav-left .nav-link::after,
.center-inner .nav-right .nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: color-mix(in oklab, var(--color-brand-600) 90%, transparent);
  transform: scaleX(0); transform-origin: center; transition: transform .22s ease;
}
.center-inner .nav-left .nav-link:hover::after,
.center-inner .nav-right .nav-link:hover::after { transform: scaleX(1); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hdr-right .button, .hdr-right .button-primary { animation: none !important; }
}

/* Mobile CTA pulse animations */
@keyframes mobile-cta-pulse {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: var(--shadow-sm); }
  50% { transform: translateY(-1px) scale(1.05); box-shadow: 0 10px 28px rgba(27,78,115,.35); }
}
@keyframes mobile-call-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.18); filter: brightness(1.08); }
}
@media (max-width: 1600px) {
  .mobile-actions .button.button-primary { animation: mobile-cta-pulse 3.6s ease-in-out infinite; }
  .mobile-actions .button-icon { animation: mobile-call-pulse 2.8s ease-in-out infinite; transform-origin: center; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-actions .button.button-primary,
  .mobile-actions .button-icon { animation: none !important; }
}