/* ═══ about.css ═══════════════════════════════════════════ */
/* About page: hero, KL skyline band, director cards, the org chart and the
   team grid.

   Both photo blocks (.about__portrait, .about__member) sit on .photo-card,
   which owns the 4/5 aspect and the crop. The team caption sits over a dark
   scrim, so its text is literal white rather than a theme token. */

/* ── Hero ────────────────────────────────────────────────────────────────── */

.about__hero {
    padding-block: clamp(44px, 6vw, 76px) clamp(28px, 4vw, 44px);
}

.about__title {
    font-family: var(--font-display);
    font-size: clamp(32px, 5.4vw, 56px);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.03em;
    margin: 14px 0 0;
    max-width: 20ch;
    color: var(--ink);
}

/* .about__lede went with the hero paragraph it styled — nothing else used it.
   .about__lede-wide below is unrelated despite the name: it modifies
   .section-lede, not this. */

/* Wider, slightly looser variant of .section-lede used under "Directors". */
.about__lede-wide {
    font-size: 17.5px;
    line-height: 1.62;
    max-width: 100%;
}

/* ── Skyline band ────────────────────────────────────────────────────────── */

.about__photo-band {
    padding-block: 0 clamp(40px, 5vw, 64px);
}

.about__photo {
    position: relative;
    width: 100%;
    aspect-ratio: 1600 / 1152;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    border: 1px solid rgb(var(--ink-rgb) / 0.1);
    background: var(--surface-inverse);
}

.about__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ── Leadership ──────────────────────────────────────────────────────────── */

/* Top padding was 0 because this section used to sit directly under the
   full-bleed skyline photo, which supplied the break itself. It now follows
   the "About GET NOVA" band, so it needs the same rhythm as every other
   section. */
.about__leadership {
    padding-block: clamp(46px, 6vw, 76px);
}

.about__dir-list {
    display: grid;
    gap: clamp(36px, 5vw, 64px);
    margin-top: clamp(32px, 4vw, 52px);
}

/* [data-dircard] collapses to one column under 720px in responsive.css. */
.about__dircard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: clamp(26px, 4vw, 52px);
    align-items: start;
}

/* Portrait plate: the .avatar gradient plus the original's dot field, two
   diagonal scan lines and a glow rising from the bottom edge. */
/* The director headshot. Aspect, crop and radius come from .photo-card. */
.about__portrait {
    width: 100%;
}


.about__profile-btn {
    margin-top: 16px;
    padding: 12px 22px;
    border-radius: var(--radius-lg);
}

.about__dir-name {
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 28px);
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0;
}

.about__dir-role {
    font-size: 16px;
    line-height: 1.45;
    font-weight: 600;
    color: var(--accent-text);
    margin: 6px 0 0;
}

.about__dir-paras {
    display: grid;
    gap: 16px;
    margin-top: 20px;
}

.about__dir-para {
    font-size: 16.5px;
    line-height: 1.68;
    color: var(--ink-secondary);
    margin: 0;
    text-wrap: pretty;
}

.about__dir-quals {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--ink-muted);
    margin: 18px 0 0;
}

.about__dir-quals strong {
    color: var(--ink);
    font-weight: 600;
}

.about__dir-exp-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    margin: 30px 0 0;
}

.about__exp {
    display: grid;
    gap: 0;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgb(var(--ink-rgb) / 0.12);
}

.about__exp-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid rgb(var(--ink-rgb) / 0.1);
}

.about__exp-no {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--accent-text);
    padding-top: 2px;
}

.about__exp-text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-secondary);
}

/* ── Organisation chart ──────────────────────────────────────────────────── */

.about__org-inner {
    padding-block: clamp(44px, 6vw, 76px);
}

.about__org {
    margin-top: 40px;
}

/* Connector rails. The vertical stubs are flex/block children; the horizontal
   rail spans the gap between the outer two columns of the three-up grid. */
.about__org-stem,
.about__org-rail,
.about__org-gap {
    display: block;
    width: 2px;
    flex-shrink: 0;
    background: rgb(var(--ink-rgb) / 0.2);
}

.about__org-stem {
    height: 24px;
    margin-inline: auto;
}

.about__org-rail {
    height: 22px;
}

.about__org-gap {
    height: 18px;
}

.about__org-hrail {
    height: 2px;
    background: rgb(var(--ink-rgb) / 0.2);
    margin: 0 calc((100% - 40px) / 6);
}

.about__org-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.about__org-col,
.about__org-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about__org-item {
    width: 100%;
}

.about__org-node {
    text-align: center;
}

/* The two boxes above the fan-out sit centred on their own line. */
.about__org-node--head,
.about__org-node--lead {
    width: fit-content;
    min-width: 260px;
    margin-inline: auto;
    border-radius: 12px;
}

.about__org-node--head {
    padding: 18px 38px;
    background: var(--gradient-brand);
}

.about__org-head-label {
    display: block;
    font-family: var(--font-display);
    font-size: 17.5px;
    line-height: 1.25;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: #fff;
}

.about__org-node--lead {
    padding: 15px 30px;
    border: 1px solid rgb(var(--ink-rgb) / 0.14);
    background: var(--surface-card);
    box-shadow: 0 2px 4px rgb(var(--ink-rgb) / 0.04), 0 8px 22px rgb(var(--ink-rgb) / 0.06);
}

.about__org-lead-label {
    display: block;
    font-family: var(--font-display);
    font-size: 15.5px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--ink);
}

.about__org-lead-name {
    display: block;
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--accent-text);
    margin-top: 4px;
}

