/**
 * AeroRegis Theme — main.css
 *
 * @package     AeroRegis
 * @version     1.0.1
 *
 * CHANGES FROM 1.0.0
 * ------------------
 * - var(--font-condensed) replaced with 'Barlow Condensed', sans-serif (was undefined)
 * - .use-case-content mobile border corrected: border-top instead of border-left when stacked
 * - Duplicate @media (max-width: 768px) block merged — single consolidated block
 * - Nav hamburger styles moved into Section 3 (global base) + Section 31 (mobile activation)
 *
 * TABLE OF CONTENTS
 * -----------------
 *  1.  CSS Custom Properties (Design Tokens)
 *  2.  Reset & Base
 *  3.  Navigation
 *  4.  Canvas Background
 *  5.  Hero — Static
 *  6.  Hero — Video (vhero)
 *  7.  Marquee Strip
 *  8.  Shared Utilities
 *  9.  Problem Section
 * 10.  Solution Section
 * 11.  Movement Section
 * 12.  Use Cases & Tabs
 * 13.  Audiences Section
 * 14.  Philosophy Section
 * 15.  Urgency / CTA Section
 * 16.  Footer
 * 17.  Animations & Keyframes
 * 18.  Scroll Reveal
 * 19.  Modal & Form
 * 20.  Platform Preview Section
 * 21.  Video Section
 * 22.  Vertiport Section
 * 23.  Vertiport — Aerial Image
 * 24.  Capability Grid (Vertiport variant)
 * 25.  Economic Impact Bar
 * 26.  Phases Header
 * 27.  Workforce Pipeline
 * 28.  Logo Mark Watermarks
 * 29.  Responsive — 1024px
 * 30.  Responsive — 960px
 * 31.  Responsive — 768px (includes Mobile Nav)
 * 32.  Responsive — 640px
 * 33.  Responsive — 480px
 * 34.  Blog Archive
 * 35.  Blog Single Post
 * 36.  Blog Responsive
 */


/* =============================================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================================= */

:root {
    --black:  #04080F;
    --navy:   #0A1628;
    --navy2:  #0F2040;
    --gold:   #C9A84C;
    --gold2:  #E8C96A;
    --cyan:   #00C8FF;
    --white:  #EEF2FF;
    --gray:   #7A8498;
    --gray2:  #3A4459;
    --red:    #C0392B;
}


/* =============================================================================
   2. RESET & BASE
   ============================================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    background:   var(--black);
    color:        var(--white);
    font-family:  'Barlow', sans-serif;
    font-weight:  300;
    overflow-x:   hidden;
}


/* =============================================================================
   3. NAVIGATION
   ============================================================================= */

nav {
    position:        fixed;
    top:             0;
    left:            0;
    right:           0;
    z-index:         100;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         16px 60px;
    transition:      all .4s;
    background:      #000000;
    border-bottom:   2px solid var(--gold);
}

nav.scrolled {
    background:    #000000;
    padding:       12px 60px;
    border-bottom: 2px solid var(--gold);
}

.nav-logo {
    display:         flex;
    align-items:     center;
    text-decoration: none;
    line-height:     0;
}

.nav-logo img {
    height:     60px    !important;
    max-height: 60px    !important;
    width:      auto    !important;
    max-width:  220px   !important;
    display:    block   !important;
}

.nav-links {
    display:    flex;
    gap:        40px;
    list-style: none;
}

.nav-links a {
    font-family:     'Barlow Condensed', sans-serif;
    font-size:       13px;
    font-weight:     500;
    letter-spacing:  .18em;
    text-transform:  uppercase;
    color:           rgba(238,242,255,.65);
    text-decoration: none;
    transition:      color .25s;
}

.nav-links a:hover {
    color: var(--gold);
}

.nav-cta {
    font-family:     'Barlow Condensed', sans-serif;
    font-size:       12px;
    font-weight:     600;
    letter-spacing:  .2em;
    text-transform:  uppercase;
    color:           var(--black);
    background:      var(--gold);
    padding:         10px 28px;
    text-decoration: none;
    clip-path:       polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
    transition:      background .25s;
    display:         inline-block;
}

.nav-cta:hover {
    background: var(--gold2);
}

/* Hamburger — global base styles, hidden on desktop */
.nav-hamburger {
    display:         none;
    flex-direction:  column;
    justify-content: space-between;
    width:           28px;
    height:          20px;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    padding:         0;
    z-index:         1001;
}

.nav-hamburger span {
    display:       block;
    width:         100%;
    height:        2px;
    background:    var(--white);
    border-radius: 2px;
    transition:    all 0.3s ease;
}

.nav-hamburger.is-open span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.nav-hamburger.is-open span:nth-child(2) {
    opacity: 0;
}

.nav-hamburger.is-open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}


/* =============================================================================
   4. CANVAS BACKGROUND
   ============================================================================= */

#bg-canvas {
    position:       fixed;
    top:            0;
    left:           0;
    width:          100%;
    height:         100%;
    z-index:        0;
    opacity:        .6;
    pointer-events: none;
    touch-action:   none;
}

section {
    position: relative;
    z-index:  1;
}


/* =============================================================================
   5. HERO — STATIC
   ============================================================================= */

#hero {
    position:        relative;
    min-height:      100vh;
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
    padding:         160px 60px 100px;
    overflow:        hidden;
    background:
        linear-gradient(180deg, rgba(4,8,15,.72) 0%, rgba(4,8,15,.6) 40%, rgba(4,8,15,.94) 100%),
        url("https://aeroregis.com/wp-content/uploads/2026/03/Hero_Background.webp") center top / cover no-repeat;
}

.hero-content-wrap {
    position: relative;
    z-index:  1;
}

.hero-eyebrow {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .35em;
    text-transform: uppercase;
    color:          var(--gold);
    margin-bottom:  32px;
    display:        flex;
    align-items:    center;
    gap:            16px;
    opacity:        0;
    animation:      fadeUp .8s forwards .3s;
}

.hero-eyebrow::before {
    content:    '';
    display:    block;
    width:      40px;
    height:     1px;
    background: var(--gold);
}

.hero-headline {
    font-family:    'Cormorant Garamond', serif;
    font-size:      clamp(38px, 5.5vw, 80px);
    font-weight:    300;
    line-height:    .95;
    letter-spacing: -.01em;
    max-width:      900px;
}

.hero-headline .line {
    display:  block;
    overflow: hidden;
}

.hero-headline .line-inner {
    display:    block;
    opacity:    0;
    transform:  translateY(100%);
    animation:  slideUp .9s cubic-bezier(.16,1,.3,1) forwards;
}

.hero-headline .line:nth-child(1) .line-inner { animation-delay: .5s;  }
.hero-headline .line:nth-child(2) .line-inner { animation-delay: .65s; }
.hero-headline .line:nth-child(3) .line-inner { animation-delay: .8s;  }

.hero-headline em {
    font-style: italic;
    color:      var(--gold);
}

.hero-divider {
    width:      1px;
    height:     48px;
    background: linear-gradient(to bottom, var(--gold), transparent);
    margin:     28px 0;
    opacity:    0;
    animation:  fadeIn .8s forwards 1.4s;
}

.hero-sub {
    font-size:     17px;
    font-weight:   300;
    line-height:   1.7;
    color:         rgba(238,242,255,.78);
    max-width:     520px;
    margin-bottom: 52px;
    opacity:       0;
    animation:     fadeUp .8s forwards 1.5s;
}

.hero-actions {
    display:     flex;
    align-items: center;
    gap:         36px;
    opacity:     0;
    animation:   fadeUp .8s forwards 1.7s;
}

.btn-primary {
    font-family:     'Barlow Condensed', sans-serif;
    font-size:       13px;
    font-weight:     700;
    letter-spacing:  .22em;
    text-transform:  uppercase;
    color:           var(--black);
    background:      var(--gold);
    padding:         16px 44px;
    text-decoration: none;
    clip-path:       polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
    transition:      background .25s, transform .2s;
    display:         inline-block;
}

.btn-primary:hover {
    background: var(--gold2);
    transform:  translateY(-2px);
}

.btn-ghost {
    font-family:     'Barlow Condensed', sans-serif;
    font-size:       13px;
    font-weight:     500;
    letter-spacing:  .2em;
    text-transform:  uppercase;
    color:           var(--white);
    text-decoration: none;
    display:         flex;
    align-items:     center;
    gap:             10px;
    transition:      color .25s;
}

.btn-ghost:hover {
    color: var(--gray);
}

.hero-scroll-indicator {
    position:       absolute;
    right:          60px;
    bottom:         60px;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            12px;
    opacity:        0;
    animation:      fadeIn 1s forwards 2.2s;
}

.scroll-label {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      10px;
    font-weight:    500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color:          var(--gray);
    writing-mode:   vertical-rl;
}

.scroll-line {
    width:      1px;
    height:     60px;
    background: linear-gradient(to bottom, var(--gray2), transparent);
    position:   relative;
    overflow:   hidden;
}

.scroll-line::after {
    content:    '';
    position:   absolute;
    top:        -100%;
    left:       0;
    width:      100%;
    height:     100%;
    background: var(--gold);
    animation:  scrollLine 2s ease-in-out infinite 2.5s;
}


/* =============================================================================
   6. HERO — VIDEO (vhero)
   ============================================================================= */

.vhero {
    position:      relative;
    width:         100%;
    height:        90vh;
    min-height:    560px;
    max-height:    860px;
    overflow:      hidden;
    margin-bottom: 80px;
}

.vhero-video {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
}

.vhero-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to bottom,
        rgba(4,8,15,.25) 0%,
        rgba(4,8,15,.5)  50%,
        rgba(10,22,40,.97) 100%
    );
}

.vhero-content {
    position: absolute;
    bottom:   100px;
    left:     60px;
    right:    60px;
    z-index:  2;
}

.vhero-sub {
    font-size:   17px;
    line-height: 1.75;
    color:       rgba(238,242,255,.72);
    max-width:   680px;
}

.vhero-scroll-cue {
    position:        absolute;
    bottom:          36px;
    left:            50%;
    transform:       translateX(-50%);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             10px;
    z-index:         2;
    animation:       scrollBob 2.4s ease-in-out infinite;
}

.vhero-scroll-line {
    display:    block;
    width:      1px;
    height:     36px;
    background: linear-gradient(to bottom, var(--gold), transparent);
}

.vhero-scroll-label {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      9px;
    font-weight:    700;
    letter-spacing: .35em;
    text-transform: uppercase;
    color:          rgba(201,168,76,.6);
}


/* =============================================================================
   7. MARQUEE STRIP
   ============================================================================= */

.marquee-strip {
    border-top:    1px solid rgba(201,168,76,.2);
    border-bottom: 1px solid rgba(201,168,76,.2);
    background:    rgba(10,22,40,.6);
    padding:       18px 0;
    overflow:      hidden;
    white-space:   nowrap;
    position:      relative;
    z-index:       1;
}

