/* ============================================================
   Norwood Plumbing — main.css
   Warm & neighbourly · teal trust color · clay accent
   Type: Hanken Grotesk (UI/body) + Caveat (hand-written touches)

   Organised as:
     1. Self-hosted font faces
     2. Design tokens (:root)
     3. Base + reset
     4. Layout utilities (.wrap, .section, .band, .lead)
     5. Buttons
     6. Live dot + pulse
     7. Reveal animations
     8. Skip link (a11y)
     9. Misc helpers
    10. Component sections (filled in Phases 2-6)
   ============================================================ */

/* ---------- 1. fonts (self-hosted) ---------- */
@font-face{
  font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/hanken-grotesk/HankenGrotesk-400.woff2') format('woff2');
}
@font-face{
  font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/hanken-grotesk/HankenGrotesk-500.woff2') format('woff2');
}
@font-face{
  font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/hanken-grotesk/HankenGrotesk-600.woff2') format('woff2');
}
@font-face{
  font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/hanken-grotesk/HankenGrotesk-700.woff2') format('woff2');
}
@font-face{
  font-family:'Hanken Grotesk';font-style:normal;font-weight:800;font-display:swap;
  src:url('/assets/fonts/hanken-grotesk/HankenGrotesk-800.woff2') format('woff2');
}
@font-face{
  font-family:'Hanken Grotesk';font-style:normal;font-weight:900;font-display:swap;
  src:url('/assets/fonts/hanken-grotesk/HankenGrotesk-900.woff2') format('woff2');
}
@font-face{
  font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/caveat/Caveat-500.woff2') format('woff2');
}
@font-face{
  font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/caveat/Caveat-600.woff2') format('woff2');
}
@font-face{
  font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/caveat/Caveat-700.woff2') format('woff2');
}

/* ---------- 2. tokens ---------- */
:root{
  --paper:#f7f4ee;
  --paper-2:#efe9dd;
  --card:#fffdf8;
  --ink:#16201e;
  --ink-2:#42514c;
  --ink-3:#6c7a74;
  --teal:#0e7490;
  --teal-deep:#0b5566;
  --teal-ink:#06323d;
  --teal-soft:#dcebef;
  --teal-wash:#eef5f6;
  --clay:#c0492b;
  --clay-deep:#a23a20;
  --clay-soft:#f5e2d8;
  --honey:#d99a4e;
  --green:#3f9e6a;
  --line:#e3dccb;
  --line-2:#ece6d8;
  --shadow:0 22px 50px -28px rgba(20,40,45,.5);
  --shadow-sm:0 10px 26px -18px rgba(20,40,45,.45);
  --shadow-lg:0 40px 80px -40px rgba(11,60,72,.55);
  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:30px;
  --wrap:1140px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 3. base + reset ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em;line-height:1.05;font-weight:800;text-wrap:balance;}
p{margin:0;text-wrap:pretty;}
.hand{font-family:'Caveat',cursive;font-weight:600;}

/* ---------- 4. layout utilities ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;}
.section{padding:84px 0;}
.section.tight{padding:60px 0;}
.band{background:var(--paper-2);}
.band-teal{background:var(--teal-ink);color:#eafcff;}
.lead{font-size:19px;color:var(--ink-2);line-height:1.55;}
.band-teal .lead{color:#bfe6ec;}
.section-head{max-width:640px;margin-bottom:42px;display:flex;flex-direction:column;gap:14px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;align-items:center;}
h2.big{font-size:clamp(30px,4vw,46px);}

/* ---------- 5. buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;
  border-radius:999px;font-weight:700;font-size:16.5px;cursor:pointer;
  padding:15px 24px;border:2px solid transparent;line-height:1;
  transition:transform .15s var(--ease),background .15s,box-shadow .2s;
  font-family:inherit;}
.btn:active{transform:translateY(1px);}
.btn-call{background:var(--teal);color:#fff;box-shadow:0 12px 26px -14px rgba(14,116,144,.8);}
.btn-call:hover{background:var(--teal-deep);}
.btn-book{background:#fff;color:var(--teal-ink);border-color:#cddadd;}
.btn-book:hover{border-color:var(--teal);}
.btn-ghost{background:transparent;color:var(--teal-ink);border-color:var(--line);}
.btn-ghost:hover{background:#fff;}
.btn-clay{background:var(--clay);color:#fff;}
.btn-clay:hover{background:var(--clay-deep);}
.btn-lg{padding:18px 30px;font-size:18px;}
.btn-block{width:100%;}
.btn .ph-ic{font-size:18px;}
.band-teal .btn-book{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.3);}
.band-teal .btn-book:hover{background:rgba(255,255,255,.16);}

/* ---------- 6. live dot + pulse ---------- */
.dot{width:9px;height:9px;border-radius:50%;background:var(--green);position:relative;flex:none;}
.dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(63,158,106,.35);animation:pulse 2s var(--ease) infinite;}
@keyframes pulse{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.5);opacity:0}}

