/* =========================================================
   Bizmantra - Contact Us section
   assets/css/contact-us.css?v=1
   - Deep navy band, white cards. Both columns always end on the same line.
   - The form itself is styled by enquiry-form.css?v=1 (shared form).
   - Card corners follow the form card: change --ct-r in one place.
   ========================================================= */
.bmct {
    --ct-bg: #162A66;                  /* section background (deep brand navy) */
    --ct-card: #FFFFFF;
    --ct-line: #E0E7F5;
    --ct-sub: #4F5D7A;
    --ct-mute: #7A87A3;
    --ct-r: 0px;                       /* card corner radius (form card is square) */
    --ct-shadow: 0 34px 60px -32px rgba(4,12,40,.7);

    --ct-head: var(--bm-head, #16275C);
    --ct-blue: var(--bm-blue, #5A82E8);
    --ct-blue-d: var(--bm-blue-d, #3A5FC7);
    --ct-green: var(--bm-green, #9ACD4F);

    position: relative; overflow: hidden; isolation: isolate;
    padding-block: clamp(56px, 8vw, 104px);
    background: var(--ct-bg);
    color: #fff;
    font-family: var(--bm-font, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
}
:root[data-theme="dark"] .bmct {
    --ct-bg: #0B1330;
    --ct-card: #141E3D;
    --ct-line: rgba(143,176,255,.20);
    --ct-sub: #B4C1E0;
    --ct-mute: #8F9DC2;
}

/* soft decoration behind the content */
.bmct::before, .bmct::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.bmct::before { width: 620px; height: 620px; right: -200px; top: -260px; background: radial-gradient(circle, rgba(154,205,79,.20), transparent 68%); }
.bmct::after  { width: 560px; height: 560px; left: -240px; bottom: -300px; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 0 0 70px rgba(255,255,255,.02); }

:where(.bmct) *, :where(.bmct) *::before, :where(.bmct) *::after { box-sizing: border-box; }
:where(.bmct) ul { list-style: none; margin: 0; padding: 0; }
:where(.bmct) h2, :where(.bmct) p { margin: 0; }
:where(.bmct) a { color: inherit; text-decoration: none; }
:where(.bmct) svg { display: block; flex: none; }
.bmct :focus-visible { outline: 2px solid var(--ct-green); outline-offset: 2px; border-radius: 6px; }

.bmct__container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 20px; }

/* ---------------- HEADING ---------------- */
.bmct__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 32px; margin-bottom: clamp(30px, 4vw, 44px); }
.bmct__eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ct-green);
}
.bmct__eyebrow::before { content: ""; width: 28px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--ct-green), var(--ct-blue)); }
.bmct__title {
    margin-top: 14px; max-width: 22ch;
    font-size: clamp(28px, 3.5vw, 42px); font-weight: 800; line-height: 1.12; letter-spacing: -.03em;
    color: #fff; text-wrap: balance;
}
.bmct__sub { margin-top: 16px; max-width: 58ch; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.7; font-weight: 500; color: rgba(255,255,255,.78); }

.bmct__quick { display: flex; flex-wrap: wrap; gap: 12px; }
.bmct__qbtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 22px;
    border: 1.5px solid rgba(255,255,255,.38); border-radius: 10px; color: #fff;
    font-size: 14.5px; font-weight: 700; white-space: nowrap; transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.bmct__qbtn svg { width: 17px; height: 17px; }
.bmct__qbtn:hover { background: #fff; border-color: #fff; color: var(--ct-bg); }
.bmct__qbtn--wa { background: var(--ct-green); border-color: var(--ct-green); color: #17306B; }
.bmct__qbtn--wa:hover { background: #fff; border-color: #fff; color: #17306B; }

/* ---------------- GRID: both columns always the same height ---------------- */
.bmct__grid {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 32px); align-items: stretch;
}

/* left: the shared form keeps its own natural height, so it decides the row height */
.bmct__formwrap { display: block; align-self: start; min-width: 0; }
/* !important: other site-wide .bmf rules (hero etc.) must not add height / centering / background here */
.bmct .bmf { display: block !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none; --f-shadow: var(--ct-shadow); }
.bmct .bmf .bmf__form { margin: 0; border-color: transparent; }

/* right: size-contained, so it never makes the row taller.
   The info card keeps its height, the map fills whatever space is left. */
.bmct__side { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 20px; min-width: 0; min-height: 320px; contain: size; }

.bmct__map { position: relative; min-height: 0; overflow: hidden; border-radius: var(--ct-r); background: var(--ct-card); box-shadow: var(--ct-shadow); }
.bmct__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bmct__maplink {
    position: absolute; z-index: 2; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 13px; border-radius: 8px; background: #fff; color: #3A5FC7;
    font-size: 13px; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.22); transition: transform .2s;
}
.bmct__maplink svg { width: 14px; height: 14px; }
.bmct__maplink:hover { transform: translateY(-1px); }

.bmct__info {
    position: relative; overflow: hidden; padding: 28px clamp(18px, 2.4vw, 26px) 12px;
    background: var(--ct-card); border-radius: var(--ct-r); box-shadow: var(--ct-shadow); color: var(--ct-head);
}
.bmct__info::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--ct-blue), var(--ct-green)); }
.bmct__info li { display: flex; align-items: flex-start; gap: 14px; min-width: 0; padding-block: 12px; border-bottom: 1px solid var(--ct-line); }
.bmct__info li:first-child { padding-top: 0; }
.bmct__info li:last-child { border-bottom: 0; }

.bmct__icon {
    display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px;
    background: linear-gradient(135deg, var(--ct-blue), var(--ct-blue-d)); color: #fff;
}
.bmct__info li:nth-child(3) .bmct__icon { background: linear-gradient(135deg, #A8D75E, #86B83F); color: #17306B; }
.bmct__icon svg { width: 18px; height: 18px; }

.bmct__itext { display: grid; gap: 2px; min-width: 0; }
.bmct__ilabel { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ct-mute); }
.bmct__itext a, .bmct__ivalue { font-size: 14.5px; line-height: 1.5; font-weight: 600; color: var(--ct-head); overflow-wrap: anywhere; }
:root[data-theme="dark"] .bmct__itext a, :root[data-theme="dark"] .bmct__ivalue { color: #E6ECFF; }
.bmct__itext a { transition: color .2s; }
.bmct__itext a:hover { color: var(--ct-blue-d); }
:root[data-theme="dark"] .bmct__itext a:hover { color: #fff; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 991px) {
    .bmct__grid { grid-template-columns: minmax(0, 1fr); }
    .bmct__formwrap { align-self: auto; }
    .bmct__side { grid-template-rows: none; contain: none; min-height: 0; }
    .bmct__map { height: 240px; }
}
@media (max-width: 767px) {
    .bmct__top { flex-direction: column; align-items: stretch; }
    .bmct__quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bmct__qbtn { padding: 0 12px; }
}
@media (max-width: 599px) {
    .bmct__container { padding-inline: 16px; }
    .bmct__title { max-width: none; }
    .bmct__map { height: 210px; }
    .bmct__icon { width: 38px; height: 38px; border-radius: 10px; }
    .bmct__itext a, .bmct__ivalue { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .bmct * { transition-duration: .01ms !important; }
}