@charset "UTF-8";
/* ==========================================================================
   Context Hubs — front-end entry point.
   ==========================================================================

   One of exactly two entry points. Layers load in cascade order: settings first
   so every later layer can consume the aliases, then generic, roles, Panels.

   Anything content-facing added below must also be reachable from editor.scss,
   or the editor and the rendered page will disagree.
   ========================================================================== */
/* ==========================================================================
   Brand layer — semantic aliases over theme.json presets.
   ==========================================================================

   theme.json is the single source of design values. WordPress emits them as
   --wp--preset--* and --wp--custom--*. This layer gives them stable semantic
   names so the role and Panel layers never reference a preset slug directly.

   Renaming a preset in theme.json therefore touches this file only, and a
   client re-skin is a theme.json change with no CSS edit at all.

   No literal design values below. If a value is not derivable from theme.json,
   it belongs in theme.json first.
   ========================================================================== */
:where(:root) {
  /* Surface roles and the hero gradient, by the token contract's names. The
     page's own text, line and action colours are contract names too, and are
     declared with the Panel roles. The inverse surface falls back to the
     contrast preset. */
  --surface-sunken: var(--wp--preset--color--surface-sunken);
  --surface-inverse: var(--wp--preset--color--surface-inverse, var(--wp--preset--color--contrast));
  --surface-accent: var(--wp--preset--color--surface-accent);
  --surface-marker: var(--wp--preset--color--surface-marker);
  --gradient-hero: var(--wp--preset--gradient--hero);
  /* Typography. Sizes, weights and leading are contract names, declared
     with the Panel roles. */
  --font-body: var(--wp--preset--font-family--body);
  --font-heading: var(--wp--preset--font-family--heading);
  /* Shape. The radius steps, the card shadow and the three widths are
     contract names, declared with the Panel roles. */
  --radius-pill: var(--wp--custom--radius--pill);
  /* Banner artwork. The Page Banner screen sets these on the banner itself;
     a theme can give defaults through settings.custom.banner in theme.json. */
  --banner-art-cap: var(--wp--custom--banner--art-max);
  --banner-art-phone: var(--wp--custom--banner--art-phone);
  --banner-art-bg-fill: var(--wp--custom--banner--bg-fill);
  --banner-art-bg-opacity: var(--wp--custom--banner--bg-opacity);
  --banner-art-bg-radius: var(--wp--custom--banner--bg-radius);
  --banner-art-bg-size: var(--wp--custom--banner--bg-size);
}

/* ==========================================================================
   Panel roles — the tokens the Row Panels read, with plain defaults.
   ==========================================================================

   Every name here is a contract name (tokens/contract.template.tokens.json,
   role.fg.strong -> --fg-strong), the same name the generator writes into
   a client's tokens.css. There is no map between the two: the client's
   value is the one the Panel reads. The defaults read theme.json, directly
   or through another contract name, so a site with no generated tokens
   still gets a readable, unbranded Panel. The few theme.json has no slot
   for fall back to a plain value.

   :where() keeps them at zero specificity: the client's tokens.css wins
   however the stylesheets end up ordered. Three roles the Panels use are declared in
   _brand.scss already and are not repeated here: surface-sunken,
   surface-marker and radius-pill.
   ========================================================================== */
/*
   The light-ground colour roles, from theme.json, and the list marker's.

   The page ground takes the same set, to put them back for a light card inside
   a dark or hub-coloured band (panels/_grounds.scss). A ground can't restore a
   role by pointing it at itself, so the set is stated once here for both.
*/
:where(:root, .c-ground--page) {
  --fg-strong: var(--wp--preset--color--accent);
  --fg-medium: var(--wp--preset--color--contrast);
  --fg-secondary: var(--fg-medium);
  --fg-muted: var(--wp--preset--color--muted);
  --fg-eyebrow: var(--action-primary-bg);
  --fg-link: var(--action-primary-bg);
  --border-faint: var(--wp--preset--color--border);
  --border-card: var(--border-faint);
  --list-marker-color: var(--wp--custom--list--marker-color, currentcolor);
}

