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

body {
  font-family: "Outfit", sans-serif;
  background: radial-gradient(ellipse at center, #dde0e2 0%, #c0c3c6 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
}

/* ── Layout ────────────────────────────────────────── */
.layout {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  width: 100%;
  max-width: 960px;
}

/* ── Video ─────────────────────────────────────────── */
.video-col {
  flex: 0 0 50%;
}

.video-wrapper {
  position: relative;
  width: 100%;
  max-height: 90dvh;
  aspect-ratio: 9 / 16;
  background: #ffffff;
  border: 1px solid #c4c6c8;
}

/* When video is available, swap the placeholder div for:
   <video autoplay muted playsinline loop src="your-video.mp4"></video>
   and remove the .play-icon div. */
.video-wrapper video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-25%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 18px 0 18px 32px;
  border-color: transparent transparent transparent #b4b6b8;
  pointer-events: none;
}

/* ── Content ───────────────────────────────────────── */
.content-col {
  flex: 1;
  min-width: 0;
}

.name {
  /* font-family: 'Lora', serif; */
  font-size: clamp(2.6rem, 4.5vw, 4rem);
  font-weight: 250;
  color: #2a6c98;
  line-height: 1.1;
  margin-bottom: 12px;
  letter-spacing: 0.015em;
}

.subtitle {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 18px;
  margin-bottom: 26px;
}

.role {
  font-size: 1.45rem;
  font-weight: 700;
  color: #363636;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.location {
  font-size: 1.2rem;
  font-weight: 300;
  color: #363636;
}

.bio {
  font-size: 1rem;
  line-height: 1.3;
  max-width: 400px;
  margin-bottom: 34px;
}

/* ── CTA buttons ───────────────────────────────────── */
.cta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}

.btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 116px;
  height: 94px;
  background: #1d5f8a;
  color: #fff;
  text-decoration: none;
  font-family: "Outfit", sans-serif;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.btn:hover {
  background: #2578a8;
}

.btn i {
  font-size: 1.6rem;
}

.or-text {
  font-family: "Lora", serif;
  font-style: italic;
  font-size: 1.05rem;
  color: #666;
}

/* ── Contact info ──────────────────────────────────── */
.contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #2a6c98;
  text-decoration: none;
  font-size: 0.95rem;
}

.contact-link:hover {
  text-decoration: underline;
}

.contact-link i {
  flex-shrink: 0;
  font-size: 1rem;
}

/* ── Tablet ────────────────────────────────────────── */
@media (max-width: 860px) {
  .subtitle {
    flex-direction: column;
    gap: 4px;
  }
}

/* ── Mobile ────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Header (name + role + location + contact) is sized with fixed,
     non-fluid values so its rendered height is predictable. The video
     keeps its own aspect-ratio (so it fills edge-to-edge with no
     letterbox gap); max-height is just a safety ceiling for unusually
     short viewports. Reserve below = 7px top padding + header + margins. */

  body {
    padding: 16px;
    align-items: flex-start;
  }

  .layout {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }

  /* Flatten content-col so its children can be reordered with video-col */
  .content-col {
    display: contents;
  }

  /* Name, role, contact, and video are kept just large enough to always
     fit in the first viewport (100dvh); bio and the CTA buttons are
     pushed after .video-col so they sit below the fold instead. */
  .name-block {
    order: 1;
    width: 100%;
    margin-bottom: 4px;
  }

  .name {
    font-size: 2.375rem;
    line-height: 1.05;
    margin-bottom: 1px;
  }

  .subtitle {
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 0;
  }

  .role {
    font-size: 1.125rem;
  }

  .location {
    font-size: 1rem;
  }

  .contact {
    order: 2;
    align-items: center;
    width: 100%;
    gap: 3px;
    font-size: 0.82rem;
    margin-bottom: 6px;
  }

  .video-col {
    order: 3;
    width: 100%;
  }

  .video-wrapper {
    width: 100%;
    height: auto;
    max-height: calc(100dvh - 140px);
  }

  .video-wrapper video {
    object-fit: contain;
  }

  .bio {
    order: 4;
    max-width: 400px;
    margin-top: 28px;
    margin-bottom: 28px;
    width: 90%;
    text-align: center;
  }

  .cta {
    order: 5;
    justify-content: center;
    margin-bottom: 24px;
    width: 100%;
  }
}