@font-face {
    font-family: "Bricolage Grotesque";
    src: url("/assets/fonts/BricolageGrotesque.woff2") format("woff2");
    font-weight: 500 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Figtree";
    src: url("/assets/fonts/Figtree.woff2") format("woff2");
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
}

:root{
  --bg:#ffffff; --surface:#F6FAFA; --ink:#1F3345; --on-ink:#ffffff; --muted:#5B6E7C; --line:#E4ECEE;
  --brand:#0B7F8C; --on-brand:#ffffff;
  --clean:#0F9BA8; --green:#3E9F4B; --snow:#4A86E8; --amber:#E9A23B;
  --clean-ink:#0B6F79; --green-ink:#2A7A35; --snow-ink:#2F63C4; --amber-ink:#8A5A0B;
  --clean-tint:rgba(15,155,168,.11); --green-tint:rgba(62,159,75,.12); --snow-tint:rgba(74,134,232,.12); --amber-tint:rgba(233,162,59,.17);
  --shadow:0 1px 2px rgba(31,51,69,.05), 0 16px 36px -18px rgba(31,51,69,.18);
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
:root[data-theme="dark"]{
  --bg:#0E1922; --surface:#14232F; --ink:#E9F0F5; --on-ink:#0E1922; --muted:#9DB0BF; --line:#243645;
  --brand:#39B7C4; --on-brand:#0E1922;
  --clean-ink:#5CD0DA; --green-ink:#7BD08A; --snow-ink:#8DB4FF; --amber-ink:#F2C275;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 16px 36px -18px rgba(0,0,0,.6);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased; transition:background .25s, color .25s}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display); line-height:1.1; letter-spacing:-.015em; margin:0; font-weight:700}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:3px solid var(--clean); outline-offset:3px; border-radius:6px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:12px; top:-60px; background:var(--ink); color:var(--on-ink); padding:10px 16px; border-radius:10px; z-index:100; text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 8px)}
.wrap{max-width:1120px; margin-inline:auto; padding-inline:clamp(20px,5vw,40px)}

/* Header */
.site-header{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:var(--bg); background:color-mix(in srgb,var(--bg) 90%,transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color .2s, background .25s}
.site-header.scrolled{border-color:var(--line)}
.bar-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--display); font-weight:700; font-size:1.2rem; letter-spacing:-.01em}
.brand img{flex:none; border-radius:8px}
.nav ul{display:flex; gap:6px}
.nav a{position:relative; display:block; padding:10px 12px; text-decoration:none; font-weight:500; font-size:.98rem; color:var(--muted); transition:color .15s}
.nav a:hover{color:var(--ink)}
.nav a::after{content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px; border-radius:2px; background:var(--clean); transform:scaleX(0); transform-origin:left; transition:transform .25s}
.nav a[aria-current="true"]{color:var(--ink)}
.nav a[aria-current="true"]::after{transform:scaleX(1)}
.header-cta{display:flex; align-items:center; gap:10px}
.nav-toggle{display:none; width:44px; height:44px; border:1px solid var(--line); background:var(--bg); border-radius:12px; color:var(--ink); cursor:pointer; align-items:center; justify-content:center}
@media (max-width:859px){
  .nav-toggle{display:inline-flex}
  .nav{display:none; position:absolute; left:0; right:0; top:100%; background:var(--bg); border-bottom:1px solid var(--line); padding:8px clamp(20px,5vw,40px) 16px}
  .nav.open{display:block}
  .nav ul{flex-direction:column; gap:0}
  .nav a{padding:14px 4px; font-size:1.05rem; border-top:1px solid var(--line)}
  .nav li:first-child a{border-top:0}
  .nav a::after{display:none}
  .nav a[aria-current="true"]{color:var(--clean-ink)}
  .header-cta .btn{display:none}
}

/* Theme toggle */
.theme-toggle{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--ink); cursor:pointer}
.theme-toggle:hover{border-color:var(--brand); color:var(--brand)}
.theme-toggle svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.theme-toggle .ic-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:none}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:block}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 24px; border-radius:999px; font:600 1rem/1 var(--body); text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:transform .15s, background .15s, border-color .15s}
.btn-primary{background:var(--brand); color:var(--on-brand)}
.btn-primary:hover{background:#096B77}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{border-color:var(--line); background:transparent; color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none}
.btn-sm{min-height:42px; padding:10px 18px; font-size:.95rem}

/* Component helpers extracted from inline styles */
.about-title { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
.contact-heading { margin-bottom: 0; }
.btn-static { pointer-events: none; }

.dot-clean { background: var(--clean); }
.dot-green { background: var(--green); }
.dot-snow  { background: var(--snow); }
.dot-amber { background: var(--amber); }

.seg-clean { background: var(--clean); }
.seg-green { background: var(--green); }
.seg-snow  { background: var(--snow); }
.seg-amber { background: var(--amber); }

.seg-full { grid-column: 1 / 13; }
.seg-season { grid-column: 4 / 11; }
.seg-winter-start { grid-column: 1 / 4; }
.seg-winter-end { grid-column: 11 / 13; }

.seg-delay-1 { --d: .10s; }
.seg-delay-2 { --d: .25s; }
.seg-delay-3 { --d: .40s; }
.seg-delay-4 { --d: .55s; }

/* Sections */
section{padding-block:clamp(64px,9vw,112px)}
.alt{background:var(--surface)}
.sec-head{max-width:640px; margin-bottom:clamp(32px,5vw,56px)}
.sec-head h2{font-size:clamp(1.9rem,4.2vw,2.9rem)}
.sec-head p{margin-top:16px; color:var(--muted); max-width:56ch}

/* Hero */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(620px,78vh,820px); padding-block:clamp(72px,9vw,120px);
  color:#fff; background:#17313A;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg,rgba(8,27,34,.88) 0%,rgba(8,27,34,.72) 48%,rgba(8,27,34,.48) 100%),
    linear-gradient(180deg,rgba(8,27,34,.18),rgba(8,27,34,.58));
}
.hero-media{ position:absolute; inset:0; z-index:-2; margin:0; }
.hero-media img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center 48%; }
.hero-grid{ position:relative; z-index:1; display:grid; gap:clamp(36px,6vw,64px); align-items:center; }
@media (min-width:920px){.hero-grid{grid-template-columns:1.05fr .95fr}}
.hero h1{font-size:clamp(2.35rem,6.2vw,4.1rem); letter-spacing:-.025em; line-height:1.04; font-weight:750; max-width:12ch}
.lead{margin-top:22px; font-size:1.2rem; color:rgba(255,255,255,.86); max-width:46ch; line-height:1.55}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.hero .btn-ghost{border-color:rgba(255,255,255,.42); color:#fff; background:rgba(255,255,255,.06)}
.hero .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.12)}
.hero-note{margin-top:18px; font-size:.95rem; color:rgba(255,255,255,.72)}
.hero-calc{
  margin-top:28px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:16px 20px; border-radius:20px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.hero-calc-ic{flex:none; width:44px; height:44px; border-radius:14px; background:#fff; color:var(--ink); display:grid; place-items:center; font-size:1.3rem; box-shadow:0 10px 28px rgba(0,0,0,.18); overflow:hidden}
.hero-calc-ic img{width:55%; height:55%; object-fit:contain}
.hero-calc-txt{flex:1 1 220px; min-width:180px}
.hero-calc-txt strong{display:block; font-family:var(--display); font-size:1.02rem; font-weight:700}
.hero-calc-txt span{display:block; margin-top:2px; font-size:.92rem; color:rgba(255,255,255,.72)}
.hero-calc{text-decoration:none; color:inherit; transition:border-color .15s, transform .15s, background .15s}
.hero-calc:hover{border-color:rgba(255,255,255,.48); background:rgba(255,255,255,.14); transform:translateY(-1px)}
.strip{
  background:var(--bg); color:var(--ink); border:1px solid rgba(255,255,255,.58);
  border-radius:28px; padding:clamp(18px,3vw,28px); box-shadow:0 24px 60px rgba(0,0,0,.18);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
@media (max-width:480px){.hero-calc .btn-sm{width:100%}}
@media (max-width:700px){
  .hero{min-height:auto}
  .hero::before{
    background:
      linear-gradient(180deg,rgba(8,27,34,.72),rgba(8,27,34,.88)),
      linear-gradient(90deg,rgba(8,27,34,.45),rgba(8,27,34,.45));
  }
  .hero-media img{object-position:62% center}
}

/* Year strip */
.strip-title{font-family:var(--display); font-weight:700; font-size:1.15rem; margin-bottom:18px}
.chart{position:relative}
.now{position:absolute; top:-6px; bottom:-6px; width:calc(100%/12); border-radius:12px; background:color-mix(in srgb,var(--ink) 7%,transparent); border:1px dashed color-mix(in srgb,var(--ink) 35%,transparent); pointer-events:none}
.months{display:grid; grid-template-columns:repeat(12,1fr); text-align:center; font-size:.7rem; color:var(--muted); position:relative}
.months .is-now{color:var(--ink); font-weight:700}
.row{margin-top:18px; position:relative}
.row-label{display:flex; align-items:center; gap:8px; font-weight:600; font-size:.92rem; margin-bottom:7px}
.dot{width:10px; height:10px; border-radius:50%; flex:none}
.track{display:grid; grid-template-columns:repeat(12,1fr); height:12px; border-radius:999px; background:var(--line)}
.seg{height:100%; border-radius:999px; transform-origin:left center; animation:grow .9s cubic-bezier(.2,.7,.2,1) both; animation-delay:var(--d,0s)}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.strip-note{margin-top:22px; font-size:.95rem; color:var(--muted); min-height:3em}

/* Services */
.services-layout{display:grid; gap:36px}
@media (min-width:980px){
  .services-layout{grid-template-columns:.8fr 1.4fr; gap:72px; align-items:start}
  .services-layout .sec-head{position:sticky; top:calc(env(safe-area-inset-top,0px) + 100px); margin-bottom:0}
}
.svc{display:grid; grid-template-columns:auto 1fr; gap:20px; padding-block:30px; border-top:1px solid var(--line)}
.svc:first-child{border-top:0; padding-top:0}
.svc-icon{width:56px; height:56px; border-radius:18px; display:grid; place-items:center}
.svc-icon svg{width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.svc h3{font-size:1.4rem}
.svc p{margin-top:8px; color:var(--muted)}
.svc ul{margin-top:14px; display:grid; gap:6px; font-size:.98rem}
.svc li{position:relative; padding-left:22px}
.svc li::before{content:""; position:absolute; left:2px; top:.62em; width:8px; height:8px; border-radius:50%; background:currentColor; opacity:.9}
.season{display:inline-block; margin-top:16px; padding:5px 12px; border-radius:999px; font-size:.86rem; font-weight:600}
.c-clean .svc-icon,.c-clean .season{background:var(--clean-tint); color:var(--clean-ink)}
.c-green .svc-icon,.c-green .season{background:var(--green-tint); color:var(--green-ink)}
.c-snow .svc-icon,.c-snow .season{background:var(--snow-tint); color:var(--snow-ink)}
.c-amber .svc-icon,.c-amber .season{background:var(--amber-tint); color:var(--amber-ink)}
.c-clean li::before{background:var(--clean)} .c-green li::before{background:var(--green)} .c-snow li::before{background:var(--snow)} .c-amber li::before{background:var(--amber)}
.svc li{color:var(--ink)}
@media (max-width:520px){.svc{grid-template-columns:1fr; gap:14px}}

/* Process */
.steps{display:grid; gap:28px; counter-reset:step}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,1fr); gap:40px}}
.step{position:relative; padding-top:6px}
.step-num{display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--brand); color:var(--on-brand); font-family:var(--display); font-weight:700; font-size:1.2rem}
.step h3{margin-top:20px; font-size:1.3rem}
.step p{margin-top:10px; color:var(--muted); max-width:34ch}
@media (min-width:820px){
  .step:not(:last-child)::after{content:""; position:absolute; top:30px; left:64px; right:-24px; border-top:2px dashed var(--line)}
}

