/* North Peak Exterior Cleaning
   Single committed theme: plain white ground, dark green type. No dark mode,
   no tinted section bands, no second accent. Sections separate with hairline
   rules and spacing. Every colour is painted explicitly so the page holds
   regardless of the viewer's system theme. */

:root{
  --paper:#FFFFFF;      /* the only background on the site */
  --ink:#10231B;        /* body copy, near-black with a green bias */
  --muted:#47574E;      /* secondary copy, 7.4:1 on white */
  --green:#0B5D3B;      /* headings, brand, buttons, prices */
  --green-deep:#07422A; /* button hover */
  --line:#DCE6E0;       /* every rule and border */
  --tint:rgba(11,93,59,.045); /* hover feedback only, never a section fill */
  --on-green:#FFFFFF;

  --ff-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --ff-body:"Source Sans 3","Segoe UI",system-ui,sans-serif;

  --wrap:1180px;
  --gut:clamp(1rem,4vw,2.5rem);
  --sect:clamp(3.25rem,6.5vw,5.75rem);

  /* One documented radius scale, applied consistently:
     buttons are full pills, inputs are softly rounded, media and tiles
     take the small radius. Nothing else gets a corner treatment. */
  --r-btn:999px;
  --r-in:12px;
  --r:10px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--paper)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ff-body);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;border-radius:var(--r)}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:700;letter-spacing:-.024em;line-height:1.05;margin:0;color:var(--green);text-wrap:balance}
h1{font-size:clamp(2.4rem,5.2vw,3.75rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1.08}
h3{font-size:clamp(1.12rem,1.8vw,1.32rem);line-height:1.22;letter-spacing:-.014em}
p{margin:0 0 1.05em}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.lede{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--muted);max-width:54ch}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--green);color:var(--on-green);padding:.7rem 1rem;z-index:100}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:1.5rem;height:70px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:0 0 auto;color:var(--green)}
.brand svg{width:22px;height:22px;flex:0 0 auto}
.brand>span{display:block;min-width:0}
.brand b{font-family:var(--ff-display);font-weight:700;font-size:1.02rem;letter-spacing:.02em;text-transform:uppercase;line-height:1;display:block;white-space:nowrap}
.brand b+span{display:block;font-size:.62rem;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:2px;white-space:nowrap}
.nav{margin-left:auto;display:flex;align-items:center;gap:1.15rem;min-width:0}
/* :not(.btn) matters. `.nav a` outranks `.btn-primary` on specificity,
   so without it the quote button gets muted text on a green fill. */
.nav a:not(.btn){text-decoration:none;font-size:.94rem;font-weight:600;color:var(--muted);white-space:nowrap}
.nav a:not(.btn):hover,.nav a:not(.btn)[aria-current="page"]{color:var(--green)}
.nav .tel{color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:1100px){
  .nav .drop{display:none}
  .head-in{height:64px;gap:1rem}
}
@media (max-width:620px){
  .nav .tel{display:none}
  .nav .btn{padding:.7rem 1rem;font-size:.9rem}
}
@media (max-width:400px){
  .head-in{gap:.6rem}
  .brand svg{width:19px;height:19px}
  .brand b{font-size:.9rem}
  .brand b+span{font-size:.54rem;letter-spacing:.11em}
  .nav .btn{padding:.62rem .78rem;font-size:.84rem}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--ff-display);font-weight:600;font-size:.98rem;
  padding:.86rem 1.6rem;border-radius:var(--r-btn);text-decoration:none;white-space:nowrap;
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .14s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--green);color:var(--on-green);border-color:var(--green)}
.btn-primary:hover{background:var(--green-deep);border-color:var(--green-deep)}
.btn-ghost{background:var(--paper);color:var(--green);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--green)}
.btn-lg{padding:1rem 1.85rem;font-size:1.04rem}

