/* ─── KEYSTONE DESIGN ─── */
/* Brand: #126195 blue, #606060 gray, #f4f3f0 bg, #2a2a2a dark */

*{margin:0;padding:0;box-sizing:border-box}
a{text-decoration:none;color:inherit}

.app{font-family:'Outfit',sans-serif;background:#f4f3f0;min-height:100vh;-webkit-font-smoothing:antialiased}
.lbl{font-size:0.64rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:#909090;margin-bottom:0.8rem}
.pgtitle{font-family:'DM Serif Display',serif;font-size:clamp(1.8rem,4vw,3.2rem);color:#2a2a2a;margin-bottom:clamp(1.5rem,3vw,3rem);line-height:1.15}
.btxt{font-size:clamp(0.9rem,1.1vw,1.05rem);line-height:1.9;color:#505050;font-weight:300}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0.45rem clamp(1.5rem,3vw,3rem);display:flex;justify-content:space-between;align-items:center;transition:all 0.4s;background:rgba(244,243,240,0.97);backdrop-filter:blur(20px)}
.nav-compact{padding:0.35rem clamp(1.5rem,3vw,3rem);box-shadow:0 1px 0 rgba(0,0,0,0.06)}
.nav-logo{display:block;cursor:pointer}
.nav-links{display:flex;gap:clamp(1rem,2vw,2rem);align-items:center}
.nav-item{font-size:0.73rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;transition:color 0.3s;padding-bottom:2px;border-bottom:1.5px solid transparent;color:#2a2a2a}
.nav-item.active{border-bottom-color:#126195;color:#126195}
.nav-item:hover{color:#126195}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px;z-index:200}
.hamburger span{width:24px;height:2px;transition:all 0.3s;display:block;background:#2a2a2a}
.mobile-menu{position:fixed;inset:0;z-index:99;background:rgba(244,243,240,0.98);backdrop-filter:blur(20px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8rem}
.mobile-item{font-family:'DM Serif Display',serif;font-size:1.8rem;cursor:pointer;color:#2a2a2a}
.mobile-item.active{color:#126195}

/* HOME GRID */
.home-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:3px}
.home-tile{position:relative;overflow:hidden;z-index:0;cursor:pointer}
.home-tile:hover{z-index:1}
.tile-bg{position:absolute;inset:0;overflow:hidden}
.tile-bg-gradient{position:absolute;inset:0}
.tile-bg-pattern{position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 35px,rgba(255,255,255,0.02) 35px,rgba(255,255,255,0.02) 36px)}
.tile-bg-shadow{position:absolute;bottom:0;left:0;right:0;height:35%;background:linear-gradient(transparent,rgba(0,0,0,0.2))}
.tile-overlay{position:absolute;inset:0;background:rgba(0,0,0,0);transition:all 0.45s cubic-bezier(.25,.1,.25,1);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(0.8rem,2vw,1.5rem);z-index:1}
.home-tile:hover .tile-overlay{background:rgba(18,97,149,0.55)}
.tile-info{transform:translateY(14px);opacity:0;transition:all 0.4s cubic-bezier(.25,.1,.25,1)}
.home-tile:hover .tile-info{transform:translateY(0);opacity:1}
.tile-info .tile-loc{font-size:clamp(0.55rem,0.8vw,0.68rem);font-weight:500;letter-spacing:0.15em;text-transform:uppercase;color:rgba(255,255,255,0.75);margin-bottom:0.2rem}
.tile-info h3{font-family:'DM Serif Display',serif;font-size:clamp(1rem,1.5vw,1.35rem);color:#fff;line-height:1.2}
.logo-tile{background:#fff;display:flex;align-items:center;justify-content:center;padding:0.5rem;grid-column:span 2;grid-row:span 2}
.logo-tile img{height:90%;max-height:90%;width:auto;display:block}

/* Placeholder image */
.img-placeholder{width:100%;height:100%;position:relative;overflow:hidden}
.img-placeholder .pattern{position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 35px,rgba(255,255,255,0.02) 35px,rgba(255,255,255,0.02) 36px)}
.img-placeholder .shadow{position:absolute;bottom:0;left:0;right:0;height:35%;background:linear-gradient(transparent,rgba(0,0,0,0.2))}

/* Real project images */
.project-hero-img,.tile-hero-img{width:100%;height:100%;object-fit:cover;display:block}

/* PROJECT DETAIL */
.project-hero{position:relative}
.project-hero-overlay{position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(0,0,0,0.55));display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(1.5rem,3vw,3rem) clamp(2rem,4vw,4rem)}
.project-meta{display:flex;gap:clamp(1.5rem,3vw,3rem);margin-bottom:2.5rem;flex-wrap:wrap}
.project-gallery{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.5rem}
.project-gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

/* PORTFOLIO */
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.pcard{cursor:pointer;transition:transform 0.3s}
.pcard:hover{transform:translateY(-4px)}
.fbtn{padding:0.4rem 1rem;border:1px solid #d0d0d0;background:transparent;color:#606060;cursor:pointer;font-size:0.68rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;font-family:'Outfit',sans-serif;transition:all 0.3s;border-radius:2px}
.fbtn.active{border-color:#126195;background:#126195;color:#fff}
.btn-o{background:none;border:1px solid #126195;padding:0.7rem 1.6rem;cursor:pointer;font-size:0.74rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:#126195;font-family:'Outfit',sans-serif;transition:all 0.3s;border-radius:2px}
.btn-o:hover{background:#126195;color:#f4f3f0}

/* TEAM */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}
.team-card{border-top:2px solid #126195;padding-top:1.3rem}
.team-avatar{width:64px;height:64px;border-radius:50%;margin-bottom:1rem;display:flex;align-items:center;justify-content:center}

/* BLOG */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}
.bcard{cursor:pointer;transition:transform 0.3s}
.bcard:hover{transform:translateY(-4px)}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 72px)}
.contact-info{padding:clamp(2.5rem,5vw,5rem) clamp(2rem,4vw,4rem);display:flex;flex-direction:column;justify-content:center}
.contact-form-wrap{background:#126195;padding:clamp(2.5rem,5vw,5rem) clamp(2rem,4vw,4rem);display:flex;flex-direction:column;justify-content:center}
.social-link{color:#606060;transition:color 0.3s;display:inline-block}
.social-link:hover{color:#126195}
.form-lbl{display:block;font-size:0.58rem;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:0.4rem}
.form-input{width:100%;padding:0.7rem 0;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,0.25);color:#fff;font-size:1rem;font-family:'Outfit',sans-serif;outline:none}
.form-input:focus{border-bottom-color:rgba(255,255,255,0.6)}
.form-input::placeholder{color:rgba(255,255,255,0.3)}
.form-input option{color:#333}
.form-btn{width:100%;padding:0.85rem;background:#fff;color:#126195;border:none;font-size:0.74rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;font-family:'Outfit',sans-serif;border-radius:2px;transition:background 0.3s}
.form-btn:hover{background:#f4f3f0}

/* FOOTER */
.footer{background:#2a2a2a;padding:clamp(2rem,4vw,4rem) clamp(1.5rem,3vw,3rem) 1.5rem}
.footer-grid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(1.5rem,3vw,3rem);margin-bottom:2.5rem}
.footer-heading{font-size:0.58rem;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:rgba(255,255,255,0.3);margin-bottom:0.9rem}
.footer-link{font-size:0.82rem;color:rgba(255,255,255,0.45);margin-bottom:0.4rem;cursor:pointer;transition:color 0.3s}
.footer-link:hover{color:#fff}
.footer-text{font-size:0.82rem;color:rgba(255,255,255,0.45);line-height:1.6}
.footer-social{color:rgba(255,255,255,0.35);transition:color 0.3s;display:inline-block}
.footer-social:hover{color:#126195}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.07);padding-top:1.2rem;display:flex;justify-content:space-between;align-items:center;max-width:1400px;margin:0 auto}
.footer-bottom p{font-size:0.64rem;color:rgba(255,255,255,0.22)}

/* ─── RESPONSIVE ─── */
@media(max-width:1024px){
  .nav-links{display:none!important}
  .hamburger{display:flex!important}
  .home-grid{grid-template-columns:repeat(3,1fr)}
  .home-grid .logo-tile{grid-column:span 2;grid-row:span 2}
  .portfolio-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .home-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
  .home-grid .logo-tile{grid-column:span 2;grid-row:span 2}
  .portfolio-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr!important}
  .contact-info{padding:clamp(2rem,4vw,3rem) clamp(1.5rem,3vw,2rem)}
  .contact-form-wrap{padding:clamp(2rem,4vw,3rem) clamp(1.5rem,3vw,2rem)}
  .project-gallery{grid-template-columns:1fr}
  .project-gallery>*:last-child{grid-column:1}
  .footer-grid{grid-template-columns:1fr!important;gap:2rem}
  .footer-bottom{flex-direction:column;gap:0.3rem;text-align:center}
}
@media(max-width:480px){
  .home-grid{grid-template-columns:1fr;gap:2px;grid-auto-rows:200px}
  .home-grid .logo-tile{grid-column:span 1;grid-row:span 1}
}