/* Max's Construction LLC - Glenwood Springs, CO
   Vanilla CSS, no framework, no build step (matches repo convention). */

/* Archivo, self-hosted. Google's stylesheet was a render-blocking request to a third
   party before a single byte of the page could paint; these two files are served from
   our own origin, cached a year by _headers, and the latin one is preloaded in <head>.
   It is one variable font: Google serves the same file for 700 and 800, so the weight
   range is declared once. Re-fetch with:
     curl -A "<a desktop Chrome UA>" \
       "https://fonts.googleapis.com/css2?family=Archivo:wght@700;800&display=swap" */
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:700 800;font-stretch:100%;font-display:swap;
  src:url(/fonts/archivo-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:700 800;font-stretch:100%;font-display:swap;
  src:url(/fonts/archivo-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --ink:#16191c;          /* body text */
  --ink-soft:#4d565e;     /* secondary text */
  --char:#1d2327;         /* dark sections */
  --char-2:#2b3237;
  --paper:#ffffff;
  --paper-2:#f6f4f1;      /* warm off-white */
  --line:#e2ddd6;
  --amber:#a35a16;        /* timber/amber accent - white on this is 5.21:1 (AA) */
  --amber-ink:#8f4f12;    /* accessible on paper */
  --amber-soft:#fff6ec;
  --ok:#2f6b46;
  --bad:#a3301f;
  --focus:#0b63c5;
  --wrap:1180px;
  --r:10px;
  --shadow:0 1px 2px rgba(16,20,24,.06),0 8px 24px rgba(16,20,24,.07);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--amber-ink);text-underline-offset:3px}
