/* =============================================================================
   SANDSTORM FILMS — components.css
   Section / component modules. Each block is a self-contained, reusable unit
   that maps to a WordPress ACF flexible-content row.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   INTRO  ("Complex Creatives, Made Easy")
   -------------------------------------------------------------------------- */
.intro{display:grid;grid-template-columns:1fr 1.7fr;gap:72px;align-items:center;}
.intro__title{font-family:var(--font-display);font-size:clamp(36px,5vw,66px);line-height:.93;letter-spacing:.02em;color:var(--color-text);}
.intro__body{font-size:15px;color:rgba(237,233,227,.6);line-height:1.85;}
.intro__body strong{color:rgba(237,233,227,.85);font-weight:500;}
.intro__body p+p{margin-top:16px;}
/* Card text spans must stack (they are <span> inside <a>) */
.service-card__tag,.service-card__name,.service-card__desc,.about-card__tag,.about-card__title,.about-card__desc,.media-card__tag,.media-card__title,.media-card__desc{display:block;}

/* -----------------------------------------------------------------------------
   SERVICE GRID  (3 equal weighted cards)
   -------------------------------------------------------------------------- */
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(200,80,26,.2);}
.service-card{position:relative;overflow:hidden;min-height:480px;display:flex;flex-direction:column;justify-content:flex-end;padding:32px;text-decoration:none;}
.service-card__bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.58) saturate(.65);transition:transform .9s cubic-bezier(.25,.46,.45,.94),filter .9s;}
.service-card:hover .service-card__bg{transform:scale(1.06);filter:brightness(.75) saturate(.8);}
.service-card__grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,6,6,.78) 0%,rgba(6,6,6,.2) 55%,transparent 100%);}
.service-card__body{position:relative;z-index:2;}
.service-card__tag{font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--color-orange);margin-bottom:8px;}
.service-card__name{font-family:var(--font-display);font-size:46px;letter-spacing:.03em;color:var(--color-text);margin-bottom:10px;}
.service-card__desc{font-size:14px;color:rgba(237,233,227,.6);line-height:1.65;max-width:320px;margin-bottom:18px;}
.service-card__arrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--color-orange);display:flex;align-items:center;gap:8px;}
.service-card__arrow span{transition:transform .2s;}
.service-card:hover .service-card__arrow span{transform:translateX(5px);}

/* -----------------------------------------------------------------------------
   PROMO BANNER  (Limited Time Offer / full-bleed CTA)
   -------------------------------------------------------------------------- */
.promo{position:relative;overflow:hidden;min-height:440px;display:flex;align-items:center;justify-content:center;text-align:center;margin-top:60px;margin-bottom:60px;}
.promo__bg{position:absolute;inset:0;background-size:cover;background-position:center bottom;filter:brightness(.32) saturate(.6);}
.promo__overlay{position:absolute;inset:0;background:rgba(6,6,6,.42);}
.promo__content{position:relative;z-index:2;padding:80px min(52px,var(--gutter));max-width:900px;}
.promo__eyebrow{font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--color-orange);margin-bottom:14px;}
.promo__title{font-family:var(--font-display);font-size:clamp(42px,6.5vw,90px);line-height:.9;letter-spacing:.03em;color:#fff;margin-bottom:16px;}
.promo__sub{font-size:16px;font-weight:500;color:rgba(255,255,255,.88);margin-bottom:34px;letter-spacing:.03em;}

/* -----------------------------------------------------------------------------
   CREDITS POSTER SLIDER
   -------------------------------------------------------------------------- */
.credits__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px;}
.credits__title{font-family:var(--font-display);font-size:clamp(40px,5vw,70px);line-height:.92;letter-spacing:.02em;color:var(--color-text);}
.credits__note{font-size:12px;color:var(--color-muted);max-width:240px;letter-spacing:.04em;}
.credits__viewport{overflow:hidden;}
.credits__track{display:flex;gap:14px;transition:transform .6s cubic-bezier(.25,.46,.45,.94);}
.poster-card{position:relative;flex:0 0 calc((100% - 56px)/5);overflow:hidden;aspect-ratio:2/3;border:1px solid var(--border-1);transition:transform .4s ease;}
.poster-card__bg{position:absolute;inset:0;background-size:cover;background-position:center top;filter:brightness(.7) saturate(.8);transition:all .5s;}
.poster-card:hover{transform:scale(1.05);z-index:3;}
.poster-card:hover .poster-card__bg{filter:brightness(1) saturate(1);}
.poster-card__grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,6,6,.92) 0%,transparent 55%);}
.poster-card__title{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#fff;}
.credits__controls{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:24px;}
.credits__arrow{width:54px;height:54px;border:2px solid rgba(255,255,255,.28);background:rgba(6,6,6,.5);backdrop-filter:blur(4px);color:var(--color-text);font-size:20px;display:flex;align-items:center;justify-content:center;transition:all .2s;cursor:pointer;}
.credits__arrow:hover{border-color:var(--color-orange);color:var(--color-orange);background:rgba(6,6,6,.8);}

/* -----------------------------------------------------------------------------
   SHOWREEL  (video frame)
   -------------------------------------------------------------------------- */
.showreel__bar{display:flex;align-items:center;justify-content:space-between;height:60px;border-bottom:1px solid var(--border-1);}
.showreel__label{font-family:var(--font-display);font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:var(--color-orange);}
.showreel__sub{font-size:11px;font-weight:600;color:var(--color-muted);letter-spacing:.1em;text-transform:uppercase;}
.showreel__frame{width:100%;aspect-ratio:16/9;background:#000;}
.showreel__frame video{width:100%;height:100%;object-fit:cover;display:block;}

/* -----------------------------------------------------------------------------
   ABOUT  (Filmmakers First + 3 link cards)
   -------------------------------------------------------------------------- */
.about__intro{text-align:center;max-width:760px;margin:0 auto 56px;}
.about__intro .section-title{font-size:clamp(38px,5vw,64px);}
.about__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--border-1);}
.about-card{position:relative;overflow:hidden;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;text-decoration:none;}
.about-card__bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.4) saturate(.6);transition:all .8s;}
.about-card:hover .about-card__bg{filter:brightness(.6) saturate(.8);transform:scale(1.04);}
.about-card__grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,6,6,.94) 0%,rgba(6,6,6,.3) 55%,transparent 100%);}
.about-card__body{position:relative;z-index:2;}
.about-card__tag{font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--color-orange);margin-bottom:6px;}
.about-card__title{font-family:var(--font-display);font-size:28px;letter-spacing:.03em;color:var(--color-text);margin-bottom:6px;}
.about-card__desc{font-size:13px;color:rgba(237,233,227,.55);line-height:1.5;}

/* -----------------------------------------------------------------------------
   SPOTLIGHT  (TechnoDolly feature — text + ken-burns image)
   -------------------------------------------------------------------------- */
.spotlight{position:relative;overflow:hidden;padding-top:48px !important;}
.spotlight__watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-size:18vw;color:rgba(200,80,26,.03);white-space:nowrap;pointer-events:none;user-select:none;}
.spotlight__grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;position:relative;z-index:2;}
.spotlight__title{font-family:var(--font-display);font-size:clamp(44px,6vw,84px);line-height:.9;letter-spacing:.02em;color:var(--color-text);margin-bottom:20px;}
.spotlight__pull{font-family:var(--font-serif);font-size:19px;font-weight:400;color:rgba(237,233,227,.7);line-height:1.7;border-left:2px solid var(--color-orange);padding-left:20px;margin-bottom:28px;}
.pill-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:30px;}
.pill{border:1px solid var(--border-2);color:rgba(237,233,227,.6);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;}
.spotlight__media{position:relative;overflow:hidden;aspect-ratio:1/1;}
.spotlight__media-inner{position:absolute;inset:-8%;background-size:cover;background-position:center;animation:kenburns 18s ease-in-out infinite alternate;filter:brightness(.85) saturate(.85);}
@keyframes kenburns{0%{transform:scale(1) translate(0,0);}50%{transform:scale(1.07) translate(-1.5%,1%);}100%{transform:scale(1.08) translate(-.5%,.5%);}}
.spotlight__media-grad{position:absolute;inset:0;background:linear-gradient(135deg,rgba(6,6,6,.55) 0%,rgba(6,6,6,.1) 50%,rgba(6,6,6,.25) 100%);}

