/* ───────────────────────────────────────────
   RESET
─────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
img{display:block;max-width:100%;height:auto}
button,input,textarea,select{font:inherit}
ul,ol{list-style:none}

/* ───────────────────────────────────────────
   TOKENS  —  Black / White / Grey ONLY
   All text colours verified WCAG AA ≥ 4.5:1
─────────────────────────────────────────── */
:root{
  /* surfaces */
  --bg:   #0a0a0a;
  --bg2:  #111111;
  --bg3:  #1a1a1a;
  /* text — contrast ratios on --bg:
     --tx  #f0f0f0  ≈ 17.6:1  ✓
     --txm #8c8c8c  ≈  5.4:1  ✓ (AA normal)
     --txd #303030  purely decorative / non-text   */
  --tx:   #f0f0f0;
  --txm:  #8c8c8c;
  --txd:  #2e2e2e;
  /* accent — near-white on dark  */
  --ac:   #e8e8e8;
  /* borders */
  --bd:   #1e1e1e;
  --bdm:  #303030;
  /* type — Helvetica as primary brand font */
  --fd:'Helvetica Neue','Helvetica',Arial,sans-serif;
  --fb:'Helvetica Neue','Helvetica',Arial,sans-serif;
  --fm:'Space Mono','Courier New',monospace;
  /* fluid type */
  --xs: clamp(.6rem,  .5rem + .35vw, .72rem);
  --sm: clamp(.75rem, .65rem + .32vw, .88rem);
  --bs: clamp(.9rem,  .82rem + .28vw, 1.04rem);
  --lg: clamp(1.1rem, .95rem + .6vw,  1.35rem);
  --xl: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
  --hero: clamp(4.5rem, 2rem + 12vw, 13rem);
  /* easing */
  --e1:cubic-bezier(.25,.46,.45,.94);
  --e2:cubic-bezier(.16,1,.3,1);
  --e3:cubic-bezier(.34,1.56,.64,1);
  /* spacing (8pt) */
  --s1:.5rem;--s2:1rem;--s3:1.5rem;--s4:2rem;
  --s5:2.5rem;--s6:3rem;--s8:4rem;--s10:5rem;
  --s12:6rem;--s16:8rem;--s20:10rem;
}

/* Light mode  — verified contrasts on #f7f7f7:
   --tx  #0c0c0c  ≈ 18.7:1  ✓
   --txm #5a5a5a  ≈  6.5:1  ✓ */
[data-theme=light]{
  --bg:  #f7f7f7;
  --bg2: #efefef;
  --bg3: #e6e6e6;
  --tx:  #0c0c0c;
  --txm: #5a5a5a;
  --txd: #c8c8c8;
  --ac:  #141414;
  --bd:  #e0e0e0;
  --bdm: #cecece;
}

/* ───────────────────────────────────────────
   BASE
─────────────────────────────────────────── */
body{
  background:var(--bg);color:var(--tx);
  font-family:var(--fb);font-weight:400;line-height:1.65;
  overflow-x:hidden;cursor:none;
  transition:background .45s var(--e1),color .45s var(--e1);
}
@media(pointer:coarse){body{cursor:auto}}

/* subtle grain overlay */
body::after{
  content:'';position:fixed;inset:0;z-index:9900;pointer-events:none;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* scroll progress */
#prog{position:fixed;top:0;left:0;z-index:9999;height:2px;width:0;
  background:var(--tx);transition:width .05s linear;pointer-events:none}

/* skip link */
.skip{position:absolute;top:-9999px;left:1rem;z-index:99999;
  background:var(--tx);color:var(--bg);padding:.5rem 1.25rem;
  font-family:var(--fm);font-size:var(--xs);letter-spacing:.1em}
.skip:focus{top:.75rem}

:focus-visible{outline:2px solid var(--tx);outline-offset:4px;border-radius:2px}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-thumb{background:var(--bdm);border-radius:2px}
::selection{background:var(--tx);color:var(--bg)}

/* ───────────────────────────────────────────
   PRELOADER
─────────────────────────────────────────── */
#pl{
  position:fixed;inset:0;z-index:9990;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s4);
  transition:opacity .9s var(--e1),visibility .9s;
}
#pl.out{opacity:0;visibility:hidden;pointer-events:none}
.pl-n{
  font-family:var(--fd);font-size:clamp(5rem,14vw,14rem);
  font-weight:300;line-height:1;letter-spacing:-.04em;color:var(--tx);user-select:none;
}
.pl-track{width:clamp(200px,40vw,440px);height:1px;background:var(--bdm)}
.pl-fill{height:100%;background:var(--tx);width:0;transition:width .04s linear}
.pl-tag{font-family:var(--fm);font-size:var(--xs);color:var(--txm);letter-spacing:.2em;text-transform:uppercase}

