/* =========================================================================
   PulseCore Risk v2 — components ("summit" look)
   Consumes tokens from tokens.css, which stays the only file in the theme
   with literal colours.

   Everything is namespaced `v2-` so that pages whose body view has not been
   themed yet (they fall back to the original view) keep their own styling.

   Visual language: petrol night sections alternating with cool off-white,
   one electric cyan accent, bold Outfit headings, square-cornered actions,
   and an angled double-chevron motif drawn from the PulseCore mark.

   CYAN RULES. Cyan is a very light colour, so:
   - text and icons ON a cyan fill use --v2-on-accent, never white;
   - cyan is a text colour on DARK surfaces only. On light surfaces text, links
     and icons use --v2-accent-text;
   - plain --v2-accent on a light surface is for decorative rules only, which
     carry no information of their own.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Base
   ------------------------------------------------------------------------- */

/* The sticky header must not cover the target of an in-page link. */
html {
  scroll-padding-top: calc(var(--v2-header-h) + var(--v2-sp-4));
}

.v2-body {
  font-family: var(--v2-font-sans);
  font-size: var(--v2-fs-base);
  line-height: var(--v2-lh-normal);
  color: var(--v2-text);
  background: var(--v2-surface-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The header view wraps the skip link, header and drawer in one short
   .v2-scope block. A sticky element cannot leave its parent, so the header
   would scroll away with that block after one screen. Removing the wrapper's
   box makes <body> the header's containing block; its descendants still match
   every .v2-scope and .v2-on-dark rule. Two rules because a browser without
   :has() must not discard the first one. */
.v2-body > .v2-scope:first-child {
  display: contents;
}

.v2-body > .v2-scope:has(> .v2-header) {
  display: contents;
}

/* Safety net only: an unruly CMS embed must not widen a 360px screen. `clip`
   creates no scroll container, so sticky children keep working. */
.v2-main {
  overflow-x: clip;
}

/* On the home page the hero runs underneath the sticky header. */
.v2-body--hero .v2-main {
  margin-top: calc(-1 * var(--v2-header-h));
}

/* The target of the skip link is not a control and needs no ring. */
.v2-body .v2-main:focus,
.v2-body .v2-main:focus-visible {
  outline: none;
}

.v2-scope,
.v2-scope * {
  box-sizing: border-box;
}

/* `:where()` keeps these element resets at low specificity so every component
   rule below can override them. The page head renders outside .v2-scope (see
   v2_page_head()), so it needs the same resets. */
:is(.v2-scope, .v2-pagehead) :where(img, svg) {
  max-width: 100%;
  height: auto;
  display: block;
}

:is(.v2-scope, .v2-pagehead) :where(p) {
  font-size: inherit;
  margin: 0;
}

:is(.v2-scope, .v2-pagehead) :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  color: inherit;
  font-family: var(--v2-font-display);
  font-weight: var(--v2-fw-semibold);
  line-height: var(--v2-lh-snug);
  letter-spacing: var(--v2-ls-tight);
  overflow-wrap: break-word;
}

:is(.v2-scope, .v2-pagehead) :where(h1, h2) {
  font-weight: var(--v2-fw-bold);
}

:is(.v2-scope, .v2-pagehead) :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(.v2-scope, .v2-pagehead) :where(a) {
  color: inherit;
  text-decoration: none;
}

/* Bootstrap's `a:hover` would otherwise turn any link without its own hover
   colour blue and underlined. `:where()` keeps this below every component
   :hover rule, and the stylesheet order puts it after Bootstrap's. */
:where(.v2-body) a:hover {
  color: inherit;
  text-decoration: none;
}

/* Route link transitions through the motion tokens, so the reduced-motion
   collapse in tokens.css reaches links too. */
.v2-scope a {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform, filter;
  transition-duration: var(--v2-dur-2);
  transition-timing-function: var(--v2-ease);
}

.v2-scope :where(hr) {
  border: 0;
  border-top: 1px solid var(--v2-line);
  margin: 0;
}

.v2-scope :where(figure, blockquote, dl, dd) {
  margin: 0;
}

/* Long unbroken strings (URLs, org names) must never widen the page. */
.v2-scope :where(p, li, dd, dt, address, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

.v2-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visible focus on every interactive element: ink on light, cyan on dark.
   Anchored on .v2-body rather than .v2-scope so the page head, which sits
   outside the scope wrapper, gets the same ring. */
.v2-body :focus-visible {
  outline: var(--v2-focus-width) solid var(--v2-focus);
  outline-offset: var(--v2-focus-offset);
}

:is(.v2-on-dark, .v2-section--dark, .v2-hero, .v2-pagehead, .v2-stats, .v2-newsletter,
    .v2-finalcta, .v2-footer, .v2-header, .v2-drawer, .v2-speaker, .v2-quick__item,
    .v2-phototile, .v2-form) :focus-visible,
:is(.v2-quick__item, .v2-phototile):focus-visible {
  outline-color: var(--v2-focus-on-dark);
}

/* Light surfaces that can sit inside a dark context. */
:is(.v2-dialog, .v2-formcard) :focus-visible {
  outline-color: var(--v2-focus);
}

.v2-skip {
  position: absolute;
  left: var(--v2-sp-4);
  top: var(--v2-sp-2);
  z-index: var(--v2-z-skiplink);
  transform: translateY(-200%);
  background: var(--v2-accent);
  color: var(--v2-on-accent);
  padding: var(--v2-sp-3) var(--v2-sp-5);
  font-size: var(--v2-fs-sm);
  font-weight: var(--v2-fw-semibold);
  transition: transform var(--v2-dur-2) var(--v2-ease);
}

.v2-skip:hover {
  color: var(--v2-on-accent);
}

.v2-skip:focus {
  transform: translateY(0);
}

/* -------------------------------------------------------------------------
   2. Layout primitives
   ------------------------------------------------------------------------- */

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

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

.v2-section--tight {
  padding-block: var(--v2-section-y-tight);
}

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

.v2-section--pale {
  background: var(--v2-grad-pale);
}

.v2-section--dark {
  background: var(--v2-grad-night);
  color: var(--v2-text-invert);
}

/* The double chevron from the PulseCore mark, as a large low-opacity outline
   behind a dark section. */
.v2-motif {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.v2-motif::after {
  content: "";
  position: absolute;
  top: -10%;
  right: -6%;
  width: min(60vw, 720px);
  aspect-ratio: 4 / 3;
  background: url('../../img/v2/motif-chevrons.svg') center / contain no-repeat;
  opacity: var(--v2-motif-opacity);
  pointer-events: none;
  z-index: -1;
}

.v2-motif--low::after {
  top: auto;
  right: auto;
  bottom: -14%;
  left: -6%;
}

.v2-section-head {
  margin-bottom: var(--v2-sp-9);
}

.v2-section-head--center {
  margin-inline: auto;
  text-align: center;
}

.v2-eyebrow {
  font-size: var(--v2-fs-2xs);
  font-weight: var(--v2-fw-bold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-accent-text);
  margin-bottom: var(--v2-sp-4);
}

.v2-section--dark .v2-eyebrow,
.v2-on-dark .v2-eyebrow {
  color: var(--v2-accent);
}

.v2-section-title {
  font-size: var(--v2-fs-4xl);
  font-weight: var(--v2-fw-bold);
  line-height: var(--v2-lh-tight);
  letter-spacing: var(--v2-ls-tight);
  max-width: 24ch;
  text-wrap: balance;
}

.v2-section-head--center .v2-section-title {
  margin-inline: auto;
}

.v2-section-title--sm {
  font-size: var(--v2-fs-2xl);
}

.v2-subheading {
  font-size: var(--v2-fs-2xs);
  font-weight: var(--v2-fw-bold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-text-muted);
}

.v2-section-lead {
  margin-top: var(--v2-sp-5);
  max-width: 64ch;
  font-size: var(--v2-fs-lg);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-muted);
}

.v2-section-head--center .v2-section-lead {
  margin-inline: auto;
}

.v2-section--dark .v2-section-lead,
.v2-on-dark .v2-section-lead {
  color: var(--v2-text-invert-muted);
}

.v2-section-foot {
  margin-top: var(--v2-sp-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-sp-4);
  align-items: center;
}

.v2-section-foot--center {
  justify-content: center;
}

/* -------------------------------------------------------------------------
   3. Buttons
   Primary: solid square cyan with a round ink arrow badge. The badge is a
   pseudo-element, so it needs no markup and an <input> simply goes without.
   ------------------------------------------------------------------------- */

.v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v2-sp-3);
  min-height: var(--v2-btn-h);
  max-width: 100%;
  padding: var(--v2-sp-2) var(--v2-sp-3) var(--v2-sp-2) var(--v2-sp-6);
  border: 1px solid transparent;
  border-radius: var(--v2-r-sm);
  background: var(--v2-accent);
  color: var(--v2-on-accent);
  font-family: inherit;
  font-size: var(--v2-fs-base);
  font-weight: var(--v2-fw-semibold);
  line-height: var(--v2-lh-snug);
  cursor: pointer;
  text-align: center;
  transition: background-color var(--v2-dur-2) var(--v2-ease),
              border-color var(--v2-dur-2) var(--v2-ease),
              color var(--v2-dur-2) var(--v2-ease);
}

.v2-btn::after {
  content: "";
  flex: none;
  width: var(--v2-badge);
  height: var(--v2-badge);
  border-radius: var(--v2-r-pill);
  background: var(--v2-ink-900) var(--v2-icon-arrow) center / 12px 12px no-repeat;
  transition: transform var(--v2-dur-2) var(--v2-ease);
}

.v2-btn:hover::after {
  transform: translate(2px, -2px);
}

input.v2-btn {
  padding-inline: var(--v2-sp-6);
}

.v2-btn:hover {
  background: var(--v2-accent-hover);
  color: var(--v2-on-accent);
}

.v2-btn:active {
  background: var(--v2-accent-active);
  color: var(--v2-on-accent);
}

.v2-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.v2-btn--secondary,
.v2-btn--ghost-light,
.v2-btn--sm {
  padding-inline: var(--v2-sp-6);
}

.v2-btn--secondary::after,
.v2-btn--ghost-light::after,
.v2-btn--sm::after {
  content: none;
}

.v2-btn--secondary {
  background: transparent;
  color: var(--v2-text);
  border-color: var(--v2-text);
}

.v2-btn--secondary:hover {
  background: var(--v2-ink-900);
  color: var(--v2-text-invert);
  border-color: var(--v2-ink-900);
}

.v2-btn--secondary:active {
  background: var(--v2-ink-800);
  color: var(--v2-text-invert);
}

.v2-btn--ghost-light {
  background: transparent;
  color: var(--v2-text-invert);
  border-color: var(--v2-text-invert);
}

.v2-btn--ghost-light:hover {
  background: var(--v2-text-invert);
  color: var(--v2-ink-900);
  border-color: var(--v2-text-invert);
}

.v2-btn--ghost-light:active {
  background: var(--v2-surface-4);
  color: var(--v2-ink-900);
}

/* A secondary button dropped into a dark section must stay readable. */
.v2-section--dark .v2-btn--secondary,
.v2-on-dark .v2-btn--secondary {
  color: var(--v2-text-invert);
  border-color: var(--v2-text-invert);
}

.v2-section--dark .v2-btn--secondary:hover,
.v2-on-dark .v2-btn--secondary:hover {
  background: var(--v2-text-invert);
  color: var(--v2-ink-900);
  border-color: var(--v2-text-invert);
}

.v2-btn--sm {
  min-height: var(--v2-tap);
  padding: var(--v2-sp-2) var(--v2-sp-5);
  font-size: var(--v2-fs-sm);
}

.v2-btn--block {
  width: 100%;
}

/* Quiet text link */
.v2-link {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-sp-2);
  min-height: var(--v2-tap);
  font-size: var(--v2-fs-base);
  font-weight: var(--v2-fw-semibold);
  color: var(--v2-accent-text);
  border-bottom: 1px solid var(--v2-accent-text);
  transition: color var(--v2-dur-2) var(--v2-ease),
              border-color var(--v2-dur-2) var(--v2-ease);
}

.v2-link:hover {
  color: var(--v2-text);
  border-bottom-color: var(--v2-text);
}

.v2-on-dark .v2-link,
.v2-section--dark .v2-link {
  color: var(--v2-text-invert);
  border-bottom-color: var(--v2-line-on-dark-2);
}

.v2-on-dark .v2-link:hover,
.v2-section--dark .v2-link:hover {
  color: var(--v2-accent);
  border-bottom-color: var(--v2-accent);
}

/* -------------------------------------------------------------------------
   4. Header + primary navigation
   Solid by default, so it stays readable without JS. theme.js sets
   data-v2-top="true" only while the page is at the top of the home hero.
   ------------------------------------------------------------------------- */

.v2-header {
  position: sticky;
  top: 0;
  z-index: var(--v2-z-header);
  background: var(--v2-ink-900);
  color: var(--v2-text-invert);
  box-shadow: var(--v2-sh-header);
  transition: background-color var(--v2-dur-3) var(--v2-ease),
              box-shadow var(--v2-dur-3) var(--v2-ease);
}

