/* ============ TOKENS ============ */
:root{
  /* Cane Home Cleaning Brand Kit V1, page 03. Sampled from the logo.
     Charcoal #272B30 primary, Steel Gray #4A535D secondary, Citrus #FC5210 accent,
     Mist #F3F4F5 neutral, Ink #15181C text.
     One accessibility decision, deliberate: white on Citrus measures 3.31:1, under
     the 4.5 floor, so button faces carry Ink text on the exact brand Citrus
     (5.39:1) rather than a darkened orange that is not in the kit. */
  --ink:#272B30;
  --ink-2:#1E2226;
  --ink-3:#4A535D;
  --text:#15181C;
  --glass:#F3F4F5;
  --glass-2:#E4E6E9;
  --paper:#FFFFFF;
  --sun:#FC5210;
  --sun-btn:#FC5210;
  --sun-lift:#FF6A30;
  --sun-deep:#B83A08;
  --on-sun:#15181C;
  --sage:#4A535D;
  --rule:#E4E6E9;
  --rule-2:#EDEFF1;
  --muted:#4A535D;
  --star:#FBBC04;

  /* Fallbacks are deliberately all sans. No serif may ever appear in this stack. */
  --display:"Oswald",system-ui,"Segoe UI Variable Display","Segoe UI",
    -apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --body:"Roboto",system-ui,"Segoe UI Variable Text","Segoe UI",
    -apple-system,"Helvetica Neue",Arial,sans-serif;

  --r-sm:8px; --r-md:14px; --r-lg:18px;
  --pad:clamp(20px,4cqi,68px);
  --shadow:0 1px 2px rgba(21,24,28,.05),0 18px 44px -18px rgba(21,24,28,.26);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#D3D6DA;font-family:var(--body);color:var(--text);
  line-height:1.62;letter-spacing:0;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--sun-deep);outline-offset:2px;border-radius:3px}

/* ============ MOCK CHROME (not part of the site) ============ */














/* ============ FRAME (container query root) ============ */
.frame{container-type:inline-size;width:100%;margin:0 auto;background:var(--paper);}

.wrap{width:100%;max-width:1260px;margin:0 auto;padding-inline:var(--pad)}

/* ============ TYPE SCALE ============ */
/* Kit specifies H1 40px bold, H2 24px semibold. Those are the floor values.
   The hero scales above them on wide screens; the ratio and weights hold. */
.d1{font-family:var(--display);font-weight:700;font-size:clamp(34px,5.4cqi,58px);line-height:1.08;
  letter-spacing:-.022em;margin:0;color:var(--ink)}
.d2{font-family:var(--display);font-weight:600;font-size:clamp(24px,3.2cqi,40px);line-height:1.15;
  letter-spacing:-.018em;margin:0;color:var(--ink)}
.lede{font-size:clamp(16px,1.4cqi,18.5px);color:var(--muted);margin:18px 0 0;max-width:46ch;
  line-height:1.62}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--sage);margin:0 0 16px}
.eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--sun);flex:none}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 24px;border-radius:999px;border:1.5px solid transparent;
  font-weight:600;font-size:15px;letter-spacing:-.012em;text-decoration:none;cursor:pointer;
  white-space:nowrap;transition:transform .14s ease,background .14s ease,border-color .14s ease}
.btn:hover{transform:translateY(-1px)}
.btn-sun{background:var(--sun-btn);color:var(--on-sun);border-color:var(--sun-btn)}
.btn-sun:hover{background:var(--sun-lift);border-color:var(--sun-lift)}
.btn-ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-lg{padding:17px 32px;font-size:16.5px}
.btn-onink{color:#fff;border-color:rgba(255,255,255,.32)}
.btn-onink:hover{border-color:#fff}

/* ============ UTILITY BAR AND HEADER ============ */
.util{background:var(--ink);color:#AEB3B9;font-size:13px}
.util .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;
  min-height:42px;flex-wrap:wrap}
.util a{color:#fff;text-decoration:none;font-weight:600}
.util .dot{color:var(--sun);padding:0 4px}

.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.hdr .wrap{display:flex;align-items:center;gap:20px;min-height:78px}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.hdr-logo{height:50px;width:auto;display:block}
.mark .glyph{width:42px;height:42px;border-radius:11px;background:var(--ink);flex:none;
  display:flex;align-items:center;justify-content:center;padding:6px 5px}
.mark .glyph img{width:100%;height:auto;display:block}
.mark .wm{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.06em;
  line-height:1.1;color:var(--ink);text-transform:uppercase}
.mark .wm small{display:flex;align-items:center;gap:6px;font-family:var(--display);font-weight:500;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.mark .wm small::before,.mark .wm small::after{content:"";height:2px;width:11px;
  background:var(--sun);flex:none}
.ft .mark .wm small{color:#A5ABB3}
.nav{display:flex;gap:26px}
.nav a{text-decoration:none;font-size:15px;font-weight:500;color:var(--ink-3);padding:4px 0;
  border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--sun)}
.hdr-cta{display:flex;gap:12px;align-items:center}
.hdr-phone{font-weight:700;text-decoration:none;font-size:16.5px;letter-spacing:-.02em}

/* ============ HERO ============ */
.hero{background:var(--glass);border-bottom:1px solid var(--rule);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(88% 62% at 100% 0%,rgba(252,82,16,.13),transparent 62%)}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(28px,4cqi,64px);align-items:center;padding-block:clamp(46px,6.4cqi,94px)}
.hero-copy{min-width:0}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero-note{margin:18px 0 0;font-size:13.5px;color:var(--muted)}

.shot{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--ink-2);
  aspect-ratio:3/2;box-shadow:var(--shadow);margin:0}
.shot img{width:100%;height:100%;object-fit:cover}
.shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 46%,rgba(21,24,28,.4))}

.hero-right{position:relative;min-width:0}
.est{position:relative;z-index:2;background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow);margin:0}
.est-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}
.est-head h2{font-family:var(--display);font-weight:600;font-size:21px;margin:0;line-height:1.2;
  letter-spacing:-.015em;color:var(--ink)}
