/* ==========================================================================
   Mickom base layout
   Shared chrome only. Page-specific styling arrives with the homepage on
   Days 3 to 4 and must reuse these tokens rather than adding new values.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Typography ---------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  color: var(--c-ink);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-display-strong);
}

p {
  margin: 0 0 var(--sp-4);
  max-width: var(--measure);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-ink);
  max-width: var(--measure-narrow);
}

.muted {
  color: var(--c-ink-muted);
}

/* Small uppercase section label, per the approved visual direction. */
.eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-body-strong);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin: 0 0 var(--sp-3);
}

a {
  color: var(--c-action);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--transition);
}

  a:hover {
    color: var(--c-action-hover);
  }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

img,
svg {
  max-width: 100%;
  height: auto;
}

hr {
  border: 0;
  border-top: var(--border-hairline);
  margin: var(--sp-7) 0;
}

/* --- Layout -------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--sp-section);
}

.section--surface {
  background: var(--c-surface);
}

main {
  flex: 1 0 auto;
}

/* --- Skip link ----------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 100;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-ink);
  color: var(--c-bg);
  font-size: var(--fs-small);
  font-weight: var(--fw-body-strong);
  border-radius: var(--radius);
  transform: translateY(-200%);
}

  .skip-link:focus {
    transform: translateY(0);
    color: var(--c-bg);
  }

/* --- Header -------------------------------------------------------------- */

.site-header {
  border-bottom: var(--border-hairline);
  padding-block: var(--sp-4);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
}

/*
   The wordmark is artwork now, not styled text.
   Sized by height so the navigation baseline stays put; the width follows the
   4.67:1 viewBox. 36px tall gives 168px wide, above the 120px minimum in the
   usage guide and within the 32 to 40px header band it was drawn for.
*/
.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}

  .wordmark img {
    /* 28px tall gives 131px wide against a 120px minimum in the usage guide.
     At 36px the wordmark was about 2.4 times the height of the navigation
     text beside it and read as the loudest thing in the header. */
    height: 28px;
    width: auto;
    display: block;
  }

@media (max-width: 40rem) {
  /* 122px wide. Held here rather than reduced further, because the 120px
     minimum leaves no room below this. */
  .wordmark img {
    height: 26px;
  }
}

/* The artwork carries its own colour, so there is nothing to change on hover.
   The focus ring is what signals interactivity. */
.wordmark:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-3) clamp(var(--sp-4), 2vw, var(--sp-6));
  min-width: 0;
}

  .site-nav a {
    font-size: var(--fs-small);
    font-weight: var(--fw-body-medium);
    color: var(--c-ink);
    text-decoration: none;
  }

    .site-nav a:hover,
    .site-nav a[aria-current="page"] {
      color: var(--c-action);
    }

    .site-nav a[aria-current="page"] {
      text-decoration: underline;
      text-underline-offset: 0.35em;
    }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-small);
  font-weight: var(--fw-body-strong);
  line-height: 1.3;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.btn--primary {
  background: var(--c-action);
  color: var(--c-bg);
}

  .btn--primary:hover {
    background: var(--c-action-hover);
    color: var(--c-bg);
  }

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

  .btn--secondary:hover {
    background: var(--c-ink);
    color: var(--c-bg);
  }

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

.site-footer {
  border-top: var(--border-hairline);
  padding-block: var(--sp-6);
  font-size: var(--fs-small);
  color: var(--c-ink-muted);
}

  .site-footer a {
    color: var(--c-ink-muted);
  }

    .site-footer a:hover {
      color: var(--c-action);
    }

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: baseline;
  justify-content: space-between;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- Unresolved configuration -------------------------------------------- */
/* Makes [CONTENT NEEDED] values impossible to miss in review. */

.content-needed {
  background: #FFF3D6;
  border-bottom: 2px solid var(--c-accent);
  font-size: var(--fs-small);
  font-weight: var(--fw-body-medium);
  padding: 0 0.2em;
}

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

/* ==========================================================================
   Homepage components
   Added on days 3 to 4 for the design gate. Every value references a token.
   The visual language is an executive report: hairline rules, generous
   vertical rhythm, minimal cards, no shadows, no gradients.
   ========================================================================== */

.container--narrow {
  max-width: 58rem;
}

.stack-lg {
  margin-top: var(--sp-7);
}

.section__heading {
  font-size: var(--fs-h2);
  max-width: var(--measure);
  margin: var(--sp-3) 0 var(--sp-5);
}

.section__heading--display {
  font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
  letter-spacing: var(--ls-tight);
}

/* --- Prose ---------------------------------------------------------------- */

.prose > :first-child {
  margin-top: 0;
}

.prose > :last-child {
  margin-bottom: 0;
}

.prose {
  max-width: var(--measure);
}

.prose--lead p {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-ink);
}

/* Leadership scenarios read as a checklist, not decorative bullets. */
.prose--checklist ul {
  list-style: none;
  padding: 0;
  margin: var(--sp-6) 0 0;
}

.prose--checklist li {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  padding: var(--sp-5) 0 var(--sp-5) var(--sp-6);
  border-top: var(--border-hairline);
  position: relative;
}

  .prose--checklist li:last-child {
    border-bottom: var(--border-hairline);
  }

  .prose--checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--sp-5) + 0.6em);
    width: var(--sp-4);
    height: 2px;
    background: var(--c-accent);
  }

/* --- Hero ----------------------------------------------------------------- */

/*
   Homepage hero.

   Scoped to .hero so the shared page-hero used by every other page is
   untouched. Only spacing and type size change here; nothing about the
   content, order or colour.
*/
.hero {
  /* 4rem is 64px at desktop, down from 76px.
     Below the 70 to 80px band the architect approved, so it needs their nod.
     To revert, put this back to clamp(3rem, 1.5rem + 4.2vw, 4.75rem).

     The smaller wordmark also shortens the header by 8px, so the total space
     from the header rule to the eyebrow falls from 76px to 64px, and from the
     navigation baseline by rather more than that. */
  padding-top: clamp(2.5rem, 1.25rem + 3.6vw, 4rem);
  padding-bottom: clamp(3rem, 1.5rem + 5vw, 5.5rem);
}

.hero__statement h1 {
  /* Was var(--fs-h1), which tops out at 60px. 3.375rem is 54px, still the
     dominant element on the page and inside the 52 to 56 target. The mobile
     floor matches the shared scale, so nothing shrinks on a phone. */
  font-size: clamp(2.25rem, 1.66rem + 2.4vw, 3.375rem);
  line-height: 1.1;
  max-width: 20ch;
  letter-spacing: var(--ls-tight);
  margin: var(--sp-4) 0 var(--sp-5);
}

.hero__statement p {
  /* Was var(--fs-lead), up to 23px, which competed with the headline.
     A flat 18px reads as support rather than a second voice, and holding it
     flat means the phone keeps a comfortable size instead of dropping to 17. */
  font-size: 1.125rem;
  line-height: 1.52;
  /* Was var(--measure), 68ch, which at this size runs past 900px. 48rem is
     768px, inside the 760 to 800 target, and shorter lines scan faster. */
  max-width: 48rem;
  color: var(--c-ink-muted);
  /* Was var(--sp-4), 16px, from the global paragraph rule. 1.0625rem is 17px:
     the three paragraphs read as one argument rather than three blocks. */
  margin-bottom: 1.0625rem;
}

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

