@import url("/assets/fonts/league-spartan/400.css");

:root {
   --bg: #ffffff;
   /* page background */
   --text: #111217;
   /* primary text */
   --muted: #6b7280;
   /* secondary text */
   --light: #bfc0c4;
   --panel: #eeeff4;
   --surface: #f3f4f6;
   /* cards / panels */
   --brand: #0b0e13;
   /* brand / header / strong accents */
   --accent: #1b1e23;
   /* CTA / secondary accents */
   --shadow: 0 2px 10px rgba(0, 0, 0, .08);

   /* Spacing */
   --gutter: 1rem;
   --side-gap: 96px;

   --container-max: 100%;
}

*,
*::before,
*::after {
   box-sizing: border-box;
}


/* Foundametal elements */
body {
   margin: 0;
   font-family: "League Spartan";
   src:
      local("League Spartan"),
      url("/assets/fonts/league-spartan/league-spartan-400.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
   font-size: 15px;
   line-height: 25px;
   color: var(--text);
   background: var(--bg)
}

a {
   color: inherit;
   text-decoration: none
}

.button {
   display: inline-block;
   background-color: black;
   color: white;
   padding: 20px 32px;
   text-align: center;
   text-decoration: none;
   width: fit-content;
   font-size: 20px
}

.arrow {
   font-size: 32px;
}

.right {
   transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
}

.left {
   transform: rotate(135deg);
   -webkit-transform: rotate(135deg);
}

.up {
   transform: rotate(-135deg);
   -webkit-transform: rotate(-135deg);
}

.down {
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
}

@media (min-width: 0px) {
   :root {
      --container-max: 420px;
   }
}

@media (min-width: 768px) {
   :root {
      --container-max: 660px;
   }
}

@media (min-width: 1024px) {
   :root {
      --container-max: 800px;
   }
}

@media (min-width: 1280px) {
   :root {
      --container-max: 960px;
   }
}

@media (min-width: 1536px) {
   :root {
      --container-max: 1080px;
   }
}

/* Layout */
.container {
   width: 100%;
   max-width: var(--container-max);
   padding-inline: var(--gutter);
   margin-inline: auto;
   color: var(--text);
   background: var(--bg);
}

section {
   padding-block: 96px 64px
}


/* Side label */
.side-label {
   display: none;
   position: fixed;
   left: calc((100vw - var(--container-max)) / 2 - var(--side-gap));
   top: 160px;
   z-index: 0;
   writing-mode: vertical-rl;
   letter-spacing: .6em;
   color: var(--light);
   font-weight: 600;
   font-size: 20px;
   user-select: none;
   pointer-events: none;
}

@media (min-width: 1024px) {
   .side-label {
      display: block;
   }
}

/* Overlay */
.overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(255, 255, 255, 0.5);
   z-index: 999;
}

.overlay.show {
   display: block;
}

/* Header */
.header {
   display: flex;
   padding-block: 40px;
   gap: 60px;
}

.header h1 {
   display: inline-flex;
   font-weight: bold;
   align-items: center;
   font-size: 40px;
}

.header nav {
   display: inline-flex;
   align-items: center;
   gap: 60px;
}

.header nav a {
   color: var(--muted);
   letter-spacing: 1.5px;
   font-weight: bold;
   font-size: 20px
}

.hamburger {
   display: none;
   background: none;
   border: none;
   font-size: 30px;
}

@media (max-width: 768px) {
   .header nav {
      display: none;
      flex-direction: column;
      align-items: center;
      background-color: var(--panel);
      max-width: var(--container-max);
      padding: 20px;
      margin: auto;
   }

   .hamburger {
      display: inline-flex;
      align-items: center;
      margin-left: auto;
   }

   .header nav.open {
      display: flex;
      position: absolute;
      z-index: 1000;
      top: 150px;
      left: 0;
      right: 0;
   }
}

/* Footer */
.footer {
   display: grid;
   grid-template-columns: 1fr 2fr 1fr;
   gap: 30px;
   align-items: center;
   background: var(--panel);
   padding: 0px;
   margin-top: 120px;
}

.footer .brand {
   background: var(--brand);
   color: #fff;
   display: grid;
   place-items: center;
   font-size: 50px;
   font-weight: bold;
   padding: 80px 32px;
}

.footer nav {
   display: flex;
   gap: 50px;
   justify-content: center;
   font-size: 20px;
   color: var(--muted);
}

   .footer .button {
      display: flex;
      width: 170px;
      height: 60px;
      padding: 10px 20px;
      align-items: center;
      justify-content: center;
      text-decoration: none;
   }


   .footer .button .arrow {
      padding-left: 5px;
      padding-bottom: 5px;
   }

