/* =========================================================
   DAVID BECERRA
   ELECTRICAL ENGINEERING PORTFOLIO
   styles.css
========================================================= */


/* =========================================================
   00 / FONTS
========================================================= */

@import url(
    "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Roboto+Mono:wght@500;600;700&display=swap"
);



/* =========================================================
   00 / GLOBAL VARIABLES
========================================================= */

:root {

    /* MAIN COLORS */

    --navy: #0c1b2d;

    --navy-project: #0d2035;

    --navy-deep: #071522;

    --blue: #1168f5;

    --blue-light: #67aaff;

    --green: #35c98f;


    /* LIGHT BACKGROUNDS */

    --white: #ffffff;

    --page-bg: #f5f7fa;

    --cap-bg: #edf3f7;


    /* TEXT */

    --text: #0c1b2d;

    --muted: #697a90;


    /* BORDERS */

    --line: #d7e0e9;

    --dark-line: #304157;


    /* LAYOUT */

    --max-width: 1080px;

}



/* =========================================================
   00 / RESET
========================================================= */

* {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--text);

    background: var(--white);

    line-height: 1.6;

}


img {

    display: block;

    max-width: 100%;

}


a {

    color: inherit;

    text-decoration: none;

}


button,
input,
textarea {

    font: inherit;

}


.container {

    width: min(
        90%,
        var(--max-width)
    );

    margin-inline: auto;

}



/* =========================================================
   HEADER / NAVIGATION
========================================================= */

.site-header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 1000;

  background:
      rgba(248, 250, 252, 0.94);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  border-bottom:
      1px solid
      rgba(12, 27, 45, 0.08);

  box-shadow:
      0 4px 20px
      rgba(12, 27, 45, 0.035);

}


.nav-container {

  min-height: 92px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}


/* =========================================================
 HEADER / SECTION SCROLL OFFSET
========================================================= */

#about,
#projects,
#capabilities,
#contact {

  scroll-margin-top: 110px;

}



/* =========================================================
   HEADER / LOGO + NAME
========================================================= */

.brand {

    display: flex;

    align-items: center;

    gap: 12px;

}


.brand-mark {

    width: 34px;

    height: 34px;

    display: grid;

    place-items: center;

    background: var(--navy);

    color: white;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .05em;

}


.brand-copy {

    display: flex;

    flex-direction: column;

    line-height: 1.05;

}


.brand-copy strong {

    font-size: 12px;

    font-weight: 800;

}


.brand-copy span {

    margin-top: 4px;

    color: var(--muted);

    font-family: "Roboto Mono", monospace;

    font-size: 8px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .13em;

}



/* =========================================================
   HEADER / NAV LINKS
========================================================= */

.nav-links {

    display: flex;

    align-items: center;

    gap: 30px;

}


.nav-links a {

    font-size: 11px;

    font-weight: 700;

    transition: .2s ease;

}


.nav-links a:hover {

    color: var(--blue);

}


.resume-nav {

    padding: 11px 16px;

    border: 1px solid var(--navy);

}


.resume-nav:hover {

    background: var(--navy);

    color: white !important;

}



/* =========================================================
   HERO / MAIN SECTION
========================================================= */

.hero {

    min-height: 790px;

    padding-top: 92px;

    position: relative;

    overflow: hidden;

    background-color: var(--page-bg);


    background-image:

        linear-gradient(
            rgba(20, 55, 90, .035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(20, 55, 90, .035) 1px,
            transparent 1px
        );


    background-size: 32px 32px;

}



/* =========================================================
   HERO / DECORATIVE CIRCLE
========================================================= */

.hero::after {

    content: "";

    position: absolute;

    width: 580px;

    height: 580px;

    right: -265px;

    top: 48px;

    border:
        1px solid
        rgba(17, 104, 245, .13);

    border-radius: 50%;

    pointer-events: none;

}



/* =========================================================
   HERO / GRID
========================================================= */

.hero-grid {

    min-height: 698px;

    display: grid;

    grid-template-columns:
        1.24fr
        .8fr;

    gap: 72px;

    align-items: center;

    position: relative;

    z-index: 2;

}



/* =========================================================
   HERO / LOCATION LABEL
========================================================= */

.location {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 28px;

    color: #55677d;

    font-family: "Roboto Mono", monospace;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .18em;

}


.location-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 0 5px
        rgba(53, 201, 143, .12);

}



/* =========================================================
   HERO / MAIN TITLE
========================================================= */

.hero h1 {

    margin: 0;

    max-width: 650px;

    color: var(--navy);

    font-size:
        clamp(
            58px,
            5.15vw,
            80px
        );

    font-weight: 800;

    line-height: .98;

    letter-spacing: -.06em;

}


.hero h1 .blue {

    color: var(--blue);

}



/* =========================================================
   HERO / DESCRIPTION
========================================================= */

.hero-description {

    max-width: 620px;

    margin:
        30px
        0
        0;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.65;

}



/* =========================================================
   HERO / BUTTONS
========================================================= */

.hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 28px;

}


.button {

    min-height: 46px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        0
        20px;

    font-size: 11px;

    font-weight: 800;

    transition: .2s ease;

}


.button.primary {

    background: var(--blue);

    color: white;

}


.button.primary:hover {

    background: #075bdd;

}


.button.secondary {

    background:
        rgba(
            255,
            255,
            255,
            .85
        );

    border:
        1px solid
        var(--line);

}


.button.secondary:hover {

    background: white;

}



/* =========================================================
   HERO / DISCIPLINES
========================================================= */

.hero-disciplines {

    display: flex;

    flex-wrap: wrap;

    gap: 28px;

    margin-top: 27px;

    color: #586a80;

    font-family: "Roboto Mono", monospace;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .05em;

}

/* =========================================================
   HERO / GRADUATE PROFILE CARD
========================================================= */

.graduate-card {
  width: 100%;
  max-width: 365px;

  margin-left: auto;

  display: flex;
  flex-direction: column;

  background: transparent;

  box-shadow:
      0 28px 60px
      rgba(12, 27, 45, .13);
}



/* =========================================================
 HERO / GRADUATION IMAGE
========================================================= */

.graduate-image {
  position: relative;

  width: 100%;

  /* Tall portrait frame that still keeps full body visible */
  aspect-ratio: 10 / 19;

  overflow: hidden;

  background: #dfe7ef;
}


.graduate-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  /* Keeps the bottom of the image / shoes visible */
  object-position: center bottom;
}



/* =========================================================
 HERO / GRADUATE BADGE
========================================================= */

.graduate-badge {
  position: absolute;

  top: 18px;
  right: 18px;

  z-index: 5;

  display: flex;
  align-items: center;

  gap: 10px;

  padding:
      9px
      12px;

  background: var(--navy);

  color: white;

  font-family: "Roboto Mono", monospace;

  font-size: 7px;
  font-weight: 800;

  letter-spacing: .09em;

  white-space: nowrap;
}


.graduate-badge span {
  color: #59d0ff;
}



/* =========================================================
 HERO / INFO BOX BELOW PHOTO
========================================================= */

.graduate-footer {
  width: 100%;
  min-height: 72px;

  margin-top: 0;

  display: flex;

  align-items: center;
  justify-content: space-between;

  padding:
      17px
      20px;

  background: var(--navy);

  color: white;
}



