:root{
  --demo-ink:#12202d;
  --demo-paper:#f7f5ef;
  --demo-white:#fff;
}
.demo-page{margin:0;background:var(--demo-paper);color:var(--demo-ink);font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.demo-page *{box-sizing:border-box}
.demo-page a{text-underline-offset:.2em}
.demo-shell{width:min(1180px,calc(100% - 2rem));margin:0 auto}
.demo-ribbon{padding:.55rem 1rem;background:#111;color:#fff;font-size:.78rem;letter-spacing:.04em;text-align:center}
.demo-ribbon a{color:#fff}
.demo-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);border-bottom:1px solid rgba(18,32,45,.14);backdrop-filter:blur(8px)}
.demo-nav{display:flex;align-items:center;gap:1.25rem;min-height:76px}
.demo-brand{margin-right:auto;text-decoration:none;color:inherit;font-family:Arial,Helvetica,sans-serif;font-weight:900;letter-spacing:-.04em;font-size:clamp(1.35rem,2.6vw,2.25rem)}
.demo-nav-links{display:flex;align-items:center;gap:1rem;list-style:none;margin:0;padding:0}
.demo-nav-links a{color:inherit;text-decoration:none;font-weight:700;font-size:.88rem}
.demo-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.7rem 1rem;border:2px solid currentColor;text-decoration:none;font-weight:800}
.demo-hero{position:relative;overflow:hidden;padding:clamp(3rem,7vw,6.5rem) 0}
.demo-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.demo-kicker{text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;font-weight:800;margin:0 0 1rem}
.demo-h1{font-family:Arial,Helvetica,sans-serif;font-weight:950;letter-spacing:-.055em;font-size:clamp(3rem,8vw,6.7rem);line-height:.88;margin:0 0 1.5rem;max-width:9ch}
.demo-lead{font-size:clamp(1rem,1.7vw,1.25rem);line-height:1.6;max-width:58ch}
.demo-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.75rem}
.demo-visual{position:relative;min-height:420px;border:1px solid rgba(18,32,45,.15);overflow:hidden}
.demo-visual-copy{position:absolute;left:1.4rem;right:1.4rem;bottom:1.4rem;padding:1rem;background:rgba(255,255,255,.9);font-weight:800}
.demo-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(18,32,45,.15);border-top:1px solid rgba(18,32,45,.15);border-bottom:1px solid rgba(18,32,45,.15)}
.demo-stat{background:#fff;padding:1.25rem;text-align:center}
.demo-stat strong{display:block;font-family:Arial,Helvetica,sans-serif;font-size:clamp(1.5rem,3vw,2.5rem);line-height:1}
.demo-section{padding:clamp(3.5rem,6vw,6rem) 0}
.demo-section-head{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:2rem;align-items:end;margin-bottom:2rem}
.demo-h2{font-family:Arial,Helvetica,sans-serif;font-size:clamp(2rem,4.5vw,4rem);line-height:.96;letter-spacing:-.045em;margin:0}
.demo-copy{line-height:1.7;margin:0}
.demo-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.demo-card{padding:1.5rem;border:1px solid rgba(18,32,45,.15);background:#fff;min-height:190px}
.demo-card h3{font-family:Arial,Helvetica,sans-serif;font-size:1.45rem;letter-spacing:-.025em;margin:0 0 .75rem}
.demo-card p{line-height:1.6;margin:0}
.demo-wide-card{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid rgba(18,32,45,.15);background:#fff}
.demo-wide-copy{padding:clamp(1.5rem,4vw,3.5rem)}
.demo-wide-art{min-height:330px}
.demo-quote{font-size:clamp(1.25rem,2.7vw,2.1rem);line-height:1.45;font-weight:700;margin:0 0 1rem}
.demo-disclaimer{font-size:.78rem;line-height:1.6;opacity:.72}
.demo-footer{padding:2.5rem 0;border-top:1px solid rgba(18,32,45,.15)}
.demo-footer-grid{display:flex;justify-content:space-between;gap:2rem;align-items:flex-start}
.demo-footer p{margin:0;line-height:1.6}
/* Tree Service */
.tree-demo{--tree:#183d2c;--tree-dark:#0d2a1d;--tree-accent:#c87932;--tree-soft:#e9eee5;background:#f7f3e8;color:#13271c}
.tree-demo .demo-ribbon,.tree-demo .demo-cta.primary{background:var(--tree-dark);color:#fff;border-color:var(--tree-dark)}
.tree-demo .demo-cta.secondary{color:var(--tree-dark);border-color:var(--tree-dark)}
.tree-demo .demo-kicker{color:#9a5722}
.tree-demo .demo-hero{background:linear-gradient(112deg,#f7f3e8 0 53%,#dfe7d8 53% 100%)}
.tree-demo .demo-visual{background:radial-gradient(circle at 25% 23%,#668157 0 10%,transparent 10.5%),radial-gradient(circle at 42% 35%,#456c46 0 16%,transparent 16.5%),radial-gradient(circle at 68% 19%,#799367 0 13%,transparent 13.5%),radial-gradient(circle at 76% 45%,#34563b 0 20%,transparent 20.5%),linear-gradient(165deg,#cbd9c3 0 58%,#7a5a3b 58% 61%,#ebe0ca 61%)}
.tree-demo .demo-wide-art{background:linear-gradient(135deg,rgba(13,42,29,.92),rgba(24,61,44,.72)),repeating-linear-gradient(35deg,#273 0 14px,#385 14px 28px)}
.tree-demo .demo-card{border-top:4px solid var(--tree-accent)}
/* HVAC */
.hvac-demo{--hvac:#092942;--hvac-blue:#1f75a8;--hvac-ice:#e9f6fb;--hvac-hot:#ef7e3b;background:#f7fbfd;color:#0c2940}
.hvac-demo .demo-ribbon,.hvac-demo .demo-cta.primary{background:var(--hvac);color:#fff;border-color:var(--hvac)}
.hvac-demo .demo-cta.secondary{color:var(--hvac);border-color:var(--hvac)}
.hvac-demo .demo-kicker{color:#d45f1c}
.hvac-demo .demo-hero{background:linear-gradient(112deg,#fff 0 52%,#e8f5fa 52% 100%)}
.hvac-demo .demo-visual{background:radial-gradient(circle at 68% 40%,transparent 0 16%,#fff 16.5% 19%,transparent 19.5% 24%,#b9dce9 24.5% 27%,transparent 27.5%),conic-gradient(from 45deg at 68% 40%,#d5edf6,#7db8d0,#d5edf6,#f1a06a,#d5edf6),linear-gradient(135deg,#d8eef7,#eff9fc)}
.hvac-demo .demo-wide-art{background:linear-gradient(135deg,#0a2a43,#1e7aa9 65%,#ef7e3b)}
.hvac-demo .demo-card{border-top:4px solid var(--hvac-blue)}
/* Contractor */
.contractor-demo{--build:#282724;--build-rust:#a85f36;--build-sand:#e7dcc9;--build-light:#f7f4ee;background:#f4f0e8;color:#25231f}
.contractor-demo .demo-ribbon,.contractor-demo .demo-cta.primary{background:var(--build);color:#fff;border-color:var(--build)}
.contractor-demo .demo-cta.secondary{color:var(--build);border-color:var(--build)}
.contractor-demo .demo-kicker{color:#934d2a}
.contractor-demo .demo-hero{background:linear-gradient(112deg,#f6f2ea 0 50%,#ddd3c4 50% 100%)}
.contractor-demo .demo-visual{background:linear-gradient(90deg,transparent 48%,rgba(255,255,255,.6) 48% 51%,transparent 51%),linear-gradient(0deg,transparent 49%,rgba(255,255,255,.6) 49% 52%,transparent 52%),linear-gradient(135deg,#b6a58d,#e4d7c6 42%,#5a554e 42% 46%,#b3704c 46% 71%,#333 71%)}
.contractor-demo .demo-wide-art{background:linear-gradient(25deg,#282724 0 28%,#a85f36 28% 48%,#e7dcc9 48% 72%,#807366 72%)}
.contractor-demo .demo-card{border-top:4px solid var(--build-rust)}
@media (max-width:900px){
  .demo-nav-links{display:none}
  .demo-hero-grid,.demo-section-head,.demo-wide-card{grid-template-columns:1fr}
  .demo-visual{min-height:330px}
  .demo-cards{grid-template-columns:1fr}
  .demo-footer-grid{flex-direction:column}
}
@media (max-width:560px){
  .demo-shell{width:min(100% - 1.25rem,1180px)}
  .demo-nav{gap:.65rem;min-height:68px}
  .demo-cta.header-cta{font-size:.75rem;padding:.55rem .65rem}
  .demo-hero{padding:2.5rem 0}
  .demo-h1{font-size:clamp(2.8rem,16vw,4.5rem)}
  .demo-stats{grid-template-columns:1fr}
}