html.jbn-live .story-sequence{--story-a:#f0c8b2;--story-b:#c6c2e8;--story-c:#d4e1cd;position:relative;background:radial-gradient(ellipse at 0 10%,var(--story-a),transparent 65%),radial-gradient(ellipse at 100% 80%,var(--story-b),transparent 65%),var(--paper);color:var(--ink)}html.jbn-live .story-sequence.tone-pearl{--story-a:#e4e4df;--story-b:#d4dee4;--story-c:#dce2d7}html.jbn-live .story-sequence.tone-mineral{--story-a:#e8d8b0;--story-b:#bccfd4;--story-c:#d9d3e2}html.jbn-live .story-sequence.tone-sea{--story-a:#c9decf;--story-b:#bed4e8;--story-c:#e1d9bc}html.jbn-live .story-sequence.tone-horizon{--story-a:#ecc6ad;--story-b:#d8c2dc;--story-c:#e1cdbb}html.jbn-live .story-sequence.tone-night{background:#070b0e;color:#f6f4ef}html.jbn-live .story-layout{position:relative;padding:70px var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:7%}html.jbn-live .story-chapter{padding:25px 0 45px}html.jbn-live .story-chapter>.eyebrow{font-size:9px;letter-spacing:.9px}html.jbn-live .story-chapter h2{font:500 clamp(32px,3.5vw,60px)/1.08 Bricolage;letter-spacing:-.045em;margin:28px 0 24px;max-width:600px}html.jbn-live .story-chapter p{font-size:16px;line-height:1.8;max-width:470px}html.jbn-live .story-link{display:inline-flex;align-items:center;gap:30px;border-bottom:1px solid;padding:10px 0;margin-top:20px;font-size:12px;max-width:100%}html.jbn-live .story-fallback-image{width:100%;margin-top:30px;max-height:420px;object-fit:cover}html.jbn-live .story-art{position:relative;min-height:400px}html.jbn-live .story-art canvas{width:100%;height:100%;position:absolute;inset:0;pointer-events:none}html.jbn-live .story-pictures{position:absolute;inset:0;pointer-events:none}html.jbn-live .story-pictures img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}html.jbn-live .story-index{display:flex;gap:18px;align-items:center;font:10px monospace}html.jbn-live .story-index a{padding:12px 3px;color:inherit;opacity:.5;border-bottom:1px solid transparent}html.jbn-live .story-index a[aria-current=step]{opacity:1;border-bottom-color:currentColor}html.jbn-live .story-cue{font:9px monospace;opacity:.65;justify-self:end;align-self:end}html.jbn-live .story-anchor{position:absolute;left:0;width:1px;height:1px;pointer-events:none}html.jbn-live .story-sequence.is-live{height:calc(var(--chapter-count)*96svh)}html.jbn-live .story-sequence.story-compact.is-live{height:calc(var(--chapter-count)*72svh)}html.jbn-live .is-live .story-layout{position:sticky;top:0;height:100svh;max-height:1100px;min-height:630px;display:block;padding:0 var(--gutter);overflow:hidden}html.jbn-live .is-live .story-copy{position:absolute;left:var(--gutter);width:42%;top:50%;height:var(--story-copy-height,370px);transform:translateY(-50%);z-index:4}html.jbn-live .is-live .story-chapter{position:absolute;inset:0 0 auto;padding:0;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .32s,transform .45s}html.jbn-live .is-live .story-chapter.is-current{opacity:1;transform:none;pointer-events:auto}html.jbn-live .is-live .story-fallback-image{display:none}html.jbn-live .is-live .story-art{position:absolute;left:49%;right:0;top:9%;bottom:9%;min-height:0}html.jbn-live .is-live .story-pictures{inset:20% 12% 20% 9%;clip-path:circle(0%);transition:clip-path .15s linear}html.jbn-live .is-live .story-pictures img{transition:opacity .5s,transform .8s;transform:scale(1.035)}html.jbn-live .is-live .story-pictures img.is-current{opacity:1;transform:scale(1)}html.jbn-live .is-live .story-index{position:absolute;bottom:28px;left:var(--gutter);z-index:6}html.jbn-live .is-live .story-cue{position:absolute;bottom:42px;right:var(--gutter);z-index:5}html.jbn-live .story-reader{margin-left:15px;opacity:.6;font:9px monospace;text-decoration:underline;text-underline-offset:4px}html.jbn-live .story-reader:hover{opacity:1}html.jbn-live .story-sequence:not(.is-live) .story-index{grid-column:1/-1}html.jbn-live .story-sequence:not(.is-live) .story-art{position:sticky;top:70px;align-self:start}html.jbn-live .story-sequence:not(.is-live) .story-cue{display:none}html.jbn-live .story-sequence:not(.is-live) .story-pictures{display:none}html.jbn-live .story-sequence:not(.is-live) .story-copy{min-width:0}html.jbn-live .story-sequence a:focus-visible,html.jbn-live .story-sequence button:focus-visible{outline:2px solid #a86480;outline-offset:5px}
@media(max-width:760px){html.jbn-live .story-layout{grid-template-columns:1fr;padding:35px var(--gutter);gap:20px}html.jbn-live .story-chapter h2{font-size:33px;line-height:1.08;margin:18px 0}html.jbn-live .story-chapter p{font-size:14px;line-height:1.65}html.jbn-live .story-chapter>.eyebrow{font-size:8px;line-height:1.4}html.jbn-live .story-link{font-size:11px;margin-top:13px;padding-block:8px;gap:20px}html.jbn-live .story-sequence.is-live{height:calc(var(--chapter-count)*100svh)}html.jbn-live .story-sequence.story-compact.is-live{height:calc(var(--chapter-count)*78svh)}html.jbn-live .is-live .story-layout{height:100svh;min-height:620px;max-height:none}html.jbn-live .is-live .story-copy{left:var(--gutter);right:var(--gutter);width:auto;top:32px;transform:none;height:var(--story-copy-height,290px)}html.jbn-live .is-live .story-art{left:0;right:0;top:calc(var(--story-copy-height,290px) + 48px);bottom:45px;min-height:120px}html.jbn-live .is-live .story-pictures{inset:6% 18%}html.jbn-live .is-live .story-index{bottom:13px;gap:15px}html.jbn-live .is-live .story-cue{bottom:26px;font-size:8px}html.jbn-live .story-reader{font-size:8px;margin-left:8px}html.jbn-live .story-sequence:not(.is-live) .story-art{display:none}html.jbn-live .story-sequence:not(.is-live) .story-reader{display:none}html.jbn-live .story-fallback-image{max-height:300px}html.jbn-live .story-sequence.tone-night .story-chapter h2{max-width:330px}}
@media(max-width:350px){html.jbn-live .story-chapter h2{font-size:29px}html.jbn-live .story-chapter p{font-size:13px;line-height:1.6}html.jbn-live .is-live .story-copy{top:26px}html.jbn-live .story-index{gap:12px}html.jbn-live .story-reader{max-width:70px;line-height:1.4;margin-left:2px}html.jbn-live .is-live .story-cue{font-size:7px;max-width:80px;text-align:right}html.jbn-live .story-chapter .story-link{font-size:10px}}
@media(prefers-reduced-motion:reduce){html.jbn-live .story-sequence.is-live{height:auto!important}html.jbn-live .story-chapter,html.jbn-live .story-pictures img{transition:none!important}}

html.jbn-live .story-logo-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}html.jbn-live .is-live .story-logo-fallback{display:none}html.jbn-live .story-art canvas{z-index:2}html.jbn-live .story-pictures{z-index:1}

