/* ============================================================
   About Us — Leadership (design grid)
   Fluid, mobile-first architecture. Scoped to .dg-page.dg-leadership.
   Values derived from Figma "Jazwares Corporate Updates" wireframes.
   Fluid anchors: min @ 360px design  ->  max @ 1680px content (1920/2560).
   Content caps at 1680px then auto-centers (margins 120@1920, 440@2560).
   Grid shifts via min-width media queries: 768 / 1024 / 1440
   ============================================================ */

:root {
  /* ===== Brand colors (static) ===== */
  --color-primary: #001e60;
  /* header/footer navy */
  --color-accent: #2b66d2;
  /* tab active text */
  --color-accent-strong: #1d52e1;
  /* bio button + avatar ring */
  --color-light: #6ac0e7;
  /* hero accent / active tab */
  --color-bg: #ffffff;
  --color-bg-alt: #f5f8fc;
  --color-heading: #333333;
  --color-text: #666666;
  --color-border: #e0e0e0;
  --color-border-strong: rgba(0, 0, 0, 0.58);

  /* ===== Voice card tokens ===== */
  --color-voice-ink: #000;
  --color-voice-card-bg: rgba(217, 217, 217, 0.30);
  --color-voice-avatar-bg: rgba(217, 217, 217, 0.60);
  --color-quote-disc: #2a251f;
  --color-quote-border: #54c8e8;
  /* bio page quote block top/bottom border */
  --color-placeholder-bg: #d5d5d5;
  /* card/portrait image placeholder */
  --transition-card: border-color 0.15s ease, box-shadow 0.15s ease;

  /* ===== Font families ===== */
  --font-base: 'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Comfortaa', 'Inter', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* ===== Fluid typography  (min @360  ->  max @1680 content) =====
     preferred = vw slope + rem offset, interpolated linearly 360->1680 */
  /* About Us hero heading: 22.5px @360 -> 27.099px @768 (held to 2560).
     line-height ratio 1.216 (32.959/27.099). */
  --fs-hero-eyebrow: clamp(22.5px, (100vw - 360px) * 4.599 / 408 + 22.5px, 27.099px);
  --fs-heading: clamp(24px, 0.45vw + 1.40rem, 30px);
  /* 24 -> 30 (fluid) */
  --fs-body: clamp(14px, 0.15vw + 0.84rem, 16px);
  /* 14 -> 16 (fluid) */
  --fs-exec-name: 17px;
  /* stepped: 17 thru 1439, -> 24 @1440 */
  --fs-exec-title: 12px;
  /* stepped: 12 thru 1439, -> 16 @1440 */
  --fs-btn: 10.92px;
  /* stepped: 10.92 thru 1439, -> 18.21 @1440 */

  /* ===== Fluid container — content area = cards bounding box =====
     Figma side margins: 16@360, 21@768/1024, 120@1920, 440@2560.
     max-width = content + 2*pad lets the box reach 1680 then auto-center. */
  --container-max: 1680px;
  --container-pad: clamp(16px, 1.23vw + 0.725rem, 21px);
  /* 16 -> 21 */

  /* ===== Fluid section rhythm  (Figma desktop: 70 / 26 / 44) ===== */
  --space-section: clamp(40px, 2.27vw + 1.99rem, 70px);
  /* section padding */
  --space-heading: clamp(16px, 0.76vw + 0.83rem, 26px);
  /* h2 -> sub-text */
  --space-block: clamp(28px, 1.21vw + 1.48rem, 44px);
  /* sub-text -> grid */

  /* ===== Component scaling (min @360 -> max @1680) ===== */
  --card-radius: clamp(6px, 0.30vw + 0.31rem, 10px);
  /* 6 -> 10 */
  --card-border: clamp(0.6px, 0.05vw, 1px);
  /* 0.6 -> 1 */
  --btn-border: clamp(0.68px, 0.035vw + 0.55px, 1.14px);
  /* 0.68 -> 1.14 */
  --btn-gap: clamp(5.46px, 0.28vw + 0.28rem, 9.1px);
  /* 5.46 -> 9.1 (fluid) */
  --btn-pad-y: 8.19px;
  /* stepped: 8.19 thru 1439, -> 13.66 @1440 */
  --btn-pad-x: 16.38px;
  /* stepped: 16.38 thru 1439, -> 27.31 @1440 */

  /* ===== Grid gaps (overridden per breakpoint below) ===== */
  --gap-exec: 24px;
  --gap-video: clamp(36px, 6vw, 70px);
  --gap-avatar-x: clamp(24px, 3.97vw + 8.52px, 39px);
  /* 24px @390 → 39px @768, fluid — no hard step */
  --gap-avatar-y: 20px;
  --gap-testimonial: 16px;
  --transition-ui: background 0.15s ease, color 0.15s ease;
}

