/* ==========================================================================
   Megaminds public Contact Us page v3 (Claude Design handoff: Contact.dc.html)
   Loads AFTER frontend/v3/home.css and reuses its tokens (--mm-*) and shell
   (navbar/footer). Page-scoped classes are prefixed .ct-.
   Logical properties only — the page ships RTL-first with an LTR locale.
   ========================================================================== */

.ct-page {
    position: relative;
    overflow: clip;
    /* fills the viewport so the footer never peeks into the fold; leftover height
       becomes breathing room around the cards, not dead space at the bottom */
    min-height: calc(100vh - var(--mm-nav-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        radial-gradient(1200px 720px at 14% 18%, rgba(255, 228, 205, 0.35), transparent 60%),
        radial-gradient(1100px 780px at 90% 8%, rgba(255, 236, 221, 0.28), transparent 56%),
        radial-gradient(1000px 640px at 74% 100%, rgba(252, 228, 210, 0.30), transparent 62%),
        linear-gradient(180deg, #FFFCF8 0%, #FEF6EF 55%, #FBEDE2 100%);
    /* top rhythm keyed to vh (not vw): the cards start higher on a short screen
       so the form is what fills the fold, not the page head */
    padding: clamp(18px, 3.2vh, 40px) 0 clamp(24px, 2.4vw, 36px);
}

.ct-dots {
    position: absolute;
    pointer-events: none;
    width: 150px;
    height: 120px;
    background-image: radial-gradient(circle, #E8C9AF 2px, transparent 2.6px);
    background-size: 21px 21px;
    opacity: 0.55;
}
.ct-dots-1 {
    inset-inline-start: clamp(14px, 4vw, 70px);
    top: clamp(26px, 4vw, 60px);
    -webkit-mask-image: radial-gradient(120% 120% at 0% 0%, #000 30%, transparent 72%);
    mask-image: radial-gradient(120% 120% at 0% 0%, #000 30%, transparent 72%);
}
.ct-dots-2 {
    inset-inline-end: clamp(14px, 4vw, 70px);
    bottom: clamp(26px, 4vw, 70px);
    -webkit-mask-image: radial-gradient(120% 120% at 100% 100%, #000 30%, transparent 72%);
    mask-image: radial-gradient(120% 120% at 100% 100%, #000 30%, transparent 72%);
}

/* ---- head ---------------------------------------------------------------- */
.ct-head { position: relative; text-align: center; margin-bottom: clamp(20px, 3.2vh, 38px); }

.ct-title {
    font-weight: 800;
    color: var(--mm-ink);
    font-size: clamp(28px, 3.2vw, 44px);
    letter-spacing: -0.5px;
    line-height: 1.3;
}
.ct-title .ct-accent { color: var(--mm-orange); }

.ct-sub {
    margin: clamp(12px, 1.6vw, 20px) auto 0;
    color: var(--mm-muted);
    font-weight: 500;
    font-size: clamp(15px, 1.4vw, 20px);
    max-width: 40em;
    line-height: 1.7;
}

/* ---- layout --------------------------------------------------------------- */
.ct-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(0, 1.55fr);
    gap: clamp(20px, 2.4vw, 36px);
    align-items: stretch;
}
.ct-aside { display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 24px); min-width: 0; }

/* ---- info card ------------------------------------------------------------ */
.ct-card { background: #fff; border-radius: 22px; box-shadow: var(--mm-card-shadow); }

.ct-info { padding: clamp(8px, 1vw, 12px) clamp(20px, 2vw, 26px); }

.ct-row { display: flex; align-items: center; gap: clamp(14px, 1.4vw, 18px); padding: clamp(16px, 1.7vw, 21px) 0; transition: transform .2s ease; }
.ct-row:hover { transform: translateX(-3px); }
[dir="ltr"] .ct-row:hover { transform: translateX(3px); }
.ct-row + .ct-row { border-top: 1px solid #F6EDE3; }

.ct-ic {
    flex: none;
    width: clamp(48px, 4vw, 54px);
    height: clamp(48px, 4vw, 54px);
    border-radius: 15px;
    background: var(--mm-soft);
    color: var(--mm-orange);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-row-label { color: var(--mm-muted); font-weight: 700; font-size: clamp(12.5px, 1vw, 14px); margin-bottom: 4px; }
.ct-row-val {
    display: block;
    color: var(--mm-ink);
    font-weight: 800;
    font-size: clamp(14.5px, 1.2vw, 16.5px);
    line-height: 1.55;
    transition: color .15s;
    overflow-wrap: anywhere;
}
a.ct-row-val:hover { color: var(--mm-orange-deep); }

/* ---- whatsapp card --------------------------------------------------------- */
.ct-wa {
    border-radius: 22px;
    background: linear-gradient(135deg, #FF7A47 0%, var(--mm-orange-deep) 100%);
    color: #fff;
    padding: clamp(20px, 2vw, 26px);
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.5vw, 18px);
    box-shadow: 0 22px 44px rgba(244, 90, 42, 0.28);
    position: relative;
    overflow: hidden;
}
.ct-wa::after {
    content: "";
    position: absolute;
    inset-inline-end: -46px;
    top: -46px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
}
.ct-wa-ic { flex: none; width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, 0.16); display: flex; align-items: center; justify-content: center; }
.ct-wa-title { font-weight: 800; font-size: clamp(15.5px, 1.3vw, 18px); }
.ct-wa-text { color: rgba(255, 255, 255, 0.88); font-weight: 500; font-size: clamp(12.5px, 1vw, 14px); margin-top: 4px; line-height: 1.6; }
.ct-wa-btn {
    position: relative;
    z-index: 1;
    flex: none;
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--mm-orange-deep);
    font-weight: 800;
    font-size: clamp(13px, 1vw, 14.5px);
    height: 44px;
    padding: 0 clamp(16px, 1.6vw, 22px);
    border-radius: 13px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
    transition: transform .2s ease;
    white-space: nowrap;
}
.ct-wa-btn:hover { transform: translateY(-2px); }

/* ---- map card --------------------------------------------------------------- */
/* the map is the tallest thing in the aside, and the aside is what stretches
   the whole row — so its floor is what decides whether the fold holds */
.ct-map { flex: 1 1 auto; min-height: clamp(200px, 18vw, 258px); overflow: hidden; display: flex; flex-direction: column; }
.ct-map-canvas { flex: 1 1 auto; position: relative; min-height: 180px; background: #F6EBDD; }
.ct-map-canvas iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.ct-map-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: clamp(14px, 1.5vw, 19px) clamp(18px, 1.8vw, 24px); background: #fff; }
.ct-map-addr-label { color: var(--mm-muted); font-weight: 700; font-size: clamp(11.5px, 0.9vw, 13px); margin-bottom: 3px; }
.ct-map-addr { color: var(--mm-ink); font-weight: 800; font-size: clamp(13.5px, 1.1vw, 15.5px); }
.ct-map-link { flex: none; color: var(--mm-orange); font-weight: 800; font-size: clamp(12.5px, 1vw, 14px); display: inline-flex; align-items: center; gap: 6px; transition: color .15s; }
.ct-map-link:hover { color: var(--mm-orange-deep); }
.ct-map-link svg { transition: transform .2s ease; }
.ct-map-link:hover svg { transform: translateX(-3px); }
[dir="ltr"] .ct-map-link svg { transform: scaleX(-1); }
[dir="ltr"] .ct-map-link:hover svg { transform: scaleX(-1) translateX(-3px); }

/* ---- form card --------------------------------------------------------------- */
/* the grid stretches both columns to the taller one; rather than leaving dead
   white space under the button, the message box absorbs whatever is left over */
.ct-form {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 26px;
    box-shadow: 0 30px 64px rgba(184, 142, 108, 0.16);
    padding: clamp(20px, 2.2vw, 32px);
    min-width: 0;
}
.ct-form-title { font-weight: 800; color: var(--mm-ink); font-size: clamp(21px, 1.9vw, 27px); }
.ct-form-sub { margin: clamp(5px, 0.6vw, 8px) 0 clamp(14px, 1.6vw, 20px); color: var(--mm-muted); font-weight: 500; font-size: clamp(13px, 1.05vw, 15px); }

.ct-field { margin-bottom: clamp(12px, 1.4vw, 16px); }
.ct-label { display: block; font-weight: 800; color: #3A3631; font-size: clamp(13px, 1.05vw, 14.5px); margin-bottom: 7px; }
.ct-label .req { color: var(--mm-orange-deep); font-weight: 800; }

.ct-inp {
    width: 100%;
    display: block;
    border: 1.6px solid #ECE2D8;
    border-radius: 13px;
    padding: 10px 15px;
    font-family: var(--mm-font);
    font-size: clamp(13.5px, 1.05vw, 15px);
    font-weight: 600;
    color: #3A3631;
    background: #FCFAF7;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.ct-inp::placeholder { color: #BFB4A6; font-weight: 500; }
.ct-inp:focus { border-color: var(--mm-orange); outline: none; background: #fff; box-shadow: 0 0 0 3.5px rgba(255, 107, 61, 0.13); }
textarea.ct-inp { resize: vertical; min-height: clamp(96px, 9vw, 122px); line-height: 1.65; }

.ct-form form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ct-grow { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ct-grow textarea.ct-inp { flex: 1 1 auto; }

.ct-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.3vw, 18px); }

/* intl-tel-input wrapper: make the widget span the field */
.ct-phone-wrap .iti { width: 100%; direction: ltr; }
[dir="rtl"] .ct-form .ct-inp[dir="ltr"],
[dir="rtl"] .ct-phone-wrap .ct-inp { text-align: right; }

/* server-side validation message */
.ct-err { display: flex; margin-top: 8px; color: #C93B2E; font-weight: 700; font-size: 13px; align-items: center; gap: 6px; }
.ct-field.is-bad .ct-inp { border-color: #E06A5B; background: #FFFAF8; }
.ct-field.is-bad .ct-inp:focus { box-shadow: 0 0 0 3.5px rgba(224, 106, 91, 0.14); }

.ct-submit { width: 100%; height: 52px; border-radius: 15px; font-size: clamp(15px, 1.2vw, 16.5px); margin-top: clamp(5px, .7vw, 9px); }

/* Short laptop screens: the aside (info + whatsapp + map) is the taller column,
   so its chrome is what has to give for the fold to hold. Copy keeps its size. */
@media (min-width: 1021px) and (max-height: 830px) {
    .ct-page { padding-top: 14px; }
    .ct-head { margin-bottom: 16px; }
    .ct-title { font-size: clamp(26px, 2.7vw, 36px); }
    .ct-aside { gap: 14px; }
    .ct-row { padding: 13px 0; }
    .ct-ic { width: 46px; height: 46px; border-radius: 13px; }
    .ct-wa { padding: 16px 20px; }
    .ct-wa-ic { width: 44px; height: 44px; border-radius: 14px; }
    .ct-map { min-height: 170px; }
    .ct-map-foot { padding: 11px 18px; }
    .ct-form { padding: clamp(18px, 1.9vw, 24px); }
    .ct-form-title { font-size: clamp(20px, 1.75vw, 24px); }
    .ct-form-sub { margin-bottom: 12px; }
    .ct-label { margin-bottom: 5px; }
    .ct-inp { padding: 8px 14px; }
    .ct-field { margin-bottom: 11px; }
    .ct-submit { height: 48px; }
}

/* ---- responsive: stack + reorder (info → whatsapp → form → map) -------------- */
@media (max-width: 1020px) {
    .ct-grid { display: flex; flex-direction: column; }
    .ct-aside { display: contents; }
    .ct-info { order: 1; }
    .ct-wa { order: 2; }
    .ct-form { order: 3; }
    .ct-map { order: 4; min-height: 300px; }
    .ct-grid > * { margin-bottom: clamp(16px, 2.4vw, 24px); }
    .ct-grid > *:last-child { margin-bottom: 0; }
}
@media (max-width: 640px) {
    .ct-two { grid-template-columns: 1fr; }
    .ct-wa { flex-wrap: wrap; }
    .ct-wa-btn { flex: 1 1 100%; margin-inline-start: 0; height: 48px; }
}

/* ---- entry reveal (page-scoped, mirrors .mm-reveal) --------------------------- */
.ct-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s cubic-bezier(.16, 1, .3, 1), transform .65s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--ct-rd, 0ms);
}
.ct-reveal.ct-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .ct-reveal { opacity: 1; transform: none; transition: none; }
}