/* =====================================================================
   DPE STUDIOS — Lusion-inspired minimal system
   Black · White · Navy  ·  huge type · deep space · slow motion
   ---------------------------------------------------------------------
   1. Tokens        6. Menu overlay      11. Works / capability list
   2. Reset/base    7. Hero + WebGL      12. Media reveal
   3. Type          8. Marquee           13. Footer
   4. Cursor        9. Statements        14. Forms
   5. Header       10. Info rows         15. Responsive / fallbacks
   ===================================================================== */

/* 1. TOKENS ------------------------------------------------------------ */
:root {
  --black:#000000;
  --white:#ffffff;
  --navy:#001F3F;
  --navy-hi:#0a3a63;

  --bg:#000000;
  --fg:#ffffff;
  --muted:rgba(255,255,255,0.55);
  --faint:rgba(255,255,255,0.32);
  --line:rgba(255,255,255,0.14);
  --surface:rgba(255,255,255,0.03);

  --grad-wn:linear-gradient(110deg,#ffffff 0%,#ffffff 45%,#001F3F 120%);

  --font-display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,sans-serif;

  --fs-giant:clamp(3.4rem,13vw,15rem);
  --fs-xl:clamp(2.6rem,8.5vw,9rem);
  --fs-l:clamp(2rem,5.5vw,5rem);
  --fs-m:clamp(1.5rem,3.4vw,2.8rem);
  --fs-body:clamp(1rem,1.05vw,1.15rem);

  --pad:clamp(1.4rem,5vw,4.5rem);
  --gap:clamp(2rem,6vh,7rem);
  --maxw:1680px;

  --ease:cubic-bezier(0.16,1,0.3,1);
  --ease-io:cubic-bezier(0.76,0,0.24,1);
  --dur:0.8s;

  --z-gl:0; --z-body:2; --z-hdr:40; --z-menu:60; --z-cursor:90; --z-trans:95; --z-load:100;
}

/* 2. RESET / BASE ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-stopped{overflow:hidden;}
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:1.55;
  letter-spacing:0.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;min-height:100vh;
}
/* pure cinematic black — clean depth vignette, no colour patches */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(125% 95% at 50% 32%, transparent 42%, rgba(0,0,0,0.6) 100%);
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
ul{list-style:none;}
::selection{background:#fff;color:#000;}
::-webkit-scrollbar{width:0;height:0;}

.wrap{width:min(var(--maxw),100% - var(--pad)*2);margin-inline:auto;}
.section{position:relative;z-index:var(--z-body);padding-block:clamp(5rem,14vh,13rem);}
.hairline{height:1px;background:var(--line);border:0;}

/* 3. TYPE -------------------------------------------------------------- */
h1,h2,h3,.display{font-family:var(--font-display);font-weight:500;line-height:0.98;letter-spacing:-0.02em;}
.giant{font-size:var(--fs-giant);font-weight:600;line-height:0.9;letter-spacing:-0.03em;}
.xl{font-size:var(--fs-xl);font-weight:500;line-height:0.96;}
.lg{font-size:var(--fs-l);}
.md{font-size:var(--fs-m);}
.lead{font-size:clamp(1.05rem,1.5vw,1.35rem);color:var(--muted);max-width:44ch;line-height:1.5;}
.muted{color:var(--muted);}
.faint{color:var(--faint);}
.uppercase{text-transform:uppercase;letter-spacing:0.22em;}

.eyebrow{
  font-family:var(--font-display);font-size:0.72rem;letter-spacing:0.34em;
  text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:0.8rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--white);opacity:0.6;}

.grad-text{background:var(--grad-wn);-webkit-background-clip:text;background-clip:text;color:transparent;}
.outline{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,0.35);}

/* char/line mask reveal */
.reveal-line{display:block;overflow:hidden;}
.reveal-line>span{display:inline-block;will-change:transform;}
.fade{opacity:0;}
.up{opacity:0;transform:translateY(40px);}

