/* ============================================================
   Tiedrich Global — Subpage sections (About / Services / Resources)
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   Split hero — part dark, part light. Replaces the full-bleed
   photographic heroes: the copy sits on the dark half, the light
   half carries either a contained photograph or the brand mark.
   ──────────────────────────────────────────────────────────── */

.split-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: stretch;
  min-height: 34rem;
}
.split-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 11rem 4rem 5rem 5%;
}
.split-hero__title {
  font-size: 3.25rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-white);
  margin: 0 0 1.25rem;
  max-width: 22ch;
}
.split-hero__text {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 2.25rem;
  max-width: 46ch;
}
.split-hero__actions { display: flex; gap: 0.875rem; flex-wrap: wrap; }

.split-hero__aside {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 5% 3rem 0;
  background: var(--color-surface);
  overflow: hidden;
}
.split-hero__aside img {
  width: 100%;
  max-width: 30rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xl);
}
/* mark-only variant, where no photograph belongs */
/* Straight and at full strength, 24 Aug — Lee flagged it as lopsided on both
   the Services and Resources heroes, and Ed asked for the fade off too. */
/* Scoped past `.split-hero__aside img`, which otherwise forces the mark into a
   4:5 cover box and stretches it. */
.split-hero__aside .split-hero__mark {
  position: relative;
  width: 15rem;
  height: auto;
  max-width: 60%;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  pointer-events: none;
}

@media (max-width: 991px) {
  .split-hero__aside .split-hero__mark { width: 10rem; max-width: 40%; }
}

@media (max-width: 991px) {
  .split-hero { grid-template-columns: 1fr; min-height: 0; }
  .split-hero__copy { padding: 8.5rem 6vw 3.5rem; }
  .split-hero__title { font-size: 2.125rem; }
  .split-hero__aside { padding: 2.5rem 6vw; min-height: 14rem; }
  .split-hero__aside img { max-width: 24rem; aspect-ratio: 4 / 3; }
}
@media (max-width: 575px) { .split-hero__title { font-size: 1.75rem; } }

/* ────────────────────────────────────────────────────────────
   Statement block — oversized centred pull quote
   ──────────────────────────────────────────────────────────── */

.statement { text-align: center; max-width: 52rem; margin: 0 auto; }
.statement__lead {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.32;
  color: var(--color-text);
  margin: 0 0 1.75rem;
}
.statement__body {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
  max-width: 44rem;
  margin: 0 auto 2.25rem;
}
@media (max-width: 767px) { .statement__lead { font-size: 1.375rem; } }

/* ────────────────────────────────────────────────────────────
   Credential cards — icon tile + title + copy
   ──────────────────────────────────────────────────────────── */

/* Seven credentials: two rows of three with the last centred beneath,
   the same six-track trick the services grid uses. */
.cred-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
}
/* Compact enough that all seven cards land in one screenful. */
.cred-grid > .cred-flip { grid-column: span 2; min-height: 9.5rem; }
.cred-grid > .cred-flip:nth-child(7) { grid-column: 3 / span 2; }

.cred-flip .flip__face--front {
  justify-content: flex-start;
  gap: 0;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.25rem 1.125rem;
  border-top: 3px solid var(--color-teal);
}
/* Logo-derived lattice, teal on white — the same rhombus used on the dark
   bands, so the module reads as part of the brand rather than a plain card.
   Masked to fade in from the right so it never sits under the wordmark. */
