/* ==================================================================
   Sagestone Homes, Start Your Build.
   Section layouts only. The global base owns the reset, palette,
   typography, buttons, nav, footer, icons, seam and reveals.
   Enqueued only on page-templates/contact.php.
   ================================================================== */

/* 1. compact header */
.chead{min-height:52vh;display:flex;align-items:flex-end;overflow:hidden;padding:210px 0 200px}
.chead .ph{position:absolute;inset:0}
.chead:before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(10,22,16,.9) 0%,rgba(14,29,21,.5) 60%,rgba(14,29,21,.55) 100%)}
.chead .wrap{position:relative;z-index:2}
.chead h1{font-size:clamp(36px,4.6vw,62px);max-width:16ch;margin:20px 0 0;color:var(--limestone)}

/* 2. form, card pulled up over the header border */
.fsec{padding:0 0 150px;display:flow-root}
.fsec .wrap{display:grid;grid-template-columns:1.25fr .85fr;gap:64px;align-items:start}
.fcard{position:relative;z-index:5;margin-top:-110px;background:var(--limestone);color:var(--forest);
  padding:56px 54px;box-shadow:0 30px 70px rgba(10,22,16,.5)}
.fcard h2{font-size:clamp(24px,2.6vw,34px);margin-bottom:10px}
.fcard .intro{color:#4A4A44;font-size:16.5px;margin-bottom:34px;max-width:52ch}
.faside{padding-top:56px}
.faside h3{font-size:22px;margin-bottom:14px}
.faside p{color:var(--sandstone);font-size:16.5px;margin-bottom:22px;max-width:38ch}
.fnap{border-top:1px solid rgba(169,133,83,.32);padding-top:26px;margin-top:8px}
.fnap dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--brand-accent);margin-bottom:8px}
.fnap dd{margin:0 0 24px;font-size:17px;color:var(--limestone);line-height:1.6}
.fnap dd a{border-bottom:1px solid var(--brand-accent);padding-bottom:2px}

/* form controls */
.sform{display:grid;grid-template-columns:1fr 1fr;gap:24px 22px}
.sfield--full{grid-column:1/-1}
.sform label{display:block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--sage);margin-bottom:9px}
.sform label .opt{font-weight:500;letter-spacing:.06em;text-transform:none;color:#8A867C;font-size:12px}
.sform input,.sform select,.sform textarea{
  width:100%;font-family:var(--font-body);font-weight:300;font-size:16px;color:var(--forest);
  background:#fff;border:1px solid rgba(14,29,21,.28);padding:14px 16px;min-height:48px;
  transition:border-color .3s ease,box-shadow .3s ease}
.sform textarea{resize:vertical;min-height:130px}
.sform input:focus,.sform select:focus,.sform textarea:focus{
  outline:none;border-color:var(--brand-accent);box-shadow:0 0 0 3px rgba(169,133,83,.22)}
.sform select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23526A4E' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.hint{display:block;font-size:13.5px;color:#6B6B62;margin-top:8px;line-height:1.45}
/* space is reserved, so a validation message never pushes the layout */
.err{display:block;min-height:20px;font-size:13.5px;color:#8a4a38;margin-top:6px}
.sf-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fsubmit{grid-column:1/-1;display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:6px}
.fsubmit small{font-size:13.5px;color:#6B6B62;max-width:34ch;line-height:1.45}
.fdone{display:none;border-left:3px solid var(--sage);background:rgba(82,106,78,.09);padding:26px 28px}
.fdone h3{font-size:22px;margin-bottom:10px}
.fdone p{font-size:16px;color:#4A4A44}

/* 3. what happens next */
.next{padding:150px 0}
.next-head{max-width:820px;margin:0 auto 62px;text-align:center}
.next-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:20px}
.ngrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.ncard{padding:0 40px;border-left:1px solid rgba(14,29,21,.16)}
.ncard:first-child{padding-left:0;border-left:0}
.ncard:last-child{padding-right:0}
.ncard svg{width:46px;height:46px;display:block;margin-bottom:22px}
.ncard .step{display:block;font-family:var(--font-display);font-size:15px;color:var(--brand-accent);letter-spacing:.1em;margin-bottom:12px}
.ncard h3{font-size:22px;margin-bottom:11px}
.ncard p{font-size:16px;color:#4A4A44}


/* 4. office and map */
.off{padding:150px 0}
.off .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}
.off h2{font-size:clamp(28px,3.4vw,42px);margin:20px 0 22px;max-width:14ch}
.off p{color:var(--sandstone);margin-bottom:24px;max-width:40ch}
.off .rule{margin-bottom:26px}
.offlist{display:grid;gap:22px;margin-top:8px}
.offitem{display:grid;grid-template-columns:30px 1fr;gap:16px;align-items:start}
.offitem svg{width:30px;height:30px;margin-top:0}
.offitem b{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-accent);font-weight:700;margin-bottom:5px}
.offitem span{font-size:16.5px;color:var(--limestone);line-height:1.6;display:block}
.offitem a{border-bottom:1px solid rgba(169,133,83,.6);padding-bottom:1px}
.mapwrap{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--tint);
  border:1px solid rgba(169,133,83,.35)}
.mapwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  filter:saturate(.8)}

/* 5. not ready yet */
.nry{padding:130px 0}
.nry .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}
.nry h2{font-size:clamp(26px,3.1vw,40px);margin-top:20px;max-width:14ch}
.nrylinks{display:grid;grid-template-columns:1fr 1fr;gap:0 46px}
.nrylink{display:block;padding:26px 0;border-bottom:1px solid rgba(14,29,21,.16)}
.nrylink b{display:block;font-family:var(--font-display);font-weight:400;font-size:21px;margin-bottom:6px}
.nrylink span{font-size:15.5px;color:#4A4A44;line-height:1.5;display:block}
.nrylink:hover b{color:var(--sage)}

@media(max-width:1024px){
  .fsec .wrap{grid-template-columns:1fr;gap:48px}
  .faside{padding-top:0}
  .ngrid{grid-template-columns:1fr;gap:40px}
  .ncard{padding:0;border-left:0;border-top:1px solid rgba(14,29,21,.16);padding-top:32px}
  .ncard:first-child{border-top:0;padding-top:0}
  .off .wrap,.nry .wrap{grid-template-columns:1fr;gap:44px}
  .nrylinks{grid-template-columns:1fr;gap:0}
}

@media(max-width:768px){
  .mapwrap{aspect-ratio:4/3}
  .chead{min-height:44vh;padding:170px 0 160px}
  .fcard{margin-top:-80px;padding:34px 26px}
  .fsec{padding-bottom:92px}
  .sform{grid-template-columns:1fr;gap:20px}
  .next,.off,.nry{padding:92px 0}
}