:root{--bg:#050505;--fg:#f4f4f0;--muted:#8d8d88;--line:#242424}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}body.locked{overflow:hidden}a{color:inherit;text-decoration:none}.intro{position:fixed;inset:0;z-index:100;background:#000;display:grid;place-items:center;transition:opacity .9s ease,visibility .9s ease}.intro.exit{opacity:0;visibility:hidden}.logo-button{width:min(72vw,760px);border:0;background:transparent;color:white;cursor:pointer;perspective:1000px}.chrome-logo{display:block;width:100%;filter:drop-shadow(0 30px 55px rgba(255,255,255,.08));transform-style:preserve-3d;transition:transform .18s ease-out,filter .3s ease}.logo-button:hover .chrome-logo{filter:drop-shadow(0 35px 70px rgba(255,255,255,.16))}.logo-button.blast .chrome-logo{transition:transform .85s cubic-bezier(.7,0,.2,1),filter .4s;transform:scale(3.6)!important;filter:blur(8px) brightness(1.7)}.logo-button:hover .site{opacity:0;transition:opacity .7s ease}.site.visible{opacity:1}.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;padding:24px 30px;font-size:11px;letter-spacing:.12em;mix-blend-mode:difference}.wordmark{font-weight:800}.nav-right{display:flex;gap:26px}.hero{min-height:100vh;padding:120px 6vw 50px;display:flex;align-items:flex-end;position:relative;overflow:hidden}.hero-copy{position:relative;z-index:2;width:100%}.eyebrow{font-size:10px;letter-spacing:.22em;color:var(--muted)}h1{font-size:clamp(54px,9.5vw,150px);line-height:.82;letter-spacing:-.07em;margin:22px 0 28px;max-width:1200px}h1 span{color:#5e5e5b}.categories{font-size:10px;letter-spacing:.16em;color:#a0a09b}.hero-logo-art{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;opacity:.78;mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 26%,#000 52%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 26%,#000 52%)}.hero-logo-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#050505 0%,rgba(5,5,5,.9) 28%,rgba(5,5,5,.28) 52%,rgba(5,5,5,0) 74%),radial-gradient(circle at 78% 44%,rgba(255,255,255,.08),transparent 32%)}.hero-logo-art img{position:absolute;width:106vw;max-width:none;height:auto;right:-39vw;top:-18vh;transform:none;filter:contrast(1.16) brightness(.78) saturate(.72) drop-shadow(0 0 90px rgba(255,255,255,.08))}.scroll-mark{position:absolute;right:30px;bottom:28px;font-size:9px;letter-spacing:.2em;color:#777}.work{padding:0 2vw 7vw}.project{min-height:72vh;border:1px solid var(--line);position:relative;padding:28px;overflow:hidden;background:#090909;display:flex;flex-direction:column;justify-content:space-between;transition:transform .35s ease,border-color .35s ease}.project:hover{border-color:#555}.project-wide{min-height:88vh;margin-bottom:2vw}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:2vw;margin-bottom:2vw}.project-meta{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.18em;color:#8b8b87}.project-body{position:relative;z-index:2}.project h2{font-size:clamp(52px,9vw,140px);line-height:.78;letter-spacing:-.065em;margin:0 0 24px}.project-grid h2{font-size:clamp(48px,6.2vw,100px)}.project p{max-width:440px;font-size:14px;line-height:1.5;color:#aaa}.project-link{position:absolute;right:28px;bottom:28px;font-size:10px;letter-spacing:.2em;border-bottom:1px solid #555;padding-bottom:4px;z-index:4}.muted{color:#666}.renegade{background:radial-gradient(circle at 75% 40%,#351010 0,#120808 22%,#070707 56%)}.renegade:after{content:"R";position:absolute;right:-2vw;top:5%;font-size:55vw;line-height:.75;font-weight:900;color:rgba(255,255,255,.025)}.new-era{background:linear-gradient(145deg,#0b0b0b,#181818)}.new-era:after{content:"CHI";position:absolute;right:-3%;top:18%;font-weight:900;font-size:14vw;color:rgba(255,255,255,.025);transform:rotate(-90deg)}.noctis{background:radial-gradient(circle at 70% 25%,#151f2a,#070707 55%)}.noctis:after{content:"◉";position:absolute;right:6%;top:10%;font-size:22vw;color:rgba(255,255,255,.035)}.photo{min-height:90vh;margin-bottom:2vw;background:#0a0a0a}.photo-strip{position:absolute;inset:15% 0 22%;display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:12px;transform:rotate(-2deg) scale(1.04);opacity:.42}.photo-strip div{background:linear-gradient(135deg,#222,#888 48%,#171717)}.photo-strip div:nth-child(2){background:linear-gradient(45deg,#111,#b4b4b4 50%,#282828)}.ethos{background:radial-gradient(circle at 50% 42%,#28241b,#080808 55%)}.sublime{background:linear-gradient(160deg,#111 0,#060606 60%)}.experiments{background:radial-gradient(circle at 30% 30%,#21152a,#070707 50%)}.contact-project .project-meta span:first-child{visibility:hidden}.contact-project .project-body p{max-width:520px}.about{min-height:85vh;padding:8vw 6vw;display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--line)}.about-copy{font-size:clamp(38px,6.5vw,100px);line-height:.98;letter-spacing:-.055em;max-width:1200px;margin:28px 0}.about-copy strong{color:#777}footer{padding:28px 30px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:9px;letter-spacing:.18em;color:#777}@media(max-width:760px){.logo-button{width:92vw}.nav{padding:20px}.nav-right{gap:14px}.hero{padding:110px 20px 35px;align-items:center}.hero-logo-art{inset:0;opacity:.52}.hero-logo-art img{width:190vw;right:-102vw;top:2vh}.categories{line-height:1.8;max-width:300px}.project-grid{grid-template-columns:1fr}.project,.project-wide{min-height:72vh;padding:20px}.project h2,.project-grid h2{font-size:16vw}.project-link{right:20px;bottom:20px}.photo-strip{inset:18% -30% 30%}.about{padding:80px 20px}footer{padding:22px 20px}.scroll-mark{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.chrome-logo{transform:none!important}}

/* V6 — approved cinematic hero treatment */
.hero-logo-art{
  position:absolute;inset:0;z-index:1;opacity:1;pointer-events:none;
  background-image:url('assets/hero-reference.png');
  background-size:cover;background-position:center center;background-repeat:no-repeat;
  -webkit-mask-image:none;mask-image:none;
}
.hero-logo-art:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(5,5,5,.98) 0%,rgba(5,5,5,.78) 23%,rgba(5,5,5,.16) 52%,rgba(5,5,5,0) 78%);
}
.hero-logo-art img{display:none}
.hero-copy{z-index:3}