.cred-flip .flip__face--front::before {
  background:
    url('../assets/img/texture-diamond-teal.svg') right -12px top -20px / 62px 85px repeat,
    linear-gradient(100deg, rgba(37,138,160,0) 30%, rgba(37,138,160,0.16) 100%);
  opacity: 0.34;
  animation: none;
  -webkit-mask-image: linear-gradient(100deg, transparent 34%, #000 92%);
  mask-image: linear-gradient(100deg, transparent 34%, #000 92%);
}
.cred-flip .flip__face--back {
  padding: 1.25rem;
  justify-content: center;
  border-top: 3px solid var(--color-teal);
}
.cred-flip .flip__answer { font-size: 0.875rem; line-height: 1.5; }

@media (max-width: 991px) {
  .cred-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cred-grid > .cred-flip,
  .cred-grid > .cred-flip:nth-child(7) { grid-column: span 2; min-height: 11rem; }
}
@media (max-width: 640px) {
  .cred-grid { grid-template-columns: 1fr; }
  .cred-grid > .cred-flip,
  .cred-grid > .cred-flip:nth-child(7) { grid-column: auto; min-height: 0; }
}
.cred-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 0.875rem;
  border-radius: 8px;
  background: rgba(37, 138, 160, 0.14);
  border: 1px solid rgba(37, 138, 160, 0.28);
  color: var(--color-teal-ink);
}
.cred-card__title { font-size: 1rem; letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 0.5rem; }
.cred-card__text  { font-size: 0.9375rem; line-height: 1.65; color: var(--color-text-secondary); }

/* ────────────────────────────────────────────────────────────
   Pillars — number + title left, body + payoff callout right
   ──────────────────────────────────────────────────────────── */

.pillars { display: flex; flex-direction: column; gap: 1.5rem; }
.pillar {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 3.5rem;
  padding: 2.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
}
.pillar__num {
  display: block;
  font-size: 0.8125rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  color: var(--color-teal);
  margin-bottom: 0.875rem;
}
.pillar__title { font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 0.875rem; }
.pillar__kicker { font-size: 0.9375rem; line-height: 1.6; color: var(--color-text-secondary); }
.pillar__body   { font-size: 1rem; line-height: 1.7; color: var(--color-text); margin: 0 0 1.75rem; }

.payoff {
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--color-teal);
  background: rgba(37, 138, 160, 0.06);
  border-radius: 0 var(--radius-button) var(--radius-button) 0;
}
.payoff__label {
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin: 0 0 0.5rem;
}
.payoff__text { font-size: 0.9375rem; line-height: 1.65; color: var(--color-text); }

@media (max-width: 991px) {
  .pillar { grid-template-columns: 1fr; gap: 1.75rem; padding: 1.75rem; }
  .pillar__title { font-size: 1.25rem; }
}

/* ────────────────────────────────────────────────────────────
   Masonry photo gallery (About)
   ──────────────────────────────────────────────────────────── */

.masonry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.masonry__col { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.masonry img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-image); }
.masonry__tile { overflow: hidden; border-radius: var(--radius-image); }

@media (max-width: 767px) {
  .masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .masonry__col:last-child { display: none; }
}
@media (max-width: 480px) { .masonry { grid-template-columns: 1fr; } .masonry__col:last-child { display: flex; } }

/* ────────────────────────────────────────────────────────────
   Contact form on the closing CTA card
   ──────────────────────────────────────────────────────────── */

.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-form__field--full { grid-column: 1 / -1; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-input);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.9375rem;
}
.contact-form textarea { min-height: 7.5rem; resize: vertical; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(255, 255, 255, 0.45); }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-teal);
  box-shadow: var(--focus-ring);
}
.contact-form__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.contact-form__note { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); }
@media (max-width: 575px) { .contact-form { grid-template-columns: 1fr; } }

/* ────────────────────────────────────────────────────────────
   Problem quote cards + navy statement bar (Services)
   ──────────────────────────────────────────────────────────── */

.problem-card {
  padding: 1.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.problem-card__mark { font-family: Georgia, 'Times New Roman', serif; font-size: 2.25rem; line-height: 0.7; color: var(--color-teal); }
.problem-card__text { margin-top: 0.875rem; font-size: 1rem; font-weight: var(--weight-semibold); line-height: 1.5; color: var(--color-text); }

.statement-bar {
  margin-top: 1.5rem;
  padding: 2rem 2.5rem;
  background: var(--color-navy);
  border-radius: var(--radius-card);
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--color-white);
}
@media (max-width: 767px) { .statement-bar { font-size: 1.0625rem; padding: 1.5rem; } }

