/* ===========================================================================
   Rainbow Coders - public site styles
   ---------------------------------------------------------------------------
   Structure:
     1. Tokens        - colours, spacing, radii, type
     2. Reset & base  - the small amount of normalising actually needed
     3. Layout        - container, sections, rules
     4. Components    - buttons, cards, forms, members, blocks
     5. Utilities     - visually-hidden and friends
     6. Responsive    - one breakpoint set, mobile last

   No build step. Custom properties do the work a preprocessor usually would,
   so this file can be edited directly on a server if it ever needs to be.
   ========================================================================= */

/* --- 1. Tokens --------------------------------------------------------- */
:root {
    /* The flag, which is the whole brand. */
    --red: #E40303;
    --orange: #FF8C00;
    --yellow: #FFED00;
    --green: #008026;
    --blue: #004DFF;
    --violet: #750787;

    --ink: #0f172a;
    --ink-soft: #334155;
    --muted: #64748b;
    --surface: #ffffff;
    --soft: #f8fafc;
    --softer: #f1f5f9;
    --line: #e2e8f0;

    --success: #047857;
    --warning: #b45309;
    --danger: #b91c1c;

    --radius: 28px;
    --radius-sm: 14px;
    --radius-xs: 10px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow: 0 12px 30px -18px rgba(15, 23, 42, .35);

    --space: 20px;
    --section-y: clamp(48px, 7vw, 88px);

    --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* --- 2. Reset & base --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

/* Anyone who has asked their system to reduce motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--soft);
    -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -0.015em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

/* A visible focus ring on everything. Never remove this without replacing it. */
:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute; left: -999px; top: 12px; z-index: 100;
    background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius-xs);
    text-decoration: none;
}
.skip-link:focus { left: 12px; }

/* --- 3. Layout --------------------------------------------------------- */
.container { width: min(1120px, calc(100% - 32px)); margin-inline: auto; }
.width-narrow { max-width: 760px; margin-inline: auto; }

.section { padding-block: var(--section-y); }
.section-soft { background: var(--softer); }
.section-card > .container > * { background: var(--surface); }

.rainbow-rule {
    height: 6px;
    background: linear-gradient(90deg,
        var(--red) 0 16.6%, var(--orange) 16.6% 33.3%, var(--yellow) 33.3% 50%,
        var(--green) 50% 66.6%, var(--blue) 66.6% 83.3%, var(--violet) 83.3% 100%);
}

/* --- 4. Components ----------------------------------------------------- */

/* Header */
.site-header {
    position: relative;
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
}
/* Desktop: logo on the left, the links inline beside it, the action on the
   right. The hamburger is not present at this width, because there is room
   for the links themselves and hiding them behind a control would be making
   the visitor work for no reason. */
.nav {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 0;
}
.site-header .container { position: relative; }

/* The markup order is menu control, logo, action, links, because that is the
   order they matter in on a phone and it is the order a screen reader should
   meet them in. On desktop the eye wants logo, links, action instead, so the
   three are reordered visually rather than being moved in the document. */
.nav-brand  { order: 1; flex-shrink: 0; }
.nav-links  { order: 2; flex: 1; }
.nav-action { order: 3; margin-left: auto; white-space: nowrap; flex-shrink: 0; }
.nav-brand { display: flex; align-items: center; text-decoration: none; }

/* Sized to the reference header in index.html. The aspect ratio matches the
   'full' viewBox (600 / 216 = 2.78, and 278 / 100 = 2.78), so stating both
   dimensions reserves the space before paint without squashing the artwork. */
.rc-logo { display: block; }
.nav-logo { height: 100px; width: 278px; max-width: 100%; flex: 0 1 auto; }
.nav-links { display: flex; align-items: center; gap: 20px; font-weight: 700; font-size: .95rem; }
.nav-link { color: var(--ink-soft); text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent; }
.nav-link:hover, .nav-link:focus-visible { color: var(--ink); }
.nav-link.is-current { color: var(--ink); border-bottom-color: var(--blue); }

.nav-toggle {
    display: none; align-items: center; justify-content: center;
    width: 46px; height: 46px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: #fff; color: var(--ink); cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }

/* Buttons */
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 0 22px;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    font: inherit; font-weight: 800; text-decoration: none; cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.button:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.button:active { transform: translateY(0); }
.button-primary { background: var(--ink); color: #fff; }
.button-secondary { background: #fff; color: var(--ink); border-color: var(--line); }
.button-light { background: #fff; color: var(--ink); }
.button-block { width: 100%; }

/* Tertiary. Low emphasis but unmistakably a control: it keeps button shape
   and picks up a fill and a border on hover, which a bare text link never
   does. This is what replaced the underlined blue links that were doing a
   button's job. */
.button-ghost { background: transparent; color: var(--ink-soft); border-color: transparent; }
.button-ghost:hover { background: var(--softer); border-color: var(--line); color: var(--ink); }

.button-danger { background: var(--danger); color: #fff; }
.button-danger:hover { background: #991b1b; }

/* Dense contexts. Smaller in look only: see the coarse-pointer rule below. */
.button-small { min-height: 38px; padding: 0 16px; font-size: .88rem; border-radius: var(--radius-xs); }

/* An anchor cannot be :disabled, and dropping its href would remove it from
   the tab order without saying why, so aria-disabled carries the meaning
   and this carries the look. */
.button:disabled, .button[aria-disabled="true"] {
    opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none;
}

/* A fingertip is not a mouse pointer. On touch every control reaches the
   44px the accessibility guidance asks for, small variant included. A
   pointer query rather than a width one, because a small laptop does not
   need this and a large tablet does. */
@media (pointer: coarse) {
    .button { min-height: 48px; }
    .button-small { min-height: 44px; }
}

/* Hero */
.hero { padding-top: clamp(40px, 6vw, 72px); }
.hero-grid { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
.hero-split .hero-grid { grid-template-columns: 1.05fr .95fr; }
.hero-centred .hero-grid { grid-template-columns: 1fr; text-align: center; }
.hero-centred .hero-actions { justify-content: center; }
.hero-heading { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 900; }
.hero-body { font-size: 1.08rem; color: var(--ink-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-media img { border-radius: var(--radius); box-shadow: var(--shadow); }

.eyebrow {
    font-family: var(--font-mono); font-size: .78rem; font-weight: 900;
    letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}

.section-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 900; }
.section-intro { color: var(--ink-soft); max-width: 68ch; margin-bottom: 28px; }
.section-cta { margin-top: 28px; }
.page-title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 900; }
.muted { color: var(--muted); }

/* Rich text from the CMS */
.rich-text > :last-child { margin-bottom: 0; }
.rich-text h2 { font-size: 1.45rem; margin-top: 1.6em; }
.rich-text h3 { font-size: 1.2rem; margin-top: 1.4em; }
.rich-text a { color: var(--blue); text-underline-offset: 3px; }
.rich-text blockquote {
    margin: 1.5em 0; padding: 4px 0 4px 20px;
    border-left: 3px solid var(--line); color: var(--ink-soft); font-style: italic;
}
.rich-text code { font-family: var(--font-mono); font-size: .9em; background: var(--softer); padding: 2px 6px; border-radius: 6px; }
.rich-text pre { background: var(--ink); color: #e2e8f0; padding: 18px; border-radius: var(--radius-sm); overflow-x: auto; }
.rich-text table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
.rich-text th, .rich-text td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }

/* Card grid */
.card-grid { display: grid; gap: 20px; }
.card-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }

.card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px 24px; box-shadow: var(--shadow-sm);
    border-top: 4px solid var(--line);
}
.card.accent-red { border-top-color: var(--red); }
.card.accent-orange { border-top-color: var(--orange); }
.card.accent-yellow { border-top-color: var(--yellow); }
.card.accent-green { border-top-color: var(--green); }
.card.accent-blue { border-top-color: var(--blue); }
.card.accent-violet { border-top-color: var(--violet); }
.card-title { font-size: 1.12rem; }
.card-body { color: var(--ink-soft); margin-bottom: 0; }
.card-link { display: inline-block; margin-top: 14px; font-weight: 800; color: var(--blue); text-decoration: none; }

/* Numbered steps */
.process-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); list-style: none; padding: 0; counter-reset: step; }
.process-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px 24px; position: relative;
}
.process-number {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-bottom: 14px;
    border-radius: 999px; background: var(--ink); color: #fff; font-weight: 900;
}
.process-body { color: var(--ink-soft); margin-bottom: 0; }

/* Figures */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; margin: 0; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 22px; }
.stat-value { font-size: 2rem; font-weight: 900; margin: 0; }
.stat-label { color: var(--muted); font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; }

/* Members */
.member-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.filter-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
    background: #fff; color: var(--ink-soft); font-weight: 700; font-size: .9rem;
    text-decoration: none; cursor: pointer;
}
.filter-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.filter-count { font-size: .78em; opacity: .7; }