/* spec mini-bar under spotlight */
.spec-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border-1);margin-top:2px;}
.spec-bar__item{background:var(--color-card);padding:16px;border-top:2px solid transparent;transition:border-color .3s,background .3s;}
.spec-bar__item:hover{border-top-color:var(--color-orange);background:var(--color-card-2);}
.spec-bar__value{font-family:var(--font-display);font-size:26px;letter-spacing:.03em;color:var(--color-orange);display:block;line-height:1;}
.spec-bar__key{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted);margin-top:3px;}

/* -----------------------------------------------------------------------------
   PRICING  (TD10 / TD15 / TD25)
   -------------------------------------------------------------------------- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(200,80,26,.15);max-width:1100px;margin:0 auto;}
.price-card{background:var(--color-card);position:relative;overflow:hidden;display:flex;flex-direction:column;}
.price-card--featured{background:var(--color-card-2);border-top:2px solid var(--color-orange);}
.price-card__badge{position:absolute;top:0;right:0;background:var(--color-orange);color:#fff;font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:5px 14px;z-index:3;}
.price-card__img{position:relative;height:300px;overflow:hidden;background:var(--color-bg);}
.price-card__img-bg{position:absolute;inset:-5%;background-size:cover;background-position:center 68%;filter:brightness(.8) saturate(.75);transition:transform .6s;}
.price-card:hover .price-card__img-bg{transform:scale(1.05);}
.price-card__img-ov{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(6,6,6,.05) 0%,rgba(6,6,6,.45) 60%,rgba(6,6,6,.75) 100%);}
.price-card__model{position:absolute;bottom:14px;left:20px;z-index:2;font-family:var(--font-display);font-size:50px;letter-spacing:.03em;color:var(--color-text);line-height:1;}
.price-card__model em{font-size:28px;color:var(--color-orange);font-style:normal;}
.price-card__body{padding:24px 28px 32px;flex:1;display:flex;flex-direction:column;}
.price-card__line{font-size:13px;color:rgba(237,233,227,.55);letter-spacing:.02em;margin-bottom:18px;line-height:1.6;}
.price-card__price{font-family:var(--font-display);font-size:40px;color:var(--color-orange);letter-spacing:.03em;line-height:1;}
.price-card__per{font-size:10px;color:var(--color-muted);letter-spacing:.12em;text-transform:uppercase;margin-bottom:20px;}
.price-card__div{height:1px;background:var(--border-1);margin-bottom:18px;}
.price-card__inc{font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--color-muted);margin-bottom:10px;}
.price-card__list{display:flex;flex-direction:column;gap:8px;margin-bottom:28px;}
.price-card__list li{font-size:13px;color:rgba(237,233,227,.58);display:flex;gap:9px;line-height:1.4;}
.price-card__list li::before{content:'—';color:var(--color-orange);flex-shrink:0;}
.price-card__btn{display:block;text-align:center;padding:13px;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border:1px solid rgba(200,80,26,.4);color:var(--color-orange);transition:all .2s;margin-top:auto;}
.price-card__btn:hover,.price-card--featured .price-card__btn{background:var(--color-orange);color:#fff;border-color:var(--color-orange);}
.pricing-note{text-align:center;margin-top:28px;font-family:var(--font-serif);font-size:18px;color:rgba(237,233,227,.7);letter-spacing:.02em;}

/* -----------------------------------------------------------------------------
   INFO CARDS  (What you need to know / FAQ-style)
   -------------------------------------------------------------------------- */
.info-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--border-1);}
.info-card{background:var(--color-card);padding:26px 24px;border-top:2px solid transparent;transition:border-color .3s,background .3s;}
.info-card:hover{border-top-color:var(--color-orange);background:var(--color-card-2);}
.info-card__q{font-family:var(--font-display);font-size:22px;letter-spacing:.03em;color:var(--color-text);margin-bottom:10px;}
.info-card__a{font-size:13px;color:rgba(237,233,227,.55);line-height:1.65;}
.know-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-bottom:48px;align-items:start;}
.know-list{display:flex;flex-direction:column;gap:14px;}
.know-list li{font-size:14px;color:rgba(237,233,227,.62);line-height:1.6;display:flex;gap:10px;}
.know-list li::before{content:'—';color:var(--color-orange);flex-shrink:0;}
.know-aside{border-left:2px solid var(--color-orange);padding-left:24px;font-size:16px;color:rgba(237,233,227,.55);line-height:1.75;}
.know-aside p+p{margin-top:14px;}
.know-aside__pull{font-family:var(--font-serif);font-size:19px;font-weight:400;color:rgba(237,233,227,.72);margin-bottom:16px;line-height:1.55;}

/* -----------------------------------------------------------------------------
   MEDIA CARDS  (studio/location/international, channels, narrative, etc.)
   -------------------------------------------------------------------------- */
.media-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--border-1);margin-top:40px;}
.media-card{position:relative;overflow:hidden;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;text-decoration:none;}
.media-card__bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.45) saturate(.7);transition:all .8s;}
.media-card:hover .media-card__bg{filter:brightness(.65) saturate(.85);transform:scale(1.04);}
.media-card__grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,6,6,.94) 0%,rgba(6,6,6,.25) 60%,transparent 100%);}
.media-card__body{position:relative;z-index:2;}
.media-card__tag{font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--color-orange);margin-bottom:8px;}
.media-card__title{font-family:var(--font-display);font-size:32px;letter-spacing:.03em;color:var(--color-text);margin-bottom:8px;}
.media-card__desc{font-size:13px;color:rgba(237,233,227,.58);line-height:1.6;}
.media-card__hover-overlay{position:absolute;inset:0;background:rgba(6,6,6,.97);display:flex;align-items:center;justify-content:center;padding:32px;opacity:0;transition:opacity .4s;z-index:5;}
.media-card:hover .media-card__hover-overlay{opacity:1;}
.media-card__hover-overlay p{font-size:15px;color:rgba(237,233,227,.85);line-height:1.7;text-align:center;}
.media-card__body{transition:opacity .4s;}
.media-card:hover .media-card__body{opacity:0;}

/* -----------------------------------------------------------------------------
   CHANNELS SLIDER  (scrollable portrait video cards per wireframe)
   -------------------------------------------------------------------------- */