/* Benefit rows — check tile + title + copy */
.benefit {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.75rem 2rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.benefit__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 8px;
  background: rgba(37, 138, 160, 0.10);
  color: var(--color-teal);
}
.benefit__title { font-size: 1.125rem; letter-spacing: -0.01em; margin: 0 0 0.5rem; }
.benefit__text  { font-size: 0.9375rem; line-height: 1.65; color: var(--color-text-secondary); }
.benefits { display: flex; flex-direction: column; gap: 1rem; max-width: 56rem; margin: 0 auto; }

/* ────────────────────────────────────────────────────────────
   Proof band — dark, credentials + portrait + press marquee
   ──────────────────────────────────────────────────────────── */

.proof { background: var(--color-navy-900); }
.proof__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; }
.proof__text { font-size: 1rem; line-height: 1.75; color: rgba(255, 255, 255, 0.8); margin: 0 0 2rem; }
.proof__list { display: flex; flex-direction: column; }
.proof__item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.78);
}
.proof__item:first-child { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.proof__item svg { flex-shrink: 0; margin-top: 2px; color: var(--color-teal); }
.proof__item strong { color: var(--color-white); font-weight: var(--weight-bold); }
.proof__quote { margin-top: 2rem; }
.proof__quote blockquote {
  font-size: 1rem;
  font-style: italic;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 0.625rem;
}
.proof__quote figcaption { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); }
.proof__portrait img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 20%;
  border-radius: var(--radius-card);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
/* The press band used to sit inside this dark section; it now runs as its own
   white .press band below it, matching Home, About and Resources. */

@media (max-width: 991px) {
  .proof__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ────────────────────────────────────────────────────────────
   Publications & speaking (Resources)
   ──────────────────────────────────────────────────────────── */

.pub-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.75rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-teal);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pub-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.pub-card__meta { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.pub-card__date { font-size: 0.8125rem; color: var(--color-text-secondary); }
.pub-card__title { font-size: 1.125rem; letter-spacing: -0.01em; line-height: 1.35; margin: 0; }
.pub-card__text { font-size: 0.9375rem; line-height: 1.65; color: var(--color-text-secondary); }
.pub-card__link { margin-top: auto; font-size: 0.875rem; font-weight: var(--weight-semibold); text-decoration: none; }

.venue { position: relative; overflow: hidden; border-radius: var(--radius-image); }
.venue img { width: 100%; height: 260px; object-fit: cover; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.venue:hover img { transform: scale(1.04); }
.venue__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 3rem 1.25rem 1.125rem;
  background: linear-gradient(to top, rgba(3,17,33,0.85), rgba(3,17,33,0));
  color: var(--color-white);
}
.venue__kind {
  display: block;
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-sky);
  margin-bottom: 0.25rem;
}
.venue__name { font-family: var(--font-heading); font-size: 1.0625rem; font-weight: var(--weight-bold); }

.speaking__note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

/* ────────────────────────────────────────────────────────────
   Legal pages — shells until Tiedrich Global supplies the text
   ──────────────────────────────────────────────────────────── */

.legal { padding-top: 10rem; }

/* Lee's documents open with an "[Insert logo]" line, so both legal pages lead
   with the lockup before the title. */
.legal__logo { display: inline-block; margin-bottom: 2.5rem; }
.legal__logo img { height: 84px; width: auto; display: block; }

