/* PNML Home & Business Solutions — sample concept "Season Dial"
   Palette: frost #EEF3F1, ink #14201A, mowing-stripe green #2E6B3A, snow #DCE7EC, hi-vis orange #F26B1D (Call/Text buttons only)
   Type: Sofia Sans Extra Condensed (display) + Hind (body). Scale (px): 15 · 18 · 22 · 28 · 35 · 44 · 55 · 69 · 86
   Spacing: 4/8 based (8 · 16 · 24 · 32 · 48 · 64 · 96) */

:root{
  --frost:#EEF3F1; --ink:#14201A; --ink-2:#0C1511; --green:#2E6B3A; --green-2:#357A43; --green-3:#3B8A4B;
  --snow:#DCE7EC; --snow-line:#C3D5DC; --orange:#F26B1D; --muted:#3F5249;
  --t0:15px; --t1:18px; --t2:22px; --t3:28px; --t4:35px; --t5:44px; --t6:55px; --t7:69px; --t8:86px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
  --disp:'Sofia Sans Extra Condensed','Arial Narrow',sans-serif; --body:'Hind',system-ui,sans-serif;
  --focus:#14201A; --wrap:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--frost);color:var(--ink);font:400 var(--t1)/1.6 var(--body);padding-bottom:calc(72px + env(safe-area-inset-bottom))}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
p{margin:0 0 var(--s2)}
h1,h2,h3{font-family:var(--disp);font-weight:800;line-height:1;margin:0 0 var(--s2);letter-spacing:.003em}
h2{font-size:var(--t5)}
h3{font-size:var(--t3)}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--s2);top:-80px;z-index:100;background:var(--ink);color:#fff;padding:12px 16px;font-weight:700;border-radius:4px}
.skip:focus{top:var(--s1)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
.eyebrow{font:700 var(--t0)/1.3 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin:0 0 var(--s1)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);min-height:52px;padding:0 var(--s3);border-radius:6px;border:2px solid transparent;
  font:800 var(--t2)/1 var(--disp);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.btn svg{flex:none}
.btn-go{background:var(--orange);color:var(--ink)}
.btn-go:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--ink)}
.btn-go:active{transform:translateY(0);box-shadow:none}
.btn-ghost{background:transparent;color:var(--frost);border-color:var(--frost)}
.btn-ghost:hover{background:rgba(238,243,241,.12);transform:translateY(-2px)}
.sign,.dock,.sign-band,.contact,.foot,.services,.pane-peek{--focus:#fff}
.ctas{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}

/* ---------- Header ---------- */
.top{position:sticky;top:0;z-index:50;background:var(--frost);border-bottom:2px solid var(--ink)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:64px;padding:var(--s1) 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px}
.brand-mark{border-radius:4px}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-name{font:900 var(--t3)/.9 var(--disp);letter-spacing:.02em}
.brand-sub{font:600 var(--t0)/1.2 var(--body);color:var(--muted);margin-top:2px}
.nav{display:none;gap:var(--s3)}
.nav a{font:600 var(--t0)/1 var(--body);text-decoration:none;padding:15px 4px;letter-spacing:.04em;text-transform:uppercase;background:linear-gradient(var(--green),var(--green)) 0 100%/0 3px no-repeat;transition:background-size .2s ease}
.nav a:hover{background-size:100% 3px}
.top-call{display:none;min-height:48px;padding:0 var(--s2);font-size:var(--t2)}
.top-call .num{font-weight:800}

/* ---------- Hero: season dial ---------- */
.dial{display:flex;flex-direction:column;border-bottom:2px solid var(--ink);scroll-margin-top:64px}
.pane{position:relative;overflow:hidden;isolation:isolate}
/* pane backgrounds drawn as stripe fields that slide into place on load (background position only; nothing is hidden) */
.pane::before{content:"";position:absolute;inset:0;z-index:-1}
.pane-yard{background:var(--green);color:#fff}
.pane-yard::before{background:repeating-linear-gradient(90deg,var(--green) 0 72px,var(--green-2) 72px 144px)}
.pane-snow{background:var(--snow);color:var(--ink)}
.pane-snow::before{background:repeating-linear-gradient(118deg,transparent 0 30px,var(--snow-line) 30px 34px)}
@media (prefers-reduced-motion:no-preference){
  .pane-yard::before{animation:slide-l .9s cubic-bezier(.2,.7,.2,1) both}
  .pane-snow::before{animation:slide-r .9s .15s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes slide-l{from{background-position:-288px 0}to{background-position:0 0}}
@keyframes slide-r{from{background-position:204px 0}to{background-position:0 0}}

/* which pane is open comes from <html data-season> */
.pane [data-body],.pane [data-peek]{display:none}
html[data-season="yard"] .pane-yard [data-body],html[data-season="snow"] .pane-snow [data-body]{display:block}
html[data-season="yard"] .pane-snow [data-peek],html[data-season="snow"] .pane-yard [data-peek]{display:flex}
html[data-season="snow"] .pane-snow{order:-1}

.pane-in{padding:var(--s5) 20px 0}
.pane-copy{max-width:560px}
.pane .eyebrow{color:var(--green)}
.pane-yard .eyebrow{color:#fff}
.pane-title{font:800 var(--t6)/.95 var(--disp);margin:0 0 var(--s2);letter-spacing:.003em}
.pane-title .line2{display:block}
.pane-yard .pane-title .line2{color:#fff;text-shadow:3px 3px 0 var(--ink)}
.pane-snow .eyebrow{color:var(--ink)}
.pane-snow .pane-title .line2{color:var(--green)}
.lede{font-size:var(--t2);line-height:1.4;max-width:30ch;margin-bottom:var(--s3)}
.sign{display:inline-flex;flex-wrap:wrap;gap:var(--s1);background:var(--ink);padding:var(--s1);border-radius:10px}
.sign .btn{flex:1 1 auto}
.window{margin:var(--s5) -20px 0;position:relative}
.window img{width:100%;aspect-ratio:4/3;object-fit:cover;clip-path:polygon(0 12%,100% 0,100% 100%,0 100%)}
.pane-title:focus{outline:none}

/* collapsed pane: dimmed photo, vertical label, flip knob */
.pane-peek{position:relative;color:#fff;min-height:120px;padding:var(--s2) 20px;align-items:center;justify-content:space-between;gap:var(--s2)}
.pane-peek>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.pane-peek::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,21,17,.88),rgba(12,21,17,.62));z-index:-1}
.peek-title{font:800 var(--t4)/1 var(--disp);margin:0}
.peek-sub{font-size:var(--t0);margin:4px 0 0;max-width:24ch;line-height:1.3}
.flip{display:flex;align-items:center;gap:12px;background:none;border:0;color:#fff;font:700 var(--t0)/1.2 var(--body);cursor:pointer;padding:4px;min-height:48px;text-align:left}
.flip-txt{max-width:9ch;text-transform:uppercase;letter-spacing:.06em}
.knob{width:64px;height:64px;flex:none;transition:transform .3s ease}
.flip:hover .knob{transform:rotate(-24deg)}
.pane-snow .flip:hover .knob{transform:rotate(24deg)}

@media (min-width:768px){
  .pane-title{font-size:var(--t7)}
  .lede{max-width:34ch}
  .pane-in{padding:var(--s6) var(--s5) 0}
  .window{margin:var(--s5) calc(var(--s5)*-1) 0}
}
@media (min-width:1000px){
  .dial{flex-direction:row;min-height:clamp(600px,calc(100svh - 66px),720px)}
  .pane{flex:1 1 0;transition:flex-grow .3s ease}
  html[data-season="yard"] .pane-yard,html[data-season="snow"] .pane-snow{flex-grow:2.3}
  html[data-season="snow"] .pane-snow{order:0}
  .pane-yard{order:0}.pane-snow{order:1}
  .pane-in{position:relative;height:100%;padding:var(--s6) var(--s6) var(--s6) max(20px,calc((100vw - var(--wrap))/2))}
  .pane-snow .pane-in{padding-left:var(--s6);padding-right:max(20px,calc((100vw - var(--wrap))/2))}
  .pane-copy{max-width:min(500px,58%);position:relative;z-index:2}
  .window{position:absolute;right:0;bottom:0;width:44%;margin:0}
  .window img{aspect-ratio:4/3.1;clip-path:polygon(16% 0,100% 0,100% 100%,0 100%)}
  .pane-peek{position:absolute;inset:0;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:var(--s6) var(--s4) var(--s5)}
  .pane-peek::after{background:linear-gradient(180deg,rgba(12,21,17,.7),rgba(12,21,17,.88))}
  .pane [data-peek]{height:100%}
  .peek-title{font-size:var(--t6)}
  .peek-sub{font-size:var(--t1);max-width:16ch}
  .knob{width:88px;height:88px}
  .flip{flex-direction:column;align-items:flex-start;gap:var(--s1)}
  .flip-txt{max-width:none;font-size:var(--t0)}
  .pane-yard .pane-in,.pane-snow .pane-in{min-height:100%}
}
@media (min-width:1500px){.pane-title{font-size:var(--t8)}}

/* truck-sign band */
.sign-band{background:var(--ink);color:var(--frost);padding:var(--s3) 0}
.band-in{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
.band-line{margin:0;font-size:var(--t1);max-width:60ch}
.band-k{font:800 var(--t3)/1 var(--disp);letter-spacing:.02em;margin-right:6px}
.band-actions{display:none;gap:var(--s2)}
@media (min-width:768px){.band-in{flex-direction:row;align-items:center;justify-content:space-between}.band-actions{display:flex}}

/* ---------- How it works ---------- */
.how{padding:var(--s7) 0 var(--s6)}
.how-grid{display:grid;gap:var(--s6)}
.how-head p{max-width:42ch}
.how-photo{margin:var(--s4) var(--s2) 0 0}
.how-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;box-shadow:12px 12px 0 var(--green)}
.steps{list-style:none;margin:0;padding:0;position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:4px;background:repeating-linear-gradient(180deg,var(--green) 0 16px,transparent 16px 24px)}
.steps li{position:relative;padding:0 0 var(--s5) 80px;min-height:48px}
.steps li:last-child{padding-bottom:0}
.step-n{position:absolute;left:0;top:0;width:48px;height:48px;background:var(--ink);color:var(--frost);display:grid;place-items:center;font:900 var(--t3)/1 var(--disp);border-radius:4px}
.steps h3{font-size:var(--t4);margin-bottom:var(--s1);padding-top:4px}
.steps p{margin:0;max-width:34ch}
@media (min-width:900px){
  .how-grid{grid-template-columns:repeat(12,1fr);gap:var(--s4);align-items:start}
  .how-head{grid-column:1/7}
  .steps{grid-column:8/13;margin-top:var(--s6)}
  h2{font-size:var(--t6)}
}

/* ---------- Services ---------- */
.services{background:var(--green);color:#fff;padding:var(--s6) 0 var(--s7);position:relative;overflow:hidden}
.services::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 72px,rgba(255,255,255,.045) 72px 144px);pointer-events:none}
.svc-top{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4);position:relative}
.svc-top h2{margin:0;max-width:14ch}
.divider{color:#D3EAD7;flex:none}
.svc-list{list-style:none;margin:0;padding:0;position:relative}
.svc-list li{display:grid;gap:var(--s1);padding:var(--s3) 0;border-top:2px solid rgba(255,255,255,.4);transition:padding-left .25s ease,background-color .25s ease}
.svc-list li:last-child{border-bottom:2px solid rgba(255,255,255,.4)}
.svc-list h3{font-size:var(--t5);margin:0;line-height:.98}
.svc-list p{margin:0;max-width:38ch;font-size:var(--t1)}
.tag{justify-self:start;font:700 var(--t0)/1 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border-radius:2px;background:var(--frost);color:var(--ink)}
.tag-snow{background:var(--snow)}
@media (min-width:900px){
  .svc-list li{grid-template-columns:repeat(12,1fr);column-gap:var(--s3);align-items:center;padding:var(--s4) 0}
  .svc-list .tag{grid-column:1/3}
  .svc-list h3{grid-column:3/9;font-size:var(--t6)}
  .svc-list p{grid-column:9/13}
  .svc-list li:hover{padding-left:var(--s2);background:rgba(255,255,255,.06)}
}

/* ---------- Out on the job: offset board ---------- */
.jobs{padding:var(--s7) 0 var(--s6)}
.jobs h2{margin-bottom:var(--s4)}
.board{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3) var(--s2);align-items:start}
.b{margin:0}
.b img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--snow)}
.b2 img{aspect-ratio:3/4}
.b figcaption{font:800 var(--t2)/1 var(--disp);letter-spacing:.04em;text-transform:uppercase;margin-top:var(--s1);padding-left:var(--s2);position:relative}
.b figcaption::before{content:"";position:absolute;left:0;top:50%;width:10px;height:4px;background:var(--green)}
.b1{grid-column:1/-1}
.b2{margin-top:var(--s5)}
.b6{grid-column:1/-1}
@media (min-width:900px){
  .board{grid-template-columns:repeat(12,1fr);gap:var(--s4) var(--s3)}
  .b1{grid-column:1/6}
  .b2{grid-column:6/9;margin-top:var(--s6)}
  .b3{grid-column:9/13;margin-top:var(--s3)}
  .b4{grid-column:1/7;margin-top:var(--s3)}
  .b5{grid-column:7/10;margin-top:var(--s3)}
  .b6{grid-column:10/13;margin-top:var(--s5)}
}

/* ---------- Reviews ---------- */
.reviews{padding:var(--s7) 0}
.reviews h2{margin-bottom:var(--s5)}
.quotes{display:grid;gap:var(--s5)}
.q{margin:0;padding-left:var(--s3);border-left:8px solid var(--green);max-width:46ch}
.q blockquote{margin:0}
.q p{font:500 var(--t2)/1.4 var(--body);margin:0 0 var(--s2)}
.q1 p{font:800 var(--t6)/.98 var(--disp);color:var(--ink)}
.q figcaption{font:700 var(--t0)/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@media (min-width:900px){
  .quotes{grid-template-columns:repeat(12,1fr);gap:var(--s5) var(--s4)}
  .q1{grid-column:1/8;max-width:none}
  .q1 p{font-size:var(--t7);max-width:14ch}
  .q2{grid-column:8/13;margin-top:var(--s6)}
  .q3{grid-column:2/7}
  .q4{grid-column:8/13;margin-top:calc(var(--s4)*-1)}
}

/* ---------- Contact ---------- */
.contact{background:var(--ink);color:var(--frost);padding:var(--s7) 0}
.contact-grid{display:grid;gap:var(--s5)}
.contact h2{max-width:16ch}
.big-num{font:900 var(--t6)/1 var(--disp);margin:0}
.big-num a{text-decoration:none;border-bottom:6px solid var(--green-3)}
.big-num a:hover{border-color:var(--frost)}
.facts{margin:0;display:grid;gap:var(--s3)}
.facts div{border-top:2px solid rgba(238,243,241,.35);padding-top:var(--s2)}
.facts dt{font:700 var(--t0)/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#B7D3BE;margin-bottom:4px}
.facts dd{margin:0;font:600 var(--t2)/1.35 var(--body);max-width:30ch}
@media (min-width:900px){
  .contact-grid{grid-template-columns:7fr 5fr;gap:var(--s6);align-items:end}
  .big-num{font-size:var(--t8)}
}

/* ---------- Footer ---------- */
.foot{background:var(--ink-2);color:var(--frost);padding:var(--s4) 0}
.foot-in{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);justify-content:space-between}
.foot-main{margin:0;font:600 var(--t1)/1.4 var(--body)}

/* ---------- Sticky call/text dock (phones) ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:var(--s1);padding:var(--s1) var(--s2) calc(var(--s1) + env(safe-area-inset-bottom));background:var(--ink);border-top:2px solid var(--green-3)}
.dock .btn{flex:1;min-height:56px}
@media (min-width:768px){
  .dock{display:none}
  body{padding-bottom:0}
}
@media (min-width:900px){
  .nav{display:flex}
  .top-call{display:inline-flex}
}

/* ---------- Scroll reveal: position only. Content is always visible (never opacity 0, clip-path or hidden). ---------- */
html.js .reveal{transform:translateY(28px)}
html.js .reveal.in{transform:none;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.b::after,.how-photo::after{content:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js .reveal{transform:none}
  .btn-go:hover,.btn-ghost:hover{transform:none}
}

/* no script: no dial to flip, the open pane just shows */
html:not(.js) .flip{display:none}