/* ================================================================
    TESSALIO STUDIO - CORE DESIGN SYSTEM
================================================================
*/


/* ==========================================================================
   1. ROOT VARIABLES
   --------------------------------------------------------------------------
   Every color, font, and shared layout measurement used across the site
   lives here as a CSS custom property. Sections reference these instead
   of hardcoding values, so a palette or scale change only needs to happen
   once. Grouped as: color palette (global + per-section), typography
   (font stacks + responsive title/subtitle scale), and layout constants
   (shared header/content height split used by every section).
   ========================================================================== */

:root {
    /* Color Palette */
    --bg-light: #ffffff;
    --bg-dark: #000000;
    --text-primary: #000000;
    --text-light: #ffffff;
    --text-secondary: #888888;
    --brand-blue: #1d4ed8;
    --grid-grey: #f4f4f4;
    --hero-second-section-background-color: #0A090C;
    --hero-second-section-text-color: #E1CA96;
    /* RGB triplet companion for --hero-second-section-text-color, so
       opacity variants of this gold/tan tone can use rgba(var(--gold-rgb), x)
       instead of repeating the raw RGB values across the file. */
    --gold-rgb: 225, 202, 150;
    --identity-section-background-color: #C6DEA6;
    --identity-title-color: #0F1020;
    --identity-subtitle-color: #0F1020;
    --identity-card-1-color: #C6DEA6;
    --identity-card-2-color: #C6DEA6;
    --identity-card-3-color: #C6DEA6;
    --identity-card-4-color: #C6DEA6;
    --identity-card-text-color: #0F1020;
    --identity-mission-background-color: #7EBDC3;
    --identity-mission-text-color: #0F1020;
    --identity-expand-icon-color: #7241d5;
    --identity-card-title-fontsize-xs: 1rem;
    --identity-mission-text-fontsize-xs: 0.7rem;
    --identity-card-title-fontsize-s: 1.05rem;
    --identity-mission-text-fontsize-s: 0.8rem;
    --identity-card-title-fontsize-std: 1.3rem;
    --identity-mission-text-fontsize-std: 0.95rem;
    --identity-card-title-fontsize-l: 1.3rem;
    --identity-mission-text-fontsize-l: 0.95rem;
    --dynamics-section-background-color: #7EBDC3;
    --dynamics-title-color: #0F1020;
    --dynamics-subtitle-color: #0F1020;
    --dynamics-content-area-background-color: #C6DEA6;
    --dynamics-content-right-color: #0A090C;
    --dynamics-content-left-color: #0A090C;
    --output-section-background-color: #0A090C;
    --output-title-color: #E1CA96;
    --output-subtitle-color: #E1CA96;
    --output-content-area-background-color: #141315;
    --output-timeline-track-color-inactive: #444444;
    --output-timeline-track-color-active: #F3DE8A;
    --output-timeline-travel-dot-color: #F3DE8A;
    --output-timeline-months-years-color: #444444;
    --output-app-card-background-color: #F3DE8A;
    --output-app-card-text-color-primary: #0A090C;
    --output-app-card-text-color-secondary: #0A090C;
    --output-app-card-cta-btn-background-color: #0A090C;
    --output-app-card-cta-btn-background-color-hover: #b69b2f;
    --output-app-card-cta-btn-text-color: #F3DE8A;
    --output-app-card-cta-btn-text-color-hover: #0A090C;
    --contact-section-background-color: #C3BEF7;
    --contact-title-color: #0A090C;
    --contact-subtitle-color: #0A090C;
    --contact-content-area-background-color: #EB9486;
    --contact-content-area-text-color: #0A090C;
    --contact-content-area-text-highlighter-color: #0A090C;
    --information-section-background-color: #EB9486;
    --information-title-color: #0A090C;
    --information-subtitle-color: #0A090C;
    --information-content-area-background-color: #C3BEF7;
    --information-faq-question-color: #7241d5;
    --information-faq-short-answer-color: #0A090C;
    --information-faq-long-answer-color: #0A090C;
    --information-faq-down-arrow-color: #0A090C;
    --information-faq-seperation-line-color: #0A090C;
    --footer-section-background-color: #0A090C;
    --footer-section-text-color-primary: #E1CA96;
    --footer-section-text-color-secondary: #E1CA96;
    --footer-section-accent-color: #E1CA96;
    /* Typography Scale — centralized to exactly 3 roles. Every
       font-family declaration in this file references one of these,
       never a literal font name.
       --font-bebas:  headings only (Bebas Neue).
       --font-outfit: everything else — prose/UI text (Outfit).
       --font-accent: small labels/chips/badges (Special Gothic Expanded One). */
    --font-outfit: 'Outfit', sans-serif;
    --font-bebas: 'Bebas Neue', sans-serif;
    --font-accent: 'Special Gothic Expanded One', sans-serif;
    --section-title-fontsize-xs: 1.8rem;
    --section-subtitle-fontsize-xs: 0.7rem;
    --section-title-fontsize-s: 2.2rem;
    --section-subtitle-fontsize-s: 0.8rem;
    --section-title-fontsize-std: 3.5rem;
    --section-subtitle-fontsize-std: 0.85rem;
    --section-title-fontsize-l: 3.5rem;
    --section-subtitle-fontsize-l: 0.9rem;
    --section-title-fontsize-xs-landscape: 2.2rem;
    --section-title-fontsize-s-landscape: 2.2rem;
    --section-title-fontsize-std-landscape: 2.2rem;
    --section-title-fontsize-l-landscape: 2.2rem;
    --section-title-fontsize-xl-landscape: 2.2rem;
    /* Layout Constraints */
    --header-h: 24svh;
    --content-h: calc(100svh - var(--header-h));
    --navbar-h: 80px;
    --pill-clearance: 90px;
}

:root {
    --fs-hero: min(9svh, 7vw);
    --fs-hero-sub: clamp(0.8rem, 2.2svh, 1.1rem);
    --fs-banner: clamp(1.5rem, 8svh, 5.5rem);
    --fs-title: clamp(1.15rem, 7cqh, 1.55rem);
    --fs-body: clamp(1.1rem, 6.5cqh, 1.4rem);
    --page-title: clamp(1.4rem, 11svh, 7.5rem);
    --page-subtitle: clamp(0.8rem, 3.6vw, 1.3rem);
    --page-nav: 0.85rem;
    --page-email: clamp(1.2rem, 9cqh, 2.6rem);
    --page-social: clamp(1rem, 6cqh, 1.4rem);
    --fs-chip: 0.7rem;
}

@media (min-width: 1001px) and (max-width: 1440px) {
     :root {
        --fs-banner: clamp(1.2rem, 6.5svh, 3.5rem);
        --fs-title: clamp(1rem, 5cqh, 1.2rem);
        --fs-body: clamp(0.9375rem, 4.5cqh, 1.1rem);
        --page-title: clamp(1.3rem, 9svh, 4.5rem);
        --page-subtitle: clamp(0.85rem, 2.8svh, 1.15rem);
        --page-email: clamp(1rem, 10cqh, 1.75rem);
        --page-social: clamp(0.85rem, 6cqh, 1.15rem);
    }
}

@media (max-aspect-ratio: 1/1) and (min-width: 1001px) and (max-width: 1440px) {
     :root {
        --fs-banner: clamp(1.3rem, 7vw, 3.5rem);
        --fs-title: clamp(1.15rem, 6cqh, 1.4rem);
        --fs-body: clamp(1.0625rem, 5.5cqh, 1.3rem);
        --page-title: clamp(1.6rem, 9svh, 5.5rem);
        --page-subtitle: clamp(1rem, 3svh, 1.3rem);
        --page-email: clamp(1rem, 10cqh, 1.75rem);
        --page-social: clamp(0.9rem, 6cqh, 1.2rem);
    }
}

@media (max-aspect-ratio: 1/1) and (min-width: 701px) and (max-width: 1000px) {
     :root {
        --fs-banner: clamp(1.2rem, 8vw, 3rem);
        --fs-title: clamp(1.05rem, 5.5cqh, 1.25rem);
        --fs-body: clamp(0.9375rem, 4.5cqh, 1.0625rem);
        --page-title: clamp(1.4rem, 8svh, 4.5rem);
        --page-subtitle: clamp(0.9rem, 2.6svh, 1.1rem);
        --page-email: clamp(1rem, 8.5cqh, 1.45rem);
        --page-social: clamp(0.88rem, 6cqh, 1.05rem);
    }
}

@media (max-aspect-ratio: 1/1) and (min-width: 376px) and (max-width: 700px) {
     :root {
        --fs-banner: clamp(1.1rem, 8.5vw, 2.6rem);
        --fs-title: clamp(0.9375rem, 4.5cqh, 1.25rem);
        --fs-body: clamp(0.875rem, 4cqh, 1.125rem);
        --page-title: clamp(1.2rem, 7svh, 3.5rem);
        --page-subtitle: clamp(0.75rem, min(4vw, 4.5svh), 0.95rem);
        --page-email: clamp(1rem, 9cqh, 1.5rem);
        --page-social: clamp(0.85rem, 7cqh, 1.0625rem);
    }
}

@media (max-aspect-ratio: 1/1) and (min-width: 321px) and (max-width: 375px) {
     :root {
        --fs-banner: clamp(1rem, 8vw, 2.2rem);
        --fs-title: clamp(0.9375rem, 4.5cqh, 1.125rem);
        --fs-body: clamp(0.875rem, 4cqh, 1rem);
        --page-title: clamp(1.1rem, 6.5svh, 3rem);
        --page-subtitle: clamp(0.7rem, 3.8vw, 0.9rem);
        --page-email: clamp(1.15rem, 10cqh, 1.25rem);
        --page-social: clamp(0.8125rem, 3cqh, 0.875rem);
    }
}

@media (max-aspect-ratio: 1/1) and (max-width: 320px) {
     :root {
        --fs-banner: clamp(0.9rem, 7.5vw, 2rem);
        --fs-title: clamp(0.8125rem, 3cqh, 0.9375rem);
        --fs-body: clamp(0.8125rem, 3cqh, 0.875rem);
        --page-title: clamp(1rem, 6svh, 2.6rem);
        --page-subtitle: clamp(0.68rem, 3.5vw, 0.85rem);
        --page-email: clamp(0.9rem, 9cqh, 1.0625rem);
        --page-social: clamp(0.7rem, 4.5cqh, 0.95rem);
    }
}

@media (orientation: landscape) and (max-height: 480px) {
     :root {
        --fs-banner: clamp(1rem, 6.5svh, 2.2rem);
        --fs-title: clamp(0.85rem, 4.5cqh, 1.05rem);
        --fs-body: clamp(0.8rem, 4cqh, 1rem);
        /* --page-title: clamp(1rem, 6.5svh, 2.2rem); */
        /* --page-title: clamp(1.3rem, 9cqh, 3.1rem); */
        --page-title: clamp(1.5rem, 10cqh, 3.7rem);
        /* --page-subtitle: clamp(0.8rem, 4cqh, 1rem); */
        /* --page-subtitle: clamp(0.68rem, 3.5vw, 0.85rem); */
        /* --page-subtitle: clamp(0.68rem, 3.5cqh, 0.85rem); */
        --page-subtitle: clamp(0.6rem, 3cqh, 0.75rem);
        --page-nav: 0.7rem;
        --page-email: clamp(0.9rem, 7cqh, 1.3rem);
        --page-social: clamp(0.65rem, 4cqh, 0.85rem);
        --fs-chip: 0.55rem;
    }
}

@media (orientation: landscape) and (max-height: 320px) {
     :root {
        --fs-banner: clamp(1rem, 6.5svh, 2.2rem);
        --fs-title: clamp(0.85rem, 4.5cqh, 1.05rem);
        --fs-body: clamp(0.8rem, 4cqh, 1rem);
        --page-title: clamp(1.5rem, 10cqh, 3.7rem);
        --page-subtitle: clamp(0.6rem, 3cqh, 0.75rem);
        --page-nav: 0.6rem;
    }
}

:root {
    /* Home circle (max 43px) + gap (10px) + pill-nav (max 80px) + buffer */
    --pill-stack-clearance: clamp(110px, 22svh, 170px);
}


