/* ═══════════════════════════════════════════════════════════
   gilliam.poto — portfolio site
   built from visual-guide v.03
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

/* ---------- Helvetica Neue (project fonts) ---------- */
@font-face{font-family:'Helvetica Neue';src:url('fonts/HelveticaNeueUltraLight.otf') format('opentype');font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:'Helvetica Neue';src:url('fonts/HelveticaNeueThin.otf') format('opentype');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Helvetica Neue';src:url('fonts/HelveticaNeueLight.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Helvetica Neue';src:url('fonts/HelveticaNeueLightItalic.otf') format('opentype');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Helvetica Neue';src:url('fonts/HelveticaNeueRoman.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Helvetica Neue';src:url('fonts/HelveticaNeueItalic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Helvetica Neue';src:url('fonts/HelveticaNeueMedium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --white:#FFFFFF;
  --off:#F4F4F2;
  --teal:#72C4B4;
  --lime:#c2fe0c;
  --ink:#141414;
  --mid:#888888;
  --faint:#DEDEDD;
  --hv:'Helvetica Neue',Helvetica,Arial,sans-serif; /* @kind font */
  --mono:'Space Mono',monospace; /* @kind font */
  --pop:cubic-bezier(0.34,1.56,0.64,1); /* @kind other */
  --snap:cubic-bezier(0.22,1,0.36,1); /* @kind other */
  --ease:cubic-bezier(0.4,0,0.1,1); /* @kind other */
  /* tweakable size vars */
  --hero-font-size:52px;
  --shead-font-size:36px;
  --contact-font-size:44px;
  --hero-weight:100;
}

html{background:var(--white);color:var(--ink);scroll-behavior:smooth}
body{font-family:var(--hv);font-weight:300;font-size:13px;line-height:1.6;overflow-x:hidden}
@media (pointer:fine){body{cursor:none} a,button{cursor:none}}
::selection{background:var(--teal);color:var(--white)}
img{display:block;max-width:100%}

/* ═══ GAME CURSOR (green "<" reticle) ═══ */
#cur{position:fixed;z-index:9999;pointer-events:none;top:0;left:0;font-family:var(--mono);font-weight:700;font-size:17px;line-height:1;color:var(--lime);transform:translate(-50%,-50%);transition:font-size .18s var(--pop),color .15s,filter .15s}
#cur::before{content:"<"}
/* light mode → brighter, glowing green */
body:not(.cur-dark):not(.night) #cur{filter:drop-shadow(0 0 4px rgba(196,212,0,.7)) brightness(1.22)}
#cur-ring{position:fixed;z-index:9998;pointer-events:none;top:0;left:0;width:32px;height:32px;border-radius:50%;border:1px solid rgba(20,20,20,.25);transform:translate(-50%,-50%);transition:width .25s var(--pop),height .25s var(--pop),border-color .2s,opacity .2s}
body.cur-hover #cur{font-size:22px}
body.cur-hover #cur-ring{width:48px;height:48px;border-color:var(--lime)}
body.cur-dark #cur-ring,body.night #cur-ring{border-color:rgba(255,255,255,.3)}
@media (pointer:coarse){#cur,#cur-ring{display:none}}

/* night mode toggle button */
.night-toggle{background:none;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.5);border-radius:2px;cursor:pointer;padding:4px 9px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;line-height:1;transition:border-color .2s,color .2s;display:inline-flex;align-items:center;gap:5px}
.night-toggle:hover{border-color:rgba(255,255,255,.55);color:#fff}
.night-toggle .nt-icon{font-size:11px;line-height:1}

/* ── NIGHT MODE ── */
body.night{background:#1B1B1B!important}
body.night section,body.night footer,body.night #about{background:#1B1B1B!important}
body.night nav{background:rgba(27,27,27,.92)!important}
body.night .sec{border-top-color:rgba(255,255,255,.07)!important}
body.night .shead,body.night .flabel,body.night .sdesc,body.night .work-title,body.night .la-title,body.night .la-meta,body.night .la-sub,body.night .f-l,body.night .f-r,body.night .contact-sub,body.night .contact-big a,body.night .contact-links a{color:rgba(255,255,255,.72)!important}
body.night .gitem{border-bottom-color:rgba(255,255,255,.07)!important;color:rgba(255,255,255,.72)!important}
body.night .gitem:hover{background:rgba(255,255,255,.04)!important}
body.night .night-toggle{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.75)}
body.night .bizcard-scene .bcard{background:linear-gradient(150deg,#262626 0%,#1e1e1e 60%,#181818 100%)!important;color:rgba(255,255,255,.85)}
body.night .bcard-name,body.night .bcard-back-name{color:rgba(255,255,255,.9)!important;text-shadow:none!important}
body.night .bcard-role,body.night .bcard-back-role,body.night .bcard-disc,body.night .bcard-edge,body.night .bcard-back-mark{color:rgba(255,255,255,.4)!important}
body.night .bcard-v,body.night .bcard-v a{color:rgba(255,255,255,.68)!important}
body.night .bcard-front-foot,body.night .bcard-back-foot{border-top-color:rgba(255,255,255,.12)!important}
body.night .bcard-flip-hint{color:rgba(255,255,255,.3)!important}
body.night .bcard-bio{color:rgba(255,255,255,.42)!important}

/* ═══ AMBIENT CANVAS ═══ */
#ambient{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:.5}

/* ═══ LOADER (decode) ═══ */
#loader{position:fixed;inset:0;z-index:1000;background:#070707;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity .5s ease}
#loader.gl-out{opacity:0}
.gl-wrap{position:relative;width:min(16vmin,115px);aspect-ratio:1}
#gl-canvas{display:block;width:100%;height:100%}
.gl-meta{position:absolute;left:0;right:0;display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.34)}
.gl-meta-t{top:-24px}
.gl-meta-b{bottom:-24px}

/* full-frame branch canvas (organic growth) */
#gl-branches{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* ── enter gate ── */
#gl-gate{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gl-gate-mode .gl-wrap{opacity:0;transform:scale(.92);pointer-events:none}
#loader:not(.gl-gate-mode) #gl-gate{opacity:0;pointer-events:none;transition:opacity .35s ease}
.ggt-frame{position:absolute;width:min(176px,52vw);height:78px;pointer-events:none}
.ggt-c{position:absolute;width:9px;height:9px;border:1px solid rgba(255,255,255,.55);opacity:0;animation:ggt-pop .5s cubic-bezier(.16,1,.3,1) forwards}
.ggt-c.tl{top:0;left:0;border-right:0;border-bottom:0;animation-delay:.05s}
.ggt-c.tr{top:0;right:0;border-left:0;border-bottom:0;animation-delay:.12s}
.ggt-c.bl{bottom:0;left:0;border-right:0;border-top:0;animation-delay:.19s}
.ggt-c.br{bottom:0;right:0;border-left:0;border-top:0;animation-delay:.26s}
@keyframes ggt-pop{from{opacity:0;transform:scale(1.4)}to{opacity:1;transform:scale(1)}}
.ggt-stack{display:flex;flex-direction:column;align-items:center;gap:14px;z-index:1}
.ggt-opt{font-family:var(--hv);font-weight:300;font-size:15px;letter-spacing:.08em;text-transform:lowercase;color:rgba(255,255,255,.92);background:none;border:0;padding:4px 10px;transition:color .25s,letter-spacing .25s;animation:ggt-fade .6s ease .35s both}
button.ggt-opt{cursor:pointer}
.ggt-opt:hover{color:#fff;letter-spacing:.16em}
.ggt-sub{font-size:11px;color:rgba(255,255,255,.32);letter-spacing:.16em;animation-delay:.45s}
@keyframes ggt-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ggt-meta{position:absolute;bottom:34px;left:34px;right:34px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.3);animation:ggt-fade .6s ease .5s both}

/* ── signal-loss glitch overlay (canvas-driven datamosh) ── */
#gl-glitch-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:6;display:none;pointer-events:none}
#gl-glitch-canvas.on{display:block}
@media (prefers-reduced-motion: reduce){
  #loader.gl-glitch{animation:none}
  .ggt-c,.ggt-opt,.ggt-meta{animation:none;opacity:1}
}
#gl-count{color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums}
#gl-status{color:rgba(255,255,255,.6)}

/* iOS renders a tap-to-play badge over any inline video it won't autoplay.
   These reels are decorative backdrops, so the badge is never wanted. */
video[data-reel]::-webkit-media-controls,
video[data-reel]::-webkit-media-controls-panel,
video[data-reel]::-webkit-media-controls-panel-container,
video[data-reel]::-webkit-media-controls-overlay-play-button,
video[data-reel]::-webkit-media-controls-start-playback-button{
  display:none!important;-webkit-appearance:none;opacity:0;pointer-events:none
}
video[data-reel]{background:#0d100e}

/* ═══ NAV ═══ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;justify-content:space-between;align-items:center;
  padding:13px 28px;
  /* no background, no blend mode — just floats over content */
}
nav .brand{
  font-family:var(--hv);font-weight:100;font-size:12px;letter-spacing:-.01em;
  color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.35);
  transition:color .3s,text-shadow .3s;
}
nav .brand b{font-weight:100}
.nav-r{display:flex;align-items:center;gap:18px}
.nav-r a{
  font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:lowercase;
  color:rgba(255,255,255,.6);text-decoration:none;
  transition:color .25s;
  text-shadow:0 1px 6px rgba(0,0,0,.3);
}
.nav-r a:hover{color:rgba(255,255,255,.95)}
.nav-avail{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:8px;letter-spacing:.16em;color:rgba(255,255,255,.42);transition:color .3s}
.nav-dot{width:5px;height:5px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(114,196,180,.6);animation:pulse 2.2s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(114,196,180,.5)}70%{box-shadow:0 0 0 7px rgba(114,196,180,0)}100%{box-shadow:0 0 0 0 rgba(114,196,180,0)}}
/* past the hero everything is light → flip nav text to ink (clean, no bar) */
body.past-hero:not(.night) nav .brand{color:var(--ink);text-shadow:none}
body.past-hero:not(.night) .nav-r a{color:rgba(20,20,20,.55);text-shadow:none}
body.past-hero:not(.night) .nav-r a:hover{color:var(--ink)}
body.past-hero:not(.night) .nav-avail{color:rgba(20,20,20,.4)}
/* night mode: keep light text, yellow brand */
body.night nav .brand{color:var(--lime)!important;text-shadow:none}
body.night .nav-r a{color:rgba(255,255,255,.5)!important;text-shadow:none}
body.night .nav-r a:hover{color:#fff!important}

/* ═══ PERSISTENT TIMECODE ═══ */
#timecode{position:fixed;bottom:18px;right:24px;z-index:200;font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.18em;color:var(--mid);font-variant-numeric:tabular-nums;mix-blend-mode:difference;pointer-events:none}
#timecode .tc-l{color:var(--teal)}

/* ═══ floating registration crosses ═══ */
.cross{position:absolute;width:10px;height:10px;pointer-events:none}
.cross::before,.cross::after{content:'';position:absolute;background:currentColor}
.cross::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%)}
.cross::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-50%)}

