/* ==========================================================================
   RAJKUMAR — ANIME PORTFOLIO
   Palette: white / red / black — manga-poster energy, high contrast
   ========================================================================== */

:root{
  --paper: #ffffff;
  --paper-soft: #fff3f4;
  --ink: #16110f;
  --ink-soft: #3a3230;
  --red: #e6142c;
  --red-deep: #a80f21;
  --red-bright: #ff2a3f;
  --red-soft: #ffe1e4;
  --line: rgba(22,17,15,0.14);
  --line-strong: rgba(22,17,15,0.28);

  --f-display: 'Anton', 'Bebas Neue', sans-serif;
  --f-body: 'Space Grotesk', sans-serif;
  --f-mono: 'JetBrains Mono', monospace;

  --pad: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.16,.84,.3,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 128px; }
@media (max-width: 900px){ html{ scroll-padding-top: 108px; } }
@media (max-width: 560px){ html{ scroll-padding-top: 90px; } }
@media (max-width: 380px){ html{ scroll-padding-top: 78px; } }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  overflow-x: hidden;
  cursor: none;
}

img,svg{ display:block; max-width:100%; }

.bg-field{
  position: fixed; inset:0; z-index:-1; pointer-events:none;
  width:100vw; height:100vh; display:block;
}
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ margin:0; font-family: var(--f-display); text-transform:uppercase; letter-spacing: 0.5px; }
p{ margin:0; }

@media (hover:none){ body{ cursor:auto; } }

/* ---------- utility text styles ---------- */
.outline{
  -webkit-text-stroke: 1.5px var(--ink);
  color: transparent;
}
.fill{ color: var(--ink); }
.fill.accent{ color: var(--red); }
.fill-yellow{ color: var(--red); }
.fill-red{ color: var(--red); }
.arrow{ font-style:normal; color: var(--red); display:inline-block; transform: rotate(0deg); }

/* ==========================================================================
   NOISE + CURSOR
   ========================================================================== */
