@charset "UTF-8";
/* GENERATED from static/scss/bigjump.scss by Sass. Do not edit this file: edit the .scss partials and recompile (npm run css). */
@layer tokens, reset, base, layout, components, includes, blocks, pages, utilities;
@layer tokens {
  /* =========================================================================
     Design tokens — Mastering Management (main site)
     Source: Sketch File/Mastering_Management_02_DELIVERED.sketch, colours and
     sizes as used on the page artboards (not the 00_Designsystem swatches,
     which disagree). See docs/component-inventory.md.

     Two tiers:
     1. Palette   --color-<name>   raw colours. Don't use in blocks directly
                                   unless a block needs that exact colour.
     2. Semantic  --color-ink, --color-surface, ... what blocks should use.
                                   The book section (_tokens-book.scss) remaps these.
     ========================================================================= */
  :root {
    /* ---- 1. Palette ---------------------------------------------------- */
    --color-navy: #19485C; /* headings, body text, rules, primary buttons */
    --color-rhino: #0F2B4A; /* footer, dark buttons, quote text */
    --color-cream: #F6EEE2; /* header band, panels, carousel buttons */
    --color-barley: #FFF5D2; /* pale offset blocks, inputs, light cards */
    --color-yellow: #F0E142; /* newsletter strip, highlights */
    --color-yellow-deep: #DFCB1D; /* speaker panel, event card */
    --color-orange: #FF5F00; /* offset blocks, bullets, illustrations */
    --color-orange-text: #F16F32; /* orange text on dark buttons (book) */
    --color-teal: #235D61; /* video panel, teal buttons */
    --color-teal-deep: #174850; /* duotone images, dark tiles */
    --color-teal-darkest:#12323E; /* darkest tiles, book overlays */
    --color-sage: #8EBD9D; /* tag pill, small buttons, attribution */
    --color-aqua: #98D4CC; /* book promo panel, handwritten captions */
    --color-olive: #B4BF64; /* event card, numbered card, tiles */
    --color-white: #FFFFFF;
    --color-logo: #0C444E; /* the logo's own colour (Sketch logo bitmap) */
    /* ---- 2. Semantic --------------------------------------------------- */
    --color-ink: var(--color-navy); /* headings, links, rules, primary buttons */
    --color-text: var(--color-rhino); /* body copy (design paragraphs are #0F2B4A) */
    --color-ink-strong: var(--color-rhino); /* footer bg, strong text */
    --color-surface: var(--color-white); /* page background */
    --color-surface-2: var(--color-cream); /* tinted sections, header band */
    --color-surface-3: var(--color-barley); /* pale panels, inputs */
    --color-accent: var(--color-teal); /* secondary dark colour */
    --color-accent-2: var(--color-yellow); /* highlight colour (underline, strip) */
    --color-highlight: var(--color-orange); /* offsets, bullets, figures */
    --color-caption: var(--color-aqua); /* handwritten captions */
    --color-on-dark: var(--color-white); /* text on navy/teal/rhino */
    --color-ink-contrast: var(--color-white); /* text on anything filled with --color-ink (primary buttons); dark bands flip it */
    --color-focus: var(--color-rhino); /* focus ring: ≥3:1 on every light background (orange was 2.7:1 on cream); dark areas switch to yellow */
    /* ---- Typography ---------------------------------------------------- */
    --font-display: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
    --font-body: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    /* Type sizes (css-guide §4 "Type").
       Mobile (base): mobile design px / 420 × 100vw — keeps the 420px artboard's proportions —
       capped at the tablet size so nothing jumps at 48rem. Body/lead have a legibility floor.
       Tablet: fixed. Desktop 64–100rem: scales up to the 1600px design. 100rem+: fixed.
       (Tablet and desktop values are in the media queries at the end.) */
    --fs-h1: min(8.5714vw, 2.64rem); /* 36 @420, max 42 */
    --fs-h2: min(5.7143vw, 1.92rem); /* 24 @420, max 31 */
    --fs-h3: min(5.7143vw, 1.5rem); /* 24 @420 */
    --fs-h4: min(5vw, 1.3125rem); /* 21 @420 */
    --fs-lead: clamp(1rem, 4.2857vw, 1.125rem); /* 18 @420, never below 16 */
    --fs-body: clamp(.875rem, 3.3333vw, 1rem); /* 14 @420 → 16, never below 14 */
    --fs-body-lg: clamp(1rem, 4.2857vw, 1.125rem); /* 18: testimonial attribution; never below 16 */
    --fs-button: var(--fs-body); /* 16: button labels (book remaps) */
    --fs-small: .875rem; /* 14 (footer, meta) */
    --fs-xsmall: .75rem; /* 12 (legal line; also the 13px mobile Menu/Close labels) */
    --fs-caption: min(4.7619vw, 1.25rem); /* 20 @420 */
    --lh-h1: 1.15;
    --ls-h1: -.017em; /* mobile 42/36; desktop value set at 48rem below */
    --lh-h2: 1.15;
    --ls-h2: -.01em;
    --lh-h3: 1.2;
    --lh-h4: 1.25;
    --lh-body: 1.6;
    --lh-lead: 1.5; /* 24/36 */
    --lh-caption: 1.3;
    --lh-statement: 1.15; /* long display-font statements in sentence case (book_promo): room for descenders */
    /* ---- Space ---------------------------------------------------------
       Steps 1–4 fixed everywhere. Steps 5–9 follow the same three-tier rule as type:
       mobile scales from the 420px design (capped at the tablet value), tablet fixed,
       desktop 64–100rem scales up to the 1600px design, 100rem+ fixed. */
    --space-1: .25rem; /*  4px */
    --space-2: .5rem; /*  8px */
    --space-3: .75rem; /* 12px */
    --space-4: 1rem; /* 16px */
    --space-5: min(3.8095vw, 1rem); /* 16 @420: heading to text */
    --space-6: min(5.7143vw, 1.5rem); /* 24 @420: column gaps, small panels */
    --space-7: min(7.619vw, 2rem); /* 32 @420: panel padding */
    --space-8: min(9.5238vw, 3.2rem); /* 40 @420, max 51: large panel padding */
    --space-9: min(14.2857vw, 4.8rem); /* 60 @420, max 77: gap between sections */
    /* ---- Page width ----------------------------------------------------
       Mobile: 90% of the viewport. Tablet (48–64rem): fixed 692px column.
       Desktop 64–100rem: 88% (design: 1406/1600). 100rem+: fixed 1406px, centred. */
    --page-width: 90%; /* mobile: ~21px margins at 420, as in the design */
    --container: 87.875rem; /* 1406px cap */
    --container-narrow: 56.8125rem; /* 909px cap for text columns (57% of 1600) */
    --tap-target: 2.75rem; /* 44px minimum for buttons, arrows, nav links */
    --radius: .625rem; /* rectangle buttons, inputs (10px in the Sketch file) */
    --radius-lg: 1.5rem; /* rounded section tops (course band) */
    --radius-pill: 999px; /* oval buttons, tag pill */
    --border: 2px solid var(--color-ink);
    --offset-block: min(9.5238vw, 2.5rem); /* colour block behind photos: 40px @420, 40px desktop */
  }
  /* Breakpoints (css-guide §4): 48rem tablet · 64rem small desktop · 100rem large desktop.
     Media queries can't read custom properties, so these values are written literally. */
  /* Tablet (48–64rem): fixed column, fixed type and spacing — nothing scales.
     Values = the 1600px design scaled to 1024px (where desktop scaling starts), never smaller
     than the mobile design or a readable minimum, so both neighbouring tiers join up. */
  @media (min-width: 48rem) {
    :root {
      --container: 43.25rem; /* 692px column, centred (= 90% of 768) */
      --fs-h1: 2.64rem; /* 42 */
      --fs-h2: 1.92rem; /* 31 */
      --fs-h3: 1.5rem; /* 24 */
      --fs-h4: 1.3125rem; /* 21 */
      --fs-lead: 1.125rem; /* 18 */
      --fs-body: 1rem; /* 16 */
      --fs-body-lg: 1.125rem; /* 18 — fixed from here up */
      --fs-caption: 1.25rem; /* 20 */
      --space-5: 1rem; /* 16 */
      --space-6: 1.5rem; /* 24 */
      --space-7: 2rem; /* 32 */
      --space-8: 3.2rem; /* 51 */
      --space-9: 4.8rem; /* 77 */
      --offset-block: 2.5rem; /* 40 */
      --lh-h1: .95; /* desktop 62/66 */
    }
  }
  /* Small desktop (64–100rem): content 88% wide; type and spacing scale with the viewport,
     true to the 1600px design (design px / 1600 × 100vw), from the tablet values up.
     Large desktop (100rem+): the clamp() maximums are the design values and are reached at
     exactly 1600px, so from 100rem everything is fixed; content is fixed at 1406px, centred. */
  @media (min-width: 64rem) {
    :root {
      --page-width: 88%;
      --container: 87.875rem; /* 1406px cap = fixed and centred from 100rem */
      --fs-h1: clamp(2.64rem, 4.125vw, 4.125rem); /* 42 → 66 */
      --fs-h2: clamp(1.92rem, 3vw, 3rem); /* 31 → 48 */
      --fs-h3: clamp(1.5rem, 2.25vw, 2.25rem); /* 24 → 36 */
      --fs-h4: clamp(1.3125rem, 1.5vw, 1.5rem); /* 21 → 24 */
      --fs-lead: clamp(1.125rem, 1.5vw, 1.5rem); /* 18 → 24 */
      --space-5: clamp(1rem, 1.5vw, 1.5rem); /* 16 → 24 */
      --space-6: clamp(1.5rem, 2vw, 2rem); /* 24 → 32 */
      --space-7: clamp(2rem, 3vw, 3rem); /* 32 → 48 */
      --space-8: clamp(3.2rem, 5vw, 5rem); /* 51 → 80 */
      --space-9: clamp(4.8rem, 7.5vw, 7.5rem); /* 77 → 120 */
    }
  }
}
@layer base {
  /* Self-hosted fonts. Files and licences in static/fonts/. Browsers only download a face when it is used. */
  @font-face {
    font-family: "Lilita One";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/lilita-one-400.woff2") format("woff2");
  }
  @font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/noto-sans-400.woff2") format("woff2");
  }
  @font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/noto-sans-600.woff2") format("woff2");
  }
  @font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/noto-sans-700.woff2") format("woff2");
  }
  @font-face {
    font-family: "Noto Sans";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/noto-sans-400-italic.woff2") format("woff2");
  }
  @font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/oswald-700.woff2") format("woff2");
  }
  @font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/open-sans-400.woff2") format("woff2");
  }
  @font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/open-sans-700.woff2") format("woff2");
  }
}
@layer reset {
  /* Minimal reset (layer: reset). */
  *, *::before, *::after {
    box-sizing: border-box;
  }
  body, h1, h2, h3, h4, p, ul, ol, figure, blockquote {
    margin: 0;
  }
  :where(ul[class], ol[class], nav ul) {
    list-style: none;
    padding: 0;
  }
  img, svg, video {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }
  input, button, textarea, select {
    font: inherit;
  }
}
@layer base {
  /* Base typography (layer: base). Element defaults only — blocks and components style their own parts. */
  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }
  body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
    background: var(--color-surface);
    -webkit-font-smoothing: antialiased;
  }
  /* The book theme sits on <main> and the sub-nav, so re-apply the inherited text settings there. */
  [data-section=book] {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--color-text);
  }
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--color-ink);
    text-wrap: balance;
  }
  h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
    text-transform: uppercase;
    color: var(--color-accent);
  }
  h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    text-transform: uppercase;
  }
  h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
  }
  h4 {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
  }
  [data-section=book] :is(h1, h2, h3, h4) {
    font-weight: 700;
  }
  p {
    text-wrap: pretty;
  }
  .u-lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }
  strong, b {
    font-weight: 700;
  }
  a {
    color: inherit;
    text-underline-offset: 0.15em;
  }
  @media (hover: hover) {
    a:hover {
      text-decoration-thickness: 2px;
    }
  }
  :focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
  }
  /* ---- Rich text (.u-rich-text wraps any RichText field) ------------------------------
     Content page (06): paragraphs at lead size (24px design), headings as the type scale,
     lists with orange dots and items in the display font. :where() keeps these overridable. */
  :where(.u-rich-text) > * + * {
    margin-block-start: var(--space-5);
  }
  :where(.u-rich-text) > :is(h2, h3, h4) {
    margin-block-start: var(--space-8);
  }
  :where(.u-rich-text) > :is(h2, h3, h4):first-child {
    margin-block-start: 0;
  }
  :where(.u-rich-text) > :is(h2, h3, h4) + * {
    margin-block-start: var(--space-5);
  }
  :where(.u-rich-text) > :is(ul, ol) {
    margin-block: var(--space-7);
  }
  :where(.u-rich-text) :is(p, ol) {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }
  :where(.u-rich-text) h2 {
    color: var(--color-ink-strong);
  }
  :where(.u-rich-text) a {
    color: var(--color-ink);
    text-decoration-thickness: 1px;
  }
  :where(.u-rich-text) ul {
    list-style: none;
    padding: 0;
  }
  :where(.u-rich-text) ul > li {
    position: relative;
    padding-inline-start: 2.25em;
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    line-height: 1.4;
    color: var(--color-ink-strong);
  }
  :where(.u-rich-text) ul > li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.3em;
    inline-size: 0.75em;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-highlight);
  }
  :where(.u-rich-text) ul > li + li {
    margin-block-start: var(--space-4);
  }
  :where(.u-rich-text) ol {
    padding-inline-start: 1.5em;
  }
  :where(.u-rich-text) ol > li + li {
    margin-block-start: var(--space-3);
  }
  :where(.u-rich-text) blockquote {
    margin-block: var(--space-7);
    padding-inline-start: var(--space-6);
    border-inline-start: var(--space-1) solid var(--color-highlight);
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    line-height: 1.4;
    color: var(--color-ink-strong);
  }
  :where(.u-rich-text) blockquote p {
    font-size: inherit;
    line-height: inherit;
  }
}
@layer layout {
  .l-container {
    inline-size: min(var(--page-width), var(--container));
    margin-inline: auto;
  }
  .l-container--narrow {
    max-inline-size: var(--container-narrow);
  }
  /* Layout modes (css-guide §4 "Content width").
     Default: block root is full width (it carries any background colour edge to edge) and its
     content sits in .l-container — fixed and centred.
     .l-bleed      content fills the whole screen width (e.g. image_carousel).
     .l-bleed-end  content starts on the container's left edge and runs off the right edge of
                   the screen (e.g. card_carousel). Use on a full-width element. */
  .l-bleed {
    inline-size: 100%;
  }
  /* .l-panel  a coloured panel (usually with u-band): edge to edge on phones, as in the mobile design, with its
               content lined up with the page margins; from 48rem exactly the content width, centred. */
  .l-panel {
    inline-size: 100%;
    padding-inline: calc((100% - var(--page-width)) / 2);
  }
  @media (min-width: 48rem) {
    .l-panel {
      inline-size: min(var(--page-width), var(--container));
      margin-inline: auto;
      padding-inline: 0;
    }
  }
  .l-bleed-end {
    padding-inline-start: calc((100% - min(var(--page-width), var(--container))) / 2);
  }
  .u-skip-link {
    position: absolute;
    inset-inline-start: -999px;
  }
  .u-skip-link:focus {
    inset-inline-start: var(--space-4);
    inset-block-start: var(--space-4);
    z-index: 100;
    background: var(--color-surface);
    padding: var(--space-2) var(--space-4);
  }
  .u-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@layer components {
  /* Component: icon (Font Awesome 6 Pro, self-hosted sprite). Sized by font-size, coloured by currentColor. */
  .c-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: none;
    fill: currentColor;
    vertical-align: -0.125em;
  }
}
@layer components {
  /* Component: logo. Sized by its container (the header, footer tile or book hero sets the width). */
  .c-logo {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1967/1815;
    color: var(--color-logo);
    fill: currentColor;
  }
}
@layer components {
  /* Component: button. Template: templates/components/button.html.
     Variants (component-inventory "Master list 4"):
     primary  navy rectangle, white label + arrow ("Let's talk", "Book a course now")
     small    sage rectangle, dark label + arrow ("Ask me a question" in panels)
     accent   orange rectangle ("Start your journey today")
     oval     outline ellipse + arrow ("Ask me a question", "Explore the book"); fills sage on hover (design board)
     icon     teal panel: big icon, two-line label, arrow ("Purchase my book now"); add --social for a round icon (LinkedIn)
     outline  transparent with a border (book page, secondary actions)
     Colours are set through --btn-* so variants only change the custom properties. */
  .c-button {
    --btn-bg: var(--color-ink);
    --btn-fg: var(--color-ink-contrast);
    --btn-border: transparent; /* stays transparent so forced-colours mode still shows an outline */
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75em;
    min-block-size: var(--tap-target);
    padding: 0.75em 1.5em;
    border: 2px solid var(--btn-border);
    border-radius: var(--radius);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font: 400 var(--fs-button)/1.4 var(--font-body);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }
  .c-button__icon {
    font-size: 1em;
  }
  .c-button__label {
    display: block;
  }
  .c-button--small {
    --btn-bg: var(--color-sage);
    --btn-fg: var(--color-rhino);
    font-size: var(--fs-small);
  } /* fixed fill, so a fixed label colour (stays dark on dark bands) */
  .c-button--accent {
    --btn-bg: var(--color-highlight);
    --btn-fg: var(--color-rhino);
  }
  .c-button--outline {
    --btn-bg: transparent;
    --btn-fg: var(--color-ink);
    --btn-border: currentColor;
  }
  .c-button--oval {
    --btn-bg: transparent;
    --btn-fg: var(--color-ink-strong);
    --btn-border: currentColor;
    justify-content: center;
    padding: 1.25em 2em;
    border-radius: 50%; /* a true ellipse, as drawn — not --radius-pill */
  }
  .c-button--icon {
    --btn-bg: var(--color-accent);
    gap: 1em;
    padding: 1em 1.5em;
    font-size: var(--fs-small);
  }
  .c-button--icon .c-button__icon:first-child {
    font-size: 3.4em;
  } /* the large leading icon */
  .c-button--icon .c-button__label {
    max-inline-size: 9em;
  } /* breaks "Purchase my / book now" over two lines */
  .c-button--social .c-button__icon:first-child {
    font-size: 1.75em;
    box-sizing: content-box;
    padding: 0.3em;
    border: 2px solid currentColor;
    border-radius: 50%;
  }
  /* Book section: square corners, bold, orange label on dark teal */
  [data-section=book] .c-button {
    border-radius: 0;
    font-weight: 700;
  }
  [data-section=book] .c-button--primary {
    --btn-bg: var(--color-ink);
    --btn-fg: var(--color-button-text);
  } /* orange label on darkest teal: 4.55:1 (on teal-deep it was 3.4:1) */
  @media (hover: hover) {
    .c-button:hover:not(:disabled) {
      --btn-bg: color-mix(in srgb, var(--color-ink) 80%, var(--color-ink-strong));
    }
    .c-button:is(.c-button--small, .c-button--accent, .c-button--icon):hover:not(:disabled) {
      --btn-bg: var(--color-ink);
      --btn-fg: var(--color-ink-contrast);
    }
    .c-button:is(.c-button--outline, .c-button--oval):hover:not(:disabled) {
      --btn-bg: var(--color-sage);
      --btn-fg: var(--color-rhino);
    }
  }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .c-button {
      transition: background-color 0.15s, color 0.15s;
    }
    .c-button .c-button__icon:last-child {
      transition: translate 0.15s;
    }
    .c-button:hover:not(:disabled) .c-button__icon:last-child {
      translate: 0.2em 0;
    }
  }
  .c-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}