@media (max-width: 1023px) {
   .footer {
      max-width: 100%;
   }
}

@media (max-width: 768px) {
   .footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: var(--panel);
      padding-block: 40px;
      margin-top: 40px;
   }

   .footer .brand {
      background: var(--brand);
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 36px;
      font-weight: bold;
      padding: 30px 40px;
      width: fit-content;
      text-align: center;
      margin-top: -80px;
   }

   .footer nav {
      display: flex;
      gap: 20px;
      justify-content: center;
      margin: 20px 0;
   }

   .footer nav a {
      color: var(--muted);
      font-size: 20px;
      text-decoration: none;
   }
}

/* Homepage */
.hero {
   position: relative;
   display: flex;
}

.hero img {
   width: 100%;
   z-index: 0;
}

.hero .image-text {
   position: absolute;
   top: 45%;
   left: 32%;
   transform: translate(-50%, -50%);
   color: white;
   max-width: 500px;
}

.hero .image-text h1 {
   font-size: 7em;
   font-weight: bold;
   line-height: 1em;
   margin-bottom: 0px;
}

.hero .image-text p {
   margin-top: 0px;
   font-size: 1.2em;
   margin-bottom: 30px;
}

@media (max-width: 1280px) {
   .hero .image-text {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      width: 900px;
   }

   .hero .image-text h1 {
      font-size: 4em;
      font-weight: bold;
      line-height: 1em;
      margin-bottom: 15px;
   }
}

@media (max-width: 768px) {
   .hero .image-text {
      position: absolute;
      top: 43%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      max-width: 300px;
   }

   .page {
      display: none;
   }
}

/* Welcome */

.welcome {
   position: relative;
   isolation: isolate;
   padding-top: 220px;
}

.welcome h1 {
   position: absolute;
   top: 120px;
   left: 0;
   margin: 0;
   font-size: 17em;
   letter-spacing: .02em;
   color: var(--panel);
   z-index: 2;
   user-select: none;
}

@media (max-width: 1536px) {
   .welcome h1 {
      font-size: 14em;
   }
}

@media (max-width:1280px) {
   .welcome h1 {
      font-size: 12em;
   }
}

@media (max-width:1023px) {
   .welcome h1 {
      font-size: 8em;
   }
}

.welcome .grid-2 {
   display: grid;
   grid-template-columns: 0.4fr 2.1fr 1.6fr;
   align-items: start;
   gap: 5em;
   margin-inline: auto;
   position: relative;
   z-index: 1;
}

.welcome .grid-2>div {
   grid-column: 2;
}

.welcome .grid-2>img {
   position: absolute;
   grid-column: 3;
   justify-self: end;
   width: 100%;
   top: -90px;
   height: auto;
   display: block;
   margin: 0;
}

.welcome h2 {
   margin: 0;
   font-size: 4em;
   line-height: 60px;
}

.welcome p {
   color: var(--muted);
   font-size: 20px;
   margin-top: 4em;
}

@media (max-width:1280px) {
   .welcome .grid-2 {
      grid-template-columns: 1.7fr 1fr;
      column-gap: 0em;
   }

   .welcome .grid-2>div {
      grid-column: 1;
      position: relative;
      z-index: 2;
   }

   .welcome .grid-2>img {
      grid-column: 2;
      margin-right: 60px;
      width: 120%;
   }

   .welcome h1 {
      font-size: 14em;
   }
}

@media (max-width: 1023px) {
   .welcome {
      padding-top: 140px;
   }

   .welcome .grid-2 {
      grid-template-columns: 0.00fr 1fr 0.00fr;
      gap: 0em;
   }

   .welcome .grid-2>div {
      grid-column: 2;
      position: relative;
      z-index: 2;
   }

   .welcome .grid-2>img {
      display: none;
   }

   .welcome h1 {
      top: 60px;
      padding: 0px;
      margin: 0px;
      padding-left: 0.0em;
      font-size: 9em;
   }
}

@media (max-width: 768px) {
   .welcome {
      position: relative;
      isolation: isolate;
      padding-top: 0px;
   }

   .welcome h1 {
      display: none;
   }

   .welcome .grid-2 {
      grid-template-columns: 0.1fr 1fr 0.1fr;
      gap: 0em;
   }

   .welcome .grid-2>img {
      display: none;
   }
}

/* Panel */

.panel {
   position: relative;
   display: flex;
}