.dg-page.dg-leadership {
  background: var(--color-bg);
  font-family: var(--font-base);
  color: var(--color-text);
}

.dg-page.dg-leadership *,
.dg-page.dg-leadership *::before,
.dg-page.dg-leadership *::after {
  box-sizing: border-box;
}

/* Constrained, fluid content shell (spec: .container).
   Box width = 1680 content + 2*pad, so the inner content reaches exactly
   1680px, then the whole shell auto-centers (margins grow past ~1722px). */
.dg-page.dg-leadership .lt-shell {
  width: 100%;
  max-width: calc(var(--container-max) + (var(--container-pad) * 2));
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ---------------- Hero + tabs ---------------- */
.dg-page.dg-leadership .lt-hero {
  position: relative;
  width: 100%;
  min-height: clamp(220px, 34vw, 520px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.dg-page.dg-leadership .lt-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  /* height: 900px; */
  object-fit: fill;
}

.dg-page.dg-leadership .lt-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(0, 30, 96, 0) 30%,
      rgba(0, 30, 96, 0.35) 60%,
      #fff 100%);
}

.dg-page.dg-leadership .lt-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dg-page.dg-leadership .lt-hero__eyebrow {
  margin: 0;
  /* Same look at every size as 2560: full-curve dome, centered text, pulled
     down 14px. Height tracks the font (ratio 1.922) and the pull-down tracks
     the height so the proportions stay identical from mobile to 2560.
     Width spans center of "Our Story" to center of "History" (tab-aligned;
     >=1920 width is overridden to the 305px that includes the tab gap). */
  box-sizing: border-box;
  position: relative;
  top: clamp(11.62px, (100vw - 360px) * 2.38 / 408 + 11.62px, 14px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: clamp(189.178px, (100vw - 360px) * 90.822 / 408 + 189.178px, 280px);
  height: clamp(43.25px, (100vw - 360px) * 8.843 / 408 + 43.25px, 52.093px);
  text-align: center;
  background: var(--color-accent);
  color: #fff;
  font-size: var(--fs-hero-eyebrow);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.216;
  /* full curved dome: broad rounded top arc, flat bottom meeting the tab bar */
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  letter-spacing: 0.2px;
}

.dg-page.dg-leadership .lt-hero__tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 1;
  background: var(--color-primary);
  padding-block: 8px;
}

.dg-page.dg-leadership .lt-tab {
  flex: 0 0 clamp(106px, 13vw, 146px);
  width: clamp(106px, 13vw, 146px);
  height: clamp(23px, 3vw, 35px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0;
  cursor: pointer;
  transition: var(--transition-ui);
}

.dg-page.dg-leadership .lt-tab:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dg-page.dg-leadership .lt-tab.is-active {
  background: var(--color-light);
  color: var(--color-primary);
}

/* ---------------- Sections / headings ---------------- */
.dg-page.dg-leadership .lt-section {
  padding-block: var(--space-section);
}

.dg-page.dg-leadership .lt-section--team {
  background: var(--color-bg-alt);
}

.dg-page.dg-leadership .lt-loading,
.dg-page.dg-leadership .lt-tab-empty {
  text-align: center;
  color: #99a3b3;
  padding: 60px 16px;
  font-style: italic;
}

.dg-page.dg-leadership .lt-heading {
  text-align: center;
  margin-bottom: var(--space-block);
}

.dg-page.dg-leadership .lt-heading h2 {
  margin: 0 0 var(--space-heading);
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--fs-heading);
  font-weight: 700;
  line-height: 1.1;
}

.dg-page.dg-leadership .lt-heading p,
.dg-page.dg-leadership .lt-section-intro {
  width: 100%;
  max-width: 913px;
  margin: 0 auto;
  text-align: center;
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.65;
}

/* ---------------- Executive cards ---------------- */
.dg-page.dg-leadership .lt-exec-grid {
  display: grid;
  width: 100%;
  /* Fluid single card: scales ~288px @320 up to ~720px @760, then the
     768 breakpoint switches to the 2-column fixed layout. */
  grid-template-columns: min(100%, clamp(288px, 100vw - 32px, 720px));
  justify-content: center;
  gap: var(--gap-exec);
}

.dg-page.dg-leadership .lt-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 320px;
  /* stepped: 320 thru 1024, -> 534 @1440 */
  background: #fff;
  border: var(--card-border) solid var(--color-border-strong);
  border-radius: var(--card-radius);
  overflow: hidden;
}

