/* Pacific Plumbing · Direction B "Rain city"
   Night evergreen-charcoal, fog white, new-copper accent.
   Newsreader (display, italic emphasis) + Public Sans (body). */

:root{
  --night: oklch(19% 0.018 170);
  --night-2: oklch(25% 0.02 170);
  --night-deep: oklch(15.5% 0.016 170);
  --fog: oklch(95% 0.006 150);
  --fog-2: oklch(91% 0.008 150);
  --paper: oklch(98.6% 0.003 150);
  --ink: oklch(22% 0.015 170);
  --ink-2: oklch(41% 0.012 170);
  --copper: oklch(68% 0.12 52);
  --copper-hi: oklch(73% 0.12 55);
  --copper-deep: oklch(56% 0.12 48);
  --copper-ink: oklch(48% 0.11 46);
  --copper-glow: oklch(79% 0.105 56);
  --on-night: oklch(94% 0.01 150);
  --on-night-2: oklch(81% 0.012 150);
  --line: oklch(22% 0.015 170 / .16);
  --line-strong: oklch(22% 0.015 170 / .3);
  --line-night: oklch(100% 0 0 / .14);
  --alert: oklch(50% 0.16 30);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --head-h: 66px;
}

*, *::before, *::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fog);color:var(--ink);font:400 17px/1.6 var(--sans);padding-bottom:76px;font-feature-settings:"kern"}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
h1, h2, h3{margin:0;font-weight:500}
ul, ol{margin:0;padding:0}
button, input, select, textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--copper);outline-offset:3px;border-radius:4px}
.wrap{width:min(1240px, 100% - 40px);margin-inline:auto}
[hidden]{display:none !important}
.nw{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--copper);color:var(--night);padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none}
.skip:focus{top:10px}
svg.i{width:18px;height:18px;flex:none}

/* ---------- Preview bar ---------- */
.preview{background:var(--night-deep);color:var(--on-night-2);text-align:center;padding:4px 12px;font-size:.74rem;line-height:1.4;letter-spacing:.01em;border-bottom:1px solid var(--line-night)}

/* ---------- Header ---------- */
.site-head{position:sticky;top:0;z-index:30;color:var(--on-night);background:var(--night);transition:background-color .35s var(--ease), box-shadow .35s var(--ease)}
.site-head.is-over{background:transparent}
.site-head.is-over .nav-links a, .site-head.is-over .brand b{text-shadow:0 1px 10px oklch(0% 0 0 / .55)}
.site-head.is-stuck{background:oklch(19% 0.018 170 / .97);box-shadow:0 1px 0 var(--line-night), 0 12px 30px -16px oklch(0% 0 0 / .6)}
.nav{display:flex;align-items:center;gap:10px;height:var(--head-h)}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;margin-right:auto;text-decoration:none}
.brand img{width:42px;filter:drop-shadow(0 2px 8px oklch(0% 0 0 / .35))}
.brand b{font:600 1.16rem/1 var(--serif);letter-spacing:-.005em;white-space:nowrap}
.nav-links{display:none;list-style:none;gap:30px;font-weight:500}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;white-space:nowrap}
.nav-links a:hover, .nav-links a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;text-decoration-color:var(--copper)}
.nav-links .nav-offer{color:var(--copper-glow)}
.xl-only{display:none}
.phone{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:4px;border-radius:999px;background:oklch(100% 0 0 / .08);border:1px solid oklch(100% 0 0 / .22);text-decoration:none;font-weight:600;font-variant-numeric:tabular-nums;transition:border-color .2s, background-color .2s}
.phone:hover{border-color:var(--copper);background:oklch(100% 0 0 / .12)}
.phone span{display:none;white-space:nowrap}
.phone i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--copper);color:var(--night)}
.phone svg{width:17px;height:17px}

