/* ==========================================================================
   FR Air Conditioner & Refrigeration Services
   Mobile-first base; every larger layout is a min-width enhancement.
   Type and space are fluid (clamp) so it adapts continuously, not in steps.
   The signature is the scroll to cold: the page interpolates hot -> cool.
   ========================================================================== */

:root{
  /* the journey */
  --hot-a:#F4B393; --hot-b:#E87E63;
  --cool-a:#E3EDFA; --cool-b:#93B4EA;
  --stop-a:var(--hot-a); --stop-b:var(--hot-b);

  --ink:#141E33;
  --ink-2:#48566F;
  --ink-3:#7A8699;
  --line:rgba(20,30,51,.14);
  --card:#FFFFFF;
  --blue:#1D46C4;
  --blue-d:#12308F;
  --warm:#C2461F;

  --fd:'Sora',system-ui,sans-serif;
  --fb:'Inter',system-ui,sans-serif;
  --fm:'Space Mono',ui-monospace,monospace;

  --r-s:10px; --r-m:16px; --r-l:26px;
  --pad:clamp(1.15rem,round(5vw,1px),2rem);
  --gap:clamp(2.75rem,9vw,7rem);
  --max:1240px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--fb);
  color:var(--ink);
  background:linear-gradient(168deg,var(--stop-a) 0%,var(--stop-b) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.6;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--fd);margin:0;line-height:1.02;letter-spacing:-.035em;font-weight:800}
