/* Light palette, adopted 2026-08-20, replacing the dark scheme the site launched
   with. Two things to know before changing anything here:

   1. --ink is NOT the page background. It is the dark text that sits on gold and
      mint chips, so it stays dark. The page background is on `body` below.
   2. --gold and --mint do double duty: text on the page, and fills carrying dark
      text. A colour dark enough to read as text on cream is too dark to sit
      behind dark text, so these tokens hold the darker "as text" values and the
      few bright fills name #f4b860 / #2dd4bf directly. Those are the dark
      palette's originals, kept deliberately for the buttons, chips and cards. */
:root {
    --ink: #09121e;
    --ink-2: #0e1b2c;
    --paper: #12212f;
    --paper-soft: rgba(18, 33, 47, 0.74);
    --muted: #5a6a78;
    --line: rgba(18, 33, 47, 0.14);
    --gold: #8a6209;
    --copper: #b4531f;
    --mint: #0c7365;
    --blue: #2563eb;
    --panel: rgba(255, 255, 255, 0.86);
    --panel-strong: #ffffff;
    --shadow: 0 22px 60px rgba(18, 33, 47, 0.10);

    /* The vivid originals, for fills that carry dark text. */
    --gold-bright: #f4b860;
    --mint-bright: #2dd4bf;
    --panel-dark: #0d1b2a;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    overflow-x: hidden;
    background:
        radial-gradient(circle at 8% 8%, rgba(45, 212, 191, 0.16), transparent 30vw),
        radial-gradient(circle at 84% 0%, rgba(244, 184, 96, 0.20), transparent 28vw),
        radial-gradient(circle at 70% 86%, rgba(239, 123, 69, 0.14), transparent 34vw),
        linear-gradient(145deg, #fdfbf6 0%, #f5f0e6 46%, #fbf8f2 100%);
    color: var(--paper);
    font-family: "Manrope", "Segoe UI", sans-serif;
}

body::before {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    content: "";
    opacity: 0.34;
    background-image:
        linear-gradient(rgba(18, 33, 47, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18, 33, 47, 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, black, transparent 88%);
}

body::after {
    position: fixed;
    inset: auto -15vw -40vh auto;
    z-index: -1;
    width: 52vw;
    height: 52vw;
    min-width: 460px;
    min-height: 460px;
    pointer-events: none;
    content: "";
    border-radius: 999px;
    background: conic-gradient(from 190deg, rgba(244, 184, 96, 0.24), rgba(45, 212, 191, 0.22), transparent, rgba(239, 123, 69, 0.20));
    filter: blur(42px);
}

a {
    color: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

main {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.hero-section {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.72fr);
    gap: clamp(2rem, 5vw, 5rem);
    min-height: calc(100vh - 88px);
    align-items: center;
    padding: clamp(3rem, 8vw, 7rem) 0 clamp(3rem, 7vw, 6rem);
}

/* The training page's hero is shorter than the home page's.

   The shared rule sets min-height: calc(100vh - 88px), which guarantees a
   full-screen hero. That is right for the home page, whose job is to introduce a
   person. It is wrong here, where the job is to get a visitor to three workshops:
   the hero filled the screen and the workshops began at 972px, entirely below the
   fold on a typical laptop.

   Note the min-height alone was not what held it open — the portrait card is
   630px and the padding another 192px, so the content already exceeded the floor.
   Both had to come down together. */
.hero-section--training {
    min-height: 0;
    padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(1.5rem, 4vw, 3rem);
}

.hero-copy {
    position: relative;
}

.hero-copy::before {
    position: absolute;
    top: -64px;
    left: -54px;
    width: 132px;
    height: 132px;
    content: "";
    border: 1px solid rgba(244, 184, 96, 0.28);
    border-radius: 42px;
    transform: rotate(18deg);
}

.eyebrow {
    margin: 0 0 0.85rem;
    color: var(--mint);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2 {
    color: var(--paper);
    font-family: "Newsreader", Georgia, serif;
    font-weight: 700;
    letter-spacing: -0.055em;
}

/*
   Headings sit inside grid columns roughly half the viewport wide, so vw-based
   sizing has to stay well below the column's share of the viewport or the text
   breaks to one or two words per line.
*/
h1 {
    max-width: 880px;
    margin-bottom: 1.35rem;
    font-size: clamp(2.9rem, 4.15vw, 4.9rem);
    line-height: 0.94;
}

/*
   FocusOnNavigate in Routes.razor gives the h1 tabindex="-1" and focuses it on
   navigation so screen readers land on the page title. That also draws the
   browser's focus ring, which Safari traces around the heading's line boxes and
   so renders as a ragged, stepped box. The heading is not interactive and
   tabindex="-1" keeps it out of the tab order, so hiding the ring costs no
   keyboard accessibility while keeping the screen-reader benefit.
*/
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible {
    outline: none;
}

h2 {
    font-size: clamp(1.8rem, 2.7vw, 2.9rem);
    line-height: 1.04;
}

h3 {
    color: var(--paper);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.hero-lede,
.section-intro p,
.method-copy p,
.contact-section p,
.profile-card li {
    color: var(--paper-soft);
    font-size: clamp(1.03rem, 1.65vw, 1.2rem);
    line-height: 1.72;
}

.hero-lede {
    max-width: 760px;
    margin-bottom: 2rem;
}

.hero-actions,
.contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
}

.primary-link,
.secondary-link {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 900;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.primary-link {
    padding: 0 1.4rem;
    color: #10100c;
    background: linear-gradient(135deg, var(--gold-bright), #ffdd8c);
    box-shadow: 0 18px 48px rgba(244, 184, 96, 0.24);
}

.secondary-link {
    padding: 0 1.25rem;
    /* Deliberately dark on a light page. The tint is the dark palette's own
       rgba(255, 255, 255, 0.05); over cream that composites to something else
       entirely, so the dark base is painted underneath and the tint layered on. */
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #f8f1df;
    background-color: var(--panel-dark);
    background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05));
}

.primary-link:hover,
.secondary-link:hover,
.primary-link:focus-visible,
.secondary-link:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.24);
}

.proof-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: 760px;
    margin-top: 2.4rem;
}

.proof-strip div {
    padding: 1.05rem;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.74);
}

