@font-face{font-family:'Canela';font-style:italic;font-weight:100;
  src:url('../fonts/Canela-ThinItalic-Web.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Futura PT';font-style:normal;font-weight:400;
  src:url('../fonts/futura-pt_book-webfont.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Futura PT';font-style:oblique;font-weight:400;
  src:url('../fonts/futura-pt_book-oblique-webfont.woff2') format('woff2');font-display:swap}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;
  -webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}
:root{--bg:#0a0a0a;--surface:#141414;--text:#e8e5df;--dim:#555;--m:30px;--fs:11px;--lh:19px}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);
  font-family:'Futura PT',sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;
  touch-action:none;-webkit-tap-highlight-color:transparent}

/* ═══ HEADER ═══ */
.hdr{position:fixed;top:var(--m);left:var(--m);right:var(--m);z-index:300;
  display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}
.h-name{font-size:var(--fs);letter-spacing:.35em;text-transform:uppercase;color:var(--text);line-height:1.4}
.h-role{font-size:var(--fs);letter-spacing:.05em;text-transform:uppercase;color:var(--text);text-align:right;line-height:1.18;overflow:hidden}

/* ═══ BIO ═══ */
.bio{position:fixed;left:var(--m);right:var(--m);z-index:270;top:10.5%;
  max-width:min(720px,52vw);font-size:14px;
  line-height:1.5;color:var(--text);text-align:justify;letter-spacing:.01em;
  pointer-events:none;opacity:0;visibility:hidden}
.bio.vis{opacity:1;visibility:visible}

/* ─── Profile Image ─── */
.profile-img{position:fixed;left:var(--m);bottom:var(--m);z-index:282;
  width:min(720px,52vw);aspect-ratio:7/5;
  background: top center/cover no-repeat;
  pointer-events:none;visibility:hidden;clip-path:inset(0% 0% 100% 0%)}

.bio-p>span{display:inline-block;overflow:clip;vertical-align:top}
.bio-p>span>span{display:inline-block}

/* No-transition utility (measurement / instant lock) */
.notrans,.notrans *{transition:none!important}

/* ═══ LOADING ═══ */
.l-bar{position:fixed;left:0;bottom:calc(var(--m) + 18px);z-index:150;height:.5px;background:var(--text);
  width:0%;transition:width .5s ease,opacity .5s;pointer-events:none}
.l-bar.out{opacity:0}

/* ═══ INFO OVERLAY ═══ */
.info-ov{position:fixed;inset:0;z-index:250;background:var(--bg);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 4s cubic-bezier(.25,.8,.25,1),visibility 4s}
.info-ov.on{opacity:1;visibility:visible;pointer-events:auto}

/* ═══ MENU — jasonbergh.com hover text-swap ═══ */
.menu-wrap{position:fixed;right:var(--m);top:50%;transform:translateY(-50%);z-index:280;
  display:flex;align-items:flex-start;gap:clamp(40px,4.5vw,90px);pointer-events:auto}
.m-anchor{position:relative;text-align:right;height:var(--lh)}

/* Hover text-swap structure */
.m-head{font-family:'Futura PT',sans-serif;font-size:var(--fs);letter-spacing:.05em;
  text-transform:uppercase;background:none;border:none;cursor:pointer;padding:0;
  display:block;text-align:right;width:100%;white-space:nowrap;height:var(--lh);
  overflow:hidden;position:relative;line-height:var(--lh)}
.m-head .t,.m-head .b{display:block;transition:transform .45s cubic-bezier(.76,0,.24,1);
  line-height:var(--lh);color:var(--text)}
.m-head .b{position:absolute;top:0;left:0;right:0;transform:translateY(100%);
  font-style:oblique;color:var(--text)}
.m-head:hover .t{transform:translateY(-100%)}
.m-head:hover .b{transform:translateY(0)}
.m-head.active .t{font-style:oblique}
/* Locked state — stays showing .b text even without hover */
.m-head.locked .t{transform:translateY(-100%)}
.m-head.locked .b{transform:translateY(0)}

/* Override hover when child hovered */
.m-anchor:has(.m-drop span:hover) .m-head .t,
.m-anchor:has(.m-drop a:hover) .m-head .t{color:var(--dim)!important;font-style:normal!important}
.m-head[data-hov-child] .t{color:var(--dim)!important;font-style:normal!important}
/* Info & Contact: hover = oblique only, no slide */
#mContactHead:hover .t{transform:none;font-style:oblique}
#mContactHead:hover .b{transform:translateY(100%)}
/* Locked state wins over hover (specificity 1-3-0 > 1-2-0) — slide fires on click, not on un-hover */
#mContactHead.locked:hover .t{transform:translateY(-100%)}
#mContactHead.locked:hover .b{transform:translateY(0)}
/* Contact always oblique when active */
#mContactHead.active .t{font-style:oblique!important;color:var(--text)!important}
#mContactHead.active .b{font-style:oblique!important;color:var(--text)!important}

/* 3-state hover span — oblique intermediate (desktop gallery/large only via .ih-ready) */
#mContactHead .ih{
  position:absolute;top:0;left:0;right:0;
  display:block;line-height:var(--lh);
  font-style:oblique;color:var(--text);
  transform:translateY(100%);
  transition:transform .45s cubic-bezier(.76,0,.24,1)}
