/* =========================================================
   open Maris — Global Styles
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
  --bg: #050505;
  --surface: #0a0a0a;
  --surface-light: #101010;

  --text: #f2f2f2;
  --text-soft: #c4c4c4;
  --muted: #777;
  --dim: #454545;

  --line: #1c1c1c;
  --line-light: #292929;

  --container: 1180px;

  --font:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Segoe UI",
    sans-serif;
}


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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;

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

  font-family: var(--font);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  overflow-x: hidden;
}
.logo_display{
    width: 40px;
    height: 40px;
}
a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
}


/* =========================================================
   GLOBAL CONTAINER
   ========================================================= */

.container {
  width: min(
    calc(100% - 64px),
    var(--container)
  );

  margin-inline: auto;
}


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

.site-header {
  border-bottom: 1px solid var(--line);
}

.nav {
  width: min(
    calc(100% - 64px),
    var(--container)
  );

  height: 78px;

  margin-inline: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-size: 17px;
  font-weight: 500;

  letter-spacing: -.04em;

  transition: opacity .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand:hover {
  opacity: .65;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-links a {
  color: var(--muted);

  font-size: 13px;

  transition: color .2s ease;
}

.nav-links a:hover,
.nav-links .active {
  color: var(--text);
}


/* =========================================================
   COMMON TYPOGRAPHY
   ========================================================= */

.eyebrow {
  color: var(--muted);

  font-size: 10px;
  font-weight: 500;

  text-transform: uppercase;
  letter-spacing: .17em;
}

.section-index {
  display: flex;
  flex-direction: column;
  gap: 8px;

  color: var(--dim);

  font-size: 10px;

  text-transform: uppercase;
  letter-spacing: .14em;
}

.section-index span:first-child {
  color: var(--muted);
}


/* =========================================================
   COMMON LINKS
   ========================================================= */

.text-link,
.small-link,
.end-link,
.project-link,
.back-link {
  display: inline-flex;

  align-items: center;
  gap: 10px;

  white-space: nowrap;

  padding-bottom: 7px;

  border-bottom: 1px solid #3b3b3b;

  font-size: 12px;

  transition:
    gap .2s ease,
    border-color .2s ease;
}

.text-link:hover,
.small-link:hover,
.end-link:hover,
.project-link:hover,
.back-link:hover {
  gap: 15px;
  border-color: #aaa;
}

.text-link span,
.small-link span,
.end-link span,
.project-link span,
.back-link span {
  color: var(--muted);
}


/* =========================================================
   COMMON SECTION GRID
   ========================================================= */

.section-grid,
.home-grid {
  display: grid;

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

  gap:
    clamp(50px, 9vw, 130px);
}


/* =========================================================
   =========================================================
   HOME PAGE
   =========================================================
   ========================================================= */


/* -------------------------
   Home Hero
   ------------------------- */

.home-hero {
  border-bottom: 1px solid var(--line);

  padding:
    clamp(90px, 12vw, 155px)
    0
    clamp(80px, 10vw, 125px);
}

.home-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 45px;
}

.hero-location {
  color: var(--dim);

  font-size: 10px;

  text-transform: uppercase;
  letter-spacing: .13em;
}

.home-hero h1 {
  max-width: 1100px;

  font-size:
    clamp(60px, 10vw, 132px);

  line-height: .86;

  font-weight: 500;

  letter-spacing: -.09em;
}

.home-hero h1 span {
  color: #555;
}

.hero-bottom {
  margin-top: 75px;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 50px;
}

.hero-bottom p {
  max-width: 540px;

  color: var(--text-soft);

  font-size:
    clamp(15px, 1.35vw, 18px);

  line-height: 1.75;

  letter-spacing: -.015em;
}


/* -------------------------
   Home Introduction
   ------------------------- */

.home-intro {
  border-bottom: 1px solid var(--line);

  padding:
    clamp(100px, 12vw, 160px)
    0;
}

.intro-content {
  max-width: 820px;
}

.intro-content h2 {
  max-width: 760px;

  font-size:
    clamp(40px, 5vw, 68px);

  line-height: .98;

  font-weight: 500;

  letter-spacing: -.065em;
}

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

  display: grid;

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

  gap: 45px;

  margin-top: 65px;
}