.proof-strip strong,
.proof-strip span {
    display: block;
}

.proof-strip strong {
    color: var(--gold);
    font-family: "Newsreader", Georgia, serif;
    font-size: 1.95rem;
    letter-spacing: -0.04em;
}

.proof-strip span {
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.35;
}

.hero-console {
    position: relative;
    overflow: hidden;
    min-height: 620px;
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid rgba(18, 33, 47, 0.12);
    border-radius: 42px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.60), rgba(255, 255, 255, 0.30)),
        rgba(255, 255, 255, 0.80);
    box-shadow: var(--shadow);
}

.hero-console::before {
    position: absolute;
    inset: -40% -35% auto auto;
    width: 78%;
    aspect-ratio: 1;
    content: "";
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.30), transparent 68%);
}

.console-topline {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.console-topline strong {
    color: var(--paper);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.portrait-card {
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-height: 390px;
    margin: 1.6rem 0 1rem;
    border: 1px solid rgba(18, 33, 47, 0.12);
    border-radius: 34px;
    background:
        radial-gradient(circle at 78% 12%, rgba(244, 184, 96, 0.20), transparent 38%),
        rgba(255, 255, 255, 0.80);
}

.portrait-card img {
    display: block;
    width: 100%;
    height: 440px;
    object-fit: cover;
    object-position: 50% 14%;
}

/* The caption sits in its own panel below the photograph rather than floating over
   it, on both pages. Over the image it obscured the subject and needed a heavy blur
   and a near-opaque backing to stay legible; in normal flow it needs neither, so the
   panel is lighter and the photograph is never covered. The card grows to fit. */
.portrait-overlay {
    margin: 1rem;
    padding: 1rem;
    border: 1px solid rgba(18, 33, 47, 0.12);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.80);
}

.portrait-overlay span,
.portrait-overlay strong {
    display: block;
}

.portrait-overlay span {
    color: var(--mint);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.portrait-overlay strong {
    margin-top: 0.25rem;
    color: var(--paper);
    font-family: "Newsreader", Georgia, serif;
    font-size: 1.7rem;
    line-height: 1;
    letter-spacing: -0.05em;
}

.kpi-orbit {
    position: relative;
    display: grid;
    min-height: 340px;
    place-items: center;
    margin: 2rem 0;
}

.orbital-ring {
    position: absolute;
    width: min(82%, 320px);
    aspect-ratio: 1;
    border: 1px solid rgba(244, 184, 96, 0.28);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(244, 184, 96, 0.07), transparent 58%),
        conic-gradient(from 120deg, rgba(45, 212, 191, 0.7), rgba(244, 184, 96, 0.28), transparent, rgba(45, 212, 191, 0.7));
    mask: radial-gradient(circle, transparent 58%, black 59%);
    animation: slow-spin 18s linear infinite;
}

@keyframes slow-spin {
    to {
        transform: rotate(360deg);
    }
}

.kpi-core {
    position: relative;
    display: grid;
    width: 180px;
    height: 180px;
    place-items: center;
    border: 1px solid rgba(18, 33, 47, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.80);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70), 0 20px 54px rgba(18, 33, 47, 0.09);
}

