/* ================================================================
   AVAcey.com — shared stylesheet
   Brand tokens carried over from the loading.html lockup.
   ================================================================ */

:root {
    --gold-1: #ffd700;
    --gold-2: #e8c84a;
    --gold-3: #c9a668;
    --cyan-1: #00f2fe;
    --cyan-2: #4facfe;
    --cyan-3: #00cfff;

    --abyss: #04070d;          /* base page background, below the fold */
    --deep-blue: #011538;      /* panel / card base */
    --panel: rgba(6, 16, 34, 0.58);
    --panel-border: rgba(255, 255, 255, 0.09);
    --panel-border-hover: rgba(0, 207, 255, 0.4);

    --mist: rgba(235, 240, 248, 0.82);
    --mist-dim: rgba(235, 240, 248, 0.56);
    --mist-faint: rgba(235, 240, 248, 0.34);

    --header-h: 84px;
    --header-h-mobile: 64px;

    --gold-gradient: linear-gradient(135deg, #ffd700 0%, #e8c84a 45%, #c9a668 100%);
    --cyan-gradient: linear-gradient(90deg, #00f2fe 0%, #4facfe 35%, #00cfff 65%, #00f2fe 100%);
}

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

html { background: #000; scroll-behavior: smooth; }

body {
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    background: var(--abyss);
    color: var(--mist);
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

/* ---------------------------------------------------------------
   Fixed sky backdrop — stays put while the page scrolls over it
   --------------------------------------------------------------- */
.backdrop {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.backdrop .bg {
    position: absolute;
    inset: 0;
    background-image: url('bg.webp');
    background-size: cover;
    background-position: center 35%;
    background-repeat: no-repeat;
    filter: brightness(0.78);
    transform: scale(1.02);
}

.backdrop .overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 50% 50%, rgba(0, 40, 100, 0.28) 0%, transparent 70%),
        linear-gradient(180deg, rgba(1, 60, 130, 0.38) 0%, rgba(0, 25, 70, 0.12) 45%, rgba(1, 60, 130, 0.38) 100%);
}

/* darker wash used on inner pages so long-form text stays legible
   over the photo as it scrolls underneath */
.backdrop .wash {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(2, 6, 14, 0.55) 0%,
        rgba(2, 6, 14, 0.72) 30%,
        rgba(2, 6, 14, 0.88) 70%,
        rgba(2, 6, 14, 0.97) 100%);
}

/* ---------------------------------------------------------------
   Snake-field — Company page's background: thin glowing lines in
   green and cyan, each drifting slowly left-to-right with a fading
   trail behind it, at staggered speeds/positions so they never
   feel synchronized
   --------------------------------------------------------------- */
.snake-field {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: var(--abyss);
}

.snake {
    position: absolute;
    left: -240px;
    height: 2px;
    border-radius: 1px;
    animation-name: snake-drift;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.snake-cyan {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 242, 254, 0.05) 20%,
        rgba(0, 242, 254, 0.85) 88%,
        rgba(170, 255, 255, 1) 100%);
    box-shadow: 0 0 8px 1px rgba(0, 242, 254, 0.45);
}

.snake-green {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(57, 255, 20, 0.05) 20%,
        rgba(57, 255, 20, 0.85) 88%,
        rgba(200, 255, 180, 1) 100%);
    box-shadow: 0 0 8px 1px rgba(57, 255, 20, 0.45);
}

@keyframes snake-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100vw + 480px)); }
}

@media (prefers-reduced-motion: reduce) {
    .snake { animation: none; opacity: 0.12; }
}

/* ---------------------------------------------------------------
   Header — transparent, fixed, blurs on scroll
   --------------------------------------------------------------- */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(1.25rem, 4vw, 3.5rem);
    background: transparent;
    transition: background 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease, height 0.3s ease;
    border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
    background: rgba(3, 8, 18, 0.66);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--panel-border);
}

/* Operational notice — lives in the real flex gap between the logo and
   nav (not centered on the full header width), so it can never overlap
   either one; truncates gracefully with an ellipsis if space gets tight
   rather than colliding with the nav links */
.header-notice {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--mist-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 1rem;
    pointer-events: none;
}

.header-notice .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--gold-1);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.65);
    animation: notice-pulse 2.2s ease-in-out infinite;
}

