/*
Theme Name: Sudhanshu Maheshwari
Theme URI: https://sudhanshumaheshwari.in
Author: 3i Digital Marketing
Description: A premium, Gutenberg-ready personal brand theme for Prof. Sudhanshu Maheshwari.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: sudhanshu-maheshwari
*/

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/inter-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/inter-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/inter-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/playfair-display-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/playfair-display-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/playfair-display-latin-500-italic.woff2") format("woff2");
}

:root {
  --sm-ink: #0c1a2e;
  --sm-ink-soft: #182942;
  --sm-charcoal: #2d333b;
  --sm-muted: #666b70;
  --sm-gold: #a98233;
  --sm-gold-bright: #c09b4b;
  --sm-gold-pale: #f2ead7;
  --sm-paper: #fafaf8;
  --sm-stone: #f2f1ed;
  --sm-white: #ffffff;
  --sm-border: #deddd7;
  --sm-dark-border: rgba(255, 255, 255, 0.15);
  --sm-serif: "Playfair Display", Georgia, serif;
  --sm-sans: "Inter", Arial, sans-serif;
  --sm-container: 1080px;
  --sm-reading: 760px;
  /* Per-side page gutter. Fluid: 18px on phones, ~143px at 1280. Above ~1426px
     --sm-container governs instead. Keeps a visible margin on both edges at
     every width so the layout never runs flush to the viewport. */
  --sm-gutter: clamp(18px, calc(-123px + 20.75vw), 200px);
  --sm-radius: 8px;
  --sm-shadow: 0 20px 60px rgba(12, 26, 46, 0.09);
  --sm-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--sm-paper);
  color: var(--sm-charcoal);
  font-family: var(--sm-sans);
  font-size: 16px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

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

