/* ==================================================================
   Sagestone Homes, What It Costs to Build.
   Section layouts only. The global base owns the reset, palette,
   typography, buttons, nav, footer, icons, accordions and reveals.
   Enqueued only on page-templates/cost.php.
   ================================================================== */

/* 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:68vh;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:19ch;margin:22px 0 22px;color:var(--limestone)}
.phero p{max-width:56ch;color:var(--sandstone);font-size:19px}
.updated{margin-top:22px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--sandstone);opacity:.75}

/* 2. direct answer */
.ans{padding:110px 0}
.ans .wrap{max-width:900px}
.ansbox{border:1px solid rgba(14,29,21,.22);border-left:3px solid var(--brand-accent);padding:46px 50px}
.ansbox p.lead{font-family:var(--font-display);font-size:clamp(21px,2.3vw,29px);line-height:1.4;margin-bottom:22px}
.ansbox p{font-size:17px;margin-bottom:14px}
.ansbox p:last-child{margin-bottom:0}
.ans-foot{display:flex;gap:34px;flex-wrap:wrap;margin-top:34px;align-items:center}

/* 3. drivers */
.drv{padding:140px 0 160px}
.drv-head{max-width:820px;margin:0 auto 70px;text-align:center}
.drv-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:20px}
.dgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.dcard{padding:0 30px;border-left:1px solid rgba(169,133,83,.3)}
.dcard:first-child{padding-left:0;border-left:0}
.dcard:last-child{padding-right:0}
.dcard svg{width:44px;height:44px;display:block;margin-bottom:20px}
.dcard h3{font-size:20px;margin-bottom:11px}
.dcard p{font-size:15px;color:var(--sandstone);opacity:.92;line-height:1.55}


/* 4. breakdown */
.bd{padding:150px 0}
.bd-head{max-width:820px;margin:0 auto 20px;text-align:center}
.bd-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:20px}
.bd-note{text-align:center;font-size:14.5px;color:#6B6B62;margin-bottom:52px}
.bdt{width:100%;border-collapse:collapse}
.bdt th{text-align:left;font-family:var(--font-body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--sage);padding:16px 24px;border-bottom:1px solid var(--brand-accent)}
.bdt td{padding:24px;border-bottom:1px solid rgba(14,29,21,.14);vertical-align:middle;font-size:16px}
.bdt td:first-child{font-family:var(--font-display);font-size:20px;width:26%}
.bdt td.share{width:16%;font-weight:500;white-space:nowrap}
.bdt td.meter{width:26%}
.mtr{height:8px;background:rgba(14,29,21,.1)}
.mtr span{display:block;height:100%;background:var(--sage)}
.bdt td.note{color:#4A4A44;font-size:15.5px;line-height:1.5}

/* 5. site work, copy card overlapping the image
   The image runs off the left edge of the viewport and the limestone card
   sits on top of it, so two edges get crossed instead of butting together. */
.sw{padding:150px 0}
.sw .wrap{display:grid;grid-template-columns:1.15fr .95fr;align-items:center}
.sw-art{margin-left:calc(-1 * var(--gutter));position:relative;z-index:1}
.sw-art .ph{aspect-ratio:5/6}
.sw-card{position:relative;z-index:2;margin-left:-150px;background:var(--limestone);color:var(--forest);
  padding:58px 56px;box-shadow:0 26px 64px rgba(10,22,16,.45)}
.sw-card h2{font-size:clamp(27px,3.1vw,40px);margin:20px 0 22px;max-width:15ch;color:var(--forest)}
.sw-card .eyebrow{color:var(--sage)}
.sw-card p{margin-bottom:20px;color:#4A4A44}
.sw-card .rule{margin-bottom:24px}
.swnum{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:14px 0 26px}
.swnum div{border-top:1px solid rgba(14,29,21,.22);padding-top:16px}
.swnum b{display:block;font-family:var(--font-display);font-weight:400;font-size:24px;margin-bottom:6px;color:var(--forest)}
.swnum span{font-size:14px;color:#6B6B62;line-height:1.5;display:block}
.sw-card .btn--ghost{color:var(--forest);border-color:rgba(14,29,21,.45)}
.sw-card .btn--ghost:hover{background:var(--forest);color:var(--limestone);border-color:var(--forest)}

/* 6. not included */
.exc{padding:150px 0}
.exc-head{max-width:820px;margin:0 auto 56px;text-align:center}
.exc-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:20px}
.exc-head p{margin-top:20px;color:#4A4A44}
.egrid{display:grid;grid-template-columns:1fr 1fr;gap:0 70px}
.eitem{display:grid;grid-template-columns:32px 1fr;gap:18px;padding:24px 0;border-bottom:1px solid rgba(14,29,21,.14)}
.eitem svg{width:32px;height:32px;margin-top:0}
.eitem b{display:block;font-family:var(--font-display);font-weight:400;font-size:20px;margin-bottom:6px}
.eitem span{font-size:15.5px;color:#4A4A44;line-height:1.55;display:block}

/* 7. allowances */
.alw{padding:150px 0}
.alw .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start}
.alw h2{font-size:clamp(28px,3.4vw,44px);margin-top:20px;max-width:15ch}
.alw p{margin-bottom:20px;max-width:52ch;color:var(--sandstone)}
.alwbox{border:1px solid rgba(169,133,83,.32);padding:34px 36px;margin-top:8px}
.alwbox b{display:block;font-family:var(--font-body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--brand-accent);margin-bottom:16px}
.alwbox p{font-size:16px;margin-bottom:0;max-width:none}

/* 8. faq */
.faq{padding:150px 0}
.faq .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start}
.faq h2{font-size:clamp(30px,3.6vw,46px);margin-top:20px;max-width:12ch}
.faq-side p{margin-top:24px;color:#4A4A44;max-width:34ch}

/* 9. finale */
.finale{position:relative;min-height:66vh;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){
  .dgrid{grid-template-columns:1fr 1fr;gap:44px 0}
  .dcard:nth-child(odd){padding-left:0;border-left:0}
  .sw .wrap{grid-template-columns:1fr}
  .sw-art{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter))}
  .sw-art .ph{aspect-ratio:16/11}
  .sw-card{margin-left:0;margin-top:-90px;width:min(92%,660px);padding:48px 44px}
  .egrid{grid-template-columns:1fr;gap:0}
  .alw .wrap,.faq .wrap{grid-template-columns:1fr;gap:44px}
}

@media(max-width:768px){
  .phero{padding-top:170px}
  .phero .wrap{padding-bottom:56px}
  .ans,.drv,.bd,.exc,.alw,.faq{padding:92px 0}
  .ansbox{padding:32px 26px}
  .dgrid{grid-template-columns:1fr;gap:40px}
  .dcard{padding:0;border-left:0}
  .sw{padding:92px 0}
  .sw-card{margin-top:-56px;width:100%;padding:36px 28px}
  .swnum{grid-template-columns:1fr;gap:18px}
  .bdt,.bdt tbody,.bdt tr,.bdt td{display:block;width:100%}
  .bdt thead{display:none}
  .bdt tr{padding:20px 0;border-bottom:1px solid rgba(14,29,21,.14)}
  .bdt td{border:0;padding:0 0 10px;width:auto}
  .bdt td.meter{padding-bottom:14px}
}