/* phone-width menu, works without JS */
.menu{position:static}
.menu summary{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid oklch(100% 0 0 / .22);cursor:pointer;list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:20px;height:20px}
.menu summary .x{display:none}
.menu[open] summary .x{display:block}
.menu[open] summary .bars{display:none}
.menu-panel{position:absolute;left:0;right:0;top:100%;background:var(--night);border-top:1px solid var(--line-night);box-shadow:0 24px 40px -20px oklch(0% 0 0 / .7);padding:6px 20px 22px}
.menu-panel a{display:flex;align-items:center;justify-content:space-between;min-height:56px;border-bottom:1px solid var(--line-night);font:500 1.5rem/1.1 var(--serif);text-decoration:none}
.menu-panel a:last-child{border-bottom:0;font:600 1rem/1 var(--sans);color:var(--copper-glow)}

/* ---------- Type ---------- */
.place{font:italic 500 1.1rem/1.3 var(--serif);color:var(--copper-ink);margin:0 0 12px}
.night .place, .hero .place, .page-top--night .place{color:var(--copper-glow)}
.h1{font:500 clamp(2.4rem, 9.4vw, 5.6rem)/.98 var(--serif);letter-spacing:-.022em;max-width:15ch;text-wrap:balance;text-shadow:0 2px 28px oklch(0% 0 0 / .35)}
.h1 em, .h2 em, .h1-page em{font-style:italic}
.hero .h1 em, .night .h2 em, .page-top--night em{color:var(--copper)}
.h1-page{font:500 clamp(2.3rem, 8vw, 4.6rem)/1 var(--serif);letter-spacing:-.022em;max-width:16ch;text-wrap:balance}
.h1-page em{color:var(--copper-ink)}
.night .h1-page em{color:var(--copper)}
.h2{font:500 clamp(1.95rem, 6vw, 3.2rem)/1.04 var(--serif);letter-spacing:-.018em;max-width:18ch;text-wrap:balance}
.h2 em{color:var(--copper-ink)}
.lede{max-width:46ch;font-size:1.06rem;color:var(--ink-2);margin-top:18px}
.night .lede, .hero .lede, .page-top--night .lede{color:var(--on-night-2)}
.muted{color:var(--ink-2)}
.night .muted{color:var(--on-night-2)}
.small{font-size:.9rem}

/* ---------- Buttons ---------- */
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 26px;border-radius:999px;background:var(--copper);color:var(--night);font-weight:600;text-decoration:none;border:0;cursor:pointer;transition:background-color .2s, transform .15s var(--ease)}
.btn:hover{background:var(--copper-hi)}
.btn:active{transform:scale(.98)}
.btn svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;border-bottom-color:oklch(100% 0 0 / .35);font-variant-numeric:tabular-nums;transition:border-color .2s}
.link:hover{border-bottom-color:var(--copper)}
.fog .link, .on-fog .link{border-bottom-color:var(--line-strong)}
.fog .link:hover, .on-fog .link:hover{border-bottom-color:var(--copper-deep)}
.arrow{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;text-decoration:none;color:var(--copper-ink)}
.arrow svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.arrow:hover svg{transform:translateX(4px)}
.night .arrow{color:var(--copper-glow)}

/* ---------- Sections ---------- */
.section{padding:46px 0}
.night{background:var(--night);color:var(--on-night)}
.fog{background:var(--fog);color:var(--ink)}
.rule-top{border-top:1px solid var(--line)}

/* ---------- Home hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;background:var(--night);color:var(--on-night);margin-top:calc(-1 * var(--head-h));padding-top:calc(var(--head-h) + 40px);min-height:calc(100vh - 110px);min-height:calc(100svh - 110px)}
.hero-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:55% 45%;transform:scale(1.04);animation:settle 2.4s var(--ease) forwards}
@keyframes settle{to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg, oklch(19% .018 170 / .62) 0%, oklch(19% .018 170 / .14) 22%, oklch(19% .018 170 / .55) 42%, oklch(19% .018 170 / .9) 64%, oklch(19% .018 170 / .97) 100%)}
.hero-body{padding-bottom:28px}
.hero .place{text-shadow:0 1px 12px oklch(0% 0 0 / .55)}
.hero .lede{margin-top:16px}
.wide-only{display:none}

/* free check-up: the headline offer. Copper rule, serif title, primary copper button */
.offer{margin-top:22px;padding:16px 0 2px;border-top:1px solid var(--copper)}
.offer-title{font:500 1.5rem/1.12 var(--serif);letter-spacing:-.01em;color:var(--on-night)}
.offer-title em{font-style:italic;color:var(--copper)}
.offer-text{margin-top:6px;max-width:48ch;font-size:.98rem;line-height:1.5;color:var(--on-night-2)}
.offer .cta{margin-top:14px;gap:10px 18px}
.offer .btn{padding:0 22px}