/* ==========================================================================
   FONT FACES — self-hosted (replaces Google Fonts CDN)
   --------------------------------------------------------------------------
   Files live in /assets/fonts/. font-display: swap avoids invisible text
   while these load. Outfit is a variable font — one file covers the full
   100–900 weight range used across the site.
   ========================================================================== */

@font-face {
    font-family: 'Bebas Neue';
    src: url('/assets/fonts/BebasNeue-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('/assets/fonts/Outfit-VariableFont_wght.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Special Gothic Expanded One';
    src: url('/assets/fonts/SpecialGothicExpandedOne-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* ==========================================================================
   2. GLOBAL RESET & BASE STYLES
   --------------------------------------------------------------------------
   Baseline reset applied before any component or section styling: kills
   native scrollbars (the site uses its own pill-nav + progress bar for
   scroll feedback instead), zeroes out default margin/padding/box-sizing,
   and sets the page's default background/text/font. `.no-scroll` is a
   CSS-only safety net — the real scroll lock during preloader/menu-open
   states is applied by JS directly on the body's inline style.
   ========================================================================== */

html,
body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

html.no-scroll,
body.no-scroll {
    overflow: hidden !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000;
    color: var(--text-primary);
    font-family: var(--font-outfit);
    -webkit-font-smoothing: antialiased;
}


/* ==========================================================================
   3. SHARED UI COMPONENTS — GLOBAL FLOATING WIDGETS
   --------------------------------------------------------------------------
   Fixed/overlay elements that sit above the page content and are shared
   across the whole site rather than belonging to any one section: the
   accessibility skip link, the floating pill navigator, the section-jump
   transition shutters, the scroll progress bar, and the full-screen menu
   overlay. All entrance/exit animation, visibility toggling, and state
   switching (e.g. which pill-nav shape is showing) is driven by JS/GSAP —
   the CSS here only defines each widget's resting layout and hidden state.
   ========================================================================== */


/* ── Content Area Shell & Reveal ───────────────────────────────────
   Shared across every section: the main content area sits above the
   header (absolute positioning, matching the header's own absolute
   placement below it), fills the remaining var(--content-h) space,
   and slides in from the top once JS confirms this section's
   animation timeline is built (see .js-ready gating, applied per
   section root). Only the elements placed *inside* this shell differ
   section to section — the shell itself, its position, and its
   reveal direction are identical everywhere. */


/* Generic slide-from-top reveal, gated per-section via .js-ready on
   that section's own root (e.g. #dynamics-root.js-ready, #output-root.js-ready).
   Each section's root selector opts into this by simply using the
   .sliding-area class on its content wrapper — no per-section
   duplication needed. */

[id$="-root"].js-ready .sliding-area {
    opacity: 0;
    transform: translateY(-100%);
}

.sliding-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--content-h);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.sliding-area::-webkit-scrollbar {
    display: none;
}

.sliding-area {
    opacity: 1 !important;
}


/* ── Skip Link ─────────────────────────────────────────────────
   Accessibility aid for keyboard users: invisible (parked above the
   viewport) until it receives keyboard focus, at which point it slides
   into view so a user can jump straight past the navbar to the main
   content instead of tabbing through every nav item first. */

.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 99999;
    padding: 12px 20px;
    background: #000;
    color: #fff;
    font-family: sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
}


/* ── Navigation Pill ────────────────────────────────────────────
   Floating widget fixed to the bottom-right of the viewport. `.pill-back`
   is the rear pill that expands to reveal a home icon (click to jump back
   to the hero); `.pill-front` sits in front and holds the prev/next
   section buttons. JS toggles the pill's height/position between three
   states depending on scroll position — hero (icon hidden), a middle
   section (icon visible above the buttons), and footer — and disables
   the buttons via `.locked` while a section transition is in progress. */

.pill-wrap {
    position: fixed;
    bottom: calc(var(--header-h) / 2);
    transform: translateY(50%);
    right: 5%;
    z-index: 500;
    width: clamp(28px, calc(var(--header-h) * 0.22), 50px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
}

.pill-home-circle {
    all: unset;
    box-sizing: border-box;
    width: clamp(28px, calc(var(--header-h) * 0.22), 43px);
    height: clamp(28px, calc(var(--header-h) * 0.22), 43px);
    border-radius: 50%;
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.4);
}

.pill-home-circle svg {
    width: clamp(9px, calc(var(--header-h) * 0.06), 12px);
    height: clamp(9px, calc(var(--header-h) * 0.06), 12px);
}

.pill-nav {
    position: relative;
    width: clamp(28px, calc(var(--header-h) * 0.22), 50px);
    height: clamp(45px, calc(var(--header-h) * 0.35), 80px);
    border-radius: 40px;
}

.pill-front {
    position: relative;
    width: clamp(28px, calc(var(--header-h) * 0.22), 50px);
    height: clamp(45px, calc(var(--header-h) * 0.35), 80px);
    background: #000;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.4);
}

.pill-front__prev svg,
.pill-front__next svg {
    width: clamp(12px, calc(var(--header-h) * 0.08), 16px);
    height: clamp(12px, calc(var(--header-h) * 0.08), 16px);
}

.pill-front__prev,
.pill-front__next {
    flex: 1 1 0;
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease;
}

.pill-front__prev {
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}

.pill-front__next {
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
}

.pill-front__prev:hover,
.pill-front__next:hover {
    background: #555;
}

.pill-front__divider {
    flex-shrink: 0;
    height: 1px;
    width: 60%;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.25);
}

.pill-wrap.locked .pill-front__prev,
.pill-wrap.locked .pill-front__next {
    pointer-events: none;
    cursor: default;
}

@media (orientation: landscape) and (max-height: 480px) {
    .pill-home-circle {
        display: none;
    }
    .pill-nav {
        border-radius: 14px;
    }
    .pill-front {
        border-radius: 10px;
    }
    .pill-front__prev {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .pill-front__next {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
}


/* ── Section Transition Shutters ─────────────────────────────────
   Two full-viewport panels used as a cover during section-to-section
   jump navigation (e.g. clicking a pill-nav arrow or a menu link): they
   scale down from the top to black out the screen, JS then jumps the
   scroll position to the target section underneath, and the panels
   scale back up to reveal it — hiding what would otherwise be a jarring
   instant scroll. Entirely choreographed by a GSAP timeline in JS. */

.transition-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100svh;
    display: flex;
    flex-direction: row;
    z-index: 99999 !important;
    pointer-events: none;
}

.shutter {
    width: 50%;
    height: 100%;
    background-color: #000;
    transform: scaleY(0);
    transform-origin: top;
}


/* ── Section Scroll Progress Bar ──────────────────────────────────
   Thin fixed bar pinned to the bottom of the viewport. Its fill width
   is updated continuously by JS as the user scrolls, indicating how far
   through the current section's scroll-driven animation they are. */

.section-progress-bar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    z-index: 400;
    background: transparent;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.section-progress-bar__fill {
    height: 100%;
    width: 0%;
    background: #000000;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
    will-change: width;
}


/* ── Top Navbar ──────────────────────────────────
   Fixed top navbar present on every section: a centered brand mark
   with a menu-open button on the left and an account button on the
   right. Buttons are icon-only circles on narrow portrait viewports
   and expand to labeled pills with text on wider/landscape viewports.
   JS/GSAP handles the menu button's click (opens the full-screen menu
   overlay) and the initial entrance fade-in — the CSS here only
   defines each element's resting layout, sizing, and per-breakpoint
   shape. */

.hero-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 5%;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    z-index: 500;
    font-family: var(--font-outfit);
    pointer-events: none;
}

.navbar-account,
.navbar-menu,
.navbar-brand {
    pointer-events: auto;
}

.navbar-menu,
.navbar-account {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.10), 0 8px 24px rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-outfit);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--page-nav);
    letter-spacing: 0.08em;
    background: rgba(0, 0, 0, 1);
    color: #F5F5F5;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: color 0.5s ease, background 0.5s ease, border-color 0.5s ease;
}

.navbar-menu {
    justify-self: end;
}

.navbar-account {
    justify-self: end;
    display: none;
}

.navbar-brand {
    justify-self: start;
    letter-spacing: 0.3em;
    font-weight: 900;
    font-size: var(--page-nav);
    text-transform: uppercase;
    color: #000000;
    background: transparent;
    padding: 5px 10px 5px calc(10px + 0.3em);
    border-radius: 4px;
    transition: color 0.5s ease, background 0.5s ease;
}

.nav-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    display: none;
}

@media (min-width: 769px) {
    .navbar-menu,
    .navbar-account {
        padding: 10px 24px;
        width: auto;
        height: auto;
        border-radius: 20px;
    }
    .navbar-menu span,
    .navbar-account span {
        display: inline;
    }
    .nav-icon {
        display: none;
    }
    .navbar-menu:hover,
    .navbar-account:hover {
        transform: translateY(-2px);
        filter: brightness(1.1);
    }
    .hero-navbar {
        padding: 2rem 5%;
    }
}

@media (orientation: landscape) and (max-height: 480px) {
    .navbar-menu,
    .navbar-account {
        padding: 8px 18px;
        width: auto;
        height: auto;
        border-radius: 20px;
        font-size: var(--page-nav);
    }
    .navbar-menu span,
    .navbar-account span {
        display: inline;
    }
    .nav-icon {
        display: none;
    }
    .hero-navbar {
        padding: 1rem 5%;
    }
}

@media (max-width: 768px) and (orientation: portrait) {
    .navbar-menu,
    .navbar-account {
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 50%;
    }
    .navbar-menu span,
    .navbar-account span {
        display: none;
    }
    .nav-icon {
        display: block;
    }
    .hero-navbar {
        padding: 1.5rem 5%;
    }
}

@media (max-width: 375px) and (orientation: portrait) {
    .hero-navbar {
        padding: 1rem 5%;
    }
}

@media (max-width: 320px) and (orientation: portrait) {
    .hero-navbar {
        padding: 0.75rem 5%;
    }
}


/* ── Menu Overlay ──────────────────────────────────────────────────
   Full-screen navigation overlay opened via the navbar's menu button.
   JS animates it open by expanding a clip-path from a thin strip at the
   top to cover the full viewport. Contains: an email zone at the top,
   and a bottom row split into two cards — a legal-links card (Privacy,
   Terms, Cookies) and a nav-links card (About, Works, FAQs) — sharing
   identical card/card-item markup so both sides stay visually matched. */

.menu-root {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100svh;
    z-index: 9999;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    overflow: hidden;
    background: #0a090c;
}

.menu-close-trigger {
    all: unset;
    position: absolute;
    top: 5svh;
    right: 7%;
    z-index: 100;
    cursor: pointer;
}

.close-text {
    font-family: var(--font-accent);
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    color: #F5F5F5;
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    border-radius: 999px;
    padding: 8px 16px;
    display: block;
    background: transparent;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.close-text:hover,
.close-text:focus-visible {
    background: rgba(var(--gold-rgb), 1);
    color: #0f0f11;
    border-color: rgba(var(--gold-rgb), 1);
}

.close-text:focus-visible {
    outline: none;
}

.menu-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
}


/* ── Primary nav (left, dominant) ─────────────────────────────── */

