/* =============================================================================
   GAVGO — global stylesheet (new build)
   Single source of truth for the site's CSS. Layered order is the "set way":
   tokens -> reset -> base -> helpers/utilities -> components -> page sections.
   Keep values in tokens; reference var(--token) everywhere else.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Surfaces */
    --bg-page: #2E2E2E;
    --surface-header: #373737;
    --surface-raised: #4C4C4C;
    --surface-sunken: #2E2E2E;

    /* Brand */
    --brand: #88D600;

    /* Text */
    --text-strong: #FFFFFF;
    --text-muted: #ABABAB;
    --ink: #1A1A1A;
    --heading-base: #ABABAB;  /* H1 + H2 default colour (grey) */
    --hl: #FFFFFF;            /* .hl highlight span colour */

    /* Borders */
    --border: #4C4C4C;

    /* Typography */
    --font-sans: "proxima-nova", "Helvetica", "Arial", sans-serif;
    --fw-reg: 400;
    --fw-bold: 700;
    --text-h1: 48px;
    --text-h2: 36px;
    --text-h3: 20px;
    --text-lead: 20px;
    --text-body: 16px;
    --text-btn: 14px;
    --lh-heading: 1.15;
    --lh-body: 1.6;

    /* Spacing (4px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 80px;
    --space-10: 96px;
    --space-12: 128px;

    /* Layout */
    --gutter: 80px;          /* desktop edge padding (flips to 15px on mobile) */
    --container-max: 1280px;
    --section-py: 64px;      /* vertical padding per section (→ 128px between sections); lighter on mobile */
    --header-h: 64px;

    /* Radius */
    --radius-pill: 50px;
    --radius-nav: 60px;
    --radius-card: 10px;   /* consistent card/table/container radius site-wide */
    --radius-sm: 8px;

    /* Elevation */
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.25);

    /* Motion */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --dur-fast: 150ms;
    --dur: 200ms;
    --dur-slow: 300ms;

    /* Z-index scale */
    --z-sticky: 100;
    --z-dropdown: 200;
    --z-modal: 400;
    --z-toast: 600;
}

/* -----------------------------------------------------------------------------
   2. RESET / NORMALISE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--lh-body);
    color: var(--text-strong);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }

:where([id]) { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* -----------------------------------------------------------------------------
   3. BASE (element defaults)
   -------------------------------------------------------------------------- */
h1, h2, h3 {
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    letter-spacing: normal;
    text-wrap: balance;
    overflow-wrap: break-word;
}
h1 { font-size: var(--text-h1); color: var(--heading-base); }
h2 { font-size: var(--text-h2); color: var(--heading-base); }
h3 { font-size: var(--text-h3); color: var(--text-strong); }
p  { text-wrap: pretty; }

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

/* Highlighted word(s) inside a heading — site-wide, one-variable control. */
.hl { color: var(--hl); }

/* Large lead/intro text (20px, regular, muted). */
.lead {
    font-size: var(--text-lead);
    font-weight: var(--fw-reg);
    line-height: 1.5;
    color: var(--text-muted);
}

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

/* -----------------------------------------------------------------------------
   5. COMPONENTS
   -------------------------------------------------------------------------- */

/* Buttons ------------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 18px;
    font-size: var(--text-btn);
    font-weight: var(--fw-bold);
    line-height: 1;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    white-space: nowrap;
    transition: transform var(--dur-fast) var(--ease-out),
                background-color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out);
}
.btn:active { transform: scale(0.97); }

.btn__arrow {
    display: inline-block;
    transition: transform var(--dur) var(--ease-out);
}

.btn--primary { background: #fff; color: var(--ink); }
.btn--secondary { background: transparent; color: #fff; border-color: #fff; }
.btn--tertiary {
    background: none;
    border: 0;
    color: #fff;
    border-radius: 0;
    padding: 14px 4px;
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
    .btn--primary:hover { background: #ededed; }
    .btn--primary:hover .btn__arrow { transform: translateX(3px); }
    .btn--secondary:hover { background: rgba(255, 255, 255, 0.10); }
    .btn--tertiary:hover { color: var(--text-muted); }
}

/* Header ------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    min-height: var(--header-h);
    padding-block: 18px;
    padding-inline: var(--gutter);
    background: var(--surface-header);
    border-bottom: 1px solid var(--border);
}
.site-header__logo img { height: 28px; width: auto; }

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--surface-raised);
    border-radius: var(--radius-nav);
}
.site-nav__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 18px;
    font-size: 14px;
    color: #fff;
    border-radius: var(--radius-nav);
    transition: background-color var(--dur) var(--ease-out);
}
.site-nav__item svg { width: 15px; height: 15px; flex: none; }
.site-nav__item.is-active { background: var(--surface-sunken); }
@media (hover: hover) and (pointer: fine) {
    .site-nav__item:not(.is-active):hover { background: rgba(255, 255, 255, 0.07); }
}

/* Burger toggle (mobile) */
.nav-toggle { display: none; }
.nav-toggle__bars {
    position: relative;
    display: block;
    width: 24px;
    height: 16px;
}
.nav-toggle__bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform var(--dur) var(--ease-out),
                opacity var(--dur) var(--ease-out);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 7px; }
