/* 0.17 additions. Each illustration is paired with adjacent source copy.
   The approved Services visuals and their stylesheet are unchanged. */
.jl-site.jl-site .studio-refill-art{position:relative;width:100%;min-width:0;max-width:440px;padding:0;justify-self:end}
.jl-site.jl-site .studio-refill-art>.e-con-inner{display:block;width:100%;padding:0}
.jl-site.jl-site .studio-refill-art .studio-line-image{display:block;width:100%;height:auto;margin:0}
.jl-site.jl-site .studio-refill-art img{display:block;width:100%;height:auto;max-height:300px;object-fit:contain}
.jl-site.jl-site .studio-head-wide,.jl-site.jl-site .studio-head-wide>.e-con-inner{grid-template-columns:minmax(0,1fr) minmax(300px,42%);gap:clamp(28px,4vw,64px)}
.jl-site.jl-site .studio-build-triptych,.jl-site.jl-site .studio-build-triptych>.e-con-inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:8px;width:100%;max-width:520px;padding:12px 0 16px}
.jl-site.jl-site .studio-build-triptych{border-bottom:1px solid #a68a6b66}
.jl-site.jl-site .studio-build-triptych:has(>.e-con-inner){display:block;padding:0}
.jl-site.jl-site .studio-build-triptych .studio-line-image{min-width:0;width:100%;height:130px;object-fit:contain}
.jl-site.jl-site .studio-build-triptych .studio-line-image img{height:130px;object-fit:contain}
.jl-site.jl-site .studio-build-triptych .studio-context-2{align-self:start}
.jl-site.jl-site .studio-build-triptych .studio-context-2.studio-entering{animation-delay:90ms}
.jl-site.jl-site .studio-build-triptych .studio-context-3.studio-entering{animation-delay:180ms}
.jl-site.jl-site .studio-refill-board{background:none;border:0;padding:0}
.jl-site.jl-site .studio-refill-board img{max-height:220px}
/* Small tools belong to Kevin's experience paragraph, clear of his portrait. */
.jl-site.jl-site .studio-founder-tools{width:230px;max-width:65%;margin:10px 0 18px;justify-self:start}
.jl-site.jl-site .studio-founder-tools img{max-height:150px;object-position:left center}
.jl-site.jl-site.page-about #story>.studio-story-grid{max-width:var(--measure)}
.jl-site.jl-site .studio-story-grid,.jl-site.jl-site .studio-story-grid>.e-con-inner{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(220px,.75fr);gap:clamp(32px,7vw,100px);align-items:center}
.jl-site.jl-site .studio-story-grid:has(>.e-con-inner){display:block}
.jl-site.jl-site .studio-story-grid>.e-con-inner{width:100%;padding:0}
.jl-site.jl-site .studio-refill-copy{min-width:0;width:100%}
.jl-site.jl-site .studio-refill-copy>.e-con-inner{display:block;width:100%;padding:0}
.jl-site.jl-site .studio-story-aside{padding:24px 0 24px 24px;border-left:1px solid #a68a6b66}
/* Enquiry art occupies a genuine second column, never behind the button. */
.jl-site.jl-site .studio-refill-cta,.jl-site.jl-site .studio-refill-cta>.e-con-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,30%);gap:clamp(30px,6vw,90px);align-items:center}
.jl-site.jl-site .studio-refill-cta:has(>.e-con-inner){display:block}
.jl-site.jl-site .studio-refill-cta>.e-con-inner{width:100%;padding:0}
.jl-site.jl-site .studio-brief-card{padding:22px 16px;background:#eee6d8;border:1px solid #b6a084;transform:rotate(2deg)}
.jl-site.jl-site .studio-brief-card::before{content:'';position:absolute;width:40px;height:10px;background:#a98a603b;left:calc(50% - 20px);top:-5px;pointer-events:none}
.jl-site.jl-site .studio-brief-card img{max-height:240px}
.jl-site.jl-site .hero-grid.noimg.studio-refill-hero,.jl-site.jl-site .hero-grid.noimg.studio-refill-hero>.e-con-inner{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:clamp(40px,7vw,100px);align-items:center;max-width:none}
.jl-site.jl-site .hero-grid.noimg.studio-refill-hero:has(>.e-con-inner){display:block}
.jl-site.jl-site .hero-grid.noimg.studio-refill-hero>.e-con-inner{width:100%;padding:0}
.jl-site.jl-site .hero-grid.noimg.studio-refill-hero h1{font-size:clamp(38px,4.5vw,68px)}
.jl-site.jl-site .studio-enquiry-art{max-width:460px;padding:20px 0;border-block:1px solid #a68a6b55}
/* Two actual views of Bachang, kept as separate editable native Images.
   Frame rotation belongs to Containers; only inner Images own entry motion. */
.jl-site.jl-site .studio-project-archive{position:relative;width:100%;max-width:480px;aspect-ratio:1.15;justify-self:end;margin:12px 0;isolation:isolate}
.jl-site.jl-site .studio-project-archive>.e-con-inner{position:absolute;inset:0;width:100%;height:100%;padding:0;display:block}
.jl-site.jl-site .studio-archive-frame{position:absolute;width:72%;padding:8px 8px 18px;background:#fffdf8;border:1px solid #a68a6b55;box-shadow:0 12px 26px #2218160d}
.jl-site.jl-site .studio-archive-frame>.e-con-inner{display:block;width:100%;padding:0}
.jl-site.jl-site .studio-archive-1{top:3%;left:2%;transform:rotate(-5deg)}
.jl-site.jl-site .studio-archive-2{right:1%;bottom:3%;transform:rotate(4deg);z-index:1}
.jl-site.jl-site .studio-archive-frame .studio-real-photo{display:block;width:100%;height:auto;max-height:none;object-fit:contain;margin:0;--studio-entry-opacity:1}
.jl-site.jl-site img.studio-real-photo{opacity:1}
.jl-site.jl-site .studio-archive-frame .studio-real-photo img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;opacity:1}
.jl-site.jl-site .studio-archive-frame .studio-real-photo>.elementor-widget-container{height:100%}
.jl-site.jl-site .studio-archive-2 .studio-real-photo.studio-entering{animation-delay:130ms}
@media(max-width:1100px){
 .jl-site.jl-site .studio-head-wide,.jl-site.jl-site .studio-head-wide>.e-con-inner{grid-template-columns:minmax(0,1fr) minmax(260px,38%);gap:30px}
 .jl-site.jl-site .studio-build-triptych .studio-line-image,.jl-site.jl-site .studio-build-triptych .studio-line-image img{height:105px}
 .jl-site.jl-site .studio-story-grid,.jl-site.jl-site .studio-story-grid>.e-con-inner{grid-template-columns:minmax(0,1fr) 240px;gap:34px}
 .jl-site.jl-site .studio-refill-cta,.jl-site.jl-site .studio-refill-cta>.e-con-inner{grid-template-columns:minmax(0,1fr) 240px;gap:36px}
 .jl-site.jl-site .hero-grid.noimg.studio-refill-hero,.jl-site.jl-site .hero-grid.noimg.studio-refill-hero>.e-con-inner{grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr);gap:35px}
}
@media(max-width:760px){
 .jl-site.jl-site .studio-head-wide,.jl-site.jl-site .studio-head-wide>.e-con-inner,.jl-site.jl-site .studio-story-grid,.jl-site.jl-site .studio-story-grid>.e-con-inner,.jl-site.jl-site .studio-refill-cta,.jl-site.jl-site .studio-refill-cta>.e-con-inner,.jl-site.jl-site .hero-grid.noimg.studio-refill-hero,.jl-site.jl-site .hero-grid.noimg.studio-refill-hero>.e-con-inner{grid-template-columns:1fr;gap:26px}
 .jl-site.jl-site .studio-build-triptych{max-width:420px;justify-self:start}
 .jl-site.jl-site .studio-build-triptych .studio-line-image,.jl-site.jl-site .studio-build-triptych .studio-line-image img{height:100px}
 .jl-site.jl-site .studio-refill-board{max-width:280px}
 .jl-site.jl-site .studio-refill-board img{max-height:165px}
 .jl-site.jl-site .studio-founder-tools{width:210px;max-width:70%;margin:8px 0 16px}
 .jl-site.jl-site .studio-story-aside{max-width:310px;justify-self:start;padding:0 0 0 18px}
 .jl-site.jl-site .studio-story-aside img{max-height:190px}
 .jl-site.jl-site .studio-brief-card{width:250px;max-width:85%;justify-self:end;padding:12px 10px;margin:6px 6px 0 0}
 .jl-site.jl-site .studio-brief-card img{max-height:160px}
 .jl-site.jl-site .hero-grid.noimg.studio-refill-hero h1{font-size:37px}
 .jl-site.jl-site.zh .hero-grid.noimg.studio-refill-hero h1{font-size:32px}
 .jl-site.jl-site .studio-enquiry-art{width:300px;max-width:100%;justify-self:start;padding:12px 0}
 .jl-site.jl-site .studio-enquiry-art img{max-height:190px}
 .jl-site.jl-site .studio-project-archive{max-width:340px;justify-self:start;margin:10px 0 4px;aspect-ratio:1.2}
 .jl-site.jl-site .studio-archive-frame{padding:6px 6px 12px}
}