/* buttons / links */
.btn{
  display:inline-flex;align-items:center;gap:0.7rem;font-family:var(--font-display);
  font-size:0.95rem;letter-spacing:0.02em;padding:1.05rem 1.9rem;border-radius:100px;
  border:1px solid var(--line);color:var(--fg);transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.btn:hover{background:var(--white);color:var(--black);border-color:var(--white);}
.btn--solid{background:var(--white);color:var(--black);border-color:var(--white);}
.btn--solid:hover{background:transparent;color:var(--fg);border-color:var(--line);}
.btn .ar{transition:transform var(--dur) var(--ease);}
.btn:hover .ar{transform:translateX(5px);}

.link-underline{position:relative;display:inline-block;}
.link-underline::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform 0.5s var(--ease);}
.link-underline:hover::after{transform:scaleX(1);transform-origin:left;}

/* 4. CURSOR ------------------------------------------------------------ */
body.cursor-on,body.cursor-on *{cursor:none !important;}
.cursor{position:fixed;top:0;left:0;z-index:var(--z-cursor);pointer-events:none;}
.cur-dot{position:fixed;width:7px;height:7px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);
  box-shadow:0 0 0 1px rgba(0,31,63,0.8),0 0 20px rgba(0,31,63,0.9);}
.cur-ring{position:fixed;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,0.5);
  transform:translate(-50%,-50%);box-shadow:0 0 22px rgba(0,31,63,0.5);
  transition:width .45s var(--ease),height .45s var(--ease),background .45s,border-color .45s,opacity .4s;
  display:grid;place-items:center;}
