/* ============================================================
   SOWAYBEYOND homepage only.
   Loaded AFTER custom.css, which is shared with cheremargaux.com
   and must not be edited for this page.
   ============================================================ */


/* ── Hero ────────────────────────────────────────────────────
   Chère Margaux leads with a film title set large, because the film is
   the page. The equivalent here would be the studio's own name, which is
   what the logo already says, so the mark is the display element and the
   wordmark sits beneath it as a logotype. "An independent film studio"
   drops to a statement line: it is a category, not a claim, and the title
   tag and meta description already carry it for search.

   The wordmark is set in the theme sans rather than the film serif, so a
   visitor arriving from cheremargaux.com registers a different entity
   rather than another film title.
──────────────────────────────────────────────────────────────── */

/* Safety net. RevSlider sets the hero height at init. If its JS fails, or
   a slide is edited badly, the hero used to collapse to a black strip.
   Same image file as the slide, so this costs no extra request. */
#slider-section {
    min-height: 100vh;
    background: #0a0a0b url("../images/SOWAYBEYOND-studio-01.jpg") center center / cover no-repeat;
}

/* Directional scrim. A flat 0.42 black across the whole frame muted the
   guitars, synths and desk, which are the evidence for the "one room in
   Brighton" claim. Weight it left where the type sits and let the right
   side of the room stay readable. */
#slider-section .bg-overlay.bg-black.opacity-3 {
    opacity: 1 !important;
    background: linear-gradient(
        100deg,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.74) 24%,
        rgba(0, 0, 0, 0.46) 50%,
        rgba(0, 0, 0, 0.22) 74%,
        rgba(0, 0, 0, 0.38) 100%
    ) !important;
}

/* Belt and braces. If the old hero laurel block is ever left in the
   markup by a partial paste, it stays out of the hero. The captioned
   Awards and selections band is the only place laurels appear here. */
#slider-section .hero-laurel-badge {
    display: none !important;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.hero-overlay .container {
    pointer-events: auto;
}

.hero-block {
    max-width: 640px;
}

/* Sized by height so the mark keeps its silhouette whatever the source
   aspect. Deliberately not .logo-badge--large: object-fit: cover in a
   circle crops roughly a third off a 140x210 mark, and the ragged outline
   is the whole point of it. */
.hero-mark {
    display: block;
    height: clamp(104px, 12vw, 176px);
    width: auto;
    opacity: 0.95;
    filter: drop-shadow(0 2px 26px rgba(0, 0, 0, 0.55));
}

/* Logotype, not a headline, and set to match the existing horizontal
   lockup (logo-pure-white.png), which is a plain neo-grotesque at normal
   tracking. That is why this is Helvetica/Arial rather than the theme's
   geometric sans or a tracked-out treatment: the brand already has a
   settled logotype and a second, different one would compete with it.
   Helvetica and Arial are system fonts, so there is nothing to load and
   the substitution between platforms is invisible at this size.

   The h1 rule in custom.css sets the film serif at 3.6rem uppercase, so
   family, size, weight and tracking all have to be overridden here.

   Width relationship: the mark renders about 115px wide at a 1440px
   viewport, the wordmark about 250px. Roughly 1:2.2, which reads as a
   stacked lockup rather than a small tick above a long line. */
#slider-section h1.hero-wordmark {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(1.35rem, 2.2vw, 2rem) !important;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.1;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.5);
    /* The mark has a long descending tail on its left side, so a 1.5rem gap
       measured off the SVG bounding box reads tight. 1.9rem is optically
       even. */
    margin: 1.9rem 0 0;
}

.hero-statement {
    max-width: 36ch;
    margin: 1.8rem 0 0;
    font-size: clamp(1rem, 1.35vw, 1.1rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.82) !important;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}

/* Stands in for the three hero laurels. At 12px tracked it out-reads three
   washed-out PNGs, and the band below carries the full set with captions. */
.hero-credit {
    margin: 1.4rem 0 0;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6) !important;
}

.hero-action {
    margin-top: 2.4rem;
}