.channels-slider{position:relative;display:flex;align-items:center;gap:16px;}
.channels-slider__viewport{overflow:hidden;flex:1;}
.channels-slider__track{display:flex;gap:18px;transition:transform .5s cubic-bezier(.25,.46,.45,.94);}
.channel-card{position:relative;flex:0 0 calc((100% - 54px)/4);aspect-ratio:9/16;overflow:hidden;display:block;text-decoration:none;border:1px solid var(--border-1);}
.channel-card__bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.6) saturate(.7);transition:all .5s;}
.channel-card:hover .channel-card__bg{filter:brightness(.8) saturate(.9);transform:scale(1.04);}
.channel-card__grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,6,6,.85) 0%,rgba(6,6,6,.15) 40%,rgba(6,6,6,.3) 100%);}
.channel-card__platform{position:absolute;top:16px;left:16px;z-index:4;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:4px;line-height:0;font-size:0;color:transparent;}
.channel-card__platform svg{width:20px;height:20px;display:block;}
.channel-card__platform--ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);}
.channel-card__platform--yt{background:#FF0000;border-radius:4px;}
.channel-card__play{position:absolute;top:16px;right:16px;width:42px;height:42px;background:rgba(200,80,26,.45);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:3;transition:transform .3s;}
.channel-card:hover .channel-card__play{transform:scale(1.12);}
.channel-card__label{position:absolute;left:16px;bottom:24px;z-index:3;font-family:var(--font-display);font-size:26px;letter-spacing:.06em;color:#fff;writing-mode:vertical-lr;text-orientation:mixed;transform:rotate(180deg);text-transform:uppercase;}
.channels-slider__arrow{width:48px;height:48px;border:1px solid var(--border-2);background:transparent;color:var(--color-orange);font-size:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;cursor:pointer;}
.channels-slider__arrow:hover{border-color:var(--color-orange);background:rgba(200,80,26,.12);}
.channels-slider__note{text-align:center;margin-top:28px;font-size:14px;color:var(--color-muted);letter-spacing:.03em;}
.channels-slider__note a{color:var(--color-orange);text-decoration:none;}

/* --------------------------------------------------------------------------
   TEAM MARQUEE  (double-row infinite scroll, contact page)
   -------------------------------------------------------------------------- */
.team-marquee{overflow:hidden;display:flex;flex-direction:column;gap:16px;padding:8px 0;}
.team-marquee__row{display:flex;gap:16px;width:max-content;}
.team-marquee__row--fwd{animation:tm-fwd 45s linear infinite;}
.team-marquee__row--rev{animation:tm-rev 45s linear infinite;}
.team-marquee:hover .team-marquee__row{animation-play-state:paused;}
@keyframes tm-fwd{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes tm-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.tm-card{flex:0 0 300px;background:var(--color-card);border:1px solid var(--border-1);overflow:hidden;}
.tm-card__photo{width:100%;aspect-ratio:3/4;overflow:hidden;}
.tm-card__photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25);transition:filter .4s;}
.tm-card:hover .tm-card__photo img{filter:grayscale(0);}
.tm-card__body{padding:14px 16px 16px;}
.tm-card__name{font-family:var(--font-display);font-size:21px;letter-spacing:.04em;color:var(--color-text);text-transform:uppercase;}
.tm-card__role{font-size:12px;color:var(--color-muted);margin-top:4px;text-transform:uppercase;letter-spacing:.07em;}
.channels-slider__note a:hover{text-decoration:underline;}

/* -----------------------------------------------------------------------------
   NARRATIVE  (intro + long/short/brand cards)
   -------------------------------------------------------------------------- */
.narrative__intro{text-align:center;max-width:820px;margin:0 auto 50px;}

/* -----------------------------------------------------------------------------
   WORK MARQUEE  (auto-scrolling two-row production gallery — WP: ACF repeater)
   Two rows: row--fwd scrolls left, row--rev scrolls right. Each row contains
   the image set duplicated once for a seamless CSS loop (translateX -50%).
   Speed: data-attribute-driven in future; currently set via animation-duration.
   Hover pauses both rows.
   -------------------------------------------------------------------------- */
.work-marquee-section{padding:80px 0;background:var(--color-bg-alt);overflow:hidden;}
.work-marquee-section__head{text-align:center;margin-bottom:48px;padding:0 var(--gutter);}
.work-marquee{display:flex;flex-direction:column;gap:12px;overflow:hidden;}

.work-marquee__row{display:flex;gap:12px;width:max-content;will-change:transform;}
.work-marquee__row--fwd{animation:wm-fwd 95s linear infinite;}
.work-marquee__row--rev{animation:wm-rev 95s linear infinite;}

.work-marquee:hover .work-marquee__row{animation-play-state:paused;}

.work-marquee__item{position:relative;flex:0 0 420px;height:260px;overflow:hidden;border-radius:2px;}
.work-marquee__item img{width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(.88) saturate(.85);display:block;transition:filter .5s;}
.work-marquee__item:hover img{filter:brightness(1) saturate(1);}

.work-marquee__label{
  position:absolute;bottom:0;left:0;right:0;
  padding:36px 14px 12px;
  background:linear-gradient(to top,rgba(6,6,6,.78) 0%,transparent 100%);
  font-family:var(--font-body);
  font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(237,233,227,.9);
  opacity:0;
  transition:opacity .35s;
  pointer-events:none;
}
.work-marquee__item:hover .work-marquee__label{opacity:1;}

@keyframes wm-fwd{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes wm-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* Responsive — smaller tiles on mobile */
@media(max-width:768px){
  .work-marquee__item{flex:0 0 280px;height:180px;}
  .work-marquee-section{padding:56px 0;}
}
@media(max-width:480px){
  .work-marquee__item{flex:0 0 220px;height:145px;}
}
/* Touch/mobile: no hover available — labels always visible.
   Three selectors for maximum browser coverage (real devices, emulators, older Safari) */
@media(hover:none){.work-marquee__label{opacity:1;}}
@media(pointer:coarse){.work-marquee__label{opacity:1;}}
@media(max-width:768px){.work-marquee__label{opacity:1;}}
/* Mobile: two CSS-transform-animated rows create two huge composited layers the
   mobile GPU can't hold at once (one renders, the other goes black, alternating).
   On mobile we drive the scroll with JS scrollLeft on a native scroll container
   (see initWorkMarquee) — the browser tiles native scroll, so no oversized layer
   and both rows auto-scroll simultaneously. */
@media(max-width:768px){
  .work-marquee__row{width:100%;max-width:100%;overflow-x:hidden;animation:none !important;will-change:auto;}
  .work-marquee__item img{filter:none;}
}

/* -----------------------------------------------------------------------------
   FILMMAKING HISTORY — horizontal slider with top timeline rail
   -------------------------------------------------------------------------- */

/* Section padding override — let cards bleed close to edge */
.hist-section .section__head{padding:0 min(52px,var(--gutter));}

/* ---- Outer wrapper ---- */
.hist-wrap{position:relative;user-select:none;}

/* ---- Timeline rail — same padding as cards so dots sit above their card centre ---- */
.hist-rail-outer{
  padding:0 min(52px,var(--gutter));
  margin-bottom:22px;
  overflow:hidden;
  position:relative;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 88%,transparent 100%);
}
.hist-rail-outer.is-start{
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to right,#000 0%,#000 88%,transparent 100%);
}
.hist-rail-outer.is-end{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 100%);
}
.hist-rail-outer.is-start.is-end{
  -webkit-mask-image:none;
  mask-image:none;
}
/* Static connecting line — outside the translating rail, never moves */
.hist-rail-outer::before{
  content:'';
  position:absolute;
  /* Line sits at the vertical centre of the dots.
     Dot height = 12px → radius 6px. Rail padding-bottom = 11px → dot bottom at 11px from outer bottom.
     Dot centre = 11 + 6 = 17px from outer bottom. Line (1px tall) bottom = 17px → top = 18px. */
  bottom:17px;
  left:min(52px,var(--gutter));
  right:min(52px,var(--gutter));
  height:1px;
  background:var(--border-2);
  z-index:0;
  pointer-events:none;
}
.hist-rail-clip{overflow:hidden;}
.hist-rail{
  display:flex;
  align-items:flex-end;      /* all items bottom-aligned */
  position:relative;
  transition:transform .55s cubic-bezier(.25,.46,.45,.94);
  padding-bottom:11px;       /* dot bottom = 11px from outer bottom → centre at 17px */
  gap:3px;                   /* must match card gap exactly */
}
.hist-rail__item{
  flex:0 0 var(--hist-card-w, 310px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;                  /* increased gap: year ↔ dot */
  position:relative;
  z-index:2;
  cursor:pointer;
}
.hist-rail__item:hover .hist-rail__year{color:var(--color-text);}
.hist-rail__dot{
  width:12px;height:12px;
  border-radius:50%;
  flex-shrink:0;
  background:var(--color-orange);
  border:2px solid var(--color-bg-alt);
  transition:transform .25s,box-shadow .25s;
}
.hist-rail__item:hover .hist-rail__dot,
.hist-rail__item.is-active .hist-rail__dot{
  transform:scale(1.5);
  box-shadow:0 0 0 5px rgba(200,80,26,.22);
}
.hist-rail__year{
  font-family:var(--font-display);
  font-size:17px;            /* larger year label */
  letter-spacing:.07em;
  color:var(--color-muted-2);
  line-height:1;
  transition:color .25s;
  white-space:nowrap;
  text-align:center;
}
.hist-rail__item.is-active .hist-rail__year{color:var(--color-orange);}
.hist-rail__item.is-pinned .hist-rail__dot{
  transform:scale(1.5);
  box-shadow:0 0 0 5px rgba(200,80,26,.35);
  background:var(--color-orange);
}
.hist-rail__item.is-pinned .hist-rail__year{color:var(--color-orange);}

/* ---- Arrow buttons — absolutely overlaid on the card strip ---- */
.hist-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%) translateY(22px); /* shift down half rail height so centred on cards */
  width:54px;height:54px;
  border-radius:50%;
  border:1px solid rgba(237,233,227,.18);
  background:rgba(6,6,6,.72);
  backdrop-filter:blur(6px);
  color:var(--color-text);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  z-index:20;
  transition:border-color .2s,background .2s,color .2s,transform .2s;
}
.hist-btn svg{width:22px;height:22px;display:block;}
.hist-btn:hover{
  border-color:var(--color-orange);
  color:var(--color-orange);
  background:rgba(6,6,6,.9);
  transform:translateY(calc(-50% + 22px)) scale(1.1);
}
.hist-btn:disabled{opacity:.2;pointer-events:none;}
.hist-btn--prev{left:8px;}
.hist-btn--next{right:8px;}

