/*
 * Landing page (/): one full-height panel per division, side by side
 * (stacked on portrait phones), each led by the division's own logo. The page
 * is always exactly one screen: the copyright bar sits over the panels, and
 * logos and type are sized from the width of one panel (--panel-w, independent
 * of the hover growth so nothing reflows mid-transition) and from the viewport
 * height. The logos are drawn 1.3 times that base height (--logo-zoom); on a
 * screen too short for everything only the logo gives way, never below the base
 * height.
 * Breakpoints follow the original stylesheet: 1366 / 1023 / 767 / 420px,
 * plus max-height queries for short screens and landscape phones.
 * The legacy stylesheets are not loaded here, hence the small reset.
 */

:root {
    --dic-red: #db1f25;
    --dic-dark: #34383a;
    --dic-darker: #242020;
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
    color-scheme: dark;
}

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

html,
body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    background: var(--dic-darker);
    color: #fff;
    font-family: 'Nunito Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 100%;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Stops iOS from enlarging text in landscape, which would break the fit. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.u-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Screen */
.c-split {
    --gutter: 2rem;
    /* Clear space above the panel content, and the copyright bar below it. */
    --bar-top: 60px;
    --bar-bottom: 60px;
    /* Space between the logo and the division name: it does not grow with the logo. */
    --logo-gap: clamp(1rem, 3.5vh, 2.25rem);
    position: relative;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/*
 * Copyright bar over the bottom of the panels; clicks go through to the panel below,
 * except on the link of the credit to DivaByte. The credit is centred under the
 * copyright, as in the footer of the division pages; side by side on landscape
 * phones, whose bar is too short for two lines.
 */
.c-split__bottom {
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem 2.5rem;
    height: var(--bar-bottom);
    padding: 0 var(--gutter);
    pointer-events: none;
}
.c-split__bottom p {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}
.c-split__credit a {
    padding: 0.5rem 0; /* a taller touch target: the line itself does not move */
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    pointer-events: auto;
    transition: color 300ms var(--ease-out);
}
.c-split__credit a:hover {
    color: #fff;
}
.c-split__credit a:focus-visible {
    color: #fff;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/*
 * Language switcher (partials/language-switcher.blade.php) in the top corner, in the
 * clear bar above the panel content: over the panels (and their focus frames), so it
 * stays clickable. "EN | FR", the current language underlined.
 */
.c-split__lang {
    position: absolute;
    z-index: 20;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    height: var(--bar-top);
    padding: 0 calc(var(--gutter) - 0.625rem);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
/* 32px touch target: the bar is 28px to 60px tall. */
.c-split__lang .c-lang__item {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    /* The letter spacing also follows the last letter: the right padding is that much smaller. */
    padding: 0 calc(0.625rem - 0.16em) 0 0.625rem;
    color: #fff;
    text-decoration: none;
}
.c-split__lang .c-lang__item + .c-lang__item {
    border-left: 1px solid rgba(255, 255, 255, 0.55);
}
.c-split__lang .c-lang__item--current {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}
.c-split__lang .c-lang__link {
    color: rgba(255, 255, 255, 0.8);
    transition: color 300ms var(--ease-out);
}
.c-split__lang .c-lang__link:hover {
    color: #fff;
}
.c-split__lang .c-lang__link:focus-visible {
    color: #fff;
    outline: 2px solid #fff;
    outline-offset: 2px;
}
/* The language's full name, for screen readers. */
.c-lang__name {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Panels */
.c-split__panels {
    --panel-w: calc(100vw / var(--n, 1));
    /* 0.15 × panel width (0.195 with the zoom) keeps a 3.9:1 logo within 0.76 × panel width (the official lockups: 2.35:1 at 130%, 0.6). */
    --logo-h: clamp(2rem, min(var(--panel-w) * 0.15, 12vh), 7.5rem);
    /*
     * The landing draws its logos 1.3 times the base height (client review of
     * 2026-10-12); the header and the maintenance page keep theirs. home.blade.php
     * sizes the width/height attributes with the same factor.
     */
    --logo-zoom: 1.3;
    display: flex;
    height: 100%;
}
.c-split__panel {
    position: relative;
    isolation: isolate;
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: var(--bar-top) var(--gutter) var(--bar-bottom);
    color: #fff;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: flex-grow 800ms var(--ease-in-out);
}
.c-split__image {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1400ms var(--ease-out);
}

/* Legibility gradient, darker at the top and at the copyright bar, tinted with the division colour. */
.c-split__shade {
    --panel-tint: rgba(20, 18, 18, 0.2);
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(20, 18, 18, 0.72) 0%, rgba(20, 18, 18, 0.22) 24%, rgba(20, 18, 18, 0.3) 60%, rgba(20, 18, 18, 0.9) 100%),
        linear-gradient(15deg, var(--panel-tint) 0%, transparent 65%),
        rgba(20, 18, 18, 0.25);
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
    .c-split__shade {
        --panel-tint: color-mix(in srgb, var(--panel-accent, var(--dic-red)) 50%, transparent);
    }
}
/* Dims the panel that is not being pointed at. */
.c-split__shade::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(14, 12, 12, 0.55);
    opacity: 0;
    transition: opacity 600ms var(--ease-out);
}
/* Division colour along the bottom edge of the active panel. */
.c-split__shade::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--panel-accent, var(--dic-red));
    transform: scaleX(0);
    transition: transform 700ms var(--ease-out);
}

