@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=Inter:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&display=swap');

:root{
  --ink:            #0b0b0a;
  --ivory:          #f6f3ec;
  --gold:           #c9a463;
  --gold-dim:       rgba(201,164,99,0.45);
  --overlay-top:    rgba(6,6,5,0.55);
  --overlay-bottom: rgba(6,6,5,0.15);
  --line:           rgba(246,243,236,0.22);
  --line-soft:      rgba(246,243,236,0.12);

  
  --font-body:    'Inter',  sans-serif;

  --header-height: 92px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--ivory);
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
button{ font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
a{ color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/*********************  HEADER & BANNER ************************/





/* BANNER (single static image, fixed 600px height) */
.site-banner{ position:relative; width:100%; height:650px; overflow:hidden; background: var(--ink); }
.site-banner__image{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position: bottom center;
}

.site-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;

  background: linear-gradient(
    to left,
    rgba(6, 6, 5, 0.45) 0%,
    rgba(6, 6, 5, 0.30) 45%,
    rgba(6, 6, 5, 0.12) 80%,
    transparent 80%
  );
}

.site-banner__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: -60px 0 0 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  white-space: nowrap;
}

.site-banner__label-badge{
  background:#FCC222;
  color:#1a1a1a;
  font-family: 'Philosopher', serif;
  font-weight:500;
  font-size:18px;
  letter-spacing:0.15em;
  text-transform:uppercase;
  padding:6px 20px;
  border-radius:1px;
  white-space:nowrap;
}

.site-banner__label-line{
  display:inline-block;
  width:40px;
  height:1px;
  background:#FCC222;
}

.site-banner__headings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  margin: 0;
  font-family: 'Philosopher', serif;
  font-weight: 500;
  font-size: clamp(32px, 5vw, 42px);
  text-transform: uppercase;
  color: #FFFFFF;
  text-align: center;
  white-space: nowrap;
}


.desktop-banner {
    display: block;
}

.mobile-banner {
    display: none;
}

/*********************  PROJECT SECTION ************************/


 
.projects-section {
  width: 1400px;
  max-width: 100%;
  margin: 0 auto;
  background: #FCFBF9;
  padding: 80px 80px 100px;
}

.projects-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.section-header {
  text-align: center;
  max-width: 1000px;
  margin: 0 auto 56px;
}

.section-title {
  font-size: 30px;
  font-weight: 500;
  color: #1a1a1a;
  margin: 0 0 16px;
  letter-spacing: -0.5px;
  font-family: Georgia, "Times New Roman", serif;
}

.section-subtitle {
  font-size: 16px;
  line-height: 1.6;
  color: #565c66;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}

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

.project-card {
  background: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border: 1px solid #E2DFDA;
}

.project-image-wrap {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
}

.project-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.type-label {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #ffffff;
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 1px;
  letter-spacing: 0.3px;
}

.project-body {
  padding: 22px 22px 26px;
}

.project-title {
  font-size: 22px;
  font-weight: 500;
  color: #1a1a1a;
  margin: 0 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  text-transform: uppercase;
}

.project-location {
  font-size: 15px;
  color: #7a7a7a;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}

.project-location i {
  font-size: 13px;
  color: #7a7a7a;
}

.info-divider {
  border: none;
  border-top: 1px solid #E2DFDA;
  margin: 0 0 18px;
}

.info-row {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Inter', sans-serif;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  font-weight: 300;
  color: #4a4a4a;
  white-space: nowrap;
}

.info-item .num {
  font-weight: 600;
  color: #1a1a1a;
}

.info-sep {
  width: 1px;
  height: 14px;
  background: #D8D5CF;
  flex-shrink: 0;
}

.project-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  margin-top: 20px !important;
  position: relative;
  z-index: 2;
}

.project-actions .view-more-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  color: #1a1a1a !important;
  background: transparent !important;
  border: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 14px !important;
  white-space: nowrap;
}

.project-actions .view-brochure-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 !important;
  padding: 0 !important;
  color: #1a1a1a !important;
  background: transparent !important;
  border: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-family: 'Inter', sans-serif;
  font-size: 14px !important;
  font-weight: 500;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
}

.project-actions .view-brochure-btn:hover {
  color: #9B7B45 !important;
}



/* Real gallery images live in plain HTML per card, hidden from view,
   and are read by the script when a popup opens. Edit the <img> src
   values inside .card-gallery-source to point at each project's photos. */
.card-gallery-source {
  display: none;
}

