/* Rishon Sunset - realised. Tokens first, components after. */

:root{
  --ink:#0B1730; --ink-2:#41527A; --ink-3:#667795;
  --line:#E5EAF4; --line-2:#D3DCEB; --haze:#F4F7FD; --white:#fff;

  --blue:#2563F5; --blue-d:#1546CC; --blue-t:#E8EFFE;
  --sea:#00A6C4;  --sea-t:#DFF5FA;
  --aqua:#00B98A; --aqua-t:#DDF8EF;
  --coral:#FF5B2E; --coral-d:#E8410F; --coral-t:#FFEDE7;
  --pink:#EE1E6E; --pink-t:#FEE7F0;
  --violet:#6D3DF0; --violet-t:#EFE9FE;
  --gold:#E08C00; --gold-t:#FEF3DC;

  --r-sm:11px; --r:16px; --r-lg:26px;
  --sh:0 2px 6px rgba(11,23,48,.05), 0 14px 32px -18px rgba(11,23,48,.22);
  --sh-lift:0 4px 10px rgba(11,23,48,.06), 0 26px 50px -20px rgba(37,99,245,.34);
  --wrap:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Rubik',system-ui,sans-serif;font-size:17px;line-height:1.62;color:var(--ink);background:var(--white)}
:where(h1,h2,h3){font-family:'Secular One',sans-serif;font-weight:400;line-height:1.16;letter-spacing:-.005em}
:where(h4,h5,h6){font-family:'Rubik',sans-serif;font-weight:600;line-height:1.3}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.num{font-variant-numeric:tabular-nums}
.skip{position:absolute;inset-inline-start:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{inset-inline-start:0}

/* ---------- buttons: cta colour only ever means submit ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;border-radius:12px;padding:12px 22px;transition:filter .16s,transform .16s,background .16s}
.btn--cta{background:linear-gradient(135deg,var(--coral),var(--pink));color:#fff;box-shadow:0 10px 24px -12px var(--pink)}
.btn--cta:hover{filter:brightness(1.08);transform:translateY(-2px)}
.btn--block{width:100%}
.btn--ghost{background:#fff;color:var(--violet)}
.btn--ghost:hover{background:#F0EBFF}

/* ---------- header ---------- */
.head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.head__row{display:flex;align-items:center;gap:22px;min-height:74px;position:relative}
/* Wordmark only. No symbol: a service site earns trust by being legible,
   not by carrying a metaphor. The domain sits under the name in the commit
   colour, which is the single tie to the palette. */
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;line-height:1}
.brand__name{
  font-family:'Secular One',sans-serif;font-size:1.26rem;line-height:1;display:block;
  color:var(--ink);letter-spacing:-.015em;
}
.brand__tld{
  display:block;font-size:.74rem;letter-spacing:.2em;font-weight:600;
  color:var(--coral);direction:ltr;text-align:right;margin-top:5px;
}
.brand:hover .brand__tld{color:var(--coral-d)}
.nav__list{display:flex;gap:2px;align-items:center;list-style:none}
.nav__list a{display:block;padding:9px 13px;border-radius:9px;font-size:.97rem;font-weight:500;color:var(--ink-2);transition:.15s;white-space:nowrap}
.nav__list a:hover{background:var(--haze);color:var(--ink)}
.nav__list .is-on>a,.nav__list a.is-on,.nav__list .current-menu-item>a{color:var(--blue);background:var(--blue-t);font-weight:600}
.head__cta{padding:10px 17px;font-size:.94rem;border-radius:10px;margin-inline-start:0}

/* ---------- hero: the one mesh in the design ---------- */
.hero{position:relative;overflow:hidden;padding:60px 0 0;color:#fff;
  background:
    radial-gradient(60% 70% at 88% 8%, rgba(238,30,110,.6) 0%, transparent 62%),
    radial-gradient(55% 65% at 12% 4%, rgba(109,61,240,.64) 0%, transparent 60%),
    radial-gradient(70% 80% at 50% 108%, rgba(0,166,196,.54) 0%, transparent 60%),
    linear-gradient(165deg,#122250 0%,#0B1730 100%);}
.hero__inner{max-width:740px;position:relative;z-index:2}
.hero h1{font-size:clamp(2.3rem,5.6vw,3.7rem);margin-bottom:14px;letter-spacing:-.015em}
.hero h1 em{font-style:normal;background:linear-gradient(95deg,#FFB020 0%,var(--coral) 45%,var(--pink) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:#B7C7E8;font-size:1.1rem;max-width:56ch;font-weight:300}
.hero .eyebrow{color:#BFD5FF}
.hero .eyebrow::before{background:var(--coral)}


.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px;padding-bottom:54px;align-items:center;list-style:none}
.chips__label{font-size:.90rem;color:#CBD8F2}
.chips a{display:block;font-size:.91rem;font-weight:500;padding:7px 14px;border-radius:22px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#EAF0FF;transition:.16s}
.chips a:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ---------- eyebrow: rationed, one per three sections ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:.83rem;font-weight:700;letter-spacing:.1em;color:var(--blue);margin-bottom:.55rem}
.eyebrow::before{content:'';width:20px;height:3px;border-radius:2px;background:var(--coral)}

/* ---------- icon chips: one hue per service, fixed ---------- */
.chip-i{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex-shrink:0;background:var(--cb,var(--haze));color:var(--c,var(--ink));transition:transform .2s cubic-bezier(.3,1.4,.5,1)}
.chip-i--lg{width:58px;height:58px;border-radius:18px}
.i-blue{--c:var(--blue);--cb:var(--blue-t)}
.i-sea{--c:var(--sea);--cb:var(--sea-t)}
.i-aqua{--c:var(--aqua);--cb:var(--aqua-t)}
.i-coral{--c:var(--coral-d);--cb:var(--coral-t)}
.i-pink{--c:var(--pink);--cb:var(--pink-t)}
.i-violet{--c:var(--violet);--cb:var(--violet-t)}
.i-gold{--c:var(--gold);--cb:var(--gold-t)}

/* ---------- status pills: colour is data ---------- */
.pill{display:inline-flex;align-items:center;gap:7px;font-size:.88rem;font-weight:600;padding:6px 12px;border-radius:9px}
.pill__dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.pill--live{color:var(--aqua);background:var(--aqua-t)}
.pill--live .pill__dot{animation:rl-pulse 1.9s ease-in-out infinite}
.pill--soon{color:var(--gold);background:var(--gold-t)}
.pill--calm{color:var(--ink-2);background:var(--haze)}
.pill--stale{color:#9A5B00;background:#FBEEDC}
@keyframes rl-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.72)}}

/* ---------- the service board ---------- */
.board-zone{background:var(--haze);border-bottom:1px solid var(--line)}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;position:relative;z-index:3;list-style:none}
/* Only the home page has a gradient for the cards to sit on. */
.home .board{margin-top:-42px}
.tile{background:#fff;border-radius:var(--r);padding:20px;display:block;height:100%;border:1px solid var(--line);box-shadow:var(--sh);transition:transform .2s,box-shadow .2s,border-color .2s;animation:rl-up .55s cubic-bezier(.2,.8,.3,1) backwards}
.board li:nth-child(1) .tile{animation-delay:.03s}
.board li:nth-child(2) .tile{animation-delay:.08s}
.board li:nth-child(3) .tile{animation-delay:.13s}
.board li:nth-child(4) .tile{animation-delay:.18s}
.board li:nth-child(5) .tile{animation-delay:.23s}
.board li:nth-child(6) .tile{animation-delay:.28s}
@keyframes rl-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.tile:hover{transform:translateY(-5px);box-shadow:var(--sh-lift);border-color:transparent}
.tile:hover .chip-i{transform:scale(1.09) rotate(-5deg)}
.tile__top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.tile h3{font-size:1.09rem}
.tile p{font-size:.92rem;color:var(--ink-2);line-height:1.55;margin-bottom:14px;font-weight:300}
.board-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:20px 2px 38px;font-size:.91rem;color:var(--ink-2)}
.area-picker{display:flex;align-items:center;gap:9px}
.area-picker select{font-size:.92rem;font-weight:600;padding:8px 13px;border:1.5px solid var(--blue);border-radius:10px;background:#fff;color:var(--blue);cursor:pointer}
.tlink{color:var(--blue);font-weight:600}
.tlink:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- sections ---------- */
.sec{padding:66px 0}
.sec--tint{background:var(--haze)}
.sec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.sec__head h2{font-size:clamp(1.65rem,3.2vw,2.2rem)}
.sec__head p{color:var(--ink-2);font-size:.99rem;margin-top:6px;max-width:62ch;font-weight:300}
.more{color:var(--blue);font-weight:600;font-size:.96rem;white-space:nowrap;padding:9px 16px;border-radius:10px;background:var(--blue-t);transition:.16s}
.more:hover{background:var(--blue);color:#fff}

/* ---------- neighbourhood cards ---------- */
.hoods{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;list-style:none}
.hood{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:block;height:100%;transition:transform .2s,box-shadow .2s,border-color .2s}
.hood:hover{transform:translateY(-5px);box-shadow:var(--sh-lift);border-color:transparent}
.hood__band{height:6px;background:var(--c,var(--blue))}
.hood__body{padding:19px 20px 20px}
.hood h3{font-size:1.2rem;margin-bottom:6px}
.hood__kind{display:inline-block;font-size:.85rem;font-weight:600;padding:4px 10px;border-radius:20px;margin-bottom:13px;background:var(--cb,var(--haze));color:var(--c,var(--ink-2))}
.hood__desc{font-size:.93rem;color:var(--ink-2);line-height:1.58;margin-bottom:17px;font-weight:300}
.hood__price{border-top:1px solid var(--line);padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.hood__price b{font-size:1.28rem;font-weight:700;line-height:1.2;display:block}
.hood__price small{font-size:.80rem;color:var(--ink-3);display:block;font-weight:400}
.trend{font-size:.87rem;font-weight:700;color:var(--aqua);background:var(--aqua-t);padding:5px 10px;border-radius:8px;white-space:nowrap}
.trend--down{color:var(--coral-d);background:var(--coral-t)}
.nodata{font-size:.88rem;color:var(--ink-3);font-weight:300;line-height:1.45}

/* ---------- trades ---------- */
.trades{display:grid;grid-template-columns:repeat(6,1fr);gap:13px;list-style:none}
.trade{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 13px;text-align:center;display:block;height:100%;transition:transform .2s,box-shadow .2s,border-color .2s}
.trade:hover{transform:translateY(-5px);box-shadow:var(--sh-lift);border-color:transparent}
.trade:hover .chip-i{transform:scale(1.1) rotate(6deg)}
.trade .chip-i{margin:0 auto 11px}
.trade b{display:block;font-size:.96rem;font-weight:600}
.trade span:not(.chip-i){font-size:.84rem;color:var(--ink-3)}

/* ---------- events ---------- */
.events{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none}
.event{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:19px;display:flex;gap:15px;height:100%;transition:transform .2s,box-shadow .2s,border-color .2s}
.event:hover{transform:translateY(-4px);box-shadow:var(--sh-lift);border-color:transparent}
.event__date{color:#fff;border-radius:13px;width:60px;flex-shrink:0;text-align:center;padding:10px 0;height:fit-content;background:var(--g,linear-gradient(140deg,var(--blue),var(--violet)))}
.event__date b{display:block;font-size:1.5rem;line-height:1;font-weight:700}
.event__date span{font-size:.78rem;opacity:.9}
.event h3{font-size:1.03rem;margin-bottom:4px;font-family:'Rubik',sans-serif;font-weight:600}
.event p{font-size:.91rem;color:var(--ink-2);font-weight:300}
.g-1{--g:linear-gradient(140deg,var(--blue),var(--violet))}
.g-2{--g:linear-gradient(140deg,var(--coral),var(--pink))}
.g-3{--g:linear-gradient(140deg,var(--sea),var(--aqua))}

/* ---------- ad slots: planned, not bolted on ---------- */
.ad{background:var(--haze);border:1px solid var(--line);border-radius:var(--r-sm);position:relative;display:grid;place-items:center;color:var(--ink-3);font-size:.85rem}
.ad::before{content:attr(data-label);position:absolute;top:6px;inset-inline-end:9px;font-size:.73rem;letter-spacing:.1em;color:#9AA8C4}
.ad--lb{min-height:104px;margin:0 0 34px}
.ad--rect{min-height:264px;margin-top:18px}

/* ---------- crumbs ---------- */
.crumbs{padding:16px 0 2px}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:7px;list-style:none;margin:0;padding:0;font-size:.86rem;color:var(--ink-3)}
.crumbs li{display:flex;align-items:center;gap:7px}
.crumbs li::before,.crumbs li::marker{display:none;content:none}
.crumbs li + li::after{content:"";order:-1;width:5px;height:5px;border-inline-start:1.5px solid var(--line-2);border-bottom:1.5px solid var(--line-2);transform:rotate(45deg);flex-shrink:0}
.crumbs a{color:var(--ink-3);font-weight:500}
.crumbs a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-current]{color:var(--ink-2);font-weight:600}
@media (max-width:600px){.crumbs ol{font-size:.82rem}}
.crumbs a:hover{color:var(--blue)}
.crumbs i{color:var(--ink-3);font-style:normal}

/* ---------- business page ---------- */
.biz__head{border-bottom:1px solid var(--line);padding-bottom:26px}
.biz__cat{font-size:.89rem;font-weight:600;color:var(--blue);margin-bottom:8px}
.biz__title{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.biz__head h1{font-size:clamp(1.9rem,4.2vw,2.6rem)}
.biz__meta{display:flex;gap:9px;flex-wrap:wrap;align-items:center;list-style:none}
.tag{font-size:.88rem;font-weight:500;padding:6px 13px;border-radius:20px;background:var(--haze);color:var(--ink-2)}
.tag--ok{background:var(--blue-t);color:var(--blue-d);font-weight:600}
.tag--hot{background:var(--coral-t);color:var(--coral-d);font-weight:600}

.cols{display:grid;grid-template-columns:1fr 350px;gap:44px;padding:34px 0 70px;align-items:start}
.prose h2{font-size:1.45rem;margin:36px 0 13px}
.prose>h2:first-child{margin-top:0}
.prose p{margin-bottom:14px;color:#2A3A5C;font-weight:300}
.prose ul{margin:0 0 18px;padding:0;list-style:none}
.prose ul li{position:relative;padding-inline-start:28px;margin-bottom:9px;color:#2A3A5C;font-weight:300}
.prose ul li::before{content:'';position:absolute;inset-inline-start:0;top:.62em;width:9px;height:9px;border-radius:3px;background:linear-gradient(135deg,var(--sea),var(--aqua))}

.facts{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:26px 0}
.facts__row{display:flex;border-bottom:1px solid var(--line);font-size:.96rem}
.facts__row:last-child{border-bottom:0}
.facts dt{width:155px;flex-shrink:0;padding:13px 17px;background:var(--haze);font-weight:600;font-size:.92rem}
.facts dd{padding:13px 17px;color:var(--ink-2);font-weight:300}
.facts dd.is-missing{color:var(--ink-3);font-style:italic}

.hours{width:100%;border-collapse:collapse;font-size:.96rem;margin:6px 0 12px}
.hours td{padding:10px 6px;border-bottom:1px solid var(--line);font-weight:300}
.hours td:last-child{text-align:end;color:var(--ink-2);font-variant-numeric:tabular-nums}
.hours tr.is-today td{font-weight:700;color:var(--blue)}

/* the lead form is the only element with a colour shadow of its own */
/* ---------- lead form ----------
   The card is a commit surface, so it follows the same rule as the rest of the
   site: a calm ink header, and coral reserved for the one action that commits.
   The three-colour gradient it carried before fought that rule and shouted. */
.lead{
  position:sticky;top:90px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 1px 2px rgba(11,23,48,.04), 0 12px 28px -14px rgba(11,23,48,.22);
}
.lead__top{padding:19px 22px 17px;color:#fff;background:var(--ink);position:relative}
.lead__top::after{content:'';position:absolute;inset-inline:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--coral),var(--pink))}
.lead__top h2{font-size:1.16rem;margin-bottom:4px;color:#fff}
.lead__top p{font-size:.90rem;color:#A8BCE4;font-weight:300;line-height:1.5;margin:0}
.lead__body{padding:20px 22px 22px}

/* font:inherit is the fix that matters. Without it the browser drops the
   fields back to its own font, which in Hebrew reads as a broken form. */
.field{margin-bottom:15px}
.field label{display:block;font-size:.89rem;font-weight:600;margin-bottom:6px}
.field input,.field textarea,.field select{
  width:100%;font:inherit;font-size:.97rem;line-height:1.5;
  padding:11px 13px;border:1.5px solid var(--line-2);border-radius:11px;
  background:var(--haze);color:var(--ink);transition:border-color .15s,background .15s,box-shadow .15s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:1;font-weight:300}
.field textarea{min-height:88px;resize:vertical}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--ink-3)}
.field input:focus,.field textarea:focus,.field select:focus{
  background:#fff;border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--blue-t);
}
.lead .btn{margin-top:4px}

.lead__msg{margin-top:12px;font-size:.92rem;padding:11px 13px;border-radius:10px;display:none;line-height:1.5}
.lead__msg.is-ok{display:block;background:var(--aqua-t);color:#00744F}
.lead__msg.is-err{display:block;background:var(--coral-t);color:var(--coral-d)}

/* The notice carries the statutory wording, so it is set to read rather than
   to decorate: start-aligned, roomy, and the link visible as a link. */
.lead__fine{
  font-size:.88rem;color:var(--ink-3);font-weight:300;line-height:1.6;
  margin-top:14px;padding-top:13px;border-top:1px solid var(--line);text-align:start;
}
.lead__fine a{color:var(--blue);font-weight:500}
.lead__fine a:hover{text-decoration:underline;text-underline-offset:2px}

/* A sticky card taller than the viewport traps its own submit button. */
@media (max-height:760px){ .lead{position:static} }
@media (max-width:900px){ .lead{position:static} }
.aside__box{border:1px solid var(--line);border-radius:var(--r);padding:19px;margin-top:20px}
.aside__box h2{font-size:1.03rem;margin-bottom:13px;font-family:'Rubik',sans-serif;font-weight:600}
.mini{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);align-items:center}
.mini:last-child{border-bottom:0;padding-bottom:0}
.mini__i{width:40px;height:40px;border-radius:12px;color:#fff;display:grid;place-items:center;flex-shrink:0;font-weight:700;font-size:1rem;background:var(--c,var(--blue))}
.mini b{display:block;font-size:.96rem;font-weight:600}
.mini span:not(.mini__i){font-size:.86rem;color:var(--ink-3)}

/* ---------- neighbourhood page ---------- */
.hoodhero{position:relative;color:#fff;overflow:hidden;background:
  radial-gradient(65% 90% at 88% 10%, rgba(0,166,196,.6) 0%, transparent 60%),
  radial-gradient(60% 80% at 10% 100%, rgba(109,61,240,.6) 0%, transparent 60%),
  linear-gradient(160deg,#152A5C 0%,#0B1730 100%)}
.hoodhero__img{position:absolute;inset:0}
.hoodhero__img img{width:100%;height:100%;object-fit:cover}
.hoodhero__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,23,48,.95) 12%,rgba(11,23,48,.6) 70%,rgba(11,23,48,.5) 100%)}
.hoodhero>.wrap{position:relative;z-index:2;padding-top:14px;padding-bottom:34px}
.hoodhero .crumbs{color:#9DB2DC}
.hoodhero .crumbs i{color:#5E75A8}
.hoodhero .crumbs a:hover{color:#fff}
.hoodhero .eyebrow{color:#8FD8E8}
.hoodhero .eyebrow::before{background:#FF8A5C}
.hoodhero h1{font-size:clamp(2.1rem,5vw,3.1rem);margin-bottom:12px}
.hoodhero__lede{color:#B7C7E8;max-width:64ch;font-size:1.05rem;font-weight:300}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:30px;list-style:none}
.stat{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:16px 18px}
.stat b{display:block;font-size:1.5rem;font-weight:700;line-height:1.25;color:#fff}
.stat span{font-size:.87rem;color:#A8BCE4;font-weight:300}
.stat--na b{color:#8DA2CC;font-size:1.05rem;font-weight:400}

.chart{margin:10px 0 26px;list-style:none}
.bar{display:flex;align-items:center;gap:13px;margin-bottom:10px}
.bar__yr{width:44px;font-size:.91rem;color:var(--ink-3);flex-shrink:0;font-weight:500}
.bar__track{flex:1;background:var(--haze);border-radius:8px;height:26px;overflow:hidden}
.bar__fill{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--violet),var(--pink),var(--coral))}
.bar__val{width:80px;text-align:start;font-size:.93rem;font-weight:700;flex-shrink:0;font-variant-numeric:tabular-nums}
.chart-note{font-size:.86rem;color:var(--ink-3);font-weight:300}

.split{display:grid;grid-template-columns:1fr 322px;gap:44px;padding:40px 0 70px;align-items:start}
.callout{background:var(--gold-t);border-inline-start:5px solid var(--gold);border-radius:0 var(--r) var(--r) 0;padding:17px 20px;margin:24px 0;font-size:.97rem;font-weight:300;color:#4A3808}
.callout b{color:#8A5600;font-weight:700}
.schools{list-style:none;display:grid;gap:10px;margin:6px 0 20px;padding:0}
.schools li{display:flex;justify-content:space-between;gap:14px;padding:13px 16px;border:1px solid var(--line);border-radius:12px;font-size:.97rem;align-items:center}
.schools li::before{display:none}
.schools b{font-weight:600}
.schools em{color:var(--ink-3);font-size:.90rem;font-style:normal;font-weight:300}
.ctabox{border-radius:var(--r);padding:21px;margin-top:20px;color:#fff;background:linear-gradient(145deg,var(--blue) 0%,var(--violet) 100%)}
.ctabox h2{color:#fff;font-size:1.06rem;margin-bottom:8px;font-family:'Rubik',sans-serif;font-weight:600}
.ctabox p{font-size:.93rem;color:rgba(255,255,255,.86);margin-bottom:15px;font-weight:300}

/* ---------- generic archive / listing ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none;padding:0}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;display:block;height:100%;transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-lift);border-color:transparent}
.card h2,.card h3{font-size:1.12rem;margin-bottom:7px}
.card p{font-size:.93rem;color:var(--ink-2);font-weight:300}
.card__meta{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.page-head{padding:44px 0 8px}
.page-head h1{font-size:clamp(1.9rem,4vw,2.6rem);margin-bottom:10px}
.page-head p{color:var(--ink-2);max-width:64ch;font-weight:300}
.empty{border:1px dashed var(--line-2);border-radius:var(--r);padding:34px;text-align:center;color:var(--ink-2);font-weight:300}
.empty b{display:block;font-weight:600;color:var(--ink);margin-bottom:6px;font-size:1.05rem}
.pager{display:flex;gap:8px;justify-content:center;padding:26px 0 0;flex-wrap:wrap}
.pager .page-numbers{padding:9px 15px;border-radius:10px;border:1px solid var(--line);font-size:.95rem;font-weight:500}
.pager .current{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#A2B4D6;font-size:.94rem;position:relative;margin-top:0}
.foot__edge{height:5px;background:linear-gradient(90deg,var(--blue),var(--violet),var(--pink),var(--coral),var(--gold))}
.foot__grid{display:grid;grid-template-columns:1.8fr repeat(3,1fr);gap:36px;padding:50px 0 34px}
.foot__h{color:#fff;font-family:'Rubik',sans-serif;font-size:.87rem;letter-spacing:.13em;font-weight:700;margin-bottom:14px}
.foot__about p{line-height:1.72;max-width:42ch;color:#93A6CB;font-weight:300}
.foot__legal{background:rgba(255,255,255,.06);border-radius:var(--r-sm);padding:13px 15px;margin-top:14px;font-size:.88rem;color:#B9C8E4;line-height:1.6}
.foot__legal a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot__list{list-style:none;display:grid;gap:9px;padding:0;margin:0}
.foot__list a{color:#A2B4D6;transition:color .15s}
.foot__list a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot__note{border-top:1px solid rgba(255,255,255,.11);padding:20px 0 26px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.88rem;color:#7F92B8}
.foot__note a{color:#9FB1D4}
.foot__note a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* Wrappers inside an <a> card must be block, or padding and coloured bands collapse. */
.hood__band,.hood__body,.hood__desc,.tile__top,.event__body{display:block}
.hood__kind{display:inline-block}
.hood__price{display:flex}
.tile__top{display:flex}

@media (max-width:1000px){
  .foot__grid{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:660px){
  .foot__grid{grid-template-columns:1fr;gap:26px;padding:38px 0 26px}
  .foot__note{flex-direction:column;gap:8px}
}

/* ---------- service sidebar ---------- */
.aside__box--lead{border-color:var(--blue);border-width:2px;background:linear-gradient(180deg,var(--blue-t) 0%,#fff 70%)}
.aside__box--warn{background:var(--haze)}
.aside__box--warn p{font-size:.91rem;color:var(--ink-2);font-weight:300;margin-bottom:13px}
.qlinks{list-style:none;display:grid;gap:8px;padding:0;margin:0}
.qlinks a{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 14px;transition:.16s}
.qlinks a:hover{border-color:var(--blue);box-shadow:0 6px 18px -10px var(--blue);transform:translateY(-2px)}
.qlinks a span{font-weight:600;font-size:.97rem}
.qlinks a small{font-size:.86rem;color:var(--ink-3);font-weight:300}
.qlinks__note{font-size:.87rem;color:var(--ink-3);font-weight:300;margin-top:11px;line-height:1.5}

/* Icon wrappers own their own colour. Descriptor text rules must never reach them. */
.mini__i,.mini span.mini__i{color:#fff}
.mini__i svg{stroke:currentColor}
.chip-i,.trade span.chip-i{color:var(--c,var(--ink))}
.chip-i svg{stroke:currentColor}

/* ---------- neighbourhood media ---------- */
.gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:26px 0 6px}
.gallery__item{margin:0;position:relative;border-radius:var(--r);overflow:hidden;background:var(--haze)}
.gallery__item img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.gallery__item--lead{grid-column:span 2;grid-row:span 2}
.gallery__item--lead img{aspect-ratio:auto;height:100%;min-height:260px}
.gallery__item figcaption{position:absolute;inset-inline:0;bottom:0;padding:22px 14px 10px;font-size:.86rem;color:#fff;font-weight:300;line-height:1.4;background:linear-gradient(to top,rgba(11,23,48,.85),transparent)}

.map{margin:26px 0 8px}
.map__canvas{height:380px;border-radius:var(--r);border:1px solid var(--line);z-index:1}
.map__cap{font-size:.86rem;color:var(--ink-3);font-weight:300;margin-top:9px;line-height:1.5}
.leaflet-container{font-family:'Rubik',sans-serif;border-radius:var(--r)}
.leaflet-popup-content{font-size:.94rem;margin:11px 14px}
.leaflet-popup-content a{color:var(--blue);font-weight:600}
.leaflet-control-attribution{font-size:.76rem}

@media (max-width:900px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery__item--lead{grid-column:span 2;grid-row:auto}
  .gallery__item--lead img{min-height:200px}
  .map__canvas{height:300px}
}
@media (max-width:560px){
  .gallery{grid-template-columns:1fr}
  .gallery__item--lead{grid-column:span 1}
  .map__canvas{height:250px}
}

/* ---------- median prices by room count ---------- */
.medians{border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin:26px 0}
.medians__head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.medians__head h3{font-size:1.14rem}
.medians__period{font-size:.86rem;font-weight:500;color:var(--ink-2);background:var(--haze);border:1px solid var(--line);padding:4px 11px;border-radius:20px}
.medians__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.medians__row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:11px 2px;border-bottom:1px solid var(--line)}
.medians__row::before{display:none}
.medians__label{font-size:.97rem;font-weight:500}
.medians__val{font-size:1.06rem;font-weight:700}
.medians__row.is-empty .medians__label{color:var(--ink-3);font-weight:400}
.medians__row.is-empty .medians__val{color:var(--ink-3);font-size:.94rem;font-weight:400;font-style:italic}
.medians__row--nat{border-bottom:0;margin-top:4px;padding-top:14px;border-top:2px solid var(--line-2)}
.medians__row--nat .medians__label,.medians__row--nat .medians__val{color:var(--ink-2)}
.medians__row--nat .medians__val{font-weight:600}
.medians__note{font-size:.91rem;color:#4A3808;background:var(--gold-t);border-inline-start:4px solid var(--gold);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:12px 15px;margin-top:15px;font-weight:300;line-height:1.55}
.medians__src{font-size:.85rem;color:var(--ink-3);font-weight:300;margin-top:13px;line-height:1.55}
.medians__src a{color:var(--blue);font-weight:500}
.medians__src a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- arnona estimator ---------- */
.ar{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:30px 0;background:#fff}
.ar__head{padding:20px 22px 18px;background:var(--ink);color:#fff}
.ar__head h2{font-size:1.3rem;color:#fff;margin:0 0 5px}
.ar__head p{font-size:.94rem;color:#A8BCE4;font-weight:300;margin:0}
.ar__field{margin-bottom:18px}
.ar__field>label,.ar__label{display:block;font-size:.91rem;font-weight:600;margin-bottom:6px}
.ar__field input[type=number],.ar__field select{width:100%;font:inherit;font-size:.98rem;padding:11px 13px;border:1.5px solid var(--line-2);border-radius:10px;background:#fff;color:var(--ink)}
.ar__field input[type=number]:focus,.ar__field select:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--blue-t)}
.ar__field small{display:block;font-size:.85rem;color:var(--ink-3);font-weight:300;margin-top:6px;line-height:1.5}
.ar__radio{display:flex;align-items:flex-start;gap:9px;font-size:.95rem;font-weight:400;padding:8px 0;cursor:pointer}
.ar__radio input{margin-top:3px;flex-shrink:0}

.ar__legend{list-style:none;margin:9px 0 0;padding:0;font-size:.85rem;color:var(--ink-2);font-weight:300;line-height:1.5}
.ar__legend li{padding:5px 0;border-bottom:1px solid var(--line)}
.ar__legend li:last-child{border-bottom:0}
.ar__legend li::before{display:none}
.ar__legend b{font-weight:600;color:var(--ink)}

.ar__block,.ar__details{border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 15px;margin-bottom:16px;background:var(--haze)}
.ar__block summary,.ar__details summary{font-weight:600;font-size:.95rem;cursor:pointer}
.ar__details{margin-top:10px;background:#fff}
.ar__details ul{margin:9px 0 0;padding-inline-start:18px;font-size:.88rem;color:var(--ink-2);font-weight:300}
.ar__details li{margin-bottom:3px}
.ar__details li::before{display:none}
.ar__details p{font-size:.86rem;color:var(--ink-3);font-weight:300;margin-top:9px}
.ar__hint{font-size:.86rem;color:var(--ink-2);font-weight:300;margin:10px 0 0;line-height:1.55}
.ar__row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
.ar__row label{font-size:.88rem;font-weight:500}
.ar__row input{width:100%;font:inherit;font-size:.94rem;padding:9px 11px;border:1.5px solid var(--line-2);border-radius:9px;margin-top:5px;background:#fff}

.ar__checks{list-style:none;margin:12px 0 0;padding:0;max-height:290px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
.ar__checks li{border-bottom:1px solid var(--line)}
.ar__checks li:last-child{border-bottom:0}
.ar__checks li::before{display:none}
.ar__checks label{display:flex;align-items:flex-start;gap:10px;padding:10px 13px;cursor:pointer;transition:background .13s}
.ar__checks label:hover{background:var(--haze)}
.ar__checks input{margin-top:4px;flex-shrink:0}
.ar__checks span{font-size:.92rem;line-height:1.45}
.ar__checks em{display:block;font-style:normal;font-size:.86rem;color:var(--ink-3);margin-top:2px}

.ar__table{width:100%;border-collapse:collapse;font-size:.92rem;margin-bottom:16px;background:#fff;border-radius:var(--r-sm);overflow:hidden}
.ar__table thead th{background:var(--ink);color:#fff;font-size:.85rem;font-weight:600;padding:9px 11px;text-align:start}
.ar__table tbody th{font-weight:600;text-align:start;padding:10px 11px;border-bottom:1px solid var(--line)}
.ar__table td{padding:10px 11px;border-bottom:1px solid var(--line);text-align:start}
.ar__sum{font-weight:700}
.ar__noterow td{font-size:.86rem;color:var(--ink-3);font-weight:300;padding-top:0;background:var(--haze)}
.ar__empty{font-size:.95rem;color:var(--ink-3);font-weight:300;padding:26px 0;text-align:center}

.ar__totals{list-style:none;margin:0;padding:0}
.ar__totals li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:10px 2px;border-bottom:1px solid var(--line-2);font-size:.95rem}
.ar__totals li::before{display:none}
.ar__totals small{display:block;font-size:.86rem;color:var(--ink-3);font-weight:300;margin-top:2px}
.ar__cut{color:var(--aqua)}
.ar__cut b{color:var(--aqua)}
.ar__grand{border-bottom:0;margin-top:6px;padding-top:14px;border-top:2px solid var(--ink);font-size:1.04rem}
.ar__grand b{font-size:1.5rem;font-weight:700}
.ar__per{border-bottom:0;padding:5px 2px;font-size:.90rem;color:var(--ink-2)}
.ar__per b{font-weight:600}

.ar__docs{background:var(--blue-t);border-radius:var(--r-sm);padding:13px 15px;margin-top:15px;font-size:.90rem;line-height:1.55}
.ar__docs b{display:block;margin-bottom:4px;color:var(--blue-d)}
.ar__docs p{margin:0;font-weight:300;color:#1E3A6E}
.ar__one{background:var(--gold-t);border-inline-start:4px solid var(--gold);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:12px 14px;margin-top:13px;font-size:.88rem;color:#4A3808;font-weight:300;line-height:1.55}
.ar__pending{background:var(--coral-t);border-inline-start:4px solid var(--coral);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:12px 14px;margin-top:13px;font-size:.88rem;color:#7A2A0C;font-weight:300;line-height:1.55}
.ar__pending b{font-weight:700}
.ar__src{font-size:.87rem;color:var(--ink-3);font-weight:300;margin-top:14px;line-height:1.5}
.ar__legal{font-size:.83rem;color:var(--ink-2);font-weight:300;line-height:1.6;margin-top:18px;padding-top:14px;border-top:1px solid var(--line-2)}

@media (max-width:860px){
  .ar__row{grid-template-columns:1fr}
}

/* ---------- permit exemption checker ---------- */
.ex{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:30px 0;background:#fff}
.ex__head{padding:20px 22px 18px;background:var(--ink);color:#fff}
.ex__head h2{font-size:1.3rem;color:#fff;margin:0 0 5px}
.ex__head p{font-size:.94rem;color:#A8BCE4;font-weight:300;margin:0}
.ex__pick{padding:20px 22px;border-bottom:1px solid var(--line);background:var(--haze)}
.ex__pick label{display:block;font-size:.92rem;font-weight:600;margin-bottom:7px}
.ex__pick select{width:100%;max-width:420px;font:inherit;font-size:.98rem;padding:12px 14px;border:1.5px solid var(--line-2);border-radius:10px;background:#fff;color:var(--ink)}
.ex__pick select:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--blue-t)}
.ex__pick small{display:block;font-size:.85rem;color:var(--ink-3);font-weight:300;margin-top:8px;line-height:1.55;max-width:60ch}

.ex__empty{padding:40px 22px;text-align:center;color:var(--ink-3);font-weight:300}
.ex__intro{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.ex__intro b{font-size:1.06rem;font-weight:700}
.ex__intro span{font-size:.86rem;font-weight:600;color:var(--blue-d);background:var(--blue-t);padding:3px 10px;border-radius:20px}
.ex__intro p{width:100%;font-size:.92rem;color:var(--ink-2);font-weight:300;margin:4px 0 0}

.ex__h{font-size:1.02rem;margin:0;padding:16px 22px 3px;font-family:'Rubik',sans-serif;font-weight:700}
.ex__lead{font-size:.88rem;color:var(--ink-3);font-weight:300;padding:0 22px 11px;margin:0;line-height:1.55}
.ex__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ex__row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:13px 22px;border-bottom:1px solid var(--line);transition:background .14s}
.ex__row::before{display:none}
.ex__row.is-yes{background:#F3FBF8}
.ex__row.is-no{background:var(--coral-t)}
.ex__q{font-size:.94rem;line-height:1.5}
.ex__btns{display:flex;gap:5px;flex-shrink:0}
.ex__btns button{font-size:.90rem;font-weight:600;padding:7px 17px;border-radius:8px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink-2);transition:.14s}
.ex__btns button:hover{border-color:var(--ink-3)}
.ex__btns button[data-ans=yes].on{background:var(--aqua);border-color:var(--aqua);color:#fff}
.ex__btns button[data-ans=no].on{background:var(--coral);border-color:var(--coral);color:#fff}
.ex__why{grid-column:1 / -1;font-size:.88rem;color:#7A2A0C;font-weight:300;line-height:1.55;padding-top:4px}

.ex__verdict{margin:18px 22px 22px;border-radius:var(--r);padding:18px 20px}
.ex__verdict b{display:block;font-size:1.06rem;margin-bottom:7px}
.ex__verdict p{font-size:.93rem;font-weight:300;line-height:1.6;margin:0 0 9px}
.ex__verdict p:last-child{margin-bottom:0}
.ex__verdict.is-partial{background:var(--haze);border:1px solid var(--line-2);color:var(--ink-2)}
.ex__verdict.is-partial b{color:var(--ink)}
.ex__verdict.is-permit{background:var(--coral-t);border:2px solid var(--coral);color:#7A2A0C}
.ex__verdict.is-permit b{color:var(--coral-d)}
.ex__verdict.is-ok{background:var(--aqua-t);border:2px solid var(--aqua);color:#00563C}
.ex__verdict.is-ok b{color:#00563C}
.ex__verdict ul{list-style:none;margin:10px 0;padding:0}
.ex__verdict ul li{background:rgba(255,255,255,.6);border-radius:var(--r-sm);padding:11px 14px;margin-bottom:8px}
.ex__verdict ul li::before{display:none}
.ex__verdict ul li b{font-size:.94rem;margin-bottom:3px}
.ex__verdict ul li span{display:block;font-size:.88rem;font-weight:300;line-height:1.55}
.ex__report{background:rgba(255,255,255,.75);border-radius:var(--r-sm);padding:13px 15px;margin-top:13px}
.ex__report b{font-size:.95rem;margin-bottom:3px}
.ex__report.is-none{opacity:.8}
.ex__next{background:rgba(255,255,255,.75);border-radius:var(--r-sm);padding:13px 15px;margin-top:11px}
.ex__next b{font-size:.95rem;margin-bottom:6px}
.ex__next ol{margin:0;padding-inline-start:20px;font-size:.91rem;font-weight:300;line-height:1.6}
.ex__next li{margin-bottom:6px}
.ex__next li::before{display:none}

.ex__legal{padding:16px 22px 20px;background:var(--haze);border-top:1px solid var(--line);font-size:.86rem;color:var(--ink-2);font-weight:300;line-height:1.6}
.ex__legal b{display:block;color:var(--ink);font-weight:700;margin-bottom:6px;font-size:.90rem}
.ex__legal p{margin:0 0 8px}
.ex__legal p:last-child{margin-bottom:0}

@media (max-width:620px){
  .ex__row{grid-template-columns:1fr}
  .ex__btns{justify-content:flex-start}
}

/* ---------- business licensing checker ---------- */
.bz{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:30px 0;background:#fff}
.bz__head{padding:20px 22px 18px;background:var(--ink);color:#fff}
.bz__head h2{font-size:1.3rem;color:#fff;margin:0 0 5px}
.bz__head p{font-size:.94rem;color:#A8BCE4;font-weight:300;margin:0}
.bz__pick{padding:20px 22px;border-bottom:1px solid var(--line);background:var(--haze)}
.bz__pick label{display:block;font-size:.92rem;font-weight:600;margin-bottom:7px}
.bz__pick select{width:100%;max-width:440px;font:inherit;font-size:.98rem;padding:12px 14px;border:1.5px solid var(--line-2);border-radius:10px;background:#fff;color:var(--ink)}
.bz__pick select:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--blue-t)}
.bz__pick small{display:block;font-size:.85rem;color:var(--ink-3);font-weight:300;margin-top:8px;line-height:1.55;max-width:62ch}
.bz__empty{padding:40px 22px;text-align:center;color:var(--ink-3);font-weight:300}

.bz__card{padding:18px 22px;border-bottom:1px solid var(--line)}
.bz__top{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.bz__top b{font-size:1.14rem;font-weight:700}
.bz__item{font-size:.85rem;font-weight:700;color:#fff;background:var(--violet);padding:4px 12px;border-radius:20px;font-variant-numeric:tabular-nums}
.bz__desc{font-size:.92rem;color:var(--ink-2);font-weight:300;margin:6px 0 0;line-height:1.55}

.bz__size{margin:16px 22px 0;background:var(--blue-t);border:1px solid #CFDFFD;border-radius:var(--r-sm);padding:14px 16px}
.bz__size b{font-size:.95rem;display:block;margin-bottom:3px;color:var(--blue-d)}
.bz__size p{font-size:.88rem;color:#1E3A6E;font-weight:300;margin:0 0 10px;line-height:1.5}
.bz__sizebtns{display:flex;gap:8px;flex-wrap:wrap}
.bz__sizebtns label{flex:1;min-width:150px;font-size:.90rem;font-weight:500;background:#fff;border:1.5px solid var(--line-2);border-radius:9px;padding:9px 13px;cursor:pointer;transition:.14s;display:flex;align-items:center;gap:8px}
.bz__sizebtns label.on{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px var(--blue-t);font-weight:600}

.bz__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 22px 0}
.bz__fact{border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;background:var(--haze)}
.bz__k{display:block;font-size:.84rem;font-weight:700;letter-spacing:.08em;color:var(--ink-3);margin-bottom:4px}
.bz__fact b{display:block;font-size:1.14rem;font-weight:700;margin-bottom:5px}
.bz__fact p{font-size:.88rem;color:var(--ink-2);font-weight:300;margin:0;line-height:1.55}
.bz__fact--fast{background:var(--aqua-t);border-color:#A8E8D2}
.bz__fact--fast b{color:#00744F}
.bz__fact--mid{background:var(--gold-t);border-color:#F2DFB0}
.bz__fact--mid b{color:#8A5600}
.bz__fact--slow{background:var(--coral-t);border-color:#FCD5C8}
.bz__fact--slow b{color:var(--coral-d)}

.bz__decl{margin:12px 22px 0;background:var(--haze);border-inline-start:4px solid var(--violet);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:12px 15px}
.bz__decl b{display:block;font-size:.92rem;margin-bottom:3px;color:var(--violet)}
.bz__decl p{font-size:.90rem;color:var(--ink-2);font-weight:300;margin:0;line-height:1.55}

.bz__h{font-size:1.02rem;margin:20px 0 0;padding:0 22px 9px;font-family:'Rubik',sans-serif;font-weight:700}
.bz__bodies{list-style:none;margin:0;padding:0 22px;display:grid;grid-template-columns:1fr 1fr;gap:9px}
.bz__bodies li{background:var(--haze);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 14px}
.bz__bodies li::before{display:none}
.bz__bodies b{display:block;font-size:.94rem;font-weight:600;margin-bottom:2px}
.bz__bodies span{font-size:.85rem;color:var(--ink-3);font-weight:300;line-height:1.45;display:block}
.bz__bodies-note{font-size:.86rem;color:var(--ink-3);font-weight:300;padding:11px 22px 0;margin:0;line-height:1.6}

.bz__note{margin:16px 22px 0;background:var(--gold-t);border-inline-start:4px solid var(--gold);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:13px 15px}
.bz__note b{display:block;font-size:.94rem;margin-bottom:3px;color:#8A5600}
.bz__note p{font-size:.90rem;color:#4A3808;font-weight:300;margin:0;line-height:1.6}

.bz__warn{margin:16px 22px 22px;background:var(--coral-t);border:2px solid var(--coral);border-radius:var(--r-sm);padding:15px 17px}
.bz__warn b{display:block;font-size:1rem;margin-bottom:6px;color:var(--coral-d)}
.bz__warn p{font-size:.91rem;color:#7A2A0C;font-weight:300;margin:0 0 8px;line-height:1.6}
.bz__warn p:last-child{margin-bottom:0}

.bz__legal{padding:16px 22px 20px;background:var(--haze);border-top:1px solid var(--line);font-size:.86rem;color:var(--ink-2);font-weight:300;line-height:1.6}
.bz__legal b{display:block;color:var(--ink);font-weight:700;margin-bottom:6px;font-size:.90rem}
.bz__legal p{margin:0 0 8px}
.bz__legal p:last-child{margin-bottom:0}

@media (max-width:640px){
  .bz__grid,.bz__bodies{grid-template-columns:1fr}
}

/* ---------- tool legal notices ---------- */
.tool-notice{
  display:flex;align-items:flex-start;gap:11px;
  margin:0 22px 18px;padding:13px 15px;
  background:var(--gold-t);border:1.5px solid var(--gold);
  border-radius:var(--r-sm);
}
.tool-notice__icon{color:var(--gold);flex-shrink:0;line-height:0;margin-top:1px}
.tool-notice__text{font-size:.90rem;color:#4A3808;font-weight:300;line-height:1.55}
.tool-notice__text b{font-weight:700;color:#7A5400}

.tool-legal{
  margin:22px 0 0;padding:20px 22px 22px;
  background:var(--haze);border-top:2px solid var(--line-2);
}
.tool-legal h3{
  font-family:'Rubik',sans-serif;font-size:.95rem;font-weight:700;
  letter-spacing:.04em;color:var(--ink);margin:0 0 12px;
}
.tool-legal__list{margin:0;padding:0;counter-reset:tl;list-style:none}
.tool-legal__list li{
  position:relative;padding-inline-start:26px;margin-bottom:10px;
  font-size:.86rem;color:var(--ink-2);font-weight:300;line-height:1.65;
}
.tool-legal__list li::before{
  counter-increment:tl;content:counter(tl);
  position:absolute;inset-inline-start:0;top:1px;
  width:18px;height:18px;border-radius:50%;
  background:var(--ink-3);color:#fff;
  font-size:.73rem;font-weight:700;
  display:grid;place-items:center;
  font-variant-numeric:tabular-nums;
}
.tool-legal__list li b{font-weight:700;color:var(--ink)}
.tool-legal__foot{
  font-size:.85rem;color:var(--ink-3);font-weight:300;line-height:1.6;
  margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line-2);
}
.tool-legal__foot a{color:var(--blue);font-weight:500}
.tool-legal__foot a:hover{text-decoration:underline;text-underline-offset:3px}

/* the arnona tool nests its result column, so the notice needs edge-to-edge there */


@media (max-width:640px){
  .tool-notice{margin-inline:16px;flex-direction:column;gap:7px}
  .tool-legal{padding:18px 16px 20px}
}

/* ---------- who is behind this ---------- */
.who{display:flex;align-items:center;gap:15px;background:var(--haze);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin:18px 0 26px}
.who__photo{flex-shrink:0;width:66px;height:66px;border-radius:50%;overflow:hidden;display:block}
.who__photo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.who__photo--none{background:var(--ink);color:#fff;display:grid;place-items:center;font-family:'Secular One',sans-serif;font-size:1.7rem;line-height:1}
.who__text{display:block;line-height:1.45}
.who__name{display:block;font-size:1.06rem;font-weight:700}
.who__role{display:block;font-size:.91rem;color:var(--ink-2);font-weight:400;margin-top:1px}
.who__note{display:block;font-size:.86rem;color:var(--ink-3);font-weight:300;margin-top:6px;line-height:1.5}
.who__note a{color:var(--blue);font-weight:500}

/* ---------- contact form ---------- */
.contact{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--haze);margin:20px 0}
.contact__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact__field{margin-bottom:16px}
.contact__field label{display:block;font-size:.91rem;font-weight:600;margin-bottom:6px}
.contact__field input,.contact__field select,.contact__field textarea{width:100%;font:inherit;font-size:.98rem;padding:11px 13px;border:1.5px solid var(--line-2);border-radius:10px;background:#fff;color:var(--ink)}
.contact__field textarea{resize:vertical;min-height:120px;line-height:1.6}
.contact__field input:focus,.contact__field select:focus,.contact__field textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--blue-t)}
.contact__hint{font-size:.87rem;color:var(--ink-2);font-weight:300;line-height:1.55;margin:8px 0 0;padding:9px 12px;background:var(--blue-t);border-radius:var(--r-sm)}
.contact__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact__msg{font-size:.94rem;font-weight:500;margin:12px 0 0;min-height:1.2em}
.contact__msg.is-ok{color:var(--aqua-d,#00744F)}
.contact__msg.is-err{color:var(--coral-d)}
.contact__fine{font-size:.85rem;color:var(--ink-3);font-weight:300;line-height:1.6;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line-2)}
.contact__fine a{color:var(--blue);font-weight:500}

@media (max-width:600px){
  .contact__row{grid-template-columns:1fr;gap:0}
  .who{flex-direction:column;text-align:center;gap:11px}
}

/* ---------- index grids on the landing pages ---------- */
.hoods{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px;margin:24px 0}
.hoodc{display:flex;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .16s,box-shadow .16s,border-color .16s}
.hoodc:hover{transform:translateY(-2px);border-color:var(--line-2);box-shadow:0 10px 24px -14px rgba(11,23,48,.3)}
.hoodc__band{width:6px;flex-shrink:0;background:var(--blue)}
.hoodc[data-accent=coral] .hoodc__band{background:var(--coral)}
.hoodc[data-accent=sea] .hoodc__band{background:var(--sea)}
.hoodc[data-accent=aqua] .hoodc__band{background:var(--aqua)}
.hoodc[data-accent=pink] .hoodc__band{background:var(--pink)}
.hoodc[data-accent=violet] .hoodc__band{background:var(--violet)}
.hoodc[data-accent=gold] .hoodc__band{background:var(--gold)}
.hoodc__body{display:block;padding:15px 17px}
.hoodc__name{display:block;font-family:'Secular One',sans-serif;font-size:1.1rem;color:var(--ink);line-height:1.2}
.hoodc__kind{display:block;font-size:.86rem;font-weight:600;color:var(--ink-3);margin-top:4px}
.hoodc__lede{display:block;font-size:.90rem;color:var(--ink-2);font-weight:300;line-height:1.55;margin-top:8px}
.hoods__pending{font-size:.90rem;color:var(--ink-3);font-weight:300;background:var(--haze);border:1px dashed var(--line-2);border-radius:var(--r-sm);padding:13px 16px;margin:4px 0 26px;line-height:1.6}

.trades{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:11px;margin:20px 0 28px}
.tradec{display:flex;flex-direction:column;align-items:flex-start;gap:7px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 17px;transition:transform .16s,box-shadow .16s,border-color .16s}
.tradec:hover{transform:translateY(-2px);border-color:var(--line-2);box-shadow:0 10px 24px -14px rgba(11,23,48,.3)}
.tradec__i{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--blue-t);color:var(--blue)}
.tradec[data-accent=gold] .tradec__i{background:var(--gold-t);color:var(--gold)}
.tradec[data-accent=sea] .tradec__i{background:var(--sea-t);color:var(--sea)}
.tradec[data-accent=coral] .tradec__i{background:var(--coral-t);color:var(--coral)}
.tradec[data-accent=violet] .tradec__i{background:var(--violet-t);color:var(--violet)}
.tradec[data-accent=pink] .tradec__i{background:var(--pink-t);color:var(--pink)}
.tradec[data-accent=aqua] .tradec__i{background:var(--aqua-t);color:var(--aqua)}
.tradec__i svg{width:22px;height:22px}
.tradec b{font-size:.98rem;color:var(--ink)}
.tradec__n{font-size:.86rem;color:var(--ink-3);font-weight:500}

@media (max-width:520px){
  .hoods,.trades{grid-template-columns:1fr}
}

/* Visible to assistive technology only. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}

/* ---------- lead capture on the tools ----------
   Gold, because the palette reserves gold for a deadline or a commercial note,
   and this is the one block on the page that is not editorial. */
.cap{border:2px solid var(--gold);background:var(--gold-t);border-radius:var(--r);padding:18px 20px;margin-top:20px}
.cap__tag{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.1em;color:#fff;background:var(--gold);padding:3px 10px;border-radius:20px;margin-bottom:9px}
.cap__title{display:block;font-size:1.08rem;font-weight:700;color:#4A3808;margin-bottom:5px}
.cap__body{font-size:.92rem;color:#4A3808;font-weight:300;line-height:1.6;margin:0 0 14px}
.cap__row{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:12px}
.cap__f{display:block}
.cap__f span{display:block;font-size:.86rem;font-weight:600;color:#4A3808;margin-bottom:5px}
.cap__f input{width:100%;font:inherit;font-size:.97rem;padding:10px 13px;border:1.5px solid #E2CB92;border-radius:10px;background:#fff;color:var(--ink)}
.cap__f input:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(224,140,0,.18)}
.cap__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cap .btn{width:100%}
.cap__fine{font-size:.87rem;color:#6A5320;font-weight:300;line-height:1.6;margin:12px 0 0}
.cap__fine a{color:var(--blue);font-weight:500}
.cap__msg{font-size:.92rem;font-weight:600;margin:10px 0 0;min-height:1.2em}
.cap__msg.is-ok{color:#00744F}
.cap__msg.is-err{color:var(--coral-d)}
@media (max-width:560px){ .cap__row{grid-template-columns:1fr} }

/* ---------- arnona: one column, three steps ----------
   The tool sits in a column that already shares the page with a sidebar, so a
   split layout left roughly 300px per side. Steps use the width it actually
   has instead of fighting for width it does not. */
.ar__steps{display:flex;list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line);background:var(--haze)}
.ar__steps li{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 8px;font-size:.91rem;font-weight:600;color:var(--ink-3);cursor:pointer;border-bottom:3px solid transparent;transition:.15s;text-align:center}
.ar__steps li::before{display:none}
.ar__steps li span{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--line-2);color:#fff;font-size:.81rem;font-weight:700;flex-shrink:0}
.ar__steps li.is-done{color:var(--ink-2)}
.ar__steps li.is-done span{background:var(--aqua)}
.ar__steps li.is-on{color:var(--ink);border-bottom-color:var(--coral);background:#fff}
.ar__steps li.is-on span{background:var(--coral)}

.ar__running{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 22px;background:var(--ink);color:#fff}
.ar__running span{font-size:.90rem;color:#A8BCE4;font-weight:300}
.ar__running b{font-size:1.4rem;font-weight:700}

.ar__panel{padding:22px}
.ar__lead{font-size:.94rem;color:var(--ink-2);font-weight:300;line-height:1.6;margin:0 0 18px}
.ar__pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ar__nav{display:flex;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.ar__nav .btn{flex:1}
.ar__nav .btn--ghost{flex:0 0 auto;min-width:110px}

/* The discount list is the longest thing in the tool, so it gets the room. */
.ar__checks{max-height:none}

@media (max-width:620px){
  .ar__pair{grid-template-columns:1fr}
  .ar__steps li{flex-direction:column;gap:4px;font-size:.83rem;padding:11px 4px}
  .ar__panel{padding:18px 16px}
  .ar__nav{flex-direction:column-reverse}
  .ar__nav .btn--ghost{width:100%}
}

/* ---------- reading comfort ----------
   Hebrew letterforms sit on one band with no ascenders or descenders, so small
   text needs more leading than the same size would need in Latin. */
.ar__hint,.ar__lead,.ar__field small,.ar__legend li,
.ex__lead,.bz__pick small,.bz__desc,.bz__bodies-note,
.tool-notice__text,.tool-legal__list li,.tool-legal__foot,
.lead__fine,.cap__fine,.cap__body,.contact__fine,.contact__hint,
.medians__src,.medians__note,.map__cap,.hoods__pending{line-height:1.68}

.ar__checks span,.ar__radio,.ex__q{line-height:1.55}

/* ---------- income discount checker ---------- */
.inc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:30px 0;background:#fff}
.inc__head{padding:20px 22px 18px;background:var(--ink);color:#fff}
.inc__head h2{font-size:1.3rem;color:#fff;margin:0 0 5px}
.inc__head p{font-size:.94rem;color:#A8BCE4;font-weight:300;margin:0}
.inc__body{padding:22px}
.inc__pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.inc__hint{font-size:.87rem;color:var(--ink-2);font-weight:300;line-height:1.68;margin:0 0 14px}
.inc__empty{padding:26px 0;text-align:center;color:var(--ink-3);font-weight:300}

.inc__ded-box{border:1px solid var(--line);border-radius:var(--r-sm);padding:0;margin-bottom:18px;background:var(--haze)}
.inc__ded-box summary{padding:13px 16px;font-size:.94rem;font-weight:600;cursor:pointer}
.inc__ded-box[open]{padding-bottom:16px}
.inc__ded-box > *:not(summary){padding-inline:16px}
.inc__excl{list-style:none;margin:0 0 16px;padding:0 16px}
.inc__excl li{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 13px;margin-bottom:7px}
.inc__excl li::before{display:none}
.inc__excl b{display:block;font-size:.9rem;font-weight:600}
.inc__excl span{display:block;font-size:.85rem;color:var(--ink-3);font-weight:300;line-height:1.6;margin-top:2px}

.inc__ded{background:var(--haze);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;margin-bottom:16px}
.inc__ded b{display:block;font-size:.94rem;margin-bottom:8px}
.inc__ded ul{list-style:none;margin:0;padding:0}
.inc__ded li{display:flex;justify-content:space-between;gap:12px;font-size:.9rem;padding:5px 0;font-weight:300}
.inc__ded li::before{display:none}
.inc__ded li b{font-weight:600;font-variant-numeric:tabular-nums;margin:0}
.inc__ded-net{border-top:1px solid var(--line-2);margin-top:6px;padding-top:9px!important;font-weight:600!important}

.inc__res{border-radius:var(--r-sm);padding:18px 20px;margin-bottom:16px}
.inc__res b{display:block;font-size:1.06rem;margin-bottom:7px}
.inc__res p{font-size:.9rem;font-weight:300;line-height:1.68;margin:0 0 8px}
.inc__res p:last-child{margin-bottom:0}
.inc__res.is-yes{background:var(--aqua-t);border:2px solid var(--aqua);color:#00563C;position:relative}
.inc__res.is-yes b{color:#00563C}
.inc__res.is-no{background:var(--haze);border:2px solid var(--line-2);color:var(--ink-2)}
.inc__res.is-no b{color:var(--ink)}
.inc__rate{display:block;font-family:'Secular One',sans-serif;font-size:2.6rem;line-height:1;color:var(--aqua);margin-bottom:8px}

.inc__totals{list-style:none;margin:0 0 16px;padding:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.inc__totals li{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:.94rem}
.inc__totals li::before{display:none}
.inc__totals li:last-child{border-bottom:0}
.inc__totals b{font-weight:700;font-variant-numeric:tabular-nums}
.inc__cut{background:var(--aqua-t);color:#00563C}
.inc__grand{background:var(--ink);color:#fff;font-size:1.06rem!important}

.inc__next{background:var(--gold-t);border-inline-start:4px solid var(--gold);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:14px 16px}
.inc__next b{display:block;font-size:.96rem;margin-bottom:7px;color:#8A5600}
.inc__next ol{margin:0;padding-inline-start:20px;font-size:.89rem;font-weight:300;line-height:1.68;color:#4A3808}
.inc__next li{margin-bottom:7px}
.inc__next li::before{display:none}

.callout{border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;margin:22px 0;background:var(--haze)}
.callout b{display:block;font-size:1.02rem;margin-bottom:6px}
.callout p{font-size:.92rem;font-weight:300;line-height:1.68;margin:0 0 8px}
.callout p:last-child{margin-bottom:0}
.callout--gold{background:var(--gold-t);border-color:#F2DFB0}
.callout--gold b{color:#8A5600}
.callout--gold a{color:#8A5600;font-weight:600}
.callout--aqua{background:var(--aqua-t);border-color:#A8E8D2}
.callout--aqua b{color:#00563C}
.callout--aqua a{color:#00744F;font-weight:600}

@media (max-width:620px){ .inc__pair{grid-template-columns:1fr} }

@media (max-width:900px){
  /* Dropping the blur is what actually lets the panel out of the header. */
  .head{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    background:#fff;
  }
}

/* ---------- desktop: the nav sits outside the header in the markup ----------
   It is placed back into the bar visually, so the panel can stay a child of
   body and never inherit a containing block from a filtered ancestor. */


.hero__ask{font-size:1.06rem;font-weight:600;color:#fff;margin:26px 0 10px;opacity:.95}

/* ---------- contrast corrections ----------
   Measured against WCAG AA. White on the accent colours came out between 2.5
   and 3.1, so the buttons that carry a white label get a darker surface while
   the bright hue stays for borders, bands and fills that carry no text. */
.btn--cta{background:linear-gradient(135deg,#C23108,#B01049)}
.btn--cta:hover{background:linear-gradient(135deg,#A82A06,#970E3F)}
.cap__tag{background:#8A5600}
.inc__rate{color:#00744F}
.hoodc__kind,.tradec__n{color:#5E6F8D}

/* ---------- area audit ---------- */
.au{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:30px 0;background:#fff}
.au__head{padding:20px 22px 18px;background:var(--ink);color:#fff}
.au__head h2{font-size:1.3rem;color:#fff;margin:0 0 5px}
.au__head p{font-size:.94rem;color:#A8BCE4;font-weight:300;margin:0}
.au__body{padding:22px}
.au__step{font-family:'Rubik',sans-serif;font-size:.94rem;font-weight:700;color:var(--ink);margin:26px 0 4px;padding-bottom:8px;border-bottom:2px solid var(--line)}
.au__step:first-child{margin-top:0}
.au__hint{font-size:.87rem;color:var(--ink-2);font-weight:300;line-height:1.68;margin:0 0 16px}
.au__pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.au__empty{padding:26px 0;text-align:center;color:var(--ink-3);font-weight:300}

.au__sum{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.au__cell{background:var(--haze);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;text-align:center}
.au__cell span{display:block;font-size:.84rem;color:var(--ink-3);font-weight:600;margin-bottom:4px}
.au__cell b{display:block;font-size:1.4rem;font-weight:700;font-variant-numeric:tabular-nums}

.au__res{border-radius:var(--r-sm);padding:18px 20px;margin-bottom:16px}
.au__res b{display:block;font-size:1.06rem;margin-bottom:7px}
.au__res p{font-size:.9rem;font-weight:300;line-height:1.68;margin:0}
.au__res.is-gap{background:var(--coral-t);border:2px solid var(--coral)}
.au__res.is-gap b{color:var(--coral-d)}
.au__res.is-gap p{color:#7A2A0C}
.au__res.is-ok{background:var(--aqua-t);border:2px solid var(--aqua);color:#00563C}
.au__res.is-ok b{color:#00563C}
.au__res.is-under{background:var(--haze);border:2px solid var(--line-2);color:var(--ink-2)}
.au__big{display:block;font-family:'Secular One',sans-serif;font-size:2.6rem;line-height:1;color:var(--coral-d);margin-bottom:8px}

.au__totals{list-style:none;margin:0 0 16px;padding:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.au__totals li{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line);font-size:.94rem}
.au__totals li::before{display:none}
.au__totals li:last-child{border-bottom:0}
.au__totals b{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.au__totals small{display:block;font-size:.82rem;color:var(--ink-3);font-weight:300;line-height:1.55;margin-top:2px}
.au__back{background:var(--gold-t)}
.au__back b{color:#8A5600;font-size:1.14rem}

.au__next{background:var(--haze);border-inline-start:4px solid var(--blue);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:15px 17px}
.au__next b{display:block;font-size:.96rem;margin-bottom:8px}
.au__next ol{margin:0;padding-inline-start:20px;font-size:.89rem;font-weight:300;line-height:1.68;color:var(--ink-2)}
.au__next li{margin-bottom:8px}
.au__next li::before{display:none}

@media (max-width:620px){ .au__pair,.au__sum{grid-template-columns:1fr} }

/* ---------- archive page head ----------
   The service archive had no template of its own and fell through to index.php,
   so it arrived with no heading, no intro and no icons. */
.phead{background:var(--haze);border-bottom:1px solid var(--line);padding:38px 0 32px;margin-bottom:32px}
.phead h1{font-family:'Secular One',sans-serif;font-size:2rem;line-height:1.2;margin:.3em 0 .45em;color:var(--ink)}
.phead .eyebrow{color:#1E4FD6;font-size:.84rem;font-weight:700;letter-spacing:.1em;display:block}
.phead__lede{font-size:1.06rem;color:var(--ink-2);font-weight:300;line-height:1.7;max-width:64ch;margin:0}
.phead__note{font-size:.88rem;color:var(--ink-3);font-weight:300;line-height:1.68;margin:12px 0 0;max-width:64ch}

.board--archive{margin-bottom:36px}
.board--archive .tile h2{font-family:'Rubik',sans-serif;font-size:1.06rem;font-weight:700;color:var(--ink);margin:0}
.tile__foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.tile__tool{display:inline-block;font-size:.78rem;font-weight:700;color:#00563C;background:var(--aqua-t);border:1px solid #A8E8D2;border-radius:20px;padding:4px 11px}

.arch__more{border-top:1px solid var(--line);padding-top:24px;margin-bottom:40px}
.arch__more h2{font-size:1.14rem;margin:0 0 10px}
.arch__more p{font-size:.94rem;color:var(--ink-2);font-weight:300;line-height:1.7;margin:0 0 8px}
.arch__more a{color:var(--blue);font-weight:600}

@media (max-width:700px){
  .phead{padding:28px 0 24px;margin-bottom:24px}
  .phead h1{font-size:1.6rem}
  .phead__lede{font-size:.98rem}
}

/* ---------- submenu ----------
   On a wide screen it drops down on hover and on focus, so keyboard users get
   it too. On a phone there is no hover, so it is simply always open inside the
   panel, which is fewer taps than a disclosure toggle. */
.nav__list li{position:relative}
.nav__list .sub-menu{list-style:none;margin:0;padding:0}

@media (min-width:901px){
  .nav__list .sub-menu{
    position:absolute;top:100%;inset-inline-start:0;
    min-width:230px;background:#fff;
    border:1px solid var(--line);border-radius:var(--r);
    box-shadow:0 18px 40px -22px rgba(11,23,48,.4);
    padding:7px;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .16s,transform .16s,visibility .16s;
    z-index:70;pointer-events:auto;
  }
  .nav__list li:hover > .sub-menu,
  .nav__list li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}

  .nav__list .sub-menu a{
    display:block;padding:10px 13px;border-radius:9px;
    font-size:.94rem;font-weight:500;color:var(--ink-2);white-space:nowrap;
  }
  .nav__list .sub-menu a:hover,
  .nav__list .sub-menu a:focus-visible{background:var(--haze);color:var(--ink)}

  /* A parent with children says so, quietly. */
  .nav__list .menu-item-has-children > a::after{
    content:'';display:inline-block;width:5px;height:5px;margin-inline-start:7px;
    border-inline-end:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
    transform:rotate(45deg) translateY(-2px);opacity:.55;
  }
}

/* The disclosure button only exists below the breakpoint; above it the parent
   opens on hover and the arrow in the link is enough. */
.subbtn{display:none}

@media (max-width:900px){
  .nav__list .menu-item-has-children{
    display:grid;grid-template-columns:1fr auto;align-items:center;
  }
  .nav__list .menu-item-has-children > a{font-weight:700}

  .subbtn{
    display:grid;place-items:center;
    width:44px;height:44px;
    background:transparent;border:0;padding:0;cursor:pointer;
    color:var(--ink-2);
  }
  .subbtn__chev{
    width:9px;height:9px;
    border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-1px,-1px);
    transition:transform .2s ease;
  }
  .subbtn[aria-expanded=true] .subbtn__chev{
    transform:rotate(225deg) translate(-1px,-1px);
  }

  /* Closed by default. Nine items pushed the other sections off the screen. */
  .nav__list .sub-menu{
    grid-column:1 / -1;
    display:none;
    margin:0 0 8px;padding-inline-start:12px;
    border-inline-start:2px solid var(--line);
  }
  .nav__list .is-open > .sub-menu{display:block}

  .nav__list .sub-menu li + li{border-top:0}
  .nav__list .sub-menu a{
    padding:11px 12px;font-size:.96rem;font-weight:400;color:var(--ink-2);
  }
}

/* ---------- not found ----------
   A visitor who lands here had an intention. The guess block is the only part
   that can act on it, so it gets the visual weight. */
.nf{padding-bottom:44px}
.nf__guess{
  background:var(--aqua-t);border:2px solid var(--aqua);
  border-radius:var(--r);padding:16px;margin-bottom:30px;
}
.nf__guess-label{
  display:block;font-size:.84rem;font-weight:700;letter-spacing:.06em;
  color:#00563C;margin-bottom:10px;
}
.nf__guess .tile{border-color:#A8E8D2}
.nf__guess .tile h2{font-family:'Rubik',sans-serif;font-size:1.06rem;font-weight:700;margin:0}

.nf__search{margin-bottom:34px}
.nf__search h2{font-size:1.14rem;margin:0 0 10px}
.nf__search .searchbar{
  max-width:560px;background:#fff;
  border:1.5px solid var(--line-2);box-shadow:none;
}
.nf__search .searchbar:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-t)}

.nf__h{font-size:1.14rem;margin:0 0 14px}


@media (max-width:700px){
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .board{grid-template-columns:repeat(2,1fr)}
  .hoods{grid-template-columns:repeat(2,1fr)}
  .trades{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .cols,.split{grid-template-columns:1fr;gap:32px}
  .lead{position:static}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:660px){
  body{font-size:16px}
  .board{grid-template-columns:1fr}
  .home .board{margin-top:-28px}
  .hoods,.events,.cards{grid-template-columns:1fr}
  .trades{grid-template-columns:repeat(2,1fr)}
  .sec{padding:46px 0}
  /* The icon is removed from the tree, not merely hidden, so it cannot
     leave an empty row behind. The bar stays on one line: a field and a
     button fit comfortably, and stacking them was what created the gap. */
  .facts__row{flex-direction:column}
  .facts dt{width:100%}
  .head__cta{display:none}
  .head__row{min-height:64px}
  .brand__name{font-size:1.2rem}
  .brand__tld{font-size:.70rem;letter-spacing:.16em;margin-top:4px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
/* footer wordmark, dark surface */
.foot__brand{display:block;line-height:1;margin-bottom:14px}
.foot__brand .brand__name{color:#fff;font-size:1.3rem}
.foot__brand .brand__tld{color:#FF8A5C}
.brand__mark{flex-shrink:0;display:block}
.brand__text{display:block;line-height:1}
.foot__brand{display:flex;align-items:center;gap:11px}

/* ==========================================================================
   Search bar and suggestions

   Written once, at the end of the file, so nothing later overrides it and so
   no rule sits inside a media query it was never meant for. The previous
   version was assembled across three edits, and one of its blocks had landed
   inside a max-width query where it could never run on a desktop.

   The magnifier is a background image on the field rather than its own
   element. An element has to be hidden on small screens, and a hidden flex
   child kept reserving space, which was the empty band on the right.
   ========================================================================== */

.searchbar{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  background:#fff;
  border-radius:18px;
  padding:7px;
  margin-top:10px;
  box-shadow:0 26px 60px -22px rgba(0,0,0,.72);
}

/* Out of the layout entirely, not merely invisible. */
.searchbar > svg{display:none}

.searchbar input{
  flex:1 1 auto;
  min-width:0;
  border:0;
  background:transparent;
  font:inherit;
  font-size:1.03rem;
  padding:13px 16px;
  color:var(--ink);
}
.searchbar input::placeholder{color:var(--ink-3)}
.searchbar input:focus{outline:none}
.searchbar:focus-within{box-shadow:0 26px 60px -22px rgba(0,0,0,.72),0 0 0 3px rgba(37,99,245,.35)}

.searchbar .btn{flex:0 0 auto;padding:13px 22px}

.nf__search .searchbar{max-width:560px;border:1.5px solid var(--line-2);box-shadow:none}
.nf__search .searchbar:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-t)}

/* ---- suggestions ---- */
.sgst{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  left:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 22px 50px -18px rgba(11,23,48,.45);
  padding:6px;
  z-index:80;
  max-height:min(56vh,380px);
  overflow-y:auto;
  text-align:right;
}
.sgst__i{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:12px 13px;
  border-radius:10px;
  font-size:.98rem;
  color:var(--ink);
}
.sgst__i:hover,.sgst__i.is-on{background:var(--haze)}
.sgst__i.is-on{outline:2px solid var(--blue);outline-offset:-2px}
.sgst__t{font-weight:500}
.sgst__g{
  font-size:.78rem;
  font-weight:600;
  color:var(--ink-3);
  background:var(--haze);
  border:1px solid var(--line);
  border-radius:20px;
  padding:2px 9px;
  flex-shrink:0;
}
.sgst__i:hover .sgst__g,.sgst__i.is-on .sgst__g{background:#fff}

@media (max-width:660px){
  .searchbar{gap:6px;padding:6px}
  /* No icon at all here: the whole field belongs to the query. */
  .searchbar input{font-size:1rem;padding:12px 14px}
  .searchbar .btn{padding:13px 18px}
  .sgst{max-height:44vh}
}

/* The visually hidden label must not take a slot in the flex row. */
.searchbar > label{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.searchbar > svg{display:none!important}

/* Headings are ink unless they sit on a dark surface. Stating it here means
   no inherited or inlined value can leave one invisible. */
h1,h2,h3{color:var(--ink)}
.page-head h1{color:var(--ink)}
.hero h1,.hoodhero h1,.hero h2,.hoodhero h2{color:#fff}
.ar__head h2,.inc__head h2,.au__head h2,.ex__head h2,.bz__head h2{color:#fff}

/* Pale blue only where the surface is dark. */
.eyebrow{color:#1E4FD6}
.hero .eyebrow,.hoodhero .eyebrow{color:#BFD5FF}

/* ---------- header search ----------
   A button rather than a permanent field: the bar is already carrying a logo,
   a menu and a call to action, and a fourth element would crowd it on a phone. */
.srchbtn{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex-shrink:0;
  background:var(--haze);
  border:1.5px solid var(--line-2);
  border-radius:11px;
  color:var(--ink-2);
  cursor:pointer;
  padding:0;
  transition:border-color .15s,background .15s;
}
.srchbtn:hover{border-color:var(--ink-3);color:var(--ink)}
.srchbtn.is-open{background:var(--ink);border-color:var(--ink);color:#fff}
.srchbtn svg{width:19px;height:19px}

/* The button takes the auto margin, so the rest lines up after it. */
.head__cta{margin-inline-start:0}
.navbtn{margin-inline-start:0}

.headsearch{
  position:sticky;
  top:74px;
  z-index:59;
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:14px 0;
  box-shadow:0 14px 30px -20px rgba(11,23,48,.4);
}
.headsearch .searchbar{
  margin-top:0;
  border:1.5px solid var(--line-2);
  box-shadow:none;
  max-width:640px;
}
.headsearch .searchbar:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-t)}

@media (max-width:900px){
  .headsearch{top:64px}
}
@media (max-width:660px){
  .srchbtn{width:40px;height:40px}
  .headsearch{padding:11px 0}
}
/* ---------- municipal calendar ---------- */
.cal{margin:30px 0}
.cal__head{margin:34px 0 16px}
.cal__head:first-child{margin-top:0}
.cal__head h2{font-size:1.24rem;margin:0 0 5px}
.cal__head p{font-size:.92rem;color:var(--ink-2);font-weight:300;line-height:1.68;margin:0;max-width:64ch}

.cal__list,.cal__win{list-style:none;margin:0;padding:0}
.cal__i,.cal__win li{
  display:flex;
  gap:16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:16px 18px;
  margin-bottom:11px;
}
.cal__i::before,.cal__win li::before{display:none}

.cal__when,.cal__days{
  flex:0 0 78px;
  text-align:center;
  padding-inline-end:16px;
  border-inline-end:1px solid var(--line);
}
.cal__when b,.cal__days b{
  display:block;
  font-family:'Secular One',sans-serif;
  font-size:1.06rem;
  line-height:1.25;
  color:var(--ink);
}
.cal__days b{font-size:1.9rem}
.cal__when span,.cal__days span{display:block;font-size:.8rem;color:var(--ink-3);font-weight:500;margin-top:3px}

.cal__body b{display:block;font-size:1.04rem;margin-bottom:5px}
.cal__body p{font-size:.9rem;color:var(--ink-2);font-weight:300;line-height:1.68;margin:0 0 7px}
.cal__from{display:block;font-size:.84rem;font-weight:600;color:var(--blue);margin-bottom:6px}
.cal__note{font-size:.86rem!important;color:#8A5600!important;background:var(--gold-t);border-radius:8px;padding:8px 11px;margin-top:8px!important}
.cal__links{display:flex;flex-wrap:wrap;gap:14px;margin:0!important}
.cal__links a{font-size:.88rem;font-weight:600;color:var(--blue)}
.cal__links a:hover{text-decoration:underline;text-underline-offset:3px}

/* Colour carries the stakes: gold for a deadline, coral for the one that
   cancels a discount outright. */
.cal__i--critical{border-color:var(--coral);border-width:2px;background:var(--coral-t)}
.cal__i--critical .cal__when b{color:var(--coral-d)}
.cal__i--deadline{border-inline-start:4px solid var(--gold)}
.cal__i.is-soon{box-shadow:0 8px 22px -14px rgba(11,23,48,.35)}
.cal__i.is-soon .cal__when span{color:var(--coral-d);font-weight:700}

@media (max-width:620px){
  .cal__i,.cal__win li{flex-direction:column;gap:12px}
  .cal__when,.cal__days{
    flex:none;text-align:start;padding-inline-end:0;padding-bottom:11px;
    border-inline-end:0;border-bottom:1px solid var(--line);
    display:flex;align-items:baseline;gap:9px;
  }
  .cal__when span,.cal__days span{margin-top:0}
  .cal__days b{font-size:1.4rem}
}
.callout--coral{background:var(--coral-t);border-color:#FCD5C8}
.callout--coral b{color:var(--coral-d)}
.callout--coral a{color:var(--coral-d);font-weight:600}

/* ==========================================================================
   Header navigation

   Two elements, not one moved around by coordinates.

   .navdesk lives inside the header row and flows normally between the brand
   and the button. It needs no position, no offsets and no z-index, because it
   is simply a flex child sitting where it belongs.

   .nav is the sliding panel for narrow screens. It stays a sibling of body so
   that no ancestor carrying a filter or a transform can become its containing
   block, which is what trapped it inside the header before.

   The earlier attempts tried to make one element serve both, which meant
   absolute positioning against a parent that did not exist. That is what put
   the menu in the corner of the page.
   ========================================================================== */

/* ---- shared list styling ---- */
.nav__list{
  display:flex;
  gap:2px;
  align-items:center;
  list-style:none;
  margin:0;
  padding:0;
}
.nav__list li::before{display:none}
.nav__list a{
  display:block;
  padding:9px 13px;
  border-radius:9px;
  font-size:.97rem;
  font-weight:500;
  color:var(--ink-2);
  transition:.15s;
  white-space:nowrap;
}
.nav__list a:hover{background:var(--haze);color:var(--ink)}
.nav__list .is-on>a,
.nav__list a.is-on,
.nav__list .current-menu-item>a{color:var(--blue);background:var(--blue-t);font-weight:600}

/* ---- desktop menu, in the bar ---- */
.navdesk{
  display:flex;
  align-items:center;
  /* No auto margin: a flex child with one swallows the leftover space, and
     that space becomes hover area. The brand takes the push instead. */
  flex:0 0 auto;
}

/* ---- the sliding panel ---- */
.nav{
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  width:min(320px,84vw);
  background:#fff;
  z-index:200;
  padding:90px 18px 28px;
  margin:0;
  box-shadow:14px 0 40px -20px rgba(11,23,48,.45);
  transform:translateX(-100%);
  transition:transform .24s ease;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.nav.is-open{transform:translateX(0)}
.nav .nav__list{flex-direction:column;align-items:stretch;gap:0}
.nav .nav__list a{padding:15px 14px;font-size:1.06rem;border-radius:10px;white-space:normal}
.nav .nav__list li + li{border-top:1px solid var(--line)}
.nav__cta{display:block;width:100%;margin-top:22px;text-align:center}

.navveil{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(11,23,48,.5);z-index:150}

/* ---- which of the two is visible ---- */
@media (min-width:901px){
  .navbtn{display:none}
  .nav{display:none}
  .navveil{display:none}
}

@media (max-width:900px){
  .navdesk{display:none}
  .navbtn{display:flex}
  .head__cta{display:none}
  body.nav-open{overflow:hidden}
  /* The header outranks the panel so the logo stays visible and the button
     stays clickable to close what it opened. */
  .head{z-index:300}
}

/* ---- submenu ---- */
.nav__list li{position:relative}
.nav__list .sub-menu{list-style:none;margin:0;padding:0}

@media (min-width:901px){
  .navdesk .sub-menu{
    position:absolute;
    top:100%;
    inset-inline-start:0;
    min-width:230px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--r);
    box-shadow:0 18px 40px -22px rgba(11,23,48,.4);
    padding:7px;
    display:none;
    opacity:0;
    transform:translateY(-6px);
    transition:opacity .16s,transform .16s;
    z-index:70;
  }
  .navdesk li:hover > .sub-menu,
  .navdesk li:focus-within > .sub-menu,
  .navdesk > .nav__list > li > .sub-menu:hover{display:block;opacity:1;transform:translateY(0)}
  .navdesk .sub-menu a{
    display:block;
    padding:10px 13px;
    border-radius:9px;
    font-size:.94rem;
    font-weight:500;
    color:var(--ink-2);
    white-space:nowrap;
  }
  .navdesk .sub-menu a:hover,
  .navdesk .sub-menu a:focus-visible{background:var(--haze);color:var(--ink)}
  .navdesk .menu-item-has-children > a::after{
    content:'';
    display:inline-block;
    width:5px;
    height:5px;
    margin-inline-start:7px;
    border-inline-end:1.6px solid currentColor;
    border-bottom:1.6px solid currentColor;
    transform:rotate(45deg) translateY(-2px);
    opacity:.55;
  }
}

.subbtn{display:none}

@media (max-width:900px){
  .nav .menu-item-has-children{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
  }
  .nav .menu-item-has-children > a{font-weight:700}
  .subbtn{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    background:transparent;
    border:0;
    padding:0;
    cursor:pointer;
    color:var(--ink-2);
  }
  .subbtn__chev{
    width:9px;
    height:9px;
    border-inline-end:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-1px,-1px);
    transition:transform .2s ease;
  }
  .subbtn[aria-expanded=true] .subbtn__chev{transform:rotate(225deg) translate(-1px,-1px)}
  .nav .sub-menu{
    grid-column:1 / -1;
    display:none;
    margin:0 0 8px;
    padding-inline-start:12px;
    border-inline-start:2px solid var(--line);
  }
  .nav .is-open > .sub-menu{display:block}
  .nav .sub-menu li + li{border-top:0}
  .nav .sub-menu a{padding:11px 12px;font-size:.96rem;font-weight:400;color:var(--ink-2)}
}

@media (prefers-reduced-motion:reduce){
  .nav{transition:none}
}

/* ---------- add business form ---------- */
.abz{border:1px solid var(--line);border-radius:var(--r);padding:22px;margin:26px 0;background:#fff}
.abz__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.abz .field{margin-bottom:16px}
.abz .req{color:var(--coral-d)}
.abz fieldset{border:0;padding:0;margin:0 0 16px}
.abz legend{font-size:.94rem;font-weight:600;margin-bottom:7px;padding:0}
.abz__areas{display:flex;flex-wrap:wrap;gap:8px}
.abz__chk{display:inline-flex;align-items:center;gap:7px;background:var(--haze);border:1px solid var(--line);border-radius:20px;padding:7px 13px;font-size:.9rem;cursor:pointer}
.abz__chk:has(input:checked){background:var(--blue-t);border-color:var(--blue);font-weight:600}
/* Present for a machine, absent for a person: moved out of view rather than
   hidden, so a screen reader can still announce the instruction. */
.abz__trap{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.abz__foot{border-top:1px solid var(--line);padding-top:16px;margin-top:4px}
.abz__legal{font-size:.85rem;color:var(--ink-3);font-weight:300;line-height:1.65;margin:11px 0 0;max-width:60ch}
.abz__out{margin-top:14px;padding:0;font-size:.96rem;line-height:1.6}
.abz__out.is-ok{padding:14px 16px;border-radius:var(--r-sm);background:var(--aqua-t);border:1px solid #A8E8D2;color:#00563C;font-weight:600}
.abz__out.is-err{padding:14px 16px;border-radius:var(--r-sm);background:var(--coral-t);border:1px solid #FCD5C8;color:var(--coral-d);font-weight:600}
@media (max-width:620px){.abz{padding:16px}.abz__grid{grid-template-columns:1fr}}

/* ---------- urgent care ---------- */
.uc{border:2px solid var(--line-2);border-radius:var(--r);padding:20px;margin:20px 0;background:#fff}
.uc h3{font-family:"Rubik",sans-serif;font-size:1.14rem;font-weight:700;margin:0 0 14px;color:var(--ink)}
.uc__facts{list-style:none;margin:0 0 14px;padding:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.uc__facts li{display:flex;justify-content:space-between;gap:14px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:.94rem}
.uc__facts li::before{display:none}
.uc__facts li:last-child{border-bottom:0}
.uc__facts b{font-weight:600;color:var(--ink-2);flex-shrink:0}
.uc__facts span{text-align:end;font-weight:500;font-variant-numeric:tabular-nums}
.uc__facts a{color:var(--blue);font-weight:700}
.uc__note{font-size:.88rem;color:#8A5600;background:var(--gold-t);border-radius:var(--r-sm);padding:11px 13px;line-height:1.65;margin:12px 0 0}
@media (max-width:560px){.uc{padding:15px}.uc__facts li{flex-direction:column;gap:3px}.uc__facts span{text-align:start}}

/* ---------- links inside body text ----------
   Nothing styled these, so every in-content link inherited the text colour
   and was invisible. Colour alone is not enough either: an underline means
   the link is still recognisable to a reader who cannot distinguish it. */
.prose a:not(.btn):not(.tile):not([class*="__"]){
  color:var(--blue);
  font-weight:600;
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  text-decoration-color:rgba(37,99,245,.35);
  transition:text-decoration-color .15s,color .15s;
}
.prose a:not(.btn):not(.tile):not([class*="__"]):hover{
  color:#1E4FD6;
  text-decoration-color:currentColor;
}
.prose a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}

/* Callouts already sit on a tinted panel, so the link takes that hue. */
.callout--gold a,.cal__note a{color:#8A5600;text-decoration-color:rgba(138,86,0,.4)}
.callout--coral a{color:var(--coral-d);text-decoration-color:rgba(194,49,8,.4)}
.callout--aqua a{color:#00744F;text-decoration-color:rgba(0,116,79,.4)}

/* ---------- hub page ----------
   Each section exists to send the reader somewhere, so the destination is
   a control rather than a phrase inside a sentence. */
.hub__go{margin:14px 0 0!important}
.btn--hub{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--blue-t);color:var(--blue)!important;
  border:1.5px solid rgba(37,99,245,.3);
  border-radius:11px;padding:12px 18px;
  font-size:.98rem;font-weight:600;
  text-decoration:none!important;
  transition:.15s;
}
.btn--hub::after{content:"";width:6px;height:6px;border-inline-start:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);flex-shrink:0}
.btn--hub:hover{background:var(--blue);color:#fff!important;border-color:var(--blue)}

.hub__list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.hub__list li{margin:0;padding:0}
.hub__list li::before{display:none}
.hub__list li{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 16px;font-size:.94rem;color:var(--ink-2);line-height:1.6;
  transition:border-color .15s,box-shadow .15s;
}
.hub__list li:hover{border-color:var(--blue);box-shadow:0 6px 18px -12px rgba(11,23,48,.35)}
.hub__list a{font-weight:700}
@media (min-width:760px){.hub__list{grid-template-columns:1fr 1fr}}

/* ---------- grouped services menu ----------
   Nineteen items in one column is a sitemap, not a menu. The same list, cut
   into five named groups, becomes something the eye can scan: on a wide
   screen the groups sit side by side, on a phone each one folds away. */

@media (min-width:901px){
  /* The panel spans the header rather than hanging off one item. */
  /* The nav is the positioning context, not the item, so the panel can span
     the header without the item having to give up its own bounds. */
  .navdesk{position:relative}
  /* Fixed to the viewport and centred: the item keeps its own bounds, so
     only the word itself opens the panel. */
  /* An invisible bridge across the gap, so the cursor never leaves the item
     on its way down to the panel. */
  .navdesk > .nav__list > .menu-item-has-children{position:relative}
  .navdesk > .nav__list > .menu-item-has-children::after{
    content:"";
    position:absolute;
    top:100%;right:0;left:0;
    height:18px;
  }

  .navdesk > .nav__list > .menu-item-has-children > .sub-menu{
    position:fixed;
    top:74px;
    inset-inline-start:50%;
    inset-inline-end:auto;
    transform:translateX(50%) translateY(-6px);
    width:min(880px,92vw);
    padding:22px 24px;
  }
  body.admin-bar .navdesk > .nav__list > .menu-item-has-children > .sub-menu{top:106px}
  .navdesk > .nav__list > .menu-item-has-children:hover > .sub-menu,
  .navdesk > .nav__list > .menu-item-has-children:focus-within > .sub-menu,
  .navdesk > .nav__list > .menu-item-has-children > .sub-menu:hover{
    display:grid;grid-template-columns:repeat(5,1fr);gap:6px 18px;align-items:start;
    transform:translateX(50%) translateY(0);
  }
  /* A group heading is a link too, so it stays clickable while reading as a
     label rather than another item in the list. */
  .navdesk .nav-group > a{
    font-size:.88rem!important;font-weight:700!important;
    color:var(--ink)!important;
    background:var(--haze);
    border-inline-start:3px solid var(--blue);
    padding:9px 12px!important;margin-bottom:6px;
    border-radius:8px!important;
  }
  .navdesk .nav-group > a:hover{background:var(--blue-t)!important;color:var(--blue)!important}
  /* The items sit quieter, so the eye lands on the group first. */
  .navdesk .sub-menu .sub-menu a{color:var(--ink-2)}
  .navdesk .nav-group > a::after{display:none}
  /* The third level is not a dropdown of its own: it is the column body. */
  .navdesk .sub-menu .sub-menu{
    position:static;
    visibility:visible;
    opacity:1;
    transform:none;
    background:transparent;border:0;box-shadow:none;padding:0;min-width:0;
  }
  .navdesk .sub-menu .sub-menu a{font-size:.92rem;padding:8px 10px}
}

@media (max-width:900px){
  .nav .nav-group > a{
    font-weight:700;color:var(--ink);
    background:var(--haze);
    border-inline-start:3px solid var(--blue);
    border-radius:8px;
    font-size:1rem;
  }
  .nav .sub-menu .sub-menu a{color:var(--ink-2)}
  .nav .sub-menu .sub-menu{
    margin:0 0 6px;padding-inline-start:10px;
    border-inline-start:2px solid var(--line);
  }
  .nav .sub-menu .sub-menu a{font-size:.92rem;padding:10px 12px}
}

@media (max-width:900px){
  /* The panel opens straight onto the five group names; only the groups
     themselves fold. */
  .nav > .nav__list > .menu-item-has-children > .sub-menu{display:block}
  .nav > .nav__list > .menu-item-has-children > a{font-weight:700;font-size:1.1rem}
}

@media (min-width:901px){
  /* The brand claims the slack, so the nav, the search button and the call
     to action sit together at the far end and each keeps its own bounds. */
  .brand{margin-inline-end:auto}
}

@media (min-width:901px){
  /* Each column is a block of its own, so moving between groups never
     passes over a gap in the grid. */
  .navdesk > .nav__list > li > .sub-menu > li{align-self:stretch}
  .navdesk > .nav__list > li > .sub-menu{width:min(1000px,94vw)}
  .navdesk .nav-group > a{margin-bottom:4px}
  .navdesk .sub-menu .sub-menu a{padding:7px 10px;font-size:.9rem}
}

/* ---------- search button ----------
   The magnifier belongs beside the word, not floating in the field where it
   either covers the text or reserves space nobody uses. */
.searchbar .btn{display:inline-flex;align-items:center;gap:8px}
.searchbar .btn svg{width:17px;height:17px;flex-shrink:0}
@media (max-width:660px){
  .searchbar .btn{gap:6px}
  .searchbar .btn svg{width:16px;height:16px}
}

/* ---------- whatsapp channel ----------
   Shown as an offer rather than a banner: what arrives, and what does not. */
.wa{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:#F0FBF4;border:1.5px solid #BFE9CF;border-radius:var(--r);padding:20px 22px;margin:34px 0}
.wa__body{flex:1 1 320px;min-width:0}
.wa__body b{display:block;font-size:1.08rem;color:#0A5A34;margin-bottom:5px}
.wa__body p{font-size:.92rem;color:#1E6B45;font-weight:300;line-height:1.65;margin:0}
.wa__btn{display:inline-flex;align-items:center;gap:9px;background:#1FA855;color:#fff!important;
  border-radius:11px;padding:13px 22px;font-weight:700;font-size:1rem;flex-shrink:0;
  text-decoration:none!important;transition:background .15s}
.wa__btn:hover{background:#17843F}
.wa__btn svg{flex-shrink:0}
.wa-inline{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;
  color:#7FE3A8!important;font-weight:600;font-size:.94rem;text-decoration:none!important}
.wa-inline:hover{color:#A9F0C4!important}
@media (max-width:620px){
  .wa{flex-direction:column;align-items:stretch;padding:16px}
  .wa__btn{justify-content:center}
}

/* the hero strip: light on a dark gradient, one line */
.wa-strip{display:inline-flex;align-items:center;gap:11px;flex-wrap:wrap;
  margin-top:18px;padding:11px 18px;border-radius:30px;
  background:rgba(31,168,85,.16);border:1.5px solid rgba(127,227,168,.45);
  color:#BFF3D4!important;text-decoration:none!important;transition:.15s}
.wa-strip:hover{background:rgba(31,168,85,.3);border-color:#7FE3A8}
.wa-strip svg{color:#7FE3A8;flex-shrink:0}
.wa-strip__t{font-weight:700;font-size:.97rem;color:#fff}
.wa-strip__s{font-size:.86rem;opacity:.82}
.wa-strip__go{font-weight:700;font-size:.92rem;color:#7FE3A8;
  border-inline-start:1px solid rgba(127,227,168,.4);padding-inline-start:11px}
@media (max-width:620px){
  .wa-strip{width:100%;justify-content:center;gap:8px;padding:11px 14px}
  .wa-strip__s{display:none}
}

/* ---------- russian pages ----------
   The site is RTL; these pages are not. The flip is scoped to the content
   so the header, nav and footer stay exactly as they are elsewhere. */
.phead.ru,.prose.ru{direction:ltr;text-align:left}
.prose.ru ul,.prose.ru ol{padding-inline-start:24px;padding-inline-end:0}
.prose.ru li::before{display:none}
.prose.ru li{list-style:disc;margin-bottom:7px}
.prose.ru ol li{list-style:decimal}
.ru-note{background:var(--haze);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:14px 16px;font-size:.9rem;color:var(--ink-2);line-height:1.65;margin:0 0 26px}
.ru-note a{font-weight:700;white-space:nowrap}
.ru-nav{border-top:1px solid var(--line);margin-top:34px;padding-top:20px}
.ru-nav b{display:block;font-size:1rem;margin-bottom:11px}
.ru-nav ul{list-style:none;padding:0!important;margin:0;display:grid;gap:8px}
.ru-nav li{margin:0;list-style:none!important}
.ru-nav a{font-weight:600}
.ru-nav .is-here{color:var(--ink-3);font-weight:400}
@media (min-width:700px){.ru-nav ul{grid-template-columns:1fr 1fr}}
/* the language switch in the header */
.langsw{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:9px;
  border:1.5px solid var(--line-2);font-size:.88rem;font-weight:600;color:var(--ink-2);
  flex-shrink:0;text-decoration:none!important;transition:.15s}
.langsw:hover{border-color:var(--blue);color:var(--blue)}
@media (max-width:900px){}

/* the Russian hero and board flip with the rest of the content */
.hero.ru,.hero.ru .hero__inner,.board.ru,.board.ru .tile{direction:ltr;text-align:left}
.hero.ru .chips{direction:ltr}
.board.ru li{list-style:none!important;margin:0}
.prose.ru .board{margin:18px 0 30px}

/* the Russian menu is flat: no groups, no wide panel */
.nav__list--ru{direction:ltr}
.nav__list--ru li::before{display:none}
.nav__list--ru a{white-space:nowrap}
@media (max-width:900px){.nav .nav__list--ru{flex-direction:column;align-items:stretch}}

/* the Russian aside matches the Hebrew one, direction aside */
aside.ru,aside.ru *{direction:ltr;text-align:left}
aside.ru .qlinks li::before{display:none}
.wrap.ru .cols{direction:ltr}

/* ---------- calculator result: readability and overflow ----------
   Three problems, one place. The discount lines were set in the light aqua
   used for accents, which does not carry as text. The small print inherited
   a grey too pale to read at that size. And nothing constrained the width,
   so a long row could widen the document -- which in an RTL page reads as a
   lurch sideways into empty space. */

/* A darker green for text; the pale one stays for chips and icons. */
.ar__cut{color:#00744F}
.ar__cut b,.ar__cut .num{color:#00744F}



/* Nothing inside the tool may widen the page. */
/* Contain the width instead of making the box scrollable: a scrollable box
   is something the browser will scroll, which is what caused the jump. */
.ar__panel,.ar__out,.ar__list{max-width:100%}
.ar__list li{flex-wrap:wrap;gap:4px}
.ar__list li{min-width:0}
.ar__list li span{min-width:0;overflow-wrap:anywhere}

/* The result is a yearly figure; the label says so, and now looks like it. */
.ar__grand{font-weight:700}
.ar__grand span{font-size:1.02rem}
.ar__grand .num{font-size:1.24rem}

/* ---------- tool small print ----------
   Every <small> inside a tool, whatever its parent. The earlier rule named
   specific ancestors and so missed the notes sitting directly in a panel. */
.ar__panel small,
.ar__panel .ar__radio + small,
.ar__field small,
.ar__list small,
.ar__cut small,
.tool small,
.inc small,
.aud small{
  display:block;
  font-size:.88rem;
  line-height:1.6;
  color:var(--ink-2);
  font-weight:400;
  margin-top:6px;
}
.ar__cut small{color:#1E6B45}
.ar__per{color:var(--ink-2)}

/* ---------- result appears in place ----------
   With no scroll, the result has to draw the eye on its own: a brief tint
   that fades marks it as new without moving anything. */
@keyframes rl-arrive{from{background:var(--gold-t)}to{background:transparent}}
[data-ar-out] > *{animation:rl-arrive 1.1s ease-out}
@media (prefers-reduced-motion:reduce){[data-ar-out] > *{animation:none}}

/* ---------- the four-column result table ----------
   A table will not shrink below the intrinsic width of its content, so on a
   narrow screen it pushed the document wider than the viewport. In an RTL
   page that surplus width sits to the left, which is the blank space the
   reader was being dragged into.

   The wrapper scrolls instead of the page, and the layout is fixed so the
   columns divide the available width rather than demanding their own. */
.ar__table{
  width:100%;
  max-width:100%;
  table-layout:fixed;
  border-collapse:collapse;
}
.ar__table th,.ar__table td{
  overflow-wrap:anywhere;
  word-break:break-word;
  padding:9px 8px;
}
.ar__table th:first-child{width:38%}
.ar__table td.num{white-space:nowrap;font-variant-numeric:tabular-nums}

/* Anything the tool prints is contained; nothing it prints widens the page. */
[data-ar-out]{max-width:100%;overflow-x:hidden}
[data-ar-out] table{max-width:100%}
.ar__totals{max-width:100%}
.ar__totals li{flex-wrap:wrap;gap:4px 10px;min-width:0}
.ar__totals li span{min-width:0;flex:1 1 auto}

@media (max-width:560px){
  /* Below this the four columns cannot be read anyway; the tariff column is
     the one a reader checks least. */
  .ar__table th:nth-child(3),.ar__table td:nth-child(3){display:none}
  .ar__table th:first-child{width:46%}
  .ar__table th,.ar__table td{padding:8px 6px;font-size:.9rem}
}

/* ---------- layer order ----------
   veil 900 < panel 950 < header 1000 < dropdown 1010 < skip link 1100.
   The dropdown has to clear the header because it hangs from it. */
.head{z-index:1000}
.navdesk > .nav__list > .menu-item-has-children > .sub-menu{z-index:1010}
.navdesk .sub-menu{z-index:1010}
.headsearch{z-index:990}
.nav{z-index:950}
.navveil{z-index:900}
.skip{z-index:1100}

/* Content never competes with the chrome. A section that creates its own
   stacking context can otherwise trap a menu behind it. */
.wa{position:relative;z-index:1}
.hero{z-index:0}
.board-zone{position:relative;z-index:1}

/* ---------- flex children that refuse to shrink ----------
   A flex item defaults to min-width:auto, which means it will not go below
   the intrinsic width of its content. Three step labels side by side were
   therefore setting a floor wider than a phone screen, and the surplus in an
   RTL document sits to the left. */
.ar__steps{max-width:100%}
.ar__steps li{min-width:0}
.ar__steps li span{flex-shrink:0}

/* The same guard for every row the tool prints. */
.ar__running{max-width:100%;flex-wrap:wrap;gap:4px 10px}
.ar__running span,.ar__running b{min-width:0}
.ar__panel,.ar__field,.ar__row,.ar__pair,.ar__nav{max-width:100%;min-width:0}
.ar__row,.ar__pair{flex-wrap:wrap}
.ar__row > *,.ar__pair > *{min-width:0}
.ar__nav{flex-wrap:wrap;gap:8px}

@media (max-width:430px){
  /* On the narrowest screens the step names alone are enough. */
  .ar__steps li{padding:11px 4px;font-size:.84rem;gap:5px}
  .ar__steps li span{width:20px;height:20px;font-size:.75rem}
}

/* Shown only to editors: a quiet reminder that their own use is excluded. */
.rl-nocount{position:fixed;inset-block-end:12px;inset-inline-start:12px;z-index:1200;
  background:rgba(11,23,48,.9);color:#fff;font-size:.78rem;padding:6px 12px;border-radius:20px;
  display:flex;gap:9px;align-items:center;pointer-events:auto}
.rl-nocount a{color:#7FE3A8;font-weight:600;text-decoration:underline}
@media (max-width:600px){.rl-nocount{font-size:.72rem;padding:5px 10px}}

/* ---------- sticky invitation bar ----------
   Slim enough to sit under the content rather than over it, and it slides
   rather than appears, so it reads as an offer and not an interruption. */
.wabar{position:fixed;inset-inline:0;bottom:0;z-index:1150;
  transform:translateY(110%);transition:transform .26s ease;pointer-events:none}
.wabar.is-up{transform:translateY(0);pointer-events:auto}
.wabar__in{display:flex;align-items:center;gap:14px;max-width:820px;margin:0 auto 12px;
  background:#0E7A3D;color:#fff;border-radius:14px;padding:12px 16px;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.45)}
.wabar__txt{flex:1 1 auto;min-width:0;line-height:1.35}
.wabar__txt b{display:block;font-size:.95rem;font-weight:700}
.wabar__txt small{font-size:.8rem;opacity:.8}
.wabar__go{flex-shrink:0;background:#fff;color:#0E7A3D!important;border-radius:9px;
  padding:9px 16px;font-weight:700;font-size:.92rem;text-decoration:none!important}
.wabar__go:hover{background:#E8F8EE}
.wabar__x{flex-shrink:0;background:transparent;border:0;color:#fff;opacity:.7;
  font-size:1.5rem;line-height:1;cursor:pointer;padding:0 4px}
.wabar__x:hover{opacity:1}
@media (max-width:600px){
  .wabar__in{margin:0 8px 8px;gap:10px;padding:10px 12px;border-radius:12px}
  .wabar__txt b{font-size:.88rem}
  .wabar__txt small{display:none}
  .wabar__go{padding:8px 13px;font-size:.87rem}
}
@media (prefers-reduced-motion:reduce){.wabar{transition:none}}

/* ---------- city updates ----------
   The practical consequence is the point of the page, so it is set apart
   from the body rather than buried in it. */
.upd__means{background:var(--gold-t);border-inline-start:4px solid var(--gold);
  border-radius:var(--r-sm);padding:16px 18px;margin:0 0 24px}
.upd__means b{display:block;font-size:1.02rem;color:#8A5600;margin-bottom:6px}
.upd__means p{margin:0;font-size:.98rem;line-height:1.7;color:var(--ink)}
.upd__due{margin-top:10px!important;font-size:.94rem;color:var(--coral-d)}
.upd__meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:.9rem;margin-top:10px}
.upd__kind{display:inline-flex;align-items:center;padding:4px 11px;border-radius:20px;
  font-size:.8rem;font-weight:700;background:var(--haze);color:var(--ink-2)}
.upd__kind.i-violet{background:var(--violet-t);color:#4A21B8}
.upd__kind.i-gold{background:var(--gold-t);color:#8A5600}
.upd__kind.i-sea{background:var(--sea-t);color:#00647A}
.upd__kind.i-coral{background:var(--coral-t);color:var(--coral-d)}
.upd__kind.i-aqua{background:var(--aqua-t);color:#00744F}
.upd__area{color:var(--ink-3)}
.upd__src{margin-top:26px!important;font-size:.86rem;color:var(--ink-3);
  border-top:1px solid var(--line);padding-top:12px}

/* worked examples inside an update */
.upd__ex{background:#fff;border:1.5px solid var(--line-2);border-radius:var(--r);
  padding:16px 18px;margin:0 0 14px}
.upd__ex b{display:block;font-size:1rem;margin-bottom:10px;color:var(--ink)}
.upd__ex ul{margin:0;padding-inline-start:18px}
.upd__ex li{margin-bottom:5px;font-size:.94rem;line-height:1.65}
.upd__ex li:last-child{margin-top:9px;padding-top:9px;border-top:1px solid var(--line);
  font-size:1rem;color:var(--coral-d)}
.upd__ex li::before{display:none}

/* the lead image, when one exists */
.upd__img{margin:0 0 26px;border-radius:var(--r);overflow:hidden}
.upd__img img{display:block;width:100%;height:auto}
.upd__img figcaption{font-size:.84rem;color:var(--ink-3);padding:9px 2px 0;line-height:1.55}

.tile__img{display:block;margin:-18px -18px 14px;overflow:hidden;
  border-radius:var(--r) var(--r) 0 0;aspect-ratio:16/9;background:var(--haze)}
.tile__img img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- language switch ----------
   Sits between the menu and the search button on every screen. It was
   hidden below 900px, which removed the only way out for a reader who
   cannot read the page they landed on. */
.langsw{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:9px;
  border:1.5px solid var(--line-2);font-size:.86rem;font-weight:600;color:var(--ink-2);
  flex-shrink:0;text-decoration:none!important;transition:.15s;order:0}
.langsw:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-t)}
.langsw__f{flex-shrink:0;display:block;border-radius:2px}
@media (max-width:900px){
  /* The label goes, the flag stays: it is legible in either language. */
  .langsw{padding:0;width:40px;height:40px;justify-content:center;border-radius:11px;
    background:var(--haze)}
  .langsw span{display:none}
  .langsw__f{width:22px;height:15px}
}
@media (max-width:400px){.langsw{width:36px;height:36px}}

/* ---------- header control group ----------
   The menu is content; the language switch, the search and the call to
   action are controls. They were interleaved, so the switch read as the
   last menu item. A gap and a hairline separate the two groups. */
@media (min-width:901px){
  .head__row{gap:10px}
  /* The gap sits after the menu; the controls stay tight to each other. */
  .navdesk{margin-inline-end:26px;position:relative}
  .navdesk::after{
    content:"";
    position:absolute;
    inset-inline-end:-14px;
    top:50%;
    transform:translateY(-50%);
    width:1px;
    height:22px;
    background:var(--line);
  }
  .langsw{margin-inline-start:0}
}

/* The Russian label is longer and was breaking onto a second line. */
.head__cta{white-space:nowrap}
@media (min-width:901px){
  body.ru .head__cta{padding-inline:15px;font-size:.9rem}
  body.ru .navdesk .nav__list a{padding:9px 9px;font-size:.92rem}
  body.ru .navdesk{margin-inline-end:12px}
}

/* ---------- control group spacing ----------
   The three controls are one cluster. Nothing between them may claim the
   leftover width; the brand does that, once, at the other end. */
.srchbtn,.langsw,.head__cta,.navbtn{margin-inline-start:0!important}
@media (min-width:901px){
  .head__row > .langsw + .srchbtn{margin-inline-start:0}
}

/* ---------- business rates calculator ---------- */
.bza{background:#fff;border:1.5px solid var(--line-2);border-radius:var(--r);padding:20px;margin:24px 0}
.bza__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bza .field{margin-bottom:14px;min-width:0}
.bza select,.bza input{width:100%}
.bza small{display:block;font-size:.84rem;color:var(--ink-2);margin-top:4px;line-height:1.5}
.bza__out{background:var(--haze);border:1.5px solid var(--line-2);border-radius:var(--r);padding:20px;margin:0 0 26px}
.bza__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.bza__head span{font-size:.9rem;color:var(--ink-2)}
.bza__head b{font-size:1.06rem;color:var(--ink);white-space:nowrap}
.bza__list{list-style:none;margin:0;padding:0}
.bza__list li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:.96rem;flex-wrap:wrap}
.bza__list li::before{display:none}
.bza__grand{border-top:2px solid var(--ink);margin-top:8px;padding-top:12px!important;font-weight:700;font-size:1.06rem!important}
.bza__grand .num{font-size:1.3rem}
.bza__per{color:var(--ink-2);font-size:.9rem!important}
.bza__note{font-size:.88rem;color:#8A5600;background:var(--gold-t);border-radius:var(--r-sm);padding:11px 13px;margin:14px 0 0;line-height:1.6}
.bza__legal{font-size:.85rem;color:var(--ink-3);margin:12px 0 0;line-height:1.6}
@media (max-width:620px){.bza__row{grid-template-columns:1fr}.bza{padding:15px}}

/* ---------- from cost to entitlement ----------
   The calculator answers "how much". The offer below it answers a different
   question, so it is set apart rather than folded into the result. */
.ar__bridge{background:var(--aqua-t);border:1.5px solid #A8E8D2;border-radius:var(--r);
  padding:18px 20px;margin:22px 0 0}
.ar__bridge b{display:block;font-size:1.04rem;color:#00563C;margin-bottom:6px}
.ar__bridge p{font-size:.93rem;color:#1E6B45;line-height:1.65;margin:0 0 14px}
.ar__bridge .btn{display:inline-block}

/* ---------- entitlement checker ----------
   The verdict is the point of the tool, so it leads rather than following
   a list the reader has to interpret. */
.d2__verdict{background:var(--aqua-t);border:1.5px solid #A8E8D2;border-radius:var(--r);
  padding:18px 20px;margin:0 0 18px}
.d2__verdict b{display:block;font-size:1.1rem;color:#00563C;margin-bottom:7px}
.d2__verdict p{font-size:.95rem;color:#1E6B45;line-height:1.65;margin:0 0 8px}
.d2__vs{opacity:.85;font-size:.9rem!important}
.d2__note{border-top:1px solid #A8E8D2;padding-top:9px;margin-top:11px!important;font-size:.88rem!important}
.d2__h{font-size:1.06rem;margin:0 0 4px;color:var(--ink)}
.disc2 .ar__panel + .ar__panel{margin-top:16px}



/* ---------- discount comparator ----------
   Segmented buttons for the short choices: with two or three options,
   showing them all is faster than opening a list, and the current state is
   visible without a click. */

.dc{background:var(--haze);border:1px solid var(--line);border-radius:16px;
  padding:22px;margin:28px 0}
.dc__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}
.dc__icon{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;
  background:var(--aqua);color:#fff;flex-shrink:0}
.dc__head b{display:block;font-size:1.16rem;color:var(--ink);margin-bottom:3px}
.dc__head p{font-size:.9rem;color:var(--ink-3);line-height:1.5;margin:0}

.dc__seg{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.dc__opt{text-align:start;background:#fff;border:1.5px solid var(--line-2);
  border-radius:12px;padding:13px 16px;cursor:pointer;transition:.15s}
.dc__opt b{display:block;font-size:1rem;color:var(--ink);margin-bottom:2px}
.dc__opt span{font-size:.84rem;color:var(--ink-3)}
.dc__opt:hover{border-color:var(--ink-3)}
.dc__opt.is-on{background:var(--coral);border-color:var(--coral)}
.dc__opt.is-on b,.dc__opt.is-on span{color:#fff}

.dc__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dc__f{margin-bottom:16px}
.dc__f label{display:block;font-size:.9rem;font-weight:600;color:var(--ink);margin-bottom:6px}
.dc__in{position:relative;display:flex;align-items:center;background:#fff;
  border:1.5px solid var(--line-2);border-radius:11px;padding:0 14px;transition:border-color .15s}
.dc__in:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-t)}
.dc__in input{flex:1 1 auto;min-width:0;border:0;background:transparent;padding:13px 0;
  font:inherit;font-size:1.15rem;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.dc__in input:focus{outline:none}
.dc__in em{font-style:normal;font-size:.9rem;color:var(--ink-3);flex-shrink:0;padding-inline-start:8px}
.dc__f select{width:100%;background:#fff;border:1.5px solid var(--line-2);
  border-radius:11px;padding:13px 14px;font:inherit;font-size:.98rem;color:var(--ink)}
.dc__f small{display:block;font-size:.83rem;color:var(--ink-3);margin-top:6px;line-height:1.5}

.dc__more{background:#fff;border:1.5px solid var(--line-2);border-radius:11px;
  padding:13px 16px;margin-bottom:18px}
.dc__more summary{cursor:pointer;font-size:.93rem;font-weight:600;color:var(--ink-2)}
.dc__more ul{margin:11px 0 0;padding-inline-start:18px}
.dc__more li{font-size:.88rem;color:var(--ink-2);line-height:1.6;margin-bottom:4px;list-style:disc}
.dc__more li::before{display:none}

.dc__go{width:100%;background:var(--aqua);color:#fff;border:0;border-radius:12px;
  padding:16px;font:inherit;font-size:1.04rem;font-weight:700;cursor:pointer;transition:background .15s}
.dc__go:hover{background:#00744F}
.dc__out{margin-top:18px}
.dc__out:empty{margin:0}

@media (max-width:620px){
  .dc{padding:16px;border-radius:14px}
  .dc__row,.dc__seg{grid-template-columns:1fr}
  .dc__head{gap:11px}
}