/* Hairline divider between panels. */
.c-split__panel + .c-split__panel::before {
    content: '';
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.4) 22%, rgba(255, 255, 255, 0.4) 78%, transparent 100%);
    pointer-events: none;
}

/*
 * Keyboard focus: a frame drawn inside the panel, because an outline around a
 * full-viewport element would be clipped. The transparent outline only shows
 * in forced-colors (high contrast) mode.
 */
.c-split__panel::after {
    content: '';
    position: absolute;
    z-index: 4;
    inset: 8px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}
.c-split__panel:focus-visible {
    outline: 2px solid transparent;
    outline-offset: -4px;
}
.c-split__panel:focus-visible::after {
    opacity: 1;
}
.c-split__panel:active .c-split__shade::after {
    opacity: 0.4;
    transition-duration: 100ms;
}

/* Panel content */
.c-split__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Narrower than a panel squeezed by its growing neighbour (85%), so it never reflows or clips. */
    width: calc(var(--panel-w) * 0.8);
    /*
     * Never taller than the panel's room (between the bars, or inside the panel
     * padding on phones): on a screen too short for everything the logo shrinks to
     * fit, down to its min-height; the texts and the button keep their size. Centred
     * as the panel centred it, should it still overflow.
     */
    max-height: 100%;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 28px rgba(0, 0, 0, 0.45);
    transition: opacity 600ms var(--ease-out);
}
.c-split__content > * {
    margin: 0;
}
/*
 * Sized by height: logos with the same layout share one canvas height, so at the
 * same height their letters match whatever their width. --logo-scale (the
 * division's "Logo size", set on the panel) draws a logo of another layout
 * taller, e.g. the official lockups (130%) with their second line; --logo-zoom
 * (1.3) applies to every logo of the landing, before it. max-width only reins in
 * an unusually wide uploaded logo (object-fit keeps its proportions; a logo it
 * caps sits on the bottom of its box, so the space above the name stays the same).
 * min-height is how far a logo gives way on a short screen: its size before the zoom.
 */
