@font-face{font-family:DinLight;src:url('https://static.parastorage.com/fonts/v2/eca8b0cd-45d8-43cf-aee7-ca462bc5497c/v1/din-next-w01-light.woff2') format('woff2');font-display:swap}
*{box-sizing:border-box}html{background:#000;color:#fff;scroll-behavior:smooth}body{margin:0;background:#000;color:#fff;font-family:DinLight,Arial,sans-serif;font-weight:300}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.site-nav{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:20px 28px;mix-blend-mode:difference}.brand{font-family:DinLight,Arial,sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:15px}.nav-link{font-size:11px;letter-spacing:.18em;text-transform:uppercase}.hero{min-height:100vh;padding:120px 28px 45px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}.hero-copy{max-width:700px}.kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.55;margin:0 0 28px}.hero h1{font-family:DinLight,Arial,sans-serif;font-size:clamp(70px,13vw,210px);line-height:.78;font-weight:400;letter-spacing:-.035em;text-transform:uppercase;margin:0}.bio{align-self:end;max-width:540px;margin-left:auto;padding-bottom:4px}.bio p{font-size:clamp(20px,2.2vw,31px);line-height:1.08;margin:0}.links{display:flex;gap:24px;margin-top:28px}.links a{font-size:11px;letter-spacing:.15em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:4px}.section-head{padding:55px 28px 22px;border-top:1px solid #222;display:flex;justify-content:space-between;align-items:baseline}.section-head h2{font-family:DinLight;font-size:18px;font-weight:400;letter-spacing:.15em;text-transform:uppercase;margin:0}.section-head span{font-size:11px;opacity:.45;letter-spacing:.12em}.works{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#222}.work{position:relative;background:#000;overflow:hidden;min-height:38vw}.work img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .5s}.work:hover img{transform:scale(1.025);opacity:.72}.work-info{position:absolute;left:22px;right:22px;bottom:20px;display:flex;justify-content:space-between;align-items:end;pointer-events:none}.work-title{font-family:DinLight;font-size:clamp(22px,3vw,42px);text-transform:uppercase;letter-spacing:.02em}.work-meta{font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.75}.work.reel{grid-column:1/-1;min-height:56vw}.work.reel img{object-position:center}.about{padding:110px 28px 130px;display:grid;grid-template-columns:1fr 1fr;gap:50px;border-top:1px solid #222}.about h2{font-family:DinLight;font-size:clamp(50px,8vw,120px);line-height:.8;text-transform:uppercase;font-weight:400;margin:0}.about-copy{max-width:600px}.about-copy p{font-size:clamp(22px,2.4vw,34px);line-height:1.05;margin:0 0 32px}.contact{border-top:1px solid #222;padding:28px;display:flex;justify-content:space-between;gap:20px;align-items:center}.contact span,.contact a{font-size:11px;letter-spacing:.15em;text-transform:uppercase}.footer{border-top:1px solid #222;padding:22px 28px 35px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.55}.modal{position:fixed;inset:0;background:rgba(0,0,0,.96);z-index:100;display:none;padding:22px}.modal.open{display:flex;flex-direction:column}.modal-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px}.modal-title{font-family:DinLight;text-transform:uppercase;font-size:18px;letter-spacing:.12em}.close{font-size:13px;letter-spacing:.15em;text-transform:uppercase}.player{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.player iframe{width:min(1200px,100%);aspect-ratio:16/9;border:0;background:#111}.small-note{font-size:10px;opacity:.45;letter-spacing:.1em;text-transform:uppercase}@media(max-width:760px){.site-nav{padding:16px 16px}.hero{min-height:auto;padding:110px 16px 70px;display:block}.hero h1{font-size:23vw;margin-bottom:70px}.bio{margin:0}.bio p{font-size:26px}.section-head{padding:35px 16px 16px}.works{display:block}.work,.work.reel{min-height:70vw}.work-info{left:15px;right:15px;bottom:14px}.about{display:block;padding:75px 16px}.about h2{margin-bottom:55px}.contact,.footer{padding-left:16px;padding-right:16px}.contact{display:block}.contact a{display:block;margin-top:12px}.footer{gap:15px;flex-direction:column}}

/* Landing reel */
.hero-reel{position:relative;min-height:100svh;padding:0;display:block;overflow:hidden;background:#000}
.hero-video{position:absolute;inset:0;overflow:hidden}
.hero-video iframe{position:absolute;top:50%;left:50%;width:177.7778vh;height:100vw;min-width:100%;min-height:100%;transform:translate(-50%,-50%);border:0;pointer-events:none}
.hero-video:after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28)}
.hero-overlay{position:absolute;inset:0;padding:120px 28px 45px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;z-index:2}
.hero-reel .hero-copy{max-width:700px}.hero-reel .bio{align-self:end;max-width:540px;margin-left:auto;padding-bottom:4px}.hero-reel .hero-overlay h1{font-family:DinLight,Arial,sans-serif;font-size:clamp(70px,13vw,210px);line-height:.78;font-weight:400;letter-spacing:-.035em;text-transform:uppercase;margin:0}
.scroll-cue{position:absolute;z-index:3;left:28px;bottom:25px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:4px}
@media(max-width:760px){.hero-reel{min-height:100svh}.hero-overlay{padding:100px 16px 70px;display:block}.hero-reel .hero-overlay h1{font-size:23vw;margin-bottom:55px}.hero-reel .bio{margin:0}.hero-reel .bio p{font-size:24px}.scroll-cue{left:16px;bottom:18px}}

