/* ==================================================================
   Sagestone Homes, Building From Out of State.
   Section layouts only. The global base owns the reset, palette,
   typography, buttons, nav, footer, icons, accordions and reveals.
   Enqueued only on page-templates/out-of-state.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: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:18ch;margin:22px 0 22px;color:var(--limestone)}
.phero p{max-width:56ch;color:var(--sandstone);font-size:19px}

/* 2. intro */
.intro{padding:120px 0}
.intro .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}
.intro h2{font-size:clamp(28px,3.4vw,44px);margin-top:20px;max-width:15ch}
.intro p{margin-bottom:20px;max-width:56ch}
.intro .rule{margin-top:24px}

/* 3. cadence table */
.cad{padding:140px 0 160px}
.cad-head{max-width:820px;margin:0 auto 20px;text-align:center}
.cad-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:20px}
.cad-note{text-align:center;font-size:14.5px;color:var(--sandstone);opacity:.8;margin-bottom:52px}
.cadt{width:100%;border-collapse:collapse}
.cadt 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)}
.cadt td{padding:26px;border-bottom:1px solid rgba(169,133,83,.22);vertical-align:top;
  font-size:16px;color:var(--sandstone);opacity:.94}
.cadt td:first-child{font-family:var(--font-display);font-size:20px;color:var(--limestone);opacity:1;width:26%}
.cadt td.when{width:22%;font-weight:500;color:var(--limestone);opacity:1;white-space:nowrap}


/* 4. remote decisions, card over image, mirrored from the cost page */
.rem{padding:150px 0}
.rem .wrap{display:grid;grid-template-columns:.95fr 1.15fr;align-items:center}
.rem-art{margin-right:calc(-1 * var(--gutter));position:relative;z-index:1;order:2}
.rem-art .ph{aspect-ratio:5/6}
.rem-card{position:relative;z-index:2;margin-right:-150px;order:1;background:var(--forest);
  padding:58px 56px;border:1px solid rgba(169,133,83,.34);box-shadow:0 26px 64px rgba(10,22,16,.55)}
.rem-card h2{font-size:clamp(27px,3.1vw,40px);margin:20px 0 22px;max-width:16ch}
.rem-card p{margin-bottom:20px;color:var(--sandstone)}
.rem-card .rule{margin-bottom:24px}
.remlist{list-style:none;padding:0;margin:6px 0 26px;display:grid;gap:14px}
.remlist li{position:relative;padding-left:28px;font-size:16px;color:var(--sandstone);line-height:1.55}
.remlist li:before{content:"";position:absolute;left:0;top:.72em;width:15px;height:1px;background:var(--brand-accent)}

/* 5. visits */
.vis{padding:150px 0}
.vis-head{max-width:840px;margin:0 auto 62px;text-align:center}
.vis-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:20px}
.vis-head p{margin-top:20px;color:var(--sandstone);opacity:.92}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.vcard{padding:0 40px;border-left:1px solid rgba(169,133,83,.3)}
.vcard:first-child{padding-left:0;border-left:0}
.vcard:last-child{padding-right:0}
.vcard svg{width:46px;height:46px;display:block;margin-bottom:22px}
.vcard h3{font-size:22px;margin-bottom:6px}
.vcard .when{display:block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand-accent);font-weight:700;margin-bottom:14px}
.vcard p{font-size:16px;color:var(--sandstone);opacity:.94}
.vis-foot{margin-top:56px;padding-top:34px;border-top:1px solid rgba(169,133,83,.3);
  display:flex;gap:30px;align-items:baseline;flex-wrap:wrap}
.vis-foot p{max-width:60ch;color:var(--sandstone);opacity:.92;font-size:16.5px}

/* 6. handled here */
.hh{padding:150px 0}
.hh .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start}
.hh h2{font-size:clamp(28px,3.4vw,44px);margin-top:20px;max-width:13ch}
.hh-side p{margin-top:24px;color:#4A4A44;max-width:34ch}
.hgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.hitem{display:grid;grid-template-columns:32px 1fr;gap:18px;padding:24px 0;border-bottom:1px solid rgba(14,29,21,.16)}
.hitem svg{width:32px;height:32px;margin-top:0}
.hitem b{display:block;font-family:var(--font-display);font-weight:400;font-size:19px;margin-bottom:6px}
.hitem span{font-size:15.5px;color:#4A4A44;line-height:1.55;display:block}

/* 8. faq */
.faq{padding:210px 0 150px;z-index:1}
.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){
  .intro .wrap,.hh .wrap,.faq .wrap{grid-template-columns:1fr;gap:44px}
  .rem .wrap{grid-template-columns:1fr}
  .rem-art{margin-right:calc(-1 * var(--gutter));margin-left:calc(-1 * var(--gutter));order:1}
  .rem-art .ph{aspect-ratio:16/11}
  .rem-card{margin-right:0;margin-top:-90px;width:min(92%,660px);order:2;padding:48px 44px}
  .faq{padding:160px 0 92px}
  .vgrid{grid-template-columns:1fr;gap:40px}
  .vcard{padding:0;border-left:0;border-top:1px solid rgba(169,133,83,.3);padding-top:32px}
  .vcard:first-child{border-top:0;padding-top:0}
  .hgrid{grid-template-columns:1fr;gap:0}
}

@media(max-width:768px){
  .phero{padding-top:170px}
  .phero .wrap{padding-bottom:56px}
  .intro,.cad,.rem,.vis,.hh{padding:92px 0}
  .faq{padding:130px 0 92px}
  .rem-card{margin-top:-56px;width:100%;padding:36px 28px}
  .cadt,.cadt tbody,.cadt tr,.cadt td{display:block;width:100%}
  .cadt thead{display:none}
  .cadt tr{padding:20px 0;border-bottom:1px solid rgba(169,133,83,.22)}
  .cadt td{border:0;padding:0 0 8px;width:auto}
  .cadt td.when:before{content:"How often: ";font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-accent)}
}