.dg-page.dg-leadership .lt-card__media {
  width: 100%;
  /* Height tracks the fluid card width at ~1.8 ratio: 160px @320 -> 400px @760.
     Uses the same (100vw - 32px) basis as the grid column so the photo stays
     proportional across the whole 320-760 range. */
  height: auto;
  /* background: #d5d5d5; */
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}

.dg-page.dg-leadership .lt-card__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.dg-page.dg-leadership .lt-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(17px, 2vw, 29px);
}

.dg-page.dg-leadership .lt-card__name {
  margin: 0 0 12px;
  color: #000;
  font-family: var(--font-display);
  font-size: var(--fs-exec-name);
  font-weight: 700;
  line-height: 1.1;
}

.dg-page.dg-leadership .lt-card__title {
  margin: 0 0 auto;
  color: #000;
  font-family: var(--font-base);
  font-size: var(--fs-exec-title);
  font-weight: 300;
  line-height: 1.4;
}

.dg-page.dg-leadership .lt-btn-bio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: var(--btn-gap);
  margin-top: clamp(20px, 3vw, 52px);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 0;
  outline: var(--btn-border) solid var(--color-accent-strong);
  outline-offset: calc(var(--btn-border) * -1);
  border-radius: 999px;
  background: transparent;
  color: var(--color-accent-strong);
  font-family: var(--font-base);
  font-size: var(--fs-btn);
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  transition: var(--transition-ui);
}

.dg-page.dg-leadership .lt-btn-bio:hover {
  background: var(--color-accent-strong);
  color: #fff;
}

/* ---------------- Maverick videos ---------------- */
.dg-page.dg-leadership .lt-section--exec {
  padding-bottom: clamp(40px, 6vw, 70px);
}

.dg-page.dg-leadership .lt-section--video {
  padding-top: 0;
}

.dg-page.dg-leadership .lt-section--video .lt-heading {
  margin-bottom: clamp(28px, 4vw, 44px);
}

.dg-page.dg-leadership .lt-video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-video);
}

.dg-page.dg-leadership .lt-video {
  margin: 0 auto;
  width: 100%;
  max-width: 600px;
  /* 1-col cap; -> 830 each at 2-col @1440 */
}

.dg-page.dg-leadership .lt-video__thumb {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 360 / 450;
  /* mobile portrait (Figma 360x450); -> 16/9 @768 */
  padding: 0;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}

.dg-page.dg-leadership .lt-video__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* show full frame (no crop); 16:9 fills at >=768 */
  display: block;
}

.dg-page.dg-leadership .lt-video__label {
  position: absolute;
  top: 14px;
  left: 16px;
  right: 16px;
  color: #fff;
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 600;
  text-align: left;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.dg-page.dg-leadership .lt-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(54px, 5vw, 72px);
  height: clamp(54px, 5vw, 72px);
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
}

