/* =============================================================================
   petermkwawa.com — formal design system
   Loaded last, after every other stylesheet, so it sets the final word on
   colour, type and surface treatment.

   Replaces three competing accent families (orange, indigo/purple, a multi-stop
   navy gradient) with one restrained palette: navy ink, paper, and a single
   bronze accent used sparingly for rules, figures and marks.
   ============================================================================= */

:root {
    /* Ground */
    --ink: #0f1b2d;
    --ink-deep: #0a1421;
    --ink-soft: #1c2a3e;

    /* Text */
    --text: #2f3947;
    --text-muted: #66717f;
    --text-faint: #68727f;   /* 4.9:1 on paper — passes AA at small sizes */
    --on-dark: #ffffff;
    --on-dark-muted: rgba(255, 255, 255, 0.68);
    --on-dark-faint: rgba(255, 255, 255, 0.46);

    /* Surface */
    --paper: #ffffff;
    --paper-alt: #f6f7f9;
    --rule: #e3e6ea;
    --rule-strong: #cfd5dc;
    --rule-on-dark: rgba(255, 255, 255, 0.16);

    /* Accent — bronze. Decoration and figures only; never a whole surface. */
    --accent: #9b7b45;
    --accent-text: #7a5f33;   /* darkened for legible small text on paper */
    --accent-on-dark: #c8a86b;
    --accent-wash: #f7f3ec;

    /* Type */
    --font-display: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Geometry — formal means near-square, not pill-shaped */
    --radius: 2px;
    --radius-lg: 3px;
    --measure: 68ch;
}

/* -----------------------------------------------------------------------------
   Base typography
   -------------------------------------------------------------------------- */

body,
body.home-page,
body.inner-page {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3,
.hero-title,
.landing-section-title,
.home-block-title,
.page-title,
.engagement-title,
.proof-org,
.number-value,
.stat-number {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
}

h4, h5, h6 {
    font-family: var(--font-body);
    color: var(--ink);
}

a {
    color: var(--accent-text);
}

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

/* -----------------------------------------------------------------------------
   Navigation — institutional, not app-like
   -------------------------------------------------------------------------- */

.navbar {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--rule);
    box-shadow: none;
}

.nav-logo h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: 0.01em;
    color: var(--ink);
}

.nav-menu a.nav-link {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.nav-menu a.nav-link:hover {
    color: var(--ink);
}

.nav-menu a.nav-link.active {
    color: var(--ink);
    font-weight: 600;
}

.nav-menu a.nav-link::after {
    background: var(--accent);
    height: 2px;
}

.hamburger span {
    background: var(--ink);
}

/* -----------------------------------------------------------------------------
   Buttons — square, solid, no glow
   -------------------------------------------------------------------------- */

.btn {
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.9rem 1.6rem;
    border-width: 1px;
    box-shadow: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn:hover {
    transform: none;
    box-shadow: none;
}

.btn-primary {
    background: var(--ink);
    color: var(--on-dark);
    border-color: var(--ink);
    box-shadow: none;
}

.btn-primary:hover {
    background: var(--ink-soft);
    border-color: var(--ink-soft);
    color: var(--on-dark);
}

.btn-secondary {
    background: transparent;
    color: var(--ink);
    border-color: var(--rule-strong);
}

.btn-secondary:hover {
    background: var(--paper-alt);
    border-color: var(--ink);
    color: var(--ink);
}

/* The old orange-outlined "preview" button becomes a quiet text action */
.btn-preview,
.landing-section-btn.btn-preview {
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--ink);
    box-shadow: none;
    font-weight: 600;
    padding: 0.9rem 1.6rem;
}

.btn-preview:hover {
    background: var(--paper-alt);
    border-color: var(--ink);
    color: var(--ink);
    transform: none;
}

/* On dark grounds the primary flips to bronze so it still reads as the action */
.hero .btn-primary,
.page-cta-band .btn-primary,
.home-closing .btn-primary {
    background: var(--accent-on-dark);
    border-color: var(--accent-on-dark);
    color: var(--ink);
}

.hero .btn-primary:hover,
.page-cta-band .btn-primary:hover,
.home-closing .btn-primary:hover {
    background: #d8bc85;
    border-color: #d8bc85;
    color: var(--ink);
}

.hero .btn-secondary,
.page-cta-band .section-cta .btn.btn-secondary,
.home-closing .btn-secondary {
    background: transparent;
    color: var(--on-dark);
    border-color: var(--rule-on-dark);
}

.hero .btn-secondary:hover,
.page-cta-band .section-cta .btn.btn-secondary:hover,
.home-closing .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--on-dark);
}

/* -----------------------------------------------------------------------------
   Hero — one flat navy ground. No gradient stack, no animated colour blobs.
   -------------------------------------------------------------------------- */

.hero {
    background: var(--ink);
    min-height: 0;
    padding-top: clamp(7rem, 14vw, 9.5rem);
    padding-bottom: clamp(4rem, 9vw, 6rem);
    align-items: center;
}

