/* ============================================================
   Home + page-hero styles  (loads after styles.css)
   ============================================================ */

/* ---------- HERO (dark cinematic WebGL) ---------- */
.hero{
  position:relative; isolation:isolate; min-height:100svh;
  display:flex; align-items:center; padding-top:var(--header-h);
  background:var(--night); color:var(--on-night); overflow:hidden;
}
/* weightless CSS-gradient poster = LCP, instant paint */
.hero__poster{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(0,152,69,.30), transparent 55%),
    radial-gradient(90% 70% at 12% 92%, rgba(10,122,56,.22), transparent 60%),
    linear-gradient(180deg, #0B0F0D 0%, #0E1410 48%, #090C0A 100%);
}
#hero-gl{ position:absolute; inset:0; z-index:1; width:100%; height:100%; opacity:.9; }
.hero__grid{ position:absolute; inset:0; z-index:1;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(120% 100% at 50% 0%,#000 30%,transparent 78%);
  opacity:.6; }
.hero__roofline{ position:absolute; left:0; right:0; bottom:-1px; z-index:2; width:100%; height:auto; color:#070A08; }
.hero__noise{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
.hero__content{ position:relative; z-index:4; width:min(100% - 2.4rem,var(--container)); margin-inline:auto; padding-block:var(--sp-7); }
.hero__inner{ max-width:780px; }
.hero .eyebrow{ color:#7CE0A4; }
.hero .eyebrow::before{ background:var(--green); }
.hero h1{ margin:var(--sp-3) 0; color:#fff; }
.hero h1 .hl{ color:var(--green); }
.hero__sub{ font-size:var(--step-1); color:var(--on-night-dim); max-width:54ch; margin-bottom:var(--sp-4); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; }
.hero__rating{ display:flex; align-items:center; gap:.6rem; margin-top:var(--sp-4); color:var(--on-night-dim); font-size:.9rem; }
.hero__rating .badges{ display:flex; gap:.5rem; flex-wrap:wrap; }
.hero__rating .badges span{ display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .7rem; border:1px solid var(--night-hair); border-radius:100px; font-weight:600; font-size:.78rem; color:var(--on-night); }
.hero__rating .badges svg{ width:14px; height:14px; color:var(--green); }
.hero__scroll{ position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%); z-index:4; color:var(--on-night-dim); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.hero__scroll .line{ width:1px; height:38px; background:linear-gradient(var(--green),transparent); animation:scrolldwn 2s ease-in-out infinite; }
@keyframes scrolldwn{ 0%,100%{ transform:scaleY(.4); transform-origin:top; opacity:.4 } 50%{ transform:scaleY(1); opacity:1 } }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{ position:relative; background:var(--night); color:var(--on-night); padding:calc(var(--header-h) + var(--sp-6)) 0 var(--sp-6); overflow:hidden; isolation:isolate; }
.page-hero::before{ content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(90% 120% at 88% 0%,rgba(0,152,69,.26),transparent 55%),linear-gradient(180deg,#0B0F0D,#0E1410); }
.page-hero::after{ content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:58px 58px;
  mask-image:radial-gradient(120% 100% at 70% 0,#000,transparent 75%); }
.page-hero__inner{ position:relative; z-index:2; max-width:820px; }
.page-hero h1{ color:#fff; font-size:var(--step-4); margin:var(--sp-2) 0 var(--sp-3); }
.page-hero p{ color:var(--on-night-dim); font-size:var(--step-1); max-width:60ch; }
.page-hero .crumbs{ color:var(--on-night-dim); }
.page-hero .crumbs a:hover{ color:#fff; }
.page-hero__cta{ margin-top:var(--sp-4); display:flex; flex-wrap:wrap; gap:var(--sp-2); }

/* ---------- Services (property types) ---------- */
.svc{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.svc__card{ position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:420px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; isolation:isolate; }
.svc__card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .7s cubic-bezier(.2,.6,.2,1); }
.svc__card::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(7,10,8,.05) 30%,rgba(7,10,8,.88)); }
.svc__card:hover img{ transform:scale(1.07); }
.svc__body{ position:relative; z-index:2; padding:var(--sp-4); }
.svc__body .tag{ font-family:var(--font-head); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:#7CE0A4; }
.svc__body h3{ font-size:var(--step-2); margin:.4rem 0 .5rem; }
.svc__body p{ color:rgba(255,255,255,.82); font-size:.95rem; margin-bottom:var(--sp-3); }
.svc__body .card__link{ color:#fff; }

/* ---------- Roof styles grid ---------- */
.styles-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-2); }
.style-chip{ background:#fff; border:1px solid var(--hair); border-radius:var(--r); padding:var(--sp-3); display:flex; flex-direction:column; gap:.7rem; transition:.28s; }
.style-chip:hover{ border-color:var(--green); transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.style-chip__ic{ width:46px; height:46px; border-radius:10px; background:var(--green-tint); color:var(--green-deep); display:grid; place-items:center; }
.style-chip__ic svg{ width:24px; height:24px; }
.style-chip h4{ font-family:var(--font-head); font-size:1rem; }
.style-chip p{ font-size:.84rem; color:var(--slate); line-height:1.45; }
.style-chip .more{ margin-top:auto; font-size:.8rem; font-weight:700; color:var(--green-deep); font-family:var(--font-head); }

/* ---------- Split feature ---------- */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--sp-6); align-items:center; }
.split--rev{ direction:rtl; } .split--rev > *{ direction:ltr; }
.split__media{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:4/3; }
.split__media img{ width:100%; height:100%; object-fit:cover; }
.split__media .badge-float{ position:absolute; bottom:var(--sp-3); left:var(--sp-3); background:rgba(255,255,255,.95); backdrop-filter:blur(6px); border-radius:var(--r); padding:.8rem 1.1rem; display:flex; align-items:center; gap:.7rem; box-shadow:var(--shadow); }
.split__media .badge-float .n{ font-family:var(--font-head); font-weight:800; font-size:1.6rem; color:var(--green-deep); line-height:1; }
.split__media .badge-float .t{ font-size:.78rem; color:var(--slate); }
.checklist{ display:grid; gap:.7rem; margin-top:var(--sp-3); }
.checklist li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.98rem; }
.checklist svg{ width:22px; height:22px; color:var(--green); flex:none; margin-top:1px; }

/* ---------- Process ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); counter-reset:step; }
.step-card{ position:relative; padding:var(--sp-4) var(--sp-3); background:#fff; border:1px solid var(--hair); border-radius:var(--r-lg); }
.step-card__n{ font-family:var(--font-head); font-weight:800; font-size:2.4rem; color:var(--green-tint); -webkit-text-stroke:1px var(--green); line-height:1; margin-bottom:.6rem; }
.step-card h4{ font-family:var(--font-head); margin-bottom:.4rem; }
.step-card p{ font-size:.9rem; color:var(--slate); }

/* ---------- Service areas ---------- */
.areas{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.area-card{ position:relative; border-radius:var(--r-lg); overflow:hidden; padding:var(--sp-5) var(--sp-4); background:linear-gradient(160deg,var(--night-2),var(--night)); color:#fff; border:1px solid var(--night-hair); transition:.3s; }
.area-card:hover{ transform:translateY(-5px); border-color:var(--green); }
.area-card h3{ font-size:var(--step-2); }
.area-card p{ color:var(--on-night-dim); font-size:.92rem; margin:.5rem 0 var(--sp-3); }
.area-card .card__link{ color:var(--green); }
.area-card__bg{ position:absolute; right:-10px; top:-10px; font-family:var(--font-head); font-weight:800; font-size:5rem; color:rgba(255,255,255,.04); }

/* ---------- Testimonials ---------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.quote{ background:#fff; border:1px solid var(--hair); border-radius:var(--r-lg); padding:var(--sp-4); }
.quote__stars{ color:var(--green); display:flex; gap:2px; margin-bottom:var(--sp-2); }
.quote__stars svg{ width:18px; height:18px; }
.quote p{ font-size:1rem; color:var(--ink-soft); line-height:1.6; }
.quote__who{ margin-top:var(--sp-3); font-weight:700; font-family:var(--font-head); font-size:.92rem; }
.quote__who span{ display:block; color:var(--slate); font-weight:500; font-size:.82rem; }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; background:linear-gradient(135deg,var(--green-dark),var(--green-deep)); color:#fff; border-radius:var(--r-xl); padding:var(--sp-7) var(--sp-5); overflow:hidden; text-align:center; isolation:isolate; }
.cta-band::before{ content:""; position:absolute; inset:0; z-index:0; opacity:.18;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px); background-size:48px 48px;
  mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent 75%); }
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ color:#fff; max-width:18ch; margin-inline:auto; }
.cta-band p{ color:rgba(255,255,255,.9); max-width:48ch; margin:var(--sp-3) auto var(--sp-4); }
.cta-band .btn--on-night{ --btn-fg:var(--green-dark); }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin-inline:auto; }
.faq details{ border-bottom:1px solid var(--hair); padding:var(--sp-3) 0; }
.faq summary{ font-family:var(--font-head); font-weight:700; font-size:1.08rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:var(--sp-2); align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--green); font-size:1.5rem; font-weight:400; transition:transform .25s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ margin-top:var(--sp-2); color:var(--slate); }

/* ---------- Quick answer / key facts (AEO) ---------- */
.quick-answer{ background:var(--green-tint); border-left:4px solid var(--green); border-radius:var(--r); padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-4); }
.quick-answer .qa-label{ font-family:var(--font-head); font-weight:700; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green-deep); margin-bottom:.4rem; }
.quick-answer p:last-child{ color:var(--ink-soft); font-size:1.02rem; }
.key-facts{ width:100%; border-collapse:collapse; margin:var(--sp-3) 0; background:#fff; border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; }
.key-facts th,.key-facts td{ text-align:left; padding:.8rem 1rem; border-bottom:1px solid var(--hair); font-size:.94rem; }
.key-facts th{ width:38%; background:var(--surface-2); font-family:var(--font-head); color:var(--ink-soft); }
.key-facts tr:last-child th,.key-facts tr:last-child td{ border-bottom:none; }
.key-facts tr:hover td{ background:var(--green-tint); }
.updated{ font-size:.82rem; color:var(--slate); margin-top:var(--sp-3); }

/* ---------- Prose (inner content) ---------- */
.prose{ max-width:760px; }
.prose h2{ margin:var(--sp-5) 0 var(--sp-2); }
.prose h3{ margin:var(--sp-4) 0 var(--sp-1); }
.prose p{ margin-bottom:var(--sp-2); color:var(--ink-soft); }
.prose ul{ display:grid; gap:.6rem; margin:var(--sp-2) 0; }
.prose ul li{ display:flex; gap:.6rem; align-items:flex-start; }
.prose ul li::before{ content:""; width:18px; height:18px; flex:none; margin-top:3px; border-radius:5px; background:var(--green-tint);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009845' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-size:13px; background-repeat:no-repeat; background-position:center; }

/* layout helpers for inner pages */
.with-aside{ display:grid; grid-template-columns:1fr 360px; gap:var(--sp-6); align-items:start; }
.aside-card{ position:sticky; top:calc(var(--header-h) + 16px); background:#fff; border:1px solid var(--hair); border-radius:var(--r-lg); padding:var(--sp-4); box-shadow:var(--shadow-sm); }
.aside-card h3{ font-size:var(--step-1); margin-bottom:var(--sp-2); }
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }

@media (max-width:1024px){
  .svc,.areas,.quotes,.related-grid{ grid-template-columns:1fr 1fr; }
  .styles-grid{ grid-template-columns:repeat(3,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .with-aside{ grid-template-columns:1fr; }
  .aside-card{ position:static; }
}
@media (max-width:880px){
  .split{ grid-template-columns:1fr; gap:var(--sp-4); } .split--rev{ direction:ltr; }
  .svc,.areas,.quotes,.styles-grid,.related-grid{ grid-template-columns:1fr; }
  .styles-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){ .styles-grid,.steps{ grid-template-columns:1fr; } }