#mContactHead.ih-ready:hover .t{transform:translateY(-100%);font-style:normal}
#mContactHead.ih-ready:hover .ih{transform:translateY(0)}
#mContactHead.ih-ready:hover .b{transform:translateY(100%)}
#mContactHead.locked .ih{transform:translateY(-100%)}

/* Dropdown */
.m-drop{position:absolute;top:100%;right:0;overflow:hidden;
  max-height:0;opacity:0;pointer-events:none;
  transition:max-height .5s cubic-bezier(.23,1,.32,1),opacity .4s ease}
.m-drop.open{max-height:250px;opacity:1;pointer-events:auto}

/* Dropdown items — hover text-swap */
a.m-di,a.m-di:visited,a.m-di:active{text-decoration:none;color:inherit}
.m-di{display:block;height:var(--lh);position:relative;text-align:right;
  cursor:pointer;white-space:nowrap;transform:translateY(100%);opacity:0;
  transition:transform .45s cubic-bezier(.23,1,.32,1),opacity .4s;text-decoration:none;
  clip-path:inset(0 -200px 0 -200px)}
.m-drop.open .m-di{transform:translateY(0);opacity:1}
/* Collapse upward */
.m-drop.closing .m-di{transform:translateY(-100%);opacity:0}
.m-di .t,.m-di .b{display:block;font-family:'Futura PT',sans-serif;font-size:var(--fs);
  letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
  line-height:var(--lh);transition:transform .4s cubic-bezier(.76,0,.24,1);color:var(--dim)}
.m-di .b{position:absolute;top:0;left:0;right:0;transform:translateY(100%);
  font-style:oblique;color:var(--text)}
.m-di:hover .t{transform:translateY(-100%)}
.m-di:hover .b{transform:translateY(0)}
.m-di.copied .t{transform:translateY(-100%)}
.m-di.copied .b{transform:translateY(0);font-style:normal;color:var(--text)}

/* Marquee for Coming Soon items */
@keyframes csb-marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
#mWorksDrop .b{overflow:hidden}
#mWorksDrop .b .csb{
  display:inline-block;white-space:nowrap;
  animation:csb-marq 3.5s linear infinite;
  animation-play-state:paused}
#mWorksDrop .m-di:hover .b .csb{animation-play-state:running}

/* CASES */
.m-cases{position:fixed;z-index:280;pointer-events:none;
  font-size:var(--fs);letter-spacing:.05em;text-transform:uppercase;
  color:var(--text);font-style:oblique;
  line-height:var(--lh);top:50%;transform:translateY(-50%);
  opacity:0;transition:opacity .4s}
.m-cases.vis{opacity:1}

/* CLOSE — hover text-swap */
.close-btn{position:fixed;bottom:var(--m);right:var(--m);z-index:290;
  font-family:'Futura PT',sans-serif;font-size:var(--fs);letter-spacing:.25em;
  text-transform:uppercase;background:none;border:none;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .4s;
  height:var(--lh);overflow:hidden;position:fixed;line-height:var(--lh)}