.cur-ring .cur-label{font-family:var(--font-display);font-size:0.62rem;letter-spacing:0.15em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .3s;}
.cur-ring.hover{width:92px;height:92px;background:rgba(0,31,63,0.32);border-color:#fff;}
.cur-ring.view{width:104px;height:104px;background:rgba(255,255,255,0.9);border-color:#fff;}
.cur-ring.view .cur-label{opacity:1;color:#000;}
.cur-ring.down{width:34px;height:34px;}
.cur-ring.hide{opacity:0;}

/* 5. HEADER ------------------------------------------------------------ */
.hdr{position:fixed;top:0;left:0;right:0;z-index:var(--z-hdr);
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(1.1rem,2.5vw,2rem) var(--pad);mix-blend-mode:difference;}
.logo{font-family:var(--font-display);font-weight:700;font-size:1.4rem;letter-spacing:0.04em;line-height:1;color:#fff;display:inline-flex;align-items:baseline;gap:0.45rem;}
.logo span{font-size:0.6rem;letter-spacing:0.4em;font-weight:500;color:#fff;opacity:0.8;text-transform:uppercase;}
.hdr-right{display:flex;align-items:center;gap:2rem;}
.hdr-mail{font-family:var(--font-display);font-size:0.85rem;color:#fff;}
.menu-btn{display:inline-flex;align-items:center;gap:0.7rem;font-family:var(--font-display);font-size:0.9rem;letter-spacing:0.04em;color:#fff;}
.menu-btn .bars{display:inline-flex;flex-direction:column;gap:5px;width:26px;}
.menu-btn .bars i{height:1.5px;background:#fff;width:100%;transition:transform .4s var(--ease),opacity .4s;}
body.menu-open .menu-btn .bars i:first-child{transform:translateY(6.5px) rotate(45deg);}
body.menu-open .menu-btn .bars i:last-child{transform:translateY(-6.5px) rotate(-45deg);}

/* 6. MENU OVERLAY ------------------------------------------------------ */
.menu{position:fixed;inset:0;z-index:var(--z-menu);background:var(--black);
  display:grid;grid-template-rows:1fr auto;padding:clamp(6rem,14vh,10rem) var(--pad) clamp(2rem,5vh,3.5rem);
  clip-path:inset(0 0 100% 0);pointer-events:none;transition:clip-path 0.9s var(--ease-io);}
.menu::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 70% at 80% 10%,rgba(0,31,63,0.6),transparent 60%);}
body.menu-open .menu{clip-path:inset(0 0 0% 0);pointer-events:auto;}
.menu-nav{display:flex;flex-direction:column;gap:clamp(0.2rem,1vh,0.8rem);justify-content:center;}
.menu-nav a{position:relative;font-family:var(--font-display);font-weight:500;font-size:clamp(2.4rem,8vw,6.5rem);
  line-height:1.02;letter-spacing:-0.02em;color:var(--fg);width:max-content;overflow:hidden;display:block;}
.menu-nav a .mn-in{display:inline-block;transform:translateY(105%);transition:transform 0.7s var(--ease);}
body.menu-open .menu-nav a .mn-in{transform:translateY(0);}
.menu-nav a::after{content:"";position:absolute;left:0;bottom:0.12em;width:100%;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 0.5s var(--ease);}
.menu-nav a:hover::after{transform:scaleX(1);}
.menu-nav a .idx{font-family:var(--font-body);font-size:0.8rem;letter-spacing:0.1em;color:var(--faint);vertical-align:super;margin-right:0.6rem;}
.menu-foot{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;justify-content:space-between;align-items:flex-end;border-top:1px solid var(--line);padding-top:1.6rem;}
.menu-foot .mf-k{font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--faint);margin-bottom:0.4rem;}
.menu-foot a:hover,.menu-foot .mf-v{color:var(--fg);}

/* 7. HERO + WEBGL ------------------------------------------------------ */
.gl-fixed{position:fixed;inset:0;width:100%;height:100%;z-index:var(--z-gl);display:block;pointer-events:none;}
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--pad) clamp(2.5rem,7vh,5rem);z-index:var(--z-body);}
.hero-top{position:absolute;top:38%;left:var(--pad);transform:translateY(-50%);z-index:1;}
/* Guaranteed-legibility scrim — sits behind the headline regardless of how
   bright the WebGL field renders on a given GPU, so text never washes out. */
.hero-top::before{
  content:"";position:absolute;z-index:-1;inset:-3rem -4rem -3rem -2rem;
  background:radial-gradient(72% 100% at 22% 45%,rgba(0,0,0,0.86) 0%,rgba(0,0,0,0.62) 45%,transparent 78%);
  pointer-events:none;
}
.hero h1{font-size:var(--fs-giant);font-weight:600;line-height:0.86;letter-spacing:-0.03em;}
/* Darkens the lower band of the hero (sub-line, founder credit, stat row)
   so those stay legible against the particle field too. */
.hero::after{
  content:"";position:absolute;z-index:-1;inset:auto 0 0 0;height:56%;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,0.6) 45%,rgba(0,0,0,0.88) 100%);
  pointer-events:none;
}
.hero-sub{margin-top:1.8rem;max-width:40ch;position:relative;}
.hero-row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:2rem;border-top:1px solid var(--line);padding-top:1.6rem;}
.hero-row .col .k{font-size:0.68rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--faint);margin-bottom:0.5rem;}
.hero-row .col .v{font-family:var(--font-display);font-size:1.05rem;}
.scroll-cue{display:inline-flex;align-items:center;gap:0.7rem;font-family:var(--font-display);font-size:0.72rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--muted);}
.scroll-cue .dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:cue 1.8s var(--ease-io) infinite;}
@keyframes cue{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(6px);opacity:.4}}

/* 8. MARQUEE ----------------------------------------------------------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:clamp(1.2rem,3vh,2rem);white-space:nowrap;}
.marquee-track{display:inline-flex;gap:2.6rem;align-items:center;animation:marq 30s linear infinite;font-family:var(--font-display);font-size:clamp(1.6rem,4.5vw,3.4rem);color:var(--muted);}
.marquee-track .star{color:var(--white);opacity:0.5;}
@keyframes marq{to{transform:translateX(-50%);}}

/* 9. STATEMENTS -------------------------------------------------------- */
.statement{font-family:var(--font-display);font-weight:500;font-size:var(--fs-l);line-height:1.08;letter-spacing:-0.02em;max-width:22ch;}
.statement--wide{max-width:26ch;}
.big-word{font-size:var(--fs-xl);font-weight:600;letter-spacing:-0.03em;line-height:0.95;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,7rem);align-items:start;}
.col-label{font-size:0.7rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--faint);}

