:root {
  --bg: #f4f4f6;
  --surface: rgba(255, 255, 255, .88);
  --text: #141416;
  --dark: #1c1c1e;
  --muted: #68686d;
  --line: rgba(20, 20, 22, .12);
  --blue: #0878f9;
  --blue-hover: #0069df;
  --blue-soft: #e7f1ff;
  --shadow: 0 28px 80px rgba(24, 24, 28, .08);
  --radius: 34px;
  --max: 1360px;
  --pad: clamp(20px, 4vw, 64px);
}

body {
  background:
    radial-gradient(circle at 76% 7%, rgba(0, 113, 227, .075), transparent 25rem),
    linear-gradient(180deg, #f8f8fa 0, var(--bg) 38rem);
}

.site-header {
  top: 14px;
  width: min(calc(100% - 28px), 1320px);
  min-height: 62px;
  margin-inline: auto;
  padding: 0 12px 0 22px;
  border: 1px solid rgba(20, 20, 22, .1);
  border-radius: 999px;
  background: rgba(250, 250, 252, .76);
  box-shadow: 0 12px 38px rgba(24, 24, 28, .065);
}

.brand { font-size: 14px; }
.nav-cta { padding: 11px 17px; }

.hero {
  min-height: auto;
  padding-top: clamp(104px, 11vw, 170px);
  padding-bottom: clamp(92px, 10vw, 150px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(18px, 2.4vw, 36px);
  row-gap: clamp(54px, 7vw, 100px);
  align-items: center;
}

.hero-copy { grid-column: 1 / span 8; }
.hero-profile { grid-column: 9 / -1; width: 100%; max-width: 390px; }
.hero h1 { font-size: clamp(84px, 10.6vw, 162px); line-height: .8; }
.hero-role { max-width: 760px; margin-top: 42px; font-size: clamp(22px, 2.15vw, 31px); line-height: 1.18; }

.hero-proof {
  width: min(100%, 710px);
  margin-top: 42px;
  padding-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}

.hero-proof > div {
  min-height: 72px;
  padding-right: 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-right: 1px solid var(--line);
}

.hero-proof > div + div { padding-left: 18px; }
.hero-proof > div:last-child { border-right: 0; }
.hero-proof strong { font-size: 30px; line-height: 1; letter-spacing: -.055em; }
.hero-proof span { color: var(--muted); font-size: 11px; line-height: 1.4; text-transform: uppercase; letter-spacing: .06em; }
.hero-actions { margin-top: 30px; }

.portrait-card {
  position: relative;
  padding: 10px;
  border-radius: 42px;
  box-shadow: 0 34px 90px rgba(24, 24, 28, .13);
}

.portrait-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 12% -10% -8% 12%;
  border-radius: 50%;
  background: rgba(0, 113, 227, .17);
  filter: blur(52px);
}

.portrait-card img { border-radius: 32px; }
.availability { margin-top: 22px; }

.hero-statement {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding-top: clamp(38px, 5vw, 66px);
  display: grid;
  grid-template-columns: 2fr 10fr;
  gap: 28px;
}

.hero-statement > span { color: var(--blue); font-size: 11px; font-weight: 750; letter-spacing: .14em; }
.hero-statement p { max-width: 1120px; font-size: clamp(42px, 5.8vw, 80px); }

.section { padding-top: clamp(110px, 12vw, 180px); padding-bottom: clamp(110px, 12vw, 180px); }
.section-label { margin-bottom: clamp(54px, 7vw, 92px); }
.section-heading { max-width: 1040px; }
.section-heading h2, .tools-layout h2 { font-size: clamp(50px, 6vw, 82px); }

.profile-card {
  padding: clamp(36px, 5.5vw, 82px);
  grid-template-columns: 1.12fr .88fr;
  border-color: rgba(20, 20, 22, .09);
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.profile-card h2 { font-size: clamp(43px, 5vw, 70px); }
.profile-copy { padding-top: 31px; font-size: 18px; }

.competency-grid { gap: 12px; margin-top: 12px; }
.competency-grid article {
  min-height: 270px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  border-color: rgba(20, 20, 22, .1);
  border-radius: 28px;
  background: rgba(255, 255, 255, .72);
  transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
}

.competency-grid article:hover { transform: translateY(-5px); background: #fff; box-shadow: 0 18px 48px rgba(24, 24, 28, .07); }
.competency-grid article:first-child { color: #fff; border-color: transparent; background: var(--blue); }
.competency-grid article:first-child span, .competency-grid article:first-child p { color: rgba(255, 255, 255, .75); }
.competency-grid h3 { margin: auto 0 12px; font-size: 25px; }

.experience {
  width: min(calc(100% - 28px), 1450px);
  padding-inline: clamp(24px, 5vw, 78px);
  border: 1px solid rgba(20, 20, 22, .08);
  border-radius: 54px;
  box-shadow: 0 40px 110px rgba(24, 24, 28, .075);
}

.experience-list { gap: 14px; }
.experience-card { padding: clamp(34px, 4.4vw, 64px); grid-template-columns: .5fr 1.5fr; border-radius: 30px; }
.experience-card.featured { background: linear-gradient(135deg, #1d1d1f, #28282b); }
.experience-content h3 { max-width: 820px; font-size: clamp(31px, 3.5vw, 50px); }
.experience-content ul { max-width: 850px; grid-template-columns: repeat(2, 1fr); gap: 18px 32px; }

.project-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
.project-card {
  height: auto;
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(370px, .85fr);
  overflow: hidden;
  border-color: rgba(20, 20, 22, .1);
  border-radius: 38px;
  box-shadow: 0 28px 80px rgba(24, 24, 28, .07);
}

.project-card:nth-child(even) { grid-template-columns: minmax(370px, .85fr) minmax(0, 1.15fr); }
.project-card:nth-child(even) .project-image { order: 2; }
.project-card:nth-child(even) .project-copy { order: 1; }
.project-image { height: 100%; min-height: 0; }
.project-image img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center top; }
.project-copy { height: 100%; padding: clamp(32px, 4.2vw, 56px); display: flex; flex-direction: column; }
.project-copy h3 { margin: 24px 0 14px; font-size: clamp(34px, 3.6vw, 52px); }
.project-copy p { max-width: 520px; font-size: 16px; line-height: 1.58; }
.project-arch {
  margin-top: 18px;
  padding: 12px 15px;
  border-left: 3px solid var(--blue);
  border-radius: 0 14px 14px 0;
  background: rgba(8, 120, 249, .055);
  color: var(--dark);
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}
.project-arch strong { color: var(--text); font-weight: 700; }
.project-tags { margin-top: 20px; }
.project-copy > a { margin-top: auto; padding-top: 32px; align-items: center; justify-content: space-between; font-size: 15px; }
.project-copy > a span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); }

.tools-layout {
  padding: clamp(40px, 6vw, 84px);
  border-color: transparent;
  color: #f5f5f7;
  background: linear-gradient(145deg, #171719, #28282b);
  box-shadow: var(--shadow);
}

.tools-layout .eyebrow { color: #6fb3ff; }
.tool-cloud { align-content: center; }
.tool-cloud span { color: #f5f5f7; border-color: #46464b; background: rgba(255, 255, 255, .06); }
.education-grid { gap: 14px; margin-top: 14px; }
.education-grid article { min-height: 250px; padding: clamp(34px, 4vw, 54px); display: flex; flex-direction: column; }
.education-grid h3 { margin-top: auto; }

.contact-card {
  position: relative;
  padding: clamp(48px, 8vw, 110px);
  border-radius: 52px;
  background:
    radial-gradient(circle at 88% 10%, rgba(0, 113, 227, .55), transparent 33rem),
    #171719;
  box-shadow: 0 35px 100px rgba(24, 24, 28, .14);
}

.contact-card h2 { max-width: 1080px; }
.contact-actions { margin-top: 46px; }
.contact-meta { margin-top: 96px; }

@media (max-width: 1050px) {
  .hero-copy { grid-column: 1 / span 7; }
  .hero-profile { grid-column: 8 / -1; }
  .hero h1 { font-size: clamp(80px, 12vw, 128px); }
  .project-card, .project-card:nth-child(even) { height: 510px; min-height: 510px; grid-template-columns: 1fr 1fr; }
  .experience-content ul { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .site-header { top: 10px; }
  .hero { padding-top: 100px; }
  .hero-copy { grid-column: 1 / -1; }
  .hero-profile { grid-column: 1 / span 7; justify-self: start; max-width: 360px; }
  .hero-statement { grid-template-columns: 1fr; }
  .profile-card { grid-template-columns: 1fr; }
  .profile-copy { padding-top: 0; }
  .experience-card { grid-template-columns: 1fr; }
  .project-card, .project-card:nth-child(even) { height: auto; min-height: 0; grid-template-columns: 1fr; }
  .project-card:nth-child(even) .project-image, .project-card:nth-child(even) .project-copy { order: initial; }
  .project-image { height: min(70vw, 520px); min-height: 360px; }
}

@media (max-width: 620px) {
  .site-header { width: calc(100% - 20px); padding-left: 17px; }
  .hero { padding-top: 82px; }
  .hero h1 { font-size: clamp(68px, 22vw, 98px); }
  .hero-proof { grid-template-columns: 1fr; }
  .hero-proof > div, .hero-proof > div + div { min-height: auto; padding: 15px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .hero-proof > div:last-child { border-bottom: 0; }
  .hero-profile { grid-column: 1 / -1; max-width: 100%; }
  .hero-statement p { font-size: 40px; }
  .competency-grid { grid-template-columns: 1fr; }
  .competency-grid article { min-height: 230px; }
  .experience { width: calc(100% - 12px); padding-inline: 17px; border-radius: 38px; }
  .experience-card { padding: 29px 24px; }
  .project-card { height: auto; min-height: 0; border-radius: 28px; }
  .project-image { height: 320px; min-height: 320px; }
  .project-copy { min-height: 420px; padding: 30px 24px; }
  .project-copy h3 { font-size: 38px; }
  .tools-layout, .contact-card { border-radius: 34px; }
}