/* Hunter's Exterior Services: styles for every page on the site. */

:root{
  --blue:#1466ff; --cyan:#10c6e6; --lime:#caf25a; --coral:#ff6a3d;
  --ink:#0a1a3a; --slate:#5a6b8c; --sky:#eef4ff; --sky2:#e2ecff; --card:#ffffff;
  --line:#dbe6fb; --white:#fff; --deep:#07152e; --err:#c7361a;
  --grad:linear-gradient(135deg,#1466ff 0%,#10c6e6 100%);
  --grad-soft:linear-gradient(135deg,#eaf1ff,#e6f7fb);
  --grad-text:linear-gradient(90deg,#1466ff,#0fb6d6);
  --shadow:0 22px 50px -24px rgba(20,60,140,.45);
  --disp:'Fredoka',system-ui,'Segoe UI',sans-serif;
  --body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:22px;

  /* Background decoration */
  --dot:rgba(20,102,255,.10); --ring:rgba(20,102,255,.10); --streak:rgba(16,198,230,.12);
  --glow-b:rgba(20,102,255,.16); --glow-c:rgba(16,198,230,.22); --glow-l:rgba(202,242,90,.32);
  --b1:#bfe0ff; --b2:#c9f7ff; --b3:#eafabf;
  --bub-hi:rgba(255,255,255,.9); --bub-lo:rgba(180,220,255,.35); --bub-edge:rgba(255,255,255,.6);
  --wh:52px;
  --wave-top:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50' preserveAspectRatio='none'%3E%3Cpath d='M0 50V22C160 4 320 4 480 18S800 44 960 36 1280 8 1440 18V50Z'/%3E%3C/svg%3E");
  --wave-bot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50' preserveAspectRatio='none'%3E%3Cpath d='M0 0V28C160 46 320 46 480 32S800 6 960 14 1280 42 1440 32V0Z'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#eaf1ff; --slate:#9fb2d8; --sky:#0a1226; --sky2:#0e1830; --card:#111d38; --line:#22345c; --white:#111d38; --err:#ff8a66;
  --grad-soft:linear-gradient(135deg,#0e1830,#0c1e2c); --shadow:0 22px 50px -24px rgba(0,0,0,.65);
  --grad-text:linear-gradient(90deg,#6aa4ff,#43e0f5);
  --dot:rgba(140,180,255,.08); --ring:rgba(120,170,255,.09); --streak:rgba(16,198,230,.08);
  --glow-b:rgba(20,102,255,.22); --glow-c:rgba(16,198,230,.13); --glow-l:rgba(202,242,90,.07);
  --b1:rgba(20,102,255,.55); --b2:rgba(16,198,230,.4); --b3:rgba(202,242,90,.18);
  --bub-hi:rgba(190,225,255,.32); --bub-lo:rgba(60,140,255,.08); --bub-edge:rgba(160,210,255,.28);
}}
:root[data-theme="dark"]{
  --ink:#eaf1ff; --slate:#9fb2d8; --sky:#0a1226; --sky2:#0e1830; --card:#111d38; --line:#22345c; --white:#111d38; --err:#ff8a66;
  --grad-soft:linear-gradient(135deg,#0e1830,#0c1e2c); --shadow:0 22px 50px -24px rgba(0,0,0,.65);
  --grad-text:linear-gradient(90deg,#6aa4ff,#43e0f5);
  --dot:rgba(140,180,255,.08); --ring:rgba(120,170,255,.09); --streak:rgba(16,198,230,.08);
  --glow-b:rgba(20,102,255,.22); --glow-c:rgba(16,198,230,.13); --glow-l:rgba(202,242,90,.07);
  --b1:rgba(20,102,255,.55); --b2:rgba(16,198,230,.4); --b3:rgba(202,242,90,.18);
  --bub-hi:rgba(190,225,255,.32); --bub-lo:rgba(60,140,255,.08); --bub-edge:rgba(160,210,255,.28);
}
@media (max-width:640px){:root{--wh:30px}}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sky);color:var(--ink);font-family:var(--body);line-height:1.55;overflow-x:hidden}
h1,h2,h3{font-family:var(--disp);margin:0;font-weight:700;letter-spacing:-.01em;line-height:1.05}
img{max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.pill{display:inline-block;font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.02em;text-transform:uppercase;background:var(--lime);color:#173a00;padding:6px 14px;border-radius:999px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--disp);font-weight:600;font-size:16px;border:0;border-radius:999px;padding:14px 26px;cursor:pointer;transition:transform .14s,box-shadow .14s,filter .14s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.7;cursor:wait;transform:none}
.btn-blue{background:var(--grad);color:#fff;box-shadow:0 12px 28px -10px rgba(20,102,255,.6)}
.btn-lime{background:var(--lime);color:#173a00;box-shadow:0 12px 26px -12px rgba(140,190,20,.7)}
.btn-white{background:var(--white);color:var(--ink);border:2px solid var(--line)}
.btn-ghostw{background:rgba(255,255,255,.16);color:#fff;border:2px solid rgba(255,255,255,.5)}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

/* header */
header{position:sticky;top:14px;z-index:40;margin:14px auto 0;max-width:1180px;padding:0 14px}
.navbar{display:flex;align-items:center;gap:16px;background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px;padding:10px 12px 10px 20px;box-shadow:var(--shadow)}
/* logo: drop mark + two-line wordmark */
.brand{display:inline-flex;align-items:center;gap:11px;flex:0 0 auto}
.blob{width:40px;height:40px;border-radius:13px;background:var(--grad);display:flex;align-items:center;justify-content:center;transform:rotate(-8deg);flex:0 0 auto;box-shadow:0 8px 18px -8px rgba(20,102,255,.7)}
.blob svg{width:23px;height:23px;transform:rotate(8deg)}
.blob .drop{fill:#fff}
.blob .shine{fill:none;stroke:#1466ff;stroke-width:1.7;stroke-linecap:round;opacity:.5}
.wordmark{display:flex;flex-direction:column;line-height:1;white-space:nowrap}
.wordmark b{font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:-.01em;color:var(--ink)}
.wordmark small{font-family:var(--disp);font-weight:600;font-size:13.5px;margin-top:3px;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
nav.links{margin-left:auto;display:flex;gap:22px}
nav.links a{color:var(--slate);font-weight:600;font-size:15px}
nav.links a:hover{color:var(--ink)}
@media(max-width:980px){nav.links{display:none}}
.hphone{margin-left:auto;font-family:var(--disp);font-weight:600;color:var(--ink);font-size:16px;display:inline-flex;align-items:center;gap:7px}
@media(min-width:981px){.hphone{margin-left:0}}
@media(max-width:620px){.hphone .n{display:none}}
.navbar .btn{padding:11px 20px;font-size:15px;gap:0}
.navbar .btn .full{margin-left:.28em}
@media(max-width:560px){.navbar .btn .full{display:none}}

/* hero */
.hero{position:relative;padding:70px 0 calc(84px + var(--wh));text-align:center;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(var(--dot) 1.3px,transparent 1.8px) 0 0/24px 24px;-webkit-mask:radial-gradient(60% 70% at 50% 40%,#000,transparent 75%);mask:radial-gradient(60% 70% at 50% 40%,#000,transparent 75%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--wh);background:var(--deep);z-index:1;-webkit-mask:var(--wave-top) center/100% 100% no-repeat;mask:var(--wave-top) center/100% 100% no-repeat}
.hero .blob-bg{position:absolute;border-radius:50%;filter:blur(8px);opacity:.5;z-index:0}
.b1{width:380px;height:380px;background:radial-gradient(circle,var(--b1),transparent 68%);top:-80px;left:-120px}
.b2{width:420px;height:420px;background:radial-gradient(circle,var(--b2),transparent 68%);top:40px;right:-160px}
.b3{width:280px;height:280px;background:radial-gradient(circle,var(--b3),transparent 70%);bottom:-40px;left:40%}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(2.6rem,7vw,5.2rem);font-weight:700;max-width:15ch;margin:20px auto 0}
.u{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{font-size:1.2rem;color:var(--slate);max-width:48ch;margin:20px auto 0}
.hero .cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px}
.hero .tiny{font-family:var(--disp);font-weight:500;color:var(--slate);font-size:14px;margin-top:20px;display:flex;gap:10px 22px;flex-wrap:wrap;justify-content:center}
.hero .tiny b{color:var(--ink)}
.hero .tiny a:hover{color:var(--ink);text-decoration:underline}
.bubbles{position:absolute;inset:0;z-index:0;pointer-events:none}
.bub{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--bub-hi),var(--bub-lo));border:1px solid var(--bub-edge);animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@media (prefers-reduced-motion:reduce){.bub{animation:none}}

/* trust bar */
.trust{background:var(--deep);color:#fff}
.trust-in{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:center;padding:18px 22px}
.trust-in div{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:500;font-size:15px}
.trust-in .k{color:var(--lime)}
.trust-in b{font-weight:600}

/* marquee */
.marquee{background:var(--grad);color:#fff;padding:14px 0;overflow:hidden;white-space:nowrap}
.mq{display:inline-block;animation:scroll 26s linear infinite;font-family:var(--disp);font-weight:600;font-size:18px}
.mq span{margin:0 26px;opacity:.95}
.mq .dot{color:var(--lime)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq{animation:none}}

section{padding:88px 0}
.head{text-align:center;max-width:60ch;margin:0 auto 44px;padding:0 22px}
.head h2{font-size:clamp(2rem,4.6vw,3.2rem);margin-top:14px}
.head p{color:var(--slate);font-size:1.12rem;margin:14px 0 0}

/* ---------- Section backgrounds ---------- */

/* Soft tinted bands with wavy top and bottom edges. They overlap their neighbors
   by one wave height, so the neighbor's own background shows between the crests. */
.pkgs{background:
  radial-gradient(var(--dot) 1.2px,transparent 1.7px) 0 0/22px 22px,
  radial-gradient(38% 60% at 0% 25%,var(--glow-c),transparent 70%),
  radial-gradient(38% 60% at 100% 75%,var(--glow-l),transparent 70%),
  var(--grad-soft)}
.wavy{position:relative;z-index:1;margin:calc(-1 * var(--wh)) 0;padding:calc(88px + var(--wh)) 0;
  -webkit-mask:var(--wave-top) top/100% var(--wh) no-repeat,linear-gradient(#000 0 0) 0 calc(var(--wh) - 1px)/100% calc(100% - 2 * var(--wh) + 2px) no-repeat,var(--wave-bot) bottom/100% var(--wh) no-repeat;
  mask:var(--wave-top) top/100% var(--wh) no-repeat,linear-gradient(#000 0 0) 0 calc(var(--wh) - 1px)/100% calc(100% - 2 * var(--wh) + 2px) no-repeat,var(--wave-bot) bottom/100% var(--wh) no-repeat}

/* Decorated plain sections draw their pattern on a layer behind the content. */
.deco{position:relative;isolation:isolate;overflow:hidden}
.deco::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}

/* Spray streaks with a glow in the middle */
.sec-spray::before{
  background:radial-gradient(55% 55% at 50% 60%,var(--glow-b),transparent 70%),repeating-linear-gradient(115deg,transparent 0 34px,var(--streak) 34px 36px);
  -webkit-mask:radial-gradient(75% 70% at 50% 55%,#000 35%,transparent 80%);mask:radial-gradient(75% 70% at 50% 55%,#000 35%,transparent 80%)}
/* Two soft color glows in opposite corners */
.sec-glow::before{background:radial-gradient(420px 340px at 6% 22%,var(--glow-c),transparent 70%),radial-gradient(480px 380px at 96% 70%,var(--glow-l),transparent 70%),radial-gradient(50% 45% at 50% 55%,var(--glow-b),transparent 72%)}
/* Dot grid that fades out toward the edges */
.sec-dots::before{background:radial-gradient(50% 45% at 50% 55%,var(--glow-b),transparent 72%),radial-gradient(var(--dot) 1.3px,transparent 1.8px) 0 0/24px 24px;
  -webkit-mask:radial-gradient(70% 65% at 50% 55%,#000 30%,transparent 78%);mask:radial-gradient(70% 65% at 50% 55%,#000 30%,transparent 78%)}
/* Water ripples spreading out from the middle */
.sec-ripple::before{background:radial-gradient(circle at 50% 62%,var(--glow-c),transparent 300px),repeating-radial-gradient(circle at 50% 62%,transparent 0 44px,var(--ring) 44px 46px);
  -webkit-mask:radial-gradient(circle at 50% 62%,#000 120px,transparent 560px);mask:radial-gradient(circle at 50% 62%,#000 120px,transparent 560px)}

/* wash-it-yourself game */
.washer{max-width:920px;margin:0 auto;padding:0 22px}
.wash-stage{position:relative;aspect-ratio:4/3;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);border:4px solid var(--card);background:#cdd8e6;touch-action:none;user-select:none;-webkit-user-select:none}
@media (hover:hover) and (pointer:fine){.wash-stage{cursor:none}}
.wash-stage img,.wash-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.wash-stage img{object-fit:cover;pointer-events:none}
.wash-fx{pointer-events:none}
.wash-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(10,26,58,.8);color:#fff;font-family:var(--disp);font-weight:600;font-size:17px;padding:12px 20px;border-radius:999px;pointer-events:none;white-space:nowrap;animation:nudge 1.8s ease-in-out infinite;transition:opacity .3s}
.wash-hint.gone{opacity:0}
@keyframes nudge{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(calc(-50% + 16px),-50%)}}
@media (prefers-reduced-motion:reduce){.wash-hint{animation:none}}
.wash-done{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px 14px;background:var(--white);color:var(--ink);border-radius:22px;padding:14px 18px;box-shadow:var(--shadow);width:max-content;max-width:calc(100% - 28px);text-align:center}
.wash-done strong{font-family:var(--disp);font-size:1.3rem}
.wash-done span{color:var(--slate)}
.wash-done .btn{padding:10px 18px;font-size:15px}
.wash-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:18px}
.wash-meter{display:flex;align-items:center;gap:12px;flex:1;min-width:220px}
.wash-label{font-family:var(--disp);font-weight:600;color:var(--slate)}
.wash-track{flex:1;height:12px;border-radius:999px;background:var(--sky2);border:1px solid var(--line);overflow:hidden}
.wash-fill{height:100%;width:0;background:var(--grad);border-radius:999px;transition:width .25s}
.wash-pct{font-family:var(--disp);min-width:3.2em;text-align:right}
.wash-btns{display:flex;gap:10px}
.wash-btns .btn{padding:10px 18px;font-size:15px}

/* before/after sliders */
.ba-grid{display:grid;grid-template-columns:1fr;gap:22px;max-width:1040px;margin:0 auto}
@media(min-width:760px){.ba-grid{grid-template-columns:1fr 1fr}}
.ba-item{margin:0}
.ba-item figcaption{font-family:var(--disp);font-weight:600;font-size:1.05rem;margin-top:12px;text-align:center}
.ba-item figcaption span{color:var(--slate);font-weight:500}
.ba{--pos:50%;position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow);background:#cdd8e6;user-select:none;-webkit-user-select:none;border:4px solid var(--card)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.35);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:50%;width:48px;height:48px;border-radius:50%;background:var(--grad);border:3px solid #fff;color:#fff;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}
.ba-tag{position:absolute;top:12px;font-family:var(--disp);font-weight:600;font-size:13px;padding:5px 12px;border-radius:999px;pointer-events:none}
.ba-tag.b{left:12px;background:rgba(10,26,58,.78);color:#fff}
.ba-tag.a{right:12px;background:var(--lime);color:#173a00}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.ba:focus-within{outline:3px solid var(--cyan);outline-offset:3px}
.ba-hint{text-align:center;color:var(--slate);font-family:var(--disp);font-weight:500;font-size:14px;margin:24px 0 0}
.page-hero .ba{max-width:760px;margin:40px auto 0}

/* services rows */
.svc-list{display:flex;flex-direction:column;gap:16px;margin-top:20px}
.svc-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 26px;transition:transform .14s,box-shadow .14s,border-color .14s}
.svc-row:hover{transform:translateX(6px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--blue) 35%,var(--line))}
.svc-row .emoji{width:58px;height:58px;border-radius:16px;background:var(--grad-soft);display:flex;align-items:center;justify-content:center;font-size:27px;flex:0 0 auto}
.svc-row h3{font-size:1.32rem}
.svc-row p{color:var(--slate);margin:3px 0 0;font-size:.98rem}
.svc-row .num{font-family:var(--disp);font-weight:600;color:var(--slate);font-size:14px;background:var(--sky2);border-radius:999px;padding:6px 12px;white-space:nowrap}
.svc-row:hover .num{background:var(--grad);color:#fff}
@media(max-width:640px){.svc-row{grid-template-columns:auto 1fr;padding:18px}.svc-row .num{display:none}}

/* why + guarantee */
.why{display:grid;grid-template-columns:1fr;gap:16px;margin-top:20px}
@media(min-width:760px){.why{grid-template-columns:1fr 1fr}}
.why-item{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.why-item .ck{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--grad-soft);color:var(--blue);font-weight:800;display:flex;align-items:center;justify-content:center}
.why-item h3{font-size:1.12rem}
.why-item p{color:var(--slate);margin:5px 0 0;font-size:.96rem}
.why-item p a{color:var(--blue);font-weight:600}
.guarantee{position:relative;overflow:hidden;margin-top:24px;background:radial-gradient(60% 90% at 0% 0%,rgba(255,255,255,.22),transparent 60%),var(--grad);color:#fff;border-radius:26px;padding:34px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center;text-align:center}
.guarantee .seal{width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.18);border:3px solid rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;font-size:38px;flex:0 0 auto}
.guarantee h3{font-size:1.7rem}
.guarantee p{opacity:.95;margin:6px 0 0;max-width:52ch}

/* pricing */
.tiers{display:grid;grid-template-columns:1fr;gap:20px;margin-top:20px}
@media(min-width:820px){.tiers{grid-template-columns:1fr 1fr 1fr}}
.tier{background:var(--card);border:2px solid var(--line);border-radius:26px;padding:30px 26px;position:relative}
.tier.pop{border-color:var(--blue);box-shadow:var(--shadow);transform:scale(1.02)}
.tier .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;font-family:var(--disp);font-weight:600;font-size:12px;padding:5px 14px;border-radius:999px}
.tier h3{font-size:1.5rem}
.tier .price{font-family:var(--disp);font-weight:700;font-size:2.6rem;margin:10px 0 2px;color:var(--ink)}
.tier .price small{font-size:1rem;color:var(--slate);font-weight:500}
.tier ul{list-style:none;padding:0;margin:18px 0 24px}
.tier li{display:flex;gap:10px;padding:7px 0;color:var(--slate);font-size:.98rem}
.tier li .c{color:var(--blue);font-weight:800}
.tier .btn{width:100%}
.fineprint{text-align:center;color:var(--slate);font-size:13px;margin-top:18px}

/* reviews */
.rev{display:grid;grid-template-columns:1fr;gap:20px;margin-top:20px}
@media(min-width:760px){.rev{grid-template-columns:2fr 1fr}}
.rcard{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:26px;margin:0}
.rcard .stars{color:#f5a623;font-size:18px;letter-spacing:2px}
.rcard blockquote{margin:12px 0 0;font-size:1.05rem;line-height:1.6}
.rcard.feature blockquote{font-size:1.12rem}
.rcard .who{margin-top:16px;font-weight:600;font-size:14px;color:var(--slate)}
.rcard .who b{color:var(--ink)}
.rcard.ask{background:radial-gradient(70% 80% at 100% 0%,rgba(255,255,255,.22),transparent 60%),var(--grad);border:0;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;box-shadow:var(--shadow)}
.rcard.ask .big{font-size:34px;line-height:1}
.rcard.ask h3{font-size:1.6rem}
.rcard.ask p{margin:0;opacity:.95}
.rcard.ask .btn{margin-top:8px}

/* areas */
.towns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px;max-width:820px;margin-left:auto;margin-right:auto;padding:0 22px}
.town{font-family:var(--disp);font-weight:500;font-size:15px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 16px;box-shadow:0 8px 20px -14px rgba(20,60,140,.35)}

/* faq */
.faq-list{max-width:820px;margin:12px auto 0}
details{border:1px solid var(--line);background:var(--card);border-radius:16px;margin-bottom:12px;padding:0 20px}
summary{cursor:pointer;list-style:none;padding:18px 0;font-family:var(--disp);font-weight:600;font-size:1.08rem;display:flex;justify-content:space-between;gap:14px}
summary::-webkit-details-marker{display:none}
summary .pm{color:var(--blue);font-weight:800}
details p{color:var(--slate);margin:0 0 18px}
details p a{color:var(--blue);font-weight:600}

/* quote / finale */
.finale{background:radial-gradient(60% 80% at 0% 0%,rgba(255,255,255,.22),transparent 60%),var(--grad);color:#fff;border-radius:34px;padding:44px;margin:24px auto 0;max-width:1080px;position:relative;overflow:hidden}
@media(max-width:1124px){.finale{margin:24px 22px 0}}
@media(max-width:560px){.finale{padding:30px 20px}}
.finale::before,.finale::after{content:"";position:absolute;left:0;right:0;bottom:0;pointer-events:none;
  -webkit-mask:var(--wave-top) top/100% 60px no-repeat,linear-gradient(#000 0 0) 0 59px/100% 100% no-repeat;
  mask:var(--wave-top) top/100% 60px no-repeat,linear-gradient(#000 0 0) 0 59px/100% 100% no-repeat}
.finale::before{height:170px;background:rgba(255,255,255,.08)}
.finale::after{height:110px;background:rgba(255,255,255,.10);transform:scaleX(-1)}
.finale{--bub-hi:rgba(255,255,255,.9);--bub-lo:rgba(180,220,255,.35);--bub-edge:rgba(255,255,255,.6)}
.finale-grid{display:grid;grid-template-columns:1fr;gap:30px;align-items:center;position:relative;z-index:1}
@media(min-width:860px){.finale-grid{grid-template-columns:1fr 1fr}}
.finale h2{font-size:clamp(2rem,4.6vw,3rem)}
.finale .lead{font-size:1.15rem;opacity:.95;margin:12px 0 0;max-width:40ch}
.finale .fcta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.qform{background:var(--white);color:var(--ink);border-radius:22px;padding:24px;box-shadow:var(--shadow);position:relative}
.qform .field{margin-bottom:13px}
.qform label,.qform .flabel{display:block;font-family:var(--disp);font-weight:600;font-size:13px;margin-bottom:6px;color:var(--ink)}
.qform .opt{color:var(--slate);font-weight:500}
.qform .fhint{margin:5px 0 0;font-size:13px;color:var(--slate)}
.qform input,.qform select,.qform textarea{width:100%;font-family:var(--body);font-size:16px;color:var(--ink);background:var(--sky);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.qform input:focus,.qform select:focus,.qform textarea:focus{outline:2px solid var(--blue);outline-offset:0;border-color:transparent}
.qform .frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:420px){.qform .frow{grid-template-columns:1fr;gap:0}}
.qform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.qform .photo-pick{display:flex;align-items:center;gap:10px;border:2px dashed var(--line);border-radius:12px;padding:11px 13px;cursor:pointer;color:var(--slate);font-family:var(--body);font-size:14px;font-weight:500;background:var(--sky);margin:0}
.qform .photo-pick:hover{border-color:var(--blue)}
.qform .photo-pick:focus-within{outline:2px solid var(--blue)}
.qform .photo-pick input{position:absolute;opacity:0;width:1px;height:1px;padding:0;border:0}
.qform .photo-pick .cam{font-size:20px}
.qform .btn{width:100%;margin-top:4px}
.qform .note{font-size:12px;color:var(--slate);margin:9px 0 0;text-align:center;font-family:var(--disp);font-weight:500}
.qerr{color:var(--err);font-size:14px;font-weight:600;margin:0 0 10px}
.qerr a{text-decoration:underline}
.qdone{text-align:center;padding:26px 6px}
.qdone .mark{width:64px;height:64px;border-radius:50%;background:var(--grad);color:#fff;font-size:30px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.qdone h3{font-size:1.6rem}
.qdone p{color:var(--slate);margin:8px 0 0}
.qdone a{color:var(--blue);font-weight:600}

/* footer */
footer{position:relative;z-index:1;padding:calc(56px + var(--wh)) 0 30px;color:var(--slate);
  background:radial-gradient(var(--dot) 1.2px,transparent 1.7px) 0 0/22px 22px,var(--card);
  -webkit-mask:var(--wave-top) top/100% var(--wh) no-repeat,linear-gradient(#000 0 0) 0 calc(var(--wh) - 1px)/100% 100% no-repeat;
  mask:var(--wave-top) top/100% var(--wh) no-repeat,linear-gradient(#000 0 0) 0 calc(var(--wh) - 1px)/100% 100% no-repeat}
.foot{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:720px){.foot{grid-template-columns:1.5fr 1fr 1fr}}
.foot-h{font-family:var(--disp);font-weight:600;color:var(--ink);margin-bottom:8px}
.foot a{display:block;padding:4px 0;color:var(--slate)}
.foot .brand{display:inline-flex;padding:0}
.foot .blob{width:46px;height:46px;border-radius:15px}
.foot .blob svg{width:27px;height:27px}
.foot .wordmark b{font-size:25px}
.foot .wordmark small{font-size:15.5px}
.foot a:hover{color:var(--blue)}
.foot .fphone{color:var(--ink);font-weight:700;font-family:var(--disp);font-size:1.1rem;margin-top:12px}
.foot .farea{max-width:36ch;margin-top:12px;font-size:14px}
.legal{border-top:1px solid var(--line);margin-top:30px;padding-top:18px;font-size:13px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}

/* ---------- Service pages ---------- */
.page-hero{padding-top:56px}
.crumbs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;font-size:13px;color:var(--slate);margin-bottom:16px}
.crumbs a:hover{color:var(--blue);text-decoration:underline}
.page-hero h1{font-size:clamp(2.3rem,5.6vw,4.1rem);max-width:17ch}
.facts{display:grid;grid-template-columns:1fr;gap:12px;max-width:1080px;margin:40px auto 0;text-align:left}
@media(min-width:560px){.facts{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{background:color-mix(in srgb,var(--card) 88%,transparent);border:1px solid var(--line);border-radius:18px;padding:16px 18px;margin:0;box-shadow:0 12px 30px -22px rgba(20,60,140,.45)}
.fact dt{font-family:var(--disp);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--blue)}
.fact dd{margin:6px 0 0;font-size:.97rem}
.steps{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:700px){.steps{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.step .n{width:46px;height:46px;border-radius:14px;background:var(--grad);color:#fff;font-family:var(--disp);font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;transform:rotate(-6deg)}
.step h3{font-size:1.2rem}
.step p{color:var(--slate);margin:6px 0 0;font-size:.96rem}
.steps-note{text-align:center;color:var(--slate);margin:24px auto 0;max-width:60ch}
.prose-grid{display:grid;grid-template-columns:1fr;gap:22px;align-items:start}
@media(min-width:900px){.prose-grid{grid-template-columns:1.35fr .65fr}}
.prose{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:32px}
.prose h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin-top:14px}
.prose p{color:var(--slate);font-size:1.04rem}
.prose p a{color:var(--blue);font-weight:600}
.signs{background:radial-gradient(70% 80% at 100% 0%,rgba(255,255,255,.22),transparent 60%),var(--grad);color:#fff;border-radius:26px;padding:28px;box-shadow:var(--shadow)}
.signs h3{font-size:1.45rem}
.signs ul{list-style:none;padding:0;margin:16px 0 22px}
.signs li{display:flex;gap:10px;padding:6px 0}
.signs li .c{color:var(--lime);font-weight:800}
.signs .btn{width:100%}
.lost .svc-list{max-width:1180px}