/* ---------------------------------------------------------------------------------------------------------------
   Skip link, arrows, actions and buttons
   --------------------------------------------------------------------------------------------------------------- */
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--amber); color: var(--black); padding: 12px 18px;
  font-size: var(--small-size); font-weight: 600; text-decoration: none; border-radius: var(--radius-sm); }
.skip-link:focus { top: 12px; }

.arrow { width: 22px; height: auto; flex: none; transition: transform var(--t-mid) var(--ease); }
a:hover > .arrow:not(.ext), a:focus-visible > .arrow:not(.ext) { transform: translateX(5px); }
.arrow.ext { width: 13px; display: inline-block; vertical-align: 0.02em; margin-left: 0.3em; }
.chev { width: 16px; display: inline-block; margin-left: 4px; transition: transform var(--t-fast) var(--ease); }
[aria-expanded="true"] > .chev { transform: rotate(180deg); }

/* An action: words with a drawn arrow (the build adds the arrow). */
.action { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 500; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-block: 8px 6px; line-height: 1.3; }
.action .arrow:not(.ext) { color: var(--ember-ink); }
.band--dark .action .arrow:not(.ext), .hero .action .arrow:not(.ext), .image-band .action .arrow:not(.ext),
.panel--dark .action .arrow:not(.ext), .tile .action .arrow:not(.ext) { color: var(--amber); }
.band--gradient .action .arrow:not(.ext) { color: var(--black); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }

/* Buttons: amber on dark, black on light. */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 26px; border-radius: var(--pill);
  background: var(--black); color: var(--white); border: 1px solid var(--black); font-weight: 500; font-size: var(--small-size); text-decoration: none;
  cursor: pointer; transition: background var(--t-mid) var(--ease), color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease); }
.button .arrow { width: 20px; color: inherit !important; }
.button:hover { background: var(--ink); }
.band--dark .button, .hero .button, .image-band .button, .closing .button { background: var(--amber); color: var(--black); border-color: var(--amber); }
.band--dark .button:hover, .hero .button:hover, .image-band .button:hover { background: #ffad33; border-color: #ffad33; }
.button--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.button--ghost:hover { background: var(--ash); }
.band--dark .button--ghost, .hero .button--ghost, .image-band .button--ghost { background: transparent; color: var(--white); border-color: rgb(255 255 255 / 34%); }
.band--dark .button--ghost:hover, .hero .button--ghost:hover, .image-band .button--ghost:hover { background: rgb(255 255 255 / 10%); border-color: var(--white); }

/* Chips: status words on cards and records. */
.chip { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; font-size: var(--label-size); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; line-height: 1.2; padding: 6px 12px; border-radius: var(--pill); background: var(--ash); color: var(--ink); }
.band--dark .chip { background: rgb(255 255 255 / 10%); color: var(--white); }

/* ---------------------------------------------------------------------------------------------------------------
   Header: a quiet utility row above the main bar on desktop; one sheet below 1024 px.
   --------------------------------------------------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--black); color: var(--white); transition: transform var(--t-mid) var(--ease); }
.site-header.is-hidden { transform: translateY(-100%); }
.header-inner { position: relative; max-width: calc(var(--frame) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter);
  min-height: var(--header-main); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; min-height: 44px; flex: none; }
.brand .logo { width: 84px; height: auto; }
.site-header a { text-decoration: none; }
.nav-item[aria-current="page"], .disclosure[data-current] > .disclosure-button { box-shadow: inset 0 -2px 0 var(--amber); }
.nav-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; border-radius: var(--pill); background: var(--amber);
  color: var(--black); font-size: var(--small-size); font-weight: 600; white-space: nowrap; transition: background var(--t-mid) var(--ease); }
.nav-cta:hover { background: #ffad33; }
.nav-cta .arrow { width: 20px; color: var(--black); }
.site-header :focus-visible { outline-offset: 2px; }
.nav-cta:focus-visible { outline-color: var(--white); }

.nav-cta--bar { display: none; }
@media (max-width: 1023.98px) {
  .nav-cta--bar { display: inline-flex; margin-left: auto; min-height: 40px; padding: 0 16px; font-size: 0.9375rem; }
  .site-menu .nav-cta { display: none; }
  .header-inner { gap: 12px; }
}
.quiet-item[aria-current="page"] { color: var(--white); box-shadow: inset 0 -2px 0 var(--amber); }
.menu-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 4px 0 12px; background: none; border: 0;
  color: var(--white); font-size: var(--small-size); font-weight: 500; cursor: pointer; }
.menu-toggle svg { width: 24px; }
.menu-toggle .icon-close, .menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }
.disclosure-button { appearance: none; -webkit-appearance: none; background: none; border: 0; border-radius: 0; padding: 0; margin: 0;
  color: inherit; font: inherit; text-align: left; cursor: pointer; }
.disclosure-panel { list-style: none; margin: 0; }
.disclosure-panel[hidden] { display: none !important; }
.menu-name { display: block; font-weight: 500; }
.menu-note { display: block; font-size: var(--small-size); color: var(--on-dark-muted); font-weight: 400; }

html.menu-open { overflow: hidden; }
@media (max-width: 1023.98px) {
  .site-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--black); border-top: var(--hairline-dark);
    padding: 8px var(--gutter) 32px; height: calc(100vh - var(--header-main)); height: calc(100dvh - var(--header-main)); overflow-y: auto;
    overscroll-behavior: contain; }
  .site-header.menu-open .site-menu { display: block; }
  .nav-main, .nav-quiet { display: flex; flex-direction: column; }
  .site-menu .nav-item, .disclosure-button { display: flex; align-items: center; justify-content: space-between; min-height: 56px; font-size: 1.25rem;
    font-weight: 500; border-bottom: var(--hairline-dark); width: 100%; color: var(--white); }
  .disclosure-button .chev { width: 20px; }
  .disclosure-panel { padding: 8px 0 12px; border-bottom: var(--hairline-dark); }
  .disclosure-panel a { display: block; padding: 10px 0 10px 16px; color: var(--white); }
  .disclosure-panel .rule { height: 1px; background: var(--line-dark); margin: 6px 0 6px 16px; }
  .nav-quiet { margin-top: 20px; }
  .quiet-item { display: flex; align-items: center; min-height: 44px; font-size: var(--small-size); color: var(--on-dark-muted); }
  .site-menu .nav-cta { margin-top: 24px; min-height: 52px; width: 100%; justify-content: center; font-size: 1.0625rem; }
}
@media (min-width: 1024px) {
  .menu-toggle { display: none; }
  .header-inner { padding-top: var(--header-quiet); min-height: calc(var(--header-main) + var(--header-quiet)); }
  .site-header::before { content: ''; position: absolute; left: 0; right: 0; top: var(--header-quiet); border-top: var(--hairline-dark); }
  .brand .logo { width: 92px; }
  .site-menu { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 32px; min-height: var(--header-main); }
  .nav { flex: 1; display: flex; justify-content: center; }
  .nav-main { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); }
  .nav-item, .disclosure-button { display: inline-flex; align-items: center; min-height: var(--header-main); font-size: var(--small-size); font-weight: 500; color: var(--white); }
  .nav-item:hover, .disclosure-button:hover { color: var(--amber); }
  .nav-quiet { position: absolute; top: 0; right: var(--gutter); height: var(--header-quiet); display: flex; align-items: center; gap: 28px; }
  .quiet-item { display: inline-flex; align-items: center; min-height: var(--header-quiet); font-size: var(--label-size); color: var(--on-dark-muted); }
  .quiet-item:hover { color: var(--white); }
  .disclosure { position: relative; display: inline-flex; }
  .disclosure-panel { position: absolute; top: calc(100% - 6px); left: -24px; min-width: 280px; background: var(--panel); border: var(--hairline-dark);
    border-radius: var(--radius); padding: 10px; z-index: 60; box-shadow: 0 24px 60px -20px rgb(0 0 0 / 70%); }
  .disclosure-panel a { display: block; padding: 12px 16px; border-radius: var(--radius-sm); color: var(--white); }
  .disclosure-panel a:hover { background: rgb(255 255 255 / 6%); }
  .disclosure-panel a:hover .menu-name { color: var(--amber); }
  .disclosure-panel .rule { height: 1px; background: var(--line-dark); margin: 6px 16px; }
  .disclosure--wide .disclosure-panel { display: grid; grid-template-columns: repeat(2, minmax(250px, 1fr)); width: 600px; gap: 2px; }
  .disclosure--wide .disclosure-panel .rule { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Bands: white (default), ash, dark and the gradient (once per page). Every band has an id.
   --------------------------------------------------------------------------------------------------------------- */
.band { position: relative; padding-block: var(--section); background: var(--paper); }
.band:not([class*="band--"]) + .band:not([class*="band--"]) { border-top: var(--hairline); }
.band--white { background: var(--white); }
.band--stone, .band--ash { background: var(--ash); }
.band--dark { background: var(--black); color: var(--white); }
.band--dark .label, .band--dark .card-label { color: var(--amber); }
.band--dark .muted, .band--dark .intro { color: var(--on-dark-muted); }
.band--gradient { background: var(--gradient); color: var(--ink-strong); }
.band--gradient .label, .band--gradient .muted { color: var(--ink-strong); }
.band--tight { padding-block: clamp(48px, 6vw, 88px); }
.band--flush-top { padding-top: 0; }
.band--intro { padding-block: clamp(48px, 6vw, 88px) 0; }
.band--intro + .band { border-top: 0 !important; }
.band h2 { max-width: 20ch; }
.band > .frame > h2 + * { margin-top: clamp(28px, 4vw, 56px); }
.band p + p { margin-top: 1em; }
.band--dark a:not(.button):not(.nav-cta) { color: var(--white); }
.intro { font-size: var(--lede-size); line-height: 1.45; max-width: 46ch; color: var(--muted); }
.band > .frame > .intro:first-child { margin-bottom: clamp(28px, 4vw, 48px); }

/* Band heading: label, heading, introduction and action in one column (decision 8). band-head--split puts the
   introduction and action beside the heading on wide screens: at most once a page, where the band opts in.
   band-head--stack is kept as an alias for the default. */
.band-head { display: grid; grid-template-columns: minmax(0, 60ch) auto; justify-content: start; align-items: end; gap: 14px 40px;
  margin-bottom: clamp(28px, 3vw, 44px); }
.band-head > * { grid-column: 1 / -1; }
.band-head > .intro + .band-head-action, .band-head > .intro + .actions { grid-column: 2; }  /* the action on the lede's line, after it */
.band-head > .intro { grid-column: 1; }
.band-head .label { margin-bottom: 0; }
.band-head h2 { max-width: 24ch; }
.band-head .intro { max-width: 60ch; }
.band-head .actions, .band-head .band-head-action { margin-top: 0; justify-self: start; }
.band-head > .label + h2 { margin-top: -2px; }
@media (max-width: 767.98px) { .band-head { grid-template-columns: minmax(0, 1fr); } .band-head > * { grid-column: 1 !important; } }
@media (min-width: 1024px) {
  .band-head--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: end; }
  .band-head--split > :not(.intro):not(.band-head-action):not(.actions) { grid-column: 1 !important; }
  .band-head--split > .intro, .band-head--split > .band-head-action, .band-head--split > .actions { grid-column: 2 !important; }
  .band-head--split > .label + h2 { grid-row: 2; }
  .band-head--split > .intro { grid-row: 1 / 3; align-self: end; max-width: 44ch; }
  .band-head--split > .band-head-action, .band-head--split > .actions { grid-row: 3; }
  .band-head--centre { text-align: center; justify-items: center; }
}
@media (min-width: 768px) { .band-head-action .action { white-space: nowrap; } }

.split { display: grid; gap: clamp(28px, 4vw, 64px); }
.split > * { min-width: 0; }
@media (min-width: 1024px) {
  .split { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; }
  .split-text { grid-column: 1 / 6; }
  .split-aside { grid-column: 7 / 13; }
}
.split-text > * + * { margin-top: 1em; }
.split-text p, .split-text li { max-width: 62ch; }
.split-aside > * + * { margin-top: clamp(20px, 2.4vw, 32px); }

/* Prose: a readable column for long text on any page. */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); margin-top: 1.6em; max-width: none; }
.prose h3 { margin-top: 1.4em; }
.prose a { color: var(--ember-ink); overflow-wrap: anywhere; }
.band--dark .prose a { color: var(--amber); }

/* ---------------------------------------------------------------------------------------------------------------
   The home hero: rich black, Version 03's moving sun at the right (a still poster for anyone who asks for less
   motion, or without script), the sector eyebrow, 'Intelligence, integrated.' with amber 'integrated.', the H1, the
   regulated promise, two actions, and the proof line with the motion button along the foot.
   --------------------------------------------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; isolation: isolate; background: var(--black); color: var(--white); display: flex; flex-direction: column; }
.hero-media { position: relative; z-index: -1; pointer-events: none; }
.hero-sun { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.hero-glow { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(60% 70% at 100% 45%, rgb(234 71 0 / 26%), rgb(234 71 0 / 0%) 70%); }
.hero-inner { position: relative; width: 100%; max-width: calc(var(--frame) + 2 * var(--gutter)); margin-inline: auto; padding: clamp(32px, 6vw, 88px) var(--gutter) 40px; }
.hero-eyebrow { font-size: var(--label-size); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4; color: var(--on-dark-muted);
  margin-bottom: clamp(14px, 2vw, 28px); max-width: 40ch; }
@media (max-width: 767.98px) {
  /* Phones: the brand line, H1 and first action fit a 375 x 548 screen. */
  .hero-eyebrow { letter-spacing: 0.08em; margin-bottom: 12px; }
  .hero-inner { padding-top: 22px; }
  .hero-brand { font-size: clamp(2.75rem, 1.2rem + 7vw, 4rem); }
  .hero-h1 { margin-top: 16px; font-size: clamp(1.1875rem, 1rem + 1vw, 1.375rem); }
  .hero-claim { margin-top: 10px; font-size: var(--small-size); }
  .hero-actions { margin-top: 18px; }
}
.hero-brand { font-size: var(--display-size); font-weight: 400; letter-spacing: var(--display-track); line-height: 0.92; margin: 0; }
.hero-brand span { display: block; }
.hero-brand span + span { color: var(--amber); }
.hero-h1 { margin-top: clamp(24px, 3vw, 40px); font-size: clamp(1.375rem, 1.12rem + 1.05vw, 2.125rem); font-weight: 420; letter-spacing: -0.02em;
  line-height: 1.22; max-width: 28ch; }
.hero-claim { margin-top: 18px; font-size: var(--body-size); color: var(--on-dark-muted); max-width: 46ch; }
.hero-claim a { color: var(--white); text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 0.22em; }
.hero-actions { margin-top: clamp(28px, 3.4vw, 44px); display: flex; flex-wrap: wrap; gap: 14px; }
.hero-proof { position: relative; width: 100%; border-top: var(--hairline-dark); background: rgb(10 10 10 / 72%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hero-proof ul { list-style: none; max-width: calc(var(--frame) + 2 * var(--gutter)); margin-inline: auto; padding: 0 var(--gutter); display: grid; }
.hero-proof li { display: flex; }
.hero-proof a, .hero-proof span.proof-item { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding-block: 12px;
  font-size: var(--small-size); line-height: 1.35; color: var(--white); text-decoration: none; }
.hero-proof .proof-text { font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem); }
.hero-proof a:hover .proof-text { text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 0.22em; }
.hero-proof .proof-mark { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgb(255 153 0 / 18%); }
@media (max-width: 1023.98px) {
  .hero-inner { order: 1; }
  .hero-glow { background: radial-gradient(90% 40% at 100% 82%, rgb(234 71 0 / 30%), rgb(234 71 0 / 0%) 70%); }
  .hero-media { order: 2; height: clamp(150px, 42vw, 300px); margin-top: -8px; }
  .hero-proof { order: 3; }
  .hero-sun { object-position: 0% 50%; transform-origin: 0 50%; }
  .hero-media::before { content: ''; position: absolute; inset: 0 0 auto; height: 40%; background: linear-gradient(var(--black), rgb(10 10 10 / 0%)); z-index: 1; }
  .hero-proof li + li { border-top: var(--hairline-dark); }
}
@media (min-width: 1024px) {
  .hero { min-height: clamp(640px, calc(100svh - var(--header-main) - var(--header-quiet)), 900px); }
  /* The sun keeps its shape: the picture is as tall as the hero and sits at the right edge (pushed further right on
     narrower screens so it never runs under the words). */
  .hero-media { position: absolute; top: 0; bottom: 0; right: var(--sun-shift, 0px); height: 100%; width: auto; aspect-ratio: 16 / 9; overflow: hidden; }
  .hero-sun { object-position: 100% 50%; }
  .hero-inner { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: 72px 56px; }
  .hero-h1 { max-width: 30ch; }
  .hero-eyebrow { max-width: none; }
  .hero-claim { max-width: 44ch; }
  .hero-proof ul { grid-template-columns: repeat(3, 1fr); }
  .hero-proof li + li { border-left: var(--hairline-dark); padding-left: 28px; }
  .hero-proof li:not(:last-child) { padding-right: 28px; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) { .hero { --sun-shift: -150px; } }
@media (min-width: 1280px) and (max-width: 1439.98px) { .hero { --sun-shift: -60px; } }
@media (prefers-reduced-motion: no-preference) {

  .hero-sun { animation: sun-in 1600ms var(--ease) both; }
  @keyframes sun-in { from { opacity: 0; transform: translateY(4%) scale(1.08); } to { opacity: 1; transform: none; } }
  @supports (animation-timeline: view()) {
    .hero-media { animation: sun-set linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    @keyframes sun-set { to { transform: translateY(18%) scale(1.08); opacity: 0.55; } }
  }
}

/* ---------------------------------------------------------------------------------------------------------------
   Page opening on inner pages: black, with the H1 large. With a photograph it is full-bleed, words over its foot.
   --------------------------------------------------------------------------------------------------------------- */
.page-opening { position: relative; isolation: isolate; overflow: hidden; background: var(--black); color: var(--white);
  padding-block: clamp(36px, 6vw, 96px) clamp(48px, 7vw, 112px); }
.page-opening::after { content: ''; position: absolute; z-index: -1; right: -12vw; top: -30vw; width: 52vw; height: 52vw; border-radius: 50%;
  background: radial-gradient(circle, rgb(255 153 0 / 22%), rgb(234 71 0 / 8%) 45%, rgb(234 71 0 / 0%) 70%); pointer-events: none; }
.page-opening h1 { max-width: 18ch; margin-top: 20px; }
.page-opening .kicker { margin-top: 28px; font-size: var(--lede-size); color: var(--amber); font-weight: 450; letter-spacing: -0.01em; }
.page-opening .kicker + h1 { margin-top: 8px; }
.page-opening .lede { margin-top: 24px; color: var(--on-dark-muted); max-width: 46ch; }
.page-opening .crumbs a, .page-opening .crumbs li { color: var(--on-dark-muted); }
.page-opening.has-image { padding: 0; display: flex; flex-direction: column; }
.opening-image { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.opening-image img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 1024px) { .opening-image img { object-position: 50% 18%; } }
.page-opening.has-image .opening-inner { padding-block: 28px 56px; }
.page-opening.has-image::after { display: none; }
@media (min-width: 768px) {
  .page-opening.has-image { min-height: clamp(520px, 72vh, 780px); justify-content: flex-end; }
  .opening-image { position: absolute; inset: 0; aspect-ratio: auto; z-index: -1; }
  .opening-image::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgb(10 10 10 / 88%) 0%, rgb(10 10 10 / 70%) 38%, rgb(10 10 10 / 10%) 72%), var(--scrim); }
  .page-opening.has-image .opening-inner { padding-block: 140px clamp(48px, 6vw, 88px); }
  .page-opening.has-image .lede { color: #e4e4e8; }
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--label-size); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); }
.crumbs li + li::before { content: '/'; margin-right: 10px; opacity: 0.6; }
.crumbs a { color: inherit; text-decoration: none; display: inline-flex; min-height: 24px; align-items: center; }
.crumbs a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------------------------------------------
   Image band: a full-bleed photograph with words over it; .image-band--plain is the picture alone.
   --------------------------------------------------------------------------------------------------------------- */
.image-band { position: relative; isolation: isolate; overflow: hidden; background: var(--black); color: var(--white); display: flex; align-items: flex-end;
  min-height: clamp(460px, 74vh, 760px); }
.image-band-media { position: absolute; inset: 0; z-index: -1; margin: 0; }
.image-band-media img { width: 100%; height: 100%; object-fit: cover; }
.image-band-media::after { content: ''; position: absolute; inset: 0; background: var(--scrim); }
.image-band-text { padding-block: 120px clamp(48px, 6vw, 88px); }
.image-band-text h2 { max-width: 16ch; }
.image-band-text p { max-width: 48ch; color: #e4e4e8; font-size: var(--lede-size); line-height: 1.4; margin-top: 18px; }
.image-band-text .label { color: var(--amber); margin-bottom: 14px; }
.image-band-text .actions { margin-top: 28px; }
@media (min-width: 1024px) {
  .image-band-media::after { background: linear-gradient(90deg, rgb(10 10 10 / 82%) 0%, rgb(10 10 10 / 55%) 40%, rgb(10 10 10 / 0%) 70%), var(--scrim); }
  .image-band--right .image-band-media::after { background: linear-gradient(270deg, rgb(10 10 10 / 82%) 0%, rgb(10 10 10 / 55%) 40%, rgb(10 10 10 / 0%) 70%), var(--scrim); }
  .image-band--right .image-band-text { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
}
.image-band--plain { min-height: 0; display: block; }
.image-band--plain .image-band-media { position: relative; aspect-ratio: 4 / 3; }
.image-band--plain .image-band-media::after { display: none; }
@media (min-width: 768px) { .image-band--plain .image-band-media { aspect-ratio: 3 / 1; } }
.image-band figcaption { font-size: var(--small-size); color: var(--on-dark-muted); padding: 12px var(--gutter); }

/* ---------------------------------------------------------------------------------------------------------------
   Panels: big photo panels (the four service lines). The panel's action covers the whole panel.
   --------------------------------------------------------------------------------------------------------------- */
.panels { list-style: none; display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 900px) { .panels { grid-template-columns: repeat(2, 1fr); } .panels--three { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) and (max-width: 1199.98px) { .panels--three { grid-template-columns: repeat(2, 1fr); } }
.panel { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); background: var(--white);
  box-shadow: var(--card-shadow); transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease); }
.band--stone .panel, .band--ash .panel { background: var(--white); }
.band:not(.band--stone):not(.band--ash):not(.band--dark) .panel { background: var(--ash); box-shadow: none; }
.band--dark .panel, .panel.panel--dark, .band .panel.panel--dark { background: var(--panel); color: var(--white); box-shadow: none; border: 1px solid #222224; }
.panel-media { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist); }
.band--dark .panel-media { background: var(--panel-2); }
.panel-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.panel:hover .panel-media img { transform: scale(1.04); }
.panel:hover { transform: translateY(-4px); }
.panel-body { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.8vw, 40px); }
.panel-label { display: flex; align-items: center; gap: 12px; font-size: var(--label-size); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember-ink); }
.band--dark .panel-label, .panel--dark .panel-label, .band .panel--dark .panel-label { color: var(--amber); }
.panel-num { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: var(--pill);
  border: 1px solid currentColor; letter-spacing: 0.04em; }
