/* Adam's General Construction — design tokens and system.
   Tokens are taken verbatim from the design handoff README. */

:root{
  --bg:#f6f2ec; --bg-alt:#f0ebe3;
  --ink:#17202e; --ink-2:#3f4552;
  --muted:#5f6572; --muted-2:#8a8f99; --muted-3:#6b6f78;
  --accent:#8C3B2E; --accent-hover:#6e2d23; --accent-soft:#c9856f;
  --on-dark:#f6f2ec; --on-dark-2:#d9d3c7;
  --star:#e2b13c; --open:#2F7D4F;
  --hair:rgba(0,0,0,.07); --hair-2:rgba(0,0,0,.08); --hair-3:rgba(0,0,0,.10);
  --hair-chip:rgba(0,0,0,.14); --hair-input:rgba(0,0,0,.18); --hair-dark:rgba(255,255,255,.12);
  --gutter:48px;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,video{display:block; max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--serif); font-weight:400; margin:0; letter-spacing:-.01em}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
button{font:inherit; cursor:pointer}

:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

.eyebrow{font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:600}
.wrap{padding-left:var(--gutter); padding-right:var(--gutter)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:200; background:var(--ink); color:var(--on-dark);
  padding:10px 16px; border-radius:999px}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-weight:600; text-decoration:none; border-radius:999px;
  border:1.5px solid transparent; transition:background .2s,color .2s,border-color .2s;
  min-height:44px; white-space:nowrap}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.btn-dark{border-color:var(--ink); color:var(--ink); background:transparent}
.btn-dark:hover{background:var(--ink); color:var(--on-dark)}
.btn-light{border-color:rgba(246,242,236,.8); color:var(--on-dark); background:transparent}
.btn-light:hover{background:rgba(246,242,236,.12)}
.btn-invert{background:#fff; color:var(--accent)}
.btn-invert:hover{background:var(--bg)}
.btn-outline-light{border-color:rgba(255,255,255,.7); color:#fff; background:transparent}
.btn-outline-light:hover{background:rgba(255,255,255,.12)}
.btn-hero{font-size:16px; padding:16px 28px}
.btn-std{font-size:15px; padding:14px 24px}
.btn-nav{font-size:14px; padding:11px 20px}
.dot{width:8px; height:8px; border-radius:50%; background:var(--open); flex:0 0 auto}

/* ---------- utility bar + nav ---------- */
.utility{height:34px; background:var(--ink); color:var(--on-dark-2); font-size:12px;
  letter-spacing:.02em; display:flex; align-items:center; justify-content:space-between}
.utility-left{display:flex; gap:22px; align-items:center}
.utility a{color:var(--on-dark); text-decoration:underline; text-underline-offset:3px}

/* Jump links land below the sticky header, not under it. */
[id]{scroll-margin-top:100px}
.nav{height:84px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:60; transition:background .2s,box-shadow .2s;
  background:transparent}
.nav.stuck{background:rgba(246,242,236,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hair-2)}
/* Lockup: roof mark sized to the full height of the two-line wordmark, both
   centred on one axis, so the icon and the name read as a single unit. */
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink)}
.brand-mark{width:48px; height:44px; flex:0 0 auto; display:block}
.brand-text{display:flex; flex-direction:column; justify-content:center}
.brand-word{font-family:var(--serif); font-size:24px; font-weight:500; letter-spacing:.06em; line-height:1}
.brand-sub{font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted-3); line-height:1; margin-top:6px}
.nav-links{display:flex; gap:34px; font-size:15px; font-weight:500}
.nav-links a{text-decoration:none}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--accent)}
.nav-cta{display:flex; gap:10px; align-items:center}
.nav-toggle{display:none}

/* ---------- hero ---------- */
.hero{position:relative; margin:0 24px; height:720px; border-radius:24px; overflow:hidden}
.hero video,.hero .hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* Heavy flat overlay, matched to the reference site (#000 @ .8) but navy-tinted so
   it stays on palette. Nearly uniform so the headline is protected wherever the
   montage puts a bright sky; a touch heavier at the foot for the service strip. */
.hero-scrim{position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(23,32,46,.74) 0%,rgba(23,32,46,.76) 55%,rgba(23,32,46,.86) 100%)}
.hero-copy{position:absolute; left:64px; right:64px; bottom:150px; max-width:820px; color:var(--on-dark)}
.hero-copy .eyebrow{font-size:13px; letter-spacing:.18em; opacity:.85}
.hero h1{font-size:74px; line-height:1.02; margin:14px 0 18px}
.hero h1 em{font-style:italic; font-weight:300}
.hero-lead{font-size:20px; line-height:1.5; max-width:620px; opacity:.92}
.hero-checks{display:flex; gap:28px; flex-wrap:wrap; margin:22px 0 26px;
  font-size:15px; font-weight:500}
