/* ==========================================================================
   Organization Presentation Portal — design system
   Palette is fixed: shared neutrals below, brand values injected per org
   by src/utils/theme.js. No colour outside the two approved palettes.
   ========================================================================== */

/* --------------------------------------------------------------- typography
   Agency FB is the primary face. `local()` uses the copy installed with
   Windows/Office when present (no download); the bundled file covers machines
   without it. Saira Condensed / Oswald / Arial Narrow are the fallbacks if
   neither is available — all condensed, so layout stays predictable. */
@font-face {
  font-family: 'Agency FB';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: local('Agency FB'), url('/fonts/AgencyFB-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Agency FB';
  font-style: normal;
  font-weight: 700 900;
  font-display: block;
  src: local('Agency FB Bold'), local('Agency FB'), url('/fonts/AgencyFB-Bold.ttf') format('truetype');
}

:root {
  /* Shared neutrals */
  --page-bg: #f8fafc;
  --surface: #ffffff;
  --text: #111827;
  --muted: #4b5563;
  --border: #e5e7eb;
  --success: #16a34a;
  --error: #dc2626;

  /* Brand tokens — overwritten at runtime per organization */
  --brand-primary: #000000;
  --brand-secondary: #e95a22;
  --brand-accent: #e95a22;
  --brand-highlight: #f45c23;
  --brand-on: #ffffff;
  /* The accent darkened enough to read as text on white — see theme.js. */
  --accent-ink: #ba481b;
  --nav-bg: #000000;
  --nav-text: #ffffff;
  --on-accent: #ffffff;
  --on-primary: #ffffff;
  --accent-soft: rgba(233, 90, 34, 0.12);
  --accent-line: rgba(233, 90, 34, 0.32);
  --primary-soft: rgba(0, 0, 0, 0.06);
  --nav-hover: rgba(255, 255, 255, 0.1);
  --nav-line: rgba(255, 255, 255, 0.14);
  --nav-dim: rgba(255, 255, 255, 0.68);

  /* Shape & depth — kept deliberately light for a calm, professional surface */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.04), 0 1px 2px rgba(17, 24, 39, 0.02);
  --shadow-md: 0 4px 14px rgba(17, 24, 39, 0.06), 0 1px 4px rgba(17, 24, 39, 0.03);
  --shadow-lg: 0 18px 40px rgba(17, 24, 39, 0.1), 0 4px 12px rgba(17, 24, 39, 0.04);
  --gap: 18px;
  --font: "Segoe UI", Arial, sans-serif;
  /* Agency FB is narrow with a small x-height, so body copy gets a nudge. */
  --text-scale: 1;
}

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

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

body {
  font-family: var(--font);
  background: var(--page-bg);
  color: var(--text);
  font-size: 17.5px;
  line-height: 1.6;
  letter-spacing: 0.006em;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
  cursor: pointer;
}

a {
  color: var(--accent-ink, var(--brand-accent));
}

.boot {
  display: grid;
  place-items: center;
  min-height: 100vh;
  color: var(--muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--brand-accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  box-shadow: var(--shadow-md);
}

.btn--dark {
  background: var(--brand-primary);
  color: var(--on-primary);
}

.btn--ghost {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

.btn--ghost:hover {
  border-color: var(--brand-accent);
  color: var(--accent-ink, var(--brand-accent));
}

.btn--quiet {
  background: transparent;
  color: var(--muted);
  padding: 8px 12px;
}

.btn--quiet:hover {
  color: var(--accent-ink, var(--brand-accent));
}

.btn--danger {
  background: var(--surface);
  border-color: var(--border);
  color: var(--error);
}

.btn--danger:hover {
  background: var(--error);
  color: #ffffff;
  border-color: var(--error);
}

.btn--sm {
  padding: 7px 13px;
  font-size: 13px;
}

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

.btn[disabled] {
  opacity: 0.55;
  pointer-events: none;
}

.btn--on-dark {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
}

.btn--on-dark:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ---------------------------------------------------------------- inputs */
.field {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
}

.field__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.input,
.textarea,
.select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.6;
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--muted);
}

/* ---------------------------------------------------------------- login */
.login {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
}

.login__brand {
  background: var(--text);
  color: #ffffff;
  padding: 56px 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.login__brand::after {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -160px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}

.login__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
}

.login__headline {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 20px 0 14px;
  max-width: 16em;
}

.login__sub {
  color: rgba(255, 255, 255, 0.76);
  max-width: 34em;
  font-size: 17px;
}

.login__orgs {
  display: grid;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.login__org {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.login__swatch {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
}

.login__org-name {
  font-weight: 650;
}

.login__org-tag {
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.login__panel {
  display: grid;
  place-items: center;
  padding: 40px 32px;
  background: var(--page-bg);
}

.login__card {
  width: min(430px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 34px 32px;
}

.login__card h2 {
  margin: 0 0 6px;
  font-size: 25px;
  letter-spacing: -0.01em;
}

.login__card p.login__hint-text {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 14.5px;
}

.role-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 5px;
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-bottom: 20px;
}

.role-toggle__btn {
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 9px 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
  transition: background 0.18s ease, color 0.18s ease;
}

.role-toggle__btn.is-active {
  background: var(--text);
  color: #ffffff;
}

.form-error {
  margin: 0 0 14px;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.28);
  color: var(--error);
  font-size: 14px;
}

.login__creds {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
  font-size: 13px;
  color: var(--muted);
}

.login__creds code {
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 12.5px;
}

/* ------------------------------------------------------------ org picker */
.picker {
  min-height: 100vh;
  padding: 56px 32px 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.picker__head {
  text-align: center;
  max-width: 40em;
  margin-bottom: 40px;
}

.picker__head h1 {
  font-size: clamp(28px, 3vw, 40px);
  margin: 10px 0 12px;
  letter-spacing: -0.02em;
}

.picker__head p {
  color: var(--muted);
  font-size: 17px;
  margin: 0;
}

.picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 26px;
  width: min(1000px, 100%);
}

.org-card {
  border: none;
  text-align: left;
  border-radius: var(--radius-lg);
  padding: 32px 30px 26px;
  color: #ffffff;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 290px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.org-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Corner wedge only — kept clear of the logo and tagline so brand-coloured
   text never lands on a brand-coloured fill. */
.org-card__glow {
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  right: -96px;
  top: -112px;
  opacity: 0.9;
}

/* The card is a brand fill, so a wordmark drawn for paper gets a white plate
   rather than being asked to survive on it. */
.org-card__logo {
  position: relative;
  z-index: 1;
  width: min(220px, 68%);
  padding: 10px 14px;
  border-radius: 12px;
  background: #ffffff;
}

.org-card__name {
  position: relative;
  z-index: 1;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.org-card__tag {
  position: relative;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12.5px;
  font-weight: 700;
  max-width: 66%;
  line-height: 1.5;
}

.org-card__meta {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
}

.org-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  color: #ffffff;
}

/* ==========================================================================
   App shell + navigation pane
   White is the surface. Rows are pills; a group's subsections sit on a light
   tinted panel under it; the accent marks only what is active, hovered or
   primary — and nothing here uses a gradient.
   Collapsed, the pane becomes a black icon rail: no labels, no counts, and a
   section's subsections open in a card beside it.
   ========================================================================== */
:root {
  --nav-w: 300px;
  --nav-rail-w: 78px;
  --nav-surface: #ffffff;
  --nav-sunken: #f4f2ee;
  --nav-line: #e6e2db;
  --nav-ink: #14161a;
  --nav-ink-soft: #3d434c;
  /* 4.6:1 on white — the counted labels are small caps, so they cannot be pale. */
  --nav-ink-quiet: #6f7583;
  --nav-rail-bg: #000000;
}

.shell {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:root[data-nav-rail='1'] .shell {
  grid-template-columns: var(--nav-rail-w) minmax(0, 1fr);
}

/* Shared icon sizing — every glyph in the pane comes from utils/icons.js. */
.ic {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.ic--sm {
  width: 16px;
  height: 16px;
}

.ic--xs {
  width: 13px;
  height: 13px;
}

/* ------------------------------------------------------------ the panel */
.sidenav {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 100vh;
  display: flex;
  flex-direction: column;
  /* Visible so the rail's subsection card can sit outside the 78px column. */
  overflow: visible;
  border-right: 1px solid var(--nav-line);
  background: var(--nav-surface);
  box-shadow: 6px 0 22px rgba(20, 22, 26, 0.05);
  color: var(--nav-ink);
}

/* -------------------------------------------------------------- brand row */
.sidenav__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 14px 10px;
}

.sidenav__logo {
  height: 38px;
  width: auto;
  max-width: 178px;
  object-fit: contain;
  flex: 0 0 auto;
}

.sidenav__name {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Rail-only square mark: a wordmark is unreadable at 44px. */
.sidenav__mark {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  object-fit: contain;
  background: #ffffff;
}

.sidenav__mark--text {
  place-items: center;
  background: var(--nav-accent-ink, var(--accent-ink));
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
}

.sidenav__collapse {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--nav-sunken);
  color: var(--nav-ink);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.sidenav__collapse:hover {
  background: color-mix(in srgb, var(--nav-accent, var(--brand-accent)) 18%, #ffffff);
  color: var(--nav-accent-ink, var(--accent-ink));
}


/* -------------------------------------------------------- who is signed in */






/* -------------------------------------------------------- counted labels */
.snav-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 18px 7px;
  color: var(--nav-ink-quiet);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.snav-label__text {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  white-space: nowrap;
}

.snav-label__word {
  overflow: hidden;
  text-overflow: ellipsis;
}

.snav-label__count {
  color: var(--nav-ink);
  font-weight: 800;
}

.snav-label__act {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--nav-ink-quiet);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.snav-label__act:hover {
  background: color-mix(in srgb, var(--nav-accent, var(--brand-accent)) 16%, #ffffff);
  color: var(--nav-accent-ink, var(--accent-ink));
}

/* ---------------------------------------------------------- quick actions */
.snav-quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 4px;
  padding: 0 12px;
}

.snav-quick__btn {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 8px 2px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--nav-ink);
  font: inherit;
  cursor: pointer;
  transition: background 0.16s ease;
}

.snav-quick__btn:hover {
  background: color-mix(in srgb, var(--nav-accent, var(--brand-accent)) 9%, #ffffff);
}

.snav-quick__chip {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--nav-accent, var(--brand-accent)) 13%, #ffffff);
  color: var(--nav-accent-ink, var(--accent-ink));
  transition: background 0.16s ease, color 0.16s ease, transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.snav-quick__btn:hover .snav-quick__chip {
  background: var(--nav-accent, var(--brand-accent));
  color: var(--nav-on-accent, var(--on-accent));
  transform: translateY(-2px);
}

.snav-quick__btn--exit .snav-quick__chip {
  background: var(--nav-sunken);
  color: var(--nav-ink-soft);
}

.snav-quick__btn--exit:hover .snav-quick__chip {
  background: color-mix(in srgb, var(--error) 14%, #ffffff);
  color: var(--error);
}

.snav-quick__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ----------------------------------------------------------- scroll body */
.sidenav__scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 12px 14px;
  scrollbar-width: thin;
  scrollbar-color: #d8d4ce transparent;
}

.sidenav__scroll::-webkit-scrollbar {
  width: 8px;
}

.sidenav__scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #d8d4ce;
}

.snav-search {
  display: none;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  margin: 0 0 8px;
  border-radius: 999px;
  background: var(--nav-sunken);
}

.snav-search.is-open {
  display: grid;
}

.snav-search__icon {
  width: 15px;
  height: 15px;
  justify-self: center;
  color: var(--nav-ink-quiet);
}

.snav-search__input {
  min-width: 0;
  padding: 9px 14px 9px 0;
  border: 0;
  background: transparent;
  color: var(--nav-ink);
  font: inherit;
  font-size: 13px;
  outline: none;
}

.snav-search__input::placeholder {
  color: var(--nav-ink-quiet);
}

/* ------------------------------------------------------ organization guide */
.nav-tree {
  display: grid;
  gap: 2px;
}

.nav-tree__group.is-filtered,
.nav-tree__child.is-filtered {
  display: none;
}

.nav-tree__parent,
.nav-tree__child {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Pill rows: the shape carries the state, so nothing needs a border. */
.nav-tree__parent {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 40px;
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--nav-ink);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.16s ease, color 0.16s ease, transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.nav-tree__badge {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: inherit;
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

.nav-tree__icon {
  width: 19px;
  height: 19px;
  stroke-width: 2.1;
}

.sec-icon {
  width: 19px;
  height: 19px;
}

.sec-icon--asset {
  width: 21px;
  height: 21px;
  object-fit: contain;
  border-radius: 5px;
}

.nav-tree__parent:hover {
  background: color-mix(in srgb, var(--nav-accent, var(--brand-accent)) 9%, #ffffff);
  transform: translateX(2px);
}

.nav-tree__parent:hover .nav-tree__badge {
  transform: scale(1.12);
}

.nav-tree__parent:active {
  transform: translateX(2px) scale(0.99);
}

/* :not() keeps the open-group tint from outranking the active fill. */
.nav-tree__group.is-open > .nav-tree__parent:not(.is-active) {
  background: color-mix(in srgb, var(--nav-accent, var(--brand-accent)) 10%, #ffffff);
}

.nav-tree__parent.is-active {
  background: var(--nav-accent-ink, var(--accent-ink));
  color: #ffffff;
}

.nav-tree__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-tree__flag {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--nav-sunken);
  color: var(--nav-ink-quiet);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-tree__parent.is-active .nav-tree__flag {
  background: rgba(255, 255, 255, 0.26);
  color: #ffffff;
}

.nav-tree__chevron {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--nav-ink-quiet);
  transition: transform 0.18s ease;
}

.nav-tree__parent.is-active .nav-tree__chevron {
  color: #ffffff;
}

.nav-tree__group.is-open .nav-tree__chevron {
  transform: rotate(90deg);
}

/* Subsections read as one block under their parent, and they open by growing
   into place: a 0fr → 1fr grid row interpolates, where `display: none` cannot. */
.nav-tree__children {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  border-radius: 18px;
  background: var(--nav-sunken);
  opacity: 0;
  overflow: hidden;
  transition:
    grid-template-rows 0.3s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.2s ease,
    margin 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.nav-tree__children-inner {
  display: grid;
  gap: 2px;
  min-height: 0;
  padding: 6px 8px 8px 34px;
}

.nav-tree__group.is-open > .nav-tree__children {
  grid-template-rows: 1fr;
  margin: 3px 0 8px;
  opacity: 1;
}

/* Each row arrives just after the one above it. */
.nav-tree__group.is-open > .nav-tree__children .nav-tree__child,
.nav-tree__group.is-open > .nav-tree__children .nav-tree__caption {
  animation: nav-row-in 0.34s cubic-bezier(0.32, 0.72, 0, 1) both;
  animation-delay: calc(var(--i, 0) * 26ms);
}

@keyframes nav-row-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.nav-tree__caption {
  padding: 8px 12px 3px;
  color: var(--nav-accent-ink, var(--accent-ink));
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav-tree__child {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--nav-ink-soft);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  transition: background 0.16s ease, color 0.16s ease, transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.nav-tree__child:hover {
  background: color-mix(in srgb, var(--nav-accent, var(--brand-accent)) 12%, #ffffff);
  color: var(--nav-accent-ink, var(--accent-ink));
  transform: translateX(3px);
}

.nav-tree__child.is-active {
  background: var(--nav-accent-ink, var(--accent-ink));
  color: #ffffff;
  font-weight: 600;
}

/* A third level is rare; the rule keeps it legible without another indent step. */
.nav-tree__child--nested {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 2px solid color-mix(in srgb, var(--nav-accent, var(--brand-accent)) 34%, transparent);
  border-radius: 0 999px 999px 0;
  font-size: 13px;
}

.nav-tree__child-icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.6;
}

.nav-tree__child-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -------------------------------------------------- workspace destinations */
.snav-card {
  display: grid;
  gap: 2px;
  padding: 6px;
  border-radius: 18px;
  background: var(--nav-sunken);
}

.snav-card__row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 38px;
  padding: 4px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--nav-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.snav-card__row:hover {
  background: #ffffff;
}

.snav-card__mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--nav-accent-ink, var(--accent-ink));
}

.snav-card__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.snav-card__row--add {
  margin-top: 3px;
  padding-top: 7px;
  border-top: 1px dashed var(--nav-line);
  border-radius: 999px;
}

.snav-card__mark--add {
  background: color-mix(in srgb, var(--nav-accent, var(--brand-accent)) 14%, #ffffff);
}

.snav-card__row--add:hover .snav-card__mark--add {
  background: var(--nav-accent, var(--brand-accent));
  color: var(--nav-on-accent, var(--on-accent));
}

/* --------------------------------------------------------- primary action */
.sidenav__foot {
  padding: 10px 12px 14px;
}

.snav-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 13px;
  border: 0;
  border-radius: 18px;
  background: #000000;
  color: #ffffff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease;
}

.snav-cta:hover {
  background: #1c1a19;
}

.snav-cta__fab {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--nav-accent, var(--brand-accent));
  color: var(--nav-on-accent, var(--on-accent));
}

.snav-cta__text {
  display: grid;
  min-width: 0;
}

.snav-cta__title {
  font-size: 14.5px;
  font-weight: 700;
}

.snav-cta__hint {
  color: rgba(255, 255, 255, 0.62);
  font-size: 11.5px;
}

/* ================================================================= the rail
   Black, 78px, icons only: the brand mark, every section within one click, and
   the primary action. Labels, counts and cards all belong to the open pane. */
.snav-rail__list {
  display: none;
}

.snav-flyout {
  position: absolute;
  left: calc(100% + 10px);
  z-index: 45;
  width: 236px;
  padding: 8px;
  border-radius: 16px;
  background: var(--nav-surface);
  box-shadow: 0 18px 44px rgba(20, 22, 26, 0.22);
}

/* The rail's label: brand-coloured, arrowed, and never the grey OS tooltip. */
.snav-tip {
  position: absolute;
  left: calc(100% + 10px);
  z-index: 46;
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--nav-accent-ink, var(--accent-ink));
  box-shadow: 0 10px 26px rgba(20, 22, 26, 0.24);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-6px, -50%);
  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.snav-tip::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 2px 0 0 0;
  background: inherit;
  transform: translateX(4px) rotate(45deg);
}

.snav-tip.is-on {
  opacity: 1;
  transform: translate(0, -50%);
}

.snav-tip[hidden] {
  display: none;
}

.snav-flyout[hidden] {
  display: none;
}

.snav-flyout:not([hidden]) {
  animation: nav-flyout-in 0.24s cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes nav-flyout-in {
  from {
    opacity: 0;
    transform: translateX(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.snav-flyout__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px 6px 12px;
}

.snav-flyout__title {
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--nav-ink);
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.snav-flyout__title:hover {
  color: var(--nav-accent-ink, var(--accent-ink));
}

.snav-flyout__close {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--nav-sunken);
  color: var(--nav-ink);
  cursor: pointer;
}

.snav-flyout__close:hover {
  background: color-mix(in srgb, var(--nav-accent, var(--brand-accent)) 18%, #ffffff);
  color: var(--nav-accent-ink, var(--accent-ink));
}

.snav-flyout__list {
  display: grid;
  gap: 2px;
  max-height: min(420px, 60vh);
  overflow-y: auto;
}

.sidenav--rail {
  align-items: center;
  padding: 0;
  border-right-color: transparent;
  background: var(--nav-rail-bg);
  box-shadow: none;
}

.sidenav--rail .sidenav__head {
  flex-direction: column;
  gap: 12px;
  padding: 14px 0 10px;
}

.sidenav--rail .sidenav__logo,
.sidenav--rail .sidenav__name,
.sidenav--rail .snav-label,
.sidenav--rail .snav-quick,
.sidenav--rail .sidenav__scroll {
  display: none;
}

.sidenav--rail .sidenav__mark {
  display: grid;
}

.sidenav--rail .sidenav__collapse {
  margin: 0;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.sidenav--rail .sidenav__collapse:hover {
  background: var(--nav-accent, var(--brand-accent));
  color: var(--nav-on-accent, var(--on-accent));
}

.sidenav--rail .snav-rail__list {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 0 10px;
  overflow-y: auto;
  scrollbar-width: none;
}

.sidenav--rail .snav-rail__list::-webkit-scrollbar {
  display: none;
}

.snav-rail__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.snav-rail__btn:hover {
  background: color-mix(in srgb, var(--nav-accent, var(--brand-accent)) 40%, transparent);
  transform: scale(1.08);
}

.snav-rail__btn.is-active {
  background: var(--nav-accent, var(--brand-accent));
  color: var(--nav-on-accent, var(--on-accent));
}

.snav-rail__icon {
  width: 19px;
  height: 19px;
  stroke-width: 2.1;
}

.snav-rail__icon.sec-icon--asset {
  width: 21px;
  height: 21px;
  padding: 2px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
}

.sidenav--rail .sidenav__foot {
  padding: 0 0 14px;
}

.sidenav--rail .snav-cta {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  background: var(--nav-accent, var(--brand-accent));
  place-items: center;
}

.sidenav--rail .snav-cta:hover {
  background: var(--brand-highlight);
}

.sidenav--rail .snav-cta__text {
  display: none;
}

.sidenav--rail .snav-cta__fab {
  width: 44px;
  height: 44px;
  background: transparent;
}

/* --------------------------------------------------------------- topbar */
.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 32px;
  background: rgba(248, 250, 252, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.topbar__crumbs {
  font-size: 13.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.topbar__crumbs strong {
  color: var(--text);
}

.topbar__spacer {
  flex: 1;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
}

.badge--accent {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-ink, var(--brand-accent));
}

.badge--draft {
  background: rgba(75, 85, 99, 0.08);
  color: var(--muted);
}

.badge--hidden {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.24);
  color: var(--error);
}

.badge--live {
  background: rgba(22, 163, 74, 0.1);
  border-color: rgba(22, 163, 74, 0.3);
  color: var(--success);
}

/* ---------------------------------------------------------------- slide */
.stage {
  padding: 28px 32px 80px;
  flex: 1;
}

.slide {
  max-width: 1260px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 3px rgba(17, 24, 39, 0.04),
    0 8px 24px rgba(17, 24, 39, 0.06),
    0 20px 48px -12px rgba(17, 24, 39, 0.06);
  padding: 48px 52px 56px;
  animation: slide-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  position: relative;
  overflow: hidden;
}

/* Top accent line — refined and minimal */
.slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--brand-primary) 0%,
    var(--brand-accent) 50%,
    var(--brand-primary) 100%
  );
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.slide__head {
  margin-bottom: 36px;
  position: relative;
}

/* The head opens the slide: kicker, title, then the rule drawing itself in. */
.slide__kicker {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand-accent);
  animation: fade-up 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Kicker accent line */
.slide__kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--brand-accent);
  border-radius: 99px;
  animation: scale-x-in 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s both;
  transform-origin: left;
  flex-shrink: 0;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes scale-x-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.slide__title {
  font-size: clamp(32px, 3.2vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 10px 0 0;
  color: var(--text);
  animation: fade-up 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.06s both;
}

.slide__rule {
  width: 56px;
  height: 4px;
  border-radius: 99px;
  background: var(--brand-accent);
  margin-top: 18px;
  transform-origin: left center;
  animation: scale-x-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.14s both;
}

.slide__body {
  display: grid;
  gap: 26px;
}

.block {
  animation: fade-up 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

@keyframes block-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.block-heading {
  font-size: clamp(22px, 1.8vw, 30px);
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 4px 0 0;
  line-height: 1.2;
  color: var(--text);
}

.block-heading--3 {
  font-size: clamp(18px, 1.3vw, 22px);
  font-weight: 600;
  color: var(--text);
}

.prose {
  font-size: clamp(15.5px, 1.02vw, 18px);
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
  max-width: 78ch;
}

.prose strong {
  color: var(--text);
  font-weight: 700;
}

.bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  max-width: 86ch;
}

.bullets li {
  position: relative;
  padding-left: 30px;
  font-size: clamp(15.5px, 1vw, 17.5px);
  line-height: 1.65;
  color: var(--muted);
}

.bullets li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: linear-gradient(
    135deg,
    var(--brand-accent),
    var(--brand-highlight, var(--brand-accent))
  );
  box-shadow: 0 1px 4px rgba(233, 90, 34, 0.2);
}

.divider {
  height: 1px;
  background: var(--border);
  position: relative;
}

.divider::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 64px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(
    90deg,
    var(--brand-accent),
    var(--brand-highlight, var(--brand-accent))
  );
  box-shadow: 0 1px 6px rgba(233, 90, 34, 0.2);
}

/* ---------------------------------------------------------------- stats */
.stat-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 16px;
}

.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  box-shadow: 0 4px 16px -2px rgba(17, 24, 39, 0.04);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -4px rgba(17, 24, 39, 0.08);
}

.stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--brand-accent);
}

.stat__value {
  font-size: clamp(30px, 2.8vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--brand-primary);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.stat__label {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------- cards */
.card-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}

.card-grid--team {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 218px), 1fr));
}