.menu-primary-nav {
    flex: 0 0 62%;
    box-sizing: border-box;
    padding: 10svh 6% 8svh 7%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: safe center;
    gap: clamp(6px, 1.5svh, 18px);
    border-right: 1px solid rgba(var(--gold-rgb), 0.1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.menu-primary-link {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.4vw, 20px);
    text-decoration: none;
    cursor: pointer;
    width: fit-content;
    padding: 6px 0;
}

.menu-primary-link-chevron {
    width: 0.42em;
    height: 0.42em;
    flex-shrink: 0;
    background-color: rgba(var(--gold-rgb), 0.55);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M8 4l10 8-10 8'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M8 4l10 8-10 8'/></svg>");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
}

.menu-primary-link-text {
    font-family: var(--font-bebas);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-size: clamp(2.2rem, 6.5vw, 5rem);
    line-height: 1;
    color: #F5F5F5;
    transition: color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-primary-link:hover .menu-primary-link-text,
.menu-primary-link:focus-visible .menu-primary-link-text {
    color: rgba(var(--gold-rgb), 1);
    transform: translateX(10px);
}

.menu-primary-link:hover .menu-primary-link-chevron,
.menu-primary-link:focus-visible .menu-primary-link-chevron {
    background-color: rgba(var(--gold-rgb), 1);
    transform: translateX(10px);
}

.menu-primary-link:focus-visible {
    outline: none;
}


/* ── Secondary column (right) ─────────────────────────────────── */

.menu-side {
    flex: 0 0 38%;
    box-sizing: border-box;
    padding: 10svh 7% 6svh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.menu-side-top {
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 5svh, 56px);
}

.menu-label {
    display: block;
    font-family: var(--font-accent);
    font-size: 0.65rem;
    font-weight: 400;
    color: rgba(var(--gold-rgb), 0.45);
    text-transform: uppercase;
    letter-spacing: 0.25em;
    margin-bottom: 0.6rem;
}

.menu-email {
    display: block;
    font-family: var(--font-outfit);
    font-size: clamp(1.1rem, 1.7vw, 1.5rem);
    font-weight: 300;
    color: #F5F5F5;
    text-decoration: none;
    letter-spacing: 0.01em;
    line-height: 1.3;
    text-transform: lowercase;
    word-break: break-word;
    transition: color 0.3s ease;
}

.menu-email:hover {
    color: rgba(var(--gold-rgb), 1);
}

.menu-app-teaser {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    padding: clamp(16px, 2.4svh, 24px);
    border-radius: 16px;
    background: linear-gradient(155deg, #1a1a1c 0%, #0f0f11 100%);
    border: 1px solid rgba(var(--gold-rgb), 0.12);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
    cursor: pointer;
}

.menu-app-teaser[hidden] {
    display: none;
}

.menu-app-teaser:hover,
.menu-app-teaser:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(var(--gold-rgb), 0.35);
}

.menu-app-teaser:focus-visible {
    outline: none;
}

.menu-app-teaser-tag {
    font-family: var(--font-outfit);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(var(--gold-rgb), 0.9);
}

.menu-app-teaser-name {
    font-family: var(--font-outfit);
    font-weight: 900;
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    color: #FFFFFF;
    line-height: 1;
}

.menu-app-teaser-desc {
    font-family: var(--font-outfit);
    font-weight: 400;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #8a8a8a;
}

.menu-tagline {
    font-family: var(--font-bebas);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-size: clamp(1.1rem, 1.8vw, 1.6rem);
    line-height: 1.15;
    color: rgba(var(--gold-rgb), 0.85);
    margin: 0;
}

.menu-side-bottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid rgba(var(--gold-rgb), 0.1);
}

.menu-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.menu-legal-link {
    font-family: var(--font-outfit);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #8a8a8a;
    text-decoration: none;
    transition: color 0.25s ease;
}

.menu-legal-link:hover {
    color: #F5F5F5;
}

.menu-company-line {
    font-family: var(--font-outfit);
    font-size: 0.7rem;
    color: #6a6a6a;
    margin: 0;
}

@media (max-aspect-ratio: 1/1) {
    .menu-inner {
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .menu-primary-nav {
        flex: 0 0 auto;
        border-right: none;
        border-bottom: 1px solid rgba(var(--gold-rgb), 0.1);
        padding: 12svh 7% 4svh;
        gap: 4px;
        overflow-y: visible;
    }
    .menu-primary-link-text {
        font-size: clamp(2rem, 11vw, 3.2rem);
    }
    .menu-side {
        flex: 0 0 auto;
        padding: 5svh 7% 6svh;
        gap: 32px;
        overflow-y: visible;
    }
}

@media (max-width: 375px) {
    .menu-close-trigger {
        top: 3.5svh;
        right: 5%;
    }
}

@media (orientation: landscape) and (max-height: 430px) {
    .menu-primary-nav {
        padding: 8svh 5% 4svh 6%;
        gap: 2px;
    }
    .menu-primary-link-text {
        font-size: clamp(1.4rem, 5vw, 2.2rem);
    }
    .menu-side {
        padding: 6svh 6% 3svh;
        gap: 16px;
    }
    .menu-side-top {
        gap: 16px;
    }
}


/*------------- Transfer Modal --------------*/

#transfer-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(10, 9, 12, 0.6);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#transfer-modal[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

.modal-box {
    position: relative;
    width: min(92%, 380px);
    background: #ffffff;
    border-radius: 20px;
    padding: 32px 28px 28px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
    transform: translateY(16px) scale(0.97);
    transition: transform 0.3s ease;
}

#transfer-modal[aria-hidden="false"] .modal-box {
    transform: translateY(0) scale(1);
}

#modal-title-text {
    font-family: var(--font-outfit);
    font-weight: 800;
    font-size: 1.3rem;
    color: #111111;
    margin: 0 0 10px;
}

#modal-desc-text {
    font-family: var(--font-outfit);
    font-size: 0.85rem;
    line-height: 1.6;
    color: #777777;
    margin: 0 0 24px;
}

.proceed-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 20px;
    box-sizing: border-box;
    border-radius: 12px;
    background: #111111;
    color: #ffffff;
    font-family: var(--font-outfit);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.2s ease;
}

.proceed-btn:hover {
    background: #E1CA96;
    color: #111111;
}

.proceed-btn:active {
    transform: scale(0.98);
}

#transfer-modal button[aria-label="Close modal"] {
    display: block;
    margin: 20px auto 0;
    font-family: var(--font-outfit);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #999999;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.25s ease;
}

#transfer-modal button[aria-label="Close modal"]:hover {
    color: #111111;
}


/*------- Hint Overlay --------- */

.hint-overlay {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.9) 20%, rgba(0, 0, 0, 0.85) 40%, rgba(0, 0, 0, 0.8) 60%, rgba(0, 0, 0, 0.75) 80%, rgba(0, 0, 0, 0.7) 100%);
}

.hint-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>");
    mix-blend-mode: overlay;
    pointer-events: none;
}

.hint-overlay__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 0;
    background: none;
    box-shadow: none;
    color: #fff;
    text-align: center;
    transform: scale(0.92);
}

.hint-overlay__row {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-outfit);
    font-size: 30px;
    font-weight: 300;
    letter-spacing: 0.06em;
    text-transform: capitalize;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
}

.hint-overlay__icon {
    width: 50px;
    height: 50px;
    stroke-width: 1.4;
    opacity: 0.85;
    animation: hint-scroll-bounce 1.8s ease-in-out infinite;
}

@keyframes hint-scroll-bounce {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.85;
    }
    50% {
        transform: translateY(5px);
        opacity: 1;
    }
}

.hint-overlay__divider {
    width: 32px;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
}

.hint-overlay__row--tab {
    font-family: var(--font-outfit);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.65);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}

.hint-overlay__key {
    padding: 4px 12px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 6px;
    font-family: var(--font-accent);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.9);
}

@media (prefers-reduced-motion: reduce) {
    .hint-overlay__icon {
        animation: none;
    }
}

@media (max-width: 600px) {
    .hint-overlay__row {
        font-size: 22px;
        gap: 10px;
    }
    .hint-overlay__row--tab {
        font-size: 13px;
        flex-direction: column;
        gap: 8px;
    }
    .hint-overlay__icon {
        width: 22px;
        height: 22px;
    }
}


/* ---------------- Cookie Banner -------------- */

.cookie-banner {
    position: fixed;
    right: calc(5% + 80px);
    left: auto;
    bottom: max(16px, calc(var(--header-h) / 2 - 100px));
    z-index: 5000;
    max-width: 360px;
    width: min(360px, calc(100vw - 5% - 104px));
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
    pointer-events: none;
}

.cookie-banner[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.cookie-banner-box {
    background: linear-gradient(155deg, #1a1a1c 0%, #0f0f11 100%);
    border: 1px solid rgba(225, 202, 150, 0.12);
    border-radius: 20px;
    padding: 28px 28px 24px;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.cookie-banner-text {
    font-family: var(--font-outfit);
    font-size: clamp(0.75rem, 1.3vw, 0.85rem);
    line-height: 1.6;
    color: #cfcfcf;
    margin: 0 0 20px;
}

.cookie-banner-link {
    color: #E1CA96;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-banner-actions {
    display: flex;
    gap: 10px;
}

.cookie-banner-btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 999px;
    font-family: var(--font-outfit);
    font-weight: 600;
    font-size: clamp(0.7rem, 1.1vw, 0.8rem);
    letter-spacing: 0.02em;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.cookie-banner-btn--decline {
    background: transparent;
    border-color: rgba(225, 202, 150, 0.3);
    color: #F5F5F5;
}

.cookie-banner-btn--decline:hover {
    background: rgba(225, 202, 150, 0.08);
}

.cookie-banner-btn--accept {
    background: #E1CA96;
    color: #0f0f11;
}

.cookie-banner-btn--accept:hover {
    background: #ecd9ac;
}

@media (max-width: 480px) {
    .cookie-banner-box {
        padding: 22px 20px 20px;
    }
    .cookie-banner-actions {
        flex-direction: column;
    }
}


/* ==========================================================================
   4. SECTION-CONTENT SHARED UI COMPONENTS
   --------------------------------------------------------------------------
   Reusable building blocks that every page section (Identity, Dynamics,
   Output, Contact, Information, Footer) is built from, rather than
   floating widgets. Covers: the base `<section>`/pin-spacer setup that
   keeps GSAP's scroll-pinning seamless between sections, the shared
   title+subtitle header block every section starts with, and the hidden
   text-reveal "masks" that scroll animations reveal. Section-specific
   content-area rules (e.g. Dynamics/Contact/Output's own sliding panels)
   are deliberately NOT included here — those belong with each section's
   own CSS+JS review and will be added once that section is approved.
   All entrance timing and character/word stagger reveals are driven by
   JS/GSAP — the CSS here only defines each element's structural layout
   and hidden/rest state.
   ========================================================================== */

:root {
    --header-title-baseline-nudge: 0.275em;
}

[id$="-root"].js-ready .section-title {
    transform: translateY(var(--header-title-baseline-nudge));
}


/* ── Section Header (Title + Subtitle) ────────────────────────────
   The title/subtitle block every section shows at its top. `.section-title`
   and `.section-subtitle` are the shared typographic rules; each section
   only overrides color via its own CSS variable. On narrow/short
   viewports the two stack instead of sitting side by side (see the
   breakpoints below). */

.section-header-area {
    position: absolute;
    bottom: 0;
    left: 0;
    height: var(--header-h);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 7% clamp(1rem, calc(var(--header-h) * 0.1 + 1.5vw), 2.5rem) 7%;
    z-index: 1000;
}

.header-flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(16px, 3vw, 48px);
    width: 100%;
    max-width: calc(100% - var(--pill-clearance));
}

.section-title {
    font-family: var(--font-bebas);
    font-size: var(--page-title);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: #111111;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.05)) drop-shadow(0 12px 30px rgba(0, 0, 0, 0.1));
}

.section-subtitle {
    font-family: var(--font-outfit);
    font-size: var(--page-subtitle);
    max-width: 550px;
    line-height: 1.4;
    font-weight: 500;
    color: #5a5a5a;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 12px 30px rgba(0, 0, 0, 0.1);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

@media (max-aspect-ratio: 1/1) {
    .header-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(6px, 1svh, 14px);
        max-width: 100%;
        padding-right: calc(var(--pill-clearance) - 20px);
    }
    .section-subtitle {
        max-width: 100%;
    }
}

@media (orientation: landscape) and (max-height: 1440px) {
    .section-subtitle {
        transform: translateY(21px);
    }
}

@media (orientation: landscape) and (max-height: 1440px) and (min-width: 1441px) {
    .section-subtitle {
        transform: translateY(40px);
    }
}

@media (orientation: landscape) and (max-height: 1000px) {
    .section-subtitle {
        transform: translateY(16px);
    }
}

@media (orientation: landscape) and (max-height: 700px) {
    .section-subtitle {
        transform: translateY(9px);
    }
}

@media (orientation: landscape) and (max-height: 320px) {
    .section-subtitle {
        transform: translateY(6.5px);
    }
}


/* ── Text Reveal Masks ─────────────────────────────────────────────
   Structural helper classes used across every section's scroll-driven
   text animations. `.title-mask-wrap` clips its content so a character
   sliding up from below appears to emerge from behind a mask rather
   than popping in. `.title-char` and `.sub-char` are per-character spans
   (title text slides up + fades in; subtitle text scales down + fades
   in) and `.word`/`.char` are the equivalent per-word/per-character
   spans used by body copy elsewhere (Dynamics reveal text, Contact
   lines, etc). All of these start invisible/offset here in CSS; JS/GSAP
   staggers them into their visible resting state as the section scrolls
   into view — there is no CSS-only fallback state. */

.title-mask-wrap {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
}

.title-char {
    display: inline-block;
    transform: translateY(105%);
    opacity: 0;
}

.sub-char {
    display: inline-block;
    opacity: 0;
    transform: scale(1.15);
}

.word,
.char {
    opacity: 0;
    display: inline-block;
    white-space: pre;
}


/* ── Section Base & Pin-Spacer Fix ────────────────────────────────
   Every page section is full-height and black by default, and both the
   whole page (`#main-content-wrapper`) and each individual section start
   hidden/invisible — JS reveals them once the preloader hands off and
   each section's animation setup completes, avoiding a flash of
   unstyled/unanimated content. Sections that GSAP pins during scroll get
   wrapped in an auto-generated `.gsap-pin-spacer` element — forcing that
   wrapper to black too (instead of its default transparent/white)
   prevents a visible seam flashing between sections while pinned. The
   negative margin-top + transparent border-top on each root section
   additionally overlaps sections by 1px, closing any remaining
   sub-pixel compositing gap at their shared edge. */

section {
    position: relative;
    width: 100%;
    background-color: #000;
    z-index: 1;
    min-height: 100svh;
}

.gsap-pin-spacer {
    background-color: #000 !important;
}

#main-content-wrapper {
    visibility: hidden;
    opacity: 0;
}

#dynamics-root,
#output-root,
#contact-root,
#info-root {
    margin-top: -1px;
    border-top: 1px solid transparent;
    backface-visibility: hidden;
}

