/* ==================================================================
   Sagestone Homes, Custom Home Building.
   Section layouts only. The global base owns the reset, palette,
   grounds, typography, buttons, nav, footer, modal, icons and reveals.
   Enqueued only on page-templates/custom-home-building.php.
   ================================================================== */

/* 1. interior 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:74vh;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 76px}
.phero h1{font-size:clamp(38px,5.4vw,74px);max-width:17ch;margin:22px 0 22px;color:var(--limestone)}
.phero p{max-width:56ch;color:var(--sandstone);font-size:19px}

/* 2. facts strip */
.facts{padding:0}
.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(24px,2.6vw,34px);margin-bottom:8px}
.fact span{font-size:14.5px;color:#4A4A44;line-height:1.5;display:block}

/* 3. positioning */
.pos{padding:130px 0}
.pos .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}
.pos h2{font-size:clamp(30px,3.6vw,46px);margin:22px 0 24px;max-width:18ch}
.pos p{margin-bottom:20px;max-width:52ch;color:#4A4A44}
.pos .rule{margin-bottom:26px}
.pos-art{position:relative}
.pos-art .ph{width:100%;aspect-ratio:4/5}
.pos-art .offset{position:absolute;left:-38px;bottom:-38px;width:180px;height:180px;border:1px solid var(--brand-accent)}

/* seam */
.seam{position:absolute;left:50%;bottom:0;z-index:7;line-height:0;width:184px;margin-left:-92px;margin-bottom:-92px;pointer-events:none}
.seam img{width:184px}

/* 4. comparison */
.cmp{padding:150px 0}
.cmp-head{max-width:760px;margin:0 auto 56px;text-align:center}
.cmp-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:20px}
.cmp-head p{margin-top:20px;color:#4A4A44}
.ctable{width:100%;border-collapse:collapse}
.ctable 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:18px 26px;border-bottom:1px solid var(--brand-accent)}
.ctable th:last-child{color:var(--forest)}
.ctable td{padding:26px;border-bottom:1px solid rgba(14,29,21,.14);vertical-align:top;font-size:16.5px;line-height:1.55}
.ctable td:first-child{font-family:var(--font-display);font-size:20px;width:22%}
.ctable td:nth-child(2){color:#6B6B62;width:37%}
.ctable td:last-child{font-weight:500}

/* 5. scope cards */
.scope{padding:150px 0}
.scope-head{max-width:820px;margin:0 auto 64px;text-align:center}
.scope-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:20px}
.scards{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.scard{padding:0 34px;border-left:1px solid rgba(169,133,83,.32)}
.scard:first-child{padding-left:0;border-left:0}
.scard:last-child{padding-right:0}
.scard .num{font-family:var(--font-display);font-size:15px;color:var(--brand-accent);letter-spacing:.1em;display:block;margin-bottom:18px}
.scard h3{font-size:22px;margin-bottom:12px}
.scard p{font-size:15.5px;color:var(--sandstone);opacity:.92}

/* 6. leadership note */
.note{padding:150px 0}
.note .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}
.note-art{position:relative}
.note-art .backer{position:absolute;right:-40px;top:40px;bottom:40px;left:70px;background:#E4DFD2;z-index:0}
.note-art .ph{position:relative;z-index:1;aspect-ratio:4/5}
.note-art .ph--img img{object-position:50% 18%}
.note h2{font-size:clamp(28px,3.4vw,42px);margin:20px 0 26px;max-width:18ch}
.note p{margin-bottom:20px;max-width:52ch}
.sig{margin-top:34px}
.sig::before{content:"";display:block;width:44px;height:1px;background:var(--brand-accent);margin-bottom:18px}
.sig b{display:block;font-family:var(--font-display);font-weight:400;font-size:20px}
.sig span{font-size:14.5px;color:#4A4A44}

/* 7. faq, matched to the process page */
.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}

/* 8. gallery strip, dark panel with a rail bleeding off the right edge */
.strip{padding:96px 0;overflow:hidden}
/* The panel spans the full inner block, so it runs from above the eyebrow to
   below the cards. Its bottom edge comes from the rail's padding, which keeps
   the green below the images without hardcoding a card height. */
.strip-inner{position:relative}
.strip-panel{position:absolute;left:0;top:0;bottom:0;z-index:1;
  width:min(68%,calc(var(--gutter) + 820px));background:var(--forest)}
.strip-head{position:relative;z-index:2;width:min(1280px,88vw);margin:0 auto;height:246px;
  display:flex;align-items:center;gap:28px}
.strip-head .eyebrow{color:var(--sandstone)}
.strip-head h2{font-size:clamp(28px,3.2vw,42px);color:var(--limestone);margin-top:14px}
.strip-nav{display:flex;gap:12px;flex:0 0 auto;padding-bottom:2px}
.strip-btn{width:54px;height:54px;border-radius:50%;border:1px solid rgba(243,241,235,.42);
  background:transparent;color:var(--limestone);font-size:17px;cursor:pointer;display:grid;place-items:center;
  transition:background .4s ease,color .4s ease,border-color .4s ease}
.strip-btn:hover{background:var(--brand-accent);color:var(--forest-deep);border-color:var(--brand-accent)}
.strip-rail{position:relative;z-index:3;margin-left:var(--gutter);margin-top:-58px;padding-bottom:96px}
.strip-track{display:flex;gap:4px;transition:transform .9s cubic-bezier(.22,.61,.36,1);will-change:transform}
/* landscape, and wider to match */
.scardx{flex:0 0 clamp(300px,36vw,560px);position:relative;overflow:hidden;display:block}
.scardx .ph{aspect-ratio:3/2;transition:transform 1.4s cubic-bezier(.22,.61,.36,1)}
.scardx:hover .ph{transform:scale(1.05)}
.scardx .veil{position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,rgba(10,22,16,.9) 0%,rgba(10,22,16,.3) 46%,transparent 72%)}
.scardx .meta{position:absolute;left:26px;right:26px;bottom:26px;z-index:3}
.scardx .meta b{display:block;font-family:var(--font-display);font-weight:400;font-size:27px;
  color:var(--limestone);margin-bottom:20px}
