/* ============ NEXORA — corporate services, considered ============ */

:root{
  --bg:#04060a;
  --bg-2:#070a10;
  --ink:#ece5d5;
  --ink-dim:rgba(236,229,213,.56);
  --ink-faint:rgba(236,229,213,.34);
  --gold:#cfa96f;
  --gold-soft:rgba(207,169,111,.45);
  --line:rgba(236,229,213,.14);
  --glass-bg:linear-gradient(152deg, rgba(13,17,25,.55), rgba(13,17,25,.28) 55%, rgba(207,169,111,.13));
  --sans:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --display:"Archivo Black", "Inter", Impact, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html,body{background:var(--bg)}
body{
  font-family:var(--sans);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(207,169,111,.35);color:#fff}
a{color:inherit;text-decoration:none}
img,video{display:block}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#05070b}
::-webkit-scrollbar-thumb{background:#1d2433;border-radius:6px;border:2px solid #05070b}

/* ---------- atmosphere ---------- */
.grain{
  position:fixed;inset:-40px;z-index:80;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(2) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-14px,9px)}
  50%{transform:translate(9px,-14px)}75%{transform:translate(-7px,-7px)}100%{transform:translate(12px,10px)}
}
.vignette{
  position:fixed;inset:0;z-index:79;pointer-events:none;
  background:radial-gradient(120% 92% at 50% 46%, transparent 58%, rgba(2,3,6,.42) 100%);
}

/* ---------- loader ---------- */
#loader{
  position:fixed;inset:0;z-index:200;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity .9s ease, visibility .9s;
}
#loader.done{opacity:0;visibility:hidden}
.loader-mark{
  font-family:var(--display);font-weight:400;font-size:clamp(19px,2.3vw,28px);
  letter-spacing:.42em;text-indent:.42em;color:var(--ink);
  animation:breathe 2.6s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
.loader-line{width:min(300px,60vw);height:1px;background:rgba(236,229,213,.14);overflow:hidden}
.loader-line i{display:block;height:100%;width:0%;background:var(--gold);transition:width .3s ease}
.loader-hint{font-size:10px;letter-spacing:.42em;text-indent:.42em;color:var(--ink-faint)}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(18px,3vw,40px);
  opacity:0;transform:translateY(-12px);
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:400;font-size:13.5px;letter-spacing:.3em;
  text-shadow:0 1px 24px rgba(0,0,0,.6);
}
.brand-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px 2px var(--gold-soft)}
.pills{
  position:absolute;left:50%;transform:translateX(-50%);
  display:flex;gap:clamp(6px,1.4vw,20px);
}
.pills a{
  position:relative;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);
  padding:8px 4px;transition:color .35s ease;
  text-shadow:0 1px 20px rgba(0,0,0,.6);
}
.pills a::after{
  content:"";position:absolute;left:4px;right:4px;bottom:2px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.pills a:hover,.pills a.active{color:var(--ink)}
.pills a:hover::after,.pills a.active::after{transform:scaleX(1)}

/* ---------- the film ---------- */
.film{position:relative;height:100vh}
.film-sticky{position:relative;height:100vh;width:100%;overflow:hidden;background:var(--bg)}
.layer{position:absolute;inset:0}
.layer-video{z-index:1}
.layer-title{z-index:2}
.layer-cutout{z-index:3;pointer-events:none}
.layer-shade{z-index:4;pointer-events:none}
.layer-ui{z-index:6;pointer-events:none}
.layer-cards{z-index:7}

/* 16:9 cover frame — video & cutout share identical geometry */
.media-frame{
  position:absolute;left:50%;top:50%;
  width:max(100vw,177.78vh);height:max(100vh,56.25vw);
  transform:translate(-50%,-50%);
}
.media-frame video,.media-frame img,.media-frame canvas{width:100%;height:100%;object-fit:fill}

/* the word */
.layer-title{display:flex;justify-content:center}
.hero-title{
  position:absolute;top:31%;transform:translateY(-50%);
  font-family:var(--display);font-weight:400;
  font-size:clamp(74px,18.6vw,360px);line-height:.92;
  letter-spacing:-.012em;
  color:#efe8d8;white-space:nowrap;
  text-shadow:0 0 90px rgba(6,10,20,.6);
}
.hero-title .lt{display:inline-block;will-change:transform,opacity,filter}

/* tower cutout — occludes the word */
.tower-cutout{
  clip-path:polygon(
    45.2% 2.4%, 44.6% 5%, 44.7% 10%, 44.2% 16%, 43.7% 24%, 43.2% 34%,
    42.8% 46%, 42.5% 58%, 42.1% 74%, 41.8% 90%, 41.3% 97%, 40.6% 100%,
    59.6% 100%, 58.7% 97%, 58.2% 90%, 57.8% 74%, 57.4% 58%, 57.1% 46%,
    56.7% 34%, 56.2% 24%, 55.7% 16%, 55.2% 10%, 55.3% 5%, 54.7% 2.4%
  );
}

/* card-side shades */
.shade{position:absolute;inset:0;opacity:0}
.shade-right{background:linear-gradient(268deg, rgba(2,4,8,.66) 0%, rgba(2,4,8,.3) 34%, transparent 60%)}
.shade-left{background:linear-gradient(88deg, rgba(2,4,8,.66) 0%, rgba(2,4,8,.3) 34%, transparent 60%)}

/* hero ui bits */
.hero-tagline{
  position:absolute;left:50%;top:56.5%;transform:translateX(-50%);
  font-size:clamp(9px,.85vw,12px);letter-spacing:.5em;text-indent:.5em;
  color:rgba(236,229,213,.68);white-space:nowrap;
  text-shadow:0 1px 26px rgba(0,0,0,.75), 0 0 8px rgba(0,0,0,.4);
}
.edge{
  position:absolute;top:50%;font-size:10px;letter-spacing:.34em;color:var(--ink-faint);
  writing-mode:vertical-rl;
}
.edge-left{left:26px;transform:translateY(-50%) rotate(180deg)}
.edge-right{right:26px;transform:translateY(-50%)}
.scroll-cue{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-size:9.5px;letter-spacing:.42em;text-indent:.42em;color:var(--ink-dim);
}
.scroll-cue i{
  width:1px;height:44px;background:linear-gradient(var(--gold), transparent);
  animation:cue 2.2s ease-in-out infinite;transform-origin:top;
}
@keyframes cue{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ---------- glass service cards ---------- */
/* Centred with auto margins, never a transform — GSAP animates transform on
   these cards, and any CSS transform/translate here gets folded into its
   matrix and corrupted. */
.svc-card{
  position:absolute;top:0;bottom:0;
  height:max-content;margin-block:auto;
  width:min(464px,86vw);
  padding:clamp(26px,2.6vw,40px);
  border-radius:28px;
  background:var(--glass-bg);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(26px) saturate(160%);
  -webkit-backdrop-filter:blur(26px) saturate(160%);
  box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
  opacity:0;visibility:hidden;
  will-change:transform,opacity;
}
.svc-card[data-pos="right"]{right:clamp(20px,6vw,110px)}
.svc-card[data-pos="left"]{left:clamp(20px,6vw,110px)}
.svc-top{display:flex;align-items:baseline;gap:16px;margin-bottom:18px}
.svc-num{
  font-family:var(--display);font-weight:400;font-size:12px;color:var(--gold);
  letter-spacing:.06em;
}
.svc-label{
  font-size:10.5px;letter-spacing:.34em;color:var(--ink-dim);text-transform:uppercase;
}
.svc-head{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(19px,1.85vw,28px);line-height:1.1;letter-spacing:-.008em;
  margin-bottom:15px;
}
.svc-body{
  font-size:13.5px;line-height:1.75;font-weight:300;color:rgba(240,234,220,.86);
  margin-bottom:22px;
}
.svc-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
  padding-bottom:5px;border-bottom:1px solid rgba(207,169,111,.35);
  transition:all .35s ease;pointer-events:auto;
}
.svc-link span{transition:transform .35s ease}
.svc-link:hover{border-color:var(--gold)}
.svc-link:hover span{transform:translateX(5px)}

/* ---------- the suite / carousel ---------- */
.suite{
  position:relative;z-index:10;
  background:linear-gradient(var(--bg) 0%, var(--bg-2) 40%, var(--bg) 100%);
  padding:clamp(90px,16vh,170px) 0 clamp(70px,11vh,130px);
}
.kicker{
  font-size:10.5px;letter-spacing:.5em;text-indent:.5em;color:var(--gold);
  margin-bottom:22px;text-align:center;
}
.suite-head{max-width:820px;margin:0 auto clamp(48px,7vh,80px);padding:0 24px;text-align:center}
.suite-title{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(27px,3.7vw,54px);line-height:1.06;letter-spacing:-.012em;
  margin-bottom:22px;
}
.suite-sub{font-size:14px;font-weight:300;line-height:1.8;color:var(--ink-dim);max-width:520px;margin:0 auto}

.car-wrap{position:relative}
.car-viewport{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.car-viewport::-webkit-scrollbar{display:none}
.car-viewport.dragging{cursor:grabbing;scroll-snap-type:none}
.car-track{
  display:flex;align-items:flex-start;
  gap:clamp(16px,2vw,30px);
  padding:0 max(8vw,40px) 10px;width:max-content;
}
.car-card{
  position:relative;flex:0 0 auto;
  width:clamp(190px,19vw,268px);
  scroll-snap-align:center;
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
/* staggered rhythm — alternating heights and vertical offsets */
.car-card .shot{
  position:relative;width:100%;overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(236,229,213,.1);
  box-shadow:0 26px 60px rgba(0,0,0,.45);
}
.car-card:nth-child(4n+1) .shot{height:clamp(250px,30vw,390px)}
.car-card:nth-child(4n+2) .shot{height:clamp(290px,35vw,460px)}
.car-card:nth-child(4n+3) .shot{height:clamp(230px,27vw,352px)}
.car-card:nth-child(4n+4) .shot{height:clamp(272px,33vw,428px)}
.car-card:nth-child(4n+1){margin-top:clamp(20px,3.4vw,52px)}
.car-card:nth-child(4n+2){margin-top:0}
.car-card:nth-child(4n+3){margin-top:clamp(38px,6vw,92px)}
.car-card:nth-child(4n+4){margin-top:clamp(10px,1.6vw,26px)}

.car-card img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.03);transition:transform .9s cubic-bezier(.2,.7,.2,1);
  user-select:none;-webkit-user-drag:none;pointer-events:none;
}
.car-card figcaption{
  display:flex;flex-direction:column;gap:5px;
  padding:16px 2px 0;
}
.cap-label{font-size:9.5px;letter-spacing:.26em;color:rgba(236,229,213,.9);text-transform:uppercase}
.cap-sub{font-weight:300;font-size:12px;letter-spacing:.015em;color:var(--ink-faint)}
.car-card:hover{transform:translateY(-10px)}
.car-card:hover img{transform:scale(1.09)}
.car-card:hover .shot{border-color:rgba(207,169,111,.42)}

/* paired arrows, centered below the rail */
.car-nav{display:flex;justify-content:center;gap:14px;margin-top:clamp(30px,4.5vh,52px)}
.car-btn{
  width:40px;height:40px;border-radius:50%;
  background:transparent;border:1px solid rgba(236,229,213,.26);
  color:var(--ink-dim);font-size:14px;cursor:pointer;
  display:grid;place-items:center;
  transition:all .35s ease;
}
.car-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(207,169,111,.1)}