#origin-root {
    margin-top: 0 !important;
}


/* ================================================================
   PRELOAER
================================================================ */

.preloader-ui {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    touch-action: none;
}

#loader-number {
    font-family: var(--font-outfit);
    font-size: clamp(5rem, 15vw, 10rem);
    font-weight: 500;
    transform: scale(0);
}

.tagline-mask {
    overflow: visible;
    line-height: 1;
    margin-top: 1rem;
}

.loader-tagline-1,
.loader-tagline-2 {
    font-family: var(--font-outfit);
    font-size: clamp(1.0rem, 2.5vw, 1.25rem);
    text-transform: capitalize;
    letter-spacing: 0.08em;
    font-weight: 600;
    display: block;
    transform: translateY(110%);
    color: #000;
}

.loader-tagline-1 {
    opacity: 0.55;
}

.loader-tagline-2 {
    letter-spacing: 0.06em;
    font-weight: 900;
}

.tagline-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15em;
    margin-top: 1rem;
}

#loader-number {
    font-weight: 300;
    letter-spacing: -0.04em;
}

#phase2-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
}

.brand-letter {
    font-family: var(--font-outfit);
    font-size: 2.5rem;
    font-weight: 900;
    transform: translateY(110%);
    display: inline-block;
    letter-spacing: 0.1em;
}

@media (max-width: 480px) {
    .brand-letter {
        font-size: 1.5rem;
        letter-spacing: 0.05em;
    }
}

.letter-mask {
    overflow: hidden;
}


/* ================================================================
   HERO SECTION
================================================================ */

#hero-intro-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 50% 45%, #ffffff 0%, #f4f4f5 55%, #e8e8ea 100%);
    pointer-events: none;
}

.hero-section {
    width: 100vw;
    height: 100svh;
    box-sizing: border-box;
    padding-top: var(--navbar-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    position: relative;
    background: transparent;
}

.hero-block {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-block--1 {
    flex: 0 0 20%;
    /* background: #0466c8; */
}

.hero-block--2 {
    flex: 0 0 40%;
    position: relative;
    /* background: #9dc804; */
}

.hero-block--3 {
    flex: 0 0 20%;
    align-items: flex-end;
    /* background: #af18e1; */
}

.hero-block--4 {
    flex: 0 0 20%;
    /* background: #0466c8; */
}

.hero-mask {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(92%, 900px);
}

.hero-line {
    font-family: var(--font-bebas);
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    font-size: var(--fs-hero);
    transform: translateY(115%);
    color: #111111;
    display: block;
    text-align: center;
}

.hero-text-container {
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.05)) drop-shadow(0 12px 30px rgba(0, 0, 0, 0.1));
}

.hero-subtext {
    font-family: var(--font-outfit);
    font-weight: 500;
    font-size: var(--fs-title);
    color: #5a5a5a;
    text-align: center;
    margin: 0;
}

.app-icon-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
}

.app-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    opacity: 0;
    transform: scale(0);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-icon .tick {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 16px;
    height: 16px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#crush-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100svh;
    pointer-events: none;
    z-index: 9998;
}

@media (max-aspect-ratio: 1/1) {
    .hero-block--1 {
        align-items: flex-end;
    }
    .hero-block--3 {
        align-items: flex-start;
    }
}

@media screen and (max-width: 768px) {
     :root {
        --fs-hero: min(6svh, 10vw);
        --fs-hero-sub: clamp(0.7rem, 1.8svh, 0.9rem);
    }
}


/* ================================================================
   INTRO SECTION
   --------------------------------------------------------------------------
   Two halves: banner (left/top) and title+body content (right/bottom).
   Both halves are pure CSS-sized — no JS-computed font-size anywhere
   in this section anymore. Banner text uses the same font-size clamp
   as Dynamics'/Output's heading text (.dynamics-heading / .output-heading),
   so all three read as one consistent type scale across the site,
   guaranteed by CSS alone — true even if GSAP/ScrollTrigger never
   loads or throws. Title/body content is sized to match Origin/Info's
   card question/answer text, the smallest text on the page, kept as
   a separate, smaller floor. Row layout on wide/landscape screens,
   column on tall/portrait.
================================================================ */


/* ── Fail-Safe: hidden-until-animated states ──────────────────────
   Only applies once JS confirms the scrub timeline built
   successfully. Until then, everything is fully visible, correctly
   positioned, and correctly sized — sizing no longer depends on JS
   at all, only the reveal animation does. */

.section-intro.js-ready .intro-bg-fade {
    opacity: 0;
}

.section-intro.js-ready #intro-banner .title-char {
    opacity: 0;
}

.section-intro.js-ready .intro-title {
    opacity: 0;
    transform: scale(0.85);
}

.section-intro.js-ready .intro-body .word {
    opacity: 0;
}


/* ── General Structure & Typography ───────────────────────────────*/

.section-intro {
    height: 100svh;
    box-sizing: border-box;
    padding-top: var(--navbar-h);
    padding-bottom: var(--pill-stack-clearance);
    display: flex;
    flex-direction: row;
    width: 100%;
    background: transparent;
    overflow: hidden;
    position: relative;
}

.intro-bg-fade {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    background: #0A090C;
}

.intro-half {
    flex: 1;
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    padding: clamp(16px, 3vw, 40px);
    display: flex;
    position: relative;
    z-index: 1;
}

.intro-half--banner {
    container-type: size;
    align-items: stretch;
    justify-content: flex-end;
}

.intro-banner {
    font-family: var(--font-bebas);
    text-align: right;
    color: #F5F5F5;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    /* fallback for older browsers without safe/unsafe support */
    justify-content: safe center;
    /* prevents top-clipping: falls back to start-align when content overflows */
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    font-size: var(--fs-banner);
    line-height: 1.05;
}

.intro-banner::-webkit-scrollbar {
    display: none;
}

.split-line {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
}

.intro-half--content {
    container-type: size;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2svh, 20px);
}

.intro-title {
    font-family: var(--font-outfit);
    font-weight: 700;
    letter-spacing: 0.02em;
    font-size: var(--fs-title);
    color: #FFFFFF;
    margin: 0;
    text-align: center;
    max-width: 100%;
}

.intro-body {
    font-family: var(--font-outfit);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.4;
    color: #757474;
    margin: 0;
    text-align: center;
    width: 60%;
    max-width: 60%;
    overflow-wrap: break-word;
}

.intro-body .word {
    display: inline-block;
}


/* ================================================================
   BREAKPOINTS
================================================================ */

@media (max-aspect-ratio: 1/1) {
    .section-intro {
        flex-direction: column;
    }
    .intro-half--banner {
        flex: 1;
        /* was: 1.2 — match Dynamics */
        justify-content: flex-end;
        /* margin-top: 10%; */
        /* ADD — match Dynamics' banner offset */
    }
    .intro-banner {
        justify-content: flex-start;
        /* ADD — top-anchors text instead of centering, matching Dynamics */
    }
    .intro-half--content {
        width: 100%;
        justify-content: flex-start;
        align-items: center;
        flex: 0.5;
        margin-top: 0;
        /* was: 5% — match Dynamics */
    }
}

@media (max-aspect-ratio: 1/1) and (max-width: 375px) {
    .section-intro {
        padding-bottom: calc(var(--header-h) / 2);
    }
    .intro-half--banner {
        justify-content: center;
    }
    .intro-half--content {
        padding-bottom: var(--pill-clearance);
    }
}

@media (max-width: 700px) {
    .intro-body {
        width: 100%;
        max-width: 100%;
    }
}

@media (orientation: landscape) and (max-height: 480px) {
    .section-intro {
        padding-top: calc(var(--navbar-h) * 0.4);
        padding-bottom: calc(var(--pill-stack-clearance) * 0.45);
    }
    .intro-half {
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .intro-banner {
        justify-content: center;
    }
}


/* ================================================================
   ORIGIN SECTION — BENTO GRID
   --------------------------------------------------------------------------
   Same card architecture as Info (icon+question head, brief/full
   answer split, container-query sizing, five-tier breakpoints) —
   Info is the reference standard. Grid geometry differs deliberately:
   copypaste and works are true 2x2 squares (a shape Info doesn't use
   anywhere), giving the two sections a different rhythm despite
   sharing identical card mechanics and font sizing.
================================================================ */

#origin-root {
    --origin-bg: #000000;
    --origin-header-bg: #0466c8;
    --origin-card-bg: #1d1d1d;
    --origin-text-primary: #FFFFFF;
    --origin-text-question: #F5F5F5;
    --origin-text-answer: #757474;
    --origin-icon-color: #aaaaaa;
    --origin-accent: var(--identity-mission-background-color);
}


/* ── Fail-Safe: hidden-until-animated states ──────────────────────
   Every rule in this block only applies once JS has added `.js-ready`
   to #origin-root, confirming the GSAP scroll timeline for this
   section was built successfully. Until then, everything renders in
   its plain, readable, static form. */

#origin-root.js-ready .origin-bg-fade {
    opacity: 0;
}

#origin-root.js-ready .title-char {
    opacity: 0;
    transform: translateY(105%);
}

#origin-root.js-ready .sub-char {
    opacity: 0;
    transform: scale(1.15);
}

#origin-root.js-ready .section-origin .section-header-area {
    opacity: 0;
    transform: translateY(100%);
}

#origin-root.js-ready .origin-card {
    opacity: 0;
    transform: scale(0.85);
}


/* ── General Structure ─────────────────────────────────────────── */

#origin-root {
    background-color: transparent;
    color: var(--text-primary);
    width: 100%;
    height: 100svh;
    display: flex;
    flex-direction: column;
    z-index: 10;
    position: relative;
    overflow: hidden;
}

.origin-bg-fade {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    background: #0A090C;
}

.section-origin .origin-content-area {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--content-h);
    padding-top: var(--navbar-h);
    padding-bottom: calc(var(--navbar-h) / 2);
    box-sizing: border-box;
}


