/* ============================================================
   Contactable — Leadership page styles
   Loads on top of tokens.css + iip.css.
   Figma: Leadership • Desktop (node 10451-65530)
   ============================================================ */

/* ===== Hero (Header / 62) — dark datacenter bg ===== */
.ld-hero {
  position: relative;
  overflow: hidden;
  background: #1a0b2e;
  padding: 112px 0;
  display: flex;
  align-items: center;
  min-height: 469px;
}
.ld-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  pointer-events: none;
  max-width: none;
}
.ld-hero__inner { position: relative; z-index: 1; width: 100%; }
.ld-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 935px;
}
/* Figma hero tagline is 20px (the base .eyebrow caps at 14px, which is the
   small default — a hero eyebrow should be 20px like the capability heroes). */
.ld-hero__eyebrow { color: #fff; font-size: clamp(15px, 1.56vw, 20px); }
.ld-hero__title {
  font-family: "Archivo Black", "Google Sans Flex", sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  /* Anchored clamp: 5.86vw reaches Figma's 75px at ~1280px (75/12.8), same slope
     as the capability heroes. The old 7vw hit the 75px cap at ~1070px while the
     gutter-narrowed column was still far under Figma's 935px, so "IDENTITY, MADE
     INTO" broke into three lines that filled the hero. The 24px floor keeps the
     long single word "INFRASTRUCTURE" (≈10.3× the font-size in Archivo Black)
     inside a phone's 320px content column. */
  font-size: clamp(24px, 5.86vw, 75px);
  line-height: 1.1;
  color: #fff;
  margin: 8px 0 0;
  text-wrap: wrap;
  /* Safety net: never let the long word "INFRASTRUCTURE" overflow/clip — if it's
     ever wider than the column (e.g. a larger-than-expected render), break it
     onto the next line instead of running off the edge. max-width bounds the
     text box to the container so the wrap actually engages. */
  max-width: 100%;
  overflow-wrap: break-word;
}
.ld-hero__text {
  font-size: 18px;
  line-height: 1.5;
  color: #fff;
  margin: 8px 0 0;
  /* Figma (10451:65679): body spans the full 935px column, wrapping after
     "Integrated Identity Platform" — no narrower cap. */
  max-width: 100%;
}

/* ===== Team (Team / 4) ===== */
.ld-team { padding: 112px 0; background: #fff; }
.ld-team__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  margin: 0 auto 80px;
  max-width: 768px;
}
.ld-team__eyebrow { color: #8087b0; }
.ld-team__heading {
  font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale));
  font-weight: 700;
  line-height: 1.1;
  color: var(--deep-orange);
  margin: 0;
  text-wrap: wrap;
}
.ld-team__lead {
  font-size: 18px;
  line-height: 1.5;
  color: var(--deep-blue);
  margin: 0;
}

.ld-team__row { display: grid; gap: 32px; }
.ld-team__row--two { grid-template-columns: repeat(2, 1fr); margin-bottom: 64px; }
/* Shaun & Jason portraits scaled to 80% (20% smaller) */
.ld-team__row--two .ld-card__img { width: 80%; }
.ld-team__row--three { grid-template-columns: repeat(3, 1fr); }

.ld-card { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.ld-card__img { width: 100%; aspect-ratio: 1 / 1; border-radius: 15px; overflow: hidden; }
.ld-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-card__content { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.ld-card__title { display: flex; flex-direction: column; }
.ld-card__name { font-size: 20px; font-weight: 600; line-height: 1.5; color: var(--deep-orange); margin: 0; }
.ld-card__role { font-size: 18px; font-weight: 400; line-height: 1.5; color: var(--deep-blue); margin: 0; }
.ld-card__bio { font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--deep-blue); margin: 0; }
.ld-card__social { display: flex; gap: 14px; }
.ld-card__social a { display: inline-flex; width: 24px; height: 24px; }
.ld-card__social img { width: 24px; height: 24px; display: block; }

/* ===== Blog (Blog / 66) ===== */
.ld-blog { padding: 112px 0; background: #fff; }
.ld-blog__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 80px;
}
.ld-blog__head-copy { max-width: 768px; }
.ld-blog__eyebrow { color: #8087b0; }
.ld-blog__heading {
  font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale));
  font-weight: 700;
  line-height: 1.1;
  color: var(--deep-orange);
  margin: 16px 0 0;
  text-wrap: wrap;
}
.ld-blog__lead { font-size: 18px; line-height: 1.5; color: var(--deep-blue); margin: 24px 0 0; }
.ld-blog__viewall { flex: none; white-space: nowrap; }

