/* === HIGH IMPACT DESIGN OVERHAUL === */

/* Hero H1: genuinely BIG, like the big players */
.hero-h1 {
 line-height: 1.05;
 letter-spacing: -0.02em;
}
@media (min-width: 768px) {
 .hero-h1 {
 font-size: 5rem !important;
 line-height: 1.0 !important;
 letter-spacing: -0.03em !important;
 }
}
@media (min-width: 1024px) {
 .hero-h1 {
 font-size: 5.5rem !important;
 }
}

/* Component fixes */
.hero-glass-card { border-radius: 2rem !important; }
.hero-tab-btn { width: 140px !important; }
.hero-tab-bg { width: 140px !important; }
@media (min-width: 768px) {
 .hero-acc-item { width: 4.5rem !important; height: auto !important; }
}
.hero-acc-item { height: 4.5rem; }

/* prefers-reduced-motion: pause all animations for accessibility */
@media (prefers-reduced-motion: reduce) {
 .cloud-1, .cloud-2, .cloud-3, .cloud-4 { animation: none !important; }
 .hero-gradient-blob { animation: none !important; }
 .scroller-track { animation: none !important; }
 .reveal-slide-right, .reveal-slide-left, .reveal-fade-up { transition: none !important; animation: none !important; }
}

/* Premium section spacing */
.section-premium {
 padding-top: 7rem;
 padding-bottom: 7rem;
}
@media (max-width: 767px) {
 .section-premium {
 padding-top: 3.5rem;
 padding-bottom: 3.5rem;
 }
}

