/* ===== Refined layout + subtle motion (loads after style.css) ===== */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--gold);z-index:1100}

/* Gentle reveal */
.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--i,0)*50ms)}
.js [data-reveal].in{opacity:1;transform:none}

/* Hero */
.hero{padding-bottom:80px}
.hero-stats{padding:18px 24px;border:1px solid rgba(201,168,75,.22);border-radius:var(--radius);background:rgba(21,34,56,.55);width:fit-content;max-width:100%;gap:36px}
.hero-image-frame{overflow:visible;box-shadow:none;background:none;position:relative}
.hero-image-frame::before{content:'';position:absolute;inset:18px -18px -18px 18px;border:1px solid rgba(201,168,75,.45);border-radius:22px;z-index:0}
.hero-image-frame img{position:relative;z-index:1;border-radius:20px;box-shadow:var(--shadow)}
.hero-badge{z-index:2;left:-24px;bottom:32px}

/* Buttons */
.btn-primary{transition:transform .25s,box-shadow .25s}

/* Highlight band (replaces marquee) */
.band{background:var(--navy-mid);border-block:1px solid rgba(201,168,75,.2)}
.band-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.band-item{padding:22px 20px;text-align:center;border-right:1px solid rgba(201,168,75,.15)}
.band-item:last-child{border-right:0}
.band-item strong{display:block;font-family:'Cinzel',serif;font-size:.95rem;letter-spacing:1.5px;color:var(--gold-light)}
.band-item span{font-size:.8rem;color:var(--text-muted)}

/* Video */
.studio-video-frame{transition:box-shadow .4s}
.studio-video-frame:hover{box-shadow:0 22px 56px rgba(0,0,0,.5),0 0 0 1px rgba(201,168,75,.35)}

/* About */
.about-photo-frame{position:relative;overflow:visible;box-shadow:none;background:none}
.about-photo-frame::before{content:'';position:absolute;inset:16px -16px -16px 16px;border:1px solid rgba(201,168,75,.4);border-radius:18px}
.about-photo-frame img{position:relative;border-radius:16px;box-shadow:var(--shadow)}
.about-content .eyebrow{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.about-content .roles{display:flex;flex-wrap:wrap;gap:10px}
.about-content .roles li{margin:0;padding:8px 16px 8px 30px;border:1px solid rgba(201,168,75,.28);border-radius:50px;background:rgba(201,168,75,.05);font-size:.86rem}
.about-content .roles li::before{left:13px;top:50%;transform:translateY(-50%)}
.about-content .roles li.feat{border-color:var(--gold);background:rgba(201,168,75,.16);color:var(--gold-light);font-weight:600}

/* Team gallery: 1 wide + 2 rows of 3 */
.team-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.team-card{grid-column:span 2;cursor:zoom-in}
.team-card.featured{grid-column:1/-1}
.team-card img{aspect-ratio:4/3;object-fit:cover;object-position:var(--pos,50% 40%);transition:transform .6s ease}
.team-card.featured img{aspect-ratio:16/8}
.team-card:hover img{transform:scale(1.03)}
.team-card figcaption{font-size:.95rem;padding:40px 20px 16px}
.lightbox{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:20px;background:rgba(7,14,26,.94)}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:82vh;border-radius:12px;box-shadow:var(--shadow)}
.lightbox p{color:var(--gold-light);font-family:'Cinzel',serif;letter-spacing:1.5px}
.lightbox button{position:absolute;top:16px;right:18px;background:none;border:1px solid var(--gold);color:var(--gold-light);width:40px;height:40px;border-radius:50%;font-size:1.3rem;cursor:pointer}

/* Services: 2 featured + 5 regular */
.services-grid{grid-template-columns:repeat(4,1fr)}
.service-card{counter-increment:svc;display:flex;flex-direction:column}
.service-card.feature{grid-column:span 2;min-height:250px;justify-content:flex-end;border-color:rgba(201,168,75,.55);background:linear-gradient(160deg,rgba(201,168,75,.18),var(--navy-card) 65%);position:relative}
.service-card.feature h3{font-size:1.45rem}
.service-card.feature .tag{position:absolute;top:20px;right:20px;font-size:.65rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--navy);background:linear-gradient(135deg,var(--gold-light),var(--gold));padding:5px 12px;border-radius:50px}
.service-card .more{margin-top:16px;font-size:.85rem;font-weight:600;color:var(--gold-light)}
.service-card .more:hover{color:var(--white)}
.service-card:last-child{grid-column:1/-1}

