/* Discount Roofing of Nevada LLC — preview concept by Octopuss-AI
   Reskin: Ramp design system (style-library/ramp.md) — editorial monochrome,
   single chartreuse highlighter accent. Brand navy #021928 (from their own
   site, profile.json) kept as the inverted dark-surface color. Inter 400 only. */

:root{
  --ink:#0c0a08;              /* primary text */
  --ash:#6d6c6b;              /* secondary text */
  --ink-soft:#6d6c6b;         /* legacy token name, kept for inline references */
  --bone:#f4f2f0;             /* page canvas */
  --paper:#ffffff;            /* card surfaces */
  --hairline:#e5e7eb;         /* 1px borders — the elevation primitive */
  --navy:#021928;             /* brand dark surface (inverted panels) */
  --accent:#e4f222;           /* the one highlighter — actions, counters, highlights */
  --nav-h:74px;
  --wrap:1180px;
  --r:6px;                    /* buttons, tags */
  --r-input:10px;
  --r-wash:12px;
  --r-card:16px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Inter",-apple-system,"Segoe UI",sans-serif;
  font-weight:400;
  font-feature-settings:"ss01" on;
  color:var(--ink); background:var(--bone);
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
h1,h2,h3,.h{font-family:inherit;font-weight:400;line-height:1.05;letter-spacing:0}
a{color:inherit}
a,.btn,.nav-cta{transition:background-color .3s ease-out,color .3s ease-out,border-color .3s ease-out}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------- nav (white editorial bar, hairline bottom, frosted inset) ---------- */
.nav{
  position:sticky;top:0;z-index:60;height:var(--nav-h);
  background:var(--paper);color:var(--ink);display:flex;align-items:center;
  border-bottom:1px solid var(--hairline);
  box-shadow:inset 0 0 2px rgba(255,255,255,.6);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;gap:20px}
.brand{font-weight:400;font-size:1rem;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;line-height:1.2}
.brand small{display:block;font-size:.62rem;letter-spacing:.18em;font-weight:400;color:var(--ash);margin-top:3px}
.nav-links{display:flex;gap:24px;list-style:none;align-items:center}
.nav-links a{text-decoration:none;font-size:.9rem;color:var(--ash);padding:6px 10px;border-radius:var(--r)}
.nav-links a:hover{color:var(--ink);background:var(--bone)}
.nav-links a[aria-current]{color:var(--ink)}
.nav-cta{
  background:var(--accent);color:var(--ink);text-decoration:none;font-weight:400;font-size:.9rem;
  padding:11px 20px;border-radius:var(--r);white-space:nowrap;
}
.nav-cta:hover{background:#d4e120}

/* ---------- hero (photo kept; overlay shifted to warm ink monochrome) ---------- */
.hero{position:relative;min-height:calc(100svh - var(--nav-h) - 84px);display:flex;align-items:center;overflow:hidden;color:#fff}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(12,10,8,.92) 0%,rgba(12,10,8,.8) 38%,rgba(12,10,8,.34) 72%,rgba(12,10,8,.2) 100%);
}
/* .hero is a flex container, so .wrap becomes a flex item and will not
   stretch on its own — without width:100% the copy drifts to the centre. */
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:34px;padding-bottom:34px}
.hero-copy{max-width:680px}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-size:.7rem;font-weight:400;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:18px;
}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--accent)}
.hero h1{font-size:clamp(2.15rem,4.8vw,4rem);line-height:1.02;margin-bottom:18px}
.hero h1 em{
  font-style:normal;color:var(--ink);background:var(--accent);
  padding:0 .14em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.hero-sub{font-size:clamp(1rem,1.35vw,1.12rem);color:rgba(255,255,255,.85);max-width:52ch;margin-bottom:26px}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-block;text-decoration:none;font-weight:400;font-size:.95rem;
  padding:14px 24px;border-radius:var(--r);white-space:nowrap;
  background:var(--accent);color:var(--ink);border:1px solid var(--accent);
}
.btn:hover{background:#d4e120;border-color:#d4e120}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ---------- proof bar (verified facts only) — live-counter strip on brand navy ---------- */
.proof{background:var(--navy);color:#fff}
.proof .wrap{display:flex;flex-wrap:wrap;gap:0;align-items:stretch}
.proof-item{flex:1 1 200px;padding:26px 24px;border-left:1px solid rgba(255,255,255,.14)}
.proof-item:first-child{border-left:0;padding-left:0}
.proof-n{font-weight:400;font-size:1.5rem;line-height:1.1;display:block;color:var(--accent)}
.proof-l{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(244,242,240,.62);margin-top:8px;display:block;line-height:1.6}

/* ---------- sections ---------- */
section{position:relative;padding:clamp(64px,8vw,112px) 0}
/* Aceternity "Grid & dot backgrounds" recipe — pure CSS, static, no JS:
   faint dot matrix on plain (unclassed) light sections, vignetted so
   content sits in a clear pool. Decorative alpha ≤8%. */
section:not([class])::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(12,10,8,.08) 1px,transparent 1px);
  background-size:20px 20px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 40%,transparent 78%);
  mask-image:radial-gradient(ellipse at center,#000 40%,transparent 78%);
}
section>.wrap{position:relative}
.sec-head{max-width:640px;margin-bottom:38px}
.sec-head .kicker{font-size:.7rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);display:block;margin-bottom:12px}
.sec-head h2{font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.05;color:var(--ink);margin-bottom:14px}
.sec-head p{color:var(--ash)}

/* work / gallery — white band framed by hairlines */
.work{background:var(--paper);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.work-card{position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--navy);border:1px solid var(--hairline)}
.work-card img{width:100%;height:280px;object-fit:cover}
.work-card figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 20px 16px;color:#fff;font-size:.9rem;font-weight:400;
  background:linear-gradient(to top,rgba(12,10,8,.9),transparent);
}

/* services — hairline logo-grid cells, white on bone */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden}
.svc{background:var(--paper);padding:24px}
.svc h3{font-size:1.15rem;line-height:1.17;color:var(--ink);margin-bottom:8px}
.svc p{font-size:.92rem;color:var(--ash)}

/* why — inverted brand-navy panel */
.why{background:var(--navy);color:#fff}
.why .sec-head h2{color:#fff}
.why .sec-head p{color:rgba(244,242,240,.68)}
.why-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px 32px;list-style:none}
.why-list li{display:flex;gap:12px;align-items:flex-start;font-size:.96rem;color:rgba(255,255,255,.9);padding:8px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.why-list li::before{content:"";flex:none;width:7px;height:7px;margin-top:10px;background:var(--accent)}

/* cta band — inverted panel; the accent stays on the action itself */
.band{background:var(--navy);color:#fff}
.band .wrap{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.band h2{font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.05;max-width:24ch}
.band .btn{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.band .btn:hover{background:#d4e120;border-color:#d4e120}
.band .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.band .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden}
.contact-grid>div{background:var(--paper);padding:24px}
.contact-grid h3{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);margin-bottom:10px}
.contact-grid a{color:var(--ink);font-weight:400;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
.contact-grid a:hover{background:var(--bone)}

/* footer */
footer{background:var(--navy);color:rgba(255,255,255,.7);padding:44px 0;font-size:.88rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
footer a{color:rgba(255,255,255,.9)}
.lic{font-size:.8rem;color:rgba(255,255,255,.55)}

@media (max-width:860px){
  .nav-links{display:none}
  .hero{min-height:auto;padding:56px 0}
  .proof-item{flex:1 1 46%;border-left:0;padding-left:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}