.dg-page.dg-leadership .lt-video__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--color-accent);
}

.dg-page.dg-leadership .lt-video__caption {
  margin-top: 14px;
  text-align: center;
  color: var(--color-text);
  font-size: clamp(12px, 0.95vw, 14px);
  line-height: 1.55;
}

/* ---------------- Leadership team avatars ---------------- */
.dg-page.dg-leadership .lt-people-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--gap-avatar-x);
  row-gap: var(--gap-avatar-y);
  /* Mobile: keep the shell's page margin and ADD grid padding on top. Padding
     scales as a viewport percentage anchored at 19px @390 (19/390 = 4.87vw), so
     it stays fluid up to the 768 breakpoint: ~17.5px @360, 19px @390, ~37px @768.
     Floored at the 360 value, capped at the 768 value. */
  padding-inline: clamp(17.5px, 4.87vw, 37.4px);
}

/* Each member tile is 144 x 244 on mobile (avatar stays a 144px circle). */
.dg-page.dg-leadership .lt-person {
  text-align: center;
  min-height: 244px;
}

.dg-page.dg-leadership .lt-person__avatar {
  width: 100%;
  max-width: 144px;
  /* stepped: 144 thru 1024, -> 263 @1440 */
  aspect-ratio: 1 / 1;
  margin: 0 auto 14px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--color-accent-strong);
}

.dg-page.dg-leadership .lt-person__avatar img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.dg-page.dg-leadership .lt-person__name {
  margin: 0 0 4px;
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 700;
  text-align: left;
}

.dg-page.dg-leadership .lt-person__title {
  margin: 0 auto;
  max-width: 18em;
  color: var(--color-text);
  font-size: clamp(11px, 0.9vw, 14px);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
  margin-left: 0px;
}

/* ---------------- Jazmanian Voices ----------------
   Mobile: horizontal, scroll-snap carousel.
   >=768px: 2-column grid (see media query). */
.dg-page.dg-leadership .lt-voices-grid {
  display: flex;
  gap: var(--gap-testimonial);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--container-pad);
  padding-bottom: 8px;
}

.dg-page.dg-leadership .lt-voice {
  display: flex;
  flex-direction: column;
  flex: 0 0 312px;
  min-height: 532px;
  scroll-snap-align: center;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: clamp(18px, 1.8vw, 28px);
}

.dg-page.dg-leadership .lt-voice__heading {
  margin: 0 0 14px;
  color: var(--color-heading);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 700;
}

.dg-page.dg-leadership .lt-voice__avatar {
  width: 65px;
  aspect-ratio: 1 / 1;
  margin: 0 0 16px;
  border-radius: 50%;
  overflow: hidden;
  background: #d9dde6;
}

.dg-page.dg-leadership .lt-voice__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dg-page.dg-leadership .lt-voice__quote-mark {
  display: block;
  color: var(--color-primary);
  font-size: clamp(34px, 3vw, 48px);
  font-weight: 700;
  line-height: 0.6;
  margin-bottom: 12px;
}

.dg-page.dg-leadership .lt-voice__text {
  margin: 0 0 18px;
  color: var(--color-text);
  font-size: clamp(12px, 0.95vw, 14px);
  line-height: 1.65;
}

.dg-page.dg-leadership .lt-voice__name {
  margin: 0 0 2px;
  color: var(--color-heading);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 700;
}

.dg-page.dg-leadership .lt-voice__title {
  margin: 0;
  color: var(--color-text);
  font-size: clamp(11px, 0.85vw, 13px);
}

.dg-page.dg-leadership .lt-voices-nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: clamp(18px, 2vw, 28px);
}

.dg-page.dg-leadership .lt-voices-arrow {
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  background: #fff;
  color: var(--color-accent);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition-ui);
}

.dg-page.dg-leadership .lt-voices-arrow:hover {
  background: var(--color-accent);
  color: #fff;
}