.panel img {
   width: 100%;
   z-index: 0;
}

.panel .image-text {
   position: absolute;
   top: 50%;
   left: 35%;
   transform: translate(-50%, -50%);
   color: white;
   max-width: 500px;
}

.panel .image-text h1 {
   font-size: 4.5em;
   font-weight: bold;
   line-height: 1em;
   margin-bottom: 40px;
}

@media (max-width: 1023px) {
   .panel .image-text {
      position: absolute;
      top: 50%;
      left: 45%;
      transform: translate(-50%, -50%);
      color: white;
   }
}

@media (max-width: 768px) {
   .panel .image-text {
      position: absolute;
      top: 50%;
      left: 45%;
      transform: translate(-50%, -50%);
      color: white;
      width: 300px;
   }

   .panel .image-text h1 {
      font-size: 2.5em;
      font-weight: bold;
      line-height: 1em;
      margin-bottom: 10px;
   }
}

/* Featured */

.featured .head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 24px
}

.featured .head h2 {
   font-size: 5em;
}

.card {
   position: relative;
   height: 520px;
   border-radius: 2px;
   overflow: hidden;
   background: var(--panel)
}

.card-num {
   position: absolute;
   right: 18px;
   top: 6px;
   font-size: 220px;
   font-weight: 800;
   color: var(--bg);
   opacity: .35;
   line-height: 1;
}

.card-meta {
   position: absolute;
   left: 22px;
   bottom: 22px;
   color: var(--bg);
   text-shadow: var(--shadow)
}

.grid-3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 28px
}

@media (max-width: 1023px) {
   .featured .head h2 {
      font-size: 4em;
   }

   .grid-3 {
      grid-template-columns: 1fr
   }
}

@media (max-width: 768px) {
   .featured .head {
      gap: 20px;
   }

   .featured .head a {
      font-size: 18px;
   }

   .featured .head .arrow {
      font-size: 24px;
   }
}



/* Projects */

.card {
   position: relative;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

.card-link {
   position: absolute;
   inset: 0;
   z-index: 2;
}

.card-link:hover {
   background: rgba(255, 255, 255, 0.35);
}

/* Single Project page */

/* Homepage */
.project {
   position: relative;
}

.project img {
   width: 100%;
   margin: 0px;
   padding: 0px;
   z-index: 0;
}


.project h1 {
   font-size: 4em;
}

.meta-table {
   width: 100%;
   border-collapse: collapse;
   margin: 18px 0 8px;
}

.meta-table th,
.meta-table td {
   padding: 8px 14px 10px 0;
   vertical-align: top;
}

.meta-table th {
   text-align: left;
   font-weight: bold;
   font-size: 18px;
}

.meta-table td {
   font-size: 18px;
   color: var(--muted);
}

.project p {
   padding-block: 50px;
   font-size: 20px;
}

@media (max-width: 768px) {
   .project h1 {
      font-size: 3em;
   }

   .grid-3 {
      grid-template-columns: 1fr
   }
}

/* About us */

.partial-hero {
   position: relative;
}

.partial-hero .grid-2 {
   display: grid;
   grid-template-columns: 1.1fr .9fr;
   position: relative;
   align-items: end;
   gap: 0px;
   z-index: 1;
}

.partial-hero picture {
   position: relative;
}

.partial-hero picture img {
   width: 640px;
   height: 720px;
}

.partial-hero .overlay-rect {
   position: absolute;
   bottom: 0;
   right: 0;
   width: 240px;
   height: 520px;
   background: var(--bg);
}

.partial-hero h1 {
   position: absolute;
   top: 200px;
   right: 0;
   margin: 0;
   font-size: 15em;
   letter-spacing: .02em;
   color: var(--panel);
   z-index: 2;
   user-select: none;
}

.partial-hero h2 {
   font-size: 5em;
   line-height: 70px;
}

.partial-hero p {
   font-size: 20px;
   color: var(--muted)
}

.partial-hero .text {
   margin-left: -80px;
   z-index: 2;
}

.rule {
   width: 64px;
   height: 2px;
   background: var(--panel);
}

@media (max-width: 1536px) {
   .partial-hero h1 {
      font-size: 14em;
   }
}

@media (max-width:1280px) {
   .partial-hero h1 {
      font-size: 12em;
   }

   .partial-hero .text {
      margin-left: -280px;
   }

   .partial-hero .overlay-rect {
      width: 340px;
      background: var(--bg);
   }
}

@media (max-width: 1028px) {
   .partial-hero picture img {
      display: block;
      width: 100%;
      height: auto;
      max-width: 100%;
   }

   .partial-hero .text {
      margin-left: 0px;
   }

   .partial-hero h1 {
      display: none;
   }

   .partial-hero h2 {
      font-size: 3em;
      margin-top: 0px;
      margin-bottom: 0px;
   }

   .partial-hero .grid-2 {
      display: block;
      position: relative;
   }

   .partial-hero .overlay-rect {
      bottom: 0;
      left: 0;
      width: 92%;
      height: 60px;
   }

   .partial-hero .rule {
      display: none;
   }
}



@media (max-width:768px) {
   .partial-hero picture img {
      display: block;
      width: 100%;
      height: 260px;
      max-width: 100%;
   }

   .partial-hero h1 {
      display: none;
   }

   .partial-hero h2 {
      font-size: 3em;
      line-height: 50px;
      margin-top: 2px;
      margin-bottom: 0px;
      font-weight: 900;
   }

   .partial-hero .text {
      padding-left: 30px;
      padding-right: 30px;
   }

   .rule {
   width: 64px;
   height: 2px;
   background: var(--panel);
   margin-left: 30px;
}
}

.text-image .grid-2 {
   display: grid;
   grid-template-columns: 1fr 2fr;
   /* 60% / 40% */
   align-items: start;
   gap: 140px;
}

.text-image .grid-2>* {
   min-width: 0;
}

.text-image img {
   display: block;
   width: 100%;
   height: auto;
}

.text-image h2 {
   margin: 0;
   font-size: 5em;
   font-weight: 900;
   color: var(--brand);
   line-height: 1.1;
}

.text-image p {
   font-size: 20px;
   color: var(--muted);
}

.text-image .rule {
   width: 64px;
   height: 2px;
   background: var(--panel);
   margin-bottom: 16px;
}

@media (max-width: 1028px) {
   .text-image .grid-2 {
      grid-template-columns: 1fr;
      gap: 24px;
   }

   .text-image .grid-2>img {
      display: none;
   }
}

@media (max-width: 768px) {
   .text-image .grid-2>div {
      padding-left: 30px;
      padding-right: 30px;
   }

   .text-image h2 {
      font-size: 3.5em;
   }
}


.leaders-layout {
   display: grid;
   grid-template-columns: 0.8fr 1.2fr;
   gap: 64px;
   align-items: start;
}

.leaders h2 {
   font-size: 5em;
   font-weight: 900;
   color: var(--brand);
   line-height: 1.1;
}

.leaders-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 64px;
}