.hero::before,
.hero::after {
    display: none !important;
    animation: none !important;
    background: none !important;
}

.hero-eyebrow {
    color: var(--accent-on-dark);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    margin-bottom: 1.5rem;
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.1rem, 5.2vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--on-dark);
    margin-bottom: 1.5rem;
    max-width: 17ch;
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1rem, 2.2vw, 1.12rem);
    line-height: 1.75;
    color: var(--on-dark-muted);
    max-width: 54ch;
    margin-bottom: 0;
}

.hero-actions {
    margin-top: 2.25rem;
    gap: 0.75rem;
}

.hero-trust {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule-on-dark);
}

.hero-trust-label {
    color: var(--on-dark-faint);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    margin-bottom: 0.75rem;
}

.hero-trust-list {
    color: var(--on-dark-muted);
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.8;
    max-width: 52ch;
}

.hero-person-image {
    border-radius: var(--radius-lg);
    box-shadow: none;
    border: 1px solid var(--rule-on-dark);
    filter: grayscale(18%) contrast(1.02);
}

.hero-person-image:hover {
    transform: none;
    filter: grayscale(0%) contrast(1.02);
}

/* -----------------------------------------------------------------------------
   Numbers bar — an annual-report figure row on paper, not a dark slab
   -------------------------------------------------------------------------- */

.numbers-bar {
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: clamp(3rem, 7vw, 4.25rem) 0;
}

.numbers-grid {
    gap: 0;
}

.number-card {
    padding: 0 clamp(1rem, 2.5vw, 2rem);
    border-left: 1px solid var(--rule);
}

.number-card:first-child {
    padding-left: 0;
    border-left: none;
}

.number-value {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.1rem, 4.4vw, 3rem);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ink);
}

.number-value::after {
    content: "";
    display: block;
    width: 32px;
    height: 2px;
    margin-top: 1rem;
    background: var(--accent);
}

.number-label {
    margin-top: 1rem;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* -----------------------------------------------------------------------------
   Section shells
   -------------------------------------------------------------------------- */

.home-block {
    background: var(--paper);
    border-top: none;
    padding: clamp(4rem, 9vw, 6.5rem) 0;
}

.home-block--alt {
    background: var(--paper-alt);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

.home-block-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.7rem, 3.6vw, 2.35rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ink);
    max-width: 24ch;
}

.home-block-head--center .home-block-title {
    max-width: none;
}

.home-block-intro {
    color: var(--text-muted);
    font-size: 1.02rem;
}

/* Divider: a short bronze rule instead of the purple gradient bar */
.landing-section-divider,
.section-divider {
    width: 40px;
    height: 2px;
    background: var(--accent);
    border-radius: 0;
    margin-top: 1.25rem;
}

.home-prose p {
    color: var(--text);
    font-size: 1.05rem;
    line-height: 1.85;
}

.home-prose p:first-child {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.6vw, 1.4rem);
    font-weight: 400;
    line-height: 1.6;
    color: var(--ink);
}

/* -----------------------------------------------------------------------------
   Work cards — hairline panels, no coloured top bar, no shadow
   -------------------------------------------------------------------------- */

.work-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-top: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: none;
    padding: 2.25rem 1.9rem;
}

.work-card-kicker {
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.work-card-kicker::before {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    margin-bottom: 1.1rem;
    background: var(--accent);
}

.work-card-for {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.88rem;
}

.work-card-body,
.work-card-get {
    color: var(--text);
}

.work-card-get {
    border-top: 1px solid var(--rule);
    color: var(--text-muted);
}

.work-card-get strong {
    color: var(--ink);
    font-weight: 600;
}

.work-cards-closing {
    color: var(--text-muted);
}

.home-inline-link {
    color: var(--accent-text);
    border-bottom: 1px solid var(--accent);
    padding-bottom: 1px;
}

.home-inline-link:hover {
    color: var(--ink);
    border-bottom-color: var(--ink);
    text-decoration: none;
}

/* -----------------------------------------------------------------------------
   Selected work
   -------------------------------------------------------------------------- */

.proof-item {
    background: var(--paper);
    border: none;
    border-top: 1px solid var(--rule);
    border-radius: 0;
    padding: 2rem 0;
}

.proof-list {
    gap: 0;
}

.proof-org {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.28rem;
    color: var(--ink);
}

.proof-tag {
    background: var(--accent-wash);
    border: 1px solid #e6dcc9;
    color: var(--accent-text);
    border-radius: var(--radius);
    letter-spacing: 0.08em;
}

.proof-role {
    color: var(--text);
    font-weight: 600;
    font-size: 0.92rem;
}

.proof-note {
    color: var(--text-faint);
    font-size: 0.88rem;
}

.proof-bullets li {
    color: var(--text);
}

.proof-bullets li::before {
    top: 0.68em;
    width: 4px;
    height: 4px;
    background: var(--accent);
}

.proof-body {
    color: var(--text);
}

/* -----------------------------------------------------------------------------
   Capabilities
   -------------------------------------------------------------------------- */

.capability-title {
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--ink);
    border-bottom: 1px solid var(--rule-strong);
    padding-bottom: 0.7rem;
}

