.jh{
  --ink:#151515; --cream:#f7f5e9; --hot:#e9158c;   /* edit colours here */
  --f:1; --blur:0px;                               /* driven by the script below */
  position:relative; overflow:hidden;
  margin:5px 40px 0; min-height:min(84vh,780px); border-radius:22px;
  display:grid; grid-template:1fr auto / minmax(0,1fr) minmax(0,1.2fr);
  background:var(--ink); color:var(--cream);
  font-family:Mont,Montserrat,Arial,sans-serif;
}
.jh *{box-sizing:border-box}
.jh a{color:inherit; text-decoration:none}

/* ---- copy ---- */
.jh-copy{align-self:center; padding:48px 0 48px 48px}
.jh h1{margin:0 0 28px; font-weight:800; font-size:clamp(34px,4.6vw,78px); line-height:.96; letter-spacing:-.035em}
.jh h1 span{
  display:block; white-space:nowrap;
  --p:clamp(0, calc((var(--f) - var(--from)) * var(--speed)), 1);   /* each line pulls focus in turn */
  filter:blur(calc((1 - var(--p)) * 16px));
  opacity:calc(.2 + var(--p)*.8);
  transform:translateY(calc((1 - var(--p)) * .22em));
}
.jh h1 span:nth-child(1){--from:0;   --speed:4}
.jh h1 span:nth-child(2){--from:.15; --speed:3.2}
.jh h1 span:nth-child(3){--from:.6;  --speed:2.5}
.jh-copy p{margin:0 0 30px; max-width:400px; font-size:14px; line-height:1.75; opacity:.78}
.jh-cta{display:flex; align-items:center; gap:24px}
.jh-btn{display:inline-flex; align-items:center; gap:22px; padding:15px 24px; border-radius:50px;
  background:var(--cream); color:var(--ink)!important; font-size:12px; font-weight:800;
  transition:transform .25s, background .25s, color .25s}
.jh-btn i{font-style:normal; font-size:18px; line-height:1; transition:transform .25s}
.jh-btn:hover{transform:translateY(-3px); background:var(--hot); color:var(--cream)!important}
.jh-btn:hover i{transform:translate(3px,-3px)}
.jh-link{font-size:11px; font-weight:800; text-decoration:underline!important; text-underline-offset:5px}
.jh a:focus-visible{outline:2px solid var(--hot); outline-offset:4px}

/* ---- photo (or video) ---- */
.jh-stage{display:grid; place-items:center; padding:40px}
.jh-media{position:relative; width:100%; aspect-ratio:5/3; overflow:hidden; border-radius:14px; background:#cdcdcd}
.jh-media img, .jh-media video{
  display:block; width:100%; height:100%; object-fit:cover;
  filter:blur(var(--blur)) saturate(calc(.1 + var(--f)*.9));
}

/* autofocus brackets: one element, eight tiny gradients */
.jh-focus{
  --c:var(--ink); --l:24px; --w:2px;
  position:absolute; inset:calc(2% + var(--f)*4%) calc(2% + var(--f)*3%); pointer-events:none;
  background:
    linear-gradient(var(--c) 0 0) 0 0/var(--l) var(--w),       linear-gradient(var(--c) 0 0) 0 0/var(--w) var(--l),
    linear-gradient(var(--c) 0 0) 100% 0/var(--l) var(--w),    linear-gradient(var(--c) 0 0) 100% 0/var(--w) var(--l),
    linear-gradient(var(--c) 0 0) 0 100%/var(--l) var(--w),    linear-gradient(var(--c) 0 0) 0 100%/var(--w) var(--l),
    linear-gradient(var(--c) 0 0) 100% 100%/var(--l) var(--w), linear-gradient(var(--c) 0 0) 100% 100%/var(--w) var(--l);
  background-repeat:no-repeat;
}
.jh.is-locked .jh-focus{--c:var(--hot); animation:jh-lock 1.1s forwards}

/* ---- bottom bar ---- */
.jh-bar{grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:16px 48px; border-top:1px solid rgba(247,245,233,.16); font-size:12px; font-weight:700}

@keyframes jh-lock{0%,40%{opacity:1} 20%{opacity:.15} 100%{opacity:.55}}

@media(max-width:1000px){
  .jh{margin:4px 22px 0; min-height:480px}
  .jh-copy{padding:36px 0 36px 28px}
  .jh-stage{padding:28px}
  .jh-bar{padding:14px 28px}
}
@media(max-width:700px){
  .jh{margin:0 14px; border-radius:12px; grid-template:auto auto auto / minmax(0,1fr); min-height:0}
  .jh-stage{order:-1; padding:14px 14px 0}
  .jh-media{border-radius:8px}
  .jh-copy{padding:26px 24px 30px}
  .jh h1{font-size:clamp(28px,9.4vw,58px)}
  .jh-copy p{font-size:13px}
  .jh-bar{padding:13px 24px; font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .jh *{animation:none!important; transition:none!important}
}

/* Keep the supplied 3-second focus reveal and native 6-second video speed. */
.jh-bar-actions{display:flex;align-items:center;gap:18px}
.jh-motion-toggle{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;border:1px solid #f7f5e960;border-radius:50%;padding:0;background:transparent;color:var(--cream);font:700 13px/1 Mont,Arial,sans-serif;cursor:pointer}
.jh-motion-toggle:hover{border-color:var(--hot);color:var(--hot)}
.jh-motion-toggle:focus-visible{outline:2px solid var(--hot);outline-offset:4px}
.jh-motion-toggle[hidden]{display:none}
@media(max-width:700px){.jh-bar-actions{gap:10px}.jh-bar{gap:10px}.jh-motion-toggle{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){.jh{--f:1!important;--blur:0px!important}.jh-motion-toggle{display:none}}

/* Preserve the supplied lettering while using the site's symbol font for arrows. */
.jh-btn i,.jh-arrow{font-family:JKISymbols,Arial,sans-serif}
.jh-btn{white-space:nowrap}
@media(max-width:360px){.jh h1{font-size:clamp(24px,8.8vw,31px)}.jh-cta{gap:14px}.jh-btn{padding:13px 16px;gap:16px;font-size:11px}}

.jh-pause-icon{width:9px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.jh-play-icon{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor;margin-left:2px}

/* Quiet centered caption; motion control remains available to keyboard users. */
.jh-bar{justify-content:center;text-align:center}
.jh-keyboard-pause{position:absolute;width:1px;height:1px;padding:0;border:0;clip-path:inset(50%);overflow:hidden}
.jh-keyboard-pause:focus-visible{position:absolute;right:24px;bottom:68px;width:44px;height:44px;clip-path:none;overflow:visible;background:#141414;z-index:5}