:root,[data-theme="light"]{
  --bg:#f3f5f4; --bg2:#e9eeec; --surf:#ffffff; --surf2:#f7f9f8;
  --ink:#0d1b2a; --ink2:#2b3a48; --mute:#5a6b77; --line:rgba(13,27,42,.12); --line2:rgba(13,27,42,.06);
  --acc:#1f6f68; --acc2:#1e4d78; --acc-soft:rgba(31,111,104,.12); --acc-ink:#ffffff;
  --glow:#9fd9cc; --hi:#c9a45c;
  --ok:#18874a; --bad:#c2271d; --warn:#a85a00;
  --glass:rgba(255,255,255,.72); --glass-line:rgba(255,255,255,.9);
  --shadow:0 1px 2px rgba(13,27,42,.06),0 20px 50px -24px rgba(13,27,42,.28);
  --shadow-lg:0 40px 90px -40px rgba(13,27,42,.45);
  --map-land:#eef0ec; --map-bld:#dfe3de; --map-bld-edge:#cdd3cc; --map-road:#ffffff; --map-edge:#d4d9d2; --map-park:#cfe8cf; --map-path:#b5dbb3; --map-lot:#e5e8e3; --map-mark:#dfe2dc; --map-text:#5f6a62;
  --grain:.05; color-scheme:light;
}
[data-theme="dark"]{
  --bg:#07090a; --bg2:#0d1112; --surf:#111618; --surf2:#161c1e;
  --ink:#eef4f2; --ink2:#c9d4d1; --mute:#8b9a97; --line:rgba(238,244,242,.12); --line2:rgba(238,244,242,.06);
  --acc:#7fd6c6; --acc2:#9cc7f0; --acc-soft:rgba(127,214,198,.14); --acc-ink:#06201b;
  --glow:#2f8f80; --hi:#e2c27a;
  --ok:#3ddc84; --bad:#ff6b5e; --warn:#ffb547;
  --glass:rgba(10,14,15,.66); --glass-line:rgba(255,255,255,.08);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 24px 60px -28px rgba(0,0,0,.9);
  --shadow-lg:0 40px 100px -40px rgba(0,0,0,1);
  --map-land:#1b2328; --map-bld:#2a363d; --map-bld-edge:#34434b; --map-road:#3c4b53; --map-edge:#141b1f; --map-park:#173a33; --map-path:#1f5248; --map-lot:#232e34; --map-mark:#33424a; --map-text:#a9bcc0;
  --grain:.07; color-scheme:dark;
}
[data-theme="green"]{
  --bg:#e8f5ec; --bg2:#d8eee0; --surf:#ffffff; --surf2:#f3fbf6;
  --ink:#0a2a1d; --ink2:#1d4433; --mute:#4b6d5c; --line:rgba(10,42,29,.13); --line2:rgba(10,42,29,.06);
  --acc:#0b8a55; --acc2:#0f6b8a; --acc-soft:rgba(11,138,85,.13); --acc-ink:#ffffff;
  --glow:#7fe3ae; --hi:#d39b2a;
  --ok:#0b8a55; --bad:#c2271d; --warn:#a85a00;
  --glass:rgba(244,252,247,.74); --glass-line:rgba(255,255,255,.95);
  --shadow:0 1px 2px rgba(10,42,29,.06),0 20px 50px -24px rgba(10,42,29,.3);
  --shadow-lg:0 40px 90px -40px rgba(10,42,29,.45);
  --map-land:#e3f2e7; --map-bld:#cfe6d6; --map-bld-edge:#b9d8c3; --map-road:#ffffff; --map-edge:#c3dccb; --map-park:#b8e3c4; --map-path:#93d2a6; --map-lot:#d8ecdf; --map-mark:#cde3d4; --map-text:#3f6150;
  --grain:.045; color-scheme:light;
}
[data-theme="lagoon"]{
  --bg:#052a2e; --bg2:#073338; --surf:#0a3b41; --surf2:#0d454b;
  --ink:#ecfbf8; --ink2:#c6e8e2; --mute:#8fbcb5; --line:rgba(236,251,248,.14); --line2:rgba(236,251,248,.07);
  --acc:#ff9f7a; --acc2:#7fe0d0; --acc-soft:rgba(255,159,122,.16); --acc-ink:#2a0f05;
  --glow:#18b3a0; --hi:#ffd27a;
  --ok:#5ff2b5; --bad:#ff7a6b; --warn:#ffd27a;
  --glass:rgba(5,42,46,.7); --glass-line:rgba(255,255,255,.1);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 24px 60px -28px rgba(0,10,12,.9);
  --shadow-lg:0 40px 100px -40px rgba(0,8,10,1);
  --map-land:#0b3c42; --map-bld:#11505a; --map-bld-edge:#176069; --map-road:#2b7781; --map-edge:#08343a; --map-park:#0f5a4e; --map-path:#167565; --map-lot:#0e4a52; --map-mark:#1a6a74; --map-text:#bfe6e0;
  --grain:.06; color-scheme:dark;
}

