@charset "UTF-8";

/* Utopia Fluid Typography System
  Min: 320px screen -> 16px body
  Max: 1440px screen -> 36px body
  Scale: 1.25 (Major Third)
*/

:root {
    
      /* Font */
  --font-family: "Poppins", sans-serif;
    
      /* Type scale */
  --step-0: clamp(1rem, 0.6429rem + 1.7857vw, 2.25rem);
  --step-1: clamp(1.25rem, 0.8036rem + 2.2321vw, 2.8125rem);
  --step-2: clamp(1.5625rem, 1.0045rem + 2.7902vw, 3.5156rem);
  --step-3: clamp(1.9531rem, 1.2556rem + 3.4877vw, 4.3945rem);
  --step-4: clamp(2.4414rem, 1.5695rem + 4.3597vw, 5.4932rem);
  --step-5: clamp(3.0518rem, 1.9618rem + 5.4496vw, 6.8665rem);
  --step-6: clamp(3.8147rem, 2.4523rem + 6.812vw, 8.5831rem);
    
    /* Add Line Height Variables */
  --lh-tight: 1.1;  /* For giant Step 5 & 6 headers */
  --lh-body: 1.5;   /* For Step 0 body text */
    
  /* Define a consistent gutter for mobile */
  --mobile-gutter: 1.5rem;
  /* You can increase this for desktop if you want the text further in */
  --desktop-gutter: 4rem; 
}

h1 {
  font-size: var(--step-6);
  line-height: var(--lh-tight); /* Tighter for large text */
  text-transform: uppercase;
}
h2 {
  font-size: var(--step-5);
line-height: var(--lh-tight);
  text-transform: uppercase;
}
h3 {
  font-size: var(--step-4);
    line-height: var(--lh-tight);
  text-transform: uppercase;
}
h4 {
  font-size: var(--step-3);
    line-height: var(--lh-tight);
  text-transform: uppercase;
}
h5 {
  font-size: var(--step-2);
    line-height: var(--lh-tight);
  text-transform: uppercase;
}
h6 {
  font-size: var(--step-1);
    line-height: var(--lh-tight);
}
p {
  font-size: var(--step-0);
line-height: var(--lh-body);
}
body {
  font-family: var(--font-family);
line-height: var(--lh-body);
  color: #36454f;
}
.hero-section {
  width: 100%;
  min-height: 100vh;
  background-color: #fa7268;
  
  display: flex;
  /* Keeps the content block centered horizontally */
  justify-content: center; 
  /* Centers the content block vertically */
  align-items: center; 
  
  /* Mobile-first padding */
  padding: 2rem var(--mobile-gutter);
  box-sizing: border-box;
}

.hero-title {
  font-size: var(--step-6);
  line-height: 0.9;
  color: #36454f;
  
  /* The "Magic" combination: */
  text-align: left;    /* Left align the actual text lines */
  margin: 0 auto;      /* Keeps the container centered if it hits max-width */
  width: 100%;
  max-width: 1100px;   /* Limits how far the text stretches on desktop */
  
  font-weight: 800;
  letter-spacing: -0.02em;
}

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

.site-header {
  height: 150px;
  background: #36454f;
}

.header-inner {
  max-width: 1400px;
  height: 100%;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  max-width: 80px;
}

.nav-list {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-list a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

.nav-list a.active {
  color: #fa7268;
}

.burger {
  display: none;
  background: none;
  border: none;
}

.burger span {
  display: block;
  width: 25px;
  height: 2px;
  background: #fa7268;
  margin: 6px 0;
}

/* =====================
   MASONRY GRID (Refined)
===================== */

.masonry-section {
  width: 100%; /* Changed from 100vw to avoid horizontal scrollbars */
  min-height: 100vh;
  padding: 0; /* Remove padding if you want edge-to-edge images */
}

.masonry-grid {
  column-count: 5;
  column-gap: 0;
  width: 100%;
}

.masonry-grid img {
  display: block;      /* Removes white space gap at bottom */
  width: 100%;         /* Ensures images fill the column width */
  height: auto;
  break-inside: avoid; /* Prevents image from splitting across columns */
  
  /* Animation */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.6s ease-out forwards;
}

/* Staggering the first 10 images manually (since CSS can't auto-count) */
.masonry-grid img:nth-child(1) { animation-delay: 0.1s; }
.masonry-grid img:nth-child(2) { animation-delay: 0.2s; }
.masonry-grid img:nth-child(3) { animation-delay: 0.3s; }
.masonry-grid img:nth-child(4) { animation-delay: 0.4s; }
.masonry-grid img:nth-child(5) { animation-delay: 0.5s; }

/* Responsive Grid */
@media (max-width: 1200px) { .masonry-grid { column-count: 3; } }
@media (max-width: 768px) { .masonry-grid { column-count: 1; } }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =====================
   FOOTER
===================== */

.footer-upper {
  height: 150px;
  background: #36454f;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-lower {
  height: 50px;
  background: #fa7268;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.footer-lower p {
  color: #fff;
  margin: 0;
}

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

@media (max-width: 768px) {
  .masonry-grid {
    column-count: 1;
  }

  .nav {
    position: fixed;
    top: 150px;
    left: 0;
    width: 100%;
    height: calc(100vh - 150px);
    background: #36454f;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .nav.open {
    opacity: 1;
    pointer-events: auto;
  }

  .nav-list {
    flex-direction: column;
    padding: 2rem;
  }

  .burger {
    display: block;
  }
}