.person-card .photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.person-card .photo {
   margin: 0;
   height: 320px;
   width: 320px;
}

.person-card .name {
   font-weight: 700;
   font-size: 20px;
   margin-top: 16px;
}

.person-card .role {
   color: var(--muted);
   margin-top: 8px;
}

.person-card .social {
   display: flex;
   gap: 24px;
   margin-top: 16px;
}

.person-card .social a {
   display: inline-grid;
   place-items: center;
}

@media (max-width:1280px) {

   .person-card .photo {
      height: 300px;
      width: 300px;
   }
}

@media (max-width:1028px) {

   .person-card .photo {
      height: 200px;
      width: 200px;
   }
}

@media (max-width:768px) {

   .leaders-layout h2 {
      font-size: 3.5em;
   }

   .leaders-layout {
      grid-template-columns: 1fr;
      padding-left: 30px;
      padding-right: 30px;
      gap: 20px;
   }

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

   .person-card .photo {
      height: fit-content;
      width: fit-content;
   }
}

/* Contact */

.contact {
   display: grid;
   grid-template-columns: 0.9fr 1fr 1fr;
   gap: 56px;
   align-items: start;
}

.contact h2 {
   font-size: clamp(3em, 5vw, 5em);
   line-height: 1.05;
   font-weight: 900;
   margin: 0;
}

.office h3 {
   margin: 0 0 12px;
   font-size: 1.1rem;
   font-weight: 800;
   color: var(--muted);
}

.detail {
   display: flex;
   gap: 10px;
   margin: 14px 0;
   color: var(--muted);
   font-size: 1.05rem;
}

.detail .label {
   min-width: 78px;
   letter-spacing: .02em;
}

.detail .value {
   color: #1b1e24;
}

@media (max-width: 768px) {
   .contact {
      grid-template-columns: 1fr;
      gap: 32px;
      padding-left: 30px;
      padding-right: 30px;
   }

   .office {
      padding-top: 6px;
   }
}

#map {
   height: 600px;
}