.car-progress{
  width:min(200px,44vw);height:1px;margin:24px auto 0;
  background:rgba(236,229,213,.12);position:relative;overflow:hidden;
}
.car-progress i{
  position:absolute;left:0;top:0;bottom:0;width:12%;
  background:var(--gold);transform-origin:left;
}
.car-hint{margin-top:15px;text-align:center;font-size:9px;letter-spacing:.4em;text-indent:.4em;color:var(--ink-faint)}

/* ---------- contact ---------- */
.contact{
  position:relative;z-index:10;background:var(--bg);
  padding:clamp(90px,17vh,180px) 24px clamp(36px,5vh,56px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  border-top:1px solid rgba(236,229,213,.07);
}
.contact-word{
  font-family:var(--display);font-weight:400;
  font-size:clamp(46px,12.4vw,220px);line-height:1;
  letter-spacing:-.01em;
  background:linear-gradient(178deg,#f0e9d9 30%, rgba(240,233,217,.25));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.contact-tag{
  margin:24px 0 44px;font-weight:200;
  font-size:clamp(13px,1.35vw,17px);letter-spacing:.2em;text-indent:.2em;
  text-transform:uppercase;color:var(--ink-dim);
}
.cta{
  display:inline-flex;align-items:center;gap:12px;
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink);
  padding:20px 44px;border-radius:999px;
  border:1px solid rgba(207,169,111,.5);
  background:linear-gradient(152deg, rgba(207,169,111,.14), rgba(207,169,111,.03));
  box-shadow:0 18px 50px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
  transition:all .4s ease;
}
.cta span{color:var(--gold);transition:transform .4s ease}
.cta:hover{border-color:var(--gold);background:rgba(207,169,111,.2);transform:translateY(-2px)}
.cta:hover span{transform:translateX(6px)}
.contact-meta{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;
  margin-top:46px;font-size:12.5px;letter-spacing:.08em;color:var(--ink-dim);
}
.contact-meta a:hover{color:var(--ink)}
.contact-meta .dot{width:3px;height:3px;border-radius:50%;background:rgba(207,169,111,.6)}
.credit-link{color:var(--gold);border-bottom:1px solid rgba(207,169,111,.35);transition:border-color .3s}
.credit-link:hover{border-color:var(--gold)}
.foot-line{
  margin-top:clamp(60px,10vh,110px);width:100%;max-width:1200px;
  padding-top:22px;border-top:1px solid rgba(236,229,213,.08);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:10.5px;letter-spacing:.14em;color:var(--ink-faint);
}

/* ---------- reveals ---------- */
.rv{opacity:0;transform:translateY(46px)}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .pills{display:none}
  .edge{display:none}
  /* a portrait crop makes the tower dominate, so let the word bleed off both
     edges rather than hide behind it */
  .hero-title{top:26%;font-size:23vw}
  .hero-tagline{top:50.5%;letter-spacing:.3em;text-indent:.3em;white-space:normal;text-align:center;width:86vw}
  /* cards sit dead-centre on phones */
  .svc-card{
    top:0;bottom:0;margin-block:auto;
    left:0 !important;right:0 !important;margin-inline:auto;
    width:min(480px,90vw);border-radius:22px;
  }
  .shade-left,.shade-right{
    background:radial-gradient(130% 64% at 50% 50%, rgba(2,4,8,.72), rgba(2,4,8,.3) 60%, transparent 80%);
  }
  .car-card{width:clamp(168px,52vw,230px)}
  .car-card:nth-child(4n+1) .shot{height:clamp(224px,68vw,300px)}
  .car-card:nth-child(4n+2) .shot{height:clamp(258px,78vw,346px)}
  .car-card:nth-child(4n+3) .shot{height:clamp(206px,62vw,276px)}
  .car-card:nth-child(4n+4) .shot{height:clamp(242px,73vw,324px)}
  .car-track{padding-left:14vw;padding-right:14vw}
  .credit-link{color:var(--gold);border-bottom:1px solid rgba(207,169,111,.35);transition:border-color .3s}
.credit-link:hover{border-color:var(--gold)}
.foot-line{justify-content:center;text-align:center}
}
/* Portrait phones load a dedicated 9:16 reel cut from the 4K masters
   (crop=1215:2160:1312:0). The frame math switches to that aspect, and the
   tower polygon is the desktop one remapped through the same crop:
   x' = (x·3840 − 1312) / 1215. */