.kpi-core span,
.kpi-core em {
    color: var(--muted);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.kpi-core strong {
    margin: -0.7rem 0;
    color: var(--paper);
    font-family: "Newsreader", Georgia, serif;
    font-size: 4.4rem;
    line-height: 1;
    letter-spacing: -0.08em;
}

.kpi-chip {
    position: absolute;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(18, 33, 47, 0.12);
    border-radius: 999px;
    color: var(--paper);
    font-size: 0.8rem;
    font-weight: 900;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 18px 46px rgba(18, 33, 47, 0.12);
}

.chip-one {
    top: 42px;
    left: 24px;
    color: var(--gold);
}

.chip-two {
    right: 18px;
    bottom: 74px;
    color: var(--mint);
}

.chip-three {
    bottom: 34px;
    left: 38px;
    color: var(--blue);
}

.signal-stack {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.9rem;
}

/*
   FlexCore styles these controls for a light background in component-scoped
   CSS, which Blazor compiles to `.fx-progress[b-…]`. That outranks a plain
   two-class selector and is loaded after this file, so the dark treatment below
   repeats the class purely to win on specificity. Overriding here rather than
   editing vendor/FlexCore keeps that control general-purpose for other hosts.
*/
.signal-stack .fx-progress.fx-progress,
.active-brief .fx-chart.fx-chart {
    border: 1px solid rgba(18, 33, 47, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--paper);
}

.signal-stack .fx-progress.fx-progress {
    margin: 0;
    padding: 1rem;
}

.signal-stack .fx-progress-header.fx-progress-header {
    color: var(--paper);
    font-weight: 900;
}

.signal-stack .fx-progress-status.fx-progress-status,
.signal-stack .fx-progress-detail.fx-progress-detail {
    color: var(--muted);
}

/* The control defaults this to a monospace stack, which reads as raw terminal
   output next to the rest of the page. */
.signal-stack .fx-progress-detail.fx-progress-detail {
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.5;
}

.signal-stack .fx-progress-track.fx-progress-track {
    background: rgba(18, 33, 47, 0.09);
}

.signal-stack .fx-progress-fill.fx-progress-fill {
    background: linear-gradient(90deg, var(--mint), var(--gold));
}

.section-grid,
.results-section,
.services-section,
.background-section,
.method-section,
.testimonials-section,
.credibility-section,
.contact-section {
    padding: clamp(4rem, 8vw, 7rem) 0;
}

.section-grid {
    display: grid;
    grid-template-columns: 0.75fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.section-intro {
    position: sticky;
    top: 124px;
}

.edge-cards {
    display: grid;
    gap: 1rem;
}

.edge-card,
.result-card,
.service-card,
.active-brief,
.background-panel,
.background-list article,
.timeline article,
.testimonial-card,
.quote-card,
.profile-card,
.contact-section {
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.edge-card {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 1.2rem;
    padding: clamp(1.15rem, 2.2vw, 1.8rem);
    border-radius: 32px;
}

.edge-card span {
    color: #b07c16;
    font-family: "Newsreader", Georgia, serif;
    font-size: 3.2rem;
    letter-spacing: -0.08em;
}

.edge-card p,
.result-card p,
.service-card p,
.background-panel p,
.background-list p,
.timeline p,
.testimonial-card em,
.quote-card span {
    color: var(--muted);
    line-height: 1.7;
}

.section-heading {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(240px, 0.42fr);
    gap: 2rem;
    align-items: end;
    margin-bottom: 1.5rem;
}

.section-heading h2 {
    max-width: 820px;
}

.section-heading > p {
    color: var(--paper-soft);
    line-height: 1.7;
}

/* Five fixed columns squeezed each card to about 104px at tablet widths, far
   narrower than a single word of the headline, so the text spilled outside the
   card. auto-fit keeps five columns wherever there is room for them and drops to
   four, three or two as the viewport narrows, with 220px the floor at which the
   longest headline word still fits. */
.result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    /* Three shared rows — sector, headline, description — so the cards line up with
       each other rather than each stacking independently. The cards opt into these
       rows with subgrid below. */
    grid-template-rows: auto auto 1fr;
    gap: 1rem;
}

/*
   Restored 2026-08-13. This rule was collateral damage when the reference-documents
   CSS was removed: it was a shared group ending in ".document-list span", and
   deleting that selector took the whole block — so the client names here and the
   labels in the background list both fell back to inheriting near-black text on a
   near-black card, invisible on both. When removing a selector from a group, delete
   the selector, never the rule.
*/
.result-card span,
.background-list span {
    color: var(--mint);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/*
   Each card spans the grid's three rows and adopts them with subgrid, so a sector
   heading that wraps to two lines pushes every card's headline down together
   instead of only its own. Previously each card was an independent flex column and
   the headlines and descriptions started at different heights across the row.

   Where subgrid is unsupported the declaration is ignored and the card falls back
   to a plain auto-row grid: content still stacks from the top and reads correctly,
   it simply loses the cross-card alignment.
*/
.result-card {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0.85rem;
    min-height: 260px;
    padding: 1.2rem;
    border-radius: 30px;
    background:
        radial-gradient(circle at 90% 0%, rgba(244, 184, 96, 0.13), transparent 38%),
        var(--panel);
}

/* Sized so the longest single word — "Governance" — fits inside the narrowest
   column the grid above will produce. A word cannot wrap, so anything larger
   renders outside the card no matter what the container does. break-word is the
   backstop for any future headline with a longer word than this one. */
.result-card strong {
    display: block;
    color: var(--gold);
    font-family: "Newsreader", Georgia, serif;
    font-size: clamp(1.9rem, 3vw, 2.2rem);
    line-height: 0.95;
    letter-spacing: -0.08em;
    overflow-wrap: break-word;
}

.service-matrix {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

/*
   Content flows from the top rather than being spread. These cards used to hold a
   third child — a button — and space-between distributed the three sensibly. With
   the button gone that pushed the description to the foot of the card and left a
   gap under the title.
*/
.service-card {
    display: flex;
    min-height: 300px;
    flex-direction: column;
    justify-content: flex-start;
    /* Centred throughout — label, heading, description and cue — rather than
       centring the top two and leaving the body ranged left, which reads as an
       accident rather than a choice. */
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 30px;
    text-align: center;
    transition: border-color 180ms ease, transform 180ms ease, background 180ms ease;
}

.service-card.active {
    border-color: rgba(45, 212, 191, 0.55);
    background: linear-gradient(145deg, rgba(45, 212, 191, 0.12), rgba(255, 255, 255, 0.86));
    transform: translateY(-4px);
}

.service-card span {
    color: var(--gold);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}


.active-brief {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(280px, 0.62fr);
    gap: 2rem;
    align-items: center;
    margin-top: 1rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    border-radius: 34px;
}

.active-brief p {
    color: var(--paper-soft);
    line-height: 1.72;
}

.active-brief .fx-chart {
    padding: 1rem;
}

.active-brief .fx-chart-title {
    color: var(--paper);
    font-weight: 900;
}

/*
   The class is doubled on purpose. FlexCore's scoped component CSS compiles to
   ".fx-chart-row-label[b-xxxxxxxx]" and is bundled into DanayalFinance.styles.css,
   which loads after app.css — so a single-class override here ties on specificity
   and loses on order. Doubling wins without touching vendor/FlexCore.
*/
.active-brief .fx-chart-row-label.fx-chart-row-label {
    color: var(--paper);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.active-brief .fx-chart-title.fx-chart-title {
    color: var(--paper);
}

/*
   FlexCore paints a 1px #e5e7eb axis rule at the right edge of every bar track
   using a background gradient. On a light theme that reads as a baseline; on this
   dark panel it is three bright white ticks floating past the ends of the bars.
   "background: none" clears the gradient rather than only recolouring it.
*/
.active-brief .fx-chart-row-bar-container.fx-chart-row-bar-container {
    background: none;
}

.background-section {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.background-panel,
.background-list article {
    border-radius: 34px;
    padding: clamp(1.25rem, 3vw, 2rem);
}

.background-panel {
    background:
        radial-gradient(circle at 10% 0%, rgba(45, 212, 191, 0.16), transparent 42%),
        var(--panel-strong);
}

.background-list {
    display: grid;
    gap: 1rem;
}

.background-list article {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 1rem;
    align-items: start;
}

.method-section {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.timeline {
    position: relative;
    display: grid;
    gap: 1rem;
}

.timeline::before {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 28px;
    content: "";
    border-left: 1px dashed rgba(244, 184, 96, 0.30);
}

.timeline article {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 1rem;
    padding: 1.05rem;
    border-radius: 26px;
}

.timeline span {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border-radius: 18px;
    color: var(--ink);
    font-weight: 900;
    background: var(--gold-bright);
}

/*
   Eight testimonials of very different lengths. auto-fit gives four columns where
   there is room and steps down as the viewport narrows, and the three shared rows
   — quote, attribution, organisation — let the cards line up with one another
   rather than each stacking to its own rhythm. Same approach as the result cards.
*/
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    grid-template-rows: 1fr auto auto;
    gap: 1rem;
}

.testimonial-card {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0.75rem;
    min-height: 0;
    padding: clamp(1.25rem, 3vw, 1.8rem);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.20)),
        var(--panel);
}

/*
   The card is its own container, so the quote can size against the card's width
   rather than the viewport's. With three wide testimonials the big serif reads
   well; with eight in four columns the same size stretched a five-word quote over
   thirteen line-slots. A viewport-based clamp cannot tell those cases apart.
*/
.testimonial-card {
    container-type: inline-size;
}

.testimonial-card p {
    color: var(--paper);
    font-family: "Newsreader", Georgia, serif;
    font-size: clamp(1.45rem, 2.4vw, 2.25rem);
    line-height: 1.06;
    letter-spacing: -0.05em;
}

@container (max-width: 340px) {
    .testimonial-card p {
        font-size: 1.28rem;
        line-height: 1.28;
        letter-spacing: -0.03em;
    }
}

.testimonial-card span,
.testimonial-card em {
    display: block;
}

.testimonial-card span {
    color: var(--gold);
    font-weight: 900;
}

.testimonial-card em {
    margin-top: 0.25rem;
    font-size: 0.9rem;
    font-style: normal;
}

.credibility-section {
    display: grid;
    grid-template-columns: 0.72fr 1fr;
    gap: 1rem;
}

.quote-card,
.profile-card {
    border-radius: 36px;
    padding: clamp(1.4rem, 3vw, 2.2rem);
}

.quote-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        radial-gradient(circle at 90% 10%, rgba(239, 123, 69, 0.22), transparent 40%),
        var(--panel-strong);
}

.quote-card p {
    color: var(--paper);
    font-family: "Newsreader", Georgia, serif;
    font-size: clamp(1.7rem, 3vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.05em;
}

.profile-card ul {
    display: grid;
    gap: 1rem;
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
}

.profile-card li {
    position: relative;
    padding-left: 1.7rem;
    font-size: 1rem;
}

.profile-card li::before {
    position: absolute;
    top: 0.72rem;
    left: 0;
    width: 9px;
    height: 9px;
    content: "";
    border-radius: 50%;
    background: #12998a;
    box-shadow: 0 0 0 7px rgba(18, 153, 138, 0.14);
}

.contact-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
    margin: clamp(2rem, 5vw, 5rem) 0 clamp(3rem, 8vw, 7rem);
    padding: clamp(1.4rem, 4vw, 2.5rem);
    border-radius: 40px;
    background:
        radial-gradient(circle at 12% 10%, rgba(45, 212, 191, 0.14), transparent 44%),
        linear-gradient(135deg, rgba(244, 184, 96, 0.16), rgba(45, 212, 191, 0.10));
}

.contact-section h2 {
    max-width: 780px;
}

.contact-section p {
    max-width: 720px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/*
   These cards are two-column grids holding three children: a number badge, a
   heading, and a paragraph. Auto-placement puts the badge and the paragraph in
   the same narrow first column, squeezing the paragraph to one word per line.
   Pin the text to the second column wherever the two-column layout applies;
   below 640px both cards collapse to a single column and this must not run.
*/
@media (min-width: 641px) {
    .edge-card > h3,
    .edge-card > p,
    .timeline article > h3,
    .timeline article > p {
        grid-column: 2;
    }

    /* Let the badge span both text rows so neither row is padded out to the
       badge's height, which would strand the heading above the paragraph. */
    .edge-card > span,
    .timeline article > span {
        grid-row: 1 / span 2;
    }
}

@media (max-width: 980px) {
    .hero-section,
    .section-grid,
    .background-section,
    .method-section,
    .credibility-section,
    .active-brief,
    /* .section-heading was missing here, and its second column is
       minmax(240px, …) — a hard floor that never shrinks. On a phone that left
       roughly 70px for the headline, so every section title broke one word per
       line. It has to collapse with the rest. */
    .section-heading,
        .contact-section {
        grid-template-columns: 1fr;
    }

    /* Same class of fault: a fixed 150px label column beside the text. With the
       labels now rendered as chips, that column wrapped them onto three lines. */
    .background-list article {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .hero-section {
        min-height: auto;
    }

    .hero-console {
        min-height: 560px;
    }

    .section-intro {
        position: static;
    }

    .service-matrix {
        grid-template-columns: 1fr;
    }

    .contact-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    main {
        width: min(100% - 24px, 1180px);
    }

    h1 {
        font-size: clamp(3rem, 18vw, 4.8rem);
    }

    .proof-strip {
        grid-template-columns: 1fr;
    }

    .hero-console {
        min-height: 500px;
        border-radius: 30px;
    }

    .portrait-card img {
        height: 370px;
    }

    .kpi-orbit {
        min-height: 285px;
    }

    .kpi-core {
        width: 152px;
        height: 152px;
    }

    .kpi-core strong {
        font-size: 3.55rem;
    }

    .edge-card,
    .background-list article,
    .timeline article {
        grid-template-columns: 1fr;
    }

    .timeline::before {
        display: none;
    }

    .primary-link,
    .secondary-link {
        width: 100%;
    }
}

/* ── Site footer ─────────────────────────────────────────────────────────── */

.site-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 2.5rem 1.5rem 3rem;
    border-top: 1px solid var(--line);
    margin-top: 4rem;
    color: var(--muted);
    font-size: 0.85rem;
}

.footer-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--muted);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.footer-link:hover,
.footer-link:focus-visible {
    color: var(--mint);
}

/* ── Cookie consent banner ───────────────────────────────────────────────── */

.consent-banner {
    position: fixed;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 900;
    margin-inline: auto;
    max-width: 46rem;
    display: flex;
    align-items: center;
    gap: 1.75rem;
    padding: 1.35rem 1.6rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel-strong);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow);
    color: var(--paper-soft);
}

/* [hidden] alone loses to the display:flex above. */
.consent-banner[hidden] {
    display: none;
}

.consent-banner__text strong {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--paper);
    font-size: 0.95rem;
}

