/* ==========================================================================
   Prograte Capital Ventures — design system
   Palette per the supplied brand document: orange primary (#fe5c00) on a
   neutral grey ramp. No blue in the system.
   ========================================================================== */

:root {
    /* Brand */
    --brand: #fe5c00;
    --brand-hover: #e65300;
    --brand-light: #ff7d33;
    --brand-tint: #ffe5d6;
    --brand-tint-soft: #fff8f5;

    /* Neutrals */
    --ink: #14151a;        /* headings */
    --ink-body: #5e6673;   /* body copy */
    --ink-muted: #76808f;  /* labels, captions */
    --line: #e6e8ea;
    --line-strong: #caced3;
    --surface: #ffffff;
    --surface-alt: #fafafa;
    --surface-sunken: #f5f5f5;

    /* Dark bands */
    --dark: #0b0e11;
    --dark-2: #1e2026;
    --dark-3: #2b2f36;
    --on-dark: #aeb4bc;
    --on-dark-dim: #76808f;

    /* Cards are deliberately squared off — 4px, not pill-shaped. */
    --radius: 4px;
    --radius-sm: 3px;

    /* One shared gutter so every section lines up with the header logo
       on the left and the "Apply Now" button on the right. */
    --shell-max: 1280px;
    --shell-pad: clamp(1.25rem, 4vw, 2.5rem);

    --section-y: clamp(3.5rem, 8vw, 7rem);

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Typography ---------------------------------------------------- */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
    /* Nothing should ever scroll the page sideways. */
    overflow-x: hidden;
}

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--ink-body);
    background: var(--surface);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .font-display {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    letter-spacing: -0.022em;
    color: var(--ink);
}

h1 {
    letter-spacing: -0.032em;
}

p {
    color: var(--ink-body);
}

/* Small uppercase label that sits above section headings. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand);
}

.eyebrow::before {
    content: '';
    width: 1.75rem;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
    flex-shrink: 0;
}

/* ---------- Layout -------------------------------------------------------- */

/* Every full-width band uses .section, every content block uses .shell.
   That pairing is what keeps left/right edges aligned across all pages. */
.shell {
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-inline: var(--shell-pad);
}

.section {
    padding-block: var(--section-y);
}

.section--tight {
    padding-block: clamp(2.25rem, 5vw, 4rem);
}

.section--muted {
    background: var(--surface-alt);
}

.section--ink {
    background: var(--dark);
}

.section--ink h2,
.section--ink h3 {
    color: #fff;
}

.section--ink p {
    color: var(--on-dark);
}

/* Section headers are left-aligned by default — centred text reads as a
   template; left-aligned reads as a company. */
.section-head {
    max-width: 46rem;
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.section-head h2 {
    font-size: clamp(1.625rem, 3.4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    margin-block: 1rem 0.875rem;
}

.section-head p {
    font-size: 1.0625rem;
    line-height: 1.7;
}

/* Heading + supporting copy side by side, both flush to the shell edges. */
.section-head--split {
    max-width: none;
    display: grid;
    gap: 1.25rem clamp(2rem, 6vw, 5rem);
    align-items: end;
}

@media (min-width: 900px) {
    .section-head--split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    }

    .section-head--split p {
        padding-bottom: 0.35rem;
    }
}

@media (max-width: 640px) {
    .section-head p {
        font-size: 1rem;
    }
}

/* ---------- Header -------------------------------------------------------- */

.header-container {
    position: fixed;
    inset: 0 0 auto 0;
    height: 80px;
    z-index: 50;
    background: var(--brand);
    transition: box-shadow 0.3s var(--ease), background-color 0.3s var(--ease), height 0.3s var(--ease);
}

.header-container.scrolled {
    height: 68px;
    background: var(--brand-hover);
    box-shadow: 0 8px 28px -18px rgba(11, 14, 17, 0.55);
}

.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    min-width: 0;
}