:where(:root) {
  /* Text */
  --fg-on-dark: var(--wp--preset--color--base);
  --fg-on-badge: var(--fg-medium);
  --fg-on-dark-soft: var(--fg-on-dark);
  --fg-emphasis-on-dark: var(--fg-on-dark);
  --fg-link-on-dark: var(--fg-on-dark);
  --fg-on-accent: var(--fg-on-dark);
  --fg-on-accent-soft: var(--fg-on-dark);
  --fg-on-hub: var(--fg-on-accent);
  /* Surfaces and lines */
  --surface-page: var(--wp--preset--color--base);
  --surface-raised: var(--wp--preset--color--surface-raised, var(--surface-sunken));
  --surface-badge: var(--action-primary-bg);
  --surface-hub: var(--action-primary-bg);
  --border-soft: var(--border-faint);
  --border-accent: var(--action-primary-bg);
  --surface-selected: var(--wp--custom--surface--selected, color-mix(in srgb, var(--action-primary-bg) 8%, var(--surface-page)));
  --border-selected: var(--action-primary-bg);
  --border-on-dark: var(--wp--custom--border--on-dark, color-mix(in srgb, var(--fg-on-dark) 24%, transparent));
  --border-accent-on-dark: var(--wp--custom--border--accent-on-dark, color-mix(in srgb, var(--fg-on-dark) 40%, transparent));
  --hairline: var(--wp--custom--hairline, 1px);
  --shadow-card-tinted: var(--shadow-card-sm);
  --graphic-swipe: var(--surface-marker, transparent);
  /* A down chevron unless the theme gives its own; with none, a mask draws a solid square. */
  --mask-chevron-down: var(--wp--custom--mask--chevron-down, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 5.5 8 11l5.5-5.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"));
  /* A video camera unless the theme gives its own: a button that opens a video call (c-strip-links__video). */
  --mask-video: var(--wp--custom--mask--video, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Crect y='2' width='12' height='12' rx='1.5'/%3E%3Cpath d='M13 5.5l3.6-2.4a.9.9 0 0 1 1.4.75v8.3a.9.9 0 0 1-1.4.75L13 10.5z'/%3E%3C/svg%3E"));
  /* A tick cut from a disc unless the theme or the client's artwork gives its own: split-figure's points. */
  --mask-check: var(--wp--custom--mask--check, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cpath d='M9.5 16.5l4.5 4.5 8.5-8.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' mask='url(%23m)'/%3E%3C/svg%3E"));
  /* A plus, for a question that opens (rows-faq --marked); turned 45 degrees it is the cross that closes it. */
  --mask-plus: var(--wp--custom--mask--plus, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v16M0 8h16' fill='none' stroke='%23000' stroke-width='3.4'/%3E%3C/svg%3E"));
  /* A cross in a circle unless the theme gives its own: the mark for a value a table's column doesn't have. */
  --mask-cross: var(--wp--custom--mask--cross, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E"));
  /* An opening double quote unless the theme or the client's artwork gives its own: the mark before stack-prose --marked. */
  --mask-quote: var(--wp--custom--mask--quote, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 37'%3E%3Cpath d='M0 37V21C0 9 7 2 17 0l2 5C12 7 9 12 9 17h9v20Zm25 0V21c0-12 7-19 17-21l2 5c-7 2-10 7-10 12h9v20Z'/%3E%3C/svg%3E"));
  /* An "i" cut from a disc unless the theme gives its own: the mark that opens a person's bio (cards-people). */
  --mask-info: var(--wp--custom--mask--info, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Ccircle cx='16' cy='10' r='2.6'/%3E%3Cpath d='M12.5 14H18v7h1.5v3h-7v-3H14v-4h-1.5z'/%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='15.5' mask='url(%23m)'/%3E%3C/svg%3E"));
  /* An envelope cut from a disc unless the theme gives its own: a person's email link (cards-people). */
  --mask-mail: var(--wp--custom--mask--mail, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cmask id='m'%3E%3Ccircle cx='15' cy='15' r='15' fill='white'/%3E%3Crect x='6' y='9' width='18' height='12' rx='1.5'/%3E%3Cpath d='M6.6 10.4 15 17.2l8.4-6.8M6.6 19.8l5-4.5m11.8 4.5-5-4.5' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Crect width='30' height='30' mask='url(%23m)'/%3E%3C/svg%3E"));
  /* A cross unless the theme gives its own: the button that closes a dialog (cards-people). */
  --mask-close: var(--wp--custom--mask--close, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"));
  /* Three lines unless the theme gives its own: the list mark on the link to a video's transcript (inset-video --chapters). */
  --mask-menu: var(--wp--custom--mask--menu, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E"));
  /* A five-pointed star unless the theme gives its own: a story's rating (rows-stories). */
  --mask-star: var(--wp--custom--mask--star, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.49 15.71 8.41 24 9.52 18 14.9l1.42 7.6L12 18.91 4.58 22.5 6 14.9 0 9.52l8.29-1.11z'/%3E%3C/svg%3E"));
  /* Actions */
  --action-primary-bg: var(--wp--preset--color--primary);
  --action-primary-fg: var(--surface-page);
  --action-ghost-border: var(--action-primary-bg);
  --action-ghost-fg: var(--action-primary-bg);
  --action-on-dark-bg: var(--fg-on-dark);
  --action-on-dark-fg: var(--surface-inverse);
  --action-on-accent-bg: var(--fg-on-dark);
  --action-on-accent-fg: var(--action-primary-bg);
  --action-radius: var(--radius-pill);
  --action-border-width: var(--wp--custom--action--border-width, 0px);
  --action-shadow: var(--wp--custom--action--shadow, none);
  --action-shadow-hover: var(--action-shadow);
  --action-press-shift: var(--wp--custom--action--press-shift, 0px);
  --action-primary-bg-hover: var(--action-primary-bg);
  --action-primary-fg-hover: var(--action-primary-fg);
  --action-on-dark-bg-hover: var(--action-on-dark-bg);
  --action-padding-block: var(--space-2);
  --action-padding-inline: var(--space-5);
  /* Type */
  --t-hero: var(--wp--preset--font-size--xx-large);
  --t-section: var(--wp--preset--font-size--x-large);
  --t-title: var(--t-section);
  --t-lead: var(--wp--preset--font-size--large);
  --t-h3: var(--t-lead);
  --t-card-title: var(--t-lead);
  --t-stat: var(--t-hero);
  --t-body: var(--wp--preset--font-size--medium);
  --t-action: var(--t-body);
  --t-small: var(--wp--preset--font-size--small);
  --t-eyebrow: var(--t-small);
  --t-label: var(--t-small);
  --t-tag: var(--t-small);
  --fw-regular: var(--wp--custom--typography--weight--regular);
  --fw-semi: var(--wp--custom--typography--weight--semibold);
  --fw-bold: var(--wp--custom--typography--weight--bold);
  --lh-tight: var(--wp--custom--typography--line-height--heading);
  --lh-snug: var(--lh-tight);
  --lh-relaxed: var(--wp--custom--typography--line-height--body);
  --lh-normal: var(--lh-relaxed);
  /* Space. theme.json has six steps; the contract has twelve, so the steps
     between fall on the one below. */
  --space-2: var(--wp--preset--spacing--20);
  --space-1: var(--wp--preset--spacing--10, calc(var(--space-2) / 2));
  --space-3: var(--wp--preset--spacing--30);
  --space-4: var(--space-3);
  --space-5: var(--wp--preset--spacing--40);
  --space-6: var(--space-5);
  --space-7: var(--wp--preset--spacing--50);
  --space-8: var(--space-7);
  --space-9: var(--wp--preset--spacing--60);
  --space-10: var(--space-9);
  --space-11: var(--wp--preset--spacing--70);
  --space-12: var(--space-11);
  --gutter: var(--space-5);
  /* Shape and width */
  --radius-sm: var(--wp--custom--radius--small);
  --radius-md: var(--wp--custom--radius--card);
  --radius-lg: var(--radius-md);
  --shadow-card-sm: var(--wp--custom--shadow--card);
  --shadow-card-lg: var(--shadow-card-sm);
  --measure-banner: var(--wp--style--global--wide-size);
  --measure-content: var(--wp--style--global--content-size);
  --measure-site: var(--global-content-width);
  --gutter-page-edge: var(--global-content-edge-padding);
  --sidebar-width: var(--wp--custom--sidebar--width, 27%);
  --sidebar-gap: var(--wp--custom--sidebar--gap, 2rem);
  --banner-padding-start: var(--space-9);
  --banner-padding-end: var(--banner-padding-start);
  --banner-text-max: var(--measure-prose);
  --banner-gap: var(--space-7);
  --banner-inset: var(--wp--custom--banner--inset, 0px);
  --banner-feature-height: var(--wp--custom--banner--feature-height, 30rem);
  --graphic-ornament-start: var(--wp--custom--graphic--ornament-start, none);
  --graphic-ornament-end: var(--wp--custom--graphic--ornament-end, none);
  --banner-overlap: var(--wp--custom--banner--overlap, 0px);
  --card-border-width: var(--hairline);
  --card-radius: var(--radius-md);
  --card-header-bg: var(--fg-strong);
  --card-header-fg: var(--surface-page);
  --fg-link-hover: var(--fg-link);
  --fg-link-visited: var(--fg-link);
  --fg-caption: var(--fg-muted);
  --fg-cite: var(--fg-muted);
  --fg-quote: var(--fg-strong);
  --fg-label: var(--fg-strong);
  --fg-placeholder: var(--fg-muted);
  --fg-nav-current: var(--fg-strong);
  --fg-nav-ancestor: var(--fg-medium);
  --link-rule: var(--fg-link);
  --link-rule-thickness: var(--hairline);
  --link-rule-offset: var(--wp--custom--link--rule-offset, 0.15em);
  --link-hover-flood: var(--wp--custom--link--hover-flood, transparent);
  --border-quote: var(--border-accent);
  --border-table: var(--border-faint);
  --surface-code: var(--surface-sunken);
  --surface-table-header: var(--surface-sunken);
  --font-mono: var(--wp--preset--font-family--mono, monospace);
  --list-marker-size: var(--wp--custom--list--marker-size, 0.375rem);
  --image-radius: var(--wp--custom--image--radius, 0);
  --shadow-image: var(--wp--custom--shadow--image, none);
  --field-bg: var(--surface-page);
  --field-fg: var(--fg-strong);
  --field-border: var(--border-faint);
  --field-border-focus: var(--focus-ring);
  --field-radius: var(--radius-sm);
  --field-height: var(--wp--custom--field--height, 2.75rem);
  --fw-medium: var(--wp--custom--typography--weight--medium, 500);
  --focus-ring: var(--fg-link);
  --focus-ring-width: var(--wp--custom--focus--width, 2px);
  --focus-ring-offset: var(--wp--custom--focus--offset, 2px);
  --motion-base: var(--wp--custom--motion--base, 150ms);
  --ease-standard: var(--wp--custom--ease--standard, ease);
  --action-disabled-bg: var(--border-faint);
  --action-disabled-fg: var(--fg-muted);
  --status-error-bg: var(--wp--custom--status--error-bg, #fdecea);
  --status-error-fg: var(--wp--custom--status--error-fg, #8a1c0e);
  --status-success-bg: var(--wp--custom--status--success-bg, #e8f5e9);
  --status-success-fg: var(--wp--custom--status--success-fg, #1b5e20);
  --nav-hover-flood: var(--wp--custom--nav--hover-flood, transparent);
  --nav-hover-rule: var(--wp--custom--nav--hover-rule, transparent);
  --nav-rule-current: var(--fg-link);
  --lh-flush: var(--wp--custom--typography--line-height--flush, 1);
  --tracking-wide: var(--wp--custom--tracking--wide, 0.09em);
  --tracking-tight: var(--wp--custom--tracking--tight, -0.025em);
  --font-heading-variation: var(--wp--custom--font--heading-variation, normal);
  --measure-prose: var(--wp--custom--measure);
  --reading-measure: var(--measure-prose);
}

/* ==========================================================================
   Generic — what the plugin's own CSS assumes, and nothing the parent owns.
   ==========================================================================

   Kadence is the client's frame and ships its own element defaults. This layer
   is not a reset of that frame: an element rule here reaches every element on
   the site, including the ones the parent draws. A global
   `img, svg { display: block }` did exactly that — it took Kadence's inline
   icons and inline images out of their lines, on every page, from a plugin
   whose business is the page content. Component media is styled by the
   component (see components/_banner.scss), never from here.

   What remains is what the plugin's components rely on.
   ========================================================================== */
/* Every width and padding in the role and component layers assumes border-box.
   Kadence resolves to the same box model, so this states the assumption rather
   than changing anything. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Let long words break rather than force a horizontal scrollbar. */
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
figcaption {
  overflow-wrap: break-word;
}

/* Respect a reduced-motion preference for everything the plugin animates. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important; /* stylelint-disable-line declaration-no-important -- an accessibility preference must beat presentation styles. */
    animation-iteration-count: 1 !important; /* stylelint-disable-line declaration-no-important -- as above. */
    transition-duration: 0.01ms !important; /* stylelint-disable-line declaration-no-important -- as above. */
    scroll-behavior: auto !important; /* stylelint-disable-line declaration-no-important -- as above. */
  }
}
/* ==========================================================================
   Roles — the invariant semantic vocabulary.
   ==========================================================================

   Every class here must have a matching entry in config/vocabulary.json, with
   its allowed blocks, conflicts and purpose. The build fails on a role class
   that is not declared there, and on a declared role with no implementation.

   Roles consume the contract's roles only. A role name must never contain a design value:
   .ds-t-display is a role, .ds-text-48 is not.

   The first set is deliberately small and provisional. It was derived from
   semantic concepts in the Ascendant Article Subpages design export, not from
   its fixed pixel utilities or Kadence implementation.
   ========================================================================== */
.ds-t-display {
  color: var(--fg-strong);
  font-family: var(--font-heading);
  font-size: var(--t-hero);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.ds-t-section-title {
  color: var(--fg-strong);
  font-family: var(--font-heading);
  font-size: var(--t-section);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
}

.ds-t-subheading {
  color: var(--fg-strong);
  font-family: var(--font-heading);
  font-size: var(--t-lead);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
}

.ds-t-lead {
  color: var(--fg-medium);
  font-family: var(--font-body);
  font-size: var(--t-lead);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
}

.ds-t-longform {
  max-width: var(--measure-prose);
  color: var(--fg-medium);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
}

.ds-t-quote {
  color: var(--fg-strong);
  font-family: var(--font-heading);
  font-size: var(--t-lead);
  font-weight: var(--fw-semi);
  line-height: var(--lh-relaxed);
}

.ds-t-supporting {
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
}

.ds-t-eyebrow {
  color: var(--fg-eyebrow);
  font-family: var(--font-heading);
  font-size: var(--t-small);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

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

.ds-section-space {
  padding-block: var(--space-11);
}

.ds-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.ds-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.ds-inverse {
  color: var(--fg-on-dark);
  background-color: var(--surface-inverse);
}

/* ==========================================================================
   Banner — the hooked hero.
   ==========================================================================

   Structure only. Layout, rhythm and shape live here because the plugin owns
   the markup, so it owns the rules targeting it. Colour comes from a role
   token, falling back to the site's own theme.json preset, so the banner
   renders plain but correct on a site with no Chassis tokens and right on one
   with them. No literal values.

   The background image itself is set inline by the renderer, because it is a
   per-page value rather than anything the design system has an opinion about.

   Front-end only: the banner is put into the frame by a placement adapter and
   is never drawn inside the editor canvas, so it is listed in vocabulary.json's
   frontEndOnly and editor.scss does not import it.
   ========================================================================== */
/*
   The banner's space above and below its text (banner.padding-start, -end)
   is a desktop measure. It scales with the screen down to space.9, and never
   below: 126px on a wide screen is 48px on a phone, where the full 126px
   left a gap under the header bigger than the headline. A contract whose
   padding is space.9 or less (the default) gets exactly its own value.
*/
.c-banner {
  background-color: var(--surface-page, var(--wp--preset--color--surface));
  padding-block: min(var(--banner-padding-start), max(var(--space-9), 10vw)) min(var(--banner-padding-end), max(var(--space-9), 10vw));
  padding-inline: var(--space-5, 1.25rem);
}

.c-banner--has-background {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*
   The two grounds.

   Both re-point existing aliases rather than introducing colours, so a site
   that has mapped its tokens gets both variants for nothing and the plugin
   still knows no brand values.

   The roles move as a set — surface and every text role together — because
   changing a ground without the text on it is how a heading ends up at
   1.00:1. That is not hypothetical here: the brush stroke behind a headline
   measures 11.44:1 in ink and 1.47:1 in white against Ascendant's own swipe,
   so the light ground is what makes a swiped heading legible at all.

   Neither is a default. A banner with no ground set keeps whatever the site's
   own rules give it.

   In the light variant `background-image: none` is the load-bearing line. A
   site that wants a dark banner everywhere says so by painting .c-banner —
   Ascendant's token map gives it a gradient — and a light variant has to undo
   that, not merely state a background colour underneath it.
*/
.c-banner--light {
  background-color: var(--surface-page, var(--wp--preset--color--surface));
  background-image: none;
  color: var(--fg-medium, var(--wp--preset--color--body));
}

.c-banner--inverse {
  background-color: var(--surface-inverse, var(--wp--preset--color--contrast));
  color: var(--fg-on-dark, var(--wp--preset--color--base));
}

/*
   Under the banner look the grounds are the token contract's roles: the sunken
   surface, and the inverse surface under the hero gradient. They hang off
   c-banner--look, so a page that only sets its own ground keeps the colours it
   had. A site without the roles falls back to the two rules above.
*/
.c-banner--look.c-banner--light {
  background-color: var(--surface-sunken, var(--surface-page, var(--wp--preset--color--surface)));
}

.c-banner--look.c-banner--inverse {
  background-color: var(--surface-inverse, var(--wp--preset--color--contrast));
  background-image: var(--gradient-hero, none);
}

.c-banner--inverse :is(.c-banner__heading, .c-banner__body) {
  color: var(--fg-on-dark, var(--wp--preset--color--base));
}

.c-banner--light .c-banner__heading {
  color: var(--fg-strong, var(--wp--preset--color--body));
}

.c-banner--light .c-banner__body {
  color: var(--fg-medium, var(--wp--preset--color--body));
}

/* One column that never grows past the banner: a word longer than the
   column wraps inside it instead of widening the grid, which the page then
   cuts off at the screen's edge. */
.c-banner__inner {
  display: grid;
  gap: var(--banner-gap, var(--space-7, 2rem));
  grid-template-columns: minmax(0, 1fr);
  margin-inline: auto;
  max-width: var(--measure-banner, 75rem);
}

/* Two columns once there is room for them, one column below that. */
.c-banner--two-column .c-banner__inner {
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48em) {
  .c-banner--two-column .c-banner__inner {
    grid-template-columns: 1fr 1fr;
  }
  /* Under the banner look the image is drawn no wider than its cap, so its
     column takes only that and the text the rest: a headline that would
     wrap in half the banner stays on one line. Never more than half, which
     is where a filled image (cap 100%) lands. */
  .c-banner--two-column.c-banner--art .c-banner__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, min(var(--banner-art-cap, 22.5rem), 50%));
  }
}
.c-banner__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

/*
   Typography is repeated here, with fallbacks, on purpose.

   The role layer sets font-size: var(--t-hero) with no fallback, so on
   a site carrying no Chassis tokens the declaration is invalid and the heading
   inherits whatever the theme gives it. Measured on a Kadence site with no
   client token file: the display heading rendered at 18px while the body
   rendered at 36px — the hierarchy inverted.

   The component loads after the roles layer, so these win where a token is
   missing and lose to nothing where one is present. Remove them once the role
   layer carries its own fallbacks.
*/
.c-banner__heading {
  font-size: var(--t-hero, 2.25rem);
  font-variation-settings: var(--font-heading-variation);
  font-weight: var(--fw-bold, 700);
  line-height: var(--lh-tight, 1.15);
  overflow-wrap: break-word;
}

/* On a phone a display heading's longest word can be wider than the screen
   ("Implementation" at the display size): hyphenate words that long rather
   than break them anywhere. Only long words, so shorter ones wrap as before. */
@media (max-width: 47.99em) {
  /* stylelint-disable-next-line selector-class-pattern -- the contract's body class from settings.json. */
  .cw-frame .c-banner__heading {
    hyphens: auto;
    hyphenate-limit-chars: 12 6 6;
  }
  /* And size the heading to the screen, never above the contract's own
     size: 54px set "Commercial" edge to edge on a 375px phone and broke it
     on anything narrower (Matt, 15 October 2026). */
  .c-banner__heading {
    font-size: min(var(--t-hero, 2.25rem), 11.5vw);
  }
}
/*
   The eyebrow, when a page has one, is its H1: the plain search phrase, small,
   above a heading that is now display text in a paragraph (includes/banner.php).
   It looks like the panels' eyebrow (.c-eyebrow), so a banner and a band read
   as one family. On the dark ground it takes the emphasis colour, as the
   panels' eyebrow does on their dark strip.
*/
.c-banner__eyebrow {
  margin: 0;
  font-size: var(--t-eyebrow, 0.875rem);
  font-weight: var(--fw-bold, 700);
  line-height: var(--lh-snug, 1.3);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-eyebrow, currentcolor);
}

.c-banner--inverse .c-banner__eyebrow {
  color: var(--fg-emphasis-on-dark, var(--fg-on-dark, var(--wp--preset--color--base)));
}

/* The line above the heading that is not the H1. Drawn like the eyebrow. */
.c-banner__kicker {
  margin: 0;
  font-size: var(--t-eyebrow, 0.875rem);
  font-weight: var(--fw-bold, 700);
  line-height: var(--lh-snug, 1.3);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-eyebrow, currentcolor);
}

.c-banner--inverse .c-banner__kicker {
  color: var(--fg-emphasis-on-dark, var(--fg-on-dark, var(--wp--preset--color--base)));
}

.c-banner__heading--display {
  margin: 0;
  letter-spacing: var(--tracking-tight);
}

/* A banner whose eyebrow is its H1, with a display line after it, sets its
   text as one evenly spaced column, level with the top of its image. */
.c-banner--two-column:has(.c-banner__heading--display) .c-banner__inner {
  align-items: start;
}

.c-banner__content:has(.c-banner__heading--display) {
  gap: var(--space-6);
}

.c-banner__content:has(.c-banner__heading--display) .c-banner__body > p:first-child {
  margin-block-start: 0;
}

.c-banner__content:has(.c-banner__heading--display) .c-banner__actions {
  margin-block-start: var(--space-2);
  gap: var(--space-4);
}

/* How wide the headline and lead may run (banner.text-max), so a short
   headline doesn't stretch across a wide banner. Default: the prose measure.
   A share of the banner (Thain Wildbur's 50%) would squeeze the headline on
   a phone, so the measure never comes down below 30rem or the banner's
   width, whichever is less; a measure of 30rem or more (every other client)
   is unchanged. */
.c-banner__heading,
.c-banner__body {
  max-width: max(var(--banner-text-max), min(100%, 30rem));
}

.c-banner__body {
  font-size: var(--t-lead, 1.125rem);
  line-height: var(--lh-relaxed, 1.6);
}

.c-banner__body > p:last-child {
  margin-block-end: 0;
}

/* The <picture> that keeps a hidden image off a phone lays out as if it were not there. */
.c-banner__media picture {
  display: contents;
}

.c-banner__media img {
  border-radius: var(--radius-md, 0.5rem);
  display: block;
  height: auto;
  max-width: 100%;
}

/* Artwork ------------------------------------------------------------------ */
/*
   The right-side image under the banner look. c-banner--art is only set on a
   page that uses the look; any other keeps the rule above and whatever the
   site's own stylesheet gives it.

   The image is centred in its column and drawn up to the art size. The
   background shape sits behind it, centred on it and sized from its width.
*/
.c-banner--art .c-banner__media {
  display: grid;
  min-width: 0;
  place-items: center;
  position: relative;
}

.c-banner--art .c-banner__media :is(img, svg) {
  height: auto;
  margin-inline: auto;
  max-height: none;
  max-width: var(--banner-art-cap, 100%);
  position: relative;
  width: 100%;
}

.c-banner--art-bg .c-banner__media::before {
  aspect-ratio: 1;
  background: var(--banner-art-bg-fill, var(--surface-inverse, var(--wp--preset--color--contrast)));
  border-radius: var(--banner-art-bg-radius, 50%);
  content: "";
  inset-block-start: 50%;
  inset-inline-start: 50%;
  opacity: var(--banner-art-bg-opacity, 1);
  position: absolute;
  transform: translate(-50%, -50%);
  width: calc(min(var(--banner-art-cap, 100%), 100%) * var(--banner-art-bg-size, 0.81));
}

/* The fills are the site's own colours, by role. The gradient is the one the dark ground uses. */
.c-banner--art-bg-gradient {
  --banner-art-bg-fill: var(--gradient-hero, var(--surface-inverse));
}

.c-banner--art-bg-ink {
  --banner-art-bg-fill: var(--surface-inverse);
}

.c-banner--art-bg-accent {
  --banner-art-bg-fill: var(--surface-accent, var(--wp--preset--color--accent));
}

.c-banner--art-bg-tint {
  --banner-art-bg-fill: var(--surface-marker, var(--border-faint));
}

/* A phone gets one column: the image goes, or sits under the text at a smaller size. */
@media (max-width: 47.99em) {
  .c-banner--art .c-banner__media {
    display: none;
  }
  .c-banner--art-phone-below .c-banner__media :is(img, svg) {
    max-width: var(--banner-art-phone, 10rem);
  }
  .c-banner--art-phone-below .c-banner__media::before {
    width: calc(var(--banner-art-phone, 10rem) * var(--banner-art-bg-size, 0.81));
  }
  .c-banner--art-phone-below .c-banner__media {
    display: grid;
  }
}
/* The image as a card ------------------------------------------------------ */
/*
   With a caption or a link bar the image becomes a card (Deliverable #29):
   outlined and shadowed like the panels' cards, the caption under the image,
   then an ink bar that links to it. Set per page (includes/banner.php).
*/
.c-banner .c-banner__media--card {
  display: flex;
  flex-direction: column;
  justify-self: end;
  width: min(100%, var(--banner-art-cap, 100%));
  margin: 0;
  border: var(--card-border-width, 2px) solid var(--border-card, currentcolor);
  background: var(--surface-page, var(--wp--preset--color--base));
  box-shadow: var(--shadow-card-lg, none);
}

.c-banner .c-banner__media--card::before {
  content: none;
}

.c-banner__media-frame {
  padding: var(--space-4, 1rem);
  border-block-end: var(--card-border-width, 2px) solid var(--border-card, currentcolor);
}

.c-banner .c-banner__media--card img {
  border-radius: 0;
  max-width: 100%;
  width: 100%;
}

.c-banner__caption {
  margin: 0;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-size: var(--t-small, 0.875rem);
  line-height: var(--lh-normal, 1.45);
  color: var(--fg-medium, currentcolor);
}

.c-banner__media-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 1rem);
  padding: var(--space-4, 1rem);
  background: var(--action-primary-bg, var(--surface-inverse));
  color: var(--action-primary-fg, var(--fg-on-dark));
  font-weight: var(--fw-bold, 700);
  text-decoration: none;
  /* Colours swap at once, as the banner's buttons do: an inverting hover
     faded through grey on grey. */
  transition: none;
}

.c-banner__media-link:hover,
.c-banner__media-link:focus-visible {
  background: var(--action-primary-bg-hover, var(--action-primary-bg));
  color: var(--action-primary-fg-hover, var(--action-primary-fg));
}

.c-banner__media-arrow {
  font-size: 1.5em;
  line-height: 1;
}

/*
   A video in place of the image (includes/banner.php). The poster is a link
   with a play mark in its middle, a tenth of its width; the player that
   replaces it, or shows without a poster, keeps a 16:9 frame at any width.
*/
.c-banner__play {
  border-radius: var(--radius-md, 0.5rem);
  color: var(--fg-on-dark, var(--wp--preset--color--base));
  display: block;
  overflow: hidden;
  position: relative;
}

.c-banner__play img {
  border-radius: 0;
  width: 100%;
}

.c-banner__play-icon {
  aspect-ratio: 16/9;
  display: flex;
  inset: 0;
  margin: auto;
  pointer-events: none;
  position: absolute;
  width: 10%;
}

.c-banner__play-icon svg {
  height: 100%;
  width: 100%;
}

.c-banner__play:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 2px;
}

.c-banner__video {
  border-radius: var(--radius-md, 0.5rem);
  overflow: hidden;
}

.c-banner__video :is(iframe, video) {
  aspect-ratio: 16/9;
  border: 0;
  display: block;
  height: auto;
  width: 100%;
}

/* Breadcrumbs -------------------------------------------------------------- */
.c-banner__breadcrumbs {
  color: var(--fg-muted, var(--wp--preset--color--muted));
  display: flex;
  flex-wrap: wrap;
  font-size: var(--t-small, 0.875rem);
  gap: var(--space-2, 0.5rem);
}

/* The crumbs are links, and nothing here said what a link looks like, so they
   took the browser's underline and the theme's link colour. A breadcrumb is
   orientation, not an invitation: it takes the crumb colour and underlines on
   hover. (Ported from 9cbd3b1, which reached live but not main.) */
.c-banner__breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

.c-banner__breadcrumbs a:hover,
.c-banner__breadcrumbs a:focus-visible {
  text-decoration: underline;
}

.c-banner__crumb-sep {
  color: var(--border-faint, var(--wp--preset--color--border));
}

/* banner.trail: links. The trail's links in the link colour, underlined,
   and the current page in the strong colour; on the dark banner, the
   on-dark ones. */
/* stylelint-disable selector-class-pattern -- the contract's body class from settings.json. */
.cw-banner-trail--links .c-banner__breadcrumbs a {
  color: var(--fg-link);
  text-decoration-line: underline;
}
.cw-banner-trail--links .c-banner__breadcrumbs [aria-current] {
  color: var(--fg-strong);
}

.cw-banner-trail--links .c-banner--inverse .c-banner__breadcrumbs a {
  color: var(--fg-link-on-dark);
}
.cw-banner-trail--links .c-banner--inverse .c-banner__breadcrumbs [aria-current] {
  color: var(--fg-on-dark);
}

/* stylelint-enable selector-class-pattern */
/* Geotag ------------------------------------------------------------------- */
.c-banner__geotag {
  color: var(--fg-muted, var(--wp--preset--color--muted));
  font-size: var(--t-small, 0.875rem);
}

/* Calls to action ---------------------------------------------------------- */
.c-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);
  margin-block-start: var(--space-3, 0.75rem);
}

/*
   The reassurance line under the actions.

   Muted and small on purpose: it qualifies the buttons rather than competing
   with them, and it is the last thing read before someone decides to click.
   It keeps a measure because it is a sentence, not a label.
*/
.c-banner__actions-note {
  color: var(--fg-muted, var(--wp--preset--color--muted));
  font-size: var(--t-small, 0.875rem);
  margin-block-start: var(--space-2, 0.5rem);
  max-width: var(--measure-prose, 60ch);
}

/* The badges under the buttons: one row, each image at its own shape, all
   shrinking together rather than wrapping when the column is narrow. */
.c-banner__badges {
  display: flex;
  gap: var(--space-5, 1.25rem);
  margin-block-start: var(--space-5, 1.25rem);
}

.c-banner__badge {
  display: block;
  flex: 0 1 auto;
  height: auto;
  max-width: 100%;
  min-width: 0;
}

/*
   A button is drawn by the contract's action roles: its corner, its own
   border (in its fill colour, so filled and outline buttons line up), its
   shadow at rest and on hover, and how far it moves when pressed. A client
   that leaves them empty gets today's button: a pill, no border, no shadow.
*/
.c-banner__button {
  border: var(--action-border-width) solid transparent;
  border-radius: var(--action-radius);
  box-shadow: var(--action-shadow);
  display: inline-block;
  font-weight: var(--fw-semi, 600);
  padding-block: var(--action-padding-block, var(--space-2, 0.5rem));
  padding-inline: var(--action-padding-inline, var(--space-5, 1.25rem));
  text-decoration: none;
  /* Colours swap at once: a hover role that inverts the button (dark to
     light on Demand Definition) passed, mid-fade, through grey text on a
     grey fill, which on a phone's tap read as the label vanishing. Only
     the shadow and the press move. */
  transition: box-shadow var(--motion-base, 0.15s) var(--ease-standard, ease), transform var(--motion-base, 0.15s) var(--ease-standard, ease);
}

/* Hover only where there is a pointer to hover with. A tap on a phone sets
   :hover and keeps it, so the button turned light and grew its shadow as
   the next page loaded; a tap now shows only the press below. */
@media (hover: hover) {
  .c-banner__button:hover {
    box-shadow: var(--action-shadow-hover);
  }
  /* On hover the fill and label take the hover roles; the edge keeps the
     resting fill, so a light hover ground doesn't lose the button's
     outline. Empty hover roles keep the resting colours
     (settings/_panel-roles.scss). */
  .c-banner__button--primary:hover {
    background-color: var(--action-primary-bg-hover);
    color: var(--action-primary-fg-hover);
  }
  .c-banner--inverse .c-banner__button--primary:hover {
    background-color: var(--action-on-dark-bg-hover);
    color: var(--action-on-dark-fg);
  }
}
.c-banner__button:active {
  transform: translateY(var(--action-press-shift));
}

/*
   The last fallback is a named colour, not a brand one. A filled button whose
   fill does not resolve renders as transparent with dark text on a dark ground,
   which is the one failure worth spending a literal to avoid. Kadence names its
   palette --global-palette*, so the WordPress preset names do not resolve there
   either — the chain has to end somewhere real.
*/
.c-banner__button--primary {
  background-color: var(--action-primary-bg, var(--wp--preset--color--primary, black));
  border-color: var(--action-primary-bg, var(--wp--preset--color--primary, black));
  color: var(--action-primary-fg, var(--wp--preset--color--base, white));
}

/*
   On the dark ground the primary takes the on-dark roles, as buttons on the
   panels' dark grounds do. With the light-ground roles a dark fill sits on a
   dark ground and the button reads as bare text.
*/
.c-banner--inverse .c-banner__button--primary {
  background-color: var(--action-on-dark-bg, var(--fg-on-dark, white));
  border-color: var(--action-on-dark-bg, var(--fg-on-dark, white));
  color: var(--action-on-dark-fg, var(--surface-inverse, black));
}

/*
   The secondary action is outlined rather than filled. Two filled buttons of
   equal weight give the reader no steer, which is the point of having a
   second one at all.
*/
.c-banner__button--secondary {
  border-color: var(--action-ghost-border, var(--wp--preset--color--primary, currentColor));
  border-width: max(var(--action-border-width), 1px);
  color: var(--action-ghost-fg, var(--wp--preset--color--primary, currentColor));
}

/* Quick links -------------------------------------------------------------- */
/*
   The field is called "Show Mobile Quick Links", and until now it was not
   mobile-only — it rendered at every width.

   On the site this came from, the hiding lived in the Kadence Element that
   carried the banner: it was set to hide on large screens (.kvs-lg-false).
   The chassis banner replaced that Element and inherited the markup but not
   the visibility rule, so every page with the legacy switch on grew a second
   section menu on desktop — the flat list here, plus the sidebar's tree.
   Measured on the clone: 74 published pages have that switch on.

   1025px is the breakpoint the context menu already uses to decide between
   its two presentations, and for the same reason: it is where the sidebar
   stops sitting beside the content. Above it a sidebar can carry the section
   menu, so this one is a duplicate. Below it there is no sidebar beside the
   reader, which is exactly when a menu at the top of the page earns its place.

   It sits under the banner rather than inside it, so the banner holds only its
   own content, on either ground.
*/
@media screen and (min-width: 1025px) {
  .c-banner-menu {
    display: none;
  }
}
.c-context-menu__root {
  display: inline-block;
  font-weight: var(--fw-semi, 600);
  text-decoration: none;
}

/*
   wp_list_pages supplies the list. Its own classes are left alone, so a site
   already styling the retired shortcode keeps the styling it has; only the
   reset below is ours.
*/
.c-context-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-context-menu__list a {
  display: inline-block;
  padding-block: var(--space-2, 0.5rem);
}

/* The list shares the old sidebar menu's class, and with it that menu's
   right-hand rule, which does not belong under a banner. */
.c-banner-menu .c-context-menu {
  border-inline-end: 0;
}

/* Quick menu --------------------------------------------------------------- */
/*
   Automatic, and a dropdown: includes/quick-menu.php fills it on every page
   whose section has sub-pages and wraps it in <details>.

   Where it shows is unchanged: the rule above hides it from 1025px up, where
   the sidebar sits beside the content and carries the section menu. Below
   that, the sidebar has collapsed and the quick menu takes its place.

   Deliberately NOT shown on a wide page that has no sidebar by design. Those
   are hub pages, whose own content already introduces their sub-pages; a menu
   above them would repeat it (Matt, 6 October 2026). When the sidebar's
   breakpoint becomes a contract setting, this should follow it rather than
   a fixed 1025px.
*/
.c-banner-menu {
  padding-inline: var(--space-5, 1.25rem);
}

.c-quick-menu {
  border-block-end: 1px solid var(--border-faint, currentcolor);
  margin-inline: auto;
  max-width: var(--measure-banner, 75rem);
}

.c-quick-menu__toggle {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-weight: var(--fw-semi, 600);
  gap: var(--space-2, 0.5rem);
  justify-content: space-between;
  list-style: none;
  padding-block: var(--space-3, 0.75rem);
}

.c-quick-menu__toggle::-webkit-details-marker {
  display: none;
}

/* A chevron drawn from two borders: down when closed, up when open. */
.c-quick-menu__toggle::after {
  block-size: 0.5em;
  border-block-end: 2px solid currentcolor;
  border-inline-end: 2px solid currentcolor;
  content: "";
  flex: none;
  inline-size: 0.5em;
  transform: translate(0, -25%) rotate(45deg);
}

.c-quick-menu[open] > .c-quick-menu__toggle::after {
  transform: translate(0, 25%) rotate(-135deg);
}

/* Inside, the section menu reads as the sidebar's does: ruled rows, the page
   you are on tinted with a bar, no underlines. The toggle already says what
   the list is, so the menu's own heading stays out. */
/* stylelint-disable selector-class-pattern -- the rows are WordPress's page list, so its classes are theirs. */
.c-quick-menu__panel {
  padding-block-end: var(--space-3, 0.75rem);
}
.c-quick-menu__panel .c-context-menu__heading {
  display: none;
}
.c-quick-menu__panel .c-context-menu__list,
.c-quick-menu__panel .c-context-menu__list .children {
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-quick-menu__panel .c-context-menu__root,
.c-quick-menu__panel .c-context-menu__list a {
  display: block;
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  border-block-end: var(--hairline, 1px) solid var(--border-faint, transparent);
  font-weight: var(--fw-regular, 400);
  color: var(--fg-medium, inherit);
  text-decoration: none;
}
.c-quick-menu__panel {
  /* Depth shows as indent, as in the sidebar. */
}
.c-quick-menu__panel .c-context-menu__root {
  padding-inline-start: var(--space-2, 0.5rem);
}
.c-quick-menu__panel .c-context-menu__list > li > a {
  padding-inline-start: var(--space-7, 2rem);
}
.c-quick-menu__panel .c-context-menu__list .children > li > a {
  padding-inline-start: var(--space-9, 3rem);
}
.c-quick-menu__panel .c-context-menu__root .menu-title {
  margin: 0;
  font: inherit;
}
.c-quick-menu__panel .c-context-menu__root[aria-current=page],
.c-quick-menu__panel .c-context-menu__list .current_page_item > a {
  padding-inline-start: calc(var(--space-2, 0.5rem) - 3px);
  border-inline-start: 3px solid var(--border-selected, currentcolor);
  background: var(--surface-selected, transparent);
  font-weight: var(--fw-semi, 600);
  color: var(--fg-nav-current, inherit);
}
.c-quick-menu__panel .c-context-menu__list li.current_page_ancestor > a {
  background: var(--surface-sunken, transparent);
  font-weight: var(--fw-semi, 600);
  color: var(--fg-strong, inherit);
}
.c-quick-menu__panel .c-context-menu__list > li.current_page_item > a {
  padding-inline-start: calc(var(--space-7, 2rem) - 3px);
}
.c-quick-menu__panel .c-context-menu__list .children > li.current_page_item > a {
  padding-inline-start: calc(var(--space-9, 3rem) - 3px);
}
.c-quick-menu__panel .c-context-menu__all {
  display: inline-block;
  margin-block-start: var(--space-3, 0.75rem);
  font-weight: var(--fw-bold, 700);
  color: var(--fg-link, inherit);
  text-decoration: none;
}

/* stylelint-enable selector-class-pattern */
/* The trail as a row of its own under the banner (banner.breadcrumbs: below):
   small, quiet, on the page ground, aligned with the banner's content. */
.c-banner-crumbs {
  padding: var(--space-2, 0.5rem) var(--space-5, 1.25rem);
  border-block-end: var(--hairline, 1px) solid var(--border-faint, transparent);
}

/* The same width and edge as the banner's own content, so the trail lines up
   under the heading. */
.c-banner-crumbs .c-banner__breadcrumbs {
  max-width: var(--measure-banner, 75rem);
  margin-inline: auto;
  font-size: var(--t-label, 0.8125rem);
}

/* banner.width: site. The banner's text, its trail and the quick menu run to
   the header's width, level with the logo, so the banner reads wider than
   the content and sidebar beneath it. Below the site width they keep the
   header's side margin (Kadence's edge padding) rather than the banner's
   own narrower one, so they stay level with the logo on every screen.
   banner.inset brings them in from the header's edge by up to that much a
   side: halfway to the content's edge where the two are closer than twice
   the inset (a laptop screen), so the banner is still wider than the
   content. */
/* stylelint-disable-next-line selector-class-pattern -- the contract's body class from settings.json. */
.cw-banner-width--site :is(.c-banner__inner, .c-quick-menu, .c-banner-crumbs .c-banner__breadcrumbs) {
  max-width: max(min(var(--measure-site, 100rem), calc(100% - 2 * max(0px, var(--global-content-edge-padding, var(--space-5, 1.25rem)) - var(--space-5, 1.25rem)))) - 2 * var(--banner-inset), (min(var(--measure-site, 100rem), calc(100% - 2 * max(0px, var(--global-content-edge-padding, var(--space-5, 1.25rem)) - var(--space-5, 1.25rem)))) + min(var(--measure-banner, 82.5rem), calc(100% - 2 * max(0px, var(--global-content-edge-padding, var(--space-5, 1.25rem)) - var(--space-5, 1.25rem))))) / 2);
}

/* The banner's last line, when it carries the share row (banner.share): the
   trail at its start when the trail is at the bottom, the share row at its
   end. They stack on a phone, the share row under the trail. */
.c-banner__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-5, 1.25rem);
  margin-block-start: var(--space-7, 2rem);
}

/* An outlined pill: "Share:" and the networks' marks, in the banner's text
   colour. */
.c-banner__share {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  margin-inline-start: auto;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border: var(--hairline, 1px) solid currentcolor;
  border-radius: var(--radius-sm, 0.25rem);
  font-size: var(--t-small, 0.875rem);
  line-height: 1;
}

.c-banner__share-link {
  display: inline-flex;
  color: inherit;
}

.c-banner__share-link svg {
  width: auto;
  height: 1.125rem;
}

.c-banner__share-link:hover,
.c-banner__share-link:focus-visible {
  opacity: 0.75;
}

@media (max-width: 47.99em) {
  .c-banner__share {
    margin-inline-start: 0;
  }
}
/* The featured image, full width straight under the banner
   (banner.feature-image), cropped to fill no more than its height. */
.c-banner-feature {
  margin: 0;
}

.c-banner-feature__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: var(--banner-feature-height);
  -o-object-fit: cover;
     object-fit: cover;
}

/* banner.overlap. A first panel carrying c-overlap (or grid-facts --overlap) rides up over the banner
   by banner.overlap, and the banner grows by as much underneath, so the
   panel covers only its room and never its text: Thain Wildbur's home and
   "How we work", whose feature row sits half on the navy. Kadence's space
   above the content goes, so the two meet. Nothing changes without the
   class, or where banner.overlap is 0. */
/* stylelint-disable selector-class-pattern -- Kadence's and WordPress's own content classes. */
body:has(.entry-content > :is(.c-overlap, .c-grid-facts--overlap):first-child) .c-banner {
  padding-block-end: calc(min(var(--banner-padding-end), max(var(--space-9), 10vw)) + var(--banner-overlap));
}
body:has(.entry-content > :is(.c-overlap, .c-grid-facts--overlap):first-child) .content-area {
  margin-block-start: 0;
}
body:has(.entry-content > :is(.c-overlap, .c-grid-facts--overlap):first-child) .entry-content-wrap {
  padding-block-start: 0;
}

/* :root:root, over the panels' own block margins (panels/_shared.scss). */
:root:root .entry-content > :is(.c-overlap, .c-grid-facts--overlap):first-child {
  position: relative;
  z-index: 1;
  margin-block-start: calc(-1 * var(--banner-overlap));
}

/* stylelint-enable selector-class-pattern */
/* ==========================================================================
   The frame — how wide the regions of a page are.
   ==========================================================================

   docs/page-model.md: the header and footer sit in the site frame
   (--measure-site), the content and its sidebar inside the banner's width
   (--measure-banner), and the sidebar takes --sidebar-width of it with
   --sidebar-gap between. Kadence has one width for all of these, so a site
   that sets it to the header's width gets content and sidebar that wide too,
   wider than the banner above them.

   Only on .cw-frame, which settings.json puts on <body> when the contract
   states the site width, the banner width and the page edge. A site whose
   theme still sets its own frame is left alone.

   Every width includes the page edge, as Kadence's own does (border-box).
   On a phone the edge is at most 5% of the screen, so 48px of margin doesn't
   take a quarter of it.
   ========================================================================== */
/* stylelint-disable selector-class-pattern -- the frame is Kadence's containers, and cw-frame is the contract's class from settings.json, so the classes are theirs. */
/* The measure as a length fixed where it is set. measure.prose is in ch, so
   read on a heading it would be the heading's 68ch, not the body's; set on a
   panel it keeps the panel's body-text width for every line of text inside. */
@property --reading-measure {
  syntax: "<length>";
  inherits: true;
  initial-value: 100vw;
}
:root .cw-frame :is(#masthead, #colophon) .site-container {
  max-width: calc(var(--measure-site) + 2 * var(--gutter-page-edge));
  padding-inline: min(var(--gutter-page-edge), 5vw);
}

:root .cw-frame .content-container.site-container {
  max-width: calc(var(--measure-banner) + 2 * var(--gutter-page-edge));
  padding-inline: min(var(--gutter-page-edge), 5vw);
}

/* The sidebar's width and gap, where Kadence puts them in a grid. */
@media screen and (min-width: 1025px) {
  :root .cw-frame.has-sidebar .content-container {
    -moz-column-gap: var(--sidebar-gap);
         column-gap: var(--sidebar-gap);
    grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
  }
  :root .cw-frame.has-left-sidebar .content-container {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }
  /* sidebar.divider: rule. A hairline in border.soft down the sidebar's
     content-side edge, then the gap (Thain Wildbur's service pages, whose
     sidebar is on the left). A right sidebar's text keeps a little room
     from its rule. */
  :root .cw-sidebar-divider--rule.has-sidebar #secondary {
    border-inline-start: var(--hairline) solid var(--border-soft);
    padding-inline-start: var(--space-6);
  }
  :root .cw-sidebar-divider--rule.has-left-sidebar #secondary {
    border-inline-start: 0;
    border-inline-end: var(--hairline) solid var(--border-soft);
    padding-inline: 0 var(--space-6);
  }
}
/* A page without a sidebar holds its content to measure.content (the
   contract's measure.content-solo), centred in the banner's width; full and
   wide blocks still run out to their edges. Only where Kadence's own layout
   is normal or full width: a narrow page keeps Kadence's narrower column. */
:root .cw-frame:not(.has-sidebar):is(.content-width-normal, .content-width-fullwidth) .entry-content > :not(.alignfull, .alignwide) {
  max-width: var(--measure-content);
  margin-inline: auto;
}

/* A full-width band keeps its content on the same edge as the content around
   it: the page edge, at most 5% of a phone's screen, not the wider gutter.
   Any full-width panel on a ground takes it, or its text runs to the edge of
   the screen on a phone. */
:root .cw-frame .entry-content > .alignfull:is(.c-strip-facts, .c-band-cta, .c-split-prose, .c-split-figure, .c-band-promo, .c-stack-prose, .c-inset-quotes, [class*=c-ground--]) {
  padding-inline: min(var(--gutter-page-edge), 5vw);
}

/* Beside a sidebar the reading panels take that edge too, full width or not,
   and stop at the measure, so their text lines up with split-prose's
   (panels/_article.scss). */
@media screen and (min-width: 1025px) {
  :root .cw-frame.has-sidebar .entry-content > :is(.c-stack-prose, .c-inset-quotes) {
    padding-inline: min(var(--gutter-page-edge), 5vw) max(min(var(--gutter-page-edge), 5vw), 100% - min(var(--gutter-page-edge), 5vw) - var(--measure-prose));
  }
  /* One left edge beside a sidebar. Grounds, a full-width band or a panel's
     own box, fill the content column; everything printed on the page or on
     a ground starts at the page edge inside it, where the reading panels'
     text starts. Text stops at the measure; grids and cards run on to the
     same edge on the right. */
  :root .cw-frame.has-sidebar .entry-content > :is(.c-grid-facts, .c-cards-guides, .c-cards-hubs, .c-cards-cases, .c-split-cases, .c-rows-stories, .c-cards-people, .c-strip-facts:not(.c-strip-facts--inverse)) {
    padding-inline: min(var(--gutter-page-edge), 5vw);
  }
  :root .cw-frame.has-sidebar .entry-content :is(.c-inset-facts__ground, .c-rows-quotes__ground, .c-strip-facts__ground) {
    padding-inline: min(var(--gutter-page-edge), 5vw);
  }
  :root .cw-frame.has-sidebar .entry-content > * {
    --reading-measure: var(--measure-prose);
  }
  /* The figure's frame fills the content column like a ground; its caption
     is text, so it starts on the page edge with the rest. */
  :root .cw-frame.has-sidebar .entry-content .c-inset-figure__caption {
    padding-inline: min(var(--gutter-page-edge), 5vw);
    max-width: calc(var(--reading-measure) + 2 * min(var(--gutter-page-edge), 5vw));
  }
  /* The panel's own lines of text, not those in its cards or grid: straight
     in the panel or its ground, or in the inner container a classic theme
     wraps round each Group's content (panels/_classic-groups.scss). */
  :root .cw-frame.has-sidebar .entry-content :is(.c-grid-facts, .c-cards-guides, .c-cards-hubs, .c-cards-cases, .c-split-cases, .c-rows-stories, .c-cards-people, .c-strip-facts, .c-inset-facts__ground, .c-rows-quotes__ground, .c-strip-facts__ground) > :is(.c-head, .c-eyebrow, .c-title, .c-lead, .c-sub, .c-body),
  :root .cw-frame.has-sidebar .entry-content :is(.c-grid-facts, .c-cards-guides, .c-cards-hubs, .c-cards-cases, .c-split-cases, .c-rows-stories, .c-cards-people, .c-strip-facts, .c-inset-facts__ground, .c-rows-quotes__ground, .c-strip-facts__ground) > :is(.c-measure, .wp-block-group__inner-container) > :is(.c-head, .c-eyebrow, .c-title, .c-lead, .c-sub, .c-body),
  :root .cw-frame.has-sidebar .entry-content .c-strip-facts > .wp-block-group__inner-container > .c-measure > .wp-block-group__inner-container > .c-head {
    max-width: var(--reading-measure);
  }
}
/* On a page without a sidebar the running copy stops at the measure too,
   from the content column's left edge, so its lines don't run the width of
   the column. The panel's content is held to it, or the content of the
   measure a full-width band holds it in; the measure is set on the panel,
   in its font, as beside a sidebar. */
:root .cw-frame:not(.has-sidebar) .entry-content > .c-stack-prose {
  --reading-measure: var(--measure-prose);
}

:root .cw-frame:not(.has-sidebar) .entry-content > .c-stack-prose:not(:has(.c-measure)) > *,
:root .cw-frame:not(.has-sidebar) .entry-content > .c-stack-prose .c-measure > * {
  max-width: var(--reading-measure);
}

/* ==========================================================================
   No item alone on the last row of a grid.
   ==========================================================================

   The grids of cards and facts put as many in a row as fit at their
   narrowest (panels/_hub.scss, panels/_cards-hubs.scss), so a count can
   leave one item alone on the last row: four run three and one, nine run
   two, two, two, two and one. Where a count would, the grid lays out
   another way:

   - two to a row and an odd count: three to a row where three fit at their
     narrowest (15rem; 13rem for the strip's facts and inset-facts'
     figures), else one under another;
   - three to a row and a count one over a multiple of three: the last four
     go two and two;
   - four to a row and one over a multiple of four: three to a row;
   - five to a row (only the strip, full width) and one over a multiple of
     five: four to a row.

   Three to a row is a wrapping row, and the items after its last full row
   take half the row each, so five run three and two, seven three, two and
   two. Every other count keeps the grid it has. The count is read from the
   last item (one over a multiple of three is :nth-child(3n + 4):last-child),
   so any count is covered, up to five to a row; a row of six or more is
   left as it is.

   By each grid's own width, so a sidebar or a full-width band narrows or
   widens it: the grid's parent is the container. n items fit in a row from
   n times the grid's narrowest item plus n - 1 gaps; each grid lists its
   widths with its rules. In px, as split-prose's are. Only on a site with
   the frame: a theme that sets its own frame keeps its grids as they are.
   ========================================================================== */
:root .cw-frame :has(> :is(.c-grid-facts__list, .c-cards-hubs__grid, .c-cards-cases__grid, .c-cards-guides__grid, .c-inset-facts__grid, .c-strip-facts__grid, .c-rows-stories__cols)) {
  container: c-grid/inline-size;
}

/* The wrapping row, read only where a rule below turns a grid into one:
   each item starts at a little over a quarter of the row and the trailing
   ones at a little over a third, so three, or two, fit with the gaps
   between, and each grows to fill its share. */
:root .cw-frame :is(.c-grid-facts__list, .c-cards-hubs__grid, .c-cards-cases__grid, .c-cards-guides__grid, .c-inset-facts__grid, .c-strip-facts__grid, .c-rows-stories__cols) {
  flex-wrap: wrap;
}

:root .cw-frame :is(.c-grid-facts__list, .c-cards-hubs__grid, .c-cards-cases__grid, .c-cards-guides__grid, .c-inset-facts__grid, .c-strip-facts__grid, .c-rows-stories__cols, :is(.c-grid-facts__list, .c-cards-hubs__grid, .c-cards-cases__grid, .c-cards-guides__grid, .c-inset-facts__grid, .c-strip-facts__grid, .c-rows-stories__cols) > .wp-block-group__inner-container) > * {
  flex: 1 1 26%;
}

/* The items after the last full row of three: the last two of a count two
   over a multiple of three, the last four of one over. */
:root .cw-frame :is(.c-grid-facts__list, .c-cards-hubs__grid, .c-cards-cases__grid, .c-cards-guides__grid, .c-inset-facts__grid, .c-strip-facts__grid, .c-rows-stories__cols, :is(.c-grid-facts__list, .c-cards-hubs__grid, .c-cards-cases__grid, .c-cards-guides__grid, .c-inset-facts__grid, .c-strip-facts__grid, .c-rows-stories__cols) > .wp-block-group__inner-container) > :is(:nth-child(3n+2):last-child, :nth-child(3n+1):nth-last-child(2), :nth-child(3n+1):last-child, :nth-child(3n):nth-last-child(2), :nth-child(3n+2):nth-last-child(3), :nth-child(3n+1):nth-last-child(4)) {
  flex-basis: 34%;
}

/* grid-facts: 19rem facts 48px apart (space.9). Two to a row from 656px,
   three from 1008px, four from 1360px; three of 15rem from 816px. Not a
   grid with a set count (--1, --3), which lays out below, nor one whose
   facts stand in columns (c-grid-facts__col), which sets its own. */
@container c-grid (width < 816px) {
  :root .cw-frame .c-grid-facts__list:not(.c-grid-facts--1 *, .c-grid-facts--3 *, :has(.c-grid-facts__col)):has(> :nth-child(2n+3):last-child, > .wp-block-group__inner-container > :nth-child(2n+3):last-child) {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container c-grid (816px <= width < 1008px) {
  :root .cw-frame .c-grid-facts__list:not(.c-grid-facts--1 *, .c-grid-facts--3 *, :has(.c-grid-facts__col)):has(> :nth-child(2n+3):last-child, > .wp-block-group__inner-container > :nth-child(2n+3):last-child) {
    display: flex;
  }
}
@container c-grid (1008px <= width < 1360px) {
  :root .cw-frame .c-grid-facts__list:not(.c-grid-facts--1 *, .c-grid-facts--3 *, :has(.c-grid-facts__col)):has(> :nth-child(3n+4):last-child, > .wp-block-group__inner-container > :nth-child(3n+4):last-child) {
    display: flex;
  }
}
@container c-grid (1360px <= width < 1712px) {
  :root .cw-frame .c-grid-facts__list:not(.c-grid-facts--1 *, .c-grid-facts--3 *, :has(.c-grid-facts__col)):has(> :nth-child(4n+5):last-child, > .wp-block-group__inner-container > :nth-child(4n+5):last-child) {
    display: flex;
  }
}
/* grid-facts --3: three across from 48em, so a count one over a multiple of
   three ends on its last four two and two. One under another below 48em,
   and --1 always, leave no item alone. */
@media (min-width: 48em) {
  :root .cw-frame .c-grid-facts--3 .c-grid-facts__list:has(> :nth-child(3n+4):last-child, > .wp-block-group__inner-container > :nth-child(3n+4):last-child) {
    display: flex;
  }
}
/* cards-hubs: 16rem cards 24px apart (space.6). Two from 536px, three from
   816px, four from 1096px, five from 1376px; three of 15rem from 768px. */
@container c-grid (width < 768px) {
  :root .cw-frame .c-cards-hubs__grid:has(> :nth-child(2n+3):last-child, > .wp-block-group__inner-container > :nth-child(2n+3):last-child) {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container c-grid (768px <= width < 816px) {
  :root .cw-frame .c-cards-hubs__grid:has(> :nth-child(2n+3):last-child, > .wp-block-group__inner-container > :nth-child(2n+3):last-child) {
    display: flex;
  }
}
@container c-grid (816px <= width < 1096px) {
  :root .cw-frame .c-cards-hubs__grid:has(> :nth-child(3n+4):last-child, > .wp-block-group__inner-container > :nth-child(3n+4):last-child) {
    display: flex;
  }
}
@container c-grid (1096px <= width < 1376px) {
  :root .cw-frame .c-cards-hubs__grid:has(> :nth-child(4n+5):last-child, > .wp-block-group__inner-container > :nth-child(4n+5):last-child) {
    display: flex;
  }
}
/* cards-cases: 19rem cards 20px apart (space.5). Two from 628px, three from
   952px, four from 1276px; three of 15rem from 760px. A grid that ends on
   a wide card, which takes its own row, is left as it is, and so is --1,
   which sets one case across. */
@container c-grid (width < 760px) {
  :root .cw-frame .c-cards-cases__grid:not(.c-cards-cases--1 *):has(> :nth-child(2n+3):last-child:not(.c-cards-cases__wide), > .wp-block-group__inner-container > :nth-child(2n+3):last-child:not(.c-cards-cases__wide)) {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container c-grid (760px <= width < 952px) {
  :root .cw-frame .c-cards-cases__grid:not(.c-cards-cases--1 *):has(> :nth-child(2n+3):last-child:not(.c-cards-cases__wide), > .wp-block-group__inner-container > :nth-child(2n+3):last-child:not(.c-cards-cases__wide)) {
    display: flex;
  }
}
@container c-grid (952px <= width < 1276px) {
  :root .cw-frame .c-cards-cases__grid:not(.c-cards-cases--1 *):has(> :nth-child(3n+4):last-child:not(.c-cards-cases__wide), > .wp-block-group__inner-container > :nth-child(3n+4):last-child:not(.c-cards-cases__wide)) {
    display: flex;
  }
}
@container c-grid (1276px <= width < 1600px) {
  :root .cw-frame .c-cards-cases__grid:not(.c-cards-cases--1 *):has(> :nth-child(4n+5):last-child:not(.c-cards-cases__wide), > .wp-block-group__inner-container > :nth-child(4n+5):last-child:not(.c-cards-cases__wide)) {
    display: flex;
  }
}
/* cards-guides: 16rem cards 20px apart (space.5). Two from 532px, three
   from 808px, four from 1084px; three of 15rem from 760px. Not --1 or --4,
   which set their own count, or --2, which lays out below. */
@container c-grid (width < 760px) {
  :root .cw-frame .c-cards-guides__grid:not(.c-cards-guides--1 *, .c-cards-guides--2 *, .c-cards-guides--4 *):has(> :nth-child(2n+3):last-child, > .wp-block-group__inner-container > :nth-child(2n+3):last-child) {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container c-grid (760px <= width < 808px) {
  :root .cw-frame .c-cards-guides__grid:not(.c-cards-guides--1 *, .c-cards-guides--2 *, .c-cards-guides--4 *):has(> :nth-child(2n+3):last-child, > .wp-block-group__inner-container > :nth-child(2n+3):last-child) {
    display: flex;
  }
}
@container c-grid (808px <= width < 1084px) {
  :root .cw-frame .c-cards-guides__grid:not(.c-cards-guides--1 *, .c-cards-guides--2 *, .c-cards-guides--4 *):has(> :nth-child(3n+4):last-child, > .wp-block-group__inner-container > :nth-child(3n+4):last-child) {
    display: flex;
  }
}
@container c-grid (1084px <= width < 1360px) {
  :root .cw-frame .c-cards-guides__grid:not(.c-cards-guides--1 *, .c-cards-guides--2 *, .c-cards-guides--4 *):has(> :nth-child(4n+5):last-child, > .wp-block-group__inner-container > :nth-child(4n+5):last-child) {
    display: flex;
  }
}
/* cards-guides --2: 20rem articles 32px apart (space.7). Two from 672px,
   three from 1024px, four from 1376px; three of 15rem from 784px. */
@container c-grid (width < 784px) {
  :root .cw-frame .c-cards-guides--2 .c-cards-guides__grid:has(> :nth-child(2n+3):last-child, > .wp-block-group__inner-container > :nth-child(2n+3):last-child) {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container c-grid (784px <= width < 1024px) {
  :root .cw-frame .c-cards-guides--2 .c-cards-guides__grid:has(> :nth-child(2n+3):last-child, > .wp-block-group__inner-container > :nth-child(2n+3):last-child) {
    display: flex;
  }
}
@container c-grid (1024px <= width < 1376px) {
  :root .cw-frame .c-cards-guides--2 .c-cards-guides__grid:has(> :nth-child(3n+4):last-child, > .wp-block-group__inner-container > :nth-child(3n+4):last-child) {
    display: flex;
  }
}
@container c-grid (1376px <= width < 1728px) {
  :root .cw-frame .c-cards-guides--2 .c-cards-guides__grid:has(> :nth-child(4n+5):last-child, > .wp-block-group__inner-container > :nth-child(4n+5):last-child) {
    display: flex;
  }
}
/* inset-facts: 13rem figures 16px apart (space.4), 13rem their narrowest.
   Two from 432px, three from 656px, four from 880px. */
@container c-grid (width < 656px) {
  :root .cw-frame .c-inset-facts__grid:has(> :nth-child(2n+3):last-child, > .wp-block-group__inner-container > :nth-child(2n+3):last-child) {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container c-grid (656px <= width < 880px) {
  :root .cw-frame .c-inset-facts__grid:has(> :nth-child(3n+4):last-child, > .wp-block-group__inner-container > :nth-child(3n+4):last-child) {
    display: flex;
  }
}
@container c-grid (880px <= width < 1104px) {
  :root .cw-frame .c-inset-facts__grid:has(> :nth-child(4n+5):last-child, > .wp-block-group__inner-container > :nth-child(4n+5):last-child) {
    display: flex;
  }
}
/* strip-facts: 14rem facts 40px apart (space.8). Two from 488px, three from
   752px, four from 1016px, five from 1280px; three of 13rem from 704px. Not
   the divided strip, whose cells are ruled for one row, or its three-up
   grid. */
@container c-grid (width < 704px) {
  :root .cw-frame .c-strip-facts__grid:not(.c-strip-facts__grid--3, .c-strip-facts--divided *):has(> :nth-child(2n+3):last-child, > .wp-block-group__inner-container > :nth-child(2n+3):last-child) {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container c-grid (704px <= width < 752px) {
  :root .cw-frame .c-strip-facts__grid:not(.c-strip-facts__grid--3, .c-strip-facts--divided *):has(> :nth-child(2n+3):last-child, > .wp-block-group__inner-container > :nth-child(2n+3):last-child) {
    display: flex;
  }
}
@container c-grid (752px <= width < 1016px) {
  :root .cw-frame .c-strip-facts__grid:not(.c-strip-facts__grid--3, .c-strip-facts--divided *):has(> :nth-child(3n+4):last-child, > .wp-block-group__inner-container > :nth-child(3n+4):last-child) {
    display: flex;
  }
}
@container c-grid (1016px <= width < 1280px) {
  :root .cw-frame .c-strip-facts__grid:not(.c-strip-facts__grid--3, .c-strip-facts--divided *):has(> :nth-child(4n+5):last-child, > .wp-block-group__inner-container > :nth-child(4n+5):last-child) {
    display: flex;
  }
}
@container c-grid (1280px <= width < 1544px) {
  :root .cw-frame .c-strip-facts__grid:not(.c-strip-facts__grid--3, .c-strip-facts--divided *):has(> :nth-child(5n+6):last-child, > .wp-block-group__inner-container > :nth-child(5n+6):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* rows-stories' columns: 15rem 40px apart (space.8), 15rem their
   narrowest. Two from 520px, three from 800px, four from 1080px. */
@container c-grid (width < 800px) {
  :root .cw-frame .c-rows-stories__cols:has(> :nth-child(2n+3):last-child, > .wp-block-group__inner-container > :nth-child(2n+3):last-child) {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container c-grid (800px <= width < 1080px) {
  :root .cw-frame .c-rows-stories__cols:has(> :nth-child(3n+4):last-child, > .wp-block-group__inner-container > :nth-child(3n+4):last-child) {
    display: flex;
  }
}
@container c-grid (1080px <= width < 1360px) {
  :root .cw-frame .c-rows-stories__cols:has(> :nth-child(4n+5):last-child, > .wp-block-group__inner-container > :nth-child(4n+5):last-child) {
    display: flex;
  }
}
/* ==========================================================================
   Imported rows: columns that wrap.
   ==========================================================================

   tools/wp/import-pages.php turns a Kadence row into a cw-imported-row group
   of core columns, and a row inside a column into columns inside a column
   (an icon beside its text, three across). Core columns never wrap above
   782px, so a nested row gets a few words' width and its text runs down the
   page a letter at a time (Demand Definition's about pages, 13 October).

   Here a column is never narrower than 12rem: a row wraps to
   the next line before that, and a nested row stacks. Only on imported rows,
   which a redesigned page replaces with panels.
   ========================================================================== */
/* stylelint-disable selector-class-pattern -- wp-block-columns is core's class; cw-imported-row is the importer's. */
:root:root :is(.cw-imported-row, .cw-imported-row > .wp-block-group__inner-container) > .wp-block-columns {
  flex-wrap: wrap !important; /* stylelint-disable-line declaration-no-important -- core's own nowrap above 782px is !important. */
}

:root:root :is(.cw-imported-row, .cw-imported-row > .wp-block-group__inner-container) > .wp-block-columns > .wp-block-column {
  flex: 1 1 12rem;
  min-width: 0;
}

/* ==========================================================================
   Elements — the content's own elements, styled from the contract.
   ==========================================================================

   Links, quotes, captions, code, tables, list markers, images, form fields,
   the focus ring, and the main navigation's hover and current rules. Each
   has roles in the contract (fg.link-hover, link.rule, field.*, focus.*,
   nav.hover-*); without this file they reach the page only where a panel
   happens to read them.

   Only on .cw-content-elements--contract, the class for content.elements:
   contract. A site whose theme already styles its content (Ascendant) has
   content.elements: theme, and none of this applies. Every role used here
   has a default in settings/_panel-roles.scss, so an empty role keeps the
   element readable.

   Specificity: one class and an element or two, enough to beat Kadence's
   element rules; Row Panels sit under :root:root and win over these.
   ========================================================================== */
/* stylelint-disable selector-class-pattern -- Kadence's containers and menus, WordPress's menu classes, and the contract's own body class. */
.cw-content-elements--contract {
  /* A Kadence button's label on hover (see Kadence's hover colours, below). */
  --global-palette-btn-hover: var(--action-primary-fg-hover);
  --global-palette-btn-sec-hover: var(--action-primary-fg-hover);
  /* Focus: a visible ring on anything focused from the keyboard. */
}
.cw-content-elements--contract :focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.cw-content-elements--contract {
  /* An empty paragraph, the one the editor leaves when Enter is pressed at
     the end of a block, takes no room: its margin opened an 80px gap in a
     Row Panel's text (Demand Definition, the-big-conversion-idea). */
}
.cw-content-elements--contract .entry-content p:empty {
  display: none;
}
.cw-content-elements--contract {
  /* Links in content. Buttons and panels draw their own. */
}
.cw-content-elements--contract .entry-content a:not([class]) {
  color: var(--fg-link);
  text-decoration-color: var(--link-rule);
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-rule-thickness);
  text-underline-offset: var(--link-rule-offset);
  transition: background-color var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard);
}
.cw-content-elements--contract .entry-content a:not([class]):visited {
  color: var(--fg-link-visited);
}
.cw-content-elements--contract .entry-content a:not([class]):hover {
  background-color: var(--link-hover-flood);
  color: var(--fg-link-hover);
}
.cw-content-elements--contract {
  /* On a dark or coloured ground a link keeps that ground's link colour on
     hover, with no wash: the wash and the hover colour are drawn for the
     page's light grounds, and dark text on a wash over a dark ground can't
     be read. */
}
.cw-content-elements--contract .entry-content :is(.c-ground--inverse, .c-ground--accent, .c-ground--hub) a:not([class]):hover {
  background-color: transparent;
  color: var(--fg-link);
}
.cw-content-elements--contract {
  /* Kadence's own hover and focus colours. Its a:hover and a:focus paint a
     link in --global-palette-highlight-alt, and its buttons on hover paint
     their label in --global-palette-btn-hover (and the secondary and
     outline buttons' equivalents), from rules that load after this
     stylesheet. Those are palette slots, and the slot behind the link hover
     holds the contract's light button-hover ground, so any link or button
     without a hover colour of its own went near-white on the page. A link
     keeps its ground's link colour instead, set on the link so a ground's
     own link colour reaches it; a button's label takes the primary
     action's hover colour (at the top of this block), on Kadence's light
     hover ground. The palette itself is unchanged. */
}
.cw-content-elements--contract a {
  --global-palette-highlight-alt: var(--fg-link);
}
.cw-content-elements--contract :is(.wp-block-button__link, .wp-element-button, .button) {
  --global-palette-btn-out-hover: var(--fg-link);
}
.cw-content-elements--contract {
  /* Links drawn as filled buttons keep their label colour when focused. */
}
.cw-content-elements--contract :is(.c-banner__button--primary, .c-banner__media-link) {
  --global-palette-highlight-alt: var(--action-primary-fg);
}
.cw-content-elements--contract {
  /* Quotes, captions, citations. */
}
.cw-content-elements--contract .entry-content :is(blockquote, .wp-block-quote, .wp-block-pullquote) {
  border-inline-start: var(--card-border-width) solid var(--border-quote);
  color: var(--fg-quote);
}
.cw-content-elements--contract .entry-content :is(cite, .wp-block-quote cite, .wp-block-pullquote cite) {
  color: var(--fg-cite);
}
.cw-content-elements--contract .entry-content :is(figcaption, .wp-element-caption) {
  color: var(--fg-caption);
}
.cw-content-elements--contract {
  /* Code. */
}
.cw-content-elements--contract .entry-content :is(code, kbd, pre) {
  background-color: var(--surface-code);
  font-family: var(--font-mono);
}
.cw-content-elements--contract {
  /* Tables. */
}
.cw-content-elements--contract .entry-content :is(th, thead td) {
  background-color: var(--surface-table-header);
}
.cw-content-elements--contract .entry-content :is(table, th, td) {
  border-color: var(--border-table);
}
.cw-content-elements--contract {
  /* List markers: the colour here, the shape by list.marker below. */
}
.cw-content-elements--contract .entry-content li::marker {
  color: var(--list-marker-color);
}
.cw-content-elements--contract {
  /* Images in content. */
}
.cw-content-elements--contract .entry-content :is(.wp-block-image, .wp-block-media-text__media) img {
  border-radius: var(--image-radius);
  box-shadow: var(--shadow-image);
}
.cw-content-elements--contract {
  /* Form fields. */
}
.cw-content-elements--contract :is(input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=hidden]), select, textarea) {
  background-color: var(--field-bg);
  border: var(--hairline) solid var(--field-border);
  border-radius: var(--field-radius);
  color: var(--field-fg);
  min-height: var(--field-height);
  transition: border-color var(--motion-base) var(--ease-standard);
}
.cw-content-elements--contract :is(input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=hidden]), select, textarea):focus {
  border-color: var(--field-border-focus);
}
.cw-content-elements--contract :is(input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=hidden]), select, textarea)::-moz-placeholder {
  color: var(--fg-placeholder);
}
.cw-content-elements--contract :is(input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=hidden]), select, textarea)::placeholder {
  color: var(--fg-placeholder);
}
.cw-content-elements--contract textarea {
  min-height: calc(3 * var(--field-height));
}
.cw-content-elements--contract label {
  color: var(--fg-label);
  font-weight: var(--fw-medium);
}
.cw-content-elements--contract :is(button, input[type=submit], .wp-block-button__link):disabled {
  background-color: var(--action-disabled-bg);
  color: var(--action-disabled-fg);
}
.cw-content-elements--contract {
  /* Messages from a form: Gravity Forms' and WordPress's own. */
}
.cw-content-elements--contract :is(.gform_validation_errors, .validation_message, .wp-block-search__error) {
  background-color: var(--status-error-bg);
  color: var(--status-error-fg);
}
.cw-content-elements--contract :is(.gform_confirmation_message) {
  background-color: var(--status-success-bg);
  color: var(--status-success-fg);
}
.cw-content-elements--contract {
  /* The main navigation: a flood and a rule on hover, a rule under the
     current item. Kadence's menu, or WordPress's page list in its place. */
}
.cw-content-elements--contract .main-navigation .primary-menu-container > ul > li > a {
  text-decoration-thickness: var(--link-rule-thickness);
  text-underline-offset: var(--link-rule-offset);
  transition: background-color var(--motion-base) var(--ease-standard), text-decoration-color var(--motion-base) var(--ease-standard);
}
.cw-content-elements--contract .main-navigation .primary-menu-container > ul > li > a:hover {
  background-color: var(--nav-hover-flood);
  text-decoration-color: var(--nav-hover-rule);
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  text-decoration-line: underline;
}
.cw-content-elements--contract {
  /* An item that leads into a hub carries the hub's class in Menus
     (cw-hub--market), which re-points the nav roles to the hub's colour:
     its hover rule takes that colour too. */
}
.cw-content-elements--contract .main-navigation .primary-menu-container > ul > li[class*=cw-hub--] {
  --nav-hover-rule: var(--nav-rule-current);
}
.cw-content-elements--contract {
  /* The trail above the current page, in the section menu. */
}
.cw-content-elements--contract .c-context-menu__list li.current_page_ancestor > a {
  color: var(--fg-nav-ancestor);
}

.cw-content-elements--contract.cw-nav-current-style--underline .main-navigation .primary-menu-container > ul > :is(.current-menu-item, .current_page_item, .current-menu-ancestor, .current_page_ancestor, .current-page-ancestor) > a {
  text-decoration-color: var(--nav-rule-current);
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  text-decoration-line: underline;
  /* Twice the hover rule's weight, so the page you are on stands out. */
  text-decoration-thickness: calc(var(--link-rule-thickness) * 2);
  text-underline-offset: calc(var(--link-rule-offset) + 0.2em);
}

/* list.marker: square. On core lists, which carry wp-block-list, and on lists
   with no class. A list with a panel's class (c-bullets, c-card__points) or a
   block style (is-style-checks) draws its own marker and is left alone. */
.cw-content-elements--contract.cw-list-marker--square .entry-content ul:is(:not([class]), .wp-block-list:not([class^=c-], [class*=" c-"], [class*=is-style-])) {
  list-style-type: square;
}

/* ==========================================================================
   Chrome: the header's and footer's treatments.
   ==========================================================================

   nav.cta and footer.ground are treatments: the contract's choice becomes a
   class on <body> (includes/treatments.php) and these rules answer it. A
   site that leaves them empty gets no class and none of this.

   Specificity: the body class, then Kadence's own selector for the thing,
   so these win over Kadence's header and footer settings.
   ========================================================================== */
/* stylelint-disable selector-class-pattern -- Kadence's header and footer, WordPress's menu classes, and the contract's own body classes. */
/* nav.cta: button. The navigation ends in the primary action: its last
   top-level item, or any item given the class cw-nav-cta in Menus. :root
   lifts it above Kadence's current-item colour, which would otherwise paint
   the button's text in its own background colour on the page it links to. */
:root .cw-nav-cta--button .main-navigation .primary-menu-container > ul > li:is(:last-child, .cw-nav-cta) > a {
  align-self: center;
  margin-inline-start: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: var(--action-border-width) solid var(--action-primary-bg);
  border-radius: var(--action-radius);
  background-color: var(--action-primary-bg);
  box-shadow: var(--action-shadow);
  color: var(--action-primary-fg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-decoration-line: none;
  transition: background-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard);
}
:root .cw-nav-cta--button .main-navigation .primary-menu-container > ul > li:is(:last-child, .cw-nav-cta) > a:hover, :root .cw-nav-cta--button .main-navigation .primary-menu-container > ul > li:is(:last-child, .cw-nav-cta) > a:focus-visible {
  background-color: var(--action-primary-bg-hover);
  box-shadow: var(--action-shadow-hover);
  color: var(--action-primary-fg-hover);
  text-decoration-line: none;
}

/* Kadence gives a footer widget's list items their own line height
   (.widget li); the footer columns keep the contract's. */
:root .site-footer .cw-footer-links :is(li, a) {
  line-height: inherit;
}

/* header.divider: rule. A rule under the whole header, as wide and dark as
   a card's border. */
.cw-header-divider--rule #masthead {
  border-block-end: var(--card-border-width) solid var(--border-card);
}

/* footer.ground. The footer re-points the colour roles as a panel ground
   does (panels/_grounds.scss), then Kadence's text, headings, links and the
   rule above the bottom row follow them. page is the default and needs
   nothing. */
.cw-footer-ground--sunken .site-footer {
  background-color: var(--surface-sunken);
}

.cw-footer-ground--inverse .site-footer {
  --fg-strong: var(--fg-on-dark);
  --fg-medium: var(--fg-on-dark-soft);
  --fg-muted: var(--fg-on-dark-soft);
  --fg-link: var(--fg-link-on-dark);
  --border-faint: var(--border-on-dark);
  background-color: var(--surface-inverse);
}

.cw-footer-ground--accent .site-footer {
  --fg-strong: var(--fg-on-accent);
  --fg-medium: var(--fg-on-accent-soft);
  --fg-muted: var(--fg-on-accent-soft);
  --fg-link: var(--fg-on-accent);
  --border-faint: var(--border-on-dark);
  background-color: var(--surface-accent, var(--action-primary-bg));
}

:is(.cw-footer-ground--sunken, .cw-footer-ground--inverse, .cw-footer-ground--accent) .site-footer {
  color: var(--fg-medium);
}
:is(.cw-footer-ground--sunken, .cw-footer-ground--inverse, .cw-footer-ground--accent) .site-footer :is(h2, h3, h4, h5, h6, .widget-title, .wp-block-heading) {
  color: var(--fg-medium);
}
:is(.cw-footer-ground--sunken, .cw-footer-ground--inverse, .cw-footer-ground--accent) .site-footer :is(a, a:visited) {
  color: var(--fg-link);
}
:is(.cw-footer-ground--sunken, .cw-footer-ground--inverse, .cw-footer-ground--accent) .site-footer a:hover {
  color: var(--fg-link);
  text-decoration-color: var(--link-rule);
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
:is(.cw-footer-ground--sunken, .cw-footer-ground--inverse, .cw-footer-ground--accent) .site-footer .site-footer-row-container-inner {
  background-color: transparent;
}
:is(.cw-footer-ground--sunken, .cw-footer-ground--inverse, .cw-footer-ground--accent) .site-footer .site-bottom-footer-wrap .site-footer-row-container-inner {
  border-block-start-color: var(--border-faint);
}

/* The footer's columns, as the site script lays them out
   (clients/<client>/pages/site/site.php): a small heading over a plain list
   of links, a tagline under the logo, and the policy links on the right of
   the bottom row. Any ground. */
.site-footer .cw-footer-heading {
  margin: 0 0 var(--space-3);
  font-size: var(--t-label);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  letter-spacing: 0;
  color: var(--fg-medium);
}
.site-footer .cw-footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  color: var(--fg-medium);
}
.site-footer .cw-footer-links li + li {
  margin-block-start: var(--space-3);
}
.site-footer .cw-footer-links a {
  color: var(--fg-strong);
  text-decoration: none;
}
.site-footer .cw-footer-links a:hover {
  text-decoration-line: underline;
  text-decoration-color: var(--link-rule);
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
.site-footer .cw-footer-tagline {
  max-width: 22rem;
  margin: var(--space-3) 0 0;
  font-size: var(--t-small);
  line-height: var(--lh-relaxed);
  color: var(--fg-medium);
}
.site-footer .cw-footer-policies {
  margin: 0;
  font-size: var(--t-small);
  text-align: end;
}
.site-footer .cw-footer-policies a {
  color: var(--fg-medium);
  text-decoration: none;
}
@media (max-width: 47.99em) {
  .site-footer .cw-footer-policies {
    text-align: start;
  }
}

/* The logo at the head of the footer's first column: a light version for a
   dark footer (the site logo's own lettering may be dark), as wide as the
   column allows. */
.site-footer .cw-footer-brand {
  margin: 0;
}

.site-footer .cw-footer-logo {
  display: block;
  width: min(100%, 13.5rem);
  height: auto;
}

/* The footer's extra blocks (footer.json's nav, newsletter, contact, address
   and socials; includes/adapters/kadence-chrome.php). Only a footer set with
   them carries these classes. */
/* The footer navigation, beside the logo: the top level of the header menu,
   in a row, in a footer that carries the extra blocks. Kadence colours it from #colophon in a style printed after this
   stylesheet, so :root lifts these over it. */
:root #colophon:has(.cw-footer-newsletter, .cw-footer-contact) .footer-navigation .footer-menu-container > ul > li > a {
  color: var(--fg-strong);
  font-family: var(--font-heading);
  font-size: var(--t-small, 0.875rem);
  font-weight: var(--fw-semi, 600);
  text-decoration: none;
}

/* nav.current-style: outline, as the header draws it. */
/* stylelint-disable-next-line no-descending-specificity -- one link, two states. */
:root .cw-nav-current-style--outline #colophon:has(.cw-footer-newsletter, .cw-footer-contact) .footer-navigation .footer-menu-container > ul > :is(.current-menu-item, .current_page_item, .current-menu-ancestor, .current_page_ancestor) > a {
  border: calc(var(--hairline) * 2) solid var(--fg-link);
  border-radius: var(--radius-sm);
  color: var(--fg-link);
}

/* The newsletter bar: its line and a button, on footer.newsletter-ground,
   across the footer. It carries c-ground--page, so its text takes the light
   ground's colours inside a dark footer. */
.site-footer .cw-footer-newsletter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
  padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
  border-radius: var(--radius-sm, 0.25rem);
  text-align: start;
}

.cw-footer-newsletter-ground--sunken .site-footer .cw-footer-newsletter {
  background: var(--surface-sunken);
}

.cw-footer-newsletter-ground--page .site-footer .cw-footer-newsletter {
  background: var(--surface-page);
}

.site-footer .cw-footer-newsletter__text {
  margin: 0;
  color: var(--fg-strong);
  font-family: var(--font-heading);
  font-size: var(--t-h3, 1.25rem);
  font-weight: var(--fw-bold, 700);
  line-height: var(--lh-tight, 1.2);
}

.site-footer .cw-footer-newsletter__button {
  padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
  border-radius: var(--action-radius, 0.25rem);
  background-color: var(--action-primary-bg);
  color: var(--action-primary-fg);
  font-size: var(--t-small, 0.875rem);
  font-weight: var(--fw-semi, 600);
  text-decoration: none;
}

/* The contact lines, large, then the address under a rule. */
.site-footer .cw-footer-contact__line {
  margin: 0;
  color: var(--fg-strong);
  font-size: var(--t-h3, 1.25rem);
  line-height: var(--lh-snug, 1.3);
}

:root .site-footer .cw-footer-contact__line a {
  color: inherit;
  text-decoration: none;
}

.site-footer .cw-footer-address {
  max-width: 24rem;
  margin: var(--space-3, 0.75rem) 0 0;
  padding-block-start: var(--space-3, 0.75rem);
  border-block-start: var(--hairline, 1px) solid var(--border-faint);
  color: var(--fg-strong);
  font-size: var(--t-small, 0.875rem);
}

/* The social links, plain marks in the footer's quiet text colour, where the
   footer carries the extra blocks. */
.site-footer .site-bottom-footer-inner-wrap:has(.cw-footer-contact) .footer-social-item {
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-muted);
}

/* The bottom row's right side, when the footer has the extra blocks: the
   social links, the bottom links and the copyright, stacked, at the end. */
.site-footer .site-bottom-footer-inner-wrap:has(.cw-footer-contact) .site-footer-section:last-child {
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2, 0.5rem);
  font-size: var(--t-label, 0.8125rem);
  text-align: end;
}

@media (max-width: 47.99em) {
  .site-footer .site-bottom-footer-inner-wrap:has(.cw-footer-contact) .site-footer-section:last-child {
    align-items: flex-start;
    text-align: start;
  }
}
/* section.divider: the line after the content, before the related cards and
   the closing band (includes/adapters/kadence.php). The wave runs the page's
   full width, as a thin line in the accent border colour; the rule sits in
   the content's width. */
.c-divider {
  padding-block: var(--space-10, 4rem);
  color: var(--border-accent);
}

.c-divider svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1649/40;
}

.c-divider--rule {
  max-width: var(--measure-banner, 75rem);
  margin-inline: auto;
  padding-block: 0;
  margin-block: var(--space-10, 4rem);
  border-block-start: var(--hairline, 1px) solid var(--border-faint);
}

/* ==========================================================================
   The live panel library (includes/panel-library.php): the guide above the
   panels, and the label over each one. Only on .cw-panel-library.
   ========================================================================== */
/* stylelint-disable selector-class-pattern -- the library's own page class and labels. */
.cw-panel-library {
  /* The library sits in Kadence's full-width content area, which has no
     padding of its own unless the contract switches the frame on
     (.cw-frame). Without it the guide, the labels and the section panels
     ran to the screen edge (Ascendant, 18 October). */
}
.cw-panel-library .cw-pl-guide,
.cw-panel-library .cw-pl-label {
  max-width: var(--measure-content);
  margin-inline: auto;
}
.cw-panel-library {
  /* A section panel (one that isn't alignfull) is drawn for a page's
     content column, which brings the margin. The library has no column
     without the frame, so it gives the guide, the labels and every section
     panel one; full-width panels still bleed. This page only: no other
     page on the site changes. */
}
.cw-panel-library:not(.cw-frame) .entry-content > :not(.alignfull) {
  width: min(var(--measure-content), 100% - 2 * var(--gutter, 1.25rem));
  margin-inline: auto;
}
.cw-panel-library .cw-pl-guide {
  padding-block: var(--space-9) var(--space-7);
}
.cw-panel-library .cw-pl-h2 {
  margin: var(--space-8) 0 var(--space-4);
  font-size: var(--t-h3);
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
}
.cw-panel-library .cw-pl-rules {
  margin: var(--space-6) 0 0;
  padding-inline-start: 1.25em;
  color: var(--fg-medium);
}
.cw-panel-library .cw-pl-rules li + li {
  margin-block-start: var(--space-2);
}
.cw-panel-library .cw-pl-api,
.cw-panel-library .cw-pl-notes {
  font-size: var(--t-small);
  color: var(--fg-muted);
}
.cw-panel-library code {
  padding: 0;
  background: none;
  color: inherit;
  font-family: var(--font-mono);
  font-size: 0.875em;
}
.cw-panel-library .cw-pl-swatches,
.cw-panel-library .cw-pl-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-3) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-small);
}
.cw-panel-library .cw-pl-swatches li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.cw-panel-library .cw-pl-chip {
  flex: none;
  width: 2rem;
  height: 2rem;
  border: var(--hairline) solid var(--border-faint);
}
.cw-panel-library .cw-pl-chip--surface-page {
  background: var(--surface-page);
}
.cw-panel-library .cw-pl-chip--surface-sunken {
  background: var(--surface-sunken);
}
.cw-panel-library .cw-pl-chip--surface-inverse {
  background: var(--surface-inverse);
}
.cw-panel-library .cw-pl-chip--surface-accent {
  background: var(--surface-accent);
}
.cw-panel-library .cw-pl-chip--surface-hub {
  background: var(--surface-hub);
}
.cw-panel-library .cw-pl-chip--fg-strong {
  background: var(--fg-strong);
}
.cw-panel-library .cw-pl-chip--fg-medium {
  background: var(--fg-medium);
}
.cw-panel-library .cw-pl-chip--fg-muted {
  background: var(--fg-muted);
}
.cw-panel-library .cw-pl-chip--fg-link {
  background: var(--fg-link);
}
.cw-panel-library .cw-pl-chip--action-primary-bg {
  background: var(--action-primary-bg);
}
.cw-panel-library .cw-pl-chip--border-card {
  background: var(--border-card);
}
.cw-panel-library .cw-pl-type p {
  margin: 0 0 var(--space-3);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}
.cw-panel-library .cw-pl-type code {
  display: block;
  font-size: var(--t-small);
  color: var(--fg-muted);
}
.cw-panel-library .cw-pl-type--t-hero {
  font-size: var(--t-hero);
}
.cw-panel-library .cw-pl-type--t-section {
  font-size: var(--t-section);
}
.cw-panel-library .cw-pl-type--t-h3 {
  font-size: var(--t-h3);
}
.cw-panel-library .cw-pl-type--t-lead {
  font-size: var(--t-lead);
}
.cw-panel-library .cw-pl-type--t-body {
  font-size: var(--t-body);
}
.cw-panel-library .cw-pl-type--t-small {
  font-size: var(--t-small);
}
.cw-panel-library .cw-pl-grounds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-4);
}
.cw-panel-library .cw-pl-ground {
  padding: var(--space-5);
  border: var(--hairline) solid var(--border-faint);
}
.cw-panel-library .cw-pl-ground p {
  margin: 0 0 var(--space-2);
}
.cw-panel-library .cw-pl-ground a {
  color: var(--fg-link);
  text-decoration-line: underline;
  text-decoration-color: var(--link-rule);
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
.cw-panel-library .cw-pl-ground code {
  font-size: var(--t-small);
  opacity: 0.8;
}
.cw-panel-library .cw-pl-label {
  margin-block-start: var(--space-10);
  padding-block: var(--space-4);
  border-block-start: var(--hairline) dashed var(--border-faint);
}
.cw-panel-library .cw-pl-label .cw-pl-h2 {
  margin-block-start: 0;
}
.cw-panel-library .cw-pl-label p {
  margin: var(--space-1) 0 0;
}

/* ==========================================================================
   Row Panels — the approved panel library.
   ==========================================================================

   The Panel files in patterns/ carry the markup; these rules carry the look,
   read entirely from the contract's roles. Grounds come first so every Panel after
   them can sit on one.

   The Panel rules sit under :root:root, two classes above a theme's content
   rules such as .single-content .wp-block-group, so they win whatever order
   the stylesheets load in. Grounds and the :where() rules stay at zero on
   purpose.
   ========================================================================== */
/* ==========================================================================
   Grounds — a surface re-points the colour roles for everything inside it.
   ==========================================================================

   A Panel never names a colour for its surface; it takes a ground class and
   its text, links and lines follow. These are the plain versions. A client's
   token layer states its own grounds, and :where() lets those win.
   ========================================================================== */
:where(.c-ground--sunken) {
  background: var(--surface-sunken, var(--surface-page));
}

:where(.c-ground--raised) {
  --fg-muted: var(--fg-medium);
  background: var(--surface-page);
}

:where(.c-ground--inverse) {
  --fg-strong: var(--fg-on-dark);
  --fg-medium: var(--fg-on-dark-soft);
  --fg-secondary: var(--fg-on-dark-soft);
  --fg-muted: var(--fg-on-dark-soft);
  --fg-eyebrow: var(--fg-emphasis-on-dark);
  --fg-link: var(--fg-link-on-dark);
  --border-faint: var(--border-on-dark);
  --border-card: var(--border-on-dark);
  --shadow-card-tinted: none;
  background: var(--gradient-hero, var(--surface-inverse));
  color: var(--fg-on-dark);
}

/* A light card inside a dark band. The light-ground roles it restores are
   declared with :root's, in settings/_panel-roles.scss. */
:where(.c-ground--page) {
  background: var(--surface-page);
  color: var(--fg-medium);
}

/* A ground coloured by hub: give the element a hub class (cw-hub--journey)
   too, and the hub's own surface.hub paints it. List markers take the hub's
   text colour too: the page's marker colour is set for the page's ground. */
:where(.c-ground--hub) {
  --fg-strong: var(--fg-on-hub);
  --fg-medium: var(--fg-on-hub);
  --fg-secondary: var(--fg-on-hub);
  --fg-muted: var(--fg-on-hub);
  --fg-eyebrow: var(--fg-on-hub);
  --fg-link: var(--fg-on-hub);
  --list-marker-color: var(--fg-on-hub);
  --border-faint: var(--border-on-dark);
  --border-card: var(--border-on-dark);
  --shadow-card-tinted: none;
  background: var(--surface-hub);
  color: var(--fg-on-hub);
}

:where(.c-ground--accent) {
  --fg-strong: var(--fg-on-accent);
  --fg-medium: var(--fg-on-accent-soft);
  --fg-secondary: var(--fg-on-accent-soft);
  --fg-muted: var(--fg-on-accent-soft);
  --fg-eyebrow: var(--fg-on-accent-soft);
  --fg-link: var(--fg-on-accent);
  --border-faint: var(--border-on-dark);
  --border-card: var(--border-on-dark);
  --shadow-card-tinted: none;
  background: var(--surface-accent, var(--action-primary-bg));
  color: var(--fg-on-accent);
}

/* ==========================================================================
   Shared marks.
   ==========================================================================

   Type, badges, actions, links and cards the Panels are built from. None of
   these is a Panel on its own.
   ========================================================================== */
:root:root {
  /* A theme's content rules give every Group a bottom margin. Inside a Panel
     the Panel sets its own spacing, so those margins go: they left gaps
     nobody asked for and shortened every grid item but the last. */
}
:root:root :is(.c-strip-facts,
.c-cards-cases,
.c-rows-quotes,
.c-rows-stories,
.c-inset-facts,
.c-grid-facts,
.c-cards-guides,
.c-cards-hubs,
.c-split-prose,
.c-band-promo,
.c-split-cta,
.c-band-cta,
.c-stack-prose,
.c-inset-figure,
.c-inset-quotes,
.c-split-cases,
.c-rows-facts,
.c-strip-links,
.c-strip-logos,
.c-rows-faq,
.c-cards-people,
.c-sidebar-stack,
.c-sidebar-index,
.c-sidebar-promo),
:root:root :where(.c-strip-facts,
.c-cards-cases,
.c-rows-quotes,
.c-rows-stories,
.c-inset-facts,
.c-grid-facts,
.c-cards-guides,
.c-cards-hubs,
.c-split-prose,
.c-band-promo,
.c-split-cta,
.c-band-cta,
.c-stack-prose,
.c-inset-figure,
.c-inset-quotes,
.c-split-cases,
.c-rows-facts,
.c-strip-links,
.c-strip-logos,
.c-rows-faq,
.c-cards-people,
.c-sidebar-stack,
.c-sidebar-index,
.c-sidebar-promo) .wp-block-group {
  margin-block: 0;
}
:root:root .c-strip-facts,
:root:root .c-cards-cases,
:root:root .c-rows-quotes,
:root:root .c-rows-stories,
:root:root .c-inset-facts,
:root:root .c-grid-facts,
:root:root .c-cards-guides,
:root:root .c-cards-hubs,
:root:root .c-split-prose,
:root:root .c-band-promo,
:root:root .c-split-cta,
:root:root .c-band-cta,
:root:root .c-strip-facts--inverse,
:root:root .c-stack-prose,
:root:root .c-inset-figure,
:root:root .c-split-cases,
:root:root .c-rows-facts,
:root:root .c-rows-faq {
  padding-block: var(--space-9);
}
:root:root {
  /* Running copy, and a quote set into it, keep the reading rhythm rather
     than a band's. */
}
:root:root .c-stack-prose,
:root:root .c-inset-quotes {
  padding-block: var(--space-7);
}
:root:root .c-strip-facts,
:root:root .c-band-cta {
  padding-inline: var(--gutter);
}
:root:root .c-measure {
  max-width: var(--measure-banner);
  margin-inline: auto;
}
:root:root .c-eyebrow {
  margin: 0 0 var(--space-3);
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-eyebrow);
}
:root:root {
  /* eyebrow.style: chip. The eyebrow, the banner's included, as a boxed
     label in sentence case: ink on the page's grounds, and on a coloured or
     dark ground the colours a button takes there, so it reads on both.
     Tighter than a button (a tag, not an action), so the two don't read
     alike (Matt, 15 October 2026). */
  /* stylelint-disable selector-class-pattern -- the contract's body class from settings.json. */
}
:root:root .cw-eyebrow-style--chip :is(.c-eyebrow, .c-banner__eyebrow) {
  display: block;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  padding: calc(var(--space-1) - var(--action-border-width)) var(--space-2);
  border: var(--action-border-width) solid var(--surface-badge);
  background: var(--surface-badge);
  color: var(--fg-on-badge);
  line-height: var(--lh-normal);
  letter-spacing: normal;
  text-transform: none;
}
:root:root .cw-eyebrow-style--chip :is(.c-ground--accent, .c-ground--tint) :is(.c-eyebrow, .c-banner__eyebrow) {
  border-color: var(--action-on-accent-fg);
  background: var(--action-on-accent-bg);
  color: var(--action-on-accent-fg);
}
:root:root .cw-eyebrow-style--chip :is(.c-ground--hub, .c-ground--inverse, .c-banner--inverse) :is(.c-eyebrow, .c-banner__eyebrow) {
  border-color: var(--action-on-dark-fg);
  background: var(--action-on-dark-bg);
  color: var(--action-on-dark-fg);
}
:root:root {
  /* A plain eyebrow on a hub's colour takes the ground's text colour, as
     the list markers do. */
}
:root:root .c-ground--hub .c-eyebrow {
  color: var(--fg-on-hub);
}
:root:root {
  /* stylelint-enable selector-class-pattern */
}
:root:root .c-title {
  margin: 0;
  font-size: var(--t-section);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: -0.022em;
  color: var(--fg-strong);
  text-wrap: pretty;
}
:root:root .c-title--hero {
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  max-width: 22ch;
}
:root:root .c-title em {
  font-style: normal;
  color: var(--fg-emphasis-on-dark);
}
:root:root .c-lead {
  margin: var(--space-4) 0 0;
  font-size: var(--t-lead);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-medium);
  text-wrap: pretty;
}
:root:root .c-body {
  margin: 0;
  font-size: var(--t-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  text-wrap: pretty;
}
:root:root .c-body + .c-body {
  margin-block-start: var(--space-5);
}
:root:root .c-body--note {
  font-size: var(--t-small);
  color: var(--fg-muted);
}
:root:root .c-body strong {
  color: var(--fg-strong);
  font-weight: var(--fw-bold);
}
:root:root .c-mark {
  color: var(--fg-strong);
  box-shadow: inset 0 -0.62em 0 0 var(--graphic-swipe);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  padding-inline: 0.14em;
  margin-inline: -0.1em;
}
:root:root .c-sub {
  margin: var(--space-8) 0 var(--space-4);
  font-size: var(--t-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  color: var(--fg-strong);
  text-wrap: pretty;
}
:root:root .c-sub--sm {
  margin-block: var(--space-7) var(--space-3);
  font-size: var(--t-card-title);
  letter-spacing: 0;
}
:root:root .c-bullets {
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}
:root:root .c-bullets__item {
  position: relative;
  padding-inline-start: var(--space-7);
  padding-block: var(--space-2);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  text-wrap: pretty;
}
:root:root .c-bullets__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 1.1em;
  inline-size: 0.6875rem;
  block-size: 0.6875rem;
  border-radius: var(--radius-pill);
  background: var(--surface-badge);
}
:root:root {
  /* On a hub's colour the badge colour can be too faint, so the dot takes
     the list marker's colour, which that ground sets (panels/_grounds.scss). */
}
:root:root .c-ground--hub .c-bullets__item::before {
  background: var(--list-marker-color);
}
:root:root {
  /* On the accent ground too, where the contract styles content elements
     and so sets that ground's marker colour; a site whose theme styles them
     keeps its badge-coloured dot. */
  /* stylelint-disable-next-line selector-class-pattern -- the contract's body class from settings.json. */
}
:root:root .cw-content-elements--contract .c-ground--accent .c-bullets__item::before {
  background: var(--list-marker-color);
}
:root:root .c-bullets__item strong {
  color: var(--fg-strong);
  font-weight: var(--fw-bold);
}
:root:root .c-await {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-6) 0 0;
  padding: var(--space-5) var(--space-6);
  border: var(--hairline) dashed var(--border-card);
  border-radius: var(--radius-md);
  font-size: var(--t-small);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}
