:root{
  --bg:#f5f8f9; --surface:#ffffff; --ink:#0d2a33; --muted:#4d6670; --line:#d6e2e6;
  --lake:#0b5d73; --lake-deep:#073f4f; --aqua:#16b8c4; --aqua-soft:#e2f5f7;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--body)}
img{max-width:100%;display:block}
a{color:var(--lake)}
:focus-visible{outline:3px solid var(--aqua);outline-offset:2px;border-radius:4px}
[id]{scroll-margin-top:84px}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);line-height:1.08;text-wrap:balance;margin:0}
h1{font-size:clamp(2.3rem,5.4vw,3.8rem);font-weight:800;letter-spacing:-.025em}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:700;letter-spacing:-.015em}
h3{font-size:1.2rem;font-weight:700}
p{margin:0}
.eyebrow{font:500 .76rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--lake)}
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.3rem;border-radius:999px;font:700 1rem var(--body);text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn-primary{background:var(--lake);color:#fff}
.btn-primary:hover{background:var(--lake-deep)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:var(--surface)}
.btn-ghost:hover{border-color:var(--lake)}
section{padding-block:clamp(56px,8vw,96px)}
.head{display:flex;justify-content:space-between;align-items:end;gap:1rem 2rem;flex-wrap:wrap;margin-bottom:2.25rem}
.head p{color:var(--muted);max-width:50ch}
.small{font-size:.82rem;color:var(--muted)}
.ph{background:linear-gradient(135deg,var(--aqua-soft),#cfe9ee)}

/* header */
.bar-top{display:none}
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.97);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:1.1rem;padding-block:.65rem}
.logo{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink)}
.logo-img{display:block;height:50px;width:auto;flex:none}
.top .logo{margin-right:1.25rem}
.logo b{font-size:1.05rem!important;letter-spacing:-.01em!important}
.logo small{display:none!important}
@media (max-width:1400px){.top .logo .wm{display:none}}
.top .logo{flex:none}
@media (max-width:420px){.logo-img{height:42px}}
.mark{width:34px;height:34px;border-radius:50% 50% 50% 6px;background:linear-gradient(160deg,var(--aqua),var(--lake));transform:rotate(-45deg);flex:none}
.logo span.wm{display:flex;flex-direction:column;line-height:1}
.logo b{font:800 1.55rem var(--display);letter-spacing:-.025em;white-space:nowrap}
.logo small{font:500 .64rem var(--mono);letter-spacing:.08em;color:var(--muted);margin-top:.25rem;text-transform:uppercase}
nav.links{display:flex;gap:1.1rem;margin-left:auto;white-space:nowrap}
nav.links a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem}
nav.links a:hover{color:var(--lake)}
.top .btn{padding:.6rem 1rem;font-size:.92rem}
.menu-btn{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--surface);flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;padding:0;flex:none}
.menu-btn span{width:18px;height:2px;background:var(--ink);border-radius:2px}
.mnav{border-top:1px solid var(--line);background:var(--surface)}
.mnav a{display:block;padding:.85rem max(18px,env(safe-area-inset-left,0px));color:var(--ink);text-decoration:none;font-weight:600;border-bottom:1px solid var(--line)}
.hphone{display:inline-flex;align-items:center;gap:.4rem;font:700 1rem var(--body);color:var(--lake-deep);text-decoration:none;white-space:nowrap;padding:.45rem .2rem;font-variant-numeric:tabular-nums}
.hphone svg{color:var(--lake)}
.hphone:hover{color:var(--lake)}
@media (max-width:980px){nav.links{display:none}.hphone{margin-left:auto}.menu-btn{display:flex}}
@media (max-width:700px){.top .wrap>.btn-primary{display:none}.hphone{background:var(--aqua-soft);border-radius:999px;padding:.5rem .8rem;font-size:.95rem}}
@media (min-width:981px){.mnav{display:none!important}}
@media (max-width:420px){.logo small{display:none}.logo b{font-size:1.3rem}.hphone{font-size:.88rem;padding:.45rem .65rem}}

/* footer */
footer{background:var(--surface);border-top:1px solid var(--line);padding-block:3rem 2rem;font-size:.95rem}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
footer .cols>*{min-width:0}
footer h4{font:500 .74rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 .75rem}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
footer a{color:var(--ink);text-decoration:none}
footer a:hover{color:var(--lake)}
.nap{color:var(--muted);line-height:1.7;margin-top:1rem}
.nap b{color:var(--ink)}
.legal{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.75rem;color:var(--muted);font-size:.85rem}
@media (max-width:820px){footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:480px){footer .cols{grid-template-columns:1fr}}
.callbar{display:none}
@media (max-width:700px){
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;gap:.5rem;padding:.6rem max(12px,env(safe-area-inset-left,0px)) calc(.6rem + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line)}
  .callbar a{flex:1}
  body{padding-bottom:72px}
}

/* forms shared */
.field{display:grid;gap:.35rem;margin-bottom:1rem}
.field label,.field .lbl{font-weight:600;font-size:.94rem}
.field input,.field select,.field textarea{font:inherit;padding:.75rem .85rem;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);width:100%}

/* phones */
@media (max-width:420px){.mark{width:28px;height:28px}.logo{gap:.5rem}.top .wrap{gap:.6rem}}