/* The mark is a white monogram, so on light backgrounds it sits in a brand
   tile; on the dark footer it can sit directly on the background. */
/* The mark is white, so on the orange bar it needs no tile behind it. */
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    transition: transform 0.4s var(--ease);
}

.brand-mark img {
    width: 100%;
    height: 100%;
}

.brand:hover .brand-mark {
    transform: scale(1.06);
}

.brand-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #fff;
}

.brand-name span {
    display: block;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    margin-top: 0.15rem;
}

.nav-link {
    position: relative;
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    padding-block: 0.5rem;
    transition: color 0.25s var(--ease);
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: #fff;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.35s var(--ease);
}

.nav-link:hover,
.nav-link.active {
    color: #fff;
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Header sits on brand orange, so its controls invert. */
.header-container .link-arrow {
    color: rgba(255, 255, 255, 0.9);
}

.header-container .link-arrow:hover {
    color: #fff;
}

.header-container .btn--primary {
    background: #fff;
    color: var(--brand);
}

.header-container .btn--primary:hover {
    background: var(--ink);
    color: #fff;
    box-shadow: 0 12px 24px -12px rgba(11, 14, 17, 0.6);
}

/* ---------- Buttons ------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8125rem 1.5rem;
    border-radius: var(--radius);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
                border-color 0.25s var(--ease), transform 0.25s var(--ease),
                box-shadow 0.25s var(--ease);
}

.btn svg {
    width: 1.05em;
    height: 1.05em;
    flex-shrink: 0;
    transition: transform 0.3s var(--ease);
}

.btn:hover svg {
    transform: translateX(3px);
}

.btn--primary {
    background: var(--brand);
    color: #fff;
}

.btn--primary:hover {
    background: var(--brand-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -12px rgba(254, 92, 0, 0.65);
}

.btn--dark {
    background: var(--dark-2);
    color: #fff;
}

.btn--dark:hover {
    background: var(--dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -12px rgba(11, 14, 17, 0.55);
}

.btn--outline {
    border-color: var(--line-strong);
    background: var(--surface);
    color: var(--ink);
}

.btn--outline:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-tint-soft);
    transform: translateY(-2px);
}

/* On dark/photo backgrounds. */
.btn--ghost {
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(6px);
}

.btn--ghost:hover {
    background: #fff;
    color: var(--ink);
    border-color: #fff;
    transform: translateY(-2px);
}

.btn--sm {
    padding: 0.625rem 1.125rem;
    font-size: 0.875rem;
}

/* Keep hero buttons compact on phones — sized to their label, sitting side by
   side, rather than stretching the full width of the screen. */
@media (max-width: 520px) {
    .hero .btn {
        width: auto;
        padding: 0.6875rem 1rem;
        font-size: 0.8125rem;
        gap: 0.375rem;
    }

    .hero .btn svg {
        width: 0.9375em;
        height: 0.9375em;
    }
}

/* Text link with a sliding arrow. */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--brand);
    transition: color 0.25s var(--ease), gap 0.25s var(--ease);
}

.link-arrow svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    transition: transform 0.3s var(--ease);
}

.link-arrow:hover {
    color: var(--brand-hover);
    gap: 0.75rem;
}

/* ---------- Cards & content blocks ---------------------------------------- */

/* Used sparingly — most content sits on plain background with rules. */
.card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color 0.3s var(--ease), box-shadow 0.35s var(--ease),
                transform 0.35s var(--ease);
}

.card:hover {
    border-color: var(--line-strong);
    box-shadow: 0 22px 45px -30px rgba(11, 14, 17, 0.45);
    transform: translateY(-4px);
}

/* Brand rule that wipes in along the top edge on hover. */
.card--wipe::after {
    content: '';
    position: absolute;
    inset: -1px -1px auto -1px;
    height: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--ease);
}

.card--wipe:hover::after {
    transform: scaleX(1);
}

.card__body {
    padding: clamp(1.25rem, 2.5vw, 2rem);
}