.hero-checks li{display:flex; align-items:center; gap:9px}
.tick{width:18px; height:18px; border-radius:50%; background:var(--on-dark); color:var(--ink);
  display:grid; place-items:center; font-size:11px; font-weight:700; flex:0 0 auto}
.hero-btns{display:flex; gap:12px; flex-wrap:wrap}

.service-strip{position:absolute; left:0; right:0; bottom:0; display:grid;
  grid-template-columns:1.2fr repeat(4,1fr); background:rgba(246,242,236,.94);
  backdrop-filter:blur(8px)}
.service-strip .intro{padding:22px 28px}
.service-strip .intro .eyebrow{font-size:11px; letter-spacing:.14em; color:var(--accent)}
.service-strip .intro h2{font-size:22px; margin-top:5px}
.service-strip a{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:22px 28px; font-size:17px; font-weight:500; text-decoration:none;
  border-left:1px solid var(--hair-2); transition:background .2s}
.service-strip a:hover{background:#fff}
.service-strip a span{color:var(--accent)}

/* ---------- trust tiles ---------- */
.trust{display:grid; grid-template-columns:1.1fr repeat(4,1fr); gap:16px; padding:40px var(--gutter) 0}
.tile{border-radius:16px; padding:26px 28px; border:1px solid var(--hair); background:#fff}
.tile-dark{background:var(--ink); color:var(--on-dark); border-color:transparent}
.tile-dark .eyebrow{font-size:12px; opacity:.7}
.stars{color:var(--star); font-size:22px; letter-spacing:3px; margin:8px 0 4px}
.tile-dark .big{font-family:var(--serif); font-size:44px; line-height:1}
.tile-dark .sub{font-size:15px; opacity:.75}
.tile .num{font-family:var(--serif); font-size:48px; line-height:1}
.tile .label{font-size:14px; color:var(--muted); margin-top:4px}

/* ---------- sections ---------- */
.section{padding:96px var(--gutter) 0}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:28px}
.section-head h2{font-size:46px; line-height:1.1; max-width:600px}
.link-more{font-size:15px; font-weight:600; color:var(--accent); text-decoration:none; white-space:nowrap}
.link-more:hover{text-decoration:underline}

/* ---------- services grid ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.svc{text-decoration:none; display:block}
.svc .shot{border-radius:18px; overflow:hidden; aspect-ratio:3/2; background:var(--bg-alt)}
.svc.sm .shot{aspect-ratio:4/3}
.svc .shot img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.svc:hover .shot img{transform:scale(1.03)}
.svc-body{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 4px 0}
.svc h3{font-size:26px; line-height:1.2}
.svc .sub{font-size:14px; color:var(--muted); margin-top:3px}
.svc .arrow{font-size:22px; color:var(--accent); transition:transform .3s}
.svc:hover .arrow{transform:translateX(4px)}
.svc-panel{background:var(--accent); color:#fff; border-radius:18px; padding:28px;
  display:flex; flex-direction:column; justify-content:center; gap:10px}
.svc-panel h3{font-size:28px; color:#fff}
.svc-panel p{font-size:15px; opacity:.92}
.svc-panel .btn{align-self:flex-start; margin-top:6px}

/* ---------- before / after ---------- */
.ba-row{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.ba{position:relative; height:520px; border-radius:20px; overflow:hidden; touch-action:none;
  user-select:none; background:var(--bg-alt)}
.ba img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ba img.after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba .ph{position:absolute; inset:0; display:grid; place-items:center; padding:24px; text-align:center;
  background:repeating-linear-gradient(135deg,#d8d2c8 0 12px,#e4dfd6 12px 24px);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:var(--muted)}
.ba-divider{position:absolute; top:0; bottom:0; left:var(--pos,50%); width:3px; background:#fff;
  transform:translateX(-1.5px); pointer-events:none}
.ba-handle{position:absolute; top:50%; left:var(--pos,50%); width:52px; height:52px; border-radius:50%;
  background:#fff; transform:translate(-50%,-50%); display:grid; place-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.2); font-size:15px; color:var(--ink); border:none}
.ba-tag{position:absolute; top:16px; font-size:12px; font-weight:600; padding:5px 10px; border-radius:6px;
  transition:opacity .25s ease; pointer-events:none}
.ba[data-side="after"] .ba-tag.before,.ba[data-side="before"] .ba-tag.after{opacity:0}
.ba-tag.before{left:16px; background:var(--ink); color:var(--on-dark)}
.ba-tag.after{right:16px; background:#fff; color:var(--ink)}
.ba-stats{display:flex; gap:34px; margin:22px 0}
.ba-stats .label{font-size:14px; color:var(--muted)}
.ba-stats .val{font-size:18px; font-weight:700}

/* ---------- dark band ---------- */
.band{background:var(--ink); color:var(--on-dark); border-radius:24px; margin:96px 24px 0; padding:72px 56px}
.band h2{font-size:44px; line-height:1.1}
.band .lead{font-size:16px; line-height:1.6; opacity:.8; margin-top:14px}
.steps-grid{display:grid; grid-template-columns:1fr 2fr; gap:56px}
.steps{display:grid; grid-template-columns:repeat(2,1fr); gap:28px; list-style:none; margin:0; padding:0}
.step .n{font-family:var(--serif); font-size:44px; line-height:1; color:var(--accent-soft)}
.step h3{font-family:var(--sans); font-size:17px; font-weight:600; margin:8px 0 4px}
.step p{font-size:14px; line-height:1.55; opacity:.75}

/* ---------- testimonials ---------- */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.quote{background:#fff; border:1px solid var(--hair); border-radius:18px; padding:30px}
.quote blockquote{font-family:var(--serif); font-size:21px; line-height:1.45; margin:0}
.quote .by{font-size:14px; color:var(--muted); margin-top:16px}

/* ---------- areas + cost ---------- */
.two{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.card-lite{background:#fff; border:1px solid var(--hair); border-radius:20px; padding:40px}
.card-lite h2{font-size:36px; line-height:1.1; margin:8px 0 18px}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{border:1px solid var(--hair-chip); border-radius:999px; padding:9px 16px; font-size:14px;
  text-decoration:none; transition:background .2s,color .2s}
.chip:hover{background:var(--ink); color:var(--on-dark); border-color:var(--ink)}
.map-ph{height:200px; border-radius:14px; margin-top:22px; display:grid; place-items:center;
  background:repeating-linear-gradient(135deg,#d8d2c8 0 12px,#e4dfd6 12px 24px);
  font-family:ui-monospace,monospace; font-size:12px; color:var(--muted); text-align:center; padding:16px}
.card-accent{background:var(--accent); color:#fff; border-radius:20px; padding:40px}
.card-accent h2{font-size:36px; line-height:1.1; color:#fff; margin:8px 0 16px}
.card-accent p{opacity:.95}
.card-accent .btns{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px}

/* ---------- faq ---------- */
.faq-row{display:grid; grid-template-columns:1fr 1.6fr; gap:56px}
.faq-intro{font-size:16px; color:var(--muted); margin-top:14px}
.faq details{border-top:1px solid var(--hair-3)}
.faq summary{list-style:none; cursor:pointer; padding:22px 0; font-size:19px; font-weight:500;
  display:flex; justify-content:space-between; gap:20px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accent); font-size:22px; line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .ans{font-size:16px; line-height:1.6; color:var(--ink-2); max-width:700px; padding:0 0 22px}

/* ---------- inline form ---------- */
.form-wrap{margin:96px 24px 0; background:#fff; border:1px solid var(--hair); border-radius:24px;
  display:grid; grid-template-columns:1fr 1fr; overflow:hidden}
.form-side{padding:56px}
.form-side h2{font-size:44px; line-height:1.1; margin:8px 0 14px}
.form-side .note{font-size:16px; color:var(--ink-2)}
.form-side .note a{font-weight:700; color:var(--ink)}
.fields{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:24px 0 0}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:6px}
.field input,.field select{width:100%; height:48px; border:1px solid var(--hair-input); border-radius:10px;
  padding:0 14px; font:inherit; font-size:15px; background:#fff; color:var(--ink)}
.field input::placeholder{color:var(--muted-2)}
.field input:focus,.field select:focus{outline:none; border:1.5px solid var(--accent)}
.field .err{font-size:13px; color:var(--accent); margin-top:5px; display:none}
.field.invalid input,.field.invalid select{border-color:var(--accent)}
.field.invalid .err{display:block}
.chip-btn{border:1px solid var(--hair-chip); background:transparent; border-radius:999px;
  padding:10px 18px; font-size:14px; transition:background .2s,color .2s}
.chip-btn[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink)}
.chip-btn[aria-pressed="true"]::before{content:"\2713  "}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.form-photo{background:var(--bg-alt); min-height:560px}
.form-photo img{width:100%; height:100%; object-fit:cover}
.form-status{margin-top:14px; font-size:15px}
.form-status.err{color:var(--accent)}

/* ---------- footer ---------- */
footer{background:var(--ink); color:var(--on-dark-2); margin-top:96px; padding:56px var(--gutter) 36px;
  font-size:14px; line-height:1.7}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px}
.foot-word{font-family:var(--serif); font-size:24px; color:var(--on-dark)}
footer a{color:inherit; text-decoration:none}
footer a:hover{text-decoration:underline}
footer h3{font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--on-dark); margin-bottom:12px}
.foot-phone{font-weight:700; color:var(--on-dark)}
.foot-bottom{border-top:1px solid var(--hair-dark); margin-top:36px; padding-top:20px;
  display:flex; justify-content:space-between; gap:24px; font-size:12px; opacity:.7; flex-wrap:wrap}

/* ---------- mobile sticky bar ---------- */
.sticky-bar{display:none; position:fixed; left:0; right:0; bottom:0; z-index:80;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom)); gap:8px;
  background:rgba(246,242,236,.96); backdrop-filter:blur(8px); border-top:1px solid var(--hair-2)}
.sticky-bar .btn{flex:1; height:52px; font-size:15px}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(16px)}
.reveal.in{opacity:1; transform:none; transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}



/* ---------- live Google reviews ---------- */
.g-summary{display:inline-flex; align-items:center; gap:9px; font-size:15px; color:var(--muted);
  text-decoration:none; white-space:nowrap}
.g-summary:hover{color:var(--ink)}
.g-summary strong{color:var(--ink); font-weight:600}
.g-mark{width:20px; height:20px; flex:0 0 auto}
.stars-sm{color:var(--star); letter-spacing:1px}
.review{display:flex; flex-direction:column; background:#fff; border:1px solid var(--hair);
  border-radius:18px; padding:26px 28px}
.review[hidden]{display:none}
.review-stars{color:var(--star); font-size:15px; letter-spacing:2px; margin-bottom:12px}
.review-text{font-family:var(--serif); font-size:19px; line-height:1.5; color:var(--ink); margin:0;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; overflow:hidden}
.review.expanded .review-text{-webkit-line-clamp:unset; display:block}
.review-toggle{align-self:flex-start; background:none; border:0; padding:6px 0 0; font-size:14px;
  font-weight:600; color:var(--accent); cursor:pointer}
.review-by{display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:18px;
  font-size:14px; color:var(--muted)}
.review-by img{width:32px; height:32px; border-radius:50%; flex:0 0 auto}
.review-by .initial{width:32px; height:32px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:var(--ink); color:var(--on-dark); font-size:14px; font-weight:600}
.review-by a{color:var(--ink); font-weight:600; text-decoration:none}
.review-by a:hover{text-decoration:underline}
.review-by .g-mark{width:16px; height:16px; margin-left:auto}
.reviews-foot{display:flex; align-items:center; flex-wrap:wrap; gap:14px 18px; margin-top:24px}
.reviews-foot[hidden],.reviews-foot [hidden]{display:none}
.g-attr{margin-left:auto; font-size:12px; color:var(--muted-2)}
.g-word{font-weight:600; color:var(--muted)}
@media (max-width:767px){
  .g-summary{font-size:14px; white-space:normal}
  .review{padding:22px}
  .review-text{font-size:17px}
  .reviews-foot .btn{width:100%}
  .g-attr{margin-left:0}
}

/* ---------- viewport helpers ---------- */
.m-only{display:none}
.ico{width:16px; height:16px; fill:currentColor; flex:0 0 auto; display:block}
.nav-phone .ico{display:none}

/* hero layers: still photo < video < scrim < copy. The still is what mobile and
   reduced-motion visitors see; on desktop the video paints over it once playing. */
.hero .hero-still{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.hero video{z-index:1}
.hero-scrim{z-index:2}
.hero-copy,.service-strip{z-index:3}

/* hamburger (shown at <=1023px) */
.nav-toggle{display:none; width:44px; height:44px; border-radius:999px; border:0; background:transparent;
  flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:0}
.nav-toggle span{display:block; width:20px; height:1.5px; background:var(--ink); transition:transform .2s}
.nav.open .nav-toggle span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav.open .nav-toggle span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* ---------- responsive ---------- */
@media (max-width:1279px){
  :root{--gutter:32px}
  .hero h1{font-size:60px}
}
@media (max-width:1023px){
  .svc-grid,.quotes{grid-template-columns:repeat(2,1fr)}
  .two,.ba-row,.faq-row,.steps-grid,.form-wrap{grid-template-columns:1fr}
  .trust{grid-template-columns:repeat(2,1fr)}
  .service-strip{grid-template-columns:1fr 1fr}
  .nav-links{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    background:var(--bg); border-bottom:1px solid var(--hair-2); padding:6px var(--gutter) 14px}
  .nav.open .nav-links{display:flex}
  .nav.open{background:var(--bg)}
  .nav-links a{display:block; padding:13px 0; font-size:17px; border-bottom:1px solid var(--hair-2)}
  .nav-toggle{display:flex}
  .form-photo{min-height:320px}
  .band{padding:56px 32px}
}
@media (max-width:767px){
  :root{--gutter:16px}
  body{font-size:15px}
  .d-only,.d-only-flex{display:none !important}
  span.m-only{display:inline} ul.m-only,div.m-only{display:block}

  /* utility strip — one line, 28px */
  .utility{height:28px; font-size:11px; padding:0 12px; white-space:nowrap}
  .utility-left{gap:0}

  /* nav — logo + wordmark left; round phone + hamburger right */
  .nav{height:64px; padding:0 12px 0 16px; position:sticky}
  .brand{gap:8px}
  .brand-mark{width:41px; height:38px}
  .brand-word{font-size:16px}
  .brand-sub{font-size:8px; letter-spacing:.14em; margin-top:4px}
  .nav-cta{gap:8px}
  .nav-estimate{display:none}
  .nav-phone{width:44px; height:44px; min-height:44px; padding:0; border-radius:999px; border-width:1.5px}
  .nav-phone .dot,.nav-phone .btn-text{display:none}
  .nav-phone .ico{display:block; width:18px; height:18px}

  /* hero — 300px photo frame; the service grid flows underneath it */
  .hero{margin:4px 12px 0; height:auto; border-radius:0; overflow:visible; padding-top:300px}
  .hero .hero-still,.hero video,.hero-scrim{top:0; bottom:auto; height:300px; border-radius:18px}
  .hero video{display:none}
  .hero-copy{top:0; bottom:auto; left:0; right:0; height:300px; max-width:none; padding:18px;
    display:flex; flex-direction:column; justify-content:flex-end}
  .hero-copy .eyebrow{display:none}
  .hero h1{font-size:30px; line-height:1.08; margin:0 0 10px}
  .hero-lead,.hero-btns{display:none}
  .hero-checks-m{margin:0; padding:0; list-style:none; font-size:12px; line-height:1.7; font-weight:500}

  .service-strip{position:relative; grid-template-columns:1fr 1fr; gap:8px; background:transparent;
    backdrop-filter:none; padding:12px 0 0}
  .service-strip .intro{display:none}
  .service-strip a{background:#fff; border:1px solid var(--hair); border-radius:12px; padding:14px;
    font-size:15px; min-height:48px}

  /* trust row — stars / 20+ / Free */
  .trust{grid-template-columns:repeat(3,1fr); gap:8px; padding:12px 12px 0}
  .t-desk{display:none}
  .tile{padding:12px 14px; border-radius:12px}
  .tile .num{font-size:22px}
  .tile .label{font-size:11px; margin-top:2px}
  .tile-dark .eyebrow,.tile-dark .big,.tile-dark .sub{display:none}
  .tile-dark .stars{font-size:13px; letter-spacing:1px; margin:0 0 4px}
  .tile-m{font-size:11px; line-height:1.35; opacity:.9}

  .section{padding:56px var(--gutter) 0}
  .section-head{flex-direction:column; align-items:flex-start; gap:12px}
  .section-head h2{font-size:30px}
  .svc-grid,.quotes{grid-template-columns:1fr}
  .svc h3{font-size:22px}
  .band{margin:56px 12px 0; padding:40px 24px; border-radius:18px}
  .band h2,.form-side h2{font-size:30px}
  .steps{grid-template-columns:1fr; gap:22px}
  .ba{height:320px}
  .card-lite,.card-accent{padding:28px}
  .card-lite h2,.card-accent h2{font-size:26px}
  .fields{grid-template-columns:1fr}
  .field input,.field select{height:50px; border-radius:12px}
  .form-wrap{margin:56px 12px 0; border-radius:18px}
  .form-side{padding:28px}
  .foot-grid{grid-template-columns:1fr 1fr; gap:24px}
  footer{margin-top:56px; padding:40px 16px 100px}

  /* sticky call / estimate bar */
  .sticky-bar{display:flex}
  .sticky-bar .ico{width:17px; height:17px}
}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .svc:hover .shot img{transform:none}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ============ service-area pages: town pages and service x town pages (design turn 2) ============ */
.ar-draft{background:#fff4d6; color:#5a4410; font-size:13px; padding:8px var(--gutter); border-bottom:1px solid #ecd9a0}
.ar-nav{border-bottom:1px solid var(--hair)}
.ar-crumbs{padding-top:20px; font-size:13px; color:var(--muted-2)}
.ar-crumbs a{color:inherit; text-decoration:none}
.ar-crumbs a:hover{color:var(--ink); text-decoration:underline}
.ar-crumbs [aria-current]{color:var(--ink)}
.ar-hero{display:grid; grid-template-columns:1.2fr 1fr; gap:56px; align-items:end; padding-top:28px}
.ar-hero-2b{grid-template-columns:1fr 1fr; align-items:center}
.ar-hero-index{grid-template-columns:minmax(0,820px)}
.ar-eyebrow{color:var(--accent); font-weight:500; margin:0 0 14px}
.ar-hero h1{font-size:58px; line-height:1.05; margin:0 0 14px; text-wrap:pretty}
.ar-hero-2b h1{margin-bottom:18px}
.ar-hoods{font-size:17px; color:var(--muted); margin:0 0 18px}
.ar-lead{font-size:19px; line-height:1.55; color:var(--ink-2); margin:0 0 28px; max-width:600px}
.ar-hero-2b .ar-lead{max-width:540px; margin-bottom:24px}
.ar-checks{list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:8px; font-size:15px; font-weight:500}
.ar-checks li{display:flex; gap:8px; align-items:baseline}
.ar-checks .tick{all:unset; color:var(--accent); font-weight:600; flex-shrink:0}
.ar-btns{display:flex; flex-wrap:wrap; gap:12px}
.ar-map{position:relative; height:380px; border-radius:22px; overflow:hidden; background:#e6e1d8}
.ar-map iframe{position:absolute; inset:0; width:100%; height:100%; border:0; filter:saturate(.75) contrast(.95)}
.ar-map-badge{position:absolute; top:16px; left:16px; background:#fff; border-radius:10px; padding:10px 14px; font-size:13px;
  box-shadow:0 4px 14px rgba(0,0,0,.08); pointer-events:none}
.ar-map-badge b{display:block; font-size:16px}
.ar-map-badge span{color:var(--muted)}
.ar-ph,.ar-hero-photo,.ar-case-img{position:relative; overflow:hidden;
  background:repeating-linear-gradient(135deg,#d8d2c8 0 12px,#e4dfd6 12px 24px)}
.ar-ph img,.ar-hero-photo img,.ar-case-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ar-hero-photo{height:520px; border-radius:22px}
.ar-ph-note{position:absolute; left:14px; bottom:12px; font:11px ui-monospace,Menlo,monospace; color:var(--muted)}
.ar-ph-tag{position:absolute; left:14px; bottom:12px; background:#fff; border-radius:6px; padding:5px 9px; font-size:12px; font-weight:600}
.ar-tag-top{top:16px; left:16px; bottom:auto; padding:6px 10px}
.ar-proof{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding-top:40px}
.ar-proof .tile{padding:24px 26px}
.ar-big{font-family:var(--serif); font-size:40px; line-height:1}
.ar-proof .label{margin-top:6px}
.ar-proof .stars{font-size:18px; margin:0}
.ar-proof .tile-dark .sub{font-size:14px; opacity:.8; margin-top:6px}
.ar-work{display:grid; grid-template-columns:1.2fr 1fr; gap:20px}
.ar-case{background:#fff; border:1px solid var(--hair); border-radius:20px; overflow:hidden; display:grid; grid-template-columns:1fr 1fr}
.ar-case-img{min-height:380px}
.ar-case-body{padding:34px}
.ar-case-where{font-size:13px; color:var(--muted-2)}
.ar-case h3{font-size:30px; line-height:1.15; margin:8px 0 14px}
.ar-case p{font-size:15px; line-height:1.6; color:var(--ink-2); margin:0 0 20px}
.ar-case-stats{display:flex; flex-wrap:wrap; gap:24px; font-size:13px; color:var(--muted)}
.ar-case-stats b{display:block; color:var(--ink); font-size:17px}
.ar-work-side{display:grid; grid-template-rows:1fr 1fr; gap:20px}
.ar-tile{border-radius:20px; min-height:180px}
.ar-h2{font-size:44px; line-height:1.1; margin:0 0 28px}
.ar-svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.ar-svc{background:#fff; border:1px solid var(--hair); border-radius:18px; padding:26px 28px; text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; gap:10px; transition:border-color .2s, transform .2s}
a.ar-svc:hover{border-color:var(--accent); transform:translateY(-2px)}
.ar-svc-t{display:flex; justify-content:space-between; gap:12px; font-family:var(--serif); font-size:26px; line-height:1.2}
.ar-arrow{color:var(--accent)}
.ar-svc-d{font-size:14px; color:var(--muted); line-height:1.5}
.ar-area-meta{font-size:13px; color:var(--muted-2); margin-top:auto}
.ar-svc-accent{background:var(--accent); color:#fff; border-radius:18px; padding:26px 28px; display:flex; flex-direction:column; justify-content:space-between; gap:18px}
.ar-svc-accent p{font-size:14px; opacity:.9; margin:0 0 12px}
.ar-local{margin:96px 24px 0; background:var(--ink); color:var(--on-dark); border-radius:24px; padding:64px 56px;
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:48px}
.ar-eyebrow-soft{color:var(--accent-soft); font-weight:500; margin:0 0 14px}
.ar-local h2{font-size:40px; line-height:1.1}
.ar-local-lead{font-size:15px; line-height:1.6; opacity:.75; margin:16px 0 0}
.ar-local h3{font-family:var(--sans); font-weight:600; font-size:18px; margin:0 0 10px; letter-spacing:0}
.ar-local p{font-size:15px; line-height:1.65; opacity:.85; margin:0}
.ar-local .ar-local-link{margin-top:14px; font-size:14px}
.ar-local a{color:var(--accent-soft)}
.ar-rev-row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; align-items:start}
.ar-review,.ar-faq-card{background:#fff; border:1px solid var(--hair); border-radius:18px; padding:28px; margin:0}
.ar-stars{color:var(--star); letter-spacing:2px; font-size:14px; margin-bottom:10px}
.ar-review blockquote{font-family:var(--serif); font-size:20px; line-height:1.45; margin:0 0 16px}
.ar-review figcaption{font-size:14px; color:var(--muted)}
.ar-faq-card h3{font-size:24px; margin:0 0 14px}
.ar-faq-card .faq summary{font-size:15px; padding:12px 0}
.ar-faq-card .faq summary::after{font-size:18px}
.ar-faq-card .faq .ans{font-size:14px; line-height:1.6; margin:-4px 0 14px}
.ar-faq-card .faq details:last-child{border-bottom:1px solid var(--hair-3)}
.ar-chips{display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding-top:72px}
.ar-chips .chip{padding:8px 14px}
.ar-chips a.chip:not([href]){cursor:default}
.ar-chips-label{font-size:14px; color:var(--muted); margin-right:8px}
.ar-also{font-size:14px; color:var(--muted-2); margin-left:8px}
.ar-also a{color:var(--accent); font-weight:600; text-decoration:none}
.ar-also a:hover{text-decoration:underline}
.ar-also a:not([href]){color:var(--muted)}
.ar-cta{margin:72px 24px 0; background:var(--accent); color:#fff; border-radius:24px; padding:56px;
  display:flex; justify-content:space-between; align-items:center; gap:40px}
.ar-cta h2{font-size:44px; line-height:1.1; margin:0 0 10px}
.ar-cta p{font-size:17px; margin:0; opacity:.92}
.ar-cta-btns{display:flex; gap:12px; flex-shrink:0}
.ar-gallery{display:grid; grid-template-columns:1fr 1.6fr; gap:56px}
.ar-gallery h2{font-size:40px; line-height:1.1; margin:0 0 14px}
.ar-gallery p:not(.eyebrow){color:var(--muted); font-size:16px; line-height:1.6; margin:0}
.ar-gal-grid{display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:220px; gap:16px}
.ar-gal{border-radius:18px}
.ar-pricing{grid-template-columns:1fr 1.4fr; gap:56px}
.ar-pricing h2{font-size:44px}
.ar-pricing .ar-local-lead{font-size:16px; opacity:.8}
.ar-tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.ar-tier{background:rgba(255,255,255,.06); border:1px solid var(--hair-dark); border-radius:16px; padding:26px}
.ar-tier.featured{background:var(--accent); border-color:transparent}
.ar-tier-l{font-size:12px; letter-spacing:.14em; text-transform:uppercase; opacity:.7}
.ar-tier.featured .ar-tier-l{opacity:.85}
.ar-tier-v{font-family:var(--serif); font-size:34px; margin:10px 0 8px}
.ar-tier-d{font-size:14px; line-height:1.55; opacity:.8}
.ar-index-note{margin:28px 0 0; color:var(--muted); font-size:15px}
.ar-index-note a{color:var(--accent); font-weight:600}

@media (max-width:1279px){
  .ar-hero h1{font-size:50px}
  .ar-local{grid-template-columns:1fr 1fr}
  .ar-local > div:first-child{grid-column:1 / -1}
  .ar-pricing{grid-template-columns:1fr}
}
@media (max-width:1023px){
  .ar-hero,.ar-hero-2b,.ar-work,.ar-gallery{grid-template-columns:1fr; gap:32px}
  .ar-proof{grid-template-columns:1fr 1fr}
  .ar-svc-grid{grid-template-columns:1fr 1fr}
  .ar-rev-row{grid-template-columns:1fr 1fr}
  .ar-faq-card{grid-column:1 / -1}
  .ar-cta{flex-direction:column; align-items:flex-start}
  .ar-hero-photo{height:420px}
}
@media (max-width:767px){
  .ar-crumbs{padding-top:14px}
  .ar-hero{padding-top:18px; gap:24px}
  .ar-hero h1{font-size:38px}
  .ar-hoods{font-size:15px}
  .ar-lead{font-size:17px; margin-bottom:22px}
  .ar-btns .btn{flex:1 1 100%}
  .ar-map{height:260px; border-radius:18px}
  .ar-hero-photo{height:300px; border-radius:18px}
  .ar-proof{gap:10px; padding-top:28px}
  .ar-proof .tile{padding:18px}
  .ar-big{font-size:30px}
  .ar-proof .label{font-size:13px}
  .ar-case{grid-template-columns:1fr}
  .ar-case-img{min-height:220px}
  .ar-case-body{padding:24px}
  .ar-case h3{font-size:24px}
  .ar-work-side{grid-template-rows:none; grid-template-columns:1fr 1fr; gap:12px}
  .ar-tile{min-height:150px; border-radius:16px}
  .ar-h2,.ar-gallery h2{font-size:32px}
  .ar-svc-grid,.ar-rev-row,.ar-tiers{grid-template-columns:1fr}
  .ar-svc{padding:22px}
  .ar-svc-t{font-size:22px}
  .ar-local{margin:56px 12px 0; padding:40px 22px; grid-template-columns:1fr; gap:28px}
  .ar-local h2,.ar-pricing h2{font-size:32px}
  .ar-gal-grid{grid-template-columns:1fr 1fr; grid-auto-rows:160px; gap:10px}
  .ar-gal:first-child{grid-column:1 / -1}
  .ar-chips{padding-top:48px}
  .ar-also{margin-left:0; flex-basis:100%}
  .ar-cta{margin:56px 12px 0; padding:36px 22px; gap:24px}
  .ar-cta h2{font-size:32px}
  .ar-cta-btns{flex-direction:column; width:100%}
  .ar-cta-btns .btn{width:100%}
}
.map-ph.map-live{position:relative; padding:0; overflow:hidden; display:block}
.map-ph.map-live iframe{position:absolute; inset:0; width:100%; height:100%; border:0; filter:saturate(.75) contrast(.95)}

/* ── End of page on phones ─────────────────────────────────────────────
   On an iPhone you can pull past the last pixel, and the browser shows
   whatever is behind the page. That was a light colour under a dark footer,
   so the page looked like it kept going. Stop the bounce, and paint the
   canvas the footer's colour for browsers that ignore overscroll-behavior.
   body keeps its own background, so the page itself doesn't change. */
html { background-color: #17202E; overscroll-behavior-y: none; }
body { overscroll-behavior-y: none; }
/* The call bar is pinned to the bottom of the screen on phones. Without room
   reserved for it, it covered the end of the footer, so you kept scrolling
   to reach content you could never see. The bar is 73px plus the iPhone home-indicator area, and nothing was reserved. */
@media (max-width: 767px) { body { padding-bottom: calc(73px + env(safe-area-inset-bottom)); } }