/* ============================================================
   SELF-HOSTED FONTS

   Was: two render-blocking stylesheets on fonts.googleapis.com,
   pulling seven font files from a second origin (fonts.gstatic.com).
   That is a DNS lookup, a TLS handshake and a blocking CSS round trip
   on every page, before a single character can paint.

   Now: two variable woff2 files on our own origin, preloaded.
   Latin subset only. Italic dropped — the site never used it.
   Variable rather than static because the estimator legitimately
   renders Lexend at 400, 600, 700 and 900; three static files would
   cost more bytes and more requests than one variable file.
   ============================================================ */
@font-face{
  font-family:"Lexend";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/lexend-var.woff2") format("woff2-variations");
}
@font-face{
  font-family:"Source Sans 3";
  font-style:normal;
  font-weight:200 900;
  font-display:swap;
  src:url("fonts/source-sans-3-var.woff2") format("woff2-variations");
}

/* ===========================================================
   HOUSEWARM CLEANING CO. — DESIGN SYSTEM  (cyan edition)
   Palette : UI-Pro-Max row 8/25 cyan family + row 55 orange CTA
             every value below verified against WCAG before use:
             cyan-700  5.36:1 on white  -> text + button fills
             cyan-600  3.68:1           -> icons, borders, large display only
             cyan-500/400               -> glow + highlight only, never text
             orange-700 5.18:1          -> CTA fill (orange-600 failed at 3.56)
   Type    : pairing 16 "Corporate Trust" — Lexend + Source Sans 3
   Light by default. Dark theme at the bottom of this file.
   =========================================================== */

:root{
  color-scheme: light;

  /* cyan ladder */
  --cyan-900:#164E63;
  --cyan-800:#155E75;
  --cyan-700:#0E7490;
  --cyan-600:#0891B2;
  --cyan-500:#06B6D4;
  --cyan-400:#22D3EE;
  --cyan-200:#A5F3FC;
  --cyan-100:#CFFAFE;
  --cyan-50:#ECFEFF;

  /* semantic tokens */
  --primary:#0E7490;          /* text-safe cyan  5.36:1 */
  --primary-bright:#0891B2;   /* UI / icons / large only */
  --primary-deep:#155E75;
  --on-primary:#FFFFFF;
  --secondary:#06B6D4;
  --secondary-soft:#CFFAFE;

  --accent:#C2410C;           /* CTA fill 5.18:1 with white */
  --accent-bright:#EA580C;    /* hover + glow */
  --on-accent:#FFFFFF;
  --accent-soft:#FFF1E7;
  --accent-700:#9A3412;       /* was USED but never defined — icons/hover inherited body colour */

  --bg:#ECFEFF;               /* cyan-50, spotless ground */
  --bg-2:#FFFFFF;
  --card:#FFFFFF;
  --sunk:#F6FEFF;

  --fg:#0B2E38;               /* cyan-tinted near-black 14.36:1 */
  --fg-brand:#164E63;         /* headings 9.11:1 */
  --muted:#4A6675;            /* cyan-leaning grey 6.09:1 */
  --border:#A5F3FC;
  --border-soft:#DCF7FC;
  --ring:#0891B2;

  /* surfaces that used to be hardcoded — needed as tokens so a theme can move them */
  --hdr-bg:rgba(236,254,255,.88);
  --ftr-a:#164E63; --ftr-b:#0A3040;
  --hero-wash:rgba(34,211,238,.20);
  --icon-bg:linear-gradient(155deg,var(--cyan-100) 0%,var(--cyan-50) 100%);
  --icon-ring:rgba(8,145,178,.14);
  --inset-hi:#FFFFFF;
  --rule:rgba(165,243,252,.22);
  --focus-halo:rgba(34,211,238,.28);
  --shade:rgba(11,46,56,.3);
  --logo-hi:#0F7F9E; --logo-lo:#164E63; --logo-mark:#FFFFFF; --logo-shade:#03323F;
  --art-filter:none;
  --surface-tint:#CFFAFE;     /* tinted bands and panels — NOT the raw ladder, */
  --surface-tint-2:#ECFEFF;   /* because the ladder must stay fixed for glows  */
  --edge:#A5F3FC;
  --on-danger:#FFFFFF;

  --good:#0F766E;
  --good-soft:#E4F5F3;
  --danger:#DC2626;

  /* elevation — cyan-tinted shadow with a light inset highlight on top */
  --e1:0 1px 2px rgba(11,46,56,.05), inset 0 1px 0 rgba(255,255,255,.8);
  --e2:0 2px 4px rgba(11,46,56,.045), 0 10px 26px -14px rgba(8,145,178,.35), inset 0 1px 0 rgba(255,255,255,.9);
  --e3:0 4px 10px rgba(11,46,56,.05), 0 30px 60px -28px rgba(8,145,178,.45), inset 0 1px 0 #FFFFFF;
  --glow-cta:0 8px 22px -8px rgba(234,88,12,.5);
  --glow-cyan:0 8px 22px -8px rgba(8,145,178,.45);
  --sheen:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 58%);

  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px; --r-full:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:88px;
  --t-xs:14px; --t-sm:16px; --t-base:18px; --t-md:21px;
  --t-lg:26px; --t-xl:34px; --t-2xl:46px; --t-3xl:60px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--t-base);line-height:1.62;
  -webkit-font-smoothing:antialiased;
  padding-bottom:76px;              /* clears the mobile call bar */
}
@media(min-width:900px){body{padding-bottom:0}}

h1,h2,h3,h4{
  font-family:Lexend,system-ui,sans-serif;font-weight:600;margin:0;
  color:var(--fg-brand);line-height:1.12;text-wrap:balance;letter-spacing:-.02em;
}
h1{font-size:clamp(38px,6.6vw,var(--t-3xl))}
h2{font-size:clamp(29px,4.2vw,var(--t-2xl));letter-spacing:-.018em}
h3{font-size:var(--t-md);letter-spacing:-.01em}
p{margin:0}
a{color:var(--primary);text-underline-offset:3px}
img,svg{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:var(--r-sm);
  box-shadow:0 0 0 7px var(--focus-halo)}
::selection{background:var(--secondary-soft);color:var(--fg-brand)}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--s5)}
.narrow{max-width:760px;margin-inline:auto}
.eyebrow{
  font-family:Lexend,sans-serif;font-size:var(--t-xs);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--primary);margin:0 0 var(--s3);
}
.lede{font-size:clamp(19px,2.2vw,23px);color:var(--muted);line-height:1.55;max-width:58ch}