.capability-group li {
    color: var(--text);
    font-size: 0.94rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 0;
}

.capability-group li:last-child {
    border-bottom: none;
}

/* -----------------------------------------------------------------------------
   News block on the homepage
   -------------------------------------------------------------------------- */

body.home-page .landing-section,
body.home-page section.landing-section--light:nth-of-type(even),
body.home-page section.landing-section--light:nth-of-type(odd) {
    background: var(--paper);
    border-top: none;
    padding: clamp(4rem, 9vw, 6.5rem) 0;
}

.landing-section-title {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.landing-section-tagline,
.landing-section-intro {
    color: var(--text-muted);
}

.landing-section-post-title a {
    font-family: var(--font-display);
    color: var(--ink);
    text-decoration: none;
}

.landing-section-post-title a:hover {
    color: var(--accent-text);
}

.landing-section-post-meta {
    color: var(--text-faint);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.landing-section-cta,
.landing-section-cta--inline {
    color: var(--accent-text);
}

.landing-section-list li::before {
    color: var(--accent);
}

.landing-section-empty {
    color: var(--text-muted);
}

/* -----------------------------------------------------------------------------
   Closing band + inner-page CTA band
   -------------------------------------------------------------------------- */

.page-cta-band {
    background: var(--ink);
    padding: clamp(3.5rem, 8vw, 5rem) 0;
    margin-top: 0;
}

.page-cta-text h2 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--on-dark);
    letter-spacing: -0.02em;
}

.page-cta-text p {
    color: var(--on-dark-muted);
}

.home-closing-note {
    color: var(--accent-on-dark) !important;
    font-weight: 600;
}

.home-closing-fineprint {
    border-top: 1px solid var(--rule-on-dark);
    color: var(--on-dark-faint);
}

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

.footer {
    background: var(--ink-deep);
    color: var(--on-dark);
    padding: clamp(3rem, 6vw, 4rem) 0 1.5rem;
    border-top: 1px solid var(--rule-on-dark);
}

.footer-section h3 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--on-dark);
}

.footer-section h4 {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--on-dark-faint);
}

.footer-section p,
.footer-section a,
.footer-section li a {
    color: var(--on-dark-muted);
}

.footer-section a:hover {
    color: var(--accent-on-dark);
}

.footer-bottom {
    border-top: 1px solid var(--rule-on-dark);
    color: var(--on-dark-faint);
}

.footer-bottom p,
.footer-admin-link {
    color: var(--on-dark-faint);
}

.social-links a {
    border: 1px solid var(--rule-on-dark);
    border-radius: var(--radius);
    color: var(--on-dark-muted);
    background: transparent;
}

.social-links a:hover {
    border-color: var(--accent-on-dark);
    color: var(--accent-on-dark);
    background: transparent;
}

/* -----------------------------------------------------------------------------
   Inner pages — same system, so nothing clashes with the homepage
   -------------------------------------------------------------------------- */

.page-hero {
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.page-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-text);
}

.page-title {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink);
    line-height: 1.15;
}

.page-lead {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.75;
}

.page-breadcrumb,
.page-breadcrumb a,
.page-breadcrumb-current {
    color: var(--text-faint);
    font-size: 0.8rem;
}

.page-breadcrumb a:hover {
    color: var(--ink);
}

.page-hero-accent {
    background: var(--accent);
}

.page-section--alt {
    background: var(--paper-alt);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

.page-section-header h2 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
}

.page-section-header p {
    color: var(--text-muted);
}

.content-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: none;
}

.page-prose p {
    color: var(--text);
    font-size: 1.05rem;
    line-height: 1.85;
}

.page-prose p:first-child {
    font-family: var(--font-display);
    font-size: 1.28rem;
    line-height: 1.6;
    color: var(--ink);
}

.page-prose-belief {
    border-top: 1px solid var(--rule);
}

/* Stat rows */
.inner-page .stat,
.stat {
    background: transparent;
    border: none;
    border-left: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: none;
    padding: 0.25rem 1.5rem;
}

.stat:hover {
    transform: none;
    box-shadow: none;
}

.stat-number,
.inner-page .stat-number {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.stat-label {
    color: var(--text-muted);
    font-size: 0.86rem;
}

/* Timeline */
.timeline::before {
    background: var(--rule);
}

.timeline-content {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: none;
}

.timeline-content::before {
    background: var(--accent);
    border-color: var(--paper);
}

.timeline-content h3 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
}

.timeline-content h4 {
    color: var(--text-faint);
    font-weight: 500;
    font-size: 0.88rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.timeline-content li {
    color: var(--text);
}

.timeline-content li::before {
    color: var(--accent);
}

/* Engagement cards (Work With Me) */
.engagement-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: none;
}

.engagement-number {
    font-family: var(--font-display);
    color: var(--accent-text);
    font-size: 0.95rem;
    letter-spacing: 0.1em;
}

.engagement-title {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
}

.engagement-terms {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.88rem;
    letter-spacing: 0.02em;
}

