/* Dig Virtual — contact-us.html
   Same rail + drawer system as about-us.html/index.html (index-sidebar.css/js)
   and the same design tokens/base rules as the homepage (index-horizontal.css's
   :root variables, body.dv-editorial-home base). Single fixed, non-scrolling
   panel — no header, no footer — same pattern as about-us.html since this
   page's content is static and short enough to fit one screen. */

.dv-contact-main {
    position: relative;
    height: 100dvh;
    margin-left: var(--dv-rail-w);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.25rem, 3.5vw, 3rem);
    overflow: hidden;
    /* Same soft blue/mint radial-gradient background as index.html's
       Panel 1 hero, for a consistent brand backdrop across every
       top-level page. Light background, so this page uses the same
       dark-ink text as before — no colour overrides needed. */
    background:
        radial-gradient(1100px circle at 6% -8%, rgba(0,110,195,0.32), transparent 52%),
        radial-gradient(950px circle at 102% -4%, rgba(63,196,140,0.30), transparent 50%),
        radial-gradient(800px circle at 10% 62%, rgba(63,196,140,0.24), transparent 48%),
        radial-gradient(1000px circle at 96% 92%, rgba(0,110,195,0.26), transparent 50%),
        radial-gradient(650px circle at 55% 28%, rgba(63,196,140,0.16), transparent 45%),
        linear-gradient(180deg, #eef6fd 0%, #eefbf3 100%);
    color: var(--dv-ink);
}

/* The circles above are sized in fixed px for desktop — on a narrow
   phone viewport they overlap each other far more within the small
   width, stacking the translucent colour layers into a visibly
   darker/muddier background than the same page on laptop. Sizing them
   in vw instead keeps the gradient coverage proportional across
   viewport widths, so mobile matches laptop. */
@media (max-width: 767px) {
    .dv-contact-main {
        background:
            radial-gradient(76vw circle at 6% -8%, rgba(0,110,195,0.32), transparent 52%),
            radial-gradient(66vw circle at 102% -4%, rgba(63,196,140,0.30), transparent 50%),
            radial-gradient(56vw circle at 10% 62%, rgba(63,196,140,0.24), transparent 48%),
            radial-gradient(69vw circle at 96% 92%, rgba(0,110,195,0.26), transparent 50%),
            radial-gradient(45vw circle at 55% 28%, rgba(63,196,140,0.16), transparent 45%),
            linear-gradient(180deg, #eef6fd 0%, #eefbf3 100%);
    }
}

.dv-contact-scroll {
    width: 100%;
    max-width: 64rem;
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.dv-contact-scroll::-webkit-scrollbar {
    display: none;
}

.dv-contact-eyebrow {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4338CA;
}

.dv-contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: clamp(1.25rem, 3vw, 2rem);
}
@media (min-width: 700px) {
    .dv-contact-grid { grid-template-columns: 1fr 1fr; }
}

.dv-contact-card {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(21, 21, 21, 0.07);
    border-radius: 1.25rem;
    padding: clamp(1rem, 2vw, 1.5rem);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    /* Pinned to dark ink regardless of the page's own ambient text colour
       — this is a near-white card, not part of the gradient's text layer. */
    color: var(--dv-ink);
}
.dv-contact-card .material-symbols-outlined {
    color: var(--dv-turquoise);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .dv-contact-main { margin-left: var(--dv-rail-w); padding: 1rem; }
    .dv-contact-card { padding: 0.9rem; }
}