/* ---------- hero ---------- */
.hero{padding-top:clamp(2rem,4.5vw,3.25rem);padding-bottom:clamp(2.75rem,5.5vw,4.5rem)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,4vw,3rem);align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr}}
.hero h1{margin-bottom:1rem;max-width:16ch}
.hero .lede{margin-bottom:1.7rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem 1.4rem;align-items:center}
.hero-tel{font-family:var(--ff-display);font-weight:700;font-size:1rem;text-decoration:none;
  color:var(--green);border-bottom:2px solid var(--green);padding-bottom:2px;font-variant-numeric:tabular-nums}

/* ---------- before / after slider ---------- */
/* Fixed aspect box. Source photos are tall 3:4 phone shots; at natural height
   they push the hero CTA off the first screen. */
.ba{position:relative;overflow:hidden;background:var(--paper);touch-action:pan-y;
  user-select:none;border-radius:var(--r);aspect-ratio:1/1;max-height:min(56vh,470px);
  width:100%;margin-inline:auto;border:1px solid var(--line)}
.ba>picture,.ba .after>picture{display:block;width:100%;height:100%}
.ba img{width:100%;height:100%;object-fit:cover;display:block}
.ba .after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos,50%))}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#FFFFFF;box-shadow:0 0 0 1px rgba(0,0,0,.3);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:50%;translate:-50% -50%;width:44px;height:44px;border-radius:999px;
  background:#FFFFFF;box-shadow:0 2px 14px rgba(0,0,0,.32);display:grid;place-items:center;color:var(--green);font-size:.8rem;font-weight:700}
/* Scrim labels sit on photographs, not on the page, so they stay dark. */
.ba-tag{position:absolute;bottom:.8rem;font-family:var(--ff-display);font-size:.66rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;background:rgba(12,20,16,.86);color:#FFFFFF;padding:.32rem .6rem;pointer-events:none}
.ba-tag.l{left:.8rem}
.ba-tag.r{right:.8rem}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}

/* ---------- sections: white ground, hairline rhythm ---------- */
.sect{padding-block:var(--sect);border-top:1px solid var(--line)}
.sect-alt{}
.sect-head{max-width:56ch;margin-bottom:clamp(1.75rem,3vw,2.5rem)}
.sect-head h2{margin-bottom:.7rem}

/* ---------- service grid (exactly 5 cells at every breakpoint) ---------- */
.svc{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);grid-template-columns:1fr}
@media (min-width:760px){
  /* 2 cols: feature spans the top row, remaining four fill rows 2 and 3. */
  .svc{grid-template-columns:repeat(2,1fr)}
  .svc>*:first-child{grid-column:span 2}
}
@media (min-width:1040px){
  /* 4 cols: feature takes a 2x2 block, remaining four fill the right 2x2. */
  .svc{grid-template-columns:repeat(4,1fr)}
  .svc>*:first-child{grid-column:span 2;grid-row:span 2}
}
.svc-card{background:var(--paper);padding:1.5rem;text-decoration:none;display:flex;flex-direction:column;gap:.45rem;min-height:168px;transition:background .18s ease}
.svc-card:hover{background:var(--tint)}
.svc-card:hover h3{text-decoration:underline;text-underline-offset:3px}
.svc-card h3{margin-bottom:.1rem}
.svc-card p{color:var(--muted);font-size:.94rem;margin:0}
.svc-card .from{margin-top:auto;font-family:var(--ff-display);font-weight:700;font-size:.84rem;letter-spacing:.04em;color:var(--green);text-transform:uppercase}
/* The featured tile is text over a photograph, so it needs a dark scrim to
   stay legible. That is an image treatment, not a page background. */
.svc-card.feat{padding:0;position:relative;min-height:330px;justify-content:flex-end;overflow:hidden}
.svc-card.feat:hover{background:var(--paper)}
.svc-card.feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc-card.feat .svc-body{position:relative;padding:1.6rem;width:100%;display:flex;flex-direction:column;gap:.35rem;
  background:linear-gradient(to top,rgba(10,16,13,.94),rgba(10,16,13,.66) 55%,rgba(10,16,13,0))}