.intro-copy p {
  color: var(--muted);

  font-size: 15px;

  line-height: 1.8;
}


/* -------------------------
   Home Projects
   ------------------------- */

.home-projects {
  border-bottom: 1px solid var(--line);

  padding:
    clamp(100px, 12vw, 160px)
    0;
}

.section-heading {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  margin-bottom: 60px;
}

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

.home-project {
  min-height: 180px;

  padding: 30px 0;

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

  display: grid;

  grid-template-columns:
    80px
    1fr
    40px;

  gap: 30px;

  align-items: start;

  transition: padding .25s ease;
}

.home-project:hover {
  padding-left: 10px;
  padding-right: 10px;
}

.home-project-number {
  color: var(--dim);

  font-size: 10px;
}

.home-project-info > span {
  color: var(--muted);

  font-size: 10px;

  text-transform: uppercase;
  letter-spacing: .15em;
}

.home-project-info h3 {
  margin-top: 13px;

  font-size:
    clamp(25px, 3vw, 38px);

  line-height: 1;

  font-weight: 500;

  letter-spacing: -.05em;
}

.home-project-info p {
  max-width: 450px;

  margin-top: 13px;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.7;
}

.project-arrow {
  color: var(--muted);

  font-size: 15px;

  transition:
    transform .25s ease,
    color .25s ease;
}

.home-project:hover .project-arrow {
  color: var(--text);

  transform:
    translate(3px, -3px);
}


/* -------------------------
   Home Principles
   ------------------------- */

.home-principles {
  border-bottom: 1px solid var(--line);

  padding:
    clamp(100px, 12vw, 160px)
    0;
}

.principles-content {
  width: 100%;
}

.principle-row {
  display: grid;

  grid-template-columns:
    80px
    1fr;

  gap: 30px;

  padding: 30px 0;

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

.principle-row:last-child {
  border-bottom: 1px solid var(--line);
}

.principle-row > span {
  color: var(--dim);

  font-size: 10px;
}

.principle-row h3 {
  font-size: 18px;

  font-weight: 500;

  letter-spacing: -.03em;
}

.principle-row p {
  max-width: 500px;

  margin-top: 10px;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.7;
}


/* -------------------------
   Home Founder
   ------------------------- */

.home-founder {
  border-bottom: 1px solid var(--line);

  padding:
    clamp(100px, 12vw, 160px)
    0;
}

.founder-home-content {
  max-width: 820px;
}

.founder-home-content h2 {
  margin-top: 27px;

  font-size:
    clamp(56px, 7vw, 94px);

  line-height: .86;

  font-weight: 500;

  letter-spacing: -.08em;
}

.founder-home-content h2 span {
  color: #555;
}

.founder-home-text {
  max-width: 570px;

  margin-top: 55px;

  color: var(--text-soft);

  font-size:
    clamp(16px, 1.5vw, 20px);

  line-height: 1.7;

  letter-spacing: -.02em;
}

.founder-home-content .text-link {
  margin-top: 35px;
}


/* -------------------------
   Home Ending
   ------------------------- */

.home-end {
  padding:
    clamp(120px, 16vw, 200px)
    0
    clamp(130px, 17vw, 220px);
}

.home-end h2 {
  margin-top: 25px;

  font-size:
    clamp(52px, 8vw, 105px);

  line-height: .87;

  font-weight: 500;

  letter-spacing: -.08em;
}

.home-end h2 span {
  color: #555;
}

.end-link {
  margin-top: 55px;
}


/* =========================================================
   =========================================================
   ABOUT PAGE
   =========================================================
   ========================================================= */


/* -------------------------
   About Hero
   ------------------------- */

.about-hero {
  padding:
    clamp(90px, 12vw, 160px)
    0
    clamp(90px, 11vw, 145px);
}

.about-hero h1 {
  max-width: 1050px;

  margin-top: 28px;

  font-size:
    clamp(64px, 10.5vw, 138px);

  line-height: .86;

  font-weight: 500;

  letter-spacing: -.085em;
}

.about-hero h1 span {
  color: #555;
}

.about-hero::after {
  content: "";

  display: block;

  height: 1px;

  margin-top:
    clamp(80px, 10vw, 130px);

  background: var(--line);
}


/* -------------------------
   About Intro
   ------------------------- */

.about-intro {
  padding:
    clamp(100px, 12vw, 160px)
    0;
}

.about-copy {
  max-width: 600px;
}

.about-copy p,
.founder-copy p {
  color: var(--muted);

  font-size: 15px;

  line-height: 1.8;
}

.about-copy p + p,
.founder-copy p + p {
  margin-top: 25px;
}

.about-copy .lead,
.founder-copy .lead {
  color: var(--text-soft);

  font-size:
    clamp(18px, 1.6vw, 21px);

  line-height: 1.65;

  letter-spacing: -.025em;
}


/* -------------------------
   About Story
   ------------------------- */

.story {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);

  padding:
    clamp(100px, 12vw, 160px)
    0;
}