/* ═══ HERO ═══ */
#hero{position:relative;height:100vh;height:100dvh;min-height:640px;overflow:hidden;background:#0d100e;display:flex;flex-direction:column;justify-content:space-between;padding:0}
/* full-bleed background reel — cover-fit + 1.2× crop */
.hero-video{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:#0d100e url('https://i.ytimg.com/vi/r7eKNuKJznk/maxresdefault.jpg') center/cover no-repeat}
/* the iframe only becomes visible once it is genuinely playing */
#yt-player{opacity:0;transition:opacity .6s ease}
.hero-video.yt-live #yt-player{opacity:1}
#yt-player{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(1.2);
  width:100vw;height:56.25vw;   /* 16:9 from width */
  min-width:177.78vh;min-height:100vh; /* 16:9 from height */
  border:0;
  display:block;
}
.hero-tint{display:none}
#hero .grain{position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,transparent 1px,transparent 2px)}
.hero-top{display:flex;justify-content:flex-end;padding:96px 44px 0;position:relative;z-index:3}
.hero-meta{text-align:right;font-weight:300;font-size:9px;letter-spacing:.16em;line-height:2;color:rgba(255,255,255,.45);text-transform:lowercase}
.hero-meta b{color:rgba(255,255,255,.7);font-weight:400}
.hero-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:2}
.hero-wm{font-weight:var(--hero-weight,100);font-size:clamp(22px,4vw,var(--hero-font-size));letter-spacing:-.04em;line-height:.9;color:rgba(255,255,255,.96);text-align:center;text-transform:lowercase}
.hero-wm em{font-style:normal;color:var(--teal)}
.hero-sub{margin-top:22px;font-weight:300;font-size:clamp(10px,1.1vw,13px);letter-spacing:.42em;text-transform:lowercase;color:rgba(255,255,255,.55);text-align:center}
.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;padding:0 44px 40px;position:relative;z-index:3}
.hero-disciplines{font-weight:300;font-size:10px;letter-spacing:.18em;line-height:2.2;color:rgba(255,255,255,.5);text-transform:lowercase}
.hero-disciplines .on{color:var(--lime)}
.hero-scroll{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:rgba(255,255,255,.5);text-transform:uppercase}
.hero-scroll .bar{width:30px;height:1px;background:rgba(255,255,255,.4);position:relative;overflow:hidden}
.hero-scroll .bar::after{content:'';position:absolute;inset:0;background:var(--lime);transform:translateX(-100%);animation:scrollbar 2.4s var(--ease) infinite}
@keyframes scrollbar{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* glitch-in for hero reveal */
.glitch-in{animation:hero-glitch .34s steps(1) 1}
@keyframes hero-glitch{0%{clip-path:inset(0 0 80% 0);transform:translateX(-6px);filter:hue-rotate(60deg)}25%{clip-path:inset(60% 0 10% 0);transform:translateX(5px)}50%{clip-path:inset(20% 0 50% 0);transform:translateX(-3px);filter:saturate(2)}75%{clip-path:inset(70% 0 0 0);transform:translateX(2px)}100%{clip-path:inset(0 0 0 0);transform:none;filter:none}}

/* ═══ SECTION SCAFFOLD ═══ */
section{position:relative}
.sec{padding:120px 44px;position:relative;z-index:1;background:var(--white)}
.flabel{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.2em;color:var(--mid);text-transform:lowercase;margin-bottom:18px;display:flex;align-items:center;gap:12px}
.flabel::before{content:'';width:26px;height:1px;background:var(--faint)}
.shead{font-weight:100;font-size:clamp(16px,2.5vw,var(--shead-font-size));letter-spacing:-.04em;line-height:.9;color:var(--ink);text-transform:lowercase;margin-bottom:8px}
.shead em{font-style:normal;color:var(--teal)}
.sdesc{font-weight:300;font-size:12px;letter-spacing:.04em;color:var(--mid);line-height:2;max-width:460px}
.idx-link{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--lime);padding-bottom:1px;transition:color .2s,border-color .2s}
.idx-link:hover{color:var(--lime)}
body.night .idx-link{color:rgba(255,255,255,.85)!important;border-bottom-color:var(--lime)}
body.night .idx-link:hover{color:var(--lime)!important}

/* scroll reveal — hidden state applies ONLY when the motion module is live
   (html.js-motion). If anime.js fails to load, content stays visible. */
.rv{opacity:1;transform:none}
html.js-motion .rv{opacity:0;transform:translateY(26px);will-change:opacity,transform}
html.js-motion .rv.shown{opacity:1;transform:none}
html.js-motion .bc-tilt{opacity:0}
html.js-motion .bc-tilt.shown{opacity:1}
@media (prefers-reduced-motion: reduce){
  html.js-motion .rv,html.js-motion .bc-tilt{opacity:1!important;transform:none!important}
}