/* ───────────────────────────────────────────
   CURSOR
─────────────────────────────────────────── */
#cr,#crd{
  position:fixed;pointer-events:none;z-index:9950;
  border-radius:50%;transform:translate(-50%,-50%);will-change:left,top;
}
#cr{
  width:28px;height:28px;
  border:1px solid rgba(240,240,240,.25);
  transition:width .3s var(--e1),height .3s var(--e1),
    border-color .3s var(--e1),background .3s var(--e1),mix-blend-mode .3s;
}
#cr.hov{width:56px;height:56px;border-color:rgba(240,240,240,.6);background:rgba(240,240,240,.05)}
#cr.clk{width:14px;height:14px;background:var(--tx);border-color:var(--tx)}
#cr.blend{mix-blend-mode:difference;background:var(--tx);width:40px;height:40px;border-color:transparent}
#crd{width:4px;height:4px;background:var(--tx)}
@media(pointer:coarse){#cr,#crd{display:none}}

/* ───────────────────────────────────────────
   NAV
─────────────────────────────────────────── */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s3) var(--s6);
  border-bottom:1px solid transparent;
  transition:background .5s var(--e1),padding .4s var(--e1),border-color .4s;
}
#nav.sc{
  background:rgba(10,10,10,.88);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  padding:var(--s2) var(--s6);border-color:var(--bd);
}
[data-theme=light] #nav.sc{background:rgba(247,247,247,.92)}
@media(max-width:640px){#nav,#nav.sc{padding-inline:var(--s3)}}

.n-logo{
  width: 30px;
  height: auto;
  display: block;
}
.n-logo:hover{opacity:.6}

.n-links{display:flex;align-items:center;gap:var(--s5)}
.n-links a{
  font-family:var(--fm);font-size:var(--xs);color:var(--txm);
  text-decoration:none;letter-spacing:.14em;text-transform:uppercase;
  position:relative;transition:color .25s;padding-bottom:2px;
}
.n-links a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--tx);transition:width .3s var(--e2);
}
.n-links a:hover,.n-links a.act{color:var(--tx)}
.n-links a:hover::after,.n-links a.act::after{width:100%}
@media(max-width:768px){.n-links{display:none}}

.n-r{display:flex;align-items:center;gap:var(--s2)}
#thm{
  width:32px;height:32px;border-radius:50%;background:none;
  border:1px solid var(--bdm);color:var(--txm);font-size:13px;cursor:none;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s,color .2s,transform .3s var(--e3);
}
#thm:hover{border-color:var(--tx);color:var(--tx);transform:rotate(25deg)}

.n-hm{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:none;padding:4px}
.n-hm span{display:block;width:20px;height:1px;background:var(--tx);transition:transform .4s var(--e2),opacity .3s;transform-origin:center}
.n-hm.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.n-hm.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.n-hm.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:768px){.n-hm{display:flex}}

#mob{
  position:fixed;inset:0;z-index:400;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--s16) var(--s6) var(--s8);
  opacity:0;visibility:hidden;transition:opacity .4s var(--e2),visibility .4s;
}
#mob.open{opacity:1;visibility:visible}
.m-link{
  font-family:var(--fd);font-size:clamp(3rem,9vw,5.5rem);font-weight:600;
  font-style:italic;color:var(--txm);text-decoration:none;
  letter-spacing:-.03em;line-height:1.1;transition:color .2s,transform .25s var(--e2);
  display:block;padding:var(--s2) 0;border-bottom:1px solid var(--bd);
}
.m-link:hover{color:var(--tx);transform:translateX(12px)}
.m-foot{margin-top:auto;font-family:var(--fm);font-size:var(--xs);color:var(--txm);letter-spacing:.1em}

/* ───────────────────────────────────────────
   HERO  —  interactive canvas + text
─────────────────────────────────────────── */
#hero{
  min-height:100svh;position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--s6) var(--s8);overflow:hidden;
}

/* canvas lives behind everything */
#hc{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;opacity:1;
}

/* vignette */
#hero::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 70% 80% at 50% 60%,transparent 40%,var(--bg) 100%);
}

.h-inner{position:relative;z-index:2}

/* available badge */
.avail{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--bdm);background:rgba(255,255,255,.04);
  padding:6px 14px;border-radius:100px;
  font-family:var(--fm);font-size:var(--xs);color:var(--txm);letter-spacing:.08em;
  margin-bottom:var(--s6);opacity:0;transform:translateY(14px);
}
.avail.in{animation:fup .6s var(--e2) .2s forwards}
.avail-dot{
  width:7px;height:7px;border-radius:50%;
  background:#22c55e;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(34,197,94,.5);
  animation:green-pulse 2s ease-in-out infinite;
}
@keyframes green-pulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.55);background:#22c55e}
  50%{box-shadow:0 0 0 6px rgba(34,197,94,0);background:#16a34a}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0);background:#22c55e}
}

/* headline — Helvetica needs tighter tracking than serif */
h1.hn{
  font-family:var(--fd);font-size:var(--hero);font-weight:700;
  line-height:.88;letter-spacing:-.055em;margin-bottom:var(--s6);
  text-transform:uppercase;
}
.h-clip{display:block;overflow:hidden}
.h-word{display:block;transform:translateY(110%);opacity:0}
.h-word em{font-style:normal;font-weight:300;color:var(--txm);letter-spacing:-.04em;text-transform:none}
#hero.in .h-clip:nth-child(1) .h-word{animation:revup .9s var(--e2) .38s forwards}
#hero.in .h-clip:nth-child(2) .h-word{animation:revup .9s var(--e2) .54s forwards}

/* hero bottom bar */
.h-bot{display:flex;align-items:flex-end;justify-content:space-between;opacity:0}
#hero.in .h-bot{animation:fup .7s var(--e2) 1.1s forwards}
.h-role{font-family:var(--fm);font-size:var(--sm);color:var(--txm);line-height:2;letter-spacing:.04em}
.h-role b{color:var(--tx);font-weight:400}

/* scroll down hint — replaces cursor hint */
.h-scr{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--fm);font-size:var(--xs);color:var(--txm);
  letter-spacing:.18em;text-transform:uppercase;
  user-select:none;
}
.scr-line-wrap{
  position:relative;width:1px;height:70px;background:var(--bdm);overflow:hidden;
}
.scr-l{
  position:absolute;top:0;left:0;width:100%;height:100%;
  background:linear-gradient(to bottom,transparent,var(--txm),transparent);
  animation:scrl 2.2s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){.scr-l{animation:none;background:var(--txm);top:0}}

/* keyframes */
@keyframes dp{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}
@keyframes fup{to{opacity:1;transform:translateY(0)}}
@keyframes revup{to{transform:translateY(0);opacity:1}}
@keyframes scrl{
  0%{transform:translateY(-100%)}
  100%{transform:translateY(200%)}
}