.legal__dates {
  margin: 0 0 2.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
.legal p { font-size: 1rem; line-height: 1.75; color: var(--color-text); margin: 0 0 1.125rem; }
.legal__section { margin-top: 3rem; }
.legal__h2 {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 1.25rem;
  padding-bottom: 0.875rem;
  border-bottom: 3px solid var(--color-teal);
}
.legal__num {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: var(--weight-bold);
  color: var(--color-teal-ink);
}
.legal__h3 {
  font-size: 1rem;
  letter-spacing: 0;
  margin: 1.75rem 0 0.75rem;
  color: var(--color-navy);
}
.legal__list { margin: 0 0 1.125rem; padding-left: 1.25rem; }
.legal__list li { font-size: 1rem; line-height: 1.75; color: var(--color-text); margin-bottom: 0.75rem; }
.legal__list--defs { list-style: none; padding-left: 0; }
.legal__list--defs li {
  padding-left: 1rem;
  border-left: 2px solid rgba(37, 138, 160, 0.35);
}
.legal__list--defs strong { color: var(--color-navy); }
/* Her all-caps blocks stay legally prominent without shouting typographically. */
.legal__caps {
  padding: 1.125rem 1.25rem;
  background: var(--color-surface);
  border-left: 3px solid var(--color-teal);
  border-radius: 0 var(--radius-button) var(--radius-button) 0;
  font-size: 0.9375rem;
  line-height: 1.7;
}
.legal__address { font-style: normal; line-height: 1.8; color: var(--color-text); }

@media (max-width: 767px) {
  .legal { padding-top: 8rem; }
  .legal__logo img { height: 62px; }
  .legal__h2 { font-size: 1.1875rem; }
}
.legal__pending {
  margin: 2rem 0;
  padding: 1.5rem 1.75rem;
  border-left: 3px solid var(--color-teal);
  background: var(--color-surface);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.legal__pending-label {
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin: 0 0 0.5rem;
}
.legal__pending-text { font-size: 0.9375rem; line-height: 1.7; color: var(--color-text); }
@media (max-width: 991px) { .legal { padding-top: 9rem; } }

/* ────────────────────────────────────────────────────────────
   Contact page — details on the dark half, form on the light
   ──────────────────────────────────────────────────────────── */

.contact-hero { min-height: 0; }
.contact-hero__aside { padding: 8rem 5% 4rem 4rem; align-items: flex-start; }

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0.5rem 0 1rem;
}
.contact-details li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
}
.contact-details svg { flex-shrink: 0; color: var(--color-teal); }
.contact-details a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.contact-details a:hover { color: var(--color-teal); }
.contact-details__note { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); }

/* the form sits on the light half here, so its fields invert */
.contact-form--light { width: 100%; }
.contact-form--light input,
.contact-form--light textarea {
  background: var(--color-white);
  border-color: var(--color-border);
  color: var(--color-text);
}
.contact-form--light input::placeholder,
.contact-form--light textarea::placeholder { color: #9AA1A9; }
.contact-form--light .contact-form__note { color: var(--color-text-secondary); }

@media (max-width: 991px) {
  .contact-hero__aside { padding: 2.5rem 6vw 3rem; }
}

/* ────────────────────────────────────────────────────────────
   Full publication index — the complete record, grouped by year,
   sitting below the curated highlight cards.
   ──────────────────────────────────────────────────────────── */

.section-title--sub {
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin: 4rem 0 0.5rem;
}

.pub__link--static {
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  color: var(--color-text-secondary);
}

.pub-index { display: flex; flex-direction: column; }

.pub-index__year {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 2.5rem 0 0.25rem;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-teal-ink);
}
.pub-index__year:first-child { margin-top: 0; }
.pub-index__year::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(37, 138, 160, 0.45), rgba(37, 138, 160, 0));
}

.pub-index__list { list-style: none; margin: 0; padding: 0; }
.pub-index__list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.5rem 2rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
}
.pub-index__list li > a,
.pub-index__untitled {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--color-text);
  text-decoration: none;
}
.pub-index__list li > a:hover { color: var(--color-teal-ink); text-decoration: underline; }
.pub-index__untitled { color: var(--color-text-secondary); }
.pub-index__list li > span:last-child {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-text-secondary);
  text-align: right;
}

@media (max-width: 767px) {
  .pub-index__list li { grid-template-columns: 1fr; gap: 0.25rem; }
  .pub-index__list li > span:last-child { text-align: left; }
}

/* Engagement rows carry longer venue badges than the press list, so the
   badge column is fixed and the titles line up. */