/* Final V2 title treatment — blend directly against the moving reel */
.hero-reel .hero-overlay{
  isolation:auto;
}
.hero-reel .hero-copy{
  position:absolute;
  left:28px;
  top:50%;
  transform:translateY(-50%);
  z-index:4;
  mix-blend-mode:difference;
}
.hero-reel .hero-overlay h1{
  color:#fff;
  mix-blend-mode:normal;
}
@media(max-width:760px){
  .hero-reel .hero-copy{
    left:16px;
    top:50%;
    transform:translateY(-50%);
  }
}

/* MATHEW ORZEL — smaller, closer to centre, original blend treatment */
.hero-reel .hero-director-title{
  position:absolute;
  left:18%;
  top:52%;
  transform:translateY(-50%);
  z-index:6;
  margin:0;
  font-family:DinLight,Arial,sans-serif;
  font-size:clamp(30px,4.5vw,72px);
  line-height:.78;
  font-weight:400;
  letter-spacing:-.035em;
  text-transform:uppercase;
  color:#fff;
  mix-blend-mode:difference;
  isolation:auto;
  pointer-events:none;
}
@media(max-width:760px){
  .hero-reel .hero-director-title{
    left:12%;
    top:52%;
    transform:translateY(-50%);
    font-size:9vw;
  }
}

/* Descriptor aligned with the smaller, centred title */
.hero-reel .hero-copy{
  position:absolute;
  left:18%;
  top:calc(51.5% - clamp(43px, 5.1vw, 68px));
  transform:none;
  z-index:7;
  margin:0;
  padding:0;
  pointer-events:none;
}
.hero-reel .hero-copy .kicker{
  margin:0;
  padding:0;
  text-align:left;
  white-space:nowrap;
  font-family:DinLight,Arial,sans-serif;
  font-size:clamp(9px, .9vw, 13px);
  line-height:1;
  letter-spacing:.02em;
  text-transform:uppercase;
}
@media(max-width:760px){
  .hero-reel .hero-copy{
    left:12%;
    top:calc(51% - 11vw);
  }
}

/* Landing reel: native local video, autoplay background */
.hero-reel .hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  z-index:0;
}

/* Landing video: native HTML5 video so the MP4 autoplays as a background */
.hero-reel .hero-video{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;z-index:0}
.hero-reel .hero-video-element{display:block;width:100%;height:100%;object-fit:cover}


