@charset "UTF-8";
/* CSS Document */
    :root {
      --bg: #f3f7f8;
      --paper: #ffffff;
      --ink: #172b34;
      --muted: #667b84;
      --line: #d7e0e4;
      --line-dark: #bfcdd3;
      --blue: #0f79ba;
      --blue-dark: #cccccc;
      --blue-soft: #dceef8;
      --teal: #13b5b4;
      --teal-soft: #daf5f4;
      --gray-bar: #c7d0d4;
      --gray-dark: #8ea0a8;
      --green: #13b59f;
      --gold: #f0bf25;
      --red: #d71920;
      --purple: #7054c8;
      --shadow: 0 18px 50px rgba(20, 45, 57, 0.08);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      background: linear-gradient(180deg, #f8fbfc 0%, var(--bg) 100%);
      color: var(--ink);
      font-family: Open Sans, Arial, Helvetica, sans-serif;
    }
	
	p {
		  
	}
	
	h1 {
	  display: inline-block;
	  width: fit-content;
	  font-size: 40px;
	  font-weight: 800;
	  letter-spacing: -.05px;
	  padding: 10px 0px 0px 20px;
	  margin: 15px 0px 5px 0px;
	  color: #000000;
	}

	h2 {
	  display: inline-block;
	  width: fit-content;
	  font-size: clamp(1.8rem, 2.5vw, 2.5rem);
	  font-weight: 600;
	  letter-spacing: -0.01em;
	  padding: 10px 0px 0px 0px;
	  margin: 15px 0px 5px 0px;
	  color: #121212;
	}

	h3 {
	  display: inline-block;
	  width: fit-content;
	  font-size: 1.6rem;
	  font-weight: 600;
	  letter-spacing: .05em;
	  line-height: 32px;
	  padding: 5px;
	  margin: 20px 5px 20px 5px;
	  color: #fff;
	}
	
	.name {
	  font-size: clamp(1.5rem, 3vw, 2rem);
	  font-weight: 550;
	  letter-spacing: -0.01em;
	}
	.links {
	  font-size: 13px;
	  font-weight: 500;
	  color: #999999;
	  letter-spacing: .03em;
	}
	.links:hover {
		color: darkturquoise;
	}

    .page {
      width: min(1480px, calc(100% - 48px));
      margin: 0 auto;
      padding: 30px 0 54px;
    }

	.tagline {
	  color: #9c9c9c;
	  font-size: 12px;
	  font-weight: 600;
	  letter-spacing: 0em;
	  text-transform: uppercase;
	  margin: 5px 0px 4px 0px;
	  padding: 0px 0px 0px 20px;	
	  display: block;
	}

    .site-header,
    .site-footer {
      width: min(1480px, calc(100% - 48px));
      margin: 0 auto;
      padding: 20px 0 0;
    }

    .site-nav,
    .footer-nav {
      background: var(--paper);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 14px 18px;
    }

    .site-brand {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--ink);
      white-space: nowrap;
    }	  

    .nav-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 14px;
      color: #425a63;
      font-size: 0.82rem;
      font-weight: 600;
		
    }

    .nav-links a {
      color: inherit;
      text-decoration: none;
    }

    .nav-links a:hover,
    .footer-links a:hover {
      color: var(--blue);
    }

    .site-footer {
      padding: 0 0 30px;
    }

    .footer-nav {
      margin-top: 18px;
    }

    .footer-note-small {
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.4;
    }  
	  
	  
    .title-block { text-align: left; margin-bottom: 18px; }

    .title-block h1 {
      margin: 0;
      font-size: clamp(1.6rem, 2.5vw, 3rem);
	  font-weight: 800;
      line-height: 1.03;
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    .title-block p {
      margin: 8px 0 0;
      max-width: 1080px;
      font-size: 0.95rem;
      line-height: 1.4;
    }

    .profile-strip {
      display: grid;
      grid-template-columns: 132px minmax(0, 1.18fr) minmax(320px, 0.82fr);
      gap: 14px;
      margin-bottom: 14px;
      align-items: stretch;
    }

    .photo-box,
    .summary-box,
    .fit-box {
      background: var(--paper);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }

    .photo-box {
      min-height: 132px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, #e9eff1, #ffffff);
      color: #7a8d94;
      text-align: center;
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      font-weight: 700;
    }

    .summary-box,
    .fit-box { padding: 17px 18px; }

    .eyebrow {
      margin: 0 0 8px;
      color: var(--blue-dark);
      font-size: 0.65rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .summary-box h2,
    .fit-box h2 {
      margin: 0;
      font-size: 1.24rem;
      line-height: 1.13;
      letter-spacing: -0.01em;
    }

    .summary-box p,
    .fit-box p {
      margin: 9px 0 0;
      color: #435c65;
      font-size: 0.94rem;
      line-height: 1.45;
    }

    .fit-tags {
      margin-top: 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

	.fit-tags span,
	.pill,
	.skill-pill {
	  display: inline-flex;
	  align-items: center;
	  padding: 7px 10px;
	  border-radius: 999px;
	  font-size: 0.70rem;
	  font-weight: 700;
	  white-space: nowrap;
	  border: 1px solid #c7e8eb;
	  background: #e6f7f8;
	  color: #235f66;
	}
	  
	.skill-pill.skill-ai {
	  background: #e7f1fb;
	  color: #285777;
	  border-color: #c7dff2;
	}

	.skill-pill.skill-product {
	  background: #ddf5f2;
	  color: #1f625d;
	  border-color: #bfe7e2;
	}

	.skill-pill.skill-ops {
	  background: #edf4f7;
	  color: #405f6c;
	  border-color: #d3e2e8;
	}

	.skill-pill.skill-leadership {
	  background: #e0f4f6;
	  color: #245d68;
	  border-color: #bfdee4;
	}
	  
	.skill-list {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 0.45rem;
	  margin: -0.35rem 0 1rem;
	}

	.skill-list span {
	  font-size: 0.78rem;
	  line-height: 1.2;
	  padding: 0.35rem 0.55rem;
	  border-radius: 999px;
	  background: rgba(255, 255, 255, 0.08);
	  border: 1px solid rgba(255, 255, 255, 0.14);
	}

    .top-grid {
      display: grid;
      grid-template-columns: 0.72fr 1.04fr 1.04fr 1.04fr;
      gap: 14px;
      align-items: stretch;
      margin-bottom: 18px;
    }

    .metric-stack {
      display: grid;
      grid-template-rows: repeat(4, 1fr);
      gap: 6px;
    }

    .metric {
      background: var(--blue-soft);
      border: 1px solid #c5ddea;
      min-height: 63px;
      padding: 10px 12px;
      display: grid;
      place-content: center;
      text-align: center;
    }

    .metric small {
      display: block;
      font-size: 0.80rem;
      color: #445d67;
      line-height: 1.1;
    }

    .metric strong {
      display: block;
      color: var(--blue);
      font-size: 1.35rem;
      line-height: 1.05;
      margin-top: 2px;
    }

    .viz-panel {
      background: var(--paper);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      min-height: 256px;
    }

    .panel-head {
      background: var(--blue);
      color: white;
      text-align: center;
      font-weight: 700;
      font-size: 1rem;
      padding: 8px 10px;
      letter-spacing: 0.01em;
    }

    .panel-body { padding: 16px 18px; }

    .composition {
      height: 200px;
      display: grid;
      align-content: center;
      gap: 12px;
    }

    .composition-row {
      display: grid;
      grid-template-columns: 138px 1fr 42px;
      align-items: center;
      gap: 10px;
      font-size: 0.80rem;
      color: #425a63;
    }

    .composition-track {
      height: 13px;
      background: #e7edef;
      border: 1px solid var(--line);
      overflow: hidden;
    }

    .composition-track span {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, var(--teal), var(--blue));
    }

    .build-portfolio {
      height: 200px;
      display: grid;
      gap: 10px;
      align-content: center;
    }

    .build-row {
      display: grid;
      grid-template-columns: 150px 1fr 82px;
      align-items: center;
      gap: 10px;
      font-size: 0.80rem;
      color: #425a63;
    }

    .stage-track {
      height: 24px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border: 1px solid var(--line-dark);
      overflow: hidden;
      background: #f3f7f8;
    }

    .stage-track span {
      border-right: 1px solid var(--line);
      background: #edf3f5;
    }

    .stage-track span:last-child { border-right: 0; }
    .stage-track .done { background: #99dfe0; }
    .stage-track .active { background: var(--blue); }

    .stage-label {
      font-weight: 700;
      color: var(--blue-dark);
      text-align: right;
    }

    .outcome-grid {
      height: 200px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px;
      align-content: center;
    }

    .outcome {
      padding: 12px;
      border: 1px solid var(--line);
      background: #f7fbfc;
      min-height: 84px;
      display: grid;
      align-content: center;
      text-align: center;
    }

    .outcome strong {
      display: block;
      color: var(--blue);
      font-size: 1.25rem;
      line-height: 1.1;
    }

    .outcome span {
      display: block;
      color: #48616a;
      font-size: 0.78rem;
      line-height: 1.25;
      margin-top: 5px;
    }

    .table-wrap {
      background: var(--paper);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 1320px;
      table-layout: fixed;
      font-size: 0.80rem;
    }

    thead th {
      background: var(--blue);
      color: white;
      border-right: 1px solid rgba(255,255,255,0.25);
      padding: 10px 8px;
      line-height: 1.15;
      font-weight: 700;
      text-align: center;
    }

    tbody td {
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      padding: 8px 8px;
      height: 44px;
      vertical-align: middle;
      color: #334c55;
      background: white;
    }

    tbody tr:nth-child(even) td { background: #fbfdfd; }
    tbody tr.section-row td { background: #edf6fb; font-weight: 700; color: #214a57; }
    tbody tr.child-row td:first-child { padding-left: 28px; color: #47636d; }
    tbody tr.current td { background: #ffffff; }

    th:first-child, td:first-child, th:nth-child(2), td:nth-child(2), th:nth-child(4), td:nth-child(4) { text-align: left; }

	.annotation {
		font-size: -.3em;
		color: #898989;
		font-weight: 500;
		font-style: italic;
		line-height: 20px;
	}

	.progress-cell {
      display: grid;
      grid-template-columns: 1fr 36px;
      gap: 6px;
      align-items: center;
    }

    .mini-progress {
      height: 18px;
      background: #edf2f4;
      position: relative;
      overflow: hidden;
      min-width: 70px;
    }

    .mini-progress span {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, #289dd0, #1f8fc1);
    }

    .data-bar {
      display: flex;
      align-items: center;
      gap: 7px;
      justify-content: center;
    }

    .data-bar i {
      display: block;
      width: 48px;
      height: 18px;
      background: #d2d8db;
      position: relative;
      overflow: hidden;
    }

    .data-bar i::after {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: var(--fill, 50%);
      background: #aab7bc;
    }

    .status-dot {
      display: inline-block;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: var(--teal);
      vertical-align: middle;
      margin-right: 6px;
    }

    .status-dot.gold { background: var(--gold); }
    .status-dot.blue { background: var(--blue); }
    .status-dot.green { background: var(--green); }
    .status-dot.red { background: var(--red); }

    .lower-grid {
      margin-top: 18px;
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 14px;
    }

    .skills-block,
    .proof-block {
      background: var(--paper);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }

    .block-title {
      background: var(--blue);
      color: #fff;
      padding: 8px 12px;
      font-weight: 700;
      text-align: center;
    }

    .skills-body,
    .proof-body { padding: 16px; }

    .skills-grid {
  	  display: grid;
  	  gap: 10px;
	}

	.skill-drawers {
	  display: grid;
	  gap: 8px;
	}

	.skill-drawer {
	  border: 1px solid var(--line);
	  background: #f8fbfc;
	}

	.skill-drawer-head {
	  width: 100%;
	  min-height: 42px;
	  display: grid;
	  grid-template-columns: minmax(150px, 1fr) minmax(90px, 150px) auto 18px;
	  align-items: center;
	  gap: 10px;
	  padding: 9px 10px;
	  border: 0;
	  background: #ffffff;
	  color: #425a63;
	  font: inherit;
	  font-size: 0.80rem;
	  text-align: left;
	  cursor: pointer;
	}

	.skill-drawer-head:hover {
	  background: #f3f8fa;
	}

	.skill-group-name {
	  font-weight: 700;
	  color: var(--ink);
	}

	.skill-count {
	  color: var(--muted);
	  font-size: 0.72rem;
	  white-space: nowrap;
	}

	.skill-toggle {
	  color: var(--blue);
	  font-weight: 800;
	  text-align: right;
	}

	.skill-track {
	  height: 12px;
	  background: #e7edef;
	  border: 1px solid var(--line);
	}

	.skill-track span {
	  display: block;
	  height: 100%;
	  background: linear-gradient(90deg, var(--teal), var(--blue));
	}

	.skill-drawer-body {
	  padding: 4px 12px 12px;
	}

	.skill-columns {
	  columns: 2;
	  column-gap: 24px;
	  margin: 0;
	  padding: 0 0 0 16px;
	  color: #425a63;
	  font-size: 0.78rem;
	  line-height: 1.45;
	}

	.skill-columns li {
	  break-inside: avoid;
	  margin: 0 0 5px;
	}

	@media (max-width: 760px) {
	  .skill-drawer-head {
		grid-template-columns: 1fr 90px 18px;
	  }

	  .skill-count {
		display: none;
	  }

	  .skill-columns {
		columns: 1;
	  }
	}

    .footer-note {
      margin-top: 12px;
      color: var(--muted);
      text-align: center;
      font-size: 0.85rem;
    }

    @media (max-width: 1180px) {
      .profile-strip,
      .top-grid,
      .lower-grid { grid-template-columns: 1fr; }
      .metric-stack { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; }
    }

    @media (max-width: 760px) {
      .page { width: min(100% - 22px, 100%); padding-top: 20px; }
      .metric-stack, .skills-grid, .proof-grid { grid-template-columns: 1fr; }
      .outcome-grid { grid-template-columns: 1fr; height: auto; }
      .title-block h1 { font-size: 2rem; }
    }
	
	/* WORK EXAMPLES */
	  
	.proof-block {
	  background: var(--paper); 
	  border: 1px solid var(--line);
	  box-shadow: var(--shadow);
	  border-radius: 0; 
	}

	.proof-header-area {
	  padding: 15px 0px 0px 8px;
	  margin: 10px 0px 0px 10px;	
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}

	.proof-title-area {
	  background: var(--blue);
	  color: #fff;
	  padding: 8px 12px;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}

	.proof-title-area .block-title {
	  font-size: 1rem;
	  font-weight: 700;
	  color: #fff;
	  margin: 0;
	  text-transform: none; 
	}

	.proof-count {
	  font-size: 0.72rem;
	  background: rgba(255, 255, 255, 0.2);
	  padding: 2px 8px;
	  border-radius: 4px;
	  color: #fff;
	}

	.proof-body {
	  padding: 34px;
	}

	.proof-grid {
	  display: grid;
	  grid-template-columns: repeat(auto-fill, minmax(220px, 280px));
	  gap: 25px;
	  justify-content: start;
	}
	.proof-card {
	  border: 1px solid var(--line);
	  background: #f8fbfc;
	  overflow: hidden;
	  display: flex;
	  flex-direction: column;
	  transition: border-color 0.2s ease;
	}

	.proof-card:hover {
	  border-color: var(--blue);
	}

	.proof-img-container {
	  width: 100%;
	  height: 160px;
	  background: #fff;
	  overflow: hidden;
	  border-bottom: 1px solid var(--line);
	  padding: 8px;
	}

	.proof-img-container img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	  object-position: top center;
	}

	.proof-card-content {
	  padding: 12px;
	  flex-grow: 1;
	}

	.proof-card small {
	  color: var(--blue);
	  font-size: 0.70rem;
	  font-weight: 800;
	  letter-spacing: 0.05em;
	  text-transform: uppercase;
	  margin-bottom: 4px;
	  display: block;
	}

	.proof-card strong {
	  display: block;
	  font-size: 0.95rem;
	  line-height: 1.2;
	  color: var(--ink);
	  margin-bottom: 6px;
	}

	.proof-card span {
	  display: block;
	  color: var(--muted);
	  font-size: 0.78rem;
	  line-height: 1.35;
	}


/* LAB */

	.project-title-area {
	  background: var(--teal);
	  color: #fff;
	  padding: 8px 12px;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}

	.project-title-area .block-title {
	  font-size: 1rem;
	  font-weight: 700;
	  color: #fff;
	  margin: 0;
	  text-transform: none; 
	}

	/* GRADIENTS */

	.gradient-title {
	  display: inline-block;
	  width: fit-content;
	  font-size: clamp(1.3rem, 2.5vw, 2rem);
	  font-weight: 600;
	  letter-spacing: -0.01em;

	  background: linear-gradient(
		25deg,
		#0f79ba 0%,
		#0f79ba 35%,
		#0f79ba 70%,
		#000000 100%
	  );

	  -webkit-background-clip: text;
	  background-clip: text;
	  -webkit-text-fill-color: transparent;
	  color: transparent;
	}