.marquee-track {
    display:   inline-flex;
    animation: marquee 30s linear infinite;
}

.marquee-item {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      12px;
    font-weight:    500;
    letter-spacing: .25em;
    text-transform: uppercase;
    color:          var(--gray);
    padding:        0 60px;
}

.marquee-item span {
    color:        var(--gold);
    margin-right: 10px;
}


/* =============================================================================
   8. SHARED UTILITIES
   ============================================================================= */

.section-label {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .4em;
    text-transform: uppercase;
    color:          var(--gold);
    margin-bottom:  48px;
    display:        flex;
    align-items:    center;
    gap:            16px;
}

.section-label::before {
    content:    '';
    display:    block;
    width:      30px;
    height:     1px;
    background: var(--gold);
}


/* =============================================================================
   9. PROBLEM SECTION
   ============================================================================= */

#problem {
    padding: 160px 60px;
}

.problem-headline {
    font-family:   'Cormorant Garamond', serif;
    font-size:     clamp(36px, 5vw, 70px);
    font-weight:   300;
    line-height:   1.05;
    max-width:     800px;
    margin-bottom: 80px;
}

.problem-headline em {
    font-style: italic;
    color:      var(--gold);
}

.problem-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   2px;
    margin-bottom:         80px;
}

.problem-card {
    background:  rgba(15,32,64,.4);
    border:      1px solid rgba(58,68,89,.6);
    padding:     52px 48px;
    position:    relative;
    overflow:    hidden;
    transition:  border-color .3s, background .3s;
}

.problem-card::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    width:      3px;
    height:     0;
    background: var(--gold);
    transition: height .4s;
}

.problem-card:hover {
    border-color: rgba(201,168,76,.4);
    background:   rgba(15,32,64,.7);
}

.problem-card:hover::before {
    height: 100%;
}

.problem-num {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      72px;
    font-weight:    800;
    line-height:    1;
    color:          rgba(201,168,76,.12);
    position:       absolute;
    top:            24px;
    right:          32px;
    letter-spacing: -.02em;
}

.problem-title {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      20px;
    font-weight:    600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--white);
    margin-bottom:  20px;
}

.problem-text {
    font-size:   17px;
    line-height: 1.75;
    color:       rgba(238,242,255,.75);
}

.stat-row {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    border:                1px solid rgba(201,168,76,.2);
}

.stat-item {
    padding:    52px 40px;
    background: rgba(10,22,40,.5);
    text-align: center;
}

.stat-item + .stat-item {
    border-left: 1px solid rgba(201,168,76,.2);
}

.stat-number {
    font-family:   'Cormorant Garamond', serif;
    font-size:     80px;
    font-weight:   600;
    line-height:   1;
    color:         var(--gold);
    margin-bottom: 12px;
}

.stat-unit {
    font-size: 36px;
    color:     var(--gold2);
}

.stat-label {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      13px;
    font-weight:    500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color:          var(--gray);
    line-height:    1.5;
}

.gap-closer {
    margin-top:  80px;
    padding:     52px 60px;
    border-left: 3px solid var(--gold);
    background:  rgba(201,168,76,.04);
}

.gap-closer-text {
    font-family: 'Cormorant Garamond', serif;
    font-size:   clamp(22px, 2.4vw, 32px);
    font-weight: 300;
    line-height: 1.45;
    color:       rgba(238,242,255,.9);
}

.gap-closer-text em {
    font-style: italic;
    color:      var(--gold);
}

.problem-visual-strip {
    position:      relative;
    margin-bottom: 80px;
    overflow:      hidden;
    border:        1px solid rgba(201,168,76,.2);
}

.problem-strip-img {
    display:         block;
    width:           100%;
    height:          320px;
    object-fit:      cover;
    object-position: center top;
    filter:          brightness(.75);
}

.problem-strip-overlay {
    position:        absolute;
    inset:           0;
    background:      linear-gradient(to right, rgba(4,8,15,.85) 0%, rgba(4,8,15,.3) 60%, transparent 100%);
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
    padding:         36px 48px;
}

.problem-strip-tag {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .35em;
    text-transform: uppercase;
    color:          var(--gold);
    background:     rgba(201,168,76,.15);
    border:         1px solid rgba(201,168,76,.35);
    padding:        5px 14px;
    display:        inline-block;
    margin-bottom:  12px;
    width:          fit-content;
}

.problem-strip-label {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      18px;
    font-weight:    600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--white);
    max-width:      600px;
    line-height:    1.4;
}


/* =============================================================================
   10. SOLUTION SECTION
   ============================================================================= */

#solution {
    padding:     160px 60px;
    background:  linear-gradient(180deg, rgba(0,200,255,.03) 0%, transparent 60%);
    border-top:  1px solid rgba(0,200,255,.1);
}

.solution-intro {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   80px;
    margin-bottom:         120px;
    align-items:           end;
}

.solution-headline {
    font-family: 'Cormorant Garamond', serif;
    font-size:   clamp(40px, 5vw, 72px);
    font-weight: 300;
    line-height: 1.0;
}

.solution-headline em {
    font-style: italic;
    color:      var(--cyan);
}

.solution-body {
    font-size:   18px;
    line-height: 1.8;
    color:       rgba(238,242,255,.78);
}

.solution-body strong {
    color:       var(--white);
    font-weight: 400;
}

.os-diagram {
    margin-bottom:         120px;
    padding:               80px;
    background:            rgba(10,22,40,.6);
    border:                1px solid rgba(58,68,89,.8);
    display:               grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items:           center;
}

.os-layer {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            16px;
    padding:        32px 24px;
}

.os-layer-label {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color:          var(--gray);
}

.os-layer-name {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      22px;
    font-weight:    700;
    color:          var(--white);
    text-align:     center;
}

.os-layer-icons {
    display:         flex;
    gap:             10px;
    flex-wrap:       wrap;
    justify-content: center;
}

.os-icon {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      11px;
    letter-spacing: .1em;
    color:          var(--gray);
    background:     rgba(58,68,89,.4);
    padding:        6px 14px;
    border:         1px solid rgba(58,68,89,.8);
}

.os-center {
    background: rgba(201,168,76,.06);
    border:     1px solid rgba(201,168,76,.3);
    padding:    52px 40px;
    text-align: center;
    position:   relative;
}

.os-center::before,
.os-center::after {
    content:    '';
    position:   absolute;
    top:        50%;
    width:      40px;
    height:     1px;
    background: linear-gradient(to right, rgba(201,168,76,.5), transparent);
}

.os-center::before { right: 100%; }
.os-center::after  { left: 100%; transform: scaleX(-1); }

.os-center-label {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .35em;
    text-transform: uppercase;
    color:          var(--gold);
    margin-bottom:  16px;
}

.os-center-name {
    font-family: 'Cormorant Garamond', serif;
    font-size:   52px;
    font-weight: 600;
    line-height: 1;
    color:       var(--gold);
}

.os-center-name .font-prime {
    color: var(--cyan);
}

.os-center-sub {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      13px;
    letter-spacing: .15em;
    color:          rgba(201,168,76,.6);
    margin-top:     10px;
}

.capabilities-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   2px;
}

.cap-card {
    padding:    48px 40px;
    background: rgba(10,22,40,.5);
    border:     1px solid rgba(58,68,89,.5);
    position:   relative;
    overflow:   hidden;
    transition: all .3s;
}

.cap-card::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       0;
    width:      0;
    height:     2px;
    background: linear-gradient(to right, var(--cyan), transparent);
    transition: width .4s;
}

.cap-card:hover::after {
    width: 100%;
}

.cap-card:hover {
    background:   rgba(10,22,40,.85);
    border-color: rgba(0,200,255,.3);
}

.cap-icon {
    width:         40px;
    height:        40px;
    margin-bottom: 28px;
    color:         var(--cyan);
}

.cap-title {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      18px;
    font-weight:    600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--white);
    margin-bottom:  16px;
}

.cap-text {
    font-size:   16px;
    line-height: 1.75;
    color:       rgba(238,242,255,.75);
}


/* =============================================================================
   11. MOVEMENT SECTION
   ============================================================================= */

.movement-inner {
    padding:       160px 60px;
    background:    linear-gradient(135deg, rgba(10,22,40,.95) 0%, rgba(4,8,15,.98) 100%);
    border-top:    1px solid rgba(201,168,76,.2);
    border-bottom: 1px solid rgba(201,168,76,.2);
    position:      relative;
    overflow:      hidden;
}

.movement-inner::before {
    content:        '';
    position:       absolute;
    top:            50%;
    left:           50%;
    transform:      translate(-50%, -50%);
    width:          800px;
    height:         800px;
    background:     radial-gradient(circle, rgba(201,168,76,.05) 0%, transparent 70%);
    pointer-events: none;
}

.movement-quote {
    font-family:   'Cormorant Garamond', serif;
    font-size:     clamp(28px, 4vw, 56px);
    font-weight:   300;
    font-style:    italic;
    line-height:   1.25;
    max-width:     960px;
    margin:        0 auto 60px;
    text-align:    center;
    color:         rgba(238,242,255,.85);
}

.movement-quote em {
    color:      var(--gold);
    font-style: normal;
}

.movement-attribution {
    text-align:     center;
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      12px;
    font-weight:    500;
    letter-spacing: .35em;
    text-transform: uppercase;
    color:          var(--gray);
}

.movement-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   2px;
    margin-top:            100px;
}

.movement-card {
    padding:    48px 36px;
    background: rgba(4,8,15,.6);
    border:     1px solid rgba(58,68,89,.4);
    text-align: center;
}

.movement-card-num {
    font-family:   'Cormorant Garamond', serif;
    font-size:     56px;
    font-weight:   600;
    color:         var(--gold);
    line-height:   1;
    margin-bottom: 16px;
}

.movement-card-label {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      13px;
    font-weight:    600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color:          var(--gray);
    line-height:    1.5;
}


/* =============================================================================
   12. USE CASES & TABS
   ============================================================================= */

#use-cases {
    padding: 160px 60px;
}

.use-cases-headline {
    font-family:   'Cormorant Garamond', serif;
    font-size:     clamp(36px, 4.5vw, 64px);
    font-weight:   300;
    line-height:   1.05;
    margin-bottom: 60px;
}

.use-cases-headline em {
    font-style: italic;
    color:      var(--gold);
}

.use-case-tabs {
    display:                    flex;
    border-bottom:              1px solid rgba(58,68,89,.6);
    margin-bottom:              2px;
    overflow-x:                 auto;
    -webkit-overflow-scrolling: touch;
}