.panel h3 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); font-weight: 430; letter-spacing: -0.035em; line-height: 1.04; max-width: 16ch; }
.panel p { max-width: 52ch; }
.band--dark .panel p, .panel--dark p { color: #d6d6da; }
.panel-proof { margin-top: auto !important; padding: 14px 0 0 0; border-top: var(--hairline); font-size: var(--small-size); }
.band--dark .panel-proof, .panel--dark .panel-proof { border-top-color: var(--line-dark); }
.panel-proof strong { font-weight: 600; color: var(--ink); }
.band--dark .panel-proof strong, .panel--dark .panel-proof strong { color: var(--white); }
.panel .action { align-self: flex-start; position: static; }
.panel .action::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.panel .action:focus-visible { outline: none; }
.panel:has(.action:focus-visible) { outline: 3px solid var(--focus-dark); outline-offset: 4px; }
.band:not(.band--dark) .panel:has(.action:focus-visible) { outline-color: var(--focus-light); }
@media (min-width: 900px) {
  .panel--wide { grid-column: 1 / -1; flex-direction: row; }
  .panel--wide .panel-media { flex: 0 0 55%; aspect-ratio: auto; min-height: 420px; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Tiles: photographs with words over their foot (sectors). .tile--plain has no picture.
   --------------------------------------------------------------------------------------------------------------- */
.tiles { list-style: none; display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 768px) { .tiles { grid-template-columns: repeat(12, 1fr); } .tile { grid-column: span 6; } .tile--wide { grid-column: span 7; } .tile--narrow { grid-column: span 5; } .tile--full { grid-column: 1 / -1; } .tile--third { grid-column: span 4; } }
.tile { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-lg); background: var(--black); color: var(--white);
  display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(400px, 46vw, 600px); }
.tile--short { min-height: clamp(340px, 30vw, 440px); }
.tile-media { position: absolute; inset: 0; z-index: -1; margin: 0; }
.tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.tile:hover .tile-media img { transform: scale(1.04); }
.tile-media::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(10 10 10 / 0%) 18%, rgb(10 10 10 / 62%) 52%, rgb(10 10 10 / 94%) 100%); }
.tile-body { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 12px; }
.tile-body .label { color: var(--amber); }
.tile h3 { font-size: clamp(1.875rem, 1.4rem + 1.8vw, 3rem); font-weight: 430; letter-spacing: -0.035em; line-height: 1.02; }
.tile h3 a { text-decoration: none; display: inline-flex; align-items: center; gap: 14px; }
.tile h3 a::after, .tile-title-end::after { content: ''; width: 0.62em; height: 0.62em; flex: none; margin-top: 0.08em;
  background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18'%3E%3Cpath d='M1 9h22M17 3l6 6-6 6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18'%3E%3Cpath d='M1 9h22M17 3l6 6-6 6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  color: var(--amber); transition: transform var(--t-mid) var(--ease); }
.tile h3 a:hover::after, .tile h3 a:hover .tile-title-end::after { transform: translateX(5px); }
.tile h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; text-decoration-color: var(--amber); }
.tile p { color: #e4e4e8; max-width: 46ch; }
.tile--plain { background: var(--panel); border: 1px solid #222224; }
.tile--plain::before { content: ''; position: absolute; z-index: -1; right: -20%; top: -40%; width: 80%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgb(255 153 0 / 30%), rgb(234 71 0 / 10%) 45%, rgb(234 71 0 / 0%) 70%); }
.case-links { list-style: none; display: grid; gap: 0; margin-top: 6px; border-top: var(--hairline); }
.case-links li { border-bottom: var(--hairline); }
.case-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding-block: 10px; font-size: var(--small-size);
  font-weight: 500; text-decoration: none; color: var(--ink); }
.case-links a::after { content: ''; width: 18px; height: 12px; flex: none; background: var(--ember-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18'%3E%3Cpath d='M1 9h22M17 3l6 6-6 6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18'%3E%3Cpath d='M1 9h22M17 3l6 6-6 6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--t-mid) var(--ease); }
.case-links a:hover { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 0.2em; }
.case-links a:hover::after { transform: translateX(4px); }
.tile .case-links, .band--dark .case-links, .image-band .case-links { border-top-color: rgb(255 255 255 / 20%); }
.tile .case-links li, .band--dark .case-links li, .image-band .case-links li { border-bottom-color: rgb(255 255 255 / 20%); }
.tile .case-links a, .band--dark .case-links a, .image-band .case-links a { color: var(--white); }
.tile .case-links a::after, .band--dark .case-links a::after, .image-band .case-links a::after { background: var(--amber); }
.tile .case-links a:hover, .band--dark .case-links a:hover { text-decoration-color: var(--amber); }

/* ---------------------------------------------------------------------------------------------------------------
   Cards: a grid of white cards (.cards--two, --four); .card--photo carries a picture.
   --------------------------------------------------------------------------------------------------------------- */
.cards { list-style: none; display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } .cards--two { grid-template-columns: repeat(2, 1fr); } .cards--four { grid-template-columns: repeat(4, 1fr); } }
.card { position: relative; background: var(--white); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: clamp(24px, 2.4vw, 34px);
  display: flex; flex-direction: column; gap: 12px; overflow: hidden; transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease); }
.band:not(.band--stone):not(.band--ash):not(.band--dark):not(.band--gradient):not(.band--related) .card { background: var(--ash); box-shadow: none; }
.band--dark .card { background: var(--panel); border: 1px solid #222224; box-shadow: none; }
.band--gradient .card { background: rgb(255 255 255 / 92%); box-shadow: none; }
.card:has(h3 a):hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.card h3 { font-size: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem); }
.card h3 a { text-decoration: none; }
.card h3 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.card:hover h3 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.card-label { font-size: var(--label-size); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember-ink); }
.band--dark .card p:not(.card-label) { color: #d6d6da; }
.card p { font-size: var(--small-size); }
.card .action { margin-top: auto; align-self: flex-start; position: relative; z-index: 1; }
.card--photo { padding: 0; }
.card--photo .card-media { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--mist); }
.card--photo .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.card--photo:hover .card-media img { transform: scale(1.04); }
.card--photo > :not(.card-media) { margin-inline: clamp(22px, 2.2vw, 30px); }
.card--photo > :last-child { margin-bottom: clamp(22px, 2.2vw, 30px); }
.card--photo .card-media + * { margin-top: 10px; }
.card.person img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }

/* ---------------------------------------------------------------------------------------------------------------
   Case cards (generated): photo cards with the first figure. Wrap the list in .cases-feature to make the first
   card the large one.
   --------------------------------------------------------------------------------------------------------------- */
.case-grid { list-style: none; display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 700px) { .case-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .case-grid { grid-template-columns: repeat(3, 1fr); } }
.case-card { display: flex; min-width: 0; }
.case-link { position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: var(--radius); background: var(--white);
  box-shadow: var(--card-shadow); text-decoration: none; color: var(--ink); transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease); }
.band:not(.band--stone):not(.band--ash):not(.band--dark) .case-link { background: var(--ash); box-shadow: none; }
.band--dark .case-link { background: var(--panel); color: var(--white); box-shadow: none; border: 1px solid #222224; }
.case-link:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); }
.case-image { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--mist); flex: none; }
.case-image--whole { background: #fff; }
.case-image--whole img { object-fit: contain !important; }
.case-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.case-link:hover .case-image img { transform: scale(1.04); }
.case-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2.2vw, 30px); }
.case-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: var(--label-size); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ember-ink); line-height: 1.2; }
.band--dark .case-meta { color: var(--amber); }
.case-status { color: var(--muted); padding: 4px 10px; border-radius: var(--pill); border: 1px solid var(--line-strong); letter-spacing: 0.06em; }
.band--dark .case-status { color: var(--on-dark-muted); border-color: var(--line-dark); }
.case-title { font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.5625rem); font-weight: 480; letter-spacing: -0.02em; line-height: 1.18; text-wrap: balance; }
.case-link:hover .case-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.case-client { font-size: var(--small-size); color: var(--muted); }
.case-lede { display: none; font-size: var(--lede-size); line-height: 1.42; color: var(--ink); max-width: 46ch; }
.band--dark .case-client { color: var(--on-dark-muted); }
.card-figures { margin-top: auto; display: block; }
.case-figure ~ .case-figure { display: none; }
.case-figure { padding-top: 14px; border-top: var(--hairline); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--small-size); color: var(--muted); }
.band--dark .case-figure { border-top-color: var(--line-dark); color: var(--on-dark-muted); }
.case-figure strong { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); font-weight: 430; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.band--dark .case-figure strong { color: var(--amber); }
.case-card--plain .case-link { background: var(--black); color: var(--white); }
.case-card--plain .case-body { padding-top: clamp(28px, 3vw, 40px); }
.case-card--plain .case-meta { color: var(--amber); }
.case-card--plain .case-status { color: var(--on-dark-muted); border-color: var(--line-dark); }
.case-card--plain .case-client { color: var(--on-dark-muted); }
.case-card--plain .case-figure { border-top-color: var(--line-dark); color: var(--on-dark-muted); }
.case-card--plain .case-figure strong { color: var(--amber); font-size: var(--figure-size); }
@media (min-width: 1100px) {
  .cases-feature .case-grid { grid-auto-flow: dense; }
  .cases-feature .case-card:first-child { grid-column: span 2; grid-row: span 2; }
  .cases-feature .case-card:first-child .case-image { aspect-ratio: 16 / 9; }
  .cases-feature .case-card:first-child .case-title { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.75rem); letter-spacing: -0.035em; line-height: 1.06; max-width: 22ch; }
  .cases-feature .case-card:first-child .case-body { padding: 36px 40px 40px; gap: 14px; }
  .cases-feature .case-card:first-child .case-figure strong { font-size: var(--figure-size); }
  .cases-feature .case-card:first-child .case-lede { display: block; }
  /* The large card shows up to three figures side by side, so it carries the evidence instead of white space. */
  .cases-feature .case-card:first-child .card-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 28px; margin-top: 8px; }
  .cases-feature .case-card:first-child .case-image { flex: 1 1 auto; aspect-ratio: auto; min-height: 300px; }
  .cases-feature .case-card:first-child .case-figure { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .cases-feature .case-card:first-child .card-figures .case-figure strong { font-size: clamp(1.75rem, 1.2rem + 1vw, 2.5rem); overflow-wrap: anywhere; }
}
@media (min-width: 700px) and (max-width: 1099.98px) {
  .cases-feature .case-card:first-child { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Stat strip (generated facts) and award marks
   --------------------------------------------------------------------------------------------------------------- */
.stats { list-style: none; display: grid; gap: 0 var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { display: flex; flex-direction: column; gap: 10px; padding: 22px 0 26px; border-top: 2px solid var(--ink); }
.stat strong { font-size: var(--figure-size); font-weight: 400; letter-spacing: -0.05em; line-height: 0.95; }
.stat span { font-size: var(--small-size); line-height: 1.4; color: var(--muted); max-width: 22ch; }
.band--dark .stat { border-top-color: var(--amber); }
.band--dark .stat strong { color: var(--white); }
.band--dark .stat span { color: var(--on-dark-muted); }
.band--gradient .stat { border-top-color: var(--black); }
.band--gradient .stat span { color: var(--ink-strong); }

.marks { list-style: none; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .marks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .marks { grid-template-columns: repeat(3, 1fr); } }
.mark { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 16px 58px; border-radius: var(--radius-sm); background: var(--ash); }
.mark::before { content: ''; position: absolute; left: 18px; top: 18px; width: 24px; height: 24px; background: var(--ember-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 14.6 8l6 .7-4.5 4.1 1.2 5.9L12 15.8l-5.3 2.9 1.2-5.9L3.4 8.7l6-.7z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 14.6 8l6 .7-4.5 4.1 1.2 5.9L12 15.8l-5.3 2.9 1.2-5.9L3.4 8.7l6-.7z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; }
.mark-title { font-size: var(--small-size); font-weight: 600; line-height: 1.3; }
.mark-by { font-size: var(--label-size); color: var(--muted); line-height: 1.35; }
.band--dark .mark { background: var(--panel); }
.band--dark .mark::before { background: var(--amber); }
.band--dark .mark-by { color: var(--on-dark-muted); }

/* ---------------------------------------------------------------------------------------------------------------
   Awards wall (generated)
   --------------------------------------------------------------------------------------------------------------- */
.awards { list-style: none; display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 700px) { .awards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .awards { grid-template-columns: repeat(3, 1fr); } }
.award { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px 22px; border-radius: var(--radius); background: var(--white);
  box-shadow: var(--card-shadow); border-top: 3px solid var(--ember); }
.band--dark .award { background: var(--panel); box-shadow: none; border: 1px solid #222224; border-top: 3px solid var(--amber); }
.award-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.award-year { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); font-weight: 400; letter-spacing: -0.04em; line-height: 1; }
.award-status { font-size: var(--label-size); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--pill);
  background: var(--ash); color: var(--ink); line-height: 1.2; }
.band--dark .award-status { background: rgb(255 153 0 / 14%); color: var(--amber); }
.award--shortlisted .award-status, .award--finalist .award-status { background: transparent; border: 1px solid currentColor; }
.award-title { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.22; }
.award-programme { font-size: var(--small-size); color: var(--muted); line-height: 1.4; }
.band--dark .award-programme { color: var(--on-dark-muted); }
.award-whose { font-size: var(--small-size); font-weight: 600; }
.band--dark .award-whose { color: var(--amber); }
.award-for { font-size: var(--small-size); line-height: 1.45; padding-top: 10px; border-top: var(--hairline); margin-top: auto; }
.band--dark .award-for { border-top-color: var(--line-dark); color: #d6d6da; }

/* ---------------------------------------------------------------------------------------------------------------
   People (generated): a typographic row of name, title and one line (decision 5). Portraits appear only when every
   person in the list has one; never initials.
   --------------------------------------------------------------------------------------------------------------- */
.people { list-style: none; display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 560px) { .people { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .people { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .people { grid-template-columns: repeat(4, 1fr); } }
.person { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--radius); background: var(--white); box-shadow: var(--card-shadow); }
.band:not(.band--stone):not(.band--ash):not(.band--dark) .person { background: var(--ash); box-shadow: none; }
.band--dark .person { background: var(--panel); border: 1px solid #222224; box-shadow: none; }
.person-photo { display: block; width: 88px; height: 88px; flex: none; border-radius: 50%; overflow: hidden; background: var(--black); }
.person-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.person-text { display: flex; flex-direction: column; gap: 4px; }
.person-name { font-size: 1.25rem; font-weight: 520; letter-spacing: -0.015em; line-height: 1.2; }
.person-title { font-size: var(--small-size); color: var(--ember-ink); font-weight: 500; }
.band--dark .person-title { color: var(--amber); }
.person-line { font-size: var(--small-size); color: var(--muted); margin-top: 8px; }
.band--dark .person-line { color: var(--on-dark-muted); }
/* The typographic row: no cards, a rule above each name, the way Version 03 set its people. */
.people--type { gap: 0 var(--gap); }
.people--type > .person { padding: 18px 0 22px !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important;
  border-top: 2px solid var(--ink) !important; }
.band--dark .people--type > .person { border-top-color: var(--amber) !important; }
.people--type .person-name { font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); }
.people--type .person-line { margin-top: 6px; max-width: 40ch; }

/* ---------------------------------------------------------------------------------------------------------------
   Posts (generated): cards in lists; a readable long-form page.
   --------------------------------------------------------------------------------------------------------------- */
.post-list { list-style: none; display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 700px) { .post-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .post-list { grid-template-columns: repeat(4, 1fr); } .post-list--three { grid-template-columns: repeat(3, 1fr); } }
.post-item { display: flex; min-width: 0; }
.post-item a { position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: var(--radius);
  background: var(--white); box-shadow: var(--card-shadow); text-decoration: none; color: var(--ink);
  transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease); }
.band:not(.band--stone):not(.band--ash):not(.band--dark) .post-item a { background: var(--ash); box-shadow: none; }
.band--dark .post-item a { background: var(--panel); color: var(--white); box-shadow: none; border: 1px solid #222224; }
.post-item a:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
/* The lead image, 16:9 like the live blog's; a picture with words in it is shown whole on its own ground. A post
   without one gets a plain black cover with the three-bar mark, as the live blog's own text cards look. */
.post-media { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--black); flex: none; }
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.post-media img.img--whole { object-fit: contain; }
.post-media:has(.img--on-light) { background: #f4f1ea; }
.post-item a:hover .post-media img { transform: scale(1.03); }
.post-media--plain::before { content: ''; position: absolute; right: -18%; top: -50%; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgb(255 153 0 / 36%), rgb(234 71 0 / 12%) 45%, rgb(234 71 0 / 0%) 70%); }
.post-mark { position: absolute; left: 22px; bottom: 20px; width: 34px; height: 22px;
  background: linear-gradient(var(--white) 0 4px, transparent 4px 9px, var(--amber) 9px 13px, transparent 13px 18px, var(--white) 18px 22px); }
.post-item--news .post-media--plain { background: #1a0d05; }
.post-text { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2vw, 26px); border-top: 4px solid var(--black); }
.post-item--news .post-text { border-top-color: var(--ember); }
.band--dark .post-text { border-top-color: var(--amber); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: var(--label-size); color: var(--muted); line-height: 1.3; }
.post-kind { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember-ink); }
.band--dark .post-kind { color: var(--amber); }
.band--dark .post-meta { color: var(--on-dark-muted); }
.post-title { font-size: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.24; text-wrap: balance; }
.post-item a:hover .post-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.post-excerpt { font-size: var(--small-size); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.band--dark .post-excerpt { color: var(--on-dark-muted); }
.post-by { font-size: var(--label-size); color: var(--muted); }

.post-head { background: var(--ash); padding-block: clamp(36px, 6vw, 88px) clamp(40px, 5vw, 72px); }
.post-head .post-meta { margin-top: 28px; font-size: var(--small-size); }
.post-head .post-meta > * + *::before { content: '·'; margin-right: 14px; color: var(--muted); }
.post-head .post-by { font-size: inherit; margin: 0; padding: 0; }
.post-head h1 { margin-top: 16px; font-size: clamp(2.25rem, 1.6rem + 2.6vw, 4rem); max-width: 22ch; }
.post-head .lede { margin-top: 22px; color: var(--muted); max-width: 46ch; }
.post-lead { margin: clamp(28px, 4vw, 44px) 0 0; border-radius: var(--radius); overflow: hidden; background: var(--black); }
.post-lead img { width: 100%; height: auto; max-height: min(70vh, 560px); object-fit: cover; }
.post-lead img.img--whole { object-fit: contain; }
.post-lead:has(.img--on-light) { background: #f4f1ea; }
.post-related { padding-block: clamp(48px, 6vw, 88px); }
.post-related .related-head { margin-bottom: 20px; max-width: none; }
.post-related .post-more-head { margin-top: clamp(40px, 5vw, 64px); }
.post-related .card p strong { font-weight: 600; }
.post-body { padding-block: clamp(40px, 6vw, 80px); font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.72; overflow-wrap: break-word; }
.post-body > * { max-width: 68ch; }
.post-body > * + * { margin-top: 1.1em; }
.post-body h2 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); margin-top: 1.9em; letter-spacing: -0.03em; line-height: 1.12; }
.post-body h3 { font-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem); margin-top: 1.6em; }
.post-body h2 + *, .post-body h3 + * { margin-top: 0.6em; }
.post-body a { color: var(--ember-ink); text-decoration: underline; text-underline-offset: 0.18em; overflow-wrap: anywhere; }
.post-body a:hover { text-decoration-thickness: 2px; }
.post-body ul, .post-body ol { padding-left: 1.3em; }
.post-body li + li { margin-top: 0.45em; }
.post-body li::marker { color: var(--ember-ink); }
.post-body blockquote { border-left: 4px solid var(--amber); padding: 4px 0 4px 24px; font-size: 1.25em; line-height: 1.45; letter-spacing: -0.01em; }
.post-body blockquote p + p { margin-top: 0.6em; }
.post-body strong { font-weight: 600; }
.post-body img { border-radius: var(--radius-sm); }
.post-body figure figcaption { font-size: var(--small-size); color: var(--muted); margin-top: 8px; }
.post-body hr { border: 0; border-top: var(--hairline); margin-block: 2em; }
.post-body table { width: 100%; border-collapse: collapse; font-size: var(--small-size); display: block; overflow-x: auto; }
.post-body th, .post-body td { text-align: left; padding: 10px 14px 10px 0; border-top: var(--hairline); vertical-align: top; }
.post-foot { padding-bottom: clamp(56px, 7vw, 104px); }
.post-foot .action { border-top: 0; }

/* ---------------------------------------------------------------------------------------------------------------
   Case page (generated): photo hero, figures band, text with an 'At a glance' sidebar.
   --------------------------------------------------------------------------------------------------------------- */
.case-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--black); color: var(--white); }
.case-hero-inner { padding-block: clamp(36px, 6vw, 96px) clamp(44px, 6vw, 88px); }
.case-hero-image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.case-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.case-hero .crumbs ol { color: var(--on-dark-muted); }
.case-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 26px; font-size: var(--label-size); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); }
.case-kicker .case-status { color: var(--white); border-color: rgb(255 255 255 / 36%); }
.case-hero h1 { margin-top: 14px; font-size: clamp(2.375rem, 1.5rem + 3.4vw, 4.5rem); max-width: 20ch; }
.case-hero .lede { margin-top: 22px; color: #e4e4e8; max-width: 48ch; }
.case-hero .case-client { margin-top: 18px; color: var(--on-dark-muted); font-size: var(--small-size); }
.case-hero.has-image .case-hero-inner { padding-top: 28px; }
@media (min-width: 768px) {
  .case-hero.has-image { min-height: clamp(560px, 80vh, 820px); display: flex; flex-direction: column; justify-content: flex-end; }
  .case-hero.has-image .case-hero-image { position: absolute; inset: 0; aspect-ratio: auto; z-index: -1; }
  .case-hero.has-image .case-hero-image::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgb(10 10 10 / 86%) 0%, rgb(10 10 10 / 64%) 42%, rgb(10 10 10 / 12%) 75%), var(--scrim); }
  .case-hero.has-image .case-hero-inner { padding-top: 160px; }
}
.case-figures { background: var(--black); color: var(--white); padding-block: 0 clamp(48px, 6vw, 88px); }
.figures { list-style: none; display: grid; gap: var(--gap); grid-template-columns: 1fr; padding-top: clamp(32px, 4vw, 48px); border-top: var(--hairline-dark); }
@media (min-width: 640px) { .figures { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .figures { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.figures li { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 26px; border-radius: var(--radius); background: var(--panel); border: 1px solid #222224; }
.figures strong { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem); font-weight: 400; letter-spacing: -0.05em; line-height: 0.95; color: var(--amber); }
.figures span { font-size: var(--small-size); color: var(--on-dark-muted); line-height: 1.4; }
.case-layout { display: grid; gap: clamp(40px, 5vw, 64px); }
@media (min-width: 1024px) { .case-layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(48px, 6vw, 96px); align-items: start; } }
.case-text { min-width: 0; }
.case-section + .case-section { margin-top: clamp(40px, 5vw, 64px); }
.case-section h2 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.75rem); max-width: none; margin-bottom: 18px; }
.case-section p { max-width: 66ch; font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem); line-height: 1.7; }
.case-section p + p { margin-top: 1em; }
.case-section a { color: var(--ember-ink); }
.case-section--decision { padding: clamp(24px, 3vw, 40px); border-radius: var(--radius); background: var(--ash); border-left: 6px solid var(--amber); }
.case-facts { padding: clamp(24px, 2.4vw, 32px); border-radius: var(--radius); background: var(--ash); }
@media (min-width: 1024px) { .case-facts { position: sticky; top: calc(var(--header-main) + var(--header-quiet) + 24px); } }
.case-facts > .label { color: var(--ink); margin-bottom: 8px; }
.case-facts .facts > div { grid-template-columns: 1fr; gap: 2px; padding-block: 12px; border-top-color: var(--line-strong); }
.case-facts h3.label { margin-top: 24px; margin-bottom: 8px; }
.case-lines { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.case-lines a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--pill); background: var(--white);
  border: 1px solid var(--line-strong); font-size: var(--small-size); font-weight: 500; text-decoration: none; }