@media (min-width: 64rem) {
  /* Tighter only where the headline is large enough to carry it. At mobile
     sizes 1.06 would crowd the descenders in the serif. */
  .hero__statement h1 {
    line-height: 1.06;
  }
}

/* Was var(--sp-6), 32px. 1.75rem is 28px, so the actions sit closer to the
   argument that earns them. Scoped to the hero: other sections keep 32px. */
.hero .actions {
  margin-top: 1.75rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

/* --- Eyebrows ------------------------------------------------------------- */

.eyebrow--accent {
  color: var(--c-action);
}

/* --- Grids and panels ----------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--sp-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 48rem) {
  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* A panel is a ruled block, not a floating card. */
.panel {
  border-top: var(--border-accent);
  padding-top: var(--sp-5);
}

.panel--feature {
  border-top: var(--border-hairline);
  border-left: none;
  padding: var(--sp-6) 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

  /*
   The action follows its own prose rather than being pushed to the floor.

   This previously used margin-top: auto so two side-by-side panels aligned
   their buttons. That worked when both panels held a paragraph each. On the
   contact page the right panel is a five-field form, so the left button was
   dropped hundreds of pixels below the text it belongs to, with the primary
   conversion stranded in whitespace.

   Aligning buttons across columns of unequal height is not worth separating an
   action from its explanation.
*/
  .panel--feature .btn {
    margin-top: var(--sp-5);
  }

/* Panels size to their own content instead of stretching to match the tallest
   in the row. */
.grid--top {
  align-items: start;
}

.panel--feature .prose {
  margin-bottom: var(--sp-5);
}

.panel__title {
  font-size: var(--fs-h3);
  margin: var(--sp-2) 0 var(--sp-4);
}

.panel__title--display {
  font-size: clamp(1.375rem, 1.16rem + 0.9vw, 1.75rem);
  max-width: 22ch;
}

/* --- Ruled definition list for advisory areas ----------------------------- */

.rule-list {
  margin: 0;
}

.rule-list__row {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-6) 0;
  border-top: var(--border-hairline);
}

  .rule-list__row:last-child {
    border-bottom: var(--border-hairline);
  }

@media (min-width: 56rem) {
  .rule-list__row {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: var(--sp-6);
  }
}

.rule-list__term {
  font-family: var(--font-display);
  font-weight: var(--fw-display-strong);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
}

.rule-list__detail {
  margin: 0;
  color: var(--c-ink-muted);
}

/* --- Inline forward link -------------------------------------------------- */

.link-arrow {
  font-weight: var(--fw-body-strong);
  font-size: var(--fs-small);
  letter-spacing: 0.01em;
}

  .link-arrow::after {
    content: " \2192";
    transition: var(--transition);
  }

/* --- About preview -------------------------------------------------------- */

.portrait-row {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}

@media (min-width: 52rem) {
  .portrait-row {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: var(--sp-8);
  }
}

/* Holds the approved headshot. Never a stock image or a generated portrait. */
.portrait {
  max-width: 20rem;
  background: var(--c-surface);
}

  .portrait picture,
  .portrait img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* A hairline rather than a border box, so the photograph reads as an editorial
   image rather than a framed avatar. */
  .portrait img {
    border-top: var(--border-accent);
  }

/* --- Closing section ------------------------------------------------------ */

.section--close {
  border-top: var(--border-hairline);
}

/* --- Unresolved primary action -------------------------------------------- */

.btn--pending {
  background: var(--c-rule);
  border-color: var(--c-rule);
  color: var(--c-ink);
  cursor: not-allowed;
}

/* A forward link whose destination is not built yet. */
.link-arrow--pending {
  color: var(--c-ink-muted);
  cursor: not-allowed;
}

/* ==========================================================================
   Interior pages
   Added on days 5 to 6. Same system as the homepage, no new colours or sizes.
   ========================================================================== */

.page-hero {
  padding-bottom: var(--sp-7);
  border-bottom: var(--border-hairline);
}

.page-hero__statement h1 {
  max-width: 22ch;
  letter-spacing: var(--ls-tight);
  margin: var(--sp-4) 0 var(--sp-5);
}

.page-hero__statement p {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  max-width: var(--measure);
  color: var(--c-ink-muted);
}

.name-line {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display-strong);
  margin: var(--sp-3) 0 0;
}

.role-line {
  font-size: var(--fs-small);
  color: var(--c-ink-muted);
  margin: var(--sp-1) 0 0;
}

/* --- Advisory areas -------------------------------------------------------- */

.area {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-7) 0;
  border-top: var(--border-hairline);
}

  .area:last-child {
    border-bottom: var(--border-hairline);
  }

@media (min-width: 56rem) {
  .area {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: var(--sp-6);
  }

  .area__title {
    grid-column: 1;
    grid-row: 1;
  }

  .area__body {
    grid-column: 2;
    grid-row: 1;
  }

  .area__meta {
    grid-column: 2;
    grid-row: 2;
  }
}

.area__title {
  font-size: var(--fs-h3);
  margin: 0;
}

.area__meta {
  display: grid;
  gap: var(--sp-1);
  padding-top: var(--sp-4);
  border-top: 2px solid var(--c-accent);
  max-width: var(--measure);
}

.area__label {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-body-strong);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin: var(--sp-3) 0 0;
}

.area__value {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--c-ink);
}

/* --- Long form utility pages ---------------------------------------------- */

.doc-block {
  padding: var(--sp-6) 0;
  border-top: var(--border-hairline);
}

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

.doc-block__subheading {
  font-size: var(--fs-h3);
  margin: var(--sp-5) 0 var(--sp-2);
}

/* --- Notices --------------------------------------------------------------- */

.notice {
  border-left: 3px solid var(--c-rule);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-5) 0;
  background: var(--c-surface);
}

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

.notice--success {
  border-left-color: var(--c-ink);
}

.notice--error {
  border-left-color: var(--c-action);
}

.notice--caution {
  border-left-color: var(--c-accent);
}

.notice--error:empty {
  display: none;
}

/* --- Forms ----------------------------------------------------------------- */

.form {
  width: 100%;
  max-width: 34rem;
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}

.field {
  display: grid;
  gap: var(--sp-2);
}

  .field label {
    font-size: var(--fs-small);
    font-weight: var(--fw-body-strong);
  }

  .field input,
  .field textarea {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--c-ink);
    background: var(--c-bg);
    border: 1px solid var(--c-ink-muted);
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
    width: 100%;
  }

  .field textarea {
    resize: vertical;
    line-height: var(--lh-body);
  }

    .field input:focus-visible,
    .field textarea:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-offset);
      border-color: var(--c-ink);
    }

    .field input:invalid:not(:placeholder-shown),
    .field textarea:invalid:not(:placeholder-shown) {
      border-color: var(--c-action);
    }

.field__error {
  font-size: var(--fs-small);
  color: var(--c-action);
}

  .field__error:empty {
    display: none;
  }

