/* ═══════════════════════════════════════════════════════════════
   ANGRY CAT CONTRACTING — shared stylesheet
   "Graphite & Teal": a clean modern-renovation palette, not a trade palette.
   Graphite charcoal, warm plaster, and a copper/bronze accent — the
   exact three notes in the client's own hero bathroom (charcoal walls,
   walnut vanity, copper geometric tile). Palette and photography agree
   instead of competing, which is what stops it reading as a template.

   Display type is Fraunces — a warm, worked serif that reads design
   studio rather than dispatch desk. UI chrome stays in Manrope so small
   tracked labels and buttons hold up at 12–14px.

   Every foreground/background pair below is verified ≥ 4.5:1:
     signal      #E09A5A on ink   → 7.4:1
     signal-ink  #8F4A1E on white → 6.6:1   (white text on it: 6.6:1)
     signal-ink  #8F4A1E on paper → 5.9:1
     steel       #5A5A5F on paper → 6.1:1
     steel-2     #8A8A90 on ink   → 5.1:1
   Every animation is transform/opacity only and is disabled under
   prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-ui:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --ink:#14303A;
  --ink-2:#1B3D49;
  --ink-3:#224A57;
  --paper:#FAFAF8;
  --paper-2:#F0EFEA;
  --white:#FFFFFF;

  --signal:#57C4CE;        /* dark backgrounds only — 7.2:1 on ink */
  --signal-ink:#0E6E78;    /* light backgrounds — 6.9:1 on white */
  --signal-wash:#E9F5F6;

  --steel:#52636B;         /* slate-tinted, 6:1 on paper */
  --steel-2:#93A6AD;       /* 5.5:1 on petrol ink */
  --hair:rgba(20,48,58,.13);
  --hair-dark:rgba(255,255,255,.16);

  --ok:#1B7A45;
  --err:#B3261E;
  --err-wash:#FDF3F2;

  --r:4px;
  --r-lg:8px;

  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:36px; --s7:56px; --s8:80px; --s9:120px;

  --maxw:1240px;
  --maxw-prose:720px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:17px; line-height:1.6; font-weight:450;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:calc(74px + env(safe-area-inset-bottom,0px));
}
@media (min-width:900px){ body{padding-bottom:0} }

/* Serif display: Fraunces wants far less negative tracking than a
   grotesque, and a hair more leading, or the ascenders collide. */
h1,h2,h3,h4,.display{
  font-family:var(--font-display);
  font-optical-sizing:auto;
  font-weight:700; line-height:1.04; letter-spacing:-.014em;
  margin:0 0 var(--s4); text-wrap:balance;
}
h1{font-size:clamp(2.5rem,1.45rem + 4.4vw,5rem); font-weight:800; letter-spacing:-.02em}
h1.h1--hero{font-size:clamp(2.85rem,1.35rem + 6.2vw,6.4rem); line-height:1.0}
h2{font-size:clamp(1.95rem,1.2rem + 3vw,3.4rem); letter-spacing:-.018em}
h3{font-size:clamp(1.18rem,1rem + .5vw,1.5rem); line-height:1.2; letter-spacing:-.008em; margin-bottom:var(--s2)}
h4{font-size:1.08rem; line-height:1.3; letter-spacing:-.005em; margin-bottom:var(--s2)}
p{margin:0 0 var(--s4); max-width:62ch}
a{color:inherit}
ul,ol{margin:0; padding:0; list-style:none}
img,svg{max-width:100%; display:block}
strong{font-weight:700}

.label{
  font-family:var(--font-ui);
  font-size:.72rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--signal-ink);
  display:flex; align-items:center; gap:var(--s3); margin:0 0 var(--s4);
}
.label::after{content:""; flex:1; height:1px; background:var(--hair)}
.label--dark{color:var(--signal)}
.label--dark::after{background:var(--hair-dark)}
.label--solo::after{display:none}

.lede{font-size:clamp(1.05rem,1rem + .35vw,1.28rem); color:var(--steel); line-height:1.55}
.lede--dark{color:var(--steel-2)}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--s5)}
@media (min-width:900px){ .wrap{padding-inline:var(--s6)} }
.section{padding-block:var(--s8)}
@media (min-width:900px){ .section{padding-block:var(--s9)} }
.section--tight{padding-block:var(--s7)}
.center{text-align:center}
.center p,.center .lede{margin-inline:auto}
.stack-sm > * + *{margin-top:var(--s3)}

.on-ink{background:var(--ink); color:#fff}
.on-ink h1,.on-ink h2,.on-ink h3{color:#fff}
.on-paper-2{background:var(--paper-2)}

/* grain — stops flat colour reading as cheap */
.grain{position:relative}
.grain::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  opacity:.55; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--signal-ink); outline-offset:3px; border-radius:2px;
}
.on-dark :focus-visible{outline-color:var(--signal)}

.skip{
  position:absolute; left:var(--s4); top:-100px; z-index:300;
  background:var(--signal-ink); color:#fff; padding:14px 22px;
  font-weight:700; text-decoration:none; border-radius:var(--r);
}
.skip:focus{top:var(--s3)}

.vh{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ═══════════════ SCROLL PROGRESS ═══════════════ */
.progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:200;
  background:transparent; pointer-events:none;
}
.progress__bar{
  height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--signal-ink),var(--signal));
}

