*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px}body{margin:0;background:#050505;color:#f7f7f7;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}:root{--line:rgba(255,255,255,.14);--muted:rgba(255,255,255,.66);--font:'Arial Narrow','Helvetica Neue Condensed Bold','Roboto Condensed',Arial,sans-serif}.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:24px 34px;background:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,0));font-size:13px;text-transform:uppercase;letter-spacing:.06em}.logo{font-weight:900;font-size:20px}.navlinks{display:flex;gap:34px}.burger{display:grid;gap:6px;width:27px}.burger span{height:2px;background:white;display:block}.hero{height:100vh;min-height:620px;position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;border-bottom:1px solid var(--line)}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(0,0,0,.22),#050505 78%),linear-gradient(to bottom,rgba(0,0,0,.15),#050505);z-index:2}.hero-grid{position:absolute;inset:-6%;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:33.4%;opacity:.62;filter:saturate(.75) contrast(1.06);transform:scale(1.08);animation:slowZoom 18s ease-in-out infinite alternate}@keyframes slowZoom{from{transform:scale(1.06)}to{transform:scale(1.12)}}.hero-grid img,.hero-grid video{width:100%;height:100%;object-fit:cover;filter:brightness(.48)}.wide{grid-column:span 2}.hero-content{position:relative;z-index:3;padding:20px}.kicker{font-size:14px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);margin-bottom:20px}.hero h1{font-family:var(--font);font-size:clamp(54px,9.5vw,138px);line-height:.86;margin:0;text-transform:uppercase;letter-spacing:.02em}.hero .by{font-size:clamp(18px,2.4vw,30px);margin-top:18px;color:#eee}.tags{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:26px;color:#ddd;font-size:13px;text-transform:uppercase}.btn{display:inline-flex;gap:14px;align-items:center;border:1px solid rgba(255,255,255,.5);padding:13px 20px;margin-top:34px;text-transform:uppercase;font-size:12px;letter-spacing:.08em;background:rgba(0,0,0,.25)}.btn:hover{background:white;color:#050505}.section-title{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:end;padding:80px 8vw 55px;border-bottom:1px solid var(--line)}.section-title h2{font-family:var(--font);font-size:clamp(48px,7vw,108px);line-height:.9;margin:0;text-transform:uppercase}.section-title p{max-width:520px;color:#ddd;line-height:1.65;font-size:18px}.project-row{display:grid;grid-template-columns:clamp(320px,24vw,380px) 1fr;border-bottom:1px solid var(--line);min-height:300px}.project-info{padding:34px 30px 28px 6vw;border-right:1px solid var(--line);min-width:0}.num{display:none}.project-info h3{font-family:var(--font);font-size:clamp(34px,3.2vw,50px);line-height:.95;margin:0 0 22px;text-transform:uppercase;max-width:100%;word-break:normal;overflow-wrap:normal;hyphens:none;text-wrap:balance}.project-info p{color:#ddd;line-height:1.55;font-size:15px;margin:0;max-width:270px}.project-info .link{display:inline-block;margin-top:28px;color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.05em}.media-strip{display:flex;overflow-x:auto;min-width:0;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.media-strip::-webkit-scrollbar{height:8px}.media-strip::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:20px}.media-strip::-webkit-scrollbar-track{background:rgba(255,255,255,.05)}.media-card{position:relative;border-right:1px solid var(--line);overflow:hidden;background:#101010;min-height:300px;cursor:pointer;flex:0 0 clamp(220px,22vw,340px);scroll-snap-align:start}.media-card img,.media-card video{width:100%;height:100%;object-fit:cover;display:block;transition:.55s transform,.55s filter}.media-card.contain img{object-fit:cover;padding:0;background:#090909}.media-card:hover img,.media-card:hover video{transform:scale(1.04);filter:brightness(1.08)}.caption{position:absolute;left:14px;right:14px;bottom:14px;font-size:14px;text-shadow:0 2px 10px #000}.play{position:absolute;inset:0;display:grid;place-items:center}.play span{width:58px;height:58px;border-radius:50%;border:1px solid rgba(255,255,255,.75);display:grid;place-items:center;background:rgba(0,0,0,.25);font-size:22px}.video-strip{overflow-x:auto}.music-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}.track{background:#080808;padding:20px;display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center}.track-cover{width:120px;height:120px;background:radial-gradient(circle at 70% 20%,rgba(255,255,255,.18),rgba(255,255,255,.04) 38%,#0d0d0d 72%);border:1px solid var(--line);display:grid;place-items:center;color:#ddd;font-size:12px;text-transform:uppercase;letter-spacing:.18em}.track img{width:130px;height:130px;object-fit:cover;display:block;border:1px solid var(--line);border-radius:4px}.track h4{font-size:20px;margin:0 0 10px}.track audio{width:100%;filter:invert(1);height:34px}.small-grid{display:flex;overflow-x:auto;gap:1px;background:var(--line);scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.small-grid::-webkit-scrollbar{height:8px}.small-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:20px}.small-grid::-webkit-scrollbar-track{background:rgba(255,255,255,.05)}.small-card{background:#080808;min-height:276px;position:relative;padding:14px;flex:0 0 clamp(230px,22vw,340px);scroll-snap-align:start;overflow:hidden;cursor:pointer}.small-card img{width:100%;height:200px;object-fit:contain;background:#0b0b0b;transition:.55s transform,.55s filter}.small-card:hover img{transform:scale(1.04);filter:brightness(1.08)}.small-card h4{margin:13px 0 0;font-size:15px}.pair-card{background:#080808;padding:14px;min-height:276px;flex:0 0 clamp(330px,32vw,480px);scroll-snap-align:start;overflow:hidden;cursor:pointer}.pair-imgs{display:grid;grid-template-columns:1fr 1fr;gap:8px;height:200px}.pair-imgs div{position:relative;background:#0b0b0b;overflow:hidden}.pair-imgs img{width:100%;height:100%;object-fit:contain;display:block;transition:.55s transform,.55s filter}.pair-card:hover .pair-imgs img{transform:scale(1.04);filter:brightness(1.08)}.mini-badge{position:absolute;left:8px;bottom:8px;background:#050505;border:1px solid var(--line);padding:5px 8px;font-size:10px;text-transform:uppercase}.pair-card h4{margin:13px 0 0;font-size:15px}.services{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--line);border-top:1px solid var(--line);scroll-margin-top:105px}.service{padding:38px 32px 32px;border-right:1px solid var(--line);min-height:145px}.service strong{display:block;font-size:18px;margin-bottom:8px}.service span{color:var(--muted);font-size:13px;line-height:1.45}.contact{display:grid;grid-template-columns:.8fr 1fr;gap:40px;padding:70px 8vw;border-bottom:1px solid var(--line);background:linear-gradient(90deg,#0d0d0d,#050505)}.contact h2{font-family:var(--font);font-size:clamp(48px,6vw,92px);line-height:.9;margin:0 0 18px;text-transform:uppercase}.contact p{color:#ddd;font-size:18px}.contact-list{display:grid;align-content:center;gap:18px;font-size:22px}.contact-list a{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:14px 0;transition:.25s opacity,.25s transform}.contact-list a:after{content:"→";opacity:.55}.contact-list a:hover{opacity:.72;transform:translateX(4px)}.footer{display:flex;justify-content:space-between;gap:20px;padding:28px 34px;color:var(--muted);font-size:13px}.modal{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:100;display:none;align-items:center;justify-content:center;padding:30px}.modal.open{display:flex}.modal video{max-width:94vw;max-height:86vh;background:#000}.image-modal{position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:110;display:none;align-items:center;justify-content:center;padding:26px}.image-modal.open{display:flex}.image-modal img{max-width:94vw;max-height:90vh;object-fit:contain}.close{position:fixed;right:18px;top:18px;width:54px;height:54px;border-radius:50%;font-size:34px;line-height:1;background:rgba(0,0,0,.72);color:white;border:1px solid rgba(255,255,255,.28);cursor:pointer;z-index:200;display:grid;place-items:center;backdrop-filter:blur(8px)}.close:hover{background:white;color:#050505}body.modal-active .nav{opacity:0;pointer-events:none}@media(max-width:900px){.navlinks{display:none}.hero{min-height:100svh}.hero-bg{background-position:76% center!important}.hero h1{font-size:56px;line-height:.92}.section-title,.project-row,.contact{grid-template-columns:1fr}.project-info{border-right:0;border-bottom:1px solid var(--line);padding:34px 24px}.project-info p{max-width:520px}.media-strip,.video-strip{overflow-x:auto}.music-grid,.services{grid-template-columns:1fr}.small-grid{overflow-x:auto}.track{grid-template-columns:82px 1fr}.track-cover{width:82px;height:82px;font-size:10px}.project-info h3{font-size:40px;line-height:.94}.section-title{padding:58px 24px 35px}.section-title h2{line-height:1.03;letter-spacing:-.02em;font-size:clamp(52px,15vw,78px)}.section-title p{font-size:18px;line-height:1.75}.contact{padding:55px 24px}.footer{padding:24px;display:block}.hero-grid{grid-template-columns:repeat(3,1fr)}}

.hero{background-image:url('../images/hero-legacy.webp');background-size:cover;background-position:center center;}
.hero-grid{display:none!important}
.hero:before{background:radial-gradient(circle at 58% 43%,rgba(0,0,0,.08),rgba(0,0,0,.74) 72%,#050505 100%),linear-gradient(to right,rgba(0,0,0,.88),rgba(0,0,0,.18) 55%,rgba(0,0,0,.45)),linear-gradient(to bottom,rgba(0,0,0,.30),rgba(0,0,0,.05) 42%,#050505 100%)!important}


/* HERO FINAL: old composition + new option 3 cover */
.hero{
  height: 430px !important;
  min-height: 430px !important;
  display: block !important;
  place-items: unset !important;
  text-align: left !important;
  background-image: url('../images/hero-grid-01.webp') !important;
  background-size: cover !important;
  background-position: center 42% !important;
  background-repeat: no-repeat !important;
}
.hero:before{
  background:
    linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.20) 45%, rgba(0,0,0,.12) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,.22)) !important;
}
.hero-grid{display:none !important;}
.hero-content{
  position:absolute !important;
  z-index:3 !important;
  left:8.5vw !important;
  top:118px !important;
  padding:0 !important;
  max-width:650px !important;
  text-align:left !important;
}
.hero .kicker{display:none !important;}
.hero h1{
  font-size: clamp(42px, 5.15vw, 76px) !important;
  line-height:.88 !important;
  letter-spacing:.01em !important;
  margin:0 !important;
}
.hero .by{
  font-size: clamp(18px, 1.75vw, 28px) !important;
  margin-top:9px !important;
  color:#f4f4f4 !important;
}
.hero .tags{
  justify-content:flex-start !important;
  gap:14px !important;
  margin-top:82px !important;
  font-size:12px !important;
  letter-spacing:.03em !important;
  flex-wrap:wrap !important;
}
.hero .btn{display:none !important;}
.nav{
  padding:24px 34px !important;
  background:linear-gradient(to bottom,rgba(0,0,0,.38),rgba(0,0,0,0)) !important;
}
.navlinks{gap:34px !important;}
@media(max-width:900px){
  .hero{height:520px !important;min-height:520px !important;background-position:58% center !important;}
  .hero-content{left:24px !important;right:24px !important;top:150px !important;}
  .hero h1{font-size:54px !important;}
  .hero .tags{margin-top:34px !important;gap:10px;font-size:11px;}
  .navlinks{display:none !important;}
}
@media(max-width:520px){
  .hero{height:520px !important;min-height:520px !important;background-position:62% center !important;}
  .hero h1{font-size:44px !important;}
  .hero .by{font-size:18px !important;}
}

