:root {
    --brand-red: #b30000; /* Main vibrant red */
    --brand-red-dark: #6e0000;
    --brand-red-deep: #400000;
    --black-base: #050505;
    --black-light: #111111;
    --black-pure: #000000;
    
    --gold-accent: #E5C158; /* Warm festive gold */
    
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.6);
    --font-main: 'Manrope', sans-serif;
    
    /* Typography System */
    --font-size-h1: clamp(4rem, 10vw, 10rem);
    --font-size-h2: clamp(2.5rem, 5vw, 4rem);
    --font-size-h3: clamp(1.8rem, 2.6vw, 2.1rem);
    --font-size-h4: 1.2rem;
    --font-size-large: clamp(1.2rem, 2vw, 1.5rem);
    --font-size-body: 1.05rem;
    --font-size-small: 0.9rem;
    
    --glass-border: rgba(255, 255, 255, 0.1);
    
    /* Dynamic Radius (One corner rounded) */
    --radius-dynamic: 0 40px 0 0;
    --radius-dynamic-small: 0 20px 0 0;
}

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

html {
    scroll-behavior: initial;
}

body {
    background-color: var(--black-base);
    color: var(--text-primary);
    font-family: var(--font-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.site-wrapper {
    overflow-x: hidden;
    width: 100%;
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.section-padding {
    padding: 140px 0;
}

.text-center {
    text-align: center;
}

.accent {
    color: var(--gold-accent);
    font-weight: 800;
}

.section-title {
    font-size: var(--font-size-h2);
    line-height: 1.1;
    margin-bottom: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 24px 200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    transition: background 0.4s ease, padding 0.4s ease, border-bottom 0.4s ease;
    border-bottom: 1px solid transparent;
}

.header.scrolled {
    background: rgba(0, 0, 0, 0.95);
    padding: 16px 200px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.logo {
    /* Fixed-height, fixed-width box the two logo variants crossfade
       inside — width covers the wordmark's wider footprint so it never
       has to push .main-nav around when it fades in. */
    position: relative;
    width: 150px;
    height: 80px;
    transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.header.scrolled .logo {
    height: 40px;
}

.logo-img {
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    opacity: 1;
    transition: opacity 0.35s ease;
}

/* At rest: the triangle mark alone, sized big. Once fixed/scrolled: it
   fades out and the full "ARRIVA" wordmark fades in in its place —
   the mark's tiny baked-in wordmark text isn't legible at 40px, so the
   compact header gets its own wider lockup instead of just a shrunk
   copy of the same asset. */
.logo-img--mark {
    height: 80px;
}

.logo-img--wide {
    height: 40px;
    opacity: 0;
    pointer-events: none;
}

.header.scrolled .logo-img--mark {
    opacity: 0;
    pointer-events: none;
}

.header.scrolled .logo-img--wide {
    opacity: 1;
    pointer-events: auto;
}

.main-nav {
    display: flex;
    gap: 32px;
}

.main-nav a {
    color: var(--text-primary);
    text-decoration: none;
    font-size: var(--font-size-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
}

/* Own breakpoints, separate from the 992px tablet tier: with the 200px
   side padding, the bigger logo and the RU/KZ/EN switch, a one-line header
   only fits when the phone drops below 1800px and the nav below 1600px
   (Kazakh labels are the longest). A wrapped nav collides with the hero
   title behind the transparent at-rest header. */
.main-nav a {
    white-space: nowrap;
}

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

@media (max-width: 1600px) {
    .main-nav {
        display: none;
    }
}

.main-nav a:hover {
    color: var(--brand-red);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 30px;
}

.lang-switch {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
}

.lang-switch button {
    all: unset;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.25s ease, background 0.25s ease;
}

.lang-switch button:hover {
    color: var(--text-primary);
}

.lang-switch button.is-active {
    background: var(--text-primary);
    color: var(--black-pure);
}

.lang-switch button:focus-visible {
    outline: 2px solid var(--gold-accent);
    outline-offset: 2px;
}

.header-phone {
    color: var(--text-primary);
    font-size: var(--font-size-small);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.3s ease;
}

.header-phone:hover {
    color: var(--brand-red);
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    color: var(--text-primary);
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: var(--brand-red);
}

.btn-outline {
    padding: 12px 28px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--radius-dynamic-small);
    color: var(--text-primary);
    background: transparent;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: var(--text-primary);
    color: var(--black-base);
    border-color: var(--text-primary);
}

.btn-primary {
    display: inline-block;
    padding: 20px 48px;
    background: var(--black-pure);
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--radius-dynamic);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--black-pure);
    transition: all 0.3s ease;
    cursor: pointer;
}

.cta-btn {
    margin-top: 15px;
}

.btn-primary:hover {
    background: var(--brand-red);
    border-color: var(--brand-red);
    color: #fff;
    box-shadow: 0 10px 30px rgba(179, 0, 0, 0.4);
    transform: translateY(-2px);
}

/* Hero Section (Deep Red) */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 0 200px 15vh 200px;
    overflow: hidden;
    background-color: var(--brand-red-dark);
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.hero-bg-parallax {
    /* Farthest layer — the red/rays/ARRIVA-watermark background plate
       supplied for this. Slightly oversized so there's room to move it for
       parallax without exposing an edge. The watermark is baked into this
       image, so there's no separate .hero-watermark element anymore. */
    position: absolute;
    top: -5%;
    left: -2%;
    width: 104%;
    height: 110%;
    background: url('images/hero-bg.jpg') center/cover no-repeat;
}

.hero-overlay {
    display: none; /* User requested to remove the overlay */
}

.hero-award {
    /* Award marks beside the team photo, in the empty red space above the
       title — chest height, well above the bottom-fade and title. Plain
       type on the red plate itself (a sparkle + a big rank + a caption),
       no card or icon circle — reads as print, not UI. */
    position: absolute;
    top: 30%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
    width: 220px;
}

.hero-award--left {
    left: clamp(16px, 11vw, 200px);
}

.hero-award--right {
    right: clamp(16px, 11vw, 200px);
    align-items: flex-end;
}

.hero-award--right .hero-award-title {
    text-align: right;
}

.hero-award-spark {
    width: 26px;
    height: 26px;
    color: var(--text-primary);
}

.hero-award-rank {
    /* Manrope tops out at weight 800 — the extra -webkit-text-stroke fakes
       a heavier cut on top of that instead of relying on browser synthetic
       bold, which can look mushy. */
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
    text-transform: uppercase;
    -webkit-text-stroke: 1px var(--text-primary);
}

.hero-award-title {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.1;
    text-align: left;
}

@media (max-width: 992px) {
    .hero-award {
        /* Portrait/tablet aspect ratios push the team photo much lower and
           taller than on desktop (16:9 vs closer to 3:4) — the chest-height
           band the badges target on desktop either floats alone in empty
           space or collides with the stacked title here, depending on the
           exact aspect ratio. No fixed top value works across that whole
           range, so the badges are dropped for this tier entirely. */
        display: none;
    }
}

.hero-bottom-fade {
    /* Sits above the background plate and the team photo, below the text —
       blends the bottom half of the hero into the section's base red so the
       photo's hard bottom edge disappears instead of cutting off sharply. */
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 65%;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(to top, var(--brand-red-dark) 0%, rgba(110, 0, 0, 0.55) 40%, rgba(110, 0, 0, 0) 100%);
}

.hero-team {
    /* Nearest layer — scaled 30% larger than the original flat images/2.png
       placement (50vw base) per user request. Centered, feet near the
       bottom edge. */
    position: absolute;
    left: 50%;
    bottom: -2%;
    width: 55vw;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55));
}

.hero-team img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 992px) {
    .hero-team {
        width: 69vw;
        opacity: 0.6;
    }
}