/* ═══════════════ BUTTONS ═══════════════ */
.btn{
  --btn-bg:var(--ink); --btn-fg:#fff; --btn-bd:var(--ink);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:16px 30px;
  font-family:var(--font-ui); font-size:1rem; font-weight:700; letter-spacing:-.01em;
  background:var(--btn-bg); color:var(--btn-fg); border:1.5px solid var(--btn-bd);
  border-radius:var(--r); text-decoration:none; cursor:pointer; text-align:center;
  overflow:hidden; isolation:isolate;
  transition:background-color .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), transform .12s var(--ease);
}
/* sheen sweep on hover — the "flashy" bit, kept to 600ms and one element */
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.22) 50%,transparent 80%);
  transform:translateX(-120%);
}
.btn:hover::after{animation:sheen .75s var(--ease-out)}
@keyframes sheen{to{transform:translateX(120%)}}
.btn:active{transform:translateY(1.5px)}
.btn--signal{--btn-bg:var(--signal-ink); --btn-bd:var(--signal-ink)}
.btn--signal:hover{--btn-bg:#0A545C; --btn-bd:#0A545C}
.btn--ink:hover{--btn-bg:var(--ink-3); --btn-bd:var(--ink-3)}
.btn--paper{--btn-bg:#fff; --btn-fg:var(--ink); --btn-bd:#fff}
.btn--paper:hover{--btn-bg:var(--paper-2); --btn-bd:var(--paper-2)}
.btn--outline{--btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:rgba(20,48,58,.28)}
.btn--outline:hover{--btn-bd:var(--ink); --btn-bg:rgba(20,48,58,.04)}
.btn--outline-light{--btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.34)}
.btn--outline-light:hover{--btn-bd:#fff; --btn-bg:rgba(255,255,255,.09)}
.btn--block{width:100%}
.btn--sm{min-height:46px; padding:11px 22px; font-size:.92rem}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55; cursor:not-allowed}
.spin{
  width:17px; height:17px; flex:0 0 17px; border-radius:50%;
  border:2.4px solid rgba(255,255,255,.32); border-top-color:#fff;
  animation:spin .68s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══════════════ TICKER ═══════════════ */
.ticker{background:var(--signal-ink); color:#fff; overflow:hidden; position:relative; z-index:40}
.ticker__track{display:flex; width:max-content; animation:slide 42s linear infinite}
.ticker:hover .ticker__track,.ticker:focus-within .ticker__track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.ticker__group{display:flex; align-items:center; flex-shrink:0}
.ticker__item{
  display:flex; align-items:center; gap:var(--s3); padding:9px var(--s5);
  font-family:var(--font-ui); font-size:.74rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; white-space:nowrap;
}
.ticker__item::after{content:""; width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.55)}
.ticker a{color:#fff; text-decoration:underline; text-underline-offset:3px}

/* ═══════════════ HEADER ═══════════════ */
.header{
  position:sticky; top:0; z-index:60;
  background:rgba(247,245,241,.82);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--hair);
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.header--dark{background:rgba(20,48,58,.78); border-bottom-color:var(--hair-dark)}
.header__inner{display:flex; align-items:center; gap:var(--s5); min-height:76px}

.mark{
  display:flex; align-items:baseline; gap:2px; margin-right:auto;
  font-family:var(--font-display); font-size:1.42rem; font-weight:800;
  letter-spacing:-.02em; text-decoration:none; color:var(--ink); flex-shrink:0;
  transition:color .3s var(--ease);
}
.mark__dot{
  width:8px; height:8px; border-radius:50%; background:var(--signal-ink);
  flex:0 0 8px; margin-left:3px;
}
.header--dark .mark{color:#fff}
.header--dark .mark__dot{background:var(--signal)}

/* The client's supplied wordmark is white on transparent, so it only reads
   on the dark header. Inverting it for the scrolled/light state keeps one
   asset doing both jobs rather than shipping two files that drift apart. */
.mark__img{
  height:30px; width:auto; display:block; align-self:center;
  filter:invert(1) brightness(.16);
  transition:filter .3s var(--ease);
}
.header--dark .mark__img,
.foot .mark__img,
.msheet .mark__img{filter:none}
@media (min-width:720px){ .mark__img{height:34px} }

.nav{display:none; gap:var(--s6); align-items:center}
@media (min-width:1080px){ .nav{display:flex} }
.nav > a,.navdrop__btn{
  position:relative; text-decoration:none; font-size:.94rem; font-weight:600;
  color:var(--steel); white-space:nowrap; padding:6px 0; background:none;
  border:0; cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:6px;
  transition:color .2s var(--ease);
}
.nav > a::after,.navdrop__btn::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px;
  background:var(--signal-ink); transition:width .25s var(--ease);
}
.nav > a:hover,.navdrop__btn:hover{color:var(--ink)}
.nav > a:hover::after,.navdrop__btn:hover::after{width:100%}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{width:100%}
.header--dark .nav > a,.header--dark .navdrop__btn{color:var(--steel-2)}
.header--dark .nav > a:hover,.header--dark .navdrop__btn:hover,
.header--dark .nav a[aria-current="page"]{color:#fff}
.header--dark .nav > a::after,.header--dark .navdrop__btn::after{background:var(--signal)}

/* dropdown for the services menu */
.navdrop{position:relative}
.navdrop__btn svg{transition:transform .25s var(--ease)}
.navdrop__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.navdrop__menu{
  position:absolute; top:calc(100% + 14px); left:-20px; z-index:70;
  min-width:290px; padding:var(--s2);
  background:var(--white); border:1px solid var(--hair); border-radius:var(--r-lg);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.34);
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .22s var(--ease-out), transform .22s var(--ease-out);
}
.navdrop__menu.on{opacity:1; transform:none; pointer-events:auto}
.navdrop__menu a{
  display:block; padding:11px 14px; border-radius:var(--r);
  text-decoration:none; font-size:.94rem; font-weight:600; color:var(--ink);
  transition:background-color .16s var(--ease), color .16s var(--ease);
}
.navdrop__menu a small{display:block; font-size:.79rem; font-weight:500; color:var(--steel); margin-top:2px}
.navdrop__menu a:hover{background:var(--signal-wash); color:var(--signal-ink)}
.navdrop__menu a:hover small{color:var(--signal-ink)}

.header__tel{display:none; text-decoration:none; flex-shrink:0; text-align:right; line-height:1.15}
@media (min-width:680px){ .header__tel{display:block} }
/* The label must stay clearly subordinate to the number — it's a caption,
   not a second headline. Small, muted, light; the number does the shouting. */
.header__tel small{
  display:block; font-size:.56rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--steel); margin-bottom:4px;
}
.header__tel strong{
  display:block;
  font-family:var(--font-display); font-size:1.45rem; font-weight:800;
  letter-spacing:-.035em; line-height:1; white-space:nowrap;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.header--dark .header__tel strong{color:#fff}
.header--dark .header__tel small{color:var(--steel-2)}

.header__cta{display:none; min-height:46px; padding:11px 22px; font-size:.92rem; white-space:nowrap}
@media (min-width:900px){ .header__cta{display:inline-flex} }
.header--dark .btn--outline{--btn-fg:#fff; --btn-bd:rgba(255,255,255,.34)}
.header--dark .btn--outline:hover{--btn-bd:#fff; --btn-bg:rgba(255,255,255,.09)}

/* mobile menu */
.burger{
  display:grid; place-items:center; width:46px; height:46px; flex-shrink:0;
  background:none; border:1.5px solid var(--hair); border-radius:var(--r); cursor:pointer; color:var(--ink);
}
@media (min-width:1080px){ .burger{display:none} }
.header--dark .burger{border-color:var(--hair-dark); color:#fff}
.msheet{
  position:fixed; inset:0; z-index:120; background:var(--ink); color:#fff;
  padding:var(--s5); overflow-y:auto;
  opacity:0; pointer-events:none; transition:opacity .26s var(--ease-out);
}
.msheet.on{opacity:1; pointer-events:auto}
.msheet__top{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s7)}
.msheet__x{
  width:46px; height:46px; display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.1); border:0; border-radius:var(--r); cursor:pointer;
}
.msheet nav a{
  display:block; padding:var(--s4) 0; border-bottom:1px solid var(--hair-dark);
  text-decoration:none; color:#fff;
  font-family:var(--font-display); font-size:1.5rem; font-weight:700; letter-spacing:-.03em;
}
.msheet nav a small{display:block; font-family:Manrope,sans-serif; font-size:.85rem; font-weight:500; color:var(--steel-2); letter-spacing:0; margin-top:3px}
.msheet__foot{margin-top:var(--s7); display:grid; gap:var(--s3)}

/* ═══════════════ HERO ═══════════════
   A real photograph behind the headline, not a gradient. Drifting colour
   blobs and cursor-follow glows are the tell of a generated site; a dark
   photo of actual pipework is what a real trade brand would ship.
   Mobile gets a 760px-wide crop (~150KB); desktop swaps to the wide one. */
/* The hero Kaden approved: the marble-bathroom photo behind the type,
   under a NEUTRAL near-black scrim (12,17,20) - zero blue cast. Alpha
   verified against the photo's blown mirror highlight (L .98): white
   type clears 4.5:1 everywhere it sits. */
.hero{
  position:relative; color:#fff; overflow:hidden;
  background-color:var(--ink);
  background-image:
    linear-gradient(178deg, rgba(12,17,20,.84) 0%, rgba(12,17,20,.88) 55%, rgba(12,17,20,.94) 100%),
    url("img/hero-bg.webp");
  background-size:cover;
  background-position:center 32%;
}
@media (min-width:900px){
  .hero{
    background-image:
      linear-gradient(100deg, rgba(12,17,20,.94) 0%, rgba(12,17,20,.86) 42%, rgba(12,17,20,.40) 100%),
      url("img/hero-bg-wide.webp");
    background-position:center 42%;
  }
}
/* retired: the aurora blobs and the cursor spotlight. Hidden rather than
   stripped from 17 pages of markup — same result, no churn. */
.aurora,.spot,.hero__rules{display:none !important}

.hero__inner{position:relative; z-index:2; padding-block:var(--s7)}
@media (min-width:900px){ .hero__inner{padding-block:var(--s8)} }
@media (min-width:980px){
  .hero--split .hero__inner{
    display:grid; grid-template-columns:1.08fr .92fr; gap:var(--s8);
    align-items:center; padding-block:var(--s9);
  }
}
.hero--page .hero__inner{padding-block:var(--s7) var(--s8)}
@media (min-width:900px){ .hero--page .hero__inner{padding-block:var(--s8) var(--s9)} }

/* aurora — slow drifting colour fields. transform/opacity only. */
.aurora{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.aurora span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.5;
  will-change:transform;
}
.aurora span:nth-child(1){
  width:52vw; height:52vw; min-width:420px; min-height:420px; top:-18%; right:-12%;
  background:radial-gradient(circle,rgba(255,61,0,.62),transparent 68%);
  animation:drift1 26s var(--ease) infinite alternate;
}
.aurora span:nth-child(2){
  width:44vw; height:44vw; min-width:340px; min-height:340px; bottom:-24%; left:-10%;
  background:radial-gradient(circle,rgba(255,110,40,.34),transparent 66%);
  animation:drift2 34s var(--ease) infinite alternate;
}
.aurora span:nth-child(3){
  width:34vw; height:34vw; min-width:260px; min-height:260px; top:32%; left:38%;
  background:radial-gradient(circle,rgba(120,60,255,.20),transparent 68%);
  animation:drift3 30s var(--ease) infinite alternate;
}
@keyframes drift1{to{transform:translate3d(-9%,12%,0) scale(1.18)}}
@keyframes drift2{to{transform:translate3d(12%,-10%,0) scale(1.12)}}
@keyframes drift3{to{transform:translate3d(-14%,-8%,0) scale(1.24)}}

.hero__rules{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5}
.hero__rules span{position:absolute; top:0; bottom:0; width:1px; background:var(--hair-dark)}

/* cursor-follow glow, desktop pointers only */
.spot{
  position:absolute; z-index:1; pointer-events:none; width:520px; height:520px;
  margin:-260px 0 0 -260px; border-radius:50%; opacity:0;
  background:radial-gradient(circle,rgba(255,61,0,.16),transparent 62%);
  transition:opacity .4s var(--ease);
}
@media (hover:hover) and (pointer:fine){ .hero:hover .spot{opacity:1} }

.hero h1{color:#fff; margin-bottom:var(--s5)}
.hero h1 em{font-style:normal; position:relative; display:inline-block; color:var(--signal)}
.hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.075em;
  background:var(--signal); transform:scaleX(0); transform-origin:left;
  animation:underline .9s var(--ease-out) 1s forwards;
}
@keyframes underline{to{transform:scaleX(1)}}

/* headline words rise in on load */
.reveal-word{display:inline-block; overflow:hidden; vertical-align:top}
.reveal-word > span{
  display:inline-block; transform:translateY(108%);
  animation:wordUp .9s var(--ease-out) forwards;
}
@keyframes wordUp{to{transform:translateY(0)}}

.hero__actions{display:flex; flex-wrap:wrap; gap:var(--s3); margin-block:var(--s6) var(--s7)}

.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4);
  border-top:1px solid var(--hair-dark); padding-top:var(--s5);
}
.stats__n{
  display:block; font-family:var(--font-display);
  font-size:clamp(1.9rem,1.3rem + 2.2vw,2.9rem); font-weight:800;
  letter-spacing:-.045em; line-height:1; color:#fff;
  font-variant-numeric:tabular-nums; margin-bottom:5px;
}
.stats__n sup{font-size:.42em; font-weight:700; letter-spacing:0; vertical-align:super; color:var(--signal); margin-left:2px}
.stats li > span:last-child{
  font-size:.73rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--steel-2); line-height:1.35; display:block;
}
.stats--light{border-top-color:var(--hair)}
.stats--light .stats__n{color:var(--ink)}
.stats--light .stats__n sup{color:var(--signal-ink)}
.stats--light li > span:last-child{color:var(--steel)}

/* ═══════════════ BREADCRUMBS ═══════════════ */
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:var(--s5); font-size:.84rem}
.crumbs li{display:flex; align-items:center; gap:8px; color:var(--steel-2)}
.crumbs li::after{content:"/"; color:var(--steel-2); opacity:.6}
.crumbs li:last-child::after{display:none}
.crumbs a{color:var(--steel-2); text-decoration:none; transition:color .18s var(--ease)}
.crumbs a:hover{color:#fff; text-decoration:underline}
.crumbs [aria-current="page"]{color:#fff; font-weight:600}
.crumbs--light li,.crumbs--light a{color:var(--steel)}
.crumbs--light a:hover,.crumbs--light [aria-current="page"]{color:var(--ink)}

/* ═══════════════ FORM ═══════════════ */
.quote{position:relative; background:var(--white); color:var(--ink); border-radius:var(--r-lg); box-shadow:0 40px 90px -30px rgba(0,0,0,.65)}
.quote::before{content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--signal); border-radius:var(--r-lg) var(--r-lg) 0 0}
.quote__head{padding:var(--s6) var(--s6) var(--s4); border-bottom:1px solid var(--hair)}
.quote__head h2{font-size:1.72rem; margin-bottom:6px; letter-spacing:-.03em}
.quote__head p{margin:0; font-size:.93rem; color:var(--steel)}
.quote__body{padding:var(--s5) var(--s6) var(--s6)}

.field{margin-bottom:var(--s4)}
.field__label{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  font-size:.79rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); margin-bottom:7px;
}
.field__label i{font-style:normal; color:var(--steel); font-weight:600; letter-spacing:.04em; text-transform:none; font-size:.8rem}
.req{color:var(--signal-ink)}
.hint{display:block; font-size:.83rem; color:var(--steel); margin-top:6px}

.input,.select,.textarea{
  width:100%; min-height:54px; padding:14px 15px;
  font-family:Manrope,sans-serif; font-size:16px; font-weight:500;
  color:var(--ink); background:var(--paper);
  border:1.5px solid transparent; border-bottom:1.5px solid var(--hair);
  border-radius:var(--r) var(--r) 0 0;
  transition:background-color .16s var(--ease), border-color .16s var(--ease);
}
.input::placeholder,.textarea::placeholder{color:#9A9A9F; font-weight:450}
.input:hover,.select:hover,.textarea:hover{background:var(--paper-2)}
.input:focus,.select:focus,.textarea:focus{
  outline:none; background:var(--white); border-color:transparent;
  border-bottom-color:var(--signal-ink); border-bottom-width:2px;
  box-shadow:0 1px 0 0 var(--signal-ink);
}
.textarea{min-height:96px; resize:vertical; line-height:1.5}
.select{
  appearance:none; cursor:pointer; padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235A5A5F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
}
.row{display:grid; gap:var(--s3)}
@media (min-width:540px){ .row--2{grid-template-columns:1fr 1fr} }

.field.bad .input,.field.bad .select,.field.bad .textarea{
  background:var(--err-wash); border-bottom-color:var(--err); border-bottom-width:2px;
}
.err{display:none; align-items:flex-start; gap:6px; margin-top:7px; font-size:.85rem; font-weight:600; color:var(--err)}
.field.bad .err{display:flex}
.err svg{flex:0 0 15px; margin-top:2.5px}

.errsum{display:none; margin-bottom:var(--s4); padding:var(--s4); background:var(--err-wash); border-left:3px solid var(--err); border-radius:0 var(--r) var(--r) 0}
.errsum.on{display:block}
.errsum h3{font-size:.95rem; color:var(--err); margin-bottom:var(--s2); letter-spacing:-.01em}
.errsum ul{list-style:disc; padding-left:19px; font-size:.88rem}
.errsum li{margin-bottom:3px}
.errsum a{color:var(--err); font-weight:700}

.alert{display:none; gap:9px; align-items:flex-start; margin-bottom:var(--s4); padding:var(--s3) var(--s4); background:var(--err-wash); border-left:3px solid var(--err); font-size:.88rem; font-weight:600; color:var(--err)}
.alert.on{display:flex}
.alert svg{flex:0 0 17px; margin-top:2px}

.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.legal{display:flex; align-items:flex-start; gap:8px; margin:var(--s3) 0 0; font-size:.78rem; color:var(--steel); line-height:1.5}
.legal svg{flex:0 0 14px; margin-top:3px; color:var(--ok)}

.done{display:none; padding:var(--s8) var(--s6); text-align:center}
.done.on{display:block}
.done__tick{width:60px; height:60px; margin:0 auto var(--s5); border-radius:50%; background:var(--ink); color:var(--signal); display:grid; place-items:center}
.done h3{font-size:1.65rem}
.done p{margin-inline:auto}

/* ═══════════════ BENTO / CARD GRID ═══════════════ */
.bento{display:grid; gap:var(--s4); background:none; border:0; border-radius:0; overflow:visible}
@media (min-width:900px){ .bento{gap:var(--s5)} }
.bento .cell{border:1px solid var(--hair); border-radius:var(--r-lg); overflow:hidden}
@media (min-width:720px){ .bento{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1040px){
  .bento{grid-template-columns:repeat(6,1fr)}
  .cell--wide{grid-column:span 3}
  .cell--third{grid-column:span 2}
  .cell--half{grid-column:span 3}
}
.cell{
  position:relative; background:var(--white); padding:var(--s6) var(--s5);
  display:flex; flex-direction:column; min-height:230px; text-decoration:none; color:inherit;
  transition:background-color .28s var(--ease), transform .3s var(--ease-out);
}
.cell:hover{background:var(--signal-wash)}
a.cell:hover{transform:translateY(-3px)}
.cell__n{
  font-family:var(--font-ui); font-size:.72rem; font-weight:700;
  letter-spacing:.16em; color:var(--signal-ink); margin-bottom:var(--s5);
  font-variant-numeric:tabular-nums;
}
.cell__ico{
  width:38px; height:38px; color:var(--ink); margin-bottom:var(--s4);
  transition:transform .35s var(--ease-out), color .28s var(--ease);
}
.cell:hover .cell__ico{transform:translateY(-4px) rotate(-4deg); color:var(--signal-ink)}
.cell p{font-size:.95rem; color:var(--steel); margin-bottom:var(--s4); flex-grow:1}
.cell__from{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  font-family:var(--font-ui); font-size:.78rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
  padding-top:var(--s3); border-top:1px solid var(--hair); font-variant-numeric:tabular-nums;
}
.cell__from svg{transition:transform .3s var(--ease-out); color:var(--signal-ink)}
.cell:hover .cell__from svg{transform:translateX(5px)}
.cell--feature{background:var(--ink); color:#fff}
.cell--feature:hover{background:var(--ink-2)}
.cell--feature h3{color:#fff}
.cell--feature p{color:var(--steel-2)}
.cell--feature .cell__n,.cell--feature .cell__from{color:var(--signal); border-top-color:var(--hair-dark)}
.cell--feature .cell__ico,.cell--feature:hover .cell__ico{color:var(--signal)}

/* ═══════════════ PROSE (service/area page body) ═══════════════ */
.prose{max-width:var(--maxw-prose)}
.prose h2{margin-top:var(--s7); font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:var(--s6); font-size:1.22rem}
.prose p{color:var(--steel); font-size:1.04rem}
.prose strong{color:var(--ink)}
/* :not(.btn) matters — without it this rule outranks .btn on specificity
   (0,1,1 vs 0,1,0) and repaints every button inside body copy dark red
   with an underline, including the emergency callout buttons. */
.prose a:not(.btn){color:var(--signal-ink); text-decoration:underline; text-underline-offset:3px; font-weight:600}
/* Components that are already styled as cards or chips keep their own look —
   the inline-link treatment above would otherwise underline them in red. */
.prose .linkgrid a{color:var(--ink); text-decoration:none}
.prose .linkgrid a:hover{color:var(--signal-ink)}
.prose .zips a{color:var(--ink); text-decoration:none; font-weight:600}
.prose .zips a:hover{color:var(--signal-ink)}
.prose ul.ticks{margin:0 0 var(--s5); display:grid; gap:var(--s3)}
.prose ul.ticks li{display:flex; gap:12px; align-items:flex-start; color:var(--steel); font-size:1.02rem}
.prose ul.ticks svg{flex:0 0 20px; margin-top:4px; color:var(--signal-ink)}
.prose ol.steps{counter-reset:ps; display:grid; gap:var(--s5); margin:0 0 var(--s5)}
.prose ol.steps li{position:relative; padding-left:52px; color:var(--steel)}
.prose ol.steps li::before{
  counter-increment:ps; content:counter(ps,decimal-leading-zero);
  position:absolute; left:0; top:0;
  font-family:var(--font-ui); font-size:1.15rem; font-weight:800;
  color:var(--signal-ink); font-variant-numeric:tabular-nums;
}
.prose ol.steps strong{display:block; color:var(--ink); margin-bottom:3px; font-size:1.04rem}

.callout{
  margin:var(--s6) 0; padding:var(--s5); background:var(--white);
  border-left:3px solid var(--signal-ink); border-radius:0 var(--r-lg) var(--r-lg) 0;
  box-shadow:0 2px 18px -8px rgba(20,48,58,.16);
}
.callout p:last-child{margin-bottom:0}
.callout h3{margin-bottom:var(--s2)}

/* price / spec table */
.ptable{width:100%; border-collapse:collapse; margin:0 0 var(--s5); font-size:.97rem}
.ptable caption{text-align:left; font-size:.82rem; color:var(--steel); padding-bottom:var(--s3)}
.ptable th,.ptable td{padding:14px 12px; text-align:left; border-bottom:1px solid var(--hair)}
.ptable th{
  font-family:var(--font-ui); font-size:.74rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink);
}
.ptable td{color:var(--steel)}
.ptable td:last-child{font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink); white-space:nowrap}
.tscroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* two-column page layout with sticky rail */
.layout{display:grid; gap:var(--s7)}
@media (min-width:1000px){
  .layout{grid-template-columns:minmax(0,1fr) 380px; gap:var(--s8); align-items:start}
  .layout__rail{position:sticky; top:100px}
}

/* ═══════════════ PROCESS ═══════════════ */
.flow{display:grid; gap:var(--s7); counter-reset:f}
@media (min-width:860px){ .flow{grid-template-columns:repeat(3,1fr); gap:var(--s6)} }
.flow > li{position:relative; padding-top:var(--s5); border-top:2px solid var(--ink)}
.flow > li::before{
  counter-increment:f; content:counter(f,decimal-leading-zero);
  display:block; font-family:var(--font-display);
  font-size:clamp(2.6rem,2rem + 2.4vw,3.8rem); font-weight:800;
  letter-spacing:-.05em; line-height:.9; color:var(--signal-ink);
  margin-bottom:var(--s4); font-variant-numeric:tabular-nums;
}
.flow p{font-size:.97rem; color:var(--steel); margin:0}

/* ═══════════════ REVIEWS ═══════════════ */
.pull{
  font-family:var(--font-display);
  font-size:clamp(1.55rem,1.1rem + 2.1vw,2.7rem); font-weight:700;
  line-height:1.14; letter-spacing:-.014em; color:#fff; margin:0 0 var(--s6); max-width:22ch;
}
.pull span{color:var(--signal)}
.revgrid{display:grid; gap:var(--s5)}
@media (min-width:780px){ .revgrid{grid-template-columns:repeat(3,1fr)} }
.rev{border-top:1px solid var(--hair-dark); padding-top:var(--s5); display:flex; flex-direction:column; margin:0}
.stars{display:flex; gap:2px; color:var(--signal); margin-bottom:var(--s4)}
.rev blockquote{margin:0 0 var(--s5); font-size:1rem; color:#E6E4E0; line-height:1.6; flex-grow:1}
.rev figcaption{display:flex; align-items:center; gap:11px}
.rev__av{
  width:38px; height:38px; flex:0 0 38px; border-radius:50%;
  background:var(--ink-3); border:1px solid var(--hair-dark); color:#fff;
  display:grid; place-items:center;
  font-family:var(--font-ui); font-weight:700; font-size:.83rem;
}
.rev figcaption strong{display:block; font-size:.92rem; color:#fff}
.rev figcaption span span{font-size:.79rem; color:var(--steel-2)}

/* ═══════════════ CHIPS / LINK LISTS ═══════════════ */
.zips{display:flex; flex-wrap:wrap; gap:var(--s2)}
.zips a,.zips li{
  display:inline-block; border:1px solid var(--hair); border-radius:100px; padding:9px 19px;
  font-size:.9rem; font-weight:600; color:var(--ink); background:var(--white); text-decoration:none;
  transition:border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease-out);
}
.zips a:hover{border-color:var(--signal-ink); color:var(--signal-ink); transform:translateY(-2px)}

.linkgrid{display:grid; gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:var(--r-lg); overflow:hidden}
@media (min-width:640px){ .linkgrid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .linkgrid--3{grid-template-columns:repeat(3,1fr)} }
.linkgrid a{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  background:var(--white); padding:var(--s5); text-decoration:none; color:var(--ink);
  font-family:var(--font-ui); font-weight:700; font-size:1.04rem; letter-spacing:-.02em;
  transition:background-color .22s var(--ease), color .22s var(--ease);
}
.linkgrid a small{display:block; font-family:Manrope,sans-serif; font-size:.86rem; font-weight:500; color:var(--steel); letter-spacing:0; margin-top:3px}
.linkgrid a svg{flex-shrink:0; color:var(--signal-ink); transition:transform .28s var(--ease-out)}
.linkgrid a:hover{background:var(--signal-wash); color:var(--signal-ink)}
.linkgrid a:hover svg{transform:translateX(5px)}

/* ═══════════════ FAQ ═══════════════ */
.faq{max-width:860px; border-top:1px solid var(--hair)}
.faq--center{margin-inline:auto}
.faq__i{border-bottom:1px solid var(--hair)}
.faq__b{
  position:relative; width:100%; min-height:76px; padding:var(--s5) 52px var(--s5) 0;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s5);
  background:none; border:0; cursor:pointer; text-align:left; color:var(--ink);
  font-family:var(--font-display); font-size:clamp(1.05rem,.98rem + .4vw,1.28rem);
  font-weight:700; letter-spacing:-.022em; line-height:1.25; transition:color .2s var(--ease);
}
.faq__b:hover{color:var(--signal-ink)}
.faq__sign{position:absolute; right:0; top:50%; margin-top:-13px; width:26px; height:26px}
.faq__sign::before,.faq__sign::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--signal-ink);
  transition:transform .3s var(--ease-out), opacity .3s var(--ease);
}
.faq__sign::before{width:15px; height:2px; margin:-1px 0 0 -7.5px}
.faq__sign::after{width:2px; height:15px; margin:-7.5px 0 0 -1px}
.faq__b[aria-expanded="true"] .faq__sign::after{transform:rotate(90deg); opacity:0}
.faq__p[hidden]{display:none}
.faq__p{padding:0 var(--s7) var(--s6) 0}
.faq__p p{margin:0 0 var(--s3); color:var(--steel); font-size:1rem}
.faq__p p:last-child{margin-bottom:0}

/* ═══════════════ CTA BAND ═══════════════ */
.cta{position:relative; background:var(--signal-ink); color:#fff; overflow:hidden}
.cta h2{color:#fff; max-width:16ch; margin-bottom:var(--s5)}
.cta__inner{position:relative; z-index:2}
.cta__acts{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6)}
.cta p{color:rgba(255,255,255,.92)}
.cta .btn--outline-light{--btn-bd:rgba(255,255,255,.5)}
.cta__big{
  position:absolute; right:-3%; bottom:-16%; z-index:0; pointer-events:none;
  font-family:var(--font-display); font-size:min(26vw,300px); font-weight:800;
  letter-spacing:-.03em; line-height:.8; color:rgba(255,255,255,.09); user-select:none;
}

/* ═══════════════ FOOTER ═══════════════ */
.foot{background:var(--ink); color:var(--steel-2); padding-block:var(--s8) var(--s5); font-size:.92rem}
.foot__grid{display:grid; gap:var(--s6); margin-bottom:var(--s7)}
@media (min-width:800px){ .foot__grid{grid-template-columns:1.6fr 1fr 1fr 1fr} }
.foot h3{color:#fff; font-size:.7rem; letter-spacing:.17em; text-transform:uppercase; margin-bottom:var(--s4); font-weight:700}
.foot a{color:var(--steel-2); text-decoration:none; transition:color .18s var(--ease)}
.foot a:hover{color:#fff}
.foot li{margin-bottom:10px}
.foot .mark{color:#fff; margin-bottom:var(--s4); font-size:1.5rem; display:inline-flex}
.foot .mark__dot{background:var(--signal)}
.foot__bot{
  border-top:1px solid var(--hair-dark); padding-top:var(--s5);
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6); justify-content:space-between; font-size:.82rem;
}

/* ═══════════════ MOBILE BAR ═══════════════ */
.mbar{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:grid; grid-template-columns:1fr 1fr; gap:9px;
  padding:11px var(--s4) calc(11px + env(safe-area-inset-bottom,0px));
  background:rgba(247,245,241,.95); backdrop-filter:blur(16px);
  border-top:1px solid var(--hair);
}
@media (min-width:900px){ .mbar{display:none} }
.mbar .btn{min-height:50px; padding:12px; font-size:.94rem}

/* ═══════════════ CHAT WIDGET ═══════════════ */
.chat__fab{
  position:fixed; right:20px; z-index:90;
  bottom:calc(88px + env(safe-area-inset-bottom,0px));
  display:flex; align-items:center; gap:10px;
  min-height:56px; padding:15px 22px 15px 19px;
  background:var(--ink); color:#fff; border:0; border-radius:100px; cursor:pointer;
  font-family:var(--font-ui); font-size:.95rem; font-weight:700; letter-spacing:-.01em;
  box-shadow:0 12px 34px -8px rgba(0,0,0,.5);
  transition:transform .22s var(--ease-out), background-color .2s var(--ease);
}
@media (min-width:900px){ .chat__fab{bottom:26px; right:26px} }
@media (max-width:899px){
  .chat__fab{min-height:48px; padding:12px 18px 12px 15px; font-size:.88rem; gap:8px}
  .chat__fab svg{width:17px; height:17px}
}
.chat__fab:hover{transform:translateY(-2px); background:var(--ink-3)}
.chat__fab[aria-expanded="true"]{display:none}
.chat__pulse{
  width:9px; height:9px; border-radius:50%; background:var(--signal); flex:0 0 9px;
  box-shadow:0 0 0 0 rgba(255,61,0,.7); animation:pulse 2.4s infinite;
}
@keyframes pulse{70%{box-shadow:0 0 0 11px rgba(255,61,0,0)} 100%{box-shadow:0 0 0 0 rgba(255,61,0,0)}}

.chat__panel{
  position:fixed; right:16px; left:16px; z-index:95;
  bottom:calc(84px + env(safe-area-inset-bottom,0px));
  background:var(--white); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 30px 70px -18px rgba(0,0,0,.55);
  opacity:0; transform:translateY(14px) scale(.98); pointer-events:none;
  transition:opacity .26s var(--ease-out), transform .26s var(--ease-out);
}
@media (min-width:520px){ .chat__panel{left:auto; width:382px; right:20px} }
@media (min-width:900px){ .chat__panel{bottom:24px; right:26px} }
.chat__panel.on{opacity:1; transform:none; pointer-events:auto}
.chat__head{background:var(--ink); color:#fff; padding:var(--s5); display:flex; align-items:flex-start; gap:var(--s3)}
.chat__head h2{font-size:1.15rem; color:#fff; margin:0 0 3px; letter-spacing:-.025em}
.chat__head p{margin:0; font-size:.82rem; color:var(--steel-2); max-width:none}
.chat__live{display:inline-flex; align-items:center; gap:6px; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--signal); margin-bottom:6px}
.chat__live::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--signal)}
.chat__x{
  margin-left:auto; flex-shrink:0; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.1); border:0; color:#fff; cursor:pointer;
  display:grid; place-items:center; transition:background-color .18s var(--ease);
}
.chat__x:hover{background:rgba(255,255,255,.2)}
.chat__body{padding:var(--s5); max-height:min(58vh,470px); overflow-y:auto}
.chat__bubble{background:var(--paper); border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 2px; padding:var(--s4); font-size:.92rem; color:var(--ink); margin-bottom:var(--s5)}
.chat .field{margin-bottom:var(--s3)}
.chat .input,.chat .textarea{min-height:48px; font-size:16px}
.chat .textarea{min-height:74px}
.chat .btn{min-height:52px}
.chat__legal{font-size:.72rem; color:var(--steel); margin:var(--s3) 0 0; line-height:1.45}

/* ═══════════════ SCROLL REVEAL ═══════════════ */
.js .js .rise{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
.js .js .rise.in{opacity:1; transform:none}
/* stagger children of a revealed container */
.js .js .stagger > *{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out)}
.js .js .stagger.in > *{opacity:1; transform:none}
.stagger.in > *:nth-child(1){transition-delay:0ms}
.stagger.in > *:nth-child(2){transition-delay:70ms}
.stagger.in > *:nth-child(3){transition-delay:140ms}
.stagger.in > *:nth-child(4){transition-delay:210ms}
.stagger.in > *:nth-child(5){transition-delay:280ms}
.stagger.in > *:nth-child(6){transition-delay:350ms}

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION — one authoritative switch-off.
   Everything above degrades to a static, fully legible final state.
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .rise,.stagger > *{opacity:1 !important; transform:none !important}
  .reveal-word > span{transform:none !important}
  .hero h1 em::after{transform:scaleX(1) !important}
  .ticker__track{animation:none !important; width:100%; justify-content:center}
  .ticker__group:nth-child(2){display:none}
  .aurora span{animation:none !important}
  .spot{display:none}
  .btn:hover::after{animation:none !important}
  .progress__bar{transition:none !important}
}

/* ═══════════════════════════════════════════════════════════════
   MEDIA SYSTEM
   Aspect-locked slots so nothing shifts while images load, lazy
   loading below the fold, and a reveal animation on scroll.

   Swapping in a real photo is a one-line change — replace the
   <img src> and keep everything else.
   ═══════════════════════════════════════════════════════════════ */
.media{
  position:relative; margin:0; overflow:hidden;
  border-radius:var(--r-lg); background:var(--ink-2);
  isolation:isolate;
}
.media > img,
.media > picture > img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* stops a half-loaded image flashing at the wrong size */
  background:var(--ink-2);
}
.media--16x9{aspect-ratio:16/9}
.media--3x2 {aspect-ratio:3/2}
.media--4x3 {aspect-ratio:4/3}
.media--1x1 {aspect-ratio:1/1}
.media--3x4 {aspect-ratio:3/4}
.media--21x9{aspect-ratio:21/9}