.engagement-scope {
    border-top: 1px solid var(--rule);
    color: var(--text-muted);
}

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

.availability-list li {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    color: var(--text);
}

.availability-list li::before {
    color: var(--accent);
}

/* Portfolio cards */
.portfolio-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: none;
}

.portfolio-card h4,
.portfolio-header h4 {
    font-family: var(--font-display);
    color: var(--ink);
}

.portfolio-role {
    background: var(--accent-wash);
    color: var(--accent-text);
    border-radius: var(--radius);
}

/* -----------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */

.contact-best-for li::before {
    background: var(--accent);
}

.contact-method i {
    color: var(--accent-text);
}

.contact-field label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.contact-field input,
.contact-field textarea {
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    font-family: var(--font-body);
    color: var(--text);
    background: var(--paper);
}

.contact-field input:focus,
.contact-field textarea:focus {
    border-color: var(--ink);
    outline: 2px solid rgba(15, 27, 45, 0.08);
    outline-offset: 1px;
    box-shadow: none;
}

.contact-form-note {
    color: var(--text-faint);
}

/* Success panel — replaces the form once a message is sent */
.contact-success {
    text-align: center;
    padding: clamp(1.5rem, 4vw, 2.5rem) 0.5rem;
}

.contact-success__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1.5rem;
    border: 1px solid var(--accent);
    border-radius: 50%;
    color: var(--accent-text);
    font-size: 1.1rem;
}

.contact-success__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.35rem, 3vw, 1.7rem);
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 0.85rem;
}

.contact-success__text {
    max-width: 42ch;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text);
}

.contact-success__aside {
    margin: 2rem 0 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.contact-alert--success {
    background: var(--accent-wash);
    border: 1px solid #e6dcc9;
    color: var(--text);
}

.contact-alert--success .contact-alert__icon,
.contact-alert--success .contact-alert__title {
    color: var(--accent-text);
}

/* -----------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 992px) {
    .number-card {
        padding: 1.25rem 0 1.25rem 1.25rem;
    }

    .number-card:first-child {
        padding-left: 1.25rem;
        border-left: 1px solid var(--rule);
    }
}

@media (max-width: 640px) {
    .hero {
        padding-top: 6.5rem;
        padding-bottom: 3.5rem;
    }

    .hero-title {
        max-width: none;
    }

    .number-card {
        padding: 0 0 0 1.1rem;
    }

    .number-value::after {
        margin-top: 0.75rem;
    }

    .stat {
        border-left: none;
        border-top: 1px solid var(--rule);
        padding: 1rem 0 0;
    }

    .work-card {
        padding: 1.75rem 1.4rem;
    }
}

/* -----------------------------------------------------------------------------
   Specificity overrides
   A handful of legacy rules use multi-class selectors that out-rank the single
   class rules above. These match or exceed them so the palette holds everywhere.
   -------------------------------------------------------------------------- */

/* Primary buttons inside .section-cta wrappers (was an orange gradient) */
.section-cta .btn.btn-primary,
.cta-buttons .btn-primary,
.page-actions .btn.btn-primary {
    background: var(--ink);
    background-image: none;
    border-color: var(--ink);
    color: var(--on-dark);
    box-shadow: none;
}

.section-cta .btn.btn-primary:hover,
.cta-buttons .btn-primary:hover,
.page-actions .btn.btn-primary:hover {
    background: var(--ink-soft);
    background-image: none;
    border-color: var(--ink-soft);
    color: var(--on-dark);
}

/* On dark grounds the primary flips to bronze */
.hero .hero-cta .btn.btn-primary,
.hero .hero-actions .btn.btn-primary,
.page-cta-band .section-cta .btn.btn-primary,
.home-closing .section-cta .btn.btn-primary,
.landing-section--dark .landing-contact-buttons .btn-primary {
    background: var(--accent-on-dark);
    background-image: none;
    border-color: var(--accent-on-dark);
    color: var(--ink);
    box-shadow: none;
}

.hero .hero-cta .btn.btn-primary:hover,
.hero .hero-actions .btn.btn-primary:hover,
.page-cta-band .section-cta .btn.btn-primary:hover,
.home-closing .section-cta .btn.btn-primary:hover,
.landing-section--dark .landing-contact-buttons .btn-primary:hover {
    background: #d8bc85;
    background-image: none;
    border-color: #d8bc85;
    color: var(--ink);
}

/* Secondary buttons */
.section-cta .btn.btn-secondary {
    background: transparent;
    color: var(--ink);
    border-color: var(--rule-strong);
}

.section-cta .btn.btn-secondary:hover {
    background: var(--paper-alt);
    color: var(--ink);
    border-color: var(--ink);
}

.page-cta-band .section-cta .btn.btn-secondary,
.home-closing .section-cta .btn.btn-secondary {
    background: transparent;
    color: var(--on-dark);
    border-color: var(--rule-on-dark);
}

.page-cta-band .section-cta .btn.btn-secondary:hover,
.home-closing .section-cta .btn.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--on-dark);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Dividers and remaining gradient marks */
.landing-section--dark .landing-section-divider,
body.home-page .landing-section--dark .landing-section-divider {
    background: var(--accent-on-dark);
    background-image: none;
}