/* ---------- 7. reveal animations ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;} .reveal.d4{transition-delay:.32s;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .dot::after{animation:none;}
  html{scroll-behavior:auto;}
}

/* ---------- 8. skip link (a11y) ---------- */
.skip-link{position:absolute;left:1rem;top:1rem;z-index:100;transform:translateY(-150%);
  background:var(--ink);color:#fff;padding:.6rem .9rem;border-radius:.5rem;font-weight:700;
  transition:transform .2s;}
.skip-link:focus{transform:none;outline:3px solid var(--honey);outline-offset:2px;}
:focus-visible{outline:3px solid var(--clay);outline-offset:3px;border-radius:6px;}

/* ---------- 9. misc helpers ---------- */
.note-hand{font-family:'Caveat',cursive;font-weight:600;color:var(--clay);font-size:24px;}
.pill-tags{display:flex;flex-wrap:wrap;gap:10px;}
.tag{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-weight:600;font-size:15px;color:var(--ink-2);}
.divider-soft{height:1px;background:var(--line);border:0;margin:0;}
.numbadge{width:46px;height:46px;border-radius:13px;background:var(--teal-wash);color:var(--teal-deep);
  display:grid;place-items:center;font-weight:900;font-size:20px;flex:none;}

/* ============================================================
   10. Component sections (filled in Phases 2-6)
   ============================================================ */

/* ===== header ===== */
.site-head{position:sticky;top:0;z-index:60;background:rgba(247,244,238,.86);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.site-head .wrap{display:flex;align-items:center;gap:22px;height:74px;}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px;letter-spacing:-.02em;flex:none;}
.brand .mark{width:38px;height:38px;border-radius:11px;background:var(--teal);color:#fff;
  display:grid;place-items:center;font-weight:900;font-size:19px;box-shadow:var(--shadow-sm);}
.brand small{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:1px;white-space:nowrap;}
.nav{display:flex;align-items:center;gap:6px;margin-left:14px;}
.nav a{padding:9px 14px;border-radius:999px;font-weight:600;font-size:15.5px;color:var(--ink-2);transition:background .15s,color .15s;}
.nav a:hover{background:#fff;color:var(--ink);}
.nav a.active{color:var(--teal-deep);background:var(--teal-wash);}
.head-cta{margin-left:auto;display:flex;align-items:center;gap:12px;}
.head-phone{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--teal-ink);font-size:16px;white-space:nowrap;}
.head-phone .sub{display:block;font-size:11px;font-weight:600;color:var(--ink-3);letter-spacing:.04em;}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:12px;
  cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center;padding:0;}
.burger span{width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.2s;}
@media (max-width:900px){
  .nav,.head-phone .sub{display:none;}
  .burger{display:flex;}
}
@media (max-width:620px){
  .head-phone,.head-cta .btn{display:none;}
}

/* ===== drawer ===== */
.drawer{position:fixed;inset:0;z-index:70;background:rgba(6,50,61,.4);backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s;}
.drawer.open{opacity:1;pointer-events:auto;}
.drawer .panel{position:absolute;top:0;right:0;height:100%;width:min(82%,340px);background:var(--paper);
  transform:translateX(100%);transition:transform .3s var(--ease);padding:26px 24px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-lg);}