:root:root .c-await__tag {
  flex: 0 0 auto;
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-eyebrow);
}
:root:root .c-head {
  margin-block-end: var(--space-8);
}
:root:root .c-head .c-title + .c-lead {
  margin-block-start: var(--space-4);
}
:root:root .c-badge {
  align-self: flex-start;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--surface-badge);
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-bold);
  line-height: var(--lh-flush);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-on-badge);
}
:root:root .c-chip {
  display: inline-flex;
  align-self: flex-start;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border: var(--card-border-width) solid var(--border-card);
  border-radius: var(--radius-pill);
  font-size: var(--t-tag);
  font-weight: var(--fw-bold);
  line-height: var(--lh-flush);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}
:root:root .c-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-7);
}
:root:root .c-actions__note {
  margin: var(--space-6) 0 0;
  font-size: var(--t-small);
  line-height: var(--lh-relaxed);
  color: var(--fg-medium);
}
:root:root {
  /* Buttons. Core's Button block puts a custom class on its wrapper, so the
     look is on the link inside; a link that carries the class itself, as
     older markup does, gets the same look. */
}
:root:root .c-btn {
  width: 100%;
}
:root:root :is(.c-btn .wp-block-button__link, a.c-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-6);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--action-primary-bg);
  color: var(--action-primary-fg);
  font-size: var(--t-lead);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-align: center;
  text-decoration: none;
  transition: filter 160ms cubic-bezier(0.2, 0.8, 0.2, 1), background 160ms cubic-bezier(0.2, 0.8, 0.2, 1), color 160ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 160ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
:root:root :is(.c-btn .wp-block-button__link, a.c-btn):active {
  transform: translateY(1px);
  box-shadow: none;
}
:root:root :is(.c-btn .wp-block-button__link, a.c-btn):focus-visible {
  outline: 0.1875rem solid var(--fg-eyebrow);
  outline-offset: 0.125rem;
}
:root:root :is(.c-btn--accent .wp-block-button__link, a.c-btn--accent) {
  background: var(--action-on-accent-bg);
  color: var(--action-on-accent-fg);
}
:root:root :is(.c-btn--accent .wp-block-button__link, a.c-btn--accent):hover {
  filter: brightness(1.08);
}
:root:root :is(.c-btn--on-dark .wp-block-button__link, a.c-btn--on-dark) {
  background: var(--action-on-dark-bg);
  color: var(--action-on-dark-fg);
}
:root:root :is(.c-btn--on-dark .wp-block-button__link, a.c-btn--on-dark):hover {
  box-shadow: var(--shadow-card-tinted);
}
:root:root :is(.c-btn--ghost .wp-block-button__link, a.c-btn--ghost) {
  background: transparent;
  color: var(--action-ghost-fg);
  box-shadow: inset 0 0 0 calc(var(--hairline) * 1.5) var(--action-ghost-border);
}
:root:root :is(.c-btn--ghost .wp-block-button__link, a.c-btn--ghost):hover {
  background: var(--action-ghost-border);
  color: var(--fg-on-dark);
  box-shadow: none;
}
:root:root .c-btn__arrow {
  flex: 0 0 auto;
}
:root:root .c-link {
  align-self: flex-start;
  font-size: var(--t-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  text-decoration: none;
}
:root:root .c-link:hover {
  color: var(--fg-link);
}
:root:root .c-link--quiet {
  color: var(--fg-link);
}
:root:root .c-link--quiet:hover {
  color: var(--fg-strong);
}
:root:root .c-link__arrow {
  padding-inline-start: var(--space-1);
  opacity: 0.8;
}
:root:root .c-link-inline {
  color: var(--fg-strong);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-decoration-thickness: var(--hairline);
  text-underline-offset: 0.1875rem;
}
:root:root .c-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-7);
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-bold);
  line-height: var(--lh-flush);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-on-dark);
}
:root:root .c-breadcrumb a {
  color: var(--fg-link-on-dark);
  text-decoration: none;
}
:root:root .c-breadcrumb a:hover {
  color: var(--fg-on-dark);
}
:root:root .c-breadcrumb > span[aria-hidden] {
  color: var(--fg-on-dark-soft);
}
:root:root .c-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-7) var(--space-6);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
:root:root .c-card--outlined {
  border: var(--card-border-width) solid var(--border-card);
  background: var(--surface-page);
  box-shadow: var(--shadow-card-tinted);
}
:root:root .c-card--stat {
  gap: var(--space-3);
  padding: var(--space-6);
  border: var(--card-border-width) solid var(--border-card);
  border-radius: var(--radius-lg);
  background: var(--surface-page);
  box-shadow: var(--shadow-card-tinted);
}
:root:root .c-card__title {
  margin: 0;
  font-size: var(--t-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  text-wrap: pretty;
}
:root:root .c-card__title--sm {
  font-size: var(--t-card-title);
}
:root:root .c-card .c-body {
  flex: 1 1 auto;
}
:root:root .c-stat {
  margin: 0;
  font-size: var(--t-stat);
  font-weight: var(--fw-bold);
  line-height: var(--lh-flush);
  letter-spacing: -0.03em;
  color: var(--fg-strong);
  font-variant-numeric: tabular-nums;
}
:root:root .c-stat__of {
  margin: 0;
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

/* ==========================================================================
   Row Panels, in hub page order.
   ==========================================================================

   strip-facts, cards-cases, rows-quotes, rows-stories, inset-facts, grid-facts,
   cards-guides and band-cta. Each Panel owns its vertical padding.
   ========================================================================== */
:root:root .c-strip-facts {
  border-block-end: var(--card-border-width) solid var(--border-card);
}
:root:root .c-strip-facts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-7) var(--space-8);
}
:root:root .c-strip-facts__term {
  margin: 0 0 var(--space-2);
  font-size: var(--t-card-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  text-wrap: pretty;
}
:root:root {
  /* --marked: each figure on a card of its own, outlined in the accent
     with a heavier top edge, as cards-plans --marked marks its plans. The
     cards are the grid's cells (c-strip-facts__cell), three across with
     c-strip-facts__grid--3. */
}
:root:root .c-strip-facts--marked {
  border-block-end: 0;
}
:root:root .c-strip-facts--marked .c-strip-facts__grid {
  gap: var(--space-4);
}
:root:root .c-strip-facts--marked .c-strip-facts__cell {
  border: var(--card-border-width) solid var(--border-accent);
  border-block-start-width: var(--space-1);
  border-radius: var(--radius-lg);
  background: var(--surface-page);
}
:root:root .c-cards-cases__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--space-5);
}
:root:root .c-cards-cases__wide {
  grid-column: 1/-1;
}
:root:root .c-rows-quotes__ground {
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-md);
}
:root:root .c-rows-quotes__ground .c-title {
  color: var(--fg-emphasis-on-dark);
}
:root:root .c-rows-quotes__list {
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
}
:root:root .c-rows-quotes__item {
  padding-block: var(--space-5);
  border-block-end: var(--hairline) solid var(--border-accent-on-dark);
  font-size: var(--t-lead);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-on-accent-soft);
  text-wrap: pretty;
}
:root:root .c-rows-quotes__item:last-child {
  border-block-end-color: transparent;
}
:root:root .c-rows-quotes__ground .c-body {
  margin-block-start: var(--space-7);
}
:root:root {
  /* Stories stand apart; --divided rules them off from each other. */
}
:root:root .c-rows-stories__item {
  padding-block-end: 0;
  margin-block-end: var(--space-8);
  border-block-end: 0;
}
:root:root .c-rows-stories--divided .c-rows-stories__item {
  padding-block-end: var(--space-8);
  border-block-end: var(--hairline) solid var(--border-faint);
}
:root:root .c-rows-stories__item:last-child {
  padding-block-end: 0;
  margin-block-end: 0;
  border-block-end: 0;
}
:root:root .c-rows-stories__name {
  margin: 0 0 var(--space-4);
  font-size: var(--t-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  text-wrap: pretty;
}
:root:root .c-rows-stories__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-6) var(--space-8);
  margin-block-start: var(--space-7);
}
:root:root .c-rows-stories__col {
  padding-block-start: var(--space-4);
  border-block-start: 2px solid var(--border-accent);
}
:root:root .c-rows-stories__label,
:root:root .c-rows-stories__rating {
  margin: 0 0 var(--space-3);
  font-size: var(--t-label);
  font-weight: var(--fw-bold);
  line-height: var(--lh-flush);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-strong);
}
:root:root .c-inset-facts__ground {
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-md);
}
:root:root .c-inset-facts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-4);
  margin-block: var(--space-7);
}
:root:root .c-grid-facts__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--space-8) var(--space-9);
  margin: 0;
  padding: 0;
  list-style: none;
}
:root:root .c-grid-facts__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.375rem;
  block-size: 2.375rem;
  margin-block-end: var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--surface-badge);
  font-size: var(--t-card-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-flush);
  color: var(--fg-on-badge);
  font-variant-numeric: tabular-nums;
}
:root:root .c-grid-facts__term {
  display: block;
  margin: 0 0 var(--space-3);
  font-size: var(--t-card-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  text-wrap: pretty;
}
:root:root .c-grid-facts__item .c-body {
  display: block;
}
:root:root .c-cards-guides__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-5);
}
:root:root .c-cards-guides__wide {
  margin-block-start: var(--space-5);
}
:root:root .c-band-cta__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-9);
  align-items: flex-start;
}
:root:root .c-band-cta__copy {
  flex: 1 1 22rem;
  min-width: 0;
}
:root:root .c-band-cta__steps {
  flex: 1 1 22rem;
  min-width: 0;
}
:root:root {
  /* band-cta --centred: one line and one action, centred in a box as wide as
     the banner's measure. The box carries the ground, so the band itself adds
     no padding of its own. */
}
:root:root .c-band-cta.c-band-cta--centred {
  padding: 0;
}
:root:root .c-band-cta__box {
  max-width: var(--measure-banner);
  margin-inline: auto;
  padding: var(--space-9) var(--gutter);
  text-align: center;
}
:root:root .c-band-cta__box .c-title {
  margin-block-end: var(--space-7);
}
:root:root .c-band-cta__box .c-actions {
  justify-content: center;
}
:root:root .c-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}
:root:root .c-steps__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-block-end: var(--hairline) solid var(--border-on-dark);
}
:root:root .c-steps__item:last-child {
  border-block-end-color: transparent;
}
:root:root .c-steps__n {
  font-size: var(--t-card-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-on-accent);
  font-variant-numeric: tabular-nums;
}
:root:root .c-steps__term {
  display: block;
  margin: 0 0 var(--space-1);
  font-size: var(--t-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-on-accent);
}
:root:root .c-steps__item .c-body {
  display: block;
  font-size: var(--t-small);
  color: var(--fg-on-accent-soft);
}

/* ==========================================================================
   cards-cases --1: one case across the column, a picture beside it.
   ==========================================================================

   panels/_hub.scss lays out the plain grid of cards. --1 sets the cases one
   under another, each its picture (c-card__image) beside its copy
   (c-card__copy): a label, a title, a line in quotes (c-card__quote), text
   and a button. From 48em the picture takes a third of the row and the
   pictures alternate sides, the first on the left, with the copy centred on
   the picture; on a phone the picture is above the copy. The picture keeps
   its own width up to its column. No box round a case: the band carries the
   ground.
   ========================================================================== */
