/* Contact page layout + the embedded LeadConnector form, /contact/ only.
 * Hand-maintained, same as site.css. Loaded via meta.head_extra on that one page.
 * Uses site.css tokens throughout and defines no colours of its own.
 *
 * This page deliberately has no separate .page-hero. Contact is a utility page:
 * the hero and the green contact block were both green and both said "get in
 * touch", so they read as one section with two headings. They are merged here,
 * which puts the form itself near the top instead of two screens down. */

.cf-lead{padding-top:clamp(7.5rem,11vw,9.5rem); padding-bottom:clamp(2.6rem,5vw,4rem);
  position:relative; overflow:hidden}
.cf-lead::before{content:""; position:absolute; inset:0;
  background:radial-gradient(80% 90% at 90% 0%, rgba(201,106,47,.14), transparent 55%);
  pointer-events:none}
.cf-lead .wrap{position:relative}
.cf-lead .breadcrumb{margin-bottom:var(--sp-4)}
.cf-eyebrow{color:var(--sand)}
.cf-lead h1{font-size:var(--text-hero); color:var(--cream); line-height:1.05; margin-bottom:var(--sp-4)}
.cf-lead .lede{color:rgba(246,241,231,.88); margin-bottom:var(--sp-6); max-width:40ch}
.cf-lead-actions{margin-top:var(--sp-6)}

/* min-height reserves the space: form_embed.js parks the iframe off-canvas
 * (position:absolute; left:-9999px) until the form activates, which would
 * otherwise collapse the card to nothing while the form loads.
 * Never put loading="lazy" on the iframe: parked off-canvas it is out of view,
 * so a lazy iframe never loads at all and the form silently never appears. */
.cf-card{background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow-card);
  padding:clamp(.5rem,1.4vw,.9rem); min-height:1055px; position:relative; overflow:hidden}
.cf-frame{display:block; width:100%; height:1055px; border:none; border-radius:var(--radius-sm)}

.cf-thanks{background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow-card);
  padding:clamp(2rem,5vw,3.2rem); text-align:center; color:var(--ink)}
.cf-thanks:focus{outline:none}
.cf-thanks:focus-visible{outline:3px solid var(--sand); outline-offset:4px}
.cf-mark{width:60px; height:60px; margin:0 auto var(--sp-5); border-radius:var(--radius-pill);
  background:rgba(23,81,63,.1); display:flex; align-items:center; justify-content:center}
.cf-mark svg{width:30px; height:30px; fill:none; stroke:var(--green); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round}
.cf-thanks h2{font-size:var(--text-h3); color:var(--green); margin-bottom:var(--sp-4)}
.cf-thanks p{color:var(--muted); font-size:var(--text-body); max-width:44ch; margin:0 auto var(--sp-6)}
.cf-actions{display:flex; flex-wrap:wrap; gap:var(--sp-4); justify-content:center}
.cf-thanks .cf-call{font-size:var(--text-sm); margin:var(--sp-5) auto 0}

.cf-card[hidden], .cf-thanks[hidden]{display:none}

/* Named areas so the map can sit under the Book / Call buttons on desktop and
 * still fall BELOW the form once the columns stack. On a phone there is no
 * "beside", so a map placed between the buttons and the form would just push
 * the form back down, which is the thing this layout exists to avoid. */
/* max-content pins the info row to its own height instead of letting the grid
 * hand it a share of the free space, which is what opened a dead gap under the
 * buttons. The map then takes the whole second row (1fr) and stretches, so the
 * left column ends exactly level with the bottom of the form. */
.cf-lead .wrap{grid-template-areas:"info form" "map form";
  grid-template-rows:max-content 1fr; align-items:start; row-gap:var(--sp-5)}
.cf-lead .contact-info{grid-area:info}
.cf-lead .contact-book{grid-area:form}
.cf-map{grid-area:map; display:block; width:100%; border:none;
  border-radius:var(--radius); box-shadow:var(--shadow-soft);
  align-self:stretch; height:100%}

@media (max-width:1000px){
  .cf-lead .wrap{grid-template-areas:"info" "form" "map"; grid-template-rows:none}
  .cf-map{height:clamp(240px,44vw,320px); align-self:start}
}

@media (max-width:640px){
  .cf-actions .btn{width:100%; justify-content:center}
}