/* Airport Shuttle case study. Alternates centred, split and full-bleed
   sections so the page has breaks instead of one repeating shape. Pairs with
   work.css, which supplies the shared tokens and base reset. */

:root {
    --cs-bright: #f5f5f5;
    --cs-hair: #1c1c20;
    --cs-air: clamp(120px, 17vh, 260px);
    --cs-air-half: clamp(64px, 9vh, 140px);
    --cs-side: clamp(24px, 5vw, 80px);

    --cs-panel-bg: #0c0c10;

    /* Warm ramp. --cs-warm is the amber already used for emphasis in the
       Figma system; the other two extend it. */
    --cs-warm: #ffc25c;
    --cs-coral: #ff7a59;
    --cs-gold: #ffd166;

    /* Film grain, generated in-page by feTurbulence — no image asset, no
       network request, resolution independent. */
    --cs-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Only this case study loads this file, so the page ground is set here. Texture comes
   from grain alone — no colour wash. Colour is reserved for the panels. */
body { background-color: #0b0a0a; }

/* Whole-page grain: felt, not seen. Sits above everything, catches nothing. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background-image: var(--cs-grain);
    background-size: 300px 300px;
    opacity: 0.055;
}

/* Full-bleed section band. Texture comes from the .grainfield component,
   which this pairs with — layout here, colour and grain there. */
.cs-panel {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    padding: var(--cs-air) var(--cs-side);
    margin-top: var(--cs-air);
}

.cs-panel .cs-inner { max-width: 1680px; margin: 0 auto; }

/* the panel supplies its own top padding */
.cs-panel .cs-centered,
.cs-panel .cs-wide { padding-top: 0; }

.cs {
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 var(--cs-side);
}

/* ---------- Top bar ---------- */

.cs-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 40px 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    letter-spacing: 0.2px;
}

.cs-bar a { color: var(--case-dim); text-decoration: none; transition: color 0.3s ease; }
.cs-bar a:hover { color: var(--cs-bright); }
.cs-bar-name { color: var(--case-text); }

/* ---------- Type scale ---------- */

.cs-display {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(2.5rem, 6.4vw, 5.25rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--cs-bright);
    max-width: 15ch;
    margin: 0 auto;
    text-wrap: balance;
}

.cs-statement {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(2rem, 4.6vw, 3.75rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--cs-bright);
    max-width: 17ch;
    text-wrap: balance;
}

.cs-body {
    font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
    line-height: 1.75;
    letter-spacing: 0.2px;
    color: var(--case-text);
    max-width: 56ch;
    text-wrap: pretty;
}

.cs-body + .cs-body { margin-top: 24px; }

/* headline and prose were colliding — this is the gap between them */
.cs-statement + .cs-body { margin-top: clamp(36px, 5vh, 68px); }

/* Plain uppercase section marker — no number, no dot. */
.cs-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--case-dim);
    text-transform: uppercase;
    letter-spacing: 2.4px;
    margin-bottom: 28px;
}

/* ---------- Section shapes ---------- */

/* a) centred */
.cs-centered { padding-top: var(--cs-air); text-align: center; }
.cs-centered .cs-label { justify-content: center; }
.cs-centered .cs-statement { margin: 0 auto; }
.cs-centered .cs-body { margin-left: auto; margin-right: auto; }

/* b2) wide — left-aligned, full content width, for data that needs room */
.cs-wide { padding-top: var(--cs-air); text-align: left; }

/* b) split — statement holds the left, prose sits right */
.cs-split {
    padding-top: var(--cs-air);
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(40px, 6vw, 110px);
    align-items: center;   /* headline and prose share a band, rather than both hugging the top */
}

.cs-split .cs-statement { max-width: 14ch; }
.cs-split .cs-body { max-width: 52ch; }
.cs-split-aside { padding-top: 0; }

/* Optical nudge for a split whose right column is a single short paragraph:
   centred against a two-line headline it sits a touch high. Side-by-side only
   — once the grid stacks (900px, below) the nudge is just a doubled gap. */
@media (min-width: 901px) {
    .cs-split-aside--nudge .cs-body { padding-top: 21px; }
}