.close-btn .t,.close-btn .b{display:block;transition:transform .45s cubic-bezier(.76,0,.24,1);
  line-height:var(--lh);color:var(--dim)}
.close-btn .b{position:absolute;bottom:0;right:0;transform:translateY(100%);
  font-style:oblique;color:var(--text)}
.close-btn:hover .t{transform:translateY(-100%)}
.close-btn:hover .b{transform:translateY(0)}
.close-btn.vis{opacity:1;pointer-events:auto}

/* ═══ FOOTER ═══ */
.ftr{position:fixed;bottom:var(--m);left:var(--m);z-index:280;
  font-size:var(--fs);letter-spacing:.12em;color:var(--dim);pointer-events:none;transition:opacity .4s}
#ftrYear{letter-spacing:.25em}
.ftr.hidden{opacity:0}
.ftr-pct{position:fixed;bottom:var(--m);right:var(--m);z-index:100;
  font-size:var(--fs);letter-spacing:.25em;color:var(--text);pointer-events:none;transition:opacity .4s}

/* ═══ SMALL GALLERY ═══ */
.vp{position:fixed;inset:0;overflow:hidden;z-index:5;cursor:grab;
  opacity:0;transition:opacity .5s ease .15s,scale .5s cubic-bezier(.23,1,.32,1)}
.vp.vis{opacity:1}
.vp.pressed{scale:.975}
body.dragging .vp{cursor:grabbing}
.cv{position:absolute;will-change:transform}
.cv.blurred{filter:blur(16px) brightness(.38);pointer-events:none;
  transition:filter 2.2s cubic-bezier(.25,.8,.25,1)}
.cv.blur-fast{filter:blur(12px) brightness(.38);pointer-events:none;
  transition:filter .8s ease}
.cv.unblur{filter:none;transition:filter .8s ease}

.it{position:absolute;overflow:hidden;background:var(--surface);cursor:pointer;
  will-change:transform,opacity;
  transition:transform .7s cubic-bezier(.23,1,.32,1),opacity .6s ease}
.it.init{opacity:0;transform:translate(-50px,-50px) scale(.93)}
.it.enter{opacity:1;transform:translate(0,0) scale(1)}
.it.hov{transition:opacity .3s ease}
.it.hov:hover{z-index:10}
/* Grid open/close transitions */
.vp.expanding .it{transition:transform .75s cubic-bezier(.86,0,.07,1),opacity .5s ease-in .1s!important}
.vp.expanding .it:not(.active){transform:scale(.18)!important;opacity:0!important}
/* Reverse on close — collapsing overrides expanding back to normal */
.vp.collapsing .it{transform:translate(0,0) scale(1)!important;opacity:1!important;
  transition:opacity .4s ease,transform .75s cubic-bezier(.86,0,.07,1)!important}
.vp.collapsing .it:not(.active){transform:translate(0,0) scale(1)!important;opacity:1!important}
.vp.collapsing .it.active{transform:translate(0,0) scale(1)!important;opacity:1!important}

.it img,.it video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;
  filter:brightness(.82);transition:filter .35s ease}
.it.hov:hover img,.it.hov:hover video{filter:brightness(1)}
.it .vb{position:absolute;bottom:8px;left:8px;width:20px;height:20px;border-radius:50%;
  background:rgba(0,0,0,.35);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center}
.it .vb::after{content:'';width:0;height:0;border-style:solid;border-width:3.5px 0 3.5px 6px;
  border-color:transparent transparent transparent rgba(255,255,255,.8);margin-left:1.5px}

/* ═══ LARGE GALLERY ═══ */
.lg{position:fixed;inset:0;z-index:200;background:var(--bg);
  opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s;overflow:hidden}
.lg.on{opacity:1;visibility:visible}
.lg-stack{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  transition:filter 2s cubic-bezier(.25,.8,.25,1)}
.lg-stack.blurred{filter:blur(16px) brightness(.38);pointer-events:none}
.lg-stack.unblur{filter:none;transition:filter .8s ease}
.lg-card{position:absolute;will-change:transform,opacity;overflow:hidden;
  transition:transform .6s cubic-bezier(.23,1,.32,1),opacity .5s ease,filter .5s ease;
  box-shadow:0 24px 80px rgba(0,0,0,.55),0 6px 20px rgba(0,0,0,.35)}