.scardx .meta .mini{display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;background:var(--limestone);color:var(--forest);padding:13px 22px;
  transition:background .35s ease,color .35s ease}
.scardx:hover .meta .mini{background:var(--brand-accent);color:var(--forest-deep)}

/* 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){
  .cgrid{grid-template-columns:1fr 1fr;gap:20px}
  .fgrid{grid-template-columns:1fr}
  .pos .wrap,.note .wrap,.faq .wrap{grid-template-columns:1fr;gap:52px}
  .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}
  .scards{grid-template-columns:1fr 1fr;gap:40px 0}
  .scard:nth-child(odd){padding-left:0;border-left:0}
  .strip-panel{width:100%}
  .strip-head{height:230px}
}

@media(max-width:768px){
  .cgrid{grid-template-columns:1fr}
  .com{padding:92px 0}
  .phero{padding-top:170px}
  .phero .wrap{padding-bottom:56px}
  .pos,.cmp,.scope,.note,.faq{padding:92px 0}
  .strip{padding:64px 0}
  .strip-head{height:220px;flex-wrap:wrap;gap:18px}
  .strip-rail{margin-top:-40px;padding-bottom:64px}
  .scards{grid-template-columns:1fr}
  .scard{padding:0;border-left:0;border-top:1px solid rgba(169,133,83,.32);padding-top:30px}
  .scard:first-child{border-top:0;padding-top:0}
  .ctable td:first-child{width:auto}
  .ctable, .ctable tbody, .ctable tr, .ctable td{display:block;width:100%}
  .ctable thead{display:none}
  .ctable tr{padding:22px 0;border-bottom:1px solid rgba(14,29,21,.14)}
  .ctable td{border:0;padding:0 0 8px}
  .ctable td:nth-child(2):before{content:"Production builder: ";font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage)}
  .ctable td:last-child:before{content:"With Sagestone: ";font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage)}
  .note-art .backer{display:none}
}