/* ==========================================================================
   Welcome hero — background video
   Loaded after the m4 stylesheets; remove this file's <link> to go back to
   the sky-and-clouds hero exactly as it was.
   ========================================================================== */

.m4-welcome__sky img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.m4-welcome__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
    background: #1a1f24;   /* the poster's own tone, for the instant before it decodes */
}

/* The video is visible from the first paint and shows its poster — which is
   the footage's own first frame — until playback starts. There used to be an
   opacity gate here that hid the poster and let the sky photo show through
   for ~2s before the footage faded in over it: three different backgrounds in
   the first three seconds. Now there is one. */

/* Readability scrim. It used to lay a flat 42-72% wash over the whole frame,
   which made the renders look grey. Now it darkens only where something has
   to be read: a short band under the header, and the lower-left corner where
   the copy sits. The top and right of the footage stay at full brightness. */
.m4-welcome__scrim {
    position: absolute;
    /* the sky layer hangs 24 units below the section (it fades out under the
       cloud bank); the scrim must end where the visible hero ends, or its
       darkest band lands off-screen */
    inset: 0 0 calc(24 * var(--m4r)) 0;
    z-index: 1;
    pointer-events: none;
    /* stops chosen as the lightest that keeps every line readable over every
       second of the footage, at 768-1920px: title >= 3.35:1 (large text needs
       3), slogan >= 5.3:1, lede >= 8.7:1, against the brightest 5% of pixels */
    background:
        linear-gradient(180deg, rgba(6, 10, 14, 0.46) 0%, rgba(6, 10, 14, 0) 22%),
        linear-gradient(0deg,   rgba(6, 10, 14, 0.86) 0%, rgba(6, 10, 14, 0.55) 30%, rgba(6, 10, 14, 0) 72%),
        linear-gradient(90deg,  rgba(6, 10, 14, 0.45) 0%, rgba(6, 10, 14, 0) 58%);
}

/* the floating clouds fight the footage — the bottom cloud bank stays,
   because it is what hands over to the first project section */
.has-hero-video .m4-welcome__clouds {
    display: none;
}

.has-hero-video .m4-welcome__bank {
    opacity: 0.9;
}

/* light type over the video — these beat the .m4 .m4-welcome__content rules */
html.has-hero-video .m4 .m4-welcome,
html.has-hero-video .m4 .m4-welcome__content .m4-welcome__title,
html.has-hero-video .m4 .m4-welcome__eyebrow,
html.has-hero-video .m4 .m4-welcome__scroll,
html.has-hero-video .m4 .m4-welcome__scroll-text {
    color: #fff !important;
}

html.has-hero-video .m4 .m4-welcome__lede,
html.has-hero-video .m4 .m4-welcome__scroll .m4-welcome__scroll-text {
    color: rgba(255, 255, 255, 0.85) !important;
}

html.has-hero-video .m4 .m4-welcome__content .m4-welcome__title {
    text-shadow: 0 2px 34px rgba(0, 0, 0, 0.4);
}

html.has-hero-video .m4 .m4-welcome__slogan {
    color: #E7C98B !important;
}

html.has-hero-video .m4-welcome__scroll-mouse {
    border-color: rgba(255, 255, 255, 0.7);
}

html.has-hero-video .m4-welcome__scroll-mouse span {
    background: #fff;
}

/* reduced motion: the inline script never starts playback, so these visitors
   see the still poster frame — no motion, and the same image everyone else
   opens on. (It used to hide the element and fall back to the sky.) */

/* The part of the sky layer that hangs below the section gets the scrim's
   bottom tone too, so the footage fades out as one dark mass through the sky
   layer's own mask — no line where the scrim stops. */
.m4-welcome__sky::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(24 * var(--m4r));
    z-index: 1;
    pointer-events: none;
    background: rgba(6, 10, 14, 0.86);
}