/* 10. INFO ROWS -------------------------------------------------------- */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;border-top:1px solid var(--line);padding-top:2.4rem;}
.stat .n{font-family:var(--font-display);font-size:clamp(2.2rem,4.5vw,3.6rem);font-weight:600;}
.stat .l{color:var(--faint);font-size:0.8rem;letter-spacing:0.14em;text-transform:uppercase;margin-top:0.4rem;}

/* 11. WORKS / CAPABILITY LIST ----------------------------------------- */
.cap-list{border-top:1px solid var(--line);}
.cap{position:relative;display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:clamp(1.6rem,3.4vh,2.6rem) 0;border-bottom:1px solid var(--line);
  transition:padding-left 0.7s var(--ease);overflow:hidden;}
.cap .cap-i{font-family:var(--font-body);font-size:0.8rem;color:var(--faint);width:3rem;flex:none;}
.cap .cap-t{font-family:var(--font-display);font-weight:500;font-size:clamp(1.8rem,5vw,4rem);letter-spacing:-0.02em;transition:transform 0.7s var(--ease),color 0.5s;line-height:1;margin-right:auto;padding-right:2rem;color:var(--muted);}
.cap .cap-tag{font-size:0.75rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--faint);text-align:right;flex:none;transition:color .5s;}
.cap:hover{padding-left:clamp(0.8rem,2vw,2rem);}
.cap:hover .cap-t{color:var(--white);}
.cap:hover .cap-tag{color:var(--muted);}
/* hover image peek */
.cap-peek{position:absolute;top:50%;right:16%;width:min(26vw,340px);aspect-ratio:4/3;transform:translate(0,-50%) scale(0.9);
  border-radius:10px;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .5s var(--ease),transform .6s var(--ease);z-index:3;}
.cap-peek img{width:100%;height:100%;object-fit:cover;}
.cap:hover .cap-peek{opacity:1;transform:translate(0,-50%) scale(1);}

/* 12. MEDIA REVEAL (works grid) --------------------------------------- */
.media-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.4vw,2rem);}
.media{position:relative;overflow:hidden;border-radius:12px;background:#050505;}
.media.s7{grid-column:span 7;} .media.s5{grid-column:span 5;}
.media.s6{grid-column:span 6;} .media.s12{grid-column:span 12;}
.media-inner{position:relative;aspect-ratio:16/10;overflow:hidden;}
.media.tall .media-inner{aspect-ratio:4/5;}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.1s var(--ease),filter .8s;}
.media:hover img{transform:scale(1.08);}
.media-cap{position:absolute;inset:auto 0 0 0;z-index:2;padding:1.6rem;display:flex;justify-content:space-between;align-items:flex-end;background:linear-gradient(transparent,rgba(0,0,0,0.75));}
.media-cap .t{font-family:var(--font-display);font-size:clamp(1.2rem,2vw,1.7rem);}
.media-cap .c{font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);}

/* 13. FOOTER ----------------------------------------------------------- */
.footer{position:relative;z-index:var(--z-body);padding:clamp(4rem,12vh,9rem) var(--pad) clamp(1.6rem,4vh,2.5rem);border-top:1px solid var(--line);overflow:hidden;}
.footer-cta{font-family:var(--font-display);font-weight:600;font-size:var(--fs-giant);line-height:0.9;letter-spacing:-0.03em;display:inline-flex;align-items:center;gap:0.4em;}
.footer-cta .ar{font-size:0.7em;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;margin-top:clamp(3rem,8vh,6rem);}
.footer-grid h4{font-size:0.7rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--faint);margin-bottom:1.1rem;}
.footer-grid a{display:block;color:var(--muted);padding:0.28rem 0;transition:color .4s,transform .4s;}
.footer-grid a:hover{color:var(--fg);transform:translateX(4px);}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0.8rem;margin-top:clamp(3rem,7vh,5rem);color:var(--faint);font-size:0.8rem;}