a {
  color: var(--sm-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

a:hover {
  color: var(--sm-gold);
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid var(--sm-gold-bright);
  outline-offset: 4px;
}

::selection {
  background: var(--sm-gold-pale);
  color: var(--sm-ink);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 0.65em;
  color: var(--sm-ink);
  font-family: var(--sm-serif);
  font-weight: 500;
  line-height: 1.14;
  text-wrap: balance;
}

p {
  margin: 0 0 1.35em;
}

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

.screen-reader-text:focus {
  z-index: 100000;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  clip: auto;
  padding: 12px 18px;
  background: var(--sm-white);
  color: var(--sm-ink);
  font-size: 14px;
  font-weight: 700;
}

/* Header */
.site-header {
  position: sticky;
  z-index: 1000;
  top: 0;
  width: 100%;
  border-bottom: 1px solid rgba(12, 26, 46, 0.1);
  background: rgba(250, 250, 248, 0.95);
  backdrop-filter: blur(14px);
  transition: box-shadow 180ms ease, background-color 180ms ease;
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 30px rgba(12, 26, 46, 0.08);
}

.site-header__inner {
  display: flex;
  width: min(calc(100% - var(--sm-gutter) * 2), var(--sm-container));
  min-height: 82px;
  margin-inline: auto;
  align-items: center;
  gap: 34px;
}

.site-brand {
  display: inline-flex;
  min-width: 218px;
  flex-direction: column;
  color: var(--sm-ink);
  line-height: 1;
  text-decoration: none;
}

.site-brand:hover {
  color: var(--sm-ink);
}

.site-brand__name {
  font-family: var(--sm-serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.site-brand__descriptor {
  margin-top: 8px;
  color: var(--sm-gold);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.site-navigation {
  margin-left: auto;
}

.site-navigation ul {
  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 30px;
  list-style: none;
}

.site-navigation li {
  position: relative;
  margin: 0;
}

.site-navigation a {
  display: inline-flex;
  padding: 29px 0 27px;
  align-items: center;
  color: var(--sm-charcoal);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.site-navigation > div > ul > li > a::after {
  position: absolute;
  right: 0;
  bottom: 19px;
  left: 0;
  height: 1px;
  background: var(--sm-gold);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms var(--sm-ease);
}

.site-navigation > div > ul > li:hover > a::after,
.site-navigation > div > ul > li.current-menu-item > a::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-navigation .menu-item-has-children > a::before {
  order: 2;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.site-navigation .sub-menu {
  position: absolute;
  top: calc(100% - 10px);
  left: -24px;
  display: block;
  min-width: 260px;
  padding: 12px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  visibility: hidden;
  background: var(--sm-white);
  box-shadow: var(--sm-shadow);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.site-navigation .sub-menu a {
  display: block;
  padding: 11px 12px;
  border-radius: 4px;
  font-size: 13px;
}

.site-navigation .sub-menu a:hover {
  background: var(--sm-stone);
  color: var(--sm-ink);
}

.site-navigation li:hover > .sub-menu,
.site-navigation li:focus-within > .sub-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.site-header__cta {
  display: inline-flex;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--sm-ink);
  align-items: center;
  justify-content: center;
  color: var(--sm-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease;
}

.site-header__cta:hover {
  background: var(--sm-ink);
  color: var(--sm-white);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(12, 26, 46, 0.2);
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--sm-ink);
  cursor: pointer;
}

.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after {
  display: block;
  width: 19px;
  height: 1px;
  background: currentColor;
  content: "";
  transition: transform 180ms ease, opacity 180ms ease;
}

.menu-toggle__icon::before {
  transform: translateY(-6px);
}

.menu-toggle__icon::after {
  transform: translateY(5px);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon {
  background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before {
  transform: translateY(0) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after {
  transform: translateY(-1px) rotate(-45deg);
}

/* Shared block layout */
.entry-content {
  overflow: hidden;
}

.entry-content > :where(:not(.alignfull):not(.alignwide)),
.entry-header,
.entry-footer {
  width: min(calc(100% - var(--sm-gutter) * 2), var(--sm-reading));
  margin-right: auto;
  margin-left: auto;
}

.entry-content > .alignwide {
  width: min(calc(100% - var(--sm-gutter) * 2), var(--sm-container));
  margin-right: auto;
  margin-left: auto;
}

.entry-content > .alignfull {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

.sm-container {
  width: min(calc(100% - var(--sm-gutter) * 2), var(--sm-container));
  margin-inline: auto;
}

.sm-section {
  position: relative;
  padding: 108px 0;
}

.sm-section--stone {
  background: var(--sm-stone);
}

.sm-section--white {
  background: var(--sm-white);
}

.sm-section--ink {
  background: var(--sm-ink);
  color: rgba(255, 255, 255, 0.76);
}

.sm-section--ink h2,
.sm-section--ink h3,
.sm-section--ink p {
  color: inherit;
}

.sm-section--ink h2,
.sm-section--ink h3 {
  color: var(--sm-white);
}

.sm-eyebrow {
  display: flex;
  margin-bottom: 24px;
  align-items: center;
  gap: 12px;
  color: var(--sm-gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.19em;
  line-height: 1.4;
  text-transform: uppercase;
}

.sm-eyebrow::before {
  display: block;
  width: 35px;
  height: 1px;
  background: currentColor;
  content: "";
}

.sm-section-title {
  max-width: 790px;
  margin-bottom: 22px;
  font-size: clamp(38px, 4.1vw, 58px);
  letter-spacing: -0.025em;
}

.sm-section-intro {
  max-width: 650px;
  margin-bottom: 0;
  color: var(--sm-muted);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.7;
}

/* `center`, not `end` `[user 2026-07-30]`. Bottom-aligning the two columns only
   looks right while the headline and the intro are a similar height: measured,
   Speaking was 2px out and Research 15px, but "How I help" runs to four lines
   (264px) against a three-line intro (102px), which pushed the intro 81px below
   the headline's optical centre and read as though it had slipped down the page.
   Centring is independent of the headline's line count, so it holds whatever the
   copy becomes.

   Only bites above 900px — below that the row collapses to one column and takes
   `align-items: start` (style.css:1610). `.sm-gita` keeps its own `start` for the
   reason given at style.css:4192. */
.sm-section-heading-row {
  display: grid;
  margin-bottom: 58px;
  grid-template-columns: minmax(0, 1.22fr) minmax(280px, 0.78fr);
  align-items: center;
  gap: 70px;
}

.sm-section-heading-row .sm-section-title,
.sm-section-heading-row .sm-section-intro {
  margin-bottom: 0;
}

/* Buttons */
.wp-block-buttons.sm-actions {
  display: flex;
  margin-top: 35px;
  align-items: center;
  gap: 13px;
}

.wp-block-button .wp-block-button__link {
  display: inline-flex;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 2px;
  align-items: center;
  justify-content: center;
  font-family: var(--sm-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1;
  text-decoration: none;
  transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease, transform 200ms var(--sm-ease);
}

.wp-block-button .wp-block-button__link:hover {
  transform: translateY(-2px);
}

/* Hero buttons: pill / capsule shape (shape only — colors unchanged).
   Sized so both CTAs stay on one row in the narrowed hero copy column. */
.sm-hero .wp-block-button .wp-block-button__link {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.wp-block-button.is-style-sm-primary .wp-block-button__link {
  background: var(--sm-gold);
  color: var(--sm-white);
}

.wp-block-button.is-style-sm-primary .wp-block-button__link:hover {
  background: #927129;
  color: var(--sm-white);
}

.wp-block-button.is-style-sm-secondary .wp-block-button__link {
  border-color: rgba(12, 26, 46, 0.65);
  background: transparent;
  color: var(--sm-ink);
}

.wp-block-button.is-style-sm-secondary .wp-block-button__link:hover {
  border-color: var(--sm-ink);
  background: var(--sm-ink);
  color: var(--sm-white);
}

.sm-section--ink .wp-block-button.is-style-sm-secondary .wp-block-button__link {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--sm-white);
}

.sm-section--ink .wp-block-button.is-style-sm-secondary .wp-block-button__link:hover {
  border-color: var(--sm-white);
  background: var(--sm-white);
  color: var(--sm-ink);
}

/* Hero */
.sm-hero {
  position: relative;
  min-height: calc(100svh - 82px);
  padding: clamp(44px, 4.4vw, 64px) 0 72px;
  background:
    linear-gradient(90deg, rgba(12, 26, 46, 0.035) 1px, transparent 1px) 0 0 / 84px 84px,
    var(--sm-paper);
}

.sm-hero::before {
  position: absolute;
  top: 0;
  right: -12vw;
  width: 48vw;
  height: 100%;
  background: linear-gradient(150deg, rgba(242, 241, 237, 0.15), rgba(226, 224, 216, 0.72));
  clip-path: polygon(23% 0, 100% 0, 100% 100%, 0 100%);
  content: "";
}

.sm-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.82fr);
  align-items: stretch;
  gap: clamp(45px, 7vw, 105px);
}

.sm-hero__copy {
  padding: 0 0 20px;
}

.sm-hero__title {
  max-width: 750px;
  margin-bottom: 28px;
  font-size: clamp(49px, 5.2vw, 77px);
  letter-spacing: -0.04em;
  line-height: 1.03;
}

.sm-hero__title em {
  color: var(--sm-gold);
  font-weight: 500;
}

.sm-hero__lead {
  max-width: 670px;
  margin-bottom: 25px;
  color: #4d555d;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.7;
}

.sm-hero__credential {
  max-width: 665px;
  padding-top: 22px;
  border-top: 1px solid rgba(12, 26, 46, 0.16);
  color: var(--sm-muted);
  font-size: 13px;
  line-height: 1.7;
}

.sm-hero__credential strong {
  color: var(--sm-ink);
  font-weight: 700;
}

.sm-hero__visual {
  position: relative;
  /* Sized by the photograph, which carries its own background — there is no
     backdrop panel behind it, so the image top lines up with the eyebrow. */
  /* WordPress applies its 24px block gap to the second grid child, which
     dropped the portrait below the eyebrow. The grid's own gap spaces the
     columns, so this margin is redundant here. */
  margin-block-start: 0;
  align-self: start;
}

.sm-hero__visual::after {
  position: absolute;
  z-index: 0;
  top: 18px;
  right: -18px;
  width: 1px;
  height: 38%;
  background: var(--sm-gold);
  content: "";
}

/* In flow, so the photograph's own height drives the column height. The
   width is held back from the full column so the vertical rail beside it has
   a clear strip to sit in rather than overlapping the photograph. */
.sm-hero__portrait {
  position: relative;
  z-index: 1;
  width: 84%;
  margin: 0;
}

/* Gold outline offset behind the photograph, matching the About portrait. */
.sm-hero__portrait::before {
  position: absolute;
  top: 24px;
  right: -24px;
  bottom: -24px;
  left: 24px;
  border: 1px solid var(--sm-gold);
  content: "";
}

.sm-hero__portrait img {
  /* Lifts the photo above the absolutely-positioned outline behind it. */
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 30px rgba(12, 26, 46, 0.13));
}

/* Sits in the strip to the right of the photograph, not on top of it. */
.sm-hero__rail {
  position: absolute;
  z-index: 2;
  top: 4px;
  right: 0;
  display: flex;
  height: 46%;
  align-items: flex-end;
  gap: 13px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.sm-hero__rail p {
  margin: 0;
  color: var(--sm-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.25em;
  line-height: 1;
  text-transform: uppercase;
}

.sm-hero__rail p + p {
  color: var(--sm-gold);
}

.sm-hero__note {
  position: absolute;
  z-index: 3;
  bottom: 27px;
  left: -26px;
  width: 205px;
  padding: 20px 22px;
  border-left: 3px solid var(--sm-gold);
  background: var(--sm-ink);
  box-shadow: 0 18px 45px rgba(12, 26, 46, 0.18);
}

.sm-hero__note p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.6;
  text-transform: uppercase;
}

.sm-hero__note p:first-child {
  margin-bottom: 6px;
  color: var(--sm-white);
  font-family: var(--sm-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}

/* Trust bar */
.sm-trust {
  padding: 38px 0 44px;
  border-top: 1px solid var(--sm-border);
  border-bottom: 1px solid var(--sm-border);
  background: var(--sm-white);
}

.sm-trust__label {
  margin-bottom: 25px;
  color: var(--sm-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
}

.sm-logo-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  gap: 18px;
}

.sm-logo-tile {
  display: flex;
  min-width: 0;
  height: 66px;
  padding: 10px 16px;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--sm-border);
}

.sm-logo-tile:last-child {
  border-right: 0;
}

.sm-logo-tile figure {
  width: 100%;
  height: 100%;
  margin: 0;
}

.sm-logo-tile img {
  width: 100%;
  height: 100%;
  opacity: 0.65;
  object-fit: contain;
  filter: grayscale(1);
  transition: filter 240ms ease, opacity 240ms ease, transform 240ms var(--sm-ease);
}

.sm-logo-tile:hover img {
  opacity: 1;
  filter: grayscale(0);
  transform: translateY(-2px);
}

.sm-logo-tile.is-dark-logo figure {
  padding: 7px 11px;
  background: var(--sm-ink);
}

.sm-logo-tile.is-dark-logo img {
  opacity: 0.76;
}

/* "Where the work happens" — three photographs, About page.
   These reused .sm-logo-row/.sm-logo-tile, built for fixed-height logo marks
   sized by `object-fit: contain`. Real photographs vary in aspect ratio
   (0.97 to 1.54 here), so with no ratio lock each tile rendered at a
   different height and the captions underneath started at different
   baselines — the row this class replaces. */
.sm-work-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
}

.sm-work-photos figure {
  margin: 0;
}

.sm-work-photos img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
}

.sm-work-photos figcaption {
  display: block;
  padding-top: 12px;
  color: var(--sm-muted);
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 680px) {
  .sm-work-photos {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Services */
.sm-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--sm-border);
  border-left: 1px solid var(--sm-border);
}

.sm-service-card {
  position: relative;
  min-height: 290px;
  padding: clamp(30px, 4vw, 48px);
  border-right: 1px solid var(--sm-border);
  border-bottom: 1px solid var(--sm-border);
  background: var(--sm-white);
  transition: background-color 240ms ease;
}

.sm-service-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--sm-gold);
  content: "";
  transition: width 350ms var(--sm-ease);
}

.sm-service-card:hover {
  background: #fdfcf9;
}

.sm-service-card:hover::before {
  width: 100%;
}

.sm-service-card__label {
  margin-bottom: 28px;
  color: var(--sm-gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.sm-service-card h3 {
  max-width: 420px;
  margin-bottom: 16px;
  font-size: clamp(27px, 2.7vw, 36px);
}

.sm-service-card > p:not(.sm-service-card__label) {
  max-width: 510px;
  margin-bottom: 24px;
  color: var(--sm-muted);
}

.sm-text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--sm-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.sm-text-link::after {
  content: "↗";
  transition: transform 180ms var(--sm-ease);
}

.sm-text-link:hover::after {
  transform: translate(3px, -3px);
}

/* Impact */
.sm-impact {
  overflow: hidden;
}

.sm-impact::after {
  position: absolute;
  right: -110px;
  bottom: -250px;
  width: 560px;
  height: 560px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 80px rgba(255, 255, 255, 0.022), 0 0 0 160px rgba(255, 255, 255, 0.015);
  content: "";
}

.sm-impact .sm-eyebrow {
  color: var(--sm-gold-bright);
}

.sm-metric-grid {
  position: relative;
  z-index: 1;
  display: grid;
  margin-top: 58px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sm-metric {
  min-height: 190px;
  padding: 0 34px;
  border-left: 1px solid var(--sm-dark-border);
}

.sm-metric:first-child {
  padding-left: 0;
  border-left: 0;
}

/*
 * WordPress's flow-layout rule sets margin-block-start: 24px on every child of
 * a group except the first. Inside a grid those margins do not collapse, so
 * metrics two to four were pushed down 24px and the first one — "1,500+" — was
 * left sitting a line higher than the rest of the row. Row spacing is row-gap's
 * job here, so the margin is cleared rather than matched.
 */
.sm-impact .sm-metric-grid > .sm-metric {
  margin-block-start: 0;
}

.sm-metric__number {
  margin: 0 0 15px;
  color: var(--sm-white) !important;
  font-family: var(--sm-serif);
  font-size: clamp(43px, 4.2vw, 61px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

.sm-metric__number strong {
  color: var(--sm-gold-bright);
  font-weight: inherit;
}

.sm-metric__label {
  max-width: 175px;
  /*
   * Two lines are reserved whether the label needs them or not, so the grey
   * detail line starts at the same height across all four metrics — otherwise
   * "Hours of teaching" (one line) sits its detail 18.6px above the detail
   * under "Senior executives engaged" (two).
   */
  min-height: calc(1.55em * 2);
  margin-bottom: 10px;
  color: var(--sm-white) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.55;
  text-transform: uppercase;
}

.sm-metric__detail {
  max-width: 190px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 12px;
  line-height: 1.55;
}

/* About */

/* Columns were `minmax(320px, 0.84fr) minmax(0, 1.16fr)`, which at 1440px split
   the 964.8px of column space into a 405px portrait and 560px of copy. The
   headline is 56px Playfair and broke to four lines in that measure even though
   `.sm-about__copy .sm-section-title` allows 790px — the column, not the rule,
   was the constraint. `[user 2026-07-30: "make image little smaller and rightside
   content width increase"]`

   0.70/1.30 gives roughly 338px and 627px: the portrait comes down about 17%, the
   copy gains 12%, and the headline settles onto three lines. Nothing resizes the
   image itself — it is `width: 100%` of its column, so the column is the only dial.

   The floor drops 320px -> 280px so the portrait keeps shrinking with the column
   before the layout stacks, rather than hitting the floor early and making the
   copy give way instead.

   This has to live in the base rule, NOT be appended at the end of the file: the
   900px and 680px overrides below are also single-class, so a later copy of this
   selector outranks them by source order and the grid never stacks. Appending it
   left the copy column 14px wide on a phone. */
.sm-about__grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: clamp(55px, 8vw, 120px);
}

.sm-about__media {
  position: relative;
  margin: 0;
}

.sm-about__media::before {
  position: absolute;
  top: 24px;
  right: -24px;
  bottom: -24px;
  left: 24px;
  border: 1px solid var(--sm-gold);
  content: "";
}

.sm-about__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 0.82;
  /* This portrait is a transparent cut-out, so it needs a panel behind it —
     without one the box-shadow would draw a rectangle around nothing. */
  background: var(--sm-white);
  object-fit: contain;
  object-position: 50% 100%;
  box-shadow: var(--sm-shadow);
}

.sm-about__copy .sm-section-title {
  margin-bottom: 28px;
  font-size: clamp(38px, 4.1vw, 56px);
}

.sm-about__copy > p:not(.sm-eyebrow) {
  color: #535b62;
  font-size: 17px;
}

.sm-credential-list {
  display: grid;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--sm-border);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 20px;
}

.sm-credential-item {
  margin: 0 !important;
  padding-left: 16px;
  border-left: 2px solid var(--sm-gold);
  color: var(--sm-ink) !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* Engagements */
.sm-engagement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.sm-engagement-card {
  position: relative;
  min-height: 260px;
  padding: 37px 38px 35px;
  overflow: hidden;
  border: 1px solid var(--sm-border);
  background: var(--sm-paper);
  transition: transform 240ms var(--sm-ease), box-shadow 240ms ease;
}

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

.sm-engagement-card__metric {
  position: absolute;
  top: 18px;
  right: 26px;
  color: rgba(169, 130, 51, 0.13);
  font-family: var(--sm-serif);
  font-size: 76px;
  font-weight: 600;
  line-height: 1;
}

.sm-engagement-card__sector {
  position: relative;
  margin-bottom: 32px;
  color: var(--sm-gold);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.sm-engagement-card h3 {
  position: relative;
  max-width: 360px;
  margin-bottom: 13px;
  font-size: 25px;
}

.sm-engagement-card > p:last-child {
  position: relative;
  max-width: 470px;
  margin-bottom: 0;
  color: var(--sm-muted);
  font-size: 14px;
}

/* Expertise */

/* Columns were 0.7/1.3, giving a 334px statement column. "One business system."
   needs 506px at the old 55px headline, so the title broke to FOUR lines
   `[user 2026-07-30: "make this title come in 2 lines"]`.

   Two things were measured before choosing this split. Widening the column alone
   cannot work: "Organization design and transformation" needs 610px on one line
   and the list column is 621px, so there were only 11px to take. And dropping the
   headline far enough to fit 334px would have meant ~36px, well under the other
   sections' 55-56px.

   0.88/1.12 gives 420px and 535px. With the headline at 44px (see the clamp
   below) "One business system." measures 405px and fits with room to spare, and
   only the one longest list label now wraps — which costs nothing, because
   `.sm-expertise-item` has `min-height: 80px` and two lines of 30px/1.2 come to
   72px, so the row does not grow.

   Kept in the base rule rather than appended at the end of the file: the 680px
   override below is also single-class, and a later copy of this selector would
   beat it on source order and stop the section stacking on a phone. */
.sm-expertise__grid {
  display: grid;
  grid-template-columns: minmax(290px, 0.88fr) minmax(0, 1.12fr);
  align-items: start;
  gap: clamp(55px, 9vw, 125px);
}

.sm-expertise__statement {
  position: sticky;
  top: 120px;
}

/* Cap lowered 55px -> 44px so "One business system." (405px at 44px) clears the
   420px column the grid above now gives it, leaving the natural break after
   "system." and a two-line headline. 3.2vw keeps it at the cap from about 1375px
   up.

   The floor is 35px rather than 38px: at 1024px the column is 331px, and 38px
   needed 350px, which put the headline back onto three lines for the whole
   1024-1150px band. 35px needs 322px and clears it. Below about 1000px the column
   is genuinely too narrow for two lines at any size that still reads as a
   headline, and at 680px the section stacks and the question stops applying. */
.sm-expertise__statement .sm-section-title {
  font-size: clamp(35px, 3.2vw, 44px);
}

.sm-expertise-list {
  border-top: 1px solid var(--sm-border);
}

.sm-expertise-item {
  display: flex;
  min-height: 80px;
  margin: 0;
  padding: 0 18px 0 4px;
  border-bottom: 1px solid var(--sm-border);
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  color: var(--sm-ink);
  font-family: var(--sm-serif);
  font-size: clamp(21px, 2.3vw, 30px);
  line-height: 1.2;
  transition: padding 220ms var(--sm-ease), color 220ms ease;
}

.sm-expertise-item::after {
  color: var(--sm-gold);
  content: "+";
  font-family: var(--sm-sans);
  font-size: 18px;
  font-weight: 400;
}

.sm-expertise-item:hover {
  padding-left: 16px;
  color: var(--sm-gold);
}

/* Research and insight cards */
.sm-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.sm-insight-card {
  display: flex;
  min-height: 355px;
  padding: 34px;
  flex-direction: column;
  border-top: 3px solid var(--sm-ink);
  background: var(--sm-white);
  box-shadow: 0 8px 30px rgba(12, 26, 46, 0.05);
  transition: transform 240ms var(--sm-ease), box-shadow 240ms ease, border-color 240ms ease;
}

.sm-insight-card:hover {
  border-color: var(--sm-gold);
  box-shadow: var(--sm-shadow);
  transform: translateY(-5px);
}

.sm-insight-card__meta {
  margin-bottom: 38px;
  color: var(--sm-gold);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.17em;
  line-height: 1.5;
  text-transform: uppercase;
}

.sm-insight-card h3 {
  margin-bottom: 19px;
  font-size: 24px;
  line-height: 1.3;
}

.sm-insight-card > p:not(.sm-insight-card__meta) {
  margin-bottom: 26px;
  color: var(--sm-muted);
  font-size: 14px;
}

/* Bottom-align the card links so they sit on one line across the row
   `[user 2026-08-01: "please make this section aligned like buttons sam line
   instead of up and down"]`.
   --------------------------------------------------------------------------
   ⚠️ This replaces `.sm-insight-card .sm-text-link { margin-top: auto }`, which
   **never did anything**. `margin-top: auto` only resolves against a flex
   container, and the flex item here is the paragraph Gutenberg wraps around the
   link, not the `<a>` inside it. Checked against the rendered markup: 25 links
   across the research page and the homepage, every one wrapped in a `<p>`, none
   a direct child of the card. The rule looked correct and was inert, which is
   why the links drifted with the length of each card's copy.

   The card is already `display: flex; flex-direction: column` (style.css:1259)
   and the grid stretches its rows, so pushing the link paragraph down is all
   that was missing.

   ⚠️ Specificity is a **tie**, not a win: this is (0-2-1) and so is
   `.sm-insight-card > p:not(.sm-insight-card__meta)` above — `:has()` and
   `:not()` each take the specificity of their argument. Source order settles
   it, so this block must stay *below* that one. Moving it up silently restores
   the 26px bottom margin and drops the link off the baseline.

   `margin-bottom: 0` for the same reason: inheriting the 26px would float the
   link above the card's own 34px padding instead of resting on it. */
.sm-insight-card > p:has(> .sm-text-link) {
  margin-top: auto;
  margin-bottom: 0;
}

/* Final CTA */
.sm-contact {
  padding: 120px 0;
  overflow: hidden;
}

.sm-contact::before {
  position: absolute;
  top: -280px;
  left: 50%;
  width: 650px;
  height: 650px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  content: "";
  transform: translateX(-50%);
}

.sm-contact__inner {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.sm-contact .sm-eyebrow {
  justify-content: center;
  color: var(--sm-gold-bright);
}

.sm-contact .sm-eyebrow::after {
  display: block;
  width: 35px;
  height: 1px;
  background: currentColor;
  content: "";
}

.sm-contact h2 {
  margin-bottom: 25px;
  color: var(--sm-white);
  font-size: clamp(43px, 5vw, 67px);
}

/* `.sm-section-title` is capped at 790px with no horizontal margins
   (style.css:491), which is correct everywhere else on the site because the
   heading sits in a left-aligned column and the cap is only there to stop long
   headlines running too wide.

   In the centred CTA that cap became a *left-aligned* 790px box inside a 920px
   container: `text-align: center` centred the text within the box, but the box
   itself was flush left, so all 130px of slack fell on the right and the
   headline landed 65px left of the centre line that the eyebrow, intro and
   buttons all share `[user 2026-08-01: "this heading final cta is left aligned
   make sure middle like above and below content"]`.

   The intro never had the bug because `.sm-contact__inner > p:not(.sm-eyebrow)`
   below already sets `margin-inline: auto`. The h2 simply had no equivalent.
   (0-2-0, so it outranks the 0-1-0 cap regardless of source order.) */
.sm-contact__inner .sm-section-title {
  margin-inline: auto;
}

.sm-contact__inner > p:not(.sm-eyebrow) {
  max-width: 700px;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  color: rgba(255, 255, 255, 0.67);
  font-size: 18px;
}

.sm-contact .sm-actions {
  justify-content: center;
}

/* Footer */
.site-footer {
  padding: 72px 0 24px;
  background: #07111f;
  color: rgba(255, 255, 255, 0.57);
}

.site-footer__inner {
  width: min(calc(100% - var(--sm-gutter) * 2), var(--sm-container));
  margin-inline: auto;
}

.site-footer__grid {
  display: grid;
  padding-bottom: 58px;
  grid-template-columns: minmax(260px, 1.25fr) repeat(3, minmax(130px, 0.6fr));
  gap: 48px;
}

.site-footer__brand {
  max-width: 350px;
}

.site-footer__name {
  margin-bottom: 17px;
  color: var(--sm-white);
  font-family: var(--sm-serif);
  font-size: 24px;
  line-height: 1.2;
}

.site-footer__brand p {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
}

.site-footer h2 {
  margin-bottom: 20px;
  color: var(--sm-white);
  font-family: var(--sm-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li + li {
  margin-top: 10px;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.61);
  font-size: 13px;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--sm-gold-bright);
}

.site-footer__bottom {
  display: flex;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  font-size: 11px;
  line-height: 1.65;
}

.site-footer__bottom p {
  margin: 0;
}

.site-footer__disclaimer {
  max-width: 560px;
  text-align: right;
}

/* Standard inner pages */
.page-header,
.single-header,
.not-found {
  padding: 95px 0 60px;
}

.page-title,
.single-title {
  font-size: clamp(44px, 5.5vw, 70px);
}

.single-meta {
  margin-bottom: 24px;
  color: var(--sm-gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.entry-content:not(:has(.sm-hero)) {
  padding-bottom: 100px;
}

.entry-content:not(:has(.sm-hero)) > * + * {
  margin-top: 1.5em;
}

.entry-content blockquote {
  margin: 2.5em 0;
  padding: 8px 0 8px 28px;
  border-left: 3px solid var(--sm-gold);
  color: var(--sm-ink);
  font-family: var(--sm-serif);
  font-size: 24px;
}

/* Reveal motion: content is visible without JavaScript. */
.sm-js .sm-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms var(--sm-ease), transform 700ms var(--sm-ease);
}

.sm-js .sm-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1120px) {
  .site-header__inner {
    gap: 22px;
  }

  .site-navigation ul {
    gap: 19px;
  }

  .site-header__cta {
    display: none;
  }

  .sm-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(350px, 0.92fr);
    gap: 45px;
  }

  .sm-hero__visual {
    min-height: 0;
  }

  .sm-hero__note {
    left: -12px;
  }

  .sm-logo-row {
    gap: 8px;
  }

  .sm-logo-tile {
    padding-inline: 9px;
  }
}

@media (max-width: 900px) {
  .site-header__inner {
    min-height: 72px;
  }

  .menu-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  .site-navigation {
    position: fixed;
    z-index: 999;
    top: 73px;
    right: 0;
    bottom: 0;
    left: 0;
    /* The header carries backdrop-filter, which makes it the containing block
       for its fixed-position descendants. `bottom: 0` therefore resolved
       against the 73px header rather than the viewport and collapsed this
       panel to zero height, so the menu opened but showed nothing. An explicit
       height sizes it from the header's base to the bottom of the screen. */
    height: calc(100svh - 73px);
    visibility: hidden;
    overflow-y: auto;
    background: var(--sm-paper);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  }

  .site-navigation.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .site-navigation ul {
    display: block;
    width: min(calc(100% - 36px), 680px);
    margin: 24px auto 50px;
  }

  .site-navigation a {
    display: flex;
    padding: 18px 4px;
    border-bottom: 1px solid var(--sm-border);
    font-family: var(--sm-serif);
    font-size: 25px;
    font-weight: 500;
  }

  .site-navigation > div > ul > li > a::after,
  .site-navigation .menu-item-has-children > a::before {
    display: none;
  }

  .site-navigation .sub-menu {
    position: static;
    min-width: 0;
    padding: 0 0 4px 18px;
    border: 0;
    visibility: visible;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    transform: none;
  }

  /* 14px next to the 25px serif parents read as fine print rather than as
     menu items, and "AI and the Future of Work" is a tap target, not a label. */
  .site-navigation .sub-menu a {
    padding: 13px 4px;
    font-family: var(--sm-sans);
    font-size: 16.5px;
  }

  .sm-section {
    padding: 86px 0;
  }

  .sm-hero {
    min-height: auto;
    padding-top: 72px;
  }

  .sm-hero::before {
    top: auto;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 43%;
    clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%);
  }

  .sm-hero__grid {
    grid-template-columns: 1fr;
    /* Spacing comes from each element's own margins once the copy wrapper is
       dissolved below, so the column gap would double up. */
    gap: 0;
  }

  /* Dissolves the copy wrapper so its children become grid items alongside
     the portrait. That is what lets the photo sit between the headline and
     the paragraph — CSS cannot reorder across two different parents. */
  .sm-hero__copy {
    display: contents;
  }

  /* Child selector for specificity: WordPress ships
     `:root :where(.is-layout-flow) > * { margin-block-end: 0 }`, which ties
     with a single class and wins on source order, zeroing the gap below the
     photo and letting the eyebrow collide with its gold outline. */
  .sm-hero__grid > .sm-hero__visual {
    order: 1;
    width: min(100%, 500px);
    min-height: 0;
    /* Clears the gold outline, which hangs 24px below the photo here. */
    margin: 0 auto 46px;
  }

  .sm-hero .sm-eyebrow {
    order: 2;
  }

  .sm-hero__title {
    order: 3;
  }

  .sm-hero__lead {
    order: 4;
  }

  .sm-hero__credential {
    order: 5;
  }

  .sm-hero .sm-actions {
    order: 6;
  }

  .sm-section-heading-row {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 22px;
  }

  .sm-logo-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 20px;
  }

  .sm-logo-tile:nth-child(3) {
    border-right: 0;
  }

  .sm-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 45px;
  }

  .sm-metric:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .sm-about__grid {
    grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
    gap: 52px;
  }

  .sm-insight-grid {
    grid-template-columns: 1fr;
  }

  .sm-insight-card {
    min-height: 280px;
  }

  .site-footer__grid {
    grid-template-columns: 1.35fr repeat(2, 0.65fr);
  }

  .site-footer__column:last-child {
    grid-column: 2;
  }
}

@media (max-width: 680px) {
  html {
    scroll-padding-top: 72px;
  }

  .site-brand {
    min-width: 0;
  }

  .site-brand__name {
    font-size: 17px;
  }

  .site-brand__descriptor {
    font-size: 7px;
  }

  .sm-section {
    padding: 74px 0;
  }

  .sm-eyebrow {
    margin-bottom: 19px;
    font-size: 9px;
    letter-spacing: 0.16em;
  }

  .sm-hero {
    padding: 54px 0 52px;
  }

  .sm-hero__title {
    margin-bottom: 23px;
    font-size: clamp(41px, 12.4vw, 60px);
  }

  .sm-hero__lead {
    font-size: 16px;
  }

  .wp-block-buttons.sm-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .sm-actions .wp-block-button,
  .sm-actions .wp-block-button__link {
    width: 100%;
  }

  .sm-hero__visual {
    min-height: 0;
  }


  .sm-hero__rail {
    right: 1px;
  }

  .sm-hero__note {
    bottom: 16px;
    left: 0;
    width: 180px;
    padding: 16px 18px;
  }

  .sm-hero__note p:first-child {
    font-size: 16px;
  }

  .sm-trust {
    padding: 30px 0 35px;
  }

  .sm-logo-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm-logo-tile,
  .sm-logo-tile:nth-child(3) {
    border-right: 1px solid var(--sm-border);
  }

  .sm-logo-tile:nth-child(even) {
    border-right: 0;
  }

  .sm-service-grid,
  .sm-engagement-grid {
    grid-template-columns: 1fr;
  }

  .sm-service-card {
    min-height: 0;
    padding: 34px 28px;
  }

  .sm-service-card__label {
    margin-bottom: 21px;
  }

  .sm-metric-grid {
    row-gap: 35px;
  }

  .sm-metric {
    min-height: 170px;
    padding: 0 15px;
  }

  .sm-metric__detail {
    font-size: 11px;
  }

  .sm-about__grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .sm-about__media {
    width: calc(100% - 20px);
  }

  .sm-about__media::before {
    right: -18px;
    bottom: -18px;
  }

  /* Tighter than the About offset: the rail strip beside the hero photo is
     only ~23px wide at this size, so 24px would run into it. */
  .sm-hero__portrait::before {
    right: -14px;
    bottom: -14px;
  }

  .sm-credential-list {
    grid-template-columns: 1fr;
  }

  .sm-engagement-card {
    min-height: 240px;
    padding: 32px 27px;
  }

  .sm-expertise__grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .sm-expertise__statement {
    position: static;
  }

  .sm-expertise-item {
    min-height: 70px;
    font-size: 21px;
  }

  .sm-insight-card {
    min-height: 0;
    padding: 29px 27px;
  }

  .sm-contact {
    padding: 86px 0;
  }

  .sm-contact__inner > p:not(.sm-eyebrow) {
    font-size: 16px;
  }

  .site-footer {
    padding-top: 58px;
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 25px;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  .site-footer__column:last-child {
    grid-column: auto;
  }

  .site-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-footer__disclaimer {
    text-align: left;
  }
}

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .sm-js .sm-reveal {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   ADDITIONS — testimonials, client marquee, contact form.
   Everything below is new and namespaced. No rule above this line is
   modified; responsive rules live in their own media queries at the end
   rather than being merged into the existing breakpoints.
   ========================================================================== */

/* Testimonials */
.sm-testimonials__inner {
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
}

.sm-testimonials .sm-eyebrow {
  justify-content: center;
}

.sm-testimonials .sm-section-title {
  max-width: none;
  margin-bottom: 54px;
}

/* When an intro follows, it owns the gap down to the cards. */
.sm-testimonials .sm-section-title:has(+ .sm-section-intro) {
  margin-bottom: 20px;
}

/* .sm-section-intro is capped at 650px and, everywhere else on the site, sits
   in a left-aligned heading row where that needs no centring. This section is
   centred, so without auto margins the block hugs the left edge and only its
   text is centred — reading as a paragraph pulled off to one side. */
.sm-testimonials .sm-section-intro {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: 50px;
}

.sm-testimonial-stage {
  position: relative;
}

.sm-testimonial {
  padding: 62px 56px 46px;
  border-top: 3px solid var(--sm-gold);
  border-radius: var(--sm-radius);
  background: var(--sm-white);
  box-shadow: var(--sm-shadow);
}

/* Without JavaScript every quote simply stacks and stays readable. The
   stacking context is only applied once site.js has flagged the document. */
.sm-js .sm-testimonial {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease, visibility 600ms ease;
}

.sm-js .sm-testimonial.is-active {
  opacity: 1;
  visibility: visible;
}

.sm-testimonial + .sm-testimonial {
  margin-top: 20px;
}

.sm-js .sm-testimonial + .sm-testimonial {
  margin-top: 0;
}

.sm-testimonial__mark {
  display: block;
  margin-bottom: -18px;
  color: var(--sm-gold);
  font-family: var(--sm-serif);
  font-size: 92px;
  line-height: 1;
  opacity: 0.28;
  user-select: none;
}

.sm-testimonial__quote {
  margin-bottom: 30px;
  color: var(--sm-ink);
  font-family: var(--sm-serif);
  font-size: clamp(20px, 2vw, 25px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.55;
}

.sm-testimonial__cite {
  display: block;
  margin-bottom: 0;
  color: var(--sm-charcoal);
  font-family: var(--sm-sans);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.6;
}

.sm-testimonial__cite span {
  display: block;
  color: var(--sm-muted);
  font-weight: 400;
}

.sm-testimonial-dots {
  display: flex;
  margin-top: 34px;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.sm-testimonial-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid var(--sm-gold);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 240ms ease, transform 240ms var(--sm-ease);
}

.sm-testimonial-dot[aria-selected="true"] {
  background: var(--sm-gold);
  transform: scale(1.25);
}

.sm-testimonial-dot:hover {
  background: var(--sm-gold-bright);
}

.sm-testimonial-dot:focus-visible {
  outline: 2px solid var(--sm-gold);
  outline-offset: 3px;
}

/* Client logo marquee */
.sm-marquee__label {
  margin-bottom: 34px;
  color: var(--sm-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
}

.sm-marquee {
  position: relative;
  width: 100%;
  /* Without JS the second logo set is never cloned, so let the row scroll
     by hand rather than clipping logos that can no longer travel. */
  overflow-x: auto;
}

.sm-js .sm-marquee {
  overflow: hidden;
  /* Feather both edges so logos enter and leave instead of being cut off. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.sm-marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
}

.sm-js .sm-marquee__track {
  animation: sm-marquee-scroll 46s linear infinite;
}

.sm-marquee:hover .sm-marquee__track {
  animation-play-state: paused;
}

.sm-marquee__item {
  display: flex;
  /* Taller than a plain logo strip on purpose: the supplied marks range from
     a 7.8:1 wordmark to a 0.7:1 emblem, and a short box shrinks the emblems
     to nothing. This ratio lets both read at a similar size. */
  width: 180px;
  height: 100px;
  padding: 8px 24px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.sm-marquee__item figure {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  align-items: center;
  justify-content: center;
}

.sm-marquee__item img {
  max-width: 100%;
  max-height: 100%;
  opacity: 0.65;
  object-fit: contain;
  filter: grayscale(1);
  transition: filter 240ms ease, opacity 240ms ease, transform 240ms var(--sm-ease);
}

.sm-marquee__item:hover img {
  opacity: 1;
  filter: grayscale(0);
  transform: translateY(-2px);
}

@keyframes sm-marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    /* The track holds two identical sets, so half a loop is seamless. */
    transform: translateX(-50%);
  }
}

/* Contact form */
.sm-contact__form {
  max-width: 680px;
  margin: 52px auto 0;
  padding-top: 44px;
  border-top: 1px solid var(--sm-dark-border);
  text-align: left;
}

/* WPForms "modern markup" resolves every colour and size from custom
   properties it declares on :root. Re-declaring them on the container is the
   supported way to reskin the form — a direct rule loses the specificity
   fight with the plugin's own stylesheet.

   The consultation popup shows the same kind of form on the same ink
   background, so both contexts are matched here rather than maintaining a
   second copy that would drift. :is() with two classes keeps the specificity
   identical to the single class it replaced. */
:is(.sm-contact, .sm-modal) .wpforms-container {
  --wpforms-field-background-color: rgba(255, 255, 255, 0.05);
  --wpforms-field-border-color: rgba(255, 255, 255, 0.15);
  --wpforms-field-border-color-spare: rgba(255, 255, 255, 0.15);
  --wpforms-field-text-color: #ffffff;
  --wpforms-field-menu-color: #0c1a2e;
  --wpforms-field-border-radius: 8px;
  --wpforms-field-size-input-height: 48px;
  --wpforms-field-size-font-size: 15px;
  --wpforms-field-size-padding-h: 15px;
  --wpforms-label-color: rgba(255, 255, 255, 0.72);
  --wpforms-label-sublabel-color: rgba(255, 255, 255, 0.5);
  --wpforms-label-error-color: #f0b7a4;
  --wpforms-label-size-font-size: 11px;
  --wpforms-label-size-line-height: 15px;
  --wpforms-button-background-color: #a98233;
  --wpforms-button-border-color: #a98233;
  --wpforms-button-text-color: #ffffff;
  --wpforms-button-border-radius: 8px;
  --wpforms-button-size-height: 50px;
  --wpforms-button-size-font-size: 14px;
  --wpforms-button-size-padding-h: 32px;
  /* The gap above the submit button. It must be set here rather than as a
     margin on .wpforms-submit-container: the plugin's own
     `div.wpforms-container-full .wpforms-form .wpforms-submit-container` rule
     is one element-selector more specific than anything scoped to
     .sm-contact/.sm-modal, so a margin declared there is silently discarded
     and the button ends up flush against the message box. A little more than
     the 20px field gap, so the button reads as a step past the last field. */
  --wpforms-button-size-margin-top: 28px;
  margin: 0;
}

/* Setting the property on the button itself re-resolves the plugin's own
   background declaration, so no !important is needed. */
:is(.sm-contact, .sm-modal) .wpforms-container button[type="submit"]:hover {
  --wpforms-button-background-color: #c09b4b;
  --wpforms-button-border-color: #c09b4b;
  transform: translateY(-2px);
}

:is(.sm-contact, .sm-modal) .wpforms-container .wpforms-field-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

:is(.sm-contact, .sm-modal) .wpforms-container .wpforms-field {
  padding: 0;
}

/* Message and anything else full-width sits across both columns. */
:is(.sm-contact, .sm-modal) .wpforms-container .wpforms-field-textarea {
  grid-column: 1 / -1;
}

/* Dropdowns take a full row too. The topic question holds the longest option
   on the form — "Custom Leadership Programme / MDP" needs ~273px — and a
   half-width column offers ~212px, so the chosen value rendered visibly cut
   off at every breakpoint. It is also the question that routes the enquiry,
   so it earns the width. */
:is(.sm-contact, .sm-modal) .wpforms-container .wpforms-field-select {
  grid-column: 1 / -1;
}

/* Typography the plugin's variables do not cover. */
:is(.sm-contact, .sm-modal) .wpforms-container .wpforms-field-label {
  margin-bottom: 9px;
  font-family: var(--sm-sans);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

:is(.sm-contact, .sm-modal) .wpforms-container .wpforms-required-label {
  color: var(--sm-gold-bright);
}

:is(.sm-contact, .sm-modal) .wpforms-container input,
:is(.sm-contact, .sm-modal) .wpforms-container select,
:is(.sm-contact, .sm-modal) .wpforms-container textarea {
  font-family: var(--sm-sans);
  transition: border-color 240ms ease, background 240ms ease;
}

/* WPForms caps its "medium" fields at 60% of the parent. Inside a two-column
   grid that leaves each control floating in a half-empty cell while the
   textarea runs full width. Targeting the control rather than the size class
   keeps this correct if the field size is ever changed in the editor. */
:is(.sm-contact, .sm-modal) .wpforms-container .wpforms-field input,
:is(.sm-contact, .sm-modal) .wpforms-container .wpforms-field select,
:is(.sm-contact, .sm-modal) .wpforms-container .wpforms-field textarea {
  max-width: 100%;
}

:is(.sm-contact, .sm-modal) .wpforms-container textarea {
  min-height: 132px;
  resize: vertical;
}

/* WPForms draws the dropdown arrow as two stacked linear-gradients — a small
   grey CSS triangle that reads as an unstyled browser control next to the
   rest of the form. Replaced with a gold chevron, and the left padding is
   matched to the text inputs so labels and values line up down the column. */
:is(.sm-contact, .sm-modal) .wpforms-container select {
  padding-right: 46px;
  padding-left: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23c09b4b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 17px center;
  background-size: 12px 8px;
  cursor: pointer;
  /* A narrow phone still cannot fit the longest option on one line. Ellipsis
     makes that read as deliberate rather than as a clipped bug — and the full
     text is there the moment the list opens. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(.sm-contact, .sm-modal) .wpforms-container select:hover {
  --wpforms-field-border-color: rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.08);
}

/* Native option lists paint on the OS layer, so they need explicit colours. */
:is(.sm-contact, .sm-modal) .wpforms-container select option {
  background: var(--sm-ink);
  color: var(--sm-white);
}

/* The "Please select" row is a prompt, not a value. */
:is(.sm-contact, .sm-modal) .wpforms-container select option[value=""] {
  color: rgba(255, 255, 255, 0.55);
}

:is(.sm-contact, .sm-modal) .wpforms-container input::placeholder,
:is(.sm-contact, .sm-modal) .wpforms-container textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

:is(.sm-contact, .sm-modal) .wpforms-container input:focus,
:is(.sm-contact, .sm-modal) .wpforms-container select:focus,
:is(.sm-contact, .sm-modal) .wpforms-container textarea:focus {
  --wpforms-field-border-color: var(--sm-gold);
  --wpforms-field-background-color: rgba(255, 255, 255, 0.09);
}

/* Spacing above this element comes from --wpforms-button-size-margin-top
   above, not from a margin here — see the note on that property. */
:is(.sm-contact, .sm-modal) .wpforms-container .wpforms-submit-container {
  padding: 0;
  text-align: left;
}

:is(.sm-contact, .sm-modal) .wpforms-container button[type="submit"] {
  font-family: var(--sm-sans);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 240ms ease, border-color 240ms ease, transform 240ms var(--sm-ease);
}

:is(.sm-contact, .sm-modal) .wpforms-container button[type="submit"]:focus-visible {
  outline: 2px solid var(--sm-white);
  outline-offset: 3px;
}

:is(.sm-contact, .sm-modal) .wpforms-container .wpforms-confirmation-container-full,
:is(.sm-contact, .sm-modal) div.wpforms-confirmation-container-full {
  margin: 0;
  padding: 26px 28px;
  border: 1px solid var(--sm-gold);
  border-radius: var(--sm-radius);
  background: rgba(255, 255, 255, 0.06);
  color: var(--sm-white);
}

:is(.sm-contact, .sm-modal) div.wpforms-confirmation-container-full p {
  margin-bottom: 0;
  color: var(--sm-white);
}

/* Mobile navigation: collapsible submenus. The toggle button is injected by
   site.js, so it never exists for the desktop hover dropdown. */
.site-navigation .submenu-toggle {
  display: none;
}

@media (max-width: 900px) {
  /* A submenu is itself a <ul>, so it inherited the top-level list's
     `margin: 24px auto 50px` and left a large gap under the sub-items. */
  .site-navigation .sub-menu {
    margin: 0;
  }

  .site-navigation .menu-item-has-children > a {
    padding-right: 58px;
  }

  .site-navigation .submenu-toggle {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    width: 58px;
    /* Matches the parent link's height so the chevron sits on its row. */
    height: 67px;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--sm-ink);
    cursor: pointer;
  }

  .site-navigation .submenu-toggle::before {
    width: 9px;
    height: 9px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: "";
    transform: translateY(-3px) rotate(45deg);
    transition: transform 220ms var(--sm-ease);
  }

  .site-navigation .submenu-toggle:focus-visible {
    outline: 2px solid var(--sm-gold);
    outline-offset: -4px;
  }

  .site-navigation .menu-item-has-children.is-open > .submenu-toggle::before {
    transform: translateY(2px) rotate(-135deg);
  }

  /* Collapsed only when JS is present to reopen it, so a no-JS visitor keeps
     the full menu rather than losing the sub-items entirely. */
  .sm-js .site-navigation .menu-item-has-children > .sub-menu {
    display: none;
  }

  .sm-js .site-navigation .menu-item-has-children.is-open > .sub-menu {
    display: block;
  }

  .sm-testimonial {
    padding: 50px 34px 38px;
  }

  .sm-testimonial__mark {
    font-size: 74px;
  }

  .sm-marquee__track {
    animation-duration: 34s;
  }

  .sm-marquee__item {
    width: 156px;
    height: 86px;
    padding: 8px 18px;
  }
}

@media (max-width: 680px) {
  .sm-testimonials .sm-section-title {
    margin-bottom: 38px;
  }

  .sm-testimonial {
    padding: 40px 24px 32px;
  }

  .sm-testimonial__mark {
    margin-bottom: -14px;
    font-size: 60px;
  }

  .sm-marquee__item {
    width: 134px;
    height: 76px;
    padding: 6px 14px;
  }

  .sm-contact__form {
    margin-top: 40px;
    padding-top: 34px;
  }

  :is(.sm-contact, .sm-modal) .wpforms-container .wpforms-field-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  /* Tracks the tighter 18px field gap on phones. */
  :is(.sm-contact, .sm-modal) .wpforms-container {
    --wpforms-button-size-margin-top: 24px;
  }

  :is(.sm-contact, .sm-modal) .wpforms-container button[type="submit"] {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* The global reset above already neutralises durations. Drop the marquee
     back to a plain scrollable row so no content sits off-screen. */
  .sm-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .sm-js .sm-marquee__track {
    animation: none;
    transform: none;
  }

  .sm-marquee__item[data-clone] {
    display: none;
  }
}

/* Hero CTA row — third action.
   sc/1.PNG supplies four button states; the two hero buttons already carry the
   pill geometry, this adds the fourth state (bare text link) for the coaching
   offer. The trailing arrow is drawn in CSS rather than typed into the button
   label, so editing the label in Gutenberg cannot drop it. */
/* Font Awesome 6 Free "arrow-right-long" (solid), CC BY 4.0, fontawesome.com.
   The single glyph is inlined as a mask rather than loading the icon font: the
   whole library costs a webfont plus a stylesheet from a third-party host for
   one arrow, and every other face on this site is self-hosted. As a mask filled
   with `currentColor` it also inherits each button's text colour and its hover
   colour for free, exactly as the old text glyph did. */
/* `.sm-gita` joined this selector rather than copying the rule: the glyph is a
   ~600-character data URI and a second copy would drift the moment either is
   touched. This rule already sits below the ADDITIONS banner, so extending it
   breaks no build constraint. `[2026-07-29]`

   The section prefix is now dropped altogether, so every block button carries the
   arrow rather than only the hero's and the Gita section's — the client asked for
   one button treatment across the page `[user 2026-07-30]`. Widening the selector
   is deliberate in preference to adding a second copy of the mask, for the same
   drift reason the note above gives. */
.wp-block-button .wp-block-button__link::after {
  flex: none;
  width: 15px;
  height: 15px;
  margin-left: 9px;
  background-color: currentColor;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M502.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-128 128c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L402.7 288 32 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l370.7 0-73.4-73.4c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l128 128z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M502.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-128 128c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L402.7 288 32 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l370.7 0-73.4-73.4c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l128 128z'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 200ms var(--sm-ease);
}

/* Row layout only. Three CTAs no longer fit the narrowed copy column on one
   row, so the two louder pills hold the first row and the third drops onto its
   own beneath them.

   Scoped to 681px and up on purpose. Below that `.sm-actions` switches to
   `flex-direction: column`, and in a column container `flex-wrap: wrap` spills
   the overflowing item into a SECOND COLUMN off the side of the viewport
   instead of stacking it. Unscoped, that silently hid this CTA on every phone.
   `flex-basis: 100%` is likewise row-only: on a column it would resolve against
   the main axis, which is height. */
@media (min-width: 681px) {
  .sm-hero .wp-block-buttons.sm-actions {
    flex-wrap: wrap;
    row-gap: 17px;
  }

  .sm-hero .wp-block-button.is-style-sm-tertiary {
    /* Spans the row, which is what makes the wrap happen, then packs the pill
       back to the start so its left edge lines up with the gold pill above
       rather than centring under the pair. */
    display: flex;
    flex-basis: 100%;
    justify-content: flex-start;
  }

  /* Core ships `.wp-block-buttons .wp-block-button__link { width: 100% }` in
     block-library/style.css. Against a wrapper that now spans the whole row that
     stretches this pill across the full copy column (measured: 578px for a
     346px label), and a pill as wide as the paragraph above it reads as a
     banner, not a button.

     Undone here rather than on the shared `.is-style-sm-tertiary` rule, and
     only above 681px, because below that the stacked mobile CTAs are all full
     width on purpose — core's rule is what makes them so, and this pill should
     stack with them. (0,4,0) against core's (0,2,0), so it wins wherever it
     applies. */
  .sm-hero .wp-block-button.is-style-sm-tertiary .wp-block-button__link {
    width: auto;
  }
}

/* Four lines of headline pushed the CTA row onto the fold at 1440x900. The copy
   column is ~577px at that width, so the cap comes down far enough for
   "Building the leaders" to hold the first line and the headline to settle at
   three. Overridden here rather than edited in place at the original rule.

   Floored at 681px so it stops short of the small-screen rule at line 1670 —
   unscoped it would win on source order and drop the mobile headline from its
   intended fluid 12.4vw down to a flat 46px. */
@media (min-width: 681px) {
  .sm-hero__title {
    font-size: clamp(46px, 4.4vw, 64px);
  }
}

/* The hero eyebrow now names three services, and at a flat 11px/0.19em it needs
   ~533px. The copy column is widest at 1440 (~578px) but narrows to ~433px
   between 901px and 1120px, where the container is capped at 1080px and the
   grid still holds two columns — so it wrapped onto a second line there.
   Scaling the type with the viewport and tightening the tracking keeps it on
   one line across the whole two-column range with room to spare. Scoped to the
   hero so section eyebrows elsewhere are untouched. */
.sm-hero .sm-eyebrow {
  font-size: clamp(9px, 0.78vw, 11px);
  letter-spacing: 0.12em;
}

/* Lead was set at 20px against a 64px headline. Dropping it opens up the
   gap between the two and buys back vertical space above the fold. */
.sm-hero__lead {
  font-size: clamp(16px, 1.2vw, 17.5px);
}

/* ==========================================================================
   Hero CTA, third tier
   --------------------------------------------------------------------------
   `[user 2026-08-13: "in hero we need add button type to One-to-one coaching
   for senior leaders"]`

   This CTA shipped as a bare underlined text link. It is a pill now, which
   means the hero has to rank three buttons instead of two. Colour does the
   ranking; geometry does not:

     1  Book a consultation      solid gold fill,  white label
     2  Design a leadership      transparent,      ink hairline,  ink label
        programme
     3  One-to-one coaching      pale gold fill,   gold hairline, ink label

   All three inherit the same capsule from `.wp-block-button
   .wp-block-button__link` (style.css:4791), so no fourth set of
   height/padding/radius numbers enters this file and there is nothing new to
   keep in sync.

   Tier 3 separates itself by HUE rather than by weight, which is the whole
   reason it can sit a row below the other two without competing. Two
   alternatives were measured and rejected: the ink hairline at a lower opacity
   reads as an inconsistency next to tier 2 rather than as a rank, and an
   ink-tinted grey fill reads as disabled against `--sm-paper`. `--sm-gold-pale`
   is already in the palette — it is the `::selection` colour — so tier 3 costs
   no new token.

   The label stays ink on purpose. `--sm-gold` on `--sm-gold-pale` measures
   2.7:1, well under the 4.5:1 floor; ink on the same fill measures ~13:1.

   Hover moves toward a denser fill, which is the pattern the other two set, but
   by pulling the tint and the hairline toward `--sm-gold` rather than filling
   gold outright — a gold fill would make it a copy of tier 1 on the way past.
   The 2px lift comes from the shared rule at style.css:555, and it replaces the
   arrow nudge the bare link used to hover with: that nudge existed because the
   link opted out of the lift (`transform: none`), and keeping both would leave
   this one CTA moving in two ways while the two above it move in one.
   ========================================================================== */
.wp-block-button.is-style-sm-tertiary .wp-block-button__link {
  border-color: rgba(169, 130, 51, 0.38);
  background: var(--sm-gold-pale);
  color: var(--sm-ink);
}

.wp-block-button.is-style-sm-tertiary .wp-block-button__link:hover {
  border-color: var(--sm-gold);
  background: #e7dabe;
  color: var(--sm-ink);
}

/* Both note lines on one line each. The subline is the binding constraint —
   "PEER-REVIEWED · FIELD-TESTED" needs ~204px against the old 161px content box,
   where the headline needs only ~180px — so the card widens and the tracking
   comes in a touch. Deliberately no `white-space: nowrap`: if a font renders
   wider than measured, the text should still wrap inside the card rather than
   spill across the portrait. Two single lines also make the card noticeably
   shorter (~85px against ~123px), so it covers less of the photograph. */
.sm-hero__note {
  width: 270px;
  /* Dropped from 27px so the card's lower edge lines up flush with the bottom
     of the photograph, sitting over the suit rather than riding up toward the
     face. The gold outline behind the portrait runs to `bottom: -24px`, so
     there is clearance below without the card touching that line. */
  bottom: 0;
}

@media (min-width: 901px) {
  /* Two-column hero only. The portrait is 84% of its column, leaving a ~64px
     strip for the rail, and the gold outline sits 24px into that strip — which
     put the rail's letters about 6px off that line, reading as though they
     touch the photograph. Pushing the rail out of the column opens the gap
     without shrinking the photo. There is room: the page gutter is ~176px a
     side at 1440, and `.sm-hero__visual::after` sits at `right: -18px`, so the
     rail still clears that hairline. */
  .sm-hero__rail {
    right: -16px;
  }

  /* Portrait starts level with the headline rather than the eyebrow (sc/1.PNG).
     Two things to clear, and both scale with the viewport:
       1. the eyebrow's block height — its line box, 1.4 x
          clamp(9px, 0.78vw, 11px), plus its 24px bottom margin (~37-39px);
       2. the headline's half-leading and ascender, the gap between its line box
          top and the cap of the "B" (~9px at 901px, ~12px at 1440px).
     Clearing only the first leaves the photo edge floating above the letters,
     so the offset covers both and the photo lines up optically with the cap
     height. Measured 46px at 901px rising to 51px at 1920px.

     The copy column is the taller of the two, so this does not grow the hero or
     push the CTAs toward the fold. The rail and the offset hairline are
     positioned inside `.sm-hero__visual`, so both travel with the photo. */
  .sm-hero__visual {
    margin-block-start: clamp(46px, 3.5vw, 51px);
  }
}

.sm-hero__note p {
  letter-spacing: 0.12em;
}

@media (max-width: 680px) {
  /* Type bumped a step on phones, where 16px/10px read small against the
     photograph. The card has to widen with it or the subline loses its single
     line: at 11px/0.12em the 28 characters need ~209px, and the old 250px card
     offered only ~214px of content — too little slack to trust across fonts.
     280px gives ~244px. It still sits inside the portrait, which is the full
     column width (~324px at a 360px phone). */
  .sm-hero__note {
    width: 280px;
    bottom: 0;
  }

  .sm-hero__note p {
    font-size: 11px;
  }

  .sm-hero__note p:first-child {
    font-size: 18px;
  }
}

/* ==========================================================================
   Consultation popup
   --------------------------------------------------------------------------
   A native <dialog>, so Escape, the focus trap and the inert page behind it
   are the browser's job rather than ours. The dialog element is the dimmed
   full-screen layer; the card inside it is .sm-modal__panel.
   ========================================================================== */

.sm-modal {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  /* The dialog fills the viewport, so this padding is the gap that keeps the
     card off the screen edges — and the strip that dismisses on click. */
  padding: clamp(14px, 4vw, 40px);
  border: 0;
  background: transparent;
  color: var(--sm-white);
  /* The panel scrolls internally; nothing should scroll out here. */
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Only lay the dialog out when open — the UA's display:none on the closed
   state has to keep winning. */
.sm-modal[open] {
  display: flex;
}

.sm-modal::backdrop {
  background: rgba(8, 18, 32, 0.72);
  backdrop-filter: blur(4px);
}

.sm-modal__panel {
  /* margin:auto centres on both axes in flex without the overflow clipping
     that align-items:center causes once the card is taller than the screen. */
  margin: auto;
  position: relative;
  display: flex;
  width: 100%;
  max-width: 640px;
  max-height: 100%;
  flex-direction: column;
  border: 1px solid var(--sm-dark-border);
  border-radius: var(--sm-radius);
  background: var(--sm-ink);
  box-shadow: 0 40px 90px rgba(4, 10, 20, 0.55);
  /* Keeps the scrolling body inside the rounded corners. */
  overflow: hidden;
}

/* A hairline of gold along the top edge, echoing the section rules. */
.sm-modal__panel::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--sm-gold), var(--sm-gold-bright));
  content: "";
}

.sm-modal__head {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  /* Right padding clears the close button. */
  padding: 34px 68px 22px 34px;
}

/* The head is pinned while the form scrolls under it. Without this the first
   visible label is sliced in half at the boundary; the fade makes fields
   dissolve into the head instead. */
.sm-modal__head::after {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 20px;
  background: linear-gradient(to bottom, var(--sm-ink), rgba(12, 26, 46, 0));
  content: "";
  pointer-events: none;
}

.sm-modal .sm-eyebrow {
  margin-bottom: 14px;
  color: var(--sm-gold-bright);
}

.sm-modal__title {
  margin: 0;
  color: var(--sm-white);
  font-family: var(--sm-serif);
  font-size: clamp(26px, 3.4vw, 33px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.sm-modal__intro {
  max-width: 46ch;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  line-height: 1.62;
}

/* The head is fixed and only the body scrolls, so the button stays reachable
   however long the form gets. */
.sm-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  /* Must clear .sm-modal__head, which is also positioned and comes later in
     the DOM — at an equal z-index the head paints over the button and swallows
     every click on it. */
  z-index: 3;
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--sm-dark-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background 240ms ease, color 240ms ease, border-color 240ms ease;
}

.sm-modal__close:hover {
  border-color: var(--sm-gold);
  background: rgba(255, 255, 255, 0.1);
  color: var(--sm-white);
}

.sm-modal__close:focus-visible {
  outline: 2px solid var(--sm-gold-bright);
  outline-offset: 2px;
}

.sm-modal__body {
  flex: 1 1 auto;
  padding: 0 34px 34px;
  overflow-y: auto;
  /* Stops a flick at the end of the form from scrolling the page behind. */
  overscroll-behavior: contain;
}

/* Hold the page still while the popup is open. */
body.sm-modal-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .sm-modal[open]::backdrop {
    animation: sm-modal-fade 240ms ease both;
  }

  .sm-modal[open] .sm-modal__panel {
    animation: sm-modal-rise 340ms var(--sm-ease) both;
  }
}

@keyframes sm-modal-fade {
  from {
    opacity: 0;
  }
}

@keyframes sm-modal-rise {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
}

@media (max-width: 680px) {
  .sm-modal {
    /* Edge to edge bar a thin margin, plus clearance for the home indicator
       and any notch once the card is nearly full-bleed. */
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  }

  .sm-modal__head {
    padding: 26px 60px 18px 22px;
  }

  .sm-modal__body {
    padding: 0 22px 26px;
  }

  .sm-modal__intro {
    font-size: 14px;
  }

  .sm-modal__close {
    top: 14px;
    right: 14px;
  }
}

/* Short landscape phones: give the form as much of the screen as possible. */
@media (max-height: 560px) {
  .sm-modal__head {
    padding-top: 22px;
    padding-bottom: 14px;
  }

  .sm-modal__intro {
    display: none;
  }
}

/* ==========================================================================
   Consultation popup — direct email fallback
   --------------------------------------------------------------------------
   Submitting the form depends on the site being able to send mail. This line
   does not, so it stays until SMTP is verified. Quiet by design: it is an
   alternative for the few, not competition for the submit button.
   ========================================================================== */

.sm-modal__alt {
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--sm-dark-border);
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  line-height: 1.5;
}

.sm-modal__alt a {
  color: var(--sm-gold-bright);
  text-decoration: underline;
  text-decoration-color: rgba(192, 155, 75, 0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color 240ms ease;
}

.sm-modal__alt a:hover {
  text-decoration-color: var(--sm-gold-bright);
}

.sm-modal__alt a:focus-visible {
  outline: 2px solid var(--sm-gold-bright);
  outline-offset: 3px;
}

/* ==========================================================================
   Contact form — arrival cue
   --------------------------------------------------------------------------
   "Start a conversation" scrolls here and moves focus to the container rather
   than the first field, so a phone keyboard does not immediately cover the
   form. A container is not a control though, so nothing would mark the arrival
   unless it is drawn here.
   ========================================================================== */

.sm-contact__form:focus {
  outline: none;
}

.sm-contact__form:focus-visible {
  outline: 2px solid var(--sm-gold-bright);
  outline-offset: 14px;
}

/* A colour change rather than a motion cue, so it needs no reduced-motion
   guard. Keyed on the class, not the anchor id, so renaming the anchor in the
   editor cannot silently unstyle it. */
.sm-contact__form:target {
  border-top-color: var(--sm-gold-bright);
}

/* ==========================================================================
   Foundations bar — 10 logos on two rows
   --------------------------------------------------------------------------
   The bar carried 6 marks and the original rules were written for exactly
   that: a fixed `repeat(6, …)` track, and dividers suppressed with
   `:last-child` (line 810) and a literal `:nth-child(3)` (line 1603). Both
   are counts, not patterns, so adding Wharton, HEC Paris, IGNOU and the
   Academy of Management left borders hanging at the end of every row. The
   rules below replace them with `nth-child` patterns that hold at any count.

   10 is deliberate. It is the only total in range that divides evenly at
   both 5 columns (desktop and tablet) and 2 columns (phones), so no
   breakpoint ends on an orphan tile — which under a vertical-divider
   treatment reads as a rendering fault rather than a short row.
   ========================================================================== */

.sm-logo-row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  row-gap: 24px;
}

/* 66px originally. The marks sit on a 420x132 canvas, so at 5 columns the
   image box is width-bound (169/420 = 0.402) and raising this alone buys
   nothing — but paired with the tighter canvas it takes the marks from ~34px
   to ~48px tall, which is what makes them legible. `[user 2026-07-28]`
   Change the canvas and this has to be re-derived with it. */
.sm-logo-tile {
  height: 84px;
}

.sm-logo-tile:nth-child(5n) {
  border-right: 0;
}

/* Hold five columns down to 900px. The existing rule at line 1598 drops to
   three, which suits six tiles but leaves ten as 3/3/3/1. The container is
   ~773px here and the gutter has already tightened, so five still fit. */
@media (max-width: 900px) {
  .sm-logo-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  /* Undoes line 1603, which zeroes the third tile's divider mid-row. */
  .sm-logo-tile:nth-child(3) {
    border-right: 1px solid var(--sm-border);
  }

  .sm-logo-tile:nth-child(5n) {
    border-right: 0;
  }
}

/* Two columns, five rows. Shorter tiles and a tighter row gap keep the band
   from dominating the screen directly under the hero — at the desktop 84px
   the five rows would run past 500px tall on a phone. */
@media (max-width: 680px) {
  /* Must be restated. The five-column rule above is a later source order than
     the original two-column rule at line 1714, so without this it wins here
     too and phones get five columns with the wrong dividers. */
  .sm-logo-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 16px;
  }

  /* Height-bound here rather than width-bound, so this number does move the
     mark size directly: 68px puts compact marks at ~44px tall. */
  .sm-logo-tile {
    height: 68px;
  }

  /* Tiles 5 and 10 are no longer row ends here: at two columns tile 5 sits in
     the left column and must keep its divider. Column parity decides it. */
  .sm-logo-tile:nth-child(5n) {
    border-right: 1px solid var(--sm-border);
  }

  .sm-logo-tile:nth-child(even) {
    border-right: 0;
  }
}

/* ==========================================================================
   Foundations bar — a caption under every logo
   --------------------------------------------------------------------------
   Ten unlabelled logos state an affiliation without saying what it is, and two
   of them were reading stronger than they are: Wharton was a faculty
   development programme and HEC Paris a research scholar stint, which beside
   an IIM Ahmedabad doctorate look like degree-level affiliations. The captions
   make each relationship explicit. Every line is sourced from MASTER-BRIEF §2.
   `[user 2026-07-28]`

   The tile becomes a column so the caption sits under the mark and inside the
   same cell — the divider is drawn on the tile, so it spans both and the two
   stay visually bound. The figure needs an explicit height because its
   `height: 100%` (style.css:816) resolved against the old fixed-height tile,
   and the tile is now auto-height.

   Sentence case, not the uppercase used by the section heading: ten tracked
   uppercase captions at this size would shout over the logos they annotate.
   ========================================================================== */

/* ⚠️ WordPress puts `margin-block-start: 24px` on every flow-layout child after
   the first (`.wp-block-group-is-layout-flow > * + *`), and `0` on the first.
   These tiles are grid items, so that margin lands inside the grid area: it
   made track 1 taller than its tiles and left the FIRST tile 12px above the
   other four, since it was the only one without the margin. Zeroing it here is
   what keeps the two rows aligned — do not remove. */
.sm-logo-row > * {
  margin-block: 0;
}

.sm-logo-tile {
  height: auto;
  flex-direction: column;
  justify-content: flex-start;
  gap: 11px;
  padding-block: 0;
}

/* The canvas aspect is built to match this box exactly (169:76), so each
   mark's height inside its file is a direct dial on its rendered size. Change
   this and the logo files must be rebuilt against the new aspect. */
.sm-logo-tile figure {
  height: 76px;
}

/* The chip was ~169px wide with the mark filling barely half of it, which read
   as a black slab rather than a logo on a dark ground. The mark is now shipped
   tight-cropped so `contain` drives it to the chip's full height, and the
   padding is trimmed so the navy hugs it. `[user 2026-07-28]` */
.sm-logo-tile.is-dark-logo figure {
  padding: 5px 9px;
}

.sm-logo-tile__caption {
  margin: 0;
  color: var(--sm-muted);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}

/* The row gap has to clear a two-line caption, not just the logo. */
.sm-logo-row {
  row-gap: 30px;
}

@media (max-width: 900px) {
  .sm-logo-tile figure {
    height: 68px;
  }
}

@media (max-width: 680px) {
  .sm-logo-tile figure {
    height: 58px;
  }

  .sm-logo-tile__caption {
    font-size: 10px;
  }

  .sm-logo-row {
    row-gap: 22px;
  }
}

/* ==========================================================================
   Foundations bar — the label is now an <h2>
   --------------------------------------------------------------------------
   It was a 9px paragraph, which the client read as too small, and it was the
   only band on the page introduced by something with no heading semantics.
   It is now an `h2`, sitting correctly between the hero `h1` and the first
   section `h2`. `[user 2026-07-28]`

   Two things have to be restated because the global `h1–h6` rule at
   style.css:152 now applies to it:

   - **font-family.** That rule sets Playfair. `.sm-trust__label` asks for
     weight 700 and only 500/600 Playfair are self-hosted, so the browser would
     synthesise a fake bold. Forced back to Inter, which is also what keeps it
     reading as a label rather than competing with the real section titles in
     Playfair further down.
   - **line-height and margin.** The heading rule sets 1.14 and a 0.65em
     bottom margin, both wrong for a tracked uppercase label.

   Tracking eases 0.22em → 0.18em: wide letterspacing earns its keep at 9px,
   but at 17px the same value pulls the words apart.
   ========================================================================== */

/* Both logo bands share one rule so the two headings cannot drift apart.
   `.sm-marquee__label` ("Organizations I have taught…") was a 9px paragraph
   and is now an h2 at the same size as the foundations heading.
   `[user 2026-07-28]` */
.sm-trust__label,
.sm-marquee__label {
  margin-bottom: 32px;
  color: var(--sm-ink);
  font-family: var(--sm-sans);
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.4;
}

@media (max-width: 680px) {
  .sm-trust__label,
  .sm-marquee__label {
    margin-bottom: 24px;
    letter-spacing: 0.14em;
  }
}

/* ==========================================================================
   Foundations bar — full colour at rest, lift on hover
   --------------------------------------------------------------------------
   These marks are the client's institutional credentials, and the point of the
   row is that a CEO recognises Wharton, IIM Ahmedabad and HEC Paris on sight.
   Brand colour is most of what makes them recognisable at ~34px tall, so the
   row now renders in colour and at full opacity by default. `[user 2026-07-28]`

   This overrides the original rest state (style.css:820, `grayscale(1)` at
   0.65 opacity) rather than editing it, per the build constraint that nothing
   above the ADDITIONS banner is modified.

   Hover is therefore movement only: a 4px lift and a 6% scale over 340ms on the
   house easing. `:focus-within` mirrors it so a keyboard walking the row gets
   the same feedback a mouse does.
   ========================================================================== */

.sm-logo-tile img {
  opacity: 1;
  filter: none;
  transition:
    opacity 340ms var(--sm-ease),
    transform 340ms var(--sm-ease);
  will-change: transform;
}

/* Needs both classes to outrank style.css:840, which holds the dark chip at
   0.76 to stop white artwork glaring against the navy. */
.sm-logo-tile.is-dark-logo img {
  opacity: 1;
}

.sm-logo-tile:hover img,
.sm-logo-tile:focus-within img {
  transform: translateY(-4px) scale(1.06);
}

/* The global reduced-motion reset neutralises the durations but not the
   transform itself, so the lift has to be withdrawn explicitly. */
@media (prefers-reduced-motion: reduce) {
  .sm-logo-tile img {
    will-change: auto;
  }

  .sm-logo-tile:hover img,
  .sm-logo-tile:focus-within img {
    transform: none;
  }
}

/* ==========================================================================
   Client marquee — a wider item so the row reads level
   --------------------------------------------------------------------------
   The item was 180px wide, leaving a 132px image box. Against that, the two
   widest marks hit the width cap long before their target height — Bosch
   (4.1:1) at 30px and TVS Mobility (8.4:1) at 15px — while the roundels sat at
   62px. A 4x spread down one row is what read as logos bouncing up and down.

   Widening the box to 198px lets the wide wordmarks grow into it: Bosch and
   Atos come up to ~45px and the tier spread closes to 46–54px, with only TVS
   still short because 8.4:1 cannot be tall in any box this shape.

   ⚠️ The logo files are built to this box's aspect (198:84). Change the width,
   padding or height here and the marquee images must be rebuilt, or every mark
   renders at the wrong size. Duration also has to move — see below.
   ========================================================================== */

/* ⚠️ Same trap as the foundations grid. WordPress puts
   `margin-block-start: 24px` on every flow-layout child after the first and
   `0` on the first, and these items are flex children — so item 1 sat 17px
   above the rest of the row. Zeroing it is what keeps the captions on one
   baseline; do not remove. */
.sm-marquee__track > * {
  margin-block: 0;
}

.sm-marquee__item {
  width: 230px;
  height: auto;
  padding: 8px 16px;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
}

/* Explicit, because the base rule's `height: 100%` resolved against the old
   fixed-height item and the item is now auto-height. This is the number the
   logo files are built against — change it and they must be rebuilt. */
.sm-marquee__item figure {
  height: 84px;
  flex: 0 0 auto;
}

/* ==========================================================================
   Client marquee — captions, and colour at rest
   --------------------------------------------------------------------------
   Matches the foundations bar: full brand colour by default rather than
   greyscale-until-hover, and a caption under each mark saying what the
   engagement actually was. Ten unlabelled client logos assert a relationship
   without stating it; "41 senior executives" is a claim a CEO can weigh.
   Every caption is sourced from MASTER-BRIEF §5 or the XLRI profile.
   `[user 2026-07-28]`
   ========================================================================== */

.sm-marquee__item img {
  opacity: 1;
  filter: none;
  transition:
    opacity 340ms var(--sm-ease),
    transform 340ms var(--sm-ease);
}

.sm-marquee__item:hover img {
  transform: translateY(-4px) scale(1.06);
}

.sm-marquee__caption {
  margin: 0;
  color: var(--sm-muted);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  .sm-marquee__item:hover img {
    transform: none;
  }
}

@media (max-width: 900px) {
  .sm-marquee__item {
    width: 200px;
    padding: 8px 14px;
  }

  .sm-marquee__item figure {
    height: 76px;
  }
}

@media (max-width: 680px) {
  .sm-marquee__item {
    width: 170px;
    padding: 6px 12px;
  }

  .sm-marquee__item figure {
    height: 66px;
  }

  .sm-marquee__caption {
    font-size: 10px;
  }
}

/* ==========================================================================
   Client marquee — 11 logos
   --------------------------------------------------------------------------
   Atos, HURL and CAG of India join the row. site.js clones the set, so the
   markup needs nothing further, but the track animates `translateX(-50%)`
   over a fixed duration: more logos at the same duration means a faster
   scroll. Durations are rescaled to hold the rate the row reads at today.

     desktop  11 × 180px = 1980px ÷ 31.3 px/s ≈ 63s   (was 8 × 180 ÷ 46s)
     ≤900px   11 × 156px = 1716px ÷ 36.7 px/s ≈ 47s   (was 8 × 156 ÷ 34s)
     ≤680px   11 × 134px = 1474px ÷ 31.5 px/s ≈ 47s   (inherits, as before)

   Add or remove a logo and these must move with it.
   ========================================================================== */

/* ==========================================================================
   Client marquee — scrolled, not translated
   --------------------------------------------------------------------------
   The row used to move via a CSS keyframe on `transform`. That is retired:
   a transform never retriggers `loading="lazy"`, so every logo starting
   outside the visible strip stayed blank while its caption still rendered,
   and a translated track cannot be swiped at all.

   site.js now drives `scrollLeft` on this container instead, which gives
   touch, trackpad and click-drag for free. **Speed lives in JS**
   (`MARQUEE_SPEED`, px/sec) — there is no duration to retime here when logos
   are added or removed, which is one less thing to get wrong.
   ========================================================================== */

.sm-js .sm-marquee {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}

.sm-js .sm-marquee::-webkit-scrollbar {
  display: none;
}

.sm-js .sm-marquee.is-dragging {
  cursor: grabbing;
  user-select: none;
}

/* The row is made of images, and dragging an image is a native browser gesture
   that hijacks the drag with a ghost thumbnail. `site.js` cancels `dragstart`
   too; this is the CSS half, and it stops the cursor flickering to the
   not-allowed icon before the script gets a look in. `[user 2026-07-29]` */
.sm-js .sm-marquee img {
  -webkit-user-drag: none;
  user-select: none;
}

/* The keyframe is left defined for the no-JS path but must not run where the
   script is now doing the moving. */
.sm-js .sm-marquee__track {
  animation: none;
  transform: none;
}

/* ==========================================================================
   Styled dropdowns
   --------------------------------------------------------------------------
   Built by site.js beside each <select>. The button deliberately resolves the
   same WPForms custom properties as the text inputs, so it cannot drift out of
   step with them if a size or colour is retuned above.

   The wrapper only exists once the script has run, so every rule here is
   scoped to it — with no JavaScript the native select keeps its own styling.
   ========================================================================== */

.sm-select {
  position: relative;
}

/* Kept in the DOM, not display:none — WPForms still validates and submits it,
   and a removed control would take its error handling with it. */
.sm-select select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

/* Tag- and parent-qualified deliberately. WPForms ships
   `div.wpforms-container-full, div.wpforms-container-full * { background: none;
   border: 0 none; border-radius: 0; height: auto; padding: 0 }` — (0,1,1),
   which beats a bare class and flattened this control to plain text. The
   :hover and [aria-expanded] rules below were already (0,2,0) and did apply,
   which is what made the failure look like a partial one. */
.sm-select button.sm-select__button {
  display: block;
  width: 100%;
  height: var(--wpforms-field-size-input-height, 48px);
  padding: 0 46px 0 15px;
  border: 1px solid var(--wpforms-field-border-color, rgba(255, 255, 255, 0.15));
  border-radius: var(--wpforms-field-border-radius, 8px);
  background: var(--wpforms-field-background-color, rgba(255, 255, 255, 0.05))
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23c09b4b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 17px center;
  background-size: 12px 8px;
  color: var(--wpforms-field-text-color, #ffffff);
  font-family: var(--sm-sans);
  font-size: var(--wpforms-field-size-font-size, 15px);
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color 240ms ease, background-color 240ms ease;
}

.sm-select button.sm-select__button:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.08);
}

.sm-select button.sm-select__button:focus-visible {
  outline: none;
  border-color: var(--sm-gold);
  background-color: rgba(255, 255, 255, 0.09);
}

/* Turn the chevron over while the list is open. */
.sm-select button.sm-select__button[aria-expanded="true"] {
  border-color: var(--sm-gold);
  background-color: rgba(255, 255, 255, 0.09);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 6.5 6 1.5 11 6.5' fill='none' stroke='%23c09b4b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Nothing chosen yet, so this is prompt text rather than an answer. */
.sm-select.is-empty button.sm-select__button {
  color: rgba(255, 255, 255, 0.5);
}

/* Failed validation. :has keeps this driven by the plugin's own error class
   rather than a second source of truth in the script. */
.sm-select:has(select.wpforms-error) button.sm-select__button {
  border-color: #f0b7a4;
}

/* site.js hoists this list out of the field and appends it to the dialog (or
   the body), for two reasons: `.sm-modal__panel` keeps a computed transform
   after its entrance animation, which would make it the containing block for a
   fixed-position child; and WPForms resets every list inside its container with
   `div.wpforms-container-full ul, ... ul li`, which flattened the menu. Being
   outside both, a plain class selector is enough. */
ul.sm-select__menu {
  /* Fixed, not absolute: the popup body is a scroll container and would clip
     an absolutely positioned list at its edge. Coordinates come from site.js. */
  position: fixed;
  /* Above the sticky header, for the copy of this that sits in the page
     rather than inside the popup. */
  z-index: 1000;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--sm-dark-border);
  border-radius: var(--sm-radius);
  background: #10233c;
  box-shadow: 0 24px 60px rgba(4, 10, 20, 0.55);
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

ul.sm-select__menu[hidden] {
  display: none;
}

ul.sm-select__menu li.sm-select__option {
  padding: 11px 14px;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--sm-sans);
  font-size: 15px;
  line-height: 1.35;
  cursor: pointer;
}

/* One highlight class for both hover and keyboard, set by the script, so the
   two never disagree about which row is current. */
ul.sm-select__menu li.sm-select__option.is-active {
  background: rgba(255, 255, 255, 0.09);
  color: var(--sm-white);
}

ul.sm-select__menu li.sm-select__option[aria-selected="true"] {
  color: var(--sm-gold-bright);
  font-weight: 600;
}

ul.sm-select__menu li.sm-select__option.is-placeholder {
  color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 680px) {
  /* Comfortable thumb targets once there is no pointer to aim with. */
  ul.sm-select__menu li.sm-select__option {
    padding: 14px 14px;
  }
}

/* ==========================================================================
   Testimonial cards
   --------------------------------------------------------------------------
   Printed by the [sm_testimonials] shortcode from the Testimonials post type.
   The grid is the default; the carousel classes below only matter if the
   shortcode is switched to layout="carousel", where the existing
   .sm-testimonial-stage script still drives one card at a time.
   ========================================================================== */

.sm-quote-set--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
  gap: 24px;
  text-align: left;
}

/* Only collapse when the script is there to reopen it. */
.sm-js .sm-quote-set--grid.is-collapsed .sm-quote--extra {
  display: none;
}

.sm-quote {
  display: flex;
  height: 100%;
  padding: 34px 32px 28px;
  margin: 0;
  border: 1px solid var(--sm-border);
  border-top: 3px solid var(--sm-gold);
  border-radius: var(--sm-radius);
  background: var(--sm-white);
  box-shadow: var(--sm-shadow);
  flex-direction: column;
  transition: transform 240ms var(--sm-ease), box-shadow 240ms var(--sm-ease);
}

@media (hover: hover) {
  .sm-quote-set--grid .sm-quote:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(12, 26, 46, 0.1);
  }
}

/* A flex column, so the Read more below the quote is a block-level item taking
   exactly its own height. Left inline-block it sits on a baseline line box and
   the row measures 60px rather than 45px — enough drift to knock the names in a
   row out of line. */
.sm-quote__body {
  display: flex;
  flex-direction: column;
}

.sm-quote__more {
  align-self: flex-start;
}

/* Written as .sm-quote .sm-quote__text to outrank .entry-content blockquote,
   which otherwise lends every card a 28px indent, a gold rule and 2.5em of
   margin meant for pull-quotes in article bodies.

   Set in --sm-sans, not --sm-serif `[user 2026-07-30: "change fonts its not
   looking good"]`. These were Playfair Display italic at 17px, and that is the
   site's *display* face doing a job it was not cut for: fifteen quotes of real
   body length, in a ~345px measure, full of acronyms. Playfair's italic caps
   and swashed w/k turned SPJIMR, BATNA, ZOPA and IIMK into guesswork, and the
   calligraphic texture sat oddly against the Inter attribution 20px below it in
   the same card.

   The values are body copy's own — 16px / 1.72 / 400, matching the `body` rule
   at style.css:104 — so nothing new enters the type scale. Only the colour
   stays distinct: --sm-ink rather than --sm-charcoal, which gives a quote a
   little more presence than the prose around it.

   Playfair *roman* was the other candidate and reads perfectly well here if an
   editorial serif is ever wanted back: set font-family to var(--sm-serif),
   font-size 17px, line-height 1.62, weight 500, and leave font-style normal. */
.sm-quote .sm-quote__text {
  position: relative;
  padding: 0;
  margin: 0 0 18px;
  border: 0;
  color: var(--sm-ink);
  font-family: var(--sm-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.72;
  quotes: none;
}

.sm-quote .sm-quote__text p {
  margin: 0;
  color: inherit;
  font: inherit;
}

.sm-quote .sm-quote__text p + p {
  margin-top: 0.85em;
}

/* The clamp is applied by the script once it knows the card overflows, so a
   card that fits is never given a button it does not need. */
.sm-js .sm-quote .sm-quote__text.is-clamped {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 8;
}

.sm-quote__more {
  padding: 0;
  margin: -8px 0 20px;
  border: 0;
  background: none;
  color: var(--sm-gold);
  cursor: pointer;
  font-family: var(--sm-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  transition: color 200ms ease;
}

.sm-quote__more:hover {
  color: var(--sm-gold-bright);
}

.sm-quote__more:focus-visible {
  outline: 2px solid var(--sm-gold);
  outline-offset: 3px;
}

.sm-quote__by {
  display: flex;
  padding-top: 18px;
  margin-top: auto;
  border-top: 1px solid var(--sm-border);
  align-items: flex-start;
  gap: 14px;
}

/* --------------------------------------------------------------------------
   Lining the names up across a row
   --------------------------------------------------------------------------
   Cards in a row stretch to a common height and the attribution was anchored to
   the bottom of it. A name, role and programme line runs anywhere from two
   lines to seven, so every card began its rule — and its name — at a different
   height. Pinning the quote to a fixed block instead, and letting the leftover
   space fall below the name rather than above it, puts every name in a row on
   one line.

   Three things had to stop moving: the quote itself (a clamp that happens to
   fall across a paragraph break renders one gap taller than one that does not),
   the Read more row (absent from the flow on quotes short enough not to need
   it), and the bottom anchor.

   Only relevant where cards sit side by side. Below 681px one card fills the
   view, nothing is beside it to align with, and every card should take only the
   room it needs.
   -------------------------------------------------------------------------- */
@media (min-width: 681px) {
  /*
   * Held to one height, which is the whole trick — everything below it then
   * starts at the same point in every card.
   *
   * The floor has to clear the tallest this block can naturally get:
   *   220px  eight clamped lines of quote at 17px / 1.62
   *  + 29px  up to two paragraph gaps, which a clamp can land across
   *  + 18px  the space under the quote
   *  + 27px  the Read more row, reserved whether or not this card earned one
   *   = 294, so 295 clears every case.
   *
   * It is deliberately a floor on the wrapper rather than a height on the quote
   * itself: sizing the quote box beyond the lines the clamp actually rendered
   * exposes the top of the next line under the ellipsis.
   */
  .sm-quote__body {
    min-height: 295px;
  }

  .sm-quote__by {
    margin-top: 0;
  }
}

.sm-quote__avatar {
  display: flex;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--sm-stone);
  align-items: center;
  justify-content: center;
}

.sm-quote__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.sm-quote__initials {
  color: var(--sm-ink);
  font-family: var(--sm-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.sm-quote__who {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
}

.sm-quote__name {
  display: block;
  color: var(--sm-ink);
  font-family: var(--sm-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.sm-quote__name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}

.sm-quote__name a:hover {
  border-bottom-color: var(--sm-gold);
}

.sm-quote__role,
.sm-quote__meta {
  display: block;
  color: var(--sm-muted);
  font-family: var(--sm-sans);
  font-style: normal;
  line-height: 1.45;
}

.sm-quote__role {
  margin-top: 2px;
  font-size: 12.5px;
}

.sm-quote__meta {
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: 0.03em;
}

.sm-quote__source {
  display: flex;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sm-stone);
  color: var(--sm-muted);
}

/* Both LinkedIn sources take LinkedIn's blue. The class comes from
   `'sm-quote--' . $source` in `sm_testimonial_card()`, so a new source value is a
   new class here too — `linkedin_post` was added 2026-08-13 and without this
   line its badge falls back to the grey `--sm-stone` default above. */
.sm-quote--linkedin .sm-quote__source,
.sm-quote--linkedin_post .sm-quote__source {
  background: rgba(10, 102, 194, 0.1);
  color: #0a66c2;
}

.sm-quote-set__actions {
  display: none;
  margin-top: 34px;
  justify-content: center;
}

/* Without the script every card is already on the page, so the button that
   would reveal them has nothing to do. */
.sm-js .sm-quote-set__actions {
  display: flex;
}

.sm-quote-set__toggle {
  padding: 13px 30px;
  border: 1px solid var(--sm-gold);
  border-radius: 999px;
  background: transparent;
  color: var(--sm-gold);
  cursor: pointer;
  font-family: var(--sm-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 220ms ease, color 220ms ease;
}

.sm-quote-set__toggle:hover {
  background: var(--sm-gold);
  color: var(--sm-white);
}

.sm-quote-set__toggle:focus-visible {
  outline: 2px solid var(--sm-gold);
  outline-offset: 3px;
}

/* Carousel layout: the stage supplies the frame, so the card inside it drops
   its own. */
.sm-quote-set--carousel .sm-testimonial {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.sm-quote-set--carousel .sm-quote {
  padding: 46px 44px 34px;
  text-align: left;
}

.sm-quote-set--carousel .sm-quote .sm-quote__text {
  font-size: clamp(18px, 1.6vw, 21px);
}

/* The grid reads better than a centred column once there is more than one
   card, so the section wrapper gives up its narrow measure. */
.sm-testimonials:has(.sm-quote-set--grid) .sm-testimonials__inner {
  max-width: none;
}

@media (max-width: 900px) {
  .sm-quote-set--grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .sm-quote-set--carousel .sm-quote {
    padding: 38px 30px 28px;
  }
}

@media (max-width: 680px) {
  .sm-quote-set--grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .sm-quote {
    padding: 28px 24px 24px;
  }

  /* No font-size override here any more: the base is 16px, which is already the
     right size on a phone, and a duplicate would only drift from it. */

  .sm-quote__avatar {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }
}

/* ==========================================================================
   Testimonial slider
   --------------------------------------------------------------------------
   The default layout. A native horizontal scroll rail with snap points, so a
   touch device swipes it and a keyboard scrolls it with no script at all; the
   arrows and dots site.js adds are a convenience over the top. Three cards at
   desktop, two at tablet, one on a phone.
   ========================================================================== */

.sm-quote-slider {
  position: relative;
}

.sm-quote-set--slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 24px) / 3);
  gap: 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  text-align: left;
  /* Room for the card shadow, which this scroll container would otherwise cut.
     `overflow-x: auto` makes overflow-y compute to auto as well, so the box
     clips vertically too — and 10px was not enough for the old shadow. It got
     sliced mid-fade, and because three cards' shadows merge, the result was one
     grey band with a hard horizontal edge under the whole row
     `[user 2026-07-30: "black shade coming below the boxes"]`.

     26px now clears the shadow set on the cards below, which reaches 24px. Keep
     the two in step: a shadow extends `y-offset + blur / 2` past the box, and
     anything beyond this padding comes back as that same hard edge. */
  padding-block: 8px 26px;
  scrollbar-width: none;
}

.sm-quote-set--slider::-webkit-scrollbar {
  display: none;
}

.sm-quote-set--slider > .sm-quote {
  scroll-snap-align: start;
  /* Not --sm-shadow (0 20px 60px), which is tuned for full-width panels: on a
     411px card it pools 50px deep, and three of those side by side read as a
     dark wash under the row rather than as three lifted cards. Tighter and
     lighter, and it fits inside the rail's padding above. Reaches 24px:
     6px offset + 18px blur / 2. */
  box-shadow: 0 6px 18px rgba(12, 26, 46, 0.06);
}

.sm-quote-set--slider:focus-visible {
  outline: 2px solid var(--sm-gold);
  outline-offset: 6px;
}

/* Lifting a card inside a scroll container would widen it and nudge the rail,
   so the slider trades the hover lift for a border tint. */
@media (hover: hover) {
  .sm-quote-set--slider .sm-quote:hover {
    transform: none;
    border-color: var(--sm-gold-pale);
    /* Stays inside the rail's 26px of padding. The old 0 18px 40px reached 38px
       and brought the hard edge back on hover alone — the state a static
       screenshot never catches.

       `y-offset + blur / 2` is the nominal reach, but the blur's tail runs a few
       px past it: 0 10px 26px measures nominally 23px and still left a 2-point
       step at the clip. These numbers were measured, not derived. */
    box-shadow: 0 8px 20px rgba(12, 26, 46, 0.09);
  }
}

.sm-quote-slider__controls {
  display: flex;
  /* 18, not 30: the rail's own bottom padding grew from 10px to 26px, and this
     keeps the gap from the cards to the arrows at the 44px it has always read
     as, rather than letting the section stretch. */
  margin-top: 18px;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.sm-quote-slider__arrow {
  display: flex;
  width: 44px;
  height: 44px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--sm-border);
  border-radius: 50%;
  background: var(--sm-white);
  color: var(--sm-ink);
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease,
    opacity 200ms ease;
}

/* Same Font Awesome 6 Free "arrow-right-long" mask the hero CTAs use, so the
   site has exactly one arrow drawing in it. */
.sm-quote-slider__arrow::before {
  width: 17px;
  height: 17px;
  background-color: currentColor;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M502.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-128 128c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L402.7 288 32 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l370.7 0-73.4-73.4c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l128 128z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M502.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-128 128c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L402.7 288 32 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l370.7 0-73.4-73.4c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l128 128z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.sm-quote-slider__arrow--prev::before {
  transform: scaleX(-1);
}

.sm-quote-slider__arrow:hover:not([disabled]) {
  border-color: var(--sm-gold);
  background: var(--sm-gold);
  color: var(--sm-white);
}

.sm-quote-slider__arrow:focus-visible {
  outline: 2px solid var(--sm-gold);
  outline-offset: 3px;
}

.sm-quote-slider__arrow[disabled] {
  cursor: default;
  opacity: 0.32;
}

.sm-quote-slider__dots {
  display: flex;
  min-width: 62px;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Stands in for the dot row once there are too many pages to aim at. */
.sm-quote-slider__count {
  margin: 0;
  color: var(--sm-muted);
  font-family: var(--sm-sans);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.sm-quote-slider__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid var(--sm-gold);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 240ms ease, transform 240ms var(--sm-ease);
}

.sm-quote-slider__dot[aria-selected="true"] {
  background: var(--sm-gold);
  transform: scale(1.25);
}

.sm-quote-slider__dot:hover {
  background: var(--sm-gold-bright);
}

.sm-quote-slider__dot:focus-visible {
  outline: 2px solid var(--sm-gold);
  outline-offset: 3px;
}

/* The rail needs the full container width, same as the grid — and then some.
   `[user 2026-07-30: "increase the width of the reviews box"]`

   Three cards inside the 1080px page container left each one 344px wide, and a
   ~345px measure is what made the quotes feel cramped however they were set.
   This section alone is allowed out to 1280px, which buys 411px per card.

   `width`, not `max-width`: .sm-container sets `width` on this same element
   (both classes are on one div), so a max-width can only ever shrink it. The
   gutter is written out rather than reusing --sm-gutter because that token
   reaches 176px at 1440px wide — it would cap the row at 1088px and the 1280px
   would never be met. 4.6vw bottoms out on 18px at 391px and below, which is
   --sm-gutter's own floor, so on a phone the rail lines up exactly with the
   sections above and below it.

   Safe for the header above the rail: .sm-section-intro is capped at 720px with
   auto margins (style.css:1907) and the title is short and centred, so only the
   cards take up the extra room. */
.sm-testimonials:has(.sm-quote-set--slider) .sm-testimonials__inner {
  width: min(calc(100% - 2 * clamp(18px, 4.6vw, 80px)), 1280px);
  max-width: none;
}

@media (max-width: 1024px) {
  .sm-quote-set--slider {
    grid-auto-columns: calc((100% - 24px) / 2);
  }
}

@media (max-width: 680px) {
  .sm-quote-set--slider {
    grid-auto-columns: 100%;
    gap: 16px;
  }

  .sm-quote-slider__controls {
    margin-top: 24px;
    gap: 14px;
  }

  .sm-quote-slider__arrow {
    width: 40px;
    height: 40px;
  }
}

/* ==========================================================================
   Same-coloured sections sitting next to each other
   --------------------------------------------------------------------------
   The page alternates white and stone, and that colour change *was* the
   divider between sections — there is no border on `.sm-section`. Reordering
   the page breaks that silently: moving the client marquee above Speaking left
   Speaking and Expertise both on stone, so 216px of section padding ran
   together as one undivided band and read as a layout fault.

   A hairline restores the delineation without recolouring anything, and
   because it keys on adjacency it survives future reordering — which matters,
   since section order is being edited in Gutenberg. `[user 2026-07-28]`

   `.sm-trust` needs no rule here: it carries its own top and bottom borders.
   ========================================================================== */

.sm-section--stone + .sm-section--stone,
.sm-section--white + .sm-section--white {
  border-top: 1px solid var(--sm-border);
}

/* ==========================================================================
   #gita — the counsel column
   --------------------------------------------------------------------------
   Each frame pairs the question a leader actually brings into the room with
   the reading the text offers. The reader meets a business problem before they
   meet a two-thousand-year-old source, and that order is the whole argument of
   the section — it is what keeps it in business register rather than reading
   as devotional content.

   Nothing new enters the design system. The header is `.sm-section-heading-row`
   untouched. The column ratio is that same 1.22/0.78, mirrored. The citation is
   `.sm-insight-card__meta` recoloured and nothing else, so a verse is cited the
   way a journal is cited in `#insights` two sections below. The question is set
   in the gold Playfair italic the hero already uses for "depends on" — the
   site's existing emphasis voice, scaled up to carry a column, used here and
   nowhere else.

   ⚠️ Section padding stays on `.sm-section`. `.sm-gita` sits on the *same
   element*, so both are single-class selectors and source order alone would
   decide the winner. Frame spacing therefore lives on `.sm-gita__frame`.

   ⚠️ Colour rules here are scoped `.sm-gita .x` (0-2-0) on purpose.
   `.sm-section--ink h2, h3, p { color: inherit }` at the top of this file is
   0-1-1 and beats a bare `.sm-gita__question` (0-1-0) — without the extra
   class the question and the citation both silently fall back to the ink
   section's body white.
   ========================================================================== */

.sm-gita__frame {
  display: grid;
  padding-block: 52px;
  border-top: 1px solid var(--sm-dark-border);
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 70px;
}

/* Closes the set, so the CTA sits below a finished block rather than floating
   off the last frame. */
.sm-gita__frame:last-child {
  border-bottom: 1px solid var(--sm-dark-border);
}

/* The eyebrow is gold in every other section, and it has to be gold here too or
   the section stops looking like part of the site. It does not inherit that on
   its own: `.sm-section--ink p { color: inherit }` is 0-1-1 and outranks
   `.sm-eyebrow` (0-1-0), so on a dark ground the eyebrow silently goes white.
   No ink section had carried an eyebrow before this one, which is why the
   collision had never surfaced. `--sm-gold-bright` for the same contrast reason
   as the citation below. */
.sm-gita .sm-eyebrow {
  color: var(--sm-gold-bright);
}

/* ⚠️ WordPress prints `:where(…is-layout-flow) > * { margin-block-start: 24px }`
   inline into every page's <head>. It carries zero specificity, so it loses to
   anything declared here — but wherever this section sets no top margin it
   applies by default, and it was doing real damage: the reading column sat 24px
   below its own question (the misalignment marked up in `sc/1.PNG`), and the
   term and citation drifted from a 9px pair to 24px apart, breaking the tight
   source stamp.

   This rule is INVISIBLE when previewing `style.css` on its own, because the
   declaration lives in the page, not the stylesheet. Check this section's
   spacing against fetched page HTML, never against the block template.
   `[2026-07-29]` */
.sm-gita .sm-section-heading-row > *,
.sm-gita__frames > *,
.sm-gita__frame > *,
.sm-gita__reading > * {
  margin-block-start: 0;
}

/* The shared heading row bottom-aligns its two columns (`align-items: end`,
   style.css:506). That suits the sections whose intro is a single line, but
   here it left the intro's first line floating below the headline's. Scoped to
   `.sm-gita` so Programmes, Speaking and Research keep the shared treatment.
   `[user 2026-07-29]` */
.sm-gita .sm-section-heading-row {
  align-items: start;
}

/* Top-aligning the columns lines the intro up with the *eyebrow*, because the
   eyebrow is the first thing in the left column. The client asked for it to
   line up with "Leadership’s" — the headline — so it has to clear the eyebrow's
   block first.

   40px is that block, and it is a constant rather than a guess: the eyebrow is
   11px at line-height 1.4 (15.4px) plus its own 24px bottom margin. Measured at
   1000 / 1280 / 1440 / 1920 the intro sat exactly 40px high at every width, so
   one value covers the whole two-column range — the eyebrow does not scale with
   the viewport above 680px, even though both the headline and the intro do.

   Child selector for specificity: this has to outrank the flow-layout reset
   above, which is also two classes. */
.sm-gita .sm-section-heading-row > .sm-section-intro {
  margin-block-start: 40px;
}

.sm-gita .sm-gita__question {
  margin: 0;
  padding-left: 28px;
  border-left: 1px solid var(--sm-gold-bright);
  color: var(--sm-gold-bright);
  font-family: var(--sm-serif);
  font-size: clamp(24px, 2.2vw, 32px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.01em;
}

/* Matches `.sm-insight-card h3` exactly, so the frames read as siblings of the
   research cards rather than as a different kind of object.

   The 2px top margin puts the heading's cap on the same line as the question's
   first line, which is what the client marked up in `sc/1.PNG`.
   `[user 2026-07-29]`

   Almost all of that misalignment was the 24px WordPress margin cleared above,
   not type metrics. What remains is a flat ~2px of the heading sitting high,
   and it really is flat: measured on the live page at 1150 / 1280 / 1440 / 1600
   / 1920 it stays within a pixel of 2 even though the question scales from 25px
   to 32px across that range. An earlier attempt modelled it as proportional to
   the size difference and over-corrected by 6px at the wide end — the columns
   are both Playfair, so their cap-to-line-box ratios cancel rather than diverge.

   Uses `margin-block-start`, not `margin-top`, to stay on the same property as
   the flow-layout reset it has to outrank. */
.sm-gita .sm-gita__reading h3 {
  margin-block-start: 2px;
  margin-bottom: 19px;
  font-size: 24px;
  line-height: 1.3;
}

/* Exclusions are load-bearing, not tidiness. A bare `.sm-gita__reading > p`
   is 0-2-1 and outranks both `.sm-insight-card__meta` (0-1-0) and
   `.sm-gita__term` (0-2-0), which silently pushed the citation to 15px and
   killed the whole point of setting it like a journal reference. Same shape as
   `.sm-insight-card > p:not(.sm-insight-card__meta)` above. */
.sm-gita .sm-gita__reading > p:not(.sm-gita__term):not(.sm-gita__citation) {
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.7;
}

.sm-gita .sm-gita__term {
  margin-top: 26px;
  margin-bottom: 9px;
  color: var(--sm-white);
  font-size: 14px;
  font-style: italic;
  font-weight: 500;
}

/* The citation carries two classes: `sm-insight-card__meta`, which supplies the
   size, weight, tracking and case — literally the same rule the research cards
   use, so a verse is set exactly like a journal — and `sm-gita__citation`,
   which carries only what differs here and gives the client a name they can
   recognise in the editor.

   Only the colour changes: `--sm-gold` measures 4.95:1 on `--sm-ink`, too thin
   for 9px uppercase at 0.17em. `--sm-gold-bright` measures 6.68:1. The bottom
   margin resets because here the citation is the frame's last line. */
.sm-gita .sm-gita__citation {
  margin-bottom: 0;
  color: var(--sm-gold-bright);
}

.sm-gita .wp-block-buttons.sm-actions {
  margin-top: 44px;
}

/* Hero button treatment: the capsule from `sc/1.PNG`, plus the trailing arrow.
   Copied by value, not by selector, because the shape rule lives at
   `style.css:550` — above the ADDITIONS banner, which the build constraint says
   is not to be edited. The arrow comes from the shared `:is(.sm-hero,
   .sm-gita)` rule above, so the glyph itself exists in one place only.

   Keep these numbers in step with `.sm-hero .wp-block-button
   .wp-block-button__link` if that ever changes. `[user 2026-07-29]` */
.sm-gita .wp-block-button .wp-block-button__link {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.02em;
}

@media (max-width: 900px) {
  .sm-gita__frame {
    padding-block: 44px;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  /* The vertical gold rule becomes a horizontal one above the question, at the
     exact 35px × 1px of `.sm-eyebrow::before`. Same token, different axis. */
  .sm-gita .sm-gita__question {
    padding-left: 0;
    border-left: 0;
    font-size: clamp(21px, 4.4vw, 26px);
  }

  .sm-gita__question::before {
    display: block;
    width: 35px;
    height: 1px;
    margin-bottom: 22px;
    background: var(--sm-gold-bright);
    content: "";
  }

  /* Stacked, so there is no second column to line up with — these nudges would
     just be stray gaps. */
  .sm-gita .sm-gita__reading h3,
  .sm-gita .sm-section-heading-row > .sm-section-intro {
    margin-block-start: 0;
  }
}

/* ==========================================================================
   Floating WhatsApp button
   --------------------------------------------------------------------------
   Printed on wp_footer by sm_whatsapp_render() in functions.php. A link and a
   circle, with no JavaScript behind it.

   Two departures from the palette, both because this is a third-party mark
   rather than site furniture:

   1. The green is a literal, not a `:root` token. Nothing else on the site
      should be reaching for it.
   2. It is #1ea34d rather than WhatsApp's own #25d366. Against the brighter
      green the white glyph measures 1.96:1, under the 3:1 WCAG 1.4.11 asks of
      an icon that has to stay identifiable; this measures 3.24:1 and still
      reads unmistakably as WhatsApp beside --sm-ink and --sm-gold. Move both
      hexes together if the brand green is ever preferred.

   Everything else comes from the system: the pill radius of the hero and Gita
   buttons, --sm-ease for the transition, --sm-ink for the label surface,
   --sm-white for the glyph, and the global :focus-visible ring at style.css:142
   which the border-radius below lets hug the circle.

   The stack: 998 sits under the 1000 of `.site-header` (style.css:197) and of
   `ul.sm-select__menu` (style.css:3451), so an open dropdown in the contact
   form is never covered, and under the 999 of the mobile navigation panel
   (style.css:1483), which is opaque and so hides this while the menu is open.
   ========================================================================== */
.sm-whatsapp {
  position: fixed;
  z-index: 998;
  right: 26px;
  bottom: 26px;
  display: block;
  width: 58px;
  height: 58px;
  /* Matches the circle, so the focus ring is a ring and not a rounded square. */
  border-radius: 999px;
  text-decoration: none;
}

/* The glyph's colour is owned here rather than on the anchor, and this is not
   cosmetic tidying. `fill="currentColor"` on the path follows whatever `color`
   it inherits, and `a:hover` (style.css:133) sets every anchor to --sm-gold at
   (0,1,1) — which outranks a `.sm-whatsapp` rule at (0,1,0) and turned the
   white mark gold on hover. Nothing in the stylesheet selects this span, so
   holding the colour one level down settles it in every state. */
.sm-whatsapp__mark {
  display: grid;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: #1ea34d;
  color: var(--sm-white);
  /* Tighter than --sm-shadow, which is tuned for large panels and leaves
     something this small looking unanchored. */
  box-shadow: 0 10px 26px rgba(12, 26, 46, 0.22);
  transition: background-color 240ms var(--sm-ease), transform 240ms var(--sm-ease),
    box-shadow 240ms var(--sm-ease);
  place-items: center;
}

.sm-whatsapp__mark svg {
  display: block;
  width: 28px;
  height: 28px;
}

.sm-whatsapp:hover .sm-whatsapp__mark,
.sm-whatsapp:focus-visible .sm-whatsapp__mark {
  background: #17853f;
  box-shadow: 0 14px 32px rgba(12, 26, 46, 0.3);
  transform: translateY(-2px);
}

/* Absolute, not a flex sibling: out of flow it adds nothing to the anchor's
   box, so the focus ring stays on the circle and a long label cannot widen the
   hit area into the page. */
.sm-whatsapp__label {
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--sm-ink);
  color: var(--sm-white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  transform: translate(6px, -50%);
  transition: opacity 220ms var(--sm-ease), transform 220ms var(--sm-ease);
  pointer-events: none;
}

.sm-whatsapp:focus-visible .sm-whatsapp__label {
  opacity: 1;
  transform: translate(0, -50%);
}

/* Gated on a real pointer: on a touchscreen :hover sticks after the tap and
   would leave the label sitting there once the visitor comes back. */
@media (hover: hover) {
  .sm-whatsapp:hover .sm-whatsapp__label {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

@media (max-width: 600px) {
  .sm-whatsapp {
    /* 18px is the floor of --sm-gutter, so the button lines up with the edge of
       the content it floats over. */
    right: 18px;
    bottom: 18px;
    width: 54px;
    height: 54px;
  }

  .sm-whatsapp__mark svg {
    width: 26px;
    height: 26px;
  }

  /* No hover to reveal it here, and out of flow it would still count towards
     scrollWidth. */
  .sm-whatsapp__label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sm-whatsapp__mark,
  .sm-whatsapp__label {
    transition: none;
  }

  .sm-whatsapp:hover .sm-whatsapp__mark,
  .sm-whatsapp:focus-visible .sm-whatsapp__mark {
    transform: none;
  }
}

/* ==========================================================================
   Foundations bar — the dark SPJIMR chip, scaled down
   --------------------------------------------------------------------------
   `[user 2026-07-30: "make spjimr logo little small"]`

   The mark itself was never the problem. `.is-dark-logo` paints --sm-ink across
   the whole 169x76 figure (style.css:3052), so SPJIMR is the only solid block in
   a row of outline marks and reads heavier than any of them — measured, its
   painted area was 11,421px² against a row median of about 5,500.

   Scaling the `figure` rather than the `img` is deliberate: it takes the navy
   chip down with the mark, which is the part carrying the weight. And because a
   transform does not affect layout, the figure still occupies its full 76px box,
   so this tile's caption stays on the same baseline as the other nine — the
   thing `.sm-logo-tile figure { height: 76px }` exists to guarantee.

   0.78 and no lower: the chip carries "Bharatiya Vidya Bhavan's" in very small
   type above the wordmark, and below about this size it stops being legible.

   The hover lift is on `img` (style.css:3169), so it composes with this instead
   of overriding it.
   ========================================================================== */
.sm-logo-tile.is-dark-logo figure {
  transform: scale(0.78);
}

@media (prefers-reduced-motion: reduce) {
  /* The transform is layout, not motion — it must survive the motion reset. */
  .sm-logo-tile.is-dark-logo figure {
    transform: scale(0.78);
  }
}

/* ==========================================================================
   "How I help" — tightening the join under the navy strip
   --------------------------------------------------------------------------
   `[user 2026-07-30: "on top how i help reduce the white gap"]`

   Measured, the run from the last metric tile down to the "HOW I HELP" eyebrow
   was 216px: 82px of empty navy under the tiles, then 134px of white. The white
   half is this section's own `.sm-section` top padding (108px) plus the eyebrow's
   offset inside the container, and it is the half that reads as a void because
   the colour change hides the navy portion.

   Trimmed to bring the total to roughly 170px. Targeted by id rather than by
   lowering `.sm-section` globally, because every other section's top padding is
   doing its job — this one is only conspicuous for sitting directly beneath a
   full-bleed navy block. `#services` is the anchor the primary nav links to, so
   it is stable.

   The remaining 82px of navy could come down too if this still reads loose; that
   is `.sm-impact`'s padding-bottom, not this rule.

   `#about` takes the same trim for the same reason `[user 2026-07-30]` — it had
   158px of stone above its eyebrow. If a third section needs this, drop the ids
   and lower `.sm-section`'s padding once instead; two is not yet a pattern.
   ========================================================================== */
#services,
#about {
  padding-top: clamp(52px, 4.3vw, 62px);
}

/* ==========================================================================
   Card grids — clearing WordPress's block-gap margin
   --------------------------------------------------------------------------
   `[user 2026-07-30: "those section side by side are not aligned right side one
   little below"]`

   Every card here is a block, and WordPress applies its block-gap as a
   `margin-block-start` on each child *after* the first. In a grid that margin is
   not spacing between rows — it is an offset inside each item's own cell. So the
   first card sat flush at the top of row one and the second sat 24px lower, and
   the row's height grew by the same 24px to absorb it.

   Row two looked fine by coincidence: both of its cards carry the margin, so they
   were pushed down together. Only the first row ever shows the fault, which is
   why it reads as "the right one is a little below" rather than as a grid problem.

   Row spacing is the grid's own job, so the margin is cleared rather than matched
   — the same fix and the same reasoning as `.sm-impact .sm-metric-grid` at
   style.css:970, which had this exact defect.

   Written `> *` rather than naming each card class, the same way
   `.sm-gita__frames > *` is (style.css:4181): every child of these grids is a
   card, and the rule then holds even if a card's own class is renamed or a
   wrapper appears between the grid and the card. WordPress ships its block gap
   inside `:where()`, which carries no specificity, so one class is enough to
   outrank it.
   ========================================================================== */
.sm-service-grid > *,
.sm-engagement-grid > *,
.sm-insight-grid > * {
  margin-block-start: 0;
}


/* ==========================================================================
   Every button gets the hero's capsule
   --------------------------------------------------------------------------
   `[user 2026-07-30: "all should styles like hero style button in hero section
   please apply the same style every button on the page"]`

   Measured, the page shipped three different buttons:

     hero + Gita       999px radius, 46px tall, 18px padding, 0.02em
     programmes,       2px radius,   52px tall, 26px padding, 0.025em
     speaking, contact
     header CTA        0px radius,   42px tall, 18px padding

   The base rule at style.css:538 is above the ADDITIONS banner, which the build
   constraint says is not to be edited, so the capsule is applied here as an
   override instead of being changed at source.

   Specificity is what makes that safe, and it is worth stating:
     - This is (0,2,0). `.wp-block-button.is-style-sm-tertiary
       .wp-block-button__link` (style.css:2745) is (0,3,0) and would win, but it
       declares colours only and no geometry, so the third hero CTA takes the
       capsule from here like every other button. [2026-08-13: that selector
       used to be `is-style-sm-link` and DID opt out of the geometry — it drew a
       bare underlined link. It is a pill now, so the opt-out is gone.]
     - The `.sm-hero` and `.sm-gita` copies are also (0,3,0), so they still win —
       but they now set exactly these values, so nothing moves.

   That does leave the same five numbers in three places. They are consistent
   today; the next structural pass over this file should delete
   `.sm-hero .wp-block-button .wp-block-button__link` (style.css:561) and
   `.sm-gita .wp-block-button .wp-block-button__link` (style.css:4326) and let
   this rule stand alone.
   ========================================================================== */
.wp-block-button .wp-block-button__link {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* The header CTA is not a block button, so it needs the radius on its own. Its
   42px height and 12px type are left as they are: the header bar is a more
   compact scale than a section CTA, and at this size the capsule alone is what
   makes it read as one family. */
.site-header__cta {
  border-radius: 999px;
}

/* ==========================================================================
   Expertise list — a real accordion behind the "+"
   --------------------------------------------------------------------------
   `[user 2026-07-30]` The list carried a gold "+" on every row (style.css:1239)
   but nothing opened: the rows were plain paragraphs and there was no answer
   copy and no script. The affordance promised something that did not exist.

   Each row is now a stock `core/details` block, so the client edits the question
   and the answer in Gutenberg like any other text, and the open/close behaviour
   is the browser's own `<details>` — no JavaScript, works with scripts blocked,
   and it is keyboard-operable and announced correctly without any ARIA.

   The base `.sm-expertise-item` rules still apply to the element, which is now a
   `<details>` rather than a `<p>`, so the row layout moves to `> summary` and the
   parts that would misfire on the wrapper are switched off below. Selectors are
   `details.sm-expertise-item` (0,1,1) to outrank the originals at (0,1,0) without
   editing them — they sit above the ADDITIONS banner.

   The closed row is deliberately unchanged: same 80px, same type, same "+", so
   the section looks exactly as it did until someone opens a row.
   ========================================================================== */
details.sm-expertise-item {
  display: block;
  padding: 0;
}

/* The wrapper must not keep the paragraph's "+" or its hover shift — both now
   belong to the summary, or they would fire on the open panel too. */
details.sm-expertise-item::after {
  content: none;
}

details.sm-expertise-item:hover {
  padding-left: 0;
  color: var(--sm-ink);
}

details.sm-expertise-item > summary {
  display: flex;
  min-height: 80px;
  padding: 0 18px 0 4px;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  color: var(--sm-ink);
  font-family: var(--sm-serif);
  font-size: clamp(21px, 2.3vw, 30px);
  line-height: 1.2;
  cursor: pointer;
  /* Both are needed: `list-style` covers Firefox, the pseudo-element covers
     Safari and older Chrome, which ignore it. */
  list-style: none;
  transition: padding 220ms var(--sm-ease), color 220ms ease;
}

details.sm-expertise-item > summary::-webkit-details-marker {
  display: none;
}

details.sm-expertise-item > summary::after {
  flex: none;
  color: var(--sm-gold);
  content: "+";
  font-family: var(--sm-sans);
  font-size: 18px;
  font-weight: 400;
}

/* An en dash, not a hyphen: at 18px a hyphen reads as a stray mark rather than
   as the counterpart to the plus. */
details.sm-expertise-item[open] > summary::after {
  content: "–";
}

details.sm-expertise-item > summary:hover {
  padding-left: 16px;
  color: var(--sm-gold);
}

details.sm-expertise-item[open] > summary {
  color: var(--sm-gold);
}

/* The answer. Sits in the body face at reading size — the row above it is the
   serif display face, and running the answer in the same face at the same width
   would read as a second heading rather than as prose. */
details.sm-expertise-item > :not(summary) {
  max-width: 62ch;
  margin: 0;
  padding: 0 18px 26px 4px;
  color: var(--sm-muted);
  font-family: var(--sm-sans);
  font-size: 15px;
  line-height: 1.7;
}

@media (max-width: 680px) {
  details.sm-expertise-item > summary {
    min-height: 70px;
    font-size: 21px;
  }

  details.sm-expertise-item > :not(summary) {
    padding-bottom: 22px;
    font-size: 14.5px;
  }
}

/* ==========================================================================
   Contact page — /contact/
   --------------------------------------------------------------------------
   The page is two bands: a white opening, then an ink band split into a
   directory of ways to reach him on the left and the enquiry form on the right.

   The structure is the idea. Each row is titled by the job it does — "Dates,
   travel and paperwork" — rather than by the channel it uses, because a reader
   arrives knowing what they want and not which inbox handles it. That routing
   is the only thing this page does that the popup does not, so everything else
   stays quiet: no icons, no new colour, no new type step. Rows are separated by
   the same `--sm-dark-border` hairline the form used to sit under.

   Nothing new enters the design system. The column gap is the 70px of
   `.sm-section-heading-row`; the row label is `.sm-insight-card__meta` with its
   trailing margin removed, which is the same borrowing the Gita citation makes
   at line 4193.

   ⚠️ Colour rules are scoped `.sm-contact-page .x` (0-2-0) on purpose.
   `.sm-section--ink h2, h3, p { color: inherit }` near the top of this file is
   0-1-1 and beats a bare `.sm-contact-channel__note` (0-1-0) — the same trap
   documented at line 4226 for `.sm-gita`.
   ========================================================================== */

/* `page-contact.php` drops `.page-header` so the blocks own the page, and marks
   the wrapper so the inner-page prose spacing can be switched off. Without this
   `.entry-content:not(:has(.sm-hero))` puts 1.5em between the two bands and
   100px above the footer — right for a page of prose, wrong for full-bleed
   sections that have to sit flush.

   ⚠️ Specificity is a **tie**, not a win: `:not()` and `:has()` each take the
   specificity of their argument, so that selector is (0-2-0) and so is this
   one. Source order decides it, and these additions are the end of the file.
   Moving this block earlier would silently restore the gaps. */
.entry-content.sm-page-sections {
  padding-bottom: 0;
}

.entry-content.sm-page-sections > * + * {
  margin-top: 0;
}

.sm-contact-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: 70px;
}

/* The form is the wider column: it holds a two-up field grid, while the
   directory is a single stack of short lines. */
.sm-contact-page__col > h2 {
  margin-bottom: 34px;
  color: var(--sm-white);
  font-size: clamp(26px, 2.4vw, 32px);
  letter-spacing: -0.015em;
}

.sm-contact-page .sm-eyebrow {
  color: var(--sm-gold-bright);
}

/* Directory rows. The hairline goes on the top edge so the first row can drop
   it and sit tight under the heading — a rule directly beneath a heading reads
   as an underline for it rather than as a separator between rows. */
.sm-contact-channel {
  padding-block: 24px;
  border-top: 1px solid var(--sm-dark-border);
}

.sm-contact-channel:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.sm-contact-channel:last-of-type {
  padding-bottom: 0;
}

/* `.sm-insight-card__meta` carries the 9px gold caps; the trailing margin is
   wrong here, where the address follows immediately.

   ⚠️ The colour is not optional. `.sm-insight-card__meta` sets `--sm-gold` at
   (0-1-0) and `.sm-section--ink p { color: inherit }` is (0-1-1), so without a
   two-class rule the label silently renders in the ink band's body white —
   measured at rgba(255,255,255,0.76) before this was added. `--sm-gold-bright`
   rather than `--sm-gold` for the same reason the Gita citation uses it
   (line 4343): 4.95:1 is too thin for 9px uppercase at this tracking, 6.68:1
   is not. */
.sm-contact-page .sm-contact-channel__label {
  margin-bottom: 9px;
  color: var(--sm-gold-bright);
}

.sm-contact-page .sm-contact-channel__value {
  margin-bottom: 6px;
  color: var(--sm-white);
  font-family: var(--sm-sans);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.45;
}

/* `a:hover { color: var(--sm-gold) }` (line 133) is (0-1-1) and would tie with
   a one-class rule here, leaving the winner to source order. Both states are
   therefore written out, at (0-2-1). */
.sm-contact-page .sm-contact-channel__value a {
  color: var(--sm-white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  transition: color 200ms ease, border-color 200ms ease;
}

.sm-contact-page .sm-contact-channel__value a:hover {
  color: var(--sm-gold-bright);
  border-bottom-color: var(--sm-gold-bright);
}

.sm-contact-page .sm-contact-channel__note {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 14.5px;
  line-height: 1.6;
}

/* A link inside a note would otherwise take `a { color: var(--sm-ink) }` from
   line 129 and paint near-black on the ink ground. (0-2-1) clears it, and the
   hover state is written out at (0-3-1) so `a:hover` (0-1-1) cannot take it. */
.sm-contact-page .sm-contact-channel__note a {
  color: rgba(255, 255, 255, 0.85);
  text-underline-offset: 3px;
}

.sm-contact-page .sm-contact-channel__note a:hover {
  color: var(--sm-gold-bright);
}

/* `sm-contact` is on this wrapper for one reason: it is the hook that the
   WPForms reskin at line 2189 and the custom <select> listbox at site.js:800
   are both scoped to, so the form here is the popup's form without a second
   copy of thirty rules. Two of the class's own declarations are section-level
   though — this is a column, not a band — and (0-2-0) undoes them. */
.sm-contact-page__form.sm-contact {
  padding: 0;
  overflow: visible;
}

/* The 650px decorative ring belongs to a full-width band. In a ~570px column it
   would be a circle escaping its own box. */
.sm-contact-page__form.sm-contact::before {
  display: none;
}

@media (max-width: 900px) {
  .sm-contact-page__grid {
    grid-template-columns: 1fr;
    gap: 54px;
  }
}

@media (max-width: 680px) {
  .sm-contact-page__col > h2 {
    margin-bottom: 28px;
  }

  .sm-contact-page .sm-contact-channel__value {
    font-size: 17px;
  }
}

/* ==========================================================================
   Research page — evidence ledger and teaching-case feature
   --------------------------------------------------------------------------
   The page borrows the site's sections, metrics, cards and credentials. Its
   own visual signature is a flat publication ledger: large folio numbers,
   disciplined metadata and hairline rules rather than another card grid.
   ========================================================================== */

/* WordPress adds a 24px flow margin to every block after the first. Inside
   these grids that becomes an accidental offset, so each component owns its
   spacing explicitly. */
.sm-pub-list > *,
.sm-pub > *,
.sm-pub__content > *,
.sm-pub__meta > *,
.sm-pub__year-group > *,
.sm-case > *,
.sm-case__narrative > *,
.sm-case__citation > * {
  margin-block-start: 0;
}

#teaching-case .sm-eyebrow,
#research-contact .sm-eyebrow {
  color: var(--sm-gold-bright);
}

#themes .sm-service-card {
  display: flex;
  flex-direction: column;
}

#themes .sm-service-card > .sm-insight-card__meta {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 10px;
  color: var(--sm-gold);
  /* Tracks the base class, which went 9px -> 10px on 2026-08-13
     (style.css:7908). This selector carries an id, so it is (1,2,1) and would
     otherwise pin this page's labels at the old size on its own. */
  font-size: 10px;
  line-height: 1.6;
}

#themes .sm-service-grid > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

#themes .sm-service-grid > :last-child:nth-child(odd) h3,
#themes .sm-service-grid > :last-child:nth-child(odd) > p {
  max-width: 760px;
}

/* Publication ledger */
.sm-pub-list {
  border-top: 1px solid var(--sm-border);
}

.sm-pub {
  display: grid;
  padding: 38px 0 40px;
  border-bottom: 1px solid var(--sm-border);
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 28px;
  transition: background-color 220ms ease;
}

.sm-pub:hover {
  background: rgba(255, 255, 255, 0.42);
}

.sm-pub__index {
  margin: 0;
  color: var(--sm-gold);
  font-family: var(--sm-serif);
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1;
}

.sm-pub__meta {
  display: flex;
  min-height: 25px;
  margin-bottom: 13px;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.sm-badge {
  display: inline-flex;
  width: fit-content;
  min-height: 24px;
  margin: 0;
  padding: 3px 10px;
  border: 1px solid var(--sm-muted);
  border-radius: 999px;
  align-items: center;
  color: var(--sm-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
}

/* White on solid gold measures 3.54:1 — below the 4.5:1 AA floor for text at
   this size. Ink on pale gold measures 14.57:1 and still separates these from
   the muted B/C badges, which carry no fill at all. */
.sm-badge--a,
.sm-badge--award {
  border-color: var(--sm-gold);
  background: var(--sm-gold-pale);
  color: var(--sm-ink);
}

/* The trophy sat flush against the "B" `[user 2026-08-01: "check screenshot 3
   there is some miss alignment"]`.
   --------------------------------------------------------------------------
   `.sm-badge` is `inline-flex`, so the whole label was a single anonymous flex
   item and `gap` had nothing to act on. The only thing separating glyph from
   text was a word space at the badge's 9px font plus 0.11em of tracking —
   measured at **3.1px total**. Next to a colour emoji, whose ink fills its
   advance width, 3.1px reads as touching.

   Wrapping the glyph in `.sm-badge__icon` makes it a real flex item, so `gap`
   applies and the separation becomes explicit and font-independent. The space
   that used to follow the emoji is removed from the content; `gap` replaces it.

   `letter-spacing: 0` on the icon: the badge's tracking was also being appended
   after the glyph, which is tracking between a picture and a letter. It does
   nothing except make the intended gap harder to reason about.

   Scoped to --award. It is the only badge on the site with an emoji — the other
   ten are plain "ABDC A/B/C" and are untouched. */
.sm-badge__icon {
  letter-spacing: 0;
  line-height: 1;
}

.sm-badge--award {
  gap: 6px;
}

.sm-pub .sm-pub__citations {
  margin: 0;
  color: var(--sm-gold);
}

.sm-pub__authors {
  margin-bottom: 8px;
  color: var(--sm-charcoal);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
}

.sm-pub .sm-pub__title {
  max-width: 900px;
  margin-bottom: 12px;
  font-size: clamp(22px, 2.25vw, 29px);
  line-height: 1.3;
}

.sm-pub__journal,
.sm-pub__reference {
  margin-bottom: 13px;
  color: var(--sm-muted);
  font-size: 14px;
  line-height: 1.6;
}

.sm-pub__link {
  margin-bottom: 0;
}

.sm-pub__year-group {
  padding-top: 36px;
}

.sm-pub__year-group:first-child {
  padding-top: 30px;
}

.sm-pub__year {
  margin-bottom: 8px;
  color: var(--sm-gold);
  font-family: var(--sm-serif);
  font-size: 32px;
  line-height: 1;
}

.sm-pub-list--conference .sm-pub {
  padding: 25px 0 27px;
  grid-template-columns: minmax(145px, 0.28fr) minmax(0, 1fr);
  gap: 34px;
}

.sm-pub__venue {
  margin-bottom: 0;
  color: var(--sm-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.55;
  text-transform: uppercase;
}

.sm-pub--conference .sm-pub__title {
  margin-bottom: 8px;
  font-family: var(--sm-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
}

.sm-pub--conference .sm-pub__reference {
  margin-bottom: 0;
  font-size: 12px;
}

.sm-pub--award {
  padding-left: 22px;
  border-left: 3px solid var(--sm-gold);
}

.sm-pub--award .sm-pub__meta {
  margin-top: 12px;
  margin-bottom: 0;
}

/* Teaching-case feature */
.sm-case {
  display: grid;
  padding: 56px 0 58px;
  border-top: 1px solid var(--sm-dark-border);
  border-bottom: 1px solid var(--sm-dark-border);
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.92fr);
  gap: clamp(50px, 7vw, 86px);
}

.sm-case__narrative {
  padding-right: clamp(0px, 2vw, 22px);
}

.sm-case .sm-case__lead {
  margin-bottom: 24px;
  color: var(--sm-white);
  font-family: var(--sm-serif);
  font-size: clamp(22px, 2.2vw, 29px);
  line-height: 1.55;
}

.sm-case .sm-case__body {
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 16px;
  line-height: 1.75;
}

.sm-case .sm-case__body:last-of-type {
  margin-bottom: 0;
}

.sm-case__citation {
  padding: clamp(30px, 4vw, 42px);
  border: 1px solid var(--sm-dark-border);
  background: rgba(255, 255, 255, 0.035);
}

.sm-case .sm-case__authors {
  margin-bottom: 18px;
  color: var(--sm-gold-bright);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-transform: uppercase;
}

.sm-case .sm-case__title {
  margin-bottom: 20px;
  color: var(--sm-white);
  font-size: clamp(25px, 2.5vw, 33px);
  line-height: 1.3;
}

.sm-case .sm-case__source {
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 14px;
  line-height: 1.7;
}

.sm-case .sm-case__keywords {
  margin-bottom: 0;
  padding-top: 18px;
  border-top: 1px solid var(--sm-dark-border);
  color: rgba(255, 255, 255, 0.52);
  font-size: 11px;
  line-height: 1.75;
}

.sm-case__narrative .sm-actions {
  margin-top: 32px;
}

#research-profiles .sm-credential-item a {
  color: inherit;
  text-decoration: none;
}

#research-profiles .sm-credential-item a:hover {
  color: var(--sm-gold);
}

@media (max-width: 900px) {
  .sm-pub {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 22px;
  }

  .sm-case {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .sm-case__narrative {
    padding-right: 0;
  }
}

@media (max-width: 680px) {
  #themes .sm-service-grid > :last-child:nth-child(odd) {
    grid-column: auto;
  }

  .sm-pub {
    padding: 30px 0 32px;
    grid-template-columns: 1fr;
    gap: 17px;
  }

  .sm-pub__index {
    font-size: 28px;
  }

  .sm-pub .sm-pub__title {
    font-size: 22px;
  }

  .sm-pub-list--conference .sm-pub {
    padding: 22px 0 24px;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sm-pub--award {
    padding-left: 17px;
  }

  .sm-pub__year {
    font-size: 28px;
  }

  .sm-case {
    padding: 42px 0 44px;
  }

  .sm-case__citation {
    padding: 27px 23px;
  }
}

/* Bibliometric footnote under the metric grid.
   The four tiles carry the headline numbers; h-index and i10-index belong to
   the same claim but do not deserve tiles of their own — four is what the grid
   is built for, and a fifth breaks the row. Sits on ink, so it borrows the
   metric detail's colour rather than introducing one. */
.sm-metric-note {
  margin-top: 34px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

.sm-metric-note strong {
  color: rgba(255, 255, 255, 0.86);
  font-weight: 600;
}

/* A second credential list under the first, with its own label. Used for the
   co-author network, which is a different claim from the editorial roles above
   it and reads wrong merged into one undifferentiated column. */
.sm-credential-group {
  margin-top: 52px;
}

.sm-credential-group > * {
  margin-block-start: 0;
}

.sm-credential-group .sm-eyebrow {
  margin-bottom: 22px;
}

@media (max-width: 780px) {
  .sm-metric-note {
    margin-top: 26px;
    /* Tracks .sm-metric__detail, which also steps down to 11px here. Left at
       12px the footnote rendered larger than the tile captions above it. */
    font-size: 11px;
  }

  .sm-credential-group {
    margin-top: 38px;
  }
}

/* Research page opening photograph `[user 2026-08-01: "after 'The evidence
   behind the advice.' image should be there and right side content should be
   aligned to the middle of the image and heading"]`.
   --------------------------------------------------------------------------
   The photograph moved *inside* the heading row's left column, directly under
   the h1, instead of sitting in its own row below. Two things follow.

   One: it no longer needs a grid of its own. The old `1.32fr / 0.68fr` grid
   existed only to stop a block image spanning the full container; the heading
   row's left column now does that, holding it to ~61% (measured 615px at a
   1920 viewport).

   Two — and this is what closes the gap under the header — it makes the left
   column the *taller* of the two. `.sm-section-heading-row` is
   `align-items: center` (style.css:517). While the left column was eyebrow + h1
   alone it measured 172px against a 272px intro, so centring pushed the
   headline 62px down the page: half the reported gap, and invisible in a
   screenshot because nothing draws a box around it. With the photograph in the
   column the intro becomes the shorter child, so the intro is what centres —
   landing level with the middle of the heading-plus-image block, which is the
   alignment that was asked for. It falls out of the existing rule; no new
   alignment declaration is needed.

   **Superseded 2026-08-01** `[user: "put image right side bring content right
   content to below the headline"]`. The columns swapped: left is now eyebrow +
   headline + intro, right is the photograph alone. The reasoning above is kept
   because the centring behaviour it describes still governs the row — only now
   the photograph is the shorter child and centres against the text block.

   50/50, not the site's usual 1.22/0.78. Measured across candidate ratios at
   1440 and 1920: the headline holds two lines down to a 465px column and
   breaks to three at 429px. 1fr/1fr leaves it 505px — 76px of headroom, against
   36px at 0.92/1.08 — while the intro sits near 62 characters per line and the
   photograph renders 505x283. A wider image column buys ~40px of photograph and
   spends most of the headline's safety margin, which is the wrong trade on a
   page whose copy is still edited in Gutenberg. */
#research .sm-section-heading-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* The intro sits under the headline now instead of in its own column, so it
   needs back the flow margin the heading row strips at style.css:525.

   And it steps down from the site-wide clamp(17px, 1.5vw, 20px) `[user
   2026-08-01: "dcrease thedescription size little bit"]`. Halving the column
   width left the paragraph at ~45 characters per line, below the comfortable
   range, and running to six lines. At 18px it sets in five lines at ~54
   characters — measured at 1920, where 19px still gave six. Scoped to this one
   paragraph: the other six `.sm-section-intro`s on the page sit in full-width
   rows and still want 20px. */
#research .sm-section-heading-row .sm-section-intro {
  margin-top: 26px;
  font-size: clamp(16px, 1.35vw, 18px);
}

/* Zero: the photograph is a grid column again, so the 70px column gap and
   `align-items: center` place it. The 40px offset it carried while nested
   under the h1 would now read as a mis-centring. */
.sm-opening-media {
  margin-top: 0;
}

/* WordPress prints a 24px flow margin onto every child of a group after the
   first. Same reset the publication ledger and the Gita frames both needed. */
.sm-opening-media > * {
  margin-block-start: 0;
}

.sm-opening-media__figure {
  margin: 0;
}

.sm-opening-media__figure img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 18px 46px rgba(12, 26, 46, 0.13);
}

@media (max-width: 900px) {
  /* ⚠️ The 1fr/1fr rule above is (0-2-0) and outspecifies the site-wide
     single-column collapse at style.css:1671 (0-1-0), so #research will not
     collapse on its own. Without this it stays two columns down to 320px. */
  #research .sm-section-heading-row {
    grid-template-columns: 1fr;
  }

  /* This block used to carry a `display: contents` + `order` hack to stop the
     photograph landing between the headline and the intro. Moving the intro
     into the left column made it unnecessary — the stack now falls in reading
     order (eyebrow → headline → intro → photograph) on its own. */
  #research .sm-opening-media {
    margin-top: 10px;
  }
}

/* The research page opens straight onto a section instead of a hero, so the
   full 108px of `.sm-section` padding sat directly under the 83px sticky
   header and read as dead space `[user 2026-08-01: "after header there is gap
   - please bring section up"]`. Measured header-bottom to eyebrow-top was
   170px: 108 of padding plus the 62 of centring described above.

   Scoped to #research rather than to `.sm-page-sections > :first-child`: every
   other section on the site is separated from another section, not from the
   header, and still wants the full 108. The homepage carries no #research id,
   so there is no collision. Steps down with the two `.sm-section` breakpoints
   at style.css:1607 (86px) and style.css:1735 (74px). */
#research.sm-section {
  padding-top: 64px;
}

@media (max-width: 900px) {
  #research.sm-section {
    padding-top: 52px;
  }
}

@media (max-width: 680px) {
  #research.sm-section {
    padding-top: 44px;
  }
}

/* ==========================================================================
   Award row — the gold rule was touching the venue label
   --------------------------------------------------------------------------
   `[user 2026-08-01: "still touching brown line with text"]`

   ⚠️ **A specificity collision that has been live since `.sm-pub--award` was
   written.** That rule asks for `padding-left: 22px` to clear its own 3px
   `border-left`, but it is (0-1-0). The award paper also sits in the conference
   ledger, where `.sm-pub-list--conference .sm-pub` (0-2-0, style.css:5152) sets
   `padding` as a *shorthand* — and a shorthand writes `padding-left: 0`. The
   0-2-0 wins, so the 22px never applied and the border sat flush against
   "AOM · BOSTON", separated only by the "A"'s own side bearing. Measured on the
   live page: computed `padding-left: 0px` against a declared 22px.

   This is invisible in a screenshot in the sense that matters — the rule *looks*
   present in the source, so the natural assumption is that the value is wrong
   rather than that it never applied. Reading the computed value is what found
   it.

   The fix matches the 0-2-0 and sits at the end of the file, so source order
   settles the tie. Both breakpoints need it: the 680px override at
   style.css:5317 lost the same way, to style.css:5311.

   ---------------------------------------------------------------------------
   Second pass `[user 2026-08-01: "its still touching the lines od the section
   please give little gap and aligned"]`. The rule was also colliding with the
   horizontal dividers — a `border-left` always spans the full border box, so it
   ran from the divider above to the divider below with nothing between, and
   butted into the "2023" heading at the top.

   There is no way to inset a border, so the rule becomes a pseudo-element.
   Insetting it by the row's own vertical padding lands it exactly on the
   content: it starts level with "AOM · BOSTON" and stops level with the award
   badge. That is the requested gap and the requested alignment in one move,
   rather than an arbitrary inset.

   ⚠️ The inset values duplicate `.sm-pub-list--conference .sm-pub`'s padding
   (25px/27px at style.css:5152, 22px/24px under 680px at style.css:5311)
   because CSS cannot reference another rule's padding. **If that padding
   changes, change these too** or the rule will drift off the content.

   `padding-left` is 25px, not 22px: with the border gone the 3px it used to
   occupy has to come from the padding for the rule-to-text gap to stay at the
   22px established above. Same reasoning for 20px at the small breakpoint. */
.sm-pub-list--conference .sm-pub--award {
  position: relative;
  padding-left: 25px;
  border-left: 0;
}

.sm-pub-list--conference .sm-pub--award::before {
  content: "";
  position: absolute;
  top: 25px;
  bottom: 27px;
  left: 0;
  width: 3px;
  background: var(--sm-gold);
}

@media (max-width: 680px) {
  .sm-pub-list--conference .sm-pub--award {
    padding-left: 20px;
  }

  .sm-pub-list--conference .sm-pub--award::before {
    top: 22px;
    bottom: 24px;
  }
}

/* ==========================================================================
   Programmes page — documentary opening and delivery ledger
   --------------------------------------------------------------------------
   The page uses the existing cards, metrics, accordion, logo row and Gita
   frames. Its one new visual device is the programme ledger: rating, cohort,
   client and role stay visible in one flat record rather than being hidden in
   catalogue cards. Only the three classes documented in PROGRAMMES-PAGE-SPEC
   are introduced here.
   ========================================================================== */

/* The opening is image-left on wide screens but keeps the h1 first in source
   order, so phones and assistive technology meet the page's proposition before
   the photograph. WordPress's flow margins are reset on every grid child. */
.sm-page-sections #programmes.sm-section {
  padding-top: 64px;
}

.sm-page-sections #programmes .sm-opening-media {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
  align-items: center;
  gap: clamp(46px, 6vw, 76px);
}

.sm-page-sections #programmes .sm-opening-media > *,
#programme-formats .sm-service-card > *,
.sm-programme-list > *,
.sm-programme > *,
.sm-programme .sm-pub__content > *,
.sm-programme .sm-pub__meta > * {
  margin-block-start: 0;
}

.sm-page-sections #programmes .sm-opening-media__figure {
  order: -1;
}

.sm-page-sections #programmes .sm-section-intro {
  margin-top: 26px;
  font-size: clamp(16px, 1.35vw, 18px);
}

/* One documentary photograph enters the four-format grid. It is deliberately
   treated as evidence inside the workshop card, not as a decorative card
   header, and therefore sits between the explanation and the named examples. */
#programme-formats .sm-service-card {
  display: flex;
  flex-direction: column;
}

#programme-formats .sm-service-card > .sm-insight-card__meta {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 22px;
  color: var(--sm-gold);
  /* 9px -> 10px with the base class, for the reason given at style.css:5117. */
  font-size: 10px;
  line-height: 1.6;
}