/* problem picker: solid fog panel, thin copper rules, no blur */
.pick{margin-top:22px;background:var(--fog);color:var(--ink);border-radius:14px;padding:16px 16px 4px;overflow:hidden;box-shadow:0 26px 50px -26px oklch(0% 0 0 / .8)}
.pick-title{font:500 1.62rem/1.08 var(--serif);letter-spacing:-.012em}
.pick-title em{font-style:italic;color:var(--copper-ink)}
.pick-sub{margin-top:4px;font-size:.9rem;color:var(--ink-2)}
.pick-list{--rule:oklch(56% .12 48 / .42);list-style:none;display:grid;grid-template-columns:1fr 1fr;margin-top:10px;border-top:1px solid var(--rule)}
.pick-list li{border-bottom:1px solid var(--rule)}
.pick-list li:nth-child(odd):not(.wide){border-right:1px solid var(--rule)}
.pick-list li.wide{grid-column:1 / -1;border-bottom:0}
.pick-list a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;padding:4px 6px 4px 0;font:500 1.14rem/1.15 var(--serif);text-decoration:none;transition:background-color .2s, color .2s}
.pick-list li:nth-child(even) a{padding-left:12px}
.pick-list a svg{width:16px;height:16px;flex:none;color:var(--copper-deep);transition:transform .25s var(--ease)}
.pick-list a:hover{color:var(--copper-ink)}
.pick-list a:hover span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--copper)}
.pick-list a:hover svg{transform:translateX(3px)}
.pick-list a:active{background:var(--fog-2)}
.pick-list a:focus-visible{outline-offset:-3px;border-radius:8px}

/* owner line: logo seal, no face (no real photo of the owner yet) */
.owner{display:flex;align-items:center;gap:12px;margin-top:18px;line-height:1.2}
.owner .seal{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--copper)}
.owner .seal img{width:31px}
.owner b{display:block;font:500 1.14rem/1.2 var(--serif);color:var(--on-night)}
.owner small{display:block;margin-top:3px;font-size:.86rem;color:var(--on-night-2)}

/* ---------- Specialty + service index (home) ---------- */
.spec{display:grid;background:var(--fog)}
.spec-photo{aspect-ratio:16/9;overflow:hidden;background:var(--night-2)}
.spec-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 48%}
.spec-text{padding:34px 20px 40px}
.spec-text > p:not(.place){color:var(--ink-2);max-width:48ch;margin-top:16px}
.index{list-style:none;margin-top:26px;border-top:1px solid var(--line)}
.index a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;min-height:48px;padding:11px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:color .2s}
.index a b{font:500 1.28rem/1.2 var(--serif)}
.index a > span:last-child{font-size:.88rem;color:var(--ink-2);text-align:right}
.index a:hover{color:var(--copper-ink)}
.index a:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--copper)}

/* ---------- Why (owner / price / clean-up) ---------- */
.rows{margin:24px 0 0;border-top:1px solid var(--line-night)}
.rows > div{padding:15px 0;border-bottom:1px solid var(--line-night)}
.rows dt{font:500 1.38rem/1.2 var(--serif);color:var(--on-night)}
.rows dd{margin:6px 0 0;color:var(--on-night-2);max-width:52ch}
.why .small{margin-top:22px;color:var(--on-night-2)}
.why .small b{color:var(--on-night);font-weight:600}