.v2-header[data-v2-top="true"] {
  background: var(--v2-grad-header);
  box-shadow: none;
}

.v2-header__inner {
  display: flex;
  align-items: center;
  gap: var(--v2-sp-4);
  min-height: var(--v2-header-h);
}

.v2-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: var(--v2-tap);
}

/* The CMS logo has a white ground; round it so it reads as a deliberate plate. */
.v2-brand__img {
  height: var(--v2-logo-h-mobile);
  width: auto;
  /* The cap only guards against an unexpectedly wide CMS logo. */
  max-width: 200px;
  object-fit: contain;
  border-radius: var(--v2-r-md);
}

/* The desktop bar is hidden until there is provably room for every item. */
.v2-nav {
  display: none;
}

.v2-header__cta {
  display: none;
}

/* Hamburger */
.v2-navtoggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v2-sp-2);
  min-width: var(--v2-tap);
  min-height: var(--v2-tap);
  padding-inline: var(--v2-sp-3);
  background: transparent;
  border: 1px solid var(--v2-line-on-dark-2);
  border-radius: var(--v2-r-sm);
  color: var(--v2-text-invert);
  font-family: inherit;
  font-size: var(--v2-fs-xs);
  font-weight: var(--v2-fw-semibold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--v2-dur-2) var(--v2-ease);
}

.v2-navtoggle:hover {
  background: var(--v2-tint-4);
}

.v2-navtoggle__bars {
  display: inline-block;
  position: relative;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.v2-navtoggle__bars::before,
.v2-navtoggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.v2-navtoggle__bars::before { top: -6px; }
.v2-navtoggle__bars::after  { top: 6px; }

/* ---- Mobile drawer ---- */

.v2-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: var(--v2-overlay-flat);
  z-index: var(--v2-z-drawer);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--v2-dur-2) var(--v2-ease), visibility var(--v2-dur-2);
}

.v2-drawer-backdrop[data-open="true"] {
  opacity: 1;
  visibility: visible;
}

.v2-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(92vw, 380px);
  max-width: 100%;
  background: var(--v2-grad-panel);
  color: var(--v2-text-invert);
  z-index: calc(var(--v2-z-drawer) + 1);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--v2-dur-3) var(--v2-ease-out), visibility var(--v2-dur-3);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.v2-drawer[data-open="true"] {
  transform: translateX(0);
  visibility: visible;
}

.v2-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v2-sp-4);
  padding: var(--v2-sp-4) var(--v2-sp-5);
  border-bottom: 1px solid var(--v2-line-on-dark);
}

.v2-drawer__title {
  font-size: var(--v2-fs-2xs);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-text-invert-muted);
  font-weight: var(--v2-fw-semibold);
}

.v2-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--v2-tap);
  min-height: var(--v2-tap);
  background: transparent;
  border: 1px solid var(--v2-line-on-dark-2);
  border-radius: var(--v2-r-sm);
  color: var(--v2-text-invert);
  font-size: var(--v2-fs-lg);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--v2-dur-2) var(--v2-ease);
}

.v2-drawer__close:hover {
  background: var(--v2-tint-5);
}

.v2-drawer__body {
  padding: var(--v2-sp-3) var(--v2-sp-5) var(--v2-sp-9);
}

.v2-drawer__list > li + li {
  border-top: 1px solid var(--v2-line-on-dark);
}

.v2-drawer__link,
.v2-drawer__disclosure {
  display: flex;
  align-items: center;
  min-height: var(--v2-tap);
  padding-block: var(--v2-sp-3);
  color: var(--v2-text-invert);
  font-size: var(--v2-fs-sm);
  font-weight: var(--v2-fw-semibold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  transition: color var(--v2-dur-2) var(--v2-ease);
}

.v2-drawer__link:hover,
.v2-drawer__link[aria-current="page"],
.v2-drawer__disclosure:hover,
.v2-drawer__disclosure[data-v2-current="true"] {
  color: var(--v2-accent);
}

.v2-drawer__disclosure {
  justify-content: space-between;
  gap: var(--v2-sp-3);
  width: 100%;
  background: transparent;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.v2-caret {
  flex: none;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform var(--v2-dur-2) var(--v2-ease);
}

[aria-expanded="true"] > .v2-caret {
  transform: rotate(180deg);
}

.v2-drawer__sub {
  padding: 0 0 var(--v2-sp-3) var(--v2-sp-4);
  border-left: 1px solid var(--v2-accent-line);
  margin-left: var(--v2-sp-1);
}

.v2-drawer__sub[hidden] {
  display: none;
}

.v2-drawer__sublink {
  display: flex;
  align-items: center;
  min-height: var(--v2-tap);
  font-size: var(--v2-fs-base);
  color: var(--v2-text-invert-muted);
  transition: color var(--v2-dur-2) var(--v2-ease);
}

.v2-drawer__sublink:hover {
  color: var(--v2-accent);
}

.v2-drawer__cta {
  margin-top: var(--v2-sp-6);
  display: grid;
  gap: var(--v2-sp-3);
}

.v2-drawer__meta {
  margin-top: var(--v2-sp-6);
  padding-top: var(--v2-sp-5);
  border-top: 1px solid var(--v2-line-on-dark);
  font-size: var(--v2-fs-xs);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-invert-muted);
}

/* ---- Desktop navigation ----
   Enabled only from 1100px, so the bar cannot overflow at laptop widths.
   theme.js closes the drawer at the same breakpoint. */
@media (min-width: 1100px) {

  .v2-navtoggle {
    display: none;
  }

  .v2-brand__img {
    height: var(--v2-logo-h);
    max-width: 220px;
  }

  .v2-nav {
    display: block;
    margin-left: auto;
    min-width: 0;
  }

  .v2-nav__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--v2-sp-1);
  }

  .v2-nav__item {
    position: relative;
    flex: none;
  }

  .v2-nav__link,
  .v2-nav__disclosure {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    min-height: var(--v2-tap);
    padding-inline: var(--v2-sp-2);
    background: transparent;
    border: 0;
    color: var(--v2-text-invert);
    font-family: inherit;
    font-size: var(--v2-fs-xs);
    font-weight: var(--v2-fw-semibold);
    letter-spacing: var(--v2-ls-caps);
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--v2-dur-2) var(--v2-ease);
  }

  .v2-nav__link:hover,
  .v2-nav__disclosure:hover,
  .v2-nav__disclosure[aria-expanded="true"],
  .v2-nav__disclosure[data-v2-current="true"],
  .v2-nav__link[aria-current="page"] {
    color: var(--v2-accent);
  }

  .v2-nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    padding: var(--v2-sp-2);
    background: var(--v2-ink-850);
    border: 1px solid var(--v2-line-on-dark);
    border-top: 2px solid var(--v2-accent);
    box-shadow: var(--v2-sh-3);
  }

  .v2-nav__menu[hidden] {
    display: none;
  }

  .v2-nav__menulink {
    display: flex;
    align-items: center;
    min-height: var(--v2-tap);
    padding-inline: var(--v2-sp-3);
    font-size: var(--v2-fs-sm);
    color: var(--v2-text-invert-muted);
    white-space: nowrap;
    transition: background-color var(--v2-dur-2) var(--v2-ease),
                color var(--v2-dur-2) var(--v2-ease);
  }

  .v2-nav__menulink:hover {
    background: var(--v2-tint-3);
    color: var(--v2-accent);
  }
}

@media (min-width: 1280px) {
  .v2-header__cta {
    display: inline-flex;
    flex: none;
  }

  .v2-nav {
    margin-inline: auto;
  }
}

/* -------------------------------------------------------------------------
   5. Hero — full-bleed photo, dark overlay, centred copy
   ------------------------------------------------------------------------- */

.v2-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(100vh, 54rem);
  background: var(--v2-grad-panel);
  color: var(--v2-text-invert);
  overflow: hidden;
  isolation: isolate;
}

.v2-hero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.v2-hero::before,
.v2-finalcta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--v2-overlay-hero);
  z-index: -1;
}

/* Angled translucent planes that cut into the edges of the photo. */
.v2-hero__shape {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.v2-hero__shape--a {
  top: 0;
  left: 0;
  width: 26%;
  height: 76%;
  background: var(--v2-shape-cyan);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.v2-hero__shape--b {
  right: 0;
  bottom: 0;
  width: 32%;
  height: 58%;
  background: var(--v2-shape-petrol);
  clip-path: polygon(52% 0, 100% 0, 100% 100%, 0 100%);
}

.v2-hero__shape--c {
  top: 20%;
  right: 3%;
  width: 16%;
  height: 26%;
  background: var(--v2-shape-light);
  clip-path: polygon(0 0, 62% 0, 100% 100%, 38% 100%);
}

.v2-hero__inner {
  display: grid;
  justify-items: center;
  gap: var(--v2-sp-8);
  padding-block: calc(var(--v2-header-h) + var(--v2-sp-9)) var(--v2-sp-11);
  text-align: center;
}

.v2-hero__body {
  max-width: 68rem;
  min-width: 0;
}

/* The header already shows the logo; a second copy in the hero is noise. */
.v2-hero__logo {
  display: none;
  height: var(--v2-logo-h);
  width: auto;
  max-width: min(100%, 220px);
  margin: 0 auto var(--v2-sp-7);
  object-fit: contain;
  border-radius: var(--v2-r-md);
}

.v2-hero__title {
  font-size: var(--v2-fs-display);
  font-weight: var(--v2-fw-extrabold);
  line-height: var(--v2-lh-tight);
  letter-spacing: var(--v2-ls-tight);
  overflow-wrap: break-word;
  text-wrap: balance;
}

.v2-hero__line {
  display: block;
}

.v2-hero__date {
  margin-top: var(--v2-sp-6);
  font-size: var(--v2-fs-2xl);
  font-weight: var(--v2-fw-bold);
  line-height: var(--v2-lh-snug);
  color: var(--v2-accent);
}

.v2-hero__venue {
  margin-top: var(--v2-sp-2);
  font-size: var(--v2-fs-xl);
  font-weight: var(--v2-fw-medium);
  color: var(--v2-text-invert);
}

.v2-hero__actions {
  margin-top: var(--v2-sp-8);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--v2-sp-3);
}

.v2-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-sp-2);
  padding: var(--v2-sp-2) var(--v2-sp-3);
  border: 1px solid var(--v2-line-on-dark-2);
  font-size: var(--v2-fs-xs);
  color: var(--v2-text-invert);
  background: var(--v2-tint-2);
  max-width: 100%;
}

/* ---- Countdown ---- */

.v2-countdown {
  width: min(100%, 34rem);
  min-width: 0;
  padding: var(--v2-sp-5);
  background: var(--v2-overlay-flat);
  border-top: 2px solid var(--v2-accent);
  color: var(--v2-text-invert);
}

.v2-countdown[hidden] {
  display: none;
}

.v2-countdown__label {
  font-size: var(--v2-fs-2xs);
  font-weight: var(--v2-fw-bold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-accent);
  margin-bottom: var(--v2-sp-4);
}

.v2-countdown__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.v2-countdown__unit {
  padding-inline: var(--v2-sp-2);
  border-left: 1px solid var(--v2-line-on-dark);
  min-width: 0;
}

.v2-countdown__unit:first-child {
  border-left: 0;
}

.v2-countdown__unit[hidden] {
  display: none;
}

.v2-countdown__num {
  display: block;
  font-size: var(--v2-fs-3xl);
  font-weight: var(--v2-fw-bold);
  line-height: var(--v2-lh-tight);
  font-variant-numeric: tabular-nums;
  color: var(--v2-text-invert);
}

.v2-countdown__name {
  display: block;
  margin-top: var(--v2-sp-1);
  font-size: var(--v2-fs-xs);
  color: var(--v2-text-invert-muted);
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
   6. Key numbers — big figures on a dark gradient panel. They come from real
   data and any that is zero is omitted, so the count of items varies.
   ------------------------------------------------------------------------- */

.v2-stats {
  padding-block: var(--v2-section-y);
  background: var(--v2-grad-panel);
  color: var(--v2-text-invert);
}

.v2-stats__layout {
  display: grid;
  gap: var(--v2-sp-8);
  align-items: center;
}

@media (min-width: 992px) {
  .v2-stats__layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
    gap: var(--v2-sp-11);
  }
}

.v2-stats__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--v2-sp-8) var(--v2-sp-7);
}

.v2-stats__item {
  padding-bottom: var(--v2-sp-5);
  border-bottom: 2px solid var(--v2-accent);
  min-width: 0;
}

.v2-stats__num {
  display: block;
  font-size: var(--v2-fs-numeric);
  font-weight: var(--v2-fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--v2-lh-tight);
  letter-spacing: var(--v2-ls-tight);
  color: var(--v2-text-invert);
}

.v2-stats__plus {
  color: var(--v2-accent);
}

.v2-stats__label {
  display: block;
  margin-top: var(--v2-sp-2);
  font-size: var(--v2-fs-lg);
  line-height: var(--v2-lh-normal);
  color: var(--v2-text-invert);
  overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------
   7. Programme tiles — the CMS quick links as dark tiles
   ------------------------------------------------------------------------- */

.v2-quick__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: var(--v2-grid-gap);
}