@media (max-width: 640px) {
    /* Mobile had no team photo at all — the stacked title used to claim the
       whole bottom half, so the photo got dropped rather than overlapped.
       Instead: move it to the empty band above the (also stacked, top-
       anchored) title, right under the header, so both read cleanly with
       no shared space. */
    .hero-team {
        display: block;
        left: 50%;
        top: 25%;
        bottom: auto;
        width: 100vw;
        opacity: 0.95;
    }
}

@media (max-width: 640px) and (max-height: 699px) {
    /* Short viewports (older/small phones, landscape) don't have a clear
       band above the title for the photo to live in without overlapping —
       drop it rather than let it collide. */
    .hero-team {
        display: none;
    }
}

.hero-content {
    position: relative;
    z-index: 5;
    width: fit-content;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 0;
}

.hero-title-wrapper {
    display: flex;
    align-items: center; /* Baseline might offset them awkwardly on some fonts, let's use center or flex-end */
    gap: 20px;
    margin-bottom: 15px;
}

.hero-title-main {
    font-size: var(--font-size-h1);
    font-weight: 800;
    line-height: 0.85;
    letter-spacing: -0.04em;
}

.hero-title-sub {
    font-size: clamp(1.5rem, 3.5vw, 3.5rem);
    font-weight: 300;
    line-height: 1.1;
    text-align: left;
}

.hero-bottom-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hero-subtitle {
    font-size: var(--font-size-body);
    color: var(--text-primary);
    max-width: 580px;
    line-height: 1.5;
    font-weight: 300;
    margin-left: 10px;
}

.hero-subtitle strong {
    font-weight: 700;
}