.c-split .c-split__logo {
    display: block;
    width: auto;
    height: calc(var(--logo-h) * var(--logo-zoom) * var(--logo-scale, 1));
    min-height: calc(var(--logo-h) * var(--logo-scale, 1));
    max-width: min(100%, var(--panel-w) * 0.8);
    margin-bottom: var(--logo-gap);
    object-fit: contain;
    object-position: 50% 100%;
    filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.35));
}
.c-split__name {
    max-width: 100%;
    font-family: 'Orbitron', 'Nunito Sans', sans-serif;
    /* Second to the logo; 0.055 × panel width keeps "COMMISSIONING" (~9.8em wide) well inside the content box. */
    font-size: clamp(1.125rem, min(var(--panel-w) * 0.055, 8vh), 3.25rem);
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.05;
    text-transform: uppercase;
    overflow-wrap: break-word;
    text-wrap: balance;
}
.c-split .c-split__tagline {
    max-width: 30em;
    margin-top: 1.1rem;
    font-size: 1.125rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
    text-wrap: balance;
}
.c-split .c-split__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.9em;
    max-width: 100%;
    min-height: 52px;
    margin-top: 2.25rem;
    padding: 0.5em 1.75em;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 2px;
    background: rgba(20, 18, 18, 0.2);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.3;
    text-transform: uppercase;
    text-shadow: none;
    transition: background-color 400ms var(--ease-out), border-color 400ms var(--ease-out), color 400ms var(--ease-out);
}
.c-split__arrow {
    flex: none;
    width: 1.75em;
    height: auto;
    transition: transform 400ms var(--ease-out);
}

/*
 * Side by side, the panels share one set of rows (logo, name, tagline, button),
 * each as tall as its tallest entry across the panels: the logos, names and
 * "Explore" buttons line up whatever the length of each tagline. The rows are
 * centred between the two bars. Browsers without subgrid centre each panel's
 * content on its own (the flex layout above). Only the logo row may shrink below
 * its content: on a short screen it takes what the name, tagline and button leave
 * between the bars, and the logo follows it.
 * Columns come from --cols (home.blade.php: one minmax(0, var(--wN, 1fr)) per
 * panel), so the hover growth below can widen one column.
 */
@supports (grid-template-rows: subgrid) {
    @media (min-width: 768px), (orientation: landscape) {
        .c-split__panels {
            display: grid;
            grid-template-columns: var(--cols, repeat(var(--n, 1), minmax(0, 1fr)));
            grid-template-rows: minmax(var(--bar-top), 1fr) minmax(0, auto) repeat(3, auto) minmax(var(--bar-bottom), 1fr);
        }
        .c-split__panel {
            display: grid;
            grid-row: 1 / -1;
            grid-template-rows: subgrid;
            justify-items: center;
            /* The first and last rows keep the bars clear. */
            padding-top: 0;
            padding-bottom: 0;
        }
        .c-split__content {
            display: grid;
            grid-row: 2 / span 4;
            grid-template-rows: subgrid;
            align-items: start;
            justify-items: center;
            justify-content: normal;
        }
        /*
         * The logo row takes whatever the name, tagline and button leave between
         * the bars, up to the logo's full height: on a short screen the logo shrinks
         * with it (never below its min-height) instead of pushing the button under
         * the copyright bar.
         */
        .c-split .c-split__logo {
            grid-row: 1;
            align-self: end;
            max-height: calc(100% - var(--logo-gap));
        }
        .c-split__name {
            grid-row: 2;
        }
        .c-split .c-split__tagline {
            grid-row: 3;
        }
        .c-split .c-split__cta {
            grid-row: 4;
        }
    }
}

/*
 * Hover and keyboard focus: the pointed panel takes the lead (white button,
 * accent line, zoomed photo, sliding arrow), the others step back. Deliberately
 * not behind a "(hover: hover)" or "(any-hover: hover)" media query: Chrome and
 * Edge answer "none" to both for every input when Windows reports a 2-in-1 in
 * tablet or tent posture (Chromium issue 40277167), and so does a browser
 * emulating a touch device, although a mouse, touchpad or pen still hovers.
 * :hover itself only matches while something hovers, and a tap on a phone
 * follows the panel's link at once.
 */