.svc-card.feat .svc-body h3,.svc-card.feat .svc-body p,.svc-card.feat .from{color:#FFFFFF}

/* ---------- related services ---------- */
.rel-list{border-top:1px solid var(--line)}
.rel{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding:1.35rem 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding-left .18s ease}
.rel:hover{padding-left:.55rem}
.rel:hover h3{text-decoration:underline;text-underline-offset:3px}
.rel h3{margin-bottom:.2rem}
.rel p{color:var(--muted);font-size:.94rem;margin:0;max-width:48ch}
.rel .from{font-family:var(--ff-display);font-weight:700;font-size:.84rem;letter-spacing:.04em;
  color:var(--green);text-transform:uppercase;white-space:nowrap}

/* ---------- split feature ---------- */
.split{display:grid;gap:clamp(1.75rem,4vw,3rem);align-items:center}
@media (min-width:860px){.split{grid-template-columns:1fr 1fr}.split.rev>figure{order:2}}
.split figure{margin:0}
/* h2 has margin:0 globally, so a heading directly above body copy inside a
   split column collides with it. */
.split h2{margin-bottom:.9rem}
.split figure img{aspect-ratio:4/5;object-fit:cover;max-height:min(64vh,500px);width:100%;border:1px solid var(--line)}
.split figcaption{font-size:.85rem;color:var(--muted);margin-top:.55rem}

/* ---------- steps ---------- */
.steps{display:grid;gap:clamp(1.5rem,3.5vw,2.75rem)}
@media (min-width:860px){.steps{grid-template-columns:.85fr 1.15fr}.steps>div:first-child{position:sticky;top:104px;align-self:start}}
.step{padding-block:1.35rem;border-top:1px solid var(--line)}
.step:first-child{border-top:0;padding-top:0}
.step h3{margin-bottom:.3rem}
.step p{color:var(--muted);margin:0;max-width:52ch}

/* ---------- gallery ---------- */
.gal{columns:1;column-gap:1rem}
@media (min-width:640px){.gal{columns:2}}
@media (min-width:1000px){.gal{columns:3}}
.gal figure{margin:0 0 1rem;break-inside:avoid}
.gal figure img{border:1px solid var(--line)}
.gal figcaption{font-size:.85rem;color:var(--muted);margin-top:.45rem}

/* ---------- areas ---------- */
.areas{columns:2;column-gap:2rem;font-size:1rem}
@media (min-width:760px){.areas{columns:4}}
.areas a{display:block;padding:.38rem 0;text-decoration:none;color:var(--muted)}
.areas a:hover{color:var(--green)}

/* ---------- prose ---------- */
.prose{max-width:64ch}
.prose h2{margin:2.2rem 0 .8rem}
.prose h3{margin:1.8rem 0 .45rem}
.prose ul{padding-left:1.15rem;margin:0 0 1.2em}
.prose li{margin-bottom:.45em}
.prose li::marker{color:var(--green)}

/* ---------- faq ---------- */
.faq{max-width:64ch}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 2rem 1.1rem 0;font-family:var(--ff-display);font-weight:600;font-size:1.04rem;position:relative;color:var(--green)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.25rem;top:.95rem;font-size:1.4rem;color:var(--green);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq p{color:var(--muted);padding-bottom:1.1rem;margin:0;max-width:62ch}

/* ---------- price band ---------- */
.pricebar{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;padding:1.25rem 0;border-block:1px solid var(--line);margin-block:1.9rem}
.pricebar div{font-size:.95rem}
.pricebar b{font-family:var(--ff-display);display:block;font-size:1.3rem;letter-spacing:-.015em;color:var(--green)}
.pricebar span{color:var(--muted)}

/* ---------- form ---------- */
.form{display:grid;gap:1.05rem;max-width:34rem}
.field{display:grid;gap:.35rem}
.field label{font-family:var(--ff-display);font-weight:600;font-size:.92rem;color:var(--ink)}
.field .hint{font-size:.83rem;color:var(--muted)}
.field input,.field select,.field textarea{
  font-family:var(--ff-body);font-size:1rem;padding:.8rem 1rem;border-radius:var(--r-in);
  border:1.5px solid var(--line);background:var(--paper);color:var(--ink);width:100%;
}
.field input::placeholder,.field textarea::placeholder{color:#6A7B72}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);outline:3px solid var(--green);outline-offset:1px}
.field textarea{min-height:118px;resize:vertical}
.form-note{font-size:.88rem;color:var(--muted);max-width:34rem}

/* ---------- cta band ---------- */
.ctaband{background:var(--paper);border-top:1px solid var(--line);padding-block:clamp(2.75rem,5vw,4rem)}
.ctaband h2{max-width:20ch;margin-bottom:.8rem}
.ctaband p{color:var(--muted);max-width:52ch}

/* ---------- footer ---------- */
.site-foot{background:var(--paper);border-top:1px solid var(--line);padding-block:clamp(2.5rem,4.5vw,3.5rem);font-size:.94rem}
.foot-grid{display:grid;gap:2rem}
@media (min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot-grid h4{font-family:var(--ff-display);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.8rem}
.foot-grid a{display:block;padding:.2rem 0;text-decoration:none;color:var(--muted)}
.foot-grid a:hover{color:var(--green)}
.foot-bot{margin-top:2.25rem;padding-top:1.3rem;border-top:1px solid var(--line);color:var(--muted);font-size:.86rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}

/* ---------- breadcrumb ---------- */
.crumb{font-size:.86rem;color:var(--muted);padding-top:1.5rem}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--green)}

/* ---------- utilities ---------- */
.stack-cta{display:flex;flex-wrap:wrap;gap:.85rem 1.4rem;align-items:center;margin-top:1.7rem}
.two-col{display:grid;gap:clamp(1.5rem,3.5vw,2.75rem)}
@media (min-width:860px){.two-col{grid-template-columns:1fr 1fr}}
.pagehead{padding-top:clamp(1.25rem,2.5vw,2rem);padding-bottom:clamp(2rem,4vw,2.75rem)}
.pagehead h1{max-width:18ch;margin-bottom:.9rem}

/* Sections that butt straight up against a page header already have a rule
   above them from the price band or crumb, so they suppress their own. */
.sect-flush{padding-top:0;border-top:0}

/* ---------- pill buttons: shape follow-ups ---------- */
/* The tel link sits beside a pill CTA, so it gets a matching pill outline
   rather than staying a bare underlined string next to a rounded button. */
.hero-tel{border-bottom:0;padding:.8rem 1.35rem;border:1.5px solid var(--line);border-radius:var(--r-btn);
  display:inline-flex;align-items:center;transition:border-color .18s ease,background .18s ease}
.hero-tel:hover{border-color:var(--green);background:var(--tint)}
/* Media and tiles share the small radius so pills do not sit against
   perfectly square corners. */
.svc{border-radius:var(--r);overflow:hidden}
.ba{border-radius:var(--r)}
.faq summary::after{top:1.05rem}

/* ---------- stacked before/after figures on service pages ---------- */
.figstack{display:grid;gap:1.15rem}

/* ---------- file upload ---------- */
.field input[type="file"]{padding:.7rem .8rem;font-family:var(--ff-body);cursor:pointer;background:var(--paper)}
.field input[type="file"]::file-selector-button{
  font-family:var(--ff-display);font-weight:600;font-size:.9rem;
  padding:.45rem 1rem;margin-right:.8rem;border-radius:var(--r-btn);
  border:1.5px solid var(--green);background:var(--paper);color:var(--green);cursor:pointer;
}
.field input[type="file"]::file-selector-button:hover{background:var(--tint)}
.file-status{margin:0;font-size:.86rem;color:var(--muted)}
.file-status.over{color:#8A1C10;font-weight:600}

/* ---------- sticky phone call bar ---------- */
.callbar{display:none}
@media (max-width:760px){
  .callbar{
    display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:.6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--paper) 96%,transparent);
    backdrop-filter:blur(10px);border-top:1px solid var(--line);
  }
  .callbar-btn{
    display:flex;align-items:center;justify-content:center;
    font-family:var(--ff-display);font-weight:600;font-size:1rem;
    padding:.85rem 1rem;border-radius:var(--r-btn);text-decoration:none;
    border:1.5px solid var(--green);color:var(--green);background:var(--paper);
  }
  .callbar-btn.primary{background:var(--green);color:var(--on-green)}
  /* keep the bar from covering the last of the footer */
  body{padding-bottom:5.5rem}
}
/* A stacked before/after pair makes the media column about twice as tall as
   the copy, so centring leaves the text floating in the middle of nowhere. */