/* ---- Cards clip + track ---- */
.hist-clip{
  overflow:hidden;
  padding:0 min(52px,var(--gutter));
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 88%,transparent 100%);
  cursor:grab;
  transition:mask-image .3s,-webkit-mask-image .3s;
}
/* At the start: no left fade */
.hist-clip.is-start{
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to right,#000 0%,#000 88%,transparent 100%);
}
/* At the end: no right fade — last card fully visible */
.hist-clip.is-end{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 100%);
}
/* At start AND end (all cards fit): no fades at all */
.hist-clip.is-start.is-end{
  -webkit-mask-image:none;
  mask-image:none;
}
.hist-clip.is-dragging{cursor:grabbing;}
.hist-track{
  display:flex;
  gap:3px;
  transition:transform .55s cubic-bezier(.25,.46,.45,.94);
  will-change:transform;
}
.hist-track.no-transition{transition:none;}
.hist-rail.no-transition{transition:none;}

/* ---- Individual card ---- */
.hist-card{
  flex:0 0 var(--hist-card-w, 310px);
  position:relative;
  overflow:hidden;
  aspect-ratio:3/4;
  border-radius:2px;
}
.hist-card__img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  filter:brightness(.75) saturate(.78);
  transition:filter .55s,transform .65s;
}
.hist-card:hover .hist-card__img,
.hist-card.is-pinned .hist-card__img{
  filter:brightness(.42) saturate(.5);
  transform:scale(1.04);
}
.hist-card__overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,6,6,.96) 0%,rgba(6,6,6,.5) 45%,transparent 100%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:28px 24px;
  opacity:0;
  transition:opacity .4s;
}
.hist-card:hover .hist-card__overlay,
.hist-card.is-pinned .hist-card__overlay{opacity:1;}
.hist-card__ov-title{
  font-family:var(--font-display);
  font-size:21px;
  color:var(--color-text);
  letter-spacing:.04em;
  line-height:1.2;
  margin-bottom:10px;
}
.hist-card__ov-text{
  font-size:13px;
  color:rgba(237,233,227,.78);
  line-height:1.65;
}
.hist-card--placeholder .hist-card__img{filter:brightness(.3) saturate(0);}
.hist-card--placeholder .hist-card__ov-title{font-style:italic;opacity:.5;}
.hist-card--placeholder .hist-card__ov-text{opacity:.35;font-style:italic;}

/* Drag hint */
.hist-hint{
  text-align:center;
  margin-top:18px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-muted-2);
  opacity:.5;
}

/* ---- Responsive ---- */
@media(max-width:1024px){
  :root{--hist-card-w:265px;}
  .hist-btn{width:46px;height:46px;}
}
@media(max-width:768px){
  :root{--hist-card-w:215px;}
  .hist-btn{width:40px;height:40px;}
  .hist-btn svg{width:18px;height:18px;}
  .hist-rail__year{font-size:12px;}
}
@media(max-width:480px){
  :root{--hist-card-w:178px;}
  .hist-btn--prev{left:4px;}
  .hist-btn--next{right:4px;}
}

/* -----------------------------------------------------------------------------
   RATE CARD BANNER SECTION
   -------------------------------------------------------------------------- */
.ratecard-banner{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:600px;
  background:var(--color-bg);
}

/* ── Image panel ── */
.ratecard-banner__img{
  position:relative;
  overflow:hidden;
}
.ratecard-banner__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .8s ease;
}
.ratecard-banner:hover .ratecard-banner__img img{
  transform:scale(1.03);
}
.ratecard-banner__img-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to right, rgba(6,6,6,.25) 0%, rgba(6,6,6,.05) 100%);
  pointer-events:none;
}