.badge{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(252,82,16,.11);color:var(--sun-deep);padding:5px 8px;border-radius:6px;
  white-space:nowrap;line-height:1.25;text-align:center}
.field{margin-bottom:14px}
.field>span{display:block;font-size:12px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{flex:1 1 auto;min-width:44px;padding:11px 6px;border-radius:10px;
  border:1.5px solid var(--rule);background:var(--paper);font-weight:600;font-size:14.5px;
  cursor:pointer;transition:border-color .14s,background .14s}
.seg button:hover{border-color:var(--ink-3)}
.seg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.seg.wide button{flex:1 1 30%;font-size:13.5px}

.readout{margin-top:20px;padding:20px;border-radius:var(--r-md);background:var(--glass);
  border:1px solid var(--rule)}
.readout .num{font-family:var(--display);font-weight:700;font-size:clamp(34px,4.4cqi,48px);
  line-height:1.05;letter-spacing:-.028em;display:block;color:var(--ink)}
.readout .cap{display:block;font-size:13px;color:var(--muted);margin-top:10px}
.readout .alt{display:flex;justify-content:space-between;gap:10px;margin-top:14px;padding-top:13px;
  border-top:1px solid var(--rule);font-size:13.5px}
.est-actions{display:flex;gap:9px;margin-top:16px}
.est-actions .btn{flex:1}
.est-foot{margin:12px 0 0;font-size:12px;color:var(--muted);text-align:center}

/* ============ HERO VARIANTS ============ */
.hro{position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}
.hro-in{position:relative;z-index:2;display:grid;grid-template-columns:1.04fr .96fr;
  gap:clamp(28px,4cqi,64px);align-items:center;padding-block:clamp(48px,6.6cqi,100px)}
.hro-copy{min-width:0}
.estslot{min-width:0}
.heroimg{margin:0;width:100%;height:100%;position:relative;overflow:hidden}
.heroimg img{width:100%;height:100%;object-fit:cover;display:block}
.parking{display:none}

/* A, photo led. The 2:1 uploads are banner crops, so let one run full bleed. */
.hro-a{background:var(--ink)}
.hro-a .imgslot-bg{position:absolute;inset:0;z-index:0}
.hro-a::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(39,43,48,.96) 0%,rgba(39,43,48,.9) 33%,
    rgba(39,43,48,.62) 57%,rgba(39,43,48,.28) 100%)}
.hro-a .hro-in{min-height:clamp(470px,56cqi,650px)}

/* B, brand led. Navy is the kit's dominant surface and the estimator is the story. */
.hro-b{background:var(--ink)}
.hro-b::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(62% 90% at 90% 4%,rgba(252,82,16,.34),transparent 56%)}

/* C, whitespace led. Kit page 05 asks for white backgrounds and plenty of air. */
.hro-c{background:var(--paper)}
.hro-c .hro-in{padding-block:clamp(54px,7.2cqi,116px)}
.imgslot-band{position:relative;z-index:2;width:100%;height:clamp(210px,25cqi,370px)}

.eyebrow-rev{color:#B8BEC5}
.d1-rev{color:#fff}
.lede-rev{color:#C6CBD1}
.note-rev{color:#9CA3AB}





/* ============ CLAIMS STRIP ============ */
.claims{background:var(--ink);color:#fff}
.claims .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.claim{padding:24px 20px 24px 0;font-size:14.5px;font-weight:500;color:#D1D5D9;
  display:flex;gap:12px;align-items:flex-start;letter-spacing:-.008em}
.claim i{width:20px;height:3px;border-radius:2px;background:var(--sun);flex:none;margin-top:10px}
.claim b{color:#fff;font-weight:600}

/* ============ SECTIONS ============ */
.sec{padding-block:clamp(56px,7.2cqi,112px)}
.sec-glass{background:var(--glass)}
.sec-head{max-width:60ch;margin-bottom:clamp(30px,3.6cqi,52px)}
.sec-head .lede{max-width:56ch}
.sec-head.flush{margin-bottom:0}

/* services */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.7cqi,22px)}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-md);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--rule-2)}
.card .ph{aspect-ratio:16/10;background:var(--glass-2);overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .bd{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.card h3{font-family:var(--display);font-size:20px;font-weight:600;margin:0;letter-spacing:-.015em;color:var(--ink)}
.card p{margin:0;font-size:14.5px;color:var(--muted)}
.card .from{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);
  font-size:13.5px;font-weight:600;display:flex;justify-content:space-between;
  align-items:center;gap:10px}
.card .from em{font-style:normal;color:var(--muted);font-weight:500}

/* included toggle */
.inc-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  margin-bottom:clamp(24px,2.8cqi,40px)}
.switch{display:inline-flex;background:var(--paper);border:1px solid var(--rule);
  border-radius:999px;padding:4px}
.switch button{border:0;background:transparent;padding:11px 22px;border-radius:999px;
  font-weight:600;font-size:14.5px;cursor:pointer;color:var(--muted)}
.switch button[aria-pressed="true"]{background:var(--ink);color:#fff}
.rooms{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.4cqi,18px)}
.room{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-md);padding:20px;
  box-shadow:0 1px 2px rgba(21,24,28,.05),0 14px 32px -22px rgba(21,24,28,.28)}
.room h3{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sage);margin:0 0 14px}
.room ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.room li{font-size:14px;padding-left:21px;position:relative;color:var(--ink-3)}
.room li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:6px;
  border-left:2px solid var(--sage);border-bottom:2px solid var(--sage);transform:rotate(-45deg)}
.room li.dp{color:var(--ink);font-weight:600}
.room li.dp::before{border-color:var(--sun-deep)}
.vert{margin-top:26px;padding:18px 20px;border-left:3px solid var(--sun);background:var(--paper);
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:15.5px;color:var(--ink-3);max-width:74ch}
.vert b{color:var(--ink)}