/* subtle grain over imagery so photos sit in the same world as the
   flat colour sections */
.media::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  opacity:.30; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.media__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:var(--s6) var(--s4) var(--s3);
  font-size:.82rem; font-weight:600; color:#fff;
  background:linear-gradient(transparent, rgba(8,16,19,.82));
}
.media__cap b{
  display:block; font-family:var(--font-ui);
  font-size:.7rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--signal); margin-bottom:3px;
}

/* corner tag, e.g. "Royal Oak · 2024" */
.media__tag{
  position:absolute; top:var(--s3); left:var(--s3); z-index:3;
  padding:6px 12px; border-radius:100px;
  background:rgba(20,48,58,.72); backdrop-filter:blur(6px);
  font-family:var(--font-ui); font-size:.68rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:#fff;
}

/* scroll reveal for imagery — a wipe rather than a fade, which reads
   as more deliberate and hides nothing if JS never runs */
.media--reveal > img,
.media--reveal > picture{
  clip-path:inset(0 0 0 0);
  transform:scale(1.08);
  transition:transform 1.1s var(--ease-out), clip-path 1.1s var(--ease-out);
}
.js .js .media--reveal:not(.in) > img,
.media--reveal:not(.in) > picture{
  clip-path:inset(0 0 100% 0);
}
.media--reveal.in > img,
.media--reveal.in > picture{transform:scale(1)}

