/* ================= Hero Section ================= */
.hero-section{
    padding:0;
    width:100%;display:flex;
    justify-content:center;
    background-color:#000;
    overflow:hidden
}
.hero-inner{
    position:relative;
    width:100%;max-width:1440px;
    margin:0 auto;
    height:min(calc(703 / 1440 * 100vw),703px);
    overflow:visible
}
.hero-svg{
    position:absolute;
    top:min(calc(184 / 1440 * 100vw),184px);
    left:min(calc(120 / 1440 * 100vw),120px);
    width:min(calc(907 / 1440 * 100vw),907px);
    height:auto;
    aspect-ratio:907 / 360
}
@media (max-width:768px){
    .hero-section{padding:0!important}.hero-inner{
        padding:0!important
    }
}

/* ===== Filter (container-based, no flex rounding) ===== */
.filter-section{ padding-block:0; border-bottom:none; }
.filter-section .container{
  --pad: min(calc(117 / 1440 * 100vw), 117px);
  --gap: min(calc(45  / 1440 * 100vw), 45px);
  width: min(1440px, 100%);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
  box-sizing: border-box;
}
.filter-header{ margin:0; }
.filter-title{
  font-size: min(calc(39 / 1440 * 100vw), 39px);
  font-weight: 600;
  color:#FFFFFF;
  margin: 0 0 min(calc(46 / 1440 * 100vw), 46px);
}
.filter-buttons{
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* fills container exactly */
  column-gap: var(--gap);
  row-gap: 0;
}
.filter-btn{
  width: 100%;
  min-height: 34px;
  height: clamp(34px, calc(50 / 1440 * 100vw), 50px);
  display: inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid #FFFFFF; color:#FFFFFF;
  padding:0 24px; font: 500 12px/1 'Outfit', sans-serif; letter-spacing:.5px; text-transform:uppercase;
  transition:all .3s ease; border-radius:0;
}
.filter-btn:hover, .filter-btn.active{ background:#FFFFFF; color:#000; }

/* Mobile: same gutters as projects so edges stay aligned */
@media (max-width:768px){
  .filter-section .container{ --pad: min(calc(38.5 / 375 * 100vw), 38.5px); }
  .filter-buttons{ grid-template-columns: 1fr; row-gap: var(--gap); }
}

/* ===== Projects (container-based, matches filter gutters) ===== */
.projects-section{ padding-block:0; }
.projects-section .container{
  --pad: min(calc(117 / 1440 * 100vw), 117px);
  --gap: min(calc(45  / 1440 * 100vw), 45px);
  width: min(1440px, 100%);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
  padding-bottom: 89px;
  box-sizing: border-box;
}
.projects-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--gap);
  row-gap: clamp(49px, calc(89 / 1440 * 100vw), 89px);
  margin-top: clamp(67px, calc(89 / 1440 * 100vw), 89px);
}
.project-card{ background:transparent; cursor:pointer; transition:transform .3s ease; min-width:0; }
.project-card:hover{ transform:translateY(-5px); }

.project-image{
  width:100%;
  aspect-ratio: 581 / 327;
  overflow:hidden;
  margin-bottom: min(calc(25 / 1440 * 100vw), 25px);
}
.project-image img{
  width:100%; height:100%; display:block; object-fit:cover; transition:transform .3s ease;
}
.project-card:hover .project-image img{ transform:scale(1.05); }

.project-info{ padding:0; }
.project-title{
  font-size: min(calc(35 / 1440 * 100vw), 35px);
  font-weight:500; color:#FFFFFF; margin-bottom:min(calc(8 / 1440 * 100vw), 8px); line-height:1.3;
}
.project-client{ font-size:15px; font-weight:400; color:#D2D2D2; text-transform:uppercase; letter-spacing:1px; }

/* Mobile: single column; gutters match filter */
@media (max-width:768px){
  .projects-section .container{
    --pad: min(calc(38.5 / 375 * 100vw), 38.5px);
    --gap: min(calc(20   / 375 * 100vw), 20px);
  }
  .projects-grid{ grid-template-columns: 1fr; column-gap:0; row-gap: 49px; }
}

/* ===== Showcase Carousel (fully scoped) ===== */
.showcase { background: #000; padding-block: 0; }
.showcase-container {
  width: min(1440px, 100%);
  margin: 0 auto;
}
.showcase-outer {
  position: relative;
  width: 100%;
  /* 1440×834 design height; never shorter than 500px on small screens */
  height: clamp(500px, calc(834 / 1440 * 100vw), 834px);
  overflow: hidden;
  user-select: none;
}

/* stack slides, fade between them */
.showcase-track { position: relative; height: 100%; }
.showcase-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .6s ease;
}
.showcase-slide.is-active { opacity: 1; z-index: 1; }
.showcase-slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Mobile switching for showcase images */
.showcase-img-mobile { display: none; }
@media (max-width: 768px) {
  .showcase-outer { height: auto; }
  .showcase-track { height: auto; }
  .showcase-slide { position: relative; opacity: 1; }
  .showcase-slide:not(.is-active) { display: none; }
  .showcase-img-original { display: none !important; width: 0 !important; height: 0 !important; }
  .showcase-img-mobile {
    display: block !important;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/* dots (bottom-right, green) */
.showcase-dots{
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: flex;
  gap: clamp(6px, calc(12 / 1440 * 100vw), 12px);
  z-index: 2;
}

.showcase-dots .dot{
  width:  clamp(10.71px, calc(32 / 1440 * 100vw), 32px);
  height: clamp(10.71px, calc(32 / 1440 * 100vw), 32px);
  border-radius: 50%;
  background: #CDDC29;
  border: 0;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(0,0,0,.35);
  opacity: .4;
  transition: opacity .2s ease, transform .2s ease;
}
.showcase-dots .dot.is-active{ opacity: 1; transform: scale(1.05); }
.showcase-dots .dot:focus-visible{ outline: 2px solid #FFFFFF; outline-offset: 2px; }

/* keep a sensible minimum on very small phones */
@media (max-width: 400px) {
  .showcase-container { min-width: 339px; } /* per requirement */
}