@keyframes notice-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@media (max-width: 860px) {
    .header-notice { display: none; }
}

.site-header .brand-mark {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    display: flex;
    align-items: baseline;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* on inner pages the small mark is shown right away */
body:not(.page-home) .site-header .brand-mark {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.brand-mark .av { font-weight: 200; background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.brand-mark .prefix { background-image: var(--cyan-gradient); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shine 3.5s linear infinite; }
.brand-mark .dot { background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Home page only: plain tagline in the header-mark slot, styled to
   match the nav links' color/weight rather than the bold gradient
   wordmark that normally lives there (and stays hidden on Home, since
   the big hero logo already covers that role) */
.brand-mark.fsd-tagline {
    font-size: 0.92rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--mist-dim);
    white-space: nowrap;
}

/* This variant should show on Home even though the header wordmark
   normally doesn't — overrides the opacity:0 default above */
body.page-home .site-header .brand-mark.fsd-tagline {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

@keyframes shine { to { background-position: 200% center; } }

.site-nav { position: relative; display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.75rem); }

.site-nav a {
    position: relative;
    font-size: 0.92rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mist-dim);
    padding: 0.35rem 0;
    transition: color 0.25s ease;
}

.site-nav a:hover { color: var(--mist); }
.site-nav a.active { color: var(--mist); }

/* Persistent baseline — a thin gray line under the whole nav. Built
   as ::after on .site-nav itself rather than a separate JS-positioned
   element: since .site-nav is a flex container sized to fit its
   content (not stretched), left:0/right:0 here automatically spans
   exactly from the first link to the last with no JS calculation and
   no risk of the two drifting out of sync. The spike sits on top of
   this line so it reads as a bump rising out of it. */
.site-nav::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 1.5px;
    background: var(--mist-dim);
}

/* Spike indicator — a single shared element per state (not one per
   link) that slides horizontally to sit under whichever link is
   relevant. Gold marks whatever's being hovered; cyan marks the
   current page. Both fade from the same gray as the baseline at
   their edges, so the spike reads as part of the line, not separate
   from it. */
.nav-spike {
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 16px;
    height: 7px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    transition: left 0.3s ease, opacity 0.25s ease;
    z-index: 1;
}

.nav-spike.visible { opacity: 1; }

.nav-spike-hover {
    background: var(--mist);
}

.nav-spike-active {
    background: var(--mist-dim);
}

.nav-toggle {
    display: none;
    width: 34px; height: 34px;
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    color: var(--mist);
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
}

/* ---------------------------------------------------------------
   Hero (home page) — panoramic band of the sky photo, centered
   vertically in the hero, with dark page background everywhere else
   --------------------------------------------------------------- */
.hero {
    position: relative;
    height: 100svh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    padding: 0 1.25rem;
    text-align: center;
    background: var(--abyss);
}

.hero-panorama {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: clamp(220px, 34vw, 420px);
    overflow: hidden;
    z-index: 0;
}

.hero-panorama .bg {
    position: absolute;
    inset: 0;
    background-image: url('bg.webp');
    background-size: cover;
    background-position: center 35%;
    background-repeat: no-repeat;
    filter: brightness(0.78);
    transform: scale(1.02);
}

.hero-panorama .overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 50% 50%, rgba(0, 40, 100, 0.28) 0%, transparent 70%),
        linear-gradient(180deg, rgba(1, 60, 130, 0.38) 0%, rgba(0, 25, 70, 0.12) 45%, rgba(1, 60, 130, 0.38) 100%),
        linear-gradient(180deg, rgba(2, 6, 14, 0.7) 0%, transparent 18%, transparent 82%, rgba(2, 6, 14, 0.7) 100%);
}

/* Gold/white sun beam — sits right at the bottom edge of the photo
   band, distinct from the cyan brand beam further down near "Scroll".
   Kept deliberately faint so it doesn't compete with the logo above it. */
.hero-panorama .sun-beam-gold {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    overflow: hidden;
    z-index: 1;
    background: linear-gradient(90deg,
        rgba(255, 215, 0, 0.08) 0%,
        rgba(255, 255, 255, 0.13) 50%,
        rgba(255, 215, 0, 0.08) 100%);
}