.member-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
/* The ratio goes on the image, not the wrapper. A child with height:100%
   inside an auto-height parent falls back to its intrinsic height, which is
   why three portraits of different shapes were coming out three different
   heights and pushing the card content out of line. */
.member-photo-wrap { position: relative; background: var(--softer); }
.member-photo {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    height: auto;
    object-fit: cover;
    object-position: center 20%;   /* faces sit slightly above centre */
}
.member-initials {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1;
    font-size: 3rem; font-weight: 900; color: var(--muted);
}
.member-content { padding: 20px 22px 24px; }
.member-name { font-size: 1.1rem; margin-bottom: 2px; }
.member-name a { text-decoration: none; }
.member-name a:hover { text-decoration: underline; }
.member-role { color: var(--muted); font-size: .92rem; margin-bottom: 10px; }
.member-bio { color: var(--ink-soft); font-size: .95rem; }

/* The rating sits on the rainbow rule across the foot of the photo. The rule
   is drawn by the pseudo-element rather than by an extra div, so the markup
   stays about the person rather than about the decoration. Both are absent
   when nobody has set a rating. */
.member-rating {
    position: absolute; left: 0; right: 0; bottom: 0;
    margin: 0;
    padding: 0 16px 10px;
    text-align: right;
    font-size: .9rem; font-weight: 800; font-style: italic;
    color: #fff;
    /* The photo behind this is arbitrary, so the text needs its own contrast
       rather than relying on whatever happens to be in the picture. */
    text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
}
.member-rating::after {
    content: ""; display: block;
    margin-top: 6px; height: 5px; border-radius: 3px;
    background: linear-gradient(90deg,
        var(--red) 0 16.66%, var(--orange) 16.66% 33.33%, var(--yellow) 33.33% 50%,
        var(--green) 50% 66.66%, var(--blue) 66.66% 83.33%, var(--violet) 83.33% 100%);
}

.availability {
    position: absolute; left: 12px; bottom: 12px;
    padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 800;
    background: #fff; border: 1px solid var(--line);
}
.availability-limited { color: var(--warning); }
.availability-unavailable { color: var(--danger); }

.skill-pills { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 12px 0 0; }
.skill-pill {
    padding: 4px 10px; border-radius: 999px; background: var(--softer);
    font-size: .8rem; font-weight: 700; color: var(--ink-soft);
}