#programme-formats .sm-service-card .wp-block-image {
  width: 100%;
  margin: 8px 0 0;
  overflow: hidden;
}

/* Anchor the crop near the top of the frame. The card is widest at desktop,
   where a 443x148 box keeps only about 61% of a group photograph's height, and
   a centred crop took the window past the faces — it cut the top of one head
   clean off. Faces sit in the upper third of every one of these photographs, so
   the window starts high and the floor is what gets lost. Anything up to 15%
   clears all four; 12% leaves margin for a photograph swapped in later. */
#programme-formats .sm-service-card .wp-block-image img {
  display: block;
  width: 100%;
  height: 148px;
  object-fit: cover;
  object-position: 50% 12%;
}

/* Programme ledger. Category headings reuse the Research page's year style;
   rows reuse its folio, title and metadata typography without inheriting the
   publication-specific grid selectors. */
/* The hover wash used to begin exactly where the folio number begins, so the
   number sat on the edge of its own highlight. The list is pulled outward and
   the row given matching inside padding, which puts clear ground around the
   row without moving a single word: the numbers and titles stay on the same
   line as the category heading above them. Capped at the gutter's own 18px
   floor so the bleed can never push past the viewport on a phone. */
.sm-programme-list {
  --sm-row-bleed: min(22px, var(--sm-gutter));

  border-top: 1px solid var(--sm-border);
  margin-inline: calc(var(--sm-row-bleed) * -1);
}