.v2-quick__item {
  display: flex;
  align-items: center;
  gap: var(--v2-sp-4);
  height: 100%;
  min-height: var(--v2-tap);
  padding: var(--v2-sp-6);
  background: var(--v2-grad-panel);
  color: var(--v2-text-invert);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--v2-sp-5)), calc(100% - var(--v2-sp-5)) 100%, 0 100%);
  transition: transform var(--v2-dur-2) var(--v2-ease);
}

.v2-quick__item:hover {
  color: var(--v2-accent);
  transform: translateY(var(--v2-lift));
}

/* clip-path would cut a normal ring off: draw it inside the tile. */
.v2-body .v2-quick__item:focus-visible {
  outline-offset: calc(-1 * var(--v2-focus-width) - var(--v2-focus-offset));
}

/* CMS icons are dark line art, so each gets a small light plate. */
.v2-quick__icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: var(--v2-sp-1);
  flex: none;
  object-fit: contain;
  background: var(--v2-surface);
  border-radius: var(--v2-r-md);
}

.v2-quick__text {
  min-width: 0;
}

.v2-quick__name {
  display: block;
  font-size: var(--v2-fs-sm);
  font-weight: var(--v2-fw-bold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
}

.v2-quick__hint {
  display: block;
  margin-top: var(--v2-sp-1);
  font-size: var(--v2-fs-sm);
  color: var(--v2-text-invert-muted);
}

/* -------------------------------------------------------------------------
   8. Overview and running text
   ------------------------------------------------------------------------- */

.v2-overview {
  display: grid;
  gap: var(--v2-sp-9);
}

@media (min-width: 992px) {
  .v2-overview {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--v2-sp-11);
    align-items: center;
  }
}

.v2-prose {
  font-size: var(--v2-fs-md);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-muted);
}

.v2-prose > * + * {
  margin-top: var(--v2-sp-4);
}

.v2-on-dark .v2-prose,
.v2-section--dark .v2-prose {
  color: var(--v2-text-invert-muted);
}

/* CMS bodies. The scope reset strips colour and underline from every link, so
   these rules are what makes a link in running text look like one. The
   underline is the non-colour cue. */
.v2-prose a,
.v2-doc a {
  color: var(--v2-accent-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}

.v2-prose a:hover,
.v2-doc a:hover {
  color: var(--v2-text);
  text-decoration: underline;
}

.v2-on-dark .v2-prose a,
.v2-section--dark .v2-prose a {
  color: var(--v2-accent);
}

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

/* Stored markup can carry fixed widths: nothing in a CMS body may exceed its
   column on a 360px screen. */
.v2-prose img,
.v2-doc img {
  max-width: 100%;
  height: auto;
}

.v2-prose iframe,
.v2-doc iframe,
.v2-prose video,
.v2-doc video,
.v2-prose embed,
.v2-doc embed {
  max-width: 100%;
}

.v2-prose pre,
.v2-doc pre {
  max-width: 100%;
  overflow-x: auto;
}

/* Angled image edge, as on the summit reference. */
.v2-overview__media {
  position: relative;
  overflow: hidden;
  background: var(--v2-surface-3);
  clip-path: polygon(var(--v2-cut) 0, 100% 0, 100% 100%, 0 100%);
}

.v2-overview__img {
  width: 100%;
  aspect-ratio: var(--v2-ar-card);
  object-fit: cover;
}

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

/* -------------------------------------------------------------------------
   9. Speakers — dark card, teal portrait panel, cyan diagonal stripe
   ------------------------------------------------------------------------- */

.v2-speakers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--v2-grid-gap);
}

.v2-speaker {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: var(--v2-grad-panel);
  border: 1px solid var(--v2-line-on-dark);
  border-radius: var(--v2-r-lg);
  color: var(--v2-text-invert);
  transition: transform var(--v2-dur-2) var(--v2-ease),
              border-color var(--v2-dur-2) var(--v2-ease),
              box-shadow var(--v2-dur-2) var(--v2-ease);
}

.v2-speaker:hover {
  transform: translateY(var(--v2-lift));
  border-color: var(--v2-accent-line);
  box-shadow: var(--v2-sh-3);
}

.v2-speaker__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--v2-ink-700);
}

/* CMS portraits are opaque rectangles, so the stripe sits over the lower right
   corner, clear of the face, rather than behind the head. */
.v2-speaker__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--v2-stripe);
  pointer-events: none;
}

.v2-speaker__img {
  width: 100%;
  aspect-ratio: var(--v2-ar-speaker);
  object-fit: cover;
  object-position: top center;
}

.v2-speaker__body {
  padding: var(--v2-sp-4) var(--v2-sp-5) var(--v2-sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--v2-sp-1);
  flex: 1 1 auto;
  min-width: 0;
}

.v2-speaker__name {
  font-size: var(--v2-fs-lg);
  font-weight: var(--v2-fw-bold);
}

/* The card link is the primary target for this speaker, so it has to carry a
   full-size hit area rather than the height of one line of text. */
.v2-speaker__name a {
  display: flex;
  align-items: center;
  min-height: var(--v2-tap);
  color: var(--v2-text-invert);
  transition: color var(--v2-dur-2) var(--v2-ease);
}

.v2-speaker__name a:hover {
  color: var(--v2-accent);
}

/* Clamp long job titles so cards stay aligned; full text stays in title="" */
.v2-speaker__role {
  font-size: var(--v2-fs-sm);
  line-height: var(--v2-lh-normal);
  color: var(--v2-text-invert-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Horizontal rail ----
   A native scroll-snap row: it scrolls by touch, trackpad and arrow keys with
   no JS at all. theme.js only adds the prev/next buttons, and only when the
   row really overflows. */

.v2-rail__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--v2-sp-5);
  margin-bottom: var(--v2-sp-7);
}

.v2-rail__head .v2-section-head {
  margin-bottom: 0;
  min-width: 0;
}

.v2-rail__nav {
  display: flex;
  flex: none;
  gap: var(--v2-sp-2);
}

.v2-rail__nav[hidden] {
  display: none;
}

.v2-rail__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--v2-tap);
  height: var(--v2-tap);
  background: var(--v2-tint-3);
  border: 1px solid var(--v2-line-on-dark-2);
  border-radius: var(--v2-r-sm);
  color: var(--v2-text-invert);
  font-family: inherit;
  font-size: var(--v2-fs-lg);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--v2-dur-2) var(--v2-ease),
              color var(--v2-dur-2) var(--v2-ease);
}

.v2-rail__btn:hover {
  background: var(--v2-accent);
  border-color: var(--v2-accent);
  color: var(--v2-on-accent);
}

.v2-rail__btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}

.v2-rail__btn[aria-disabled="true"]:hover {
  background: var(--v2-tint-3);
  border-color: var(--v2-line-on-dark-2);
  color: var(--v2-text-invert);
}

.v2-rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 20rem);
  gap: var(--v2-grid-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  /* Room for the hover lift, which the scroll box would otherwise clip. */
  padding-block: var(--v2-sp-2) var(--v2-sp-4);
}

.v2-rail__item {
  min-width: 0;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .v2-rail__track {
    grid-auto-columns: calc((100% - 2 * var(--v2-grid-gap)) / 3);
  }
}

@media (min-width: 1100px) {
  .v2-rail__track {
    grid-auto-columns: calc((100% - 3 * var(--v2-grid-gap)) / 4);
  }
}

/* -------------------------------------------------------------------------
   10. Agenda — day tabs and session rows
   ------------------------------------------------------------------------- */

/* The selected bar is ink, not cyan: the state has to be readable on a light
   ground, and cyan on white is well under 3:1. */
.v2-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--v2-sp-7);
  margin-bottom: var(--v2-sp-7);
  border-bottom: 1px solid var(--v2-line-strong);
}

.v2-tab {
  display: inline-flex;
  flex-direction: column;
  gap: var(--v2-sp-1);
  min-height: var(--v2-tap);
  margin-bottom: -1px;
  padding: var(--v2-sp-3) 0;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--v2-text-muted);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--v2-dur-2) var(--v2-ease),
              color var(--v2-dur-2) var(--v2-ease);
}

.v2-tab:hover {
  border-bottom-color: var(--v2-line-strong);
  color: var(--v2-text);
}

.v2-tab[aria-selected="true"] {
  border-bottom-color: var(--v2-ink-900);
  color: var(--v2-text);
}

.v2-section--dark .v2-tabs,
.v2-on-dark .v2-tabs {
  border-bottom-color: var(--v2-line-on-dark-2);
}

.v2-section--dark .v2-tab,
.v2-on-dark .v2-tab {
  color: var(--v2-text-invert-muted);
}

.v2-section--dark .v2-tab:hover,
.v2-on-dark .v2-tab:hover {
  border-bottom-color: var(--v2-line-on-dark-2);
  color: var(--v2-text-invert);
}

.v2-section--dark .v2-tab[aria-selected="true"],
.v2-on-dark .v2-tab[aria-selected="true"] {
  border-bottom-color: var(--v2-accent);
  color: var(--v2-text-invert);
}

.v2-tab__name {
  font-size: var(--v2-fs-md);
  font-weight: var(--v2-fw-bold);
}

.v2-tab__date {
  font-size: var(--v2-fs-xs);
  color: inherit;
}

.v2-tabpanel[hidden] {
  display: none;
}

.v2-agenda {
  display: grid;
  border-bottom: 1px solid var(--v2-line);
}

.v2-session {
  display: grid;
  gap: var(--v2-sp-3);
  padding-block: var(--v2-sp-6);
  border-top: 1px solid var(--v2-line);
  min-width: 0;
}

@media (min-width: 768px) {
  .v2-session {
    grid-template-columns: 7.5rem minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--v2-sp-7);
  }
}

.v2-session__time {
  font-size: var(--v2-fs-lg);
  font-weight: var(--v2-fw-bold);
  line-height: var(--v2-lh-snug);
  font-variant-numeric: tabular-nums;
  color: var(--v2-accent-text);
}

.v2-session__main {
  min-width: 0;
}

.v2-session__title {
  font-size: var(--v2-fs-lg);
  font-weight: var(--v2-fw-bold);
}

.v2-session__speaker {
  margin-top: var(--v2-sp-3);
  display: flex;
  align-items: center;
  gap: var(--v2-sp-3);
  min-width: 0;
}

.v2-session__avatar {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--v2-r-pill);
  object-fit: cover;
  object-position: top center;
  background: var(--v2-surface-3);
}

.v2-session__who {
  min-width: 0;
  font-size: var(--v2-fs-xs);
  line-height: var(--v2-lh-normal);
}

.v2-session__who strong {
  display: block;
  font-weight: var(--v2-fw-semibold);
  color: var(--v2-text);
}

.v2-session__who span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--v2-text-muted);
}

.v2-session__summary {
  margin-top: var(--v2-sp-3);
  font-size: var(--v2-fs-base);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.v2-session__action {
  display: flex;
  align-items: center;
}

/* Rows with no speaker: breaks, lunches, opening and closing slots, panels
   without an assigned speaker. Quieter than a talk, still fully readable. */
.v2-session--plain {
  border-top-style: dashed;
}

.v2-session--plain .v2-session__time,
.v2-session--plain .v2-session__title {
  color: var(--v2-text-muted);
  font-weight: var(--v2-fw-medium);
}

/* The speaker name inside a session row is one line of small text, so the
   link itself would only be ~14px tall. Extend the hit area to a full 44px
   with a pseudo-element instead of padding, so the agenda keeps its compact
   rhythm on a 360px screen. Nothing it overlaps is interactive. */
.v2-session__speakerlink {
  position: relative;
  transition: color var(--v2-dur-2) var(--v2-ease);
}

.v2-session__speakerlink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--v2-tap);
  transform: translateY(-50%);
}

.v2-session__speakerlink:hover {
  color: var(--v2-accent-text);
}

.v2-daymeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--v2-sp-2) var(--v2-sp-5);
  margin-bottom: var(--v2-sp-5);
  font-size: var(--v2-fs-xs);
  letter-spacing: var(--v2-ls-wide);
  text-transform: uppercase;
  color: var(--v2-text-muted);
}

.v2-daymeta__day {
  font-weight: var(--v2-fw-bold);
  letter-spacing: var(--v2-ls-caps);
  color: var(--v2-text);
}

.v2-daymeta__item {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-sp-2);
}

.v2-daymeta__item::before {
  content: "";
  width: var(--v2-sp-1);
  height: var(--v2-sp-1);
  background: var(--v2-signal-text);
  flex: none;
}

.v2-dayblock + .v2-dayblock {
  margin-top: var(--v2-sp-10);
}

.v2-dayblock__title {
  margin-bottom: var(--v2-sp-4);
  font-size: var(--v2-fs-sm);
  font-weight: var(--v2-fw-bold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-text);
}

/* -------------------------------------------------------------------------
   11. Reasons to attend
   ------------------------------------------------------------------------- */

.v2-reasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--v2-grid-gap);
  counter-reset: v2reason;
}

