.geo-shell {
  min-height: 100vh;
  box-sizing: border-box;

  padding: 28px 18px 70px;

  display: flex;
  flex-direction: column;
  align-items: center;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255, 255, 255, 0.055),
      transparent 34%
    ),
    #000;
}


/* HERO */

.geo-hero {
  width: min(94vw, 1100px);

  text-align: center;
}

.geo-logo {
  display: block;

  width: min(24vw, 210px);
  height: auto;

  margin: 0 auto;
}

.geo-eyebrow {
  margin-top: 24px;

  color: #777;

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

  letter-spacing: 3px;
}

.geo-hero h1 {
  margin: 8px 0 0;

  font-size: clamp(34px, 6vw, 64px);
  font-weight: 700;

  letter-spacing: -1px;
}

.geo-hero h1 span {
  color: #777;
  font-weight: 300;
}

.geo-tagline {
  margin: 14px 0 0;

  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 700;

  letter-spacing: 0.5px;
}

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

  margin: 18px auto 0;

  color: #aaa;

  font-size: 16px;
  line-height: 1.6;
}


/* GRID */

.geo-grid {
  width: min(94vw, 1100px);

  margin-top: 54px;

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

  gap: 18px;
}


/* CARDS */

.geo-card-link {
  color: inherit;
  text-decoration: none;
}

.geo-card {
  position: relative;

  min-height: 390px;

  overflow: hidden;

  box-sizing: border-box;

  border: 1px solid #343434;
  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      #111,
      #080808
    );

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.geo-card:hover {
  transform: translateY(-3px);

  border-color: #707070;

  background:
    linear-gradient(
      145deg,
      #151515,
      #090909
    );
}

.geo-card.featured {
  grid-column: span 2;

  display: grid;
  grid-template-columns: 1fr 1.15fr;

  min-height: 330px;
}

.geo-card.trig-card {
  grid-column: span 2;
}


/* VISUAL */

.geo-card-visual {
  height: 160px;

  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;

  border-bottom: 1px solid #272727;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.025),
      transparent
    );
}

.geo-card.featured .geo-card-visual {
  height: 100%;

  border-bottom: 0;
  border-right: 1px solid #272727;
}

.geo-card-visual svg {
  width: 82%;
  height: 82%;

  overflow: visible;
}

.geo-card-visual svg line,
.geo-card-visual svg circle,
.geo-card-visual svg rect,
.geo-card-visual svg polygon,
.geo-card-visual svg ellipse,
.geo-card-visual svg path {
  fill: none;

  stroke: #d8d8d8;
  stroke-width: 2;

  vector-effect: non-scaling-stroke;
}

.geo-card-visual svg .svg-fill {
  fill: #d8d8d8;
}

.geo-card-visual svg text {
  fill: #aaa;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;

  letter-spacing: 1px;
}


/* CONTENT */

.geo-card-content {
  padding: 24px;
}

.geo-card-label {
  margin-bottom: 8px;

  color: #666;

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

  letter-spacing: 2px;
}

.geo-card h2 {
  margin: 0;

  font-size: 27px;
  font-weight: 700;
}

.geo-card p {
  margin: 12px 0 0;

  color: #aaa;

  font-size: 15px;
  line-height: 1.55;
}

.geo-tool-list {
  margin-top: 20px;

  display: flex;
  flex-wrap: wrap;

  gap: 8px;
}

.geo-tool-list span {
  display: inline-block;

  padding: 7px 10px;

  border: 1px solid #353535;
  border-radius: 999px;

  background: #0a0a0a;
  color: #ccc;

  font-size: 12px;
}

.geo-tool-link {
  display: inline-block;

  padding: 7px 10px;

  border: 1px solid #353535;
  border-radius: 999px;

  background: #0a0a0a;
  color: #ccc;

  font-size: 12px;
  text-decoration: none;
}

.geo-tool-link:hover {
  border-color: #777;
  color: #fff;
  background: #111;
}

.geo-coming {
  display: inline-block;

  margin-top: 22px;
  padding: 8px 11px;

  border-left: 2px solid #fff;

  color: #fff;

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

  letter-spacing: 0.5px;
}


/* PHILOSOPHY */

.geo-philosophy {
  width: min(88vw, 760px);

  margin-top: 48px;

  text-align: center;
}

.geo-philosophy-line {
  width: 80px;
  height: 1px;

  margin: 0 auto 18px;

  background: #444;
}

.geo-philosophy p {
  margin: 0;

  color: #888;

  font-size: 14px;
  line-height: 1.6;
}


/* BACK */

.geo-back-row {
  margin-top: 34px;
}

.geo-back-button {
  display: inline-block;

  padding: 11px 17px;

  border: 1px solid #555;
  border-radius: 8px;

  color: #fff;

  text-decoration: none;
  font-size: 14px;

  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.geo-back-button:hover {
  background: #151515;
  border-color: #888;
}


/* MOBILE */

@media (max-width: 760px) {

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

  .geo-card,
  .geo-card.featured,
  .geo-card.trig-card {
    grid-column: span 1;
  }

  .geo-card.featured {
    display: block;
  }

  .geo-card.featured .geo-card-visual {
    height: 180px;

    border-right: 0;
    border-bottom: 1px solid #272727;
  }

}


@media (max-width: 520px) {

  .geo-shell {
    padding-left: 12px;
    padding-right: 12px;
  }

  .geo-grid {
    width: 100%;
  }

  .geo-card {
    min-height: 0;
  }

  .geo-card-content {
    padding: 20px;
  }

  .geo-hero h1 {
    font-size: 36px;
  }

}