/* Dig Virtual — about-us.html
   Reuses the same rail + drawer system as 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, .dv-hero-blob/.dv-gradient-text),
   but this page is a single fixed, non-scrolling panel — no header, no footer,
   no horizontal storytelling engine. */

html, body {
    height: 100%;
    overflow: hidden;
    margin: 0;
}

.dv-about-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-about-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%);
    }
}

/* A tiny, invisible-scrollbar safety net — content is sized to fit one
   screen at normal viewport sizes/zoom, this only kicks in on an unusually
   short viewport or heavy browser zoom so nothing gets clipped. */
.dv-about-scroll {
    width: 100%;
    max-width: 68rem;
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.dv-about-scroll::-webkit-scrollbar {
    display: none;
}

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

.dv-about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(1.25rem, 3vw, 2.25rem) 0;
}
@media (min-width: 900px) {
    .dv-about-grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.dv-about-card {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(21, 21, 21, 0.06);
    border-radius: 1.5rem;
    padding: clamp(1.25rem, 2.5vw, 2rem);
    backdrop-filter: blur(6px);
    /* 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-about-check-list {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.9rem;
}
.dv-about-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: clamp(0.78rem, 1.1vw, 0.9rem);
    line-height: 1.35;
}

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