#speaking .pub { grid-template-columns: 11.5rem 1fr auto; }
@media (max-width: 767px) {
  #speaking .pub { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────────
   Photo hero — full-bleed service photograph behind the page
   title. Used on the service pages, where each service has its
   own supplied image in assets/img/services/.
   ──────────────────────────────────────────────────────────── */

.photo-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(30rem, 66vh, 42rem);
  /* .container carries no gutter of its own — sections supply it */
  padding: 11rem var(--section-px) 4.5rem;
  overflow: hidden;
  background: var(--color-navy-900);
  color: var(--color-white);
}
.photo-hero__img {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Navy scrim — dark at the bottom left where the copy sits, clearing toward
   the top right so the photograph still reads. Carries the text contrast. */
.photo-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  /* The first layer is the text ground: it has to hold WCAG contrast over five
     different photographs, so it stays heavy across the copy column and only
     falls away past it. */
  background:
    linear-gradient(100deg, rgba(3, 17, 33, 0.95) 0%, rgba(3, 17, 33, 0.91) 38%, rgba(4, 23, 44, 0.56) 62%, rgba(4, 23, 44, 0.12) 100%),
    linear-gradient(to top, rgba(3, 17, 33, 0.52) 0%, rgba(3, 17, 33, 0.10) 45%, rgba(6, 34, 71, 0.34) 100%),
    linear-gradient(120deg, rgba(37, 138, 160, 0) 62%, rgba(37, 138, 160, 0.22) 100%);
}
.photo-hero__copy { position: relative; z-index: 1; }
.photo-hero__title {
  font-size: 3.25rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-white);
  margin: 0 0 1.25rem;
  max-width: 20ch;
  text-shadow: 0 2px 24px rgba(3, 17, 33, 0.5);
}
.photo-hero__text {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.93);
  margin: 0 0 2.25rem;
  max-width: 46ch;
}
.photo-hero__actions { display: flex; gap: 0.875rem; flex-wrap: wrap; }

@media (max-width: 991px) {
  .photo-hero { min-height: 0; padding: 9rem 6vw 3.5rem; }
  .photo-hero__title { font-size: 2.125rem; }
  /* the subject sits centre-right in every supplied service photo */
  .photo-hero__img { object-position: 62% center; }
}
@media (max-width: 575px) {
  .photo-hero__title { font-size: 1.75rem; }
  .photo-hero__actions .btn { flex: 1 1 100%; }
}

/* Mirrored variant. The group in the About hero photograph sits left of centre,
   so the copy and the scrim flip to the right — otherwise the headline lands
   straight on top of Lee and the people she is pictured with, which is the
   exact complaint that took these photos out of the homepage hero. */
.photo-hero--right .photo-hero__copy { padding-left: 50%; }
.photo-hero--right .photo-hero__scrim {
  background:
    linear-gradient(260deg, rgba(3, 17, 33, 0.95) 0%, rgba(3, 17, 33, 0.91) 38%, rgba(4, 23, 44, 0.56) 62%, rgba(4, 23, 44, 0.12) 100%),
    linear-gradient(to top, rgba(3, 17, 33, 0.52) 0%, rgba(3, 17, 33, 0.10) 45%, rgba(6, 34, 71, 0.34) 100%),
    linear-gradient(240deg, rgba(37, 138, 160, 0) 62%, rgba(37, 138, 160, 0.22) 100%);
}
@media (max-width: 991px) {
  /* no room to sit the copy beside the subject — back to the standard scrim */
  .photo-hero--right .photo-hero__copy { padding-left: 0; }
  .photo-hero--right .photo-hero__scrim {
    background:
      linear-gradient(to top, rgba(3, 17, 33, 0.92) 0%, rgba(3, 17, 33, 0.78) 45%, rgba(4, 23, 44, 0.55) 100%);
  }
}

/* The legal pages lead with the lockup in the document itself, so the fixed
   corner chip would read as a second, duplicate logo. Nav still carries Home. */
.page-legal .corner-logo { display: none; }

