/* ---------- Inner page hero (static image, no scroll canvas) ---------- */
.inner-hero{
  position:relative;min-height:82vh;display:flex;align-items:flex-end;
  padding:calc(var(--header-h) + 56px) var(--gutter) 76px;
  background-size:cover;background-position:center;background-color:var(--charcoal);
}
.inner-hero::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(17,17,17,.92) 0,rgba(17,17,17,.6) 42%,rgba(17,17,17,.18) 75%),
             linear-gradient(to bottom,rgba(17,17,17,.5) 0,rgba(17,17,17,0) 26%);
}
.inner-hero .inner{position:relative;max-width:920px;display:flex;flex-direction:column;gap:22px}
.inner-hero .kicker{margin:0;font:500 12px/1.5 var(--ff-text);letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
.inner-hero h1{margin:0;font:200 clamp(40px,6.2vw,96px)/1.05 var(--ff-display);letter-spacing:-.02em;color:var(--white)}
.inner-hero .lede{margin:0;max-width:56ch;color:var(--stone)}
.inner-hero .actions{display:flex;gap:14px;margin-top:8px;flex-wrap:wrap}

/* ---------- Page intro ---------- */
.intro{max-width:900px}
.intro .eyebrow{color:var(--graphite)}
.intro p{color:var(--graphite);margin:18px 0 0}
.intro p + p{margin-top:14px}
/* Dark sections: light text so the copy stays readable on walnut / charcoal */
.on-walnut .intro .eyebrow,.on-charcoal .intro .eyebrow{color:var(--stone)}
.on-walnut .intro p,.on-charcoal .intro p{color:var(--stone)}

/* ---------- Style / type grid (windows, doors) ---------- */
.styles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-light);margin-top:clamp(36px,4vw,56px)}
.style-card{background:var(--white);display:flex;flex-direction:column}
.style-card .ph{aspect-ratio:4/3;overflow:hidden;background:var(--graphite)}
.style-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.style-card:hover .ph img{transform:scale(1.04)}
.style-card .ph.noimg{
  display:flex;align-items:center;justify-content:center;text-align:center;padding:22px;
  background:linear-gradient(150deg,var(--graphite),var(--charcoal));color:var(--stone);
  font:500 11px/1.5 var(--ff-text);letter-spacing:.14em;text-transform:uppercase;
}
.style-card .txt{padding:24px 22px 28px;display:flex;flex-direction:column;gap:8px;flex:1}
.style-card h3{margin:0;font:300 21px/1.2 var(--ff-display);letter-spacing:-.005em}
.style-card p{margin:0;color:var(--graphite);font-size:14.5px;line-height:1.55}

.styles-grid.cols-5{grid-template-columns:repeat(5,1fr)}

/* ---------- Feature rows (image + text, alternating) ---------- */
.feature{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,88px);align-items:center}
.feature.reverse .feature-media{order:2}
.feature.reverse .feature-copy{order:1}
.feature-media{aspect-ratio:4/3;overflow:hidden}
.feature-media img{width:100%;height:100%;object-fit:cover}
.feature-media.noimg{
  display:flex;align-items:center;justify-content:center;text-align:center;padding:32px;
  background:linear-gradient(150deg,var(--graphite),var(--charcoal));color:var(--stone);
  font:500 11px/1.6 var(--ff-text);letter-spacing:.14em;text-transform:uppercase;
}
.feature-copy h2{margin:0}
.feature-copy .lede{margin:16px 0 0}
.feature-copy p{margin:14px 0 0}
.feature + .feature{margin-top:clamp(64px,8vw,120px)}

/* ---------- Checklist ---------- */
.checklist{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:11px}
.checklist li{position:relative;padding-left:24px;line-height:1.5}
.checklist li::before{content:'';position:absolute;left:0;top:.6em;width:7px;height:7px;background:var(--amber)}
.on-walnut .checklist li::before{background:var(--amber)}

/* ---------- Trio (porches / pergolas / patios style mini-cards, no photos) ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-light);margin-top:clamp(36px,4vw,56px)}
.trio > div{background:var(--white);padding:clamp(28px,3vw,44px) clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:12px}
.trio h3{margin:0;font:300 24px/1.2 var(--ff-display)}
.trio p{margin:0;color:var(--graphite)}

/* ---------- Before / after ---------- */
.before-after{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line-light);margin-top:clamp(28px,3vw,44px)}
.before-after figure{margin:0;position:relative}
.before-after img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.before-after figcaption{
  position:absolute;left:16px;bottom:16px;font:500 11px/1 var(--ff-text);letter-spacing:.16em;text-transform:uppercase;
  color:var(--white);background:rgba(17,17,17,.62);padding:9px 14px;
}

/* ---------- CTA band ---------- */
.cta-band{position:relative;padding:clamp(84px,12vw,168px) var(--gutter);text-align:center;background-size:cover;background-position:center;background-color:var(--walnut)}
.cta-band::before{content:'';position:absolute;inset:0;background:rgba(17,17,17,.72)}
.cta-band .inner{position:relative;max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:20px;color:var(--white)}
.cta-band .lede{color:var(--stone)}

/* ---------- Trust band (reused text style, list w/o border box) ---------- */
.trust-line{display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:28px;font:400 13px/1.3 var(--ff-text);letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}

