/* =====================================================
   CONTACT US PAGE
   Loaded after home.css, which supplies .contact__wrapper,
   .contact-cards, .c-card, .contact__form-card and the form
   styles so the page form matches the homepage exactly.
   ===================================================== */

/* ---------- Page hero ---------- */
.contact-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #fff;
}
/* breadcrumb-bg.webp sits in the project root and this file is in assets/css,
   so two levels up. Used as-is, no scrim. The banner is a fixed-height image
   strip; the breadcrumb pill is centred inside it. */
.contact-hero__banner {
    --banner-h: 200px;
    position: relative;
    height: var(--banner-h);
    background-image:
        radial-gradient(ellipse at center, rgba(15, 23, 42, 0.32) 0%, rgba(15, 23, 42, 0.62) 100%),
        url('../../breadcrumb-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Breadcrumb sits on top of the image, vertically centred and aligned to the
   container's left edge (max-width 1200px + 24px gutters). Deliberately not
   given the .reveal class: .reveal.is-visible forces transform: translateY(0),
   which would cancel the translateY(-50%) centring. */
.contact-breadcrumb {
    position: absolute;
    left: max(24px, calc(50% - var(--container) / 2 + 24px));
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: inline-flex; align-items: center; gap: 10px;
    font-size: .84rem;
    background-color: #dc2626;
    background-image: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: 1px solid rgba(255, 255, 255, .24);
    padding: 8px 16px; border-radius: 999px;
    box-shadow: 0 12px 28px -12px rgba(220, 38, 38, .85);
}
.contact-breadcrumb a {
    display: inline-flex; align-items: center; gap: 7px;
    color: #fff; font-weight: 600;
    transition: opacity .2s ease;
}
.contact-breadcrumb a:hover { opacity: .78; }
.contact-breadcrumb i { font-size: .62rem; color: rgba(255, 255, 255, .7); }
.contact-breadcrumb i.fa-house { font-size: .8rem; color: #fff; }
.contact-breadcrumb span { color: #fff; font-weight: 600; }

/* ---------- Quick contact cards ---------- */
.contact-quick { background: #fff; }
.contact-quick .contact-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}
/* The homepage version stacks these cards vertically, where the
   icon / text / badge row fits. In a 4-up grid the row is far too narrow for
   a nowrap badge plus long phone and email strings, so let the badge drop to
   its own line and allow the strings to break instead of spilling out. */
.contact-quick .c-card {
    height: 100%;
    margin: 0;
    min-width: 0;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 24px 22px;
}
.contact-quick .c-card__content {
    flex: 1 1 0;
    min-width: 0;
}
.contact-quick .c-card__content strong,
.contact-quick .c-card__content span {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.contact-quick .c-card__badge {
    flex: 0 0 100%;
    justify-content: flex-start;
    white-space: normal;
    line-height: 1.45;
}

/* ---------- Support strip ---------- */
.why-strip { background: #f8fafc; }
.why-strip__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
.why-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 30px 24px;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.why-card:hover {
    transform: translateY(-6px);
    border-color: rgba(239, 68, 68, .3);
    box-shadow: 0 24px 48px -20px rgba(239, 68, 68, .22);
}
.why-card__icon {
    width: 54px; height: 54px;
    margin: 0 auto 16px;
    display: grid; place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    color: #fff; font-size: 1.2rem;
    box-shadow: 0 12px 24px -12px rgba(239, 68, 68, .8);
}
.why-card h3 { font-size: 1.02rem; margin: 0 0 8px; }
.why-card p { margin: 0; font-size: .9rem; color: var(--ink-2); line-height: 1.65; }

/* ---------- Office + map ---------- */
.office { background: #fff; }
.office__grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 44px;
    align-items: stretch;
}
.office__panel {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 38px 32px;
}
.office__panel h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 12px; }
.office__panel > p { margin: 0 0 26px; color: var(--ink-2); }
.office__list { list-style: none; margin: 0; padding: 0; }
.office__list li {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 16px 0;
    border-top: 1px solid var(--line);
}
.office__list li:first-child { border-top: 0; }
.office__list i { color: var(--red); margin-top: 5px; flex-shrink: 0; }
.office__list strong { display: block; color: var(--ink); margin-bottom: 2px; }
.office__list a { color: var(--ink-2); text-decoration: none; overflow-wrap: anywhere; }
.office__list a:hover { color: var(--red); }

.office__map {
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 24px 48px -24px rgba(15, 23, 42, .22);
    min-height: 380px;
    background: #e2e8f0;
}
.office__map iframe { display: block; width: 100%; height: 100%; min-height: 380px; border: 0; }

/* ---------- FAQ ---------- */
.faq { background: #f8fafc; }
.faq__list { max-width: 860px; margin-inline: auto; }
.faq__item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    margin-bottom: 14px;
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease;
}
.faq__item[open] { border-color: rgba(239, 68, 68, .32); box-shadow: 0 18px 36px -24px rgba(239, 68, 68, .3); }
.faq__q {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 20px 24px;
    font-weight: 700; color: var(--ink);
    cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q i { color: var(--red); flex-shrink: 0; transition: transform .3s ease; }
.faq__item[open] .faq__q i { transform: rotate(180deg); }
.faq__a { padding: 0 24px 22px; color: var(--ink-2); margin: 0; line-height: 1.7; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .contact-quick .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .why-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .office__grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 767px) {
    .contact-hero__banner { --banner-h: 78px; }
    .contact-breadcrumb { left: 16px; padding: 7px 13px; font-size: .8rem; }
    .why-strip__grid { grid-template-columns: 1fr; }
    .office__panel { padding: 28px 22px; }
    .office__map, .office__map iframe { min-height: 300px; }
}

@media (max-width: 480px) {
    .contact-quick .contact-cards { grid-template-columns: 1fr; }
    .faq__q { padding: 16px 18px; font-size: .95rem; }
    .faq__a { padding: 0 18px 18px; }
}