/* Premium layer: cinematic hero, serif accents, motion states.
   Loaded after style.css; every hidden-until-animated state is gated on
   `.js:not(.motion-off)` so the page is fully visible without JS or GSAP. */

:root {
  --serif: "Instrument Serif", "Times New Roman", serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --nav-h: 70px;
}

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* film grain — barely there, adds material */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* serif accent words */
h1 em, h2 em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  letter-spacing: -.01em; font-variation-settings: normal; color: var(--grey);
  padding-right: .06em;
}
.sec-ink h2 em, .split h2 em { color: var(--silver); }
.split h2 em { font-variation-settings: normal; }

/* ---------- preloader ---------- */
.preloader { display: none; }
.js:not(.motion-off) .preloader {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 200;
  background: var(--navy); color: #fff;
}
.pl-inner { display: grid; justify-items: center; gap: 18px; }
.pl-logo { width: 150px; height: auto; }
.pl-name { font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 112; font-size: 1.5rem; letter-spacing: -.01em; }
.pl-bar { width: 160px; height: 2px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.pl-bar i { display: block; height: 100%; width: 100%; background: var(--silver); transform-origin: left; transform: scaleX(0); }

/* ---------- scroll progress ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--grey), var(--silver)); transform-origin: left; transform: scaleX(0); }

/* ---------- nav over the hero ---------- */
.nav { transition: background .35s, border-color .35s, transform .45s var(--ease-out), box-shadow .35s; }
.nav .logo-light { display: none; }
.nav.is-top { background: transparent; border-bottom-color: rgba(255, 255, 255, .12); backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav.is-top .logo-dark { display: none; }
.nav.is-top .logo-light { display: block; }
.nav.is-top .brand-txt b, .nav.is-top .nav-links a { color: #fff; }
.nav.is-top .brand-txt small { color: var(--silver); }
.nav.is-top .nav-links a::after { background: var(--silver); }
.nav.is-top .nav-cta { background: #fff; color: var(--navy); }
.nav.is-top .nav-cta::before { background: var(--silver); }
.nav.is-top .menu-btn { border-color: rgba(255, 255, 255, .3); }
.nav.is-top .menu-btn span { background: #fff; }
.nav.is-scrolled { box-shadow: 0 10px 30px -18px rgba(24, 19, 78, .35); }
.nav.is-hidden { transform: translateY(-100%); }
.nav.is-top.mopen { background: var(--navy); }
.mnav { background: var(--paper); }
/* the mobile menu overlays the page instead of pushing it down: an in-flow menu shifts
   every section by its height, which made smooth-scroll menu links overshoot */
@media (max-width: 960px) {
  .mnav { position: absolute; left: 0; right: 0; top: 100%; z-index: 41; }
  .mnav.open { box-shadow: 0 24px 40px -20px rgba(24, 19, 78, .45); }
}

/* ---------- hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background: var(--navy); margin-top: calc(var(--nav-h) * -1);
  padding-top: var(--nav-h); min-height: min(100svh, 1040px);
  display: flex; flex-direction: column; border-bottom: 0;
}
.hero-media { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.hero-img { width: 100%; height: 115%; object-fit: cover; object-position: 60% 40%; transform-origin: 60% 40%; will-change: transform; }
.hero-shade {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(100deg, rgba(16, 12, 56, .97) 0%, rgba(24, 19, 78, .9) 38%, rgba(24, 19, 78, .62) 64%, rgba(24, 19, 78, .45) 100%),
    linear-gradient(0deg, rgba(16, 12, 56, .9) 0%, transparent 35%);
}
.hero-grid {
  position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, #000 30%, transparent 75%);
}
.hero-swoosh { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.sw { fill: none; stroke-linecap: round; stroke-dasharray: 64 100; }
.sw-outer { stroke: rgba(255, 255, 255, .16); stroke-width: 14; stroke-dashoffset: -6; }
.sw-inner { stroke: rgba(180, 181, 200, .14); stroke-width: 8; stroke-dashoffset: -9; }

.hero-in { flex: 1; grid-template-columns: 1.05fr .95fr; gap: 56px; padding: 88px 0 40px; align-items: center; }
.hero .eyebrow { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #D6D7E4; backdrop-filter: blur(8px); }
.hero .dot { background: linear-gradient(90deg, #fff 50%, var(--silver) 50%); }
.hero-title {
  font-size: clamp(2.9rem, 6.4vw, 6.2rem); line-height: .96; font-weight: 800;
  font-variation-settings: "wdth" 88; letter-spacing: -.04em; margin: 26px 0 26px; color: #fff;
}
.hero-title .ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero-title .ln > span { display: inline-block; }
.hero-title em { color: var(--silver); font-size: 1.08em; letter-spacing: -.02em; }
.hero .lede { color: #CDCEDD; max-width: 34em; }
.hero-cta { margin-top: 34px; }

.btn > span, .btn > i { position: relative; z-index: 1; font-style: normal; }
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; transform: translateY(101%);
  transition: transform .5s var(--ease-out); z-index: 0;
}
.btn:hover::before { transform: none; }
.btn-light { background: #fff; color: var(--navy); }
.btn-light::before { background: var(--silver); }
.btn-light i { transition: transform .3s; }
.btn-light:hover i { transform: translateX(4px); }
.btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .4); backdrop-filter: blur(6px); }
.btn-ghost::before { background: rgba(255, 255, 255, .12); }
.btn-ghost:hover { border-color: #fff; }
.wa-dot { width: 8px; height: 8px; border-radius: 50%; background: #25D366; box-shadow: 0 0 0 0 rgba(37, 211, 102, .6); animation: wa-pulse 2s infinite; position: relative; z-index: 1; }
@keyframes wa-pulse { 70% { box-shadow: 0 0 0 9px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }
.btn-hot::before, .btn-ink::before { background: var(--navy-2); }
.btn-hot > *, .btn-ink > * { position: relative; z-index: 1; }

/* the drawing becomes a pinned spec sheet floating over the site photo */
.hero-art {
  background: rgba(252, 252, 254, .96); border: 0; border-radius: 6px; color: var(--ink);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .5) inset;
  transform: rotate(-1.5deg); will-change: transform;
}
.hero-art::before, .hero-art::after { border-color: var(--navy); }
.sheet-stamp {
  position: absolute; right: 16px; bottom: 14px; font-size: .62rem; color: var(--grey);
  border: 1px solid var(--line); padding: 4px 8px; border-radius: 3px; transform: rotate(-2deg);
}

.hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255, 255, 255, .14);
  padding: 26px 0 30px; gap: 24px;
}
.hero-stats > div { display: grid; gap: 4px; padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, .14); }
.hero-stats > div:first-child { padding-left: 0; border-left: 0; }
.hero-stats b { font-family: var(--display); font-weight: 750; font-variation-settings: "wdth" 92; font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1; letter-spacing: -.03em; }
.hero-stats b i { font-family: var(--serif); font-weight: 400; color: var(--silver); }
.hero-stats .mono { color: #A9AAC0; font-size: .68rem; }

.scroll-cue { position: absolute; right: max(16px, calc((100vw - var(--wrap)) / 2)); bottom: 112px; display: flex; align-items: center; gap: 10px; color: #A9AAC0; font-size: .66rem; writing-mode: vertical-rl; }
.scroll-cue span { width: 1px; height: 54px; background: rgba(255, 255, 255, .2); position: relative; overflow: hidden; }
.scroll-cue span::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: #fff; transform: translateY(-100%); animation: cue 2s var(--ease-out) infinite; }
@keyframes cue { to { transform: translateY(250%); } }
.hero .ticker { background: rgba(10, 8, 40, .55); border-top: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(6px); }

/* until the display fonts load, the hero copy lays out with fallback metrics; keep it invisible
   (appearing is not a layout shift, moving visible text is) */
.js:not(.fonts-ok) .hero-copy, .js:not(.fonts-ok) .pl-name { visibility: hidden; }

/* hidden-until-animated (JS on, motion on) */
.js:not(.motion-off) .h-anim, .js:not(.motion-off) .h-art { opacity: 0; }
.js:not(.motion-off) .hero-title .ln > span { transform: translateY(110%); }
.js:not(.motion-off) .hero-swoosh .sw { stroke-dashoffset: 100; }

/* ---------- section motion helpers ---------- */
.sec h2 .split-line, .why h2 .split-line { padding-bottom: .06em; }
.svc, .why-list li, .prod { --mx: 50%; --my: 50%; }
.svc::after, .why-list li::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(24, 19, 78, .07), transparent 45%);
}
.why-list li { position: relative; }
.svc-lg::after { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .09), transparent 45%); }
.svc:hover::after, .why-list li:hover::after { opacity: 1; }
.svc-ico svg { transition: transform .5s var(--ease-out); }
.svc:hover .svc-ico svg { transform: translateY(-4px) scale(1.06); }