/* Responsive polish — preserve the desktop aesthetic while making the portfolio touch-first. */
html,body{overflow-x:hidden}
.work{display:block}
.work{touch-action:manipulation}
.work-meta{min-width:max-content}
.modal{padding:16px}
@media(max-width:760px){
  .site-nav{padding-top:max(16px,env(safe-area-inset-top));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .nav-links{flex-wrap:wrap;row-gap:10px}
  .hero-reel .hero-video-element{object-position:center center}
  .works{gap:1px}
  .work,.work.reel{min-height:62.5vw}
  .work-info{bottom:max(14px,env(safe-area-inset-bottom));align-items:flex-end}
  .work-title{font-size:clamp(20px,7vw,30px);line-height:1}
  .work-meta{font-size:9px}
  .modal{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  .modal-top{padding-bottom:12px}
  .modal-title{font-size:13px;letter-spacing:.1em}
  .close{font-size:12px;padding:8px 4px;min-width:44px;min-height:44px}
  .player{width:100%}
  .player iframe{width:100%;max-width:100%;aspect-ratio:16/9}
}
@media(max-width:390px){
  .nav-links{gap:11px}
  .nav-link{font-size:10px}
  .work-info{left:12px;right:12px}
  .work-title{font-size:19px}
}


/* Final title alignment: keep every project title on the same top line as its metadata block. */
.work-copy{min-height:46px;justify-content:flex-start}
.work-title{display:block;line-height:.95!important}
.work-details{line-height:1.3!important}
@media(max-width:760px){.work-copy{min-height:40px}.work-title{line-height:.95!important}}

/* Final alignment: preserve the original title sizes/positions; align the role line's visible left edge with the M. */
.hero-reel .hero-copy{
  left:calc(18% + 4px);
}
@media(max-width:760px){
  .hero-reel .hero-copy{
    left:calc(12% + 4px);
  }
}

/* V7 — refined horizontal navigation + rapid multicolour hover */
.site-nav{
  left:0;
  right:0;
  width:auto;
  padding:20px 28px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.nav-links{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;
  gap:clamp(28px,4vw,52px);
}
.nav-links .nav-link,
.nav-links .site-contact-toggle{
  display:inline-block;
  width:auto;
  text-align:left;
  line-height:1;
  margin:0;
  padding:0;
  white-space:nowrap;
}

@keyframes navColorCycle{
  0%{color:#ff3b30}
  16%{color:#ffcc00}
  33%{color:#34c759}
  50%{color:#00c7ff}
  66%{color:#5856d6}
  83%{color:#ff2d55}
  100%{color:#ff3b30}
}
@media (hover:hover) and (pointer:fine){
  .nav-links .nav-link:hover,
  .nav-links .site-contact-toggle:hover{
    animation:navColorCycle .72s steps(1,end) infinite;
  }
}

@media(max-width:760px){
  .site-nav{
    padding:16px 16px;
  }
  .nav-links{
    flex-wrap:wrap;
    row-gap:12px;
    column-gap:24px;
  }
  .nav-link,.site-contact-toggle{font-size:10px!important}
}

/* V8 — compact single-line horizontal navigation */
.site-nav{
  left:0 !important;
  right:0 !important;
  width:auto !important;
  padding:20px 28px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
}
.nav-links{
  display:flex !important;
  flex-direction:row !important;
  align-items:baseline !important;
  justify-content:flex-start !important;
  flex-wrap:nowrap !important;
  gap:34px !important;
  width:auto !important;
}
.nav-links .nav-link,
.nav-links .site-contact-toggle{
  display:inline-block !important;
  width:auto !important;
  text-align:left !important;
  line-height:1 !important;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap !important;
  transform-origin:left center;
  transition:transform .24s ease, font-weight .24s ease;
}
@media (hover:hover) and (pointer:fine){
  .nav-links .nav-link:hover,
  .nav-links .site-contact-toggle:hover{
    font-weight:700 !important;
    transform:scale(1.08);
  }
}
@media(max-width:760px){
  .site-nav{padding:16px !important;}
  .nav-links{
    flex-wrap:wrap !important;
    row-gap:12px !important;
    column-gap:24px !important;
  }
}


/* V23 — stacked outlined title, descriptor above, with the original difference treatment */
.hero-reel .hero-copy{
  position:absolute;
  left:18%;
  top:calc(51.5% - 118px);
  transform:none;
  z-index:7;
  max-width:none;
  pointer-events:none;
}
.hero-reel .hero-copy .kicker{
  margin:0;
  padding:0;
  font-family:DinLight,Arial,sans-serif;
  font-size:11px;
  line-height:1;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.55;
  white-space:nowrap;
  text-align:left;
}
.hero-reel .hero-director-title{
  position:absolute;
  left:18%;
  top:51.5%;
  transform:translateY(-50%);
  margin:0;
  padding:0;
  font-family:"Arial Narrow","Helvetica Neue Condensed","DIN Condensed",Impact,sans-serif;
  font-size:clamp(42px,6.2vw,108px);
  line-height:.84;
  font-weight:700;
  letter-spacing:-.025em;
  text-transform:uppercase;
  color:transparent;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1.8px #fff;
  text-shadow:none;
  mix-blend-mode:difference;
  isolation:auto;
  white-space:nowrap;
  width:max-content;
  z-index:6;
  pointer-events:none;
}
.hero-reel .hero-director-title span{
  display:block;
}
@media(max-width:760px){
  .hero-reel .hero-copy{
    left:12%;
    top:calc(51% - 82px);
  }
  .hero-reel .hero-copy .kicker{font-size:10px;}
  .hero-reel .hero-director-title{
    left:12%;
    top:51%;
    font-size:11vw;
    line-height:.84;
    -webkit-text-stroke:1.2px #fff;
  }
}


/* V24 — descriptor aligned to the M; visible inverted-video title treatment */
.hero-reel .hero-copy{left:18%;}
.hero-reel .hero-director-title{
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  -webkit-text-stroke:2px #fff;
  mix-blend-mode:normal !important;
}
.hero-reel .hero-title-reversal{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:5;
  pointer-events:none;
}
@media(max-width:760px){
  .hero-reel .hero-copy{left:12%;}
  .hero-reel .hero-title-reversal{display:none;}
}

/* V25 — actual difference blend: the outlined title inverts against the moving video */
.hero-reel .hero-director-title{
  mix-blend-mode:difference !important;
  color:#fff !important;
  -webkit-text-fill-color:transparent !important;
  -webkit-text-stroke:2px #fff !important;
}
.hero-reel .hero-copy{
  left:18% !important;
}
@media(max-width:760px){
  .hero-reel .hero-copy{left:12% !important;}
}




/* V28 — descriptor shares the exact left edge of the title; preserve all title positioning. */
.hero-reel .hero-copy{left:18% !important;}
.hero-reel .hero-director-title{left:18% !important;top:51.5% !important;}
@media(max-width:760px){
  .hero-reel .hero-copy{left:12% !important;}
  .hero-reel .hero-director-title{left:12% !important;top:51% !important;}
}


/* FINAL TITLE GEOMETRY — restore the established composition. */
.hero-reel .hero-copy{
  left:12% !important;
  top:24% !important;
  transform:none !important;
}
.hero-reel .hero-director-title{
  left:12% !important;
  top:29% !important;
  transform:none !important;
}
@media(max-width:760px){
  .hero-reel .hero-copy{left:12% !important;top:24% !important;}
  .hero-reel .hero-director-title{left:12% !important;top:29% !important;}
}

/* V30 — restore the established MATHEW / ORZEL position. Move only the descriptor above MATHEW. */
.hero-reel .hero-director-title{
  left:18% !important;
  top:51.5% !important;
  transform:translateY(-50%) !important;
}
.hero-reel .hero-copy{
  left:calc(18% + 4px) !important;
  top:calc(51.5% - 90px) !important;
  transform:none !important;
}
@media(max-width:760px){
  .hero-reel .hero-director-title{
    left:12% !important;
    top:51% !important;
    transform:translateY(-50%) !important;
  }
  .hero-reel .hero-copy{
    left:calc(12% + 4px) !important;
    top:calc(51% - 68px) !important;
    transform:none !important;
  }
}


/* FINAL — one responsive lockup. The descriptor and name are one unit.
   No independent viewport scaling or vertical offsets. */
.hero-reel .hero-title-lockup{
  position:absolute;
  left:18%;
  top:51.5%;
  transform:translateY(-50%);
  width:max-content;
  height:auto;
  margin:0;
  padding:0;
  z-index:8;
  pointer-events:none;
  font-family:"Arial Narrow","Helvetica Neue Condensed","DIN Condensed",Impact,sans-serif;
  /* Scale from the smaller viewport dimension so resizing never
     makes the title drift relative to the hero frame. */
  font-size:clamp(42px,min(6.2vw,11vh),108px);
  line-height:1;
}
.hero-reel .hero-title-lockup .hero-copy{
  position:absolute;
  left:0;
  bottom:calc(100% + .075em);
  top:auto !important;
  transform:none !important;
  margin:0;
  padding:0;
  width:max-content;
  max-width:none;
}
.hero-reel .hero-title-lockup .hero-copy .kicker{
  margin:0;
  padding:0;
  font-family:DinLight,Arial,sans-serif;
  font-size:.14em;
  line-height:1;
  letter-spacing:.18em;
  white-space:nowrap;
  text-align:left;
  opacity:.55;
}
.hero-reel .hero-title-lockup .hero-director-title{
  position:relative;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  margin:0;
  padding:0;
  width:max-content;
  font-family:"Arial Narrow","Helvetica Neue Condensed","DIN Condensed",Impact,sans-serif;
  font-size:1em !important;
  line-height:.84;
  font-weight:700;
  letter-spacing:-.025em;
  color:#fff !important;
  -webkit-text-fill-color:transparent !important;
  -webkit-text-stroke:2px #fff !important;
  mix-blend-mode:normal !important;
  white-space:nowrap;
}
.hero-reel .hero-title-lockup .hero-director-title span{
  display:block;
}

/* On tall/narrow screens use the same lockup, just a little further left. */
@media (max-aspect-ratio:4/5){
  .hero-reel .hero-title-lockup{left:12%;}
}
@media (max-width:760px){
  .hero-reel .hero-title-lockup{
    left:12%;
    top:51%;
    transform:translateY(-50%);
    font-size:clamp(42px,min(11vw,11vh),92px);
  }
}

/* FINAL STABILITY: disable the old live canvas reversal effect. */
.hero-reel .hero-title-reversal{display:none !important;}

/* V39 FINAL CANONICAL LOCKUP — one flow layout, no independent positioning. */
.hero-reel .hero-title-lockup{
  position:absolute !important;
  left:18% !important;
  top:51.5% !important;
  transform:translateY(-50%) !important;
  width:max-content !important;
  height:auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  margin:0 !important;
  padding:0 !important;
  z-index:8 !important;
  pointer-events:none !important;
  font-size:clamp(42px,min(6.2vw,11vh),108px) !important;
}
.hero-reel .hero-title-lockup .hero-copy{
  position:static !important;
  left:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  width:max-content !important;
  max-width:none !important;
  margin:0 0 .08em 0 !important;
  padding:0 !important;
  order:0 !important;
}
.hero-reel .hero-title-lockup .hero-copy .kicker{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  font-family:DinLight,Arial,sans-serif !important;
  font-size:.14em !important;
  line-height:1 !important;
  letter-spacing:.18em !important;
  white-space:nowrap !important;
  text-align:left !important;
  opacity:.55 !important;
}
.hero-reel .hero-title-lockup .hero-director-title{
  position:static !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  display:block !important;
  width:max-content !important;
  margin:0 !important;
  padding:0 !important;
  font-family:"Arial Narrow","Helvetica Neue Condensed","DIN Condensed",Impact,sans-serif !important;
  font-size:1em !important;
  line-height:.84 !important;
  font-weight:700 !important;
  letter-spacing:-.025em !important;
  color:#fff !important;
  -webkit-text-fill-color:transparent !important;
  -webkit-text-stroke:2px #fff !important;
  mix-blend-mode:normal !important;
  white-space:nowrap !important;
  order:1 !important;
}
.hero-reel .hero-title-lockup .hero-director-title span{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
}
@media(max-aspect-ratio:4/5){
  .hero-reel .hero-title-lockup{left:12% !important;}
}
@media(max-width:760px){
  .hero-reel .hero-title-lockup{
    left:12% !important;
    top:51% !important;
    transform:translateY(-50%) !important;
    font-size:clamp(42px,min(11vw,11vh),92px) !important;
  }
}

/* V43 — ORZEL and the descriptor stay exactly where they are.
   Only MATHEW moves 1px left. */
.hero-reel .hero-title-lockup{
  left:18% !important;
}
.hero-reel .hero-title-lockup .hero-copy .kicker{
  transform:translateX(1px) !important;
}
.hero-reel .hero-title-lockup .hero-director-title span:first-child{
  transform:translateX(-1px) !important;
}
@media(max-aspect-ratio:4/5){
  .hero-reel .hero-title-lockup{left:12% !important;}
}
@media(max-width:760px){
  .hero-reel .hero-title-lockup{left:12% !important;}
}


/* Mobile navigation for inner pages — desktop navigation remains unchanged. */
.mobile-inner-menu-toggle,.mobile-inner-menu{display:none}
@media(max-width:760px){
  .site-nav .nav-links{display:none!important}
  .mobile-inner-menu-toggle{
    display:flex!important;position:fixed;top:16px;right:16px;z-index:1200;width:34px;height:34px;
    padding:7px;flex-direction:column;justify-content:center;gap:4px;background:none;border:0;
  }
  .mobile-inner-menu-toggle span{display:block;width:20px;height:1px;background:currentColor}
  .mobile-inner-menu{
    position:fixed;inset:0;z-index:1150;display:none;background:rgba(255,255,255,.98);color:#111;
    padding:78px 28px 35px;
  }
  .mobile-inner-menu.open{display:block}
  .mobile-inner-menu-close{
    position:absolute;top:15px;right:16px;width:34px;height:34px;padding:0;border:0;background:none;
    color:#111;font:300 32px/1 Arial,sans-serif;
  }
  .mobile-inner-menu nav{display:flex;flex-direction:column}
  .mobile-inner-menu nav a{
    display:block;width:100%;padding:19px 0;text-align:left;border:0;border-bottom:1px solid rgba(0,0,0,.12);
    background:none;color:#111;font-family:DinLight,Arial,sans-serif;font-size:16px;font-weight:300;
    letter-spacing:.18em;text-transform:uppercase;text-decoration:none!important;
  }
  .mobile-inner-menu nav a:first-child{border-top:1px solid rgba(0,0,0,.12)}
}



/* MOBILE ONLY — move FILMMAKER slightly higher without moving MATHEW/ORZEL. */
@media(max-width:760px){
  .hero-reel .hero-title-lockup .hero-copy .kicker{
    transform:translateY(-5px) !important;
  }
}

/* MOBILE ONLY — filmmaker credit aligned exactly with the left edge of MATHEW. */
@media(max-width:760px){
  .hero-reel .hero-title-lockup .hero-copy{
    left:0 !important;
    width:100% !important;
  }
  .hero-reel .hero-title-lockup .hero-copy .kicker{
    font-size:11px !important;
    letter-spacing:.18em !important;
    line-height:1 !important;
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
    width:max-content !important;
    opacity:.55 !important;
  }
}

/* MOBILE ONLY — hide legacy page-close X so it cannot overlap the hamburger.
   The opened mobile menu provides its own close X. Desktop is unchanged. */
@media(max-width:760px){
  .page-close,.close-link{display:none !important;}
}

/* Desktop keeps the original descriptor; mobile uses FILMMAKER only. */
.desktop-kicker{display:block !important;}
.mobile-kicker{display:none !important;}
@media(max-width:760px){
  .desktop-kicker{display:none !important;}
  .mobile-kicker{display:block !important;}
}


/* FINAL RESPONSIVE KICKER — one element, so desktop can never display FILMMAKER. */
.responsive-kicker::before{content:"DIRECTOR / PRODUCER / CINEMATOGRAPHER";}
@media(max-width:760px){
  .responsive-kicker::before{content:"FILMMAKER";}
}