/* 14. FORMS ------------------------------------------------------------ */
.contact-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:clamp(2rem,6vw,6rem);align-items:start;}
.field{position:relative;margin-bottom:2.2rem;}
.field input,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:1rem 0;color:var(--fg);font-size:1.1rem;font-family:var(--font-body);outline:none;transition:border-color .4s;}
.field textarea{resize:vertical;min-height:120px;}
.field label{position:absolute;left:0;top:1rem;color:var(--faint);pointer-events:none;transition:transform .4s var(--ease),font-size .4s,color .4s;}
.field input:focus,.field textarea:focus{border-color:var(--white);}
.field input:focus+label,.field textarea:focus+label,
.field input:not(:placeholder-shown)+label,.field textarea:not(:placeholder-shown)+label{
  transform:translateY(-1.6rem);font-size:0.68rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);}
.form-status{min-height:1.4rem;margin-top:1rem;color:var(--white);font-family:var(--font-display);font-size:0.9rem;}
.info-block{padding:1.5rem 0;border-top:1px solid var(--line);}
.info-block .k{font-size:0.68rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--faint);}
.info-block .v{font-size:clamp(1.15rem,1.8vw,1.5rem);margin-top:0.4rem;font-family:var(--font-display);}
.info-block a.v:hover{color:var(--fg);}

/* preloader */
.loader{position:fixed;inset:0;z-index:var(--z-load);background:#000;display:grid;place-items:center;}
.loader-inner{display:grid;justify-items:center;gap:1.2rem;width:min(280px,64vw);text-align:center;}
.loader-logo{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,6vw,3.4rem);letter-spacing:0.14em;}
.loader-bar{width:100%;height:1px;background:rgba(255,255,255,0.16);overflow:hidden;}
.loader-bar span{display:block;height:100%;width:0;background:#fff;}
.loader-num{font-family:var(--font-display);font-size:0.8rem;letter-spacing:0.3em;color:var(--muted);}

/* page transition */
.trans{position:fixed;inset:0;z-index:var(--z-trans);background:#000;pointer-events:none;transform:translateY(100%);}

/* 15. RESPONSIVE / FALLBACKS ------------------------------------------ */
@media (max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr;}
  .two-col,.contact-grid{grid-template-columns:1fr;}
  .media.s7,.media.s5,.media.s6,.media.s12{grid-column:span 12;}
  .stat-row{grid-template-columns:1fr;gap:1.4rem;}
  .cap-peek{display:none;}
}
@media (max-width:640px){
  .hdr-mail{display:none;}
  .hero-top{position:static;transform:none;padding-top:34vh;}
  .hero{justify-content:flex-start;}
  .cap{flex-wrap:wrap;gap:0.4rem;}
  .cap .cap-tag{text-align:left;}
  .footer-grid{grid-template-columns:1fr;}
}
@media (min-width:1920px){:root{--maxw:1880px;}body{font-size:1.2rem;}}

/* WebGL off fallback */
.webgl-off .gl-fixed{display:none;}
.webgl-off body::before,.webgl-off .hero{background:radial-gradient(70% 70% at 50% 20%,rgba(0,31,63,0.5),#000 60%);}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .fade,.up{opacity:1 !important;transform:none !important;}
  .reveal-line>span,.menu-nav a .mn-in{transform:none !important;}
  .cursor{display:none;}
  body.cursor-on,body.cursor-on *{cursor:auto !important;}
}
@media (hover:none){
  .cursor{display:none;}
  body.cursor-on,body.cursor-on *{cursor:auto !important;}
  .hdr{mix-blend-mode:normal;}
}

/* no-rAF safety net (JS sets .no-raf on <html> if frames never fire) */
.no-raf .loader{display:none !important;}
.no-raf .fade,.no-raf .up{opacity:1 !important;transform:none !important;}
.no-raf .reveal-line>span,.no-raf .sw,.no-raf .menu-nav a .mn-in{transform:none !important;}
.no-raf .trans{transform:translateY(100%) !important;}
.no-raf .cursor{display:none;}