/* =========================================================================
   enhance.css — shared interactive UI layer for the subpages (matches the
   homepage's cards/buttons/tilt), WITHOUT the animated see-through background.
   Subpages keep their own solid section backgrounds.
   Pairs with: crystal.js, reactive.js, scrollbar.js.
   ========================================================================= */

/* hide native scrollbar (custom bar comes from scrollbar.js) */
html{scrollbar-width:none}
::-webkit-scrollbar{width:0;height:0}
/* keep the banner image clipped so its parallax never reveals edges */
.banner{overflow:hidden}

/* match the homepage: dark footer with no borders, nav with no bottom border */
.foot{background:#080808 !important;-webkit-backdrop-filter:none;backdrop-filter:none;border:0 !important;box-shadow:none !important}
.nav,.nav.scrolled{border-bottom:0 !important}

/* ---------- crystal glass accents ---------- */
.card,.price-card,.form-card,.ribbon,.modal-box{
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02)) !important;
  -webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);
  border:1px solid rgba(255,255,255,.12) !important;box-shadow:0 1px 2px rgba(0,0,0,.10) !important}
.price-card.feat{box-shadow:inset 0 0 0 1px rgba(217,164,65,.5),0 1px 2px rgba(0,0,0,.10) !important}
/* forms: lighter, warmer tint so they're pleasant (not pitch-black) */
.form-card{background:
    radial-gradient(120% 90% at 50% 0%,rgba(217,164,65,.06),transparent 60%),
    linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.035)) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 40px rgba(0,0,0,.28) !important}

/* cursor-following border glow (cards, forms, info panel) */
.card,.price-card,.track,.vidc,.form-card,.show-detail{position:relative}
.card::after,.price-card::after,.track::after,.vidc::after,.form-card::after,.show-detail::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background:radial-gradient(190px circle at var(--mx,50%) var(--my,50%),rgba(232,200,125,.95),rgba(130,175,255,.42) 42%,transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .4s var(--ease);pointer-events:none;z-index:4}
.card:hover::after,.price-card:hover::after,.track:hover::after,.vidc:hover::after,
.form-card:hover::after,.show-detail:hover::after{opacity:1}
/* large elements: inset the ring (avoids overflow-clip) + wider glow so more of the border lights up */
.form-card::after,.show-detail::after{inset:1px;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(232,200,125,.98),rgba(130,175,255,.45) 46%,transparent 74%)}

/* ---------- button shine + cursor border glow ---------- */
.btn-gold,.btn-primary,.btn-ghost{position:relative;overflow:hidden;isolation:isolate}
.btn-gold::after,.btn-primary::after,.btn-ghost::after{content:"";position:absolute;top:0;left:-140%;width:65%;height:100%;
  background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.55),transparent 75%);transform:skewX(-18deg);pointer-events:none;z-index:1}
.btn-ghost::after{background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.28),transparent 75%)}
.btn-gold:hover::after,.btn-primary:hover::after,.btn-ghost:hover::after{animation:btnShine .8s var(--ease)}
@keyframes btnShine{from{left:-140%}to{left:150%}}
.btn{position:relative}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.3px;
  background:radial-gradient(150px circle at var(--mx,50%) var(--my,50%),rgba(232,200,125,.98),rgba(130,175,255,.42) 45%,transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s var(--ease);pointer-events:none;z-index:2}
.btn:hover::before{opacity:1}

/* tilt only — no raise/lift on hover (buttons use the JS magnetic transform) */
.card:hover,.price-card:hover,.track:hover,.vidc:hover,.stat:hover,.btn:hover{transform:none}

/* service cards: icon + title one row */
.g-4 .card{display:flex !important;flex-wrap:wrap;align-items:center;gap:14px}
.g-4 .card .ic{margin-bottom:0 !important;flex:0 0 auto}
.g-4 .card h3{margin:0 !important;flex:1 1 auto;min-width:0}
.g-4 .card p{flex-basis:100%;margin:2px 0 0 !important}
.grid.g-3 .card h3{margin-top:12px}

/* nav brand hover flourish: scale + glow only (no rotation) */
.nav .brand img{transition:transform .45s var(--ease),filter .45s ease}
.nav .brand:hover img{transform:scale(1.12);filter:drop-shadow(0 0 9px rgba(217,164,65,.75))}
.nav .brand b{display:inline-block;transform-origin:left center;transition:transform .45s var(--ease),color .35s ease}
.nav .brand:hover b{transform:scaleX(1.1);color:var(--acc)}
.nav-links a.active::after{width:0 !important}