/* Icon tile — squared to match the card language. */
.icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-sm);
    /* White + hairline rather than a grey fill: a grey tile disappears against
       the #fafafa muted sections. */
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    flex-shrink: 0;
    transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
                color 0.3s var(--ease), transform 0.3s var(--ease);
}

.icon-tile svg {
    width: 1.25rem;
    height: 1.25rem;
}

.icon-tile--accent {
    background: var(--brand-tint);
    border-color: var(--brand-tint);
    color: var(--brand);
}

.card:hover .icon-tile,
.feature:hover .icon-tile,
.step:hover .icon-tile {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    transform: translateY(-2px);
}

/* Boxless alternative to a card: icon + copy, separated by rules only. */
.feature {
    display: flex;
    gap: 1.125rem;
    padding-block: 1.75rem;
    border-top: 1px solid var(--line);
    transition: border-color 0.3s var(--ease);
}

.feature:hover {
    border-color: var(--brand);
}

.feature h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.feature p {
    font-size: 0.9375rem;
    line-height: 1.65;
}

/* Narrow screens: stack the icon above the copy so the text gets the full
   column width instead of being indented into a ~200px gutter. */
@media (max-width: 640px) {
    .feature {
        flex-direction: column;
        gap: 0.875rem;
        padding-block: 1.5rem;
    }
}

/* ---------- Stat strip ---------------------------------------------------- */

/* Replaces stacked stat cards: one bordered band, hairline dividers. */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

@media (min-width: 768px) {
    .stat-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1080px) {
    .stat-strip--5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .stat-strip--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.stat {
    position: relative;
    padding: clamp(1.125rem, 2.4vw, 1.875rem);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    margin: -1px 0 0 -1px;
    transition: background-color 0.3s var(--ease);
}

.stat:hover {
    background: var(--surface-alt);
}

.stat__value {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.375rem, 2.6vw, 2rem);
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.03em;
    margin-bottom: 0.45rem;
}

.stat__label {
    font-size: 0.8125rem;
    color: var(--ink-muted);
    line-height: 1.45;
}

.stat__icon {
    color: var(--line-strong);
    margin-bottom: 0.875rem;
    transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}

.stat__icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.stat:hover .stat__icon {
    color: var(--brand);
    transform: translateY(-2px);
}

/* Stat strip sitting on a dark hero. */
.stat-strip--onDark {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
}

.stat-strip--onDark .stat {
    border-color: rgba(255, 255, 255, 0.16);
}

.stat-strip--onDark .stat:hover {
    background: rgba(255, 255, 255, 0.08);
}

.stat-strip--onDark .stat__value {
    color: #fff;
}

.stat-strip--onDark .stat__label {
    color: var(--on-dark);
}

/* ---------- Numbered process list ----------------------------------------- */

.steps {
    display: grid;
    gap: 0;
}

@media (min-width: 768px) {
    .steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1080px) {
    .steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.step {
    padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 2.5vw, 2rem);
    border-top: 2px solid var(--line);
    transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease);
}

.step:hover {
    border-top-color: var(--brand);
    background: var(--brand-tint-soft);
}

/* On phones the inner padding pushed step copy out of alignment with every
   other section — drop the side padding so it sits on the shell gutter. */
@media (max-width: 767px) {
    .step {
        padding-inline: 0;
    }
}

.step__num {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--brand);
    margin-bottom: 1.25rem;
}

.step h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-block: 1rem 0.6rem;
}

.step p {
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* ---------- Media -------------------------------------------------------- */

.media {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--surface-sunken);
}

.media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s var(--ease);
}

.media:hover img {
    transform: scale(1.045);
}

/* Caption that lifts into view over an image. */
.media__caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.25rem;
    background: linear-gradient(to top, rgba(11, 14, 17, 0.92), transparent);
    color: #fff;
    transform: translateY(12px);
    opacity: 0;
    transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
}