.card-grid--placement {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

.card-grid--partner {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px -2px rgba(17, 24, 39, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -4px rgba(17, 24, 39, 0.09);
  border-color: rgba(0, 0, 0, 0.15);
}

.card__media {
  background: var(--page-bg);
  overflow: hidden;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.card:hover .card__media img {
  transform: scale(1.03);
}

.card__media--square {
  aspect-ratio: 1 / 1;
}

.card__media--wide {
  aspect-ratio: 16 / 9;
}

.card__media--logo {
  aspect-ratio: 12 / 5;
  display: grid;
  place-items: center;
  padding: 14px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.card__media--logo img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.card__body {
  padding: 16px 18px 18px;
  display: grid;
  gap: 7px;
  align-content: start;
  flex: 1;
}

.card__title {
  font-size: 16.5px;
  font-weight: 680;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
}

.card__subtitle {
  font-size: 13.5px;
  color: var(--accent-ink, var(--brand-accent));
  font-weight: 650;
}

.card__meta {
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.card__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 2px 0 0;
}

.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.chip {
  font-size: 11.5px;
  font-weight: 650;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink, var(--brand-accent));
  border: 1px solid var(--accent-line);
}

.card--certification {
  border-left: 4px solid var(--brand-accent);
}

.card--plain .card__body {
  padding: 20px;
}

.card--placement {
  flex-direction: row;
  align-items: stretch;
}

.card--placement .card__media--logo {
  width: 108px;
  aspect-ratio: auto;
  border-bottom: none;
  border-right: 1px solid var(--border);
  flex: 0 0 auto;
  padding: 12px;
}

.card--placement .card__body {
  padding: 14px 16px;
}

.card__index {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 12px;
  color: var(--muted);
}

/* ---------------------------------------------------------------- quote */
.quote {
  background: linear-gradient(
    135deg,
    var(--brand-primary) 0%,
    color-mix(in srgb, var(--brand-primary) 85%, var(--brand-accent)) 100%
  );
  color: var(--on-primary);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  box-shadow:
    var(--shadow-md),
    0 0 0 1px rgba(233, 90, 34, 0.08);
  position: relative;
  overflow: hidden;
}

/* Floating decorative background element */
.quote::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.quote__portrait {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--brand-accent);
  flex: 0 0 auto;
  box-shadow: 0 0 0 4px rgba(233, 90, 34, 0.15);
}

.quote__mark {
  font-size: 64px;
  line-height: 0.6;
  font-weight: 700;
  background: linear-gradient(
    135deg,
    var(--brand-accent),
    var(--brand-highlight, var(--brand-accent))
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.quote__text {
  font-size: clamp(17px, 1.5vw, 24px);
  line-height: 1.58;
  font-weight: 500;
  margin: 10px 0 14px;
  max-width: 62ch;
}

.quote__author {
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 0.01em;
}

.quote__role {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.68);
  letter-spacing: 0.03em;
}

/* -------------------------------------------------------------- gallery
   Smart alignment: up to 5 per row; because the row is centred and full
   rows fill the width exactly, only a trailing partial row appears centred. */
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}

.gallery__item {
  flex: 0 0 auto;
  width: calc((100% - 4 * var(--gap)) / 5);
  border: none;
  padding: 0;
  background: none;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: zoom-in;
  position: relative;
}

.gallery__item:hover {
  transform: translateY(-3px) scale(1.012);
  box-shadow: var(--shadow-md);
}

/* 16:9 matches almost every photograph these decks are built from, so a tile
   holds a whole picture with no crop and no wasted band around it. */
.gallery__item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--page-bg);
}

/* Cropping to a perfectly uniform grid stays available, but it is opt-in. */
.gallery--cover .gallery__item img {
  object-fit: cover;
  background: none;
}

.gallery__caption {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin-top: 14px;
}

.gallery--count-1 .gallery__item,
.gallery--count-2 .gallery__item {
  width: calc((100% - var(--gap)) / 2);
}

.gallery--count-3 .gallery__item,
.gallery--count-4 .gallery__item {
  width: calc((100% - 2 * var(--gap)) / 3);
}

.gallery__meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 8px 10px;
  font-size: 11.5px;
  color: #ffffff;
  background: rgba(17, 24, 39, 0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
  text-align: left;
}

.gallery__item:hover .gallery__meta {
  opacity: 1;
}

/* ------------------------------------------------------------- lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(17, 24, 39, 0.94);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 18px;
  animation: fade-in 0.18s ease both;
}

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

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  gap: 12px;
}

.lightbox__stage {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 12px 0;
}

.lightbox__stage img {
  max-width: min(1400px, 92vw);
  max-height: 78vh;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  object-fit: contain;
}

.lightbox__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 18px;
  transition: background 0.15s ease, transform 0.15s ease;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* --------------------------------------------------- presentation mode */
.deck-bar {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.9);
  color: #ffffff;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(6px);
  opacity: 0.28;
  transition: opacity 0.25s ease;
}

.deck-bar:hover,
.deck-bar:focus-within {
  opacity: 1;
}

.deck-bar__count {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  padding: 0 8px;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}

.deck-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: var(--brand-accent);
  z-index: 45;
  transition: width 0.3s ease;
}

body.is-presenting .sidenav,
body.is-presenting .topbar {
  display: none;
}

body.is-presenting .stage {
  padding: 0;
}

body.is-presenting .shell {
  grid-template-columns: minmax(0, 1fr);
}

/* Presenting: the slide is the display. It fills the nominal box FitSlide sized
   to the screen's shape, and the canvas takes whatever height is left over.
   The gutter is deliberately left alone — see the note on
   `body.is-presenting .fit-slide__inner .slide`. */
body.is-presenting .slide {
  max-width: none;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

body.is-presenting .slide::before {
  display: none;
}

/* `stretch` hands the spare height to the auto-sized rows, so blocks grow to
   fill the slide instead of huddling at the top over a band of empty white.
   Growing only — `flex-shrink: 0` — because a shrinking canvas would squeeze the
   rows below their content and clip it. */
body.is-presenting .canvas {
  flex: 1 0 auto;
  align-content: stretch;
}

body.is-presenting .slide__title {
  font-size: clamp(38px, 4.4vw, 68px);
}

body.is-presenting .prose {
  font-size: clamp(17px, 1.35vw, 24px);
}

body.is-presenting .bullets li {
  font-size: clamp(16px, 1.25vw, 22px);
}

body.is-presenting .stat__value {
  font-size: clamp(34px, 3.6vw, 58px);
}

body.is-presenting .gallery {
  --gap: 22px;
}

/* ---------------------------------------------------------------- editor */
.editor {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  gap: 20px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px 26px;
}

.panel__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.panel__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}

.panel__hint {
  font-size: 13.5px;
  color: var(--muted);
  margin: -8px 0 16px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 14px;
}

.block-list {
  display: grid;
  gap: 14px;
}

.block-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.block-card.is-dragging {
  opacity: 0.45;
}

.block-card.is-dropzone {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.block-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--page-bg);
  border-bottom: 1px solid var(--border);
}

.block-card__handle {
  cursor: grab;
  color: var(--muted);
  font-size: 17px;
  padding: 2px 4px;
  border-radius: 6px;
  user-select: none;
}

.block-card__handle:active {
  cursor: grabbing;
}

.block-card__type {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-ink, var(--brand-accent));
}

.block-card__body {
  padding: 16px;
  display: grid;
  gap: 12px;
}

.subcard {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 13px;
  display: grid;
  gap: 10px;
  background: var(--page-bg);
}

.subcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.add-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.thumb-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.thumb {
  position: relative;
  width: 104px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}

.thumb.is-dragging {
  opacity: 0.4;
}

.thumb.is-dropzone {
  box-shadow: 0 0 0 3px var(--accent-soft);
  border-color: var(--brand-accent);
}

.thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  cursor: grab;
}

.thumb__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(17, 24, 39, 0.72);
  color: #ffffff;
  font-size: 13px;
  line-height: 1;
  display: grid;
  place-items: center;
}

.thumb__remove:hover {
  background: var(--error);
}

.dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  background: var(--page-bg);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.dropzone.is-over {
  border-color: var(--brand-accent);
  background: var(--accent-soft);
  color: var(--accent-ink, var(--brand-accent));
}

.sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.tab-manager {
  display: grid;
  gap: 8px;
}

.tab-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  flex-wrap: wrap;
}

.tab-row.is-dragging {
  opacity: 0.45;
}

.tab-row.is-dropzone {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.tab-row__title {
  flex: 1;
  min-width: 160px;
  font-weight: 600;
}

.empty-note {
  padding: 28px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--page-bg);
}

/* --------------------------------------------------------------- modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.55);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 80;
  animation: fade-in 0.15s ease both;
}

.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: min(560px, 100%);
  max-height: 86vh;
  overflow: auto;
  padding: 26px 26px 22px;
}

.modal__title {
  margin: 0 0 6px;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.modal__text {
  color: var(--muted);
  font-size: 14.5px;
  margin: 0 0 18px;
}

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* -------------------------------------------------------------- toasts */
.toast-host {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  display: grid;
  gap: 10px;
  max-width: min(380px, calc(100vw - 40px));
}

.toast {
  background: var(--text);
  color: #ffffff;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  animation: toast-in 0.22s ease both;
  border-left: 4px solid var(--brand-accent);
}

.toast--success {
  border-left-color: var(--success);
}

.toast--error {
  border-left-color: var(--error);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------- responsive */
@media (max-width: 1280px) {
  .gallery__item {
    width: calc((100% - 3 * var(--gap)) / 4);
  }
  .gallery--count-3 .gallery__item,
  .gallery--count-4 .gallery__item {
    width: calc((100% - 2 * var(--gap)) / 3);
  }
}

@media (max-width: 1024px) {
  .shell {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .slide {
    padding: 34px 30px 40px;
  }
  .stage {
    padding: 22px 20px 70px;
  }
  .topbar {
    padding: 12px 20px;
  }
  .gallery__item {
    width: calc((100% - 2 * var(--gap)) / 3);
  }
}

@media (max-width: 860px) {
  .login {
    grid-template-columns: 1fr;
  }
  .login__brand {
    padding: 34px 26px;
    gap: 26px;
  }
  /* Stacked layout: the pane becomes a full-width card above the deck. The rail
     is meaningless at this width, so every rail rule is undone rather than
     overridden piecemeal — a pane collapsed on the desktop still opens here. */
  .shell,
  :root[data-nav-rail='1'] .shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .sidenav,
  .sidenav--rail {
    position: static;
    align-items: stretch;
    height: auto;
    max-height: 78vh;
    border-right: 0;
    border-bottom: 1px solid var(--nav-line);
    background: var(--nav-surface);
  }
  .sidenav__collapse,
  .sidenav--rail .sidenav__mark,
  .sidenav--rail .snav-rail__list,
  .snav-flyout {
    display: none;
  }
  .sidenav--rail .sidenav__head {
    flex-direction: row;
    padding: 16px 14px 10px;
  }
  .sidenav--rail .sidenav__logo {
    display: block;
  }
  .sidenav--rail .snav-label {
    display: flex;
  }
  .sidenav--rail .snav-quick {
    display: grid;
  }
  .sidenav--rail .sidenav__scroll {
    display: block;
    max-height: 46vh;
  }
  .sidenav--rail .sidenav__foot {
    padding: 10px 12px 14px;
  }
  .sidenav--rail .snav-cta {
    width: 100%;
    height: auto;
    padding: 11px 13px;
    border-radius: 18px;
    background: #000000;
  }
  .sidenav--rail .snav-cta__text {
    display: grid;
  }
  .sidenav--rail .snav-cta__fab {
    width: 36px;
    height: 36px;
    background: var(--brand-accent);
  }
  .sidenav__scroll {
    max-height: 46vh;
  }
  .quote {
    grid-template-columns: 1fr;
    padding: 26px 22px;
  }
  .card--placement {
    flex-direction: column;
  }
  .card--placement .card__media--logo {
    width: 100%;
    aspect-ratio: 12 / 5;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 640px) {
  .gallery__item,
  .gallery--count-3 .gallery__item,
  .gallery--count-4 .gallery__item {
    width: calc((100% - var(--gap)) / 2);
  }
  .slide {
    padding: 26px 20px 32px;
    border-radius: var(--radius);
  }
  .stat-band {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  }
}

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

/* ==========================================================================
   Block canvas — the section builder surface (viewer + editor share this)
   ========================================================================== */
.canvas {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(var(--row-height, 28px), auto);
  gap: var(--canvas-gap, 16px);
  align-items: stretch;
  align-content: start;
}

.canvas-block {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Blocks arrive in reading order when a slide opens. The editor is exempt:
   an element being dragged must never animate under the pointer. */
.canvas:not(.canvas--editing) > .canvas-block {
  animation: block-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 100ms);
}

.canvas-block > * {
  min-height: 0;
  flex: 1;
}

.canvas-block--divider,
.canvas-block--heading,
.canvas-block--stats {
  justify-content: center;
}

/* ------------------------------------------------------------- text box */
.text-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: flex-start;
  position: relative;
}

.text-box--center {
  text-align: center;
  align-items: center;
}

.text-box--center .bullets li {
  text-align: left;
}

.media-empty__hint {
  color: var(--muted);
  font-style: italic;
}

/* ------------------------------------------------------ image / video box */
.image-box,
.video-box,
.profile-box {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.image-box__frame {
  flex: 1;
  min-height: 140px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--page-bg);
  cursor: zoom-in;
  display: block;
  position: relative;
  transition: box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.image-box__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0 rgba(233, 90, 34, 0);
  transition: box-shadow 0.35s ease;
  pointer-events: none;
  z-index: 1;
}

.image-box__frame:hover::after {
  box-shadow: inset 0 0 24px rgba(233, 90, 34, 0.08);
}

.image-box__frame img {
  width: 100%;
  height: 100%;
  min-height: 140px;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.image-box__frame:hover {
  box-shadow: 0 8px 28px rgba(17, 24, 39, 0.12);
}

.image-box__frame:hover img {
  transform: scale(1.04);
}

.media-title {
  font-size: 0.9em;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}

.media-caption {
  font-size: 0.85em;
  color: var(--muted);
  text-align: center;
  position: relative;
  padding-top: 6px;
}

.media-caption::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 2px;
  border-radius: 99px;
  background: var(--brand-accent);
  opacity: 0.4;
}

.media-note {
  font-size: 0.8em;
  color: var(--muted);
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-accent);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin: 0;
}

.media-empty {
  flex: 1;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--page-bg);
  color: var(--muted);
  font-size: 0.9em;
  text-align: center;
  padding: 16px;
}

.media-empty__icon {
  font-size: 26px;
  color: var(--accent-ink, var(--brand-accent));
}

/* ----------------------------------------------------------- video box */
.video-box__frame {
  position: relative;
  flex: 1;
  min-height: 160px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--text);
  border: 1px solid var(--border);
}

.video-box__player {
  width: 100%;
  height: 100%;
  min-height: 160px;
  display: block;
  object-fit: contain;
  background: var(--text);
}

.video-box__fs {
  position: absolute;
  right: 10px;
  bottom: 52px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(17, 24, 39, 0.72);
  color: #ffffff;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.78em;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.video-box__frame:hover .video-box__fs,
.video-box__frame:focus-within .video-box__fs {
  opacity: 1;
}

.video-box__fs:hover {
  background: var(--brand-accent);
  color: var(--on-accent);
  border-color: transparent;
}

/* The Back control only exists while the video owns the screen. */
.video-box__back {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 5;
  display: none;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(17, 24, 39, 0.8);
  color: #ffffff;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 700;
}

.video-box__back:hover {
  background: var(--brand-accent);
  color: var(--on-accent);
  border-color: transparent;
}

.video-box__frame.is-fullscreen {
  border: none;
  border-radius: 0;
}

.video-box__frame.is-fullscreen .video-box__back {
  display: flex;
}

.video-box__frame.is-fullscreen .video-box__fs {
  display: none;
}

.video-box__frame:fullscreen .video-box__player {
  width: 100vw;
  height: 100vh;
}

/* --------------------------------------------------------- profile slot
   Fixed frame + cover crop, so any upload lands well composed. */
.profile-box {
  align-items: center;
  text-align: center;
}

.profile-box__zoom {
  border: none;
  background: none;
  padding: 0;
  cursor: zoom-in;
  width: 100%;
  display: flex;
  justify-content: center;
}

.profile-box__frame {
  width: 100%;
  max-width: 320px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--page-bg);
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px -2px rgba(17, 24, 39, 0.05);
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.profile-box__frame:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -4px rgba(17, 24, 39, 0.1);
  border-color: var(--brand-accent);
}

.profile-box__frame::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand-accent);
}

.profile-box__frame--portrait {
  aspect-ratio: 4 / 5;
}

.profile-box__frame--square {
  aspect-ratio: 1 / 1;
}

.profile-box__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.profile-box__frame:hover img {
  transform: scale(1.02);
}

.profile-box__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  background: var(--page-bg);
}

.profile-box__placeholder span {
  font-size: 34px;
  font-weight: 700;
  color: var(--brand-accent);
}

.profile-box__placeholder small {
  font-size: 12px;
}

.profile-box__caption {
  display: grid;
  gap: 4px;
  margin-top: 12px;
}

.profile-box__name {
  font-weight: 750;
  font-size: 1.1em;
  color: var(--text);
  letter-spacing: -0.01em;
}

.profile-box__role {
  color: var(--brand-accent);
  font-weight: 700;
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.profile-box__blurb {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.88em;
  line-height: 1.65;
}

/* ==========================================================================
   Canvas editor chrome
   ========================================================================== */
.canvas-editor {
  display: grid;
  gap: 18px;
}

.canvas--editing {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 14px;
  min-height: 320px;
  background-attachment: local;
  background-image: none;
  transition: background-image 0.12s ease;
}

/*
 * Column guides are a placement aid, not decoration: they appear while an
 * element is being dragged or dropped and are invisible the rest of the time,
 * so the canvas reads as the page rather than as graph paper.
 */
body.is-block-dragging .canvas--editing,
body.is-placing-block .canvas--editing,
body.is-block-dragging .canvas--editing-nested,
body.is-placing-block .canvas--editing-nested {
  background-image:
    repeating-linear-gradient(to right, transparent 0, transparent calc(8.3333% - 1px), var(--accent-line) calc(8.3333% - 1px), var(--accent-line) 8.3333%);
}

.canvas--editing .canvas-block {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 14px 14px;
  overflow: hidden;
  animation: none;
}

.canvas--editing .canvas-block:hover {
  border-color: var(--accent-line);
}

.canvas--editing .canvas-block.is-selected {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.canvas--editing .canvas-block.is-moving,
.canvas--editing .canvas-block.is-resizing {
  z-index: 6;
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-accent);
  opacity: 0.96;
}

.canvas-block__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.canvas-block__body > * {
  flex: 1;
  min-height: 0;
}

.block-toolbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  background: var(--page-bg);
  border-bottom: 1px solid var(--border);
}

.block-toolbar__label {
  flex: 1;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.block-toolbar__btn {
  border: none;
  background: transparent;
  color: var(--muted);
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 13px;
  line-height: 1;
}

.block-toolbar__btn:hover {
  background: var(--accent-soft);
  color: var(--accent-ink, var(--brand-accent));
}

.block-toolbar__btn--danger:hover {
  background: rgba(220, 38, 38, 0.1);
  color: var(--error);
}

.block-toolbar__grip {
  cursor: grab;
  touch-action: none;
}

.block-toolbar__grip:active {
  cursor: grabbing;
}

.canvas-block__size {
  position: absolute;
  right: 6px;
  bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.canvas--editing .canvas-block:hover .canvas-block__size,
.canvas--editing .canvas-block.is-selected .canvas-block__size,
.canvas--editing .canvas-block.is-resizing .canvas-block__size {
  opacity: 1;
}

.resize-handle {
  position: absolute;
  background: transparent;
  touch-action: none;
  z-index: 4;
}

.resize-handle--e {
  top: 30px;
  right: 0;
  bottom: 12px;
  width: 10px;
  cursor: ew-resize;
}

.resize-handle--s {
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 10px;
  cursor: ns-resize;
}

.resize-handle--se {
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  border-right: 3px solid var(--border);
  border-bottom: 3px solid var(--border);
  border-bottom-right-radius: var(--radius);
}

.canvas-block:hover .resize-handle--se,
.canvas-block.is-selected .resize-handle--se {
  border-color: var(--brand-accent);
}

body.is-block-dragging {
  user-select: none;
  cursor: grabbing;
}

.canvas-empty {
  grid-column: 1 / -1;
  grid-row: 1 / span 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  text-align: center;
  padding: 24px;
}

.canvas-empty strong {
  color: var(--text);
  font-size: 1.1em;
}

.add-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.add-bar__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-right: 4px;
}

.select--inline {
  width: auto;
  padding: 7px 10px;
  font-size: 14px;
}

/* ========================================================== icon chooser
   Section identity: a library mark or an uploaded PNG/SVG. The preview is the
   real navigation row, so the choice is judged where it will be seen.
   ========================================================== */
.section-form {
  display: grid;
  gap: 4px;
}

.icon-chooser {
  display: grid;
  gap: 12px;
}

.icon-chooser__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--page-bg);
}

.icon-chooser__preview {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* The chip repeats the pane's own treatment: light fill, accent glyph. */
.icon-chooser__preview-chip {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #ffffff;
  color: var(--accent-ink, var(--brand-accent));
}

.icon-chooser__preview-glyph {
  display: grid;
  place-items: center;
}

.icon-chooser__preview-glyph .sec-icon {
  width: 21px;
  height: 21px;
}

.icon-chooser__preview-glyph .sec-icon--asset {
  width: 26px;
  height: 26px;
}

.icon-chooser__preview-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.icon-chooser__preview-title {
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-chooser__preview-note {
  color: var(--muted);
  font-size: 12px;
}

.icon-chooser__tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.icon-chooser__hint {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}

.input--sm {
  padding: 9px 12px;
  font-size: 14px;
}

.icon-chooser__grid {
  display: grid;
  gap: 14px;
  max-height: 236px;
  overflow-y: auto;
  padding: 4px 2px 2px;
}

.icon-chooser__group-label {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.icon-chooser__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 7px;
}

.icon-tile {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.icon-tile:hover {
  border-color: var(--brand-accent);
  color: var(--accent-ink, var(--brand-accent));
  transform: translateY(-1px);
}

.icon-tile__glyph {
  width: 20px;
  height: 20px;
}

.icon-tile.is-active {
  border-color: transparent;
  background: linear-gradient(130deg, var(--brand-accent), var(--brand-highlight));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand-accent) 34%, transparent);
  color: var(--on-accent);
}

.icon-chooser__empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 13.5px;
  text-align: center;
}

.btn__icon {
  width: 16px;
  height: 16px;
}

/* The editor's nav-icon control: shows the current mark, opens the chooser. */
.icon-field {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 12px 7px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.icon-field:hover {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.icon-field__chip {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--page-bg);
  color: var(--accent-ink, var(--brand-accent));
}

.icon-field__chip .sec-icon {
  width: 18px;
  height: 18px;
}

.icon-field__text {
  flex: 1;
  min-width: 0;
  color: var(--muted);
  font-size: 13.5px;
}

.icon-field__act {
  color: var(--accent-ink, var(--brand-accent));
  font-size: 13px;
  font-weight: 600;
}

/* -------------------------------------------------- block edit dialog bits */
.modal--wide {
  width: min(720px, 100%);
}

.block-fields {
  display: grid;
  gap: 14px;
}

.field__hint {
  font-size: 12.5px;
  color: var(--muted);
}

.checkbox-grid {
  display: grid;
  gap: 8px;
}

.asset-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--page-bg);
}

.asset-row__preview {
  width: 132px;
  height: 92px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  flex: 0 0 auto;
}

.asset-row__preview--round {
  width: 84px;
  height: 84px;
  border-radius: 50%;
}

.asset-row__empty {
  width: 132px;
  height: 92px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--accent-ink, var(--brand-accent));
  font-size: 26px;
  flex: 0 0 auto;
}

.asset-row__actions {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}

.dropzone.is-busy {
  border-color: var(--brand-accent);
  color: var(--accent-ink, var(--brand-accent));
}

/* Section identity in the manager and the template list: the same marks the
   navigation pane draws, on a light surface. */
.row-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--page-bg);
  color: var(--accent-ink, var(--brand-accent));
}

.row-icon .sec-icon,
.row-icon .ic {
  width: 17px;
  height: 17px;
}

.row-icon--action {
  padding: 0;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.row-icon--action:hover {
  border-color: var(--brand-accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ==========================================================================
   Responsive: below the stacking breakpoint every block goes full width in
   reading order, so the canvas still reads correctly on a tablet.
   ========================================================================== */
@media (max-width: 900px) {
  .canvas {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }

  /* The fitted slide is excluded here rather than corrected further down: this
     !important beats the per-block inline grid placement, and CSS cannot put an
     inline value back once it has lost. Below the 861px cutoff the fit is off
     and the slide does stack, so it is added back at the end of this file. */
  .canvas-block:not(.fit-slide__inner .canvas-block) {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .image-box__frame,
  .video-box__frame {
    min-height: 220px;
  }
}

/* Presentation mode: a touch more air, larger media. */
body.is-presenting .canvas {
  --canvas-gap: 22px;
}

body.is-presenting .profile-box__frame {
  max-width: 380px;
}

/* Stat cards size to their content instead of stretching to the block box. */
.stat-band {
  align-content: start;
}

.stat {
  align-self: start;
}

/* Text-ish blocks keep their content top-aligned inside the block box. */
.canvas-block--heading > *,
.canvas-block--paragraph > *,
.canvas-block--bullets > *,
.canvas-block--stats > * {
  flex: 0 0 auto;
}

/* ==========================================================================
   Admin tools on the slide itself — so adding a block never needs a hunt
   ========================================================================== */
.slide-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding: 14px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--page-bg);
}

.slide-tools__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-right: 4px;
}

.slide-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 56px 24px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--page-bg);
  color: var(--muted);
}

.slide-empty strong {
  color: var(--text);
  font-size: 1.25em;
}

.slide-empty span {
  max-width: 48ch;
}

/* The editor's add bar follows you down a long canvas. */
.add-bar {
  position: sticky;
  bottom: 76px;
  z-index: 12;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
}