/* Re-inset the category heading, which is not a row and so is not padded. */
.sm-programme-list .sm-pub__year {
  padding-inline: var(--sm-row-bleed);
}

.sm-programme-list .sm-pub__year-group {
  padding-top: 38px;
}

.sm-programme-list .sm-pub__year-group:first-child {
  padding-top: 30px;
}

.sm-programme-list .sm-pub__year {
  margin-bottom: 10px;
}

.sm-programme {
  display: grid;
  padding: 34px var(--sm-row-bleed) 37px;
  border-bottom: 1px solid var(--sm-border);
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 28px;
  transition: background-color 220ms ease;
}

.sm-programme:hover {
  background: rgba(255, 255, 255, 0.42);
}

.sm-programme .sm-pub__meta {
  margin-bottom: 13px;
}

.sm-programme .sm-pub__meta .sm-pub__journal {
  margin: 0;
}

/* The participant score is the page's central evidence, not a taxonomy chip.
   `.sm-badge` is sized for the ABDC rank labels on /research/ — 9px uppercase
   on wide tracking, which suits a word and misreads a measurement: it rendered
   the score smaller than the metric footnote above it. Give the score its own
   scale, and match `.sm-quote .sm-quote__text` in taking two classes, so the
   override does not rest on which rule happens to come last.

   One gold tone for every rating, so 4.69 never reads as a failure beside 5.0 —
   the differentiation is the number. Ink on pale gold measures 14.57:1 where
   white on solid gold measured 3.54:1 and failed AA at this size, and it leaves
   the solid gold fill to the CTAs, which is the only other thing wearing it. */