/* RevSlider used to centre the hero below its own 1260px breakpoint. That
   behaviour moves here, at the Bootstrap lg boundary, so the switch lines
   up with the navbar collapse. Letter-spacing adds a trailing space after
   the final character, which throws centred text off by half the tracking;
   text-indent puts it back. */
@media (max-width: 991px) {
    .hero-overlay { text-align: center; }

    .hero-block {
        max-width: 560px;
        margin: 0 auto;
    }

    .hero-mark { margin: 0 auto; }

    .hero-statement {
        max-width: 42ch;
        margin-left: auto;
        margin-right: auto;
    }

    #slider-section .bg-overlay.bg-black.opacity-3 {
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.74) 0%,
            rgba(0, 0, 0, 0.58) 42%,
            rgba(0, 0, 0, 0.78) 100%
        ) !important;
    }
}

@media (max-width: 575px) {
    .hero-mark { height: clamp(84px, 24vw, 116px); }

    #slider-section h1.hero-wordmark { margin-top: 1.2rem; }

    .hero-statement { margin-top: 1.4rem; }
    .hero-credit { margin-top: 1.2rem; }
    .hero-action { margin-top: 2rem; }
}

/* Short viewports: 1280x720 laptops and landscape phones have to fit the
   stack between a fixed navbar and the fold. */
@media (max-height: 720px) and (min-width: 992px) {
    .hero-mark { height: clamp(88px, 9vw, 128px); }
    #slider-section h1.hero-wordmark { margin-top: 1.25rem; }
    .hero-statement { margin-top: 1.35rem; }
    .hero-credit { margin-top: 1.1rem; }
    .hero-action { margin-top: 1.9rem; }
}


/* ── Navbar logo, mobile ────────────────────────────────────
   The badge crops a 140x210 mark into a 42px circle by nudging the
   image with --logo-x. custom.css sets --logo-x: -30px on .logo-badge
   and .logo-badge--menu never overrides it, so the correct value only
   ever arrives inside custom.css's own @media (min-width: 992px)
   block. Below 992px the mark is shifted 30px left inside a 42px
   circle, which pushes almost all of it out of frame: the empty ring
   in the mobile screenshot.

   Fixed here rather than in custom.css because that file is shared
   with cheremargaux.com. Same values the desktop block already uses,
   applied at every width, so the media query in custom.css becomes a
   no-op rather than a conflict.
──────────────────────────────────────────────────────────────── */
.logo-badge--menu {
    --logo-x: -7px;
    --logo-y: 4px;
}

/* Same bug, unverified. .logo-badge--sidenav also fails to override
   --logo-x, so the side-menu mark is shifted 30px left inside an 80px
   circle at every width. -13px is the proportional equivalent of the
   -7px used at 42px. Open the side menu, and if the mark is off-centre,
   uncomment this.

.logo-badge--sidenav {
    --logo-x: -13px;
}
*/


/* ── Trailer ─────────────────────────────────────────────────
   Aspect-ratio box rather than the padding-top hack so it behaves
   with the theme's Bootstrap grid.
──────────────────────────────────────────────────────────────── */
.video-frame {
    position: relative;
    width: 100%;
    max-width: 1140px;
    margin: 2.75rem auto 0;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid var(--blk-border);
    border-radius: 2px;
    overflow: hidden;
}

.video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Fallback for browsers without aspect-ratio support. */
@supports not (aspect-ratio: 16 / 9) {
    .video-frame { height: 0; padding-bottom: 56.25%; }
}

.video-label {
    margin: 2.5rem 0 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--blk-accent) !important;
}

.video-caption {
    margin-top: 1rem;
    font-size: 14px;
    letter-spacing: 0.03em;
}


/* ── The film section ────────────────────────────────────────
   .film-actions is centred by custom.css, which is what this page
   wants, so it is left alone. Only the vertical rhythm changes.
──────────────────────────────────────────────────────────────── */
#film .film-text {
    margin-top: 2.5rem;
}

#film .film-statement + .film-statement {
    margin-top: 1.15rem;
}


/* The only off-site link on the page. Deliberately not a button: it sits
   below the primary action and reads as a footnote to the film block. */
.film-external-link {
    margin-top: 1.25rem;
    margin-bottom: 0;
    font-size: 14px;
    letter-spacing: 0.03em;
}