/* ---------- How the free estimate works ---------- */
.steps{list-style:none;counter-reset:s;margin-top:24px;display:grid;gap:18px}
.steps li{counter-increment:s;display:grid;grid-template-columns:2.2rem 1fr;gap:4px;max-width:58ch}
.steps li::before{content:counter(s);font:italic 500 2rem/1 var(--serif);color:var(--copper-ink);padding-top:1px}
.steps p{color:var(--ink-2)}
.steps b{color:var(--ink);font-weight:600}
.how .arrow{margin-top:20px}

/* ---------- Free check-up (home): ruled list, not cards ---------- */
.checkup-list{margin-top:22px}
.looks-h{font:600 .82rem/1.3 var(--sans);letter-spacing:.02em;color:var(--ink-2);margin-bottom:8px}
.looks{list-style:none;border-top:1px solid var(--copper-deep)}
.looks li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid oklch(56% .12 48 / .42)}
.looks b{font:500 1.3rem/1.2 var(--serif);letter-spacing:-.005em}
.looks span{font-size:.88rem;color:var(--ink-2);text-align:right}
.checkup-foot{margin-top:18px}
.checkup-foot > p{color:var(--ink-2);max-width:46ch}
.checkup .cta{margin-top:18px}

/* ---------- Service area ---------- */
.towns{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;margin-top:24px}
.towns h3{font:600 .82rem/1.3 var(--sans);letter-spacing:.02em;color:var(--ink-2);padding-top:12px;border-top:1px solid var(--copper-deep);margin-bottom:8px}
.towns ul{list-style:none}
.towns li{font:500 1.28rem/1.45 var(--serif);letter-spacing:-.005em}
.area .muted{margin-top:16px;max-width:44ch}

/* ---------- Closing call to action ---------- */
.closing{position:relative;isolation:isolate;overflow:hidden;background:var(--night);color:var(--on-night)}
.closing-photo{position:absolute;inset:0;z-index:-2}
.closing-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.closing::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg, oklch(19% .018 170 / .82), oklch(19% .018 170 / .93))}
.closing-text{padding:46px 0 44px}
.closing .lede{margin-top:16px}

/* ---------- Inner page tops ---------- */
.page-top{padding:44px 0 48px}
.page-top--night{background:var(--night);color:var(--on-night)}
.page-top .lede{margin-top:16px}
.nudge{margin-top:14px;color:var(--on-night-2)}
.nudge a{padding-block:10px;white-space:nowrap;font-weight:600;color:var(--copper-glow);text-underline-offset:4px;text-decoration-color:var(--copper)}
.page-top .index{margin-top:30px}
.page-top .index a{min-height:58px}
.page-top .index b{font-size:1.4rem}
.page-top .index .n{font:italic 500 1rem/1 var(--serif);color:var(--copper-ink);margin-right:12px;text-align:left}
.page-top .index .nm{display:flex;align-items:baseline}
.night .index, .night .index a{border-color:var(--line-night)}
.night .index a > span:last-child{color:var(--on-night-2)}
.night .index a:hover{color:var(--copper-glow)}