/* ================================================================
   BENTO GRID
================================================================ */

.origin-bento-grid {
    display: grid;
    height: 100%;
    width: 90%;
    transform: translateX(5%);
    padding: 0 5%;
    box-sizing: border-box;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: clamp(6px, 1vw, 12px);
    grid-template-areas: "copypaste copypaste name orgtype""copypaste copypaste name basedin""team works biggervis biggervis""team works biggervis biggervis";
}

.origin-card {
    container-type: size;
    position: relative;
    all: unset;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: clamp(8px, 1.5svh, 16px);
    min-height: 0;
    min-width: 0;
    padding: clamp(10px, 2svh, 18px);
    border-radius: 16px;
    color: #FFFFFF;
    cursor: pointer;
    overflow: hidden;
    transition: filter 0.2s ease;
    background: linear-gradient(155deg, #1a1a1c 0%, #0f0f11 100%);
    border: 1px solid rgba(225, 202, 150, 0.12);
    border-radius: 20px;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.origin-card:hover,
.origin-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(225, 202, 150, 0.35);
    box-shadow: 0 28px 50px -18px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(225, 202, 150, 0.08);
}

.origin-card:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

.origin-card::after {
    content: "\2191";
    position: absolute;
    top: clamp(8px, 1.5svh, 14px);
    right: clamp(8px, 1.5svh, 14px);
    width: clamp(22px, 3svh, 30px);
    height: clamp(22px, 3svh, 30px);
    box-sizing: border-box;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-outfit);
    font-size: clamp(12px, 1.8svh, 16px);
    color: var(--identity-expand-icon-color);
    transform: rotate(30deg);
    pointer-events: none;
    z-index: 2;
}


/* ── Click-Gating (scrubbed reveal safety) ────────────────────── */

.origin-bento-grid .origin-card {
    pointer-events: none;
}

#origin-root.origin-cards-active .origin-card {
    pointer-events: auto;
}


/* ── Icon, Question & Answer — baseline (1441px+), same values as Info */

.origin-card-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: 0;
}

.origin-card-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
}

.origin-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.origin-card-icon {
    font-size: clamp(0.875rem, 6cqh, 1.625rem);
    color: #929292;
    flex-shrink: 0;
}

.origin-card-q,
.origin-card-q-short {
    font-family: var(--font-outfit);
    font-weight: 700;
    font-size: clamp(1rem, 6cqh, 1.35rem);
    color: #E1CA96;
}

.origin-card-q-short {
    display: none;
}

.origin-card-a {
    font-family: var(--font-outfit);
    font-weight: 400;
    font-size: clamp(1rem, 6cqh, 1.15rem);
    line-height: 1.4;
    color: #757474;
    margin: 0;
    min-height: 0;
    max-height: 5.6em;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.origin-card-a-brief {
    display: none;
}


/* ── Grid Placement ───────────────────────────────────────────── */

.origin-card--copypaste {
    grid-area: copypaste;
}

.origin-card--name {
    grid-area: name;
}

.origin-card--orgtype {
    grid-area: orgtype;
}

.origin-card--basedin {
    grid-area: basedin;
}

.origin-card--team {
    grid-area: team;
}

.origin-card--biggervis {
    grid-area: biggervis;
}

.origin-card--works {
    grid-area: works;
}

.origin-card--orgtype .origin-card-head,
.origin-card--basedin .origin-card-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 0;
}


/* ── Tall Base — shared layout for every portrait tier ───────────── */

@media (max-aspect-ratio: 1/1) {
    .origin-bento-grid {
        width: 100%;
        transform: translateX(0%);
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
        grid-template-areas: "name name""orgtype basedin""team biggervis""copypaste works";
        padding: 0 5%;
        gap: 2%;
    }
    .origin-card {
        height: 100%;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
        padding-right: clamp(36px, 8cqw, 48px);
    }
    .origin-card-head {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        min-height: 0;
    }
    .origin-card-content {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;
    }
    .origin-card-icon {
        font-size: clamp(0.8rem, 2cqh, 1.2rem);
    }
    .origin-card-q {
        font-size: clamp(0.7rem, 2cqh, 1.275rem);
        text-align: left;
        color: #FFFFFF;
    }
    .origin-card-a-brief {
        display: -webkit-box;
        font-family: var(--font-outfit);
        font-weight: 600;
        font-size: clamp(0.7rem, 2cqh, 1.275rem);
        line-height: 1.4;
        color: #F5F5F5;
        margin: 0;
        text-align: left;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .origin-card-a {
        display: -webkit-box;
        font-family: var(--font-outfit);
        font-weight: 400;
        font-size: clamp(0.7rem, 2cqh, 1rem);
        line-height: 1.4;
        color: #757474;
        margin: 8px 0 0;
        text-align: left;
        -webkit-line-clamp: var(--origin-a-lines, 2);
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .origin-card::after {
        color: #FFFFFF;
    }
}


/* ── Landscape / Laptop — 1001–1440px (no aspect-ratio gate) ─────── */

@media (min-width: 1001px) and (max-width: 1440px) {
    .origin-card-icon {
        font-size: clamp(0.75rem, 4.5cqh, 1.2rem);
    }
    .origin-card-q {
        font-size: clamp(0.875rem, 4.5cqh, 1.0625rem);
    }
    .origin-card-a-brief {
        font-size: clamp(0.875rem, 4.5cqh, 1.0625rem);
        -webkit-line-clamp: 1;
    }
    .origin-card-a {
        font-size: clamp(0.8125rem, 4cqh, 0.9375rem);
        -webkit-line-clamp: var(--origin-a-lines, 2);
    }
}


/* ── Tall — 701–1000px ─────────────────────────────────────────── */

@media (max-aspect-ratio: 1/1) and (min-width: 701px) and (max-width: 1000px) {
    .origin-card-icon {
        font-size: clamp(1.125rem, 4.5cqh, 1.5rem);
    }
    .origin-card-q {
        font-size: clamp(0.875rem, 3.5cqh, 1rem);
    }
    .origin-card-a-brief {
        font-size: clamp(0.875rem, 3.5cqh, 1rem);
    }
    .origin-card-a {
        font-size: clamp(0.8125rem, 3cqh, 0.9375rem);
        -webkit-line-clamp: var(--origin-a-lines, 1);
    }
}


/* ── Mobile — 376–700px ────────────────────────────────────────── */

@media (max-aspect-ratio: 1/1) and (min-width: 376px) and (max-width: 700px) {
    .origin-card-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .origin-card-icon {
        font-size: clamp(1.0625rem, 4cqh, 1rem);
    }
    .origin-card-q {
        display: none;
    }
    .origin-card-q-short {
        display: inline;
        font-size: clamp(0.8125rem, 3cqh, 1.0625rem);
        text-align: left;
        color: #FFFFFF;
    }
    .origin-card-a-brief {
        color: #757474;
        font-size: clamp(0.8125rem, 3cqh, 0.9375rem);
    }
    .origin-card-a {
        display: none;
    }
}


/* ── Mobile — 321–375px ────────────────────────────────────────── */

@media (max-aspect-ratio: 1/1) and (min-width: 321px) and (max-width: 375px) {
    .origin-card-icon {
        font-size: clamp(1rem, 4cqh, 1rem);
    }
    .origin-card-q {
        display: none;
    }
    .origin-card-q-short {
        display: inline;
        font-size: clamp(0.8125rem, 3cqh, 0.9375rem);
        text-align: left;
        color: #FFFFFF;
    }
    .origin-card-a-brief {
        color: #757474;
        font-size: clamp(0.8125rem, 3cqh, 0.875rem);
    }
    .origin-card-a {
        display: none;
    }
}


/* ── Mobile — ≤320px ───────────────────────────────────────────── */

@media (max-aspect-ratio: 1/1) and (max-width: 320px) {
    .origin-card-q {
        display: none;
    }
    .origin-card-q-short {
        display: inline;
        font-size: clamp(0.8125rem, 3cqh, 0.9375rem);
        text-align: left;
        color: #FFFFFF;
    }
    .origin-card-a-brief {
        color: #757474;
        -webkit-line-clamp: 1;
    }
    .origin-card-a {
        display: none;
    }
}

@media (orientation: landscape) and (max-height: 480px) {
    .origin-bento-grid {
        grid-template-areas: "name copypaste copypaste basedin""name copypaste copypaste basedin""team works biggervis orgtype""team works biggervis orgtype";
    }
    .origin-card {
        padding: clamp(6px, 1.5svh, 10px);
        gap: clamp(4px, 1svh, 8px);
    }
    .origin-card-icon {
        font-size: clamp(0.65rem, 3.5cqh, 0.9rem);
    }
    .origin-card-q-short,
    .origin-card-a-brief,
    .origin-card-a,
    .origin-card::after {
        display: none;
    }
    .origin-card-q {
        display: inline;
        font-size: clamp(0.65rem, 3.2cqh, 0.85rem);
    }
}


/* ── Modal (unchanged from before) ────────────────────────────── */

.origin-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
}

.origin-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.origin-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.origin-modal-panel {
    position: relative;
    max-width: 480px;
    width: min(90vw, 480px);
    background: var(--origin-card-bg);
    color: var(--origin-text-primary);
    border-radius: 20px;
    padding: clamp(24px, 5svh, 40px);
    transform: scale(0.92);
    transition: transform 0.25s ease;
}

.origin-modal.is-open .origin-modal-panel {
    transform: scale(1);
}

.origin-modal-close {
    all: unset;
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #000000;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
}

.origin-modal-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
}

.origin-modal-icon {
    display: block;
    font-size: 28px;
    margin-bottom: 16px;
    color: #757474;
}

.origin-modal-q {
    font-family: var(--font-outfit);
    font-weight: 700;
    font-size: clamp(1rem, 4svh, 1.35rem);
    color: #757474;
    margin: 0 0 12px;
}

.origin-modal-a-brief {
    font-family: var(--font-outfit);
    font-weight: 600;
    font-size: clamp(1rem, 4svh, 1.15rem);
    line-height: 1.5;
    color: #FFFFFF;
    margin: 10px 0 20px;
}

.origin-modal-a {
    font-family: var(--font-outfit);
    font-weight: 400;
    font-size: clamp(1rem, 4svh, 1.15rem);
    line-height: 1.6;
    color: #757474;
    margin: 0;
}

.origin-modal-link {
    display: inline-block;
    margin-top: 20px;
    font-family: var(--font-outfit);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
    color: var(--origin-accent);
    text-decoration: underline;
}


/* ================================================================
   DYNAMICS SECTION
   --------------------------------------------------------------------------
   Supports N banner+content "pairs," paged one at a time on scroll.
   Fail-safe default (no .js-ready): pairs stack normally in document
   flow, each a full-height block — nothing is ever hidden if JS/GSAP
   fails, you just scroll straight through pair 1, then pair 2, etc.
   Once JS confirms the scrub timeline built successfully, .js-ready
   locks the section to one viewport and pairs become absolutely
   stacked, crossfading in/out as GSAP scrubs through the pin.
================================================================ */


/* ── Fail-Safe: hidden-until-animated states ──────────────────────
   Only applies once JS confirms the scrub timeline built
   successfully. Until then, everything is fully visible, correctly
   positioned, and correctly sized — sizing no longer depends on JS
   at all, only the reveal animation does. */

.section-dynamics.js-ready .title-char {
    opacity: 0;
    transform: translateY(105%);
}

.section-dynamics.js-ready .sub-char {
    opacity: 0;
    transform: scale(1.15);
}

.section-dynamics.js-ready .section-header-area {
    opacity: 0;
    transform: translateY(100%);
}

.section-dynamics.js-ready .dynamics-title {
    opacity: 0;
    transform: scale(0.85);
}

.section-dynamics.js-ready .dynamics-body .word {
    opacity: 0;
}


/* ── General Structure & Typography ───────────────────────────────
   .section-dynamics now only holds the header + the pair stack —
   layout/padding that used to live here belongs to each .dynamics-pair
   instead, since there can be more than one. */

.section-dynamics {
    width: 100%;
    background: transparent;
    overflow: hidden;
    box-sizing: border-box;
}