.nav-toggle__bars span:nth-child(3) { top: 14px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu panel (only rendered/used below the breakpoint) */
.mobile-menu { display: none; }

/* Footer (every page) ------------------------------------------------------ */
.site-footer {
    background: var(--surface-header);   /* #373737 */
    color: var(--text-strong);
    padding-block: var(--space-10);
}
.site-footer__cols {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    justify-content: start;
    gap: var(--space-10);
}
.footer-col__title {
    font-weight: 600;
    margin-bottom: var(--space-4);
}
.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.footer-col a { transition: opacity var(--dur) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
    .footer-col a:hover { opacity: 0.6; }
}
.site-footer__divider {
    border: 0;
    border-top: 1px solid var(--border);
    margin-block: var(--space-8);
}
.site-footer__bottom {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}
.site-footer__bottom img { height: 24px; width: auto; }
.site-footer__copy { font-size: 14px; color: var(--text-muted); }

/* -----------------------------------------------------------------------------
   6. PAGE SECTIONS — CAREERS
   -------------------------------------------------------------------------- */

/* Hero */
.hero {
    position: relative;
    width: 100%;
    min-height: 480px;
    display: flex;
    overflow: hidden;
}
.hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(115deg,
        rgba(0, 0, 0, 0.90) 0%,
        rgba(0, 0, 0, 0.58) 45%,
        rgba(0, 0, 0, 0.10) 78%);
}
.hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-block: var(--space-8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}
.hero__content {
    max-width: 540px;
    /* entrance: subtle rise/fade (base state is visible; reduced-motion = no-op) */
    animation: hero-rise 600ms var(--ease-out) both;
}
.hero__title { margin-bottom: var(--space-4); }
.hero__lead { margin-bottom: var(--space-6); color: var(--text-strong); }
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}
.hero__actions .btn { min-width: 210px; }

@keyframes hero-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* Home hero — taller main hero, looping background video, content + stat bar.
   Reuses .hero / .hero__overlay / .hero__inner; --home switches to a column so
   the content sits at the top and the stat bar pins to the foot. */
.hero--home { min-height: 88vh; }
.hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero__inner--home {
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--space-9);
    padding-block: var(--space-9);
}
.hero--home .hero__content { max-width: 480px; }
.hero--home .hero__title { font-size: 56px; }

/* Stat bar — thin divider above, stats in a row */
.hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    animation: hero-rise 600ms var(--ease-out) 150ms both;
}
.stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.stat__num {
    font-size: var(--text-h2);
    font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--text-strong);
}
.stat__plus { color: var(--brand); }
.stat__label {
    font-size: 14px;
    color: var(--text-muted);
}

/* What drives GAVGO — intro (left) + accordion (right); stacks on mobile.
   Single-open accordion (one item always open); the icon + title shift
   grey → white when active; panel height animates via grid-template-rows. */
.drives {
    background: var(--bg-page);
    padding-block: var(--section-py);
    --drive-dur: 420ms;
    --drive-ease: cubic-bezier(0.4, 0, 0.2, 1);     /* smooth, symmetric */
}
.drives__inner {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: var(--space-10);
    align-items: center;
}
.drives__intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.drives__intro .lead { max-width: 360px; }

/* Accordion: top border per item + a closing border under the last */
.drives__accordion { border-bottom: 1px solid var(--border); }
.drive { border-top: 1px solid var(--border); }
.drive__h { margin: 0; }
.drive__head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    padding-block: var(--space-5);
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: var(--text-muted);                       /* grey by default */
    transition: color var(--drive-dur) var(--drive-ease);
}
.drive.is-open .drive__head { color: var(--text-strong); }   /* white when open */
.drive__icon {
    width: 24px;
    height: 24px;
    flex: none;
}
.drive__icon svg,
.drive__chevron svg { width: 100%; height: 100%; display: block; }
.drive__title {
    font-size: var(--text-h3);
    font-weight: var(--fw-bold);
    color: inherit;                                 /* follows the head colour */
}
.drive__chevron {
    width: 20px;
    height: 20px;
    flex: none;
    margin-left: auto;
    transition: transform var(--drive-dur) var(--drive-ease);
}
.drive.is-open .drive__chevron { transform: rotate(180deg); }   /* flips up */

/* Panel — grid-rows animates height to/from auto (base is open for no-JS) */
.drive__panel { display: grid; grid-template-rows: 1fr; }
.js .drive__panel {
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--drive-dur) var(--drive-ease);
}
.js .drive.is-open .drive__panel { grid-template-rows: 1fr; }
/* Content fades with the height so it eases in rather than wiping */
.js .drive__panel-content { opacity: 0; transition: opacity var(--drive-dur) var(--drive-ease); }
.js .drive.is-open .drive__panel-content { opacity: 1; }
.drive__panel-inner {
    overflow: hidden;
    min-height: 0;        /* the collapsing wrapper carries NO padding (padding would leak past 0fr) */
}
.drive__panel-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-left: calc(24px + var(--space-4));       /* align content under the title */
    padding-bottom: var(--space-5);
}
.drive__intro {                       /* first line: larger grey, like the .lead headline on values rows */
    font-size: var(--text-lead);
    line-height: 1.5;
    color: var(--text-muted);
}
.drive__body { color: var(--text-strong); }   /* body: white, matching the values rows */