/* =========================================================
 HERO / NAME
========================================================= */

.graduate-footer > strong {
  flex-shrink: 0;

  font-family: "Roboto Mono", monospace;

  font-size: 8px;
  font-weight: 800;

  letter-spacing: .08em;

  white-space: nowrap;
}



/* =========================================================
 HERO / DEGREE
========================================================= */

.graduate-degree {
  min-width: 190px;

  display: flex;
  flex-direction: column;

  margin-left: 20px;

  padding-left: 20px;

  border-left:
      1px solid
      rgba(255, 255, 255, .22);
}


.graduate-degree strong {
  color: white;

  font-size: 8px;
  font-weight: 700;

  line-height: 1.2;

  white-space: nowrap;
}


.graduate-degree span {
  margin-top: 5px;

  color: #93a4b9;

  font-family: "Roboto Mono", monospace;

  font-size: 7px;

  line-height: 1;

  white-space: nowrap;
}

/* =========================================================
   01 / ABOUT
========================================================= */

.about-section {

    padding:
        100px
        0
        110px;

    background: white;

}



/* =========================================================
   ABOUT / TOP SECTION
========================================================= */

.about-header {

    display: grid;

    grid-template-columns:
        180px
        1fr;

    gap: 40px;

}


.section-label {

    padding-top: 10px;

    color: var(--blue);

    font-family: "Roboto Mono", monospace;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .1em;

}


.about-heading h2 {

    max-width: 780px;

    margin: 0;

    color: var(--navy);

    font-size:
        clamp(
            42px,
            4.5vw,
            62px
        );

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -.05em;

}


.about-heading > p {

    max-width: 700px;

    margin-top: 28px;

    color: var(--muted);

    font-size: 17px;

    line-height: 1.65;

}



/* =========================================================
   ABOUT / DIVIDER
========================================================= */

.about-divider {

    height: 1px;

    margin:
        72px
        0
        55px;

    background: var(--line);

}



/* =========================================================
   ABOUT / LOWER SECTION
========================================================= */

.about-details {

    display: grid;

    grid-template-columns:
        1.08fr
        1fr;

    gap: 90px;

}


.about-copy h3 {

    margin: 0;

    max-width: 610px;

    color: var(--navy);

    font-size: 25px;

    line-height: 1.55;

    letter-spacing: -.025em;

}


.about-copy p {

    max-width: 610px;

    margin-top: 26px;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.7;

}



/* =========================================================
   ABOUT / ENGINEERING PROCESS
========================================================= */

.engineering-process {

    border-top:
        1px solid
        var(--line);

}


.process-row {

    min-height: 120px;

    display: grid;

    grid-template-columns:
        38px
        105px
        1fr;

    gap: 18px;

    align-items: start;

    padding:
        26px
        0;

    border-bottom:
        1px solid
        var(--line);

}


.process-number {

    color: var(--blue);

    font-family: "Roboto Mono", monospace;

    font-size: 9px;

    font-weight: 800;

}


.process-row strong {

    color: var(--navy);

    font-size: 14px;

}


.process-row p {

    margin: 0;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.55;

}

/* =========================================================
   PROJECTS / SHARED DARK STYLE
========================================================= */

.dark-project {
  background: var(--navy-project);
  color: white;
}


.project-case {
  padding:
      34px
      0
      88px;
}


.project-container {
  width: min(
      92%,
      1180px
  );

  margin-inline: auto;
}



/* =========================================================
 PROJECTS / TOP BAR
========================================================= */

.project-topline {
  display: flex;

  justify-content: space-between;

  gap: 30px;

  padding-bottom: 20px;

  border-bottom:
      1px solid
      var(--dark-line);

  color: #8195ac;

  font-family: "Roboto Mono", monospace;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .1em;
}



/* =========================================================
 PROJECTS / HEADINGS
========================================================= */

.project-heading {
  margin:
      35px
      0
      30px;
}


.project-eyebrow {
  margin:
      0
      0
      10px;

  color: var(--blue-light);

  font-family: "Roboto Mono", monospace;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .12em;
}


.project-heading h2,
.glove-intro h2 {
  margin: 0;

  color: white;

  font-size:
      clamp(
          40px,
          4.5vw,
          60px
      );

  line-height: 1.04;

  letter-spacing: -.045em;
}


.project-intro {
  max-width: 760px;

  margin-top: 18px;

  color: #9eafc1;

  font-size: 15px;

  line-height: 1.65;
}



/* =========================================================
 PROJECT 01 / HEADING
========================================================= */

.solar-project-heading {
  margin-bottom: 42px;
}



/* =========================================================
 PROJECT 01 / PROJECT TEAM
========================================================= */

.solar-team {
  margin-bottom: 44px;
}


.solar-team-label {
  margin-bottom: 12px;

  color: #71869d;

  font-family: "Roboto Mono", monospace;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .12em;
}


.solar-team-grid {
  display: grid;

  grid-template-columns:
      repeat(3, 1fr);

  border-top:
      1px solid
      var(--dark-line);

  border-bottom:
      1px solid
      var(--dark-line);
}


.solar-team-member {
  min-height: 100px;

  display: grid;

  grid-template-columns:
      34px
      1fr;

  gap: 14px;

  align-items: center;

  padding:
      20px
      22px;

  border-right:
      1px solid
      var(--dark-line);
}


.solar-team-member:last-child {
  border-right: 0;
}


.team-number {
  color: var(--blue-light);

  font-family: "Roboto Mono", monospace;

  font-size: 9px;

  font-weight: 800;
}


.solar-team-member strong {
  display: block;

  color: white;

  font-size: 14px;

  font-weight: 700;
}


.solar-team-member p {
  margin:
      4px
      0
      0;

  color: #8195ac;

  font-family: "Roboto Mono", monospace;

  font-size: 9px;

  line-height: 1.5;
}



/* =========================================================
 PROJECT 01 / MAIN PROJECT IMAGE
========================================================= */

.solar-hero-image {
  width: 100%;

  overflow: hidden;

  margin-bottom: 60px;

  border:
      1px solid
      var(--dark-line);

  background: #081522;
}


.solar-image-header {
  min-height: 43px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding:
      0
      18px;

  background: var(--navy-deep);

  color: #8398b0;

  font-family: "Roboto Mono", monospace;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .09em;
}


.solar-hero-image img {
  display: block;

  width: 100%;

  height: auto;
}



/* =========================================================
 PROJECT 01 / PROBLEM · OBJECTIVE · CONTRIBUTION
========================================================= */

.solar-story {
  border-top:
      1px solid
      var(--dark-line);
}


.solar-story-section {
  display: grid;

  grid-template-columns:
      230px
      minmax(0, 1fr);

  gap: 70px;

  padding:
      46px
      0;

  border-bottom:
      1px solid
      var(--dark-line);
}


.solar-story-label {
  display: flex;

  align-items: flex-start;

  gap: 22px;
}


.solar-story-label span {
  padding-top: 3px;

  color: var(--blue-light);

  font-family: "Roboto Mono", monospace;

  font-size: 9px;

  font-weight: 800;
}