/* Stats */
.stats-grid{display:grid; gap:20px}
@media (min-width:760px){.stats-grid{grid-template-columns:repeat(3,1fr); gap:24px}}
.stat-card{
  padding:clamp(26px,4vw,36px) 24px; border-radius:26px; background:var(--surface);
  border:1px solid var(--line); text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px;
}
.alt .stat-card{background:var(--bg)}
.stat-ic{width:48px; height:48px; border-radius:16px; display:grid; place-items:center; margin-bottom:4px}
.stat-ic svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.stat-clients .stat-ic{background:var(--clean-tint); color:var(--clean-ink)}
.stat-days .stat-ic{background:var(--green-tint); color:var(--green-ink)}
.stat-years .stat-ic{background:var(--amber-tint); color:var(--amber-ink)}
.stat-num{font-family:var(--display); font-weight:800; font-size:clamp(2.3rem,5.5vw,3.1rem); letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums}
.stat-clients .stat-num{color:var(--clean-ink)}
.stat-days .stat-num{color:var(--green-ink)}
.stat-years .stat-num{color:var(--amber-ink)}
.stat-label{color:var(--muted); font-weight:600; font-size:.98rem}

/* About */
.about-grid{display:grid; gap:40px}
@media (min-width:900px){.about-grid{grid-template-columns:1.1fr .9fr; gap:80px; align-items:center}}
.about-text p{margin-top:18px; color:var(--muted); max-width:56ch}
.facts{display:grid; gap:14px}
.fact{padding:20px 22px; border-radius:20px; background:var(--surface); border-left:4px solid var(--clean)}
.alt .fact{background:var(--bg)}
.fact:nth-child(2){border-left-color:var(--green)}
.fact:nth-child(3){border-left-color:var(--amber)}
.fact strong{display:block; font-family:var(--display); font-size:1.1rem; margin-bottom:4px}
.fact span{color:var(--muted); font-size:.98rem}