.case-lines a:hover { border-color: var(--ink); }
.case-more h2 { margin-bottom: clamp(28px, 4vw, 48px); }

/* ---------------------------------------------------------------------------------------------------------------
   Quote, pull line and statement
   --------------------------------------------------------------------------------------------------------------- */
.quote { position: relative; margin-top: clamp(40px, 5vw, 64px); padding: clamp(28px, 3.4vw, 48px); border-radius: var(--radius-lg); background: var(--black); color: var(--white); }
.quote::before { content: ''; display: block; width: 44px; height: 34px; margin-bottom: 18px; background: var(--amber);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 34'%3E%3Cpath d='M0 34V20C0 8 6 1 18 0v7c-6 1-9 5-9 11h9v16zm26 0V20c0-12 6-19 18-20v7c-6 1-9 5-9 11h9v16z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 34'%3E%3Cpath d='M0 34V20C0 8 6 1 18 0v7c-6 1-9 5-9 11h9v16zm26 0V20c0-12 6-19 18-20v7c-6 1-9 5-9 11h9v16z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; }
.quote blockquote p { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2.125rem); line-height: 1.28; letter-spacing: -0.02em; font-weight: 420; max-width: 34ch; }
.quote figcaption { margin-top: 20px; font-size: var(--small-size); color: var(--on-dark-muted); }
.band--dark .quote { background: var(--panel); border: 1px solid #222224; }
.pull { font-size: var(--h3-size); line-height: 1.3; font-weight: 450; letter-spacing: -0.015em; max-width: 30ch; border-left: 4px solid var(--amber); padding-left: 22px; }
.statement { font-size: var(--h3-size); line-height: 1.28; font-weight: 450; letter-spacing: -0.015em; max-width: 30ch; }
.statement::before { content: ''; display: block; width: 36px; height: 4px; border-radius: 2px; margin-bottom: 16px; background: var(--amber); }
.statement + p { margin-top: 0.6em; }

/* ---------------------------------------------------------------------------------------------------------------
   The category statement (home band on the gradient) and the comparison list beside it
   --------------------------------------------------------------------------------------------------------------- */
.category h2 { font-size: clamp(2.5rem, 1.4rem + 4.6vw, 6rem); letter-spacing: -0.05em; line-height: 0.98; max-width: 14ch; }
.category-body { display: grid; gap: clamp(28px, 4vw, 64px); margin-top: clamp(32px, 5vw, 72px); }
@media (min-width: 1024px) { .category-body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.category-body > p { font-size: var(--lede-size); line-height: 1.42; max-width: 36ch; }
.contrast { list-style: none; display: grid; gap: 12px; }
.contrast li { display: grid; gap: 6px; padding: 20px 24px; border-radius: var(--radius); background: rgb(255 255 255 / 88%); color: var(--ink); }
@media (min-width: 640px) { .contrast li { grid-template-columns: minmax(150px, 30%) 1fr; gap: 20px; align-items: baseline; } }
.contrast dt, .contrast .contrast-term { font-size: var(--label-size); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember-ink); }
.contrast p { font-size: var(--body-size); line-height: 1.45; }

/* ---------------------------------------------------------------------------------------------------------------
   Steps, facts, questions, points, table
   --------------------------------------------------------------------------------------------------------------- */
.steps { list-style: none; counter-reset: st; display: grid; gap: var(--gap); }
@media (min-width: 900px) { .steps--grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .steps--four { grid-template-columns: repeat(4, 1fr); } .steps--three { grid-template-columns: repeat(3, 1fr); } }
.steps > li { counter-increment: st; position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 28px 30px; border-radius: var(--radius);
  background: var(--ash); }
.band--stone .steps > li, .band--ash .steps > li { background: var(--white); }
.band--dark .steps > li { background: var(--panel); border: 1px solid #222224; }
.steps > li::before { content: counter(st, decimal-leading-zero); font-size: var(--label-size); font-weight: 600; letter-spacing: 0.08em; color: var(--ember-ink);
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid currentColor; }
.band--dark .steps > li::before { color: var(--amber); }
.steps > li > h3 { margin-top: 6px; }
.steps > li p { font-size: var(--small-size); }
.band--dark .steps > li p { color: #d6d6da; }

.facts { display: grid; gap: 0; }
.facts > div { display: grid; grid-template-columns: minmax(130px, 34%) 1fr; gap: 16px; padding-block: 14px; border-top: var(--hairline); }
.facts dt { font-size: var(--label-size); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.facts dd { margin: 0; }
.band--dark .facts > div { border-top-color: var(--line-dark); }
.band--dark .facts dt { color: var(--on-dark-muted); }

.qa { border-top: var(--hairline); }
.qa:last-of-type { border-bottom: var(--hairline); }
.qa summary { cursor: pointer; min-height: 60px; display: flex; align-items: center; font-weight: 500; font-size: 1.125rem; list-style: none; gap: 16px; padding-block: 12px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+'; margin-left: auto; flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid var(--line-strong); font-size: 1.25rem; line-height: 1; }
.qa[open] summary::after { content: '–'; }
.qa > :not(summary) { padding-bottom: 18px; max-width: 66ch; }
.band--dark .qa { border-color: var(--line-dark); }
.band--dark .qa summary::after { border-color: var(--line-dark); }

.points { list-style: none; display: grid; gap: 12px; }
.points li { padding-left: 26px; position: relative; max-width: 66ch; }
.points li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); }
ol.points { counter-reset: pt; }
ol.points li { padding-left: 34px; }
ol.points li::before { counter-increment: pt; content: counter(pt); width: auto; height: auto; background: none; top: 0; font-weight: 600; color: var(--ember-ink); }
.band--dark ol.points li::before { color: var(--amber); }

.table { width: 100%; border-collapse: collapse; font-size: var(--small-size); }
.table caption { text-align: left; font-size: var(--small-size); color: var(--muted); padding-bottom: 12px; }
.table th, .table td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-top: var(--hairline); }
.table th { font-size: var(--label-size); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.table-wrap { overflow-x: auto; scrollbar-width: thin; }
.table-wrap:focus-visible { outline-offset: 4px; }

/* ---------------------------------------------------------------------------------------------------------------
   Proof record, decision record and the shared figures (lanes, funnel)
   --------------------------------------------------------------------------------------------------------------- */
.proof { background: var(--white); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: clamp(24px, 2.6vw, 36px); display: flex; flex-direction: column; gap: 12px; }
.band:not(.band--stone):not(.band--ash):not(.band--dark) .proof { background: var(--ash); box-shadow: none; }
.band--dark .proof { background: var(--panel); border: 1px solid #222224; box-shadow: none; }
.proof + .proof { margin-top: var(--gap); }
.proof-measure { font-size: var(--lede-size); line-height: 1.38; }
.proof-meta { font-size: var(--small-size); color: var(--muted); }
.band--dark .proof-meta { color: var(--on-dark-muted); }

.record { background: var(--black); color: var(--white); border-radius: var(--radius); padding: clamp(22px, 2.6vw, 34px); }
.record figcaption { font-size: var(--small-size); color: var(--on-dark-muted); margin-bottom: 16px; }
.record-rows { display: grid; gap: 0; }
.record-rows > div { display: grid; grid-template-columns: minmax(110px, 30%) 1fr; gap: 16px; padding-block: 12px; border-top: var(--hairline-dark); }
.record-rows dt { font-size: var(--label-size); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); }
.record-rows dd { margin: 0; font-size: var(--small-size); }

.fig-lanes { display: grid; gap: 0; }
.lanes { list-style: none; display: grid; grid-template-columns: 1fr; gap: 10px; counter-reset: ln; }
@media (min-width: 768px) { .lanes { grid-template-columns: repeat(4, 1fr); gap: var(--gap); } }
.lane { counter-increment: ln; border-radius: var(--radius); background: var(--ash); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.band--stone .lane, .band--ash .lane { background: var(--white); }
.band--dark .lane { background: var(--panel); border: 1px solid #222224; }
.lane::before { content: '0' counter(ln); font-size: var(--label-size); font-weight: 600; color: var(--ember-ink); letter-spacing: 0.08em; }
.band--dark .lane::before { color: var(--amber); }
.lane-q { font-size: 1.125rem; font-weight: 500; line-height: 1.3; }
.lane-name { font-size: var(--label-size); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.band--dark .lane-name { color: var(--on-dark-muted); }
.lanes-join { width: 100%; height: 60px; color: var(--line-strong); display: none; }
@media (min-width: 768px) { .lanes-join { display: block; } }
.lanes-outcome { border-radius: var(--pill); background: var(--black); color: var(--white); padding: 16px 24px; text-align: center; font-weight: 500; margin-top: 12px; }
.band--dark .lanes-outcome { background: var(--amber); color: var(--black); }
@media (min-width: 768px) { .lanes-outcome { margin: 0 auto; max-width: 480px; } }
.fig-lanes figcaption, .fig-funnel figcaption { font-size: var(--small-size); color: var(--muted); margin-top: 14px; }
.funnel { list-style: none; display: grid; gap: 10px; }
.funnel-step { border-radius: var(--radius); background: var(--ash); padding: 18px 22px; border-left: 6px solid var(--amber); }
.band--stone .funnel-step, .band--ash .funnel-step { background: var(--white); }
.band--dark .funnel-step { background: var(--panel); }
.funnel-step h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: 0; }
.funnel-step p { font-size: var(--small-size); margin-top: 6px; }
.funnel-end { color: var(--muted); }
@media (min-width: 768px) {
  .funnel-step:nth-child(2) { margin-inline: 4%; }
  .funnel-step:nth-child(3) { margin-inline: 8%; }
  .funnel-step:nth-child(4) { margin-inline: 12%; }
}
.stage { background: var(--black); color: var(--white); border-radius: var(--radius); position: relative; overflow: hidden; }

/* ---------------------------------------------------------------------------------------------------------------
   CTA band, the first-step chooser, related pages and the closing band
   --------------------------------------------------------------------------------------------------------------- */
.cta-band { display: grid; gap: 24px 48px; align-items: end; padding: clamp(32px, 4.4vw, 64px); border-radius: var(--radius-lg); background: var(--black); color: var(--white); }
@media (min-width: 1024px) { .cta-band { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.cta-band h2 { max-width: 18ch; }
.frame > * + .cta-band, .frame > * + .stats, .frame > * + .case-grid, .frame > * + .awards, .frame > * + .people { margin-top: clamp(40px, 5vw, 72px); }
.frame > .band-head + * { margin-top: 0 !important; }
.cta-band p { color: var(--on-dark-muted); }
.cta-band .actions { justify-content: flex-start; }
@media (min-width: 1024px) { .cta-band .actions { justify-content: flex-end; } }
.band--dark .cta-band { background: var(--panel); border: 1px solid #222224; }

.choices { list-style: none; display: grid; gap: var(--gap); }
@media (min-width: 900px) { .choices { grid-template-columns: repeat(3, 1fr); } }
.choice a { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 100%; padding: 26px 28px 70px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid #2a2a2c; text-decoration: none; color: var(--white);
  transition: border-color var(--t-mid) var(--ease), transform var(--t-slow) var(--ease), background var(--t-mid) var(--ease); }
.choice a:hover { border-color: var(--amber); transform: translateY(-3px); }
.choice-num { font-size: var(--label-size); font-weight: 600; letter-spacing: 0.08em; color: var(--amber); }
.choice-name { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); font-weight: 480; letter-spacing: -0.02em; line-height: 1.15; }
.choice-note { font-size: var(--small-size); color: var(--on-dark-muted); }
.choice .arrow { position: absolute; left: 28px; bottom: 26px; width: 30px; color: var(--amber); }
.choice a:hover .arrow { transform: translateX(6px); }
.band:not(.band--dark) .choice a { background: var(--white); color: var(--ink); border-color: var(--line); box-shadow: var(--card-shadow); }
.band:not(.band--dark) .choice a:hover { border-color: var(--ink); }
.band:not(.band--dark) .choice-num { color: var(--ember-ink); }
.band:not(.band--dark) .choice-note { color: var(--muted); }
.band:not(.band--dark) .choice .arrow { color: var(--ember-ink); }
.chooser-next { margin-top: 24px; font-size: var(--small-size); color: var(--on-dark-muted); max-width: 66ch; }
.band:not(.band--dark) .chooser-next { color: var(--muted); }

.band--related { padding-block: clamp(56px, 6vw, 96px); background: var(--ash); }
.band--related .card h3 { font-size: var(--h3-size); }
.related-head { font-size: var(--label-size) !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase; color: var(--muted); }
.band--related .frame > h2 + * { margin-top: 20px; }

.closing { padding-block: clamp(56px, 7vw, 104px); overflow: hidden; isolation: isolate; }
/* The hero's sun, rising in the bottom right corner: a clean disc filled with the same photograph's surface, with a
   soft glow (not a drawn arc, and never cut flat by the photograph's edge). */
.closing { --sun: min(560px, 40vw); }
.closing::before { content: ''; position: absolute; z-index: -1; right: calc(var(--sun) * -0.28); bottom: calc(var(--sun) * -0.52);
  width: var(--sun); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: url(/assets/img/sun-1280.webp) 100% 50% / auto 140% no-repeat;
  box-shadow: 0 0 60px 8px rgb(255 140 0 / 38%), 0 0 200px 60px rgb(234 71 0 / 22%); }
@media (max-width: 767.98px) {
  .closing { --sun: 72vw; padding-bottom: calc(var(--sun) * 0.5 + 40px); }
  .closing::before { right: calc(var(--sun) * -0.2); bottom: calc(var(--sun) * -0.55); }
}
.closing h2 { font-size: var(--h2-size); max-width: 16ch; }
.closing-row { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
.closing-main { display: inline-flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 30px; border-radius: var(--pill); background: var(--amber);
  color: var(--black) !important; font-size: 1.1875rem; font-weight: 600; text-decoration: none; transition: background var(--t-mid) var(--ease); }
.closing-main:hover { background: #ffad33; }
.closing-main .arrow { width: 26px; color: var(--black); }
.closing-main:focus-visible { outline-color: var(--white); }
.closing-others { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 32px; }
.closing-others .action { font-size: var(--small-size); color: var(--white); border-bottom-color: rgb(255 255 255 / 40%); }
.closing-next { margin-top: 26px; font-size: var(--small-size); color: var(--on-dark-muted); max-width: 66ch; }

/* ---------------------------------------------------------------------------------------------------------------
   Form (contact)
   --------------------------------------------------------------------------------------------------------------- */
.form { display: grid; gap: 26px; max-width: 760px; }
.field { display: grid; gap: 8px; }
.field label, .field legend { font-weight: 500; font-size: var(--small-size); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="search"], .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 16px; font-size: 1rem;
  background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); transition: border-color var(--t-fast) var(--ease); }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--ink); }
.field textarea { min-height: 170px; resize: vertical; }
.field .help { font-size: var(--small-size); color: var(--muted); }
fieldset.field { border: 0; padding: 0; margin: 0; }
.radio { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); font-size: var(--small-size); }
.radio:has(input:checked) { border-color: var(--ink); background: var(--ash); }
.radio input { width: 20px; height: 20px; accent-color: var(--black); }
.form-note { font-size: var(--small-size); color: var(--muted); }
.form-status { font-size: var(--small-size); font-weight: 500; border-left: 4px solid var(--amber); padding-left: 14px; }

/* ---------------------------------------------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------------------------------------------- */
.site-footer { background: var(--black); color: var(--white); padding-block: clamp(56px, 7vw, 96px) 32px; border-top: var(--hairline-dark); }
.footer-top { display: grid; gap: 44px; }
@media (min-width: 1024px) { .footer-top { grid-template-columns: 3fr 9fr; } }
.lockup img { width: 140px; height: auto; }
.lockup-line { margin-top: 14px; font-size: 1.25rem; font-weight: 450; letter-spacing: -0.02em; color: var(--white); }
.footer-where { margin-top: 6px; font-size: var(--small-size); color: var(--on-dark-muted); }
.footer-cols { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-cols { grid-template-columns: repeat(4, 1fr); } }
.footer-head { font-size: var(--label-size) !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase; color: var(--amber); }
.footer-col ul { list-style: none; margin-top: 12px; }
.footer-col a, .footer-legal a { display: inline-block; padding-block: 7px; line-height: 1.4; font-size: var(--small-size); text-decoration: none; color: var(--white); }
.footer-col a:hover, .footer-legal a:hover { text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 0.22em; }
.footer-legal { margin-top: 56px; padding-top: 20px; border-top: var(--hairline-dark); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  font-size: var(--small-size); color: var(--on-dark-muted); }
.footer-legal ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 24px; }
.footer-legal a { color: var(--on-dark-muted); }

/* ---------------------------------------------------------------------------------------------------------------
   Print: Quality and regulation, Trust, cases and posts print cleanly.
   --------------------------------------------------------------------------------------------------------------- */
.print-only, .print-source { display: none; }
@media print {
  .site-header, .site-footer, .review-panel, .closing, .band--related, .post-related, .skip-link, .crumbs, .hero-media, .hero-glow, .motion-toggle,
  .opening-image, .case-hero-image, .image-band-media { display: none !important; }
  .print-only, .print-source { display: block; }
  .print-source { font-size: 10pt; color: #000; padding-bottom: 8pt; margin-bottom: 14pt; border-bottom: 1pt solid #000; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band, .page-opening, .case-hero, .case-figures, .image-band, .hero, .post-head { padding-block: 16pt !important; min-height: 0 !important; background: #fff !important; color: #000 !important; }
  .page-opening *, .case-hero *, .band--dark *, .hero *, .image-band * { color: #000 !important; }
  h2, h3 { break-after: avoid-page; }
  .card, .proof, .record, figure, tr, .qa, .facts > div, .steps > li, .panel, .award, .person, .case-card, .post-item { break-inside: avoid-page; }
  .card, .proof, .panel, .award, .person, .case-link, .post-item a, .figures li, .steps > li { box-shadow: none !important; border: 1pt solid #999 !important; background: #fff !important; }
  .split, .case-layout { display: block; }
  .split > * + *, .case-layout > * + * { margin-top: 14pt; }
  .band--gradient { border: 1pt solid #000; }
  a { text-decoration: none; }
  .rise, .js .rise { opacity: 1 !important; transform: none !important; transition: none !important; }
  details > summary::after { content: none !important; }
  details::details-content { content-visibility: visible; display: contents; }
  .record { background: #fff !important; color: #000 !important; border: 1pt solid #000; }
  .record-rows > div { border-top-color: #999 !important; }
  .table-wrap { overflow: visible; }
  .printable main a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #333; word-break: break-all; }
  .printable main a[href^="http"] .ext { display: none; }
}

/* Forced colours: keep borders where colour carried the edge. */
@media (forced-colors: active) {
  .card, .panel, .case-link, .post-item a, .award, .person, .tile, .choice a, .mark, .figures li, .steps > li { border: 1px solid CanvasText; }
  .button, .nav-cta, .closing-main { border: 1px solid ButtonText; }
  .tile h3 a::after, .case-links a::after, .mark::before, .quote::before { forced-color-adjust: none; background: CanvasText; }
}


.button:not(.button--ghost)::after { content: ''; width: 20px; height: 14px; flex: none; background: currentColor; transition: transform var(--t-mid) var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18'%3E%3Cpath d='M1 9h22M17 3l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18'%3E%3Cpath d='M1 9h22M17 3l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat; }
.button:hover::after { transform: translateX(4px); }
@media (forced-colors: active) { .button:not(.button--ghost)::after { forced-color-adjust: none; background: ButtonText; } }

.proof-strip { padding-block: clamp(32px, 4vw, 56px); }
.proof-strip .stats { margin-top: 0; }
.proof-strip .stat span { max-width: 30ch; }

/* Playbooks (MV 3): the two books, cover beside the words. */
.books { list-style: none; display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 900px) { .books { grid-template-columns: repeat(2, 1fr); } }
.book { position: relative; display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: clamp(18px, 2.4vw, 32px); align-items: start;
  padding: clamp(20px, 2.4vw, 32px); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--card-shadow); }
.book-cover { margin: 0; aspect-ratio: 1786 / 2526; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 4px rgb(10 10 10 / 14%), 0 22px 40px -18px rgb(10 10 10 / 50%); }
.book-cover img { width: 100%; height: 100%; object-fit: cover; }
.book-cover--drawn { position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 12% 11%; background: #0d1b2a; color: var(--white); }
.book-cover--drawn::before { content: ''; position: absolute; z-index: -1; right: -30%; bottom: -12%; width: 95%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgb(255 153 0 / 70%), rgb(234 71 0 / 30%) 45%, rgb(234 71 0 / 0%) 70%); }
.book-kicker { font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem); line-height: 1.2; border-left: 2px solid var(--white); padding-left: 8px; }
.book-title { font-size: clamp(1rem, 0.85rem + 0.6vw, 1.375rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.02em; margin-top: 6px; border-left: 2px solid var(--white); padding-left: 8px; }
.book-year { margin-top: 8px; font-size: var(--label-size); color: var(--amber); font-weight: 600; letter-spacing: 0.08em; }
.book-by { margin-top: auto; font-size: var(--label-size); line-height: 1.3; color: #d6d6da; }
.book-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.book-text h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem); letter-spacing: -0.025em; line-height: 1.12; }
.book-text h3 a { text-decoration: none; }
.book-text h3 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.book:hover h3 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.book-text p:not(.card-label) { font-size: var(--small-size); }
.book-award { padding-top: 10px; border-top: var(--hairline); font-weight: 500; }
@media (max-width: 559.98px) {
  .book { display: block; }
  .book-cover { float: left; width: 92px; margin: 2px 16px 8px 0; }
  .book-cover--drawn { padding: 10px 8px; }
  .book-cover--drawn .book-by, .book-cover--drawn .book-kicker { display: none; }
  .book-cover--drawn .book-title { font-size: 0.875rem; border: 0; padding: 0; margin: 0; }
  .book-cover--drawn .book-year { margin-top: 4px; }
  .book-text { display: block; }
  .book-text > * + * { margin-top: 8px; }
  .book-award { clear: both; }
}

/* The argument (MV 2): Version 03's 'Most AI never reaches the floor.', the category card on the gradient, five
   reasons, the comparisons and the door to Quality and Trust. */
.argument .band-head h2 { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.75rem); letter-spacing: -0.045em; line-height: 0.98; max-width: 13ch; }
.glow { color: var(--amber); }
.argument-body { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (min-width: 1024px) { .argument-body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.argument-lede p { color: var(--on-dark-muted); max-width: 58ch; }
.argument-lede .argument-first { font-size: var(--lede-size); line-height: 1.42; color: var(--white); }
.category-card { position: relative; overflow: hidden; padding: clamp(26px, 3vw, 40px); border-radius: var(--radius-lg); background: var(--gradient); color: var(--ink-strong); }
.category-card .label { color: var(--ink-strong); }
.category-line { margin-top: 12px; font-size: clamp(1.625rem, 1.25rem + 1.4vw, 2.5rem); font-weight: 450; letter-spacing: -0.035em; line-height: 1.05; }
.category-card p + p { margin-top: 14px; }
.category-card p:last-child { font-size: var(--small-size); }
.reasons { list-style: none; counter-reset: rs; display: grid; gap: 0 var(--gap); grid-template-columns: 1fr; margin-top: clamp(40px, 5vw, 72px); }
@media (min-width: 640px) { .reasons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .reasons { grid-template-columns: repeat(5, 1fr); } }
.reasons li { counter-increment: rs; padding: 18px 0 24px; border-top: 1px solid var(--line-dark); }
.reason-vs { font-size: var(--label-size); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); margin-bottom: 8px; }
.reasons h3 { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem); letter-spacing: -0.015em; line-height: 1.2; }
.reasons p { margin-top: 8px; font-size: var(--small-size); color: #d6d6da; }
.versus { margin-top: clamp(32px, 4vw, 56px); padding: clamp(22px, 2.6vw, 36px); border-radius: var(--radius); background: var(--panel); border: 1px solid #222224; }
.versus > h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem); letter-spacing: -0.02em; }
.versus-list { margin-top: 18px; display: grid; gap: 0 var(--gap); grid-template-columns: 1fr; }
@media (min-width: 768px) { .versus-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .versus-list { grid-template-columns: repeat(4, 1fr); } }
.versus-list > div { padding: 14px 0 6px; border-top: 1px solid var(--line-dark); }
.versus-list dt { font-size: var(--label-size); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); }
.versus-list dd { margin: 6px 0 0; font-size: var(--small-size); color: #d6d6da; }
.door { margin-top: clamp(28px, 3vw, 44px); padding-top: 20px; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px 32px; }
.door > p:first-child { font-size: var(--small-size); color: var(--on-dark-muted); }

/* The four service lines (MV 9): the line's name is the heading, its question the line above it. */
.lines-panels { counter-reset: none; }
.lines .panel h3 { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); letter-spacing: -0.04em; }
.panel-question { text-transform: none; letter-spacing: -0.005em; font-size: var(--body-size); font-weight: 500; }
.lines .panel-media { aspect-ratio: 2 / 1; }

@media (min-width: 900px) { .lines .panel-media { aspect-ratio: 16 / 10; } }
.lines .panel-body { gap: 12px; }
@media (max-width: 899.98px) { .lines .panel-media { aspect-ratio: auto; height: 180px; } }
.pilot { margin-block: clamp(24px, 3vw, 40px); padding: clamp(20px, 2.4vw, 32px); border-radius: var(--radius); background: var(--panel); border: 1px solid #222224; color: var(--white); }
.pilot h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem); letter-spacing: -0.02em; }
.pilot-list { list-style: none; margin-top: 16px; display: grid; gap: 0 var(--gap); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .pilot-list { grid-template-columns: repeat(3, 1fr); } }
.pilot-list li { padding: 14px 0 6px 0; border-top: 2px solid var(--amber); font-size: var(--small-size); color: #e4e4e8; }
.pilot :focus-visible { outline-color: var(--focus-dark); }

/* Sectors: four tiles in a row on wide screens. */
@media (min-width: 1200px) {
  .tiles--four .tile, .tiles--four .tile--plain { grid-column: span 3; min-height: 500px; }
  .tiles--four .tile h3 { font-size: clamp(1.75rem, 1.2rem + 1vw, 2.25rem); }
}
@media (min-width: 768px) and (max-width: 1199.98px) { .tiles--four .tile { grid-column: span 6; min-height: 440px; } }
@media (max-width: 767.98px) { .tiles--four .tile { min-height: 340px; } }

/* Work: the Meissner feature, then Version 03's floor plan beside the six rooms (MV 6). */
.home-feature .case-grid { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .home-feature .case-link { flex-direction: row; }
  .home-feature .case-image { flex: 0 0 52%; aspect-ratio: auto; min-height: 380px; }
  .home-feature .case-body { justify-content: center; padding: clamp(28px, 3vw, 44px); gap: 14px; }
  .home-feature .case-title { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.75rem); letter-spacing: -0.035em; line-height: 1.06; }
  .home-feature .case-lede { display: block; font-size: var(--body-size); line-height: 1.5; }
  .home-feature .card-figures { margin-top: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 20px; }
  .home-feature .case-figure, .home-feature .case-figure ~ .case-figure { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .home-feature .case-figure strong { font-size: clamp(1.5rem, 1.1rem + 0.9vw, 2.125rem); }
}
.feature-note { margin-top: 14px; font-size: var(--small-size); color: var(--muted); }
.plant-layout { display: grid; gap: clamp(28px, 4vw, 56px); margin-top: clamp(48px, 6vw, 88px); align-items: start; }
@media (min-width: 1024px) { .plant-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 6vw, 96px); }
  .plant-intro { position: sticky; top: calc(var(--header-main) + var(--header-quiet) + 24px); } }
.plant-head { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); letter-spacing: -0.03em; line-height: 1.12; max-width: 22ch; }
.plant-note { margin-top: 12px; color: var(--muted, #5b5f6b); font-size: var(--small-size); }
.floorplan { margin-top: 24px; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(5, minmax(46px, 1fr));
  grid-template-areas: 'wh wh wh wh wh su su pr pr pr pr pr' 'wh wh wh wh wh su su pr pr pr pr pr' 'wh wh wh wh wh su su pr pr pr pr pr'
    'ma ma ma qu qu qu qu pl pl pl le le' 'ma ma ma qu qu qu qu pl pl pl le le';
  gap: 6px; padding: 6px; aspect-ratio: 4 / 3; background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); position: relative; overflow: hidden; }
.floorplan::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgb(255 153 0 / 18%) 0%, rgb(255 153 0 / 0%) 52%); }
.room { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 8px 10px; border: 1px solid var(--line-strong);
  border-radius: 4px; background-color: var(--ash); transition: background-color var(--t-mid) var(--ease); }
.room-no { font-size: var(--label-size); font-weight: 600; letter-spacing: 0.08em; color: var(--ember-ink); }
.room-name { font-size: var(--label-size); line-height: 1.2; color: var(--ink); }
.room--production .room-name { color: var(--muted); }
.room--warehouse { grid-area: wh; background-image: repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 26px); }
.room--supply { grid-area: su; background-image: repeating-linear-gradient(0deg, var(--line) 0 2px, transparent 2px 18px); }
.room--production { grid-area: pr; background-image: repeating-linear-gradient(90deg, transparent 0 18px, var(--line) 18px 44px); background-size: 100% 38%; background-repeat: no-repeat; background-position: center; }
.room--maintenance { grid-area: ma; background-image: repeating-linear-gradient(135deg, var(--line) 0 2px, transparent 2px 14px); }
.room--quality { grid-area: qu; }
.room--planning { grid-area: pl; }
.room--leadership { grid-area: le; }
.plant-layout:has([data-room="planning"]:is(:hover, :focus-within)) .room--planning,
.plant-layout:has([data-room="warehouse"]:is(:hover, :focus-within)) .room--warehouse,
.plant-layout:has([data-room="supply"]:is(:hover, :focus-within)) .room--supply,
.plant-layout:has([data-room="quality"]:is(:hover, :focus-within)) .room--quality,
.plant-layout:has([data-room="maintenance"]:is(:hover, :focus-within)) .room--maintenance,
.plant-layout:has([data-room="leadership"]:is(:hover, :focus-within)) .room--leadership { background-color: var(--amber); background-image: none; }
@media (max-width: 767.98px) {
  .floorplan { display: none !important; }
}
.rooms { list-style: none; border-top: 2px solid var(--ink); }
@media (min-width: 1200px) { .rooms { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 32px; } }
.room-note { display: grid; grid-template-columns: 40px 1fr; gap: 8px; padding: 18px 0 20px; border-bottom: var(--hairline); }
.room-note > .room-no { padding-top: 2px; }
.room-label { font-size: var(--label-size); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.room-note h4 { margin-top: 6px; font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem); font-weight: 480; letter-spacing: -0.02em; line-height: 1.22; max-width: 30ch; }
.room-result { margin-top: 10px; font-size: var(--small-size); color: var(--ink); max-width: 52ch; }
.room-stage { display: inline-block; margin-right: 8px; padding: 2px 10px; border-radius: var(--pill); border: 1px solid var(--line-strong); font-size: var(--label-size);
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.room-note .action { margin-top: 6px; font-size: var(--small-size); }
.room-actions { gap: 0 24px; }

/* Awards: the organisers' marks, then the wall (decision 12). */
.award-marks { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 20px clamp(28px, 4vw, 56px); margin-bottom: clamp(28px, 3.4vw, 48px);
  padding-bottom: clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--line-dark); }