/* Only once JS confirms the timeline built do we lock the section
   to a single viewport height and let pairs overlap/page instead
   of stacking in normal flow. */

.section-dynamics.js-ready {
    height: 100svh;
}

.section-dynamics .title-char {
    display: inline-block;
}

.section-dynamics .sub-char {
    display: inline-block;
}


/* ── Pair Stack ────────────────────────────────────────────────── */

.dynamics-pairs {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.section-dynamics.js-ready .dynamics-pairs {
    position: relative;
    height: 100%;
}

.dynamics-pair {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 100svh;
    box-sizing: border-box;
    padding-top: var(--navbar-h);
    padding-bottom: var(--header-h);
    column-gap: clamp(24px, 6vw, 80px);
}

.section-dynamics.js-ready .dynamics-pair {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 0;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.section-dynamics.js-ready .dynamics-pair.is-active {
    opacity: 1;
    pointer-events: auto;
}


/* ── Halves — direct children of .dynamics-pair, mirroring
   .intro-half exactly ─────────────────────────────────────────── */

.dynamics-half {
    flex: 1;
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    padding: clamp(16px, 3vw, 40px);
    display: flex;
    gap: 5%;
}

.dynamics-half--banner {
    container-type: size;
    align-items: stretch;
    justify-content: center;
    color: var(--dynamics-content-right-color);
}

.dynamics-banner {
    font-family: var(--font-bebas);
    text-align: left;
    color: #111111;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    justify-content: safe center;
    width: max-content;
    max-width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    font-size: var(--fs-banner);
    line-height: 1.05;
    transform: translateX(clamp(-160px, -11vw, -70px));
}

.dynamics-banner::-webkit-scrollbar {
    display: none;
}

.dynamics-banner .split-line {
    justify-content: flex-start;
    width: max-content;
    /* was inheriting width: 100% from the shared .split-line rule, which forced every line to fill the box and made align-items irrelevant */
}

.dynamics-half--content {
    container-type: size;
    order: -1;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(12px, 2svh, 20px);
    color: var(--dynamics-content-left-color);
}

.dynamics-title {
    font-family: var(--font-outfit);
    font-weight: 700;
    letter-spacing: 0.02em;
    font-size: var(--fs-title);
    color: #111111;
    margin: 0;
    text-align: center;
    width: 70%;
    max-width: 70%;
}

.dynamics-body {
    font-family: var(--font-outfit);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.4;
    color: #5a5a5a;
    margin: 0;
    text-align: center;
    width: 70%;
    max-width: 70%;
    overflow-wrap: break-word;
}

.dynamics-body .word {
    display: inline-block;
}


/* ================================================================
   BREAKPOINTS — mirrors .section-intro's tall/portrait tiers
================================================================ */

@media (max-aspect-ratio: 1/1) {
    .dynamics-pair {
        flex-direction: column;
    }
    .dynamics-half--banner {
        flex: 0.8;
        /* was: 1.2 — smaller box means less empty space around 4 lines of text */
        justify-content: flex-end;
    }
    .dynamics-banner {
        align-items: flex-end;
        justify-content: flex-start;
        /* ADD — was inheriting center/safe center from the base rule; top-anchors the banner text instead of centering it in its box */
        text-align: right;
        transform: none;
    }
    .dynamics-banner .split-line {
        justify-content: flex-end;
    }
    .dynamics-half--content {
        width: 100%;
        justify-content: flex-start;
        align-items: center;
        flex: 0.5;
        order: 0;
    }
    .dynamics-title {
        text-align: center;
        width: auto;
        max-width: 100%;
    }
    .dynamics-body {
        text-align: center;
        width: 85%;
        /* was: auto, shared with title */
        max-width: 85%;
        /* was: 100% */
    }
}

@media (max-aspect-ratio: 1/1) and (max-width: 375px) {
    .dynamics-pair {
        padding-bottom: calc(var(--header-h) / 2);
    }
    .dynamics-half--banner {
        justify-content: flex-end;
    }
    .dynamics-half--content {
        padding-bottom: var(--pill-clearance);
    }
    .dynamics-body {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-aspect-ratio: 1/1) and (max-width: 1000px) {
    .dynamics-banner {
        margin-top: 7.5%;
    }
}

@media (max-aspect-ratio: 1/1) and (max-width: 375px) {
    .dynamics-banner {
        margin-top: 0%;
    }
}

@media (orientation: landscape) and (max-height: 480px) {
    .dynamics-banner {
        justify-content: center;
        align-items: flex-end;
        width: 100%;
    }
    .dynamics-pair {
        padding-top: calc(var(--navbar-h) * 0.4);
    }
    .dynamics-half--banner {
        flex: 0.5;
    }
    .dynamics-half--content {
        flex: 1.5;
        align-items: center;
    }
    .dynamics-title {
        width: 100%;
        max-width: 100%;
    }
    .dynamics-body {
        width: 75%;
        max-width: 75%;
    }
}

@media (orientation: landscape) and (max-height: 375px) {
    .dynamics-banner {
        margin-right: -80px;
    }
    .dynamics-body {
        width: 90%;
        max-width: 90%;
    }
}


/* ================================================================
   OUTPUT SECTION
   --------------------------------------------------------------------------
   The "Output" page section: shared title/subtitle header above a
   pinned panel with a left/right layout, reusing Dynamics' text-pair
   structure — a hardcoded app card on one side, a decorative heading
   on the other — side by side when width ≥ height, stacked when
   height > width.

   JS/GSAP owns: measuring the card's available space to size it via
   --output-app-card-aspect-ratio, splitting the heading into lines,
   and building the pinned scroll timeline that reveals the header,
   slides in the content panel, and fades/reveals the card and
   heading. JS only adds `.js-ready` to #output-root once that
   timeline is confirmed built without error — only then do this
   section's masks and content panel switch into their "hidden until
   animated" state. If GSAP/JS fails at any point, #output-root never
   gets `.js-ready`, and the section instead renders as a plain,
   fully visible, static layout — see the Fail-Safe block below.
================================================================ */


/* ── Fail-Safe: hidden-until-animated states ──────────────────────
   Every rule in this block only applies once JS has added `.js-ready`
   to #output-root, confirming the GSAP scroll timeline for this
   section was built successfully. Until then, none of this section's
   text or content panel is hidden — everything renders in its plain,
   readable, static form. */

#output-root.js-ready .title-char {
    opacity: 0;
    transform: translateY(105%);
}

#output-root.js-ready .sub-char {
    opacity: 0;
    transform: scale(1.15);
}

#output-root.js-ready .word,
#output-root.js-ready .char {
    opacity: 0;
}

#output-root.js-ready .output-card {
    opacity: 0;
    transform: scale(0.85);
}

#output-root.js-ready .output-section .section-header-area {
    opacity: 0;
    transform: translateY(100%);
}

.output-section .output-sliding-area {
    opacity: 1 !important;
}


/* ── General Structure & Typography ─────────────────────────────── */

#output-root {
    background-color: transparent;
    width: 100%;
    height: 100svh;
    display: flex;
    flex-direction: column;
    z-index: 30;
    position: relative;
    overflow: hidden;
}

.output-section .output-sliding-area {
    background-color: transparent;
    overflow: hidden;
}

#output-root .word,
#output-root .char {
    display: inline-block;
    white-space: pre;
}

#output-root .output-heading .char {
    opacity: 1;
}

.output-pairs-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.output-section .output-slogan-side {
    color: var(--output-app-card-text-color-primary);
}

.output-section .output-card-side {
    color: var(--output-title-color);
}


/* ── App Card (left-side) ───────────────────────────────────────── */

.output-pair {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: visible;
}

.output-side {
    display: flex;
    flex-direction: column;
}

.output-heading {
    font-family: var(--font-bebas) !important;
    font-weight: 300;
    letter-spacing: 2px;
    line-height: 1.0;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
}

.output-heading .output-line {
    display: block;
}

#output-root .output-card,
#output-root .output-card--sealed {
    position: relative;
    align-self: center;
    flex: 0 0 auto;
    width: clamp(240px, 34vw, 380px);
    min-width: 240px;
    max-width: 380px;
    height: auto;
    max-height: min(70svh, 460px);
    border-radius: 16px;
    background: linear-gradient(155deg, #1a1a1c 0%, #0f0f11 100%);
    border: 1px solid rgba(225, 202, 150, 0.12);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
    pointer-events: auto;
    transform-origin: center center;
}

#output-root .output-card-inner {
    color: #F5F5F5;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: clamp(20px, 4svh, 40px);
    gap: clamp(4px, 0.8svh, 10px);
    overflow: hidden;
    min-height: 0;
}

.output-card-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow: hidden;
}

.output-card-bottom {
    margin-top: clamp(24px, 6svh, 64px);
}

.output-card-order {
    font-family: var(--font-outfit);
    letter-spacing: 0.2em;
    color: #E1CA96;
    opacity: 0.5;
    font-size: clamp(0.7rem, 1.1svh, 0.9rem);
}

.output-concept-tag {
    font-family: var(--font-outfit);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #E1CA96;
    opacity: 0.6;
    font-size: clamp(0.7rem, 1.1svh, 0.9rem);
    margin-bottom: clamp(6px, 1.6svh, 20px);
}

.output-app-title {
    font-family: var(--font-outfit);
    font-weight: 900;
    line-height: 0.85;
    font-size: clamp(1.6rem, 4.5svh, 2.8rem);
    margin-bottom: clamp(4px, 0.8svh, 10px);
}

.output-app-desc {
    font-family: var(--font-outfit);
    color: #8a8a8a;
    font-size: clamp(0.8rem, 1.2svh, 0.95rem);
    line-height: 1.5;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    max-height: 7.5em;
}

.output-cta-btn {
    font-family: var(--font-outfit);
    text-transform: uppercase;
    width: 100%;
    cursor: pointer;
    pointer-events: auto;
    border-radius: 10px;
    text-align: center;
    display: flex;
    justify-content: center;
    background: #E1CA96;
    border: 1px solid #E1CA96;
    color: #0f0f11;
    transition: filter 0.3s, transform 0.3s, box-shadow 0.3s;
    font-size: clamp(0.75rem, 1.1svh, 0.95rem);
    padding: clamp(10px, 1.5svh, 14px) clamp(16px, 2.5svh, 28px);
    letter-spacing: 1.4px;
}

.output-cta-btn:hover {
    filter: brightness(0.92);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(225, 202, 150, 0.4);
}


/* ── Adaptive Text-Pair Layout ───────────────────────────────────── */

.output-pair {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5%;
    padding: 0 7%;
}

.output-card-side {
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
}

.output-slogan-side {
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
}

.output-heading {
    font-size: var(--fs-banner);
    align-items: flex-start;
    text-align: left;
}

#output-root .output-heading .output-line:nth-child(odd),
#output-root .output-heading .output-line:nth-child(even) {
    color: #111111;
}

#output-root .output-card--sealed {
    display: none;
}

#output-root.js-ready .output-card--sealed {
    opacity: 0;
    transform: scale(0.85);
}

