:root{--bg:#f1f0ec;--ink:#111;--muted:#777;--line:#c9c7c0;--pad:clamp(22px,4vw,64px)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Arial,sans-serif;font-size:15px}a{color:inherit;text-decoration:none}img{display:block;width:100%;height:auto}
.site-header{position:sticky;top:0;z-index:50;height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--pad);border-bottom:1px solid var(--line);background:rgba(241,240,236,.92);backdrop-filter:blur(12px)}
.brand{font:600 24px/1 "Space Grotesk";letter-spacing:-.06em}.brand span{font-size:8px;vertical-align:top;margin-left:3px}.nav{display:flex;gap:28px;font-size:12px;text-transform:uppercase}.nav a:hover{opacity:.45}.lang{justify-self:end;font-size:11px}.lang a{opacity:.35}.lang a.active{opacity:1}.lang span{margin:0 5px}
.section{padding:42px var(--pad);border-bottom:1px solid var(--line)}.hero{min-height:calc(100vh - 76px);display:grid;grid-template-rows:auto 1fr auto auto}.hero-index{font-size:11px}.hero h1{font:500 clamp(64px,13vw,190px)/.79 "Space Grotesk";letter-spacing:-.085em;margin:5vh 0 7vh;text-transform:uppercase}.hero-bottom{display:grid;grid-template-columns:1fr 1fr;gap:6vw;border-top:1px solid var(--line);padding-top:18px}.hero-role,.hero-intro{margin:0;max-width:580px;line-height:1.45}.hero-intro{font-size:clamp(16px,2vw,26px);letter-spacing:-.03em}.scroll{font-size:10px;margin-top:50px}
.section-head{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.08em;padding-bottom:28px}.filters{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 32px}.filter{font:500 10px Inter;border:1px solid var(--ink);background:transparent;padding:8px 12px;cursor:pointer}.filter.active,.filter:hover{background:var(--ink);color:var(--bg)}
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:60px 20px}.project-card{opacity:0;transform:translateY(18px);transition:.6s}.project-card.in,.demo-card{opacity:1;transform:none}.project-image{overflow:hidden;background:#ddd;aspect-ratio:4/3}.project-image img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}.project-card:hover img{transform:scale(1.025)}.placeholder{height:100%;display:flex;align-items:flex-end;justify-content:space-between;padding:20px;background:#d9d7d0;font:500 clamp(18px,3vw,44px) "Space Grotesk";letter-spacing:-.05em}.placeholder span{font-size:11px;align-self:flex-start}.project-meta{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--ink);padding-top:9px;margin-top:9px}.project-meta h3{font:500 15px "Space Grotesk";margin:0}.project-meta span{font-size:10px;text-align:right}
.expertise{padding-bottom:90px}.expertise-row{display:grid;grid-template-columns:80px 1fr 1fr;gap:20px;border-top:1px solid var(--ink);padding:20px 0 36px;opacity:0;transform:translateY(12px);transition:.5s}.expertise-row.in{opacity:1;transform:none}.expertise-row span{font-size:10px}.expertise-row h3{font:500 clamp(28px,4vw,64px)/1 "Space Grotesk";letter-spacing:-.05em;margin:0}.expertise-row p{margin:5px 0 0;line-height:1.5;max-width:520px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:8vw;opacity:0;transition:.7s}.about-grid.in{opacity:1}.about h2,.footer h2{font:500 clamp(50px,7vw,110px)/.88 "Space Grotesk";letter-spacing:-.07em;margin:20px 0}.about-copy{padding-top:20px}.about-copy>p{font-size:clamp(17px,2vw,25px);line-height:1.4;letter-spacing:-.025em;max-width:700px}.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:70px}.facts div{border-top:1px solid var(--ink);padding-top:10px}.facts b{display:block;font:500 25px "Space Grotesk"}.facts span{font-size:10px}
.footer{padding-top:55px}.footer-grid{display:grid;grid-template-columns:2fr 1fr}.contact{align-self:end;display:flex;flex-direction:column;gap:12px}.contact a{font-size:18px;border-bottom:1px solid var(--ink);padding-bottom:5px}.contact p{color:var(--muted)}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--ink);padding-top:10px;margin-top:80px;font-size:10px}
.single-project .project-top h1{font:500 clamp(64px,10vw,150px)/.85 "Space Grotesk";letter-spacing:-.07em;margin:8vh 0}.project-info{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border-top:1px solid var(--ink);padding:14px 0 40px}.project-info small{font-size:9px}.project-info p{font-size:14px}.project-hero{margin:0 calc(var(--pad)*-1)}.project-content{max-width:1000px;margin:80px auto;font-size:18px;line-height:1.6}.project-content .wp-block-image{margin:60px 0}.back{display:inline-block;border-bottom:1px solid;padding-bottom:5px;margin:50px 0}
@media(max-width:760px){.site-header{grid-template-columns:1fr auto}.nav{display:none}.hero{min-height:85vh}.hero-bottom,.about-grid,.footer-grid{grid-template-columns:1fr}.hero-role{margin-bottom:35px}.project-grid{grid-template-columns:1fr}.expertise-row{grid-template-columns:45px 1fr}.expertise-row p{grid-column:2}.facts{grid-template-columns:1fr}.project-info{grid-template-columns:1fr}.section-head span:last-child{display:none}.hero h1{font-size:18vw}.footer .contact{margin-top:40px}}