/* slow parallax drift on large decorative imagery */
.media--drift > img{will-change:transform}

/* image + text side by side */
.split{display:grid; gap:var(--s6); align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr; gap:var(--s8)}
  .split--wide-media{grid-template-columns:1.15fr .85fr}
  .split--flip > .split__media{order:2}
}
.split__body h2{margin-bottom:var(--s4)}

/* gallery */
.gallery{display:grid; gap:var(--s3)}
@media (min-width:640px){ .gallery{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){
  .gallery{grid-template-columns:repeat(4,1fr)}
  .gallery > *:first-child{grid-column:span 2; grid-row:span 2}
}

/* ═══════════════════════════════════════════════════════════════
   BEFORE / AFTER SLIDER
   A real <input type="range"> drives it, so keyboard arrows, Home
   and End work natively and screen readers announce a value. The
   visible handle is the styled range thumb.
   ═══════════════════════════════════════════════════════════════ */
.ba{
  --pos:50%;
  position:relative; margin:0; overflow:hidden; isolation:isolate;
  border-radius:var(--r-lg); background:var(--ink-2);
  aspect-ratio:3/2; touch-action:pan-y;
}
.ba img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; user-select:none; -webkit-user-drag:none;
}
/* the "before" layer sits on top, clipped to the handle position */
.ba__before{
  position:absolute; inset:0; z-index:2;
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
}
.ba__line{
  position:absolute; top:0; bottom:0; z-index:3;
  left:var(--pos); width:2px; margin-left:-1px;
  background:#fff; box-shadow:0 0 0 1px rgba(20,48,58,.28);
  pointer-events:none;
}
.ba__grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%;
  background:#fff; color:var(--ink);
  display:grid; place-items:center;
  box-shadow:0 4px 18px rgba(20,48,58,.4);
}
.ba__grip svg{width:22px; height:22px}