.output-sealed-inner {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: clamp(14px, 2.5svh, 28px);
    padding: clamp(24px, 5svh, 48px);
    padding-top: clamp(40px, 8svh, 72px);
    box-sizing: border-box;
    text-align: left;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.output-sealed-heading {
    display: flex;
    flex-direction: column;
    line-height: 0.9;
}

.output-sealed-heading-line {
    font-family: var(--font-bebas);
    font-size: clamp(2rem, 8svh, 4.5rem);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: #F5F5F5;
    font-weight: 900;
}

.output-sealed-sub {
    font-family: var(--font-outfit);
    font-size: clamp(0.8rem, 1.3svh, 1rem);
    line-height: 1.5;
    color: #f5f5f5;
    opacity: 0.75;
}

@media (min-width: 1920px) {
    .output-sealed-sub {
        font-size: 1.15rem;
    }
}

@media (max-aspect-ratio: 1/1) {
    .output-pair {
        flex-direction: row;
        padding: 0 7%;
        justify-content: center;
        align-items: center;
    }
    .output-card-side {
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
    }
    .output-slogan-side {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0;
    }
    .output-slogan-side {
        display: none;
    }
    .output-heading {
        line-height: 1.3;
        align-items: center;
        text-align: center;
        width: 100%;
    }
    #output-root .output-card,
    #output-root .output-card--sealed {
        width: clamp(220px, 68vw, 340px);
        max-width: 340px;
        height: auto;
        max-height: min(60svh, 400px);
    }
    #output-root .output-card-inner {
        padding: clamp(18px, 4vw, 32px);
        gap: clamp(4px, 1vw, 10px);
    }
    .output-card-order {
        font-size: clamp(0.65rem, 1.8vw, 0.85rem);
    }
    .output-concept-tag {
        font-size: clamp(0.65rem, 1.8vw, 0.85rem);
        margin-bottom: clamp(6px, 2vw, 16px);
    }
    .output-app-title {
        font-size: clamp(1.4rem, 6vw, 2.2rem);
        margin-bottom: clamp(4px, 1vw, 10px);
    }
    .output-app-desc {
        font-size: clamp(0.75rem, 2vw, 0.9rem);
        line-height: 1.4;
    }
    .output-cta-btn {
        font-size: clamp(0.7rem, 1.8vw, 0.85rem);
        padding: clamp(9px, 2vw, 12px) clamp(14px, 3vw, 24px);
        letter-spacing: 1.2px;
    }
    .output-sealed-heading-line {
        font-size: clamp(1.8rem, 9vw, 3.2rem);
    }
    .output-sealed-sub {
        font-size: clamp(0.75rem, 2.2vw, 0.9rem);
    }
}

@media (orientation: landscape) and (max-height: 480px) {
    .output-pair {
        padding-top: calc(var(--navbar-h) * 0.4);
    }
    .output-slogan-side {
        flex: 0.5;
    }
    .output-card-side {
        flex: 1.5;
        align-items: center;
    }
    .output-heading {
        justify-content: center;
        align-items: flex-start;
        width: 100%;
    }
    #output-root .output-card,
    #output-root .output-card--sealed {
        width: clamp(260px, 42vw, 420px);
        min-width: 220px;
        max-width: 420px;
        max-height: min(75svh, 220px);
    }
    #output-root .output-card-inner {
        padding: clamp(10px, 2svh, 14px);
        gap: clamp(2px, 0.4svh, 4px);
    }
    .output-card-top {
        display: block;
    }
    .output-card-order,
    .output-concept-tag {
        display: inline-block;
        color: #E1CA96;
        opacity: 0.85;
        margin-right: 8px;
        margin-bottom: 8px;
        font-size: clamp(0.5rem, 2.6svh, 0.65rem);
    }
    .output-app-desc,
    .output-sealed-sub {
        color: #8a8a8a;
    }
    .output-concept-tag {
        margin-bottom: clamp(4px, 1svh, 10px);
    }
    .output-app-title {
        font-size: clamp(1.1rem, 6svh, 1.8rem);
        margin-bottom: clamp(8px, 2svh, 14px);
    }
    .output-app-desc {
        font-size: clamp(0.65rem, 3svh, 0.8rem);
        line-height: 1.35;
        max-height: 4.5em;
    }
    .output-cta-btn {
        font-size: clamp(0.6rem, 3svh, 0.75rem);
        padding: clamp(6px, 1.5svh, 10px) clamp(10px, 2svh, 18px);
    }
    .output-card-bottom {
        margin-top: clamp(6px, 1.5svh, 12px);
    }
    .output-sealed-heading-line {
        font-size: clamp(1.4rem, 7svh, 2.6rem);
    }
    .output-sealed-sub {
        font-size: clamp(0.65rem, 3svh, 0.8rem);
    }
    .output-sealed-inner {
        gap: clamp(8px, 2svh, 16px);
        padding: clamp(14px, 3.5svh, 28px);
        padding-top: clamp(24px, 5svh, 40px);
    }
}

@media (orientation: landscape) and (max-height: 320px) {
    .output-pair {
        padding-top: calc(var(--navbar-h) * 0.6);
    }
}


/* ================================================================
   CONTACT SECTION
================================================================ */


/* ── Local Design Tokens ───────────────────────────────────────── */

#contact-root {
    --contact-bg: #000000;
    --contact-header-bg: #0466c8;
    --contact-text-primary: #FFFFFF;
    --contact-card-bg: #1d1d1d;
    --contact-text-muted: #929292;
}


/* ── Fail-Safe: hidden-until-animated states ──────────────────────
   Only applies once JS has added .js-ready to #contact-root,
   confirming the GSAP scroll timeline built successfully. Until
   then, everything renders in its plain, readable, static form. */

#contact-root.js-ready .title-char {
    opacity: 0;
    transform: translateY(105%);
}

#contact-root.js-ready .sub-char {
    opacity: 0;
    transform: scale(1.15);
}

#contact-root.js-ready .section-contact .section-header-area {
    opacity: 0;
    transform: translateY(100%);
}

#contact-root.js-ready .contact-email-card {
    opacity: 0;
    transform: scale(0.85);
}

#contact-root.js-ready .email-char {
    opacity: 0;
}

#contact-root.js-ready .email-underline {
    transform: scaleX(0);
}

#contact-root.js-ready .social-word {
    opacity: 0;
}


/* ── General Structure ─────────────────────────────────────────── */

#contact-root {
    background-color: transparent;
    color: var(--text-primary);
    width: 100%;
    height: 100svh;
    display: flex;
    flex-direction: column;
    z-index: 10;
    position: relative;
    overflow: hidden;
}

.section-contact .contact-content-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--content-h);
    padding-top: var(--navbar-h);
    padding-bottom: calc(var(--navbar-h) / 2);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ── Content ────────────────────────────────────────────────────── */

.contact-wrap {
    container-type: size;
    width: min(90%, 900px);
    min-height: clamp(220px, 45svh, 440px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(16px, 10svh, 28px);
}


/* ── Email Card — matches Info's card language (bg, radius, padding) */

.contact-email-card {
    width: 100%;
    max-width: 560px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(155deg, #1a1a1c 0%, #0f0f11 100%);
    border: 1px solid rgba(225, 202, 150, 0.12);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    padding: clamp(28px, 6svh, 48px) clamp(20px, 4vw, 36px);
}

.email-wrap {
    position: relative;
    display: inline-block;
}

.email-link {
    font-family: var(--font-outfit);
    font-weight: 800;
    /* font-size: clamp(1rem, 9cqh, 1.6rem); */
    font-size: var(--page-email);
    line-height: 1.4;
    color: #E1CA96;
    text-decoration: none;
    position: relative;
    display: inline-block;
}

.email-underline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #E1CA96;
    transform-origin: left;
}

.contact-social-note {
    font-family: var(--font-outfit);
    font-weight: 400;
    font-size: var(--page-social);
    line-height: 1.5;
    color: var(--contact-text-muted);
    margin: 0;
    max-width: 760px;
}


/* ================================================================
   LANDSCAPE / LAPTOP — 1001–1440px
   No aspect-ratio condition — catches both portrait iPad Pro—width
   devices AND landscape laptops at this width, same fix as Info's
   equivalent tier.
================================================================ */

@media (min-width: 1001px) and (max-width: 1440px) {
    .email-link {
        font-size: clamp(1rem, 10cqh, 1.75rem);
    }
    .contact-social-note {
        font-size: clamp(0.85rem, 6cqh, 1.15rem);
    }
}


/* ================================================================
   TALL / PORTRAIT — 1001–1440px tall
================================================================ */

@media (max-aspect-ratio: 1/1) and (min-width: 1001px) and (max-width: 1440px) {
    .email-link {
        font-size: clamp(1rem, 10cqh, 1.75rem);
    }
    .contact-social-note {
        font-size: clamp(0.9rem, 6cqh, 1.2rem);
    }
}


/* ================================================================
   TALL / PORTRAIT — 701–1000px tall
================================================================ */

@media (max-aspect-ratio: 1/1) and (min-width: 701px) and (max-width: 1000px) {
    .email-link {
        font-size: clamp(1rem, 8.5cqh, 1.45rem);
    }
    .contact-social-note {
        font-size: clamp(0.88rem, 6cqh, 1.05rem);
    }
}


/* ================================================================
   MOBILE — 376–700px tall
================================================================ */

@media (max-aspect-ratio: 1/1) and (min-width: 376px) and (max-width: 700px) {
    .email-link {
        font-size: clamp(1rem, 9cqh, 1.5rem);
    }
    .contact-social-note {
        font-size: clamp(0.85rem, 7cqh, 1.0625rem);
    }
}


/* ================================================================
   MOBILE — 321–375px tall
================================================================ */

@media (max-aspect-ratio: 1/1) and (min-width: 321px) and (max-width: 375px) {
    .email-link {
        font-size: clamp(1.15rem, 10cqh, 1.25rem);
    }
    .contact-social-note {
        font-size: clamp(0.8125rem, 3cqh, 0.875rem);
    }
}


/* ================================================================
   MOBILE — ≤320px tall
================================================================ */

@media (max-aspect-ratio: 1/1) and (max-width: 320px) {
    .email-link {
        font-size: clamp(0.9rem, 9cqh, 1.0625rem);
    }
    .contact-social-note {
        font-size: clamp(0.7rem, 4.5cqh, 0.95rem);
    }
}

@media (orientation: landscape) and (max-height: 480px) {
    .section-contact .contact-content-area {
        align-items: flex-start;
        padding-top: var(--navbar-h);
    }
    .contact-wrap {
        margin-top: calc(var(--navbar-h) * 0.5);
        min-height: auto;
        gap: clamp(10px, 4svh, 16px);
    }
    .contact-email-card {
        padding: clamp(14px, 3svh, 22px) clamp(16px, 4vw, 28px);
    }
}

@media (orientation: landscape) and (max-height: 350px) {
    .contact-wrap {
        margin-top: calc(var(--navbar-h) * 0.25);
    }
}


/* ================================================================
   INFORMATION SECTION — BENTO GRID
   --------------------------------------------------------------------------
   Reuses Origin's bento-grid mechanism (fixed grid, container-query
   sized text, click-to-modal for full content) but under its own
   `info-` prefix throughout — no shared class names with Origin, so
   changes to either section never cross-contaminate the other.
================================================================ */


/* ── Local Design Tokens ───────────────────────────────────────── */

#info-root {
    --info-bg: #000000;
    --info-header-bg: #0466c8;
    --info-card-bg: #1d1d1d;
    --info-text-primary: #FFFFFF;
    --info-text-question: #F5F5F5;
    --info-text-answer: #757474;
    --info-icon-color: #aaaaaa;
    --info-accent: var(--identity-mission-background-color);
}


/* ── Fail-Safe: hidden-until-animated states ──────────────────────
   Every rule in this block only applies once JS has added `.js-ready`
   to #origin-root, confirming the GSAP scroll timeline for this
   section was built successfully. Until then, everything renders in
   its plain, readable, static form. */

#info-root.js-ready .title-char {
    opacity: 0;
    transform: translateY(105%);
}

#info-root.js-ready .sub-char {
    opacity: 0;
    transform: scale(1.15);
}

#info-root.js-ready .section-info .section-header-area {
    opacity: 0;
    transform: translateY(100%);
}

#info-root.js-ready .info-card {
    opacity: 0;
    transform: scale(0.85);
}


/* ── General Structure ─────────────────────────────────────────── */

#info-root {
    background-color: transparent;
    color: var(--text-primary);
    width: 100%;
    height: 100svh;
    display: flex;
    flex-direction: column;
    z-index: 10;
    position: relative;
    overflow: hidden;
}

.section-info .info-content-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--content-h);
    padding-top: var(--navbar-h);
    padding-bottom: calc(var(--navbar-h) / 2);
    box-sizing: border-box;
}


/* ================================================================
   BENTO GRID
================================================================ */

.info-bento-grid {
    display: grid;
    height: 100%;
    width: 90%;
    transform: translateX(5%);
    padding: 0 5%;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 0.5fr) minmax(0, 0.5fr) minmax(0, 1fr);
    gap: clamp(6px, 1vw, 12px);
    grid-template-areas: "clients privacy privacy platforms""clients updates updates platforms""hiring updates updates broke""hiring free free broke";
}