.mobile-cta{display:none}
@media(max-width:960px){
  .band-grid{grid-template-columns:repeat(2,1fr)}
  .band-item:nth-child(2){border-right:0}
  .band-item:nth-child(-n+2){border-bottom:1px solid rgba(201,168,75,.15)}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .service-card.feature{grid-column:1/-1;min-height:0}
  .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .team-card{grid-column:auto}
  .team-card.featured{grid-column:1/-1}
  .hero-badge{left:12px}
  .hero-image-frame::before,.about-photo-frame::before{display:none}
}
@media(max-width:720px){
  .hero-stats{gap:20px;padding:16px}
  .services-grid,.team-grid{grid-template-columns:1fr}
  .service-card:nth-child(n){grid-column:auto}
  .team-card.featured img{aspect-ratio:4/3}
  .mobile-cta{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:900;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.5);transform:translateY(140%);transition:transform .35s}
  .mobile-cta.show{transform:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js [data-reveal]{opacity:1;transform:none}
}

/* ===================== POLISHED MOTION (refined, not loud) ===================== */
:root{--ease:cubic-bezier(.2,.8,.2,1)}

/* Scroll reveal: soft rise, with direction variants */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.js [data-reveal="left"]{transform:translateX(-36px)}
.js [data-reveal="right"]{transform:translateX(36px)}
.js [data-reveal="zoom"]{transform:translateY(20px) scale(.96)}
.js [data-reveal].in{opacity:1;transform:none}

/* Hero: load sequence */
@keyframes rise{from{transform:translateY(110%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}}
@keyframes imgIn{from{clip-path:inset(0 0 100% 0 round 20px);transform:scale(1.08)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-24px)}}
@keyframes drift{to{transform:translate3d(-60px,50px,0) scale(1.15)}}
@keyframes breathe{to{box-shadow:0 22px 56px rgba(0,0,0,.45),0 0 38px rgba(201,168,75,.22)}}
.hero-content h1 .ln{display:block;overflow:hidden;font-style:normal;padding-bottom:.1em}
.hero-content h1 .ln b{display:block;font-weight:inherit;animation:rise 1s var(--ease) .15s both}
.hero-content h1 .ln.gold{color:var(--gold-light)}
.hero-content h1 .ln.gold b{animation-delay:.32s}
.hero-content .lead{animation:fadeUp .9s var(--ease) .6s both}
.hero-stats{animation:fadeUp .9s var(--ease) .75s both}
.hero-cta{animation:fadeUp .9s var(--ease) .9s both}
.hero::before{animation:drift 22s ease-in-out infinite alternate}
.hero-image-frame{box-shadow:var(--shadow),0 0 0 1px rgba(201,168,75,.25);border-radius:20px}
.hero-image-frame img{box-shadow:none;animation:imgIn 1.3s var(--ease) .25s both}
.hero-image-frame::before{animation:fadeUp 1s var(--ease) 1s both}
.hero-badge{animation:slideIn .9s var(--ease) 1.2s both}
.js .hero-content > *,.js .hero-image{opacity:1;transform:none}

/* Section headings: gold line draws in */
.section-header h2::after,.about-content h2::after{content:'';display:block;width:0;height:2px;margin:14px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent);transition:width 1s var(--ease) .35s}
.about-content h2::after{margin-left:0;background:linear-gradient(90deg,var(--gold),transparent)}
.section-header.in h2::after{width:110px}
.about-content.in h2::after,.about-content > .in::after{width:110px}
.about-content h2.in::after{width:110px}

/* Photos: curtain wipe on scroll */
.about-photo-frame{box-shadow:var(--shadow),0 0 0 1px rgba(201,168,75,.2);border-radius:16px}
.about-photo-frame img{box-shadow:none;clip-path:inset(0 100% 0 0 round 16px);transition:clip-path 1.2s var(--ease) .2s}
.about-photo.in .about-photo-frame img{clip-path:inset(0 0 0 0 round 16px)}