:root:root .c-cards-cases--1 .c-cards-cases__grid {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-9);
}
:root:root .c-cards-cases--1 .c-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
:root:root .c-cards-cases--1 .c-card__image {
  margin: 0;
}
:root:root .c-cards-cases--1 .c-card__image img {
  display: block;
  max-width: 100%;
  height: auto;
}
:root:root {
  /* The copy, one block under another, straight in the group or in the
     inner container a classic theme adds (panels/_classic-groups.scss). */
}
:root:root :is(.c-cards-cases--1 .c-card__copy, .c-cards-cases--1 .c-card__copy > .wp-block-group__inner-container) > * {
  margin-block: 0;
}
:root:root :is(.c-cards-cases--1 .c-card__copy, .c-cards-cases--1 .c-card__copy > .wp-block-group__inner-container) > * + * {
  margin-block-start: var(--space-4);
}
:root:root {
  /* The label keeps to its own width, as it does in a card that is a column. */
}
:root:root .c-cards-cases--1 .c-badge {
  inline-size: -moz-fit-content;
  inline-size: fit-content;
}
:root:root .c-cards-cases--1 .c-card__quote {
  font-size: var(--t-lead);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}
:root:root .c-cards-cases--1 .c-actions {
  margin-block-start: var(--space-6);
}
:root:root {
  /* The button keeps its own width and wears the contract's corner, as
     split-figure's does. */
}
:root:root .c-cards-cases--1 .c-btn {
  width: auto;
}
:root:root .c-cards-cases--1 .c-btn .wp-block-button__link {
  width: auto;
  padding: var(--action-padding-block) var(--action-padding-inline);
  border: var(--action-border-width) solid var(--action-primary-bg);
  border-radius: var(--action-radius);
  box-shadow: var(--action-shadow);
  font-size: var(--t-action);
}
:root:root .c-cards-cases--1 .c-btn .wp-block-button__link:hover {
  background: var(--action-primary-bg-hover);
  box-shadow: var(--action-shadow-hover);
  color: var(--action-primary-fg-hover);
}
@media (min-width: 48em) {
  :root:root .c-cards-cases--1 .c-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    -moz-column-gap: var(--space-8);
         column-gap: var(--space-8);
    align-items: center;
  }
  :root:root .c-cards-cases--1 .c-card:nth-child(even) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
  :root:root .c-cards-cases--1 .c-card:nth-child(even) .c-card__image {
    order: 1;
  }
  :root:root {
    /* A case without a picture takes the whole row. */
  }
  :root:root .c-cards-cases--1 .c-card__copy:only-child {
    grid-column: 1/-1;
  }
}

/* ==========================================================================
   grid-facts — facts led by an icon, the head in the grid, set counts.
   ==========================================================================

   panels/_hub.scss lays out the grid and numbers it (--marked). The other
   modifiers:

   - --icon: each fact leads with an Image block in place of the number,
     above its title.
   - --beside: the icon sits beside the title, and the text runs under both.
   - --hanging: the icon has a column of its own, with the title, text and
     link beside it.
   - --linked: each fact is one link, the link at its foot or in its title.
   - --intro: the head is the grid's first cell, not a row above it.
   - --3: three across from 48em, one under another below that. --1: one
     under another at every width.
   - --sunken: a full-width band on the sunken ground, its content held to
     the banner's width (c-measure).
   - --figure: two lists of facts either side of a figure, each fact's
     text in a box with its icon on the figure's side.
   - --raised: each fact a card on the raised ground, with the card shadow.

   A fact can end on a link (c-grid-facts__link). An icon grid is built from
   Groups where --marked is a list, so a classic theme gives the grid and each
   fact an inner container (panels/_classic-groups.scss).

   Facts can also stand in columns: a Group per column (c-grid-facts__col)
   holds that column's facts one under another, so each column keeps its own
   rhythm. One column at base, two from 48em. With --intro the head sits above
   the columns, and beside them from 64em, centred on them.
   ========================================================================== */
:root:root .c-grid-facts--sunken {
  padding-inline: var(--gutter);
}
:root:root .c-grid-facts--1 .c-grid-facts__list,
:root:root .c-grid-facts--3 .c-grid-facts__list {
  grid-template-columns: minmax(0, 1fr);
}
:root:root {
  /* The head takes a cell like a fact, so it keeps no space under it. */
}
:root:root .c-grid-facts--intro .c-head {
  margin: 0;
}
:root:root .c-grid-facts--icon .c-grid-facts__icon {
  margin: 0 0 var(--space-5);
}
:root:root {
  /* The icon's size is the panel's: a width set on the Image block would be
     written into the markup as a style. */
}
:root:root .c-grid-facts--icon .c-grid-facts__icon img {
  display: block;
  inline-size: var(--space-9);
  block-size: var(--space-9);
  -o-object-fit: contain;
     object-fit: contain;
}
:root:root .c-grid-facts__link {
  margin: var(--space-4) 0 0;
  font-size: var(--t-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
:root:root .c-grid-facts__link a {
  color: var(--fg-link);
  text-decoration: none;
}
:root:root .c-grid-facts__link a:hover {
  color: var(--fg-strong);
}
:root:root {
  /* --beside: the icon and the title on one line, the title centred on the
     icon; the text under them runs the width of the fact. */
}
:root:root .c-grid-facts--beside .c-grid-facts__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  -moz-column-gap: var(--space-4);
       column-gap: var(--space-4);
  align-items: center;
  align-content: start;
}
:root:root .c-grid-facts--beside :is(.c-grid-facts__icon, .c-grid-facts__term) {
  margin: 0;
}
:root:root .c-grid-facts--beside .c-grid-facts__item :is(.c-body, .c-grid-facts__link) {
  grid-column: 1/-1;
}
:root:root .c-grid-facts--beside .c-grid-facts__term + .c-body {
  margin-block-start: var(--space-3);
}
:root:root {
  /* --hanging: the icon in a column of its own. It spans the rows of the
     title, the text and a link, so a fact of one line is still as tall as
     its icon. */
}
:root:root .c-grid-facts--hanging .c-grid-facts__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  -moz-column-gap: var(--space-5);
       column-gap: var(--space-5);
  align-content: start;
}
:root:root .c-grid-facts--hanging .c-grid-facts__icon {
  grid-row: 1/span 4;
  margin: 0;
}
:root:root .c-grid-facts--hanging .c-grid-facts__item :is(.c-grid-facts__term, .c-body, .c-grid-facts__link) {
  grid-column: 2;
}
:root:root {
  /* --linked: each fact is one link. The link at its foot reaches over the
     whole fact, which takes the sunken ground under the pointer or with the
     link focused. Not in the editor, where it would stop the fact's blocks
     being picked. */
}
:root:root .c-grid-facts--linked .c-grid-facts__item {
  position: relative;
  padding: var(--space-3);
}
:root:root .c-grid-facts--linked .c-grid-facts__item:is(:hover, :focus-within) {
  background: var(--surface-sunken);
}
:root:root .c-grid-facts--linked:not(.editor-styles-wrapper *) .c-grid-facts__link a::after {
  position: absolute;
  inset: 0;
  content: "";
}
:root:root {
  /* --figure: the facts either side of a figure. c-grid-facts__grid holds
     a list, the image (c-grid-facts__figure) and a second list, each list
     one fact under another. A fact's title and text sit in a tinted box
     (c-grid-facts__copy) and its icon overlaps the box's edge on the
     figure's side, centred on it. Three columns from 48em, the figure
     centred between the lists; on a phone the first list, the figure, then
     the second. */
}
:root:root .c-grid-facts__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
}
:root:root .c-grid-facts--figure .c-grid-facts__list {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-content: start;
}
:root:root .c-grid-facts--figure .c-grid-facts__item {
  display: flex;
  align-items: center;
}
:root:root .c-grid-facts--figure .c-grid-facts__list:first-child .c-grid-facts__item {
  flex-direction: row-reverse;
}
:root:root .c-grid-facts--figure .c-grid-facts__icon {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin: 0;
  margin-inline-end: calc(-1 * var(--space-6));
}
:root:root .c-grid-facts--figure .c-grid-facts__list:first-child .c-grid-facts__icon {
  margin-inline: calc(-1 * var(--space-6)) 0;
}
:root:root {
  /* The icon at its own size. */
}
:root:root .c-grid-facts--figure .c-grid-facts__icon img {
  inline-size: auto;
  block-size: auto;
  max-inline-size: none;
}
:root:root .c-grid-facts__copy {
  flex: 1 1 auto;
  min-inline-size: 0;
  padding-block: var(--space-6);
  padding-inline: var(--space-9) var(--space-6);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
:root:root .c-grid-facts--figure .c-grid-facts__list:first-child .c-grid-facts__copy {
  padding-inline: var(--space-6) var(--space-9);
}
:root:root :is(.c-grid-facts__copy, .c-grid-facts__copy > .wp-block-group__inner-container) > * {
  margin-block: 0;
}
:root:root :is(.c-grid-facts__copy, .c-grid-facts__copy > .wp-block-group__inner-container) > * + * {
  margin-block-start: var(--space-2);
}
:root:root .c-grid-facts__figure {
  margin: 0;
  justify-self: center;
}
:root:root .c-grid-facts__figure img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}
:root:root {
  /* A fact whose title is its link: the title keeps its own colour, and
     the link reaches over the fact as the foot link does. */
}
:root:root .c-grid-facts--linked .c-grid-facts__term a {
  color: inherit;
  text-decoration: none;
}
:root:root .c-grid-facts--linked:not(.editor-styles-wrapper *) .c-grid-facts__term a::after {
  position: absolute;
  inset: 0;
  content: "";
}
:root:root {
  /* Facts in columns, each column one under another. */
}
:root:root .c-grid-facts__list:has(.c-grid-facts__col) {
  grid-template-columns: minmax(0, 1fr);
}
:root:root .c-grid-facts__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
:root:root {
  /* --raised: each fact a card on the raised ground. One that is a link
     lifts further under the pointer rather than taking the sunken ground. */
}
:root:root .c-grid-facts--raised .c-grid-facts__item {
  padding: var(--space-6);
  background: var(--surface-raised);
  box-shadow: var(--shadow-card-tinted);
}
:root:root .c-grid-facts--raised.c-grid-facts--linked .c-grid-facts__item:is(:hover, :focus-within) {
  background: var(--surface-raised);
  box-shadow: var(--shadow-card-lg);
}
@media (min-width: 48em) {
  :root:root .c-grid-facts--3 .c-grid-facts__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  :root:root .c-grid-facts--figure .c-grid-facts__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
  :root:root .c-grid-facts--figure .c-grid-facts__figure {
    align-self: center;
  }
  :root:root .c-grid-facts__list:has(.c-grid-facts__col) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :root:root .c-grid-facts--intro .c-grid-facts__list:has(.c-grid-facts__col) .c-head {
    grid-column: 1/-1;
  }
}
@media (min-width: 64em) {
  :root:root .c-grid-facts--intro .c-grid-facts__list:has(.c-grid-facts__col) {
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  }
  :root:root .c-grid-facts--intro .c-grid-facts__list:has(.c-grid-facts__col) .c-head {
    grid-column: auto;
    align-self: center;
  }
}

/* ==========================================================================
   cards-hubs — three cards, each with a band in its hub's colour.
   ==========================================================================

   From Claude Design's Demand Definition home (Deliverable #29): Value,
   Conversation, Stage. A card takes a hub's class (cw-hub--market) and the
   band (card.header-bg), the link rule and the list markers follow that hub;
   a card with no hub class has an ink band. The band carries text, so the
   generator checks card.header-fg against every hub's band.
   ========================================================================== */
:root:root .c-cards-hubs > .c-head,
:root:root .c-cards-hubs > .wp-block-group__inner-container > .c-head {
  margin-block-end: calc(var(--space-8) + var(--space-1));
}
:root:root {
  /* A count that would leave one card alone on the last row lays out
     another way, on a site with the frame (components/_frame.scss). */
}
:root:root .c-cards-hubs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-6);
}
:root:root .c-card--hub {
  gap: var(--space-4);
  padding: 0 0 var(--space-6);
  border: var(--card-border-width) solid var(--border-card);
  background: var(--surface-page);
  overflow: hidden;
}
:root:root {
  /* Through the classic wrapper too (panels/_classic-groups.scss). */
}
:root:root :is(.c-card--hub, .c-card--hub > .wp-block-group__inner-container) > :not(.c-card__band, .wp-block-group__inner-container) {
  margin-inline: var(--space-5);
}
:root:root {
  /* The band carries a rule under it, as wide as the card's border. */
}
:root:root .c-card__band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-1);
  padding: var(--space-3) var(--space-5);
  border-block-end: var(--card-border-width) solid var(--border-card);
  background: var(--card-header-bg);
  color: var(--card-header-fg);
  font-size: var(--t-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
}
:root:root .c-card__band p {
  margin: 0;
  color: inherit;
}
:root:root .c-card__band-num {
  font-variant-numeric: tabular-nums;
}
:root:root {
  /* The text sits straight above its points; the link alone is pushed to the
     foot, so the three links line up. */
}
:root:root .c-card--hub .c-body {
  flex: 0 0 auto;
}
:root:root .c-card--hub .c-card__icon img {
  width: 4rem;
  height: auto;
}
:root:root .c-card--hub .c-card__icon {
  margin-block: var(--space-2) 0;
}
:root:root .c-card--hub .c-card__title {
  line-height: var(--lh-normal);
}
:root:root {
  /* Points: a square marker before each, beside its text, so the
     text lines up with the card's other text rather than indenting. The
     point stays a block with the marker in its padding: as a flex row, a
     bold label inside a point became its own narrow column. */
}
:root:root .c-card__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block: 0;
  padding-block-start: var(--space-3);
  padding-inline-start: 0;
  list-style: none;
  font-size: var(--t-small);
  font-weight: var(--fw-semi);
  line-height: var(--lh-normal);
  color: var(--fg-strong);
}
:root:root .c-card__points li {
  position: relative;
  margin: 0;
  padding-inline-start: calc(var(--list-marker-size) + var(--space-3));
}
:root:root .c-card__points li::before {
  position: absolute;
  inset-block-start: calc((1lh - var(--list-marker-size)) / 2);
  inset-inline-start: 0;
  inline-size: var(--list-marker-size);
  block-size: var(--list-marker-size);
  background: var(--list-marker-color);
  content: "";
}
:root:root .c-card__action {
  margin-block: auto 0;
  padding-block-start: var(--space-6);
}
:root:root .c-card__action .c-link {
  font-size: var(--t-small);
  font-weight: var(--fw-semi);
  color: var(--fg-strong);
  text-decoration-line: underline;
  text-decoration-color: var(--link-rule);
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  text-decoration-thickness: var(--link-rule-thickness);
  text-underline-offset: var(--link-rule-offset);
}
:root:root .c-cards-hubs__note {
  max-width: var(--measure-prose);
  margin: calc(var(--space-8) + var(--space-1)) 0 0;
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-medium);
}

/* ==========================================================================
   split-prose: an introduction in two columns on the sunken ground.
   ==========================================================================

   Deliverable #29's "Converting demand" band: the eyebrow and title on the
   left, the paragraphs on the right. One column until the panel itself is
   864px wide, with a sidebar or without.
   ========================================================================== */
:root:root {
  /* The panel is the container its two columns are measured by (below). */
}
:root:root .c-split-prose {
  padding-inline: var(--gutter);
  container: c-split-prose/inline-size;
}
:root:root .c-split-prose__grid {
  display: grid;
  gap: var(--space-6);
}
:root:root {
  /* The head sits beside the text, so it drops the space .c-head keeps
     under itself; the grid gap does that job. */
}
:root:root .c-split-prose .c-head {
  margin-block-end: 0;
}
:root:root {
  /* Paragraphs are spaced as .c-body + .c-body spaces them. */
}
:root:root .c-split-prose__body {
  max-width: var(--measure-prose);
}
:root:root {
  /* A list keeps the same gap from the paragraph on either side of it, as
     in stack-prose; the Checks style and c-bullets have none below. */
}
:root:root .c-split-prose__body .c-body + :is(ul, ol),
:root:root .c-split-prose__body :is(ul, ol) + .c-body {
  margin-block-start: var(--space-5);
}
:root:root {
  /* The last thing in the text keeps no margin under it, as in stack-prose;
     through the inner container a classic theme adds. */
}
:root:root .c-split-prose__body > :last-child,
:root:root .c-split-prose__body > :last-child > :last-child {
  margin-block-end: 0;
}
:root:root .c-split-prose__body a {
  color: var(--fg-strong);
  font-weight: var(--fw-semi);
  text-decoration-line: underline;
  text-decoration-color: var(--link-rule);
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  text-decoration-thickness: var(--link-rule-thickness);
  text-underline-offset: var(--link-rule-offset);
}
:root:root .c-split-prose__kicker {
  margin: var(--space-5) 0 0;
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
}
:root:root {
  /* Two columns, 1 : 2.2 from their own widths, so the text takes
     most of the row and the title wraps beside it. By the panel's own
     width, beside a sidebar or not: two columns only once both get their
     own widths and the gap (17.5rem, 32.5rem and about 4rem). Narrower,
     the title sits above the text instead of wrapping to five lines or
     breaking a long word. In px, as the author box's are, because some
     themes scale the root font size.

     Whatever follows the title stays in the text column, one block under
     another: text split into two blocks in the editor, with an empty
     paragraph between, made three columns (Demand Definition,
     the-big-conversion-idea). The title spans the rows; the rows have no
     gap, so the empty ones it spans take no room, and each block after
     the first keeps the paragraphs' own space above it. */
}
@container c-split-prose (min-width: 864px) {
  :root:root .c-split-prose__grid {
    grid-template-columns: minmax(17.5rem, 1fr) minmax(32.5rem, 2.2fr);
    gap: 0 var(--space-10);
    align-items: start;
  }
  :root:root :is(.c-split-prose__grid, .c-split-prose__grid > .wp-block-group__inner-container) > .c-head {
    grid-column: 1;
    grid-row: 1/span 12;
  }
  :root:root :is(.c-split-prose__grid, .c-split-prose__grid > .wp-block-group__inner-container) > :not(.c-head) {
    grid-column: 2;
    max-width: none;
  }
  :root:root :is(.c-split-prose__grid, .c-split-prose__grid > .wp-block-group__inner-container) > :not(.c-head) ~ :not(.c-head) {
    margin-block-start: var(--space-6);
  }
}
:root:root {
  /* In the reading layout one column of split-prose is the reading column,
     title and text alike: as wide as stack-prose's text until the sidebar
     sits beside the content, then the measure (components/_frame.scss). */
  /* stylelint-disable selector-class-pattern -- cw-frame is the contract's body class from settings.json. */
}
:root:root .cw-frame.has-sidebar .c-split-prose__body {
  max-width: none;
}
@media (min-width: 1025px) {
  @container c-split-prose (max-width: 863.98px) {
    :root:root .cw-frame.has-sidebar :is(.c-split-prose__grid, .c-split-prose__grid > .wp-block-group__inner-container) > :is(.c-head, .c-split-prose__body) {
      max-width: var(--reading-measure);
    }
  }
}
:root:root {
  /* stylelint-enable selector-class-pattern */
}

/* ==========================================================================
   split-figure: an image beside copy.
   ==========================================================================

   The copy (an optional eyebrow, a heading, text, then optionally a list and
   a button) beside one image. One column on a phone, the copy first; two from
   48em, centred on each other. The image keeps its own width up to 40% of the
   row and the copy takes the rest, so a small illustration doesn't leave a
   gap beside it. c-split-figure--reverse puts the image first: on the left,
   and above the copy on a phone. With a ground (c-ground--sunken) it is a
   band; its content holds to the content column either way.

   The list is a plain one (links, short items) or c-split-figure__points:
   each point a bold title, a line break and a line of text, after a check
   mark.
   ========================================================================== */
:root:root {
  /* The panel sets its own spacing, so the margins a theme gives every
     Group go. */
}
:root:root .c-split-figure,
:root:root .c-split-figure .wp-block-group {
  margin-block: 0;
}
:root:root .c-split-figure {
  padding-block: var(--space-9);
  padding-inline: var(--gutter);
}
:root:root .c-split-figure__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
}
:root:root .c-split-figure--reverse .c-split-figure__figure {
  order: -1;
}
:root:root {
  /* The copy, one block under another, straight in the column or in the
     inner container a classic theme adds (panels/_classic-groups.scss). */
}
:root:root :is(.c-split-figure__copy, .c-split-figure__copy > .wp-block-group__inner-container) > * {
  margin-block: 0;
}
:root:root :is(.c-split-figure__copy, .c-split-figure__copy > .wp-block-group__inner-container) > * + * {
  margin-block-start: var(--space-5);
}
:root:root :is(.c-split-figure__copy, .c-split-figure__copy > .wp-block-group__inner-container) > .c-eyebrow + * {
  margin-block-start: var(--space-3);
}
:root:root :is(.c-split-figure__copy, .c-split-figure__copy > .wp-block-group__inner-container) > .c-title + * {
  margin-block-start: var(--space-4);
}
:root:root :is(.c-split-figure__copy, .c-split-figure__copy > .wp-block-group__inner-container) > * + :is(ul, ol, .c-actions) {
  margin-block-start: var(--space-6);
}
:root:root {
  /* The title shares its row with the image, so it takes the size of a
     heading inside a band rather than the band's display size; a row under
     a section's heading (an h3 or below) takes a card title's. */
}
:root:root .c-split-figure .c-title {
  font-size: var(--t-h3);
}
:root:root .c-split-figure :is(h3, h4, h5, h6).c-title {
  font-size: var(--t-card-title);
}
:root:root {
  /* The text beside the image reads as a lead; a list after it keeps the
     same size and line. */
}
:root:root .c-split-figure__copy :is(.c-body, ul, ol) {
  font-size: var(--t-lead);
  line-height: var(--lh-relaxed);
  color: var(--fg-medium);
}
:root:root {
  /* A plain list: links or short items, after the theme's marker. */
}
:root:root .c-split-figure__copy :is(ul, ol):not(.c-split-figure__points) {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-inline-start: var(--space-6);
}
:root:root {
  /* The points: each a bold title, a line break and a line of text, after a
     check mark. The mark is a shape cut from the strong colour, so the
     ground shows through the tick; the item stays a block with the mark in
     its padding, so a link or a bold word inside wraps with the text. */
}
:root:root .c-split-figure__copy .c-split-figure__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  padding-inline-start: 0;
  list-style: none;
}
:root:root .c-split-figure__points li {
  position: relative;
  margin: 0;
  padding-inline-start: calc(var(--space-7) + var(--space-6));
}
:root:root .c-split-figure__points li::before {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: var(--space-7);
  block-size: var(--space-7);
  translate: 0 -50%;
  background: var(--fg-strong);
  content: "";
  -webkit-mask: var(--mask-check) center/contain no-repeat;
          mask: var(--mask-check) center/contain no-repeat;
}
:root:root .c-split-figure__points strong {
  font-weight: var(--fw-semi);
  color: var(--fg-strong);
}
:root:root {
  /* The button keeps its own width, as the banner's do, and wears the
     contract's button corner. */
}
:root:root .c-split-figure .c-btn {
  width: auto;
}
:root:root .c-split-figure .c-btn .wp-block-button__link {
  width: auto;
  padding: var(--action-padding-block) var(--action-padding-inline);
  border: var(--action-border-width) solid var(--action-primary-bg);
  border-radius: var(--action-radius);
  box-shadow: var(--action-shadow);
  font-size: var(--t-action);
}
:root:root .c-split-figure .c-btn .wp-block-button__link:hover {
  background: var(--action-primary-bg-hover);
  box-shadow: var(--action-shadow-hover);
  color: var(--action-primary-fg-hover);
}
:root:root {
  /* The image at its own size, never wider than its column. A width set on
     the image in the editor holds it smaller. */
}
:root:root .c-split-figure__figure {
  margin: 0;
}
:root:root .c-split-figure__figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--image-radius);
}
@media (min-width: 48em) {
  :root:root .c-split-figure {
    padding-block: var(--space-10);
  }
  :root:root .c-split-figure__grid {
    grid-template-columns: minmax(0, 1fr) fit-content(40%);
    gap: var(--space-7) var(--space-8);
    align-items: center;
  }
  :root:root .c-split-figure--reverse .c-split-figure__grid {
    grid-template-columns: fit-content(40%) minmax(0, 1fr);
  }
}
@media (min-width: 64em) {
  :root:root .c-split-figure {
    padding-block: var(--space-11);
  }
}

/* ==========================================================================
   band-promo: an argument on the accent ground, with a promo card beside it.
   ==========================================================================

   Deliverable #29's "Post-click writing" band. The band shell is band-cta's;
   the card is sidebar-promo's light card, on c-ground--page so its text takes
   the light roles back inside the coloured band. --sunken sets the same band
   on the sunken ground.
   ========================================================================== */
:root:root .c-band-promo {
  padding-inline: var(--gutter);
}
:root:root .c-band-promo__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
:root:root {
  /* The argument: eyebrow, title, text and points, evenly spaced. */
}
:root:root .c-band-promo__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}
:root:root .c-band-promo__copy .c-eyebrow {
  margin: 0;
}
:root:root .c-band-promo__copy .c-body {
  margin: 0;
  color: var(--fg-strong);
}
:root:root .c-band-promo__copy .is-style-checks {
  margin: 0;
}
:root:root {
  /* The card stands at its own width at the end of its column. */
}
:root:root .c-band-promo__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  justify-self: end;
  width: 100%;
  max-width: 27.5rem;
  padding: var(--space-7);
  border: var(--card-border-width) solid var(--fg-strong);
  box-shadow: var(--shadow-card-lg);
}
:root:root .c-band-promo__card .c-card__title {
  line-height: var(--lh-normal);
}
:root:root .c-band-promo__card .c-actions {
  margin-block-start: var(--space-1);
}
:root:root {
  /* The card's one action sits at its own width, not the card's, and wears
     the contract's button corner and shadow, as the banner's buttons do. */
}
:root:root .c-band-promo__card .c-btn {
  width: auto;
}
:root:root .c-band-promo__card .c-btn .wp-block-button__link {
  width: auto;
  padding: var(--action-padding-block) var(--action-padding-inline);
  border: var(--action-border-width) solid var(--action-primary-bg);
  border-radius: var(--action-radius);
  box-shadow: var(--action-shadow);
  font-size: var(--t-action);
}
:root:root .c-band-promo__card .c-btn .wp-block-button__link:hover {
  background: var(--action-primary-bg-hover);
  box-shadow: var(--action-shadow-hover);
  color: var(--action-primary-fg-hover);
}
:root:root {
  /* --sunken: the band on the sunken ground (c-ground--sunken), with a card
     that opens on a label over its title and runs to a few lines. The label
     and the lines keep to the card's spacing, as the copy's eyebrow keeps
     to the copy's. */
}
:root:root .c-band-promo--sunken .c-band-promo__card .c-eyebrow {
  margin: 0;
}
:root:root .c-band-promo--sunken .c-band-promo__card .c-body + .c-body {
  margin-block-start: 0;
}
@media (min-width: 48em) {
  :root:root .c-band-promo__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-9) var(--space-10);
  }
}

/* ==========================================================================
   band-cta --centred: the closing band in one centred column.
   ==========================================================================

   Thain Wildbur's "How can we help you today?": a title, a line and one
   button, centred on the band, with room above and below. With
   section.ornament: corners the client's artwork sits in two corners
   (--graphic-ornament-start bottom left, --graphic-ornament-end top right,
   from its artwork.tokens.json), cut off by the band's edges.
   ========================================================================== */
:root:root {
  /* Two classes, to hold its own room over the panels' widths (_widths.scss).
     A band whose box carries the ground keeps its room in the box instead. */
}
:root:root .c-band-cta.c-band-cta--centred:not(:has(.c-band-cta__box)) {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-11);
  text-align: center;
}
:root:root .c-band-cta--centred .c-band-cta__copy {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  margin-inline: auto;
}
:root:root .c-band-cta--centred .c-actions {
  justify-content: center;
}
@media (min-width: 64em) {
  :root:root .c-band-cta.c-band-cta--centred:not(:has(.c-band-cta__box)) {
    padding-block: calc(var(--space-12) * 1.6667);
  }
}

/* section.ornament: corners. */
/* stylelint-disable-next-line selector-class-pattern -- the contract's body class from settings.json. */
:root:root .cw-section-ornament--corners .c-band-cta--centred::before, :root:root .cw-section-ornament--corners .c-band-cta--centred::after {
  content: "";
  position: absolute;
  width: 16rem;
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
:root:root .cw-section-ornament--corners .c-band-cta--centred::before {
  inset-block-end: -8rem;
  inset-inline-start: -8rem;
  background-image: var(--graphic-ornament-start);
  background-position: left bottom;
}
:root:root .cw-section-ornament--corners .c-band-cta--centred::after {
  inset-block-start: -9rem;
  inset-inline-end: -9rem;
  background-image: var(--graphic-ornament-end);
  background-position: right top;
}
@media (min-width: 64em) {
  :root:root .cw-section-ornament--corners .c-band-cta--centred::before, :root:root .cw-section-ornament--corners .c-band-cta--centred::after {
    width: 36rem;
  }
  :root:root .cw-section-ornament--corners .c-band-cta--centred::before {
    inset-block-end: -18rem;
    inset-inline-start: -18rem;
  }
  :root:root .cw-section-ornament--corners .c-band-cta--centred::after {
    inset-block-start: -9rem;
    inset-inline-end: -16rem;
  }
}

/* ==========================================================================
   strip-cta: one line and one button between two hairlines.
   ==========================================================================

   Thain Wildbur's inline call to action, in 345 articles and every service
   page: "Drop us an email or give us a call", and a button. In the content
   column, on the page ground. The button sits at the end of the line from
   48em and goes under it, full width, on a phone.
   ========================================================================== */
:root:root .c-strip-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-6);
  margin-block: var(--space-10);
  padding-block: var(--space-6);
  border-block: var(--hairline) solid var(--border-soft);
}
:root:root .c-strip-cta__title {
  margin: 0;
  font-size: var(--t-card-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}
:root:root .c-strip-cta .c-actions {
  flex: 0 0 auto;
  margin: 0;
}
@media (min-width: 48em) {
  :root:root .c-strip-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ==========================================================================
   split-media: an image on one side, a title, text and a button on the other.
   ==========================================================================

   Thain Wildbur's image-and-text rows. As written, the article's call to
   action: a small image at a fixed width, the copy beside it, centred on it.
   --half is the home and about pages' row: image and copy in two equal
   columns and a larger title. --reverse puts the image on the right. One
   column on a phone, the image first.

   The image is cropped wide on a phone and square beside the copy, as on the
   live article rows.

   The button is drawn in the inverse colours (navy on Thain Wildbur), as the
   live rows draw it, whichever button class the content carries. With
   image.ornament: shape the image sits on an offset underlay in the sunken
   colour.
   ========================================================================== */
:root:root .c-split-media {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  margin-block: var(--space-7);
}
:root:root .c-split-media__media {
  flex: 0 0 auto;
  width: 100%;
}
:root:root {
  /* Its own stacking context, so the underlay sits under the image and not
     under the page's ground. */
}
:root:root .c-split-media__media .wp-block-image {
  position: relative;
  isolation: isolate;
  margin: 0;
}
:root:root {
  /* Wide on a phone and square beside the copy, as the live rows crop it;
     --half keeps the image's own shape. */
}
:root:root .c-split-media__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius-md);
}
:root:root .c-split-media--half .c-split-media__media img {
  aspect-ratio: auto;
}
:root:root .c-split-media__body {
  flex: 1 1 0;
  min-width: 0;
}
:root:root .c-split-media__body .c-title {
  margin: 0 0 var(--space-6);
  font-size: var(--t-title);
}
:root:root .c-split-media__body .c-body {
  margin: 0 0 var(--space-4);
}
:root:root .c-split-media__body .c-actions {
  margin-block-start: var(--space-7);
}
:root:root .c-split-media .c-btn .wp-block-button__link {
  background: var(--surface-inverse);
  color: var(--fg-on-dark);
}
:root:root .c-split-media--half .c-split-media__media {
  width: 100%;
}
:root:root .c-split-media--half .c-split-media__body .c-title {
  font-size: var(--t-section);
}
@media (min-width: 48em) {
  :root:root .c-split-media {
    flex-direction: row;
    align-items: center;
    gap: var(--space-11);
  }
  :root:root .c-split-media__media {
    width: 16rem;
  }
  :root:root .c-split-media__media img {
    aspect-ratio: 1;
  }
  :root:root .c-split-media--reverse {
    flex-direction: row-reverse;
  }
  :root:root .c-split-media--half .c-split-media__media {
    flex: 1 1 0;
  }
}

/* image.ornament: shape. The underlay, offset down and right. */
/* stylelint-disable-next-line selector-class-pattern -- the contract's body class from settings.json. */
:root:root .cw-image-ornament--shape .c-split-media__media .wp-block-image::after {
  content: "";
  position: absolute;
  inset: var(--space-3) calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-3);
  z-index: -1;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

/* ==========================================================================
   cards-query: posts as cards, from a Query Loop.
   ==========================================================================

   Thain Wildbur's card, on its related articles, its news and resources
   listings and its home page's latest news: the image on top, then a body
   on its own ground (card.body-ground) holding the title, the summary and
   "Read On" at its foot. The whole card is the link. One column on a phone,
   two from 48em, three from 64em.

   The card is core blocks (post-featured-image, post-title, post-excerpt)
   in a group, so the markup is WordPress's own; these rules give it the
   card's shape.
   ========================================================================== */