/* ── Content panel ── */
.ratecard-banner__body{
  padding:72px 64px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:28px;
  background:var(--color-bg-alt);
}
.ratecard-banner__title{
  font-family:var(--font-display);
  font-size:clamp(56px,5.5vw,88px);
  line-height:.95;
  color:var(--color-text);
  letter-spacing:.02em;
  text-transform:uppercase;
  margin:0;
}
.ratecard-banner__title span{
  color:var(--color-orange);
}
.ratecard-banner__text{
  font-size:17px;
  color:var(--color-muted-2);
  line-height:1.7;
  max-width:460px;
  margin:0;
}
.ratecard-banner__cats{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.ratecard-banner__cats span{
  font-family:var(--font-body);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-muted-2);
  border:1px solid var(--border-2);
  padding:5px 12px;
  border-radius:1px;
  transition:border-color .2s, color .2s;
}
.ratecard-banner__cats span:hover{
  border-color:var(--color-orange);
  color:var(--color-orange);
}
.ratecard-banner__btns{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:4px;
}
.ratecard-banner__dl{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.ratecard-banner__dl svg{flex-shrink:0;}
.ratecard-banner__disc{
  font-size:12px;
  color:var(--color-muted-2);
  opacity:.5;
  letter-spacing:.04em;
  margin:0;
}

/* ── Responsive ── */
@media(max-width:1024px){
  .ratecard-banner{
    grid-template-columns:1fr;
  }
  .ratecard-banner__img{
    height:360px;
    order:-1;
  }
  .ratecard-banner__body{
    padding:52px min(52px,var(--gutter));
  }
}
@media(max-width:768px){
  .ratecard-banner__img{height:280px;}
  .ratecard-banner__body{padding:44px min(52px,var(--gutter));}
  .ratecard-banner__btns{flex-direction:column;align-items:flex-start;}
  .ratecard-banner__btns .btn{width:100%;justify-content:center;}
}
@media(max-width:480px){
  .ratecard-banner__img{height:220px;}
}

/* -----------------------------------------------------------------------------
   FACILITIES — intro split, stage grid, services
   -------------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;}
.split--reverse{direction:ltr;}
.split--reverse>.split__media{order:-1;}
.split__media{position:relative;overflow:hidden;}
.split__media--gallery{overflow:visible;}
/* Gallery images must fill their aspect-ratio container — higher specificity beats split__media img */
.split__media.split__media--gallery img{height:100%;}
.split__media img{width:100%;height:clamp(400px,30vw,560px);object-fit:cover;filter:brightness(.82) saturate(.8);display:block;}
.split__body .lede{margin-bottom:24px;}

.stage-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:var(--border-1);}
.stage-card{background:var(--color-card);overflow:hidden;display:flex;flex-direction:column;}
.stage-card__img-wrap{position:relative;overflow:hidden;height:200px;}
.stage-card__img{width:100%;height:200px;object-fit:cover;filter:brightness(.55) saturate(.7);transition:all .5s;}
.stage-card:hover .stage-card__img{filter:brightness(.75) saturate(.85);}
.stage-card__overlay{position:absolute;inset:0;background:rgba(6,6,6,.88);display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;transition:opacity .4s;}
.stage-card:hover .stage-card__overlay{opacity:1;}
.stage-card__overlay p{font-size:15px;color:rgba(237,233,227,.82);line-height:1.65;text-align:center;}
.stage-card__body{padding:24px 22px 28px;border-top:2px solid transparent;transition:border-color .3s,background .3s;flex:1;}
.stage-card:hover .stage-card__body{border-top-color:var(--color-orange);background:var(--color-card-2);}
.stage-card__name{font-family:var(--font-display);font-size:30px;letter-spacing:.05em;color:var(--color-orange);margin-bottom:6px;}
.stage-card__spec{font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--color-muted-2);margin-bottom:12px;}
.stage-card__desc{font-size:14px;color:rgba(237,233,227,.55);line-height:1.6;}

.facility-services{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:var(--border-1);margin-top:2px;}
.facility-card{background:var(--color-card);overflow:hidden;display:flex;flex-direction:column;}
.facility-card__img{width:100%;height:150px;object-fit:cover;filter:brightness(.55) saturate(.7);}
.facility-card__body{padding:20px 18px 24px;}
.facility-card__name{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text);margin-bottom:8px;}
.facility-card__desc{font-size:13px;color:rgba(237,233,227,.5);line-height:1.55;}

/* FACILITY GALLERY (intro split slider) */
.facility-gallery{position:relative;overflow:hidden;aspect-ratio:16/10;}
.facility-gallery--portrait{aspect-ratio:2/3;max-width:300px;}

/* FACILITY GALLERY FRAME
   Optional wrapper around .facility-gallery only (not controls) — gives the poster
   a premium "displayed work" treatment. Toggle this class in WordPress per block.
   ─────────────────────────────────────────────────────────────────────────────── */
/* Top-left corner bracket — sits on the image itself */
.facility-gallery-frame{position:relative;width:fit-content;margin:0 auto;padding:8px;}
/* Controls inside the frame overlay the portrait gallery */
.facility-gallery-frame .facility-gallery__controls{transform:translateY(calc(-50% - 8px));}
.facility-gallery-frame::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:24px;height:24px;
  border-top:2px solid var(--color-orange);
  border-left:2px solid var(--color-orange);
  pointer-events:none;
  z-index:5;
}
/* Bottom-right corner bracket — sits on the image itself */
.facility-gallery-frame::after{
  content:'';
  position:absolute;
  bottom:0;right:0;
  width:24px;height:24px;
  border-bottom:2px solid var(--color-orange);
  border-right:2px solid var(--color-orange);
  pointer-events:none;
  z-index:5;
}
.facility-gallery__track{display:flex;height:100%;transition:transform .5s cubic-bezier(.25,.46,.45,.94);}
.facility-gallery__track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:brightness(.88) saturate(.85);display:block;}
/* Overlay arrow controls — positioned over the gallery image */
.facility-gallery__controls{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:space-between;padding:0 12px;z-index:10;pointer-events:none;}
.facility-gallery__arrow{pointer-events:all;width:50px;height:50px;border-radius:50%;border:2px solid rgba(255,255,255,.38);background:rgba(6,6,6,.58);backdrop-filter:blur(8px);color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;transition:all .2s;cursor:pointer;}
.facility-gallery__arrow:hover{border-color:var(--color-orange);color:var(--color-orange);background:rgba(6,6,6,.88);}
@media(max-width:768px){.facility-gallery__arrow{width:42px;height:42px;font-size:16px;}}

/* VIDEO EMBED (YouTube / iframe tour) */
.video-embed{max-width:1040px;margin:0 auto;aspect-ratio:16/9;border:1px solid var(--border-2);background:#000;overflow:hidden;}
.video-embed iframe{width:100%;height:100%;border:0;display:block;}

/* TAKE A TOUR / generic image-CTA banner */
.tour{position:relative;overflow:hidden;min-height:440px;display:flex;align-items:center;justify-content:center;text-align:center;}
.tour__bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.24) saturate(.5);}
.tour__overlay{position:absolute;inset:0;background:rgba(6,6,6,.5);}
.tour__content{position:relative;z-index:2;padding:80px min(52px,var(--gutter));max-width:900px;}
.tour__title{font-family:var(--font-display);font-size:clamp(46px,7vw,98px);line-height:.9;color:#fff;margin-bottom:16px;}
.tour__sub{font-size:16px;color:rgba(255,255,255,.72);margin-bottom:34px;letter-spacing:.03em;}

/* -----------------------------------------------------------------------------
   PARTNERS  (text logo grid)
   -------------------------------------------------------------------------- */
.partners__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--border-1);margin-top:40px;}
.partner-card{background:var(--color-card);padding:44px 28px;display:flex;align-items:center;justify-content:center;border-top:2px solid transparent;transition:all .3s;}
.partner-card:hover{border-top-color:var(--color-orange);background:var(--color-card-2);}
.partner-card span{font-family:var(--font-display);font-size:28px;letter-spacing:.12em;color:rgba(237,233,227,.45);text-transform:uppercase;transition:color .3s;}
.partner-card:hover span{color:rgba(237,233,227,.85);}
.partner-card--logo{text-decoration:none;cursor:pointer;}
.partner-card--logo img{max-width:180px;max-height:60px;object-fit:contain;filter:grayscale(1) brightness(1.5) contrast(.7);opacity:.55;transition:all .4s;}
.partner-card--logo:hover img{filter:grayscale(0) brightness(1) contrast(1);opacity:1;}

/* partner strip (single horizontal row - legacy) */
.partner-strip{display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap;padding:24px 0;}
.partner-strip__item{display:flex;align-items:center;justify-content:center;padding:16px;text-decoration:none;transition:transform .3s;}
.partner-strip__item:hover{transform:scale(1.08);}
.partner-strip__item img{max-width:140px;max-height:55px;object-fit:contain;filter:grayscale(1) brightness(1.8) contrast(.6);opacity:.45;transition:all .4s;}
.partner-strip__item:hover img{filter:grayscale(0) brightness(1) contrast(1);opacity:1;}