.story-grid {
  display: grid;

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

  gap:
    clamp(50px, 9vw, 130px);
}

.story-content {
  max-width: 820px;
}

.story-content h2 {
  font-size:
    clamp(40px, 5vw, 68px);

  line-height: .98;

  font-weight: 500;

  letter-spacing: -.065em;
}

.story-text {
  display: grid;

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

  gap: 45px;

  margin-top: 65px;
}

.story-text p {
  color: var(--muted);

  font-size: 15px;

  line-height: 1.8;
}


/* -------------------------
   Founder
   ------------------------- */

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

.founder-inner {
  padding:
    clamp(100px, 12vw, 160px)
    0;
}

.founder-heading h2 {
  margin-top: 27px;

  font-size:
    clamp(56px, 7vw, 94px);

  line-height: .86;

  font-weight: 500;

  letter-spacing: -.08em;
}

.founder-heading h2 span {
  color: #555;
}

.founder-right {
  max-width: 560px;
}

.founder-right p {
  color: var(--muted);

  font-size: 15px;

  line-height: 1.8;
}

.founder-right p + p {
  margin-top: 25px;
}


/* -------------------------
   Founder Alternative Layout
   ------------------------- */

.founder-grid {
  display: grid;

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

  gap:
    clamp(60px, 11vw, 150px);
}


/* -------------------------
   About Principles
   ------------------------- */

.principles {
  width: 100%;
}

.principle {
  min-height: 150px;

  padding: 25px 0;

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

  display: grid;

  grid-template-columns:
    80px
    1fr;

  gap: 30px;
}

.principle:last-child {
  border-bottom: 1px solid var(--line);
}

.principle-number {
  color: var(--dim);

  font-size: 10px;
}

.principle h3 {
  font-size: 18px;

  font-weight: 500;

  letter-spacing: -.03em;
}

.principle p {
  max-width: 470px;

  margin-top: 10px;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.7;
}


/* -------------------------
   About Closing
   ------------------------- */

.about-end {
  padding:
    clamp(110px, 14vw, 190px)
    0;
}

.about-end p {
  color: #333;

  font-size:
    clamp(32px, 5vw, 62px);

  font-weight: 500;

  letter-spacing: -.06em;
}


/* =========================================================
   =========================================================
   PROJECTS PAGE
   =========================================================
   ========================================================= */


/* -------------------------
   Projects Hero
   ------------------------- */

.projects-hero {
  border-bottom: 1px solid var(--line);

  padding:
    clamp(90px, 12vw, 160px)
    0
    clamp(80px, 10vw, 130px);
}

.projects-hero .hero-top {
  display: flex;

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

  margin-bottom: 45px;
}

.projects-hero .hero-number {
  color: var(--dim);

  font-size: 11px;
}

.projects-hero h1 {
  max-width: 1000px;

  font-size:
    clamp(60px, 9.5vw, 126px);

  line-height: .87;

  font-weight: 500;

  letter-spacing: -.085em;
}

.projects-hero h1 span {
  color: #555;
}

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

  margin-top: 70px;
}

.hero-description p {
  color: var(--text-soft);

  font-size:
    clamp(15px, 1.3vw, 18px);

  line-height: 1.75;

  letter-spacing: -.015em;
}