.solar-story-label h3 {
  margin: 0;

  color: white;

  font-family: "Roboto Mono", monospace;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .12em;
}


.solar-story-copy {
  max-width: 760px;
}


.solar-story-copy p {
  margin:
      0
      0
      18px;

  color: #aab8c9;

  font-size: 16px;

  line-height: 1.75;
}


.solar-story-copy p:last-child {
  margin-bottom: 0;
}



/* =========================================================
 PROJECT 01 / MY CONTRIBUTION EMPHASIS
========================================================= */

.solar-contribution {
  position: relative;

  background:
      linear-gradient(
          90deg,
          rgba(17, 104, 245, .055),
          rgba(17, 104, 245, 0) 60%
      );
}



/* =========================================================
 PROJECTS / MEDIA HEADER
========================================================= */

.media-header {
  min-height: 43px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding:
      0
      18px;

  background: var(--navy-deep);

  color: #9daec0;

  font-family: "Roboto Mono", monospace;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .08em;
}


.media-header a {
  transition: .2s ease;
}


.media-header a:hover {
  color: white;
}


.play-dot {
  margin-right: 7px;

  color: var(--blue);
}



/* =========================================================
 PROJECT 01 / SYSTEM TESTING SECTION
========================================================= */

.solar-video-section {
  margin-top: 70px;
}


.solar-video-heading {
  display: grid;

  grid-template-columns:
      1fr
      .85fr;

  gap: 60px;

  align-items: end;

  margin-bottom: 24px;
}


.solar-video-heading h3 {
  margin: 0;

  color: white;

  font-size: 32px;

  line-height: 1.1;

  letter-spacing: -.035em;
}


.solar-video-heading > p {
  max-width: 480px;

  margin: 0;

  color: #8498ae;

  font-size: 13px;

  line-height: 1.6;
}



/* =========================================================
 PROJECT 01 / SOLAR VIDEO CARD
========================================================= */

.video-card {
  width: 100%;

  overflow: hidden;

  border:
      1px solid
      var(--dark-line);

  background: #081522;
}



/* =========================================================
 PROJECT 01 / YOUTUBE VIDEO
========================================================= */

.solar-video {
  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9;

  background: black;
}


.solar-video iframe {
  display: block;

  width: 100%;

  height: 100%;

  border: 0;
}



/* =========================================================
 PROJECT 01 / SYSTEM SPECIFICATIONS SECTION
========================================================= */

.solar-specifications {
  display: grid;

  grid-template-columns:
      .8fr
      1fr;

  gap: 80px;

  margin-top: 70px;
}


.solar-spec-heading h3 {
  max-width: 380px;

  margin:
      8px
      0
      0;

  color: white;

  font-size: 28px;

  line-height: 1.2;

  letter-spacing: -.035em;
}



/* =========================================================
 PROJECT 01 / SPECIFICATIONS
========================================================= */

.spec-list {
  border-top:
      1px solid
      var(--dark-line);
}


.spec {
  min-height: 52px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  border-bottom:
      1px solid
      var(--dark-line);
}


.spec span {
  color: #7489a1;

  font-family: "Roboto Mono", monospace;

  font-size: 9px;

  font-weight: 700;
}


.spec strong {
  color: white;

  font-size: 13px;

  text-align: right;
}



/* =========================================================
 PROJECT 01 / METRICS
========================================================= */

.metric-grid {
  display: grid;

  grid-template-columns:
      repeat(
          4,
          1fr
      );

  margin-top: 70px;

  border:
      1px solid
      var(--dark-line);
}


.metric {
  min-height: 145px;

  padding:
      30px
      26px;

  border-right:
      1px solid
      var(--dark-line);
}


.metric:last-child {
  border-right: 0;
}


.metric strong {
  display: block;

  margin-bottom: 10px;

  color: white;

  font-size: 30px;

  font-weight: 800;
}


.metric span {
  color: #8295ac;

  font-family: "Roboto Mono", monospace;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .06em;

  line-height: 1.5;
}



/* =========================================================
 PROJECTS / SHARED PROJECT BLOCK
 ALSO USED BY PROJECT 02
========================================================= */

.project-block {
  margin-bottom: 30px;
}


.project-block h3 {
  margin:
      0
      0
      12px;

  color: var(--blue-light);

  font-family: "Roboto Mono", monospace;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .12em;
}


.project-block p {
  margin: 0;

  color: #aab8c9;

  font-size: 15px;

  line-height: 1.75;
}



/* =========================================================
 PROJECTS / TECHNOLOGY TAGS
 ALSO USED BY PROJECT 02
========================================================= */

.project-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;
}


.project-tags span {
  padding:
      7px
      10px;

  border:
      1px solid
      var(--dark-line);

  color: #a7b7c9;

  font-family: "Roboto Mono", monospace;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .05em;

  text-transform: uppercase;
}



/* =========================================================
 PROJECT 01 / FOOTER
========================================================= */

.solar-footer {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 40px;

  margin-top: 38px;
}


.test-note {
  max-width: 360px;

  margin: 0;

  color: #8295ac;

  text-align: right;

  font-size: 11px;

  line-height: 1.5;
}


.test-note strong {
  margin-right: 4px;

  color: white;
}



/* =========================================================
 PROJECT 01 / TABLET
========================================================= */

@media (max-width: 950px) {

  .solar-team-grid {
      grid-template-columns: 1fr;
  }


  .solar-team-member {
      border-right: 0;

      border-bottom:
          1px solid
          var(--dark-line);
  }


  .solar-team-member:last-child {
      border-bottom: 0;
  }


  .solar-story-section {
      grid-template-columns: 1fr;

      gap: 24px;
  }


  .solar-video-heading {
      grid-template-columns: 1fr;

      gap: 18px;
  }


  .solar-specifications {
      grid-template-columns: 1fr;

      gap: 30px;
  }


  .metric-grid {
      grid-template-columns:
          repeat(
              2,
              1fr
          );
  }


  .metric:nth-child(2) {
      border-right: 0;
  }


  .metric:nth-child(-n+2) {
      border-bottom:
          1px solid
          var(--dark-line);
  }


  .solar-footer {
      flex-direction: column;

      align-items: flex-start;
  }


  .test-note {
      text-align: left;
  }

}



/* =========================================================
 PROJECT 01 / MOBILE
========================================================= */

@media (max-width: 700px) {

  .project-topline {
      font-size: 7px;
  }


  .solar-team-member {
      padding:
          18px
          14px;
  }


  .solar-image-header {
      padding:
          0
          12px;

      font-size: 7px;
  }


  .solar-story-section {
      padding:
          36px
          0;
  }


  .solar-story-label {
      gap: 14px;
  }


  .solar-story-copy p {
      font-size: 14px;
  }


  .solar-video-section {
      margin-top: 52px;
  }


  .solar-video-heading h3 {
      font-size: 27px;
  }


  .solar-specifications {
      margin-top: 52px;
  }


  .solar-spec-heading h3 {
      font-size: 24px;
  }


  .metric-grid {
      grid-template-columns: 1fr;
  }


  .metric {
      border-right: 0;

      border-bottom:
          1px solid
          var(--dark-line);
  }


  .metric:last-child {
      border-bottom: 0;
  }

}