/* ---------- Services ---------- */
.svc{scroll-margin-top:calc(var(--head-h) + 8px)}
.svc-grid{display:grid;gap:26px;padding:48px 0 56px}
.svc + .svc .svc-grid{border-top:1px solid var(--line)}
.svc.night + .svc .svc-grid{border-top:0}
.svc-photo{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--fog-2)}
.svc-photo img{width:100%;height:100%;object-fit:cover}
.svc-n{font:italic 500 1.05rem/1.3 var(--serif);color:var(--copper-ink);margin-bottom:8px}
.svc-n span{font-style:normal;font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.02em;margin-left:10px;padding:3px 10px;border-radius:999px;border:1px solid currentColor;vertical-align:2px}
.svc.night .svc-n{color:var(--copper-glow)}
.svc h2{font:500 clamp(2.1rem, 7vw, 3.6rem)/1 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.svc-lede{font-size:1.08rem;margin-top:14px;max-width:46ch}
.svc-cols{display:grid;gap:24px;margin-top:26px}
.svc h3{font:600 .86rem/1.3 var(--sans);letter-spacing:.02em;color:var(--ink-2);margin-bottom:10px}
.svc.night h3{color:var(--on-night-2)}
.svc-cols p{color:var(--ink-2);max-width:44ch}
.svc.night .svc-cols p{color:var(--on-night-2)}
.signs{list-style:none;border-top:1px solid var(--line)}
.signs li{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}
.signs li::before{content:"";flex:none;width:10px;height:10px;border:2px solid var(--copper-deep);border-radius:50%;transform:translateY(-1px)}
.svc.night .signs, .svc.night .signs li{border-color:var(--line-night)}
.svc.night .signs li::before{border-color:var(--copper)}
.svc .cta{margin-top:28px}
.svc-check{margin-top:16px;max-width:50ch;font-size:.95rem;color:var(--ink-2)}
.svc-check a{padding-block:10px;font-weight:600;color:var(--copper-ink);text-underline-offset:4px;text-decoration-color:var(--copper)}
.svc.night .svc-check{color:var(--on-night-2)}
.svc.night .svc-check a{color:var(--copper-glow)}

.urgent-band{padding:52px 0}
.urgent-band .h2{max-width:22ch}
.urgent-band p.muted{margin-top:14px;max-width:52ch}

/* ---------- Estimate page ---------- */
.est{padding:40px 0 64px}
.est-grid{display:grid;gap:36px}
.note{border-top:1px solid var(--copper-deep);padding:14px 0 2px}
.note b{display:block;font:500 1.3rem/1.2 var(--serif);margin-bottom:6px}
.note p{color:var(--ink-2)}
.note a{font-weight:600;white-space:nowrap}
.form{display:grid;gap:18px}
.form-head{font:500 clamp(1.7rem, 5vw, 2.3rem)/1.08 var(--serif);letter-spacing:-.015em}
.form-sub{color:var(--ink-2);margin-top:-8px}
.field{display:grid;gap:6px}
.field label, .field .lbl{font-weight:600;font-size:.95rem}
.field label small, .field .lbl small{font-weight:400;color:var(--ink-2);font-size:.88rem}
.field input, .field select, .field textarea{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:10px;background:var(--paper);font-size:1rem;line-height:1.4;transition:border-color .2s, box-shadow .2s;-webkit-appearance:none;appearance:none}
.field textarea{min-height:132px;resize:vertical}
.field select{padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23455452' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.field input:hover, .field select:hover, .field textarea:hover{border-color:oklch(22% .015 170 / .5)}
.field input:focus, .field select:focus, .field textarea:focus{outline:none;border-color:var(--copper-deep);box-shadow:0 0 0 3px oklch(68% .12 52 / .35)}
.err{display:none;color:var(--alert);font-size:.9rem;font-weight:500}
.field.is-invalid .err{display:block}
.field.is-invalid input, .field.is-invalid textarea{border-color:var(--alert)}
.row2{display:grid;gap:18px}
.file{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 16px;border:1px dashed var(--line-strong);border-radius:10px;cursor:pointer;color:var(--ink-2);transition:border-color .2s}
.file:hover{border-color:var(--copper-deep)}
.file:focus-within{border-color:var(--copper-deep);box-shadow:0 0 0 3px oklch(68% .12 52 / .35)}
.file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.file svg{width:20px;height:20px;color:var(--copper-ink)}
.form .btn{width:100%;margin-top:4px}
.form .btn[disabled]{opacity:.7;cursor:progress}
.form-fine{font-size:.88rem;color:var(--ink-2)}
[data-success]{display:none;padding:28px 0 8px;border-top:2px solid var(--copper-deep)}
[data-success].is-on{display:block}
[data-success]:focus{outline:none}
[data-success] h2{font:500 clamp(1.8rem, 5vw, 2.5rem)/1.08 var(--serif);letter-spacing:-.015em}
[data-success] h2 em{font-style:italic;color:var(--copper-ink)}
[data-success] p{margin-top:12px;color:var(--ink-2);max-width:46ch}
[data-success] .fine{font-size:.86rem}
.aside{display:grid;gap:34px;align-content:start}
.callcard p{color:var(--ink-2)}
.callcard .big{display:inline-flex;align-items:center;min-height:48px;font:500 clamp(2rem, 7vw, 2.6rem)/1 var(--serif);letter-spacing:-.01em;text-decoration:none;font-variant-numeric:lining-nums tabular-nums;border-bottom:1px solid var(--copper-deep);margin:4px 0 8px}
.callcard .big:hover{color:var(--copper-ink)}
.aside h2{font:500 1.6rem/1.15 var(--serif);letter-spacing:-.01em}
.aside .steps{margin-top:16px;gap:16px}
.aside .steps li::before{font-size:1.6rem}
.page-top .ring{display:inline-flex;align-items:center;gap:10px;margin-top:20px}


/* estimate page: call block in the night band */
.rather{margin-top:30px;padding-top:22px;border-top:1px solid var(--line-night)}
.rather .place{margin-bottom:4px}
.big-phone{display:inline-flex;align-items:center;min-height:52px;font:500 clamp(2.2rem, 9vw, 3.2rem)/1 var(--serif);letter-spacing:-.01em;color:var(--on-night);text-decoration:none;font-variant-numeric:lining-nums tabular-nums;border-bottom:1px solid var(--copper);transition:color .2s}
.big-phone:hover{color:var(--copper-glow)}
.rather .muted{margin-top:10px;max-width:34ch}
.field ::placeholder{color:oklch(52% .01 170);opacity:1}
.form-fine a{font-weight:600;color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--copper-deep)}
.est .note{order:0}
@media (max-width:599px){
  .page-top .index a > span:last-child{display:none}
  .page-top--night{padding:32px 0 34px}
  .rather{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 14px;margin-top:22px;padding-top:14px}
  .rather .place{margin:0}
  .rather .big-phone{font-size:1.85rem;min-height:48px}
  .rather .muted{display:none}
}

/* ---------- Footer ---------- */
.foot{background:var(--night-deep);color:var(--on-night-2);padding:32px 0 20px;font-size:.95rem}
.foot-grid{display:grid;gap:18px}
.foot .brand{color:var(--on-night);margin:0}
.foot-tag{margin-top:10px;max-width:34ch}
.foot-phone{display:inline-flex;align-items:center;min-height:44px;font:500 2rem/1 var(--serif);color:var(--on-night);text-decoration:none;font-variant-numeric:lining-nums tabular-nums;border-bottom:1px solid var(--copper)}
.foot-phone:hover{color:var(--copper-glow)}
.foot-links{list-style:none;display:flex;flex-wrap:wrap;gap:0 22px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-night);text-decoration:none}
.foot-links a:hover{text-decoration:underline;text-decoration-color:var(--copper);text-underline-offset:5px}
.foot-towns{color:var(--on-night-2)}
.fine{font-size:.84rem;line-height:1.55;color:oklch(72% .012 150)}
.foot .fine{padding-top:16px;border-top:1px solid var(--line-night)}