.sm-programme .sm-programme__rating {
  min-width: 88px;
  min-height: 30px;
  padding: 4px 14px;
  border-color: var(--sm-gold);
  background: var(--sm-gold-pale);
  justify-content: center;
  color: var(--sm-ink);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  text-transform: none;
}

.sm-programme .sm-pub__title {
  max-width: 900px;
  margin-bottom: 11px;
  font-size: clamp(22px, 2.25vw, 29px);
  line-height: 1.3;
}

.sm-programme .sm-pub__journal {
  margin-bottom: 10px;
}

.sm-programme .sm-insight-card__meta {
  margin-bottom: 0;
  color: var(--sm-gold);
}

/* The sole-programme-director row carries its own dated evidence. Keeping the
   photograph narrower than the citation prevents one row from becoming a
   second hero in an intentionally flat list. */
#delivered-programmes .sm-programme .wp-block-image {
  width: min(100%, 620px);
  margin: 25px 0 2px;
}

#delivered-programmes .sm-programme .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Line the cards up across a row. They already stretch to equal height, but
   each laid its five children out independently, so a three-line description
   beside a four-line one pushed the two photographs 28px apart. Subgrid hands
   every card the same parent row tracks — label, question, description,
   photograph, examples — so the rows align with no hard-coded height, and stay
   aligned when the copy is rewritten.

   Guarded, because a browser without subgrid keeps the flex layout above and
   simply reads as it did before. Each card must hold all five children for the
   tracks to line up; that is why README says to keep the photograph. */