/* =========================================================
   PROJECT 02 / DRAWING GLOVE
========================================================= */

.glove-project {

  padding-top: 34px;

  border-top:
      1px solid
      rgba(255, 255, 255, .03);

}



/* =========================================================
 PROJECT 02 / HEADING
========================================================= */

.glove-project-heading {

  margin-bottom: 42px;

}



/* =========================================================
 PROJECT 02 / PROJECT TEAM
========================================================= */

.glove-team {

  margin-bottom: 44px;

}


.glove-team-label {

  margin-bottom: 12px;

  color: #71869d;

  font-family: "Roboto Mono", monospace;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .12em;

}


.glove-team-grid {

  display: grid;

  grid-template-columns:
      repeat(4, 1fr);

  border-top:
      1px solid
      var(--dark-line);

  border-bottom:
      1px solid
      var(--dark-line);

}


.glove-team-member {

  min-height: 94px;

  display: grid;

  grid-template-columns:
      32px
      1fr;

  gap: 12px;

  align-items: center;

  padding:
      20px;

  border-right:
      1px solid
      var(--dark-line);

}


.glove-team-member:last-child {

  border-right: 0;

}


.glove-team-member strong {

  color: white;

  font-size: 13px;

  line-height: 1.4;

}

/* =========================================================
   PROJECT 02 / MAIN PROJECT IMAGE
========================================================= */

.glove-hero-image {

  width: 100%;

  margin-bottom: 60px;

  padding-bottom: 28px;

  overflow: hidden;

  border:
      1px solid
      var(--dark-line);

  background: #081522;

}



/* =========================================================
   PROJECT 02 / MAIN PROJECT IMAGE
========================================================= */

.glove-hero-image {

  width: 100%;

  margin-bottom: 60px;

  overflow: hidden;

  border:
      1px solid
      var(--dark-line);

  background: #081522;

}



/* =========================================================
 PROJECT 02 / IMAGE HEADER
========================================================= */

.glove-image-header {

  min-height: 43px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding:
      0
      18px;

  background: var(--navy-deep);

  color: #8398b0;

  font-family:
      "Roboto Mono",
      monospace;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .09em;

}



/* =========================================================
 PROJECT 02 / IMAGE
========================================================= */

.glove-hero-image img {

  display: block;

  width: 100%;

  max-width: none;

  height: auto;

  margin: 0;

  border: 0;

}



/* =========================================================
 PROJECT 02 / PROBLEM · OBJECTIVE · CONTRIBUTION
========================================================= */

.glove-story {

  border-top:
      1px solid
      var(--dark-line);

}


.glove-story-section {

  display: grid;

  grid-template-columns:
      230px
      minmax(0, 1fr);

  gap: 70px;

  padding:
      46px
      0;

  border-bottom:
      1px solid
      var(--dark-line);

}


.glove-story-label {

  display: flex;

  align-items: flex-start;

  gap: 22px;

}


.glove-story-label span {

  padding-top: 3px;

  color: var(--blue-light);

  font-family: "Roboto Mono", monospace;

  font-size: 9px;

  font-weight: 800;

}


.glove-story-label h3 {

  margin: 0;

  color: white;

  font-family: "Roboto Mono", monospace;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .12em;

}


.glove-story-copy {

  max-width: 760px;

}


.glove-story-copy > p {

  margin:
      0
      0
      18px;

  color: #aab8c9;

  font-size: 16px;

  line-height: 1.75;

}


.glove-story-copy > p:last-child {

  margin-bottom: 0;

}


.glove-contribution {

  background:
      linear-gradient(
          90deg,
          rgba(17, 104, 245, .055),
          rgba(17, 104, 245, 0) 60%
      );

}



/* =========================================================
 PROJECT 02 / OBJECTIVE BREAKDOWN
========================================================= */

.glove-objective-list {

  margin-top: 28px;

  border-top:
      1px solid
      var(--dark-line);

}


.glove-objective-list > div {

  display: grid;

  grid-template-columns:
      160px
      1fr;

  gap: 26px;

  padding:
      18px
      0;

  border-bottom:
      1px solid
      var(--dark-line);

}


.glove-objective-list strong {

  color: white;

  font-size: 13px;

}


.glove-objective-list span {

  color: #8fa2b8;

  font-size: 13px;

  line-height: 1.6;

}



/* =========================================================
 PROJECT 02 / SYSTEM ARCHITECTURE
========================================================= */

.glove-system-section {

  margin-top: 70px;

}


.glove-system-heading {

  display: grid;

  grid-template-columns:
      1fr
      .85fr;

  gap: 60px;

  align-items: end;

  margin-bottom: 28px;

}


.glove-system-heading h3 {

  max-width: 500px;

  margin: 0;

  color: white;

  font-size: 32px;

  line-height: 1.1;

  letter-spacing: -.035em;

}


.glove-system-heading > p {

  margin: 0;

  color: #8498ae;

  font-size: 13px;

  line-height: 1.6;

}



/* =========================================================
 PROJECT 02 / INPUT → PROCESS → OUTPUT
========================================================= */

.system-flow {

  display: grid;

  grid-template-columns:
      1fr
      30px
      1fr
      30px
      1fr;

  gap: 7px;

  align-items: stretch;

  margin:
      30px
      0;

}


.flow-box {

  min-height: 145px;

  padding:
      20px;

  border:
      1px solid
      var(--dark-line);

  background:
      rgba(
          255,
          255,
          255,
          .012
      );

}


.flow-box span {

  display: block;

  margin-bottom: 16px;

  color: #73889f;

  font-family: "Roboto Mono", monospace;

  font-size: 8px;

  font-weight: 700;

}


.flow-box strong {

  display: block;

  margin-top: 7px;

  color: white;

  font-size: 11px;

}


.flow-arrow {

  display: grid;

  place-items: center;

  color: var(--blue);

  font-size: 20px;

  text-align: center;

}



/* =========================================================
 PROJECT 02 / WORKING DEMO SECTION
========================================================= */

.glove-demo-section {

  margin-top: 70px;

}


.glove-demo-heading {

  display: grid;

  grid-template-columns:
      1fr
      .85fr;

  gap: 60px;

  align-items: end;

  margin-bottom: 24px;

}


.glove-demo-heading h3 {

  max-width: 520px;

  margin: 0;

  color: white;

  font-size: 32px;

  line-height: 1.1;

  letter-spacing: -.035em;

}


.glove-demo-heading > p {

  margin: 0;

  color: #8498ae;

  font-size: 13px;

  line-height: 1.6;

}



/* =========================================================
 PROJECT 02 / DEMO AREA
========================================================= */

.glove-demo {

  display: grid;

  grid-template-columns:
      minmax(0, 2fr)
      minmax(280px, .92fr);

  align-items: stretch;

  border:
      1px solid
      var(--dark-line);

}



/* =========================================================
   PROJECT 02 / VIDEO COLUMN
========================================================= */

.demo-video {

  min-width: 0;

  height: 100%;

  display: flex;

  flex-direction: column;

  background: #081522;

  border-right:
      1px solid
      var(--dark-line);

}



/* =========================================================
 PROJECT 02 / YOUTUBE VIDEO
========================================================= */

