﻿.hx-home .jh-hero{position:relative;isolation:isolate;width:100%;height:100svh;min-height:640px;overflow:hidden;background:#f0f0ee;color:#111}
.jh-wall{position:absolute;inset:0;overflow:hidden;contain:layout paint}
.jh-row{position:absolute;left:0;top:calc(var(--row)*12.5%);width:100%;height:12.5%}
.jh-tile{position:absolute;top:0;left:0;overflow:hidden;border-radius:5px;background:#e7e7e5;will-change:transform;width:var(--tile-w,180px);height:calc(100% - 5px)}
.jh-tile img{width:100%;height:100%;object-fit:cover;display:block}
.jh-symbol{position:absolute;z-index:1;left:0;top:0;width:clamp(180px,23vw,340px);aspect-ratio:1;background:#000;mask:url('/assets/six-petal-emblem-transparent.svg') center/contain no-repeat;pointer-events:none;will-change:transform}
.jh-glass{position:absolute;z-index:2;inset:0 auto 0 0;width:50%;padding:clamp(28px,4vw,72px);display:flex;flex-direction:column;justify-content:space-between;background:#f5f5f2a6;backdrop-filter:blur(32px) saturate(0);-webkit-backdrop-filter:blur(32px) saturate(0)}
.jh-glass-top{display:flex;justify-content:space-between;gap:20px;font:10px/1.4 Arial,sans-serif;letter-spacing:.08em}
.jh-copy{margin-block:auto;padding-block:48px}.jh-copy>p{font:10px/1.5 Arial,sans-serif;letter-spacing:.09em;margin:0 0 26px;color:#444}
.jh-copy h1{font-family:inherit;font-size:clamp(48px,5.3vw,90px);font-weight:500;letter-spacing:-.07em;line-height:1.02;margin:0;color:#111}
.jh-glass-bottom{display:flex;gap:24px;align-items:flex-end;justify-content:space-between}.jh-glass-bottom p{font-size:13px;line-height:1.6;margin:0;color:#333}
.jh-glass-bottom a{display:flex;gap:22px;align-items:center;color:#111;text-decoration:none;font-size:13px;white-space:nowrap;padding:14px 0;border-bottom:1px solid #1116}.jh-glass-bottom a span{font-size:24px}
.jh-glass-bottom a:focus-visible{outline:2px solid currentColor;outline-offset:6px}
/* Hidden before JavaScript runs, then revealed only beyond the hero. */
.hx-home:has(.jh-hero):not(.jh-past-hero) .j-nav{visibility:hidden!important;opacity:0!important;pointer-events:none!important}
@media(max-width:900px){.jh-glass-top{font-size:8px}.jh-glass-bottom{align-items:flex-start;flex-direction:column;gap:14px}.jh-copy h1{font-size:clamp(38px,5.6vw,65px)}}
@media(max-width:600px){.hx-home .jh-hero{height:100svh;min-height:760px}.jh-glass{inset:0 0 auto;width:100%;height:58%;padding:28px}.jh-copy{padding-block:28px}.jh-copy h1{font-size:clamp(43px,11vw,66px)}.jh-glass-bottom{flex-direction:row;align-items:flex-end;gap:12px}.jh-glass-bottom p{font-size:10px}.jh-glass-bottom a{font-size:10px;gap:10px}.jh-symbol{width:180px}}
@media(prefers-reduced-motion:reduce){.jh-tile{will-change:auto}}
.jh-lens{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.jh-lens-ready .jh-row{visibility:hidden}
/* Pressed optical glass, matching the small bevelled cells in the reference. */
.jh-glass{--jh-light-x:72%;--jh-light-y:25%;isolation:isolate;background:transparent;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset -1px 0 0 #ffffff30}
.jh-glass::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:url('/home-glass-texture.svg') repeat}
.jh-glass::after{content:none}
.jh-lens-ready .jh-glass{backdrop-filter:none;-webkit-backdrop-filter:none}
.jh-lens-ready .jh-glass::before{background:none}
.jh-glass-top,.jh-copy,.jh-glass-bottom{position:relative;z-index:1}
.jh-glass .jh-copy h1{color:#111;text-shadow:0 1px 2px #ffffff30}
@media(max-width:600px){.jh-glass{background:transparent;box-shadow:inset 0 -1px 0 #ffffff30}.jh-glass::before{background-size:18px 18px}}
/* Editorial lettering sits cleanly above the textured glass. */
.jh-glass{padding:clamp(28px,3.5vw,68px)}
.jh-glass-top{color:#fff;font-size:10px;letter-spacing:.065em;text-shadow:0 1px 8px #0009}
.jh-copy{padding-block:36px;margin-block:auto}
.jh-copy>.jh-eyebrow{display:flex;align-items:center;gap:12px;color:#fff;font-size:9px;letter-spacing:.12em;margin:0 0 28px;text-shadow:0 1px 8px #0009}
.jh-eyebrow>span{width:23px;height:23px;flex:none;background:#fff;mask:url('/assets/six-petal-emblem-transparent.svg') center/185% no-repeat;-webkit-mask:url('/assets/six-petal-emblem-transparent.svg') center/185% no-repeat}
.jh-glass .jh-copy h1{color:#fff;font-size:clamp(68px,8.3vw,150px);font-weight:550;letter-spacing:-.075em;line-height:.88;text-shadow:0 2px 22px #0003;margin:0 0 30px}
.jh-copy h1>span{display:block}
.jh-copy h1>span+span{padding-left:8%;margin-top:7px}
.jh-copy>.jh-statement{font-family:inherit;font-size:clamp(22px,2.3vw,40px);font-weight:450;letter-spacing:-.045em;line-height:1.08;color:#fff;margin:0 0 0 9%;text-shadow:0 1px 12px #0008}
.jh-glass-bottom{padding-top:22px;border-top:1px solid #ffffff65;gap:20px}
.jh-glass-bottom p{color:#fff;font-size:11px;line-height:1.6;text-shadow:0 1px 8px #000b}
.jh-glass-bottom a{background:#111;color:#fff;border:0;border-radius:40px;padding:16px 20px;gap:25px;font-size:12px;transition:background .2s,transform .2s}
.jh-glass-bottom a:hover{background:#292929;transform:translateY(-2px)}
@media(min-width:601px) and (max-height:740px){.jh-copy{padding-block:20px}.jh-glass .jh-copy h1{font-size:min(8vw,110px)}.jh-copy>.jh-eyebrow{margin-bottom:20px}.jh-copy>.jh-statement{font-size:25px}}
@media(max-width:900px) and (min-width:601px){.jh-glass-bottom{flex-direction:row;align-items:center}.jh-glass-bottom p{font-size:9px}.jh-glass-bottom a{font-size:10px;padding:13px 16px;gap:12px}.jh-copy>.jh-eyebrow{font-size:7px;gap:8px}}
@media(max-width:600px){.jh-glass-top{font-size:8px}.jh-copy{padding-block:20px}.jh-copy>.jh-eyebrow{font-size:7px;letter-spacing:.07em;margin-bottom:20px}.jh-eyebrow>span{width:20px;height:20px}.jh-glass .jh-copy h1{font-size:clamp(64px,18vw,98px);margin-bottom:18px}.jh-copy>.jh-statement{font-size:22px}.jh-glass-bottom{padding-top:15px;gap:12px}.jh-glass-bottom p{font-size:9px}.jh-glass-bottom a{font-size:10px;padding:13px 16px;gap:12px}}
@media(prefers-reduced-motion:reduce){.jh-glass-bottom a{transition:none}}
.hx-home .jh-glass .jh-copy h1,.hx-home .jh-glass .jh-copy h1>span{color:#fff!important;font-weight:500!important;-webkit-text-fill-color:#fff}
/* Dual-contrast lettering remains legible over both light and dark moving cards. */
.jh-glass-top,.jh-copy,.jh-glass-bottom p{mix-blend-mode:normal}
.hx-home .jh-glass .jh-copy h1,.hx-home .jh-glass .jh-copy h1>span{
 color:#fff!important;-webkit-text-fill-color:#fff;
 -webkit-text-stroke:1.8px rgba(10,12,18,.85);paint-order:stroke fill;
 text-shadow:0 2px 3px #0008,0 4px 18px #0008!important;
}
.jh-glass .jh-copy>.jh-statement{color:#fff;-webkit-text-stroke:.9px #101218;paint-order:stroke fill;text-shadow:0 2px 6px #000a}
.jh-glass-top,.jh-copy>.jh-eyebrow,.jh-glass-bottom p{
 color:#fff;font-weight:600;text-shadow:0 1px 2px #000,1px 0 1px #000,-1px 0 1px #000,0 0 7px #000;
}
@media(max-width:600px){.hx-home .jh-glass .jh-copy h1,.hx-home .jh-glass .jh-copy h1>span{-webkit-text-stroke:1.3px rgba(10,12,18,.9)}}
/* Rounded optical panels: transparent fallback, no etched or grain overlay. */
.jh-glass::before{background:none}
.jh-glass{backdrop-filter:blur(38px);-webkit-backdrop-filter:blur(38px)}
.jh-glass::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:none}
/* Same plain black glass as the service navigation. */
.hx-home .jh-glass,.hx-home .jh-lens-ready .jh-glass{background:rgba(16,16,16,.55);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);box-shadow:none}
.hx-home .jh-glass::before,.hx-home .jh-glass::after{content:none;background:none}
/* Brand-first editorial hero. The vector wordmark is the typographic anchor. */
.hx-home .jh-glass.jh-editorial{padding:32px 3.1vw 30px;display:grid;grid-template-rows:auto 1.05fr 1fr auto;gap:26px;color:#f4f4f2}
.jh-masthead{display:grid;grid-template-columns:1fr 1fr auto;gap:18px;font-size:8px;line-height:1.55;letter-spacing:.055em;align-items:start}
.jh-masthead>span:nth-child(2){text-align:center}.jh-masthead>a{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-size:9px;border-bottom:1px solid #ffffff60;padding-bottom:7px}.jh-masthead svg{width:17px;height:17px}
.jh-brand-block{align-self:center;padding-top:20px}.jh-brand-caption,.jh-brand-baseline{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.065em;line-height:1.4}.jh-brand-caption{padding-bottom:20px}.jh-wordmark{width:100%;height:auto;display:block;filter:none!important}.jh-brand-baseline{padding-top:20px;margin-top:10px;border-top:1px solid #ffffff50;color:#ffffffb0;font-size:7px}
.jh-editorial-statement{display:grid;grid-template-columns:1fr;align-content:center;gap:24px}.jh-section-note{font-size:8px;letter-spacing:.08em;color:#ffffffad}
.hx-home .jh-editorial h1{font-size:clamp(30px,3.45vw,64px);line-height:1.08;font-weight:400;letter-spacing:-.055em;margin:0;color:#fff;-webkit-text-stroke:0;text-shadow:none}
.jh-editorial h1 span{display:block}.jh-editorial h1 span:nth-child(2){padding-left:13%;color:#ffffffa0}.jh-editorial h1 span:nth-child(3){padding-left:5%}
.jh-editorial-footer{display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px;border-top:1px solid #ffffff50;padding-top:22px}.jh-editorial-footer p{font-size:11px;line-height:1.7;margin:0;color:#ffffffe0}.jh-explore{display:flex;align-items:center;gap:20px;color:#fff;text-decoration:none;font-size:11px}.jh-explore i{display:grid;place-items:center;width:46px;height:46px;border:1px solid #ffffff60;border-radius:50%;transition:background .3s,color .3s,transform .3s}.jh-explore svg{width:21px;height:21px}.jh-explore:hover i{background:#fff;color:#161616;transform:translateY(3px)}.jh-editorial a:focus-visible{outline:2px solid #fff;outline-offset:6px}
.jh-wall-caption{position:absolute;bottom:18px;left:calc(50% + 20px);right:20px;display:flex;justify-content:space-between;gap:15px;z-index:1;font-size:7px;letter-spacing:.08em;color:#fff;mix-blend-mode:difference;pointer-events:none}
@media(min-width:601px) and (max-height:740px){.hx-home .jh-glass.jh-editorial{gap:16px;padding-top:24px;padding-bottom:22px}.jh-brand-block{padding-top:0}.jh-brand-caption{padding-bottom:12px}.jh-brand-baseline{padding-top:12px}.jh-editorial-statement{gap:14px}.jh-editorial-footer{padding-top:15px}.hx-home .jh-editorial h1{font-size:3.3vw}}
@media(max-width:900px) and (min-width:601px){.jh-masthead{font-size:6px;gap:10px}.jh-masthead>a{font-size:7px;gap:6px}.jh-brand-caption{font-size:6px}.jh-brand-baseline{font-size:5px}.jh-editorial-footer p{font-size:8px}.jh-explore{font-size:9px;gap:10px}.jh-explore i{width:33px;height:33px}.jh-editorial-footer{gap:10px}}
@media(max-width:600px){.hx-home .jh-hero{min-height:860px}.hx-home .jh-glass.jh-editorial{height:62%;padding:22px;gap:20px;grid-template-rows:auto 1fr 1fr auto}.jh-masthead{font-size:6px;gap:10px}.jh-masthead>a{font-size:7px;gap:7px}.jh-masthead svg{width:14px;height:14px}.jh-brand-block{padding-top:0}.jh-brand-caption{font-size:6px;padding-bottom:13px}.jh-brand-baseline{font-size:5px;margin-top:8px;padding-top:12px}.jh-editorial-statement{gap:14px}.jh-section-note{font-size:6px}.hx-home .jh-editorial h1{font-size:7.7vw}.jh-editorial-footer{padding-top:15px;gap:12px}.jh-editorial-footer p{font-size:8px}.jh-explore{font-size:9px;gap:12px}.jh-explore i{width:35px;height:35px}.jh-wall-caption{left:22px;right:22px;bottom:12px;font-size:5px}}
@media(prefers-reduced-motion:reduce){.jh-explore i{transition:none}}
.hx-home .jh-editorial h1,.hx-home .jh-editorial h1>span{color:#f4f4f2!important;-webkit-text-fill-color:#f4f4f2!important;-webkit-text-stroke:0!important;text-shadow:none!important}
.hx-home .jh-editorial h1>span:nth-child(2){color:#d1d1cf!important;-webkit-text-fill-color:#d1d1cf!important}
@media(min-width:1100px){.jh-masthead{font-size:10px}.jh-brand-caption{font-size:9px}.jh-brand-baseline,.jh-section-note{font-size:9px}.jh-editorial-footer p,.jh-explore{font-size:12px}}
/* Simple studio identity: navbar lettering and one statement. */
.hx-home .jh-glass.jh-simple{display:flex;justify-content:center;padding:clamp(26px,4vw,76px)}
.jh-simple-content{width:100%;display:flex;flex-direction:column;gap:clamp(48px,8vh,90px)}
body.hx-home .jh-simple-brand .identity-word{font-family:Jaleed,Arial,sans-serif!important;font-size:clamp(66px,10vw,190px);font-weight:400;letter-spacing:0;line-height:1;text-transform:none;color:#fff;display:block}
.hx-home .jh-simple h1,.hx-home .jh-simple h1>span{color:#f4f4f2!important;-webkit-text-fill-color:#f4f4f2!important;-webkit-text-stroke:0!important;text-shadow:none!important;font-weight:400!important}
.hx-home .jh-simple h1{font-size:clamp(28px,3.15vw,58px);line-height:1.16;letter-spacing:-.05em;margin:0}
.jh-simple h1>span{display:block}
@media(max-width:600px){.hx-home .jh-glass.jh-simple{height:58%;padding:28px}.jh-simple-content{gap:48px}body.hx-home .jh-simple-brand .identity-word{font-size:19vw}.hx-home .jh-simple h1{font-size:7.6vw}}

/* Quiet editorial placement: a smaller signature, room around the statement. */
.hx-home .jh-glass.jh-simple{align-items:stretch;justify-content:flex-start;padding:clamp(32px,4.6vw,86px)}
.jh-simple-content{height:100%;min-height:0;justify-content:space-between;gap:40px;padding:0}
body.hx-home .jh-simple-brand .identity-word{font-size:clamp(48px,5.3vw,94px)!important;line-height:1.1;opacity:1}
.hx-home .jh-simple h1{font-size:clamp(26px,2.45vw,45px)!important;line-height:1.3!important;letter-spacing:-.035em!important;max-width:440px}
.hx-home .jh-simple h1>span{opacity:1!important}
@media(max-width:600px){.hx-home .jh-glass.jh-simple{padding:30px}.jh-simple-content{padding:0;gap:38px}body.hx-home .jh-simple-brand .identity-word{font-size:12.8vw!important}.hx-home .jh-simple h1{font-size:6.5vw!important;line-height:1.3!important}}

/* Fully white hero signature and copy, anchored to the panel corners. */
body.hx-home .jh-simple-brand .identity-word,.hx-home .jh-simple h1,.hx-home .jh-simple h1>span{color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:1!important}.jh-simple-content{align-items:flex-start;text-align:left}.jh-simple-content h1{margin-top:auto}