/* ───────────────────────────────────────────
   TICKER
─────────────────────────────────────────── */
.ticker{
  overflow:hidden;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);
  padding:var(--s3) 0;background:var(--bg2);
}
.t-belt{display:flex;gap:var(--s8);white-space:nowrap;animation:belt 26s linear infinite;will-change:transform}
.t-belt:hover{animation-play-state:paused}
@keyframes belt{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.t-belt{animation:none}}
.t-item{display:inline-flex;align-items:center;gap:var(--s4);flex-shrink:0;
  font-family:var(--fd);font-size:clamp(.85rem,1.7vw,1.1rem);font-weight:300;font-style:italic;color:var(--txm)}
.t-dot{color:var(--tx);font-style:normal;font-size:.65em;opacity:.4}

/* ───────────────────────────────────────────
   SECTION SHELL
─────────────────────────────────────────── */
.sec{padding:var(--s20) var(--s6)}
@media(max-width:640px){.sec{padding:var(--s12) var(--s3)}}
.sh{
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--bd);padding-top:var(--s3);margin-bottom:var(--s12);
}
.sl{font-family:var(--fm);font-size:var(--xs);color:var(--txm);letter-spacing:.18em;text-transform:uppercase}
.sn{font-family:var(--fm);font-size:var(--xs);color:var(--txd)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--e2),transform .9s var(--e2)}
.rv.vis{opacity:1;transform:translateY(0)}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}
.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ═══════════════════════════════════════════
   WORK  —  the star of the show
═══════════════════════════════════════════ */
#work{padding-top:0;padding-bottom:0}

.w-header{
  padding:var(--s20) var(--s6) var(--s8);
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s6);
  border-bottom:1px solid var(--bd);
}
@media(max-width:640px){.w-header{padding:var(--s12) var(--s3) var(--s6);flex-direction:column;align-items:flex-start;gap:var(--s4)}}

.w-title{
  font-family:var(--fd);font-size:clamp(3rem,8vw,9rem);
  font-weight:700;letter-spacing:-.055em;line-height:.9;
  text-transform:uppercase;
}
.w-title em{font-style:normal;font-weight:300;color:var(--txm);letter-spacing:-.03em}

.w-count{
  font-family:var(--fm);font-size:var(--xs);color:var(--txm);
  letter-spacing:.14em;text-align:right;line-height:1.8;white-space:nowrap;
}
.w-count b{display:block;font-family:var(--fd);font-size:clamp(1.8rem,3vw,3rem);
  font-weight:600;letter-spacing:-.03em;color:var(--tx);font-style:normal;margin-bottom:2px}

/* ── PROJECT ROW ── */
.pj{
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--bd);
  cursor:none;
  display:block;text-decoration:none;color:var(--tx);
  transition:background .4s var(--e1);
}
.pj:hover{background:var(--bg2)}

/* left accent line */
.pj::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:2px;background:var(--tx);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .5s var(--e2);
}
.pj:hover::before{transform:scaleY(1)}

/* giant ghost number — purely decorative */
.pj-ghost{
  position:absolute;right:-1rem;top:50%;transform:translateY(-50%);
  font-family:var(--fd);font-size:clamp(9rem,20vw,26rem);
  font-weight:700;letter-spacing:-.06em;line-height:1;
  color:rgba(240,240,240,.028);
  user-select:none;pointer-events:none;z-index:0;
  transition:color .5s var(--e1),letter-spacing .6s var(--e2),transform .6s var(--e2);
  /* aria-hidden set in HTML */
}
.pj:hover .pj-ghost{
  color:rgba(240,240,240,.06);
  letter-spacing:-.04em;
  transform:translateY(-50%) translateX(-16px);
}

/* cursor-following image preview — large */
.pj-preview{
  position:absolute;width:420px;height:270px;
  overflow:hidden;pointer-events:none;z-index:10;
  opacity:0;top:0;left:0;will-change:transform;
  border-radius:3px;
  transition:opacity .4s var(--e2),filter .4s;
  box-shadow:0 40px 100px rgba(0,0,0,.85);
  filter:grayscale(50%) brightness(.85);
}
.pj:hover .pj-preview{opacity:1;filter:grayscale(0) brightness(1)}
.pj-preview img{width:100%;height:100%;object-fit:cover}

/* ───────────────────────────────────────────
   PROJECT PREVIEW RESET
   Keeps magnetic image preview working only on real .pj items
─────────────────────────────────────────── */

.pj {
  position: relative;
}

.pj-preview {
  position: absolute;
  width: 420px;
  height: 270px;
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  top: 0;
  left: 0;
  will-change: transform;
  border-radius: 3px;
  transition: opacity .4s var(--e2), filter .4s;
  box-shadow: 0 40px 100px rgba(0,0,0,.85);
  filter: grayscale(50%) brightness(.85);
}

.pj:hover .pj-preview {
  opacity: 1;
  filter: grayscale(0) brightness(1);
}

.pj-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ───────────────────────────────────────────
   SAFE COMING SOON ROW
   Does not use .pj, so it will not break project preview JS
─────────────────────────────────────────── */

.pj-soon-card {
  position: relative;
  overflow: hidden;
  display: block;
  color: var(--tx);
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.025) 0 14px,
      transparent 14px 28px
    ),
    var(--bg);
  border-bottom: 1px solid var(--bd);
  min-height: clamp(220px, 22vw, 320px);
}

.pj-soon-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--txm);
  opacity: .35;
}

.soon-ghost {
  position: absolute;
  right: -1rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--fd);
  font-size: clamp(9rem, 20vw, 26rem);
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: 1;
  color: rgba(240,240,240,.035);
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

