/* Image-led — big media does the talking. Near-black gallery,
   few words, generous space. Shines when real photos/renders land. */
:root{
  --bg:#0B0B0B; --panel:#111110; --text:#ECEAE5; --soft:#8C8A84; --line:rgba(255,255,255,.10);
  --accent:#E8E6E0;
  --sans:"Hanken Grotesk",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--text);color:var(--bg)}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}

/* hero — clean header (no full-bleed media yet) */
.v-hero{position:relative;max-width:1200px;margin:0 auto;padding:clamp(1.4rem,4vh,2.2rem) clamp(1.2rem,4vw,4rem) clamp(2.5rem,7vh,5rem)}
.v-hero .cap{max-width:900px}
.v-hero .cap h1{font-size:clamp(2.6rem,8vw,6rem);font-weight:700;letter-spacing:-.03em;line-height:.98}
.v-hero .cap p{margin-top:.5rem;color:#C9C7C1;font-size:clamp(1.05rem,1.9vw,1.45rem);max-width:46ch}
.v-hero .cap .focus{margin-top:0;color:var(--soft);font-size:.9rem;display:flex;flex-direction:column}
.v-hero .cap .focus--mobile{display:none}
.v-hero .cap .focus .fl{display:inline-block;min-width:112px;color:var(--text);font-weight:600;margin-right:.25rem}
@media (max-width:640px){
  .v-hero .cap .focus--full{display:none}
  .v-hero .cap .focus--mobile{display:flex}
  .v-hero .cap .focus .fl{min-width:96px}
}
.v-hero .cap .loc{margin-top:0;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}

/* elegant placeholder */
.ph{display:grid;place-items:center;background:linear-gradient(135deg,#161514,#0a0a0a);border:1px solid var(--line)}
.ph span{font-weight:700;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.16);
  text-align:center;padding:1rem;font-size:clamp(1.6rem,5vw,4rem)}

/* projects — 6-col grid: full-width features bracket a 3-up row of smaller cards */
.v-list{padding:0 clamp(1.2rem,4vw,4rem) clamp(3rem,9vh,7rem);display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(2rem,4vw,3.5rem) clamp(1.5rem,3vw,2.5rem);max-width:1200px;margin:0 auto}
.v-proj{grid-column:span 2;min-width:0}
.v-proj.full{grid-column:1 / -1}
.v-proj .cap,.dl-show .dl-head>div{min-width:0}
.v-proj .frame{display:block;position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:var(--panel);margin-bottom:.45rem}
.v-proj .frame.video video{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:820px){
  .v-list{grid-template-columns:1fr;padding:0 clamp(1.1rem,5vw,2rem) clamp(3rem,8vh,5rem);gap:2.6rem}
  .v-proj,.v-proj.full{grid-column:auto}
  .v-hero{padding:2.6rem clamp(1.1rem,5vw,2rem)}
  .v-hero .cap h1{font-size:clamp(2.5rem,10vw,3.8rem)}
  .v-hero .cap p{font-size:1.2rem;margin-top:.5rem}
}

/* DripLit app showcase */
.dl-show .cap{margin-top:0;margin-bottom:1.5rem}
.dl-show .dl-head{display:flex;align-items:center;gap:1rem}
.dl-show .dl-tags{margin-top:1.1rem}
.dl-logo{width:52px;height:52px;border-radius:22%;flex-shrink:0;box-shadow:0 4px 16px rgba(0,0,0,.45);display:block}
.dl-screens{border-radius:20px;overflow:hidden;margin-bottom:1.6rem}
.dl-screens img{width:100%;height:auto;display:block}
.dl-phones{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,2vw,1.4rem)}
.dl-phones .phone{position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:var(--panel);border:1px solid var(--line);cursor:pointer;transition:border-color .25s,transform .35s cubic-bezier(.16,1,.3,1)}
.dl-phones .phone:hover{border-color:rgba(255,255,255,.3);transform:translateY(-4px)}
.dl-phones .phone.snd{border-color:var(--text)}
.dl-phones .phone video{width:100%;height:100%;object-fit:cover;display:block}
.dl-snd{position:absolute;bottom:12px;right:12px;width:30px;height:30px;color:#fff;opacity:.6;transition:opacity .25s;
  pointer-events:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.dl-snd svg{width:100%;height:100%;display:block}
.dl-phones .phone:hover .dl-snd{opacity:.85}
.dl-phones .phone.snd .dl-snd{opacity:1}
.dl-snd .ic-wave{display:none}
.dl-phones .phone.snd .dl-snd .ic-wave{display:block}
.dl-phones .phone.snd .dl-snd .ic-mute{display:none}
@media (max-width:640px){.dl-phones{grid-template-columns:repeat(2,1fr)}}

/* fabrication process gallery */
.proc-show .cap{margin-top:0;margin-bottom:1.5rem}
.proc-show .proc-tags{margin-top:1.1rem}
.proc-viewer{margin-bottom:0}
.proc-stage{margin-bottom:1rem}
.proc-hero{min-width:0}
.proc-hero-frame{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:var(--panel);cursor:default}
.proc-hero-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .22s ease}
.proc-hero-frame img.fx{opacity:.55}
.proc-hero-label{display:block;margin-top:.45rem;font-size:.7rem;letter-spacing:.05em;color:var(--soft);text-align:center}
.proc-stage--step .proc-hero-label{display:none}
.proc-story{display:none;align-items:baseline;flex-wrap:wrap;gap:.35rem .65rem;margin-top:.7rem}
.proc-stage--step .proc-story{display:flex}
.proc-idx{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.proc-story-title{font-weight:600;color:var(--text);font-size:.95rem}
.proc-story-note{color:var(--soft);font-size:.88rem;line-height:1.35}
.proc-strip{display:flex;gap:clamp(.55rem,1.2vw,.9rem);overflow-x:auto;-webkit-overflow-scrolling:touch;padding:.15rem .1rem .35rem;
  scroll-snap-type:x proximity;scrollbar-width:thin}
.proc-step{flex:0 0 auto;width:clamp(92px,10.5vw,118px);padding:0;border:none;background:none;color:inherit;font:inherit;text-align:center;
  cursor:pointer;scroll-snap-align:start}
.proc-frame{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#0a0a0a;border:1px solid var(--line);
  transition:border-color .2s,transform .3s cubic-bezier(.16,1,.3,1)}
.proc-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.proc-num{position:absolute;top:6px;left:7px;font-size:.62rem;letter-spacing:.08em;color:#fff;opacity:.75;
  text-shadow:0 1px 4px rgba(0,0,0,.65);pointer-events:none}
.proc-step:hover .proc-frame,.proc-step.on .proc-frame{border-color:rgba(255,255,255,.38)}
.proc-step.on .proc-frame{transform:translateY(-2px)}
.proc-step:focus-visible{outline:none}
.proc-step:focus-visible .proc-frame{outline:2px solid rgba(255,255,255,.45);outline-offset:2px}
.proc-label{display:block;margin-top:.4rem;font-size:.68rem;letter-spacing:.04em;color:var(--soft);line-height:1.2;pointer-events:none}
@media (max-width:640px){
  .proc-story-note{width:100%;margin-top:-.15rem}
}

.v-proj .frame .ph{position:absolute;inset:0}
.v-proj .frame img{transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.v-proj:hover .frame img{transform:scale(1.04)}
a.frame.yt{cursor:pointer}
.v-play{pointer-events:none;position:absolute;left:12px;bottom:12px;width:45px;height:45px;border-radius:50%;
  background:rgba(11,11,11,.5);border:1px solid rgba(255,255,255,.55);display:grid;place-items:center;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:transform .3s,background .3s;z-index:2}
.v-proj .frame.yt:hover .v-play{transform:scale(1.09);background:rgba(11,11,11,.66)}
.v-play svg{width:24px;height:24px;fill:#fff;margin-left:3px}
.v-proj .cap{margin-top:0}
.v-proj .cap h2{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:600;letter-spacing:-.02em;line-height:1.05}
.v-proj .c-patent{display:inline-block;margin-top:0;font-size:.9rem;color:#fff;border-bottom:1px solid transparent;transition:border-color .2s}
.v-proj .c-patent:hover{border-color:#fff}
.v-proj .c-role{color:var(--text);font-size:.95rem;margin-top:0}
.v-proj .c-tags{color:var(--soft);font-size:.85rem;margin-top:0}
.v-proj .c-tags.tags--mobile{display:none}
@media (max-width:640px){
  .v-proj .c-tags.tags--full{display:none}
  .v-proj .c-tags.tags--mobile{display:block}
}
.v-proj .c-goal{color:var(--soft);font-size:.82rem;line-height:1.3;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.v-proj .c-goal-label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin-right:.35rem}
.v-proj .c-foot{color:var(--soft);font-size:.82rem;margin-top:0}
.v-proj a.go{color:#fff;border-bottom:1px solid transparent;transition:border-color .2s}
.v-proj a.go:hover{border-color:#fff}

/* contact + footer */
.v-end{padding:clamp(4rem,12vh,9rem) clamp(1.2rem,4vw,4rem);border-top:1px solid var(--line);text-align:center}
.v-end h2{font-size:clamp(1.8rem,5vw,3.4rem);font-weight:700;letter-spacing:-.02em}
.v-end .v-links{margin-top:1.6rem;display:flex;gap:.9rem;justify-content:center;align-items:center;color:var(--soft);font-size:.95rem;flex-wrap:wrap}
.v-end .v-links a{color:var(--soft);transition:color .2s}
.v-end .v-links a:hover{color:var(--text)}
.v-end .v-links span{opacity:.5}
.v-foot{display:flex;justify-content:space-between;padding:2rem clamp(1.2rem,4vw,4rem);color:var(--soft);font-size:.78rem;border-top:1px solid var(--line)}
.v-foot a:hover{color:var(--text)}

@media (max-width:640px){
  br.t-br{display:none}
  .v-proj .c-goal{display:none}
  .v-proj .cap{margin-top:0}
  .v-proj .cap h2{font-size:1.3rem;line-height:1.1}
  .v-proj .c-role,.v-proj .c-patent,.v-proj a.go{font-size:1.02rem}
  .v-proj .c-tags{font-size:.95rem}
  .dl-show .dl-tags{margin-top:.9rem}
  .proc-show .proc-tags{margin-top:.9rem}
  /* wide app-screens strip: scroll it horizontally at a readable height instead of a tiny squished band */
  .dl-screens{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px}
  .dl-screens img{width:auto;height:230px;max-width:none}
  .v-end{padding:clamp(3rem,10vh,5rem) 1.2rem}
  .v-foot{flex-direction:column;gap:.5rem;text-align:center;justify-content:center}
}