.glove-video {

  position: relative;

  width: 100%;

  /* Fill the remaining height under the header */
  flex: 1;

  min-height: 0;

  overflow: hidden;

  background: #000;

}


.glove-video iframe {

  position: absolute;

  inset: 0;

  display: block;

  width: 100% !important;

  height: 100% !important;

  border: 0;

}



/* =========================================================
 PROJECT 02 / DEMO DESCRIPTION
========================================================= */

.demo-description {

  min-width: 0;

  padding:
      38px
      36px;

  background: var(--navy-project);

}



/* =========================================================
 PROJECT 02 / DEMO FEATURES
========================================================= */

.demo-feature {

  display: grid;

  grid-template-columns:
      30px
      1fr;

  gap: 12px;

  padding:
      18px
      0;

  border-top:
      1px solid
      var(--dark-line);

}


.demo-feature > span {

  color: var(--blue-light);

  font-family: "Roboto Mono", monospace;

  font-size: 9px;

  font-weight: 800;

}


.demo-feature strong {

  color: white;

  font-size: 13px;

}


.demo-feature p {

  margin:
      4px
      0
      0;

  color: #8295ac;

  font-size: 12px;

  line-height: 1.5;

}



/* =========================================================
 PROJECT 02 / ENGINEERING TAKEAWAY
========================================================= */

.engineering-takeaway {

  padding-top: 22px;

  border-top:
      1px solid
      var(--dark-line);

}


.engineering-takeaway > span {

  color: var(--blue-light);

  font-family: "Roboto Mono", monospace;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .1em;

}


.engineering-takeaway p {

  color: #9aacbd;

  font-size: 12px;

  line-height: 1.6;

}



/* =========================================================
 PROJECT 02 / TABLET
========================================================= */

@media (max-width: 950px) {

  .glove-team-grid {

      grid-template-columns:
          repeat(2, 1fr);

  }


  .glove-team-member:nth-child(2) {

      border-right: 0;

  }


  .glove-team-member:nth-child(-n+2) {

      border-bottom:
          1px solid
          var(--dark-line);

  }


  .glove-story-section {

      grid-template-columns: 1fr;

      gap: 24px;

  }


  .glove-system-heading,
  .glove-demo-heading {

      grid-template-columns: 1fr;

      gap: 18px;

  }

}



/* =========================================================
 PROJECT 02 / DEMO STACKING
 ONLY STACK ON SMALLER SCREENS
========================================================= */

@media (max-width: 720px) {

  .glove-demo {

      grid-template-columns: 1fr;

  }


  .demo-video {

      border-right: 0;

      border-bottom:
          1px solid
          var(--dark-line);

  }

}



/* =========================================================
 PROJECT 02 / MOBILE
========================================================= */

@media (max-width: 700px) {

  .glove-team-grid {

      grid-template-columns: 1fr;

  }


  .glove-team-member {

      border-right: 0;

      border-bottom:
          1px solid
          var(--dark-line);

  }


  .glove-team-member:last-child {

      border-bottom: 0;

  }


  .glove-image-header {

      padding:
          0
          12px;

      font-size: 7px;

  }


  .glove-hero-image img {

      width: 90%;

  }


  .glove-story-section {

      padding:
          36px
          0;

  }


  .glove-story-label {

      gap: 14px;

  }


  .glove-story-copy > p {

      font-size: 14px;

  }


  .glove-objective-list > div {

      grid-template-columns: 1fr;

      gap: 6px;

  }


  .glove-system-section,
  .glove-demo-section {

      margin-top: 52px;

  }


  .system-flow {

      grid-template-columns: 1fr;

  }


  .flow-arrow {

      transform: rotate(90deg);

  }


  .demo-description {

      padding:
          30px
          24px;

  }

}

/* =========================================================
   03 / CAPABILITIES
========================================================= */

.capabilities {
  padding:
      105px
      0
      115px;

  background: var(--cap-bg);
}



/* =========================================================
 CAPABILITIES / HEADER
========================================================= */

.capabilities-header {
  display: grid;

  grid-template-columns:
      180px
      1fr;

  gap: 40px;
}


.capabilities-heading h2 {
  margin: 0;

  color: var(--navy);

  font-size:
      clamp(
          42px,
          5vw,
          64px
      );

  font-weight: 800;

  line-height: 1;

  letter-spacing: -.055em;
}


.capabilities-heading p {
  max-width: 760px;

  margin:
      26px
      0
      0;

  color: var(--muted);

  font-size: 17px;

  line-height: 1.65;
}



/* =========================================================
 CAPABILITIES / GRID
========================================================= */

.capability-grid {
  display: grid;

  grid-template-columns:
      repeat(2, minmax(0, 1fr));

  margin-top: 66px;

  border:
      1px solid
      var(--line);

  background: white;
}



/* =========================================================
 CAPABILITIES / CARDS
========================================================= */

.capability-card {
  min-height: 330px;

  display: flex;

  flex-direction: column;

  padding:
      36px;

  background: white;
}


.capability-card:nth-child(1),
.capability-card:nth-child(3) {
  border-right:
      1px solid
      var(--line);
}


.capability-card:nth-child(1),
.capability-card:nth-child(2) {
  border-bottom:
      1px solid
      var(--line);
}



/* =========================================================
 CAPABILITIES / CARD TOP
========================================================= */

.capability-top {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 55px;
}


.cap-number {
  color: var(--blue);

  font-family:
      "Roboto Mono",
      monospace;

  font-size: 9px;

  font-weight: 800;
}


.cap-category {
  color: #91a0b1;

  font-family:
      "Roboto Mono",
      monospace;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .1em;
}



/* =========================================================
 CAPABILITIES / TITLE
========================================================= */

.capability-card h3 {
  margin:
      0
      0
      14px;

  color: var(--navy);

  font-size: 23px;

  font-weight: 800;

  line-height: 1.15;

  letter-spacing: -.03em;
}



/* =========================================================
 CAPABILITIES / DESCRIPTION
========================================================= */

.cap-description {
  max-width: 500px;

  margin:
      0
      0
      28px;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.65;
}



/* =========================================================
 CAPABILITIES / CORE TOOLS LABEL
========================================================= */

.cap-tools-label {
  margin-top: auto;

  margin-bottom: 11px;

  color: #8a9bad;

  font-family:
      "Roboto Mono",
      monospace;

  font-size: 7px;

  font-weight: 800;

  letter-spacing: .12em;
}



/* =========================================================
 CAPABILITIES / TAGS
========================================================= */

.cap-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;
}


.cap-tags span {
  display: inline-flex;

  align-items: center;

  min-height: 29px;

  padding:
      6px
      10px;

  border:
      1px solid
      var(--line);

  background: white;

  color: #40536a;

  font-family:
      "Roboto Mono",
      monospace;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .04em;

  text-transform: uppercase;
}



/* =========================================================
 CAPABILITIES / HOVER
========================================================= */

.capability-card {
  transition:
      background .2s ease,
      box-shadow .2s ease;
}


.capability-card:hover {
  position: relative;

  z-index: 2;

  background: #fbfdff;

  box-shadow:
      0 16px 40px
      rgba(12, 27, 45, .06);
}


.capability-card:hover .cap-tags span {
  border-color:
      rgba(17, 104, 245, .28);
}