.soon-body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  align-items: center;
  gap: var(--s6);
  padding: clamp(var(--s8), 5vw, var(--s16)) var(--s6);
  min-height: clamp(220px, 22vw, 320px);
}

.soon-idx {
  font-family: var(--fm);
  font-size: var(--xs);
  color: var(--txd);
  align-self: flex-start;
  padding-top: 6px;
}

.soon-info {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.soon-label {
  font-family: var(--fm);
  font-size: var(--xs);
  color: var(--txm);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.soon-title {
  font-family: var(--fd);
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 8rem);
  letter-spacing: -.04em;
  line-height: .88;
  color: var(--txm);
}

.soon-desc {
  font-size: var(--sm);
  color: var(--txm);
  max-width: 55ch;
  line-height: 1.75;
}

.soon-meta {
  font-family: var(--fm);
  font-size: var(--xs);
  color: var(--txd);
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .soon-body {
    grid-template-columns: 3.5rem 1fr;
    gap: var(--s3);
    padding: var(--s6) var(--s3);
  }

  .soon-meta {
    display: none;
  }
}


/* ───────────────────────────────────────────
   TESTIMONIALS — SLIDER CSS
─────────────────────────────────────────── */

#testi {
  background: var(--bg2);
  overflow: hidden;
}

.ts-g {
  --ts-gap: var(--s4);

  display: flex !important;
  grid-template-columns: none !important;
  gap: var(--ts-gap) !important;

  overflow: visible;
  will-change: transform;
  transition: transform 750ms var(--e2);
}

.ts-c {
  flex: 0 0 calc((100% - (var(--ts-gap) * 2)) / 3);
  min-width: 0;

  background: var(--bg3);
  border: 1px solid var(--bd);
  padding: var(--s6) var(--s5);

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  transition: border-color .3s, transform .4s var(--e2);
}

.ts-c:hover {
  border-color: var(--bdm);
  transform: translateY(-4px);
}

.ts-qm {
  font-family: var(--fd);
  font-size: 5rem;
  font-weight: 600;
  line-height: .8;
  color: var(--tx);
  opacity: .1;
  margin-bottom: var(--s3);
  user-select: none;
}

.ts-q {
  font-family: var(--fd);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 300;
  font-style: italic;
  color: var(--txm);
  line-height: 1.75;
  margin-bottom: var(--s5);
}

.ts-q strong {
  color: var(--tx);
  font-style: normal;
}

.ts-who {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: auto;
}

.ts-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bdm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fm);
  font-size: var(--xs);
  color: var(--txm);
  flex: 0 0 36px;
  overflow: hidden;
}

.ts-name {
  font-size: var(--sm);
  font-weight: 500;
  color: var(--tx);
}

.ts-role {
  font-family: var(--fm);
  font-size: var(--xs);
  color: var(--txm);
}

.ts-js-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  margin-top: var(--s5);
}

.ts-js-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--bdm);
  background: var(--bg3);
  color: var(--tx);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fm);
  cursor: none;
  transition: transform .25s var(--e2), border-color .25s, background .25s, color .25s, opacity .25s;
}

.ts-js-btn:hover {
  transform: translateY(-2px);
  border-color: var(--tx);
  background: var(--tx);
  color: var(--bg);
}

.ts-js-btn:disabled {
  opacity: .35;
  pointer-events: none;
}

@media (max-width: 900px) {
  .ts-c {
    flex-basis: calc((100% - var(--ts-gap)) / 2);
  }
}

@media (max-width: 600px) {
  .ts-g {
    --ts-gap: 1rem;
  }

  .ts-c {
    flex-basis: 100%;
    padding: var(--s5) var(--s4);
  }
}

/* project body */
.pj-body{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:7rem 1fr auto;
  align-items:center;gap:var(--s6);
  padding:clamp(var(--s8),5vw,var(--s16)) var(--s6);
  min-height:clamp(260px,22vw,340px);
}
@media(max-width:768px){
  .pj-body{grid-template-columns:3.5rem 1fr;gap:var(--s3);padding:var(--s6) var(--s3);min-height:180px}
  .pj-meta-r{display:none}
}

/* left: index */
.pj-idx{
  font-family:var(--fm);font-size:var(--xs);color:var(--txd);
  align-self:flex-start;padding-top:6px;
  transition:color .3s;
}
.pj:hover .pj-idx{color:var(--txm)}

/* center: main info */
.pj-info{display:flex;flex-direction:column;gap:var(--s3)}

.pj-label{
  font-family:var(--fm);font-size:var(--xs);color:var(--txm);
  letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transform:translateX(-8px);
  transition:opacity .3s var(--e2),transform .3s var(--e2);
}
.pj:hover .pj-label{opacity:1;transform:translateX(0)}

.pj-t{
  font-family:var(--fd);font-weight:700;
  font-size:clamp(3rem,7vw,8rem);
  letter-spacing:-.04em;line-height:.88;
  transition:transform .45s var(--e2),letter-spacing .45s var(--e2);
}
.pj:hover .pj-t{transform:translateX(10px);letter-spacing:-.035em}

.pj-d{
  font-size:var(--sm);color:var(--txm);max-width:55ch;line-height:1.75;
  transform:translateY(4px);opacity:0;
  transition:opacity .35s var(--e2) .05s, transform .35s var(--e2) .05s;
}
.pj:hover .pj-d{opacity:1;transform:translateY(0)}

.pj-tags{
  display:flex;flex-wrap:wrap;gap:6px;
  transform:translateY(6px);opacity:0;
  transition:opacity .35s var(--e2) .1s, transform .35s var(--e2) .1s;
}
.pj:hover .pj-tags{opacity:1;transform:translateY(0)}

.tag{
  font-family:var(--fm);font-size:var(--xs);color:var(--txm);
  border:1px solid var(--bdm);padding:2px 10px;border-radius:100px;
  transition:border-color .3s,color .3s;
}
.pj:hover .tag{border-color:var(--txm);color:var(--tx)}