.prod { transition: border-color .25s, transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.prod:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -26px rgba(24, 19, 78, .45); }
.add { position: relative; overflow: hidden; }
.add.pop { animation: pop-add .45s var(--ease-out); }
@keyframes pop-add { 40% { transform: scale(1.08); } }

.ccard img { transition: transform .9s var(--ease-out), opacity .3s; }
.ccard:hover img { transform: scale(1.08); }
.ccard-txt b::after { content: " →"; display: inline-block; opacity: 0; transform: translateX(-6px); transition: .35s var(--ease-out); }
.ccard:hover .ccard-txt b::after { opacity: 1; transform: none; }

/* process line fills with scroll */
.steps::after {
  content: ""; position: absolute; top: 15px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--silver), #fff); transform-origin: left; transform: scaleX(var(--p, 0));
}
.step-n::before { transition: background .3s, box-shadow .3s; }
.steps li.lit .step-n::before { background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .12); }
.steps li.lit .step-n { color: #fff; }

/* industries rows: hover wipe */
.ind-list li { position: relative; transition: color .3s; }
.ind-list li::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.ind-list li:hover::before { transform: scaleX(1); }
.ind-list li:hover .mono { background: var(--navy); color: #fff; border-color: var(--navy); }
.ind-list .mono { transition: background .3s, color .3s; }

/* showreel frame */
.reel-frame { will-change: clip-path, transform; }

/* footer wordmark */
.foot-mark-wrap { overflow: hidden; padding-bottom: 10px; }
.foot-mark {
  font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 118;
  font-size: clamp(2.4rem, 8.6vw, 8.4rem); line-height: .9; letter-spacing: -.045em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(180, 181, 200, .35);
  background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); -webkit-background-clip: text; background-clip: text;
}
.foot-logo { filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .3)); }

/* image reveals */
.why-photo img, .split-img { will-change: transform; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero-in { grid-template-columns: 1fr; padding: 56px 0 28px; gap: 40px; }
  .hero-art { transform: rotate(-1deg); max-width: 640px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .scroll-cue { display: none; }
}
@media (max-width: 640px) {
  :root { --nav-h: 70px; }
  .hero { min-height: 0; }
  .hero-title { font-size: clamp(2.5rem, 11.5vw, 3.4rem); }
  .hero-cta .btn { flex: 1 1 auto; }
  .hero-stats { gap: 18px 12px; padding: 22px 0 24px; }
  .hero-stats > div { padding-left: 12px; }
  .foot-mark { font-size: 10.6vw; }
  body::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-dot, .scroll-cue span::after { animation: none; }
}