/* DARK IMMERSIVE SECTION — the "big player" move */
.section-dark {
 background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 55%, #0284c7 100%);
 color: #f1f5f9;
 padding-top: 7rem;
 padding-bottom: 7rem;
 position: relative;
 overflow: hidden;
}
.section-dark::before {
 content: '';
 position: absolute;
 top: -50%;
 right: -20%;
 width: 600px;
 height: 600px;
 background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
 border-radius: 50%;
 pointer-events: none;
}
.section-dark h2 { color: #ffffff; }
.section-dark h3 { color: #f0f9ff; }
.section-dark p { color: #e0f2fe; }
.section-dark .icon-circle {
 background: rgba(255,255,255,0.15) !important;
 color: #e0f2fe !important;
}
.section-dark .icon-circle-plum {
 background: rgba(255,255,255,0.15) !important;
 color: #e0f2fe !important;
}
.section-dark .icon-circle-teal {
 background: rgba(255,255,255,0.15) !important;
 color: #e0f2fe !important;
}
@media (max-width: 767px) {
 .section-dark {
 padding-top: 3.5rem;
 padding-bottom: 3.5rem;
 }
}

/* Heading tracking */
.heading-premium {
 letter-spacing: -0.02em;
}

/* Scroll reveal: JS-gated */
.js-reveal .reveal-on-scroll:not(.revealed),
.js-reveal .reveal-slide-right:not(.revealed),
.js-reveal .reveal-scale-up:not(.revealed) {
 opacity: 0;
 transform: translateY(20px);
}
.js-reveal .reveal-slide-right:not(.revealed) {
 transform: translateX(-20px);
}
.js-reveal .reveal-scale-up:not(.revealed) {
 transform: scale(0.97);
}
.js-reveal .reveal-on-scroll,
.js-reveal .reveal-slide-right,
.js-reveal .reveal-scale-up { transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-delay-100 { transition-delay: 0.1s; }
.reveal-delay-200 { transition-delay: 0.2s; }
.reveal-delay-300 { transition-delay: 0.3s; }
body { overflow-x: clip; }
html { overflow-x: clip; max-width: 100vw; }
body { background-color: #0f172a !important; }

/* === BOLD HERO === */
.hero-bold {
 min-height: calc(100vh - 5rem);
 min-height: calc(100dvh - 5rem);
 background: linear-gradient(
 180deg,
 #c9b8e8 0%,
 #d4c4f0 8%,
 #d9ccf2 15%,
 #cfc0ee 25%,
 #b8c8f0 40%,
 #a8d4f5 55%,
 #b8ddf5 65%,
 #d0e8f5 75%,
 #e8f0f8 85%,
 #f5f7fa 93%,
 #ffffff 100%
 ) !important;
 position: relative;
}
/* Floating decorative shapes */
.hero-shape {
 position: absolute;
 border-radius: 50%;
 pointer-events: none;
 z-index: 1;
}
.hero-shape-1 {
 width: 200px; height: 200px;
 background: rgba(90,45,106,0.12);
 top: 10%; right: 8%;
 animation: float-slow 8s ease-in-out infinite;
}
.hero-shape-2 {
 width: 120px; height: 120px;
 background: rgba(3,105,161,0.1);
 top: 25%; left: 5%;
 animation: float-slow 10s ease-in-out infinite reverse;
}
.hero-shape-3 {
 width: 80px; height: 80px;
 background: rgba(90,45,106,0.08);
 bottom: 30%; right: 15%;
 animation: float-slow 6s ease-in-out infinite;
}
.hero-shape-4 {
 width: 150px; height: 150px;
 background: rgba(255,255,255,0.4);
 top: 15%; left: 20%;
 animation: float-slow 12s ease-in-out infinite;
 filter: blur(2px);
}
.hero-shape-5 {
 width: 100px; height: 100px;
 background: rgba(255,255,255,0.3);
 bottom: 25%; left: 12%;
 animation: float-slow 9s ease-in-out infinite reverse;
 filter: blur(1px);
}
@keyframes float-slow {
 0%, 100% { transform: translateY(0) scale(1); }
 50% { transform: translateY(-20px) scale(1.05); }
}
/* Ensure hero text stays readable */
.hero-bold::before {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, 
 rgba(196,181,253,0.15) 0%, 
 rgba(196,181,253,0.05) 20%, 
 transparent 50%, 
 rgba(191,219,254,0.15) 80%, 
 transparent 100%);
 z-index: 2;
 pointer-events: none;
}
.hero-bold > * { position: relative; z-index: 3; }
.hero-bold .hero-h1 { color: #1e1b4b !important; }
.hero-bold .text-gray-800 { color: #312e81 !important; }
.hero-bold::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 50%;
 background: url('/assets/images/hero/houses_cropped.webp') center bottom / 65% auto no-repeat;
 z-index: 2;
 pointer-events: none;
}

/* Tablet */
@media (max-width: 1024px) {
 .hero-bold::after {
 height: 55%;
 background: url('/assets/images/hero/houses_cropped.webp') center bottom / 95% auto no-repeat;
 }
}

/* Mobile: hide */
@media (max-width: 640px) {
 .hero-bold::after {
 display: none;
 }
}

.service-card {
 display: flex !important;
 flex-direction: column !important;
 height: 100% !important;
}
.service-card > p { flex: 1 1 auto; }
.service-card .explore-link {
 margin-top: auto !important;
 padding-top: 1rem;
}

/* === ANIMATED HERO LAYERS === */
.hero-clouds {
 position: absolute;
 inset: 0;
 overflow: hidden;
 pointer-events: none;
 z-index: 1;
}
.cloud {
 position: absolute;
 background: rgba(255,255,255,0.85);
 border-radius: 50%;
 filter: blur(1px);
}
.cloud::before, .cloud::after {
 content: '';
 position: absolute;
 background: inherit;
 border-radius: 50%;
}
/* Cloud 1 - large, slow */
.cloud-1 {
 width: 200px; height: 60px; top: 8%; left: -10%;
 animation: drift-right 45s linear infinite;
}
.cloud-1::before { width: 100px; height: 80px; top: -40px; left: 30px; }
.cloud-1::after { width: 120px; height: 70px; top: -30px; left: 70px; }

/* Cloud 2 - medium */
.cloud-2 {
 width: 150px; height: 45px; top: 18%; left: -8%;
 animation: drift-right 55s linear infinite;
 animation-delay: -20s;
 opacity: 0.7;
}
.cloud-2::before { width: 80px; height: 60px; top: -30px; left: 20px; }
.cloud-2::after { width: 90px; height: 55px; top: -25px; left: 55px; }

/* Cloud 3 - small, fast */
.cloud-3 {
 width: 100px; height: 30px; top: 12%; left: -5%;
 animation: drift-right 35s linear infinite;
 animation-delay: -10s;
 opacity: 0.5;
}
.cloud-3::before { width: 60px; height: 45px; top: -22px; left: 15px; }
.cloud-3::after { width: 70px; height: 40px; top: -18px; left: 40px; }

/* Cloud 4 - large background */
.cloud-4 {
 width: 250px; height: 70px; top: 25%; left: -15%;
 animation: drift-right 60s linear infinite;
 animation-delay: -35s;
 opacity: 0.4;
}
.cloud-4::before { width: 120px; height: 90px; top: -45px; left: 40px; }
.cloud-4::after { width: 140px; height: 80px; top: -35px; left: 90px; }

/* Cloud 5 */
.cloud-5 {
 width: 180px; height: 50px; top: 5%; left: -12%;
 animation: drift-right 50s linear infinite;
 animation-delay: -40s;
 opacity: 0.6;
}
.cloud-5::before { width: 90px; height: 70px; top: -35px; left: 25px; }
.cloud-5::after { width: 110px; height: 60px; top: -28px; left: 65px; }

@keyframes drift-right {
 0% { transform: translateX(0); }
 100% { transform: translateX(calc(100vw + 300px)); }
}

/* === CONTINUOUS SKY-TO-SUNSET GRADIENT SECTIONS === */
/* Flow: lilac/sky → pink → peach → warm sunset (Habito-inspired) */

/* Zone 1: Hero → How It Works (lilac-sky into soft rose) */
.section-flow-1 {
 background: linear-gradient(180deg, #e5d5e8 0%, #e8d0e0 20%, #ecc8d8 50%, #f0c4d0 80%, #f2c0cc 100%) !important;
 position: relative;
 overflow: hidden;
}
.section-flow-1::before {
 content: '';
 position: absolute;
 top: -30%;
 right: -15%;
 width: 500px;
 height: 500px;
 background: radial-gradient(circle, rgba(90,45,106,0.06) 0%, transparent 70%);
 border-radius: 50%;
 pointer-events: none;
}

/* Zone 2: Core Services (rose into warm peach) */
.section-flow-2 {
 background: linear-gradient(180deg, #f2c0cc 0%, #f4c0c0 15%, #f5c4b8 35%, #f6ccb0 55%, #f7d0a8 75%, #f8d4a2 100%) !important;
 position: relative;
 overflow: hidden;
}

/* Zone 3: Specialist Professions (peach into salmon/coral) */
.section-flow-3 {
 background: linear-gradient(180deg, #f8d4a2 0%, #f5cca0 25%, #f2c4a0 50%, #f0bca0 75%, #eeb8a0 100%) !important;
 position: relative;
 overflow: hidden;
}
.section-flow-3::before {
 content: '';
 position: absolute;
 top: -30%;
 right: -15%;
 width: 500px;
 height: 500px;
 background: radial-gradient(circle, rgba(90,45,106,0.06) 0%, transparent 70%);
 border-radius: 50%;
 pointer-events: none;
}

/* Zone 4: Handy Tools (warm coral into golden) */
.section-flow-4 {
 background: linear-gradient(180deg, #eeb8a0 0%, #f0b898 20%, #f2bc90 45%, #f4c488 65%, #f6cc82 85%, #f8d47c 100%) !important;
 position: relative;
 overflow: hidden;
}

/* Zone 5: CTA (golden sunset finale) */
.section-flow-5 {
 background: linear-gradient(180deg, #f8d47c 0%, #f5c87a 20%, #f0b87a 40%, #eca87a 60%, #e8a07e 80%, #e09888 100%) !important;
 position: relative;
 overflow: hidden;
}


/* Legacy fallbacks (preserved for other pages) */
.section-gradient-plum {
 background: linear-gradient(135deg, #d8b4fe 0%, #c4b5fd 40%, #93c5fd 100%) !important;
 position: relative;
 overflow: hidden;
}
.section-gradient-plum::before {
 content: '';
 position: absolute;
 top: -30%;
 right: -15%;
 width: 500px;
 height: 500px;
 background: radial-gradient(circle, rgba(90,45,106,0.08) 0%, transparent 70%);
 border-radius: 50%;
 pointer-events: none;
}
.section-gradient-sky {
 background: linear-gradient(160deg, #7dd3fc 0%, #67e8f9 40%, #a78bfa 100%) !important;
 position: relative;
}
.section-gradient-warm {
 background: linear-gradient(135deg, #c084fc 0%, #fb7185 50%, #fbbf24 100%) !important;
 position: relative;
}
.trust-bar-dark {
 background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%) !important;
 color: white !important;
 border: none !important;
}
.trust-bar-dark p, .trust-bar-dark span { color: rgba(255,255,255,0.8) !important; }
.trust-bar-dark .text-yellow-400 { color: #fbbf24 !important; }
.trust-bar-dark .text-gray-300 { color: rgba(255,255,255,0.3) !important; }
.trust-bar-dark .text-gray-500 { color: rgba(255,255,255,0.6) !important; }
.trust-bar-dark .text-gray-700 { color: rgba(255,255,255,0.9) !important; }
.trust-bar-dark .text-brand-plum { color: #c4b5fd !important; }
.trust-bar-dark .text-teal-500 { color: #5eead4 !important; }
.trust-bar-dark .text-brand-sky { color: #7dd3fc !important; }
.trust-bar-dark .partner-logo { filter: opacity(1) !important; background: white; padding: 12px 16px; border-radius: 12px; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.trust-bar-dark .partner-logo:hover { transform: scale(1.08) !important; box-shadow: 0 4px 20px rgba(255,255,255,0.15); }

/* === SCROLL-SCRUBBED VIDEO HERO === */
/* The scrolly-video library handles position:sticky, full viewport, and scroll tracking.
 We only style the overlay content and CTA cards here. */
/* === SCROLLY VIDEO HERO === */
#scrolly-hero {
 position: relative;
 height: 280vh;
 background: #0f172a;
 z-index: 1;
}
/* Make video container sticky ourselves */
#scrolly-video-container {
 position: sticky;
 top: 0;
 width: 100%;
 height: 100vh;
 overflow: hidden;
 background-image: url('/assets/images/hero/hero-video-poster.webp');
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}
#scrolly-video-container video,
#scrolly-video-container canvas {
 position: absolute;
 inset: 0;
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
}
#scrolly-video-container video {
 opacity: 0;
}
#scrolly-video-container canvas {
 opacity: 0;
 transition: opacity 0.35s ease;
}
#scrolly-video-container.is-canvas-ready canvas {
 opacity: 1 !important;
}
/* Ensure main content after the hero sits above the sticky video */
#scrolly-hero ~ main {
 position: relative;
 z-index: 2;
 background-color: #f7f2ee;
}
/* Footer sits above hero too but keeps its own background */
#scrolly-hero ~ footer {
 position: relative;
 z-index: 2;
}
/* Cookie banner keeps its own fixed positioning */
#cookie-banner {
 position: fixed !important;
 z-index: 100 !important;
}
/* Overlay spans the full 200vh, inner sticks to viewport */
.hero-video-overlay {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 20;
 pointer-events: none;
}
.hero-video-overlay-inner {
 position: sticky;
 top: 0;
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
}
.hero-video-scrim {
 position: absolute;
 inset: 0;
 background: linear-gradient(
 180deg,
 rgba(15, 23, 42, 0.55) 0%,
 rgba(15, 23, 42, 0.40) 40%,
 rgba(15, 23, 42, 0.55) 100%
 );
}
.hero-video-content {
 position: relative;
 pointer-events: auto;
 z-index: 1;
}
/* CTA cards — professional high-contrast design */
.hero-cta-card {
 background: #ffffff;
 border: 1px solid rgba(255,255,255,0.9);
 border-radius: 1rem;
 box-shadow: 0 4px 24px rgba(0,0,0,0.15), 0 1px 4px rgba(0,0,0,0.08);
 transition: all 0.25s ease;
 text-decoration: none;
 cursor: pointer;
}
.hero-cta-card:hover {
 transform: translateY(-3px);
 box-shadow: 0 12px 36px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.1);
}
.hero-cta-card span.text-lg,
.hero-cta-card span.text-2xl {
 color: #0f172a !important;
 font-weight: 800;
}
.hero-cta-card span.text-sm {
 color: #5A2D6A !important;
 font-weight: 700;
 letter-spacing: 0.05em;
}
.hero-cta-card span.w-12 {
 background: #f3e8ff !important;
 color: #5A2D6A !important;
}
.hero-cta-card:hover span.w-12 {
 background: #e9d5ff !important;
 color: #4c1d95 !important;
}
.hero-h1 {
 text-shadow: 0 2px 30px rgba(0,0,0,0.35);
}
/* Mobile hero adjustments */
@media (max-width: 767px) {
 #scrolly-hero {
 height: auto;
 min-height: 130dvh;
 min-height: 130vh;
 background: url('/assets/images/hero/hero-bg.webp') center bottom / cover no-repeat;
 background-color: #0f172a;
 }
 #scrolly-video-container {
 display: none;
 }
 .hero-video-overlay {
 position: relative;
 }
 .hero-video-overlay-inner {
 position: relative;
 min-height: 130dvh;
 min-height: 130vh;
 padding-top: 4.5rem;
 padding-bottom: 2rem;
 align-items: center;
 justify-content: center;
 box-sizing: border-box;
 }
 .hero-video-content {
 padding-left: 1rem;
 padding-right: 1rem;
 }
 .hero-h1 {
 font-size: 2.25rem;
 line-height: 1.05;
 margin-bottom: 0.5rem;
 }
 .hero-video-content p {
 font-size: 0.9rem;
 margin-bottom: 1rem;
 line-height: 1.5;
 }
 .hero-video-content .flex-wrap {
 flex-direction: row;
 gap: 0.75rem;
 }
 .hero-cta-card {
 padding: 0.75rem 1rem;
 min-width: unset;
 width: auto;
 flex: 1;
 border-radius: 1rem;
 gap: 0.25rem;
 }
 .hero-cta-card span.w-12 {
 width: 2.25rem;
 height: 2.25rem;
 border-radius: 0.75rem;
 }
 .hero-cta-card span.w-12 svg {
 width: 1.25rem;
 height: 1.25rem;
 }
 .hero-cta-card span.text-lg {
 font-size: 0.9rem;
 }
 .hero-cta-card span.text-sm {
 font-size: 0.7rem;
 }
}

/* Keep nav fixed above the scrolly hero (background-attachment:fixed breaks this in Chrome/Safari) */
body:has(#scrolly-hero) > header {
 position: fixed !important;
 top: 0 !important;
 left: 0 !important;
 right: 0 !important;
 width: 100% !important;
 z-index: 60 !important;
}