.hero-stats {
    position: absolute;
    bottom: 40px;
    left: 200px;
    z-index: 4;
    display: flex;
    gap: 40px;
    font-size: var(--font-size-small);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

@media (max-width: 640px) and (max-height: 699px) {
    /* Same short-viewport shortage the .hero-team rule above handles —
       the stats bar's fixed spot near the hero's bottom edge collides
       with the CTA button once the button wraps to 2 lines on these
       heights. Placed after the base .hero-stats rule (unlike a media
       query positioned earlier in the file, whose display:none would
       lose the cascade to this later unconditional display:flex despite
       matching the viewport) so it actually wins. */
    .hero-stats {
        display: none;
    }
}

.hero-stats span strong {
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-right: 8px;
}

/* Manifesto Section (Solid Black with Gradients) */
.manifesto {
    background-color: var(--black-base);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 120px 0;
    min-height: 800px;
    display: flex;
    align-items: center;
}

.manifesto-bg-glow {
    position: absolute;
    top: -20%; left: -10%;
    width: 60%; height: 80%;
    background: radial-gradient(circle, rgba(179,0,0,0.15) 0%, transparent 60%);
    z-index: 0;
}

.manifesto-watermark {
    position: absolute;
    bottom: -150px;
    right: -20px;
    font-size: 28vw;
    font-weight: 900;
    color: rgba(179,0,0,0.15);
    line-height: 1;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.manifesto-image-absolute {
    position: absolute;
    top: 0;
    left: 0;
    width: 38%;
    height: 100%;
    z-index: 2;
    clip-path: polygon(0 0, 75% 0, 100% 100%, 0% 100%);
}

.manifesto-image-absolute img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
}

.manifesto-content {
    position: relative;
    z-index: 3;
    padding: 20px 60px 20px 0;
    max-width: 900px;
    margin-left: 40%;
}

.manifesto-text {
    font-size: var(--font-size-large);
    color: var(--text-secondary);
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 40px;
}

.manifesto-actions {
    display: flex;
    align-items: center;
    gap: 40px;
}

.btn-video {
    background: var(--brand-red);
    color: #fff;
    padding: 28px 56px;
    border: none;
    border-radius: var(--radius-dynamic-small);
    font-family: inherit;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.btn-video:hover {
    transform: translateY(-3px);
}

.video-thumbnail {
    position: relative;
    width: 360px;
    border-radius: 12px;
    overflow: hidden;
    transform: rotate(-12deg);
    border: 3px solid rgba(255,255,255,0.1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.video-thumbnail:hover {
    transform: rotate(-8deg) scale(1.05);
}

.video-thumbnail img {
    width: 100%;
    display: block;
}

.yt-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 63px;
    background: #ff0000;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.6rem;
}

/* Approach Section (Deep Dark Red) */
.approach {
    /* Fallback in case the two layers below don't load — same as before. */
    background-color: var(--brand-red-deep);
    position: relative;
    overflow: hidden;
}

/* Photo layer, grayscale — split into its own ::before so `filter` only
   touches the photo, not the gold/white text sitting on top of it. */
.approach::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('images/IMG_4247.jpg') center 30% / cover no-repeat;
    filter: grayscale(1);
}

/* Red gradient, on top of the photo — still the readable surface for text. */
.approach::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(160deg, rgba(64, 0, 0, 0.9) 0%, rgba(110, 0, 0, 0.86) 100%);
}

.approach .container {
    position: relative;
    z-index: 2;
}

.approach-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.approach-desc {
    font-size: var(--font-size-large);
    color: var(--text-secondary);
    font-weight: 300;
    line-height: 1.7;
}

/* A small equalizer instead of a photo — literally "the energy of the room"
   the copy is about, built from seven bars pulsing at their own offbeat
   timing so it reads as alive rather than a looping animation. */
.approach-pulse {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 26px;
    margin-bottom: 20px;
}

.approach-pulse span {
    width: 4px;
    border-radius: 2px;
    background: var(--gold-accent);
    transform-origin: bottom;
    animation: pulse-bar 1.1s ease-in-out infinite;
}

.approach-pulse span:nth-child(1) { height: 40%; animation-delay: -0.9s; animation-duration: 1.3s; }
.approach-pulse span:nth-child(2) { height: 90%; animation-delay: -0.2s; animation-duration: 1.0s; }
.approach-pulse span:nth-child(3) { height: 60%; animation-delay: -0.6s; animation-duration: 1.4s; }
.approach-pulse span:nth-child(4) { height: 100%; animation-delay: -1.1s; animation-duration: 0.9s; }
.approach-pulse span:nth-child(5) { height: 50%; animation-delay: -0.4s; animation-duration: 1.2s; }
.approach-pulse span:nth-child(6) { height: 80%; animation-delay: -0.7s; animation-duration: 1.1s; }
.approach-pulse span:nth-child(7) { height: 35%; animation-delay: -1.0s; animation-duration: 1.3s; }

@keyframes pulse-bar {
    0%, 100% { transform: scaleY(0.35); }
    50% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
    .approach-pulse span {
        animation: none;
    }
}

.approach-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--gold-accent);
    margin-bottom: 18px;
}

.quote-box {
    position: relative;
    background: var(--black-base);
    padding: 56px 50px 50px;
    border-radius: var(--radius-dynamic);
    border-left: 5px solid var(--gold-accent);
    overflow: hidden;
}

/* A single oversized typographic glyph standing in for a photo/icon — bleeds
   above the text at low opacity so it reads as texture, not as a UI element. */
.quote-mark {
    position: absolute;
    top: 6px;
    left: 34px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 7rem;
    line-height: 1;
    font-weight: 700;
    color: var(--gold-accent);
    opacity: 0.25;
    pointer-events: none;
    user-select: none;
}

.quote-box p {
    position: relative;
    z-index: 1;
    font-size: var(--font-size-large);
    font-weight: 400;
    line-height: 1.6;
    color: #fff;
}

/* Typewriter chars (script.js) — start invisible, GSAP staggers them to
   opacity:1 one at a time once the box has scrolled into view. */
.quote-box p .char {
    opacity: 0;
}

.quote-box p .typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    background: var(--gold-accent);
    vertical-align: text-bottom;
    animation: cursor-blink 0.85s step-end infinite;
}