.tab-btn {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      13px;
    font-weight:    600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color:          var(--gray);
    background:     none;
    border:         none;
    padding:        20px 36px;
    border-bottom:  2px solid transparent;
    margin-bottom:  -1px;
    transition:     all .25s;
    white-space:    nowrap;
    pointer-events: all !important;
    cursor:         pointer !important;
}

.tab-btn.active {
    color:               var(--gold);
    border-bottom-color: var(--gold);
}

.tab-btn:hover:not(.active) {
    color: var(--white);
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display:               grid;
    grid-template-columns: 1fr 1fr;
}

.use-case-visual {
    background: rgba(10,22,40,.7);
    border:     1px solid rgba(58,68,89,.6);
    padding:    72px 60px;
    position:   relative;
    overflow:   hidden;
}

.use-case-visual::before {
    content:        attr(data-city);
    position:       absolute;
    bottom:         -20px;
    right:          -10px;
    font-family:    'Cormorant Garamond', serif;
    font-size:      120px;
    font-weight:    700;
    color:          rgba(201,168,76,.05);
    line-height:    1;
    pointer-events: none;
    white-space:    nowrap;
}

.use-case-tag {
    display:        inline-block;
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color:          var(--gold);
    background:     rgba(201,168,76,.1);
    border:         1px solid rgba(201,168,76,.3);
    padding:        6px 16px;
    margin-bottom:  32px;
}

.use-case-name {
    font-family:   'Cormorant Garamond', serif;
    font-size:     52px;
    font-weight:   300;
    line-height:   1.05;
    margin-bottom: 24px;
}

.use-case-sub {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      15px;
    letter-spacing: .1em;
    color:          var(--cyan);
    margin-bottom:  40px;
}

.use-case-metrics {
    display:   flex;
    gap:       40px;
    flex-wrap: wrap;
}

.uc-metric-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-size:   36px;
    font-weight: 700;
    color:       var(--white);
}

.uc-metric-label {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      11px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color:          var(--gray);
}

.use-case-content {
    background:  rgba(4,8,15,.6);
    border:      1px solid rgba(58,68,89,.6);
    border-left: none;
    padding:     72px 60px;
}

.use-case-desc {
    font-size:     17px;
    line-height:   1.8;
    color:         rgba(238,242,255,.78);
    margin-bottom: 48px;
}

.use-case-list {
    list-style:     none;
    display:        flex;
    flex-direction: column;
    gap:            18px;
}

.use-case-list li {
    font-size:    16px;
    color:        rgba(238,242,255,.82);
    padding-left: 24px;
    position:     relative;
    line-height:  1.6;
}

.use-case-list li::before {
    content:    '';
    position:   absolute;
    left:       0;
    top:        10px;
    width:      8px;
    height:     1px;
    background: var(--gold);
}


/* =============================================================================
   13. AUDIENCES SECTION
   ============================================================================= */

#audiences {
    padding:    160px 60px;
    background: rgba(10,22,40,.3);
    border-top: 1px solid rgba(58,68,89,.4);
}

.audiences-header {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   80px;
    margin-bottom:         80px;
    align-items:           end;
}

.audiences-headline {
    font-family: 'Cormorant Garamond', serif;
    font-size:   clamp(36px, 4.5vw, 60px);
    font-weight: 300;
    line-height: 1.05;
}

.audiences-headline em {
    font-style: italic;
    color:      var(--gold);
}

.audiences-sub {
    font-size:   17px;
    line-height: 1.8;
    color:       rgba(238,242,255,.75);
}

.audience-list {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   2px;
}

.aud-card {
    padding:    52px 32px;
    background: rgba(4,8,15,.5);
    border:     1px solid rgba(58,68,89,.5);
    position:   relative;
    transition: all .3s;
    overflow:   hidden;
}

.aud-card::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    width:      100%;
    height:     0;
    background: linear-gradient(180deg, rgba(201,168,76,.08) 0%, transparent 100%);
    transition: height .4s;
}

.aud-card:hover::before {
    height: 100%;
}

.aud-card:hover {
    border-color: rgba(201,168,76,.4);
}

.aud-num {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .3em;
    color:          var(--gold);
    margin-bottom:  36px;
    display:        block;
}

.aud-title {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      17px;
    font-weight:    700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color:          var(--white);
    margin-bottom:  20px;
    line-height:    1.3;
}

.aud-text {
    font-size:   15px;
    line-height: 1.7;
    color:       rgba(238,242,255,.72);
}


/* =============================================================================
   14. PHILOSOPHY SECTION
   ============================================================================= */

#philosophy {
    padding: 160px 60px;
}

.philosophy-top {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   0;
    margin-bottom:         48px;
    border:                1px solid rgba(58,68,89,.6);
    overflow:              hidden;
}

.philosophy-img {
    display:         block;
    width:           100%;
    height:          340px;
    object-fit:      cover;
    object-position: center top;
    filter:          brightness(.85);
}

.philosophy-quote-block {
    background:      rgba(201,168,76,.04);
    border-left:     1px solid rgba(201,168,76,.2);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         52px 60px;
}

.philosophy-quote-text {
    font-family: 'Cormorant Garamond', serif;
    font-size:   clamp(24px, 2.8vw, 38px);
    font-weight: 300;
    font-style:  italic;
    line-height: 1.4;
    color:       rgba(238,242,255,.88);
}

.not-vs-is {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    border:                1px solid rgba(58,68,89,.6);
    border-top:            none;
}

.not-col {
    padding:    72px 60px;
    background: rgba(10,22,40,.4);
}

.is-col {
    padding:    72px 60px;
    background: rgba(201,168,76,.04);
}

.col-header {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .4em;
    text-transform: uppercase;
    margin-bottom:  40px;
    padding-bottom: 20px;
}

.not-col .col-header {
    color:         rgba(192,57,43,.8);
    border-bottom: 1px solid rgba(192,57,43,.3);
}

.is-col .col-header {
    color:         var(--gold);
    border-bottom: 1px solid rgba(201,168,76,.3);
}

.not-item,
.is-item {
    font-size:     16px;
    line-height:   1.7;
    margin-bottom: 20px;
    padding-left:  28px;
    position:      relative;
    color:         rgba(238,242,255,.78);
}

.not-item::before {
    content:   '\2715';
    position:  absolute;
    left:      0;
    color:     rgba(192,57,43,.7);
    font-size: 13px;
}

.is-item::before {
    content:   '\2713';
    position:  absolute;
    left:      0;
    color:     var(--gold);
    font-size: 13px;
}


/* =============================================================================
   15. URGENCY / CTA SECTION
   ============================================================================= */

.urgency-inner {
    position:   relative;
    overflow:   hidden;
    padding:    140px 60px;
    background: var(--navy2);
    border-top: 1px solid rgba(201,168,76,.3);
    text-align: center;
}

.urgency-inner::before {
    content:        '';
    position:       absolute;
    top:            50%;
    left:           50%;
    transform:      translate(-50%, -50%);
    width:          800px;
    height:         800px;
    background:     radial-gradient(circle, rgba(201,168,76,.08) 0%, transparent 70%);
    pointer-events: none;
}

.urgency-eyebrow {
    font-family:     'Barlow Condensed', sans-serif;
    font-size:       11px;
    font-weight:     700;
    letter-spacing:  .4em;
    text-transform:  uppercase;
    color:           var(--gold);
    margin-bottom:   40px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             16px;
}

.urgency-eyebrow::before,
.urgency-eyebrow::after {
    content:    '';
    display:    block;
    width:      40px;
    height:     1px;
    background: rgba(201,168,76,.5);
}

.urgency-headline {
    font-family: 'Cormorant Garamond', serif;
    font-size:   clamp(40px, 6vw, 80px);
    font-weight: 300;
    line-height: 1.05;
    margin:      0 auto 32px;
    max-width:   800px;
}

.urgency-headline em {
    font-style: italic;
    color:      var(--gold);
}

.urgency-sub {
    font-size:     18px;
    line-height:   1.75;
    color:         rgba(238,242,255,.75);
    max-width:     560px;
    margin:        0 auto 60px;
}

.urgency-actions {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             40px;
    margin-bottom:   80px;
}

.urgency-steps {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    max-width:             880px;
    margin:                0 auto;
    border:                1px solid rgba(201,168,76,.2);
}

.urgency-step {
    padding:    40px 32px;
    background: rgba(4,8,15,.5);
    text-align: left;
}

.urgency-step + .urgency-step {
    border-left: 1px solid rgba(201,168,76,.2);
}

.step-num {
    font-family:   'Cormorant Garamond', serif;
    font-size:     48px;
    font-weight:   300;
    color:         rgba(201,168,76,.3);
    line-height:   1;
    margin-bottom: 16px;
}

.step-title {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      15px;
    font-weight:    600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--white);
    margin-bottom:  10px;
}

.step-text {
    font-size:   15px;
    line-height: 1.7;
    color:       rgba(238,242,255,.72);
}


/* =============================================================================
   16. FOOTER
   ============================================================================= */

footer {
    padding:               60px 60px 48px;
    border-top:            1px solid rgba(58,68,89,.5);
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:                   40px;
    align-items:           center;
    position:              relative;
    z-index:               1;
}

.footer-brand {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      24px;
    font-weight:    700;
    letter-spacing: .1em;
}

.footer-brand span {
    color: var(--gold);
}

.footer-powered {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      11px;
    font-weight:    500;
    letter-spacing: .25em;
    text-transform: uppercase;
    color:          var(--gray);
    margin-top:     8px;
}

.footer-links {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    align-items:    center;
}

.footer-links a {
    font-family:     'Barlow Condensed', sans-serif;
    font-size:       12px;
    font-weight:     500;
    letter-spacing:  .2em;
    text-transform:  uppercase;
    color:           var(--gray);
    text-decoration: none;
    transition:      color .25s;
}

.footer-links a:hover {
    color: var(--gold);
}

.footer-contact {
    text-align: right;
}

.footer-contact a {
    font-family:     'Barlow Condensed', sans-serif;
    font-size:       14px;
    letter-spacing:  .1em;
    color:           var(--gray);
    text-decoration: none;
    display:         block;
    margin-bottom:   8px;
    transition:      color .25s;
}

.footer-contact a:hover {
    color: var(--gold);
}

.footer-bottom {
    padding:         24px 60px;
    border-top:      1px solid rgba(58,68,89,.3);
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    position:        relative;
    z-index:         1;
}

.footer-bottom p {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      11px;
    letter-spacing: .15em;
    color:          var(--gold);
}


/* =============================================================================
   17. ANIMATIONS & KEYFRAMES
   ============================================================================= */

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0);    }
}

@keyframes marquee {
    from { transform: translateX(0);    }
    to   { transform: translateX(-50%); }
}

@keyframes scrollLine {
    0%   { top: -100%; }
    100% { top: 200%;  }
}

@keyframes scrollBob {
    0%, 100% { transform: translateX(-50%) translateY(0);   }
    50%       { transform: translateX(-50%) translateY(6px); }
}