/* booking sits above the city checker: separate the two dark bands */
.book + .lookup{background:#0b4b5c}
.book + .lookup .meter{background:#073f4f}

/* WhatsApp button */
.wa-float{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:25;display:inline-flex;align-items:center;gap:.5rem;background:#1f9d55;color:#fff;text-decoration:none;font:700 .95rem var(--body);padding:.75rem 1rem;border-radius:999px;box-shadow:0 12px 30px -12px rgba(0,0,0,.45)}
.wa-float:hover{background:#178246}
@media (max-width:700px){.wa-float{bottom:calc(84px + env(safe-area-inset-bottom,0px));padding:.75rem}.wa-float span{display:none}}

.legal .madein{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--ink)}

/* Nov 9: dark brand footer + socials */
footer{background:var(--lake-deep);border-top:0;color:#cfe4ea}
footer h4{color:#7fd3dc}
footer a{color:#fff}
footer a:hover{color:var(--aqua)}
footer .logo{color:#fff}
footer .logo .wm small{color:#9fc3cc}
footer .logo-img{background:#fff;border-radius:10px;padding:4px}
footer .nap{color:#cfe4ea}
footer .nap b{color:#fff}
footer .areas{color:#cfe4ea}
footer .areas a{color:#e6f3f6}
footer .legal{border-top-color:rgba(255,255,255,.16);color:#9fc3cc}
footer .legal a{color:#e6f3f6}
footer .legal .madein{color:#fff}
.socials{display:flex;gap:.55rem;margin-top:1rem;flex-wrap:wrap}
.socials a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;transition:background .15s}
.socials a:hover{background:var(--aqua);color:var(--lake-deep)}

/* Nov 9 (pm): Made in Canada as a badge under the socials, not floating in the legal row */
.canada-badge{display:inline-flex;align-items:center;gap:.65rem;margin:1.1rem 0 0;padding:.55rem .9rem .55rem .65rem;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:.85rem;line-height:1.3;color:#cfe4ea}
.canada-badge .flag{flex:none;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.canada-badge b{display:block;color:#fff;font-size:.92rem}

/* Call button, stacked above the WhatsApp button */
.call-float{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(78px + env(safe-area-inset-bottom,0px));z-index:25;display:inline-flex;align-items:center;gap:.5rem;background:var(--lake);color:#fff;text-decoration:none;font:700 .95rem var(--body);padding:.75rem 1rem;border-radius:999px;box-shadow:0 12px 30px -12px rgba(0,0,0,.45)}
.call-float:hover{background:var(--lake-deep)}
@media (max-width:700px){.call-float{bottom:calc(142px + env(safe-area-inset-bottom,0px));padding:.75rem}.call-float span{display:none}}

/* ===== content pages (generated by build.py) ===== */
.phero{padding-block:clamp(28px,5vw,56px) clamp(20px,3vw,32px)}
.phero .wrap{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,56px);align-items:center}
.phero.has-media .wrap{grid-template-columns:1.1fr .9fr}
.phero .wrap>*{min-width:0}
.phero h1{margin-top:.8rem;font-size:clamp(2.1rem,4.6vw,3.3rem);max-width:22ch}
.phero .lede{font-size:1.15rem;color:var(--muted);max-width:60ch;margin-top:1rem}
.phero .cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.6rem}
.byline{font:600 .8rem var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:.9rem}
.pmedia{border-radius:22px;overflow:hidden;aspect-ratio:8/7}
.pmedia.cover{background:#E6EBEA;box-shadow:var(--shadow-lift)}
.pmedia.cover img{width:100%;height:100%;object-fit:cover}
.pmedia.contain{background:radial-gradient(ellipse at 50% 35%,#8ed2f3 0%,#2a8ac9 55%,#1e6fb5 100%);border:0;padding:clamp(1rem,3vw,2rem);box-shadow:var(--shadow-lift)}
.pmedia.contain img{filter:drop-shadow(0 18px 24px rgba(7,40,70,.35))}
.pmedia.contain img{width:100%;height:100%;object-fit:contain}
@media (max-width:860px){.phero.has-media .wrap{grid-template-columns:1fr}.pmedia{max-height:420px}}

.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;padding:0;margin:0 0 1rem;font:600 .8rem var(--body);color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:.35rem;color:var(--line)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--lake)}

.pbody{padding-block:clamp(16px,3vw,32px) clamp(48px,7vw,80px)}
.content>*{max-width:62ch}
.content>.prods,.content>.tiles,.content>.grid,.content>.cta-box,.content>figure.wide,.content>.steps3,.content>.specs,.content>.stat-row,.content>.area,.content>.icards,.content>.ehs,.content>.prose,.content>.intro,.content>.vsteps,.content>.specgrid,.content>.band,.content>.imgrow,.content>.feat,.content>.gallery,.content>.tbl,.content>.pcards{max-width:none}
.content h2{margin:2.6rem 0 .9rem;font-size:clamp(1.5rem,2.8vw,2rem)}
.content h3{margin:1.8rem 0 .5rem;font-size:1.2rem}
.content p{margin:0 0 1rem}
.content p.lead{font-size:1.2rem;line-height:1.55;color:var(--ink-soft)}
.content ul,.content ol{margin:0 0 1.2rem;padding-left:1.25rem}
.content li{margin:.3rem 0}
.content ul.checks{list-style:none;padding:0}
.content ul.checks li{padding-left:1.6rem;position:relative}
.content ul.checks li::before{content:"";position:absolute;left:0;top:.5em;width:.75rem;height:.4rem;border-left:2px solid var(--lake);border-bottom:2px solid var(--lake);transform:rotate(-45deg)}
.content .note{background:var(--sky-soft);border:1px solid var(--sky);border-radius:12px;padding:.9rem 1.1rem;font-size:.97rem}
.content figure{margin:1.5rem 0}
.content figure img{border-radius:16px;width:100%;height:auto;background:#fff;border:1px solid var(--line)}
.content figure.wide img{max-height:460px;object-fit:cover}
.content figure.diagram img{object-fit:contain;border:1px solid var(--line);padding:1rem;width:auto;max-width:100%;display:block;margin:0 auto}
.content figcaption{font-size:.85rem;color:var(--muted);margin-top:.4rem}
.content blockquote{margin:1.5rem 0;padding:1.25rem 1.5rem;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-card)}
.content blockquote p{margin:0 0 .5rem;font-size:1.05rem}
.content blockquote cite{font:600 .82rem var(--body);color:var(--muted);font-style:normal}

/* product cards (same as homepage) */
.content .prods{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;margin:1rem 0 1.5rem}
.content .prod{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-card);transition:box-shadow .2s,transform .2s}
.content .prod:hover{box-shadow:var(--shadow-lift);transform:translateY(-3px)}
.content .prod .img{aspect-ratio:1/1;background:var(--sky-soft);display:grid;place-items:center;padding:1rem;overflow:hidden}
.content .prod .img img{width:100%;height:100%;object-fit:contain}
.content .prod .txt{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.content .prod .tag{font:600 .74rem var(--body);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.content .prod h3{margin:0;font-size:1.1rem}
.content .prod p{color:var(--muted);font-size:.93rem;margin:0}
.content .prod .more{margin-top:auto;padding-top:.4rem;font-weight:700;color:var(--teal);font-size:.92rem}

.content .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem;margin:1rem 0 1.5rem}
.content .tiles a{display:block;padding:1rem 1.1rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink)}
.content .tiles a:hover{border-color:var(--aqua);background:var(--sky-soft)}
.content .tiles b{display:block;font:700 1.02rem var(--display)}
.content .tiles span{display:block;color:var(--muted);font-size:.9rem;margin-top:.2rem}

.content .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.1rem 1.5rem;margin:1rem 0 1.5rem}
.content .grid b{display:block;font:700 1.05rem var(--display);margin-bottom:.25rem}
.content .grid p{color:var(--muted);font-size:.95rem;margin:0}

.content .steps3{list-style:none;padding:0;margin:1rem 0 1.5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem}
.content .steps3 li{display:flex;gap:1rem;align-items:flex-start;min-width:0;margin:0}
.content .steps3 .n{flex:none;width:44px;height:44px;border-radius:50%;background:var(--aqua);color:#fff;display:grid;place-items:center;font:700 1.15rem var(--display)}
.content .steps3 b{display:block;font:700 1.05rem var(--display);margin-bottom:.2rem}
.content .steps3 p{color:var(--muted);font-size:.95rem;margin:0}

.content .specs{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 1.5rem;margin:1rem 0 1.5rem}
.content .specs div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.content .specs dt{color:var(--muted);font-size:.93rem}
.content .specs dd{margin:0;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}

.content .tbl{overflow-x:auto;margin:1rem 0 1.5rem}
.content .tbl table{border-collapse:collapse;width:100%;font-size:.95rem;font-variant-numeric:tabular-nums}
.content .tbl th,.content .tbl td{text-align:left;padding:.6rem .75rem;border-bottom:1px solid var(--line);vertical-align:top}
.content .tbl th{font:600 .76rem var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

.content details{border-bottom:1px solid var(--line);padding:1rem 0}
.content summary{cursor:pointer;font:700 1.08rem var(--display);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.content summary::-webkit-details-marker{display:none}
.content summary::after{content:"+";color:var(--aqua);font-size:1.4rem;font-weight:400}
.content details[open] summary::after{content:"–"}
.content details p{color:var(--muted);margin:.6rem 0 0}

.cta-box{background:var(--sky-soft);border:1px solid var(--sky);color:var(--ink-soft);border-radius:20px;padding:clamp(1.5rem,4vw,2.5rem);display:flex;justify-content:space-between;align-items:center;gap:1rem 2rem;flex-wrap:wrap;margin-top:3rem}
.cta-box h2{color:var(--ink);margin:0 0 .4rem;font-size:clamp(1.4rem,3vw,2rem)}
.cta-box p{color:var(--ink-soft);margin:0}


/* city pages */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.75rem;margin:1rem 0 .5rem}
.stat-row div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem}
.stat-row b{display:block;font:800 2rem/1.1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat-row small{display:block;font:600 .74rem var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:.35rem}
.src-line{font:400 .85rem var(--body);color:var(--muted)}
.area{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-card);padding:clamp(1.1rem,3vw,1.75rem);margin:1rem 0 1.5rem}
.area h3{margin-top:0}
.area .hoods{color:var(--muted);font-size:.95rem;margin-bottom:.5rem}
.area .prods{margin-bottom:0}

/* footer service areas */
footer .areas{margin-top:2.25rem;padding-top:1.75rem;border-top:1px solid rgba(255,255,255,.16);font-size:.92rem}
footer .areas h4 a{color:#7fd3dc}
footer .areas ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.45rem 1.5rem}
footer .areas a{color:#e6f3f6}
@media (max-width:560px){.content .prods{grid-template-columns:repeat(2,1fr);gap:.6rem}.content .prod .txt{padding:.75rem}.content .prod p{display:none}}
img[data-hide-on-error]{color:transparent}

/* photo gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem;margin:1rem 0 1.5rem}
.gallery figure{margin:0}
.gallery img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:#E6EBEA;border:1px solid var(--line);box-shadow:var(--shadow-card);transition:transform .15s}
.gallery figure:hover img{transform:translateY(-2px)}
.gallery figcaption{font-size:.92rem;font-weight:600;color:var(--ink);margin-top:.5rem}
.content>.gallery,.content>.yt-wrap{max-width:none}
@media (max-width:560px){.gallery{grid-template-columns:repeat(2,1fr)}}
/* youtube facade */
.yt-wrap{margin:1.5rem 0;max-width:820px}
.yt,.yt-frame{display:block;position:relative;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:24px;overflow:hidden;background:var(--navy);cursor:pointer;box-shadow:var(--shadow-lift)}
.yt img{width:100%;height:100%;object-fit:cover}
.yt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,42,53,0) 45%,rgba(15,42,53,.7) 100%);pointer-events:none}
.yt:hover .yt-play{transform:scale(1.06)}
.yt-play{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:var(--navy);border:3px solid #fff;z-index:1;transition:transform .15s}
.yt-play::after{content:"";position:absolute;left:27px;top:21px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff}
.yt-cap{position:absolute;left:24px;bottom:20px;color:#fff;font:600 1.02rem var(--body);z-index:1;pointer-events:none}
.yt-wrap figcaption{font-size:.9rem;color:var(--muted);margin-top:.5rem}
.pmedia.cover img{object-position:center 40%}
.content figure.photo img{width:auto;max-width:100%;max-height:560px;border-radius:16px}
/* homepage: video + installs */
.watch-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,56px);align-items:center}
.watch-grid>*{min-width:0}
.watch-grid .yt-wrap{margin:0;max-width:none}
.watch-grid p{color:var(--muted);margin-top:.9rem}
.watch-grid .van{border-radius:16px;margin-top:1.25rem;width:100%;height:auto;border:1px solid var(--line)}
@media (max-width:860px){.watch-grid{grid-template-columns:1fr}}
.installs{margin-top:3rem}
.installs .gallery{grid-template-columns:repeat(6,1fr)}
@media (max-width:980px){.installs .gallery{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.installs .gallery{grid-template-columns:repeat(2,1fr)}}
/* glossary */
.content>.glossary{max-width:820px}
.glossary div{padding:.9rem 0;border-bottom:1px solid var(--line)}
.glossary dt{font:700 1.08rem var(--display);color:var(--ink)}
.glossary dd{margin:.3rem 0 0;color:var(--muted)}
.content .tbl table{min-width:640px}
.content .tbl td:first-child{font-weight:600}
.content>.tbl,.content>.pcards{max-width:none}
nav.links a{white-space:nowrap}
@media (max-width:1120px){nav.links{display:none}.hphone{margin-left:auto}.menu-btn{display:flex}}
@media (min-width:981px) and (max-width:1120px){.mnav:not([hidden]){display:block!important}}

/* Google reviews */
[data-reviews]{margin-top:1.5rem}
.grev-head{font-size:1rem;margin:0 0 .9rem}
.grev-stars{color:#E9B949;letter-spacing:.08em}
.grev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
.grev{margin:0;background:var(--surface,#fff);border:1px solid var(--line,#e3e8ee);border-radius:16px;box-shadow:var(--shadow-card);padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.6rem}
.grev blockquote{margin:0;font-size:.95rem;line-height:1.55}
.grev figcaption{display:flex;gap:.6rem;align-items:center;margin-top:auto}
.grev figcaption img{border-radius:50%;width:32px;height:32px}
.grev figcaption span{display:flex;flex-direction:column;line-height:1.25}
.grev figcaption small{color:var(--muted,#667);font-size:.78rem}
.grev figcaption a{color:inherit}
.grev-foot{font-size:.85rem;color:var(--muted,#667);margin-top:.9rem}

/* feature tiles (verbatim icon rows from the old sites) */
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:1.25rem 0}
.feat div{background:var(--bg-sand,#F1F4F3);border:1px solid var(--line);border-radius:14px;padding:1rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.feat img{width:72px;height:72px;object-fit:contain}
.feat b{font:700 .95rem var(--display);line-height:1.25}

/* heading with its icon (verbatim pages) */
.content h3.h3i{display:flex;align-items:center;gap:.8rem}
.content h3.h3i img{width:56px;height:56px;object-fit:contain;flex:none;border-radius:12px;background:#fff;border:1px solid var(--line);padding:.3rem}
.content figure.diagram img{max-height:420px}

.content .imgrow{display:grid;gap:1rem;margin:1.5rem 0;grid-template-columns:repeat(2,1fr)}
.content .imgrow.n3{grid-template-columns:repeat(3,1fr)}
.content .imgrow.n4{grid-template-columns:repeat(4,1fr)}
.content .imgrow figure{margin:0}
.content .imgrow img{width:100%;height:100%;max-height:420px;object-fit:contain;border-radius:14px;border:1px solid var(--line);background:#fff;padding:.5rem}
@media (max-width:700px){.content .imgrow,.content .imgrow.n3,.content .imgrow.n4{grid-template-columns:1fr 1fr}}

/* ---- visual layout blocks (Nov 8) ---- */
.icards{display:grid;gap:1rem;margin:1.5rem 0 2rem;grid-template-columns:repeat(3,1fr)}
.icards.n2{grid-template-columns:repeat(2,1fr)}
.icards.n4{grid-template-columns:repeat(4,1fr)}
.icard{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1.4rem 1.3rem;box-shadow:var(--shadow-card)}
.icard img{width:64px;height:64px;object-fit:contain;display:block;margin-bottom:.9rem;border-radius:14px;background:linear-gradient(160deg,#2a8ac9,#1e6fb5);padding:.5rem}
.content .icard h3{margin:0 0 .5rem;font-size:1.1rem}
.content .icard p{font-size:.95rem;color:var(--ink-soft);margin:0 0 .6rem}
.content .icard p:last-child{margin-bottom:0}
.vsteps{list-style:none;padding:0;margin:1.5rem 0 2rem;display:grid;gap:1.25rem;grid-template-columns:repeat(3,1fr);counter-reset:none}
.vsteps.n4{grid-template-columns:repeat(4,1fr)}
.vsteps.n2{grid-template-columns:repeat(2,1fr)}
.vsteps li{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1.3rem;text-align:center;position:relative}
.vsteps .pic{position:relative;width:112px;height:112px;margin:0 auto .9rem}
.vsteps .pic img{width:112px;height:112px;object-fit:cover;border-radius:50%;border:3px solid #fff;box-shadow:var(--shadow-card)}
.vsteps .pic .n{position:absolute;right:-4px;bottom:-4px;width:34px;height:34px;border-radius:50%;background:var(--lake);color:#fff;display:grid;place-items:center;font:800 1rem var(--display);border:3px solid var(--bg)}
.content .vsteps h3{margin:0 0 .4rem;font-size:1.05rem;letter-spacing:.02em}
.content .vsteps p{font-size:.95rem;color:var(--ink-soft);margin:0}
.specgrid{display:grid;grid-template-columns:minmax(260px,.9fr) 1.1fr;gap:clamp(1.25rem,3vw,2.5rem);align-items:start;margin:1.5rem 0 2rem}
.specpanel{background:var(--lake-deep);color:#e8f6f8;border-radius:20px;padding:1.4rem 1.5rem;position:sticky;top:90px}
.content .specpanel h3{color:#fff;margin:0 0 .8rem;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;font-family:var(--mono);font-weight:600}
.content .specpanel h3+ul+h3{margin-top:1.4rem}
.content .specpanel ul.checks{margin:0}
.content .specpanel ul.checks li{color:#e8f6f8;font-size:.95rem;padding:.35rem 0 .35rem 1.6rem;border-bottom:1px solid rgba(255,255,255,.1)}
.content .specpanel ul.checks li:last-child{border-bottom:0}
.content .specpanel ul.checks li::before{border-color:#7fe6ee;top:.9em}
.specside>*{max-width:none}
.band{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,4vw,3rem);align-items:center;margin:2rem 0;padding:clamp(1rem,2.5vw,1.75rem);background:var(--surface);border:1px solid var(--line);border-radius:22px}
.band.flip figure{order:2}
.content .band figure{margin:0}
.content .band figure img{padding:.5rem;max-height:460px;border:0;background:transparent}
.band-text>*{max-width:none}
.content .band-text h2{margin-top:0;font-size:clamp(1.35rem,2.2vw,1.7rem)}
.content .band-text h3{margin-top:0}
.content .band-text p:last-child{margin-bottom:0}
@media (max-width:900px){.icards,.icards.n4,.vsteps,.vsteps.n4{grid-template-columns:1fr 1fr}.specgrid,.band{grid-template-columns:1fr}.specpanel{position:static}.band.flip figure{order:0}}
@media (max-width:560px){.icards,.icards.n2,.icards.n4,.vsteps,.vsteps.n2,.vsteps.n4{grid-template-columns:1fr}}

.ehs{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.5rem 0 2rem}
.ehs-col{background:linear-gradient(170deg,#2a8ac9,#0b4b5c);color:#e8f6f8;border-radius:20px;padding:1.5rem 1.4rem;position:relative;overflow:hidden}
.ehs-col .letter{position:absolute;right:.6rem;top:-.6rem;font:800 6.5rem/1 var(--display);color:rgba(255,255,255,.08)}
.content .ehs-col h3{color:#fff;margin:0 0 .8rem;font-size:1.3rem}
.content .ehs-col p,.content .ehs-col li{color:#e8f6f8;font-size:.95rem}
.content .ehs-col ul.checks li::before{border-color:#7fe6ee}
.content .ehs-col p:last-child{margin-bottom:0}
@media (max-width:900px){.ehs{grid-template-columns:1fr}}

/* two-column prose rows */
.prose{display:grid;grid-template-columns:minmax(220px,.8fr) 1.4fr;gap:clamp(1rem,4vw,3.5rem);align-items:start;margin:1.25rem 0 1.75rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.prose.nohead{grid-template-columns:1fr;border-top:0;padding-top:0}
.prose.nohead .prose-b{columns:2;column-gap:3rem}
.prose.nohead .prose-b>*{break-inside:avoid}
.content .prose-h h2,.content .prose-h h3{margin:0;position:sticky;top:90px}
.content .prose-h p.lead{margin:.5rem 0 0;font-size:1.05rem}
.prose-b>*{max-width:none}
.content .prose-b p{font-size:1.02rem;line-height:1.65}
.content .prose-b>:first-child{margin-top:.15rem}
.content .prose-b>:last-child{margin-bottom:0}
@media (max-width:860px){.prose,.prose.nohead{grid-template-columns:1fr;gap:.75rem}.prose.nohead .prose-b{columns:1}.content .prose-h h2,.content .prose-h h3{position:static}}
/* generic text grids (Flexible / Affordable ...) as cards */
.content .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.25rem 0 1.75rem}
.content .grid>div{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.1rem 1.15rem;box-shadow:var(--shadow-card)}
.content .grid>div b{display:block;font:700 1.05rem var(--display);margin-bottom:.35rem}
.content .grid>div p{margin:0;font-size:.95rem;color:var(--ink-soft)}

.intro{margin:1.5rem 0 .5rem}
.content .intro h2,.content .intro h3{margin:0}
.content .intro p.lead{margin:.4rem 0 0;max-width:62ch}

/* Nov 9: photo cards, image slider, wide figures */
.pcards{display:grid;gap:1.25rem;margin:1.5rem 0}
.pcards.n3{grid-template-columns:repeat(3,1fr)}.pcards.n2{grid-template-columns:repeat(2,1fr)}.pcards.n4{grid-template-columns:repeat(4,1fr)}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.pcard figure{margin:0;aspect-ratio:1/1;background:#eef3f5}
.pcard figure img{width:100%;height:100%;object-fit:cover;display:block}
.pcard-b{padding:1.1rem 1.2rem 1.3rem}.pcard-b h3{margin:0 0 .5rem}.pcard-b p{margin:0}
@media (max-width:820px){.pcards.n3,.pcards.n4{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.pcards.n2,.pcards.n3,.pcards.n4{grid-template-columns:1fr}}
.slider{position:relative;min-width:0}
.slider .slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:16px;background:var(--surface)}
.slider .slides::-webkit-scrollbar{display:none}
.slider .slides figure{flex:0 0 100%;scroll-snap-align:start;margin:0;display:flex;align-items:center;justify-content:center}
.slider .slides img{width:100%;height:auto;max-height:480px;object-fit:contain;display:block}
.slider .sl-prev,.slider .sl-next{position:absolute;top:40%;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.92);font-size:1.6rem;line-height:1;cursor:pointer;color:var(--ink)}
.slider .sl-prev{left:8px}.slider .sl-next{right:8px}
.slider .sl-thumbs{display:flex;gap:.5rem;margin-top:.6rem}
.slider .sl-thumbs button{flex:1;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;overflow:hidden;aspect-ratio:4/3}
.slider .sl-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
figure.wide{margin:1.5rem 0}figure.wide img{width:100%;height:auto;display:block}

/* Nov 9: blog cards with pictures */
.content>.postcards{max-width:none}
.postcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem;margin:1rem 0 2rem}
.postcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.postcard:hover{border-color:var(--aqua);transform:translateY(-2px)}
.postcard figure{margin:0;aspect-ratio:16/9;background:#eef3f5}
.postcard figure img{width:100%;height:100%;object-fit:cover;display:block}
.pc-b{padding:1rem 1.15rem 1.2rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.pc-b .eyebrow{margin:0;font-size:.72rem}
.pc-b b{font:700 1.08rem/1.3 var(--display)}
.pc-d{color:var(--muted);font-size:.95rem}
.pc-date{margin-top:auto;padding-top:.4rem;font-size:.85rem;color:var(--muted)}

/* Nov 9: warranty registration form */
.content>.wform{max-width:none}
.wform{padding:1.5rem;margin:2rem 0;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.wform h2{margin-top:0}
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.wgrid .wide{grid-column:1/-1}
.wgrid .field span{display:block;font-weight:600;font-size:.92rem;margin-bottom:.3rem}
.wmsg{color:#b42318}
.wsend{margin-top:1rem;padding:1rem;border-radius:12px;background:var(--sky-soft)}
@media (max-width:640px){.wgrid{grid-template-columns:1fr}}

/* ---- Nov 9 (pm): alignment pass + stronger CTA ---- */
/* everything in the page body shares one left edge and full width */
.content>h2,.content>h3,.content>.faqrow,.content>.pills,.content>figure.chart{max-width:none}
/* one heading size for every heading-left row */
.content .prose-h h2,.content .prose-h h3{font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.2}
/* product intro: features panel | name + copy | picture */
.specgrid{align-items:stretch}
.specgrid.has-fig{grid-template-columns:minmax(260px,.95fr) 1.1fr minmax(220px,.8fr)}
.specgrid.solo{grid-template-columns:1fr}
.specgrid.solo .specpanel ul.checks{columns:2;column-gap:2.5rem}
.specside{align-self:center}
.content .specside .eyebrow{margin:0 0 .4rem}
.content .specside h2{margin:0 0 .75rem;font-size:clamp(1.45rem,2.4vw,1.9rem);line-height:1.15}
.content .specside h3{margin:1.2rem 0 .4rem}
.content .specside p{color:var(--ink-soft)}
.content .specside ul.checks{margin:.75rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem .6rem}
.content .specside ul.checks li{margin:0;background:var(--sky-soft);border:1px solid var(--sky);border-radius:999px;padding:.35rem .8rem .35rem 2rem;font-weight:600;font-size:.88rem;letter-spacing:.02em}
.content .specside ul.checks li::before{left:.8rem;top:.85em}
.content .specfig{margin:0;align-self:center;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:1rem;display:grid;place-items:center}
.content .specfig img{border:0;max-height:420px;width:auto;max-width:100%;object-fit:contain}
@media (max-width:1100px){.specgrid.has-fig{grid-template-columns:minmax(240px,.9fr) 1.1fr}.specgrid.has-fig .specfig{grid-column:1/-1}}
@media (max-width:900px){.specgrid.has-fig{grid-template-columns:1fr}.specgrid.solo .specpanel ul.checks{columns:1}}
/* chart rows */
.content .prose-b figure.chart{margin:0}
.content .prose-b figure.chart img{padding:1rem;max-width:720px}
/* icon-less tiles become check pills */
.content ul.pills{list-style:none;padding:0;margin:1.5rem 0;display:flex;flex-wrap:wrap;gap:.6rem}
.content ul.pills li{margin:0;padding:.6rem 1.1rem .6rem 2.3rem;position:relative;background:var(--surface);border:1px solid var(--line);border-radius:999px;font:700 .95rem var(--display)}
.content ul.pills li::before{content:"";position:absolute;left:1.05rem;top:50%;width:.7rem;height:.38rem;margin-top:-.3rem;border-left:2px solid var(--lake);border-bottom:2px solid var(--lake);transform:rotate(-45deg)}
/* FAQ row */
.content .faqrow{margin-top:2.5rem}
.content .faqrow details:first-child{padding-top:0}
/* closing CTA: full dark band */
.cta-box{background:linear-gradient(135deg,var(--lake-deep) 0%,var(--lake) 100%);border:0;color:#d9eef2;border-radius:24px;padding:clamp(1.75rem,4.5vw,3rem);display:grid;grid-template-columns:1.35fr 1fr;gap:1.5rem 3rem;align-items:center;margin:3.5rem 0 1rem;box-shadow:0 18px 40px -18px rgba(6,50,62,.55);position:relative;overflow:hidden}
.cta-box::after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(127,230,238,.25),transparent 70%);pointer-events:none}
.content .cta-box>*{max-width:none}
.cta-box .cta-eyebrow{font:600 .78rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#7fe6ee;margin:0 0 .5rem}
.content .cta-box h2{color:#fff;margin:0 0 .7rem;font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.12}
.content .cta-box p{color:#d9eef2;margin:0}
.content .cta-box .cta-perks{list-style:none;padding:0;margin:1.1rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.content .cta-box .cta-perks li{margin:0;padding:.35rem .85rem .35rem 1.9rem;position:relative;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-weight:600;font-size:.92rem}
.content .cta-box .cta-perks li::before{content:"";position:absolute;left:.8rem;top:50%;width:.6rem;height:.32rem;margin-top:-.28rem;border-left:2px solid #7fe6ee;border-bottom:2px solid #7fe6ee;transform:rotate(-45deg)}
.cta-actions{display:flex;flex-direction:column;gap:.7rem;position:relative;z-index:1}
.btn-cta{background:#fff;color:var(--lake-deep);padding:1.05rem 1.5rem;font-size:1.08rem;box-shadow:0 8px 20px -8px rgba(0,0,0,.35)}
.btn-cta:hover{background:#7fe6ee;color:var(--lake-deep)}
.btn-cta-ghost{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}
.btn-cta-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.cta-wa{color:#bfeff3;text-align:center;font-weight:600;font-size:.95rem}
.cta-wa:hover{color:#fff}
.content .cta-box .cta-trust{text-align:center;font-size:.88rem;color:#bcdde3}
.cta-trust span{color:#ffcf4a;letter-spacing:.08em;margin-right:.2rem}
@media (max-width:820px){.cta-box{grid-template-columns:1fr}}
@media (max-width:900px){.specgrid .specside{order:-1}}
/* Nov 9 (pm): picture-heavy sliders get the full width; short-text bands give the picture more room */
.content>.showcase{max-width:none}
.showcase{margin:1.5rem 0 2rem;padding:clamp(1rem,2.5vw,1.75rem);background:var(--surface);border:1px solid var(--line);border-radius:22px}
.showcase .slider .slides img{max-height:600px}
.showcase .slider .sl-prev,.showcase .slider .sl-next{top:45%}
.showcase .slider .sl-thumbs{max-width:520px;margin:.9rem auto 0}
.band.wide-fig{grid-template-columns:1.6fr 1fr}
.band.wide-fig.flip{grid-template-columns:1fr 1.6fr}
.content .band.wide-fig figure img{max-height:560px}
@media (max-width:900px){.band.wide-fig,.band.wide-fig.flip{grid-template-columns:1fr}}
.content .showcase .slider .slides img{border:0;border-radius:12px}

/* Tips & tricks + articles: old-site page structure, EHS styling (Nov 9) */
.nbanner{position:relative;min-height:300px;display:flex;align-items:center;background-size:cover;background-position:center;color:#fff}
.nbanner::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,63,79,.92) 0%,rgba(7,63,79,.72) 55%,rgba(11,93,115,.35) 100%)}
.nbanner .wrap{position:relative;width:100%;padding-block:clamp(36px,6vw,64px)}
.nbanner h1{margin:.6rem 0 .4rem;font-size:clamp(2.1rem,4.6vw,3.3rem);color:#fff;max-width:22ch}
.nbanner .eyebrow{color:var(--aqua);margin:0}
.nbanner .lede{color:rgba(255,255,255,.88);max-width:60ch;margin:.4rem 0 0}
.nbanner .crumbs,.nbanner .crumbs a{color:rgba(255,255,255,.78)}
.content>.newsgrid{max-width:none}
.newsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin:.5rem 0 2rem}
@media (max-width:1024px){.newsgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.newsgrid{grid-template-columns:1fr}}
.ncard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color .15s,transform .15s}
.ncard:hover{border-color:var(--aqua);transform:translateY(-2px)}
.nthumb{display:block;aspect-ratio:16/10;background:#eef3f5;overflow:hidden}
.nthumb img{width:100%;height:100%;object-fit:cover;display:block}
.nbody{padding:1rem 1.15rem 1.15rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.ncat{text-decoration:none;font-size:.72rem}
.ncard h3{margin:0;font:700 1.12rem/1.3 var(--display)}
.ncard h3 a{color:var(--ink);text-decoration:none}
.ncard h3 a:hover{color:var(--lake)}
.nex{margin:0;color:var(--muted);font-size:.95rem;flex:1}
.nfoot{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-top:.5rem;padding-top:.75rem;border-top:1px solid var(--line);font-size:.86rem;color:var(--muted)}
.nmore{font-weight:700;color:var(--lake);text-decoration:none;white-space:nowrap}
.nmore:hover{color:var(--lake-deep)}
.pbanner .pcat{text-decoration:none}
.pdate{margin:.2rem 0 0;color:rgba(255,255,255,.82);font-size:.95rem;display:flex;gap:.9rem;flex-wrap:wrap}
.ppost .wrap{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:960px){.ppost .wrap{grid-template-columns:1fr}}
.particle>*{max-width:none}
.particle>p,.particle>ul,.particle>ol,.particle>h2,.particle>h3,.particle>.lead{max-width:68ch}
.particle h2{scroll-margin-top:96px}
.ptoc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin:0 0 2rem;max-width:68ch}
.ptoc summary{cursor:pointer;padding:.9rem 1.15rem;font:700 1.05rem var(--display);color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center}
.ptoc summary::-webkit-details-marker{display:none}
.ptoc summary::after{content:"";width:.55rem;height:.55rem;border-right:2px solid var(--lake);border-bottom:2px solid var(--lake);transform:rotate(225deg);margin-top:.2rem}
.ptoc:not([open]) summary::after{transform:rotate(45deg);margin-top:-.2rem}
.ptoc ol{margin:0;padding:.2rem 1.15rem 1rem 2.4rem;border-top:1px solid var(--line)}
.ptoc li{padding:.2rem 0}
.ptoc a{color:var(--muted);text-decoration:none}
.ptoc a:hover{color:var(--lake)}
.pshare{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:2.5rem 0 0;padding-top:1.25rem;border-top:1px solid var(--line)}
.pshare>span{font-weight:700;margin-right:.4rem}
.pshare a,.pshare button{font:600 .92rem var(--body);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;text-decoration:none;cursor:pointer}
.pshare a:hover,.pshare button:hover{border-color:var(--lake);color:var(--lake)}
.pside{position:sticky;top:96px;display:grid;gap:1.25rem}
@media (max-width:960px){.pside{position:static}}
.sp-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem}
.sp-box h2{margin:0 0 1rem;font-size:1.2rem}
.sp-list{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.sp-list li{display:grid;grid-template-columns:72px 1fr;gap:.8rem;align-items:start}
.sp-img{display:block;width:72px;height:72px;border-radius:10px;background:#eef3f5;overflow:hidden}
.sp-img img{width:100%;height:100%;object-fit:cover}
.sp-list div a{color:var(--ink);font-weight:600;line-height:1.3;text-decoration:none}
.sp-list div a:hover{color:var(--lake)}
.sp-list time{display:block;color:var(--muted);font-size:.82rem;margin-top:.2rem}
.phelp{background:var(--lake-deep);color:#fff;border-radius:var(--r);padding:1.25rem;display:grid;gap:.9rem}
.phelp>a:not(.btn){display:flex;gap:.8rem;align-items:center;color:#fff;text-decoration:none;font-family:var(--mono);font-size:.95rem}
.phelp b{display:block;font:600 .95rem var(--body)}
.ph-i{flex:none;width:42px;height:42px;border-radius:999px;background:rgba(22,184,196,.18);color:var(--aqua);display:grid;place-items:center}
.phelp .btn{width:100%;background:var(--aqua);color:var(--lake-deep)}
.phelp .btn:hover{background:#fff}
/* "Systems mentioned in this guide": same-size cards, photo in a fixed 4:3 frame */
.particle .prel-h{margin:2.5rem 0 1rem}
.prel{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:1rem}
.prel .prod{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-decoration:none;color:var(--ink);overflow:hidden;transition:border-color .15s,transform .15s}
.prel .prod:hover{border-color:var(--aqua);transform:translateY(-2px)}
.prel .img{aspect-ratio:4/3;display:grid;place-items:center;background:#eef3f5;padding:.9rem}
.prel .img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.prel .txt{padding:.85rem 1rem 1rem;display:flex;flex-direction:column;gap:.25rem;flex:1}
.prel .tag{font:600 .72rem var(--body);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.prel h3{margin:0;font-size:1.05rem}
.particle .prel p{margin:0;color:var(--muted);font-size:.92rem}
.prel .more{margin-top:auto;padding-top:.35rem;font-weight:700;color:var(--lake);font-size:.9rem}
/* images inside articles: never taller than the screen */
.particle figure{margin:1.5rem 0;text-align:center}
.particle figure img{display:inline-block;max-width:100%;max-height:440px;width:auto;height:auto;object-fit:contain;border-radius:var(--r)}
@media print{.pside,.pshare,.nbanner .crumbs,.call-float,.wa-float{display:none}}
/* feature tiles: crisp brand icons on a soft teal badge */
.feat .ficon{width:68px;height:68px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(145deg,var(--aqua),var(--lake));color:#fff;box-shadow:0 8px 18px -8px rgba(11,93,115,.55)}
.feat .ficon svg{width:34px;height:34px}