.quote-box p .typing-cursor.done {
    animation: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .quote-box p .typing-cursor {
        animation: none;
        opacity: 0;
    }
}

/* Formats Section (Black) */
.formats {
    background-color: var(--black-light);
    position: relative;
    overflow: hidden;
}

.formats .container {
    position: relative;
    z-index: 1;
}

.formats-intro {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
    margin-bottom: 60px;
}

.formats-intro p {
    max-width: 480px;
    font-size: var(--font-size-large);
    color: var(--text-secondary);
    font-weight: 300;
    text-align: right;
}

/* .formats-intro p (class+tag) outweighs a bare .formats-highlight (class
   only) in specificity regardless of source order — scope it the same way
   so this override actually wins. */
.formats-intro p.formats-highlight {
    max-width: 460px;
    color: var(--text-primary);
    font-weight: 600;
    font-size: var(--font-size-h3);
    text-align: left;
}

@media (max-width: 900px) {
    .formats-intro {
        flex-direction: column;
        gap: 24px;
    }
    .formats-intro p,
    .formats-highlight {
        max-width: 100%;
        text-align: left;
    }
}

.formats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.format-card {
    position: relative;
    height: 450px;
    border-radius: var(--radius-dynamic);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 40px 28px;
    cursor: pointer;
}

.format-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s ease;
    z-index: 1;
}

.format-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.1) 100%);
    z-index: 2;
    transition: background 0.4s ease;
}

.format-card:hover .format-bg {
    transform: scale(1.05);
}

.format-card:hover::after {
    background: linear-gradient(to top, rgba(179,0,0,0.9) 0%, rgba(0,0,0,0.2) 100%);
}

.format-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-red);
    color: #fff;
    font-size: 1.4rem;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.format-card:hover .format-play,
.format-card:focus-visible .format-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.format-card h3 {
    position: relative;
    z-index: 3;
    width: 100%;
    font-size: var(--font-size-h3);
    font-weight: 800;
    text-transform: uppercase;
    /* At 3-column widths (~1300-1400px) a single long word like "НАЦИОНАЛЬНЫЙ"
       can be wider than the card's own inner width — nothing left to wrap at,
       so it silently overflowed past `.format-card`'s overflow:hidden and lost
       its last letter. Breaking inside the word beats clipping it. */
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Why Arriva Section (Vibrant Red) */
.why-arriva {
    /* Plain dark, matching .formats above it — no red wash. */
    background-color: var(--black-light);
    position: relative;
    overflow: hidden;
    /* .fan-accordion bleeds full-width — the section is a column so the
       strip sits flush against the section's own bottom edge. */
    display: flex;
    flex-direction: column;
    padding-top: 70px;
    padding-bottom: 0;
}

/* Horizontal "fan" accordion — 8 collapsed strips, one expands at a time to
   reveal its photo; the label rotates from a vertical spine to a horizontal
   headline. Classic flex-grow accordion (each panel flex:1, the open one
   flex:6) — no JS needed for the animation itself, only for pinning the
   active panel on touch devices that have no :hover. */
.fan-accordion {
    display: flex;
    align-items: stretch;
    gap: 6px;
    height: 800px;
    margin-top: 40px;
    border-radius: var(--radius-dynamic);
    overflow: hidden;
}

.fan-panel {
    position: relative;
    flex: 1 1 0%;
    min-width: 64px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    outline: none;
    transition: flex-grow 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.fan-panel.active,
.fan-panel:focus-visible {
    flex-grow: 6;
}

@media (hover: hover) {
    .fan-panel:hover {
        flex-grow: 6;
    }
}

.fan-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 5, 5, 0.25) 0%, rgba(5, 5, 5, 0.55) 55%, rgba(5, 5, 5, 0.95) 100%);
    filter: saturate(0.7);
    transition: background 0.5s ease, filter 0.5s ease;
}

.fan-panel.active .fan-overlay,
.fan-panel:focus-visible .fan-overlay {
    background: linear-gradient(180deg, rgba(5, 5, 5, 0.05) 0%, rgba(5, 5, 5, 0.35) 60%, rgba(5, 5, 5, 0.88) 100%);
    filter: saturate(1);
}
@media (hover: hover) {
    .fan-panel:hover .fan-overlay {
        background: linear-gradient(180deg, rgba(5, 5, 5, 0.05) 0%, rgba(5, 5, 5, 0.35) 60%, rgba(5, 5, 5, 0.88) 100%);
        filter: saturate(1);
    }
}

.fan-icon {
    position: absolute;
    top: 28px;
    left: 24px;
    z-index: 2;
    font-size: 1.4rem;
    color: var(--gold-accent);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.35s ease 0.15s, transform 0.35s ease 0.15s;
}

.fan-panel.active .fan-icon,
.fan-panel:focus-visible .fan-icon {
    opacity: 1;
    transform: translateY(0);
}
@media (hover: hover) {
    .fan-panel:hover .fan-icon {
        opacity: 1;
        transform: translateY(0);
    }
}

