/* Cinematic blue treatment. Base layout and forms stay in styles.css. */
@layer effects {
 :root { --blue:#347bff; --navy:#030c18; --ink:#eef6ff; --muted:#a0b3c9; --ice:#0a192d; --line:#20354d; color-scheme:dark; }
 body { background:#040d19; color:var(--ink); }
 .container { width:min(1320px,calc(100% - 112px)); }
 h1,h2,h3 { letter-spacing:-.055em; }
 p { color:#a6b6c9; }
 .eyebrow { color:#77bdff; font-size:.75rem; letter-spacing:.16em; }
 .review-banner { background:#081728; color:#a1bad2; border-bottom:1px solid #1d3550; }
 .site-header { background:#050e1bd9; border-color:#ffffff0d; backdrop-filter:blur(20px); }
 .header-inner { min-height:88px; }
 .brand small { color:#9cb3cf; }
 .brand img { filter:drop-shadow(0 0 13px #146aff50); }
 nav>a:not(.button) { color:#b2c2d6; }
 nav>a:not(.button):hover { color:white; }
 .button { position:relative; overflow:hidden; border:1px solid #84b9ff50; background:linear-gradient(120deg,#237cff,#2455e6); box-shadow:0 6px 30px #1269ff24,inset 0 1px 0 #ffffff35; border-radius:4px; }
 .button::before { content:''; position:absolute; inset:-100% -50%; background:linear-gradient(100deg,transparent 40%,#ffffff25 50%,transparent 60%); transform:translateX(-65%); transition:transform .65s; pointer-events:none; }
 .button:hover::before { transform:translateX(65%); }
 .button:hover { background:#256eff; box-shadow:0 8px 45px #146eff70; transform:translateY(-3px); }
 .button>span { transition:transform .25s; }
 .button:hover>span { transform:translate(3px,-3px); }

 /* Hero: a liquid sculpture, light trails and a slow atmospheric particle field. */
 .hero { position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(ellipse at 80% 38%,#073263 0%,#071728 36%,#030c18 68%); }
 .hero-grid { position:relative; grid-template-columns:1fr; min-height:660px; padding:92px 0 95px; gap:0; }
 .hero-copy { max-width:850px; z-index:3; pointer-events:none; }
 .hero-copy a { pointer-events:auto; }
 .hero-copy .eyebrow { margin-bottom:34px; font-size:.7rem; letter-spacing:.16em; }
 .blue-dot { background:#7bd9ff; border-color:#153e66; box-shadow:0 0 20px #3daeff; }
 .hero h1 { font-size:clamp(5rem,10.5vw,10rem); line-height:.84; font-weight:900; letter-spacing:-.075em; }
 .hero h1 .hero-word { color:#f1f7ff; display:block; width:fit-content; }
 .hero h1 .chrome-text,.chrome-text { color:#84caff; background:linear-gradient(165deg,#ffffff 5%,#c8e8ff 24%,#74b6ff 39%,#1d72df 51%,#b2edff 68%,#f5fbff 80%,#67b4ff 95%); background-clip:text; -webkit-text-fill-color:transparent; }
 .hero h1 .hero-word:nth-child(2) { margin-top:10px; }
 .hero h1 .hero-subline { display:block; margin-top:28px; color:#d3e4f4; font-size:clamp(1.15rem,2.25vw,2rem); font-weight:400; letter-spacing:-.025em; line-height:1.3; }
 .hero-invitation>p { margin-top:22px; font-size:1rem; line-height:1.8; color:#a3b7ce; }
 .hero-actions { align-items:center; margin-top:30px; gap:28px; }
 .hero-actions .text-link { color:#c9d9eb; font-size:.85rem; gap:11px; }
 .hero-actions .button { font-size:.9rem; }
 .play-circle { border:1px solid #7897b45c; border-radius:50%; width:34px; height:34px; display:grid; place-items:center; }
 .hero-note { margin-top:25px; color:#819ab4; font-size:.75rem; }
 .status-dot { width:5px; height:5px; border-radius:50%; background:#70baff; }
 .water-particles,.hero-grid-lines,.hero-halo { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:-1; }
 .hero-grid-lines { background-image:linear-gradient(#6bc1ff07 1px,transparent 1px),linear-gradient(90deg,#6bc1ff07 1px,transparent 1px); background-size:90px 90px; mask-image:linear-gradient(90deg,transparent,#000); }
 .hero-halo { background:radial-gradient(ellipse at 80% 40%,#1472fb25,transparent 48%); animation:halo-breathe 7s ease-in-out infinite alternate; }
 .liquid-stage { position:absolute; width:640px; height:650px; right:-75px; top:15px; pointer-events:none; perspective:900px; }
 .liquid-float { position:absolute; inset:-65px 0 -25px; animation:liquid-float 7s ease-in-out infinite; }
 .liquid-drop { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 30px #147aff30); transform:rotate(14deg) rotateY(var(--tilt-x,0deg)) rotateX(var(--tilt-y,0deg)); transition:transform .6s ease-out; }
 .orbit { position:absolute; width:620px; height:230px; top:265px; left:10px; border:1px solid #6ecbff45; border-radius:50%; transform:rotate(-28deg); box-shadow:0 0 25px #146eff12,inset 0 0 20px #147aff12; }
 .orbit::after { content:''; position:absolute; inset:-2px; border-radius:50%; border-top:2px solid #95e8ff; border-bottom:1px solid #1e7bff80; filter:drop-shadow(0 0 5px #6dcaff); animation:orbit-glow 5s ease-in-out infinite alternate; }
 .orbit-two { width:690px; height:265px; left:-25px; top:240px; transform:rotate(-28deg); opacity:.3; }
 .orbit-three { width:500px; height:530px; left:100px; top:55px; transform:rotate(33deg); border-style:dashed; opacity:.18; }
 .orbit-three::after { display:none; }
 .satellite { position:absolute; background:radial-gradient(circle at 28% 25%,white,#86d9ff 12%,#175398 34%,#06112a 70%,#64b9ff); border-radius:50%; box-shadow:0 0 26px #398ef840; animation:satellite-drift 8s ease-in-out infinite alternate; }
 .satellite-one { width:33px; height:33px; right:83px; top:142px; }
 .satellite-two { width:19px; height:19px; left:119px; top:460px; animation-delay:-3s; }
 .satellite-three { width:10px; height:10px; right:58px; top:490px; animation-delay:-5s; }
 .stage-cross { position:absolute; color:#7dcbff70; font-size:1.3rem; font-weight:300; }
 .cross-one { top:105px; left:126px; }.cross-two { bottom:48px; right:100px; }
 .stage-caption { position:absolute; bottom:5px; left:260px; color:#76b9ec; font-size:2.25rem; font-weight:300; letter-spacing:-.06em; }
 .stage-caption span { display:block; font-size:.55rem; letter-spacing:.16em; color:#6690b0; margin-top:5px; }
 .hero-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; border-top:1px solid #6aa1d523; position:relative; z-index:4; }
 .scroll-cue { display:flex; align-items:center; gap:16px; font-size:.65rem; letter-spacing:.15em; color:#a0bad3; }
 .scroll-cue>span { font-size:1.3rem; color:#9cdcfe; animation:scroll-nudge 2s ease-in-out infinite; }
 .hero-coordinate { font-size:.6rem; letter-spacing:.2em; color:#52728e; }
 .motion-toggle { background:transparent; color:#a5bdd4; font-size:.75rem; padding:10px 0 10px 14px; min-height:44px; }
 .motion-toggle span { margin-left:12px; color:#84cfff; }
 .kinetic-strip { overflow:hidden; background:#176cff; color:#fff; padding:19px 0; border-top:1px solid #9acbff60; border-bottom:1px solid #9acbff60; }
 .ticker-track { display:flex; width:max-content; animation:ticker 30s linear infinite; }
 .ticker-track>span { display:flex; align-items:center; white-space:nowrap; font-weight:800; font-size:1.15rem; letter-spacing:.04em; }
 .ticker-track i { font-size:1.7rem; margin:0 45px; font-style:normal; color:#8ecbff; }

 /* Cards react to the pointer without affecting their links or text. */
 .section { padding:110px 0; }
 .services { position:relative; background:radial-gradient(ellipse at 15% 80%,#0b234050,transparent 55%); }
 .section-heading { gap:80px; }
 .section-heading h2 { font-size:clamp(2.5rem,4.6vw,4.1rem); }
 .service-card,.service-card:nth-child(2) { background:linear-gradient(145deg,#112338,#07131f); border:1px solid #274058; padding:42px; border-radius:9px; transition:transform .35s,border-color .35s,box-shadow .35s; isolation:isolate; }
 .service-card::before { content:''; position:absolute; left:50%; top:0; width:700px; height:700px; background:radial-gradient(350px circle at center,#237fff25,transparent 75%); transform:translate3d(calc(-50% + var(--glow-offset-x,0px)),calc(-50% + var(--glow-offset-y,0px)),0); pointer-events:none; z-index:-1; }
 @media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .service-card::before { transition:transform 1.8s cubic-bezier(.22,.61,.36,1); }
  .service-card:hover::before { transition-duration:.12s; transition-timing-function:linear; }
 }
 .service-card::after { content:''; position:absolute; width:160px; height:160px; right:-48px; bottom:-57px; border:1px solid #3a7dba45; border-radius:50%; box-shadow:0 0 0 30px #347bbc09,0 0 0 60px #347bbc05; pointer-events:none; }
 .service-card:hover { border-color:#4da5ff; box-shadow:0 20px 60px #0005,0 0 30px #147aff10; transform:translateY(-6px); }
 .service-icon { color:#77c8ff; filter:drop-shadow(0 0 12px #3196ff40); }
 .service-number { color:#2d4e6b; font-size:4rem; line-height:1; letter-spacing:-.065em; font-weight:800; top:29px; right:34px; }
 .service-card .service-detail { color:#849ab3; border-color:#ffffff13; }
 .service-card .text-link { color:#7fc7ff; }

 /* Interactive concept comparison; the original image is not a real job. */
 .wash-section { padding:0 0 120px; }
 .wash-section .section-heading { grid-template-columns:1.4fr 1fr; }
 .demo-disclaimer { display:inline-block; color:#7491ac; font-size:.8rem; margin-top:12px; }
 .wash-frame { --clean:54%; --split:46%; border:1px solid #2e536e; padding:9px; border-radius:12px; background:#0c1b2b; box-shadow:0 25px 100px #0058c218; }
 .comparison-scene { height:460px; position:relative; overflow:hidden; border-radius:5px; isolation:isolate; cursor:ew-resize; touch-action:pan-y; user-select:none; }
 .comparison-scene>img,.wash-dirty,.wash-dirty img,.grime { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 57%; }
 .wash-dirty { clip-path:inset(0 var(--clean) 0 0); filter:sepia(.8) saturate(.45) brightness(.62); }
 .grime { background:repeating-radial-gradient(ellipse at 15% 30%,#13201933 0 2px,transparent 3px 8px),linear-gradient(45deg,#23351b70,transparent); mix-blend-mode:multiply; }
 .wash-beam { position:absolute; top:0; bottom:0; left:var(--split); width:2px; background:#d3faff; box-shadow:0 0 15px 3px #40bfff,0 0 60px 12px #72deff90; pointer-events:none; }
 .wash-beam span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; display:grid; place-items:center; border:1px solid #9fdfff; border-radius:50%; background:#082b51e8; color:white; font-size:1.5rem; box-shadow:0 0 30px #058dff60; }
 .comparison-label { position:absolute; top:22px; padding:7px 12px; background:#08192ee8; border:1px solid #90caff50; color:#dbeeff; font-size:.75rem; letter-spacing:.05em; }
 .label-before { left:22px; }.label-after { right:22px; }
 .comparison-tag { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); white-space:nowrap; padding:7px 13px; background:#07192be8; font-size:.75rem; letter-spacing:.04em; color:#c4d9ed; }

 .about { position:relative; overflow:hidden; background:linear-gradient(115deg,#0c2d52,#081a32 65%); border-block:1px solid #264464; }
 .about::before { content:''; position:absolute; width:600px; height:600px; border:1px solid #2478cf30; border-radius:50%; right:-180px; top:-150px; box-shadow:0 0 0 70px #2879cc07,0 0 0 140px #2879cc05; pointer-events:none; }
 .about-grid { position:relative; }
 .about h2 span { color:#80bfff; }
 #work { background:radial-gradient(ellipse at 80% 50%,#07335d30,transparent 60%); }
 .gallery-image { border:1px solid #34506a; transition:border-color .3s,transform .4s; }
 .gallery-card:hover .gallery-image { transform:translateY(-5px); border-color:#76bbff; }
 .gallery-image img { filter:saturate(.7); }
 .gallery-image .image-badge { background:#051729e8; color:#bfd8eb; border:1px solid #ffffff20; }
 .placeholder-scene { background:linear-gradient(140deg,#122940,#071626); color:#446b90; }
 .gallery-card figcaption>span { color:#7ebfff; }
 .contact-section { position:relative; background:radial-gradient(ellipse at 10% 60%,#123866 0,transparent 55%),#061222; border-top:1px solid #1c3851; }
 .contact-copy h2 { font-size:clamp(2.8rem,4.5vw,4rem); }
 .contact-item small { color:#7897b6; }.contact-item svg { stroke:#64b6ff; }.contact-note { color:#a2bbd2; }
 form { position:relative; background:#0d1e32b8; border:1px solid #2f526f; box-shadow:0 20px 70px #0004,inset 0 1px 0 #bddfff12; backdrop-filter:blur(16px); }
 input,select,textarea { background:#071423; border-color:#2c4760; color:#e0efff; }
 input::placeholder,textarea::placeholder { color:#7c92a9; }
 input:focus,select:focus,textarea:focus { border-color:#65b5ff; box-shadow:0 0 18px #148cff12; }
 .form-status { color:#83dfc2; }.optional { color:#98b1ca; }
 footer { background:#030a13; }.footer-bottom { border-color:#1c3044; }
 .footer-top>p { color:#7293af; }
 .skip-link { background:#113257; }
 .gallery-dialog { background:#0c2137; }
 .dialog-close { background:#d9edff; color:#0a2540; }

 @keyframes liquid-float { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-16px) rotate(2deg); } }
 @keyframes satellite-drift { to { transform:translate(9px,-24px); } }
 @keyframes halo-breathe { to { opacity:.4; transform:scale(1.15); } }
 @keyframes orbit-glow { to { opacity:.3; } }
 @keyframes scroll-nudge { 50% { transform:translateY(5px); } }
 @keyframes ticker { to { transform:translateX(-50%); } }
 [data-motion="paused"] *,[data-motion="paused"] *::before,[data-motion="paused"] *::after { animation-play-state:paused!important; }

 @media(min-width:1500px) { .liquid-stage { right:-20px; }.hero-grid { min-height:730px; } }
 @media(max-width:1100px) {
  .container { width:calc(100% - 64px); }.hero-grid { min-height:640px; padding-top:85px; }.hero h1 { font-size:11vw; }
  .liquid-stage { width:550px; right:-95px; top:40px; opacity:.85; }.hero-copy { max-width:710px; }
  .orbit { width:530px; }.orbit-two { width:600px; }.orbit-three { width:430px; }
  .service-card { padding:32px; }.service-number { font-size:3.4rem; }.section-heading { gap:45px; }
 }
 @media(max-width:800px) {
  .hero-grid { min-height:600px; padding-top:73px; }.hero h1 { font-size:11.8vw; }.hero-copy .eyebrow { font-size:.6875rem; }
  .hero-invitation>p { max-width:340px; }.hero-actions { flex-direction:column; align-items:start; gap:12px; }
  .liquid-stage { right:-150px; top:5px; opacity:.62; }.hero-copy { max-width:none; }
  .hero-coordinate { display:none; }.stage-caption { left:260px; bottom:50px; }
  .section { padding:80px 0; }.wash-section { padding-bottom:85px; }.comparison-scene { height:380px; }
  .wash-section .section-heading { grid-template-columns:1fr; gap:24px; }.wash-section .section-heading>p { max-width:none; }
 }
 @media(max-width:620px) {
  .container { width:calc(100% - 40px); }.header-inner { min-height:78px; }.brand small { font-size:.55rem; }
  .menu-toggle { background:#142942; }.menu-toggle span { background:#c5e8ff; }nav { background:#071626; border-color:#23405e; }
  .hero-grid { padding-top:45px; padding-bottom:0; min-height:0; display:block; }
  .hero h1 { font-size:15.1vw; line-height:.9; letter-spacing:-.075em; }.hero h1 .hero-word:nth-child(2) { margin-top:3px; }
  .hero h1 .hero-subline { font-size:1.15rem; margin-top:20px; }.hero-copy .eyebrow { font-size:.6875rem; letter-spacing:.06em; margin-bottom:25px; gap:8px; }
  .hero .blue-dot { width:5px; height:5px; border-width:3px; }.hero-invitation>p { font-size:.92rem; margin-top:19px; max-width:325px; }
  .hero-copy { pointer-events:auto; }.hero-actions { margin-top:24px; gap:9px; }.hero-actions .button { font-size:.85rem; min-height:52px; }.hero-actions .text-link { font-size:.8rem; }
  .hero-note { margin-top:14px; font-size:.7rem; color:#96b5d2; }.liquid-stage { position:relative; width:390px; max-width:calc(100% + 40px); height:410px; inset:auto; margin:10px -20px 0; opacity:1; z-index:1; }
  .liquid-float { inset:-45px 0 -15px; }.orbit { width:390px; height:140px; top:195px; left:0; }.orbit-two { width:430px; height:160px; top:180px; left:-20px; }.orbit-three { width:300px; height:320px; top:48px; left:45px; }
  .satellite-one { right:56px; top:97px; width:23px; height:23px; }.satellite-two { top:310px; left:85px; width:12px; height:12px; }.satellite-three { top:337px; right:75px; }
  .cross-one { left:57px; top:92px; }.cross-two { right:87px; bottom:32px; }.stage-caption { left:28px; bottom:40px; font-size:1.8rem; }.stage-caption span { max-width:80px; font-size:.45rem; }
  .hero-bottom { padding:9px 0; }.scroll-cue { font-size:.55rem; gap:10px; }.motion-toggle { font-size:.7rem; }
  .ticker-track>span { font-size:.9rem; }.ticker-track i { margin:0 25px; font-size:1.2rem; }.kinetic-strip { padding:15px 0; }
  .section { padding:67px 0; }.section-heading h2 { font-size:2.65rem; }.section-heading { gap:22px; }
  .service-card { padding:30px; }.service-number { font-size:3.5rem; top:22px; right:26px; }
  .wash-section { padding-bottom:70px; }.wash-section .section-heading h2 { font-size:2.6rem; }
  .comparison-scene { height:340px; }.comparison-scene>img,.wash-dirty img { object-position:50% 52%; }
  .comparison-label { font-size:.6875rem; top:13px; padding:5px 7px; letter-spacing:0; }.label-before { left:10px; }.label-after { right:10px; }
  .comparison-tag { font-size:.6875rem; letter-spacing:0; padding:6px 9px; bottom:10px; white-space:normal; width:max-content; max-width:calc(100% - 20px); text-align:center; }.wash-beam span { width:40px; height:40px; font-size:1.15rem; }
  .contact-copy h2 { font-size:3rem; }.hero-coordinate { display:none; }
 }
 @media(max-width:360px) {
  .brand strong { font-size:1.15rem; }.brand small { font-size:.47rem; }
  .hero h1 { font-size:14.8vw; }.hero h1 .hero-subline { font-size:1rem; }.hero-invitation>p { font-size:.86rem; }.hero-actions .button { font-size:.78rem; }
  .section-heading h2,.wash-section .section-heading h2 { font-size:2.2rem; }
 }
 @media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .liquid-drop { transform:rotate(14deg); }.water-particles { display:none; }
 }
}