/* v1.1 case-study system */
.case-feature{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(28px,6vw,100px);padding:70px 0 110px;border-top:1px solid var(--ink)}.case-feature.reverse{grid-template-columns:1.28fr .72fr}.case-feature.reverse .case-copy{order:2}.case-feature.reverse .case-media{order:1}.case-copy{position:sticky;top:115px;align-self:start}.case-no{font-size:10px}.case-copy h2{font:500 clamp(54px,7vw,110px)/.82 "Space Grotesk";letter-spacing:-.075em;margin:30px 0}.case-copy p{font-size:clamp(16px,1.6vw,22px);line-height:1.45;max-width:520px}.tags{margin-top:38px;padding-top:10px;border-top:1px solid var(--ink);font-size:9px;letter-spacing:.06em}.case-media{display:grid;gap:18px}.case-media img{background:#fff;aspect-ratio:1/1;object-fit:cover}.static-grid .project-image{background:#fff}.future-grid{display:grid;grid-template-columns:1fr 1fr;gap:8vw;padding:50px 0 90px}.future-grid h2{font:500 clamp(45px,6vw,90px)/.9 "Space Grotesk";letter-spacing:-.06em;margin:0}.future-grid p{font-size:clamp(17px,2vw,25px);line-height:1.45;margin:0}@media(max-width:760px){.case-feature,.case-feature.reverse{grid-template-columns:1fr;padding:45px 0 75px}.case-feature.reverse .case-copy,.case-feature.reverse .case-media{order:initial}.case-copy{position:static}.case-copy h2{font-size:15vw}.future-grid{grid-template-columns:1fr}}

/* v1.2 — inFakt editorial case */
.infakt-case{background:#e9e8e3;margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);padding-left:var(--pad);padding-right:var(--pad)}
.infakt-media{display:grid;gap:18px}.ebook-covers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end}.ebook-covers img{aspect-ratio:1/1;object-fit:cover;background:#0d91df}.ebook-insides{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ebook-insides img{aspect-ratio:1/1;object-fit:cover;background:white}.case-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:38px}.case-stats div{border-top:1px solid var(--ink);padding-top:9px}.case-stats b{display:block;font:500 28px "Space Grotesk"}.case-stats span{font-size:9px;text-transform:uppercase;letter-spacing:.05em}
@media(max-width:760px){.ebook-covers{grid-template-columns:repeat(3,1fr)}.ebook-insides{grid-template-columns:1fr}.infakt-case{margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);padding-left:var(--pad);padding-right:var(--pad)}}
\n\n/* v1.3 — Lexus / Figma digital production system */\n.figma-case{background:#111;color:#f1f0ec}.figma-case .section-head{border-color:#444}.figma-intro{display:grid;grid-template-columns:1.05fr .95fr;gap:8vw;padding:35px 0 80px}.figma-intro h2{font:500 clamp(58px,8vw,126px)/.78 "Space Grotesk";letter-spacing:-.08em;margin:28px 0 0}.figma-intro p{font-size:clamp(17px,2vw,26px);line-height:1.4;letter-spacing:-.025em;margin:0;max-width:690px}.figma-case .tags{border-color:#777}.format-system{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;align-items:start;border-top:1px solid #555;padding-top:16px}.format-label{grid-column:1/4;display:flex;flex-direction:column;gap:6px}.format-label b{font:500 clamp(28px,4vw,60px) "Space Grotesk"}.format-label span{font-size:10px;text-transform:uppercase;letter-spacing:.07em}.banner{position:relative;overflow:hidden;background:#292929;border:1px solid #444}.banner img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform .7s}.banner:hover img{transform:scale(1.035)}.banner span{position:absolute;left:7px;bottom:6px;background:#111;color:#fff;padding:4px 6px;font-size:8px;letter-spacing:.06em}.b970{grid-column:4/13;aspect-ratio:970/250}.b750{grid-column:1/9;aspect-ratio:750/200;margin-top:12px}.b300x600{grid-column:9/11;aspect-ratio:1/2;margin-top:12px}.b300x250{grid-column:11/13;aspect-ratio:300/250;margin-top:12px}.social-square{grid-column:1/5;aspect-ratio:1/1;margin-top:12px}.social-portrait{grid-column:5/9;aspect-ratio:4/5;margin-top:12px}.social-story{grid-column:9/12;aspect-ratio:9/16;margin-top:12px}.workflow-strip{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #555;border-bottom:1px solid #555;margin-top:70px;padding:18px 0;font-size:9px;letter-spacing:.08em}.workflow-strip i{font-style:normal;color:#777}.figma-note{max-width:690px;margin:28px 0 10px;color:#aaa;font-size:11px;line-height:1.5}.nav a[href*="#expertise"]{}\n@media(max-width:760px){.figma-intro{grid-template-columns:1fr;padding-bottom:50px}.figma-intro h2{font-size:16vw}.format-system{grid-template-columns:repeat(6,1fr)}.format-label{grid-column:1/7}.b970,.b750{grid-column:1/7}.b300x600{grid-column:1/3}.b300x250{grid-column:3/7}.social-square{grid-column:1/4}.social-portrait{grid-column:4/7}.social-story{grid-column:2/6}.workflow-strip{overflow-x:auto;justify-content:flex-start;white-space:nowrap}.workflow-strip span,.workflow-strip i{flex:0 0 auto}}\n
/* v1.3.1 — calmer typography + refined artwork presentation */
.hero h1{font-size:clamp(58px,10.5vw,154px);line-height:.9;letter-spacing:-.072em;margin:6vh 0 8vh}
.case-copy h2{font-size:clamp(46px,5.8vw,88px);line-height:.94;letter-spacing:-.06em}
.figma-intro h2{font-size:clamp(50px,6.6vw,102px);line-height:.9;letter-spacing:-.065em}
.about h2,.footer h2{font-size:clamp(44px,6vw,88px);line-height:.96;letter-spacing:-.058em}
.future-grid h2{font-size:clamp(40px,5vw,76px);line-height:.98;letter-spacing:-.052em}
.single-project .project-top h1{font-size:clamp(54px,8vw,118px);line-height:.94;letter-spacing:-.06em}
.expertise-row h3{font-size:clamp(27px,3.5vw,52px);line-height:1.04;letter-spacing:-.045em}
.hero-intro,.case-copy p,.figma-intro p,.about-copy>p,.future-grid p{line-height:1.58}

/* More editorial breathing room around portfolio visuals */
.case-media{gap:28px;padding:clamp(12px,2vw,28px);background:rgba(255,255,255,.28)}
.case-media img{aspect-ratio:auto;min-height:320px;max-height:760px;object-fit:contain;background:#fff;padding:clamp(10px,1.6vw,22px);box-shadow:0 18px 50px rgba(0,0,0,.07);transition:transform .6s ease,box-shadow .6s ease}
.case-media img:hover{transform:translateY(-3px);box-shadow:0 24px 65px rgba(0,0,0,.11)}
.case-feature:nth-of-type(even) .case-media img:nth-child(2){transform:translateX(clamp(-8px,-1vw,-18px))}
.case-feature:nth-of-type(odd) .case-media img:nth-child(2){transform:translateX(clamp(8px,1vw,18px))}
.project-image{background:#e4e2dc;padding:clamp(7px,1vw,14px)}
.project-image img{object-fit:contain;background:#fff}
.project-card:hover img{transform:scale(1.012)}

/* inFakt: treat pages as designed objects rather than cropped thumbnails */
.ebook-covers,.ebook-insides{gap:18px}
.ebook-covers img,.ebook-insides img{aspect-ratio:auto;object-fit:contain;padding:10px;background:#f7f7f5;box-shadow:0 15px 40px rgba(0,0,0,.08)}
.ebook-covers img:nth-child(2){transform:translateY(24px)}
.ebook-insides img:nth-child(2){transform:translateY(18px)}

/* Figma system: cleaner frames and less aggressive image cropping */
.figma-case .banner{background:#1b1b1b;border-color:#3c3c3c;padding:5px}
.figma-case .banner img{object-fit:contain;background:#222;filter:saturate(.92);transform:none}
.figma-case .banner:hover img{transform:scale(1.012)}
.format-system{gap:16px}

@media(max-width:760px){
 .hero h1{font-size:15vw;line-height:.94;letter-spacing:-.065em}
 .case-copy h2{font-size:13vw;line-height:.98}
 .figma-intro h2{font-size:14vw;line-height:.96}
 .case-media{padding:10px;gap:14px}
 .case-media img{min-height:0;padding:8px;box-shadow:0 10px 30px rgba(0,0,0,.07)}
 .case-feature:nth-of-type(even) .case-media img:nth-child(2),.case-feature:nth-of-type(odd) .case-media img:nth-child(2),.ebook-covers img:nth-child(2),.ebook-insides img:nth-child(2){transform:none}
}
\n\n/* v1.4 — editorial rhythm / asymmetry / pacing */
.section{padding-top:clamp(54px,7vw,108px);padding-bottom:clamp(62px,8vw,126px)}
.section-head{margin-bottom:clamp(24px,3vw,50px)}
.rhythm-work{padding-bottom:0}
.rhythm-work .case-feature{min-height:86vh;margin:0 calc(var(--pad)*-1);padding-left:var(--pad);padding-right:var(--pad);align-items:center}
.rhythm-work .case-feature+.case-feature{border-top:1px solid var(--ink)}
.case-wide{grid-template-columns:.58fr 1.42fr;padding-top:clamp(80px,10vw,150px);padding-bottom:clamp(100px,12vw,180px)}
.case-wide .case-media{grid-template-columns:1.15fr .85fr;align-items:end;background:transparent;padding:0}
.case-wide .case-media img:first-child{margin-top:0}.case-wide .case-media img:last-child{margin-top:clamp(80px,10vw,170px)}
.case-editorial{grid-template-columns:1.45fr .55fr;background:#e5e2db;padding-top:clamp(100px,13vw,190px);padding-bottom:clamp(90px,12vw,170px)}
.case-editorial .case-media{grid-template-columns:.8fr 1.2fr;background:transparent;padding:0;align-items:start}.case-editorial .case-media img:first-child{margin-top:clamp(80px,9vw,150px)}
.case-compact{min-height:auto!important;grid-template-columns:.9fr 1.1fr;padding-top:clamp(70px,8vw,115px)!important;padding-bottom:clamp(70px,8vw,115px)!important}.case-compact .case-copy{padding-left:8vw}.case-compact .case-media{grid-template-columns:1fr 1fr;background:transparent;padding:0}.case-compact .case-media img{max-height:560px}
.case-spread{min-height:100vh!important;padding-top:clamp(110px,14vw,210px)!important;padding-bottom:clamp(120px,15vw,230px)!important}.case-spread .case-copy{align-self:center}.case-spread .infakt-media{transform:rotate(-.4deg)}
.figma-case{padding-top:clamp(90px,11vw,170px);padding-bottom:clamp(110px,13vw,200px)}.figma-intro{min-height:52vh;align-items:end}.format-system{margin-top:clamp(30px,5vw,80px)}.workflow-strip{margin-top:clamp(80px,9vw,140px)}
.rhythm-selected{padding-top:clamp(100px,13vw,190px);padding-bottom:clamp(120px,14vw,210px)}.rhythm-selected .project-grid{grid-template-columns:1.2fr .8fr;gap:clamp(60px,9vw,150px) clamp(18px,3vw,48px);align-items:start}.rhythm-selected .project-card:nth-child(2){margin-top:clamp(110px,14vw,220px)}.rhythm-selected .project-card:nth-child(3){width:78%;justify-self:end}.rhythm-selected .project-card:nth-child(4){margin-top:clamp(50px,8vw,130px)}
.rhythm-expertise{padding-top:clamp(100px,12vw,180px);padding-bottom:clamp(100px,12vw,180px)}.rhythm-expertise .expertise-row{grid-template-columns:70px minmax(280px,.85fr) 1.15fr;padding:clamp(24px,3vw,48px) 0 clamp(38px,5vw,72px)}.rhythm-expertise .expertise-row:nth-child(even) h3{padding-left:6vw}.rhythm-expertise .expertise-row:nth-child(odd) p{padding-right:8vw}
.rhythm-about{background:#dedbd3;padding-top:clamp(120px,15vw,220px);padding-bottom:clamp(120px,15vw,220px)}.rhythm-about .about-grid{grid-template-columns:1.15fr .85fr;align-items:start}.rhythm-about .about-copy{padding-top:clamp(90px,12vw,180px)}.rhythm-about .facts{margin-top:clamp(80px,10vw,150px)}
.rhythm-future{padding-top:clamp(90px,12vw,180px);padding-bottom:clamp(110px,14vw,220px)}.rhythm-future .future-grid{grid-template-columns:1.25fr .75fr;align-items:end}.rhythm-future .future-grid p{padding-bottom:12px}
@media(max-width:760px){.rhythm-work .case-feature{min-height:auto;margin:0 calc(var(--pad)*-1);padding-left:var(--pad);padding-right:var(--pad)}.case-wide,.case-editorial,.case-compact,.case-spread{grid-template-columns:1fr!important;padding-top:70px!important;padding-bottom:85px!important}.case-wide .case-media,.case-editorial .case-media,.case-compact .case-media{grid-template-columns:1fr}.case-wide .case-media img:last-child,.case-editorial .case-media img:first-child{margin-top:0}.case-compact .case-copy{padding-left:0}.case-spread .infakt-media{transform:none}.rhythm-selected .project-grid{grid-template-columns:1fr;gap:60px}.rhythm-selected .project-card:nth-child(n){margin-top:0;width:100%;justify-self:stretch}.rhythm-expertise .expertise-row{grid-template-columns:45px 1fr}.rhythm-expertise .expertise-row:nth-child(even) h3,.rhythm-expertise .expertise-row:nth-child(odd) p{padding:0}.rhythm-about .about-grid,.rhythm-future .future-grid{grid-template-columns:1fr}.rhythm-about .about-copy{padding-top:30px}}

/* v1.4.1 — calmer display scale / tighter headline leading */
.hero h1{font-size:clamp(54px,9.3vw,138px);line-height:.86;letter-spacing:-.068em}
.case-copy h2{font-size:clamp(42px,5.1vw,78px);line-height:.90;letter-spacing:-.056em}
.figma-intro h2{font-size:clamp(46px,5.8vw,90px);line-height:.86;letter-spacing:-.06em}
.about h2,.footer h2{font-size:clamp(40px,5.3vw,78px);line-height:.92;letter-spacing:-.054em}
.future-grid h2{font-size:clamp(37px,4.5vw,68px);line-height:.94;letter-spacing:-.05em}
.single-project .project-top h1{font-size:clamp(48px,7vw,104px);line-height:.90;letter-spacing:-.056em}
.expertise-row h3{font-size:clamp(25px,3.1vw,47px);line-height:1;letter-spacing:-.042em}
/* Keep body copy airy while display typography becomes more compact. */
.hero-intro,.case-copy p,.figma-intro p,.about-copy>p,.future-grid p{line-height:1.52}
@media(max-width:760px){
 .hero h1{font-size:13.5vw;line-height:.90}
 .case-copy h2{font-size:11.8vw;line-height:.93}
 .figma-intro h2{font-size:12.8vw;line-height:.91}
 .about h2,.footer h2{font-size:11.8vw;line-height:.94}
}

/* v1.4.2 — final headline scale + real Lexus Figma/GDN/social assets */
.hero h1{font-size:clamp(50px,8.5vw,126px);line-height:.88}
.case-copy h2{font-size:clamp(39px,4.7vw,72px);line-height:.92}
.figma-intro h2{font-size:clamp(43px,5.25vw,82px);line-height:.89}
.about h2,.footer h2{font-size:clamp(38px,4.85vw,72px);line-height:.94}
.future-grid h2{font-size:clamp(35px,4.1vw,62px);line-height:.96}
.single-project .project-top h1{font-size:clamp(45px,6.4vw,96px);line-height:.92}
.expertise-row h3{font-size:clamp(24px,2.85vw,43px);line-height:1.02}
.figma-case .b970{aspect-ratio:970/300}
.figma-case .banner{padding:0;border-color:#3a3a3a}
.figma-case .banner img{display:block;width:100%;height:100%;object-fit:contain;background:#080a10}
.figma-case .banner span{background:rgba(10,10,10,.86);backdrop-filter:blur(4px)}
@media(max-width:760px){.hero h1{font-size:12.5vw;line-height:.92}.case-copy h2{font-size:11vw;line-height:.95}.figma-intro h2{font-size:11.8vw;line-height:.93}}


/* v1.4.3 — richer Lexus archive + Serenada packaging */
.lexus-archive-grid{grid-template-columns:1.15fr .85fr;gap:clamp(16px,2vw,30px);align-items:start;background:transparent;padding:0}
.lexus-archive-grid figure,.packaging-media figure{margin:0;position:relative}
.lexus-archive-grid .lexus-archive-main{grid-column:1/3}
.lexus-archive-grid img,.packaging-media img{width:100%;height:auto;max-height:none;min-height:0;object-fit:contain;padding:0;background:#fff}
.lexus-archive-grid figcaption,.packaging-media figcaption{font-size:9px;letter-spacing:.07em;text-transform:uppercase;margin-top:9px;border-top:1px solid var(--ink);padding-top:7px}
.lexus-archive-grid figure:nth-child(3){margin-top:clamp(50px,6vw,100px)}
.packaging-case{grid-template-columns:.72fr 1.28fr!important}
.packaging-media{grid-template-columns:1.35fr .65fr!important;gap:clamp(18px,3vw,44px)!important;align-items:end}
.packaging-media .packaging-main{align-self:start}
.packaging-media figure:nth-child(2){margin-bottom:clamp(30px,5vw,80px)}
@media(max-width:760px){.lexus-archive-grid,.packaging-media{grid-template-columns:1fr!important}.lexus-archive-grid .lexus-archive-main{grid-column:auto}.lexus-archive-grid figure:nth-child(3),.packaging-media figure:nth-child(2){margin:0}.packaging-case{grid-template-columns:1fr!important}}


/* v1.6.2 — HERO PORTRAIT: loaded from the stylesheet that WordPress actually enqueues. */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero-portrait{
 position:absolute!important;
 display:block!important;
 z-index:1!important;
 right:clamp(38px,6vw,110px)!important;
 top:clamp(18px,2.8vw,44px)!important;
 width:clamp(210px,23vw,350px)!important;
 height:clamp(285px,35vw,470px)!important;
 background-repeat:no-repeat!important;
 background-size:cover!important;
 background-position:center 16%!important;
 filter:grayscale(1) contrast(1.08)!important;
 opacity:.58!important;
 mix-blend-mode:multiply;
 pointer-events:none;
}
.hero>*:not(.hero-portrait){position:relative;z-index:3}
@media(max-width:760px){
 .hero-portrait{right:var(--pad)!important;top:48px!important;width:36vw!important;height:48vw!important;opacity:.38!important;background-position:center 12%!important}
}

/* v1.6.3 — smaller hero portrait; no other layout changes. */

/* v1.6.4 — keep portrait clear of the name on tablet/mobile; everything else unchanged. */
@media (min-width:761px) and (max-width:1180px){
 .hero h1{font-size:clamp(50px,7.7vw,91px)!important;line-height:.90!important;max-width:74%!important}
 .hero-portrait{right:var(--pad)!important;top:clamp(34px,5vw,62px)!important;width:clamp(180px,20vw,225px)!important;height:clamp(245px,29vw,330px)!important;opacity:.48!important}
}
@media (max-width:760px){
 .hero h1{font-size:11.2vw!important;line-height:.93!important;max-width:72%!important;margin-top:5vh!important}
 .hero-portrait{right:var(--pad)!important;top:82px!important;width:27vw!important;height:37vw!important;max-width:190px!important;max-height:260px!important;opacity:.34!important;background-position:center 12%!important}
}
@media (max-width:480px){
 .hero h1{font-size:10.8vw!important;max-width:70%!important}
 .hero-portrait{top:78px!important;width:25vw!important;height:35vw!important;opacity:.30!important}
}


/* v1.6.7 — unified portfolio frames: 1–3 images per section, no empty placeholders. */
.portfolio-frame-grid,
.integrum-gallery.portfolio-frame-grid,
.infakt-media.portfolio-frame-grid,
.dynamic-format-system{
 display:grid!important;
 grid-template-columns:repeat(2,minmax(0,1fr))!important;
 gap:clamp(14px,1.8vw,26px)!important;
 align-items:start!important;
 width:100%!important;
 transform:none!important;
}
.portfolio-frame-grid .portfolio-frame,
.dynamic-format-system .portfolio-frame{
 margin:0!important;
 width:100%!important;
 height:auto!important;
 aspect-ratio:8/5!important;
 overflow:hidden!important;
 background:#ecebe7!important;
 border:0!important;
 grid-column:auto!important;
 grid-row:auto!important;
 justify-self:stretch!important;
 align-self:start!important;
}
.integrum-gallery.portfolio-frame-grid .portfolio-frame{background:#0b244c!important}
.portfolio-frame-grid .portfolio-frame img,
.dynamic-format-system .portfolio-frame img{
 display:block!important;
 width:100%!important;
 height:100%!important;
 max-height:none!important;
 min-height:0!important;
 object-fit:contain!important;
 object-position:center!important;
 padding:0!important;
 margin:0!important;
 background:transparent!important;
}
/* One image gets a generous single frame; two/three keep exactly the same box size. */
.portfolio-frame-grid .portfolio-frame:only-child{grid-column:1/-1!important;width:min(100%,920px)!important;justify-self:end!important}
.reverse .portfolio-frame-grid .portfolio-frame:only-child{justify-self:start!important}
.dynamic-format-system .format-label{grid-column:1/-1!important;margin-bottom:4px}
.dynamic-format-system .portfolio-frame figcaption{position:static!important;background:transparent!important;padding:8px 0 0!important;font-size:9px!important;letter-spacing:.08em!important;color:inherit!important}
@media(max-width:760px){
 .portfolio-frame-grid,.integrum-gallery.portfolio-frame-grid,.infakt-media.portfolio-frame-grid,.dynamic-format-system{grid-template-columns:1fr!important}
 .portfolio-frame-grid .portfolio-frame:only-child{grid-column:auto!important;width:100%!important}
}

/* v1.6.9 — unified portfolio rhythm and frames. */
/* All portfolio image boxes use the same 8:5 frame, with no artificial white mat. */
.portfolio-frame-grid,
.integrum-gallery.portfolio-frame-grid,
.infakt-media.portfolio-frame-grid,
.dynamic-format-system{
 gap:clamp(16px,1.6vw,24px)!important;
}
.portfolio-frame-grid .portfolio-frame,
.dynamic-format-system .portfolio-frame,
.rhythm-selected .project-image.portfolio-frame{
 aspect-ratio:8/5!important;
 padding:0!important;
 border:0!important;
 box-shadow:none!important;
 background:#ecebe7!important;
 overflow:hidden!important;
}
.portfolio-frame-grid .portfolio-frame img,
.dynamic-format-system .portfolio-frame img,
.rhythm-selected .project-image.portfolio-frame img{
 width:100%!important;
 height:100%!important;
 margin:0!important;
 padding:0!important;
 border:0!important;
 box-shadow:none!important;
 background:transparent!important;
 object-fit:contain!important;
 object-position:center!important;
 transform:none!important;
}
/* Keep the dark Figma / Info Integrum presentation without empty black placeholders. */
.figma-case .dynamic-format-system .portfolio-frame{background:#171717!important}
.integrum-gallery.portfolio-frame-grid .portfolio-frame{background:#0b244c!important}

/* One consistent vertical rhythm for the four main case-study sections. */
.rhythm-work .case-feature,
.rhythm-work .case-wide,
.rhythm-work .case-editorial,
.rhythm-work .case-compact,
.rhythm-work .case-spread{
 min-height:auto!important;
 padding-top:clamp(82px,8vw,128px)!important;
 padding-bottom:clamp(82px,8vw,128px)!important;
 align-items:center!important;
}
.rhythm-work .case-feature .case-media,
.rhythm-work .case-feature .infakt-media{
 padding:0!important;
 background:transparent!important;
 transform:none!important;
}
.rhythm-work .case-feature .portfolio-frame-grid .portfolio-frame:only-child{
 width:100%!important;
 justify-self:stretch!important;
}

/* Selected Work uses exactly the same frame treatment and regular spacing. */
.rhythm-selected{
 padding-top:clamp(82px,8vw,128px)!important;
 padding-bottom:clamp(82px,8vw,128px)!important;
}
.rhythm-selected .project-grid{
 grid-template-columns:repeat(2,minmax(0,1fr))!important;
 gap:clamp(54px,6vw,92px) clamp(16px,1.6vw,24px)!important;
 align-items:start!important;
}
.rhythm-selected .project-card:nth-child(n){
 margin-top:0!important;
 width:100%!important;
 justify-self:stretch!important;
}
@media(max-width:760px){
 .rhythm-work .case-feature,
 .rhythm-work .case-wide,
 .rhythm-work .case-editorial,
 .rhythm-work .case-compact,
 .rhythm-work .case-spread{
  padding-top:64px!important;
  padding-bottom:72px!important;
 }
 .rhythm-selected{padding-top:64px!important;padding-bottom:72px!important}
 .rhythm-selected .project-grid{grid-template-columns:1fr!important;gap:48px!important}
}


/* v1.6.11 — section labels + optional 08 + consistent contact header */
.section-head>span:first-child,.footer-section-head>span:first-child{font-weight:700}
.footer-section-head{font-size:10px!important;letter-spacing:.08em!important;margin-bottom:clamp(24px,3vw,50px)!important;padding-bottom:28px!important}
.footer{padding-top:clamp(54px,7vw,108px)}

/* v1.6.12 — contact label without section number; no other layout changes. */


/* v1.6.13 — cleaner hero and stronger section labels. */
.section-head{font-size:clamp(12px,1vw,14px);line-height:1.25;letter-spacing:.065em}
.section-head>span:first-child{font-weight:700}
.footer-section-head{font-size:clamp(12px,1vw,14px)!important;line-height:1.25!important;letter-spacing:.065em!important}
@media(max-width:760px){.section-head,.footer-section-head{font-size:12px!important}}


/* v1.6.14 — calmer hero name scale; all other layout remains unchanged. */
.hero h1{font-size:clamp(46px,6.9vw,82px)!important;line-height:.92!important;letter-spacing:-.06em!important}
@media(max-width:760px){.hero h1{font-size:9.8vw!important;line-height:.95!important;letter-spacing:-.055em!important}}
@media(max-width:520px){.hero h1{font-size:9.4vw!important;line-height:.96!important}}

/* v1.6.18 — Info Integrum aligned with other case studies + expandable projects */
.integrum-case .integrum-feature{border-top:1px solid currentColor;display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(28px,6vw,100px);padding:70px 0 110px;align-items:center}
.integrum-case .integrum-feature .case-copy{position:sticky;top:115px;align-self:start}
.integrum-case .integrum-feature .integrum-org{font-size:12px;line-height:1.55;opacity:.72;margin-top:24px}
.extra-project{margin-top:0}
.figma-case .extra-project{border-color:#444;color:#f1f0ec}
.figma-case .extra-project .portfolio-frame{background:#171717!important}
@media(max-width:760px){.integrum-case .integrum-feature{grid-template-columns:1fr;padding:45px 0 75px}.integrum-case .integrum-feature .case-copy{position:static}.extra-project{grid-template-columns:1fr!important}.extra-project.reverse .case-copy,.extra-project.reverse .case-media{order:initial}}