/* ---------------- Bio modal ---------------- */
.dg-page.dg-leadership .lt-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 10, 40, 0.65);
}

.dg-page.dg-leadership .lt-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.dg-page.dg-leadership .lt-modal__close {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-primary);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.dg-page.dg-leadership .lt-modal__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #e8e8e8;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

.dg-page.dg-leadership .lt-modal__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dg-page.dg-leadership .lt-modal__body {
  padding: clamp(20px, 3vw, 32px);
}

.dg-page.dg-leadership .lt-modal__name {
  margin: 0 0 4px;
  color: var(--color-heading);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
}

.dg-page.dg-leadership .lt-modal__title {
  margin: 0 0 16px;
  color: var(--color-accent);
  font-size: 14px;
  font-weight: 600;
}

.dg-page.dg-leadership .lt-modal__bio {
  margin: 0;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.7;
}

/* ============================================================
   Responsive grid shifts (mobile-first, min-width)
   Section        | base | 768 | 1024 | 1440+
   Executive Team |  1   |  2  |  3   |  3
   Maverick Video |  1   |  1  |  1   |  2
   Avatars        |  2   |  4  |  5   |  5
   Jazmanian      | carousel | carousel | carousel | carousel
   ============================================================ */

/* >= 768px : tablet portrait */
@media (min-width: 768px) {
  :root {
    --gap-exec: 26px;
    --gap-avatar-x: 39px;
    --gap-avatar-y: 24px;
    --gap-testimonial: 20px;
  }

  .dg-page.dg-leadership .lt-exec-grid {
    grid-template-columns: repeat(2, 328px);
  }

  /* Tablet (768 -> 1024, percentage clamp): 4 cols, 21px shell margin + grid
     side padding scaling 16.5px @768 -> 53px @1024. Gaps: column 39, row 24. */
  .dg-page.dg-leadership .lt-people-grid {
    grid-template-columns: repeat(4, 1fr);
    padding-inline: clamp(16.5px, (100vw - 768px) * 36.5 / 256 + 16.5px, 53px);
  }

  .dg-page.dg-leadership .lt-person {
    min-height: 0;
  }

  /* Restore stepped fixed media height above the fluid 320-760 range */
  .dg-page.dg-leadership .lt-card__media {
    height: auto;
  }

  /* Video thumb: portrait (mobile) -> 16:9 landscape */
  .dg-page.dg-leadership .lt-video__thumb {
    aspect-ratio: 16 / 9;
  }

  /* Voices: carousel on all screens; tablet card fixed 312 x 542. */
  .dg-page.dg-leadership .lt-voice {
    min-height: 542px;
  }

  /* Modal: stacked -> two-column */
  .dg-page.dg-leadership .lt-modal__dialog {
    display: grid;
    grid-template-columns: 240px 1fr;
  }

  .dg-page.dg-leadership .lt-modal__media {
    aspect-ratio: auto;
    height: 100%;
    border-radius: 12px 0 0 12px;
  }
}

/* >= 1024px : tablet landscape / small desktop */
@media (min-width: 1024px) {
  :root {
    --gap-exec: 12px;
    /* Leadership team column gap scales 39px @1024 -> 21px @1920 as the avatars
       grow from Ø144 to Ø263 (5 across). */
    --gap-avatar-x: clamp(21px, 39px - (100vw - 1024px) * 18 / 896, 39px);
  }

  .dg-page.dg-leadership .lt-exec-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Leadership team grid (1024 -> 1920, percentage clamp): side padding scales
     53px @1024 -> 141px @1920; row gap 24, column gap fluid (above). The 1fr
     columns + raised avatar cap let the avatars grow Ø144 -> Ø263 to fill. */
  .dg-page.dg-leadership .lt-people-grid {
    grid-template-columns: repeat(5, 1fr);
    padding-inline: clamp(53px, (100vw - 1024px) * 88 / 896 + 53px, 141px);
  }

  .dg-page.dg-leadership .lt-person__avatar {
    max-width: 263px;
  }

  /* Jazmanian Voices (1024 -> 1920, percentage clamp): card scales from the
     tablet 312 x 542 up to the desktop 710 x 405 (Figma). */
  .dg-page.dg-leadership .lt-voice {
    flex: 0 0 clamp(312px, (100vw - 1024px) * 398 / 896 + 312px, 710px);
    min-height: clamp(405px, 542px - (100vw - 1024px) * 137 / 896, 542px);
  }
}