/* Honeypot. Hidden from people and from assistive technology, still submitted
   by naive bots. Never uses display:none, which some bots skip. */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   Responsive behaviour
   The layout is mobile first: every multi-column rule above is inside a
   min-width query, so the default at any width is a single column. What
   follows handles the cases that single-column stacking alone does not.
   ========================================================================== */

/* Long words, URLs and organisation names must never push the page sideways.
   A horizontal scrollbar on a phone is the most common responsive failure and
   the easiest to miss on a desktop monitor. */
.prose,
.rule-list__detail,
.area__value,
.panel,
.notice,
.field__error {
  overflow-wrap: anywhere;
}

/* The skip link lands here, so the target must not sit under the header. */
#main {
  scroll-margin-top: var(--sp-6);
}

/* Touch targets. Anything tappable needs room for a fingertip rather than a
   cursor, which matters most for the navigation and the footer links. */
@media (pointer: coarse) {
  .site-nav a,
  .site-footer__links a,
  .link-arrow {
    display: inline-block;
    padding-block: var(--sp-2);
  }

  .btn {
    padding-block: var(--sp-4);
  }
}

@media (max-width: 30rem) {
  /* Calls to action go full width, so the primary action is unmissable and
     nothing sits half off the edge. */
  .actions .btn {
    width: 100%;
    text-align: center;
  }

  .actions {
    align-items: stretch;
  }

  /* An advisory area reads as a single column with its label above the prose. */
  .area {
    padding-block: var(--sp-6);
  }

  .page-hero__statement h1,
  .hero__statement h1 {
    max-width: none;
  }
}

/* Wide screens. The measure is already capped, so the risk is the opposite
   problem: a line of prose stretching past comfortable reading length. */
@media (min-width: 90rem) {
  .container {
    max-width: var(--container);
  }
}

/* Printing. Someone will print the privacy notice or an assessment result. */
@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .actions,
  .btn {
    display: none;
  }

  .section {
    padding-block: var(--sp-4);
    break-inside: avoid;
  }

  .section--surface {
    background: none;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: var(--fs-small);
    color: var(--c-ink-muted);
  }
}

/* ==========================================================================
   Readiness assessment
   The one place a visitor does sustained work, so the priorities are legible
   questions, unmistakable choices and generous touch targets.
   ========================================================================== */

.assessment-step__title {
  font-size: var(--fs-h2);
  margin-top: var(--sp-4);
}

.progress {
  height: 4px;
  background: var(--c-rule);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--sp-2);
}

.progress__fill {
  height: 100%;
  background: var(--c-accent);
  transition: width var(--transition);
}

.progress__label {
  font-size: var(--fs-small);
  margin-bottom: var(--sp-6);
}

.assessment-form {
  margin-top: var(--sp-6);
}

/* A question is a fieldset so the prompt is announced with each option. */
.question {
  border: 0;
  border-top: var(--border-hairline);
  padding: var(--sp-6) 0 0;
  margin: 0 0 var(--sp-6);
}

.question__prompt {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display-strong);
  line-height: var(--lh-heading);
  padding: 0;
  max-width: var(--measure);
}

.question__helper {
  font-size: var(--fs-small);
  margin: var(--sp-2) 0 0;
  max-width: var(--measure);
}

.choices {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

/* The whole row is the target, not just the radio itself. */
.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  padding: var(--sp-4);
  transition: border-color var(--transition), background-color var(--transition);
}

  .choice:hover {
    border-color: var(--c-ink-muted);
  }

  .choice:has(input:checked) {
    border-color: var(--c-ink);
    background: var(--c-surface);
  }

  .choice:has(input:focus-visible) {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
  }

  .choice input {
    margin: 0.2em 0 0;
    accent-color: var(--c-action);
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
  }

  .choice label {
    flex: 1 1 auto;
    cursor: pointer;
    line-height: var(--lh-body);
  }

.assessment-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  padding-top: var(--sp-5);
  border-top: var(--border-hairline);
}

.assessment-note {
  font-size: var(--fs-small);
  margin-top: var(--sp-4);
}

/* Consent and other single checkboxes on ordinary forms. */
.field--check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--sp-3);
}

  .field--check input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.2em 0 0;
    accent-color: var(--c-action);
  }

  .field--check label {
    font-weight: var(--fw-body);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    cursor: pointer;
  }

  .field--check .field__error {
    grid-column: 1 / -1;
  }

@media (max-width: 30rem) {
  .assessment-nav .btn {
    width: 100%;
    text-align: center;
  }

  .choice {
    padding: var(--sp-5) var(--sp-4);
  }
}

/* ==========================================================================
   Sticky assessment chrome
   Deliberately confined to the assessment. The marketing pages keep a static
   header: an advisory report does not follow you down the page, and the pages
   are short enough that it would cost more than it returns.
   ========================================================================== */

/* Position sticky rather than fixed, so both elements stay in normal flow and
   cannot overlap content or trap a keyboard user. */
.assessment-progress {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--c-bg);
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: var(--border-hairline);
  margin-bottom: var(--sp-6);
}

  .assessment-progress .progress__label {
    margin-bottom: 0;
  }

.assessment-nav--sticky {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: var(--c-bg);
  padding-bottom: var(--sp-5);
  margin-top: var(--sp-6);
}

  /* A hairline above the bar, so it reads as chrome rather than as content that
   happens to be at the bottom. */
  .assessment-nav--sticky::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background: var(--c-rule);
  }

/* On a short viewport the two sticky elements would leave almost no room for
   the question itself, so the progress bar releases. */
@media (max-height: 34rem) {
  .assessment-progress {
    position: static;
  }
}

/* Nothing sticky in print, and nothing sticky when motion is unwelcome. */
@media print {
  .assessment-progress,
  .assessment-nav--sticky {
    position: static;
  }
}

/* ==========================================================================
   Readiness result
   The bands are words, never numbers. Colour reinforces the label but never
   carries the meaning on its own, since it has to survive greyscale printing
   and colour blindness.
   ========================================================================== */

.result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  font-size: var(--fs-small);
  margin-top: var(--sp-4);
}

.band {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-body-strong);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  padding: 0.25em 0.7em;
  border-radius: var(--radius);
  border: 1px solid currentColor;
  white-space: nowrap;
  vertical-align: middle;
}

.band--at-risk {
  color: var(--c-action);
}

.band--developing {
  color: var(--c-ink);
}

.band--solid {
  color: var(--c-ink);
  background: var(--c-surface);
}

.band--strong {
  color: var(--c-bg);
  background: var(--c-ink);
  border-color: var(--c-ink);
}

.band--unknown {
  color: var(--c-ink-muted);
  border-style: dashed;
}

/* --- Priority list --------------------------------------------------------- */

.priority-list {
  list-style: none;
  counter-reset: priority;
  padding: 0;
  margin: var(--sp-7) 0 0;
}

.priority-list__item {
  counter-increment: priority;
  position: relative;
  border-top: var(--border-hairline);
  padding: var(--sp-6) 0 var(--sp-6) var(--sp-7);
}

  .priority-list__item:last-child {
    border-bottom: var(--border-hairline);
  }

  .priority-list__item::before {
    content: counter(priority);
    position: absolute;
    left: 0;
    top: var(--sp-6);
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: var(--fw-display-strong);
    color: var(--c-accent);
    line-height: 1;
  }