/* --- gallery popup --- */
.gallery-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 15, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40px;
}

.gallery-overlay.open {
  display: flex;
}

.gallery-popup {
  background: #FCFBF9;
  width: 1100px;
  max-width: 100%;
  max-height: 90vh;
  padding: 32px;
  position: relative;
  overflow-y: auto;
}

.gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.gallery-title {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 500;
  color: #1a1a1a;
  text-transform: uppercase;
  margin: 0;
}

.gallery-close {
  background: none;
  border: 1px solid #1a1a1a;
  width: 34px;
  height: 34px;
  font-size: 16px;
  color: #1a1a1a;
  cursor: pointer;
  line-height: 1;
}

/* Slideshow is now the only view — it opens straight into full screen */
.gallery-slideshow {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slideshow-stage {
  width: 100%;
  min-height: 200px;
  max-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ECECEC;
  position: relative;
  overflow: hidden;
}

.slideshow-stage img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  display: block;
}

.slide-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #FCFBF9;
  border: none;
  width: 42px;
  height: 42px;
  font-size: 18px;
  color: #1a1a1a;
  cursor: pointer;
}

.slide-nav.prev { left: 14px; }
.slide-nav.next { right: 14px; }

.slideshow-count {
  margin-top: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #7a7a7a;
  letter-spacing: 0.3px;
}