/* -------------------------
   Project List
   ------------------------- */

.projects {
  padding:
    clamp(80px, 10vw, 130px)
    0;
}

.project {
  padding-bottom:
    clamp(90px, 12vw, 150px);

  margin-bottom:
    clamp(90px, 12vw, 150px);

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

.project:last-child {
  margin-bottom: 0;
}

.project-meta {
  display: flex;

  justify-content: space-between;

  padding-bottom: 25px;

  color: var(--dim);

  font-size: 10px;

  text-transform: uppercase;
  letter-spacing: .14em;
}

.project-meta span:first-child {
  color: var(--muted);
}


/* -------------------------
   Project Layout
   ------------------------- */

.project-main {
  display: grid;

  grid-template-columns:
    minmax(300px, .8fr)
    minmax(400px, 1.2fr);

  gap:
    clamp(50px, 8vw, 120px);

  align-items: stretch;
}

.project-info {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  padding-top: 20px;
}

.project-type {
  color: var(--muted);

  font-size: 10px;

  text-transform: uppercase;
  letter-spacing: .15em;
}

.project-info h2 {
  margin-top: 22px;

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

  line-height: .95;

  font-weight: 500;

  letter-spacing: -.065em;
}

.project-description {
  max-width: 420px;

  margin-top: 30px;

  color: var(--muted);

  font-size: 15px;

  line-height: 1.8;
}

.project-link {
  margin-top: 40px;
}


/* -------------------------
   Project Visual
   ------------------------- */

.project-visual {
  min-height: 430px;

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

  background: var(--surface);

  display: flex;

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

  overflow: hidden;
}

.visual-inner {
  width: 76%;
  height: 70%;

  border: 1px solid #202020;

  display: flex;

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

  color: #333;

  font-size: 13px;

  transition:
    border-color .3s ease,
    transform .3s ease;
}

.project:hover .visual-inner {
  border-color: #303030;

  transform: scale(.98);
}


/* -------------------------
   Projects Closing
   ------------------------- */

.projects-closing {
  padding:
    clamp(100px, 14vw, 190px)
    0;
}

.projects-closing .closing-line {
  height: 1px;

  background: var(--line);

  margin-bottom: 80px;
}

.projects-closing h2 {
  margin-top: 25px;

  font-size:
    clamp(48px, 7vw, 92px);

  line-height: .9;

  font-weight: 500;

  letter-spacing: -.075em;
}

.projects-closing h2 span {
  color: #555;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  border-top: 1px solid var(--line);
}

.footer-inner {
  min-height: 85px;

  display: flex;

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

  color: var(--dim);

  font-size: 11px;
}


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

@media (max-width: 900px) {

  .container,
  .nav {
    width: calc(100% - 48px);
  }


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

    gap: 45px;
  }


  .founder-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    gap: 50px;
  }


  .project-main {
    grid-template-columns:
      minmax(250px, .8fr)
      minmax(300px, 1.2fr);

    gap: 50px;
  }


  .project-visual {
    min-height: 360px;
  }


  .hero-location {
    display: none;
  }

}


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