/* right: year + arrow */
.pj-meta-r{
  display:flex;flex-direction:column;align-items:flex-end;gap:var(--s3);
  align-self:center;
}
.pj-yr{font-family:var(--fm);font-size:var(--xs);color:var(--txd);transition:color .3s}
.pj:hover .pj-yr{color:var(--txm)}

.pj-arr{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--bdm);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--txm);
  transition:transform .45s var(--e3),border-color .3s,color .3s,background .3s;
}
.pj:hover .pj-arr{
  transform:rotate(-45deg) scale(1.1);
  border-color:var(--tx);color:var(--bg);background:var(--tx);
}

/* ── inline expand panel ── */
.pj-expand{
  max-height:0;overflow:hidden;
  transition:max-height .65s var(--e2);
  border-top:0px solid var(--bd);
  position:relative;z-index:2;
  background:var(--bg3);
}
.pj-expand.open{max-height:500px;border-top-width:1px}
.pj-expand-in{
  display:grid;grid-template-columns:1fr 2fr;gap:var(--s8);
  padding:var(--s6) var(--s6) var(--s8) calc(7rem + var(--s6) + var(--s6));
  align-items:start;
}
@media(max-width:768px){.pj-expand-in{grid-template-columns:1fr;padding:var(--s5) var(--s3)}}
.pj-exp-img{border-radius:2px;overflow:hidden;aspect-ratio:16/9;background:var(--bdm)}
.pj-exp-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(15%)}
.pj-exp-detail{display:flex;flex-direction:column;gap:var(--s4)}
.pj-exp-full{font-size:var(--bs);color:var(--txm);line-height:1.85}
.pj-exp-full strong{color:var(--tx);font-weight:500}
.pj-exp-stats{display:flex;gap:var(--s6);flex-wrap:wrap}
.pj-exp-stat-l{font-family:var(--fm);font-size:var(--xs);color:var(--txd);letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.pj-exp-stat-v{font-size:var(--sm);color:var(--txm)}
.pj-exp-link{
  display:inline-flex;align-items:center;gap:var(--s2);align-self:flex-start;
  font-family:var(--fm);font-size:var(--xs);color:var(--tx);
  text-decoration:none;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid var(--bdm);padding-bottom:4px;
  transition:gap .3s var(--e2),border-color .2s;
}
.pj-exp-link:hover{gap:var(--s4);border-color:var(--tx)}

/* ── "view all work" link ── */
.w-more{
  padding:var(--s6) var(--s6);
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--bd);
  font-family:var(--fm);font-size:var(--xs);color:var(--txm);
  letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;
  transition:background .3s,color .3s;
  cursor:none;
}
.w-more:hover{background:var(--bg2);color:var(--tx)}
.w-more-arr{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--bdm);
  display:flex;align-items:center;justify-content:center;font-size:13px;
  transition:transform .4s var(--e3),border-color .3s,background .3s,color .3s;
}
.w-more:hover .w-more-arr{transform:rotate(-45deg);border-color:var(--tx);background:var(--tx);color:var(--bg)}

/* ───────────────────────────────────────────
   ABOUT
─────────────────────────────────────────── */
#about{background:var(--bg2)}
.a-q{
  font-family:var(--fd);font-size:clamp(1.6rem,3.4vw,3.4rem);
  font-weight:300;letter-spacing:-.03em;
  line-height:1.25;max-width:800px;color:var(--txm);margin-bottom:var(--s16);
}
.a-q strong{color:var(--tx);font-weight:700}
.a-g{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s8);align-items:start}
@media(max-width:768px){.a-g{grid-template-columns:1fr}}
.a-bio{font-size:var(--bs);color:var(--txm);line-height:1.9}
.a-bio p+p{margin-top:var(--s3)}
.a-bio strong{color:var(--tx);font-weight:500}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.stat{border-top:1px solid var(--bd);padding:var(--s3) 0}
.stat-n{
  font-family:var(--fd);font-size:clamp(2.4rem,4vw,4rem);
  font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--tx);
}
.stat-n sup{font-size:.55em;font-weight:300;color:var(--txm)}
.stat-l{font-family:var(--fm);font-size:var(--xs);color:var(--txm);letter-spacing:.06em;margin-top:6px}

/* ───────────────────────────────────────────
   CAPABILITIES
─────────────────────────────────────────── */
.cap-wrap{display:grid;grid-template-columns:1fr 1.8fr;gap:var(--s12);align-items:start}
@media(max-width:768px){.cap-wrap{grid-template-columns:1fr}}
.cap-hl{
  font-family:var(--fd);font-weight:700;
  font-size:clamp(2rem,4vw,3.8rem);line-height:1.05;letter-spacing:-.045em;
  position:sticky;top:120px;text-transform:uppercase;
}
.cap-hl em{font-style:normal;font-weight:300;color:var(--txm);display:block;text-transform:none;letter-spacing:-.02em}
.cap-list{display:flex;flex-direction:column}
.cap-i{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s3) 0;border-bottom:1px solid var(--bd);
  transition:border-color .25s;cursor:default;
}
.cap-i:hover{border-bottom-color:var(--bdm)}
.cap-n{font-size:var(--bs);transition:color .25s,transform .3s var(--e2)}
.cap-i:hover .cap-n{color:var(--tx);transform:translateX(10px)}
.cap-tag{
  font-family:var(--fm);font-size:var(--xs);color:var(--txm);
  background:var(--bg3);border:1px solid var(--bdm);
  padding:3px 10px;border-radius:100px;white-space:nowrap;
  transition:border-color .25s,color .25s;
}
.cap-i:hover .cap-tag{border-color:var(--txm);color:var(--tx)}