/* Make the drag grip unmistakable while editing. */
.block-toolbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.canvas--editing .canvas-block:hover .block-toolbar,
.canvas--editing .canvas-block.is-selected .block-toolbar {
  background: var(--accent-soft);
  border-bottom-color: var(--accent-line);
}

.block-toolbar__grip {
  color: var(--accent-ink, var(--brand-accent));
  font-size: 15px;
}

.block-toolbar__grip:hover {
  background: var(--brand-accent);
  color: var(--on-accent);
}

/* Visible resize affordance on the right and bottom edges, not just the corner. */
.canvas--editing .canvas-block:hover .resize-handle--e::after,
.canvas--editing .canvas-block.is-selected .resize-handle--e::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  width: 4px;
  height: 34px;
  border-radius: 99px;
  background: var(--brand-accent);
  opacity: 0.6;
}

.canvas--editing .canvas-block:hover .resize-handle--s::after,
.canvas--editing .canvas-block.is-selected .resize-handle--s::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  width: 34px;
  height: 4px;
  border-radius: 99px;
  background: var(--brand-accent);
  opacity: 0.6;
}

@media (max-width: 900px) {
  .add-bar {
    position: static;
  }
}
/* Embedded providers (YouTube / Vimeo / Drive) fill the same frame as <video>. */
.video-box__player--embed {
  width: 100%;
  height: 100%;
  min-height: 160px;
  border: 0;
  display: block;
  background: var(--text);
}

.video-box__frame.is-fullscreen .video-box__player--embed {
  width: 100vw;
  height: 100vh;
}

.video-box__source {
  margin-left: 8px;
  vertical-align: middle;
}

/* Keep the Back control clickable above an embedded player. */
.video-box__back {
  z-index: 10;
}
/* ==========================================================================
   Page-builder elements
   Every element below draws only on the brand tokens, so a section built from
   them cannot drift off-palette however it is arranged.
   ========================================================================== */

/* ------------------------------------------------------------------ hero */
.slide--hero {
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  min-height: 860px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.slide--hero .canvas {
  height: 100% !important;
  min-height: 860px !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  grid-template-rows: 1fr !important;
}

.slide--hero .canvas-block--hero {
  height: 100% !important;
  min-height: 860px !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  grid-row: 1 / -1 !important;
}

.slide--hero .hero {
  border-radius: 0 !important;
  height: 100% !important;
  min-height: 860px !important;
  width: 100% !important;
  padding: 64px 80px;
  flex: 1 1 auto !important;
}

body.is-presenting .fit-slide__inner .slide--hero {
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 100% !important;
}

/* Color tag helpers for hero text elements */
.text-brand-green {
  color: #71BD1F !important;
  font-weight: 800;
}

.text-brand-gold {
  color: #FFBB00 !important;
  font-weight: 800;
}

.text-brand-green-line {
  color: #71BD1F !important;
  font-weight: 800;
  position: relative;
  display: inline-block;
  margin-left: 8px;
}

.text-brand-green-line::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 5px;
  border-radius: 99px;
  background: linear-gradient(90deg, #71BD1F 0%, #FFBB00 100%);
}

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--brand-primary);
  color: var(--on-primary);
  padding: 44px 48px;
  isolation: isolate;
  min-height: 100%;
}

.hero--sm { min-height: 220px; }
.hero--md { min-height: 340px; }
.hero--lg { min-height: 460px; }
.hero--full { min-height: 100%; }

.hero--plain {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-highlight) 190%);
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  border: 0;
}

/* 18s, 4% — enough that the frame breathes, not enough to notice as motion.
   The editor is exempt so a drifting background never fights the pointer. */
.hero:not(.hero--editing) img.hero__media {
  animation: hero-drift 18s ease-in-out infinite alternate both;
}

/* Pan, do not zoom: on an architectural elevation a growing scale eats the
   roofline, which reads as a bad crop rather than as motion. */
@keyframes hero-drift {
  from {
    transform: scale(1.03) translate3d(-0.7%, 0, 0);
  }
  to {
    transform: scale(1.03) translate3d(0.7%, 0, 0);
  }
}

.hero__media--embed {
  pointer-events: none !important;
  user-select: none !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 125% !important;
  min-width: 125% !important;
  height: 145% !important;
  min-height: 145% !important;
  border: 0 !important;
  transform: translate(-50%, -50%) scale(1.22) !important;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(8, 14, 26, 0.94) 0%, rgba(8, 14, 26, 0.82) 42%, rgba(8, 14, 26, 0.3) 75%, rgba(8, 14, 26, 0.08) 100%);
}

.hero--center .hero__scrim {
  background: rgba(0, 0, 0, 0.9);
}

.hero--right .hero__scrim {
  background: linear-gradient(-90deg, rgba(6, 12, 22, 0.96) 0%, rgba(6, 12, 22, 0.85) 45%, rgba(6, 12, 22, 0.3) 75%, rgba(6, 12, 22, 0.02) 100%) !important;
}

.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 48rem;
}

.hero:not(.hero--editing) .hero__kicker {
  animation: block-in 0.55s cubic-bezier(0.22, 0.68, 0, 1) 0.18s both;
}

.hero:not(.hero--editing) .hero__heading {
  animation: block-in 0.68s cubic-bezier(0.22, 0.68, 0, 1) 0.26s both;
}

.hero:not(.hero--editing) .hero__subheading {
  animation: block-in 0.68s cubic-bezier(0.22, 0.68, 0, 1) 0.36s both;
}

.hero--center {
  align-items: center;
  text-align: center;
}

.hero--center .hero__content {
  align-items: center;
}

.hero--right {
  align-items: flex-end;
  text-align: right;
}

.hero--right .hero__content {
  align-items: flex-end;
  text-align: right;
  margin-left: auto;
}

.hero__kicker {
  font-size: clamp(38px, 4.2vw, 64px);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 24px;
  line-height: 1.1;
  display: inline-block;
}

.hero--media .hero__kicker {
  color: #ffffff;
  opacity: 1;
}

.hero__heading {
  margin: 0 0 16px 0;
  font-size: clamp(28px, 2.6vw, 44px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.hero__subheading {
  margin: 0;
  font-size: clamp(16px, 1.25vw, 21px);
  line-height: 1.65;
  opacity: 0.95;
  max-width: 48rem;
}

.hero__hint {
  position: absolute;
  right: 14px;
  bottom: 12px;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

/* ------------------------------------------------------------- KPI cards */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 14px;
  align-content: start;
}

/* On a slide the block is given a box to fill, so the cards share that height
   evenly instead of sitting at the top over a band of empty space — and the
   number sits in the middle of the card it was given, not at its top. */
.canvas-block--kpi .kpi-grid {
  height: 100%;
  align-content: stretch;
  grid-auto-rows: 1fr;
}

.canvas-block--kpi .kpi {
  justify-content: center;
}

/* Same for a card deck: on a slide the block is a box to fill, so the cards
   share the height and their copy sits in the middle of the card rather than
   stranded at the top of a tall empty one. */
.canvas-block--cards .card-grid {
  height: 100%;
  align-content: stretch;
  grid-auto-rows: 1fr;
}

/* The body is a grid, so centring is align-content, not justify-content. */
.canvas-block--cards .card__body {
  align-content: center;
}

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

.kpi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 24px 26px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px -2px rgba(17, 24, 39, 0.05);
  position: relative;
  overflow: hidden;
  min-width: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -4px rgba(17, 24, 39, 0.08);
  border-color: var(--brand-accent);
}

.kpi::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--brand-accent);
}

.kpi-grid--outline .kpi {
  background: transparent;
  box-shadow: none;
  border-color: var(--border);
}

.kpi-grid--plain .kpi {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 12px 0;
}

.kpi__icon {
  font-size: 26px;
  line-height: 1;
  margin-bottom: 4px;
  color: var(--brand-accent);
}

.kpi__value {
  font-size: clamp(32px, 3vw, 48px);
  font-weight: 800;
  line-height: 1.05;
  color: var(--brand-primary);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.kpi__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 2px;
}

.kpi__note {
  font-size: 12.5px;
  color: var(--muted);
  opacity: 0.85;
  line-height: 1.5;
}

/* ------------------------------------------------------------ icon block */
.icon-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  min-width: 0;
}

.icon-box__glyph {
  display: grid;
  place-items: center;
  line-height: 1;
  flex: none;
}

.icon-box__glyph--circle,
.icon-box__glyph--square {
  background: var(--accent-soft);
  color: var(--accent-ink, var(--brand-accent));
}

.icon-box__glyph--circle { border-radius: 99px; }
.icon-box__glyph--square { border-radius: var(--radius); }

.icon-box--sm .icon-box__glyph { width: 38px; height: 38px; font-size: 18px; }
.icon-box--md .icon-box__glyph { width: 50px; height: 50px; font-size: 24px; }
.icon-box--lg .icon-box__glyph { width: 66px; height: 66px; font-size: 32px; }

.icon-box--primary .icon-box__glyph--circle,
.icon-box--primary .icon-box__glyph--square {
  background: var(--primary-soft);
  color: var(--brand-primary);
}

.icon-box--muted .icon-box__glyph--circle,
.icon-box--muted .icon-box__glyph--square {
  background: var(--page-bg);
  color: var(--muted);
  border: 1px solid var(--border);
}

.icon-box__glyph--none {
  background: none;
  width: auto;
  height: auto;
}

.icon-box__label {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

.icon-box__note {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
}

/* -------------------------------------------------------- buttons / links */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  align-content: flex-start;
}

.button-row--center { justify-content: center; }
.button-row--right { justify-content: flex-end; }

.btn--cta {
  padding: 11px 22px;
  font-size: 16px;
}

.btn--outline {
  background: transparent;
  color: var(--accent-ink, var(--brand-accent));
  border: 2px solid currentColor;
}

.btn--outline:hover {
  background: var(--accent-soft);
}

/* On a hero the outline and quiet buttons sit on a photo, so they go white. */
.hero--media .btn--outline,
.hero--plain .btn--outline {
  color: #ffffff;
}

.hero--media .btn--ghost,
.hero--plain .btn--ghost {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

.btn.is-linkless {
  opacity: 0.85;
  cursor: default;
}

/* ------------------------------------------------------------- logo tile */
.logo-box {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  height: 100%;
}

.logo-box__link {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  flex: 1;
  min-height: 0;
}

.logo-box__frame {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 70px;
  border-radius: var(--radius);
  overflow: hidden;
}

.logo-box__frame--surface {
  background: var(--surface);
  border: 1px solid var(--border);
}

.logo-box__frame--soft {
  background: var(--accent-soft);
}

.logo-box__frame--dark {
  background: var(--brand-primary);
}

.logo-box__frame--none {
  background: transparent;
}

.logo-box__frame--pad-none { padding: 0; }
.logo-box__frame--pad-sm { padding: 8px; }
.logo-box__frame--pad-md { padding: 16px; }
.logo-box__frame--pad-lg { padding: 26px; }

.logo-box__frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  /* Never crop a logo — a wordmark and an emblem must both survive the tile. */
  object-fit: contain;
}

.logo-box__placeholder {
  display: grid;
  gap: 4px;
  place-items: center;
  color: var(--muted);
  font-size: 26px;
}

.logo-box__placeholder small {
  font-size: 12px;
}

.logo-box__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}

/* ----------------------------------------------------------- layout box */
.layout-box {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.layout-box--bordered {
  border: 1px solid var(--border);
}

.layout-box--bg-surface { background: var(--surface); }
.layout-box--bg-soft { background: var(--accent-soft); }
.layout-box--bg-brand { background: var(--brand-primary); color: var(--on-primary); }
.layout-box--bg-dark { background: var(--text); color: #ffffff; }
.layout-box--bg-none { background: transparent; }

.layout-box--bg-brand .prose,
.layout-box--bg-dark .prose,
.layout-box--bg-brand .icon-box__note,
.layout-box--bg-dark .icon-box__note,
.layout-box--bg-brand .icon-box__label,
.layout-box--bg-dark .icon-box__label,
.layout-box--bg-brand .block-heading,
.layout-box--bg-dark .block-heading {
  color: inherit;
}

.layout-box--pad-none { padding: 0; }
.layout-box--pad-sm { padding: 10px; }
.layout-box--pad-md { padding: 18px; }
.layout-box--pad-lg { padding: 28px; }

.layout-box--radius-none { border-radius: 0; }
.layout-box--radius-sm { border-radius: var(--radius-sm); }
.layout-box--radius-md { border-radius: var(--radius); }
.layout-box--radius-lg { border-radius: var(--radius-lg); }

.layout-box--gap-none > .canvas { --canvas-gap: 0px; }
.layout-box--gap-sm > .canvas { --canvas-gap: 8px; }
.layout-box--gap-lg > .canvas { --canvas-gap: 22px; }

.layout-box__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  flex: none;
}

.layout-box > .canvas {
  flex: 1;
  min-height: 0;
}

.layout-box__empty {
  display: grid;
  place-items: center;
  min-height: 80px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 14px;
}

/* --------------------------------------------------------- image titles */
.media-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  flex: none;
}

.image-box--radius-none .image-box__frame { border-radius: 0; }
.image-box--radius-sm .image-box__frame { border-radius: var(--radius-sm); }
.image-box--radius-lg .image-box__frame { border-radius: var(--radius-lg); }
.image-box--radius-pill .image-box__frame { border-radius: 999px; }

/* ==========================================================================
   Page-builder editor chrome
   ========================================================================== */
.history-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.history-bar__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-right: 4px;
}

/* ------------------------------------------------------- element library */
.element-library {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.element-library__group {
  display: grid;
  gap: 7px;
}

.element-library__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.element-library__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.element-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 9px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--page-bg);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: grab;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.element-chip:hover {
  border-color: var(--brand-accent);
  background: var(--surface);
}

.element-chip:active {
  cursor: grabbing;
  transform: scale(0.97);
}

.element-chip.is-suggested {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.element-chip__icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 12px;
}

.element-chip.is-suggested .element-chip__icon {
  border-color: var(--accent-line);
  color: var(--accent-ink, var(--brand-accent));
}

/* A canvas accepting a dragged element lights up its whole grid. */
.canvas--editing.is-drop-target,
.canvas--editing-nested.is-drop-target {
  outline: 2px dashed var(--brand-accent);
  outline-offset: -2px;
  background-color: var(--accent-soft);
}

body.is-placing-block .canvas--editing {
  border-color: var(--brand-accent);
}

/* ------------------------------------------------------- nested canvases */
.canvas--editing-nested {
  min-height: 90px;
  border-radius: var(--radius-sm);
}

.canvas--editing-nested > .canvas-block {
  position: relative;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 26px 10px 10px;
  overflow: hidden;
  animation: none;
}

.canvas--editing-nested > .canvas-block:hover {
  border-color: var(--accent-line);
}