/* =========================================================
 CAPABILITIES / TABLET
========================================================= */

@media (max-width: 900px) {

  .capabilities-header {
      grid-template-columns: 1fr;

      gap: 20px;
  }


  .capability-grid {
      grid-template-columns: 1fr;
  }


  .capability-card:nth-child(1),
  .capability-card:nth-child(2),
  .capability-card:nth-child(3) {
      border-right: 0;

      border-bottom:
          1px solid
          var(--line);
  }


  .capability-card:nth-child(4) {
      border-right: 0;

      border-bottom: 0;
  }

}



/* =========================================================
 CAPABILITIES / MOBILE
========================================================= */

@media (max-width: 650px) {

  .capabilities {
      padding:
          75px
          0
          85px;
  }


  .capability-grid {
      margin-top: 45px;
  }


  .capability-card {
      min-height: auto;

      padding:
          30px
          24px;
  }


  .capability-top {
      margin-bottom: 38px;
  }


  .capability-card h3 {
      font-size: 20px;
  }

}

/* =========================================================
   04 / CONTACT
========================================================= */

.contact {

    padding:
        90px
        0;

    color: white;

    background-color: var(--blue);


    background-image:

        linear-gradient(
            rgba(255, 255, 255, .08) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255, 255, 255, .08) 1px,
            transparent 1px
        );


    background-size:
        32px
        32px;

}

/* =========================================================
   04 / CONTACT
========================================================= */

.contact {
  padding:
      100px
      0;

  color: white;

  background-color: var(--blue);

  background-image:
      linear-gradient(
          rgba(255, 255, 255, .08) 1px,
          transparent 1px
      ),
      linear-gradient(
          90deg,
          rgba(255, 255, 255, .08) 1px,
          transparent 1px
      );

  background-size:
      32px
      32px;
}



/* =========================================================
 CONTACT / GRID
========================================================= */

.contact-grid {
  display: grid;

  grid-template-columns:
      1.05fr
      .95fr;

  gap: 90px;

  align-items: center;
}



/* =========================================================
 CONTACT / LABEL
========================================================= */

.contact-label {
  color:
      rgba(
          255,
          255,
          255,
          .86
      );

  font-family:
      "Roboto Mono",
      monospace;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .12em;
}



/* =========================================================
 CONTACT / OPPORTUNITY STATUS
========================================================= */

.contact-status {
  display: flex;

  align-items: center;

  gap: 10px;

  margin:
      28px
      0
      24px;

  color:
      rgba(
          255,
          255,
          255,
          .9
      );

  font-family:
      "Roboto Mono",
      monospace;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: .1em;
}


.contact-status-dot {
  width: 8px;
  height: 8px;

  flex-shrink: 0;

  border-radius: 50%;

  background: #58e0ad;

  box-shadow:
      0 0 0 5px
      rgba(88, 224, 173, .16);
}



/* =========================================================
 CONTACT / HEADING
========================================================= */

.contact h2 {
  max-width: 560px;

  margin:
      0
      0
      32px;

  color: white;

  font-size:
      clamp(
          48px,
          6vw,
          76px
      );

  font-weight: 800;

  line-height: 1;

  letter-spacing: -.06em;
}



/* =========================================================
 CONTACT / DESCRIPTION
========================================================= */

.contact-description {
  max-width: 590px;

  margin:
      0
      0
      15px;

  color:
      rgba(
          255,
          255,
          255,
          .86
      );

  font-size: 15px;

  line-height: 1.75;
}



/* =========================================================
 CONTACT / FINAL CLOSING LINE
========================================================= */

.contact-closing {
  max-width: 560px;

  margin:
      30px
      0
      0;

  padding-top: 24px;

  border-top:
      1px solid
      rgba(255, 255, 255, .22);

  color: white;

  font-size: 15px;

  font-weight: 700;

  line-height: 1.65;
}



/* =========================================================
 CONTACT / PROFESSIONAL LINKS CARD
========================================================= */

.contact-card {
  background: white;

  color: var(--navy);

  box-shadow:
      14px
      14px
      0
      rgba(8, 55, 150, .2);
}



/* =========================================================
 CONTACT / CARD HEADING
========================================================= */

.contact-card-heading {
  padding:
      22px;

  color: #77879a;

  border-bottom:
      1px solid
      var(--line);

  font-family:
      "Roboto Mono",
      monospace;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: .12em;
}



/* =========================================================
 CONTACT / CARD ROWS
========================================================= */

.contact-card a {
  min-height: 66px;

  display: grid;

  grid-template-columns:
      90px
      1fr
      20px;

  align-items: center;

  gap: 16px;

  padding:
      0
      22px;

  border-bottom:
      1px solid
      var(--line);

  transition:
      background .2s ease,
      padding-left .2s ease;
}


.contact-card a:last-child {
  border-bottom: 0;
}


.contact-card a:hover {
  padding-left: 27px;

  background: #f5f8fc;
}



/* =========================================================
 CONTACT / ROW LABEL
========================================================= */

.contact-card a span {
  color: #8090a3;

  font-family:
      "Roboto Mono",
      monospace;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: .04em;
}



/* =========================================================
 CONTACT / ROW VALUE
========================================================= */

.contact-card a strong {
  color: var(--navy);

  font-size: 11px;

  font-weight: 700;

  overflow-wrap: anywhere;
}



/* =========================================================
 CONTACT / ROW ARROW
========================================================= */

.contact-card a b {
  color: var(--blue);

  font-size: 14px;

  font-weight: 700;

  text-align: right;

  transition: transform .2s ease;
}


.contact-card a:hover b {
  transform:
      translate(
          2px,
          -2px
      );
}



/* =========================================================
 CONTACT / TABLET
========================================================= */

@media (max-width: 950px) {

  .contact-grid {
      grid-template-columns: 1fr;

      gap: 55px;
  }


  .contact-copy {
      max-width: 680px;
  }


  .contact-card {
      max-width: 680px;
  }

}



/* =========================================================
 CONTACT / MOBILE
========================================================= */

@media (max-width: 700px) {

  .contact {
      padding:
          75px
          0;
  }


  .contact h2 {
      font-size: 48px;
  }


  .contact-status {
      align-items: flex-start;

      line-height: 1.5;
  }


  .contact-description,
  .contact-closing {
      font-size: 14px;
  }


  .contact-card a {
      min-height: 64px;

      grid-template-columns:
          70px
          1fr
          16px;

      gap: 10px;

      padding:
          0
          16px;
  }


  .contact-card a:hover {
      padding-left: 19px;
  }


  .contact-card a strong {
      font-size: 10px;
  }

}


























/* =========================================================
 CONTACT / VERY SMALL PHONES
========================================================= */

@media (max-width: 460px) {

  .contact h2 {
      font-size: 42px;
  }


  .contact-card {
      box-shadow:
          8px
          8px
          0
          rgba(8, 55, 150, .2);
  }


  .contact-card a {
      grid-template-columns:
          58px
          1fr
          14px;
  }

}

/* =========================================================
   DESKTOP / LAPTOP
   RESTORE DESKTOP LAYOUT EVEN IF WINDOW IS NARROW
========================================================= */

