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

/* 1. split hero, matching Hurricane */
.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. stat trio */
.stats{padding:0}
.stats .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-bottom:1px solid rgba(14,29,21,.16)}
.stat{padding:56px 40px;text-align:center;border-right:1px solid rgba(14,29,21,.16)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(30px,3.6vw,46px);margin-bottom:10px}
.stat span{font-size:15px;color:#4A4A44;line-height:1.5;display:block;max-width:30ch;margin:0 auto}

/* 3. intro, matching the treatment on the other city pages */
.abt{padding:150px 0}
.abt .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}
.abt h2{font-size:clamp(30px,3.6vw,46px);margin:20px 0 24px;max-width:17ch}
.abt p{margin-bottom:20px;max-width:52ch;color:#4A4A44}
.abt .rule{margin-bottom:26px}
.abt-art{position:relative}
.abt-art .backer{position:absolute;right:-40px;top:42px;bottom:42px;left:64px;background:#E4DFD2;z-index:0}
.abt-art .ph{position:relative;z-index:1;aspect-ratio:4/5}

/* 4. the four anchors */
.anc{padding:150px 0}
.anc-head{max-width:820px;margin:0 auto 60px;text-align:center}
.anc-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:18px}
.agrid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.acard .ph{aspect-ratio:3/4;margin-bottom:22px}
.acard b{display:block;font-family:var(--font-display);font-weight:400;font-size:22px;margin-bottom:8px}
.acard span{font-size:15px;color:#4A4A44;line-height:1.55;display:block}

/* 5. why sagestone, dark, sticky heading beside stacked items */
.wy{background:var(--forest);color:var(--limestone);padding:150px 0}
.wy h2,.wy h3{color:var(--limestone)}
.wy .eyebrow{color:var(--sandstone)}
.wy .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}
.wy-side h2{font-size:clamp(28px,3.4vw,42px);margin-top:18px;max-width:14ch}
.wy-side p{margin-top:22px;color:var(--sandstone);max-width:36ch}
.wy-side .rule{margin-top:24px}
.wyitem{display:grid;grid-template-columns:56px 1fr;gap:24px;padding:30px 0;border-top:1px solid rgba(169,133,83,.3)}
.wyitem:last-child{border-bottom:1px solid rgba(169,133,83,.3)}
.wyitem i{font-style:normal;font-family:var(--font-display);font-size:22px;color:var(--brand-accent)}
.wyitem h3{font-size:22px;margin-bottom:10px}
.wyitem p{font-size:16px;color:var(--sandstone);opacity:.94;line-height:1.6;max-width:48ch}

/* 6. permits */
.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}

/* 7. 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}

/* 8. 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}

/* 9. 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){
  .stats .wrap{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid rgba(14,29,21,.16);padding:38px 20px}
  .stat:last-child{border-bottom:0}
  .shero{grid-template-columns:1fr}
  .shero-copy{padding:170px var(--gutter) 80px}
  .shero-art{min-height:52vh;order:-1}
  .abt .wrap{grid-template-columns:1fr;gap:48px}
  .agrid{grid-template-columns:1fr 1fr;gap:34px 26px}
  .wy .wrap{grid-template-columns:1fr;gap:44px}
  .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}
  .abt,.anc,.wy,.per,.nbh,.faq{padding:92px 0}
  .abt-art .backer{display:none}
  .agrid{grid-template-columns:1fr;gap:34px}
  .wyitem{grid-template-columns:1fr;gap:10px}
}