.canvas--editing-nested > .canvas-block.is-selected {
  border-style: solid;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.canvas--editing-nested .block-toolbar {
  height: 24px;
  font-size: 11px;
}

.layout-box--editing {
  min-height: 100%;
}

.canvas-empty--nested {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 80px;
  color: var(--muted);
  font-size: 13px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}

.canvas-empty {
  grid-column: 1 / -1;
}

.block-toolbar__btn--wide {
  width: auto;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
}

/* -------------------------------------------------------- edit / preview */
.mode-toggle {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 99px;
  background: var(--page-bg);
  border: 1px solid var(--border);
}

.mode-toggle__btn {
  border: 0;
  background: none;
  padding: 5px 15px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.mode-toggle__btn.is-active {
  background: var(--brand-accent);
  color: var(--on-accent);
}

.mode-pane.is-hidden {
  display: none;
}

/* ----------------------------------------------------------- icon picker */
.icon-picker {
  display: grid;
  gap: 8px;
}

.icon-picker__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.icon-chip {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 16px;
}

.icon-chip:hover {
  border-color: var(--brand-accent);
}

.icon-chip.is-active {
  border-color: var(--brand-accent);
  background: var(--accent-soft);
}

.input--icon {
  max-width: 260px;
}

.range {
  width: 100%;
  accent-color: var(--brand-accent);
}

/* -------------------------------------------------------- gallery titles */
.thumb--titled {
  width: 132px;
}

.thumb__title {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--border);
  padding: 5px 7px;
  font: inherit;
  font-size: 12px;
  background: var(--surface);
  color: var(--text);
}

.thumb__title:focus {
  outline: 2px solid var(--brand-accent);
  outline-offset: -2px;
}

/* ==========================================================================
   Sample-layout picker
   ========================================================================== */
.template-picker__lead {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

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

.template-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.template-card:hover {
  border-color: var(--brand-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.template-card.is-suggested {
  border-color: var(--accent-line);
}

.template-card__frame {
  height: 170px;
  overflow: hidden;
  background: var(--page-bg);
  border-bottom: 1px solid var(--border);
  position: relative;
}

/* The preview is the real renderer at 1200px, scaled down — so a sample
   layout cannot look different from what choosing it produces. */
.template-card__preview {
  width: 1200px;
  transform: scale(0.208);
  transform-origin: top left;
  padding: 18px;
  pointer-events: none;
}

.template-card__blank {
  color: var(--muted);
  font-size: 22px;
}

.template-card__meta {
  display: grid;
  gap: 3px;
  padding: 12px 14px 14px;
}

.template-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.template-card__name {
  font-weight: 700;
  font-size: 16px;
}

.template-card__desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.template-picker__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

/* --------------------------------------------------------- brand controls */
.swatch-field__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.swatch-field__picker {
  width: 46px;
  height: 38px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}

.swatch-field__hex {
  max-width: 130px;
  text-transform: uppercase;
}

/* ==========================================================================
   Responsive behaviour for the new elements
   ========================================================================== */
@media (max-width: 900px) {
  /* Nested canvases stack with their parent, keeping reading order. */
  .canvas--nested {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }

  /* Excluded for the same reason as the top-level blocks above. */
  .canvas--nested > .canvas-block:not(.fit-slide__inner .canvas-block) {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .hero {
    padding: 32px 26px;
  }

  .hero--full {
    min-height: 420px;
  }

  .kpi-grid--fixed {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  }
}

@media (max-width: 640px) {
  .hero {
    padding: 26px 20px;
    border-radius: var(--radius);
  }

  .hero--sm,
  .hero--md { min-height: 200px; }

  .hero--lg,
  .hero--full { min-height: 300px; }

  .kpi-grid,
  .kpi-grid--fixed {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  }

  .kpi {
    padding: 14px 15px;
  }

  .button-row {
    width: 100%;
  }

  .btn--cta {
    flex: 1 1 auto;
    justify-content: center;
  }

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

/* ==========================================================================
   Small elements
   A logo or an icon may be one column wide and one row tall. At that size the
   block chrome has to get out of the way, or the toolbar is the whole element.
   ========================================================================== */
.canvas--editing .canvas-block.is-compact,
.canvas--editing-nested > .canvas-block.is-compact {
  padding: 6px;
  overflow: visible;
}

/* The toolbar floats above a compact block and only on hover, so a small logo
   shows as a small logo instead of as a title bar with a picture under it. */
.canvas-block.is-compact .block-toolbar {
  top: auto;
  bottom: calc(100% + 3px);
  height: 26px;
  width: max-content;
  min-width: 100%;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 8;
}

.canvas-block.is-compact:hover .block-toolbar,
.canvas-block.is-compact:focus-within .block-toolbar,
.canvas-block.is-compact.is-selected .block-toolbar {
  opacity: 1;
  pointer-events: auto;
}

/* Its label is noise at this size — the icon and the buttons are enough. */
.canvas-block.is-compact .block-toolbar__label {
  display: none;
}

.canvas-block.is-compact .canvas-block__size {
  display: none;
}

/* A logo tile scales with its block rather than holding a floor of its own,
   so shrinking the block genuinely shrinks the logo. */
.logo-box__frame {
  min-height: 28px;
}

.logo-box__frame--pad-md { padding: 12px; }
.logo-box__frame--pad-lg { padding: 20px; }

.logo-box__placeholder {
  font-size: 20px;
  line-height: 1.1;
}

/* Below this the "upload a logo" caption cannot fit; the glyph carries it. */
.canvas-block.is-compact .logo-box__placeholder small,
.canvas-block.is-compact .logo-box__title {
  display: none;
}

.canvas-block.is-compact .icon-box {
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* ==========================================================================
   Gallery: posters and titled images
   ========================================================================== */

/* Posters and certificates carry text to the edge — fit them whole instead of
   cropping them to a uniform grid. */
.gallery--contain .gallery__item img {
  object-fit: contain;
  background: var(--page-bg);
}

/*
 * A filename stays a hover affordance, but a title the admin typed is content:
 * it sits under its image permanently, because a projector audience has no
 * pointer to hover with.
 */
.gallery--titled .gallery__meta {
  position: static;
  opacity: 1;
  background: none;
  color: var(--muted);
  text-align: center;
  padding: 7px 4px 0;
  font-size: 12.5px;
  line-height: 1.35;
  display: block;
}

.gallery--titled .gallery__item {
  display: flex;
  flex-direction: column;
}

/* The right-aligned hero needs its gradient mirrored; a flat wash over the
   whole photograph was dimming the picture instead of backing the words. */
.hero--right .hero__scrim {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.3) 100%);
}

.hero--center .hero__scrim {
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.62) 100%);
}

/* ==========================================================================
   Fit to screen — a deck is paged, never scrolled
   The slide is laid out at a fixed nominal width and scaled to the space
   available, so a section looks identical on a laptop and on a projector and
   the presenter never has to reach for a scrollbar.
   ========================================================================== */
.shell--fit {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.shell--fit .main {
  min-height: 0;
  height: 100vh;
  overflow: hidden;
}

.stage--fit {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.fit-slide {
  position: absolute;
  inset: 0;
  display: grid;
  /* The slide is laid out at its full nominal size, which is wider than the
     frame, so there is no free space here for alignment to distribute — the
     centring is done by the translate in FitSlide instead. Anchoring to the
     content corner is what that translate measures from. */
  place-items: start;
  overflow: hidden;
  padding: 18px 20px;
}

.fit-slide__inner {
  transform-origin: top left;
  will-change: transform;
}

/* Inside the frame the slide takes the full nominal width — the frame, not the
   slide, is what limits the measure now. */
.fit-slide__inner .slide {
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 0;
}

/* The quick-add bar sits below the fitted slide at its own scale. */
.slide-tools--bar {
  flex: none;
  margin: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  background: var(--surface);
}

/* Presentation mode: the slide owns the whole screen, edge to edge. */
body.is-presenting .fit-slide {
  padding: 0;
}

/*
 * The padding must match the normal slide exactly. The layout pass measures
 * how many rows each block of text needs at one specific canvas width, and a
 * wider gutter here would rewrap that text onto an extra line with no row left
 * to put it on.
 */
body.is-presenting .fit-slide__inner .slide {
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 44px 48px 52px;
}

body.is-presenting .stage--fit {
  padding: 0;
}

/* A projector is 16:9; leave room for the deck controls at the bottom. */
body.is-presenting .shell--fit .main {
  height: 100vh;
}

@media (max-width: 860px) {
  /* Below the stacking breakpoint the nav becomes a strip and the slide needs
     to scroll again — scaling a full deck onto a phone would be unreadable. */
  .shell--fit,
  .shell--fit .main {
    height: auto;
    overflow: visible;
  }

  .stage--fit {
    position: static;
    overflow: visible;
    min-height: 60vh;
  }

  .fit-slide {
    position: static;
    padding: 16px;
  }

  .fit-slide__inner {
    width: 100% !important;
    transform: none !important;
  }
}

/*
 * Inside the fit frame the grid rows are a fixed height rather than a minimum.
 *
 * With `auto` tracks a photograph sizes itself to its natural aspect ratio,
 * because `height: 100%` has nothing definite to resolve against — so the row
 * silently grows, the slide ends up hundreds of pixels taller than the layout
 * says it is, and the scale that was calculated for it no longer fits. Fixed
 * tracks make a section's height exactly what its rows declare, which is what
 * lets the whole slide be scaled onto one screen with confidence.
 *
 *
 * Fixed tracks mean a block's reserved rows are the whole story, so anything
 * that reflows its content taller spills outside the slide instead of pushing
 * the card down. That is why the viewport breakpoints are kept out of the frame
 * further down: the slide is this one width whatever the window is.
 *
 * Fixed only while the slide is actually being scaled, though — below the 861px
 * cutoff the fit is switched off and the slide becomes a scrolling responsive
 * page, where a fixed row would clip content that is no longer scaled to fit.
 */
@media (min-width: 861px) {
  .fit-slide__inner .canvas {
    grid-auto-rows: var(--row-height, 28px);
  }
}

.fit-slide__inner .canvas-block {
  min-height: 0;
}

/* Media is clipped to its box — that is what "fill the frame" means for a
   photograph. Text is left visible: if a measurement is ever a pixel short,
   the words should still be readable rather than sliced. */
.fit-slide__inner .canvas-block--image,
.fit-slide__inner .canvas-block--video,
.fit-slide__inner .canvas-block--profile,
.fit-slide__inner .canvas-block--logo,
.fit-slide__inner .canvas-block--hero,
.fit-slide__inner .canvas-block--box {
  overflow: hidden;
}

/* Media fills the box it is given rather than dictating it. */
.fit-slide__inner .image-box__frame,
.fit-slide__inner .image-box__frame img,
.fit-slide__inner .logo-box__frame,
.fit-slide__inner .video-box__frame {
  min-height: 0;
}

.fit-slide__inner .image-box,
.fit-slide__inner .logo-box,
.fit-slide__inner .video-box,
.fit-slide__inner .profile-box {
  height: 100%;
}

/* ==========================================================================
   Type inside the fit frame is fixed, not viewport-relative
   ==========================================================================
   The slide is a fixed 1600px design that gets scaled as one piece, so a font
   sized in `vw` would change with the browser window *inside* a canvas whose
   row heights were measured once. Text that grows after its rows were measured
   spills over the element below it — which is exactly what happened between a
   1400px measuring pass and a 1920px projector.
   Each value below is what its clamp() resolves to at the 1600px design width,
   so nothing moves between the editor, the laptop and the projector; only the
   scale factor changes.
   ========================================================================== */
.fit-slide__inner .slide__title {
  font-size: 46px;
}

.fit-slide__inner .hero__heading {
  font-size: 52px;
}

.fit-slide__inner .hero__subheading {
  font-size: 21px;
}

.fit-slide__inner .kpi__value {
  font-size: 44px;
}

.fit-slide__inner .stat__value {
  font-size: 44px;
}

/*
 * Presentation mode must not resize anything either. Those rules date from when
 * the slide was a scrolling page; now that it is scaled to fit, they would
 * enlarge the type a second time.
 */
body.is-presenting .fit-slide__inner .slide__title {
  font-size: 46px;
}

body.is-presenting .fit-slide__inner .prose,
body.is-presenting .fit-slide__inner .bullets li {
  font-size: 1em;
}

body.is-presenting .fit-slide__inner .stat__value {
  font-size: 44px;
}

body.is-presenting .fit-slide__inner .canvas {
  --canvas-gap: 16px;
}

body.is-presenting .fit-slide__inner .gallery {
  --gap: 18px;
}

body.is-presenting .fit-slide__inner .profile-box__frame {
  max-width: none;
}

/* ==========================================================================
   The whole block is a drag handle
   Reaching for the little grip is a learned behaviour; grabbing the thing you
   want to move is the instinct. The block itself now drags, so the cursor has
   to say so.
   ========================================================================== */
.canvas--editing .canvas-block,
.canvas--editing-nested > .canvas-block {
  cursor: grab;
}

.canvas--editing .canvas-block.is-moving,
.canvas--editing-nested > .canvas-block.is-moving {
  cursor: grabbing;
}

/* Controls inside a block keep their own cursor — they are still clickable,
   because a press only becomes a drag once the pointer has travelled. */
.canvas--editing .canvas-block button,
.canvas--editing .canvas-block a,
.canvas--editing-nested > .canvas-block button {
  cursor: pointer;
}

.canvas--editing .resize-handle {
  cursor: nwse-resize;
}

.canvas--editing .resize-handle--e { cursor: ew-resize; }
.canvas--editing .resize-handle--s { cursor: ns-resize; }

/* A newly placed element announces itself, so adding to a full section does
   not feel like nothing happened. */
@keyframes block-landed {
  0% { box-shadow: 0 0 0 3px var(--brand-accent); }
  100% { box-shadow: 0 0 0 3px transparent; }
}

.canvas-block.is-landed {
  animation: block-landed 1.2s ease-out 1;
}

/* ==========================================================================
   The fitted slide is one fixed width, so the window's breakpoints stop here

   Every breakpoint in this file answers the size of the window. The fitted
   slide does not: above the 861px cutoff it is laid out at the nominal width
   and scaled to the frame, so it is 1600px wide on a 1000px laptop just as it
   is on a projector. Left alone, a narrow window switched the slide's own
   interior to the narrow rules — a gallery dropped from five across to three,
   blocks stacked into one column — while the slide stayed 1600px wide. The
   reflowed content then outgrew the rows its blocks reserve, and because those
   rows are fixed here it painted outside the card rather than pushing it taller.

   So the wide layout is restored for the slide's interior, at the one width the
   slide is ever laid out at. Below the cutoff none of this applies: the fit is
   off, the slide is a normal responsive page, and the breakpoints above are
   exactly right for it again.
   ========================================================================== */
@media (min-width: 861px) {
  .fit-slide__inner .slide {
    padding: 44px 48px 52px;
  }

  .fit-slide__inner .canvas,
  .fit-slide__inner .canvas--nested {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .fit-slide__inner .gallery__item {
    width: calc((100% - 4 * var(--gap)) / 5);
  }

  .fit-slide__inner .gallery--count-1 .gallery__item,
  .fit-slide__inner .gallery--count-2 .gallery__item {
    width: calc((100% - var(--gap)) / 2);
  }

  .fit-slide__inner .gallery--count-3 .gallery__item,
  .fit-slide__inner .gallery--count-4 .gallery__item {
    width: calc((100% - 2 * var(--gap)) / 3);
  }

  .fit-slide__inner .hero {
    padding: 44px 48px;
  }

  .fit-slide__inner .hero--full {
    min-height: min(72vh, 620px);
  }

  .fit-slide__inner .kpi-grid--fixed {
    grid-template-columns: repeat(var(--kpi-columns, 3), minmax(0, 1fr));
  }

  .fit-slide__inner .image-box__frame {
    min-height: 140px;
  }

  .fit-slide__inner .video-box__frame {
    min-height: 160px;
  }
}

/* Below the cutoff the fit is off, so the slide stacks like any other page. The
   two rules this restores had to exclude the frame by selector rather than be
   overridden here, because their !important outranks the inline grid placement
   the canvas puts on each block. */
@media (max-width: 860px) {
  .fit-slide__inner .canvas-block {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}

/* ==========================================================================
   Leader hero — the editorial opening spread for a founder or CEO.
   Type on the left, portrait on the right with the surname ghosted behind it
   and pill tags floating over the shoulders. Brand tokens throughout, so it
   reads correctly in either organization's palette.
   ========================================================================== */
.leader-hero {
  /* The block owns an editorial ground of its own rather than the page white,
     because the portrait is a cutout that has to sit *in* something. Accent
     comes from the colour the organization leads with — the same token the nav
     uses — so this reads green for Technical Hub and orange for Torii. */
  --leader-ground: #f5f2ec;
  --leader-ink: #201e1d;
  --leader-accent: var(--nav-accent, var(--brand-accent));
  --leader-accent-ink: var(--nav-accent-ink, var(--accent-ink));
  /* Translucent derivatives of whatever the lead colour turned out to be. */
  --leader-rim: color-mix(in srgb, var(--leader-accent) 55%, transparent);
  --leader-glow: color-mix(in srgb, var(--leader-accent) 22%, transparent);
  --leader-tail: color-mix(in srgb, var(--leader-accent) 55%, transparent);

  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 860px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--leader-ground);
  color: var(--leader-ink);
}

/* The composition, held to a shape the portrait can be laid out against.
   Presenting stretches the slide to the screen, and the cutout is `contain`-fitted
   into a column that does not widen with it — so past roughly 1.43 the column
   outgrows the cutout's own ratio, `contain` flips to fitting by width, and the
   figure shrinks and slides down the column while the pills, anchored to the
   column, stay where they were.

   1000px is the 16:10 floor written as a length: the slide is laid out at a
   nominal 1600 wide whatever the screen (FitSlide scales the whole thing
   afterwards), so 1600 ÷ 1.6 is a constant here. It has to be a length and not
   `aspect-ratio` — an aspect against the definite 1600 width would also become
   the stage's *intrinsic* height, and FitSlide measures exactly that to decide
   whether the slide can fill the display. A 1000px intrinsic against a 900px
   16:9 screen reads as overflow, and the slide letterboxes itself on the one
   shape it was drawn for. min-height keeps that measurement where it was.

   The floor is inert at 16:9 and at 16:10 — the two shapes a deck is shown at —
   and on anything taller the stage centres itself while the block's cream
   carries on past it, so there is no band to see. */
.leader-hero__stage {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
  min-height: 860px;
  max-height: 1000px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
}

.leader-hero__pane {
  position: relative;
  z-index: 2;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 48px 24px 48px 56px;
  min-width: 0;
}

/* ------------------------------------------------------------- eyebrow */
.leader-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  animation: block-in 0.6s cubic-bezier(0.22, 0.68, 0, 1) 0.05s both;
}

/* 0.4 alpha measured 2.4:1 on the cream ground — far under 4.5:1 for a label
   this small. 0.66 lands at 5.1:1 and still reads as the quiet tier. */
.leader-hero__index {
  color: rgba(32, 30, 29, 0.66);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.34em;
}

.leader-hero__rule {
  width: 44px;
  height: 1.5px;
  background: rgba(32, 30, 29, 0.25);
}

/* 11.5px uppercase is small text, so this takes the ink derivative — the raw
   accent measures 3.2:1 on the cream ground and fails. */
.leader-hero__kicker {
  color: var(--leader-accent-ink);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- name
   The name signs itself: the outline strokes on, then the solid letterform
   fades in over it. Each line is an SVG whose viewBox is fitted to its glyphs
   at runtime (see LeaderHero.js), so the two lines share one cap height and a
   substituted display face cannot crop the surname. Height drives the size;
   width follows from the viewBox ratio. */
.leader-hero__name {
  display: grid;
  gap: 2px;
  justify-items: start;
}

.leader-hero__name-line {
  max-width: 100%;
  line-height: 0;
}

/* A flat size, not a viewport clamp. The slide is laid out at a nominal 1600 and
   then scaled as a whole, so `vw` here reads the real window rather than the
   canvas and quietly resized the name between screens — 58px in a small window,
   86px on a projector, against spacing that never moved. 90px is the old ceiling
   plus the 4px asked for, and now it is the size everywhere. */
.leader-hero__draw {
  display: block;
  height: 90px;
  width: auto;
  max-width: 100%;
  overflow: visible;
}

.leader-hero__draw text {
  font-family: 'Agency FB', 'Oswald', 'Saira Condensed', 'Arial Narrow', sans-serif;
  font-weight: 700;
}

/* Dashing the outline shorter than the glyph run makes several strokes travel
   at once, which is what gives it the handwritten rather than plotted feel. */
.leader-hero__draw-stroke {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  stroke-linejoin: round;
  stroke-linecap: round;
  animation: leader-draw 1.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.leader-hero__draw-fill {
  opacity: 0;
  animation: leader-draw-fill 0.9s ease both;
}

@keyframes leader-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes leader-draw-fill {
  to {
    opacity: 1;
  }
}

/* ------------------------------------------------------------- the copy */
.leader-hero__tagline {
  margin: 6px 0 0;
  max-width: 32ch;
  color: rgba(32, 30, 29, 0.85);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  animation: block-in 0.7s cubic-bezier(0.22, 0.68, 0, 1) 0.42s both;
}

.leader-hero__body {
  margin: 0;
  max-width: 46ch;
  color: rgba(32, 30, 29, 0.65);
  font-size: 15.5px;
  line-height: 1.75;
  animation: block-in 0.7s cubic-bezier(0.22, 0.68, 0, 1) 0.52s both;
}

/* ------------------------------------------------------------- socials */
.leader-hero__follow {
  display: grid;
  gap: 12px;
  margin-top: 8px;
  animation: block-in 0.7s cubic-bezier(0.22, 0.68, 0, 1) 0.62s both;
}

.leader-hero__follow-label {
  color: rgba(32, 30, 29, 0.66);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.leader-hero__socials {
  display: flex;
  align-items: center;
  gap: 12px;
}

.leader-hero__social {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(32, 30, 29, 0.12);
  border-radius: 999px;
  background: #ffffff;
  color: #201e1d;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.leader-hero__social:hover {
  transform: translateY(-2px);
  border-color: var(--leader-accent);
  background: var(--leader-accent);
  color: var(--nav-on-accent, #ffffff);
}

/* ------------------------------------------------------------- portrait */
/* No overflow clip here: the pills sit deliberately outside the column and the
   figure stands taller than it, and .leader-hero already bounds the block.
   The right gutter is what buys the pills their overhang — they anchor to this
   box, and .leader-hero clips, so without it the ones at `right: -1%` lose
   their rounded end to the block edge. Margin rather than padding: an
   absolutely positioned child measures from the padding box, which padding
   would not move. Kept off the grid so the left pane never rewraps. */
.leader-hero__figure {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  margin-right: 48px;
}

/* Ghosted surname watermark — spans the block edge to edge and sits behind both
   columns. The size is fitted to the block in LeaderHero.js rather than clamped
   to the viewport, which is what lets it reach both edges at any slide width. */
/* Centred both ways by flex on a full-bleed overlay, not by a translate —
   block-in animates transform to `none` and would wipe a centring transform. */
.leader-hero__watermark {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0.78;
  pointer-events: none;
  animation: block-in 1.1s ease 0.3s both;
}

.leader-hero__watermark-text {
  color: transparent;
  background: linear-gradient(180deg, rgba(32, 30, 29, 0.07), rgba(32, 30, 29, 0.025));
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 200px; /* probe value; replaced once the block is measured */
  font-weight: 800;
  line-height: 0.78;
  font-family: 'Playfair Display', 'Georgia', serif;
  white-space: nowrap;
}

/* The figure and everything shaped by it. `contain` + `bottom center` must match
   the mask sizing on every layer below, or the rim light slides off the shoulder. */
.leader-hero__portrait-wrapper {
  position: absolute;
  left: 50%;
  bottom: -3%;
  transform: translateX(-50%);
  /* Height drives the size, deliberately. A width-based `min()` flips between
     its two branches as the slide narrows, which resizes the figure and drops
     the head to a different line on every screen. Sizing off the stage's own
     height keeps him at one place in the frame everywhere.
     100.5% puts the crown of the head at 3.96% of the stage: the crown sits
     1.43% into the asset, so crown = 103% (the bottom bleed) − 100.5% × 98.57%.
     Raised from 96.2%, which sat him 2.9% lower — a head's worth of dead cream
     above him that the eye read as the figure sagging out of the frame.
     Width is 138% purely so it can never be the binding dimension — at this
     height the photo is as wide as the column, and a 100% box would sit exactly
     on the boundary where `contain` switches to fitting by width. It has to
     clear 130% because the stage's 16:10 floor is where the column is at its
     tallest relative to its width, and there the photo wants 129.5%. */
  width: 138%;
  height: 100.5%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: leader-portrait-in 1s cubic-bezier(0.22, 0.68, 0, 1) 0.3s both;
}

.leader-hero__portrait {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  filter: contrast(1.04) saturate(1.03);
}

/* A cutout dropped straight onto a flat ground reads as a sticker. These layers
   reuse the portrait's own alpha as a mask so each one is clipped to the
   silhouette. */
.leader-hero__layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: var(--portrait);
  mask-image: var(--portrait);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: bottom center;
  mask-position: bottom center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Two ground-coloured halos, scaled a hair past the figure and blurred, so the
   cut edge dissolves into the page instead of ending on a hard line. */
.leader-hero__feather--tight {
  transform: scale(1.016);
  background: var(--leader-ground);
  filter: blur(2.5px);
  opacity: 0.95;
}

.leader-hero__feather--soft {
  transform: scale(1.03);
  background: var(--leader-ground);
  filter: blur(14px);
  opacity: 0.6;
}

/* Rim light: accent raking across one shoulder, warm bounce on the other.
   Screen-blended so it lifts the highlights and leaves the midtones alone. */
.leader-hero__rim {
  mix-blend-mode: screen;
  opacity: 0.5;
  background:
    linear-gradient(105deg, var(--leader-rim) 0%, transparent 38%),
    linear-gradient(255deg, rgba(255, 214, 170, 0.4) 0%, rgba(255, 214, 170, 0) 34%);
}

/* Grounds the figure — without it the suit floats off the bottom edge. */
.leader-hero__shade {
  mix-blend-mode: multiply;
  opacity: 0.35;
  background: linear-gradient(180deg, rgba(32, 30, 29, 0) 55%, rgba(32, 30, 29, 0.5) 100%);
}

.leader-hero__glow {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: 78%;
  height: 62%;
  border-radius: 999px;
  background: radial-gradient(closest-side, var(--leader-glow), transparent 70%);
  filter: blur(28px);
  pointer-events: none;
}

@keyframes leader-portrait-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px) scale(1.02);
  }
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}

.leader-hero__portrait-empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--muted);
  font-size: 13px;
}

/* ----------------------------------------------------------------- tags */
.leader-hero__tag {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid rgba(32, 30, 29, 0.12);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(32, 30, 29, 0.12);
  color: #201e1d;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  animation:
    leader-tag-in 0.7s cubic-bezier(0.22, 0.68, 0, 1) var(--tag-delay, 1s) both,
    leader-float 5s ease-in-out calc(var(--tag-delay, 1s) + 0.7s) infinite;
}

.leader-hero__tag .ic {
  color: var(--leader-accent-ink);
}

.leader-hero__tag--solid {
  border-color: var(--leader-accent);
  background: var(--leader-accent);
  color: var(--nav-on-accent, #ffffff);
}

.leader-hero__tag--solid .ic {
  color: currentColor;
}

/* The tail fades away from the pill and toward the figure it points at, so its
   direction flips with the side the pill sits on. */
.leader-hero__tag-tail {
  flex: none;
  width: 26px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--leader-tail), transparent);
}

.leader-hero__tag--right .leader-hero__tag-tail {
  background: linear-gradient(270deg, var(--leader-tail), transparent);
}

.leader-hero__tag--solid .leader-hero__tag-tail {
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
}

@keyframes leader-tag-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes leader-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

/* The global reduce rule collapses durations but leaves delays intact, and this
   block stages itself out to 1.9s — long enough that the name would sit blank
   while someone waited on it. Land everything at once instead. */
@media (prefers-reduced-motion: reduce) {
  .leader-hero *,
  .leader-hero *::before,
  .leader-hero *::after {
    animation-delay: 0s !important;
  }

  .leader-hero__draw-stroke {
    stroke-dashoffset: 0;
  }

  .leader-hero__draw-fill {
    opacity: 1;
  }

  .leader-hero__tag {
    animation: none !important;
  }
}

/* The block is the whole page, so it owns the canvas cell outright. */
.canvas-block--leader-hero {
  min-height: 860px !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  grid-row: 1 / -1 !important;
}

.slide--hero .leader-hero {
  min-height: 860px !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  border-radius: 0 !important;
}

/* Stacked, off the slide canvas — the aspect floor is a presenting concern, so
   the stage gives it up here and takes its height from the stacked content. */
@media (max-width: 900px) {
  .leader-hero:not(.fit-slide__inner .leader-hero) .leader-hero__stage {
    grid-template-columns: minmax(0, 1fr);
    aspect-ratio: auto;
    height: 100%;
  }
  .leader-hero:not(.fit-slide__inner .leader-hero) .leader-hero__pane {
    padding: 30px 24px;
  }
  .leader-hero:not(.fit-slide__inner .leader-hero) .leader-hero__figure {
    min-height: 380px;
  }
}

/* ==========================================================================
   Milestone timeline — a history the presenter walks one stop at a time.
   The year is an odometer: only the characters that change roll (see
   MilestoneTimeline.js). Every size here is a flat nominal value, never a
   viewport unit — the slide is laid out at 1600 and scaled as a whole, so a
   `vw` would read the window and resize the type between screens.
   ========================================================================== */
.milestones {
  --ms-lead: var(--nav-accent, var(--brand-accent));
  --ms-ink: var(--nav-accent-ink, var(--accent-ink));
  --ms-line: color-mix(in srgb, var(--ms-lead) 22%, transparent);
  /* The year is the slide. At 148px it read as a caption sitting in a white
     field; the content on a stop is only ever a title and a few lines, so if
     the odometer does not carry the page nothing does. */
  --od-cell: 300px;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 860px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
}

/* Same floor as the leader hero, and for the same reason: a length rather than
   an aspect, because an aspect against the definite 1600 width also becomes the
   intrinsic height FitSlide measures to decide whether the slide may fill the
   display — and a 1000px intrinsic on a 900px screen letterboxes the one shape
   the deck was drawn for. */
/* A column rather than three even rows. A stop carries a title and a handful of
   lines, so there is always slack on a 16:9 slide — centring the middle row
   split that slack in two and hung the composition in the middle of nowhere.
   Anchoring the content near the top and letting `margin-top: auto` push the
   rail to the floor puts all the air in one place, below the reading, where it
   reads as margin instead of as a gap. */
.milestones__inner {
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
  min-height: 860px;
  max-height: 1000px;
  display: flex;
  flex-direction: column;
  padding: 44px 64px 40px;
}

/* ------------------------------------------------------------------- head */
.milestones__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 6px 16px;
  animation: block-in 0.6s cubic-bezier(0.22, 0.68, 0, 1) 0.05s both;
}

.milestones__kicker {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ms-ink);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.milestones__heading {
  grid-column: 1;
  margin: 6px 0 0;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Tabular, so the counter does not jitter sideways as the stop number changes. */
.milestones__counter {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ stage */
.milestones__stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 56px;
  margin-top: 46px;
  min-height: 0;
}

/* --------------------------------------------------------------- odometer */
.milestones__odometer {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

/* The window a character rolls through. The clip is what makes it a counter
   rather than a list. */
.milestones__cell {
  position: relative;
  display: block;
  height: var(--od-cell);
  overflow: hidden;
}

.milestones__strip {
  display: block;
  will-change: transform;
}

.milestones__glyph {
  display: block;
  height: var(--od-cell);
  line-height: var(--od-cell);
  /* A fixed advance, so a 1 occupies the same cell as an 8 and the year does
     not breathe in and out as it counts. */
  min-width: 0.58em;
  text-align: center;
  color: var(--ms-ink);
  font-family: 'Agency FB', 'Oswald', 'Saira Condensed', 'Arial Narrow', sans-serif;
  font-size: 340px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* ----------------------------------------------------------------- detail */
.milestones__detail {
  min-width: 0;
  border-left: 2px solid var(--ms-line);
  padding-left: 40px;
}

.milestones__detail.is-in .milestones__title {
  animation: block-in 0.5s cubic-bezier(0.22, 0.68, 0, 1) both;
}

.milestones__title {
  margin: 0 0 20px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

/* No ch cap: the column is already bounded by the odometer beside it, and a
   46ch cap on top of that left the longest line stopping two-thirds across an
   otherwise empty half of the slide. */
.milestones__bullets {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.milestones__bullets li {
  position: relative;
  padding-left: 28px;
  color: var(--muted);
  font-size: 18.5px;
  line-height: 1.5;
}

.milestones__detail.is-in .milestones__bullets li {
  animation: block-in 0.5s cubic-bezier(0.22, 0.68, 0, 1) var(--bullet-delay, 0.12s) both;
}

/* A drawn rule rather than a disc: the accent is reserved for what is active,
   and a row of accent discs spends it on punctuation. */
.milestones__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 2px;
  background: var(--ms-lead);
}

/* ------------------------------------------------------------------- rail */
.milestones__foot {
  display: grid;
  gap: 10px;
  margin-top: auto;
  animation: block-in 0.7s cubic-bezier(0.22, 0.68, 0, 1) 0.5s both;
}

/* The deck's own control pill is fixed to the bottom of the *viewport* and lands
   squarely on the middle of the rail, over dots that are meant to be clickable.
   Every other block can be sat on — this one cannot. Clearance is generous
   because the pill is measured in screen pixels while this is measured in slide
   pixels: the slide is scaled, so the overlap grows as the scale shrinks, and
   100px covers it down to the smallest scale the deck is shown at. */
body.is-presenting .milestones__inner {
  padding-bottom: 100px;
}

.milestones__rail {
  position: relative;
  display: flex;
  align-items: center;
  height: 22px;
}

.milestones__rail-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border);
}

.milestones__rail-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ms-lead);
  transition: width 0.55s cubic-bezier(0.22, 0.68, 0, 1);
}

/* space-between rather than a fixed step, so the first and last dot land
   exactly on the ends of the track whatever the stop count. */
.milestones__dots {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.milestones__dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.milestones__dot-tick {
  display: block;
  width: 10px;
  height: 10px;
  border: 2px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  transition: transform 0.35s cubic-bezier(0.22, 0.68, 0, 1), background 0.35s ease,
    border-color 0.35s ease;
}

.milestones__dot:hover .milestones__dot-tick {
  border-color: var(--ms-lead);
}

.milestones__dot.is-past .milestones__dot-tick {
  border-color: var(--ms-lead);
  background: var(--ms-lead);
}

.milestones__dot.is-active .milestones__dot-tick {
  border-color: var(--ms-lead);
  background: var(--ms-lead);
  transform: scale(1.85);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ms-lead) 16%, transparent);
}

.milestones__rail-labels {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.milestones--empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 13px;
}

/* The block is the whole page, so it owns the canvas cell outright. */
.canvas-block--milestone-timeline {
  min-height: 860px !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  grid-row: 1 / -1 !important;
}

.slide--hero .milestones {
  min-height: 860px !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  border-radius: 0 !important;
}

/* The staged entrance runs out to ~1s; landing it at once beats holding a blank
   panel in front of someone who asked for less motion. The odometer reads the
   same query in JS and snaps rather than rolling. */
@media (prefers-reduced-motion: reduce) {
  .milestones *,
  .milestones *::before,
  .milestones *::after {
    animation-delay: 0s !important;
    transition: none !important;
  }
}

@media (max-width: 900px) {
  .milestones:not(.fit-slide__inner .milestones) .milestones__inner {
    max-height: none;
    padding: 28px 24px;
  }
  .milestones:not(.fit-slide__inner .milestones) .milestones__stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .milestones:not(.fit-slide__inner .milestones) .milestones__detail {
    border-left: 0;
    padding-left: 0;
  }
}

/* ==========================================================================
   Milestone timeline — dark variant.

   A deliberate departure from the house rules, at the user's direction: this
   block carries a photographic ground, a scrim and a drifting sky, where the
   rest of the portal is white surfaces and flat colour. Everything below is
   scoped under `.milestones--dark` so none of it can leak into another block.
   ========================================================================== */
.milestones--dark {
  --ms-ink: #ffffff;
  --ms-line: rgba(255, 255, 255, 0.22);
  /* Smaller than the light variant's 300px. Boxed digits carry their own border,
     padding and shadow, so the same cell height reads a great deal heavier —
     at 300 the plates ran into the heading above them. */
  --od-cell: 216px;
  background: #05070d;
  color: #ffffff;
  isolation: isolate;
}

/* -------------------------------------------------------------- the ground */
.milestones__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.milestones__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  /* Pushed down and desaturated so it reads as a ground rather than as a
     picture competing with the year sitting on top of it. */
  filter: saturate(0.62) brightness(0.52) contrast(1.05);
}