/* the local paragraph on a town page — real page content, not a callout */
.local{margin-top:var(--s6);max-width:66ch;position:relative;padding-left:var(--s5)}
.local::before{
  content:"";position:absolute;left:0;top:.4em;bottom:.4em;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--cyan-400) 0%,var(--cyan-600) 55%,rgba(8,145,178,0) 100%);
}
.local p{font-size:var(--t-base);line-height:1.65;color:var(--fg)}
.local p+p{margin-top:var(--s4)}
@media (max-width:640px){.local{padding-left:var(--s4)}}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a.sr:focus{
  position:fixed;top:12px;left:12px;z-index:100;width:auto;height:auto;clip:auto;
  min-height:52px;display:inline-flex;align-items:center;padding:14px 22px;
  background:var(--primary);color:var(--on-primary);border-radius:var(--r);
  font-family:Lexend,sans-serif;font-weight:600;text-decoration:none;box-shadow:var(--e3);
}

/* build-time markers — impossible to ship by accident */
.todo{
  display:inline;background:var(--danger);color:var(--on-danger);font-weight:700;font-size:14px;
  letter-spacing:.05em;padding:2px 8px;border-radius:5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:15px 26px;border-radius:var(--r-full);
  font-family:Lexend,sans-serif;font-size:17px;font-weight:600;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;border:2px solid transparent;
  transition:background-color .18s ease-out, border-color .18s ease-out, box-shadow .18s ease-out, color .18s ease-out;
  touch-action:manipulation;
}
.btn svg{flex:0 0 auto}
.btn--call{background-color:var(--accent);background-image:var(--sheen);color:var(--on-accent);
  border-color:var(--accent);box-shadow:var(--e2),var(--glow-cta)}
.btn--call:hover{background-color:var(--accent-bright);border-color:var(--accent-bright)}
.btn--primary{background-color:var(--primary);background-image:var(--sheen);color:var(--on-primary);
  border-color:var(--primary);box-shadow:var(--e2),var(--glow-cyan)}
.btn--primary:hover{background-color:var(--primary-bright);border-color:var(--primary-bright)}
.btn--ghost{background:var(--card);color:var(--fg-brand);border-color:var(--border)}
.btn--ghost:hover{border-color:var(--primary);color:var(--primary)}
.btn--sm{min-height:48px;padding:11px 20px;font-size:16px}
.btn--block{width:100%}

/* ---------------- header ---------------- */
.hdr{
  position:sticky;top:0;z-index:50;background:var(--hdr-bg);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,var(--edge) 22%,var(--edge) 78%,transparent) 1;
}
.hdr__in{display:flex;align-items:center;justify-content:flex-start;gap:var(--s4);min-height:74px}
/* space-between left the toggle floating mid-header once the nav hid below
   900px. Keep the toggle and the call button together on the right instead. */
.hdr__in > .nav{margin-inline:auto}
.hdr__in > .themetog{margin-left:auto}
.hdr__in > .btn--call{margin-left:10px}
.brand{display:flex;align-items:center;gap:10px;min-height:48px;text-decoration:none;
  font-family:Lexend,sans-serif;font-size:22.5px;font-weight:700;color:var(--fg-brand);letter-spacing:-.03em}
.brand svg{width:30px;height:30px;flex:0 0 30px}
/* the disc is one colour lit from the upper left, not two colours:
   #0F7F9E -> #164E63 straddles the original #0E7490, which sits at their midpoint. */