/* the range input is invisible but sits over the whole thing */
.ba__range{
  position:absolute; inset:0; z-index:4;
  width:100%; height:100%; margin:0; padding:0;
  appearance:none; background:transparent; cursor:ew-resize;
}
.ba__range::-webkit-slider-thumb{
  appearance:none; width:52px; height:100vh; background:transparent; cursor:ew-resize;
}
.ba__range::-moz-range-thumb{
  width:52px; height:100vh; background:transparent; border:0; cursor:ew-resize;
}
.ba__range:focus-visible{outline:3px solid var(--signal); outline-offset:3px}

.ba__tag{
  position:absolute; z-index:3; top:var(--s3);
  padding:6px 13px; border-radius:100px;
  background:rgba(20,48,58,.7); backdrop-filter:blur(6px);
  font-family:var(--font-ui); font-size:.68rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:#fff;
  pointer-events:none; transition:opacity .25s var(--ease);
}
.ba__tag--b{left:var(--s3)}
.ba__tag--a{right:var(--s3); background:var(--signal-ink)}

.ba__cap{
  margin-top:var(--s3); font-size:.88rem; color:var(--steel);
}
.ba__cap strong{color:var(--ink); font-weight:700}

/* on-dark sections */
.on-ink .ba__cap{color:var(--steel-2)}
.on-ink .ba__cap strong{color:#fff}

@media (prefers-reduced-motion:reduce){
  .media--reveal > img,
  .media--reveal > picture,
  .js .js .media--reveal:not(.in) > img,
  .media--reveal:not(.in) > picture{
    clip-path:none !important; transform:none !important; transition:none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TRUST STRIP
   Sits directly above the final call to action — reassurance right
   before the ask. Four claims, no more; a wall of badges reads as
   insecurity rather than credibility.
   ═══════════════════════════════════════════════════════════════ */
.trust{background:var(--paper-2); border-top:1px solid var(--hair)}
.trust__grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:var(--s5) var(--s4); padding-block:var(--s7);
}
@media (min-width:860px){ .trust__grid{grid-template-columns:repeat(4,1fr); gap:var(--s5)} }
/* six-up variant: 2x3 on mobile, 3x2 on desktop. Four columns would
   leave a ragged 4+2 row with six items. */
@media (min-width:860px){ .trust__grid--3{grid-template-columns:repeat(3,1fr)} }
.trust__item{display:flex; align-items:flex-start; gap:14px}
.trust__ico{
  width:42px; height:42px; flex:0 0 42px; border-radius:11px;
  background:var(--white); border:1px solid var(--hair);
  color:var(--signal-ink); display:grid; place-items:center;
}
.trust__item strong{
  display:block; font-family:var(--font-ui);
  font-size:1rem; font-weight:700; letter-spacing:-.02em;
  color:var(--ink); line-height:1.2; margin-bottom:3px;
}
.trust__item span{display:block; font-size:.85rem; color:var(--steel); line-height:1.45}
/* on dark sections */
.on-ink .trust,.trust--dark{background:var(--ink-2); border-top-color:var(--hair-dark)}
.trust--dark .trust__ico{background:var(--ink-3); border-color:var(--hair-dark); color:var(--signal)}
.trust--dark .trust__item strong{color:#fff}
.trust--dark .trust__item span{color:var(--steel-2)}

/* ═══════════════════════════════════════════════════════════════
   MOBILE-FIRST PASS
   ~90% of traffic is a phone. These rules assume a 390px viewport is
   the real design target and let desktop scale up from it, rather
   than the desktop layout being squeezed down.

   Measured before this block, at 390px: hero 2030px tall, homepage
   11,807px total, 19 tap targets under 44px.
   ═══════════════════════════════════════════════════════════════ */

/* ---- vertical rhythm: 80px of section padding is a desktop number ---- */
.section{padding-block:52px}
.section--tight{padding-block:40px}
@media (min-width:700px){
  .section{padding-block:var(--s8)}
  .section--tight{padding-block:var(--s7)}
}
@media (min-width:1000px){ .section{padding-block:var(--s9)} }

/* ---- headings: tighter leading and less space below on small screens ---- */
h2{margin-bottom:var(--s3)}
.lede{font-size:1.02rem}
@media (min-width:700px){ .lede{font-size:1.15rem} }
.hero .lede{max-width:34ch}
@media (min-width:900px){ .hero .lede{max-width:52ch} }

/* ---- hero: get the call button above the fold ---- */
.hero__actions{margin-block:var(--s5) var(--s5); gap:10px}
.hero__actions .btn{flex:1 1 100%}
@media (min-width:420px){ .hero__actions .btn{flex:0 0 auto} }
.stats{gap:var(--s2); padding-top:var(--s4)}
.stats__n{font-size:1.6rem}
@media (min-width:700px){ .stats__n{font-size:clamp(1.9rem,1.3rem + 2.2vw,2.9rem)} }
.stats li > span:last-child{font-size:.66rem; letter-spacing:.1em}

/* ---- the quote form was ~1400px on a phone. Tighten it. ---- */
.quote__head{padding:var(--s5) var(--s5) var(--s3)}
.quote__head h2{font-size:1.4rem}
.quote__body{padding:var(--s4) var(--s5) var(--s5)}
.field{margin-bottom:var(--s3)}
.field__label{font-size:.72rem; margin-bottom:5px}
.hint{font-size:.78rem; margin-top:4px}
.legal{font-size:.72rem}
/* name and ZIP pairs sit side by side even on a 390px screen —
   saves roughly two field heights of scrolling */
@media (min-width:360px){ .row--2{grid-template-columns:1fr 1fr} }
@media (min-width:700px){
  .quote__head{padding:var(--s6) var(--s6) var(--s4)}
  .quote__head h2{font-size:1.72rem}
  .field{margin-bottom:var(--s4)}
}

/* ---- tap targets: nav and footer links were 20px tall ---- */
.foot li{margin-bottom:0}
.foot li a,
.foot__bot a{display:inline-flex; align-items:center; min-height:44px}
.msheet nav a{min-height:56px; display:flex; flex-direction:column; justify-content:center}
.zips a,.zips li{min-height:44px; display:inline-flex; align-items:center}
.nav > a,.navdrop__btn{min-height:44px; display:inline-flex; align-items:center}
.crumbs a{min-height:44px; display:inline-flex; align-items:center}

/* ---- ticker: keep it, but make it quieter on a phone ---- */
.ticker__item{font-size:.66rem; padding:7px var(--s4); letter-spacing:.12em}
@media (min-width:700px){ .ticker__item{font-size:.74rem; padding:9px var(--s5)} }

/* ---- trust strip ---- */
.trust__grid{padding-block:var(--s6); gap:var(--s4)}
.trust__item strong{font-size:.94rem}
.trust__item span{font-size:.8rem}

/* ---- cards and media ---- */
.cell{min-height:0; padding:var(--s5) var(--s4)}
@media (min-width:700px){ .cell{padding:var(--s6) var(--s5)} }
.cell__n{margin-bottom:var(--s4)}
.media{border-radius:var(--r)}
@media (min-width:700px){ .media{border-radius:var(--r-lg)} }

/* ---- prose: shorter measure reads better on a phone ---- */
.prose p{font-size:1rem}
.prose h2{margin-top:var(--s6)}
@media (min-width:700px){
  .prose p{font-size:1.04rem}
  .prose h2{margin-top:var(--s7)}
}

/* ---- mobile action bar: bigger, easier to hit ---- */
.mbar{padding:10px var(--s3) calc(10px + env(safe-area-inset-bottom,0px)); gap:8px}
.mbar .btn{min-height:54px; font-size:1rem}

/* ---- hero quote form: collapsed on a phone ----------------------
   On desktop the form sits beside the headline and costs nothing.
   On a 390px screen it was ~1000px of the hero, pushing "what we do"
   two screens down. Collapsed behind a button, the first screen is
   headline, one sentence, and the two things that matter: call, or
   open the form. The button is injected by site.js.                */
.quote__toggle{display:none}
@media (max-width:699px){
  .hero .quote__toggle{display:flex; margin-top:var(--s4)}
  .hero .quote .quote__body{display:none}
  .hero .quote.is-open .quote__body{display:block}
  .hero .quote.is-open .quote__toggle{display:none}
  .hero .quote{box-shadow:0 18px 40px -20px rgba(0,0,0,.7)}
  .hero .quote__head{padding-bottom:var(--s5)}
}

/* last tap target under 44px: the wordmark */
.mark{min-height:44px; align-items:center}
.mark__dot{align-self:center; margin-top:1px}

/* ═══════════════════════════════════════════════════════════════
   CALL CARD
   Replaces the quote form. The site now has exactly one capture
   path — the chat widget — so this card's job is to make the two
   ways of starting that conversation obvious: phone, or text.
   Sits in the hero on the home page and in the sticky rail
   everywhere else, so the layout grid is unchanged.
   ═══════════════════════════════════════════════════════════════ */
.callcard{
  position:relative; background:var(--white); color:var(--ink);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.6);
}
.callcard::before{
  content:""; position:absolute; left:0; right:0; top:0; height:5px;
  background:var(--signal);
}
.callcard__head{
  padding:var(--s6) var(--s5) var(--s5);
  border-bottom:1px solid var(--hair); text-align:center;
}
.callcard__label{
  font-family:var(--font-ui);
  font-size:.68rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--signal-ink); margin:0 0 var(--s3);
}
.callcard__tel{
  display:block; text-decoration:none; color:var(--ink);
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.9rem,1.3rem + 2.6vw,2.5rem);
  letter-spacing:-.04em; line-height:1;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.callcard__tel:hover{color:var(--signal-ink)}
.callcard__hours{
  margin:var(--s3) 0 0; font-size:.83rem; color:var(--steel); max-width:none;
}
.callcard__body{padding:var(--s5); display:grid; gap:var(--s3)}
.callcard__or{
  display:flex; align-items:center; gap:var(--s3);
  font-size:.72rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel); margin:var(--s1) 0;
}
.callcard__or::before,.callcard__or::after{
  content:""; flex:1; height:1px; background:var(--hair);
}
.callcard__points{
  display:grid; gap:10px; margin:var(--s4) 0 0;
  padding-top:var(--s4); border-top:1px solid var(--hair);
}
.callcard__points li{
  display:flex; align-items:flex-start; gap:9px;
  font-size:.88rem; color:var(--steel); line-height:1.45;
}
.callcard__points svg{flex:0 0 17px; margin-top:2px; color:var(--ok)}