.hero-panorama .sun-beam-gold::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 32%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 215, 0, 0.4) 35%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 215, 0, 0.4) 65%,
        transparent 100%);
    filter: blur(2px);
    transform: translateX(var(--sweep, 330%));
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .hero-panorama .sun-beam-gold::before { display: none; }
}

.hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
}

.hero .logo {
    font-size: clamp(2.6rem, 18vw, 15rem);
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1.1;
    padding-bottom: 0.1em;
    filter: drop-shadow(0 3px 48px rgba(0, 0, 0, 0.6));
    white-space: nowrap;
}

.hero .logo .av { font-weight: 200; background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero .logo .prefix { display: inline-block; padding-bottom: 0.18em; margin-bottom: -0.18em; background-image: var(--cyan-gradient); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shine 3.5s linear infinite; }
.hero .logo .dot { background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.hero .tagline {
    font-size: clamp(0.95rem, 2.4vw, 1.3rem);
    font-weight: 300;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mist-dim);
}

.hero .scroll-cue {
    position: absolute;
    bottom: clamp(1.5rem, 4vh, 3rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--mist-faint);
    transition: color 0.3s ease;
}

.hero .scroll-cue:hover {
    color: var(--cyan-3);
    text-shadow: 0 0 14px rgba(0, 207, 255, 0.55);
}

/* Literal mouse-scroll icon — a rounded outline standing in for a
   mouse body, with a small settings-wheel (gear) icon inside that
   spins slowly in place. Colored to match the nav tabs' resting grey,
   brightening to the tabs' hover grey on interaction. */
.scroll-cue .mouse-icon {
    display: inline-block;
    width: 22px;
    height: 36px;
    border: 2px solid var(--mist-dim);
    border-radius: 12px;
    position: relative;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.scroll-cue:hover .mouse-icon {
    border-color: var(--mist);
    box-shadow: 0 0 10px rgba(235, 240, 248, 0.25);
}

.scroll-cue .wheel {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    color: var(--mist-dim);
    animation: gear-spin 6s linear infinite;
    transition: color 0.3s ease;
}

.scroll-cue .wheel svg {
    display: block;
    width: 100%;
    height: 100%;
}

.scroll-cue:hover .wheel {
    color: var(--mist);
}

@keyframes gear-spin {
    to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------
   Sun-line — 8px horizon divider between hero and content; a bright
   glint sweeps right-to-left across it as the page scrolls, driven
   by JS setting --sweep on scroll (see site.js)
   --------------------------------------------------------------- */
.sun-line {
    position: relative;
    height: 8px;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(90deg,
        rgba(0, 207, 255, 0.14) 0%,
        rgba(0, 242, 254, 0.26) 50%,
        rgba(0, 207, 255, 0.14) 100%);
}

.sun-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 45%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(79, 172, 254, 0.85) 35%,
        rgba(0, 242, 254, 1) 50%,
        rgba(0, 207, 255, 0.85) 65%,
        transparent 100%);
    filter: blur(1.5px);
    transform: translateX(var(--sweep-cyan, -160%));
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .sun-line::before { display: none; }
}

/* ---------------------------------------------------------------
   Content sections (below hero on Home)
   --------------------------------------------------------------- */
.section { position: relative; padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 5vw, 4rem); }

.section-intro { max-width: 780px; margin: 0 auto clamp(2.5rem, 6vw, 4rem); text-align: center; }

.section-intro .eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--cyan-3);
    margin-bottom: 0.9rem;
}

.section-intro h2 {
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    font-weight: 300;
    letter-spacing: -0.01em;
    color: var(--mist);
}

.section-intro p {
    margin-top: 0.9rem;
    color: var(--mist-dim);
    font-size: 1.02rem;
    line-height: 1.6;
}

/* Bay panels — the signature element: four vertical dispatch-bay cards */
.bay-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2.2vw, 1.75rem);
    max-width: 1180px;
    margin: 0 auto;
}

.bay {
    position: relative;
    min-height: clamp(420px, 52vw, 540px);
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.5rem 2rem;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow: hidden;
    transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.bay::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--cyan-gradient);
    background-size: 200% auto;
    opacity: 0.85;
}

.bay:hover {
    transform: translateY(-6px);
    border-color: var(--panel-border-hover);
    box-shadow: 0 20px 40px -18px rgba(0, 207, 255, 0.25);
}