/* Our brands (home) — two image-led cards in the table-panel chrome: full-bleed
   image + overlay + white brand logo on top; name / blurb / static Trustpilot /
   Visit below. One bordered, rounded, overflow-clipped container per card. */
.brands {
    background: var(--bg-page);
    padding-block: var(--section-py);
}
.brands__head { margin-bottom: var(--space-8); }
.brands__lead { margin-top: var(--space-3); }
.brands__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}

.brand-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-header);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;                   /* image bleeds to the rounded top edge */
}
.brand-card__media {
    position: relative;
    flex: none;                         /* aspect-ratio drives height; flex never stretches it */
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.brand-card__img {
    position: absolute;                 /* out of flow → media height comes only from aspect-ratio */
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.brand-card__overlay {                  /* scrim so the white logo reads on any photo */
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.30) 0%,
        rgba(0, 0, 0, 0.42) 55%,
        rgba(0, 0, 0, 0.55) 100%);
}
.brand-card__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    max-width: 60%;
    max-height: 32px;
}
.brand-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-7);
}
.brand-card__desc { color: var(--text-muted); }
.brand-card__foot {
    margin-top: auto;                   /* pin Trustpilot + Visit to the card foot */
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding-top: var(--space-2);
}
.brand-card__cta { align-self: flex-start; }

/* Static Trustpilot badge: Excellent · green stars · Trustpilot wordmark (white). */
.trustpilot {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.trustpilot__label {
    font-size: 14px;
    font-weight: var(--fw-bold);
    color: var(--text-strong);
}
.trustpilot__stars { height: 18px; width: auto; }
.trustpilot__logo  { height: 16px; width: auto; }

/* Visit CTA: horizontal arrow nudges right on hover — consistent with the site's arrowed buttons. */
@media (hover: hover) and (pointer: fine) {
    .brand-card__cta:hover .btn__arrow { transform: translateX(3px); }
}

/* Our journey (home) — vertical timeline: a central green line, node dots, year
   pills, entries alternating left/right (desktop) → a single left column (mobile).
   The final entry ('Today') is evergreen so the timeline never dates. */
.journey {
    background: var(--bg-page);
    padding-block: var(--section-py);
}
.journey__head {
    max-width: 600px;
    margin: 0 auto var(--space-10);
    text-align: center;
}
.journey__lead { margin-top: var(--space-3); }

.journey__track {
    position: relative;
    max-width: 880px;
    margin-inline: auto;
}

.tl-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-9);
    padding-block: var(--space-5);
}
/* The line is drawn per item (full height, centred) so it always connects
   dot-to-dot whatever the copy length; capped at the first/last dots (50%). */
.tl-item::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--brand);
    transform: translateX(-50%);
}
.tl-item:first-child::before { top: 50%; }
.tl-item:last-child::before  { bottom: 50%; }
.tl-item__body { display: flex; flex-direction: column; gap: var(--space-2); }
.tl-item:nth-child(odd)  .tl-item__body { grid-column: 1; text-align: right; align-items: flex-end; }
.tl-item:nth-child(even) .tl-item__body { grid-column: 2; text-align: left;  align-items: flex-start; }

.tl-item__dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--brand);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 4px var(--bg-page);   /* ring masks the line behind the dot */
}
.tl-item__year {
    display: inline-block;
    font-size: 14px;
    font-weight: var(--fw-bold);
    color: var(--brand);
    padding: 2px 12px;
    border: 1px solid rgba(136, 214, 0, 0.45);
    border-radius: var(--radius-pill);
}
.tl-item__title { color: var(--text-strong); }
.tl-item__desc { color: var(--text-muted); max-width: 38ch; }

/* 'Today' — filled green pill + larger dot to mark the present */
.tl-item--now .tl-item__year {
    background: var(--brand);
    color: var(--ink);
    border-color: var(--brand);
}
.tl-item--now .tl-item__dot { width: 19px; height: 19px; }

/* Ethos — two-column heading / copy block on the darkest surface */
.ethos {
    background: var(--bg-page);
    padding-block: var(--section-py);
}
.ethos__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
    align-items: start;
}
/* Left column: heading + lead, stacked */
.ethos__heading {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.ethos__heading .lead { max-width: 420px; }   /* keep the intro a tidy measure */

/* Right column: numbered points; 1px divider between only; green accent on hover */
.ethos__points {
    display: flex;
    flex-direction: column;
}
.ethos__point {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-5);
    padding: var(--space-6) 0 var(--space-6) var(--space-5);
}
.ethos__point:first-child { padding-top: 0; }
.ethos__point:last-child  { padding-bottom: 0; }
.ethos__point:not(:first-child) { border-top: 1px solid var(--border); }
/* Accent bar = a pseudo-element (not a border) so hover adds zero layout shift.
   It grows in (scaleY) while it fades, on a gentle symmetric curve — smoother
   than a flat opacity blink and reversible both ways. */
.ethos__point::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--brand);
    opacity: 0;
    transform: scaleY(0);
    transform-origin: center;
    transition: opacity var(--dur-slow) ease, transform var(--dur-slow) ease;
}
.ethos__num {
    font-size: 14px;
    font-weight: var(--fw-reg);
    color: var(--text-muted);
    transition: color var(--dur-slow) ease;
}
.ethos__point-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.ethos__point-content p { color: var(--text-muted); }