.film-external-link a {
    color: #a7adb3;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    padding-bottom: 2px;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.film-external-link a:hover {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.6);
}

.film-link-divider {
    display: inline-block;
    margin: 0 0.85rem;
    color: rgba(255, 255, 255, 0.22);
}

@media (max-width: 480px) {
    .film-external-link a { display: inline-block; }
    .film-link-divider { display: none; }
    .film-external-link a + a { margin-top: 0.9rem; }
}

/* Onward action sits at the foot of the awards band rather than the film
   section, so no button can scroll a reader past the laurels. */
.selections-actions {
    margin-top: 3.25rem;
}


/* ── Selections band ─────────────────────────────────────────
   Left on the film section's own background with the hairline top border
   from custom.css, so it reads as part of the film block rather than a
   separate section.

   Sizing, ordering and stacking used to come from there too. They cannot any
   more. This site's copy of custom.css is an older snapshot than the one
   deployed on cheremargaux.com: it still carries the three-item flex layout,
   and with a fourth entry that layout fails in two separate ways.

   1. WRAPPING. `flex: 0 1 300px` with a 76px gap needs 1428px to hold four
      items on one row, against a 1140px container. It wraps 3 + 1 and leaves
      an orphan centred underneath.

   2. ORDER. This is the one that bites silently. The old rules set
      order: 1 / 2 / 3 on reply / seattle / seoul above 992px. `order` applies
      to grid items exactly as it does to flex items, so moving to grid does
      not disarm it. Biberach has no order rule, defaults to 0, and jumps to
      the front of the row. The reset below is not optional.

   Everything here is idempotent. If custom.css is ever resynced from
   cheremargaux.com it will declare the same grid with the same column
   counts, and these rules simply restate it.
──────────────────────────────────────────────────────────────────────────── */

/* Explicit column counts. Four across at the xl container (1140px), where
   40px gutters leave 255px per column against a laurel ~157px wide at 92px
   tall. An explicit count cannot orphan: the band is four across, two by two,
   or stacked, and nothing in between. */
.selections .selection-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-items: center;
    align-items: start;
    column-gap: 40px;
    row-gap: 54px;
}

/* Two class names deep so this beats `.selection-item--reply { order: 1 }` in
   custom.css on specificity rather than on file order. Load order alone would
   work today, but it is one stylesheet reshuffle away from not working, and
   the failure is silent: the band still renders, just with the wrong festival
   first. */
.selections .selection-list .selection-item {
    order: 0;
    width: 100%;
    max-width: 300px;
    text-align: center;
}

/* The lg container is 960px, which would squeeze four columns to 210px and
   push .selection-meta to five lines. Two by two instead. */
@media (max-width: 1199px) {
    .selections .selection-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 60px;
        row-gap: 56px;
    }
    .selections .selection-list .selection-item { max-width: 360px; }
}

/* Below 992px two columns leave ~330px each, workable but reading as two
   cramped cards rather than one list. Single column. This also has to restate
   the stacking custom.css did with flex-direction: column, since flex
   properties are inert on a grid container. */
@media (max-width: 991px) {
    .selections .selection-list {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 48px;
    }
    .selections .selection-list .selection-item { max-width: 340px; }
}

/* custom.css sets `gap: 42px` here for the old flex row. Restated as row-gap
   so the shorthand cannot reintroduce a column gap on a single-column grid. */
@media (max-width: 767px) {
    .selections .selection-list { row-gap: 44px; }
}
/* ─────────────────────────────────────────────────────────────────────────── */


/* ── In development ──────────────────────────────────────────
   Three stills, equal height, cropped to a consistent frame so
   mismatched source ratios do not make the row look accidental.
──────────────────────────────────────────────────────────────── */
.dev-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 3rem 0 3.25rem;
}

.dev-still {
    overflow: hidden;
    border-radius: 2px;
    background: #08090a;
}

.dev-still img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: transform 0.9s ease, opacity 0.6s ease;
    opacity: 0.94;
}

.dev-still:hover img {
    transform: scale(1.03);
    opacity: 1;
}