.brand .lg-disc{fill:url(#hwg)}
.brand .lg-mark{fill:var(--logo-mark)}
.brand .hwg-a{stop-color:var(--logo-hi)}
.brand .hwg-b{stop-color:var(--logo-lo)}
.brand feDropShadow{flood-color:var(--logo-shade);flood-opacity:.45}
/* the footer is dark cyan in BOTH themes, so its mark never inverts */
.ftr .brand .lg-disc{fill:#FFFFFF}
.ftr .brand .lg-mark{fill:#0E7490}
/* the filter lives in the header svg's defs and is shared document-wide, so it cannot be
   re-tinted per context. On the white footer disc the cyan mark already separates cleanly,
   so the footer simply opts out (CSS beats the presentation attribute). */
.ftr .brand .lg-mark{filter:none}
.hero__art svg{filter:var(--art-filter)}
.nav{display:none;gap:var(--s5);align-items:center}
.nav a{font-size:15.5px;font-weight:500;color:var(--nav,var(--muted));text-decoration:none;font-family:Lexend,sans-serif;
  display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--primary)}
@media(min-width:1000px){.nav{display:flex}}

/* mobile one-tap call bar */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  background-color:var(--accent);background-image:var(--sheen);color:var(--on-accent);text-decoration:none;
  font-family:Lexend,sans-serif;font-size:16px;font-weight:700;
  box-shadow:0 -8px 24px -14px rgba(15,23,42,.5);touch-action:manipulation;
  /* One line, always. It is a fixed bar at the bottom of a phone: a second
     line eats content and looks like a mistake. The label shrinks to fit
     rather than wrapping, and Spanish starts a step smaller because it is a
     longer sentence saying the same thing. */
  white-space:nowrap;
}
.callbar svg{flex:0 0 auto;width:19px;height:19px}
html[lang="es"] .callbar{font-size:15px;gap:8px}
@media(max-width:380px){
  .callbar{font-size:14.5px;min-height:50px}
  html[lang="es"] .callbar{font-size:13.5px}
}
@media(min-width:900px){.callbar{display:none}}
/* Below 900px the sticky call bar is on screen at all times, so the header's
   call button is a duplicate — and once the theme toggle joined the header it
   squeezed that button until the PHONE marker wrapped one letter per line.
   Drop it on small screens; the bar below is the bigger tap target anyway. */
@media(max-width:899px){.hdr .btn--call{display:none}}

/* ---------------- sections ---------------- */
.sec{padding:var(--s9) 0}
.sec--tight{padding:var(--s8) 0}
.sec--white{background:var(--bg-2)}
.sec--tint{background:linear-gradient(180deg,var(--surface-tint) 0%, var(--bg) 100%)}
.sec__head{max-width:62ch;margin-bottom:var(--s6)}
.sec__head p{margin-top:var(--s4);color:var(--muted);font-size:var(--t-md);line-height:1.55}

/* ---------------- hero ---------------- */
.hero{padding:var(--s8) 0 var(--s9);position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-30% -10% auto 30%;height:120%;pointer-events:none;
  background:radial-gradient(58% 52% at 60% 32%, var(--hero-wash) 0%, transparent 68%);
}
.hero > *{position:relative}
.hero__grid{display:grid;gap:var(--s7);align-items:center}
@media(min-width:1000px){.hero__grid{grid-template-columns:1.05fr .95fr;gap:var(--s8)}}
.hero p.lede{margin-top:var(--s5)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.hero__art{position:relative}
.hero__art svg{width:100%;height:auto;border-radius:var(--r-xl);box-shadow:var(--e3)}

.badges{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s6);
  padding-top:var(--s5);border-top:1px solid var(--border)}
.badges span{display:inline-flex;align-items:center;gap:9px;font-size:16px;font-weight:600;color:var(--fg-brand)}
.badges svg{width:20px;height:20px;color:var(--good);flex:0 0 20px}

/* ---------------- cards / bento ---------------- */
.grid{display:grid;gap:var(--s4)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.card{
  background:var(--card);border:1px solid var(--border-soft);border-radius:var(--r-lg);
  padding:var(--s5);box-shadow:var(--e1);
  transition:box-shadow .2s ease-out, border-color .2s ease-out;
}
.card:hover{box-shadow:var(--e2);border-color:var(--edge)}
.card--lift{box-shadow:var(--e2)}
.card h3{margin-bottom:var(--s3)}
.card p{color:var(--muted);font-size:17px;line-height:1.55}
.card__icon{
  width:52px;height:52px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;
  background:var(--icon-bg);
  color:var(--primary);margin-bottom:var(--s4);
  box-shadow:inset 0 1px 0 var(--inset-hi), 0 1px 2px var(--icon-ring);
}
.card__icon svg{width:27px;height:27px}
.card__icon--accent{background:var(--accent-soft);color:var(--accent-700)}

/* checklist */
.check{list-style:none;margin:var(--s4) 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.check li{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start;font-size:17px;line-height:1.5}
.check svg{width:20px;height:20px;color:var(--good);margin-top:4px}

/* steps */
.steps{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(270px,1fr));margin-top:var(--s6)}
.step{background:var(--card);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--e1)}
.step__n{
  width:44px;height:44px;border-radius:var(--r-full); background:linear-gradient(160deg,var(--cyan-600),var(--cyan-800));color:var(--on-primary);
  box-shadow:var(--glow-cyan), inset 0 1px 0 rgba(255,255,255,.35);
  font-family:Lexend,sans-serif;font-weight:700;font-size:19px;
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--s4);
}

/* promises */
.promise{display:grid;gap:var(--s2) var(--s5);padding:var(--s5) 0;border-bottom:1px solid var(--border-soft)}
@media(min-width:820px){.promise{grid-template-columns:270px minmax(0,1fr);align-items:start}}
.promise h3{font-size:var(--t-base);font-family:Lexend,sans-serif}
.promise p{color:var(--muted);font-size:17px;max-width:62ch}

/* callouts */
.note{border:1px solid var(--border);border-left:5px solid var(--primary);background:var(--card);
  border-radius:var(--r);padding:var(--s5);margin-top:var(--s5);max-width:74ch;box-shadow:var(--e1)}
.note--good{border-left-color:var(--good);background:var(--good-soft)}
.note--accent{border-left-color:var(--accent);background:var(--accent-soft)}
.note strong{color:var(--fg-brand)}
.note p{font-size:17px;color:var(--fg)}
.note p+p{margin-top:var(--s3)}

/* ---------------- estimator ---------------- */
.est{display:grid;gap:var(--s5);margin-top:var(--s6)}
@media(min-width:960px){.est{grid-template-columns:minmax(0,1fr) 380px;align-items:start}}
.panel{background:var(--card);border:1px solid var(--border-soft);border-radius:var(--r-xl);
  box-shadow:var(--e2);overflow:hidden}
.panel__b{padding:var(--s5)}
.fld{padding:var(--s5) 0;border-bottom:1px solid var(--border-soft)}
.fld:first-child{padding-top:var(--s1)}
.fld:last-child{border-bottom:none;padding-bottom:var(--s1)}
.fld__l{display:block;font-family:Lexend,sans-serif;font-weight:600;font-size:19px;
  color:var(--fg-brand);margin-bottom:var(--s3)}
.hint{font-size:16px;color:var(--muted);margin-top:var(--s3);line-height:1.5}

.seg{display:flex;flex-wrap:wrap;gap:var(--s2)}
.seg button{
  font-family:Lexend,sans-serif;font-size:16px;font-weight:600;min-height:50px;padding:12px 19px;
  border:2px solid var(--border);background:var(--card);color:var(--muted);
  border-radius:var(--r-full);cursor:pointer;touch-action:manipulation;
  transition:background-color .16s,border-color .16s,color .16s;
}
.seg button:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}
.seg button[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.seg button:disabled{opacity:.4;cursor:not-allowed}

.stepper{display:flex;align-items:center;border:2px solid var(--border);border-radius:var(--r-full);
  width:max-content;overflow:hidden;background:var(--card)}
.stepper button{width:56px;height:52px;border:0;background:transparent;color:var(--primary);
  font-size:26px;line-height:1;cursor:pointer;touch-action:manipulation;font-family:Lexend,sans-serif}
.stepper button:hover{background:var(--secondary-soft)}
.stepper .v{min-width:64px;height:52px;display:flex;align-items:center;justify-content:center;
  font-family:Lexend,sans-serif;font-weight:700;font-size:21px;color:var(--fg-brand);
  font-variant-numeric:tabular-nums;background:var(--sunk);
  border-left:2px solid var(--border);border-right:2px solid var(--border)}

input[type=range]{
  width:100%;height:48px;cursor:pointer;-webkit-appearance:none;appearance:none;background:transparent;
}
input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:var(--r-full);
  background:linear-gradient(180deg,var(--surface-tint),var(--surface-tint-2));border:1px solid var(--edge)}
input[type=range]::-moz-range-track{height:10px;border-radius:var(--r-full);
  background:linear-gradient(180deg,var(--surface-tint),var(--surface-tint-2));border:1px solid var(--edge)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:34px;height:34px;margin-top:-13px;border-radius:var(--r-full);
  background:linear-gradient(160deg,var(--cyan-600),var(--cyan-800));border:4px solid #fff;
  box-shadow:var(--glow-cyan),0 1px 3px var(--shade);cursor:grab}
