/* =============================================================================
   babel-mobile.css — responsive / mobile layer
   -----------------------------------------------------------------------------
   Loaded LAST in <head>, after Assets/babel-tailwind.css and after each page's
   inline <style> block. Source order is what gives these rules the win, so this
   file must stay the final stylesheet on every page.

   The compiled Tailwind build only contains the utilities the pages already use,
   so NOTHING here may depend on a new Tailwind class. Every rule is either plain
   CSS on an existing hook, or a `.mnav-*` / `.mdrawer-*` class defined below.

   Breakpoints
     1023px  desktop nav collapses -> hamburger + drawer
      767px  the main "mobile" tier: type scale, section rhythm, stacking
      639px  small phones
      389px  very small phones (iPhone SE / Galaxy S-class portrait)
   ========================================================================== */

:root {
    /* Measured live by js/mobile-nav.js so hero padding always clears the real
       header, whatever the follow-us row and CTAs end up costing. */
    --nav-h: 68px;
    --mobile-gutter: 1.25rem;
    --drawer-ease: cubic-bezier(0.16, 1, 0.3, 1);
}


/* =============================================================================
   1. GLOBAL MOBILE HYGIENE
   ========================================================================== */

@media (max-width: 1023px) {

    html {
        /* Stops iOS/Android from inflating text in "landscape-ish" reflows. */
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        overflow-x: clip;
        -webkit-tap-highlight-color: rgba(249, 115, 22, 0.15);
    }

    /* Nothing may push the page sideways. */
    img,
    svg,
    video,
    canvas,
    iframe,
    table {
        max-width: 100%;
    }

    /* Long unbroken strings (URLs, emails, IDs) must wrap rather than overflow. */
    p,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    a,
    span,
    dd,
    dt {
        overflow-wrap: break-word;
    }

    /* The 100vw locks in the page CSS include the scrollbar gutter on some
       browsers, which is exactly how a 1–2px horizontal scroll appears. */
    .hero-section,
    .hero-content {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* =============================================================================
   2. HEADER — compact bar, follow-us row moved into the drawer
   ========================================================================== */

/* The hamburger is desktop-hidden by default and revealed under 1024px. */
.mnav-burger {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    margin-right: -6px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    background: rgba(10, 8, 7, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.mnav-burger:hover,
.mnav-burger:focus-visible {
    border-color: rgba(249, 115, 22, 0.55);
    background: rgba(24, 14, 8, 0.7);
}

.mnav-burger:focus-visible {
    outline: 2px solid #fb923c;
    outline-offset: 2px;
}

.mnav-burger-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 12px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.mnav-burger-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.35s var(--drawer-ease), opacity 0.2s ease, width 0.35s var(--drawer-ease);
}

.mnav-burger-line:nth-child(1) { top: 0; }
.mnav-burger-line:nth-child(2) { top: 5.25px; width: 72%; }
.mnav-burger-line:nth-child(3) { top: 10.5px; }

/* Morph to an X while the drawer is open. */
.mnav-burger[aria-expanded="true"] .mnav-burger-line:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.mnav-burger[aria-expanded="true"] .mnav-burger-line:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.mnav-burger[aria-expanded="true"] .mnav-burger-line:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

@media (max-width: 1023px) {

    .mnav-burger { display: block; }

    /* Follow-us strip: it ate a full row above the logo on phones and pushed the
       whole header down. The same three links live in the drawer footer now. */
    .fu-row { display: none !important; }

    /* Centred desktop links — `md:flex` turns them back on at 768px, and seven of
       them collide with the logo and CTAs well before 1024px. */
    #navbar-bg > nav,
    #navbar-bg nav.hidden {
        display: none !important;
    }

    /* Main nav row: tighter gutters, shorter bar. */
    #navbar-bg .nav-row {
        padding-left: var(--mobile-gutter);
        padding-right: var(--mobile-gutter);
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
        gap: 0.65rem;
    }

    #navbar-bg .nav-row .nav-actions { gap: 0.6rem; }

    #navbar-bg .nav-row img[alt="LunarTech"] { height: 1.4rem; }

    /* The bar is transparent at scroll-top by design; once it's the only
       navigation on the page it needs a floor so links stay legible. */
    #navbar-bg {
        background: rgba(5, 5, 5, 0.72);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
    }
}

