/* =====================================================================
   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 — per PRD §4.2 / §4.4 -------------------------------------- */
@property --mesh-a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
:root {
  --black:#050505;
  --white:#F5F5F5;          /* off-white, PRD §4.2 */
  --navy:#001F3F;           /* single reserved accent */
  --navy-hi:#12539a;        /* brighter navy for interactive/glow */
  --pure:#ffffff;

  --bg:#0A0A0A;             /* near-black base, PRD §4.2 */
  --bg-2:#0d0d0f;
  --fg:#F5F5F5;
  --muted:rgba(245,245,245,0.68);
  --faint:rgba(245,245,245,0.44);
  --line:rgba(245,245,245,0.13);
  --surface:rgba(245,245,245,0.028);

  --grad-wn:linear-gradient(110deg,#F5F5F5 0%,#F5F5F5 45%,#3a6ea5 120%);

  --font-display:"Archivo","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;

  /* Motion tokens — PRD §4.4: ONE signature curve + fixed durations */
  --ease-signature:cubic-bezier(0.16,1,0.3,1);
  --ease-snap:cubic-bezier(0.65,0,0.35,1);
  --duration-fast:200ms;
  --duration-base:600ms;
  --duration-slow:1200ms;
  --grain-opacity:0.045;
  /* back-compat aliases */
  --ease:var(--ease-signature);
  --ease-io:var(--ease-snap);
  --dur:var(--duration-base);

  --z-gl:0; --z-mesh:-3; --z-grain:1; --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;
}
/* depth vignette so edges fall off into the near-black */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(125% 95% at 50% 30%, transparent 40%, rgba(0,0,0,0.72) 100%);
}
/* Ambient animated gradient-mesh (PRD §4.2) — subtle navy drift that fills the
   background so it never reads as empty; sits behind the WebGL canvas. */
/* Cheap: soft radial gradients (already blurry via transparent falloff), no
   filter:blur (that was the main FPS killer). Slow transform drift only. */
.mesh{
  position:fixed;inset:-20%;z-index:var(--z-mesh);pointer-events:none;opacity:0.9;will-change:transform;
  background:
    radial-gradient(45% 55% at 22% 26%, rgba(18,83,154,0.30), transparent 70%),
    radial-gradient(50% 60% at 84% 20%, rgba(0,31,63,0.42), transparent 68%),
    radial-gradient(58% 64% at 68% 90%, rgba(12,60,120,0.24), transparent 72%),
    radial-gradient(48% 52% at 10% 84%, rgba(0,31,63,0.32), transparent 70%);
  animation:meshDrift 30s ease-in-out infinite alternate;
}
@keyframes meshDrift{
  0%{transform:translate3d(0,0,0) scale(1.05);}
  100%{transform:translate3d(-3%,2.5%,0) scale(1.14);}
}
/* Film grain overlay (PRD §4.2) — JS sets a tiled noise data-URI as the
   background; a stepped position jitter gives an animated film-grain feel
   with zero per-frame JS cost. */
.grain{
  position:fixed;inset:-60%;z-index:var(--z-grain);pointer-events:none;
  opacity:var(--grain-opacity);mix-blend-mode:overlay;background-repeat:repeat;
  animation:grainJitter .55s steps(3) infinite;
}
@keyframes grainJitter{
  0%{transform:translate(0,0);}   20%{transform:translate(-6%,4%);}
  40%{transform:translate(4%,-5%);} 60%{transform:translate(-3%,6%);}
  80%{transform:translate(5%,3%);} 100%{transform:translate(0,0);}
}
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;}

/* keyboard focus — visible ring for a11y even though the OS cursor is hidden */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid #fff;outline-offset:3px;border-radius:2px;
}

/* 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;opacity:0;transition:opacity .25s ease;}
.cursor.ready{opacity:1;}
.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 ------------------------------------------------------ */
/* Reel is anchored to the hero only (absolute at document top, one viewport
   tall) so it never bleeds behind the content sections below the fold. */
.gl-fixed{position:absolute;top:0;left:0;width:100%;height:100svh;z-index:var(--z-gl);display:block;pointer-events:none;}
/* Normal-flow grid: an upper flexible row (headline pinned to its base) and an
   auto row for the meta block. Nothing is absolutely positioned, so the
   headline and sub-text can never overlap on any viewport height. */
