:root{
  --bg:#0b0b0c; --panel:#121214; --ink:#f4f4f1; --muted:#8d8d93;
  --line:#26262b; --accent:#d8ff34; --max:1220px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
.wrap{width:min(calc(100% - 40px),var(--max));margin:auto}
header{position:sticky;top:0;z-index:10;background:rgba(11,11,12,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-weight:900;letter-spacing:.08em}
.navlinks{display:flex;gap:22px;font-size:12px;color:var(--muted);text-transform:uppercase}
.hero{min-height:78vh;display:grid;align-items:center;border-bottom:1px solid var(--line)}
.kicker{font-size:13px;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
h1{font-size:clamp(52px,10vw,132px);line-height:.88;margin:18px 0 22px;letter-spacing:-.06em}
.role{font-size:clamp(20px,3vw,40px);font-weight:700;margin:0 0 18px}
.tagline{color:var(--muted);font-size:14px;letter-spacing:.05em}
.intro{font-size:clamp(18px,2.2vw,28px);line-height:1.35;max-width:840px;margin-top:42px}
section{padding:92px 0;border-bottom:1px solid var(--line);position:relative;isolation:isolate;overflow:hidden}

.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:36px}
.eyebrow{font-size:12px;color:var(--accent);letter-spacing:.15em;text-transform:uppercase}
h2{font-size:clamp(34px,5vw,68px);letter-spacing:-.045em;margin:6px 0 0}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{background:var(--panel);border:1px solid var(--line);overflow:hidden}



#lab .card img,#lab .card .media-placeholder{aspect-ratio:16/10}
.card .media-placeholder,.card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:grid;place-items:center;background:linear-gradient(135deg,#17171b,#0f0f11);color:#505057;font-size:12px;letter-spacing:.18em}
.card-body{padding:26px}
.card h3{font-size:26px;margin:0 0 8px}
.card .sub{font-size:15px;color:var(--muted);margin-bottom:16px}
.tags{font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin-bottom:18px}
.card p{color:#c4c4c7;line-height:1.6}
.card .cta{display:inline-block;margin-top:14px;font-size:12px;font-weight:800}
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px}
.bigcopy{font-size:clamp(22px,3vw,38px);line-height:1.3}
.copy{color:#c7c7ca;line-height:1.75}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pill{border:1px solid var(--line);padding:9px 12px;border-radius:999px;font-size:12px;color:#d0d0d3}
.links{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.links a{border:1px solid var(--line);padding:12px 14px;font-size:12px}
footer{padding:28px 0;color:var(--muted);font-size:12px}
.video{aspect-ratio:16/9;background:#000}.video iframe{width:100%;height:100%;border:0}
@media(max-width:980px){}
@media(max-width:760px){
 
 .navlinks{display:none}.wrap{width:min(calc(100% - 24px),var(--max))}
 .split{grid-template-columns:1fr}.hero{min-height:72vh}
 section{padding:64px 0}
}







#projects .card{display:flex;flex-direction:column;height:100%}
#projects .card-body{flex:1}




/* v0.23 — explicit header identity */
.brandwrap{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
  white-space:nowrap;
}
.brand{
  display:inline-block;
}
.sitever{
  display:inline-block;
  color:#fff !important;
  font-size:12px;
  font-weight:700;
  line-height:1;
  letter-spacing:.04em;
  opacity:1 !important;
  visibility:visible !important;
}

/* v0.23 — real background layer */
.section-content{
  position:relative;
  z-index:2;
}
.section-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.section-bg img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.section-bg-overlay{
  position:absolute;
  inset:0;
  display:block;
  background:#0b0b0c;
}

/* v0.23 — full-width project row */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(var(--project-count,3),minmax(0,1fr));
  gap:20px;
  width:100%;
  align-items:stretch;
}
.projects-grid .card{
  width:100%;
  min-width:0;
  height:100%;
  display:flex;
  flex-direction:column;
  container-type:inline-size;
}
.projects-grid .card img,
.projects-grid .card .media-placeholder{
  width:100%;
  aspect-ratio:1/1;
  height:auto;
  object-fit:cover;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.projects-grid .card-body{
  flex:1;
  padding:clamp(18px,6cqw,30px);
}
.projects-grid .card h3{
  font-size:clamp(20px,8cqw,32px);
  line-height:1.02;
  overflow-wrap:anywhere;
}
.projects-grid .card .sub{
  font-size:clamp(13px,4.4cqw,17px);
  line-height:1.35;
}
.projects-grid .tags{
  font-size:clamp(10px,3.3cqw,12px);
  line-height:1.35;
  overflow-wrap:anywhere;
}
.projects-grid .card p{
  font-size:clamp(14px,4.3cqw,17px);
  line-height:1.5;
}

/* Other card sections also use all available width */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(var(--card-count,1),minmax(0,1fr));
  gap:20px;
  width:100%;
}
.cards-grid .card{
  width:100%;
  min-width:0;
}

@media(max-width:980px){
  .projects-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .cards-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:760px){
  .projects-grid,
  .cards-grid{
    grid-template-columns:1fr;
  }
}

/* v0.23 language + temporary CV */
.navright{display:flex;align-items:center;gap:18px;margin-left:auto}
.langswitch{display:flex;align-items:center;gap:3px}
.langswitch button{background:none;border:0;color:var(--muted);font-size:10px;font-weight:700;cursor:pointer;padding:5px}
.langswitch button.active{color:#fff}
.cvtemp{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#111;padding:7px 10px;border-radius:3px;font-size:10px;font-weight:900;letter-spacing:.08em}
@media(max-width:760px){.navright{gap:8px}.langswitch button{font-size:9px;padding:4px}.cvtemp{padding:6px 8px}}

.vv-media-frame{width:100%;overflow:hidden;position:relative}
.card>.vv-media-frame{aspect-ratio:16/10}
#projects .card>.vv-media-frame{aspect-ratio:1/1}
#lab .card>.vv-media-frame{aspect-ratio:16/10}
.vv-media-frame>img,.vv-media-frame>.media-placeholder{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:grid;place-items:center}
.vv-media-frame>img{will-change:transform}
[data-decode-bound="1"]{transition:opacity .15s ease}

/* v0.23 — every item section uses full-width rows of up to 4 items */
.projects-grid,
.cards-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:20px;
  width:100%;
  align-items:stretch;
}

/* The last row expands to fill the complete available width */
.projects-grid > :last-child:nth-child(4n + 1),
.cards-grid > :last-child:nth-child(4n + 1){
  grid-column:1 / -1;
}
.projects-grid > :nth-last-child(2):nth-child(4n + 1),
.cards-grid > :nth-last-child(2):nth-child(4n + 1){
  grid-column:span 2;
}
.projects-grid > :last-child:nth-child(4n + 2),
.cards-grid > :last-child:nth-child(4n + 2){
  grid-column:span 2;
}
.projects-grid > :nth-last-child(3):nth-child(4n + 1),
.cards-grid > :nth-last-child(3):nth-child(4n + 1){
  grid-column:span 1;
}
.projects-grid > :nth-last-child(2):nth-child(4n + 2),
.cards-grid > :nth-last-child(2):nth-child(4n + 2){
  grid-column:span 1;
}
.projects-grid > :last-child:nth-child(4n + 3),
.cards-grid > :last-child:nth-child(4n + 3){
  grid-column:span 2;
}

/* Better exact thirds for rows ending in 3 items */
@supports (grid-template-columns: subgrid){
  .projects-grid,
  .cards-grid{grid-template-columns:repeat(12,minmax(0,1fr)) !important}
  .projects-grid > *,
  .cards-grid > *{grid-column:span 3}
  .projects-grid > :last-child:nth-child(4n + 1),
  .cards-grid > :last-child:nth-child(4n + 1){grid-column:span 12}
  .projects-grid > :nth-last-child(2):nth-child(4n + 1),
  .cards-grid > :nth-last-child(2):nth-child(4n + 1),
  .projects-grid > :last-child:nth-child(4n + 2),
  .cards-grid > :last-child:nth-child(4n + 2){grid-column:span 6}
  .projects-grid > :nth-last-child(3):nth-child(4n + 1),
  .cards-grid > :nth-last-child(3):nth-child(4n + 1),
  .projects-grid > :nth-last-child(2):nth-child(4n + 2),
  .cards-grid > :nth-last-child(2):nth-child(4n + 2),
  .projects-grid > :last-child:nth-child(4n + 3),
  .cards-grid > :last-child:nth-child(4n + 3){grid-column:span 4}
}

@media(max-width:980px){
  .projects-grid,
  .cards-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .projects-grid > *,
  .cards-grid > *{grid-column:auto !important}
  .projects-grid > :last-child:nth-child(odd),
  .cards-grid > :last-child:nth-child(odd){
    grid-column:1 / -1 !important;
  }
}

@media(max-width:760px){
  .projects-grid,
  .cards-grid{
    grid-template-columns:1fr !important;
  }
  .projects-grid > *,
  .cards-grid > *{
    grid-column:auto !important;
  }
}

/* v0.24: centered footer */
footer{text-align:center}
footer>.wrap{text-align:center}

/* v1.2 — official visual identity and language grouping */
.hero .section-content{display:flex;flex-direction:column;align-items:flex-start}
.hero-identity{display:flex;align-items:center;justify-content:flex-start;width:100%;max-width:1050px;margin:12px 0 22px}
.hero-logo{display:block;width:min(100%,1050px);height:auto;object-fit:contain}
.langswitch{border:1px solid #40434a;border-radius:8px;padding:5px 7px;gap:5px;background:rgba(22,24,28,.85);flex-shrink:0}
.langswitch button{padding:7px 8px;border-radius:4px;transition:background .2s,color .2s}
.langswitch button.active{background:#343940;color:#fff}
/* All translations use the same CTA component; the animated streak loops inside the frame. */
.card .cta{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:43px;max-width:100%;padding:12px 20px;border:1px solid rgba(78,233,248,.65);border-radius:6px;background:linear-gradient(110deg,#11191d,#18353a);color:#efffff;box-shadow:0 0 13px rgba(12,217,236,.13),inset 0 0 12px rgba(10,218,230,.08);letter-spacing:.055em;text-align:center;transition:box-shadow .2s,transform .2s}
.card .cta::before{content:"";position:absolute;inset:-130% auto -130% -65%;width:35%;transform:rotate(23deg);pointer-events:none;z-index:-1;background:linear-gradient(90deg,transparent,rgba(107,245,255,.10),rgba(225,255,255,.76),rgba(107,245,255,.15),transparent);filter:blur(5px);animation:vvLightSweep 3.2s ease-in-out infinite}
.card .cta:hover{transform:translateY(-2px);box-shadow:0 0 23px rgba(12,217,236,.3),inset 0 0 14px rgba(10,218,230,.16)}
@keyframes vvLightSweep{0%,13%{left:-65%}65%,100%{left:130%}}
/* Justify prose only: headings, single-line labels, navigation, controls stay readable. */
.intro,.bigcopy,.copy,.card p,#about p,#contact p{ text-align:justify;text-justify:inter-word;hyphens:auto;overflow-wrap:break-word}
@media(max-width:760px){.hero-identity{margin:10px 0 18px}.navright{gap:7px}.langswitch{padding:3px;gap:1px}.langswitch button{padding:6px 4px}}
@media(prefers-reduced-motion:reduce){.card .cta::before{animation:none;display:none}.card .cta{transition:none}}

/* v1.2: unmistakable selected locale, no animation */
.langswitch button.active,.langswitch button[aria-pressed="true"]{background:#d8ff34!important;color:#101318!important;border-radius:5px;font-weight:900;box-shadow:0 0 0 1px rgba(216,255,52,.35)}
.langswitch button:focus-visible{outline:2px solid #d8ff34;outline-offset:3px}

/* v1.6: eight independent collapsible project icons; never alter project data. */
#projects .projects-grid{align-items:start !important;}
#projects .vv-project-card{display:block !important;height:auto !important;min-height:0 !important;align-self:start !important;overflow:hidden;}
#projects .vv-project-toggle{display:block;width:100%;padding:0;margin:0;border:0;background:none;color:inherit;cursor:pointer;position:relative;text-align:inherit;line-height:0;}
#projects .vv-project-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;z-index:1;}
#projects .vv-project-toggle img,#projects .vv-project-toggle .media-placeholder{aspect-ratio:1 / 1;display:block;width:100%;object-fit:cover;}
#projects .vv-project-toggle::after{content:'+';position:absolute;right:10px;bottom:10px;border:1px solid #777;border-radius:50%;width:26px;height:26px;display:grid;place-items:center;color:var(--accent);background:rgba(0,0,0,.77);font:700 20px/1 Arial;pointer-events:none;}
#projects .vv-project-card.is-open .vv-project-toggle::after{content:'−';}
#projects .vv-project-reveal{display:grid;grid-template-rows:0fr;visibility:hidden;opacity:0;transition:grid-template-rows .42s cubic-bezier(.2,.75,.25,1),opacity .32s ease,visibility .42s;}
#projects .vv-project-card.is-open .vv-project-reveal{grid-template-rows:1fr;opacity:1;visibility:visible;}
#projects .vv-project-inner{min-height:0;overflow:hidden;}
#projects .vv-project-card .card-body{display:block;}
.section-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;display:block;}
@media(prefers-reduced-motion:reduce){#projects .vv-project-reveal{transition:none;}.section-bg video{display:none;}}
#projects .vv-project-toggle .vv-media-frame{aspect-ratio:1 / 1;line-height:normal;}

/* v1.7: video-only sections; no titles or captions */
.vv-showreel-section{display:flex;justify-content:center;align-items:center;padding:clamp(22px,5vw,75px) 20px;min-height:auto!important;background:#080b0d}
.vv-showreel-box{width:min(100%,1120px);margin:auto;overflow:hidden;border-radius:12px;background:#000;line-height:0}
.vv-showreel-box video{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;display:block;background:#000}

/* v1.8 — Embedded YouTube showreels */
.vv-showreel-box iframe,.vv-showreel-box .vv-youtube-poster{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;background-color:#000}
.vv-showreel-box .vv-youtube-poster{cursor:pointer;background-size:cover;background-position:center;position:relative;padding:0}
.vv-youtube-play{display:grid;place-items:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70px;height:49px;background:#e62117;color:white;border-radius:14px;font-size:25px;line-height:1;box-shadow:0 5px 18px #0008}
.vv-youtube-poster:hover .vv-youtube-play,.vv-youtube-poster:focus-visible .vv-youtube-play{background:#ff3329}


/* v1.9 — MOBILE ONLY: two compact collapsible project icons per row.
   Override historic 1-column rules while leaving desktop and other grids untouched. */
@media (max-width:760px){
  #projects .projects-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    column-gap:12px;
    row-gap:12px;
    align-items:start !important;
  }
  #projects .projects-grid > *,
  #projects .projects-grid > :last-child:nth-child(odd){
    grid-column:auto !important;
    min-width:0;
  }
  #projects .vv-project-card{width:100%;max-width:100%;}
  #projects .vv-project-card .card-body{padding:13px 11px;}
  #projects .vv-project-card .card-body h3{font-size:clamp(15px,4vw,21px);overflow-wrap:anywhere;}
  #projects .vv-project-card .card-body p{font-size:12px;}
  #projects .vv-project-card .cta{padding:9px 7px;font-size:10px;min-height:38px;}
  /* Contact CTAs: clear, evenly sized, two across, full combined width. */
  #contact .links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;}
  #contact .links a.vv-contact-main{
    display:flex;align-items:center;justify-content:center;
    width:100%;min-width:0;min-height:48px;padding:12px 8px;
    text-align:center;text-decoration:none;font-size:13px;font-weight:800;
    border:1px solid var(--accent);border-radius:7px;
    background:var(--accent);color:#111418;
    letter-spacing:.05em;
  }
  #contact .links a:not(.vv-contact-main){grid-column:1 / -1;text-align:center;}
  #contact .links a.vv-contact-main:focus-visible{outline:2px solid white;outline-offset:3px;}
}


/* v1.13 — integrated animation set */
@keyframes vvGlitchLoop{
  0%,82%,100%{transform:translate3d(0,0,0);filter:none;opacity:1}
  83%{transform:translate3d(1px,-1px,0) skewX(.4deg);filter:hue-rotate(8deg) saturate(1.08)}
  84%{transform:translate3d(-2px,1px,0) skewX(-.7deg);filter:hue-rotate(-10deg) contrast(1.04)}
  85%{transform:translate3d(2px,0,0) skewX(.8deg);filter:brightness(1.12)}
  86%{transform:translate3d(-1px,0,0) skewX(-.35deg);filter:none}
}
@keyframes vvChromaLoop{
  0%,100%{text-shadow:0 0 0 rgba(0,255,255,0),0 0 0 rgba(255,0,110,0)}
  25%{text-shadow:.02em 0 0 rgba(0,240,255,.20),-.02em 0 0 rgba(255,0,110,.18)}
  50%{text-shadow:-.03em 0 0 rgba(0,240,255,.26),.03em 0 0 rgba(255,0,110,.22)}
  75%{text-shadow:.01em 0 0 rgba(0,240,255,.14),-.01em 0 0 rgba(255,0,110,.14)}
}
@keyframes vvSliceLoop{
  0%,86%,100%{transform:translate3d(0,0,0);clip-path:inset(0 0 0 0)}
  88%{transform:translate3d(1px,0,0);clip-path:inset(0 0 36% 0)}
  90%{transform:translate3d(-1px,0,0);clip-path:inset(24% 0 0 0)}
  92%{transform:translate3d(0,1px,0);clip-path:inset(0 0 0 0)}
}
.hero-logo,.brand{display:inline-block;animation:vvGlitchLoop 2s infinite steps(1,end);transform-origin:center}
.kicker,.eyebrow,h2,h3,.tagline{animation:vvChromaLoop 2.5s infinite linear}
@media (prefers-reduced-motion:reduce){.hero-logo,.brand,.kicker,.eyebrow,h2,h3,.tagline,#projects .vv-project-toggle .vv-media-frame,.pill,.links a,.vv-youtube-play{animation:none!important}}