@supports (grid-template-rows: subgrid) {
  #programme-formats .sm-service-card {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  /* Start of the track, not the end: the examples lines wrap to different
     numbers of lines, and aligning their feet would leave their first lines on
     different baselines — the one thing the eye actually follows across a row.
     The flex-era auto margin has nothing left to do. */
  #programme-formats .sm-service-card > .sm-insight-card__meta {
    margin-top: 0;
    align-self: start;
  }
}

/* Ink sections need two-class or id-scoped colour rules: the section's
   element selector otherwise outspecifies the single-class eyebrow. */
#programme-contact .sm-eyebrow {
  color: var(--sm-gold-bright);
}

@media (max-width: 900px) {
  .sm-page-sections #programmes.sm-section {
    padding-top: 52px;
  }

  .sm-page-sections #programmes .sm-opening-media {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .sm-page-sections #programmes .sm-opening-media__figure {
    order: initial;
  }

  .sm-programme {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 22px;
  }
}

@media (max-width: 680px) {
  .sm-page-sections #programmes.sm-section {
    padding-top: 44px;
  }

  .sm-page-sections #programmes .sm-opening-media {
    gap: 28px;
  }

  #programme-formats .sm-service-card .wp-block-image img {
    height: auto;
  }

  .sm-programme-list .sm-pub__year-group,
  .sm-programme-list .sm-pub__year-group:first-child {
    padding-top: 28px;
  }

  /* Phone layout for a row. The folio and the cohort share the first line, the
     title and client run the full width, and the score closes the row on the
     same line as the role. That takes three stacked blocks off the top of every
     row and hands the title the whole column to wrap in.

     `display: contents` lets the children of the two wrappers be placed on the
     row's own grid. Those wrappers exist to make one line of the desktop
     layout; on a phone that line is broken up, so they have no job. Placement
     is by explicit row, not auto-flow, because eleven rows carry no score and
     eight carry no cohort — auto-flow would slide the survivors up into the
     wrong line. Empty rows collapse to nothing, since the vertical gap is 0 and
     the rhythm comes from each element's own margin. */
  .sm-programme {
    padding: 28px var(--sm-row-bleed) 31px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0 12px;
  }

  .sm-programme .sm-pub__content,
  .sm-programme .sm-pub__meta {
    display: contents;
  }

  /* Baseline, not top: the folio is large Playfair and the cohort is small
     Inter, so top-aligning them would float the cohort above the number rather
     than setting the two on one line. */
  .sm-programme .sm-pub__index {
    grid-area: 1 / 1 / 2 / 2;
    align-self: baseline;
  }

  .sm-programme .sm-pub__meta .sm-pub__journal {
    grid-area: 1 / 2 / 2 / 4;
    align-self: baseline;
    margin-bottom: 12px;
  }

  .sm-programme .sm-pub__title {
    grid-area: 2 / 1 / 3 / 4;
    font-size: 22px;
  }

  .sm-programme .sm-pub__content > .sm-pub__journal {
    grid-area: 3 / 1 / 4 / 4;
  }

  .sm-programme .sm-insight-card__meta {
    grid-area: 4 / 1 / 5 / 3;
    align-self: center;
  }

  .sm-programme .sm-programme__rating {
    grid-area: 4 / 3 / 5 / 4;
    align-self: center;
    justify-self: end;
  }

  #delivered-programmes .sm-programme .wp-block-image {
    grid-area: 5 / 1 / 6 / 4;
    margin-top: 21px;
  }
}

/* ==========================================================================
   Photo gallery
   --------------------------------------------------------------------------
   The alignment promise lives here and in add_image_size(): every tile is the
   same 4:3 box, and WordPress has already cropped the file to match. Nothing
   the client uploads can push a neighbour out of line — the only thing that
   varies is whether an image fills its box or sits whole inside it.
   ========================================================================== */

.sm-gallery-wrap {
  margin-top: 34px;
}

/* --- the filter chips ---------------------------------------------------- */

.sm-gallery__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sm-gallery__filters-wrap {
  margin-bottom: 24px;
}

/* Deliberately not .sm-badge. That class is 9px uppercase, built for the ABDC
   rank labels on /research/, and borrowing it for anything a reader has to
   press has already produced one 3.54:1 contrast failure on this site. These
   are 14px on a 44px target and clear AA in both states. */
.sm-gallery__chip {
  padding: 9px 18px;
  min-height: 44px;
  border: 1px solid var(--sm-border);
  border-radius: 999px;
  background: var(--sm-white);
  color: var(--sm-charcoal);
  cursor: pointer;
  font-family: var(--sm-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}

.sm-gallery__chip:hover {
  border-color: var(--sm-gold);
  color: var(--sm-ink);
}

.sm-gallery__chip.is-active {
  border-color: var(--sm-gold);
  background: var(--sm-gold-pale);
  color: var(--sm-ink);
  font-weight: 600;
}

.sm-gallery__chip:focus-visible {
  outline: 2px solid var(--sm-gold);
  outline-offset: 2px;
}

/* --- the grid ------------------------------------------------------------ */

.sm-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sm-gallery__item {
  margin: 0;
  min-width: 0;
}

/* The anchor is the no-JavaScript path to the full-size file. It carries no
   look of its own; the button inside it is the tile. */
.sm-gallery__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.sm-gallery__tile {
  position: relative;
  display: block;
  width: 100%;
  /* The one line that keeps the grid straight. */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  background: var(--sm-stone);
  cursor: pointer;
  transition: box-shadow 260ms var(--sm-ease), border-color 260ms var(--sm-ease);
}

.sm-gallery__tile:hover {
  border-color: var(--sm-gold);
  box-shadow: var(--sm-shadow);
}

.sm-gallery__tile:focus-visible {
  outline: 2px solid var(--sm-gold);
  outline-offset: 3px;
}

.sm-gallery__tile img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 420ms var(--sm-ease);
}

@media (prefers-reduced-motion: no-preference) {
  .sm-gallery__tile:hover img {
    transform: scale(1.04);
  }
}

/* Fill: the stored file is resized, not cropped, so this is where the framing
   actually happens — see the note on sm-gallery-tile in functions.php. Faces sit
   in the upper third of nearly every one of these photographs, so the default is
   well above centre; dead centre takes the head off a portrait held upright. */
.sm-gallery__item--fill .sm-gallery__tile img {
  object-fit: cover;
  object-position: center 22%;
}

/* The three overrides behind "What to keep in frame". They only began to do
   anything once the stored file stopped being pre-cropped. */
.sm-gallery__item--focus-top .sm-gallery__tile img {
  object-position: center top;
}

.sm-gallery__item--focus-middle .sm-gallery__tile img {
  object-position: center center;
}

.sm-gallery__item--focus-bottom .sm-gallery__tile img {
  object-position: center bottom;
}

/* Whole: posters, certificates and very wide cohort panoramas, where a crop
   would eat the text or the people at the ends. The tile does not change size —
   the image is letterboxed inside it against a blurred copy of itself, so the
   bands read as matting rather than as two grey stripes. */
.sm-gallery__item--whole .sm-gallery__tile img {
  object-fit: contain;
}

.sm-gallery__matte {
  position: absolute;
  inset: -8%;
  background-position: center;
  background-size: cover;
  filter: blur(18px) saturate(1.25) brightness(0.98);
  opacity: 0.65;
}

/* --- captions ------------------------------------------------------------ */

.sm-gallery__caption {
  display: block;
  padding-top: 10px;
}