/* ==========================================================================
   HERO LAYOUT — editorial, after sobha.com
   One quiet block of type in the lower-left, the footage left to do the
   talking. The centred stack (eyebrow, 130px title, gold slogan, lede, scroll
   cue) sat dead centre over the busiest part of every shot — straight across
   the facades and the video's own "PAGE 22" sign.

   Sizes are in px/vw here rather than the m4 unit: below 768px that unit is
   2.667vw, which made every size in the hero grow with screen width (the lede
   ran 73px into the scroll cue at 626px).
   ========================================================================== */

/* full screen on every device: the m4 default floors the hero at 560px,
   which pushed it past the fold on short laptop windows */
.m4 .m4-welcome {
    height: calc(var(--vh, 1vh) * 100);
    min-height: 480px;
}

/* the copy aligns with the logo, not with the m4 grid's wider gutter */
.m4 .m4-welcome__content > .m4-container {
    max-width: none;
    padding: 0 clamp(20px, 2.3vw, 48px);
}

.m4 .m4-welcome__content {
    align-items: end;
    text-align: left;
    padding-top: 0;
    padding-bottom: clamp(64px, 12vh, 132px);
}

.m4 .m4-welcome__eyebrow {
    margin: 0 0 18px;
    font-size: 12px;
    letter-spacing: 0.36em;
    text-align: left;
}

.m4 .m4-welcome__content .m4-welcome__title {
    font-size: clamp(50px, 6.3vw, 112px) !important;
    line-height: 0.98 !important;
    letter-spacing: 0.02em !important;
    text-align: left !important;
    text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
}

/* gold tracked caps, one rule trailing off to the right */
.m4 .m4-welcome__slogan,
html:not(.theme-dark) .m4 .m4-welcome__slogan {
    justify-content: flex-start;
    margin: 22px 0 0;
    gap: 16px;
    font-size: 13px;
    letter-spacing: 0.38em;
}
.m4 .m4-welcome__slogan::before { display: none; }
.m4 .m4-welcome__slogan::after  { width: 64px; opacity: 0.8; }

.m4 .m4-welcome__lede {
    margin: 18px 0 0;
    max-width: 30em;
    font-size: 17px;
    line-height: 1.6;
    text-align: left;
    text-wrap: pretty;
}

/* the next section's mist is the cue; the floating call buttons own the
   bottom-right corner, so there is no clean place for a second one */
.m4 .m4-welcome__scroll { display: none; }

/* the cloud bank stays as the hand-over into the first project, but as a thin
   wisp along the bottom edge rather than a grey band under the copy */
.has-hero-video .m4-welcome__bank { opacity: 0.7; }

/* ---- phones: one block of type on the footage's lower edge ----------
   Left-aligned like desktop, so the copy never runs under the floating call
   buttons in the bottom-right corner, and the hero ends on a clean edge
   instead of a dark fog band above Page 22. */