.award-marks img { height: 44px; width: auto; max-width: 200px; object-fit: contain; }
@media (max-width: 767.98px) { .award-marks { gap: 18px 28px; } .award-marks img { height: 32px; max-width: 150px; } }
.recognition .awards { gap: 12px; }
@media (min-width: 1200px) { .recognition .awards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.recognition .award { padding: 18px 20px 20px; }
.recognition .award-year { font-size: 1.5rem; }
.recognition .award-title { font-size: 1.0625rem; }

/* Latest, and where you'll find us (MV 10). */
.talks { margin-top: clamp(36px, 4.4vw, 64px); }
.talks > h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem); letter-spacing: -0.02em; }
.talk-list { list-style: none; margin-top: 16px; display: grid; gap: 0 var(--gap); grid-template-columns: 1fr; }
@media (min-width: 768px) { .talk-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .talk-list { grid-template-columns: repeat(4, 1fr); } }
.talk-list li { padding: 14px 0 10px; border-top: 2px solid var(--ink); }
.talk-list time { display: block; font-size: var(--label-size); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ember-ink); }
.talk-list p { margin-top: 6px; font-size: var(--small-size); }
.talk-list a { font-weight: 500; text-underline-offset: 0.2em; }
.talks-more { margin-top: 12px; }

/* People: the board as a typographic row, then the people who do the work. */
.doers { margin-top: clamp(32px, 4vw, 56px); }
.doers > h3 { font-size: var(--label-size); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.doers .people--type > .person { border-top-color: var(--amber) !important; }
.research-line { margin-top: clamp(24px, 3vw, 36px); font-size: var(--small-size); color: var(--muted); }
.research-line a { color: var(--ink); font-weight: 500; text-underline-offset: 0.22em; white-space: nowrap; }

.home-close h2 { max-width: 15ch; }
.home-close .frame > .intro { margin-top: 20px; margin-bottom: clamp(32px, 4vw, 56px); color: var(--on-dark-muted); }

/* Swipe rows: on phones a set of cards (reasons, sectors, awards, posts, talks, people) becomes one row the reader
   swipes sideways, with native scroll and CSS snap, the next card peeking in, so the home page doesn't run to thirty
   screens (B 7, MV 5). Wider screens keep the grids. site.js makes a row a labelled, focusable region only while it
   actually scrolls. Usable anywhere: wrap a list in <div class="snap" data-snap-label="…">. */
@media (max-width: 767.98px) {
  .snap { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .snap::-webkit-scrollbar { display: none; }
  .snap > * { display: grid !important; grid-auto-flow: column; grid-template-columns: none !important; grid-auto-columns: min(80vw, 320px);
    gap: 12px !important; width: max-content; margin-top: 0; }
  .snap > * > * { scroll-snap-align: start; min-width: 0; grid-column: auto !important; }
  /* A translated, off-screen card adds vertical scroll range to the whole row. Fade in place instead. */
  .js .snap .rise { transform: none; transition-property: opacity; }
  .snap:focus-visible { outline-offset: -3px; }
  .snap .tile { min-height: 380px; }
  .snap .people--type > .person { padding-right: 4px !important; }
}

/* The post archive (generated, list:posts all links): each year opens and closes; the newest starts open. The look
   of a year's heading is the page writer's (pages-a.css); these rules only make it a disclosure. */
details.archive-year > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 14px; border-bottom: 2px solid var(--ink); margin-bottom: 8px; }
details.archive-year > summary::-webkit-details-marker { display: none; }
details.archive-year > summary h3 { font-size: var(--figure-size); font-weight: 400; letter-spacing: -0.05em; line-height: 1; }
.archive-toggle { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); display: inline-flex; align-items: center;
  justify-content: center; font-size: 1.5rem; line-height: 1; }
.archive-toggle::before { content: '+'; }
details.archive-year[open] .archive-toggle::before { content: '–'; }
details.archive-year > summary:hover .archive-toggle { border-color: var(--ink); }
details.archive-year:not([open]) > summary { margin-bottom: 0; }
@media print { .archive-toggle { display: none; } }

/* Pictures shown whole (words or logos in them) sit on their own ground wherever they appear. */
img.img--whole { object-fit: contain !important; }

/* ---------------------------------------------------------------------------------------------------------------
   Shared fixes found by the page writers (19 Oct)
   --------------------------------------------------------------------------------------------------------------- */
/* A case card without a picture stays black on every band. */
.band:not(.band--stone):not(.band--ash):not(.band--dark) .case-card--plain .case-link, .case-card--plain .case-link { background: var(--black); }
/* Outbound buttons keep the ↗ the build adds, without a second arrow after it. */
.button[target="_blank"]::after { display: none; }
/* Bylines on dark bands. */
.band--dark .post-by { color: var(--on-dark-muted); }


.case-grid > .case-card--plain:nth-child(3n+2) .case-link { background: var(--white) !important; color: var(--ink); box-shadow: var(--card-shadow); border-top: 4px solid var(--amber); }
.band:not(.band--ash):not(.band--stone):not(.band--dark) .case-grid > .case-card--plain:nth-child(3n+2) .case-link { background: var(--ash) !important; box-shadow: none; }
.case-grid > .case-card--plain:nth-child(3n+2) .case-meta { color: var(--ember-ink); }
.case-grid > .case-card--plain:nth-child(3n+2) .case-status { color: var(--muted); border-color: var(--line-strong); }
.case-grid > .case-card--plain:nth-child(3n+2) .case-client, .case-grid > .case-card--plain:nth-child(3n+2) .case-figure { color: var(--muted); }
.case-grid > .case-card--plain:nth-child(3n+2) .case-figure { border-top-color: var(--line); }
.case-grid > .case-card--plain:nth-child(3n+2) .case-figure strong { color: var(--ink); }
.band--dark .case-grid > .case-card--plain:nth-child(3n+2) .case-link { background: var(--panel) !important; color: var(--white); box-shadow: none; }
.band--dark .case-grid > .case-card--plain:nth-child(3n+2) .case-meta { color: var(--amber); }
.band--dark .case-grid > .case-card--plain:nth-child(3n+2) .case-client, .band--dark .case-grid > .case-card--plain:nth-child(3n+2) .case-figure { color: var(--on-dark-muted); }
.band--dark .case-grid > .case-card--plain:nth-child(3n+2) .case-figure strong { color: var(--white); }
.case-grid > .case-card--plain:nth-child(3n+3) .case-link { background: var(--amber) !important; color: var(--black); box-shadow: none; }
.case-grid > .case-card--plain:nth-child(3n+3) .case-meta { color: var(--black); }
.case-grid > .case-card--plain:nth-child(3n+3) .case-status { color: var(--black); border-color: rgb(10 10 10 / 35%); }
.case-grid > .case-card--plain:nth-child(3n+3) .case-client, .case-grid > .case-card--plain:nth-child(3n+3) .case-figure { color: rgb(10 10 10 / 78%); }
.case-grid > .case-card--plain:nth-child(3n+3) .case-figure { border-top-color: rgb(10 10 10 / 18%); }
.case-grid > .case-card--plain:nth-child(3n+3) .case-figure strong { color: var(--black); }
.case-grid > .case-card--plain:nth-child(3n+3) :focus-visible, .case-grid > .case-card--plain:nth-child(3n+3) .case-link:focus-visible { outline-color: var(--black); }
.case-figure--words strong { font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem) !important; letter-spacing: -0.025em !important; line-height: 1.08 !important; }
.case-card--plain .case-figure strong { font-size: clamp(2rem, 1.3rem + 1.7vw, 3rem) !important; overflow-wrap: anywhere; }
.case-card .case-figure.case-figure--words strong { font-size: clamp(1.5rem, 1.15rem + 0.9vw, 2rem) !important; letter-spacing: -0.025em !important; line-height: 1.08 !important; }


.award-mark { display: flex; align-items: center; height: 46px; min-width: 0; }
.award-mark img { height: 100%; width: auto; max-width: 170px; object-fit: contain; object-position: left center; }
.band:not(.band--dark) .award-mark img { filter: brightness(0); }
.award--has-mark .award-top { margin-bottom: 10px; }
.award--has-mark .award-year { font-size: var(--label-size); font-weight: 600; letter-spacing: 0.08em; line-height: 1.3; color: var(--ember-ink); }
.band--dark .award--has-mark .award-year { color: var(--amber); }