.media:hover .media__caption {
    transform: translateY(0);
    opacity: 1;
}

.media__caption h3 {
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.media__caption p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.875rem;
}

/* Touch devices have no hover — show captions unconditionally. */
@media (hover: none) {
    .media__caption {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Team --------------------------------------------------------- */

/* A bordered card rather than a bare photo: the portraits vary in crop and
   lighting, and a shared frame is what makes five of them read as one row. */
.person {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.3s var(--ease), box-shadow 0.35s var(--ease),
                transform 0.35s var(--ease);
}

.person:hover {
    border-color: var(--line-strong);
    box-shadow: 0 22px 45px -30px rgba(11, 14, 17, 0.45);
    transform: translateY(-4px);
}

/* Brand rule that wipes across the top edge, matching .card--wipe. */
.person figure {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--surface-sunken);
}

.person figure::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--ease);
    z-index: 1;
}

.person:hover figure::after {
    transform: scaleX(1);
}

.person img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease), filter 0.5s var(--ease);
    filter: grayscale(1) contrast(1.02);
}

.person:hover img {
    transform: scale(1.04);
    filter: grayscale(0);
}

.person__body {
    padding: 1.125rem 1.125rem 1.25rem;
    border-top: 1px solid var(--line);
    transition: border-color 0.3s var(--ease);
}

.person:hover .person__body {
    border-color: var(--brand-tint);
}

.person__name {
    font-size: 1rem;
    font-weight: 700;
}

.person__role {
    font-size: 0.8125rem;
    color: var(--brand);
    font-weight: 500;
    margin-top: 0.2rem;
}

/* Social links sit on the photo and lift in on hover. */
.person__social {
    position: absolute;
    inset: auto 0 0.75rem 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.person:hover .person__social {
    opacity: 1;
    transform: translateY(0);
}

/* Feather is a stroke-only set — there is no filled variant of these glyphs.
   The "solid" weight comes from the chip: a filled tile with the icon knocked
   out of it. Each chip carries its own hover on top of the group reveal. */
.person__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    background: var(--brand);
    color: #fff;
    box-shadow: 0 6px 16px -8px rgba(11, 14, 17, 0.7);
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
                transform 0.25s var(--ease);
}

.person__social a:hover {
    background: #fff;
    color: var(--brand);
    transform: translateY(-3px);
}

.person__social svg {
    width: 0.9375rem;
    height: 0.9375rem;
}

/* Touch devices have no hover, so the reveal would never fire and the
   grayscale would be permanent — show both resting states outright. */
@media (hover: none) {
    .person img {
        filter: none;
    }

    .person__social {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Lists -------------------------------------------------------- */

.list-check {
    display: grid;
    gap: 0.875rem;
}

.list-check li {
    display: flex;
    gap: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--ink-body);
}

.list-check svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
    color: var(--brand);
}

.list-check--muted svg {
    color: var(--line-strong);
}

/* ---------- Forms -------------------------------------------------------- */

.field label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ink);
    margin-bottom: 0.5rem;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 0.8125rem 0.9375rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    /* 16px minimum stops iOS Safari zooming the page on focus. */
    font-size: 1rem;
    font-family: inherit;
    color: var(--ink);
    background: var(--surface);
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(254, 92, 0, 0.15);
}

.field textarea {
    resize: vertical;
}

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

.hero {
    position: relative;
    overflow: hidden;
    background: var(--dark);
}

/* Swiper sets z-index:1 on its own container, which would paint the slider
   above the scrim and wreck hero text contrast — pin the layers explicitly. */
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Directional scrim: heavy on the left where the copy sits, lighter over the
   right of the photo. Horizontal stops keep contrast reliable at any hero
   height — a diagonal gradient washes out on tall heroes. */