/* metrics count-up: constant 0.9 opacity (no fade) while the number rolls */
.stat b,.stat b.rolling{opacity:.9}

/* ---------- end-note section ---------- */
.endnote{text-align:center;padding:clamp(72px,11vw,140px) 0}
.endnote h2{font-family:"Advent Pro";font-size:clamp(1.5rem,4.2vw,2.8rem);letter-spacing:.02em;line-height:1;
  background:linear-gradient(110deg,#fff 20%,var(--acc) 50%,#fff 80%);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;background-size:200% auto;animation:endshine 7s linear infinite}
@keyframes endshine{to{background-position:200% center}}
.endnote p{color:var(--f2);letter-spacing:.34em;text-transform:uppercase;font-size:.72rem;margin-top:16px}
section.endnote{position:relative}
section.endnote::before,section.endnote::after{content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line2),transparent)}
section.endnote::before{top:0}
section.endnote::after{bottom:0}

/* ---------- enquiry form: landscape width + two columns ---------- */
.enquiry-wrap{max-width:1060px;margin:0 auto}
@media(min-width:820px){
  .enquiry-wrap .form-card{display:grid;grid-template-columns:1fr 1fr;column-gap:26px;align-items:start}
  .enquiry-wrap .form-card > .field.row,
  .enquiry-wrap .form-card > button,
  .enquiry-wrap .form-card > .form-msg,
  .enquiry-wrap .form-card > .form-note{grid-column:1/-1}
  .enquiry-wrap .form-card > .field textarea{min-height:96px}
}

/* ---------- animated image carousel (About) ---------- */
.media-carousel{position:relative;overflow:hidden;border-radius:18px;aspect-ratio:4/3;min-height:300px;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.media-carousel .mc-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease)}
.media-carousel .mc-slide.on{opacity:1}
.media-carousel .mc-slide img{width:100%;height:100%;object-fit:cover;border:0;border-radius:0;
  transform:scale(1.06);transition:transform 6s ease}
.media-carousel .mc-slide.on img{transform:scale(1.16)}
.media-carousel::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55))}
.media-carousel .mc-cap{position:absolute;left:18px;bottom:16px;z-index:2;color:#fff;
  font-size:.82rem;letter-spacing:.04em;opacity:0;transform:translateY(10px);transition:.4s var(--ease);
  text-shadow:0 2px 10px rgba(0,0,0,.6)}
.media-carousel .mc-slide.on .mc-cap{opacity:.85}
.media-carousel:hover .mc-slide.on .mc-cap{opacity:1;transform:none}
.media-carousel .mc-dots{position:absolute;right:16px;bottom:18px;z-index:2;display:flex;gap:6px}
.media-carousel .mc-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);
  cursor:pointer;transition:width .3s var(--ease),background .3s}
.media-carousel .mc-dots i.on{background:var(--acc);width:20px;border-radius:4px}

/* ---------- editorial article section (drop cap + newspaper columns + pull quote) ---------- */
.article{max-width:1000px;margin:0 auto}
.art-head{text-align:center;margin-bottom:clamp(32px,4.5vw,56px)}
.art-head h2{font-size:clamp(1.9rem,4.6vw,3.3rem);line-height:1.04;margin:.4rem 0 0}
.art-head .art-meta{margin-top:16px;color:var(--f3);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase}
.art-head .art-meta::before,.art-head .art-meta::after{content:"—";color:var(--acc);margin:0 .6em}
.art-body{column-count:2;column-gap:clamp(32px,4vw,56px);color:var(--f1);font-size:1.04rem;line-height:1.78}
.art-body p{margin:0 0 1.25rem}
.art-body .dropcap::first-letter{float:left;font-family:"Advent Pro",sans-serif;font-size:4.6rem;line-height:.72;
  padding:8px 14px 0 0;color:var(--acc)}
