/* ─── Fonts & Reset ─────────────────────────────────────── */

@font-face {
  font-family: 'Nagoda';
  src: url('assets/Nagoda.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}

* {
  margin: 0;
  padding: 0;
}

/* ─── Typography ─────────────────────────────────────────── */

h1 {
  font-family: 'Nagoda', sans-serif;
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 300;
  color: #242424;
  line-height: 92%;
  padding-bottom: 52px;
  letter-spacing: -2.4px;
}

h2 {
  font-family: 'Nagoda', sans-serif;
  font-size: clamp(48px, 5vw, 52px);
  font-weight: 300;
  color: #242424;
  line-height: 1.15;
  letter-spacing: -1.4px;
}

h3 {
  font-size: 22px;
  font-weight: 600;
  color: #242424;
  line-height: 1.3;
  margin-bottom: 10px;
}


body {
  font-family: "DM Sans", sans-serif;
  font-size: 19px;
  line-height: 1.7;
  color: #242424;
  background-color: #FDF6ED;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

p {
  padding-bottom: 20px;
}

.label {
  font-size: 17px;
  font-weight: 550;
  padding-bottom: 8px;
  color: #656360;
}

.emphasised {
  font-size: 22px;
  font-weight: 500;
  padding-bottom: 32px;
}

a {
  color: #242424;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  text-transform: capitalize;
}

/* ─── Buttons ────────────────────────────────────────────── */

.button {
  background-color: #242424;
  border: none;
  color: #FDF6ED;
  font-size: 17px;
  padding: 22px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 1000px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.button_social {
  display: inline-block;
  padding:16px;
  border: 2px solid #242424;
  border-radius: 100px;
  transition: transform 0.2s ease;
}

.button_social img {
  vertical-align: middle;
  width: 32px;
  height: 32px;
}

.button:hover {
  background-color: #000;
  transform: scale(1.04);
}

.button_social:hover {
  transform: scale(1.08);
}

.button--outline {
  padding: 16px 24px;
  background-color: #242424;
  color: #FDF6ED;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.button--outline:hover {
  background-color: #242424;
  color: #FDF6ED;
}

/* ─── Navigation ─────────────────────────────────────────── */

.wrapper {
  padding: 0 2.5rem;
  margin: 0 auto;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: transparent;
  transition: transform 0.3s ease;
}

.site-header--hidden {
  transform: translateY(-100%);
}

.site-header__wrapper {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
  box-sizing: border-box;
  width: 100%;
}

.site-header__middle {
  display: flex;
  justify-content: center;
  background-color: #ffffff;
  padding: 16px 24px;
  border-radius: 32px;
  transition: background-color 0.3s ease;
}

.site-header__end {
  display: flex;
  justify-content: flex-end;
}

.nav__wrapper {
  display: flex;
}

.nav {
  display: flex;
}

.nav__item:not(:last-child) {
  margin-right: 24px;
}

.nav__item a {
  display: block;
}

.nav__item a:hover {
  color: #000;
}

ul {
  list-style-type: none;
}

/* ─── Grid ───────────────────────────────────────────────── */

section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 40px 32px;
  padding: 112px 2.5rem;
}

.heading_columns {
  grid-column: span 12;
  margin-bottom: 48px;
  text-align: center;
}

/* ─── Animations ─────────────────────────────────────────── */

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.08); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

@keyframes panX {
  from { background-position: 0 center; }
  to   { background-position: 1200px center; }
}

@keyframes panX--top {
  from { background-position: 0 top; }
  to   { background-position: 701px top; }
}

@keyframes panX--footer {
  from { background-position: 0 top; }
  to   { background-position: 892px top; }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Hero ───────────────────────────────────────────────── */

.hero {
  background-color: #FD674F;
  padding-bottom: 0;
}

.hero_graphic {
  background-image: url(assets/blobs_2.svg);
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: 0 center;
  height: 326px;
  margin: -270px 0 0 0;
  animation: panX 70s linear infinite;
}

.hero_text {
  grid-column: 3 / span 8;
  text-align: center;
  padding: 100px 0 0;
}

.hero_text p {
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
  font-size: 20px;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

.hero_text h1 {
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

.hero_images {
  grid-column: 1 / -1;
  background-image: url(assets/hero_shape.svg);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
  margin-top: -50px;
}

.foreground_image {
  width: clamp(320px, 50vw, 700px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  position: relative;
  background-image: url("assets/hero_image.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

.burst {
  position: absolute;
  top: 40px;
  right: 0;
  width: clamp(80px, 11vw, 154px);
  height: clamp(80px, 11vw, 154px);
  z-index: 2;
  animation: spin 20s linear infinite;
}

.burst--left {
  top: 50%;
  right: auto;
  left: 0;
  transform: translateY(-50%);
  animation: pulse 4s ease-in-out infinite;
}

/* ─── Projects ───────────────────────────────────────────── */

.projects, .benefits {
  background-color: transparent;
  overflow: visible;
}

.projects {
  margin-top: 72px;
}

.projects .heading_columns {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.projects .heading_columns.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.project_cols {
  grid-column: span 3;
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.project_cols.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.project_cols img {
  width: 100%;
}

.project_cols p {
  margin-top: 32px;
}

/* Shared thumbnail mask properties */
.thumbnail_one,
.thumbnail_two,
.thumbnail_three,
.thumbnail_four {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  width: 100%;
}

.thumbnail_one {
  background-color: #FD674F;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='304' height='309' viewBox='0 0 304 309' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='304' height='309' rx='40' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='304' height='309' viewBox='0 0 304 309' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='304' height='309' rx='40' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: cover;
  mask-size: cover;
}

.thumbnail_two {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='303' height='309' viewBox='0 0 303 309' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M303 38.625C303 17.2935 285.673 0 264.3 0H38.6996C17.3269 0 0 17.2935 0 38.625C0 59.9565 17.3269 77.25 38.6996 77.25C17.3269 77.25 0 94.5435 0 115.875C0 137.207 17.3269 154.5 38.6996 154.5C17.3269 154.5 0 171.793 0 193.125C0 214.457 17.3269 231.75 38.6996 231.75C17.3269 231.75 0 249.043 0 270.375C0 291.707 17.3269 309 38.6996 309H264.212C285.585 309 302.912 291.707 302.912 270.375C302.912 249.043 285.585 231.75 264.212 231.75C285.585 231.75 302.912 214.457 302.912 193.125C302.912 171.793 285.585 154.5 264.212 154.5C285.585 154.5 302.912 137.207 302.912 115.875C302.912 94.5435 285.585 77.25 264.212 77.25C285.673 77.3378 303 59.9565 303 38.625Z' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='303' height='309' viewBox='0 0 303 309' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M303 38.625C303 17.2935 285.673 0 264.3 0H38.6996C17.3269 0 0 17.2935 0 38.625C0 59.9565 17.3269 77.25 38.6996 77.25C17.3269 77.25 0 94.5435 0 115.875C0 137.207 17.3269 154.5 38.6996 154.5C17.3269 154.5 0 171.793 0 193.125C0 214.457 17.3269 231.75 38.6996 231.75C17.3269 231.75 0 249.043 0 270.375C0 291.707 17.3269 309 38.6996 309H264.212C285.585 309 302.912 291.707 302.912 270.375C302.912 249.043 285.585 231.75 264.212 231.75C285.585 231.75 302.912 214.457 302.912 193.125C302.912 171.793 285.585 154.5 264.212 154.5C285.585 154.5 302.912 137.207 302.912 115.875C302.912 94.5435 285.585 77.25 264.212 77.25C285.673 77.3378 303 59.9565 303 38.625Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: cover;
  mask-size: cover;
}

.thumbnail_three {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='309' height='309' viewBox='0 0 309 309' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M309 0C279.414 100.875 279.414 208.125 309 309C208.125 279.414 100.875 279.414 0 309C29.5859 208.125 29.5859 100.875 0 0C100.797 29.5859 208.125 29.5859 309 0Z' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='309' height='309' viewBox='0 0 309 309' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M309 0C279.414 100.875 279.414 208.125 309 309C208.125 279.414 100.875 279.414 0 309C29.5859 208.125 29.5859 100.875 0 0C100.797 29.5859 208.125 29.5859 309 0Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
}

.thumbnail_four {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='305' height='309' viewBox='0 0 305 309' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M152.059 0L150.989 1.08744C108.936 42.912 41.5356 42.4938 0.0585938 0C41.7825 42.1592 42.2762 110.668 1.12843 153.413L0.0585938 154.5C41.7825 196.659 42.2762 265.168 1.12843 307.913L0.0585938 309C41.5356 266.59 108.936 266.088 150.989 307.913L152.059 309C193.536 266.59 260.936 266.088 302.989 307.913C261.841 265.168 262.252 196.659 304.059 154.5L302.989 153.413C261.841 110.668 262.252 42.1592 304.059 0L302.989 1.08744C260.936 42.912 193.536 42.4101 152.059 0Z' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='305' height='309' viewBox='0 0 305 309' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M152.059 0L150.989 1.08744C108.936 42.912 41.5356 42.4938 0.0585938 0C41.7825 42.1592 42.2762 110.668 1.12843 153.413L0.0585938 154.5C41.7825 196.659 42.2762 265.168 1.12843 307.913L0.0585938 309C41.5356 266.59 108.936 266.088 150.989 307.913L152.059 309C193.536 266.59 260.936 266.088 302.989 307.913C261.841 265.168 262.252 196.659 304.059 154.5L302.989 153.413C261.841 110.668 262.252 42.1592 304.059 0L302.989 1.08744C260.936 42.912 193.536 42.4101 152.059 0Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: cover;
  mask-size: cover;
}

/* ─── Benefits ───────────────────────────────────────────── */

.benefits {
  padding-top: 160px;
  padding-bottom: 240px;
}

.benefits .heading_columns {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  margin-bottom: 100px;
}

.benefits .heading_columns.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.benefit_cols {
  grid-column: span 4;
  background-color: #ffffff;
  border-radius: 24px;
  padding: 32px;
  text-align: left;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.benefit_cols.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.benefit_cols h3 {
  margin-top: 24px;
}

.benefit_cols p {
  color: #52504D;
  padding-bottom: 0;
}

.benefit_cols img {
  height: 56px;
  width: 56px;
}

/* ─── Footer ─────────────────────────────────────────────── */

footer {
  margin: 0;
  padding-top: 150px;
  padding-bottom: 100px;
}

.footer p {
  font-size: 20px;
  padding-bottom: 22px;
}

.footer_cols {
  grid-column: 3 / span 8;
  text-align: center;
}

.footer_cols h2 {
  padding-bottom: 24px;
}

.footer_cols p {
  color: #242424;
}

.footer_cols h2,
.footer_cols .email-container,
.footer_cols .copyright {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer_cols .copyright {
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer_cols h2.is-visible,
.footer_cols .email-container.is-visible,
.footer_cols .copyright.is-visible {
  opacity: 1;
  transform: translateY(0);
}

p.copyright {
  font-size: 17px;
  font-weight: 400;
  color: #292926;
  margin-top: 20px;
  padding-bottom: 0;
}

#copyEmailBtn {
  font-size: 16px;
  letter-spacing: 0.4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

#copyEmailBtn img {
  margin-left: 8px;
  height: 16px;
  width: auto;
}

.email-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.footer_cols .email-container {
  margin-bottom: 80px;
}

.footer_graphic {
  display: block;
  padding: 0;
  margin: 0;
  min-height: 450px;
  flex-shrink: 0;
  background-image: url(assets/blobs_2.svg);
  background-repeat: repeat-x;
  background-size: auto 700px;
  background-position: 0 top;
  animation: panX--footer 60s linear infinite;
  overflow: hidden;
  will-change: background-position;
  transform: translateZ(0);
}

/* ─── Responsive ─────────────────────────────────────────── */

@media (max-width: 1024px) {
  a {
    font-size: 16px;
  }

  a.button {
    font-size: 17px;
  }

  .site-header__wrapper {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  section {
    grid-template-columns: repeat(8, 1fr);
    gap: 40px 32px;
    padding: 80px 32px;
  }

  .heading_columns {
    grid-column: 1 / span 8;
    margin-bottom: 8px;
  }

  .hero_text {
    grid-column: span 8;
    padding: 132px 0 40px 0;
  }

  .hero_images {
    background-image: url(assets/shape_mobile.svg);
    background-position: center 103px;
    background-repeat: no-repeat;
    background-size: 160%;
  }

  .hero_graphic{
    height: 266px;
    animation: panX 70s linear infinite;
  }

  .project_cols {
    grid-column: span 4;
  }

  .footer_cols {
    grid-column: span 8;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .button {
    margin-right: 0;
    padding: 20px 28px;
  }

  p.copyright {
    font-size: 18px;
  }

  .label {
    font-size: 16px;
    font-weight: 500;
  }

  .email-container {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  #copyEmailBtn {
    font-size: 17px;
    width: fit-content;
    max-width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  .button_social img {
    width: 40px;
    height: 40px;
  }

  .footer_cols h2 {
    padding-bottom: 16px;
  }

  .nav {
    display: none;
  }

  .button--outline {
    display: none;
  }

  .site-header__wrapper {
    padding-top: 24px;
    padding-bottom: 16px;
  }

  .site-header__middle img {
    height: 32px;
  }

  .site-header__middle {
    order: -1;
    text-align: left;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
  }

  .hero_graphic {
    animation: panX 70s linear infinite;
  }

  .footer_graphic {
    animation: panX--footer 60s linear infinite;
  }
}

@media (max-width: 620px) {
  .footer p {
    padding-bottom: 28px;
  }
}

@media (max-width: 500px) {
  body {
    font-size: 18px;
    line-height: 1.4;
  }

  h1 {
    font-size: 44px;
    line-height: 1.0em;
    letter-spacing: -1px;
  }

  h2 {
    font-size: 40px;
    letter-spacing: -0.5px;
  }

  h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
  }

  a {
    font-size: 17px;
    font-weight: 500;
  }

  .hero_text p, .footer p {
    font-size: 18px;
  }

  p.copyright {
    font-size: 16px;
  }

  .button {
    padding: 16px 20px;
  }

  a.button {
    font-size: 15px;
  }

  section {
    grid-template-columns: repeat(4, 1fr);
    padding: 80px 24px;
  }

  .heading_columns {
    grid-column: span 4;
    margin-bottom: 0;
  }

  .footer_cols {
    grid-column: span 4;
  }

  .hero_text {
    grid-column: span 4;
    padding: 80px 0 40px 0;
    margin-left: 0;
    margin-right: 0;
  }

  .hero_graphic {
    height: 220px;
    animation: panX 70s linear infinite;
  }

  .foreground_image {
    margin: 0 auto;
  }

  .project_cols {
    grid-column: span 4;
  }

  .project_cols p {
    margin-top: 16px;
  }

  .benefit_cols {
    grid-column: span 4;
  }

  .benefit_cols h3 {
    margin-top: 12px;
    margin-bottom: 8px;
  }

  .benefit_cols img {
    height: 72px;
    width: 72px;
  }

  .button_social {
    padding: 12px;
  }

  .button_social img {
    width: 24px;
    height: 24px;
  }

  .footer_graphic {
    min-height: 300px;
    background-size: auto 500px;
    animation: panX--footer 60s linear infinite;
    padding: 0;
    margin: 0;
  }
}

/* ─── Accessibility ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hero_graphic,
  .footer_graphic {
    animation: none;
  }
}