/* ===================================================================
   TOKENS
   =================================================================== */
:root {
    /* COLORS — BRAND */
    --primary-blue: #4A7AF5;
    --primary-blue-dark: #3463DB;

    /* COLORS — NEUTRALS */
    --ink: #02091D;
    --body-text: #444444;
    --surface-light: #F5F8FE;
    --line: #DCDCDC;
    --white: #FFFFFF;
    --white-muted: rgba(255, 255, 255, .72);
    --line-dark: rgba(255, 255, 255, .14);
    --glass: rgba(255, 255, 255, .08);
    --glass-line: rgba(255, 255, 255, .16);
    --glow-blue: rgba(74, 122, 245, .75);
    --glow-warm: rgba(214, 158, 26, .6);
    --hero-shade: linear-gradient(90deg, rgba(2, 9, 29, .82) 0%, rgba(2, 9, 29, .45) 55%, rgba(2, 9, 29, .1) 100%);
    --card-shade: linear-gradient(180deg, rgba(2, 9, 29, 0) 45%, rgba(2, 9, 29, .85) 100%);

    /* ROLE ALIASES */
    --text: var(--ink);
    --primary: var(--primary-blue);
    --black: var(--ink);

    /* FONTS */
    --font-mona: "Mona Sans", system-ui, sans-serif;
    --font-google: "Google Sans", system-ui, sans-serif;
    --font-playfair: "Playfair Display", Georgia, serif;

    /* RAW TYPE SCALE (name==value) */
    --f12: 12px;
    --f14: 14px;
    --f16: 16px;
    --f18: 18px;
    --f20: 20px;
    --f25: 25px;
    --f30: 30px;
    --f35: 35px;
    --f40: 40px;
    --f50: clamp(2.5rem, 2.375rem + 0.625vw, 3.125rem);       /* 50 - 40 */
    --f60: clamp(3.125rem, 3rem + 0.625vw, 3.75rem);           /* 60 - 50 */
    --f70: clamp(3.4375rem, 3.25rem + 0.9375vw, 4.375rem);     /* 70 - 55 */
    --f80: 80px;
    --f100: 100px;
    --f130: 130px;
    --f200: 200px;

    --bodyLh: 1.6;
    --lhTight: 1.15;
    --lsTight: -0.05em;
    --lsSnug: -0.04em;

    /* CONTAINER & SPACE */
    --container: 1440px;
    --gutter: 15px;
    --sectionGap: 120px;
    --sectiongapHalf: 60px;
    --sp4: 4px;
    --sp5: 5px;
    --sp8: 8px;
    --sp10: 10px;
    --sp12: 12px;
    --sp15: 15px;
    --sp20: 20px;
    --sp25: 25px;
    --sp30: 30px;
    --sp35: 35px;
    --sp40: 40px;
    --sp50: 50px;
    --sp60: 60px;
    --sp70: 70px;
    --sp80: 80px;
    --sp100: 100px;
    --g30: 30px;

    /* RADIUS / SHADOW / Z / EASE */
    --r-sm: 5px;
    --r-btn: 8px;
    --r-md: 10px;
    --r-lg: 20px;
    --r-xl: 30px;
    --r-full: 9999px;
    --shadow-sm: 0 4px 15px rgba(1, 15, 28, .06);
    --shadow-md: 0 20px 18px rgba(8, 29, 82, .13);
    --shadow-lg: 0 25px 70px rgba(8, 10, 55, .08);
    --overlay: rgba(0, 0, 0, .55);
    --z-sticky: 200;
    --z-drop: 210;
    --z-modal: 300;
    --ease: .25s ease;
    --ease-out: .3s cubic-bezier(.2, .7, .3, 1);
    --transition: all .3s ease-in-out;

    /* SCROLLBAR */
    --scrollbar-width: 10px;
    --scrollbar-thumb: var(--primary);
    --scrollbar-thumb-hover: var(--primary-blue-dark);

    /* ---------------------------------------------------------------
       GLOBAL BREAKPOINTS — container / gutter / gap / type tokens step
       down here, so every layout using .container or these tokens
       follows automatically. Nested inside :root so all values for a
       given token name live in one place.
       --------------------------------------------------------------- */
    @media (max-width: 1599.98px) {
        --container: 1380px;
    }
    @media (max-width: 1439.98px) {
        --container: 1325px;
    }
    @media (max-width: 1365.98px) {
        --container: 1210px;
    }
    @media (max-width: 1199.98px) {
        --container: 1095px;
        --sectionGap: 70px;
        --sectiongapHalf: 35px;
        --g30: 25px;
        --f20: 18px;
        --f35: 30px;
        --f40: 35px;
        --f50: 2.5rem;
        --f60: 3.125rem;
        --f70: 3.4375rem;
        --f80: 60px;
        --f100: 75px;
        --f130: 100px;
        --f200: 150px;
        --sp25: 20px;
        --sp30: 25px;
        --sp35: 30px;
        --sp40: 30px;
        --sp50: 40px;
        --sp60: 50px;
        --sp70: 55px;
        --sp80: 65px;
        --sp100: 80px;
    }
    @media (max-width: 991.98px) {
        --container: 960px;
        --g30: 18px;
        --f20: 17px;
        --f25: 20px;
        --f30: 25px;
        --f80: 50px;
        --f100: 60px;
        --f130: 80px;
        --f200: 125px;
        --sp25: 15px;
        --sp30: 20px;
        --sp35: 25px;
        --sp40: 25px;
        --sp50: 35px;
        --sp60: 40px;
        --sp70: 45px;
        --sp80: 50px;
        --sp100: 65px;
    }
    @media (max-width: 767.98px) {
        --container: 100%;
        --gutter: 12px;
        --sectionGap: 60px;
        --sectiongapHalf: 30px;
        --g30: 15px;
        --f20: 16px;
        --f40: 30px;
        --f50: 40px;
        --f60: 45px;
        --f70: 55px;
        --f80: 35px;
        --f100: 45px;
        --f130: 60px;
        --f200: 90px;
        --sp30: 15px;
        --sp35: 20px;
        --sp40: 20px;
        --sp50: 25px;
        --sp60: 30px;
        --sp70: 35px;
        --sp80: 40px;
        --sp100: 50px;
    }
    @media (max-width: 575.98px) {
        --gutter: 11px;
        --g30: 12px;
        --f50: 30px;
        --f60: 35px;
        --f70: 40px;
        --f80: 30px;
        --f100: 35px;
        --f130: 45px;
        --f200: 70px;
    }
}