@layer components {
  /* Component: framed_image. The colour block starts about a third of the way in and down, and sticks out
     by --offset-block to the bottom and one side (physical direction is part of the design). */
  .c-framed-image {
    --frame-colour: var(--color-orange);
    position: relative;
    isolation: isolate;
    margin: 0;
    padding-block-end: var(--offset-block);
    padding-inline-end: var(--offset-block);
  }
  .c-framed-image::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 36% 0 0 38%;
    background: var(--frame-colour);
  }
  .c-framed-image__img {
    inline-size: 100%;
    object-fit: cover;
  }
  .c-framed-image--start {
    padding-inline: var(--offset-block) 0;
  }
  .c-framed-image--start::before {
    inset: 36% 38% 0 0;
  }
  .c-framed-image--yellow {
    --frame-colour: var(--color-yellow);
  }
  .c-framed-image--pale {
    --frame-colour: var(--color-barley);
  }
}
@layer components {
  /* Component: handwritten_caption. Arrow is a decorative mask (static/img/mm_caption-arrow.svg) so it takes the text colour. */
  .c-handwritten-caption {
    position: relative;
    max-inline-size: 12em;
    padding-block-start: 1.4em;
    font-family: var(--font-display);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    text-transform: uppercase;
    text-align: center;
    color: var(--color-caption);
  }
  .c-handwritten-caption::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 1.4em;
    aspect-ratio: 1;
    background: currentColor;
    mask: url("../img/mm_caption-arrow.svg") center/contain no-repeat;
  }
  .c-handwritten-caption--arrow-end {
    padding-block: 0 1.4em;
  }
  .c-handwritten-caption--arrow-end::before {
    inset: auto 0 0 auto;
    rotate: 180deg;
  }
}
@layer components {
  /* Component: carousel_controls. Round cream buttons with a navy chevron; vertical variant is bare chevrons. */
  .c-carousel-controls {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  .c-carousel-controls__btn {
    display: inline-grid;
    place-items: center;
    inline-size: clamp(var(--tap-target), 4vw, 4rem); /* 63px at 1600, never under 44px; no text inside */
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background: var(--color-surface-2);
    color: var(--color-ink);
    font-size: 1.5rem;
    cursor: pointer;
  }
  .c-carousel-controls__btn[aria-disabled=true] {
    opacity: 0.4;
    cursor: default;
  } /* set by carousel.js at either end; stays focusable */
  .c-carousel-controls--vertical {
    flex-direction: column;
    gap: var(--space-3);
  }
  .c-carousel-controls--vertical .c-carousel-controls__btn {
    background: transparent;
    font-size: 2rem;
  }
  @media (hover: hover) {
    .c-carousel-controls__btn:hover:not([aria-disabled=true]) {
      background: var(--color-ink);
      color: var(--color-ink-contrast);
    }
  }
}
@layer components {
  /* Component: scroller — a horizontal (default) or vertical scroll-snap list, used by the carousels
     (image_carousel, card_carousel, reviews). Put it on the <ul> together with js-carousel, an id, tabindex="0"
     and an aria-label; arrows come from components/carousel_controls.html (static/js/modules/carousel.js).
     Blocks set the item sizes and gaps (--scroller-gap); the scrollbar is hidden because the arrows, swipe,
     trackpad and keyboard all scroll the list. */
  .c-scroller {
    display: flex;
    gap: var(--scroller-gap, var(--space-4));
    list-style: none; /* no padding/margin reset here (base/_reset.scss does it), so layout classes like .l-bleed-end still apply */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .c-scroller::-webkit-scrollbar {
    display: none;
  }
  .c-scroller > * {
    flex: none;
    min-inline-size: 0;
    scroll-snap-align: start;
  }
  .c-scroller--vertical {
    flex-direction: column;
    overflow: hidden auto;
    overscroll-behavior: contain;
    scroll-snap-type: y mandatory;
  }
  @media (prefers-reduced-motion: no-preference) {
    .c-scroller {
      scroll-behavior: smooth;
    }
  }
}
@layer components {
  /* Component: tag. */
  .c-tag {
    display: inline-block;
    padding: 0.2em 0.9em;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--color-sage);
    color: var(--color-rhino); /* fixed fill, so a fixed label colour (stays dark on the teal band) */
    font-size: var(--fs-small);
    line-height: var(--lh-lead);
  }
}
@layer components {
  /* Component: check_list. Body-size rows with a larger tick and hairline dividers, as in the Services benefits list. */
  .c-check-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .c-check-list__item {
    display: flex;
    align-items: center;
    gap: 0.9em;
    padding-block: 0.85em;
  }
  .c-check-list__item:not(:last-child) {
    border-block-end: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  }
  .c-check-list__icon {
    flex: none;
    font-size: 1.5em;
    color: var(--color-ink);
  }
}
@layer components {
  /* Component: back_to_top. */
  .c-back-to-top {
    display: inline-grid;
    place-items: center;
    align-self: center;
    inline-size: var(--tap-target);
    aspect-ratio: 1;
    border: 2px solid transparent;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-ink);
    font-size: 1.25rem;
  }
  @media (hover: hover) {
    .c-back-to-top:hover {
      background: var(--color-yellow);
    }
  }
}
@layer components {
  /* Component: form_field. Pale input on any background, as in the newsletter strip. */
  .c-form-field {
    display: grid;
    gap: var(--space-2);
    text-align: start;
  }
  .c-form-field__label {
    font-size: var(--fs-small);
    font-weight: 700;
    color: var(--color-ink-strong);
  }
  .c-form-field__input {
    inline-size: 100%;
    min-block-size: var(--tap-target);
    padding: 0.75em 1.5em;
    border: 2px solid transparent;
    border-radius: var(--radius);
    background: var(--color-surface-3);
    color: var(--color-ink-strong);
    font-size: var(--fs-body);
    line-height: 1.4;
  }
  .c-form-field__input::placeholder {
    color: var(--color-ink-strong);
    opacity: 0.75;
  }
  .c-form-field__input--textarea {
    resize: vertical;
  }
  .c-form-field__help {
    font-size: var(--fs-small);
  }
  .c-form-field__error {
    font-size: var(--fs-small);
    font-weight: 700;
    color: var(--color-ink-strong);
  }
  .c-form-field:has([aria-invalid=true]) .c-form-field__input,
  .c-form-field__input:user-invalid {
    border-color: var(--color-orange);
  }
  /* Select: native control with a drawn chevron (no icon font needed) */
  .c-form-field__input--select {
    appearance: none;
    padding-inline-end: 3em;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 1.6em center, right 1.2em center;
    background-size: 0.4em 0.4em;
    background-repeat: no-repeat;
  }
  /* Checkbox: box first, label beside it; help/error line up under the label */
  .c-form-field--checkbox {
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: var(--space-3);
  }
  .c-form-field--checkbox > :is(.c-form-field__help, .c-form-field__error) {
    grid-column: 2;
  }
  .c-form-field__check {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    margin: 0;
    accent-color: var(--color-ink);
  }
  .c-form-field--checkbox .c-form-field__label {
    font-weight: 400;
    font-size: var(--fs-body);
    color: inherit;
    padding-block-start: 0.1em;
  }
}
@layer components {
  /* Component: heading_accent. */
  .c-heading-accent {
    background: linear-gradient(var(--color-accent-2), var(--color-accent-2)) no-repeat 0 100%/100% 0.1em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding-block-end: 0.05em;
  }
  [data-section=book] .c-heading-accent {
    background-size: 100% 100%;
    padding-inline: 0.15em;
  }
}
@layer components {
  /* Component: event_card. Colour panels that alternate yellow / olive (fixed palette colours, as drawn). */
  .c-event-card {
    --card-bg: var(--color-yellow-deep);
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-7);
    border: 2px solid transparent;
    background: var(--card-bg);
    color: var(--color-rhino);
  }
  .c-event-card--olive {
    --card-bg: var(--color-olive);
  }
  .c-event-card__date,
  .c-event-card__place {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }
  .c-event-card__title {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    color: var(--color-navy);
  }
  .c-event-card__action {
    margin-block-start: var(--space-5);
  }
}
@layer components {
  /* Component: card. Numbered colour card; the colours cycle in card_carousel (fixed palette colours, as drawn).
     Cards in a row stretch to the same height; the button sits at the bottom. */
  .c-card {
    --card-bg: var(--color-yellow-deep);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-block-size: 100%;
    padding: var(--space-7) var(--space-7) var(--space-6);
    border: 2px solid transparent;
    background: var(--card-bg);
    color: var(--color-navy);
  }
  .c-card--olive {
    --card-bg: var(--color-olive);
  }
  .c-card--barley {
    --card-bg: var(--color-barley);
  }
  .c-card--sage {
    --card-bg: var(--color-sage);
  }
  .c-card--aqua {
    --card-bg: var(--color-aqua);
  }
  .c-card__number {
    font-size: var(--fs-lead);
  }
  .c-card__text {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    line-height: var(--lh-caption);
  }
  .c-card__action {
    margin-block-start: auto;
    align-self: flex-start;
  }
}
@layer components {
  /* Component: testimonial. */
  .c-testimonial {
    display: grid;
    gap: var(--space-5);
    margin: 0;
  }
  .c-testimonial__quote {
    display: grid;
    gap: var(--space-5);
    margin: 0;
  }
  .c-testimonial__headline {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: var(--lh-caption);
    text-transform: uppercase;
    color: var(--color-ink-strong);
  }
  .c-testimonial__headline::before {
    content: open-quote;
  }
  .c-testimonial__headline::after {
    content: close-quote;
  }
  .c-testimonial__text {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }
  .c-testimonial__text::before {
    content: open-quote;
  }
  .c-testimonial__text::after {
    content: close-quote;
  }
  .c-testimonial__cite {
    font-size: var(--fs-body-lg);
    color: var(--color-ink);
  } /* design: sage, but sage is 1.9:1 on cream; ink passes on every band (white on teal) */
}
@layer components {
  /* Component: video. Poster with a translucent play button; the player replaces the poster in the same 3:2 frame. */
  .c-video {
    display: grid;
    gap: var(--space-5);
    justify-items: start;
  }
  .c-video__heading {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    text-transform: none;
  }
  .c-video__frame {
    position: relative;
    inline-size: 100%;
    aspect-ratio: 3/2;
    container-type: inline-size;
  }
  .c-video__poster,
  .c-video__frame iframe {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border: 0;
  }
  .c-video__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--color-white);
    font-size: clamp(3rem, 20cqi, 8rem); /* the play triangle is about a fifth of the poster width, as drawn */
    text-decoration: none;
  }
  .c-video__play .c-icon {
    opacity: 0.75;
    filter: drop-shadow(0 0 0.1em color-mix(in srgb, var(--color-rhino) 40%, transparent));
  }
  .c-video__play:focus-visible {
    outline-offset: -6px;
  }
  @media (hover: hover) {
    .c-video__play:hover .c-icon {
      opacity: 1;
    }
  }
  .c-video__transcript summary {
    cursor: pointer;
    min-block-size: var(--tap-target);
    display: flex;
    align-items: center;
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }
  .c-video__transcript[open] summary {
    margin-block-end: var(--space-4);
  }
}
@layer components {
  /* Component: star_rating. Orange stars (non-text graphic: 3:1 on white); empty stars are the same shape, faded. */
  .c-star-rating {
    display: inline-flex;
    gap: 0.1em;
    color: var(--color-highlight);
    font-size: var(--fs-h4);
    line-height: 1;
  }
  .c-star-rating__star--empty {
    opacity: 0.3;
  }
}
@layer components {
  /* Component: article_card. Template: templates/components/article_card.html. Whole card clickable via the stretched title link. */
  .c-article-card {
    position: relative; /* anchors the stretched link */
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-block-size: 100%;
  }
  .c-article-card__img {
    inline-size: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
  }
  .c-article-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    flex: 1;
  }
  .c-article-card__phase {
    margin: 0;
  }
  .c-article-card__title {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    color: var(--color-ink);
  }
  .c-article-card__link {
    color: inherit;
    text-decoration: none;
  }
  .c-article-card__link::after { /* stretched link: covers the whole card */
    content: "";
    position: absolute;
    inset: 0;
  }
  .c-article-card__link:focus-visible {
    outline: none;
  }
  .c-article-card__link:focus-visible::after {
    outline: 3px solid var(--color-focus);
    outline-offset: 4px;
  }
  .c-article-card__summary {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
  }
  .c-article-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5em;
    margin-block-start: auto;
    padding-block-start: var(--space-2);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    color: var(--color-text);
  }
  .c-article-card__meta > * + *::before {
    content: "· ";
  } /* middle dot between reading time and date */
  @media (hover: hover) {
    .c-article-card:hover .c-article-card__title {
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
  }
}
@layer includes {
  /* Include: page_title. The cream band continues from the header; page_header (if next) joins it without a gap. */
  .c-page-title {
    padding-block: var(--space-5) var(--space-7);
    background: var(--color-surface-2);
    text-align: center;
  }
  .c-page-title__heading {
    max-inline-size: 22ch;
    margin-inline: auto;
  }
}
@layer blocks {
  /* Block: section_heading. Sits --space-7 above the block it introduces (css-guide §4 "Space between blocks"). */
  .b-section-heading {
    margin-block: var(--space-9) var(--space-7);
  }
  .b-section-heading + [class] {
    margin-block-start: 0;
  }
  .b-section-heading__inner > * + * {
    margin-block-start: var(--space-5);
  }
  .b-section-heading__eyebrow {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    color: var(--color-ink);
  }
  .b-section-heading__eyebrow + .b-section-heading__heading {
    color: var(--color-accent);
  }
  .b-section-heading__intro {
    max-inline-size: 54rem;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }
  .b-section-heading--center {
    text-align: center;
  }
  .b-section-heading--center .b-section-heading__intro {
    margin-inline: auto;
  }
}
@layer blocks {
  /* Block: rich_text. Narrow centred column; element styles come from .u-rich-text (base/_typography.scss). */
  .b-rich-text {
    margin-block: var(--space-9);
  }
}
@layer blocks {
  /* Block: page_header. A three-column grid (margin · content · margin) lets the banner run edge to edge while
     the text and the cut-out line up with the content column. The cut-out overlaps the banner. */
  .b-page-header {
    display: grid;
    grid-template-columns: 1fr min(var(--page-width), var(--container)) 1fr;
    margin-block: 0 var(--space-9);
    background: var(--color-surface-2);
  }
  .b-page-header__text {
    grid-column: 2;
    grid-row: 1;
    padding-block: var(--space-6) var(--space-8);
  }
  .b-page-header__text > * + * {
    margin-block-start: var(--space-5);
  }
  .b-page-header__heading {
    color: var(--color-ink);
  }
  .b-page-header__intro {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }
  .b-page-header__statement {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--color-ink);
    text-wrap: balance;
  }
  .b-page-header__statement::before {
    content: open-quote;
  }
  .b-page-header__statement::after {
    content: close-quote;
  }
  .b-page-header__banner {
    grid-column: 1/-1;
    grid-row: 2;
    inline-size: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
  }
  .b-page-header__cutout {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    position: relative;
    z-index: 1;
    inline-size: auto;
    block-size: min(36vw, 14rem); /* image only, no text: height sets its size, width follows; stays within the banner */
  }
  @media (min-width: 64rem) {
    .b-page-header__text {
      max-inline-size: calc(var(--container-narrow) + var(--space-9));
      padding-block: var(--space-8) var(--space-9);
      padding-inline-start: var(--space-9); /* text column indented from the container, as drawn (215 vs 97px) */
    }
    .b-page-header--has-cutout .b-page-header__text {
      max-inline-size: min(var(--container-narrow) + var(--space-9), 74%);
    }
    .b-page-header__banner {
      aspect-ratio: 1600/586;
    }
    .b-page-header__cutout {
      grid-row: 1/3;
      align-self: start;
      margin-block-start: var(--space-8);
      block-size: clamp(22rem, 37.8vw, 37.8rem); /* 605px @1600 */
    }
  }
}
@layer blocks {
  /* Block: pattern_strip. Decorative tiles with a fixed colour sequence (palette tokens: the design needs these exact colours).
     Mobile: 10 tiles per row, edge to edge (as the mobile design, and like the panels above it).
     Tablet and up: 22 tiles per row across the content width (the 1406px desktop design). */
  .b-pattern-strip {
    margin-block: 0;
  } /* touches the band or panel above, as drawn (css-guide §4 exception) */
  .b-pattern-strip:is(.l-panel + .b-pattern-strip) {
    margin-block-start: calc(var(--space-9) * -1);
  } /* cancels the panel's bottom margin */
  .b-pattern-strip__row {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .b-pattern-strip__tile {
    aspect-ratio: 1;
    min-inline-size: 0;
  }
  /* Only the first 10 tiles show on mobile. */
  .b-pattern-strip__tile:nth-child(n+11) {
    display: none;
  }
  /* Row 1: six-tile cycle — dark teal, orange, yellow, barley, olive, sage. */
  .b-pattern-strip__tile:nth-child(6n+1) {
    background-color: var(--color-teal-darkest);
  }
  .b-pattern-strip__tile:nth-child(6n+2) {
    background-color: var(--color-orange);
  }
  .b-pattern-strip__tile:nth-child(6n+3) {
    background-color: var(--color-yellow);
  }
  .b-pattern-strip__tile:nth-child(6n+4) {
    background-color: var(--color-barley);
  }
  .b-pattern-strip__tile:nth-child(6n+5) {
    background-color: var(--color-olive);
  }
  .b-pattern-strip__tile:nth-child(6n) {
    background-color: var(--color-sage);
  }
  /* Row 2: the same cycle, offset. Tiles 1 and 2 are yellow and barley, then the cycle starts at dark teal. */
  .b-pattern-strip__row--offset .b-pattern-strip__tile:nth-child(1) {
    background-color: var(--color-yellow);
  }
  .b-pattern-strip__row--offset .b-pattern-strip__tile:nth-child(2) {
    background-color: var(--color-barley);
  }
  .b-pattern-strip__row--offset .b-pattern-strip__tile:nth-child(6n+3) {
    background-color: var(--color-teal-darkest);
  }
  .b-pattern-strip__row--offset .b-pattern-strip__tile:nth-child(6n+4) {
    background-color: var(--color-orange);
  }
  .b-pattern-strip__row--offset .b-pattern-strip__tile:nth-child(6n+5) {
    background-color: var(--color-yellow);
  }
  .b-pattern-strip__row--offset .b-pattern-strip__tile:nth-child(6n) {
    background-color: var(--color-barley);
  }
  .b-pattern-strip__row--offset .b-pattern-strip__tile:nth-child(6n+7) {
    background-color: var(--color-olive);
  }
  .b-pattern-strip__row--offset .b-pattern-strip__tile:nth-child(6n+8) {
    background-color: var(--color-sage);
  }
  @media (min-width: 48rem) {
    .b-pattern-strip__inner {
      inline-size: min(var(--page-width), var(--container));
      margin-inline: auto;
    }
    .b-pattern-strip__row {
      grid-template-columns: repeat(22, minmax(0, 1fr));
    }
    .b-pattern-strip__tile:nth-child(n+11) {
      display: block;
    }
  }
}
@layer blocks {
  /* Block: benefits_row. Contained on the page background; sits one --space-9 from its neighbours. */
  .b-benefits-row {
    margin-block: var(--space-9);
  }
  .b-benefits-row__inner {
    display: grid;
    gap: var(--space-7);
    justify-items: center;
  }
  .b-benefits-row__heading {
    text-align: center;
  }
  .b-benefits-row__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7) var(--space-6);
    list-style: none;
    margin: 0;
    padding: 0;
    inline-size: 100%;
  }
  .b-benefits-row__item {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: var(--space-5);
    text-align: center;
  }
  .b-benefits-row__icon {
    inline-size: min(100%, 7rem);
    block-size: auto;
    aspect-ratio: 1;
    object-fit: contain;
  }
  .b-benefits-row__title {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    text-transform: uppercase;
  }
  .b-benefits-row__text {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    max-inline-size: 22ch;
  }
  @media (min-width: 64rem) {
    .b-benefits-row__list {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .b-benefits-row__text {
      max-inline-size: 26ch;
    }
  }
}
@layer blocks {
  /* Block: contact_methods. Cream panel (Panel layout mode, css-guide §4: edge to edge on phones, content width
     from 48rem). Rows stack on mobile and become label | value columns from 48rem. */
  .b-contact-methods {
    margin-block: var(--space-9);
    padding-block: var(--space-8);
    background: var(--color-surface-2);
  }
  @media (min-width: 48rem) {
    .b-contact-methods {
      padding-inline: var(--space-8);
    }
  }
  @media (min-width: 64rem) {
    .b-contact-methods {
      padding-inline: min(16.8%, 15rem);
    } /* 236px of 1406 at 1600 */
  }
  .b-contact-methods__list {
    display: grid;
    gap: var(--space-7);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .b-contact-methods__row {
    display: grid;
    gap: var(--space-5);
    justify-items: start;
    align-items: center;
  }
  @media (min-width: 48rem) {
    .b-contact-methods__row {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
      gap: var(--space-6);
    }
  }
  .b-contact-methods__label,
  .b-contact-methods__value {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    text-transform: uppercase;
    color: var(--color-accent);
    overflow-wrap: anywhere;
  }
  .b-contact-methods__value a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
  }
  @media (hover: hover) {
    .b-contact-methods__value a:hover {
      text-decoration-thickness: 2px;
    }
  }
}
@layer blocks {
  /* Block: cta_banner. Sits on an editable band (u-band), so the block sets no background and text colour follows the band.
     Mobile: text, then the figures below it. From 64rem the figures sit at the right of the same row, as drawn. */
  .b-cta-banner {
    margin-block: 0;
    padding-block: var(--space-8);
  }
  .b-cta-banner__inner {
    display: grid;
    gap: var(--space-6);
    justify-items: center;
  }
  .b-cta-banner__text {
    display: grid;
    justify-items: center;
    gap: var(--space-5);
    text-align: center;
  }
  .b-cta-banner__heading {
    text-wrap: balance;
  }
  .b-cta-banner__body {
    max-inline-size: 65ch;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
  .b-cta-banner__figures {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    inline-size: 40%;
  }
  .b-cta-banner__img {
    inline-size: 100%;
    block-size: auto;
  }
  @media (min-width: 64rem) {
    /* Text centred on the container; figures over the right-hand side of the same row. */
    .b-cta-banner__inner {
      grid-template-columns: minmax(0, 1fr);
    }
    .b-cta-banner__text,
    .b-cta-banner__figures {
      grid-area: 1/1;
    }
    .b-cta-banner__text {
      inline-size: 100%;
      max-inline-size: 37rem;
      justify-self: center;
    }
    .b-cta-banner__figures {
      inline-size: 22%;
      justify-self: end;
      align-self: center;
      margin-inline-end: var(--space-8);
    }
  }
}
@layer blocks {
  /* Block: text_image. Compact: image (pale framed_image) first, then text; from 48rem 1fr 1fr, image_side "end" swaps
     them with `order`. Rich: plain image, markup order body > media > action; mobile stacks in that order, from 48rem
     grid areas put the image and its accent button in one column and the text beside them, either side. */
  .b-text-image {
    margin-block: var(--space-9);
  }
  .b-text-image__grid {
    display: grid;
    gap: var(--space-7);
    align-items: center;
  }
  .b-text-image__body {
    display: grid;
    gap: var(--space-5);
    align-content: center;
    min-inline-size: 0;
  }
  .b-text-image__text {
    max-inline-size: 26em;
  }
  .b-text-image__action {
    justify-self: start;
  }
  /* compact */
  .b-text-image__frame {
    inline-size: 100%;
  }
  .b-text-image__frame .c-framed-image__img {
    aspect-ratio: 690/452;
  }
  .b-text-image--compact .b-text-image__action {
    margin-block-start: var(--space-3);
  }
  /* Only paragraphs and ordered lists are set to body size; bullet lists (ul) deliberately keep the rich-text
     list style (display font, orange dots) from .u-rich-text. */
  .b-text-image--compact .b-text-image__text :is(p, ol) {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
  .b-text-image--compact .b-text-image__text > p + p {
    margin-block-start: var(--space-5);
  }
  /* rich */
  .b-text-image--rich .b-text-image__grid {
    grid-template-areas: "body" "media" "action";
  }
  .b-text-image--rich .b-text-image__body {
    grid-area: body;
  }
  .b-text-image--rich .b-text-image__media {
    grid-area: media;
  }
  .b-text-image--rich .b-text-image__action {
    grid-area: action;
  }
  .b-text-image--rich .b-text-image__heading {
    color: var(--color-ink-strong);
  }
  .b-text-image--rich .b-text-image__text {
    max-inline-size: none;
  }
  .b-text-image__img {
    inline-size: 100%;
    aspect-ratio: 565/380;
    object-fit: cover;
  }
  @media (min-width: 48rem) {
    .b-text-image__grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--space-6);
    }
    .b-text-image--image-end .b-text-image__media {
      order: 2;
    }
    .b-text-image--compact .b-text-image__body {
      padding-inline: var(--space-7);
    }
    .b-text-image--rich .b-text-image__grid {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      grid-template-areas: "media body" "action body";
      column-gap: var(--space-7);
      row-gap: var(--space-6);
      align-items: start;
    }
    .b-text-image--rich .b-text-image__media {
      align-self: end;
    }
    .b-text-image--rich .b-text-image__body {
      align-self: center;
    }
    .b-text-image--rich.b-text-image--image-end .b-text-image__grid {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      grid-template-areas: "body media" "body action";
    }
  }
}
@layer blocks {
  /* Block: image_list (put a section_heading above it). Stacked on mobile; from 48rem with_benefits rows are photo (left) + text (right) on a subgrid;
     plain is one photo beside a stacked text column with the list button under it. The list is capped at
     about 1050px (the design's 340–1388 of 1600). */
  .b-image-list {
    margin-block: var(--space-9);
  }
  .b-image-list__list {
    display: grid;
    gap: var(--space-9) var(--space-6);
    max-inline-size: 66rem;
    margin-inline: auto;
  }
  .b-image-list__item {
    display: grid;
    gap: var(--space-6);
    align-content: start;
  }
  .b-image-list__img {
    inline-size: 100%;
    aspect-ratio: 448/370;
    object-fit: cover;
  }
  .b-image-list__entry {
    display: grid;
    gap: var(--space-5);
  }
  .b-image-list__body {
    display: grid;
    align-content: start;
    gap: var(--space-5);
  }
  .b-image-list__stack {
    gap: var(--space-8);
  }
  .b-image-list__title {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    color: var(--color-ink);
  }
  .b-image-list__text {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    max-inline-size: 65ch;
  }
  .b-image-list__benefits {
    display: grid;
    gap: var(--space-5);
    margin-block-start: var(--space-6);
  }
  .b-image-list__benefits-title {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    color: var(--color-ink);
  }
  .b-image-list__check {
    border-block: 2px solid var(--color-ink);
  }
  .b-image-list__action,
  .b-image-list__list-action {
    justify-self: start;
    margin-block-start: var(--space-3);
  }
  @media (min-width: 48rem) {
    .b-image-list__list {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    }
    .b-image-list__item {
      grid-column: 1/-1;
      grid-template-columns: subgrid;
      align-items: start;
    }
    .b-image-list__list--single {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
      align-items: start;
    }
    .b-image-list__body {
      grid-column: 2;
    } /* stays in the text column when an item has no photo */
  }
}
@layer blocks {
  /* Block: accordion. Cream panel (.l-panel: edge to edge on phones, content width from 48rem). Stacked on mobile; from 64rem heading/intro/photo left (2fr)
     and the items right (3fr). The photo hangs below the panel on desktop, as drawn. Items are native <details>:
     state is styled from [open]. */
  .b-accordion {
    display: grid;
    gap: var(--space-7);
    margin-block: var(--space-9);
    padding-block: var(--space-7); /* side padding on mobile comes from .l-panel */
    background: var(--color-surface-2);
  }
  @media (min-width: 48rem) {
    .b-accordion {
      padding-inline: var(--space-7);
    }
  }
  .b-accordion__intro {
    display: grid;
    align-content: start;
    gap: var(--space-5);
  }
  .b-accordion__lead {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    max-inline-size: 26em;
  }
  .b-accordion__photo {
    margin-block-start: var(--space-5);
    max-inline-size: 75%;
  }
  .b-accordion__heading {
    color: var(--color-ink-strong);
  }
  .b-accordion__image {
    display: block;
    inline-size: 100%;
    aspect-ratio: 412/380;
    object-fit: cover;
  }
  .b-accordion__items {
    display: grid;
    align-content: start;
    gap: var(--space-4);
  }
  .b-accordion__item {
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  }
  .b-accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    min-block-size: var(--tap-target);
    padding: var(--space-5) var(--space-6);
    cursor: pointer;
    list-style: none;
  }
  .b-accordion__summary::-webkit-details-marker {
    display: none;
  }
  .b-accordion__title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    text-transform: uppercase;
    color: var(--color-ink-strong);
  }
  .b-accordion__chevron {
    font-size: var(--fs-h3);
    color: var(--color-ink-strong);
  }
  .b-accordion__item[open] .b-accordion__chevron {
    transform: rotate(180deg);
  }
  .b-accordion__body {
    padding: 0 var(--space-6) var(--space-6);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
  @media (hover: hover) {
    .b-accordion__summary:hover .b-accordion__title {
      text-decoration: underline;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .b-accordion__chevron {
      transition: transform 0.2s ease;
    }
  }
  @media (min-width: 64rem) {
    .b-accordion {
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
      gap: var(--space-8);
    }
    .b-accordion__intro {
      grid-template-rows: auto auto 1fr;
    }
    .b-accordion__photo {
      align-self: end;
      margin-block-end: calc(var(--space-9) * -1); /* hangs below the cream panel */
    }
  }
}
@layer blocks {
  /* Block: book_promo. A panel (the root is .l-panel + .u-band, css-guide §4 "Panel"): edge to edge on phones,
     content width from 48rem; it sits on the page background and spaces itself with margin-block. No background set here:
     the band preset supplies it and re-points the text tokens.
     Mobile: statement, image, text stacked. From 48rem the image and text sit side by side. */
  .b-book-promo {
    margin-block: var(--space-9);
    padding-block: var(--space-8); /* l-panel supplies the side padding on mobile */
    display: grid;
    gap: var(--space-8);
  }
  .b-book-promo__statement {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: var(--lh-statement);
    letter-spacing: var(--ls-h2);
    color: var(--color-accent); /* sentence case, not capitals: a long statement in caps is hard to read (review 1) */
    text-wrap: balance;
  }
  .b-book-promo__row {
    display: grid;
    gap: var(--space-8);
    align-items: start;
  }
  .b-book-promo__body {
    display: grid;
    justify-items: start;
    gap: var(--space-5);
  }
  .b-book-promo__heading { /* an h2 for the outline, styled as an H3 */
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: normal;
    text-transform: none;
  }
  .b-book-promo__text {
    max-inline-size: 65ch;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }
  .b-book-promo__action {
    margin-block-start: var(--space-5);
  }
  @media (min-width: 48rem) {
    .b-book-promo {
      padding-inline: var(--space-7);
    }
    .b-book-promo__row {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--space-7);
    }
  }
  @media (min-width: 64rem) {
    .b-book-promo {
      padding-inline: var(--space-9);
    }
    .b-book-promo__statement {
      font-size: var(--fs-h1);
      line-height: var(--lh-statement);
      letter-spacing: var(--ls-h1);
      max-inline-size: 90%;
      padding-inline-start: var(--space-9); /* statement is indented from the image edge, as drawn */
    }
    .b-book-promo__row {
      gap: var(--space-9);
    }
  }
  /* On a yellow band the yellow offset block would vanish. */
  .b-book-promo.u-band--yellow .c-framed-image {
    --frame-colour: var(--color-orange);
  }
}
@layer blocks {
  /* Block: speaker_promo. The root is a panel (.l-panel + .u-band, colour from the band preset): edge to edge on
     phones, content width from 48rem. Mobile: stacked, photo first. From 48rem: photo left (5fr), text right (4fr). */
  .b-speaker-promo {
    margin-block: var(--space-9);
    padding-block: var(--space-7);
  }
  .b-speaker-promo__header > * + * {
    margin-block-start: var(--space-6);
  }
  .b-speaker-promo__eyebrow {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    color: var(--color-ink);
  }
  .b-speaker-promo__heading {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    color: var(--color-ink);
  }
  .b-speaker-promo__eyebrow + .b-speaker-promo__heading {
    color: var(--color-accent);
  }
  .b-speaker-promo__grid {
    display: grid;
    gap: var(--space-7);
    align-items: center;
    margin-block-start: var(--space-7);
  }
  .b-speaker-promo__frame {
    inline-size: 100%;
  }
  .b-speaker-promo__frame .c-framed-image__img {
    aspect-ratio: 560/515;
  }
  .b-speaker-promo__body {
    display: grid;
    justify-items: start;
    gap: var(--space-5);
    min-inline-size: 0;
  }
  .b-speaker-promo__icon {
    font-size: calc(var(--fs-h2) * 2);
    color: var(--color-ink);
  }
  .b-speaker-promo__subheading {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    color: var(--color-ink);
  }
  .b-speaker-promo__text {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    color: var(--color-text);
    max-inline-size: 26em;
  }
  .b-speaker-promo__actions {
    display: grid;
    justify-items: start;
    gap: var(--space-5);
    margin-block-start: var(--space-3);
  }
  @media (min-width: 48rem) {
    .b-speaker-promo {
      padding-block: var(--space-8);
      padding-inline: var(--space-8);
    }
    .b-speaker-promo__heading {
      max-inline-size: 50%;
    }
    .b-speaker-promo__grid {
      grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
      gap: var(--space-8);
    }
  }
  @media (min-width: 64rem) {
    .b-speaker-promo {
      padding-inline: var(--space-9);
    }
  }
}
@layer blocks {
  /* Block: image_carousel. Full-bleed scroll-snap row of photos on the cream band under the page title.
     Phones: one slide fills the width. From 48rem: slides of varying width (about 480-560px at 1600). Arrows sit at the screen edges. */
  .b-image-carousel {
    margin-block: 0;
    padding-block-end: var(--space-8);
    background: var(--color-surface-2);
  }
  .b-image-carousel__stage {
    position: relative;
  }
  .b-image-carousel__list {
    --scroller-gap: var(--space-2);
  } /* scroll behaviour: components/_scroller.scss */
  .b-image-carousel__slide {
    position: relative;
    flex: 0 0 100%;
  }
  .b-image-carousel__image {
    display: block;
    inline-size: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
  }
  @media (min-width: 48rem) {
    .b-image-carousel__slide {
      flex-basis: 35%;
    }
    .b-image-carousel__slide:nth-child(3n+1) {
      flex-basis: 30%;
    }
    .b-image-carousel__image {
      aspect-ratio: 0.97;
    }
    .b-image-carousel__slide:nth-child(3n+1) .b-image-carousel__image {
      aspect-ratio: 0.83;
    }
  }
  /* Caption sits over the photo, top or bottom, centred. */
  .b-image-carousel__caption {
    position: absolute;
    inset-inline: var(--space-5);
    display: flex;
    justify-content: center;
    pointer-events: none;
  }
  .b-image-carousel__caption--top {
    inset-block-start: 20%;
  }
  .b-image-carousel__caption--bottom {
    inset-block-end: var(--space-6);
  }
  /* Round arrows: left and right screen edges, centred over the photos. Layout only; the buttons keep their component style. */
  .b-image-carousel__controls {
    position: absolute;
    inset-block-start: 50%;
    inset-inline: 0;
    translate: 0 -50%;
    justify-content: space-between;
    pointer-events: none;
  }
  .b-image-carousel__controls .c-carousel-controls__btn {
    pointer-events: auto;
  }
}
@layer blocks {
  /* Block: card_carousel. Row of cards that starts on the content's left edge and runs off the right edge (.l-bleed-end).
     Card width is worked out from the block's own width (cqi) so it matches the content width at every tier. */
  .b-card-carousel {
    --carousel-content: 90cqi; /* content width, same tiers as --page-width / --container */
    --carousel-gap: var(--space-6);
    --carousel-edge: calc((100% - min(var(--page-width), var(--container))) / 2);
    container-type: inline-size;
    margin-block: var(--space-9);
  }
  .b-card-carousel__list { /* scroll behaviour: components/_scroller.scss */
    --scroller-gap: var(--carousel-gap);
    padding-inline-end: var(--carousel-edge);
    scroll-padding-inline: var(--carousel-edge);
  }
  .b-card-carousel__item {
    display: flex;
    flex: 0 0 80cqi; /* phones: next card peeks in */
    scroll-snap-align: start;
  }
  .b-card-carousel__item > * {
    inline-size: 100%;
  }
  .b-card-carousel__controls {
    margin-block-start: var(--space-6);
  }
  @media (min-width: 48rem) {
    .b-card-carousel {
      --carousel-content: min(43.25rem, 100cqi);
    }
    .b-card-carousel__item {
      flex-basis: calc((var(--carousel-content) - var(--carousel-gap)) / 2);
    }
  }
  @media (min-width: 64rem) {
    .b-card-carousel {
      --carousel-content: min(88cqi, 87.875rem);
    }
    .b-card-carousel__item {
      flex-basis: calc((var(--carousel-content) - 3 * var(--carousel-gap)) / 4);
    } /* a quarter of the content: about 328px at 1600, four and a bit cards visible */
  }
}
@layer blocks {
  /* Block: event_list. Rounded light panel on top (figures overlap its bottom edge), then photo | event cards.
     Mobile: stacked, all cards shown. From 48rem: two columns, the card list scrolls vertically inside the photo's height. */
  .b-event-list {
    margin-block: var(--space-9);
  }
  .b-event-list__panel {
    position: relative;
    z-index: 1;
    padding-block: var(--space-8) var(--space-9);
    border-start-start-radius: var(--radius-lg);
    border-start-end-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-surface-2) 35%, var(--color-white));
    text-align: center;
  }
  .b-event-list__header > * + * {
    margin-block-start: var(--space-5);
  }
  .b-event-list__eyebrow {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    color: var(--color-ink);
  }
  .b-event-list__heading {
    max-inline-size: 16em;
    margin-inline: auto;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    color: var(--color-ink);
  }
  .b-event-list__eyebrow + .b-event-list__heading {
    color: var(--color-accent);
  }
  .b-event-list__intro {
    max-inline-size: 36rem;
    margin-inline: auto;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
  }
  .b-event-list__figures {
    position: absolute;
    inset-inline-end: 4%;
    inset-block-end: calc(var(--space-8) * -1);
    inline-size: clamp(8rem, 24%, 23rem);
    block-size: auto;
    pointer-events: none;
  }
  .b-event-list__body {
    display: grid;
    background: var(--color-surface-2);
  }
  .b-event-list__media {
    position: relative;
    margin: 0;
  }
  .b-event-list__img {
    inline-size: 100%;
    aspect-ratio: 1;
    object-fit: cover;
  }
  .b-event-list__caption {
    position: absolute;
    inset-inline-start: 16%;
    inset-block-end: 8%;
    max-inline-size: 9em;
  }
  .b-event-list__events {
    display: grid;
    align-content: start;
    gap: var(--space-6);
    min-inline-size: 0;
    inline-size: min(var(--page-width), var(--container));
    margin-inline: auto;
    padding-block: var(--space-7);
  }
  .b-event-list__list {
    display: grid;
    gap: var(--space-3);
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .b-event-list__controls {
    display: none;
  }
  .b-event-list__all {
    justify-self: center;
  }
  /* phones: first three events only; the all-events link covers the rest */
  .b-event-list--has-all .b-event-list__item:nth-child(n+4) {
    display: none;
  } /* phones: three cards when the all-events link can reach the rest */
  .b-event-list__scroller {
    min-inline-size: 0;
  }
  .b-event-list__empty {
    display: grid;
    justify-items: start;
    gap: var(--space-5);
    padding: var(--space-7);
    border: 2px solid transparent;
    background: var(--color-surface-3);
  }
  .b-event-list__empty-text {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    color: var(--color-ink);
  }
  @media (min-width: 48rem) {
    .b-event-list__body {
      grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
      gap: var(--space-1);
      background: transparent;
    }
    .b-event-list__media {
      background: var(--color-surface-2);
      aspect-ratio: 11/9;
    }
    .b-event-list__img {
      position: absolute;
      inset: 0;
      block-size: auto;
      min-block-size: 100%;
      aspect-ratio: auto;
    }
    .b-event-list__events {
      inline-size: auto;
      margin-inline: 0;
      padding: var(--space-7) var(--space-6);
      grid-template-rows: minmax(0, 1fr) auto;
      background: var(--color-surface-2);
    }
    .b-event-list__scroller {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: var(--space-5);
      min-block-size: 0;
      contain: size; /* the photo sets the row height; the list scrolls inside it */
    }
    .b-event-list__list {
      align-self: stretch;
      max-inline-size: 28rem;
      margin-inline: auto;
      overflow-y: auto;
      overscroll-behavior: contain;
      scroll-snap-type: y mandatory;
      scrollbar-width: none;
    }
    .b-event-list__list::-webkit-scrollbar {
      display: none;
    } /* own scroll rules (not c-scroller): it only scrolls from 48rem */
    .b-event-list__item {
      scroll-snap-align: start;
    }
    .b-event-list--has-all .b-event-list__item:nth-child(n+4) {
      display: list-item;
    }
    .b-event-list__controls {
      display: flex;
      padding-block-end: var(--space-7);
    }
    .b-event-list__empty {
      align-self: center;
      max-inline-size: 28rem;
      justify-self: center;
    }
  }
  @media (min-width: 48rem) and (prefers-reduced-motion: no-preference) {
    .b-event-list__list {
      scroll-behavior: smooth;
    }
  }
}
@layer blocks {
  /* Block: split_panels. Root is a panel (.l-panel) holding two bands (.u-band, colours from the presets).
     Mobile: stacked, bands edge to edge with content on the page margins. From 48rem: two equal columns, small gap. */
  .b-split-panels {
    display: grid;
    margin-block: var(--space-9);
    padding-inline: 0;
  }
  .b-split-panels__panel {
    padding-block: var(--space-7);
    padding-inline: calc((100% - var(--page-width)) / 2);
    min-inline-size: 0;
  }
  @media (min-width: 48rem) {
    .b-split-panels {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-2);
    }
    .b-split-panels__panel {
      padding-block: var(--space-8);
      padding-inline: var(--space-7);
    }
  }
  @media (min-width: 64rem) {
    .b-split-panels__panel {
      padding-inline: var(--space-8);
    }
  }
}
@layer blocks {
  /* Block: form. Fields of a Wagtail form page on an editable band (contained). One column on phones;
     the first two short fields (name / email) sit side by side from 48rem. Template: templates/blocks/form.html.
     The shared input is pale on every band, so here it gets a dark border (≥3:1 on each band) and a fixed dark
     text colour (the fill is fixed too; on the teal band --color-ink-strong is white). */
  .b-form {
    margin-block: 0;
    padding-block: var(--space-8);
  }
  .b-form__heading {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    text-transform: uppercase;
    color: var(--color-ink);
  }
  .b-form__intro {
    margin-block-start: var(--space-5);
    max-inline-size: 65ch;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }
  .b-form__form {
    display: grid;
    gap: var(--space-6);
    margin-block-start: var(--space-7);
  }
  .b-form__heading:only-child,
  .b-form__inner > .b-form__form:first-child {
    margin-block-start: 0;
  }
  .b-form__required-note {
    margin: 0;
    font-size: var(--fs-small);
  }
  .b-form__fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
  .b-form__field {
    grid-column: 1/-1;
    align-content: start;
  } /* a field with an error message must not stretch its row-mate */
  @media (min-width: 48rem) {
    .b-form__fields {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .b-form__field--half {
      grid-column: auto;
    }
  }
  /* Inputs: visible boundary on any band, readable text on the pale fill */
  .b-form .c-form-field__input {
    border-color: var(--color-ink-strong);
    color: var(--color-rhino);
  }
  .b-form .c-form-field__input::placeholder {
    color: var(--color-rhino);
  }
  /* Error state: thicker border and a bar beside the message, so it never relies on colour alone */
  .b-form .c-form-field:has([aria-invalid=true]) .c-form-field__input,
  .b-form .c-form-field__input:user-invalid {
    border-color: var(--color-ink-strong);
    border-width: var(--space-1);
    border-inline-start-width: var(--space-3);
  } /* heavy bar on the start edge: shows on every band, not by colour */
  .b-form .c-form-field__error {
    padding-inline-start: var(--space-3);
    border-inline-start: var(--space-1) solid currentColor;
  }
  /* Error summary (GOV.UK pattern): only in the page when there are errors; form.js moves focus to it */
  .b-form__summary {
    padding: var(--space-5);
    border: var(--space-1) solid var(--color-ink-strong);
    border-radius: var(--radius);
    color: var(--color-ink-strong);
  }
  .b-form__summary-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    text-transform: uppercase;
  }
  .b-form__summary-list {
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-2);
    font-size: var(--fs-body);
  }
  .b-form__summary a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
  }
  @media (hover: hover) {
    .b-form__summary a:hover {
      text-decoration-thickness: 2px;
    }
  }
  /* Radio buttons and checkbox groups: fieldset + legend, options laid out like the single checkbox in form_field */
  .b-form__group {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
  }
  .b-form__legend {
    padding: 0;
    margin-block-end: var(--space-2);
    font-size: var(--fs-small);
    font-weight: 700;
    color: var(--color-ink-strong);
  }
  .b-form__option {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: var(--space-3);
    min-block-size: var(--tap-target);
  }
  .b-form__option-input {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    margin: 0;
    accent-color: var(--color-ink);
  }
  .b-form__actions {
    display: flex;
  }
  .b-form__privacy {
    margin: 0;
    max-inline-size: 65ch;
    font-size: var(--fs-small);
  }
  .b-form__privacy a {
    color: inherit;
    text-underline-offset: 0.15em;
  }
}
@layer blocks {
  /* Block: latest_articles (not designed; built from existing styles). Coloured band (u-band, white by default): padding inside,
     no outer margin. Heading with a plain "All articles" text link, then a grid of article cards: 1 column, 2 from 48rem, 3 from 64rem.
     The whole card is clickable through the stretched title link. */
  .b-latest-articles {
    margin-block: 0;
    padding-block: var(--space-8);
  }
  .b-latest-articles__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
    margin-block-end: var(--space-7);
  }
  .b-latest-articles__heading {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    color: var(--color-ink);
  }
  .b-latest-articles__all {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-block-size: var(--tap-target);
    font-size: var(--fs-button);
    font-weight: 700;
    color: var(--color-ink);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  .b-latest-articles__all-icon {
    flex: none;
  }
  .b-latest-articles__list {
    display: grid;
    gap: var(--space-7) var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  @media (hover: hover) {
    .b-latest-articles__all:hover {
      text-decoration-thickness: 2px;
    }
  }
  @media (min-width: 48rem) {
    .b-latest-articles__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 64rem) {
    .b-latest-articles__list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}
@layer utilities {
  /* =========================================================================
     Band colours — the background presets an editor can choose for a block.
     Wagtail: a ChoiceBlock named `background` on the block, whose choice values are exactly
     these suffixes (docs/wagtail-folder-structure.md, "Shared choice sets → background").
     Template:  <section class="b-speaker-promo u-band u-band--{{ value.background|default:'yellow' }}">

     A preset is a small local theme, not just a fill: it sets the background and re-points the
     semantic colour tokens inside the band, so headings, text, links, buttons and the focus ring
     stay readable on whatever the editor picks. Blocks style themselves with the usual tokens
     (--color-ink, --color-text, …) and pick up the band automatically.

     Adding a preset: add a rule here, add it to the choice set in the docs, and check contrast
     (body text ≥ 4.5:1, focus ring ≥ 3:1 against --band-bg).
     Layer: utilities (loaded after blocks, so a chosen band wins over a block's default).
     ========================================================================= */
  .u-band {
    background: var(--band-bg);
    color: var(--color-text);
  }
  /* Light bands: dark text (contrast measured: navy 6.0–9.9:1, rhino 8.6–14.3:1) */
  .u-band--white {
    --band-bg: var(--color-white);
  }
  .u-band--cream {
    --band-bg: var(--color-cream);
  }
  .u-band--yellow {
    --band-bg: var(--color-yellow-deep);
    --color-focus: var(--color-ink-strong);
  } /* speaker panel; orange ring would be 1.8:1 */
  .u-band--aqua {
    --band-bg: var(--color-aqua);
    --color-focus: var(--color-ink-strong);
  } /* book promo panel */
  /* Dark bands: light text (white on teal 7.5:1) */
  .u-band--teal {
    --band-bg: var(--color-teal);
    --color-ink: var(--color-on-dark);
    --color-ink-strong: var(--color-on-dark);
    --color-text: var(--color-on-dark);
    --color-accent: var(--color-on-dark);
    --color-ink-contrast: var(--color-rhino); /* label colour on buttons whose background is --color-ink */
    --color-focus: var(--color-yellow);
  }
}
@layer utilities {
  /* Utility: u-duotone — the teal duotone look of the book page photos (book_hero, author_strip), made from an
     ordinary colour photo with CSS filters, so editors upload normal photos. On an <img> or on a wrapper of one. */
  :is(img.u-duotone, .u-duotone img) {
    filter: grayscale(1) sepia(0.55) hue-rotate(140deg) saturate(1.6) contrast(1.05) brightness(0.82);
  }
}
@layer tokens {
  /* =========================================================================
     The book look — applied under [data-section="book"]: on <body> for the whole Big Jump site (bigjump/base.html),
     on <main> for Mastering Management's /the-book/ page (MM header and footer keep the main look). Values from the 04_Book artboard.
     Only semantic tokens, fonts and type sizes change, so shared blocks restyle themselves.

     Type sizes follow the same tiers as the main site (css-guide §4 "Type"):
     - Tablet (48–64rem): fixed = the 1600px design scaled to 1024px, never below a readable minimum.
     - Small desktop (64–100rem): design px / 1600 × 100vw, from the tablet value up.
     - Large desktop (100rem+): fixed at the design value (the clamp maximum, reached at 1600px).
     - Mobile: there is no mobile book design yet. Headings use the same proportions as the
       main site's mobile headings; the giant title scales down from its tablet size; text sizes
       use the main site's mobile values. Revisit when a mobile book design exists.
     Because these are set on [data-section="book"], not :root, each tier is repeated here.
     ========================================================================= */
  [data-section=book] {
    --color-ink: var(--color-teal-darkest); /* book headings */
    --color-text: var(--color-teal-darkest); /* book body text */
    --color-surface-2: var(--color-yellow); /* highlight blocks behind headings */
    --color-accent: var(--color-teal-deep); /* buttons, duotone panels */
    --color-accent-2: var(--color-yellow); /* giant title, offset blocks */
    --color-highlight: var(--color-orange);
    --color-button-text: var(--color-orange-text); /* orange label on dark buttons */
    --font-display: "Oswald", "Arial Narrow", sans-serif;
    --font-body: "Open Sans", system-ui, sans-serif;
    /* Mobile (base) */
    --fs-book-title: min(16.6667vw, 8rem); /* "THE BIG JUMP": 65 @390, max 128 */
    --fs-book-h2: min(8.5714vw, 4rem); /* "About the author": 36 @420 (as main H1) */
    --fs-h2: min(5.7143vw, 2.64rem); /* section headings: 24 @420 (as main H2) */
    --fs-book-lead: clamp(1rem, 4.2857vw, 1.125rem); /* eyebrow, card lead: 18 @420, min 16 */
    --fs-body: clamp(.875rem, 3.3333vw, 1rem); /* 14 @420 → 16 */
    --fs-button: var(--fs-body);
    --fs-small: .875rem; /* 14 */
    --lh-h2: .98;
    --ls-h2: -.02em;
  }
  /* Tablet (48–64rem): fixed */
  @media (min-width: 48rem) {
    [data-section=book] {
      --fs-book-title: 8rem; /* 128 */
      --fs-book-h2: 4rem; /* 64 */
      --fs-h2: 2.64rem; /* 42 */
      --fs-book-lead: 1.125rem; /* 18 */
      --fs-body: 1rem; /* 16 */
      --fs-button: 1rem; /* 16 */
      --fs-small: .875rem; /* 14 */
    }
  }
  /* Small desktop (64–100rem): scales to the design; fixed from 100rem */
  @media (min-width: 64rem) {
    [data-section=book] {
      --fs-book-title: clamp(8rem, 12.5vw, 12.5rem); /* 128 → 200 */
      --fs-book-h2: clamp(4rem, 6.25vw, 6.25rem); /* 64 → 100 */
      --fs-h2: clamp(2.64rem, 4.125vw, 4.125rem); /* 42 → 66 */
      --fs-book-lead: clamp(1.125rem, 1.625vw, 1.625rem); /* 18 → 26 */
      --fs-body: clamp(1rem, 1.25vw, 1.25rem); /* 16 → 20 */
      --fs-button: clamp(1rem, 1.4375vw, 1.4375rem); /* 16 → 23 */
      --fs-small: clamp(.875rem, 1.125vw, 1.125rem); /* 14 → 18 */
    }
  }
}
@layer blocks {
  /* Block: two_column_text (book theme). One column on mobile; two from 48rem with the gap at --space-6.
     The yellow block behind each heading is a decorative ::before on the heading: no text inside, behind the
     text (isolation on the column + z-index -1), sized in em so it follows the heading (about 283px at 1600). */
  .b-two-column-text {
    margin-block: var(--space-9);
  }
  .b-two-column-text__grid {
    display: grid;
    gap: var(--space-8);
  }
  @media (min-width: 48rem) {
    .b-two-column-text__grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--space-6);
    }
  }
  .b-two-column-text__column {
    isolation: isolate; /* the square (z-index -1) stays behind everything in the column */
    display: grid;
    align-content: start;
    gap: var(--space-5);
  }
  .b-two-column-text__heading {
    position: relative;
    max-inline-size: 7em; /* wraps over three lines as drawn */
  }
  .b-two-column-text__heading::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block-start: -0.6em;
    inset-inline-start: 0.85em;
    inline-size: 4.3em;
    aspect-ratio: 1;
    background: var(--color-accent-2);
  }
  .b-two-column-text__text {
    max-inline-size: 26em;
  }
  .b-two-column-text__text > p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
  .b-two-column-text__action {
    justify-self: start;
    margin-block-start: var(--space-6);
  }
}
@layer blocks {
  /* Block: book_hero (book section). Mobile: text, then the photo with the book over it. From 64rem the photo is the right
     half of the block, full height, running to the screen edge; the title runs across the left half onto the photo and the
     book overlaps both. Page background is white. The yellow title (--color-accent-2) on white is the design's choice and
     has low contrast where it sits on the white half. */
  .b-book-hero {
    position: relative;
    display: grid;
    margin-block-end: var(--space-9);
  }
  .b-book-hero__content {
    position: relative;
    z-index: 2; /* above the photo, so the title reads across it */
    display: grid;
    justify-items: start;
    gap: var(--space-6);
    padding-block: var(--space-8);
  }
  .b-book-hero__eyebrow {
    font-size: var(--fs-book-lead);
    font-weight: 700;
    line-height: var(--lh-lead);
    color: var(--color-ink);
  }
  .b-book-hero__title {
    font-family: var(--font-display);
    font-size: var(--fs-book-title);
    font-weight: 700;
    line-height: var(--lh-h1);
    letter-spacing: normal;
    text-transform: uppercase;
    color: var(--color-accent-2);
    text-wrap: balance;
  }
  .b-book-hero__brand {
    display: grid;
    gap: var(--space-5);
    justify-items: start;
  }
  .b-book-hero__brand-label {
    font-size: var(--fs-book-lead);
    font-weight: 700;
    line-height: var(--lh-lead);
    color: var(--color-ink);
  }
  .b-book-hero__logo {
    max-inline-size: 8.125rem;
  } /* 130px cap, as drawn */
  .b-book-hero__action {
    margin-block-start: var(--space-5);
  }
  .b-book-hero__media {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
  }
  .b-book-hero__photo {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    min-block-size: 100%;
    object-fit: cover;
  }
  .b-book-hero__book {
    position: absolute;
    inset-inline-start: 5%;
    inset-block-end: 0;
    inline-size: 90%;
  }
  @media (min-width: 64rem) {
    .b-book-hero {
      margin-block-end: 0;
    }
    .b-book-hero__content {
      padding-block: var(--space-9);
    }
    .b-book-hero__title {
      text-wrap: nowrap;
    } /* one line across the white half and onto the photo */
    .b-book-hero__media {
      position: absolute;
      inset-block: 0;
      inset-inline-end: 0;
      inline-size: 50%;
      aspect-ratio: auto;
      overflow: visible; /* the book may overlap the title side */
    }
    .b-book-hero__photo {
      object-position: center;
    }
    .b-book-hero__book {
      inset-inline-start: 6%;
      inset-block: auto;
      inset-block-start: 17%;
      inline-size: 94%;
    }
  }
}
@layer blocks {
  /* Block: reviews. Row of reviews (square photo, stars, title, text, reviewer) that starts on the content's left edge and
     runs off the right edge (.l-bleed-end). Item widths come from the block's own width (cqi), as in card_carousel:
     phones show one review with the next peeking in, tablet two, desktop three and a bit. */
  .b-reviews {
    --reviews-content: 90cqi; /* content width, same tiers as --page-width / --container */
    --reviews-gap: var(--space-6);
    --reviews-edge: calc((100% - min(var(--page-width), var(--container))) / 2);
    container-type: inline-size;
    margin-block: var(--space-9);
  }
  .b-reviews__heading {
    margin-block-end: var(--space-7);
    font-size: var(--fs-h2);
  }
  .b-reviews__list { /* scroll behaviour: components/_scroller.scss */
    --scroller-gap: var(--reviews-gap);
    padding-inline-end: var(--reviews-edge);
    scroll-padding-inline: var(--reviews-edge);
  }
  .b-reviews__item {
    display: flex;
    flex: 0 0 85cqi;
    scroll-snap-align: start;
  }
  .b-reviews__review {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
    gap: var(--space-5);
    inline-size: 100%;
  }
  .b-reviews__avatar {
    inline-size: 100%;
    aspect-ratio: 1;
    object-fit: cover;
  }
  .b-reviews__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .b-reviews__title {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    color: var(--color-ink);
  }
  .b-reviews__quote {
    margin: 0;
  }
  .b-reviews__cite {
    display: flex;
    flex-direction: column;
    font-size: var(--fs-small);
  }
  .b-reviews__name {
    font-weight: 700;
  }
  .b-reviews__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    margin-block-start: var(--space-6);
  }
  @media (min-width: 48rem) {
    .b-reviews {
      --reviews-content: min(43.25rem, 100cqi);
    }
    .b-reviews__item {
      flex-basis: calc((var(--reviews-content) - var(--reviews-gap)) / 2);
    }
  }
  @media (min-width: 64rem) {
    .b-reviews {
      --reviews-content: min(88cqi, 87.875rem);
    }
    .b-reviews__item {
      flex-basis: calc((var(--reviews-content) - 2 * var(--reviews-gap)) / 3);
    } /* a third of the content: about 437px at 1600, a fourth peeking in */
  }
}
@layer blocks {
  /* Block: author_strip (book theme). Stacked on phones and tablets: the media wrapper holds the heading and the
     framed photo in one grid cell, so the heading overlaps the photo's top-right and runs onto the white. From 64rem
     the media sits beside the text. The yellow heading on white is as drawn (low contrast off the photo). */
  .b-author-strip {
    margin-block: var(--space-9);
  }
  .b-author-strip__grid {
    display: grid;
    gap: var(--space-7);
    align-items: center;
  }
  .b-author-strip__media {
    display: grid;
    min-inline-size: 0;
    max-inline-size: 36rem;
  }
  .b-author-strip__media > * {
    grid-area: 1/1;
  }
  .b-author-strip__heading {
    z-index: 1;
    align-self: start;
    justify-self: start;
    inline-size: max-content;
    max-inline-size: 4.6em; /* breaks "About the / author" on two lines */
    margin-inline-start: 50%;
    margin-block-start: var(--space-8);
    color: var(--color-accent-2);
    font: 700 var(--fs-book-h2)/var(--lh-h2) var(--font-display);
    letter-spacing: var(--ls-h2);
    text-transform: uppercase;
  }
  .b-author-strip__frame .c-framed-image__img {
    aspect-ratio: 566/728;
  }
  .b-author-strip__body {
    display: grid;
    gap: var(--space-6);
    justify-items: start;
    min-inline-size: 0;
  }
  .b-author-strip__text {
    max-inline-size: 20em;
    font-size: var(--fs-book-lead);
    font-weight: 700;
    line-height: var(--lh-body);
  }
  .b-author-strip__text > p + p {
    margin-block-start: var(--space-5);
  }
  @media (min-width: 64rem) {
    .b-author-strip__grid {
      grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
      gap: 0;
    }
    .b-author-strip__media {
      max-inline-size: none;
    }
    .b-author-strip__body {
      padding-inline-start: var(--space-8);
    }
  }
}
@layer blocks {
  /* Block: problem_solution (book theme; not designed, built from book styles). A coloured band (u-band, white by default).
     Phones: each pair is a stacked card: problem, a down arrow, then the solution on a yellow block with teal-darkest text.
     64rem and up: two columns; the visible column headings sit over all rows (aria-hidden copies; every item keeps its own
     labels, visually hidden there) and the arrow points sideways between them. */
  .b-problem-solution {
    padding-block: var(--space-9);
    margin-block: 0;
  }
  .b-problem-solution__inner {
    display: grid;
    gap: var(--space-7);
    justify-items: start;
  }
  .b-problem-solution__heading {
    font-size: var(--fs-h2);
  }
  .b-problem-solution__columns {
    display: none;
  }
  .b-problem-solution__list {
    list-style: none;
    margin: 0;
    padding: 0;
    inline-size: 100%;
    display: grid;
    gap: var(--space-6);
  }
  .b-problem-solution__pair {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
    padding: var(--space-6);
    border: 2px solid currentColor;
    border-radius: var(--radius);
  }
  .b-problem-solution__label {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .b-problem-solution__problem,
  .b-problem-solution__solution {
    margin: 0;
    min-inline-size: 0;
  }
  .b-problem-solution__problem .b-problem-solution__text {
    font-size: var(--fs-book-lead);
    line-height: var(--lh-body);
  }
  .b-problem-solution__solution {
    inline-size: 100%;
    padding: var(--space-5);
    background: var(--color-yellow);
    color: var(--color-teal-darkest); /* the only text on yellow: contrast fixed regardless of band */
    border: 2px solid transparent; /* keeps the block visible in forced-colours mode */
  }
  .b-problem-solution__solution .b-problem-solution__text {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: var(--lh-h3);
    text-transform: uppercase;
  }
  .b-problem-solution__arrow {
    font-size: var(--fs-h3);
    rotate: 90deg; /* points down on phones */
  }
  @media (min-width: 64rem) {
    .b-problem-solution__inner {
      gap: var(--space-6);
    }
    .b-problem-solution__columns,
    .b-problem-solution__pair {
      display: grid;
      grid-template-columns: minmax(0, 1fr) var(--fs-h3) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--space-6);
    }
    .b-problem-solution__columns {
      inline-size: 100%;
      margin: 0;
    }
    .b-problem-solution__column-label {
      margin: 0;
      grid-column: 1;
      font-family: var(--font-display);
      font-size: var(--fs-h3);
      font-weight: 700;
      line-height: var(--lh-h3);
      text-transform: uppercase;
    }
    .b-problem-solution__column-label--solution {
      grid-column: 3;
      padding-inline: var(--space-6);
    }
    .b-problem-solution__list {
      gap: var(--space-5);
    }
    .b-problem-solution__pair {
      padding: 0;
      border: 0;
      border-radius: 0;
      justify-items: stretch;
    }
    .b-problem-solution__arrow {
      rotate: 0deg;
    }
    /* Same clipping as .u-visually-hidden, copied because it must apply only from 64rem (labels show on phones). */
    .b-problem-solution__label {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .b-problem-solution__solution {
      padding: var(--space-6);
    }
  }
}
@layer blocks {
  /* Block: buy_options (book section; not designed, built from the book styles). A band (u-band, white by default) with
     padding-block inside. Head: book image beside heading and intro from 48rem. Format cards: 1 column on phones, 2 from
     48rem, 4 from 64rem. Cards are outlined (no fill), so they work on every band colour.
     One format only (the book is only in paperback for now): from 48rem the card sits under the intro, beside the book. */
  .b-buy-options {
    padding-block: var(--space-9);
    scroll-margin-block-start: var(--space-8); /* clears the sticky book sub-nav when #buy is followed */
  }
  .b-buy-options__inner {
    display: grid;
    gap: var(--space-8);
  }
  .b-buy-options__head {
    display: grid;
    gap: var(--space-7);
    align-items: center;
  }
  .b-buy-options__image {
    inline-size: 100%;
    max-inline-size: 22rem;
    justify-self: center;
  }
  .b-buy-options__intro {
    display: grid;
    gap: var(--space-5);
    justify-items: start;
  }
  .b-buy-options__heading {
    text-wrap: balance;
  }
  .b-buy-options__lead {
    max-inline-size: 65ch;
    font-size: var(--fs-book-lead);
    line-height: var(--lh-lead);
  }
  .b-buy-options__formats {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
  .b-buy-options__format {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    border: 2px solid var(--color-ink); /* also the outline in forced-colours mode */
  }
  .b-buy-options__format-head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  .b-buy-options__icon {
    font-size: 2em;
    color: var(--color-ink);
  }
  .b-buy-options__format-name {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    text-transform: uppercase;
    color: var(--color-ink);
  }
  .b-buy-options__price {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: var(--lh-h3);
    color: var(--color-ink);
  }
  .b-buy-options__note {
    font-size: var(--fs-small);
    line-height: var(--lh-body);
  }
  .b-buy-options__retailers {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-4);
    margin-block-start: auto; /* buttons line up at the bottom of equal-height cards */
    padding-block-start: var(--space-4);
  }
  .b-buy-options__button {
    inline-size: 100%;
  }
  .b-buy-options__guarantee {
    max-inline-size: 65ch;
    padding-inline-start: var(--space-5);
    border-inline-start: var(--space-1) solid var(--color-accent-2);
    font-size: var(--fs-book-lead);
    line-height: var(--lh-lead);
  }
  .b-buy-options.u-band--yellow .b-buy-options__guarantee {
    border-inline-start-color: var(--color-ink);
  } /* yellow rule would vanish */
  @media (min-width: 48rem) {
    .b-buy-options__head--image {
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
      gap: var(--space-8);
    }
    .b-buy-options__formats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 64rem) {
    .b-buy-options__formats {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .b-buy-options__formats:has(> :nth-child(4)) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    } /* 4 formats in one row; 1-3 share the width */
    .b-buy-options__formats:has(> :nth-child(2):last-child) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  /* One format: no choice to make, so no grid of cards. The head's two parts join the block's own grid: book on the left,
     intro, card and guarantee stacked on the right. */
  @media (min-width: 48rem) {
    .b-buy-options__inner:has(> .b-buy-options__formats > :only-child):has(.b-buy-options__head--image) {
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
      column-gap: var(--space-8);
      row-gap: var(--space-7);
      align-items: start;
    }
    .b-buy-options__inner:has(> .b-buy-options__formats > :only-child) .b-buy-options__head--image {
      display: contents;
    }
    .b-buy-options__inner:has(> .b-buy-options__formats > :only-child) .b-buy-options__image {
      grid-column: 1;
      grid-row: 1/span 3;
      align-self: center;
    }
    .b-buy-options__inner:has(> .b-buy-options__formats > :only-child) > :not(.b-buy-options__head) {
      grid-column: 2;
    }
    .b-buy-options__formats:has(> :only-child) {
      grid-template-columns: minmax(0, 1fr);
      max-inline-size: 28rem;
    }
  }
}
@layer includes {
  /* Include: Big Jump logo (templates/bigjump/includes/logo.html). PLACEHOLDER until the designer supplies a vector:
     the cover's title lockup — "THE" on its side beside "BIG", "JUMP" below — in the book display font, darkest teal
     on a yellow badge, as on the cover. Sized in em, so the header sets it with font-size.
     Contrast: darkest teal on yellow 11:1; the yellow badge stands out on white and on the duotone photo. */
  .c-bj-logo {
    display: inline-grid;
    grid-template-columns: auto auto;
    grid-template-areas: "the big" "jump jump";
    align-items: end;
    padding: 0.45em 0.55em 0.35em;
    background: var(--color-yellow);
    color: var(--color-teal-darkest);
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 0.82;
    text-transform: uppercase;
    text-decoration: none;
    --color-focus: var(--color-ink);
  }
  .c-bj-logo__the {
    grid-area: the;
    writing-mode: vertical-rl;
    rotate: 180deg; /* reads bottom to top, as on the cover */
    margin-inline-end: 0.06em;
    font-size: 0.62em;
    letter-spacing: 0.04em;
  }
  .c-bj-logo__big {
    grid-area: big;
    font-size: 2.1em;
    letter-spacing: -0.01em;
  }
  .c-bj-logo__jump {
    grid-area: jump;
    font-size: 2.35em;
    letter-spacing: -0.01em;
  }
}
@layer includes {
  /* Include: Big Jump header (templates/bigjump/includes/header.html) — the same on every Big Jump page.
     Text links on the left (The Big Jump · What's inside · Look inside · Companion · Buy), the Big Jump logo on the right.
     Phones/tablet: Menu button left (popover panel), logo right. From 64rem: the links replace the Menu button.
     --overlay (Overview page): from 64rem the header sits on top of the book_hero and the logo, on the photo, is white text
     without the yellow badge. Below 64rem (header on white) and on every other page it keeps the badge. */
  .c-bj-header {
    background: var(--color-surface);
  }
  .c-bj-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4) var(--space-6);
    padding-block: var(--space-3);
  }
  .c-bj-header__logo {
    margin-inline-start: auto;
    font-size: var(--fs-small);
  }
  .c-bj-header__nav {
    display: none;
  }
  .c-bj-header__menu-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    min-inline-size: var(--tap-target);
    min-block-size: var(--tap-target);
    padding: var(--space-1);
    border: 0;
    background: none;
    color: var(--color-ink);
    font-size: var(--fs-xsmall);
    cursor: pointer;
  }
  .c-bj-header__menu-btn .c-icon {
    font-size: 1.75rem;
  }
  .c-bj-header__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-5);
  }
  .c-bj-header__link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-target);
    font-size: var(--fs-small);
    color: var(--color-ink);
    text-decoration: none;
    text-underline-offset: 0.45em;
  }
  .c-bj-header__link:is([aria-current=page], [aria-current=true]) {
    text-decoration: underline 3px var(--color-accent-2);
  }
  @media (hover: hover) {
    .c-bj-header__link:hover:not([aria-current]) {
      text-decoration: underline 2px;
    }
  }
  @media (min-width: 64rem) {
    .c-bj-header__nav {
      display: block;
    }
    .c-bj-header__menu-btn {
      display: none;
    }
    .c-bj-header__inner {
      padding-block: var(--space-6) var(--space-4);
    }
    .c-bj-header__logo {
      font-size: var(--fs-body);
    }
    /* Overview: over the hero (left half white, right half the photo, where the logo badge sits). */
    .c-bj-header--overlay {
      position: absolute;
      inset: 0 0 auto;
      z-index: 3;
      background: none;
    }
    /* On the photo the logo is white text without the yellow badge (Dev's call); every other page keeps the badge. */
    .c-bj-header--overlay .c-bj-header__logo {
      background: none;
      color: var(--color-on-dark);
      --color-focus: var(--color-yellow);
    } /* above .b-book-hero__content (z-index 2), or the hero would cover the links */
  }
  /* Mobile menu panel (popover): darkest teal, from the right edge, as on the main site. */
  .c-bj-nav-mobile {
    position: fixed;
    inset: 0 0 0 auto;
    margin: 0;
    inline-size: 89%;
    max-inline-size: 26rem;
    block-size: auto;
    max-block-size: none;
    padding: var(--space-5) var(--space-7) var(--space-8);
    border: 0;
    background: var(--color-ink);
    color: var(--color-on-dark);
    overflow-y: auto;
    --color-focus: var(--color-yellow);
  }
  .c-bj-nav-mobile::backdrop {
    background: transparent;
  }
  .c-bj-nav-mobile__top {
    display: flex;
    justify-content: flex-end;
  }
  .c-bj-nav-mobile__close {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    min-inline-size: var(--tap-target);
    min-block-size: var(--tap-target);
    padding: var(--space-1);
    border: 0;
    background: none;
    color: inherit;
    font-size: var(--fs-xsmall);
    cursor: pointer;
  }
  .c-bj-nav-mobile__close .c-icon {
    font-size: 2.25rem;
  }
  .c-bj-nav-mobile__list {
    margin-block: var(--space-5) var(--space-7);
  }
  .c-bj-nav-mobile__link {
    display: flex;
    align-items: center;
    min-block-size: var(--tap-target);
    color: inherit;
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    text-underline-offset: 0.3em;
  }
  .c-bj-nav-mobile__link:is([aria-current=page], [aria-current=true]) {
    text-decoration: underline 3px var(--color-yellow);
  }
  @media (prefers-reduced-motion: no-preference) {
    .c-bj-nav-mobile {
      translate: 100% 0;
      transition: translate 0.25s ease-out, overlay 0.25s allow-discrete, display 0.25s allow-discrete;
    }
    .c-bj-nav-mobile:popover-open {
      translate: 0 0;
    }
    @starting-style {
      .c-bj-nav-mobile:popover-open {
        translate: 100% 0;
      }
    }
  }
  @media (min-width: 64rem) {
    .c-bj-nav-mobile:popover-open {
      display: none;
    }
  }
}
@layer includes {
  /* Include: Big Jump footer (templates/bigjump/includes/footer.html). Not designed: the book look on darkest teal —
     yellow wordmark, Oswald headings, white links; "Brought to you by" with the Mastering Management logo on a cream tile. */
  .c-bj-footer {
    padding-block: var(--space-8) var(--space-6);
    background: var(--color-teal-darkest);
    color: var(--color-on-dark);
    font-size: var(--fs-small);
    line-height: 2;
    --color-focus: var(--color-yellow);
  }
  .c-bj-footer a:not(.c-back-to-top, .c-bj-footer__logo) {
    color: inherit;
    text-decoration: none;
  }
  .c-bj-footer__inner {
    display: grid;
    gap: var(--space-7);
  }
  .c-bj-footer__wordmark {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
  }
  .c-bj-footer a.c-bj-footer__wordmark {
    color: var(--color-yellow);
  } /* yellow on darkest teal: 11:1 */
  .c-bj-footer__tagline {
    margin-block-start: var(--space-3);
    line-height: var(--lh-body);
  }
  .c-bj-footer__heading {
    margin-block-end: var(--space-3);
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    text-transform: uppercase;
    color: inherit;
  }
  .c-bj-footer__by-label {
    margin-block-end: var(--space-3);
  }
  .c-bj-footer__logo {
    display: grid;
    place-items: center;
    inline-size: min(100%, 8.25rem);
    aspect-ratio: 1;
    padding: 8%;
    background: var(--color-cream);
  }
  .c-bj-footer__bottom {
    display: grid;
    justify-items: center;
    gap: var(--space-5);
    margin-block-start: var(--space-8);
    font-size: var(--fs-xsmall);
    text-align: center;
  }
  .c-bj-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .c-bj-footer__legal li:not(:last-child)::after {
    content: "";
    display: inline-block;
    block-size: 0.9em;
    margin-inline: 0.6em;
    border-inline-end: 1px solid currentColor;
    vertical-align: -0.1em;
  }
  @media (hover: hover) {
    .c-bj-footer a:not(.c-back-to-top, .c-bj-footer__logo):hover {
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
  }
  @media (min-width: 48rem) {
    .c-bj-footer__inner {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .c-bj-footer__bottom {
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      justify-items: start;
      text-align: start;
    }
    .c-bj-footer__legal {
      justify-content: flex-start;
    }
  }
  @media (min-width: 64rem) {
    .c-bj-footer__inner {
      grid-template-columns: 2fr 1fr 1fr 1fr;
      column-gap: var(--space-6);
    }
  }
}
@layer pages {
  /* Page: BigJumpHomePage (Overview). From 64rem the header sits over the book_hero (c-bj-header--overlay),
     so the hero's text starts below the header row. */
  @media (min-width: 64rem) {
    .p-bj-home .b-book-hero__content {
      padding-block-start: calc(var(--space-9) + var(--tap-target) + var(--space-6));
    }
  }
}
@layer pages {
  /* Shared by the book pages (sample, chapter index, chapter): the small uppercase label above a heading. */
  .p-book-label {
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
}
@layer pages {
  /* Page: SamplePage (/look-inside/ on the Big Jump site), book theme. A comfortable reading column for the free extract, then a locked-chapter panel.
     Measure: about 65 characters (36em) in the book body font. Not designed; built from book tokens. */
  .p-book-sample__intro {
    margin-block: var(--space-8);
  }
  .p-book-sample__extract {
    margin-block: var(--space-9);
  }
  .p-book-sample__extract-head {
    max-inline-size: 36em;
    margin-inline: auto;
    padding-block-end: var(--space-6);
    border-block-end: 3px solid var(--color-surface-2);
    margin-block-end: var(--space-7);
  }
  .p-book-sample__extract-title {
    font-size: var(--fs-h2);
    margin-block-start: var(--space-2);
  }
  .p-book-sample__text {
    max-inline-size: 36em;
    margin-inline: auto;
    font-family: var(--font-body);
  }
  .p-book-sample__text :is(p, ol) {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
  }
  .p-book-sample__text > :is(h2, h3) {
    font-family: var(--font-display);
  }
  .p-book-sample__text > h2 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    margin-block-start: var(--space-9);
  }
  .p-book-sample__text > h3 {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
  }
  .p-book-sample__text ul > li {
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
  }
  .p-book-sample__gate {
    padding-block: var(--space-9);
    margin-block-start: var(--space-9);
  }
  .p-book-sample__gate-inner {
    display: grid;
    justify-items: start;
    gap: var(--space-5);
  }
  .p-book-sample__gate-title {
    font-size: var(--fs-h2);
  }
  .p-book-sample__gate-text {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }
  .p-book-sample__gate-alt a {
    color: var(--color-on-dark);
  }
}
@layer pages {
  /* Page: ChapterIndexPage (/whats-inside/ on the Big Jump site), book theme. One section per phase; chapters as cards (number, title, challenge).
     One column on phones, two from 48rem, three from 64rem. Not designed; built from book tokens. */
  .p-book-chapters__intro {
    margin-block: var(--space-8);
  }
  .p-book-chapters__phase {
    margin-block: var(--space-9);
  }
  .p-book-chapters__phase-head {
    display: grid;
    gap: var(--space-2);
    margin-block-end: var(--space-7);
    max-inline-size: 40em;
  }
  .p-book-chapters__phase-title {
    font-size: var(--fs-h2);
  }
  .p-book-chapters__phase-summary {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }
  .p-book-chapters__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-6);
  }
  @media (min-width: 48rem) {
    .p-book-chapters__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 64rem) {
    .p-book-chapters__list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .p-book-chapters__item {
    position: relative; /* the title link stretches over the card */
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-6);
    border: 2px solid var(--color-ink);
    border-radius: var(--radius);
    background: var(--color-white);
  }
  .p-book-chapters__number {
    display: grid;
    place-items: center;
    inline-size: 2.2em;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-surface-2);
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 700;
    line-height: 1;
  }
  .p-book-chapters__title {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
  }
  .p-book-chapters__link {
    color: var(--color-ink);
    text-decoration: none;
  }
  .p-book-chapters__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
  }
  .p-book-chapters__link:focus-visible {
    outline: none;
  }
  .p-book-chapters__link:focus-visible::after {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
  }
  .p-book-chapters__challenge {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
  @media (hover: hover) {
    .p-book-chapters__item:hover {
      background: var(--color-surface-2);
    }
    .p-book-chapters__link:hover {
      text-decoration: underline 2px;
    }
  }
}
@layer pages {
  /* Page: ChapterPage (/whats-inside/09-be-a-facilitator/ on the Big Jump site), book theme. Chapter header replaces the title band; the challenge sits on a
     yellow band; previous/next links share a row from 48rem. Not designed; built from book tokens. */
  .p-book-chapter__header {
    padding-block: var(--space-8) var(--space-6);
    background: var(--color-surface-3);
  }
  .p-book-chapter__eyebrow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .p-book-chapter__eyebrow a {
    color: var(--color-ink);
  }
  .p-book-chapter__title {
    margin-block-start: var(--space-2);
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    color: var(--color-ink-strong);
  }
  .p-book-chapter__challenge {
    padding-block: var(--space-8);
  }
  .p-book-chapter__challenge-text {
    margin-block-start: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    color: var(--color-ink-strong);
  }
  .p-book-chapter__teaser {
    margin-block: var(--space-8);
  }
  .p-book-chapter__related {
    margin-block: var(--space-8);
  }
  .p-book-chapter__related .c-article-card {
    margin-block-start: var(--space-5);
  }
  .p-book-chapter__pager {
    margin-block: var(--space-8);
  }
  .p-book-chapter__pager-inner {
    display: grid;
    gap: var(--space-5);
  }
  @media (min-width: 48rem) {
    .p-book-chapter__pager-inner {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .p-book-chapter__pager-link {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-5) var(--space-6);
    border: 2px solid var(--color-ink);
    border-radius: var(--radius);
    color: var(--color-ink);
    text-decoration: none;
  }
  .p-book-chapter__pager-link--next {
    text-align: end;
  }
  @media (min-width: 48rem) {
    .p-book-chapter__pager-link--next {
      grid-column: 2;
    }
  }
  .p-book-chapter__pager-dir {
    font-size: var(--fs-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .p-book-chapter__pager-name {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
  }
  @media (hover: hover) {
    .p-book-chapter__pager-link:hover {
      background: var(--color-surface-2);
    }
  }
  .p-book-chapter__buy {
    padding-block: var(--space-9);
  }
  .p-book-chapter__buy-inner {
    display: grid;
    justify-items: start;
    gap: var(--space-5);
  }
  .p-book-chapter__buy-title {
    font-size: var(--fs-h2);
  }
  .p-book-chapter__buy a:not(.c-button) {
    color: var(--color-on-dark);
  }
}
@layer pages {
  /* Page: CompanionPage (/companion/ on the Big Jump site), book theme. Only the intro needs page-level spacing; the body is blocks. */
  .p-book-companion__intro {
    margin-block: var(--space-8);
  }
}