.c-split__panel:is(:hover, :focus-visible) .c-split__cta {
    border-color: #fff;
    background: #fff;
    color: var(--dic-darker);
}
.c-split__panel:is(:hover, :focus-visible) .c-split__shade::before {
    transform: scaleX(1);
}
.c-split__panels:has(.c-split__panel:is(:hover, :focus-visible)) .c-split__panel:not(:hover, :focus-visible) .c-split__shade::after {
    opacity: 1;
}
.c-split__panels:has(.c-split__panel:is(:hover, :focus-visible)) .c-split__panel:not(:hover, :focus-visible) .c-split__content {
    opacity: 0.72;
}
@media (prefers-reduced-motion: no-preference) {
    .c-split__panel:is(:hover, :focus-visible) .c-split__image {
        transform: scale(1.06);
    }
    .c-split__panel:is(:hover, :focus-visible) .c-split__arrow {
        transform: translateX(4px);
    }
}
/* Reduced motion: no zoom, the pointed photo brightens instead (no movement). */
@media (prefers-reduced-motion: reduce) {
    .c-split__panel:is(:hover, :focus-visible) .c-split__image {
        filter: brightness(1.18);
    }
}
/*
 * Growth only when the panels are side by side (not on stacked phone panels):
 * the pointed panel's column (shared grid) or flex item (fallback) widens. The
 * one effect that moves the layout, so it waits for an input that hovers: a tap
 * on a touch screen does not shift the panels while the link opens.
 */
@media (any-hover: hover) and (prefers-reduced-motion: no-preference) and (min-width: 768px),
    (any-hover: hover) and (prefers-reduced-motion: no-preference) and (orientation: landscape) {
    .c-split__panel:is(:hover, :focus-visible) {
        flex-grow: 1.35;
    }
    .c-split__panels {
        transition: grid-template-columns 800ms var(--ease-in-out);
    }
    .c-split__panels:has(> .c-split__panel:nth-of-type(1):is(:hover, :focus-visible)) {
        --w1: 1.35fr;
    }
    .c-split__panels:has(> .c-split__panel:nth-of-type(2):is(:hover, :focus-visible)) {
        --w2: 1.35fr;
    }
    .c-split__panels:has(> .c-split__panel:nth-of-type(3):is(:hover, :focus-visible)) {
        --w3: 1.35fr;
    }
    .c-split__panels:has(> .c-split__panel:nth-of-type(4):is(:hover, :focus-visible)) {
        --w4: 1.35fr;
    }
}

/* Entrance */
@media (prefers-reduced-motion: no-preference) {
    .c-split__image {
        animation: home-image-in 1600ms var(--ease-out) backwards;
        animation-delay: calc(var(--i, 0) * 120ms);
    }
    .c-split__content > * {
        animation: home-rise 900ms var(--ease-out) backwards;
    }
    .c-split__content > :nth-child(1) {
        animation-delay: calc(var(--i, 0) * 120ms + 300ms);
    }
    .c-split__content > :nth-child(2) {
        animation-delay: calc(var(--i, 0) * 120ms + 400ms);
    }
    .c-split__content > :nth-child(3) {
        animation-delay: calc(var(--i, 0) * 120ms + 500ms);
    }
    .c-split__content > :nth-child(4) {
        animation-delay: calc(var(--i, 0) * 120ms + 600ms);
    }
    .c-split__bottom,
    .c-split__panel + .c-split__panel::before {
        animation: home-fade 1000ms var(--ease-out) 200ms backwards;
    }
}
@media (prefers-reduced-motion: reduce) {
    .c-split__panel,
    .c-split__panel *,
    .c-split__panel::before,
    .c-split__panel::after,
    .c-split__panel *::before,
    .c-split__panel *::after {
        animation: none !important;
        transition: none !important;
    }
}
@keyframes home-image-in {
    from {
        opacity: 0;
        scale: 1.08;
    }
}
@keyframes home-rise {
    from {
        opacity: 0;
        translate: 0 1rem;
    }
}
@keyframes home-fade {
    from {
        opacity: 0;
    }
}

/* Sizes */
@media (max-width: 1366px) {
    .c-split .c-split__tagline {
        font-size: 1.0625rem;
    }
}
@media (max-width: 1023px) {
    .c-split {
        --gutter: 1.5rem;
        --bar-top: 52px;
        --bar-bottom: 52px;
    }
    .c-split .c-split__tagline {
        font-size: 1rem;
    }
    .c-split .c-split__cta {
        margin-top: 1.75rem;
    }
}
@media (max-width: 767px) {
    .c-split {
        --gutter: 1.25rem;
        --bar-top: 44px;
        --bar-bottom: 44px;
    }
    .c-split .c-split__tagline {
        margin-top: 0.6rem;
        font-size: 0.875rem;
        line-height: 1.45;
    }
    .c-split .c-split__cta {
        min-height: 44px;
        margin-top: 1.25rem;
        padding: 0.5em 1.4em;
        font-size: 0.6875rem;
        letter-spacing: 0.12em;
    }
}
@media (max-width: 420px) {
    .c-split {
        --gutter: 1rem;
        --bar-top: 38px;
        --bar-bottom: 38px;
    }
    .c-split__bottom p {
        font-size: 0.625rem;
        letter-spacing: 0.1em;
    }
}