/* client belt */
.cl-wrap{padding:var(--s8) 0;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);overflow:hidden}
.cl-belt{display:flex;gap:var(--s12);align-items:center;animation:belt 22s linear infinite;white-space:nowrap}
.cl-belt:hover{animation-play-state:paused}
.cl-name{font-family:var(--fd);font-size:clamp(1.4rem,2.5vw,2rem);font-weight:600;
  color:var(--txd);letter-spacing:-.02em;flex-shrink:0;transition:color .25s;cursor:default}
.cl-name:hover{color:var(--txm)}
.cl-sep{color:var(--bdm);flex-shrink:0}

.cl-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  vertical-align: middle !important;
}

.cl-logo-box {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--tx) !important;
}
.cl-logo-svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.cl-logo-box img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: invert(1) contrast(1.2) !important;
}

body.light .cl-logo-box img,
[data-theme="light"] .cl-logo-box img {
  filter: brightness(0) !important;
}
body.dark .cl-logo-box img,
[data-theme="dark"] .cl-logo-box img {
  filter: brightness(0) invert(1) !important;
}

/* ── CTA STRIP — always dark surface, never inverts in dark mode ── */
.cta-strip{
  background:var(--bg3);
  border-top:1px solid var(--bd);
  border-bottom:1px solid var(--bd);
  padding:var(--s10) var(--s6);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s6);flex-wrap:wrap;overflow:hidden;position:relative;
}
[data-theme=light] .cta-strip{
  background:#0c0c0c;
  border-color:#0c0c0c;
}
.cta-strip::before{
  content:'Let\'s talk';position:absolute;right:-1%;top:50%;transform:translateY(-50%);
  font-family:var(--fd);font-size:clamp(6rem,15vw,18rem);font-weight:700;
  color:rgba(255,255,255,.04);white-space:nowrap;
  pointer-events:none;letter-spacing:-.04em;line-height:1;
}
.cta-txt{
  font-family:var(--fd);font-weight:700;
  font-size:clamp(1.8rem,4vw,3.5rem);letter-spacing:-.03em;line-height:1.1;
  color:#f0f0f0;position:relative;
}
.cta-txt em{font-style:italic;font-weight:300;opacity:.7}
.btn-cta{
  display:inline-flex;align-items:center;gap:var(--s2);
  background:transparent;color:#f0f0f0;
  border:1px solid rgba(240,240,240,.25);
  padding:var(--s2) var(--s5);font-family:var(--fm);font-size:var(--sm);
  font-weight:700;letter-spacing:.08em;cursor:none;flex-shrink:0;position:relative;
  transition:gap .3s var(--e1),transform .3s var(--e3),background .2s,border-color .2s;
}
.btn-cta:hover{gap:var(--s4);transform:translateY(-3px);background:rgba(240,240,240,.08);border-color:rgba(240,240,240,.5)}
.btn-cta:active{transform:translateY(0) scale(.97)}

/* ───────────────────────────────────────────
   CONTACT  — fixed, clean two-column layout
─────────────────────────────────────────── */
#contact{background:var(--bg2)}
.c-outer{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:start;
  border-top:1px solid var(--bd);
}
@media(max-width:900px){.c-outer{grid-template-columns:1fr}}

/* left column */
.c-left{padding:var(--s16) var(--s8) var(--s16) var(--s6);border-right:1px solid var(--bd)}
@media(max-width:900px){.c-left{padding:var(--s12) var(--s3);border-right:none;border-bottom:1px solid var(--bd)}}

.c-hl{
  font-family:var(--fd);font-weight:700;
  font-size:clamp(2.5rem,5vw,5.5rem);
  line-height:.9;letter-spacing:-.05em;
  margin-bottom:var(--s8);text-transform:uppercase;
}
.c-hl em{font-style:normal;font-weight:300;color:var(--txm);text-transform:none;letter-spacing:-.025em}