.about__org-node--division,
.about__org-node--role {
    width: 100%;
    padding: 13px 16px;
    border-radius: var(--radius-lg);
}

.about__org-node--division {
    background: var(--gradient-brand);
}

.about__org-division-label {
    display: block;
    font-family: var(--font-display);
    font-size: 13.5px;
    line-height: 1.35;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: #fff;
}

.about__org-node--role {
    border: 1px solid var(--border);
    background: var(--surface-card);
    box-shadow: 0 1px 3px rgb(var(--ink-rgb) / 0.05), 0 6px 18px rgb(var(--ink-rgb) / 0.06);
}

/* The person is the heading of the box; the job title is the caption under it.
   Swapped on 2026-09-24 - it was the other way round, which read as an org of
   job titles that happened to have people in them. */
.about__org-name {
    display: block;
    font-family: var(--font-display);
    font-size: 15px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--ink);
}

.about__org-role-label {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: var(--accent-text);
    margin-top: 3px;
}

/* A box with no name yet (IT Technicians) would otherwise show only a small
   purple caption and read as an empty card - promote the title in that case. */
.about__org-node--role:not(:has(.about__org-name)) .about__org-role-label {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin-top: 0;
}


/* ── About GET NOVA ──────────────────────────────────────────────────────── */

.about__pillars {
    margin-top: 34px;
}

/* The pillar name is the first thing in the card, so it needs no top offset
   the way .card__title does when it follows a badge. */
.about__pillar-title {
    margin-top: 0;
}

/* ═══ careers.css ═══════════════════════════════════════════ */
/* Careers listing: dark photo hero, the filterable roles table, the hiring
   process columns and the talent-network band. The role detail page has its
   own sheet. */

/* ── Hero ────────────────────────────────────────────────────────────────── */

.careers-hero {
    position: relative;
    overflow: hidden;
    /* Always dark, in both themes — a photo sits behind it. */
    background: var(--surface-inverse);
}

.careers-hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
}

.careers-hero__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        105deg,
        rgb(var(--scrim-rgb) / 0.94) 0%,
        rgb(var(--scrim-rgb) / 0.86) 45%,
        rgb(var(--scrim-violet-rgb) / 0.7) 100%
    );
}

.careers-hero__inner {
    position: relative;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: clamp(56px, 8vw, 110px) var(--page-gutter);
}

.careers-hero__content {
    max-width: 100%;
}

.careers-hero__title {
    font-size: clamp(32px, 5.6vw, 58px);
    line-height: 1.06;
    font-weight: 600;
    letter-spacing: -0.03em;
    margin: 18px 0 0;
    max-width: 19ch;
    color: #fff;
}

.careers-hero__lede {
    font-size: 17.5px;
    line-height: 1.6;
    color: rgb(255 255 255 / 0.8);
    max-width: 100%;
    margin: 20px 0 0;
}

.careers-hero__actions {
    display: flex;
    gap: 12px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.careers-hero__cta {
    padding: 15px 28px;
    border-radius: var(--radius-lg);
}

/* ── Open roles ──────────────────────────────────────────────────────────── */

/* The hero's "See open roles" link jumps here, past the sticky header. */
[data-jobs] {
    scroll-margin-top: calc(var(--header-height) + 8px);
}

.careers__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 22px 34px;
    margin-top: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgb(var(--ink-rgb) / 0.14);
}

.careers__filter-label {
    font-size: 12.5px;
    letter-spacing: 0.1em;
    color: var(--ink-subtle);
    font-weight: 600;
    margin-bottom: 10px;
}

.careers__count-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.careers__count {
    font-size: 15px;
    color: var(--ink-muted);
}

/* A real <button>: the original was a clickable div with a fake underline. */
.careers__clear {
    padding: 0;
    border: 0;
    border-bottom: 1px solid rgb(var(--accent-rgb) / 0.4);
    background: none;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--accent-text);
    cursor: pointer;
}

.careers__clear:hover {
    border-bottom-color: var(--accent-text);
}

/* ── Role rows ───────────────────────────────────────────────────────────── */

.careers__list {
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--surface-card);
}

/* Each row is the only entry point to /careers/<slug>, so it is an <a>, not a
   clickable div. js/filters-careers.js toggles [hidden] on these. */
.careers__row {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 12px 22px;
    align-items: center;
    padding: 22px 24px;
    border-bottom: 1px solid rgb(var(--ink-rgb) / 0.09);
    color: inherit;
    transition: background 0.18s;
}

.careers__row:hover {
    background: var(--surface-alt);
    color: inherit;
}

.careers__row-title {
    font-size: 19px;
    line-height: 1.26;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.careers__row-detail {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink-subtle);
    margin-top: 5px;
}

.careers__row-meta {
    font-size: 14.5px;
    color: var(--ink-muted);
}

.careers__row-end {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-self: end;
}

/* Brand blue at low alpha. #1f7bff is invariant, so it is written as literal
   channels rather than a token — see note 2 in tokens.css. */
.careers__row-type {
    font-size: 13.5px;
    white-space: nowrap;
    padding: 5px 11px;
    border-radius: var(--radius-sm);
    color: var(--brand-text);
    background: rgb(31 123 255 / 0.09);
    border: 1px solid rgb(31 123 255 / 0.2);
}

.careers__row-arrow {
    font-size: 18px;
    color: var(--accent-text);
}

/* .careers__list already supplies the panel chrome, so the shared empty state
   drops its own dashed outline when it sits inside the table. */
.careers__empty {
    border: 0;
    border-radius: 0;
}

.careers__empty-body {
    font-size: 15px;
}

/* ── Hiring process ──────────────────────────────────────────────────────── */

