/* ==========================================================================
   Layout — containers, section shells, grids
   ========================================================================== */

.section-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--section-y) var(--sp-5);
}

.section-title {
    text-align: center;
    font-size: var(--fs-3xl);
    color: var(--dark-bg);
    margin-bottom: var(--sp-3);
    font-weight: 700;
    line-height: var(--lh-snug);
}

.section-subtitle {
    text-align: center;
    color: var(--text-main);
    margin: 0 auto var(--sp-10);
    font-size: var(--fs-base);
    max-width: 700px;
    line-height: var(--lh-snug);
}

/* --- Section rhythm ------------------------------------------------------
   With many stacked sections the real risk is a monotonous scroll. These
   modifiers enforce alternating surfaces; never give two adjacent sections
   the same one. */
.surface-light   { background-color: var(--light-bg); }
.surface-white   { background-color: var(--white); }
.surface-muted   { background-color: var(--slate-100); }
.surface-inverse { background-color: var(--dark-bg); color: var(--slate-300); }
.surface-inverse .section-title { color: var(--white); }
.surface-inverse .section-subtitle { color: var(--slate-400); }

/* --- Grids ---
   Grid and flex items default to min-width:auto, so a long word or a wide
   child can push a track past its share and overflow the page. Overriding it
   is what keeps these layouts inside the viewport. */
.grid-2 > *, .grid-3 > *, .grid-4 > *,
.split > *, .grid-even > *, .bento > *,
.mv-grid > *, .pricing-grid > *, .work-grid > * {
    min-width: 0;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-10);
    align-items: center;
}

/* min(N, 100%) rather than a bare N: a fixed minmax() floor is a hard minimum,
   so on a 320px screen the 272px container still laid out 300px tracks and the
   row overflowed. Wrapping the floor in min() makes it track-relative, which
   makes that overflow structurally impossible at any width. */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--sp-6);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: var(--sp-5);
}

/* --------------------------------------------------------------------------
   Two-column blocks — align to the top and give short columns a visual
   instead of whitespace
   -------------------------------------------------------------------------- */

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
    align-items: center;
}
.split.is-top { align-items: start; }
.split.is-wide-left  { grid-template-columns: 1.15fr 0.85fr; }
.split.is-wide-right { grid-template-columns: 0.85fr 1.15fr; }

@media (max-width: 900px) {
    .split, .split.is-wide-left, .split.is-wide-right { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* A narrow measure after a run of wide sections reads as the page settling. */
.band-narrow { max-width: 760px; margin-inline: auto; }

/* --- Hero ----------------------------------------------------------------
   Becomes a two-column split above 1024px so the 3D canvas has its own space;
   below that it reverts to the original centred single column. */
.hero {
    padding: clamp(140px, 14vh, 180px) var(--sp-5) var(--sp-11);
    background-color: #eef2f7;
    background-image: var(--aurora-blue), var(--aurora-sky), var(--aurora-warm),
                      linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
    background-repeat: no-repeat;
    background-size: 160% 160%, 150% 150%, 140% 140%, 100% 100%;
    animation: auroraDrift 120s var(--ease-in-out) infinite alternate;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.hero h1 {
    font-size: var(--fs-display);
    font-weight: 800;
    letter-spacing: var(--tracking-display);
    line-height: 1.05;
    color: var(--dark-bg);
    margin-bottom: var(--sp-5);
}

.hero p {
    font-size: var(--fs-lg);
    margin-bottom: var(--sp-6);
    line-height: var(--lh-base);
}

@media (min-width: 1025px) {
    .hero-container {
        max-width: var(--container);
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: var(--sp-8);
        align-items: center;
        text-align: left;
    }
    .hero-copy p { max-width: 34rem; }

    /* A hero with copy but no visual. Without this the two-column grid above
       deals the copy block into one half and leaves the other half empty —
       or, if the children are unwrapped, splits them across both columns. */
    .hero-container.is-single {
        grid-template-columns: minmax(0, 60rem);
        justify-content: center;
        text-align: center;
    }
    .hero-container.is-single .hero-copy p { max-width: 46rem; margin-inline: auto; }
}

/* --- Illustration boxes --- */
.illustration-box {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-6);
    min-height: 340px;
}
.illustration-box.bg-blue { background: linear-gradient(135deg, #eaf3ff, #dbeafe); }
.illustration-box.bg-navy { background: linear-gradient(135deg, #0f172a, #1e293b); }
.illustration-box svg { max-width: 100%; height: auto; }

/* --- Photographs -----------------------------------------------------------
   Every image container in this codebase styled `svg` and nothing else, because
   until now every visual was vector. A bare <img> inherits no sizing at all and
   overflows its box. These rules are what let a photo sit in the same slots.

   .is-photo drops the inner padding: an illustration floats inside its frame,
   a photograph fills it. object-fit:cover crops rather than distorts, so a
   16:9 source in a 4:3 slot loses its edges instead of stretching faces.
   --------------------------------------------------------------------------- */
.illustration-box.is-photo { padding: 0; }

.illustration-box img,
.challenge-visual img,
.work-cover img,
.media-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* A photo frame that carries its own aspect ratio, for slots with no fixed
   height. aspect-ratio reserves the space before the image loads, so nothing
   below it jumps once it arrives. */
.media-frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--surface-3);       /* visible while the image decodes */
    aspect-ratio: 4 / 3;
}
.media-frame.is-wide  { aspect-ratio: 16 / 9; }
.media-frame.is-tall  { aspect-ratio: 3 / 4; }

/* A soft brand wash over photos so they sit inside the palette instead of
   fighting it — the single cheapest trick for making stock photography look
   art-directed rather than dropped in. Works on either frame type. */
.media-frame.is-tinted::after,
.illustration-box.is-tinted::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg, rgba(13, 71, 161, 0.22), rgba(56, 189, 248, 0.06) 55%, transparent);
    pointer-events: none;
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .faq-split-layout { grid-template-columns: 1fr; gap: var(--sp-6); }
}

@media (max-width: 768px) {
    .grid-2 { grid-template-columns: 1fr; }
}