.sm-gallery__title {
  display: block;
  color: var(--sm-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.sm-gallery__meta {
  display: block;
  margin-top: 2px;
  color: var(--sm-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

/* --- filtering and the fold ---------------------------------------------- */

/* Both hiding rules are scoped to .sm-js. Without JavaScript there is no chip
   to press and no button to expand the set, so every photograph must show.

   Two classes, one appearance: `is-filtered` is the reader's own choice of
   category, `is-folded` is only the "show all" fold. They look identical here
   and are told apart in site.js, where the lightbox honours the first and
   ignores the second. */
.sm-js .sm-gallery__item.is-filtered,
.sm-js .sm-gallery__item.is-folded {
  display: none;
}

.sm-gallery__empty {
  margin: 30px 0 0;
  color: var(--sm-muted);
  font-size: 15px;
  text-align: center;
}

.sm-gallery__actions {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

.sm-gallery__more {
  padding: 13px 30px;
  border: 1px solid var(--sm-gold);
  border-radius: 999px;
  background: transparent;
  color: var(--sm-gold);
  cursor: pointer;
  font-family: var(--sm-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 220ms ease, color 220ms ease;
}

.sm-gallery__more:hover {
  background: var(--sm-gold);
  color: var(--sm-white);
}

.sm-gallery__more:focus-visible {
  outline: 2px solid var(--sm-gold);
  outline-offset: 3px;
}

/* --- the lightbox -------------------------------------------------------- */

.sm-gallery-lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  padding: clamp(12px, 3vw, 40px);
  border: 0;
  background: transparent;
  color: var(--sm-white);
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Same reason as .sm-modal: the UA's display:none on the closed state has to
   keep winning. */
.sm-gallery-lightbox[open] {
  display: flex;
}

.sm-gallery-lightbox::backdrop {
  background: rgba(8, 18, 32, 0.88);
  backdrop-filter: blur(5px);
}

.sm-gallery-lightbox__panel {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(6px, 2vw, 20px);
  margin: auto;
  width: 100%;
  max-width: 1240px;
}

.sm-gallery-lightbox__figure {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  text-align: center;
}

.sm-gallery-lightbox__figure img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: var(--sm-radius);
  background: rgba(255, 255, 255, 0.04);
}

.sm-gallery-lightbox__caption {
  margin-top: 16px;
  color: var(--sm-white);
  font-size: 15px;
  line-height: 1.55;
}

.sm-gallery-lightbox__meta,
.sm-gallery-lightbox__count {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

.sm-gallery-lightbox__meta:empty,
.sm-gallery-lightbox__count:empty {
  display: none;
}

.sm-gallery-lightbox__count {
  margin-top: 6px;
  letter-spacing: 0.08em;
}

.sm-gallery-lightbox__arrow,
.sm-gallery-lightbox__close {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 1px solid var(--sm-dark-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}

.sm-gallery-lightbox__arrow:hover,
.sm-gallery-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.45);
}

.sm-gallery-lightbox__arrow:focus-visible,
.sm-gallery-lightbox__close:focus-visible {
  outline: 2px solid var(--sm-gold-bright);
  outline-offset: 3px;
}

.sm-gallery-lightbox__arrow::before,
.sm-gallery-lightbox__close::before,
.sm-gallery-lightbox__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--sm-white);
}

.sm-gallery-lightbox__arrow::before {
  width: 13px;
  height: 13px;
  border-top: 2px solid var(--sm-white);
  border-right: 2px solid var(--sm-white);
  background: none;
}

.sm-gallery-lightbox__arrow--prev::before {
  transform: translate(-35%, -50%) rotate(-135deg);
}

.sm-gallery-lightbox__arrow--next::before {
  transform: translate(-65%, -50%) rotate(45deg);
}

/* Pinned to the screen, not to the panel. The photographs are every shape
   there is, so a button anchored to the panel followed the picture around and
   sat on it — and over a pale corner a translucent white disc on a white
   photograph is invisible. `position: fixed` inside a modal <dialog> resolves
   against the viewport (nothing here establishes a containing block for it),
   so this holds the screen's top-right corner over the dimmed backdrop no
   matter what shape the photograph is. The dark fill is belt and braces for
   the tall pictures that do reach the corner. */
.sm-gallery-lightbox__close {
  position: fixed;
  top: calc(clamp(12px, 3vw, 40px) + env(safe-area-inset-top, 0px));
  right: calc(clamp(12px, 3vw, 40px) + env(safe-area-inset-right, 0px));
  z-index: 3;
  width: 44px;
  height: 44px;
  background: rgba(8, 18, 32, 0.82);
  border-color: rgba(255, 255, 255, 0.5);
}

.sm-gallery-lightbox__close::before,
.sm-gallery-lightbox__close::after {
  width: 16px;
  height: 2px;
}

.sm-gallery-lightbox__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.sm-gallery-lightbox__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 1024px) {
  .sm-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .sm-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
  }

  .sm-gallery__title {
    font-size: 13px;
  }

  .sm-gallery__meta {
    font-size: 12px;
  }

  /* The arrows move off the sides and under the picture: at this width a
     48px control on each flank leaves the photograph almost nothing.

     Once they sit side by side they need a gap of their own. The panel's
     shared clamp() resolves to about 8px on a phone, which put two 48px
     targets almost touching — fine between an arrow and a photograph, far too
     close between two controls that do opposite things. Column gap separates
     the arrows; row gap holds them off the caption. */
  .sm-gallery-lightbox__panel {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 36px;
  }

  .sm-gallery-lightbox__figure {
    order: -1;
    flex-basis: 100%;
  }

  .sm-gallery-lightbox__figure img {
    max-height: 64vh;
  }

  /* No close-button override here any more. It used to be nudged to the
     panel's corner; now that it is fixed to the screen, the base rule's
     clamp() already resolves to a 12px inset at this width, and forcing it to
     0 would push it under a notch. */
}

/* ==========================================================================
   One row, always
   --------------------------------------------------------------------------
   Both of these are rows that wrapped. A header on two lines and a filter bar
   with one orphaned chip underneath read as broken rather than as responsive.
   ========================================================================== */

/* --- the primary navigation ---------------------------------------------- */

/* Nine menu items over a two-line brand is what a wrapped header looks like.
   Adding Gallery took the row past its container between roughly 1130px and
   1210px — a common laptop bracket that sits just above the 1120px rule which
   drops the call to action, so nothing was catching it. */
.site-navigation ul {
  flex-wrap: nowrap;
}

/* An item may run out of room, but it must never break inside itself:
   "How I / Help" stacked over two lines was the visible symptom. */
.site-navigation a,
.site-header__cta,
.site-brand__name,
.site-brand__descriptor {
  white-space: nowrap;
}

/* Tighten through the band that was wrapping, and keep the call to action.
   Bounded below at 1121px so it cannot fight the tighter 1120px rule that
   follows it in this file. */
@media (max-width: 1260px) and (min-width: 1121px) {
  .site-header__inner {
    gap: 24px;
  }

  .site-navigation ul {
    gap: 20px;
  }

  /* The brand's 218px floor is what stopped the row giving way gracefully. */
  .site-brand {
    min-width: 0;
  }
}

/* --- the gallery filter bar ----------------------------------------------- */

/* Six categories plus "All" overrun 1080px by about 80px, so the last chip
   dropped to a line of its own at every desktop width. Wrapping is not the fix:
   the client can rename a category or add a seventh, and any width-based
   tuning would be wrong again the moment he does. The bar is one row that
   scrolls instead — the same thing the logo marquee does. */
.sm-gallery__filters {
  flex-wrap: nowrap;
  overflow-x: auto;
  /* A trackpad flick sideways should not also drag the page back a step. */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Room for the focus ring, which would otherwise be clipped by the scroller. */
  padding: 3px 0;
}

.sm-gallery__filters::-webkit-scrollbar {
  display: none;
}

.sm-gallery__chip {
  flex: 0 0 auto;
  white-space: nowrap;
  /* Measured, not guessed: the seven shipped chips came to 1169px inside a
     1080px container. Trimming the padding from 18px, the gap from 10px and
     the face from 14px is what closes that 89px — all seven now fit a
     1080px row with nothing cut off. The scroller above is the fallback for
     when the client renames a category or adds one, not the normal state. */
  padding-inline: 12px;
  font-size: 13.5px;
}

/* The fade sits on the viewport, not the wrapper, so it covers the chips and
   stops short of the scrollbar underneath them. Only shown once site.js has
   measured that there is something to scroll to, so a bar that already fits
   carries no false affordance. */
.sm-gallery__filters-viewport {
  position: relative;
}

.sm-gallery__filters-viewport::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 56px;
  background: linear-gradient(to right, rgba(242, 241, 237, 0), var(--sm-stone) 78%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.sm-gallery__filters-wrap.has-more .sm-gallery__filters-viewport::after {
  opacity: 1;
}

/* --- the scrollbar under the chips ---------------------------------------- */

/* The element is 18px tall so a thumb can be grabbed on a phone; the line
   itself is the 3px ::before. Height is held whether or not the bar is in use,
   so the grid below does not jump when a filter changes what fits. */
.sm-gallery__filters-track {
  position: relative;
  height: 18px;
  margin-top: 2px;
  opacity: 0;
  cursor: pointer;
  /* Invisible means untouchable: an 18px strip that swallows presses while
     showing nothing would be a trap for a thumb reaching for the grid. */
  pointer-events: none;
  /* The thumb is dragged with pointer events; the browser must not also read
     the gesture as a page scroll. */
  touch-action: none;
  transition: opacity 220ms ease;
}

.sm-gallery__filters-track::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 0;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--sm-border);
}

.sm-gallery__filters-thumb {
  position: absolute;
  top: 8px;
  left: 0;
  height: 3px;
  min-width: 34px;
  border-radius: 999px;
  background: var(--sm-gold);
}

/* Nothing to scroll means no scrollbar — but the space stays reserved, so a
   filter that shortens the row does not shift the photographs upward. */
.sm-gallery__filters-wrap.is-scrollable .sm-gallery__filters-track {
  opacity: 1;
  pointer-events: auto;
}

.sm-gallery__filters-wrap.is-scrollable .sm-gallery__filters-track:hover .sm-gallery__filters-thumb,
.sm-gallery__filters-track.is-dragging .sm-gallery__filters-thumb {
  background: var(--sm-gold-bright);
}

/* A thicker line while it is being dragged, so the grab registers. */
.sm-gallery__filters-track.is-dragging::before,
.sm-gallery__filters-track.is-dragging .sm-gallery__filters-thumb {
  top: 7px;
  height: 5px;
}

@media (prefers-reduced-motion: no-preference) {
  .sm-gallery__filters-thumb {
    transition: background 200ms ease, top 120ms ease, height 120ms ease;
  }
}

@media (max-width: 680px) {
  .sm-gallery__filters {
    gap: 8px;
  }

  .sm-gallery__chip {
    padding-inline: 14px;
    font-size: 13.5px;
  }
}

/* ==========================================================================
   How I Help — /how-i-help/
   --------------------------------------------------------------------------
   Three service pillars, each a full section band rather than a card in a
   grid. The homepage `#services` strip, `/programmes/` and `/research/` all
   use `.sm-service-grid` N-up, so building this page the same way would have
   been the homepage section at a second URL. A repeating two-column band with
   the photograph alternating sides is a rhythm the site does not have yet and
   gives each pillar the room a service page needs.

   Nothing here introduces a token, a typeface or a spacing value. The heading
   scale, eyebrow, intro, meta line, buttons and section grounds are all the
   existing components; only the grid that arranges them is new.
   ========================================================================== */

/* The page opens straight onto a section rather than a hero, so the full 108px
   of `.sm-section` padding would sit directly under the 83px sticky header and
   read as dead space. Same treatment, and the same two steps down, as
   `#research.sm-section` at style.css:5536. */
#how-i-help.sm-section {
  padding-top: 64px;
}

/* `.sm-opening-media` carries no grid of its own — each page that uses it
   declares its own column split, because the ratio depends on how long that
   page's headline runs (compare `#programmes` at style.css:5651 and `#research`
   at style.css:5465). Copy leads here, so the copy column is the wider one. */
#how-i-help .sm-opening-media {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  align-items: center;
  gap: clamp(46px, 6vw, 76px);
}

#how-i-help .sm-opening-media > * {
  margin-block-start: 0;
}

.sm-pillar {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  align-items: center;
  gap: clamp(46px, 6vw, 76px);
}

/* ⚠️ WordPress prints `:where(…is-layout-flow) > * { margin-block-start: 24px }`
   inline into every page's <head>, which is invisible when previewing this file
   on its own. Left alone it pushes the photograph 24px out of true against the
   copy column, because `align-items: center` centres each grid item including
   its margin. `.sm-impact`, `.sm-hero__grid` and `.sm-gita__frames` have all
   been caught by this. */
.sm-pillar > * {
  margin-block-start: 0;
}

/* The pillar heading is the sentence the client arrives with, so it is set at
   section scale rather than card scale — but the base clamp tops out at 58px,
   which breaks to five lines inside a ~530px column. (0-2-0) beats the base
   rule's (0-1-0) at style.css:491. */
.sm-pillar .sm-section-title {
  max-width: none;
  margin-bottom: 20px;
  font-size: clamp(30px, 3.1vw, 42px);
}

.sm-pillar .sm-section-intro {
  max-width: none;
}

.sm-pillar__figure {
  margin: 0;
}

.sm-pillar__figure img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 18px 46px rgba(12, 26, 46, 0.13);
}

/* Photograph to the left. `order` rather than a reversed `grid-template-areas`
   so the copy stays first in source order on every band — a phone and a screen
   reader meet the pillar's proposition before its photograph. */
.sm-pillar--flip .sm-pillar__figure {
  order: -1;
}

/* What each pillar covers. A hairline ledger, deliberately not a bulleted list:
   the same device `.sm-pub` uses for publications, so a reader who has seen
   `/research/` already knows how to read it. It is a stock `core/list`, so the
   client adds or removes a line in Gutenberg with no code. */
.sm-pillar__covers {
  margin: 30px 0 0;
  padding: 0;
  border-top: 1px solid var(--sm-border);
  list-style: none;
}

.sm-pillar__covers li {
  padding: 11px 0;
  border-bottom: 1px solid var(--sm-border);
  color: var(--sm-charcoal);
  font-size: 15px;
  line-height: 1.55;
}

.sm-pillar .sm-insight-card__meta {
  margin-top: 26px;
  margin-bottom: 26px;
}

/* --------------------------------------------------------------------------
   Ink-ground corrections, generalised

   `.sm-section--ink p { color: inherit }` is (0-1-1) and outranks every
   single-class component rule, so on a dark ground a gold eyebrow silently goes
   white. That was found once on the Gita section and patched there
   (style.css:4275), then again on `.sm-impact` (style.css:951) and `.sm-contact`
   (style.css:1353) — three copies of one fix. These state it once.

   `--sm-gold-bright` rather than `--sm-gold` for contrast: 4.95:1 on navy
   against the 4.5:1 AA floor, where `--sm-gold` falls under it.

   ⚠️ This comment used to claim these were "verified no-ops on what is already
   live — the only ink sections on the site are `.sm-impact`, `.sm-gita` and
   `.sm-contact` ... none of them contains a `.sm-text-link`". That was only ever
   true of sections carrying those three names. Two ink sections take no extra
   class at all and do contain one, checked against the live pages on
   2026-08-13:

     /how-i-help/                 "Read the research"
     /ai-and-the-future-of-work/  "The four papers behind this"
     /about/                      "Read the four frames"

   So the `.sm-text-link` pair below is live, and it is (0,2,0) against the
   pill's (0,1,0) — it decides the label colour on navy, which is why it now
   says ink. Do not restore the white: `.sm-text-link` is a pale-gold pill as of
   2026-08-13 (style.css:7799) and carries its own ground onto the navy, so a
   white label would be white on `#f2ead7`. The pill is the reason this rule no
   longer needs to know what it is sitting on.
   -------------------------------------------------------------------------- */
.sm-section--ink .sm-eyebrow,
.sm-section--ink .sm-insight-card__meta {
  color: var(--sm-gold-bright);
}

.sm-section--ink .sm-text-link,
.sm-section--ink .sm-text-link:hover {
  color: var(--sm-ink);
}

/* The cross-cutting AI band and the closing note read as one column of prose,
   so they take the reading measure rather than the full container. */
.sm-help-note .sm-section-intro,
.sm-help-note .sm-insight-card__meta {
  max-width: var(--sm-reading);
}

.sm-help-note .sm-insight-card__meta {
  margin-top: 26px;
  margin-bottom: 22px;
}

@media (max-width: 900px) {
  #how-i-help.sm-section {
    padding-top: 52px;
  }

  /* Single class, so it only beats `.sm-pillar` above on source order — which
     is why it lives here at the end of the file and not earlier. Appending the
     base rule after this one would leave the copy column a few pixels wide on a
     phone, which is exactly how `.sm-about__grid` broke (style.css:1043). */
  #how-i-help .sm-opening-media {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .sm-pillar {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .sm-pillar--flip .sm-pillar__figure {
    order: 0;
  }
}

@media (max-width: 680px) {
  #how-i-help.sm-section {
    padding-top: 44px;
  }

  .sm-pillar {
    gap: 32px;
  }

  .sm-pillar__covers li {
    font-size: 14.5px;
  }
}

/* ==========================================================================
   Advisory — /advisory/
   --------------------------------------------------------------------------
   The page `/how-i-help/` has been linking to since 2026-08-03.

   ONE new class. `.sm-advisory-panel` is the only thing here the site did not
   already own, and the reason it earns a name is that nothing in the system is
   a *static* reference panel: `.sm-insight-card` lifts and recolours on hover
   because it is a card you click, `.sm-service-card` wipes a gold bar across
   itself for the same reason. A list of who commissions this work, and a list
   of what sits behind the advice, are neither clickable nor cards. They needed
   a quiet container, so they got one.

   Everything else is borrowed:
     `.sm-gita__frame`   the buyer's sentence beside what is done about it,
                         from the Gita section by way of the Programmes method
                         arc — third use, unchanged
     `.sm-insight-grid`  the three engagement stages
     `.sm-pillar`        the two-column evidence band, with no figure
     `.sm-pillar__covers` the hairline ledger, six times over
     `.sm-contact`       the closing band

   No token, no typeface, no spacing value is introduced.
   ========================================================================== */

/* The page opens straight onto a section rather than a hero, so the full 108px
   of `.sm-section` padding would sit under the 83px sticky header and read as
   dead space. Same treatment and the same two steps down as `#how-i-help`
   (style.css:6596) and `#research` (style.css:5536). */
#advisory.sm-section {
  padding-top: 64px;
}

/* `.sm-opening-media` deliberately carries no grid of its own — every page that
   uses it declares its own split, because the ratio depends on how long that
   page's headline runs. Copy leads here, so copy takes the wider column. */
#advisory .sm-opening-media {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center;
  gap: clamp(46px, 6vw, 76px);
}

/* ⚠️ WordPress prints `:where(…is-layout-flow) > * { margin-block-start: 24px }`
   inline into every page's <head>, which is invisible when previewing this file
   on its own. Left alone it pushes the panel 24px out of true against the copy
   column, because `align-items: center` centres each grid item including its
   margin. `.sm-impact`, `.sm-hero__grid`, `.sm-gita__frames` and `.sm-pillar`
   have all been caught by this one. */
#advisory .sm-opening-media > * {
  margin-block-start: 0;
}

/* The H1 is two sentences rather than the one `.sm-section-title` was scaled
   for, and at the base clamp's 58px it breaks to five lines inside a ~560px
   column. A step down rather than a new scale: the top end moves, the floor and
   the vw slope stay in proportion with the base rule at style.css:491. */
#advisory .sm-section-title {
  font-size: clamp(36px, 3.9vw, 54px);
}

/* --------------------------------------------------------------------------
   The reference panel

   Transparent, not filled, because it appears twice on two different grounds —
   `--white` in the opening and `--stone` in the evidence band — and a single
   fill cannot sit on both. The gold top rule is the tell that distinguishes it
   from `.sm-insight-card`, which starts on `--sm-ink` and only turns gold when
   you hover it. This one is gold from the start and never moves, which is the
   honest signal for something that is information rather than a link.
   -------------------------------------------------------------------------- */
.sm-advisory-panel {
  padding: 30px 30px 32px;
  border: 1px solid var(--sm-border);
  border-top: 3px solid var(--sm-gold);
}

.sm-advisory-panel > * {
  margin-block-start: 0;
}

/* Below `.sm-insight-card h3` at 24px on purpose. The panel sits beside a
   section heading, and matching the card scale would have it competing with the
   H1 it is meant to annotate. */
.sm-advisory-panel h3 {
  margin-bottom: 18px;
  font-size: 20px;
  line-height: 1.3;
}

/* The ledger's own 30px top margin is for standing alone under a paragraph. In
   here the h3 above it already supplies the gap. */
.sm-advisory-panel .sm-pillar__covers {
  margin-top: 0;
}

.sm-advisory-panel .sm-insight-card__meta {
  margin-top: 22px;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   The ledger learns to carry a name

   Nine engagements and five clients are each a name followed by a sentence, so
   the name is bolded. Verified a no-op on what is already live: the only other
   `.sm-pillar__covers` lists on the site are the four `/how-i-help/` pillars,
   and not one of their lines contains a `<strong>`.
   -------------------------------------------------------------------------- */
.sm-pillar__covers li strong {
  color: var(--sm-ink);
  font-weight: 600;
}

/* Directly under `.sm-gita__reading h3`, which already carries a 19px bottom
   margin. (0-2-0), so it beats the ledger's own `margin: 30px 0 0`. */
.sm-gita__reading .sm-pillar__covers {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   Ink-ground correction for the ledger

   The generalised block at style.css:6699 already fixes the eyebrow, the meta
   line and the text link on a dark ground. The ledger had never been used on
   one before this page, so its two hairlines and its charcoal text had never
   been caught. `.sm-pillar__covers li` is (0-1-1) and beats plain inheritance
   from `.sm-section--ink`, which is why the text has to be named again here
   rather than left to cascade.
   -------------------------------------------------------------------------- */
.sm-section--ink .sm-pillar__covers {
  border-top-color: var(--sm-dark-border);
}

.sm-section--ink .sm-pillar__covers li {
  border-bottom-color: var(--sm-dark-border);
  color: rgba(255, 255, 255, 0.76);
}

.sm-section--ink .sm-pillar__covers li strong {
  color: var(--sm-white);
}

/* --------------------------------------------------------------------------
   Engagement stages

   `.sm-insight-card__meta` was written to close a card, so it carries a 38px
   bottom margin. Here it opens one — the stage name is the label you read
   first — and 38px under a 9px line leaves the card looking broken in half.
   -------------------------------------------------------------------------- */
#engagement .sm-insight-card__meta {
  margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   Evidence band

   `.sm-pillar` centres its two columns, which is right when the second one is a
   photograph and wrong when it is a panel: the panel is shorter than the case
   copy, and centred it floats with uneven air above and below.
   -------------------------------------------------------------------------- */
#evidence .sm-pillar {
  align-items: start;
}

@media (max-width: 900px) {
  #advisory.sm-section {
    padding-top: 52px;
  }

  /* Single ID and class, the same weight as the base rule above, so this only
     wins on source order — which is why it lives here at the end of the file.
     Appending the base rule after this one would leave the copy column a few
     pixels wide on a phone, which is exactly how `.sm-about__grid` broke
     (style.css:1043). */
  #advisory .sm-opening-media {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

@media (max-width: 680px) {
  #advisory.sm-section {
    padding-top: 44px;
  }

  .sm-advisory-panel {
    padding: 26px 22px 28px;
  }

  .sm-advisory-panel h3 {
    font-size: 19px;
  }
}

/* ==========================================================================
   Executive Development — /executive-development/
   --------------------------------------------------------------------------
   The page `/how-i-help/` has been linking to since 2026-08-03.

   ZERO new classes. Nothing here is a component; every rule is ID-scoped
   tuning of something the site already owns. The page earns its distinctness
   from its *arrangement*, not from new parts: every other page on this site is
   organised around a roster — publications, programmes, clients, photographs —
   and this one is organised around a single room, and descends into it.

   Borrowed, in order of appearance:
     `.sm-opening-media`     the page-opening split, fourth use
     `.sm-engagement-card`   the ghost-numeral card, homepage-only until now.
                             ⚠️ Its numeral carries a MEASUREMENT, never an
                             index: cohort sizes on the homepage, the room's
                             experience band here. It must never become 01/02/03
     `.sm-gita__frame`       the buyer's sentence beside what was done about it,
                             fourth use, unchanged
     `.sm-pillar`            the two-column band, copy against the panel
     `.sm-advisory-panel`    the static reference panel, second use
     `.sm-pillar__covers`    the hairline ledger, six times over
     `.sm-contact`           the closing band

   No token, no typeface, no spacing value is introduced.
   ========================================================================== */

/* The page opens straight onto a section rather than a hero, so the full 108px
   of `.sm-section` padding would sit under the 83px sticky header and read as
   dead space. Same treatment and the same two steps down as `#advisory`
   (style.css:6796), `#how-i-help` (style.css:6596) and `#research`
   (style.css:5536). */
#executive-development.sm-section {
  padding-top: 64px;
}

/* `.sm-opening-media` deliberately carries no grid of its own — every page that
   uses it declares its own split, because the ratio depends on how long that
   page's headline runs. Copy leads here, so copy takes the wider column. */
#executive-development .sm-opening-media {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  align-items: center;
  gap: clamp(46px, 6vw, 76px);
}

/* ⚠️ WordPress prints `:where(…is-layout-flow) > * { margin-block-start: 24px }`
   inline into every page's <head>, which is invisible when previewing this file
   on its own. Left alone it pushes the photograph 24px out of true against the
   copy column, because `align-items: center` centres each grid item including
   its margin. `.sm-impact`, `.sm-hero__grid`, `.sm-gita__frames` and
   `.sm-pillar` have all been caught by this one. */
#executive-development .sm-opening-media > * {
  margin-block-start: 0;
}

/* The H1 runs to nine words, and at the base clamp's 58px it breaks to four
   lines inside a ~540px column. A step down rather than a new scale: the top
   end moves, the floor and the vw slope stay in proportion with the base rule
   at style.css:491. `max-width` is cleared because the column already bounds
   it. */
#executive-development .sm-section-title {
  max-width: none;
  font-size: clamp(36px, 3.8vw, 52px);
}

/* --------------------------------------------------------------------------
   Who is in the room

   Three tiers, not the homepage's four engagements, so the grid goes 3-up.
   `.sm-engagement-grid` is 2-up at style.css:1115 and that rule is a single
   class — this one is (0,1,1) and wins on weight, not on order.
   -------------------------------------------------------------------------- */
#the-room .sm-engagement-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* The homepage's numerals are short — 41, 33, 150+ — and sit comfortably at
   76px. These are ranges of up to six glyphs ("25–30+") in a column a third of
   the container wide, where 76px would run under the card's own heading before
   `overflow: hidden` clipped it. Scaled to the column instead. */
#the-room .sm-engagement-card__metric {
  font-size: clamp(38px, 3.4vw, 52px);
}

/* --------------------------------------------------------------------------
   What running one takes

   `.sm-pillar` centres its two columns, which is right when the second one is a
   photograph and wrong when it is a panel: the panel is shorter than the copy
   beside it, and centred it floats with uneven air above and below. Same
   correction `#evidence` needed (style.css:6928).
   -------------------------------------------------------------------------- */
#formats .sm-pillar {
  align-items: start;
}

/* --------------------------------------------------------------------------
   What happens in the room

   The closing pull line is his own sentence, set in the intro scale rather than
   as a heading: it is a statement of intent, not a section title, and promoting
   it to Playfair would have it competing with the three session headings above
   it. Held to the reading measure so it does not run the full container.
   -------------------------------------------------------------------------- */
#sessions .sm-section-intro {
  max-width: var(--sm-reading);
}

#sessions .sm-gita__frames + .sm-section-intro {
  margin-top: 46px;
}

@media (max-width: 900px) {
  #executive-development.sm-section {
    padding-top: 52px;
  }

  /* Single ID and class, the same weight as the base rules above, so these only
     win on source order — which is why they live here at the end of the file.
     Appending the base rule after this one would leave the copy column a few
     pixels wide on a phone, which is exactly how `.sm-about__grid` broke
     (style.css:1043). */
  #executive-development .sm-opening-media {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  #the-room .sm-engagement-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  #executive-development.sm-section {
    padding-top: 44px;
  }

  /* The ghost numeral is decoration at this width and the card is at its
     narrowest, so it steps back rather than crowding the heading. */
  #the-room .sm-engagement-card__metric {
    font-size: 40px;
  }
}