/* Thumbnail strip below the main image */
.gallery-thumbnails {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.gallery-thumbnails img {
  width: 110px;
  height: 74px;
  object-fit: cover;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.55;
  border: 2px solid transparent;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.gallery-thumbnails img:hover {
  opacity: 0.85;
}

.gallery-thumbnails img.active {
  opacity: 1;
  border-color: #1a1a1a;
}

/* ==============================
   ENDEE VISTA YOUTUBE VIDEO
================================ */

.gallery-video-item {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.gallery-video-item iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
  
 .slideshow-stage .video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 70vh;
} 
  
  .thumb-wrap {
  position: relative;
  width: 110px;
  height: 74px;
  flex-shrink: 0;
  cursor: pointer;
  opacity: 0.55;
  border: 2px solid transparent;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  opacity: 1;
}

.thumb-wrap:hover {
  opacity: 0.85;
}

.thumb-wrap.active {
  opacity: 1;
  border-color: #1a1a1a;
}

.thumb-wrap .play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 16px;
  text-shadow: 0 0 4px rgba(0,0,0,0.6);
  pointer-events: none;
}





 .video-section {
      box-sizing: border-box;
      min-height: 400px;
      padding: 40px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      background: transparent;
    }
 
    .video-section__title {
      font-size: 30px;
      font-weight: 600;
      margin: 0 0 32px;
      color: #141414;
      font-family:'Fraunces', serif;
      text-transform: uppercase;
    }
 
    /* Keeps the video 16:9 on every screen size */
    .video-section__frame {
      position: relative;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      aspect-ratio: 21 / 9;
      border-radius: 12px;
      overflow: hidden;
      background: #000;
    }
 
    .video-section__frame iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
  
  /* Laptop / small desktop */
    @media (max-width: 1199px) {
      .video-section {
        padding: 40px 30px;
      }
    }
 
    /* Tablet */
    @media (max-width: 1024px) {
      .video-section {
        min-height: 360px;
        padding: 36px 24px;
      }
 
      .video-section__title {
        font-size: 26px;
        margin-bottom: 28px;
      }
 
      .video-section__frame {
        aspect-ratio: 16 / 9;
        border-radius: 10px;
      }
    }
 
    /* Large mobile */
    @media (max-width: 767px) {
      .video-section {
        min-height: auto;
        padding: 30px 16px;
      }
 
      .video-section__title {
        font-size: 22px;
        line-height: 1.3;
        margin-bottom: 20px;
      }
 
      .video-section__frame {
        border-radius: 8px;
      }
    }
 
    /* Small mobile */
    @media (max-width: 480px) {
      .video-section {
        padding: 24px 12px;
      }
 
      .video-section__title {
        font-size: 18px;
        margin-bottom: 16px;
      }
 
      .video-section__frame {
        border-radius: 6px;
      }
    }
  /*********************  PRESPONSIVE DESIGNS ************************/
  
  
  
  
/* =====================================================================
   1. LARGE SCREENS (>= 1600px)
===================================================================== */
@media (min-width:1600px){
 
  /* banner */
  .site-banner{ height:760px; }
  .site-banner__label-badge{ font-size:20px; padding:7px 24px; }
  .site-banner__label-line{ width:56px; }
  .site-banner__headings{ font-size:52px; }
  .site-banner__label{ margin-top:-72px; }
 
  /* projects */
  .projects-section{ width:1680px; padding:100px 100px 120px; }
  .section-header{ max-width:1200px; margin-bottom:68px; }
  .section-title{ font-size:36px; }
  .section-subtitle{ font-size:18px; }
  .projects-grid{ gap:40px; }
  .project-image-wrap{ height:380px; }
  .project-body{ padding:26px 26px 30px; }
  .project-title{ font-size:24px; }
  .project-location{ font-size:16px; }
  .info-item{ font-size:15px; }
 
  /* gallery */
  .gallery-popup{ width:1300px; padding:40px; }
  .gallery-title{ font-size:24px; }
  .slideshow-stage,
  .slideshow-stage img{ max-height:72vh; }
  .gallery-thumbnails img,
  .thumb-wrap{ width:130px; height:88px; }
}
 
 
/* =====================================================================
   2. 4K / ULTRA-WIDE (>= 2200px)
===================================================================== */
@media (min-width:2200px){
 
  .site-banner{ height:900px; }
  .site-banner__label-badge{ font-size:24px; }
  .site-banner__headings{ font-size:64px; }
  .site-banner__label{ margin-top:-90px; }
 
  .projects-section{ width:2000px; padding:120px 120px 140px; }
  .section-header{ max-width:1400px; }
  .section-title{ font-size:44px; }
  .section-subtitle{ font-size:20px; }
  .projects-grid{ gap:48px; }
  .project-image-wrap{ height:460px; }
  .project-title{ font-size:28px; }
  .project-location{ font-size:18px; }
  .info-item{ font-size:17px; }
  .type-label{ font-size:16px; padding:8px 16px; }
 
  .gallery-popup{ width:1600px; }
  .gallery-title{ font-size:28px; }
}
 
 
/* =====================================================================
   3. SMALL LAPTOPS (<= 1280px)
===================================================================== */
@media (max-width:1280px){
 
  .projects-section{ padding:70px 48px 80px; }
  .section-header{ margin-bottom:48px; }
  .projects-grid{ gap:24px; }
  .project-image-wrap{ height:280px; }
  .project-body{ padding:20px 18px 24px; }
 
  /* base has nowrap items in a row — let the row wrap instead of overflowing */
  .info-row{ flex-wrap:wrap; gap:8px 12px; }
}
 
 
/* =====================================================================
   4. TABLET (<= 1024px)
===================================================================== */
@media (max-width:1024px){
 
  /* ---------- BANNER ---------- */
  .site-banner{ height:520px; }
  .site-banner__label-badge{ font-size:16px; padding:6px 18px; }
  .site-banner__label-line{ width:32px; }
  .site-banner__headings{ font-size:clamp(30px, 5vw, 40px); }
 
  /* ---------- PROJECTS: 2 columns ---------- */
  .projects-section{ padding:60px 32px 70px; }
  .section-title{ font-size:26px; }
  .projects-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; }
  .project-image-wrap{ height:300px; }
 
  /* odd number of cards: centre the last one instead of leaving a hole */
  .project-card:last-child:nth-child(odd){
    grid-column:1 / -1;
    width:calc(50% - 12px);
    justify-self:center;
  }
 
  /* ---------- GALLERY ---------- */
  .gallery-overlay{ padding:24px; }
  .gallery-popup{ padding:24px; }
}
 
 
/* =====================================================================
   5. MOBILE (<= 767px)
===================================================================== */
@media (max-width:767px){
 
  /* ---------- BANNER ---------- */
  .desktop-banner{ display:none; }
  .mobile-banner{ display:block; }
 
  .site-banner{ height:460px; }
  /* even dark overlay so centred white text is readable on any photo */
  .site-banner__overlay{
    background:linear-gradient(to bottom,
      rgba(6,6,5,.45) 0%, rgba(6,6,5,.30) 50%, rgba(6,6,5,.40) 100%);
  }
  .site-banner__label{
    margin-top:-64px;
    gap:8px;
    width:92%;
    justify-content:center;
  }
  .site-banner__label-badge{
    font-size:13px;
    letter-spacing:.12em;
    padding:5px 14px;
  }
  .site-banner__label-line{ width:20px; }
  .site-banner__headings{
    width:90%;
    white-space:normal;                 /* base is nowrap — would overflow on phones */
    font-size:clamp(24px, 7vw, 32px);
    line-height:1.2;
  }
 
  /* ---------- PROJECTS: 1 column ---------- */
  .projects-section{ padding:44px 20px 56px; }
  .section-header{ margin-bottom:32px; }
  .section-title{ font-size:24px; margin-bottom:12px; }
  .section-subtitle{ font-size:15px; }
 
  .projects-grid{ grid-template-columns:1fr; gap:22px; }
  .project-card:last-child:nth-child(odd){
    grid-column:auto;
    width:auto;
    justify-self:stretch;
  }
  .project-image-wrap{ height:260px; }
  .project-body{ padding:20px 18px 22px; }
  .project-title{ font-size:20px; }
  .project-location{ font-size:14px; margin-bottom:14px; }
  .info-divider{ margin-bottom:14px; }
  .info-item{ font-size:13.5px; gap:10px; }
  .view-more-btn{ margin-top:16px; }
 
  /* ---------- GALLERY POPUP ---------- */
  .gallery-overlay{ padding:12px; }
  .gallery-popup{
    padding:16px;
    max-height:92vh; max-height:92dvh;
  }
  .gallery-header{ margin-bottom:14px; gap:12px; }
  .gallery-title{ font-size:16px; line-height:1.3; }
  .gallery-close{ width:32px; height:32px; flex-shrink:0; }
 
  .slideshow-stage{ min-height:180px; max-height:55vh; }
  .slideshow-stage img{ max-height:55vh; }
  .slideshow-stage .video-frame{ max-height:55vh; }
  .slide-nav{ width:36px; height:36px; font-size:16px; }
  .slide-nav.prev{ left:8px; }
  .slide-nav.next{ right:8px; }
  .slideshow-count{ margin-top:10px; font-size:12px; }
 
  .gallery-thumbnails{
    gap:8px;
    margin-top:14px;
    -webkit-overflow-scrolling:touch;
  }
  .gallery-thumbnails img,
  .thumb-wrap{ width:80px; height:56px; }
  .thumb-wrap .play-icon{ font-size:13px; }
}
 
 
/* =====================================================================
   6. PHONES (<= 480px)
===================================================================== */
@media (max-width:480px){
 
  .site-banner{ height:400px; }
  .site-banner__label{ margin-top:-56px; }
  .site-banner__label-badge{ font-size:12px; padding:4px 12px; }
  .site-banner__label-line{ width:14px; }
 
  .projects-section{ padding:36px 16px 48px; }
  .section-title{ font-size:22px; }
  .section-subtitle{ font-size:14px; }
  .project-image-wrap{ height:230px; }
  .type-label{ top:10px; left:10px; font-size:12px; padding:5px 10px; }
  .project-title{ font-size:19px; }
 
  .gallery-overlay{ padding:8px; }
  .gallery-popup{ padding:12px; }
  .slideshow-stage{ min-height:160px; }
}
 
 
/* =====================================================================
   7. VERY SMALL PHONES (<= 360px)
===================================================================== */
@media (max-width:360px){
 
  .site-banner{ height:360px; }
  .site-banner__headings{ font-size:22px; }
 
  .projects-section{ padding:32px 12px 44px; }
  .project-body{ padding:16px 14px 20px; }
  .info-item{ font-size:13px; }
  .gallery-thumbnails img,
  .thumb-wrap{ width:68px; height:48px; }
}
 
 
/* =====================================================================
   8. SHORT LANDSCAPE PHONES
===================================================================== */
@media (max-height:500px) and (orientation:landscape){
 
  .site-banner{ height:360px; }
 
  .gallery-overlay{ padding:6px; }
  .gallery-popup{ max-height:96vh; max-height:96dvh; padding:10px 14px; }
  .gallery-header{ margin-bottom:8px; }
  .slideshow-stage{ min-height:120px; max-height:50vh; }
  .slideshow-stage img,
  .slideshow-stage .video-frame{ max-height:50vh; }
  .gallery-thumbnails{ margin-top:8px; }
  .gallery-thumbnails img,
  .thumb-wrap{ width:64px; height:44px; }
}
 
 
/* =====================================================================
   9. TOUCH DEVICES — no sticky hover effects
===================================================================== */
@media (hover:none){
  .view-more-btn:hover i{ transform:none; }
  .gallery-thumbnails img:hover,
  .thumb-wrap:hover{ opacity:.55; }
  .gallery-thumbnails img.active,
  .thumb-wrap.active{ opacity:1; }
}