:root:root .c-cards-query {
  padding-block: var(--space-9);
}
:root:root {
  /* Under a post it sits outside the content column, so it holds itself to
     the banner's width, inside the page's edge. */
}
:root:root .c-cards-query--related {
  width: min(100% - 2 * var(--gutter-page-edge, var(--space-5)), var(--measure-banner));
  margin-inline: auto;
}
:root:root .c-cards-query > .c-title,
:root:root .c-cards-query > .wp-block-group__inner-container > .c-title {
  margin-block-end: var(--space-8);
}
:root:root .c-cards-query__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  margin: 0;
  padding: 0;
  list-style: none;
}
:root:root .c-cards-query__grid > li {
  display: flex;
  margin: 0;
}
:root:root .c-card--query {
  position: relative;
  flex: 1 1 auto;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--card-radius);
  background: var(--surface-page);
  box-shadow: var(--shadow-card-sm);
}
:root:root .c-card--query .c-card__image {
  margin: 0;
}
:root:root .c-card--query .c-card__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 12/7;
  -o-object-fit: cover;
     object-fit: cover;
}
:root:root .c-card--query .c-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: var(--space-7) var(--space-7);
}
:root:root .c-card--query .c-card__title {
  margin: 0 0 var(--space-2);
  font-size: var(--t-card-title);
}
:root:root .c-card--query .c-card__title a {
  color: inherit;
  text-decoration: none;
}
:root:root {
  /* The title's link covers the card. */
}
:root:root .c-card--query .c-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
:root:root .c-card--query .c-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  margin: 0;
  font-size: var(--t-small);
  color: var(--fg-medium);
}
:root:root .c-card--query .wp-block-post-excerpt__excerpt {
  margin: 0;
  padding-block-end: var(--space-4);
}
:root:root .c-card--query .wp-block-post-excerpt__more-text {
  margin: auto 0 0;
  padding-block-start: var(--space-6);
}
:root:root .c-card--query .wp-block-post-excerpt__more-link {
  color: var(--fg-link);
  text-decoration-line: underline;
}
:root:root .c-cards-query__pages {
  margin-block-start: var(--space-8);
  font-weight: var(--fw-bold);
}
@media (min-width: 48em) {
  :root:root .c-cards-query__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64em) {
  :root:root .c-cards-query__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* card.body-ground: the body's ground and the roles that go with it. raised
   (the default) and page keep the light roles. */
/* stylelint-disable selector-class-pattern -- the contract's body classes from settings.json. */
:root:root .cw-card-body-ground--sunken .c-card--query .c-card__body {
  background: var(--surface-sunken);
}

:root:root .cw-card-body-ground--inverse .c-card--query .c-card__body {
  --fg-strong: var(--fg-emphasis-on-dark);
  --fg-medium: var(--fg-on-dark);
  --fg-link: var(--fg-link-on-dark);
  background: var(--surface-inverse);
}

:root:root .cw-card-body-ground--accent .c-card--query .c-card__body {
  --fg-strong: var(--fg-on-accent);
  --fg-medium: var(--fg-on-accent-soft);
  --fg-link: var(--fg-on-accent);
  background: var(--surface-accent, var(--action-primary-bg));
}

/* stylelint-enable selector-class-pattern */
/* ==========================================================================
   split-cta: a call to action with a form, in a box.
   ==========================================================================

   The closing band is Deliverable #29's "Join our community" and "Map your
   buyer intent": one box in two halves, each c-ground--hub with its own hub
   class, so the market half is blue and the journey half green, from
   surface.hub. The form is Gravity Forms' block (Matt, 13 October 2026);
   inside a hub-coloured half its fields and button are styled here from the
   contract, whatever Gravity Forms theme the block uses.

   The variations hold a form elsewhere on a page. They frame the form and
   leave its fields to the site's own form styles:
   --1        one half across the column, the form under its heading, with
              no box drawn around it;
   --divided  the box ruled with a hairline instead of the outline and
              shadow; with --1, a form in a ruled box, with an optional head
              (c-head) above the box;
   --inverse  the box on the inverse ground (c-ground--inverse on the box),
              rounded, with an image (c-split-cta__figure) above the form half
              on a phone and beside it from 48em.
   ========================================================================== */
/* stylelint-disable selector-class-pattern -- Gravity Forms' own classes. */
:root:root {
  /* The box runs to the banner's width, wider than the content column it
     sits in, centred on it; on a narrower screen it keeps the page edge. */
}
:root:root .c-split-cta__box {
  display: grid;
  width: min(var(--measure-banner), 100vw - 2 * min(var(--gutter-page-edge), 5vw));
  margin-inline: calc(50% - min(var(--measure-banner), 100vw - 2 * min(var(--gutter-page-edge), 5vw)) / 2);
  border: var(--card-border-width) solid var(--surface-inverse);
  box-shadow: var(--shadow-card-lg);
}
:root:root .c-split-cta__half {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-6);
}
:root:root .c-split-cta__half--action {
  justify-content: center;
}
:root:root .c-split-cta .c-title {
  font-size: var(--t-title, var(--t-section));
}
:root:root .c-split-cta .c-lead,
:root:root .c-split-cta .c-body {
  margin: 0;
}
:root:root {
  /* On a hub's colour the lead and the text take the ground's text colour. */
}
:root:root .c-split-cta :where(.c-ground--hub) .c-lead,
:root:root .c-split-cta :where(.c-ground--hub) .c-body {
  color: var(--fg-on-hub);
}
:root:root {
  /* The lead reads as the title's second line. */
}
:root:root .c-split-cta .c-lead {
  margin-block-start: calc(-1 * var(--space-1));
  font-weight: var(--fw-semi);
  line-height: var(--lh-normal);
}
:root:root .c-split-cta .c-actions {
  margin-block-start: var(--space-2);
}
:root:root {
  /* One action at its own width, with the contract's corner and shadow. */
}
:root:root .c-split-cta .c-btn {
  width: auto;
}
:root:root .c-split-cta .c-btn .wp-block-button__link {
  width: auto;
  padding: var(--action-padding-block) var(--action-padding-inline);
  border: var(--action-border-width) solid var(--surface-inverse);
  border-radius: var(--action-radius);
  box-shadow: var(--action-shadow);
  font-size: var(--t-action);
}
:root:root .c-split-cta .c-btn .wp-block-button__link:hover {
  box-shadow: var(--action-shadow-hover);
}
:root:root .c-split-cta__form-note {
  margin: 0;
  padding: var(--space-3);
  border: var(--hairline) dashed currentcolor;
  font-size: var(--t-small);
}
:root:root {
  /* Gravity Forms, inside a hub-coloured half. */
}
:root:root .c-split-cta :where(.c-ground--hub) .gform_wrapper {
  margin: var(--space-2) 0 0;
}
:root:root .c-split-cta :where(.c-ground--hub) .gform_wrapper .gform_fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
:root:root .c-split-cta :where(.c-ground--hub) .gform_wrapper .gfield {
  margin: 0;
  padding: 0;
}
:root:root .c-split-cta :where(.c-ground--hub) .gform_wrapper .gfield_label {
  color: var(--fg-on-hub);
  font-size: var(--t-small);
  font-weight: var(--fw-semi);
}
:root:root {
  /* Gravity Forms colours its sub-labels, required marker, descriptions and
     consent line for a white page; on the hub ground they take its text
     colour. */
}
:root:root .c-split-cta :where(.c-ground--hub) .gform_wrapper :is(.gform-field-label, .gfield_required, .gfield_description) {
  color: var(--fg-on-hub);
}
:root:root .c-split-cta :where(.c-ground--hub) .gform_wrapper .gform-field-label a {
  color: inherit;
}
:root:root {
  /* The status grounds are tints. Laid over the field ground, an error or a
     confirmation reads as it would on a white page, not on the hub colour. */
}
:root:root .c-split-cta :where(.c-ground--hub) .gform_wrapper :is(.gform_validation_errors, .validation_message) {
  background: linear-gradient(var(--status-error-bg), var(--status-error-bg)), var(--field-bg);
  color: var(--status-error-fg);
}
:root:root .c-split-cta :where(.c-ground--hub) .gform_wrapper .validation_message {
  padding: var(--space-1) var(--space-2);
}
:root:root .c-split-cta :where(.c-ground--hub) .gform_wrapper .gform_validation_errors :is(.gform_submission_error, ol, a) {
  color: inherit;
}
:root:root .c-split-cta :where(.c-ground--hub) .gform_confirmation_message {
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(var(--status-success-bg), var(--status-success-bg)), var(--field-bg);
  color: var(--status-success-fg);
}
:root:root .c-split-cta :where(.c-ground--hub) .gform_wrapper :is(input[type=text], input[type=email]) {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--field-height);
  padding: var(--space-2) var(--space-3);
  border: var(--card-border-width) solid var(--surface-inverse);
  border-radius: var(--field-radius);
  background: var(--field-bg);
  color: var(--field-fg);
  font-size: var(--t-body);
}
:root:root .c-split-cta :where(.c-ground--hub) .gform_wrapper .gform_footer {
  margin: var(--space-3) 0 0;
  padding: 0;
}
:root:root .c-split-cta :where(.c-ground--hub) .gform_wrapper :is(.gform_button, .gform_footer [type=submit]) {
  padding: var(--space-3) var(--space-5);
  border: var(--action-border-width) solid var(--action-primary-bg);
  border-radius: var(--action-radius);
  background: var(--action-primary-bg);
  box-shadow: var(--action-shadow);
  color: var(--action-primary-fg);
  font-size: var(--t-body);
  font-weight: var(--fw-bold);
  cursor: pointer;
}
:root:root .c-split-cta :where(.c-ground--hub) .gform_wrapper :is(.gform_button, .gform_footer [type=submit]):hover {
  background: var(--action-primary-bg-hover);
  box-shadow: var(--action-shadow-hover);
  color: var(--action-primary-fg-hover);
}
:root:root {
  /* --1: the box keeps to the column and draws nothing; the half has no
     padding of its own and lets the form run the column's width. */
}
:root:root .c-split-cta--1 .c-split-cta__box {
  width: auto;
  margin-inline: 0;
  border: 0;
  box-shadow: none;
}
:root:root .c-split-cta--1 .c-split-cta__half {
  align-items: stretch;
  padding: 0;
}
:root:root {
  /* --divided: a hairline round the box. With --1 the half is padded
     inside it. */
}
:root:root .c-split-cta--divided .c-split-cta__box {
  border: var(--hairline) solid var(--border-faint);
  box-shadow: none;
}
:root:root .c-split-cta--1.c-split-cta--divided .c-split-cta__half {
  padding: var(--space-7) var(--space-6);
}
:root:root {
  /* --inverse: the box carries the ground and the padding, as wide as the
     column up to the banner's measure. */
}
:root:root .c-split-cta--inverse .c-split-cta__box {
  width: auto;
  max-width: var(--measure-banner);
  margin-inline: auto;
  gap: var(--space-7);
  padding: var(--space-9) var(--space-6);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: none;
}
:root:root .c-split-cta--inverse .c-split-cta__half {
  align-items: stretch;
  padding: 0;
}
:root:root {
  /* The image: centred over the form on a phone, filling its column beside
     it. */
}
:root:root .c-split-cta__figure {
  justify-self: center;
  margin: 0;
}
:root:root .c-split-cta__figure img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 48em) {
  :root:root .c-split-cta__box {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  :root:root .c-split-cta__half {
    padding: var(--space-9) calc(var(--space-9) + var(--space-1));
  }
  :root:root .c-split-cta--1 .c-split-cta__box {
    grid-template-columns: minmax(0, 1fr);
  }
  :root:root .c-split-cta--1.c-split-cta--divided .c-split-cta__half {
    padding: var(--space-9) calc(var(--space-9) + var(--space-1));
  }
  :root:root .c-split-cta--inverse .c-split-cta__box {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: center;
    gap: var(--space-9);
    padding: var(--space-11) var(--space-6);
  }
  :root:root {
    /* An Image block with no image draws nothing, and the copy takes the
       box. */
  }
  :root:root .c-split-cta--inverse .c-split-cta__half:only-child {
    grid-column: 1/-1;
  }
  :root:root .c-split-cta__figure {
    justify-self: stretch;
  }
}

/* ==========================================================================
   cards-plans: plan cards in a row, each with the plan's name, who it is
   for, a price and an action.
   ==========================================================================

   A card (c-plan) is a column of the plan's parts: its name, who it is for,
   the price, an optional note, and the action. An action that ends the card
   sits at its foot, so the actions of a row line up. Under them, optionally,
   what's included: a rule, a label and a list of ticks.

   --4 and --3 say how many go across. --1 is one plan across the column with
   its head split: the name and who it is for on the left, the price and the
   action on the right, and what's included under them in two columns.
   --marked outlines each card in the accent with a heavier top edge and sets
   the price as a figure; --sunken puts each card on the sunken ground.

   One column at base. --4 runs two across from 48em and four from 64em;
   --3 three across from 48em; --1 splits its head from 48em.
   ========================================================================== */
:root:root .c-cards-plans {
  padding-block: var(--space-9);
}
:root:root {
  /* Full width, the cards keep the page edge. */
}
:root:root .c-cards-plans.alignfull {
  padding-inline: min(var(--gutter-page-edge), 5vw);
}
:root:root .c-cards-plans,
:root:root :where(.c-cards-plans) .wp-block-group {
  margin-block: 0;
}
:root:root .c-cards-plans .c-head {
  margin-block-end: var(--space-8);
}
:root:root .c-cards-plans__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
:root:root {
  /* The card. Its parts are its own spacing, so the theme's margins go. */
}
:root:root .c-plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-6) var(--space-6);
  border: var(--card-border-width) solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--surface-page);
  box-shadow: var(--shadow-card-tinted);
  color: var(--fg-medium);
}
:root:root :is(.c-plan, .c-plan > .wp-block-group__inner-container, .c-plan__head, .c-plan__head > .wp-block-group__inner-container, .c-plan__about, .c-plan__about > .wp-block-group__inner-container, .c-plan__cost, .c-plan__cost > .wp-block-group__inner-container) > * {
  margin-block: 0;
}
:root:root .c-plan__name {
  font-size: var(--t-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  text-wrap: balance;
}
:root:root .c-plan__for {
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-medium);
  text-wrap: pretty;
}
:root:root {
  /* The price on one line, the amount strong: "From £79 per month". */
}
:root:root .c-plan__price {
  font-size: var(--t-lead);
  line-height: var(--lh-relaxed);
  color: var(--fg-medium);
}
:root:root .c-plan__price strong {
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
}
:root:root {
  /* An action that ends the card goes to its foot. */
}
:root:root .c-plan__action:last-child {
  margin-block-start: auto;
}
:root:root {
  /* The label keeps its arrow beside it, however narrow the card. */
}
:root:root .c-plan__action .c-link {
  font-size: var(--t-body);
  font-weight: var(--fw-semi);
  color: var(--fg-strong);
  white-space: nowrap;
  text-decoration-line: underline;
  text-decoration-color: var(--link-rule);
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  text-decoration-thickness: var(--link-rule-thickness);
  text-underline-offset: var(--link-rule-offset);
}
:root:root {
  /* The arrow stands clear of the link's rule. */
}
:root:root .c-plan__action .c-link__arrow {
  display: inline-block;
  margin-inline-start: var(--space-2);
  opacity: 1;
}
:root:root {
  /* A button keeps its own width, with the contract's corner and shadow. */
}
:root:root .c-plan .c-btn,
:root:root .c-cards-plans__actions .c-btn {
  width: auto;
}
:root:root :is(.c-plan, .c-cards-plans__actions) .c-btn .wp-block-button__link {
  width: auto;
  padding: var(--action-padding-block) var(--action-padding-inline);
  border: var(--action-border-width) solid var(--action-primary-bg);
  border-radius: var(--action-radius);
  box-shadow: var(--action-shadow);
  font-size: var(--t-action);
}
:root:root :is(.c-plan, .c-cards-plans__actions) .c-btn .wp-block-button__link:hover {
  background: var(--action-primary-bg-hover);
  box-shadow: var(--action-shadow-hover);
  color: var(--action-primary-fg-hover);
}
:root:root {
  /* The note: a label that opens to a sentence (core Details), such as how
     often the price is reviewed. */
}
:root:root .c-plan__note {
  font-size: var(--t-tag);
  line-height: var(--lh-normal);
  color: var(--fg-medium);
}
:root:root .c-plan__note summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  list-style: none;
}
:root:root .c-plan__note summary::-webkit-details-marker {
  display: none;
}
:root:root {
  /* An "i" in a disc after the label, in place of the disclosure marker. */
}
:root:root .c-plan__note summary::after {
  display: inline-grid;
  place-items: center;
  inline-size: 1.1em;
  block-size: 1.1em;
  border-radius: var(--radius-pill);
  background: var(--fg-medium);
  font-weight: var(--fw-bold);
  line-height: var(--lh-flush);
  color: var(--surface-page);
  content: "i";
}
:root:root .c-plan__note[open] > :not(summary) {
  margin-block-start: var(--space-2);
}
:root:root {
  /* The Separator block, across the card whatever width a theme gives it.
     Written in context: a theme's cap on the separator's width (Kadence's
     .wp-block-separator:not(.is-style-wide):not(.is-style-dots)) is as
     strong as a single class here, so stylesheet order would decide. */
}
:root:root .c-plan .c-plan__rule {
  inline-size: 100%;
  max-inline-size: none;
  margin: var(--space-3) 0;
  border: 0;
  border-block-start: var(--hairline) solid var(--border-faint);
  opacity: 1;
}
:root:root .c-plan__included {
  font-size: var(--t-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-relaxed);
  color: var(--fg-strong);
}
:root:root {
  /* What's included: a tick before each point, drawn as two sides of a
     square turned on its corner. */
}
:root:root .c-plan__points {
  display: grid;
  gap: var(--space-1) var(--space-7);
  padding-inline-start: 0;
  list-style: none;
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-strong);
}
:root:root .c-plan__points li {
  position: relative;
  margin: 0;
  padding-inline-start: calc(var(--space-5) + var(--space-3));
}
:root:root .c-plan__points li::before {
  position: absolute;
  inset-block-start: calc(0.5lh - 0.45em);
  inset-inline-start: 0.3em;
  inline-size: 0.4em;
  block-size: 0.75em;
  border: solid var(--list-marker-color);
  border-width: 0 0.12em 0.12em 0;
  transform: rotate(45deg);
  content: "";
}
:root:root {
  /* A button under the cards. */
}
:root:root .c-cards-plans__actions {
  margin-block-start: var(--space-8);
}
:root:root {
  /* --marked: each card outlined in the accent, with a heavier top edge,
     and its price set as a figure: "from" over the amount, the amount large
     and the period beside it. In a narrow card the period wraps beside the
     amount while its longest word fits there, and goes under it when not.
     No word in the figure breaks, whatever the theme's content allows
     (Kadence breaks long words in .entry-content). */
}
:root:root .c-cards-plans--marked .c-plan {
  border-color: var(--border-accent);
  border-block-start-width: var(--space-3);
}
:root:root .c-cards-plans--marked .c-plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  -moz-column-gap: var(--space-2);
       column-gap: var(--space-2);
  font-size: var(--t-body);
  line-height: var(--lh-snug);
  color: var(--fg-muted);
  word-break: normal;
}
:root:root .c-cards-plans--marked .c-plan__from {
  flex-basis: 100%;
  font-size: var(--t-small);
}
:root:root .c-cards-plans--marked .c-plan__period {
  flex: 1 1 0%;
}
:root:root .c-cards-plans--marked .c-plan__price strong {
  font-size: var(--t-h3);
  font-weight: var(--fw-semi);
  line-height: var(--lh-flush);
}
:root:root {
  /* --sunken: each card on the sunken ground, without an outline. */
}
:root:root .c-cards-plans--sunken .c-plan {
  border-color: transparent;
  background: var(--surface-sunken);
  box-shadow: none;
}
:root:root {
  /* --1: one plan across the column. */
}
:root:root .c-plan__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
:root:root :is(.c-plan__about, .c-plan__cost) {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
:root:root .c-cards-plans--1 .c-plan__name {
  font-size: var(--t-section);
}
:root:root .c-cards-plans--1 .c-plan__price {
  font-size: var(--t-h3);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}
@media (min-width: 48em) {
  :root:root .c-cards-plans {
    padding-block: var(--space-10);
  }
  :root:root .c-cards-plans--4 .c-cards-plans__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :root:root .c-cards-plans--3 .c-cards-plans__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  :root:root .c-plan__head {
    flex-direction: row;
    align-items: center;
    gap: var(--space-7);
  }
  :root:root :is(.c-plan__about, .c-plan__cost) {
    flex: 1 1 0;
    min-inline-size: 0;
  }
  :root:root .c-plan__cost {
    align-items: flex-end;
    text-align: end;
  }
  :root:root {
    /* Four points or more run in two columns; three or fewer stay in one. */
  }
  :root:root .c-cards-plans--1 .c-plan__points:has(> li:nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64em) {
  :root:root .c-cards-plans {
    padding-block: var(--space-11);
  }
  :root:root .c-cards-plans--4 .c-cards-plans__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ==========================================================================
   inset-cta: one boxed call to action in the content column.
   ==========================================================================

   A mark (a logo or an avatar, the Image block), a short heading and a
   sentence, and one button, in a box on its own ground (c-ground--sunken in
   the pattern; any ground class will do). Stacked and centred at base and
   at 48em; from 64em in a row, the mark, the copy and the button, each
   centred on the others.

   The mark is round, the Image block's Rounded style in the pattern. With
   the Default style chosen in the editor it keeps the image's own shape,
   for a graphic that isn't a disc. A mark saved with no style stays round.

   --backdrop: the mark is a photo that fills the box, cropped to it, and the
   copy and the button sit on a see-through card over it. The box carries
   the inverse ground, which shows while the photo loads and sets the card's
   type light. From 64em the card keeps to the reading measure at the box's
   end.
   ========================================================================== */
:root:root .c-inset-cta {
  margin-block: 0;
  padding-block: var(--space-7);
}
:root:root .c-inset-cta .wp-block-group {
  margin-block: 0;
}
:root:root .c-inset-cta__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-5);
  border-radius: var(--radius-md);
  text-align: center;
}
:root:root :is(.c-inset-cta__box, .c-inset-cta__box > .wp-block-group__inner-container, .c-inset-cta__copy, .c-inset-cta__copy > .wp-block-group__inner-container) > * {
  margin-block: 0;
}
:root:root {
  /* The mark is round: a logo drawn as a disc, or a photo cropped to one. */
}
:root:root .c-inset-cta__mark {
  flex: none;
  margin: 0;
}
:root:root .c-inset-cta__mark img {
  display: block;
  inline-size: calc(var(--space-12) - var(--space-4));
  block-size: auto;
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  -o-object-fit: cover;
     object-fit: cover;
}
:root:root .c-inset-cta__mark.is-style-default img {
  aspect-ratio: auto;
  border-radius: 0;
  -o-object-fit: contain;
     object-fit: contain;
}
:root:root .c-inset-cta__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
}
:root:root .c-inset-cta__title {
  font-size: var(--t-card-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  text-wrap: balance;
}
:root:root .c-inset-cta__body {
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-medium);
  text-wrap: pretty;
}
:root:root .c-inset-cta__body a {
  color: inherit;
}
:root:root .c-inset-cta__action {
  flex: none;
  justify-content: center;
  margin: 0;
}
:root:root {
  /* One action at its own width, with the contract's corner and shadow. */
}
:root:root .c-inset-cta .c-btn {
  width: auto;
}
:root:root .c-inset-cta .c-btn .wp-block-button__link {
  width: auto;
  padding: var(--action-padding-block) var(--action-padding-inline);
  border: var(--action-border-width) solid var(--action-primary-bg);
  border-radius: var(--action-radius);
  box-shadow: var(--action-shadow);
  font-size: var(--t-action);
}
:root:root .c-inset-cta .c-btn .wp-block-button__link:hover {
  background: var(--action-primary-bg-hover);
  box-shadow: var(--action-shadow-hover);
  color: var(--action-primary-fg-hover);
}
:root:root .c-inset-cta--backdrop .c-inset-cta__box {
  position: relative;
  isolation: isolate;
  overflow: clip;
  align-items: stretch;
  text-align: start;
}
:root:root .c-inset-cta--backdrop .c-inset-cta__mark {
  position: absolute;
  inset: 0;
  z-index: -1;
}
:root:root .c-inset-cta--backdrop .c-inset-cta__mark img {
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  -o-object-fit: cover;
     object-fit: cover;
}
:root:root .c-inset-cta__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-5);
  border: var(--hairline) solid var(--border-on-dark);
  border-radius: var(--radius-md);
}
:root:root :is(.c-inset-cta__card, .c-inset-cta__card > .wp-block-group__inner-container) > * {
  margin-block: 0;
}
:root:root .c-inset-cta--backdrop .c-inset-cta__action {
  justify-content: flex-start;
}
@media (min-width: 48em) {
  :root:root .c-inset-cta {
    padding-block: var(--space-8);
  }
}
@media (min-width: 64em) {
  :root:root .c-inset-cta {
    padding-block: var(--space-9);
  }
  :root:root .c-inset-cta__box {
    flex-direction: row;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-7);
    text-align: start;
  }
  :root:root .c-inset-cta__copy {
    flex: 1 1 0;
  }
  :root:root .c-inset-cta--backdrop .c-inset-cta__box {
    justify-content: flex-end;
  }
  :root:root .c-inset-cta__card {
    flex: 0 1 var(--measure-prose);
    padding: var(--space-8) var(--space-7);
  }
}

/* ==========================================================================
   strip-links: a short row of links or buttons, and little else.
   ==========================================================================

   A way back, a few quick links, or a menu of the next places to go. A
   strip is a pause between bands, so it is shallower than a band, and its
   title is a step down from a band's: it heads a few links, not a section.

   The buttons keep their own width and wrap, on a phone too: a strip is a
   row of choices, not one call to action, so they don't stretch across the
   screen the way a band's action does. A width set on a button in the
   editor stays, and the editor's vertical orientation stacks them.

   --4 sets the links out in four groups, each a short heading over its
   list: stacked on a phone, two across once the panel is 480px wide, four
   from 640px, by the panel's own width. --marked puts an arrow at the end of
   every link in those lists. A way back (c-strip-links__back on a button)
   takes a chevron pointing back, from the same mask.

   --3 is a line over three buttons that share the row: each starts at its
   own width and the rest of the row is shared out between them. On a phone
   they stack, full width. A button that opens a video call
   (c-strip-links__video) takes a camera before its label.

   The row's classes work outside the panel too, for links in a column of
   another panel (panels don't nest): c-strip-links__row on a Buttons block.

   The related-guide line (c-strip-links__link, __kicker, __title, __sub)
   is styled with the reading panels, in _article.scss.
   ========================================================================== */
:root:root .c-strip-links {
  padding-block: var(--space-6);
  padding-inline: var(--gutter);
  container: c-strip-links/inline-size;
}
:root:root .c-strip-links .c-head {
  margin-block-end: var(--space-6);
}
:root:root .c-strip-links .c-title {
  font-size: var(--t-h3);
}
:root:root {
  /* The row of buttons, stated here as well as by core's layout, which
     only a WordPress render adds. */
}
:root:root .c-strip-links__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}
:root:root {
  /* Stacked, by the editor's vertical orientation, and lined up as its
     justification says. */
}
:root:root .c-strip-links__row.is-vertical {
  flex-direction: column;
  align-items: flex-start;
}
:root:root .c-strip-links__row.is-vertical.is-content-justification-center {
  align-items: center;
}
:root:root .c-strip-links__row.is-vertical.is-content-justification-right {
  align-items: flex-end;
}
:root:root .c-strip-links__row .c-btn:not(.has-custom-width),
:root:root .c-strip-links__row .c-btn:not(.has-custom-width) .wp-block-button__link {
  width: auto;
}
:root:root {
  /* --3: stacked and full width on a phone; from 48em in a row, each
     button growing from its own width to fill it. */
}
:root:root .c-strip-links--3 .c-strip-links__row {
  flex-direction: column;
  align-items: stretch;
}
:root:root .c-strip-links--3 .c-strip-links__row .c-btn .wp-block-button__link {
  width: 100%;
}
:root:root {
  /* The line over the buttons, with no title above it. */
}
:root:root .c-strip-links--3 .c-head .c-lead:first-child {
  margin-block-start: 0;
}
:root:root {
  /* The way back: a chevron before the label, in the label's colour. */
}
:root:root .c-strip-links__back .wp-block-button__link::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 1em;
  block-size: 1em;
  background: currentcolor;
  -webkit-mask: var(--mask-chevron-down) center/contain no-repeat;
          mask: var(--mask-chevron-down) center/contain no-repeat;
  rotate: 90deg;
}
:root:root {
  /* A video call: a camera before the label, in the label's colour. */
}
:root:root .c-strip-links__video .wp-block-button__link::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 1em;
  block-size: 1em;
  background: currentcolor;
  -webkit-mask: var(--mask-video) center/contain no-repeat;
          mask: var(--mask-video) center/contain no-repeat;
}
:root:root {
  /* --4: the groups. */
}
:root:root .c-strip-links__groups {
  display: grid;
  gap: var(--space-7);
}
:root:root .c-strip-links__term {
  margin: 0;
  padding-block-end: var(--space-2);
  border-block-end: calc(2 * var(--hairline)) solid var(--border-accent);
  font-size: var(--t-card-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  color: var(--fg-strong);
  text-wrap: pretty;
}
:root:root {
  /* A group's heading can be the link to its own page. */
}
:root:root .c-strip-links__term a {
  color: inherit;
  text-decoration: none;
}
:root:root .c-strip-links__term a:hover {
  color: var(--fg-link);
}
:root:root .c-strip-links__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}
:root:root .c-strip-links__list li {
  margin: 0;
  padding: 0;
}
:root:root .c-strip-links__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--t-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-strong);
  text-decoration: none;
}
:root:root .c-strip-links__list a:hover {
  background: var(--surface-marker);
}
:root:root .c-strip-links__list a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
:root:root {
  /* --marked: the arrow sits at the end of the line, against the column's
     edge, level with the first line of a link that wraps. */
}
:root:root .c-strip-links--marked .c-strip-links__list a {
  gap: var(--space-1);
  padding-inline-end: 0;
}
:root:root .c-strip-links--marked .c-strip-links__list a::after {
  content: "";
  flex: 0 0 auto;
  inline-size: 1em;
  block-size: 1em;
  background: currentcolor;
  -webkit-mask: var(--mask-chevron-down) center/contain no-repeat;
          mask: var(--mask-chevron-down) center/contain no-repeat;
  rotate: -90deg;
}
@media (min-width: 48em) {
  :root:root .c-strip-links--3 .c-strip-links__row {
    flex-direction: row;
  }
  :root:root .c-strip-links--3 .c-strip-links__row .c-btn {
    flex: 1 1 auto;
  }
}
@container c-strip-links (min-width: 480px) {
  :root:root .c-strip-links--4 .c-strip-links__groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container c-strip-links (min-width: 640px) {
  :root:root .c-strip-links--4 .c-strip-links__groups {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 64em) {
  :root:root .c-strip-links {
    padding-block: var(--space-7);
  }
  :root:root .c-strip-links .c-head {
    margin-block-end: var(--space-7);
  }
  :root:root .c-strip-links__groups {
    -moz-column-gap: var(--space-8);
         column-gap: var(--space-8);
  }
}

/* ==========================================================================
   strip-logos: logos or award badges in one row, with an optional head.
   ==========================================================================

   Partners, clients, platforms, awards. Each logo is a core Image block at
   its own size, so a logo is uploaded at the size it should show. The row
   spreads across the panel; where it runs out of room the logos shrink
   together to keep one row, as a phone needs.

   The head is a short label over the row (c-strip-logos__label, a
   paragraph or a heading), or a title and a line of text (c-head), a step
   smaller than a band's: a strip is a pause between bands.

   --center gathers the row in the middle instead, the logos well apart on
   a wide screen. --2 sets them two across on a phone, each in its half, an
   odd last one across both; one row again from 48em.

   Inside a column of another panel's copy the look comes without the panel
   (panels don't nest): a group with c-strip-logos__box, and a ground for
   its colour, holds the label and the row.
   ========================================================================== */
:root:root {
  /* The row form's room; the list form below keeps its own. */
}
:root:root .c-strip-logos:not(:has(.c-strip-logos__list)) {
  padding-block: var(--space-6);
  padding-inline: var(--gutter);
}
:root:root .c-strip-logos .c-head {
  margin-block-end: var(--space-7);
}
:root:root .c-strip-logos .c-title {
  font-size: var(--t-h3);
}
:root:root .c-strip-logos__label {
  margin: 0 0 var(--space-3);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  color: var(--fg-strong);
  text-wrap: pretty;
}
:root:root {
  /* A label set in bold with the editor's Bold button stays the label's colour. */
}
:root:root .c-strip-logos__label strong {
  color: inherit;
  font-weight: var(--fw-bold);
}
:root:root .c-strip-logos__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
:root:root .c-strip-logos__row .wp-block-image {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
}
:root:root {
  /* The logo fills its share: its own width while the row has room, less
     when the row shrinks. A logo with no width of its own (an SVG drawn
     to a viewBox) still gets a share instead of none. */
}
:root:root .c-strip-logos__row img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
:root:root .c-strip-logos--center .c-strip-logos__row {
  justify-content: center;
}
:root:root {
  /* --2: two across on a phone. */
}
:root:root .c-strip-logos--2 .c-strip-logos__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  gap: var(--space-4);
}
:root:root .c-strip-logos--2 .c-strip-logos__row .wp-block-image:last-child:nth-child(odd) {
  grid-column: 1/-1;
}
:root:root {
  /* The box: the label and the row on a ground, in a column of copy. */
}
:root:root .c-strip-logos__box {
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-md);
}
@media (min-width: 48em) {
  :root:root .c-strip-logos--2 .c-strip-logos__row {
    display: flex;
  }
}
:root:root {
  /* A wide strip sets its logos further apart; a box keeps the narrow gap,
     as it shares a column with the copy. */
}
@media (min-width: 64em) {
  :root:root .c-strip-logos .c-strip-logos__row {
    gap: var(--space-6);
  }
  :root:root .c-strip-logos--center .c-strip-logos__row {
    gap: var(--space-12);
  }
  :root:root .c-strip-logos__box {
    padding: var(--space-7) var(--space-5);
  }
}
:root:root {
  /* The list form: a centred row of logos at one height (Thain Wildbur's
     accreditations). Each logo keeps its own width at the row's height, which
     comes down on a phone; the row wraps and stays centred. */
}
:root:root .c-strip-logos:has(> .c-strip-logos__list) {
  padding-block: var(--space-9);
}
:root:root .c-strip-logos__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-9);
}
:root:root .c-strip-logos__list .wp-block-image {
  flex: 0 0 auto;
  margin: 0;
}
:root:root .c-strip-logos__list img {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(2.25rem, 1.5rem + 2.6vw, 4.375rem);
  -o-object-fit: contain;
     object-fit: contain;
}

/* ==========================================================================
   Variants added for Deliverable #29: cards-guides --2, strip-facts --divided,
   the split head, the content measure, and the Checks list style.
   ========================================================================== */
/* stylelint-disable selector-class-pattern -- is-style-checks is WordPress's block style class. */
:root:root {
  /* Inside a full-width band, hold the content to the content column
     (measure.content) rather than the banner's width. */
}
:root:root .c-measure--content {
  max-width: var(--measure-content);
}
:root:root {
  /* A head in two: eyebrow and title on the left, lead on the right, on a
     shared baseline. One column until 48em. */
}
:root:root .c-head--split {
  display: grid;
  gap: var(--space-6) var(--space-10);
  align-items: end;
}
:root:root .c-head--split .c-lead {
  margin: 0;
}
@media (min-width: 48em) {
  :root:root .c-head--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
:root:root {
  /* cards-guides --2: two articles across, each with an image at the top. */
}
:root:root .c-cards-guides--2 > .c-head,
:root:root .c-cards-guides--2 > .wp-block-group__inner-container > .c-head {
  margin-block-end: calc(var(--space-8) + var(--space-1));
}
:root:root .c-cards-guides--2 .c-cards-guides__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-7);
}
:root:root .c-card--article {
  gap: var(--space-3);
  padding: 0 0 var(--space-7);
  border-color: var(--fg-strong);
  box-shadow: none;
  overflow: hidden;
}
:root:root {
  /* Through the classic wrapper too (panels/_classic-groups.scss). */
}
:root:root :is(.c-card--article, .c-card--article > .wp-block-group__inner-container) > :not(.wp-block-group__inner-container) {
  margin-inline: var(--space-6);
}
:root:root :is(.c-card--article, .c-card--article > .wp-block-group__inner-container) > .c-card__image {
  margin: 0 0 var(--space-4);
  border-block-end: var(--card-border-width) solid var(--fg-strong);
}
:root:root .c-card--article .c-card__title {
  line-height: var(--lh-normal);
}
:root:root .c-card--article .c-card__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  -o-object-fit: cover;
     object-fit: cover;
}
:root:root .c-card__byline {
  margin-block: 0;
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
:root:root .c-card--article .c-card__title a {
  color: inherit;
  text-decoration: none;
}
:root:root .c-card--article .c-card__title a:hover {
  text-decoration-line: underline;
  text-decoration-color: var(--link-rule);
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
:root:root .c-card--article .c-body + .c-body {
  margin-block-start: 0;
}
:root:root .c-card--article .c-card__action {
  margin-block: auto 0;
  padding-block-start: var(--space-4);
}
:root:root .c-card--article .c-card__action .c-link {
  font-size: var(--t-small);
  font-weight: var(--fw-semi);
  text-decoration-line: underline;
  text-decoration-color: var(--link-rule);
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  text-decoration-thickness: var(--link-rule-thickness);
  text-underline-offset: var(--link-rule-offset);
}
:root:root {
  /* strip-facts --divided: the figures in one light, outlined box, ruled
     between them; stacked and ruled between rows on a phone. */
}
:root:root .c-strip-facts--divided {
  border-block-end: 0;
}
:root:root .c-strip-facts--divided .c-strip-facts__grid {
  gap: 0;
  border: var(--card-border-width) solid var(--fg-strong);
  background: var(--surface-page);
}
:root:root .c-strip-facts__grid--3 {
  grid-template-columns: 1fr;
}
:root:root .c-strip-facts__cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: calc(var(--space-6) + var(--space-1)) var(--space-7);
}
:root:root .c-strip-facts--divided .c-strip-facts__cell + .c-strip-facts__cell {
  border-block-start: var(--card-border-width) solid var(--fg-strong);
}
:root:root .c-strip-facts--divided .c-stat {
  white-space: nowrap;
}
:root:root .c-strip-facts--divided .c-stat__of {
  font-size: var(--t-small);
  font-weight: var(--fw-semi);
  color: var(--fg-strong);
}
@media (min-width: 48em) {
  :root:root .c-strip-facts__grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  :root:root .c-strip-facts--divided .c-strip-facts__cell + .c-strip-facts__cell {
    border-block-start: 0;
    border-inline-start: var(--card-border-width) solid var(--fg-strong);
  }
}
:root:root {
  /* The Checks list style: short, bold points, each after a square marker
     beside its text. The item stays a block with the marker in its
     padding: as a flex row, bold, italic or a link inside an item became
     its own column once the line wrapped. */
}
:root:root .is-style-checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block: 0;
  padding-inline-start: 0;
  list-style: none;
  font-size: var(--t-body);
  font-weight: var(--fw-semi);
  line-height: var(--lh-normal);
  color: var(--fg-strong);
}
:root:root .is-style-checks li {
  position: relative;
  margin: 0;
  padding-inline-start: calc(var(--list-marker-size) + var(--space-3));
}
:root:root .is-style-checks li::before {
  position: absolute;
  inset-block-start: calc((1lh - var(--list-marker-size)) / 2);
  inset-inline-start: 0;
  inline-size: var(--list-marker-size);
  block-size: var(--list-marker-size);
  background: var(--list-marker-color);
  content: "";
}

/* ==========================================================================
   cards-guides --1, --query, --4 --marked --sunken
   ==========================================================================

   panels/_hub.scss lays out the grid and panels/_home-variants.scss draws
   --2's article cards. These variants:

   - --1: one guide across the column, its picture beside the title, text
     and a button; the picture above them on a phone. The picture keeps its
     own width up to 40% of the card, and a width set on the image in the
     editor holds it smaller. The card is one link: its button reaches over
     the whole card, which takes the sunken ground under the pointer.
   - --query: the grid is a Query Loop's post template (c-cards-guides__grid),
     so the cards are the newest posts rather than picked by hand. Each post
     is an article card, dressed as --2's or --3's; a card can carry its
     terms, a line of detail and a button, and pagination follows the grid.
   - --4: four across from 64em, two from 48em.
   - --marked: the guides numbered in order, from an ordered List. Each item
     is a card with its number in a disc, and its link reaches over the
     card. The numbers are a counter, so they follow the order; a bold
     title marks the place to start.
   - --sunken: full width on the sunken ground, its content held to the
     banner's width (c-measure).
   ========================================================================== */
:root:root {
  /* --1 */
}
:root:root .c-cards-guides--1 .c-cards-guides__grid {
  grid-template-columns: minmax(0, 1fr);
}
:root:root .c-cards-guides--1 .c-card {
  display: grid;
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
:root:root .c-cards-guides--1 .c-card__image {
  margin: 0;
}
:root:root .c-cards-guides--1 .c-card__image img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--image-radius);
}
:root:root {
  /* The copy, one block under another, straight in the card or in the
     inner container a classic theme adds (panels/_classic-groups.scss). */
}
:root:root .c-cards-guides--1 :is(.c-card__copy, .c-card__copy > .wp-block-group__inner-container) > * {
  margin-block: 0;
}
:root:root .c-cards-guides--1 :is(.c-card__copy, .c-card__copy > .wp-block-group__inner-container) > * + * {
  margin-block-start: var(--space-3);
}
:root:root .c-cards-guides--1 :is(.c-card__copy, .c-card__copy > .wp-block-group__inner-container) > .c-actions {
  margin-block-start: var(--space-5);
}
:root:root {
  /* The button keeps its own width on a phone too, and wears the
     contract's button corner. */
}
:root:root .c-cards-guides--1 .c-btn {
  width: auto;
}
:root:root .c-cards-guides--1 .c-btn .wp-block-button__link {
  width: auto;
  padding: var(--action-padding-block) var(--action-padding-inline);
  border: var(--action-border-width) solid var(--action-primary-bg);
  border-radius: var(--action-radius);
  box-shadow: var(--action-shadow);
  font-size: var(--t-action);
}
:root:root .c-cards-guides--1 .c-btn .wp-block-button__link:hover {
  background: var(--action-primary-bg-hover);
  box-shadow: var(--action-shadow-hover);
  color: var(--action-primary-fg-hover);
}
:root:root {
  /* The card is one link. The reach is the link's ::before, so ::after is
     left for an icon; not in the editor, where it would stop the card's
     blocks being picked. */
}
:root:root .c-cards-guides--1 .c-card:is(:hover, :focus-within) {
  background: var(--surface-sunken);
}
:root:root .c-cards-guides--1:not(.editor-styles-wrapper *) .c-card .c-btn .wp-block-button__link::before {
  position: absolute;
  inset: 0;
  content: "";
}
:root:root {
  /* --query: the post template is the grid, each post one card. */
}
:root:root .c-cards-guides .wp-block-post-template.c-cards-guides__grid {
  margin: 0;
  padding: 0;
  list-style: none;
}
:root:root .c-cards-guides .wp-block-post-template.c-cards-guides__grid > li {
  display: flex;
  flex-direction: column;
  margin: 0;
}
:root:root .c-cards-guides .wp-block-post-template.c-cards-guides__grid > li > .c-card {
  flex: 1 1 auto;
}
:root:root {
  /* A featured image fills the card's width as --2's picture does; its
     link is a block, so the picture keeps its shape. */
}
:root:root .c-card--article .wp-block-post-featured-image a {
  display: block;
}
:root:root {
  /* The excerpt reads as the card's text. Its link sits at the foot of the
     card, in --2's action look. */
}
:root:root .c-card--article .wp-block-post-excerpt {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
:root:root .c-card--article .wp-block-post-excerpt__excerpt {
  margin: 0;
}
:root:root .c-card--article .wp-block-post-excerpt__more-text {
  margin-block: auto 0;
  padding-block-start: var(--space-4);
}
:root:root .c-card--article .wp-block-post-excerpt__more-link {
  font-size: var(--t-small);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  text-decoration-line: underline;
  text-decoration-color: var(--link-rule);
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  text-decoration-thickness: var(--link-rule-thickness);
  text-underline-offset: var(--link-rule-offset);
}
:root:root .c-card--article .wp-block-post-excerpt__more-link:hover {
  color: var(--fg-link-hover);
}
:root:root {
  /* The copy can be grouped (c-card__copy), to hold the button level across
     a row: the group runs as the card's copy does. */
}
:root:root .c-card--article .c-card__copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-3);
}
:root:root {
  /* A post's terms over its title, as a small label; a line of detail
     (a reading time, a running time) under it. */
}
:root:root .c-card--article .c-card__terms {
  margin-block: 0;
  font-size: var(--t-tag);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}
