/* ==================================================================
   Sagestone Homes, Washington.
   Section layouts only. The global base owns the reset, palette,
   grounds, typography, buttons, nav, footer, icons and reveals.
   Enqueued only on page-templates/washington.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. why build here, two kinds of lot side by side */
.why{padding:150px 0}
.why-head{max-width:860px;margin:0 auto 62px;text-align:center}
.why-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:18px}
.why-head p{margin-top:18px;color:#4A4A44;max-width:62ch;margin-left:auto;margin-right:auto}
.rgrid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(14,29,21,.16)}
.ritem{padding:44px 52px 44px 0;border-bottom:1px solid rgba(14,29,21,.16)}
.ritem:nth-child(even){padding:44px 0 44px 52px;border-left:1px solid rgba(14,29,21,.16)}
.rnum{display:block;font-family:var(--font-display);font-size:15px;letter-spacing:.08em;color:var(--brand-accent);margin-bottom:14px}
.ritem h3{font-size:clamp(22px,2.2vw,28px);margin-bottom:12px}
.ritem p{font-size:16px;color:#4A4A44;max-width:46ch}
.why-foot{margin-top:0;padding-top:44px;border-top:0;
  display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center}
.why-foot h3{font-size:clamp(21px,2.2vw,27px);max-width:24ch;margin-bottom:12px}
.why-foot p{font-size:16px;color:#4A4A44;max-width:52ch}
.why-foot .acts{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end}

/* 5. permits and review, the one dark section
   Three questions, each with two outcomes. The content is a branch, not a
   list, so it is laid out as one. */
.rev{background:var(--forest);color:var(--limestone);padding:150px 0;overflow:hidden}
.rev h2,.rev h3{color:var(--limestone)}
.rev .eyebrow{color:var(--sandstone)}
.rev-head{max-width:840px;margin:0 auto 70px;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);max-width:58ch;margin-left:auto;margin-right:auto}

.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.qcard{padding:0 42px;position:relative}
.qcard:first-child{padding-left:0}
.qcard:last-child{padding-right:0}
/* the connector, a bronze line with a node at each question */
.qcard:before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:rgba(169,133,83,.35)}
.qcard:first-child:before{left:9px}
.qcard:last-child:before{right:calc(100% - 9px)}
.qdot{position:relative;z-index:1;display:block;width:18px;height:18px;border-radius:50%;
  border:1px solid var(--brand-accent);background:var(--forest);margin-bottom:26px}
.qdot:after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--brand-accent)}
.qlabel{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;color:var(--sandstone);opacity:.75;margin-bottom:10px}
.qcard h3{font-size:clamp(21px,2.1vw,26px);margin-bottom:24px;max-width:16ch}
.ans{padding:18px 0;border-top:1px solid rgba(169,133,83,.28)}
.ans b{display:block;font-family:var(--font-body);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;color:var(--brand-accent);margin-bottom:8px}
.ans span{display:block;font-size:15.5px;color:var(--sandstone);opacity:.94;line-height:1.55}
.rev-note{margin-top:56px;padding-top:34px;border-top:1px solid rgba(169,133,83,.3);
  font-size:16px;color:var(--sandstone);max-width:72ch}

/* 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}
  .qgrid{grid-template-columns:1fr;gap:44px}
  .qcard{padding:0}
  .qcard:before{display:none}
  .rgrid{grid-template-columns:1fr}
  .ritem,.ritem:nth-child(even){padding:34px 0;border-left:0}
  .why-foot{grid-template-columns:1fr;gap:28px}
  .why-foot .acts{justify-content:flex-start}
  .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,.why,.rev,.nbh,.lot,.faq{padding:92px 0}
  .lgrid{grid-template-columns:1fr;gap:34px}
  .liv{padding:92px 0}
  .jur div{grid-template-columns:1fr;gap:6px}
  .abt-art .backer{display:none}
}