.careers__hiring {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    margin-top: 34px;
    border-top: 1px solid rgb(var(--ink-rgb) / 0.14);
}

.careers__step {
    padding: 24px 24px 26px;
    border-left: 1px solid rgb(var(--ink-rgb) / 0.1);
}

.careers__step-no {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--accent-text);
}

.careers__step-body {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-muted);
    margin-top: 9px;
}

.careers__step-when {
    font-size: 13px;
    color: var(--ink-subtle);
    margin-top: 10px;
}

/* ── Talent network band ─────────────────────────────────────────────────── */

/* Sits directly under the hiring section, so it carries no top padding. */
.careers__talent-section {
    padding-block: 0 clamp(56px, 7vw, 96px);
}

.careers__talent {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    background: var(--surface-inverse);
    padding: clamp(34px, 4.5vw, 56px) clamp(24px, 4vw, 52px);
}

/* Both stops are invariant gradient colours, not theme tokens. */
.careers__talent-wash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgb(31 123 255 / 0.22), rgb(139 47 224 / 0.26));
}

.careers__talent-content {
    position: relative;
    max-width: 100%;
}

.careers__talent-title {
    font-size: clamp(24px, 3.4vw, 34px);
    line-height: 1.14;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: #fff;
}

.careers__talent-lede {
    font-size: 16.5px;
    line-height: 1.6;
    color: rgb(255 255 255 / 0.8);
    margin-top: 14px;
}

.careers__talent-btn {
    margin-top: 26px;
    padding: 15px 30px;
    border-radius: var(--radius-lg);
}

/* ═══ contact.css ═══════════════════════════════════════════ */
/* Contact page: the two-column hero/form split, the contact-detail list and
   the budget chips, which are radio inputs here rather than inert <div>s. */

/* ── Layout ──────────────────────────────────────────────────────────────── */

/* .section already carries the page width and gutter; only the vertical
   rhythm differed in the original, so only that is restated. */
.contact {
    padding-block: clamp(44px, 6vw, 76px) clamp(50px, 6vw, 90px);
}

.contact__grid {
    gap: clamp(30px, 4vw, 68px);
    align-items: start;
}

/* ── Hero copy ───────────────────────────────────────────────────────────── */

.contact__title {
    font-size: clamp(30px, 4.8vw, 48px);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.03em;
    margin: 14px 0 0;
    max-width: 14ch;
    color: var(--ink);
}

.contact__lede {
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 18px 0 0;
    max-width: 100%;
}

/* ── Contact details ─────────────────────────────────────────────────────── */

/* A <dl> of label/value pairs, each pair wrapped in a row div so the 1px grid
   gap can show the container background through as a hairline rule. */
.contact__rows {
    display: grid;
    gap: 1px;
    margin: 34px 0 0;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.contact__row {
    padding: 20px 24px;
    background: var(--surface-card);
}

.contact__row-label {
    font-size: 12.5px;
    letter-spacing: 0.14em;
    font-weight: 600;
    color: var(--ink-muted);
}

/* <dd> ships with a 40px inline-start margin; reset it. */
.contact__row-value {
    font-size: 16.5px;
    line-height: 1.45;
    color: var(--ink-body);
    margin: 6px 0 0;
}

/* ── Enquiry panel ───────────────────────────────────────────────────────── */

.contact__panel {
    padding: clamp(24px, 3vw, 36px);
    border-radius: var(--radius-2xl);
    border-color: rgb(var(--ink-rgb) / 0.1);
    box-shadow: 0 2px 4px rgb(var(--ink-rgb) / 0.04), 0 12px 32px rgb(var(--ink-rgb) / 0.07);
}

.contact__form-title {
    font-size: 24px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 22px;
}

/* The brief and the budget group run the full width of .form-grid--2. */
.contact__field--wide {
    grid-column: 1 / -1;
}

.contact__submit {
    margin-top: 24px;
    padding: 15px;
    border-radius: var(--radius-lg);
    font-size: 16.5px;
}

.contact__note {
    font-size: 14px;
    color: var(--ink-subtle);
    margin: 14px 0 0;
    text-align: center;
}

/* ── Budget chips ────────────────────────────────────────────────────────── */

/* The original was five inert <div>s with a no-op click handler. These are a
   real radio group, so the choice is submitted and reachable by keyboard. */
.contact__budget {
    border: 0;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
}

.contact__budget-legend {
    padding: 0;
    margin-bottom: 9px;
}

.contact__chip {
    position: relative;
    display: inline-flex;
}

/* Same technique as .file-field__input: the control stays in the accessibility
   tree and keeps its focus and checked states, the <label> does the drawing. */
.contact__chip-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.contact__chip-input:checked + .chip {
    border-color: transparent;
    background: var(--gradient-brand);
    color: #fff;
}

/* The input itself is invisible, so its focus ring has to land on the label. */
.contact__chip-input:focus-visible + .chip {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ── Success panel ───────────────────────────────────────────────────────── */

.contact__success {
    justify-items: center;
    text-align: center;
    padding-block: 36px;
}

.contact__success-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 10px;
    border-radius: 15px;
    background: linear-gradient(140deg, var(--brand), var(--accent));
    font-size: 25px;
    color: #fff;
}

/* ═══ director.css ═══════════════════════════════════════════ */
/* Director portfolio: /about/<slug>. Header, experience snapshot, sector
   exposure, career progression, the delivery register table and the selected
   work cards. */

/* ── Header ──────────────────────────────────────────────────────────────── */

.director__head {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: clamp(28px, 3.5vw, 44px) var(--page-gutter) clamp(30px, 4vw, 48px);
}

.director__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    color: var(--ink-muted);
}