:root:root .c-card--article .c-card__terms a {
  color: inherit;
  text-decoration: none;
}
:root:root .c-card--article .c-card__meta {
  margin-block: 0;
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
:root:root {
  /* A button at the card's foot keeps its own width, and the card is one
     link, as --1's is: for a post whose page is elsewhere (a field holds
     the button's link), its picture and title then lead there too. */
}
:root:root .c-card--article .c-actions {
  margin-block: auto 0;
  padding-block-start: var(--space-4);
}
:root:root .c-card--article .c-btn,
:root:root .c-card--article .c-btn .wp-block-button__link {
  width: auto;
}
:root:root .c-card--article:has(.c-btn) {
  position: relative;
}
:root:root .c-cards-guides:not(.editor-styles-wrapper *) .c-card--article .c-btn .wp-block-button__link::before {
  position: absolute;
  inset: 0;
  content: "";
}
:root:root .c-cards-guides .wp-block-query-pagination {
  gap: var(--space-3);
  margin-block: var(--space-8) 0;
  font-size: var(--t-body);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
}
:root:root .c-cards-guides .wp-block-query-pagination a {
  color: var(--fg-link);
  text-decoration: none;
}
:root:root .c-cards-guides .wp-block-query-pagination [aria-current=page] {
  color: var(--fg-strong);
}
:root:root {
  /* --4 */
}
:root:root .c-cards-guides--4 .c-cards-guides__grid {
  grid-template-columns: minmax(0, 1fr);
}
:root:root {
  /* --marked: an ordered List, each item a card numbered by the panel. */
}
:root:root .c-cards-guides--marked .c-cards-guides__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: cards-guides;
}
:root:root .c-cards-guides--marked .c-cards-guides__grid > li {
  display: flex;
  position: relative;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-5);
  border: var(--card-border-width) solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--surface-page);
  box-shadow: var(--shadow-card-tinted);
  counter-increment: cards-guides;
  font-size: var(--t-body);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: var(--fg-medium);
}
:root:root .c-cards-guides--marked .c-cards-guides__grid > li::before {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  inline-size: var(--space-7);
  block-size: var(--space-7);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  content: counter(cards-guides, decimal-leading-zero);
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-bold);
  line-height: var(--lh-flush);
  color: var(--fg-eyebrow);
}
:root:root .c-cards-guides--marked .c-cards-guides__grid a {
  color: inherit;
  text-decoration: none;
}
:root:root .c-cards-guides--marked .c-cards-guides__grid strong {
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
}
:root:root .c-cards-guides--marked .c-cards-guides__grid > li:is(:hover, :focus-within) {
  border-color: var(--border-selected);
}
:root:root .c-cards-guides--marked .c-cards-guides__grid > li:is(:hover, :focus-within)::before {
  background: var(--surface-badge);
  color: var(--fg-on-badge);
}
:root:root .c-cards-guides--marked:not(.editor-styles-wrapper *) .c-cards-guides__grid a::before {
  position: absolute;
  inset: 0;
  content: "";
}
:root:root {
  /* --sunken */
}
:root:root .c-cards-guides--sunken {
  padding-inline: var(--gutter);
}
@media (min-width: 48em) {
  :root:root .c-cards-guides--1 .c-card {
    grid-template-columns: fit-content(40%) minmax(0, 1fr);
    -moz-column-gap: var(--space-8);
         column-gap: var(--space-8);
  }
  :root:root .c-cards-guides--4 .c-cards-guides__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64em) {
  :root:root .c-cards-guides--4 .c-cards-guides__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Row Panels the article template adds.
   ==========================================================================

   stack-prose, inset-figure, inset-quotes, split-cases, rows-facts, strip-links,
   rows-faq and the contained strip-facts.
   ========================================================================== */
:root:root .c-strip-facts--inverse {
  border-block-end: 0;
  padding-inline: 0;
}
:root:root .c-strip-facts--inverse .c-strip-facts__ground {
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-md);
}
:root:root .c-strip-facts--inverse .c-strip-facts__grid {
  margin-block-start: var(--space-6);
}
:root:root .c-strip-facts--inverse .c-eyebrow {
  color: var(--fg-emphasis-on-dark);
}
:root:root .c-stack-prose__title {
  margin: 0 0 var(--space-5);
  font-size: var(--t-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: -0.022em;
  color: var(--fg-strong);
  text-wrap: pretty;
}
:root:root .c-stack-prose__answer {
  margin: 0 0 var(--space-5);
  font-size: var(--t-lead);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
  text-wrap: pretty;
}
:root:root .c-stack-prose--quiet {
  padding-block: var(--space-6);
  border-block-start: var(--hairline) solid var(--border-faint);
}
:root:root .c-stack-prose--quiet .c-stack-prose__title {
  font-size: var(--t-card-title);
  letter-spacing: 0;
  margin-block-end: var(--space-3);
}
:root:root .c-stack-prose--quiet .c-body {
  font-size: var(--t-small);
}
:root:root {
  /* --marked: a statement set apart, after a quote mark. The mark has a
     column of its own, so a long statement wraps under its own first line
     and not under the mark. It is decoration, in the badge colour. A
     classic theme wraps the text in one inner container, which takes the
     second column whole. */
}
:root:root .c-stack-prose--marked {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  -moz-column-gap: var(--space-4);
       column-gap: var(--space-4);
}
:root:root .c-stack-prose--marked::before {
  content: "";
  inline-size: var(--space-6);
  block-size: var(--space-5);
  background: var(--surface-badge);
  -webkit-mask: var(--mask-quote) center/contain no-repeat;
          mask: var(--mask-quote) center/contain no-repeat;
}
:root:root .c-stack-prose--marked > * {
  grid-column: 2;
}
:root:root {
  /* A phone keeps the column for the text: the mark is smaller there. */
}
@media (min-width: 48em) {
  :root:root .c-stack-prose--marked {
    -moz-column-gap: var(--space-6);
         column-gap: var(--space-6);
  }
  :root:root .c-stack-prose--marked::before {
    inline-size: var(--space-8);
    block-size: var(--space-7);
  }
}
:root:root {
  /* --raised: the text in a box on the raised ground (c-ground--raised on
     the panel's c-measure), with a card's corner and shadow. A head
     (c-stack-prose__head) can set a label (c-badge) beside the title, and
     c-stack-prose__cols sets lists or paragraphs in two columns. Both stack
     on a phone. Through the inner container a classic theme adds. */
}
:root:root .c-stack-prose--raised .c-measure {
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-sm);
}
:root:root {
  /* --outlined: the text in a box on the page's own ground, set apart by a
     thin line round it rather than a ground: one point of several, each in
     a box of its own, one under another. */
}
:root:root .c-stack-prose--outlined {
  padding: var(--space-6);
  border: var(--card-border-width) solid var(--border-card);
  border-radius: var(--radius-md);
}
:root:root .c-stack-prose--outlined .c-stack-prose__title {
  font-size: var(--t-card-title);
  letter-spacing: 0;
  margin-block-end: var(--space-3);
}
:root:root .c-stack-prose__head,
:root:root .c-stack-prose__cols {
  display: grid;
  gap: var(--space-3);
}
:root:root .c-stack-prose__head {
  margin-block-end: var(--space-5);
}
:root:root .c-stack-prose__head .c-badge {
  justify-self: start;
}
:root:root :is(.c-stack-prose__head, .c-stack-prose__head > .wp-block-group__inner-container, .c-stack-prose__cols, .c-stack-prose__cols > .wp-block-group__inner-container) > * {
  margin-block: 0;
}
@media (min-width: 48em) {
  :root:root .c-stack-prose__head {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    -moz-column-gap: var(--space-8);
         column-gap: var(--space-8);
  }
  :root:root .c-stack-prose__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    -moz-column-gap: var(--space-5);
         column-gap: var(--space-5);
  }
}
:root:root {
  /* In the running copy a list keeps the paragraph gap from the paragraph
     on either side of it; the Checks style and c-bullets have none below. */
}
:root:root .c-stack-prose .c-body + :is(ul, ol),
:root:root .c-stack-prose :is(ul, ol) + .c-body {
  margin-block-start: var(--space-5);
}
:root:root {
  /* The panel's padding is the space under its text, so whatever comes
     last keeps no margin of its own: an answer line alone in a band sat
     further from its foot than from its head. Through the measure and the
     inner containers a classic theme adds. */
}
:root:root .c-stack-prose > :last-child,
:root:root .c-stack-prose > :last-child > :last-child,
:root:root .c-stack-prose > :last-child > :last-child > :last-child,
:root:root .c-stack-prose > :last-child > :last-child > :last-child > :last-child {
  margin-block-end: 0;
}
:root:root {
  /* Full width, or on a ground, the text keeps off the band's edges, as in
     split-prose. On a site with the frame, components/_frame.scss narrows
     it to the page edge. */
}
:root:root :is(.c-stack-prose, .c-inset-quotes):is(.alignfull, [class*=c-ground--]) {
  padding-inline: var(--gutter);
}
:root:root {
  /* Beside a sidebar a full-width band stays in the content column, so
     split-prose's text sits in from its edge and stops at the measure.
     The reading panels take the same column whether they are full width,
     on a ground or neither, so the text doesn't shift between them. The
     measure is set on the panel, in its font, as split-prose sets it on
     its body; 100% is the content column the panel fills. 1025px is where
     Kadence puts the sidebar beside the content. */
}
@media (min-width: 1025px) {
  :root:root .has-sidebar :is(.c-stack-prose, .c-inset-quotes) {
    padding-inline: var(--gutter) max(var(--gutter), 100% - var(--gutter) - var(--measure-prose));
  }
}
:root:root .c-inset-figure__frame {
  display: grid;
  place-items: center;
  inline-size: 100%;
  padding: var(--space-5);
  border: var(--card-border-width) solid var(--border-card);
  border-radius: var(--radius-md);
}
:root:root .c-inset-figure--wide .c-inset-figure__frame {
  aspect-ratio: 2/1;
}
:root:root .c-inset-figure--tall .c-inset-figure__frame {
  aspect-ratio: 3/2;
}
:root:root .c-inset-figure--square .c-inset-figure__frame {
  aspect-ratio: 1/1;
}
:root:root {
  /* The frame's padding is the only space around the image. */
}
:root:root .c-inset-figure__frame .wp-block-image {
  margin: 0;
}
:root:root .c-inset-figure__frame img {
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-sm);
}
:root:root .c-inset-figure__caption {
  margin: var(--space-4) 0 0;
  font-size: var(--t-small);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}
:root:root {
  /* --gallery: several images in a core Gallery block, each in a cell of
     its own, with no frame. The block's settings say how many sit in a row
     (two on a phone, the block's number from 600px) and whether they are
     cropped to one shape. The panel's gap is the default core reads for
     the cells' widths; a gap set on the block wins, and the space between
     the cells follows whichever is in force, which a classic theme would
     otherwise leave at half an em. An uncropped image keeps its own size,
     up to its cell's width, centred in the cell, so a logo stays the size
     it was uploaded at. */
}
:root:root .c-inset-figure--gallery {
  --wp--style--gallery-gap-default: var(--space-5);
}
:root:root .c-inset-figure--gallery .wp-block-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--style--unstable-gallery-gap, var(--wp--style--gallery-gap-default));
  margin: 0;
}
:root:root {
  /* Two to a row where core's gallery styles aren't loaded (the panel
     library); core's own widths win where they are. */
}
:root:root .c-inset-figure--gallery .wp-block-gallery > .wp-block-image {
  width: calc(50% - var(--wp--style--unstable-gallery-gap, var(--wp--style--gallery-gap-default)) / 2);
  margin: 0;
}
:root:root .c-inset-figure--gallery .wp-block-gallery:not(.is-cropped) .wp-block-image {
  align-items: center;
}
:root:root .c-inset-figure--gallery .wp-block-gallery img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}
:root:root .c-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  color: var(--fg-secondary);
}
:root:root .c-slot__name {
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
:root:root .c-slot__spec {
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
:root:root {
  /* The quote is a Quote block (blockquote) holding the line and, when
     someone said it, a cite. The block's own and the theme's quote styles
     (rule, indent, colour, margins) give way to the panel's. Older markup,
     with the line and the name as paragraphs straight in the section,
     looks the same. */
}
:root:root .c-inset-quotes__quote {
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  quotes: none;
}
:root:root .c-inset-quotes__quote > cite {
  display: block;
  position: static;
  margin: var(--space-4) 0 0;
  padding-inline-start: var(--space-7);
  font-size: var(--t-small);
  font-style: normal;
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
:root:root .c-inset-quotes__q {
  position: relative;
  margin: 0;
  padding-inline-start: var(--space-7);
  font-size: var(--t-h3);
  font-style: italic;
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  color: var(--fg-eyebrow);
  text-wrap: pretty;
}
:root:root .c-inset-quotes__q::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0.15em 0.1em;
  inline-size: 3px;
  border-radius: var(--radius-pill);
  background: var(--surface-badge);
}
:root:root {
  /* On a coloured or dark ground the rule takes the quote's colour, which
     that ground sets; the badge colour can all but vanish there. */
}
:root:root :is(.c-ground--accent, .c-ground--hub, .c-ground--inverse) .c-inset-quotes__q::before {
  background: currentcolor;
}
:root:root .c-inset-quotes__by {
  margin: var(--space-4) 0 0;
  padding-inline-start: var(--space-7);
  font-size: var(--t-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
:root:root .c-split-cases__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--space-5);
}
:root:root .c-split-cases__case {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-7);
  border: var(--card-border-width) solid var(--border-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-tinted);
}
:root:root {
  /* A case is on the page's ground unless it is given one of its own
     (c-ground--inverse, c-ground--raised), which then paints it and
     re-points its text. */
}
:root:root .c-split-cases__case:not([class*=c-ground--]) {
  background: var(--surface-page);
}
:root:root {
  /* --marked: the cases marked out in colour, for two options to choose
     between. A case with no ground of its own is on the badge colour, its
     text, lines and dots in the badge's text colour; give the other a
     ground (c-ground--inverse) to set the two apart. */
}
:root:root .c-split-cases--marked .c-split-cases__case:not([class*=c-ground--]) {
  --fg-strong: var(--fg-on-badge);
  --fg-medium: var(--fg-on-badge);
  --fg-secondary: var(--fg-on-badge);
  --fg-muted: var(--fg-on-badge);
  --fg-eyebrow: var(--fg-on-badge);
  --fg-link: var(--fg-on-badge);
  --list-marker-color: var(--fg-on-badge);
  --border-card: var(--surface-badge);
  --shadow-card-tinted: none;
  background: var(--surface-badge);
  color: var(--fg-on-badge);
}
:root:root {
  /* Its button turns the badge's pair round, so it shows on the badge
     colour whatever the site's button colour is. */
}
:root:root .c-split-cases--marked :where(.c-split-cases__case:not([class*=c-ground--])) .c-btn .wp-block-button__link {
  background: var(--fg-on-badge);
  color: var(--surface-badge);
}
:root:root {
  /* On a coloured case the dots take the text's colour, which the case's
     colour sets. */
}
:root:root .c-split-cases--marked .c-bullets__item::before {
  background: currentcolor;
}
:root:root {
  /* A word between the two cases ("or"): between the boxes when they
     stack, and from 48em in a narrow column of its own, between them. */
}
:root:root .c-split-cases__or {
  margin: 0;
  align-self: center;
  font-size: var(--t-label);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  color: var(--fg-strong);
}
:root:root .c-split-cases__grid:has(.c-split-cases__or) {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48em) {
  :root:root .c-split-cases__grid:has(.c-split-cases__or) {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
}
:root:root {
  /* The rule along the top is twice the box's edge, so it reads as a rule
     and not as a missing edge where the box's own border is heavy. */
}
:root:root .c-split-cases__case--yes {
  border-block-start: calc(2 * var(--card-border-width)) solid var(--border-accent);
}
:root:root .c-split-cases__case--no {
  border-block-start: calc(2 * var(--card-border-width)) solid var(--border-soft);
}
:root:root .c-split-cases__label {
  margin: 0;
  font-size: var(--t-label);
  font-weight: var(--fw-bold);
  line-height: var(--lh-flush);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-strong);
}
:root:root .c-split-cases__case .c-bullets {
  margin-block-start: var(--space-2);
}
:root:root {
  /* Lines after the pair stand clear of the boxes. */
}
:root:root .c-split-cases__grid + * {
  margin-block-start: var(--space-8);
}
:root:root .c-rows-facts__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: var(--card-border-width) solid var(--border-card);
  border-radius: var(--radius-md);
}
:root:root .c-rows-facts__scroll:focus-visible {
  outline: 0.1875rem solid var(--fg-eyebrow);
  outline-offset: 0.125rem;
}
:root:root .c-rows-facts__table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
  line-height: var(--lh-normal);
}
:root:root .c-rows-facts__table th,
:root:root .c-rows-facts__table td {
  padding: var(--space-4) var(--space-5);
  text-align: start;
  vertical-align: top;
  border-block-end: var(--hairline) solid var(--border-faint);
}
:root:root .c-rows-facts__table thead th {
  background: var(--surface-sunken);
  font-size: var(--t-tag);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-strong);
  white-space: nowrap;
}
:root:root .c-rows-facts__table tbody th {
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
}
:root:root .c-rows-facts__table td {
  color: var(--fg-muted);
}
:root:root .c-rows-facts__table tbody tr:last-child th,
:root:root .c-rows-facts__table tbody tr:last-child td {
  border-block-end: 0;
}
:root:root .c-rows-facts__note {
  margin: var(--space-4) 0 0;
  font-size: var(--t-small);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}
:root:root .c-strip-links__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-inline-start: 3px solid var(--border-accent);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
:root:root .c-strip-links__kicker {
  flex: 0 0 auto;
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-eyebrow);
}
:root:root .c-strip-links__title {
  font-size: var(--t-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}
:root:root .c-strip-links__sub {
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
:root:root .c-strip-links__link:hover {
  background: var(--surface-marker);
}
:root:root .c-strip-links__link:hover .c-strip-links__title {
  color: var(--fg-link);
}
:root:root .c-strip-links__link:focus-visible {
  outline: 0.1875rem solid var(--fg-eyebrow);
  outline-offset: 0.125rem;
}
:root:root .c-rows-faq__list {
  border-block-start: var(--hairline) solid var(--border-faint);
}
:root:root .c-rows-faq__item {
  border-block-end: var(--hairline) solid var(--border-faint);
}
:root:root {
  /* The core Details block can't put a class on its summary, so the
     question is also the item's own summary, and the answer the rest. */
}
:root:root .c-rows-faq__q,
:root:root .c-rows-faq__item > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  cursor: pointer;
  font-size: var(--t-card-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  list-style: none;
}
:root:root .c-rows-faq__q::-webkit-details-marker,
:root:root .c-rows-faq__item > summary::-webkit-details-marker {
  display: none;
}
:root:root .c-rows-faq__q::after,
:root:root .c-rows-faq__item > summary::after {
  content: "";
  flex: 0 0 auto;
  inline-size: 1rem;
  block-size: 1rem;
  background: var(--fg-eyebrow);
  -webkit-mask: var(--mask-chevron-down) center/contain no-repeat;
          mask: var(--mask-chevron-down) center/contain no-repeat;
  transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
:root:root .c-rows-faq__item[open] .c-rows-faq__q::after,
:root:root .c-rows-faq__item[open] > summary::after {
  transform: rotate(180deg);
}
:root:root .c-rows-faq__a,
:root:root .c-rows-faq__item > :not(summary):last-child {
  padding-block-end: var(--space-6);
}
:root:root .c-rows-faq__item > :not(summary) {
  margin-block: 0 var(--space-3);
}
:root:root .c-cards-guides__empty {
  padding: var(--space-6);
  border: var(--hairline) dashed var(--border-card);
  border-radius: var(--radius-md);
  font-size: var(--t-small);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

/* ==========================================================================
   inset-quotes: who said it, a heading over the quote, and --2.
   ==========================================================================

   The panel's own look is in panels/_article.scss; these rules add to it.

   For a testimonial the citation holds the name in bold, then a line break
   and the role or company; the name takes the strong ink. A photo is the
   citation's inline image, before the name, and sits at the start with the
   lines beside it. A heading (c-title) can go over the quote.

   --2: two quotes side by side from 48em, one under the other on a phone,
   each with an optional line over it (c-body). Beside a sidebar the pair
   takes the column's width, not the reading measure.
   ========================================================================== */
:root:root .c-inset-quotes__quote > cite strong {
  color: var(--fg-strong);
}
:root:root {
  /* The photo at the start of the citation. The lines beside it are
     centred on it when there are fewer of them than it is tall. */
}
:root:root .c-inset-quotes__quote > cite:has(> img:first-child) {
  position: relative;
  min-block-size: var(--space-10);
  padding-inline-start: calc(var(--space-7) + var(--space-10) + var(--space-4));
  align-content: center;
}
:root:root .c-inset-quotes__quote > cite > img:first-child {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--space-7);
  inline-size: var(--space-10);
  max-inline-size: var(--space-10);
  block-size: auto;
  aspect-ratio: 1;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius-pill);
}
:root:root {
  /* A heading over the quote. Through the inner container a classic
     theme adds. */
}
:root:root :is(.c-inset-quotes, .c-inset-quotes > .wp-block-group__inner-container) > .c-title + .c-inset-quotes__quote {
  margin-block-start: var(--space-5);
}
:root:root {
  /* --2 */
}
:root:root .c-inset-quotes__grid {
  display: grid;
  gap: var(--space-8);
}
:root:root .c-inset-quotes__item {
  min-width: 0;
}
:root:root {
  /* A line over a quote stands a little clear of it. */
}
:root:root :is(.c-inset-quotes__item, .c-inset-quotes__item > .wp-block-group__inner-container) > * + .c-inset-quotes__quote {
  margin-block-start: var(--space-4);
}
:root:root {
  /* Half the column is too narrow for the size a single quote takes. */
}
:root:root .c-inset-quotes--2 .c-inset-quotes__q {
  font-size: var(--t-h3);
}
@media (min-width: 48em) {
  :root:root .c-inset-quotes__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
:root:root {
  /* After panels/_article.scss, so it wins over the reading measure there. */
}
@media (min-width: 1025px) {
  :root:root .has-sidebar .c-inset-quotes--2 {
    padding-inline: var(--gutter);
  }
}

/* With the frame, beside a sidebar, the pair runs to the page edge on both
   sides, as the grids do (components/_frame.scss, earlier in the build). */
/* stylelint-disable selector-class-pattern -- cw-frame is the contract's class from settings.json, and entry-content is the theme's. */
@media screen and (min-width: 1025px) {
  :root .cw-frame.has-sidebar .entry-content > .c-inset-quotes--2 {
    padding-inline: min(var(--gutter-page-edge), 5vw);
  }
}
/* stylelint-enable selector-class-pattern */
/* ==========================================================================
   inset-quotes --carousel: testimonials one at a time.
   ==========================================================================

   A centred heading over the quotes (c-inset-quotes__slides), each a Quote
   block. With no script, and in the editor, they stand one under another.
   assets/js/inset-quotes-carousel.js marks the holder is-carousel and builds
   the stage: a viewport the width of one quote, holding a track of slides,
   with an arrow either side; then a dot for each quote. A rotation button
   stays out of sight until it has keyboard focus.

   The quote and its citation are centred and lose the side rule a single
   inset quote has.
   ========================================================================== */
:root:root .c-inset-quotes__slides {
  display: grid;
  gap: var(--space-8);
}
:root:root :is(.c-inset-quotes, .c-inset-quotes > .wp-block-group__inner-container) > .c-title + .c-inset-quotes__slides {
  margin-block-start: var(--space-5);
}
:root:root .c-inset-quotes--carousel .c-inset-quotes__q {
  padding-inline-start: 0;
  text-align: center;
}
:root:root .c-inset-quotes--carousel .c-inset-quotes__q::before {
  content: none;
}
:root:root .c-inset-quotes--carousel .c-inset-quotes__quote > cite {
  padding-inline-start: 0;
  text-align: center;
}
:root:root {
  /* With the script */
}
:root:root .c-inset-quotes__slides.is-carousel {
  display: block;
}
:root:root .c-inset-quotes__stage {
  position: relative;
  padding-inline: var(--space-8);
}
:root:root .c-inset-quotes__viewport {
  overflow: hidden;
  touch-action: pan-y;
}
:root:root .c-inset-quotes__track {
  display: flex;
  transition: transform calc(var(--motion-base) * 3) var(--ease-standard);
}
:root:root .c-inset-quotes__track.is-still {
  transition: none;
}
:root:root .c-inset-quotes__slide {
  flex: 0 0 100%;
  min-inline-size: 0;
}
:root:root .c-inset-quotes__arrow {
  position: absolute;
  inset-block-start: 50%;
  display: grid;
  place-items: center;
  inline-size: var(--space-8);
  block-size: var(--space-8);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-strong);
  cursor: pointer;
  translate: 0 -50%;
}
:root:root .c-inset-quotes__arrow--prev {
  inset-inline-start: 0;
}
:root:root .c-inset-quotes__arrow--next {
  inset-inline-end: 0;
}
:root:root .c-inset-quotes__arrow::before {
  content: "";
  inline-size: var(--space-5);
  block-size: var(--space-5);
  background: currentcolor;
  -webkit-mask: var(--mask-chevron-down) center/contain no-repeat;
          mask: var(--mask-chevron-down) center/contain no-repeat;
  rotate: 90deg;
}
:root:root .c-inset-quotes__arrow--next::before {
  rotate: -90deg;
}
:root:root .c-inset-quotes__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-block-start: var(--space-4);
}
:root:root .c-inset-quotes__dot {
  display: grid;
  place-items: center;
  inline-size: var(--space-5);
  block-size: var(--space-5);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-muted);
  cursor: pointer;
}
:root:root .c-inset-quotes__dot::before {
  content: "";
  inline-size: var(--space-2);
  block-size: var(--space-2);
  border-radius: var(--radius-pill);
  background: currentcolor;
}
:root:root .c-inset-quotes__dot.is-current {
  color: var(--fg-strong);
}
:root:root :is(.c-inset-quotes__arrow, .c-inset-quotes__dot, .c-inset-quotes__rotate):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
:root:root {
  /* Out of sight until it has keyboard focus, then over the top corner. */
}
:root:root .c-inset-quotes__rotate {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 1;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: var(--hairline) solid var(--border-card);
  border-radius: var(--radius-sm);
  background: var(--surface-page);
  color: var(--fg-strong);
  font: inherit;
  font-size: var(--t-small);
  cursor: pointer;
}
:root:root .c-inset-quotes__rotate:not(:focus-visible) {
  clip-path: inset(50%);
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  white-space: nowrap;
  padding: 0;
  border: 0;
}

/* ==========================================================================
   rows-facts: a real data table, with an optional head.
   ==========================================================================

   The table is the core Table block, so it is edited as a table: rows,
   columns, the header and footer sections, each column's alignment and the
   Stripes style all come from the block. The panel draws it from the
   contract's roles.

   Looks, each the author's choice:
   - --divided: the rows ruled, in a ruled box.
   - --sunken: every cell a tile on the sunken ground, a gap between them.
   - the block's own Stripes style: every other row on the sunken ground.

   A comparison is a table with an empty corner and a header first in each
   body row: things down the side, compared across the columns. Below 64em
   it stacks: the column heads across the top, then each row's header as a
   bar with that row's cells side by side under it, so each value stays
   under its column's head. Any other table keeps its columns, and scrolls
   sideways inside the panel when it is wider than the column, never the
   page.

   In a head cell, bold text is the column's name and the rest of the cell
   its subline; an image there (the block's inline image) sits above the
   name, and is left out while a comparison is stacked. A cell holding
   <span class="c-rows-facts__no">Not included</span> shows a cross; the
   words stay for screen readers. It is written with the block's Edit as
   HTML, as pasting drops the class. Links in the footer row are the
   table's actions and look like buttons.

   Every rule is scoped to the panel, so a table set into running copy with
   the same element classes (_article.scss) keeps its own look. The stacked
   layout names the table in :where(), so its rules weigh the same as the
   looks and the order below decides: the stack after the looks, and the
   64em rules after both.
   ========================================================================== */
:root:root {
  /* A table with no head of its own is set into the copy around it, so it
     keeps the reading rhythm, stack-prose's, rather than a band's. */
}
:root:root .c-rows-facts:not(:has(.c-head)) {
  padding-block: var(--space-7);
}
:root:root {
  /* The figure is the scroll box. Core's and the theme's table rules (a
     rule round every cell, a heavy one under the head, a bottom margin)
     give way to the panel's. */
}
:root:root .c-rows-facts .c-rows-facts__table {
  inline-size: auto;
  margin: 0;
  border: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  font-size: var(--t-small);
  line-height: var(--lh-normal);
}
:root:root .c-rows-facts .c-rows-facts__table:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
:root:root {
  /* On a phone the columns take the width their words need, so no word
     breaks part way; the block's fixed widths return from 48em. */
}
:root:root .c-rows-facts .c-rows-facts__table table {
  inline-size: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  table-layout: auto;
  color: var(--fg-strong);
}
:root:root .c-rows-facts .c-rows-facts__table :is(thead, tbody, tfoot, tr) {
  border: 0;
}
:root:root .c-rows-facts .c-rows-facts__table :is(th, td) {
  padding: var(--space-3);
  border: 0;
  background: none;
  font-size: inherit;
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
  vertical-align: middle;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  color: inherit;
}
:root:root {
  /* A column's alignment, set from the block's toolbar. */
}
:root:root .c-rows-facts .c-rows-facts__table :is(th, td).has-text-align-left {
  text-align: left;
}
:root:root .c-rows-facts .c-rows-facts__table :is(th, td).has-text-align-center {
  text-align: center;
}
:root:root .c-rows-facts .c-rows-facts__table :is(th, td).has-text-align-right {
  text-align: right;
}
:root:root .c-rows-facts .c-rows-facts__table thead th {
  background: var(--surface-table-header);
  font-weight: var(--fw-semi);
  line-height: var(--lh-normal);
  color: var(--fg-strong);
}
:root:root .c-rows-facts .c-rows-facts__table thead th strong {
  font-weight: var(--fw-bold);
}
:root:root .c-rows-facts .c-rows-facts__table thead img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
  margin: 0 auto var(--space-3);
}
:root:root .c-rows-facts .c-rows-facts__table tbody th {
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
}
:root:root {
  /* The cross, for a value a column doesn't have. */
}
:root:root .c-rows-facts__no {
  display: inline-block;
  inline-size: var(--space-7);
  block-size: var(--space-7);
  overflow: hidden;
  vertical-align: middle;
  font-size: 0;
  background: var(--fg-eyebrow);
  -webkit-mask: var(--mask-cross) center/contain no-repeat;
          mask: var(--mask-cross) center/contain no-repeat;
}
:root:root {
  /* The table's actions. */
}
:root:root .c-rows-facts .c-rows-facts__table tfoot a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  background: var(--action-primary-bg);
  color: var(--action-primary-fg);
  font-size: var(--t-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-align: center;
  text-decoration: none;
}
:root:root .c-rows-facts .c-rows-facts__table tfoot a:hover {
  background: var(--action-primary-bg-hover);
  color: var(--action-primary-fg-hover);
}
:root:root .c-rows-facts .c-rows-facts__table tfoot a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
:root:root {
  /* --divided: the rows ruled, in a ruled box. */
}
:root:root .c-rows-facts--divided .c-rows-facts__table {
  border: var(--card-border-width) solid var(--border-card);
  border-radius: var(--radius-md);
}
:root:root .c-rows-facts--divided .c-rows-facts__table :is(thead, tbody) tr {
  border-block-end: var(--hairline) solid var(--border-table);
}
:root:root .c-rows-facts--divided .c-rows-facts__table tbody tr:last-child {
  border-block-end: 0;
}
:root:root {
  /* The block's Stripes style: every other row on the sunken ground. */
}
:root:root .c-rows-facts .is-style-stripes tbody tr:nth-child(odd) {
  background: var(--surface-sunken);
}
:root:root {
  /* --sunken: every cell a tile on the sunken ground, apart from the next. */
}
:root:root .c-rows-facts--sunken .c-rows-facts__table table {
  border-collapse: separate;
  border-spacing: var(--space-2);
}
:root:root .c-rows-facts--sunken .c-rows-facts__table :is(thead th, tbody th, td) {
  background: var(--surface-sunken);
}
:root:root {
  /* A comparison stacks. The corner cells go, each row's header becomes a
     bar, and the row's cells share the line under it, in the columns of
     the heads above, centred on the tallest. A head cell keeps its name
     and subline on one line while they fit, centred in a tile as tall as
     the row's tallest. The bars set the rhythm, so stripes stand down. */
}
:root:root .c-rows-facts .c-rows-facts__table :where(table:has(> thead > tr > :first-child:empty):has(> tbody > tr > th:first-child)) {
  display: block;
}
:root:root .c-rows-facts .c-rows-facts__table :where(table:has(> thead > tr > :first-child:empty):has(> tbody > tr > th:first-child)) > :is(thead, tbody, tfoot) {
  display: block;
}
:root:root .c-rows-facts .c-rows-facts__table :where(table:has(> thead > tr > :first-child:empty):has(> tbody > tr > th:first-child)) tr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: var(--space-3);
       column-gap: var(--space-3);
}
:root:root .c-rows-facts .c-rows-facts__table :where(table:has(> thead > tr > :first-child:empty):has(> tbody > tr > th:first-child)) tbody tr:nth-child(n) {
  background: none;
}
:root:root .c-rows-facts .c-rows-facts__table :where(table:has(> thead > tr > :first-child:empty):has(> tbody > tr > th:first-child)) thead tr {
  align-items: stretch;
  margin-block-end: var(--space-3);
}
:root:root .c-rows-facts .c-rows-facts__table :where(table:has(> thead > tr > :first-child:empty):has(> tbody > tr > th:first-child)) :is(thead th, tbody th, td) {
  display: block;
  flex: 1 1 0;
  min-inline-size: 0;
}
:root:root .c-rows-facts .c-rows-facts__table :where(table:has(> thead > tr > :first-child:empty):has(> tbody > tr > th:first-child)) thead th {
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  -moz-column-gap: var(--space-1);
       column-gap: var(--space-1);
  padding: var(--space-4) var(--space-1);
}
:root:root .c-rows-facts .c-rows-facts__table :where(table:has(> thead > tr > :first-child:empty):has(> tbody > tr > th:first-child)) thead :is(br, img) {
  display: none;
}
:root:root .c-rows-facts .c-rows-facts__table :where(table:has(> thead > tr > :first-child:empty):has(> tbody > tr > th:first-child)) :is(thead, tfoot) tr > :first-child:empty {
  display: none;
}
:root:root .c-rows-facts .c-rows-facts__table :where(table:has(> thead > tr > :first-child:empty):has(> tbody > tr > th:first-child)) tbody th {
  flex-basis: 100%;
  padding: var(--space-4) var(--space-2);
  background: var(--surface-table-header);
  text-align: center;
}
:root:root .c-rows-facts .c-rows-facts__table :where(table:has(> thead > tr > :first-child:empty):has(> tbody > tr > th:first-child)) :is(tbody, tfoot) td {
  padding: var(--space-5) 0;
  background: none;
}
:root:root .c-rows-facts .c-rows-facts__table :where(table:has(> thead > tr > :first-child:empty):has(> tbody > tr > th:first-child)) {
  /* Each action fills its column, so a narrow column wraps the words
     rather than the button running into the next one, and the
     buttons in a row stay one height. */
}
:root:root .c-rows-facts .c-rows-facts__table :where(table:has(> thead > tr > :first-child:empty):has(> tbody > tr > th:first-child)) tfoot tr {
  align-items: stretch;
}
:root:root .c-rows-facts .c-rows-facts__table :where(table:has(> thead > tr > :first-child:empty):has(> tbody > tr > th:first-child)) tfoot a {
  display: flex;
  inline-size: 100%;
  block-size: 100%;
  padding-inline: var(--space-2);
}
@media (min-width: 48em) {
  :root:root .c-rows-facts:not(:has(.c-head)) {
    padding-block: var(--space-8);
  }
  :root:root .c-rows-facts .c-rows-facts__table {
    font-size: var(--t-body);
  }
  :root:root .c-rows-facts .c-rows-facts__table :is(th, td) {
    padding: var(--space-3) var(--space-4);
  }
  :root:root .c-rows-facts .c-rows-facts__table .has-fixed-layout {
    table-layout: fixed;
  }
}
@media (min-width: 64em) {
  :root:root .c-rows-facts:not(:has(.c-head)) {
    padding-block: var(--space-9);
  }
  :root:root .c-rows-facts .c-rows-facts__table {
    line-height: var(--lh-relaxed);
  }
  :root:root {
    /* From 64em a comparison is a table again, in its look. */
  }
  :root:root .c-rows-facts .c-rows-facts__table :where(table:has(> thead > tr > :first-child:empty):has(> tbody > tr > th:first-child)) {
    display: table;
  }
  :root:root .c-rows-facts .c-rows-facts__table :where(table:has(> thead > tr > :first-child:empty):has(> tbody > tr > th:first-child)) > thead {
    display: table-header-group;
  }
  :root:root .c-rows-facts .c-rows-facts__table :where(table:has(> thead > tr > :first-child:empty):has(> tbody > tr > th:first-child)) > tbody {
    display: table-row-group;
  }
  :root:root .c-rows-facts .c-rows-facts__table :where(table:has(> thead > tr > :first-child:empty):has(> tbody > tr > th:first-child)) > tfoot {
    display: table-footer-group;
  }
  :root:root .c-rows-facts .c-rows-facts__table :where(table:has(> thead > tr > :first-child:empty):has(> tbody > tr > th:first-child)) tr {
    display: table-row;
  }
  :root:root .c-rows-facts .c-rows-facts__table :where(table:has(> thead > tr > :first-child:empty):has(> tbody > tr > th:first-child)) :is(thead th, tbody th, td),
  :root:root .c-rows-facts .c-rows-facts__table :where(table:has(> thead > tr > :first-child:empty):has(> tbody > tr > th:first-child)) :is(thead, tfoot) tr > :first-child:empty {
    display: table-cell;
  }
  :root:root .c-rows-facts .c-rows-facts__table :where(table:has(> thead > tr > :first-child:empty):has(> tbody > tr > th:first-child)) thead br {
    display: inline;
  }
  :root:root .c-rows-facts .c-rows-facts__table :where(table:has(> thead > tr > :first-child:empty):has(> tbody > tr > th:first-child)) thead img {
    display: block;
  }
  :root:root .c-rows-facts .c-rows-facts__table :where(table:has(> thead > tr > :first-child:empty):has(> tbody > tr > th:first-child)) :is(thead th, tbody th, tbody td, tfoot td) {
    padding: var(--space-3) var(--space-4);
  }
  :root:root .c-rows-facts .c-rows-facts__table :where(table:has(> thead > tr > :first-child:empty):has(> tbody > tr > th:first-child)) tbody th {
    background: none;
    text-align: start;
  }
  :root:root .c-rows-facts .c-rows-facts__table :where(table:has(> thead > tr > :first-child:empty):has(> tbody > tr > th:first-child)) tfoot a {
    display: inline-flex;
    inline-size: auto;
    block-size: auto;
    padding-inline: var(--space-6);
  }
  :root:root .c-rows-facts .is-style-stripes tbody tr:nth-child(odd) {
    background: var(--surface-sunken);
  }
  :root:root .c-rows-facts .c-rows-facts__table thead th strong {
    display: inline-block;
    margin-block-end: var(--space-2);
    font-size: var(--t-card-title);
  }
  :root:root {
    /* The tiles. The figure runs out by the gap on each side, so the outer
       tiles line up with the panel's edges. */
  }
  :root:root .c-rows-facts--sunken .c-rows-facts__table {
    margin: calc(-1 * var(--space-5));
  }
  :root:root .c-rows-facts--sunken .c-rows-facts__table table {
    border-spacing: var(--space-5);
  }
  :root:root .c-rows-facts--sunken .c-rows-facts__table :is(thead th, tbody th, td) {
    padding: var(--space-8) var(--space-5);
    background: var(--surface-sunken);
  }
  :root:root .c-rows-facts--sunken .c-rows-facts__table tbody th {
    font-size: var(--t-card-title);
    line-height: var(--lh-snug);
  }
  :root:root .c-rows-facts__no {
    inline-size: var(--space-9);
    block-size: var(--space-9);
  }
}

