/* Novato Roofing Pros — premium dimensional theme (graphite + ice cyan + violet) */
/* System font stack only. No JavaScript. Motion respects prefers-reduced-motion. */
:root{
  --ink:#16181d; --ink-2:#22262e; --panel-dark:#1d232d;
  --bg:#eef2f6; --card:#ffffff; --line:#dde4eb;
  --text:#161c24; --muted:#5b6572;
  --cyan:#06a8c8; --cyan-deep:#087a9e; --cyan-ice:#a5f3fc;
  --violet:#6d5df6; --glow:#67e8f9;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.65}
a{color:var(--cyan-deep)}
a:focus-visible,.btn:focus-visible,.call-btn:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:6px}
.wrap{max-width:1080px;margin:0 auto;padding:0 1.25rem}

/* Sticky glass header */
.site-header{background:rgba(18,22,29,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:#fff;padding:.85rem 0;position:sticky;top:0;z-index:50;
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 32px -18px rgba(10,20,40,.55)}
.header-inner{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.brand{color:#fff;font-size:1.35rem;font-weight:800;letter-spacing:-.01em;text-decoration:none;display:flex;align-items:center;gap:.55rem}
.brand::before{content:"";width:.7rem;height:.7rem;border-radius:.2rem;flex:none;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  box-shadow:0 4px 14px rgba(6,168,200,.6)}
.main-nav{display:flex;gap:1.25rem;margin-left:auto;flex-wrap:wrap}
.main-nav a{color:#dbe4ec;text-decoration:none;font-weight:600}
.main-nav a:hover{color:#fff}
.call-btn{background:linear-gradient(135deg,var(--cyan-deep),var(--violet));color:#fff;font-weight:700;
  text-decoration:none;padding:.5rem 1.1rem;border-radius:999px;
  box-shadow:0 10px 24px -10px rgba(8,122,158,.7)}

/* Dark dimensional hero + layered scene */
.hero{background:linear-gradient(165deg,#2b3547 0%,#1d232d 52%,#12161d 100%);color:#fff;
  padding:3.5rem 0 0;overflow:hidden;position:relative}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--violet),transparent)}
.hero h1{font-size:clamp(1.9rem,4vw,3rem);line-height:1.15;margin:.5rem 0 1rem;letter-spacing:-.015em;
  background:linear-gradient(90deg,#ffffff 30%,var(--cyan-ice));-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#fff}
.eyebrow{letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;font-weight:700;color:var(--cyan-ice);margin:0}
.lede{font-size:1.1rem;max-width:820px;color:#dbe4ec}
.hero a{color:var(--cyan-ice)}
.ticks{list-style:none;padding:0;display:flex;gap:.85rem;flex-wrap:wrap;font-weight:600}
.ticks li{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:.45rem 1rem;border-radius:999px;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.ticks li::before{content:"\2713  ";color:var(--cyan-ice)}
.btn{display:inline-block;background:linear-gradient(135deg,var(--cyan-deep),var(--violet));color:#fff;
  font-weight:700;text-decoration:none;padding:.75rem 1.5rem;border-radius:999px;
  box-shadow:0 14px 28px -10px rgba(8,122,158,.65)}
.hero .btn{color:#fff}
.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75);box-shadow:none}
.cta-row{display:flex;gap:1rem;flex-wrap:wrap}
/* Full-fledged v3: real 3D hero image + parallax + charts + illustrations.
   Small progressive-enhancement script only; all content visible without JS. */
.hero-3d{position:relative;background:#12161d;padding:4rem 0 5rem;overflow:hidden}
.hero-img{position:absolute;top:-80px;left:0;width:100%;height:calc(100% + 160px);
  object-fit:cover;will-change:transform}
.hero-overlay{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,22,29,.72),rgba(18,22,29,.55) 45%,rgba(18,22,29,.88))}
.hero-3d .wrap{position:relative;z-index:1}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.hero-3d .ticks li{animation:floaty 5s ease-in-out infinite}
.hero-3d .ticks li:nth-child(2){animation-delay:1s}
.hero-3d .ticks li:nth-child(3){animation-delay:2s}

/* Trust bar: verifiable items only */
.trust-bar{background:#fff;border-bottom:1px solid var(--line);padding:1rem 0}
.trust-bar ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem;flex-wrap:wrap;
  justify-content:space-between;font-weight:700}
.trust-bar li::before{content:"\2713  ";color:var(--cyan-deep)}

/* Icons + logo mark */
.ic{width:28px;height:28px;stroke:var(--cyan-deep);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;display:block;margin-bottom:.5rem}
.logo-mark{width:1.35rem;height:1.35rem;flex:none;color:var(--cyan-ice)}
.footer-brand .logo-mark{width:1.2rem;height:1.2rem;color:var(--cyan);vertical-align:-3px;margin-right:.4rem}
.brand .logo-mark{margin-right:.1rem}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-tag{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan-ice)}

/* Roof anatomy illustration */
.anatomy{display:grid;grid-template-columns:1.15fr 1fr;gap:2rem;align-items:center}
.anatomy svg{width:100%;height:auto;background:#fff;border:1px solid var(--line);
  border-radius:18px;box-shadow:0 14px 34px -18px rgba(20,35,55,.22)}

/* Lifespan range bars */
.bars{margin:1rem 0 2rem}
.bar-row{display:grid;grid-template-columns:180px 1fr 110px;gap:1rem;align-items:center;margin-bottom:.7rem}
.bar-label{font-weight:600}
.bar-track{display:block;height:14px;background:#dde4eb;border-radius:99px;overflow:hidden}
.bar-fill{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--violet));border-radius:99px}
.bar-val{font-weight:700;text-align:right}

/* Material swatches */
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1rem}
.swatches figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:.8rem;box-shadow:0 10px 26px -18px rgba(20,35,55,.22)}
.swatches svg{width:100%;height:auto;border-radius:8px;display:block}
.swatches figcaption{font-size:.9rem;margin-top:.5rem}

/* Rainfall chart */
.rain-wrap{overflow-x:auto}
.rain{display:flex;align-items:flex-end;gap:.5rem;min-width:560px;height:230px;
  padding:1rem;background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 14px 34px -18px rgba(20,35,55,.22)}
.rain-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.rain-val{font-size:.78rem;font-weight:700;margin-bottom:.3rem}
.rain-bar{display:block;width:100%;max-width:34px;border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,var(--cyan),var(--cyan-deep))}
.rain-mon{font-size:.78rem;margin-top:.3rem;color:var(--muted)}
.chart-note{font-size:.9rem;color:var(--muted)}

