@font-face{font-family:Octave;src:url('./fonts/octave.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Octave;src:url('./fonts/octave-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
h1,h2,h3,h4,h5,h6,.footer-name,.footer-slogan{font-family:Octave,Georgia,serif;font-feature-settings:'ss01' 1,'ss03' 1;font-weight:400}
html[data-edition="wood"]{--paper:#f2ecd5;--ink:#111;--muted:#77705d;--line:#d8d0b7}
.jm-bar .name{font-family:Octave,Georgia,serif;font-weight:400;font-feature-settings:'ss01' 1,'ss03' 1}
.octave-home .hero{padding-top:24svh}
.octave-home .hero-stage{min-height:69svh;padding-bottom:0}
.octave-home #hero-title{font-family:Octave,Georgia,serif;font-weight:400;font-feature-settings:'ss01' 1,'ss03' 1;font-size:clamp(86px,14vw,218px);line-height:1;letter-spacing:-.04em;max-width:none;white-space:nowrap;animation:octave-arrive 1.5s cubic-bezier(.22,.75,.18,1) both}
.raised-a{font-size:.65em;vertical-align:.35em;margin-inline:-.04em}
.story-heading{font:400 clamp(28px,3vw,46px)/1.1 Octave,Georgia,serif;letter-spacing:-.035em;margin:0 0 30px;font-feature-settings:'ss01' 1,'ss03' 1}
.octave-home .hero-copy{animation:none;max-width:44ch}.octave-home .intro{margin-bottom:24px}
.case-title{font-family:Octave,Georgia,serif!important;font-weight:400!important;text-transform:uppercase;font-feature-settings:'ss01' 1,'ss03' 1}
.case-type,.case-role{font-family:'ABC Oracle',Arial,sans-serif;font-style:normal;font-weight:300}
@keyframes octave-arrive{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.octave-home #hero-title{font-size:14vw}.story-heading{font-size:32px}}
@media(max-width:640px){.octave-home .hero{padding:30svh 20px 0}.octave-home .hero-stage{min-height:58svh}.octave-home .hero #hero-title{font-size:15.2vw;line-height:1;letter-spacing:-.04em}.octave-home .hero .hero-bottom{padding-top:24px}.octave-home .hero .queen-slot{min-height:190px}.octave-home .hero .hero-copy{max-width:42ch}.story-heading{font-size:30px;margin-bottom:24px}}
@media(prefers-reduced-motion:reduce){.octave-home #hero-title{animation:none}}

/* Exact supplied variable family, named Light instance: opsz 12 / wght 300. */
@font-face{font-family:'FAIRE Octave Trial Variable';src:url('./fonts/octave-trial-variable.woff2') format('woff2');font-weight:100 800;font-style:normal;font-display:swap}
h1,h2,h3,h4,h5,h6,.name,.footer-name,.footer-slogan,.footer-slogan em,.case-title,.story-heading,.octave-home #hero-title,.jm-bar .name{
 font-family:'FAIRE Octave Trial Variable',serif!important;
 font-weight:300!important;font-style:normal!important;font-synthesis:none!important;
 font-variation-settings:'wght' 300,'opsz' 12!important;font-optical-sizing:none;
 font-feature-settings:'dlig' 1,'ss01' 1,'ss06' 1,'ss11' 1,'ss14' 1!important;
 font-kerning:normal;letter-spacing:0!important;line-height:1em!important;
 text-transform:uppercase;text-shadow:none;-webkit-text-stroke:0;
}
.octave-home #hero-title{font-size:clamp(76px,12.8vw,200px)}
@media(max-width:640px){.octave-home .hero #hero-title{font-size:13.7vw}}

.board-stage.is-fallback.is-landed::after{content:'';position:absolute;inset:27% 40% 35%;background:url('./images/queen-fallback.svg') center/contain no-repeat;pointer-events:none}

/* Homepage refinements: shared compact intro, varied logo wall and inline work. */
.octave-home .jm-bar .jm-bar-inner{justify-content:flex-end;width:min(1400px,calc(100% - 80px))}
.octave-home .hero{padding-top:20svh}.octave-home .hero-stage{min-height:0}
.octave-home #hero-title{font-size:clamp(72px,9.3vw,145px)}
.octave-home .hero-bottom{padding-top:56px}
#clients .clients-scroll{width:100%;max-width:1200px;margin-inline:auto;padding:0;overflow:visible}
#clients .clients-window{width:100%;margin:0;overflow:visible}
#clients .clients-window::before,#clients .clients-window::after{display:none}
#clients .client-board{display:grid;width:100%;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:none;grid-auto-columns:auto;grid-auto-rows:140px;grid-auto-flow:row dense;gap:8px}
#clients .client-logo{grid-column:span 1;grid-row:span 1;padding:30px;transition:background .5s ease}
#clients .client-logo.logo-large{grid-column:span 2;grid-row:span 2}
#clients .client-logo.logo-wide{grid-column:span 2}
#clients .client-logo img{max-width:160px;height:65px;width:100%;object-fit:contain}
#clients .logo-large img{max-width:230px;height:105px}
#clients .logo-wide img{max-width:230px;height:78px}
#home-work{position:relative;z-index:55;background:var(--paper);padding-top:70px}
#home-work .case-intro{width:min(1200px,calc(100% - 80px));min-height:0;padding-bottom:70px}
#home-work .case-type,#home-work .case-role{font-family:'ABC Oracle',Arial,sans-serif;font-style:normal;font-weight:300}
#home-work .case-title{font-size:clamp(24px,2vw,34px)}
#home-work .case-story{font-family:'ABC Oracle',Arial,sans-serif}
#home-work .case-project{scroll-margin-top:100px}
@media(max-width:800px){#clients .client-board{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:110px}#clients .client-logo{padding:20px}#clients .logo-large img{max-width:170px;height:85px}}
@media(max-width:640px){.octave-home .hero{padding-top:22svh}.octave-home .hero #hero-title{font-size:12vw}.octave-home .hero .hero-bottom{padding-top:32px}.octave-home .jm-bar .jm-bar-inner{width:calc(100% - 40px)}#clients .client-board{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:100px;gap:5px}#clients .client-logo{padding:16px}#clients .client-logo img{height:52px}#clients .logo-large img{height:80px}#home-work .case-intro{width:calc(100% - 36px)}#home-work{padding-top:35px}}
#home-work .case-copy{display:block;grid-template-columns:none;gap:0}
#home-work .case-intro{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr);gap:36px}
#home-work .case-intro h1{margin:0;max-width:370px;line-height:1em}
#home-work .case-story{min-width:0;display:block}
#home-work .case-type{padding-right:24px}
#home-work .case-copy p{font-size:16px;line-height:1.45}
@media(max-width:800px){#home-work .case-intro{grid-template-columns:1fr 1fr;gap:28px}#home-work .case-story{grid-column:1/-1}#home-work .case-intro h1{font-size:24px}}

/* A quiet first viewport, followed by a scroll-led editorial reveal. */
.octave-home .hero{--name-size:clamp(72px,9.3vw,145px);padding-top:calc(56svh - var(--name-size))}
.octave-home .hero-stage{min-height:calc(44svh + var(--name-size))}
.octave-home .hero-bottom{padding-top:70px}
.octave-home .jm-bar{opacity:0;transition:opacity .7s ease;pointer-events:none}
.octave-home .jm-bar:not(.jm-bar-on) .jm-bar-inner{pointer-events:none}
.octave-home .jm-bar.jm-bar-on{opacity:1}
.octave-home .hero-copy :is(.story-heading,.intro,.copy-footer){--reveal:0;opacity:var(--reveal);transform:translateY(calc((1 - var(--reveal))*38px));will-change:opacity,transform}
@media(max-width:640px){.octave-home .hero{--name-size:12vw;padding-top:calc(56svh - var(--name-size))}.octave-home .hero-stage{min-height:calc(44svh + var(--name-size))}.octave-home .hero .hero-bottom{padding-top:35px}}
@media(prefers-reduced-motion:reduce){.octave-home .hero-copy :is(.story-heading,.intro,.copy-footer){opacity:1;transform:none}.octave-home .jm-bar{opacity:1}}

:root{--section-heading-size:clamp(28px,3vw,46px)}
.story-heading,.logo-wall #clients-title,.career-section #career-title,.about-main>h1,.services-section h2{font-size:var(--section-heading-size)!important;line-height:1em!important}
.octave-home #hero-title.travelling-name{position:fixed;z-index:80;width:max-content;max-width:none;margin:0;transform-origin:top left;pointer-events:none;animation:name-opacity .45s ease both;will-change:transform,top,left}
@keyframes name-opacity{from{opacity:0}to{opacity:1}}
@media(max-width:640px){:root{--section-heading-size:30px}}
@media(prefers-reduced-motion:reduce){.octave-home #hero-title.travelling-name{animation:none}}

#clients .client-logo.logo-current{grid-column:span 3}
#clients .logo-lost-estate{background:#25251f}
#clients .logo-lost-estate img{filter:none;mix-blend-mode:normal;max-width:230px;height:100px}
@media(max-width:900px){#clients .client-logo.logo-current{grid-column:span 2}}
@media(max-width:640px){#clients .client-logo.logo-current{grid-column:span 3}}

/* Reference composition: an oversized name retained through the hero. */
.octave-home .hero{width:68%;max-width:none;margin-inline:auto;padding-top:0;--hero-copy-y:max(56svh,calc(12svh + 30vw + 70px))}
.octave-home .hero-stage{min-height:calc(65svh + var(--hero-copy-y));padding:0}
.octave-home .hero .hero-bottom{padding-top:0;grid-template-columns:42% 50%;column-gap:8%}
.octave-home .hero-copy{max-width:none;width:100%;margin:0;font-size:clamp(16px,1.25vw,21px)}
.octave-home .hero-copy .intro{font-size:inherit;line-height:1.45;margin-bottom:1.45em}
.octave-home .story-heading{margin:0 0 26px}
.octave-home .copy-footer{margin-top:25px}
.octave-home .jm-bar,.octave-home .jm-bar.jm-bar-on{top:10svh;background:transparent;box-shadow:none}
.octave-home .jm-bar .jm-bar-inner,.octave-home .jm-bar.jm-bar-on .jm-bar-inner{width:68%;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;align-items:flex-start}
.octave-home .jm-barnav{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-right:17%}
.octave-home .jm-barlink{font-size:clamp(15px,1.25vw,21px);line-height:1.35}
.octave-home .jm-barlink::before{display:none}
#home-work{background:#f5f4f0;padding-top:150px}
#home-work .case-intro{width:68%;grid-template-columns:50% 25% 25%;gap:0;min-height:420px;padding:30px 0 75px}
#home-work .case-title{font-size:clamp(20px,1.4vw,26px)}
#home-work .case-type,#home-work .case-role,#home-work .case-copy p{font-size:clamp(16px,1.25vw,21px);line-height:1.4}
#home-work .case-role{margin-bottom:65px}
#home-work .case-project+.case-project .case-intro{border:0;padding-top:100px}
@media(max-width:640px){
 .octave-home .hero{width:84%;--hero-copy-y:calc(30svh + 30vw)}
 .octave-home .hero .hero-bottom{grid-template-columns:1fr;gap:20px}
 .octave-home .queen-slot{height:210px}
 .octave-home .jm-bar,.octave-home .jm-bar.jm-bar-on{top:24px}
 .octave-home .jm-bar .jm-bar-inner,.octave-home .jm-bar.jm-bar-on .jm-bar-inner{width:84%}
 .octave-home .jm-barnav{margin-right:0}
 #home-work .case-intro{width:84%;grid-template-columns:1fr 1fr;gap:24px;min-height:0}
 #home-work .case-story{grid-column:1/-1}
 #home-work .case-role{margin-bottom:25px}
}

/* Four fixed bento rows, extending horizontally for the complete set. */
#clients .clients-window{overflow:hidden}
#clients .clients-scroll{overflow-x:auto;overflow-y:hidden;max-width:1200px;padding-bottom:8px;overscroll-behavior-x:contain;scrollbar-width:thin}
#clients .client-board{width:max-content;grid-template-columns:none;grid-template-rows:repeat(4,140px);grid-auto-rows:140px;grid-auto-columns:190px;grid-auto-flow:column dense}
#clients .client-logo.logo-current{grid-column:span 2;grid-row:span 1}
#clients .client-logo.logo-large{grid-column:span 2;grid-row:span 2}
@media(max-width:800px){#clients .client-board{grid-template-columns:none;grid-template-rows:repeat(4,110px);grid-auto-columns:150px;grid-auto-rows:110px}}
@media(max-width:640px){#clients .client-board{grid-template-columns:none;grid-template-rows:repeat(4,95px);grid-auto-columns:125px;grid-auto-rows:95px}#clients .client-logo.logo-current{grid-column:span 2}}
.octave-home .hero .hero-bottom{width:100%;max-width:none;margin-inline:0;padding-inline:0}
.octave-home .story-heading{white-space:nowrap}
@media(max-width:640px){.octave-home .story-heading{white-space:normal}}
.octave-home .hero{padding-inline:0}
.octave-home .jm-bar .jm-bar-inner{margin-top:0}
.octave-home .jm-barlink{padding:0;border-radius:0}
@media(max-width:640px){.octave-home .hero{padding-inline:0}}

:root{--section-heading-size:clamp(28px,2.65vw,44px)}
.octave-home .hero .hero-bottom{grid-template-columns:42% 40%;column-gap:8%}
.octave-home .queen-slot .queen-stage{width:clamp(170px,18vw,270px);height:clamp(240px,25vw,375px);left:55px;top:-35px;max-width:none}
@media(max-width:640px){.octave-home .hero .hero-bottom{grid-template-columns:1fr}.octave-home .queen-slot .queen-stage{width:180px;height:250px;left:25px;top:-20px}:root{--section-heading-size:30px}}
#clients{scroll-margin-top:200px}
#home-work{padding-top:42svh}
@media(max-width:640px){#clients{scroll-margin-top:130px}#home-work{padding-top:180px}}

/* Fit the complete logo collection inside four rows. */
#clients .clients-window,#clients .clients-scroll{overflow:visible}
#clients .clients-scroll{width:100%;max-width:1200px;padding-bottom:0}
#clients .client-board{width:100%;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(4,clamp(85px,8.4vw,140px));grid-auto-rows:auto;grid-auto-columns:auto;gap:8px}
#clients .client-logo{display:flex;align-items:center;justify-content:center;padding:18px}
#clients .client-logo img{display:block;max-width:100%;max-height:75%;object-fit:contain;object-position:center}
#clients .client-logo.logo-lost-estate{background:color-mix(in srgb,var(--ink) 5%,var(--paper))}
#clients .logo-lost-estate img,#clients .logo-lost-estate:hover img{width:82%;height:auto;max-width:250px;max-height:65%;filter:brightness(0);mix-blend-mode:multiply}
@media(max-width:800px){#clients .client-board{grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(4,85px);gap:5px}#clients .client-logo{padding:8px}}
@media(max-width:640px){#clients .client-board{grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(4,60px);gap:4px}#clients .client-logo{padding:4px}#clients .client-logo img{height:35px}#clients .logo-large img{height:70px}#clients .logo-lost-estate img{height:auto;width:95%}}
/* Compact toolbar and evenly spaced project metadata. */
.octave-home .jm-bar,.octave-home .jm-bar.jm-bar-on{top:26px}
.octave-home .jm-barnav{margin-right:0;gap:2px}
.octave-home .jm-barlink{font-size:14px;line-height:1.4}
#home-work .case-intro{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px}
#home-work .case-title{font-size:clamp(19px,1.25vw,23px);padding-right:12px}
#home-work .case-type,#home-work .case-role,#home-work .case-copy p{font-size:clamp(15px,1.05vw,18px);line-height:1.45}
#home-work .case-type{padding-right:12px}
#home-work .case-role{margin-bottom:48px}
@media(max-width:800px){#home-work .case-intro{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px}#home-work .case-story{grid-column:auto}}
@media(max-width:640px){.octave-home .jm-bar,.octave-home .jm-bar.jm-bar-on{top:20px}#home-work .case-intro{grid-template-columns:1fr 1fr;gap:24px}#home-work .case-story{grid-column:1/-1}#home-work .case-role{margin-bottom:24px}}

#home-work :is(.case-title,.case-type,.case-role){min-height:2em}
.metadata-line{display:block;white-space:nowrap;min-height:1em}
@media(max-width:1000px){#home-work .case-title{font-size:16px}#home-work .case-type,#home-work .case-role{font-size:14px}}
@media(max-width:640px){#home-work .case-title{font-size:14px}#home-work .case-type,#home-work .case-role{font-size:13px}}
/* Keep the selected chess edition continuous through the work section. */
#home-work{background:var(--paper);color:var(--ink);transition:background .6s,color .6s}
/* One proportional inset for every logo, including multi-cell tiles. */
#clients .client-logo{padding:0}
#clients .client-logo img,#clients .logo-large img,#clients .logo-wide img,#clients .logo-lost-estate img{width:70%;height:60%;max-width:70%;max-height:60%;object-fit:contain;object-position:center}

.draft-visual{width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:8%;box-sizing:border-box;background:#e9dfc4;color:#171714;overflow:hidden;user-select:none;pointer-events:none}
.draft-visual.draft-pink{background:#f3b4cb}.draft-visual.draft-dark{background:#242420;color:#f2ecd5}.draft-visual.draft-gold{background:#c7a05b}
.draft-label{font:11px/1.2 'ABC Oracle',Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;opacity:.65}
#home-work .draft-visual .draft-logo{width:30%;height:12%;object-fit:contain;object-position:left center;filter:brightness(0);max-width:none}
#home-work .draft-dark .draft-logo{filter:brightness(0) invert(1)}
.draft-title{font-size:clamp(20px,3.1vw,55px);max-width:100%;margin:1em 0 .3em;line-height:1em;overflow-wrap:normal}
.draft-description{font:300 clamp(11px,1.05vw,18px)/1.4 'ABC Oracle',Arial,sans-serif;max-width:28ch;margin:0}

/* Three held compositions, joined by short, decisive moves. */
.travelling-name{transition:left .3s cubic-bezier(.22,.8,.25,1),top .3s cubic-bezier(.22,.8,.25,1),font-size .3s cubic-bezier(.22,.8,.25,1)!important}
.queen-stage{transition:transform .3s cubic-bezier(.22,.8,.25,1),opacity .12s!important}
@media(prefers-reduced-motion:reduce){.travelling-name,.queen-stage{transition:none!important}}

/* Keep the surrounding palette in step with the 3D edition blend. */
.octave-home,.octave-home .logo-wall,.octave-home #home-work{transition:background-color .52s cubic-bezier(.4,0,.2,1),color .52s cubic-bezier(.4,0,.2,1)}
.octave-home .travelling-name,.octave-home .story-heading,.octave-home .career-section,.octave-home #clients-title{transition-property:left,top,font-size,color!important;transition-duration:.3s,.3s,.3s,.52s!important}
@media(prefers-reduced-motion:reduce){.octave-home,.octave-home .logo-wall,.octave-home #home-work,.octave-home .travelling-name,.octave-home .story-heading,.octave-home .career-section,.octave-home #clients-title{transition:none!important}}