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

/* ── shared phase furniture ─────────────────────────────────────── */
.phase{padding:150px 0 140px}
.pnum{font-family:var(--font-display);font-size:15px;letter-spacing:.14em;color:var(--brand-accent);display:block;margin-bottom:14px}
.phase h2{font-size:clamp(30px,3.6vw,46px);margin:0 0 22px;max-width:17ch}
.phase .lede{margin-bottom:22px;max-width:52ch}
.pmeta{display:flex;gap:34px;flex-wrap:wrap;margin:26px 0 0;padding-top:22px;border-top:1px solid rgba(14,29,21,.16)}
.pmeta div b{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);font-weight:700;margin-bottom:6px}
.pmeta div span{font-family:var(--font-display);font-size:21px}
/* an oversized phase numeral, sitting behind the heading */
/* The phase numeral is anchored to the heading block, sitting above the
   eyebrow and overlapping down behind the heading. Positioning it against
   the section put it against borders and behind images instead. */
.phead{position:relative}
.phead > *{position:relative;z-index:1}
.ghost{
  position:absolute;
  left:-.05em;
  top:-.46em;
  z-index:0;
  font-family:var(--font-display);
  font-size:clamp(96px,9.5vw,158px);
  line-height:.8;
  letter-spacing:-.02em;
  color:var(--forest);
  opacity:.08;
  pointer-events:none;
  user-select:none;
}
.ghost--light{color:var(--limestone);opacity:.10}
.phase .wrap{position:relative;z-index:1}

/* 1. hero */
/* padding-top clears the fixed nav, which is about 146px tall with the
   sprig at full size. Without it a heading that wraps to three lines grows
   upward and runs under the menu. */
.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(38px,5.2vw,70px);max-width:16ch;margin:22px 0 22px;color:var(--limestone)}
.phero p{max-width:56ch;color:var(--sandstone);font-size:19px}