@media (max-width: 639px) {

    /* The animated conic ring on .nav-cta::before overflows its box by 5px; at
       phone widths that is the difference between fitting and not. */
    #navbar-bg .nav-cta {
        min-width: 0;
        height: 2.15rem;
        padding: 0 0.85rem;
        font-size: 0.72rem;
        gap: 0.35rem;
    }

    #navbar-bg .nav-cta iconify-icon { width: 15px; }

    #navbar-bg .nav-row { padding-left: 1rem; padding-right: 1rem; }
}

@media (max-width: 339px) {
    /* Only on the genuinely tiny screens (folded devices) do the logo, CTA and
       burger stop fitting. The CTA goes, because it is duplicated in the drawer.
       At 360/375px — still very common — it stays. */
    #navbar-bg .nav-cta--secondary { display: none !important; }
}


/* =============================================================================
   3. MOBILE DRAWER
   ========================================================================== */

.mdrawer {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: block;
}

.mdrawer[hidden] { display: none; }

.mdrawer__scrim {
    position: absolute;
    inset: 0;
    background: rgba(3, 2, 2, 0.66);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.mdrawer.is-open .mdrawer__scrim { opacity: 1; }

.mdrawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(21rem, 88vw);
    padding: calc(0.9rem + env(safe-area-inset-top)) 0 calc(1.25rem + env(safe-area-inset-bottom));
    background: linear-gradient(200deg, #100b08 0%, #090706 45%, #050505 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: -24px 0 60px -20px rgba(0, 0, 0, 0.9);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(102%);
    transition: transform 0.42s var(--drawer-ease);
}

.mdrawer.is-open .mdrawer__panel { transform: translateX(0); }

/* Warm edge light so the panel reads as part of the brand, not a system sheet. */
.mdrawer__panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent, rgba(249, 115, 22, 0.45) 22%, rgba(249, 115, 22, 0.12) 68%, transparent);
    pointer-events: none;
}

.mdrawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.25rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mdrawer__brand img {
    display: block;
    height: 1.4rem;
    width: auto;
}

.mdrawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: -6px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.03);
    color: #d4d4d4;
    cursor: pointer;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.mdrawer__close:hover { color: #fff; border-color: rgba(249, 115, 22, 0.5); }
.mdrawer__close:focus-visible { outline: 2px solid #fb923c; outline-offset: 2px; }

.mdrawer__nav {
    display: flex;
    flex-direction: column;
    padding: 0.85rem 0.75rem 0.35rem;
}

.mdrawer-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    /* 48px tall — comfortably above the 44px touch-target floor. */
    min-height: 48px;
    padding: 0 0.75rem;
    border-radius: 12px;
    color: #b8b8b8;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: color 0.25s ease, background 0.25s ease;
}

.mdrawer-link iconify-icon,
.mdrawer-link svg {
    flex: 0 0 auto;
    color: #6a6a6a;
    transition: color 0.25s ease;
}

.mdrawer-link:hover,
.mdrawer-link:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.045);
}

