:root { --blue:#0966d4; }
.hero { display:block; min-height:790px; padding:86px max(24px,7vw) 150px; overflow:hidden; background:#06182f; }
.hero:before { z-index:0; background:linear-gradient(90deg,#031124f5 0%,#031124e8 36%,#03112460 70%,#03112430),linear-gradient(0deg,#031124e8,transparent 40%); pointer-events:none; }
.hero-copy { position:relative; z-index:2; max-width:770px; }
.hero h1 { font-size:clamp(2.5rem,5.7vw,5.5rem); letter-spacing:-.055em; line-height:1.08; }
.hero h1 span { color:#70c5ff; }
.hero .intro { max-width:620px; font-size:1.15rem; margin:26px 0; }
.hero .trust-row { font-size:.875rem; max-width:680px; gap:12px 22px; }
.hero .google-profile-link { font-size:.875rem; }
.hero-film { position:absolute; inset:0; z-index:-1; border:0; border-radius:0; max-width:none; box-shadow:none; }
.film-media { width:100%; height:100%; aspect-ratio:auto; }
.film-media video { object-fit:cover; object-position:center; }
.film-caption { display:none; }
#film-toggle { z-index:3; position:absolute; right:max(24px,7vw); top:26px; font-size:.875rem; background:#061b3aa6; backdrop-filter:blur(10px); }
/* Keep the control above the visual overlay without blocking page actions. */
.hero-film { z-index:0; }
.hero:before { z-index:1; }
.hero-chapters { position:absolute; z-index:2; bottom:32px; left:max(24px,7vw); right:max(24px,7vw); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.hero-chapters button { border:0; border-top:1px solid #ffffff66; text-align:left; padding:17px 0; color:#d0dcec; background:transparent; font:700 1rem Manrope,Arial,sans-serif; position:relative; cursor:pointer; }
.hero-chapters button span { font-size:.875rem; margin-right:15px; color:#81ccff; }
.hero-chapters button[aria-pressed=true] { color:#fff; }
.hero-chapters i { position:absolute; top:-1px; left:0; height:3px; background:#63beff; width:0; }
.hero-chapters button[aria-pressed=true] i { width:var(--chapter-progress,0%); }
.services { overflow:hidden; padding-left:0; padding-right:0; background:#f7faff; }
.services .section-heading { max-width:960px; padding:0 max(24px,7vw); box-sizing:content-box; margin-bottom:32px; }
.services h2 { font-size:clamp(2rem,4.5vw,4.3rem); max-width:760px; }
.service-tabs { display:flex; flex-wrap:wrap; gap:9px; padding:0 max(24px,7vw); }
.service-tabs button { padding:11px 18px; border:1px solid #cad8e8; border-radius:30px; background:white; color:#203a56; font:700 .875rem Manrope,Arial,sans-serif; cursor:pointer; min-height:44px; transition:background .2s,color .2s; }
.service-tabs button[aria-pressed=true] { color:#fff; background:#072b53; border-color:#072b53; }
.carousel-controls { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:24px max(24px,7vw); }
.carousel-controls p { margin:0; color:#526277; font-size:.875rem; }
.carousel-controls>div { display:flex; align-items:center; gap:10px; flex-shrink:0; }
#service-count { margin-right:15px; font-size:.875rem; color:#294d70; font-variant-numeric:tabular-nums; }
.carousel-controls button { width:48px; height:48px; border-radius:50%; border:1px solid #b8cce0; background:white; color:#082e56; font-size:1.4rem; cursor:pointer; }
.carousel-controls button:hover { background:#e2effc; }
.carousel-controls button:disabled { opacity:.35; cursor:default; }
.service-grid { display:flex; gap:24px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-left:max(24px,7vw); padding:8px max(24px,7vw) 25px; scrollbar-width:none; touch-action:pan-x pan-y; align-items:stretch; cursor:grab; }
.service-grid::-webkit-scrollbar { display:none; }
.service-grid.dragging { cursor:grabbing; scroll-snap-type:none; user-select:none; }
.service-grid article { flex:0 0 365px; scroll-snap-align:start; min-width:0; border:1px solid #d4dfec; border-radius:10px; box-shadow:0 8px 20px #082b5310; transition:box-shadow .25s; scroll-margin:0; }
.service-grid article:hover { transform:none; box-shadow:0 12px 25px #082b5320; }
.service-photo { aspect-ratio:4/3; }
.service-photo img { object-position:center!important; }
.service-grid h3 { font-size:1.45rem; line-height:1.25; min-height:3.7rem; }
.service-grid p { font-size:1rem; }
.service-grid article a { border-top:1px solid #dce6f1; padding-top:18px; }
.carousel-progress { margin:8px max(24px,7vw) 0; height:3px; background:#dce7f2; border-radius:2px; }
.carousel-progress span { display:block; height:100%; width:12.5%; background:#0966d4; transition:width .2s; }
.image-note { margin:16px max(24px,7vw) 0; color:#65768a; font-size:.75rem; }
.clients { background:linear-gradient(120deg,#06182f,#0c3761); }
.client-list article { padding-left:22px; }
.client-list article:first-child { padding-left:0; }
.client-list h3 { color:#7dcbff; }
.contact { background:linear-gradient(125deg,#0966d4,#063579); }
#film-toggle { position:relative; inset:auto; margin-top:18px; }
@media(min-width:1500px) { .service-grid article { flex-basis:calc((86vw - 48px)/3); } }
@media(max-width:900px) { .hero { min-height:820px; padding-top:65px; } .hero h1 { font-size:clamp(2.6rem,7.5vw,4.5rem); } .hero:before { background:linear-gradient(90deg,#031124ed,#031124a8),linear-gradient(0deg,#031124,transparent); } }
@media(max-width:600px) { .hero { padding:44px 20px 125px; min-height:790px; } .hero h1 { font-size:clamp(2.4rem,10.7vw,3.7rem); } .hero .intro { font-size:1rem; } .hero .actions { flex-direction:row; } .hero .actions .btn { width:auto; flex:1; padding:13px 12px; } .hero .trust-row { display:flex; } .hero .google-profile-link { display:block; margin-top:18px; } .hero-chapters { left:20px; right:20px; gap:12px; bottom:20px; } .hero-chapters button { font-size:.875rem; } .hero-chapters button span { display:block; margin-bottom:6px; } .service-grid article { flex-basis:84vw; } .service-grid { gap:16px; } .service-tabs { flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; scrollbar-width:none; } .service-tabs button { flex-shrink:0; } .carousel-controls { padding-top:18px; padding-bottom:14px; } .carousel-controls p { max-width:130px; } #service-count { margin-right:3px; } .client-list article:first-child { padding-left:22px; } }
@media(prefers-reduced-motion:reduce) { .hero-chapters i,.carousel-progress span,.service-tabs button { transition:none; } }
.service-grid::after { content:""; flex:0 0 var(--end-space,0px); }