/* the collapse toggle belonged to the old form */
.quote__toggle{display:none !important}

/* On a phone the hero already carries Call and Free quote buttons, so the
   call card sitting under them is pure duplication and 516px of scroll.
   It earns its place on desktop, where it fills the second column, and in
   the sticky rail on inner pages at every width. */
@media (max-width:899px){
  .hero .callcard{display:none}
}

/* ═══════════════ CREW ═══════════════
   "The two people who'll be in your house." Two cards, no stock
   headshots - initials in the accent until the client sends photos.
   Swap the .crew__av span for an <img> and it still lays out. */
.crew{display:grid; gap:var(--s5)}
@media (min-width:720px){ .crew{grid-template-columns:repeat(2,1fr); gap:var(--s6)} }
.crew__i{
  display:flex; align-items:center; gap:var(--s5);
  padding:var(--s6) var(--s5);
  border:1px solid var(--hair-dark); border-radius:var(--r-lg);
  background:var(--ink-2);
}
.crew__av{
  flex:0 0 84px; width:84px; height:84px; border-radius:50%;
  display:grid; place-items:center; overflow:hidden;
  background:var(--ink-3); color:var(--signal);
  border:1px solid var(--hair-dark);
  font-family:var(--font-display); font-size:1.9rem; font-weight:800;
  letter-spacing:-.02em;
}
.crew__av img{width:100%; height:100%; object-fit:cover}
.crew__i h3{margin:0 0 4px; color:#fff}
.crew__i p{margin:0; color:var(--steel-2); font-size:.95rem; max-width:38ch}
.crew__role{
  display:block; font-family:var(--font-ui); font-size:.68rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--signal); margin-bottom:6px;
}