/* The crumbs were clickable spans; they are links now, so the link colour
   from base.css has to be turned back off. */
.director__crumb {
    color: var(--ink-muted);
    transition: color 0.18s;
}

.director__crumb:hover {
    color: var(--ink);
}

.director__crumb-sep {
    color: var(--ink-subtle);
}

.director__crumb-here {
    color: var(--ink-secondary);
}

.director__title {
    font-size: clamp(32px, 5.4vw, 56px);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.03em;
    margin: 20px 0 0;
    max-width: 20ch;
    color: var(--ink);
}

.director__role {
    font-size: 16.5px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--accent-text);
    margin-top: 10px;
}

.director__lead {
    font-size: 17.5px;
    line-height: 1.62;
    color: var(--ink-soft);
    max-width: 100%;
    margin: 16px 0 0;
}

/* The LinkedIn URL sits in src/data/directors.js and the original template
   never rendered it. It is the only outbound link on the page, so it keeps
   the default link colour instead of the muted crumb treatment. */
.director__profile {
    font-size: 15.5px;
    margin-top: 14px;
}

.director__profile-link {
    font-weight: 600;
}

/* 2026-09-24: this was a plain text link; it is a gradient pill now. The
   colour, background and hover all come from .btn--primary — only the
   spacing and size are set here. */
.director__back {
    margin-top: 24px;
    padding: 13px 24px;
    font-size: 15px;
}

.director__back--foot {
    margin-top: 36px;
}

/* ── Section scaffolding ─────────────────────────────────────────────────── */

/* Tighter than .section: these run top-padding only so the five blocks read
   as one column, with the bottom space paid once at the end. */
.director__section {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: clamp(40px, 5vw, 68px) var(--page-gutter) 0;
}

.director__section--last {
    padding-bottom: clamp(50px, 6vw, 90px);
}

.director__band-inner {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: clamp(36px, 5vw, 60px) var(--page-gutter);
}

/* The label is the only heading each section has, so it is a real <h2>. That
   brings the display face with it; the original set these in the body face,
   so it is put back. Same for the card-level EXPOSURE label below. */
.director__eyebrow {
    font-family: var(--font-sans);
}

/* ── Experience snapshot ─────────────────────────────────────────────────── */

/* One background behind a 1px grid gap draws every divider, so they never
   double up and the corners stay clipped by the container radius. */
.director__snapshot {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1px;
    margin-top: 22px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.director__snap {
    padding: 26px 24px;
    background: var(--surface-card);
}

.director__snap-value {
    font-family: var(--font-display);
    font-size: clamp(21px, 2.5vw, 29px);
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.director__snap-label {
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--ink-muted);
    margin-top: 8px;
}

/* ── Sector exposure ─────────────────────────────────────────────────────── */

.director__sectors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 22px;
}

/* No badge above it, unlike the cards .card__title was written for. */
.director__sector-title {
    margin-top: 0;
}

/* ── Career progression ──────────────────────────────────────────────────── */

.director__career {
    display: grid;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--border);
}

.director__career-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px 24px;
    padding: 18px 0;
    border-bottom: 1px solid rgb(var(--ink-rgb) / 0.1);
}

.director__career-when {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--accent-text);
}

.director__career-main {
    grid-column: span 2;
}

.director__career-role {
    display: block;
    font-family: var(--font-display);
    font-size: 17px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--ink);
}

.director__career-org {
    display: block;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-muted);
    margin-top: 4px;
}

/* ── Delivery register ───────────────────────────────────────────────────── */

.director__register {
    margin-top: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--surface-card);
}

.director__table {
    min-width: 720px;
    font-size: 15px;
}

.director__table thead tr {
    background: var(--surface-sunken);
}

.director__table th,
.director__table td {
    padding: 14px 18px;
}

.director__table th {
    font-family: var(--font-display);
}

.director__reg-no {
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--accent-text);
    margin-right: 8px;
}

.director__reg-name {
    font-weight: 600;
    color: var(--ink);
}

/* Beats .data-table td, which paints body ink. */
.director__table .director__reg-cell {
    color: var(--ink-muted);
}

.director__table .director__reg-stack {
    font-size: 14.5px;
}

/* ── Selected work in detail ─────────────────────────────────────────────── */

.director__detail {
    margin-top: 22px;
}

.director__detail-no {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--accent-text);
}

.director__detail-title {
    margin-top: 12px;
}

.director__detail-meta {
    font-size: 14px;
    line-height: 1.45;
    color: var(--ink-muted);
    margin-top: 6px;
}

.director__detail-body {
    color: var(--ink-secondary);
    margin-top: 14px;
}

.director__exposure-label {
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0.15em;
    font-weight: 600;
    color: var(--ink-subtle);
    margin: 20px 0 0;
}

.director__exposure {
    display: grid;
    gap: 8px;
    margin: 11px 0 0;
    padding: 0;
    list-style: none;
}

/* 5px dot plus the original 11px gap, paid as padding on the item. */
.director__exposure-item {
    position: relative;
    padding-left: 16px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-muted);
}

.director__exposure-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand);
}

/* ═══ home.css ═══════════════════════════════════════════ */
/* Home page: hero, process rail, engineering panel, terminal, stack marquee,
   sectors and the closing CTA band. */

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(86vh, 860px);
    overflow: hidden;
    /* Always dark, in both themes — a photo sits behind it. */
    background: var(--surface-night-deep);
}

.hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 62%;
}

.hero__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        rgb(2 3 9 / 0.96) 0%,
        rgb(3 4 12 / 0.9) 42%,
        rgb(4 6 18 / 0.7) 100%
    );
}