html.jbn-live .tone-night .story-art canvas{mask-image:radial-gradient(ellipse at center,#000 30%,#000 57%,transparent 83%)}html.jbn-live body[data-section="about"]{background-image:radial-gradient(ellipse at 85% 0,#d9c9e977,transparent 65%),radial-gradient(ellipse at 0 0,#f0d2bd77,transparent 60%)}html.jbn-live body[data-section="work"]{background-image:radial-gradient(ellipse at 100% 0,#d1dce877,transparent 65%)}html.jbn-live body[data-section="cases"],html.jbn-live body[data-section="offer"]{background-image:radial-gradient(ellipse at 0 0,#e7d9b877,transparent 65%),radial-gradient(ellipse at 100% 0,#cbdcde66,transparent 60%)}html.jbn-live body[data-section="resources"]{background-image:radial-gradient(ellipse at 0 0,#cfe3d288,transparent 65%),radial-gradient(ellipse at 100% 0,#c5d9eb77,transparent 60%)}html.jbn-live body[data-section="contact"]{background-image:radial-gradient(ellipse at 0 0,#f1d2bc88,transparent 65%),radial-gradient(ellipse at 100% 0,#dbcce777,transparent 60%)}html.jbn-live body[data-section]{background-repeat:no-repeat;background-size:100% 900px}

html.jbn-live .work-direct{display:inline-block;margin-top:20px;font-size:12px;border-bottom:1px solid;padding-bottom:5px}html.jbn-live .practice-art>span{font-size:clamp(21px,3vw,45px)}
@media(max-width:760px){html.jbn-live .story-chapter p{font-size:15px;line-height:1.65}}@media(max-width:350px){html.jbn-live .story-chapter p{font-size:14px;line-height:1.6}}
/* About: one edge-to-edge black field, with the story in its lower-right quiet space. */
html.jbn-live .story-sequence[data-mode="logo"]{background:#000}html.jbn-live .story-sequence[data-mode="logo"].is-live .story-layout{max-height:none;height:100svh;min-height:620px;background:#000}html.jbn-live .story-sequence[data-mode="logo"].is-live .story-art{inset:0;min-height:0}html.jbn-live .story-sequence[data-mode="logo"] .story-art canvas{mask-image:none}html.jbn-live .story-sequence[data-mode="logo"].is-live .story-pictures{display:none}html.jbn-live .story-sequence[data-mode="logo"].is-live .story-copy{left:auto;right:var(--gutter);top:auto;bottom:clamp(110px,11svh,165px);width:38%;max-width:530px;transform:none;text-shadow:0 2px 25px #000}html.jbn-live .story-sequence[data-mode="logo"] .story-chapter h2{font-size:clamp(31px,3.1vw,51px);max-width:530px}html.jbn-live .story-sequence[data-mode="logo"] .story-chapter p{font-size:15px;line-height:1.75;max-width:470px}html.jbn-live .story-sequence[data-mode="logo"] .story-chapter>.eyebrow{color:#c4c5c8}html.jbn-live .story-sequence[data-mode="logo"].is-live .story-copy:before{content:'';position:absolute;inset:-45px -30px;background:radial-gradient(ellipse,#0009,transparent 72%);z-index:-1;pointer-events:none}
@media(max-width:760px){html.jbn-live .story-sequence[data-mode="logo"].is-live .story-copy{left:var(--gutter);right:var(--gutter);width:auto;max-width:450px;top:auto;bottom:88px}html.jbn-live .story-sequence[data-mode="logo"] .story-chapter h2{font-size:31px;max-width:none}html.jbn-live .story-sequence[data-mode="logo"] .story-chapter p{font-size:15px;line-height:1.65}html.jbn-live .story-sequence[data-mode="logo"].is-live .story-art{inset:0}html.jbn-live .story-sequence[data-mode="logo"] .story-chapter h2{margin:18px 0}html.jbn-live .story-sequence[data-mode="logo"].is-live .story-copy:before{inset:-20px -25px;background:radial-gradient(ellipse,#000a,transparent 78%)}}
@media(max-width:350px){html.jbn-live .story-sequence[data-mode="logo"] .story-chapter h2{font-size:27px}html.jbn-live .story-sequence[data-mode="logo"] .story-chapter p{font-size:14px;line-height:1.6}html.jbn-live .story-sequence[data-mode="logo"].is-live .story-copy{bottom:82px}}
html.jbn-live .story-sequence[data-mode="logo"]:not(.is-live) .story-copy{opacity:1!important}

/* One photograph resolves the whole sequence; the graphic has room to develop. */
html.jbn-live .story-sequence:not([data-mode="logo"]).is-live .story-art{left:44%;top:2%;bottom:2%}
html.jbn-live .story-sequence:not([data-mode="logo"]).is-live .story-pictures{inset:18% 9%;}
html.jbn-live .story-sequence:not([data-mode="logo"]) .story-pictures img{opacity:1}
@media(max-width:760px){html.jbn-live .story-sequence:not([data-mode="logo"]).is-live .story-art{left:0;right:0;top:calc(var(--story-copy-height,290px) + 36px);bottom:43px}html.jbn-live .story-sequence:not([data-mode="logo"]).is-live .story-pictures{inset:7% 10%}}

html.jbn-live .story-pictures{overflow:hidden}

/* Chapters hand over through their words; complete paragraphs never crossfade over each other. */
html.jbn-live .is-live .story-chapter{transition:none;transform:none}html.jbn-live .chapter-word{display:inline-block;white-space:nowrap;transform-origin:center;vertical-align:baseline}
@media(prefers-reduced-motion:reduce){html.jbn-live .chapter-word{transform:none!important;filter:none!important;opacity:1!important}}
/* Keep the return control available after choosing the mobile reading view. */
html.jbn-live .story-sequence:not(.is-live) .story-reader:not([hidden]){display:inline-block}

html.jbn-live .story-index a{opacity:.72}html.jbn-live .story-index a[aria-current]{opacity:1}

/* Keep pinned controls inside compact phone viewports. */
@media(max-width:760px){html.jbn-live .is-live .story-layout,html.jbn-live .story-sequence[data-mode="logo"].is-live .story-layout{min-height:min(620px,100svh)}}

@media(max-width:760px){html.jbn-live .story-index a,html.jbn-live .story-reader{min-height:44px;display:inline-flex;align-items:center}html.jbn-live .story-index{bottom:7px}html.jbn-live .story-reader{padding-block:7px}}

/* Resources: a composed mobile still, rather than a viewport-height portrait zoom. */
@media(max-width:760px){html.jbn-live body[data-section="resources"] .story-sequence.is-live .story-pictures{inset:auto;left:50%;top:50%;height:86%;max-height:240px;width:auto;max-width:80%;aspect-ratio:4/3;transform:translate(-50%,-50%)}}

@media(max-width:760px){html.jbn-live body[data-section="resources"] .story-sequence.is-live .story-pictures img{max-width:none}}

/* Four homepage chapters: keep the approved copy and controls comfortable on phones. */
html.jbn-live .story-sequence[data-story="home"] .story-pictures{transition:none}
@media(max-width:760px){
 html.jbn-live .story-sequence[data-story="home"] .story-index{right:var(--gutter);gap:8px}
 html.jbn-live .story-sequence[data-story="home"] .story-index>a{min-width:30px;justify-content:center;padding:10px 0}
 html.jbn-live .story-sequence[data-story="home"] .story-reader{margin-left:auto;max-width:100px;text-align:left;line-height:1.35}
 html.jbn-live .story-sequence[data-story="home"] .story-cue{display:none}
}
@media(max-width:760px) and (max-height:700px){
 html.jbn-live .story-sequence[data-story="home"] .story-chapter h2{font-size:clamp(25px,7.5vw,29px);line-height:1.08;margin:15px 0}
 html.jbn-live .story-sequence[data-story="home"] .story-chapter p{font-size:14px;line-height:1.6}
 html.jbn-live .story-sequence[data-story="home"] .story-link{margin-top:10px;min-height:40px}
}
@media(max-width:350px) and (max-height:700px){html.jbn-live .story-sequence[data-story="home"] .story-chapter p{font-size:13px;line-height:1.6}}