.info-card {
    container-type: size;
    position: relative;
    all: unset;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: clamp(8px, 1.5svh, 16px);
    min-height: 0;
    min-width: 0;
    padding: clamp(10px, 2svh, 18px);
    background: linear-gradient(155deg, #1a1a1c 0%, #0f0f11 100%);
    border: 1px solid rgba(225, 202, 150, 0.12);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
    color: var(--information-faq-question-color);
    cursor: pointer;
    overflow: hidden;
}

.info-card:hover,
.info-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(225, 202, 150, 0.35);
    box-shadow: 0 28px 50px -18px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(225, 202, 150, 0.08);
}

.info-card:focus-visible {
    outline: 2px solid var(--information-faq-question-color);
    outline-offset: 2px;
}

.info-card::after {
    content: "\2191";
    position: absolute;
    top: clamp(8px, 1.5svh, 14px);
    right: clamp(8px, 1.5svh, 14px);
    width: clamp(22px, 3svh, 30px);
    height: clamp(22px, 3svh, 30px);
    box-sizing: border-box;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-outfit);
    font-size: clamp(12px, 1.8svh, 16px);
    color: var(--information-faq-question-color);
    transform: rotate(30deg);
    pointer-events: none;
    z-index: 2;
}


/* ── Click-Gating (scrubbed reveal safety) ────────────────────── */

.info-bento-grid .info-card {
    pointer-events: none;
}

#info-root.info-cards-active .info-card {
    pointer-events: auto;
}


/* ── Icon, Question & Answer — sized off each card's own
   container dimensions, not the viewport ─────────────────────── */

.info-card-icon {
    font-size: clamp(0.875rem, 6cqh, 1.625rem);
    color: #929292;
    flex-shrink: 0;
}

.info-card-q {
    font-family: var(--font-outfit);
    font-weight: 700;
    font-size: clamp(1rem, 6cqh, 1.35rem);
    color: #E1CA96;
}

.info-card-a {
    font-family: var(--font-outfit);
    font-weight: 400;
    font-size: clamp(1rem, 6cqh, 1.15rem);
    line-height: 1.4;
    color: #757474;
    margin: 0;
    min-height: 0;
    max-height: 5.6em;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.info-card-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: 0;
}

.info-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}


/* ── Grid Placement (per-card, unchanged) ──────────────────────── */

.info-card--free {
    grid-area: free;
}

.info-card--privacy {
    grid-area: privacy;
}

.info-card--platforms {
    grid-area: platforms;
}

.info-card--updates {
    grid-area: updates;
}

.info-card--clients {
    grid-area: clients;
}

.info-card--hiring {
    grid-area: hiring;
}

.info-card--broke {
    grid-area: broke;
}

.info-card--privacy .info-card-head,
.info-card--free .info-card-head,
.info-card--updates .info-card-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 0;
}

.info-card-a-brief {
    display: none;
    /* hidden outside tall tiers */
}


/* ── Mobile / Tall Layout ──────────────────────────────────────── */

@media (max-aspect-ratio: 1/1) {
    .info-bento-grid {
        width: 100%;
        transform: translateX(0%);
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
        grid-template-areas: "clients free""privacy privacy""hiring platforms""broke updates";
        padding: 0 5%;
        gap: 2%;
    }
    .info-card {
        height: 100%;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
        padding-right: clamp(36px, 8cqw, 48px);
    }
    .info-card-head {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        min-height: 0;
    }
    .info-card-content {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;
    }
    .info-card-icon {
        font-size: clamp(0.8rem, 2cqh, 1.2rem);
    }
    .info-card-q {
        font-size: clamp(0.7rem, 2cqh, 1.275rem);
        text-align: left;
        color: #E1CA96;
    }
    .info-card-a-brief {
        display: -webkit-box;
        font-family: var(--font-outfit);
        font-weight: 600;
        font-size: clamp(0.7rem, 2cqh, 1.275rem);
        line-height: 1.4;
        color: #F5F5F5;
        margin: 0;
        text-align: left;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .info-card-a {
        display: -webkit-box;
        font-family: var(--font-outfit);
        font-weight: 400;
        font-size: clamp(0.7rem, 2cqh, 1rem);
        line-height: 1.4;
        color: #757474;
        margin: 8px 0 0;
        text-align: left;
        -webkit-line-clamp: var(--info-a-lines, 2);
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Restore + fix the expand badge (was invisible due to an
       undefined var, and previously force-hidden here) */
    .info-card::after {
        color: #FFFFFF;
    }
}


/* ── Landscape / Laptop — 1001–1440px (no aspect-ratio gate) ─────── */

@media (min-width: 1001px) and (max-width: 1440px) {
    .info-card-icon {
        font-size: clamp(0.75rem, 4.5cqh, 1.2rem);
    }
    .info-card-q {
        font-size: clamp(0.875rem, 4.5cqh, 1.0625rem);
    }
    .info-card-a-brief {
        font-size: clamp(0.875rem, 4.5cqh, 1.0625rem);
        -webkit-line-clamp: 1;
    }
    .info-card-a {
        font-size: clamp(0.8125rem, 4cqh, 0.9375rem);
        -webkit-line-clamp: var(--info-a-lines, 2);
    }
}


/* ── Tall — 701–1000px ─────────────────────────────────────────── */

@media (max-aspect-ratio: 1/1) and (min-width: 701px) and (max-width: 1000px) {
    .info-card-icon {
        font-size: clamp(1.125rem, 4.5cqh, 1.5rem);
    }
    .info-card-q {
        font-size: clamp(0.875rem, 3.5cqh, 1rem);
    }
    .info-card-a-brief {
        font-size: clamp(0.875rem, 3.5cqh, 1rem);
    }
    .info-card-a {
        font-size: clamp(0.8125rem, 3cqh, 0.9375rem);
        -webkit-line-clamp: var(--info-a-lines, 1);
    }
}

@media (max-aspect-ratio: 1/1) and (min-width: 376px) and (max-width: 700px) {
    .info-card-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .info-card-icon {
        font-size: clamp(1.0625rem, 4cqh, 1rem);
    }
    .info-card-q {
        font-size: clamp(0.8125rem, 3cqh, 1.0625rem);
    }
    .info-card-a-brief {
        color: #757474;
        font-size: clamp(0.8125rem, 3cqh, 0.9375rem);
    }
    .info-card-a {
        display: none;
    }
}

@media (max-aspect-ratio: 1/1) and (min-width: 321px) and (max-width: 375px) {
    .info-card-icon {
        font-size: clamp(1rem, 4cqh, 1rem);
    }
    .info-card-q {
        font-size: clamp(0.8125rem, 3cqh, 0.9375rem);
    }
    .info-card-a-brief {
        color: #757474;
        font-size: clamp(0.8125rem, 3cqh, 0.875rem);
    }
    .info-card-a {
        display: none;
    }
}

@media (max-aspect-ratio: 1/1) and (max-width: 320px) {
    .info-card-a-brief {
        color: #757474;
        -webkit-line-clamp: 1;
    }
    .info-card-a {
        display: none;
    }
}

@media (orientation: landscape) and (max-height: 480px) {
    .info-card {
        padding: clamp(6px, 1.5svh, 10px);
        gap: clamp(4px, 1svh, 8px);
    }
    .info-card-icon {
        font-size: clamp(0.65rem, 3.5cqh, 0.9rem);
    }
    .info-card-a-brief,
    .info-card-a,
    .info-card::after {
        display: none;
    }
    .info-card-q {
        display: inline;
        font-size: clamp(0.65rem, 3.2cqh, 0.85rem);
    }
}


/* ── Modal ─────────────────────────────────────────────────────── */

.info-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
}

.info-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.info-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.info-modal-panel {
    position: relative;
    max-width: 480px;
    width: min(90vw, 480px);
    background: #1d1d1d;
    color: var(--information-faq-question-color);
    border-radius: 20px;
    padding: clamp(24px, 5svh, 40px);
    transform: scale(0.92);
    transition: transform 0.25s ease;
}

.info-modal.is-open .info-modal-panel {
    transform: scale(1);
}

.info-modal-close {
    all: unset;
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #000000;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
}

.info-modal-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
}

.info-modal-icon {
    display: block;
    font-size: 28px;
    margin-bottom: 16px;
    color: #757474;
}

.info-modal-q {
    font-family: var(--font-outfit);
    font-weight: 700;
    font-size: clamp(1rem, 4svh, 1.35rem);
    color: #757474;
    margin: 0 0 12px;
}

.info-modal-a-brief {
    font-family: var(--font-outfit);
    font-weight: 600;
    font-size: clamp(1rem, 4svh, 1.15rem);
    line-height: 1.5;
    color: #FFFFFF;
    margin: 10px 0 20px;
}

.info-modal-a {
    font-family: var(--font-outfit);
    font-weight: 400;
    font-size: clamp(1rem, 4svh, 1.15rem);
    line-height: 1.6;
    color: #757474;
    margin: 0;
}


/* ================================================================
   FOOTER
================================================================ */

:root {
    --footer-bg: #0a090c;
    --footer-accent: #E1CA96;
    --footer-text-primary: #F5F5F5;
    --footer-text-muted: #8a8a8a;
    --footer-border: rgba(225, 202, 150, 0.15);
}


/* ── Fail-Safe: hidden-until-animated states ──────────────────────
   Every rule in this block only applies once JS has added `.js-ready`
   to #origin-root, confirming the GSAP scroll timeline for this
   section was built successfully. Until then, everything renders in
   its plain, readable, static form. */

#footer.js-ready .footer-bg-fade {
    opacity: 0;
}

#footer.js-ready .footer-hero-line .title-char {
    opacity: 0;
    transform: translateY(105%);
}

#footer.js-ready .footer-block--4 {
    opacity: 0;
    transform: translateY(12px);
}


/* ── General Structure ────────────────────── */

#footer {
    background: transparent;
    color: var(--footer-text-primary);
    width: 100%;
    height: 100svh;
    max-height: 100svh;
    box-sizing: border-box;
    padding: calc(var(--navbar-h)) 5% 5%;
    display: flex;
    flex-direction: column;
    margin-top: 1px;
    overflow: hidden;
    position: relative;
}

.footer-bg-fade {
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    bottom: -2px;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    background: var(--footer-bg);
}

.footer-block {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.footer-block--1 {
    container-type: size;
    flex: 0 0 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.footer-hero-line {
    font-family: var(--font-bebas);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-size: clamp(1.5rem, 32cqh, 5.5rem);
    line-height: 0.95;
    margin: 0;
    color: var(--footer-text-primary);
}

.footer-hero-line--accent {
    color: var(--footer-accent);
}

.footer-block--2,
.footer-block--3 {
    container-type: size;
    flex: 0 0 32.5%;
    display: flex;
    align-items: center;
}

.footer-block--3 {
    align-items: flex-start;
}

.footer-chip-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.footer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-content: center;
}

.footer-chip {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border: 1px solid var(--footer-border);
    border-radius: 999px;
    font-family: var(--font-outfit);
    font-size: var(--page-subtitle);
    font-weight: 500;
    color: var(--footer-text-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.footer-chip:hover {
    background: var(--footer-accent);
    border-color: var(--footer-accent);
    color: var(--footer-bg);
}

.footer-chip--external {
    color: var(--footer-text-muted);
}

.footer-block--4 {
    flex: 0 0 15%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    container-type: size;
}

.footer-tagline,
.footer-copyright {
    font-family: var(--font-outfit);
    font-size: var(--page-subtitle);
    color: var(--footer-text-muted);
    margin: 0;
    line-height: 1.6;
}

.footer-hero-line .title-mask-wrap {
    overflow: hidden;
    display: inline-block;
}

#footer.js-ready .footer-block--2 .footer-chip,
#footer.js-ready .footer-block--3 .footer-chip {
    opacity: 0;
    transform: scale(0.4);
}

@media (orientation: landscape) and (max-height: 480px) {
    .footer-tagline-break {
        display: none;
    }
    .footer-tagline-part:first-child::after {
        content: " · ";
    }
}