/* 2. overview, centred with a rule under the heading */
.ovw{padding:140px 0}
.ovw-head{max-width:820px;margin:0 auto 66px;text-align:center}
.ovw-head h2{font-size:clamp(30px,3.8vw,50px);margin-top:18px}
.ovw-head p{margin-top:6px;color:#4A4A44;max-width:56ch;margin-left:auto;margin-right:auto}
.ovwgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.ovwcell{text-align:center;padding:0 28px;border-left:1px solid rgba(14,29,21,.14)}
.ovwcell:first-child{border-left:0}
.ovwcell svg{width:48px;height:48px;margin:0 auto 22px;display:block}
.ovwcell b{display:block;font-family:var(--font-display);font-size:26px;margin-bottom:8px}
.ovwcell span{font-size:15px;color:#4A4A44;line-height:1.5;display:block}

/* 3. duration band */
.band{padding:130px 0}
.band-head{max-width:820px;margin:0 auto 18px;text-align:center}
.band-head h2{font-size:clamp(28px,3.4vw,44px);margin-top:18px}
.band-note{text-align:center;font-size:15px;color:#4A4A44;margin-bottom:48px}
.bar{display:flex;width:100%;height:18px;border:1px solid rgba(14,29,21,.2);overflow:hidden}
.bar span{display:block;height:100%;border-right:1px solid var(--tint)}
.bar span:last-child{border-right:0}
.blegend{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-top:24px}
.bleg{padding:0 16px 0 0}
.bleg .sw{width:22px;height:6px;display:block;margin-bottom:12px}
.bleg b{display:block;font-family:var(--font-display);font-size:18px;margin-bottom:5px}
.bleg span.t{font-size:14px;color:#4A4A44;display:block;line-height:1.45}
.c1{background:#20402F}.c2{background:#33553C}.c3{background:#526A4E}
.c4{background:#8C9A72}.c5{background:#A98553}.c6{background:#DCC8A5}

/* 4. phase one */
.p1 .wrap{display:grid;grid-template-columns:1fr .9fr;gap:80px;align-items:center}
/* an offset panel behind the image, so it reads as two planes */
.p1-art{position:relative}
.p1-art .backer{position:absolute;right:-40px;top:42px;bottom:42px;left:64px;background:#E4DFD2;z-index:0}
.p1-art .ph{position:relative;z-index:1;aspect-ratio:4/5}

/* 5. phase two, four meeting cards */
.p2 .mgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
.mcard{background:var(--limestone);border:1px solid rgba(14,29,21,.14);padding:34px 32px}
.mcard b{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-accent);font-weight:700;margin-bottom:12px}
.mcard h3{font-size:23px;margin-bottom:10px}
.mcard p{font-size:15.5px;color:#4A4A44;line-height:1.55}
.p2-top{display:grid;grid-template-columns:1fr .8fr;gap:70px;align-items:end}

/* 6. phase three, overlapping image pair */
.p3 .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}
.pair{position:relative;padding:0 0 70px 0}
.pair .a{width:76%}
.pair .a .ph{aspect-ratio:4/5}
.pair .b{position:absolute;right:0;bottom:0;width:58%;border:10px solid var(--limestone)}
.pair .b .ph{aspect-ratio:4/3}

/* 7. phase four, six steps on a dark ground */
.p4{background:var(--forest);color:var(--limestone);padding:150px 0 140px}
.p4 h2,.p4 h3{color:var(--limestone)}
.p4 .eyebrow{color:var(--sandstone)}
.p4 .pmeta{border-top-color:rgba(169,133,83,.32)}
.p4 .pmeta div b{color:var(--brand-accent)}
.p4 .lede{color:var(--sandstone)}
.p4-head{display:grid;grid-template-columns:1fr .85fr;gap:70px;align-items:end;margin-bottom:60px}
.psteps{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 40px}
.pstep{border-top:1px solid rgba(169,133,83,.34);padding-top:24px}
.pstep i{font-style:normal;display:block;font-family:var(--font-display);font-size:14px;color:var(--brand-accent);margin-bottom:12px}
.pstep h3{font-size:21px;margin-bottom:8px}
.pstep p{font-size:15px;color:var(--sandstone);opacity:.9;line-height:1.55}

/* 8. phase five, image filling the left edge top to bottom */
.p5{padding:0;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:82vh;
  position:relative;z-index:2}
.p5-art{position:relative;min-height:520px}
.p5-art .ph{position:absolute;inset:0}
/* a bronze square straddling the corner of the image, crossing into the
   copy column and past the section border below it */
.p5-art .outline{position:absolute;right:-77px;bottom:-56px;width:175px;height:175px;
  border:1px solid var(--brand-accent);z-index:3;pointer-events:none}
.p5-copy{display:flex;flex-direction:column;justify-content:center;padding:130px clamp(28px,6vw,92px) 120px}
.p5-copy h2{margin-bottom:20px}
.p5-copy .lede{max-width:44ch}
.chk{display:grid;gap:0;margin-top:30px}
.chk > div{display:grid;grid-template-columns:32px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid rgba(14,29,21,.14)}
.chk > div:last-child{border-bottom:0}
.chk svg{width:32px;height:32px;margin-top:0}
.chk b{display:block;font-family:var(--font-display);font-weight:400;font-size:19px;margin-bottom:4px}
.chk span{font-size:15px;color:#4A4A44;line-height:1.5;display:block}

/* 9. phase six, centred and quiet after five busy sections */
.p6{text-align:center}
.p6 .wrap{max-width:820px}
.p6 .phead{display:inline-block;text-align:center}
.p6 .ghost{left:50%;transform:translateX(-50%)}
.p6 h2{max-width:none;margin-bottom:26px}
.p6 .rule{margin:0 auto 28px}
.p6 p{max-width:60ch;margin:0 auto 20px;color:#4A4A44}
.p6 .pmeta{justify-content:center;margin-top:34px;border-top-color:rgba(14,29,21,.16)}
.p6 .pmeta div{text-align:center}

/* 10. touchpoints */
.tp{padding:140px 0}
.tp-head{max-width:820px;margin:0 auto 52px;text-align:center}
.tp-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:18px}
.tp-head p{margin-top:18px;color:#4A4A44}
.tplist{list-style:none;padding:0;margin:0;counter-reset:tp;display:grid;grid-template-columns:1fr 1fr;gap:0 60px}
.tplist li{counter-increment:tp;position:relative;padding:18px 0 18px 52px;border-bottom:1px solid rgba(14,29,21,.14);
  display:flex;align-items:baseline;justify-content:space-between;gap:18px}
.tplist li:before{content:counter(tp,decimal-leading-zero);position:absolute;left:0;top:20px;
  font-family:var(--font-display);font-size:15px;color:var(--brand-accent);letter-spacing:.08em}
.tplist b{font-family:var(--font-display);font-weight:400;font-size:19px}
.tplist span{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--sage);font-weight:700;white-space:nowrap}

/* 11. schedule risks */
.moves{padding:140px 0}
.moves-head{max-width:820px;margin:0 auto 56px;text-align:center}
.moves-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:18px}
.moves-head p{margin-top:18px;color:#4A4A44}
.mvgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.mvcard{padding:0 40px;border-left:1px solid rgba(14,29,21,.16)}
.mvcard:first-child{padding-left:0;border-left:0}
.mvcard:last-child{padding-right:0}
.mvcard svg{width:46px;height:46px;display:block;margin-bottom:22px}
.mvcard h3{font-size:22px;margin-bottom:12px}
.mvcard p{font-size:16px;color:#4A4A44}

/* 12. faq with a ghost word */
.faq{padding:140px 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}

/* 13. 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){
  .ovwgrid{grid-template-columns:1fr 1fr;gap:44px 0}
  .ovwcell:nth-child(odd){border-left:0}
  .blegend{grid-template-columns:repeat(3,1fr);row-gap:30px}
  .p1 .wrap,.p3 .wrap,.p2-top{grid-template-columns:1fr;gap:48px}
  .p5{grid-template-columns:1fr}
  .p5-art{min-height:56vh;order:-1}
  .p5-art .outline{right:-28px;bottom:-39px;width:119px;height:119px}
  .p1-art .backer{right:-24px;left:44px}
  .p5-copy{padding:88px clamp(24px,7vw,60px)}
  .psteps{grid-template-columns:1fr 1fr;gap:38px 34px}
  .p4-head{grid-template-columns:1fr;gap:34px}
  .tplist{grid-template-columns:1fr;gap:0}
  .mvgrid{grid-template-columns:1fr;gap:38px}
  .mvcard{padding:0;border-left:0;border-top:1px solid rgba(14,29,21,.16);padding-top:30px}
  .mvcard:first-child{border-top:0;padding-top:0}
  .fgrid{grid-template-columns:1fr}
}

@media(max-width:768px){
  .phero{padding-top:170px}
  .phero .wrap{padding-bottom:56px}
  .phase,.ovw,.band,.tp,.moves,.faq{padding:88px 0}
  .phase{padding-top:96px}
  .ghost{font-size:84px;top:-.42em}
  .p5-art .outline{display:none}
  .p1-art .backer{display:none}
  .ovwgrid{grid-template-columns:1fr;gap:38px}
  .ovwcell{border-left:0}
  .blegend{grid-template-columns:1fr 1fr;row-gap:26px}
  .p2 .mgrid{grid-template-columns:1fr}
  .pair .b{position:relative;width:100%;right:auto;bottom:auto;margin-top:18px;border-width:0}
  .pair{padding-bottom:0}
  .pair .a{width:100%}
  .psteps{grid-template-columns:1fr;gap:32px}
}