/* c) full bleed — matches the .separator / .contact technique on the homepage */
.cs-bleed {
  max-width: 1810px; /* Or whatever maximum width fits your design */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Matches .cs-hero-shot and .cs-figure, so every big piece of media on the
   page is cut to the same corner. */
.cs-bleed video {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 20px;
    overflow: hidden;    /* keeps the in-video fallback <img> inside the corner */
}

.cs-bleed img { width: 100%; height: auto; display: block; }

.cs-bleed--top { margin-top: var(--cs-air-half); }
.cs-bleed--section { margin-top: var(--cs-air); }

.cs-bleed-caption {
    text-align: center;
    font-size: 0.9375rem;
    color: var(--case-dim);
    letter-spacing: 0.2px;
    margin-top: 24px;
}

/* d) the quote break */
.cs-break {
    padding-top: var(--cs-air);
    text-align: center;
}


.cs-quote {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(1.75rem, 3.6vw, 3rem);
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--cs-bright);
    max-width: 20ch;
    margin: 0 auto;
    text-wrap: balance;
}

.cs-quote em {
    font-style: normal;
    font-weight: 700;
    background-image: linear-gradient(100deg, var(--cs-gold) 0%, var(--cs-warm) 38%, var(--cs-coral) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cs-quote-by {
    font-size: 0.9375rem;
    color: var(--case-dim);
    margin-top: 28px;
    letter-spacing: 0.2px;
}

/* ---------- Hero ---------- */

.cs-hero { padding: clamp(48px, 9vh, 130px) 0 0; text-align: center; }

/* name × client, read as one credit line */
.cs-lockup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 1.6vw, 24px);
    margin-bottom: 44px;
}

.cs-lockup-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(1rem, 1.5vw, 1.3125rem);
    letter-spacing: 0.2px;
    color: var(--case-text);
    white-space: nowrap;
}

.cs-lockup-x {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(0.875rem, 1.2vw, 1.0625rem);
    color: var(--case-dim);
}

.cs-hero-logo { height: clamp(44px, 5.2vw, 74px); width: auto; opacity: 0.75; }

.cs-sub {
    font-size: clamp(1.125rem, 1.5vw, 1.375rem);
    line-height: 1.65;
    letter-spacing: 0.2px;
    color: var(--case-text);
    max-width: 52ch;
    margin: 32px auto 0;
    text-wrap: pretty;
}

.cs-credit {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    color: var(--case-dim);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-top: 28px;
}

.cs-hero-shot {
    display: block;
    width: 100%;
    height: auto;
    margin-top: clamp(56px, 8vh, 120px);
    border-radius: 20px;
}

/* ---------- The journey: duration to scale, then the steps ---------- */

/* The comparison, in the same language as the rest of the page: big
   Space Grotesk numerals and plain type. No pills, no boxes. */
.cs-times {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: clamp(20px, 3.5vw, 52px);
    margin-top: clamp(40px, 5vh, 64px);
    justify-content: center;
}

.cs-time { display: flex; flex-direction: column; gap: 10px; }

.cs-time-when {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    color: var(--case-dim);
}

.cs-time-value {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(2.25rem, 5vw, 4rem);
    line-height: 1;
    letter-spacing: -0.035em;
    white-space: nowrap;
}

.cs-time--before .cs-time-value { color: #55555e; }
.cs-time--after .cs-time-value { color: var(--cs-bright); }
.cs-time--after .cs-time-when { color: var(--cs-warm); }

.cs-time-arrow {
    font-size: clamp(1.25rem, 2.4vw, 1.875rem);
    color: #55555e;
    padding-bottom: 0.3em;
}

/* Three small devices in one centred row. Deliberately modest — they are
   evidence for the claim above, not the subject of the section. */
.cs-shots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 180px));
    gap: clamp(20px, 2.4vw, 40px);
    margin-top: clamp(44px, 6vh, 72px);
    justify-content: center;
}

.cs-shot { display: flex; flex-direction: column; gap: 14px; }

/* small-screen tab controls: hidden here, but :checked still matches */
.cs-shot-radio { display: none; }
.cs-shot-tabs { display: none; }

/* No hover lift and no transition: nothing here can be clicked, so raising a
   screen under the cursor promises an interaction that does not exist. The
   tabs below 700px are the only real control in this section. */
.cs-shot-media {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.cs-shot-media img {
    width: 100%;
    height: auto;
    display: block;
}

.cs-shot-step {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 9px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 1.0625rem;
    color: var(--cs-bright);
}

.cs-shot-step span {
    font-weight: 700;
}


.cs-flow-note {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--case-dim);
    max-width: 62ch;
    margin: clamp(40px, 5vh, 60px) auto 0;
}

.cs-flow-note strong { color: var(--case-text); font-weight: 400; }

/* ---------- Numbers ---------- */

.cs-numbers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(48px, 6vw, 96px);
    max-width: 1200px;
    margin: var(--cs-air-half) auto 0;
}