@media (hover: hover) and (pointer: fine) {

  /* -----------------------------------------------------
     HEADER
  ----------------------------------------------------- */

  .nav-container {
      min-height: 92px;

      display: flex;

      align-items: center;

      justify-content: space-between;

      padding: 0;
  }


  .brand {
      width: auto;

      display: flex;

      align-items: center;

      gap: 12px;
  }


  .nav-links {
      width: auto;

      display: flex;

      align-items: center;

      gap: 30px;

      padding: 0;

      border-top: 0;
  }


  .nav-links a {
      padding: 0;

      font-size: 11px;

      text-align: left;
  }


  .resume-nav {
      padding:
          11px
          16px;
  }



  /* -----------------------------------------------------
     HERO
  ----------------------------------------------------- */

  .hero {
      min-height: 790px;

      padding-top: 92px;
      padding-bottom: 0;
  }


  .hero-grid {
      min-height: 698px;

      display: grid;

      grid-template-columns:
          1.24fr
          .8fr;

      gap: 72px;

      align-items: center;
  }


  .hero h1 {
      max-width: 650px;

      font-size:
          clamp(
              58px,
              5.15vw,
              80px
          );

      line-height: .98;
  }


  .hero-buttons .button {
      width: auto;
  }


  .hero-disciplines {
      display: flex;

      flex-wrap: wrap;

      gap: 28px;

      margin-top: 27px;
  }


  .graduate-card {
      width: 100%;

      max-width: 365px;

      margin-left: auto;
      margin-right: 0;
  }


  .graduate-image img {
      width: 100%;
      height: 100%;

      object-fit: cover;

      object-position: center bottom;
  }



  /* -----------------------------------------------------
     ABOUT
  ----------------------------------------------------- */

  .about-header {
      grid-template-columns:
          180px
          1fr;

      gap: 40px;
  }


  .about-details {
      grid-template-columns:
          1.08fr
          1fr;

      gap: 90px;
  }


  .process-row {
      grid-template-columns:
          38px
          105px
          1fr;

      gap: 18px;
  }


  .process-number,
  .process-row strong,
  .process-row p {
      grid-column: auto;
      grid-row: auto;
  }



  /* -----------------------------------------------------
     PROJECT 01 / SOLAR
  ----------------------------------------------------- */

  .solar-team-grid {
      grid-template-columns:
          repeat(3, 1fr);
  }


  .solar-team-member {
      border-right:
          1px solid
          var(--dark-line);

      border-bottom: 0;
  }


  .solar-team-member:last-child {
      border-right: 0;
  }


  .solar-story-section {
      grid-template-columns:
          230px
          minmax(0, 1fr);

      gap: 70px;
  }


  .solar-video-heading {
      grid-template-columns:
          1fr
          .85fr;

      gap: 60px;
  }


  .solar-specifications {
      grid-template-columns:
          .8fr
          1fr;

      gap: 80px;
  }


  .metric-grid {
      grid-template-columns:
          repeat(4, 1fr);
  }


  .metric {
      border-right:
          1px solid
          var(--dark-line);

      border-bottom: 0;
  }


  .metric:last-child {
      border-right: 0;
  }


  .solar-footer {
      flex-direction: row;

      align-items: flex-end;
  }


  .test-note {
      text-align: right;
  }



  /* -----------------------------------------------------
     PROJECT 02 / DRAWING GLOVE
  ----------------------------------------------------- */

  .glove-team-grid {
      grid-template-columns:
          repeat(4, 1fr);
  }


  .glove-team-member {
      border-right:
          1px solid
          var(--dark-line);

      border-bottom: 0;
  }


  .glove-team-member:last-child {
      border-right: 0;
  }


  .glove-story-section {
      grid-template-columns:
          230px
          minmax(0, 1fr);

      gap: 70px;
  }


  .glove-system-heading,
  .glove-demo-heading {
      grid-template-columns:
          1fr
          .85fr;

      gap: 60px;
  }


  .system-flow {
      grid-template-columns:
          1fr
          30px
          1fr
          30px
          1fr;
  }


  .flow-arrow {
      transform: none;
  }


  .glove-demo {
      grid-template-columns:
          minmax(0, 2fr)
          minmax(280px, .92fr);
  }


  .demo-video {
      border-right:
          1px solid
          var(--dark-line);

      border-bottom: 0;
  }



  /* -----------------------------------------------------
     CAPABILITIES
  ----------------------------------------------------- */

  .capabilities-header {
      grid-template-columns:
          180px
          1fr;

      gap: 40px;
  }


  .capability-grid {
      grid-template-columns:
          repeat(2, minmax(0, 1fr));
  }


  .capability-card:nth-child(1),
  .capability-card:nth-child(3) {
      border-right:
          1px solid
          var(--line);
  }


  .capability-card:nth-child(2),
  .capability-card:nth-child(4) {
      border-right: 0;
  }


  .capability-card:nth-child(1),
  .capability-card:nth-child(2) {
      border-bottom:
          1px solid
          var(--line);
  }


  .capability-card:nth-child(3),
  .capability-card:nth-child(4) {
      border-bottom: 0;
  }



  /* -----------------------------------------------------
     CONTACT
  ----------------------------------------------------- */

  .contact-grid {
      grid-template-columns:
          1fr
          .9fr;

      gap: 90px;
  }


  .contact-card {
      max-width: none;
  }

}



/* =========================================================
 MOBILE PORTRAIT
 TOUCH DEVICES ONLY
========================================================= */