/* V6 — WHATEVER IS NEXT contact visual */
.contact-project{background:#070707;isolation:isolate}
.contact-envelope-art{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url('assets/contact-envelope.png');
  background-size:cover;background-position:center center;background-repeat:no-repeat;
  opacity:.88;
}
.contact-envelope-art:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(5,5,5,.97) 0%,rgba(5,5,5,.78) 32%,rgba(5,5,5,.18) 63%,rgba(5,5,5,.08) 100%);
}
.contact-project .project-meta,.contact-project .project-body,.contact-project .project-link{z-index:3}

@media(max-width:760px){
  .hero-logo-art{background-position:60% center}
  .contact-envelope-art{background-position:62% center;opacity:.72}
}

/* V7 — remove UI/text baked into the cinematic reference images.
   Keep only the artwork visible behind the site's real HTML text. */
.hero-logo-art{
  background-size:132% auto;
  background-position:72% center;
}
.hero-logo-art:before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(#050505 0 0) top/100% 72px no-repeat,
    linear-gradient(90deg,#050505 0%,rgba(5,5,5,.98) 22%,rgba(5,5,5,.72) 36%,rgba(5,5,5,0) 54%);
}
.hero-logo-art:after{z-index:2}
.hero-copy{z-index:4}

.contact-envelope-art{
  background-size:124% auto;
  background-position:72% center;
}
.contact-envelope-art:before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(#070707 0 0) top/100% 76px no-repeat,
    linear-gradient(#070707 0 0) bottom/100% 72px no-repeat,
    linear-gradient(90deg,#070707 0%,rgba(7,7,7,.98) 26%,rgba(7,7,7,.72) 40%,rgba(7,7,7,0) 58%);
}
.contact-envelope-art:after{z-index:2}

@media(max-width:760px){
  .hero-logo-art{background-size:auto 112%;background-position:70% center}
  .contact-envelope-art{background-size:auto 108%;background-position:68% center}
}

/* V8 — give the hero enough vertical runway for the smiley artwork to finish
   before the Renegade project begins. Artwork/design otherwise unchanged. */
@media (min-width:761px){
  .hero{min-height:125vh;}
}

/* V9 — transparent hero artwork on the site's own black background.
   Full smiley stays inside the hero; no rectangular image edge can appear. */
body,.site,.hero{background:#000;}
.hero-logo-art{
  background-image:url('assets/hero-logo-transparent.png');
  background-size:auto 96%;
  background-position:right center;
  background-repeat:no-repeat;
  opacity:1;
  overflow:visible;
}
.hero-logo-art:before{display:none;}
.hero-logo-art:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.94) 20%,rgba(0,0,0,.58) 35%,rgba(0,0,0,.10) 54%,rgba(0,0,0,0) 72%);
}
@media (min-width:761px){
  .hero{min-height:125vh;}
}
@media(max-width:760px){
  .hero-logo-art{background-size:auto 82%;background-position:78% center;opacity:.72;}
}


/* V10 — one metal master for intro + hero.
   Intro: straight-on. Hero: same exact artwork/material, cinematic crop from TOP only.
   Bottom of logo/smiley remains inside the hero. No scroll label. */
.intro{background:#000;}
.chrome-logo{
  border-radius:0;
  filter:drop-shadow(0 30px 55px rgba(255,255,255,.08));
}
.hero{min-height:125vh;background:#000;}
.hero-logo-art{
  inset:0;
  background-image:url('assets/i-stay-busy-metal-master.png');
  background-repeat:no-repeat;
  background-size:auto 105%;
  background-position:92% bottom;
  opacity:.92;
  overflow:hidden;
  transform:none;
  filter:blur(.35px);
  -webkit-mask-image:none;
  mask-image:none;
}
.hero-logo-art:before{
  content:"";
  display:block;
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.98) 20%,rgba(0,0,0,.76) 34%,rgba(0,0,0,.20) 53%,rgba(0,0,0,0) 70%);
}
.hero-logo-art:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:radial-gradient(ellipse at 68% 20%,rgba(0,0,0,.34),transparent 35%);
  backdrop-filter:none;
}
.scroll-mark{display:none!important;}
@media(max-width:760px){
  .hero{min-height:110vh;}
  .hero-logo-art{background-size:auto 88%;background-position:82% bottom;opacity:.78;filter:blur(.25px);}
}