/* ═══ CLIENTS MARQUEE ═══ */
#clients{padding:90px 0;background:var(--white);border-top:1px solid var(--faint);overflow:hidden}
.clients-lab{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.2em;color:var(--mid);text-transform:lowercase;margin:0 44px 40px;display:flex;align-items:center;gap:12px}
.clients-lab::before{content:'';width:26px;height:1px;background:var(--faint)}
.clients-lab .cl-count{color:var(--teal)}
.clients-track{position:relative;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee{display:flex;width:max-content;animation:cl-marquee 46s linear infinite}
#clients:hover .marquee{animation-play-state:paused}
.mq-set{display:flex;align-items:center;flex-shrink:0}
.mq-item{font-family:var(--hv);font-weight:300;font-size:clamp(22px,2.6vw,38px);letter-spacing:-.02em;color:var(--ink);text-transform:none;white-space:nowrap;padding:0 30px;opacity:.4;transition:opacity .3s,color .3s}
.mq-item:hover{opacity:1;color:var(--teal)}
.mq-tick{font-family:var(--mono);font-size:12px;color:var(--faint);flex-shrink:0;transform:translateY(-2px)}
@keyframes cl-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.marquee{animation:none}}
body.night #clients{background:#1B1B1B!important}
body.night #clients{border-top-color:rgba(255,255,255,.07)!important}
body.night .mq-item{color:rgba(255,255,255,.78)!important}
body.night .mq-tick{color:rgba(255,255,255,.14)!important}

/* ═══ DISC NAVIGATION ═══ */
#disc{background:var(--ink);color:#fff;padding:130px 44px 150px;overflow:hidden}
#disc .flabel{color:rgba(255,255,255,.4)}
#disc .flabel::before{background:rgba(255,255,255,.18)}
#disc .shead{color:#fff}
.disc-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;margin-top:70px}
@media (max-width:880px){.disc-wrap{grid-template-columns:1fr;gap:40px}}
.disc-stage{position:relative;aspect-ratio:1;max-width:560px;width:100%;margin:0 auto}
.disc-stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring-rot{animation:spin 60s linear infinite;transform-origin:center}
.ring-rot-r{animation:spin 90s linear infinite reverse;transform-origin:center}
.disc-node{cursor:pointer}
.disc-node circle.hit{fill:transparent}
.disc-node .nd-dot{fill:rgba(255,255,255,.35);transition:fill .25s var(--pop),r .25s var(--pop)}
.disc-node text{fill:rgba(255,255,255,.4);font-family:var(--hv);font-weight:300;font-size:9px;letter-spacing:.12em;text-transform:lowercase;transition:fill .25s}
.disc-node:hover .nd-dot,.disc-node.active .nd-dot{fill:var(--teal);r:5}
.disc-node:hover text,.disc-node.active text{fill:#fff}
.disc-node.lime:hover .nd-dot,.disc-node.lime.active .nd-dot{fill:var(--lime)}
.disc-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:46%;pointer-events:none}
.dc-idx{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--teal);margin-bottom:8px}
.dc-name{font-weight:100;font-size:clamp(14px,2vw,24px);letter-spacing:-.02em;line-height:.92;color:#fff;text-transform:lowercase;transition:opacity .2s}
.dc-count{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:rgba(255,255,255,.4);margin-top:10px}
.disc-info{display:flex;flex-direction:column;gap:0}
.disc-row{display:flex;align-items:center;gap:18px;padding:16px 4px;border-bottom:1px solid rgba(255,255,255,.08);cursor:pointer;transition:transform .22s var(--pop),padding .22s var(--pop)}
.disc-row:hover,.disc-row.active{transform:translateX(8px)}
.disc-row .dr-num{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:rgba(255,255,255,.3);width:24px;flex:none}
.disc-row .dr-name{flex:1;font-weight:300;font-size:17px;letter-spacing:.01em;color:rgba(255,255,255,.85);text-transform:lowercase;transition:color .2s}
.disc-row:hover .dr-name,.disc-row.active .dr-name{color:#fff}
.disc-row .dr-c{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:rgba(255,255,255,.3)}
.disc-row .dr-arrow{opacity:0;color:var(--teal);transform:translateX(-6px);transition:opacity .2s,transform .22s var(--pop)}
.disc-row:hover .dr-arrow,.disc-row.active .dr-arrow{opacity:1;transform:none}
.disc-row.lime:hover .dr-arrow,.disc-row.lime.active .dr-arrow{color:var(--lime)}

/* ═══ WORK (featured layouts) ═══ */
#work{padding-top:56px;padding-bottom:60px}
.work-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:54px}
.lyt{position:relative;overflow:hidden;margin-bottom:2px;transition:transform .35s var(--pop)}
.lyt:hover{transform:scale(1.006)}
.lyt-cue{position:absolute;top:0;left:0;right:0;height:1px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--snap);z-index:5}
.lyt:hover .lyt-cue{transform:scaleX(1)}
.lyt-rec{position:absolute;top:16px;right:18px;z-index:5;font-family:var(--mono);font-size:8px;letter-spacing:.2em;color:var(--lime);opacity:0;transition:opacity .25s;display:flex;align-items:center;gap:5px}
.lyt-rec::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--lime)}
.lyt:hover .lyt-rec{opacity:1}

