/* ============================================================
   SUNRISE LAWN & SNOW — demo design system
   Fictional brand for [PSC showroom]. Structure mirrors the PSC
   design system (grid, spacing, 16px cards, kicker labels,
   restrained accents); palette + type voice are Sunrise's own.
   ============================================================ */
:root{
  --grass:#2E7D32; --grass-deep:#1B5E20; --grass-bright:#43A047;
  --amber:#F59E0B; --amber-soft:#FBBF24; --sky:#0EA5E9;
  --cream:#FAF7F0; --ink:#1F2937; --muted:#6B7280;
  --card:#FFFFFF; --line:rgba(31,41,55,.10);
  --accent:var(--amber);
  --radius:16px; --radius-btn:10px;
}
/* Snow mode — the seasonal toggle swaps the register */
body.snow{ --grass:#0C4A6E; --grass-deep:#082F49; --grass-bright:#0284C7;
  --amber:#38BDF8; --amber-soft:#7DD3FC; --cream:#F1F5F9; }

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--cream);color:var(--ink);
  line-height:1.65;font-size:16px;transition:background .5s}
h1,h2,h3,h4,.btn,.kicker,nav .logo{font-family:'Archivo',sans-serif}
h1{font-weight:900;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.08;letter-spacing:-.01em}
h2{font-weight:800;font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.12;letter-spacing:-.01em}
h3{font-weight:800;font-size:1.15rem}
.accent{color:var(--amber)}
.kicker{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.24em;
  text-transform:uppercase;color:var(--grass);margin-bottom:.9rem}
.kicker.on-dark{color:var(--amber-soft)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
section{padding:72px 0}
p.lead{font-size:1.12rem;color:var(--muted);max-width:640px}

/* nav */
nav{position:sticky;top:0;z-index:50;background:rgba(250,247,240,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
body.snow nav{background:rgba(241,245,249,.92)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
nav .logo{font-weight:900;font-size:1.05rem;color:var(--grass-deep);text-decoration:none;letter-spacing:-.01em}
nav .logo .sun{color:var(--amber)}
nav ul{display:flex;gap:26px;list-style:none;align-items:center}
nav a{color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:500}
nav a:hover{color:var(--grass)}
nav a.active{color:var(--grass);font-weight:700}

/* buttons */
.btn{display:inline-block;padding:13px 26px;border-radius:var(--radius-btn);font-weight:800;
  font-size:.95rem;text-decoration:none;cursor:pointer;border:none;transition:transform .15s, box-shadow .15s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--amber);color:#1A1505}
.btn-primary:hover{box-shadow:0 6px 18px rgba(245,158,11,.35)}
body.snow .btn-primary{color:#04121F}
.btn-ghost{background:transparent;color:var(--grass-deep);border:1.5px solid var(--grass);border-radius:var(--radius-btn)}
.btn-ghost:hover{background:rgba(46,125,50,.07)}
.btn-dark{background:var(--grass-deep);color:#fff}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;box-shadow:0 1px 3px rgba(31,41,55,.05)}
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* hero */
.hero{position:relative;min-height:82vh;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero .media,.hero video,.hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(10,26,12,.82) 0%,rgba(10,26,12,.55) 45%,rgba(10,26,12,.15) 100%)}
body.snow .hero .scrim{background:linear-gradient(100deg,rgba(4,18,31,.85) 0%,rgba(4,18,31,.55) 45%,rgba(4,18,31,.15) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:80px;padding-bottom:80px}
.hero .media-fallback{position:absolute;inset:0;z-index:0;
  background:linear-gradient(135deg,var(--grass-deep),var(--grass) 60%,var(--amber))}

/* misc components */
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:8px 16px;font-size:.83rem;font-weight:600}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--grass-bright)}
.stat{text-align:left}
.stat .num{font-family:'Archivo';font-weight:900;font-size:2.3rem;color:var(--grass-deep)}
.stat .lbl{font-size:.85rem;color:var(--muted)}
.rule-gold{height:2px;background:var(--amber);opacity:.6;border:none;width:64px;margin:18px 0}
img{max-width:100%;display:block}
.ph{background:linear-gradient(135deg,var(--grass) 0%,var(--grass-deep) 55%,#0e3a14 100%);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);
  font-family:'Archivo';font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.8rem}
.img-frame{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}

/* seasonal toggle */
.season-toggle{display:inline-flex;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:4px;gap:2px}
.season-toggle button{border:none;background:transparent;padding:8px 18px;border-radius:999px;
  font-family:'Archivo';font-weight:800;font-size:.82rem;cursor:pointer;color:var(--muted);letter-spacing:.02em}
.season-toggle button.on{background:var(--grass-deep);color:#fff}

/* before/after slider */
.ba{position:relative;border-radius:var(--radius);overflow:hidden;user-select:none;aspect-ratio:4/3}
.ba img,.ba .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after-wrap{position:absolute;inset:0;overflow:hidden;width:50%}
.ba .after-wrap img,.ba .after-wrap .ph{width:100%;position:absolute;inset:0}
.ba .handle{position:absolute;top:0;bottom:0;width:3px;background:#fff;left:50%;cursor:ew-resize;z-index:5}
.ba .handle::after{content:'⇔';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--amber);color:#1A1505;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.1rem}
.ba .tag{position:absolute;top:14px;z-index:4;background:rgba(0,0,0,.55);color:#fff;
  padding:4px 12px;border-radius:6px;font-size:.75rem;font-weight:700;letter-spacing:.08em}

/* forms */
input,select,textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;
  font-family:'Inter';font-size:.95rem;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--grass)}
label{font-size:.82rem;font-weight:700;display:block;margin-bottom:6px;letter-spacing:.02em}
.field{margin-bottom:16px}

/* footer */
footer{background:var(--grass-deep);color:rgba(255,255,255,.85);padding:56px 0 32px;margin-top:40px}
footer h4{color:#fff;margin-bottom:12px;font-size:.95rem}
footer a{color:rgba(255,255,255,.75);text-decoration:none;font-size:.9rem;display:block;margin-bottom:8px}
footer a:hover{color:var(--amber-soft)}
footer .fine{border-top:1px solid rgba(255,255,255,.15);margin-top:36px;padding-top:20px;
  font-size:.8rem;color:rgba(255,255,255,.55);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* demo ribbon — reminds prospects this is a PSC showroom build */
.demo-ribbon{background:#0B3D2E;color:#F4F1E8;text-align:center;font-size:.78rem;padding:7px 12px;letter-spacing:.06em}
.demo-ribbon b{color:#D4AF37}
.demo-ribbon a{color:#D4AF37;text-decoration:underline}

@media (max-width:760px){
  nav ul{display:none}
  section{padding:52px 0}
  .hero{min-height:70vh}
}