/* ==================================================================
   Sagestone Homes, Hurricane.
   Section layouts only. The global base owns the reset, palette,
   grounds, typography, buttons, nav, footer, icons and reveals.
   Enqueued only on page-templates/hurricane.php.
   ================================================================== */

/* 1. split hero, dark panel beside a full-bleed image */
.shero{display:grid;grid-template-columns:1fr 1fr;min-height:88vh;background:var(--forest)}
.shero-copy{display:flex;flex-direction:column;justify-content:center;padding:210px clamp(28px,5vw,80px) 110px;
  padding-left:var(--gutter)}
.shero h1{font-size:clamp(36px,4.4vw,60px);max-width:14ch;margin:20px 0 24px;color:var(--limestone)}
.shero p{max-width:44ch;color:var(--sandstone);font-size:18.5px;margin-bottom:32px}
.shero-art{position:relative;min-height:60vh}
.shero-art .ph{position:absolute;inset:0}

/* 2. statement band */
.stm{padding:130px 0}
.stm .wrap{max-width:940px;text-align:center}
.stm p.big{font-family:var(--font-display);font-size:clamp(24px,3.1vw,40px);line-height:1.35;color:var(--forest)}
.stm .rule{margin:30px auto 0}

/* 3. alternating rows */
.alt{padding:40px 0 150px}
.arow2{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;padding:60px 0}
.arow2:nth-child(even) .a-art{order:2}
.arow2 .ph{aspect-ratio:5/4}
.a-copy b{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);font-weight:700;margin-bottom:14px}
.a-copy h2{font-size:clamp(26px,3vw,38px);margin-bottom:18px;max-width:15ch}
.a-copy p{font-size:16.5px;color:#4A4A44;margin-bottom:16px;max-width:46ch}
.a-copy ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:11px}
.a-copy li{position:relative;padding-left:26px;font-size:15.5px;color:#4A4A44;line-height:1.5}
.a-copy li:before{content:"";position:absolute;left:0;top:.7em;width:14px;height:1px;background:var(--brand-accent)}

/* 4. why sagestone, dark */
.why2{background:var(--forest);color:var(--limestone);padding:150px 0}
.why2 h2,.why2 h3{color:var(--limestone)}
.why2 .eyebrow{color:var(--sandstone)}
.why2-head{max-width:860px;margin:0 auto 62px;text-align:center}
.why2-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:18px}
.why2-head p{margin-top:18px;color:var(--sandstone);max-width:60ch;margin-left:auto;margin-right:auto}
.w2grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.w2cell{padding:0 32px;border-left:1px solid rgba(169,133,83,.3)}
.w2cell:first-child{padding-left:0;border-left:0}
.w2cell:last-child{padding-right:0}
.w2cell svg{width:42px;height:42px;display:block;margin-bottom:20px}
.w2cell h3{font-size:20px;margin-bottom:10px}
.w2cell p{font-size:15px;color:var(--sandstone);opacity:.92;line-height:1.55}
.why2-foot{margin-top:64px;padding-top:40px;border-top:1px solid rgba(169,133,83,.3);
  display:flex;gap:34px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.why2-foot p{max-width:56ch;color:var(--sandstone);font-size:16.5px}

/* 5. permits, compact pair */
.per{padding:150px 0}
.per-head{max-width:760px;margin:0 auto 52px;text-align:center}
.per-head h2{font-size:clamp(28px,3.4vw,42px);margin-top:18px}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.pcard{border:1px solid rgba(14,29,21,.16);padding:40px 38px;background:var(--limestone)}
.pcard b{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-accent);font-weight:700;margin-bottom:14px}
.pcard h3{font-size:24px;margin-bottom:12px}
.pcard p{font-size:16px;color:#4A4A44;line-height:1.6}
.per-note{margin-top:34px;text-align:center;font-size:14.5px;color:#4A4A44}

/* 6. neighbourhoods */
.nbh{padding:150px 0}
.nbh-head{max-width:820px;margin:0 auto 56px;text-align:center}
.nbh-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:18px}
.nbh-head p{margin-top:18px;color:#4A4A44;max-width:60ch;margin-left:auto;margin-right:auto}
.ngrid{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.nitem{padding:26px 0;border-bottom:1px solid rgba(14,29,21,.16)}
.nitem b{display:block;font-family:var(--font-display);font-weight:400;font-size:22px;margin-bottom:6px}
.nitem span{font-size:15.5px;color:#4A4A44;line-height:1.55;display:block}

/* 7. faq */
.faq{padding:150px 0;overflow:hidden}
.faq-ghost{position:absolute;top:56px;left:50%;transform:translateX(-50%);font-family:var(--font-display);
  font-size:clamp(120px,19vw,260px);line-height:.8;color:var(--forest);opacity:.045;pointer-events:none;
  white-space:nowrap;user-select:none}
.faq-head{position:relative;z-index:1;max-width:760px;margin:0 auto 52px;text-align:center}
.faq-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:18px}
.faq-head p{margin-top:18px;color:#4A4A44}
.fgrid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:20px}
details{background:var(--limestone);border:1px solid rgba(14,29,21,.14)}
summary{list-style:none;cursor:pointer;padding:24px 52px 24px 26px;position:relative;
  font-family:var(--font-display);font-size:clamp(18px,1.5vw,21px);line-height:1.35}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";position:absolute;right:22px;top:24px;color:var(--brand-accent);font-family:var(--font-body);font-size:20px;font-weight:300}
details[open] summary:after{content:"–"}
details p{padding:0 26px 26px;color:#4A4A44;font-size:16px}

/* 8. finale */
.finale{position:relative;min-height:62vh;display:flex;align-items:center;overflow:hidden}
.finale .ph{position:absolute;inset:0}
.finale:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,22,16,.9) 0%,rgba(10,22,16,.84) 38%,rgba(10,22,16,.5) 56%,rgba(10,22,16,.1) 76%,rgba(10,22,16,0) 100%)}
.finale .wrap{position:relative;z-index:2}
.finale h2{font-size:clamp(30px,3.8vw,50px);max-width:17ch;margin:20px 0 22px;color:var(--limestone)}
.finale p{max-width:50ch;color:var(--sandstone);margin-bottom:34px}

@media(max-width:1024px){
  .shero{grid-template-columns:1fr}
  .shero-copy{padding:170px var(--gutter) 80px}
  .shero-art{min-height:52vh;order:-1}
  .arow2{grid-template-columns:1fr;gap:40px;padding:44px 0}
  .arow2:nth-child(even) .a-art{order:0}
  .w2grid{grid-template-columns:1fr 1fr;gap:40px 0}
  .w2cell:nth-child(odd){padding-left:0;border-left:0}
  .pgrid{grid-template-columns:1fr}
  .ngrid{grid-template-columns:1fr;gap:0}
  .fgrid{grid-template-columns:1fr}
}

@media(max-width:768px){
  .shero-copy{padding:150px var(--gutter) 64px}
  .stm,.alt,.why2,.per,.nbh,.faq{padding:92px 0}
  .w2grid{grid-template-columns:1fr;gap:34px}
  .w2cell{padding:0;border-left:0}
}