p{margin:0}
ul{list-style:none;margin:0;padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
.mono{font-family:var(--fm)}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.wrap-n{max-width:660px}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.9rem 1.2rem;z-index:100;border-radius:0 0 var(--r-s) 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:.85rem 1.5rem;border-radius:100px;
  font-family:var(--fd);font-weight:700;font-size:1rem;letter-spacing:-.01em;
  border:2px solid transparent;transition:transform .15s ease,background .2s ease,color .2s ease;
  text-align:center;
}
.btn:active{transform:scale(.97)}
.btn-solid{background:var(--ink);color:#fff}
.btn-solid:hover{background:var(--blue)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-sm{min-height:44px;padding:.5rem 1.1rem;font-size:.94rem}
.btn-lg{min-height:56px;padding:1rem 1.9rem;font-size:1.06rem}
.btn-block{width:100%}

/* ── thermometer (the signature) ───────────────────────────────────────── */
.thermo{position:fixed;left:clamp(.5rem,1.6vw,1.4rem);top:50%;transform:translateY(-50%);z-index:40;display:none;pointer-events:none}
.thermo-tube{width:5px;height:min(38vh,300px);border-radius:100px;background:rgba(20,30,51,.16);overflow:hidden;position:relative}
.thermo-fill{position:absolute;inset:auto 0 0 0;height:100%;border-radius:100px;background:linear-gradient(to top,#1D46C4,#E8663C);transform-origin:bottom;transition:transform .1s linear}
.thermo-read{margin:.6rem 0 0;font-size:.8rem;font-weight:700;text-align:center;color:var(--ink-2)}
@media (min-width:1080px){.thermo{display:block}}

/* ── nav ───────────────────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:1rem;
  padding:.7rem var(--pad);
  background:rgba(255,255,255,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-brand{display:flex;align-items:center;gap:.6rem;min-height:44px}
.nav-brand img{border-radius:6px;flex:none}
.nav-brand span{display:flex;flex-direction:column;line-height:1.05}
.nav-brand b{font-family:var(--fd);font-weight:800;font-size:1.12rem;letter-spacing:-.03em}
.nav-brand i{font-style:normal;font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.nav-links{display:none}
.nav-act{display:none;margin-left:auto;align-items:center;gap:.6rem}
.lang{background:none;border:1px solid var(--line);border-radius:100px;min-height:44px;padding:0 .8rem;display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:700;color:var(--ink-3);font-family:var(--fm)}
.lang [class^=lang-]{transition:color .2s}
html[lang=en] .lang-en,html[lang=es] .lang-es{color:var(--ink)}
.burger{margin-left:auto;box-sizing:border-box;width:46px;height:46px;min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.6);display:grid;place-content:center;gap:5px}
.burger span{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s}
body.open .burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
body.open .burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (min-width:900px){
  .nav-links{display:flex;gap:1.6rem;margin-left:2rem;font-weight:500;font-size:.95rem}
  .nav-links a{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 0;color:var(--ink-2)}
  .nav-links a:hover{color:var(--ink)}
  .nav-act{display:flex}
  .burger{display:none}
}

.menu{position:fixed;inset:0;z-index:45;background:linear-gradient(168deg,var(--stop-a),var(--stop-b));display:flex;flex-direction:column;justify-content:center;gap:.4rem;padding:5rem var(--pad) 2rem;opacity:0;visibility:hidden;transition:opacity .28s}
body.open .menu{opacity:1;visibility:visible}
body.open{overflow:hidden}
.menu a{font-family:var(--fd);font-weight:700;font-size:clamp(1.75rem,7vw,2.5rem);letter-spacing:-.035em;padding:.35rem 0;min-height:52px;display:flex;align-items:center}
.menu-foot{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
@media (min-width:900px){.menu{display:none}}

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero{min-height:clamp(560px,86svh,860px);display:flex;flex-direction:column;justify-content:center;padding:clamp(2.5rem,9vw,5rem) 0 clamp(3.5rem,9vw,5rem);position:relative}
.hero-in{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.kicker{font-family:var(--fm);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--warm);font-weight:700;margin-bottom:1.5rem}
.hero-h{font-size:clamp(2.5rem,8.4vw,6.4rem);letter-spacing:-.05em;max-width:15ch;text-wrap:balance}
/* The clause break is art-directed. It must never be display:none — a hidden
   <br> contributes no whitespace, so the two clauses ran together as
   "non-negotiableYour" on every phone under 520px, in both languages. */
.hero-h br{display:inline}
.hero-h em{font-style:italic;font-weight:400}
.hero-p{margin-top:1.5rem;max-width:46ch;font-size:clamp(1.05rem,1rem + .6vw,1.3rem);color:var(--ink-2)}
.hero-cta{margin-top:2.25rem;display:flex;flex-wrap:wrap;gap:.75rem}
.hero-cta .btn{flex:1 1 100%}
@media (min-width:560px){.hero-cta .btn{flex:0 1 auto}}
.hero-facts{margin:clamp(2.5rem,7vw,4rem) 0 0;display:grid;gap:1.4rem;border-top:1px solid var(--line);padding-top:1.75rem}
.hero-facts div{display:flex;align-items:baseline;gap:.85rem}
.hero-facts dt{font-size:1.8rem;font-weight:700;letter-spacing:-.04em;flex:none;min-width:2.6ch}
.hero-facts dd{margin:0;font-size:.94rem;color:var(--ink-2);line-height:1.45}
@media (min-width:760px){.hero-facts{grid-template-columns:repeat(3,1fr);gap:2rem}.hero-facts div{flex-direction:column;gap:.3rem}}
/* The hero photograph. It is the LCP image, so it is eager and preloaded — never
   lazy. Sized by aspect-ratio so the copy above it never shifts when it lands. */
.hero-media{margin:clamp(2rem,7vw,3.25rem) auto 0;width:100%;max-width:var(--max);padding-inline:var(--pad)}
.hero-media img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-l);box-shadow:0 24px 60px -28px rgba(20,30,51,.5)}
@media (min-width:900px){.hero-media img{aspect-ratio:21/9}}
.cue{position:absolute;left:50%;transform:translateX(-50%);bottom:1.5rem;font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}

/* ── sections ──────────────────────────────────────────────────────────── */
.sec{padding-block:var(--gap)}
.sec-h{max-width:34ch;margin-bottom:clamp(2rem,5vw,3.25rem)}
.sec-h-c{max-width:44ch;margin-inline:auto;text-align:center}
.sec-h h2{font-size:clamp(2rem,6.5vw,3.65rem)}
.eyebrow{font-family:var(--fm);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-d);font-weight:700;margin-bottom:.9rem}
.lede{margin-top:1.1rem;font-size:clamp(1rem,.97rem + .35vw,1.15rem);color:var(--ink-2)}

/* services */
.svc{display:grid;gap:1rem}
@media (min-width:680px){.svc{grid-template-columns:1fr 1fr;gap:1.15rem}}
.svc-card{background:var(--card);border-radius:var(--r-l);padding:clamp(1.5rem,4vw,2.4rem);display:flex;flex-direction:column;gap:.75rem;box-shadow:0 1px 2px rgba(20,30,51,.05),0 12px 34px -18px rgba(20,30,51,.28)}
.svc-n{font-size:.72rem;color:var(--ink-3);font-weight:700;letter-spacing:.1em}
.svc-card h3{font-size:clamp(1.3rem,3.4vw,1.6rem)}
.svc-card p{color:var(--ink-2);font-size:.98rem}
.svc-go{margin-top:auto;padding-top:.6rem;font-family:var(--fd);font-weight:700;font-size:.95rem;color:var(--blue);min-height:44px;display:inline-flex;align-items:center}

/* technician */
.tech{display:grid;gap:clamp(1.75rem,5vw,3.5rem);align-items:center}
@media (min-width:900px){.tech{grid-template-columns:1fr 1fr}}
.tech-img{margin:0;border-radius:var(--r-l);overflow:hidden;box-shadow:0 20px 50px -24px rgba(20,30,51,.42)}
.tech-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.tech-copy h2{font-size:clamp(1.9rem,5.6vw,3.1rem)}
.tech-copy>p{margin-top:1.1rem;color:var(--ink-2)}
.ticks{margin-top:1.75rem;display:grid;gap:.85rem}
.ticks li{position:relative;padding-left:1.9rem;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:11px;height:6px;border-left:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(-45deg)}

/* brands */
.marq{overflow:hidden;padding-block:clamp(1.5rem,4vw,2.5rem);border-block:1px solid var(--line);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq-row{display:flex;align-items:center;gap:clamp(1.5rem,4vw,3rem);width:max-content;animation:slide 34s linear infinite}
.marq-row span{font-family:var(--fd);font-weight:700;font-size:clamp(1.35rem,4.5vw,2.5rem);letter-spacing:-.035em;white-space:nowrap;color:var(--ink)}
.marq-row i{font-style:normal;color:var(--ink-3);font-size:1.4rem}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marq-row{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}
.brands-note{margin-top:1.5rem;text-align:center;font-size:.68rem;color:var(--ink-3);letter-spacing:.04em}

/* gallery */
.gal{display:grid;gap:.75rem;padding-inline:var(--pad);max-width:var(--max);margin-inline:auto}
@media (min-width:760px){.gal{grid-template-columns:1fr 1fr;gap:1rem}.gal-big{grid-column:1/-1}}
.gal figure{margin:0;border-radius:var(--r-m);overflow:hidden;background:var(--card)}
.gal img{width:100%;aspect-ratio:16/10;object-fit:cover}
.gal-big img{aspect-ratio:2/1}

/* reviews — a wall, not a carousel: nine five-star reviews should read as
   weight of evidence. CSS columns give a masonry feel with no JS. */
.wall{columns:1;column-gap:1rem}
@media (min-width:700px){.wall{columns:2}}
@media (min-width:1040px){.wall{columns:3}}
.wall blockquote{
  break-inside:avoid;margin:0 0 1rem;background:var(--card);
  border-radius:var(--r-m);padding:clamp(1.2rem,3vw,1.6rem);
  display:flex;flex-direction:column;gap:.7rem;
  box-shadow:0 1px 2px rgba(20,30,51,.05),0 10px 26px -20px rgba(20,30,51,.3);
}
.wall-lead{border:2px solid var(--ink)}
.wall-lead p:not(.st){font-size:1.06rem}
.wall p{color:var(--ink-2);font-size:.97rem}
.wall .st{color:#E8A33C;letter-spacing:.14em;font-size:.88rem}
.wall cite{font-style:normal;font-family:var(--fd);font-weight:700;font-size:.9rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline}
.wall cite span{font-family:var(--fb);font-weight:500;font-size:.76rem;color:var(--ink-3)}
.wall-foot{margin-top:1.25rem;text-align:center}

/* commercial */
.com{display:grid;gap:clamp(1.75rem,5vw,3.5rem);align-items:center}
@media (min-width:900px){.com{grid-template-columns:1fr 1fr}.com-img{order:2}}
.com-copy h2{font-size:clamp(1.9rem,5.6vw,3.1rem)}
.com-copy>p{margin:1.1rem 0 2rem;color:var(--ink-2)}
.com-img{margin:0;border-radius:var(--r-l);overflow:hidden;box-shadow:0 20px 50px -24px rgba(20,30,51,.42)}
.com-img img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* towns */
.towns{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.towns li{background:var(--card);border-radius:100px;font-family:var(--fd);font-weight:700;font-size:clamp(.95rem,2.6vw,1.1rem)}
.towns li a{display:flex;align-items:center;min-height:44px;padding:.7rem 1.3rem}
.towns-note{margin-top:1.75rem;text-align:center;color:var(--ink-2);font-size:.96rem}

/* faq */
.faq{display:grid;gap:.6rem;max-width:60rem}
.qa{background:var(--card);border-radius:var(--r-m);overflow:hidden}
.qa summary{cursor:pointer;list-style:none;padding:1.15rem clamp(1.1rem,3vw,1.6rem);font-family:var(--fd);font-weight:700;font-size:clamp(1rem,2.8vw,1.16rem);letter-spacing:-.02em;display:flex;align-items:center;gap:1rem;min-height:56px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";margin-left:auto;font-size:1.5rem;font-weight:400;color:var(--ink-3);flex:none;transition:transform .2s}
.qa[open] summary::after{transform:rotate(45deg)}
.qa-b{padding:0 clamp(1.1rem,3vw,1.6rem) 1.4rem}
.qa-b p{color:var(--ink-2);font-size:.99rem;max-width:64ch}

/* quote form */
.qf{background:var(--card);border-radius:var(--r-l);padding:clamp(1.35rem,4.5vw,2.5rem);display:grid;gap:1.15rem;box-shadow:0 24px 60px -30px rgba(20,30,51,.42)}
.qf fieldset{border:0;margin:0;padding:0}
.qf legend,.f label{font-family:var(--fd);font-weight:700;font-size:1rem;margin-bottom:.6rem;display:block}
.qf b{color:var(--warm)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips label{position:relative;display:inline-flex}
.chips input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.chips span{display:inline-flex;align-items:center;min-height:48px;padding:.6rem 1.15rem;border:1.5px solid var(--line);border-radius:100px;font-size:1rem;font-weight:600;transition:.15s}
.chips input:checked+span{background:var(--ink);color:#fff;border-color:var(--ink)}
.chips input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
.f{margin:0}
.qf-2{display:grid;gap:1.15rem}
@media (min-width:560px){.qf-2{grid-template-columns:1fr 1fr}}
.qf input[type=text],.qf input[type=tel],.qf textarea{width:100%;font:inherit;font-size:16px;padding:.9rem 1.05rem;border:1.5px solid var(--line);border-radius:var(--r-s);background:#fff;color:var(--ink);min-height:52px}
.qf textarea{resize:vertical;min-height:96px}
.qf input:focus,.qf textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,70,196,.15)}
.err{display:block;color:var(--warm);font-size:.85rem;margin-top:.4rem;min-height:1em}
.hp{display:none}
/* The wrapper clips the honeypot visually, but the input keeps its own
   default box (153x21) and is still measured as an undersized tap target.
   Collapsing the input itself keeps it fillable by bots and unmeasurable
   as a control a person could reach. */
.fine{font-size:.82rem;color:var(--ink-3);text-align:center;line-height:1.5}
.fine a{color:var(--blue);font-weight:600;text-decoration:underline}
.qf-ok{display:none;text-align:center;padding:1rem 0}
.qf.sent .qf-ok{display:block}
.qf.sent>*:not(.qf-ok){display:none}
.qf-ok h3{font-size:1.5rem;margin-bottom:.6rem}
.qf-ok p{color:var(--ink-2);margin-bottom:1.25rem}

/* footer */
.foot{background:var(--ink);color:#fff;padding-block:clamp(2.5rem,7vw,4rem) 0;margin-top:var(--gap)}
.foot .nav-brand i{color:rgba(255,255,255,.55)}
.foot-in{display:grid;gap:2.25rem}
@media (min-width:760px){.foot-in{grid-template-columns:2fr 1fr 1fr;gap:3rem}}
.foot-t{margin-top:1rem;color:rgba(255,255,255,.68);font-size:.95rem;max-width:38ch}
.foot-h{font-family:var(--fm);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:.9rem}
.foot li{margin-bottom:.2rem}
.foot li a{min-height:44px;display:inline-flex;align-items:center;color:rgba(255,255,255,.88)}
.foot-h a{min-height:44px;display:inline-flex;align-items:center;color:inherit}
.foot li a:hover{color:#fff}
.foot li:not(:has(a)){color:rgba(255,255,255,.68);padding-block:.55rem}
.foot-b{margin-top:2.5rem;padding-block:1.5rem;border-top:1px solid rgba(255,255,255,.14);font-size:.82rem;color:rgba(255,255,255,.5)}

/* sticky mobile bar */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:44;display:flex;gap:1px;background:var(--line);box-shadow:0 -3px 22px rgba(20,30,51,.18);padding-bottom:env(safe-area-inset-bottom,0)}
.bar a{flex:1;min-height:58px;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--fd);font-weight:700;background:var(--ink);color:#fff}
.bar-wa{background:#22C15E!important;color:#06301A!important}
.bar a:active{filter:brightness(.94)}
@media (min-width:900px){.bar{display:none}}
body{padding-bottom:58px}
@media (min-width:900px){body{padding-bottom:0}}

/* reveals */
[data-r]{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
[data-r].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-r]{opacity:1!important;transform:none!important;transition:none}}
html:not(.js) [data-r]{opacity:1;transform:none}

/* inline links inside fine print still need a real tap target */
.fine a{display:inline-flex;align-items:center;min-height:44px}

/* ── before / after comparison sliders ─────────────────────────────────────
   Base layer is "después"; "antes" sits on top, clipped to --ba-pos. The drag
   surface is a real range input, so keyboard and assistive tech work without
   custom key handling. Images are illustrations — see the notice in the DOM. */
.ba{display:grid;gap:1.15rem}
@media (min-width:680px){.ba{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.ba{grid-template-columns:repeat(3,1fr)}}
.ba-c{margin:0;background:var(--card);border-radius:var(--r-l);overflow:hidden;box-shadow:0 1px 2px rgba(20,30,51,.05),0 12px 34px -18px rgba(20,30,51,.28)}
.ba-f{--ba-pos:50%;position:relative;aspect-ratio:800/888;overflow:hidden;background:#E7EBF2;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ba-l{position:absolute;inset:0}
.ba-l img{width:100%;height:100%;object-fit:cover}
.ba-l-b{clip-path:inset(0 calc(100% - var(--ba-pos)) 0 0)}
.ba-t{position:absolute;top:.75rem;z-index:3;padding:.28rem .62rem;border-radius:999px;font-family:var(--fm);font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(20,30,51,.72);pointer-events:none;transition:opacity .2s ease}
.ba-t-b{left:.75rem}
.ba-t-a{right:.75rem;background:rgba(29,70,196,.85)}
.ba-f[data-pos="0"] .ba-t-b,.ba-f[data-pos="100"] .ba-t-a{opacity:0}
.ba-d{position:absolute;top:0;bottom:0;left:var(--ba-pos);z-index:4;width:2px;margin-left:-1px;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(20,30,51,.18);pointer-events:none}
.ba-h{position:absolute;top:50%;left:50%;width:46px;height:46px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;box-shadow:0 6px 18px -6px rgba(20,30,51,.55),0 0 0 1px rgba(20,30,51,.1);display:grid;place-items:center;color:var(--blue);font-size:.85rem;line-height:1;letter-spacing:-.12em;transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s ease}
.ba-f:hover .ba-h{transform:translate(-50%,-50%) scale(1.06)}
.ba-r:active~.ba-d .ba-h{transform:translate(-50%,-50%) scale(.94)}
.ba-r:focus-visible~.ba-d .ba-h{box-shadow:0 6px 18px -6px rgba(20,30,51,.55),0 0 0 3px var(--blue)}
.ba-r{position:absolute;inset:0;z-index:5;width:100%;height:100%;margin:0;padding:0;opacity:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize;touch-action:pan-y}
.ba-r:focus{outline:none}
.ba-r::-webkit-slider-thumb{-webkit-appearance:none;width:1px;height:100%;background:transparent;border:0}
.ba-r::-moz-range-thumb{width:1px;height:100%;background:transparent;border:0}
.ba-r::-moz-range-track{background:transparent;border:0}
.ba-cap{padding:.95rem 1.1rem 1.15rem;border-top:1px solid var(--line)}
.ba-cap strong{display:block;font-family:var(--fd);font-size:1rem;letter-spacing:-.01em}
.ba-cap span{display:block;margin-top:.25rem;font-size:.84rem;line-height:1.45;color:var(--ink-2)}
.ba-note{margin-top:1.8rem;padding:.85rem 1.1rem;border:1px dashed var(--line);border-radius:var(--r-s);color:var(--ink-2);font-size:.8rem;line-height:1.5;text-align:center}
@media (prefers-reduced-motion:reduce){.ba-f:hover .ba-h{transform:translate(-50%,-50%)}.ba-h{transition:none}}

/* ── interior pages (services / service areas) ─────────────────────────── */
.crumb{font-family:var(--fm);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1.4rem}
.crumb a{color:var(--blue-d);font-weight:700}
.crumb span[aria-hidden]{margin:0 .45rem;opacity:.5}
.pg-h{font-size:clamp(1.35rem,3.2vw,1.9rem);margin:2.4rem 0 .85rem;max-width:26ch}
.pg-p{max-width:68ch;margin-bottom:1rem;font-size:clamp(1rem,.97rem + .35vw,1.12rem);color:var(--ink-2);line-height:1.65}
.pg-p a{color:var(--blue-d);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.pg-ul{max-width:68ch;margin:0 0 1.2rem;padding-left:1.15rem;list-style:disc}
.pg-ul li{margin-bottom:.5rem;color:var(--ink-2);line-height:1.6}
.pg-ul a{color:var(--blue-d);font-weight:600}
.pg-q{max-width:68ch;margin:1.6rem 0;padding:1.15rem 1.35rem;background:var(--card);border-radius:var(--r-m);border-left:3px solid var(--blue);box-shadow:0 1px 2px rgba(20,30,51,.05)}
.pg-q p{font-size:1rem;line-height:1.6;color:var(--ink)}
.pg-q footer{margin-top:.7rem;font-size:.82rem;color:var(--ink-3);font-weight:600}
.pg-q footer span[aria-hidden]{color:#E8A33D;letter-spacing:.05em}
.pg-q-src{font-weight:400}
.pg-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.4rem}
.svc-more{display:inline-flex;align-items:center;min-height:44px;margin-top:.35rem;font-size:.85rem;font-weight:600;color:var(--blue-d);text-decoration:underline;text-underline-offset:2px}
.pg-fig{margin:0 0 1.8rem;border-radius:var(--r-l);overflow:hidden;box-shadow:0 1px 2px rgba(20,30,51,.05),0 12px 34px -18px rgba(20,30,51,.28)}
.pg-fig img{width:100%;height:auto;display:block}
.pg-lang{margin-bottom:1.1rem;font-size:.85rem}
.pg-lang a{color:var(--blue-d);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.hub-list{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
@media (min-width:680px){.hub-list{grid-template-columns:1fr 1fr}}
.hub-list li{background:var(--card);border-radius:var(--r-l);padding:1.15rem 1.35rem;box-shadow:0 1px 2px rgba(20,30,51,.05),0 12px 34px -18px rgba(20,30,51,.28)}
.hub-list a{font-family:var(--fd);font-size:1.05rem;color:var(--ink);text-decoration:none}
.hub-list a:hover strong{text-decoration:underline;text-underline-offset:3px}
.hub-list span{display:block;margin-top:.3rem;font-size:.88rem;line-height:1.5;color:var(--ink-2)}

/* Per-town links sit inline in a sentence, so their natural hit area is the
   text height (~20px). The mobile contract floor is 44px, and these are a
   real navigation path on a phone. Inline-block with vertical padding gives
   a full-size target while the sentence still reads as a sentence. */
.town-links a{display:inline-block;min-height:44px;line-height:44px;padding:0 .35rem}

/* Reduced motion is a stated preference, not a hint. The per-component
   blocks above each disabled their own effect and still left 56 active
   durations site-wide, so this covers everything that animates. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}