/* Hover only on hover-capable devices (touch gets the static stacked layout) */
@media (hover: hover) and (pointer: fine) {
    .ethos__point:hover::before     { opacity: 1; transform: scaleY(1); }
    .ethos__point:hover .ethos__num { color: var(--brand); }
}

/* Values — "How we work / think": numbered rows, divider under each */
.values {
    background: var(--surface-header);   /* #373737 */
    padding-block: var(--section-py);
}
.values__title { margin-bottom: var(--space-9); }
.values__row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
    align-items: start;
    padding-block: var(--space-7);
    border-bottom: 1px solid var(--border);
}
.values__label {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}
.values__num {
    font-size: 14px;
    font-weight: var(--fw-reg);
    color: var(--text-muted);
    transition: color var(--dur-slow) ease;
}
.values__detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 440px;
}
.values__detail .lead { margin-bottom: var(--space-1); }

/* -----------------------------------------------------------------------------
   Workplace Culture — expanding image panels (desktop) / accordion (mobile).
   Base (no-JS) renders readable stacked cards; the collapse/expand behaviour is
   gated behind <html class="js">, so crawlers and no-JS users see every section
   in full. One panel is always active (server-rendered on the first).
   -------------------------------------------------------------------------- */
.culture {
    background: var(--bg-page);            /* #2E2E2E */
    padding-block: var(--section-py);
    --culture-h: 540px;                    /* panel height (desktop) */
    --culture-sliver: 76px;                /* collapsed panel width */
    --culture-dur: 500ms;                  /* expand/collapse duration */
    --culture-ease: cubic-bezier(0.4, 0, 0.2, 1);  /* smooth, symmetric size easing */
}
.culture__title { margin-bottom: var(--space-9); }

/* Base / no-JS: a simple stack of full readable cards */
.culture__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.culture-panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-card);
    min-height: 360px;
}
/* Image + bottom-up gradient — every panel, both states */
.culture-panel__bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to top,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.55) 30%,
            rgba(0, 0, 0, 0.12) 62%,
            rgba(0, 0, 0, 0.30) 100%),
        var(--culture-bg);
    background-size: cover;
    background-position: center;
}
/* Collapsed-only bits (number / vertical label / icon / chevron) hidden in base */
.culture-panel__num,
.culture-panel__label,
.culture-panel__icon,
.culture-panel__chevron { display: none; }

.culture-panel__head {
    position: static;
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: default;
}
/* Summary pill — frosted glass, green dot + keyword (shown on the open state) */
.culture-panel__pill {
    position: absolute;
    top: var(--space-5);
    left: var(--space-5);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 14px;
    font-size: var(--text-btn);
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    background: rgba(24, 24, 24, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    pointer-events: none;
}
.culture-panel__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
    flex: none;
}
/* Title + body — bottom-left, on the site spacing */
.culture-panel__body {
    position: absolute;
    left: var(--space-6);
    right: var(--space-6);
    bottom: var(--space-6);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 500px;
    pointer-events: none;
}
.culture-panel__index {
    font-size: 14px;
    color: var(--text-muted);
}
.culture-panel__title {
    font-size: var(--text-h2);             /* H3 tag, H2 size — display, not outline */
    line-height: var(--lh-heading);
    color: var(--text-strong);
}
.culture-panel__text { color: var(--text-muted); }

/* --- JS enhancement: horizontal expanding accordion (desktop) ------------- */
.js .culture__grid {
    flex-direction: row;
    gap: var(--space-3);
    height: var(--culture-h);
}
.js .culture-panel {
    flex: 0 0 var(--culture-sliver);
    min-width: 0;
    min-height: 0;
    transition: flex-grow var(--culture-dur) var(--culture-ease);
}
.js .culture-panel.is-active { flex-grow: 1; }

/* Collapsed image darkened so the sliver text reads on any photo */
.js .culture-panel__bg { transition: filter var(--culture-dur) var(--culture-ease); }
.js .culture-panel:not(.is-active) .culture-panel__bg { filter: brightness(0.5) saturate(0.92); }

/* Whole sliver is the toggle; collapsed bits stack top / centre / bottom */
.js .culture-panel__head {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-5);
    cursor: pointer;
}
.js .culture-panel__num {
    display: block;
    font-size: 14px;
    color: var(--text-muted);
    transition: opacity 300ms var(--culture-ease) 160ms;   /* fades in as a panel collapses */
}
.js .culture-panel__label {
    display: block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);             /* read bottom-to-top */
    font-size: var(--text-h3);
    font-weight: var(--fw-bold);
    letter-spacing: 0.02em;
    color: var(--text-strong);
    transition: opacity 300ms var(--culture-ease) 160ms;
}
.js .culture-panel__icon {
    display: block;
    order: 1;                              /* push icon to the bottom (number · word · icon) */
    width: 22px;
    height: 22px;
    color: var(--text-strong);
    transition: opacity 300ms var(--culture-ease) 160ms;
}
.js .culture-panel__icon svg { width: 100%; height: 100%; display: block; }