input[type=range]::-moz-range-thumb{width:34px;height:34px;border-radius:var(--r-full);
  background:linear-gradient(160deg,var(--cyan-600),var(--cyan-800));border:4px solid #fff;
  box-shadow:var(--glow-cyan),0 1px 3px var(--shade);cursor:grab}

/* quote readout */
.quote{position:sticky;top:92px}
.quote__top{
  padding:var(--s5);position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(158deg,var(--cyan-700) 0%,var(--cyan-800) 55%,var(--cyan-900) 100%);
}
.quote__top::after{
  content:"";position:absolute;inset:-60% -20% auto -20%;height:150%;pointer-events:none;
  background:radial-gradient(46% 58% at 24% 10%, rgba(207,250,254,.16) 0%, rgba(207,250,254,0) 72%);
}
.quote__top > *{position:relative}
.quote__top .eyebrow{color:#FFFFFF;opacity:.92}
.quote__num{display:block;font-family:Lexend,sans-serif;font-size:58px;font-weight:700;
  letter-spacing:-.04em;line-height:1;margin:var(--s2) 0 var(--s2);font-variant-numeric:tabular-nums}
.quote__cad{font-size:17px;color:#FFFFFF;opacity:.95}
.quote__rows{padding:var(--s4) var(--s5) 0}
.qrow{display:flex;justify-content:space-between;gap:var(--s4);padding:9px 0;font-size:17px;color:var(--muted)}
.qrow b{color:var(--fg-brand);font-variant-numeric:tabular-nums}
/* <strong> inherits UA 'bolder'; inside a 700 label that resolves to 900 */
.fld__l strong{font-weight:700}
.opt{font-weight:400;color:var(--muted);font-size:14px;letter-spacing:0;text-transform:none}
.quote__foot{padding:var(--s4) var(--s5) var(--s5);display:flex;flex-direction:column;gap:10px}

/* price table */
.tblwrap{overflow-x:auto;border:1px solid var(--border-soft);border-radius:var(--r-lg);
  background:var(--card);margin-top:var(--s5);box-shadow:var(--e1)}
table{border-collapse:collapse;width:100%;font-size:17px;min-width:560px}
th,td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--border-soft)}
thead th{font-family:Lexend,sans-serif;font-size:15px;font-weight:600;color:var(--fg-brand);
  background:linear-gradient(180deg,var(--surface-tint),var(--surface-tint-2));border-bottom:2px solid var(--edge)}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;font-family:Lexend,sans-serif;font-weight:600}
tbody tr:nth-child(even){background:var(--sunk)}

/* towns */
.towns{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s5)}
.towns a{background:var(--card);border:2px solid var(--border);border-radius:var(--r-full);
  padding:12px 22px;font-family:Lexend,sans-serif;font-size:17px;font-weight:600;
  text-decoration:none;color:var(--fg-brand);min-height:50px;display:inline-flex;align-items:center;
  transition:border-color .16s,background-color .16s}
.towns a:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-700)}

/* faq */
.faq{margin-top:var(--s5);border-top:1px solid var(--border)}
details{border-bottom:1px solid var(--border)}
summary{cursor:pointer;padding:var(--s5) 46px var(--s5) 0;font-family:Lexend,sans-serif;
  font-weight:600;font-size:20px;color:var(--fg-brand);list-style:none;position:relative;min-height:56px}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:12px;top:50%;width:11px;height:11px;
  border-right:3px solid var(--primary);border-bottom:3px solid var(--primary);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease-out}
details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq__a{padding:0 0 var(--s5);color:var(--muted);font-size:17.5px;max-width:66ch}
.faq__a p+p{margin-top:var(--s3)}

/* form */
.field{display:flex;flex-direction:column;gap:9px;margin-bottom:var(--s4)}
.field label{font-family:Lexend,sans-serif;font-weight:600;font-size:17px;color:var(--fg-brand)}
.field input,.field select,.field textarea{
  font-family:"Source Sans 3",sans-serif;font-size:18px;padding:15px 16px;min-height:56px;
  border:2px solid var(--border);border-radius:var(--r);background:var(--card);color:var(--fg);width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);outline:none}
.field textarea{min-height:110px;resize:vertical}

/* photo slots */
.shots{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(270px,1fr));margin-top:var(--s6)}
.shot{margin:0;aspect-ratio:4/3;border:3px dashed var(--border);border-radius:var(--r-lg);background:var(--card);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);
  text-align:center;padding:var(--s5);color:var(--muted);font-size:16px}
.shot svg{width:44px;height:44px;color:var(--border)}
/* Drop an <img> into a .shot and the placeholder becomes a photo — no other
   edit needed. aspect-ratio is already on .shot, so the space is reserved
   before the image loads and nothing shifts. */
.shot picture{display:block;width:100%;height:100%}
.shot img{display:block;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r-lg) - 3px)}
/* A filled shot holds a before/after pair, and a pair is 3:2 (two 3:4 photos
   side by side). An empty placeholder stays 4:3. */
.shot:has(img){border-style:solid;border-width:1px;padding:0;overflow:hidden;
  aspect-ratio:3/2;position:relative}
/* the placeholder's icon and caption go away once a photo lands, but not the
   BEFORE/AFTER plates, which are also direct children */
.shot:has(img) > svg,.shot:has(img) > span:not(.ba){display:none}
.shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:10px 14px;
  background:linear-gradient(180deg,rgba(11,46,56,0),rgba(11,46,56,.78));
  color:#fff;font-size:14.5px;text-align:left;
}
.shot:has(img){position:relative}

/* footer */
.ftr{background:linear-gradient(170deg,var(--ftr-a) 0%,var(--ftr-b) 100%);color:var(--cyan-100);padding:var(--s8) 0 var(--s6);font-size:17px}
.ftr a{color:var(--cyan-100);text-decoration:none}
.ftr ul a{display:inline-flex;align-items:center;min-height:44px}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr h4{font-family:Lexend,sans-serif;font-size:15px;letter-spacing:.11em;text-transform:uppercase;
  color:#fff;margin:0 0 var(--s4)}
.ftr ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.ftr .brand{color:#fff}
.ftr__legal{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--rule);
  font-size:15.5px;line-height:1.6;color:var(--cyan-200)}
.ftr__legal p+p{margin-top:10px}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}