.clients { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 28px 40px; align-items: center; }
@media (min-width: 1100px) { .clients { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.client { display: flex; align-items: center; justify-content: center; height: 56px; }
.client-logo { max-height: 40px; max-width: 150px; width: auto; height: auto; object-fit: contain; opacity: 0.9; }
.band:not(.band--dark) .client-logo { filter: brightness(0); opacity: 0.78; }
.clients-head { margin-bottom: clamp(24px, 3vw, 36px); font-size: var(--label-size); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.band--dark .clients-head { color: var(--on-dark-muted); }
.clients-row { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(28px, 3vw, 40px); border-top: var(--hairline); }


.tiles--four .tile { justify-content: flex-start; }
.tiles--four .tile-body { flex: 1; padding-top: clamp(40px, 3.4vw, 52px); }
.tiles--four .tile .case-links { margin-top: auto; }
.tiles--four .tile-media::after { background: linear-gradient(180deg, rgb(10 10 10 / 82%) 0%, rgb(10 10 10 / 58%) 42%, rgb(10 10 10 / 66%) 62%, rgb(10 10 10 / 92%) 100%); }
.tiles--four .tile--plain .label { position: absolute; top: clamp(16px, 1.4vw, 22px); left: clamp(24px, 3vw, 40px); }
@media (min-width: 768px) { .tiles--four .tile h3 { min-height: 2.04em; } }


.award--brightbeam.award--won { background: var(--amber) !important; color: var(--black); border: 0 !important; }
.award--brightbeam.award--won .award-mark img { filter: brightness(0); }
.award--brightbeam.award--won .award-status { background: rgb(10 10 10 / 12%) !important; color: var(--black) !important; }
.award--brightbeam.award--won .award-year { color: var(--black) !important; }
.award--brightbeam.award--won .award-programme, .award--brightbeam.award--won .award-for { color: rgb(10 10 10 / 78%) !important; }
.award--brightbeam.award--won .award-for { border-top-color: rgb(10 10 10 / 18%) !important; }
.award--brightbeam.award--won :focus-visible { outline-color: var(--black); }
.award-whose { display: flex; align-items: center; gap: 12px; }
.award-whose--client { margin-top: 6px; padding: 10px 12px; border-radius: var(--radius-sm); background: rgb(255 255 255 / 6%); font-weight: 600; font-size: var(--small-size); color: var(--white); }
.band:not(.band--dark) .award-whose--client { background: var(--ash); color: var(--ink); }
.award-client { display: flex; align-items: center; height: 30px; }
.award-client img { height: 100%; width: auto; max-width: 120px; object-fit: contain; }
.band:not(.band--dark) .award-client img { filter: brightness(0); }
.award-whose--person { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); font-weight: 500; letter-spacing: -0.01em; color: var(--amber); }

.cabinet-tally { list-style: none; display: flex; flex-wrap: wrap; gap: 20px clamp(32px, 5vw, 72px); margin-bottom: clamp(28px, 4vw, 48px); font-size: var(--small-size); color: var(--on-dark-muted); }
.cabinet-tally strong { display: block; font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4.25rem); font-weight: 400; letter-spacing: -0.045em; line-height: 1; color: var(--amber); margin-bottom: 6px; }
.cabinet-year { display: grid; grid-template-columns: 1fr; gap: 18px; padding-block: clamp(28px, 3.4vw, 48px); border-top: 1px solid var(--line-dark); }
.cabinet-y { font-size: clamp(3rem, 2rem + 4vw, 6rem); font-weight: 300; letter-spacing: -0.05em; line-height: 0.9; color: var(--white); }
@media (min-width: 1024px) {
  .cabinet-year { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
  .cabinet-y { position: sticky; top: calc(var(--header-main) + 28px); align-self: start; }
}
.cabinet-body { min-width: 0; }
.awards--cabinet { grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 760px) { .awards--cabinet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (min-width: 760px) { .awards--cabinet { grid-auto-rows: 1fr; } }
.awards--cabinet .award { min-width: 0; }
.awards--cabinet .award-whose { margin-top: auto; }
.awards--cabinet .award-whose--client { display: grid; grid-template-columns: minmax(0, 100px) minmax(0, 1fr); }
.awards--cabinet .award-client { min-width: 0; }
.awards--cabinet .award-client img { max-width: 100%; }
.awards--cabinet .award-whose > span { min-width: 0; overflow-wrap: anywhere; }
.places { list-style: none; margin-top: clamp(20px, 2.4vw, 32px); display: grid; grid-template-columns: 1fr; column-gap: 40px; border-top: 1px solid var(--line-dark); }
@media (min-width: 900px) { .places { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.place { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line-dark); }
.place-mark { display: flex; align-items: center; height: 34px; }
.place-mark img { height: 100%; width: auto; max-width: 96px; object-fit: contain; opacity: 0.85; }
.place-title { display: block; font-weight: 500; line-height: 1.3; }
.place-by { display: block; margin-top: 2px; font-size: var(--small-size); color: var(--on-dark-muted); line-height: 1.4; }
.place-status { font-size: var(--label-size); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); padding: 4px 10px; border: 1px solid rgb(255 153 0 / 55%); border-radius: var(--pill); white-space: nowrap; }
@media (max-width: 479.98px) { .place { grid-template-columns: 64px minmax(0, 1fr); } .place-mark img { max-width: 64px; } .place-status { grid-column: 2; justify-self: start; } }
.award-top { min-width: 0; }
.award-mark { min-width: 0; flex: 0 1 auto; }
.award-mark img { max-width: 100%; }
.closing-lede { margin-top: 20px; max-width: 60ch; font-size: var(--lede-size); line-height: 1.5; color: #d6d6da; }
.home-close .closing-lede + * { margin-top: clamp(28px, 3vw, 40px); }


.case-card:has(.case-image--whole) .case-link { background: var(--white) !important; }
.case-image--whole img { object-position: 50% 50%; }
.cases-feature .case-card .case-image--whole { flex: none !important; aspect-ratio: 16 / 9 !important; }
.case-card:has(.case-image--whole) .case-body { border-top: 1px solid var(--line); }


.awards--wall { list-style: none; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .awards--wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .awards--wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } .award--feature { grid-column: span 2; grid-row: span 2; } }
.awards--wall .award { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; border-radius: var(--radius); background: var(--panel) !important;
  color: var(--white); border: 1px solid #222224 !important; box-shadow: none; }
.awards--wall .award-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.awards--wall .award-mark { height: 40px; display: flex; align-items: center; min-width: 0; }
.awards--wall .award-mark img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: left center; filter: none; }
.awards--wall .award-when { flex: none; font-size: var(--label-size); font-weight: 600; letter-spacing: 0.08em; color: var(--amber); }
.awards--wall .award-title { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; color: var(--white); }
.awards--wall .award-programme { font-size: var(--small-size); line-height: 1.4; color: var(--on-dark-muted); }
.awards--wall .award-whose { margin-top: auto; padding-top: 12px; }
.awards--wall .award-whose--client { background: transparent; padding: 12px 0 0; border-top: 1px solid var(--line-dark); border-radius: 0; font-size: var(--small-size); color: var(--white); }
.awards--wall .award-whose--person { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-dark); font-size: 1rem; }
.awards--wall .award-client { height: 24px; }
/* The feature: amber, the organiser's mark in black and large, the title at heading size, what it was for. */
.awards--wall .award--feature { background: var(--amber) !important; color: var(--black); border: 0 !important; padding: clamp(26px, 2.6vw, 40px); gap: 12px; }
.awards--wall .award--feature .award-mark { height: clamp(56px, 5vw, 76px); }
.awards--wall .award--feature .award-mark img { filter: brightness(0); }
.awards--wall .award--feature .award-when { color: var(--black); }
.awards--wall .award--feature .award-title { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.75rem); font-weight: 430; letter-spacing: -0.035em; line-height: 1.05; color: var(--black); margin-top: auto; }
.awards--wall .award--feature .award-programme { color: rgb(10 10 10 / 75%); font-size: var(--body-size); }
.awards--wall .award--feature .award-for { margin-top: 10px; padding-top: 14px; border-top: 1px solid rgb(10 10 10 / 18%); font-size: var(--body-size); line-height: 1.5; color: rgb(10 10 10 / 85%); }
.awards--wall .award--feature :focus-visible { outline-color: var(--black); }
@media (min-width: 1100px) { .recognition .awards--wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.awards--wall .award--compact .award-mark img { max-width: 132px; }
.awards--wall .award--compact .award-mark { height: 38px; }


@media (max-width: 1023.98px) {
  .hero-media { order: 2; width: min(72vw, 400px); height: auto !important; aspect-ratio: 1; margin: 8px auto 40px; border-radius: 50%;
    background: url(/assets/img/sun-1280.webp) 100% 50% / auto 140% no-repeat;
    box-shadow: 0 0 56px 6px rgb(255 140 0 / 34%), 0 0 170px 40px rgb(234 71 0 / 20%); -webkit-mask-image: none; mask-image: none; }
  .hero-media img, .hero-media::before { display: none !important; }
}
@media (max-width: 767.98px) {
  .closing { --sun: 46vw; padding-bottom: calc(var(--sun) + 56px); }
  .closing::before { right: var(--gutter); bottom: 32px; }
}
/* A little limb darkening, so the whole disc reads as a sphere rather than a flat textured circle. */
@media (max-width: 1023.98px) {
  .hero-media { box-shadow: inset -18px -22px 60px rgb(110 18 0 / 55%), inset 10px 12px 40px rgb(255 214 120 / 18%),
                0 0 56px 6px rgb(255 140 0 / 34%), 0 0 170px 40px rgb(234 71 0 / 20%); }
}
.closing::before { box-shadow: inset -18px -22px 60px rgb(110 18 0 / 55%), inset 10px 12px 40px rgb(255 214 120 / 18%),
                   0 0 60px 8px rgb(255 140 0 / 38%), 0 0 200px 60px rgb(234 71 0 / 22%); }
/* The client row, centred and optically even (a square mark gets more height than a long wordmark). */
.clients { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px clamp(28px, 4vw, 56px); }
.client { flex: 0 1 150px; height: 60px; }
.client-logo { max-height: calc(38px * var(--s, 1)); max-width: calc(150px * var(--s, 1)); }
@media (max-width: 599.98px) { .client { flex-basis: 28%; } .client-logo { max-height: calc(30px * var(--s, 1)); max-width: 100%; } }
.awards--wall .award-client { height: 28px; }
.clients { gap: 26px 32px; }
.client { flex: 0 1 148px; }
@media (max-width: 599.98px) { .clients { gap: 18px 14px; } .client { flex: 0 1 30%; height: 48px; } }
.clients-head { text-align: center; }

@media (min-width: 1200px) { .clients { flex-wrap: nowrap; justify-content: space-between; gap: 24px; } .client { flex: 0 1 124px; } .client-logo { max-width: calc(124px * var(--s, 1)); } }
@media (min-width: 1200px) { .clients { gap: 32px; } .client { flex: 1 1 0; min-width: 0; } .client-logo { max-width: 100%; max-height: calc(36px * var(--s, 1)); } }
.client--s95 { --s: 0.95; } .client--s110 { --s: 1.1; } .client--s115 { --s: 1.15; } .client--s120 { --s: 1.2; } .client--s130 { --s: 1.3; } .client--s140 { --s: 1.4; }


:root { --warm-glow: radial-gradient(80% 120% at 100% 0%, rgb(234 71 0 / 30%), rgb(255 153 0 / 9%) 42%, rgb(10 10 10 / 0%) 72%); }

/* The gradient band: black, the gradient as its top edge and a warm glow from the corner. */
.band--gradient { background: var(--warm-glow), var(--black) !important; color: var(--white) !important;
  border-top: 6px solid transparent; border-image: var(--gradient) 1; }
.band--gradient h2, .band--gradient h3, .band--gradient h4, .band--gradient .b-statement { color: var(--white); }
.band--gradient p, .band--gradient li, .band--gradient dd { color: #e4e4e8; }
.band--gradient .label { color: var(--amber) !important; }
.band--gradient .muted { color: var(--on-dark-muted) !important; }
.band--gradient a { color: var(--white); }
.band--gradient .action { color: var(--white); border-bottom-color: rgb(255 255 255 / 40%); }
.band--gradient .action .arrow:not(.ext) { color: var(--amber) !important; }
.band--gradient .button { background: var(--amber); color: var(--black); border-color: var(--amber); }
.band--gradient .button--ghost { background: transparent; color: var(--white); border-color: rgb(255 255 255 / 45%); }
.band--gradient .card { background: var(--panel) !important; color: var(--white); border: 1px solid #262628; }
.band--gradient .card p { color: #d6d6da; }
.band--gradient .stat { border-top-color: var(--line-dark) !important; }
.band--gradient .stat strong { color: var(--amber); }
.band--gradient .stat span { color: var(--on-dark-muted) !important; }
.band--gradient .facts > div { border-top-color: var(--line-dark) !important; }
.band--gradient .facts > div:last-child { border-bottom-color: var(--line-dark) !important; }
.band--gradient .facts dt { color: var(--amber) !important; }
.band--gradient .facts a { color: var(--white) !important; }
.band--gradient :focus-visible { outline-color: var(--focus-dark) !important; }

/* The home 'Integrators' card: the dark panel, the gradient along its top, the category line in white. */
.category-card { background: var(--warm-glow), var(--panel) !important; color: var(--white) !important; border-top: 5px solid transparent; border-image: var(--gradient) 1; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.category-card .label { color: var(--amber) !important; }
.category-card p { color: #e4e4e8; }
.category-card .category-line { color: var(--white); }

/* Award cards that were amber: the dark panel with the warm glow and an amber top rule; the mark stays white. */
.awards--wall .award--feature, .award--brightbeam.award--won {
  background: var(--warm-glow), var(--panel) !important; color: var(--white) !important;
  border: 1px solid #2a2a2c !important; border-top: 4px solid var(--amber) !important; }
.awards--wall .award--feature .award-mark img, .award--brightbeam.award--won .award-mark img { filter: none !important; }
.awards--wall .award--feature .award-when, .award--brightbeam.award--won .award-year { color: var(--amber) !important; }
.awards--wall .award--feature .award-title, .award--brightbeam.award--won .award-title { color: var(--white) !important; }
.awards--wall .award--feature .award-programme, .award--brightbeam.award--won .award-programme { color: var(--on-dark-muted) !important; }
.awards--wall .award--feature .award-for, .award--brightbeam.award--won .award-for { color: #d6d6da !important; border-top-color: var(--line-dark) !important; }
.award--brightbeam.award--won .award-status { background: rgb(255 153 0 / 14%) !important; color: var(--amber) !important; }
.awards--wall .award--feature :focus-visible, .award--brightbeam.award--won :focus-visible { outline-color: var(--focus-dark) !important; }

/* The third plain case card: dark with the warm glow, the figure in amber. */
.case-grid > .case-card--plain:nth-child(3n+3) .case-link { background: var(--warm-glow), var(--panel) !important; color: var(--white) !important; border: 1px solid #2a2a2c; }
.case-grid > .case-card--plain:nth-child(3n+3) .case-meta { color: var(--amber) !important; }
.case-grid > .case-card--plain:nth-child(3n+3) .case-status { color: var(--on-dark-muted) !important; border-color: var(--line-dark) !important; }
.case-grid > .case-card--plain:nth-child(3n+3) .case-client, .case-grid > .case-card--plain:nth-child(3n+3) .case-figure { color: var(--on-dark-muted) !important; }
.case-grid > .case-card--plain:nth-child(3n+3) .case-figure { border-top-color: var(--line-dark) !important; }
.case-grid > .case-card--plain:nth-child(3n+3) .case-figure strong { color: var(--amber) !important; }
.case-grid > .case-card--plain:nth-child(3n+3) .case-link:focus-visible { outline-color: var(--focus-dark) !important; }
/* Lists of terms on the (now dark) gradient band: dark rows, amber terms. */
.band--gradient .contrast li { background: var(--panel) !important; color: var(--white); border: 1px solid #262628; }
.band--gradient .contrast p { color: #d6d6da !important; }
.band--gradient .contrast dt, .band--gradient .contrast .contrast-term { color: var(--amber) !important; }


:root { --night: #282829; --night-2: #2d2d2e; --panel: #323233; --panel-2: #3c3c3d; --line-dark: #4d4d4e;
  --dusk: radial-gradient(120% 70% at 85% 115%, rgb(234 71 0 / 20%), rgb(234 71 0 / 0%) 60%),
          linear-gradient(180deg, #282829 0%, #282829 60%, #282829 100%); }
.site-header { background: var(--night); }
.band--dark, .page-opening, .case-hero, .case-figures, .closing { background: var(--dusk), var(--night); }
.site-footer { background: var(--night); }
.band--gradient { background: var(--warm-glow), var(--dusk), var(--night) !important; }
.hero { background: radial-gradient(70% 90% at 100% 45%, rgb(234 71 0 / 22%), rgb(234 71 0 / 0%) 70%),
                    url(/assets/stars.svg) center / 1600px auto repeat, var(--dusk), var(--night); }
.hero-proof { background: rgb(40 40 41 / 72%); }
.awards--wall .award, .award, .band--dark .case-link, .band--dark .post-item a { border-color: #3c3c3d !important; }
@media (max-width: 1023.98px) { .hero { background: radial-gradient(90% 40% at 50% 78%, rgb(234 71 0 / 26%), rgb(234 71 0 / 0%) 70%),
                    url(/assets/stars.svg) center top / 1100px auto repeat, var(--dusk), var(--night); } }


/* Fact lists (plain dl.facts; the case-page sidebar and the special lists keep their own design). */
dl[class="facts"]:not(.case-facts dl) { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
dl[class="facts"]:not(.case-facts dl) > div { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; border: 0 !important;
  border-radius: var(--radius); background: var(--ash); }
.band--ash dl[class="facts"]:not(.case-facts dl) > div, .band--stone dl[class="facts"]:not(.case-facts dl) > div { background: var(--white); box-shadow: var(--card-shadow); }
.band--dark dl[class="facts"]:not(.case-facts dl) > div, .band--gradient dl[class="facts"]:not(.case-facts dl) > div { background: var(--panel); border: 1px solid #3c3c3d !important; }
dl[class="facts"]:not(.case-facts dl) > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
dl[class="facts"]:not(.case-facts dl) dt { display: flex; flex-direction: column; gap: 10px; padding: 0; color: var(--ember-ink); }
dl[class="facts"]:not(.case-facts dl) dt::before { content: ''; width: 22px; height: 3px; border-radius: 2px; background: var(--amber); }
.band--dark dl[class="facts"]:not(.case-facts dl) dt, .band--gradient dl[class="facts"]:not(.case-facts dl) dt { color: var(--amber); }
dl[class="facts"]:not(.case-facts dl) dd { line-height: 1.5; }

/* Tables. */
.table-wrap:not(.wa-grid-wrap) { padding: 4px clamp(16px, 2.4vw, 32px) 12px; border-radius: var(--radius-lg); background: var(--ash); }
.band--ash .table-wrap:not(.wa-grid-wrap), .band--stone .table-wrap:not(.wa-grid-wrap) { background: var(--white); box-shadow: var(--card-shadow); }
.band--dark .table-wrap:not(.wa-grid-wrap) { background: var(--panel); border: 1px solid #3c3c3d; }
.table:not(.wa-grid) caption { padding: 22px 0 16px; font-size: var(--small-size); color: var(--ink); font-weight: 500; }
.band--dark .table:not(.wa-grid) caption { color: var(--white); }
.table:not(.wa-grid) caption::before { content: ''; display: block; width: 28px; height: 3px; border-radius: 2px; margin-bottom: 12px; background: var(--amber); }
.table:not(.wa-grid) thead th { padding: 12px 18px 12px 0; border-top: 0; border-bottom: 2px solid var(--ink); color: var(--ember-ink); }
.band--dark .table:not(.wa-grid) thead th { border-bottom-color: var(--white); color: var(--amber); }
.table:not(.wa-grid) tbody { counter-reset: row; }
.table:not(.wa-grid) tbody tr { transition: background var(--t-fast) var(--ease); }
.table:not(.wa-grid) tbody tr:hover { background: rgb(255 153 0 / 6%); }
.table:not(.wa-grid) tbody th[scope="row"] { counter-increment: row; text-transform: none; letter-spacing: -0.005em; font-size: 1.0625rem; font-weight: 560;
  line-height: 1.3; color: var(--ink); padding-left: 0; }
.band--dark .table:not(.wa-grid) tbody th[scope="row"] { color: var(--white); }
.table:not(.wa-grid):not(.b-compare) tbody th[scope="row"]::before { content: counter(row, decimal-leading-zero); display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin: 0 12px 8px 0; border-radius: 50%; border: 1.5px solid var(--amber); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0; color: var(--ember-ink); vertical-align: middle; }
.band--dark .table:not(.wa-grid):not(.b-compare) tbody th[scope="row"]::before { color: var(--amber); }
.table:not(.wa-grid) tbody td { line-height: 1.55; color: var(--ink); }
.band--dark .table:not(.wa-grid) tbody td { color: #d6d6da; }
.table:not(.wa-grid) tbody th, .table:not(.wa-grid) tbody td { padding-block: 18px; border-top-color: var(--line); }
@media (min-width: 900px) { .table:not(.wa-grid):not(.b-compare) tbody th[scope="row"]::before { display: flex; margin-bottom: 10px; } }
@media (max-width: 767.98px) {
  .table:not(.wa-grid), .table:not(.wa-grid) tbody, .table:not(.wa-grid) tr, .table:not(.wa-grid) tbody th, .table:not(.wa-grid) td { display: block; width: 100% !important; }
  .table:not(.wa-grid) caption { display: block; }
  .table:not(.wa-grid) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table:not(.wa-grid) tbody tr { border-top: var(--hairline); padding-block: 16px 18px; }
  .table:not(.wa-grid) tbody th, .table:not(.wa-grid) tbody td { border-top: 0; padding: 0 0 6px; }
  .table:not(.wa-grid) td[data-label]::before { content: attr(data-label); display: block; margin: 10px 0 4px; font-size: var(--label-size); font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember-ink); }
}
/* Talks (19 Oct: 25 events, one data file): the date with the kind of appearance beneath it. */
.talk-when { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.talk-kind { font-size: var(--label-size); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: var(--pill); }
.talk-list .talk-event { font-weight: 600; color: var(--ink); line-height: 1.35; }
.talk-list .talk-event + p { margin-top: 4px; }


@media (max-width: 1023.98px) {
  .hero-media { width: min(84vw, 460px); aspect-ratio: 2 / 1; margin: 28px auto 0; border-radius: 999px 999px 0 0;
    background: url(/assets/img/sun-1280.webp) 100% 0% / auto 280% no-repeat;
    box-shadow: inset -14px 10px 50px rgb(110 18 0 / 45%), inset 10px 18px 36px rgb(255 214 120 / 16%),
                0 -10px 56px 4px rgb(255 140 0 / 34%), 0 -40px 150px 30px rgb(234 71 0 / 20%); }
  .hero-proof { border-top: 1px solid rgb(255 180 90 / 55%); }
}
@media (max-width: 767.98px) {
  .closing { --sun: 70vw; padding-bottom: calc(var(--sun) * 0.5 + 40px); }
  .closing::before { right: auto; left: 50%; transform: translateX(-50%); bottom: calc(var(--sun) * -0.5); }
}

@media (min-width: 1024px) { :root { --header-quiet: 0px; } .site-header::before { display: none; } }
.menu-name .arrow.ext { display: inline-block; width: 13px; margin-left: 6px; vertical-align: baseline; }
@media (max-width: 1023.98px) { .site-menu { background: var(--night) !important; } }


.page-opening.is-plain { background: radial-gradient(60% 90% at 100% 100%, rgb(234 71 0 / 26%), rgb(234 71 0 / 0%) 65%),
  url(/assets/stars.svg) center / 1600px auto repeat, var(--dusk), var(--night); }
.page-opening.is-plain::after { right: -9vw; top: auto; bottom: -24vw; width: 34vw; height: 34vw; min-width: 280px; min-height: 280px;
  background: url(/assets/img/sun-1280.webp) 100% 50% / auto 140% no-repeat; opacity: 0.9;
  box-shadow: inset -18px -22px 60px rgb(110 18 0 / 55%), 0 0 70px 10px rgb(255 140 0 / 30%), 0 0 220px 70px rgb(234 71 0 / 18%); }
@media (min-width: 1024px) {
  .page-opening.has-toc .opening-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(260px, 4fr); gap: clamp(40px, 5vw, 96px); align-items: end; }
}
.opening-toc { margin-top: 32px; padding: 22px 24px 18px; border-radius: var(--radius-lg); background: rgb(50 50 51 / 72%); border: 1px solid #3c3c3d;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (min-width: 1024px) { .opening-toc { margin-top: 0; } }
.opening-toc-head { font-size: var(--label-size); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); margin-bottom: 8px; }
.opening-toc ol { list-style: none; counter-reset: toc; }
.opening-toc li { counter-increment: toc; border-top: 1px solid #3c3c3d; }
.opening-toc li:first-child { border-top: 0; }
.opening-toc a { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; min-height: 44px; color: var(--white); text-decoration: none; font-size: var(--small-size); font-weight: 500; }
.opening-toc a::before { content: counter(toc, decimal-leading-zero); flex: none; width: 22px; font-size: var(--label-size); font-weight: 600; color: var(--on-dark-muted); }
.opening-toc a:hover { color: var(--amber); }
.opening-toc a:hover::before { color: var(--amber); }
@media (max-width: 1023.98px) {
  .page-opening.is-plain::after { right: -18vw; bottom: -30vw; }
  .opening-toc ol { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .opening-toc li:nth-child(2) { border-top: 0; }
}
@media (max-width: 479.98px) { .opening-toc ol { grid-template-columns: 1fr; } .opening-toc li:nth-child(2) { border-top: 1px solid #3c3c3d; } }


.clients-row { margin-top: clamp(36px, 4vw, 56px); padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.8vw, 40px); border-top: 0; border-radius: var(--radius-lg); background: var(--ash); }
.band--ash .clients-row { background: var(--white); }
.clients-row .clients-head { text-align: left; margin-bottom: 18px; color: var(--ember-ink); }
@media (min-width: 1200px) {
  .clients-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 32px; }
  .clients-row .clients-head { margin: 0; padding-right: 24px; border-right: 1px solid var(--line-strong); line-height: 1.4; }
}

/* The playbook cards on phones: the cover and title side by side, then the words at full width. */
@media (max-width: 899.98px) {
  .book { display: grid !important; grid-template-columns: 88px minmax(0, 1fr); column-gap: 16px; row-gap: 12px; align-items: center; }
  .book-cover { float: none !important; width: 88px !important; margin: 0 !important; grid-row: span 2; align-self: start; }
  .book-text { display: contents !important; }
  .book-text > .card-label { grid-column: 2; align-self: end; margin: 0 !important; }
  .book-text > h3 { grid-column: 2; align-self: start; margin: 0 !important; }
  .book-text > p:not(.card-label) { grid-column: 1 / -1; margin: 0 !important; }
}
/* The last menu (Research) opens leftwards from its button, so it never runs off the right edge. */
@media (min-width: 1024px) {
  .nav-main > .disclosure:last-of-type .disclosure-panel { left: auto; right: -24px; }
  .disclosure--wide .disclosure-panel { width: min(600px, calc(100vw - 48px)); }
}


/* Bullet lists (ul.points) outside cards: each point a card with an amber tick. */
ul.points:not(.card ul):not(.cards ul) { gap: 12px; }
ul.points:not(.card ul):not(.cards ul) > li { max-width: none; padding: 18px 20px 18px 58px; border-radius: var(--radius); background: var(--ash); line-height: 1.5; }
.band--ash ul.points:not(.card ul):not(.cards ul) > li { background: var(--white); box-shadow: var(--card-shadow); }
.band--dark ul.points:not(.card ul):not(.cards ul) > li, .band--gradient ul.points:not(.card ul):not(.cards ul) > li { background: var(--panel); border: 1px solid #3c3c3d; color: #e4e4e8; }
ul.points:not(.card ul):not(.cards ul) > li::before { left: 18px; top: 18px; width: 24px; height: 24px; background: var(--amber); }
ul.points:not(.card ul):not(.cards ul) > li::after { content: ''; position: absolute; left: 26px; top: 23px; width: 6px; height: 11px;
  border: solid var(--black); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* Timelines: a vertical line with an amber marker at each date. */
.b-timeline, .wa-timeline { position: relative; border-top: 0 !important; padding-left: 34px; }
.b-timeline::before, .wa-timeline::before { content: ''; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--amber), rgb(255 153 0 / 20%)); }
.b-timeline > div, .wa-timeline li { position: relative; border-top: 0 !important; border-bottom: 0 !important; padding-block: 12px 18px !important; }
.b-timeline > div::before, .wa-timeline li::before { content: ''; position: absolute; left: -31px; top: 16px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper, #fff); border: 3px solid var(--amber); }
.band--ash .b-timeline > div::before, .band--ash .wa-timeline li::before { background: var(--ash); }
.b-timeline dt, .wa-timeline-when { font-weight: 600 !important; color: var(--ember-ink) !important; }

/* Regime and estate lists (Quality and regulation, Trust): a grid of cards, the name as a heading. */
.b-regimes, .facts.b-wide { display: grid !important; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.b-regimes > div, .facts.b-wide > div { display: flex !important; flex-direction: column; gap: 8px; padding: 20px 22px !important; border: 0 !important; border-radius: var(--radius);
  background: var(--ash); border-top: 3px solid var(--amber) !important; }
.band--ash .b-regimes > div, .band--ash .facts.b-wide > div { background: var(--white); box-shadow: var(--card-shadow); }
.b-regimes dt, .facts.b-wide dt { font-size: 1.0625rem !important; font-weight: 600 !important; letter-spacing: -0.01em !important; text-transform: none !important; color: var(--ink) !important; padding: 0 !important; }
.b-regimes dd, .facts.b-wide dd { margin: 0; line-height: 1.5; }
@media (min-width: 1100px) { .b-regimes, .facts.b-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


.closing::before, .page-opening.is-plain::after {
  left: auto !important; right: 0 !important; top: 0 !important; bottom: 0 !important; transform: none !important;
  width: auto !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; aspect-ratio: 16 / 9;
  border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important;
  background: url(/assets/img/sun-1280.webp) 100% 50% / cover no-repeat !important; }
.closing { --sun: 0px; }
@media (max-width: 1023.98px) {
  .hero-media { width: 100% !important; aspect-ratio: 2 / 1; margin: 20px 0 0 !important; border-radius: 0 !important; box-shadow: none !important;
    background: url(/assets/img/sun-rise-1080.webp) 50% 0 / 100% auto no-repeat !important; }
  .page-opening.is-plain::after { top: auto !important; height: 34vw !important; width: 100% !important; aspect-ratio: auto;
    background: url(/assets/img/sun-rise-1080.webp) 50% 0 / 100% auto no-repeat !important; opacity: 0.55 !important; }
  .page-opening.is-plain { padding-bottom: calc(34vw + 24px); }
}
@media (max-width: 767.98px) {
  .closing { padding-bottom: calc(50vw + 32px) !important; }
  .closing::before { top: auto !important; height: 50vw !important; width: 100% !important; aspect-ratio: auto;
    background: url(/assets/img/sun-rise-1080.webp) 50% 0 / 100% auto no-repeat !important; }
}


.image-band--quiet .image-band-text { padding-block: clamp(120px, 18vw, 240px) clamp(40px, 5vw, 72px); }
.image-band-line { margin-top: 10px; font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.75rem); font-weight: 430; letter-spacing: -0.03em; line-height: 1.12; max-width: 22ch; color: var(--white); }
.has-side-image { position: relative; isolation: isolate; overflow: hidden; }
.side-image { margin: 0; }
.side-image img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .has-side-image .side-image { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 42%; }
  .has-side-image .side-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--night) 0%, rgb(40 40 41 / 0%) 40%); }
  .has-side-image .frame > * { max-width: 58%; }
}
@media (max-width: 1023.98px) { .has-side-image .side-image { aspect-ratio: 16 / 7; margin-bottom: 8px; } }
/* The design system: the sun at full intensity, never dimmed. */
@media (max-width: 1023.98px) { .page-opening.is-plain::after { opacity: 1 !important; } }
.image-band--quiet .image-band-text p.image-band-line { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.75rem); font-weight: 430; letter-spacing: -0.03em; line-height: 1.12; max-width: 22ch; color: var(--white); }
.image-band--quiet .image-band-media::after { background: linear-gradient(20deg, rgb(10 10 10 / 82%) 0%, rgb(10 10 10 / 45%) 32%, rgb(10 10 10 / 0%) 60%) !important; }


.figures.fig--mid strong { font-size: clamp(1.875rem, 1.4rem + 1.5vw, 2.75rem); letter-spacing: -0.04em; line-height: 1.02; }
.figures.fig--long strong { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); letter-spacing: -0.03em; line-height: 1.1; }
.figures .fig-to { font-size: 0.5em; letter-spacing: 0; color: var(--on-dark-muted); vertical-align: 0.35em; padding-inline: 0.15em; }
.figures .fig-part { white-space: nowrap; }
.figures strong span { font-size: inherit; color: inherit; line-height: inherit; letter-spacing: inherit; }
.figures strong .fig-to { font-size: 0.5em; letter-spacing: 0; color: var(--on-dark-muted); vertical-align: 0.35em; padding-inline: 0.15em; }
.figures strong .fig-to { font-size: max(0.875rem, 0.5em); }

/* 'On this page' on photo openings too (19 Oct): the panel sits at the right, over the photograph's foot. */
@media (min-width: 1024px) {
  .page-opening.has-image.has-toc .opening-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(260px, 4fr); gap: clamp(40px, 5vw, 96px); align-items: end; }
}
.page-opening.has-image .opening-toc { background: rgb(40 40 41 / 70%); }
/* Opening photographs stay vivid (19 Oct): darken only behind the words, at the left and foot. */
@media (min-width: 768px) {
  .opening-image::after { background: linear-gradient(90deg, rgb(10 10 10 / 82%) 0%, rgb(10 10 10 / 52%) 34%, rgb(10 10 10 / 0%) 62%),
    linear-gradient(180deg, rgb(10 10 10 / 0%) 55%, rgb(10 10 10 / 45%) 100%) !important; }
}
@media (min-width: 768px) {
  .opening-image::after { background: linear-gradient(90deg, rgb(10 10 10 / 86%) 0%, rgb(10 10 10 / 62%) 38%, rgb(10 10 10 / 0%) 66%),
    linear-gradient(180deg, rgb(10 10 10 / 0%) 55%, rgb(10 10 10 / 45%) 100%) !important; }
}
.page-opening.has-image .opening-text { text-shadow: 0 1px 2px rgb(0 0 0 / 35%), 0 2px 24px rgb(0 0 0 / 45%); }

.closing::after { display: none; }


.closing { padding-bottom: clamp(56px, 7vw, 104px) !important; }
.closing::before {
  left: auto !important; right: 0 !important; top: 0 !important; bottom: 0 !important; width: min(1100px, 78%) !important; height: 100% !important; aspect-ratio: auto !important;
  background: url(/assets/img/ds-crescent-rise-1440.webp) 85% 50% / cover no-repeat !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%); mask-image: linear-gradient(90deg, transparent 0%, #000 40%); }
@media (max-width: 767.98px) {
  .closing { padding-bottom: calc(52vw + 24px) !important; }
  .closing::before { top: auto !important; width: 100% !important; height: 60vw !important; background-position: 80% 50% !important; background-size: auto 100% !important;
    background-image: url(/assets/img/ds-crescent-rise-960.webp) !important; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%); mask-image: linear-gradient(180deg, transparent 0%, #000 35%); }
}


.reg { display: grid; gap: clamp(32px, 4vw, 64px); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .reg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.reg-sub { font-size: var(--label-size); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember-ink); margin-bottom: 16px; }
.reg-steps { list-style: none; counter-reset: rs; display: grid; gap: 12px; }
.reg-steps > li { counter-increment: rs; position: relative; padding: 18px 20px 18px 64px; border-radius: var(--radius); background: var(--ash); line-height: 1.5; }
.band--ash .reg-steps > li { background: var(--white); box-shadow: var(--card-shadow); }
.reg-steps > li::before { content: counter(rs); position: absolute; left: 18px; top: 16px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--amber); color: var(--black); font-size: 0.9375rem; font-weight: 700; }
.reg-rules { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.reg-rules > div { padding: 16px 0 18px; border-bottom: var(--hairline); }
.reg-rules dt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-weight: 600; font-size: 1.0625rem; color: var(--ink); }
.reg-rules dd { margin: 6px 0 0; line-height: 1.5; }
.reg-status { font-size: var(--label-size); font-weight: 600; letter-spacing: 0.04em; padding: 3px 10px; border-radius: var(--pill); border: 1px solid currentColor; }
.reg-status--in, .reg-status--standard { color: #1f6b3a; background: rgb(31 107 58 / 8%); }
.reg-status--guidance { color: var(--muted); }
.reg-status--draft { color: var(--ember-ink); background: rgb(234 71 0 / 7%); }
.reg-status--from { color: #3a4a8a; background: rgb(58 74 138 / 8%); }


.opening-image img[src*="ds-facility-night"] { object-position: 50% 100%; }
@media (min-width: 768px) {
  .opening-image:has(img[src*="ds-facility-night"])::after {
    background: linear-gradient(90deg, rgb(10 10 10 / 86%) 0%, rgb(10 10 10 / 62%) 38%, rgb(10 10 10 / 0%) 66%) !important; }
}
.image-band--lit .image-band-text { text-shadow: 0 1px 2px rgb(0 0 0 / 35%), 0 2px 24px rgb(0 0 0 / 50%); }
.image-band--lit .image-band-media::after {
  background: linear-gradient(180deg, rgb(10 10 10 / 52%) 0%, rgb(10 10 10 / 70%) 40%, rgb(10 10 10 / 92%) 100%); }
@media (min-width: 1024px) {
  .image-band--lit .image-band-media::after {
    background: linear-gradient(90deg, rgb(10 10 10 / 88%) 0%, rgb(10 10 10 / 62%) 40%, rgb(10 10 10 / 0%) 66%),
      linear-gradient(180deg, rgb(10 10 10 / 0%) 50%, rgb(10 10 10 / 50%) 100%); }
}


.case-hero-split { display: grid; gap: clamp(28px, 4vw, 64px); }
.case-hero-picture { margin: 0; background: var(--white); border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9;
  box-shadow: 0 24px 60px rgb(0 0 0 / 35%); }
.case-hero-picture img { display: block; width: 100%; height: 100%; object-fit: contain; }
.case-hero--whole .case-hero-inner { padding-block: clamp(28px, 4vw, 56px) clamp(44px, 6vw, 88px); }
.case-hero--whole h1 { font-size: clamp(2.375rem, 1.5rem + 2.8vw, 4rem); }
@media (min-width: 1024px) {
  .case-hero-split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; margin-top: clamp(24px, 3vw, 48px); }
}


.lines-ciops { margin-top: clamp(32px, 4vw, 56px); padding: clamp(24px, 3vw, 40px); border-radius: 20px; background: var(--dusk), var(--night); color: var(--white);
  display: grid; gap: 12px; max-width: 100%; }
.lines-ciops .label { color: var(--amber); }
.lines-ciops h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); letter-spacing: -0.03em; line-height: 1.12; max-width: 24ch; }
.lines-ciops p:not(.label) { color: #e4e4e8; max-width: 62ch; }
.lines-ciops .action { color: var(--white); justify-self: start; }


@media (min-width: 1024px) {
  .nav { justify-content: space-between; gap: clamp(20px, 2.4vw, 40px); }
  .nav-functional { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 32px); padding-left: clamp(20px, 2.4vw, 32px); border-left: var(--hairline-dark); }
  .nav-main > .disclosure:last-of-type .disclosure-panel { left: -24px; right: auto; }
  .nav-functional .disclosure-panel { left: auto; right: -24px; }
}
@media (max-width: 1023.98px) {
  .nav-functional { display: flex; flex-direction: column; }
}


.clients-loop { position: relative; }
.clients-pause { display: none; }
.clients--copy { display: none; }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .clients-loop { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); padding-bottom: 52px; }
  .clients-loop .clients-track { display: flex; width: max-content; animation: clients-scroll 45s linear infinite; }
  .clients-loop .clients { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 64px; padding-right: 64px; }
  .clients-loop .clients--copy { display: flex; }
  .clients-loop .client { flex: 0 0 136px; min-width: 0; }
  .clients-loop .client-logo { max-width: calc(136px * var(--s, 1)); max-height: calc(36px * var(--s, 1)); }
  .clients-loop[data-paused] .clients-track, .clients-loop:hover .clients-track, .clients-loop:focus-within .clients-track { animation-play-state: paused; }
  .clients-pause { display: inline-flex; align-items: center; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); min-height: 44px;
    padding: 0 18px; border: 1px solid var(--line-strong); border-radius: var(--pill); background: transparent; color: var(--ink); font: inherit;
    font-size: var(--small-size); font-weight: 600; cursor: pointer; }
}
@keyframes clients-scroll { to { transform: translateX(-50%); } }


@media (min-width: 900px) { .lines .panel-media { aspect-ratio: 21 / 9; } }

/* The home figures are three now the headcount has gone (21 Oct): one row of three at every width. */
.proof-strip .stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

/* The plant at night keeps its building in view wherever it is cropped. */
img[src*="ds-facility-night"] { object-position: 50% 100%; }
/* Dublin at sunrise (About) has a bright sky behind a long headline: the darkening reaches further right. */
@media (min-width: 768px) {
  .opening-image:has(img[src*="dublin-docklands"])::after {
    background: linear-gradient(90deg, rgb(10 10 10 / 88%) 0%, rgb(10 10 10 / 74%) 45%, rgb(10 10 10 / 30%) 70%, rgb(10 10 10 / 0%) 88%),
      linear-gradient(180deg, rgb(10 10 10 / 0%) 55%, rgb(10 10 10 / 40%) 100%) !important; }
}


@media (min-width: 1200px) {
  .tiles--four { grid-template-rows: auto auto 1fr; }
  .tiles--four .tile { grid-row: span 3; display: grid; grid-template-rows: subgrid; }
  .tiles--four .tile-body { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; row-gap: 12px; }
  .tiles--four .tile h3 { min-height: 0; }
  .tiles--four .tile .case-links { margin-top: 0; align-self: end; }
}


.reasons { gap: 16px; }
.reasons li { counter-increment: rs; position: relative; padding: 22px 22px 26px; border: 1px solid var(--line-dark); border-top: 3px solid var(--amber);
  border-radius: var(--radius); background: var(--panel); }
.reasons li::before { content: counter(rs, decimal-leading-zero); display: block; margin-bottom: 12px; font-size: var(--label-size); font-weight: 600;
  letter-spacing: 0.08em; color: var(--on-dark-muted); }
.reasons li:nth-child(n+4) { border-top-color: #ffd28a; }  /* the last two are commitments, not comparisons */
@media (min-width: 1100px) {
  .reasons { grid-template-rows: auto auto auto 1fr; }
  .reasons li { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 8px; }
  .reasons li::before { margin-bottom: 0; }
  .reason-vs, .reasons p { margin: 0; }
}


.menu-group { padding: 14px 0 4px 16px; font-size: var(--label-size); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); }
@media (min-width: 1024px) {
  .disclosure-panel .menu-group { grid-column: 1 / -1; padding: 12px 16px 2px; }
  .disclosure-panel .menu-group:first-child { padding-top: 6px; }
  .disclosure-panel .rule { margin: 8px 0 4px; }
}

/* Cards that open with a picture (Trust's open-source cards use the research site's own pictures, 21 Oct). */
.card--pic { overflow: hidden; }
.card-media { margin: calc(-1 * clamp(24px, 2.4vw, 34px)) calc(-1 * clamp(24px, 2.4vw, 34px)) 18px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--mist); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.card--pic:hover .card-media img { transform: scale(1.04); }
/* Embed's portrait is warm amber behind the words: the darkening reaches further right. */
@media (min-width: 768px) {
  .opening-image:has(img[src*="ds-ambassador-eye"])::after {
    background: linear-gradient(90deg, rgb(10 10 10 / 90%) 0%, rgb(10 10 10 / 78%) 45%, rgb(10 10 10 / 30%) 70%, rgb(10 10 10 / 0%) 86%),
      linear-gradient(180deg, rgb(10 10 10 / 0%) 55%, rgb(10 10 10 / 40%) 100%) !important; }
}


.lines-ciops { grid-template-columns: 1fr; }
@media (min-width: 900px) { .lines-ciops { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); column-gap: clamp(24px, 4vw, 64px); align-items: center; }
  .lines-ciops > :not(.still) { grid-column: 1; } .lines-ciops .still { grid-column: 2; grid-row: 1 / span 4; align-self: stretch; } }
.still { position: relative; min-height: 340px; background: transparent; }
.still canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
html:not(.js) .still { display: none; }
.field-labels { position: absolute; inset: 0; pointer-events: none; }
.fl { position: absolute; left: 0; top: 0; white-space: nowrap; font: 600 14px/1.15 var(--font); letter-spacing: .1em; text-transform: uppercase; color: #acacac; opacity: 0; }

@media (max-width: 899.98px) { .lines-ciops { display: flex; flex-direction: column; align-items: flex-start; }
  .lines-ciops .still { order: -1; align-self: stretch; width: 100%; min-height: 0; aspect-ratio: 1 / 1; max-height: 420px; margin-bottom: 4px; } }

/* Sector headings scale with their card. The last word and arrow wrap together,
   with real layout space for the arrow and its hover movement. */
.tiles--four .tile h3 { container-type: inline-size; font-size: 1.5rem; }
.tiles--four .tile h3 a { display: inline; font-size: clamp(1.5rem, 12cqi, 2.25rem); }
.tiles--four .tile h3 a::after { content: none; }
.tile-title-end { white-space: nowrap; padding-inline-end: 5px; }
.tile-title-end::after { display: inline-block; margin-left: 0.3em; vertical-align: 0.05em; }


.still-words { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46%; margin: 0; text-align: center;
  font-size: clamp(1.125rem, 0.8rem + 1vw, 1.625rem); font-weight: 450; letter-spacing: -0.02em; line-height: 1.15; color: var(--white); text-wrap: balance; }
html:not(.js) .still-words { display: none; }

/* Operate's discipline section: the CIOps ring stands where the side picture was, above the words on phones. */
.has-side-image .side-image.still::after { display: none; }
@media (max-width: 1023.98px) { .has-side-image .side-image.still { aspect-ratio: 1 / 1; max-height: 420px; min-height: 0; width: 100%; margin-bottom: 8px; } }
.still-words { width: auto; max-width: none; }
.still-words span { display: block; white-space: nowrap; }


.proof-strip .frame > .clients-row { margin-top: 0; }  /* beats the space after a band heading: this one is hidden */


.clients-row .clients { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; justify-items: center; align-items: center; --k: 0.72; }
.clients-row .client { flex: none; height: auto; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.clients-row .client-logo { width: calc(var(--lw, 80) * 1px * var(--k)); height: auto; max-width: 100%; max-height: none; }
@media (min-width: 600px) { .clients-row .clients { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 44px; max-width: 720px; margin-inline: auto; --k: 0.95; } }  /* five over four */
@media (min-width: 1100px) { .clients-row .clients { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 24px; max-width: none; margin-inline: 0; --k: 1; } }
@media (min-width: 1200px) and (max-width: 1359.98px) {
  .clients-row { display: block; }
  .clients-row .clients-head { margin: 0 0 18px; padding-right: 0; border-right: 0; } }
.client--w24 { --lw: 24; } .client--w28 { --lw: 28; } .client--w32 { --lw: 32; } .client--w36 { --lw: 36; } .client--w40 { --lw: 40; } .client--w44 { --lw: 44; } .client--w48 { --lw: 48; } .client--w52 { --lw: 52; } .client--w56 { --lw: 56; } .client--w60 { --lw: 60; } .client--w64 { --lw: 64; } .client--w68 { --lw: 68; } .client--w72 { --lw: 72; } .client--w76 { --lw: 76; } .client--w80 { --lw: 80; } .client--w84 { --lw: 84; } .client--w88 { --lw: 88; } .client--w92 { --lw: 92; } .client--w96 { --lw: 96; } .client--w100 { --lw: 100; } .client--w104 { --lw: 104; } .client--w108 { --lw: 108; } .client--w112 { --lw: 112; } .client--w116 { --lw: 116; } .client--w120 { --lw: 120; } .client--w124 { --lw: 124; } .client--w128 { --lw: 128; } .client--w132 { --lw: 132; } .client--w136 { --lw: 136; } .client--w140 { --lw: 140; } .client--w144 { --lw: 144; } .client--w148 { --lw: 148; } .client--w152 { --lw: 152; } .client--w156 { --lw: 156; } .client--w160 { --lw: 160; }


.still-name { position: absolute; inset: 0; container-type: size; pointer-events: none; }
.still .still-words { font-size: clamp(1.375rem, 9.5cqmin, 3rem); }


@media (max-width: 1099.98px) {
  .awards--wall .award--compact { gap: 10px; padding: 24px 24px 22px; }
  .awards--wall .award--compact .award-top { margin-bottom: 14px; }
  .awards--wall .award--compact .award-mark { height: 50px; }
  .awards--wall .award--compact .award-mark img { max-width: 180px; }
  .awards--wall .award--compact .award-title { font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.02em; }
  .awards--wall .award--compact .award-programme { font-size: var(--body-size); }
  .awards--wall .award--compact .award-for { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line-dark); font-size: var(--body-size); line-height: 1.5; color: #d6d6da; }
  .awards--wall .award--compact .award-whose { margin-top: auto; padding-top: 16px; font-size: var(--body-size); }
  .awards--wall .award--compact .award-whose--client { gap: 14px; }
  .awards--wall .award--compact .award-client { height: 38px; }
}
@media (min-width: 700px) and (max-width: 1099.98px) { .awards--wall .award--feature { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .awards--wall .award--compact .award-for { display: none; } }
/* Our own wins: 'Brightbeam' at the foot, styled like a person's name, below desktop width only. */
.awards--wall .award-whose--ours { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-dark); font-size: var(--body-size); font-weight: 500; letter-spacing: -0.01em; color: var(--amber); }
@media (min-width: 1100px) { .awards--wall .award-whose--ours { display: none; } }


.nav-group > .nav-top { box-shadow: none; }
.disclosure[data-current] > .disclosure-button { box-shadow: none; }
.disclosure[data-current] > .nav-top, .nav-top[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--amber); }
.nav-more { justify-content: center; color: var(--on-dark-muted); }
.nav-more .chev { margin: 0; }
.nav-more:hover, .nav-more[aria-expanded="true"] { color: var(--amber); }
@media (min-width: 1024px) {
  .nav-group { align-items: stretch; }
  .nav-more { width: 28px; margin-left: 2px; }
  .nav-more .chev { width: 14px; }
  .nav-main, .nav-functional { gap: clamp(16px, 1.9vw, 32px); }
}
@media (max-width: 1023.98px) {
  .site-menu .nav-group { display: grid; grid-template-columns: minmax(0, 1fr) 56px; align-items: stretch; }
  .site-menu .nav-group > .nav-top { border-bottom: var(--hairline-dark); }
  .site-menu .nav-group > .nav-more { width: 56px; justify-content: center; border-left: var(--hairline-dark); }
  .site-menu .nav-group > .disclosure-panel { grid-column: 1 / -1; }
}


@media (min-width: 1024px) {
  html:not([data-nav]) .nav-group > .nav-more:not(:focus-visible) { width: 0; min-width: 0; margin: 0; padding: 0; overflow: hidden; opacity: 0; }
  html:not([data-nav]) .nav-group > .nav-top::after { content: ''; width: 6px; height: 6px; margin: -4px 0 0 9px; border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.7; transition: transform var(--t-fast) var(--ease); }
  html:not([data-nav]) .nav-group > .disclosure-panel { display: block !important; visibility: hidden; opacity: 0; transform: translateY(6px);
    pointer-events: none; transition: opacity 140ms var(--ease), transform 140ms var(--ease), visibility 0s linear 160ms; }
  html:not([data-nav]) .nav-group.disclosure--wide > .disclosure-panel { display: grid !important; }
  html:not([data-nav]) .nav-group:not([data-dismissed]):focus-within > .disclosure-panel,
  html:not([data-nav]) .nav-group > .nav-more[aria-expanded="true"] + .disclosure-panel { visibility: visible; opacity: 1; transform: none; pointer-events: auto;
    transition: opacity 140ms var(--ease), transform 140ms var(--ease), visibility 0s; }
  html:not([data-nav]) .nav-group:not([data-dismissed]):focus-within > .nav-top::after { transform: translateY(3px) rotate(225deg); }
}
@media (min-width: 1024px) and (hover: hover) {
  html:not([data-nav]) .nav-group:not([data-dismissed]):hover > .disclosure-panel { visibility: visible; opacity: 1; transform: none; pointer-events: auto;
    transition: opacity 140ms var(--ease) 80ms, transform 140ms var(--ease) 80ms, visibility 0s linear 80ms; }
  html:not([data-nav]) .nav-group:not([data-dismissed]):hover > .nav-top { color: var(--amber); }
  html:not([data-nav]) .nav-group:not([data-dismissed]):hover > .nav-top::after { transform: translateY(3px) rotate(225deg); }
}


html:not([data-nav="hover"]):not([data-nav="click"]) .menu-overview { display: none; }
.nav-more-label { display: none; }
html:is([data-nav="hover"], [data-nav="click"]) .disclosure-panel:not([hidden]) { display: flex !important; flex-direction: column; }
html:is([data-nav="hover"], [data-nav="click"]) .disclosure--wide .disclosure-panel { width: auto; min-width: 340px; max-width: 420px; }
@media (min-width: 1024px) {

  html:is([data-nav="hover"], [data-nav="click"]) .nav-group > .disclosure-panel { width: max-content; min-width: 280px; max-width: min(420px, calc(100vw - 48px)); }
  html:is([data-nav="hover"], [data-nav="click"]) .disclosure-panel .menu-name { white-space: nowrap; }
  html:is([data-nav="hover"], [data-nav="click"]) .nav-functional .nav-group > .disclosure-panel { left: auto; right: -12px; }
}
html:is([data-nav="hover"], [data-nav="click"]) .disclosure-panel > .rule { align-self: stretch; }
@keyframes nav-in { from { opacity: 0; transform: translateY(6px); } }
@media (min-width: 1024px) {
  html:is([data-nav="hover"], [data-nav="click"]) .nav-group > .disclosure-panel:not([hidden]) { animation: nav-in 140ms var(--ease); }
  html[data-nav="hover"] .nav-group > .nav-more { width: 28px; min-width: 24px; }
  html[data-nav="click"] .nav-group > .nav-top { display: none; }
  html[data-nav="click"] .nav-group > .nav-more { width: auto; gap: 8px; color: var(--white); }
  html[data-nav="click"] .nav-group > .nav-more:hover, html[data-nav="click"] .nav-group > .nav-more[aria-expanded="true"] { color: var(--amber); }
  html[data-nav="click"] .nav-more-label { display: inline; }
  html[data-nav="click"] .disclosure[data-current] > .nav-more { box-shadow: inset 0 -2px 0 var(--amber); }
}
@media (prefers-reduced-motion: reduce) { .nav-group > .disclosure-panel:not([hidden]) { animation: none !important; } }


.menu-overview .ov { display: none; }
html:not([data-ov]) .ov-line, html[data-ov="line"] .ov-line, html[data-ov="explore"] .ov-explore,
html:is([data-ov="heading"], [data-ov="foot"]) .ov-heading { display: block; }
.disclosure-panel .menu-overview { padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line-dark); }
.ov-line .menu-note { max-width: 32ch; }
.ov-heading .menu-name { display: inline-flex; align-items: center; gap: 10px; font-size: 1.0625rem; font-weight: 600; }
.ov-heading .arrow { width: 18px; color: var(--amber); transition: transform var(--t-fast) var(--ease); }
.menu-overview a:hover .ov-heading .arrow { transform: translateX(4px); }
html[data-ov="explore"] .ov-explore .menu-name { font-weight: 600; }
html[data-ov="foot"] .disclosure-panel .menu-overview { order: 1; padding: 6px 0 0; margin: 6px 0 0; border-bottom: 0; border-top: 1px solid var(--line-dark); }


.disclosure-panel a[aria-current="page"] { box-shadow: none; }
html:not([data-mark]) .disclosure-panel a[aria-current="page"] .menu-name,
html[data-mark="amber"] .disclosure-panel a[aria-current="page"] .menu-name { color: var(--amber); }
html[data-mark="tint"] .disclosure-panel a[aria-current="page"] { background: rgb(255 255 255 / 9%); }
html[data-mark="dot"] .disclosure-panel a[aria-current="page"] .menu-name::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 10px;
  border-radius: 50%; background: var(--amber); vertical-align: 0.12em; }
html[data-mark="underline"] .disclosure-panel a[aria-current="page"] .menu-name { text-decoration: underline; text-decoration-color: var(--amber);
  text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
html[data-mark="tag"] .disclosure-panel a[aria-current="page"] .menu-name::after { content: 'You\2019re here'; display: inline-block; margin-left: 10px; padding: 1px 8px;
  border: 1px solid rgb(255 153 0 / 55%); border-radius: var(--pill); font-size: var(--label-size); font-weight: 500; color: var(--amber); vertical-align: 0.1em; }

/* A's arrows take room: on narrow desktops the header tightens so it still fits on one line at 1024 px. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  html[data-nav="hover"] .site-menu { gap: 8px; }
  html[data-nav="hover"] .nav { gap: 8px; }
  html[data-nav="hover"] .nav-main, html[data-nav="hover"] .nav-functional { gap: 4px; }
  html[data-nav="hover"] .nav-main .nav-item:not(.nav-top) { margin: 0 8px 0 4px; }   /* Work, the one label without an arrow */
  html[data-nav="hover"] .nav-functional { padding-left: 4px; }
  html[data-nav="hover"] .nav-group > .nav-more { width: 24px; }
  html[data-nav="hover"] .nav-cta { padding: 0 12px; }
}

/* Option B: labels only; each section's pages in a bar under the header (preview only until chosen). */
html[data-nav="b"] .nav-more, html[data-nav="b"] .nav-group > .disclosure-panel { display: none !important; }
html[data-nav="b"] .site-menu .nav-group { grid-template-columns: 1fr; }
.section-bar { display: none; }
html[data-nav="b"] .section-bar { display: block; background: #2d2d2e; color: var(--white); border-bottom: var(--hairline-dark); position: relative; z-index: 40; }
.section-bar-inner { position: relative; max-width: calc(var(--frame) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center;
  gap: clamp(16px, 2.4vw, 36px); min-height: 52px; overflow-x: auto; scrollbar-width: none; }
.section-bar-inner::-webkit-scrollbar { display: none; }
.section-bar a { white-space: nowrap; text-decoration: none; color: var(--white); font-size: var(--small-size); display: inline-flex; align-items: center; min-height: 44px; }
.section-bar-home { font-weight: 600; padding-right: clamp(16px, 2.4vw, 36px); border-right: var(--hairline-dark); }
.section-bar ul { list-style: none; display: flex; gap: clamp(16px, 2.2vw, 32px); }
.section-bar ul a { color: #c9cad3; }
.section-bar a:hover { color: var(--amber); }
.section-bar a[aria-current="page"] { color: var(--white); box-shadow: inset 0 -2px 0 var(--amber); }
/* Seven sections and 'Talk to us' on one line: labels never wrap; tighter spacing on narrow desktops. */
@media (min-width: 1024px) { .site-header .nav-item, .site-header .nav-cta { white-space: nowrap; } }
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .site-menu { gap: 20px; }
  .nav { gap: 16px; }
  .nav-main, .nav-functional { gap: 12px; }
  .nav-functional { padding-left: 16px; }
  .nav-more { width: 22px; margin-left: 0; }
  .nav-cta { padding: 0 16px; gap: 8px; }
}
/* When the arrow button has keyboard focus it shows itself, so the label's own chevron steps aside. */
@media (min-width: 1024px) { html:not([data-nav]) .nav-group:has(> .nav-more:focus-visible) > .nav-top::after { display: none; } }


.hero-light { display: none; }
html[data-hero] .hero-light { display: block; pointer-events: none; }
html[data-hero] .hero-media, html[data-hero] .hero-glow { display: none !important; }
html[data-hero] .hero { background: url(/assets/stars.svg) center / 1600px auto repeat, var(--dusk), var(--night); }
@media (min-width: 1024px) { html[data-hero] .hero-light { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; } }
@media (max-width: 1023.98px) { html[data-hero] .hero-light { order: 2; width: 100%; height: clamp(170px, 46vw, 320px); } }


html[data-hero="lit"] .hero-light { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; order: 0; }
/* On phones the sentence sits a little nearer the brand, so the three beams are evenly spaced, and its first line
   alone stops short (an empty float at its right-hand end), so its beam has room to arrive. */
@media (max-width: 599.98px) {
  html[data-hero="lit"] .hero-h1 { margin-top: 10px; }
  html[data-hero="lit"] .hero-h1::before { content: ''; float: right; width: 24%; height: 1.2em; height: 1lh; }
}
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html[data-hero="lit"] .hero-brand { display: flex; flex-direction: column; }   /* so the spans' margins don't collapse */
  html[data-hero="lit"] .hero-brand span { padding-block: 0.14em; margin-block: -0.14em; }   /* room for the descenders inside the mask, with no change of layout */
  html[data-hero="lit"] .hero-brand span, html[data-hero="lit"] .hero-h1 {
    -webkit-mask: linear-gradient(to left, #000 0 34%, rgb(0 0 0 / 24%) 66% 100%) 0 0 / 300% 100% no-repeat;
    mask: linear-gradient(to left, #000 0 34%, rgb(0 0 0 / 24%) 66% 100%) 0 0 / 300% 100% no-repeat;
    animation: lit-wait 4s steps(1) both;
  }
  html[data-hero="lit"][data-lit~="1"] .hero-brand span:first-child,
  html[data-hero="lit"][data-lit~="2"] .hero-brand span + span,
  html[data-hero="lit"][data-lit~="3"] .hero-h1 { animation: lit-on 360ms var(--ease) both; }
  @keyframes lit-wait { to { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
  @keyframes lit-on { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
}

@media (min-width: 1024px) {
  html[data-hero="sunbeams"] .hero-media { display: block !important; right: calc(var(--sun-shift, 0px) - 26vw); }
  html[data-hero="sunbeams"] .hero-light { z-index: -2; }   /* behind the sun, so the beams come out from its edge */
}


@media screen {
  body:has(main > :is(.hero, .page-opening, .rh, .cx-hero, .case):first-child) .site-header:not(.menu-open) {
    margin-bottom: calc(-1 * var(--header-main)); background: rgb(40 40 41 / 92%); }
  /* The glass darkens what is behind it as well as blurring it, so the white labels keep their contrast when a
     white band scrolls beneath (about 7:1 there). Without backdrop-filter the bar is nearly solid instead. */
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    body:has(main > :is(.hero, .page-opening, .rh, .cx-hero, .case):first-child) .site-header:not(.menu-open) {
      background: rgb(40 40 41 / 55%);
      -webkit-backdrop-filter: blur(18px) saturate(1.4) brightness(0.6); backdrop-filter: blur(18px) saturate(1.4) brightness(0.6); }
  }
  /* The phone menu is a solid sheet; the pull-up stays so the page doesn't jump as it opens. */
  body:has(main > :is(.hero, .page-opening, .rh, .cx-hero, .case):first-child) .site-header.menu-open { margin-bottom: calc(-1 * var(--header-main)); }
  body:has(.site-header) main > .hero:first-child { padding-top: var(--header-main); }
  body:has(.site-header) main > .page-opening:not(.has-image):first-child { padding-top: calc(clamp(36px, 6vw, 96px) + var(--header-main)); }
  body:has(.site-header) main > .case:first-child > .case-hero:not(.has-image) .case-hero-inner { padding-top: calc(clamp(36px, 6vw, 96px) + var(--header-main)); }
  body:has(.site-header) main > :is(.rh, .cx-hero):first-child { padding-top: var(--header-main); }
  @media (min-width: 1024px) {
    body:has(.site-header) main > .hero:first-child { min-height: clamp(640px + var(--header-main), 100svh, 900px + var(--header-main)); }
    body:has(.site-header) main > .rh:first-child, body:has(.site-header) main > .cx-hero:first-child { min-height: 100svh; }
  }
  @media (min-width: 720px) and (max-width: 1023.98px) { body:has(.site-header) main > .rh:first-child { min-height: 100svh; } }
}


.band--next { padding-block: clamp(40px, 5vw, 80px); background: var(--ash); }
.next-step { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px;
  padding-block: clamp(20px, 2.4vw, 32px); border-block: var(--hairline); text-decoration: none; color: var(--ink);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); font-weight: 430; letter-spacing: -0.03em; line-height: 1.1; }
.next-step .arrow { flex: none; width: 1.1em; height: auto; color: var(--ember-ink); transition: transform var(--t-mid) var(--ease); }
.next-step:hover .arrow { transform: translateX(8px); }
.next-step:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
@media (prefers-reduced-motion: reduce) { .next-step .arrow { transition: none; } }
.tile h3 a::before { content: ''; position: absolute; inset: 0; z-index: 1; }


/* The client logos in the hero's foot, where the proof strip was. */

.hero-clients { position: relative; width: 100%; border-top: 1px solid rgb(255 255 255 / 14%); background: rgb(40 40 41 / 82%); }
.hero-clients .clients-row { max-width: calc(var(--frame) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(20px, 2.2vw, 30px) var(--gutter);
  border-radius: 0; background: none; }
.hero-clients .clients-row .clients-head { color: var(--on-dark-muted); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--small-size); }
.hero-clients .client-logo { opacity: 0.92; }
.clients-more { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--small-size); font-weight: 500; color: var(--white);
  text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 0.22em; white-space: nowrap; }
.clients-more:hover { text-decoration-thickness: 2px; }
@media (max-width: 1023.98px) { .hero-clients { order: 3; } }
@media (max-width: 1199.98px) { .hero-clients .clients-row .clients-head { text-align: center; }
  .clients-more { display: flex; justify-content: center; margin-top: 14px; } }
@media (min-width: 1200px) {
  .hero-clients .clients-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 36px; }
  .hero-clients .clients-row .clients-head { margin: 0; padding-right: 28px; border-right: 1px solid rgb(255 255 255 / 20%); line-height: 1.4; white-space: nowrap; }
  .hero-clients .clients-more { padding-left: 4px; }
}

/* The playbooks at half their size: the words on the left, two small covers on the right. */
.playbooks-band--compact { padding-block: clamp(40px, 4.5vw, 72px); }
.playbooks-band--compact .frame { display: grid; gap: clamp(24px, 3vw, 48px); align-items: center; }
@media (min-width: 1024px) { .playbooks-band--compact .frame { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.playbooks-band--compact .band-head { display: block; margin-bottom: 0; }
.playbooks-band--compact .band-head h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); max-width: 16ch; }
.playbooks-band--compact .band-head .intro { margin-top: 14px; max-width: 46ch; }
.playbooks-band--compact .band-head .band-head-action { margin-top: 14px; }
.books--compact { margin-top: 0 !important; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .books--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.books--compact .book { display: grid !important; grid-template-columns: 76px minmax(0, 1fr); column-gap: 18px; align-items: center; padding: 18px 20px; }
.books--compact .book-cover { float: none !important; width: 76px !important; margin: 0 !important; grid-row: auto; }
.books--compact .book-text { display: flex !important; flex-direction: column; gap: 6px; }
.books--compact .book-text h3 { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); letter-spacing: -0.015em; line-height: 1.2; }
.books--compact .book-text > p { grid-column: auto !important; font-size: var(--small-size); color: var(--muted); }

/* 'We are the integrator of intelligence': the statement large on the left, what second nature means on the right. */
.home-nature { padding-block: clamp(64px, 8vw, 128px); }
.nature-body { display: grid; gap: clamp(24px, 4vw, 72px); align-items: start; }
@media (min-width: 1024px) { .nature-body { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.nature-body h2 { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.75rem); letter-spacing: -0.045em; line-height: 0.98; max-width: 11ch; }
.nature-text { max-width: 58ch; }
.nature-text p + p { margin-top: 16px; }
.nature-text p { color: var(--muted); }
.nature-text .nature-lead { font-size: var(--lede-size); line-height: 1.35; color: var(--ink-strong, var(--ink)); font-weight: 450; }
.home-ciops { margin-top: clamp(40px, 6vw, 88px); }
.home-ciops .ciops-definition { font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); line-height: 1.4; color: var(--white) !important; }
@media (min-width: 900px) { .home-ciops .still { grid-row: 1 / span 4; } }

/* The life cycle's four phases on Home: names and the question each answers. */
.home-life .steps > li > h3 { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem); letter-spacing: -0.015em; line-height: 1.2; }
.home-life .steps > li p { font-size: var(--body-size); color: var(--muted); }
@media (min-width: 640px) and (max-width: 1199.98px) { .home-life .steps--four { grid-template-columns: repeat(2, 1fr); } }

.home-work-more { margin-top: clamp(28px, 3vw, 44px); }
.home-close .closing-row { margin-top: clamp(28px, 3vw, 40px); }


@media screen {
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    body:has(main > :is(.hero, .page-opening, .rh, .cx-hero, .case):first-child) .site-header:not(.menu-open) {
      background: rgb(40 40 41 / 84%);   /* about 10:1 for the white labels over a white band */
      -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  }
  body:has(main > :is(.hero, .rh, .cx-hero):first-child) .site-header:not(.menu-open):not([data-opening-away]) {
    background: rgb(40 40 41 / 90%); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media screen { body:has(.site-header) main > .cx-hero:first-child .cx-crumbs { top: calc(var(--header-main) + 20px); } }


.about-what .nature-body h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); letter-spacing: -0.04em; line-height: 1.03; max-width: 15ch; }
.about-what .nature-text .actions { margin-top: 24px; }

/* The team: a square portrait, the name and title, and the two icons. Three across on a desktop, two on a phone.
   The portraits are shown in grey so nine pictures taken in nine places sit together; each returns to its own
   colour under the pointer or the keyboard. */
.people--team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 56px) clamp(16px, 2.4vw, 32px); }
@media (min-width: 760px) { .people--team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.people--team > .person { padding: 0; gap: 14px; border-radius: 0; background: none !important; box-shadow: none; border: 0; }
.people--team .person-photo { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--radius-lg); background: var(--white); }
.people--team .person-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); transition: filter 500ms var(--ease); }
.people--team .person:hover .person-photo img, .people--team .person:focus-within .person-photo img { filter: none; }
@media (prefers-reduced-motion: reduce) { .people--team .person-photo img { transition: none; } }
.people--team .person-name { font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.625rem); font-weight: 480; letter-spacing: -0.02em; line-height: 1.15; }
.people--team .person-title { font-size: var(--small-size); line-height: 1.35; }
.person-links { display: flex; gap: 8px; margin-top: auto; padding-top: 2px; }   /* at the foot of the card, so the icons line up along a row */
.person-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--white); color: var(--ink); text-decoration: none; transition: background var(--t-mid) var(--ease), color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease); }
.person-link:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.person-link .arrow, .person-link .ext { display: none; }   /* the build adds an 'opens in a new tab' mark to outside links; here the icon stands alone */
.person-copy[data-copied]::after { content: 'Copied'; position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); padding: 4px 10px;
  border-radius: 8px; background: var(--ink); color: var(--white); font-size: var(--label-size); font-weight: 600; white-space: nowrap; }
/* Without a full set of portraits the list is typographic, as before; the icons sit under each name. */
.people--type.people--team { grid-template-columns: 1fr; gap: 0 var(--gap); }
@media (min-width: 560px) { .people--type.people--team { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .people--type.people--team { grid-template-columns: repeat(3, 1fr); } }

/* The bodies we work with: six names in a grid, each with one line. The names become logos when the site holds them. */
.bodies { list-style: none; display: grid; grid-template-columns: 1fr; gap: 0 var(--gap); margin-top: clamp(32px, 4vw, 56px); }
@media (min-width: 640px) { .bodies { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bodies { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bodies li { padding: 22px 0 26px; border-top: 2px solid var(--ink); }
.bodies h3 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 2rem); font-weight: 450; letter-spacing: -0.03em; line-height: 1.1; }
.bodies p { margin-top: 10px; font-size: var(--small-size); color: var(--muted); max-width: 44ch; }


.bodies--logos li { padding-top: 26px; border-top: var(--hairline); }
.bodies--logos .body-mark { display: flex; align-items: center; height: 64px; margin: 0; }
.bodies--logos .body-logo { display: block; width: auto; height: auto; max-height: 52px; max-width: min(240px, 100%); filter: brightness(0); opacity: 0.84; }
.bodies--logos .body-mark--type { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem); font-weight: 480; letter-spacing: -0.03em; line-height: 1; }
.bodies--logos p { margin-top: 14px; }


.wwd-life { padding-block: clamp(56px, 6vw, 104px); }
.wwd-life .nature-body h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); letter-spacing: -0.04em; line-height: 1.03; max-width: 16ch; }
.wwd-life .nature-text .actions { margin-top: 22px; }


.bi-life .nature-body h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); letter-spacing: -0.04em; line-height: 1.03; max-width: 16ch; }
.bi-life .nature-text h3 { margin: 28px 0 10px; }
.cycle { list-style: none; display: grid; grid-template-columns: 1fr; gap: var(--gap); margin-top: clamp(40px, 5vw, 72px); }
@media (min-width: 700px) { .cycle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .cycle { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; } }
.cycle-phase { display: flex; flex-direction: column; gap: 14px; padding: 24px 24px 0; border-radius: var(--radius); background: var(--ash); overflow: hidden; }
@media (min-width: 1200px) {
  .cycle-phase { border-radius: 0; }
  .cycle-phase:first-child { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
  .cycle-phase:last-child { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
}
.cycle-reach { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--line-strong); }
.cycle-reach::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--reach, 25%); border-radius: inherit; background: var(--gradient); }
.cycle-phase:nth-child(2) { --reach: 50%; } .cycle-phase:nth-child(3) { --reach: 75%; } .cycle-phase:nth-child(4) { --reach: 100%; }   /* set here, not inline: the site allows no inline styles */
.cycle-phase h3 { margin-top: 6px; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); letter-spacing: -0.025em; line-height: 1.12; }
.cycle-q { font-size: var(--body-size); line-height: 1.4; color: var(--ink); min-height: 4.2em; }
.cycle-facts { display: grid; gap: 12px; margin: 0; padding-top: 14px; border-top: var(--hairline); }
.cycle-facts dt { font-size: var(--label-size); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cycle-facts dd { margin: 2px 0 0; font-size: var(--small-size); line-height: 1.45; }
.cycle-decision { margin: auto -24px 0; padding: 18px 24px 22px; background: var(--night); color: #e4e4e8; font-size: var(--small-size); line-height: 1.45; }
.cycle-decision > span:first-child { display: block; margin-bottom: 4px; font-size: var(--label-size); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); }
.cycle-facts + .cycle-decision { margin-top: auto; }
.cycle-phase .cycle-facts { margin-bottom: 8px; }
/* On a wide screen the four phases share their rows, so the names, questions and decisions line up across the figure. */
@media (min-width: 1200px) {
  @supports (grid-template-rows: subgrid) {
    .cycle { grid-template-rows: auto auto auto 1fr auto; }
    .cycle-phase { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 14px; }
    .cycle-q { min-height: 0; }
    .cycle-phase .cycle-facts + .cycle-decision { margin-top: 0; align-self: stretch; }
  }
}
.cycle-after { margin-top: clamp(28px, 3vw, 44px); display: grid; gap: 12px 48px; max-width: 1040px; }
@media (min-width: 900px) { .cycle-after { grid-template-columns: 3fr 2fr; } }
.cycle-after p { font-size: var(--lede-size); line-height: 1.4; }
.cycle-after p + p { color: var(--muted); }
.bi-release-table tbody th { width: 16%; text-transform: none; letter-spacing: -0.01em; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); font-weight: 520; color: var(--ink); }