.ld-blog__carousel { overflow: hidden; }
.ld-blog__track {
  display: flex;
  gap: 32px;
  scroll-behavior: smooth;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.ld-blog__track::-webkit-scrollbar { display: none; }
.ld-blog-card {
  flex: 0 0 394px;
  max-width: 394px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  scroll-snap-align: start;
}
.ld-blog-card__img { display: block; width: 100%; aspect-ratio: 394 / 262.6; border-radius: 15px; overflow: hidden; }
.ld-blog-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-blog-card__body { display: flex; flex-direction: column; gap: 16px; }
.ld-blog-card__info { display: flex; align-items: center; gap: 16px; }
.ld-tag {
  background: #eee;
  color: var(--deep-blue);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  padding: 4px 12px;
  border-radius: 9999px;
}
.ld-blog-card__meta { color: var(--deep-blue); font-size: 14px; font-weight: 600; line-height: 1.5; }
.ld-blog-card__text { display: flex; flex-direction: column; gap: 8px; }
.ld-blog-card__title { font-size: 28px; font-weight: 600; line-height: 1.4; color: var(--deep-blue); margin: 0; }
.ld-blog-card__excerpt { font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--deep-blue); margin: 0; }
.ld-blog-card__more {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--deep-blue); font-size: 16px; text-decoration: none;
  transition: color var(--duration-base) var(--ease-out);
}
.ld-blog-card__more .material-symbols-rounded { font-size: 24px; transition: transform var(--duration-base) var(--ease-out); }
.ld-blog-card__more:hover { color: var(--deep-orange); }
.ld-blog-card__more:hover .material-symbols-rounded { transform: translateX(3px); }

.ld-blog__controls { display: flex; justify-content: space-between; align-items: center; margin-top: 48px; }
.ld-blog__dots { display: flex; gap: 8px; }
.ld-dot { width: 8px; height: 8px; border-radius: 50%; background: #d9dbe6; transition: background var(--duration-base) var(--ease-out); }
.ld-dot.is-active { background: var(--deep-orange); }
.ld-blog__arrows { display: flex; gap: 16px; }
.ld-arrow {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--deep-orange); background: transparent;
  color: var(--deep-orange); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.ld-arrow .material-symbols-rounded { font-size: 22px; }
.ld-arrow:hover { background: var(--deep-orange); color: #fff; }

/* ===== CTA (CTA / 1) ===== */
.ld-cta { padding: 112px 0; background: #fff; }
.ld-cta__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.ld-cta__col { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.ld-cta__copy { display: flex; flex-direction: column; gap: 24px; }
.ld-cta__heading { font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale)); font-weight: 700; line-height: 1.1; color: var(--deep-orange); margin: 0; text-wrap: wrap; }
.ld-cta__text { font-size: 18px; line-height: 1.5; color: var(--deep-blue); margin: 0; }
.ld-cta__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.ld-cta__btn { height: 48px; padding: 0 24px; font-size: 16px; font-weight: 800; }
.ld-cta__btn--outline {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; border: 1px solid var(--deep-blue); color: var(--deep-blue);
  text-decoration: none; background: transparent;
  transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.ld-cta__btn--outline:hover { background: var(--deep-blue); color: #fff; }
.ld-cta__img { aspect-ratio: 600 / 400; border-radius: 30px; overflow: hidden; }
.ld-cta__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== Orange band (CTA / 15) — reuses .final ===== */
.ld-final { padding: 112px 64px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* --- Hero --- */
/* Title size is a single fluid clamp on the base rule (see .ld-hero__title) —
   no per-breakpoint override needed. */
@media (max-width: 640px) {
  .ld-hero { padding: 72px 0; }
  .ld-hero__text { font-size: 16px; }
}

/* --- Team --- */
@media (max-width: 900px) {
  .ld-team { padding: 80px 0; }
  .ld-team__head { margin-bottom: 56px; }
  .ld-team__row--three { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ld-team__row--two,
  .ld-team__row--three { grid-template-columns: 1fr; }
  .ld-team__row--two { margin-bottom: 32px; }
  .ld-team__lead { font-size: 16px; }
}

/* --- Blog --- */
@media (max-width: 900px) {
  .ld-blog { padding: 80px 0; }
  .ld-blog__head { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 48px; }
}
@media (max-width: 640px) {
  .ld-blog-card { flex: 0 0 84%; max-width: 84%; }
  .ld-blog-card__title { font-size: 24px; }
}

/* --- CTA --- */
@media (max-width: 900px) {
  .ld-cta { padding: 80px 0; }
  .ld-cta__grid { grid-template-columns: 1fr; gap: 40px; }
  .ld-cta__img { order: -1; }
}
@media (max-width: 640px) {
  /* Keep the heading on TWO lines (matching the <br>), not three: at the base
     size "Help us build the future" is ~327px in a ~320px column and wraps.
     This clamp scales it to fit that first half on one line down to 320px. */
  .ld-cta__heading { font-size: clamp(22px, 6.8vw, 29px); }
}

/* --- Orange band --- */
@media (max-width: 900px) { .ld-final { padding: 80px 28px; } }