/* V11 — Contact artwork correction only. */
.contact-project{background:#070707;}
.contact-envelope-art{
  inset:34px;
  background-image:url('assets/contact-envelope-transparent.png');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:right center;
  opacity:.88;
  filter:contrast(1.08) brightness(.82) saturate(.75) blur(.2px);
}
.contact-envelope-art:before{display:none!important;}
.contact-envelope-art:after{background:linear-gradient(90deg,#070707 0%,rgba(7,7,7,.96) 22%,rgba(7,7,7,.50) 48%,rgba(7,7,7,0) 72%);}
@media(max-width:760px){.contact-envelope-art{inset:24px 18px 80px;background-size:contain;background-position:center 38%;opacity:.72;}}

/* V13 — lock the approved header reference exactly; remove duplicate live hero text. */
.hero{
  min-height:100vh!important;
  padding:0!important;
  background:#000!important;
  overflow:hidden;
}
.hero-logo-art{
  inset:0!important;
  background-image:url('assets/hero-reference.png')!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  opacity:1!important;
  filter:none!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
}
.hero-logo-art:before{display:none!important;}
.hero-logo-art:after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  right:0!important;
  bottom:0!important;
  left:auto!important;
  top:auto!important;
  width:155px!important;
  height:58px!important;
  background:#000!important;
  z-index:5!important;
}
.hero-copy{display:none!important;}
/* The approved header artwork already contains the visible header labels. */
.nav{opacity:0!important;pointer-events:none!important;}

/* Contact: one set of live text only; clean transparent envelope art. */
.contact-envelope-art{
  background-image:url('assets/contact-envelope-transparent.png')!important;
  background-size:contain!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  opacity:.88!important;
}
.contact-envelope-art:after{display:none!important;}
.contact-project .project-meta span:first-child{display:none!important;}

@media(max-width:760px){
  .hero-logo-art{background-size:cover!important;background-position:center top!important;}
  .contact-envelope-art{inset:28px 18px 110px!important;background-size:contain!important;background-position:center!important;}
}

/* V14 — transition fix only. Keep the approved hero artwork untouched.
   Fade its lower/right boundaries into the site's true black so no image edge reads as a rectangle. */
.hero{background:#000!important;}
.hero-logo-art{
  width:100%!important;
  height:100%!important;
  right:0!important;
  bottom:0!important;
}
.hero-logo-art:after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  pointer-events:none!important;
  z-index:5!important;
  background:
    linear-gradient(to bottom, transparent 78%, rgba(0,0,0,.18) 86%, rgba(0,0,0,.72) 95%, #000 100%),
    linear-gradient(to right, transparent 88%, rgba(0,0,0,.18) 94%, #000 100%)!important;
}
.work{background:#000!important;position:relative;z-index:2;}
@media(max-width:760px){
  .hero-logo-art:after{
    background:
      linear-gradient(to bottom, transparent 72%, rgba(0,0,0,.22) 82%, rgba(0,0,0,.78) 94%, #000 100%),
      linear-gradient(to right, transparent 82%, rgba(0,0,0,.20) 91%, #000 100%)!important;
  }
}


/* V15 — additions only: three new projects, restore Contact artwork position,
   and keep all live typography crisp. Hero/fade and all approved components stay frozen. */
html,body{background:#000!important;}
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
}
.project-meta,.project-body,.project-link,.about,.about-copy,footer{
  filter:none!important;
  -webkit-filter:none!important;
  transform:none;
  text-shadow:none!important;
  backface-visibility:hidden;
}
.project h2,.project p,.project-meta,.project-link,.about-copy,.eyebrow,footer{
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
.bienmalo{background:radial-gradient(circle at 72% 36%,#20140f 0,#0b0908 34%,#070707 66%)}
.nothingisreal{background:radial-gradient(circle at 72% 38%,#171717 0,#090909 42%,#050505 72%)}
.deathwish{background:radial-gradient(circle at 74% 36%,#17131d 0,#09080b 42%,#050505 72%)}

/* Contact: restore the envelope to the approved full-card placement. */
.contact-envelope-art{
  inset:0!important;
  background-size:cover!important;
  background-position:center center!important;
  opacity:.78!important;
  filter:none!important;
}
/* Hide the old labels baked into the envelope reference; only the live HD site text remains. */
.contact-envelope-art:before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
  background:
    linear-gradient(#070707 0 0) 100% 0/34% 17% no-repeat,
    linear-gradient(#070707 0 0) 100% 100%/28% 18% no-repeat,
    linear-gradient(#070707 0 0) 0 100%/18% 27% no-repeat!important;
}
.contact-envelope-art:after{display:none!important;}
.contact-project .project-meta,.contact-project .project-body,.contact-project .project-link{filter:none!important;opacity:1!important;}

@media(max-width:760px){
  .contact-envelope-art{inset:0!important;background-size:cover!important;background-position:center center!important;}
  .project-wide{min-height:72vh;}
}

/* V16 — Contact alignment only. Everything else remains frozen from V15. */
.contact-project .project-meta{
  justify-content:flex-end!important;
  width:100%!important;
}
.contact-project .project-meta span:last-child{
  margin-left:auto!important;
  text-align:right!important;
}

/* V18 — conservative correction pass only.
   Preserve the approved hero artwork/texture. No duplicate hero text.
   Restore fixed nav, make the baked hero composition only slightly larger/lower,
   keep Contact artwork complete and remove all baked Contact labels. */

/* Keep the approved hero image; do not replace or re-texture it. */
.hero{
  min-height:100vh!important;
  padding:0!important;
  background:#000!important;
  overflow:hidden!important;
}
.hero-logo-art{
  inset:-2.2%!important;
  background-image:url('assets/hero-reference.png')!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  opacity:1!important;
  filter:none!important;
  transform:translateY(1.8vh) scale(1.03)!important;
  transform-origin:center center!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
}
/* Keep only the single baked hero headline/categories from the approved artwork. */
.hero-copy{display:none!important;}

/* Hide ONLY the baked top-left/top-right nav from the hero image,
   then use the original live fixed nav over the whole site. */
.hero-logo-art:before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:6!important;
  pointer-events:none!important;
  background:
    linear-gradient(#000 0 0) top left/210px 78px no-repeat,
    linear-gradient(#000 0 0) top right/220px 78px no-repeat!important;
}
/* Retain V14's approved fade into black at the bottom/right. */
.hero-logo-art:after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:5!important;
  background:
    linear-gradient(to bottom, transparent 78%, rgba(0,0,0,.18) 86%, rgba(0,0,0,.72) 95%, #000 100%),
    linear-gradient(to right, transparent 88%, rgba(0,0,0,.18) 94%, #000 100%)!important;
}
.nav{
  opacity:1!important;
  pointer-events:auto!important;
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  z-index:40!important;
  mix-blend-mode:difference!important;
}

/* Subtle crisp depth on LIVE site typography only — no glow/blur. */
.nav,.project-meta,.project-body,.project-link,.about-copy,footer{
  text-shadow:0 1px 2px rgba(0,0,0,.48)!important;
}

/* Contact: clean transparent envelope, complete and uncropped.
   Only HTML supplies LET'S WORK TOGETHER / WHATEVER IS NEXT / CONTACT. */
.contact-project{background:#070707!important;}
.contact-envelope-art{
  inset:4% 2% 4% 25%!important;
  background-image:url('assets/contact-envelope-clean.png')!important;
  background-repeat:no-repeat!important;
  background-size:contain!important;
  background-position:center right!important;
  opacity:.84!important;
  filter:none!important;
}
.contact-envelope-art:before,
.contact-envelope-art:after{display:none!important;}
.contact-project .project-meta,.contact-project .project-body,.contact-project .project-link{
  filter:none!important;
  opacity:1!important;
}

@media(max-width:760px){
  .hero-logo-art{
    inset:-1%!important;
    transform:translateY(1vh) scale(1.015)!important;
    background-position:center top!important;
  }
  .hero-logo-art:before{
    background:
      linear-gradient(#000 0 0) top left/150px 70px no-repeat,
      linear-gradient(#000 0 0) top right/160px 70px no-repeat!important;
  }
  .contact-envelope-art{
    inset:12% 4% 10% 18%!important;
    background-size:contain!important;
    background-position:center!important;
  }
}


/* V19 — requested polish fixes only. */
.hero-logo-art{
  transform:translateY(4.2vh) scale(1.065)!important;
  transform-origin:center center!important;
}
.contact-envelope-art{
  background-image:url('assets/contact-envelope-v19.png')!important;
  inset:7% 3% 7% 24%!important;
  background-repeat:no-repeat!important;
  background-size:contain!important;
  background-position:72% center!important;
  opacity:.9!important;
  filter:none!important;
}
.contact-project .project-meta,.contact-project .project-body,.contact-project .project-link{
  z-index:4!important;
}
@media(max-width:760px){
  .hero-logo-art{
    transform:translateY(3vh) scale(1.04)!important;
    background-position:center top!important;
  }
  .contact-envelope-art{
    inset:16% 3% 14% 12%!important;
    background-size:contain!important;
    background-position:center!important;
    opacity:.88!important;
  }
}


/* V20 — strict layout repair only. No redesign. */
/* Hero: use the approved composition with baked nav removed from the image itself.
   Show the full image without extra crop/zoom and without black masking blocks. */
.hero{
  min-height:0!important;
  height:auto!important;
  aspect-ratio:1692/930!important;
  padding:0!important;
  background:#000!important;
  overflow:hidden!important;
}
.hero-logo-art{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background-image:url('assets/hero-reference-clean-nav.png')!important;
  background-size:contain!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
.hero-logo-art:before,
.hero-logo-art:after{display:none!important;}
.hero-copy{display:none!important;}
/* Keep the live nav fixed so it follows the page, with no duplicate baked nav behind it. */
.nav{
  opacity:1!important;
  pointer-events:auto!important;
  position:fixed!important;
  top:0!important;left:0!important;right:0!important;
  z-index:40!important;
  mix-blend-mode:difference!important;
  background:transparent!important;
}
/* Contact: transparent envelope only, no crop, no baked text, no black image rectangle. */
.contact-project{background:#070707!important;}
.contact-envelope-art{
  inset:5% 3% 5% 22%!important;
  background-image:url('assets/contact-envelope-v20.png')!important;
  background-size:contain!important;
  background-position:center right!important;
  background-repeat:no-repeat!important;
  opacity:.88!important;
  filter:none!important;
}
.contact-envelope-art:before,
.contact-envelope-art:after{display:none!important;}
.contact-project .project-meta,
.contact-project .project-body,
.contact-project .project-link{z-index:4!important;}
@media(max-width:760px){
  .hero{aspect-ratio:auto!important;min-height:100vh!important;}
  .hero-logo-art{background-size:contain!important;background-position:center center!important;}
  .contact-envelope-art{inset:12% 4% 12% 12%!important;background-position:center!important;}
}


/* V21 — ONLY the two requested fixes: hero copy sizing/position + uncropped contact envelope. */
/* Keep the approved hero artwork untouched; softly cover the baked hero copy on the left,
   then use live HD text so its size/position can be tuned without moving the chrome artwork. */
.hero-logo-art:after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,#000 0%,#000 42%,rgba(0,0,0,.94) 48%,rgba(0,0,0,.46) 57%,rgba(0,0,0,0) 66%)!important;
}
.hero-copy{
  display:block!important;
  position:absolute!important;
  left:5.7vw!important;
  bottom:15.5%!important;
  z-index:6!important;
  width:min(61vw,1060px)!important;
  text-shadow:0 2px 5px rgba(0,0,0,.58)!important;
}
.hero-copy .eyebrow{
  margin:0 0 18px!important;
  font-size:clamp(10px,.78vw,13px)!important;
  letter-spacing:.22em!important;
}
.hero-copy h1{
  margin:0 0 24px!important;
  font-size:clamp(64px,6.75vw,118px)!important;
  line-height:.88!important;
  letter-spacing:-.055em!important;
  max-width:none!important;
}
.hero-copy .categories{
  margin:0!important;
  font-size:clamp(10px,.72vw,12px)!important;
  letter-spacing:.16em!important;
}
/* Contact: show the ENTIRE transparent envelope asset. No cropping, no cover, no baked text. */
.contact-envelope-art{
  inset:4.5%!important;
  background-image:url('assets/contact-envelope-v20.png')!important;
  background-size:contain!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  opacity:.86!important;
  filter:none!important;
}
.contact-envelope-art:before,.contact-envelope-art:after{display:none!important;}

@media(max-width:760px){
  .hero-copy{
    left:20px!important;
    right:20px!important;
    width:auto!important;
    bottom:13%!important;
  }
  .hero-copy h1{font-size:clamp(54px,15vw,82px)!important;line-height:.9!important;}
  .hero-logo-art:after{background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.96) 48%,rgba(0,0,0,.22) 74%,rgba(0,0,0,0) 100%)!important;}
  .contact-envelope-art{inset:8%!important;background-size:contain!important;background-position:center!important;}
}


/* V22 — nav cleanup only. Preserve all V21 layout/artwork/spacing.
   Use the original approved hero image so no black retouch boxes appear.
   While the hero is visible, let its baked WORK / ABOUT show; the live fixed
   WORK / ABOUT fades in only after the hero so there is never a duplicate. */
.hero-logo-art{
  background-image:url('assets/hero-reference.png')!important;
}
.nav-right{
  transition:opacity .28s ease!important;
}
body.hero-visible .nav-right{
  opacity:0!important;
  pointer-events:none!important;
}
body:not(.hero-visible) .nav-right{
  opacity:1!important;
  pointer-events:auto!important;
}


/* V23 — precision fixes only. Preserve approved artwork, sections, and interactions. */
/* HERO: restore the original approved artwork exactly. No zoom/crop/retouch boxes. */
.hero{
  min-height:0!important;
  height:auto!important;
  aspect-ratio:1692/930!important;
  padding:0!important;
  overflow:hidden!important;
  background:#000!important;
}
.hero-logo-art{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background-image:url('assets/hero-reference.png')!important;
  background-size:contain!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
/* Cover only the old baked headline area on the black left side, with a soft edge.
   This does not touch the chrome artwork or the baked top nav. */
.hero-logo-art:before{display:none!important;}
.hero-logo-art:after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  top:34%!important;
  width:58%!important;
  height:53%!important;
  z-index:3!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,#000 0%,#000 78%,rgba(0,0,0,.92) 88%,rgba(0,0,0,.35) 96%,rgba(0,0,0,0) 100%)!important;
}
/* Live headline: only slightly bigger, but clearly LOWER than before. */
.hero-copy{
  display:block!important;
  position:absolute!important;
  left:5.7vw!important;
  bottom:7.5%!important;
  z-index:6!important;
  width:min(64vw,1120px)!important;
  text-shadow:0 2px 5px rgba(0,0,0,.58)!important;
}
.hero-copy .eyebrow{
  margin:0 0 18px!important;
  font-size:clamp(10px,.8vw,13px)!important;
  letter-spacing:.22em!important;
}
.hero-copy h1{
  margin:0 0 24px!important;
  font-size:clamp(66px,7.05vw,122px)!important;
  line-height:.88!important;
  letter-spacing:-.055em!important;
  max-width:none!important;
}
.hero-copy .categories{
  margin:0!important;
  font-size:clamp(10px,.74vw,12px)!important;
  letter-spacing:.16em!important;
}
/* While the hero is visible, use the baked nav already in the approved artwork.
   After the hero, the live fixed nav appears and follows the page. */
.nav{transition:opacity .28s ease!important;}
body.hero-visible .nav{opacity:0!important;pointer-events:none!important;}
body:not(.hero-visible) .nav{opacity:1!important;pointer-events:auto!important;}

/* CONTACT: show the entire transparent envelope with breathing room. Never crop it. */
.contact-envelope-art{
  inset:0!important;
  background-image:url('assets/contact-envelope-v20.png')!important;
  background-size:68% auto!important;
  background-position:64% 50%!important;
  background-repeat:no-repeat!important;
  opacity:.88!important;
  filter:none!important;
}
.contact-envelope-art:before,.contact-envelope-art:after{display:none!important;}

@media(max-width:760px){
  .hero{aspect-ratio:auto!important;min-height:100vh!important;}
  .hero-logo-art{background-size:contain!important;background-position:center top!important;}
  .hero-logo-art:after{
    top:39%!important;
    width:78%!important;
    height:48%!important;
  }
  .hero-copy{
    left:20px!important;
    right:20px!important;
    width:auto!important;
    bottom:8%!important;
  }
  .hero-copy h1{font-size:clamp(54px,15vw,82px)!important;line-height:.9!important;}
  .contact-envelope-art{
    background-size:88% auto!important;
    background-position:center 48%!important;
  }
}


/* V24 — isolated repair: fixed live nav + uncropped contact artwork. */
/* Keep the approved hero artwork at its native full composition. */
.hero{
  position:relative!important;
  aspect-ratio:1692/930!important;
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  overflow:hidden!important;
  background:#000!important;
}
.hero-logo-art{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background-image:url('assets/hero-reference.png')!important;
  background-size:contain!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  transform:none!important;
  filter:none!important;
  opacity:1!important;
}
/* One continuous top fade hides the baked nav cleanly — no square masks. */
.hero::before{
  content:"";
  position:absolute;
  z-index:7;
  top:0;left:0;right:0;height:92px;
  pointer-events:none;
  background:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.98) 58%,rgba(0,0,0,.68) 78%,rgba(0,0,0,0) 100%);
}
/* Hide only the baked headline area with a soft left-to-right fade. */
.hero-logo-art:after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  top:31%!important;
  width:69%!important;
  height:60%!important;
  z-index:3!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,#000 0%,#000 74%,rgba(0,0,0,.95) 84%,rgba(0,0,0,.58) 93%,rgba(0,0,0,0) 100%)!important;
}
.hero-logo-art:before{display:none!important;}
/* Live headline: slightly larger than the approved original and clearly lower. */
.hero-copy{
  display:block!important;
  position:absolute!important;
  left:5.6vw!important;
  bottom:9.5%!important;
  z-index:8!important;
  width:min(66vw,1140px)!important;
  text-shadow:0 2px 5px rgba(0,0,0,.55)!important;
}
.hero-copy .eyebrow{margin:0 0 18px!important;font-size:clamp(10px,.78vw,13px)!important;letter-spacing:.22em!important;}
.hero-copy h1{margin:0 0 24px!important;font-size:clamp(64px,6.7vw,116px)!important;line-height:.88!important;letter-spacing:-.055em!important;max-width:none!important;}
.hero-copy .categories{margin:0!important;font-size:clamp(10px,.72vw,12px)!important;letter-spacing:.16em!important;}
/* Live nav is always fixed, visible, and clickable across the whole site. */
.nav, body.hero-visible .nav, body:not(.hero-visible) .nav{
  opacity:1!important;
  pointer-events:auto!important;
  position:fixed!important;
  top:0!important;left:0!important;right:0!important;
  z-index:50!important;
  mix-blend-mode:difference!important;
}
.nav a{pointer-events:auto!important;}
.nav a:hover{opacity:.62;}
/* Contact: use the existing transparent envelope smaller, centered-right, never cropped. */
.contact-envelope-art{
  inset:0!important;
  background-image:url('assets/contact-envelope-v20.png')!important;
  background-repeat:no-repeat!important;
  background-size:56% auto!important;
  background-position:68% 48%!important;
  opacity:.88!important;
  filter:none!important;
}
.contact-envelope-art:before,.contact-envelope-art:after{display:none!important;}
.contact-project{overflow:hidden!important;}
@media(max-width:760px){
  .hero{aspect-ratio:auto!important;min-height:100vh!important;}
  .hero-logo-art{background-size:contain!important;background-position:center top!important;}
  .hero::before{height:78px;}
  .hero-logo-art:after{top:35%!important;width:82%!important;height:56%!important;}
  .hero-copy{left:20px!important;right:20px!important;width:auto!important;bottom:9%!important;}
  .hero-copy h1{font-size:clamp(52px,14.2vw,78px)!important;line-height:.9!important;}
  .contact-envelope-art{background-size:82% auto!important;background-position:center 46%!important;}
}


/* V25 — ONLY the two visual fixes requested from V24. */
/* 1) HERO: remove the obvious rectangular headline mask edge.
   Keep the approved artwork, live headline, nav, sizing and spacing unchanged. */
.hero-logo-art:after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  z-index:3!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,
    #000 0%,
    #000 38%,
    rgba(0,0,0,.98) 48%,
    rgba(0,0,0,.88) 58%,
    rgba(0,0,0,.56) 69%,
    rgba(0,0,0,.18) 80%,
    rgba(0,0,0,0) 90%)!important;
}

/* 2) CONTACT: keep the exact card/envelope treatment, but ensure the live
   WHATEVER IS NEXT title is fully inside the card and never clips off-screen. */
.contact-project .project-body{
  position:relative!important;
  left:0!important;
  margin-left:0!important;
  width:min(58%,760px)!important;
  max-width:760px!important;
  overflow:visible!important;
}
.contact-project h2{
  font-size:clamp(62px,7.2vw,112px)!important;
  line-height:.82!important;
  letter-spacing:-.055em!important;
  max-width:100%!important;
  overflow:visible!important;
  white-space:normal!important;
}
@media(max-width:760px){
  .hero-logo-art:after{
    background:linear-gradient(90deg,#000 0%,#000 44%,rgba(0,0,0,.92) 58%,rgba(0,0,0,.48) 74%,rgba(0,0,0,0) 92%)!important;
  }
  .contact-project .project-body{width:74%!important;max-width:none!important;}
  .contact-project h2{font-size:clamp(52px,14vw,78px)!important;}
}


/* V26 FINAL LOCK — only the two approved visual fixes.
   1) Use the approved hero composite with text lowered 10%.
   2) Use the approved full-envelope contact composite, uncropped.
   Everything else remains from V25. */

/* HERO: exact approved image, no masks, no cropping, no duplicate live hero text. */
.hero{
  position:relative!important;
  width:100%!important;
  aspect-ratio:1672/941!important;
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  overflow:hidden!important;
  background:#000!important;
}
.hero::before{display:none!important;}
.hero-logo-art{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background-image:url('assets/hero-final-v26.png')!important;
  background-size:contain!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  transform:none!important;
  filter:none!important;
  opacity:1!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
}
.hero-logo-art:before,.hero-logo-art:after{display:none!important;}
.hero-copy{display:none!important;}

/* NAV: keep the working live fixed nav from the site. */
.nav,.nav a,body.hero-visible .nav,body:not(.hero-visible) .nav{
  opacity:1!important;
  pointer-events:auto!important;
}
.nav{
  position:fixed!important;
  top:0!important;left:0!important;right:0!important;
  z-index:50!important;
  mix-blend-mode:difference!important;
}

/* CONTACT: exact approved full composition, displayed in full with no crop. */
.contact-project{
  position:relative!important;
  min-height:0!important;
  height:auto!important;
  aspect-ratio:1672/941!important;
  padding:0!important;
  overflow:hidden!important;
  background:#000!important;
}
.contact-envelope-art{
  position:absolute!important;
  inset:0!important;
  background-image:url('assets/contact-final-v26.png')!important;
  background-size:contain!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  opacity:1!important;
  filter:none!important;
  z-index:1!important;
}
.contact-envelope-art:before,.contact-envelope-art:after{display:none!important;}

/* Avoid duplicate visible contact text; preserve the real mail link as an invisible click target. */
.contact-project .project-meta,
.contact-project .project-body{display:none!important;}
.contact-project .project-link{
  display:block!important;
  position:absolute!important;
  right:2.2%!important;
  bottom:4.5%!important;
  width:170px!important;
  height:48px!important;
  z-index:5!important;
  color:transparent!important;
  border:0!important;
  padding:0!important;
  overflow:hidden!important;
  text-indent:-9999px!important;
}

@media(max-width:760px){
  .hero,.contact-project{
    aspect-ratio:auto!important;
    min-height:100vh!important;
  }
  .hero-logo-art,.contact-envelope-art{
    background-size:contain!important;
    background-position:center center!important;
  }
  .contact-project .project-link{
    right:4%!important;
    bottom:5%!important;
    width:140px!important;
    height:44px!important;
  }
}

/* V27 — ONLY the two requested changes. Everything else stays locked from V26. */

/* HERO: return to the higher-quality V24 logo artwork while preserving the approved live typography/nav behavior. */
.hero{
  position:relative!important;
  aspect-ratio:1692/930!important;
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  overflow:hidden!important;
  background:#000!important;
}
.hero-logo-art{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background-image:url('assets/hero-reference.png')!important;
  background-size:contain!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  transform:none!important;
  filter:none!important;
  opacity:1!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
}
/* Hide the text baked into the V24 artwork softly, then render the approved text live and crisp. */
.hero-logo-art:before{display:none!important;}
.hero-logo-art:after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  top:31%!important;
  width:69%!important;
  height:60%!important;
  z-index:3!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,#000 0%,#000 74%,rgba(0,0,0,.95) 84%,rgba(0,0,0,.58) 93%,rgba(0,0,0,0) 100%)!important;
}
.hero::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:7!important;
  top:0!important;left:0!important;right:0!important;height:92px!important;
  pointer-events:none!important;
  background:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.98) 58%,rgba(0,0,0,.68) 78%,rgba(0,0,0,0) 100%)!important;
}
.hero-copy{
  display:block!important;
  position:absolute!important;
  left:5.6vw!important;
  bottom:7.0%!important;
  z-index:8!important;
  width:min(66vw,1140px)!important;
  text-shadow:0 2px 5px rgba(0,0,0,.55)!important;
}
.hero-copy .eyebrow{margin:0 0 18px!important;font-size:clamp(10px,.78vw,13px)!important;letter-spacing:.22em!important;}
.hero-copy h1{margin:0 0 24px!important;font-size:clamp(64px,6.7vw,116px)!important;line-height:.88!important;letter-spacing:-.055em!important;max-width:none!important;}
.hero-copy .categories{margin:0!important;font-size:clamp(10px,.72vw,12px)!important;letter-spacing:.16em!important;}

/* Keep the existing fixed, clickable navigation and scroll behavior. */
.nav,.nav a,body.hero-visible .nav,body:not(.hero-visible) .nav{
  opacity:1!important;
  pointer-events:auto!important;
}
.nav{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:50!important;mix-blend-mode:difference!important;}

/* RENEGADE: full R + star, same dark chrome language/angle as the hero, never cropped. */
.renegade{
  background-color:#030303!important;
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.98) 0%,rgba(0,0,0,.86) 31%,rgba(0,0,0,.24) 57%,rgba(0,0,0,.05) 100%),
    url('assets/renegade-r-star-angle.png')!important;
  background-size:100% 100%, contain!important;
  background-position:center, right center!important;
  background-repeat:no-repeat!important;
}
.renegade:after{display:none!important;content:none!important;}
.renegade .project-meta,.renegade .project-body,.renegade .project-link{position:relative;z-index:3;}
.renegade .project-link{position:absolute;}

@media(max-width:760px){
  .hero{aspect-ratio:auto!important;min-height:100vh!important;}
  .hero-logo-art{background-size:contain!important;background-position:center top!important;}
  .hero::before{height:78px!important;}
  .hero-logo-art:after{top:35%!important;width:82%!important;height:56%!important;}
  .hero-copy{left:20px!important;right:20px!important;width:auto!important;bottom:9%!important;}
  .hero-copy h1{font-size:clamp(52px,14.2vw,78px)!important;line-height:.9!important;}
  .renegade{
    background-image:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.78) 62%,#030303 100%),url('assets/renegade-r-star-angle.png')!important;
    background-size:100% 100%, contain!important;
    background-position:center, center 18%!important;
    background-repeat:no-repeat!important;
  }
}

/* V30 — surgical structure update only.
   Hero/nav/intro/contact/about remain from V27. */

/* Make the V27 text-cover dissolve into the artwork instead of reading as a black rectangle. */
.hero-logo-art:after{
  left:-2%!important;
  top:29%!important;
  width:73%!important;
  height:64%!important;
  background:linear-gradient(90deg,#000 0%,#000 60%,rgba(0,0,0,.98) 70%,rgba(0,0,0,.88) 78%,rgba(0,0,0,.60) 86%,rgba(0,0,0,.28) 93%,rgba(0,0,0,0) 100%)!important;
}

/* Large clean pause between hero and the project rail. */
#work{padding-top:clamp(180px,22vh,320px)!important;background:#050505!important;}

/* Every portfolio project occupies the same viewport and moves horizontally. */
.project-track{
  display:flex!important;
  gap:clamp(28px,3vw,54px)!important;
  width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding:0 clamp(28px,4vw,72px) clamp(34px,4vh,60px)!important;
  scroll-snap-type:x mandatory!important;
  scroll-behavior:smooth!important;
  overscroll-behavior-inline:contain!important;
  scrollbar-width:thin;
  box-sizing:border-box!important;
}
.project-track>.project{
  flex:0 0 min(88vw,1480px)!important;
  width:min(88vw,1480px)!important;
  height:clamp(620px,76vh,900px)!important;
  min-height:0!important;
  margin:0!important;
  scroll-snap-align:center!important;
  box-sizing:border-box!important;
}
/* Never crop the Renegade artwork. */
.project-track>.renegade{
  background-size:100% 100%,contain!important;
  background-position:center,right center!important;
  background-repeat:no-repeat!important;
}
/* Contact stays below the horizontal projects, unchanged visually. */
#work>.contact-project{margin-top:clamp(120px,16vh,220px)!important;}

@media(max-width:760px){
  #work{padding-top:120px!important;}
  .project-track{gap:18px!important;padding:0 18px 28px!important;}
  .project-track>.project{flex-basis:88vw!important;width:88vw!important;height:72vh!important;}
  #work>.contact-project{margin-top:90px!important;}
}

/* V31 — requested surgical fixes only: no hero box, no visible rail scrollbar, logo fades into black. */
.hero{
  background:#000!important;
}
.hero-logo-art{
  background-image:url('assets/hero-logo-transparent.png')!important;
  background-color:transparent!important;
  background-repeat:no-repeat!important;
  background-size:auto 118%!important;
  background-position:100% 0%!important;
  opacity:.90!important;
  filter:contrast(1.05) brightness(.86) saturate(.82)!important;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 70%,rgba(0,0,0,.94) 78%,rgba(0,0,0,.62) 88%,rgba(0,0,0,.18) 96%,transparent 100%)!important;
  mask-image:linear-gradient(to bottom,#000 0%,#000 70%,rgba(0,0,0,.94) 78%,rgba(0,0,0,.62) 88%,rgba(0,0,0,.18) 96%,transparent 100%)!important;
}
.hero-logo-art:before,.hero-logo-art:after{display:none!important;content:none!important;}
.hero-copy{display:block!important;bottom:7%!important;}
.scroll-mark{display:none!important;}
.project-track{scrollbar-width:none!important;-ms-overflow-style:none!important;}
.project-track::-webkit-scrollbar{display:none!important;width:0!important;height:0!important;}
body{overflow-x:hidden!important;}
@media(max-width:760px){
  .hero-logo-art{background-size:auto 96%!important;background-position:78% 0!important;}
}

/* V32 — approved header image only. Everything below the hero remains unchanged. */
.hero{
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  aspect-ratio:1672 / 941!important;
  padding:0!important;
  background:#000!important;
  overflow:hidden!important;
}
.hero-logo-art{
  position:absolute!important;
  inset:0!important;
  background-image:url('assets/hero-approved-closeup.png')!important;
  background-size:100% 100%!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  opacity:1!important;
  filter:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
.hero-logo-art:before,.hero-logo-art:after{display:none!important;content:none!important;}
.hero-copy{display:none!important;}
.scroll-mark{display:none!important;}
/* The approved image already contains the top nav visually. Keep the real fixed nav
   clickable but invisible while the hero is visible; reveal it again below the hero. */
.nav{transition:opacity .2s ease!important;}
body.hero-visible .nav{opacity:0!important;pointer-events:auto!important;}
body:not(.hero-visible) .nav{opacity:1!important;pointer-events:auto!important;}
@media(max-width:760px){
  .hero{
    min-height:0!important;
    aspect-ratio:1672 / 941!important;
  }
  .hero-logo-art{
    background-size:100% 100%!important;
    background-position:center center!important;
  }
}


/* SCROLL FADE — requested update only.
   The approved V32 header image/layout stays exactly the same; only its visibility
   fades progressively as the page scrolls upward/out of view. */
.hero{--hero-scroll-opacity:1;}
.hero-logo-art{
  opacity:var(--hero-scroll-opacity)!important;
  transition:opacity .06s linear!important;
  will-change:opacity;
}


/* BLACK SITE BACKGROUND — requested update only.
   Keep the approved header, scroll fade, project cards, Contact and About unchanged.
   Only the page/canvas surrounding the sections is forced to true black. */
:root{--bg:#000!important;}
html,body,.site,main,.work,#work,.project-track,.about,footer{
  background:#000!important;
}