.consent-banner__text p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
}

.consent-banner__actions {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 0;
}

.consent-btn {
    padding: 0.6rem 1.15rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.consent-btn--accept {
    background: var(--mint-bright);
    border-color: var(--mint-bright);
    color: var(--ink);
}

.consent-btn--accept:hover,
.consent-btn--accept:focus-visible {
    background: #5fe3d2;
    border-color: #5fe3d2;
}

.consent-btn--decline {
    background: transparent;
    color: var(--paper-soft);
}

.consent-btn--decline:hover,
.consent-btn--decline:focus-visible {
    border-color: var(--paper-soft);
    color: var(--paper);
}

@media (max-width: 640px) {
    .consent-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 1.1rem;
    }

    .consent-banner__actions .consent-btn {
        flex: 1;
    }
}

/* ── Coaching page portrait ──────────────────────────────────────────────── */

/* The home page portrait is a tall 2:3 crop; the coaching headshot is 3:2
   landscape. Reusing the card unchanged would scale the wide image to a 440px
   tall box and crop the sides hard. Shortening the frame and shifting the focal
   point right keeps the face centred and the framing natural. */
.portrait-card--wide img {
    height: 360px;
    object-position: 56% 22%;
}

@media (max-width: 900px) {
    .portrait-card--wide img {
        height: 300px;
    }
}