/* meta rows */
.c-meta-stack{display:flex;flex-direction:column;margin-bottom:var(--s8)}
.c-meta-i{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s3) 0;border-bottom:1px solid var(--bd);
}
.c-meta-label{font-family:var(--fm);font-size:var(--xs);color:var(--txd);letter-spacing:.14em;text-transform:uppercase}
.c-meta-val{font-size:var(--sm);color:var(--txm);text-align:right}
.c-meta-val a{color:var(--txm);text-decoration:none;transition:color .2s}
.c-meta-val a:hover{color:var(--tx)}
.c-meta-val.open{color:#22c55e}

/* form */
.cf{display:flex;flex-direction:column;gap:var(--s4)}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media(max-width:640px){.cf-row{grid-template-columns:1fr}}
.fg{display:flex;flex-direction:column;gap:6px}
.fl{font-family:var(--fm);font-size:var(--xs);color:var(--txm);letter-spacing:.12em;text-transform:uppercase}
.fi {
  background: var(--bg3);
  border: 1px solid var(--bd);
  color: var(--tx);

  font-family: var(--fb);
  font-size: var(--bs);
  padding: var(--s2) var(--s3);

  outline: none;
  border-radius: 0;
  width: 100%;

  appearance: none;

  transition: border-color 0.2s, background 0.2s;
}
.fi::placeholder{color:var(--txd)}
.fi:focus{border-color:var(--txm);background:var(--bg)}
.fi.err{border-color:#b04040}
.fi.ok{border-color:var(--txm)}
textarea.fi{resize:vertical;min-height:130px}
.fe{font-family:var(--fm);font-size:var(--xs);color:#c07070;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s;margin-top:2px}
.fe.show{opacity:1;transform:translateY(0)}

.btn-sub{
  display:inline-flex;align-items:center;gap:var(--s2);
  background:var(--tx);color:var(--bg);border:none;
  padding:var(--s2) var(--s6);font-family:var(--fm);font-size:var(--sm);
  font-weight:700;letter-spacing:.08em;cursor:none;align-self:flex-start;
  transition:background .2s,transform .3s var(--e3),gap .3s var(--e1);
}
.btn-sub:hover{opacity:.85;transform:translateY(-3px);gap:var(--s3)}
.btn-sub:active{transform:translateY(0) scale(.98)}
.btn-sub:disabled{opacity:.5;transform:none}

.f-success{display:none;padding:var(--s10) var(--s6);background:var(--bg3);border:1px solid var(--bdm);text-align:center}
.f-success.show{display:flex;flex-direction:column;align-items:center;gap:var(--s4)}
.f-suc-ico{font-size:2rem;color:var(--tx);opacity:.4}
.f-suc-h{font-family:var(--fd);font-size:var(--xl);font-style:italic;color:var(--txm)}
.f-suc-p{font-family:var(--fm);font-size:var(--xs);color:var(--txm);letter-spacing:.08em}

/* right column */
.c-right{padding:var(--s16) var(--s6) var(--s16) var(--s8);display:flex;flex-direction:column;gap:var(--s10)}
@media(max-width:900px){.c-right{padding:var(--s10) var(--s3)}}

/* big email display */
.c-email-big{
  display:block;text-decoration:none;
  font-family:var(--fd);font-weight:700;
  font-size:clamp(1.4rem,3vw,2.6rem);
  letter-spacing:-.025em;line-height:1.15;
  color:var(--txm);
  border-bottom:1px solid var(--bd);padding-bottom:var(--s6);
  transition:color .25s;word-break:break-all;
}
.c-email-big:hover{color:var(--tx)}
.c-email-big span{display:block;font-family:var(--fm);font-size:var(--xs);
  color:var(--txd);letter-spacing:.14em;text-transform:uppercase;
  font-weight:400;margin-bottom:var(--s2)}

/* social links */
.c-social{display:flex;flex-direction:column;gap:0;border-bottom:1px solid var(--bd);padding-bottom:var(--s6)}
.c-social-lbl{font-family:var(--fm);font-size:var(--xs);color:var(--txd);letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--s3)}
.c-social-links{display:flex;flex-direction:column;gap:0}
.c-slink{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s2) 0;border-top:1px solid var(--bd);
  text-decoration:none;color:var(--txm);
  font-size:var(--bs);
  transition:color .2s,padding-left .25s var(--e2);
}
.c-slink-main {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.c-slink-logo {
  width: 20px;
  height: 20px;
  display: inline-block;
  object-fit: contain;
  flex: 0 0 auto;
  opacity: 1;
  visibility: visible;
}
.c-slink:hover{color:var(--tx);padding-left:var(--s2)}
.c-slink-arr{font-size:12px;transition:transform .3s var(--e3)}
.c-slink:hover .c-slink-arr{transform:rotate(-45deg)}

/* availability card */
.c-avail-card{
  background:var(--bg3);border:1px solid var(--bd);
  padding:var(--s5);
}
.c-avail-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--s3);
}
.c-avail-status{
  display:flex;align-items:center;gap:8px;
  font-family:var(--fm);font-size:var(--xs);color:var(--txm);letter-spacing:.08em;
}
.c-avail-dot{
  width:7px;height:7px;border-radius:50%;background:#22c55e;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(34,197,94,.5);
  animation:green-pulse 2s ease-in-out infinite;
}
.c-avail-yr{font-family:var(--fm);font-size:var(--xs);color:var(--txd)}
.c-avail-txt{
  font-family:var(--fd);font-size:clamp(1.2rem,2vw,1.7rem);font-weight:700;
  letter-spacing:-.02em;line-height:1.3;color:var(--tx);margin-bottom:var(--s3);
}
.c-avail-sub{font-size:var(--sm);color:var(--txm);line-height:1.7}
.c-avail-types{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s3)}
.c-type-tag{
  font-family:var(--fm);font-size:var(--xs);color:var(--txm);
  border:1px solid var(--bdm);padding:3px 10px;border-radius:100px;
}

/* ───────────────────────────────────────────
   FOOTER
─────────────────────────────────────────── */
footer{border-top:1px solid var(--bd);padding:var(--s6)}
.foot-top{display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:var(--s6);margin-bottom:var(--s6);border-bottom:1px solid var(--bd);flex-wrap:wrap;gap:var(--s6)}
.foot-logo{font-family:var(--fd);font-size:clamp(3rem,8vw,8rem);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--txd);text-decoration:none;transition:color .3s;user-select:none;display:inline-block}
.foot-logo:hover{color:var(--txm)}
.foot-nav{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-end}
.foot-nav a{font-family:var(--fd);font-style:italic;font-size:var(--lg);color:var(--txm);text-decoration:none;transition:color .2s,transform .2s;text-align:right}
.foot-nav a:hover{color:var(--tx);transform:translateX(-6px)}
.foot-bot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s3)}
.foot-c,.foot-made{font-family:var(--fm);font-size:var(--xs);color:var(--txm)}
.foot-links{display:flex;align-items:center;gap:var(--s4)}
.foot-links a{font-family:var(--fm);font-size:var(--xs);color:var(--txm);text-decoration:none;letter-spacing:.08em;transition:color .2s}
.foot-links a:hover{color:var(--tx)}

/* back to top */
#btt{
  position:fixed;bottom:var(--s5);right:var(--s5);z-index:300;
  width:40px;height:40px;border-radius:50%;
  background:var(--bg3);border:1px solid var(--bdm);
  display:flex;align-items:center;justify-content:center;
  color:var(--txm);font-size:15px;cursor:none;
  opacity:0;transform:translateY(16px);
  transition:opacity .4s,transform .4s var(--e3),background .2s,border-color .2s,color .2s;
}
#btt.show{opacity:1;transform:translateY(0)}
#btt:hover{background:var(--tx);border-color:var(--tx);color:var(--bg)}