/* v17: exact hero composition from approved option 3 */
.hero{
  height:min(768px,37.5vw) !important;
  min-height:360px !important;
  display:block !important;
  position:relative !important;
  background-image:url("../images/hero-grid-02.webp") !important;
  background-size:cover !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
  border-bottom:1px solid var(--line) !important;
}
.hero:before,.hero-grid,.hero-content{display:none !important;}
/* hide real header on the hero because it is baked into the approved cover */
.nav{opacity:0 !important; pointer-events:none !important;}
.project-info h3{font-size:clamp(28px,2.55vw,42px) !important; line-height:.96 !important; overflow-wrap:break-word !important; word-break:normal !important;}
.project-row{grid-template-columns:320px 1fr !important;}
@media(max-width:900px){
  .nav{opacity:1 !important; pointer-events:auto !important;}
  .hero{height:68vh !important; min-height:520px !important; background-size:cover !important; background-position:center top !important;}
  .hero-content{display:block !important; position:absolute !important; left:24px !important; right:24px !important; bottom:46px !important; z-index:3 !important; text-align:left !important;}
  .hero h1{font-size:48px !important; line-height:.9 !important;}
  .hero .by{font-size:18px !important;}
  .kicker,.hero .btn{display:none !important;}
  .tags{justify-content:flex-start !important; gap:10px !important; font-size:11px !important;}
  .project-row{grid-template-columns:1fr !important;}
  .project-info h3{font-size:36px !important;}
}