/* ===================================================================
   RESET / BASE
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

html {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;

    /* Native smooth scrolling only when Lenis is not running. Lenis already
       smooths every frame; stacking CSS smoothing on top makes the page trail
       the wheel and every scroll reveal arrive late. */
    &:not(.lenis) { scroll-behavior: smooth; }
}

/* NOT nested under html — WebKit only honours these at the top level. */
::-webkit-scrollbar { width: var(--scrollbar-width); }
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--r-full);
    &:hover { background: var(--scrollbar-thumb-hover); }
}

body {
    font-family: var(--font-google);
    font-size: var(--f16);
    line-height: var(--bodyLh);
    color: var(--body-text);
    background: var(--surface-light);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button {
    border: 0; background: none; color: inherit;
    font-family: inherit; cursor: pointer;
    transition: var(--transition);
}

/* The one global vertical rhythm rule. Section padding stacks on top of this,
   so the real gap between two sections is padding + sectionGap + padding. */
main section { margin-bottom: var(--sectionGap); overflow-x: clip; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

::selection { background: var(--ink); color: var(--white); }

/* ===================================================================
   TYPOGRAPHY
   =================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-mona);
    font-weight: 500;
    line-height: var(--lhTight);
    color: var(--ink);
    text-wrap: balance;
}
h1 { font-size: var(--f80); font-weight: 600; letter-spacing: var(--lsTight); }
h2 { font-size: var(--f60); letter-spacing: var(--lsTight); }
h3 { font-size: var(--f35); letter-spacing: var(--lsSnug); }
h4 { font-size: var(--f30); letter-spacing: var(--lsSnug); }
h5 { font-size: var(--f25); }
h6 { font-size: var(--f20); }

p {
    font-family: var(--font-google);
    font-size: var(--f16);
    line-height: var(--bodyLh);
}
p + p { margin-top: var(--sp20); }

/* ===================================================================
   LAYOUT UTILITIES
   =================================================================== */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); border: 0;
}

.skip-link {
    position: fixed; inset-block-start: 0; inset-inline-start: 0;
    z-index: var(--z-modal);
    width: 0; height: 0; overflow: hidden;
    background: var(--white); color: var(--primary);
}
.skip-content:focus, .skip-footer:focus {
    width: auto; height: auto;
    padding: var(--sp15) var(--sp25);
    font-weight: 600; clip: auto;
}

/* ===================================================================
   BUTTONS
   =================================================================== */
/* Text on the left, a square arrow box on the right. The box is ::before,
   the arrow is a masked ::after in --btn-arrow, so no button ever carries
   icon markup. Variants only swap the four custom properties. */