.v2-reason {
  position: relative;
  padding: var(--v2-sp-7) var(--v2-sp-6);
  background: var(--v2-tint-3);
  border-top: 2px solid var(--v2-accent);
  min-width: 0;
}

.v2-reason::before {
  counter-increment: v2reason;
  content: counter(v2reason, decimal-leading-zero);
  display: block;
  margin-bottom: var(--v2-sp-4);
  font-size: var(--v2-fs-3xl);
  font-weight: var(--v2-fw-light);
  line-height: var(--v2-lh-tight);
  color: var(--v2-accent);
}

.v2-reason__text {
  font-size: var(--v2-fs-md);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-invert);
}

/* -------------------------------------------------------------------------
   12. Photo tiles — real gallery categories with their real photo counts
   ------------------------------------------------------------------------- */

.v2-phototiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--v2-grid-gap);
}

.v2-phototile {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: var(--v2-ar-tile);
  background: var(--v2-ink-800);
  color: var(--v2-text-invert);
}

.v2-phototile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--v2-overlay-tile);
  z-index: -1;
}

.v2-phototile__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--v2-dur-3) var(--v2-ease);
}

.v2-phototile:hover .v2-phototile__img {
  transform: scale(1.04);
}

.v2-phototile__text {
  position: absolute;
  left: var(--v2-sp-5);
  right: var(--v2-sp-5);
  bottom: var(--v2-sp-5);
}

.v2-phototile__num {
  display: block;
  font-size: var(--v2-fs-numeric);
  font-weight: var(--v2-fw-bold);
  line-height: var(--v2-lh-tight);
  color: var(--v2-accent);
}

.v2-phototile__label {
  display: block;
  margin-top: var(--v2-sp-1);
  font-size: var(--v2-fs-lg);
  font-weight: var(--v2-fw-medium);
  line-height: var(--v2-lh-snug);
  color: var(--v2-text-invert);
}

/* -------------------------------------------------------------------------
   13. Testimonials — pale and dark cards alternate
   ------------------------------------------------------------------------- */

.v2-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--v2-grid-gap);
}

.v2-quote {
  display: flex;
  flex-direction: column;
  gap: var(--v2-sp-5);
  min-width: 0;
  height: 100%;
  padding: var(--v2-sp-7);
  background: var(--v2-surface-cyan);
  color: var(--v2-text);
}

.v2-quotes > li:nth-child(even) .v2-quote {
  background: var(--v2-grad-panel);
  color: var(--v2-text-invert);
}

.v2-quote__mark {
  width: var(--v2-sp-10);
  height: 2px;
  background: var(--v2-ink-900);
  flex: none;
}

.v2-quotes > li:nth-child(even) .v2-quote__mark {
  background: var(--v2-accent);
}

.v2-quote__text {
  font-size: var(--v2-fs-lg);
  line-height: var(--v2-lh-relaxed);
  color: inherit;
  flex: 0 0 auto;
  margin-bottom: auto;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.v2-quote__cite {
  display: flex;
  align-items: center;
  gap: var(--v2-sp-3);
  font-style: normal;
  min-width: 0;
}

.v2-quote__avatar {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: var(--v2-r-pill);
  object-fit: cover;
  object-position: top center;
  background: var(--v2-surface-3);
}

.v2-quote__who {
  display: grid;
  min-width: 0;
}

.v2-quote__name {
  font-size: var(--v2-fs-base);
  font-weight: var(--v2-fw-bold);
  color: inherit;
}

.v2-quote__role {
  font-size: var(--v2-fs-xs);
  color: inherit;
}

/* -------------------------------------------------------------------------
   14. Ticket options
   ------------------------------------------------------------------------- */

.v2-passes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: var(--v2-grid-gap);
}

.v2-pass {
  display: flex;
  flex-direction: column;
  padding: var(--v2-sp-7) var(--v2-sp-6);
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-top: 3px solid var(--v2-accent);
  min-width: 0;
  height: 100%;
  transition: transform var(--v2-dur-2) var(--v2-ease),
              box-shadow var(--v2-dur-2) var(--v2-ease);
}

.v2-pass:hover {
  transform: translateY(var(--v2-lift));
  box-shadow: var(--v2-sh-3);
}

.v2-pass__name {
  font-size: var(--v2-fs-sm);
  font-weight: var(--v2-fw-bold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-text-muted);
}

.v2-pass__price {
  margin-top: var(--v2-sp-4);
  font-size: var(--v2-fs-4xl);
  font-weight: var(--v2-fw-bold);
  line-height: var(--v2-lh-tight);
  letter-spacing: var(--v2-ls-tight);
  color: var(--v2-text);
}

.v2-pass__list {
  margin-top: var(--v2-sp-5);
  padding-top: var(--v2-sp-5);
  border-top: 1px solid var(--v2-line);
  display: grid;
  align-content: start;
  gap: var(--v2-sp-3);
  flex: 1 1 auto;
}

.v2-pass__feature {
  display: flex;
  gap: var(--v2-sp-3);
  font-size: var(--v2-fs-base);
  line-height: var(--v2-lh-normal);
  color: var(--v2-text-muted);
  min-width: 0;
}

.v2-pass__tick {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15em;
  border-radius: var(--v2-r-pill);
  background: var(--v2-ink-900);
  color: var(--v2-accent);
  font-size: var(--v2-fs-2xs);
  line-height: 1.25rem;
  text-align: center;
  font-weight: var(--v2-fw-bold);
}

.v2-pass__feature--no {
  color: var(--v2-text-faint);
}

.v2-pass__tick--no {
  background: var(--v2-surface-3);
  color: var(--v2-text-faint);
}

.v2-pass__action {
  margin-top: var(--v2-sp-7);
}

/* -------------------------------------------------------------------------
   15. Sponsors — marquee on the home page, grid on the sponsors page
   ------------------------------------------------------------------------- */

.v2-marquee {
  display: flex;
  overflow: hidden;
  margin-block: var(--v2-sp-5);
}

.v2-marquee__group {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--v2-sp-10);
  min-width: 100%;
  padding-right: var(--v2-sp-10);
  animation: v2-marquee var(--v2-marquee-dur) linear infinite;
}

.v2-marquee:hover .v2-marquee__group,
.v2-marquee:focus-within .v2-marquee__group {
  animation-play-state: paused;
}

@keyframes v2-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.v2-marquee__item {
  flex: none;
}

.v2-marquee__logo {
  width: 170px;
  height: 96px;
  object-fit: contain;
}

.v2-sponsors__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  gap: var(--v2-sp-3);
}

.v2-sponsors__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--v2-sp-4);
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  min-width: 0;
  transition: border-color var(--v2-dur-2) var(--v2-ease);
}

.v2-sponsors__cell:hover {
  border-color: var(--v2-accent-text);
}

.v2-sponsors__logo {
  width: 100%;
  aspect-ratio: var(--v2-ar-media);
  object-fit: contain;
}

.v2-sponsors__cta {
  margin-top: var(--v2-sp-9);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--v2-sp-5);
  padding: var(--v2-sp-6) var(--v2-sp-7);
  background: var(--v2-surface-cyan);
}

.v2-sponsors__ctatext {
  min-width: 0;
  max-width: 60ch;
}

/* -------------------------------------------------------------------------
   16. Venue
   ------------------------------------------------------------------------- */

.v2-venue {
  display: grid;
  gap: var(--v2-sp-8);
  align-items: center;
}

@media (min-width: 992px) {
  .v2-venue {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--v2-sp-11);
  }
}

/* The venue image is often a flyer with text: cut one corner only. */
.v2-venue__media {
  overflow: hidden;
  background: var(--v2-ink-800);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--v2-sp-5)), calc(100% - var(--v2-sp-5)) 100%, 0 100%);
}

.v2-venue__img {
  width: 100%;
  aspect-ratio: var(--v2-ar-card);
  object-fit: contain;
}

.v2-venue__address {
  margin-top: var(--v2-sp-5);
  font-style: normal;
  font-size: var(--v2-fs-md);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-invert-muted);
}

.v2-venue__facts {
  margin-top: var(--v2-sp-6);
  display: grid;
  gap: var(--v2-sp-3);
}

.v2-venue__fact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-sp-1) var(--v2-sp-3);
  padding-top: var(--v2-sp-3);
  border-top: 1px solid var(--v2-line-on-dark);
  font-size: var(--v2-fs-base);
  color: var(--v2-text-invert-muted);
  min-width: 0;
}

.v2-venue__fact dt {
  flex: none;
  min-width: 7rem;
  color: var(--v2-text-invert);
  font-weight: var(--v2-fw-semibold);
}

.v2-venue__fact dd {
  flex: 1 1 12rem;
  margin: 0;
  min-width: 0;
}

/* -------------------------------------------------------------------------
   17. Articles
   ------------------------------------------------------------------------- */

.v2-articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--v2-grid-gap);
}

.v2-article {
  display: flex;
  flex-direction: column;
  background: var(--v2-surface);
  min-width: 0;
  height: 100%;
  transition: transform var(--v2-dur-2) var(--v2-ease),
              box-shadow var(--v2-dur-2) var(--v2-ease);
}

.v2-article:hover {
  transform: translateY(var(--v2-lift));
  box-shadow: var(--v2-sh-3);
}

.v2-article__img {
  width: 100%;
  aspect-ratio: var(--v2-ar-media);
  object-fit: cover;
  background: var(--v2-surface-3);
}

.v2-article__body {
  display: flex;
  flex-direction: column;
  gap: var(--v2-sp-3);
  padding: var(--v2-sp-5);
  flex: 1 1 auto;
  min-width: 0;
}

.v2-article__date {
  font-size: var(--v2-fs-2xs);
  font-weight: var(--v2-fw-bold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-accent-text);
}

.v2-article__title {
  font-size: var(--v2-fs-lg);
  font-weight: var(--v2-fw-bold);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.v2-article__title a {
  transition: color var(--v2-dur-2) var(--v2-ease);
}

.v2-article__title a:hover {
  color: var(--v2-accent-text);
}

.v2-article__excerpt {
  font-size: var(--v2-fs-base);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1 1 auto;
}

.v2-article__more {
  margin-top: auto;
  padding-top: var(--v2-sp-2);
}

/* -------------------------------------------------------------------------
   18. Newsletter
   ------------------------------------------------------------------------- */

.v2-newsletter {
  position: relative;
  background-color: var(--v2-ink-850);
  background-size: cover;
  background-position: center;
  color: var(--v2-text-invert);
  isolation: isolate;
}

.v2-newsletter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--v2-overlay-flat);
  z-index: -1;
}

.v2-newsletter__inner {
  display: grid;
  gap: var(--v2-sp-8);
  align-items: center;
}

@media (min-width: 992px) {
  .v2-newsletter__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: var(--v2-sp-11);
  }
}

.v2-form {
  display: grid;
  gap: var(--v2-sp-3);
  padding: var(--v2-sp-6);
  border-top: 2px solid var(--v2-accent);
  background: var(--v2-tint-3);
}

.v2-form__label {
  font-size: var(--v2-fs-2xs);
  font-weight: var(--v2-fw-bold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-text-invert-muted);
}

.v2-form__input {
  width: 100%;
  min-height: var(--v2-btn-h);
  padding: var(--v2-sp-3) var(--v2-sp-4);
  font-family: inherit;
  font-size: var(--v2-fs-md);
  color: var(--v2-text);
  background: var(--v2-surface);
  border: 1px solid var(--v2-line-strong);
  border-radius: var(--v2-r-sm);
}

.v2-form__input::placeholder {
  color: var(--v2-text-faint);
  opacity: 1;
}

.v2-form__submit {
  -webkit-appearance: none;
  appearance: none;
}

/* -------------------------------------------------------------------------
   19. Final CTA
   ------------------------------------------------------------------------- */

.v2-finalcta {
  position: relative;
  background-color: var(--v2-ink-900);
  background-size: cover;
  background-position: center;
  color: var(--v2-text-invert);
  isolation: isolate;
}

.v2-finalcta__inner {
  max-width: var(--v2-container-narrow);
  margin-inline: auto;
  text-align: center;
}

.v2-finalcta__title {
  font-size: var(--v2-fs-4xl);
  font-weight: var(--v2-fw-bold);
  line-height: var(--v2-lh-tight);
  overflow-wrap: break-word;
  text-wrap: balance;
}

.v2-finalcta__text {
  margin-top: var(--v2-sp-5);
  font-size: var(--v2-fs-lg);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-invert);
}

.v2-finalcta__actions {
  margin-top: var(--v2-sp-8);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--v2-sp-3);
}

/* -------------------------------------------------------------------------
   20. Footer
   ------------------------------------------------------------------------- */

.v2-footer {
  background: var(--v2-grad-footer);
  color: var(--v2-text-invert-muted);
  font-size: var(--v2-fs-base);
}

/* Logo, angled slashes and the organiser line. */
.v2-footer__band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--v2-sp-5) var(--v2-sp-8);
  padding-block: var(--v2-sp-9);
  border-bottom: 1px solid var(--v2-line-on-dark);
}

.v2-footer__logo {
  height: var(--v2-logo-h);
  width: auto;
  max-width: 220px;
  object-fit: contain;
  border-radius: var(--v2-r-md);
}