/* ==========================================================================
   accordion.ground: rows-faq's items as boxes on a ground of their own.
   ==========================================================================

   With the default (raised) the questions stay ruled rows on the page, as
   before. With sunken, inverse or accent each item is a rounded box on that
   ground, a little apart from the next, its question in the ground's strong
   colour and its answer in the ground's text colour: Thain Wildbur's FAQ,
   navy boxes with sky questions (inverse).
   ========================================================================== */
/* stylelint-disable selector-class-pattern -- the contract's body classes from settings.json. */
:root:root :is(.cw-accordion-ground--sunken, .cw-accordion-ground--inverse, .cw-accordion-ground--accent) .c-rows-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: 0;
}
:root:root :is(.cw-accordion-ground--sunken, .cw-accordion-ground--inverse, .cw-accordion-ground--accent) .c-rows-faq__item {
  padding-inline: var(--space-7);
  border: 0;
  border-radius: var(--radius-md);
}
:root:root :is(.cw-accordion-ground--sunken, .cw-accordion-ground--inverse, .cw-accordion-ground--accent) .c-rows-faq__q,
:root:root :is(.cw-accordion-ground--sunken, .cw-accordion-ground--inverse, .cw-accordion-ground--accent) .c-rows-faq__item > summary {
  align-items: center;
  padding-block: var(--space-7);
}
:root:root :is(.cw-accordion-ground--sunken, .cw-accordion-ground--inverse, .cw-accordion-ground--accent) .c-rows-faq__a,
:root:root :is(.cw-accordion-ground--sunken, .cw-accordion-ground--inverse, .cw-accordion-ground--accent) .c-rows-faq__item > :not(summary):last-child {
  padding-block-end: var(--space-7);
}

:root:root .cw-accordion-ground--sunken .c-rows-faq__item {
  background: var(--surface-sunken);
}

:root:root .cw-accordion-ground--inverse .c-rows-faq__item {
  --fg-strong: var(--fg-emphasis-on-dark);
  --fg-medium: var(--fg-on-dark);
  --fg-eyebrow: var(--fg-emphasis-on-dark);
  --fg-link: var(--fg-link-on-dark);
  background: var(--surface-inverse);
  color: var(--fg-on-dark);
}

:root:root .cw-accordion-ground--accent .c-rows-faq__item {
  --fg-strong: var(--fg-on-accent);
  --fg-medium: var(--fg-on-accent-soft);
  --fg-eyebrow: var(--fg-on-accent);
  --fg-link: var(--fg-on-accent);
  background: var(--surface-accent, var(--action-primary-bg));
  color: var(--fg-on-accent);
}

/* stylelint-enable selector-class-pattern */
/* ==========================================================================
   The listing filter over a Query Loop (includes/query-filter.php).
   ==========================================================================

   A search box, a category select and a button: Thain Wildbur's news and
   resources listings. In a row from 48em, stacked on a phone, all three the
   height of a button. The fields
   take the contract's field roles; the button is drawn in the inverse
   colours, as on the live listings.
   ========================================================================== */
:root:root .c-filter {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-block-end: var(--space-8);
}
:root:root .c-filter__search,
:root:root .c-filter__select select {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--field-height);
  padding: var(--space-4);
  border: var(--hairline) solid var(--field-border);
  border-radius: var(--field-radius);
  background-color: var(--field-bg);
  color: var(--field-fg);
  font: inherit;
}
:root:root .c-filter__search::-moz-placeholder {
  color: var(--fg-placeholder);
}
:root:root .c-filter__search::placeholder {
  color: var(--fg-placeholder);
}
:root:root .c-filter__search:focus-visible,
:root:root .c-filter__select select:focus-visible {
  outline: var(--focus-ring-width) solid var(--field-border-focus);
  outline-offset: var(--focus-ring-offset);
}
:root:root .c-filter__select {
  display: flex;
}
:root:root .c-filter__select select {
  height: auto;
}
:root:root .c-filter__button {
  min-height: var(--field-height);
  padding: var(--space-4) var(--space-7);
  border: 0;
  border-radius: var(--action-radius);
  background: var(--surface-inverse);
  color: var(--fg-on-dark);
  font: inherit;
  font-weight: var(--fw-bold);
  cursor: pointer;
}
@media (min-width: 48em) {
  :root:root .c-filter {
    flex-direction: row;
    gap: var(--space-7);
  }
  :root:root .c-filter__search,
  :root:root .c-filter__select {
    flex: 1 1 0;
  }
  :root:root .c-filter__button {
    flex: 0 0 auto;
  }
}

/* ==========================================================================
   split-steps: an image beside numbered steps on the tint ground.
   ==========================================================================

   Thain Wildbur's "Joining Thain Wildbur is as easy as 1-2-3" (home and
   services). The panel carries the tint ground; the image fills one half
   from 64em, and sits on top on a phone and a tablet. The steps are
   band-cta's c-steps, here with a filled disc in the ground's strong colour
   and the step's heading in its link colour.
   ========================================================================== */
:root:root .c-split-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-block: var(--space-10);
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
}
:root:root .c-split-steps__media .wp-block-image {
  height: 100%;
  margin: 0;
}
:root:root .c-split-steps__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 16rem;
  -o-object-fit: cover;
     object-fit: cover;
}
:root:root .c-split-steps__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-10) var(--space-7) var(--space-11);
}
:root:root .c-split-steps__body .c-title {
  margin: 0 0 var(--space-9);
}
:root:root .c-split-steps .c-steps__item {
  gap: var(--space-3);
  padding-block: 0;
  margin-block-end: var(--space-6);
  border: 0;
}
:root:root .c-split-steps .c-steps__n {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  margin-block-start: var(--space-1);
  border-radius: 50%;
  background: var(--fg-strong);
  color: var(--surface-page);
}
:root:root .c-split-steps .c-steps__term {
  font-size: var(--t-h3);
  color: var(--fg-link);
}
:root:root .c-split-steps .c-steps__item .c-body {
  color: var(--fg-medium);
}
@media (min-width: 64em) {
  :root:root .c-split-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :root:root .c-split-steps__body {
    padding: var(--space-11) var(--space-10);
  }
}

/* ==========================================================================
   rows-profile: a person's photo beside their bio and short Q&A pairs.
   ==========================================================================

   Thain Wildbur's team pages. Two equal halves from 48em, the photo at the
   top of its half; stacked on a phone, the photo first. The pairs
   (c-rows-profile__pairs) are each a small heading (c-sub) over a one-line
   answer. With image.ornament: shape
   the photo sits on the offset underlay, as split-media's does.
   ========================================================================== */
:root:root .c-rows-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-9);
  margin-block: var(--space-10);
}
:root:root .c-rows-profile__media .wp-block-image {
  position: relative;
  isolation: isolate;
  margin: 0;
}
:root:root .c-rows-profile__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
:root:root .c-rows-profile__body .c-title {
  margin: 0 0 var(--space-2);
  font-size: var(--t-title);
}
:root:root .c-rows-profile__body > .c-body,
:root:root .c-rows-profile__body > .wp-block-group__inner-container > .c-body {
  margin: 0 0 var(--space-4);
}
:root:root {
  /* The pairs: a small heading over a one-line answer, a space between. */
}
:root:root .c-rows-profile__pairs .c-sub {
  margin: var(--space-7) 0 0;
}
:root:root .c-rows-profile__pairs .c-body {
  margin: 0;
}
@media (min-width: 48em) {
  :root:root .c-rows-profile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-11);
    align-items: start;
  }
}

/* stylelint-disable-next-line selector-class-pattern -- the contract's body class from settings.json. */
:root:root .cw-image-ornament--shape .c-rows-profile__media .wp-block-image::after {
  content: "";
  position: absolute;
  inset: var(--space-3) calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-3);
  z-index: -1;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

/* ==========================================================================
   rows-downloads: files to download, one row each.
   ==========================================================================

   Thain Wildbur's "Tax rates and allowances" download. Under a title, a row
   per file (c-rows-downloads__item): a small thumbnail, the title, a line,
   the file's type and size (c-rows-downloads__file) and a button at the
   end, ruled underneath in border.soft. From 48em the thumbnail stands to
   the left of the copy and the button to the right; on a phone the
   thumbnail goes and the button drops under the copy. The sunken ground
   runs the page's full width, as on live, however wide the content column.
   The button is drawn in the inverse colours, as on the live page.
   ========================================================================== */
:root:root {
  /* Two classes, to hold its own room over the panels' widths (_widths.scss). */
}
:root:root .c-rows-downloads.c-ground--sunken,
:root:root .c-rows-downloads {
  padding-block: calc(var(--space-11) * 1.6);
  box-shadow: 0 0 0 100vmax var(--surface-sunken);
  clip-path: inset(0 -100vmax);
}
:root:root .c-rows-downloads > .c-title,
:root:root .c-rows-downloads > .wp-block-group__inner-container > .c-title {
  margin: 0 0 var(--space-8);
  font-size: var(--t-title);
}
:root:root .c-rows-downloads__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1) var(--space-6);
  padding-block-end: var(--space-5);
  border-block-end: var(--hairline) solid var(--border-soft);
}
:root:root .c-rows-downloads__item .wp-block-image {
  display: none;
  margin: 0;
}
:root:root .c-rows-downloads__item .wp-block-image img {
  display: block;
  width: 3rem;
  height: auto;
}
:root:root .c-rows-downloads__item .c-card__title {
  margin: 0;
  font-size: var(--t-card-title);
}
:root:root .c-rows-downloads__item .c-body {
  margin: 0;
  font-size: var(--t-small);
}
:root:root .c-rows-downloads__file {
  margin: 0;
  font-size: var(--t-small);
  color: var(--fg-eyebrow);
  text-transform: uppercase;
}
:root:root .c-rows-downloads__item .c-actions {
  margin: var(--space-4) 0 0;
}
:root:root .c-rows-downloads .c-btn .wp-block-button__link {
  background: var(--surface-inverse);
  color: var(--fg-on-dark);
}
@media (min-width: 48em) {
  :root:root .c-rows-downloads__item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }
  :root:root .c-rows-downloads__item .wp-block-image {
    display: block;
    grid-row: 1/span 3;
    align-self: start;
  }
  :root:root .c-rows-downloads__item > :not(.wp-block-image, .c-actions),
  :root:root .c-rows-downloads__item > .wp-block-group__inner-container > :not(.wp-block-image, .c-actions) {
    grid-column: 2;
  }
  :root:root .c-rows-downloads__item .c-actions {
    grid-column: 3;
    grid-row: 1/span 3;
    margin: 0;
  }
}

/* ==========================================================================
   split-contact: the form beside the ways to get in touch.
   ==========================================================================

   Thain Wildbur's contact page. The form (c-split-contact__form) takes six
   parts in ten from 48em, the details (c-split-contact__details) four;
   stacked on a phone, the form first. Each detail is a heading (c-title)
   over a line: the phone number and the email address as large underlined
   links (c-lead), then the address.
   ========================================================================== */
:root:root .c-split-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
  margin-block: var(--space-10);
}
:root:root .c-split-contact__details .c-title {
  margin: var(--space-7) 0 var(--space-2);
  font-size: var(--t-title);
}
:root:root .c-split-contact__details .c-title:first-child,
:root:root .c-split-contact__details > .wp-block-group__inner-container > .c-title:first-child {
  margin-block-start: 0;
}
:root:root .c-split-contact__details .c-lead {
  margin: 0;
  font-size: var(--t-card-title);
  font-weight: var(--fw-bold);
}
:root:root .c-split-contact__details .c-lead a {
  color: var(--fg-medium);
  text-decoration-line: underline;
}
:root:root .c-split-contact__details .c-body {
  margin: 0;
}
@media (min-width: 48em) {
  :root:root .c-split-contact {
    grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
    gap: var(--space-11);
  }
}
:root:root {
  /* A marked placeholder for something the import can't carry (the form):
     it says what goes there, in a dashed box. */
}
:root:root .c-note {
  padding: var(--space-3) var(--space-4);
  border: var(--hairline) dashed currentcolor;
  font-size: var(--t-small);
}

/* ==========================================================================
   rows-quotes --carousel: testimonials, one at a time.
   ==========================================================================

   Thain Wildbur's "But don't just take our word for it". Each item of the
   list is a white card: the person's round photo (c-rows-quotes__photo),
   their words in the strong colour, their name and role (c-rows-quotes__cite)
   under them. The list scrolls one card at a time, snapping;
   assets/src/js/quotes-carousel.js adds the dots under it. On a phone the
   photo sits above the words.
   ========================================================================== */
:root:root .c-rows-quotes--carousel .c-title {
  color: var(--fg-strong);
}
:root:root .c-rows-quotes--carousel .c-rows-quotes__list {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
:root:root .c-rows-quotes--carousel .c-rows-quotes__item {
  display: grid;
  flex: 0 0 100%;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-page);
  font-size: var(--t-card-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  scroll-snap-align: start;
}
:root:root .c-rows-quotes--carousel .c-rows-quotes__item:last-child {
  border: 0;
}
:root:root .c-rows-quotes__photo {
  display: block;
  width: 10rem;
  height: 10rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
:root:root .c-rows-quotes__cite {
  display: block;
  font-size: var(--t-tag);
  font-weight: var(--fw-regular);
  color: var(--fg-medium);
}
:root:root .c-rows-quotes__cite strong {
  display: block;
  font-size: var(--t-small);
  font-weight: var(--fw-regular);
  color: var(--fg-eyebrow);
}
:root:root .c-rows-quotes__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: var(--space-6);
}
:root:root .c-rows-quotes__dot {
  inline-size: 0.625rem;
  block-size: 0.625rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border-soft);
  cursor: pointer;
}
:root:root .c-rows-quotes__dot[aria-current=true] {
  background: var(--fg-strong);
}
@media (min-width: 48em) {
  :root:root .c-rows-quotes--carousel .c-rows-quotes__item {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    gap: var(--space-2) var(--space-8);
    padding: var(--space-7);
  }
  :root:root .c-rows-quotes__photo {
    grid-row: 1/span 2;
  }
}

/* ==========================================================================
   map: a map embed across the page's full width (c-map).
   ========================================================================== */
:root:root .c-map {
  margin-block: 0;
  padding: 0;
}
:root:root .c-map iframe {
  display: block;
  width: 100%;
  height: 28.125rem;
  border: 0;
}

/* ==========================================================================
   cards-cases --media: cards with an image on top.
   ==========================================================================

   Thain Wildbur's service and team cards, written out rather than queried:
   the image (c-card__media) across the card's top, then the title, the text
   and "Read On" on the card body's ground (card.body-ground), as the query
   cards draw it (panels/_cards-query.scss).
   ========================================================================== */
:root:root .c-cards-cases--media .c-card {
  position: relative;
  gap: var(--space-2);
  padding: 0 0 var(--space-7);
  overflow: hidden;
  border-radius: var(--card-radius);
  background: var(--surface-page);
  box-shadow: var(--shadow-card-sm);
}
:root:root :is(.c-cards-cases--media .c-card, .c-cards-cases--media .c-card > .wp-block-group__inner-container) > :not(.c-card__media, .wp-block-group__inner-container) {
  margin-inline: var(--space-7);
}
:root:root .c-cards-cases--media .c-card__media {
  margin: 0 0 var(--space-5);
}
:root:root .c-cards-cases--media .c-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 12/7;
  -o-object-fit: cover;
     object-fit: cover;
}
:root:root .c-cards-cases--media .c-card__title {
  font-size: var(--t-card-title);
}
:root:root .c-cards-cases--media .c-card__title a {
  color: inherit;
  text-decoration: none;
}
:root:root {
  /* The title's link covers the card. */
}
:root:root .c-cards-cases--media .c-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
:root:root .c-cards-cases--media .c-body {
  font-size: var(--t-small);
  color: var(--fg-medium);
}
:root:root .c-cards-cases--media .c-link {
  color: var(--fg-link);
  text-decoration-line: underline;
}

/* card.body-ground, as on the query cards. */
/* stylelint-disable selector-class-pattern -- the contract's body classes from settings.json. */
:root:root .cw-card-body-ground--sunken .c-cards-cases--media .c-card {
  background: var(--surface-sunken);
}

:root:root .cw-card-body-ground--inverse .c-cards-cases--media .c-card {
  --fg-strong: var(--fg-emphasis-on-dark);
  --fg-medium: var(--fg-on-dark);
  --fg-link: var(--fg-link-on-dark);
  background: var(--surface-inverse);
}

:root:root .cw-card-body-ground--accent .c-cards-cases--media .c-card {
  --fg-strong: var(--fg-on-accent);
  --fg-medium: var(--fg-on-accent-soft);
  --fg-link: var(--fg-on-accent);
  background: var(--surface-accent, var(--action-primary-bg));
}

/* stylelint-enable selector-class-pattern */
/* ==========================================================================
   grid-facts --checks, --icons and --overlap.
   ==========================================================================

   Thain Wildbur's feature rows and "Why choose us".
   --checks: each item led by a check in a circle, drawn here, in the action
   colour, beside its heading and text.
   --icons: each item led by its own icon, an image the content puts in the
   item's c-grid-facts__mark; the mark loses its numbered disc and holds the
   image at a fixed size beside the heading and text.
   --overlap: the feature row on its sunken box that rides up over the banner
   (components/_banner.scss moves it); here, its corners and room.
   ========================================================================== */
:root:root :is(.c-grid-facts--checks, .c-grid-facts--icons) .c-grid-facts__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  -moz-column-gap: var(--space-4);
       column-gap: var(--space-4);
  align-content: start;
}
:root:root :is(.c-grid-facts--checks, .c-grid-facts--icons) .c-grid-facts__item > :not(.c-grid-facts__mark) {
  grid-column: 2;
}
:root:root .c-grid-facts--checks .c-grid-facts__item::before {
  content: "";
  grid-row: 1/span 2;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  background: var(--action-primary-bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24zm5.3 7.3L10 14.6l-3.3-3.3-1.4 1.4 4.7 4.7 8.7-8.7z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24zm5.3 7.3L10 14.6l-3.3-3.3-1.4 1.4 4.7 4.7 8.7-8.7z'/%3E%3C/svg%3E") center/contain no-repeat;
}
:root:root .c-grid-facts--icons .c-grid-facts__mark {
  grid-row: 1/span 2;
  inline-size: 3.5rem;
  block-size: auto;
  margin: 0;
  border-radius: 0;
  background: none;
}
:root:root .c-grid-facts--icons .c-grid-facts__mark img {
  display: block;
  width: 100%;
  height: auto;
}
:root:root .c-grid-facts--overlap {
  padding: var(--space-9) var(--space-7);
  border-radius: var(--radius-md);
}
@media (min-width: 64em) {
  :root:root .c-grid-facts--overlap {
    padding: var(--space-10) var(--space-11);
  }
}

/* band-promo --icons: each item's icon, an image the content writes with
   the class c-band-promo__icon (G20), at a fixed size above its heading. */
:root:root .c-band-promo--icons .c-band-promo__icon {
  display: block;
  inline-size: 3.5rem;
  block-size: auto;
  margin-block: var(--space-6) var(--space-3);
}

/* ==========================================================================
   Sidebar Panels.
   ==========================================================================

   The sidebar stack and its label, the in-this-article index and the promo.
   ========================================================================== */
:root:root .c-sidebar-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
:root:root .c-sidebar__label {
  margin: 0 0 var(--space-4);
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-eyebrow);
}
:root:root .c-sidebar-index__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: c-sidebar-index;
}
:root:root .c-sidebar-index__item {
  counter-increment: c-sidebar-index;
}
:root:root .c-sidebar-index__link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  padding-block: var(--space-2);
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  color: var(--fg-secondary);
  text-decoration: none;
}
:root:root .c-sidebar-index__link::before {
  content: counter(c-sidebar-index, decimal-leading-zero);
  font-weight: var(--fw-bold);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
:root:root .c-sidebar-index__link:hover {
  color: var(--fg-link);
}
:root:root .c-sidebar-index__link[aria-current=true] {
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
}
:root:root .c-sidebar-index__link[aria-current=true]::before {
  color: var(--fg-eyebrow);
}
:root:root .c-sidebar-index:empty {
  display: none;
}
:root:root .c-sidebar-promo {
  padding: var(--space-6);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-tinted);
}
:root:root {
  /* On a sunken ground the card sits flat, without the raised shadow. */
}
:root:root .c-sidebar-promo--sunken {
  box-shadow: none;
}
:root:root .c-sidebar-promo__body {
  margin: 0;
  font-size: var(--t-small);
  line-height: var(--lh-relaxed);
  color: var(--fg-medium);
}
:root:root .c-sidebar-promo .c-actions {
  margin-block-start: var(--space-5);
}

/* ==========================================================================
   split-sidebar: the copy beside its own sidebar column.
   ==========================================================================

   For a page with no theme sidebar that keeps a sidebar of its own in the
   content: a column of sidebar blocks (a label over a menu, a promo card, a
   contents list) beside the copy. The site's own blocks go in that column
   as they are; the panel only lays them out.

   The sidebar takes the contract's sidebar share and gap, so it reads like
   the frame's sidebar. Two columns once the panel is 680px wide, by its own
   width; narrower, one column, the sidebar first as the markup has it.
   ========================================================================== */
:root:root .c-split-sidebar {
  margin-block: 0;
  padding-block: var(--space-9);
  container: c-split-sidebar/inline-size;
}
@media (min-width: 48em) {
  :root:root .c-split-sidebar {
    padding-block: var(--space-10);
  }
}
@media (min-width: 64em) {
  :root:root .c-split-sidebar {
    padding-block: var(--space-11);
  }
}
:root:root .c-split-sidebar__grid {
  display: grid;
  gap: var(--sidebar-gap);
}
:root:root {
  /* The grid's gap is the only space between the columns: a theme's bottom
     margin on a group would add to the row. */
}
:root:root :is(.c-split-sidebar__grid, .c-split-sidebar__grid > .wp-block-group__inner-container) > * {
  margin-block: 0;
}
:root:root {
  /* In px, as split-prose's are, because some themes scale the root font
     size. At 680px the sidebar's share is about 200px, the least its menu
     and a form field fit in. */
}
@container c-split-sidebar (min-width: 680px) {
  :root:root .c-split-sidebar__grid {
    grid-template-columns: minmax(0, var(--sidebar-width)) minmax(0, 1fr);
  }
}
:root:root {
  /* A flex column as tall as the row: a block in it can grow to the foot,
     which gives a sticky part inside it (a contents list) room to travel
     beside the copy. */
}
:root:root .c-split-sidebar__aside {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
:root:root .c-split-sidebar__main {
  min-width: 0;
}
:root:root {
  /* A theme's content rules give every block a margin of its own; in the
     columns the panel sets the space between blocks. Through the inner
     container a classic theme adds. */
}
:root:root :is(.c-split-sidebar__aside, .c-split-sidebar__aside > .wp-block-group__inner-container) > *,
:root:root :is(.c-split-sidebar__main, .c-split-sidebar__main > .wp-block-group__inner-container) > * {
  margin-block: 0;
}
:root:root :is(.c-split-sidebar__aside, .c-split-sidebar__aside > .wp-block-group__inner-container) > * + * {
  margin-block-start: var(--space-7);
}
:root:root {
  /* The label sits close over the menu it names. */
}
:root:root :is(.c-split-sidebar__aside, .c-split-sidebar__aside > .wp-block-group__inner-container) > .c-sidebar__label + * {
  margin-block-start: var(--space-3);
}
:root:root :is(.c-split-sidebar__main, .c-split-sidebar__main > .wp-block-group__inner-container) > * + * {
  margin-block-start: var(--space-5);
}
:root:root {
  /* A new heading opens a part of the copy, so it takes more room above. */
}
:root:root :is(.c-split-sidebar__main, .c-split-sidebar__main > .wp-block-group__inner-container) > * + .c-head {
  margin-block-start: var(--space-9);
}
:root:root :is(.c-split-sidebar__main, .c-split-sidebar__main > .wp-block-group__inner-container) > * + .c-split-sidebar__note {
  margin-block-start: var(--space-7);
}
:root:root {
  /* The promo card's title has the space under it that a card title has
     over its text. */
}
:root:root .c-split-sidebar .c-sidebar-promo .c-card__title {
  margin-block-end: var(--space-3);
}
:root:root {
  /* The note: one point set apart in the copy, in an outlined box under a
     marked label. */
}
:root:root .c-split-sidebar__note {
  padding: var(--space-7) var(--space-6);
  border: var(--card-border-width) solid var(--border-card);
  border-radius: var(--radius-md);
}
:root:root :is(.c-split-sidebar__note, .c-split-sidebar__note > .wp-block-group__inner-container) > * {
  margin-block: 0;
}
:root:root :is(.c-split-sidebar__note, .c-split-sidebar__note > .wp-block-group__inner-container) > * + * {
  margin-block-start: var(--space-4);
}
:root:root .c-split-sidebar__note-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
:root:root .c-split-sidebar__note-head .c-eyebrow {
  margin: 0;
}
:root:root .c-split-sidebar__note-icon {
  flex: none;
  color: var(--fg-on-accent);
}
:root:root .c-split-sidebar__note-icon svg {
  border-radius: var(--radius-sm);
  background: var(--surface-accent);
}

/* ==========================================================================
   inset-video: one video, or two side by side, across the content column.
   ==========================================================================

   The video is the core Embed block. An optional heading and lead sit above
   it and a caption below. The video fills the column and keeps the shape its
   embed gives it, so the panel sets no ratio of its own.

   --2: two videos, each under its own heading, side by side from 48em and
   one under the other below.

   --chapters: the video beside a column of links to its chapters.
   ========================================================================== */
:root:root .c-inset-video,
:root:root .c-inset-video .wp-block-group {
  margin-block: 0;
}
:root:root .c-inset-video {
  padding-block: var(--space-9);
}
@media (min-width: 48em) {
  :root:root .c-inset-video {
    padding-block: var(--space-10);
  }
}
@media (min-width: 64em) {
  :root:root .c-inset-video {
    padding-block: var(--space-11);
  }
}
:root:root {
  /* A theme's content rules give every block a margin of its own; in the
     panel the space between its blocks is the panel's. Through the inner
     container a classic theme adds. */
}
:root:root :is(.c-inset-video, .c-inset-video > .wp-block-group__inner-container, .c-inset-video__item, .c-inset-video__item > .wp-block-group__inner-container) > * {
  margin-block: 0;
}
:root:root :is(.c-inset-video, .c-inset-video > .wp-block-group__inner-container, .c-inset-video__item, .c-inset-video__item > .wp-block-group__inner-container) > * + * {
  margin-block-start: var(--space-4);
}
:root:root {
  /* The video stands clear of the heading or lead over it. */
}
:root:root :is(.c-inset-video, .c-inset-video > .wp-block-group__inner-container, .c-inset-video__item, .c-inset-video__item > .wp-block-group__inner-container) > * + .wp-block-embed {
  margin-block-start: var(--space-7);
}
:root:root {
  /* The embed's own caption, or the panel's caption under the video. */
}
:root:root .c-inset-video :is(.wp-block-embed figcaption, .c-inset-video__caption) {
  margin: var(--space-4) 0 0;
  font-size: var(--t-small);
  line-height: var(--lh-relaxed);
  text-align: start;
  color: var(--fg-caption);
}
:root:root .c-inset-video__grid {
  display: grid;
  gap: var(--space-8);
}
@media (min-width: 48em) {
  :root:root .c-inset-video__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
:root:root .c-inset-video__item {
  min-width: 0;
}
:root:root .c-inset-video__title {
  font-size: var(--t-card-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  text-wrap: pretty;
}
:root:root {
  /* A video's own heading sits close over it. */
}
:root:root :is(.c-inset-video__item, .c-inset-video__item > .wp-block-group__inner-container) > .c-inset-video__title + .wp-block-embed {
  margin-block-start: var(--space-4);
}
:root:root {
  /* --chapters: the video beside its chapters, in the grid's two columns
     (one under the other on a phone). The chapters are a Buttons block
     (c-inset-video__chapters), one link under another across the column,
     each a point in the video with its time in <em>. One set apart with
     c-inset-video__chapter--accent takes the accent's colours after a list
     mark: the way to the transcript. */
}
:root:root .c-inset-video--chapters {
  padding-inline: var(--gutter);
}
:root:root :is(.c-inset-video--chapters .c-measure, .c-inset-video--chapters .c-measure > .wp-block-group__inner-container) > * {
  margin-block: 0;
}
:root:root :is(.c-inset-video--chapters .c-measure, .c-inset-video--chapters .c-measure > .wp-block-group__inner-container) > * + * {
  margin-block-start: var(--space-3);
}
:root:root :is(.c-inset-video--chapters .c-measure, .c-inset-video--chapters .c-measure > .wp-block-group__inner-container) > * + .c-inset-video__grid {
  margin-block-start: var(--space-7);
}
:root:root .c-inset-video--chapters .c-inset-video__grid {
  align-items: start;
}
:root:root .c-inset-video--chapters .c-inset-video__grid .wp-block-embed {
  margin: 0;
}
:root:root .c-inset-video__chapters {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  margin: 0;
}
:root:root .c-inset-video__chapters > .wp-block-button {
  width: 100%;
  margin: 0;
}
:root:root .c-inset-video__chapters .wp-block-button__link {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--fg-strong);
  font-size: var(--t-small);
  font-weight: var(--fw-semi);
  line-height: var(--lh-normal);
  text-align: start;
  text-decoration: none;
}
:root:root .c-inset-video__chapters .c-inset-video__chapter--accent .wp-block-button__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--action-on-accent-bg);
  color: var(--action-on-accent-fg);
}
:root:root .c-inset-video__chapter--accent .wp-block-button__link::before {
  flex: 0 0 auto;
  inline-size: var(--space-6);
  block-size: var(--space-6);
  background: currentcolor;
  content: "";
  -webkit-mask: var(--mask-menu) center/contain no-repeat;
          mask: var(--mask-menu) center/contain no-repeat;
}

/* With the frame, beside a sidebar, the video fills the content column as a
   figure's frame does; the heading, lead and caption are text, so they start
   on the page edge with the reading panels' text and stop at the measure
   (components/_frame.scss). */
/* stylelint-disable selector-class-pattern -- cw-frame is the contract's class from settings.json, and entry-content is the theme's. */
@media screen and (min-width: 1025px) {
  :root .cw-frame.has-sidebar .entry-content .c-inset-video > :is(.c-title, .c-lead, .c-inset-video__caption),
  :root .cw-frame.has-sidebar .entry-content .c-inset-video > .wp-block-group__inner-container > :is(.c-title, .c-lead, .c-inset-video__caption) {
    padding-inline: min(var(--gutter-page-edge), 5vw);
    max-width: calc(var(--reading-measure) + 2 * min(var(--gutter-page-edge), 5vw));
  }
}
/* stylelint-enable selector-class-pattern */
/* ==========================================================================
   Section menu in a sidebar.
   ==========================================================================

   The section menu as the audit layout draws it: a label, ruled rows with a
   chevron, the page you are on in a tinted row with a bar, a link to the
   whole section, and the promo card under it. The rows come from the page
   tree; nothing is typed.

   Only a section whose hub gives its menu a heading is drawn this way, so
   other sections keep the menu they have. Written against Kadence's sidebar,
   #secondary, which also lifts these rules above the menu's own stylesheet
   and a theme's padding on menu links.
   ========================================================================== */
/* stylelint-disable selector-class-pattern -- the menu is WordPress's page list inside Kadence's sidebar, so its classes are theirs. */
/* The chevron from the design: a 2px stroke icon, coloured by the row. */
#secondary .c-context-menu:has(> .c-context-menu__heading) {
  padding: 0;
  border: 0;
  background: none;
}
#secondary .c-context-menu__heading {
  margin: 0;
  padding-block-end: var(--space-2);
  border-block-end: var(--card-border-width) solid var(--border-card);
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-bold);
  line-height: var(--lh-flush);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}
#secondary .c-context-menu__heading ~ .c-context-menu__list,
#secondary .c-context-menu__heading ~ .c-context-menu__list .children {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}
#secondary .c-context-menu__heading ~ .c-context-menu__list li {
  margin: 0;
  padding: 0;
  border: 0;
}
#secondary {
  /* The rows: the hub's own link and every page under it. */
}
#secondary .c-context-menu__heading ~ .c-context-menu__root,
#secondary .c-context-menu__heading ~ .c-context-menu__list li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border: 0;
  background: none;
  font-size: var(--t-small);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-medium);
  text-decoration: none;
}
#secondary {
  /* Depth shows as indent: the hub's own row close to the edge, its pages a
     clear step in, theirs further. */
}
#secondary .c-context-menu__heading ~ .c-context-menu__root {
  padding-inline-start: var(--space-2);
  /* A light rule under the hub's own row (see "Rules" below). */
  border-block-end: var(--card-border-width) solid var(--border-faint);
}
#secondary .c-context-menu__heading ~ .c-context-menu__list > li > a {
  padding-inline-start: var(--space-7);
}
#secondary .c-context-menu__heading ~ .c-context-menu__list .children > li > a {
  padding-inline-start: var(--space-9);
}
#secondary .c-context-menu__heading ~ .c-context-menu__root .menu-title {
  margin: 0;
  font: inherit;
  color: inherit;
}
#secondary .c-context-menu__heading ~ .c-context-menu__root::after,
#secondary .c-context-menu__heading ~ .c-context-menu__list li > a::after {
  content: "";
  flex: none;
  inline-size: 15px;
  block-size: 15px;
  background-color: currentcolor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2715%27 height=%2715%27 viewBox=%270 0 15 15%27 fill=%27none%27%3E%3Cpath d=%27M1 1L4.5 4.5L1 8%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2715%27 height=%2715%27 viewBox=%270 0 15 15%27 fill=%27none%27%3E%3Cpath d=%27M1 1L4.5 4.5L1 8%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
#secondary {
  /* A row with pages under it: the same chevron as every row (it goes to
     the page; it doesn't open a list). The menu's own stylesheet draws a
     second, bordered arrow there; every property it sets is put back. */
}
#secondary .c-context-menu__heading ~ .c-context-menu__list li.page_item_has_children > a {
  position: static;
  padding-inline-end: var(--space-4);
}
#secondary .c-context-menu__heading ~ .c-context-menu__list li.page_item_has_children > a::after {
  position: static;
  display: block;
  inline-size: 15px;
  block-size: 15px;
  margin: 0;
  border: 0;
  background-color: currentcolor;
  opacity: 1;
  rotate: none;
}
#secondary .c-context-menu__heading ~ .c-context-menu__root:hover,
#secondary .c-context-menu__heading ~ .c-context-menu__list li > a:hover {
  color: var(--fg-strong);
}
#secondary {
  /* Rules: dark under the heading and under the last row, closing the
     menu; light everywhere between. Each row in the list draws the light
     rule above itself, so no two rules ever meet; the first row under the
     hub's sits on its dark one. */
}
#secondary .c-context-menu__heading ~ .c-context-menu__list {
  border-block-end: var(--card-border-width) solid var(--border-card);
}
#secondary .c-context-menu__heading ~ .c-context-menu__list li > a {
  border-block-start: var(--card-border-width) solid var(--border-faint);
}
#secondary .c-context-menu__heading ~ .c-context-menu__list > li:first-child > a {
  border-block-start: 0;
}
#secondary {
  /* The page you are on: tinted, with a bar. */
}
#secondary .c-context-menu__heading ~ .c-context-menu__root[aria-current=page],
#secondary .c-context-menu__heading ~ .c-context-menu__list li.current_page_item > a {
  padding-inline-start: calc(var(--space-2) - 3px);
  border-inline-start: 3px solid var(--border-selected);
  background: var(--surface-selected);
  font-weight: var(--fw-semi);
  color: var(--fg-nav-current);
}
#secondary .c-context-menu__heading ~ .c-context-menu__list > li.current_page_item > a {
  padding-inline-start: calc(var(--space-7) - 3px);
}
#secondary .c-context-menu__heading ~ .c-context-menu__list .children > li.current_page_item > a {
  padding-inline-start: calc(var(--space-9) - 3px);
}
#secondary {
  /* A page above the one you are on, inside the list: bold, on a lighter
     tint than the current page and without its bar, so the branch reads as
     one piece. */
}
#secondary .c-context-menu__heading ~ .c-context-menu__list li.current_page_ancestor > a {
  background: var(--surface-sunken);
  font-weight: var(--fw-semi);
  color: var(--fg-strong);
}
#secondary .c-context-menu__heading ~ .c-context-menu__root[aria-current=page]::after,
#secondary .c-context-menu__heading ~ .c-context-menu__list li.current_page_item > a::after {
  color: var(--fg-link);
}
#secondary {
  /* A site's menu stylesheet may set the current link's colour with
     !important, and the menu's own stylesheet hides the current row's marker. */
}
#secondary .c-context-menu__heading ~ .c-context-menu__list li.current_page_item > a {
  color: var(--fg-nav-current) !important; /* stylelint-disable-line declaration-no-important -- only !important beats the menu stylesheet's own. */
}
#secondary .c-context-menu__heading ~ .c-context-menu__list li.current_page_item > a::after {
  display: block;
  position: static;
}
#secondary {
  /* The rows draw their own marker, so the menu's gutter rule stays off. */
}
#secondary .c-context-menu__heading ~ .c-context-menu__list li > a::before {
  display: none;
}
#secondary {
  /* Close under the rows, whatever padding a theme gives the menu's links. */
}
#secondary .c-context-menu__all {
  display: flex;
  gap: var(--space-2);
  width: -moz-fit-content;
  width: fit-content;
  margin-block-start: var(--space-4);
  padding: 0;
  font-size: var(--t-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-relaxed);
  color: var(--fg-link);
  text-decoration: none;
}
#secondary .c-page-band--sidebar {
  margin-block-start: var(--space-7);
}

/* nav.section-all: hide. No link back to the section's top page under the
   menu, in the sidebar or the phone's quick menu: the first row is that page. */
.cw-nav-section-all--hide :is(#secondary, .c-quick-menu__panel) .c-context-menu__all {
  display: none;
}

/* A widget that wraps the menu's shortcode in paragraphs leaves empty ones
   around it, and their margins push the menu down. */
#secondary .widget:has(> .cw-context) > p:empty {
  display: none;
}

/* sidebar.top: offset (the default). Level with the top of the content, as
   the design draws it: 35px down for the content column's top padding, plus
   10px because Ascendant's child theme starts the sidebar that far above the
   column. When the content opens with one of the Panels that sit beside the
   sidebar, level with that Panel's eyebrow instead, the Panel's padding
   further down. sidebar.top: align-top skips all of this (below). */
@media (min-width: 1025px) {
  body:not(.cw-sidebar-top--align-top) #secondary .c-context-menu:has(> .c-context-menu__heading) {
    padding-block-start: 45px;
  }
  body:not(.cw-sidebar-top--align-top).has-sidebar:has(.single-content > :is(.c-cards-cases, .c-rows-quotes, .c-rows-stories, .c-inset-facts, .c-grid-facts, .c-cards-guides):first-child) #secondary .c-context-menu:has(> .c-context-menu__heading) {
    padding-block-start: calc(var(--space-7) + 45px);
  }
  /* Content that opens with the dark facts strip: level with the strip's box,
     which sits the Panel's wide-screen top padding down. */
  body:not(.cw-sidebar-top--align-top).has-sidebar:has(.single-content > .c-strip-facts--inverse:first-child) #secondary .c-context-menu:has(> .c-context-menu__heading) {
    padding-block-start: calc(var(--space-11) + 45px);
  }
}
/* sidebar.top: align-top. The menu and the content's first heading line up
   at the top of the content area: the menu adds nothing above itself, and
   the first block in the content gives up its top margin and its top
   padding; a Panel on a ground of its own keeps a little, for its box. Wide screens only: below, the sidebar has moved
   under the content. */