/* Inner-page accents that still carried indigo */
.inner-page .stat-number {
    color: var(--ink);
    background: none;
    background-image: none;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: currentColor;
}

.inner-page .contact-method a:hover {
    color: var(--accent-text);
}

.inner-page .contact-info-card .social-links a {
    background: transparent;
    background-image: none;
    border: 1px solid var(--rule-strong);
    color: var(--text-muted);
}

.inner-page .contact-info-card .social-links a:hover {
    background: var(--ink);
    background-image: none;
    border-color: var(--ink);
    color: var(--on-dark);
}

.contact-form-card .contact-page-form input:focus,
.contact-form-card .contact-page-form textarea:focus {
    border-color: var(--ink);
    box-shadow: none;
    outline: 2px solid rgba(15, 27, 45, 0.08);
    outline-offset: 1px;
}

/* Focus ring — visible, on-palette */
.btn:focus-visible,
.nav-menu a:focus-visible,
.hamburger:focus-visible,
.contact-field input:focus-visible,
.contact-field textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.tab-btn.active {
    color: var(--ink);
    border-color: var(--accent);
}

/* Portfolio card header (was an indigo→purple gradient) */
.portfolio-header {
    background: var(--ink);
    background-image: none;
    color: var(--on-dark);
    border-bottom: none;
}

.portfolio-header h4,
.portfolio-card .portfolio-header h4 {
    color: var(--on-dark);
}

.portfolio-header .portfolio-role {
    background: rgba(255, 255, 255, 0.12);
    color: var(--on-dark);
    border-radius: var(--radius);
}

/* News / blog list */
.blog-search button {
    background: var(--ink);
    background-image: none;
    border-radius: var(--radius);
    color: var(--on-dark);
    font-family: var(--font-body);
}

.blog-search button:hover {
    background: var(--ink-soft);
}

.blog-search input:focus {
    outline-color: var(--accent);
}

.blog-tag {
    background: var(--accent-wash);
    color: var(--accent-text);
    border: 1px solid #e6dcc9;
    border-radius: var(--radius);
    letter-spacing: 0.04em;
}

.blog-tag:hover {
    background: #f0e9dc;
    color: var(--ink);
}

.blog-card-title,
.blog-card-title a {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
}

.blog-read-more {
    color: var(--accent-text);
}

.blog-read-more:hover {
    color: var(--ink);
}

.blog-count {
    background: var(--paper-alt);
    color: var(--text-muted);
    border-radius: var(--radius);
}

.blog-recent-date,
.blog-card-meta {
    color: var(--text-faint);
}

/* Gradient-clipped text — the wordmark and hero title painted themselves with a
   gradient and a transparent fill, so setting `color` alone had no effect. */
.nav-logo h3,
.hero-title,
.footer-section h3 {
    background: none;
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    text-shadow: none;
}

.nav-logo h3 {
    -webkit-text-fill-color: var(--ink);
    color: var(--ink);
}

.hero-title,
.footer-section h3 {
    -webkit-text-fill-color: var(--on-dark);
    color: var(--on-dark);
}

/* -----------------------------------------------------------------------------
   Imagery
   Photography is treated the same way everywhere: square corners, a hairline
   frame, slight desaturation at rest so colour never competes with the type.
   -------------------------------------------------------------------------- */

picture {
    display: block;
}

figure {
    margin: 0;
}

.home-figure-img,
.page-figure-img,
.image-band-img img,
.proof-media-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

/* Credentials bar — a logo wall on paper.
   The source logos carry their own backgrounds (some white, some navy, some
   blue), so each one sits in an identical white tile rather than being knocked
   out onto a dark ground, where the opaque ones would read as solid blocks. */
.credentials-bar {
    background: var(--paper-alt);
    border-bottom: 1px solid var(--rule);
    padding: clamp(2rem, 5vw, 2.75rem) 0;
}

.credentials-label {
    margin: 0 0 1.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-faint);
    text-align: center;
}

.trust-logos {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--rule);
    border: 1px solid var(--rule);
}

.trust-logo-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.1rem 0.9rem;
    background: var(--paper);
    min-height: 84px;
}

.trust-logo {
    display: block;
    max-height: 42px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.78;
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.trust-logo-tile:hover .trust-logo {
    filter: grayscale(0%);
    opacity: 1;
}

/* Two-column section: figure beside copy */
.home-split {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
    max-width: 1080px;
    margin: 0 auto;
}

.home-split-copy {
    max-width: none;
    margin: 0;
}

.home-figure--sticky {
    position: sticky;
    top: 6.5rem;
}

.home-figure img {
    border: 1px solid var(--rule);
    filter: grayscale(22%);
    transition: filter 0.3s ease;
}

.home-figure:hover img {
    filter: grayscale(0%);
}

.home-figure figcaption,
.page-figure figcaption {
    margin-top: 0.85rem;
    padding-left: 0.9rem;
    border-left: 2px solid var(--accent);
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-muted);
}