.cs-number {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(3rem, 6vw, 5rem);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--cs-bright);
}

.cs-number-label { font-size: 1.0625rem; line-height: 1.5; color: var(--case-text); margin-top: 18px; }
.cs-number-from { font-size: 0.875rem; color: var(--case-line); margin-top: 10px; letter-spacing: 0.2px; }

/* ---------- Figures ---------- */

.cs-figure {
    display: block;
    width: 100%;
    max-width: 1199px;      /* native width of the asset — never upscale it */
    height: auto;
    margin: var(--cs-air-half) auto 0;
    border-radius: 20px;
}

.cs-figure--shot { width: 237px; border-radius: 12px; }

.cs-caption {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--case-dim);
    max-width: 46ch;
    margin: 24px auto 0;
}

/* ---------- Close ---------- */

.cs-close {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    padding: var(--cs-air) var(--cs-side) clamp(80px, 12vh, 160px);
    text-align: center;
    margin-top: var(--cs-air);
    /* Breathing room after the contact panel, so the page ends in air
       instead of running straight into the bottom of the document. With
       the panel lifted off the end, all four corners round. */
    margin-bottom: var(--cs-air-half);
    border-radius: clamp(20px, 2.4vw, 36px);
    border-top: 1px solid var(--cs-hair);
    isolation: isolate;
    overflow: hidden;
    background: #07120d;
    content-visibility: auto;
    contain-intrinsic-size: auto 720px;
}

.cs-close .cs-statement { margin: 0 auto; }

/* the forced two-line break only exists where the long line can hold it */
.cs-lb { display: none; }

@media (min-width: 901px) {
    .cs-lb { display: inline; }
    .cs-close .cs-statement { max-width: none; }
}
.cs-close .cs-body { margin: 24px auto 0; }

/* The dim greys are chosen against the near-black sections. This panel is lit,
   so they invert: #525252 on the violet measures about 1.3:1 and the line
   simply vanishes, and #a1a1a1 is not much better. Same quietness, taken from
   the light end instead, which puts both back above 4.5:1 against the field.
   Where a seam passes directly behind a glyph it is still brighter than that —
   a scrim behind the copy would settle it, at the cost of muting the glass in
   the one place the glass is most visible. */
.cs-close .cs-body { color: rgba(246, 246, 251, 0.94); }

/* ---------- Closing panel: dusk, moss ----------
   Two static radial-glow layers rise from below the panel; the second
   crossfades in on a 26s cycle, shifting emerald into deep teal. That
   crossfade is the only thing that moves — opacity and a slight scale,
   so nothing ever repaints. The panel this replaced ran feTurbulence
   plus three displacement maps over the full bleed with eight
   blur-filtered orbs on top: the effect was rich, and so was the bill.

   Grain sits on top of the colour, under the copy, as before. */

.cs-dusk {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
}

.cs-dusk > * { position: absolute; inset: 0; }

.cs-dusk-a {
    background:
        radial-gradient(95% 62% at 50% 118%, rgba(75, 215, 165, 0.24), transparent 66%),
        radial-gradient(58% 44% at 50% 108%, rgba(150, 235, 195, 0.15), transparent 62%);
}

.cs-dusk-b {
    background:
        radial-gradient(95% 62% at 50% 118%, rgba(60, 170, 225, 0.20), transparent 66%),
        radial-gradient(70% 50% at 50% 112%, rgba(120, 140, 255, 0.12), transparent 66%);
    opacity: 0.15;
}

@media (prefers-reduced-motion: no-preference) {
    .cs-dusk-b { animation: cs-dusk 26s ease-in-out infinite alternate; }
}

@keyframes cs-dusk {
    from { opacity: 0.15; transform: scale(1); }
    to   { opacity: 0.85; transform: scale(1.06); }
}

/* film grain — static tile, painted once */
.cs-close::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    opacity: 0.16;
}

/* Warm gradient pill with dark type — the one thing on the page that
   asks to be clicked, so it gets the strongest contrast. */
.cs-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 44px;
    padding: 20px 38px;
    border-radius: 999px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(1.0625rem, 1.8vw, 1.375rem);
    letter-spacing: 0.1px;
    color: #17110d;
    text-decoration: none;
    background-color: #f5f5f5;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.cs-cta-arrow { transition: transform 0.3s ease; }