/* The scrim is the one gradient in the product. A photograph has no contract
   with the type over it — this one runs from near-solid at the edges, where the
   kicker and the rail sit, to merely dark at the centre, so the crowd still
   reads while every piece of text clears 4.5:1. */
/* Close to flat, and dark. An earlier pass lightened the middle to let the crowd
   through, which put the brightest, busiest part of the photograph directly
   behind the reading and left the top reading as plain black — the picture
   fought the type and lost the balance of the field. A near-even veil keeps the
   crowd legible as texture everywhere and gives every piece of text the same
   ground to sit on. The ends are lifted only enough to seat the kicker and the
   rail. */
.milestones__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(5, 7, 13, 0.9) 0%, rgba(5, 7, 13, 0.74) 22%,
      rgba(5, 7, 13, 0.72) 70%, rgba(5, 7, 13, 0.92) 100%);
}

/* ----------------------------------------------------------------- the sky */
.milestones__sky {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

/* Two slow clouds of brand colour. Long, co-prime durations so the pair never
   settles into a visible loop over the length of a talk. */
.milestones__nebula {
  position: absolute;
  border-radius: 999px;
  filter: blur(90px);
  opacity: 0.5;
}

.milestones__nebula--a {
  top: -18%;
  left: -10%;
  width: 780px;
  height: 620px;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--ms-lead) 62%, transparent), transparent 72%);
  animation: ms-drift-a 47s ease-in-out infinite;
}

.milestones__nebula--b {
  right: -14%;
  bottom: -22%;
  width: 900px;
  height: 700px;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--brand-secondary, #71bd1f) 46%, transparent), transparent 72%);
  animation: ms-drift-b 61s ease-in-out infinite;
}

@keyframes ms-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(90px, 60px, 0) scale(1.14); }
}

@keyframes ms-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); }
  50%      { transform: translate3d(-110px, -70px, 0) scale(1); }
}

/* Each field holds one seeded dot whose box-shadow paints the rest. The tile is
   drawn twice, one span apart, so translating by exactly one span and starting
   over is seamless — a plain loop with no jump to hide. */
.milestones__star-field {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.milestones__stars {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 999px;
  background: transparent;
}

.milestones__star-field--far .milestones__stars {
  animation: ms-stars 150s linear infinite;
  opacity: 0.55;
}

.milestones__star-field--mid .milestones__stars {
  animation: ms-stars 96s linear infinite;
  opacity: 0.75;
}

/* The near layer twinkles as well as drifts; the far ones do not, because a
   whole sky pulsing at once looks like a rendering fault rather than weather. */
.milestones__star-field--near .milestones__stars {
  animation: ms-stars 62s linear infinite, ms-twinkle 5.5s ease-in-out infinite;
}

@keyframes ms-stars {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, calc(-1 * var(--star-span)), 0); }
}

@keyframes ms-twinkle {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 0.5; }
}

/* ------------------------------------------------------ content over it all */
.milestones--dark .milestones__inner {
  position: relative;
  z-index: 3;
}

/* Centred, as asked. `margin: auto 0` on a flex item splits the free space
   evenly above and below, so the stage sits exactly between the head and the
   rail whatever the slide's height. On the white variant this left a void at
   both ends; over a photograph there is no void to leave — the ground carries
   the whole field, so the composition belongs in the middle of it. */
.milestones--dark .milestones__stage {
  margin: auto 0;
  align-content: center;
}

.milestones--dark .milestones__foot {
  margin-top: 0;
}

.milestones--dark .milestones__kicker {
  color: #ffffff;
}

.milestones--dark .milestones__kicker .ic {
  color: var(--brand-accent);
}

.milestones--dark .milestones__heading,
.milestones--dark .milestones__title {
  color: #ffffff;
}

.milestones--dark .milestones__counter,
.milestones--dark .milestones__rail-labels {
  color: rgba(255, 255, 255, 0.72);
}

.milestones--dark .milestones__bullets li {
  color: rgba(255, 255, 255, 0.86);
}

.milestones--dark .milestones__bullets li::before {
  background: var(--brand-accent);
}

.milestones--dark .milestones__detail {
  border-left-color: rgba(255, 255, 255, 0.22);
}

/* --------------------------------------------------------- boxed odometer */
/* The year in cells, after the "SINCE 2016" plate in the photograph. The box is
   the cell that already clips the roll, so it costs nothing structurally — it
   just becomes visible. */
.milestones--dark .milestones__odometer {
  gap: 14px;
}

.milestones--dark .milestones__cell {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 22px 48px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  padding: 0 10px;
}

.milestones--dark .milestones__glyph {
  color: #ffffff;
  font-size: 246px;
  min-width: 0.66em;
  text-shadow: 0 4px 26px rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------------------------- rail, dark */
.milestones--dark .milestones__rail-track {
  background: rgba(255, 255, 255, 0.2);
}

.milestones--dark .milestones__rail-fill {
  background: var(--brand-accent);
}

.milestones--dark .milestones__dot-tick {
  border-color: rgba(255, 255, 255, 0.38);
  background: transparent;
}

.milestones--dark .milestones__dot.is-past .milestones__dot-tick,
.milestones--dark .milestones__dot.is-active .milestones__dot-tick {
  border-color: var(--brand-accent);
  background: var(--brand-accent);
}

.milestones--dark .milestones__dot.is-active .milestones__dot-tick {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-accent) 26%, transparent);
}

.milestones--dark .milestones__dot:hover .milestones__dot-tick {
  border-color: var(--brand-accent);
}

/* Focus has to be visible: the block takes a tabindex so it can receive the
   wheel gesture, which makes it a stop on the keyboard path. */
.milestones:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: -4px;
}

/* A drifting sky is exactly the motion someone disabling animation is asking to
   be rid of. The ground and the scrim stay; only the movement stops. */
@media (prefers-reduced-motion: reduce) {
  .milestones__nebula,
  .milestones__stars {
    animation: none !important;
  }
}

/* ==========================================================================
   Leadership panels — a wall of chapters that open one at a time.

   Ported from a React sketch. Sizes are flat nominal values: the slide is laid
   out at 1600 and scaled as a whole, so the original's `vh`/`vw` would have
   measured the window instead of the canvas. The remote font import is gone too
   — nothing is fetched at presentation time.
   ========================================================================== */
.lj-root {
  --lj-ink: #0e1512;
  --lj-paper: #f7f8f4;
  --lj-line: #e4e7e0;

  position: relative;
  height: 100%;
  min-height: 860px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--lj-ink);
  color: var(--lj-ink);
}

/* ------------------------------------------------------------ hero overlay */
/* Sits over the unopened wall and steps aside the moment a chapter is chosen —
   the panels are the content; this is only the way in. */
.lj-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: min(72%, 720px);
  padding: 44px;
  color: #ffffff;
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.lj-root.has-open .lj-overlay {
  opacity: 0;
  transform: translateY(-8px);
}

.lj-warp {
  width: 100%;
  height: 200px;
}

.lj-warp-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.lj-warp-text {
  font-family: 'Agency FB', 'Oswald', 'Saira Condensed', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: 74px;
  letter-spacing: -1px;
  fill: #ffffff;
}

.lj-split {
  display: inline-block;
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 2px solid rgba(255, 255, 255, 0.55);
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

.lj-char {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  transform: translateY(26px);
  animation: lj-char 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes lj-char {
  to { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------- the wall */
.lj-rail {
  display: flex;
  height: 100%;
  width: 100%;
}

.lj-card {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 66px;
  overflow: hidden;
  background: var(--accent);
  transition: flex-grow 0.55s cubic-bezier(0.6, 0.05, 0.2, 1);
}

.lj-card.is-open { flex-grow: 16; }
.lj-card.is-closed { flex-grow: 1; cursor: pointer; }
.lj-card.is-closed:hover { filter: brightness(1.07); }

/* ------------------------------------------------------------------ spine */
.lj-spine {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  padding: 24px 0;
  border: 0;
  background: transparent;
  color: var(--on);
  cursor: pointer;
}

.lj-root.all-closed .lj-spine { padding-bottom: 36px; }
.lj-card.is-closed .lj-spine { flex: 1 1 auto; width: 100%; }
.lj-card.is-open .lj-spine { flex: 0 0 84px; justify-content: space-between; }

/* 19px bold, not 15/16. The spine sits directly on the panel's own colour, and
   the lighter board swatches leave neither white nor ink above 4.5:1 on it —
   the light blue tops out at 4.33. At 18.66px bold the text clears the bar as
   large type instead, which every swatch passes with room. Full opacity for the
   same reason: 0.85 was quietly spending a fifth of the contrast. */
.lj-num {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 1px;
}

.lj-spine-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.6px;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

.lj-spine-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--on) 16%, transparent);
}

.lj-spine-icon .ic { color: var(--on); }

/* ------------------------------------------------------------------- body */
.lj-body {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--lj-paper);
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 0.5s 0.1s, transform 0.5s 0.1s;
  pointer-events: none;
}

.lj-card.is-open .lj-body { opacity: 1; transform: none; pointer-events: auto; }
.lj-card.is-closed .lj-body { display: none; }

.lj-media {
  position: relative;
  flex: 0 0 42%;
  min-width: 0;
  overflow: hidden;
}

.lj-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A panel with no photograph yet is a chapter plate, not an empty frame: the
   number set as a watermark with the chapter's mark over it. Both are drawn
   from the panel's own colour so it still reads as part of the wall. */
.lj-photo--empty {
  position: relative;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, #ffffff);
}

.lj-plate-num {
  grid-area: 1 / 1;
  color: color-mix(in srgb, var(--accent) 26%, #ffffff);
  font-family: 'Agency FB', 'Oswald', 'Saira Condensed', 'Arial Narrow', sans-serif;
  font-size: 260px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  user-select: none;
}

.lj-plate-mark {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 10px 30px -12px rgba(14, 21, 18, 0.4);
}

.lj-plate-mark .ic {
  width: 34px;
  height: 34px;
  color: color-mix(in srgb, var(--accent) 72%, #000000);
}

/* The year badge is small type and cannot be enlarged into the large-text bar
   the way the spine was, so it takes a darkened derivative of the panel colour
   instead — the same one the chapter line uses. White clears 4.9:1 on every
   swatch there, against 2.59:1 on the raw tangerine. */
.lj-chip {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 72%, #000000);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.4);
}

.lj-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: 36px;
  overflow: auto;
}

/* The chapter line takes a darkened derivative of the panel colour rather than
   the colour itself: at 12px the raw accent fails against paper for four of the
   seven panels. */
.lj-chapter {
  margin: 0 0 8px;
  color: color-mix(in srgb, var(--accent) 72%, #000000);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.lj-role {
  margin: 0 0 14px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.5px;
}

.lj-summary {
  margin: 0 0 20px;
  max-width: 52ch;
  color: #3d453e;
  font-size: 15.5px;
  line-height: 1.65;
}

.lj-list {
  display: grid;
  gap: 11px;
  margin: 0 0 auto;
  padding: 0;
  list-style: none;
}

.lj-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: #20261f;
  font-size: 15px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(8px);
  animation: lj-in 0.5s var(--d, 0.15s) forwards;
}

.lj-list .ic {
  flex: 0 0 auto;
  margin-top: 2px;
  color: color-mix(in srgb, var(--accent) 72%, #000000);
}

@keyframes lj-in {
  to { opacity: 1; transform: none; }
}

.lj-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--lj-line);
}

.lj-step {
  color: #6b746c;
  font-size: 14px;
  font-weight: 800;
}

.lj-step i {
  padding: 0 4px;
  color: var(--lj-line);
  font-style: normal;
}

/* Same reasoning as the chip: 13.5px on a raw swatch cannot pass. */
.lj-next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 72%, #000000);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.lj-next .ic { color: #ffffff; }

.lj-next:hover {
  transform: translateX(3px);
  box-shadow: 0 8px 18px -8px var(--accent);
}

.lj-spine:focus-visible,
.lj-next:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: -3px;
  border-radius: 8px;
}

.lj-next:focus-visible { outline-color: var(--lj-ink); }

.lj-root--empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 13px;
}

/* The block is the whole page, so it owns the canvas cell outright. */
.canvas-block--leadership-panels {
  min-height: 860px !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  grid-row: 1 / -1 !important;
}

.slide--hero .lj-root {
  min-height: 860px !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  border-radius: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .lj-card,
  .lj-body,
  .lj-list li,
  .lj-next,
  .lj-char,
  .lj-overlay {
    transition: none !important;
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .lj-card.is-closed .lj-body { display: none; }
}

/* Stacked, off the slide canvas. */
@media (max-width: 900px) {
  .lj-root:not(.fit-slide__inner .lj-root) .lj-overlay {
    position: static;
    width: auto;
    opacity: 1;
    transform: none;
    padding: 26px 22px 20px;
  }
  .lj-root:not(.fit-slide__inner .lj-root) .lj-rail {
    flex-direction: column;
    height: auto;
  }
  .lj-root:not(.fit-slide__inner .lj-root) .lj-card,
  .lj-root:not(.fit-slide__inner .lj-root) .lj-card.is-open,
  .lj-root:not(.fit-slide__inner .lj-root) .lj-card.is-closed {
    flex: 1 1 auto;
    flex-direction: column;
    transition: none;
  }
  .lj-root:not(.fit-slide__inner .lj-root) .lj-spine {
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    gap: 14px;
    padding: 18px 20px;
  }
  .lj-root:not(.fit-slide__inner .lj-root) .lj-spine-title {
    writing-mode: horizontal-tb;
    transform: none;
  }
  .lj-root:not(.fit-slide__inner .lj-root) .lj-spine-icon { margin-left: auto; }
  .lj-root:not(.fit-slide__inner .lj-root) .lj-body { flex-direction: column; }
  .lj-root:not(.fit-slide__inner .lj-root) .lj-media { flex: 0 0 auto; height: 220px; }
  .lj-root:not(.fit-slide__inner .lj-root) .lj-content { overflow: visible; }
}

/* ==========================================================================
   Gallery wall — a wall of moments behind a hollow title, then the
   anniversary frame. Everything is namespaced under .th-root.

   Ported from a React sketch: the remote font import is gone (nothing is
   fetched at presentation time) and every `vh`/`vw` became a flat nominal
   size, because the slide is laid out at 1600 and scaled as a whole.
   ========================================================================== */
.th-root {
  --gw-ink: #0c140f;
  --gw-ink-soft: #16281d;
  --gw-paper: #eaf1ec;
  --gw-muted: #9fb3a6;
  --gw-green: #4cc072;
  --gw-green-deep: #2e9c4a;

  position: relative;
  height: 100%;
  min-height: 860px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--gw-ink);
  color: var(--gw-paper);
}

/* ------------------------------------------------------------- the frames */
.th-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: opacity 0.6s ease;
}

.th-frame--wall { background: var(--gw-ink); }

.th-root.is-decade .th-frame--wall { opacity: 0; pointer-events: none; }

.th-frame--decade {
  background: var(--gw-ink);
  opacity: 0;
  pointer-events: none;
}

.th-root.is-decade .th-frame--decade { opacity: 1; pointer-events: auto; }

/* --------------------------------------------------------------- the wall */
/* CSS columns, not grid: a masonry wall wants tiles of their own height
   flowing down a column, which is exactly what multicol already does. */
/* CSS columns, not grid: a masonry wall wants tiles of their own height flowing
   down a column, which is what multicol already does.

   `column-fill: auto` is the load-bearing line. The default, `balance`, tries to
   equalise the columns — with a fixed height and more content than fits, that
   left one column 556px short of the floor and a black hole in the wall.
   `auto` fills each column to the bottom before starting the next, so every
   column that is visible is full and the only ragged one is off the edge.

   The width is set from the tile count at runtime (see GalleryWall.js); the
   value here is only what applies before that first measurement. */
.th-wall {
  height: calc(100% + 340px);
  padding: 16px;
  columns: 200px;
  column-gap: 16px;
  column-fill: auto;
  overflow: hidden;
}

.th-tile {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 16px 0;
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  border-radius: 12px;
  overflow: hidden;
  background: var(--gw-ink-soft);
  cursor: grab;
  opacity: 0;
  transform: scale(0.96);
  contain: layout paint;
  isolation: isolate;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.th-tile.is-visible { opacity: 1; transform: scale(1); }
.th-tile.is-dragging { opacity: 0.4; cursor: grabbing; }
.th-tile:active { cursor: grabbing; }

.th-tile:focus-visible {
  outline: 2px solid var(--gw-green);
  outline-offset: 2px;
}

.th-tile img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 64px;
  max-height: 250px;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.th-tile:hover img { transform: scale(1.06); }

/* ------------------------------------------------------------- the pill */
.th-pill {
  position: absolute;
  left: 9px;
  bottom: 9px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(9px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
}

.th-tile:hover .th-pill,
.th-tile:focus-visible .th-pill { opacity: 1; transform: none; }

.th-pill__rule {
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--gw-green-deep);
}

.th-pill__label {
  color: #16241c;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ------------------------------------------------------- the hollow title */
/* The radial ground is what makes the title read as a hole punched in the
   wall rather than a card laid on top of it. */
.th-hero {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 38px 64px;
  text-align: center;
  pointer-events: none;
  z-index: 10;
  background: rgba(12, 20, 15, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(76, 192, 114, 0.4);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.th-hero__eyebrow {
  margin: 0 0 14px;
  color: var(--gw-green);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.th-hero__title {
  margin: 0;
  color: #ffffff;
  font-family: 'Agency FB', 'Oswald', 'Saira Condensed', 'Arial Narrow', sans-serif;
  font-size: 84px;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* #9fb3a6 measured 6.6:1 on the ink, but the title's ground fades to the wall
   behind it — so the subtitle takes a lighter tone that still clears the bar
   over a photograph if the scrim runs thin at the edges. */
.th-hero__sub {
  margin: 12px 0 0;
  color: #c2d3c8;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* ---------------------------------------------------------- frame two */
.th-decade__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.th-root.is-decade .th-decade__img {
  animation: gw-fade-up 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.th-decade__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(12, 20, 15, 0.34), rgba(12, 20, 15, 0.34)),
    radial-gradient(90% 90% at 50% 120%, rgba(12, 20, 15, 0.92), transparent 62%);
}

.th-decade__caption {
  position: absolute;
  left: 84px;
  bottom: 78px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.th-decade__mark {
  color: #ffffff;
  font-family: 'Agency FB', 'Oswald', 'Saira Condensed', 'Arial Narrow', sans-serif;
  font-size: 168px;
  font-weight: 700;
  line-height: 0.8;
  -webkit-text-stroke: 2px rgba(76, 192, 114, 0.55);
}

.th-decade__years {
  margin: 0;
  color: #ffffff;
  font-family: 'Agency FB', 'Oswald', 'Saira Condensed', 'Arial Narrow', sans-serif;
  font-size: 64px;
  font-weight: 700;
  line-height: 0.9;
  text-transform: uppercase;
}

.th-decade__line {
  margin: 8px 0 0;
  color: #8fe0a8;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

@keyframes gw-fade-up {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.th-root--empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 13px;
}

/* The block is the whole page, so it owns the canvas cell outright. */
.canvas-block--gallery-wall {
  min-height: 860px !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  grid-row: 1 / -1 !important;
}

.slide--hero .th-root {
  min-height: 860px !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  border-radius: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .th-tile,
  .th-tile img,
  .th-pill,
  .th-frame {
    transition: none !important;
  }
  .th-decade__img { animation: none !important; }
}

@media (max-width: 900px) {
  .th-root:not(.fit-slide__inner .th-root) .th-wall { columns: 120px; }
  .th-root:not(.fit-slide__inner .th-root) .th-hero { padding: 24px 28px; }
  .th-root:not(.fit-slide__inner .th-root) .th-hero__title { font-size: 40px; }
  .th-root:not(.fit-slide__inner .th-root) .th-decade__caption { left: 24px; bottom: 32px; gap: 14px; }
  .th-root:not(.fit-slide__inner .th-root) .th-decade__mark { font-size: 78px; }
  .th-root:not(.fit-slide__inner .th-root) .th-decade__years { font-size: 32px; }
}

/* ==========================================================================
   Leadership Journey — 7-panel full screen editorial spread
   ========================================================================== */
.lj-root {
  --ink: #16181A; --card: #FBFAF6; --line: #E2E0D6;
  --gray: #6B7069; --brand: #12A150; --brand-lt: #3DDC84;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: 'Agency FB', 'Saira Condensed', system-ui, sans-serif;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink); background: var(--ink);
  position: relative; overflow: hidden; height: 100%; width: 100%;
  min-height: 860px;
  border-radius: var(--radius-lg);
  -webkit-font-smoothing: antialiased;
}
.lj-root * { box-sizing: border-box; }

.lj-overlay {
  position: absolute; top: 0; left: 0; z-index: 5;
  padding: clamp(26px, 4.5vw, 56px);
  width: min(94vw, 960px); color: #fff; pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
}
.has-open .lj-overlay { opacity: 0; transform: translateY(-10px); }
.lj-name { margin: 0; font-family: var(--display); line-height: 1.06; letter-spacing: -.5px; white-space: nowrap; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.lj-name span { display: inline; }
.lj-name-top {
  font-weight: 700; font-size: clamp(26px, 5.2vw, 74px); color: #fff;
  opacity: 0; animation: ljUp .7s .1s cubic-bezier(.2,.7,.2,1) forwards;
}
.lj-sep {
  font-weight: 700; font-size: clamp(26px, 5.2vw, 74px); color: #fff; opacity: .7; margin: 0 .18em;
  opacity: 0; animation: ljUp .7s .1s cubic-bezier(.2,.7,.2,1) forwards;
}
.lj-name-bottom {
  font-weight: 700; font-size: clamp(26px, 5.2vw, 74px); color: var(--brand-lt);
  opacity: 0; animation: ljUp .7s .16s cubic-bezier(.2,.7,.2,1) forwards;
}
.lj-rule {
  display: block; height: 2px; width: min(420px, 66%); background: var(--brand-lt);
  margin: clamp(18px, 2.6vw, 30px) 0 clamp(14px, 1.8vw, 20px);
  transform-origin: left; transform: scaleX(0); animation: ljRule .7s .36s cubic-bezier(.6,.05,.2,1) forwards;
}
.lj-tagline {
  margin: 0; font-weight: 700; font-size: clamp(16px, 2vw, 24px); letter-spacing: -.2px; color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.4);
  opacity: 0; animation: ljUp .6s .46s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes ljUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes ljRule { to { transform: scaleX(1); } }

.lj-rail { display: flex; gap: 0; height: 100%; width: 100%; min-height: 860px; }
.lj-card {
  position: relative; display: flex; overflow: hidden; min-width: 60px;
  background: var(--accent);
  transition: flex-grow .58s cubic-bezier(.6,.05,.2,1);
  flex: 1 1 0; border-right: 1px solid rgba(255,255,255,.06);
}
.lj-card:last-child { border-right: 0; }
.lj-card.is-open { flex-grow: 18; }
.lj-card.is-closed { flex-grow: 1; cursor: pointer; }
.lj-card.is-closed::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--brand-lt);
  transform: scaleX(0); transform-origin: left; transition: transform .4s;
}
.lj-card.is-closed:hover { filter: brightness(1.12); }
.lj-card.is-closed:hover::after { transform: scaleX(1); }

.lj-spine {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 22px; padding: 26px 0 34px; border: 0; background: transparent; cursor: pointer;
  color: var(--on); position: relative; z-index: 2;
}
.is-closed .lj-spine { flex: 1 1 auto; width: 100%; }
.is-open .lj-spine { flex: 0 0 clamp(58px, 5.5vw, 80px); justify-content: space-between; padding: 24px 0; }
.lj-num { font-family: var(--mono); font-weight: 600; font-size: 13px; letter-spacing: 1px; opacity: .75; }
.lj-spine-title {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(16px, 1.8vw, 22px); letter-spacing: 1.5px; white-space: nowrap; line-height: 1;
}
.lj-spine-icon {
  width: 33px; height: 33px; display: grid; place-items: center; border-radius: 999px;
  background: rgba(255,255,255,0.15);
}

.lj-body {
  flex: 1 1 auto; min-width: 0; display: flex; background: var(--card);
  opacity: 0; transform: translateX(16px);
  transition: opacity .5s .12s, transform .5s .12s; pointer-events: none;
}
.is-open .lj-body { opacity: 1; transform: none; pointer-events: auto; }
.is-closed .lj-body { display: none; }

.lj-media { position: relative; flex: 0 0 40%; min-width: 0; overflow: hidden; }
.lj-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.lj-photo--empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--deep); height: 100%;
  background:
    radial-gradient(130% 130% at 20% 0%, var(--tint), transparent 62%),
    repeating-linear-gradient(135deg,#fff 0 24px,var(--tint) 24px 48px);
}
.lj-photo-hint {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  color: var(--deep); background: #fff; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--line);
}
.lj-chip {
  position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-weight: 600; font-size: 13px; letter-spacing: 1px;
  color: #fff; background: var(--deep); padding: 7px 13px; border-radius: 8px;
}

.lj-content {
  position: relative; flex: 1 1 auto; min-width: 0;
  padding: clamp(24px, 3.2vw, 44px); display: flex; flex-direction: column;
  align-items: center; text-align: center; justify-content: center; overflow: auto;
}
.lj-ghost {
  position: absolute; top: -10px; right: 8px; z-index: 0; pointer-events: none;
  font-family: var(--display); font-weight: 800; font-size: clamp(120px, 17vw, 220px); line-height: 1;
  color: var(--ink); opacity: .05; letter-spacing: -2px;
}
.lj-content > *:not(.lj-ghost) { position: relative; z-index: 1; }

.lj-close {
  position: absolute; top: 16px; right: 16px; z-index: 10;
  width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer;
  color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 50%;
  transition: transform .2s, background .2s;
}
.lj-close:hover { transform: rotate(90deg); background: var(--tint); }

.lj-eyebrow {
  margin: 16px 0 10px; font-weight: 600; font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--brand); text-align: center;
}
.lj-role {
  margin: 0 auto 16px; font-family: var(--display); font-weight: 600;
  font-size: clamp(26px, 3vw, 42px); line-height: 1.02; letter-spacing: -.5px; color: var(--ink);
  max-width: 24ch; text-align: center;
}
.lj-summary {
  margin: 0 auto 20px; font-size: 15.5px; line-height: 1.65; color: var(--gray);
  max-width: 54ch; text-align: center;
}

.lj-quote {
  margin: 0 auto 22px; padding: 12px 24px;
  border-left: 0; border-top: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  font-family: var(--display); font-weight: 500; font-size: clamp(16px, 1.7vw, 21px); line-height: 1.35;
  color: var(--ink); max-width: 48ch; text-align: center;
}
.lj-quote-mark { color: var(--brand); vertical-align: -3px; margin-right: 6px; }

.lj-list { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 12px; justify-content: center; width: 100%; max-width: 50ch; }
.lj-list li {
  display: flex; gap: 11px; align-items: center; justify-content: center; font-size: 14.5px; color: var(--ink); font-weight: 500;
  text-align: center; opacity: 0; transform: translateY(8px); animation: ljIn .5s var(--d, .15s) forwards;
}
.lj-list svg { color: var(--brand); flex: 0 0 auto; margin-top: 2px; }

.lj-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line);
}
.lj-step { font-family: var(--mono); font-weight: 600; color: var(--gray); font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
.lj-step i { font-style: normal; color: var(--line); padding: 0 3px; }
.lj-nav {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; max-width: 44%;
  font-weight: 600; font-size: 13px; color: var(--ink); background: transparent; border: 0; padding: 6px 2px;
  overflow: hidden; white-space: nowrap; transition: color .2s, transform .2s;
}
.lj-nav span { overflow: hidden; text-overflow: ellipsis; }
.lj-nav:hover { color: var(--brand); }
.lj-nav--next { justify-content: flex-end; text-align: right; }
.lj-nav:hover.lj-nav--next { transform: translateX(3px); }
.lj-nav:hover:not(.lj-nav--next) { transform: translateX(-3px); }

.lj-spine:focus-visible, .lj-nav:focus-visible, .lj-close:focus-visible { outline: 3px solid var(--brand-lt); outline-offset: 2px; border-radius: 8px; }

@media (max-width: 760px) {
  .lj-root { height: auto; overflow: visible; }
  .lj-overlay { position: static; width: auto; opacity: 1 !important; transform: none; padding: 28px 22px 20px; background: var(--ink); }
  .lj-name { white-space: normal; }
  .lj-rail { flex-direction: column; height: auto; gap: 0; width: 100%; }
  .lj-card { transition: none; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .lj-card.is-open, .lj-card.is-closed { flex: 1 1 auto; }
  .lj-card.is-closed::after { display: none; }
  .lj-spine { flex-direction: row; flex-basis: auto; width: 100%; gap: 14px; justify-content: flex-start; padding: 18px 20px; }
  .is-open .lj-spine { flex-basis: auto; padding: 18px 20px; }
  .lj-spine-title { writing-mode: horizontal-tb; transform: none; font-size: 21px; letter-spacing: 1px; }
  .lj-num { font-size: 14px; }
  .lj-spine-icon { margin-left: auto; }
  .lj-body { flex-direction: column; max-height: 0; overflow: hidden; transform: none; opacity: 1; transition: max-height .5s ease; }
  .is-open .lj-body { max-height: 2000px; }
  .lj-media { flex: 0 0 auto; height: 220px; }
  .lj-content { overflow: visible; }
}

.canvas-block--leadership-panels {
  min-height: 860px !important;
  height: 100% !important;
}

/* ==========================================================================
   AI Ready Engineer Showcase — Neatly aligned PDF showcase
   ========================================================================== */
.are-root {
  --are-bg: #090e0b;
  --are-card: #111a14;
  --are-card-border: rgba(76, 192, 114, 0.25);
  --are-green: #4cc072;
  --are-green-bright: #3ddc84;
  --are-text: #eaf1ec;
  --are-muted: #9fb3a6;

  position: relative;
  height: 100%;
  width: 100%;
  min-height: 860px;
  background: var(--are-bg);
  color: var(--are-text);
  padding: 32px 40px;
  overflow-y: auto;
  border-radius: var(--radius-lg);
  font-family: 'Inter', system-ui, sans-serif;
  box-sizing: border-box;
}

.are-hero {
  text-align: center;
  margin-bottom: 36px;
  padding: 28px 32px;
  background: linear-gradient(180deg, rgba(17, 26, 20, 0.8) 0%, rgba(9, 14, 11, 0.95) 100%);
  border: 1px solid var(--are-card-border);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.are-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.are-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--are-green-bright);
}

.are-partners-chips {
  display: flex;
  gap: 10px;
}

.are-partner-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(76, 192, 114, 0.12);
  border: 1px solid rgba(76, 192, 114, 0.3);
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 999px;
}

.are-hero__title {
  margin: 10px 0 12px;
  font-family: 'Agency FB', 'Oswald', 'Saira Condensed', sans-serif;
  font-size: clamp(38px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: 2px;
  color: #ffffff;
  text-transform: uppercase;
  line-height: 1;
}

.are-title-highlight {
  color: var(--are-green-bright);
  text-shadow: 0 0 30px rgba(61, 220, 132, 0.4);
}

.are-hero__sub {
  max-width: 800px;
  margin: 0 auto 24px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--are-muted);
}

.are-stats-bar {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.are-stat-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  min-width: 140px;
}

.are-stat-badge strong {
  font-family: 'Agency FB', 'Saira Condensed', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--are-green-bright);
}

.are-stat-badge span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #a0b5a8;
  margin-top: 2px;
}

.are-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 40px;
}