/* ═══════════════ CONTACT PANEL ═══════════════
   "Get In Touch" on the homepage - mirrors their one-pager's closing
   block so the layout they approved is still recognisable. */
.touch{display:grid; gap:var(--s5)}
@media (min-width:860px){ .touch{grid-template-columns:1.1fr .9fr; gap:var(--s8); align-items:start} }
.touch__list{display:grid; gap:var(--s4); margin:0}
.touch__list li{display:flex; gap:14px; align-items:flex-start}
.touch__list svg{flex:0 0 20px; margin-top:3px; color:var(--signal-ink)}
.touch__list a{color:var(--ink); text-decoration:none; font-weight:600}
.touch__list a:hover{color:var(--signal-ink); text-decoration:underline; text-underline-offset:3px}
.touch__k{
  display:block; font-family:var(--font-ui); font-size:.68rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--steel); margin-bottom:2px;
}

/* ═══════════════ GALLERY ═══════════════
   Real-jobs grid. Mobile: single column, full-bleed feel. Desktop: a
   2-col rhythm with the occasional wide row via :nth-child. */
.gallery{display:grid; gap:var(--s4)}
@media (min-width:720px){ .gallery{grid-template-columns:repeat(2,1fr); gap:var(--s5)} }
.gallery__i{
  position:relative; margin:0; border-radius:var(--r-lg); overflow:hidden;
  background:var(--ink-2);
}
@media (min-width:720px){ .gallery__i:nth-child(5n+1){grid-column:span 2} }
.gallery__i img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:3/2}
.gallery__i figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px var(--s4) 12px;
  background:linear-gradient(transparent, rgba(8,16,19,.84));
  color:#fff; font-size:.85rem; line-height:1.35;
}
.gallery__i figcaption b{
  display:block; font-family:var(--font-ui); font-size:.66rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--signal); margin-bottom:2px;
}

/* homepage strip: horizontal scroll on mobile (thumb-friendly), grid on desktop */
.gwall{display:flex; gap:var(--s3); overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory; padding-bottom:var(--s2); margin-bottom:var(--s5)}
.gwall::-webkit-scrollbar{height:6px}
.gwall::-webkit-scrollbar-thumb{background:var(--hair); border-radius:3px}
.gwall a{
  flex:0 0 78%; scroll-snap-align:start; border-radius:var(--r-lg); overflow:hidden; position:relative;
}
.gwall img{width:100%; aspect-ratio:3/2; object-fit:cover; display:block;
  transition:transform .5s var(--ease-out)}
.gwall a:hover img{transform:scale(1.04)}
@media (min-width:900px){
  .gwall{display:grid; grid-template-columns:repeat(3,1fr); overflow:visible; gap:var(--s4)}
  .gwall a{flex:none}
}

/* mascot — their own illustration, used as a brand aside */
.mascot{
  width:min(150px,34vw); height:auto; display:block;
  filter:invert(1) opacity(.92);   /* black-line art -> white on ink sections */
}

/* odd service count: let the last card span the full row instead of
   sitting orphaned in the left column */
.bento .cell:last-child:nth-child(odd){grid-column:1/-1}

/* ═══════════════ MASCOT IN HEADER ═══════════════
   The cat is black line art: invert to white on the dark header,
   leave black on the light scrolled header - the OPPOSITE rule from
   the white wordmark, so it gets its own class. */
/* The mascot is a WHITE cat drawn in BLACK line work. On the dark
   header it sits in a white circle chip, so the cat reads white and
   the outline reads black - exactly as drawn. No filters. */
