/* Drift Lodge: Contact page (Contact.dc.html; the same responsive page on phones). */

.ct-map-sec h2 { font-size: clamp(38px, 4.8vw, 62px); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lift { transition: transform .3s ease, box-shadow .3s ease; }
.lift:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -28px rgba(27, 42, 48, .55); }

/* Channels strip */
.channels-outer { position: relative; z-index: 2; margin-top: -34px; }
.channels {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 8px; padding: 8px;
  border-radius: 28px; background: #FFFFFF; box-shadow: 0 30px 60px -40px rgba(27, 42, 48, .5);
}
.dl .channel { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; color: #FFFFFF; text-decoration: none; }
.dl .channel:hover { color: #FFFFFF; }
.channel--wa { background: var(--wa); }
.channel--mail { background: var(--teal); }
.channel-icon { display: grid; place-items: center; width: 50px; height: 50px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.channel-text { min-width: 0; line-height: 1.3; }
.channel-text > span { font-size: 13px; opacity: .92; } /* readable on the green and teal cards (contrast check) */
.channel--wa .channel-text > span { opacity: 1; }
.channel-text b { font-weight: 700; font-size: 17px; overflow-wrap: anywhere; }

/* Form card and side panel */
.ct-main { padding-top: 80px; padding-bottom: 60px; display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.ct-card { flex: 999 1 560px; min-width: 0; padding: clamp(22px, 3vw, 40px); border-radius: 32px; background: #FFFFFF; box-shadow: 0 30px 70px -50px rgba(27, 42, 48, .45); }
.ct-form { display: flex; flex-direction: column; gap: 20px; }
.ct-form h2, .ct-sent h2 { margin-top: 6px; font-size: clamp(36px, 4vw, 52px); }
.topics { display: flex; flex-wrap: wrap; gap: 8px; }
.topic { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #DDD5C9; background: #FFFFFF; color: var(--night); font-size: 14px; font-weight: 600; }
.topic[aria-checked="true"] { background: var(--night); color: #FFFFFF; border-color: var(--night); }
.ct-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.fld-label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.fld-hint { font-weight: 400; color: var(--grey); }
.fld { width: 100%; min-width: 0; border: 1px solid #DDD5C9; background: #FFFFFF; border-radius: 14px; padding: 12px 14px; font-size: 16px; outline: none; }
.fld:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14, 102, 112, .15); }
.fld[aria-invalid="true"] { border-color: #B4462B; box-shadow: 0 0 0 3px rgba(180, 70, 43, .12); }
.fld--mono { font-family: var(--mono); text-transform: uppercase; }
textarea.fld { min-height: 130px; resize: vertical; }
.ct-error { margin: 0; padding: 12px 14px; border-radius: 14px; background: #FBE9E2; color: #8C3B22; font-size: 14px; }
.ct-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; }
.ct-privacy { font-size: 13px; color: var(--grey); max-width: 30em; }
.ct-send { min-height: 54px; padding: 0 30px; border-radius: 999px; border: 0; background: var(--teal); color: #FFFFFF; font-weight: 700; font-size: 16px; }
.ct-send:disabled { opacity: .7; cursor: progress; }
.ct-preview { margin: 0; display: flex; gap: 8px; padding: 10px 14px; border-radius: 14px; background: var(--sand); color: var(--muted); font-size: 13px; }

.ct-sent { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 0; outline: none; }
.ct-sent.fadein { animation: dlIn .5s ease both; }
@keyframes dlIn { from { transform: translateY(10px); opacity: .35; } to { transform: none; opacity: 1; } }
.ct-tick { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #E1F1EC; color: var(--teal); }
.ct-sent p { margin: 0; color: var(--muted); max-width: 32em; }
.ct-sent-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dl .ct-wa { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 20px; border-radius: 999px; background: var(--wa); color: #FFFFFF; text-decoration: none; font-weight: 700; }
.ct-again { min-height: 50px; padding: 0 20px; border-radius: 999px; border: 1px solid #DDD5C9; background: #FFFFFF; color: var(--night); font-weight: 600; }

.ct-side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ct-notes { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 28px; background: var(--plum); color: #FFFFFF; }
.ct-notes .eyebrow { letter-spacing: .18em; }
.ct-note { display: flex; gap: 12px; font-size: 15px; }
.ct-note > svg { flex: none; margin-top: 1px; color: var(--apricot); }
.ct-note b { font-weight: 700; }
.ct-note > span > span { opacity: .82; }
.dl .ct-note a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 0; color: var(--apricot); font-weight: 700; text-decoration: none; }
.ct-ready { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 28px; background: #FFFFFF; }
.ct-ready b { font-size: 17px; }
.dl .ct-book { display: grid; place-items: center; min-height: 52px; border-radius: 999px; background: var(--apricot); color: var(--night); text-decoration: none; font-weight: 700; }
.ct-or { font-size: 13px; color: var(--grey); }
.badges { display: flex; gap: 8px; }
.badge { display: grid; place-items: center; width: 56px; height: 52px; border-radius: 14px; background: var(--sand); transition: transform .25s ease; }
.badge:hover { transform: translateY(-2px); }
.badge img { width: 32px; height: 32px; display: block; }

/* Map */
.ct-map-sec { padding-top: 20px; padding-bottom: 90px; display: flex; flex-direction: column; gap: 22px; }
/* Map and address card side by side at equal width, like the home page (Fady, 2026-10-19). */
.ct-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.ct-map-img { position: relative; min-width: 0; border-radius: 32px; overflow: hidden; aspect-ratio: 15 / 11; background: #1E4E86; }
@media (max-width: 960px) {
  .ct-map { grid-template-columns: 1fr; }
  /* Phone: shape set with padding (4:3), because iPhone Safari squeezes an aspect-ratio box with nothing inside it to zero height (Fady, 2026-10-20). */
  .ct-map-img { aspect-ratio: auto; height: 0; padding-top: 75%; border-radius: 26px; }
}
.map { position: absolute; inset: 0; width: 100%; height: 100%; }
.ct-map-card {
  min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  padding: 28px; border-radius: 32px; background: #FFFFFF;
}
@media (max-width: 960px) { .ct-map-card { padding: 18px; border-radius: 22px; } .ct-map-name { font-size: 24px; } }
.ct-map-text { display: flex; flex-direction: column; gap: 10px; }
.ct-map-name { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.1; }
.ct-map-address { color: var(--muted); }
.dl ul.ct-map-list { list-style: none; margin: 6px 0 0; padding: 14px 0 0; border-top: 1px solid var(--card-line); display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.ct-map-list li { display: flex; gap: 10px; align-items: flex-start; }
.ct-map-list svg { flex: none; margin-top: 2px; color: var(--teal); }
.ct-map-card .btn-dark { min-height: 48px; padding: 0 20px; }

@media (prefers-reduced-motion: reduce) {
  .lift, .badge { transition: none; }
  .ct-sent.fadein { animation: none; }
}