/* Schematic town map */
/* Areas We Serve section (two-column layout; scoped so 404 is unaffected) */
.areas-layout{display:grid;grid-template-columns:1fr 1.05fr;gap:2.5rem;align-items:start}
.areas-copy{min-width:0}
.areas-list{display:grid;grid-template-columns:1fr 1fr;gap:.4rem 1.5rem;list-style:none;margin:1.25rem 0;padding:0}
.areas-list li{border-bottom:1px solid var(--line);padding:.45rem 0}
.areas-list li::before{content:"↗";color:var(--cyan-deep);font-weight:700;margin-right:.5rem}
.areas-list a{text-decoration:none;font-weight:700;color:var(--text)}
.areas-list a:hover{color:var(--cyan-deep)}
.zip-box{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:.8rem 1rem;font-weight:700;margin:1.25rem 0 0}
.areas-map{margin:0}
.areas-map svg{width:100%;height:auto;background:#dde4eb;border:1px solid var(--line);
  border-radius:18px;box-shadow:0 14px 34px -18px rgba(20,35,55,.22)}
.areas-map figcaption{font-size:.9rem;color:var(--muted);margin-top:.4rem}

/* Scroll reveal (JS adds .reveal; no-JS content stays visible) */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* Expanded footer */
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.footer-col h3{color:#fff;margin-top:0}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin-bottom:.4rem}
.footer-brand{font-size:1.1rem}

/* 404 viewport fill (scoped so homepage is unaffected) */
.page-404{display:flex;flex-direction:column;min-height:100vh}
.page-404 main{flex:1;display:flex;flex-direction:column}
.page-404 .hero{flex:1}

/* Mobile sticky call bar (small screens only) */
.sticky-call{display:none}
@media(max-width:600px){
  .sticky-call{display:flex;gap:.75rem;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(18,22,29,.96);padding:.7rem 1rem;box-shadow:0 -8px 24px rgba(0,0,0,.35)}
  .sticky-call-btn{flex:1;text-align:center;background:linear-gradient(135deg,var(--cyan-deep),var(--violet));
    color:#fff;font-weight:700;text-decoration:none;padding:.6rem .5rem;border-radius:999px}
  .sticky-inspect{color:#fff;font-weight:700;text-decoration:none;padding:.6rem .25rem;white-space:nowrap}
  body{padding-bottom:64px}
  .anatomy{grid-template-columns:1fr}
  .swatches{grid-template-columns:1fr 1fr}
  .bar-row{grid-template-columns:1fr;gap:.2rem}
  .bar-val{text-align:left}
  .footer-grid{grid-template-columns:1fr}
  .trust-bar ul{justify-content:flex-start}
}

/* Sections with depth dividers */
.section{padding:3rem 0;position:relative}
.section h2{font-size:1.75rem;line-height:1.3;margin-top:0;letter-spacing:-.01em}
.section h2::after{content:"";display:block;width:3.2rem;height:4px;margin-top:.6rem;border-radius:99px;
  background:linear-gradient(90deg,var(--cyan),var(--violet))}
.tint{background:linear-gradient(180deg,#e4ebf2,#f3f5f8);
  border-top:1px solid #fff;border-bottom:1px solid var(--line);
  box-shadow:inset 0 1px 0 #fff}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.grid-3{grid-template-columns:repeat(3,1fr)}

/* Floating dimensional cards with gradient top edge */
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.4rem;position:relative;
  box-shadow:0 1px 2px rgba(20,35,55,.06),0 14px 34px -18px rgba(20,35,55,.22),0 34px 64px -32px rgba(20,35,55,.28);
  transition:transform .35s ease,box-shadow .35s ease}
.card::before{content:"";position:absolute;top:0;left:1.4rem;right:1.4rem;height:4px;border-radius:0 0 99px 99px;
  background:linear-gradient(90deg,var(--cyan),var(--violet))}
.card h3{margin-top:.4rem}
.card h3 a{text-decoration:none;color:var(--text)}
.card h3 a:hover{color:var(--cyan-deep)}
@media(hover:hover){
  .card:hover{transform:perspective(900px) translateY(-6px) rotateX(2deg) rotateY(-2deg);
    box-shadow:0 2px 4px rgba(20,35,55,.06),0 22px 44px -18px rgba(20,35,55,.3),0 44px 80px -32px rgba(20,35,55,.34)}
  .btn:hover,.call-btn:hover{transform:translateY(-2px)}
}

/* Numbered process steps */
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;counter-reset:step}
.steps li{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.4rem;counter-increment:step;
  box-shadow:0 1px 2px rgba(20,35,55,.06),0 14px 34px -18px rgba(20,35,55,.22)}
.steps li::before{content:counter(step);display:inline-block;
  background:linear-gradient(135deg,var(--cyan-deep),var(--violet));color:#fff;
  width:2.2rem;height:2.2rem;line-height:2.2rem;text-align:center;border-radius:50%;font-weight:800;
  box-shadow:0 8px 18px -6px rgba(8,122,158,.6)}

/* Near-me dark panel with gradient border */
.near-me{background:linear-gradient(160deg,#232c3a,#12161d);color:#e8eef4;
  border-top:4px solid transparent;border-image:linear-gradient(90deg,var(--cyan),var(--violet)) 1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.near-me h2{color:#fff}
.near-me h2::after{background:linear-gradient(90deg,var(--cyan-ice),var(--violet))}
.near-me a{color:var(--cyan-ice)}

/* FAQ as stacked depth cards */
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:1.1rem 1.25rem;margin-bottom:.8rem;
  box-shadow:0 1px 2px rgba(20,35,55,.05),0 10px 26px -18px rgba(20,35,55,.22)}
.faq-item summary{list-style:none;cursor:pointer;font-weight:700;font-size:1.05rem;line-height:1.35;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--cyan-deep);flex:none;transition:transform .25s ease}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{margin:.6rem 0 0}

/* Footer */
.site-footer{background:linear-gradient(180deg,#1d232d,#12161d);color:#dbe4ec;padding:2.25rem 0;
  border-top:4px solid transparent;border-image:linear-gradient(90deg,var(--cyan),var(--violet)) 1}
.site-footer a{color:var(--cyan-ice)}

/* Gentle CSS-only load-in rise */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.hero .wrap>*{animation:rise .6s ease both}
.hero .wrap>*:nth-child(2){animation-delay:.06s}
.hero .wrap>*:nth-child(3){animation-delay:.12s}
.hero .wrap>*:nth-child(4){animation-delay:.18s}
.hero .wrap>*:nth-child(5){animation-delay:.24s}
.hero .wrap>*:nth-child(6){animation-delay:.3s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media(max-width:900px){.grid,.grid-3,.steps{grid-template-columns:1fr 1fr}.hero-scene{max-height:220px}.areas-layout{grid-template-columns:1fr}}
@media(max-width:600px){
  .grid,.grid-3,.steps{grid-template-columns:1fr}
  .areas-list{grid-template-columns:1fr}
  .main-nav{margin-left:0}
  .hero{padding-top:2.25rem}
  .hero-scene{max-height:170px}
  .call-btn{padding:.45rem .9rem}
}