/* ============ PREMIUM FONT OVERRIDE ============ */
:root{
  --font-head:'Clash Display','Anton',sans-serif;
  --font-body:'General Sans','Inter',sans-serif;
}
h1,h2,h3,h4{text-transform:none;letter-spacing:-0.5px;font-weight:600;}
.eyebrow, .nav-link, .btn, .tile .tile-label, .filter-pill, .stat-label, .footer-col h4{text-transform:uppercase;}

/* ============ MOBILE FIXES: DROPDOWN CLIPPING ============ */
@media(max-width:900px){
  .has-dropdown .dropdown-panel{
    position:static !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    background:transparent !important;
    border:none !important;
    padding:8px 0 4px 14px !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }
  .dropdown-panel a{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:8px 0 !important;
  }
  nav.primary-nav{ overflow-x:hidden; }
}

/* ============ MOBILE FIXES: NO HORIZONTAL OVERFLOW ============ */
html, body{ overflow-x:hidden; max-width:100%; }
.container{ max-width:100%; box-sizing:border-box; }

/* ============ FOOTER: SHORTER ON MOBILE ============ */
@media(max-width:768px){
  footer.site-footer{ padding:2.25rem 0 0; }
  .footer-grid{ gap:16px 10px !important; padding-bottom:1.25rem; }
  .footer-brand .logo img{ height:34px !important; }
  .footer-brand p{ font-size:12.5px; margin:8px 0 12px; max-width:100%; }
  .footer-col h4{ font-size:11px; margin-bottom:8px; letter-spacing:.5px; }
  .footer-col li{ margin-bottom:5px; }
  .footer-col a, .footer-contact p{ font-size:12.5px; }
  .footer-contact .btn{ padding:8px 14px; font-size:10px; margin-top:8px !important; }
  .footer-social{ margin-top:6px; }
  .social-links a{ width:32px; height:32px; font-size:13px; }
  .footer-bottom{ padding:.85rem 0; margin-top:12px; font-size:10.5px; }
}

/* ============ HOME HERO: VIDEO-STYLE ANIMATED BACKGROUND ============ */
.hero-video-wrap{
  position:relative;
  overflow:hidden;
  padding:2.5rem 0 3rem;
  min-height:auto;
}
.hero-bg-anim{
  position:absolute;inset:0;z-index:0;
  background:#0A0A0A;
  overflow:hidden;
}
.hero-bg-anim .blob{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.35;
  will-change:transform;
}
.hero-bg-anim .blob1{ width:420px;height:420px;background:#B4D335;top:-120px;left:-80px;animation:blobMove1 14s ease-in-out infinite alternate; }
.hero-bg-anim .blob2{ width:360px;height:360px;background:#7a8f1e;top:40%;right:-100px;animation:blobMove2 18s ease-in-out infinite alternate; }
.hero-bg-anim .blob3{ width:300px;height:300px;background:#B4D335;bottom:-140px;left:30%;animation:blobMove3 16s ease-in-out infinite alternate; }
@keyframes blobMove1{from{transform:translate(0,0) scale(1);}to{transform:translate(60px,80px) scale(1.15);}}
@keyframes blobMove2{from{transform:translate(0,0) scale(1);}to{transform:translate(-70px,-40px) scale(1.1);}}
@keyframes blobMove3{from{transform:translate(0,0) scale(1);}to{transform:translate(40px,-60px) scale(1.2);}}
.hero-bg-anim::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.85) 75%);
}
.hero-video-wrap .hero{ position:relative;z-index:1;padding:1.5rem 0 0; }
@media(prefers-reduced-motion:reduce){ .hero-bg-anim .blob{animation:none !important;} }

/* ============ TILT HOVER (generalized) ============ */
.tilt-hover{ transition:transform .15s ease-out; transform-style:preserve-3d; will-change:transform; }

/* ============ BUTTON PULSE ============ */
.btn-primary{ position:relative; }
.btn-primary::before{
  content:"";position:absolute;inset:0;border-radius:999px;
  box-shadow:0 0 0 0 rgba(180,211,53,0.55);
  transition:box-shadow .4s ease;
  pointer-events:none;
}
.btn-primary:hover::before{ box-shadow:0 0 0 10px rgba(180,211,53,0); }

/* ============ PAGE FADE-IN ============ */
body{ opacity:0; animation:pageFadeIn .5s ease forwards; }
@keyframes pageFadeIn{to{opacity:1;}}

/* ============ CASE STUDY: MERGED NEXT-PROJECT ROW ============ */
.case-cta-row{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem;
}
.case-cta-row .cta-left{ text-align:left; }
.case-cta-row .cta-left h2{ margin-bottom:1.25rem; }
.case-next-inline{ text-align:right; }
.case-next-inline .next-label{ font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--gray);margin-bottom:.3rem; }
.case-next-inline .next-title{ font-family:var(--font-head);font-size:1.4rem;transition:color .2s ease; }
.case-next-inline:hover .next-title{ color:var(--lime); }
@media(max-width:700px){
  .case-cta-row{ flex-direction:column;align-items:flex-start; }
  .case-next-inline{ text-align:left;align-self:flex-end;text-align:right; }
}

/* ============ PORTFOLIO/GALLERY: NATURAL ASPECT RATIO ============ */
.gallery-item .nat-img{ width:100%;height:auto;display:block;border-radius:16px; }
.portfolio-card{ display:block; }
.portfolio-card .nat-img{ width:100%;height:auto;display:block;border-radius:14px;transition:transform .4s var(--ease); }
.portfolio-card:hover .nat-img{ transform:scale(1.03); }
.portfolio-card .pf-meta{ margin-top:.9rem; }
.portfolio-card .pf-meta h4{ font-family:var(--font-body);text-transform:none;font-weight:700;font-size:1.05rem;color:var(--white);margin:0; }
.portfolio-card .pf-meta .pf-link{ font-size:.8rem;color:var(--lime);text-transform:uppercase;letter-spacing:.5px;display:inline-block;margin-top:.3rem; }

.gallery-item{ display:block; }
.gallery-item .tile-label{ display:block;margin-top:.75rem;font-family:var(--font-body);font-size:.95rem;color:var(--white);font-weight:600; }
.masonry{ column-gap:24px; }
@media(max-width:992px){ .masonry{ column-gap:20px; } }
@media(max-width:768px){ .masonry{ column-gap:18px; } }

/* ============ TRUE MASONRY: COLUMN LAYOUT (overrides grid) ============ */
.masonry{
  display:block !important;
  column-count:3;
  column-gap:24px;
}
.masonry .gallery-item,
.masonry .portfolio-card{
  display:inline-block !important;
  width:100% !important;
  break-inside:avoid;
  margin-bottom:24px;
}
@media(max-width:992px){
  .masonry{ column-count:2; column-gap:20px; }
}
@media(max-width:640px){
  .masonry{ column-count:1; column-gap:0; padding:0; }
  .masonry .gallery-item, .masonry .portfolio-card{ margin-bottom:18px; }
}