/* split section */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4cqi,66px);align-items:center}
.split .shot{aspect-ratio:3/2}
.plainlist{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:18px}
.plainlist li{display:flex;gap:14px;align-items:flex-start;font-size:15.5px;color:var(--muted)}
.plainlist b{display:block;color:var(--ink);font-family:var(--display);font-weight:600;
  margin-bottom:3px;font-size:16px}
.plainlist i{width:18px;height:3px;border-radius:2px;background:var(--sun);flex:none;margin-top:10px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2cqi,30px)}
.step{padding-top:22px;border-top:2px solid var(--ink)}
.step .n{font-family:var(--display);font-size:13px;font-weight:700;color:var(--sun-deep);
  letter-spacing:.06em;display:block;margin-bottom:11px}
.step h3{font-family:var(--display);font-size:17px;font-weight:600;margin:0 0 8px;color:var(--ink)}
.step p{margin:0;font-size:14.5px;color:var(--muted)}

/* reviews */
.rev-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(26px,3.2cqi,44px)}
.stars{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600}
.stars .s{color:var(--star);letter-spacing:3px;font-size:19px}
.revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.7cqi,22px)}
.rev{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-md);padding:24px;
  display:flex;flex-direction:column;gap:14px;margin:0}
.rev p{margin:0;font-size:15px;color:var(--ink-3)}
.rev .who{margin-top:auto;padding-top:15px;border-top:1px solid var(--rule);font-size:13.5px;
  color:var(--muted)}
.rev .who b{display:block;color:var(--ink);font-size:14.5px;font-weight:600}

/* areas */
.areagrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6cqi,38px)}
.metro{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-md);padding:26px}
.metro h3{font-family:var(--display);font-size:21px;font-weight:600;margin:0 0 4px;
  letter-spacing:-.015em;color:var(--ink)}
.metro .cty{font-size:13px;color:var(--muted);margin:0 0 18px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{border:1px solid var(--rule);background:var(--glass);border-radius:999px;
  padding:8px 15px;font-size:13.5px;font-weight:500}
.chips span b{font-weight:600;color:var(--muted);font-size:12.5px}

/* find us and map */
.findgrid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(26px,3.6cqi,58px);align-items:center}
.nap{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.nap li{display:grid;grid-template-columns:104px 1fr;gap:14px;font-size:15.5px;align-items:start}
.nap dt,.nap b{font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sage);padding-top:3px}
.nap span{color:var(--text)}
.nap a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:2px solid var(--rule)}
.nap a:hover{border-color:var(--sun)}
.mapwrap{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;
  background:var(--ink);border:1px solid var(--rule);box-shadow:var(--shadow)}
.mapwrap iframe{width:100%;height:100%;border:0;display:block}
.mapfacade{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;
  background:var(--ink);color:#fff;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:26px;text-align:center;font:inherit}
.mapfacade::before{content:"";position:absolute;inset:0;opacity:.5;
  background:
    repeating-linear-gradient(0deg,transparent 0 26px,rgba(255,255,255,.07) 26px 27px),
    repeating-linear-gradient(90deg,transparent 0 34px,rgba(255,255,255,.07) 34px 35px),
    linear-gradient(118deg,transparent 46%,rgba(255,255,255,.10) 46% 49%,transparent 49%)}
.mapfacade>*{position:relative}
.mapfacade .pin{width:42px;height:42px}
.mapfacade .nm{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.015em}
.mapfacade .go{display:inline-flex;align-items:center;gap:8px;background:var(--sun-btn);
  color:#fff;font-weight:600;font-size:14.5px;padding:11px 20px;border-radius:999px}
.mapfacade .fine{font-size:11.5px;color:#93A8BC;max-width:34ch;line-height:1.5}

/* faq */
.faq{max-width:840px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-family:var(--display);font-size:17px;font-weight:600;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:29px;width:11px;height:11px;
  border-right:2px solid var(--sage);border-bottom:2px solid var(--sage);transform:rotate(45deg);
  transition:transform .18s ease}
.faq details[open] summary::after{transform:rotate(225deg);top:33px}
.faq p{margin:0 0 24px;color:var(--muted);font-size:15.5px;max-width:72ch}
.faq-head{text-align:center;margin-inline:auto}
.faq-head .eyebrow{justify-content:center}

/* final cta */
.final{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.final::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(68% 92% at 88% 8%,rgba(252,82,16,.34),transparent 58%)}
.final .wrap{position:relative;z-index:1;padding-block:clamp(56px,6.8cqi,104px);text-align:center}
.final .d2{color:#fff}
.final .lede{color:#AEB3B9;margin-inline:auto}
.final .hero-actions{justify-content:center}

/* footer */
.ft{background:var(--ink-2);color:#AAB0B6;font-size:14.5px}
.ft .wrap{padding-block:clamp(42px,4.8cqi,68px)}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
.ft h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 16px}
.ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ft a{text-decoration:none}
.ft a:hover{color:var(--sun)}
.ft .mark{margin-bottom:16px}
.ft .mark .wm{color:#fff}
.ft .mark .wm small{color:#8B9198}
.ft-lock{width:200px;height:auto;display:block;margin-bottom:18px;background:#fff;padding:12px 16px;border-radius:var(--r-sm) var(--r-sm) var(--r-sm) 16px}
.ft p{margin:0}
.ft .p2{margin-top:15px}
.ft-note{margin-top:34px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
  font-size:13px;color:#8B9198;max-width:78ch}
.ft-btm{margin-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13px}

/* mobile sticky bar */
.sticky{display:none;position:sticky;bottom:0;z-index:70;background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);border-top:1px solid var(--rule);padding:10px 14px;gap:9px;
  box-shadow:0 -6px 24px rgba(21,24,28,.1)}
.sticky .btn{flex:1;padding:14px 10px}

/* ============ CONTAINER BREAKPOINTS ============ */
@container (max-width:1120px){
  .rooms{grid-template-columns:repeat(3,1fr)}
}
@container (max-width:1020px){
  .hero .wrap{grid-template-columns:1fr;gap:34px}
  .shot{aspect-ratio:16/10}
  .hro-in{grid-template-columns:1fr}
  .hro-a .hro-in{min-height:0}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .rooms{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .revgrid{grid-template-columns:1fr}
  .claims .wrap{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .areagrid{grid-template-columns:1fr}
  .findgrid{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:repeat(2,1fr)}
  .nav{display:none}
}
@container (max-width:640px){
  .grid3{grid-template-columns:1fr}
  .rooms{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .claims .wrap{grid-template-columns:1fr}
  .claim{padding:14px 0}
  .nap li{grid-template-columns:1fr;gap:2px}
  .mapwrap{aspect-ratio:1/1}
  .ft-grid{grid-template-columns:1fr;gap:28px}
  .hdr-cta .btn{display:none}
  .hdr-phone{display:none}
  .util .wrap{justify-content:center;text-align:center}
  .imgslot-band{height:clamp(170px,52cqi,240px)}
  .seg button{min-width:38px;padding:11px 4px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}


/* ---- quote card ---- */
.qform .frow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.qform .frow.one{grid-template-columns:1fr}
.qform .btn{width:100%;margin-top:4px}
.qpol{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--ink-3)}
.qpol li{display:flex;align-items:center;gap:7px}
.qpol li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sun);flex:none}
@container (max-width:640px){.qform .frow{grid-template-columns:1fr}}

/* ---- subpage additions ---- */
.crumb{font-size:13px;color:var(--muted);padding-top:22px}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 10px}
.crumb li+li::before{content:"/";margin-right:10px;color:var(--rule)}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.crumb li[aria-current]{color:var(--ink);font-weight:500}
.nav a[aria-current="page"]{border-color:var(--sun);color:var(--ink)}

.phero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule);background:var(--paper)}
.phero .wrap{padding-bottom:clamp(44px,6cqi,86px)}
.phero-in{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(28px,4cqi,64px);
  align-items:center;padding-top:clamp(26px,3.4cqi,48px)}
.phero-in.one{grid-template-columns:1fr;max-width:820px}
.phero-in.one .lede{max-width:60ch}

.band{position:relative;width:100%;height:clamp(200px,24cqi,360px);overflow:hidden;background:var(--ink-2)}
.band img{width:100%;height:100%;object-fit:cover;display:block}

.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4cqi,56px);align-items:start}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.7cqi,22px)}
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.7cqi,22px)}