.mdrawer-link:hover iconify-icon,
.mdrawer-link:focus-visible iconify-icon { color: #fb923c; }

.mdrawer-link:focus-visible { outline: 2px solid #fb923c; outline-offset: -2px; }

.mdrawer-link.is-active {
    color: #fff;
    background: linear-gradient(100deg, rgba(249, 115, 22, 0.16), rgba(249, 115, 22, 0.04));
    box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.24);
}

.mdrawer-link.is-active iconify-icon { color: #fdba74; }

.mdrawer__cta {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.6rem;
    padding: 1.1rem 1.25rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mdrawer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0 1.1rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.mdrawer-btn:active { transform: scale(0.985); }
.mdrawer-btn:focus-visible { outline: 2px solid #fb923c; outline-offset: 2px; }

.mdrawer-btn--primary {
    color: #fff;
    background: rgba(6, 4, 3, 0.92);
    border: 2px solid #fb923c;
    box-shadow: 0 0 14px rgba(249, 115, 22, 0.3), 0 12px 30px -18px rgba(249, 115, 22, 0.8);
}

.mdrawer-btn--primary:hover { background: rgba(16, 10, 7, 0.96); border-color: #fdba74; }

.mdrawer-btn--ghost {
    color: #e5e5e5;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.mdrawer-btn--ghost:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }

.mdrawer__social {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: auto;
    padding: 1.1rem 1.25rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mdrawer__social-label {
    color: #6f6f6f;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.mdrawer__social-links {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.mdrawer__social a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 40px;
    color: #a3a3a3;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.25s ease;
}

.mdrawer__social a iconify-icon { color: #b45309; transition: color 0.25s ease; }
.mdrawer__social a:hover { color: #fff; }
.mdrawer__social a:hover iconify-icon { color: #f97316; }

/* Set on <body> while the drawer is open. */
.mdrawer-lock {
    overflow: hidden !important;
    touch-action: none;
}

/* Drawer never appears on desktop, even if the class is left on by a stale JS state. */
@media (min-width: 1024px) {
    .mdrawer { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .mdrawer__panel,
    .mdrawer__scrim,
    .mnav-burger-line { transition: none !important; }
}


/* =============================================================================
   4. HERO
   ========================================================================== */

@media (max-width: 1023px) {

    .hero-section {
        min-height: auto;
    }

    .hero-content {
        /* Anchored to the measured header height instead of a hard 16rem, which
           left a screenful of dead space above the headline. */
        padding-top: calc(var(--nav-h) + clamp(2.5rem, 8vh, 4.5rem));
        padding-bottom: clamp(2.75rem, 7vh, 4rem);
        padding-left: var(--mobile-gutter);
        padding-right: var(--mobile-gutter);
        margin-inline: 0;
    }

    .hero-eyebrow {
        margin-bottom: 1rem;
        padding: 0.3rem 0.75rem;
        font-size: 0.68rem;
        line-height: 1.3;
    }

    .hero-title {
        margin-bottom: 1.15rem;
        font-size: clamp(1.75rem, 8.2vw, 2.6rem) !important;
        line-height: 1.12 !important;
        letter-spacing: -0.025em;
        /* The desktop headline is a horizontal white-gradient "shimmer" sized to
           the element box. Over two centred desktop lines it reads as a sheen;
           over three ragged phone lines it just looks like half the words failed
           to load. Solid white below the desktop breakpoint. */
        background: none;
        color: #fff;
        -webkit-text-fill-color: #fff;
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
    }

    /* The author-placed break assumes a desktop measure; on a phone it forces a
       24-character line that overflows. Let the text find its own wrap. */
    .hero-title br { display: none; }

    .hero-lede {
        max-width: 34ch;
        margin-bottom: 1.75rem;
        font-size: 0.9rem;
        line-height: 1.55;
    }

    .hero-actions {
        flex-direction: column;
        gap: 0.7rem;
        width: 100%;
        max-width: 19rem;
    }

    .hero-action {
        width: 100%;
        min-width: 0;
        height: 3rem;
        font-size: 0.9rem;
        gap: 0.65rem !important;
    }

    .hero-stat {
        margin-top: 2rem;
        gap: 0.85rem;
    }

    .hero-partners { margin-top: 2.25rem; }
}

@media (max-width: 767px) {

    /* Five institution logos on one row is unreadable at phone widths. Two-up,
       with the odd one out centred across both columns. */
    .hero-inst-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem 0.5rem;
    }

    .hero-inst-sep { display: none; }

    .hero-inst {
        min-height: 2.85rem;
        padding-inline: 0.25rem;
        justify-content: center;
    }

    .hero-inst:last-child { grid-column: 1 / -1; }

    .hero-inst-logo-frame { width: min(9rem, 40vw); height: 2.85rem; }
    .hero-inst-logo--world-bank { width: min(8.5rem, 38vw); }
    .hero-inst-logo--harvard { width: min(9rem, 40vw); }
    .hero-inst-logo--mit { width: min(8rem, 36vw); }
    .hero-inst-logo--un { width: min(6.5rem, 29vw); }
    .hero-inst-logo--who { width: min(7.5rem, 34vw); }

    /* A 26s scaling animation over a 1.5MB full-bleed image is the single most
       expensive thing on the page for a mid-range phone. */
    .hero-kenburns { animation: none !important; transform: none !important; }
}

@media (max-width: 389px) {
    .hero-title { font-size: clamp(1.6rem, 8vw, 1.85rem) !important; }
    .hero-lede { font-size: 0.85rem; }
    .hero-action { height: 2.85rem; font-size: 0.85rem; }
}


/* =============================================================================
   5. FLUID TYPE SCALE
   -----------------------------------------------------------------------------
   Tailwind's raw display sizes (text-4xl = 2.25rem, text-7xl = 4.5rem) were
   authored for desktop and never stepped down, because the pages only ever add
   `md:`/`lg:` variants — which scale UP from a mobile value that was already too
   large. These caps live strictly below 640/768px, so no `sm:`/`md:`/`lg:`
   utility is ever contradicted.
   ========================================================================== */

@media (max-width: 767px) {

    .text-2xl { font-size: 1.3rem; line-height: 1.28; }
    .text-3xl { font-size: clamp(1.4rem, 5.6vw, 1.7rem); line-height: 1.2; }
    .text-4xl { font-size: clamp(1.6rem, 6.6vw, 2rem); line-height: 1.16; }
    .text-5xl { font-size: clamp(1.75rem, 7.4vw, 2.25rem); line-height: 1.14; }
    .text-6xl { font-size: clamp(1.9rem, 8.2vw, 2.5rem); line-height: 1.12; }
    .text-7xl { font-size: clamp(2rem, 9vw, 2.75rem); line-height: 1.1; }

    /* Arbitrary-value display sizes used in the section headers and stat blocks. */
    .text-\[2rem\]     { font-size: clamp(1.45rem, 5.8vw, 1.75rem); line-height: 1.2; }
    .text-\[3\.5rem\]  { font-size: clamp(1.85rem, 7.8vw, 2.35rem); line-height: 1.12; }
    .text-\[4rem\]     { font-size: clamp(1.95rem, 8.4vw, 2.5rem); line-height: 1.1; }
    .text-\[5\.5rem\]  { font-size: clamp(2.1rem, 9.6vw, 2.9rem); line-height: 1.06; }
    .text-\[6rem\]     { font-size: clamp(2.2rem, 10vw, 3rem); line-height: 1.06; }

    /* Body copy: 14px base is fine on desktop, cramped on a phone. */
    body { font-size: 15px; }

    .text-lg { font-size: 1rem; line-height: 1.55; }
    .text-xl { font-size: 1.08rem; line-height: 1.5; }

    /* Wide letter-spacing on small uppercase labels wraps them mid-word. */
    .tracking-\[0\.25em\] { letter-spacing: 0.16em; }
    .tracking-\[0\.2em\]  { letter-spacing: 0.14em; }
    .tracking-widest      { letter-spacing: 0.08em; }

    /* Measures written as `max-w-2xl` (42rem) do nothing under 672px; the real
       constraint on a phone is the gutter, so just let them fill it. */
    .max-w-2xl,
    .max-w-3xl,
    .max-w-4xl,
    .max-w-5xl,
    .max-w-6xl,
    .max-w-7xl { max-width: 100%; }
}

@media (max-width: 389px) {
    body { font-size: 14.5px; }
    .text-4xl { font-size: 1.55rem; }
    .text-5xl { font-size: 1.7rem; }
}


/* =============================================================================
   6. SECTION RHYTHM
   -----------------------------------------------------------------------------
   Desktop vertical rhythm (py-32 = 8rem top and bottom) reads as endless empty
   scrolling on a 700px-tall viewport. Roughly halved below 768px.
   ========================================================================== */

@media (max-width: 767px) {

    .py-32 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
    .py-28 { padding-top: 3.25rem; padding-bottom: 3.25rem; }
    .py-24 { padding-top: 3rem; padding-bottom: 3rem; }
    .py-20 { padding-top: 2.75rem; padding-bottom: 2.75rem; }
    .py-16 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .py-12 { padding-top: 2rem; padding-bottom: 2rem; }

    .pt-20 { padding-top: 2.75rem; }
    .pt-14 { padding-top: 2.25rem; }
    .pt-12 { padding-top: 2rem; }
    .pb-24 { padding-bottom: 3rem; }
    .pb-16 { padding-bottom: 2.5rem; }
    .pb-12 { padding-bottom: 2rem; }
    .pb-10 { padding-bottom: 1.75rem; }

    .mb-28 { margin-bottom: 3.25rem; }
    .mb-24 { margin-bottom: 3rem; }
    .mb-20 { margin-bottom: 2.75rem; }
    .mb-16 { margin-bottom: 2.25rem; }
    .mb-14 { margin-bottom: 2rem; }
    .mb-12 { margin-bottom: 1.85rem; }
    .mb-10 { margin-bottom: 1.6rem; }

    .mt-20 { margin-top: 2.75rem; }
    .mt-16 { margin-top: 2.25rem; }
    .mt-14 { margin-top: 2rem; }
    .mt-10 { margin-top: 1.6rem; }

    .gap-16 { gap: 2.25rem; }
    .gap-12 { gap: 1.85rem; }
    .gap-10 { gap: 1.5rem; }

    .space-y-12 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.85rem; }

    /* Horizontal gutters — px-12 (3rem) leaves ~290px of usable width on a 375px
       phone. One consistent gutter everywhere instead. */
    .px-12,
    .px-16 { padding-left: var(--mobile-gutter); padding-right: var(--mobile-gutter); }

    .px-6 { padding-left: var(--mobile-gutter); padding-right: var(--mobile-gutter); }

    /* Card interiors. */
    .p-14 { padding: 1.75rem; }
    .p-12 { padding: 1.6rem; }
    .p-10 { padding: 1.5rem; }
}

@media (max-width: 389px) {
    :root { --mobile-gutter: 1rem; }
    .py-32 { padding-top: 3rem; padding-bottom: 3rem; }
    .py-24 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .p-10, .p-12, .p-14 { padding: 1.25rem; }
}


/* =============================================================================
   7. SHARED COMPONENTS
   ========================================================================== */

@media (max-width: 767px) {

    /* ---- Glass cards: hover lift and cursor-glow are pointer-only effects that
       stick after a tap on touch devices. ---- */
    .rounded-3xl { border-radius: 1.25rem; }

    /* ---- Logo + testimonial + chip marquees ---- */
    .logo-marquee { gap: 1.75rem; }
    .logo-item { width: 33vw; padding: 0 3vw; }
    .logo-item img { max-height: 1.9rem; }

    .testi-item { width: 280px; max-width: 82vw; }
    .testi-box { padding: 1.5rem 1.25rem; border-radius: 1.25rem; }
    .testi-quote { font-size: 0.86rem; line-height: 1.62; }
    .testi-track { gap: 1.25rem; }

    .testi-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.65rem 0.5rem;
        margin-bottom: 2.5rem;
    }

    .testi-stat-num { font-size: clamp(1.35rem, 6.4vw, 1.9rem); }
    .testi-stat-label { font-size: 0.64rem; line-height: 1.3; }

    .chip-marquee {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
        mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    }

    .hi-chip { padding: 0.55rem 1rem; font-size: 0.8rem; }
    .chip-track .hi-chip { margin-right: 0.65rem; }

    /* ---- Mission / Vision / Approach tabs: three of them overflow the row ---- */
    .mvp-tab { padding: 0.25rem 0.65rem 0.9rem; gap: 0.45rem; }
    .mvp-ico { width: 2.6rem; height: 2.6rem; border-radius: 0.8rem; }
    .mvp-ico iconify-icon { width: 20px; }
    .mvp-label { font-size: 0.78rem; }
    .mvp-underline { left: 0.65rem; right: 0.65rem; }

    /* ---- FAQ accordion ---- */
    .faq-q {
        padding: 1.1rem 0.25rem;
        font-size: 0.92rem;
        line-height: 1.4;
        gap: 0.75rem;
    }

    .faq-a-inner { padding: 0 0.25rem 1.1rem; font-size: 0.87rem; line-height: 1.65; }

    /* ---- Process steps ---- */
    .proc-step .proc-num { width: 2.75rem; height: 2.75rem; font-size: 0.95rem; border-radius: 0.85rem; }

    /* ---- Language chips ---- */
    .lang-chip { padding: 0.4rem 0.75rem; font-size: 0.75rem; }

    /* ---- Feature / doc cards (features.html) ---- */
    .feat-card { padding: 1.5rem 1.35rem; border-radius: 1.25rem; }
    .feat-title { font-size: 1.02rem; }
    .feat-copy { font-size: 0.87rem; line-height: 1.6; }
    .doc-card { padding: 1.1rem; }
    .doc-label { font-size: 0.78rem; }

    /* ---- Pricing ---- */
    .pricing-card { min-height: auto; padding: 1.35rem; border-radius: 1.25rem; }
    .pricing-plan-name { font-size: 1.05rem; }
    .pricing-plan-description { font-size: 0.82rem; }
    .pricing-price { margin-top: 1.1rem; }
    .pricing-price .price-amount,
    .pricing-price .fixed-price { font-size: 2.15rem; }
    .pricing-features li { font-size: 0.84rem; }
    .pricing-cta { min-height: 46px; }
    .pricing-chips { gap: 0.4rem; }
    .pricing-chip { font-size: 0.72rem; padding: 0.3rem 0.65rem; }

    /* ---- Comparison table: keep it scrollable and hint that it scrolls ---- */
    .cmp-wrap {
        margin-inline: calc(var(--mobile-gutter) * -0.5);
        scroll-snap-type: x proximity;
    }

    .cmp-table th:first-child,
    .cmp-table td:first-child { position: sticky; left: 0; z-index: 1; background: #0b0908; }

    /* ---- about-us principle cards + pipeline illustration ---- */
    .principle-card { padding: 1.5rem 1.35rem; }
    .principle-illustration { max-width: 100%; overflow: hidden; }
    .ps-stage-item { min-width: 0; }

    /* ---- Footer brand lockup: 21vw wordmark next to a 12vw mark is fine, but the
       80px of top padding above it is not. ---- */
    .brand-lockup { gap: 3vw; }
}

/* Touch devices get no hover states — they latch on tap and never clear. */
@media (hover: none) {

    [class*="rounded-3xl"][class*="bg-neutral-900/30"]:hover {
        transform: none;
        box-shadow: none;
    }

    [class*="rounded-3xl"][class*="bg-neutral-900/30"]:hover::after { opacity: 0; }

    .hero-action:hover,
    .mdrawer-btn:hover { transform: none; }

    .testi-marquee:hover .testi-track,
    .chip-marquee:hover .chip-track,
    .logo-marquee:hover .logo-track { animation-play-state: running; }
}


/* =============================================================================
   8. FOOTER
   ========================================================================== */

@media (max-width: 767px) {

    footer .grid.grid-cols-1 { gap: 2rem; }

    /* The signup form wrapped its submit button under the input at ~340px. */
    #email-form {
        max-width: 100%;
        flex-wrap: wrap;
        gap: 0.55rem;
    }

    #email-form input[type="email"] {
        flex: 1 1 60%;
        min-width: 0;
        /* 16px prevents iOS Safari from zooming the viewport on focus. */
        font-size: 16px;
        min-height: 46px;
    }

    #email-form input[type="submit"] {
        flex: 0 0 auto;
        min-height: 46px;
    }

    /* Footer link lists need real touch targets. */
    footer ul a,
    footer ul li > a {
        display: inline-flex;
        align-items: center;
        min-height: 38px;
    }

    .babel-wordmark { font-size: 24vw; }
}

/* The three footer link columns are `grid-cols-3` with no responsive variant, so
   a phone gets ~100px per column and "VAHE ASLANYAN" / "Get in touch" wrap onto
   two lines each. Two columns fit the longest label on one line. */
@media (max-width: 479px) {

    footer .grid-cols-3.md\:col-start-7 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.75rem 1.25rem;
    }

    /* Integration tiles — also an unconditional `grid-cols-3`. The squares
       themselves are fine; `p-6` leaves almost no room inside them. */
    .grid-cols-3 > .aspect-square {
        padding: 0.75rem;
        border-radius: 1rem;
        gap: 0.5rem;
    }
}


/* =============================================================================
   9. FORMS — anywhere on the site
   -----------------------------------------------------------------------------
   Any input under 16px triggers an automatic viewport zoom on iOS Safari, and
   the page never zooms back out. This is the fix.
   ========================================================================== */

@media (max-width: 767px) {

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
        min-height: 46px;
    }

    textarea { min-height: 7rem; }

    button,
    input[type="submit"],
    input[type="button"],
    [role="button"] { min-height: 44px; }
}


/* =============================================================================
   10. PERFORMANCE / MOTION ON SMALL DEVICES
   ========================================================================== */

@media (max-width: 767px) {

    /* Three animated 120px-blur orbs are a sustained compositor cost on phones.
       Keep the colour wash, drop the animation and halve the blur radius. */
    .lt-orb {
        animation: none !important;
        filter: blur(70px);
        opacity: 0.42;
    }

    .lt-gridlines { display: none; }

    /* Entrance reveals blur every element as it scrolls in — expensive, and it
       reads as jank on a phone. Keep the fade and the lift, drop the blur. */
    .reveal-on-scroll { filter: none; transform: translateY(12px); }
    .r-stagger > * { filter: none; transform: translateY(12px) scale(1); }
}

/* =============================================================================
   11. TABLET TIER (768px – 1023px)
   -----------------------------------------------------------------------------
   Everything above is `max-width: 767px`, so this band was still being served the
   full desktop `md:` treatment — display type at 3–4.5rem, 8rem section padding,
   and a five-across institutional bar — on a viewport that is nowhere near
   desktop width. These are intermediate steps, not the phone values.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

    /* Display type: the `md:` variants are the largest sizes that apply here. */
    .md\:text-7xl { font-size: clamp(2.5rem, 6.4vw, 3.4rem); line-height: 1.08; }
    .md\:text-6xl { font-size: clamp(2.25rem, 5.6vw, 3rem); line-height: 1.1; }
    .md\:text-5xl { font-size: clamp(2rem, 4.8vw, 2.6rem); line-height: 1.12; }
    .md\:text-4xl { font-size: clamp(1.75rem, 4vw, 2.1rem); line-height: 1.16; }
    .md\:text-\[2rem\] { font-size: 1.7rem; line-height: 1.2; }

    /* Section rhythm: between the phone and desktop values. */
    .py-32, .md\:py-40 { padding-top: 5rem; padding-bottom: 5rem; }
    .md\:py-28 { padding-top: 4.5rem; padding-bottom: 4.5rem; }
    .py-24 { padding-top: 4.25rem; padding-bottom: 4.25rem; }
    .py-20 { padding-top: 3.75rem; padding-bottom: 3.75rem; }
    .pt-20 { padding-top: 3.75rem; }
    .mb-28, .md\:mb-28 { margin-bottom: 4.5rem; }
    .mb-16 { margin-bottom: 3rem; }
    .gap-16 { gap: 3rem; }

    /* Institutional trust bar. `.hero-inst` is `flex: 1 1 0` while the logo
       inside keeps `max-width: none`, so once the row is narrower than
       5 x 11.5rem the frames clip the logos mid-word ("World Healtl",
       "Massachuset"). Scale the frames to what the row can actually give them. */
    .hero-inst-logo-frame { width: min(7.5rem, 16.5vw); height: 3.25rem; }
    .hero-inst { min-height: 3.25rem; padding-inline: 0.25rem; }
    .hero-inst-sep { height: 28px; }
    .hero-inst-logo--world-bank { width: min(7rem, 15.5vw); }
    .hero-inst-logo--harvard { width: min(7.5rem, 16.5vw); }
    .hero-inst-logo--mit { width: min(6.75rem, 15vw); }
    .hero-inst-logo--un { width: min(5.25rem, 11.5vw); }
    .hero-inst-logo--who { width: min(6.25rem, 13.5vw); }
}


/* =============================================================================
   12. HEROES THAT DO NOT USE .hero-content
   -----------------------------------------------------------------------------
   about-us and contact-us lay their heroes out differently, so the padding that
   clears the fixed header lives in utility classes on those pages instead.
   ========================================================================== */

@media (max-width: 1023px) {

    /* 100vh does not account for the mobile browser's collapsing toolbar, so a
       `min-h-screen` hero is always taller than the screen it is meant to fill. */
    .min-h-screen { min-height: 100svh; }
    .min-h-\[640px\] { min-height: min(640px, 100svh); }

    /* contact-us: a vertically-centred min-h-screen section whose only clearance
       above the badge is its own py-32 — which section 6 just reduced. */
    section.min-h-screen.content-wait-for-load {
        padding-top: calc(var(--nav-h) + 1.75rem);
    }

    /* about-us: `pt-40` = 10rem of dead space above the headline on a phone. */
    .pt-40 { padding-top: calc(var(--nav-h) + 2.25rem); }

    /* about-us hero scrim. The left-to-right fade assumes a wide viewport where
       the copy occupies the dark left half. On a phone the copy spans the full
       width and the closing paragraph ends up on the bright side of the image,
       so the scrim has to cover the whole frame instead. */
    .bg-gradient-to-r.from-\[\#050505\] {
        background-image: linear-gradient(180deg,
                rgba(5, 5, 5, 0.86) 0%,
                rgba(5, 5, 5, 0.55) 34%,
                rgba(5, 5, 5, 0.62) 66%,
                rgba(5, 5, 5, 0.92) 100%) !important;
    }
}

@media (max-width: 767px) {
    /* about-us hero: `justify-between` over a 640px floor strands the headline at
       the top and the copy at the bottom with a screenful of nothing between. */
    .min-h-\[640px\].flex.flex-col.justify-between {
        min-height: 0;
        justify-content: flex-start;
        gap: 2rem;
        padding-bottom: 2.5rem;
    }

    /* Hero ledes sit directly on the artwork, and the mobile crop puts them over
       the brightest part of it on pricing and about-us. */
    .hero-lede {
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 22px rgba(0, 0, 0, 0.75);
    }
}

@media (max-width: 767px) {
    /* Author-placed line breaks in the display headlines are measured for a
       desktop column and force overflow at phone widths. */
    h1 br { display: none; }

    /* Standalone footer / card CTAs that fell under the touch-target floor. */
    .principle-readmore,
    footer .border-t a[href$="policy.html"],
    footer .border-t a[href$="conditions.html"] {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }
}


/* =============================================================================
   13. SHORT VIEWPORTS
   ========================================================================== */

/* The drawer holds seven links, two CTAs and three social rows; on a 667px-tall
   phone that overflows and the follow-us block falls below the fold. */
@media (max-height: 740px) {
    .mdrawer__head { padding-bottom: 0.8rem; }
    .mdrawer__nav { padding-top: 0.5rem; padding-bottom: 0.15rem; }
    .mdrawer-link { min-height: 44px; font-size: 0.9rem; }
    .mdrawer__cta { margin-top: 0.35rem; padding-top: 0.85rem; padding-bottom: 0.9rem; }
    .mdrawer-btn { min-height: 44px; font-size: 0.86rem; }
    .mdrawer__social { padding-top: 0.85rem; }
    .mdrawer__social a { min-height: 32px; font-size: 0.76rem; }
}

/* Short landscape viewports (phone held sideways): the hero must not demand a
   full screen of padding before the headline appears. */
@media (max-width: 1023px) and (max-height: 520px) and (orientation: landscape) {

    .hero-content {
        padding-top: calc(var(--nav-h) + 1.25rem);
        padding-bottom: 2rem;
    }

    .hero-title { margin-bottom: 0.85rem; font-size: clamp(1.5rem, 4.2vw, 2rem) !important; }
    .hero-stat { margin-top: 1.25rem; }
    .hero-partners { margin-top: 1.5rem; }
    .mdrawer__panel { padding-top: 0.6rem; }
    .mdrawer-link { min-height: 42px; }
}