/* Open-state content fades in (delayed, as the panel opens); collapsed bits fade out fast */
.js .culture-panel__pill,
.js .culture-panel__body {
    opacity: 0;
    transition: opacity 200ms var(--culture-ease);
}
.js .culture-panel.is-active .culture-panel__pill,
.js .culture-panel.is-active .culture-panel__body {
    opacity: 1;
    transition: opacity 300ms var(--culture-ease) 160ms;
}
.js .culture-panel.is-active .culture-panel__num,
.js .culture-panel.is-active .culture-panel__label,
.js .culture-panel.is-active .culture-panel__icon {
    opacity: 0;
    transition: opacity 200ms var(--culture-ease);
}

/* Hear from the team — testimonial card grid (2-up, stacks on mobile) */
.testimonials {
    background: var(--bg-page);
    padding-block: var(--section-py);
}
.testimonials__title { margin-bottom: var(--space-9); }
.testimonials__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}
.tcard {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6) var(--space-7);
    background: var(--surface-header);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}
.tcard__mark {
    font-size: 56px;
    line-height: 0.4;
    font-weight: var(--fw-bold);
    color: var(--text-muted);
    opacity: 0.45;
}
.tcard__text {
    font-size: var(--text-lead);
    line-height: var(--lh-body);
    color: var(--text-strong);
    text-wrap: pretty;
}
.tcard__person {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: auto;                  /* pin the person to the card bottom */
}
.tcard__avatar {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 50%;
    background: var(--brand);
    color: var(--ink);
    font-size: 14px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.02em;
}
.tcard__meta { display: flex; flex-direction: column; }
.tcard__name { font-weight: var(--fw-bold); color: var(--text-strong); }
.tcard__role { font-size: 14px; color: var(--text-muted); }

/* Perks & Benefits — icon + text items, 2-up with dividers, stacks on mobile */
.perks {
    background: var(--surface-header);   /* #373737 */
    padding-block: var(--section-py);
}
.perks__head { margin-bottom: var(--space-8); }
.perks__lead { margin-top: var(--space-3); }
.perks__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-9);
}
.perk {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-5);
    align-items: start;
    padding-block: var(--space-6);
    border-top: 1px solid var(--border);
}
.perk__icon {
    width: 28px;
    height: 28px;
    flex: none;
    color: var(--text-strong);
    transition: color var(--dur-slow) ease;
}
.perk__icon svg { width: 100%; height: 100%; display: block; }
.perk__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.perk__desc { color: var(--text-muted); }

/* Hover accent (matches the ethos points): a green bar grows in on the left + the
   leading element greens — the number on "How we work", the icon on Perks. The bar
   uses a negative offset so rows keep heading alignment; it lives inside the hover
   query so touch devices never render it (no off-screen pseudo / sideways scroll). */
@media (hover: hover) and (pointer: fine) {
    .values__row::before,
    .perk::before {
        content: "";
        position: absolute;
        left: calc(-1 * var(--space-5));
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--brand);
        opacity: 0;
        transform: scaleY(0);
        transform-origin: center;
        transition: opacity var(--dur-slow) ease, transform var(--dur-slow) ease;
    }
    .values__row:hover::before,
    .perk:hover::before { opacity: 1; transform: scaleY(1); }
    .values__row:hover .values__num,
    .perk:hover .perk__icon { color: var(--brand); }
}

/* Open roles — reusable bordered table panel on the default surface */
.roles {
    background: var(--bg-page);          /* #2E2E2E */
    padding-block: var(--section-py);
}
.roles__intro {
    margin-top: var(--space-3);
    margin-bottom: var(--space-7);
    color: var(--text-muted);
}
/* Empty state — shown when there are no open roles (deliberate card, not a bare line) */
.roles__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    padding: var(--space-7);
    background: var(--surface-header);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}
.roles__empty .lead { max-width: 52ch; }
/* .table = the reusable table panel; .table__row + .table-divider reused site-wide */
.table {
    background: var(--surface-header);   /* #373737 */
    border: 1px solid var(--border);
    border-radius: var(--radius-card);   /* 10px */
    overflow: hidden;
}
.table__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-5) var(--space-6);   /* reusable table cell padding */
}
.table__row:not(:last-child) { border-bottom: 1px solid var(--border); }

.role__title { margin-bottom: var(--space-3); }
.role-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
}
/* sub-body text: body size, muted grey — reusable text type */
.text-sub { font-size: var(--text-body); color: var(--text-muted); }
.role-meta__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.role-meta__item svg { width: 16px; height: 16px; flex: none; }
.table__row .btn { flex: none; }

/* Job page — sticky details (left) + scrolling content (right) */
.job {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: var(--space-9);
    align-items: start;
    padding-block: var(--space-9);
}
.job__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
    align-self: start;
    min-width: 0;   /* let the grid item shrink instead of forcing track overflow */
}
.job__breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    font-size: 14px;
    color: var(--text-muted);
}
.job__breadcrumbs a { transition: color var(--dur) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
    .job__breadcrumbs a:hover { color: var(--text-strong); }
}
.job__title { color: var(--text-strong); margin-bottom: var(--space-4); }
.job__meta { color: var(--text-muted); margin-bottom: var(--space-6); }

.job__content {
    color: var(--text-muted);
    max-width: 680px;
    min-width: 0;   /* prevent grid item from overflowing the track */
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    overflow-wrap: break-word;
}
.job__intro { display: flex; flex-direction: column; gap: var(--space-4); }
.job__section { display: flex; flex-direction: column; gap: var(--space-4); }
.job-list { display: flex; flex-direction: column; gap: var(--space-3); }
.job__apply-title { margin-bottom: var(--space-5); }