@media (max-width:820px) and (orientation:portrait){
  .media-frame{
    width:max(100vw,56.25vh);
    height:max(100vh,177.78vw);
  }
  .tower-cutout{
    clip-path:polygon(
      34.9% 2.4%, 33% 5%, 33.3% 10%, 31.7% 16%, 30.1% 24%, 28.6% 34%,
      27.3% 46%, 26.3% 58%, 25.1% 74%, 24.1% 90%, 22.6% 97%, 20.3% 100%,
      80.4% 100%, 77.5% 97%, 76% 90%, 74.7% 74%, 73.4% 58%, 72.5% 46%,
      71.2% 34%, 69.6% 24%, 68.1% 16%, 66.5% 10%, 66.8% 5%, 64.9% 2.4%
    );
  }
}

@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .scroll-cue i{animation:none}
}

/* ---------- static fallback (animation libs unavailable) ---------- */
.no-motion .nav{opacity:1;transform:none}
.no-motion .film,.no-motion .film-sticky{height:auto;overflow:visible}
.no-motion .layer{position:relative;inset:auto}
.no-motion .layer-video .media-frame{position:relative;left:auto;top:auto;transform:none;width:100%;height:auto}
.no-motion .media-frame video{height:auto}
.no-motion .layer-title,.no-motion .layer-cutout,.no-motion .layer-shade,.no-motion .layer-ui{display:none}
.no-motion .layer-cards{padding:70px 20px;display:flex;flex-direction:column;gap:30px;align-items:center}
.no-motion .svc-card{position:relative;opacity:1;visibility:visible;translate:none;top:auto;bottom:auto;left:auto !important;right:auto !important}
.no-motion .rv{opacity:1;transform:none}