.art-body .pull{column-span:all;text-align:center;max-width:780px;margin:clamp(26px,3.5vw,44px) auto;padding:22px 0;
  font-family:"Advent Pro",sans-serif;font-size:clamp(1.4rem,2.7vw,2.1rem);line-height:1.3;color:#fff;
  border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.art-body .pull::before{content:"“ ";color:var(--acc)}
.art-body .pull::after{content:" ”";color:var(--acc)}
@media(max-width:720px){.art-body{column-count:1}}

/* ---------- Powered By: two-row opposite-scroll marquee ---------- */
.tools-marquee{display:flex;flex-direction:column;gap:16px;margin-top:8px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.tm-row{overflow:hidden}
.tm-track{display:inline-flex;align-items:center;width:max-content;will-change:transform;animation:tmL 38s linear infinite}
.tm-track.rev{animation:tmR 46s linear infinite}
.tm-track span{padding:0 clamp(18px,2.6vw,38px);white-space:nowrap;color:var(--f2);letter-spacing:.02em;
  font-family:"Advent Pro",sans-serif;font-size:clamp(1.05rem,2vw,1.65rem);transition:color .3s var(--ease)}
.tm-track span::after{content:"✦";margin-left:clamp(18px,2.6vw,38px);color:var(--acc);opacity:.5;font-size:.66em;vertical-align:middle}
.tm-track span:hover{color:#fff}
.tools-marquee:hover .tm-track{animation-play-state:paused}
@keyframes tmL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes tmR{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ---------- Studio fan / flip photo carousel ---------- */
.fan{position:relative;height:420px;perspective:1500px;margin:0 auto;max-width:100%}
.fan-item{position:absolute;top:24px;left:50%;width:224px;height:306px;margin-left:-112px;
  border-radius:16px;overflow:hidden;cursor:pointer;background:#0e0e0e;transform-origin:50% 142%;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 60px rgba(0,0,0,.55);
  transition:transform .6s var(--ease),filter .6s var(--ease),box-shadow .6s var(--ease)}
.fan-item img{width:100%;height:100%;object-fit:cover;display:block}
.fan-item.on{box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px rgba(217,164,65,.45)}
.fan-cap{position:absolute;left:0;right:0;bottom:34px;z-index:200;text-align:center;color:#fff;
  font-family:"Advent Pro",sans-serif;font-size:1.05rem;letter-spacing:.06em;text-shadow:0 2px 12px rgba(0,0,0,.85)}
.fan-hint{position:absolute;left:0;right:0;bottom:8px;z-index:200;text-align:center;color:var(--f3);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7;pointer-events:none}
.fan-hint i{color:var(--acc)}
@media(max-width:600px){.fan{height:360px}.fan-item{width:184px;height:252px;margin-left:-92px}}

/* ---------- The Session — studio timeline (editorial, distinct from the
   academy's newspaper article: alternating steps on a glowing gold spine) ---------- */
.sflow .tl{position:relative;max-width:940px;margin:0 auto;padding:10px 0}
.sflow .tl-line{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(217,164,65,.65) 12%,rgba(217,164,65,.65) 88%,transparent);
  box-shadow:0 0 18px rgba(217,164,65,.35)}
.sflow .tl-item{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);
  align-items:center;padding:clamp(18px,2.6vw,30px) 0}
.sflow .tl-num{font-family:"Advent Pro",sans-serif;font-size:clamp(3rem,7vw,5.4rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(217,164,65,.75);text-align:right;
  align-self:center;justify-self:end;letter-spacing:.02em;transition:.4s var(--ease)}
.sflow .tl-item:nth-child(odd) .tl-num{order:2;text-align:left;justify-self:start}
.sflow .tl-item:hover .tl-num{color:var(--acc);-webkit-text-stroke:0;
  text-shadow:0 0 30px rgba(217,164,65,.45)}
.sflow .tl-card{background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.11);border-radius:16px;padding:clamp(20px,2.6vw,30px);
  transition:border-color .35s var(--ease),transform .35s var(--ease)}
.sflow .tl-item:hover .tl-card{border-color:rgba(217,164,65,.45);transform:translateY(-3px)}
.sflow .tl-card h3{font-size:1.25rem;margin-bottom:.45rem;font-family:'Poppins';font-weight:600}
.sflow .tl-card p{color:var(--f2);font-size:.94rem;margin:0;line-height:1.65}
/* node dot on the spine */
.sflow .tl-item::before{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;
  transform:translate(-50%,-50%);border-radius:50%;background:var(--b0);
  border:2px solid var(--acc);box-shadow:0 0 0 5px rgba(217,164,65,.14);z-index:1}
.sflow .tl-pull{margin:clamp(36px,5vw,60px) auto 0;max-width:720px;text-align:center;
  font-family:"Advent Pro",sans-serif;font-size:clamp(1.4rem,3.2vw,2.2rem);line-height:1.3;color:#fff}
.sflow .tl-pull::before{content:"“ ";color:var(--acc)}
.sflow .tl-pull::after{content:" ”";color:var(--acc)}
@media(max-width:760px){
  .sflow .tl-line{left:26px}
  .sflow .tl-item{grid-template-columns:auto 1fr;gap:18px;padding:14px 0 14px 0}
  .sflow .tl-item::before{left:26px}
  .sflow .tl-num{font-size:2rem;min-width:56px;text-align:center;justify-self:center;padding-left:0;
    order:0 !important}
  .sflow .tl-item:nth-child(odd) .tl-num{text-align:center}
}

/* ---------- Our Approach — showcase (list + shared detail, auto-cycles) ---------- */
.show{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px;align-items:stretch}
.show-list{position:relative;display:flex;flex-direction:column;gap:8px;padding-left:6px}
/* the gold marker slides between the active items */
.show-marker{position:absolute;left:0;top:0;width:3px;height:0;border-radius:3px;pointer-events:none;
  background:linear-gradient(180deg,var(--acc),var(--acc2));box-shadow:0 0 14px rgba(217,164,65,.7);
  transition:transform .5s cubic-bezier(.65,0,.35,1),height .5s cubic-bezier(.65,0,.35,1)}
.show-item{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;
  padding:15px 18px;border-radius:12px;border:1px solid transparent;background:rgba(255,255,255,.02);
  color:var(--f1);font-family:inherit;font-size:1rem;position:relative;overflow:hidden;
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
.show-item .si-num{font-family:"Advent Pro",sans-serif;font-size:.95rem;color:var(--f3);min-width:1.5em;transition:color .3s var(--ease)}
.show-item .si-ic{width:38px;height:38px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;
  background:rgba(217,164,65,.12);color:var(--acc);font-size:1.02rem;transition:transform .55s var(--ease),background .3s,color .3s}
.show-item .si-t{font-weight:500}
.show-item:hover{background:rgba(255,255,255,.05)}
.show-item.on{background:linear-gradient(90deg,rgba(217,164,65,.13),rgba(255,255,255,.02));color:#fff;transform:translateX(5px)}
.show-item.on .si-num{color:var(--acc)}
.show-item.on .si-ic{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#12100a;transform:rotateY(360deg)}
.show-item .si-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--acc),transparent)}
.show-item.on .si-bar{animation:showBar 4.5s linear}
.show:hover .show-item .si-bar{animation-play-state:paused}
@keyframes showBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.show-detail{position:relative;border-radius:18px;min-height:340px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12)}
/* gold edge = where the flow lands */
.show-detail::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;z-index:4;
  background:linear-gradient(180deg,transparent,var(--acc),transparent)}
.show-panel{position:absolute;inset:0;padding:clamp(26px,3.5vw,44px);opacity:0;
  transition:opacity .4s var(--ease);pointer-events:none;display:flex;flex-direction:column}
.show-panel.on{opacity:1;pointer-events:auto}
/* light sweep across the panel when it becomes active */
.show-panel::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;transform:translateX(-120%);opacity:0;
  background:linear-gradient(100deg,transparent 32%,rgba(217,164,65,.18),transparent 68%)}