.bay .bay-id {
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold-3);
    margin-bottom: 1.4rem;
}

.bay h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--mist);
    margin-bottom: 0.85rem;
    letter-spacing: -0.01em;
}

.bay p {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--mist-dim);
    flex: 1;
}

/* Icon / illustration centered above the "Learn more" line */
.bay-image {
    width: 66%;
    max-width: 250px;
    aspect-ratio: 16 / 9;
    margin: 1.5rem auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bay-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* The RobotaxiON asset is a framed photo rather than a transparent
   icon, so it gets a subtle border/rounding instead of floating free */
.bay-image.photo img {
    border-radius: 6px;
    border: 1px solid var(--panel-border);
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.5);
}

/* Bow-tie — a short, stocky elastic "pop" fired at irregular intervals
   by site.js (not a fixed loop, so it never settles into a predictable
   rhythm). The squash/stretch overshoot is what gives it the elastic
   snap rather than a plain scale-up. */
.bay-image.bowtie img.pop-elastic {
    animation: bowtie-pop 0.62s cubic-bezier(0.34, 1.66, 0.55, 1) 1;
}

@keyframes bowtie-pop {
    0%   { transform: scale(1, 1); }
    28%  { transform: scale(1.24, 0.82); }
    50%  { transform: scale(0.9, 1.12); }
    72%  { transform: scale(1.08, 0.95); }
    100% { transform: scale(1, 1); }
}

/* Attaché-case row — five icons that stay put; site.js triggers a
   quick bump or flip on individual icons at randomized intervals, so
   the row reads as still with occasional life rather than in motion */
.attache-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin: 1.5rem 0 1.25rem;
}

.ac-item {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ac-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.8;
}

.ac-item img.ac-pop-bump {
    animation: ac-bump 0.9s ease-in-out 1;
}

@keyframes ac-bump {
    0%, 100% { transform: translateY(0); }
    35%      { transform: translateY(-10px); }
    60%      { transform: translateY(1px); }
    80%      { transform: translateY(-2px); }
}

.ac-item img.ac-pop-flip {
    animation: ac-flip 0.8s ease-in-out 1;
}

@keyframes ac-flip {
    0%, 100% { transform: rotate(0deg); }
    55%      { transform: rotate(180deg); }
    100%     { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .bay-image.bowtie img.pop-elastic { animation: none; }
    .ac-item img.ac-pop-bump,
    .ac-item img.ac-pop-flip { animation: none; }
}

.bay .bay-foot {
    margin-top: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--panel-border);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mist-faint);
}

@media (max-width: 980px) {
    .bay-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .bay-grid { grid-template-columns: 1fr; }
    .bay { min-height: 220px; }
}

/* ---------------------------------------------------------------
   Inner-page article shell (Company / Compliance / Contact)
   --------------------------------------------------------------- */
.page-shell {
    position: relative;
    padding: calc(var(--header-h) + 3.5rem) clamp(1.25rem, 5vw, 4rem) 6rem;
    max-width: 900px;
    margin: 0 auto;
}

/* Contained background photo — a 5:7 portrait crop of the sky image,
   confined to the space between the header and footer (never shows
   underneath either), rather than the old full-page fixed backdrop */
.page-bg-photo {
    position: absolute;
    top: var(--header-h);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(72%, 480px);
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 10%, black 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, black 10%, black 88%, transparent 100%);
}

.page-bg-photo .img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    aspect-ratio: 5 / 7;
    background-image: url('bg.webp');
    background-size: cover;
    background-position: center 35%;
    filter: brightness(0.55) saturate(0.85);
    opacity: 0.65;
}

.page-bg-photo .wash {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(2, 6, 14, 0.35) 0%,
        rgba(2, 6, 14, 0.12) 25%,
        rgba(2, 6, 14, 0.12) 75%,
        rgba(2, 6, 14, 0.55) 100%);
}

.page-shell .eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--cyan-3);
    margin-bottom: 1rem;
}

.page-shell h1 {
    font-size: clamp(2.1rem, 5vw, 3.1rem);
    font-weight: 300;
    letter-spacing: -0.01em;
    color: var(--mist);
    margin-bottom: 0.75rem;
}