/* ── Service cards as the focus selector ─────────────────────────────────── */

/*
   The cards carry role="button", so they need the affordances of one: a pointer,
   and a visible focus ring for keyboard users. The ring is drawn with outline so
   it never shifts the card's layout.
*/
.service-card[data-focus-trigger] {
    cursor: pointer;
}

.service-card[data-focus-trigger]:hover {
    border-color: rgba(45, 212, 191, 0.4);
}

.service-card[data-focus-trigger]:focus-visible {
    outline: 2px solid var(--mint);
    outline-offset: 3px;
}

/*
   Every brief is rendered server-side and the server marks one .is-active. The
   rest are hidden here by default — no runtime class, no script involved — so
   they are never shown stacked, on any navigation.

   The no-JavaScript fallback lives in a <noscript> block in App.razor, which
   reveals all of them. That is the only correct direction: a rule that depends on
   script having run cannot be trusted, because the thing it guards is laid out
   first. Two earlier attempts got this wrong — gating on .focus-switching (added
   by focus-cards.js, far too late) and then on .js (added inline in <head>, but
   wiped by Blazor's enhanced navigation).
*/
.services-section .active-brief {
    display: none;
}

.services-section .active-brief.is-active {
    display: grid;
}

/* The sector descriptor now heads the card in place of the client's name, so it
   takes the label styling the name used to have. */
.result-card__client span {
    display: block;
    line-height: 1.4;
}

/* ── PROTOTYPE: alternatives to the bar chart in the focus panel ──────────── */

/*
   FlexCore draws these charts' gridlines, axis and tick labels as inline SVG
   presentation attributes in light-theme greys (#e5e7eb, #9ca3af, #6b7280).
   Presentation attributes lose to CSS, so they can be recoloured here without
   touching vendor/FlexCore.
*/
.impact-chart--svg svg line {
    stroke: rgba(18, 33, 47, 0.16);
}

.impact-chart--svg svg text {
    fill: var(--muted);
    font-family: "Manrope", "Segoe UI", sans-serif;
}

/* The funnel labels sit on the segments themselves, so they need to read against
   the fill rather than the panel behind it. */
.impact-chart--svg svg text[text-anchor="middle"] {
    fill: var(--ink);
    font-weight: 700;
}

/* Before / after table */

.focus-table-wrap {
    align-self: center;
    width: 100%;
}

.focus-table-title {
    margin: 0 0 0.9rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.focus-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    line-height: 1.5;
}

.focus-table th {
    padding: 0 0 0.6rem;
    border-bottom: 1px solid var(--line);
    color: var(--mint);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-align: left;
    text-transform: uppercase;
}

.focus-table th:last-child {
    color: var(--gold);
}

.focus-table td {
    padding: 0.75rem 1.2rem 0.75rem 0;
    border-bottom: 1px solid rgba(18, 33, 47, 0.12);
    color: var(--paper-soft);
    vertical-align: top;
}

/* The "after" column is the point of the table, so it carries the emphasis. */
.focus-table td:last-child {
    padding-right: 0;
    color: var(--paper);
    font-weight: 600;
}

.focus-table tr:last-child td {
    border-bottom: none;
}

@media (max-width: 640px) {
    .focus-table {
        font-size: 0.86rem;
    }

    .focus-table td {
        padding-right: 0.7rem;
    }
}

/* ── Focus panel opens inside the card grid ──────────────────────────────── */

/*
   The open panel is a grid item spanning every column, so it reads as the card
   row expanding rather than as a separate block far below. focus-cards.js moves
   it to the end of the clicked card's row; the rule below is what makes it span.
*/
.service-matrix > .active-brief {
    grid-column: 1 / -1;
    margin: 0;
}

/* ── Service card click cue ──────────────────────────────────────────────── */

/*
   Reads as a button but is a span: the card carries role="button", and a real
   <button> nested inside it would be invalid and would take the keyboard focus
   the card needs. The label comes from CSS so no script has to maintain it — the
   .active class the card already toggles is enough.
*/
.card-cue {
    display: inline-flex;
    align-items: center;
    align-self: center;
    margin-top: auto;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(18, 33, 47, 0.06);
    color: var(--paper);
    font-size: 0.84rem;
    font-weight: 800;
    white-space: nowrap;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.card-cue::after {
    content: "Click here for more \2193";
}

.service-card.active .card-cue {
    border-color: var(--mint-bright);
    background: var(--mint-bright);
    color: #07101c;
}

.service-card.active .card-cue::after {
    content: "Showing below";
}

.service-card[data-focus-trigger]:hover .card-cue {
    border-color: rgba(45, 212, 191, 0.55);
    background: rgba(45, 212, 191, 0.14);
}

.service-card.active[data-focus-trigger]:hover .card-cue {
    background: var(--mint-bright);
}

/* ── Board pack: filter steps ────────────────────────────────────────────── */

.funnel-steps {
    align-self: center;
    width: 100%;
}

.funnel-steps ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
   Count, label and bar on one row. The count column is fixed so every number is
   right-aligned against the same edge and the narrowing reads down the column.
*/
.funnel-steps li {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr);
    grid-template-areas:
        "count label"
        "count track";
    gap: 0.15rem 0.9rem;
    align-items: center;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(18, 33, 47, 0.12);
}

