/* =========================================================
   WALKRS — Design Tokens
========================================================= */
:root{
  --navy: #0D1B2A;
  --navy-deep: #081019;
  --navy-soft: #16283c;
  --grey-dark: #2F2F2F;
  --grey-light: #F4F4F4;
  --white: #FFFFFF;
  --orange: #F58220;
  --orange-dim: #c96917;

  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1320px;
  --gutter: clamp(20px, 5vw, 64px);

  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.25,.46,.45,.94);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  font-family: var(--sans);
  background: var(--white);
  color: var(--grey-dark);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family: inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

::selection{ background: var(--orange); color: var(--white); }

/* =========================================================
   Cursor
========================================================= */
.cursor-dot, .cursor-ring{
  position: fixed;
  top:0; left:0;
  pointer-events:none;
  z-index: 9999;
  border-radius:50%;
  transform: translate(-50%,-50%);
  mix-blend-mode: difference;
}
.cursor-dot{ width:6px; height:6px; background:var(--white); }
.cursor-ring{
  width:34px; height:34px;
  border:1px solid var(--white);
  transition: width .25s var(--ease), height .25s var(--ease), opacity .25s;
}
.cursor-ring.hover{ width:64px; height:64px; opacity:.7; }
@media (hover:none), (pointer:coarse){
  .cursor-dot, .cursor-ring{ display:none; }
}

/* =========================================================
   Loader
========================================================= */
.loader{
  position:fixed; inset:0; z-index:10000;
  background: var(--navy);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .8s var(--ease), visibility .8s var(--ease);
}
.loader-logo{ width: 200px; opacity:0; animation: loaderFade 1.4s var(--ease) forwards .1s; }
@keyframes loaderFade{ to{ opacity:1; } }
.loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }

