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

/* 1. hero */
.phero{min-height:70vh;display:flex;align-items:flex-end;overflow:hidden;padding-top:210px}
.phero .ph{position:absolute;inset:0}
.phero:before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(10,22,16,.92) 0%,rgba(14,29,21,.45) 55%,rgba(14,29,21,.5) 100%)}
.phero .wrap{position:relative;z-index:2;padding:0 0 72px}
.phero h1{font-size:clamp(36px,4.8vw,66px);max-width:17ch;margin:20px 0 22px;color:var(--limestone)}
.phero p{max-width:56ch;color:var(--sandstone);font-size:19px}

/* 2. facts */
.facts .wrap{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid rgba(14,29,21,.16)}
.fact{padding:44px 34px 40px;border-right:1px solid rgba(14,29,21,.16)}
.fact:first-child{padding-left:0}
.fact:last-child{border-right:0;padding-right:0}
.fact b{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(21px,2.2vw,28px);margin-bottom:8px}
.fact span{font-size:14.5px;color:#4A4A44;line-height:1.5;display:block}

/* 3. intro */
.abt{padding:140px 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}

/* 3b. living here */
.liv{padding:150px 0}
.liv-head{max-width:820px;margin:0 auto 60px;text-align:center}
.liv-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:18px}
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:52px 46px}
.lcard svg{width:44px;height:44px;display:block;margin-bottom:20px}
.lcard h3{font-size:21px;margin-bottom:10px}
.lcard p{font-size:15.5px;color:#4A4A44;line-height:1.55}

/* 4. the ground */
.grd{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:80vh}
.grd-art{position:relative;min-height:520px}
.grd-art .ph{position:absolute;inset:0}
.grd-copy{display:flex;flex-direction:column;justify-content:center;padding:130px clamp(28px,6vw,92px) 120px}
.grd-copy h2{font-size:clamp(28px,3.4vw,44px);margin:20px 0 22px;max-width:15ch}
.grd-copy p{margin-bottom:20px;max-width:46ch;color:#4A4A44}
.grd-copy .rule{margin-bottom:26px}
.grdlist{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:14px}
.grdlist li{position:relative;padding-left:28px;font-size:16px;line-height:1.55;max-width:44ch;color:#4A4A44}
.grdlist li:before{content:"";position:absolute;left:0;top:.72em;width:15px;height:1px;background:var(--brand-accent)}

/* 5. design review, the one dark section */
.rev{background:var(--forest);color:var(--limestone);padding:150px 0}
.rev h2,.rev h3{color:var(--limestone)}
.rev .eyebrow{color:var(--sandstone)}
.rev-head{max-width:820px;margin:0 auto 60px;text-align:center}
.rev-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:18px}
.rev-head p{margin-top:18px;color:var(--sandstone)}
.std{width:100%;border-collapse:collapse}
.std th{text-align:left;font-family:var(--font-body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--brand-accent);padding:16px 26px;border-bottom:1px solid rgba(169,133,83,.5)}
.std td{padding:24px 26px;border-bottom:1px solid rgba(169,133,83,.22);vertical-align:top;font-size:16px;color:var(--sandstone)}
.std td:first-child{font-family:var(--font-display);font-size:19px;color:var(--limestone);width:26%}
.std-note{margin-top:26px;font-size:14.5px;color:var(--sandstone);opacity:.8;max-width:70ch}

/* 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. lots and jurisdiction */
.lot{padding:150px 0}
.lot .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start}
.lot h2{font-size:clamp(28px,3.4vw,44px);margin-top:18px;max-width:14ch}
.lot .rule{margin-top:24px}
.lot p{color:#4A4A44;margin-bottom:20px;max-width:52ch}
.jur{margin-top:10px}
.jur div{display:grid;grid-template-columns:190px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid rgba(14,29,21,.16)}
.jur b{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);font-weight:700;padding-top:4px}
.jur span{font-size:16.5px;line-height:1.55}

/* 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){
  .facts .wrap{grid-template-columns:1fr 1fr}
  .fact{padding:32px 24px;border-bottom:1px solid rgba(14,29,21,.16)}
  .fact:nth-child(even){border-right:0;padding-right:0}
  .fact:nth-child(odd){padding-left:0}
  .abt .wrap,.lot .wrap{grid-template-columns:1fr;gap:48px}
  .grd{grid-template-columns:1fr}
  .grd-art{min-height:56vh;order:-1}
  .grd-copy{padding:88px clamp(24px,7vw,60px)}
  .lgrid{grid-template-columns:1fr 1fr;gap:40px 34px}
  .ngrid{grid-template-columns:1fr;gap:0}
  .fgrid{grid-template-columns:1fr}
}

@media(max-width:768px){
  .phero{padding-top:170px}
  .phero .wrap{padding-bottom:56px}
  .abt,.rev,.nbh,.lot,.faq{padding:92px 0}
  .lgrid{grid-template-columns:1fr;gap:34px}
  .liv{padding:92px 0}
  .std,.std tbody,.std tr,.std td{display:block;width:100%}
  .std thead{display:none}
  .std tr{padding:20px 0;border-bottom:1px solid rgba(169,133,83,.22)}
  .std td{border:0;padding:0 0 8px;width:auto}
  .jur div{grid-template-columns:1fr;gap:6px}
  .abt-art .backer{display:none}
}