.noise{
  position: fixed; inset:0; z-index: 9998; pointer-events:none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cursor-ring, .cursor-dot{
  position: fixed; top:0; left:0; z-index: 10002; pointer-events:none;
  border-radius:50%; transform: translate(-50%,-50%);
  opacity:0; will-change: translate;
  transition: width .2s var(--ease), height .2s var(--ease), background .2s, border-color .2s, opacity .3s;
}
body.cursor-ready .cursor-ring, body.cursor-ready .cursor-dot{ opacity:1; }
.cursor-ring{ width:34px; height:34px; border:2px solid var(--ink); box-shadow: 0 0 0 1.5px #fff, inset 0 0 0 1.5px #fff; }
.cursor-dot{ width:8px; height:8px; background: var(--ink); box-shadow: 0 0 0 2px #fff; }
.cursor-ring.grow{ width:64px; height:64px; background: rgba(230,20,44,0.15); }
.cursor-ring.label-active{ width:88px; height:88px; background: rgba(230,20,44,0.12); }

.cursor-dot.shrink{ transform: translate(-50%,-50%) scale(0); }
@media (hover:none){ .cursor-ring, .cursor-dot{ display:none; } }

.cursor-label{
  position: fixed; top:0; left:0; z-index: 10002; pointer-events:none; will-change: translate;
  width: 88px; height:88px; transform: translate(-50%,-50%) scale(0);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.cursor-label.show{ opacity:1; transform: translate(-50%,-50%) scale(1); }
.cursor-label span{
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 2px; color: var(--ink);
  background: var(--paper); padding: 4px 10px; border-radius: 20px; border: 1px solid var(--line-strong);
}
@media (hover:none){ .cursor-label{ display:none; } }

/* ---------- cursor trail ---------- */
.cursor-trail{ display:none; position: fixed; top:0; left:0; z-index: 9996; pointer-events:none; }
.cursor-trail span{
  position:absolute; top:0; left:0; width:5px; height:5px; border-radius:50%;
  background: var(--red); transform: translate(-50%,-50%);
  opacity: 0.55;
}
.cursor-trail span:nth-child(1){ opacity:0.5; }
.cursor-trail span:nth-child(2){ opacity:0.38; background: var(--ink); }
.cursor-trail span:nth-child(3){ opacity:0.26; }
.cursor-trail span:nth-child(4){ opacity:0.16; background: var(--ink); }
@media (hover:none){ .cursor-trail{ display:none; } }

/* ---------- scroll progress + impact flash ---------- */
.scroll-progress{
  position: fixed; top:0; left:0; height: 3px; width: 0%; z-index: 9997;
  background: linear-gradient(90deg, var(--red-deep), var(--red-bright));
  box-shadow: 0 0 12px rgba(230,20,44,0.5);
}
.impact-flash{
  position: fixed; inset:0; z-index: 10001; background: var(--red);
  opacity:0; pointer-events:none;
}
.impact-flash.flash{ animation: impactFlash .5s ease-out forwards; }
@keyframes impactFlash{ 0%{ opacity:1; } 100%{ opacity:0; } }

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.preloader{
  position: fixed; inset:0; z-index: 10000;
  background: var(--paper);
  display:flex; flex-direction:column; justify-content:space-between;
  padding: var(--pad);
  transition: transform .9s var(--ease);
}
.preloader.hide{ transform: translateY(-100%); }
.preloader-top{
  display:flex; justify-content:space-between;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 2px; color: var(--red);
}
.preloader-mid{ text-align:center; }
.preloader-mid h1{
  font-size: clamp(48px, 12vw, 140px); color: var(--ink); line-height: 0.9;
}
.preloader-mid h1 span{ color: var(--red); }
.preloader-bar{ width:100%; height:3px; background: var(--line); }
.preloader-bar-fill{ height:100%; width:0%; background: linear-gradient(90deg, var(--red-deep), var(--red-bright)); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  display:flex; align-items:center; justify-content:space-between;
  padding: 3px var(--pad);
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid var(--line);
}
.logo{ display:flex; align-items:center; gap:8px; }
.logo-img{
  height: 100px; width:auto; display:block;
  transition: transform .4s var(--ease);
}
.logo:hover .logo-img{ transform: scale(1.04) rotate(-1.5deg); }
@media (max-width: 900px){ .logo-img{ height: 80px; } }
@media (max-width: 560px){ .logo-img{ height: 64px; } }
@media (max-width: 380px){ .logo-img{ height: 52px; } }

.header-status{
  display:flex; align-items:center; gap:10px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing:1.5px; color: var(--ink);
}
.header-status .dot{ width:7px; height:7px; border-radius:50%; background: var(--red); animation: pulse 1.6s infinite; }
.header-clock{ color: var(--red); opacity:0.9; }
@media (max-width: 720px){ .header-status span:not(.dot):not(.header-clock){ display:none; } }

@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(1.3);} }

/* ==========================================================================
   BOTTOM NAV BAR (all screen sizes — floating bubble on the active item)
   ========================================================================== */
.bottom-nav{
  position: fixed; left:0; right:0; bottom:0; z-index: 490;
  display:flex; align-items:flex-end; justify-content: space-evenly;
  width:100%;
  background: var(--paper); border-radius: 24px 24px 0 0;
  padding: 10px clamp(10px, 4vw, 60px) 12px;
  box-shadow:
    0 -14px 36px rgba(22,17,15,0.14),
    0 -3px 12px rgba(22,17,15,0.07),
    inset 0 1px 0 rgba(22,17,15,0.04);
}
.bnav-item{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:4px; flex: 0 1 88px; padding-top: 6px; border-radius: 16px;
  color: var(--ink-soft); transition: color .3s var(--ease);
}
.bnav-icon{ display:flex; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.bnav-icon svg{ width:20px; height:20px; }
.bnav-label{
  font-family: var(--f-mono); font-size: 8.5px; letter-spacing:0.5px; text-transform:uppercase;
  transition: color .3s var(--ease), font-weight .3s var(--ease); white-space:nowrap;
}
.bnav-bubble{
  position:absolute; top:-28px; left:50%;
  transform: translateX(-50%) scale(0);
  width:52px; height:52px; border-radius:50%;
  background: linear-gradient(135deg, var(--red-bright), var(--red-deep));
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow: 0 10px 22px rgba(230,20,44,0.45), 0 0 0 6px var(--paper);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
.bnav-bubble svg{ width:22px; height:22px; }
.bnav-item:hover .bnav-icon{ color: var(--red); transform: translateY(-2px); }
.bnav-item.active .bnav-icon{ opacity:0; transform: scale(0.5); }
.bnav-item.active .bnav-bubble{ transform: translateX(-50%) scale(1); }
.bnav-item.active .bnav-label{ color: var(--ink); font-weight:700; }
@media (max-width: 460px){
  .bnav-item{ width: 40px; }
  .bnav-label{ font-size: 7.5px; }
  .bnav-bubble{ width:44px; height:44px; top:-24px; }
  .bnav-bubble svg{ width:19px; height:19px; }
}
@media (max-width: 380px){
  .bnav-label{ display:none; }
  .bnav-item{ padding-bottom: 4px; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position: relative; min-height: 100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding: 138px var(--pad) 80px;
  overflow:hidden;
}
.hero-speedlines{
  position:absolute; inset: -10% -10%; z-index:0; pointer-events:none;
  background: repeating-conic-gradient(from 0deg, rgba(230,20,44,0.06) 0deg 1.2deg, transparent 1.2deg 6deg);
  mask-image: radial-gradient(circle at 80% 30%, black 0%, transparent 65%);
  will-change: transform;
}
.hero-halftone{
  position:absolute; right:-5%; bottom:-10%; width:50%; height:70%; z-index:0; pointer-events:none;
  background-image: radial-gradient(var(--ink) 1.6px, transparent 1.6px);
  background-size: 16px 16px;
  opacity:0.08;
  mask-image: radial-gradient(circle at 70% 40%, black 0%, transparent 70%);
  will-change: transform;
}
.ember-canvas{
  position:absolute; inset:0; z-index:1; pointer-events:none; width:100%; height:100%;
}

.hero-top{ position:relative; z-index:2; margin-bottom: 18px; }
.eyebrow{
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 3px; color: var(--red);
  border: 1px solid rgba(230,20,44,0.35); padding: 6px 14px; border-radius: 40px; display:inline-block;
  background: var(--paper-soft);
}

.hero-title{ position:relative; z-index:2; }
.hero-title .line{ display:block; overflow:hidden; padding-bottom: 0.08em; }
.hero-title .line > *{
  font-size: clamp(46px, 10.5vw, 148px);
  line-height: 0.94;
  letter-spacing: -1px;
}
.hero-title .char{
  display:inline-block; will-change: transform, opacity;
}
.hero-title .line{ white-space: normal; }

/* ---------- glitch text (RGB split, triggers via .glitching class) ---------- */
.glitch-text{ position:relative; display:inline-block; }
.glitch-text::before, .glitch-text::after{
  content: attr(data-text); position:absolute; top:0; left:0; width:100%; height:100%;
  opacity:0; pointer-events:none;
}
.glitch-text.glitching::before{
  color: var(--ink); opacity:0.8; -webkit-text-stroke:0;
  animation: glitchTop 0.35s steps(2,end);
  clip-path: inset(0 0 55% 0);
}
.glitch-text.glitching::after{
  color: var(--red-deep); opacity:0.8; -webkit-text-stroke:0;
  animation: glitchBottom 0.35s steps(2,end);
  clip-path: inset(55% 0 0 0);
}
@keyframes glitchTop{
  0%{ transform: translate(0,0); } 25%{ transform: translate(-4px,-1px); }
  50%{ transform: translate(3px,1px); } 75%{ transform: translate(-2px,0); }
  100%{ transform: translate(0,0); }
}
@keyframes glitchBottom{
  0%{ transform: translate(0,0); } 25%{ transform: translate(4px,1px); }
  50%{ transform: translate(-3px,-1px); } 75%{ transform: translate(2px,0); }
  100%{ transform: translate(0,0); }
}

.hero-bottom{
  position:relative; z-index:2;
  margin-top: 40px; display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;
}
.hero-sub{ max-width: 420px; font-size: 16px; line-height:1.6; color: var(--ink-soft); }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--f-mono); font-size: 13px; letter-spacing: 1.5px;
  padding: 15px 26px; border-radius: 40px; border: 1.5px solid var(--ink);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s, box-shadow .35s var(--ease);
  will-change: transform;
}
.btn i{ font-style:normal; transition: transform .35s var(--ease); }
.btn:hover i{ transform: translateX(4px) rotate(0deg); }
.btn-primary{ background: var(--red); border-color: var(--red); color: var(--paper); }
.btn-primary:hover{ background: var(--ink); border-color: var(--ink); box-shadow: 0 8px 30px rgba(22,17,15,0.25); }
.btn-ghost{ color: var(--ink); }
.btn-ghost:hover{ background: var(--ink); color: var(--paper); box-shadow: 0 8px 30px rgba(22,17,15,0.2); }
.magnetic{ position:relative; }

/* hero rotating badge */
.hero-badge{
  position:absolute; right: var(--pad); top: 150px; z-index:3;
  width: clamp(96px,11vw,150px); height: clamp(96px,11vw,150px);
}
.badge-spin{ width:100%; height:100%; animation: spin 14s linear infinite; }
.badge-spin text{ text-transform:uppercase; }
.badge-spin{ fill: var(--paper); }
.hero-badge::before{
  content:''; position:absolute; inset:0; border-radius:50%; background: var(--red); z-index:-1;
  box-shadow: 0 10px 30px rgba(230,20,44,0.35);
}
.badge-center{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  width: 34%; height:34%; margin:auto; background: var(--ink); border-radius:50%;
}
.badge-center svg{ width:46%; height:46%; }
.badge-center svg path{ fill: var(--paper); }
@keyframes spin{ to{ transform: rotate(360deg); } }
@media (max-width: 780px){ .hero-badge{ display:none; } }

.scroll-cue{
  position:absolute; left: var(--pad); bottom: 28px; z-index:2;
  display:flex; align-items:center; gap:12px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing:2px; color: var(--ink-soft);
}
.scroll-cue-line{ width:1px; height:36px; background: var(--line-strong); position:relative; overflow:hidden; }
.scroll-cue-line i{ position:absolute; top:-40%; left:0; width:100%; height:40%; background: var(--red); animation: scrollcue 1.8s ease-in-out infinite; }
@keyframes scrollcue{ 0%{ top:-40%; } 100%{ top:100%; } }
@media (max-width: 620px){ .scroll-cue{ display:none; } }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
/* both strips: same keyframes, same speed */
.marquee-track{
  display: flex;
  width: max-content;
  animation: marquee 22s linear infinite;   /* first strip: moves left */
  will-change: transform;
}

/* second strip: same animation and duration, just played backwards (moves right) */
.marquee-track.reverse{
  animation-direction: reverse;
}

.marquee-track span{
  flex: 0 0 auto;
  min-width: 100vw;        /* each copy fills the screen, so no gap on wide displays */
  text-align: center;
  box-sizing: border-box;
  padding: 10px 40px;
}

@keyframes marquee{
  from{ transform: translate3d(0,0,0); }
  to{   transform: translate3d(-50%,0,0); }
}
/* ==========================================================================
   ABOUT / APPROACH
   ========================================================================== */
.about{ padding: 140px var(--pad) 60px; position:relative; overflow:hidden; }

/* ---------- ambient decoration (floating sparks) ---------- */
.ambient-decor{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.spark{
  position:absolute; border-radius:50%; opacity:0.5;
  background: var(--red); box-shadow: 0 0 14px 2px rgba(230,20,44,0.4);
  animation: sparkDrift 9s ease-in-out infinite;
}
.spark-1{ width:8px; height:8px; top:12%; left:8%; animation-duration: 10s; }
.spark-2{ width:5px; height:5px; top:65%; left:92%; background: var(--ink); box-shadow: 0 0 14px 2px rgba(22,17,15,0.3); animation-duration: 12s; animation-delay: -3s; }
.spark-3{ width:6px; height:6px; top:40%; left:4%; background: var(--ink); box-shadow: 0 0 14px 2px rgba(22,17,15,0.3); animation-duration: 8s; animation-delay: -1.5s; }
.ambient-ring{
  position:absolute; top:18%; right:6%; width: 220px; height:220px; border-radius:50%;
  border: 1px solid rgba(230,20,44,0.18); animation: ringSpin 30s linear infinite;
}
.ambient-ring::before{
  content:''; position:absolute; inset: 24px; border-radius:50%; border: 1px dashed rgba(22,17,15,0.12);
}
@keyframes sparkDrift{
  0%,100%{ transform: translate(0,0); opacity:0.35; }
  50%{ transform: translate(14px,-22px); opacity:0.8; }
}
@keyframes ringSpin{ to{ transform: rotate(360deg); } }
@media (max-width: 720px){ .ambient-ring{ display:none; } }
.approach-block{
  display:flex; gap: clamp(20px,6vw,90px); padding: 56px 0; border-top: 1px solid var(--line);
  flex-wrap:wrap;
}
.approach-block:last-child{ border-bottom: 1px solid var(--line); }
.approach-num{ display:flex; flex-direction:column; gap:10px; min-width: 140px; }
.approach-num span:first-child{ font-family: var(--f-mono); font-size: 14px; color: var(--red); }
.approach-text h2 .arrow{ display:inline-block; animation: arrowPulse 2s ease-in-out infinite; }
@keyframes arrowPulse{ 0%,100%{ transform: translateX(0); } 50%{ transform: translateX(10px); } }
.approach-label{ font-family: var(--f-mono); font-size: 12px; letter-spacing:2px; color: var(--ink-soft); text-transform:uppercase; }
.approach-text{ flex:1; min-width:280px; }
.approach-text h2{ font-size: clamp(30px, 5.5vw, 64px); line-height:1.02; }
.approach-text p{ margin-top: 20px; max-width: 520px; font-size:16px; line-height:1.7; color: var(--ink-soft); }
.approach-block.alt{ flex-direction: row-reverse; text-align: right; }
.approach-block.alt .approach-num{ align-items:flex-end; }
.approach-block.alt .approach-text p{ margin-left:auto; }
@media (max-width: 720px){ .approach-block.alt{ flex-direction:column; text-align:left; } .approach-block.alt .approach-num{ align-items:flex-start; } .approach-block.alt .approach-text p{ margin-left:0; } }

/* ==========================================================================
   SECTION HEAD (shared)
   ========================================================================== */
.section-head{ padding: 0 var(--pad); max-width: 760px; margin-bottom: 50px; }
.section-kicker{ font-family: var(--f-mono); font-size: 12px; letter-spacing: 3px; color: var(--red); }
.section-head h2{ font-size: clamp(32px, 6vw, 68px); margin-top: 14px; line-height:1; }
.section-head p{ margin-top: 18px; font-size: 16px; color: var(--ink-soft); max-width: 520px; }

/* ==========================================================================
   SERVICES LIST
   ========================================================================== */
.services{ padding: 110px 0; position:relative; }
.service-list{ border-top: 1px solid var(--line); }
.service-row{
  position:relative; display:flex; align-items:center; gap: 24px;
  padding: 26px var(--pad); border-bottom: 1px solid var(--line);
  overflow:hidden; cursor: pointer;
}
.service-row::before{
  content:''; position:absolute; inset:0; background: var(--red);
  transform: translateX(-101%); transition: transform .5s var(--ease); z-index:0;
}
.service-row:hover::before{ transform: translateX(0); }
.service-row > *{ position:relative; z-index:1; }
.s-num{ font-family: var(--f-mono); font-size: 13px; color: var(--red); min-width: 46px; }
.service-row:hover .s-num{ color: var(--paper); }
.s-name{
  font-family: var(--f-display); font-size: clamp(22px, 4vw, 42px); flex:1;
  transition: transform .4s var(--ease), color .4s;
}
.service-row:hover .s-name{ transform: translateX(14px); color: var(--paper); }
.s-tags{ font-family: var(--f-mono); font-size: 11px; letter-spacing:1px; color: var(--ink-soft); opacity:0.7; }
.service-row:hover .s-tags{ color: rgba(255,255,255,0.75); opacity:1; }
.s-arrow{
  font-style:normal; color: var(--red); font-size:22px;
  transform: translateX(-10px) rotate(-45deg); opacity:0; transition: all .4s var(--ease);
}
.service-row:hover .s-arrow{ opacity:1; transform: translateX(0) rotate(0deg); color: var(--paper); }
@media (max-width: 640px){ .s-tags{ display:none; } }

/* ---------- service hover preview (cursor-follow kanji chip) ---------- */
.service-preview{
  position: fixed; top:0; left:0; z-index: 450; pointer-events:none; will-change: translate;
  width: 100px; height:100px; border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--red-deep));
  display:flex; align-items:center; justify-content:center;
  transform: translate(-50%,-50%) scale(0); opacity:0;
  transition: opacity .3s var(--ease), scale .3s var(--ease);
  box-shadow: 0 12px 40px rgba(230,20,44,0.35);
}
.service-preview.show{ opacity:1; transform: translate(-50%,-50%) scale(1); }
.service-preview span{
  font-family: var(--f-mono); font-size: 28px; letter-spacing:1px;
  color: var(--paper); font-weight:700; line-height:1;
}
@media (hover:none){ .service-preview{ display:none; } }
@media (max-width: 780px){ .service-preview{ display:none; } }

/* ==========================================================================
   PROCESS TIMELINE
   ========================================================================== */
.process{ padding: 40px var(--pad) 130px; }
.process-track{
  position:relative; max-width: 760px; margin: 0 auto;
  padding-left: 70px;
}
.process-line{
  position:absolute; left: 21px; top:6px; bottom:6px; width:4px; height:calc(100% - 12px);
  overflow:visible;
}
.process-line .track-bg{
  stroke: var(--line); stroke-width: 4;
}
.process-line .track-fill{
  stroke: var(--red); stroke-width: 4;
}
.process-step{
  position:relative; display:flex; gap: 28px; align-items:flex-start;
  padding: 34px 0; border-bottom: 1px solid var(--line);
}
.process-step:last-child{ border-bottom:none; }
.process-icon{
  position:absolute; left: -70px; top: 34px; width: 44px; height:44px; border-radius:50%;
  background: var(--paper); border: 2px solid var(--red);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-mono); font-size: 12px; color: var(--red);
  box-shadow: 0 0 0 6px var(--paper), 0 4px 14px rgba(22,17,15,0.1);
}
.process-icon em{
  position:absolute; bottom: 52px; left:50%; transform: translateX(-50%);
  font-style:normal; font-size: 13px; letter-spacing:2px; color: var(--ink-soft); opacity:0.6;
  white-space:nowrap;
}
.process-body h3{ font-size: clamp(24px, 3.5vw, 34px); }
.process-body p{ margin-top: 10px; max-width: 460px; font-size:15px; line-height:1.7; color: var(--ink-soft); }
@media (max-width: 620px){
  .process-track{ padding-left: 56px; }
  .process-line{ left: 17px; }
  .process-icon{ left: -56px; width:36px; height:36px; font-size:10px; }
  .process-icon em{ display:none; }
}

/* ==========================================================================
   WORK GRID
   ========================================================================== */
.work{ padding: 90px 0 120px; }
.work-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: 4px; padding: 0 var(--pad);
}
.work-grid{ perspective: 1200px; }
.work-card{
  position:relative; border: 1px solid var(--line); overflow:hidden; cursor:pointer;
  background: var(--paper-soft);
  transform-style: preserve-3d; will-change: transform;
}
.card-glow{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  background: radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.55), transparent 60%);
  transition: opacity .4s var(--ease);
  mix-blend-mode: overlay;
}
.work-card:hover .card-glow{ opacity:1; }
.work-card::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  border: 1.5px solid transparent; transition: border-color .4s var(--ease);
}
.work-card:hover::after{ border-color: rgba(230,20,44,0.5); }
.work-thumb{
  position:relative; aspect-ratio: 4/3; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.work-card[data-tone="red"] .work-thumb{ background: linear-gradient(135deg, var(--red), var(--red-deep)); }
.work-card[data-tone="yellow"] .work-thumb{ background: linear-gradient(135deg, #fff, var(--red-soft)); }
.work-card[data-tone="black"] .work-thumb{ background: linear-gradient(135deg, #2a2422, var(--ink)); }
.thumb-kanji{
  font-size: clamp(80px,14vw,150px); font-weight:700; color: rgba(255,255,255,0.22);
  transform: scale(1); transition: transform .6s var(--ease);
  font-family: 'Space Grotesk', sans-serif;
}
.work-card[data-tone="yellow"] .thumb-kanji{ color: rgba(230,20,44,0.18); }
.work-card:hover .thumb-kanji{ transform: scale(1.15) rotate(-4deg); }
.thumb-lines{ position:absolute; inset:0; width:100%; height:100%; }
.work-thumb img{
  width:100%; height:100%; object-fit:cover; object-position: top center;
  filter: grayscale(0.35) contrast(1.05) brightness(0.96);
  transition: transform .7s var(--ease), filter .5s var(--ease);
}
.work-card:hover .work-thumb img{ transform: scale(1.08); filter: grayscale(0) contrast(1.08) brightness(1); }
.work-thumb::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(180deg, rgba(22,17,15,0) 40%, rgba(22,17,15,0.6) 100%);
}
.work-info{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 20px 22px;
}
.work-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.work-tags span{
  font-family: var(--f-mono); font-size: 10px; letter-spacing:1px; color: var(--red);
  border: 1px solid rgba(230,20,44,0.35); border-radius:20px; padding: 3px 10px;
}
.work-info h3{
  font-size: clamp(22px, 3vw, 28px); color: var(--ink);
  transition: color .3s var(--ease), transform .35s var(--ease);
}
.work-card:hover .work-info h3{ color: var(--red); transform: translateX(4px); }
.work-card{ padding-bottom: 0; }
.work-info{ flex-direction:column; align-items:flex-start; gap:10px; position:relative; }
.work-view{ font-family: var(--f-mono); font-size: 11px; letter-spacing:1.5px; color: var(--ink-soft); transition: color .3s, transform .3s var(--ease); }
.work-card:hover .work-view{ color: var(--red); transform: translateX(6px); }

.work-footer{ display:flex; justify-content:center; margin-top: 60px; }

/* ==========================================================================
   STATS
   ========================================================================== */
.stats{ padding: 100px var(--pad) 120px; border-top: 1px solid var(--line); }
.stats-total{
  font-family: var(--f-mono); font-size: 13px; letter-spacing: 2px; color: var(--ink-soft);
  margin-bottom: 40px;
}
.stats-total span{ color: var(--red); font-size:16px; }
.stats-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 30px;
}
.stat-item{ display:flex; flex-direction:column; gap:8px; border-left: 2px solid var(--red); padding-left: 18px; }
.stat-num{ font-family: var(--f-display); font-size: clamp(40px,6vw,72px); line-height:1; color: var(--ink); }
.stat-label{ font-family: var(--f-mono); font-size:12px; letter-spacing:1.5px; color: var(--ink-soft); text-transform:uppercase; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{
  padding: 140px var(--pad); background: var(--red); color: var(--paper);
  position:relative; overflow:hidden;
}
.contact::before{
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(var(--paper) 1.4px, transparent 1.4px);
  background-size: 22px 22px; opacity:0.1; pointer-events:none;
}
.contact::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.16), transparent 60%);
}
.contact-canvas{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  width:100%; height:100%; display:block; opacity:0.85;
}
.contact-inner{ position:relative; z-index:2; max-width: 820px; }
.contact .section-kicker{ color: var(--paper); opacity:0.8; }
.contact h2{ font-size: clamp(38px, 8vw, 92px); line-height:0.98; margin-top:16px; color: var(--paper); }
.contact .outline{ -webkit-text-stroke: 1.5px var(--paper); }
.contact p{ margin-top: 24px; max-width: 480px; font-size:17px; line-height:1.6; opacity:0.9; }
.contact-email{
  margin-top: 44px; display:inline-flex; align-items:center; gap:16px;
  font-family: var(--f-display); font-size: clamp(22px,4vw,40px); color: var(--paper);
  border-bottom: 3px solid var(--paper); padding-bottom: 8px;
  position:relative;
}
.contact-email i{ transition: transform .4s var(--ease); }
.contact-email:hover i{ transform: translateX(10px); }
.copy-tip{
  display:block; margin-top:14px; font-family: var(--f-mono); font-size:12px; letter-spacing:1.5px;
  opacity:0; transform: translateY(-6px); transition: all .3s var(--ease);
}
.copy-tip.show{ opacity:0.9; transform: translateY(0); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--ink); padding: 80px var(--pad) 0; }
.footer-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 40px;
  padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-col{ display:flex; flex-direction:column; gap:12px; }