.priority-list__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
}

.priority-list__title {
  font-size: var(--fs-h3);
  margin: 0;
}

.considerations {
  margin: var(--sp-2) 0 var(--sp-4);
  padding-left: var(--sp-5);
  max-width: var(--measure);
}

  .considerations li {
    margin-bottom: var(--sp-2);
  }

.investigate {
  border-left: 2px solid var(--c-accent);
  padding-left: var(--sp-4);
  max-width: var(--measure);
}

.visibility-note {
  font-size: var(--fs-small);
}

/* The band chip sits beside its domain name in the full profile. */
.rule-list__term .band {
  display: inline-block;
  margin-top: var(--sp-2);
}

/* Short answer sets read better on one line where there is room. */
.choices--inline {
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--sp-3);
}

@media (max-width: 30rem) {
  .choices--inline {
    grid-auto-flow: row;
  }
}

/* ==========================================================================
   Admin
   A tool for one person. It borrows the tokens and stops there. Visual polish
   here is explicitly the first thing to cut when time runs short.
   ========================================================================== */

.admin-header {
  border-bottom: var(--border-hairline);
  padding-block: var(--sp-4);
  background: var(--c-surface);
}

.admin-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3) var(--sp-5);
}

.admin-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

  .admin-header nav a {
    font-size: var(--fs-small);
    font-weight: var(--fw-body-medium);
  }

.admin-user {
  margin-left: auto;
  font-size: var(--fs-small);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-6) 0 var(--sp-7);
}

.stat {
  border-top: var(--border-accent);
  padding-top: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-display-strong);
  line-height: 1;
}

.stat__label {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-5) 0 var(--sp-7);
  font-size: var(--fs-small);
  display: block;
  overflow-x: auto;
}

  .admin-table th,
  .admin-table td {
    text-align: left;
    padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
    border-bottom: var(--border-hairline);
    vertical-align: top;
  }

  .admin-table th {
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--c-ink-muted);
    white-space: nowrap;
  }

/*
   A div inside the cell, never the cell itself.

   Setting display: flex on a td stops it being a table cell, so its bottom
   border no longer lines up with the rest of the row and the rule appears to
   stop short at the last column.
*/
.admin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-2);
}

/* Actions sit at the top of a tall row rather than floating in the middle of
   it, so buttons line up with the assessment name they belong to. */
.admin-table td:last-child {
  padding-right: 0;
}

/* Version, status and counts read better on one line each. */
.admin-table td:nth-child(2),
.admin-table td:nth-child(3),
.admin-table td:nth-child(4),
.admin-table td:nth-child(5),
.admin-table td:nth-child(6),
.admin-table td:nth-child(7) {
  white-space: nowrap;
}

.admin-table .btn {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-eyebrow);
}

.issued-link {
  display: block;
  overflow-wrap: anywhere;
  padding: var(--sp-3);
  background: var(--c-bg);
  border: var(--border-hairline);
  border-radius: var(--radius);
  font-size: var(--fs-small);
}

.field select {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--c-ink);
  background: var(--c-bg);
  border: 1px solid var(--c-ink-muted);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  width: 100%;
}

/* Available to a screen reader, invisible on screen. Used to announce that a
   link opens in a new tab, so the context change is never a surprise. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Executive Technology Flywheel
   A storytelling visual, never a score. Every value it shows is also in the
   list beneath it, which is what lets the diagram be treated as illustration
   rather than as content.
   ========================================================================== */

.flywheel {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
  margin-top: var(--sp-7);
}

/* Two columns: the wheel on the left at roughly forty per cent, the six domain
   rows on the right. The breakpoint is 52rem rather than 60rem because a
   laptop at 1280 CSS pixels inside a container should already get the side by
   side composition, and 60rem was leaving common desktop widths stacked. */
@media (min-width: 52rem) {
  .flywheel {
    grid-template-columns: minmax(18rem, 2fr) minmax(0, 3fr);
    gap: var(--sp-7);
    align-items: center;
  }
}

@media (min-width: 72rem) {
  .flywheel {
    gap: var(--sp-8);
  }
}

/*
   Not sticky.

   A sticky figure inside a grid cell overlaps the adjacent column in full page
   screenshots and in some print paths, and it buys little when the two columns
   are roughly the same height. Keeping it in normal flow is the safer choice.
*/
.flywheel__figure {
  display: grid;
  gap: var(--sp-5);
  justify-items: center;
  align-content: center;
}

.flywheel__svg {
  width: 100%;
  min-width: 15rem;
  max-width: 30rem;
  height: auto;
}

/* The wheel is the thing to remember, so the prose above it stays short of the
   full container width and does not compete. */
.section--flywheel .prose--lead {
  max-width: var(--measure);
}

/* --- Segments ------------------------------------------------------------- */

.fw-seg {
  fill: var(--c-surface);
  stroke: var(--c-rule);
  stroke-width: 1;
  transition: fill var(--transition), stroke var(--transition);
}

.fw-group {
  cursor: default;
}

.flywheel--storytelling .fw-group {
  cursor: pointer;
}

.fw-group:focus {
  outline: none;
}

.fw-group:focus-visible .fw-seg,
.fw-group.is-active .fw-seg {
  fill: var(--c-bg);
  stroke: var(--c-ink);
  stroke-width: 2;
}

.fw-group:focus-visible .fw-seg {
  outline: var(--focus-ring);
}

/*
   Results. One ink ramp from light to dark for Developing, Solid and Strong,
   with red reserved for At Risk.

   Red is the attention colour in this brand, so using it for one state and an
   intensity ramp for the rest says "look here" without a traffic-light scheme.
   A red, amber, green wheel would read as a dashboard and would need colours
   the brand does not have.

   Tints are mixed from the brand ink and action red rather than hardcoded, so
   they move if the palette does. The words in the list still carry the
   meaning: nothing here is conveyed by colour alone.
*/
.fw-seg--at-risk {
  fill: color-mix(in srgb, var(--c-action) 14%, white);
  stroke: var(--c-action);
  stroke-width: 2.5px;
}

.fw-seg--developing {
  fill: color-mix(in srgb, var(--c-ink) 8%, white);
  stroke: var(--c-ink-muted);
  stroke-width: 1.5px;
}

.fw-seg--solid {
  fill: color-mix(in srgb, var(--c-ink) 28%, white);
  stroke: var(--c-ink);
  stroke-width: 1.5px;
}

.fw-seg--strong {
  fill: var(--c-ink);
  stroke: var(--c-ink);
  stroke-width: 1.5px;
}

/* Not enough to assess. Deliberately the only dashed outline, and the only
   segment with no fill: absence of evidence should not look like a result. */
.fw-seg--unknown {
  fill: none;
  stroke: var(--c-rule);
  stroke-width: 1.5px;
  stroke-dasharray: 3 4;
}

.fw-seg--done {
  fill: var(--c-surface);
  stroke: var(--c-ink);
  stroke-width: 2;
}

/* --- Labels --------------------------------------------------------------- */