.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to right,
            rgba(11, 14, 17, 0.8) 0%,
            rgba(11, 14, 17, 0.68) 38%,
            rgba(11, 14, 17, 0.34) 68%,
            rgba(11, 14, 17, 0.18) 100%),
        linear-gradient(to bottom,
            rgba(11, 14, 17, 0.4) 0%,
            rgba(11, 14, 17, 0.12) 40%,
            rgba(11, 14, 17, 0.5) 100%);
}

/* Phones have no room for a "light side" — darken the whole frame evenly,
   but only as much as the text needs. */
@media (max-width: 767px) {
    .hero__scrim {
        background:
            linear-gradient(to bottom,
                rgba(11, 14, 17, 0.7) 0%,
                rgba(11, 14, 17, 0.6) 45%,
                rgba(11, 14, 17, 0.75) 100%);
    }
}

/* Photos read better behind text with a touch more contrast in them. */
.hero__bg img {
    filter: saturate(1.05) contrast(1.04);
}

.hero__content {
    position: relative;
    z-index: 2;
}

.hero h1 {
    color: #fff;
    font-size: clamp(1.875rem, 5.2vw, 3.75rem);
    font-weight: 700;
    line-height: 1.1;
}

/* Lighter than the standard on-dark grey: the scrims are deliberately thin so
   the photography reads, so the copy carries the contrast instead. */
.hero p {
    color: var(--line-strong);
    font-size: clamp(0.9375rem, 1.6vw, 1.1875rem);
    line-height: 1.7;
    text-shadow: 0 1px 12px rgba(11, 14, 17, 0.5);
}

.hero h1 {
    text-shadow: 0 2px 18px rgba(11, 14, 17, 0.45);
}

.hero .eyebrow {
    color: var(--brand-light);
}

/* Inner-page heroes: shorter band and a smaller type ramp than the homepage,
   which keeps its full-height statement hero. */
.hero--compact .hero__content {
    padding-block: clamp(2.75rem, 6vw, 4.25rem);
}

.hero--compact h1 {
    font-size: clamp(1.5rem, 3.4vw, 2.375rem);
    line-height: 1.15;
}

.hero--compact p {
    font-size: clamp(0.875rem, 1.1vw, 1rem);
    line-height: 1.65;
}

.hero--compact .eyebrow {
    font-size: 0.6875rem;
}

/* Heroes whose following section overlaps upward need clearance at the bottom
   so the card never crowds the hero copy. */
.hero--overlap .hero__content {
    padding-bottom: clamp(4.5rem, 8vw, 6rem);
}

.hero--compact .stat__value {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
}

.hero--compact .stat__label {
    font-size: 0.75rem;
}

/* ---------- Swiper overrides --------------------------------------------- */

.swiper-pagination-bullet {
    width: 22px;
    height: 3px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.4);
    opacity: 1;
    transition: background-color 0.3s var(--ease), width 0.3s var(--ease);
}

.swiper-pagination-bullet-active {
    background: var(--brand);
    width: 40px;
}

.hero .swiper-button-next,
.hero .swiper-button-prev {
    display: none;
}

/* ---------- Motion ------------------------------------------------------- */

/* Elements marked data-reveal fade + rise once when scrolled into view.
   --d supplies a per-item stagger. */
[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    transition-delay: var(--d, 0ms);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

[data-reveal='left'] {
    transform: translateX(-24px);
}

[data-reveal='scale'] {
    transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Hamburger / mobile nav --------------------------------------- */

.hamburger {
    width: 26px;
    height: 18px;
    position: relative;
    cursor: pointer;
    display: none;
    flex-shrink: 0;
}

.hamburger span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    left: 0;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.3s var(--ease), opacity 0.2s var(--ease), top 0.3s var(--ease);
}

.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 8px; }
.hamburger span:nth-child(3) { top: 16px; }

.hamburger.open span:nth-child(1) {
    top: 8px;
    transform: rotate(135deg);
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
    transform: translateX(-16px);
}

.hamburger.open span:nth-child(3) {
    top: 8px;
    transform: rotate(-135deg);
}

.mobile-menu {
    display: none;
}