/* Member profile page */
.profile-grid { display: grid; grid-template-columns: 300px 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.profile-photo {
    display: block; width: 100%; aspect-ratio: 1; height: auto;
    object-fit: cover; object-position: center 20%;
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.profile-name { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 900; margin-bottom: 4px; }
.profile-role { color: var(--muted); font-size: 1.1rem; }
.profile-meta { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 8px; }
.meta-label { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; margin-right: 8px; }
.profile-actions { margin-top: 24px; }

.skill-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.skill-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.skill-name { font-weight: 800; }
.skill-level { font-size: .8rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--softer); }
.skill-expert { background: #dcfce7; color: var(--success); }
.skill-years { color: var(--muted); font-size: .88rem; margin-left: auto; }

/* Quotes */
.quote-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.quote-card { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.quote-card blockquote { margin: 0 0 16px; font-size: 1.05rem; }
.quote-name { display: block; font-weight: 800; }
.quote-role { color: var(--muted); font-size: .9rem; }

/* FAQ */
.faq-list { display: grid; gap: 10px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 20px; }
.faq-question { font-weight: 800; cursor: pointer; padding: 16px 0; list-style: none; }
.faq-question::-webkit-details-marker { display: none; }
.faq-question::before { content: "+"; display: inline-block; width: 1.2em; font-weight: 900; color: var(--blue); }
.faq-item[open] .faq-question::before { content: "\2212"; }
.faq-answer { padding-bottom: 16px; color: var(--ink-soft); }

/* Image and text */
.media-text { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.media-text.image-left .media-text-copy { order: 2; }

/* No image: one column, centred, and held to a readable measure rather than
   run out to the full container width. */
.media-text-solo { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.media-text-solo .media-text-copy { max-width: 760px; }
.media-text-image img { border-radius: var(--radius); box-shadow: var(--shadow); }

/* Call to action */
.cta-panel {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
    padding: clamp(28px, 4vw, 48px); border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--line);
}
.cta-rainbow { border: 0; border-top: 6px solid transparent;
    border-image: linear-gradient(90deg, var(--red), var(--orange), var(--yellow), var(--green), var(--blue), var(--violet)) 1;
    box-shadow: var(--shadow); }
.cta-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.cta-dark .cta-body { color: #cbd5e1; }

/* The button takes its contrast from the panel it sits on.

   The template asks for `button-light` on every panel, which is right on the
   dark one and invisible on the light ones: white text on a white card, which
   is what the rainbow panel is. Rather than change the markup per page, the
   panel decides.

   Written after the .button rules above so it wins without !important. */
.cta-panel:not(.cta-dark) .cta-button {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.cta-panel:not(.cta-dark) .cta-button:hover { background: #1e293b; border-color: #1e293b; }

/* On the dark panel the white button is correct, and it keeps its dark text. */
.cta-dark .cta-button { background: #fff; color: var(--ink); border-color: #fff; }
.cta-dark .cta-button:hover { background: #e2e8f0; border-color: #e2e8f0; }
.cta-dark :focus-visible { outline-color: var(--yellow); }
.cta-heading { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 900; margin-bottom: 6px; }
.cta-body { margin: 0; color: var(--ink-soft); max-width: 56ch; }

/* Forms */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.field label { font-weight: 700; font-size: .95rem; }
.required { color: var(--danger); }

.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="url"], .field input[type="password"], .field input[type="number"],
.field input[type="date"], .field input[type="search"], .field select, .field textarea {
    width: 100%; padding: 12px 14px; font: inherit; color: var(--ink);
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xs);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); }
.field [aria-invalid="true"] { border-color: var(--danger); }

.field-help { font-size: .85rem; color: var(--muted); margin: 0; }
.field-error { font-size: .85rem; color: var(--danger); font-weight: 700; margin: 0; }
.form-success {
    padding: 16px 20px; border-radius: var(--radius-sm);
    background: #ecfdf5; border: 1px solid #a7f3d0; color: var(--success); font-weight: 700;
}
.form-error-block {
    padding: 16px 20px; border-radius: var(--radius-sm);
    background: #fef2f2; border: 1px solid #fecaca; color: var(--danger);
}

/* The honeypot. Hidden from people without being display:none, which some
   bots specifically look for, and taken out of the accessibility tree. */
.hp-field {
    position: absolute !important; left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
}

/* Auth screens */
.auth-section { padding-block: clamp(40px, 8vw, 96px); }
.auth-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: clamp(28px, 4vw, 44px); box-shadow: var(--shadow);
}
.auth-title { font-size: 1.7rem; font-weight: 900; margin-bottom: 4px; }
.auth-subtitle { color: var(--muted); margin-bottom: 26px; }
.auth-links { margin: 20px 0 0; text-align: center; font-size: .93rem; }
.auth-footnote { margin-top: 20px; text-align: center; color: var(--muted); font-size: .9rem; }

/* Flash messages */
.flash-stack { position: sticky; top: 84px; z-index: 40; width: min(1120px, calc(100% - 32px)); margin: 16px auto 0; display: grid; gap: 8px; }
.flash {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 18px; border-radius: var(--radius-sm); font-weight: 700;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.flash-success { background: #ecfdf5; border-color: #a7f3d0; color: var(--success); }
.flash-error { background: #fef2f2; border-color: #fecaca; color: var(--danger); }
.flash-warning { background: #fffbeb; border-color: #fde68a; color: var(--warning); }
.flash-close { background: none; border: 0; font-size: 1.4rem; line-height: 1; cursor: pointer; color: inherit; }

/* Footer
   Four columns on desktop with hairline rules between them. The rules are
   borders on the columns rather than separate elements, so they vanish by
   themselves as soon as the grid collapses to fewer columns. */
.site-footer { background: var(--ink); color: #cbd5e1; margin-top: var(--section-y); }
.footer-inner {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 40px; padding-block: 56px 40px;
}
/* min-width: 0 because a grid child otherwise refuses to shrink below its
   content and pushes the page sideways. */
.footer-col { min-width: 0; overflow-wrap: anywhere; }
.footer-inner > .footer-col + .footer-col { border-left: 1px solid rgba(255, 255, 255, .12); padding-left: 40px; }

.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
/* The logo is the only thing in this column now, so it takes the column's
   width rather than a fixed size, and the cap stops it from becoming a
   billboard on a very wide screen. The aspect ratio comes from the file, so
   height stays auto in both cases. */
.footer-logo-image, .footer-logo { width: 100%; max-width: 320px; height: auto; }
/* On the dark footer the wordmark goes white while the hexagon keeps its
   own colours, which is the whole reason the logo is inline. */
.footer-logo { --logo-word: #ffffff; --logo-tag: #cbd5e1; --logo-sub: #94a3b8; }
.footer-tagline { margin: 0; max-width: 24ch; font-size: .88rem; line-height: 1.5; color: #94a3b8; }

.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.footer-links a { color: #cbd5e1; text-decoration: none; }
.footer-links a:hover, .footer-links a:focus-visible { color: #fff; }

.footer-company { margin: 0 0 14px; font-weight: 800; color: #fff; max-width: 20ch; }
.footer-address { font-style: normal; display: grid; gap: 10px; font-size: .92rem; }
.footer-contact-row { display: flex; align-items: flex-start; gap: 10px; }
.footer-contact-icon { flex: none; margin-top: 3px; color: #94a3b8; }
.footer-address a { color: #cbd5e1; text-decoration: none; }
.footer-address a:hover, .footer-address a:focus-visible { color: #fff; }

.footer-social { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 22px 0 0; }
.footer-social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 999px;
    background: rgba(255, 255, 255, .08); color: #e2e8f0;
}
.footer-social-link:hover, .footer-social-link:focus-visible { background: rgba(255, 255, 255, .2); color: #fff; }

.footer-bottom {
    padding-bottom: 32px; text-align: center; font-size: .88rem; color: #94a3b8;
    border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 26px;
}
.footer-copyright { margin: 0 0 6px; }
.footer-credit { margin: 0; }
.footer-credit a { color: #cbd5e1; text-decoration: none; }
.footer-credit a:hover, .footer-credit a:focus-visible { color: #fff; text-decoration: underline; }

/* The site-wide focus ring is brand blue, which all but vanishes on the dark
   footer, so the ring switches to the brand yellow here. */
.site-footer :focus-visible { outline-color: var(--yellow); }

/* Error pages */
.error-page { display: flex; flex-direction: column; min-height: 100vh; }
.error-page main { flex: 1; display: flex; align-items: center; }
.error-panel { text-align: center; }
.error-status { font-size: 5rem; font-weight: 900; color: var(--line); margin: 0; line-height: 1; }
.error-heading { font-size: 2rem; font-weight: 900; }
.error-message { color: var(--ink-soft); }
.error-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.error-trace { margin-top: 32px; text-align: left; }
.error-trace pre { overflow-x: auto; background: var(--ink); color: #e2e8f0; padding: 18px; border-radius: var(--radius-sm); font-size: .8rem; }

/* --- 5. Utilities ------------------------------------------------------ */
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- 6. Responsive ----------------------------------------------------- */
@media (max-width: 1000px) {
    .card-grid.columns-4 { grid-template-columns: repeat(2, 1fr); }
    .member-grid, .leaders-grid, .process-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; }
    /* The rules only ever separated columns on one row, so they go the moment
       the grid wraps. */
    .footer-inner > .footer-col + .footer-col { border-left: 0; padding-left: 0; }
}

@media (max-width: 820px) {
    /* Narrow: the control moves to the left, the logo takes the middle, and
       the action stays on the right. Three fixed slots, so the header keeps
       the same shape however long the action's wording is, and the logo is
       genuinely centred rather than merely between two things.

       The outer columns share a minimum width for that reason: if they were
       sized to their contents, a longer button would quietly shove the logo
       off centre. */
    .nav {
        display: grid;
        grid-template-columns: minmax(46px, 1fr) auto minmax(46px, 1fr);
        gap: 12px;
    }
    /* Ordering is the grid's job at this width, so the desktop order values
       are cleared to stop them fighting the placement. */
    .nav-toggle { display: inline-flex; justify-self: start; order: 0; }
    .nav-brand  { justify-self: center; order: 0; }
    .nav-action { justify-self: end; margin-left: 0; order: 0; }

    /* Same step down as the reference header. */
    .nav-logo { height: 76px; width: 211px; }

    /* The links drop out of the bar and open underneath it. */
    .nav-links {
        display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
        grid-column: 1 / -1; flex: none; order: 0;
        flex-direction: column; align-items: stretch; gap: 4px;
        padding: 16px; background: #fff; border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow);
    }
    .nav-links.is-open { display: flex; }
    .nav-links .nav-link { padding: 12px 8px; border-bottom: 0; border-radius: var(--radius-xs); }
    .nav-links .nav-link:hover { background: var(--softer); }
    .nav-links .nav-link.is-current { background: var(--softer); color: var(--ink); }


    .hero-split .hero-grid { grid-template-columns: 1fr; }
    .hero-media { order: -1; }
    .media-text { grid-template-columns: 1fr; }
    .media-text.image-left .media-text-copy { order: 0; }
    .profile-grid { grid-template-columns: 1fr; }
    .profile-photo { max-width: 260px; }
    .card-grid.columns-2, .card-grid.columns-3 { grid-template-columns: 1fr; }
    .member-grid, .leaders-grid, .process-grid { grid-template-columns: 1fr; }
    .cta-panel { flex-direction: column; align-items: flex-start; }
}

/* The footer holds two columns for longer than the rest of the page: four
   short link lists stacked one under another is a lot of scrolling on a
   tablet. It goes to one column at phone width. */
@media (max-width: 640px) {
    .footer-inner { grid-template-columns: 1fr; gap: 28px; padding-block: 44px 32px; }
}

@media print {
    .site-header, .site-footer, .flash-stack, .skip-link { display: none !important; }
    body { background: #fff; }
}

/* ===========================================================================
   Sign-in and password screens
   ---------------------------------------------------------------------------
   A centred card on a soft, faintly tinted background. The two credential
   fields sit side by side from tablet width upwards and stack on a phone.
   ========================================================================= */

.site-plain {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: clamp(20px, 5vw, 56px) 16px;
    /* A very soft wash of the brand, so the page is not a flat white slab. */
    background:
        radial-gradient(1100px 520px at 12% -10%, rgba(228, 3, 3, .05), transparent 60%),
        radial-gradient(1100px 520px at 88% 110%, rgba(0, 77, 255, .05), transparent 60%),
        var(--soft);
}

.login-shell { width: 100%; display: grid; place-items: center; }

/* The public sign-in page sits inside the full site chrome rather than on the
   bare layout, so the shell has to carry the soft wash and the breathing room
   that .site-plain gives the other doors, and fill the space the header and
   footer leave behind. */
.login-shell--framed {
    min-height: min(74vh, 760px);
    padding: clamp(32px, 6vw, 72px) 16px;
    background:
        radial-gradient(1100px 520px at 12% -10%, rgba(228, 3, 3, .05), transparent 60%),
        radial-gradient(1100px 520px at 88% 110%, rgba(0, 77, 255, .05), transparent 60%),
        var(--soft);
}

.login-card {
    width: min(560px, 100%);
    background: var(--surface);
    border-radius: 22px;
    padding: clamp(28px, 5vw, 48px) clamp(22px, 5vw, 52px);
    box-shadow: 0 30px 70px -40px rgba(15, 23, 42, .45), 0 2px 8px rgba(15, 23, 42, .04);
    text-align: center;
}
.login-card--narrow { width: min(460px, 100%); }

.login-logo { margin-bottom: clamp(20px, 4vw, 30px); }
.login-logo .rc-logo { width: min(440px, 100%); height: auto; margin-inline: auto; }

.login-heading { font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 900; margin-bottom: 6px; }
.login-sub { color: var(--muted); margin-bottom: clamp(22px, 4vw, 30px); }

.login-form { display: grid; gap: 18px; text-align: left; }
/* One column, always. Password under username: every browser and password
   manager expects that order, and side by side reads as two unrelated
   questions rather than one sign-in. */
.login-fields { display: grid; grid-template-columns: 1fr; gap: 18px; }

.login-form .field label { font-weight: 700; font-size: .95rem; margin-bottom: 2px; }
.login-form .field input {
    width: 100%; padding: 13px 14px; font: inherit;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xs);
}
.login-form .field input:focus { border-color: var(--blue); }

/* Full width, as the card was specified. It was sitting at 210px hard against
   the right edge, which left the primary action narrower than the two
   secondary buttons underneath it - the hierarchy upside down. */
.login-submit {
    width: 100%;
    min-height: 50px; padding: 0 28px;
    border: 0; border-radius: 12px;
    background: var(--ink); color: #fff;
    font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.login-submit:hover { background: #1e293b; transform: translateY(-1px); box-shadow: var(--shadow); }
.login-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* The two secondary routes off this card. Buttons, not links with a pipe
   between them, and secondary emphasis so neither competes with Sign In.
   Equal basis keeps them the same width whatever the labels say. */
.login-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.login-actions .button { flex: 1 1 0; min-width: 0; font-size: .92rem; }

@media (max-width: 480px) {
    .login-actions .button { flex-basis: 100%; }
}

.login-card .flash-stack { position: static; width: auto; margin: 0 0 18px; text-align: left; }


/* ===========================================================================
   Small-screen guards
   ---------------------------------------------------------------------------
   Nothing may make the page itself scroll sideways; wide content scrolls
   inside its own box instead.
   ========================================================================= */
@media (max-width: 820px) {
    .rich-text table { display: block; overflow-x: auto; }
    .rich-text pre, .code-snippet { overflow-x: auto; }
    .rich-text, .prose, .member-bio, .card-body { overflow-wrap: anywhere; }
}

html, body { max-width: 100%; overflow-x: hidden; }

/* Grid and flex children must be allowed to shrink below their content, or a
   single wide element stretches the whole page sideways. */
.hero-grid > *, .card-grid > *, .member-grid > *, .field-row > *, .field,
.media-text > *, .cta-panel > *, .footer-inner > *, .post-grid > * { min-width: 0; }

/* ===========================================================================
   The hidden attribute must win
   ---------------------------------------------------------------------------
   [hidden] works by setting display:none in the browser's own stylesheet,
   which any author rule that sets display will silently beat. The account
   menu and the notification panel both set display, so both were permanently
   open until this rule was added.

   Worth stating plainly: any component that relies on [hidden] to be closed
   needs this, and it is the kind of fault that looks like a JavaScript bug
   while being entirely a CSS one.
   ========================================================================= */
[hidden] { display: none !important; }

/* Hourly rate input with a currency prefix, used on the join form. */
.rate-input { display: flex; align-items: stretch; }
.rate-prefix {
    display: grid; place-items: center;
    padding: 0 14px;
    background: var(--softer);
    border: 1px solid var(--line); border-right: 0;
    border-radius: var(--radius-xs) 0 0 var(--radius-xs);
    font-weight: 800; color: var(--muted);
}
.rate-input input { border-radius: 0 var(--radius-xs) var(--radius-xs) 0 !important; }

/* Absolutely positioned descendants - .visually-hidden among them - must be
   contained by the box they belong to, or they escape and widen the page. */
.section, .container, .card, .member-card, .post-tile { position: relative; }

/* ===========================================================================
   The blog
   ---------------------------------------------------------------------------
   Tiles on the listing and at the foot of the home page; a narrow, readable
   column for the article itself. The measure on the article body is the point
   of the whole section: long-form text at full container width is unreadable,
   and no amount of typography rescues it.
   ========================================================================= */

.container-narrow { width: min(760px, calc(100% - 32px)); }
.section-tight { padding-block: 0; margin-top: -20px; }

.post-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
/* Grid children must be allowed to shrink below their content width. */
.post-grid > * { min-width: 0; }

.post-tile {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}
.post-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.post-tile-image { display: block; background: var(--softer); }
.post-tile-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

.post-tile-body { display: flex; flex-direction: column; gap: 8px; padding: 20px; flex: 1; }

.post-tile-category {
    margin: 0;
    font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--blue);
}
.post-tile-title { margin: 0; font-size: 1.12rem; font-weight: 800; line-height: 1.35; }
.post-tile-title a { color: var(--ink); text-decoration: none; }
.post-tile-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-tile-excerpt { margin: 0; color: var(--ink-soft); font-size: .95rem; }
/* Pushed to the bottom so tiles of different lengths line their dates up. */
.post-tile-meta { margin: auto 0 0; padding-top: 10px; color: var(--muted); font-size: .84rem; }

/* ---- The article ------------------------------------------------------ */

.post-header { padding-bottom: 0; }

/* ---- Breadcrumb -------------------------------------------------------
   Read as a progress track rather than a row of links: a contained bar, the
   steps already passed shown as quiet pills, the page you are on shown as
   the filled end of the track. The chevrons walk the flag in order, which is
   the only decoration here that is not doing structural work.

   The bar is inline-flex so it hugs its own content instead of ruling a line
   across the page, and it wraps by whole steps on a narrow screen.
   ---------------------------------------------------------------------- */
.breadcrumb { margin: 0 0 22px; }

.breadcrumb-track {
    display: inline-flex; flex-wrap: wrap; align-items: center;
    gap: 2px; max-width: 100%; margin: 0; padding: 5px 8px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    font-size: .84rem; font-weight: 700;
}

.breadcrumb-step { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }

/* Drawn rather than typed: a rotated corner is the same shape at every size
   and never depends on a font having the glyph. */
.breadcrumb-step:not(:last-child)::after {
    content: "";
    width: 6px; height: 6px;
    margin: 0 4px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* The flag, in order, skipping yellow: it is invisible on white and a
   divider nobody can see is not a divider. */
.breadcrumb-step:nth-child(5n+1)::after { color: var(--red); }
.breadcrumb-step:nth-child(5n+2)::after { color: var(--orange); }
.breadcrumb-step:nth-child(5n+3)::after { color: var(--green); }
.breadcrumb-step:nth-child(5n+4)::after { color: var(--blue); }
.breadcrumb-step:nth-child(5n+5)::after { color: var(--violet); }

.breadcrumb-link {
    display: inline-block;
    padding: 5px 12px; border-radius: 999px;
    color: var(--ink-soft); text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.breadcrumb-link:hover { background: var(--softer); color: var(--ink); }

.breadcrumb-current {
    display: inline-block;
    padding: 5px 13px; border-radius: 999px;
    background: var(--ink); color: #fff;
    /* A post title can be long; it wraps inside its own pill rather than
       forcing the bar past the edge of the page. */
    overflow-wrap: anywhere;
}

@media (pointer: coarse) {
    .breadcrumb-link { padding: 10px 14px; }
}

.post-category {
    margin: 0 0 10px;
    font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--blue);
}
.post-title { font-size: clamp(1.8rem, 4vw, 2.7rem); font-weight: 900; line-height: 1.15; margin: 0 0 14px; }
.post-standfirst { font-size: 1.12rem; color: var(--ink-soft); margin: 0 0 18px; }
.post-meta { color: var(--muted); font-size: .9rem; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

.post-image {
    display: block; width: 100%; height: auto;
    margin-top: 28px;
    border-radius: var(--radius-sm);
    background: var(--softer);
}

.post-body-section { padding-top: clamp(28px, 4vw, 44px); }

/* A comfortable measure and generous leading. Everything else in this block
   exists to serve those two things. */
.prose { font-size: 1.05rem; line-height: 1.75; color: var(--ink-soft); }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.25em; }
.prose h2 { color: var(--ink); font-size: 1.5rem; font-weight: 900; margin: 2em 0 .6em; line-height: 1.25; }
.prose h3 { color: var(--ink); font-size: 1.18rem; font-weight: 800; margin: 1.7em 0 .5em; }
.prose ul, .prose ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.prose li { margin-bottom: .5em; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose blockquote {
    margin: 1.6em 0; padding: 4px 0 4px 20px;
    border-left: 4px solid var(--blue);
    color: var(--ink); font-size: 1.08rem;
}

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 36px 0 0; padding: 0; }
.tag {
    padding: 5px 12px;
    background: var(--softer); border: 1px solid var(--line); border-radius: 999px;
    font-size: .82rem; color: var(--ink-soft);
}

/* ---- Paging ----------------------------------------------------------- */

.pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 36px; }
.pagination-status { color: var(--muted); font-size: .9rem; }
.pagination-link {
    padding: 9px 18px;
    border: 1px solid var(--line); border-radius: 999px;
    color: var(--ink); font-weight: 700; font-size: .9rem; text-decoration: none;
}
.pagination-link:hover { background: var(--softer); }

@media (max-width: 640px) {
    /* The action loses its padding before it loses its words, and the logo
       shrinks into whatever is left between the two controls. */
    .nav { gap: 10px; }
    .nav-logo { height: 58px; width: 161px; }
    .nav-action { padding: 0 12px; font-size: .85rem; min-height: 42px; }

    .post-meta { font-size: .84rem; }
    .pagination { flex-direction: column; gap: 10px; }
}

/* --- Profile photo policy ----------------------------------------------- */
/* Deliberately loud: breaching it costs a member their account, so it cannot
   read as ordinary field help. */
.photo-policy {
    margin: 0 0 16px; padding: 14px 18px; border-radius: var(--radius-sm);
    background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid var(--warning);
    color: var(--ink-soft); font-size: .9rem;
}
.photo-policy-title { margin: 0 0 8px; font-weight: 800; color: var(--warning); }
.photo-policy ul { margin: 0; padding-left: 20px; }
.photo-policy li { margin-bottom: 5px; }
.photo-policy li:last-child { margin-bottom: 0; }
.photo-policy p { margin: 0; }
.photo-policy-foot { margin-top: 10px; color: var(--muted); }

/* ===========================================================================
   Flex rows must be allowed to shrink
   ---------------------------------------------------------------------------
   A flex item defaults to `min-width: auto` and so refuses to shrink below
   its own content width. In a space-between row with a nowrap control beside
   it, the text is the only thing that can give, and it collapses into a thin
   column one word wide. `min-width: 0` permits the shrinking, `flex: 1 1 auto`
   makes the text claim the space.
   ========================================================================= */
.flash > :first-child,
.cta-copy {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 640px) {
    .flash { flex-direction: column; align-items: stretch; gap: 10px; }
}

/* ===========================================================================
   The original design, restored
   ---------------------------------------------------------------------------
   These are the rules from the site the CMS was built to reproduce, brought
   across as written rather than reinterpreted. Seeding the content out of
   that page and styling it afresh lost a good deal of what made it work: the
   numbered process cards under their rainbow rule, the accent dots on the
   benefit cards, the dark project types panel with its coloured icon tiles,
   and the founders' photographs with the rating across the rule.

   Anything below that looks arbitrary is arbitrary in the original too. It is
   here because it was designed, not because it was derived.
   ========================================================================= */

/* ---- Section headings -------------------------------------------------- */
/* Spacing for these lives in one place only: the block further down that
   restores the original design. Setting it here as well did not work, because
   that block uses the `margin` shorthand, which resets margin-bottom to zero,
   and it comes later in the file. */
.section-heading { max-width: 840px; margin-bottom: 40px; }
.section-label {
    margin: 0;
    color: #7c3aed;
    font-family: var(--font-mono);
    font-size: .86rem;
    font-weight: 900;
    letter-spacing: .24em;
    text-transform: uppercase;
}
.section-title {
    max-width: 840px;
    /* Longhand on purpose. The shorthand here previously reset the bottom
       margin to zero, so every heading on the site sat directly on top of the
       text beneath it, and a fix written earlier in the file was silently
       overridden. Longhand means a later rule has to be explicit to change
       it. */
    margin-top: 12px;
    margin-bottom: 22px;
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    line-height: 1.03;
    letter-spacing: -0.045em;
}
/* Inside a heading wrapper the wrapper owns the gap to the content below, so
   the title only needs to clear its own intro. */
.section-heading .section-title { margin-bottom: 18px; }

.section-intro {
    margin-top: 0;
    margin-bottom: 0;
    max-width: 760px;
    color: var(--muted);
    line-height: 1.8;
    font-size: 1.03rem;
}

/* ---- The numbered steps ------------------------------------------------- */
.process-section { background: #fff; }

/* The step count is content, not layout - an editor can add or remove one in
   the CMS - so the columns are counted from what is actually there rather than
   hard-coded to five. auto-fit collapses the tracks nothing lands in, so four
   steps become four full-width columns instead of four cards and a hole on the
   right. The 190px floor is what still lets five fit across the container. */
.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    justify-content: center;
    gap: 14px;
}
.process-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: var(--soft);
    padding: 24px;
    min-height: 255px;
}
/* The rainbow rule across the top of every step. */
.process-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: linear-gradient(90deg,
        var(--red), var(--orange), var(--yellow), var(--green), var(--blue), var(--violet));
}
.process-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    border-radius: 16px;
    background: var(--ink);
    color: #fff;
    font-family: var(--font-mono);
    font-weight: 900;
}
.process-card h3 { margin: 18px 0 0; font-size: 1.18rem; letter-spacing: -0.02em; }
.process-card p  { margin: 10px 0 0; color: var(--muted); line-height: 1.7; }

/* ---- For clients / for members / for delivery -------------------------- */
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
.benefit-card {
    border: 1px solid var(--line);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 16px 50px rgba(15, 23, 42, .05);
    padding: 26px;
}
.benefit-card h3 { margin: 0; font-size: 1.32rem; }
/* The coloured dot before the heading, taking its colour from the card. */
.benefit-card h3::before {
    content: "";
    display: inline-block;
    width: 10px; height: 10px;
    margin-right: 10px;
    border-radius: 999px;
    background: var(--accent, var(--blue));
}
.benefit-card p { margin: 12px 0 0; color: var(--muted); line-height: 1.7; }

/* ---- Project types, on the dark panel ---------------------------------- */
.dark-section { background: var(--ink); color: #fff; }
.dark-section .section-label { color: #c4b5fd; }
.dark-section .section-intro { color: #cbd5e1; }
.dark-section .section-title { color: #fff; }

.stack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 42px; }
.stack-card {
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .055);
    padding: 26px;
}
.stack-card h3 { margin: 0; font-size: 1.25rem; }
.stack-card p  { margin: 12px 0 0; color: #cbd5e1; line-height: 1.7; }
.stack-icon {
    display: inline-flex;
    width: 52px; height: 52px;
    align-items: center; justify-content: center;
    border-radius: 18px;
    margin-bottom: 18px;
}
.stack-icon svg { width: 26px; height: 26px; }

/* ---- The founders ------------------------------------------------------ */
.members-section {
    background:
        radial-gradient(circle at 12% 20%, rgba(228, 3, 3, .08), transparent 25%),
        radial-gradient(circle at 86% 18%, rgba(0, 77, 255, .08), transparent 25%),
        var(--soft);
}
.member-grid, .leaders-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* A 4:3 frame with the rainbow rule across the foot of it, and the rating
   sitting on the rule. */
.member-photo-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(228, 3, 3, .16), rgba(117, 7, 135, .16)), #e2e8f0;
}
.member-photo-wrap::after {
    content: "";
    position: absolute;
    left: 18px; right: 18px; bottom: 16px;
    height: 6px;
    border-radius: 999px;
    z-index: 2;
    background: linear-gradient(90deg,
        var(--red), var(--orange), var(--yellow), var(--green), var(--blue), var(--violet));
}
.member-photo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    display: block;
    border: 0; border-radius: 0; box-shadow: none;
}
.member-rating {
    position: absolute;
    left: 18px; right: 18px; bottom: 30px;
    z-index: 2;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #fff;
    font-weight: 800;
    font-style: italic;
    text-shadow: 0 1px 6px rgba(15, 23, 42, .55);
}
.member-rating::after { content: none; }

@media (max-width: 1000px) {
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .benefit-grid, .stack-grid, .member-grid, .leaders-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .process-grid, .benefit-grid, .stack-grid, .member-grid, .leaders-grid { grid-template-columns: 1fr; }
    .process-card { min-height: 0; }
}

/* ---- The brand hero ---------------------------------------------------- */
/* Copy on the left, the brand card on the right. The three soft washes behind
   it are the original's, and they are the reason the top of the page does not
   read as a plain white box. */
.hero-brand { position: relative; overflow: hidden; padding: 84px 0 72px; }
.hero-brand::before {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 20%, rgba(117, 7, 135, .16), transparent 30%),
        radial-gradient(circle at 88% 12%, rgba(0, 77, 255, .16), transparent 29%),
        radial-gradient(circle at 70% 86%, rgba(255, 140, 0, .19), transparent 32%);
}
.hero-brand .hero-grid {
    position: relative;
    grid-template-columns: 1.08fr .92fr;
    align-items: center;
    gap: 52px;
}
.hero-brand .hero-heading {
    margin: 24px 0 0;
    max-width: 780px;
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
}
.hero-brand .hero-copy {
    margin: 24px 0 0;
    max-width: 680px;
    color: #475569;
    font-size: 1.15rem;
    line-height: 1.8;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* The pill above the headline. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
    padding: 9px 14px;
    font-weight: 900;
    color: #334155;
    font-family: var(--font);
    font-size: .95rem;
    letter-spacing: normal;
    text-transform: none;
    margin-bottom: 0;
}
.sparkle { color: var(--violet); }

/* The card: the logo, then the dark panel of figures under it. */
.hero-card {
    border-radius: 36px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 30px 80px rgba(15, 23, 42, .14);
    padding: 36px;
    border: 1px solid rgba(255, 255, 255, .8);
}
.hero-logo { width: 100%; max-width: 460px; margin: 0 auto; }

.community-panel { margin-top: 32px; border-radius: 28px; background: var(--ink); color: #fff; padding: 24px; }
.panel-title { display: flex; align-items: center; gap: 8px; color: #cbd5e1; font-weight: 800; font-size: .95rem; }
/* Scoped to the panel. These were written unscoped, and being later in the
   file than the stats block's own rules they were overriding them: the
   figures on /clients/ were rendering in the dark panel's pale grey on a
   white card, which is why they looked washed out and unreadable. */
.community-panel .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.community-panel .stat,
.community-panel .code-snippet { border-radius: 20px; background: rgba(255, 255, 255, .1); padding: 16px; color: #cbd5e1; }
.community-panel .stat strong { display: block; font-size: 1.8rem; color: #fff; }
.code-snippet {
    grid-column: 1 / -1;
    font-family: var(--font-mono);
    color: #e2e8f0;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .hero-brand { padding: 48px 0 56px; }
    .hero-brand .hero-grid { grid-template-columns: 1fr; }
    .hero-card { padding: 24px; }
    .hero-brand .hero-copy { font-size: 1.05rem; }
    .community-panel .stats { grid-template-columns: 1fr; }
    .code-snippet { grid-column: auto; }
}

/* ---- The card's "more" section ------------------------------------------
   Built on <details>, so it works with scripting off, is keyboard operable
   without any code, and the browser owns the open state. The marker is
   removed because the summary is styled as a button, and a disclosure
   triangle inside a button reads as a mistake. */
.member-more { margin-top: 16px; }
.member-more > summary { list-style: none; cursor: pointer; }
.member-more > summary::-webkit-details-marker { display: none; }
.member-more-toggle { width: 100%; }

/* One summary, two labels: which one shows depends on the open state, so the
   button says "More about Ben" until it is open and "Show less" after. */
.member-more[open] .member-more-open,
.member-more:not([open]) .member-more-close { display: none; }

.member-more-body { margin-top: 18px; }
.member-subheading {
    margin: 0 0 10px;
    font-size: .78rem; font-weight: 900;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted);
}
.member-more-body .skill-pills { margin-bottom: 22px; }

/* ---- Project demos ---------------------------------------------------- */
.project-demos { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; }
.demo-link {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    border-radius: 16px;
    padding: 10px 12px;
    color: #334155;
    font-weight: 800;
    text-decoration: none;
}
/* A link gets the hover; an entry with no address yet does not pretend to. */
a.demo-link:hover, a.demo-link:focus-visible { background: var(--softer); color: var(--ink); }
.demo-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.demo-text small { font-weight: 500; color: var(--muted); line-height: 1.55; }

/* The card is a column so the content can grow, and the photo must not. */
.member-card { display: flex; flex-direction: column; }
.member-content { display: flex; flex-direction: column; }

/* ===========================================================================
   Colour where it was missing
   ---------------------------------------------------------------------------
   The pages that were built out of plain cards had gone grey. These put the
   brand back into the places that carry the most weight on a page: the
   figures somebody scans for, the panel behind them, and the questions people
   actually open.
   ========================================================================= */

/* ---- Headline figures --------------------------------------------------- */
/* The figure is the thing being read, so it leads, and each one takes the
   next colour of the flag in turn. The label sits under it in small caps
   rather than over it, because a caption above a number reads as a heading
   for the whole row. */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 18px;
    margin: 0;
}
.stat-row .stat {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column-reverse;   /* value on top, label beneath */
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 26px 24px 22px;
    box-shadow: 0 16px 50px rgba(15, 23, 42, .05);
    color: var(--ink);
}
/* A coloured rule along the top, cycling the flag. */
.stat-row .stat::before {
    content: "";
    position: absolute; inset: 0 0 auto 0;
    height: 5px;
    background: var(--stat-accent, var(--blue));
}
.stat-row .stat:nth-child(6n + 1) { --stat-accent: var(--red); }
.stat-row .stat:nth-child(6n + 2) { --stat-accent: var(--orange); }
.stat-row .stat:nth-child(6n + 3) { --stat-accent: var(--green); }
.stat-row .stat:nth-child(6n + 4) { --stat-accent: var(--blue); }
.stat-row .stat:nth-child(6n + 5) { --stat-accent: var(--violet); }
.stat-row .stat:nth-child(6n + 6) { --stat-accent: var(--yellow); }

.stat-row .stat-value {
    margin: 0;
    font-size: clamp(2.4rem, 4vw, 3.2rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--stat-accent, var(--ink));
}
.stat-row .stat-label {
    margin: 0;
    color: var(--ink-soft);
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    line-height: 1.5;
}

/* ---- Questions and answers --------------------------------------------- */
/* The marker takes the accent, and turns from a plus into a minus when the
   answer is open, so the control says what it will do. */
.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.faq-item[open] { border-color: var(--blue); box-shadow: 0 16px 50px rgba(15, 23, 42, .06); }
.faq-item > summary {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 18px 22px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::before {
    content: "+";
    flex-shrink: 0;
    display: grid; place-items: center;
    width: 24px; height: 24px;
    border-radius: 8px;
    background: var(--blue);
    color: #fff;
    font-size: 1rem; font-weight: 900; line-height: 1;
}
.faq-item[open] > summary::before { content: "\2212"; background: var(--violet); }
.faq-item > summary:hover { background: var(--soft); }
.faq-answer { padding: 0 22px 20px 58px; color: var(--ink-soft); }

/* ---- A centred section heading ----------------------------------------- */
/* Opt in per block. Centring everything would be worse; centring the ones
   that introduce a row of cards is what the design does. */
.section-heading.is-centred { margin-inline: auto; text-align: center; }
.section-heading.is-centred .section-intro { margin-inline: auto; }

/* ---- Prose that follows a heading -------------------------------------- */
.rich-wrapper .section-title { margin-bottom: 22px; }

/* ---- The dark panel that closes a page --------------------------------- */
.project-start-panel {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px;
    align-items: center;
    border-radius: 36px;
    background: var(--ink);
    color: #fff;
    padding: 42px;
}
.project-start-panel .section-label { color: #c4b5fd; }
.project-start-panel h2 {
    margin: 10px 0 0;
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -0.04em;
    color: #fff;
}
.project-start-panel p { max-width: 760px; margin: 18px 0 0; color: #cbd5e1; line-height: 1.8; }
.project-start-copy { min-width: 0; }
.project-actions { display: flex; flex-direction: column; gap: 12px; }
.project-actions .button { justify-content: space-between; white-space: nowrap; }
/* The third route is a quieter option on the same dark ground, so it reads as
   secondary without disappearing into the panel. */
.button-muted {
    background: rgba(255, 255, 255, .08);
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, .22);
}
.button-muted:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.project-start-panel :focus-visible { outline-color: var(--yellow); }

@media (max-width: 880px) {
    .project-start-panel { grid-template-columns: 1fr; padding: 32px; }
    .project-actions { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 560px) {
    .project-start-panel { padding: 24px; }
    .project-actions { flex-direction: column; }
}

/* ===========================================================================
   The join invitation panel, and the form behind it
   ========================================================================= */

/* A white card, centred, with the button under the copy. The form itself
   lives in a modal so a long application does not dominate a page somebody is
   still reading. */
.join-panel {
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 36px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .08);
    padding: clamp(32px, 5vw, 56px);
}
.join-panel-title {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 900;
    letter-spacing: -0.03em;
}
.join-panel-body {
    margin: 18px auto 0;
    max-width: 620px;
    color: var(--ink-soft);
    line-height: 1.8;
}
.join-panel .join-open { margin-top: 28px; }

/* ---- The modal --------------------------------------------------------- */
.join-modal {
    width: min(760px, calc(100% - 32px));
    max-height: min(88vh, 900px);
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 28px;
    box-shadow: 0 40px 100px rgba(15, 23, 42, .3);
    background: var(--surface);
    color: var(--ink);
    overflow: hidden;
}
.join-modal::backdrop { background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); }
.join-modal-inner { padding: clamp(24px, 4vw, 40px); overflow-y: auto; max-height: min(88vh, 900px); }
.join-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.join-modal-head .section-title { margin-top: 0; }
.join-modal-close {
    flex-shrink: 0;
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border: 1px solid var(--line); border-radius: 999px;
    background: #fff; color: var(--ink);
    font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.join-modal-close:hover { background: var(--softer); }

/* The page must not scroll behind an open modal. */
body.has-modal-open { overflow: hidden; }