.em-what .nature-body h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); letter-spacing: -0.04em; line-height: 1.03; max-width: 15ch; }
.em-modes { margin-top: clamp(36px, 4.5vw, 64px); }
.em-modes .card h3 { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem); letter-spacing: -0.025em; line-height: 1.12; }
.em-moves .steps > li > h3 { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem); letter-spacing: -0.015em; line-height: 1.2; }
.em-moves .steps > li p { font-size: var(--body-size); color: var(--muted); }
@media (min-width: 640px) and (max-width: 1199.98px) { .em-moves .steps--four { grid-template-columns: repeat(2, 1fr); } }


.op-what .nature-body h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); letter-spacing: -0.04em; line-height: 1.03; max-width: 15ch; }
.op-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgb(255 153 0 / 16%); color: var(--ember-ink); }
.op-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.op-shift { margin-top: clamp(36px, 4.5vw, 64px); padding: clamp(24px, 3.4vw, 52px); border-radius: var(--radius-lg); background: var(--warm-glow), var(--panel); color: var(--white); }
.op-shift h3 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.25rem); letter-spacing: -0.03em; line-height: 1.1; color: var(--white); }
.op-shifts { list-style: none; margin-top: clamp(22px, 2.6vw, 36px); display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .op-shifts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .op-shifts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.op-shifts > li { display: grid; gap: 6px; align-content: start; padding: 22px 22px 24px; border-radius: var(--radius); background: rgb(255 255 255 / 5%); border: 1px solid rgb(255 255 255 / 10%); }
.op-shifts .op-icon { background: rgb(255 153 0 / 14%); color: var(--amber); margin-bottom: 12px; }
.op-shifts strong { font-size: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; color: var(--white); }
.op-shifts p { color: #d6d6da; line-height: 1.45; }
.op-close-row { margin-top: clamp(24px, 3vw, 40px); display: grid; gap: 16px 40px; align-items: end; }
@media (min-width: 900px) { .op-close-row { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); } }
.op-close-row .op-close { margin-top: 0; max-width: 22ch; }
.op-drift-line { display: none; width: 100%; height: 72px; fill: none; overflow: visible; }
@media (min-width: 900px) { .op-drift-line { display: block; } }
.op-drift-line path { vector-effect: non-scaling-stroke; stroke-linecap: round; }
.op-drift-base { stroke: rgb(255 255 255 / 30%); stroke-width: 1.5; stroke-dasharray: 2 7; }
.op-drift-now { stroke: var(--amber); stroke-width: 2.5; }
.op-covers { list-style: none; display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 700px) { .op-covers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .op-covers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.op-covers > li { display: grid; gap: 10px; align-content: start; padding: 26px 28px 30px; border-radius: var(--radius); background: var(--white); box-shadow: var(--card-shadow); }
.op-covers h3 { margin-top: 10px; font-size: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.15; }
.op-covers p { color: var(--muted); }
@media (forced-colors: active) { .op-shifts > li, .op-covers > li { border: 1px solid CanvasText; } }
@media print { .op-shift { background: #fff !important; color: #000 !important; border: 1pt solid #999; } .op-shift h3, .op-shifts strong, .op-shifts p, .op-shift .op-close { color: #000 !important; } }
.op-shifts .op-icon { width: 56px; height: 56px; border-radius: 16px; }
.op-shifts .op-icon svg { width: 30px; height: 30px; }
.op-close-row .op-close { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.375rem); }
@media (max-width: 639.98px) {
  .op-shifts > li, .op-covers > li { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; padding: 20px; }
  .op-shifts > li > .op-icon, .op-covers > li > .op-icon { grid-row: 1 / span 2; margin-bottom: 0; }
  .op-shifts .op-icon { width: 48px; height: 48px; border-radius: 14px; }
  .op-shifts .op-icon svg { width: 26px; height: 26px; }
  .op-covers h3 { margin-top: 0; }
}


.sector-order.steps > li > h3 { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem); letter-spacing: -0.015em; line-height: 1.2; }
.sector-order.steps > li p { font-size: var(--body-size); color: var(--muted); }
@media (min-width: 640px) and (max-width: 1199.98px) { .sector-order.steps--four { grid-template-columns: repeat(2, 1fr); } }
.line-links { list-style: none; display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 640px) { .line-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .line-links { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.line-links a { display: grid; gap: 10px; align-content: start; height: 100%; padding: 24px 26px 26px; border-radius: var(--radius); background: var(--white); box-shadow: var(--card-shadow); color: var(--ink); text-decoration: none; transition: transform 160ms ease; }
.line-links .line-q { color: var(--ember-ink); font-weight: 500; }
.line-links strong { font-size: var(--h3-size); font-weight: 450; letter-spacing: -0.025em; line-height: 1.1; }
.line-links strong::after { content: '\2192'; display: inline-block; margin-left: 0.4em; color: var(--ember-ink); transition: transform 160ms ease; }
.line-links a:hover strong::after, .line-links a:focus-visible strong::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .line-links a, .line-links strong::after { transition: none; } }
@media (forced-colors: active) { .line-links a { border: 1px solid CanvasText; } }


.sector-fit .nature-body h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); letter-spacing: -0.04em; line-height: 1.03; max-width: 16ch; }
.sector-fit .nature-text .actions { margin-top: 22px; }
.sector-fit .sector-order { margin-top: clamp(36px, 4.5vw, 64px); }

/* About uses the full awards cabinet: keep its year-by-year, two-column layout. */
.about-awards .award-for, .about-awards .award-status { display: none; }
.about-awards .band-head h2 { max-width: 22ch; }


@media screen {
  body:has(main > :is(.hero, .page-opening, .rh, .cx-hero, .case):first-child) .site-header:not(.menu-open),
  body:has(main > :is(.hero, .rh, .cx-hero):first-child) .site-header:not(.menu-open):not([data-opening-away]) {
    background: var(--night); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (min-width: 1200px) { .people--team:not(.people--type) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }


.cta-link { display: inline-flex; align-items: center; gap: 7px; padding-block: 10px; font-size: 1.5rem; font-weight: 400; line-height: 1;
  color: var(--ember); text-decoration: none; transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.cta-link::after { content: ''; flex: none; width: 28px; height: 20px; background: currentColor; transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M0 10H26M17 1l9 9-9 9'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M0 10H26M17 1l9 9-9 9'/%3E%3C/svg%3E") center / contain no-repeat; }
.cta-link:hover { color: #282829; }
.cta-link:hover::after { transform: translateX(7px); }
.cta-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }
:is(.hero, .band--dark, .band--gradient, .page-opening, .closing) .cta-link { color: var(--amber); }
:is(.hero, .band--dark, .band--gradient, .page-opening, .closing) .cta-link:hover { color: var(--ember); }
@media (prefers-reduced-motion: reduce) { .cta-link, .cta-link::after { transition: none; } .cta-link:hover::after { transform: none; } }
@media (forced-colors: active) { .cta-link::after { forced-color-adjust: none; background: LinkText; } }
.hero-actions { flex-direction: column; align-items: flex-start; gap: 0; margin-top: clamp(18px, 2.6vw, 34px); }
@media (max-width: 767.98px) { .hero-actions { margin-top: 10px; } }
.hero-brand { margin-left: -0.07em; }
html:not([data-hero]) .hero { background: radial-gradient(70% 90% at 100% 45%, rgb(234 71 0 / 22%), rgb(234 71 0 / 0%) 70%), var(--dusk), var(--night); }
@media (max-width: 1023.98px) { html:not([data-hero]) .hero { background: radial-gradient(90% 40% at 50% 78%, rgb(234 71 0 / 26%), rgb(234 71 0 / 0%) 70%), var(--dusk), var(--night); } }


.band--dark.we-are { padding-block: clamp(72px, 9vw, 136px); background: var(--night); }
.we-are .frame { display: grid; gap: clamp(28px, 5vw, 80px); }
.we-are h2 { font-size: clamp(2rem, 1rem + 4.2vw, 4.75rem); font-weight: 400; letter-spacing: -0.045em; line-height: 0.98; max-width: 18ch; margin: 0; color: var(--white); text-wrap: balance; }
.we-are h2 span { display: block; color: var(--amber); }
.we-are .frame > .we-say { margin: 0; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.45; color: #e4e4e8; max-width: 40ch; text-wrap: pretty; }
@media (min-width: 1024px) {
  .we-are .frame { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: start; }
  .we-are .frame > .we-say { padding-top: 10px; }
}


.home-lines .band-head { display: block; }
.home-lines .band-head .intro { max-width: 60ch; margin-top: 14px; text-wrap: balance; }
.home-lines .band-head-action { margin-top: 10px; }
.home-lines .panel, .home-lines .lines-ciops { border-radius: 19px; }
.home-lines .panel p { text-wrap: pretty; }
.home-lines .panel-label { color: var(--muted); }
.home-lines .panel h3 { display: flex; align-items: center; gap: 14px; max-width: none; font-size: clamp(1.625rem, 1.2rem + 1.3vw, 2.25rem);
  transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.home-lines .panel h3::after { content: ''; flex: none; width: 28px; height: 20px; background: var(--ember); transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M0 10H26M17 1l9 9-9 9'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M0 10H26M17 1l9 9-9 9'/%3E%3C/svg%3E") center / contain no-repeat; }
.panel-link { color: inherit; text-decoration: none; }
.panel-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.panel-link:focus-visible { outline: none; }
.panel:has(.panel-link:focus-visible) { outline: 3px solid var(--focus-dark); outline-offset: 4px; }
.home-lines .panel:hover h3 { color: var(--ember); }
.home-lines .panel:hover h3::after { transform: translateX(7px); }
@media (prefers-reduced-motion: reduce) { .home-lines .panel h3, .home-lines .panel h3::after { transition: none; } .home-lines .panel:hover h3::after { transform: none; } }
@media (forced-colors: active) { .home-lines .panel h3::after { forced-color-adjust: none; background: LinkText; } }
.home-lines .lines-ciops { background: var(--night); }
.lines-ciops .cta-link { color: var(--amber); justify-self: start; align-self: flex-start; }
.lines-ciops .cta-link:hover { color: var(--ember); }
.home-lines .home-ciops h3 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); letter-spacing: -0.035em; line-height: 1.04; margin-bottom: 6px; max-width: none; }
.home-lines .home-ciops .ciops-definition { max-width: 44ch; text-wrap: pretty; }
@media (min-width: 900px) {
  .home-lines .home-ciops { row-gap: 14px; grid-template-rows: 1fr auto auto auto 1fr; }
  .home-lines .home-ciops h3 { grid-row: 2; } .home-lines .home-ciops > p { grid-row: 3; } .home-lines .home-ciops > a { grid-row: 4; }
  .home-lines .home-ciops .still { grid-row: 1 / 6; }
}


.pb-grid { display: grid; gap: clamp(36px, 4.4vw, 64px); align-items: center; }
@media (min-width: 1024px) { .pb-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.playbooks-band .pb-text h2 { font-size: clamp(2rem, 1.3rem + 2.8vw, 4rem); letter-spacing: -0.04em; line-height: 1.02; margin: 0; max-width: none; }
.playbooks-band .pb-text h2 span { display: block; }
.playbooks-band .pb-say { margin: clamp(18px, 2vw, 26px) 0 0; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.45; color: var(--muted); max-width: 46ch; text-wrap: pretty; }
.playbooks-band .pb-link { margin: 16px 0 0; }
.pb-covers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); align-items: start; max-width: 560px; }
@media (min-width: 1024px) { .pb-covers { justify-self: end; width: 100%; } }
.pb-covers a { display: block; border-radius: 6px; }
.pb-cover { margin: 0; border-radius: 6px; overflow: hidden; box-shadow: -13px 13px 33px 0 rgb(0 0 0 / 13%);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.pb-cover img { display: block; width: 100%; height: auto; }
.pb-covers a:hover .pb-cover { transform: translateY(-2px); box-shadow: 0 24px 60px 0 rgb(0 0 0 / 22%); }
@media (prefers-reduced-motion: reduce) { .pb-cover { transition: none; } .pb-covers a:hover .pb-cover { transform: none; } }


.we-are .frame { row-gap: clamp(28px, 4.4vw, 64px); }
.we-are .we-name { margin: 0; font-size: clamp(2rem, 1rem + 4.2vw, 4.75rem); font-weight: 400; letter-spacing: -0.045em; line-height: 0.98; color: var(--amber); max-width: 18ch; text-wrap: balance; }
@media (max-width: 1023.98px) { .we-are .frame { row-gap: 18px; } .we-are .we-name { margin-top: 22px; } }


.home-lines .panel-label { color: var(--ink); }


.home-research .band-head { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 32px) clamp(28px, 5vw, 80px); align-items: start; margin-bottom: clamp(48px, 6vw, 88px); }
.home-research .band-head h2 { max-width: 22ch; text-wrap: balance; }
.home-research .band-head .intro { margin: 0; max-width: 54ch; text-wrap: pretty; }
.home-research .band-head-action { margin: 0; justify-self: start; width: auto; }
.home-research .band-head-action .cta-link { width: auto; justify-content: flex-start; text-align: left; }
@media (max-width: 767.98px) {
  .home-research .band-head-action .cta-link { display: inline-block; line-height: 1.15; text-wrap: balance; }
  .home-research .band-head-action .cta-link::after { display: inline-block; margin-left: 8px; vertical-align: -2px; }
}
.home-research .rx-projects li { position: relative; padding-bottom: 4px; }
.home-research .rx-projects h3 { margin-bottom: 0; transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.rx-link { color: inherit; text-decoration: none; }
.rx-link::after { content: ''; position: absolute; inset: 0; }
.rx-link .arrow.ext { width: 0.55em; height: 0.55em; margin-left: 0.35em; vertical-align: 0.08em; color: var(--ember); }
.rx-link:focus-visible { outline: none; }
.home-research .rx-projects li:has(.rx-link:focus-visible) { outline: 3px solid var(--focus-light); outline-offset: 6px; }
.home-research .rx-projects li:hover h3 { color: var(--ember); }


.home-problem { padding-block: clamp(72px, 9vw, 136px); }
.home-problem h2 { font-size: clamp(2.25rem, 1rem + 5vw, 5.5rem); font-weight: 400; letter-spacing: -0.045em; line-height: 0.98; max-width: 18ch; margin: 0; text-wrap: balance; }
.home-problem h2 span { color: var(--ember); }
.home-problem .problem-say { margin: clamp(22px, 2.6vw, 36px) 0 0; font-size: var(--lede-size); line-height: 1.42; color: var(--muted); max-width: 54ch; text-wrap: pretty; }
.home-problem .problem-say + .problem-say { margin-top: 16px; }
.home-research .band-head > .intro + .band-head-action { grid-column: 1; }


.home-lines .lines-after { margin: clamp(22px, 2.4vw, 34px) 0 0; }


.home-research h2 span { color: var(--ember); }
.home-research .cta-link .arrow.ext { display: none; }


.sectors .band-head .intro, .home-lines .band-head .intro { max-width: 54ch; margin-top: 14px; text-wrap: pretty; }
.latest .band-after, .recognition .band-after { margin: clamp(22px, 2.4vw, 34px) 0 0; }
.home-close p.closing-row { display: block; }
.band--dark.home-close .closing-row a.cta-link:not(.button) { color: var(--amber); }
.band--dark.home-close .closing-row a.cta-link:not(.button):hover { color: var(--ember); }

.sectors .band-head h2 { max-width: none; }
@media (max-width: 899px) { .sectors .band-head h2 br { display: none; } .sectors .band-head h2 { text-wrap: balance; } }


.band--dark a.cta-link:not(.button):not(.nav-cta) { color: var(--amber); }
.band--dark a.cta-link:not(.button):not(.nav-cta):hover { color: var(--ember); }
.hero .hero-actions .cta-link + .cta-link { color: var(--white); }
.hero .hero-actions .cta-link + .cta-link:hover { color: var(--amber); }