/* layout A — full bleed gradient hero */
.lyt-a{aspect-ratio:21/9;background:linear-gradient(160deg,#16160E 0%,#2a3830 24%,#4a6858 44%,#7ab0a0 62%,#b8ccc0 80%,#f4f4f2 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:44px 48px}
.la-meta{font-weight:300;font-size:9px;letter-spacing:.2em;color:rgba(255,255,255,.4);margin-bottom:10px;text-transform:lowercase}
.la-title{font-weight:100;font-size:clamp(18px,3vw,44px);letter-spacing:-.03em;line-height:.9;color:rgba(255,255,255,.95);text-transform:lowercase}
.la-sub{margin-top:16px;font-weight:300;font-size:10px;letter-spacing:.16em;color:rgba(255,255,255,.42);display:flex;gap:26px;flex-wrap:wrap;text-transform:lowercase}
.la-sub .on{color:var(--teal)}

/* layout A — video bg + stills strip extras */
.la-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block;background:#1d2a24 center/cover no-repeat}
.la-tint{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(10,10,8,.82) 0%,rgba(10,10,8,.28) 55%,rgba(10,10,8,.12) 100%)}
.la-stills{position:absolute;top:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;width:clamp(90px,10vw,140px);gap:1px;pointer-events:none}
.la-still{flex:1;background-size:cover;background-position:center;opacity:.55;transition:opacity .3s}
.lyt-a:hover .la-still{opacity:.78}
.lyt-a .la-meta,.lyt-a .la-title,.lyt-a .la-sub,.lyt-a .cross{position:relative;z-index:3}

/* layout B — split, photo grid w/ lime blocks */
.lyt-b{aspect-ratio:2/1;background:var(--off);display:grid;grid-template-columns:1.1fr .9fr}
@media (max-width:680px){.lyt-b{grid-template-columns:1fr;aspect-ratio:auto}.lyt-b-img{aspect-ratio:16/9}}
.lyt-b-img{position:relative;background:linear-gradient(135deg,#b8bdb4,#c8c8c4);overflow:hidden}
.lyt-b-img .lime-block{position:absolute;background:var(--lime);transition:transform .3s var(--pop)}
.lyt-b:hover .lime-block{transform:translateY(-3px)}
.lyt-b-txt{padding:40px;display:flex;flex-direction:column;justify-content:space-between}
.bt-num{font-weight:100;font-size:clamp(40px,5vw,64px);letter-spacing:-.02em;color:rgba(20,20,20,.09);line-height:1}
.bt-label{font-weight:400;font-size:9px;letter-spacing:.2em;color:var(--mid);text-transform:lowercase;margin-bottom:8px}
.bt-title{font-weight:200;font-size:clamp(22px,2.6vw,34px);letter-spacing:-.01em;color:var(--ink);text-transform:lowercase;margin-bottom:14px;line-height:.95}
.bt-meta{font-weight:300;font-size:10px;letter-spacing:.12em;color:var(--mid);line-height:2.1}
.bt-meta .on{color:var(--lime)}

/* layout C — disc + video music-video */
.lyt-c{background:#fff;display:flex;border:1px solid var(--faint);aspect-ratio:21/9}
@media (max-width:680px){.lyt-c{flex-direction:column;aspect-ratio:auto}}
.lyt-c-disc{width:34%;position:relative;overflow:hidden;border-right:1px solid var(--faint);display:flex;align-items:center;justify-content:center;background:var(--off)}
@media (max-width:680px){.lyt-c-disc{width:100%;border-right:none;border-bottom:1px solid var(--faint);aspect-ratio:16/9}}
.lyt-c-disc svg{width:62%}
.lyt-c-disc .lcd-rot{animation:spin 28s linear infinite;transform-origin:center}
.lyt-c-content{flex:1;display:flex;flex-direction:column}
.lcc-top{flex:1;display:flex;border-bottom:1px solid var(--faint);min-height:0}
.lcc-video{width:50%;border-right:1px solid var(--faint);background:var(--ink);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.lcc-video .play{width:38px;height:38px;border:1px solid rgba(255,255,255,.4);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .3s var(--pop),border-color .2s}
.lcc-video .play::after{content:'';border-left:8px solid rgba(255,255,255,.7);border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:3px}
.lyt-c:hover .lcc-video .play{transform:scale(1.12);border-color:var(--teal)}
.lcc-tc{position:absolute;bottom:12px;left:12px;font-family:var(--mono);font-size:8px;letter-spacing:.16em;color:rgba(255,255,255,.4)}
.lcc-info{flex:1;padding:24px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.li-idx{font-weight:400;font-size:9px;letter-spacing:.18em;color:var(--teal);text-transform:lowercase}
.li-desc{font-weight:300;font-size:11px;letter-spacing:.04em;color:var(--mid);line-height:1.9}
.li-meta{font-weight:400;font-size:9px;letter-spacing:.12em;color:var(--mid);text-transform:lowercase}
.lcc-photos{height:30%;display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid var(--faint)}
.lcc-ph{border-right:1px solid var(--faint);transition:background .25s}
.lcc-ph:nth-child(1){background:linear-gradient(135deg,#cfd3c8,#dadace)}
.lcc-ph:nth-child(2){background:linear-gradient(135deg,#c4cabf,#d2d2c6)}
.lcc-ph:nth-child(3){background:rgba(196,212,0,.18);border-right:none}
.lcc-ph:hover{background:rgba(114,196,180,.25)}
.lcc-title{height:auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between}
.lt{font-weight:100;font-size:clamp(13px,1.4vw,20px);letter-spacing:-.01em;color:var(--ink);text-transform:lowercase}
.lr{font-weight:400;font-size:9px;letter-spacing:.12em;color:var(--mid);text-align:right;line-height:2;text-transform:lowercase}

/* ═══ INDEX LIST ═══ */
#index{padding-top:60px}
.idx-list{margin-top:48px;border-top:1px solid var(--faint)}
.gitem{display:flex;align-items:center;gap:26px;padding:26px 14px;border-bottom:1px solid var(--faint);position:relative;cursor:pointer;transition:transform .25s var(--pop),padding-left .25s var(--pop),background .2s}
.gitem::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:var(--teal);transition:width .25s var(--snap)}
.gitem.lm::before{background:var(--lime)}
.gitem:hover{padding-left:26px}
.gitem:hover::before{width:3px}
.gi-num{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--mid);width:34px;flex:none}
.gi-name{flex:1;font-weight:200;font-size:clamp(22px,3vw,40px);letter-spacing:-.01em;color:var(--ink);text-transform:lowercase;line-height:1;transition:transform .25s var(--pop)}
.gitem:hover .gi-name{transform:translateX(4px)}
.gi-tags{display:flex;gap:16px;align-items:center}
.gi-tag{font-weight:400;font-size:9px;letter-spacing:.18em;color:var(--mid);text-transform:lowercase}
.gi-tag.teal{color:var(--teal)}
.gi-tag.lime{color:#9ecc09}
.gi-year{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--mid);width:46px;text-align:right;flex:none}
.gi-arrow{color:var(--ink);opacity:0;transform:translateX(-8px);transition:opacity .2s,transform .25s var(--pop);font-size:16px;width:18px;flex:none}
.gitem:hover .gi-arrow{opacity:1;transform:none}
@media (max-width:640px){.gi-tags{display:none}}

/* ═══ ABOUT / INFO — physical business card (flip) ═══ */
#about{background:var(--off)}
/* standalone about page: vertically roomy, centered column */
.about-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding-top:120px;padding-bottom:80px}
.about-bio{margin:48px auto 0;max-width:460px;width:100%;display:flex;flex-direction:column;gap:16px}
.about-bio p{font-weight:300;font-size:14px;line-height:1.75;color:rgba(20,20,20,.62);margin:0;text-wrap:pretty}
.about-bio em{font-style:normal;color:var(--teal);font-weight:400}
.bizcard-scene{
  margin:60px auto 0;width:580px;max-width:92vw;height:360px;
  perspective:1600px;
}
@media (max-width:480px){.bizcard-scene{height:300px}}

.bizcard-flip{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.2,.8,.2,1);
  cursor:pointer;
}
.bizcard-scene:hover .bizcard-flip,
.bizcard-flip.flipped{transform:rotateY(180deg)}

/* shared card face — warm pressed paper */
.bcard{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:9px;overflow:hidden;
  background:
    linear-gradient(150deg,#fbfaf6 0%,#f3f1e9 60%,#eceae0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 0 0 1px rgba(20,20,20,.05),
    0 1px 1px rgba(20,20,20,.05),
    0 18px 24px -14px rgba(20,20,20,.30),
    0 40px 60px -30px rgba(20,20,20,.38);
  padding:30px 32px;
  display:flex;flex-direction:column;
}
@media (max-width:480px){.bcard{padding:22px 22px}}
/* fine paper grain + a soft top-left light */
.bcard-grain{
  position:absolute;inset:0;pointer-events:none;border-radius:inherit;mix-blend-mode:multiply;opacity:.5;
  background-image:
    radial-gradient(120% 90% at 12% 6%,rgba(255,255,255,.5),transparent 46%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ── FRONT ── */
.bcard-front{z-index:2}
.bcard-front-top{display:flex;align-items:flex-start;justify-content:space-between;position:relative;z-index:1}
.bcard-logo{
  width:46px;height:46px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:rgba(20,20,20,0.13);
  box-shadow:0 1px 0 rgba(255,255,255,.6),0 4px 10px -3px rgba(20,20,20,.3),inset 0 1px 1px rgba(255,255,255,.12);
}
.bcard-logo-mark{font-weight:300;font-size:17px;letter-spacing:-.02em;color:#f3f1e9}
.bcard-logo-img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.bcard-edge{font-family:var(--mono);font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:rgba(20,20,20,.36);padding-top:6px}
.bcard-front-id{margin-top:24px;position:relative;z-index:1}
.bcard-name{
  font-weight:200;font-size:clamp(30px,7vw,46px);letter-spacing:-.045em;line-height:.92;
  color:#161616;text-transform:lowercase;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}
.bcard-role{
  margin-top:11px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  color:rgba(20,20,20,.5);text-transform:uppercase;
}
.bcard-role .amp{color:var(--teal)}
.bcard-bio{font-weight:300;font-size:11px;letter-spacing:.01em;color:rgba(20,20,20,.46);line-height:1.6;margin-top:9px;text-wrap:pretty}
.bcard-front-foot{
  margin-top:auto;padding-top:14px;border-top:1px solid rgba(20,20,20,.12);
  display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1;
}
.bcard-disc{font-family:var(--mono);font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:rgba(20,20,20,.42)}
.bcard-flip-hint{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:rgba(20,20,20,.32)}
.bcard-flip-ico{font-size:13px;color:var(--teal);transition:transform .3s}
.bizcard-scene:hover .bcard-flip-ico{transform:translateX(2px) rotate(-12deg)}

/* ── BACK ── */
.bcard-back{transform:rotateY(180deg);z-index:1;justify-content:space-between}
.bcard-back-head{display:flex;flex-direction:column;gap:5px;position:relative;z-index:1}
.bcard-back-name{font-weight:200;font-size:22px;letter-spacing:-.03em;color:#161616;text-transform:lowercase;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.bcard-back-role{font-family:var(--mono);font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:rgba(20,20,20,.4)}
.bcard-back-lines{display:flex;flex-direction:column;gap:11px;position:relative;z-index:1;margin:4px 0}
.bcard-line{display:flex;align-items:baseline;gap:14px;text-decoration:none}
.bcard-k{
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--teal);
  width:16px;flex:none;text-align:center;
  border:1px solid rgba(114,196,180,.5);border-radius:2px;line-height:1.5;padding:1px 0;
}
.bcard-v{font-weight:300;font-size:12px;letter-spacing:.01em;color:rgba(20,20,20,.74)}
.bcard-v a{color:rgba(20,20,20,.74);text-decoration:none;transition:color .2s}
.bcard-v a:hover,.bcard-line:hover .bcard-v{color:var(--teal)}
.bcard-back-foot{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1;padding-top:12px;border-top:1px solid rgba(20,20,20,.12)}
.bcard-avail{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:rgba(20,20,20,.46)}
.bcard-dot{width:5px;height:5px;border-radius:50%;background:var(--teal);flex:none;box-shadow:0 0 0 0 rgba(114,196,180,.5);animation:sc-pulse 2.2s ease infinite}
.bcard-back-mark{font-weight:300;font-size:13px;letter-spacing:-.02em;color:rgba(20,20,20,.3)}
@keyframes sc-pulse{0%{box-shadow:0 0 0 0 rgba(114,196,180,.45)}70%{box-shadow:0 0 0 7px rgba(114,196,180,0)}100%{box-shadow:0 0 0 0 rgba(114,196,180,0)}}

/* ═══ WHO — viewfinder intro (editorial / technical) ═══ */
.vf{
  position:relative;z-index:1;overflow:hidden;
  min-height:46vh;
  padding:64px clamp(28px,7vw,110px);
  display:flex;flex-direction:column;justify-content:center;
  background:
    radial-gradient(140% 100% at 78% 18%, #d8dcd2 0%, transparent 55%),
    radial-gradient(120% 110% at 8% 100%, #cfd2cb 0%, transparent 60%),
    #E4E5E0;
}
/* looping video field — heavily defocused, fills the whole section */
.vf-video{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  filter:blur(8px) saturate(.92)}
.vf-video video{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(1.3);
  min-width:100%;min-height:100%;
  width:auto;height:auto;
  object-fit:cover;display:block;
}
.vf-video-tint{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(228,229,224,.34),rgba(228,229,224,.22))}
body.night .vf-video-tint{background:linear-gradient(0deg,rgba(27,27,27,.42),rgba(27,27,27,.30))}

/* defocused photographic field — stronger blur per reference */
.vf::before{content:'';position:absolute;inset:-12%;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 46% at 66% 32%, rgba(120,150,108,.40), transparent 68%),
    radial-gradient(40% 40% at 28% 70%, rgba(86,84,76,.34), transparent 70%),
    radial-gradient(30% 34% at 84% 80%, rgba(150,140,90,.28), transparent 72%),
    radial-gradient(50% 30% at 50% 50%, rgba(210,212,204,.5), transparent 75%);
  filter:blur(64px)}

/* iOS / small screens: the two stacked blur filters (64px over an oversized
   layer, plus the video field) blow past Safari's compositing budget and the
   section paints empty. Soft gradients only, no filters. */
@media (max-width:820px),(hover:none){
  .vf::before{filter:none;inset:0;
    background:
      radial-gradient(52% 56% at 66% 32%, rgba(120,150,108,.30), transparent 72%),
      radial-gradient(50% 50% at 28% 70%, rgba(86,84,76,.26), transparent 74%),
      radial-gradient(40% 44% at 84% 80%, rgba(150,140,90,.22), transparent 76%),
      radial-gradient(60% 40% at 50% 50%, rgba(210,212,204,.42), transparent 78%)}
  .vf-video{filter:saturate(.92)}
  .vf-video video{transform:translate(-50%,-50%) scale(1.06)}
}

/* thin crosshair registration grid */
.vf-grid{position:absolute;inset:0;z-index:1;pointer-events:none}
.vf-grid .x{position:absolute;width:13px;height:13px;transform:translate(-50%,-50%)}
.vf-grid .x::before,.vf-grid .x::after{content:'';position:absolute;background:rgba(20,20,20,.26)}
.vf-grid .x::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%)}
.vf-grid .x::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-50%)}
.vf-grid .x-acc{width:18px;height:18px;z-index:2}
.vf-grid .x-acc::before,.vf-grid .x-acc::after{background:var(--lime)}

/* top/bottom technical edge strips */
.vf-edge{position:absolute;left:clamp(28px,7vw,110px);right:clamp(28px,7vw,110px);z-index:3;
  display:flex;justify-content:space-between;gap:16px;
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(20,20,20,.4)}
.vf-edge-t{top:22px;border-top:1px solid rgba(20,20,20,.18);padding-top:9px}
.vf-edge-b{bottom:22px;border-bottom:1px solid rgba(20,20,20,.18);padding-bottom:9px}
@media (max-width:680px){.vf-edge span:nth-child(2){display:none}}

/* the main type block — sits lower-left like the posters */
.vf-block{position:relative;z-index:3;max-width:540px;margin-top:0}
.vf-eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(20,20,20,.5);display:block;margin-bottom:14px}
.vf-head{
  font-family:var(--hv);font-weight:200;
  font-size:clamp(26px,3.6vw,44px);letter-spacing:-.035em;line-height:.98;
  color:#161412;text-transform:lowercase;margin:0 0 18px;text-wrap:balance;
}
.vf-copy{font-weight:300;font-size:13px;line-height:1.75;color:rgba(20,20,20,.62);max-width:48ch;margin:0 0 22px;text-wrap:pretty}
.vf-link{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:#161412;text-decoration:none;border-bottom:1px solid rgba(20,20,20,.25);padding-bottom:3px;
  transition:color .2s,border-color .2s,gap .25s var(--pop)}
.vf-link span{transition:transform .25s var(--pop)}
.vf-link:hover{color:var(--lime);border-color:var(--lime);gap:13px}

/* night mode */
body.night .vf{background:#1B1B1B!important}
body.night .vf::before{opacity:.55}
body.night .vf-grid .x::before,body.night .vf-grid .x::after{background:rgba(255,255,255,.22)}
body.night .vf-edge{color:rgba(255,255,255,.42);border-color:rgba(255,255,255,.16)!important}
body.night .vf-edge-t{border-top-color:rgba(255,255,255,.16)}
body.night .vf-edge-b{border-bottom-color:rgba(255,255,255,.16)}
body.night .vf-eyebrow{color:rgba(255,255,255,.5)!important}
body.night .vf-head{color:rgba(255,255,255,.92)!important}
body.night .vf-copy{color:rgba(255,255,255,.6)!important}
body.night .vf-link{color:rgba(255,255,255,.85)!important;border-color:rgba(255,255,255,.3)}
body.night .vf-link:hover{color:var(--lime)!important;border-color:var(--lime)}

/* ═══ CONTACT ═══ */
#contact{background:var(--white);color:var(--ink);padding:140px 44px;text-align:center;overflow:hidden;position:relative;border-top:1px solid var(--faint)}
#contact .flabel{color:var(--mid);justify-content:center}
#contact .flabel::before{display:none}
.contact-big{font-weight:100;font-size:clamp(18px,3vw,var(--contact-font-size));letter-spacing:-.04em;line-height:.92;text-transform:lowercase;margin:18px 0 8px}
.contact-big a{color:var(--ink);text-decoration:none;transition:color .3s}
.contact-big a:hover{color:var(--teal)}
.contact-sub{font-weight:300;font-size:11px;letter-spacing:.22em;color:var(--mid);text-transform:lowercase;margin-bottom:44px}
.contact-links{display:flex;gap:30px;justify-content:center;flex-wrap:wrap}
.contact-links a{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--mid);text-decoration:none;text-transform:lowercase;transition:color .2s,letter-spacing .25s var(--pop,cubic-bezier(.34,1.56,.64,1));position:relative}
.contact-links a::after{content:'';position:absolute;left:0;bottom:-5px;width:0;height:1px;background:var(--teal);transition:width .25s var(--snap,cubic-bezier(.4,0,.2,1))}
.contact-links a:hover{color:var(--ink);letter-spacing:.22em}
.contact-links a:hover::after{width:100%}
body.night #contact{background:#1B1B1B!important;color:#fff!important;border-top-color:rgba(255,255,255,.06)!important}
body.night #contact .flabel{color:rgba(255,255,255,.38)!important}
body.night .contact-big a{color:#fff!important}
body.night .contact-sub{color:rgba(255,255,255,.42)!important}
body.night .contact-links a{color:rgba(255,255,255,.55)!important}
body.night .contact-links a:hover{color:#fff!important}

/* ═══ FOOTER ═══ */
footer{padding:48px 44px;border-top:1px solid var(--faint);display:flex;justify-content:space-between;align-items:center;background:var(--white);color:var(--mid);flex-wrap:wrap;gap:16px}
.f-l{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:lowercase}
.f-l b{color:var(--teal)}
.f-r{font-weight:300;font-size:9px;letter-spacing:.14em;text-align:right;line-height:2.2;text-transform:lowercase}
.f-r .teal{color:var(--teal)}

/* layout B — real photo grid */
.bimg-grid{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1px}
.bimg{background-size:cover;background-position:center;filter:grayscale(28%);transition:filter .3s,transform .5s var(--pop)}
.lyt-b:hover .bimg{filter:grayscale(0%)}
/* layout C — real video + stills */
.lcc-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.78}
.lcc-video .play,.lcc-tc{position:relative;z-index:2}
.lcc-tc{position:absolute}
.lcc-ph{background-size:cover;background-position:center;filter:grayscale(25%);transition:filter .25s}
.lcc-ph:hover{filter:grayscale(0%);background-color:transparent}

/* SF Signal cell: 4:3 source, crop the baked pillarbox and give the text more room */
.lyt-c{aspect-ratio:2.9/1}
.lyt-c .lcc-video{width:auto;aspect-ratio:4/3;flex:none}
.lyt-c .lcc-vid{transform:scale(1.34)}
@media (max-width:680px){.lyt-c{aspect-ratio:auto}.lyt-c .lcc-video{width:100%;aspect-ratio:16/9}}

/* gate idle: live capture turning behind the enter prompt */
#gl-idle{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 1.9s cubic-bezier(0,.88,.07,1);pointer-events:none}
#gl-idle.on{opacity:.78}
#gl-idle .splat-wrap>div{display:none}
#gl-idle-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,rgba(7,7,7,.55) 0%,rgba(7,7,7,.26) 44%,rgba(7,7,7,.88) 100%)}
#loader:not(.gl-gate-mode) #gl-idle,#loader:not(.gl-gate-mode) #gl-idle-scrim{opacity:0;transition:opacity .3s}
@media (prefers-reduced-motion: reduce){#gl-idle{display:none}}


/* ═══════════════════════════════════════════════════════════
   MOBILE  —  everything below is inside a max-width query,
   so the desktop layout above is untouched.
   ═══════════════════════════════════════════════════════════ */
@media (max-width:760px){

  /* ── nav / chrome ── */
  nav{padding:12px 18px}
  /* on a narrow screen there is no dead margin for a floating nav to sit in,
     so past the hero it takes a scrim + hairline to stay legible over content */
  body.past-hero nav{
    background:rgba(244,244,242,.88);
    backdrop-filter:blur(14px) saturate(120%);
    -webkit-backdrop-filter:blur(14px) saturate(120%);
    border-bottom:1px solid rgba(20,20,20,.09);
  }
  body.past-hero.night nav{
    background:rgba(27,27,27,.88);
    border-bottom-color:rgba(255,255,255,.09);
  }
  /* clear the now-solid bar */
  #work{padding-top:76px!important}
  .nav-r{gap:4px}
  /* 44px tap targets without moving the 8px type */
  .nav-r a{padding:16px 9px;margin:-16px 0}
  .night-toggle{padding:14px 13px;margin:-11px 0}
  .brand{padding:12px 0;margin:-12px 0;white-space:nowrap;font-size:13px}
  .nav-avail{display:none}
  #timecode{bottom:12px;right:14px;font-size:9px;letter-spacing:.14em}

  /* ── hero ── */
  #hero{height:88vh;height:88dvh;min-height:520px}
  .hero-wm{font-size:clamp(30px,9vw,46px);letter-spacing:-.03em;padding:0 18px}
  .hero-bottom{padding:0 18px 28px}

  /* ── section scaffold ── */
  .sec{padding:64px 18px}
  #work{padding-top:40px;padding-bottom:34px}
  .work-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:30px}
  .work-head .sdesc{text-align:left!important;max-width:100%!important;line-height:1.85}
  .shead{font-size:clamp(30px,9vw,42px)}
  .flabel{margin-bottom:12px;font-size:9px}

  /* ── viewfinder intro ── */
  .vf{min-height:0;padding:78px 18px 74px}
  .vf-edge{left:18px;right:18px;font-size:8px;letter-spacing:.14em}
  .vf-grid .x{display:none}
  .vf-grid .x-acc{display:block;top:auto!important;left:auto!important;right:18px;bottom:56px;transform:none}
  .vf-copy{max-width:100%}

  /* ── work: layout A ── */
  .lyt-a{aspect-ratio:3/4;padding:24px 20px}
  .la-title{font-size:clamp(24px,7.4vw,34px)}
  .la-meta{font-size:8px;letter-spacing:.16em}
  .la-sub{gap:14px;font-size:9px;margin-top:12px}
  .la-stills{width:62px}
  .lyt-a .cross{display:none}

  /* ── work: layout B ── */
  .lyt-b-txt{padding:22px 20px;gap:22px}
  .bt-num{font-size:44px}
  .bt-title{font-size:clamp(24px,7vw,32px)}

  /* ── work: layout C ── */
  .lyt-c .lcc-top{flex-direction:column}
  .lyt-c .lcc-video{width:100%;aspect-ratio:16/9;border-right:none;border-bottom:1px solid var(--faint)}
  .lcc-info{padding:20px;gap:10px}
  .lcc-title{flex-direction:column;align-items:flex-start;gap:8px;padding:16px 20px}
  .lt{font-size:clamp(17px,5vw,22px);line-height:1.15}
  .lr{text-align:left;line-height:1.7}

  /* ── clients marquee ── */
  #clients{padding:56px 0}
  .clients-lab{margin:0 18px 26px}
  .mq-item{font-size:clamp(20px,6.6vw,28px);padding:0 18px}

  /* ── footer ── */
  footer{padding:32px 18px;flex-direction:column;align-items:flex-start;gap:10px}
  .f-r{text-align:left;line-height:1.9}

  /* ── enter gate ── */
  .ggt-meta{bottom:20px;left:18px;right:18px;font-size:7px;letter-spacing:.13em}
  .ggt-opt{font-size:17px;padding:10px 16px}   /* 44px tap target */
  .ggt-sub{font-size:11px;padding:8px 16px}
}

/* landscape phones — keep chrome clear of the safe area */
@media (max-width:900px) and (orientation:landscape){
  #hero{min-height:0}
  nav{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
  #timecode{right:max(14px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}
}

/* ── touch: no hover, so the resting state IS the final state ──
   these treatments all reached full strength on hover, which left a phone
   looking at the dimmed version permanently. */
@media (hover:none){
  .la-still{opacity:.9}
  .bimg{filter:none}
  .lcc-vid{opacity:1}
}

/* very small phones (SE / compact android) */
@media (max-width:380px){
  .lyt-a{aspect-ratio:4/5}
  .la-stills{display:none}
  .mq-item{padding:0 14px}
}


/* ═══ CONTACT — HOLOGRAPHIC DISPLAY ═════════════════════════════════════
   The page is the display. Black field edge to edge, a soft phosphor bloom,
   faint scanlines, four registration crosses, two ticked rules, and the
   readout floating in Helvetica Light. No card, no border, no motion.
   ═══════════════════════════════════════════════════════════════════════ */
html.page-holo.night,body.page-holo.night{background:#0A0908!important;color:#fff}
body.page-holo.night nav{background:rgba(10,9,8,.86)!important}
body.page-holo.night nav .brand a{color:var(--lime)!important}
body.page-holo.night .nav-r a{color:rgba(255,255,255,.55)!important}
body.page-holo.night .nav-r a:hover,body.page-holo.night .nav-r a.cur{color:#fff!important}
body.page-holo.night .nav-avail{color:rgba(255,255,255,.55)!important}
body.page-holo.night .night-toggle{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.75)}
body.page-holo.night footer{background:#0A0908!important;border-top-color:rgba(255,255,255,.1)!important;color:rgba(255,255,255,.4)!important}
body.page-holo #ambient{display:none}

#about.holo{background:var(--white);color:var(--ink);position:relative;overflow:hidden;isolation:isolate;
  width:100%;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:120px 44px 80px}
@media (max-width:640px){#about.holo{padding:96px 22px 60px}}
#about.holo::before{content:none}
#about.holo::after{content:none}
/* four registration marks at the display edges: tapered four-point stars,
   settling into place on a hard ease-out */
.holo-reg{position:absolute;inset:clamp(78px,9vh,104px) clamp(20px,4vw,44px) clamp(26px,4vw,44px);z-index:0;pointer-events:none;display:var(--xm-reg-display,block)}
.holo-reg span{position:absolute;width:16px;height:16px;color:var(--xm-accent,var(--lime,#c4d400));
  font-family:var(--hv,'Helvetica Neue'),Helvetica,Arial,sans-serif;font-weight:300;
  font-size:calc(22px * var(--xm-scale,1));line-height:16px;text-align:center;
  animation:holo-settle 1.15s cubic-bezier(0,.88,.07,1) both}
.holo-reg span::before{content:"+"}
.holo-reg .tl{top:0;left:0;animation-delay:.12s}
.holo-reg .tr{top:0;right:0;animation-delay:.26s}
.holo-reg .bl{bottom:0;left:0;animation-delay:.40s}
.holo-reg .br{bottom:0;right:0;animation-delay:.54s}
@keyframes holo-settle{
  from{opacity:0;transform:rotate(-22deg) scale(.55);filter:blur(3px)}
  60%{opacity:1;filter:blur(.4px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes holo-settle-x{
  from{opacity:0;transform:rotate(21deg) scale(.55);filter:blur(3px)}
  60%{opacity:1;filter:blur(.4px)}
  to{opacity:1;transform:rotate(45deg) scale(1);filter:blur(0)}
}
@keyframes holo-rise{
  from{opacity:0;transform:translateY(14px);filter:blur(2px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.holo{position:relative;z-index:1;width:min(720px,100%);display:flex;flex-direction:column;gap:clamp(18px,2.6vw,30px);
  font-family:var(--hv,'Helvetica Neue'),Helvetica,Arial,sans-serif;font-weight:300}

/* ticked rules with labels */
.holo-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:9px;letter-spacing:.22em;text-transform:lowercase;color:rgba(255,255,255,.5);white-space:nowrap}

.holo-meta .lime{color:var(--lime,#c4d400)}

.holo-main{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3.4vw,44px);align-items:center}
@media (max-width:640px){.holo-main{grid-template-columns:1fr;gap:28px}}
.holo-plate{position:relative;width:clamp(118px,17vw,180px);aspect-ratio:1;overflow:hidden;background:#0b0d10}
.holo-plate img{width:100%;height:100%;object-fit:cover;display:block}

.holo-read{min-width:0;display:flex;flex-direction:column;gap:9px}
.holo-name{font-size:clamp(19px,3vw,33px);line-height:.95;letter-spacing:.01em;text-transform:lowercase;color:#fff;text-wrap:balance}
.holo-role{align-self:flex-start;font-size:clamp(10px,1.2vw,12px);letter-spacing:.14em;text-transform:lowercase;margin-top:2px;color:rgba(255,255,255,.92)}
.holo-loc{font-size:10px;letter-spacing:.18em;text-transform:lowercase;color:rgba(255,255,255,.6)}

.holo-lines{display:flex;flex-direction:column;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);max-width:430px}
.holo-line{display:flex;align-items:baseline;gap:13px;font-size:12px;letter-spacing:.02em;color:rgba(255,255,255,.88);text-decoration:none}
.holo-line .k{flex:none;width:14px;font-size:9px;letter-spacing:.14em;color:var(--lime,#c4d400);text-transform:lowercase}
.holo-line .v{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 9px;overflow-wrap:anywhere}
.holo-line .v a{white-space:nowrap}
.holo-line .sep{color:rgba(255,255,255,.35)}
.holo-line a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.24)}
.holo-line a:hover{border-bottom-color:var(--lime,#c4d400)}
a.holo-line:hover .v{color:#fff}
.holo-status{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:.2em;text-transform:lowercase;color:rgba(255,255,255,.5);margin-top:13px}
.holo-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--lime,#c4d400)}

body.night #about.holo{background:#0A0908!important}

/* ── light field: same display, white ── */
html.page-holo:not(.night),body.page-holo:not(.night){background:var(--white)!important;color:var(--ink)}
body.page-holo:not(.night) nav{background:rgba(255,255,255,.9)!important}
body.page-holo:not(.night) .nav-r a{color:rgba(20,20,20,.5)!important}
body.page-holo:not(.night) .nav-r a:hover,body.page-holo:not(.night) .nav-r a.cur{color:var(--ink)!important}
body.page-holo:not(.night) .nav-avail{color:rgba(20,20,20,.45)!important}
body.page-holo:not(.night) .night-toggle{background:rgba(20,20,20,.04);border-color:rgba(20,20,20,.18);color:rgba(20,20,20,.6)}
body.page-holo:not(.night) footer{background:var(--white)!important;border-top-color:var(--faint)!important;color:var(--mid)!important}
body.page-holo:not(.night) #about.holo{background:var(--white)!important;color:var(--ink)}
body.page-holo:not(.night) .holo-meta{color:rgba(20,20,20,.5)}
body.page-holo:not(.night) .holo-name{color:var(--ink)}
body.page-holo:not(.night) .holo-role{color:rgba(20,20,20,.82)}
body.page-holo:not(.night) .holo-loc{color:rgba(20,20,20,.55)}
body.page-holo:not(.night) .holo-lines{border-top-color:rgba(20,20,20,.14)}
body.page-holo:not(.night) .holo-line{color:rgba(20,20,20,.85)}
body.page-holo:not(.night) .holo-line a{border-bottom-color:rgba(20,20,20,.24)}
body.page-holo:not(.night) .holo-line .sep{color:rgba(20,20,20,.35)}
body.page-holo:not(.night) a.holo-line:hover .v{color:var(--ink)}
body.page-holo:not(.night) .holo-status{color:rgba(20,20,20,.5)}
body.page-holo:not(.night) .holo-plate{background:#e8e6e0}

/* ── dark field: the readout inverts ── */
body.page-holo.night #about.holo{background:#0A0908!important;color:#fff}
body.page-holo.night .holo-meta{color:rgba(255,255,255,.5)}
body.page-holo.night .holo-name{color:#fff}
body.page-holo.night .holo-role{color:rgba(255,255,255,.92)}
body.page-holo.night .holo-loc{color:rgba(255,255,255,.6)}
body.page-holo.night .holo-lines{border-top-color:rgba(255,255,255,.14)}
body.page-holo.night .holo-line{color:rgba(255,255,255,.88)}
body.page-holo.night .holo-line a{border-bottom-color:rgba(255,255,255,.24)}
body.page-holo.night .holo-line .sep{color:rgba(255,255,255,.35)}
body.page-holo.night a.holo-line:hover .v{color:#fff}
body.page-holo.night .holo-status{color:rgba(255,255,255,.5)}
body.page-holo.night .holo-plate{background:#0b0d10}

/* scattered marks: the same four-point star, turned 45 degrees into an x */
.holo-x{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:var(--xm-op,1);display:var(--xm-x-display,block)}
.holo-x span{position:absolute;width:12px;height:12px;color:var(--xm-ink,rgba(255,255,255,.42));
  font-family:var(--hv,'Helvetica Neue'),Helvetica,Arial,sans-serif;font-weight:300;
  font-size:calc(13px * var(--xm-scale,1) * (1 + var(--k,0) * var(--xm-var,1)));line-height:12px;text-align:center;
  animation:holo-settle 1.25s cubic-bezier(0,.88,.07,1) both}
.holo-x span::before{content:var(--glyph,"\00d7")}
/* kept to the margins so nothing sits under the readout */
.holo-x .x1{top:19%;left:12%;--k:0.15;animation-delay:.62s}
.holo-x .x2{top:33%;left:94%;width:9px;height:9px;--k:-0.15;line-height:9px;opacity:.75;animation-delay:.74s}
.holo-x .x3{top:52%;left:3.5%;--k:0.15;animation-delay:.86s}
.holo-x .x4{top:70%;left:96%;width:14px;height:14px;--k:0.38;line-height:14px;animation-delay:.98s}
.holo-x .x5{top:9%;left:38%;width:9px;height:9px;--k:-0.15;line-height:9px;opacity:.6;animation-delay:1.10s}
.holo-x .x6{top:12%;left:72%;width:9px;height:9px;--k:-0.15;line-height:9px;opacity:.55;animation-delay:1.22s}
.holo-x .x7{top:91%;left:24%;width:10px;height:10px;--k:0;line-height:10px;animation-delay:1.34s}
.holo-x .x8{top:88%;left:83%;width:9px;height:9px;--k:-0.15;line-height:9px;opacity:.5;animation-delay:1.46s}
.holo-x .lime{color:var(--xm-accent,var(--lime,#c4d400))}
body.page-holo:not(.night) .holo-x span{color:var(--xm-ink,rgba(20,20,20,.42))}
body.page-holo:not(.night) .holo-x .lime{color:var(--xm-accent,var(--lime,#c4d400))}

/* the readout settles in on the same curve */
.holo-meta,.holo-plate,.holo-name,.holo-role,.holo-loc,.holo-lines,.holo-status{
  animation:holo-rise 1.05s cubic-bezier(0,.88,.07,1) both,
            holo-fade 1.9s cubic-bezier(0,.88,.07,1) both}
@keyframes holo-fade{from{opacity:0}to{opacity:1}}
.holo-meta:first-child{animation-delay:.20s}
.holo-plate{animation-delay:.34s}
.holo-name{animation-delay:.50s}
.holo-role{animation-delay:.66s}
.holo-loc{animation-delay:.80s}
.holo-lines{animation-delay:.94s}
.holo-status{animation-delay:1.14s}
.holo-meta:last-child{animation-delay:1.30s}

@media (prefers-reduced-motion:reduce){
  .holo-reg span,.holo-x span,.holo-meta,.holo-plate,.holo-name,.holo-role,.holo-loc,.holo-lines,.holo-status{animation:none}
}

/* one small lime block, the single hot element on the field */
.holo-block{position:absolute;z-index:0;pointer-events:none;
  top:84%;left:88%;width:26px;height:6px;background:var(--xm-accent,var(--lime,#c4d400));display:var(--xm-block-display,block);
  animation:holo-rise 1.05s cubic-bezier(0,.88,.07,1) 1.05s both}
@media (max-width:640px){.holo-block{top:auto;bottom:12%;left:78%}}
@media (prefers-reduced-motion:reduce){.holo-block{animation:none}}

/* ── right edge bar: solid green, one word running the height ── */
.edge-bar{position:absolute;top:0;right:0;bottom:0;width:clamp(18px,2vw,24px);z-index:2;
  background:var(--lime);overflow:hidden;pointer-events:none}
.edge-bar span{position:absolute;top:0;left:0;writing-mode:vertical-rl;
  font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.08em;
  color:#000;white-space:pre;animation:edge-run 26s linear infinite}
@keyframes edge-run{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@media (prefers-reduced-motion:reduce){.edge-bar span{animation:none}}
body.page-holo #about.holo{padding-right:clamp(48px,6vw,72px)}

/* ── solid blocks: a small offset cluster, no outlines, no texture ── */
.blk-cluster{position:absolute;z-index:0;pointer-events:none;display:grid;
  grid-template-columns:repeat(3,var(--blk,22px));grid-auto-rows:var(--blk,22px);gap:0}
.blk-cluster i{display:block}
.blk-cluster i.on{background:var(--xm-accent,var(--lime))}
.blk-cluster.c1{top:14%;left:6%;--blk:clamp(14px,1.7vw,24px);
  animation:holo-rise 1.05s cubic-bezier(0,.88,.07,1) .72s both}
.blk-cluster.c2{bottom:14%;left:9%;--blk:clamp(10px,1.2vw,16px);
  animation:holo-rise 1.05s cubic-bezier(0,.88,.07,1) 1.02s both}
@media (max-width:760px){.blk-cluster.c1{top:9%;left:5%}.blk-cluster.c2{display:none}}
@media (prefers-reduced-motion:reduce){.blk-cluster{animation:none}}

/* ── glitch text over the enter sequence ── */
#gl-glitch-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:60;
  font-family:var(--mono);font-weight:700;font-size:clamp(15px,2.6vw,30px);letter-spacing:.16em;
  text-transform:lowercase;color:var(--lime);white-space:pre;pointer-events:none;
  text-shadow:2px 0 rgba(234,2,126,.9),-2px 0 rgba(1,255,255,.85);
  animation:gt-flicker .12s steps(1) infinite}
@keyframes gt-flicker{
  0%{opacity:1;transform:translate(-50%,-50%)}
  40%{opacity:.72;transform:translate(calc(-50% + 2px),calc(-50% - 1px))}
  70%{opacity:1;transform:translate(calc(-50% - 3px),-50%)}
  100%{opacity:.88;transform:translate(-50%,calc(-50% + 1px))}}
#gl-glitch-text.out{animation:none;opacity:0;transition:opacity .28s linear}
@media (prefers-reduced-motion:reduce){#gl-glitch-text{animation:none;text-shadow:none}}

/* ── marathon palette, restrained: lime is the only accent ── */
body.page-holo{--lime:#c2fe0c;--m-mag:#EA027E}
body.page-holo .holo-dot{background:var(--m-mag)}
body.page-holo .holo-plate{border-radius:0}