.hero__inner {
    position: relative;
    width: 100%;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: clamp(48px, 6vw, 104px) var(--page-gutter) clamp(54px, 7vw, 116px);
}

.hero__sphere {
    position: absolute;
    top: 50%;
    right: -8vw;
    transform: translateY(-50%);
    width: min(660px, 62vw);
    height: min(660px, 62vw);
    pointer-events: none;
    mask-image: radial-gradient(circle at 60% 50%, #000 62%, transparent 88%);
    -webkit-mask-image: radial-gradient(circle at 60% 50%, #000 62%, transparent 88%);
}

.hero__content {
    position: relative;
    max-width: 100%;
}

.hero__pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 8px;
    border: 1px solid rgb(255 255 255 / 0.22);
    border-radius: var(--radius-pill);
    width: fit-content;
    background: rgb(255 255 255 / 0.07);
    animation: gn-rise 0.6s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.hero__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--status-ok);
    margin-left: 6px;
    animation: gn-pulse 3.6s ease-in-out infinite;
}

.hero__pill-text {
    font-size: 12px;
    letter-spacing: 0.09em;
    color: rgb(255 255 255 / 0.78);
    font-weight: 500;
}

.hero__pill-sep {
    width: 1px;
    height: 14px;
    background: rgb(255 255 255 / 0.28);
}

.hero__ticker {
    font-size: 12px;
    letter-spacing: 0.09em;
    color: var(--tint-violet);
    font-weight: 600;
    min-width: 15ch;
    transition: opacity 0.3s;
}

.hero__title {
    font-size: clamp(36px, 6.6vw, 68px);
    line-height: 1.04;
    font-weight: 600;
    letter-spacing: -0.032em;
    margin: 26px 0 0;
    max-width: 17ch;
    color: #fff;
    animation: gn-rise 0.7s cubic-bezier(0.22, 0.8, 0.3, 1) 0.08s both;
}

.hero__title-accent {
    background: linear-gradient(100deg, #6fb6ff, #8ecbff 35%, #cba8ff 50%, #6fb6ff 70%, #b190ff);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gn-shimmer 16s linear infinite;
}

.hero__lede {
    font-size: clamp(17.5px, 1.6vw, 21px);
    line-height: 1.62;
    color: rgb(255 255 255 / 0.82);
    max-width: 100%;
    margin: 24px 0 0;
    animation: gn-rise 0.7s cubic-bezier(0.22, 0.8, 0.3, 1) 0.18s both;
}

.hero__actions {
    display: flex;
    gap: 12px;
    margin-top: 38px;
    flex-wrap: wrap;
    animation: gn-rise 0.7s cubic-bezier(0.22, 0.8, 0.3, 1) 0.28s both;
}

.hero__cta {
    padding: 15px 28px;
    border-radius: var(--radius-lg);
    font-size: 16px;
}

/* ── Process ─────────────────────────────────────────────────────────────── */

.process {
    position: relative;
    margin-top: 44px;
    /* Lets the rail rule below react to the width of this block rather than
       the viewport, so the page gutter is not part of the sum. */
    container-type: inline-size;
}

.process__track,
.process__rail {
    position: absolute;
    top: 23px;
    height: 2px;
}

.process__track {
    left: 24px;
    right: 24px;
    background: var(--border);
}

.process__rail {
    left: 24px;
    width: 0%;
    max-width: calc(100% - 48px);
    background: linear-gradient(90deg, var(--brand), var(--accent));
    transition: width 0.25s linear;
}

/* The rail is a horizontal line through the four dots, so it only connects
   anything while all four steps sit on ONE row. The grid is
   repeat(auto-fit, minmax(200px, 1fr)) with a 26px gap, so that needs
   4 x 200 + 3 x 26 = 878px of width here. Below it the steps wrap to two rows
   (or four on a phone) and the line floats across rows it never touches -
   which is exactly what it did before this rule.

   Keep the 878px in step with --process-col-min and the grid gap if either
   changes. Hidden by default so a browser without container query support
   loses the decoration rather than showing a broken line. */
.process__track,
.process__rail {
    display: none;
}

@container (min-width: 878px) {
    .process__track,
    .process__rail {
        display: block;
    }
}

.process__steps {
    position: relative;
    gap: 26px;
}

.process__dot {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--surface-card);
    box-shadow: 0 2px 6px rgb(var(--ink-rgb) / 0.1), 0 8px 20px rgb(var(--ink-rgb) / 0.09);
    display: flex;
    align-items: center;
    justify-content: center;
}

.process__dot-inner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--brand);
}

.process__step .card__body {
    margin-top: 9px;
}

/* ── Engineering ─────────────────────────────────────────────────────────── */

.engineering {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(30px, 4vw, 60px);
    align-items: center;
    padding-block: clamp(46px, 6vw, 76px);
}

.engineering__lede {
    line-height: 1.6;
    margin-top: 16px;
    max-width: none;
}

.guarantees {
    display: grid;
    gap: 12px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.guarantees__item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-strong);
}

.guarantees__check {
    flex-shrink: 0;
    margin-top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 5px;
    background: linear-gradient(140deg, var(--brand), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #fff;
}

/* ── Terminal ────────────────────────────────────────────────────────────── */

.terminal {
    border: 1px solid rgb(var(--ink-rgb) / 0.1);
    border-radius: var(--radius-xl);
    background: var(--surface-card);
    box-shadow: 0 2px 4px rgb(var(--ink-rgb) / 0.04), 0 12px 32px rgb(var(--ink-rgb) / 0.08);
    overflow: hidden;
}

.terminal__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 18px;
    border-bottom: 1px solid rgb(var(--ink-rgb) / 0.1);
}