/* partner card grid (3x2 cream cards, matches reference) */
.pt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(255,255,255,.07);max-width:1000px;margin:0 auto;}
.pt-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:36px 40px;background:#f0eee9;text-decoration:none;transition:background .3s;}
.pt-card:hover{background:#e8e5de;}
.pt-card img{max-height:70px;max-width:180px;object-fit:contain;display:block;filter:grayscale(1) contrast(.8);transition:filter .4s;}
.pt-card:hover img{filter:grayscale(0) contrast(1);}
.pt-card__name{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(60,55,50,.5);font-family:var(--font-body);transition:color .4s;}
.pt-card:hover .pt-card__name{color:#C8501A;}

/* -----------------------------------------------------------------------------
   TRANSPORT + MAP
   -------------------------------------------------------------------------- */
.transport{display:grid;grid-template-columns:1.15fr 0.85fr;gap:48px;align-items:stretch;}
.transport__list{display:flex;flex-direction:column;justify-content:space-between;gap:22px;}
.transport__item{border-left:2px solid var(--color-orange);padding-left:18px;}
.transport__mode{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-orange);margin-bottom:6px;}
.transport__row{font-size:14px;color:rgba(237,233,227,.65);line-height:1.6;margin-bottom:4px;}
.transport__row strong{color:var(--color-text);font-weight:600;}
.map-frame{width:100%;min-height:360px;border:1px solid var(--border-2);background:var(--color-card);}
.map-frame iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.3) brightness(.9);}
.security-note{text-align:center;font-family:var(--font-display);font-size:clamp(17px,2.3vw,25px);letter-spacing:.04em;color:rgba(237,233,227,.7);margin-top:48px;max-width:900px;margin-left:auto;margin-right:auto;}
.security-note .accent{color:var(--color-orange);}

/* -----------------------------------------------------------------------------
   TEAM
   -------------------------------------------------------------------------- */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--border-1);}
.team-card{background:var(--color-card);overflow:hidden;}
.team-card__photo{position:relative;aspect-ratio:1/1;overflow:hidden;}
.team-card__photo img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:brightness(.78) saturate(.7);transition:all .5s;}
.team-card:hover .team-card__photo img{filter:brightness(.95) saturate(.9);transform:scale(1.04);}
.team-card__overlay{position:absolute;inset:0;background:rgba(6,6,6,.88);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .4s;}
.team-card:hover .team-card__overlay{opacity:1;}
.team-card__overlay p{font-size:15px;color:rgba(237,233,227,.82);line-height:1.65;text-align:center;}
.team-card__body{padding:18px 16px 22px;}
.team-card__name{font-family:var(--font-display);font-size:21px;letter-spacing:.05em;color:var(--color-text);margin-bottom:3px;}
.team-card__role{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-orange);margin-bottom:10px;}
.team-card__bio{font-size:13px;color:rgba(237,233,227,.45);line-height:1.55;}

/* -----------------------------------------------------------------------------
   PRODUCTION STILLS grid (screenplay detail)
   -------------------------------------------------------------------------- */
.stills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:var(--color-bg);}
.still-item{aspect-ratio:16/9;overflow:hidden;position:relative;}
.still-item img{width:100%;height:100%;object-fit:cover;filter:brightness(.88);transition:transform .65s ease,filter .4s;}
.still-item:hover img{transform:scale(1.05);filter:brightness(1);}
@media(max-width:768px){.stills-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.stills-grid{grid-template-columns:1fr;}}

/* -----------------------------------------------------------------------------
   CAST  (screenplay detail)
   -------------------------------------------------------------------------- */
.cast-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:var(--border-1);}
.cast-card{background:var(--color-card);overflow:hidden;text-align:center;}
.cast-card__photo{aspect-ratio:3/4;overflow:hidden;}
.cast-card__photo img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:grayscale(1) brightness(.85);transition:filter .5s;}
.cast-card:hover .cast-card__photo img{filter:grayscale(0) brightness(1);}
.cast-card__body{padding:16px 12px 20px;}
.cast-card__name{font-family:var(--font-display);font-size:18px;letter-spacing:.04em;color:var(--color-text);}
.cast-card__role{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-orange);margin-top:4px;}

/* SYNOPSIS split (text + poster) */
.synopsis{display:grid;grid-template-columns:1.6fr 1fr;gap:64px;align-items:start;}
.synopsis__meta{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--color-muted);margin-top:24px;}
.synopsis__poster{position:relative;}
.synopsis__poster img{width:100%;display:block;}
.synopsis__poster-tag{position:absolute;top:22px;left:22px;background:var(--color-orange);color:#fff;font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:5px 12px;z-index:6;}
/* balanced variant: equal columns, natural poster proportions */
.synopsis--balanced{grid-template-columns:1fr 1fr;align-items:center;}
/* corner brackets on the poster — shrinks to image size, centres in column */
.synopsis__poster--framed{padding:8px;width:fit-content;margin:0 auto;}
.synopsis__poster--framed::before{content:'';position:absolute;top:0;left:0;width:24px;height:24px;border-top:2px solid var(--color-orange);border-left:2px solid var(--color-orange);pointer-events:none;z-index:5;}
.synopsis__poster--framed::after{content:'';position:absolute;bottom:0;right:0;width:24px;height:24px;border-bottom:2px solid var(--color-orange);border-right:2px solid var(--color-orange);pointer-events:none;z-index:5;}
/* constrain image height so poster doesn't dwarf the text column */
.synopsis__poster--framed img{max-height:560px;width:auto;display:block;}

/* trailer */
.trailer__frame{width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--border-1);position:relative;overflow:hidden;}
.trailer__frame img{width:100%;height:100%;object-fit:cover;filter:brightness(.7);}
.trailer__frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;display:block;}
.trailer__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:50%;background:rgba(200,80,26,.92);display:flex;align-items:center;justify-content:center;transition:transform .3s;}
.trailer__frame:hover .trailer__play{transform:translate(-50%,-50%) scale(1.1);}
.trailer__play::after{content:'';border-style:solid;border-width:14px 0 14px 24px;border-color:transparent transparent transparent #fff;margin-left:5px;}

/* -----------------------------------------------------------------------------
   CONTACT FORM
   -------------------------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:stretch;max-width:1100px;margin-left:auto;margin-right:auto;}
.contact-form{display:flex;flex-direction:column;gap:16px;}
.contact-form label{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--color-muted);margin-bottom:6px;display:block;}
.contact-form input,.contact-form textarea{
  width:100%;background:var(--color-card);border:1px solid var(--border-2);color:var(--color-text);
  padding:14px 16px;font-family:var(--font-body);font-size:15px;transition:border-color .2s;
}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--color-orange);}
.contact-form textarea{resize:vertical;min-height:130px;}
.contact-people{display:flex;flex-direction:column;justify-content:space-between;gap:24px;height:100%;}
.contact-person{display:flex;gap:22px;align-items:center;}
.contact-person img{width:118px;height:150px;object-fit:cover;object-position:center top;border:1px solid var(--border-2);flex-shrink:0;}
.contact-person__role{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--color-orange);margin-bottom:6px;}
.contact-person__name{font-family:var(--font-display);font-size:30px;letter-spacing:.04em;color:var(--color-text);margin-bottom:6px;}
.contact-person__info{font-size:13px;color:rgba(237,233,227,.55);}
.contact-person__info a{color:rgba(237,233,227,.7);text-decoration:none;}
.contact-direct{margin-top:8px;font-size:14px;color:rgba(237,233,227,.6);border-top:1px solid var(--border-1);padding-top:24px;}
.contact-direct a{color:var(--color-orange);text-decoration:none;}

/* -----------------------------------------------------------------------------
   FEATURE BANNER  (want to know more / more about us)
   -------------------------------------------------------------------------- */
.feature-banner{position:relative;overflow:hidden;min-height:380px;display:flex;align-items:center;justify-content:center;text-align:center;}
.feature-banner__bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.3) saturate(.6);}
.feature-banner__overlay{position:absolute;inset:0;background:rgba(6,6,6,.45);}
.feature-banner__content{position:relative;z-index:2;padding:70px min(52px,var(--gutter));max-width:860px;}
.feature-banner__title{font-family:var(--font-display);font-size:clamp(38px,5.5vw,76px);line-height:.92;color:#fff;margin-bottom:14px;letter-spacing:.025em;}
.feature-banner__sub{font-size:16px;color:rgba(255,255,255,.78);margin-bottom:32px;line-height:1.6;}

/* -----------------------------------------------------------------------------
   TESTIMONIALS  (client quote carousel — crossfade auto-rotation)
   -------------------------------------------------------------------------- */
.testimonials{background:var(--color-bg-alt);padding:100px var(--gutter);text-align:center;position:relative;overflow:hidden;}
.testimonials__hd{margin-bottom:64px;}
.testimonials__eyebrow{font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--color-orange);margin-bottom:14px;}
.testimonials__title{font-family:var(--font-display);font-size:clamp(40px,5.5vw,74px);line-height:.92;letter-spacing:.02em;color:var(--color-text);}
.testimonials__carousel{display:flex;align-items:center;gap:32px;max-width:1040px;margin:0 auto;}
.testimonials__viewport{flex:1;position:relative;}
.testimonials__watermark{position:absolute;top:-56px;left:50%;transform:translateX(-50%);font-family:var(--font-serif);font-size:320px;line-height:1;color:rgba(200,80,26,.055);pointer-events:none;user-select:none;z-index:0;}
.testimonials__track{display:grid;position:relative;z-index:1;}
.testimonial{grid-area:1/1;opacity:0;transition:opacity .85s ease;pointer-events:none;padding:28px 0;}
.testimonial.is-active{opacity:1;pointer-events:auto;}
.testimonial__text{font-family:var(--font-serif);font-size:clamp(18px,2.1vw,26px);font-style:italic;font-weight:300;line-height:1.75;color:rgba(237,233,227,.92);letter-spacing:.01em;max-width:840px;margin:0 auto;}
.testimonial__attr{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:38px;}
.testimonial__sep{width:36px;height:1px;background:var(--color-orange);display:block;margin-bottom:14px;}
.testimonial__name{font-family:var(--font-display);font-size:22px;letter-spacing:.1em;color:var(--color-text);display:block;}
.testimonial__role{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--color-orange);display:block;}
.testimonials__arrow{width:54px;height:54px;border:1px solid var(--border-2);background:transparent;color:var(--color-muted-2);font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;cursor:pointer;}
.testimonials__arrow:hover{border-color:var(--color-orange);color:var(--color-orange);}
.testimonials__footer{margin-top:52px;display:flex;flex-direction:column;align-items:center;gap:18px;}
.testimonials__dots{display:flex;justify-content:center;gap:10px;}
.testimonials__dot{width:7px;height:7px;border-radius:50%;background:var(--border-2);border:none;cursor:pointer;transition:all .35s;padding:0;}
.testimonials__dot.is-active{background:var(--color-orange);transform:scale(1.55);}
.testimonials__progress{width:200px;height:1px;background:var(--border-1);overflow:hidden;}
.testimonials__progress-bar{height:100%;background:var(--color-orange);width:0;}
@keyframes t-progress{from{width:0}to{width:100%}}
.testimonials__progress-bar.is-running{animation:t-progress 7s linear forwards;}
@media(max-width:1024px){.testimonials__watermark{font-size:220px;top:-32px;}}
@media(max-width:768px){
  .testimonials{padding:72px var(--gutter);}
  .testimonials__watermark{font-size:160px;top:-20px;}
  .testimonials__arrow{display:none;}
  .testimonials__carousel{gap:0;}
  .testimonial__text{font-size:clamp(17px,4.5vw,21px);}
}
@media(max-width:480px){.testimonials{padding:56px var(--gutter);}}