/* ───────────────────────────────────────────
   PAGE UTILITY CLASSES
─────────────────────────────────────────── */
.sec-alt{background:var(--bg2)}
.sec-no-top{padding-top:0}
.sec-no-pad{padding:0}
.section-heading-tight{padding:var(--s6) var(--s6) 0;margin-bottom:0}
.optional-label{opacity:.45;font-weight:300}


/* ───────────────────────────────────────────
   PROJECT INDEX + CASE STUDY SHARED ADDITIONS
─────────────────────────────────────────── */
.page-shell{min-height:100svh;padding-top:88px}
.page-hero{padding:var(--s16) var(--s6) var(--s10);border-bottom:1px solid var(--bd);position:relative;overflow:hidden;background:radial-gradient(circle at 75% 20%,var(--bg3),transparent 32%),var(--bg)}
.page-kicker{font-family:var(--fm);font-size:var(--xs);letter-spacing:.18em;text-transform:uppercase;color:var(--txm);margin-bottom:var(--s4);display:flex;align-items:center;gap:var(--s2)}
.page-kicker::before{content:'';width:36px;height:1px;background:var(--txm);opacity:.6}
.page-title{font-family:var(--fd);font-size:clamp(4rem,12vw,13rem);font-weight:700;letter-spacing:-.07em;line-height:.86;text-transform:uppercase;max-width:1200px}
.page-title em{font-style:normal;font-weight:300;color:var(--txm);text-transform:none}
.page-lead{max-width:720px;margin-top:var(--s6);font-size:var(--lg);color:var(--txm);line-height:1.7}
.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--bd);border-bottom:1px solid var(--bd)}
@media(max-width:900px){.projects-grid{grid-template-columns:1fr}.page-hero{padding:var(--s12) var(--s3) var(--s8)}}
.project-card{position:relative;min-height:560px;background:var(--bg);color:var(--tx);text-decoration:none;overflow:hidden;padding:var(--s5);display:flex;flex-direction:column;justify-content:space-between;isolation:isolate;cursor:none}
.project-card::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.72) 100%);z-index:-1;opacity:.9;transition:opacity .45s var(--e1)}
.project-card-img{position:absolute;inset:0;z-index:-2;overflow:hidden}
.project-card-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(70%) brightness(.55);transform:scale(1.02);transition:transform .7s var(--e2),filter .7s var(--e1)}
.project-card:hover .project-card-img img{transform:scale(1.08);filter:grayscale(15%) brightness(.65)}
.project-card:hover::after{opacity:1}
.project-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);position:relative;z-index:1}
.project-card-num{font-family:var(--fm);font-size:var(--xs);color:rgba(240,240,240,.55);letter-spacing:.14em}
.project-card-open{width:44px;height:44px;border-radius:50%;border:1px solid rgba(240,240,240,.32);display:flex;align-items:center;justify-content:center;color:rgba(240,240,240,.75);transition:transform .45s var(--e3),background .3s,color .3s,border-color .3s}
.project-card:hover .project-card-open{transform:rotate(-45deg) scale(1.08);background:#f0f0f0;color:#0a0a0a;border-color:#f0f0f0}
.project-card-content{position:relative;z-index:1;max-width:720px}
.project-card-label{font-family:var(--fm);font-size:var(--xs);color:rgba(240,240,240,.58);letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:var(--s2)}
.project-card-title{font-family:var(--fd);font-size:clamp(3rem,7vw,7.5rem);font-weight:700;letter-spacing:-.065em;line-height:.85;text-transform:uppercase;margin-bottom:var(--s3)}
.project-card-desc{font-size:var(--bs);color:rgba(240,240,240,.7);line-height:1.7;max-width:58ch;margin-bottom:var(--s4)}
.project-card-tags{display:flex;gap:6px;flex-wrap:wrap}.project-card-tags .tag{border-color:rgba(240,240,240,.26);color:rgba(240,240,240,.62)}
.project-cta-band{padding:var(--s12) var(--s6);display:flex;align-items:center;justify-content:space-between;gap:var(--s6);border-bottom:1px solid var(--bd);background:var(--bg2);flex-wrap:wrap}
.project-cta-title{font-family:var(--fd);font-size:clamp(2rem,5vw,5rem);font-weight:700;letter-spacing:-.05em;line-height:.95;text-transform:uppercase}.project-cta-title em{font-style:normal;font-weight:300;color:var(--txm);text-transform:none}
.link-pill{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--fm);font-size:var(--xs);letter-spacing:.12em;text-transform:uppercase;color:var(--bg);background:var(--tx);padding:var(--s2) var(--s4);text-decoration:none;border:1px solid var(--tx);transition:gap .3s var(--e2),transform .3s var(--e3),background .3s,color .3s}
.link-pill:hover{gap:var(--s3);transform:translateY(-3px);background:transparent;color:var(--tx)}
@media(max-width:640px){.project-card{min-height:460px;padding:var(--s3)}.project-cta-band{padding:var(--s8) var(--s3)}}
.case-nav-home{position:fixed;left:var(--s6);bottom:var(--s5);z-index:300;font-family:var(--fm);font-size:var(--xs);letter-spacing:.12em;text-transform:uppercase;color:var(--txm);text-decoration:none;border:1px solid var(--bdm);background:var(--bg3);padding:.75rem 1rem;transition:color .2s,border-color .2s,transform .3s var(--e3)}
.case-nav-home:hover{color:var(--tx);border-color:var(--tx);transform:translateY(-3px)}
@media(max-width:768px){.case-nav-home{display:none}}

/* Final safety polish: testimonial avatar images */
img.ts-av {
  object-fit: cover;
  display: block;
}