/* ── SERVICE PAGE HERO ── */
.service-hero{
  padding:12rem 3.5rem 5rem;
  position:relative;overflow:hidden;
}
.service-hero.loc  {background:linear-gradient(155deg,#d4b87a 0%,#b89050 30%,#8a6030 60%,#5a3e18 100%)}
.service-hero.vid  {background:linear-gradient(155deg,#c8a060 0%,#a07840 30%,#784a20 60%,#4e2e10 100%)}
.service-hero.uav  {background:linear-gradient(155deg,#b0c8a0 0%,#7a9060 30%,#4a6630 60%,#2a4010 100%)}
.service-hero.stock{background:linear-gradient(155deg,#d8c0a0 0%,#b89878 30%,#8a6848 60%,#5a3820 100%)}
.service-hero.arch {background:linear-gradient(155deg,#c8b890 0%,#a89060 30%,#786030 60%,#483808 100%)}

.service-hero::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 80% at 90% 50%,rgba(255,255,255,0.06) 0%,transparent 70%);
  pointer-events:none;
}
.service-hero-inner{position:relative;z-index:1;max-width:700px}
.service-hero-label{font-size:.62rem;letter-spacing:.45em;text-transform:uppercase;color:rgba(250,246,239,0.7);display:block;margin-bottom:1rem}
.service-hero-title{font-family:'Cinzel',serif;font-size:clamp(2.5rem,6vw,6rem);font-weight:300;color:var(--cream);letter-spacing:.04em;line-height:1;margin-bottom:1.5rem}
.service-hero-title em{font-family:'EB Garamond',serif;font-style:italic;color:rgba(250,246,239,0.75)}
.service-hero-sub{font-family:'EB Garamond',serif;font-size:1.2rem;color:rgba(250,246,239,0.8);line-height:1.8;max-width:520px;margin-bottom:2.5rem}
.service-hero-rule{width:60px;height:1px;background:rgba(250,246,239,0.4)}

/* ── SERVICE INTRO ── */
.service-intro{
  padding:6rem 3.5rem 3rem;
  display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;
  background:var(--cream);
}
.service-intro-left .section-label{margin-bottom:.8rem}
.service-intro-left h2{font-family:'Cinzel',serif;font-weight:300;font-size:clamp(1.6rem,3vw,2.5rem);color:var(--stone);line-height:1.2;letter-spacing:.04em;margin-bottom:1.5rem}
.service-intro-left h2 em{font-family:'EB Garamond',serif;font-style:italic;color:var(--sienna)}
.service-intro-right p{font-family:'EB Garamond',serif;font-size:1.12rem;line-height:1.9;color:var(--taupe);margin-bottom:1.2rem}

/* ── FILMSTRIP GALLERY ── */
.gallery-section{
  padding:3rem 0 2rem;
  background:var(--parchment);
  overflow:hidden;
}
.gallery-section-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 3.5rem 2rem;
  border-bottom:1px solid rgba(155,106,60,0.15);
  margin-bottom:2rem;
}
.gallery-count{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--taupe)}
.gallery-hint{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(155,106,60,0.5);display:flex;align-items:center;gap:.5rem}

.film-track-wrap{
  position:relative;
  overflow:hidden;
}
.film-track-wrap::before,
.film-track-wrap::after{
  content:'';position:absolute;top:0;bottom:0;width:80px;z-index:10;pointer-events:none;
}
.film-track-wrap::before{left:0;background:linear-gradient(to right,var(--parchment),transparent)}
.film-track-wrap::after{right:0;background:linear-gradient(to left,var(--parchment),transparent)}

.film-track{
  display:flex;
  gap:10px;
  padding:0 3.5rem;
  overflow-x:auto;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
}
.film-track:active{cursor:grabbing}
.film-track::-webkit-scrollbar{display:none}

.film-cell{
  flex-shrink:0;
  width:340px;height:240px;
  position:relative;overflow:hidden;
  background:var(--sand);
  cursor:none;
  transition:transform .3s cubic-bezier(0.25,0.46,0.45,0.94);
}
.film-cell:hover{transform:translateY(-4px)}

.film-cell-bg{
  position:absolute;inset:0;
  transition:transform .5s cubic-bezier(0.25,0.46,0.45,0.94);
}
.film-cell:hover .film-cell-bg{transform:scale(1.04)}

.film-cell-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(61,50,40,0.7) 0%,transparent 55%);
  opacity:0;transition:opacity .3s;
  display:flex;align-items:flex-end;padding:1.2rem;
}
.film-cell:hover .film-cell-overlay{opacity:1}

.film-cell-info{transform:translateY(6px);transition:transform .35s}
.film-cell:hover .film-cell-info{transform:translateY(0)}
.film-cell-title{font-family:'Cinzel',serif;font-weight:300;font-size:.9rem;letter-spacing:.06em;color:var(--cream);display:block;margin-bottom:.2rem}
.film-cell-meta{font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;color:var(--warm-mid)}

.film-cell-num{
  position:absolute;top:.8rem;right:.8rem;
  font-family:'Cinzel',serif;font-size:.65rem;letter-spacing:.15em;
  color:rgba(250,246,239,0.35);
  opacity:0;transition:opacity .3s;
}
.film-cell:hover .film-cell-num{opacity:1}

/* Scroll nav buttons */
.film-nav{
  display:flex;gap:1rem;padding:1.5rem 3.5rem 0;
}
.film-nav-btn{
  width:44px;height:44px;
  border:1px solid rgba(155,106,60,0.3);
  background:none;cursor:none;
  display:flex;align-items:center;justify-content:center;
  color:var(--sienna);
  transition:background .2s,color .2s,border-color .2s;
}
.film-nav-btn:hover{background:var(--sienna);color:var(--cream);border-color:var(--sienna)}
.film-nav-btn svg{pointer-events:none}

/* Progress bar */
.film-progress{
  height:1px;background:rgba(155,106,60,0.15);
  margin:1.5rem 3.5rem 0;position:relative;
}
.film-progress-fill{
  position:absolute;left:0;top:0;height:100%;
  background:var(--sienna);
  transition:width .2s ease;
  width:20%;
}

/* ── FULLSCREEN VIEWER ── */
#fs-viewer{
  position:fixed;inset:0;z-index:900;
  background:rgba(20,14,8,0.97);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .4s,visibility .4s;
}
#fs-viewer.open{opacity:1;visibility:visible}

.fs-img-wrap{
  position:relative;
  max-width:90vw;max-height:85vh;
  display:flex;align-items:center;justify-content:center;
}
#fs-img{
  max-width:90vw;max-height:80vh;
  object-fit:contain;
  display:block;
  transition:opacity .3s;
}
.fs-placeholder{
  width:min(80vw,900px);height:min(70vh,560px);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:1rem;
}
.fs-placeholder-bg{
  position:absolute;inset:0;
  border-radius:2px;
  transition:opacity .3s;
}
.fs-placeholder-label{
  position:relative;z-index:1;
  font-family:'Cinzel',serif;font-size:.65rem;letter-spacing:.35em;
  text-transform:uppercase;color:rgba(250,246,239,0.3);text-align:center;
}

.fs-caption{
  position:absolute;bottom:-3.5rem;left:0;right:0;text-align:center;
}
.fs-caption-title{font-family:'Cinzel',serif;font-weight:300;font-size:1rem;letter-spacing:.15em;color:var(--parchment);display:block}
.fs-caption-meta{font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(200,168,124,0.7);margin-top:.3rem;display:block}

/* Prev / Next arrows */
.fs-prev,.fs-next{
  position:fixed;top:50%;
  transform:translateY(-50%);
  background:none;border:none;cursor:none;
  color:rgba(244,237,224,0.5);
  padding:2rem 1.5rem;
  transition:color .2s;
  z-index:901;
}
.fs-prev:hover,.fs-next:hover{color:var(--parchment)}
.fs-prev{left:0}
.fs-next{right:0}
.fs-prev svg,.fs-next svg{pointer-events:none}

/* Counter + close */
.fs-top{
  position:fixed;top:2rem;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 3rem;z-index:901;
}
.fs-counter{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(244,237,224,0.45)}
.fs-close{
  font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
  color:background:none;border:none;cursor:none;
  transition:color .2s;display:flex;align-items:center;gap:.5rem;
}
.fs-close:hover{color:var(--parchment)}

/* Keyboard hint */
.fs-keys{
  position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);
  font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;
  color:#ffffff;white-space:nowrap;
}

/* ── SERVICE DETAILS ── */
.service-details{
  padding:5rem 3.5rem 7rem;background:var(--cream);
  display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;
}
.detail-item{padding:2rem 0;border-top:1px solid rgba(155,106,60,0.18)}
.detail-label{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--rust);margin-bottom:.6rem;display:block}
.detail-val{font-family:'EB Garamond',serif;font-size:1.05rem;line-height:1.7;color:var(--stone)}