@media (min-width: 1025px) {
  .cw-sidebar-top--align-top.has-sidebar :is(.entry-content, .single-content) > :first-child {
    margin-block-start: 0;
  }
  .cw-sidebar-top--align-top.has-sidebar :is(.entry-content, .single-content) > :first-child:not([class*=c-ground--]) {
    padding-block-start: 0;
  }
  /* A Panel on its own ground keeps a box around its text: as much space
     above as at its sides, not a full section's worth. */
  .cw-sidebar-top--align-top.has-sidebar :is(.entry-content, .single-content) > :first-child[class*=c-ground--] {
    padding-block-start: var(--space-9);
  }
}
/* The promo card under a headed menu: flat, a full-width button. */
#secondary:has(.c-context-menu__heading) {
  /* A white card on a near-white page needs an edge: the menu's own rule
     colour, with the offset shadow kept. */
}
#secondary:has(.c-context-menu__heading) .c-sidebar-promo {
  padding: var(--space-4);
  border: var(--card-border-width) solid var(--border-card);
}
#secondary:has(.c-context-menu__heading) .c-sidebar-promo__body {
  color: var(--fg-muted);
  line-height: var(--lh-normal);
}
#secondary:has(.c-context-menu__heading) .c-sidebar-promo .c-actions {
  margin-block-start: var(--space-7);
}
#secondary:has(.c-context-menu__heading) .c-sidebar-promo .wp-block-button,
#secondary:has(.c-context-menu__heading) .c-sidebar-promo .c-btn {
  width: 100%;
}
#secondary:has(.c-context-menu__heading) .c-sidebar-promo :is(.c-btn .wp-block-button__link, a.c-btn) {
  padding-block: var(--space-3);
  background: var(--surface-inverse);
  color: var(--fg-emphasis-on-dark);
  font-size: var(--t-body);
  line-height: var(--lh-snug);
}

/* The phone's section menu (the context menu's light dropdown, includes/
   context-menu.php) marks the page you are on as the sidebar menu does: the
   current row in the current-page colour, semi-bold, on the selected tint
   with a bar. Its own stylesheet greys a sub-page row to 62%, which left the
   current one at about 3:1. The label's own wash goes, so the row carries
   one tint. On a site with the frame, so a theme that dresses the menu
   itself keeps its look. */
:root .cw-frame .cw-context-menu--light .cw-context-menu-item.is-current > .cw-context-menu-link {
  box-shadow: inset 3px 0 0 var(--border-selected);
  background: var(--surface-selected);
  font-weight: var(--fw-semi);
  color: var(--fg-nav-current);
}

/* The other sub-page rows take the secondary text colour instead of the
   62% grey, which read at about 3.6:1 at their small size. */
:root .cw-frame .cw-context-menu--light .cw-context-menu-sublist .cw-context-menu-item:not(.is-current) > .cw-context-menu-link:not(:hover, :focus-visible) {
  color: var(--fg-secondary);
}

/* A sub-page row has no padding before its text, so the bar and tint start
   a step to the left and the text stays in line with its neighbours. */
:root .cw-frame .cw-context-menu--light .cw-context-menu-sublist .cw-context-menu-item.is-current > .cw-context-menu-link {
  margin-inline-start: calc(-1 * var(--space-3));
  padding-inline-start: var(--space-3);
}

:root .cw-frame .cw-context-menu--light .cw-context-menu-item.is-current > .cw-context-menu-link .cw-context-menu-label {
  padding-inline: 0;
  background: none;
  font-weight: inherit;
  color: inherit;
}

/* stylelint-enable selector-class-pattern */
/* ==========================================================================
   Author box — who wrote the page, at its foot.
   ==========================================================================

   One block, six styles, all drawn from the same profile. The byline is the
   default and the shortest. Each style lays itself out on the box's own
   width, so the same rules serve the content column, the editor and a phone.
   ========================================================================== */
:root:root .c-author {
  container: c-author/inline-size;
  margin-block: var(--space-9) 0;
  color: var(--fg-strong);
}
:root:root {
  /* A theme's content rules space and bullet these; the box sets its own. */
}
:root:root :where(.c-author) :is(p, ul, dl, dd) {
  margin: 0;
}
:root:root :where(.c-author) ul {
  padding: 0;
  list-style: none;
}
:root:root :where(.c-author) a {
  color: inherit;
  text-decoration: none;
}
:root:root :where(.c-author) a:focus-visible {
  outline: 0.1875rem solid var(--fg-eyebrow);
  outline-offset: 0.125rem;
}
:root:root .c-author__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
:root:root {
  /* Sizes follow the spacing scale rather than rem, which some themes enlarge. */
}
:root:root .c-author__photo {
  display: block;
  flex: none;
  inline-size: calc(var(--space-8) * 4);
  block-size: auto;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: var(--surface-marker, var(--surface-sunken));
  -o-object-fit: cover;
     object-fit: cover;
}
:root:root .c-author__label {
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-semi);
  line-height: var(--lh-normal);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-eyebrow);
}
:root:root .c-author__name {
  font-size: var(--t-card-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}
:root:root .c-author__name a:hover {
  color: var(--fg-link);
}
:root:root .c-author__role {
  margin-block-start: var(--space-1);
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  color: var(--fg-medium);
}
:root:root .c-author__bio {
  margin-block-start: var(--space-4);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-strong);
  text-wrap: pretty;
}
:root:root .c-author__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin-block-start: var(--space-4);
}
:root:root .c-author__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
:root:root .c-author__social-link {
  display: block;
  inline-size: var(--space-5);
  block-size: var(--space-5);
  background-color: currentcolor;
  color: var(--border-selected);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
:root:root .c-author__social-link:hover {
  color: var(--fg-strong);
}
:root:root .c-author__social-link--linkedin {
  -webkit-mask-image: url("../icons/linkedin.svg");
          mask-image: url("../icons/linkedin.svg");
}
:root:root .c-author__social-link--x {
  -webkit-mask-image: url("../icons/x.svg");
          mask-image: url("../icons/x.svg");
}
:root:root .c-author__social-link--facebook {
  -webkit-mask-image: url("../icons/facebook.svg");
          mask-image: url("../icons/facebook.svg");
}
:root:root .c-author__social-link--threads {
  -webkit-mask-image: url("../icons/threads.svg");
          mask-image: url("../icons/threads.svg");
}
:root:root {
  /* The link to the profile: a button in three styles, a text link in two. */
}
:root:root .c-author__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--t-small);
  font-weight: var(--fw-semi);
  line-height: var(--lh-normal);
  white-space: nowrap;
  transition: filter 160ms cubic-bezier(0.2, 0.8, 0.2, 1), background 160ms cubic-bezier(0.2, 0.8, 0.2, 1), color 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
:root:root :is(.c-author--compact, .c-author--card, .c-author--panel) .c-author__more {
  padding: var(--space-2) var(--space-4);
  border: calc(var(--hairline) * 1.5) solid;
  border-radius: var(--radius-sm);
}
:root:root :is(.c-author--compact, .c-author--panel) .c-author__more:hover {
  filter: brightness(1.08);
}
:root:root :is(.c-author--ledger, .c-author--inverse) .c-author__more {
  margin-block-start: var(--space-4);
  border-block-end: var(--hairline) solid transparent;
  font-size: var(--t-body);
  color: var(--fg-link);
}
:root:root :is(.c-author--ledger, .c-author--inverse) .c-author__more:hover {
  border-block-end-color: currentcolor;
}
:root:root {
  /* Byline: one ruled line under the content, with no photo. */
}
:root:root .c-author--byline {
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-3);
  border-block-start: var(--card-border-width) solid var(--border-card);
}
:root:root .c-author__byline {
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  color: var(--fg-medium);
}
:root:root .c-author__byname {
  font-weight: var(--fw-semi);
  color: var(--fg-strong);
}
:root:root .c-author__byname a:hover {
  color: var(--fg-link);
}
:root:root .c-author__byrole::before {
  margin-inline: var(--space-2);
  content: "·";
}
:root:root {
  /* Compact: the photo beside a ruled column. The shortest with a photo. */
}
:root:root :is(.c-author--compact, .c-author--ledger) {
  padding-block-start: var(--space-7);
  border-block-start: var(--card-border-width) solid var(--border-card);
}
:root:root .c-author--compact .c-author__body {
  padding-inline-start: var(--space-6);
  border-inline-start: 2px solid var(--border-selected);
}
:root:root .c-author--compact .c-author__more {
  border-color: var(--surface-accent);
  background: var(--surface-accent);
  color: var(--fg-on-accent);
}
:root:root {
  /* Card: everything on one sunken plate, kept small, with the
     link to the profile at its top right. */
}
:root:root .c-author--card .c-author__inner {
  gap: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}
:root:root .c-author--panel .c-author__photo {
  inline-size: calc(var(--space-9) * 2);
}
:root:root :is(.c-author--card, .c-author--ledger, .c-author--inverse) .c-author__photo {
  inline-size: calc(var(--space-8) * 2);
  border-radius: var(--radius-pill);
}
:root:root .c-author__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
}
:root:root .c-author__who {
  flex: 1 1 auto;
  min-inline-size: 0;
}
:root:root .c-author--card .c-author__bio {
  margin-block-start: var(--space-3);
  font-size: var(--t-small);
}
:root:root .c-author--card .c-author__social {
  gap: var(--space-4);
  margin-block-start: var(--space-3);
}
:root:root .c-author--card .c-author__more {
  flex: none;
  padding: var(--space-1) var(--space-3);
  border-color: var(--fg-strong);
  background: var(--surface-page);
  font-size: var(--t-eyebrow);
  color: var(--fg-strong);
}
:root:root .c-author--card .c-author__more:hover {
  background: var(--fg-strong);
  color: var(--surface-page);
}
:root:root {
  /* Ledger: a ruled top, the bio in the middle and the facts as a list. */
}
:root:root .c-author--ledger {
  border-block-start: calc(var(--hairline) * 1.5) solid var(--fg-strong);
}
:root:root :is(.c-author--ledger, .c-author--inverse) .c-author__name {
  margin-block-start: var(--space-2);
  font-weight: var(--fw-semi);
  letter-spacing: -0.01em;
}
:root:root :is(.c-author--ledger, .c-author--inverse) .c-author__bio {
  margin-block-start: var(--space-2);
}
:root:root .c-author__facts > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-block-end: var(--card-border-width) solid var(--border-card);
  font-size: var(--t-small);
  line-height: var(--lh-normal);
}
:root:root .c-author__facts > div:last-child {
  border-block-end: 0;
}
:root:root .c-author__facts dt {
  flex: none;
  font-weight: var(--fw-regular);
  color: var(--fg-medium);
}
:root:root .c-author__facts dd {
  font-weight: var(--fw-semi);
  color: var(--fg-strong);
  text-align: end;
}
:root:root .c-author__facts .c-author__social {
  justify-content: flex-end;
}
:root:root .c-author--ledger .c-author__facts .c-author__social {
  gap: var(--space-4);
}
:root:root {
  /* Dark: the ledger on the inverse ground, under an accent rule. */
}
:root:root .c-author--inverse .c-author__inner {
  padding: var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--surface-inverse);
  color: var(--fg-on-dark);
}
:root:root .c-author--inverse .c-author__inner::before {
  content: "";
  border-block-start: calc(var(--hairline) * 1.5) solid var(--border-accent);
}
:root:root .c-author--inverse :is(.c-author__name, .c-author__bio, .c-author__facts dd) {
  color: var(--fg-on-dark);
}
:root:root .c-author--inverse :is(.c-author__label, .c-author__facts dt, .c-author__social-link) {
  color: var(--fg-on-dark-soft);
}
:root:root .c-author--inverse .c-author__facts > div {
  border-block-end-color: var(--border-on-dark);
}
:root:root .c-author--inverse .c-author__more {
  color: var(--fg-emphasis-on-dark);
}
:root:root .c-author--inverse :is(.c-author__name a, .c-author__social-link):hover {
  color: var(--fg-emphasis-on-dark);
}
:root:root .c-author--inverse a:focus-visible {
  outline-color: var(--fg-emphasis-on-dark);
}
:root:root {
  /* Panel: who they are on a tinted plate, what they write beside it. */
}
:root:root .c-author--panel .c-author__inner {
  gap: 0;
  overflow: hidden;
  border: var(--card-border-width) solid var(--border-card);
  border-radius: var(--radius-md);
}
:root:root .c-author__id {
  padding: var(--space-7) var(--space-6);
  background: var(--surface-marker, var(--surface-sunken));
}
:root:root .c-author--panel .c-author__name {
  margin-block-start: var(--space-4);
}
:root:root .c-author__id .c-author__social {
  margin-block-start: var(--space-4);
}
:root:root .c-author--panel .c-author__body {
  padding: var(--space-7);
}
:root:root .c-author--panel .c-author__bio {
  margin-block-start: var(--space-2);
}
:root:root .c-author__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-7);
  margin-block-start: var(--space-5);
}
:root:root {
  /* The figure reads above its name, as in the design; the list keeps dt first. */
}
:root:root .c-author__stats > div {
  display: flex;
  flex-direction: column-reverse;
}
:root:root .c-author__stats dt {
  font-size: var(--t-small);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-medium);
}
:root:root .c-author__stats dd {
  font-size: var(--t-lead);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}
:root:root .c-author--panel .c-author__more {
  margin-block-start: var(--space-4);
  border-color: var(--action-primary-bg);
  background: var(--action-primary-bg);
  color: var(--action-primary-fg);
}
:root:root {
  /* Side by side once the box is wide enough; stacked below that. In px,
     because some themes scale the root font size with the viewport. */
}
@container c-author (min-width: 576px) {
  :root:root :is(.c-author--compact, .c-author--card) .c-author__inner {
    flex-direction: row;
    align-items: flex-start;
  }
  :root:root :is(.c-author--compact, .c-author--card) .c-author__body {
    flex: 1 1 0;
    min-inline-size: 0;
  }
  :root:root .c-author--card .c-author__inner {
    gap: var(--space-6);
    padding: var(--space-6);
  }
  :root:root .c-author--inverse .c-author__inner {
    padding: var(--space-8);
  }
}
@container c-author (min-width: 640px) {
  :root:root .c-author--panel .c-author__inner {
    flex-direction: row;
  }
  :root:root .c-author__id {
    flex: 8 1 0;
  }
  :root:root .c-author--panel .c-author__body {
    flex: 11 1 0;
    min-inline-size: 0;
  }
}
@container c-author (min-width: 768px) {
  :root:root .c-author--ledger .c-author__inner {
    flex-direction: row;
    align-items: flex-start;
  }
  :root:root .c-author--ledger .c-author__body {
    flex: 1.2 1 0;
    min-inline-size: 0;
  }
  :root:root .c-author--ledger .c-author__facts {
    flex: 1 1 0;
    min-inline-size: 0;
  }
}
:root:root {
  /* The dark card's padding takes width from its columns, so it waits longer. */
}
@container c-author (min-width: 864px) {
  :root:root .c-author--inverse .c-author__inner {
    flex-flow: row wrap;
    align-items: flex-start;
  }
  :root:root .c-author--inverse .c-author__inner::before {
    flex-basis: 100%;
  }
  :root:root .c-author--inverse .c-author__body {
    flex: 1.2 1 0;
    min-inline-size: 0;
  }
  :root:root .c-author--inverse .c-author__facts {
    flex: 1 1 0;
    min-inline-size: 0;
  }
}

/* ==========================================================================
   Links on inverted grounds.
   ==========================================================================

   The site link colour can match an inverted ground. :where() keeps these at
   zero specificity so a component's own colours still win.
   ========================================================================== */
:where(.c-ground--inverse, .c-ground--accent) a:not(.c-btn, .wp-block-button__link, .c-link-inline, .c-breadcrumb a) {
  color: var(--fg-link);
}

:where(.c-ground--inverse, .c-ground--accent) a:not(.c-btn, .wp-block-button__link, .c-link-inline, .c-breadcrumb a):hover {
  color: var(--fg-on-dark);
}

:where(.c-ground--inverse, .c-ground--accent) .c-link-inline {
  color: var(--fg-on-dark);
}

/* ==========================================================================
   rows-faq --marked and --filled
   ==========================================================================

   The panel's own look, ruled rows, is in panels/_article.scss. These two
   modifiers keep its markup (one core Details block per question, so a
   question opens by keyboard and without a script) and change how the
   questions are drawn:

   --marked   each question numbered in its own outlined box, with a plus at
              the end that turns to a cross when the answer opens. The
              numbers are a counter, so they follow the order and are never
              typed;
   --filled   each question on a bar of the sunken surface, apart from the
              next, with its answer under the bar.
   ========================================================================== */
:root:root {
  /* Full width, or on a ground, the questions keep off the band's edges,
     as stack-prose's text does. */
}
:root:root .c-rows-faq:is(.alignfull, [class*=c-ground--]) {
  padding-inline: var(--gutter);
}
:root:root {
  /* Space between the questions takes the place of the rules. */
}
:root:root :is(.c-rows-faq--marked, .c-rows-faq--filled) .c-rows-faq__list {
  border-block-start: 0;
}
:root:root :is(.c-rows-faq--marked, .c-rows-faq--filled) .c-rows-faq__item {
  border-block-end: 0;
}
:root:root :is(.c-rows-faq--marked, .c-rows-faq--filled) .c-rows-faq__item > :not(summary):last-child {
  margin-block-end: 0;
  padding-block-end: 0;
}
:root:root {
  /* --marked */
}
:root:root .c-rows-faq--marked .c-rows-faq__list {
  counter-reset: rows-faq;
}
:root:root .c-rows-faq--marked .c-rows-faq__item {
  counter-increment: rows-faq;
  padding: var(--space-5) var(--space-7);
  border: var(--hairline) solid var(--border-faint);
  background: var(--surface-page);
}
:root:root .c-rows-faq--marked .c-rows-faq__item + .c-rows-faq__item {
  margin-block-start: var(--space-6);
}
:root:root {
  /* The number sits in the line, so a long question wraps under it, as
     running text does. The plus stands apart at the end of the line,
     centred on the question. */
}
:root:root .c-rows-faq--marked .c-rows-faq__item > summary {
  display: block;
  position: relative;
  margin-block-end: var(--space-3);
  padding-block: var(--space-2);
  padding-inline-end: var(--space-7);
  font-weight: var(--fw-semi);
  line-height: var(--lh-normal);
}
:root:root {
  /* In the editor the question is typed into a div; inline, it follows the
     number as it does on the page. */
}
:root:root .c-rows-faq--marked .c-rows-faq__item > summary > div {
  display: inline;
}
:root:root {
  /* Inline, so its padding draws the disc without making the line taller. */
}
:root:root .c-rows-faq--marked .c-rows-faq__item > summary::before {
  content: counter(rows-faq, decimal-leading-zero);
  margin-inline-end: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--fg-eyebrow);
  font-size: var(--t-body);
}
:root:root .c-rows-faq--marked .c-rows-faq__item > summary::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--space-2);
  inline-size: var(--space-4);
  block-size: var(--space-4);
  background: var(--fg-strong);
  -webkit-mask: var(--mask-plus) center/contain no-repeat;
          mask: var(--mask-plus) center/contain no-repeat;
  transform: translateY(-50%);
}
:root:root .c-rows-faq--marked .c-rows-faq__item[open] > summary::after {
  transform: translateY(-50%) rotate(45deg);
}
:root:root .c-rows-faq--marked .c-rows-faq__item > :not(summary) {
  margin-inline: var(--space-7);
}
:root:root {
  /* --filled */
}
:root:root .c-rows-faq--filled .c-rows-faq__item + .c-rows-faq__item {
  margin-block-start: var(--space-4);
}
:root:root .c-rows-faq--filled .c-rows-faq__item > summary {
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  line-height: var(--lh-normal);
}
:root:root .c-rows-faq--filled .c-rows-faq__item > summary::after {
  inline-size: var(--space-6);
  block-size: var(--space-6);
  background: currentcolor;
}
:root:root .c-rows-faq--filled .c-rows-faq__item > :not(summary) {
  margin-inline: var(--space-5);
}
:root:root .c-rows-faq--filled .c-rows-faq__item > summary + * {
  margin-block-start: var(--space-5);
}
:root:root .c-rows-faq--filled .c-rows-faq__item > :not(summary):last-child {
  margin-block-end: var(--space-5);
}
:root:root {
  /* A box round the head and the questions: a group inside the panel with
     c-rows-faq__ground and a ground class (c-ground--page for a white one),
     as rows-quotes has. */
}
:root:root .c-rows-faq__ground {
  padding: var(--space-7) var(--space-6);
  border: var(--hairline) solid var(--border-card);
  border-radius: var(--radius-md);
}
@media (min-width: 48em) {
  :root:root .c-rows-faq__ground {
    padding: var(--space-8);
  }
}
:root:root {
  /* On a light ground of its own the bars take the page's colour, so they
     still stand out from it. */
}
:root:root .c-rows-faq--filled:is(.c-ground--sunken, .c-ground--raised, .c-ground--tint) .c-rows-faq__item > summary {
  background: var(--surface-page);
}
:root:root {
  /* On a dark ground the boxes keep the ground's colour, and the bars and
     the number discs take a wash of its rule colour, so the text the ground
     sets stays readable. */
}
:root:root .c-rows-faq--marked:is(.c-ground--inverse, .c-ground--accent, .c-ground--hub) .c-rows-faq__item {
  background: transparent;
}
:root:root .c-rows-faq--marked:is(.c-ground--inverse, .c-ground--accent, .c-ground--hub) .c-rows-faq__item > summary::before,
:root:root .c-rows-faq--filled:is(.c-ground--inverse, .c-ground--accent, .c-ground--hub) .c-rows-faq__item > summary {
  background: var(--border-faint);
}

/* ==========================================================================
   rows-stories: a client's story, led by who told it.
   ==========================================================================

   The panel's own look, stories in rows with labelled columns, is in
   panels/_hub.scss. A story can instead be led by a byline
   (c-rows-stories__byline, a Group): the teller's photo
   (c-rows-stories__photo, an Image), a Group (c-rows-stories__who) of their
   name (c-rows-stories__name), role (c-rows-stories__role) and website (a
   paragraph holding the link, c-rows-stories__site), and the client's logo
   at the end of the row (c-rows-stories__logo, an Image). A rule under the
   byline ends it. A story told by two people has a byline each, the logo in
   the first and the rule under the second.

   After the byline, each part optional: a label (c-rows-stories__label)
   over the places the story was covered (c-rows-stories__media), the story
   in their words (c-body), a result line (c-rows-stories__rating, a label
   with five stars after it) and the results (c-rows-stories__facts, a List,
   each result after a tick). The stars are a flourish drawn after the
   label, not a score: the words carry the result.

   On a phone the byline stacks, the logo last. From 48em it is one row: the
   photo, who they are, and the logo at the far end.
   ========================================================================== */
:root:root .c-rows-stories__byline {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4) var(--space-6);
  padding-block-end: var(--space-6);
  margin-block-end: var(--space-6);
  border-block-end: var(--hairline) solid var(--border-faint);
}
:root:root {
  /* The first of two bylines: the rule goes under the second. */
}
:root:root .c-rows-stories__byline:has(+ .c-rows-stories__byline) {
  padding-block-end: 0;
  border-block-end: 0;
}
:root:root :is(.c-rows-stories__byline, .c-rows-stories__byline > .wp-block-group__inner-container, .c-rows-stories__who, .c-rows-stories__who > .wp-block-group__inner-container) > * {
  margin: 0;
}
:root:root .c-rows-stories__photo img {
  display: block;
  inline-size: var(--space-12);
  block-size: auto;
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  -o-object-fit: cover;
     object-fit: cover;
}
:root:root .c-rows-stories__logo img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}
:root:root .c-rows-stories__byline .c-rows-stories__name {
  font-size: var(--t-card-title);
  line-height: var(--lh-snug);
}
:root:root :is(.c-rows-stories__role, .c-rows-stories__site) {
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  color: var(--fg-medium);
  text-wrap: pretty;
}
:root:root .c-rows-stories__site a {
  color: var(--fg-link);
}
:root:root {
  /* The places the story was covered, under their label. */
}
:root:root .c-rows-stories__media {
  margin: 0 0 var(--space-5);
  font-size: var(--t-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  color: var(--fg-eyebrow);
  text-wrap: pretty;
}
:root:root {
  /* The result line: its label, then the five stars. */
}
:root:root .c-rows-stories__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-6) 0 var(--space-4);
}
:root:root .c-rows-stories__rating::after {
  inline-size: 5.8em;
  block-size: 1em;
  background: var(--fg-strong);
  content: "";
  -webkit-mask: var(--mask-star) 0 50%/1.2em 1em repeat-x;
          mask: var(--mask-star) 0 50%/1.2em 1em repeat-x;
}
:root:root {
  /* The results, each after a tick cut from the strong colour. */
}
:root:root .c-rows-stories__facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
:root:root .c-rows-stories__facts li {
  position: relative;
  min-block-size: var(--space-6);
  margin: 0;
  padding-inline-start: calc(var(--space-6) + var(--space-3));
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-medium);
  text-wrap: pretty;
}
:root:root .c-rows-stories__facts li::before {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: var(--space-6);
  block-size: var(--space-6);
  translate: 0 -50%;
  background: var(--fg-strong);
  content: "";
  -webkit-mask: var(--mask-check) center/contain no-repeat;
          mask: var(--mask-check) center/contain no-repeat;
}
@media (min-width: 48em) {
  :root:root .c-rows-stories__byline {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  :root:root .c-rows-stories__logo {
    justify-self: end;
  }
}

/* ==========================================================================
   cards-people: team cards, each a photo, a name and a role, with an email
   link and a bio that opens.
   ==========================================================================

   A card (c-cards-people__card) is a Group of core blocks: the photo
   (Image), the name (Heading), the role (Paragraph), the email link (a
   Paragraph holding one mailto link) and the bio (Details: its summary names
   it, and under it a heading and a paragraph or two). The photo runs across
   the top of the card. Under it the name and role, and beside them two
   marks, one under the other: the email link and the bio's summary, drawn as
   icons with their words kept for screen readers.

   The bio is a Details block so it works with no script: it opens in place,
   across the card, by keyboard too. assets/js/cards-people.js, loaded with
   the first bio on a page (includes/panels/cards-people.php), turns each
   summary into a button that opens the bio in a modal dialog. In the editor
   every bio shows under its card, so each can be read and edited.

   One card across on a phone, two from 48em, three from 64em. --3 sets
   three from 48em.
   ========================================================================== */
:root:root .c-cards-people {
  padding-block: var(--space-9);
}
:root:root .c-cards-people .c-head {
  margin-block-end: var(--space-8);
}
:root:root .c-cards-people__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
}
:root:root {
  /* The card: the photo across the top, then the name and the role in the
     first column and the two marks in the second, both from the row under
     the photo. The last row takes what is left, so the marks never push the
     role down, and a card made taller by its row keeps its space at the
     foot. */
}
:root:root .c-cards-people__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto 1fr;
  -moz-column-gap: var(--space-4);
       column-gap: var(--space-4);
  padding: 0 var(--space-5) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--fg-medium);
}
:root:root {
  /* A card without a photo keeps its text off the top edge. */
}
:root:root .c-cards-people__card:not(:has(.c-cards-people__photo)) {
  padding-block-start: var(--space-5);
}
:root:root :is(.c-cards-people__card, .c-cards-people__card > .wp-block-group__inner-container) > :not(dialog) {
  grid-column: 1;
  margin: 0;
}
:root:root :is(.c-cards-people__card, .c-cards-people__card > .wp-block-group__inner-container) > .c-cards-people__photo {
  grid-column: 1/-1;
  grid-row: 1;
  margin-inline: calc(-1 * var(--space-5));
  margin-block-end: var(--space-5);
}
:root:root .c-cards-people__photo img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
:root:root .c-cards-people__name {
  grid-row: 2;
  font-size: var(--t-card-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  text-wrap: pretty;
}
:root:root .c-cards-people__role {
  grid-row: 3;
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  color: var(--fg-medium);
  text-wrap: pretty;
}
:root:root {
  /* The two marks: the email link, and under it the bio's summary (a
     button once the script has run). Each spans the rows under the photo
     and sits at their top; the second is moved down by the first. */
}
:root:root :is(.c-cards-people__card, .c-cards-people__card > .wp-block-group__inner-container) > :is(.c-cards-people__email, .c-cards-people__bio, .c-cards-people__open) {
  grid-column: 2;
  grid-row: 2/-1;
  place-self: start center;
}
:root:root :is(.c-cards-people__card, .c-cards-people__card > .wp-block-group__inner-container) > .c-cards-people__email ~ :is(.c-cards-people__bio, .c-cards-people__open) {
  margin-block-start: calc(var(--space-7) + var(--space-2));
}
:root:root {
  /* Each mark is its words, moved out of a box the icon's size, with the
     icon drawn over the box. The link or button keeps its outline: a mask
     on the box itself would cut the focus ring off. */
}
:root:root :is(.c-cards-people__email a, .c-cards-people__bio > summary, .c-cards-people__open) {
  position: relative;
  display: block;
  inline-size: var(--space-7);
  block-size: var(--space-7);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: hidden;
  color: transparent;
  white-space: nowrap;
  text-indent: 100%;
  cursor: pointer;
}
:root:root :is(.c-cards-people__email a, .c-cards-people__bio > summary, .c-cards-people__open)::before {
  position: absolute;
  inset: 0;
  background: var(--fg-link);
  content: "";
  -webkit-mask: var(--mask-mail) center/contain no-repeat;
          mask: var(--mask-mail) center/contain no-repeat;
}
:root:root :is(.c-cards-people__bio > summary, .c-cards-people__open)::before {
  -webkit-mask-image: var(--mask-info);
          mask-image: var(--mask-info);
}
:root:root :is(.c-cards-people__email a, .c-cards-people__bio > summary, .c-cards-people__open):hover::before {
  background: var(--fg-link-hover);
}
:root:root :is(.c-cards-people__email a, .c-cards-people__bio > summary, .c-cards-people__open):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
:root:root .c-cards-people__bio > summary {
  list-style: none;
}
:root:root .c-cards-people__bio > summary::-webkit-details-marker {
  display: none;
}
:root:root {
  /* With no script the bio opens in place: across the card under the name
     and role, its mark at the end of the row. */
}
:root:root :is(.c-cards-people__card, .c-cards-people__card > .wp-block-group__inner-container) > .c-cards-people__bio[open] {
  grid-column: 1/-1;
  grid-row: auto;
  justify-self: stretch;
  margin-block-start: var(--space-4);
}
:root:root .c-cards-people__bio[open] > summary {
  margin-inline-start: auto;
  margin-block-end: var(--space-3);
}
:root:root {
  /* The bio's own type, open in place or in its dialog. */
}
:root:root :is(.c-cards-people__bio, .c-cards-people__sheet) > :is(h2, h3, h4, h5, h6) {
  margin: 0 0 var(--space-3);
  font-size: var(--t-card-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  text-wrap: pretty;
}
:root:root :is(.c-cards-people__bio, .c-cards-people__sheet) > p {
  margin: 0;
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-medium);
  text-wrap: pretty;
}
:root:root :is(.c-cards-people__bio, .c-cards-people__sheet) > p + p {
  margin-block-start: var(--space-4);
}
:root:root {
  /* The dialog: the bio on the page's ground over a dimmed page, as wide as
     a line of reading, and scrolling inside itself when it is taller than
     the screen. Its content fills it, so a click that lands on the dialog
     itself is a click outside the bio. */
}
:root:root .c-cards-people__dialog {
  inline-size: min(100% - 2 * var(--space-5), var(--measure-prose));
  max-inline-size: none;
  max-block-size: calc(100% - 2 * var(--space-5));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-page);
  box-shadow: var(--shadow-card-lg);
  color: var(--fg-medium);
}
:root:root .c-cards-people__dialog::backdrop {
  background: color-mix(in srgb, var(--surface-inverse) 60%, transparent);
}
:root:root .c-cards-people__sheet {
  position: relative;
  padding: var(--space-7);
}
:root:root .c-cards-people__close {
  position: absolute;
  inset-block-start: var(--space-1);
  inset-inline-end: var(--space-1);
  inline-size: var(--space-6);
  block-size: var(--space-6);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: hidden;
  color: transparent;
  white-space: nowrap;
  text-indent: 100%;
  cursor: pointer;
}
:root:root .c-cards-people__close::before {
  position: absolute;
  inset: 0;
  background: var(--fg-medium);
  content: "";
  -webkit-mask: var(--mask-close) center/contain no-repeat;
          mask: var(--mask-close) center/contain no-repeat;
}
:root:root .c-cards-people__close:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
:root:root {
  /* The page stays where it is behind an open bio. */
}
:root:root:has(.c-cards-people__dialog[open]) {
  overflow: hidden;
  scrollbar-gutter: stable;
}
:root:root {
  /* In forced colours a mask fills with the system's colours, which would
     leave the marks invisible on its ground. */
}
@media (forced-colors: active) {
  :root:root :is(.c-cards-people__email a, .c-cards-people__bio > summary, .c-cards-people__open, .c-cards-people__close)::before {
    background: ButtonText;
    forced-color-adjust: none;
  }
}
@media (min-width: 48em) {
  :root:root .c-cards-people {
    padding-block: var(--space-10);
  }
  :root:root .c-cards-people__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :root:root .c-cards-people--3 .c-cards-people__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 64em) {
  :root:root .c-cards-people {
    padding-block: var(--space-11);
  }
  :root:root .c-cards-people__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
:root:root {
  /* In the editor each part is a block to edit: the card is one column, the
     email link and the bio's summary show their words, and every bio shows,
     open or not. */
}
:root:root .editor-styles-wrapper .c-cards-people .c-cards-people__card {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  align-content: start;
}
:root:root :is(.editor-styles-wrapper .c-cards-people .c-cards-people__card, .editor-styles-wrapper .c-cards-people .c-cards-people__card > .wp-block-group__inner-container) > :is(.c-cards-people__email, .c-cards-people__bio) {
  grid-column: 1;
  grid-row: auto;
  justify-self: stretch;
  margin-block-start: var(--space-3);
}
:root:root .editor-styles-wrapper .c-cards-people :is(.c-cards-people__email a, .c-cards-people__bio > summary) {
  display: block;
  inline-size: auto;
  block-size: auto;
  overflow: visible;
  color: var(--fg-link);
  white-space: normal;
  text-indent: 0;
}
:root:root .editor-styles-wrapper .c-cards-people :is(.c-cards-people__email a, .c-cards-people__bio > summary)::before {
  display: none;
}
:root:root .editor-styles-wrapper .c-cards-people .c-cards-people__bio > summary {
  margin: 0 0 var(--space-3);
  font-weight: var(--fw-bold);
}
:root:root .editor-styles-wrapper .c-cards-people .c-cards-people__bio::details-content {
  content-visibility: visible;
}

/* ==========================================================================
   Group wrappers on classic themes.
   ==========================================================================

   A classic theme wraps a Group's children in .wp-block-group__inner-container,
   so a grid built from a Group has one child. display: contents makes the real
   children the grid items.
   ========================================================================== */
:where(.c-strip-facts__grid, .c-cards-cases__grid, .c-inset-facts__grid, .c-cards-guides__grid, .c-cards-hubs__grid, .c-split-prose__grid, .c-split-figure__grid, .c-split-sidebar__grid, .c-split-sidebar__aside, .c-split-sidebar__note-head, .c-band-promo__grid, .c-split-cta__box, .c-band-cta__grid, .c-rows-stories__cols, .c-split-cases__grid, .c-split-cases__case, .c-inset-figure__frame, .c-sidebar-stack, .c-card, .c-card__band, .c-band-promo__card, .c-band-promo__copy, .c-split-cta__half, .c-head--split, .c-strip-facts__cell, .c-grid-facts__list, .c-grid-facts__item, .c-cards-plans__grid, .c-plan, .c-plan__head, .c-plan__about, .c-plan__cost, .c-inset-cta__box, .c-inset-cta__card, .c-inset-cta__copy, .c-strip-links__groups, .c-strip-logos__row, .c-inset-video__grid, .c-inset-quotes__grid, .c-inset-quotes__slides, .c-cards-people__grid, .c-cards-people__card, .c-rows-stories__byline, .c-card__copy, .c-stack-prose__head, .c-stack-prose__cols, .c-grid-facts__grid, .c-grid-facts__copy, .c-grid-facts__col, .c-strip-cta, .c-split-media, .c-card__body, .c-split-steps, .c-split-steps__media, .c-rows-profile, .c-strip-logos__list, .c-rows-downloads__item, .c-split-contact) > .wp-block-group__inner-container {
  display: contents;
}

/* ==========================================================================
   The three widths.
   ==========================================================================

   Mobile first: the base has no query, then 48em and 64em.
   ========================================================================== */
@media (min-width: 48em) {
  :root:root .c-strip-facts,
  :root:root .c-cards-cases,
  :root:root .c-rows-quotes,
  :root:root .c-rows-stories,
  :root:root .c-inset-facts,
  :root:root .c-grid-facts,
  :root:root .c-cards-guides,
  :root:root .c-cards-hubs,
  :root:root .c-split-prose,
  :root:root .c-band-promo,
  :root:root .c-split-cta,
  :root:root .c-band-cta,
  :root:root .c-strip-facts--inverse,
  :root:root .c-inset-figure,
  :root:root .c-split-cases,
  :root:root .c-rows-facts,
  :root:root .c-rows-faq {
    padding-block: var(--space-10);
  }
  :root:root .c-stack-prose,
  :root:root .c-inset-quotes {
    padding-block: var(--space-8);
  }
  :root:root .c-strip-facts--inverse .c-strip-facts__ground {
    padding: var(--space-8);
  }
  :root:root .c-btn {
    width: auto;
  }
  :root:root .c-rows-quotes__ground,
  :root:root .c-inset-facts__ground {
    padding: var(--space-8);
  }
}
@media (min-width: 64em) {
  :root:root .c-strip-facts,
  :root:root .c-cards-cases,
  :root:root .c-rows-quotes,
  :root:root .c-rows-stories,
  :root:root .c-inset-facts,
  :root:root .c-grid-facts,
  :root:root .c-cards-guides,
  :root:root .c-cards-hubs,
  :root:root .c-split-prose,
  :root:root .c-band-promo,
  :root:root .c-split-cta,
  :root:root .c-band-cta,
  :root:root .c-strip-facts--inverse,
  :root:root .c-inset-figure,
  :root:root .c-split-cases,
  :root:root .c-rows-facts,
  :root:root .c-rows-faq {
    padding-block: var(--space-11);
  }
  :root:root {
    /* The stats strip is a pause between bands, so it is shallower; the
       closing band ends the page, so it leaves more room under it. */
  }
  :root:root .c-strip-facts--divided {
    padding-block: calc(var(--space-10) + var(--space-2));
  }
  :root:root .c-split-cta {
    padding-block-end: var(--space-12);
  }
  :root:root .c-stack-prose,
  :root:root .c-inset-quotes {
    padding-block: var(--space-9);
  }
  :root:root .c-inset-quotes__q {
    font-size: var(--t-section);
  }
}/*# sourceMappingURL=main.css.map */