/* ============================================================
   KRYSH — THE COMMERCIAL INTERIOR EXPERTS
   Primary Stylesheet
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  --black:#0A0A0A;
  --black-deep:#050505;
  --white:#FFFFFF;
  --off-white:#F5F5F0;
  --red:#C41E1E;
  --crimson:#8F1111;
  --gold:#C9A24B;
  --gold-dark:#8D6A2F;

  --ink:#EDEDE8;
  --ink-dim:#9A9A94;
  --line:rgba(245,245,240,0.10);
  --line-strong:rgba(245,245,240,0.18);

  --font-display:'Bebas Neue', 'Oswald', sans-serif;
  --font-body:'Inter', 'Manrope', sans-serif;

  --container:1440px;
  --gutter:clamp(24px, 5vw, 80px);

  --ease:cubic-bezier(.16,.84,.44,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
body{
  background:var(--black);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button,input,select,textarea{ font-family:inherit; color:inherit; }
h1,h2,h3{ font-family:var(--font-display); font-weight:400; letter-spacing:0.01em; line-height:0.98; }
::selection{ background:var(--red); color:var(--white); }

/* Visible keyboard focus */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* Thin scrollbar */
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--black); }
::-webkit-scrollbar-thumb{ background:#2a2a28; border-radius:0; }
::-webkit-scrollbar-thumb:hover{ background:var(--red); }

/* ---------- Custom cursor (desktop only, added via main.js) ---------- */
.custom-cursor{
  position:fixed; top:0; left:0; width:9px; height:9px;
  border-radius:50%; background:var(--red);
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .25s var(--ease-soft), height .25s var(--ease-soft), background-color .25s var(--ease-soft), border-color .25s var(--ease-soft);
  mix-blend-mode:difference;
  display:none;
}
body.cursor-ready .custom-cursor{ display:block; }
.custom-cursor.cursor-hover{
  width:44px; height:44px;
  background:transparent;
  border:1px solid var(--gold);
}

/* ---------- Layout helpers ---------- */
.section-header{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}
.section-label{
  display:inline-block;
  font-size:12px;
  letter-spacing:0.18em;
  color:var(--gold);
  border-top:1px solid var(--gold-dark);
  padding-top:10px;
  margin-bottom:28px;
}
.section-subtitle{
  display:block;
  font-size:14px;
  letter-spacing:0.02em;
  color:var(--ink-dim);
  max-width:34ch;
  margin-bottom:14px;
}
.section-content{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* ---------- Reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(40px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-left{ opacity:0; transform:translateX(-60px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-left.is-visible{ opacity:1; transform:translateX(0); }
.reveal-right{ opacity:0; transform:translateX(60px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-right.is-visible{ opacity:1; transform:translateX(0); }
.reveal-scale{ opacity:0; transform:scale(0.85); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-scale.is-visible{ opacity:1; transform:scale(1); }
.reveal-rotate{ opacity:0; transform:rotate(-5deg) scale(0.9); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-rotate.is-visible{ opacity:1; transform:rotate(0) scale(1); }
.reveal-blur{ opacity:0; filter:blur(10px); transform:translateY(20px); transition:opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); }
.reveal-blur.is-visible{ opacity:1; filter:blur(0); transform:translateY(0); }

.reveal-stagger > *{ opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-stagger.is-visible > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:.12s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:.19s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:.26s; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay:.33s; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay:.40s; }
.reveal-stagger.is-visible > *:nth-child(7){ transition-delay:.47s; }
.reveal-stagger.is-visible > *:nth-child(8){ transition-delay:.54s; }

.reveal-stagger-left > *{ opacity:0; transform:translateX(-40px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-stagger-left.is-visible > *{ opacity:1; transform:translateX(0); }
.reveal-stagger-left.is-visible > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger-left.is-visible > *:nth-child(2){ transition-delay:.12s; }
.reveal-stagger-left.is-visible > *:nth-child(3){ transition-delay:.19s; }
.reveal-stagger-left.is-visible > *:nth-child(4){ transition-delay:.26s; }
.reveal-stagger-left.is-visible > *:nth-child(5){ transition-delay:.33s; }

.reveal-stagger-scale > *{ opacity:0; transform:scale(0.8); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-stagger-scale.is-visible > *{ opacity:1; transform:scale(1); }
.reveal-stagger-scale.is-visible > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger-scale.is-visible > *:nth-child(2){ transition-delay:.12s; }
.reveal-stagger-scale.is-visible > *:nth-child(3){ transition-delay:.19s; }
.reveal-stagger-scale.is-visible > *:nth-child(4){ transition-delay:.26s; }

/* Text split animation */
.split-text > span{ display:inline-block; opacity:0; transform:translateY(100%); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.split-text.is-visible > span{ opacity:1; transform:translateY(0); }

/* Line draw animation */
.line-draw{ width:0; transition:width 1.2s var(--ease); }
.line-draw.is-visible{ width:100%; }

/* Counter animation */
.counter-animate{ transition:transform .3s var(--ease-soft); }
.counter-animate:hover{ transform:scale(1.05); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:17px 34px;
  font-size:13px; letter-spacing:0.12em;
  border:1px solid var(--line-strong);
  transition:all .4s var(--ease-soft);
  cursor:pointer; background:transparent;
  position:relative; overflow:hidden;
}
.btn::before{
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition:left .5s var(--ease-soft);
}
.btn:hover::before{ left:100%; }
.btn-primary{ background:var(--red); border-color:var(--red); color:var(--white); }
.btn-primary:hover{ background:var(--crimson); border-color:var(--crimson); transform:translateY(-3px); box-shadow:0 10px 30px rgba(196,30,30,0.3); }
.btn-secondary{ color:var(--off-white); }
.btn-secondary:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-3px); box-shadow:0 10px 30px rgba(201,162,75,0.15); }
.cta-btn{
  padding:13px 26px; font-size:12px; letter-spacing:0.12em;
  border:1px solid var(--red); color:var(--off-white);
  transition:all .4s var(--ease-soft);
  position:relative; overflow:hidden;
}
.cta-btn::before{
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition:left .5s var(--ease-soft);
}
.cta-btn:hover::before{ left:100%; }
.cta-btn:hover{ background:var(--red); color:var(--white); transform:translateY(-2px); box-shadow:0 8px 25px rgba(196,30,30,0.35); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.main-nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:26px var(--gutter);
  display:flex;
  background:linear-gradient(to bottom, rgba(5,5,5,0.65), transparent);
  transition:padding .4s var(--ease-soft), background-color .4s var(--ease-soft), box-shadow .4s var(--ease-soft), backdrop-filter .4s var(--ease-soft);
}
.main-nav.is-scrolled{
  padding:16px var(--gutter);
  background:rgba(6,6,6,0.86);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
}
.nav-container{
  width:100%; max-width:var(--container); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo{ display:flex; align-items:center; opacity:0; transform:translateY(-14px); animation:navIn .8s var(--ease) .15s forwards; }
.nav-logo img{ height:70px; width:auto; transition:height .4s var(--ease-soft); }
.main-nav.is-scrolled .nav-logo img{ height:56px; }
.nav-links{ display:flex; gap:44px; }
.nav-link{
  position:relative; font-size:12px; letter-spacing:0.14em;
  color:var(--ink-dim);
  padding-bottom:4px;
  opacity:0; transform:translateY(-10px); animation:navIn .7s var(--ease) forwards;
}
.nav-links li:nth-child(1) .nav-link{ animation-delay:.22s; }
.nav-links li:nth-child(2) .nav-link{ animation-delay:.28s; }
.nav-links li:nth-child(3) .nav-link{ animation-delay:.34s; }
.nav-links li:nth-child(4) .nav-link{ animation-delay:.40s; }
.nav-links li:nth-child(5) .nav-link{ animation-delay:.46s; }
.nav-link::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--red); transition:width .35s var(--ease-soft);
}
.nav-link:hover{ color:var(--off-white); }
.nav-link:hover::after{ width:100%; }
.nav-container > .cta-btn{ opacity:0; transform:translateY(-10px); animation:navIn .7s var(--ease) .5s forwards; }
@keyframes navIn{ to{ opacity:1; transform:translateY(0); } }

/* Mobile toggle */
.menu-toggle{
  display:none; position:fixed; top:24px; right:var(--gutter); z-index:600;
  width:42px; height:42px; border:1px solid var(--line-strong); background:rgba(10,10,10,.5);
  align-items:center; justify-content:center; cursor:pointer;
}
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after{
  content:''; display:block; width:18px; height:1px; background:var(--off-white);
  position:relative; transition:transform .3s var(--ease-soft), opacity .3s var(--ease-soft);
}
.menu-toggle span::before{ position:absolute; top:-6px; }
.menu-toggle span::after{ position:absolute; top:6px; }
.menu-toggle.is-active span{ background:transparent; }
.menu-toggle.is-active span::before{ top:0; transform:rotate(45deg); }
.menu-toggle.is-active span::after{ top:0; transform:rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:550;
  background:var(--black-deep);
  padding:26px var(--gutter);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .5s var(--ease);
  visibility:hidden;
}
.mobile-menu.is-open{ transform:translateX(0); visibility:visible; }
.mobile-header{ display:flex; align-items:center; justify-content:space-between; }
.mobile-logo img{ height:60px; }
.mobile-close{ background:none; border:none; font-size:32px; color:var(--off-white); cursor:pointer; line-height:1; }
.mobile-links{ margin-top:auto; }
.mobile-link{
  display:block; font-family:var(--font-display); font-size:44px; letter-spacing:0.02em;
  color:var(--off-white); padding:12px 0; border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.mobile-menu.is-open .mobile-link{ opacity:1; transform:translateY(0); }
.mobile-menu.is-open .mobile-links li:nth-child(1) .mobile-link{ transition-delay:.1s; }
.mobile-menu.is-open .mobile-links li:nth-child(2) .mobile-link{ transition-delay:.16s; }
.mobile-menu.is-open .mobile-links li:nth-child(3) .mobile-link{ transition-delay:.22s; }
.mobile-menu.is-open .mobile-links li:nth-child(4) .mobile-link{ transition-delay:.28s; }
.mobile-menu.is-open .mobile-links li:nth-child(5) .mobile-link{ transition-delay:.34s; }
.mobile-link:hover{ color:var(--red); }
.mobile-cta{ margin-top:auto; padding-top:40px; }
.mobile-cta-btn{
  display:block; text-align:center; padding:18px; background:var(--red); color:var(--white);
  font-size:13px; letter-spacing:0.12em;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:var(--black-deep);
}
.hero-bg-layer{
  position:absolute; inset:-6% -6%; z-index:1;
  background-size:cover; background-position:center 30%; background-repeat:no-repeat;
  opacity:0;
  transition:opacity 1.1s var(--ease-soft);
  will-change:opacity;
}
.hero-bg-layer::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 50% at 78% 20%, rgba(196,30,30,0.16), transparent 60%),
             linear-gradient(200deg, rgba(23,17,12,0.55) 0%, rgba(5,5,5,0.75) 55%, rgba(5,5,5,0.92) 100%);
}

.hero-bg-layer + .hero-bg-layer::before{
  background:radial-gradient(ellipse 60% 50% at 78% 20%, rgba(196,30,30,0.08), transparent 60%),
             linear-gradient(200deg, rgba(23,17,12,0.15) 0%, rgba(5,5,5,0.3) 55%, rgba(5,5,5,0.5) 100%);
}

.hero-bg-layer::after{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(245,245,240,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,245,240,0.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to top, black, transparent 75%);
}
.hero-bg-layer.active{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .hero-bg-layer{ transition:opacity .3s ease; } }
.hero-overlay{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(0deg, var(--black) 6%, rgba(10,10,10,0.35) 42%, rgba(10,10,10,0.15) 100%),
             linear-gradient(90deg, rgba(5,5,5,0.55) 0%, transparent 55%);
}
.hero-dots{
  position:absolute; right:var(--gutter); top:50%; transform:translateY(-50%); z-index:4;
  display:flex; flex-direction:column; gap:14px;
}
.hero-dot{
  width:7px; height:7px; border-radius:50%; background:var(--ink-dim); opacity:.4;
  cursor:pointer; transition:.3s var(--ease-soft);
}
.hero-dot:hover{ opacity:.75; }
.hero-dot.active{ background:var(--red); opacity:1; transform:scale(1.4); }
.hero-progress{
  position:absolute; left:0; right:0; bottom:0; z-index:4; height:3px; background:var(--line);
}
.hero-progress-fill{
  height:100%; width:0%; background:var(--red);
  box-shadow:0 0 10px rgba(196,30,30,0.6); transition:width .08s linear;
}
@media(max-width:720px){
  .hero-dots{ right:auto; left:50%; top:auto; bottom:22px; transform:translateX(-50%); flex-direction:row; gap:10px; }
  .nav-logo img{ height:42px; }
  .main-nav.is-scrolled .nav-logo img{ height:34px; }
  .mobile-logo img{ height:46px; }
  .footer-logo img{ height:36px; }
  .footer-logo:hover img{ height:40px; }
}
.hero-content{
  position:relative; z-index:3;
  width:100%; max-width:var(--container); margin:0 auto;
  padding:0 var(--gutter) 9vh;
}
.hero-eyebrow{
  font-size:12px; letter-spacing:0.22em; color:var(--gold);
  opacity:0; transform:translateY(16px);
  animation:heroIn .8s var(--ease) .3s forwards;
}
.hero-content h1{
  font-size:clamp(84px, 15vw, 220px);
  color:var(--off-white);
  margin-top:6px;
  overflow:hidden;
}
.hero-content h1 span{
  display:inline-block;
  opacity:0; transform:translateY(100%);
  animation:heroIn .9s var(--ease) .48s forwards;
}
.hero-content h2{
  font-size:clamp(26px, 4.4vw, 58px);
  color:transparent;
  -webkit-text-stroke:1px var(--off-white);
  margin-top:-6px;
  max-width:16ch;
  opacity:0; transform:translateY(16px);
  animation:heroIn .8s var(--ease) .66s forwards;
}
.hero-content p{
  margin-top:22px; max-width:38ch;
  font-size:16px; color:var(--ink-dim); font-weight:300;
  opacity:0; transform:translateY(16px);
  animation:heroIn .8s var(--ease) .8s forwards;
}
.hero-cta{
  display:flex; gap:18px; margin-top:38px;
  opacity:0; transform:translateY(16px);
  animation:heroIn .8s var(--ease) .94s forwards;
}
.hero-divider{
  margin-top:56px; height:1px; width:0;
  background:linear-gradient(90deg, var(--red), transparent);
  animation:heroLine 1.1s var(--ease) 1.1s forwards;
}
@keyframes heroIn{ to{ opacity:1; transform:translateY(0); } }
@keyframes heroLine{ to{ width:220px; } }

/* ============================================================
   BRAND STATEMENT
   ============================================================ */
.brand-statement{ padding:180px 0 140px; }
.brand-statement h2{
  font-size:clamp(34px, 5.4vw, 68px);
  color:var(--off-white);
  max-width:20ch;
  margin-top:6px;
}
.section-content{ margin-top:64px; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.brand-logo-wrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.brand-logo{ max-width:320px; width:100%; height:auto; opacity:1; transition:transform .4s var(--ease-soft); }
.brand-logo:hover{ transform:scale(1.03); }
.brand-text p{ font-size:19px; line-height:1.7; color:var(--ink); max-width:48ch; }
.section-content .section-typography{ margin-top:40px; }
.section-typography{ display:flex; flex-direction:column; gap:14px; align-items:flex-end; }
.section-typography span{
  font-family:var(--font-display); font-size:clamp(24px,3vw,40px);
  color:transparent; -webkit-text-stroke:1.5px var(--line-strong);
  transition:all .4s var(--ease-soft);
}
.section-typography span:hover{ color:var(--red); -webkit-text-stroke:1.5px var(--red); transform:translateX(-10px); }

@media(max-width:900px){
  .brand-statement{ padding:100px 0 80px; }
  .section-content{ grid-template-columns:1fr; gap:50px; text-align:center; }
  .brand-logo-wrap{ order:1; }
  .brand-logo{ max-width:220px; }
  .brand-text{ order:2; }
  .brand-text p{ margin:0 auto; }
  .section-typography{ align-items:center; }
}

/* ============================================================
   SERVICES
   ============================================================ */
.services{ padding:120px 0; border-top:1px solid var(--line); }
.services .section-header h2{ font-size:clamp(40px,6vw,84px); color:var(--off-white); }
.services-grid{
  max-width:var(--container); margin:70px auto 0; padding:0 var(--gutter);
  display:grid; grid-template-columns:repeat(3, 1fr);
}
.service-card{
  padding:44px 34px; border-top:1px solid var(--line-strong); border-left:1px solid var(--line);
  transition:all .5s var(--ease-soft);
  position:relative; overflow:hidden;
}
.service-card:nth-child(3n+1){ border-left:none; }
.service-card:hover{ background:rgba(196,30,30,0.06); transform:translateY(-5px); box-shadow:0 15px 40px rgba(0,0,0,0.3); }
.service-image{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  opacity:0.12; transition:all .6s var(--ease-soft);
}
.service-card:hover .service-image{ opacity:0.28; transform:scale(1.1); }
.service-content{ position:relative; z-index:1; }
.service-index{ font-size:12px; color:var(--gold); letter-spacing:0.1em; transition:transform .4s var(--ease-soft); display:inline-block; }
.service-card:hover .service-index{ transform:translateX(5px); }
.service-card h3{
  font-family:var(--font-display); font-size:28px; font-weight:400;
  color:var(--off-white); margin:22px 0 14px; letter-spacing:0.01em;
  transition:color .3s var(--ease-soft);
}
.service-card:hover h3{ color:var(--red); }
.service-card p{ font-size:14.5px; color:var(--ink-dim); line-height:1.7; max-width:32ch; }

/* ============================================================
   SELECTED WORK / PROJECTS
   ============================================================ */
.selected-work{ padding:120px 0; border-top:1px solid var(--line); }
.selected-work .section-header h2{ font-size:clamp(40px,6vw,84px); color:var(--off-white); }
.projects-filter{
  max-width:var(--container); margin:56px auto 0; padding:0 var(--gutter);
  display:flex; gap:8px; flex-wrap:wrap;
}
.filter-btn{
  background:transparent; border:1px solid var(--line-strong); color:var(--ink-dim);
  padding:10px 22px; font-size:11.5px; letter-spacing:0.12em; cursor:pointer;
  transition:all .4s var(--ease-soft);
  position:relative; overflow:hidden;
}
.filter-btn::before{
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition:left .5s var(--ease-soft);
}
.filter-btn:hover::before{ left:100%; }
.filter-btn:hover{ color:var(--off-white); border-color:var(--ink-dim); transform:translateY(-2px); }
.filter-btn.active{ background:var(--red); border-color:var(--red); color:var(--white); box-shadow:0 5px 20px rgba(196,30,30,0.3); }

.projects-grid{
  max-width:var(--container); margin:48px auto 0; padding:0 var(--gutter);
  display:grid; grid-template-columns:repeat(2, 1fr); gap:2px;
}
.project-card{
  position:relative; aspect-ratio:4/3; overflow:hidden; cursor:pointer;
  background:linear-gradient(150deg, #1a1512, #0a0a0a 60%);
  transition:all .5s var(--ease-soft);
}
.project-card.is-hidden{ display:none; }
.project-card:hover{ box-shadow:0 20px 50px rgba(0,0,0,0.5); z-index:1; }
.project-image{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  transition:all .7s var(--ease-soft);
}
.project-card:hover .project-image{ transform:scale(1.1); filter:brightness(1.1); }
.project-card::before{
  content:''; position:absolute; inset:0; z-index:1;
  background-image:
    linear-gradient(rgba(245,245,240,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,245,240,0.045) 1px, transparent 1px);
  background-size:40px 40px;
  transition:opacity .5s var(--ease-soft);
}
.project-card:hover::before{ opacity:0.3; }
.project-card::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(5,5,5,0.92) 0%, rgba(5,5,5,0.15) 55%, rgba(5,5,5,0.55) 100%);
  transition:background .5s var(--ease-soft);
}
.project-card:hover::after{ background:linear-gradient(0deg, rgba(5,5,5,0.85) 0%, rgba(5,5,5,0.1) 55%, rgba(5,5,5,0.4) 100%); }
.project-card .project-glow{
  position:absolute; width:60%; height:60%; border-radius:50%;
  background:radial-gradient(circle, rgba(196,30,30,0.24), transparent 70%);
  top:10%; left:20%; filter:blur(30px);
  transition:all .7s var(--ease-soft);
}
.project-card:hover .project-glow{ transform:scale(1.4); opacity:0.8; }
.project-info{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:30px;
  display:flex; justify-content:space-between; align-items:flex-end;
  transform:translateY(15px); transition:transform .5s var(--ease-soft);
}
.project-card:hover .project-info{ transform:translateY(0); }
.project-category{ font-size:11px; letter-spacing:0.14em; color:var(--gold); display:block; margin-bottom:8px; transition:letter-spacing .3s var(--ease-soft); }
.project-card:hover .project-category{ letter-spacing:0.2em; }
.project-info h3{ font-family:var(--font-display); font-size:30px; color:var(--off-white); font-weight:400; max-width:14ch; transition:color .3s var(--ease-soft); }
.project-card:hover .project-info h3{ color:var(--red); }
.project-arrow{
  width:44px; height:44px; border:1px solid var(--line-strong); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--off-white); font-size:16px;
  transition:all .5s var(--ease-soft);
}
.project-card:hover .project-arrow{ background:var(--red); border-color:var(--red); transform:rotate(45deg) scale(1.1); }

/* ============================================================
   CINEMATIC SECTION
   ============================================================ */
.cinematic-section{
  position:relative; min-height:70vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:var(--black-deep);
}
.cinematic-section::before{
  content:''; position:absolute; inset:-10%; z-index:0;
  background:
    radial-gradient(ellipse 50% 60% at 20% 30%, rgba(201,162,75,0.10), transparent 60%),
    radial-gradient(ellipse 55% 65% at 85% 75%, rgba(196,30,30,0.14), transparent 60%),
    linear-gradient(160deg, rgba(16,12,10,0.72), rgba(5,5,5,0.88) 70%),
    url('https://images.unsplash.com/photo-1764795849755-ab58c8fef307?auto=format&fit=crop&w=2200&q=80')
      center / cover no-repeat;
  will-change:transform;
}
.cinematic-content{ position:relative; z-index:1; text-align:center; padding:0 var(--gutter); }
.cinematic-text span{ font-size:12px; letter-spacing:0.2em; color:var(--gold); }
.cinematic-text h2{
  margin-top:20px; font-size:clamp(34px,6vw,86px); color:var(--off-white); max-width:22ch; margin-inline:auto;
}

/* ============================================================
   ABOUT
   ============================================================ */
.about{ padding:140px 0; border-top:1px solid var(--line); }
.about .section-header h2{ font-size:clamp(34px,5.4vw,68px); color:var(--off-white); max-width:18ch; }
.about-content{
  max-width:var(--container); margin:64px auto 0; padding:0 var(--gutter);
  display:grid; grid-template-columns:1fr 0.9fr; gap:90px; align-items:center;
}
.about-text p{ font-size:17px; line-height:1.75; color:var(--ink-dim); max-width:50ch; margin-bottom:20px; }
.about-highlights{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:44px; }
.highlight{ border-top:1px solid var(--gold-dark); padding-top:14px; transition:all .4s var(--ease-soft); }
.highlight:hover{ border-top-color:var(--red); transform:translateY(-3px); }
.highlight-number{ display:block; font-family:var(--font-display); font-size:34px; color:var(--red); transition:transform .3s var(--ease-soft); }
.highlight:hover .highlight-number{ transform:scale(1.1); }
.highlight-label{ display:block; font-size:12px; letter-spacing:0.14em; color:var(--ink-dim); margin-top:6px; transition:color .3s var(--ease-soft); }
.highlight:hover .highlight-label{ color:var(--off-white); }
.about-image{
  aspect-ratio:3/4; position:relative; overflow:hidden;
  background:
    linear-gradient(160deg, rgba(23,19,16,0.25) 0%, rgba(10,10,10,0.55) 60%),
    url('https://images.unsplash.com/photo-1504297050568-910d24c426d3?auto=format&fit=crop&w=1600&q=80')
      center / cover no-repeat;
  border:1px solid var(--line);
  transition:all .6s var(--ease-soft);
}
.about-image:hover{ border-color:var(--gold); transform:scale(1.02); box-shadow:0 20px 50px rgba(0,0,0,0.4); }
.about-image::before{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(245,245,240,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(245,245,240,0.05) 1px, transparent 1px);
  background-size:36px 36px;
}
.about-image::after{
  content:''; position:absolute; width:1px; height:70%; right:14%; top:15%;
  background:linear-gradient(to bottom, transparent, var(--gold), transparent);
  opacity:.6;
}

/* ============================================================
   STATS
   ============================================================ */
.stats{ padding:90px 0; background:var(--black-deep); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stats-grid{
  max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.stat{ text-align:left; padding-right:30px; border-left:1px solid var(--line); padding-left:26px; transition:all .4s var(--ease-soft); }
.stat:first-child{ border-left:none; padding-left:0; }
.stat:hover{ background:rgba(196,30,30,0.04); transform:translateY(-3px); }
.stat-number{ font-family:var(--font-display); font-size:clamp(46px,5vw,72px); color:var(--off-white); display:flex; align-items:baseline; gap:4px; transition:color .3s var(--ease-soft); }
.stat:hover .stat-number{ color:var(--red); }
.stat-number .stat-suffix{ font-size:0.4em; color:var(--red); transition:transform .3s var(--ease-soft); display:inline-block; }
.stat:hover .stat-suffix{ transform:scale(1.2); }
.stat-label{ margin-top:10px; font-size:12.5px; letter-spacing:0.08em; color:var(--ink-dim); transition:color .3s var(--ease-soft); }
.stat:hover .stat-label{ color:var(--off-white); }

/* ============================================================
   PROCESS
   ============================================================ */
.process{ padding:140px 0; }
.process .section-header{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; }
.process .section-header h2{ font-size:clamp(40px,6vw,84px); color:var(--off-white); }
.process .section-subtitle{ font-family:var(--font-display); letter-spacing:0.04em; font-size:15px; color:var(--gold); max-width:none; margin-bottom:0; }
.process-grid{
  max-width:var(--container); margin:70px auto 0; padding:0 var(--gutter);
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line);
}
.process-step{ background:var(--black); padding:38px 26px; position:relative; overflow:hidden; transition:all .5s var(--ease-soft); }
.process-step:hover{ background:rgba(196,30,30,0.04); transform:translateY(-5px); z-index:1; }
.process-image{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  opacity:0.25; transition:all .6s var(--ease-soft);
}
.process-step:hover .process-image{ opacity:0.4; transform:scale(1.1); }
.process-content{ position:relative; z-index:1; background:rgba(10,10,10,0.7); padding:10px; margin:-10px; border-radius:4px; }
.process-num{ font-family:var(--font-display); font-size:46px; color:var(--red); opacity:.85; transition:all .4s var(--ease-soft); display:inline-block; }
.process-step:hover .process-num{ opacity:1; transform:scale(1.1); }
.process-step h3{ font-size:18px; font-weight:500; color:var(--off-white); margin:18px 0 10px; transition:color .3s var(--ease-soft); }
.process-step:hover h3{ color:var(--red); }
.process-step p{ font-size:13.5px; color:var(--ink-dim); line-height:1.65; }

/* ============================================================
   WHY KRYSH
   ============================================================ */
.why-krysh{ padding:140px 0; border-top:1px solid var(--line); }
.why-krysh .section-header h2{ font-size:clamp(40px,6vw,84px); color:var(--off-white); }
.why-grid{
  max-width:var(--container); margin:70px auto 0; padding:0 var(--gutter);
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px 60px;
}
.why-item{ display:flex; gap:24px; padding:30px 0; border-top:1px solid var(--line); position:relative; overflow:hidden; transition:all .5s var(--ease-soft); }
.why-item:hover{ padding-left:10px; background:rgba(196,30,30,0.03); }
.why-image{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  opacity:0.06; transition:all .6s var(--ease-soft);
}
.why-item:hover .why-image{ opacity:0.18; transform:scale(1.05); }
.why-mark{ font-family:var(--font-display); font-size:15px; color:var(--gold); letter-spacing:0.08em; padding-top:4px; position:relative; z-index:1; transition:all .3s var(--ease-soft); }
.why-item:hover .why-mark{ letter-spacing:0.12em; color:var(--red); }
.why-item h3{ font-size:19px; font-weight:500; color:var(--off-white); margin-bottom:8px; position:relative; z-index:1; transition:color .3s var(--ease-soft); }
.why-item:hover h3{ color:var(--red); }
.why-item p{ font-size:14.5px; color:var(--ink-dim); line-height:1.7; max-width:44ch; position:relative; z-index:1; }

/* ============================================================
   BEFORE & AFTER
   ============================================================ */
.before-after{ padding:160px 0 120px; background:var(--black); }
.before-after .section-header h2{ font-size:clamp(30px,4vw,48px); color:var(--off-white); max-width:22ch; margin-top:6px; }
.compare-wrap{ max-width:var(--container); margin:56px auto 0; padding:0 var(--gutter); }
.compare-box{
  position:relative; width:100%; aspect-ratio:16/8; overflow:hidden; border-radius:4px;
  background:#000; touch-action:none; user-select:none; -webkit-user-select:none;
  border:1px solid var(--line-strong);
}
@media(max-width:720px){ .compare-box{ aspect-ratio:4/5; } }
.compare-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.compare-before{
  clip-path:inset(0 50% 0 0);
  filter:grayscale(65%) brightness(.62) contrast(.92);
  will-change:clip-path;
}
.compare-handle{
  position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--red); z-index:2;
  box-shadow:0 0 14px rgba(196,30,30,.6); cursor:ew-resize; touch-action:none; will-change:left;
}
.compare-handle::after{
  content:'⇔'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; background:var(--red); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.compare-tag{
  position:absolute; top:22px; font-size:11px; letter-spacing:.14em; color:var(--white);
  background:rgba(0,0,0,.55); padding:8px 14px; z-index:1; font-weight:500;
}
.compare-tag-before{ left:22px; }
.compare-tag-after{ right:22px; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials{ padding:140px 0; background:var(--black-deep); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.testimonials .section-header h2{ font-size:clamp(40px,6vw,84px); color:var(--off-white); }
.testimonials-slider{
  max-width:var(--container); margin:70px auto 0; padding:0 var(--gutter);
  display:flex; gap:0; overflow:hidden; position:relative;
  scrollbar-width:none; cursor:grab; touch-action:pan-y;
}
.testimonials-slider:active{ cursor:grabbing; }
.testimonials-slider::before,
.testimonials-slider::after{
  content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;
}
.testimonials-slider::before{ left:0; background:linear-gradient(to right, var(--black-deep), transparent); }
.testimonials-slider::after{ right:0; background:linear-gradient(to left, var(--black-deep), transparent); }
.testimonials-track{
  display:flex; gap:0; animation:testimonialScroll 30s linear infinite;
}
.testimonials-slider:hover .testimonials-track{ animation-play-state:paused; }
@media(max-width:768px){
  .testimonials-track:hover{ animation-play-state:paused; }
}
@keyframes testimonialScroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
.testimonials-slider::-webkit-scrollbar{ display:none; }
.testimonial-card{
  min-width:min(640px, 84vw); scroll-snap-align:start;
  border-left:1px solid var(--gold-dark); padding:0 50px 0 34px;
  flex-shrink:0;
}
.testimonial-card:first-child{ padding-left:0; border-left:none; }
.testimonial-quote{ font-family:var(--font-display); font-size:clamp(22px,2.6vw,32px); color:var(--off-white); font-weight:400; line-height:1.3; letter-spacing:0.005em; word-wrap:break-word; overflow-wrap:break-word; hyphens:auto; max-width:50ch; }
.testimonial-author{ margin-top:28px; font-size:13.5px; color:var(--ink-dim); display:flex; align-items:center; gap:14px; }
.testimonial-image{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:1px solid var(--gold-dark); }
.testimonial-author strong{ color:var(--off-white); font-weight:500; }

@media(max-width:768px){
  .testimonials-slider{ overflow-y:hidden; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; }
  .testimonials-track{ animation:none; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:0; }
  .testimonial-card{ min-width:85vw; padding:0 24px 0 20px; }
  .testimonial-card:first-child{ padding-left:24px; }
  .testimonial-quote{ font-size:20px; }
  .testimonials-slider::before,
  .testimonials-slider::after{ display:none; }
}

/* ============================================================
   CTA
   ============================================================ */
.cta{ padding:150px 0; text-align:center; position:relative; overflow:hidden; }
.cta::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 100%, rgba(196,30,30,0.14), transparent 65%),
    url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=2400&q=80')
      center / cover no-repeat;
  opacity:0.15;
}
.cta-content{ position:relative; max-width:900px; margin:0 auto; padding:0 var(--gutter); }
.cta-text h2{ font-size:clamp(36px,6vw,72px); color:var(--off-white); }
.cta-text p{ margin-top:20px; font-size:17px; color:var(--ink-dim); }
.cta-buttons{ margin-top:44px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ padding:140px 0; border-top:1px solid var(--line); }
.contact .section-header h2{ font-size:clamp(34px,5.4vw,66px); color:var(--off-white); max-width:20ch; }
.contact-container{
  max-width:var(--container); margin:70px auto 0; padding:0 var(--gutter);
  display:grid; grid-template-columns:0.8fr 1.2fr; gap:90px;
}
.contact-address{ font-family:var(--font-display); font-size:32px; color:var(--off-white); line-height:1.25; }
.contact-details{ margin-top:44px; display:flex; flex-direction:column; gap:18px; }
.detail-item{ display:flex; align-items:center; gap:14px; }
.detail-icon{ font-size:15px; opacity:.7; }
.detail-link{ font-size:15px; color:var(--ink-dim); border-bottom:1px solid transparent; transition:all .3s var(--ease-soft); }
.detail-link:hover{ color:var(--gold); border-color:var(--gold); transform:translateX(5px); }

.contact-form{ display:grid; grid-template-columns:1fr 1fr; gap:26px 24px; }
.form-group{ display:flex; flex-direction:column; gap:8px; }
.form-group:has(#message){ grid-column:1 / -1; }
.form-group label{ font-size:11.5px; letter-spacing:0.1em; color:var(--ink-dim); }
.form-group input,
.form-group select,
.form-group textarea{
  background:transparent; border:none; border-bottom:1px solid var(--line-strong);
  padding:10px 2px; font-size:15px; color:var(--off-white);
  transition:all .4s var(--ease-soft);
}
.form-group select{ appearance:none; -webkit-appearance:none; }
.form-group select option{ background:var(--black); color:var(--off-white); }
.form-group input::placeholder,
.form-group textarea::placeholder{ color:#5c5c58; transition:color .3s var(--ease-soft); }
.form-group input:focus::placeholder,
.form-group textarea:focus::placeholder{ color:transparent; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{ border-color:var(--red); outline:none; transform:translateY(-2px); }
.form-group textarea{ resize:vertical; min-height:60px; }
.btn-submit{
  grid-column:1 / -1; margin-top:12px;
  background:var(--red); color:var(--white); border:1px solid var(--red);
  padding:18px; font-size:13px; letter-spacing:0.12em; cursor:pointer;
  transition:all .4s var(--ease-soft);
  position:relative; overflow:hidden;
}
.btn-submit::before{
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition:left .5s var(--ease-soft);
}
.btn-submit:hover::before{ left:100%; }
.btn-submit:hover{ background:var(--crimson); transform:translateY(-3px); box-shadow:0 10px 30px rgba(196,30,30,0.4); }
.btn-submit:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.form-status{ grid-column:1 / -1; font-size:13.5px; min-height:18px; }
.form-status.success{ color:#6fbf73; }
.form-status.error{ color:var(--red); }

/* ============================================================
   FOOTER
   ============================================================ */
.main-footer{ padding:70px 0 34px; border-top:1px solid var(--line); }
.footer-container{
  max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:40px;
}
.footer-logo img{ height:56px; transition:all .4s var(--ease-soft); }
.footer-logo:hover img{ height:64px; filter:brightness(1.2); }
.footer-tagline{ font-size:11.5px; letter-spacing:0.14em; color:var(--ink-dim); transition:color .3s var(--ease-soft); }
.footer-container:hover .footer-tagline{ color:var(--off-white); }
.footer-nav ul{ display:flex; gap:30px; }
.footer-nav a{ font-size:12.5px; color:var(--ink-dim); transition:all .3s var(--ease-soft); position:relative; }
.footer-nav a::after{ content:''; position:absolute; bottom:-3px; left:0; width:0; height:1px; background:var(--red); transition:width .3s var(--ease-soft); }
.footer-nav a:hover{ color:var(--off-white); }
.footer-nav a:hover::after{ width:100%; }
.footer-social-instagram{
  width:36px; height:36px; border:1px solid var(--line-strong); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:15px;
  transition:all .4s var(--ease-soft);
}
.footer-social-instagram:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-3px) rotate(360deg); box-shadow:0 5px 20px rgba(201,162,75,0.3); }
.footer-bottom{
  grid-column:1 / -1; margin-top:34px; padding-top:26px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
}
.footer-copyright{ font-size:12px; color:#6b6b67; transition:color .3s var(--ease-soft); }
.footer-links{ display:flex; gap:22px; }
.footer-links a{ font-size:12px; color:#6b6b67; transition:all .3s var(--ease-soft); }
.footer-links a:hover{ color:var(--off-white); transform:translateY(-2px); }