@media (max-width: 767px) {
    .m4 .m4-welcome {
        height: calc(var(--vh, 1vh) * 100);   /* the whole first screen */
        min-height: 480px;
        max-height: none;
    }

    .m4 .m4-welcome__content > .m4-container {
        padding: 0 20px;
    }

    .m4 .m4-welcome__content {
        text-align: left;
        padding-bottom: max(44px, calc(env(safe-area-inset-bottom) + 28px));
    }

    .m4 .m4-welcome__eyebrow {
        margin: 0 0 12px;
        font-size: 11px;
        letter-spacing: 0.34em;
        text-align: left;
    }

    .m4 .m4-welcome__content .m4-welcome__title {
        font-size: clamp(38px, 11.6vw, 52px) !important;
        line-height: 1 !important;
        letter-spacing: 0.02em !important;
        text-align: left !important;
    }

    .m4 .m4-welcome__slogan,
    html:not(.theme-dark) .m4 .m4-welcome__slogan {
        justify-content: flex-start;
        margin: 16px 0 0;
        gap: 12px;
        font-size: 11.5px;
        letter-spacing: 0.34em;
    }
    .m4 .m4-welcome__slogan::before { display: none; }
    .m4 .m4-welcome__slogan::after  { display: block; width: 40px; opacity: 0.8; }

    .m4 .m4-welcome__lede {
        margin: 14px 0 0;
        max-width: min(300px, calc(100vw - 88px));   /* clear of the call buttons */
        font-size: 15px;
        line-height: 1.55;
        text-align: left;
    }

    /* the type sits in the bottom third, so that is where the scrim is */
    .m4-welcome__scrim {
        background:
            linear-gradient(180deg, rgba(6, 10, 14, 0.5) 0%, rgba(6, 10, 14, 0) 18%),
            linear-gradient(0deg,   rgba(6, 10, 14, 0.9) 0%, rgba(6, 10, 14, 0.8) 28%, rgba(6, 10, 14, 0.52) 56%, rgba(6, 10, 14, 0) 80%);
        /* checked over every second of the footage at 360-430px wide:
           title >= 5.2:1, gold line >= 6.6:1, lede >= 13:1 */
    }

    /* no overhang on phones: the footage stops exactly where the hero stops */
    .m4 .m4-welcome__sky {
        bottom: 0;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .m4-welcome__scrim { bottom: 0; }
    .m4-welcome__sky::after { display: none; }

    /* the cloud bank was a grey smear across dark footage on a phone */
    .has-hero-video .m4-welcome__bank { display: none; }
}

/* ---- tablets held upright: a tall screen, so the type scales up with it -- */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
    .m4 .m4-welcome__content .m4-welcome__title {
        font-size: clamp(60px, 8.4vw, 100px) !important;
    }
    .m4 .m4-welcome__lede {
        font-size: 18px;
        max-width: 28em;
    }
    .m4 .m4-welcome__content {
        padding-bottom: clamp(72px, 9vh, 120px);
    }
}

/* ---- phones held sideways: the hero is the screen, the type is one line -- */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1023px) {
    .m4 .m4-welcome {
        height: calc(var(--vh, 1vh) * 100);
        min-height: 300px;
        max-height: none;
    }
    .m4 .m4-welcome__content > .m4-container { padding: 0 max(24px, env(safe-area-inset-left)); }
    .m4 .m4-welcome__content { text-align: left; padding-top: 0; padding-bottom: 28px; }
    .m4 .m4-welcome__eyebrow { margin: 0 0 8px; font-size: 10.5px; text-align: left; }
    .m4 .m4-welcome__content .m4-welcome__title {
        font-size: clamp(34px, 6.4vw, 52px) !important;
        line-height: 1 !important;
        text-align: left !important;
    }
    .m4 .m4-welcome__slogan,
    html:not(.theme-dark) .m4 .m4-welcome__slogan {
        justify-content: flex-start; margin: 12px 0 0; gap: 12px; font-size: 11px; letter-spacing: 0.34em;
    }
    .m4 .m4-welcome__slogan::before { display: none; }
    .m4 .m4-welcome__slogan::after  { display: block; width: 40px; }
    .m4 .m4-welcome__lede { margin: 10px 0 0; max-width: 460px; font-size: 14px; line-height: 1.5; text-align: left; }
    .m4-welcome__scrim {
        bottom: 0;
        background:
            linear-gradient(180deg, rgba(6, 10, 14, 0.5) 0%, rgba(6, 10, 14, 0) 26%),
            linear-gradient(0deg,   rgba(6, 10, 14, 0.9) 0%, rgba(6, 10, 14, 0.72) 40%, rgba(6, 10, 14, 0) 80%),
            linear-gradient(90deg,  rgba(6, 10, 14, 0.5) 0%, rgba(6, 10, 14, 0) 60%);
    }
    .m4 .m4-welcome__sky { bottom: 0; -webkit-mask-image: none; mask-image: none; }
    .m4-welcome__sky::after { display: none; }
    .has-hero-video .m4-welcome__bank { display: none; }
}

/* the menu button: a light disc read as a hole in the footage — make it
   glass on the hero, and let the scrolled-state rules take over after */
html:not(.theme-dark) .sb-header.sb-header--on-dark:not(.sb-header--scrolled) .sb-header__menu-btn {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.34);
    color: #fff;
    box-shadow: none;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}
html:not(.theme-dark) .sb-header.sb-header--on-dark:not(.sb-header--scrolled) .sb-header__menu-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}