.funnel-steps li:last-child {
    border-bottom: none;
}

.funnel-steps__count {
    grid-area: count;
    align-self: center;
    color: var(--gold);
    font-family: "Newsreader", Georgia, serif;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: -0.04em;
    text-align: right;
}

.funnel-steps__label {
    grid-area: label;
    color: var(--paper);
    font-size: 0.9rem;
    font-weight: 600;
}

.funnel-steps__track {
    grid-area: track;
    display: block;
    height: 8px;
    border-radius: 999px;
    background: rgba(18, 33, 47, 0.06);
}

.funnel-steps__bar {
    display: block;
    height: 100%;
    min-width: 8px;
    border-radius: 999px;
}

@media (max-width: 640px) {
    .funnel-steps li {
        grid-template-columns: 2.6rem minmax(0, 1fr);
    }

    .funnel-steps__count {
        font-size: 1.35rem;
    }

    .funnel-steps__label {
        font-size: 0.84rem;
    }
}

/*
   The closing row states the point of the narrowing, so it spans the full width
   with no count or bar and resets the grid the other rows use.

   The selector needs the element as well as the class: ".funnel-steps li" above is
   class + element, which outranks a class on its own. Without it the row stayed a
   grid and the text was squeezed into the 51px number column, wrapping 14 lines.
*/
.funnel-steps li.funnel-steps__outcome {
    display: block;
    margin-top: 0.35rem;
    padding: 0.85rem 0 0.2rem;
    border-top: 1px solid var(--line);
    border-bottom: none;
    color: var(--mint);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.5;
}

/* ── Speaking photograph band (coaching page) ────────────────────────────── */

.speaking-band {
    padding: clamp(1rem, 3vw, 2rem) 0;
}

.speaking-band figure {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 34px;
    box-shadow: var(--shadow);
}

/*
   The source is 1537x1023, so it is displayed at or below its native width and
   never upscaled — enlarging it past that would soften it without adding detail.
   A capped aspect keeps the band from dominating the page on wide screens.
*/
.speaking-band img {
    display: block;
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    object-position: 50% 35%;
}

@media (max-width: 640px) {
    .speaking-band img {
        max-height: 320px;
    }
}

/* ── Testimonial carousel ────────────────────────────────────────────────── */

/*
   The overlay below applies by default — no runtime class — so the quotes are
   never shown stacked. The server marks the first slide .is-current, so one quote
   is visible even before testimonial-carousel.js runs, and still visible if it
   never does.

   Without JavaScript the <noscript> block in App.razor turns the track back into
   an ordinary list with every quote readable.
*/
.testimonial-carousel__track {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.testimonial-slide blockquote {
    margin: 0;
    padding: clamp(1.6rem, 4vw, 3rem);
    border: 1px solid var(--line);
    border-radius: 32px;
    background: var(--panel);
    box-shadow: var(--shadow);
}

/* Quote well above the attribution, as on the reference site. */
.testimonial-slide blockquote p {
    margin: 0 0 1.6rem;
    color: var(--paper);
    font-family: "Newsreader", Georgia, serif;
    font-size: clamp(1.5rem, 3vw, 2.6rem);
    line-height: 1.14;
    letter-spacing: -0.04em;
}

/* Paragraphs within one quote sit closer to each other than the quote sits to
   the attribution, so a multi-paragraph testimonial still reads as one quote. */
.testimonial-slide blockquote p + p {
    margin-top: 0.9rem;
}

.testimonial-slide footer span,
.testimonial-slide footer em {
    display: block;
    font-style: normal;
}

.testimonial-slide footer span {
    color: var(--gold);
    font-size: 0.95rem;
    font-weight: 800;
}

.testimonial-slide footer em {
    margin-top: 0.15rem;
    color: var(--muted);
    font-size: 0.92rem;
}

/* Engaged state: one slide visible, the rest stacked behind it. */
.testimonial-carousel .testimonial-carousel__track {
    display: grid;
    grid-template-areas: "slide";
    gap: 0;
}

/* display: none rather than opacity/visibility, so a hidden slide takes no
   height. Stacked in one grid cell they all contributed height, which made the
   track as tall as the LONGEST quote — leaving a large dead gap above the arrows
   on every shorter one. Reported on a phone 2026-08-29, where it is worst.

   ⚠️ The consequence is that the arrows and dots move as you page through,
   because the track height now follows each quote. That is the trade for
   removing the gap; a min-height on the track would damp it at the cost of
   bringing some of the gap back.

   display cannot be transitioned, so the cross-fade becomes a fade-in on the
   incoming slide. */
.testimonial-carousel .testimonial-slide {
    grid-area: slide;
    display: none;
}

.testimonial-carousel .testimonial-slide.is-current {
    display: block;
    animation: testimonial-fade-in 260ms ease;
}

@keyframes testimonial-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.testimonial-carousel__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.testimonial-carousel__controls[hidden] {
    display: none;
}

.carousel-arrow {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(18, 33, 47, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--paper);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease;
}

.carousel-arrow:hover,
.carousel-arrow:focus-visible {
    border-color: var(--mint);
    background: rgba(45, 212, 191, 0.14);
}

.testimonial-carousel__dots {
    display: flex;
    gap: 0.5rem;
}

.carousel-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(18, 33, 47, 0.20);
    cursor: pointer;
    transition: background 180ms ease, transform 180ms ease;
}