.fan-label {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 24px 0 24px 20px;
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.fan-panel.active .fan-label,
.fan-panel:focus-visible .fan-label {
    writing-mode: horizontal-tb;
    transform: none;
    max-width: 78%;
    white-space: normal;
    font-size: var(--font-size-h4);
    padding: 0 24px 32px 28px;
}
@media (hover: hover) {
    .fan-panel:hover .fan-label {
        writing-mode: horizontal-tb;
        transform: none;
        max-width: 78%;
        white-space: normal;
        font-size: var(--font-size-h4);
        padding: 0 24px 32px 28px;
    }
}

@media (max-width: 900px) {
    .fan-accordion {
        flex: none;
        flex-direction: column;
        height: auto;
        min-height: 0;
    }
    .fan-panel {
        flex: none;
        height: 70px;
        min-width: 0;
        transition: height 0.5s ease;
    }
    .fan-panel.active {
        height: 360px;
    }
    .fan-icon {
        top: 20px;
    }
    .fan-label {
        writing-mode: horizontal-tb;
        transform: none;
        white-space: normal;
        padding: 0 20px 18px;
        font-size: 0.95rem;
    }
    .fan-panel.active .fan-label {
        font-size: var(--font-size-h4);
        padding: 0 20px 22px;
    }
}

/* Team Section (Black) */
.team {
    background-color: var(--black-base);
}

.team-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px;
}

/* Words injected by the kinetic-heading script (script.js) — inline-block so
   each one can carry its own filter/opacity without breaking line wrapping.
   Scoped to the three "statement" headings it's applied to. */
.team-header .section-title .word,
.approach-left .section-title .word,
.cta-title .word {
    display: inline-block;
    will-change: opacity, filter;
}

.team-desc {
    font-size: var(--font-size-large);
    color: var(--text-secondary);
    font-weight: 300;
}

/* Team bento — one lead tile (founder/host) plus four equal satellites laid
   out with named grid-areas. The size contrast alone reads as "this is a
   team, and here's who leads it" — no interaction required to see it. */
.bento-team {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 260px);
    grid-template-areas:
        "gabit gabit maksat bolat"
        "gabit gabit arsen daniyal";
    gap: 16px;
    margin-top: 60px;
}

.c-gabit   { grid-area: gabit; }
.c-maksat  { grid-area: maksat; }
.c-bolat   { grid-area: bolat; }
.c-arsen   { grid-area: arsen; }
.c-daniyal { grid-area: daniyal; }

.bento-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-dynamic-small);
    background: var(--black-light);
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    outline: none;
    transition: border-color 0.3s ease;
}

.bento-card:hover,
.bento-card:focus-visible {
    border-color: rgba(255, 255, 255, 0.2);
}

.bento-photo, .bento-photo-smile {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    transition: transform 0.6s ease, opacity 0.5s ease;
}

.bento-photo-smile {
    opacity: 0;
}

.bento-card:hover .bento-photo,
.bento-card:focus-visible .bento-photo {
    transform: scale(1.04);
}

.bento-card:hover .bento-photo-smile,
.bento-card:focus-visible .bento-photo-smile {
    opacity: 1;
}

.bento-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 45%, rgba(5, 5, 5, 0.92) 100%);
}

.bento-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 20px;
}

.bento-role {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold-accent);
    margin-bottom: 4px;
}

.bento-info h3 {
    font-size: 1.3rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0;
}

.bento-bio {
    max-height: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    font-size: 0.85rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--text-secondary);
    transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.4s ease;
}

.bento-card:hover .bento-bio,
.bento-card:focus-visible .bento-bio {
    max-height: 140px;
    opacity: 1;
    margin-top: 8px;
}

.c-gabit .bento-role { font-size: 0.8rem; }
.c-gabit .bento-info h3 { font-size: 2rem; }
.c-gabit .bento-bio { font-size: 0.95rem; }

/* Gallery Section */
.gallery {
    background-color: var(--black-base);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 250px;
    /* dense: each item's span reflects its own photo's orientation (wide
       landscape shots get grid-column:span2, tall portrait shots get
       grid-row:span2) instead of forcing every photo into a same-shaped
       box; dense backfills the gaps that mixing row- and column-spans
       would otherwise leave, so source order doesn't have to be hand-
       arranged to avoid holes. */
    grid-auto-flow: dense;
    gap: 20px;
}

.gallery-item {
    position: relative;
    border-radius: var(--radius-dynamic);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease, opacity 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.08);
    opacity: 0.8;
}

/* 4-col grid: hero (2x2) + two wide stacked beside it, four portraits,
   then two wide — each group closes its rows on both 4 and 2 columns. */
.gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery-item:nth-child(2),
.gallery-item:nth-child(3),
.gallery-item:nth-child(8),
.gallery-item:nth-child(9) { grid-column: span 2; }
.gallery-item:nth-child(n+4):nth-child(-n+7) { grid-row: span 2; }

.clients {
    background-color: var(--black-base);
    padding-top: 0;
}

.clients .section-title {
    margin-bottom: 48px;
}

.clients-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.client-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    padding: 24px;
    background-color: var(--black-light);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-dynamic);
}

.client-tile img {
    max-width: 75%;
    max-height: 104px;
    object-fit: contain;
}

@media (max-width: 992px) {
    .clients-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .clients-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .client-tile { height: 128px; padding: 16px; }
    .client-tile img { max-height: 72px; }
}

