:root{--navy:#0b1625;--gold:#b78a2a;--ink:#24272a;--muted:#858585;--paper:#fff;--soft:#f6f6f5}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff;font-family:'Montserrat',Arial,sans-serif;font-size:15px;line-height:1.65}.site-header{position:fixed;top:0;left:0;right:0;z-index:20;background:rgba(255,255,255,.96);border-bottom:1px solid #eee;backdrop-filter:blur(8px)}.header-inner{max-width:1060px;margin:auto;height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 24px}.brand img{height:52px;width:52px;object-fit:contain}.nav{display:flex;gap:28px}.nav a{color:#252525;text-decoration:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}.nav a:hover{color:var(--gold)}.menu-toggle{display:none;border:0;background:none;font-size:25px}.hero{position:relative;min-height:720px;height:88vh;display:grid;place-items:center;overflow:hidden}.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.43)}.hero-content{position:relative;z-index:2;max-width:780px;text-align:center;color:#fff;padding:100px 24px 50px}.hero-logo{width:94px;height:94px;object-fit:contain;background:#fff;padding:7px;margin:0 auto 34px;display:block}.hero h1{font-family:'Josefin Sans',sans-serif;font-size:40px;line-height:1.12;letter-spacing:.1em;text-transform:uppercase;margin:0 auto 22px;font-weight:700}.hero p{font-size:15px;max-width:660px;margin:0 auto;line-height:1.65}.section{padding:88px 24px}.container{max-width:960px;margin:auto}.container.wide{max-width:1000px}h2{font-family:'Josefin Sans',sans-serif;color:#888b8b;font-size:25px;line-height:1.25;letter-spacing:.13em;text-align:center;margin:0 0 38px;text-transform:uppercase;font-weight:700}h3{font-family:'Josefin Sans',sans-serif;font-weight:500;font-size:19px;line-height:1.45;margin:0 0 30px;text-align:center;letter-spacing:.02em}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}.media img{width:100%;display:block;height:auto}.copy{text-align:center;max-width:500px;margin:auto}.copy p{margin:0 0 16px;font-size:13px;line-height:1.65}.about{background:#fff}.mission{background:#f7f7f7}.mission .media img{aspect-ratio:2/1;object-fit:cover}.projects{background:#fff;padding-top:78px}.projects h2{max-width:760px;margin-left:auto;margin-right:auto}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:start}.project{margin:0;overflow:hidden;background:#3d414b;color:#fff}.project img{display:block;width:100%;height:240px;object-fit:cover}.project div{font-family:'Josefin Sans',sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:11px;line-height:1.25;padding:10px 9px;text-align:center;min-height:46px}.project.featured img{height:310px}.contact{background:#f7f7f7;padding-bottom:70px}.contact-grid{align-items:start}.contact .copy{text-align:left;max-width:none}.contact .copy h3{text-align:left;font-size:16px;margin:0 0 14px}.contact .copy p{font-size:14px;margin-bottom:18px}.contact .media img{height:275px;object-fit:cover;object-position:center}.contact-links a{color:inherit;text-decoration:none}.contact-links a:hover{color:var(--gold)}.footer{background:var(--navy);color:#fff;padding:22px 24px}.footer .container{display:flex;justify-content:space-between;align-items:center;font-size:12px}.footer a{color:#fff;text-decoration:none}.footer a:hover{color:#d8ae54}@media(max-width:760px){.header-inner{height:60px}.nav{display:none;position:absolute;top:60px;left:0;right:0;background:#fff;flex-direction:column;padding:18px 24px;gap:16px;border-bottom:1px solid #eee}.nav.open{display:flex}.menu-toggle{display:block}.hero{min-height:620px;height:82vh}.hero-content{padding-top:90px}.hero-logo{width:82px;height:82px;margin-bottom:24px}.hero h1{font-size:27px;letter-spacing:.07em}.hero p{font-size:13px}.section{padding:65px 20px}h2{font-size:21px;margin-bottom:30px}.two-col{grid-template-columns:1fr;gap:28px}.reverse-mobile .media{order:0}.copy{max-width:620px}.project-grid{grid-template-columns:1fr 1fr;gap:8px}.project img,.project.featured img{height:220px}.project div{font-size:10px;min-height:48px}.contact .media img{height:auto}.footer .container{flex-direction:column;gap:10px;text-align:center}}@media(max-width:480px){.hero h1{font-size:23px}.hero{min-height:580px}.project-grid{grid-template-columns:1fr}.project img,.project.featured img{height:auto;max-height:360px}.nav a{font-size:11px}}
/* =========================================
   PROJECT CAROUSEL
========================================= */

.projects-section {
  background: #ffffff;
  padding: 45px 0 55px;
  overflow: hidden;
}

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

.projects-section h2 {
  margin: 0 auto 30px;

  padding: 0 20px;

  text-align: center;

  color: #8c8c86;

  font-family: "Josefin Sans", sans-serif;

  font-size: 24px;
  font-weight: 700;

  line-height: 1.35;

  letter-spacing: 0.10em;

  text-transform: uppercase;
}


/* MAIN CAROUSEL */

.project-carousel {
  position: relative;

  width: 100%;

  height: 500px;

  overflow: hidden;
}


/* SLIDE AREA */

.project-slides {
  position: relative;

  width: 100%;
  height: 100%;
}


/* EACH SLIDE */

.project-slide {
  position: absolute;

  top: 0;
  left: 50%;

  width: 62%;
  height: 100%;

  transform: translateX(-50%) scale(0.72);

  opacity: 0;

  z-index: 1;

  transition:
    transform 0.55s ease,
    opacity 0.55s ease;

  pointer-events: none;
}


/* IMAGE */

.project-slide img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


/* CENTER IMAGE */

.project-slide.active {
  transform: translateX(-50%) scale(1);

  opacity: 1;

  z-index: 5;

  pointer-events: auto;
}


/* LEFT IMAGE */

.project-slide.previous {
  transform: translateX(-115%) scale(0.72);

  opacity: 0.22;

  z-index: 2;
}


/* RIGHT IMAGE */

.project-slide.next {
  transform: translateX(15%) scale(0.72);

  opacity: 0.22;

  z-index: 2;
}


/* ARROWS */

.carousel-arrow {
  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 10;

  width: 48px;
  height: 65px;

  border: none;

  background: rgba(40, 40, 40, 0.48);

  color: white;

  font-size: 28px;

  cursor: pointer;

  display: flex;

  align-items: center;
  justify-content: center;

  transition:
    background 0.2s ease;
}

.carousel-arrow:hover {
  background: rgba(40, 40, 40, 0.75);
}

.carousel-prev {
  left: 17%;
}

.carousel-next {
  right: 17%;
}


/* THUMBNAILS */

.project-thumbnails {
  display: flex;

  justify-content: center;
  align-items: center;

  gap: 7px;

  width: 100%;

  padding: 12px 20px 0;

  overflow-x: auto;

  scrollbar-width: none;
}

.project-thumbnails::-webkit-scrollbar {
  display: none;
}


/* THUMBNAIL BUTTON */

.project-thumbnail {
  flex: 0 0 auto;

  width: 58px;
  height: 42px;

  padding: 0;

  border: 2px solid transparent;

  background: transparent;

  opacity: 0.65;

  cursor: pointer;

  overflow: hidden;

  transition:
    opacity 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.project-thumbnail img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

.project-thumbnail:hover {
  opacity: 1;
}

.project-thumbnail.active {
  opacity: 1;

  border-color: #8d8d88;

  transform: scale(1.04);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

  .project-carousel {
    height: 430px;
  }

  .project-slide {
    width: 72%;
  }

  .carousel-prev {
    left: 5%;
  }

  .carousel-next {
    right: 5%;
  }

}


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

@media (max-width: 600px) {

  .projects-section {
    padding-top: 35px;
  }

  .projects-section h2 {
    font-size: 19px;

    letter-spacing: 0.07em;
  }

  .project-carousel {
    height: 300px;
  }

  .project-slide {
    width: 82%;
  }

  .project-slide.previous {
    transform: translateX(-100%) scale(0.70);
  }

  .project-slide.next {
    transform: translateX(0%) scale(0.70);
  }

  .carousel-arrow {
    width: 38px;
    height: 50px;

    font-size: 22px;
  }

  .carousel-prev {
    left: 2%;
  }

  .carousel-next {
    right: 2%;
  }

  .project-thumbnail {
    width: 52px;
    height: 38px;
  }

}