.split.stacked{align-items:start}

/* ---------- neighbourhood list on city pages ---------- */
.hoods{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.6rem}
.hoods li{border:1px solid var(--line);border-radius:var(--r-btn);padding:.5rem 1.05rem;
  font-family:var(--ff-display);font-weight:600;font-size:.92rem;color:var(--green)}
.arealink{display:block;margin-top:.4rem;font-weight:600;color:var(--green);
  text-decoration:none;font-size:.9rem}
.arealink:hover{text-decoration:underline;text-underline-offset:3px}
.step h3 a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- pricing packages ---------- */
.pkgs{display:grid;gap:1.15rem;grid-template-columns:1fr}
@media (min-width:820px){.pkgs{grid-template-columns:repeat(3,1fr);align-items:start}}
.pkg{border:1px solid var(--line);border-radius:var(--r);padding:1.75rem 1.5rem;
  display:flex;flex-direction:column;gap:.4rem;background:var(--paper);position:relative}
/* The middle package is the one to book, so it is the only one that carries
   weight. Everything else on the page stays quiet. */
.pkg.anchor{border-color:var(--green);border-width:2px;padding-block:2.25rem}
.pkg-flag{position:absolute;top:-.75rem;left:1.5rem;background:var(--green);color:var(--on-green);
  font-family:var(--ff-display);font-weight:700;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.32rem .85rem;border-radius:var(--r-btn)}