/* Selected work — thumbnail beside each entry */
.proof-item--media {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
}

.proof-item--media .proof-head,
.proof-item--media .proof-bullets,
.proof-item--media .proof-body {
    grid-column: 2;
}

.proof-media {
    grid-column: 1;
    grid-row: 1 / span 3;
}

.proof-media-img {
    border: 1px solid var(--rule);
    filter: grayscale(24%);
    transition: filter 0.3s ease;
}

.proof-item:hover .proof-media-img {
    filter: grayscale(0%);
}

/* Full-width photographic band */
.image-band {
    position: relative;
    background: var(--ink);
    line-height: 0;
}

.image-band img {
    width: 100%;
    height: clamp(220px, 34vw, 420px);
    object-fit: cover;
    object-position: center 30%;
    opacity: 0.85;
    filter: grayscale(35%);
}

.image-band-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: clamp(1.5rem, 4vw, 2.5rem) 0;
    background: linear-gradient(to top, rgba(15, 27, 45, 0.92) 0%, rgba(15, 27, 45, 0) 100%);
}

.image-band-caption p {
    margin: 0;
    max-width: 46ch;
    font-family: var(--font-display);
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    line-height: 1.55;
    color: var(--on-dark);
}

/* Work-with-me closing row */
.work-closing {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 2.5rem);
    align-items: center;
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--rule);
}

.work-closing .work-cards-closing {
    margin: 0;
    text-align: left;
}

.home-figure--inline img {
    border: 1px solid var(--rule);
}

/* Inner-page figures */
.page-figure {
    margin: 2rem 0;
}

.page-figure--wide {
    margin: 2.25rem 0;
}

.page-figure img {
    border: 1px solid var(--rule);
    filter: grayscale(22%);
    transition: filter 0.3s ease;
}

.page-figure:hover img {
    filter: grayscale(0%);
}

.availability-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    max-width: 860px;
    margin: 0 auto;
}

.availability-split .availability-list {
    margin: 0;
}

/* Contact page portrait */
.contact-portrait {
    float: right;
    width: 150px;
    margin: 0 0 1.25rem 1.5rem;
}

.contact-portrait-img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    filter: grayscale(22%);
}

@media (max-width: 520px) {
    .contact-portrait {
        float: none;
        width: 120px;
        margin: 0 0 1.25rem;
    }
}

/* Timeline organisation marks */
.timeline-logo {
    display: flex;
    align-items: center;
    height: 34px;
    margin-bottom: 0.9rem;
}

.timeline-logo img {
    max-height: 34px;
    max-width: 130px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.85;
}

/* Portfolio card media inherits the same treatment */
.portfolio-card__media {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0;
    filter: grayscale(20%);
    transition: filter 0.3s ease;
}

.portfolio-card:hover .portfolio-card__media {
    filter: grayscale(0%);
}

@media (max-width: 900px) {
    .home-split,
    .availability-split {
        grid-template-columns: 1fr;
    }

    .home-figure--sticky {
        position: static;
    }

    .work-closing {
        grid-template-columns: 1fr;
        text-align: left;
    }
}

@media (max-width: 760px) {
    .proof-item--media {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .proof-item--media .proof-head,
    .proof-item--media .proof-bullets,
    .proof-item--media .proof-body,
    .proof-media {
        grid-column: 1;
    }

    .proof-media {
        grid-row: auto;
    }

    .trust-logo {
        max-height: 32px;
    }
}

@media (max-width: 992px) {
    .trust-logos {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 560px) {
    .trust-logos {
        grid-template-columns: repeat(2, 1fr);
    }

    .trust-logo-tile {
        min-height: 72px;
        padding: 0.9rem 0.75rem;
    }
}

/* =============================================================================
   v4 positioning — hero proof line, the three-layer build section, sectors,
   and the market-entry grid.
   ============================================================================= */

/* Hero proof line — the five headline figures, inline under the subhead */
.hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}

.hero-proof li {
    position: relative;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--on-dark-muted);
}

.hero-proof li + li::before {
    content: "";
    position: absolute;
    left: -0.9rem;
    top: 0.35em;
    bottom: 0.35em;
    width: 1px;
    background: var(--rule-on-dark);
}

.hero-proof strong {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--accent-on-dark);
    margin-right: 0.3rem;
}

/* -----------------------------------------------------------------------------
   The three layers — the centrepiece of the page
   -------------------------------------------------------------------------- */

.layer-list {
    max-width: 820px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    counter-reset: layer;
}

.layer {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 0 1.75rem;
    padding: 2.25rem 0;
    border-top: 1px solid var(--rule);
}

.layer:first-child {
    border-top: none;
    padding-top: 0;
}

.layer-index {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
    color: var(--rule-strong);
}

.layer--key .layer-index {
    color: var(--accent);
}