@media
  (max-width: 760px)
  and (hover: none)
  and (pointer: coarse) {

  /* -----------------------------------------------------
     GLOBAL
  ----------------------------------------------------- */

  html,
  body {
      width: 100%;
      max-width: 100%;

      overflow-x: hidden;
  }


  .container,
  .project-container {
      width: calc(100% - 32px);

      max-width: 100%;

      margin-left: auto;
      margin-right: auto;
  }



  /* -----------------------------------------------------
     HEADER
  ----------------------------------------------------- */

  .site-header {
      width: 100%;
  }


  .nav-container {
      min-height: auto;

      display: flex;

      flex-wrap: wrap;

      align-items: center;

      padding:
          12px
          0
          10px;
  }


  .brand {
      width: 100%;

      display: flex;

      align-items: center;

      gap: 10px;

      margin-bottom: 10px;
  }


  .brand-mark {
      flex-shrink: 0;
  }


  .brand-copy strong {
      font-size: 13px;

      line-height: 1.05;

      white-space: nowrap;
  }


  .brand-copy span {
      margin-top: 3px;

      font-size: 7px;

      white-space: nowrap;
  }


  .nav-links {
      width: 100%;

      display: grid;

      grid-template-columns:
          repeat(5, minmax(0, 1fr));

      gap: 5px;

      padding-top: 9px;

      border-top:
          1px solid
          rgba(12, 27, 45, .08);
  }


  .nav-links a {
      display: flex;

      align-items: center;

      justify-content: center;

      min-width: 0;

      padding:
          7px
          2px;

      font-size: 9px;

      text-align: center;

      white-space: nowrap;
  }


  .resume-nav {
      padding:
          7px
          4px;

      font-size: 9px;
  }



  /* -----------------------------------------------------
     HERO
  ----------------------------------------------------- */

  .hero {
      min-height: auto;

      padding-top: 135px;
      padding-bottom: 70px;
  }


  .hero-grid {
      min-height: auto;

      grid-template-columns: 1fr;

      gap: 45px;
  }


  .hero-content {
      width: 100%;

      min-width: 0;
  }


  .hero h1 {
      max-width: 100%;

      font-size:
          clamp(
              48px,
              14vw,
              62px
          );

      line-height: .95;
  }


  .hero-buttons {
      width: 100%;
  }


  .hero-buttons .button {
      width: 100%;

      justify-content: center;
  }


  .hero-disciplines {
      display: grid;

      grid-template-columns: 1fr;

      gap: 14px;
  }



  /* -----------------------------------------------------
     GRADUATION CARD
  ----------------------------------------------------- */

  .graduate-card {
      width: 100%;

      max-width: 360px;

      margin:
          0
          auto;
  }


  .graduate-image img {
      width: 100%;
      height: 100%;

      object-fit: cover;

      object-position: center bottom;
  }


  .graduate-footer {
      padding:
          16px
          18px;
  }


  .graduate-degree {
      min-width: 0;

      margin-left: 10px;

      padding-left: 14px;
  }



  /* -----------------------------------------------------
     ABOUT
  ----------------------------------------------------- */

  .about-header {
      grid-template-columns: 1fr;

      gap: 24px;
  }


  .about-heading h2 {
      max-width: 100%;

      font-size:
          clamp(
              40px,
              11vw,
              52px
          );
  }


  .about-details {
      grid-template-columns: 1fr;

      gap: 50px;
  }


  .about-copy {
      width: 100%;

      max-width: 100%;
  }


  .about-copy h3 {
      font-size: 23px;

      line-height: 1.45;
  }


  .process-row {
      grid-template-columns:
          38px
          1fr;

      gap:
          8px
          12px;
  }


  .process-number {
      grid-column: 1;
      grid-row: 1;
  }


  .process-row strong {
      grid-column: 2;
      grid-row: 1;
  }


  .process-row p {
      grid-column: 2;
      grid-row: 2;
  }



  /* -----------------------------------------------------
     PROJECT 01 / SOLAR
  ----------------------------------------------------- */

  .solar-team-grid {
      grid-template-columns: 1fr;
  }


  .solar-story-section {
      grid-template-columns: 1fr;

      gap: 24px;
  }


  .solar-video-heading,
  .solar-specifications {
      grid-template-columns: 1fr;

      gap: 24px;
  }


  .metric-grid {
      grid-template-columns: 1fr;
  }


  .metric {
      border-right: 0;

      border-bottom:
          1px solid
          var(--dark-line);
  }


  .metric:last-child {
      border-bottom: 0;
  }


  .solar-footer {
      flex-direction: column;

      align-items: flex-start;
  }


  .test-note {
      text-align: left;
  }



  /* -----------------------------------------------------
     PROJECT 02 / DRAWING GLOVE
  ----------------------------------------------------- */

  .glove-team-grid {
      grid-template-columns: 1fr;
  }


  .glove-story-section {
      grid-template-columns: 1fr;

      gap: 20px;
  }


  .glove-system-heading,
  .glove-demo-heading {
      grid-template-columns: 1fr;

      gap: 18px;
  }


  .system-flow {
      grid-template-columns: 1fr;
  }


  .flow-arrow {
      transform: rotate(90deg);
  }


  .glove-demo {
      grid-template-columns: 1fr;
  }


  .demo-video {
      border-right: 0;

      border-bottom:
          1px solid
          var(--dark-line);
  }



  /* -----------------------------------------------------
     CAPABILITIES
  ----------------------------------------------------- */

  .capabilities-header {
      grid-template-columns: 1fr;

      gap: 20px;
  }


  .capability-grid {
      grid-template-columns: 1fr;
  }


  .capability-card {
      border-right: 0 !important;

      border-bottom:
          1px solid
          var(--line) !important;
  }


  .capability-card:last-child {
      border-bottom: 0 !important;
  }



  /* -----------------------------------------------------
     CONTACT
  ----------------------------------------------------- */

  .contact-grid {
      grid-template-columns: 1fr;

      gap: 48px;
  }


  .contact-card {
      width: 100%;

      max-width: 100%;
  }

}



/* =========================================================
 PHONE LANDSCAPE
 TOUCH DEVICES ONLY
========================================================= */

@media
  (max-width: 950px)
  and (orientation: landscape)
  and (hover: none)
  and (pointer: coarse) {

  /* -----------------------------------------------------
     HEADER
  ----------------------------------------------------- */

  .nav-container {
      min-height: 64px;

      display: flex;

      flex-wrap: nowrap;

      align-items: center;

      justify-content: space-between;

      padding: 0;
  }


  .brand {
      width: auto;

      margin-bottom: 0;
  }


  .nav-links {
      width: auto;

      display: flex;

      align-items: center;

      gap: 16px;

      padding: 0;

      border-top: 0;
  }


  .nav-links a {
      padding: 0;

      font-size: 9px;
  }


  .resume-nav {
      padding:
          9px
          11px;
  }



  /* -----------------------------------------------------
     HERO
  ----------------------------------------------------- */

  .hero {
      min-height: auto;

      padding-top: 90px;
      padding-bottom: 60px;
  }


  .hero-grid {
      min-height: auto;

      grid-template-columns:
          minmax(0, 1.15fr)
          minmax(250px, .85fr);

      gap: 40px;

      align-items: center;
  }


  .hero h1 {
      font-size:
          clamp(
              44px,
              7vw,
              66px
          );

      line-height: .95;
  }


  .hero-buttons .button {
      width: auto;
  }


  .hero-disciplines {
      display: flex;

      flex-wrap: wrap;

      gap:
          10px
          22px;
  }


  .graduate-card {
      max-width: 310px;

      margin-left: auto;
      margin-right: 0;
  }



  /* -----------------------------------------------------
     ABOUT
  ----------------------------------------------------- */

  .about-header {
      grid-template-columns:
          140px
          1fr;
  }


  .about-details {
      grid-template-columns:
          1fr
          1fr;

      gap: 45px;
  }



  /* -----------------------------------------------------
     DRAWING GLOVE DEMO
  ----------------------------------------------------- */

  .glove-demo {
      grid-template-columns:
          minmax(0, 2fr)
          minmax(250px, .92fr);
  }


  .demo-video {
      border-right:
          1px solid
          var(--dark-line);

      border-bottom: 0;
  }



  /* -----------------------------------------------------
     CAPABILITIES
  ----------------------------------------------------- */

  .capability-grid {
      grid-template-columns:
          repeat(2, 1fr);
  }


  .capability-card:nth-child(odd) {
      border-right:
          1px solid
          var(--line) !important;
  }


  .capability-card:nth-child(even) {
      border-right: 0 !important;
  }

}

/* =========================================================
   FINAL RESUME BUTTON FIX
========================================================= */

@media (hover: hover) and (pointer: fine) {

  .nav-links .resume-nav {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      min-height: 40px;

      padding: 0 16px;

      border: 1px solid var(--navy);

      font-size: 11px;
      font-weight: 700;
      line-height: 1;

      white-space: nowrap;
  }

}