/* ══════════════════════════════════════════════════════════════
   Details confirmed. Destination for the GoHighLevel trigger
   link in the brokerage auto-response email.

   This sheet declares its own background classes and its own
   placeholder system. homepage.css loads sitewide and supplies
   neither.
   ══════════════════════════════════════════════════════════════ */

/* ══ Background classes. This sheet carries its own, since homepage.css loads
   sitewide and supplies neither these nor the placeholder system. ══ */
.on-white{background:#fff}
.on-ivory{background:var(--ivory)}
.on-stone{background:var(--stone)}
.on-deep{background:var(--green-deep);color:var(--ivory);
  --ghost:var(--ivory);--ghost-hb:var(--ivory);--ghost-hf:var(--green-deep);
  --eyb-c:var(--brand-accent)}

/* ══ Placeholder system ══ */
.ph{position:relative;background:repeating-linear-gradient(45deg,rgba(31,91,71,.10) 0 14px,rgba(31,91,71,.03) 14px 28px);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:16px}
.ph span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#7A6224;
  background:rgba(255,255,255,.9);border:1px dashed rgba(201,162,74,.7);padding:9px 12px}
img.ph{display:block;width:100%;height:100%;object-fit:cover;padding:0;background:none;border:0}

.js .reveal{opacity:0;transform:translateY(16px)}
.js .reveal.is-visible{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* ══ Buttons. On white, Accent Gold reads at 2.48 to 1 and cannot carry a
   label, so the solid button is evergreen with ivory type at 6.90 to 1. The
   ghost takes its colour from the background class. ══ */
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.btn{display:inline-block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  padding:16px 32px;border:1px solid currentColor;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn-solid{background:var(--green);border-color:var(--green);color:var(--ivory)}
.btn-solid:hover{background:var(--green-deep);border-color:var(--green-deep)}
.btn-ghost{color:var(--ghost,var(--green))}
.btn-ghost:hover{background:var(--ghost-hb,var(--green));color:var(--ghost-hf,var(--ivory))}

/* ══ CONFIRMATION. One screen, white ground, no image. A gold hairline above
   the heading carries the brand mark without putting gold on type. ══ */
.dcf{padding:calc(var(--nav-h) + 66px) 0 0}
.dcf-inner{max-width:62ch}
.dcf .rule{display:block;width:64px;height:2px;background:var(--brand-accent);margin-bottom:26px}
.dcf h1{font-size:clamp(32px,3.6vw,50px);color:var(--green);max-width:17ch;margin-top:16px}
.dcf .lede{font-size:17.5px;color:var(--muted);margin-top:22px;max-width:56ch;line-height:1.8}
.dcf .call{margin-top:30px;padding-top:24px;border-top:1px solid rgba(31,91,71,.22)}
.dcf .call .k{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--quiet)}
.dcf .call a{display:inline-block;font-family:var(--font-display);font-size:28px;color:var(--green);
  margin-top:8px;transition:color .3s var(--ease)}
.dcf .call a:hover{color:var(--green-deep)}

/* The team photograph sits under the copy at full width. It is landscape at
   1400 by 1000, so a side by side column would crop it to a slot it was never
   framed for. A gold hairline above it keeps the hard edge the brand uses in
   place of a fade. */
.dcf-photo{margin-top:58px;border-top:1px solid var(--brand-accent)}
.dcf-photo img,.dcf-photo .ph{display:block;width:100%;height:auto;aspect-ratio:1400/1000;
  object-fit:cover}
.dcf-photo .ph{padding:0}

@media(max-width:1024px){
  :root{--pad:24px}
  .dcf{padding:calc(var(--nav-h) + 50px) 0 0}
  .dcf-photo{margin-top:44px}
  .dcf-photo img,.dcf-photo .ph{aspect-ratio:16/10}
}
@media(max-width:640px){
  .dcf .call a{font-size:24px}
  .btns .btn{flex:1 1 100%;text-align:center}
}