/* =============================================================================
   18. SCROLL REVEAL
   ============================================================================= */

.reveal {
    opacity:   1;
    transform: translateY(0);
}

.reveal.animate {
    opacity:    0;
    transform:  translateY(40px);
    transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}

.reveal.animate.visible {
    opacity:   1;
    transform: translateY(0);
}

.reveal.animate.reveal-delay-1 { transition-delay: .1s; }
.reveal.animate.reveal-delay-2 { transition-delay: .2s; }
.reveal.animate.reveal-delay-3 { transition-delay: .3s; }
.reveal.animate.reveal-delay-4 { transition-delay: .4s; }


/* =============================================================================
   19. MODAL & FORM
   ============================================================================= */

.modal-overlay {
    position:        fixed;
    inset:           0;
    z-index:         99999;
    background:      rgba(4,8,15,.92);
    backdrop-filter: blur(12px);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         24px;
    opacity:         0;
    pointer-events:  none;
    transition:      opacity .35s ease;
}

.modal-overlay.open {
    opacity:        1;
    pointer-events: all;
}

.modal {
    background:  #0A1628;
    border:      1px solid rgba(201,168,76,.25);
    width:       100%;
    max-width:   640px;
    max-height:  90vh;
    overflow-y:  auto;
    position:    relative;
    transform:   translateY(24px);
    transition:  transform .35s cubic-bezier(.16,1,.3,1);
}

.modal-overlay.open .modal {
    transform: translateY(0);
}

.modal-header {
    padding:       40px 48px 32px;
    border-bottom: 1px solid rgba(201,168,76,.15);
    position:      sticky;
    top:           0;
    background:    #0A1628;
    z-index:       2;
}

.modal-source-tag {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .35em;
    text-transform: uppercase;
    color:          var(--gold);
    background:     rgba(201,168,76,.1);
    border:         1px solid rgba(201,168,76,.25);
    padding:        5px 14px;
    display:        inline-block;
    margin-bottom:  20px;
}

.modal-title {
    font-family: 'Cormorant Garamond', serif;
    font-size:   clamp(26px, 3.5vw, 38px);
    font-weight: 300;
    line-height: 1.1;
    color:       var(--white);
}

.modal-title em {
    font-style: italic;
    color:      var(--gold);
}

.modal-close {
    position:        absolute;
    top:             28px;
    right:           32px;
    background:      none;
    border:          none;
    font-size:       28px;
    color:           var(--gray);
    line-height:     1;
    width:           40px;
    height:          40px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      color .2s;
    pointer-events:  all !important;
    cursor:          pointer !important;
}

.modal-close:hover {
    color: var(--white);
}

.modal-body {
    padding: 36px 48px 48px;
}

.form-row {
    margin-bottom: 24px;
}

.form-row.two-col {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   16px;
}

.form-label {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .25em;
    text-transform: uppercase;
    color:          var(--gray);
    display:        block;
    margin-bottom:  10px;
}

.form-label .req {
    color:       var(--gold);
    margin-left: 3px;
}

.form-label .opt {
    font-weight:    400;
    letter-spacing: .1em;
    text-transform: none;
    color:          var(--gold);
    font-size:      10px;
    margin-left:    6px;
}

.form-input,
.form-select,
.form-textarea {
    width:              100%;
    background:         rgba(4,8,15,.6);
    border:             1px solid rgba(58,68,89,.8);
    color:              var(--white);
    font-family:        'Barlow', sans-serif;
    font-size:          15px;
    font-weight:        300;
    padding:            14px 18px;
    outline:            none;
    transition:         border-color .25s, background .25s;
    -webkit-appearance: none;
    appearance:         none;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: rgba(122,132,152,.5);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: rgba(201,168,76,.6);
    background:   rgba(4,8,15,.9);
}

.form-input.error,
.form-select.error,
.form-textarea.error {
    border-color: rgba(192,57,43,.7);
}

.form-select {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A8498' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 18px center;
    padding-right:       44px;
    cursor:              pointer;
}

.form-select option {
    background: #0A1628;
    color:      var(--white);
}

.form-textarea {
    resize:      vertical;
    min-height:  140px;
    line-height: 1.65;
}

.form-error-msg {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      11px;
    letter-spacing: .1em;
    color:          rgba(192,57,43,.9);
    margin-top:     7px;
    display:        none;
}

.form-error-msg.visible {
    display: block;
}

.form-submit {
    width:          100%;
    margin-top:     8px;
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      13px;
    font-weight:    700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color:          var(--black);
    background:     var(--gold);
    border:         none;
    padding:        18px 44px;
    clip-path:      polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
    transition:     background .25s, transform .2s;
    pointer-events: all !important;
    cursor:         pointer !important;
    display:        block;
}

.form-submit:hover {
    background: var(--gold2);
    transform:  translateY(-1px);
}

.form-note {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      11px;
    letter-spacing: .1em;
    color:          var(--gray);
    margin-top:     20px;
    text-align:     center;
    line-height:    1.6;
}

.modal-success {
    padding:    64px 48px;
    text-align: center;
    display:    none;
}

.modal-success.visible {
    display: block;
}

.modal-success-icon {
    width:           56px;
    height:          56px;
    margin:          0 auto 28px;
    border:          2px solid var(--gold);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       24px;
    color:           var(--gold);
}

.modal-success-title {
    font-family:   'Cormorant Garamond', serif;
    font-size:     32px;
    font-weight:   300;
    color:         var(--white);
    margin-bottom: 16px;
}

.modal-success-text {
    font-size:   16px;
    line-height: 1.7;
    color:       rgba(238,242,255,.65);
}


/* =============================================================================
   20. PLATFORM PREVIEW SECTION
   ============================================================================= */

#platform-preview {
    padding:    140px 60px;
    background: rgba(4,8,15,1);
    border-top: 1px solid rgba(58,68,89,.4);
}

.preview-header {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   80px;
    align-items:           end;
    margin-bottom:         80px;
}

.preview-headline {
    font-family: 'Cormorant Garamond', serif;
    font-size:   clamp(32px, 4vw, 56px);
    font-weight: 300;
    line-height: 1.1;
}

.preview-headline em {
    font-style: italic;
    color:      var(--gold);
}

.preview-body {
    font-size:   17px;
    line-height: 1.8;
    color:       rgba(238,242,255,.72);
}

.preview-body strong {
    color:       var(--white);
    font-weight: 400;
}

.screenshot-frame {
    position:      relative;
    margin-bottom: 48px;
}

.screenshot-glow {
    position:       absolute;
    inset:          -1px;
    border:         1px solid rgba(201,168,76,.3);
    pointer-events: none;
    z-index:        2;
}

.screenshot-glow::before {
    content:        '';
    position:       absolute;
    inset:          -20px;
    background:     radial-gradient(ellipse at 50% 110%, rgba(201,168,76,.12) 0%, transparent 65%);
    pointer-events: none;
}

.screenshot-corner {
    position:     absolute;
    width:        24px;
    height:       24px;
    border-color: var(--gold);
    border-style: solid;
    z-index:      3;
}

.screenshot-corner-tl { top: -1px;    left: -1px;  border-width: 2px 0 0 2px; }
.screenshot-corner-tr { top: -1px;    right: -1px; border-width: 2px 2px 0 0; }
.screenshot-corner-bl { bottom: -1px; left: -1px;  border-width: 0 0 2px 2px; }
.screenshot-corner-br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.screenshot-img {
    display:       block;
    width:         100%;
    height:        auto;
    border-radius: 2px;
}

.screenshot-reflection {
    display:    block;
    width:      100%;
    background: linear-gradient(to bottom, rgba(201,168,76,.04), transparent);
    height:     60px;
    margin-top: -2px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.3), transparent);
    mask-image:         linear-gradient(to bottom, rgba(0,0,0,.3), transparent);
}

.screenshot-caption-bar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         20px 0 0;
    border-top:      1px solid rgba(58,68,89,.4);
    margin-top:      4px;
}

.screenshot-caption-label {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color:          var(--gold);
}

.screenshot-caption-desc {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      12px;
    letter-spacing: .1em;
    color:          var(--gray);
}

.screenshots-two-col {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   48px;
    margin:                60px 0;
    align-items:           start;
}

.screenshot-sub-img {
    display:       block;
    width:         100%;
    height:  auto;
    object-fit:    cover;
    object-position: top;
    border:        1px solid rgba(58,68,89,.6);
    border-radius: 2px;
}

.screenshot-sub {
    display:        flex;
    flex-direction: column;
    gap:            16px;
}

.screenshot-sub-tag {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color:          var(--cyan);
    border-bottom:  1px solid rgba(0,200,255,.2);
    padding-bottom: 12px;
}

.screenshot-sub-copy {
    font-size:   16px;
    line-height: 1.8;
    color:       rgba(238,242,255,.72);
}

.screenshot-sub-stats {
    display:        flex;
    flex-direction: column;
    gap:            20px;
    margin-top:     16px;
    padding-top:    24px;
    border-top:     1px solid rgba(58,68,89,.4);
}

.sub-stat {
    display:     flex;
    align-items: baseline;
    gap:         16px;
}

.sub-stat-num {
    font-family: 'Cormorant Garamond', serif;
    font-size:   36px;
    font-weight: 600;
    color:       var(--gold);
    white-space: nowrap;
    line-height: 1;
}

.sub-stat-label {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--gray);
    line-height:    1.4;
}

.preview-callouts {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   2px;
    margin-top:            60px;
}

.callout-card {
    padding:    32px 28px;
    background: rgba(10,22,40,.5);
    border:     1px solid rgba(58,68,89,.5);
}

.callout-icon {
    font-family:   'Barlow Condensed', sans-serif;
    font-size:     28px;
    font-weight:   700;
    color:         var(--cyan);
    margin-bottom: 12px;
    line-height:   1;
}

.callout-title {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      14px;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--white);
    margin-bottom:  8px;
}

.callout-text {
    font-size:   14px;
    line-height: 1.65;
    color:       rgba(238,242,255,.68);
}

.screenshot-sub-caption {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      12px;
    letter-spacing: .1em;
    color:          var(--gray);
    line-height:    1.5;
}

/* =============================================================================
   21. VIDEO SECTION
   ============================================================================= */

#video-section {
    padding:    120px 60px;
    background: linear-gradient(180deg, rgba(4,8,15,1) 0%, rgba(10,22,40,.5) 100%);
    border-top: 1px solid rgba(58,68,89,.4);
}

.video-intro {
    text-align:    center;
    margin-bottom: 60px;
}

.video-headline {
    font-family:   'Cormorant Garamond', serif;
    font-size:     clamp(32px, 4vw, 56px);
    font-weight:   300;
    line-height:   1.1;
    margin-bottom: 20px;
}

