/* ==========================================================================
   Knepper Contracting — contact.html page styles.
   Reuses the site-wide component library as-is: /css/site.css ships .kick,
   .h2/.h2--xl, .sub, .shead, .eyebrow, .wrap, buttons, .bigline, .cred/
   .cred__in, .faq/.qa, .lead form, .path__stops/.stop, .close/.close__h;
   /css/rooms.css ships .cta-row, .spot family, .glass + [data-tilt], .drift,
   .trail, .icard/.stamp, .band/.band__cap, .shot. This file only adds the
   handful of things Contact needs that neither file already covers: the
   page head, the NAP split, the map embed, the "before you call" checklist
   and the closing fine print.
   ========================================================================== */

/* ── page head ───────────────────────────────────────────────────────── */
.phead{padding:148px 0 60px}
.phead .crumb{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-faint);margin:0 0 20px}
.phead .crumb a{color:var(--on-faint);text-decoration:none;border-bottom:1px solid var(--hair)}
.phead .crumb a:hover{color:var(--lime)}
.phead .lede{max-width:60ch;font-size:1.1rem;color:var(--on-soft);margin:18px 0 0}

/* ── NAP split ───────────────────────────────────────────────────────── */
.nap{padding:var(--sec) 0}
.nap__in{display:grid;gap:40px;align-items:center}
@media (min-width:960px){.nap__in{grid-template-columns:1.05fr .95fr;gap:60px}}
.nap__lines{display:flex;flex-direction:column}
.nap__media{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--hair);box-shadow:0 40px 90px -40px rgba(0,0,0,.8);aspect-ratio:4/5}
.nap__media img{width:100%;height:100%;object-fit:cover}

/* ── the map embed ───────────────────────────────────────────────────── */
.mapsec{padding:var(--sec) 0}
.mapsec__frame{position:relative;border:1px solid var(--hair);border-radius:12px;overflow:hidden;background:#0A0E24;aspect-ratio:16/8}
.mapsec__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mapsec__fallback{margin:12px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--on-faint)}
.mapsec__fallback a{color:var(--lime);text-decoration:none;border-bottom:1px solid rgba(168,255,62,.4)}

/* ── before you call — the checklist inside a .check.drift section ──────── */
.prep{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:14px}
@media (min-width:760px){.prep{grid-template-columns:repeat(2,1fr);gap:16px 28px}}
.prep li{display:flex;gap:12px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--hair);color:var(--on-soft);font-size:.98rem}
.prep b{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--lime);flex:0 0 auto}

/* ── the form section — copied from index.html's #book, minus the intro copy ── */
.book{padding:var(--sec) 0}
.book .shead{margin-bottom:34px}

/* ── after you send it — reuses .path__stops / .stop ─────────────────── */
.after{padding:var(--sec) 0}
.after .path__stops{margin-top:6px;grid-template-columns:1fr}
@media (min-width:760px){.after .path__stops{grid-template-columns:repeat(3,1fr)}}

/* ── closing band fine print (the .close/.trail look itself is shared) ── */
.ktrail__fine{max-width:60ch;margin:18px auto 0;text-align:center;color:var(--on-faint);font-size:.9rem}