/* Calculator teaser */
.teaser{background:var(--surface); border:1px solid var(--line); border-radius:32px; padding:clamp(28px,5vw,56px); display:grid; gap:28px}
@media (min-width:900px){.teaser{grid-template-columns:1.1fr .9fr; align-items:center; gap:56px}}
.teaser h2{font-size:clamp(1.7rem,3.6vw,2.4rem)}
.teaser p{margin-top:14px; color:var(--muted); max-width:52ch}
.chips{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:0}
.chip{padding:10px 16px; border-radius:999px; background:var(--bg); border:1px solid var(--line); font-weight:600; font-size:.95rem}
.chip-end{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
.chip-sep{color:var(--muted)}
.teaser .btn{margin-top:22px}

/* FAQ */
.faq-wrap{max-width:820px}
details{border-top:1px solid var(--line)}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 4px; font-family:var(--display); font-weight:600; font-size:1.2rem; letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary .pm{position:relative; flex:none; width:22px; height:22px}
summary .pm::before,summary .pm::after{content:""; position:absolute; left:3px; right:3px; top:50%; height:2px; margin-top:-1px; background:var(--ink); border-radius:2px; transition:transform .25s}
summary .pm::after{transform:rotate(90deg)}
details[open] summary .pm::after{transform:rotate(0)}
details .answer{padding:0 44px 24px 4px; color:var(--muted); max-width:62ch}

/* Contact */
.contact-grid{display:grid; gap:44px}
@media (min-width:920px){.contact-grid{grid-template-columns:.9fr 1.1fr; gap:80px; align-items:start}}
.contact-list{display:grid; gap:22px; margin-top:32px}
.contact-list dt{font-weight:600; font-size:.95rem; color:var(--muted)}
.contact-list dd{margin:2px 0 0; font-family:var(--display); font-size:1.35rem; font-weight:600}
.contact-list a{text-decoration:none; border-bottom:2px solid var(--clean)}
form{background:var(--bg); border:1px solid var(--line); border-radius:28px; padding:clamp(22px,4vw,36px); box-shadow:var(--shadow); display:grid; gap:18px}
.field{display:grid; gap:6px}
label{font-weight:600; font-size:.95rem}
input,select,textarea{font:inherit; color:var(--ink); background:var(--bg); border:1.5px solid var(--line); border-radius:14px; padding:13px 14px; min-height:48px; width:100%}
textarea{min-height:120px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--clean); box-shadow:0 0 0 3px var(--clean-tint)}
.form-note{font-size:.88rem; color:var(--muted)}