.drawer.open .panel{transform:none;}
.drawer .panel a{padding:15px 14px;border-radius:12px;font-weight:700;font-size:18px;color:var(--ink);}
.drawer .panel a:hover,.drawer .panel a.active{background:#fff;color:var(--teal-deep);}
.drawer .x{align-self:flex-end;width:42px;height:42px;border:1px solid var(--line);background:#fff;border-radius:12px;font-size:20px;cursor:pointer;margin-bottom:8px;padding:0;line-height:1;}
.drawer .panel .btn{margin-top:auto;}

/* ===== callbar ===== */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  background:rgba(247,244,238,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));gap:10px;}
.callbar .btn{flex:1;}
@media (max-width:620px){
  .callbar{display:flex;}
  body.has-callbar{padding-bottom:78px;}
}

/* ===== footer ===== */
.site-foot{background:var(--teal-ink);color:#bfe6ec;padding:64px 0 30px;}
.site-foot .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;}
.site-foot .brand{color:#fff;}
.site-foot .brand .mark{background:#fff;color:var(--teal-ink);}
.site-foot h2{color:#fff;font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 16px;font-weight:700;}
.site-foot a, .site-foot li{color:#a7d4dd;font-size:15.5px;line-height:2.1;}
.site-foot a:hover{color:#fff;}
.site-foot ul{list-style:none;margin:0;padding:0;}
.foot-tagline{margin-top:16px;max-width:30ch;color:#a7d4dd;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:22px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13.5px;color:#7fb6c2;}
.disclaimer{font-size:13.5px;color:#7fb6c2;}
.disclaimer b{color:#bfe6ec;font-weight:700;}
.foot-credits{font-size:12px;color:#5f99a5;line-height:1.6;margin:14px 0 0;max-width:100%;}
.foot-credits a{color:#7fb6c2;text-decoration:underline;text-decoration-color:rgba(127,182,194,.3);}
@media (max-width:900px){
  .site-foot .grid{grid-template-columns:1fr 1fr;gap:32px;}
}
@media (max-width:620px){
  .site-foot .grid{grid-template-columns:1fr;}
  .foot-bottom{flex-direction:column;gap:8px;}
}

/* ===== emergency strip ===== */
.emstrip{background:var(--clay);color:#fff;}
.emstrip .wrap{display:flex;align-items:center;gap:16px;padding:16px 28px;flex-wrap:wrap;}
.emstrip .warn{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;font-weight:900;flex:none;}
.emstrip b{font-weight:800;}
.emstrip .txt{font-size:16px;font-weight:500;}
.emstrip .num{margin-left:auto;display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--clay-deep);
  padding:11px 19px;border-radius:999px;font-weight:800;font-size:16px;white-space:nowrap;}
@media (max-width:620px){
  .emstrip .num{margin-left:0;width:100%;justify-content:center;}
}

/* ===== photo placeholder ===== */
.photo{position:relative;overflow:hidden;background:
  repeating-linear-gradient(135deg,#e7decd 0 14px,#efe7d6 14px 28px);background-color:#e7decd;}
.photo img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1;transition:opacity .4s,transform 1.2s var(--ease);}
.photo[data-label]::after{content:attr(data-label);position:absolute;left:14px;bottom:12px;z-index:0;
  font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:11px;letter-spacing:.03em;
  color:#7a6f58;background:rgba(255,253,248,.82);padding:5px 9px;border-radius:6px;max-width:80%;}
.photo:has(img)[data-label]::after{display:none;}
.photo.is-broken img{opacity:0;}

/* ===== service cards ===== */
.cards{display:grid;gap:22px;}
.cols-2{grid-template-columns:repeat(2,1fr);}
.cols-3{grid-template-columns:repeat(3,1fr);}
.cols-4{grid-template-columns:repeat(4,1fr);}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s;display:block;}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.card .pad{padding:26px;}
.card h3{font-size:21px;margin-bottom:8px;}
.card .pic{height:170px;}
.card p{color:var(--ink-2);font-size:15.5px;}
@media (max-width:900px){
  .cols-3,.cols-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:620px){
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr;}
}

/* ===== home ===== */
.hero{position:relative;}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;padding-top:64px;padding-bottom:70px;}
.hero h1{font-size:clamp(38px,5.4vw,62px);}
.hero h1 em{font-style:normal;color:var(--teal);}
.hero .sub{font-size:clamp(17px,2vw,20px);color:var(--ink-2);max-width:34ch;margin-top:20px;}
.hero .cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px;}
.hero .trust{display:flex;align-items:center;gap:14px;margin-top:28px;color:var(--ink-2);font-size:15px;font-weight:500;flex-wrap:wrap;}
.hero .stars{color:var(--honey);letter-spacing:2px;font-size:17px;}
.ava{display:flex;}
.ava span{width:34px;height:34px;border-radius:50%;border:2px solid var(--paper);margin-left:-10px;background-color:#cdbfa6;background-size:cover;background-position:center;background-repeat:no-repeat;}
.ava span:first-child{margin-left:0;}
.hero-media{position:relative;}
.hero-media .frame{height:480px;border-radius:var(--r-xl);box-shadow:var(--shadow-lg);}
.hero-media .note{position:absolute;top:-14px;right:34px;transform:rotate(-6deg);z-index:3;}
.floatcard{position:absolute;left:-22px;bottom:30px;z-index:3;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);padding:14px 18px;display:flex;align-items:center;gap:13px;}
.floatcard .big{font-size:26px;font-weight:900;color:var(--teal-deep);line-height:1;}
.floatcard .sm{font-size:13px;color:var(--ink-3);font-weight:600;}
.floatcard .stars{color:var(--honey);font-size:13px;letter-spacing:1px;}

.proc{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.step{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 26px;box-shadow:var(--shadow-sm);}
.step .n{width:48px;height:48px;border-radius:14px;background:var(--teal);color:#fff;display:grid;place-items:center;font-weight:900;font-size:21px;margin-bottom:18px;}
.step h3{font-size:21px;margin-bottom:8px;}
.step p{color:var(--ink-2);font-size:15.5px;}
.step .line{position:absolute;top:54px;right:-26px;width:26px;height:2px;background:var(--line);}

.why{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center;}
.why .pic{height:420px;border-radius:var(--r-xl);box-shadow:var(--shadow);}
.why h2{margin-top:14px;}
.reasons{display:flex;flex-direction:column;gap:26px;margin-top:26px;}
.reason{display:flex;gap:16px;align-items:flex-start;}
.reason .chk{width:40px;height:40px;border-radius:12px;background:var(--teal-wash);color:var(--teal-deep);
  display:grid;place-items:center;font-weight:900;flex:none;font-size:18px;}
.reason h4{font-size:18px;margin-bottom:3px;}
.reason p{color:var(--ink-2);font-size:15px;}

.quote{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;max-width:980px;margin:0 auto;}
.quote .pic{width:150px;height:150px;border-radius:24px;flex:none;}
.quote blockquote{margin:0;font-size:clamp(22px,3vw,30px);line-height:1.32;font-weight:700;color:#fff;letter-spacing:-.01em;}
.quote .by{margin-top:16px;color:#9fd6e0;font-weight:600;font-size:16px;}
.quote .stars{color:var(--honey);font-size:18px;letter-spacing:2px;margin-bottom:14px;}

.finalcta{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:46px;box-shadow:var(--shadow);}
.finalcta .phone-xl{font-size:clamp(30px,4.4vw,44px);font-weight:900;color:var(--teal-ink);letter-spacing:-.02em;line-height:1;margin:10px 0 6px;}
.finalcta .hrs{color:var(--ink-3);font-size:15px;font-weight:600;}
.finalcta .actions{display:flex;flex-direction:column;gap:12px;}
.finalcta-body{margin-top:14px;color:var(--ink-2);max-width:40ch;}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:0;}
  .hero-media{margin-top:38px;}
  .why{grid-template-columns:1fr;gap:30px;}
  .why .pic{height:300px;order:-1;}
  .proc{grid-template-columns:1fr;}
  .step .line{display:none;}
  .finalcta{grid-template-columns:1fr;padding:32px;}
}
@media (max-width:620px){
  .quote{grid-template-columns:1fr;text-align:center;}
  .quote .pic{margin:0 auto;width:120px;height:120px;}
  .hero-media .frame{height:340px;}
  .floatcard{left:10px;}
}

/* ===== services ===== */
.pagehero{padding:60px 0 30px;}
.pagehero h1{font-size:clamp(36px,5vw,56px);}
.pagehero h1 em{font-style:normal;color:var(--teal);}
.pagehero .lead{margin-top:18px;max-width:52ch;}
.jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}
.jump a{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:11px 18px;font-weight:700;font-size:15px;color:var(--teal-ink);
  transition:border-color .15s,transform .15s;}
.jump a:hover{border-color:var(--teal);transform:translateY(-2px);}
.jump a .n{width:20px;height:20px;border-radius:50%;background:var(--teal-wash);color:var(--teal-deep);
  display:grid;place-items:center;font-size:11px;font-weight:900;}

.svc{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;scroll-margin-top:90px;}
.svc.flip .svc-media{order:2;}
.svc-media{position:relative;}
.svc-media .photo{height:420px;border-radius:var(--r-xl);box-shadow:var(--shadow);}
.svc-media .badge{position:absolute;top:18px;left:18px;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:8px 15px;font-weight:800;font-size:14px;color:var(--teal-deep);
  box-shadow:var(--shadow-sm);z-index:2;}
.svc h2{font-size:clamp(28px,3.4vw,40px);margin-top:12px;}
.svc .desc{color:var(--ink-2);font-size:18px;margin-top:16px;max-width:46ch;}
.svc .sub-h{font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin:24px 0 12px;}
.svc .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;}
.signs{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none;}
.signs li{display:flex;gap:11px;align-items:flex-start;color:var(--ink-2);font-size:15.5px;}
.signs li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--clay);margin-top:8px;flex:none;}

.helper{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:46px;box-shadow:var(--shadow);}
.helper h2{margin-top:14px;}
.helper .lead{margin-top:14px;}
.helper .cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap;}
.checklist{display:flex;flex-direction:column;gap:14px;margin:22px 0 0;padding:0;list-style:none;}
.checklist li{display:flex;gap:14px;align-items:flex-start;}
.checklist .num{width:30px;height:30px;border-radius:9px;background:var(--teal);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:14px;flex:none;}
.checklist b{font-weight:700;}
.checklist span{color:var(--ink-2);font-size:15.5px;}

.faq{max-width:780px;margin:0 auto;}
.qa{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px;overflow:hidden;}
.qa summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  cursor:pointer;padding:20px 24px;font-weight:700;font-size:18px;color:var(--ink);user-select:none;}
.qa summary::-webkit-details-marker{display:none;}
.qa .sign{width:28px;height:28px;border-radius:50%;background:var(--teal-wash);color:var(--teal-deep);
  display:grid;place-items:center;font-size:18px;flex:none;transition:transform .25s;}
.qa[open] .sign{transform:rotate(45deg);}
.qa .ans{max-height:0;overflow:hidden;transition:max-height .3s var(--ease);}
.qa .ans p{padding:0 24px 22px;margin:0;color:var(--ink-2);font-size:16px;}

@media (max-width:900px){
  .svc{grid-template-columns:1fr;gap:26px;}
  .svc.flip .svc-media{order:-1;}
  .svc-media .photo{height:280px;}
  .helper{grid-template-columns:1fr;padding:30px;}
}

/* ===== service-area ===== */
.area-hero{padding-top:54px;}
.area-hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;}
.area-hero h1{font-size:clamp(34px,4.8vw,54px);}
.area-hero .lead{margin-top:16px;max-width:42ch;}

.checker{margin-top:30px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;box-shadow:var(--shadow);}
.checker label{font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);}
.checker .row{display:flex;gap:10px;margin-top:12px;}
.checker input{flex:1;min-width:0;border:2px solid var(--line);border-radius:12px;padding:15px 16px;
  font-family:inherit;font-size:16.5px;color:var(--ink);background:#fff;transition:border-color .15s;}
.checker input:focus{outline:none;border-color:var(--teal);}
.checker .hint{margin-top:10px;font-size:13.5px;color:var(--ink-3);}
.result{margin-top:14px;border-radius:14px;padding:0;max-height:0;overflow:hidden;opacity:0;
  transition:max-height .35s var(--ease),opacity .25s,padding .35s var(--ease);}
.result.show{max-height:260px;opacity:1;padding:18px 18px;}
.result.yes{background:#e7f3ec;border:1px solid #bfe0cb;}
.result.maybe{background:#fbf0e2;border:1px solid #ecd6b3;}
.result .rhead{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18px;}
.result .ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;flex:none;}
.result.yes .ic{background:var(--green);}
.result.yes .rhead{color:#236844;}
.result.maybe .ic{background:var(--honey);}
.result.maybe .rhead{color:#8a5a18;}
.result p{margin-top:7px;color:var(--ink-2);font-size:15.5px;}
.result .acts{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}

.mapwrap{position:relative;}
.mapwrap .photo{height:460px;border-radius:var(--r-xl);box-shadow:var(--shadow);
  background:#0e3a44;background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:42px 42px;}
.mapwrap .photo::after{color:#bfe0e6;background:rgba(7,40,48,.6);}
.pin{position:absolute;display:flex;flex-direction:column;align-items:center;gap:5px;
  transform:translate(-50%,-100%);z-index:2;}
.pin .dotp{width:16px;height:16px;border-radius:50% 50% 50% 0;background:var(--clay);
  transform:rotate(-45deg);box-shadow:0 6px 14px -4px rgba(0,0,0,.5);}
.pin .lab{background:var(--card);border-radius:999px;padding:4px 10px;font-size:12px;
  font-weight:800;color:var(--teal-ink);white-space:nowrap;box-shadow:var(--shadow-sm);}
.pin.home .dotp{background:var(--teal);width:22px;height:22px;}

.areas{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.area-tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;
  cursor:pointer;transition:transform .18s var(--ease),border-color .18s,box-shadow .18s;
  text-align:left;font-family:inherit;color:inherit;}
.area-tile:hover{transform:translateY(-3px);border-color:var(--teal);box-shadow:var(--shadow-sm);}
.area-tile .top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.area-tile h3{font-size:19px;}
.area-tile .cov{font-size:12px;font-weight:800;color:var(--green);display:flex;align-items:center;gap:5px;}
.area-tile .cov::before{content:"✓";}
.area-tile p{color:var(--ink-3);font-size:14px;margin-top:6px;}
.area-tile.home-base{background:var(--teal-wash);border-color:#bcd9de;}
.area-tile.home-base .cov{color:var(--teal-deep);}
.area-tile.home-base .cov::before{content:"★";}

.why-local{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.lcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;
  box-shadow:var(--shadow-sm);}
.lcard .ic{width:46px;height:46px;border-radius:13px;background:var(--teal-wash);color:var(--teal-deep);
  display:grid;place-items:center;font-weight:900;font-size:20px;margin-bottom:16px;}
.lcard h3{font-size:19px;margin-bottom:7px;}
.lcard p{color:var(--ink-2);font-size:15px;}

@media (max-width:900px){
  .area-hero .wrap{grid-template-columns:1fr;gap:30px;}
  .mapwrap{order:-1;}
  .mapwrap .photo{height:320px;}
  .areas{grid-template-columns:repeat(2,1fr);}
  .why-local{grid-template-columns:1fr;}
}
@media (max-width:620px){
  .areas{grid-template-columns:1fr;}
}

/* ===== book ===== */
.book-hero{padding:54px 0 18px;}
.book-hero h1{font-size:clamp(34px,4.8vw,54px);}
.book-hero .lead{margin-top:14px;max-width:50ch;}

.book-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start;}

.urgent{display:flex;gap:16px;align-items:flex-start;background:var(--clay-soft);
  border:1px solid #e6c3b3;border-radius:var(--r-lg);padding:22px 24px;margin-bottom:24px;}
.urgent .ux{width:42px;height:42px;border-radius:12px;background:var(--clay);color:#fff;
  display:grid;place-items:center;font-weight:900;font-size:22px;flex:none;}
.urgent h3{font-size:19px;color:var(--clay-deep);margin-bottom:4px;}
.urgent p{color:#7a3b25;font-size:15.5px;}
.urgent a.num{display:inline-flex;align-items:center;gap:8px;margin-top:12px;background:var(--clay);
  color:#fff;padding:11px 18px;border-radius:999px;font-weight:800;font-size:16px;}

.formcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:34px;box-shadow:var(--shadow);}
.field{margin-bottom:22px;}
.field label{display:block;font-weight:700;font-size:15px;margin-bottom:9px;}
.field label .req{color:var(--clay);}
.field .opt{font-weight:600;color:var(--ink-3);font-size:13px;}
.field input, .field textarea{width:100%;border:2px solid var(--line);border-radius:13px;
  padding:15px 16px;font-family:inherit;font-size:16.5px;color:var(--ink);background:#fff;
  transition:border-color .15s;resize:vertical;}
.field input:focus, .field textarea:focus{outline:none;border-color:var(--teal);}
.field textarea{min-height:120px;line-height:1.5;}
.field.err input, .field.err textarea{border-color:var(--clay);background:#fdf3ef;}
.field .msg{display:none;color:var(--clay-deep);font-size:13.5px;font-weight:600;margin-top:8px;}
.field.err .msg{display:block;}

.chips{display:flex;flex-wrap:wrap;gap:9px;}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:11px;padding:10px 15px;
  font-weight:600;font-size:14.5px;color:var(--ink-2);cursor:pointer;transition:all .15s;
  font-family:inherit;}
.chip:hover{border-color:var(--teal);}
.chip.on{background:var(--teal-wash);border-color:var(--teal);color:var(--teal-deep);}

.submit-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px;}
.submit-row .small{color:var(--ink-3);font-size:13.5px;max-width:30ch;}

.success{display:none;background:var(--card);border:1px solid #bfe0cb;border-radius:var(--r-xl);
  padding:44px 36px;box-shadow:var(--shadow);text-align:center;}
.success.show{display:block;animation:pop .4s var(--ease);}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.success .tick{width:72px;height:72px;border-radius:50%;background:var(--green);color:#fff;
  display:grid;place-items:center;font-size:38px;margin:0 auto 20px;
  box-shadow:0 14px 30px -12px rgba(63,158,106,.7);}
.success h2{font-size:30px;margin-bottom:10px;}
.success p{color:var(--ink-2);font-size:17px;max-width:42ch;margin:0 auto;}
.success .next{display:flex;flex-direction:column;gap:12px;text-align:left;max-width:380px;margin:26px auto 0;}
.success .next .n{display:flex;gap:13px;align-items:flex-start;}
.success .next .num{width:28px;height:28px;border-radius:8px;background:var(--teal);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:13px;flex:none;}
.success .next span{color:var(--ink-2);font-size:15.5px;}
.success .acts{display:flex;gap:12px;justify-content:center;margin-top:28px;flex-wrap:wrap;}

.side{display:flex;flex-direction:column;gap:18px;position:sticky;top:94px;}
.panel-c{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;box-shadow:var(--shadow-sm);}
.panel-c h3{font-size:18px;margin-bottom:14px;}
.panel-c .step-s{display:flex;gap:13px;align-items:flex-start;margin-bottom:14px;}
.panel-c .step-s:last-child{margin-bottom:0;}
.panel-c .step-s .num{width:27px;height:27px;border-radius:8px;background:var(--teal-wash);
  color:var(--teal-deep);display:grid;place-items:center;font-weight:800;font-size:13px;flex:none;}
.panel-c .step-s span{color:var(--ink-2);font-size:15px;}
.panel-call{background:var(--teal-ink);color:#eafcff;}
.panel-call h3{color:#fff;}
.panel-call .ph{font-size:26px;font-weight:900;color:#fff;letter-spacing:-.02em;margin:6px 0 2px;}
.panel-call .hrs{color:#9fd6e0;font-size:14px;font-weight:600;}
.panel-call .btn{margin-top:16px;width:100%;}

@media (max-width:900px){
  .book-grid{grid-template-columns:1fr;gap:26px;}
  .side{position:static;}
}

/* ============================================================
   Global responsive (component-specific breakpoints
   live inside each component section)
   ============================================================ */
@media (max-width:900px){
  .section{padding:60px 0;}
}
@media (max-width:620px){
  body{font-size:16px;}
  .wrap{padding:0 20px;}
  .section{padding:48px 0;}
}