.tile{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-md);padding:22px}
.tile h3{font-family:var(--display);font-size:17.5px;font-weight:600;margin:0 0 8px;color:var(--ink)}
.tile p{margin:0;font-size:14.5px;color:var(--muted)}
.tile .n{font-family:var(--display);font-size:12px;font-weight:700;color:var(--sun-deep);
  letter-spacing:.08em;display:block;margin-bottom:10px}
.sec-glass .tile{border-color:var(--rule-2)}

.cmp{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r-md);overflow:hidden;font-size:14.5px}
.cmp th,.cmp td{padding:13px 16px;border-bottom:1px solid var(--rule);text-align:left}
.cmp th{font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--sage);background:var(--glass)}
.cmp th:not(:first-child),.cmp td:not(:first-child){text-align:center;width:120px}
.cmp tr:last-child td{border-bottom:0}
.cmp .y{color:var(--sage);font-weight:700}
.cmp .no{color:var(--rule);font-weight:700}
.cmp td.deep{background:rgba(252,82,16,.05)}

.miniservices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mini{display:flex;align-items:center;gap:14px;padding:12px 14px 12px 12px;background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--r-md);text-decoration:none;color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:15px;transition:border-color .14s}
.mini:hover{border-color:var(--ink)}
.mini img{width:72px;height:45px;object-fit:cover;border-radius:8px;flex:none;background:var(--glass-2)}
.mini small{display:block;font-family:var(--body);font-weight:400;font-size:12.5px;color:var(--muted);margin-top:2px}

.towns{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.town{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-md);padding:14px 16px}
.town b{font-family:var(--display);font-weight:600;font-size:15px;display:block;color:var(--ink)}
.town span{font-size:12.5px;color:var(--muted)}

.founder{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,3.6cqi,58px);align-items:center}
.pslot{aspect-ratio:4/5;border-radius:var(--r-lg);background:var(--glass);border:2px dashed var(--rule);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;
  color:var(--muted);font-size:14px;line-height:1.5}
.pslot b{display:block;font-family:var(--display);color:var(--ink);font-size:15px;margin-bottom:6px}
.fphoto{margin:0;aspect-ratio:4/5;border-radius:var(--r-sm) var(--r-sm) var(--r-sm) 26px;overflow:hidden;box-shadow:var(--shadow);background:var(--glass)}
.fphoto img{width:100%;height:100%;object-fit:cover;display:block}

.quote{border-left:3px solid var(--sun);padding:6px 0 6px 20px;margin:26px 0 0;
  font-family:var(--display);font-size:clamp(18px,1.9cqi,23px);font-weight:600;color:var(--ink);line-height:1.35}

.form{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);padding:26px;
  box-shadow:var(--shadow)}
