/* ==========================================================================
   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:16px;
  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}}

/* Shared navigation: the language choice remains visible at every width. */
.nav{gap:.5rem;flex-wrap:wrap}
.nav-brand{min-width:0;flex:1;gap:.35rem}
.nav-brand span{max-width:125px}
.nav-brand i{font-size:.53rem;line-height:1.35;letter-spacing:.03em}
.language-switch{display:flex;flex:none;border:1px solid var(--line);border-radius:100px;padding:2px;background:#fff;gap:0}
.language-switch a{display:grid;place-items:center;min-width:44px;min-height:44px;border-radius:100px;font:700 .8rem var(--fm);color:var(--ink-2)}
.language-switch a[aria-current=page]{background:var(--ink);color:#fff}
.burger{margin-left:0;flex:none}
.menu{overflow-y:auto;justify-content:flex-start;padding-top:7rem;padding-bottom:7rem}
.menu a{font-size:clamp(1.35rem,5vw,2rem)}
.form-status:empty{display:none}
.form-status{padding:1rem;border:1px solid currentColor;border-radius:12px;color:#8c2215;background:#fff4ef}
.qf[aria-busy=true] button[type=submit]{opacity:.7;cursor:wait}
.process-panel{display:flex;flex-direction:column;justify-content:space-between;gap:3rem;padding:2rem;background:#173b77;color:#fff;min-height:350px}
.process-panel span{font:700 1rem var(--fm);letter-spacing:.1em}
.process-panel b{font:700 clamp(2.5rem,6vw,4.5rem)/1.05 var(--fd)}
.privacy-links{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;padding-bottom:1.5rem}
.privacy-links a,.privacy-links button{min-height:44px;display:inline-flex;align-items:center;color:inherit;background:none;border:0;font:inherit;text-decoration:underline}
@media(min-width:1100px){.nav{flex-wrap:nowrap}.nav-brand{flex:none}.nav-links{display:flex;gap:1.2rem;margin-left:auto;font-size:.9rem}.language-switch{margin-left:auto}.nav-act{display:flex;margin-left:0}.burger{display:none}}
@media(min-width:900px) and (max-width:1099px){.nav-links,.nav-act{display:none}.burger{display:grid}.menu{display:flex}}
.analytics-dialog{width:min(92vw,480px);max-height:85svh;overflow:auto;padding:1.5rem;border:1px solid var(--line);border-radius:20px;background:#fff;color:var(--ink);margin:auto}
.analytics-dialog::backdrop{background:rgba(15,25,45,.5)}
.analytics-dialog h2{font-size:1.5rem;margin-bottom:1rem}
.analytics-dialog p{margin:.8rem 0}
.analytics-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.analytics-actions button{flex:1;min-height:48px;padding:.75rem;border:1px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink);font:600 1rem var(--fb)}
.analytics-actions button:disabled{opacity:.5}

.privacy-copy{max-width:800px}.privacy-copy h2{font-size:1.7rem;margin:2rem 0 1rem}.privacy-copy p{margin:1rem 0;line-height:1.7}

.review-original summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:.8rem;line-height:1.4;text-decoration:underline}.review-original p{font-size:.9rem;margin:.75rem 0}.pg-fig figcaption{font-size:.8rem;padding:.5rem;background:#fff;color:var(--ink-2)}

/* Keep fluid headline and button metrics on whole pixels for stable rendering. */
.hero-h{line-height:round(1.02em,1px)}
.hero-p,.kicker{line-height:round(1.6em,1px)}
.btn{line-height:round(1.6em,1px)}
.footer-privacy{display:flex;flex-wrap:wrap;gap:1rem;padding-block:1rem}
.footer-privacy a,.footer-privacy button{display:inline-flex;align-items:center;min-height:44px;font:inherit;color:inherit;background:none;border:0;text-decoration:underline}
.image-disclosure{font-size:.85rem;color:var(--ink-2);margin-bottom:1rem}
/* Give rounded action backgrounds a stable paint layer at fractional sizes. */
.btn{transform:translateZ(0)}
@media(prefers-reduced-motion:reduce){.btn:active{transform:translateZ(0)}}

/* THE COOKIE CARD (owner, 2026-09-24: "if legally u need to have a popup then it needs to be subtle not in ur face (that's
   a rule across everything, that you must implement)"): a strip along the bottom of a phone, a 340px card in the
   bottom-left corner from 640px; never over the middle, nothing laid over the page; the two answers one style and one
   size, each at least 44px tall. analytics.js lifts it above a fixed call/quote bar. */
.analytics-dialog{position:fixed;inset:auto 8px calc(8px + env(safe-area-inset-bottom,0px)) 8px;margin:0;z-index:70;width:auto;max-width:none;max-height:45dvh;overflow:auto;padding:10px 12px;border:1px solid rgba(0,0,0,.16);border-radius:10px;background:#fff;color:#111;box-shadow:0 4px 18px rgba(0,0,0,.14);font-size:13px;line-height:1.45}
.analytics-dialog::backdrop{background:transparent}
.analytics-dialog .analytics-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.analytics-dialog p,.analytics-dialog p:last-child{position:static;margin:0 0 8px;max-width:none;font-size:13px;line-height:1.45;color:inherit}
.analytics-dialog a{display:inline;min-height:0;font-size:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px}
.analytics-dialog .analytics-actions{display:flex;flex-wrap:nowrap;gap:8px;max-width:none}
.analytics-dialog .analytics-actions button,.analytics-dialog .analytics-actions [data-choice=granted]{flex:1 1 0;min-width:0;min-height:44px;padding:0 12px;border:1px solid currentColor;border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:13px;font-weight:650;line-height:1.2}
@media(min-width:640px){.analytics-dialog{inset:auto auto 16px 16px;width:340px}}