@media (max-width: 650px) {

  .container,
  .nav {
    width: calc(100% - 40px);
  }


  /* Navigation */

  .nav {
    height: 68px;
  }

  .nav-links {
    gap: 18px;
  }

  .nav-links a {
    font-size: 12px;
  }


  /* Shared grids */

  .home-grid,
  .section-grid,
  .story-grid,
  .founder-grid {
    grid-template-columns: 1fr;

    gap: 38px;
  }

  .section-index {
    flex-direction: row;

    gap: 14px;
  }


  /* Home hero */

  .home-hero {
    padding:
      90px
      0;
  }

  .home-hero-top {
    margin-bottom: 35px;
  }

  .home-hero h1 {
    font-size:
      clamp(55px, 17vw, 82px);
  }

  .hero-bottom {
    margin-top: 55px;

    flex-direction: column;

    align-items: flex-start;

    gap: 35px;
  }

  .hero-bottom p {
    font-size: 15px;
  }


  /* Home intro */

  .home-intro {
    padding:
      90px
      0;
  }

  .intro-content h2 {
    font-size:
      clamp(38px, 11vw, 55px);
  }

  .intro-copy {
    grid-template-columns: 1fr;

    gap: 25px;

    margin-top: 45px;
  }


  /* Home projects */

  .home-projects {
    padding:
      90px
      0;
  }

  .section-heading {
    margin-bottom: 45px;
  }

  .home-project {
    min-height: 170px;

    grid-template-columns:
      45px
      1fr
      25px;

    gap: 15px;

    padding: 28px 0;
  }

  .home-project:hover {
    padding-left: 0;
    padding-right: 0;
  }

  .home-project-info h3 {
    font-size:
      clamp(25px, 8vw, 36px);
  }


  /* Home principles */

  .home-principles {
    padding:
      90px
      0;
  }

  .principle-row {
    grid-template-columns:
      45px
      1fr;

    gap: 15px;

    padding: 28px 0;
  }


  /* Home founder */

  .home-founder {
    padding:
      90px
      0;
  }

  .founder-home-content h2 {
    font-size:
      clamp(52px, 16vw, 76px);
  }

  .founder-home-text {
    margin-top: 45px;
  }


  /* Home ending */

  .home-end {
    padding:
      110px
      0
      130px;
  }

  .home-end h2 {
    font-size:
      clamp(48px, 14vw, 70px);
  }


  /* About */

  .about-hero {
    padding:
      90px
      0;
  }

  .about-hero h1 {
    font-size:
      clamp(55px, 17vw, 82px);
  }

  .about-hero::after {
    margin-top: 80px;
  }

  .about-intro,
  .story,
  .founder-inner {
    padding:
      90px
      0;
  }

  .about-copy p,
  .founder-copy p,
  .story-text p {
    font-size: 15px;
  }

  .about-copy .lead,
  .founder-copy .lead {
    font-size: 18px;
  }

  .story-content h2 {
    font-size:
      clamp(38px, 11vw, 55px);
  }

  .story-text {
    grid-template-columns: 1fr;

    gap: 25px;

    margin-top: 45px;
  }

  .founder-heading h2 {
    font-size:
      clamp(52px, 16vw, 76px);
  }


  /* About principles */

  .principle {
    min-height: auto;

    grid-template-columns:
      45px
      1fr;

    gap: 15px;

    padding: 28px 0;
  }


  /* About ending */

  .about-end {
    padding:
      100px
      0
      130px;
  }


  /* Projects hero */

  .projects-hero {
    padding:
      90px
      0;
  }

  .projects-hero h1 {
    font-size:
      clamp(55px, 17vw, 82px);
  }

  .projects-hero .hero-top {
    margin-bottom: 35px;
  }

  .hero-description {
    margin-top: 55px;
  }


  /* Projects */

  .projects {
    padding:
      80px
      0;
  }

  .project {
    padding-bottom: 80px;

    margin-bottom: 80px;
  }

  .project-main {
    grid-template-columns: 1fr;

    gap: 55px;
  }

  .project-info {
    padding-top: 10px;
  }

  .project-info h2 {
    font-size:
      clamp(42px, 12vw, 58px);
  }

  .project-description {
    margin-top: 25px;
  }

  .project-link {
    margin-top: 32px;
  }

  .project-visual {
    min-height: 280px;
  }

  .visual-inner {
    width: 80%;
    height: 65%;
  }


  /* Projects closing */

  .projects-closing {
    padding:
      100px
      0
      130px;
  }

  .projects-closing .closing-line {
    margin-bottom: 60px;
  }

  .projects-closing h2 {
    font-size:
      clamp(45px, 14vw, 68px);
  }


  /* Footer */

  .footer-inner {
    min-height: 80px;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    gap: 8px;
  }

}


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

@media (max-width: 380px) {

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


  .nav-links {
    gap: 14px;
  }


  .home-hero h1,
  .about-hero h1,
  .projects-hero h1 {
    font-size: 53px;
  }


  .home-project {
    grid-template-columns:
      35px
      1fr
      20px;

    gap: 10px;
  }


  .project-visual {
    min-height: 240px;
  }


  .home-end h2 {
    font-size: 46px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
  }

}
/* =========================================================
   NEW HOME PAGE
========================================================= */


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