.btn {
    --btn-bg: var(--white);
    --btn-color: var(--ink);
    --btn-box: var(--ink);
    --btn-arrow: var(--white);

    position: relative;
    display: inline-flex; align-items: center;
    width: max-content; max-width: 100%;
    min-height: 53px;
    padding: var(--sp4) 61px var(--sp4) var(--sp20);
    background: var(--btn-bg);
    border-radius: var(--r-btn);
    font-family: var(--font-mona);
    font-size: var(--f16);
    font-weight: 500;
    line-height: 1.2;
    color: var(--btn-color);
    white-space: nowrap;
    transition: var(--transition);

    &::before {
        position: absolute; inset-block: var(--sp4); right: var(--sp4);
        width: 45px;
        background: var(--btn-box);
        border-radius: var(--r-sm);
        content: '';
        transition: var(--transition);
    }

    &::after {
        position: absolute; top: 50%; right: var(--sp4);
        width: 45px; height: 12px;
        background-color: var(--btn-arrow);
        content: '';
        transform: translateY(-50%);
        transition: var(--transition);
        -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 10" fill="none"><path d="M17 9L21 5L17 1M21 5H1" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / 16px 10px;
                mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 10" fill="none"><path d="M17 9L21 5L17 1M21 5H1" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / 16px 10px;
    }

    &:hover::after { transform: translate(4px, -50%); }

    &.btn-primary {
        --btn-bg: var(--primary);
        --btn-color: var(--white);
        --btn-box: var(--white);
        --btn-arrow: var(--ink);
        &:hover { --btn-bg: var(--primary-blue-dark); }
    }

    &.btn-white:hover { --btn-box: var(--primary); }

    &.btn-dark {
        --btn-bg: var(--ink);
        --btn-color: var(--white);
        --btn-box: var(--primary);
        --btn-arrow: var(--white);
        &:hover { --btn-box: var(--white); --btn-arrow: var(--ink); }
    }

    @media (max-width: 575.98px) {
        justify-content: center;
        width: 100%;
        padding-left: var(--sp15);
    }
}

/* Plain text button with no arrow box — used for form submits. */
.btn-solid {
    display: inline-flex; align-items: center; justify-content: center;
    width: max-content; max-width: 100%;
    padding: var(--sp15) var(--sp25);
    background: var(--primary);
    border-radius: var(--r-btn);
    font-family: var(--font-mona);
    font-size: var(--f16);
    font-weight: 500;
    line-height: 1.2;
    color: var(--white);
    transition: var(--transition);

    &:hover { background: var(--primary-blue-dark); }
}

/* Round icon-only button (slider arrows, share). Needs aria-label. */
.btn-icon {
    display: flex; align-items: center; justify-content: center;
    gap: var(--sp8);
    width: 45px; height: 45px;
    background: var(--white);
    border-radius: var(--r-full);
    box-shadow: var(--shadow-md);
    color: var(--ink);

    &:hover { background: var(--primary); color: var(--white); }
}

/* The arrow link. The arrow is a masked SVG on ::after whose background-color is
   currentColor, so it always matches the link's own colour and no section ever
   writes arrow markup or arrow CSS. */
.btn-link {
    position: relative;
    display: flex; align-items: center;
    width: max-content; max-width: 100%;
    font-family: var(--font-mona);
    font-size: var(--f16);
    font-weight: 500;

    &::after {
        flex: 0 0 auto;
        width: 22px; height: 10px;
        margin-left: var(--sp10);
        background-color: currentColor;
        content: '';
        transition: var(--transition);
        -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 10" fill="none"><path d="M17 9L21 5L17 1M21 5H1" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center;
                mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 10" fill="none"><path d="M17 9L21 5L17 1M21 5H1" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center;
        -webkit-mask-size: contain;
                mask-size: contain;
    }
    &:hover::after { margin-left: var(--sp20); }

    &.btn-black { color: var(--black); }
    &.btn-blue  { color: var(--primary); }
}

/* ===================================================================
   SECTION TITLES
   =================================================================== */
/* One block for every section heading on the site. Sections never style
   their own title — that is the whole point of this component. */
.section-title-wrap {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: var(--sp15);
    margin-bottom: var(--sp50);
    text-align: center;

    &:last-child { margin-bottom: 0; }

    & .title-eyebrow {
        display: inline-flex; align-items: center;
        gap: var(--sp8);
        padding: var(--sp4) var(--sp12);
        background: var(--white);
        border-radius: var(--r-full);
        box-shadow: var(--shadow-sm);
        font-size: var(--f14);
        font-weight: 500;
        line-height: 1.5;
        color: var(--ink);

        &::before {
            width: 6px; height: 6px;
            background: var(--primary);
            border-radius: var(--r-full);
            content: '';
        }
    }

    & h2 { max-width: 760px; }

    & .section-title-desc {
        max-width: 640px;
        & p { font-size: var(--f18); }
    }

    &.section-title-left { align-items: flex-start; text-align: left; }

    &.section-title-light {
        & h2 { color: var(--white); }
        & .section-title-desc p { color: var(--white-muted); }
    }
}

/* centred heading with a rule on each side */
.section-title {
    display: flex; align-items: center; justify-content: center;
    gap: var(--sp30);
    width: 100%;
    text-align: center;

    &::before, &::after {
        flex: 1;
        height: 1px;
        max-width: min(50vw, 820px);
        background: var(--black);
        content: "";
    }
}

/* Accent words inside a heading: italic serif in the brand colour.
   Applied automatically inside .section-title-wrap; use .heading-accent elsewhere. */
.heading-accent span,
.section-title-wrap h2 span {
    font-family: var(--font-playfair);
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--primary);
}

/* ===================================================================
   HELPERS
   =================================================================== */
.txt-primary { color: var(--primary); }

/* Small uppercase label pill (card categories, roles). */
.tag-pill {
    display: inline-block;
    padding: var(--sp4) var(--sp10);
    background: var(--surface-light);
    border-radius: var(--r-full);
    font-size: var(--f12);
    font-weight: 500;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink);
}