.experience {
    background-color: var(--black-light);
}

.exp-desc-2 {
    margin-top: 16px;
}

/* Mirrors .bento-team: same 4-column grid, 260px rows, 16px gap, small
   dynamic radius and hover — so the block reads as part of the same system. */
.exp-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 260px);
    grid-template-areas:
        "a a b c"
        "a a d e"
        "f f g g";
    gap: 16px;
}

.exp-tile {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-dynamic-small);
    background: var(--black-base);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: border-color 0.3s ease;
}

.exp-tile:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.exp-tile img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 30%;
    transition: transform 0.6s ease;
}

.exp-tile:hover img {
    transform: scale(1.04);
}

.exp-a { grid-area: a; }
.exp-b { grid-area: b; }
.exp-c { grid-area: c; }
.exp-d { grid-area: d; }
.exp-e { grid-area: e; }
.exp-f { grid-area: f; }
.exp-g { grid-area: g; }

.gallery-item-video {
    cursor: pointer;
}

.gallery-item-video:hover .yt-play {
    transform: translate(-50%, -50%) scale(1.08);
}

/* Footer / CTA Section (Pure Black) */
.cta-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--black-pure);
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 0;
}

.cta-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24vw;
    font-weight: 900;
    color: rgba(179, 0, 0, 0.15);
    line-height: 1;
    white-space: nowrap;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.cta-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cta-title {
    margin-bottom: 60px;
    max-width: 900px;
    font-size: var(--font-size-h2);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--gold-accent);
}

.cta-title .accent {
    color: var(--brand-red);
}

.cta-form-wrap {
    /* Photo + form as one centered pair — the photo points right, at the
       form, so it reads as an introduction rather than two unrelated
       elements side by side. Positioning context for .cta-watermark. */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.cta-photo-wrap {
    position: relative;
    flex-shrink: 0;
}

.cta-pointer {
    /* Needs its own stacking position — plain in-flow content actually
       paints BEHIND a position:absolute z-index:0 sibling (the watermark),
       not in front of it, so without this the photo sits under the text
       instead of over it. */
    position: relative;
    z-index: 1;
    height: 700px;
    width: auto;
    object-fit: contain;
    display: block;
    margin-right: 0px;
    pointer-events: none;
}

.contact-form {
    background: var(--black-light);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 60px 50px;
    border-radius: var(--radius-dynamic);
    width: 100%;
    max-width: 500px;
    position: relative;
    z-index: 1;
}

.form-title {
    font-size: var(--font-size-h4);
    margin-bottom: 40px;
    color: var(--text-secondary);
    font-weight: 300;
}

.form-group {
    position: relative;
    margin-bottom: 30px;
}

.form-group input {
    width: 100%;
    padding: 18px 20px;
    background: var(--black-pure);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-dynamic-small);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
}

.form-group input:focus {
    outline: none;
    border-color: var(--brand-red);
    background: #0a0000; /* Extremely faint red tint */
}

.form-group label {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    transition: all 0.3s ease;
    pointer-events: none;
    font-weight: 500;
}

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label {
    top: -12px;
    left: 15px;
    font-size: 0.8rem;
    background: var(--brand-red);
    padding: 2px 8px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
}

.form-submit {
    width: 100%;
    margin-top: 10px;
    border: none;
    background: var(--brand-red);
}

.form-submit:hover {
    background: var(--text-primary);
    color: var(--black-pure);
    box-shadow: none;
}

.site-footer {
    padding: 24px 0;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.05);
    background: var(--black-light);
}

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

.footer-logo {
    height: 32px;
    width: auto;
}

.footer-content p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* GSAP Initial States */
.gsap-reveal, .gsap-up, .gsap-fade-right, .gsap-fade-left {
    visibility: hidden;
}

/* Festive Sparks */
.spark {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--gold-accent);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--gold-accent), 0 0 30px var(--gold-accent);
    z-index: 2;
    animation: floatUp 8s infinite ease-in;
    opacity: 0;
}

.spark-1 { left: 20%; bottom: -10%; animation-delay: 0s; animation-duration: 7s; }
.spark-2 { left: 50%; bottom: -10%; animation-delay: 2s; animation-duration: 9s; }
.spark-3 { left: 80%; bottom: -10%; animation-delay: 4s; animation-duration: 6s; }
.spark-4 { left: 35%; bottom: -10%; animation-delay: 1s; animation-duration: 8s; }
.spark-5 { left: 70%; bottom: -10%; animation-delay: 3s; animation-duration: 7s; }

@keyframes floatUp {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    20% { opacity: 0.8; }
    80% { opacity: 0.8; }
    100% { transform: translateY(-100vh) scale(0.5); opacity: 0; }
}