.footer-heading{ font-family: var(--f-mono); font-size: 11px; letter-spacing:2px; color: var(--red-bright); margin-bottom:6px; }
.footer-col a, .footer-text{ font-size:14px; color: rgba(255,255,255,0.7); transition: color .25s; }
.footer-col a:hover{ color: var(--red-bright); }
.footer-text{ line-height:1.6; max-width:220px; }

.footer-giant{
  text-align:center; padding: 30px 0 10px; overflow:hidden; cursor: default;
}
.footer-giant span{
  font-family: var(--f-display); font-size: clamp(56px, 14vw, 210px); color: #2a2220;
  -webkit-text-stroke: 1px rgba(255,255,255,0.12); line-height:1;
}
.footer-giant span .fchar{
  display:inline-block; transition: color .3s, -webkit-text-stroke .3s;
  will-change: transform;
}
.footer-giant:hover span .fchar{ -webkit-text-stroke: 1px rgba(255,42,63,0.5); }

/* ---------- click impact burst ---------- */
.impact-burst{
  position: fixed; z-index: 9995; pointer-events:none;
  width: 90px; height:90px; transform: translate(-50%,-50%);
}
.impact-burst svg{ width:100%; height:100%; }

.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding: 22px 0 110px; font-family: var(--f-mono); font-size:11px; letter-spacing:1.5px;
  color: rgba(255,255,255,0.45); border-top: 1px solid rgba(255,255,255,0.12);
}
.back-to-top{ cursor:pointer; transition: color .25s; }
.back-to-top:hover{ color: var(--red-bright); }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal{ opacity:0; transform: translateY(36px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform: translateY(0); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px){
  .hero{ padding-top: 116px; }
}
@media (max-width: 560px){
  .hero{ padding-top: 96px; }
}
@media (max-width: 560px){
  .site-header{ padding: 3px 18px; }
  .hero, .about, .work, .services, .stats, .contact{ padding-left: 18px; padding-right: 18px; }
  .section-head{ padding-left: 18px; padding-right: 18px; }
  .service-row{ padding-left:18px; padding-right:18px; }
  .work-grid{ padding-left:18px; padding-right:18px; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .ember-canvas, .bg-field{ display:none; }
  .work-card{ transform: none !important; }
}