a:hover{color:var(--amber)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--display);line-height:1.14;margin:0 0 .5em;letter-spacing:-.015em;font-weight:800}
h1{font-size:clamp(2.1rem,5.2vw,3.5rem);text-wrap:balance}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem);text-wrap:balance}
h3{font-size:1.16rem;font-weight:700}
p{margin:0 0 1.05em}
.lede{font-size:clamp(1.06rem,2vw,1.26rem);color:var(--ink-soft);max-width:62ch}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
section{padding:clamp(3rem,7vw,5.5rem) 0}
.eyebrow{
  font-size:.775rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber-ink);margin:0 0 .7rem;
}
.tint{background:var(--paper-2)}
.dark{background:var(--char);color:#eef1f3}
.dark h2,.dark h3{color:#fff}
.dark p{color:#c3ccd2}
.dark .eyebrow{color:#f0b675}
/* Links in a dark section must not inherit --amber-ink, which is tuned for white paper:
   on charcoal it measures 2.49:1, well under AA. This is 8.96:1. */
.dark a{color:#f0b87a}
.dark a:hover{color:#fff}
.muted{color:var(--ink-soft);font-size:.94rem}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:.7rem 1rem;z-index:100}
.skip:focus{left:8px;top:8px}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:1.5rem;min-height:70px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);line-height:1.1}
.brand:hover{color:var(--ink)}
.brand svg{flex:0 0 auto}
.brand-mark{height:34px;width:32px}
.brand-t{display:flex;flex-direction:column}
.brand b{display:block;font-family:var(--display);font-weight:800;font-size:1.06rem;letter-spacing:-.02em}
.brand-t>span{display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
/* The brand block steps down on small phones so the name never wraps - a wrapped
   business name turns the header into four lines. These rules must stay BELOW the base
   .brand rules above: written first at equal specificity they were silently inert. */
@media (max-width:400px){
  .brand{gap:.45rem}
  .brand-mark{height:28px;width:26px}
  .brand b{font-size:.94rem}
  .brand-t>span{font-size:.61rem;letter-spacing:.06em}
}
.nav{margin-left:auto;display:flex;align-items:center;gap:1.3rem}
.nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem}
.nav a:hover{color:var(--amber-ink)}
.nav-call{display:inline-flex;align-items:center;gap:.45rem;background:var(--char);color:#fff !important;padding:.6rem 1rem;border-radius:8px;font-weight:700}
.nav-call:hover{background:var(--amber)}
.nav-lang{border:1px solid var(--line);border-radius:99px;padding:.35rem .8rem;font-size:.88rem !important;color:var(--ink-soft) !important}
.nav-lang:hover{border-color:var(--amber);color:var(--amber-ink) !important}

/* language suggestion (in page flow under the header; scrolls away; hidden until the script decides) */
.lang-sug{background:var(--amber-soft);border-bottom:1px solid #efcfa9;opacity:0;transform:translateY(-6px);transition:opacity .25s ease,transform .25s ease}
.lang-sug.visible{opacity:1;transform:none}
.lang-sug-in{display:flex;align-items:center;gap:.6rem;padding-block:.55rem}
.lang-sug-in p{margin:0 auto 0 0;font-size:.93rem;color:var(--ink)}
.lang-sug-go{font-weight:700;font-size:.93rem;white-space:nowrap;padding:.45rem .2rem;min-height:40px;display:inline-flex;align-items:center}
.lang-sug-x{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:50%;
  background:none;color:var(--ink-soft);cursor:pointer}
.lang-sug-x:hover{background:rgba(143,79,18,.1);color:var(--amber-ink)}
@media (max-width:560px){.lang-sug-in p{font-size:.86rem}.lang-sug-go{font-size:.86rem}}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;
  padding:.5rem .6rem;cursor:pointer;min-width:44px;min-height:44px;align-items:center;justify-content:center;flex-direction:column}
.burger span{display:block;width:20px;height:2px;background:var(--ink);margin:2px 0}

@media (max-width:960px){
  .nav{position:fixed;inset:70px 0 auto 0;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:.5rem 20px 1rem;display:none;box-shadow:var(--shadow)}
  .nav[data-open="true"]{display:flex}
  .nav a{padding:.85rem 0;border-bottom:1px solid var(--line)}
  .nav a.nav-lang{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:.85rem 0;font-size:.95rem !important;color:var(--ink) !important}
  .nav-call{margin-top:.9rem;justify-content:center;border-bottom:0 !important}
  .burger{display:flex}
}

/* hero: text beside the finished kitchen */
.hero{background:var(--char);color:#fff;padding:0}
.hero-in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(2rem,5vw,4.5rem);
  align-items:center;padding-block:clamp(2.6rem,6vw,5rem)}
.hero h1{color:#fff}
.hero .lede{color:#d7dee3}
.hero-loc{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#f0b675;margin-bottom:1rem}
.hero-photo{margin:0;position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/5;max-height:660px;background:var(--char-2)}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.2rem 1rem .8rem;font-size:.85rem;color:#e6ebee;
  background:linear-gradient(180deg,rgba(16,20,23,0) 0%,rgba(16,20,23,.82) 100%)}
.hero-meta{display:flex;flex-wrap:wrap;gap:.45rem 1.3rem;list-style:none;padding:0;margin:1.5rem 0 0;font-size:.92rem;color:#c9d2d8}
.hero-meta li{display:flex;align-items:center;gap:.45rem}
.hero-meta svg{color:#f0b675;flex:0 0 auto}
@media (max-width:880px){
  .hero-in{grid-template-columns:1fr}
  .hero-photo{aspect-ratio:4/3}
}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.7rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.92rem 1.4rem;border-radius:9px;font-weight:700;
  text-decoration:none;font-size:1rem;border:2px solid transparent;transition:transform .08s ease;font-family:inherit;cursor:pointer;line-height:1.2}
.btn:active{transform:translateY(1px)}
.btn-1{background:var(--amber);color:#fff !important;border-color:var(--amber)}
.btn-1:hover{background:#8a4c11;border-color:#8a4c11}
.btn-2{background:transparent;color:#fff !important;border-color:rgba(255,255,255,.5)}
.btn-2:hover{border-color:#fff;background:rgba(255,255,255,.09)}
.btn-3{background:var(--char);color:#fff !important;border-color:var(--char)}
.btn-3:hover{background:var(--amber);border-color:var(--amber)}
.btn-4{background:#fff;color:var(--ink) !important;border-color:#cfc7bd}
.btn-4:hover{border-color:var(--ink)}
.btn[disabled]{opacity:.6;cursor:progress}

/* trust strip */
.strip{background:var(--char-2);color:#dde3e7;border-top:1px solid rgba(255,255,255,.08)}
.strip ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.9rem 1.8rem;
  list-style:none;margin:0;padding:1.4rem 0;font-size:.94rem}
.strip li{display:flex;gap:.6rem;align-items:flex-start}
.strip svg{flex:0 0 auto;margin-top:.28rem;color:#f0b675}
.strip b{color:#fff}

/* grids */
.grid{display:grid;gap:1.5rem}
.g-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,272px),1fr))}
/* Six service cards: 1, 2 or 3 across - never a single orphan on its own row. */
.g-svc{grid-template-columns:1fr;gap:1.2rem}
@media (min-width:580px){.g-svc{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.g-svc{grid-template-columns:repeat(3,1fr)}}

/* service cards */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.card-img{aspect-ratio:3/2;background:var(--paper-2);overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-b{padding:1.2rem 1.3rem 1.35rem;display:flex;flex-direction:column;flex:1}
.card h3{margin-bottom:.4rem}
.card p{font-size:.96rem;color:var(--ink-soft);margin-bottom:.9rem}
.card .more{font-weight:700;font-size:.93rem;text-decoration:none;display:inline-flex;gap:.35rem;align-items:center;margin-top:auto;color:var(--amber-ink)}
a.card{text-decoration:none;color:inherit;transition:box-shadow .15s ease,border-color .15s ease}
a.card:hover{box-shadow:var(--shadow);border-color:#cfc7bd}
.card-lead{position:relative}
.card-lead .tag{position:absolute;top:.75rem;left:.75rem;background:var(--amber);color:#fff;font-size:.7rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:.25rem .55rem;border-radius:5px}

/* extra trades list */
.trades{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.55rem 1.6rem;
  list-style:none;padding:0;margin:1.4rem 0 0}
.trades li{display:flex;gap:.6rem;font-size:.97rem;border-bottom:1px solid var(--line);padding:.6rem 0}
.trades a{display:inline-flex;align-items:center;min-height:32px}
.trades svg{flex:0 0 auto;margin-top:.3rem;color:var(--amber)}

/* before and after */
.ba{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:1.4rem;margin-top:2rem}
.ba figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--line)}
.ba-pair div{position:relative;aspect-ratio:1/1;background:var(--paper-2);overflow:hidden;min-width:0}
.ba-pair button{display:block;width:100%;height:100%;padding:0;border:0;background:none;
  cursor:zoom-in;overflow:hidden}
.ba-pair img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.ba-pair button:hover img{transform:scale(1.045)}
.ba-tag{pointer-events:none;position:absolute;left:.55rem;top:.55rem;background:rgba(16,20,23,.84);color:#fff;font-size:.7rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:.22rem .5rem;border-radius:5px}
.ba-tag.after{background:var(--amber)}
.ba figcaption{padding:.9rem 1.1rem 1rem;font-size:.95rem;color:var(--ink-soft)}
.ba figcaption b{display:block;color:var(--ink);font-size:1rem;margin-bottom:.15rem}

/* why people hire Max */
.why{list-style:none;padding:0;margin:2.1rem 0 0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr));counter-reset:w}
.why li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.2rem 1.25rem;counter-increment:w}
.why li::before{content:"0" counter(w);display:block;font-family:var(--display);font-weight:800;font-size:.85rem;letter-spacing:.08em;color:var(--amber-ink);margin-bottom:.45rem}
.why h3{font-size:1.06rem;margin-bottom:.35rem}
.why p{font-size:.94rem;color:var(--ink-soft);margin:0}

/* customer reviews (render only when REVIEWS in the generator is non-empty) */
.rev-h{margin:2.4rem 0 0;font-size:1.1rem}
.revs{display:grid;gap:1rem;margin-top:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.rev{margin:0;background:#fff;border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--r);padding:1.1rem 1.2rem}
.rev blockquote{margin:0;font-size:1rem;line-height:1.55}
.rev figcaption{margin-top:.6rem;font-size:.9rem;color:var(--ink-soft)}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,238px),1fr));gap:.85rem}
.gal button{padding:0;border:0;background:var(--paper-2);border-radius:8px;overflow:hidden;cursor:zoom-in;
  aspect-ratio:1/1;display:block;width:100%}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.gal button:hover img{transform:scale(1.045)}
@media (max-width:520px){.gal{grid-template-columns:repeat(2,1fr);gap:.5rem}}

/* lightbox */
/* Opaque enough that the page behind stops competing. At .93 the hero buttons and
   trust strip read straight through, which looked cluttered once the photo, caption
   and arrows became one compact group instead of filling the screen. */
.lb{position:fixed;inset:0;z-index:200;background:rgba(10,13,15,.975);backdrop-filter:blur(3px);display:none;
  align-items:center;justify-content:center;padding:clamp(.5rem,3vw,2.5rem)}
.lb[data-open="true"]{display:flex}
/* Fill the viewport, keeping a deliberate margin and room for the caption and the close
   button. These photos are portrait, so height is what binds: 82vh left a lot of empty
   screen on a laptop. */
/* The photo, its caption and the arrows are one centred column, so the caption sits under
   the image whatever shape it is. Pinning the caption to the bottom of the screen left a
   landscape photo stranded in the middle with 200px of nothing under it. */
.lb-stage{display:flex;flex-direction:column;align-items:center;gap:.85rem;
  max-width:100%;min-height:0}
/* Cap the height in VIEWPORT units, not percent. Inside a column flex box whose own height
   comes from its content, a percentage max-height has nothing fixed to resolve against and
   silently stops binding - which let the image render at 105% of the screen. */
.lb img{max-width:100%;max-height:calc(100vh - 9.5rem);border-radius:6px;
  box-shadow:0 18px 50px rgba(0,0,0,.45)}
.lb-nav{display:none}
.lb-cap{text-align:center;color:#dfe5e9;font-size:.92rem;padding:0 1rem;margin:0;max-width:60ch}
.lb-x,.lb-p,.lb-n{position:absolute;background:rgba(255,255,255,.13);color:#fff;border:0;border-radius:8px;
  cursor:pointer;font-size:1.35rem;line-height:1;padding:.6rem .8rem;min-width:44px;min-height:44px}
.lb-x{top:max(.8rem,2vw);right:max(.8rem,2vw)}
.lb-p,.lb-n{top:50%;transform:translateY(-50%)}
.lb-p{left:max(.5rem,1.5vw)}
.lb-n{right:max(.5rem,1.5vw)}
@media (max-width:700px){
  /* On a phone the arrows join the column, under the caption: a portrait photo is
     width-bound so they would otherwise sit on top of it, and a landscape one leaves them
     stranded far below. In the flow they follow the photo whatever its shape. */
  .lb img{max-height:calc(100vh - 12rem)}
  .lb-nav{display:flex;gap:1.1rem}
  .lb-p,.lb-n{position:static;transform:none}
}
.lb-p:hover,.lb-n:hover,.lb-x:hover{background:rgba(255,255,255,.26)}

/* split feature */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.split img{border-radius:var(--r)}
.split>div>img{width:100%;max-height:560px;object-fit:cover}
/* A portrait of a person, so a portrait frame - and capped, because a photo of Max
   does not need to be as wide as the column beside it. */
.about-photo{margin:0 auto;max-width:430px;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--paper-2)}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;border-radius:0}
.facts{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.55rem}
.facts li{display:flex;gap:.6rem;align-items:flex-start}
.facts svg{flex:0 0 auto;margin-top:.32rem;color:var(--amber)}
.photo-note{font-size:.85rem;color:var(--ink-soft);margin:.6rem 0 0}

/* steps */
.steps{counter-reset:s;list-style:none;padding:0;margin:1.8rem 0 0;display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.steps li{counter-increment:s;padding-top:.9rem;border-top:3px solid var(--amber)}
.steps li::before{content:"0" counter(s);display:block;font-weight:800;font-size:.85rem;letter-spacing:.1em;color:#f0b675;margin-bottom:.3rem}
.steps h3{font-size:1.05rem;margin-bottom:.3rem}
.steps p{font-size:.95rem;margin:0}

/* service areas */
.area-groups{display:grid;gap:1.4rem 2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin-top:1.8rem}
.area-groups h3{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.2rem}
.areas{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:.6rem 0 0}
.area-chip{background:#fff;border:1px solid var(--line);border-radius:99px;padding:.4rem .9rem;
  font:inherit;font-size:.93rem;font-weight:600;color:var(--ink);cursor:pointer}
.area-chip.home{border-color:var(--amber);color:var(--amber-ink)}
.area-chip:hover{border-color:var(--amber)}
.area-chip[aria-pressed="true"]{background:var(--char);border-color:var(--char);color:#fff}
/* The group heading is a button but must not look like one - it is still the heading. */
.area-head{background:none;border:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit;
  text-transform:inherit;cursor:pointer;text-align:left}
.area-head:hover{color:var(--amber-ink)}
.area-head[aria-pressed="true"]{color:var(--amber-ink);text-decoration:underline;
  text-underline-offset:4px}

/* ---- service-area map ------------------------------------------------------
   One inline SVG: no tiles, no map provider, no key, no request at page load. The pins
   are pointer targets only; every town also has a real <button> in the list below, which
   is what keyboards and screen readers use. */
.amap-wrap{margin:1.8rem 0 0;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:.5rem}
/* Full bleed where width is scarce. .wrap is max-width 1180 with a 20px gutter, so pulling
   20px each side reaches the viewport edge on anything narrower than that - which is every
   phone and tablet. Above it the card stays contained: a map wider than the heading above
   it looks unmoored, and there is no shortage of room to fix. */
@media (max-width:900px){
  .amap-wrap{margin-inline:-20px;border-radius:0;border-left:0;border-right:0;padding:0}
}
.amap-svg{display:block;width:100%;height:auto}
.amap-band{fill:none;stroke:var(--amber);stroke-opacity:.30;stroke-width:34;
  stroke-linecap:round;stroke-linejoin:round}
/* Real highways, cased the way a road map does it: a darker line underneath, a lighter
   one on top, so the road stays legible over green, tan and amber alike. */
.amap-hwy-case,.amap-hwy2-case,.amap-loc-case,
.amap-hwy,.amap-hwy2,.amap-loc{fill:none;stroke-linecap:round;
  stroke-linejoin:round;pointer-events:none}
.amap-hwy-case{stroke:#8d8579;stroke-width:4.6;stroke-opacity:.55}
.amap-hwy{stroke:#fffdf8;stroke-width:2.6}
.amap-hwy2-case{stroke:#958d81;stroke-width:3;stroke-opacity:.4}
.amap-hwy2{stroke:#fffdf8;stroke-width:1.5;stroke-opacity:.9}
/* The access roads for Missouri Heights and Snowmass Village, the two towns not on a
   highway. Lightest weight on the map - they are how you get there, not a through route. */
.amap-loc-case{stroke:#9b9286;stroke-width:2.2;stroke-opacity:.3}
.amap-loc{stroke:#fffdf8;stroke-width:1.1;stroke-opacity:.75}
.amap-terrain{pointer-events:none}
/* Rivers sit above the basemap and below the corridors, so an amber band crossing one
   reads as a road bridging a valley rather than the river stopping. */
.amap-river,.amap-creek{fill:none;stroke:#7ea9c9;stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none}
.amap-river{stroke-width:2.6;stroke-opacity:.85}
.amap-creek{stroke-width:1.4;stroke-opacity:.55}
.amap-hit{fill:transparent}
.amap-dot{fill:var(--char);stroke:#fff;stroke-width:3}
.is-home .amap-dot{fill:var(--amber)}
/* Halos, the way any printed map does it. The basemap underneath is green and tan and
   varies constantly, so the labels carry their own background instead of forcing the
   basemap to stay pale enough for text. paint-order draws the stroke first, so the
   stroke thickens the glyph outward rather than eating into it. */
.amap-lbl,.amap-cap{paint-order:stroke fill;stroke:#fff;stroke-linejoin:round}
.amap-lbl{font-family:var(--display);font-size:18px;font-weight:600;fill:var(--ink);
  stroke-width:3.5px}
.amap-cap{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;fill:#3a4147;pointer-events:none;stroke-width:4px}
.is-home .amap-lbl{font-size:20px;font-weight:800}
.amap-g,.amap-t{transition:opacity .18s ease}
/* Dimming is a class, not a per-group selector, so adding a fourth area needs no CSS. */
.amap-g.is-off,.amap-t.is-off{opacity:.2}
.amap-t.is-on .amap-dot{fill:var(--amber);r:11}
.amap-t.is-on .amap-lbl{font-weight:800}
.amap-out{margin:.9rem 0 0;font-weight:600;color:var(--ink-soft);min-height:1.5em}
.amap-out b{color:var(--ink)}
.amap-reset{background:none;border:0;padding:0 0 0 .6rem;font:inherit;font-weight:600;
  color:var(--amber-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

@media (hover:hover){
  .amap-t{cursor:pointer}
  .amap-t:hover .amap-dot{fill:var(--amber)}
}
/* Eighteen 18px labels in a 360px-wide valley is unreadable, so on small screens the map
   keeps only the hub and whatever is selected, and the buttons below carry the names. */
/* SVG text is sized in USER UNITS, so what it renders at depends on how wide the map is
   drawn: at a 390px viewport the scale is 0.325 and the 17px captions were coming out at
   7.2px on screen. Measured with getBoundingClientRect, because the responsive sweep only
   inspects HTML text and never caught it. These two blocks keep everything >= 12px. */
@media (max-width:900px){
  .amap-cap{font-size:24px}
  .amap-lbl{font-size:22px}
  .is-home .amap-lbl{font-size:24px}
}
@media (max-width:700px){
  .amap-lbl{display:none}
  /* thicker so they survive being drawn a third of the size */
  .amap-river{stroke-width:3.6}
  .amap-creek{stroke-width:2}
  .amap-hwy-case{stroke-width:6}
  .amap-hwy{stroke-width:3.4}
  .amap-hwy2-case{stroke-width:3.8}
  .amap-hwy2{stroke-width:2}
  .amap-loc-case{stroke-width:2.8}
  .amap-loc{stroke-width:1.5}
  /* At 0.325 scale even 24px lands at 7.8px, and the three area names sit right below the
     map as buttons - a caption nobody can read is worse than no caption. */
  .amap-cap{display:none}
  .is-home .amap-lbl,.amap-t.is-on .amap-lbl{display:block;font-size:38px}
  .amap-band{stroke-width:42}
  .amap-dot{r:9}
  .is-home .amap-dot{r:13}
  .amap-t.is-on .amap-dot{r:15}
}

/* FAQ */
.faq{margin-top:1.6rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700;padding:1.05rem 2rem 1.05rem 0;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:.95rem;font-size:1.4rem;font-weight:400;color:var(--amber-ink)}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin:0 0 1.1rem;color:var(--ink-soft);max-width:70ch}

/* callout (leaks, storm damage) */
.alert{display:flex;gap:.9rem;align-items:flex-start;background:var(--amber-soft);border:1px solid #efcfa9;
  border-left:4px solid var(--amber);border-radius:var(--r);padding:1rem 1.2rem;margin-top:1.6rem}
.alert svg{flex:0 0 auto;color:var(--amber-ink);margin-top:.2rem}
.alert p{margin:0}
.alert a{font-weight:700;white-space:nowrap}

/* CTA band */
.cta{background:var(--amber);color:#fff}
.cta h2{color:#fff;margin-bottom:.35rem}
.cta p{color:#fdeedd;max-width:56ch;margin:0}
.cta .btn-1{background:#fff;color:var(--amber-ink) !important;border-color:#fff}
.cta .btn-1:hover{background:#fff6ec;border-color:#fff6ec}
.cta .btn-2{border-color:rgba(255,255,255,.65)}
.cta-in{display:flex;flex-wrap:wrap;gap:1.6rem 2.5rem;align-items:center;justify-content:space-between}

/* contact */
.contact-grid{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}
@media (max-width:880px){.contact-grid{grid-template-columns:1fr}}
.cbox{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.5rem}
.cbox+.cbox{margin-top:1.2rem}
.cbox h2{font-size:1.35rem;margin-bottom:.4rem}
.cbox h3{margin-bottom:.5rem}
.big-tel{font-family:var(--display);font-size:clamp(1.55rem,4vw,2.05rem);font-weight:800;letter-spacing:-.02em;text-decoration:none;display:inline-block;margin:.2rem 0 .4rem}
.hours{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;margin:.6rem 0 0;font-size:.95rem}
.hours dt{font-weight:700}
.hours dd{margin:0;color:var(--ink-soft)}

/* form */
.form{display:grid;gap:1rem;margin-top:1.1rem}
.row2{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.field{min-width:0;margin:0;padding:0;border:0}
.field>label,.field legend{display:block;font-weight:700;font-size:.93rem;margin-bottom:.35rem;padding:0}
.field .opt{font-weight:400;color:var(--ink-soft)}
.field input[type=text],.field input[type=tel],.field select,.field textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid #bfb6ab;border-radius:8px;
  padding:.7rem .85rem;min-height:48px}
.field textarea{min-height:128px;resize:vertical}
/* Our own chevron. The native one sits hard against the border with no room to
   breathe, and Chrome, Safari and Firefox each draw a different shape. */
.field select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' stroke='%234d565e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center}
/* Text-like fields only. The reply choice is a `field seg` fieldset, so an
   unqualified `.field input:focus` also drew this 3px square around the 13px
   radio inside the pill — on plain :focus, which a mouse click sets. */
.field input:not([type=radio]):not([type=checkbox]):focus,
.field select:focus,.field textarea:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.field [aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}
.seg{display:flex;flex-wrap:wrap;gap:.5rem}
.seg legend{width:100%}
.seg label{display:inline-flex;align-items:center;gap:.5rem;border:1px solid #bfb6ab;border-radius:99px;padding:.5rem 1rem;min-height:44px;cursor:pointer;font-weight:600}
.seg label:has(input:checked){border-color:var(--amber);background:var(--amber-soft);color:var(--amber-ink)}
.seg input{accent-color:var(--amber);margin:0}
/* The pill is the control. A focus ring drawn around the little circle inside it
   reads as a stray square, so the ring goes on the pill — same keyboard cue,
   nothing floating in the middle of the button. */
.seg input:focus-visible{outline:none}
.seg label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.hp{position:absolute !important;left:-10000px;width:1px;height:1px;overflow:hidden}
/* Turnstile sits between the last field and the button. "flexible" fills the
   column, but the widget will not go below 300px, and the card is narrower than
   that under a ~390px viewport - so on small phones it is scaled down inside a
   clipping wrapper instead of pushing the page sideways. */
.ts-wrap{overflow:hidden;min-height:65px;margin:.2rem 0}
.cf-turnstile{min-height:65px}
@media (max-width:392px){.ts-wrap{min-height:59px}.cf-turnstile{transform:scale(.9);transform-origin:left top}}
@media (max-width:344px){.ts-wrap{min-height:53px}.cf-turnstile{transform:scale(.8);transform-origin:left top}}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem}
.form-status{margin:0;font-weight:600}
.form-status[data-state="ok"]{color:var(--ok)}
.form-status[data-state="err"]{color:var(--bad)}
.form-done{background:#eef6f0;border:1px solid #cfe3d5;border-radius:var(--r);padding:1.2rem 1.3rem}
.form-done h3{color:var(--ok);margin-bottom:.3rem}
.form-done p{margin:0}

/* footer */
.ftr{background:var(--char);color:#aeb8bf;font-size:.93rem}
.ftr-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;padding:3rem 0 1.6rem}
/* h3, not h4: the amber CTA's <h2> sits directly above the footer, so an <h4> here
   skipped a level and failed Lighthouse's heading-order audit. Styled small on purpose. */
.ftr h3{color:#fff;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:.9rem}
.ftr-logo{display:block;width:150px;height:161px;margin:-.4rem 0 1rem}
.ftr a{color:#d3dbe0;text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin-bottom:.35rem}
.ftr-bot{border-top:1px solid rgba(255,255,255,.1);padding:1.2rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-size:.86rem;color:#8b959c}
/* Directly under the copyright, same size and colour: two lines of one block,
   not two separate blocks. */
.ftr-credit{padding:.15rem 0 2.2rem;font-size:.86rem;color:#8b959c}
.ftr-credit a{color:#b9c2c8}

/* breadcrumb */
.bc{font-size:.86rem;color:var(--ink-soft);padding-top:1.4rem}
.bc a{text-decoration:none}
.bc ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0}
.bc li+li::before{content:"/";margin-right:.4rem;color:#b9b1a6}

/* interior page head */
.phead{background:var(--paper-2);border-bottom:1px solid var(--line)}
.phead .inner{padding-block:.4rem clamp(2.2rem,5vw,3.4rem)}

/* phone-only text/call bar: the two things a visitor on a phone actually wants */
.mbar{display:none}
@media (max-width:880px){
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(16,20,24,.08);
    padding:.55rem .75rem calc(.55rem + env(safe-area-inset-bottom))}
  .mbar .btn{padding:.78rem .6rem;font-size:.98rem}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}

/* Touch targets. These lists are the site's internal links - the footer service list,
   "Other services" at the foot of a service page, the breadcrumb - and at 32px with a
   6px gap they sat inside each other's thumb zone, which is what Lighthouse means by
   "tap targets are not sized appropriately". 44px with an 8px gap clears it.

   Keyed on `pointer:coarse` as well as width, because a tablet in landscape is a real
   visitor well past 880px: an iPad is 1024 and an iPad Pro 1366. A mouse is precise,
   so a pointer:fine desktop keeps the compact 32px rows. */
@media (max-width:880px),(pointer:coarse){
  .ftr a,.trades a{min-height:44px}
  /* The group heading is a button; as bare heading text it was a 15px-tall target. */
  .area-chip,.area-head{min-height:44px;display:inline-flex;align-items:center}
  .ftr li{margin-bottom:.5rem}
  .bc a{display:inline-flex;align-items:center;min-height:36px}
}

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