/* ==========================================================================
   Contact & directions page
   Same interior-page shell as the FAQ: solid header above, black ground with
   a gold wash at the top.
   ========================================================================== */

.contact-page {
    padding-top: calc(var(--bb-logo-h-compact) + (var(--bb-header-pad) * 2) + 1px);
    background:
        radial-gradient(90% 55% at 50% 0%, rgba(192, 141, 48, 0.1), transparent 70%),
        var(--bb-black);
}

.contact-page__inner {
    padding-block: clamp(2.5rem, 6vh, 5rem) clamp(3.5rem, 9vh, 7rem);
}

/* --- Hero ---------------------------------------------------------------- */

.contact-hero {
    max-width: 52rem;
}

.contact-hero__eyebrow {
    color: var(--bb-gold-500);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.contact-hero__eyebrow-lead {
    color: var(--bb-red-300);
}

.contact-hero__title {
    margin-top: 0.75rem;
    font-family: var(--bb-font-serif);
    font-size: clamp(2rem, 1.3rem + 3vw, 3.75rem);
    font-weight: 500;
    line-height: 1.1;
}

.contact-hero__lead {
    margin-top: 1.25rem;
    color: var(--bb-text-dim);
    font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
    line-height: 1.65;
}

/* --- Section headings ---------------------------------------------------- */

.contact-section__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--bb-gold-300);
    font-family: var(--bb-font-display);
    font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.5rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contact-section__icon {
    flex: none;
    width: 1.25em;
    height: 1.25em;
    color: var(--bb-red-300);
}

/* --- Channel cards ------------------------------------------------------- */

.contact-channels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: clamp(0.75rem, 1.4vw, 1.25rem);
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.channel {
    display: grid;
    gap: 0.35rem;
    height: 100%;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    border: 1px solid var(--bb-rule-faint);
    border-radius: var(--bb-radius);
    background-color: var(--bb-surface-raised);
    transition: border-color var(--bb-dur) var(--bb-ease),
        background-color var(--bb-dur) var(--bb-ease),
        transform var(--bb-dur) var(--bb-ease);
}

.channel:hover {
    border-color: var(--bb-gold-700);
    background-color: rgba(192, 141, 48, 0.06);
    transform: translateY(-2px);
}

.channel__icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--bb-gold-700);
    border-radius: 50%;
    color: var(--bb-gold-400);
}

.channel__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.channel__label {
    color: var(--bb-gold-500);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--bb-tracking-wider);
    text-transform: uppercase;
}

.channel__value {
    color: var(--bb-text);
    font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
    font-weight: 500;
    line-height: 1.35;
    /* Long e-mail addresses must not push the card wider than its column. */
    overflow-wrap: anywhere;
}

.channel__note {
    color: var(--bb-text-dim);
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* --- Where we are -------------------------------------------------------- */

/* Copy and map side by side, the pair centred on the page. */
.contact-where {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    max-width: 68rem;
    margin: clamp(3rem, 6vw, 5rem) auto 0;
}

@media (min-width: 900px) {
    .contact-where {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
    }
}

.contact-where__blurb {
    max-width: min(100%, 60rem);
    margin-top: clamp(1rem, 1.6vw, 1.5rem);
    color: var(--bb-text-dim);
    font-size: clamp(0.875rem, 0.85rem + 0.2vw, 1rem);
    line-height: 1.7;
}

.contact-where__address {
    margin-top: 1.25rem;
    padding-left: clamp(0.875rem, 1.4vw, 1.25rem);
    border-left: 2px solid var(--bb-hairline);
    color: var(--bb-text-warm);
    font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
    font-style: normal;
    line-height: 1.6;
}

.contact-where__body .btn {
    margin-top: 1.5rem;
}

.contact-map {
    overflow: hidden;
    border: 1px solid var(--bb-hairline);
    border-radius: var(--bb-radius);
    aspect-ratio: 16 / 9;
    background-color: var(--bb-surface-raised);
}

.contact-map__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Sits under the transfers: it is what to tell the taxi from the airport. */
.contact-localname {
    max-width: 40rem;
    margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
    padding: clamp(1.25rem, 2.2vw, 2rem);
    border: 1px solid var(--bb-hairline);
    border-radius: var(--bb-radius);
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(130, 10, 16, 0.22), transparent 60%),
        var(--bb-surface-raised);
    text-align: center;
}

.contact-localname__label {
    color: var(--bb-gold-500);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--bb-tracking-wider);
    text-transform: uppercase;
}

.contact-localname__name {
    margin-top: 0.5rem;
    color: var(--bb-gold-100);
    font-family: var(--bb-font-display);
    font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.contact-localname__note {
    margin-top: 0.85rem;
    color: var(--bb-text-dim);
    font-size: 0.8125rem;
    line-height: 1.55;
}

/* --- Transfers ----------------------------------------------------------- */

.contact-message {
    margin-top: clamp(3rem, 6vw, 5rem);
}

/* Centred as a block so it lines up with the call to action right below it.
   The fields keep their left edge — centred labels and inputs hurt scanning. */
.contact-message .contact-section__title {
    justify-content: center;
}

.contact-message__form {
    display: grid;
    gap: 1.1rem;
    max-width: 34rem;
    margin-top: 1.5rem;
    margin-inline: auto;
}

/* The .field and .request__note styles belong to the reservation modal, which
   sits on parchment: near-black ink, a dark-brown focus ring, deep red and
   green notices. Here the same form sits on black, where every one of those
   falls to roughly 1:1 against the ground. Re-state them for a dark surface.
   The inputs keep their parchment fill, which already carries its own
   contrast, so only the text and the focus ring around them change. */
.contact-message .field__label {
    color: var(--bb-text-warm);
}

.contact-message .field__control:focus-within {
    border-color: var(--bb-gold-400);
    box-shadow: 0 0 0 3px rgba(192, 141, 48, 0.45);
}

.contact-message .request__note {
    color: var(--bb-text-dim);
}

.contact-message .request__note-icon {
    color: var(--bb-gold-400);
}

/* Brand red and green lifted until each clears 4.5:1 on black. */
.contact-message .field__error,
.contact-message .request__note-error {
    color: #f0938a;
}

.contact-message .request__note-success {
    color: #8fd49a;
}

.contact-transfers {
    margin-top: clamp(3rem, 6vw, 5rem);
}

.transfer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: clamp(0.75rem, 1.4vw, 1.25rem);
    margin-top: clamp(1.25rem, 2vw, 1.75rem);
}