/* >= 1440px : desktop (content approaches the 1680 cap) */
@media (min-width: 1440px) {
  :root {
    --gap-exec: 20px;
    --gap-video: 20px;
    --gap-avatar-y: 24px;

    /* stepped desktop typography (jumps from mobile values held thru 1024) */
    --fs-exec-name: 24px;
    --fs-exec-title: 16px;
    --fs-btn: 18.21px;
    --btn-pad-y: 13.66px;
    --btn-pad-x: 27.31px;
  }

  /* Exec cards -> fluid 3-col (override 768 fixed 328 tracks) + desktop size.
     Figma desktop: 20px column gap, 26px row gap. */
  .dg-page.dg-leadership .lt-exec-grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 26px;
  }

  .dg-page.dg-leadership .lt-card {
    min-height: 534px;
  }

  .dg-page.dg-leadership .lt-card__media {
    height: auto;
  }

  .dg-page.dg-leadership .lt-video-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dg-page.dg-leadership .lt-video {
    max-width: none;
    margin-inline: 0;
  }
}

/* up to 1919 : Jazmanian Voices PORTRAIT card redesign (mobile + tablet +
   small desktop). Fluid card: stacked vertically with the member photo as a
   large circle on top, the dark quote disc + mark layered over its lower-left,
   then the quote text, name and title. The "About <name>" heading is hidden
   here (it only appears on the >= 1920 landscape card). Across 320 -> 1920 the
   card grows 312 -> 710 wide and the photo circle 245 -> 337 (percentage
   clamp), reaching the desktop size just before the >= 1920 landscape switch. */
@media (max-width: 1919px) {
  .dg-page.dg-leadership .lt-voice {
    /* photo circle: 245 @320 -> 337 @1920 */
    --voice-av: clamp(245px, (100vw - 320px) * 92 / 1600 + 245px, 337px);
    position: relative;
    overflow: hidden;
    /* card width: 312 @320 -> 710 @1920 */
    flex: 0 0 clamp(312px, (100vw - 320px) * 398 / 1600 + 312px, 710px);
    min-height: clamp(532px, (100vw - 320px) * 48 / 1600 + 532px, 580px);
    justify-content: flex-start;
    /* top padding reserves the circle (its size + a 35px gap) */
    padding: calc(var(--voice-av) + 35px) 20px 20px;
    background: var(--color-voice-card-bg);
    border: none;
    border-radius: 0;
  }

  /* Heading is replaced by the name at the bottom on the portrait card. */
  .dg-page.dg-leadership .lt-voice__heading {
    display: none;
  }

  /* Member photo: large circle centered at the top (fluid 245 -> 337). */
  .dg-page.dg-leadership .lt-voice__avatar {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    width: var(--voice-av);
    height: var(--voice-av);
    margin: 0;
    background: var(--color-voice-avatar-bg);
  }

  /* Quote glyph layered over the lower-left of the photo circle
     (50px above the circle's bottom edge). */
  .dg-page.dg-leadership .lt-voice__quote-mark {
    position: absolute;
    top: calc(var(--voice-av) - 50px);
    left: 20px;
    z-index: 2;
    margin: 0;
    font-family: 'Dela Gothic One', var(--font-display);
    font-size: 89px;
    font-weight: 400;
    line-height: 0.7;
    color: var(--color-voice-ink);
  }

  /* Ellipse-5: soft dark disc tucked behind the quote glyph (Figma 65px). */
  .dg-page.dg-leadership .lt-voice__quote-mark::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -6px;
    top: 50%;
    transform: translateY(-45%);
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: var(--color-quote-disc);
    opacity: 0.2;
  }

  .dg-page.dg-leadership .lt-voice__text {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 300;
    line-height: 21.6px;
    color: var(--color-voice-ink);
  }

  /* Name + title pinned to the bottom of the card. */
  .dg-page.dg-leadership .lt-voice__name {
    position: relative;
    z-index: 1;
    margin: auto 0 2px;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-voice-ink);
  }

  .dg-page.dg-leadership .lt-voice__title {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: var(--font-base);
    font-size: 12px;
    font-weight: 300;
    color: var(--color-voice-ink);
  }
}