.v2-footer__slash {
  flex: none;
  width: 2px;
  height: var(--v2-sp-10);
  background: var(--v2-text-invert);
  transform: rotate(32deg);
}

.v2-footer__org {
  display: grid;
  gap: var(--v2-sp-1);
  min-width: 0;
  color: var(--v2-text-invert);
  font-weight: var(--v2-fw-semibold);
}

.v2-footer__orglabel {
  font-size: var(--v2-fs-xs);
  font-weight: var(--v2-fw-regular);
  color: var(--v2-text-invert-muted);
}

.v2-footer__top {
  padding-block: var(--v2-sp-9);
  display: grid;
  gap: var(--v2-sp-8);
}

@media (min-width: 768px) {
  .v2-footer__top {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  }
}

.v2-footer__col {
  min-width: 0;
}

.v2-footer__blurb {
  font-size: var(--v2-fs-base);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-invert-muted);
  max-width: 40ch;
}

.v2-footer__heading {
  font-size: var(--v2-fs-base);
  font-weight: var(--v2-fw-semibold);
  letter-spacing: var(--v2-ls-wide);
  text-transform: uppercase;
  color: var(--v2-text-invert);
  margin-bottom: var(--v2-sp-3);
}

.v2-footer__list {
  display: grid;
}

.v2-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--v2-tap);
  color: var(--v2-text-invert-muted);
  transition: color var(--v2-dur-2) var(--v2-ease);
}

.v2-footer__link:hover {
  color: var(--v2-accent);
}

.v2-footer__address {
  font-style: normal;
  line-height: var(--v2-lh-relaxed);
  margin-bottom: var(--v2-sp-2);
}

.v2-footer__address strong {
  display: block;
  color: var(--v2-text-invert);
  font-weight: var(--v2-fw-semibold);
  margin-bottom: var(--v2-sp-1);
}

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

.v2-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--v2-tap);
  height: var(--v2-tap);
  border: 1px solid var(--v2-accent-line);
  border-radius: var(--v2-r-sm);
  color: var(--v2-accent);
  transition: background-color var(--v2-dur-2) var(--v2-ease),
              border-color var(--v2-dur-2) var(--v2-ease),
              color var(--v2-dur-2) var(--v2-ease);
}

.v2-social__link:hover {
  background: var(--v2-accent);
  border-color: var(--v2-accent);
  color: var(--v2-on-accent);
}

/* Social links on a light surface */
.v2-social--onlight .v2-social__link {
  border-color: var(--v2-line-strong);
  color: var(--v2-text);
}

.v2-social--onlight .v2-social__link:hover {
  background: var(--v2-ink-900);
  border-color: var(--v2-ink-900);
  color: var(--v2-accent);
}

.v2-footer__bottom {
  border-top: 1px solid var(--v2-line-on-dark);
  padding-block: var(--v2-sp-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--v2-sp-3) var(--v2-sp-6);
  font-size: var(--v2-fs-xs);
  color: var(--v2-text-invert-muted);
}

.v2-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-sp-1) var(--v2-sp-5);
}

.v2-legal a {
  display: inline-flex;
  align-items: center;
  min-height: var(--v2-tap);
  color: var(--v2-text-invert-muted);
  transition: color var(--v2-dur-2) var(--v2-ease);
}

.v2-legal a:hover {
  color: var(--v2-accent);
}

.v2-totop {
  position: fixed;
  right: var(--v2-sp-4);
  bottom: var(--v2-sp-4);
  z-index: var(--v2-z-sticky);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--v2-tap);
  height: var(--v2-tap);
  background: var(--v2-ink-800);
  color: var(--v2-accent);
  border: 1px solid var(--v2-accent);
  border-radius: var(--v2-r-sm);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--v2-dur-2) var(--v2-ease),
              visibility var(--v2-dur-2),
              background-color var(--v2-dur-2) var(--v2-ease),
              color var(--v2-dur-2) var(--v2-ease);
}

.v2-totop[data-visible="true"] {
  opacity: 1;
  visibility: visible;
}

.v2-totop:hover {
  background: var(--v2-accent);
  border-color: var(--v2-accent);
  color: var(--v2-on-accent);
}

/* The button floats over light and dark sections alike, so the focus ring is
   two-tone: the ink band reads on a light section and the cyan outline reads
   on a dark one. */
.v2-body .v2-totop:focus-visible {
  outline-color: var(--v2-focus-on-dark);
  box-shadow: 0 0 0 var(--v2-focus-offset) var(--v2-ink-900);
}

/* -------------------------------------------------------------------------
   21. Dialog
   ------------------------------------------------------------------------- */

.v2-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--v2-z-dialog);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--v2-sp-4);
  background: var(--v2-overlay-flat);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--v2-dur-2) var(--v2-ease), visibility var(--v2-dur-2);
}

.v2-dialog-backdrop[data-open="true"] {
  opacity: 1;
  visibility: visible;
}

.v2-dialog {
  width: min(100%, 640px);
  max-height: min(86vh, 44rem);
  display: flex;
  flex-direction: column;
  background: var(--v2-surface);
  color: var(--v2-text);
  border-top: 3px solid var(--v2-accent);
  box-shadow: var(--v2-sh-3);
  overflow: hidden;
}

.v2-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--v2-sp-4);
  padding: var(--v2-sp-5) var(--v2-sp-6);
  border-bottom: 1px solid var(--v2-line);
}

.v2-dialog__title {
  font-size: var(--v2-fs-xl);
  font-weight: var(--v2-fw-bold);
  min-width: 0;
}

.v2-dialog__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--v2-tap);
  min-height: var(--v2-tap);
  background: transparent;
  border: 1px solid var(--v2-line-strong);
  border-radius: var(--v2-r-sm);
  color: var(--v2-text);
  font-size: var(--v2-fs-lg);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--v2-dur-2) var(--v2-ease);
}

.v2-dialog__close:hover {
  background: var(--v2-surface-3);
}

.v2-dialog__meta {
  padding: var(--v2-sp-4) var(--v2-sp-6) 0;
  font-size: var(--v2-fs-xs);
  letter-spacing: var(--v2-ls-wide);
  text-transform: uppercase;
  font-weight: var(--v2-fw-semibold);
  color: var(--v2-text-muted);
}

.v2-dialog__body {
  padding: var(--v2-sp-5) var(--v2-sp-6) var(--v2-sp-6);
  overflow-y: auto;
  font-size: var(--v2-fs-md);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-muted);
}

.v2-dialog__body ul {
  display: grid;
  gap: var(--v2-sp-3);
}

.v2-dialog__body li {
  display: flex;
  gap: var(--v2-sp-3);
}

.v2-dialog__body li::before {
  content: "";
  flex: none;
  width: var(--v2-sp-2);
  height: 2px;
  margin-top: 0.8em;
  background: var(--v2-signal-text);
}

.v2-dialog__body p + p {
  margin-top: var(--v2-sp-4);
}

.v2-dialog__more {
  margin-top: var(--v2-sp-5);
  padding-top: var(--v2-sp-4);
  border-top: 1px solid var(--v2-line);
}

/* Dialog / drawer reveal: `visibility` is in the transition list, and a
   transition to `visible` still computes as `hidden` at progress 0. That is
   exactly the frame on which the dialog and the drawer call .focus(), so the
   call would be a silent no-op and the Tab trap would be defeated. Animating
   only opacity/transform while open flips visibility immediately. */
.v2-dialog-backdrop[data-open="true"] {
  transition-property: opacity;
}

.v2-drawer[data-open="true"] {
  transition-property: transform;
}

/* -------------------------------------------------------------------------
   22. Interior page head — compact dark band with the chevron motif
   ------------------------------------------------------------------------- */

.v2-pagehead {
  position: relative;
  overflow: hidden;
  background-color: var(--v2-ink-900);
  background-size: cover;
  background-position: center;
  color: var(--v2-text-invert);
  isolation: isolate;
}

.v2-pagehead::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--v2-overlay-band);
  z-index: -1;
}

.v2-pagehead::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -4%;
  width: min(56vw, 560px);
  aspect-ratio: 4 / 3;
  transform: translateY(-50%);
  background: url('../../img/v2/motif-chevrons.svg') center / contain no-repeat;
  opacity: var(--v2-motif-opacity);
  pointer-events: none;
  z-index: -1;
}

.v2-pagehead__inner {
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
}

.v2-pagehead__kicker {
  margin-bottom: var(--v2-sp-3);
  font-size: var(--v2-fs-2xs);
  font-weight: var(--v2-fw-bold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-accent);
}

/* The page head renders outside .v2-scope, so the title sets its own colour
   and face instead of relying on the scope's heading reset alone. */
.v2-pagehead__title {
  color: var(--v2-text-invert);
  font-size: var(--v2-fs-4xl);
  font-weight: var(--v2-fw-extrabold);
  line-height: var(--v2-lh-tight);
  max-width: 26ch;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.v2-pagehead__lead {
  margin-top: var(--v2-sp-4);
  font-size: var(--v2-fs-lg);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-invert-muted);
  max-width: 62ch;
}

.v2-pagehead__facts {
  margin-top: var(--v2-sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-sp-2);
}

/* ---- Breadcrumbs ---- */

.v2-crumbs {
  margin-bottom: var(--v2-sp-2);
}

.v2-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--v2-sp-3);
  font-size: var(--v2-fs-xs);
  color: var(--v2-text-invert-muted);
}

.v2-crumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-sp-3);
  min-width: 0;
  max-width: 100%;
}

.v2-crumbs__item + .v2-crumbs__item::before {
  content: "/";
  color: var(--v2-accent);
  flex: none;
}

.v2-crumbs__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--v2-tap);
  color: var(--v2-text-invert-muted);
  transition: color var(--v2-dur-2) var(--v2-ease);
}

.v2-crumbs__link:hover {
  color: var(--v2-accent);
}

/* A long article title must never widen the page. Block rather than flex,
   because text-overflow does not reach the text of a flex container. */
.v2-crumbs__here {
  display: block;
  min-width: 0;
  max-width: 46ch;
  line-height: var(--v2-tap);
  color: var(--v2-text-invert);
  font-weight: var(--v2-fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   23. Speaker profile
   ------------------------------------------------------------------------- */

.v2-profile {
  display: grid;
  gap: var(--v2-sp-8);
  align-items: start;
}

@media (min-width: 992px) {
  .v2-profile {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: var(--v2-sp-11);
  }
}

.v2-profile__aside,
.v2-profile__main {
  min-width: 0;
}

.v2-profile__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--v2-r-lg);
  background: var(--v2-ink-700);
  max-width: 320px;
}

.v2-profile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--v2-stripe);
  pointer-events: none;
}

.v2-profile__img {
  width: 100%;
  aspect-ratio: var(--v2-ar-speaker);
  object-fit: cover;
  object-position: top center;
}

.v2-profile__links {
  margin-top: var(--v2-sp-6);
  display: grid;
  gap: var(--v2-sp-3);
}

.v2-profile__web {
  display: grid;
  gap: var(--v2-sp-1);
  min-width: 0;
}

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

.v2-deflist {
  margin-top: var(--v2-sp-6);
  display: grid;
  gap: var(--v2-sp-3);
}

.v2-deflist__row {
  display: grid;
  gap: var(--v2-sp-1);
  padding-top: var(--v2-sp-3);
  border-top: 1px solid var(--v2-line);
  min-width: 0;
}

.v2-deflist__row dt {
  font-size: var(--v2-fs-2xs);
  font-weight: var(--v2-fw-bold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-text-muted);
}

.v2-deflist__row dd {
  margin: 0;
  font-size: var(--v2-fs-md);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text);
  min-width: 0;
}

@media (min-width: 640px) {
  .v2-deflist__row {
    grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
    gap: var(--v2-sp-4);
    align-items: baseline;
  }
}

/* -------------------------------------------------------------------------
   24. Two-column page with a sidebar (blog listing + article)
   ------------------------------------------------------------------------- */

.v2-withside {
  display: grid;
  gap: var(--v2-sp-9);
  align-items: start;
}

@media (min-width: 992px) {
  .v2-withside {
    grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
    gap: var(--v2-sp-11);
  }
}

.v2-withside__main,
.v2-withside__aside {
  min-width: 0;
}

.v2-aside {
  display: grid;
  gap: var(--v2-sp-7);
}

.v2-widget {
  padding-top: var(--v2-sp-4);
  border-top: 2px solid var(--v2-ink-900);
  min-width: 0;
}

.v2-widget__title {
  font-size: var(--v2-fs-2xs);
  font-weight: var(--v2-fw-bold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-text-muted);
  margin-bottom: var(--v2-sp-4);
}

.v2-searchform {
  display: flex;
  gap: var(--v2-sp-2);
  min-width: 0;
}

.v2-searchform__input {
  flex: 1 1 auto;
  min-width: 0;
}

.v2-searchform__btn {
  flex: none;
  min-width: var(--v2-tap);
  padding-inline: var(--v2-sp-4);
}

.v2-searchform__btn::after {
  content: none;
}

.v2-recent {
  display: grid;
  gap: var(--v2-sp-4);
}