.video-headline em {
    font-style: italic;
    color:      var(--gold);
}

.video-subhead {
    font-size:   17px;
    line-height: 1.7;
    color:       rgba(238,242,255,.65);
    max-width:   560px;
    margin:      0 auto;
}

.video-container {
    position:       relative;
    width:          100%;
    max-width:      1100px;
    margin:         0 auto;
    padding-bottom: calc(min(100%, 1100px) * 9 / 16);
    height:         0;
    background:     rgba(10,22,40,.8);
    border:         1px solid rgba(201,168,76,.2);
    overflow:       hidden;
}

.video-corner {
    position:     absolute;
    width:        20px;
    height:       20px;
    border-color: rgba(201,168,76,.4);
    border-style: solid;
}

.video-corner-tl { top: 16px;    left: 16px;  border-width: 2px 0 0 2px; }
.video-corner-tr { top: 16px;    right: 16px; border-width: 2px 2px 0 0; }
.video-corner-bl { bottom: 16px; left: 16px;  border-width: 0 0 2px 2px; }
.video-corner-br { bottom: 16px; right: 16px; border-width: 0 2px 2px 0; }


/* =============================================================================
   22. VERTIPORT SECTION
   ============================================================================= */

#vertiport {
    padding:    120px 60px;
    background: var(--navy);
}

.vertiport-intro {
    font-size:     18px;
    line-height:   1.8;
    color:         rgba(238,242,255,.72);
    max-width:     760px;
    margin:        0 0 72px;
}

.vertiport-showcase {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   0;
    margin-bottom:         72px;
    border:                1px solid rgba(58,68,89,.6);
    overflow:              hidden;
}

.vertiport-video-col {
    position:   relative;
    min-height: 360px;
    overflow:   hidden;
}

.vertiport-video-wrap {
    position: absolute;
    inset:    0;
}

.vertiport-video {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.vertiport-video-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to right, transparent 60%, var(--navy) 100%);
}

.vertiport-stats-col {
    display:        flex;
    flex-direction: column;
    gap:            0;
    border-left:    1px solid rgba(58,68,89,.6);
    background:     rgba(4,8,15,.4);
}

.vertiport-stat-block {
    padding:       28px 40px;
    border-bottom: 1px solid rgba(58,68,89,.4);
}

.vertiport-stat-block:last-child {
    border-bottom: none;
}

.vstat-num {
    font-family:   'Cormorant Garamond', serif;
    font-size:     clamp(28px, 3vw, 42px);
    font-weight:   600;
    color:         var(--gold);
    line-height:   1;
    margin-bottom: 8px;
}

.vstat-label {
    font-family: 'Barlow', sans-serif;
    font-size:   13px;
    line-height: 1.5;
    color:       rgba(238,242,255,.6);
}

.vertiport-phases {
    display:               grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap:                   0;
    align-items:           center;
}

.vphase {
    background: rgba(4,8,15,.6);
    border:     1px solid rgba(58,68,89,.6);
    padding:    36px 32px;
}

.vphase-arrow {
    font-size:  28px;
    color:      var(--gold);
    text-align: center;
    padding:    0 20px;
}

.vphase-num {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color:          var(--cyan);
    margin-bottom:  8px;
}

.vphase-title {
    font-family:   'Cormorant Garamond', serif;
    font-size:     22px;
    font-weight:   600;
    color:         var(--white);
    margin-bottom: 6px;
}

.vphase-period {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      12px;
    letter-spacing: .12em;
    color:          var(--gold);
    margin-bottom:  14px;
}

.vphase-items {
    font-size:   13px;
    line-height: 1.6;
    color:       rgba(238,242,255,.6);
}

.arlington-econ-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   1px;
    background:            rgba(58,68,89,.4);
    margin:                28px 0;
    border:                1px solid rgba(58,68,89,.4);
}

.aecon-card {
    background: rgba(4,8,15,.7);
    padding:    24px 28px;
}

.aecon-num {
    font-family:   'Cormorant Garamond', serif;
    font-size:     clamp(24px, 2.5vw, 36px);
    font-weight:   600;
    color:         var(--gold);
    line-height:   1;
    margin-bottom: 6px;
}

.aecon-label {
    font-family: 'Barlow', sans-serif;
    font-size:   12px;
    line-height: 1.5;
    color:       rgba(238,242,255,.6);
}

.active-tag {
    background:   rgba(0,200,255,.12) !important;
    border-color: rgba(0,200,255,.35) !important;
    color:        var(--cyan)          !important;
}


/* =============================================================================
   23. VERTIPORT — AERIAL IMAGE
   ============================================================================= */

.vertiport-aerial {
    position:      relative;
    margin-bottom: 72px;
    overflow:      hidden;
    border:        1px solid rgba(58,68,89,.5);
}

.vertiport-aerial-img {
    display:         block;
    width:           100%;
    height:          560px;
    object-fit:      cover;
    object-position: center 35%;
    filter:          brightness(.75) saturate(1.1);
    transition:      transform 8s ease, filter .6s;
}

.vertiport-aerial:hover .vertiport-aerial-img {
    transform: scale(1.03);
    filter:    brightness(.82) saturate(1.15);
}

.vertiport-aerial-overlay {
    position:        absolute;
    inset:           0;
    background:      linear-gradient(
        to top,
        rgba(10,22,40,.96) 0%,
        rgba(10,22,40,.55) 45%,
        transparent 100%
    );
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    padding:         52px 60px;
    gap:             40px;
}

.vertiport-aerial-caption {
    max-width: 580px;
}

.vaero-tag {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .35em;
    text-transform: uppercase;
    color:          var(--gold);
    background:     rgba(201,168,76,.12);
    border:         1px solid rgba(201,168,76,.3);
    padding:        5px 14px;
    display:        inline-block;
    margin-bottom:  16px;
}

.vaero-text {
    font-size:   16px;
    line-height: 1.7;
    color:       rgba(238,242,255,.8);
}

.vaero-callouts {
    display:        flex;
    flex-direction: column;
    gap:            14px;
    flex-shrink:    0;
    align-self:     flex-end;
}

.vaero-callout {
    display:        flex;
    align-items:    center;
    gap:            12px;
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      12px;
    font-weight:    500;
    letter-spacing: .08em;
    color:          rgba(238,242,255,.65);
    text-transform: uppercase;
}

.vaero-callout-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    flex-shrink:   0;
    box-shadow:    0 0 8px currentColor;
}

.vaero-callout-dot--gold { background: var(--gold); color: var(--gold); }
.vaero-callout-dot--cyan { background: var(--cyan); color: var(--cyan); }


/* =============================================================================
   24. CAPABILITY GRID (Vertiport variant)
   ============================================================================= */

.capability-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1px;
    background:            rgba(58,68,89,.4);
    border:                1px solid rgba(58,68,89,.4);
    margin-bottom:         72px;
    overflow:              hidden;
}

.capability-grid .cap-card {
    background:  rgba(4,8,15,.7);
    padding:     48px 44px;
    position:    relative;
    transition:  background .3s;
    border:      none;
}

.capability-grid .cap-card::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     3px;
    opacity:    0;
    transition: opacity .3s;
}

.capability-grid .cap-card:hover {
    background: rgba(10,22,40,.85);
}

.capability-grid .cap-card:hover::before {
    opacity: 1;
}

.cap-card--infra::before     { background: var(--gold);  }
.cap-card--twin::before      { background: var(--cyan);  }
.cap-card--aura::before      { background: var(--gold2); }
.cap-card--workforce::before { background: var(--cyan);  }

.cap-card-eyebrow {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .35em;
    text-transform: uppercase;
    color:          var(--gold);
    margin-bottom:  16px;
}

.cap-card--twin .cap-card-eyebrow,
.cap-card--workforce .cap-card-eyebrow {
    color: var(--cyan);
}

.cap-card-title {
    font-family:   'Cormorant Garamond', serif;
    font-size:     clamp(20px, 2vw, 26px);
    font-weight:   600;
    color:         var(--white);
    line-height:   1.2;
    margin-bottom: 18px;
}

.cap-card-body {
    font-size:     14px;
    line-height:   1.75;
    color:         rgba(238,242,255,.65);
    margin-bottom: 24px;
}