/* =========================================================
   Grain overlay
========================================================= */
.grain{
  position:fixed; inset:0; z-index:9998;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   Nav
========================================================= */
.nav{
  position: fixed; top:0; left:0; right:0; z-index:900;
  padding: 22px 0;
  transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.nav-inner{
  max-width: var(--container);
  margin:0 auto; padding:0 var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo-img{ height: 30px; width:auto; }
.nav-logo-light{ display:none; }
.nav-logo{ display:flex; align-items:center; }

.nav-links{ display:flex; align-items:center; gap: 36px; }
.nav-links a{
  font-size: 13px; letter-spacing:.06em; text-transform:uppercase;
  color: var(--white); font-weight:500;
  display:flex; align-items:center; gap:6px;
  position:relative; padding: 4px 0;
}
.nav-links a span{ color: var(--orange); font-size:10px; }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background: var(--orange); transition: width .3s var(--ease);
}
.nav-links a:hover::after{ width:100%; }
.nav-cta{
  padding: 10px 22px !important;
  border: 1px solid var(--white);
  border-radius: 100px;
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ background: var(--orange); border-color: var(--orange); }

.nav-burger{ display:none; background:none; border:none; width:32px; height:22px; position:relative; z-index:1200; }
.nav-burger span{ display:block; width:100%; height:1.5px; background:var(--white); position:absolute; left:0; transition: all .3s var(--ease); }
.nav-burger span:nth-child(1){ top:0; }
.nav-burger span:nth-child(2){ top:50%; transform:translateY(-50%); }
.nav-burger span:nth-child(3){ bottom:0; }

/* scrolled state */
.nav.scrolled{
  background: rgba(13,27,42,.92);
  backdrop-filter: blur(10px);
  padding: 14px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
.nav.on-light .nav-links a{ color: var(--navy); }
.nav.on-light .nav-cta{ border-color: var(--navy); color: var(--navy); }
.nav.on-light .nav-burger span{ background: var(--navy); }
.nav.on-light .nav-logo-dark{ display:block; }
.nav.on-light .nav-logo-light{ display:none; }
.nav:not(.on-light) .nav-logo-dark{ display:none; }
.nav:not(.on-light) .nav-logo-light{ display:block; }
.nav.on-light.scrolled{ background: rgba(255,255,255,.92); }

.mobile-menu{
  position: fixed; inset:0; background: var(--navy); z-index:1100;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap: 18px; padding: 0 40px;
  transform: translateY(-100%);
  transition: transform .5s var(--ease);
}
.mobile-menu.open{ transform: translateY(0); }
.mobile-menu a{ font-family: var(--serif); font-size: 42px; color: var(--white); }
.mobile-menu a:hover{ color: var(--orange); }

/* =========================================================
   Buttons
========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 16px 34px;
  border-radius: 100px;
  font-size: 13px; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s;
  border: 1px solid transparent;
}
.btn-primary{ background: var(--orange); color:var(--white); }
.btn-primary:hover{ background: var(--white); color: var(--navy); }
.btn-outline{ border-color: currentColor; }
.hero .btn-outline{ color: var(--white); }
.hero .btn-outline:hover{ background: var(--white); color: var(--navy); }
.contact-section .btn-outline{ color: var(--white); }

/* =========================================================
   Section basics
========================================================= */
.section{ position:relative; padding: 130px 0; }
.eyebrow{
  font-size: 12px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--orange); font-weight:600; margin: 0 0 18px;
}
.eyebrow-light{ color: var(--orange); }
.section-title{
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(32px, 4.2vw, 58px);
  line-height: 1.12;
  color: var(--navy);
  margin: 0 0 26px;
}
.section-title.light{ color: var(--white); }
.section-title em{ font-style: italic; color: var(--orange); font-weight:500; }
.orange-dot{ color: var(--orange); }

/* =========================================================
   HERO
========================================================= */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: radial-gradient(ellipse at 30% 20%, #16283c 0%, var(--navy) 45%, var(--navy-deep) 100%);
  overflow: hidden;
  color: var(--white);
}
.hero-bg-letter{
  position:absolute;
  font-family: var(--serif);
  font-weight:800;
  font-size: min(70vw, 1000px);
  line-height:1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(245,130,32,.16);
  top: 50%; left:50%;
  transform: translate(-50%,-46%);
  user-select:none;
  z-index:0;
}
.hero-particles{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-particles span{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background: rgba(245,130,32,.5);
}

.hero-content{ position:relative; z-index:2; text-align:center; padding: 0 20px; }
.hero-eyebrow{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color: rgba(255,255,255,.6); margin-bottom: 26px; }
.hero-eyebrow span::before{ content:'— '; color:var(--orange); }
.hero-title{ font-family: var(--serif); font-weight:600; margin:0; }
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .line span{ display:inline-block; }
.hero-title-main{ font-size: clamp(46px, 9vw, 118px); line-height:1.02; letter-spacing:-.01em; }
.hero-title-main em{ font-style:italic; color: var(--orange); font-weight:500; }
.hero-title > .line:first-child{ font-size: clamp(20px, 2.4vw, 30px); letter-spacing:.05em; font-weight:400; color: rgba(255,255,255,.75); margin-bottom:6px; }
.hero-tagline{ font-family: var(--serif); font-style: italic; font-size: clamp(16px,2vw,22px); color: rgba(255,255,255,.8); margin: 26px 0 44px; }
.hero-cta{ display:flex; gap: 18px; justify-content:center; flex-wrap:wrap; }

.hero-marquee{
  position:absolute; bottom: 90px; left:0; right:0; z-index:2;
  overflow:hidden; white-space:nowrap;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding: 14px 0;
}
.marquee-track{ display:inline-flex; animation: marquee 28s linear infinite; }
.marquee-track span{
  font-family: var(--serif); font-style:italic; font-size: 16px;
  color: rgba(255,255,255,.55); padding-right: 6px;
}
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:2; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color: rgba(255,255,255,.5); display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-cue span{ width:1px; height:34px; background: rgba(255,255,255,.35); position:relative; overflow:hidden; }
.scroll-cue span::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background: var(--orange); animation: scrollcue 2s ease-in-out infinite;
}
@keyframes scrollcue{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* =========================================================
   ABOUT
========================================================= */
.about-grid{ display:grid; grid-template-columns: .8fr 1.2fr; gap: 70px; }
.about-left{ position:sticky; top:130px; align-self:start; }
.about-lead{ font-size: 21px; line-height:1.55; color: var(--navy); font-weight:500; margin: 0 0 22px; }
.about-body{ font-size:16px; line-height:1.8; color:#555; margin:0 0 46px; max-width: 560px; }
.about-body strong{ color: var(--navy); }
.about-who{ margin-bottom: 54px; max-width:560px; }
.about-who h3{ font-family: var(--serif); font-size: 24px; color: var(--navy); margin: 0 0 14px; }
.about-who p{ font-size:15.5px; line-height:1.8; color:#555; margin:0 0 12px; }

.why-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: #e6e6e6; border:1px solid #e6e6e6; max-width: 600px; }
.why-card{ background: var(--white); padding: 30px 26px; }
.why-icon{ width:40px; height:40px; color: var(--orange); margin-bottom:16px; }
.why-icon svg{ width:100%; height:100%; }
.why-card h4{ font-size:15px; text-transform:uppercase; letter-spacing:.04em; color:var(--navy); margin: 0 0 8px; }
.why-card p{ font-size:14px; line-height:1.6; color:#666; margin:0; }

/* =========================================================
   TIMELINE
========================================================= */
.timeline-section{ background: var(--navy); color: var(--white); overflow:hidden; }
.timeline-wrap{ margin-top: 60px; overflow-x:auto; scrollbar-width:none; }
.timeline-wrap::-webkit-scrollbar{ display:none; }
.timeline-track{
  display:flex; gap: 0; padding: 0 var(--gutter) 20px;
  min-width: max-content;
}
.tl-item{
  width: 220px; padding: 0 28px 0 0; position:relative;
  border-left: 1px solid rgba(255,255,255,.15);
  padding-left: 28px;
}
.tl-year{ font-family: var(--serif); font-size: 30px; color: var(--orange); margin-bottom: 18px; }
.tl-bar-track{ width:100%; height:6px; background: rgba(255,255,255,.1); border-radius:4px; overflow:hidden; margin-bottom:14px; }
.tl-bar-fill{ height:100%; width:0; background: linear-gradient(90deg,var(--orange),#ffb35c); border-radius:4px; transition: width 1.4s var(--ease-soft); }
.tl-pct{ font-size: 13px; color: rgba(255,255,255,.5); margin-bottom:10px; display:block; }
.tl-label{ font-size: 14px; line-height:1.5; color: rgba(255,255,255,.75); }

/* =========================================================
   TEAM
========================================================= */
.team-intro{ max-width: 720px; font-size:17px; line-height:1.75; color:#555; margin: 0 0 60px; }
.team-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 1px; background:#e6e6e6; border:1px solid #e6e6e6; }
.team-card{ background: var(--white); padding: 34px 30px; transition: background .35s; }
.team-card:hover{ background: var(--grey-light); }
.team-num{ font-family: var(--serif); font-size:13px; color: var(--orange); letter-spacing:.1em; }
.team-name{ font-family: var(--serif); font-size: 22px; color: var(--navy); margin: 14px 0 4px; }
.team-role{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color: var(--orange-dim); margin: 0 0 16px; font-weight:600; }
.team-bio{ font-size:14px; line-height:1.7; color:#666; margin:0; }

/* =========================================================
   SERVICES
========================================================= */
.services-section{ background: var(--grey-light); }
.services-intro{ max-width:640px; font-size:17px; line-height:1.75; color:#555; }
.services-grid{
  max-width: var(--container); margin: 60px auto 0; padding: 0 var(--gutter);
  display:grid; grid-template-columns: repeat(4,1fr); gap:1px;
  background:#ddd; border:1px solid #ddd;
}
.service-card{
  background: var(--white); padding: 34px 26px; min-height: 200px;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
  transition: background .4s var(--ease);
}
.service-card::before{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:0;
  background: var(--navy); z-index:0; transition: height .4s var(--ease);
}
.service-card:hover::before{ height:100%; }
.service-card > *{ position:relative; z-index:1; }
.service-icon{ width:34px; height:34px; color:var(--orange); margin-bottom:26px; }
.service-icon svg{ width:100%; height:100%; }
.service-num{ font-family: var(--serif); font-size:12px; color:#bbb; transition: color .4s; }
.service-card:hover .service-num{ color: rgba(255,255,255,.4); }
.service-title{ font-size:16px; font-weight:600; color: var(--navy); margin: 0; letter-spacing:.01em; transition: color .4s; }
.service-card:hover .service-title{ color: var(--white); }

/* =========================================================
   WORK / GALLERY
========================================================= */
.work-section{ padding-top:0; padding-bottom: 130px; }
.work-intro{ position:relative; height: 60vh; min-height:420px; overflow:hidden; margin-bottom: 70px; }
.work-intro-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.work-intro-overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(13,27,42,.88) 30%, rgba(13,27,42,.35));
  display:flex; flex-direction:column; justify-content:center;
  padding: 0 var(--gutter);
}
.work-intro-overlay .section-title{ max-width:560px; }
.work-intro-sub{ font-family: var(--serif); font-style:italic; font-size:22px; color: rgba(255,255,255,.8); }

.filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 44px; }
.filter-btn{
  padding: 10px 20px; border-radius:100px; border:1px solid #ddd;
  font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:600;
  color: var(--grey-dark); background: transparent; transition: all .3s var(--ease);
}
.filter-btn:hover{ border-color: var(--orange); color: var(--orange); }
.filter-btn.active{ background: var(--navy); border-color:var(--navy); color:var(--white); }

.masonry{
  column-count: 3; column-gap: 20px;
}
.masonry-item{
  break-inside: avoid; margin-bottom: 20px; position:relative;
  border-radius: 6px; overflow:hidden; cursor: pointer;
  opacity:0; transform: translateY(30px);
}
.masonry-item.show{ animation: itemIn .6s var(--ease) forwards; }
@keyframes itemIn{ to{ opacity:1; transform:translateY(0);} }
.masonry-item.hide{ display:none; }
.masonry-item img{ width:100%; display:block; transition: transform .7s var(--ease); }
.masonry-item:hover img{ transform: scale(1.06); }
.masonry-caption{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(13,27,42,0) 40%, rgba(13,27,42,.92) 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding: 22px;
  opacity:0; transition: opacity .4s var(--ease);
}
.masonry-item:hover .masonry-caption{ opacity:1; }
.masonry-caption .m-tag{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--orange); margin-bottom:6px; }
.masonry-caption .m-title{ font-family: var(--serif); font-size:18px; color:var(--white); }
.masonry-expand{
  position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
  background: rgba(255,255,255,.15); backdrop-filter: blur(4px);
  display:flex; align-items:center; justify-content:center; color:var(--white);
  opacity:0; transition: opacity .3s;
}
.masonry-item:hover .masonry-expand{ opacity:1; }

/* =========================================================
   CLIENTS
========================================================= */
.clients-sub{ max-width:600px; font-size:16px; line-height:1.7; color:#555; }
.clients-marquee{ margin-top: 60px; overflow:hidden; border-top:1px solid #eee; border-bottom:1px solid #eee; padding: 40px 0; }
.clients-track{ display:flex; align-items:center; gap: 70px; width:max-content; animation: clientsScroll 32s linear infinite; }
.clients-track img{ height: 46px; width:auto; filter: grayscale(1) opacity(.55); transition: filter .35s; }
.clients-track img:hover{ filter: grayscale(0) opacity(1); }
@keyframes clientsScroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* =========================================================
   CONTACT
========================================================= */
.contact-section{ background: var(--navy); color: var(--white); overflow:hidden; position:relative; }
.contact-letter{ opacity:.5; }
.contact-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items:end; position:relative; z-index:1; }
.contact-lead{ font-size:17px; line-height:1.7; color: rgba(255,255,255,.7); max-width:480px; margin: 0 0 40px; }
.contact-details{ display:flex; flex-direction:column; gap: 30px; }
.contact-item{ display:flex; flex-direction:column; gap:6px; border-top:1px solid rgba(255,255,255,.15); padding-top:18px; }
.contact-label{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color: var(--orange); }
.contact-item a{ font-family: var(--serif); font-size: 20px; color: var(--white); }
.contact-item a:hover{ color: var(--orange); }

/* =========================================================
   FOOTER
========================================================= */
.footer{ background: var(--navy-deep); color: rgba(255,255,255,.7); padding: 80px 0 0; }
.footer-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-logo{ height: 34px; margin-bottom: 16px; }
.footer-brand p{ font-family: var(--serif); font-style:italic; color: rgba(255,255,255,.5); }
.footer-col h5{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color: var(--orange); margin:0 0 18px; }
.footer-col a{ display:block; font-size:14.5px; margin-bottom:12px; color: rgba(255,255,255,.65); }
.footer-col a:hover{ color: var(--white); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding: 24px var(--gutter) 30px; font-size:12.5px; flex-wrap:wrap; gap:8px; }
.footer-note{ color: rgba(255,255,255,.35); font-style:italic; font-family: var(--serif); }

/* =========================================================
   Lightbox
========================================================= */
.lightbox{
  position:fixed; inset:0; z-index:2000; background: rgba(8,16,25,.97);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition: opacity .4s var(--ease);
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox-inner{ max-width:88vw; max-height:84vh; text-align:center; }
.lightbox-inner img{ max-width:88vw; max-height:74vh; object-fit:contain; border-radius:4px; margin:0 auto; }
.lightbox-caption{ margin-top:18px; color: var(--white); }
.lightbox-caption #lightboxTitle{ font-family: var(--serif); font-size:20px; display:block; }
.lightbox-caption #lightboxTag{ font-size:12px; color: var(--orange); text-transform:uppercase; letter-spacing:.06em; }
.lightbox-close{ position:absolute; top:26px; right:32px; background:none; border:none; color:var(--white); font-size:36px; line-height:1; }
.lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); background: rgba(255,255,255,.08); border:none; color:var(--white); width:52px; height:52px; border-radius:50%; font-size:20px; }
.lightbox-nav:hover{ background: var(--orange); }
.lightbox-prev{ left: 30px; }
.lightbox-next{ right: 30px; }

/* =========================================================
   Floating CTA
========================================================= */
.floating-cta{
  position: fixed; right: 30px; bottom: 30px; z-index: 500;
  background: var(--orange); color: var(--white);
  padding: 16px 26px; border-radius: 100px;
  font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  box-shadow: 0 10px 30px rgba(245,130,32,.4);
  transition: transform .3s var(--ease), opacity .3s;
  opacity:0; pointer-events:none;
}
.floating-cta.visible{ opacity:1; pointer-events:auto; }
.floating-cta:hover{ transform: translateY(-3px); }

/* =========================================================
   Reveal animations (base state — JS adds .in via ScrollTrigger)
========================================================= */
.reveal-up{ opacity:0; transform: translateY(36px); }
.reveal-up.in{ opacity:1; transform:none; transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-scale{ opacity:0; transform: scale(1.08); }
.reveal-scale.in{ opacity:1; transform:none; transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal-line{ opacity:0; transform: translateY(100%); }
.reveal-line.in{ opacity:1; transform:none; transition: opacity .9s var(--ease), transform .9s var(--ease); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 1080px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-left{ position:static; margin-bottom: 30px; }
  .services-grid{ grid-template-columns: repeat(2,1fr); }
  .team-grid{ grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-burger{ display:block; }
  .masonry{ column-count:2; }
  .section{ padding: 90px 0; }
}

@media (max-width: 600px){
  .masonry{ column-count:1; }
  .services-grid{ grid-template-columns: 1fr; }
  .why-grid{ grid-template-columns:1fr; }
  .hero-marquee{ bottom:60px; }
  .footer-grid{ grid-template-columns: 1fr; }
  .floating-cta{ right:16px; bottom:16px; padding:12px 20px; font-size:11px; }
  .lightbox-nav{ width:40px; height:40px; }
  .lightbox-prev{ left:10px; } .lightbox-next{ right:10px; }
}