.show-panel.on::after{animation:pSweep .85s var(--ease)}
@keyframes pSweep{0%{transform:translateX(-120%);opacity:1}100%{transform:translateX(120%);opacity:0}}
/* staggered content entrance */
.show-panel .p-ic,.show-panel h3,.show-panel .p-desc,.show-panel ul{opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.show-panel.on .p-ic{opacity:1;transform:none;transition-delay:.06s}
.show-panel.on h3{opacity:1;transform:none;transition-delay:.14s}
.show-panel.on .p-desc{opacity:1;transform:none;transition-delay:.22s}
.show-panel.on ul{opacity:1;transform:none;transition-delay:.3s}
.show-panel .p-num{position:absolute;top:20px;right:30px;z-index:1;font-family:"Advent Pro",sans-serif;font-size:4rem;
  color:var(--acc);opacity:0;line-height:1;transform:scale(.85);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.show-panel.on .p-num{opacity:.14;transform:none;transition-delay:.1s}
/* icon + title share a header row */
.show-panel .p-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.show-panel .p-ic{width:58px;height:58px;flex:0 0 auto;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(217,164,65,.22),rgba(217,164,65,.08));border:1px solid rgba(217,164,65,.3);
  color:var(--acc);font-size:1.55rem;box-shadow:0 6px 20px rgba(217,164,65,.15)}
.show-panel h3{font-size:clamp(1.35rem,2.3vw,1.95rem);margin:0;line-height:1.15}
.show-panel .p-desc{color:var(--f1);font-size:1rem;line-height:1.65;margin:0 0 auto}
.show-panel ul{list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.08)}
.show-panel ul li{display:flex;gap:10px;align-items:flex-start;color:var(--f2);font-size:.92rem;padding:5px 0}
.show-panel ul li i{color:var(--acc);margin-top:3px;font-size:.78rem}
@media(max-width:820px){.show{grid-template-columns:1fr}.show-detail{min-height:320px}.show-marker{display:none}}