@media (prefers-reduced-motion: no-preference) {
    .cs-cta:hover { transform: translateY(-2px); background-color: #ffffff; }
    .cs-cta:hover .cs-cta-arrow { transform: translateX(4px); }
}

.cs-cta:focus-visible { outline: 2px solid #f5f5f5; outline-offset: 4px; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .cs-split { grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
    .cs-split .cs-statement { max-width: 15ch; }
    .cs-split-aside { padding-top: 0; }
    .cs-numbers { grid-template-columns: minmax(0, 1fr); gap: 56px; text-align: center; }
    .cs-hero-shot, .cs-figure, .cs-bleed video { border-radius: 14px; }

    /* time stacks above its steps instead of squeezing them */
    .cs-shots { grid-template-columns: repeat(3, minmax(0, 160px)); gap: 18px; }
        .cs-time-value { font-size: clamp(1.75rem, 8vw, 2.5rem); }
}

@media (max-width: 600px) {
    .cs-bar { padding: 24px 0; font-size: 0.875rem; }
    .cs-hero-logo { height: 62px; margin-bottom: 28px; }
    .cs-display { max-width: 14ch; }
    .cs-statement, .cs-split .cs-statement { max-width: 14ch; }
    .cs-label { margin-bottom: 20px; }
}

@media (max-width: 700px) {
    /* Three across never fits a phone and three stacked was ~1400px of
       scrolling, so: one at a time, switched by tabs. Radio + label means
       this works without a line of JavaScript. */
    .cs-shots { display: block; max-width: none; }

    .cs-shot-tabs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 22px;
        margin-bottom: 26px;
    }

    .cs-shot-tabs label {
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 500;
        font-size: 1.0625rem;
        color: var(--case-dim);
        cursor: pointer;
        padding-bottom: 7px;
        border-bottom: 1px solid transparent;
        transition: color 0.3s ease, border-color 0.3s ease;
    }

    .cs-shot { display: none; gap: 14px; align-items: center; }

    #cs-step-1:checked ~ .cs-shot:nth-of-type(1),
    #cs-step-2:checked ~ .cs-shot:nth-of-type(2),
    #cs-step-3:checked ~ .cs-shot:nth-of-type(3) { display: flex; }

    #cs-step-1:checked ~ .cs-shot-tabs label[for="cs-step-1"],
    #cs-step-2:checked ~ .cs-shot-tabs label[for="cs-step-2"],
    #cs-step-3:checked ~ .cs-shot-tabs label[for="cs-step-3"] {
        color: var(--cs-bright);
        border-bottom-color: var(--cs-warm);
    }

    .cs-shot-radio:focus-visible ~ .cs-shot-tabs label { outline: 1px dotted var(--case-dim); outline-offset: 4px; }

    .cs-shot-media { max-width: 200px; margin: 0 auto; }

    /* the journey carries the most stacked content, so it gets the most
       aggressive tightening on a phone */
    .cs-panel { padding: 88px var(--cs-side); margin-top: 88px; }
    .cs-times { margin-top: 30px; gap: 16px; }
    .cs-flow-note { margin-top: 26px; font-size: 0.9375rem; }
    .cs-shot-tabs { margin-bottom: 20px; }
    /* the active tab already names the screen */
    .cs-shot-step { display: none; }
}

/* ---------- Motion ----------
   Starting state only. GSAP + ScrollTrigger drive the reveal, matching the
   homepage: power2.out, ~0.5s, fired at "top 90%", played once. Users who
   ask for reduced motion never get the offset, so nothing has to animate
   back. <noscript> below restores visibility if scripts never run. */

/* The three journey screens are deliberately absent here. They arrive with the
   panel's own reveal and do nothing of their own — a stagger drew the eye along
   the row as though the order were a sequence to follow, which it is not. */
@media (prefers-reduced-motion: no-preference) {
    .reveal { opacity: 0; transform: translateY(30px); }
    .reveal-item { opacity: 0; transform: translateY(24px); }
    .cs-numbers > div { opacity: 0; transform: translateY(24px); }
}

/* Escape hatch: set by the page script when GSAP is unavailable or the user
   asked for reduced motion. Nothing may stay hidden in either case. */
.motion-off .reveal,
.motion-off .reveal-item,
.motion-off .cs-numbers > div {
    opacity: 1 !important;
    transform: none !important;
}

@media (max-width: 620px) {
    /* the row cannot shrink a nowrap name, so stack instead of squeezing */
    .cs-lockup { flex-direction: column; gap: 16px; margin-bottom: 34px; }
    .cs-lockup-x { display: none; }
    .cs-lockup-name { font-size: 1rem; }
    .cs-hero-logo { height: 52px; }
}