/* ---------- type per language ---------- */
html{--f-display:"Frank Ruhl Libre",Georgia,serif;--f-body:"Rubik",system-ui,sans-serif;--disp-w:500;--disp-track:-.025em}
html[lang="ar"]{--f-display:"Amiri",serif;--f-body:"IBM Plex Sans Arabic",system-ui,sans-serif;--disp-w:700;--disp-track:0}
html[lang="en"],html[lang="fr"],html[lang="hu"],html[lang="ru"]{--f-display:"Playfair Display",Georgia,serif;--disp-w:500;--disp-track:-.02em}

/* ---------- text size (Aa) ---------- */
html{font-size:17px}
html[data-size="0"]{font-size:15px}
html[data-size="1"]{font-size:17px}
html[data-size="2"]{font-size:20px}
html[data-size="3"]{font-size:23px}

/* =========================================================
   Sub-pages (services + tips) — shares themes with home
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:150px}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:1rem;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .5s ease,color .5s ease}
a{color:var(--acc);text-decoration:none}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:8px}
.wrap{width:min(860px,100%);margin-inline:auto;padding:28px 20px 72px}
h1,h2,h3{font-family:var(--f-display);font-weight:var(--disp-w);letter-spacing:var(--disp-track);line-height:1.12;text-wrap:balance}
h1{font-size:clamp(2.1rem,7.2vw,4rem);margin:14px 0 16px}
h2{font-size:clamp(1.45rem,4.2vw,2.15rem);margin:46px 0 12px}
p{margin:0 0 14px}
.crumb{font-size:.82rem;color:var(--mute);margin-top:6px;overflow-wrap:anywhere}
.crumb a{color:var(--mute)}.crumb a:hover{color:var(--acc)}
.lead{font-size:1.14rem;color:var(--ink2)}
.hero-img{display:block;width:100%;height:clamp(200px,42vw,360px);object-fit:cover;border-radius:clamp(18px,4vw,28px);margin:10px 0 14px;background:var(--bg2)}
ul{padding:0;margin:10px 0;list-style:none;display:flex;flex-wrap:wrap;gap:10px}
ul>li{padding:9px 16px;border-radius:999px;background:var(--acc-soft);color:var(--ink);font-weight:500}
ul>li a{color:inherit}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 4px}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:600;transition:transform .25s ease,box-shadow .25s ease}
.cta:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.cta.alt{background:#1fa855;color:#fff}
.cta svg{width:20px;height:20px}
.card{background:var(--surf);border-radius:22px;padding:20px 24px;margin:30px 0;box-shadow:inset 0 0 0 1px var(--line)}
details{background:var(--surf);border-radius:16px;padding:14px 20px;margin:10px 0;box-shadow:inset 0 0 0 1px var(--line)}
summary{font-weight:600;cursor:pointer}
footer.sf{border-top:1px solid var(--line);padding:26px 20px calc(26px + env(safe-area-inset-bottom));text-align:center;color:var(--mute);font-size:.88rem}
footer.sf nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-bottom:10px}
footer.sf nav a{color:var(--ink2)}

/* ---------- header ---------- */
header.sh{position:sticky;top:max(8px,env(safe-area-inset-top));z-index:50;margin:8px auto 0;width:min(1080px,calc(100% - 16px));padding:8px 10px 6px;border-radius:20px;background:var(--glass);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);box-shadow:inset 0 0 0 1px var(--glass-line),var(--shadow)}
.sh-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.sh-brand{display:flex;align-items:center;gap:9px;min-width:0;color:var(--ink);font-weight:600;font-size:1rem;line-height:1.15}
.sh-brand img{width:30px;height:auto;flex:none}
.sh-brand span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-brand small{display:block;font-weight:400;font-size:.72rem;color:var(--mute)}
.sh-act{display:flex;align-items:center;gap:6px;flex:none}
.sh-ib{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;color:var(--ink);background:transparent;border:0;cursor:pointer;font:inherit}
.sh-ib:hover,.sh-ib[aria-expanded="true"]{background:var(--acc-soft)}
.sh-ib svg{width:20px;height:20px}
.sh .ph{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 15px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:600;font-size:.92rem;direction:ltr;white-space:nowrap}
.sh .ph svg{width:17px;height:17px}
.sh-nav{display:flex;align-items:center;gap:2px;margin-top:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sh-nav::-webkit-scrollbar{display:none}
.sh-nav>a,.sh-dd>summary{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:38px;padding:0 12px;border-radius:12px;font-weight:600;font-size:.9rem;color:var(--ink2);white-space:nowrap;cursor:pointer;list-style:none;transition:background-color .2s}
.sh-nav svg{width:18px;height:18px}
.sh-dd>summary::-webkit-details-marker{display:none}
.sh-dd>summary:after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);opacity:.6}
.sh-nav>a:hover,.sh-dd>summary:hover,.sh-nav>a.on,.sh-dd[open]>summary{background:var(--acc-soft);color:var(--ink)}
.sh-dd{flex:none;background:none;box-shadow:none;padding:0;margin:0;border-radius:0}
.sh-dd>div{position:fixed;z-index:60;margin-top:8px;min-width:240px;max-width:calc(100vw - 24px);display:flex;flex-direction:column;padding:8px;border-radius:16px;background:var(--surf);box-shadow:var(--shadow-lg),inset 0 0 0 1px var(--line);animation:pop .22s ease both}
.sh-dd>div a{padding:10px 12px;border-radius:10px;color:var(--ink);font-size:.95rem}
.sh-dd>div a:hover{background:var(--acc-soft)}
.sh-short{display:none}
.sh-svc{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:38px;padding:0 12px;border-radius:12px;border:0;background:transparent;font:inherit;font-weight:600;font-size:.9rem;color:var(--ink2);white-space:nowrap;cursor:pointer}
.sh-svc svg{width:18px;height:18px}
.sh-svc .car{width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);opacity:.6;transition:transform .25s}
.sh-svc:hover,.sh-svc[aria-expanded="true"]{background:var(--acc-soft);color:var(--ink)}
.sh-svc[aria-expanded="true"] .car{transform:rotate(-135deg) translateY(-1px)}
.sh-menu{position:absolute;top:calc(100% + 8px);inset-inline-start:8px;width:min(340px,calc(100% - 16px));display:grid;gap:2px;padding:8px;border-radius:18px;background:var(--surf);box-shadow:var(--shadow-lg),inset 0 0 0 1px var(--line);z-index:60;animation:pop .22s ease both}
.sh-menu[hidden]{display:none}
.sh-menu a{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border-radius:12px;color:var(--ink);font-size:.95rem;font-weight:500}
.sh-menu a:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc);opacity:.55;flex:none}
.sh-menu a:hover,.sh-menu a:focus-visible{background:var(--acc-soft)}
.sh-menu a[href*="night-guard"]:before{background:#7c8cf2;opacity:1}
.sh-menu.tips a:before{background:#7c8cf2;opacity:1}
.sh-menu a.all{font-weight:700;color:var(--acc);border-top:1px solid var(--line);border-radius:0 0 12px 12px;margin-top:4px}
.sh-menu a.all:before{display:none}
.sh-svc.on{background:var(--acc-soft);color:var(--ink)}
/* settings popover */
.sh-pop{position:fixed;z-index:70;top:72px;inset-inline-end:12px;width:min(300px,calc(100vw - 24px));padding:14px;border-radius:18px;background:var(--surf);box-shadow:var(--shadow-lg),inset 0 0 0 1px var(--line);display:none}
.sh-pop.open{display:block;animation:pop .22s ease both}
.sh-pop h4{margin:4px 2px 8px;font-size:.78rem;font-weight:700;color:var(--mute);letter-spacing:.04em;text-transform:uppercase}
.sh-pop .row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.sh-pop button,.sh-pop .row a{display:grid;place-items:center;height:44px;border-radius:12px;border:0;background:var(--bg);color:var(--ink);font:inherit;font-weight:700;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line)}
.sh-pop [aria-pressed="true"],.sh-pop a.on{box-shadow:inset 0 0 0 2px var(--acc)}
.sh-pop .tsw{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}

/* phones */
@media (max-width:640px){
  .sh-long{display:none}.sh-short{display:inline}
  .sh-nav{justify-content:space-between;gap:0}
  .sh-nav>a,.sh-dd>summary,.sh-svc{padding:0 9px;font-size:.86rem}
  .sh-menu{inset-inline:0;width:auto}
  .sh-brand small{display:none}
  .wrap{padding:22px 16px 64px}
  .cta{flex:1 1 180px}
}
@media (max-width:400px){
  .sh .ph .num{display:none}.sh .ph{width:40px;padding:0;justify-content:center}
  .sh-brand{font-size:.92rem}
  .sh-nav>a,.sh-dd>summary,.sh-svc{padding:0 7px;font-size:.82rem}
  .sh-nav>a:not(:first-child) svg,.sh-dd>summary svg,.sh-svc svg{display:none}
}
@media (min-width:641px) and (max-width:1024px){ .wrap{padding:32px 28px 72px} }

/* scroll reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
html:not(.js) .rv{opacity:1;transform:none}

/* =========================================================
   Night-guard tip — night theme that respects site theme
   ========================================================= */
body.ng{background-color:var(--bg);--ng:#3b4fb8;--ng2:#7c8cf2;--night:#141b3d;--ng-soft:rgba(59,79,184,.1);background:linear-gradient(180deg,color-mix(in srgb,var(--ng) 9%,var(--bg)) 0,var(--bg) 560px)}
[data-theme="dark"] body.ng,[data-theme="lagoon"] body.ng{--ng:#9aa8ff;--ng2:#b9c3ff;--night:#0b1030;--ng-soft:rgba(154,168,255,.14)}
.ng .kick{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;color:var(--ng);background:var(--ng-soft);padding:6px 12px;border-radius:999px;margin-top:18px}
.ng .hero{position:relative;border-radius:clamp(18px,4vw,28px);overflow:hidden;margin:12px 0 10px;background:var(--night);isolation:isolate}
.ng .hero img{display:block;width:100%;height:clamp(210px,44vw,360px);object-fit:cover;opacity:.94;animation:ngzoom 9s ease-out both}
.ng .hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,16,48,.35),transparent 45%);pointer-events:none}
.ng .sky{position:absolute;inset:0;z-index:1;pointer-events:none}
.ng .sky i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff;animation:tw 3.2s ease-in-out infinite}
.ng .sky b{position:absolute;top:16px;inset-inline-end:20px;width:clamp(30px,7vw,46px);aspect-ratio:1;border-radius:50%;box-shadow:-9px 7px 0 0 #fff6d8;transform:rotate(-20deg);filter:drop-shadow(0 0 10px rgba(255,246,216,.7));animation:float 6s ease-in-out infinite}
.ng ul.chips{gap:8px}
.ng ul.chips>li{background:var(--surf);box-shadow:inset 0 0 0 1px var(--line)}
.ng ul.chips>li:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ng2);margin-inline-end:8px;vertical-align:middle}
.ng .how{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;align-items:center}
.ng .ng-dia{display:block;width:100%;height:auto;background:var(--night);border-radius:22px;padding:10px}
.ng .ng-dia .t-up rect,.ng .ng-dia .t-low rect{fill:#f4f1ea}
.ng .ng-dia .t-up{animation:bite 3.6s ease-in-out infinite}
.ng .ng-dia .guard{fill:rgba(124,140,242,.55);stroke:#b9c3ff;stroke-width:2;filter:drop-shadow(0 0 8px rgba(124,140,242,.9));animation:glow 3.6s ease-in-out infinite}
.ng .ng-dia .lbl text{fill:#dfe4ff}.ng .ng-dia .lbl .gl{fill:#fff}.ng .ng-dia .moon{fill:#fff6d8}
.ng .ng-dia .stars circle{fill:#fff;animation:tw 2.8s ease-in-out infinite}.ng .ng-dia .stars circle:nth-child(2n){animation-delay:1.1s}
.ng ul.how3,.ng ol.steps{display:grid;gap:10px;padding:0;margin:0}
.ng ul.how3>li{display:block;background:var(--surf);border-radius:16px;padding:12px 16px;box-shadow:inset 0 0 0 1px var(--line)}
.ng ul.how3 b{display:block}.ng ul.how3 span{color:var(--ink2);font-size:.95rem;line-height:1.55}
.ng ul.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
.ng .c3{position:relative;display:block;background:var(--surf);border-radius:20px;padding:18px;box-shadow:inset 0 0 0 1px var(--line);transition:transform .35s ease,box-shadow .35s ease}
.ng .c3:hover{transform:translateY(-3px)}
.ng .c3 b{display:block;font-size:1.05rem;margin-bottom:4px}.ng .c3 p{margin:0 0 10px;color:var(--ink2);font-size:.95rem;line-height:1.5}
.ng .c3 ul{display:block;margin:0}.ng .c3 ul>li{display:block;background:none;padding:3px 0;border-radius:0;font-size:.92rem}
.ng .c3.best{box-shadow:inset 0 0 0 2px var(--ng),0 18px 40px -22px var(--ng)}
.ng .c3 .tag{position:absolute;top:-11px;inset-inline-start:16px;background:var(--ng);color:#fff;font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:999px}
[data-theme="dark"] .ng .c3 .tag,[data-theme="lagoon"] .ng .c3 .tag{color:#0b1030}
.ng .note{background:var(--ng-soft);border-radius:16px;padding:12px 16px;color:var(--ink2)}
.ng ol.steps{counter-reset:s;grid-template-columns:repeat(4,1fr)}
.ng ol.steps>li{counter-increment:s;list-style:none;background:var(--surf);border-radius:16px;padding:14px;box-shadow:inset 0 0 0 1px var(--line);font-weight:500;line-height:1.4}
.ng ol.steps>li:before{content:counter(s);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ng);color:#fff;font-weight:700;margin-bottom:8px}
[data-theme="dark"] .ng ol.steps>li:before,[data-theme="lagoon"] .ng ol.steps>li:before{color:#0b1030}
.ng .cta{background:var(--night);color:#fff}.ng .cta.alt{background:#1fa855}
/* staggered children */
.ng .rv.in>li{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.ng .rv.in>li:nth-child(2){animation-delay:.08s}.ng .rv.in>li:nth-child(3){animation-delay:.16s}.ng .rv.in>li:nth-child(4){animation-delay:.24s}
@keyframes tw{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes ngzoom{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes bite{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes glow{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 4px}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:760px){.ng .how{grid-template-columns:1fr}.ng ul.cards3{grid-template-columns:1fr}.ng ol.steps{grid-template-columns:1fr 1fr}}
@media (min-width:761px) and (max-width:1024px){.ng ul.cards3{grid-template-columns:repeat(3,1fr)}.ng .c3{padding:14px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}