.layer-title {
    margin: 0 0 0.4rem;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.layer-flag {
    display: inline-block;
    margin-left: 0.6rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid #e6dcc9;
    border-radius: var(--radius);
    background: var(--accent-wash);
    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-text);
    vertical-align: middle;
}

.layer-question {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent-text);
}

.layer-body p {
    margin: 0 0 1rem;
    font-size: 1.02rem;
    line-height: 1.8;
    color: var(--text);
}

.layer-body p:last-child {
    margin-bottom: 0;
}

.mechanic-list {
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.mechanic-list li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.85rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
}

.mechanic-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}

.mechanic-list strong {
    color: var(--ink);
    font-weight: 600;
}

.layer-principle {
    margin-top: 1.25rem !important;
    padding-top: 1.15rem;
    border-top: 1px solid var(--rule);
    font-family: var(--font-display);
    font-size: 1.1rem !important;
    font-style: italic;
    color: var(--ink) !important;
}

/* -----------------------------------------------------------------------------
   Sectors
   -------------------------------------------------------------------------- */

.sector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    background: var(--rule);
    border: 1px solid var(--rule);
}

.sector-grid li {
    padding: 1.1rem 1.25rem;
    background: var(--paper);
    font-size: 0.97rem;
    font-weight: 500;
    color: var(--ink);
}

.sector-closing {
    max-width: 640px;
    margin: 2.5rem auto 0;
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2.4vw, 1.22rem);
    line-height: 1.65;
    color: var(--text);
}

/* -----------------------------------------------------------------------------
   What I bring to a market entry
   -------------------------------------------------------------------------- */

.bring-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: 980px;
    margin: 0 auto;
}

.bring-card {
    padding: 1.85rem 1.6rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.bring-card h3 {
    margin: 0 0 0.9rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--accent);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
}

.bring-card p {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.75;
    color: var(--text);
}

/* Five capability columns rather than four */
.capabilities-grid--five {
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
}

/* Closing availability line */
.home-closing-availability {
    max-width: 62ch;
    margin: 2.25rem 0 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--on-dark-muted);
}

.home-closing-availability + .home-closing-fineprint {
    margin-top: 1.5rem;
}

/* About page closing line */
.page-prose-close {
    margin-top: 1.5rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.65;
    color: var(--ink);
}