@media (max-width: 1023px) {
    .hamburger {
        display: block;
        z-index: 100;
    }

    .header-container,
    .header-container.scrolled {
        height: 64px;
    }

    .mobile-menu {
        position: fixed;
        inset: 64px 0 0 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        display: flex;
        flex-direction: column;
        padding: 1.25rem var(--shell-pad) 2rem;
        z-index: 90;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .mobile-menu.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Links are centred, so the old hover shift (padding-left) can't come back
       as-is — it slid them off-axis. The motion is now a lift plus an underline
       that grows from the centre, which reads the same but stays symmetrical. */
    .mobile-menu a:not(.btn) {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 1rem 0;
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 1.0625rem;
        font-weight: 600;
        color: var(--ink);
        border-bottom: 1px solid var(--line);
        transition: color 0.25s var(--ease), transform 0.25s var(--ease);
    }

    .mobile-menu a:not(.btn):hover,
    .mobile-menu a:not(.btn).active {
        color: var(--brand);
        transform: translateY(-2px);
    }

    /* The header's underline is white and anchored left — in the white panel it
       needs to be brand-coloured and grow from the middle. */
    .mobile-menu .nav-link::after {
        display: block;
        left: 50%;
        width: 2.5rem;
        margin-left: -1.25rem;
        background: var(--brand);
        transform: scaleX(0);
        transform-origin: center;
    }

    .mobile-menu .nav-link:hover::after,
    .mobile-menu .nav-link.active::after {
        transform: scaleX(1);
        transform-origin: center;
    }

    /* Excluded from the rule above so it keeps .btn's own display, padding and
       brand fill — otherwise it flattens into a left-aligned orange bar. */
    .mobile-menu .btn {
        display: flex;
        margin-top: 1.5rem;
        border-bottom: none;
        background: var(--brand);
        color: #fff;
    }

    .mobile-menu .btn:hover {
        background: var(--brand-hover);
        color: #fff;
    }

    /* Tap targets in the menu should clear the 44px accessibility minimum. */
    .mobile-menu a {
        min-height: 44px;
    }
}

/* ---------- Footer ------------------------------------------------------- */

.footer {
    background: var(--dark);
    color: var(--on-dark);
}

.footer h3 {
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.footer a {
    color: var(--on-dark);
    transition: color 0.25s var(--ease), padding-left 0.25s var(--ease);
}

.footer a:hover {
    color: #fff;
}

.footer-nav a:hover {
    padding-left: 0.3rem;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-sm);
    transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
                color 0.25s var(--ease), transform 0.25s var(--ease);
}

.footer-social a:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    transform: translateY(-2px);
}

/* ---------- Phones: centred content --------------------------------------
   Every band collapses to a single column on a phone, where the left-aligned
   desktop rhythm reads as content stuck to one edge. Centring the copy makes
   the narrow layout look deliberate. Desktop is untouched. */

@media (max-width: 767px) {
    main,
    .footer {
        text-align: center;
    }

    /* Text-align alone leaves width-capped blocks hugging the left gutter —
       they need auto margins to actually sit in the middle. */
    main [class*='max-w-'],
    .footer [class*='max-w-'],
    .section-head,
    .section-head--split > * {
        margin-inline: auto;
    }

    /* Inline-flex bits (.eyebrow, .btn, .icon-tile) follow text-align, but real
       flex rows — button groups, icon+copy lists, social links — need their
       main axis re-centred. Columns are already centred by align-items below. */
    main .flex:not(.flex-col),
    .footer .flex:not(.flex-col) {
        justify-content: center;
    }

    /* These set display:flex in CSS rather than via a utility class, so the
       rule above misses them. */
    .feature {
        align-items: center;
    }

    .list-check li {
        justify-content: center;
    }

    /* Form controls stay left-aligned — centred input text is hard to scan and
       fights the placeholder. Labels follow the rest of the page. */
    .field input,
    .field select,
    .field textarea {
        text-align: left;
    }
}