/* Forms (apply form; reusable for any site form) -------------------------- */
.apply-form { display: flex; flex-direction: column; gap: var(--space-5); }
.apply-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-field label {
    font-size: var(--text-body);   /* sub-body grey, matches placeholders */
    font-weight: 400;
    color: var(--text-muted);
}
.form-optional { color: var(--text-muted); }

.form-field input:not([type="file"]),
.form-field textarea {
    width: 100%;
    padding: 12px 14px;
    color: var(--text-strong);
    background: var(--surface-header);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color var(--dur) var(--ease-out);
}
.form-field textarea { resize: vertical; min-height: 110px; }
.form-field ::placeholder { color: var(--text-muted); }
.form-field input:focus,
.form-field textarea:focus { outline: none; border-color: var(--text-strong); }

/* Shared form error banner (login, etc.) */
.form-error { font-size: 14px; color: #ff6b6b; }

/* File input — custom tertiary "Attach File" trigger (native control hidden) */
.form-field--file { gap: var(--space-3); }
.file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}
.form-field--file .file-trigger {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--space-2);
    font-size: var(--text-btn);
    font-weight: 700;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
    transition: color var(--dur) var(--ease-out);
}
.file-trigger svg { width: 16px; height: 16px; flex: none; }
.file-input:focus-visible + .file-trigger {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}
.file-name { color: var(--text-muted); }
.file-name:empty { display: none; }
@media (hover: hover) and (pointer: fine) {
    .form-field--file .file-trigger:hover { color: var(--text-muted); }
}