.cap-card-list {
    list-style:     none;
    padding:        0;
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.cap-card-list li {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      13px;
    letter-spacing: .04em;
    color:          rgba(238,242,255,.55);
    padding-left:   18px;
    position:       relative;
}

.cap-card-list li::before {
    content:   '\2014';
    position:  absolute;
    left:      0;
    color:     var(--gold);
    font-size: 11px;
}

.cap-card--twin .cap-card-list li::before,
.cap-card--workforce .cap-card-list li::before {
    color: var(--cyan);
}


/* =============================================================================
   25. ECONOMIC IMPACT BAR
   ============================================================================= */

.econ-bar {
    border:                1px solid rgba(58,68,89,.6);
    background:            rgba(4,8,15,.5);
    padding:               48px 60px;
    margin-bottom:         72px;
    display:               grid;
    grid-template-columns: 180px 1fr;
    gap:                   60px;
    align-items:           center;
}

.econ-stats-row {
    display:     flex;
    gap:         0;
    align-items: stretch;
}

.econ-stat {
    flex:    1;
    padding: 0 40px;
}

.econ-stat:first-child { padding-left:  0; }
.econ-stat:last-child  { padding-right: 0; }

.econ-num {
    font-family:   'Cormorant Garamond', serif;
    font-size:     clamp(30px, 3.5vw, 48px);
    font-weight:   600;
    color:         var(--gold);
    line-height:   1;
    margin-bottom: 10px;
}

.econ-desc {
    font-size:   12px;
    line-height: 1.55;
    color:       rgba(238,242,255,.55);
}

.econ-divider {
    width:       1px;
    background:  rgba(58,68,89,.5);
    flex-shrink: 0;
    align-self:  stretch;
}

.econ-bar-label {
    display:     flex;
    align-items: center;
}

.econ-bar-label .section-label {
    writing-mode:  vertical-rl;
    transform:     rotate(180deg);
    margin-bottom: 0;
    padding-left:  0;
}

.econ-bar-label .section-label::before {
    display: none;
}


/* =============================================================================
   26. PHASES HEADER
   ============================================================================= */

.phases-header {
    padding:       120px 0 0;
    margin-bottom: 40px;
}

.phases-title {
    font-family:   'Cormorant Garamond', serif;
    font-size:     clamp(24px, 3vw, 36px);
    font-weight:   600;
    color:         var(--white);
    margin-bottom: 12px;
}

.phases-sub {
    font-size:   15px;
    line-height: 1.7;
    color:       rgba(238,242,255,.6);
    max-width:   640px;
}


/* =============================================================================
   27. WORKFORCE PIPELINE
   ============================================================================= */

.workforce-pipeline {
    margin-top:  72px;
    border:      1px solid rgba(58,68,89,.4);
    background:  rgba(4,8,15,.4);
    padding:     56px 60px;
}

.wp-header {
    margin-bottom: 40px;
}

.wp-title {
    font-family: 'Cormorant Garamond', serif;
    font-size:   clamp(22px, 2.5vw, 32px);
    font-weight: 600;
    color:       var(--white);
}

.wp-grid {
    display:               grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap:                   0;
    align-items:           center;
    margin-bottom:         32px;
}

.wp-node {
    background: rgba(10,22,40,.6);
    border:     1px solid rgba(58,68,89,.5);
    padding:    28px;
}

.wp-node-center {
    border-color: var(--gold);
    background:   rgba(201,168,76,.06);
}

.wp-node-label {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color:          var(--gold);
    margin-bottom:  8px;
}

.wp-node-title {
    font-size:     14px;
    font-weight:   500;
    color:         var(--white);
    margin-bottom: 10px;
}

.wp-node-items {
    font-size:   12px;
    line-height: 1.6;
    color:       rgba(238,242,255,.5);
}

.wp-arrow {
    font-size:  22px;
    color:      var(--gold);
    text-align: center;
    padding:    0 16px;
}

.wp-tcc {
    font-size:   13px;
    line-height: 1.6;
    color:       rgba(238,242,255,.55);
    border-top:  1px solid rgba(58,68,89,.4);
    padding-top: 24px;
}

.wp-tcc strong {
    color: rgba(238,242,255,.8);
}


/* =============================================================================
   28. LOGO MARK WATERMARKS
   ============================================================================= */

.hero-watermark {
    position:       absolute;
    top:            50%;
    left:           50%;
    transform:      translate(-50%, -52%);
    pointer-events: none;
    z-index:        0;
    width:          min(700px, 90vw);
}

.hero-mark-img {
    width:   100%;
    height:  auto;
    opacity: .045;
    filter:  saturate(0) brightness(2);
}

.urgency-watermark {
    position:       absolute;
    top:            50%;
    left:           50%;
    transform:      translate(-50%, -50%);
    pointer-events: none;
    z-index:        0;
    width:          min(600px, 80vw);
}

.urgency-mark-img {
    width:   100%;
    height:  auto;
    opacity: .055;
    filter:  saturate(0) brightness(2);
}

.footer-mark {
    display:         flex;
    justify-content: center;
    padding:         48px 0 0;
    margin-bottom:   40px;
    border-bottom:   1px solid rgba(201,168,76,.15);
}

.footer-mark-img {
    width:   120px;
    height:  auto;
    opacity: .35;
    filter:  saturate(0.4) brightness(1.2);
}


/* =============================================================================
   29. RESPONSIVE — 1024px
   ============================================================================= */

@media (max-width: 1024px) {

    nav          { padding: 20px 32px; }
    nav.scrolled { padding: 14px 32px; }
    .nav-links   { gap: 24px; }

    #hero                 { padding: 140px 32px 80px; }
    #problem,
    #solution,
    #use-cases,
    #audiences,
    #philosophy           { padding: 100px 32px; }
    #platform-preview     { padding: 100px 32px; }
    .urgency-inner        { padding: 100px 32px; }
    .movement-inner       { padding: 100px 32px; }

    .solution-intro       { grid-template-columns: 1fr; gap: 40px; }
    .os-diagram           { padding: 48px 32px; }
    .capabilities-grid    { grid-template-columns: 1fr 1fr; }
    .movement-grid        { grid-template-columns: repeat(2, 1fr); }
    .audience-list        { grid-template-columns: repeat(3, 1fr); }
    .not-vs-is            { grid-template-columns: 1fr; }
    .not-col, .is-col     { padding: 48px 40px; }

    .preview-header       { gap: 48px; }
    .preview-callouts     { grid-template-columns: repeat(2, 1fr); }
    .screenshots-two-col  { gap: 32px; }

    .vertiport-showcase   { grid-template-columns: 1fr; }
    .vertiport-video-col  { min-height: 280px; }
    .vertiport-aerial-img { height: 380px; }
    .vertiport-phases     { grid-template-columns: 1fr; gap: 16px; }
    .vphase-arrow         { transform: rotate(90deg); padding: 0; text-align: center; }

    .philosophy-top       { grid-template-columns: 1fr; }
    .philosophy-img       { height: 260px; }
    .problem-strip-img    { height: 240px; }

    .urgency-steps        { grid-template-columns: 1fr; max-width: 480px; }
    .urgency-step + .urgency-step {
        border-left: none;
        border-top:  1px solid rgba(201,168,76,.2);
    }

    footer          { grid-template-columns: 1fr 1fr; }
    .footer-contact { text-align: left; grid-column: 1 / -1; }
    .footer-links   { align-items: flex-start; }

    .modal-header { padding: 32px 32px 24px; }
    .modal-body   { padding: 28px 32px 40px; }

    .wp-grid  { grid-template-columns: 1fr; gap: 16px; }
    .wp-arrow { transform: rotate(90deg); text-align: center; padding: 4px 0; }

}


/* =============================================================================
   30. RESPONSIVE — 960px
   ============================================================================= */

@media (max-width: 960px) {

    .capability-grid { grid-template-columns: 1fr; }

    .econ-bar { grid-template-columns: 1fr; padding: 40px; }
    .econ-bar-label .section-label {
        writing-mode: horizontal-tb;
        transform:    none;
    }
    .econ-stats-row { flex-wrap: wrap; gap: 32px; }
    .econ-divider   { display: none; }
    .econ-stat      { padding: 0; min-width: 45%; }

    .wp-grid  { grid-template-columns: 1fr; gap: 12px; }
    .wp-arrow { transform: rotate(90deg); padding: 8px 0; text-align: left; }

}


/* =============================================================================
   31. RESPONSIVE — 768px
   Includes all mobile layout overrides and mobile nav hamburger behaviour.
   ============================================================================= */

@media (max-width: 768px) {

    /* ── Nav base ── */
    nav          { padding: 16px 20px; }
    nav.scrolled { padding: 12px 20px; }
    .nav-logo img { height: 34px !important; max-height: 34px !important; }

    /* ── Hamburger — activate on mobile ── */
    .nav-hamburger { display: flex; }

    /* ── CTA — hidden on mobile (lives inside hamburger menu instead) ── */
    .nav-cta { display: none; }

    /* ── Mobile nav overlay ── */
    .nav-links {
        display:         none;
        flex-direction:  column;
        position:        fixed;
        top:             0;
        left:            0;
        width:           100%;
        height:          100vh;
        background:      rgba(5, 10, 20, 0.97);
        backdrop-filter: blur(12px);
        align-items:     center;
        justify-content: center;
        gap:             40px;
        z-index:         1000;
        list-style:      none;
        padding:         0;
        margin:          0;
    }

    .nav-links.is-open {
        display: flex;
    }

    /* FIX: var(--font-condensed) was undefined — replaced with literal font stack */
    .nav-links li a {
        font-family:     'Barlow Condensed', sans-serif;
        font-size:       1.5rem;
        letter-spacing:  0.1em;
        text-transform:  uppercase;
        color:           var(--white);
        text-decoration: none;
    }

    /* ── Hero ── */
    #hero                  { padding: 120px 20px 72px; min-height: 100svh; }
    .hero-content-wrap     { padding-top: 100px; }
    .hero-eyebrow          { font-size: 10px; margin-bottom: 24px; }
    .hero-headline         { font-size: clamp(36px, 10vw, 58px); }
    .hero-divider          { height: 32px; margin: 20px 0; }
    .hero-sub              { font-size: 15px; margin-bottom: 36px; }
    .hero-actions          { flex-direction: column; align-items: flex-start; gap: 20px; }
    .hero-scroll-indicator { display: none; }

    /* ── Video hero ── */
    .vhero         { height: 70vh; }
    .vhero-content { left: 24px; right: 24px; bottom: 80px; }

    /* ── Marquee ── */
    .marquee-item { padding: 0 32px; font-size: 11px; }

    /* ── Section padding ── */
    #problem,
    #solution,
    #use-cases,
    #audiences,
    #philosophy       { padding: 80px 20px; }
    #platform-preview { padding: 80px 20px; }
    #video-section    { padding: 80px 20px; }
    #vertiport        { padding: 80px 20px; }
    .urgency-inner    { padding: 80px 20px; }
    .movement-inner   { padding: 80px 20px; }

    .section-label { font-size: 10px; margin-bottom: 32px; }

    /* ── Problem ── */
    .problem-headline      { font-size: clamp(28px, 8vw, 44px); margin-bottom: 40px; }
    .problem-grid          { grid-template-columns: 1fr; margin-bottom: 40px; }
    .problem-card          { padding: 36px 28px; }
    .problem-strip-img     { height: 180px; }
    .problem-strip-overlay { padding: 24px; }
    .problem-strip-label   { font-size: 14px; }

    .stat-row { grid-template-columns: 1fr; }
    .stat-item + .stat-item { border-left: none; border-top: 1px solid rgba(201,168,76,.2); }
    .stat-item   { padding: 36px 24px; }
    .stat-number { font-size: 60px; }
    .gap-closer  { padding: 36px 24px; margin-top: 48px; }

    /* ── Solution ── */
    .solution-intro  { grid-template-columns: 1fr; gap: 32px; margin-bottom: 48px; }
    .os-diagram      { grid-template-columns: 1fr; padding: 32px 24px; gap: 24px; margin-bottom: 48px; }
    .os-center::before,
    .os-center::after { display: none; }
    .os-center        { padding: 36px 28px; }
    .os-center-name   { font-size: 38px; }
    .capabilities-grid { grid-template-columns: 1fr; }
    .cap-card          { padding: 36px 28px; }

    /* ── Movement ── */
    .movement-quote    { font-size: clamp(22px, 6vw, 32px); margin-bottom: 40px; }
    .movement-grid     { grid-template-columns: repeat(2, 1fr); margin-top: 60px; }
    .movement-card     { padding: 32px 20px; }
    .movement-card-num { font-size: 42px; }

    /* ── Use Cases — FIX: border corrected for single-column stacked layout ── */
    .tab-panel.active { grid-template-columns: 1fr; }
    .use-case-visual  { padding: 48px 28px; }
    .use-case-name    { font-size: 38px; }
    .use-case-content {
        padding:     48px 28px;
        border-left: none;
        border-top:  1px solid rgba(58,68,89,.6);
    }

    /* ── Audiences ── */
    .audiences-header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
    .audience-list    { grid-template-columns: 1fr; }
    .aud-card         { padding: 36px 28px; }

    /* ── Philosophy ── */
    .philosophy-top         { grid-template-columns: 1fr; }
    .philosophy-img         { height: 220px; }
    .philosophy-quote-block { padding: 36px 28px; }
    .not-vs-is              { grid-template-columns: 1fr; }
    .not-col, .is-col       { padding: 40px 28px; }

    /* ── Platform Preview — force stack ── */
    .screenshots-two-col { display: block !important; }
    .screenshots-two-col .screenshot-sub {
        display:       block;
        width:         100%;
        margin-bottom: 32px;
    }
    .preview-header   { display: block !important; }
    .preview-headline,
    .preview-body     { display: block; width: 100%; }

    /* ── Vertiport ── */
    .vertiport-aerial-img { height: 420px; }
    .vertiport-aerial-overlay {
        flex-direction: column;
        align-items:    flex-start;
        padding:        36px 28px;
        /* FIX: stronger overlay so text is readable over busy aerial image */
        background:     linear-gradient(
            to right,
            rgba(5, 10, 20, 0.92) 0%,
            rgba(5, 10, 20, 0.75) 60%,
            rgba(5, 10, 20, 0.3)  100%
        );
    }
    .vaero-text     { color: #EEF2FF; text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
    .vaero-callouts { flex-direction: row; flex-wrap: wrap; gap: 10px; }
    .arlington-econ-grid { grid-template-columns: 1fr; }

    /* ── City Investment phases ── */
    .phases-header { padding: 40px 0 0; }

    /* ── Urgency ── */
    .urgency-actions { flex-direction: column; align-items: center; gap: 20px; }
    .urgency-steps   { grid-template-columns: 1fr; max-width: 100%; }
    .urgency-step + .urgency-step {
        border-left: none;
        border-top:  1px solid rgba(201,168,76,.2);
    }
    .urgency-step { padding: 32px 24px; }

    /* ── Footer ── */
    footer          { grid-template-columns: 1fr; padding: 48px 20px 32px; gap: 36px; text-align: center; }
    .footer-links   { align-items: center; }
    .footer-contact { text-align: center; }
    .footer-bottom  { padding: 20px; flex-direction: column; gap: 8px; text-align: center; }

    /* ── Modal ── */
    .modal-header     { padding: 28px 20px 20px; }
    .modal-body       { padding: 24px 20px 36px; }
    .modal-close      { top: 20px; right: 14px; }
    .form-row.two-col { grid-template-columns: 1fr; }

    /* ── Workforce ── */
    .wp-grid  { grid-template-columns: 1fr; gap: 12px; }
    .wp-arrow { transform: rotate(90deg); text-align: center; }

}


/* =============================================================================
   32. RESPONSIVE — 640px
   ============================================================================= */

@media (max-width: 640px) {

    #vertiport          { padding: 80px 24px; }
    .cap-card           { padding: 36px 28px; }
    .econ-bar           { padding: 32px 24px; }
    .workforce-pipeline { padding: 40px 28px; }
    .vertiport-phases   { grid-template-columns: 1fr; gap: 12px; }
    .vphase-arrow       { transform: rotate(90deg); text-align: center; }

}


/* =============================================================================
   33. RESPONSIVE — 480px
   ============================================================================= */

@media (max-width: 480px) {

    .hero-headline    { font-size: clamp(32px, 11vw, 48px); }
    .problem-headline,
    .urgency-headline { font-size: clamp(26px, 9vw, 38px); }
    .stat-number      { font-size: 52px; }

}

/* =============================================================================
   34. BLOG — ARCHIVE PAGE
   Add these rules to the bottom of main.css
   ============================================================================= */

/* ── Blog Hero ─────────────────────────────────────────────────────────────── */
#blog-hero {
    position:   relative;
    padding:    160px 80px 80px;
    background: var(--black);
    overflow:   hidden;
}

.blog-hero-inner {
    max-width:  760px;
    position:   relative;
    z-index:    2;
}

.blog-hero-headline {
    font-family: 'Cormorant Garamond', serif;
    font-size:   clamp(52px, 6vw, 80px);
    font-weight: 600;
    line-height: 1.05;
    color:       var(--white);
    margin:      16px 0 24px;
}

.blog-hero-headline em {
    font-style: italic;
    color:      var(--gold);
}

.blog-hero-sub {
    font-size:   18px;
    font-weight: 300;
    color:       rgba(238,242,255,.65);
    max-width:   580px;
    line-height: 1.7;
}

.blog-hero-rule {
    position:         absolute;
    bottom:           0;
    left:             0;
    right:            0;
    height:           1px;
    background:       linear-gradient(90deg, var(--gold) 0%, transparent 60%);
    opacity:          .35;
}

/* ── Category Filter ───────────────────────────────────────────────────────── */
#blog-archive {
    padding:    60px 80px 100px;
    background: var(--black);
}