.v2-recent__item {
  display: flex;
  gap: var(--v2-sp-3);
  padding-bottom: var(--v2-sp-4);
  border-bottom: 1px solid var(--v2-line);
  min-width: 0;
}

.v2-recent__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.v2-recent__img {
  width: 64px;
  height: 64px;
  flex: none;
  object-fit: cover;
  background: var(--v2-surface-3);
}

.v2-recent__text {
  min-width: 0;
  display: grid;
  gap: var(--v2-sp-1);
  align-content: start;
}

.v2-recent__link {
  font-size: var(--v2-fs-base);
  font-weight: var(--v2-fw-medium);
  line-height: var(--v2-lh-normal);
  color: var(--v2-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--v2-dur-2) var(--v2-ease);
}

.v2-recent__link:hover {
  color: var(--v2-accent-text);
}

.v2-recent__date {
  font-size: var(--v2-fs-2xs);
  letter-spacing: var(--v2-ls-wide);
  text-transform: uppercase;
  color: var(--v2-text-faint);
}

/* ---- Article cards in the listing ---- */

.v2-postlist {
  display: grid;
  gap: var(--v2-sp-8);
}

.v2-post {
  display: flex;
  flex-direction: column;
  background: var(--v2-surface);
  min-width: 0;
}

.v2-post__media {
  display: block;
  overflow: hidden;
  background: var(--v2-surface-3);
}

.v2-post__img {
  width: 100%;
  aspect-ratio: var(--v2-ar-media);
  object-fit: cover;
}

.v2-post__body {
  display: flex;
  flex-direction: column;
  gap: var(--v2-sp-3);
  padding: var(--v2-sp-6);
  min-width: 0;
}

.v2-post__title {
  font-size: var(--v2-fs-2xl);
  font-weight: var(--v2-fw-bold);
}

.v2-post__title a {
  transition: color var(--v2-dur-2) var(--v2-ease);
}

.v2-post__title a:hover {
  color: var(--v2-accent-text);
}

.v2-post__excerpt {
  font-size: var(--v2-fs-md);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.v2-post--single {
  background: transparent;
}

.v2-post--single .v2-post__body {
  padding-inline: 0;
}

.v2-post__standfirst {
  font-size: var(--v2-fs-lg);
  font-weight: var(--v2-fw-medium);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text);
  padding-bottom: var(--v2-sp-4);
  border-bottom: 1px solid var(--v2-line);
}

/* ---- Share row ----
   v2_share_links() prints <ul class="v2-share">, so this class is the list
   itself. It carries its own reset because it can render outside .v2-scope. */

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

.v2-subheading + .v2-share {
  margin-top: var(--v2-sp-3);
}

.v2-share__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--v2-tap);
  height: var(--v2-tap);
  border: 1px solid var(--v2-line-strong);
  border-radius: var(--v2-r-sm);
  color: var(--v2-text);
  transition: background-color var(--v2-dur-2) var(--v2-ease),
              border-color var(--v2-dur-2) var(--v2-ease),
              color var(--v2-dur-2) var(--v2-ease);
}

.v2-share__link:hover {
  background: var(--v2-ink-900);
  border-color: var(--v2-ink-900);
  color: var(--v2-accent);
}

.v2-on-dark .v2-share__link,
.v2-section--dark .v2-share__link {
  border-color: var(--v2-line-on-dark-2);
  color: var(--v2-text-invert);
}

.v2-on-dark .v2-share__link:hover,
.v2-section--dark .v2-share__link:hover {
  background: var(--v2-accent);
  border-color: var(--v2-accent);
  color: var(--v2-on-accent);
}

/* -------------------------------------------------------------------------
   25. Forms on light surfaces (contact, checkout, sidebar search)
   ------------------------------------------------------------------------- */

.v2-label {
  display: block;
  margin-bottom: var(--v2-sp-2);
  font-size: var(--v2-fs-2xs);
  font-weight: var(--v2-fw-bold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-text-muted);
}

.v2-field {
  margin-bottom: var(--v2-sp-5);
  min-width: 0;
}

.v2-field__req {
  color: var(--v2-accent-text);
}

/* The border is the field's only visible edge on white, so it uses a text
   token: a hairline token would fall short of the 3:1 non-text minimum. */
.v2-input,
input[data-v2-filter-input] {
  width: 100%;
  min-height: var(--v2-tap);
  padding: var(--v2-sp-3) var(--v2-sp-4);
  font-family: inherit;
  font-size: var(--v2-fs-md);
  color: var(--v2-text);
  background: var(--v2-surface);
  border: 1px solid var(--v2-text-faint);
  border-radius: var(--v2-r-sm);
  transition: border-color var(--v2-dur-2) var(--v2-ease);
}

.v2-input::placeholder,
input[data-v2-filter-input]::placeholder {
  color: var(--v2-text-faint);
  opacity: 1;
}

.v2-input:hover,
input[data-v2-filter-input]:hover {
  border-color: var(--v2-text);
}

.v2-textarea {
  min-height: 11rem;
  line-height: var(--v2-lh-relaxed);
  resize: vertical;
}

.v2-formgrid {
  display: grid;
  gap: 0 var(--v2-sp-5);
}

@media (min-width: 768px) {
  .v2-formgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.v2-cform__actions {
  margin-top: var(--v2-sp-2);
}

.v2-contactgrid {
  display: grid;
  gap: var(--v2-sp-9);
  align-items: start;
}

@media (min-width: 992px) {
  .v2-contactgrid {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: var(--v2-sp-11);
  }
}

.v2-contactgrid__aside,
.v2-contactgrid__main {
  min-width: 0;
}

.v2-contactcard {
  margin-top: var(--v2-sp-5);
  padding: var(--v2-sp-6);
  background: var(--v2-surface);
  border-top: 3px solid var(--v2-accent);
  display: grid;
  gap: var(--v2-sp-5);
  min-width: 0;
}

.v2-contactcard__address {
  font-style: normal;
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-muted);
}

.v2-contactcard__address strong {
  display: block;
  color: var(--v2-text);
  font-weight: var(--v2-fw-semibold);
  margin-bottom: var(--v2-sp-2);
}

.v2-contactcard__block {
  display: block;
}

.v2-contactcard__row {
  padding-top: var(--v2-sp-5);
  border-top: 1px solid var(--v2-line);
  font-size: var(--v2-fs-md);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-muted);
  min-width: 0;
}

.v2-contactcard__row .v2-subheading {
  display: block;
  margin-bottom: var(--v2-sp-2);
}

.v2-contactcard__meta {
  margin-top: var(--v2-sp-2);
  font-size: var(--v2-fs-xs);
  color: var(--v2-text-muted);
}

/* -------------------------------------------------------------------------
   26. Stored CMS / legal HTML
   The markup comes from the CMS, so this styles bare elements rather than
   classes. Scoped to .v2-doc so nothing else is affected. Link and overflow
   rules are shared with .v2-prose in section 8.
   ------------------------------------------------------------------------- */

.v2-doc-wrap {
  max-width: 78ch;
}

.v2-doc {
  overflow-wrap: break-word;
}

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

.v2-doc h2 {
  margin-top: var(--v2-sp-9);
  margin-bottom: var(--v2-sp-4);
  font-size: var(--v2-fs-2xl);
  font-weight: var(--v2-fw-bold);
  color: var(--v2-text);
}

.v2-doc h3 {
  margin-top: var(--v2-sp-7);
  margin-bottom: var(--v2-sp-3);
  font-size: var(--v2-fs-xl);
  font-weight: var(--v2-fw-bold);
  color: var(--v2-text);
}

.v2-doc h4,
.v2-doc h5,
.v2-doc h6 {
  margin-top: var(--v2-sp-6);
  margin-bottom: var(--v2-sp-3);
  font-size: var(--v2-fs-md);
  font-weight: var(--v2-fw-semibold);
  color: var(--v2-text);
}

.v2-doc p {
  margin-bottom: var(--v2-sp-4);
}

.v2-doc ul,
.v2-doc ol {
  margin: 0 0 var(--v2-sp-5);
  padding-left: var(--v2-sp-6);
  list-style: disc;
}

.v2-doc ol {
  list-style: decimal;
}

.v2-doc li {
  margin-bottom: var(--v2-sp-2);
  padding-left: var(--v2-sp-1);
}

.v2-doc li::marker {
  color: var(--v2-signal-text);
}

.v2-doc strong,
.v2-doc b {
  color: var(--v2-text);
  font-weight: var(--v2-fw-semibold);
}

.v2-doc img {
  margin-block: var(--v2-sp-5);
}

.v2-doc hr {
  margin-block: var(--v2-sp-7);
}

.v2-doc table {
  width: 100%;
  margin-bottom: var(--v2-sp-5);
  border-collapse: collapse;
  font-size: var(--v2-fs-base);
}

.v2-doc th,
.v2-doc td {
  padding: var(--v2-sp-3);
  border: 1px solid var(--v2-line);
  text-align: left;
  vertical-align: top;
}

.v2-doc th {
  background: var(--v2-surface-3);
  color: var(--v2-text);
  font-weight: var(--v2-fw-semibold);
}

/* Legal text runs long; a rule under each top-level heading keeps clauses
   easy to find. */
.v2-doc--legal h2 {
  padding-bottom: var(--v2-sp-3);
  border-bottom: 1px solid var(--v2-line);
}

/* -------------------------------------------------------------------------
   27. Sponsor categories, videos and the venue page
   ------------------------------------------------------------------------- */

.v2-catblock[data-v2-spaced="true"] {
  margin-top: var(--v2-sp-10);
}

.v2-videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--v2-grid-gap);
}

.v2-video {
  position: relative;
  overflow: hidden;
  background: var(--v2-ink-900);
  aspect-ratio: var(--v2-ar-media);
  min-width: 0;
}

.v2-video__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.v2-videocard {
  display: grid;
  gap: var(--v2-sp-3);
  min-width: 0;
}

.v2-video__cap {
  font-size: var(--v2-fs-sm);
  line-height: var(--v2-lh-normal);
  color: var(--v2-text-muted);
  min-width: 0;
}

.v2-venuepage {
  display: grid;
  gap: var(--v2-sp-9);
  align-items: start;
}

@media (min-width: 992px) {
  .v2-venuepage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: var(--v2-sp-11);
  }
}

.v2-venuepage__main,
.v2-venuepage__aside {
  min-width: 0;
}

.v2-venuepage__prose {
  margin-top: var(--v2-sp-7);
}

.v2-mediafigure {
  overflow: hidden;
  background: var(--v2-surface-3);
}

.v2-mediafigure__img {
  width: 100%;
  aspect-ratio: var(--v2-ar-card);
  object-fit: cover;
}

.v2-mediafigure__cap {
  padding: var(--v2-sp-3) 0;
  border-bottom: 1px solid var(--v2-line);
  background: var(--v2-surface-2);
  font-size: var(--v2-fs-xs);
  letter-spacing: var(--v2-ls-wide);
  text-transform: uppercase;
  color: var(--v2-text-muted);
}

.v2-factcard {
  padding: var(--v2-sp-6);
  background: var(--v2-surface);
  border-top: 3px solid var(--v2-accent);
  min-width: 0;
}

.v2-factcard .v2-deflist {
  margin-top: var(--v2-sp-5);
}

/* The fact card sits in a ~340px rail, so the two-column definition layout
   would squeeze the values into a three-word ribbon. Keep them stacked here
   whatever the viewport is. */
.v2-factcard .v2-deflist__row {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--v2-sp-1);
}

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

/* -------------------------------------------------------------------------
   28. Photo gallery (legacy grid)
   Each thumbnail is a plain link to the full-size file, which is keyboard
   operable by default. gallery.js upgrades it to the lightbox.
   ------------------------------------------------------------------------- */

.v2-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: var(--v2-sp-3);
}

.v2-gallery__item {
  min-width: 0;
}

.v2-gallery__link {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--v2-surface-3);
}

.v2-gallery__img {
  display: block;
  width: 100%;
  aspect-ratio: var(--v2-ar-card);
  object-fit: cover;
  transition: transform var(--v2-dur-3) var(--v2-ease);
}

.v2-gallery__link:hover .v2-gallery__img {
  transform: scale(1.04);
}

/* The zoom affordance is decorative; it also guarantees a 44px target inside
   an otherwise image-only link. */
.v2-gallery__zoom {
  position: absolute;
  right: var(--v2-sp-2);
  bottom: var(--v2-sp-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--v2-tap);
  height: var(--v2-tap);
  background: var(--v2-overlay-flat);
  color: var(--v2-accent);
  opacity: 0;
  transition: opacity var(--v2-dur-2) var(--v2-ease);
}

.v2-gallery__link:hover .v2-gallery__zoom,
.v2-gallery__link:focus-visible .v2-gallery__zoom {
  opacity: 1;
}

/* -------------------------------------------------------------------------
   29. People wall (attendees)

   Only the fields the public attendee list has ever shown: name, city and
   country. The monogram is derived from the name, so no third-party avatar
   service is contacted and no e-mail hash leaves the page.
   ------------------------------------------------------------------------- */

.v2-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 0 var(--v2-sp-7);
}