.terminal__light {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* Traffic-light colours are literal by nature — they are macOS chrome, not
   part of the palette, and do not change with the theme. */
.terminal__light--red { background: #ff5f57; }
.terminal__light--amber { background: #febc2e; }
.terminal__light--green { background: #28c840; }

.terminal__file {
    margin-left: 10px;
    font-size: 13.5px;
    color: var(--ink-subtle);
    font-family: var(--font-mono);
}

.terminal__body {
    padding: 20px;
    font-family: var(--font-mono);
    font-size: 13.5px;
    line-height: 1.95;
    color: var(--ink-subtle);
}

.terminal__line {
    transition: opacity 0.25s;
}

.terminal__n {
    color: var(--ink-faint);
    margin-right: 16px;
}

.terminal__k {
    color: var(--accent-text);
}

.terminal__v {
    color: var(--ink-strong);
}

.terminal__prompt {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.terminal__prompt .terminal__n {
    margin-right: 8px;
}

.terminal__caret {
    display: inline-block;
    width: 8px;
    height: 14px;
    background: var(--accent-text);
    animation: gn-blink 1.4s step-end infinite;
}

/* ── Stack marquee ───────────────────────────────────────────────────────── */

.marquee-band {
    position: relative;
    background: var(--surface-night);
    padding: clamp(40px, 6vw, 64px) 0;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-band__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.85;
    pointer-events: none;
}

.marquee {
    position: relative;
    display: flex;
    width: max-content;
    will-change: transform;
}

.marquee--second {
    margin-top: 14px;
}

.marquee__item {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    color: rgb(255 255 255 / 0.5);
    padding: 0 30px;
    white-space: nowrap;
}

/* ── Sectors ─────────────────────────────────────────────────────────────── */

.sectors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(28px, 4vw, 56px);
    align-items: stretch;
}

.sectors__title {
    margin-bottom: 26px;
    max-width: 22ch;
}

.sectors__list {
    display: grid;
    gap: 14px;
}

.sectors__item-title {
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.22;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}

.sectors__photo {
    position: relative;
    min-height: 340px;
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.sectors__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}

/* ── Closing CTA band ────────────────────────────────────────────────────── */

.cta-band {
    position: relative;
    overflow: hidden;
    background: var(--surface-inverse);
}

.cta-band__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.cta-band__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgb(var(--scrim-rgb) / 0.88), rgb(var(--scrim-violet-rgb) / 0.82));
}

.cta-band__inner {
    position: relative;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: clamp(56px, 7vw, 96px) var(--page-gutter);
    text-align: center;
}

.cta-band__title {
    font-size: clamp(30px, 4.8vw, 48px);
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -0.03em;
    margin: 0;
    color: #fff;
}

.cta-band__lede {
    font-size: 17.5px;
    line-height: 1.6;
    color: rgb(255 255 255 / 0.78);
    margin: 16px auto 0;
    max-width: 100%;
}

.cta-band__btn {
    margin-top: 30px;
    padding: 16px 34px;
    border-radius: var(--radius-lg);
    font-size: 16.5px;
}

/* ── 404 ─────────────────────────────────────────────────────────────────── */

.not-found {
    text-align: center;
    padding-block: clamp(80px, 12vw, 160px);
}

.not-found .section-head,
.not-found .section-lede {
    margin-inline: auto;
}

.not-found__actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 32px;
}

/* ═══ insights.css ═══════════════════════════════════════════ */
/* Insights page: the hero head and the grid of placeholder post cards. */

/* ── Hero ────────────────────────────────────────────────────────────────── */

/* Not .section: the hero and the feed below it share one vertical rhythm, so
   the hero carries a shorter bottom pad and the feed carries none on top. */
.insights-hero {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: clamp(44px, 6vw, 76px) var(--page-gutter) clamp(28px, 4vw, 44px);
}

.insights-hero__title {
    font-family: var(--font-display);
    font-size: clamp(32px, 5.4vw, 56px);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.03em;
    margin: 14px 0 0;
    color: var(--ink);
    max-width: 16ch;
}

.insights-hero__lede {
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 100%;
    margin: 18px 0 0;
}

/* ── Feed ────────────────────────────────────────────────────────────────── */

.insights-feed {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 var(--page-gutter) clamp(46px, 6vw, 80px);
}

/* The feed has no visible heading in the design, but it needs one so the card
   titles are h3s under an h2 rather than jumping a level from the h1. */
.insights-feed__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
}

/* ── Post card ───────────────────────────────────────────────────────────── */

/* .card supplies the border, surface and shadow; the gradient block runs to
   the card edge, so the padding moves down to the body. */
.insights-card {
    padding: 0;
    overflow: hidden;
    transition: border-color 0.2s;
}

.insights-card:hover {
    border-color: var(--accent-glow);
}

/* Stands in for the article image these placeholders do not have. The stops
   are the invariant brand/accent pair, so they are literal in both themes. */
.insights-card__art {
    height: 160px;
    border-bottom: 1px solid var(--hairline);
    background: linear-gradient(150deg, rgb(31 123 255 / 0.14), rgb(139 47 224 / 0.16));
}

.insights-card__body {
    padding: 22px 24px;
}

.insights-card__cat {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--accent-text);
    margin: 0;
}

.insights-card__title {
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1.28;
    font-weight: 600;
    color: var(--ink);
    margin: 10px 0 0;
    text-wrap: pretty;
}

.insights-card__meta {
    font-size: 14px;
    color: var(--ink-muted);
    margin: 14px 0 0;
}