.apply-form__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.apply-form__status { font-size: 14px; }
.apply-form__status.is-error { color: #ff6b6b; }
.apply-form__status.is-success { color: var(--brand); }
.form-field.has-error input,
.form-field.has-error textarea { border-color: #ff6b6b; }
.field-error { font-size: 13px; color: #ff6b6b; }

/* Connect (contact) page — heading + the form + a contact-details block.
   Reuses the .apply-form / .form-field / .file-trigger system. */
.connect {
    background: var(--bg-page);
    padding-block: var(--space-9) var(--section-py);
}
.connect__inner { max-width: 760px; margin-inline: auto; }
.connect__head { margin-bottom: var(--space-8); }
.connect__lead { margin-top: var(--space-3); }

/* Form foot: 'Attach file' (left) and 'Send message' (right); wraps on narrow screens. */
.connect-form__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
}
.connect-form__send .btn__arrow svg { width: 16px; height: 16px; display: block; }

/* Contact details — 3-up under the form, stacks on mobile. */
.connect-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-9);
    padding-top: var(--space-7);
    border-top: 1px solid var(--border);
}
.connect-detail__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-strong);
}
.connect-detail__label svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
.connect-detail__text { font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.connect-detail__text a { color: var(--text-muted); transition: color var(--dur) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
    .connect-detail__text a:hover { color: var(--text-strong); }
}

/* Legal pages (Terms, Privacy) — simple prose on the dark surface */
.legal { background: var(--bg-page); padding-block: var(--space-9) var(--section-py); }
.legal__inner { max-width: 760px; margin-inline: auto; }
.legal__updated { margin-top: var(--space-3); font-size: 14px; color: var(--text-muted); }
.legal__body { margin-top: var(--space-8); color: var(--text-muted); }
.legal__body h2 {
    color: var(--text-strong);
    font-size: var(--text-h3);
    margin: var(--space-7) 0 var(--space-3);
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body p { margin-bottom: var(--space-4); line-height: var(--lh-body); }
.legal__body ul {
    list-style: disc;
    padding-left: var(--space-5);
    margin-bottom: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.legal__body a { color: var(--text-strong); text-decoration: underline; text-underline-offset: 3px; }
.legal__body strong { color: var(--text-strong); }

/* 404 page */
.notfound { background: var(--bg-page); padding-block: var(--space-12) var(--section-py); }
.notfound__inner { max-width: 640px; }
.notfound__code { font-size: 56px; font-weight: var(--fw-bold); line-height: 1; color: var(--brand); margin-bottom: var(--space-4); }
.notfound__lead { margin-top: var(--space-3); margin-bottom: var(--space-7); }
.notfound__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* Auth (admin login) — centred card + brand shape locked bottom-right */
.auth {
    position: relative;
    min-height: calc(100vh - var(--header-h));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: var(--space-8) var(--gutter);
}
.auth__shape {
    position: absolute;
    right: 0;
    bottom: 0;
    width: clamp(260px, 42vw, 540px);
    height: auto;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}
.auth__card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    padding: var(--space-7);
    background: rgba(55, 55, 55, 0.65);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.auth__title { font-size: 20px; color: var(--text-strong); margin-bottom: var(--space-6); }
.auth-form { display: flex; flex-direction: column; gap: var(--space-5); }
.auth-form .btn { align-self: flex-start; margin-top: var(--space-2); }

/* CMS (admin) ------------------------------------------------------------- */
.cms { padding-block: var(--space-9); min-height: calc(100vh - var(--header-h)); }
.cms__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
    margin-bottom: var(--space-7);
}
.cms__title { color: var(--text-strong); }

/* Status pills */
.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill--open { color: var(--brand); background: rgba(136, 214, 0, 0.12); }
.pill--draft { color: #e0a32e; background: rgba(224, 163, 46, 0.14); }
.pill--closed { color: var(--text-muted); background: rgba(171, 171, 171, 0.12); }

/* Dashboard table */
.cms-table {
    background: var(--surface-header);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
}
.cms-table__head,
.cms-row {
    display: grid;
    grid-template-columns: 1fr 130px auto;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6);
}
.cms-table__head {
    color: var(--text-muted);
    font-size: 14px;
    border-bottom: 1px solid var(--border);
}
.cms-row:not(:last-child) { border-bottom: 1px solid var(--border); }
.cms-row__title { color: var(--text-strong); font-weight: 700; }
.cms-row__meta { margin-top: 2px; }
.cms-row__actions { display: flex; align-items: center; gap: var(--space-4); }
.cms-view { color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; }
.cms-delete-form { display: inline; }
.cms-delete { font-size: 14px; font-weight: 700; color: var(--text-muted); transition: color var(--dur) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
    .cms-view:hover { color: var(--text-muted); }
    .cms-delete:hover { color: #ff6b6b; }
}
.btn--sm { padding: 8px 16px; }

/* CMS form */
.cms-form { display: flex; flex-direction: column; gap: var(--space-5); max-width: 720px; }
.cms-form__actions { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-3); }
.form-field select {
    width: 100%;
    padding: 12px 40px 12px 14px;
    color: var(--text-strong);
    background-color: var(--surface-header);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    appearance: none;
    cursor: pointer;
}
.form-field select:focus { outline: none; border-color: var(--text-strong); }

/* Repeatable rows */
.repeat { display: flex; flex-direction: column; gap: var(--space-3); }
.repeat__row { display: flex; align-items: flex-start; gap: var(--space-2); }
.repeat__row input,
.repeat__row textarea { flex: 1; min-width: 0; }
.repeat__remove {
    flex: none;
    width: 42px;
    height: 42px;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 20px;
    line-height: 1;
    transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.repeat__add {
    align-self: flex-start;
    margin-top: var(--space-3);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color var(--dur) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .repeat__remove:hover { color: #ff6b6b; border-color: #ff6b6b; }
    .repeat__add:hover { color: var(--text-muted); }
}

/* -----------------------------------------------------------------------------
   7. RESPONSIVE — single breakpoint (900px)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    :root { --gutter: 15px; --section-py: 48px; }   /* tighter gutters + section gaps on mobile */

    /* Header: hide desktop pill nav, show burger */
    .site-nav { display: none; }
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
    }

    .mobile-menu {
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        z-index: var(--z-dropdown);
        display: flex;
        flex-direction: column;
        padding: var(--space-3) var(--gutter) var(--space-6);
        background: var(--surface-header);
        border-bottom: 1px solid var(--border);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity var(--dur) var(--ease-out),
                    transform var(--dur) var(--ease-out),
                    visibility 0s linear var(--dur);
    }
    .mobile-menu.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity var(--dur) var(--ease-out),
                    transform var(--dur) var(--ease-out);
    }
    .mobile-menu__item {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-4) 0;
        font-size: 18px;
        color: #fff;
        border-bottom: 1px solid var(--border);
    }
    .mobile-menu__item:last-child { border-bottom: 0; }
    .mobile-menu__item svg { width: 18px; height: 18px; flex: none; }
    .mobile-menu__item.is-active { color: var(--text-muted); }
    body.nav-open { overflow: hidden; }

    /* Hero: stacked, content over a taller image */
    .hero { min-height: 460px; }
    .hero__overlay {
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.45) 38%,
            rgba(0, 0, 0, 0.65) 100%);
    }
    .hero__inner {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--space-7);
        padding-block: var(--space-7);
    }
    .hero__content { max-width: none; }
    .hero__title { font-size: 40px; }   /* mobile: fits the column cleanly (overflow ban) */
    .hero__actions { flex-direction: column; }
    .hero__actions .btn { width: 100%; min-width: 0; }

    /* Home hero: stays tall; title back to the mobile size; stats wrap to
       1M+ · 2 on one row, In-house spanning the next. */
    .hero--home .hero__title { font-size: 40px; }
    .hero__inner--home { gap: var(--space-7); padding-block: var(--space-7); }
    .hero--home .hero__content { max-width: none; }
    .hero__stats { gap: var(--space-6) var(--space-9); }
    .stat:last-child { flex-basis: 100%; }

    /* What drives GAVGO: intro stacks above the accordion */
    .drives__inner {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        align-items: stretch;
    }
    .drives__intro .lead { max-width: none; }

    /* Ethos: stack the intro above the points */
    .ethos__inner {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    .ethos__heading .lead { max-width: none; }
    /* stacked: a divider now separates the intro from the first point */
    .ethos__point:first-child {
        padding-top: var(--space-6);
        border-top: 1px solid var(--border);
    }

    /* Values: stack label above detail in each row */
    .values__title { margin-bottom: var(--space-6); }
    .values__row {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        padding-block: var(--space-6);
    }
    .values__detail { max-width: none; }

    /* Workplace Culture: imageless accordion rows; tap reveals the image card */
    .culture { --culture-h: auto; }
    .culture__title { margin-bottom: var(--space-6); }
    .js .culture__grid {
        flex-direction: column;
        gap: var(--space-4);
        height: auto;
    }
    .js .culture-panel {
        flex: none;
        min-height: 88px;          /* ≈ collapsed row height — animate from here, no dead-zone */
        border: 1px solid var(--border);
        transition: min-height var(--culture-dur) var(--culture-ease);
    }
    .js .culture-panel.is-active {
        border-color: transparent;
        min-height: 380px;
    }
    /* Image hidden until the row is open (collapsed = imageless) */
    .js .culture-panel__bg {
        opacity: 0;
        filter: none;
        transition: opacity 360ms var(--culture-ease);
    }
    .js .culture-panel.is-active .culture-panel__bg { opacity: 1; }

    /* Head becomes a horizontal row: number · icon tile · keyword · chevron */
    .js .culture-panel__head {
        position: relative;
        inset: auto;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: var(--space-4);
        padding: var(--space-5);
    }
    .js .culture-panel__num { color: var(--text-muted); opacity: 1; }
    .js .culture-panel__icon {
        display: inline-flex;
        order: 0;                          /* horizontal row keeps DOM order: num · icon · label */
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 9px;
        border-radius: var(--radius-sm);
        background: var(--surface-raised);
        color: var(--text-strong);
        opacity: 1;
    }
    .js .culture-panel__label {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: var(--text-h3);
        opacity: 1;
    }
    .js .culture-panel__chevron {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        margin-left: auto;
        color: var(--text-muted);
        transition: transform 320ms var(--culture-ease);
    }
    .js .culture-panel__chevron svg { width: 100%; height: 100%; display: block; }
    .js .culture-panel.is-active .culture-panel__chevron { transform: rotate(90deg); }

    /* Keep the row header on the open card too (the desktop rule hides it) and
       give it a soft top scrim so it stays legible over the image. */
    .js .culture-panel.is-active .culture-panel__num,
    .js .culture-panel.is-active .culture-panel__icon,
    .js .culture-panel.is-active .culture-panel__label { opacity: 1; }
    .js .culture-panel.is-active .culture-panel__head {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent);
    }

    /* No pill on mobile; title + body sit at the bottom of the open card */
    .culture-panel__pill { display: none; }
    .culture-panel__body {
        left: var(--space-5);
        right: var(--space-5);
        bottom: var(--space-5);
        max-width: none;
    }

    /* Testimonials: single column */
    .testimonials__title { margin-bottom: var(--space-6); }
    .testimonials__grid { grid-template-columns: 1fr; gap: var(--space-4); }
    .tcard { padding: var(--space-6); }

    /* Perks: single column */
    .perks__head { margin-bottom: var(--space-6); }
    .perks__grid { grid-template-columns: 1fr; column-gap: 0; }

    /* Our brands: single column */
    .brands__head { margin-bottom: var(--space-6); }
    .brands__grid { grid-template-columns: 1fr; gap: var(--space-4); }
    .brand-card__body { padding: var(--space-6); }

    /* Our journey: single left column; the line + dots sit in a left gutter */
    .journey__head { max-width: none; margin: 0 0 var(--space-7); text-align: left; }
    .journey__track { max-width: none; }
    .tl-item {
        grid-template-columns: 1fr;
        column-gap: 0;
        padding-left: var(--space-7);
        padding-block: var(--space-4);
    }
    .tl-item::before { left: 6px; }
    .tl-item:nth-child(odd)  .tl-item__body,
    .tl-item:nth-child(even) .tl-item__body {
        grid-column: 1;
        text-align: left;
        align-items: flex-start;
    }
    .tl-item__dot { left: 6px; }
    .tl-item__desc { max-width: none; }

    /* Table: stack row content, button below */
    .table__row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
        padding: var(--space-5);
    }

    /* Footer: stack columns */
    .site-footer__cols {
        grid-template-columns: 1fr;
        gap: var(--space-7);
    }

    /* Job page: left details become a header block; content stacks below */
    .job {
        grid-template-columns: 1fr;
        gap: var(--space-7);
        padding-block: var(--space-7);
    }
    .job__aside { position: static; }
    .job__title { font-size: 34px; }   /* fit the long title in the mobile column */
    .job__content { max-width: none; }

    /* Form: stack the email/phone pair */
    .form-grid-2 { grid-template-columns: 1fr; }

    /* Connect: lighter top, details stack to one column */
    .connect { padding-block: var(--space-7) var(--section-py); }
    .connect-details { grid-template-columns: 1fr; gap: var(--space-7); }

    /* CMS dashboard: stack each row */
    .cms-table__head { display: none; }
    .cms-row { grid-template-columns: 1fr; gap: var(--space-3); }
    .cms-row__actions { flex-wrap: wrap; }
}

/* -----------------------------------------------------------------------------
   8. REDUCED MOTION
   -------------------------------------------------------------------------- */
/* Scroll reveal -----------------------------------------------------------
   Sections ease in (fade + slight rise) as they enter the viewport. The
   hidden start state applies only when JS is on (<html class="js">), so
   no-JS users get the content immediately — the reveal only enhances. */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms var(--ease-out),
                transform 600ms var(--ease-out);
}
.js [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}