/* ---------- Contact page ---------- */
.contact-hero{padding:calc(var(--header-h) + 64px) var(--gutter) 0;max-width:1000px}
.contact-hero .kicker{color:var(--stone)}
.contact-hero h1{margin:14px 0 0;font:200 clamp(38px,5.6vw,80px)/1.06 var(--ff-display);letter-spacing:-.02em}
.contact-hero .lede{margin:18px 0 0;max-width:56ch;color:var(--stone)}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,5vw,96px);align-items:start}
.contact-info dl{margin:0;display:grid;gap:26px}
.contact-info dt{font:500 11px/1.4 var(--ff-text);letter-spacing:.18em;text-transform:uppercase;color:var(--stone);margin-bottom:6px}
.contact-info dd{margin:0;font:300 22px/1.3 var(--ff-display);color:var(--white)}
.contact-info dd a{text-decoration:none}
.contact-info dd a:hover{color:var(--walnut)}

/* ---------- Inline links in body copy ---------- */
.intro a,.feature-copy a,.prose a,.faq-more a{text-decoration:underline;text-decoration-color:var(--amber);text-underline-offset:3px}
.intro a:hover,.feature-copy a:hover,.prose a:hover,.faq-more a:hover{color:var(--walnut)}
.on-walnut .intro a:hover,.on-charcoal a:hover{color:var(--amber)}

/* ---------- FAQ accordion ---------- */
.faq-list{margin-top:clamp(28px,3vw,44px);border-top:1px solid var(--line-light)}
.faq-item{border-bottom:1px solid var(--line-light)}
.faq-item h3{margin:0}
.faq-q{
  display:flex;justify-content:space-between;align-items:center;gap:24px;width:100%;min-height:64px;padding:20px 0;
  background:none;border:0;color:inherit;text-align:left;cursor:pointer;
  font:300 clamp(20px,1.8vw,26px)/1.3 var(--ff-display);letter-spacing:-.005em;
}
.faq-q:hover{color:var(--walnut)}
.faq-q svg{flex:0 0 auto;width:14px;height:14px;transition:transform .25s var(--ease)}
.faq-q[aria-expanded="true"] svg{transform:rotate(45deg)}
.faq-a{padding:0 0 26px;max-width:72ch}
.faq-a p{margin:0;color:var(--graphite)}
.faq-more{margin-top:28px;color:var(--graphite)}

/* ---------- Process steps ---------- */
.steps{list-style:none;margin:clamp(36px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-light);counter-reset:step}
.steps li{background:var(--white);padding:clamp(28px,3vw,40px) clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:12px;counter-increment:step}
.on-paper .steps li{background:var(--paper)}
.steps li::before{content:"0" counter(step);font:500 12px/1 var(--ff-text);letter-spacing:.2em;color:var(--walnut)}
.steps h3{margin:0;font:300 24px/1.2 var(--ff-display)}
.steps p{margin:0;color:var(--graphite)}

/* ---------- City list ---------- */
.city-list{list-style:none;margin:clamp(28px,3vw,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-light)}
.city-list li{background:var(--white);padding:18px 20px;font:400 13px/1.3 var(--ff-text);letter-spacing:.16em;text-transform:uppercase}
.city-list a{display:block;text-decoration:none;color:inherit}
.city-list a:hover{color:var(--walnut)}

/* ---------- Simple page hero (no photo) ---------- */
.page-hero{padding:calc(var(--header-h) + 64px) var(--gutter) clamp(56px,7vw,96px);max-width:1100px}
.page-hero .kicker{margin:0;font:500 12px/1.5 var(--ff-text);letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
.page-hero h1{margin:14px 0 0;font:200 clamp(38px,5.6vw,80px)/1.06 var(--ff-display);letter-spacing:-.02em}
.page-hero .lede{margin:18px 0 0;max-width:60ch;color:var(--stone)}
.page-hero .actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}

/* ---------- Long-form text (privacy policy) ---------- */
.prose{max-width:760px;margin:0 auto}
.prose h2{margin:44px 0 12px;font:300 clamp(24px,2.4vw,32px)/1.2 var(--ff-display)}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--graphite)}
.prose ul{padding-left:20px}
.todo-note{padding:16px 20px;border-left:3px solid var(--amber);background:var(--paper);color:var(--charcoal)}

/* ---------- Projects gallery ---------- */
.projects{display:grid;gap:clamp(56px,7vw,104px)}
.project .before-after{margin-top:0}
.project-meta{margin-top:22px;display:flex;flex-direction:column;gap:8px;max-width:72ch}
.project-meta h3{margin:0;font:300 clamp(24px,2.2vw,32px)/1.2 var(--ff-display)}
.project-tags{margin:0;font:500 12px/1.4 var(--ff-text);letter-spacing:.16em;text-transform:uppercase;color:var(--walnut)}
.project-meta p{margin:0;color:var(--graphite)}
.ph-slot{
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;
  background:linear-gradient(150deg,var(--graphite),var(--charcoal));color:var(--stone);
  font:500 11px/1.6 var(--ff-text);letter-spacing:.14em;text-transform:uppercase;
}

/* ---------- Responsive (inner) ---------- */
@media (max-width:980px){
  .styles-grid,.styles-grid.cols-5{grid-template-columns:repeat(2,1fr)}
  .feature,.feature.reverse{grid-template-columns:1fr}
  .feature.reverse .feature-media,.feature.reverse .feature-copy{order:0}
  .trio{grid-template-columns:1fr}
  .before-after{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .city-list{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:600px){
  .styles-grid,.styles-grid.cols-5{grid-template-columns:1fr}
  .inner-hero{min-height:70vh}
  .steps{grid-template-columns:1fr}
  .city-list{grid-template-columns:1fr 1fr}
}