/* ═══ legal.css ═══════════════════════════════════════════ */
/* Terms of Use and Privacy Policy. One stylesheet for both — they share a
   renderer (pages/legal.js) and differ only in content. */

.legal {
    /* A legal document is read line by line, so it keeps a reading measure
       rather than following the full-width treatment used elsewhere. */
    max-width: 78ch;
}

.legal__title {
    font-size: clamp(30px, 4.6vw, 46px);
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -0.028em;
    margin: 12px 0 0;
    color: var(--ink);
}

.legal__lede {
    font-size: 17.5px;
    line-height: 1.62;
    color: var(--ink-muted);
    margin: 14px 0 0;
}

.legal__updated {
    font-size: 13.5px;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
    margin: 14px 0 0;
}

/* The draft banner. Amber rather than the brand palette: it is a caution, and
   it should not look like part of the page's normal furniture. */
.legal__notice {
    margin-top: 28px;
    padding: 18px 20px;
    border-radius: var(--radius-xl);
    border: 1px solid rgb(245 166 35 / 0.45);
    background: rgb(245 166 35 / 0.1);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-body);
}

.legal__notice-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}

.legal__body {
    margin-top: 40px;
    display: grid;
    gap: 30px;
}

.legal__heading {
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 10px;
    /* Clears the sticky header when a numbered clause is linked to directly. */
    scroll-margin-top: calc(var(--header-height) + 20px);
}

.legal__para {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-body);
}

.legal__para + .legal__para {
    margin-top: 12px;
}

.legal__list {
    margin: 12px 0 0;
    padding-left: 22px;
    display: grid;
    gap: 8px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-body);
}

/* ═══ role.css ═══════════════════════════════════════════ */
/* Single role page: back link, role header, the description and requirement
   lists, and the apply card with its hidden success panel. */

/* ── Layout ──────────────────────────────────────────────────────────────── */

/* .section's own vertical padding is a little taller than this page used, so
   the two clamps are restated exactly as the original wrote them. The gutter
   clamp(18px, 4vw, 32px) is --page-gutter unchanged. */
.role {
    padding: clamp(34px, 4vw, 56px) var(--page-gutter) clamp(40px, 5vw, 72px);
}

.role__back {
    display: block;
    width: fit-content;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-subtle);
    transition: color 0.18s;
}

.role__back:hover {
    color: var(--ink);
}

/* .grid--auto-320 supplies the columns; only the gutter, alignment and offset
   differ from the shared grid. */
.role__layout {
    gap: clamp(30px, 4vw, 60px);
    align-items: start;
    margin-top: 26px;
}

/* ── Role header ─────────────────────────────────────────────────────────── */

/* Blue, square-cornered and bordered — not the violet pill .tag. --brand is
   invariant between themes, so its channels are literal here exactly as
   .badge-num writes them in components.css. */
.role__type {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 7px;
    border: 1px solid rgb(31 123 255 / 0.2);
    background: rgb(31 123 255 / 0.09);
    font-size: 13.5px;
    color: var(--brand-text);
}

.role__title {
    font-size: clamp(30px, 4.8vw, 48px);
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -0.03em;
    margin: 16px 0 0;
    color: var(--ink);
}

.role__detail {
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 16px 0 0;
    max-width: 100%;
}

.role__section-title {
    font-size: 21px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--ink);
    margin: 32px 0 0;
}

/* ── Description and requirements ────────────────────────────────────────── */

/* Both lists share their metrics; only the marker differs — a plain brand dot
   for the description, a gradient tick for the requirements. Neither matches
   .tick-list, whose marker is one dot at one size. */
.role__bullets,
.role__ticks {
    display: grid;
    gap: 11px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.role__bullet,
.role__tick {
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-secondary);
}

.role__bullet {
    position: relative;
    padding-left: 18px;
}

.role__bullet::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
}

.role__tick {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.role__tick-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 5px;
    width: 16px;
    height: 16px;
    border-radius: 5px;
    background: linear-gradient(140deg, var(--brand), var(--accent));
    font-size: 10px;
    color: #fff;
}

/* ── Apply card ──────────────────────────────────────────────────────────── */

/* .panel supplies the surface and border; the original card was slightly
   rounder, slightly tighter and carried a lift. */
.role__apply {
    padding: clamp(24px, 3vw, 32px);
    border-radius: var(--radius-2xl);
    box-shadow: 0 2px 4px rgb(var(--ink-rgb) / 0.04), 0 12px 32px rgb(var(--ink-rgb) / 0.07);
}

.role__apply-title {
    font-size: 23px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}

.role__apply-lede {
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--ink-subtle);
    margin: 8px 0 22px;
}

.role__fields {
    gap: 14px;
}

/* The shared file button is a compact left-aligned control; here it is the
   large dashed drop zone the original drew. */
.role__file-button {
    padding: 20px;
    text-align: center;
    background: rgb(var(--ink-rgb) / 0.03);
}

.role__file-name {
    display: block;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--ink-secondary);
}

.role__file-hint {
    display: block;
    margin-top: 4px;
    font-size: 13.5px;
    color: var(--ink-subtle);
}

.role__submit {
    margin-top: 24px;
    padding: 15px;
    border-radius: var(--radius-lg);
    font-size: 16.5px;
}

/* ── Success panel ───────────────────────────────────────────────────────── */

/* Hidden until js/forms.js swaps it in for the form. base.css already carries
   the [hidden] rule, so there is no display override here. */
.role__success {
    justify-items: center;
    text-align: center;
}