/* Photos */
.mosaic{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:14px; min-height:clamp(340px,52vw,460px)}
.photo{margin:0; border-radius:24px; overflow:hidden; background:var(--surface); position:relative; min-height:150px; box-shadow:var(--shadow)}
.photo img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.photo:hover img{transform:scale(1.035)}
.p-a{grid-row:1/3}
@media (max-width:620px){
  .mosaic{grid-template-columns:1fr; grid-template-rows:auto; min-height:0}
  .photo{min-height:240px}
  .p-a{grid-row:auto; min-height:360px}
}
.facts-row{margin-top:clamp(32px,5vw,56px)}
@media (min-width:820px){.facts-row{grid-template-columns:repeat(3,1fr)}}

/* Map */
.map{position:relative; display:block; height:230px; margin-top:32px; border-radius:24px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); text-decoration:none}
.map svg{display:block; width:100%; height:100%}
.map-cta{position:absolute; right:12px; bottom:12px; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:8px 14px; font-size:.88rem; font-weight:600}
.map:hover .map-cta{border-color:var(--brand); color:var(--brand)}

/* Footer */
footer{padding-block:36px; border-top:1px solid var(--line); color:var(--muted); font-size:.95rem}
.foot{display:flex; flex-wrap:wrap; gap:12px 32px; justify-content:space-between}