/* Short desktop and tablet screens */
@media (min-width: 768px) and (max-height: 820px) {
    .c-split {
        --bar-top: 50px;
        --bar-bottom: 50px;
    }
}

/*
 * Portrait phones: panels stacked, each an equal share of the height. The page
 * <h1> comes first in <main>, hence :first-of-type rather than :first-child.
 */
@media (max-width: 767px) and (orientation: portrait) {
    .c-split__panels {
        --panel-w: 100vw;
        --logo-h: clamp(2rem, min(var(--panel-w) * 0.15, 8vh), 4.5rem);
        flex-direction: column;
    }
    .c-split__panels--many {
        --logo-h: clamp(2rem, min(var(--panel-w) * 0.15, 6vh), 4.5rem);
    }
    .c-split__panel {
        padding: 1rem var(--gutter);
    }
    .c-split__panel:first-of-type {
        padding-top: var(--bar-top);
    }
    .c-split__panel:last-child {
        padding-bottom: var(--bar-bottom);
    }
    .c-split__panel + .c-split__panel::before {
        right: 0;
        bottom: auto;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 20%, rgba(255, 255, 255, 0.4) 80%, transparent 100%);
    }
    .c-split__content {
        width: min(100%, 34rem);
    }
    .c-split__name {
        font-size: clamp(1.375rem, 7vw, 2.5rem);
    }
    .c-split__panels--many .c-split__tagline {
        display: none;
    }
}
/*
 * Common phones (up to 800px tall): two stacked panels leave little room for the
 * 1.3x logos, so the space around the texts tightens a little, never the space
 * between the logo and the name. Taller phones keep the spacing above.
 */
@media (max-width: 767px) and (orientation: portrait) and (max-height: 800px) {
    .c-split__panel {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .c-split .c-split__tagline {
        margin-top: 0.4rem;
    }
    .c-split .c-split__cta {
        margin-top: 0.75rem;
    }
}
@media (max-width: 767px) and (orientation: portrait) and (max-height: 620px) {
    .c-split {
        --bar-top: 34px;
        --bar-bottom: 34px;
        --logo-gap: 0.75rem;
    }
    .c-split .c-split__cta {
        min-height: 40px;
    }
}
/* Three or more stacked panels on a small phone: a logo that small would be illegible anyway. */
@media (max-width: 767px) and (orientation: portrait) and (max-height: 520px) {
    .c-split__panels--many .c-split__logo {
        display: none;
    }
}
@media (max-width: 767px) and (orientation: portrait) and (max-height: 440px) {
    .c-split__tagline {
        display: none;
    }
}

/* Landscape phones: side by side, compact bars and type. */
@media (orientation: landscape) and (max-height: 540px) {
    .c-split {
        --bar-top: 32px;
        --bar-bottom: 32px;
        --logo-gap: 0.75rem;
    }
    .c-split .c-split__tagline {
        margin-top: 0.5rem;
        font-size: 0.8125rem;
        line-height: 1.45;
    }
    .c-split .c-split__cta {
        min-height: 40px;
        margin-top: 0.875rem;
        padding: 0.5em 1.25em;
        font-size: 0.6875rem;
        letter-spacing: 0.12em;
    }
    .c-split__bottom {
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
    }
    .c-split__bottom p {
        font-size: 0.625rem;
    }
}
@media (orientation: landscape) and (max-height: 330px) {
    .c-split {
        --bar-top: 28px;
        --bar-bottom: 28px;
    }
}
@media (orientation: landscape) and (max-height: 260px) {
    .c-split__tagline {
        display: none;
    }
}