/* >= 1920px : desktop XL — Jazmanian Voices card redesign (Figma 710 x 405).
   The card already reaches 710 x 405 via the fluid cap; this restyles its
   internals: flat gray card, the member photo as a large 337px circle on the
   right, and heading / quote / text / name / title overlaid on the left.
   Below 1920 the current (fluid) card design is unchanged. */
@media (min-width: 1920px) {

  /* Tight card spacing per the Figma redline (~5px between cards). */
  :root {
    --gap-testimonial: 5px;
  }

  /* About Us tab group: 3 tabs (146 each) + 2 gaps -> ~452 x 35.5 (Figma). */
  .dg-page.dg-leadership .lt-hero__tabs {
    align-items: flex-start;
    gap: 6.561px;
  }

  .dg-page.dg-leadership .lt-tab {
    height: 35.5px;
  }

  /* Dome spans center of "Our Story" to center of "History": 2 x (146 + gap). */
  .dg-page.dg-leadership .lt-hero__eyebrow {
    width: calc(2 * (146px + 6.561px));
  }

  .dg-page.dg-leadership .lt-voice {
    position: relative;
    overflow: hidden;
    justify-content: flex-start;
    padding: 40px;
    background: var(--color-voice-card-bg);
    border: none;
    border-radius: 0;
  }

  /* Text content sits on the left, layered above the circle. */
  .dg-page.dg-leadership .lt-voice>* {
    position: relative;
    z-index: 1;
    max-width: 376px;
  }

  /* Member photo: large 337px circle on the right (Figma: 20px from the top,
     29px from the right edge). */
  .dg-page.dg-leadership .lt-voice__avatar {
    position: absolute;
    top: 20px;
    right: 29px;
    z-index: 0;
    width: 337px;
    height: 337px;
    margin: 0;
    background: var(--color-voice-avatar-bg);
  }

  .dg-page.dg-leadership .lt-voice__heading {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    line-height: 51px;
    color: var(--color-voice-ink);
  }

  .dg-page.dg-leadership .lt-voice__quote-mark {
    position: relative;
    display: inline-block;
    margin: 0;
    font-family: 'Dela Gothic One', var(--font-display);
    font-size: 89px;
    font-weight: 400;
    line-height: 0.7;
    color: var(--color-voice-ink);
  }

  /* Ellipse-5: soft dark disc tucked behind the quote glyph (Figma 65px). */
  .dg-page.dg-leadership .lt-voice__quote-mark::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -6px;
    top: 50%;
    transform: translateY(-45%);
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: var(--color-quote-disc);
    opacity: 0.2;
  }

  .dg-page.dg-leadership .lt-voice__text {
    margin: 6px 0 0;
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 300;
    line-height: 21.6px;
    color: var(--color-voice-ink);
  }

  /* Name + title pinned to the bottom of the card. */
  .dg-page.dg-leadership .lt-voice__name {
    margin: auto 0 2px;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-voice-ink);
  }

  .dg-page.dg-leadership .lt-voice__title {
    margin: 0;
    font-family: var(--font-base);
    font-size: 12px;
    font-weight: 300;
    color: var(--color-voice-ink);
  }

  /* Leadership-team member name steps up to 20px at desktop XL (Figma). */
  .dg-page.dg-leadership .lt-person__name {
    font-size: 20px;
  }
}