/* ---------- Phone call bar ---------- */
.callbar{position:fixed;inset:auto 0 0 0;z-index:40;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:oklch(19% .018 170 / .97);box-shadow:0 -1px 0 var(--line-night)}
.callbar a{display:flex;justify-content:center;align-items:center;gap:8px;min-height:50px;border-radius:999px;font-weight:600;text-decoration:none}
.callbar a:first-child{background:var(--copper);color:var(--night)}
.callbar a:last-child{color:var(--on-night);border:1px solid oklch(100% 0 0 / .3)}
.callbar svg{width:17px;height:17px}

/* ---------- Reveal (hooks from ../assets/app.js) ---------- */
.reveal{transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.pre{opacity:0;transform:translateY(18px)}


/* phones: photo band on top, text and picker on solid night below it */
@media (max-width:899px){
  .hero{display:block;min-height:0;padding-top:196px}
  .hero-img{height:266px;bottom:auto;object-position:50% 40%}
  .hero::after{background:linear-gradient(180deg, oklch(19% .018 170 / .86) 0px, oklch(19% .018 170 / .45) 54px, oklch(19% .018 170 / .04) 103px, oklch(19% .018 170 / .1) 148px, oklch(19% .018 170 / .72) 214px, var(--night) 266px)}
  .hero .lede{display:none}
  /* keep home near 5 phone screens: the call bar already carries "Call now" */
  .section{padding:40px 0}
  .checkup .link, .closing .link, .closing .lede, .spec-text > p:not(.place), .why .small{display:none}
  .looks li{padding:8px 0}
  .spec-photo{aspect-ratio:2/1}
  .rows > div{padding:12px 0}
  .steps{gap:14px}
  .closing-text{padding:40px 0}
  .foot{padding:28px 0 16px}
  .foot-grid{gap:14px}
  .foot-links{gap:0 18px}
  .pick{margin-top:18px}
  .owner{margin-top:14px}
  .checkup-list{margin-top:18px}
  .checkup-foot{margin-top:14px}
  .checkup .cta{margin-top:16px}
}
@media (min-width:900px){
  .narrow-only{display:none}
}
@media (max-width:599px){
  .foot-tag{display:none}
  .foot-phone{font-size:1.8rem}
}

/* ---------- Wider phones / tablets ---------- */
@media (min-width:600px){
  .row2{grid-template-columns:1fr 1fr}
  .svc-cols{grid-template-columns:1fr 1fr}
  .towns li{font-size:1.45rem}
}

/* ---------- Desktop ---------- */
@media (min-width:900px){
  :root{--head-h:84px}
  body{padding-bottom:0}
  .callbar, .menu{display:none}
  .nav{gap:20px}
  .nav-links{display:flex;gap:20px}
  .brand img{width:46px}
  .brand b{font-size:1.3rem}
  .phone{padding:4px 4px 4px 18px}
  .phone span{display:inline}

  /* the house sits right of the headline: photo fills the right 70%, night on the left */
  .hero{min-height:min(92svh, 860px)}
  .hero-img{left:auto;right:0;width:70%;object-position:62% 45%}
  .hero::after{background:
    linear-gradient(90deg, var(--night) 0%, var(--night) 31%, oklch(19% .018 170 / .55) 45%, oklch(19% .018 170 / 0) 64%),
    linear-gradient(180deg, oklch(19% .018 170 / .78) 0%, oklch(19% .018 170 / .2) 14%, oklch(19% .018 170 / 0) 30%, oklch(19% .018 170 / .3) 62%, oklch(19% .018 170 / .9) 100%)}
  .h1{font-size:clamp(3.2rem, 5.6vw, 5rem)}
  .wide-only{display:inline}
  .hero-body{display:grid;grid-template-columns:minmax(0, 1fr) auto;column-gap:40px;align-items:end;padding-bottom:40px}
  .hero-copy{grid-column:1;grid-row:1}
  .hero .lede{max-width:56ch;margin-top:14px;font-size:1rem}
  .offer{margin-top:24px;padding-left:20px}
  .offer-title{font-size:1.8rem}
  .offer-text{font-size:1.04rem;max-width:52ch}
  .offer .cta{margin-top:18px;gap:12px 24px}
  .offer .btn{padding:0 26px}
  .owner{grid-column:2;grid-row:1;align-self:end;margin:0 0 6px;padding:8px 22px 8px 8px;border-radius:999px;background:oklch(19% .018 170 / .9);border:1px solid oklch(100% 0 0 / .14)}
  .pick{grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:auto 1fr;margin-top:40px;padding:0;border-radius:8px}
  .pick-head{display:flex;flex-direction:column;justify-content:center;padding:18px 28px 18px 26px}
  .pick-title{font-size:1.8rem;white-space:nowrap}
  .pick-sub{white-space:nowrap}
  .pick-list{grid-template-columns:repeat(4, 1fr) 1.25fr;margin:0;border-top:0}
  .pick-list li, .pick-list li:nth-child(odd):not(.wide), .pick-list li.wide{grid-column:auto;border:0;border-left:1px solid var(--rule)}
  .pick-list a, .pick-list li:nth-child(even) a{height:100%;min-height:92px;gap:10px;padding:12px 18px 12px 20px;font-size:1.3rem}
  .pick-list a svg{width:18px;height:18px}
  .pick-list a:hover{background:var(--paper)}

  .section{padding:104px 0}
  .spec{grid-template-columns:1fr 1fr}
  .spec-photo{aspect-ratio:auto;min-height:100%}
  .spec-text{padding:88px 64px 88px 56px;align-self:center;max-width:680px}

  .why-grid, .how-grid, .area-grid{display:grid;grid-template-columns:5fr 7fr;gap:0 64px;align-items:start}
  .why-grid .rows{margin-top:0}
  .rows > div{display:grid;grid-template-columns:15rem 1fr;gap:24px;padding:24px 0}
  .rows dd{margin:0}
    .how .steps{margin-top:6px;gap:26px}
  .how .steps li{grid-template-columns:4rem 1fr;max-width:none}
  .how .steps li::before{font-size:2.8rem;margin-top:-4px}
  .how .steps p{font-size:1.12rem;max-width:52ch}
  .how .arrow{grid-column:2;margin-left:4rem}
  .towns{margin-top:0;gap:0 48px}
  .towns li{font-size:1.75rem;line-height:1.45}

  .checkup{padding:88px 0}
  .checkup-grid{display:grid;grid-template-columns:5fr 7fr;grid-template-rows:auto 1fr;gap:0 64px;align-items:start}
  .checkup-head{grid-column:1;grid-row:1}
  .checkup-foot{grid-column:1;grid-row:2;margin-top:24px}
  .checkup-list{grid-column:2;grid-row:1 / span 2;margin-top:6px}
  .looks li{padding:16px 0}
  .looks b{font-size:1.7rem}
  .looks span{font-size:.95rem}

  .closing-photo{left:auto;width:46%}
  .closing::after{background:linear-gradient(90deg, var(--night) 0%, var(--night) 52%, oklch(19% .018 170 / .55) 64%, oklch(19% .018 170 / .1) 100%)}
  .closing-text{padding:120px 0}
  .closing-text > *{max-width:560px}

  .page-top{padding:72px 0 80px}
  .page-top-grid{display:grid;grid-template-columns:6fr 5fr;gap:64px;align-items:end}
  .page-top .index{margin-top:0}

  .svc-grid{grid-template-columns:5fr 7fr;gap:64px;align-items:center;padding:96px 0}
  .svc-photo{aspect-ratio:4/5}
  .svc.flip .svc-photo{order:2}
  .svc.flip .svc-grid{grid-template-columns:7fr 5fr}
  .svc-feature .svc-grid{grid-template-columns:1fr 1fr}
  .svc-feature .svc-photo{aspect-ratio:auto;height:100%;min-height:640px}

  .urgent-band{padding:88px 0}
  .urgent-grid{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:end}
  .urgent-grid .cta{justify-content:flex-end;margin-top:0}

  .est{padding:72px 0 112px}
  .est-grid{grid-template-columns:7fr 5fr;grid-template-rows:auto 1fr;gap:40px 88px;align-items:start}
  .form-col{grid-column:1;grid-row:1 / span 2}
  .est .note{grid-column:2;grid-row:1}
  .aside{grid-column:2;grid-row:2}
  .rather{margin-top:0;padding:0 0 0 28px;border-top:0;border-left:1px solid var(--line-night)}
  .form .btn{width:auto;justify-self:start;padding:0 34px}

  .foot{padding:64px 0 36px}
  .foot-grid{grid-template-columns:1.2fr 1fr 1fr;gap:32px 48px;align-items:start}
  .foot-towns, .foot .fine{grid-column:1 / -1}
}

@media (min-width:1200px){
  .spec-text{padding-left:80px}
}
@media (min-width:900px) and (max-width:1023px){
  .phone{padding:4px}
  .phone span{display:none}
}
@media (min-width:1150px){
  .nav{gap:28px}
  .nav-links{gap:28px}
  .xl-only{display:inline}
  .xl-hide{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{animation:none !important;transition:none !important}
  .reveal.pre{opacity:1;transform:none}
}

.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-error{margin-top:12px;color:oklch(48% .16 30);font-size:.95rem}