.fw-label {
  font-family: var(--font-body);
  /* 13px rather than 15px: Modernization and Cybersecurity were wider than
     the segment they sit in and crossed the ring at 15px. */
  font-size: 13px;
  font-weight: var(--fw-body-strong);
  letter-spacing: 0.01em;
  fill: var(--c-ink);
  pointer-events: none;
}

/* Only the Strong segment is dark enough to need a reversed label. */
.fw-seg--strong + .fw-label {
  fill: var(--c-bg);
}

/* Solid is mid-tone: ink still clears contrast on it, but the muted grey used
   elsewhere would not. */
.fw-seg--solid + .fw-label {
  fill: var(--c-ink);
}

/* --- Connections and hub -------------------------------------------------- */

.fw-link {
  fill: none;
  stroke: var(--c-rule);
  stroke-width: 1;
  opacity: 0.7;
}

.fw-hub {
  fill: var(--c-bg);
  stroke: var(--c-accent);
  stroke-width: 2;
}

.fw-hub-line {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--fw-body-strong);
  fill: var(--c-ink-muted);
}

/*
   The hub as a control.

   Only on the interactive wheel, where it is a second way to spin for anyone
   who reaches for the middle before finding the button below. It borrows the
   primary button's colours and hover so the two read as the same action, and
   its own transition, since a button's background and an SVG fill are
   different properties.
*/
.fw-hub-group {
  cursor: pointer;
}

.fw-hub--action {
  fill: var(--c-action);
  stroke: var(--c-action);
  transition: fill var(--motion-quick) ease, stroke var(--motion-quick) ease;
}

.fw-hub-line--action {
  fill: var(--c-bg);
  pointer-events: none;
}

.fw-hub-group:hover .fw-hub--action,
.fw-hub-group:focus-visible .fw-hub--action {
  fill: var(--c-action-hover);
  stroke: var(--c-action-hover);
}

/* Matches the press on the button below it. */
.fw-hub-group:active .fw-hub--action {
  fill: var(--c-ink);
  stroke: var(--c-ink);
}

.fw-hub-group:focus {
  outline: none;
}

.fw-hub-group:focus-visible .fw-hub--action {
  stroke: var(--c-ink);
  stroke-width: 3;
}

/* While the wheel is turning the hub is not a target. */
.flywheel.is-spinning .fw-hub-group {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .fw-hub--action {
    transition: none;
  }
}

/* --- Spin ----------------------------------------------------------------- */

.flywheel__controls {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  text-align: center;
}

.flywheel__hint {
  font-size: var(--fs-small);
  margin: 0;
}

/* --- Legend --------------------------------------------------------------- */

.flywheel__legend {
  list-style: none;
  counter-reset: fw;
  margin: 0;
  padding: 0;
  align-self: center;
}

.flywheel__item {
  counter-increment: fw;
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-6);
  border-top: var(--border-hairline);
  position: relative;
  transition: border-color var(--transition), background-color var(--transition);
}

  .flywheel__item:last-child {
    border-bottom: var(--border-hairline);
  }

  .flywheel__item::before {
    content: counter(fw);
    position: absolute;
    left: 0;
    top: var(--sp-4);
    font-family: var(--font-display);
    font-weight: var(--fw-display-strong);
    color: var(--c-accent);
  }

  .flywheel__item.is-active {
    border-top-color: var(--c-ink);
    background: var(--c-surface);
  }

.flywheel__name {
  font-family: var(--font-display);
  font-weight: var(--fw-display-strong);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
}

.flywheel__summary {
  font-size: var(--fs-small);
  max-width: var(--measure);
}

.flywheel__item .band {
  justify-self: start;
}

/* Motion is an enhancement, never the message. */
@media (prefers-reduced-motion: reduce) {
  .flywheel.is-spinning .fw-segments,
  .flywheel.is-spinning .fw-links {
    animation: none;
  }
}

@media print {
  .flywheel__controls {
    display: none;
  }
}

/* ==========================================================================
   Flywheel scenarios
   Spin the Flywheel selects a representative situation. It does not assess the
   visitor, so nothing here reads as a verdict: emphasis shows which domains a
   situation involves, never which are weak.
   ========================================================================== */

/* One controlled turn with real easing, then it stops. Not a loop, not a
   prize wheel, and nothing that could be read as speed. */
.flywheel.is-spinning .fw-segments,
.flywheel.is-spinning .fw-links {
  animation: fw-spin 2.2s cubic-bezier(0.4, 0.02, 0.15, 1) 1;
  transform-origin: 50% 50%;
}

@keyframes fw-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(414deg);
  }
}

/* --- Scenario emphasis ---------------------------------------------------- */

.fw-group.is-emphasised .fw-seg {
  fill: var(--c-bg);
  stroke: var(--c-ink);
  stroke-width: 3;
}

.fw-group.is-quiet .fw-seg {
  opacity: 0.45;
}

.fw-group.is-quiet .fw-label {
  opacity: 0.5;
}

/* The connections carry the point: the friction sits between areas. */
.fw-link.is-emphasised {
  stroke: var(--c-accent);
  stroke-width: 2;
  opacity: 1;
}

.fw-group,
.fw-seg,
.fw-label,
.fw-link {
  transition: opacity var(--transition), stroke var(--transition), fill var(--transition);
}

/* --- Static scenario list, used when the script is unavailable ------------ */

/* Spans the full width beneath both columns. A grid item here would take a
   column and push the domain list onto a second row. */
.scenarios {
  grid-column: 1 / -1;
}

.scenarios__fallback {
  margin-top: var(--sp-6);
}

.scenario {
  border-top: var(--border-hairline);
  padding: var(--sp-4) 0;
}

  .scenario:last-child {
    border-bottom: var(--border-hairline);
  }

.scenario__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display-strong);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  cursor: pointer;
}

.scenario__body {
  max-width: var(--measure);
  padding-top: var(--sp-3);
}

.scenario__label {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin: var(--sp-4) 0 var(--sp-1);
}

.scenario__question {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  border-left: 2px solid var(--c-accent);
  padding-left: var(--sp-4);
  margin-top: var(--sp-5);
}

/* --- Chips ---------------------------------------------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.chip {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.02em;
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  padding: 0.3em 0.7em;
  color: var(--c-ink);
  background: var(--c-surface);
}

/* --- Modal ---------------------------------------------------------------- */

.scenario-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: rgb(37 44 65 / 55%);
}

  .scenario-modal[hidden] {
    display: none;
  }

.scenario-modal__panel {
  position: relative;
  background: var(--c-bg);
  border-top: var(--border-accent);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  width: min(38rem, 100%);
  max-height: 85dvh;
  overflow-y: auto;
}

.scenario-modal__title {
  font-size: var(--fs-h2);
  margin: 0 0 var(--sp-4);
  max-width: 24ch;
}

.scenario-modal__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  background: none;
  border: 0;
  font-size: 1.75rem;
  line-height: 1;
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  color: var(--c-ink-muted);
}

  .scenario-modal__close:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
  }

/* Visible, but secondary. The boundary should be understood without the
   boundary overwhelming the experience. */
.scenario-modal__note {
  font-size: var(--fs-small);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: var(--border-hairline);
}

body.has-modal {
  overflow: hidden;
}