/* Decorative Triangles */
.deco-triangle {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.deco-1 {
    width: 500px;
    height: 500px;
    top: auto;
    bottom: -130px;
    right: -140px;
    transform: rotate(15deg);
}

.deco-2 {
    width: 600px;
    height: 600px;
    bottom: -250px;
    left: -150px;
    transform: rotate(-35deg);
}

.deco-3 {
    width: 1000px;
    height: 1000px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.deco-4 {
    width: 700px;
    height: 700px;
    top: -150px;
    left: -100px;
    transform: rotate(-15deg);
}

.deco-5 {
    width: 550px;
    height: 550px;
    top: -180px;
    left: -160px;
    transform: rotate(-20deg);
    animation: drift-spin-5 40s linear infinite;
}

.deco-6 {
    width: 550px;
    height: 550px;
    bottom: -180px;
    right: -160px;
    transform: rotate(25deg);
    animation: drift-spin-6 46s linear infinite;
}

/* Slow spin + a drift toward the section's center and back — ambient motion,
   not something meant to be consciously watched. Long durations keep it
   from competing with the text for attention. */
@keyframes drift-spin-5 {
    0%   { transform: rotate(-20deg) translate(0, 0); }
    50%  { transform: rotate(160deg) translate(30vw, 24vh); }
    100% { transform: rotate(340deg) translate(0, 0); }
}

@keyframes drift-spin-6 {
    0%   { transform: rotate(25deg) translate(0, 0); }
    50%  { transform: rotate(-155deg) translate(-30vw, -24vh); }
    100% { transform: rotate(-335deg) translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .deco-5, .deco-6 {
        animation: none;
    }
}

/* Responsive */
@media (max-width: 992px) {
    .approach-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .bento-team {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-template-areas:
            "gabit"
            "maksat"
            "bolat"
            "arsen"
            "daniyal";
    }
    .bento-card {
        height: 260px;
    }
    .c-gabit {
        height: 340px;
    }
    /* No hover on touch — bios stay visible so nothing requires a tap to read. */
    .bento-bio {
        max-height: 140px;
        opacity: 1;
        margin-top: 8px;
    }
    .manifesto-content {
        margin-left: 0;
        max-width: 100%;
        padding: 40px 24px 0;
    }

    .manifesto-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Fixed at 360px + rotate(-12deg), the thumbnail's rotated bounding box
       runs past 400px wide — wider than the phone itself. */
    .video-thumbnail {
        width: 220px;
    }
    .yt-play {
        width: 55px;
        height: 39px;
    }

    .manifesto-image-absolute {
        position: relative;
        width: 100%;
        height: 500px;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
    }
    .exp-bento {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 300px repeat(4, 220px);
        grid-template-areas:
            "a a"
            "b c"
            "d e"
            "f f"
            "g g";
    }
}

@media (max-width: 768px) {
    /* Manifesto section (screen 2) — drop the portrait photo on mobile,
       text-only reads cleaner than squeezing a 500px-tall image above it. */
    .manifesto-image-absolute {
        display: none;
    }
    .header {
        padding: 20px;
    }
    /* .header.scrolled's own 16px/200px padding rule has higher
       specificity than the plain .header rule above and isn't scoped to
       any width, so without this override it wins even on a phone —
       200px of side padding on a ~390px screen crushed every flex child
       toward zero width once scrolled. */
    .header.scrolled {
        padding: 16px 20px;
    }
    /* The 80px at-rest logo is sized for the wide desktop header — with
       nav already hidden at this width, logo + phone + socials + button
       still overflow a phone viewport unless the logo also comes down and
       the phone number (duplicated by the CTA button and contact form)
       drops out here. */
    .logo {
        width: 110px;
        height: 44px;
    }
    .header.scrolled .logo {
        height: 34px;
    }
    .logo-img--mark {
        height: 44px;
    }
    .logo-img--wide {
        height: 34px;
    }
    .header-phone {
        display: none;
    }
    .section-padding {
        padding: 80px 0;
    }
    .why-arriva {
        min-height: 0;
        padding-top: 60px;
        padding-bottom: 0;
    }
    .hero-content {
        width: 100%;
        max-width: 100%;
    }
    /* .hero's own 200px side padding (set for the desktop layout) was never
       scoped down for mobile — on a ~390px phone it left less than zero
       content width, so "БОЛЬШЕ" started past the right edge and got
       clipped by .site-wrapper's overflow-x:hidden instead of just
       looking cramped. */
    .hero {
        padding: 0 24px 16vh 24px;
    }
    .hero-stats {
        left: 24px;
    }
    .hero-bottom-fade {
        height: 50%;
        background: linear-gradient(to top, var(--brand-red-dark) 0%, rgb(110 0 0) 80%, rgb(110 0 0 / 0%) 100%);
    }
    /* Was a row flex on all breakpoints — "БОЛЬШЕ" and "ЧЕМ ВЕДУЩИЕ" side by
       side never fit a phone width, so both edges got clipped by
       .site-wrapper's overflow-x:hidden instead of wrapping. */
    .hero-title-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    .hero-title-main {
        font-size: 4.5rem;
    }
    .hero-title-sub {
        font-size: 2rem;
    }
    .hero-bottom-wrapper {
        flex-direction: column;
        text-align: center;
    }
    .hero-stats {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 20px;
        bottom: 20px;
        font-size: 0.72rem;
    }
    .hero-stats span {
        white-space: nowrap;
    }
    .contact-form {
        padding: 40px 20px;
    }
    .cta-form-wrap {
        flex-direction: column;
    }
    .cta-photo-wrap {
        display: none;
    }
    /* No photo band left to sit behind — center on the form itself, same
       as the desktop default. */
    .cta-watermark {
        font-size: 18vw;
    }
}

@media (max-width: 370px) {
    /* Even the tightened row still runs past the edge on the narrowest
       phones — let it wrap to two lines there instead of clipping. */
    .hero-stats {
        flex-wrap: wrap;
        gap: 6px 16px;
    }
}

/* Instagram Reel popup */
.ig-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.ig-modal.open {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.ig-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 5, 0.88);
    backdrop-filter: blur(4px);
}

.ig-modal-panel {
    position: relative;
    z-index: 1;
    width: 400px;
    max-width: 92vw;
    height: min(720px, 88vh);
    background: var(--black-light);
    border-radius: var(--radius-dynamic);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    transform: translateY(24px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ig-modal.open .ig-modal-panel {
    transform: translateY(0) scale(1);
}

/* YouTube is 16:9 horizontal, not the 9:16 portrait Instagram reels are. */
.ig-modal--yt .ig-modal-panel {
    width: min(900px, 92vw);
    height: auto;
    aspect-ratio: 16 / 9;
}

@media (max-width: 480px) {
    .ig-modal--yt .ig-modal-panel {
        width: 100vw;
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: 0;
    }
}

.ig-modal-frame {
    width: 100%;
    height: 100%;
}

.ig-modal-frame iframe,
.ig-modal-frame video {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    object-fit: contain;
    background: #000;
}

.ig-modal-close {
    all: unset;
    position: absolute;
    /* Sits just above the panel, in the backdrop — Instagram's own embed
       chrome already has a "View profile" button in that top-right corner,
       so overlapping it there was confusing to click. */
    top: -48px;
    right: 0;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    cursor: pointer;
}

.ig-modal-close:hover {
    background: var(--brand-red);
}

@media (max-width: 480px) {
    .ig-modal-panel {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
    /* No room above a full-screen panel — back to overlaying the corner. */
    .ig-modal-close {
        top: 12px;
        right: 12px;
    }
}

/* Gallery lightbox */
.gallery-item {
    cursor: pointer;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.lightbox.open {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 5, 0.92);
    backdrop-filter: blur(4px);
}

.lightbox-stage {
    position: relative;
    z-index: 1;
    width: min(1200px, 88vw);
    height: 86vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.97);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.lightbox.open .lightbox-stage {
    transform: scale(1);
}

.lightbox-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-dynamic-small);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    /* A short cross-fade each time the src changes (toggled in JS) instead
       of the new image just popping in mid-swipe/click. */
    opacity: 1;
    transition: opacity 0.2s ease;
}

.lightbox-image.is-switching {
    opacity: 0;
}

.lightbox-counter {
    position: absolute;
    bottom: -36px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--font-size-small);
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.05em;
}

.lightbox-close {
    all: unset;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    cursor: pointer;
}

.lightbox-close:hover {
    background: var(--brand-red);
}

.lightbox-arrow {
    all: unset;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.lightbox-arrow:hover {
    background: var(--brand-red);
}

.lightbox-arrow--prev {
    left: 20px;
}

.lightbox-arrow--next {
    right: 20px;
}

@media (max-width: 768px) {
    /* Arrows move to below the image, thumb's-reach distance apart, and
       swipe is the primary way to move between photos — see interactions.js.
       Keeping small tap targets floating over the photo on a phone just
       gets in the way of the swipe gesture itself. */
    .lightbox-stage {
        width: 100vw;
        height: 76vh;
    }
    /* .lightbox-arrow's containing block is .lightbox itself (fixed,
       inset:0 = the full viewport) — it's a sibling of .lightbox-stage,
       not a child, so these coordinates are viewport-relative, not
       stage-relative. */
    .lightbox-arrow {
        top: auto;
        bottom: 24px;
        transform: none;
        width: 46px;
        height: 46px;
    }
    .lightbox-arrow--prev {
        left: calc(50% - 70px);
    }
    .lightbox-arrow--next {
        right: calc(50% - 70px);
    }
    .lightbox-counter {
        bottom: -40px;
    }
    .lightbox-close {
        top: 12px;
        right: 12px;
    }
}

/* Header with the language switch: below ~480px logo + switch + socials +
   CTA no longer fit one row, so the socials drop (they're also reachable
   from the contact block) and the switch/CTA tighten. The logo box must not
   shrink — its children are absolutely positioned, so flex would collapse
   it to 0 width. */
.logo {
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .header-right {
        gap: 10px;
    }
    .header .social-icons {
        display: none;
    }
    .lang-switch button {
        padding: 5px 7px;
        font-size: 0.68rem;
    }
    .header .btn-outline {
        padding: 10px 14px;
        font-size: 0.7rem;
    }
}


/* Narrowest phones: logo + switch + CTA can't share 320px. The header CTA
   duplicates the hero button and the contact form, so it goes first. */
@media (max-width: 360px) {
    .header .btn-outline {
        display: none;
    }
}

/* Kazakh/English copy has longer single words than the Russian it was laid
   out for; on the narrowest phones let them break instead of overflowing. */
.section-title,
.cta-title,
.quote-box p,
.team-desc,
.form-title {
    overflow-wrap: break-word;
    hyphens: auto;
}

@media (max-width: 360px) {
    .section-title,
    .cta-title {
        font-size: 1.75rem;
    }
}