/* Visible, reusable motion; all content remains readable without JavaScript. */
:root{--green:#2D7C35;--green-dark:#0C5D1D;--green-light:#93E5CA}
.cta .btn:not(.outline):not(.light){background:var(--green);box-shadow:0 8px 26px #04490b30;border:1px solid #93e5ca40}
.cta .btn:not(.outline):not(.light):hover{background:var(--green-dark);box-shadow:0 12px 30px #04490b55}
.checks span{color:var(--green-light)}
.hero>img{animation:hero-ken-burns 10s ease-in-out infinite alternate;transform-origin:68% 48%;will-change:transform;backface-visibility:hidden}
@keyframes hero-ken-burns{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.18) translate3d(-1.8%,.8%,0)}}
/* These service rows and the process steps reveal as an ordered group. */
.additional-services.motion-ready:not(.is-visible) .additional-heading,.additional-services.motion-ready:not(.is-visible) .additional-list>li{opacity:0;transform:translateX(-58px)}
.additional-services.motion-ready.is-visible .additional-heading{animation:service-enter 1s cubic-bezier(.2,.7,.2,1) both}
.additional-services.motion-ready.is-visible .additional-list>li{animation:service-enter 1s cubic-bezier(.2,.7,.2,1) var(--entry-delay,0ms) both}
.additional-list>li{position:relative}
.additional-list>li::after{content:'';position:absolute;bottom:-8px;left:0;width:calc(100% - 23px);height:2px;background:linear-gradient(90deg,#93e5ca,#2d7c3580,transparent);transform-origin:left;transform:scaleX(0)}
.additional-services.is-visible .additional-list>li::after{animation:service-line 1.1s var(--entry-delay,0ms) cubic-bezier(.2,.7,.2,1) both}
.steps.motion-ready.is-visible .step{animation:service-enter 1s cubic-bezier(.2,.7,.2,1) var(--step-delay) both}
@keyframes service-enter{from{opacity:0;transform:translate3d(-58px,12px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes service-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* The image is decoded before this waterline-style wipe begins. */
.portrait.photo-ready:not(.photo-visible) img{opacity:0;clip-path:inset(0 100% 0 0 round 80px 18px 80px 18px);transform:scale(1.1)}
.portrait.photo-ready.photo-visible img{animation:portrait-water-reveal 2s cubic-bezier(.2,.65,.2,1) both}
.portrait.photo-ready.photo-visible::before{animation:frame-unveil 1.6s .3s ease both}
.portrait.photo-ready.photo-visible::after{animation:frame-unveil 1.3s .55s ease both}
.portrait.photo-ready.photo-visible .caption{animation:caption-unveil .9s 1.2s cubic-bezier(.2,.7,.2,1) both}
.portrait .image-sheen{position:absolute;inset:12px 28px 28px 12px;border-radius:80px 18px 80px 18px;overflow:hidden;pointer-events:none;z-index:1}
.portrait .image-sheen::before{content:'';position:absolute;inset:-20% -40%;background:linear-gradient(105deg,transparent 35%,#d5fbff70 49%,transparent 61%);transform:translateX(-85%);opacity:0}
.portrait.photo-visible .image-sheen::before{animation:portrait-sheen 2.1s .2s ease both}
@keyframes portrait-water-reveal{0%{opacity:0;clip-path:inset(0 100% 0 0 round 80px 18px 80px 18px);transform:scale(1.1)}18%{opacity:1}100%{opacity:1;clip-path:inset(0 0 0 0 round 80px 18px 80px 18px);transform:scale(1)}}
@keyframes portrait-sheen{0%{transform:translateX(-85%);opacity:0}20%{opacity:.55}80%{opacity:.32}100%{transform:translateX(85%);opacity:0}}
/* Airy bubble rings and overlapping water ripples. */
.ambient .bubble{position:absolute;left:var(--x);bottom:var(--y);width:var(--size);height:var(--size);border:1px solid #b6edff70;border-radius:50%;background:radial-gradient(circle at 28% 25%,#ffffff60 0 2%,#a3e8ff08 11%,transparent 57%,#86dcff18 75%,#ffffff30 98%);box-shadow:inset 0 0 16px #b8eeff18,0 0 15px #0ea6f408;animation:bubble-rise var(--duration,15s) var(--delay,0s) ease-in-out infinite;opacity:0;animation-play-state:paused}
.in-view>.ambient .bubble{animation-play-state:running}
.ambient .water-ripple{position:absolute;right:-18%;bottom:-310px;width:850px;height:500px;border:1px solid #9adaff55;border-radius:48%;box-shadow:0 0 0 22px #9adaff0d,0 0 0 48px #9adaff08,0 0 0 82px #9adaff06;animation:water-flow 16s ease-in-out infinite alternate;animation-play-state:paused}
.in-view>.ambient .water-ripple{animation-play-state:running}
.about .water-ripple{right:auto;left:-35%;bottom:-270px}.process .ambient .bubble{border-color:#067ccb40;background:radial-gradient(circle at 28% 25%,#067ccb20,transparent 55%,#067ccb08);box-shadow:inset 0 0 12px #067ccb08}.process .water-ripple{border-color:#067ccb30;box-shadow:0 0 0 22px #067ccb08,0 0 0 48px #067ccb05}
.hero .ambient .bubble,.cta .ambient .bubble{border-color:#d5f4ff60}
@keyframes bubble-rise{0%{transform:translate3d(0,65px,0) scale(.88);opacity:0}15%{opacity:.65}75%{opacity:.4}100%{transform:translate3d(var(--drift,40px),-220px,0) scale(1.07);opacity:0}}
@keyframes water-flow{from{transform:translate3d(-30px,25px,0) rotate(-8deg) scale(.97)}to{transform:translate3d(35px,-30px,0) rotate(9deg) scale(1.08)}}
@media(max-width:700px){.ambient .bubble:nth-child(n+5){display:none}.ambient .water-ripple{width:600px;height:380px;bottom:-260px}.additional-list>li::after{bottom:0;width:100%}}
@media(prefers-reduced-motion:reduce){.hero>img,.ambient .bubble,.ambient .water-ripple,.portrait .image-sheen::before{animation:none!important;will-change:auto}.ambient .bubble{opacity:.2}.additional-services.motion-ready .additional-heading,.additional-services.motion-ready .additional-list>li,.steps.motion-ready .step{opacity:1;transform:none}.portrait.photo-ready img{opacity:1;clip-path:none;transform:none}.portrait.photo-ready::before,.portrait.photo-ready::after,.portrait.photo-ready .caption{opacity:1}}
/* Softer blues, tailored navigation, one quiet background motif per section. */
.services{background:linear-gradient(125deg,#214b6a 0%,#193f62 60%,#163957 100%)}
.services .heading p,.additional-list p{color:#d7e7f1}
header{background:linear-gradient(110deg,#071b35f7,#0a2544f7);border-bottom:1px solid #b28c462d;box-shadow:0 6px 24px #01112724;backdrop-filter:blur(18px)}
.nav{height:76px;max-width:1400px;gap:26px;padding:0 38px}
.brand{gap:14px}.brand img{width:85px;height:58px;mix-blend-mode:screen;border-radius:0}
.brand strong{font-size:16px;font-weight:600;letter-spacing:1.9px;color:#fff}.brand small{font-size:9px;letter-spacing:1.7px;color:#c2a36b;margin-top:8px}
.navlinks{gap:26px}.navlinks a{font-size:13px;font-weight:500;color:#e3edf5;position:relative;padding:9px 0;text-decoration:none!important}
.navlinks a::after{content:'';position:absolute;bottom:2px;left:0;height:1px;width:100%;background:#be9b5c;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.navlinks a:hover::after,.navlinks a:focus-visible::after{transform:scaleX(1)}
.navlinks .phone{padding-left:22px;margin-left:2px;border-left:1px solid #ffffff24;font-variant-numeric:tabular-nums;letter-spacing:.3px}
.nav>.btn{min-height:43px;padding:11px 20px;border-radius:8px;font-size:12px;font-weight:600;box-shadow:0 5px 20px #04490b20}
.hero{height:calc(100svh - 76px)}
.nav>.btn:not(.outline):not(.light),.hero .actions>.btn:not(.outline):not(.light){background:#067ccb;border:1px solid #2ac7fc55;box-shadow:0 8px 26px #067ccb30}
.nav>.btn:not(.outline):not(.light):hover,.hero .actions>.btn:not(.outline):not(.light):hover{background:#0665ab;box-shadow:0 12px 28px #067ccb40}
.hero .eyebrow::before{display:none}.herofoot{border-top:0}
.ambient::before,.ambient::after,.about::before{display:none}
.ambient .bubble{border-color:#c3efff55;box-shadow:inset 0 0 10px #b8eeff0c;background:radial-gradient(circle at 28% 25%,#ffffff38 0 2%,transparent 14%,transparent 62%,#86dcff0a 90%,#ffffff16 99%);animation-name:bubble-drift-soft}
@keyframes bubble-drift-soft{0%{transform:translate3d(0,36px,0) scale(.92);opacity:0}18%{opacity:.23}75%{opacity:.15}100%{transform:translate3d(var(--drift,25px),-150px,0) scale(1.03);opacity:0}}
.ambient .water-ripple{border-color:#9adaff3a;box-shadow:0 0 0 28px #9adaff08,0 0 0 57px #9adaff05;opacity:.65;animation-duration:22s}
.process .ambient .water-ripple{border-color:#067ccb24;box-shadow:0 0 0 28px #067ccb06,0 0 0 57px #067ccb04;opacity:.7}
@media(max-width:1100px){.navlinks .phone{display:none}.nav{gap:22px}.navlinks{gap:23px}}
@media(max-width:700px){.nav{height:70px;padding:0 20px;gap:12px}.brand{gap:10px}.brand img{width:65px;height:49px}.brand strong{font-size:12px;letter-spacing:1.5px}.brand small{font-size:8px;letter-spacing:.75px;margin-top:6px}.menu{padding:7px 11px;font-size:12px;border-color:#ffffff36;border-radius:8px}.navlinks{top:70px;background:#0a2544}.navlinks a{font-size:15px}.hero{height:calc(100svh - 70px)}.ambient .bubble{max-width:52px;max-height:52px}}
@media(prefers-reduced-motion:reduce){.ambient .bubble{opacity:.12;animation:none!important}.navlinks a::after{transition:none}}

/* The hero and CTA stay free of decorative section effects. */
.cta>img{animation:none!important;transform:none;will-change:auto}

/* Soft blue bubbles against the white process section. */
.process .ambient .bubble{border-color:#067ccb70;background:radial-gradient(circle at 28% 25%,#067ccb26 0 3%,transparent 15%,transparent 60%,#067ccb12 90%,#067ccb18 99%);box-shadow:inset 0 0 14px #067ccb0c;animation-name:process-bubbles}
@keyframes process-bubbles{0%{transform:translate3d(0,36px,0) scale(.92);opacity:0}18%{opacity:.38}75%{opacity:.25}100%{transform:translate3d(var(--drift,25px),-150px,0) scale(1.03);opacity:0}}

/* A deeper slate blue in the same hue family as the services section. */
.about{background:linear-gradient(125deg,#153951 0%,#102e47 65%,#0e2940 100%)}

/* Explicit header CTA colour, shared with the hero primary action. */
#site-header .header-cta{background:#067ccb;color:#fff;border-color:#2ac7fc55;box-shadow:0 8px 26px #067ccb30}
#site-header .header-cta:hover,#site-header .header-cta:focus-visible{background:#0665ab!important;color:#fff;box-shadow:0 12px 28px #067ccb40}