/* Nav: sliding underline, compact header on scroll */
.nav{transition:height .35s var(--ease)}
.header.scrolled .nav{height:64px}
.nav-links a:not(.btn){position:relative}
.nav-links a:not(.btn)::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-links a:not(.btn):hover::after,.nav-links a.active::after{transform:scaleX(1)}

/* Buttons: soft shine + lift */
.btn{position:relative;overflow:hidden}
.btn-primary::after{content:'';position:absolute;top:0;left:-70%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .8s var(--ease)}
.btn-primary:hover::after{left:130%}
.btn-outline{transition:background .3s,border-color .3s,transform .3s}
.btn-outline:hover{transform:translateY(-2px)}

/* Service cards: lift, glow, cursor spotlight */
.service-card{position:relative;overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s}
.service-card::before{content:'';position:absolute;inset:0;background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),rgba(232,212,139,.13),transparent 70%);opacity:0;transition:opacity .4s;pointer-events:none}
.service-card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(0,0,0,.35),0 0 0 1px rgba(201,168,75,.35)}
.service-card:hover::before{opacity:1}
.service-icon{transition:transform .45s var(--ease),background .45s}
.service-card:hover .service-icon{transform:scale(1.08) rotate(-4deg)}
.service-card .more{transition:letter-spacing .35s var(--ease),color .3s}
.service-card .more:hover{letter-spacing:.6px}

/* Team photos: slow zoom + caption lift */
.team-card img{transition:transform 1s var(--ease)}
.team-card:hover img{transform:scale(1.06)}
.team-card figcaption{transform:translateY(8px);transition:transform .5s var(--ease)}
.team-card:hover figcaption{transform:none}
.lightbox.open img{animation:fadeUp .5s var(--ease)}

/* Video + highlight band */
.studio-video-frame{animation:breathe 4.5s ease-in-out infinite alternate}
.band-item{transition:background .35s}
.band-item:hover{background:rgba(201,168,75,.07)}

@media(prefers-reduced-motion:reduce){
  .about-photo-frame img{clip-path:none}
  .section-header h2::after,.about-content h2::after{width:110px}
}

/* ===================== RESTORED SIGNATURE EFFECTS ===================== */
@keyframes sheen{0%{background-position:120% 0}60%,100%{background-position:-120% 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes floaty{50%{transform:translateY(-12px)}}
@keyframes orbit{to{--a:360deg}}
@keyframes scroll{to{transform:translateX(-50%)}}
@keyframes wiggle{25%{transform:rotate(-12deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.1)}}
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}

/* Shining headline */
.hero-content h1 .ln.gold b{background:linear-gradient(100deg,var(--gold-light) 30%,#fff 50%,var(--gold-light) 70%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rise 1s var(--ease) .32s both,sheen 6s ease-in-out 1.5s infinite}

/* Hero photo: floating frame + spinning ring + floating orb + floating badge */
.hero-image-frame{animation:floaty 7s ease-in-out 1.6s infinite}
.hero-image-frame::before{inset:-18px;border:1px dashed rgba(201,168,75,.5);border-radius:30px;animation:spin 40s linear infinite}
.hero-image-frame::after{content:'';position:absolute;right:-26px;top:12%;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--gold-light),var(--gold-dark));opacity:.9;z-index:2;animation:floaty 5s ease-in-out infinite reverse}
.hero-badge{animation:slideIn .9s var(--ease) 1.2s both,floaty 6s ease-in-out 2.4s infinite}

/* Parallax on the hero glow (uses 'translate' so it stacks with the drift) */
.hero::before{translate:0 var(--py,0px)}

/* Video: orbiting gold light around the frame */
.studio-video-frame{position:relative}
.studio-video-frame::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--a),transparent 0 70%,var(--gold-light) 85%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:orbit 6s linear infinite;pointer-events:none;z-index:2}