@media (max-width: 30rem) {
  .scenario-modal {
    padding: 0;
    align-items: end;
  }

  .scenario-modal__panel {
    max-height: 92dvh;
    width: 100%;
  }
}

/* --- Interaction note ----------------------------------------------------- */

.flywheel__note {
  font-size: var(--fs-small);
  max-width: var(--measure);
  margin-top: var(--sp-3);
}

@media (prefers-reduced-motion: reduce) {
  .flywheel.is-spinning .fw-segments,
  .flywheel.is-spinning .fw-links {
    animation: none;
  }
}

@media print {
  .scenario-modal {
    display: none;
  }

  .scenarios__fallback {
    display: block !important;
  }
}

/* --- Domain rows: selectable, and synchronised with the wheel ------------- */

.flywheel__row {
  display: grid;
  gap: var(--sp-1);
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

  .flywheel__row:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
  }

.flywheel__item {
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6);
}

  .flywheel__item.is-active .flywheel__name {
    color: var(--c-ink);
  }

/* Mobile: the rows behave as an accordion so six descriptions do not push the
   wheel off the screen. Only applied once the script has confirmed it can
   toggle them, so without JavaScript every description stays visible. */
@media (max-width: 51.99rem) {
  .flywheel.is-enhanced .flywheel__summary {
    display: none;
  }

  .flywheel.is-enhanced .flywheel__item.is-active .flywheel__summary {
    display: block;
  }
}

/* ==========================================================================
   Flywheel: progress and results states
   ========================================================================== */

/* The current domain during the assessment. Marks position only: no
   provisional result appears before completion, because a partial verdict on
   screen would influence the answers still to come. */
.fw-group.is-current .fw-seg {
  fill: var(--c-bg);
  stroke: var(--c-ink);
  stroke-width: 3;
}

.fw-group.is-current .fw-label {
  font-weight: var(--fw-body-strong);
}

/* A quiet indicator beside the domain heading, not a second thing to read. */
.assessment-step__head {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
  margin-top: var(--sp-4);
}

@media (min-width: 44rem) {
  .assessment-step__head {
    grid-template-columns: minmax(0, 1fr) 7rem;
  }
}

.assessment-step__wheel .flywheel {
  display: block;
  margin: 0;
}

.assessment-step__wheel .flywheel__svg {
  max-width: 7rem;
  min-width: 0;
}

.assessment-step__wheel .flywheel__legend,
.assessment-step__wheel .fw-label,
.assessment-step__wheel .fw-hub-line,
.assessment-step__wheel .flywheel__controls {
  display: none;
}

@media (max-width: 43.99rem) {
  /* The count and bar already carry progress on a phone. A second indicator
     would take space the questions need. */
  .assessment-step__wheel {
    display: none;
  }
}

/* --- Results ------------------------------------------------------------- */

/* On the results page the wheel supports the written profile rather than
   replacing it, so it sits above the list at a moderate size. */
.flywheel--results {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 52rem) {
  .flywheel--results {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

    .flywheel--results .flywheel__legend {
      display: none;
    }
}

/* ==========================================================================
   Executive Assessment journey
   A sequence, not a machine. Restrained enough for a boardroom and readable
   as an ordered list with no stylesheet at all.
   ========================================================================== */

.journey-layout {
  display: grid;
  gap: var(--sp-7);
}

@media (min-width: 56rem) {
  .journey-layout {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: var(--sp-8);
  }
}

.journey {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.journey__stage {
  position: relative;
  padding: var(--sp-4) 0 var(--sp-5) var(--sp-6);
}

  /* The connecting line. A single continuous thread through the sequence, drawn
   with a border rather than an image. */
  .journey__stage::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--c-rule);
  }

  .journey__stage:last-child::before {
    bottom: auto;
    height: var(--sp-4);
  }

  .journey__stage::after {
    content: "";
    position: absolute;
    left: 0;
    top: var(--sp-4);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--c-bg);
    border: 2px solid var(--c-rule);
  }

.journey__stage--state::after {
  border-color: var(--c-ink);
}

.journey__stage--middle::after {
  border-color: var(--c-accent);
}

.journey__stage--end::after {
  background: var(--c-ink);
  border-color: var(--c-ink);
}

.journey__label,
.journey__week {
  display: block;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

.journey__week {
  color: var(--c-action);
}

.journey__title {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-display-strong);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  margin-top: var(--sp-1);
}

.journey__note {
  font-size: var(--fs-small);
  color: var(--c-ink-muted);
  margin: var(--sp-2) 0 0;
  max-width: var(--measure);
}

/* The four working weeks read lighter than the states they move between, so
   the sequence emphasises what leadership gains rather than the activity. */
.journey__stage--work .journey__title {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body-strong);
}

.journey__stage--middle {
  background: var(--c-surface);
  border-left: 2px solid var(--c-accent);
  padding-left: calc(var(--sp-6) - 2px);
}

  .journey__stage--middle::before {
    display: none;
  }

/* ==========================================================================
   My Readiness
   Reuses the site's existing pieces almost entirely. What is here handles the
   one new shape: a page that may repeat per organisation.
   ========================================================================== */

/* Repeated organisation blocks need separating, or two histories read as one
   long list. */
.my-readiness__history + .my-readiness__history {
  border-top: var(--border-hairline);
}

.my-readiness__org {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
}

.my-readiness__role {
  font-size: var(--fs-small);
  color: var(--c-ink-muted);
}

/* A completed marker, not a maturity band. Deliberately quieter than the band
   chips so it is never mistaken for a result. */
.status-chip {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-body-strong);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  padding: 0.25em 0.7em;
  border-radius: var(--radius);
  border: 1px dashed var(--c-ink-muted);
  color: var(--c-ink-muted);
  white-space: nowrap;
  vertical-align: middle;
}

.rule-list__term .status-chip {
  margin-left: var(--sp-3);
}

/* The sign-out control sits with the retention note rather than in the header,
   since this is a short verified session rather than an account. */
.my-readiness__close .actions {
  margin-top: var(--sp-5);
}

/* ==========================================================================
   Submitting state
   Restrained on purpose. A quiet, obviously inert button is enough to say the
   click registered; a spinner or an overlay would be noise on a page someone
   is working through.
   ========================================================================== */

.btn:disabled,
.btn[disabled] {
  cursor: progress;
  opacity: 0.7;
}

/* No colour change on the primary action: it should still read as the thing
   that is happening, rather than appearing to have failed. */
form.is-submitting {
  cursor: progress;
}

  /* Choices stop responding while a step is saving, so a second answer cannot be
   selected against a step already on its way. */
  form.is-submitting .choice {
    pointer-events: none;
    opacity: 0.75;
  }

@media (prefers-reduced-motion: reduce) {
  .btn:disabled,
  .btn[disabled] {
    transition: none;
  }
}

/* A quiet way back for someone who has assessed before. Always present, never
   conditional on whether the address is recognised. */
.return-note {
  font-size: var(--fs-small);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: var(--border-hairline);
  max-width: 34rem;
}

/* The methodology source list: publisher and title, then what it changed. */
.prose--sources p {
  margin-bottom: var(--sp-2);
}

  .prose--sources p + p {
    color: var(--c-ink-muted);
    font-size: var(--fs-small);
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-5);
    border-bottom: var(--border-hairline);
  }