.blog-filter {
    display:         flex;
    flex-wrap:       wrap;
    gap:             10px;
    margin-bottom:   52px;
}

.blog-filter-btn {
    font-family:     'Barlow Condensed', sans-serif;
    font-size:       12px;
    font-weight:     600;
    letter-spacing:  .18em;
    text-transform:  uppercase;
    color:           rgba(238,242,255,.55);
    background:      transparent;
    border:          1px solid rgba(238,242,255,.15);
    padding:         8px 22px;
    cursor:          pointer;
    clip-path:       polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
    transition:      all .25s;
}

.blog-filter-btn:hover,
.blog-filter-btn.active {
    color:      var(--black);
    background: var(--gold);
    border-color: var(--gold);
}

/* ── Blog Grid ─────────────────────────────────────────────────────────────── */
.blog-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   32px;
}

/* ── Blog Card ─────────────────────────────────────────────────────────────── */
.blog-card {
    display:          flex;
    flex-direction:   column;
    background:       var(--navy);
    border:           1px solid rgba(201,168,76,.12);
    transition:       border-color .3s, transform .3s;
    overflow:         hidden;
}

.blog-card:hover {
    border-color: rgba(201,168,76,.45);
    transform:    translateY(-4px);
}

/* Featured card spans full width on first row */
.blog-card--featured {
    grid-column: 1 / -1;
    flex-direction: row;
}

.blog-card--featured .blog-card-img-wrap {
    flex: 0 0 55%;
}

.blog-card--featured .blog-card-body {
    padding: 48px 44px;
}

.blog-card--featured .blog-card-title {
    font-size: clamp(24px, 2.5vw, 34px);
}

.blog-card--featured .blog-card-excerpt {
    -webkit-line-clamp: 4;
}

/* ── Card image ────────────────────────────────────────────────────────────── */
.blog-card-img-wrap {
    display:     block;
    overflow:    hidden;
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
}

.blog-card-img-inner {
    position: relative;
    width:    100%;
    height:   100%;
}

.blog-card-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform .5s ease;
}

.blog-card:hover .blog-card-img {
    transform: scale(1.04);
}

.blog-card-img-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(180deg, transparent 40%, rgba(10,22,40,.65) 100%);
}

/* Placeholder when no featured image */
.blog-card-img-placeholder {
    background:      var(--navy2);
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.placeholder-mark {
    font-family: 'Cormorant Garamond', serif;
    font-size:   64px;
    font-weight: 700;
    color:       rgba(201,168,76,.2);
    line-height: 1;
}

/* ── Card body ─────────────────────────────────────────────────────────────── */
.blog-card-body {
    display:        flex;
    flex-direction: column;
    padding:        28px 28px 32px;
    flex:           1;
}

.blog-card-meta {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         8px;
    margin-bottom: 14px;
}

.blog-card-category {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color:          var(--gold);
}

.blog-card-dot {
    font-size: 6px;
    color:     rgba(238,242,255);
}

.blog-card-date,
.blog-card-read {
    font-size: 12px;
    color:     rgba(238,242,255,.45);
}

.blog-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size:   clamp(18px, 1.6vw, 22px);
    font-weight: 600;
    line-height: 1.3;
    color:       var(--white);
    margin-bottom: 12px;
}

.blog-card-title a {
    color:           inherit;
    text-decoration: none;
    transition:      color .2s;
}

.blog-card-title a:hover {
    color: var(--gold);
}

.blog-card-excerpt {
    font-size:         14px;
    font-weight:       300;
    line-height:       1.7;
    color:             rgba(238,242,255,.6);
    margin-bottom:     24px;
    flex:              1;
    display:           -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

.blog-card-cta {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      12px;
    font-weight:    600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color:          var(--gold);
    text-decoration: none;
    transition:     color .2s;
    align-self:     flex-start;
    margin-top:     auto;
}

.blog-card-cta:hover {
    color: var(--gold2);
}

/* ── Cards hidden by filter ─────────────────────────────────────────────────── */
.blog-card.is-hidden {
    display: none;
}

/* ── Pagination ────────────────────────────────────────────────────────────── */
.blog-pagination {
    margin-top: 64px;
    display:    flex;
    justify-content: center;
}

.blog-pagination .page-numbers {
    list-style: none;
    display:    flex;
    gap:        8px;
    flex-wrap:  wrap;
    justify-content: center;
}

.blog-pagination .page-numbers li a,
.blog-pagination .page-numbers li span {
    font-family:     'Barlow Condensed', sans-serif;
    font-size:       13px;
    font-weight:     600;
    letter-spacing:  .1em;
    text-transform:  uppercase;
    color:           rgba(238,242,255,.6);
    text-decoration: none;
    padding:         8px 18px;
    border:          1px solid rgba(238,242,255,.15);
    clip-path:       polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
    transition:      all .2s;
    display:         block;
}

.blog-pagination .page-numbers li a:hover,
.blog-pagination .page-numbers li span.current {
    color:       var(--black);
    background:  var(--gold);
    border-color: var(--gold);
}

/* ── Blog empty state ──────────────────────────────────────────────────────── */
.blog-empty {
    text-align: center;
    padding:    80px 0;
}

.blog-empty p {
    font-size: 16px;
    color:     rgba(238,242,255,.5);
    margin-top: 16px;
}

/* ── Blog CTA strip ────────────────────────────────────────────────────────── */
#blog-cta {
    background: var(--navy);
    border-top: 1px solid rgba(201,168,76,.15);
    padding:    80px;
    text-align: center;
}

.blog-cta-inner {
    max-width: 560px;
    margin:    0 auto;
}

.blog-cta-headline {
    font-family: 'Cormorant Garamond', serif;
    font-size:   clamp(32px, 3.5vw, 48px);
    font-weight: 600;
    color:       var(--white);
    margin-bottom: 16px;
}

.blog-cta-headline em {
    color:      var(--gold);
    font-style: italic;
}

.blog-cta-sub {
    font-size:   16px;
    font-weight: 300;
    color:       rgba(238,242,255,.6);
    margin-bottom: 36px;
    line-height: 1.7;
}


/* =============================================================================
   35. BLOG — SINGLE POST
   ============================================================================= */