.page-shell .lede {
    font-size: 1.08rem;
    line-height: 1.65;
    color: var(--mist-dim);
    max-width: 640px;
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.info-card {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    margin-bottom: 1.5rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease;
}

/* Matches .bay:hover on the home page exactly (same border color, same
   glow) — but triggered by scroll visibility instead of the mouse, via
   IntersectionObserver in site.js */
.info-card.in-view {
    transform: translateY(-6px);
    border-color: var(--panel-border-hover);
    box-shadow: 0 20px 40px -18px rgba(0, 207, 255, 0.25);
}

@media (prefers-reduced-motion: reduce) {
    .info-card.in-view { transform: none; }
}

.info-card h2 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--mist);
    margin-bottom: 0.7rem;
    letter-spacing: -0.005em;
}

.info-card p { color: var(--mist-dim); font-size: 0.98rem; line-height: 1.65; }
.info-card p + p { margin-top: 0.85rem; }

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

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

.contact-line {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: 0.98rem;
    color: var(--mist-dim);
}

.contact-line + .contact-line { margin-top: 0.6rem; }

.contact-line .label {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-3);
    min-width: 88px;
}

.contact-line a:hover { color: var(--cyan-3); }

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.site-footer {
    position: relative;
    border-top: 1px solid var(--panel-border);
    background: rgba(2, 6, 14, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 4rem) 2rem;
}

.footer-grid {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2.5rem;
}

.footer-brand .brand-mark { font-size: 1.35rem; margin-bottom: 0.9rem; }
.footer-brand p { color: var(--mist-faint); font-size: 0.88rem; line-height: 1.6; max-width: 320px; }

.footer-col h4 {
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold-3);
    margin-bottom: 1rem;
}

.footer-col ul { list-style: none; }
.footer-col li + li { margin-top: 0.6rem; }
.footer-col a { color: var(--mist-dim); font-size: 0.92rem; transition: color 0.2s ease; }
.footer-col a:hover { color: var(--cyan-3); }

.footer-bottom {
    max-width: 1180px;
    margin: 2.5rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--panel-border);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.78rem;
    color: var(--mist-faint);
}

@media (max-width: 760px) {
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------------------------------------------------------------
   Mobile nav
   --------------------------------------------------------------- */
@media (max-width: 720px) {
    .site-header { height: var(--header-h-mobile); }
    .nav-toggle { display: flex; }
    .site-nav {
        position: fixed;
        top: var(--header-h-mobile);
        left: 0; right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: rgba(3, 8, 18, 0.96);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--panel-border);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
    }
    .site-nav.open { max-height: 260px; }
    .site-nav a { width: 100%; padding: 1rem 1.5rem; }
    .nav-spike { display: none; }
    .site-nav::after { display: none; }
    body:not(.page-home) .site-header .brand-mark { font-size: 1.2rem; }
    .page-shell { padding-top: calc(var(--header-h-mobile) + 2.5rem); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .prefix, .scroll-cue .wheel, .header-notice .dot { animation: none; }
    .bay, .site-header, .site-nav { transition: none; }
}

/* Touch devices (phones/tablets) — :hover rarely fires reliably here,
   so the mouse-scroll icon and the section-outline highlight are
   made permanent instead of hover-triggered. Two conditions, either
   one triggers it: true touch-primary input (hover:none/pointer:coarse),
   OR a phone/tablet-sized viewport — the second catches hybrid devices
   (e.g. an iPad with a paired trackpad) that report mouse-like input
   capability despite being a tablet. */
@media (hover: none) and (pointer: coarse), (max-width: 1024px) {
    .hero .scroll-cue {
        color: var(--mist);
        text-shadow: 0 0 14px rgba(235, 240, 248, 0.4);
    }
    .scroll-cue .mouse-icon {
        border-color: var(--mist);
        box-shadow: 0 0 10px rgba(235, 240, 248, 0.25);
    }
    .scroll-cue .wheel {
        color: var(--mist);
    }

    .bay,
    .info-card {
        border-color: var(--panel-border-hover);
        box-shadow: 0 20px 40px -18px rgba(0, 207, 255, 0.25);
    }
}

:focus-visible {
    outline: 2px solid var(--cyan-3);
    outline-offset: 2px;
}