/* FINAL HERO EXACT: full-screen cover, active invisible nav over baked menu */
.hero{height:100vh!important;min-height:100vh!important;background-image:url('../images/hero-grid-03.webp')!important;background-size:100% 100%!important;background-position:center center!important;background-repeat:no-repeat!important;display:block!important;text-align:left!important;}
.hero:before{display:none!important;}
.hero-grid,.hero-content{display:none!important;}
.nav{background:transparent!important;}
.nav .logo,.nav .burger{visibility:hidden!important;}
.nav .navlinks a{opacity:0!important;}
.project-info h3{font-size:clamp(28px,3vw,42px)!important;line-height:.95!important;}
@media(max-width:900px){.hero{height:100svh!important;min-height:620px!important;background-size:cover!important;background-position:center top!important;}.nav .logo{visibility:visible!important;opacity:1!important;}.nav .navlinks a{opacity:1!important;}}

/* final navigation and interaction tweaks */
.nav .navlinks a{opacity:1!important;visibility:visible!important;color:#fff!important;font-weight:800;text-shadow:0 2px 14px rgba(0,0,0,.95);filter:brightness(1.22);pointer-events:auto!important;}
.nav .navlinks a:hover{color:#fff!important;opacity:.78!important;}
.tags a{color:#fff!important;text-decoration:none;opacity:.96;transition:opacity .25s ease, transform .25s ease;}
.tags a:hover{opacity:.68;transform:translateY(-1px);}
#products-main,#video,#music,#services,#contact{scroll-margin-top:110px;}
.small-card,.pair-card,.pair-imgs div{cursor:pointer;overflow:hidden;}
.small-card img,.pair-imgs img{transition:transform .55s ease,filter .55s ease;will-change:transform;}
.small-card:hover img,.pair-imgs div:hover img{transform:scale(1.045);filter:brightness(1.08);}


/* v20 fixes: real clickable hero navigation and active category words */
.nav{
  opacity:1 !important;
  pointer-events:auto !important;
  background:transparent !important;
  justify-content:flex-end !important;
  padding:32px 44px !important;
  z-index:80 !important;
}
.nav .logo,.nav .burger{display:none !important;}
.navlinks{display:flex !important;gap:46px !important;align-items:center !important;}
.navlinks a{
  color:#fff !important;
  opacity:1 !important;
  font-weight:900 !important;
  font-size:17px !important;
  letter-spacing:.04em !important;
  text-shadow:0 2px 18px rgba(0,0,0,.9) !important;
  transition:opacity .2s ease, transform .2s ease;
  cursor:pointer;
}
.navlinks a:hover{opacity:.72 !important;transform:translateY(-1px);}
.hero-content{
  display:block !important;
  position:absolute !important;
  z-index:70 !important;
  left:10.2vw !important;
  right:auto !important;
  top:auto !important;
  bottom:32px !important;
  padding:0 !important;
  text-align:left !important;
  max-width:none !important;
}
.hero-content .kicker,
.hero-content h1,
.hero-content .by,
.hero-content .btn{display:none !important;}
.hero-content .tags{
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:15px !important;
  margin:0 !important;
  padding:8px 10px !important;
  background:linear-gradient(90deg,rgba(0,0,0,.68),rgba(0,0,0,.38),rgba(0,0,0,0)) !important;
  color:#fff !important;
  font-size:16px !important;
  line-height:1 !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
  text-shadow:0 2px 14px #000 !important;
  flex-wrap:wrap !important;
}
.hero-content .tags a{
  color:#fff !important;
  opacity:.96 !important;
  cursor:pointer !important;
  transition:opacity .2s ease, transform .2s ease;
}
.hero-content .tags a:hover{opacity:.65 !important;transform:translateY(-1px);}
.hero-content .tags span{opacity:.75 !important;}
.small-card img,.pair-imgs img{transition:transform .55s ease, filter .55s ease;}
.small-card:hover img,.pair-card:hover img{transform:scale(1.04);filter:brightness(1.08);}
@media(max-width:900px){
  .nav{padding:22px 22px !important;}
  .navlinks{gap:18px !important;}
  .navlinks a{font-size:12px !important;}
  .hero-content{left:20px !important;right:20px !important;bottom:24px !important;}
  .hero-content .tags{font-size:11px !important;gap:9px !important;padding:7px 8px !important;}
}



/* v21 final clean hero: real text/buttons over clean cover */
.hero{
  height:clamp(440px,41vw,793px) !important;
  min-height:440px !important;
  display:block !important;
  position:relative !important;
  overflow:hidden !important;
  text-align:left !important;
  background-image:url('../images/hero-grid-04.webp') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  border-bottom:1px solid var(--line) !important;
}
.hero:before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.10) 44%, rgba(0,0,0,.18) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.08) 60%, rgba(0,0,0,.30) 100%) !important;
}
.hero-grid{display:none !important;}
.hero-content{
  display:block !important;
  position:absolute !important;
  z-index:3 !important;
  left:8.5vw !important;
  top:34% !important;
  transform:translateY(-20%) !important;
  padding:0 !important;
  max-width:760px !important;
  text-align:left !important;
}
.hero .kicker{display:none !important;}
.hero h1{
  font-family:var(--font) !important;
  font-size:clamp(46px,5.05vw,78px) !important;
  line-height:.88 !important;
  letter-spacing:.012em !important;
  margin:0 !important;
  color:#f6f6f6 !important;
  text-transform:uppercase !important;
  text-shadow:0 2px 22px rgba(0,0,0,.55) !important;
}
.hero .by{
  display:block !important;
  font-size:clamp(19px,1.8vw,30px) !important;
  margin-top:10px !important;
  color:#f2f2f2 !important;
  text-shadow:0 2px 18px rgba(0,0,0,.65) !important;
}
.hero .tags{
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:16px !important;
  flex-wrap:wrap !important;
  margin-top:78px !important;
  color:#fff !important;
  font-size:clamp(12px,1.05vw,15px) !important;
  text-transform:uppercase !important;
  letter-spacing:.03em !important;
  text-shadow:0 2px 18px rgba(0,0,0,.82) !important;
}
.hero .tags a{
  color:#fff !important;
  opacity:.94 !important;
  pointer-events:auto !important;
  text-decoration:none !important;
  transition:opacity .25s ease, transform .25s ease, filter .25s ease !important;
}
.hero .tags a:hover{opacity:1 !important;filter:brightness(1.25) !important;transform:translateY(-1px) !important;}
.hero .tags a:hover:after{content:" →";}
.hero .tags span{opacity:.74 !important;}
.hero .btn{
  display:inline-flex !important;
  gap:14px !important;
  align-items:center !important;
  border:1px solid rgba(255,255,255,.45) !important;
  padding:13px 20px !important;
  margin-top:28px !important;
  text-transform:uppercase !important;
  font-size:12px !important;
  letter-spacing:.08em !important;
  background:rgba(0,0,0,.18) !important;
  color:#fff !important;
  pointer-events:auto !important;
  transition:.25s ease !important;
}
.hero .btn:hover{background:rgba(255,255,255,.13) !important;border-color:rgba(255,255,255,.88) !important;color:#fff !important;}
.nav{
  opacity:1 !important;
  pointer-events:auto !important;
  background:linear-gradient(to bottom,rgba(0,0,0,.30),rgba(0,0,0,0)) !important;
}
.nav .logo,.nav .burger{visibility:visible !important;opacity:1 !important;}
.nav .navlinks a{
  opacity:1 !important;
  visibility:visible !important;
  color:#fff !important;
  font-weight:800 !important;
  text-shadow:0 2px 14px rgba(0,0,0,.95) !important;
  filter:brightness(1.25) !important;
  pointer-events:auto !important;
  position:relative !important;
}
.nav .navlinks a:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:#fff;transform:scaleX(0);transform-origin:left;transition:.25s transform ease;opacity:.8;}
.nav .navlinks a:hover:after{transform:scaleX(1);}
#products-main,#video,#music,#services,#contact,#projects{scroll-margin-top:110px;}
.small-card img,.pair-imgs img{transition:transform .55s ease, filter .55s ease;}
.small-card:hover img,.pair-card:hover .pair-imgs img{transform:scale(1.04);filter:brightness(1.08);}
@media(max-width:900px){
  .hero{height:100svh !important;min-height:620px !important;background-position:61% center !important;}
  .hero-content{left:24px !important;right:24px !important;top:auto !important;bottom:64px !important;transform:none !important;}
  .hero h1{font-size:48px !important;line-height:.9 !important;}
  .hero .by{font-size:18px !important;}
  .hero .tags{margin-top:34px !important;gap:10px !important;font-size:11px !important;}
  .hero .btn{margin-top:24px !important;}
}
@media(max-width:520px){
  .hero h1{font-size:42px !important;}
  .hero{background-position:66% center !important;}
}

/* v22 hero and typography polish */
body{font-family:'Helvetica Neue',Arial,Helvetica,sans-serif;}
.nav{padding:26px 34px;color:#fff;background:linear-gradient(to bottom,rgba(0,0,0,.58),rgba(0,0,0,0));}
.navlinks a{opacity:.96;font-weight:700;position:relative;transition:.22s opacity,.22s color;}
.navlinks a:hover{opacity:1;color:#fff;}
.navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:1px;background:#fff;transform:scaleX(0);transform-origin:left;transition:.22s transform;}
.navlinks a:hover::after{transform:scaleX(1);}
.hero{height:100vh;min-height:720px;display:block;text-align:left;overflow:hidden;background:#050505;}
.hero:before{background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.46) 38%,rgba(0,0,0,.10) 72%),linear-gradient(to bottom,rgba(0,0,0,.22),rgba(0,0,0,.35));z-index:2;}
.hero-bg{position:absolute;inset:0;background-image:url("../images/hero-portrait-original.png");background-size:cover;background-position:center center;filter:brightness(.72) contrast(1.04);animation:heroKen 18s ease-in-out infinite alternate;}
@keyframes heroKen{from{transform:scale(1)}to{transform:scale(1.035)}}
.hero-grid{display:none!important;}
.hero-content{position:absolute;z-index:3;left:7.5vw;top:51%;transform:translateY(-50%);padding:0;max-width:980px;text-align:left;}
.kicker{display:none;}
.hero h1{font-family:var(--font);font-weight:700;font-size:clamp(48px,5.2vw,86px);line-height:.95;letter-spacing:.005em;margin:0;text-transform:uppercase;color:#f5f5f5;}
.hero .by{font-size:clamp(20px,2vw,32px);margin-top:12px;color:#f1f1f1;font-weight:400;}
.tags{justify-content:flex-start;margin-top:110px;gap:20px;font-size:clamp(13px,1.08vw,17px);font-weight:600;color:#efefef;letter-spacing:.02em;}
.tags a{opacity:.95;transition:.22s opacity,.22s transform;}
.tags a:hover{opacity:1;transform:translateY(-2px);}
.hero .btn{display:none!important;}
.section-title h2,.project-info h3,.contact h2{font-family:var(--font);font-weight:700;letter-spacing:.005em;}
.project-info h3{font-size:clamp(28px,2.55vw,44px);line-height:1.02;}
.small-card img,.pair-imgs img{transition:.55s transform,.55s filter;}
.small-card:hover img,.pair-card:hover img{transform:scale(1.035);filter:brightness(1.08);}
@media(max-width:800px){.hero{min-height:680px}.hero-content{left:24px;right:24px;top:52%}.hero h1{font-size:48px}.hero .by{font-size:20px}.tags{margin-top:70px;gap:12px;font-size:12px}}



/* DMTSHEV final patch: restore hero, sizes, active links */
html{scroll-behavior:smooth;scroll-padding-top:96px!important;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important;}
:root{--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important;}
.nav{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:999!important;padding:24px 34px!important;background:linear-gradient(to bottom,rgba(0,0,0,.46),rgba(0,0,0,0))!important;}
.nav .logo{visibility:visible!important;opacity:1!important;color:#fff!important;font-weight:700!important;letter-spacing:.08em!important;}
.nav .burger{display:none!important;}
.nav .navlinks{display:flex!important;gap:34px!important;align-items:center!important;}
.nav .navlinks a{display:inline-flex!important;align-items:center!important;min-height:28px!important;color:#f8f8f8!important;opacity:.96!important;visibility:visible!important;pointer-events:auto!important;font-weight:600!important;text-shadow:0 2px 16px rgba(0,0,0,.75)!important;}
.nav .navlinks a:hover{opacity:1!important;color:#fff!important;}
.hero{position:relative!important;width:100vw!important;height:100vh!important;min-height:720px!important;display:block!important;overflow:hidden!important;background:none!important;border-bottom:1px solid var(--line)!important;}
.hero:before{content:""!important;position:absolute!important;inset:0!important;z-index:2!important;background:linear-gradient(90deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.38) 35%,rgba(0,0,0,.08) 70%),linear-gradient(to bottom,rgba(0,0,0,.22),rgba(0,0,0,.35))!important;}
.hero-bg{display:block!important;position:absolute!important;inset:0!important;z-index:1!important;background-image:url("../images/hero-background.webp")!important;background-size:cover!important;background-position:center center!important;filter:brightness(.82) contrast(1.04)!important;animation:heroKen 18s ease-in-out infinite alternate!important;}
.hero-grid{display:none!important;}
@keyframes heroKen{from{transform:scale(1)}to{transform:scale(1.035)}}
.hero-content{display:block!important;visibility:visible!important;opacity:1!important;position:absolute!important;z-index:3!important;left:7.5vw!important;top:50%!important;transform:translateY(-50%)!important;right:auto!important;width:min(980px,86vw)!important;max-width:980px!important;text-align:left!important;padding:0!important;}
.kicker{display:none!important;}
.hero h1{display:block!important;visibility:visible!important;opacity:1!important;margin:0!important;color:#f6f6f6!important;font-family:var(--font)!important;font-size:clamp(48px,5.2vw,86px)!important;line-height:.96!important;font-weight:650!important;letter-spacing:.01em!important;text-transform:uppercase!important;text-shadow:0 2px 24px rgba(0,0,0,.50)!important;}
.hero .by{display:block!important;visibility:visible!important;opacity:1!important;margin-top:12px!important;color:#f1f1f1!important;font-size:clamp(20px,2vw,32px)!important;font-weight:400!important;}
.hero .tags{display:flex!important;visibility:visible!important;opacity:1!important;justify-content:flex-start!important;align-items:center!important;flex-wrap:wrap!important;gap:13px 18px!important;margin-top:112px!important;font-size:clamp(13px,1.08vw,17px)!important;line-height:1.25!important;font-weight:500!important;letter-spacing:.01em!important;color:#efefef!important;text-transform:none!important;}
.hero .tags a{display:inline-flex!important;align-items:center!important;min-height:30px!important;color:#f5f5f5!important;opacity:.94!important;text-decoration:none!important;pointer-events:auto!important;transition:opacity .22s ease, transform .22s ease!important;}
.hero .tags a:hover{opacity:1!important;transform:translateY(-2px)!important;}
.hero .tags span{opacity:.45!important;}
.hero .btn{display:none!important;}
.section-title{padding:80px 8vw 55px!important;}
.section-title h2{font-family:var(--font)!important;font-size:clamp(48px,7vw,108px)!important;font-weight:650!important;line-height:.9!important;}
.project-row{display:grid!important;grid-template-columns:280px minmax(0,1fr)!important;min-height:310px!important;}
.project-info{padding:34px 34px 28px 8vw!important;}
.project-info h3{font-family:var(--font)!important;font-size:clamp(30px,3.4vw,54px)!important;line-height:.95!important;font-weight:650!important;letter-spacing:.005em!important;}
.num{display:none!important;}
.media-strip{display:flex!important;overflow-x:auto!important;min-width:0!important;scroll-snap-type:x proximity!important;-webkit-overflow-scrolling:touch!important;}
.media-card{flex:0 0 clamp(240px,28vw,420px)!important;min-height:310px!important;}
.media-card img,.media-card video{width:100%!important;height:100%!important;object-fit:cover!important;transition:transform .55s ease,filter .55s ease!important;}
.media-card:hover img,.media-card:hover video{transform:scale(1.035)!important;filter:brightness(1.08)!important;}
.small-grid{display:flex!important;overflow-x:auto!important;scroll-snap-type:x proximity!important;-webkit-overflow-scrolling:touch!important;}
.small-card{flex:0 0 clamp(240px,25vw,360px)!important;}
.small-card img,.pair-imgs img{transition:transform .55s ease,filter .55s ease!important;}
.small-card:hover img,.pair-card:hover img{transform:scale(1.04)!important;filter:brightness(1.08)!important;}
#products-main,#video,#music,#services,#contact{scroll-margin-top:96px!important;}
@media(max-width:900px){
  .nav{padding:18px 20px!important;}
  .navlinks{display:none!important;}
  .hero{height:100svh!important;min-height:620px!important;}
  .hero-bg{background-position:center center!important;}
  .hero-content{left:24px!important;right:24px!important;top:52%!important;width:auto!important;}
  .hero h1{font-size:48px!important;}
  .hero .by{font-size:20px!important;}
  .hero .tags{margin-top:70px!important;gap:10px 12px!important;font-size:12px!important;}
  .project-row{grid-template-columns:1fr!important;}
  .project-info{border-right:0!important;border-bottom:1px solid var(--line)!important;padding:34px 24px!important;}
  .project-info h3{font-size:40px!important;}
}

/* v26 scale/type fixes */
.project-info h3,.section-title h2{word-break:normal!important;overflow-wrap:normal!important;hyphens:none!important}
.media-strip,.small-grid{align-items:stretch}
@media(min-width:901px){.project-info{position:sticky;left:0;z-index:2;background:#050505}.media-strip,.small-grid{min-height:300px}.project-info h3{max-width:290px}}
@media(max-width:1200px) and (min-width:901px){.project-row{grid-template-columns:300px 1fr}.project-info{padding-left:34px}.project-info h3{font-size:38px}.media-card{flex-basis:300px}}


/* v27 compact scale + clean headings */
.project-row{
  grid-template-columns:340px minmax(0,1fr)!important;
  min-height:280px!important;
  align-items:stretch!important;
}
.project-info{
  padding:32px 28px 26px 56px!important;
  border-right:1px solid var(--line)!important;
  min-width:0!important;
  overflow:hidden!important;
}
.project-info h3{
  font-size:clamp(30px,2.7vw,42px)!important;
  line-height:1.02!important;
  letter-spacing:.01em!important;
  max-width:270px!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
  text-wrap:auto!important;
  margin:0 0 22px!important;
}
.project-info p{
  font-size:15px!important;
  line-height:1.55!important;
  max-width:245px!important;
}
.project-info .link{
  margin-top:28px!important;
  font-size:13px!important;
}
.media-strip{
  height:280px!important;
  min-height:280px!important;
  align-items:stretch!important;
}
.media-card{
  flex:0 0 clamp(220px,20vw,300px)!important;
  min-height:280px!important;
  height:280px!important;
}
.video-card{
  flex-basis:clamp(220px,19vw,285px)!important;
}
.media-card img,.media-card video{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.small-grid{
  min-height:276px!important;
}
.small-card{
  flex:0 0 clamp(230px,21vw,320px)!important;
  min-height:276px!important;
}
.pair-card{
  flex:0 0 clamp(330px,31vw,460px)!important;
  min-height:276px!important;
}
.services{
  scroll-margin-top:110px!important;
}
@media(max-width:900px){
  .project-row{grid-template-columns:1fr!important;min-height:auto!important;}
  .project-info{padding:34px 24px!important;border-right:0!important;border-bottom:1px solid var(--line)!important;}
  .project-info h3{font-size:40px!important;max-width:100%!important;}
  .project-info p{max-width:520px!important;}
  .media-strip{height:280px!important;min-height:280px!important;}
  .media-card{height:280px!important;min-height:280px!important;flex-basis:240px!important;}
}



/* v28 navigation + typography safety */
#projects{scroll-margin-top:28vh!important;}
#products-main,#video,#music,#services,#contact{scroll-margin-top:96px!important;}
.navlinks a,.hero .tags a,.footer a{cursor:pointer!important;}
.project-info h3{font-size:clamp(28px,2.35vw,38px)!important;line-height:1.06!important;max-width:100%!important;white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important;hyphens:none!important;text-wrap:auto!important;}
.project-info{overflow:visible!important;}
@media(max-width:900px){.project-info h3{font-size:36px!important;line-height:1.05!important;}.section-title{padding-top:70px!important;}}

/* v30 mobile/modal fixes */
body.modal-active .nav{opacity:1 !important;pointer-events:auto !important;z-index:220 !important;background:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,0)) !important;}
body.modal-active .nav a{pointer-events:auto !important;}
.close{top:82px !important;right:22px !important;z-index:240 !important;}
@media(max-width:900px){
  .close{top:84px !important;right:18px !important;width:58px !important;height:58px !important;font-size:38px !important;}
  .hero{background-position:88% center !important;background-size:cover !important;}
  .section-title h2{line-height:1.16 !important;font-size:clamp(48px,14vw,72px) !important;letter-spacing:-.015em !important;}
  .section-title{padding-top:72px !important;}
}
@media(max-width:520px){
  .hero{background-position:90% center !important;}
  .section-title h2{font-size:clamp(46px,13.5vw,68px) !important;line-height:1.18 !important;}
}


/* ===== FINAL POLISH v34 ===== */
html{scroll-padding-top:120px}
body{-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
.navlinks a,.tags a,.footer a{cursor:pointer;transition:color .25s ease, opacity .25s ease, transform .25s ease}
.navlinks a:hover,.tags a:hover,.footer a:hover{color:#fff;opacity:1}
.tags a{display:inline-block}
.tags a:hover{transform:translateY(-1px)}
.track-card,.video-card,.more-card,.track{transition:transform .35s ease, border-color .35s ease, background .35s ease}
.track-card:hover,.video-card:hover,.more-card:hover{transform:translateY(-4px)}
.track-card img,.more-card img,.video-card video{transition:transform .45s ease, filter .45s ease}
.track-card:hover img,.more-card:hover img,.video-card:hover video{transform:scale(1.025);filter:brightness(1.06)}
.section-title h2{line-height:1.08!important;letter-spacing:-.06em!important}
.project-info h3{line-height:.94!important;overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important}
.service strong,.track h4{overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important}
.contact{align-items:end}
.contact h2{line-height:.92!important;letter-spacing:-.055em!important}
.contact p{max-width:520px;color:rgba(255,255,255,.72)}
.contact-list.final-contact{gap:14px}
.contact-list.final-contact a{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;font-size:clamp(22px,3.2vw,44px);letter-spacing:-.035em;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.18);color:#f8f8f8;transition:padding-left .25s ease,color .25s ease,border-color .25s ease}
.contact-list.final-contact a span{opacity:.55;transition:transform .25s ease,opacity .25s ease}
.contact-list.final-contact a:hover{padding-left:10px;color:#fff;border-color:rgba(255,255,255,.42)}
.contact-list.final-contact a:hover span{opacity:1;transform:translateX(6px)}
.close{top:86px!important;right:18px!important;width:54px!important;height:54px!important;border-radius:999px!important;background:rgba(0,0,0,.62)!important;backdrop-filter:blur(16px)!important;border:1px solid rgba(255,255,255,.28)!important;color:#fff!important;font-size:32px!important;line-height:1!important;z-index:9999!important;cursor:pointer!important}
.modal.active,.image-modal.active{z-index:9990!important}
.modal.active ~ .nav,.image-modal.active ~ .nav{z-index:9998!important}
@media (max-width:768px){
  html{scroll-padding-top:96px}
  .hero{min-height:100svh!important;height:100svh!important}
  .hero-content{padding-bottom:34px!important}
  .section-title h2{font-size:clamp(58px,17vw,104px)!important;line-height:1.08!important;letter-spacing:-.065em!important}
  .project-info h3{font-size:clamp(40px,12.4vw,64px)!important;line-height:.98!important;letter-spacing:-.055em!important}
  .contact h2{font-size:clamp(56px,16vw,92px)!important;line-height:.98!important}
  .contact-list.final-contact a{font-size:26px!important;padding:18px 0!important}
  .close{top:92px!important;right:14px!important;width:50px!important;height:50px!important;font-size:30px!important}
  .track h4{line-height:1.15!important}
}



/* v35 final polish: remove mobile tap artifacts, keep one arrow, modal UX */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent !important;
}
a, button, img, video, .video-card, .media-card, .photo-card, .pair-card, .track, .card, .tile {
  outline: none !important;
  -webkit-touch-callout: none;
}
a:focus, a:active, button:focus, button:active, .nav a:focus, .nav a:active {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
::selection { background: rgba(255,255,255,.12); color: #fff; }
.nav a { background: transparent !important; }
.contact-list a span { display: none !important; }
.contact-list a::after { content: "→"; opacity: .55; margin-left: 22px; flex: 0 0 auto; }
body.modal-active .nav { opacity: 1 !important; pointer-events: auto !important; }
body.modal-active .nav a { pointer-events: auto !important; }
.image-modal.open, .modal.open { touch-action: manipulation; }
.image-modal img, .modal video { background: transparent !important; }
@media (max-width: 900px) {
  .close { top: 78px !important; right: 18px !important; width: 54px; height: 54px; }
  .contact-list a { -webkit-tap-highlight-color: transparent !important; }
}



/* v36: hero framing + mobile video preview */
.hero-bg{
  background-position:68% center!important;
}
@media (max-width:900px){
  .hero-bg{
    background-position:88% center!important;
    background-size:cover!important;
  }
}
@media (min-width:1400px){
  .hero-bg{background-position:64% center!important;}
}