.home-hero {
  border-bottom: 1px solid var(--line);

  padding:
    clamp(90px, 12vw, 160px)
    0
    clamp(90px, 11vw, 140px);
}

.home-hero-label {
  display: flex;

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

  margin-bottom:
    clamp(55px, 7vw, 90px);
}

.home-hero-year {
  color: var(--dim);

  font-size: 10px;

  letter-spacing: .12em;
}

.home-hero-content h1 {
  max-width: 1100px;
letter-spacing: 3px;
  font-size:
    clamp(64px, 11vw, 145px);

  line-height: 1em;

  font-weight: 500;

  letter-spacing: -1px;
}

.home-hero-content h1 span {
  color: #555;
}

.home-hero-description {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 50px;

  margin-top:
    clamp(60px, 8vw, 100px);
}

.home-hero-description p {
  max-width: 500px;

  color: var(--text-soft);

  font-size:
    clamp(15px, 1.4vw, 18px);

  line-height: 1.75;

  letter-spacing: -.015em;
}


/* =========================================================
   WHAT IS OPEN MARIS
========================================================= */

.home-about {
  border-bottom: 1px solid var(--line);

  padding:
    clamp(100px, 13vw, 170px)
    0;
}

.home-about-inner {
  display: grid;

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

  gap:
    clamp(50px, 9vw, 130px);
}

.home-section-label {
  display: flex;

  flex-direction: column;

  gap: 8px;

  color: var(--dim);

  font-size: 10px;

  text-transform: uppercase;
  letter-spacing: .14em;
}

.home-section-label span:first-child {
  color: var(--muted);
}

.home-about-content {
  max-width: 850px;
}

.home-about-content h2 {
  max-width: 800px;

  font-size:
    clamp(42px, 5.5vw, 72px);

  line-height: .96;

  font-weight: 500;

  letter-spacing: -.07em;
}

.home-about-content h2 span {
  color: #555;
}

.home-about-content p {
  max-width: 580px;

  margin-top:
    clamp(40px, 5vw, 65px);

  color: var(--muted);

  font-size:
    clamp(15px, 1.3vw, 17px);

  line-height: 1.8;
}


/* =========================================================
   CORE IDEA
========================================================= */

.home-core {
  border-bottom: 1px solid var(--line);

  padding:
    clamp(100px, 13vw, 170px)
    0;
}

.home-core-top {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 50px;
}

.home-core-top > p {
  color: var(--muted);

  font-size: 12px;

  line-height: 1.7;

  text-align: right;
}

.home-core-display {
  margin-top:
    clamp(80px, 11vw, 140px);

  display: flex;

  align-items: center;

  width: 100%;
}

.core-word {
  flex: 1;

  font-size:
    clamp(55px, 10vw, 135px);

  line-height: .8;

  font-weight: 500;

  letter-spacing: -.09em;
}

.core-word:last-child {
  text-align: right;

  color: #555;
}

.core-divider {
  width: 1px;

  height:
    clamp(80px, 10vw, 140px);

  background: var(--line-light);
}

.home-core-bottom {
  display: flex;

  justify-content: flex-end;

  margin-top: 80px;
}

.home-core-bottom p {
  max-width: 420px;

  color: var(--muted);

  font-size: 13px;

  line-height: 1.8;
}


/* =========================================================
   WHAT WE BUILD
========================================================= */

.home-build {
  border-bottom: 1px solid var(--line);

  padding:
    clamp(100px, 13vw, 170px)
    0;
}

.home-build-header {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 50px;

  margin-bottom: 65px;
}

.home-build-header > p {
  color: var(--muted);

  font-size: 12px;

  line-height: 1.7;

  text-align: right;
}

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