/* =============================================================================
   RESPONSIVE — COMPONENTS
   ============================================================================= */
@media(max-width:1024px){
  .services{grid-template-columns:repeat(2,1fr);}
  .intro{grid-template-columns:1fr;gap:32px;}
  .spotlight__grid,.split,.synopsis,.contact-grid,.transport{grid-template-columns:1fr;gap:44px;}
  .info-cards{grid-template-columns:repeat(2,1fr);}
  .facility-services{grid-template-columns:repeat(3,1fr);}
  .team-grid,.cast-grid{grid-template-columns:repeat(3,1fr);}
  .stage-grid{grid-template-columns:repeat(3,1fr);}
  .poster-card{flex:0 0 calc((100% - 42px)/4);}
  .partners__grid{grid-template-columns:repeat(2,1fr);}
  .pt-grid{grid-template-columns:repeat(2,1fr);}
  .split__media > img{height:400px;}
  .channel-card{flex:0 0 calc((100% - 36px)/3);}
  .hist-card{flex:0 0 33.333%;}
  .facility-gallery--portrait{max-width:100%;}
}
@media(max-width:768px){
  .services,.about__cards,.media-cards{grid-template-columns:1fr;}
  .stage-grid{grid-template-columns:repeat(2,1fr);}
  .facility-services{grid-template-columns:repeat(2,1fr);}
  .info-cards{grid-template-columns:1fr;}
  .know-split{grid-template-columns:1fr;}
  .team-grid,.cast-grid{grid-template-columns:repeat(2,1fr);}
  .pricing{grid-template-columns:1fr;}
  .poster-card{flex:0 0 calc((100% - 14px)/2);}
  .credits__head{flex-direction:column;align-items:flex-start;gap:12px;}
  .service-card{min-height:380px;}
  .spec-bar{grid-template-columns:1fr;}
  .channel-card{flex:0 0 100%;}
  .hist-card{flex:0 0 50%;}
}
@media(max-width:480px){
  .team-grid,.cast-grid,.facility-services{grid-template-columns:1fr;}
  .poster-card{flex:0 0 calc((100% - 7px)/2);}
  /* Stack contact people vertically and centre everything */
  .contact-person{flex-direction:column;text-align:center;align-items:center;}
  .hist-card{flex:0 0 100%;}
  /* Partners grid: single column on small phones so logos aren't clipped */
  .pt-grid{grid-template-columns:1fr;}
  .pt-card{padding:24px 20px;}
  /* Stage grid: single column so headings don't wrap */
  .stage-grid{grid-template-columns:1fr;}
  /* Timeline arrows: meet 44px touch-target minimum */
  .hist-btn{width:44px;height:44px;}
}

/* =============================================================================
   MOBILE TAP OVERLAY
   Touch affordance for all hover-overlay card types.
   JS (initTapOverlay) detects touch devices and adds .is-tapped on first tap;
   second tap follows the link. Icon disappears once overlay is open.
   ============================================================================= */

/* ⓘ info icon — only on touch/mobile devices */
@media(hover:none),(pointer:coarse),(max-width:768px){
  .media-card,
  .hist-card,
  .stage-card,
  .team-card{ cursor:pointer; }

  .media-card::after,
  .hist-card::after,
  .stage-card::after,
  .team-card::after{
    content:'i';
    position:absolute;
    top:12px;right:12px;
    width:26px;height:26px;
    background:var(--color-orange);
    color:#fff;
    border-radius:50%;
    font-size:14px;font-style:italic;
    font-family:Georgia,serif;font-weight:700;
    line-height:26px;text-align:center;
    z-index:10;pointer-events:none;
    opacity:.92;
    transition:opacity .3s;
  }

  /* Hide icon once overlay is open */
  .media-card.is-tapped::after,
  .hist-card.is-tapped::after,
  .stage-card.is-tapped::after,
  .team-card.is-tapped::after{ opacity:0; }
}

/* .is-tapped overlay states — JS only applies this class on touch devices */
.media-card.is-tapped .media-card__hover-overlay{ opacity:1; }
.media-card.is-tapped .media-card__body{ opacity:0; }