/* Scroll reveal */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1; transform:none}
.reveal-group .reveal:nth-child(1){transition-delay:.05s}
.reveal-group .reveal:nth-child(2){transition-delay:.14s}
.reveal-group .reveal:nth-child(3){transition-delay:.23s}
.reveal-group .reveal:nth-child(4){transition-delay:.32s}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
}

/* Cookies */
.cookie-bar{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:200;
  max-width:640px; margin-inline:auto;
  background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:22px;
  padding:20px 22px; box-shadow:0 20px 50px rgba(0,0,0,.18);
  display:flex; flex-direction:column; gap:14px;
  transform:translateY(140%); opacity:0; transition:transform .4s cubic-bezier(.2,.7,.2,1), opacity .4s;
}
.cookie-bar.show{transform:translateY(0); opacity:1}
.cookie-bar p{font-size:.94rem; color:var(--muted); line-height:1.55}
.cookie-bar strong{color:var(--ink)}
.cookie-actions{display:flex; flex-wrap:wrap; gap:10px}
.cookie-actions .btn{padding:10px 20px; min-height:42px; font-size:.92rem}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
}

.svc-link{display:inline-block; margin-top:14px; font-weight:600; color:var(--brand); text-decoration:none}
.svc-link:hover{text-decoration:underline}

.has-dropdown{position:relative}
.dropdown{position:absolute; top:100%; left:0; min-width:220px; background:var(--bg); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); padding:8px; margin:8px 0 0; list-style:none;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .15s, transform .15s, visibility .15s}
.nav ul.dropdown{display:block}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{opacity:1; visibility:visible; transform:translateY(0)}
.dropdown li{margin:0}
.dropdown a{display:block; padding:9px 12px; border-radius:8px; font-size:.94rem; color:var(--ink); text-decoration:none; font-weight:500; border-top:0}
.dropdown a:hover{background:var(--surface)}

@media (max-width:859px){
  .dropdown{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; background:transparent;
    padding:0 0 0 14px; margin:4px 0 0}
  .dropdown a{padding:10px 4px; font-size:.98rem; color:var(--muted); border-top:0}
  .dropdown a:hover{background:transparent; color:var(--ink)}
}