@media (max-width: 1100px) {
    .capabilities-grid--five {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .capabilities-grid--five {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .layer {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .layer-index {
        font-size: 1.15rem;
    }

    .layer-flag {
        display: block;
        margin: 0.6rem 0 0;
        width: fit-content;
    }

    .capabilities-grid--five {
        grid-template-columns: 1fr;
    }

    .hero-proof {
        gap: 0.4rem 0;
        flex-direction: column;
    }

    .hero-proof li + li::before {
        display: none;
    }
}

/* The v4 headline is a full sentence, not a phrase — the old 17ch clamp
   stacked it into a narrow column. */
.hero-title {
    max-width: 28ch;
    font-size: clamp(1.95rem, 4.4vw, 3.05rem);
}

@media (max-width: 900px) {
    .hero-title {
        max-width: none;
    }
}

/* -----------------------------------------------------------------------------
   v4 visual QA — fixes found by rendering the page
   -------------------------------------------------------------------------- */

/* The sector grid drew its rules from the container background showing through
   the gaps, which left a visible grey block where the 11 items did not fill the
   final row. Rules now live on the items, so the leftover space is just paper. */
.sector-grid {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-width: 1px 0 0 1px;
    gap: 0;
}

.sector-grid li {
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

/* Four cards read as 3 + 1 orphan at desktop; 2x2 is balanced */
.bring-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 860px;
}

@media (max-width: 760px) {
    .bring-grid {
        grid-template-columns: 1fr;
    }
}

/* Keep every Selected work row on the same left edge, including entries
   that have no thumbnail */
.proof-media--empty {
    min-height: 1px;
}

@media (max-width: 760px) {
    .proof-media--empty {
        display: none;
    }
}

/* The news block kept pill buttons, rounded cards and the old gradient rule */
.landing-section-actions .btn-preview,
.landing-section-btn.btn-preview {
    border-radius: var(--radius);
}

.landing-section-divider {
    border-radius: 0;
    background: var(--accent);
    background-image: none;
    height: 2px;
    width: 40px;
}

.landing-section-posts {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: none;
    overflow: hidden;
}

.landing-section-post {
    border-radius: 0;
    box-shadow: none;
}

/* The hero proof line broke 4 + 1; a tighter measure balances it 3 + 2 */
.hero-proof {
    max-width: 46rem;
    gap: 0.55rem 1.5rem;
}

/* The original hero subtitle was italic. On a full-sentence positioning
   statement that reads as a pull quote rather than a claim. */
.hero-subtitle {
    font-style: normal;
    font-weight: 400;
    margin-left: 0;
    margin-right: 0;
}

/* =============================================================================
   Responsive refinement

   The site uses one container measure — max-width 1200px, centred, with fluid
   side padding. The hero was the single exception (`max-width: 100%`), which on
   any screen wider than ~1230px pushed the headline hundreds of pixels left of
   the nav wordmark and every section below it. Bringing it onto the same measure
   is what makes large screens read as one composition.
   ============================================================================= */

.hero .container {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Two columns only once there is genuinely room for the portrait beside the
   text; below that the portrait leads and the copy follows. */
@media (min-width: 1024px) {
    .hero .container {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        text-align: left;
        gap: clamp(2rem, 5vw, 4rem);
    }

    .hero-visual {
        justify-content: flex-end;
    }
}

@media (max-width: 1023px) {
    /* Centred single column reads better than left-aligned at tablet widths */
    .hero-proof {
        justify-content: center;
        max-width: 34rem;
        margin-inline: auto;
    }

    .hero-trust-list,
    .hero-subtitle {
        margin-inline: auto;
    }

    /* Everything else in the hero centres at these widths; the buttons were
       the one element still hugging the left edge. */
    .hero-actions {
        justify-content: center;
    }

    .hero-person-image {
        max-width: 300px;
    }
}

/* -----------------------------------------------------------------------------
   Component behaviour across the ladder
   -------------------------------------------------------------------------- */

/* Sector grid steps down cleanly rather than jumping straight to one column */
@media (max-width: 1023px) {
    .sector-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .sector-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 479px) {
    .sector-grid {
        grid-template-columns: 1fr;
    }
}

/* Capability columns: 5 → 3 → 2 → 1 */
@media (max-width: 1279px) {
    .capabilities-grid--five {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Selected work thumbnails shrink before they stack */
@media (min-width: 761px) and (max-width: 1023px) {
    .proof-item--media {
        grid-template-columns: 170px minmax(0, 1fr);
        gap: 1.35rem;
    }
}

/* Two-column split sections hold longer on tablets before stacking */
@media (max-width: 900px) {
    .home-split,
    .availability-split {
        gap: 2rem;
    }
}

/* Long words and URLs must never force a scrollbar on narrow screens */
.home-prose p,
.layer-body p,
.proof-body,
.bring-card p,
.page-prose p,
.hero-subtitle,
.hero-trust-list {
    overflow-wrap: break-word;
}

/* Comfortable tap targets and edge spacing on phones */
@media (max-width: 479px) {
    .btn {
        padding: 0.95rem 1.35rem;
    }

    .home-block {
        padding: clamp(3rem, 12vw, 4rem) 0;
    }

    .layer {
        padding: 1.75rem 0;
    }

    .work-card,
    .bring-card,
    .engagement-card {
        padding: 1.5rem 1.25rem;
    }

    .image-band img {
        height: 200px;
    }

    .image-band-caption p {
        font-size: 0.95rem;
    }
}

/* Very large screens: keep measures readable rather than letting them stretch */
@media (min-width: 1600px) {
    .hero-title {
        max-width: 26ch;
    }

    .home-block-title {
        max-width: 26ch;
    }

    .home-block-head--center .home-block-title {
        max-width: none;
    }
}

/* The step numerals carry meaning — they are the order of the framework, not
   decoration — so they need to be legible rather than a faint tint.
   --rule-strong measured 1.38:1; these sit at ~4.6:1 and ~5:1. */
.layer-index {
    color: var(--text-faint);
}

.layer--key .layer-index {
    color: var(--accent-text);
}

/* Nav links are small (0.78rem) and uppercase, so they need to clear AA on
   their own. --text-muted measured 4.40:1 against the navbar; this sits at
   ~5.7:1 without changing the muted tone used elsewhere. */
.nav-menu a.nav-link {
    color: #5d6774;
}


/* -----------------------------------------------------------------------------
   CHARGED Africa callout

   The full article archive is published on chargedafrica.com, so the Articles
   page carries a standing link to it — shown whether or not anything has been
   published here, since the archive is the real destination either way.
   -------------------------------------------------------------------------- */

.charged-callout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    margin-top: 2rem;
    padding: clamp(1.75rem, 4vw, 2.5rem);
    background: var(--ink);
    border-radius: var(--radius);
}

.charged-callout-body {
    flex: 1 1 22rem;
}

.charged-callout-label {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-on-dark);
}

.charged-callout-title {
    margin: 0 0 0.6rem;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 3vw, 1.7rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--on-dark);
}

.charged-callout-text {
    margin: 0;
    max-width: 48ch;
    font-size: 0.97rem;
    line-height: 1.7;
    color: var(--on-dark-muted);
}

.charged-callout-link {
    flex-shrink: 0;
    background: var(--accent-on-dark);
    border-color: var(--accent-on-dark);
    color: var(--ink);
}

.charged-callout-link:hover {
    background: #d8bc85;
    border-color: #d8bc85;
    color: var(--ink);
}

.charged-callout-link i,
.charged-widget .btn i {
    margin-left: 0.4rem;
    font-size: 0.85em;
}

.charged-widget .btn {
    margin-top: 0.65rem;
}

@media (max-width: 560px) {
    .charged-callout {
        flex-direction: column;
        align-items: flex-start;
    }

    .charged-callout-link {
        width: 100%;
        justify-content: center;
    }
}