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

    :root {
      --black:   #0a0a0a;
      --white:   #ffffff;
      --cyan:    #00bcd4;
      --muted:   #999;
      --nav-h:   72px;
    }

    html { scroll-behavior: smooth; }

    body {
      background: #FBF6F4;
      color: var(--black);
      font-family: 'Raleway', sans-serif;
      font-weight: 300;
      overflow-x: hidden;
    }

    /* ── NAVBAR ── */
    nav {
      height: var(--nav-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 80px;
      z-index: 100;
      background: #ffffff;
      transition: box-shadow 0.3s;
    }
    nav.scrolled {
      box-shadow: 0 2px 24px rgba(0,0,0,0.07);
    }

    /* ── LOGO ── */
    .nav-brand {
      display: flex;
      align-items: center;
      text-decoration: none;          /* no underline on the link */
      user-select: none;
    }
.nav-brand img {
  height: 15rem;
  width: auto;
  max-width: none;        /* remove the cap that was blocking growth */
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.08));
  transition: opacity 0.2s;
  padding-top: 1rem;
  padding-right: 10rem;
}
nav {
  padding: 0 80px 0 24px;   /* 24px left, 80px right */
  background-color: #3b542b;
  color: #FBF6F4;
}

    /* ── NAV LINKS ── */
    .nav-links {
      color: #FBF6F4;
      display: flex;
      align-items: center;
      gap: 36px;
      list-style: none;
      text-decoration: none;
    }

    /* base state */
    .nav-links a {
      font-family: 'Raleway', sans-serif;
      font-size: 0.72rem;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      text-decoration: none;          /* ← no underline ever */
      color: #FBF6F4;
      position: relative;
      transition: color 0.22s;
    }

    /* thin animated line — cyan */
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -4px; left: 0; right: 0;
      height: 1px;
      background: #FBF6F4;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.28s ease;
      text-decoration: none;
    }

    /* hover → cyan text + line */
    .nav-links a:hover {
      text-decoration: none;
    }
    .nav-links a:hover::after {
      transform: scaleX(1);
    }

    /* active → stays cyan (toggled by JS) */
    .nav-links a.active::after {
      transform: scaleX(1);
    }

    /* ── HERO TEXT ── */
    .hero {
      padding: 72px 40px 48px;
      text-align: center;
    }
    .hero-title {
      font-family: 'Cormorant Garamond', serif;
      font-style: normal;
      font-weight: 400;
      font-size: 30px;
      color: #222222;
      padding-bottom: 10px;
      opacity: 0;
      transform: translateY(18px);
      animation: fadeUp 0.9s 0.15s forwards;
    }
    .hero-sub {
      font-size: 0.85rem;
      color: #292929;
      word-spacing: 0.15rem;
      opacity: 0;
      transform: translateY(12px);
      animation: fadeUp 0.9s 0.35s forwards;
    }

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

    /* ── GALLERY GRID ── */
    .gallery {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      padding-bottom: 80px;
    }

    .gallery-item {
      position: relative;
      overflow: hidden;
      aspect-ratio: 3 / 2;
      cursor: pointer;
      opacity: 0;
      transform: scale(0.98);
      transition: transform 0.6s cubic-bezier(0.23,1,0.32,1),
                  opacity   0.6s ease;
    }
    .gallery-item.visible {
      opacity: 1;
      transform: scale(1);
    }

    .gallery-item img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.7s cubic-bezier(0.23,1,0.32,1);
    }
    .gallery-item:hover img { transform: scale(1.06); }

    /* overlay — top-left text on hover */
    .gallery-item .overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.38);
      opacity: 0;
      transition: opacity 0.35s ease;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      padding: 22px 24px;
    }
    .gallery-item:hover .overlay { opacity: 1; }

    .overlay-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.15rem;
      font-weight: 400;
      color: #FBF6F4;
      letter-spacing: 0.03em;
      line-height: 1.2;
      margin-bottom: 6px;
    }
    .overlay-location {
      font-family: 'Raleway', sans-serif;
      font-size: 0.65rem;
      font-weight: 300;
      color: rgba(255,255,255,0.75);
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    /* ── SCROLL-TO-TOP ── */
    .scroll-top {
      position: fixed;
      bottom: 36px;
      right: 36px;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 1.5px solid rgba(0,0,0,0.22);
      background: F2F2F2;
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transform: translateY(12px);
      transition: opacity 0.3s, transform 0.3s, border-color 0.2s, background 0.2s;
      z-index: 200;
    }
    .scroll-top.show {
      opacity: 1;
      pointer-events: all;
      transform: translateY(0);
    }
    .scroll-top:hover {
      background:rgb(242,242,242);
      border-color: rgba(0,0,0,0.4);
    }
    .scroll-top svg { width: 22px; height: 22px; }
    .scroll-top svg path {
      stroke: #555;
      stroke-width: 1.8;
      fill: none;
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
      .gallery { grid-template-columns: repeat(2, 1fr); }
      nav { padding: 0 40px; text-decoration: none;}
      .nav-brand img { height: 64px; }
    }
    @media (max-width: 540px) {
      nav { padding: 0 20px; }
      .nav-links { gap: 20px; text-decoration: none;}
      .hero { padding: 48px 20px 36px; }
      .gallery { grid-template-columns: repeat(2, 1fr); }
      .scroll-top { bottom: 20px; right: 20px; }
      .nav-brand img { height: 52px; }
    }

    .nav-links li a {
    text-decoration: none !important;
}