.mark__cat{
  height:46px; width:46px; display:block; align-self:center; margin-right:11px;
  background:#fff; border-radius:50%; padding:5px; filter:none;
}
@media (min-width:720px){ .mark__cat{height:54px; width:54px; padding:6px} }

/* full lockup: ANGRY CAT over CONTRACTING */
.mark__txt{display:flex; flex-direction:column; line-height:1; white-space:nowrap}
.mark__txt b{
  font-family:var(--font-display); font-weight:800; font-size:1.34rem;
  letter-spacing:-.01em; color:#fff;
}
.mark__txt i{
  font-style:normal; font-family:var(--font-ui); font-weight:700;
  font-size:.56rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--signal); margin-top:4px;
}
@media (min-width:720px){
  .mark__txt b{font-size:1.55rem}
  .mark__txt i{font-size:.62rem}
}

/* ═══════════════ PHOTO SERVICE CARDS ═══════════════
   Services with their real work BEHIND the text, like the client's
   Wix site. Overlay verified: white on .78 ink over any photo ≥ 4.8:1. */
.cell--photo{position:relative; overflow:hidden; color:#fff; min-height:340px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:var(--s2)}
.cell--photo .cell__from{margin-top:var(--s4); padding-top:var(--s4)}
.cell--photo h3{margin-bottom:var(--s1)}
.cell--photo .cell__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transition:transform .6s var(--ease-out);
}
.cell--photo:hover .cell__bg{transform:scale(1.05)}
.cell--photo::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(8,16,19,0) 0%, rgba(8,16,19,0) 42%, rgba(8,16,19,.80) 100%);
}
.cell--photo > *:not(.cell__bg){position:relative; z-index:2}
.cell--photo h3{color:#fff}
.cell--photo p{color:rgba(255,255,255,.88)}
.cell--photo .cell__n,.cell--photo .cell__from{color:var(--signal); border-top-color:var(--hair-dark)}
.cell--photo:hover{background:var(--ink)}

/* ═══════════════ STAGES WITH PHOTOS ═══════════════
   Design / Construction / Interior as photo cards. */
/* Design / Construction / Interior as horizontal cards: photo on the
   left, copy beside it. Balanced, no big-image-tiny-caption effect. */
.stages{display:grid; gap:var(--s4); counter-reset:st; max-width:880px}
.stages > li{display:flex; align-items:center; border-radius:var(--r-lg);
  overflow:hidden; background:#fff; border:1px solid var(--hair)}
.stages__img{width:36%; min-width:118px; max-width:250px; aspect-ratio:1/1; height:auto;
  object-fit:cover; display:block; flex-shrink:0; align-self:stretch}
.stages__body{padding:var(--s4) var(--s5); align-self:center}
.stages > li h3{display:flex; align-items:baseline; gap:10px; margin-bottom:var(--s2)}
.stages > li h3::before{
  counter-increment:st; content:counter(st,decimal-leading-zero);
  font-family:var(--font-ui); font-size:.78rem; font-weight:800; letter-spacing:.08em;
  color:var(--signal-ink);
}
.stages > li p{margin:0; color:var(--steel); font-size:.95rem; max-width:52ch}

/* homepage photo grid: DISPLAYED, not a carousel. 2-up even on phones. */
.workgrid{display:grid; grid-template-columns:1fr; gap:var(--s5)}
@media (min-width:700px){ .workgrid{grid-template-columns:repeat(2,1fr); gap:var(--s5)} }
.workgrid a{border-radius:var(--r-lg); overflow:hidden; position:relative; display:block}
.workgrid img{width:100%; aspect-ratio:3/2; object-fit:cover; display:block;
  transition:transform .5s var(--ease-out)}
.workgrid a:hover img{transform:scale(1.04)}

/* ═══════════════ WHY: card treatment ═══════════════
   The six reasons as tidy white cards on the warm ground. */
.whycards{grid-template-columns:1fr}
@media (min-width:860px){ .whycards{grid-template-columns:repeat(3,1fr)} }
.whycards .trust__item{
  background:#fff; border:1px solid var(--hair); border-radius:var(--r-lg);
  padding:var(--s5) var(--s4); min-width:0;
}
.whycards .trust__item > span:last-child{min-width:0}

/* ═══════════════ REVIEWS: show more ═══════════════ */
.rev-more{display:none}
.rev-more.on{display:block}
.revactions{display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s6)}

/* header CTA was getting flex-squeezed into a 46px column on desktop -
   "Free Estimate" must never wrap or shrink */
.header__cta{white-space:nowrap; flex-shrink:0}
.header__tel{flex-shrink:0}


/* homepage variant of the gallery: captioned, 16/10 frames, no wide row */
.gallery--home .gallery__i img{aspect-ratio:16/10}
@media (min-width:720px){ .gallery--home .gallery__i:nth-child(5n+1){grid-column:auto} }


/* ═══════════════ REVIEWS, LIGHT ═══════════════
   Reviews moved off the black: warm teal wash, white cards, gold stars.
   Reading someone's praise should feel bright, not funereal. */
.on-wash{background:var(--paper-2)}
.on-wash .label{color:var(--signal-ink)}
.on-wash .pull{color:var(--ink)}
.on-wash .pull span{color:var(--signal-ink)}
.on-wash .rev{
  border-top:0; padding:var(--s5);
  background:#fff; border:1px solid var(--hair); border-radius:var(--r-lg);
  box-shadow:0 10px 30px -18px rgba(20,48,58,.18);
}
.on-wash .stars{color:#D9A02B}
.on-wash .rev blockquote{color:var(--steel); font-size:.98rem}
.on-wash .rev figcaption strong{color:var(--ink)}
.on-wash .rev figcaption span span{color:var(--steel)}
.on-wash .rev__av{background:var(--signal-wash); border-color:var(--hair); color:var(--signal-ink)}

/* crew: a real photo slot for each owner's face. Until their photos
   arrive it shows a quiet silhouette - drop an <img> in .crew__pic and
   it fills the circle. */
.crew__i{display:flex; align-items:center; gap:var(--s5); padding:var(--s5)}
.crew__pic{
  flex:0 0 92px; width:92px; height:92px; border-radius:50%; overflow:hidden;
  background:var(--ink-3); border:2px solid var(--hair-dark);
  display:grid; place-items:center; color:var(--steel-2);
}
.crew__pic img{width:100%; height:100%; object-fit:cover}
@media (max-width:420px){ .crew__pic{flex-basis:76px; width:76px; height:76px} }


/* ═══════════════ GHL CHAT BUBBLE ═══════════════
   On mobile the sticky call bar owns the bottom edge; the chat bubble
   must sit above it, never on top of the Free Estimate button. */
@media (max-width:899px){
  chat-widget{ bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important; }
}


/* Reviewer avatars: professional neutral silhouette until a real
   Google profile photo is supplied - drop an <img> in .rev__av and it
   fills the circle. (Their Google listing gates avatars behind the
   app, so real photos must come from the client.) */
.on-wash .rev__av{background:#E4E9EB; border:1px solid var(--hair); color:#7C8A91}
.on-wash .rev__av img{width:100%; height:100%; object-fit:cover; border-radius:50%}


/* hero stats: labels bright enough to pop against the petrol */
.hero .stats li > span:last-child{color:#C6D9DE}
.hero .stats__n{color:#fff}
.hero .stats sup{color:var(--signal)}

/* ═══════════════ MOBILE MENU, LIGHT ═══════════════
   The full-screen petrol sheet read as a wall of dark blue. Light
   panel, petrol type, teal accents. */
.msheet{background:var(--paper); color:var(--ink); padding:0}
/* petrol header band: the white cat chip and lockup read exactly as
   they do in the site header */
.msheet__top{
  background:var(--ink); margin-bottom:0;
  padding:calc(var(--s4) + env(safe-area-inset-top, 0px)) var(--s5) var(--s4);
}
.msheet .mark__txt b{color:#fff}
.msheet .mark__txt{border-left:1px solid rgba(255,255,255,.22)}
.msheet__x{color:#fff; background:rgba(255,255,255,.12)}
.msheet nav{padding:var(--s3) var(--s5) 0}
.msheet nav a{color:var(--ink); border-bottom:1px solid var(--hair); padding:var(--s4) 0}
.msheet nav a small{color:var(--steel)}
.msheet__foot{padding:var(--s5)}
.msheet .btn--outline-light{--btn-fg:var(--ink); --btn-bd:rgba(20,48,58,.35)}
.msheet .btn--outline-light:hover{--btn-bg:rgba(20,48,58,.05); --btn-bd:var(--ink)}

/* lockup: a quiet hairline between the cat and the name */
.header .mark__txt, .foot .mark__txt{
  border-left:1px solid rgba(255,255,255,.22);
  padding-left:11px; margin-left:2px;
}
.msheet .mark__txt{border-left:1px solid var(--hair); padding-left:11px; margin-left:2px}