/* wide-table scroll affordance on small screens */
.tblwrap{position:relative}
@media(max-width:700px){
  .tblwrap::after{
    content:"Swipe the table \2192";
    display:block;padding:10px 18px;font-size:15px;color:var(--muted);
    background:var(--sunk);border-top:1px solid var(--border-soft);
    position:sticky;left:0;
  }
}


/* fine detail: gradient hairlines instead of flat rules */
.badges{border-top:1px solid transparent;
  border-image:linear-gradient(90deg,var(--edge),transparent 82%) 1}
.promise{border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,var(--border-soft),rgba(220,247,252,0) 92%) 1}
.tblwrap::after{background:linear-gradient(180deg,var(--surface-tint-2),var(--sunk))}
.seg button[aria-pressed="true"]{
  background-image:var(--sheen);box-shadow:var(--glow-cyan),inset 0 1px 0 rgba(255,255,255,.28)}
.shot{border-color:var(--edge);background:linear-gradient(180deg,var(--card),var(--sunk))}
.shot svg{color:var(--edge)}
.check svg{color:var(--primary-bright)}
.badges svg{color:var(--primary-bright)}


/* ---------------- print ---------------- */
@media print{
  .hdr,.callbar,.btn,.shot,form,.seg,.stepper,input[type=range]{display:none!important}
  body{background:#fff;color:#000;font-size:12pt;padding:0}
  .sec{padding:18pt 0;page-break-inside:avoid}
  h1{font-size:24pt}h2{font-size:17pt}h3{font-size:13pt}
  h1,h2,h3{color:#000}
  .card,.note,.panel{border:1pt solid #999;box-shadow:none;background:#fff}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .ftr{background:#fff;color:#000;border-top:1pt solid #999}
  .ftr a,.ftr h4,.ftr__legal{color:#000}
  .todo{background:#fff;color:#000;border:1pt solid #000}
}
/* ============================================================
   DAY / NIGHT — the after-hours panel on the commercial page.

   Deliberately scoped to ONE panel. It is a "when we come"
   control, not a site theme switch: the page chrome stays light
   because the whole brand premise is spotless white. Every
   colour below is defined for both states and both are
   contrast-checked.
   ============================================================ */
.dn{
  --dn-sky-a:#CFFAFE; --dn-sky-b:#ECFEFF;
  --dn-ink:#0B2E38; --dn-ink-2:#3F5F6C; --dn-eyebrow:#0E7490;
  --dn-panel:rgba(255,255,255,.72); --dn-edge:#A5F3FC;
  --dn-orb:#F59E0B; --dn-orb-glow:rgba(245,158,11,.16);
  --dn-thumb:#0E7490;
  --dn-win:#FDE68A; --dn-bldg:#89DCEB; --dn-bldg-2:#6ECEE0;
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--dn-edge);
  background:linear-gradient(172deg,var(--dn-sky-a) 0%,var(--dn-sky-b) 100%);
  transition:background .7s ease,border-color .7s ease;
}
.dn[data-when="night"]{
  --dn-sky-a:#0A2B3A; --dn-sky-b:#071C27;
  --dn-ink:#EDFBFE; --dn-ink-2:#A9CBD6; --dn-eyebrow:#5FD8F0;
  --dn-panel:rgba(6,32,43,.6); --dn-edge:#12475C;
  --dn-orb:#E8F4FF; --dn-orb-glow:rgba(232,244,255,.13);
  --dn-thumb:#155E75;
  --dn-win:#FFD98A; --dn-bldg:#0E3A4C; --dn-bldg-2:#0B2E3D;
}
.dn__in{position:relative;z-index:2;padding:clamp(22px,4vw,40px);
  padding-bottom:calc(clamp(22px,4vw,40px) + 165px)}
@media (max-width:700px){.dn__in{padding-bottom:calc(22px + 120px)}}
.dn__eyebrow{
  font-family:Lexend,sans-serif;font-size:var(--t-xs);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dn-eyebrow);
  margin:0 0 var(--s3);transition:color .7s ease;
}
.dn h2,.dn h3{color:var(--dn-ink);transition:color .7s ease}
.dn p{color:var(--dn-ink-2);transition:color .7s ease}
.dn__scene{
  position:absolute;inset:auto 0 0 0;height:150px;z-index:1;pointer-events:none;
  opacity:.9;
}
@media (max-width:700px){.dn__scene{height:110px}}
.dn__scene svg{width:100%;height:100%;display:block}
/* The orb lives OUTSIDE the skyline SVG. That SVG uses
   preserveAspectRatio="none" so the buildings stretch to any width — which
   also turned a <circle> into an ellipse and exposed the gradient's bounding
   box. As a CSS element it stays perfectly round and the glow feathers. */
.dn__orb{
  /* anchored to the skyline, not to the panel height, so it never
     drifts into the copy when the text block gets taller */
  position:absolute;z-index:1;right:9%;bottom:96px;width:42px;height:42px;
  border-radius:50%;background:var(--dn-orb);pointer-events:none;
  box-shadow:0 0 0 14px var(--dn-orb-glow), 0 0 46px 18px var(--dn-orb-glow);
  transition:background .7s ease,box-shadow .7s ease,bottom .7s ease;
}
.dn[data-when="night"] .dn__orb{bottom:108px}
@media (max-width:700px){
  .dn__orb{width:30px;height:30px;right:8%;bottom:72px}
  .dn[data-when="night"] .dn__orb{bottom:80px}
}
.dn__bldg{fill:var(--dn-bldg);transition:fill .7s ease}
.dn__bldg2{fill:var(--dn-bldg-2);transition:fill .7s ease}
.dn__win{fill:var(--dn-win);opacity:0;transition:opacity .5s ease}
.dn[data-when="night"] .dn__win{opacity:.95}
.dn[data-when="night"] .dn__win:nth-of-type(2n){transition-delay:.12s}
.dn[data-when="night"] .dn__win:nth-of-type(3n){transition-delay:.22s}

/* the control itself — a two-position slider, built as a radiogroup */
.dnswitch{
  display:inline-flex;position:relative;padding:5px;gap:0;
  background:var(--dn-panel);border:1px solid var(--dn-edge);
  border-radius:999px;backdrop-filter:blur(6px);
  transition:background .7s ease,border-color .7s ease;
}
.dnswitch__thumb{
  position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);
  border-radius:999px;background:var(--dn-thumb);box-shadow:0 8px 22px -8px rgba(8,145,178,.45);
  transition:transform .42s cubic-bezier(.4,0,.2,1),background .42s ease;
}
.dn[data-when="night"] .dnswitch__thumb{transform:translateX(100%)}
.dnswitch button{
  position:relative;z-index:1;flex:1 1 0;min-width:158px;min-height:46px;padding:0 16px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;background:transparent;cursor:pointer;
  font-family:Lexend,sans-serif;font-size:15px;font-weight:600;white-space:nowrap;
  color:var(--dn-ink-2);border-radius:999px;transition:color .3s ease;
}
.dnswitch button[aria-checked="true"]{color:#FFFFFF}
.dnswitch button svg{width:17px;height:17px}
.dnswitch button:focus-visible{outline:2px solid var(--ring);outline-offset:3px}

/* the two copy panels the switch reveals */
.dn__states{margin-top:var(--s6);position:relative}
.dn__state[hidden]{display:none}
.dn__state{max-width:60ch}
.dn__state p+p{margin-top:var(--s4)}

/* the size-band price table */
.bands{width:100%;border-collapse:collapse;margin-top:var(--s5);font-size:17px}
.bands th,.bands td{padding:14px 12px;text-align:left;border-bottom:1px solid var(--border-soft)}
.bands th{
  font-family:Lexend,sans-serif;font-size:var(--t-xs);font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.bands td:last-child,.bands th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.bands td strong{color:var(--fg-brand);font-family:Lexend,sans-serif;font-size:19px}
.bands tr:last-child td{border-bottom:0}
.bands__wrap{overflow-x:auto}
@media (prefers-reduced-motion:reduce){
  .dn,.dn *,.dnswitch__thumb{transition:none !important}
}


/* ============================================================
   DARK THEME

   Three states, not two:
     :root                     -> light, and this is what EVERY visitor gets
     [data-theme="dark"]       -> only ever set by the visitor pressing the
                                  toggle, and remembered from then on

   The device's dark-mode setting is deliberately NOT honoured. On a cleaning
   site the bright version is the pitch, and roughly half of phone users run
   their device dark all the time — they would never see it. The device
   setting is used for one thing only: deciding whether to offer the nudge.

   Only TOKENS are redefined here. No component ever declares a colour
   inside a media or [data-theme] block — that is how you end up with one
   theme's text on the other theme's background.
   ============================================================ */
:root[data-theme="dark"]{
  color-scheme: dark;

  --primary:#43BAD8;          /* text-safe cyan on the dark ground */
  --primary-bright:#6BDCF2;
  --primary-deep:#8FE7F8;
  --on-primary:#04222C;       /* dark ink ON the bright cyan fill */
  --secondary:#22D3EE;
  --secondary-soft:#123A47;

  --accent:#F97C3C;           /* brightened — #C2410C is only 2.55:1 against this ground */
  --accent-bright:#FCA06B;
  --on-accent:#2B0D02;        /* dark ink ON orange; white would be 2.3:1 */
  --accent-soft:#3A1B0C;
  --accent-700:#FBBF93;

  --bg:#071C24;
  --bg-2:#0B2833;
  --card:#0E2E3A;
  --sunk:#061921;

  --fg:#E9F8FB;
  --fg-brand:#A8E7F7;
  --muted:#A2C3CF;
  --nav:#8DB0BE;              /* nav links sit a step behind the wordmark */
  --border:#1D4C5F;
  --border-soft:#153B4B;
  --ring:#6BDCF2;

  --hdr-bg:rgba(7,28,36,.88);
  --ftr-a:#0A2A36; --ftr-b:#04141C;
  --hero-wash:rgba(34,211,238,.10);
  --icon-bg:linear-gradient(155deg,#123D4D 0%,#0D2C39 100%);
  --icon-ring:rgba(34,211,238,.18);
  --inset-hi:rgba(255,255,255,.07);
  --rule:rgba(168,231,247,.20);
  --focus-halo:rgba(107,220,242,.30);
  --shade:rgba(0,0,0,.55);
  --logo-hi:#4FC4E0; --logo-lo:#28A3C2; --logo-mark:#04222C; --logo-shade:#02171E;
  --surface-tint:#0B2A36;
  --surface-tint-2:#08222C;
  --edge:#1D4C5F;
  --on-danger:#2A0606;

  --art-filter:brightness(.86) saturate(.94);

  --good:#4FC9AC;
  --good-soft:#0E2F2B;
  --danger:#F26D6D;

  /* no cyan glow on a dark ground — it reads as smudge, not elevation */
  --e1:0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  --e2:0 2px 4px rgba(0,0,0,.45), 0 10px 26px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
  --e3:0 4px 10px rgba(0,0,0,.45), 0 30px 60px -28px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06);
  --glow-cta:0 8px 22px -8px rgba(249,124,60,.42);
  --glow-cyan:0 8px 22px -8px rgba(67,186,216,.38);
  --sheen:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 58%);
}

/* the header rule and the town-page rail read as harsh cyan on a dark ground */
:root[data-theme="dark"] .hdr{
  border-image:linear-gradient(90deg,transparent,var(--border) 22%,var(--border) 78%,transparent) 1;
}

/* ---- the theme toggle ---- */
.themetog{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;flex:0 0 46px;padding:0;
  border:1px solid var(--border);border-radius:var(--r-full);
  background:var(--card);color:var(--primary);cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.themetog:hover{border-color:var(--primary);color:var(--primary-bright)}
.themetog svg{width:20px;height:20px}
.themetog .i-moon{display:none}
:root[data-theme="dark"] .themetog .i-sun{display:none}
:root[data-theme="dark"] .themetog .i-moon{display:block}
:root:not([data-theme="dark"]) .themetog .i-sun{display:block}
:root:not([data-theme="dark"]) .themetog .i-moon{display:none}


/* ---- the one-time nudge that points at the toggle ----
   Shown only when it is plausibly wanted: the visitor's device is in dark
   mode, or it is actually late where they are. Never shown twice, and never
   to someone who has already chosen a theme. */
.nudge{
  position:fixed;z-index:70;top:82px;right:max(12px, calc((100vw - 1180px)/2 + 12px));
  width:min(292px, calc(100vw - 24px));
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--e3);padding:var(--s4) var(--s5) var(--s4);
  opacity:0;transform:translateY(-8px);
  transition:opacity .35s ease, transform .35s ease;
}
.nudge[data-shown]{opacity:1;transform:none}
.nudge::before{
  /* --arrow-right is measured in JS against the real toggle position, because
     the header lays out differently at every width */
  content:"";position:absolute;top:-7px;right:var(--arrow-right,44px);width:12px;height:12px;
  background:var(--card);border-left:1px solid var(--border);border-top:1px solid var(--border);
  transform:rotate(45deg);
}
.nudge p{font-size:16.5px;line-height:1.45;color:var(--fg);font-family:Lexend,sans-serif;font-weight:600}
.nudge__row{display:flex;gap:var(--s2);margin-top:var(--s3)}
.nudge button{
  min-height:44px;padding:10px 14px;border-radius:var(--r-full);cursor:pointer;white-space:nowrap;
  font-family:Lexend,sans-serif;font-size:15px;font-weight:600;border:2px solid transparent;
}
.nudge__yes{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.nudge__yes:hover{background:var(--primary-bright);border-color:var(--primary-bright)}
.nudge__no{background:var(--sunk);color:var(--fg-brand);border-color:var(--border)}
.nudge__no:hover{color:var(--fg-brand);border-color:var(--primary)}
@media (max-width:520px){
  .nudge{top:78px;right:12px;left:12px;width:auto}
}
@media (prefers-reduced-motion:reduce){
  .nudge{transition:none}
}

.field--check{display:grid;grid-template-columns:22px 1fr;gap:var(--s3);align-items:start;margin-top:var(--s4)}
.field--check input[type=checkbox]{width:20px;height:20px;margin:2px 0 0;accent-color:var(--fg-brand);cursor:pointer}
.field--check label{font-size:15px;line-height:1.5;color:var(--muted);font-weight:400;cursor:pointer}
.field--check label b{color:var(--fg);font-weight:600}


/* ===========================================================
   THE VOICE — the person who will be in your home, in her words.
   One quote, verbatim, placed where the trust question is asked.
   No name, no face. The words carry it.
   =========================================================== */
.voice{position:relative;background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s6) var(--s6) var(--s5);box-shadow:var(--e2);
  max-width:780px;margin:var(--s6) auto 0}
.voice::before{content:"\201C";position:absolute;left:10px;top:-22px;
  font-family:Lexend,sans-serif;font-size:132px;line-height:1;font-weight:700;
  color:var(--primary-bright);opacity:.22;pointer-events:none}
.voice .eyebrow{margin-bottom:var(--s3);position:relative}
.voice blockquote{margin:0;position:relative;font-family:Lexend,sans-serif;font-weight:500;
  font-size:clamp(20px,2.5vw,27px);line-height:1.4;color:var(--fg-brand);
  letter-spacing:-.012em;text-wrap:balance}
.voice cite{display:block;margin-top:var(--s4);font-style:normal;font-size:15px;
  color:var(--muted);position:relative}
.voice--compact{padding:var(--s5) var(--s5) var(--s4);margin-top:var(--s5);box-shadow:var(--e1)}
.voice--compact::before{font-size:96px;top:-8px;left:10px}
.voice--compact blockquote{font-size:clamp(18px,2vw,21px)}


/* ===========================================================
   WHO — the person, in the hero. Replaces the living-room
   illustration: the most valuable pixels on the site now carry
   the one thing a stranger actually wants to know before they
   hand over a key. Photo panel is a designed gradient until
   shot 01 exists; then it is a photo.
   =========================================================== */
.who{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--e3);overflow:hidden;position:relative}
.who__photo{aspect-ratio:16/7.5;position:relative;overflow:hidden;
  background:
    radial-gradient(110% 120% at 18% 0%, var(--surface-tint) 0%, transparent 58%),
    linear-gradient(160deg, var(--surface-tint) 0%, var(--surface-tint-2) 55%, var(--card) 100%)}
.who__photo::after{content:"\201C";position:absolute;right:26px;bottom:-46px;
  font-family:Lexend,sans-serif;font-size:220px;line-height:1;font-weight:700;
  color:var(--primary-bright);opacity:.16;pointer-events:none}
.who__photo img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1}
.who__body{padding:var(--s5) var(--s6) var(--s6)}
.who .eyebrow{margin:0}
.who blockquote{margin:var(--s3) 0 0;font-family:Lexend,sans-serif;font-weight:500;
  font-size:clamp(18px,1.55vw,21px);line-height:1.42;color:var(--fg-brand);
  letter-spacing:-.01em;text-wrap:balance}
.who__meta{margin:var(--s4) 0 0;font-size:15px;color:var(--muted)}
.who__more{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s4);
  font-family:Lexend,sans-serif;font-weight:600;font-size:16px;color:var(--primary);text-decoration:none}