.pkg h3{margin-bottom:.1rem}
.pkg-what{color:var(--muted);font-size:.94rem;margin:0}
.pkg-price{font-family:var(--ff-display);font-weight:700;font-size:2.4rem;line-height:1;
  color:var(--green);letter-spacing:-.03em;margin:.6rem 0 .1rem}
.pkg-save{color:var(--muted);font-size:.86rem;margin:0 0 .9rem;text-decoration:line-through}
.pkg ul{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;gap:.5rem}
.pkg li{position:relative;padding-left:1.4rem;font-size:.95rem}
.pkg li::before{content:"";position:absolute;left:0;top:.55em;width:.55rem;height:.55rem;
  border-radius:999px;background:var(--green)}
.pkg .btn{margin-top:auto;width:100%}

/* ---------- areas: card grid ---------- */
.areagrid{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:620px){.areagrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.areagrid{grid-template-columns:repeat(3,1fr)}}
.areacard{display:flex;flex-direction:column;gap:.35rem;text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.35rem;
  background:var(--paper);transition:border-color .18s ease,background .18s ease}
.areacard:hover{border-color:var(--green);background:var(--tint)}
.areacard h3{margin:0}
.areacard p{color:var(--muted);font-size:.94rem;margin:0;flex:1}
.areacard-go{margin-top:.6rem;font-family:var(--ff-display);font-weight:700;
  font-size:.82rem;letter-spacing:.03em;color:var(--green)}
.areacard:hover .areacard-go{text-decoration:underline;text-underline-offset:3px}