.carousel-dot.is-current {
    background: var(--mint);
    transform: scale(1.35);
}

.carousel-dot:focus-visible {
    outline: 2px solid var(--mint);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .testimonial-carousel .testimonial-slide.is-current {
        animation: none;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Two devices the light palette introduced, 2026-08-20.

   Both exist for the same reason: the vivid #2dd4bf and #f4b860 are ~1.9:1 and
   ~1.8:1 as plain text on cream — unreadable — but they are the site's colours
   and dropping them would flatten it. So instead of dulling them, the elements
   that carry them are given a dark ground to sit on.
   ──────────────────────────────────────────────────────────────────────────── */

/* Small-caps labels become chips. .card-cue is excluded because it is a button
   affordance, not a label — and because this rule would otherwise beat
   .service-card.active .card-cue on specificity and kill the active state. */
.eyebrow,
.result-card span,
.background-list span,
.service-card span:not(.card-cue) {
    display: inline-block;
    width: max-content;
    max-width: 100%;
    justify-self: start;
    padding: 0.32rem 0.68rem;
    border-radius: 999px;
    text-align: center;
    color: var(--mint-bright);
    background-color: var(--panel-dark);
    background-image: linear-gradient(rgba(45, 212, 191, 0.08), rgba(45, 212, 191, 0.08));
}

/* Service-card labels are gold rather than teal, so they keep their own colour. */
.service-card span:not(.card-cue) {
    color: var(--gold-bright);
    background-image: linear-gradient(rgba(244, 184, 96, 0.10), rgba(244, 184, 96, 0.10));
    /* No optical hang here. That was for left-aligned cards, where the pill's
       padding left the label looking indented against the heading; centred, it
       would just push the pill off-centre by 11px. */
    justify-self: center;
}

/* Theme and result cards sit on a dark panel, so their serif headings can carry
   the full-strength gold. Rather than restyling each descendant, the palette
   tokens are re-pointed for the subtree — every rule inside then resolves as it
   would have on the old dark scheme, including the gold radial in the card's own
   background. --panel is opaque here; translucent would let cream through. */
.result-card {
    --paper: #f8f1df;
    --paper-soft: rgba(248, 241, 223, 0.76);
    --muted: #b9c2c2;
    --gold: var(--gold-bright);
    --mint: var(--mint-bright);
    --line: rgba(255, 255, 255, 0.12);
    --panel: var(--panel-dark);

    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--paper);
    box-shadow: 0 26px 64px rgba(13, 27, 42, 0.26);
}

.result-card p {
    color: var(--paper-soft);
}

/* No chip needed inside a card that is already dark. These go full width, so the
   chip rule's centring would apply where it previously read left-aligned under a
   left-aligned heading. */
.result-card span {
    display: block;
    width: auto;
    justify-self: stretch;
    padding: 0;
    text-align: left;
    background: none;
    color: var(--mint);
}

/* .eyebrow is a <p>, so the generic paragraph rules — `.contact-section p`,
   `.section-intro p`, `.method-copy p` — match it at (0,1,1) and beat the plain
   `.eyebrow` chip rule above. Matching their specificity with p.eyebrow, later in
   the file, wins.

   Colour was the first casualty: they painted --paper-soft on the dark chip at
   1.05:1, losing "Next step" and "Current focus" entirely.

   Size was the second, found 2026-08-20. Those same rules set
   clamp(1.03rem, 1.65vw, 1.2rem), so six of the site's twenty-three eyebrows
   rendered at 16.5px against the intended 12.5px — purely according to which
   container each one happened to sit in. Nobody chose that. Pinning both
   properties here keeps every chip identical wherever it appears. */
p.eyebrow {
    color: var(--mint-bright);
}

/* Chip sizes are set one at a time, on purpose.

   Six of the site's chips render larger than the rest because the generic
   paragraph rules (`.section-intro p`, `.method-copy p`, `.contact-section p`)
   catch them — .eyebrow is a <p>. That started as an accident, but which of them
   stay large is now a deliberate choice, made chip by chip. Do not "fix" this by
   pinning a size on p.eyebrow: that resizes all twenty-three at once, which was
   tried on 2026-08-20 and was not wanted.

   Larger, by choice:
     - "Corporate Training Workshops" — set here, to match…
     - "1-1 Executive Coaching" — larger via .section-intro p
     - "Next step" on both pages — left as it fell, and liked

   Back to the standard size, by choice: "The edge" and "Method" on the home page,
   and "How the work runs" on the coaching page. The ids keep the two pages apart
   — #edge and #method exist only on the home page, #coaching-method only on the
   coaching one. */
.workshops-section p.eyebrow {
    /* The same clamp and line-height that "1-1 Executive Mentoring" inherits from
       `.section-intro p`, not a fixed equivalent. That rule scales with the
       viewport, so a fixed value matched it at one width and drifted at every
       other — 16.5px against 19.2px once the window was wide enough. Copying the
       clamp keeps them identical at any size. */
    font-size: clamp(1.03rem, 1.65vw, 1.2rem);
    line-height: 1.72;
}

#edge p.eyebrow,
#method p.eyebrow,
#coaching-method p.eyebrow {
    font-size: 0.78rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Corporate workshops — the coaching page's one commercial block.

   Deliberately NOT the dark .result-card treatment used by the theme cards
   above it. Those describe what coaching covers; these are things a company can
   buy, and five dark panels followed by three more would read as one continuous
   list rather than a change of subject. The gold border ties them to the nav and
   Home pills — the same "this is a thing you act on" family.
   ──────────────────────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────────────
   The one section on a dark ground.

   Everything else on the site sits on cream. This is the commercial block, and
   white tiles on a cream page separated only by a gold hairline did not read as a
   distinct offer. On a dark panel the same tiles carry real weight.

   The section re-points the palette tokens for its own subtree — the same device
   the result cards use — so headings, copy and rules resolve for a dark ground.
   .workshop-card then points them back, because the tiles stay light.
   ──────────────────────────────────────────────────────────────────────────── */
/* The home page's "Check out Corporate Training Workshops" button links straight
   here. The header is sticky, so without this the section's own heading arrives
   underneath it.

   The value has to clear the TALLER header. Desktop is one row at 102px, but
   below 820px the nav takes its own row and it grows to ~168px — measured, after
   a first attempt at 120px left the "Corporate Training Workshops" chip behind
   the header on a narrow screen. 190px clears the tall case with room to spare
   and merely lands a little low on desktop, which is the harmless direction to
   err. Set on the one section that is a cross-page anchor target. */
.workshops-section {
    scroll-margin-top: 190px;

    --paper: #f8f1df;
    --paper-soft: rgba(248, 241, 223, 0.78);
    --muted: #b9c2c2;
    --line: rgba(255, 255, 255, 0.14);

    margin: clamp(1.5rem, 4vw, 3rem) 0;
    padding: clamp(1.75rem, 4vw, 3rem);
    border-radius: 40px;
    color: var(--paper);
    background:
        radial-gradient(circle at 88% 8%, rgba(244, 184, 96, 0.16), transparent 46%),
        radial-gradient(circle at 6% 92%, rgba(45, 212, 191, 0.12), transparent 44%),
        var(--panel-dark);
    box-shadow: 0 30px 80px rgba(13, 27, 42, 0.28);
}

/* On the dark panel a dark pill would be invisible, so this one is outlined
   rather than filled: a gold border in the same 2px weight as the nav pill and
   the tiles, with the panel showing through. The teal text stays at 9.3:1. */
.workshops-section p.eyebrow {
    padding: 0.34rem 0.95rem;
    border: 2px solid #f4b860;
    background: none;
    color: var(--mint-bright);
}

.workshops-section .workshop-note {
    color: var(--paper-soft);
}

/* The secondary button is a dark pill by design, which disappears here. Outlined
   instead, which is what it looked like on the original dark site. */
.workshops-section .secondary-link {
    border-color: rgba(255, 255, 255, 0.28);
    color: var(--paper);
    background-color: transparent;
    background-image: none;
}

.workshops-section .secondary-link:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.06);
}