.hist-card.is-tapped .hist-card__img{ filter:brightness(.5) saturate(.65); }
.hist-card.is-tapped .hist-card__foot{ opacity:0; }
.hist-card.is-tapped .hist-card__overlay{ opacity:1; }

.stage-card.is-tapped .stage-card__overlay{ opacity:1; }

.team-card.is-tapped .team-card__photo img{ filter:brightness(.45) saturate(.5); }
.team-card.is-tapped .team-card__overlay{ opacity:1; }

/* =============================================================================
   BEHIND THE SCENES GALLERY
   ============================================================================= */
.bts-gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;}
.bts-gallery__item{position:relative;overflow:hidden;aspect-ratio:4/3;display:block;}
.bts-gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease,filter .45s ease;filter:brightness(.85) saturate(.75);}
.bts-gallery__item:hover img{transform:scale(1.06);filter:brightness(1) saturate(1);}
@media(max-width:1024px){.bts-gallery{grid-template-columns:repeat(4,1fr);}}
@media(max-width:768px){.bts-gallery{grid-template-columns:repeat(3,1fr);gap:4px;}}
@media(max-width:480px){.bts-gallery{grid-template-columns:repeat(2,1fr);}}
.bts-gallery__cta{text-align:center;padding-top:56px;}
.bts-gallery__cta p{font-size:clamp(15px,2vw,18px);color:var(--color-muted);margin-bottom:24px;letter-spacing:.04em;}
/* cursor hint */
.bts-gallery__item{cursor:zoom-in;}

/* LIGHTBOX */
.lightbox{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.92);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;}
.lightbox.is-open{opacity:1;visibility:visible;}
.lightbox__img{max-width:90vw;max-height:88vh;object-fit:contain;display:block;transition:transform .3s ease;box-shadow:0 8px 60px rgba(0,0,0,.6);}
.lightbox__close{position:absolute;top:20px;right:24px;width:44px;height:44px;background:none;border:1px solid rgba(255,255,255,.25);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s;}
.lightbox__close:hover{border-color:var(--color-orange);color:var(--color-orange);}
.lightbox__prev,.lightbox__next{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;background:none;border:1px solid rgba(255,255,255,.25);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s;}
.lightbox__prev{left:20px;}
.lightbox__next{right:20px;}
.lightbox__prev:hover,.lightbox__next:hover{border-color:var(--color-orange);color:var(--color-orange);}
.lightbox__counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.2em;color:rgba(255,255,255,.45);font-family:var(--font-body);}
@media(max-width:768px){.lightbox__prev{left:8px;}.lightbox__next{right:8px;}.lightbox__img{max-width:96vw;max-height:82vh;}}

/* =============================================================================
   READABILITY / TYPE SCALE  (larger, industrial-standard sizing)
   Appended last so it overrides the component sizes defined above.
   ============================================================================= */
body{font-size:17px;}

/* Eyebrows, labels, buttons */
.eyebrow{font-size:19px;}
.btn{font-size:12.5px;}

/* Body copy */
.lede{font-size:17px;line-height:1.85;}
.intro__body{font-size:17px;}

/* Hero */
.hero__sub{font-size:clamp(17px,2.2vw,21px);}
.hero__eyebrow{font-size:12px;}

/* Services */
.service-card__tag{font-size:11px;}
.service-card__desc{font-size:16px;}
.service-card__arrow{font-size:12.5px;}

/* Promo / feature banners */
.promo__eyebrow{font-size:12px;}
.promo__sub{font-size:18px;}
.feature-banner__sub{font-size:18px;}

/* Credits */
.credits__note{font-size:14px;}
.poster-card__title{font-size:13px;}

/* Showreel */
.showreel__label{font-size:20px;}
.showreel__sub{font-size:15px;}

/* About cards */
.about-card__tag{font-size:11px;}
.about-card__desc{font-size:15px;}

/* Spotlight */
.spotlight__pull{font-size:21px;}
.pill{font-size:11.5px;}
.spec-bar__key{font-size:12px;}

/* Pricing */
.price-card__line{font-size:15.5px;}
.price-card__per{font-size:11px;}
.price-card__inc{font-size:11px;}
.price-card__list li{font-size:15px;}
.price-card__btn{font-size:12px;}

/* Info cards / know list */
.info-card__a{font-size:15.5px;}
.know-list li{font-size:16px;}

/* Media cards */
.media-card__tag{font-size:11px;}
.media-card__desc{font-size:15px;}

/* History strip */
.hist-card__ov-text{font-size:15px;}

/* Facilities */
.stage-card__spec{font-size:14px;}
.stage-card__desc{font-size:15.5px;}
.facility-card__name{font-size:13px;}
.facility-card__desc{font-size:15px;}

/* Transport */
.transport__mode{font-size:12.5px;}
.transport__row{font-size:16px;}

/* Team */
.team-card__role{font-size:11px;}
.team-card__bio{font-size:14.5px;}

/* Cast */
.cast-card__role{font-size:11px;}

/* Contact */
.contact-form label{font-size:12.5px;}
.contact-form input,.contact-form textarea{font-size:16.5px;}
.contact-person__role{font-size:12px;}
.contact-person__info{font-size:16px;}
.contact-direct{font-size:16.5px;line-height:1.7;}

/* Team photo colour correction — overrides base brightness(.78) saturate(.7) */
.team-card__photo img { filter: brightness(.82) saturate(1.1) contrast(1.05); }
.team-card:hover .team-card__photo img { filter: brightness(.95) saturate(1.1) contrast(1.05); }
.team-card.is-tapped .team-card__photo img { filter: brightness(.45) saturate(.7) contrast(1.0); }

/* Timeline: ensure year labels stay visible on mobile when selected / pinned */
@media(max-width:768px){
  .hist-rail__year{font-size:13px;}
  .hist-rail__item.is-pinned .hist-rail__year,
  .hist-rail__item.is-active .hist-rail__year{color:var(--color-orange);opacity:1;}
  /* Reduce the blank-space gap between Meet The Team section and the history section */
  .hist-section{padding-top:56px;}
}

/* Mobile: history timeline = ONE card per view, rail perfectly synced (line + dot + year kept) */
@media(max-width:600px){
  .hist-clip{ padding:0; -webkit-mask-image:none !important; mask-image:none !important; }
  .hist-rail-outer{ padding:0; margin-bottom:16px; -webkit-mask-image:none !important; mask-image:none !important; }
  .hist-rail-outer::before{ left:0; right:0; }
  .hist-card{ flex:0 0 100% !important; }
  .hist-rail__item{ flex:0 0 100% !important; }
}

/* Touch/mobile: don't let a sticky :hover keep a card overlay open after a re-tap.
   Where the tap system is active, reveal depends ONLY on the tap/pin state, so a
   second tap (which removes .is-tapped / .is-pinned) reliably closes the overlay. */
@media(hover:none),(pointer:coarse),(max-width:768px){
  .media-card:not(.is-tapped):hover .media-card__hover-overlay,
  .stage-card:not(.is-tapped):hover .stage-card__overlay,
  .team-card:not(.is-tapped):hover .team-card__overlay,
  .hist-card:not(.is-tapped):not(.is-pinned):hover .hist-card__overlay{ opacity:0; }
  /* keep the body/image in their resting state too when not actively tapped */
  .media-card:not(.is-tapped):hover .media-card__body{ opacity:1; }
  .team-card:not(.is-tapped):hover .team-card__photo img{ filter:none; }
  .hist-card:not(.is-tapped):not(.is-pinned):hover .hist-card__img{ filter:brightness(.75) saturate(.78); transform:none; }
}

/* Footer social icons rendered as <img> (Media Library managed) */
.site-footer__social a img{width:16px;height:16px;object-fit:contain;display:block;}
.site-footer__social a:hover img{opacity:.85;}