.role__success-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 15px;
    background: linear-gradient(140deg, var(--brand), var(--accent));
    font-size: 25px;
    color: #fff;
}

/* ═══ services.css ═══════════════════════════════════════════ */
/* Services page: hero, the four practice blocks and the engagement models. */

/* ── Hero ────────────────────────────────────────────────────────────────── */

/* Not .section — the original hero has its own vertical rhythm, tighter at
   the bottom because the photo carries on below it. */
.services-hero {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: clamp(44px, 6vw, 76px) var(--page-gutter) clamp(32px, 4vw, 48px);
}

.services-hero__title {
    font-size: clamp(32px, 5.4vw, 56px);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.03em;
    margin: 14px 0 0;
    max-width: 20ch;
    color: var(--ink);
}

.services-hero__lede {
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 100%;
    margin: 18px 0 0;
}

.services-hero__photo {
    position: relative;
    margin-top: 36px;
    width: 100%;
    aspect-ratio: 1100 / 734;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    border: 1px solid rgb(var(--ink-rgb) / 0.1);
}

.services-hero__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
}

/* ── Practice blocks ─────────────────────────────────────────────────────── */

.services-detail {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 var(--page-gutter) clamp(46px, 6vw, 76px);
}

/* Title and lede on the left, the item grid and callout on the right; they
   stack once the right column can no longer hold 290px. */
.practice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: clamp(24px, 4vw, 52px);
    padding: clamp(28px, 4vw, 44px) 0;
    border-top: 1px solid rgb(var(--ink-rgb) / 0.14);
}

.practice__title {
    font-size: clamp(23px, 3vw, 31px);
    line-height: 1.18;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
}

.practice__lead {
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-subtle);
    margin: 12px 0 0;
}

/* A real list now — the original was a grid of plain <div>s. */
.practice__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.practice__item {
    display: flex;
    gap: 13px;
    padding: 16px 18px;
    border-radius: 11px;
    border: 1px solid var(--border-strong);
    background: transparent;
    transition: border-color 0.2s;
}

/* Was style-hover on the element. */
.practice__item:hover {
    border-color: rgb(var(--accent-rgb) / 0.45);
}

.practice__no {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--accent-text);
    padding-top: 2px;
}

.practice__item-name {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--ink-body);
    margin: 0;
}

.practice__item-desc {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink-subtle);
    margin: 5px 0 0;
}

/* The practice block is the deep-link target for the footer's service links
   (/services#ai-agents-automation). Clear the sticky header when landing. */
.practice {
    scroll-margin-top: calc(var(--header-height) + 20px);
}

/* ── Engagement models ───────────────────────────────────────────────────── */

/* Sits on .band__inner, which already supplies the page width and gutter. */
.models {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(28px, 4vw, 56px);
    align-items: stretch;
    padding-block: clamp(44px, 6vw, 76px);
}

.models__title {
    margin-bottom: 26px;
}

.models__list {
    display: grid;
    gap: 14px;
}

.models__card {
    padding: 22px 24px;
}

.models__card-title {
    font-size: 20px;
    line-height: 1.22;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}

.models__best {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--accent-text);
    margin: 6px 0 0;
}

.models__body {
    margin-top: 12px;
}

.models__photo {
    position: relative;
    min-height: 340px;
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.models__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}

/* ═══ work.css ═══════════════════════════════════════════ */
/* Work page: the filter hero and the project card grid. Every card thumbnail
   is painted into its <canvas data-kind> by js/canvas/work-thumbs.js, so the
   rules here only have to frame it. */

/* ── Hero ────────────────────────────────────────────────────────────────── */

/* Not .section: the original opens tighter at the bottom because the chip row
   has to sit close to the grid it filters. */
.work-hero {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: clamp(44px, 6vw, 76px) var(--page-gutter) clamp(24px, 3vw, 36px);
}

.work-hero__title {
    font-size: clamp(32px, 5.4vw, 56px);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.03em;
    margin: 14px 0 0;
    max-width: 16ch;
    color: var(--ink);
}

.work-hero__lede {
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 100%;
    margin: 18px 0 0;
}

.work-hero__filters {
    margin-top: 30px;
}

/* ── Results ─────────────────────────────────────────────────────────────── */

.work-results {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 var(--page-gutter) clamp(46px, 6vw, 80px);
}

/* Wider than any shared --auto-* track: below 330px a 16/9 thumbnail loses
   the detail the painters draw into it. */
.work-results__grid {
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

/* ── Project card ────────────────────────────────────────────────────────── */

/* The thumbnail is flush to the card edge, so .card's padding moves inside to
   .work-card__body and the corners have to clip. */
.work-card {
    padding: 0;
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

/* The gradient was a second, absolutely positioned div in the original. The
   canvas paints over it, so it is this element's own background now. */
.work-card__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    border-bottom: 1px solid rgb(var(--ink-rgb) / 0.1);
    background: linear-gradient(160deg, var(--surface-raised), var(--surface-tint));
}

.work-card__canvas {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.work-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 26px 26px 24px;
}

/* Brand-blue, squarer and quieter than the shared accent .tag. --brand never
   changes between themes, so its alphas are written literally — same as
   .badge-num in components.css. */
.work-card__tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid rgb(31 123 255 / 0.2);
    background: rgb(31 123 255 / 0.09);
    color: var(--brand-text);
    font-size: 11.5px;
    letter-spacing: 0.05em;
}

.work-card__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
}

/* Fixed, not .stat__value's clamp: two metrics share one card row. */
.work-card__metric-value {
    font-size: 20px;
    line-height: 1.2;
}

.work-card__metric-label {
    line-height: 1.4;
    margin-top: 3px;
}