@media (max-width: 767px) {
    .dev-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin: 2.25rem 0 2.5rem;
    }
}

#development .film-status {
    margin-top: 1.75rem;
    font-size: 14px;
}


/* ── Contact ─────────────────────────────────────────────────── */
#contact {
    padding-bottom: 90px;
}

.contact-email {
    margin-top: 1.75rem;
    font-family: "EB Garamond", Georgia, serif;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}

.contact-email a {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    padding-bottom: 2px;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.contact-email a:hover {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.7);
}

.contact-line {
    margin-top: 1.5rem;
    font-size: 15px;
    letter-spacing: 0.02em;
}

.footer {
    padding-top: 0;
}


/* ── Quality floor ───────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .dev-still img { transition: none; }
    .wow, .animated {
        animation: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .hero-mark { opacity: 0.95 !important; }
}

/* ============================================================
   HERO SOCIALS
   ============================================================ */

#slider-section .hero-socials {
    position: absolute !important;
    top: 50% !important;
    right: 28px !important;
    left: auto !important;
    transform: translateY(-50%) !important;

    z-index: 500 !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

#slider-section .hero-socials li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

#slider-section .hero-socials a {
    width: 42px !important;
    height: 42px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: 50% !important;

    color: #ffffff !important;
    background: rgba(0,0,0,.12) !important;

    text-decoration: none !important;
    font-size: 19px !important;

    transition: all .25s ease !important;
}

#slider-section .hero-socials a:hover {
    background: rgba(255,255,255,.95) !important;
    border-color: #ffffff !important;
    color: #111111 !important;
}

#slider-section .hero-socials i {
    color: inherit !important;
    font-size: 20px !important;
    line-height: 1 !important;
}

#slider-section .hero-social-x {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}

@media (max-width: 767px) {
    #slider-section .hero-socials {
        display: none !important;
    }
}

.la-twitter.x-icon::before {
  content: "𝕏" !important;
  font-family: sans-serif !important;
  font-weight: bold;
  font-style: normal;
}

/* ============================================================
   SIDE MENU SOCIALS
   ============================================================ */

.side-menu .menu-socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;

    margin: 0 0 14px;
    padding: 0;

    list-style: none;
}

.side-menu .menu-socials li {
    margin: 0;
    padding: 0;
}

.side-menu .menu-socials a {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;

    color: #ffffff !important;
    background: transparent;

    text-decoration: none;
    font-size: 19px;

    transition: all .25s ease;
}

.side-menu .menu-socials a:hover {
    background: rgba(255,255,255,.95) !important;
    border-color: #ffffff !important;
    color: #111111 !important;
}

.side-menu .menu-socials i {
    color: inherit !important;
    font-size: 20px;
    line-height: 1;
}

/* Side-menu social entrance animation.
   Triggered when the menu actually opens, rather than by page scroll. */

.side-menu .menu-socials li {
    opacity: 0;
    transform: translateY(16px);

    transition:
        opacity 0.9s ease,
        transform 0.9s ease;
}

.side-menu.side-menu-active .menu-socials li {
    opacity: 1;
    transform: translateY(0);
}

.side-menu.side-menu-active .menu-socials li:nth-child(1) {
    transition-delay: 0.55s;
}

.side-menu.side-menu-active .menu-socials li:nth-child(2) {
    transition-delay: 0.75s;
}

.side-menu.side-menu-active .menu-socials li:nth-child(3) {
    transition-delay: 0.95s;
}

/* ============================================================
   CONTACT SOCIALS
   ============================================================ */

#contact .contact-socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;

    margin: 28px 0 0;
    padding: 0;

    list-style: none;
}

#contact .contact-socials li {
    margin: 0;
    padding: 0;
}

#contact .contact-socials a {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;

    color: #ffffff !important;
    background: transparent;

    text-decoration: none;
    font-size: 19px;

    transition: all .25s ease;
}

#contact .contact-socials a:hover {
    background: rgba(255,255,255,.95) !important;
    border-color: #ffffff !important;
    color: #111111 !important;
}

#contact .contact-socials i {
    color: inherit !important;
    font-size: 20px;
    line-height: 1;
}