@media (max-width: 1100px) {
  .are-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}

.are-card {
  display: flex;
  flex-direction: column;
  background: var(--are-card);
  border: 1px solid var(--are-card-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.are-card:hover {
  transform: translateY(-6px);
  border-color: rgba(76, 192, 114, 0.6);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 20px rgba(76, 192, 114, 0.2);
}

.are-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.are-card__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.are-card__badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--are-green-bright);
}

.are-card__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}

.are-card__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #000000;
  overflow: hidden;
  cursor: pointer;
}

.are-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.are-card__frame:hover .are-card__img {
  transform: scale(1.04);
}

.are-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(9, 14, 11, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.are-card__frame:hover .are-card__overlay {
  opacity: 1;
}

.are-zoom-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #ffffff;
  color: #090e0b;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  transform: translateY(10px);
  transition: transform 0.3s ease;
}

.are-card__frame:hover .are-zoom-btn {
  transform: translateY(0);
}

.are-card__footer {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(0, 0, 0, 0.2);
}

.are-card__caption {
  margin: 0;
  font-size: 13px;
  color: var(--are-muted);
  line-height: 1.4;
}

.are-card__actions {
  display: flex;
  gap: 10px;
}

.are-btn-expand,
.are-btn-pdf,
.are-btn-download-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  padding: 8px 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.are-btn-expand {
  flex: 1;
  justify-content: center;
  background: rgba(76, 192, 114, 0.15);
  color: var(--are-green-bright);
  border: 1px solid rgba(76, 192, 114, 0.3);
}

.are-btn-expand:hover {
  background: rgba(76, 192, 114, 0.28);
  border-color: var(--are-green-bright);
}

.are-btn-pdf {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.are-btn-pdf:hover {
  background: rgba(255, 255, 255, 0.18);
}

.are-btn-download-sm {
  background: rgba(255, 255, 255, 0.06);
  color: var(--are-muted);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 10px;
}

.are-btn-download-sm:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

.canvas-block--ai-ready-engineer {
  min-height: 860px !important;
  height: 100% !important;
}

/* ==========================================================================
   Course deck — the AI Ready Engineer prospectus, paged.
   The flyer's own identity: near-black green ground, lime for what is live,
   gold for a number. Flat nominal sizes throughout — the slide is laid out at
   1600 and scaled whole, so a `vw` here would measure the window.
   ========================================================================== */
.cd-root {
  --cd-ink: #071109;
  --cd-ink-2: #0d1c12;
  --cd-line: rgba(255, 255, 255, 0.12);
  --cd-lime: #7ED957;
  --cd-gold: #FFC42E;
  --cd-body: rgba(255, 255, 255, 0.76);

  position: relative;
  height: 100%;
  min-height: 860px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(24, 92, 48, 0.55), transparent 62%),
    radial-gradient(90% 70% at 10% 96%, rgba(18, 70, 38, 0.5), transparent 60%),
    var(--cd-ink);
  color: #ffffff;
}

/* Frames are stacked and cross-faded rather than laid side by side: each is a
   full slide in its own right and only one is ever on. */
.cd-frame {
  position: absolute;
  inset: 0;
  display: grid;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease;
}

.cd-frame.is-on { opacity: 1; visibility: visible; }

.cd-inner {
  align-self: center;
  width: 100%;
  padding: 56px 88px 92px;
}