/* ---------- Scroll dock ----------
   A pill that arrives once the hero is behind you: one way home, one way to
   get in touch. The wrapper handles centring so GSAP can own the pill's
   transform without fighting a translateX. */

.cs-dock-wrap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: clamp(20px, 3vh, 34px);
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 9000;
    padding: 0 var(--cs-side);
}

.cs-dock {
    --cs-dock-gap: clamp(16px, 2vw, 24px);
    --cs-dock-inset: 24px;      /* text side */
    --cs-dock-cap: 13px;        /* button side: the pill's own inset, top and bottom too */
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--cs-dock-gap);
    padding: var(--cs-dock-cap) var(--cs-dock-cap) var(--cs-dock-cap) var(--cs-dock-inset);
    /* only the right pad animates; opacity and transform belong to GSAP */
    transition: padding-right 0.4s ease;
    border-radius: 999px;
    background: rgba(20, 18, 22, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.10);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    letter-spacing: 0.2px;
    opacity: 0;
    transform: translateY(22px);
}

.cs-dock a {
    color: var(--case-text);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.cs-dock a:hover { color: var(--cs-bright); }

.cs-dock-cta {
    color: #17110d !important;
    background: #f5f5f5;
    border-radius: 999px;
    padding: 7px 16px;
    font-weight: 700;
}

.cs-dock-cta:hover { background: #ffffff; }

.cs-dock-sep { width: 1px; height: 15px; background: rgba(255, 255, 255, 0.14); }

/* Once the closing panel is on screen it offers the same thing, so the pill
   puts its button away rather than asking twice. Collapsing max-width and
   cancelling the flex gap with a negative margin lets "Back to home" slide
   across; visibility waits for the collapse so nothing keeps focus. */
.cs-dock-cta,
.cs-dock-sep {
    overflow: hidden;
    max-width: 220px;
    transition: opacity 0.3s ease, max-width 0.4s ease, padding 0.4s ease,
                margin 0.4s ease, background-color 0.3s ease, visibility 0s;
}

/* The 13px right pad is the inset around the button. Once the button is gone
   there is nothing for it to hold, and "Back to home" ends up sitting 24px from
   the left and 13px from the right in a pill that is now obviously lopsided —
   so the right side goes back to matching the left. */
.cs-dock.is-at-contact { padding-right: var(--cs-dock-inset); }

.cs-dock.is-at-contact .cs-dock-cta,
.cs-dock.is-at-contact .cs-dock-sep {
    opacity: 0;
    visibility: hidden;
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    margin-left: calc(var(--cs-dock-gap) * -1);
    pointer-events: none;
    transition: opacity 0.3s ease, max-width 0.4s ease, padding 0.4s ease,
                margin 0.4s ease, visibility 0s linear 0.4s;
}

.motion-off .cs-dock { opacity: 1; transform: none; }

@media (max-width: 480px) {
    .cs-dock { --cs-dock-gap: 14px; --cs-dock-inset: 18px; --cs-dock-cap: 11px; font-size: 0.875rem; }
    .cs-dock-cta { padding: 6px 13px; }
}

/* ---------- Campaign strip ----------
   Fallback state is a single image filling the band; once the manifest loads
   the row becomes N equal tiles. */

.cs-strip { display: flex; gap: 12px; width: 100%; }
.cs-strip > img,
.cs-strip > video {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: auto;
    display: block;
    border-radius: 10px;
    object-fit: cover;
}

/* the fallback is one wide image, so let it span the band */
.cs-strip:not(.is-live) > img { flex: 1 1 100%; border-radius: 12px; }

@media (max-width: 900px) {
    /* seven tiles across a phone is unreadable — scroll them instead */
    .cs-strip {
        overflow-x: auto;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        gap: 10px;
    }
    .cs-strip::-webkit-scrollbar { display: none; }
    .cs-strip.is-live > img,
    .cs-strip.is-live > video { flex: 0 0 132px; }
}

/* ---------- Ultrawide ----------
   Past ~2K pixels the full-bleed bands stop reading as sections and start
   reading as infinity. Cap them, float them off the edges and round the
   corners, so the heavy field ends somewhere. Centring stays in the
   margins (left:50% + negative half-width) rather than transform —
   GSAP owns the transform of .reveal elements. */
@media (min-width: 2048px) {
    .cs-panel,
    .cs-close {
        width: 1900px;
        margin-left: -950px;
        margin-right: auto;
        border-radius: 28px;
    }

    /* the hairline was a separator against the section above; on a
       floating panel a top-only line just looks broken */
    .cs-close { border: 1px solid var(--cs-hair); }
}