.source-group {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: var(--border-hairline);
}

.source-group__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display-strong);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  margin: 0 0 var(--sp-4);
}

/* A destructive but recoverable admin action. Quieter than the primary
   actions beside it, so Publish stays the obvious button. */
.btn--quiet {
  background: none;
  border: 1px solid var(--c-rule);
  color: var(--c-ink-muted);
}

  .btn--quiet:hover {
    border-color: var(--c-action);
    color: var(--c-action);
  }

/* ==========================================================================
   Confirmation dialog
   Native <dialog>, so the focus trap, Escape and backdrop come from the
   browser rather than from hand-written script.
   ========================================================================== */

.confirm-dialog {
  border: 0;
  border-top: var(--border-accent);
  padding: 0;
  width: min(30rem, calc(100vw - 2rem));
  background: var(--c-bg);
  color: var(--c-ink);
  box-shadow: 0 18px 48px rgb(37 44 65 / 22%);
}

  .confirm-dialog::backdrop {
    background: rgb(37 44 65 / 55%);
  }

.confirm-dialog__panel {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-6);
  margin: 0;
}

.confirm-dialog__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display-strong);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  margin: 0;
}

.confirm-dialog__message {
  margin: 0;
  color: var(--c-ink-muted);
  font-size: var(--fs-small);
  max-width: var(--measure);
}

.confirm-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

/* Destructive rather than primary, so the button does not look like the
   thing you are meant to press. */
.btn--danger {
  background: var(--c-action);
  border-color: var(--c-action);
  color: var(--c-bg);
}

  .btn--danger:hover {
    background: var(--c-ink);
    border-color: var(--c-ink);
  }

@media (max-width: 30rem) {
  .confirm-dialog__actions {
    justify-content: stretch;
  }

    .confirm-dialog__actions .btn {
      flex: 1 1 auto;
    }
}

/* A section that continues the one above rather than starting a new idea.
   Two plain sections in sequence stack their padding, which reads as a gap
   where something failed to render.

   The bottom is reduced rather than removed: the next section brings its own
   top padding, and the two together were leaving roughly twice the space the
   break needs. */
.section--continues {
  padding-top: 0;
  padding-bottom: clamp(2rem, 1rem + 3vw, 3rem);
}

/* A short line following a ruled list. The list already ends in a rule, so
   this adds none of its own and sits close enough to read as part of it. */
.list-follow {
  font-size: var(--fs-small);
  margin: var(--sp-4) 0 0;
}

/* The list is the last thing in the section, so the section padding alone
   separates it from what follows. */
.section--continues > .container > .list-follow:last-child {
  margin-bottom: 0;
}

/* --- Admin tabs ----------------------------------------------------------
   Links rather than script, so each table is bookmarkable and the page works
   with JavaScript unavailable. */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  border-bottom: var(--border-hairline);
  margin: var(--sp-6) 0 var(--sp-5);
}

.tabs__tab {
  padding: 0 0 var(--sp-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-body-strong);
  color: var(--c-ink-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

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

  .tabs__tab.is-current {
    color: var(--c-ink);
    border-bottom-color: var(--c-action);
  }

.admin-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-small);
}

  .admin-filter select {
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--c-rule);
    background: var(--c-bg);
    font: inherit;
    max-width: 100%;
  }

/* ==========================================================================
   FAQ
   A native disclosure element, so the answer is in the markup and stays
   searchable, printable and reachable with JavaScript unavailable.
   ========================================================================== */

.faq {
  margin-top: var(--sp-5);
}

.faq__item {
  border-top: var(--border-hairline);
  padding: var(--sp-4) 0;
}

  .faq__item:last-child {
    border-bottom: var(--border-hairline);
  }

.faq__question {
  font-family: var(--font-display);
  font-weight: var(--fw-display-strong);
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: var(--sp-4);
  align-items: baseline;
  justify-content: space-between;
}

  /* The default triangle differs between browsers, so it is replaced with a
   sign that rotates. */
  .faq__question::-webkit-details-marker {
    display: none;
  }

  .faq__question::after {
    content: "+";
    font-family: var(--font-body);
    font-weight: var(--fw-body-medium);
    color: var(--c-action);
    flex: none;
    transition: transform var(--motion-quick) ease;
  }

.faq__item[open] > .faq__question::after {
  content: "\2212";
}

.faq__question:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.faq__answer {
  margin-top: var(--sp-4);
}

@media (prefers-reduced-motion: reduce) {
  .faq__question::after {
    transition: none;
  }
}

/* ==========================================================================
   Insights
   An executive advisory publication, not a blog feed: no sidebars, tag clouds,
   popularity counters or category sprawl.
   ========================================================================== */

.domain-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
}

.domain-filter__link {
  font-size: var(--fs-small);
  color: var(--c-ink-muted);
  text-decoration: none;
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid transparent;
}

  .domain-filter__link:hover {
    color: var(--c-ink);
  }

  .domain-filter__link.is-current {
    color: var(--c-ink);
    border-bottom-color: var(--c-action);
  }

.insight-list {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-5);
}

.insight-card {
  border-top: var(--border-hairline);
  padding-top: var(--sp-5);
}

.insight-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display-strong);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  margin: 0 0 var(--sp-3);
}

  .insight-card__title a {
    color: var(--c-ink);
    text-decoration: none;
  }

    .insight-card__title a:hover {
      color: var(--c-action);
    }

.insight-card__summary {
  margin: 0 0 var(--sp-3);
  color: var(--c-ink-muted);
  max-width: var(--measure);
}

.insight-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: baseline;
  font-size: var(--fs-small);
  margin: 0;
}

.domain-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
}

.domain-tag {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  border: 1px solid var(--c-rule);
  padding: var(--sp-1) var(--sp-3);
}

/* Article body: a longer measure than marketing copy, because sustained
   reading wants a settled rhythm rather than short lines. */
.prose--article {
  max-width: 36rem;
}

  .prose--article h2 {
    margin-top: var(--sp-7);
  }

  .prose--article blockquote {
    border-left: var(--border-accent-left, 3px solid var(--c-action));
    padding-left: var(--sp-5);
    margin: var(--sp-6) 0;
    color: var(--c-ink-muted);
  }

/* References sit below the article and read as secondary to it. */
.reference-list {
  margin: var(--sp-5) 0 0;
  padding-left: var(--sp-5);
  font-size: var(--fs-small);
}

.reference {
  margin-bottom: var(--sp-4);
}

.reference__org {
  display: block;
  font-weight: var(--fw-body-strong);
}

.reference .muted {
  display: block;
}

/* A draft preview must never be mistaken for the published page. */
.preview-banner {
  background: var(--c-ink);
  color: var(--c-bg);
  padding: var(--sp-4) 0;
  font-size: var(--fs-small);
}

/* A body citation links to the source that supports it. */
.prose--article a[href^="#ref-"] {
  font-size: 0.8em;
  vertical-align: super;
  text-decoration: none;
}

/* Marks an unpublished article in a review view. */
.draft-tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-body-strong);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-action);
  border: 1px solid var(--c-action);
  padding: 0 var(--sp-2);
}