/* -------------------------------------------------------------------- hero */
.cd-eyebrow {
  margin: 0 0 18px;
  color: var(--cd-lime);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.cd-title {
  margin: 0;
  display: grid;
  font-family: 'Agency FB', 'Oswald', 'Saira Condensed', 'Arial Narrow', sans-serif;
  font-size: 116px;
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.cd-standfirst {
  margin: 26px 0 0;
  max-width: 62ch;
  color: var(--cd-body);
  font-size: 22px;
  line-height: 1.5;
}

.cd-stats {
  display: flex;
  gap: 18px;
  margin-top: 40px;
}

.cd-stat {
  flex: 1 1 0;
  display: grid;
  gap: 6px;
  padding: 24px 28px;
  border: 1px solid var(--cd-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.cd-stat__value {
  color: var(--cd-gold);
  font-family: 'Agency FB', 'Oswald', 'Saira Condensed', 'Arial Narrow', sans-serif;
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
}

.cd-stat__label {
  color: var(--cd-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

/* Typographic partner marks. See CourseDeck.js — no vendor logo is drawn. */
.cd-partners { margin-top: 34px; }

.cd-partners__label {
  display: block;
  margin-bottom: 12px;
  color: var(--cd-lime);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.cd-partners__row { display: flex; gap: 14px; flex-wrap: wrap; }

.cd-partner {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 13px 20px;
  border: 1px solid var(--cd-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.cd-partner__name { font-size: 18px; font-weight: 700; }

.cd-partner__note {
  color: var(--cd-lime);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- frame heads */
.cd-head { margin-bottom: 34px; }

.cd-heading {
  margin: 0;
  font-size: 52px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.cd-sub {
  margin: 12px 0 0;
  color: var(--cd-body);
  font-size: 18px;
}

/* ------------------------------------------------------------------- cards */
.cd-cards {
  display: grid;
  grid-template-columns: repeat(var(--cd-cols, 2), minmax(0, 1fr));
  gap: 18px;
}

.cd-card {
  display: flex;
  gap: 18px;
  padding: 24px 26px;
  border: 1px solid var(--cd-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.cd-card__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid rgba(126, 217, 87, 0.5);
  border-radius: 999px;
  color: var(--cd-lime);
}

.cd-card__title { margin: 0 0 7px; font-size: 20px; font-weight: 800; line-height: 1.2; }

.cd-card__body { margin: 0; color: var(--cd-body); font-size: 15.5px; line-height: 1.5; }

/* ----------------------------------------------------------------- modules */
/* Fills down the first column and then across, not row by row. The flyer runs
   01–08 down the left and 09–16 down the right; row-major grid order gave
   01, 02 / 03, 04 and broke the reading the printed page teaches. */
.cd-modules {
  display: grid;
  grid-template-columns: repeat(var(--cd-cols, 2), minmax(0, 1fr));
  grid-template-rows: repeat(var(--cd-rows, 8), auto);
  grid-auto-flow: column;
  gap: 0 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cd-module {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--cd-line);
}

.cd-module__n {
  color: var(--cd-lime);
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.cd-module__title { font-size: 19px; font-weight: 700; }

/* ------------------------------------------------------------------- close */
.cd-close { display: grid; gap: 34px; justify-items: center; text-align: center; }

.cd-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.cd-chip {
  padding: 9px 17px;
  border: 1px solid var(--cd-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 14px;
  font-weight: 700;
}

.cd-stats--close { width: 100%; max-width: 720px; }

.cd-lines { display: grid; gap: 10px; }

.cd-line { margin: 0; color: var(--cd-body); font-size: 24px; }

.cd-line--last {
  color: #ffffff;
  font-family: 'Agency FB', 'Oswald', 'Saira Condensed', 'Arial Narrow', sans-serif;
  font-size: 64px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.cd-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--cd-line);
  width: 100%;
}

.cd-contact__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--cd-body);
  font-size: 15px;
  font-weight: 600;
}

.cd-contact__item .ic { color: var(--cd-lime); }

/* ---------------------------------------------------------------- progress */
/* Sits clear of the deck's own control pill, which is fixed to the bottom of
   the viewport and would otherwise land on it. */
.cd-progress {
  position: absolute;
  left: 88px;
  bottom: 42px;
  display: flex;
  gap: 8px;
}

.cd-progress__dot {
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
  transition: background 0.3s ease;
}

.cd-progress__dot.is-on { background: var(--cd-lime); }

.cd-root--empty { display: grid; place-items: center; color: var(--muted); font-size: 13px; }

/* The block is the whole page, so it owns the canvas cell outright. */
.canvas-block--course-deck {
  min-height: 860px !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  grid-row: 1 / -1 !important;
}

.slide--hero .cd-root {
  min-height: 860px !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  border-radius: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .cd-frame, .cd-progress__dot { transition: none !important; }
}

@media (max-width: 900px) {
  .cd-root:not(.fit-slide__inner .cd-root) .cd-inner { padding: 28px 24px 70px; }
  .cd-root:not(.fit-slide__inner .cd-root) .cd-title { font-size: 44px; }
  .cd-root:not(.fit-slide__inner .cd-root) .cd-heading { font-size: 30px; }
  .cd-root:not(.fit-slide__inner .cd-root) .cd-cards,
  .cd-root:not(.fit-slide__inner .cd-root) .cd-modules { grid-template-columns: minmax(0, 1fr); }
  .cd-root:not(.fit-slide__inner .cd-root) .cd-stats { flex-wrap: wrap; }
  .cd-root:not(.fit-slide__inner .cd-root) .cd-progress { left: 24px; bottom: 24px; }
}

/* The credential tile in the hero stat row. A ruled disc rather than a copy of
   the partner's seal — see CourseDeck.js. */
.cd-seal {
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 4px;
  border-color: rgba(233, 122, 74, 0.45);
  background: rgba(233, 122, 74, 0.1);
}

.cd-seal__ring {
  color: #F0A882;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.cd-seal__name {
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
}

.cd-seal__note {
  color: #F0A882;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ==========================================================================
   Drift wall — tiles drifting up and down a tilted 3D plane, title punched
   through the middle. Ported from DriftWall.css; the remote font import is
   gone and every size is a flat nominal value.
   ========================================================================== */
.dw-root {
  position: relative;
  height: 100%;
  min-height: 860px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #0c140f;
  color: #eaf1ec;
}

.dw-wall {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: var(--dw-perspective, 1200px);
  perspective-origin: 50% 50%;
  /* Feathers the top and bottom edges so columns arrive and leave rather than
     being sliced off by the frame. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.dw-plane {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  will-change: transform;
  cursor: pointer;
}

.dw-col {
  position: relative;
  width: calc(var(--dw-tile-w) + var(--dw-gap));
  transform-style: preserve-3d;
}

.dw-track {
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  will-change: transform;
}

/* The tile takes the picture's shape rather than the picture being cut to the
   tile's. A fixed 230×150 landscape box with `object-fit: cover` took the top
   off every portrait in the wall — including the faces. Height is `auto` on the
   image, so the tile is exactly as tall as the photograph is, nothing is
   cropped, and no letterbox bars appear either. Column loops are re-measured
   from the real content height once the images land (see DriftWall.js), so the
   varying heights stay seamless. */
.dw-tile {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  padding: calc(var(--dw-gap) / 2);
  outline: none;
  transform-style: preserve-3d;
}

.dw-tile__inner {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--dw-radius);
  background: #0b0b12;
  opacity: var(--dw-dim);
  transform: translateZ(0);
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.dw-tile img {
  display: block;
  width: 100%;
  height: auto;
  /* A floor and a ceiling only — an image that has not decoded yet has no
     height at all, and one very tall portrait should not own a whole column. */
  min-height: 90px;
  max-height: 340px;
  object-fit: contain;
  filter: saturate(0.92);
  transition: filter 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  user-select: none;
  -webkit-user-drag: none;
}

.dw-tile__scrim {
  position: absolute;
  inset: 0;
  background: #08100b;
  opacity: 0.25;
  pointer-events: none;
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.dw-tile:hover .dw-tile__inner,
.dw-tile:focus-visible .dw-tile__inner {
  opacity: 1;
  transform: translateZ(var(--dw-lift));
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.7);
}

.dw-tile:hover img,
.dw-tile:focus-visible img { filter: saturate(1.05); }

.dw-tile:hover .dw-tile__scrim,
.dw-tile:focus-visible .dw-tile__scrim { opacity: 0.05; }

.dw-tile:focus-visible .dw-tile__inner { outline: 2px solid #7ED957; outline-offset: 2px; }

/* ------------------------------------------------------------------- pill */
.dw-pill {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(9px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
}

.dw-tile:hover .dw-pill,
.dw-tile:focus-visible .dw-pill { opacity: 1; transform: none; }

.dw-pill__rule { width: 14px; height: 2px; border-radius: 2px; background: #2e9c4a; }

.dw-pill__text {
  color: #16241c;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ------------------------------------------------------------- the title */
/* The radial ground is what punches the title through the wall rather than
   laying a card on top of it. */
.dw-hero {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;
  transform: translate(-50%, -50%);
  padding: 54px 96px;
  text-align: center;
  pointer-events: none;
  background: radial-gradient(ellipse 116% 132% at 50% 50%,
    #0c140f 34%, rgba(12, 20, 15, 0.86) 56%, rgba(12, 20, 15, 0) 76%);
}

.dw-hero__title {
  margin: 0;
  font-family: 'Agency FB', 'Oswald', 'Saira Condensed', 'Arial Narrow', sans-serif;
  font-size: 104px;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.dw-hero__top { color: #4cc072; }
.dw-hero__bottom { color: #FFC42E; }

.dw-hero__tagline {
  margin: 16px 0 0;
  color: #c2d3c8;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
}

/* --------------------------------------------------------------- lightbox */
.dw-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 40px;
  background: rgba(4, 8, 6, 0.82);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.dw-modal.is-in { opacity: 1; }

.dw-modal__card {
  position: relative;
  display: grid;
  max-width: min(1100px, 92vw);
  max-height: 88vh;
  overflow: hidden;
  border-radius: 18px;
  background: #101a14;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.8);
}

.dw-modal__media { display: grid; place-items: center; min-height: 0; background: #06100a; }

.dw-modal__media img { max-width: 100%; max-height: 70vh; display: block; object-fit: contain; }

.dw-modal__meta { display: grid; gap: 6px; padding: 20px 26px 24px; }

.dw-modal__tag {
  color: #7ED957;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.dw-modal__title { margin: 0; color: #ffffff; font-size: 24px; font-weight: 800; }

.dw-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  cursor: pointer;
}

.dw-modal__close:hover { background: rgba(0, 0, 0, 0.8); }

.dw-root--empty { display: grid; place-items: center; color: var(--muted); font-size: 13px; }

/* The block is the whole page, so it owns the canvas cell outright. */
.canvas-block--drift-wall {
  min-height: 860px !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  grid-row: 1 / -1 !important;
}

.slide--hero .dw-root {
  min-height: 860px !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  border-radius: 0 !important;
}

/* Drifting columns are exactly the motion someone disabling animation is asking
   to be rid of. The wall stays, still. */
@media (prefers-reduced-motion: reduce) {
  .dw-tile__inner,
  .dw-tile img,
  .dw-tile__scrim,
  .dw-pill,
  .dw-modal { transition: none !important; }
}

@media (max-width: 900px) {
  .dw-root:not(.fit-slide__inner .dw-root) .dw-hero { padding: 26px 30px; }
  .dw-root:not(.fit-slide__inner .dw-root) .dw-hero__title { font-size: 42px; }
  .dw-root:not(.fit-slide__inner .dw-root) .dw-hero__tagline { font-size: 12px; letter-spacing: 3px; }
}

/* A photograph the column would butcher is shown whole instead of cropped.
   Set by LeadershipPanels.js from the picture's own ratio — see fitToPanel. */
.lj-photo--whole {
  object-fit: contain;
  background: color-mix(in srgb, var(--accent, #16181a) 14%, #ffffff);
  padding: 18px;
}



/* ==========================================================================
   Leadership panels — horizontal arrangement.

   The spines were vertical, which made the open panel a tall, narrow column:
   0.55 aspect, in which a 16:9 card can only be cropped or stranded in the
   middle with dead space above and below. Turning the rail on its side makes
   the open panel wide and short, which is the shape a photograph is, so the
   picture fills it instead of floating in it.
   ========================================================================== */
.lj-rail { flex-direction: column; }

.lj-card {
  flex-direction: column;
  min-width: 0;
  min-height: 52px;
  transition: flex-grow 0.55s cubic-bezier(0.6, 0.05, 0.2, 1);
}

.lj-card.is-open { flex: 1 1 0; flex-grow: 16; }
/* 52, not 62. Four collapsed bars at 62px cost the open panel 248px of the
   900 available, which was the last 28px the longest chapter needed. */
.lj-card.is-closed { flex: 0 0 52px; }

/* The spine is a bar now: number, title and mark reading left to right. */
.lj-card .lj-spine {
  flex: 0 0 52px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  width: 100%;
  padding: 0 28px;
}

.lj-card .lj-spine-title {
  writing-mode: horizontal-tb;
  transform: none;
  letter-spacing: 2px;
}

.lj-card .lj-spine-icon { margin-left: auto; }

.lj-card .lj-body { flex: 1 1 auto; flex-direction: row; min-height: 0; }

/* Wide enough that a landscape photograph is close to filling it, with the
   copy taking the rest. */
/* 50%, not 58%. At 58% the copy column was 742px and the two longest chapters
   ran 33-46px past it; the picture loses little at this width and the text
   gains a whole line's worth of room. */
.lj-card .lj-media { flex: 0 0 50%; min-width: 0; height: auto; }

/* The last 8px. Ecosystem Builder is the longest chapter and was still
   clipping its final line; a slightly tighter measure clears it without
   touching the type size. */
.lj-card .lj-content { flex: 1 1 auto; min-width: 0; overflow: auto; padding: 22px 30px; }
.lj-card .lj-summary { margin-bottom: 14px; }
.lj-card .lj-role { margin-bottom: 10px; }

/* The hero overlay sat over vertical spines; it has the top bar's height to
   clear now, not a column's width. */
.lj-root.all-closed .lj-overlay { padding: 34px 44px; }

/* --- horizontal rail: corrections ------------------------------------- */

/* Collapsed, the five bars share the whole screen instead of stacking 52px
   deep and leaving the rest of the slide empty. The 52px floor is only for
   the bars that stand aside once a chapter is open. */
.lj-root.all-closed .lj-card,
.lj-root.all-closed .lj-card.is-closed {
  flex: 1 1 0;
  min-height: 0;
}

.lj-root.all-closed .lj-card .lj-spine {
  flex: 1 1 auto;
  padding: 0 34px;
}

/* The chapter number is already carried by the order of the bars and by the
   ghosted figure on the open panel; a third copy on every spine was noise. */
.lj-card .lj-num { display: none; }

/* The prev / next / count line at the foot of each chapter duplicated the
   rail sitting directly above it — every one of those destinations is one
   click away on screen. */
.lj-card .lj-foot { display: none; }

/* The title sat directly on the bars and collided with them. It gets its own
   plate now, centred, so it reads as a cover over the rail rather than text
   printed across it. */
.lj-root.all-closed .lj-overlay {
  top: 50%;
  left: 50%;
  width: auto;
  max-width: 78%;
  transform: translate(-50%, -50%);
  padding: 40px 56px;
  text-align: center;
  border-radius: 20px;
  background: rgba(8, 14, 10, 0.82);
  backdrop-filter: blur(3px);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
}

.lj-root.all-closed .lj-overlay .lj-rule { margin-left: auto; margin-right: auto; }

/* No title card over the rail. It was there when the spines were vertical and
   the middle of the slide was empty; with the bars filling the screen it only
   covers three of them, and each bar already names its own chapter. */
.lj-root .lj-overlay { display: none; }

/* The push-to-presenter switch on a navigation row. Deliberately quiet: it sits
   in a list read many times a day and acted on rarely, so it holds its colour
   only when the section is live. */
.snav-release {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.snav-release:hover { border-color: var(--nav-accent, var(--brand-accent)); color: var(--nav-accent-ink, var(--accent-ink)); }

.snav-release.is-live {
  border-color: var(--nav-accent, var(--brand-accent));
  background: color-mix(in srgb, var(--nav-accent, var(--brand-accent)) 14%, #ffffff);
  color: var(--nav-accent-ink, var(--accent-ink));
}

.snav-release:disabled { opacity: 0.5; cursor: progress; }

.snav-release:focus-visible { outline: 2px solid var(--nav-accent, var(--brand-accent)); outline-offset: 1px; }

/* The rows are buttons; the toggle sits inside one, so it needs its own layer
   to receive the click rather than the row swallowing it. */
.nav-tree__parent, .nav-tree__child { position: relative; }
.snav-release { position: relative; z-index: 2; }

/* --- navigation rows: keep them one line tall ------------------------------
   The Draft flag and the release switch were wrapping onto a second line, so
   every unreleased row stood twice as tall as a released one and the list of
   seventeen no longer fitted the pane. Both are trailing marks on the same
   line; the title takes the space that is left. */
.nav-tree__parent,
.nav-tree__child {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  min-height: 0;
}

.nav-tree__title,
.nav-tree__child-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-tree__badge,
.nav-tree__child-icon,
.nav-tree__chevron,
.nav-tree__flag,
.snav-release { flex: none; }

/* "DRAFT" beside a 24px switch was as wide as some of the titles. It is a
   state marker, not a label — the switch already says the same thing. */
.nav-tree__flag {
  padding: 2px 6px;
  font-size: 9.5px;
  letter-spacing: 0.06em;
}

.snav-release { margin-left: 0; }

/* --- sidebar: nothing scrolls sideways ------------------------------------
   The rows were wider than the pane, so the whole sidebar carried a horizontal
   scrollbar along the bottom. Every row now lives inside the pane's width and
   the title is what gives way, by ellipsis. */
.nav-tree,
.nav-tree__group { min-width: 0; max-width: 100%; overflow-x: clip; }

.nav-tree__parent,
.nav-tree__child {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* The chevron on a group with no subsections was still taking its column. */
.nav-tree__parent .nav-tree__chevron { margin-left: 0; }

/* The subsection list was 4px wider than the group holding it — enough to put
   a scrollbar under the entire sidebar. The 34px left indent was being added
   to a full-width box rather than taken out of it. */
.nav-tree__children,
.nav-tree__children-inner {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
}

.nav-tree__children-inner { padding-right: 10px; }

.nav-tree__child { max-width: 100%; }

/* The guide scrolls, it just does not advertise it. A track down the side of a
   sixteen-row list is a permanent piece of furniture for something the wheel
   already does; the list still scrolls exactly as before. */
.sidenav__scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.sidenav__scroll::-webkit-scrollbar { width: 0; height: 0; }

/* The switch reads as a line icon rather than a hairline: at 14px the default
   1.7 stroke thinned out against the row's text. */
.snav-release .ic { width: 15px; height: 15px; }
/* ==========================================================================
   Platform wall — a rotating 3D stack of browser windows; clicking one runs
   the real product inside the slide.

   The swap is the CardSwap motion rebuilt on CSS transforms: GSAP is not
   available (zero runtime dependencies, presented offline), so the timeline
   lives in Platforms.js and this file supplies only the stage and the skin.

   Credentials are never rendered as text. The stage offers the role name and
   two copy buttons, because a password on a projector is a password given away.
   ========================================================================== */
.pf-root {
  position: relative;
  height: 100%;
  min-height: 860px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.pf-root--empty { display: grid; place-items: center; color: var(--muted); font-size: 13px; }

/* ------------------------------------------------------------- the wall ---- */
.pf-wall {
  display: grid;
  /* Absolute, not height:100%. The root's height comes from its min-height, so
     its computed `height` is auto and a percentage height on a child never
     resolves — the wall collapsed to its content and left a band of dead slide
     under the deck. Pinning to the root's box is the only reliable fill. */
  position: absolute;
  inset: 0;
  grid-template-columns: minmax(260px, 0.36fr) minmax(0, 1.64fr);
  align-items: center;
  gap: 16px;
  padding: 40px 16px 40px 40px;
}
.pf-root.is-open .pf-wall { display: none; }

.pf-intro { max-width: 520px; }
.pf-eyebrow {
  margin: 0 0 12px; color: var(--nav-accent-ink, var(--accent-ink));
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
}
.pf-title { margin: 0; font-size: 46px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; }
.pf-sub { margin: 14px 0 0; color: var(--muted); font-size: 16.5px; line-height: 1.55; }

.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.pf-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: border-color .18s ease, transform .18s ease;
}
.pf-chip:hover { border-color: var(--nav-accent, var(--brand-accent)); transform: translateY(-1px); }
.pf-chip .ic { color: var(--nav-accent-ink, var(--accent-ink)); }
.pf-chip em {
  font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--muted);
  padding: 2px 6px; border-radius: 999px; background: var(--page-bg);
}
.pf-hint { margin: 20px 0 0; color: var(--muted); font-size: 13px; }

/* ----------------------------------------------------- the rotating deck ---- */
.pf-stagearea {
  position: relative;
  height: 100%;
  min-height: 600px;
  perspective: 1500px;
  perspective-origin: 55% 50%;
}
/* The fan steps right and up, so the deck origin sits low and left of centre —
   otherwise the tail of the stack runs past the slide edge and gets clipped. */
/* Origin chosen so the fan — which steps right and up — sits inside the slide
   at the largest window size that still clears both edges. Measured, not
   guessed: at 990x570 with a 32/20 step, and allowing for the ±35px of vertical
   extent the 4deg skew adds to a 990px-wide card, the stack spans 1182x759 of
   the 1207x780 the column gives it. */
.pf-deck { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform-style: preserve-3d; }

.pf-win {
  position: absolute; top: 0; left: 0;
  display: flex; flex-direction: column;
  width: 980px; height: 566px;
  padding: 0; margin: 0;
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.18), 0 4px 14px rgba(15, 23, 42, 0.08);
  overflow: hidden; cursor: pointer;
  font: inherit; text-align: left; color: inherit;
  transform-style: preserve-3d; backface-visibility: hidden; will-change: transform;
}
.pf-win:hover { border-color: var(--nav-accent, var(--brand-accent)); }
.pf-win:focus-visible { outline: 3px solid var(--nav-accent, var(--brand-accent)); outline-offset: 3px; }

.pf-win__bar {
  display: flex; align-items: center; gap: 12px; flex: 0 0 auto;
  padding: 7px 14px; border-bottom: 1px solid var(--border); background: var(--page-bg);
}
.pf-win__dots { display: inline-flex; gap: 6px; }
.pf-win__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.pf-win__dots i:first-child { background: #ff5f57; }
.pf-win__dots i:nth-child(2) { background: #febc2e; }
.pf-win__dots i:nth-child(3) { background: #28c840; }
.pf-win__host {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 1px 10px; border-radius: 999px; background: var(--surface);
  color: var(--muted); font-size: 11px; line-height: 1.5; font-weight: 600; text-align: center;
}

.pf-win__shell { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--page-bg); }
.pf-win__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* The recording is scenery inside a button — clicks belong to the window. */
.pf-win__video { pointer-events: none; background: var(--page-bg); }

.pf-win__blank {
  position: absolute; inset: 0; display: grid; align-content: center; justify-items: center;
  gap: 10px; padding: 24px; text-align: center;
}
.pf-win__mark {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--nav-accent-ink, var(--accent-ink));
}
.pf-win__blankname { font-size: 22px; font-weight: 800; }
.pf-win__blankblurb { max-width: 340px; color: var(--muted); font-size: 14px; line-height: 1.5; }

.pf-win__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto;
  padding: 13px 18px; border-top: 1px solid var(--border); background: var(--surface);
}
.pf-win__name { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
/* Which face of the platform this window is — portal or admin. Outlined, not
   filled: a solid accent pill on all seven windows turned the fan into blobs. */
.pf-win__sub {
  margin-right: auto; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.pf-win__open {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--nav-accent-ink, var(--accent-ink)); font-size: 12.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* --------------------------------------------------------------- the stage -- */
.pf-stage { position: absolute; inset: 0; display: none; grid-template-rows: auto minmax(0, 1fr); background: var(--surface); }
.pf-root.is-open .pf-stage { display: grid; }

.pf-stage__bar { display: flex; align-items: center; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.pf-stage__back, .pf-stage__out, .pf-stage__keys {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none;
  transition: border-color .18s ease;
}
.pf-stage__back:hover, .pf-stage__out:hover, .pf-stage__keys:hover { border-color: var(--nav-accent, var(--brand-accent)); }
.pf-stage__id { display: grid; min-width: 0; }
.pf-stage__name { font-size: 14.5px; font-weight: 800; }
.pf-stage__url { color: var(--muted); font-size: 12px; }
.pf-stage__view {
  margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-style: normal;
  background: var(--nav-accent, var(--brand-accent)); color: #ffffff;
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}

/* Portal / Admin — the two faces of the same platform, one click apart. */
.pf-switch { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--page-bg); }
.pf-switch[hidden] { display: none; }
.pf-switch__btn {
  padding: 6px 15px; border: 0; border-radius: 999px; background: transparent;
  color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.pf-switch__btn:hover { color: var(--text); }
.pf-switch__btn.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

.pf-chip b {
  padding: 2px 7px; border-radius: 999px;
  background: var(--nav-accent, var(--brand-accent)); color: #ffffff;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}

.pf-stage__tools { position: relative; margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pf-stage__keys.is-on {
  border-color: var(--nav-accent, var(--brand-accent));
  background: var(--nav-accent, var(--brand-accent)); color: #ffffff;
}
.pf-stage__keys.is-on .ic { color: #ffffff; }

.pf-stage__body { display: grid; min-height: 0; }
.pf-stage__frame { width: 100%; height: 100%; border: 0; background: #ffffff; }

/* ------------------------------------------------- credentials, on request -- */
.pf-keys {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 30;
  width: 340px; max-height: 560px; overflow: auto;
  padding: 16px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
}
.pf-keys[hidden] { display: none; }
.pf-keys__head {
  margin: 0 0 12px; color: var(--muted);
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
}
.pf-key { padding: 12px 0; border-top: 1px solid var(--border); }
.pf-key:first-of-type { border-top: 0; padding-top: 0; }
.pf-key__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.pf-key__role { font-size: 14px; font-weight: 800; }
.pf-key__jump {
  padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--muted); font: inherit; font-size: 10.5px; font-weight: 800; cursor: pointer;
}
.pf-key__jump:hover { border-color: var(--nav-accent, var(--brand-accent)); color: var(--text); }
.pf-key__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pf-key__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--page-bg); color: var(--text);
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.pf-key__btn:hover { border-color: var(--nav-accent, var(--brand-accent)); background: var(--surface); }
.pf-keys__note { margin: 14px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }

/* --------------------------------------------------------- full-bleed slide -- */
.canvas-block--platforms {
  min-height: 860px !important; height: 100% !important; flex: 1 1 auto !important;
  display: flex !important; flex-direction: column !important; grid-row: 1 / -1 !important;
}
.slide--hero .pf-root { min-height: 860px !important; height: 100% !important; flex: 1 1 auto !important; border-radius: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .pf-win { transition: none !important; }
}

/* ==========================================================================
   Centers of Excellence — a wall of partner academies; opening one shows its
   photos and videos without leaving the slide.

   The source design leans on Google Fonts and drifting radial gradients.
   Neither travels: the deck is presented offline, and white is the major
   surface here. Each centre's brand colour is kept for the card you are
   pointing at — its edge, its mark, its rule on the detail page.
   ========================================================================== */
.coe-root {
  position: relative;
  height: 100%;
  min-height: 860px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.coe-root--empty { display: grid; place-items: center; color: var(--muted); font-size: 13px; }

/* The scrollbar is gone, not the scrolling. A grey trough down the edge of a
   projected slide is furniture the room does not need; the rows still move,
   smoothly, and each one animates in as it arrives. */
.coe-wall {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden;
  padding: 34px 46px 30px;
  scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior: contain;
}
.coe-wall::-webkit-scrollbar { width: 0; height: 0; display: none; }
.coe-root.is-open .coe-wall { display: none; }

.coe-head { margin-bottom: 22px; }
.coe-eyebrow {
  margin: 0 0 10px; color: var(--nav-accent-ink, var(--accent-ink));
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
}
/* The deck's own display face, self-hosted, so it survives being presented
   with no internet — the source design asked for Space Grotesk from Google
   Fonts, which would simply not arrive. Agency FB is condensed, so it carries
   a longer line at a larger size without wrapping. */
.coe-title {
  margin: 0;
  font-family: 'Agency FB', 'Oswald', 'Saira Condensed', 'Arial Narrow', sans-serif;
  font-size: 58px; font-weight: 700; letter-spacing: 0.005em; line-height: 1.02;
  text-transform: uppercase;
}
.coe-sub { margin: 9px 0 0; max-width: 62ch; color: var(--muted); font-size: 16.5px; line-height: 1.55; }

.coe-stats { display: flex; align-items: stretch; gap: 22px; margin-top: 12px; }
.coe-stats > div { display: grid; }
.coe-stats b { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.coe-stats span { color: var(--muted); font-size: 12px; letter-spacing: 0.06em; }
.coe-stats i { width: 1px; background: var(--border); }

/* auto-fit, never auto-fill: auto-fill leaves a phantom column and the last
   row of centres ends up floating in dead space. */
/* Four equal rows that share whatever height is left, rather than rows sized
   by their content with the remainder pooling at the bottom of the slide. */
.coe-grid {
  display: grid; flex: 1 1 auto;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.coe-card {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  min-height: 0; overflow: hidden;
  padding: 14px 14px 11px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 1px 3px rgba(20, 25, 35, 0.05);
  transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, border-color .32s ease;
}
.coe-card::before {
  content: ''; position: absolute; inset: 0; border-radius: 18px; pointer-events: none;
  background: var(--coe-wash); opacity: 0; transition: opacity .32s ease;
}
.coe-card:hover, .coe-card:focus-visible {
  transform: translateY(-5px);
  border-color: var(--coe-edge);
  box-shadow: 0 20px 44px -20px var(--coe-glow);
}
.coe-card:hover::before, .coe-card:focus-visible::before { opacity: 1; }
.coe-card:focus-visible { outline: 3px solid var(--coe-edge); outline-offset: 3px; }
.coe-card > * { position: relative; }

.coe-card__top { display: flex; align-items: center; }
/* Several of the supplied "square" files are actually wordmarks. A fixed 46px
   box shrank them to a smudge, so the mark holds a constant height and takes
   whatever width its artwork needs, up to a limit the card can carry. */
.coe-logo { display: block; width: 130px; height: 44px; padding: 0; }
/* An explicit height, not max-height: the supplied files vary from 40px to
   800px intrinsic, and a cap alone left the small ones as specks. Height is
   fixed so every mark reads at the same optical weight; width follows the
   artwork. */
/* One box, contain, left-aligned. Neither a fixed height nor a fixed width
   works alone: the supplied artwork runs from 1.00 aspect (Microsoft and
   Splunk are square canvases with the mark floating in padding) to 4.66
   (Claude). A constant box lets each one take the dimension it needs and
   keeps every card's mark on the same baseline. */
.coe-logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.coe-mono {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
  font-size: 16px; font-weight: 800; letter-spacing: -0.02em;
}
.coe-card__name { font-size: 15px; font-weight: 700; line-height: 1.2; }
/* Two lines at most, and allowed to shrink. A 1fr grid row does not stop a
   card growing past it — the card spills, and on a short display that spill
   went under the deck controls. Clamping the one elastic line is what makes
   the row height mean something. */
.coe-card__tag {
  color: var(--muted); font-size: 11.5px; line-height: 1.38;
  min-height: 0; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.coe-card__foot {
  display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--border); color: var(--muted); font-size: 11.5px;
}
/* The design paints this label in each brand's own colour. Measured against
   white, 16 of the 19 fall below 4.5:1 — MongoDB's green is 1.58:1, which is
   barely a mark on the page at projector distance. The brand still owns the
   card: its mark, its tint on hover, its edge, its rule on the detail page.
   The one thing it does not get is the running text. */
.coe-card__go {
  display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
  color: var(--text); font-weight: 800;
}
.coe-card__go .ic { color: var(--coe-color); }

/* ------------------------------------------------------------- the detail */
.coe-detail {
  position: absolute; inset: 0; display: none; overflow-y: auto; overflow-x: hidden;
  padding: 32px 52px 40px; background: var(--surface);
  scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior: contain;
}
.coe-detail::-webkit-scrollbar { width: 0; height: 0; display: none; }
.coe-root.is-open .coe-detail { display: block; }

.coe-back {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--page-bg);
  color: var(--text); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
}
.coe-back:hover { border-color: var(--nav-accent, var(--brand-accent)); transform: translateX(-3px); }

.coe-hero { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin: 30px 0 0; }
.coe-logo--lg { display: block; width: 320px; height: 128px; padding: 0; border: 0; background: none; }
.coe-logo--lg img { width: 100%; height: 100%; }
.coe-mono--lg { width: 96px; height: 96px; border-radius: 24px; font-size: 34px; }
.coe-hero__name { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
.coe-hero__tag { margin: 6px 0 0; color: var(--muted); font-size: 16px; }

.coe-rule { height: 2px; margin: 24px 0 28px; border-radius: 2px; }

.coe-gal__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.coe-gal__head h4 { margin: 0; font-size: 19px; font-weight: 800; }
.coe-gal__head span { color: var(--muted); font-size: 12.5px; }
.coe-gal__none { color: var(--muted); font-size: 13.5px; }

/* A masonry, not a grid of boxes. Every photo here arrives at a different
   shape — a wide event banner, a portrait of a handshake, a square poster —
   and a fixed-height cell with object-fit: cover simply cut them: the Oracle
   poster showed one strip of a bullet list. Columns let each image keep its
   own proportions and take the height it needs, so nothing is cropped and
   nothing is stretched. */
.coe-gal { column-gap: 14px; column-fill: balance; }
.coe-tile {
  position: relative; margin: 0 0 14px; overflow: hidden;
  break-inside: avoid; -webkit-column-break-inside: avoid;
  border: 1px solid var(--border); border-radius: 14px; background: var(--page-bg);
}
/* Width-constrained, height free. With height:auto the intrinsic ratio does
   the work and object-fit never comes into it — the browser draws the picture
   the shape it actually is. */
.coe-tile__media { display: block; width: 100%; height: auto; }
.coe-tile figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px;
  background: rgba(9, 12, 20, 0.72); color: #ffffff; font-size: 12px; font-weight: 600;
}

.canvas-block--coe-wall {
  min-height: 860px !important; height: 100% !important; flex: 1 1 auto !important;
  display: flex !important; flex-direction: column !important; grid-row: 1 / -1 !important;
}
.slide--hero .coe-root { min-height: 860px !important; height: 100% !important; flex: 1 1 auto !important; border-radius: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .coe-card { transition: none !important; }
}

/* --- Centers of Excellence: motion ---------------------------------------
   Cards arrive in reading order, scatter out of the way when one is opened,
   and the detail rises into the space they leave. All of it is off under
   prefers-reduced-motion, where the component skips the sequence entirely. */
.coe-card.is-waiting { opacity: 0; transform: translateY(20px) scale(.97); }
.coe-card { transition: transform .42s cubic-bezier(.2,.8,.2,1), opacity .34s ease, box-shadow .32s ease, border-color .32s ease; }

.coe-detail { animation: coeDetailIn .5s cubic-bezier(.2,.8,.2,1) both; }
.coe-hero { animation: coeRise .45s .06s cubic-bezier(.2,.8,.2,1) both; }
.coe-rule { animation: coeRule .5s .16s cubic-bezier(.2,.8,.2,1) both; transform-origin: left center; }
.coe-gal__head { animation: coeRise .45s .18s cubic-bezier(.2,.8,.2,1) both; }
.coe-gal, .coe-gal__none { animation: coeRise .5s .24s cubic-bezier(.2,.8,.2,1) both; }
.coe-logo--lg, .coe-mono--lg { animation: coeMark .55s .1s cubic-bezier(.2,.9,.2,1) both; }

@keyframes coeDetailIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes coeRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes coeRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes coeMark { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .coe-card, .coe-card.is-waiting { transition: none !important; opacity: 1 !important; transform: none !important; }
  .coe-detail, .coe-hero, .coe-rule, .coe-gal__head, .coe-gal, .coe-gal__none,
  .coe-logo--lg, .coe-mono--lg { animation: none !important; }
}

/* --- Centers of Excellence: the orbit the page opens on -------------------
   Twenty marks circling the organization's own. Each ring spins as a single
   element and every logo counter-spins at the same rate, so the marks stay
   upright while the ring turns — two animations, not twenty. */
/* Two rows, so the cue can never sit on top of the ring: the wheel centres in
   the space that is left after the line has taken what it needs. */
.coe-orbit {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr); justify-items: center;
  padding: 26px 20px 30px; cursor: pointer; background: var(--surface);
}
.coe-root.is-wall .coe-orbit, .coe-root.is-open .coe-orbit { display: none; }
.coe-orbit:focus-visible { outline: 3px solid var(--nav-accent, var(--brand-accent)); outline-offset: -6px; }

.coe-orbit__field { position: relative; align-self: center; width: 640px; height: 640px; display: grid; place-items: center; }

.coe-ring {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: coeSpin linear infinite;
}
.coe-ring--rev { animation-direction: reverse; }
/* Still a hairline — the glow comes from the shadow, not from thickening the
   stroke. Tinted by the organization's accent through currentColor, so Torii
   lights orange and Technical Hub green without a second rule. */
.coe-ring__path {
  position: absolute; inset: 0; border-radius: 50%;
  color: var(--nav-accent, var(--brand-accent));
  border: 1px solid currentColor;
  box-shadow: 0 0 18px 0 currentColor, inset 0 0 22px 0 currentColor;
  opacity: .26;
  animation: coeRingGlow 5.5s ease-in-out infinite;
}
.coe-ring--rev .coe-ring__path { animation-delay: -2.75s; }
@keyframes coeRingGlow { 0%, 100% { opacity: .16; } 50% { opacity: .42; } }
.coe-seat { position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
.coe-seat__fix { position: absolute; top: 0; left: 0; width: 0; height: 0; }
/* No tile behind the mark. A white chip on a white page is a rectangle the
   eye has to ignore twenty times over; the logos sit on the page. */
.coe-seat__spin {
  position: absolute; top: 50%; left: 50%; display: grid; place-items: center;
  width: 104px; height: 66px; margin: -33px 0 0 -52px;
  animation: coeSpinSeat linear infinite;
}
.coe-seat__spin--rev { animation-direction: reverse; }
.coe-seat__spin .coe-logo { width: 92px; height: 52px; }

.coe-hub {
  position: relative; z-index: 2; display: grid; place-items: center;
  width: 190px; height: 190px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 18px 60px -22px rgba(15, 23, 42, 0.45);
}
.coe-hub img { max-width: 132px; max-height: 116px; object-fit: contain; }
.coe-hub b {
  font-family: 'Agency FB', 'Oswald', sans-serif; font-size: 54px;
  color: var(--nav-accent-ink, var(--accent-ink));
}

.coe-orbit__cue {
  margin: 0; padding-bottom: 4px; text-align: center; max-width: none; white-space: nowrap;
  font-family: 'Agency FB', 'Oswald', 'Saira Condensed', 'Arial Narrow', sans-serif;
  font-size: 36px; font-weight: 700; letter-spacing: 0.012em; text-transform: uppercase;
  color: var(--text);
}

@keyframes coeSpin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes coeSpinSeat { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* Collapsing: the rings draw in to the mark and fade before the wall shows. */
.coe-root.is-collapsing .coe-orbit__field { animation: coeCollapse .62s cubic-bezier(.5,0,.75,0) both; }
.coe-root.is-collapsing .coe-orbit__cue { animation: coeCueOut .3s ease both; }
@keyframes coeCollapse { to { transform: scale(.24); opacity: 0; } }
@keyframes coeCueOut { to { opacity: 0; transform: translateY(10px); } }

/* The wall waits behind the wheel until it is handed over. */
.coe-wall { display: none; }
.coe-root.is-wall .coe-wall { display: flex; flex-direction: column; }
.coe-root.is-open .coe-wall { display: none; }

@media (prefers-reduced-motion: reduce) {
  .coe-ring, .coe-seat__spin { animation: none !important; }
  .coe-root.is-collapsing .coe-orbit__field,
  .coe-root.is-collapsing .coe-orbit__cue { animation: none !important; }
}

/* --- Centers of Excellence: the headline ---------------------------------
   Not black. The organization's readable accent carries it, with a light
   sweeping across the letters.

   This is the one place the deck's no-gradient rule is set aside, and only
   inside the glyphs: the sweep is the effect, and it was asked for by name.
   The base colour is set on `color` as well, so if background-clip ever fails
   the headline is still a readable line rather than an invisible one. */
.coe-shine {
  color: var(--nav-accent-ink, var(--accent-ink));
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .coe-shine {
    background-image: linear-gradient(
      100deg,
      var(--nav-accent-ink, var(--accent-ink)) 0 42%,
      color-mix(in srgb, var(--nav-accent-ink, var(--accent-ink)) 32%, #ffffff) 50%,
      var(--nav-accent-ink, var(--accent-ink)) 58% 100%);
    background-size: 260% 100%;
    /* repeat, not no-repeat. The gradient is wider than the box and its
       position animates past both edges; with no-repeat the uncovered part of
       a multi-line heading painted as nothing at all and words vanished. */
    background-repeat: repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: coeShine 6.5s linear infinite;
  }
}
@keyframes coeShine { from { background-position: 130% 0; } to { background-position: -130% 0; } }

@media (prefers-reduced-motion: reduce) {
  .coe-shine { animation: none !important; }
  .coe-ring__path { animation: none !important; opacity: .26 !important; }
}

/* --- Centers of Excellence: clear the deck controls -----------------------
   The Prev / count / Exit pill is fixed 22px off the bottom of the viewport
   and stands about 50px tall, so the last row of cards was running underneath
   it. These paddings are in slide units and the slide is scaled to the
   display, so 96 here is ~82px on a 1366-wide screen and ~115px on a 1920 —
   comfortably clear at both ends without stealing height when not presenting. */
body.is-presenting .coe-wall,
body.is-presenting .coe-detail,
body.is-presenting .coe-orbit { bottom: 104px; }

/* ==========================================================================
   Success Stories — a wall of faces that keeps moving, and any one of them
   opens into the story beside it.

   The wall is columns, not a grid: each sits on an arc so the run reads as a
   wave, and each rises and falls on its own clock like the bars of an
   equaliser. The arc lives on the column and the bobbing on a wrapper inside
   it, because two transforms on one element means the animation wins and the
   wave flattens the moment it starts playing.
   ========================================================================== */
/* max-height, not just min-height. height:100% here resolves against a parent
   with no definite height, so it computes to auto and the flex children are
   free to grow — the portrait grew the stage, the stage grew the root to
   1625px, and the wall was pushed off the bottom of the slide. A definite
   ceiling is what lets flex shrink the stage instead. */
/* A moving wash in the organization's own colours behind the wall.
   This deck's rule is no gradients, and this is a deliberate exception: it was
   asked for by name. It is kept to a tint that never competes with a
   photograph — colour-mixed against the surface rather than laid over it — and
   it stops entirely under prefers-reduced-motion. */
.sw-root::before {
  content: ''; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 42% at 18% 22%,
      color-mix(in srgb, var(--nav-accent, var(--brand-accent)) 12%, transparent), transparent 62%),
    radial-gradient(34% 38% at 82% 12%,
      color-mix(in srgb, var(--nav-accent-ink, var(--accent-ink)) 10%, transparent), transparent 62%),
    radial-gradient(44% 40% at 60% 96%,
      color-mix(in srgb, var(--nav-accent, var(--brand-accent)) 9%, transparent), transparent 64%);
  animation: swDrift 26s ease-in-out infinite;
}
.sw-root > * { position: relative; z-index: 1; }
@keyframes swDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-3%, 2%, 0) scale(1.05); }
}

.sw-root {
  position: relative; height: 100%; min-height: 860px; max-height: 860px;
  overflow: hidden;
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg); background: var(--surface);
}
.sw-empty { display: grid; place-items: center; align-content: center; gap: 12px; height: 100%; color: var(--muted); text-align: center; }

/* -------------------------------------------------------------- the intro */
.sw-intro { flex: 0 0 auto; padding: 44px 56px 0; }
.sw-root.is-open .sw-intro { display: none; }
.sw-eyebrow {
  margin: 0 0 10px; color: var(--nav-accent-ink, var(--accent-ink));
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
}
.sw-title {
  margin: 0; max-width: 22ch;
  font-family: 'Agency FB', 'Oswald', 'Saira Condensed', 'Arial Narrow', sans-serif;
  font-size: 62px; font-weight: 700; line-height: 1.02; letter-spacing: 0.005em;
  text-transform: uppercase;
}
.sw-sub { margin: 14px 0 0; max-width: 56ch; color: var(--muted); font-size: 17px; line-height: 1.55; }

/* -------------------------------------------------------------- the stage */
.sw-stage {
  flex: 1 1 auto; min-height: 0; display: none;
/* 80/20 of the content box, not of the slide — the padding and the gap come
   off first. Measured: this puts the portrait at 75% of the full slide width,
   which is what was asked for. */
  grid-template-columns: 80fr 20fr;
  /* The row has to be told it may not exceed the stage. Left to itself it is
     auto-sized, so a tall portrait grew the row, the row grew the stage, and
     the wall was pushed off the bottom of the slide. */
  grid-template-rows: minmax(0, 1fr);
  gap: 26px; padding: 32px 32px 0;
}
.sw-root.is-open .sw-stage { display: grid; }
.sw-stage__shot {
  min-height: 0; overflow: hidden; border-radius: 18px;
  border: 1px solid var(--border); background: var(--page-bg);
  animation: swStageIn .45s cubic-bezier(.2,.8,.2,1) both;
}
.sw-stage__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sw-stage__side {
  min-width: 0; display: flex; flex-direction: column; gap: 10px; overflow: auto;
  scrollbar-width: none; animation: swSideIn .45s .08s cubic-bezier(.2,.8,.2,1) both;
}
.sw-stage__side::-webkit-scrollbar { width: 0; display: none; }
.sw-close {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--page-bg); color: var(--text);
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.sw-close:hover { border-color: var(--nav-accent, var(--brand-accent)); }
.sw-stage__name { margin: 8px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.sw-stage__role { margin: 0; color: var(--nav-accent-ink, var(--accent-ink)); font-size: 14px; font-weight: 700; }
.sw-stage__quote {
  margin: 10px 0 0; padding-left: 14px; border-left: 3px solid var(--nav-accent, var(--brand-accent));
  font-size: 17px; line-height: 1.5; font-style: italic;
}
.sw-stage__body { margin: 8px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }

/* --------------------------------------------------------------- the wall */
/* Flush to the floor of the slide, and to both edges. The columns rise from
   here rather than rocking about a midpoint, so their resting position is the
   bottom of the screen and nothing needs clearance underneath to bob into. */
.sw-wallwrap { flex: 0 0 auto; margin-top: auto; overflow: hidden; padding: 26px 0 0; }
.sw-root.is-open .sw-wallwrap { padding-top: 18px; }
/* Edge to edge, open or closed. Centring left a margin either side once the
   tiles shrank for the open state; space-between pins the first tile to the
   left edge and the last to the right whatever size they are. */
.sw-wall {
  display: flex; align-items: flex-end; justify-content: space-between;
  /* box-sizing means the padding comes out of the 100%, so the end tiles sit
     inside it rather than being pushed past the edge. */
  box-sizing: border-box; width: 100%; padding: 44px 10px 0;
}
.sw-col { display: block; will-change: transform; }
.sw-col__bob {
  display: flex; flex-direction: column; gap: 10px;
  animation-name: swBob; animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; animation-direction: alternate;
  will-change: transform;
}
@keyframes swBob { from { transform: translateY(0); } to { transform: translateY(-19px); } }
@keyframes swStageIn { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
@keyframes swSideIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

.sw-tile {
  position: relative; display: block; padding: 0; overflow: hidden; cursor: pointer;
  width: var(--sw-tile, 104px); height: var(--sw-shot, 138px);
  border: 0; border-radius: 12px; background: var(--page-bg);
  box-shadow: 0 10px 26px -14px rgba(15, 23, 42, 0.4);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, outline-color .2s ease;
  outline: 2px solid transparent; outline-offset: 2px;
}
.sw-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sw-tile:hover { transform: scale(1.07); box-shadow: 0 18px 36px -16px rgba(15, 23, 42, 0.5); }
.sw-tile.is-active { outline-color: var(--nav-accent, var(--brand-accent)); transform: scale(1.07); }
.sw-tile__name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px;
  background: linear-gradient(transparent, rgba(9, 12, 20, 0.78));
  color: #ffffff; font-size: 10px; font-weight: 700; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Smaller wall once a story is open — the portrait is the subject then. */
.sw-root.is-open .sw-tile { width: calc(var(--sw-tile, 104px) * 0.62); height: calc(var(--sw-shot, 138px) * 0.62); }
.sw-root.is-open .sw-tile__name { display: none; }

.canvas-block--story-wall {
  min-height: 860px !important; max-height: 860px !important; height: 100% !important; flex: 1 1 auto !important;
  display: flex !important; flex-direction: column !important; grid-row: 1 / -1 !important;
}
.slide--hero .sw-root { min-height: 860px !important; max-height: 860px !important; height: 100% !important; flex: 1 1 auto !important; border-radius: 0 !important; }

body.is-presenting .sw-wallwrap { padding-bottom: 78px; }

@media (prefers-reduced-motion: reduce) {
  .sw-root::before { animation: none !important; }
  .sw-col__bob { animation: none !important; }
  .sw-stage__shot, .sw-stage__side { animation: none !important; }
  .sw-tile { transition: none !important; }
}

/* ==========================================================================
   Programs — one card opens the whole set, a card opens its films, a film
   opens the screen.
   ========================================================================== */
.pg-root {
  position: relative; height: 100%; min-height: 860px; max-height: 860px;
  overflow: hidden; border-radius: var(--radius-lg); background: var(--surface);
}
.pg-root--empty { display: grid; place-items: center; color: var(--muted); font-size: 13px; }

.pg-wall { position: absolute; inset: 0; display: grid; place-items: center; padding: 40px 32px; }
.pg-root.is-gallery .pg-wall, .pg-root.is-playing .pg-wall { display: none; }

/* --------------------------------------------------------------- the cover */
.pg-cover {
  position: absolute; z-index: 20;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  width: 520px; padding: 44px 44px 38px;
  border: 1px solid var(--border); border-radius: 26px; background: var(--surface);
  box-shadow: 0 40px 90px -34px rgba(15, 23, 42, 0.34);
  cursor: pointer; font: inherit; text-align: left; color: inherit;
  transition: transform .55s cubic-bezier(.5,0,.75,0), opacity .4s ease;
}
/* The stack is drawn by the cover, not by the real cards standing behind it —
   a full-height card behind a short cover pokes out top and bottom. Two leaves,
   tucked and rotated, and they lean out a little further on hover. */
.pg-cover::before, .pg-cover::after {
  content: ''; position: absolute; inset: 14px 0 auto; z-index: -1;
  height: 100%; border: 1px solid var(--border); border-radius: 26px;
  background: var(--surface); box-shadow: 0 22px 50px -30px rgba(15, 23, 42, 0.3);
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.pg-cover::before { transform: translateY(16px) rotate(-2.4deg) scale(.965); }
.pg-cover::after { transform: translateY(9px) rotate(1.7deg) scale(.985); }
.pg-cover:hover::before { transform: translateY(22px) rotate(-4deg) scale(.955); }
.pg-cover:hover::after { transform: translateY(13px) rotate(3deg) scale(.978); }
.pg-cover {
  isolation: isolate;
}
.pg-cover:hover { border-color: var(--nav-accent, var(--brand-accent)); transform: translateY(-4px); }
.pg-cover:hover .pg-cover__go { transform: translateX(4px); }
.pg-cover__go { transition: transform .3s cubic-bezier(.22,1,.36,1); }
.pg-root.is-fanned .pg-cover { transform: scale(.86) translateY(-26px); opacity: 0; pointer-events: none; }
.pg-cover__eyebrow {
  color: var(--nav-accent-ink, var(--accent-ink));
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
}
.pg-cover__title {
  margin: 0; font-family: 'Agency FB', 'Oswald', 'Saira Condensed', sans-serif;
  font-size: 62px; font-weight: 700; line-height: 1.02; text-transform: uppercase;
  color: var(--nav-accent-ink, var(--accent-ink));
}
.pg-cover__count { color: var(--muted); font-size: 15px; }
.pg-cover__go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  padding: 11px 20px; border-radius: 999px;
  background: var(--nav-accent, var(--brand-accent)); color: #ffffff;
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
}

/* ----------------------------------------------------------------- the row */
.pg-row {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; width: 100%; height: 100%; max-height: 620px;
}
.pg-card {
  flex: 1 1 0; min-width: 0; max-width: 190px; height: 100%; max-height: 560px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 22px 12px 18px;
  border: 1px solid var(--border); border-radius: 18px; background: var(--surface);
  box-shadow: 0 20px 46px -24px rgba(15, 23, 42, 0.26);
  cursor: pointer; font: inherit; color: inherit; text-align: center;
  will-change: transform;
}
.pg-root:not(.is-fanned) .pg-card { pointer-events: none; }
/* The cards answer the pointer: the whole card lifts, its mark grows a little,
   and the film count turns to the accent. Cheap transforms only — ten of these
   animating at once on a projector is not the place for anything else. */
.pg-card {
  transition: transform .34s cubic-bezier(.22,1,.36,1), box-shadow .34s ease, border-color .3s ease;
}
.pg-root.is-fanned .pg-card:hover {
  transform: translateY(-14px) scale(1.04) !important;
  border-color: var(--nav-accent, var(--brand-accent));
  box-shadow: 0 34px 60px -26px rgba(15, 23, 42, 0.4);
  z-index: 5;
}
.pg-card__mark img, .pg-card__mark b { transition: transform .34s cubic-bezier(.22,1,.36,1); }
.pg-root.is-fanned .pg-card:hover .pg-card__mark img,
.pg-root.is-fanned .pg-card:hover .pg-card__mark b { transform: scale(1.1); }
.pg-root.is-fanned .pg-card:hover .pg-card__count { color: var(--nav-accent-ink, var(--accent-ink)); }
.pg-card__count { transition: color .3s ease; }
.pg-card:focus-visible { outline: 3px solid var(--nav-accent, var(--brand-accent)); outline-offset: 3px; }
.pg-card__mark { display: grid; place-items: center; flex: 1 1 auto; min-height: 0; width: 100%; }
.pg-card__mark img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pg-card__mark b { font-size: 40px; font-weight: 800; color: var(--nav-accent-ink, var(--accent-ink)); }
.pg-card__name { flex: 0 0 auto; font-size: 14px; font-weight: 800; line-height: 1.25; }
.pg-card__count { flex: 0 0 auto; color: var(--muted); font-size: 11.5px; font-weight: 700; }

/* ------------------------------------------------------- gallery & player */
.pg-gallery, .pg-player {
  position: absolute; inset: 0; display: none; background: #000000;
}
.pg-root.is-gallery .pg-gallery { display: grid; }
.pg-root.is-playing .pg-gallery { display: none; }
.pg-root.is-playing .pg-player { display: grid; }

/* Floated over the film, not a row above it. A bar in the layout took height
   off the player, and a 16:9 film in a shortened box letterboxes; given the
   whole 16:9 slide it fits to the pixel. */
.pg-bar {
  position: absolute; z-index: 5; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 16px; padding: 16px 24px;
  background: linear-gradient(rgba(0,0,0,.55), transparent);
  opacity: 0; transition: opacity .25s ease;
}
.pg-player:hover .pg-bar, .pg-bar:focus-within { opacity: 1; }
.pg-back {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--page-bg); color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.pg-back:hover { border-color: var(--nav-accent, var(--brand-accent)); }
.pg-gal__title, .pg-player__title { font-size: 19px; font-weight: 800; }

/* The films fill what is left of the slide. Two films are two half-screens,
   three are three — not a strip of thumbnails along the top. */
.pg-gal__grid {
  display: grid; min-height: 0;
  grid-template-columns: repeat(var(--pg-cols, 3), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 16px; padding: 20px 28px 24px;
}
.pg-gal__none { color: var(--muted); font-size: 14px; }

.pg-vid {
  display: block; min-height: 0; padding: 0;
  border: 0; background: none; cursor: pointer; font: inherit; color: inherit;
}
.pg-shot {
  position: relative; display: grid; place-items: center;
  width: 100%; height: 100%; overflow: hidden;
  border: 1px solid var(--border); border-radius: 16px; background: #0b0f18;
  transition: transform .25s ease, border-color .25s ease;
}
.pg-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-shot__play {
  position: relative; display: grid; place-items: center;
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(9, 12, 20, 0.6); color: #ffffff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
}
.pg-shot__name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 18px 14px;
  background: linear-gradient(transparent, rgba(6, 9, 15, 0.86));
  color: #ffffff; font-size: 15px; font-weight: 700; text-align: left;
}
.pg-vid:hover .pg-shot { transform: translateY(-3px); border-color: var(--nav-accent, var(--brand-accent)); }

.pg-player__frame { position: absolute; inset: 0; background: #000000; }
/* Swallows clicks on the film. Clicking an embed pauses it, and a paused
   YouTube player draws its title, its channel and a grid of More videos over
   the top — which is exactly what was showing. Nothing to click, nothing to
   pause, none of that ever appears. */
.pg-player__frame::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.pg-player__yt, .pg-player__file { width: 100%; height: 100%; border: 0; display: block; }

.canvas-block--program-deck {
  min-height: 860px !important; max-height: 860px !important; height: 100% !important;
  flex: 1 1 auto !important; display: flex !important; flex-direction: column !important;
  grid-row: 1 / -1 !important;
}
.slide--hero .pg-root { min-height: 860px !important; max-height: 860px !important; height: 100% !important; flex: 1 1 auto !important; border-radius: 0 !important; }

body.is-presenting .pg-gal__grid { padding-bottom: 100px; }
body.is-presenting .pg-wall { padding-bottom: 96px; }

@media (prefers-reduced-motion: reduce) {
  .pg-card, .pg-shot, .pg-cover { transition: none !important; }
}

/* ==========================================================================
   Testimonials — a row of arched portraits; a student plays across the screen.

   The arch is the shape from the reference: a tall rounded top on a straight
   base. Each sits on its own flat wash, light enough that the face stays the
   brightest thing in the frame.
   ========================================================================== */
.tw-root {
  position: relative; height: 100%; min-height: 860px; max-height: 860px;
  overflow: hidden; border-radius: var(--radius-lg); background: var(--surface);
}
.tw-root--empty { display: grid; place-items: center; color: var(--muted); font-size: 13px; }

.tw-wall {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: 44px 40px 40px;
}
.tw-root.is-playing .tw-wall { display: none; }

.tw-head { flex: 0 0 auto; }
.tw-eyebrow {
  margin: 0 0 10px; color: var(--nav-accent-ink, var(--accent-ink));
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
}
.tw-title {
  margin: 0; font-family: 'Agency FB', 'Oswald', 'Saira Condensed', sans-serif;
  font-size: 58px; font-weight: 700; line-height: 1.02; text-transform: uppercase;
  color: var(--nav-accent-ink, var(--accent-ink));
}

/* The row fills what is left and every arch shares it equally. */
/* Three across, two down, and every card shows the whole frame.

   The arch was the wrong container for this material. These are wide studio
   frames and each student stands somewhere different in theirs, so filling a
   tall shape meant cropping to a guessed window — which landed on empty wall
   for half of them, twice. A card at the frame's own proportions needs no
   guess: the picture is shown as it was shot. */
.tw-row {
  flex: 1 1 auto; min-height: 0;
  box-sizing: border-box; width: 100%;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 18px 20px; padding: 26px 0 0;
}
.tw-card {
  position: relative; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: center;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
  animation: twRise .6s cubic-bezier(.22,1,.36,1) both;
}
.tw-arch {
  position: relative; flex: 1 1 auto; min-height: 0; width: 100%; overflow: hidden;
  border-radius: 18px;
  transition: box-shadow .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.tw-arch img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* contain, not cover: the whole frame, never a slice of it. */
  object-fit: contain; object-position: center;
}
.tw-card:hover { transform: translateY(-6px); }
.tw-card:hover .tw-arch { box-shadow: 0 26px 50px -24px rgba(15, 23, 42, 0.4); }
.tw-card:focus-visible .tw-arch { outline: 3px solid var(--nav-accent, var(--brand-accent)); outline-offset: 3px; }
.tw-card__name { flex: 0 0 auto; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.tw-card__note { flex: 0 0 auto; color: var(--muted); font-size: 12.5px; }

.tw-card__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.86);
  display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%;
  background: rgba(9, 12, 20, 0.52); color: #ffffff;
  opacity: 0; transition: opacity .28s ease, transform .28s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.tw-card { position: relative; }
.tw-card:hover .tw-card__play, .tw-card:focus-visible .tw-card__play {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
}
.tw-card.is-active .tw-arch { outline: 3px solid var(--nav-accent, var(--brand-accent)); outline-offset: 3px; }

/* ------------------------------------------------------------- the player */
.tw-player {
  position: absolute; inset: 0; display: none; background: #000000;
}
.tw-root.is-playing .tw-player { display: grid; animation: twFade .35s ease both; }
@keyframes twFade { from { opacity: 0; } to { opacity: 1; } }

/* Floated over the film, not a row above it. A bar in the layout took height
   off the player, and a 16:9 film in a shortened box letterboxes; given the
   whole 16:9 slide it fits to the pixel. */
.tw-bar {
  position: absolute; z-index: 5; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 16px; padding: 16px 24px;
  background: linear-gradient(rgba(0,0,0,.55), transparent);
  opacity: 0; transition: opacity .25s ease;
}
.tw-player:hover .tw-bar, .tw-bar:focus-within { opacity: 1; }
.tw-back {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--page-bg); color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.tw-back:hover { border-color: var(--nav-accent, var(--brand-accent)); }
.tw-player__name { font-size: 19px; font-weight: 800; }
.tw-player__frame { position: absolute; inset: 0; background: #000000; }
/* Swallows clicks on the film. Clicking an embed pauses it, and a paused
   YouTube player draws its title, its channel and a grid of More videos over
   the top — which is exactly what was showing. Nothing to click, nothing to
   pause, none of that ever appears. */
.tw-player__frame::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.tw-player__yt, .tw-player__file { width: 100%; height: 100%; border: 0; display: block; }

.canvas-block--testimonial-wall {
  min-height: 860px !important; max-height: 860px !important; height: 100% !important;
  flex: 1 1 auto !important; display: flex !important; flex-direction: column !important;
  grid-row: 1 / -1 !important;
}
.slide--hero .tw-root { min-height: 860px !important; max-height: 860px !important; height: 100% !important; flex: 1 1 auto !important; border-radius: 0 !important; }

body.is-presenting .tw-wall { padding-bottom: 104px; }

@media (prefers-reduced-motion: reduce) {
  .tw-card, .tw-arch, .tw-card__play { animation: none !important; transition: none !important; }
  .tw-card { opacity: 1 !important; transform: none !important; }
}

/* --- Films fill the frame, the way the Executive Summary hero does ----------
   A 16:9 embed showing a 2.39:1 master letterboxes it — the bars are YouTube's,
   inside the player, so sizing the iframe to the box cannot remove them. The
   hero solves it by over-sizing the iframe and centring it, so the film's own
   picture covers the frame and the bars fall outside it. Same numbers here.

   1.34 is 2.39 divided by 1.78: exactly the zoom that takes a 2.39:1 picture
   letterboxed in a 16:9 player and makes its height fill the frame. */
/* The iframe must BE 16:9 and be sized to cover, not stretched to the window.
   Stretch it to a window that is not 16:9 and YouTube letterboxes the film
   inside the box you gave it — then zooming to hide those bars crops the
   picture, which is exactly what went wrong: bars still showing and the speaker
   cut off at the edge.

   max() gives the smallest 16:9 box that still covers the viewport, so the film
   fills it with no letterbox and only the necessary overflow is cropped. The
   1.04 is for the hairline the encode leaves at the very top and bottom. */
.pg-player__yt, .tw-player__yt {
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  width: max(100%, calc(100% * 16 / 9)) !important;
  height: max(100%, calc(100% * 9 / 16)) !important;
  transform: translate(-50%, -50%) scale(1.04) !important;
  border: 0 !important;
}
/* Portalled, the box is the window — and the sum has to reckon with the film,
   not just the player.

   These masters are 2.39:1 sitting inside a 16:9 upload, so YouTube letterboxes
   them within the player. Covering the window with the *player* still leaves
   those bars: the picture only occupies 1.78/2.39 = 0.744 of the player's
   height. To make the picture itself reach the top and bottom the player has to
   stand 1/0.744 = 1.344 times the viewport height, and 16:9 gives the width.

   100vh * 2.39 is that height times 16/9, written out. */
.tw-player.is-portal .tw-player__yt,
.pg-player.is-portal .pg-player__yt {
  width: max(100vw, calc(100vh * 2.39)) !important;
  height: max(calc(100vh * 1.344), calc(100vw * 0.5625)) !important;
  transform: translate(-50%, -50%) scale(1.02) !important;
}
.tw-player.is-portal, .pg-player.is-portal { overflow: hidden; }
/* Files are ours and are not letterboxed, so they cover honestly. */
.pg-player__file, .tw-player__file { width: 100%; height: 100%; object-fit: cover; }

/* --- A playing film owns the whole display --------------------------------
   The block's canvas is 860 tall inside a 900 slide, so a player pinned to the
   section stopped 40px short and left a white band with the deck controls
   floating in it. While presenting the player leaves the section's box and
   pins to the viewport instead: nothing is between it and the edges.

   z-index 30 sits under the deck bar's 40, so Prev / Next / Exit stay on top
   and clickable rather than being buried by the film. */
/* position:fixed does not help: FitSlide scales the slide with a transform, and
   a transformed ancestor becomes the containing block for fixed descendants —
   fixed and absolute resolve to the same 860px box. The gap is the box itself,
   so while presenting the section takes the slide's full 900 instead. */
body.is-presenting .canvas-block--testimonial-wall,
body.is-presenting .canvas-block--program-deck,
body.is-presenting .tw-root,
body.is-presenting .pg-root {
  min-height: 900px !important;
  max-height: 900px !important;
}
body.is-presenting .tw-player,
body.is-presenting .pg-player { z-index: 30; }

/* --- A playing film covers the display, not just the slide -----------------
   The player is moved to <body> while it plays, so it is outside FitSlide's
   transform and answers to the viewport. `display` has to be set here: the
   `.is-playing .tw-player` rule stops matching the moment the element leaves
   the section.

   z-index 35 keeps it under the deck bar's 40, so Prev / Next / Exit stay on
   top of the film and clickable — the film may cover them, the controls still
   win the click. */
.tw-player.is-portal,
.pg-player.is-portal {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 35;
  background: #000000;
}