/* ── Single Hero ───────────────────────────────────────────────────────────── */
#single-hero {
    position:            relative;
    padding:             180px 80px 80px;
    background-color:    var(--navy);
    background-image:    var(--single-hero-img, none);
    background-size:     cover;
    background-position: center;
    overflow:            hidden;
}

.single-hero-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        135deg,
        rgba(4,8,15,.92) 0%,
        rgba(10,22,40,.88) 60%,
        rgba(10,22,40,.75) 100%
    );
    z-index: 1;
}

.single-hero-inner {
    position:  relative;
    z-index:   2;
    max-width: 820px;
}

.single-hero-meta {
    display:      flex;
    align-items:  center;
    flex-wrap:    wrap;
    gap:          10px;
    margin-bottom: 20px;
}

.single-hero-category {
    font-family:     'Barlow Condensed', sans-serif;
    font-size:       11px;
    font-weight:     600;
    letter-spacing:  .2em;
    text-transform:  uppercase;
    color:           var(--gold);
    text-decoration: none;
    transition:      opacity .2s;
}

.single-hero-category:hover { opacity: .75; }

.single-hero-date,
.single-hero-read {
    font-size: 12px;
    color:     rgba(238,242,255);
}

.single-hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size:   clamp(36px, 4.5vw, 62px);
    font-weight: 600;
    line-height: 1.1;
    color:       var(--white);
    margin-bottom: 20px;
}

.single-hero-excerpt {
    font-size:   18px;
    font-weight: 300;
    color:       rgba(238,242,255,.65);
    max-width:   640px;
    line-height: 1.7;
    margin-bottom: 32px;
}

.single-hero-byline {
    display:     flex;
    align-items: center;
    gap:         14px;
}

.single-author-avatar {
    width:         44px !important;
    height:        44px !important;
    border-radius: 50%;
    border:        2px solid rgba(201,168,76,.4);
    flex-shrink:   0;
}

.single-author-info {
    display:        flex;
    flex-direction: column;
    gap:            2px;
}

.single-author-name {
    font-size:   14px;
    font-weight: 500;
    color:       var(--white);
}

.single-author-role {
    font-size: 12px;
    color:     rgba(238,242,255);
}

/* ── Single Layout (sidebar + content) ────────────────────────────────────── */
.single-layout {
    display:   grid;
    grid-template-columns: 200px 1fr;
    gap:       60px;
    max-width: 1200px;
    margin:    0 auto;
    padding:   60px 80px 80px;
    background: var(--black);
}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
.single-sidebar {
    position: relative;
}

.single-sidebar > .sidebar-block {
    position: sticky;
    top:      120px;
}

.sidebar-block-label {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color:          rgba(238,242,255);
    margin-bottom:  16px;
}

.single-share {
    display: flex;
    gap:     10px;
}

.share-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           38px;
    height:          38px;
    border:          1px solid rgba(238,242,255,.15);
    color:           rgba(238,242,255,.55);
    background:      transparent;
    cursor:          pointer;
    text-decoration: none;
    transition:      all .2s;
}

.share-btn svg {
    width:  16px;
    height: 16px;
}

.share-btn:hover {
    border-color: var(--gold);
    color:        var(--gold);
}

.share-btn--copy.is-copied {
    border-color: var(--cyan);
    color:        var(--cyan);
}

.sidebar-block--back {
    margin-top: 32px;
}

.sidebar-back-link {
    font-family:     'Barlow Condensed', sans-serif;
    font-size:       12px;
    font-weight:     600;
    letter-spacing:  .12em;
    text-transform:  uppercase;
    color:           rgba(238,242,255);
    text-decoration: none;
    transition:      color .2s;
}

.sidebar-back-link:hover { color: var(--gold); }

/* ── Article content ───────────────────────────────────────────────────────── */
.single-article {
    min-width: 0; /* prevent overflow in grid */
}

.single-featured-img-wrap {
    margin-bottom: 48px;
    overflow:      hidden;
}

.single-featured-img {
    width:      100%;
    height:     auto;
    display:    block;
    max-height: 480px;
    object-fit: cover;
}

/* ── Prose styles for the_content() output ─────────────────────────────────── */
.single-content {
    font-size:   17px;
    font-weight: 300;
    line-height: 1.8;
    color:       rgba(238,242,255,.8);
}

.single-content h2 {
    font-family:   'Cormorant Garamond', serif;
    font-size:     clamp(26px, 2.5vw, 36px);
    font-weight:   600;
    color:         var(--white);
    margin:        52px 0 20px;
    line-height:   1.2;
}

.single-content h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size:   20px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color:       var(--gold);
    margin:      40px 0 14px;
}

.single-content p {
    margin-bottom: 24px;
}

.single-content a {
    color:           var(--cyan);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition:      color .2s;
}

.single-content a:hover { color: var(--gold); }

.single-content strong {
    font-weight: 500;
    color:       var(--white);
}

.single-content em { color: var(--gold2); }

.single-content ul,
.single-content ol {
    margin:       0 0 24px 24px;
    padding-left: 8px;
}

.single-content li {
    margin-bottom: 8px;
    line-height:   1.7;
}

.single-content blockquote {
    border-left:  3px solid var(--gold);
    margin:       36px 0;
    padding:      20px 0 20px 28px;
    font-family:  'Cormorant Garamond', serif;
    font-size:    clamp(20px, 2vw, 26px);
    font-style:   italic;
    color:        var(--white);
    line-height:  1.5;
}

.single-content hr {
    border:       none;
    border-top:   1px solid rgba(238,242,255,.1);
    margin:       48px 0;
}

.single-content img {
    max-width:    100%;
    height:       auto;
    display:      block;
    margin:       32px auto;
}

.single-content pre,
.single-content code {
    font-family:  'Courier New', monospace;
    font-size:    14px;
    background:   var(--navy);
    border:       1px solid rgba(238,242,255,.1);
    border-radius: 2px;
}

.single-content code {
    padding: 2px 6px;
}

.single-content pre {
    padding:      20px 24px;
    overflow-x:   auto;
    margin-bottom: 24px;
}

/* ── Tags ──────────────────────────────────────────────────────────────────── */
.single-tags {
    display:     flex;
    flex-wrap:   wrap;
    gap:         8px;
    margin-top:  48px;
    padding-top: 32px;
    border-top:  1px solid rgba(238,242,255,.08);
}

.single-tag {
    font-family:     'Barlow Condensed', sans-serif;
    font-size:       11px;
    font-weight:     600;
    letter-spacing:  .15em;
    text-transform:  uppercase;
    color:           rgba(238,242,255,.5);
    text-decoration: none;
    border:          1px solid rgba(238,242,255,.15);
    padding:         6px 14px;
    transition:      all .2s;
}

.single-tag:hover {
    color:        var(--gold);
    border-color: var(--gold);
}

/* ── Author Bio ────────────────────────────────────────────────────────────── */
.single-author-bio {
    display:     flex;
    gap:         20px;
    align-items: flex-start;
    margin-top:  48px;
    padding:     32px;
    background:  var(--navy);
    border-left: 3px solid var(--gold);
}

.author-bio-avatar {
    width:         64px !important;
    height:        64px !important;
    border-radius: 50%;
    border:        2px solid rgba(201,168,76,.35);
    flex-shrink:   0;
}

.author-bio-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size:   16px;
    font-weight: 600;
    letter-spacing: .08em;
    color:       var(--white);
}

.author-bio-org {
    font-size:    12px;
    color:        var(--gold);
    margin-bottom: 10px;
}

.author-bio-desc {
    font-size:   14px;
    font-weight: 300;
    line-height: 1.7;
    color:       rgba(238,242,255,.6);
}

/* ── Prev / Next nav ───────────────────────────────────────────────────────── */
.single-post-nav {
    display:        flex;
    justify-content: space-between;
    gap:            24px;
    margin-top:     60px;
    padding-top:    32px;
    border-top:     1px solid rgba(238,242,255,.08);
}

.post-nav-link {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    text-decoration: none;
    max-width:      45%;
}

.post-nav-link--next {
    text-align: right;
    margin-left: auto;
}

.post-nav-label {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color:          rgba(238,242,255,.35);
}

.post-nav-title {
    font-family: 'Cormorant Garamond', serif;
    font-size:   18px;
    font-weight: 600;
    color:       var(--white);
    line-height: 1.3;
    transition:  color .2s;
}

.post-nav-link:hover .post-nav-title { color: var(--gold); }

/* ── Related Posts section ─────────────────────────────────────────────────── */
#related-posts {
    background: var(--navy);
    padding:    80px;
    border-top: 1px solid rgba(201,168,76,.1);
}

.related-headline {
    font-family:   'Cormorant Garamond', serif;
    font-size:     clamp(28px, 3vw, 42px);
    font-weight:   600;
    color:         var(--white);
    text-align:    center;
    margin:        12px 0 48px;
}

.related-headline em {
    color:      var(--gold);
    font-style: italic;
}

.blog-grid--related {
    grid-template-columns: repeat(3, 1fr);
}


/* =============================================================================
   36. BLOG — RESPONSIVE
   ============================================================================= */

@media (max-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .blog-card--featured {
        flex-direction: column;
    }
    .blog-card--featured .blog-card-img-wrap {
        flex: unset;
        aspect-ratio: 16 / 9;
    }
    .blog-grid--related {
        grid-template-columns: repeat(2, 1fr);
    }
    .single-layout {
        grid-template-columns: 160px 1fr;
        gap: 40px;
        padding: 48px 48px 64px;
    }
}

@media (max-width: 768px) {
    #blog-hero {
        padding: 120px 28px 56px;
    }
    #blog-archive,
    #blog-cta,
    #related-posts {
        padding: 48px 28px 64px;
    }
    .blog-grid,
    .blog-grid--related {
        grid-template-columns: 1fr;
    }
    .blog-card--featured {
        flex-direction: column;
    }
    .blog-card--featured .blog-card-img-wrap {
        flex: unset;
    }
    .blog-card--featured .blog-card-body {
        padding: 28px;
    }
    .single-layout {
        grid-template-columns: 1fr;
        padding: 40px 28px 60px;
    }
    .single-sidebar {
        order: -1;
    }
    .single-sidebar > .sidebar-block {
        position: static;
    }
    .single-sidebar > .sidebar-block.sidebar-block--back {
        display: none; /* rely on browser back on mobile */
    }
    #single-hero {
        padding: 130px 28px 56px;
    }
    .single-post-nav {
        flex-direction: column;
        gap: 28px;
    }
    .post-nav-link--next {
        text-align: left;
        margin-left: 0;
    }
    .single-share {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .blog-hero-headline {
        font-size: 38px;
    }
    .single-hero-title {
        font-size: 32px;
    }
    .blog-filter {
        gap: 8px;
    }
    .blog-filter-btn {
        font-size: 11px;
        padding: 7px 16px;
    }
    .single-author-bio {
        flex-direction: column;
    }
}