.lg-card img,.lg-card video{display:block;width:100%;height:100%;object-fit:cover}
.lg-card.cur{transform:translate(-50%,-50%) scale(1);opacity:1;z-index:3}
.lg-card.prev{transform:translate(-50%,-160%) scale(1);opacity:0;z-index:4}
.lg-card.entering{transform:translate(-50%,60%) scale(.9);opacity:0;z-index:1}

/* Hero */
.lg-hero{position:fixed;z-index:210;overflow:hidden;will-change:transform;
  transform-origin:center}
.lg-hero img,.lg-hero video{display:block;width:100%;height:100%;object-fit:cover}

/* Meta — title with clip containers */
.lg-meta{position:fixed;left:var(--m);top:50%;transform:translateY(-50%);margin-top:3px;z-index:260;
  pointer-events:none;opacity:0;transition:opacity .4s ease .25s;width:400px}
body.lg-open .lg-meta{opacity:1}
.lg-tclip{overflow:visible;clip-path:inset(0 -9999px);position:relative}
.lg-title{font-family:'Canela',serif;font-style:italic;font-weight:100;
  font-size:18px;color:#fff;letter-spacing:0;line-height:28px}
.lg-title-next{position:absolute;top:0;left:0;right:0}
.lg-ctx{font-family:'Futura PT',sans-serif;font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:#fff;opacity:.5}
.lg-ctx-next{position:absolute;top:0;left:0;right:0}

.lg-count{position:fixed;bottom:var(--m);left:var(--m);z-index:260;overflow:hidden;
  font-family:'Futura PT',sans-serif;font-size:var(--fs);letter-spacing:.05em;color:var(--dim);
  opacity:0;transition:opacity .4s ease .3s}
.lg.on .lg-count{opacity:1}
/* Hide large-gallery UI (lg-meta / lg-count / close-btn) when AI Works is active */
.lg-meta.ui-hidden,.lg-count.ui-hidden{opacity:0!important;transition-delay:0s!important}
.close-btn.ui-hidden{opacity:0!important;pointer-events:none!important}

/* Mobile large gallery — full-width backdrop for text legibility */
.lg-mob-backdrop{display:none;position:fixed;left:0;right:0;bottom:24%;height:0;
  backdrop-filter:blur(25px) brightness(65%);z-index:250;pointer-events:none;
  overflow:hidden;transition:height .45s cubic-bezier(.76,0,.24,1)}
.lg-mob-backdrop.anim{height:4.3%}
.lg-mob-backdrop.ws-hide{height:0!important}

.vig{position:fixed;inset:0;z-index:6;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(6,6,6,.5) 100%)}

@media(max-width:1024px){:root{--m:28px}}
@media(max-width:768px){:root{--m:20px;--fs:11px;--lh:21px}
  .bio{max-width:none;font-size:15px;line-height:1.2;top:10%}
  .h-name{letter-spacing:.35em}
  .h-role{letter-spacing:.05em;line-height:1.18}
  .lg-title{font-size:18px;letter-spacing:0;line-height:24px}
  .lg-ctx{font-size:var(--fs);letter-spacing:.05em}
  /* Large gallery: title at 24%, menu + cases at 25% */
  .lg-meta{top:auto;bottom:24%;transform:none}
  /* Menu always at bottom on mobile */
  .menu-wrap{top:auto;transform:none;bottom:25%}
  /* CASES: bottom-aligned and left-anchored on mobile */
  .m-cases{top:auto!important;bottom:25%!important;transform:none!important}
  /* Backdrop: always in DOM (display:block), triggered via JS .anim class */
  .lg-mob-backdrop{display:block}
  /* Prevent lg-meta from auto-appearing on mobile — JS controls the entrance */
  body.lg-open .lg-meta{opacity:0!important;transition:none!important}
  /* Profile image */
  .profile-img{left:var(--m);right:var(--m);width:auto;bottom:auto;
    top:38.3%;aspect-ratio:7.8/5;filter:grayscale(100%) url(#unsharp)}
}