.who__more:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:999px){.who__photo{aspect-ratio:16/6}}

/* ── language switcher ────────────────────────────────────────────────────
   A two-position slider, not two words. Built from the same parts as the
   day/night switch on the office page and the primary button: pill, sliding
   thumb, cyan fill with the same sheen and glow — so it reads as part of the
   site rather than something bolted onto the header.

   Type is Lexend at the nav's weight. The first version inherited the body
   face while every other item in the header is Lexend, which is exactly why
   it looked like it came from somewhere else.

   The thumb's position is driven by data-active, written at build time, so
   there is no :has() dependency and no JavaScript — the slider is correct in
   the very first painted frame. */
.lang{
  position:relative;display:inline-flex;align-items:center;flex:0 0 auto;
  margin-left:var(--s3);padding:3px;
  background:var(--sunk);border:1px solid var(--border);
  border-radius:var(--r-full);
  box-shadow:inset 0 1px 2px rgba(11,46,56,.06);
}
.lang__thumb{
  position:absolute;z-index:0;top:3px;bottom:3px;left:3px;
  width:calc(50% - 3px);border-radius:var(--r-full);
  background-color:var(--primary);background-image:var(--sheen);
  box-shadow:var(--e1),var(--glow-cyan);
  transition:transform .34s cubic-bezier(.4,0,.2,1),background-color .2s ease;
}
.lang[data-active="es"] .lang__thumb{transform:translateX(100%)}
.lang__seg{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;min-height:32px;padding:0 11px;
  font-family:Lexend,sans-serif;font-size:13px;font-weight:600;letter-spacing:.02em;
  color:var(--muted);text-decoration:none;border-radius:var(--r-full);
  transition:color .22s ease;
}
.lang__seg.is-on{color:var(--on-primary)}
.lang a.lang__seg:hover{color:var(--fg-brand)}
.lang a.lang__seg:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.lang__thumb{transition:none}}

