:root{
  --navy:#192230;
  --yellow:#FFCD00;
  --white:#FFFFFF;
  --ease:cubic-bezier(.2,.8,.2,1);
  --page:min(1380px,calc(100% - 48px));
  --line:rgba(25,34,48,.10);
  --shadow:0 18px 54px rgba(25,34,48,.09);
  --shadow2:0 32px 86px rgba(25,34,48,.15);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--navy);
  font-family:"Montserrat",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
button{font:inherit}
.container{width:var(--page);margin:auto}

.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase
}
.kicker::before{content:"";width:25px;height:3px;border-radius:999px;background:var(--yellow)}
.hero-title{
  margin:16px 0 0;max-width:920px;
  font-size:clamp(40px,4.8vw,66px);
  line-height:.98;letter-spacing:-.05em;font-weight:800
}
.section-title{
  margin:14px 0 0;max-width:820px;
  font-size:clamp(31px,3.5vw,50px);
  line-height:1;letter-spacing:-.04em;font-weight:800
}
.copy{margin:18px 0 0;max-width:700px;font-size:13px;line-height:1.8;opacity:.66}
.reveal{opacity:0;transform:translateY(22px);transition:.65s var(--ease)}
.reveal.visible{opacity:1;transform:none}

/* HERO */
.hero{
  padding:86px 0 46px;
  background:
    linear-gradient(rgba(25,34,48,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(25,34,48,.025) 1px,transparent 1px),
    var(--white);
  background-size:56px 56px;
  border-bottom:1px solid var(--line)
}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:54px;align-items:end}
.hero-side{
  padding:23px;border-radius:22px;background:var(--navy);color:var(--white);
  box-shadow:var(--shadow2);position:relative;overflow:hidden
}
.hero-side::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--yellow)}
.hero-side small{display:block;color:var(--yellow);font-size:8px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.hero-side strong{display:block;margin-top:11px;font-size:19px;line-height:1.2}
.hero-side p{margin:8px 0 0;font-size:9px;line-height:1.65;color:rgba(255,255,255,.60)}

/* PORTFOLIO */
.portfolio{padding:40px 0 76px}
.portfolio-head{
  display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:22px
}
.filter-wrap{margin-bottom:18px}
.filters{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:3px}
.filters::-webkit-scrollbar{display:none}
.filter-btn{
  flex:0 0 auto;border:1px solid var(--line);background:var(--white);color:var(--navy);
  padding:10px 13px;border-radius:999px;font-size:8px;font-weight:800;cursor:pointer;
  transition:.22s var(--ease)
}
.filter-btn:hover,.filter-btn.active{background:var(--navy);color:var(--yellow);border-color:var(--navy)}

/* BIG FEATURED */
.featured-card{
  display:grid;grid-template-columns:1.5fr .5fr;
  min-height:640px;
  border:1px solid var(--line);border-radius:28px;overflow:hidden;background:var(--white);
  box-shadow:var(--shadow2);margin-bottom:18px
}
.featured-media{
  position:relative;background:var(--navy);overflow:hidden;min-height:640px
}
.featured-media img{width:100%;height:100%;object-fit:cover}
.featured-placeholder{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;color:var(--white)
}
.featured-placeholder strong{display:block;color:var(--yellow);font-size:10px}
.featured-placeholder span{display:block;margin-top:6px;font-size:8px;line-height:1.5;color:rgba(255,255,255,.48)}

/* Soft-glass tags on image */
.featured-glass{
  position:absolute;left:18px;right:18px;top:18px;
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start;z-index:3
}
.glass-group{display:flex;flex-wrap:wrap;gap:7px}
.glass-tag{
  padding:9px 11px;border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(12px) saturate(130%);
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  color:var(--white);
  font-size:8px;font-weight:800;
  box-shadow:0 8px 24px rgba(25,34,48,.12)
}
.glass-tag.primary{
  background:rgba(25,34,48,.42);
  border-color:rgba(255,255,255,.18);
  color:var(--yellow)
}
.featured-bottom-glass{
  position:absolute;left:18px;bottom:18px;right:18px;
  display:flex;justify-content:space-between;align-items:end;gap:20px;z-index:3
}
.featured-title-glass{
  max-width:70%;
  padding:16px 18px;border-radius:18px;
  background:rgba(25,34,48,.48);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  color:var(--white)
}
.featured-title-glass small{
  display:block;font-size:8px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--yellow)
}
.featured-title-glass strong{
  display:block;margin-top:7px;font-size:22px;line-height:1.08;letter-spacing:-.03em
}
.featured-title-glass span{
  display:block;margin-top:5px;font-size:8px;opacity:.66
}
.featured-year-glass{
  padding:10px 12px;border-radius:14px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(12px);
  color:var(--white);
  font-size:8px;font-weight:800
}