/* ── CTA BAND ── */
.service-cta-band{
  padding:6rem 3.5rem;
  background:var(--sand);
  display:flex;align-items:center;justify-content:space-between;gap:3rem;
  flex-wrap:wrap;
}
.service-cta-band h3{font-family:'Cinzel',serif;font-weight:300;font-size:clamp(1.4rem,3vw,2.2rem);color:var(--stone);letter-spacing:.04em}
.service-cta-band h3 em{font-family:'EB Garamond',serif;font-style:italic;color:var(--sienna)}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .service-hero{padding:9rem 1.5rem 4rem}
  .service-intro{grid-template-columns:1fr;gap:2rem;padding:4rem 1.5rem 2rem}
  .service-details{grid-template-columns:1fr 1fr;padding:3rem 1.5rem 5rem}
  .gallery-section-header,.film-nav,.film-progress{padding-left:1.5rem;padding-right:1.5rem}
  .film-track{padding:0 1.5rem}
  .film-cell{width:260px;height:190px}
  .service-cta-band{padding:4rem 1.5rem;flex-direction:column;align-items:flex-start}
  .fs-prev{padding:1.5rem .8rem}
  .fs-next{padding:1.5rem .8rem}
}

/* Thumbnail image inside a film cell */
.film-cell-img{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  z-index:1;
}
/* Keep overlay and number on top of the photo */
.film-cell-overlay{z-index:2}
.film-cell-num{z-index:3}

/* Work sub-nav */
.work-subnav{
  background:var(--stone);
  display:flex;flex-wrap:wrap;gap:0;
  padding:0 3.5rem;
  border-bottom:1px solid rgba(255,255,255,0.06);
  position:sticky;top:68px;z-index:400;
}
.work-nav-link{
  font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,0.75);
  text-decoration:none;
  padding:1rem 1.4rem;
  border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s;
  white-space:nowrap;
}
.work-nav-link:hover{color:#ffffff}
.work-nav-link.active{color:#ffffff;border-bottom-color:rgba(255,255,255,0.6)}
@media(max-width:900px){
  .work-subnav{padding:0 .5rem;top:56px}
  .work-nav-link{padding:.8rem .8rem;font-size:.55rem}
}

.service-hero.fineart{
  background:linear-gradient(155deg,#e8e0d0 0%,#d0c8b8 25%,#b0a898 50%,#908880 70%,#706860 100%)
}