.home-build-item {
  display: grid;

  grid-template-columns:
    80px
    minmax(0, 600px);

  gap: 30px;

  padding:
    32px
    0;

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

.home-build-item > span {
  color: var(--dim);

  font-size: 10px;
}

.home-build-item h3 {
  font-size:
    clamp(24px, 3vw, 36px);

  font-weight: 500;

  line-height: 1;

  letter-spacing: -.05em;
}

.home-build-item p {
  max-width: 470px;

  margin-top: 12px;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.7;
}


/* =========================================================
   DISCOVER
========================================================= */

.home-discover {
  padding:
    clamp(90px, 11vw, 140px)
    0;
}

.home-discover-box {
  min-height:
    clamp(300px, 35vw, 440px);

  padding:
    clamp(35px, 5vw, 65px);

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

  background: var(--surface);

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  transition:
    border-color .25s ease;
}

.home-discover-box:hover {
  border-color: #333;
}

.home-discover-box h2 {
  max-width: 700px;

  margin-top: 25px;

  font-size:
    clamp(42px, 6vw, 78px);

  line-height: .9;

  font-weight: 500;

  letter-spacing: -.07em;
}

.home-discover-box h2 span {
  color: #555;
}

.discover-link {
  display: inline-flex;

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

  width: 100%;

  padding-top: 20px;

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

  font-size: 12px;

  transition: padding .2s ease;
}

.discover-link span {
  color: var(--muted);

  font-size: 16px;
}

.discover-link:hover {
  padding-left: 5px;
  padding-right: 5px;
}


/* =========================================================
   CLOSING
========================================================= */

.home-closing {
  border-top: 1px solid var(--line);

  padding:
    clamp(120px, 16vw, 210px)
    0
    clamp(130px, 18vw, 230px);
}

.home-closing h2 {
  margin-top: 25px;

  font-size:
    clamp(55px, 9vw, 120px);

  line-height: .85;

  font-weight: 500;

  letter-spacing: -.09em;
}

.home-closing .text-link {
  margin-top: 55px;
}


/* =========================================================
   HOME RESPONSIVE
========================================================= */

@media (max-width: 900px) {

  .home-about-inner {
    grid-template-columns:
      130px
      minmax(0, 1fr);

    gap: 45px;
  }

}


@media (max-width: 650px) {

  .home-hero {
    padding:
      85px
      0
      90px;
  }

  .home-hero-content h1 {
    font-size:
      clamp(56px, 17vw, 84px);
  }

  .home-hero-description {
    flex-direction: column;

    align-items: flex-start;

    gap: 32px;

    margin-top: 55px;
  }


  .home-about {
    padding:
      90px
      0;
  }

  .home-about-inner {
    grid-template-columns: 1fr;

    gap: 40px;
  }

  .home-section-label {
    flex-direction: row;

    gap: 14px;
  }

  .home-about-content h2 {
    font-size:
      clamp(39px, 11vw, 58px);
  }


  .home-core {
    padding:
      90px
      0;
  }

  .home-core-top > p {
    display: none;
  }

  .home-core-display {
    margin-top: 75px;

    flex-direction: column;

    align-items: stretch;

    gap: 35px;
  }

  .core-word {
    flex: none;

    font-size:
      clamp(58px, 18vw, 88px);
  }

  .core-word:last-child {
    text-align: right;
  }

  .core-divider {
    width: 100%;
    height: 1px;
  }

  .home-core-bottom {
    margin-top: 55px;

    justify-content: flex-start;
  }


  .home-build {
    padding:
      90px
      0;
  }

  .home-build-header {
    margin-bottom: 45px;
  }

  .home-build-header > p {
    display: none;
  }

  .home-build-item {
    grid-template-columns:
      45px
      minmax(0, 1fr);

    gap: 15px;

    padding: 28px 0;
  }


  .home-discover {
    padding:
      70px
      0;
  }

  .home-discover-box {
    min-height: 330px;

    padding: 30px;
  }

  .home-discover-box h2 {
    font-size:
      clamp(40px, 12vw, 58px);
  }


  .home-closing {
    padding:
      110px
      0
      140px;
  }

  .home-closing h2 {
    font-size:
      clamp(52px, 16vw, 78px);
  }

}


@media (max-width: 380px) {

  .home-hero-content h1 {
    font-size: 54px;
  }

  .home-about-content h2 {
    font-size: 38px;
  }

  .home-discover-box {
    min-height: 300px;

    padding: 25px;
  }

  .home-closing h2 {
    font-size: 50px;
  }

}