.v2-person {
  display: flex;
  align-items: center;
  gap: var(--v2-sp-4);
  padding-block: var(--v2-sp-4);
  border-bottom: 1px solid var(--v2-line);
  min-width: 0;
}

.v2-person__avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--v2-r-pill);
  background: var(--v2-ink-800);
  color: var(--v2-accent);
  font-size: var(--v2-fs-sm);
  font-weight: var(--v2-fw-bold);
  letter-spacing: var(--v2-ls-wide);
}

.v2-person__text {
  display: block;
  min-width: 0;
}

.v2-person__name {
  display: block;
  font-size: var(--v2-fs-md);
  font-weight: var(--v2-fw-semibold);
  overflow-wrap: break-word;
}

.v2-person__place {
  display: block;
  margin-top: var(--v2-sp-1);
  font-size: var(--v2-fs-sm);
  color: var(--v2-text-muted);
  overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------
   30. Third-party embeds and places (parking)

   Stored map embeds carry hard-coded width="600" height="450", which
   overflows a 360px screen. The wrapper reclaims the geometry.
   ------------------------------------------------------------------------- */

.v2-embed {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--v2-ar-media);
  background: var(--v2-surface-3);
  min-width: 0;
}

.v2-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  border: 0;
  display: block;
}

.v2-places {
  display: grid;
  gap: var(--v2-sp-9);
}

@media (min-width: 840px) {
  .v2-places {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--v2-sp-9) var(--v2-sp-8);
  }
}

.v2-place {
  display: grid;
  gap: var(--v2-sp-4);
  align-content: start;
  min-width: 0;
}

.v2-place__name {
  font-size: var(--v2-fs-xl);
  font-weight: var(--v2-fw-bold);
}

.v2-place__text {
  font-size: var(--v2-fs-md);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-muted);
}

/* -------------------------------------------------------------------------
   31. Notice — honest empty states, form errors and floating flash messages
   ------------------------------------------------------------------------- */

.v2-notice {
  padding: var(--v2-sp-5) var(--v2-sp-6);
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-left: 3px solid var(--v2-signal-text);
  font-size: var(--v2-fs-md);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-muted);
}

/* Cyan means "act here" on this site, so errors use the danger tokens. */
.v2-notice--error {
  background: var(--v2-danger-soft);
  border-color: var(--v2-danger);
  border-left-color: var(--v2-danger);
  color: var(--v2-text);
}

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

/* The flash-message fallback from the footer script. It is appended straight
   to <body>, outside every scope and over whatever the page shows, so it
   brings its own light surface, sets the font itself, and always uses full
   text colour. */
.v2-notice--float {
  position: fixed;
  top: var(--v2-sp-4);
  right: var(--v2-sp-4);
  z-index: var(--v2-z-dialog);
  width: min(24rem, calc(100vw - 2 * var(--v2-sp-4)));
  max-height: calc(100vh - 2 * var(--v2-sp-4));
  margin: 0;
  padding: var(--v2-sp-4) var(--v2-sp-5);
  overflow-y: auto;
  overflow-wrap: anywhere;
  background: var(--v2-surface);
  border-color: var(--v2-line-strong);
  box-shadow: var(--v2-sh-3);
  color: var(--v2-text);
  font-family: var(--v2-font-sans);
  font-size: var(--v2-fs-base);
}

.v2-notice--float[role="alert"] {
  border-left-color: var(--v2-danger);
}

/* A success and an error can arrive together: do not stack them on one spot. */
.v2-notice--float + .v2-notice--float {
  top: calc(var(--v2-sp-4) + 6rem);
}

/* -------------------------------------------------------------------------
   32. Tiles and file list — the gated material pages.
   Links always point at the gated route, never at /public/uploads/.
   ------------------------------------------------------------------------- */

.v2-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: var(--v2-grid-gap);
}

.v2-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--v2-sp-4);
  padding: var(--v2-sp-7) var(--v2-sp-5);
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  min-width: 0;
  transition: border-color var(--v2-dur-2) var(--v2-ease);
}

.v2-tile:hover {
  border-color: var(--v2-accent-text);
}

.v2-tile__icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--v2-signal-text);
}

.v2-tile__name {
  font-size: var(--v2-fs-md);
  font-weight: var(--v2-fw-semibold);
  color: var(--v2-text);
  overflow-wrap: break-word;
  transition: color var(--v2-dur-2) var(--v2-ease);
}

.v2-tile:hover .v2-tile__name {
  color: var(--v2-accent-text);
}

.v2-filelist {
  display: grid;
  border-top: 1px solid var(--v2-line);
}

.v2-file {
  display: flex;
  align-items: center;
  gap: var(--v2-sp-4);
  padding-block: var(--v2-sp-3);
  min-height: var(--v2-tap);
  border-bottom: 1px solid var(--v2-line);
  color: var(--v2-text);
  min-width: 0;
  transition: border-color var(--v2-dur-2) var(--v2-ease),
              color var(--v2-dur-2) var(--v2-ease);
}

.v2-file:hover {
  border-bottom-color: var(--v2-accent-text);
  color: var(--v2-accent-text);
}

.v2-file__icon {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--v2-text-faint);
}

.v2-file:hover .v2-file__icon {
  color: var(--v2-accent-text);
}

.v2-file__title {
  font-size: var(--v2-fs-md);
  font-weight: var(--v2-fw-medium);
  overflow-wrap: anywhere;
  min-width: 0;
}

.v2-tiles + .v2-notice,
.v2-filelist + .v2-notice {
  margin-top: var(--v2-sp-6);
}

/* Standalone form card (the material password gate) */
.v2-formcard {
  width: min(100%, 30rem);
  margin-inline: auto;
  padding: var(--v2-sp-7);
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-top: 3px solid var(--v2-accent);
}

.v2-formcard > * + * {
  margin-top: var(--v2-sp-5);
}

/* Narrow single-column body (confirmation and gate pages) */
.v2-narrow {
  max-width: var(--v2-container-narrow);
}

.v2-narrow--center {
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   33. Checkout — step indicator, order summary and payment panels

   Presentation only. The Stripe / PayPal / invoice hooks these rules sit
   around (.paypal, .stripe, .Invoicep, #paypal-button, .stripe-button) are
   the legacy markup and are never targeted here: the jQuery in the view and
   in public/js/custom.js toggles them with inline display, which always wins
   over anything in this file. Nothing below sets `display` on a hook.
   ------------------------------------------------------------------------- */

.v2-steps {
  margin-bottom: var(--v2-sp-8);
}

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

.v2-steps__item {
  flex: 1 1 11rem;
  display: flex;
  align-items: center;
  gap: var(--v2-sp-3);
  min-height: var(--v2-tap);
  padding: var(--v2-sp-3) var(--v2-sp-4);
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  color: var(--v2-text-faint);
  min-width: 0;
}

.v2-steps__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--v2-line-strong);
  border-radius: var(--v2-r-pill);
  background: var(--v2-surface);
  font-size: var(--v2-fs-xs);
  font-weight: var(--v2-fw-bold);
}

.v2-steps__label {
  font-size: var(--v2-fs-2xs);
  font-weight: var(--v2-fw-bold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  overflow-wrap: break-word;
  min-width: 0;
}

.v2-steps__item--done {
  border-color: var(--v2-line-strong);
  color: var(--v2-text-muted);
}

.v2-steps__item--done .v2-steps__num {
  border-color: var(--v2-positive);
  color: var(--v2-positive);
}

/* The current step is marked three ways (fill, weight and a left rule) so it
   is not carried by hue alone. aria-current="step" carries it for assistive
   technology. */
.v2-steps__item--current {
  background: var(--v2-ink-900);
  border-color: var(--v2-ink-900);
  border-left: 3px solid var(--v2-accent);
  color: var(--v2-text-invert);
}

.v2-steps__item--current .v2-steps__num {
  background: var(--v2-accent);
  border-color: var(--v2-accent);
  color: var(--v2-on-accent);
}

/* Attendee form: two columns, and full-width rows for the long fields */
.v2-formgrid--2 {
  gap: 0 var(--v2-sp-5);
}

@media (min-width: 560px) {
  .v2-formgrid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.v2-field--full {
  grid-column: 1 / -1;
}

.v2-fieldset {
  margin: 0 0 var(--v2-sp-5);
  padding: 0;
  border: 0;
  min-width: 0;
}

/* Checkbox rows: the attendee-listing switch and the consent box */
.v2-check {
  display: flex;
  align-items: flex-start;
  gap: var(--v2-sp-3);
  min-height: var(--v2-tap);
  padding: var(--v2-sp-3) 0;
}

/* The consent box keeps its legacy `form-check-input` class, because the
   inline jQuery that enables the Proceed button is matched to that markup.
   Bootstrap 4 gives that class `position: absolute; margin-left: -1.25rem`,
   which pulls the checkbox on top of the first words of its own label inside
   a flex row, so the positioning is reset here rather than the class being
   dropped from the element.

   The checked fill is the dark teal, not cyan: it has to show the state
   against white at 3:1. */
.v2-check input[type="checkbox"] {
  position: static;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--v2-signal-text);
}

.v2-check__label {
  margin: 0;
  font-size: var(--v2-fs-base);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text);
  min-width: 0;
  cursor: pointer;
}

.v2-check__label p {
  margin: 0;
}

.v2-check__label a {
  color: var(--v2-accent-text);
  text-decoration: underline;
}

.v2-check__label a:hover {
  color: var(--v2-text);
  text-decoration: underline;
}

.v2-check--consent {
  margin-top: var(--v2-sp-2);
  padding: var(--v2-sp-5);
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-left: 3px solid var(--v2-signal-text);
}

.v2-formnote {
  margin-top: var(--v2-sp-4);
  font-size: var(--v2-fs-base);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-muted);
}

.v2-formnote--aside {
  margin-top: var(--v2-sp-5);
}

/* Order review: the two summary cards on step 2 */
.v2-checkout__grid {
  display: grid;
  gap: var(--v2-grid-gap);
  align-items: start;
}

@media (min-width: 860px) {
  .v2-checkout__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.v2-checkout__grid .v2-pass__list {
  margin-top: var(--v2-sp-5);
}

/* Payment method chooser and the panels it reveals */
.v2-pay {
  display: grid;
  gap: var(--v2-sp-5);
  min-width: 0;
}

.v2-pay__choice {
  max-width: 24rem;
  margin-bottom: 0;
}

/* The native arrow is drawn from tokens so the select matches .v2-input. */
select.v2-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--v2-sp-9);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--v2-text-muted) 50%),
    linear-gradient(135deg, var(--v2-text-muted) 50%, transparent 50%);
  background-position:
    right var(--v2-sp-5) center,
    right var(--v2-sp-4) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.v2-pay__panel {
  padding: var(--v2-sp-6);
  background: var(--v2-surface-2);
  border: 1px solid var(--v2-line);
  min-width: 0;
  overflow-wrap: break-word;
}

.v2-pay__panel > form {
  margin: var(--v2-sp-4) 0 0;
}

.v2-pay__note {
  margin: var(--v2-sp-4) 0 0;
  font-size: var(--v2-fs-base);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-muted);
}

/* The Stripe element is injected by checkout.js and carries its own skin; it
   only needs room to breathe. */
.v2-pay__panel .stripe-button-el {
  max-width: 100%;
}

/* -------------------------------------------------------------------------
   34. Add to calendar and filter list (hooks live in theme.js)
   Styled by data attribute as well as class, so the hook works however a view
   writes the markup. A button that also carries .v2-btn keeps the button look.
   ------------------------------------------------------------------------- */

.v2-ics,
button[data-v2-ics]:not(.v2-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v2-sp-2);
  min-height: var(--v2-tap);
  max-width: 100%;
  padding: var(--v2-sp-3) var(--v2-sp-5);
  background: transparent;
  border: 1px solid var(--v2-text);
  border-radius: var(--v2-r-sm);
  color: var(--v2-text);
  font-family: inherit;
  font-size: var(--v2-fs-base);
  font-weight: var(--v2-fw-semibold);
  line-height: var(--v2-lh-snug);
  cursor: pointer;
  transition: background-color var(--v2-dur-2) var(--v2-ease),
              border-color var(--v2-dur-2) var(--v2-ease),
              color var(--v2-dur-2) var(--v2-ease);
}

.v2-ics:hover,
button[data-v2-ics]:not(.v2-btn):hover {
  background: var(--v2-surface-3);
}

.v2-on-dark .v2-ics,
.v2-section--dark .v2-ics,
.v2-on-dark button[data-v2-ics]:not(.v2-btn),
.v2-section--dark button[data-v2-ics]:not(.v2-btn) {
  border-color: var(--v2-text-invert);
  color: var(--v2-text-invert);
}

.v2-on-dark .v2-ics:hover,
.v2-section--dark .v2-ics:hover,
.v2-on-dark button[data-v2-ics]:not(.v2-btn):hover,
.v2-section--dark button[data-v2-ics]:not(.v2-btn):hover {
  background: var(--v2-tint-5);
}

/* The hooks toggle `hidden`. Components set their own `display`, which would
   otherwise beat it, so state it here and keep it independent of Bootstrap. */