/* Moving marquee */
.marquee{border-block:1px solid rgba(201,168,75,.2);background:var(--navy-mid);overflow:hidden;padding:16px 0}
.marquee-track{display:flex;gap:48px;width:max-content;animation:scroll 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:'Cinzel',serif;letter-spacing:2px;font-size:.85rem;color:var(--gold-light);white-space:nowrap}
.marquee span::before{content:'◆';color:var(--gold);margin-right:48px;font-size:.6rem;vertical-align:middle}

/* Icon wiggle */
.service-card:hover .service-icon{animation:wiggle .6s}

@media(max-width:960px){
  .hero-image-frame::before{display:block;inset:-12px}
  .hero-image-frame::after{display:none}
}

/* ===================== EXTRA ANIMATIONS ===================== */
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:1}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
@keyframes ripple{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(2.1)}}
@keyframes pulse{0%{box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 0 rgba(232,212,139,.6)}70%{box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 16px rgba(232,212,139,0)}100%{box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 0 rgba(232,212,139,0)}}

/* 2) Logo draw-in intro (once per session) */
.site-intro{display:none}
.js .site-intro{position:fixed;inset:0;z-index:3000;background:var(--navy);display:grid;place-content:center;justify-items:center;gap:18px;transition:opacity .7s ease,visibility .7s}
.js.no-intro .site-intro{display:none}
.site-intro.hide{opacity:0;visibility:hidden}
.site-intro svg{width:112px;height:112px}
.site-intro .d{stroke-dasharray:260;stroke-dashoffset:260;animation:draw 1.2s var(--ease) .2s forwards}
.site-intro .a{opacity:0;animation:fadeIn .7s ease 1s forwards}
.site-intro .t{font-family:'Cinzel',serif;letter-spacing:7px;font-size:.9rem;color:var(--gold-light);opacity:0;animation:fadeIn .8s ease 1.15s forwards}
/* hero waits for the intro to finish */
.js body:not(.ready) .hero,.js body:not(.ready) .hero *,.js body:not(.ready) .hero *::before,.js body:not(.ready) .hero *::after,.js body:not(.ready) .hero::before{animation-play-state:paused!important}

/* 1) Sparkles around the hero photo */
.spark{position:absolute;z-index:3;color:var(--gold-light);text-shadow:0 0 10px rgba(232,212,139,.9);pointer-events:none;opacity:0;animation:twinkle 3.2s ease-in-out infinite}

/* 3) Custom play button with ripple */
.play-btn{position:absolute;inset:0;z-index:3;border:0;cursor:pointer;display:grid;place-items:center;background:linear-gradient(rgba(7,14,26,.12),rgba(7,14,26,.4));transition:opacity .35s,visibility .35s}
.play-btn svg{position:relative;width:78px;height:78px;padding:23px 20px 23px 27px;border-radius:50%;background:linear-gradient(135deg,var(--gold-light),var(--gold),var(--gold-dark));fill:var(--navy);box-shadow:0 10px 30px rgba(0,0,0,.45);transition:transform .35s var(--ease)}
.play-btn:hover svg{transform:scale(1.1)}
.play-btn::before,.play-btn::after{content:'';position:absolute;inset:0;margin:auto;width:78px;height:78px;border-radius:50%;border:2px solid var(--gold-light);animation:ripple 2.4s ease-out infinite}
.play-btn::after{animation-delay:1.2s}
.play-btn.hide{opacity:0;visibility:hidden}

/* 4) Pulse on the mobile Book button */
.mobile-cta.show{animation:pulse 2.4s ease-out infinite}

/* 5) 3D tilt on service cards */
.service-card{transition:transform .25s ease-out,box-shadow .45s var(--ease),border-color .45s}
.service-card:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}

/* 6) Ken Burns on the group photo (zoom follows scroll) */
.team-card.featured img{scale:var(--kb,1)}

/* 7) Magnetic buttons */
.btn-primary{transition:transform .25s,box-shadow .25s,translate .25s}
.btn{transition:translate .25s,background .3s,border-color .3s,transform .25s,box-shadow .25s}

@media(prefers-reduced-motion:reduce){
  .site-intro,.spark{display:none!important}
  .play-btn::before,.play-btn::after{display:none}
  .team-card.featured img{scale:1}
}