/* The featured block is one link, so the whole thing is a target rather than
   just the title. The copy keeps its own heading from the content file. */
.featured-link {
  text-decoration: none;
  display: block;
}

  .featured-link:hover .featured-copy h2 {
    color: var(--c-action);
  }

.featured-copy h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-display-strong);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--c-ink);
  margin: 0 0 var(--sp-4);
}

.featured-copy p {
  color: var(--c-ink-muted);
}

/* hidden must win over any display rule the element already has. */
[hidden] {
  display: none !important;
}

/* --- Follow-Up -----------------------------------------------------------
   The flywheel selector and its exclusive option. */

.field-group {
  border: 0;
  padding: 0;
  margin: 0 0 var(--sp-6);
}

.field-group__legend {
  font-family: var(--font-display);
  font-weight: var(--fw-display-strong);
  font-size: var(--fs-h4);
  padding: 0;
}

.field-group__help {
  font-size: var(--fs-small);
  margin: var(--sp-2) 0 var(--sp-4);
}

.choice-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.choice {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}

  .choice label {
    font-size: var(--fs-small);
  }

  /* At the limit the remaining options are disabled rather than silently
   ignoring a click, so the state is visible. */
  .choice input:disabled + label {
    color: var(--c-ink-muted);
  }

/* The exclusive option sits apart, because it is not a seventh area. */
.choice--exclusive {
  grid-column: 1 / -1;
  border-top: var(--border-hairline);
  padding-top: var(--sp-4);
  margin-top: var(--sp-2);
}

.consent-note {
  margin: var(--sp-5) 0;
}

/* What a visitor wrote, shown only in the admin area. Preserves their line
   breaks and wraps a long unbroken string rather than stretching the page. */
.submission-text {
  border-left: 3px solid var(--c-rule);
  padding-left: var(--sp-5);
  margin: var(--sp-4) 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: var(--measure);
}

/* --- Cyber First Aid -----------------------------------------------------
   A checklist the visitor works through in their own browser. No score, no
   storage, no submission. */

.checklist {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  counter-reset: cfa;
}

.checklist__item {
  border-top: var(--border-hairline);
  padding: var(--sp-5) 0;
}

  .checklist__item:last-child {
    border-bottom: var(--border-hairline);
  }

.checklist__question {
  margin: 0 0 var(--sp-3);
  max-width: var(--measure);
}

.checklist__answers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.chip {
  font: inherit;
  font-size: var(--fs-small);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-rule);
  background: none;
  color: var(--c-ink-muted);
  cursor: pointer;
}

  .chip:hover {
    border-color: var(--c-ink);
    color: var(--c-ink);
  }

  .chip.is-chosen {
    border-color: var(--c-ink);
    background: var(--c-ink);
    color: var(--c-bg);
  }

  .chip:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
  }

.checklist__note {
  margin: var(--sp-5) 0;
  max-width: var(--measure);
}

.checklist__starts {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--c-surface);
}

  .checklist__starts ul {
    margin: var(--sp-4) 0;
    padding-left: var(--sp-5);
  }

/* Respond: numbered because order matters under pressure. */
.step-list {
  margin: var(--sp-5) 0 0;
  padding-left: var(--sp-5);
}

.step-list__item {
  margin-bottom: var(--sp-5);
}

.step-list__title {
  font-size: var(--fs-h4);
  margin: 0 0 var(--sp-2);
}

.question-list {
  margin: var(--sp-5) 0 0;
  padding-left: var(--sp-5);
}

.question-list__item {
  margin-bottom: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  max-width: var(--measure);
}

.section__heading--small {
  font-size: var(--fs-h4);
  margin: 0;
}

/* --- Connect -------------------------------------------------------------
   A single contact card, almost always opened on a phone after scanning a
   printed code. No navigation and no footer links: someone came for one
   person's details and site chrome would bury them. */

.connect-page {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.connect-shell {
  max-width: 26rem;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-5);
}

.connect {
  text-align: center;
}

.connect__photo {
  border-radius: 50%;
  width: 112px;
  height: 112px;
  object-fit: cover;
  margin-bottom: var(--sp-5);
}

.connect__name {
  font-family: var(--font-display);
  font-weight: var(--fw-display-strong);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  margin: 0;
}

.connect__role {
  margin: var(--sp-2) 0 0;
  color: var(--c-ink-muted);
}

.connect__line {
  margin: var(--sp-4) auto 0;
  max-width: 22rem;
  color: var(--c-ink-muted);
  font-size: var(--fs-small);
}

.connect__actions {
  margin-top: var(--sp-6);
}

/* Full width and comfortably tall: this is pressed with a thumb. */
.btn--block {
  display: block;
  width: 100%;
  text-align: center;
  padding-block: var(--sp-4);
}

.connect__links {
  display: flex;
  justify-content: center;
  gap: var(--sp-5);
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  font-size: var(--fs-small);
}

.connect__panel {
  margin-top: var(--sp-6);
  text-align: left;
}

  .connect__panel summary {
    list-style: none;
    cursor: pointer;
  }

    .connect__panel summary::-webkit-details-marker {
      display: none;
    }

  .connect__panel[open] summary {
    margin-bottom: var(--sp-5);
  }

.connect__consent {
  font-size: var(--fs-small);
  margin: var(--sp-5) 0;
}

.connect__followup {
  margin-top: var(--sp-6);
  font-size: var(--fs-small);
}

.connect-footer {
  text-align: center;
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
  border-top: var(--border-hairline);
}

/* Admin forms and long URLs. */
.admin-form {
  max-width: 32rem;
  margin-bottom: var(--sp-7);
}

.wrap-anywhere {
  overflow-wrap: anywhere;
  font-size: var(--fs-small);
}

/* QR previews in the admin area. The SVG is generated at a size that suits
   print, so it is constrained here rather than in the generator. */
.qr {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
}

  .qr summary {
    cursor: pointer;
    color: var(--c-action);
  }

.qr__code {
  margin: var(--sp-4) 0;
  max-width: 200px;
}

  .qr__code svg {
    width: 100%;
    height: auto;
    display: block;
  }

/* The QR shown at an event. Large, high contrast, and centred: it is scanned
   off a phone screen held at arm length, often in poor light. */
.connect__qr {
  margin-top: var(--sp-4);
}

  .connect__qr summary {
    list-style: none;
    cursor: pointer;
  }

    .connect__qr summary::-webkit-details-marker {
      display: none;
    }

.connect__qr-panel {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  background: #FFFFFF;
  text-align: center;
}

/* Always on white, never tinted, and never inverted in dark mode: a scanner
   needs dark modules on a light background. */
.connect__qr-code {
  max-width: 15rem;
  margin: 0 auto var(--sp-4);
}

  .connect__qr-code svg {
    width: 100%;
    height: auto;
    display: block;
  }

/* The arc a label is written along. Invisible: only the text renders. */
.fw-label-arc {
  fill: none;
  stroke: none;
}

/* Curved labels sit on the path, so no dominant-baseline is needed and the
   browser keeps each character upright relative to the wheel. */
.fw-label textPath {
  letter-spacing: 0.01em;
}