.hero{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;
  gap:clamp(1.6rem,4vh,3rem);padding:clamp(7rem,16vh,11rem) var(--pad) clamp(2.2rem,6vh,4rem);z-index:var(--z-body);}
/* Full-height legibility scrim over the WebGL reel — darker top & bottom,
   marginally clearer middle, so the headline reads cleanly everywhere. */
.hero::before{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,0.5) 0%,rgba(10,10,10,0.2) 34%,rgba(10,10,10,0.55) 68%,rgba(10,10,10,0.88) 100%);
}
.hero-head{align-self:end;}
.hero-foot{display:grid;gap:1.2rem;}
.hero h1{font-size:var(--fs-giant);font-weight:600;line-height:0.88;letter-spacing:-0.02em;
  text-shadow:0 2px 60px rgba(0,0,0,0.55);}
/* Hero headline accent stays BRIGHT (white → light steel) so it never fades
   into the black background — fixes the dim/unreadable emphasised word. */
.hero h1 .grad-text{background:linear-gradient(180deg,#ffffff 0%,#c3d0e0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-sub{max-width:42ch;color:var(--fg);opacity:0.88;}
.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;margin-top:0.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);
  filter:brightness(0.8) contrast(1.03) saturate(0.85);transition:transform 1.1s var(--ease),filter .8s var(--ease);}
.media:hover img{transform:scale(1.07);filter:brightness(1) contrast(1.05) saturate(1);}
/* subtle navy unifier + top fade so any image sits in the palette */
.media-inner::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(155deg,rgba(0,31,63,0.28),transparent 55%);}
.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 — brand wipe panel (PRD §5.2) */
.trans{position:fixed;inset:0;z-index:var(--z-trans);pointer-events:none;transform:translateY(100%);
  background:linear-gradient(180deg,var(--navy) 0%,var(--bg) 100%);}
.trans::after{content:"DPE";position:absolute;left:var(--pad);bottom:var(--pad);
  font-family:var(--font-display);font-weight:700;font-size:2rem;letter-spacing:0.1em;color:var(--white);opacity:0;}

/* CLIP-PATH REVEALS (PRD §5.5) — a top Awwwards tell. JS animates to inset(0). */
.clip-up{clip-path:inset(100% 0 0 0);will-change:clip-path;}
.clip-left{clip-path:inset(0 100% 0 0);will-change:clip-path;}

/* HORIZONTAL STRIP (PRD §4.3) — native horizontal scroll + snap (robust,
   no GSAP pin which conflicted with smooth-scroll and left a dead gap). */
.hstrip{position:relative;padding-block:clamp(4rem,10vh,7rem);}
.hstrip-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem;
  padding-inline:var(--pad);margin-bottom:clamp(2rem,5vh,3.5rem);}
.hstrip-track{display:flex;gap:clamp(1.2rem,2.4vw,2.4rem);padding-inline:var(--pad);cursor:grab;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.hstrip-track:active{cursor:grabbing;}
.hstrip-track::-webkit-scrollbar{display:none;}
.hstrip-card{position:relative;flex:0 0 auto;width:min(70vw,440px);scroll-snap-align:start;}
.hstrip-card .media-inner{aspect-ratio:4/5;border-radius:14px;overflow:hidden;}
.hstrip-card .n{position:absolute;top:1.1rem;left:1.2rem;z-index:3;font-family:var(--font-display);font-size:0.8rem;letter-spacing:0.2em;color:var(--white);}
.hstrip-hint{padding-inline:var(--pad);margin-top:1.6rem;font-size:0.72rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--faint);}

/* SCRAMBLE — keep glyph box stable while characters cycle */
[data-scramble]{font-variant-ligatures:none;}
.scramble-char{display:inline-block;}

/* 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;}
  .cap{flex-wrap:wrap;gap:0.4rem;}
  .cap .cap-tag{text-align:left;}
  .footer-grid{grid-template-columns:1fr;}
  .hstrip-card{width:78vw;}
}
@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 — PRD §10: removal of motion, not slowed */
@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;}
  .clip-up,.clip-left{clip-path:none !important;}
  .mesh{animation: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 .clip-up,.no-raf .clip-left{clip-path:none !important;}
.no-raf .trans{transform:translateY(100%) !important;}
.no-raf .cursor{display:none;}