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

/* ── Accessibility utilities ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  padding: 8px 16px;
  background: #161616;
  color: #fff;
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  z-index: 9999;
  border-radius: 0 0 4px 0;
}
.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 2px solid #0788f5;
  outline-offset: 3px;
  border-radius: 2px;
}

    html {
      -webkit-text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
    }

    body {
      margin: 0;
      background-color: #fffdfd;
      font-family: 'Figtree', sans-serif;
      color: #161616;
    }

    a { color: inherit; text-decoration: none; }
    p, h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }
    ul, ol, li { list-style: none; margin: 0; padding: 0; }

    /* ── Page shell ─────────────────────────────────── */

    .page {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 70px 24px;
      min-height: 100vh;
    }

    .content {
      width: 100%;
      max-width: 375px;
      min-width: 272px;
      display: flex;
      flex-direction: column;
      gap: 55px;
    }

    /* ── Header ──────────────────────────────────────── */

    .header {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .avatar {
      width: 92px;
      height: 93px;
      border-radius: 100px;
      flex-shrink: 0;
      overflow: hidden;
    }

    .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 50%;
      display: block;
    }

    .header-info {
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 1 0 0;
    }

    .name {
      font-weight: 700;
      font-size: 20px;
      line-height: 26px;
      color: #161616;
    }

    .job-title {
      font-weight: 400;
      font-size: 14px;
      line-height: 1.8;
      color: #525252;
    }

    .email-link {
      font-weight: 400;
      font-size: 12px;
      line-height: 1.8;
      color: #525252;
      text-decoration: underline;
      text-decoration-thickness: from-font;
      text-underline-position: from-font;
    }

    /* ── Sections container ──────────────────────────── */

    .sections {
      display: flex;
      flex-direction: column;
      gap: 58px;
    }

    /* ── Section ─────────────────────────────────────── */

    .section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .section-header-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 25px;
    }

    .section-title {
      font-weight: 700;
      font-size: 16px;
      line-height: 1.4;
      color: #161616;
      white-space: nowrap;
    }

    /* ── About ───────────────────────────────────────── */

    .about-text {
      font-weight: 400;
      font-size: 14px;
      line-height: 1.8;
      color: #525252;
    }

    /* ── Experience ──────────────────────────────────── */

    .exp-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .exp-item {
      display: flex;
      flex-direction: column;
    }

    .exp-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 25px;
    }

    .exp-role {
      font-weight: 600;
      font-size: 14px;
      line-height: 1.8;
      color: #161616;
    }

    .exp-date {
      font-weight: 400;
      font-size: 14px;
      line-height: 1.8;
      color: #6f6f6f;
      white-space: nowrap;
    }

    .company-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .company-logo {
      width: 16px;
      height: 16px;
      border-radius: 999px;
      overflow: hidden;
      flex-shrink: 0;
    }

    .company-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .company-link {
      font-weight: 400;
      font-size: 14px;
      line-height: 1.8;
      color: #161616;
      text-decoration: underline;
      text-decoration-thickness: from-font;
      text-underline-position: from-font;
    }

    .company-name {
      font-weight: 400;
      font-size: 14px;
      line-height: 1.8;
      color: #525252;
    }

    .freelance-glyph {
      width: 16px;
      font-size: 14px;
      text-align: center;
      line-height: 1.8;
      color: #525252;
    }

    .exp-desc {
      font-weight: 400;
      font-size: 14px;
      line-height: 1.8;
      color: #525252;
    }

    /* ── Case studies ────────────────────────────────── */

    .cs-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .cs-item {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .cs-header-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .cs-title {
      font-weight: 600;
      font-size: 14px;
      line-height: 1.8;
      color: #161616;
      text-decoration: underline;
      text-decoration-thickness: from-font;
      text-underline-position: from-font;
      white-space: nowrap;
    }

    .cs-year {
      font-weight: 400;
      font-size: 14px;
      line-height: 1.8;
      color: #6f6f6f;
      white-space: nowrap;
    }

    .cs-body {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .cs-desc {
      font-weight: 400;
      font-size: 14px;
      line-height: 1.8;
      color: #525252;
    }

    /* ── Vanta badge ─────────────────────────────────── */

    .vanta-badge {
      position: relative;
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      cursor: default;
    }

    .vanta-badge-img {
      width: 20px;
      height: 20px;
      border-radius: 2px;
      overflow: hidden;
      flex-shrink: 0;
    }

    .vanta-badge img {
      width: 20px;
      height: 20px;
      min-width: 20px;
      display: block;
    }

    .vanta-badge::after {
      content: "Highlighted for Vanta";
      position: absolute;
      bottom: calc(100% + 6px);
      left: 50%;
      transform: translateX(-50%);
      background: #1a1a1a;
      color: #fff;
      font-size: 11px;
      font-weight: 500;
      padding: 4px 8px;
      border-radius: 4px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s ease;
    }

    .vanta-badge:hover::after {
      opacity: 1;
    }

    .litify-badge {
      position: relative;
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      cursor: default;
    }

    .litify-badge-img {
      width: 20px;
      height: 20px;
      border-radius: 2px;
      overflow: hidden;
      flex-shrink: 0;
      box-shadow: 0 0 3px 1px rgba(33, 150, 243, 0.4);
    }

    .litify-badge img {
      width: 20px;
      height: 20px;
      min-width: 20px;
      display: block;
    }

    .litify-badge::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: calc(100% + 6px);
      left: 50%;
      transform: translateX(-50%);
      background: #1a1a1a;
      color: #fff;
      font-size: 11px;
      font-weight: 500;
      padding: 4px 8px;
      border-radius: 4px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s ease;
    }

    .litify-badge:hover::after {
      opacity: 1;
    }

    /* ── Education ───────────────────────────────────── */

    .edu-item {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }

    .edu-left {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .edu-school {
      font-weight: 600;
      font-size: 14px;
      line-height: 1.8;
      color: #161616;
    }

    .edu-degree {
      font-weight: 400;
      font-size: 14px;
      line-height: 1.8;
      color: #525252;
    }

    .edu-location {
      font-weight: 400;
      font-size: 14px;
      line-height: 1.8;
      color: #525252;
    }

    .edu-years {
      font-weight: 400;
      font-size: 14px;
      line-height: 1.8;
      color: #6f6f6f;
      text-align: right;
      white-space: nowrap;
    }

    /* ── Desktop (≥730px) ────────────────────────────── */

    @media (min-width: 730px) {
      .page {
        padding: 82px 62px;
      }

      .content {
        max-width: 600px;
        min-width: 600px;
      }

      .header {
        gap: 24px;
      }

      .header-info {
        max-width: 218.75px;
      }

      /* Desktop uses #111 for role/school labels */
      .exp-role {
        color: #111;
      }

      .edu-school {
        color: #111;
      }
    }