/* ────────────────────────────────────────────────────────────
   Publication cover tiles. No cover art exists for any of these,
   so each card leads with a branded plate instead of a photo:
   the hex-mark lattice over a per-publisher wash.
   ──────────────────────────────────────────────────────────── */

.pub-card__cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 7;
  margin: -1.75rem -1.75rem 0.25rem;
  border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0;
  overflow: hidden;
  background: linear-gradient(118deg, #0A2447 0%, #14406F 46%, #1E6A83 100%);
  border-bottom: 3px solid var(--color-teal);
}
.pub-card__cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../assets/img/texture-diamond.svg');
  background-size: 74px 101px;
  opacity: 0.18;
}
.pub-card__cover-mark {
  position: relative;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
  text-align: center;
  padding: 0 1rem;
}
/* one wash per publisher so the eight cards are told apart at a glance */
.pub-card__cover--report { background: linear-gradient(118deg, #04172C 0%, #0B3B6F 52%, #1B6070 100%); }
.pub-card__cover--book   { background: linear-gradient(118deg, #0A2447 0%, #1A62A8 60%, #258AA0 100%); }
.pub-card__cover--journal{ background: linear-gradient(118deg, #082F58 0%, #1B6070 55%, #2FA0B6 100%); }
.pub-card__cover--eu     { background: linear-gradient(118deg, #031121 0%, #14406F 58%, #54759A 100%); }

@media (max-width: 767px) {
  .pub-card__cover { aspect-ratio: 16 / 6; }
  .pub-card__cover-mark { font-size: 1rem; }
}

/* Watch & listen cards. Lee could not find the video links, which were small
   ghost buttons mid-page, so every recording now sits in one grid. */
.watch {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.375rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-teal);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.watch:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.watch__play {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(37, 138, 160, 0.14);
  border: 1px solid rgba(37, 138, 160, 0.30);
  color: var(--color-teal-ink);
  font-size: 0.75rem;
  padding-left: 2px;
}
.watch:hover .watch__play { background: var(--color-teal); border-color: var(--color-teal); color: var(--color-white); }
.watch__body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.watch__title {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: var(--weight-bold);
  line-height: 1.35;
  color: var(--color-text);
}
.watch__meta { font-size: 0.8125rem; line-height: 1.45; color: var(--color-text-secondary); }

/* ── Service pages: "What we solve" and "Why Lee" ─────────────────────────────
   Added 18 Aug. The problem cards carry Lee's executive-challenge wording
   verbatim, so they already include their own quotation marks — no decorative
   glyph here, unlike the homepage flip cards. */
.problem-card__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: var(--weight-bold);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-navy-900, #173061);
  margin: 0 0 0.625rem;
}
.problem-card__title + .problem-card__text { margin-top: 0; font-weight: var(--weight-regular); color: var(--color-text-muted, #5A6472); font-size: 0.9375rem; }

.cred-strip {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3.5rem;
  align-items: center;
}
.cred-strip__text {
  margin: 0 0 1.75rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-muted, #5A6472);
  max-width: 48ch;
}
.cred-strip__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cred-strip__item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.9375rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.cred-strip__item:first-child { border-top: 1px solid var(--color-border); }
.cred-strip__item svg { flex-shrink: 0; margin-top: 3px; color: var(--color-teal); }

@media (max-width: 900px) {
  .cred-strip { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* ── About hero: copy on navy at left, photograph at right ────────────────────
   Added 24 Aug. The base .split-hero puts a padded, rounded card on a light
   aside; this variant runs the photograph edge to edge with NO scrim over it.
   Columns are even rather than 1.15/0.85 so the summit group photo keeps enough
   of its width to show all six people — a narrower cell crops the end two. */
.split-hero--photo { grid-template-columns: 1fr 1fr; }
.split-hero--photo .split-hero__aside {
  padding: 0;
  background: var(--color-navy-900);
  min-height: 0;
}
/* The photo keeps its own 4:3 box, so nothing is ever cropped and all six
   people survive at every width. The copy column is taller than 4:3 at most
   desktop sizes, so the navy simply continues above and below the photograph
   — which is the column's own ground, not an overlay on the image. */
.split-hero--photo .split-hero__aside img {
  width: 100%;
  height: auto;
  max-width: none;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  box-shadow: none;
}
@media (max-width: 991px) {
  .split-hero--photo { grid-template-columns: 1fr; }
  .split-hero--photo .split-hero__aside { padding: 0; min-height: 0; }
  .split-hero--photo .split-hero__aside img { height: auto; aspect-ratio: 4 / 3; max-width: none; }
}

/* ── Three Pillars as flip cards ───────────────────────────────────────────────
   24 Aug. Lee asked for the pillars in the same format as the Credentials cards
   above them, to cut the amount of standing text. Front: number, title, the grey
   kicker. Back: the Business Payoff FIRST, then the longer body, per her
   "Do Business Pay-Off first and then learn more". The lattice sits on the LEFT
   here (the credential cards carry it on the right) because she asked for it on
   the left side of these boxes. */
.pillars--flip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.pillar-flip { min-height: 33rem; }

.pillar-flip .flip__face--front {
  justify-content: flex-start;
  gap: 0;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--color-teal);
  padding: 2rem 1.75rem 1.375rem;
}
.pillar-flip .flip__face--front::before {
  background:
    url('../assets/img/texture-diamond-teal.svg') left -12px top -20px / 62px 85px repeat,
    linear-gradient(260deg, rgba(37,138,160,0) 30%, rgba(37,138,160,0.16) 100%);
  opacity: 0.34;
  animation: none;
  -webkit-mask-image: linear-gradient(260deg, transparent 34%, #000 92%);
  mask-image: linear-gradient(260deg, transparent 34%, #000 92%);
}
.pillar-flip .pillar__title { font-size: 1.25rem; margin: 0 0 0.75rem; }
.pillar-flip .pillar__kicker { font-size: 0.9375rem; }

.pillar-flip .flip__face--back { padding: 1.75rem 1.625rem; gap: 1.125rem; overflow-y: auto; }
.pillar-flip .flip__face--back .payoff {
  background: rgba(255, 255, 255, 0.08);
  border-left-color: var(--color-sky);
  padding: 1rem 1.125rem;
}
.pillar-flip .flip__face--back .payoff__label { color: var(--color-sky); }
.pillar-flip .flip__face--back .payoff__text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}
.pillar-flip .flip__face--back .pillar__body {
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

@media (max-width: 991px) {
  .pillars--flip { grid-template-columns: 1fr; }
  .pillar-flip { min-height: 26rem; }
}


/* OECD / OECD.AI publication covers carry the supplied OECD.AI + GPAI lockup
   instead of a text mark (24 Aug). The lockup is ~6:1, so it is width-led and
   padded rather than filling the 16:7 tile. */
.pub-card__cover-logo {
  width: min(78%, 17rem);
  height: auto;
  max-height: 62%;
  object-fit: contain;
}

/* Publication covers that carry the real cover artwork (24 Aug). Anchored to the
   top so the issuing body's mark and the report title survive the 16:7 crop —
   a centred crop cuts the logo off. */
.pub-card__cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The tile is 16:7 and these covers are near-square, so only about half the
     artwork's height survives the crop. Centre suits artwork whose title sits in
     the middle (the 2026 report); the 2025 cover carries its own
     `object-position: center 9%` inline, because its summit mark and title sit
     in the top half and a centred crop would cut both. */
  object-position: center;
}

/* Lee's role on each publication, under the title (24 Aug). Several of these
   have many contributors — the 2026 safety report alone runs to about a hundred
   — so the card must never imply sole authorship. */
.pub-card__role {
  margin: 0.3125rem 0 0;
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-teal);
}

/* A light cover tile, for publisher logos drawn in black rather than white.
   The MBR lockup is black type with a red mark, so it needs paper, not navy. */
.pub-card__cover--light {
  background: var(--color-white);
  border-bottom: 3px solid var(--color-teal);
}
.pub-card__cover--light .pub-card__cover-logo { width: min(74%, 15rem); }

/* Springer's supplied lockup ships on its own flat ground (#171A36 sampled from
   the file). The tile is set to the same colour so the artwork sits edge to edge
   with no visible seam, and the logo is placed rather than stretched — the file
   is only 374px wide and a full-bleed crop would upscale it and go soft. */
.pub-card__cover--springer {
  background: #171A36;
  border-bottom: 3px solid var(--color-teal);
}
.pub-card__cover--springer .pub-card__cover-logo { width: min(58%, 11.5rem); }

/* The ODI lockup is white on the institute's own blue, sampled as #0F2484 —
   same approach as Springer: match the tile so there is no seam. */
.pub-card__cover--odi {
  background: #0F2484;
  border-bottom: 3px solid var(--color-teal);
}
.pub-card__cover--odi .pub-card__cover-logo { width: min(46%, 9rem); }

/* Recognitions list (24 Aug). Two columns on desktop, one on mobile; each entry
   marked with the same teal rule used by the panel lists elsewhere. */
.recog {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 3rem;
}
.recog li {
  break-inside: avoid;
  position: relative;
  padding: 0 0 0 1.375rem;
  margin: 0 0 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.recog li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 1.5px;
  background: var(--color-teal);
}
@media (max-width: 767px) { .recog { columns: 1; } }



/* Services hero: the navy runs the full width and the portrait sits on top of
   it, rather than the copy having its own band beside a light panel. 24 Aug. */
.split-hero--overlay .split-hero__aside {
  background: transparent;
  padding: 3rem 5% 3rem 0;
}
.split-hero--overlay .split-hero__aside img {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
}
@media (max-width: 991px) {
  .split-hero--overlay .split-hero__aside { padding: 0 6vw 3rem; }
}

/* Resources hero: the credential-card ground — white, 3px teal top rule and the
   hex-mark lattice washing across — carried the full width of the hero in place
   of the navy band. 24 Aug. */
.split-hero--lattice {
  position: relative;
  grid-template-columns: 1fr;
  isolation: isolate;
  background: var(--color-white);
  border-top: 3px solid var(--color-teal);
  overflow: hidden;
}
.split-hero--lattice::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    url('../assets/img/texture-diamond-teal.svg') right -12px top -20px / 62px 85px repeat,
    linear-gradient(100deg, rgba(37,138,160,0) 26%, rgba(37,138,160,0.34) 100%);
  /* stronger than the credential cards carry — this ground is a whole hero
     rather than a 9rem card, so it needs the extra weight to read. 24 Aug. */
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(100deg, transparent 26%, #000 88%);
  mask-image: linear-gradient(100deg, transparent 26%, #000 88%);
  pointer-events: none;
}
.split-hero--lattice .split-hero__copy { padding-right: 5%; max-width: 60rem; }
.split-hero--lattice .split-hero__title { color: var(--color-navy-900); }
.split-hero--lattice .split-hero__text { color: var(--color-text-secondary); }

/* Contact reuses the Resources hero ground, but keeps its two columns: copy and
   details on the left, the form on the right, both sitting on the lattice. 24 Aug. */
.contact-hero.split-hero--lattice { grid-template-columns: 1.05fr 0.95fr; }
.contact-hero.split-hero--lattice .split-hero__copy { max-width: none; padding-right: 3rem; }
.contact-hero.split-hero--lattice .contact-hero__aside { background: transparent; }
.contact-hero.split-hero--lattice .contact-details li,
.contact-hero.split-hero--lattice .contact-details a { color: var(--color-text-secondary); }
.contact-hero.split-hero--lattice .contact-details a:hover { color: var(--color-teal); }
@media (max-width: 991px) {
  .contact-hero.split-hero--lattice { grid-template-columns: 1fr; }
  .contact-hero.split-hero--lattice .split-hero__copy { padding-right: 6vw; }
}