.transfer {
    display: grid;
    align-content: start;
    gap: 0.3rem;
    height: 100%;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    border: 1px solid var(--bb-rule-faint);
    border-top: 2px solid var(--bb-gold-600);
    border-radius: var(--bb-radius);
    background-color: var(--bb-surface-raised);
}

/* Santo Domingo is listed for completeness but we do not run pickups there. */
.transfer--unserved {
    border-top-color: var(--bb-red-600);
    background-color: var(--bb-surface);
}

.transfer__code {
    color: var(--bb-gold-500);
    font-family: var(--bb-font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--bb-tracking-wider);
}

.transfer__airport {
    color: var(--bb-text);
    font-family: var(--bb-font-serif);
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.4375rem);
    font-weight: 500;
    line-height: 1.2;
}

.transfer__duration {
    color: var(--bb-text-dim);
    font-size: 0.8125rem;
    letter-spacing: var(--bb-tracking-wide);
    text-transform: uppercase;
}

.transfer__price {
    margin-top: 0.5rem;
    color: var(--bb-gold-300);
    font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
    font-weight: 600;
}

.transfer__note {
    margin-top: 0.35rem;
    color: var(--bb-text-dim);
    font-size: 0.8125rem;
    line-height: 1.55;
}

.contact-transfers__note {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: min(100%, 64rem);
    margin-top: clamp(1.25rem, 2vw, 1.75rem);
    color: var(--bb-text-dim);
    font-size: 0.875rem;
    line-height: 1.6;
}

.contact-transfers__note-icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1em;
    color: var(--bb-gold-500);
}

/* --- Directions ---------------------------------------------------------- */

.contact-directions {
    margin-top: clamp(3rem, 6vw, 5rem);
}

.directions-list {
    margin-top: clamp(1.25rem, 2vw, 1.75rem);
    border-top: 1px solid var(--bb-rule-faint);
}

.directions-list > li {
    border-bottom: 1px solid var(--bb-rule-faint);
}

.direction {
    /* Cleared for the fixed header when linked to directly. */
    scroll-margin-top: calc(var(--bb-logo-h-compact) + (var(--bb-header-pad) * 2) + 1.5rem);
}

.direction__from {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: clamp(0.95rem, 1.4vw, 1.35rem);
    color: var(--bb-text);
    font-size: clamp(0.9375rem, 0.9rem + 0.3vw, 1.1875rem);
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
    transition: color var(--bb-dur) var(--bb-ease);
}

.direction__from::-webkit-details-marker {
    display: none;
}

.direction__from:hover,
.direction[open] > .direction__from {
    color: var(--bb-gold-200);
}

.direction__marker {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--bb-gold-500);
    transition: transform var(--bb-dur) var(--bb-ease);
}

.direction[open] .direction__marker {
    transform: rotate(180deg);
}

.direction__steps {
    max-width: min(100%, 64rem);
    padding-bottom: clamp(1.1rem, 1.8vw, 1.6rem);
    padding-left: clamp(0.875rem, 1.4vw, 1.25rem);
    border-left: 2px solid var(--bb-hairline);
    counter-reset: step;
    color: var(--bb-text-dim);
    font-size: clamp(0.875rem, 0.85rem + 0.2vw, 1rem);
    line-height: 1.7;
}

.direction__steps > li {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: 0.5rem;
    counter-increment: step;
}

.direction__steps > li + li {
    margin-top: 0.75em;
}

.direction__steps > li::before {
    content: counter(step);
    color: var(--bb-gold-500);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: inherit;
}

/* --- Closing CTA --------------------------------------------------------- */

.contact-cta {
    margin-top: clamp(3rem, 6vw, 5rem);
    padding: clamp(1.75rem, 3.5vw, 3rem);
    border: 1px solid var(--bb-hairline);
    border-radius: var(--bb-radius);
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(130, 10, 16, 0.22), transparent 60%),
        var(--bb-surface-raised);
    text-align: center;
}

.contact-cta__title {
    color: var(--bb-gold-300);
    font-family: var(--bb-font-display);
    font-size: clamp(1.125rem, 1rem + 0.6vw, 1.625rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contact-cta__body {
    max-width: min(100%, 42rem);
    margin: 0.85rem auto 1.5rem;
    color: var(--bb-text-dim);
    font-size: clamp(0.875rem, 0.85rem + 0.2vw, 1rem);
    line-height: 1.7;
}

/* --- Phones -------------------------------------------------------------- */

@media (max-width: 719px) {
    .contact-transfers__note {
        align-items: flex-start;
    }

    .direction__from {
        gap: 1rem;
    }
}