.featured-info{
  padding:30px;display:flex;flex-direction:column;justify-content:space-between
}
.featured-info small{
  display:block;font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.42
}
.featured-info h2{
  margin:14px 0 10px;font-size:30px;line-height:1.03;letter-spacing:-.04em
}
.featured-info p{margin:0;font-size:10px;line-height:1.75;opacity:.60}
.featured-client{margin-top:11px;font-size:9px;font-weight:700;opacity:.52}
.view-link{
  display:inline-flex;align-items:center;gap:9px;margin-top:24px;font-size:9px;font-weight:800
}
.view-link i{
  width:34px;height:34px;border-radius:10px;background:var(--navy);color:var(--yellow);
  display:grid;place-items:center;font-style:normal
}

/* 3-COLUMN PROJECT GRID */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px
}
.project-card{
  border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--white);
  box-shadow:0 8px 26px rgba(25,34,48,.045);transition:.28s var(--ease)
}
.project-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.project-media{
  position:relative;aspect-ratio:16/10;background:var(--navy);overflow:hidden
}
.project-media img{width:100%;height:100%;object-fit:cover}
.project-placeholder{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:18px;color:var(--white)
}
.project-placeholder strong{display:block;color:var(--yellow);font-size:8px}
.project-placeholder span{display:block;margin-top:5px;font-size:7px;line-height:1.4;color:rgba(255,255,255,.46)}
.project-number{
  position:absolute;left:12px;top:12px;width:30px;height:30px;border-radius:9px;background:var(--white);color:var(--navy);
  display:grid;place-items:center;font-size:8px;font-weight:800
}
.card-glass-tags{
  position:absolute;left:12px;right:12px;bottom:12px;display:flex;flex-wrap:wrap;gap:6px
}
.card-glass-tag{
  padding:7px 8px;border-radius:999px;
  background:rgba(25,34,48,.48);
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:var(--white);font-size:7px;font-weight:800
}
.project-info{padding:17px}
.project-meta{display:flex;justify-content:space-between;gap:12px}
.project-industry{
  font-size:7px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--yellow);text-shadow:.4px .4px 0 var(--navy)
}
.project-year{font-size:7px;font-weight:800;opacity:.36}
.project-info h3{margin:9px 0 6px;font-size:16px;line-height:1.1;letter-spacing:-.025em}
.project-client{font-size:8px;font-weight:700;opacity:.52}
.project-desc{margin:8px 0 0;font-size:9px;line-height:1.6;opacity:.56}

/* CTA */
.cta{padding:0 0 80px}
.cta-line{
  padding-top:28px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center
}
.cta h2{
  margin:0;max-width:760px;font-size:clamp(29px,3.4vw,46px);
  line-height:1;letter-spacing:-.04em
}
.cta p{margin:10px 0 0;font-size:9px;line-height:1.65;opacity:.55}
.cta-btn{
  min-height:48px;padding:0 18px;border-radius:14px;background:var(--navy);color:var(--yellow);
  display:inline-flex;align-items:center;font-size:10px;font-weight:800
}

/* RESPONSIVE */
@media(max-width:1100px){
  :root{--page:min(100% - 28px,1380px)}
  .featured-card{grid-template-columns:1.25fr .75fr;min-height:560px}
  .featured-media{min-height:560px}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .featured-card{grid-template-columns:1fr;min-height:0}
  .featured-media{min-height:480px}
  .projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portfolio-head{align-items:flex-start;flex-direction:column}
}
@media(max-width:760px){
  :root{--page:calc(100% - 22px)}
  .hero{padding:64px 0 40px}
  .hero-title{font-size:clamp(38px,11vw,52px)}
  .section-title{font-size:clamp(30px,9vw,44px)}
  .hero-grid{gap:28px}

  .portfolio{padding:34px 0 58px}
  .filter-wrap{
    position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);
    backdrop-filter:blur(12px);padding:10px 0;margin-bottom:16px
  }
  .filters{
    margin-right:calc((100vw - var(--page))/2 * -1);
    padding-right:12vw
  }

  .featured-card{border-radius:20px}
  .featured-media{min-height:360px}
  .featured-info{padding:21px}
  .featured-info h2{font-size:24px}
  .featured-title-glass{max-width:80%;padding:13px 14px}
  .featured-title-glass strong{font-size:18px}
  .featured-bottom-glass{left:12px;right:12px;bottom:12px}
  .featured-glass{left:12px;right:12px;top:12px}
  .glass-tag{padding:7px 9px;font-size:7px}

  .projects-grid{grid-template-columns:1fr;gap:12px}
  .project-card{border-radius:18px}

  .cta{padding-bottom:66px}
  .cta-line{grid-template-columns:1fr;gap:20px}
  .cta-btn{justify-self:start}
}
@media(max-width:480px){
  .featured-media{min-height:330px}
  .featured-title-glass{max-width:100%}
  .featured-year-glass{display:none}
}