/* the 404 says it in both languages, because there is only one 404 */
.alt-lang{margin-top:var(--s5);padding-top:var(--s5);
  border-top:1px solid var(--border);color:var(--muted)}
.alt-lang p{color:inherit}

/* The header now carries a language switcher as well as six nav items, a theme
   toggle and the phone number. Adding it pushed the nav into wrapping — two
   ragged lines of links beside a one-line logo, which is exactly the fight the
   header was tuned to avoid. So: links never break mid-label, the gap flexes
   with the viewport instead of sitting at a fixed --s5, and the phone number is
   pinned. Spanish labels run ~20% longer than English, so it tightens one more
   step there rather than the English header paying for Spanish word length. */
.nav{gap:clamp(10px,1.35vw,20px)}
.nav a{white-space:nowrap}
.btn--call{white-space:nowrap}
html[lang="es"] .nav{gap:clamp(8px,1.05vw,15px)}
html[lang="es"] .nav a{font-size:14.5px}

/* ── Spanish typographic fit ──────────────────────────────────────────────
   Her sentence is used verbatim in both languages by Sky's decision, so it is
   the one block that cannot be shortened to fit. Spanish runs it about one
   line longer, which pushed the hero card taller than the English one. The
   fix is type, not words: a hair less size and tracking in Spanish only, so
   the card lands on the same height and her words stay exactly as she said
   them. Everything else on the page was matched by tightening the copy. */