[data-v2-ics][hidden],
[data-v2-countdown][hidden],
[data-v2-filter-item][hidden],
[data-v2-filter-empty][hidden] {
  display: none !important;
}

.v2-filter {
  display: grid;
  gap: var(--v2-sp-2);
  max-width: 28rem;
  margin-bottom: var(--v2-sp-7);
  min-width: 0;
}

/* The grid gap sets the spacing; Bootstrap's label margin would double it. */
.v2-filter label {
  margin-bottom: 0;
}

.v2-filter__label {
  font-size: var(--v2-fs-2xs);
  font-weight: var(--v2-fw-bold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-text-muted);
}

.v2-filter__empty,
[data-v2-filter-empty] {
  margin-top: var(--v2-sp-5);
  font-size: var(--v2-fs-md);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-muted);
}

/* -------------------------------------------------------------------------
   35. Tabbed media page
   ------------------------------------------------------------------------- */

/* Shown/hidden by gallery.js; the html[data-v2-gtab] rules cover the first
   paint (set by an inline script before the panels are parsed). Without JS
   neither applies and both sections stay visible, stacked. */
.v2-gallerypage [hidden] {
  display: none !important;
}

html[data-v2-gtab="photos"] .v2-gallerypage [data-v2-gpanel="videos"],
html[data-v2-gtab="videos"] .v2-gallerypage [data-v2-gpanel="photos"] {
  display: none;
}

/* Sticks directly under the sticky header. */
.v2-gtabs-bar {
  position: sticky;
  top: var(--v2-header-h);
  z-index: var(--v2-z-sticky);
  background: var(--v2-surface);
  border-bottom: 1px solid var(--v2-line);
}

.v2-gtabs {
  display: flex;
  gap: var(--v2-sp-2);
  padding-block: var(--v2-sp-3);
}

.v2-gtab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v2-sp-2);
  flex: 1 1 0;
  min-height: var(--v2-tap);
  padding: var(--v2-sp-2) var(--v2-sp-5);
  border: 1px solid var(--v2-line-strong);
  border-radius: var(--v2-r-sm);
  background: var(--v2-surface);
  color: var(--v2-text);
  font-size: var(--v2-fs-md);
  font-weight: var(--v2-fw-semibold);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--v2-dur-2) var(--v2-ease),
              border-color var(--v2-dur-2) var(--v2-ease),
              color var(--v2-dur-2) var(--v2-ease);
}

@media (min-width: 768px) {
  .v2-gtab {
    flex: 0 0 auto;
    min-width: 11rem;
  }
}

.v2-gtab:hover {
  border-color: var(--v2-text-muted);
  color: var(--v2-text);
}

.v2-gtab[aria-selected="true"] {
  background: var(--v2-ink-900);
  border-color: var(--v2-ink-900);
  color: var(--v2-text-invert);
}

.v2-gtab__count {
  font-weight: var(--v2-fw-regular);
}

/* Deep links land below both sticky bars, not underneath them. */
.v2-gpanel {
  scroll-margin-top: calc(var(--v2-header-h) + var(--v2-tap) + var(--v2-sp-7));
}

.v2-gpanel:focus {
  outline: none;
}

.v2-gfilter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-sp-2);
  margin-bottom: var(--v2-sp-7);
}

.v2-gfilter__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-sp-1);
  min-height: var(--v2-tap);
  padding: var(--v2-sp-2) var(--v2-sp-4);
  border: 1px solid var(--v2-line-strong);
  border-radius: var(--v2-r-sm);
  background: var(--v2-surface);
  color: var(--v2-text);
  font-family: inherit;
  font-size: var(--v2-fs-sm);
  font-weight: var(--v2-fw-semibold);
  cursor: pointer;
}

.v2-gfilter__chip:hover {
  border-color: var(--v2-text-muted);
}

.v2-gfilter__chip[aria-pressed="true"] {
  background: var(--v2-ink-900);
  border-color: var(--v2-ink-900);
  color: var(--v2-accent);
}

.v2-gfilter__count {
  font-weight: var(--v2-fw-regular);
}

.v2-gcat + .v2-gcat {
  margin-top: var(--v2-sp-9);
}

.v2-gcat__title {
  margin-bottom: var(--v2-sp-5);
  font-size: var(--v2-fs-2xl);
  font-weight: var(--v2-fw-bold);
  line-height: var(--v2-lh-snug);
}

.v2-gcat__count {
  font-weight: var(--v2-fw-regular);
  color: var(--v2-text-muted);
}

/* Photo grid: 2 / 3 (>=768) / 4 (>=1200) columns */
.v2-ggrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--v2-sp-3);
}

@media (min-width: 768px) {
  .v2-ggrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--v2-sp-4);
  }
}

@media (min-width: 1200px) {
  .v2-ggrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.v2-ggrid__item {
  min-width: 0;
}

.v2-gphoto {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--v2-ar-card);
  /* Placeholder while the file arrives: a soft tint, not a flat grey box. */
  background: linear-gradient(135deg, var(--v2-surface-3), var(--v2-surface-4));
}

.v2-gphoto__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--v2-dur-3) var(--v2-ease);
}

.v2-gphoto:hover .v2-gphoto__img {
  transform: scale(1.04);
}

.v2-gphoto__zoom {
  position: absolute;
  right: var(--v2-sp-2);
  bottom: var(--v2-sp-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--v2-tap);
  height: var(--v2-tap);
  background: var(--v2-overlay-flat);
  color: var(--v2-accent);
  opacity: 0;
  transition: opacity var(--v2-dur-2) var(--v2-ease);
}

.v2-gphoto:hover .v2-gphoto__zoom,
.v2-gphoto:focus-visible .v2-gphoto__zoom {
  opacity: 1;
}

/* ---- Video facades ---- */

.v2-gvideos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--v2-grid-gap);
}

.v2-gvideos__item {
  min-width: 0;
}

.v2-yt {
  display: grid;
  gap: var(--v2-sp-3);
  color: var(--v2-text);
  text-decoration: none;
  min-width: 0;
}

.v2-on-dark .v2-yt,
.v2-section--dark .v2-yt {
  color: var(--v2-text-invert);
}

.v2-yt__frame {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--v2-ar-media);
  background: var(--v2-ink-900);
}

/* hqdefault.jpg is 4:3 with letterbox bars; cover-crop it to 16:9. */
.v2-yt__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--v2-dur-3) var(--v2-ease);
}

.v2-yt__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.v2-yt__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border: 1px solid var(--v2-accent);
  border-radius: var(--v2-r-pill);
  background: var(--v2-overlay-flat);
  transition: background-color var(--v2-dur-2) var(--v2-ease);
}

.v2-yt__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -11px 0 0 -7px;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--v2-white);
  transition: border-color var(--v2-dur-2) var(--v2-ease);
}

.v2-yt:hover .v2-yt__play,
.v2-yt:focus-visible .v2-yt__play {
  background: var(--v2-accent);
}

/* The play triangle is an icon on a cyan fill. */
.v2-yt:hover .v2-yt__play::before,
.v2-yt:focus-visible .v2-yt__play::before {
  border-left-color: var(--v2-on-accent);
}

.v2-yt:hover .v2-yt__thumb {
  transform: scale(1.03);
}

.v2-yt__title {
  font-size: var(--v2-fs-sm);
  font-weight: var(--v2-fw-semibold);
  line-height: var(--v2-lh-normal);
  overflow-wrap: break-word;
}

.v2-yt:hover .v2-yt__title {
  color: var(--v2-accent-text);
}

.v2-on-dark .v2-yt:hover .v2-yt__title,
.v2-section--dark .v2-yt:hover .v2-yt__title {
  color: var(--v2-accent);
}

/* ---- Closing CTA ---- */

.v2-gcta {
  border-top: 1px solid var(--v2-line);
}

.v2-gcta__inner {
  display: grid;
  gap: var(--v2-sp-5);
  align-items: center;
}

@media (min-width: 768px) {
  .v2-gcta__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.v2-gcta__actions {
  margin-top: 0;
}

/* Lightbox skin — magnific-popup, only for the v2 instance. */
.v2-mfp .mfp-counter {
  color: var(--v2-text-invert-muted);
  font-family: var(--v2-font-sans);
}

.v2-mfp .mfp-title {
  font-family: var(--v2-font-sans);
  color: var(--v2-text-invert);
  padding-right: 6rem;
}

.v2-mfp .mfp-arrow,
.v2-mfp .mfp-close {
  opacity: 0.85;
}

.v2-mfp .mfp-arrow:focus-visible,
.v2-mfp .mfp-close:focus-visible {
  opacity: 1;
  outline: var(--v2-focus-width) solid var(--v2-focus-on-dark);
  outline-offset: var(--v2-focus-offset);
}

/* -------------------------------------------------------------------------
   36. Phone layout (max-width: 767.98px only)

   Nothing is hidden and every target stays at the full tap size; only the
   arrangement changes, to keep long pages short on a phone. The hero's two
   outer planes go, since at this width they would sit behind the copy.
   ------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

  :root {
    --v2-header-h: 72px;
    --v2-cut: 2rem;
  }

  .v2-hero__shape--b,
  .v2-hero__shape--c {
    display: none;
  }

  .v2-hero__actions .v2-btn {
    flex: 1 1 100%;
  }

  /* A stored table can be wider than a phone: it scrolls inside its own box
     instead of widening the page. */
  .v2-doc table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  .v2-footer__band {
    padding-block: var(--v2-sp-7);
  }

  .v2-footer__slash {
    display: none;
  }

  /* Footer: two-up link lists halve the row count while keeping 44px rows. */
  .v2-footer__top {
    gap: var(--v2-sp-6);
    padding-block: var(--v2-sp-7);
  }

  .v2-footer__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--v2-sp-4);
  }

  .v2-footer__logo {
    height: var(--v2-logo-h-mobile);
  }

  /* Icon-font glyphs have different advance widths, so they sit off-centre in
     a fixed square. A 1em box centres every glyph identically. */
  .v2-social__link i,
  .v2-share__link i {
    font-size: var(--v2-fs-md);
    line-height: 1;
    width: 1em;
    text-align: center;
    font-style: normal;
  }

  /* Long e-mail addresses must wrap rather than widen the column. */
  .v2-footer__address span,
  .v2-footer__blurb {
    overflow-wrap: anywhere;
  }

  .v2-footer__bottom {
    gap: var(--v2-sp-2);
    justify-content: flex-start;
    padding-top: var(--v2-sp-4);
    /* The fixed back-to-top button would otherwise cover the last legal link
       at the end of the page. Reserving its footprint as trailing space lets
       the links come to rest above it. */
    padding-bottom: calc(var(--v2-tap) + var(--v2-sp-5));
  }

  .v2-legal {
    gap: 0 var(--v2-sp-4);
  }

  /* Speakers: two per row, which roughly halves the page. */
  .v2-speakers__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--v2-sp-3);
  }

  .v2-speaker__body {
    padding: var(--v2-sp-2) var(--v2-sp-3) var(--v2-sp-4);
  }

  .v2-speaker__name {
    font-size: var(--v2-fs-base);
    line-height: var(--v2-lh-snug);
  }

  /* Articles: thumbnail beside the text instead of above it. */
  .v2-article {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: stretch;
  }

  .v2-article > a:first-child {
    display: block;
    min-height: 100%;
  }

  .v2-article__img {
    height: 100%;
    aspect-ratio: auto;
  }

  .v2-article__body {
    padding: var(--v2-sp-3) var(--v2-sp-4);
    gap: var(--v2-sp-2);
  }

  /* An article without a photo has no thumbnail column to sit beside. */
  .v2-article__body:first-child {
    grid-column: 1 / -1;
  }

  .v2-article__more {
    padding-top: 0;
  }

  /* Programme tiles: stacked full width, so the label never gets squeezed. */
  .v2-quick__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--v2-sp-3);
  }

  .v2-marquee__group {
    gap: var(--v2-sp-8);
    padding-right: var(--v2-sp-8);
  }

  .v2-marquee__logo {
    width: 130px;
    height: 74px;
  }
}

/* -------------------------------------------------------------------------
   37. Reduced motion
   tokens.css collapses the duration tokens and the hover lift, which stills
   every transition above. This block adds what a duration cannot reach:
   smooth scrolling, the marquee and the hover zooms. It stays last so it
   overrides them. --v2-dur-1 is already collapsed inside this query.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  .v2-body,
  .v2-body *,
  .v2-body *::before,
  .v2-body *::after {
    animation-duration: var(--v2-dur-1) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--v2-dur-1) !important;
    scroll-behavior: auto !important;
  }

  /* A still, wrapped logo wall replaces the moving strip. */
  .v2-marquee {
    display: block;
  }

  .v2-marquee__group {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--v2-sp-5) var(--v2-sp-8);
    padding-right: 0;
    animation: none !important;
  }

  .v2-marquee__group[aria-hidden="true"] {
    display: none;
  }

  .v2-btn:hover::after,
  .v2-phototile:hover .v2-phototile__img,
  .v2-gallery__link:hover .v2-gallery__img,
  .v2-gphoto:hover .v2-gphoto__img,
  .v2-yt:hover .v2-yt__thumb {
    transform: none;
  }
}