.form h2{font-family:var(--display);font-size:21px;font-weight:600;margin:0 0 6px;color:var(--ink)}
.form .sub{font-size:14px;color:var(--muted);margin:0 0 20px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.frow.one{grid-template-columns:1fr}
.f{display:flex;flex-direction:column;gap:6px}
.f span{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.f input,.f select,.f textarea{font:inherit;font-size:15px;padding:12px 14px;border:1.5px solid var(--rule);
  border-radius:10px;background:var(--paper);color:var(--text);width:100%}
.f textarea{min-height:96px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--ink)}
.form .btn{width:100%;margin-top:6px}
.form .fine{font-size:12.5px;color:var(--muted);margin:14px 0 0;text-align:center}

.card-contact{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:26px}
.card-contact h3{font-family:var(--display);font-size:19px;font-weight:600;margin:0 0 16px}
.card-contact .nap{margin-top:0}
.card-contact .nap b{color:#B8BEC5}
.card-contact .nap span,.card-contact .nap a{color:#fff}
.card-contact .nap a{border-color:rgba(255,255,255,.25)}

.legal{max-width:760px;margin-inline:auto}
.legal h2{font-family:var(--display);font-size:22px;font-weight:600;color:var(--ink);margin:38px 0 10px}
.legal p,.legal li{font-size:15.5px;color:var(--text);line-height:1.7}
.legal .meta{font-size:13px;color:var(--muted)}

@container (max-width:1020px){
  .phero-in{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .three{grid-template-columns:repeat(2,1fr)}
  .four{grid-template-columns:repeat(2,1fr)}
  .miniservices{grid-template-columns:repeat(2,1fr)}
  .towns{grid-template-columns:repeat(3,1fr)}
  .founder{grid-template-columns:1fr}
}
@container (max-width:640px){
  .three,.four,.miniservices,.towns{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .cmp th:not(:first-child),.cmp td:not(:first-child){width:72px;padding:11px 8px}
}



/* mobile menu */
.menu-btn{display:none;width:44px;height:44px;border:1.5px solid var(--rule);border-radius:10px;background:var(--paper);
  cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:none}
.menu-btn span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.mnav{background:var(--ink);padding:6px 0 14px}
.mnav a{display:block;padding:15px var(--pad);color:#fff;text-decoration:none;font-family:var(--display);
  font-weight:600;font-size:17px;border-bottom:1px solid rgba(255,255,255,.08)}
.mnav a.call{color:var(--sun)}
@container (max-width:1020px){.menu-btn{display:flex}}

/* ---------------------------------------------------------------------------
   First visit sequence. The walkthrough step came out, so the old four column
   grid left three cards floating in three quarters of the width. Three columns,
   carded, with the step number doubling as a ghost numeral behind the text.
   --------------------------------------------------------------------------- */
.steps{grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2cqi,26px)}
.step{position:relative;overflow:hidden;padding:24px 24px 26px;border-top:3px solid var(--sun-btn);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);border-left:1px solid var(--rule);
  border-radius:var(--r-md);background:var(--paper);box-shadow:var(--shadow)}
.step > *{position:relative;z-index:1}
.step .n{display:inline-block;font-family:var(--display);font-size:12px;font-weight:700;
  letter-spacing:.16em;color:var(--sun-btn);margin-bottom:12px}
.step::after{content:attr(data-n);position:absolute;right:-8px;bottom:-34px;z-index:0;
  font-family:var(--display);font-size:118px;font-weight:700;line-height:1;
  color:var(--ink);opacity:.05;pointer-events:none}
.step h3{font-size:18px;margin-bottom:10px}
@media (max-width:860px){ .steps{grid-template-columns:1fr} .step::after{font-size:92px} }

/* ---------------------------------------------------------------------------
   Service area. It was white on white with two link blocks. Give the metros a
   photo and a colour each, put the counties on a navy band, and surface the
   towns that now have their own page.
   --------------------------------------------------------------------------- */
.counties{background:var(--ink);border-radius:var(--r-lg);padding:clamp(22px,3cqi,34px);
  color:#fff;display:grid;gap:18px}
.counties h2{color:#fff;margin:0}
.counties .cbar{display:flex;flex-wrap:wrap;gap:10px}
.counties .cbar span{border:1px solid rgba(255,255,255,.26);border-radius:999px;
  padding:8px 15px;font-size:14px;font-weight:600;color:#EAF0F7;background:rgba(255,255,255,.05)}
.counties .cnote{margin:0;color:#B9C7D8;font-size:15px;max-width:60ch}

.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.statrow div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-md);padding:16px 18px}
.statrow b{display:block;font-family:var(--display);font-size:30px;line-height:1;color:#fff}
.statrow span{display:block;margin-top:6px;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:#AEB4BB}
@media (max-width:760px){ .statrow{grid-template-columns:1fr} }

.metro{position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--rule);
  background:var(--paper);box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease}
.metro:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(21,24,28,.05),0 26px 56px -20px rgba(21,24,28,.34)}
.metro .mshot{display:block;width:100%;height:190px;object-fit:cover;border-bottom:1px solid var(--rule)}
.metro .mbody{padding:clamp(20px,2.4cqi,28px)}
.metro h3{margin:0 0 4px;font-size:22px}
.metro .cty{margin:0 0 16px;color:var(--muted);font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.metro .chips{display:flex;flex-wrap:wrap;gap:8px}
.metro .chips span{border:1px solid var(--rule);background:var(--glass);border-radius:999px;
  padding:7px 13px;font-size:13.5px;color:var(--text)}
.metro .chips span b{color:var(--ink-3);font-weight:600;margin-left:5px}
.metro .chips a{border:1px solid var(--sun-btn);background:#FDECEE;border-radius:999px;
  padding:7px 13px;font-size:13.5px;color:var(--ink);text-decoration:none;font-weight:600}
.metro .chips a:hover{background:var(--sun-btn);color:#fff}
.metro .chips a b{color:inherit;font-weight:600;margin-left:5px;opacity:.8}
.metro .go{margin:18px 0 0;font-weight:700;color:var(--sun-btn)}

/* ---------------------------------------------------------------------------
   Texture on the tinted bands.

   Two layers, both pure CSS so there is no extra request: a staggered sparkle
   lattice keyed to the four point stars in the logo mark, and two soft colour
   blooms in charcoal and citrus that give the band some depth at the corners.
   The lattice is masked top and bottom so it fades into the neighbouring white
   sections instead of stopping on a hard line.

   Kept deliberately faint. It has to read as texture behind white cards, not
   as decoration competing with them.
   --------------------------------------------------------------------------- */
.sec-glass{position:relative;overflow:hidden}
.sec-glass > .wrap{position:relative;z-index:1}

.sec-glass::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='%230A1E3A' fill-opacity='.055'%3E%3Cpath d='M18 8l1.5 6.5L26 16l-6.5 1.5L18 24l-1.5-6.5L10 16l6.5-1.5z'/%3E%3Cpath d='M54 44l1.2 5.3L60.5 50l-5.3 1.2L54 56l-1.2-4.8L47.5 50l5.3-.7z'/%3E%3C/g%3E%3Cg fill='%23E63946' fill-opacity='.05'%3E%3Cpath d='M50 12l1 4.2 4.2 1-4.2 1-1 4.2-1-4.2-4.2-1 4.2-1z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%);
}

.sec-glass::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(40rem 22rem at 94% -14%, rgba(252,82,16,.085), transparent 62%),
    radial-gradient(38rem 24rem at -10% 114%, rgba(46,78,120,.11), transparent 64%);
}

/* The first visit band leans on the texture most, so give it a touch more room
   and let the step cards sit slightly proud of it. */
.sec-glass .steps{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){ .sec-glass::before{opacity:.85} }

/* ---------------------------------------------------------------------------
   Band variants.

   One texture on every tinted band meant three near identical sections in a row
   on one hub and two on the homepage. gate.py now walks the tinted bands on
   each page and rotates these three treatments, never repeating back to back.
   All three keep dark text on a light ground, so nothing needs a contrast pass.
   --------------------------------------------------------------------------- */

/* 2. Gradient wash. Brand colours raked across the band with a soft highlight
      lifted through the middle, no repeating motif at all. */
.sec-glass.band-wash::before{
  background-image:
    linear-gradient(134deg, rgba(46,78,120,.16) 0%, rgba(46,78,120,0) 46%),
    linear-gradient(310deg, rgba(252,82,16,.11) 0%, rgba(252,82,16,0) 42%);
  background-size:auto;
  -webkit-mask-image:none;mask-image:none;
}
.sec-glass.band-wash::after{
  background:
    radial-gradient(34rem 28rem at 72% 46%, rgba(255,255,255,.72), transparent 72%),
    radial-gradient(22rem 22rem at 8% 8%, rgba(255,255,255,.55), transparent 70%);
}

/* 3. Photograph, held right back and washed out so it reads as tone rather
      than as a picture. The image is set per band by gate.py. */
.sec-glass.band-photo::before{
  background-image:var(--band-img);
  background-size:cover;background-position:center;
  opacity:.46;filter:grayscale(.18);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
}
/* Heavier at the top and bottom where headings and lede sit, thinner through
   the middle so the photograph is actually visible in the gutters. */
.sec-glass.band-photo::after{
  background:linear-gradient(180deg,
    rgba(241,243,247,.90) 0%,
    rgba(241,243,247,.62) 26%,
    rgba(241,243,247,.46) 55%,
    rgba(241,243,247,.88) 100%);
}
/* Cards have to sit on top of a picture now, so give them a real edge. */
.sec-glass.band-photo .room,
.sec-glass.band-photo .card,
.sec-glass.band-photo .tile,
.sec-glass.band-photo .step,
.sec-glass.band-photo .est{
  box-shadow:0 2px 6px rgba(21,24,28,.07), 0 20px 44px -22px rgba(21,24,28,.34);
  border-color:#DFE4EC;
}

@media (max-width:760px){
  .sec-glass.band-photo::before{opacity:.30}
}

/* ---------------------------------------------------------------------------
   Footer, condensed.

   The brand column was carrying an oversized lockup plus three stacked blocks
   while the three link columns ran short, so the footer was tall and mostly
   empty on the right. Smaller mark, contact on one line, and the disclaimer
   moved into the bottom bar beside the copyright instead of sitting on its own
   full width row.
   --------------------------------------------------------------------------- */
.ft .wrap{padding-block:clamp(30px,3.2cqi,46px)}
.ft-grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
.ft ul{gap:8px}
.ft h4{margin:0 0 12px}
.ft-lock{width:150px;margin-bottom:14px}
.ft-brand p{margin:0 0 8px;max-width:36ch;line-height:1.55}
.ft-contact{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ft-contact .sep{opacity:.4}
.ft-hours{font-size:13.5px;color:#8B9198}

.ft-btm{display:grid;grid-template-columns:1.6fr 1fr;gap:30px;align-items:start;
  margin-top:clamp(24px,2.6cqi,34px);padding-top:20px;border-top:1px solid rgba(255,255,255,.10)}
.ft-note{margin:0;font-size:12.5px;line-height:1.6;color:#8B9198;max-width:70ch}
.ft-legal{margin:0;font-size:12.5px;color:#8B9198;text-align:right}
.ft-legal span{display:block}

@media (max-width:900px){
  .ft-grid{grid-template-columns:1fr 1fr;gap:26px}
  .ft-btm{grid-template-columns:1fr;gap:14px}
  .ft-legal{text-align:left}
}
@media (max-width:560px){
  .ft-grid{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------------
   Type and motion pass, 2026-09-07.

   Studied michiganprimeshine.com. Its typography is the part worth taking: a
   very large, very heavy display face set against soft grey-blue body copy, and
   buttons with real tracking rather than plain rounded rectangles. That contrast
   is what stops a page reading as generated.

   What is NOT taken: their typeface. Brand Kit V1 page 04 specifies Poppins for
   display and Inter for body, so the effect comes from scale, weight and rhythm
   inside our own stack instead of a swap.
   --------------------------------------------------------------------------- */

/* Bigger, heavier, tighter. Was 700 at 34-58px, 600 at 24-40px. */
.d1{font-weight:700;font-size:clamp(38px,6cqi,70px);line-height:1.02;letter-spacing:.005em;text-transform:uppercase}
.d2{font-weight:500;font-size:clamp(27px,3.8cqi,46px);line-height:1.08;letter-spacing:.005em;text-transform:uppercase}
.hro .lede,.phero .lede{font-size:clamp(17px,1.55cqi,20px);max-width:52ch}

/* More air between the kicker and the headline so the size jump reads as
   deliberate rather than cramped. */
.eyebrow{margin:0 0 20px;font-size:11.5px;letter-spacing:.16em}
.sec-head .lede{margin-top:22px}

/* Softer body copy. Near-black on white is the flattest, most generated look
   there is. Still clears AA on both the white and the tinted grounds. */
:root{--muted:#5A626C}

/* Buttons with a tailored feel: smaller, heavier, tracked out and set in caps. */
.btn{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:16px 30px}
.btn-lg{padding:18px 38px;font-size:13.5px;letter-spacing:.1em}
.hdr-cta .btn{padding:14px 26px;font-size:12.5px}

/* Motion lives in the motion set at the end of this file. */

/* ---------------------------------------------------------------------------
   Motion set v2, 2026-09-07.

   The first pass was too polite to notice: 16px of travel reads as nothing.
   This one is built to be seen. Bigger distances, a full second of easing, and
   a direction that alternates down the page so sections arrive from opposite
   sides rather than all doing the same nudge.

   Driven by a data-anim attribute rather than a pile of classes, so gate.py
   picks the move per element and the CSS stays one block.
   --------------------------------------------------------------------------- */

:root{
  --ease-out-soft:cubic-bezier(.16,1,.3,1);
  --dur-enter:1.05s;
  --dur-hover:.42s;
}

.js [data-anim]{opacity:0}
.js [data-anim].in{
  animation-duration:var(--dur-enter);
  animation-timing-function:var(--ease-out-soft);
  animation-fill-mode:both}

.js [data-anim="left"].in {animation-name:lscSlideL}
.js [data-anim="right"].in{animation-name:lscSlideR}
.js [data-anim="up"].in   {animation-name:lscUp}
.js [data-anim="pop"].in  {animation-name:lscPop}
.js [data-anim="wipe"].in {animation-name:lscWipe;animation-duration:1.25s}

/* Cleared once played, so a filled transform cannot sit on top of hover. */
.js [data-anim].done{animation:none;opacity:1;transform:none;clip-path:none}

@keyframes lscSlideL{from{opacity:0;transform:translate3d(-70px,0,0)}
                     to{opacity:1;transform:none}}
@keyframes lscSlideR{from{opacity:0;transform:translate3d(70px,0,0)}
                     to{opacity:1;transform:none}}
@keyframes lscUp    {from{opacity:0;transform:translate3d(0,46px,0)}
                     to{opacity:1;transform:none}}
@keyframes lscPop   {from{opacity:0;transform:translate3d(0,34px,0) scale(.94)}
                     to{opacity:1;transform:none}}
@keyframes lscWipe  {from{opacity:0;clip-path:inset(0 100% 0 0)}
                     to{opacity:1;clip-path:inset(0 0 0 0)}}

/* Hover layer, unchanged in spirit: the card lifts, the photograph eases up
   inside a fixed frame rather than the whole card scaling. */
.card,.metro,.step,.tile{transition:transform var(--dur-hover) var(--ease-out-soft),
  box-shadow var(--dur-hover) var(--ease-out-soft),border-color var(--dur-hover) ease}
.card .ph,.metro .mshot,.shot{overflow:hidden}
.card .ph img,.shot img{display:block;width:100%;
  transition:transform 1.1s var(--ease-out-soft)}
.card:hover .ph img,.shot:hover img{transform:scale(1.05)}
.card:hover,.tile:hover{transform:translateY(-5px)}

.btn{transition:transform var(--dur-hover) var(--ease-out-soft),
  background-color .3s ease,border-color .3s ease,box-shadow var(--dur-hover) ease}
.btn-sun:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(218,54,66,.65)}
.btn-ghost:hover,.btn-onink:hover{transform:translateY(-2px)}

.nav a{position:relative;border-color:transparent}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;
  background:var(--sun);transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--ease-out-soft)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

.hdr{transition:box-shadow .35s ease,background-color .35s ease}
.hdr.settled{box-shadow:0 6px 26px rgba(39,43,48,.10)}
.sticky{transition:transform .45s var(--ease-out-soft),opacity .45s ease}

@media (prefers-reduced-motion:reduce){
  .js [data-anim]{opacity:1 !important;animation:none !important;
    transform:none !important;clip-path:none !important}
  .card,.metro,.step,.tile,.btn,.card .ph img,.shot img,.nav a::after,.sticky,.hdr{
    transition:none !important}
  .card:hover,.tile:hover,.btn-sun:hover,.btn-ghost:hover,.btn-onink:hover{transform:none}
  .card:hover .ph img,.shot:hover img{transform:none}
}

/* ---------------------------------------------------------------------------
   Inner page heroes, 2026-09-07.

   .phero was flat white on all seventeen non-home pages, which is the largest
   uninterrupted surface on the site and the main reason those pages read as
   unfinished next to the homepage. Same three ingredients as the tinted bands
   so it belongs to the system: a raked brand gradient, the sparkle lattice, and
   a pair of soft blooms. Dark text on a light ground throughout, so no
   contrast work is needed.
   --------------------------------------------------------------------------- */
.phero{background:linear-gradient(168deg,#FFFFFF 0%,var(--glass) 58%,#E9EDF4 100%)}
.phero > .wrap{position:relative;z-index:1}

.phero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='%230A1E3A' fill-opacity='.05'%3E%3Cpath d='M18 8l1.5 6.5L26 16l-6.5 1.5L18 24l-1.5-6.5L10 16l6.5-1.5z'/%3E%3Cpath d='M54 44l1.2 5.3L60.5 50l-5.3 1.2L54 56l-1.2-4.8L47.5 50l5.3-.7z'/%3E%3C/g%3E%3Cg fill='%23E63946' fill-opacity='.045'%3E%3Cpath d='M50 12l1 4.2 4.2 1-4.2 1-1 4.2-1-4.2-4.2-1 4.2-1z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%)}

.phero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(36rem 20rem at 96% -18%, rgba(252,82,16,.10), transparent 60%),
    radial-gradient(34rem 22rem at -8% 118%, rgba(46,78,120,.13), transparent 62%)}

/* A hairline of accent along the top, so the page starts on a deliberate note
   rather than on the header's own border. */
.phero{border-top:3px solid var(--sun)}

/* ---------------------------------------------------------------------------
   Full bleed photo band. A visual break for the pages that carry little or no
   photography of their own. No text on it: it is a transition, not a claim.
   --------------------------------------------------------------------------- */
.photoband{position:relative;overflow:hidden;height:clamp(200px,26cqi,320px)}
.photoband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.02)}
.photoband::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(39,43,48,.30) 0%,rgba(39,43,48,.10) 45%,rgba(39,43,48,.42) 100%)}
.photoband .mark{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:2;width:34px;height:3px;border-radius:2px;background:var(--sun);opacity:.9}

/* ---------------------------------------------------------------------------
   Contact card. Legal pages are headings over a notice by design, so they get
   something genuinely useful instead of decoration. Every value on it is a
   confirmed token.
   --------------------------------------------------------------------------- */
.legalcard{background:var(--ink);color:#fff;border-radius:var(--r-lg);
  padding:clamp(24px,3.2cqi,38px);display:grid;gap:18px;margin-top:34px;
  position:relative;overflow:hidden}
.legalcard::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 90% at 92% 6%,rgba(252,82,16,.30),transparent 58%)}
.legalcard > *{position:relative;z-index:1}
.legalcard h2{color:#fff;margin:0;font-family:var(--display);font-size:22px;font-weight:700}
.legalcard p{margin:0;color:#B9C7D8;max-width:56ch}
.legalcard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 22px;
  font-size:15px}
.legalcard dt{color:#8FA4BC;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  align-self:center}
.legalcard dd{margin:0;color:#fff}
.legalcard a{color:#fff}
@media (max-width:620px){ .legalcard dl{grid-template-columns:1fr;gap:4px 0} }

/* Draft notice. Lost when the build package changed hands; the legal pages are
   headings over an unwritten body, and this is what says so out loud. */
.draft-notice{background:#FFF6E8;border:1px solid #E9C98E;border-left:4px solid var(--sun-btn);
  border-radius:var(--r-md);padding:16px 18px;margin:0 0 26px;
  font-size:15px;line-height:1.6;color:var(--text);max-width:74ch}

/* ===========================================================================
   DIRECTION B, crafted detail. 2026-09-07, Steve's call.

   Category check across Molly Maid, Merry Maids, The Cleaning Authority and
   MaidPro: nobody rounds corners the way we were. Cleaning Authority is square,
   MaidPro runs 4px plus a signature asymmetric corner, Molly Maid 8px. We were
   at 14 to 18px on every surface, which is the loudest template signal in the
   whole design.

   So: near-square by default, with one oversized swept corner used
   consistently as a signature. Buttons stay pills on purpose, because the
   interactive elements should read differently from the surfaces they sit on.
   =========================================================================== */

:root{
  --r-sm:4px;
  --r-md:5px;
  --r-lg:6px;
  --r-cut:26px;                                   /* the signature corner */
  --shape:var(--r-sm) var(--r-sm) var(--r-sm) var(--r-cut);
  --shape-sm:var(--r-sm) var(--r-sm) var(--r-sm) 16px;
}

/* Surfaces take the signature shape. */
.card,.metro,.est,.legalcard,.counties,.photoband,.draft-notice{
  border-radius:var(--shape)}
.step,.tile,.room,.mini,.qc{border-radius:var(--shape-sm)}

/* The card clips its own photo, so the swept corner reads through the image
   rather than stopping at a rectangle inside a rounded box. */
.card{overflow:hidden}
.card .ph{border-radius:0}

/* Small controls go near-square rather than pill, so the buttons stand out as
   the only fully round things on the page. */
.metro .chips span,.metro .chips a,.counties .cbar span,.seg,.seg button{
  border-radius:var(--r-sm)}
.statrow div{border-radius:var(--shape-sm)}

/* Form fields follow the surfaces, not the buttons. */
.qform input,.qform select,.f input,.f select{border-radius:var(--r-sm)}

/* ---------------------------------------------------------------------------
   Texture set. One motif on 44 surfaces was the other half of the problem.
   Three now, rotated by gate.py alongside the wash and photo treatments, and
   the inner page heroes drop the motif entirely: a hero should be the calmest
   surface on the page, not the busiest.
   --------------------------------------------------------------------------- */

/* 1. Sparkle, unchanged, now roughly one band in five rather than all of them. */
.sec-glass.band-sparkle::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='%230A1E3A' fill-opacity='.055'%3E%3Cpath d='M18 8l1.5 6.5L26 16l-6.5 1.5L18 24l-1.5-6.5L10 16l6.5-1.5z'/%3E%3Cpath d='M54 44l1.2 5.3L60.5 50l-5.3 1.2L54 56l-1.2-4.8L47.5 50l5.3-.7z'/%3E%3C/g%3E%3Cg fill='%23E63946' fill-opacity='.05'%3E%3Cpath d='M50 12l1 4.2 4.2 1-4.2 1-1 4.2-1-4.2-4.2-1 4.2-1z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%)}

/* 2. Fine diagonal hatch. Quietest of the three, closest to paper stock. */
.sec-glass.band-hatch::before{
  background-image:repeating-linear-gradient(48deg,
    rgba(39,43,48,.055) 0 1px, transparent 1px 11px);
  background-size:auto;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}

/* 3. Dot grid, offset on alternate rows so it does not read as graph paper. */
.sec-glass.band-dots::before{
  background-image:
    radial-gradient(circle at 1.5px 1.5px, rgba(39,43,48,.10) 1.4px, transparent 1.5px),
    radial-gradient(circle at 1.5px 1.5px, rgba(252,82,16,.07) 1.4px, transparent 1.5px);
  background-size:26px 26px, 26px 26px;
  background-position:0 0, 13px 13px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}

/* Heroes: gradient and blooms only. The motif comes off all seventeen. */
.phero::before{content:none}