html[lang="es"] .who blockquote{font-size:clamp(17px,1.46vw,20px);letter-spacing:-.014em}
html[lang="es"] .voice blockquote{font-size:clamp(19px,2.35vw,25.5px);letter-spacing:-.015em}

/* ── Our work gallery ─────────────────────────────────────────────────────
   Two grids, because the two things are not the same thing. A before/after
   is a 3:2 landscape card people stop and read; a finished room is a 3:4
   portrait thumbnail people scan. Mixing them in one grid made the pairs
   look like filler. Both image boxes hold their own aspect so the page does
   not jump while 53 pictures lazy-load. */
.jobs{display:grid;gap:var(--s5);grid-template-columns:1fr;margin-top:var(--s3)}
.jobs--pairs{grid-template-columns:1fr}
@media(min-width:820px){.jobs--pairs{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)}}
.jobs--done{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
@media(min-width:720px){.jobs--done{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1080px){.jobs--done{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}}
.job{margin:0;display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.job__img{background:var(--sunk);position:relative}
.job__img--pair{aspect-ratio:3/2}
/* BEFORE / AFTER live in the markup so they translate and a screen reader can
   read them. The plate is opaque enough to survive a bright tile wall or a
   dark oven cavity underneath — both happen on this page. */
.ba{position:absolute;top:0;padding:9px 14px 10px;
  font-family:Lexend,sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;line-height:1;background:rgba(11,46,56,.88);
  border-bottom-right-radius:10px}
.ba--before{left:0;color:#F6F1E6}
.ba--after{left:50%;color:#F0D69A}
.job__img--done{aspect-ratio:3/4}
.job__img picture{display:block;width:100%;height:100%}
.job__img img{display:block;width:100%;height:100%;object-fit:cover}
.job__cap{padding:var(--s4) var(--s5) var(--s5);display:grid;gap:6px}
.job__tag{font-family:Lexend,sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--primary);margin:0}
.job__cap h3{margin:0;font-size:20px;letter-spacing:-.01em}
.job__cap p:last-child{margin:0;color:var(--muted);font-size:16px;line-height:1.55}
.jobs--done .job__cap{padding:var(--s3) var(--s4) var(--s4)}
.jobs--done .job__cap h3{font-size:17px}
.jobs--done .job__cap p:last-child{font-size:14.5px;line-height:1.5}

/* count line, jump nav and per-job headers */
.jobs__count{margin:var(--s4) 0 0;font-family:Lexend,sans-serif;font-size:14px;
  font-weight:600;letter-spacing:.02em;color:var(--primary)}
.jobnav{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s4)}
.jobnav a{display:inline-block;padding:8px 14px;border:1px solid var(--border);
  border-radius:999px;background:var(--card);color:var(--fg);text-decoration:none;
  font-size:14.5px;line-height:1.3;transition:border-color .15s ease,background .15s ease}
.jobnav a:hover{border-color:var(--primary);background:var(--surface-tint)}
.jobnav a:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.jobhead{max-width:62ch}
/* the page has four of these and a h1 above them; at full h2 scale they
   compete with the headline and push the first row of cards off the fold */
.jobhead h2{margin:0;font-size:clamp(26px,3.1vw,36px);line-height:1.14}
.jobhead p{margin:var(--s3) 0 0;color:var(--muted);font-size:17px;line-height:1.6}
.jobs__label{margin:var(--s6) 0 0;font-family:Lexend,sans-serif;font-size:12px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* a customer's own words, once they send them. Nothing renders until then —
   an empty quote box reads as a business with no customers. */
.quote{margin:var(--s5) 0 0;padding:var(--s5);border:1px solid var(--border);
  border-left:4px solid var(--primary);border-radius:var(--r);background:var(--surface-tint);
  max-width:62ch}
.quote p{margin:0;font-size:18px;line-height:1.6}
.quote footer{margin-top:var(--s3);font-family:Lexend,sans-serif;font-size:14px;
  font-weight:600;color:var(--muted)}
.quote__stars{margin:0 0 var(--s3) !important;color:var(--primary);letter-spacing:.16em;
  font-size:16px}

/* ── the cleaner, in the hero card's photo slot ────────────────────────────
   Inline SVG so it inherits the theme and costs one request. She is drawn
   from a landmark canon in brand/mascot/build_mascot.py — edit there, never
   here. The counter she is wiping steps up a shade in the dark so it reads
   against the card ground. */
.who__photo--art .who__art{position:absolute;inset:0;width:100%;height:100%;display:block}
.who__photo--art::after{display:none}
:root[data-theme="dark"] .who__photo--art{--mascot-counter:#12384A;--mascot-counter-top:#1A4A5E;--mascot-edge:.55}