/* ==========================================================================
   Speaking — /speaking/
   --------------------------------------------------------------------------
   The last of the three pages `/how-i-help/` has been linking to. With this
   one the site has no dead internal link left.

   ZERO new classes. The one idea here is a reuse: `.sm-case` (style.css:5239)
   was built for `/research/`, where its bordered panel holds a journal
   citation. On this page the same panel holds a *talk billing* — role, title,
   event, venue, date, room. The site already owned a component meaning "the
   formal record of a piece of work", and a keynote billing is that shape, so
   nothing had to be invented to carry it.

   ⚠️ `.sm-case` hardcodes `--sm-white` text and `--sm-dark-border` rules, so it
   only works on an ink ground. `#masterclass` is ink and must stay ink.

   Borrowed, in order of appearance:
     `.sm-opening-media`   the page-opening split, fifth use
     `.sm-case`            the talk billing — second use, first outside /research/
     `.sm-pillar`          the two-column band, carrying a dated engagement
                           rather than an offer for the first time
     `.sm-pillar__covers`  the hairline ledger, three times over
     `.sm-contact`         the closing band

   No token, no typeface, no spacing value is introduced.
   ========================================================================== */

/* The page opens straight onto a section rather than a hero, so the full 108px
   of `.sm-section` padding would sit under the 83px sticky header and read as
   dead space. Same treatment and the same two steps down as `#advisory`
   (style.css:6796) and `#executive-development`. */
#speaking.sm-section {
  padding-top: 64px;
}

/* `.sm-opening-media` deliberately carries no grid of its own — every page that
   uses it declares its own split, because the ratio depends on how long that
   page's headline runs. The photograph is the proof on this page, so it takes a
   slightly wider share than it does elsewhere. */
#speaking .sm-opening-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(46px, 6vw, 76px);
}

/* ⚠️ WordPress prints `:where(…is-layout-flow) > * { margin-block-start: 24px }`
   inline into every page's <head>, which is invisible when previewing this file
   on its own. Left alone it pushes the photograph 24px out of true against the
   copy column, because `align-items: center` centres each grid item including
   its margin. `.sm-impact`, `.sm-hero__grid`, `.sm-gita__frames` and
   `.sm-pillar` have all been caught by this one. */
#speaking .sm-opening-media > * {
  margin-block-start: 0;
}

/* The H1 runs to ten words. At the base clamp's 58px it breaks to four lines in
   a ~500px column. A step down rather than a new scale: the top end moves, the
   floor and the vw slope stay in proportion with the base rule at
   style.css:491. */
#speaking .sm-section-title {
  max-width: none;
  font-size: clamp(34px, 3.6vw, 50px);
}

/* --------------------------------------------------------------------------
   The talk billing

   On `/research/` the case sits under a section heading and needs its own top
   rule to separate the two. Here it follows an eyebrow and an H2 with the same
   spacing, so only the gap above changes.
   -------------------------------------------------------------------------- */
#masterclass .sm-case {
  margin-top: 46px;
}

/* `.sm-case__title` is sized for a journal article title, which runs long. A
   talk title is shorter and sits beside a narrative column, so it holds the
   lower half of its own clamp rather than dominating the panel. */
#masterclass .sm-case__title {
  font-size: clamp(23px, 2.2vw, 29px);
}

/* --------------------------------------------------------------------------
   The two engagement bands

   `.sm-pillar` centres its columns, which is right when both sides are about
   the same height. The ledger under each band's copy makes the left column
   taller than the photograph, and centred that leaves the picture floating.
   -------------------------------------------------------------------------- */
#hric .sm-pillar,
#bits .sm-pillar {
  align-items: start;
}

/* The band headings are section-scale on `/how-i-help/`, where each pillar is
   an offer. Here they annotate a photograph, so they step down to sit closer to
   the ledger they introduce. Single ID and class beats the `.sm-pillar
   .sm-section-title` rule at style.css:6636 on weight, not on order. */
#hric .sm-pillar .sm-section-title,
#bits .sm-pillar .sm-section-title {
  font-size: clamp(28px, 2.9vw, 38px);
}

@media (max-width: 900px) {
  #speaking.sm-section {
    padding-top: 52px;
  }

  /* Single ID and class, the same weight as the base rule above, so this only
     wins on source order — which is why it lives here at the end of the file.
     Appending the base rule after this one would leave the copy column a few
     pixels wide on a phone, which is exactly how `.sm-about__grid` broke
     (style.css:1043). */
  #speaking .sm-opening-media {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

@media (max-width: 680px) {
  #speaking.sm-section {
    padding-top: 44px;
  }
}

/* ==========================================================================
   AI and the Future of Work — /ai-and-the-future-of-work/
   --------------------------------------------------------------------------
   The fourth nav child, and the first one that is not a service. The client's
   decision `[user 2026-08-03]` was "three pillars, not four — AI becomes a
   cross-cutting band rather than a fourth thing he sells", so this page argues
   a position and then routes to the three pillars. It is the only page on the
   site that links to all three.

   ZERO new classes. The one idea here is a reuse: `.sm-expertise__grid` with a
   sticky `.sm-expertise__statement` beside an accordion (style.css:1192) has
   been homepage-only. It is right for this page for a reason that is not
   decorative — on a page arguing that AI is a question rather than a product,
   the thesis stays fixed on screen while the evidence for it scrolls past. The
   structure makes the argument.

   Borrowed, in order of appearance:
     `.sm-opening-media`      the opening split, sixth use
     `.sm-advisory-panel`     his three-line argument, verbatim
     `.sm-expertise__grid`    the sticky thesis and the accordion — 2nd use
     `details.sm-expertise-item`  native <details>, no JavaScript
     `.sm-pillar__covers`     the hairline ledger, twice
     `.sm-insight-grid`       the three routing cards
     `.sm-contact`            the closing band

   No token, no typeface, no spacing value is introduced.
   ========================================================================== */

/* The page opens straight onto a section rather than a hero, so the full 108px
   of `.sm-section` padding would sit under the 83px sticky header and read as
   dead space. Same treatment and the same two steps down as every other
   dedicated page. */
#ai-and-the-future-of-work.sm-section {
  padding-top: 64px;
}

/* Copy leads and the panel annotates it, so copy takes the wider column — the
   same split `#advisory` uses, for the same reason. */
#ai-and-the-future-of-work .sm-opening-media {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center;
  gap: clamp(46px, 6vw, 76px);
}

/* ⚠️ WordPress prints `:where(…is-layout-flow) > * { margin-block-start: 24px }`
   inline into every page's <head>, which is invisible when previewing this file
   on its own. Left alone it pushes the panel 24px out of true against the copy
   column, because `align-items: center` centres each grid item including its
   margin. `.sm-impact`, `.sm-hero__grid`, `.sm-gita__frames` and `.sm-pillar`
   have all been caught by this one. */
#ai-and-the-future-of-work .sm-opening-media > * {
  margin-block-start: 0;
}

/* The H1 is two sentences. At the base clamp's 58px it breaks to five lines in
   a ~560px column. A step down rather than a new scale: the top end moves, the
   floor and the vw slope stay in proportion with the base rule at
   style.css:491. */
#ai-and-the-future-of-work .sm-section-title {
  max-width: none;
  font-size: clamp(35px, 3.7vw, 51px);
}

/* --------------------------------------------------------------------------
   The sticky thesis

   `.sm-expertise__statement` is `position: sticky; top: 120px` (style.css:1200)
   and the homepage relies on the section being tall enough for that to do
   anything. Five accordion rows at 80px closed is 400px, which is shorter than
   the statement column on a wide screen — so the stick would never engage and
   the rule would be decoration. A floor on the list keeps the travel real
   without forcing the rows themselves to grow.
   -------------------------------------------------------------------------- */
#what-changes .sm-expertise-list {
  min-height: 460px;
}

/* The statement's headline is sized for "One business system." on the homepage
   (style.css:1215). This one is a full sentence in the same ~420px column, so
   it steps down. Scoped by id — (1,2,0) against the homepage rule's (0,2,0) —
   so it wins on specificity and does not depend on sitting later in the file. */
#what-changes .sm-expertise__statement .sm-section-title {
  font-size: clamp(30px, 2.9vw, 38px);
}

@media (max-width: 900px) {
  #ai-and-the-future-of-work.sm-section {
    padding-top: 52px;
  }

  /* Single ID and class, the same weight as the base rule above, so this only
     wins on source order — which is why it lives here at the end of the file.
     Appending the base rule after this one would leave the copy column a few
     pixels wide on a phone, which is exactly how `.sm-about__grid` broke
     (style.css:1043). */
  #ai-and-the-future-of-work .sm-opening-media {
    grid-template-columns: 1fr;
    gap: 34px;
  }

}

@media (max-width: 680px) {
  #ai-and-the-future-of-work.sm-section {
    padding-top: 44px;
  }

  /* ⚠️ 680, not 900. The expertise grid stacks and the statement drops to
     `position: static` at style.css:1906-1912, which sits inside the 680px
     block — measured, after an earlier version of this rule assumed 900 and
     removed the sticky travel across the whole 681-900px band while the
     statement was still sticky. Below 680 the floor is just dead space. */
  #what-changes .sm-expertise-list {
    min-height: 0;
  }
}

/* ==========================================================================
   One-to-One Coaching — /one-to-one-coaching/
   --------------------------------------------------------------------------
   The fifth and last child of the "How I Help" dropdown, and the shortest page
   on the site by some distance. That is deliberate: coaching has the thinnest
   evidence of anything here — MASTER-BRIEF §3.7 has had its audience, format,
   cadence and credential open since 2026-07-28 — so the page names only what is
   evidenced and says plainly what it is not. Restraint is the argument.

   ZERO new classes, and almost no new CSS: a short page built from the heading
   grammar, `.sm-insight-grid`, two `.sm-pillar__covers` ledgers and the closing
   band needs very little help. Only three things are tuned.
   ========================================================================== */

/* The page opens straight onto a section rather than a hero, so the full 108px
   of `.sm-section` padding would sit under the 83px sticky header and read as
   dead space. Same two steps down as every other dedicated page. */
#one-to-one-coaching.sm-section {
  padding-top: 64px;
}

/* ⚠️ The opening ran as a single column when this page shipped, because no
   photograph of a one-to-one conversation exists in the project and `/advisory/`
   set the precedent of running without one rather than using filler. `[user
   2026-08-08]` asked for an image, so it is now the standard two-column split
   with the most honest available frame — two people talking in a corridor. The
   copy still leads, so copy takes the wider column. */
#one-to-one-coaching .sm-opening-media {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(46px, 6vw, 76px);
}

/* ⚠️ WordPress prints `:where(…is-layout-flow) > * { margin-block-start: 24px }`
   inline into every page's <head>, which is invisible when previewing this file
   on its own. Left alone it pushes the photograph 24px out of true against the
   copy column, because `align-items: center` centres each grid item including
   its margin. `.sm-impact`, `.sm-hero__grid`, `.sm-gita__frames` and
   `.sm-pillar` have all been caught by this one. */
#one-to-one-coaching .sm-opening-media > * {
  margin-block-start: 0;
}

/* The H1 is one short sentence and now sits in a ~520px column rather than the
   full container, so it holds a smaller top end than the base rule at
   style.css:491 and clears its own measure. */
#one-to-one-coaching .sm-section-title {
  max-width: none;
  font-size: clamp(34px, 3.5vw, 48px);
}

/* --------------------------------------------------------------------------
   Testimonials

   Nothing needed. `[user 2026-08-08]` this page now carries the same reviews
   block as the homepage, so it inherits the whole slider treatment — including
   the 1280px width escape at style.css:4177, which is why the section is built
   with `.sm-testimonials` on the band and `.sm-testimonials__inner` on the
   container rather than the plain `.sm-container` every other section here uses.

   An earlier version showed a single pinned quote and capped
   `.sm-quote-set--grid` to 620px so the lone card would not stretch the full
   container. That rule was removed with the quote it existed for; the slider
   uses `.sm-quote-set--slider` and never hit it.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  #one-to-one-coaching.sm-section {
    padding-top: 52px;
  }

  /* Single ID and class, the same weight as the base rule above, so this only
     wins on source order — which is why it lives at the end of the file. */
  #one-to-one-coaching .sm-opening-media {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

@media (max-width: 680px) {
  #one-to-one-coaching.sm-section {
    padding-top: 44px;
  }
}

/* ==========================================================================
   ABOUT PAGE — the opening band.

   `.sm-opening-media` deliberately carries no grid of its own — every page
   that uses it declares its own split, because the ratio depends on how long
   that page's headline runs (compare `#advisory` at style.css:6845 and
   `#how-i-help` at style.css:6646).

   `[user 2026-08-07: "left side content is too height seems not aligned not
   looking - i want you to spread title in 2 lines 75% width and below heading
   left side content and right side image"]`. The eyebrow and the H1 used to
   sit in the left grid cell above the four paragraphs, so the headline wrapped
   inside a ~502px column and ran to three lines. That left the copy column
   829px tall against a 626px photograph, and `align-items: center` then
   dropped the photograph 101px below the top of the copy — the mis-alignment
   in the screenshot. The headline is its own band now, above the split; only
   the four paragraphs share the row with the photograph.
   ========================================================================== */

/* 75% of the 1080px container is 810px, which is past `.sm-section-title`'s
   790px cap at style.css:492 — so the cap is lifted here, or the headline
   would stop 20px short of the width it was asked for. Swept 1600 → 901px:
   two lines at every width. 70% also holds two lines throughout and 65% breaks
   to three at 1440 and 1280, so 75% sits inside the band rather than on its
   edge. `text-wrap: balance` (style.css:158) evens the two lines out. */
#about .sm-opening-head {
  max-width: 75%;
}

#about .sm-opening-head .sm-section-title {
  max-width: none;
  margin-bottom: 0;
}

/* `align-items: stretch`, not `center` and not `start`. It is the grid default,
   stated because it is load-bearing here and a later editor would otherwise read
   its absence as an oversight.

   `start` was the obvious fix and it is wrong for this band. Four paragraphs are
   a lot of copy, and the narrower the column the taller they run: measured, the
   copy column goes 567px at 1440 → 650 at 1280 → 760 at 1024 → 815 at 901, while
   a fixed-ratio photograph *shrinks* with its column over the same range. At
   1440 a 4:5 photograph finished within 10px of the copy, but by 1024 it fell
   309px short and left a hole down the right of the band. `#formats .sm-pillar`
   (style.css:7097) and `#hric .sm-pillar` (style.css:7240) take `start` because
   their copy is two or three lines; this one is not comparable.

   Stretched, the photograph is exactly as tall as the copy at every width, so
   tops and bottoms both line up and there is no hole to explain. The crop
   tightens as the column narrows, which enlarges him rather than shrinking him:
   the visible window runs 944px of the 1600 at 1440 down to 471px at 901, and
   his figure (x 640–790) stays inside it at every width in between.

   `margin-top` has to be stated. The base rule at style.css:5528 zeroes it for a
   band that opens a page, and WordPress's injected
   `:where(…is-layout-flow) > * { margin-block-start: 24px }` is too weak to put
   anything back. Neither is right now that the headline sits above. */
#about .sm-opening-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
  align-items: stretch;
  gap: clamp(46px, 6vw, 76px);
  margin-top: clamp(34px, 3.4vw, 46px);
}

/* ⚠️ WordPress prints `:where(…is-layout-flow) > * { margin-block-start: 24px }`
   inline into every page's <head>, which is invisible when previewing this
   file on its own. Left alone it pushes the photograph 24px out of true
   against the copy column. `.sm-impact`, `.sm-hero__grid`, `.sm-gita__frames`
   and `.sm-pillar` have all been caught by this one. */
#about .sm-opening-media > * {
  margin-block-start: 0;
}

/* The two heights that carry the stretch above. The figure is the grid item, so
   the row gives it a definite height; `height: 100%` passes that down to the
   `img`, which the base rule at style.css:5545 otherwise leaves at `auto`.

   `sm-gallery-006` is a 1600x1066 landscape frame and this column wants a
   portrait, so `cover` crops horizontally. Nothing is ever cropped vertically —
   the box is always taller than it is wide here — which makes the Y in
   `object-position` inert. 45% puts his torso, measured at x≈715 of 1600 with
   the shirt spanning 640–790, at ~44% across the visible window: just left of
   centre, with the room he is gesturing into on the right. Same device as
   `.sm-about__media img` at style.css:1111.

   Note what is no longer here: the `box-shadow: none` + `filter: drop-shadow`
   pair this rule used to carry, and a `width: 92%` cap on the figure. Both
   existed only because attachment 551 was a transparent cut-out — a box-shadow
   needs a rectangle to draw around, and a cut-out sits narrower than its own
   box. An opaque photograph takes the whole column and the base `box-shadow` at
   style.css:5546. */
#about .sm-opening-media__figure {
  height: 100%;
}

#about .sm-opening-media__figure img {
  height: 100%;
  object-fit: cover;
  object-position: 45% 50%;
}

@media (max-width: 900px) {
  /* Single ID and class, the same weight as the base rules above, so these only
     win on source order — which is why they live here at the end of the
     rule's own block, matching every other page's opening split. */
  #about .sm-opening-head {
    max-width: none;
  }

  #about .sm-opening-media {
    grid-template-columns: 1fr;
    gap: 34px;
    margin-top: 28px;
  }

  /* One column, so there is no copy column left to match and `height: 100%`
     resolves against an auto-height parent — which is to say, back to `auto`.
     The photograph takes an explicit ratio instead. 4:5 across the full width is
     443px tall at 390, about the same as the cut-out it replaces. */
  #about .sm-opening-media__figure,
  #about .sm-opening-media__figure img {
    height: auto;
  }

  #about .sm-opening-media__figure img {
    aspect-ratio: 4 / 5;
  }
}

/* ==========================================================================
   ABOUT PAGE — the career ledger.

   TWO new classes, and neither is an invention. `.sm-path-list` is a variant of
   the Research page's publication ledger: the rows are `.sm-pub`, the year
   stamps are `.sm-pub__year` and the metadata lines are
   `.sm-insight-card__meta`. `.sm-doors` is a layout wrapper only — it exists so
   four `.sm-advisory-panel` cells reach equal height inside stock
   `core/columns`, because unequal panels leave their gold top rules ragged.

   That reuse is the argument, not a shortcut. This site already renders "work
   over time" as a dated ledger with a left rail of years — that is its own
   vernacular for a record. Casting the career in the same grammar says the
   career is evidence, which is the whole thesis of the page. A dotted vertical
   timeline would have said the opposite: that it is a story about a person.

   No numbered markers. The years already carry the order, and a life is not a
   numbered process.
   ========================================================================== */

.sm-path-list {
  border-top: 1px solid var(--sm-border);
}

/* The default `.sm-pub` rail is 68px, sized for a folio number. A year span
   ("2017 - 2023") needs roughly twice that before it wraps. */
.sm-path-list .sm-pub {
  padding: 30px 0 32px;
  grid-template-columns: minmax(132px, 0.26fr) minmax(0, 1fr);
  gap: 34px;
}

/* `.sm-pub:hover` washes white, which is invisible on this page's white ground.
   Stone reads as a held row without introducing a colour. */
.sm-path-list .sm-pub:hover {
  background: var(--sm-stone);
}

/* `.sm-pub__year` is a 32px group heading on the Research page. Here it sits
   inside the row, so it comes down to sit level with the role beside it. */
.sm-path-list .sm-pub__year {
  margin-bottom: 0;
  font-size: clamp(23px, 2.2vw, 28px);
}

.sm-path-list h3 {
  margin: 0 0 7px;
  font-size: clamp(19px, 1.8vw, 22px);
  line-height: 1.25;
}

.sm-path-list .sm-insight-card__meta {
  margin-bottom: 15px;
}

.sm-path-list p:last-child {
  margin-bottom: 0;
}

/* The four disciplines. `.sm-advisory-panel` already draws the bordered panel
   with a gold top rule; it only needs a grid to sit in, and stock `core/columns`
   supplies that. The gap keeps the gold rules from reading as one long line. */
.sm-doors {
  margin-top: 8px;
}

.sm-doors .wp-block-column {
  display: flex;
}

.sm-doors .sm-advisory-panel {
  width: 100%;
}

.sm-doors .sm-insight-card__meta {
  margin-bottom: 16px;
}

.sm-doors p:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .sm-path-list .sm-pub {
    padding: 26px 0 28px;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .sm-path-list .sm-pub__year {
    font-size: 21px;
  }
}


/* ==========================================================================
   `.sm-text-link` becomes a button
   --------------------------------------------------------------------------
   `[user 2026-08-13: "links in multiple places - please add button style
   similar to that section ... keep button no like textual links - please
   proceed do for all links like this"]`

   `.sm-text-link` (style.css:955) drew an uppercase, letter-spaced label with a
   `↗` and nothing around it. It read as a caption, not as something to click.
   It is the site's second CTA pattern and the busiest one: 45 instances across
   nine pages, verified against the rendered markup, of which 35 are calls to
   action and become pills here.

   Nothing in the markup changes. Every one of the 45 is a bare
   `<a class="sm-text-link">` typed inside a `core/paragraph` — never a
   `core/button`, so there is no block attribute to patch, no Gutenberg validity
   to risk, and the client goes on editing these as ordinary text with a link.
   The two that are raw PHP rather than blocks (index.php:26, 404.php:13) are
   carried along by the same rule.

   ONE FAMILY, TWO SIZES. The hero's third-tier pill sets the colours; the
   header CTA (style.css:346 + style.css:4802) sets the geometry, because these
   are secondary navigation and 35 hero-sized pills would flatten the page:

     hero tier 3   46px tall, 13px label, sentence case, `→`
     these         42px tall, 12px label, sentence case, `↗`

   So no new token and no new number enters the file. `border-radius` and the
   fill are the only declarations here without a precedent to copy.

   Sentence case rather than the uppercase it had: every other button in this
   theme is sentence case, and uppercase is what `.sm-eyebrow` and
   `.sm-service-card__label` use to mean "label". A button that keeps the label
   typography is a fourth type; the pill shape already does the separating from
   body copy that the uppercase used to do.

   `↗` is kept rather than swapped for the block button's `→` mask. Half of
   these leave the site — the DOI papers open in a new tab — and the diagonal
   is the only thing that says so. It also keeps this tier legible as a
   different, smaller class of action than the hero's `→` pills.

   Deliberately NO hover lift, which is the one place this departs from the
   hero pill. `.sm-insight-card:hover` already lifts its whole card 5px
   (style.css:1315) and `.sm-service-card:hover` runs a gold rule across its top
   edge (style.css:930), so a pill that also lifted would be motion inside
   motion on the same pointer. The fill change carries the hover on its own.

   Placed at the end of the file rather than edited at source: the base rule sits
   above the ADDITIONS banner (style.css:2024), which states that no rule above
   it is modified. Same specificity as that rule (0,1,0), so source order is what
   makes this win — this block must stay below it.
   ========================================================================== */
.sm-text-link {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(169, 130, 51, 0.38);
  border-radius: 999px;
  justify-content: center;
  background: var(--sm-gold-pale);
  letter-spacing: 0.02em;
  text-transform: none;
  transition: background-color 200ms ease, border-color 200ms ease;
}

/* `color` is not optional here, even though the resting rule above already sets
   ink. `a:hover { color: var(--sm-gold) }` (style.css:133) applies to every link
   on the site, and omitting `color` from this block lets it through: measured
   gold `#a98233` on the `#e7dabe` hover fill, which is 2.9:1 and fails AA. The
   pill has its own ground, so it opts out of the site-wide hover recolour and
   lets the fill carry the hover instead. */
.sm-text-link:hover {
  border-color: var(--sm-gold);
  background: #e7dabe;
  color: var(--sm-ink);
}

/* The ten DOI lines on /research/ are the exception, and the reason this is a
   rule rather than a blanket restyle. Their label IS the DOI —
   "doi.org/10.1108/PR-02-2023-0121" — so a pill around one reads as a citation
   someone has boxed, not as a button. They keep the plain-text treatment.

   `.sm-pub__link` is the class the research page already puts on that paragraph
   to mark it as the DOI line (style.css:5253, written by
   deployment/patch-research-page.php:225), so this exception is named by the
   markup's own semantics. (0,2,0) beats the rule above wherever they meet,
   including inside the media query below. */
.sm-pub__link .sm-text-link {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* And the hover with it. Without this the pill's `color: var(--sm-ink)` would
   reach the citations at (0,2,0) and take away the gold hover they have always
   had from `a:hover` (style.css:133) — the citations have no fill of their own,
   so the colour change is the only feedback they get. */
.sm-pub__link .sm-text-link:hover {
  color: var(--sm-gold);
}

/* The first breakpoint this class has ever had. The longest labels — "See how
   the rest of the work fits together", "See all research and publications" —
   measure ~285-330px as pills, against roughly 300px of card content box at
   390px. Rather than let one spill out of its card, a long label wraps: the
   vertical padding gives a two-line pill a rounded shape to sit in, and
   `min-height` still holds every single-line pill at 42px, so nothing in the
   common case moves. */
@media (max-width: 680px) {
  .sm-text-link {
    max-width: 100%;
    padding: 10px 18px;
    text-align: center;
  }
}


/* ==========================================================================
   Card labels come up to 10px
   --------------------------------------------------------------------------
   `[user 2026-08-13: "section tag like i marked seems very less size inrease
   just little bit so that they look good for all pages"]` — marked on the
   engagement cards' sector label and the insight cards' journal line.

   The small gold caps that label a card ran at 9px, the smallest type on the
   site apart from the rotated hero rail. Two classes draw them and both marked
   examples are one of the two:

     .sm-engagement-card__sector   homepage #programmes, /executive-development/
     .sm-insight-card__meta        every page — 10 on the homepage, 22 on
                                   /programmes/, 20 on /research/

   Both go to 10px, which is where `.sm-service-card__label` (style.css:934)
   already sits. So this is not a new step in the scale, it REMOVES one: the
   label family was 11 / 10 / 9 / 9 and is now 11 / 10. Nothing else moves and
   no new value enters the file.

   Tracking is deliberately left alone at 0.19em and 0.17em. Bigger type at the
   same tracking is ~11% wider, and several of these labels already wrap — four
   lines on the widest `/programmes/` card — so the wrap was measured after the
   change rather than pre-empted by also trimming the tracking. Two variables
   would have made a regression impossible to attribute. If a label ever does
   gain a line, 0.14em is the value to reach for; it is already in the file at
   `.sm-hero__note p` (style.css:762).

   ⚠️ Four rules set this size, not two. `#themes .sm-service-card >
   .sm-insight-card__meta` (style.css:5117) and its `#programme-formats` twin
   (style.css:5749) restate it behind an id at (1,2,1) and are edited at source;
   they cannot be reached from here. Both carry a note pointing back.

   Placed at the end of the file because both base rules sit above the ADDITIONS
   banner (style.css:2024), which states no rule above it is modified. Same
   specificity as those rules, so source order is what makes this win.
   ========================================================================== */
.sm-engagement-card__sector,
.sm-insight-card__meta {
  font-size: 10px;
}