/* Single column since the GROW photograph was removed (2026-08-27). This was a
   two-column grid holding copy and a photograph; with one child left, the old
   `minmax(0, 1fr) minmax(280px, 0.85fr)` would have squeezed the copy beside
   280px of nothing. The measure cap matches .workshop-note further down. */
.workshops-intro {
    max-width: 68ch;
}

.workshop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* Four shared rows — format, title, lede, outcomes — so the cards line up row
       by row instead of each stacking independently. There was a fifth, "Inside",
       removed 2026-08-20. */
    grid-template-rows: auto auto auto auto 1fr;
    gap: 1.1rem;
    margin-top: 1.6rem;
}

/* Tokens back to their light-page values: the tiles are light objects sitting on
   the dark panel, and inherit from a section that has re-pointed them. */
.workshop-card {
    --paper: #12212f;
    --paper-soft: rgba(18, 33, 47, 0.74);
    --muted: #5a6a78;
    --line: rgba(18, 33, 47, 0.14);

    /* Set explicitly. Re-pointing the tokens is not enough on its own: colour is
       inherited, so without this the tile took the section's cream and any text
       without a rule of its own — the format line — rendered at 1.13:1 on white. */
    color: var(--paper);

    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
    padding: clamp(1.3rem, 3vw, 1.8rem);
    border: 2px solid #f4b860;
    border-radius: 30px;
    background: var(--panel-strong);
    box-shadow: var(--shadow);
}

/* The sequence numeral. Same deep amber as the numbered cards on the home page,
   so the two numbered sets on the site look related. */
.workshop-number {
    margin-bottom: 0.5rem;
    /* --gold is the palette's "gold as text" value. Deeper than the numerals on
       the home page, which sit on cream rather than white. */
    color: var(--gold);
    font-family: "Newsreader", Georgia, serif;
    font-size: clamp(1.9rem, 3.2vw, 2.4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
}

/* The format line: a quiet label above the title, not body copy. 5.6:1. */
.workshop-card span {
    align-self: start;
    margin-bottom: 0.9rem;
    color: var(--muted);
}

.workshop-card h3 {
    margin: 0 0 0.7rem;
    font-family: "Newsreader", Georgia, serif;
    font-size: clamp(1.35rem, 2.4vw, 1.6rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.workshop-lede {
    margin: 0 0 1.1rem;
    color: var(--paper-soft);
}

.workshop-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.6rem;
}

.workshop-card li {
    position: relative;
    padding-left: 1.4rem;
    color: var(--paper-soft);
    font-size: 0.95rem;
    line-height: 1.45;
}

.workshop-card li::before {
    position: absolute;
    top: 0.55rem;
    left: 0;
    width: 8px;
    height: 8px;
    content: "";
    border-radius: 50%;
    background: #12998a;
    box-shadow: 0 0 0 6px rgba(18, 153, 138, 0.12);
}

/* Centred: this line and the buttons apply to all three tiles rather than to any
   one of them, so they read as the section's close rather than as something
   belonging to the left-hand card. The measure stays capped — centred text is
   harder to scan, so long lines cost more here than they would flush-left. The
   sentence was shortened to fit two lines inside a readable measure rather than
   widening the box to ~98 characters a line, which is what the longer wording
   needed. */
/* The qualifying facts. Sits between the tiles and the closing line, so a buyer
   meets the practicalities immediately after the offer and before the CTA.
   Three equal columns on desktop, stacked on a phone. */
.workshop-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    margin: 1.6rem 0 0;
    padding: 1.2rem 0 0;
    border-top: 1px solid var(--line);
}

.workshop-facts div {
    display: grid;
    gap: 0.3rem;
}

.workshop-facts dt {
    color: var(--mint-bright);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.workshop-facts dd {
    margin: 0;
    color: var(--paper);
    font-family: "Newsreader", Georgia, serif;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.workshop-note {
    max-width: 68ch;
    margin: 1.6rem auto 0;
    color: var(--paper-soft);
    text-align: center;
}

.workshop-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 1.4rem;
}