/* Continuous content gutters and room for the board's complete control group. */
.octave-home{--hero-width:min(1400px,calc(100% - clamp(40px,calc(53.8vw - 290px),32vw)))}
#projects .case-intro{width:var(--hero-width)}
.octave-home .board-stage.flip-enabled{--control-space:184px}
.home-about .about-bio-row{gap:clamp(24px,4vw,64px);grid-template-columns:minmax(200px,.36fr) minmax(0,.64fr)}
.home-about .about-floating-piece{min-width:0}
.service-card h3,.case-title,.career-position{overflow-wrap:break-word}
@media(max-width:720px){
 .home-about .about-bio-row{grid-template-columns:1fr;gap:24px}
 .home-about .about-floating-piece{position:relative;top:auto;height:260px;width:min(100%,360px);justify-self:center}
 .home-about .about-bio{width:100%}
 .home-about .audience-tabs{width:100%;box-sizing:border-box}
 #projects .case-intro{grid-template-columns:1fr;gap:28px}
 #projects .case-intro .case-identity{grid-column:1;grid-row:1}
 #projects .case-intro .case-story{grid-column:1;grid-row:2}
 .team-set-fallback{inset:17% 7%}
}
@media(max-height:500px){
 .octave-home .board-stage.flip-enabled{--control-space:144px;top:64px;height:calc(100svh - 76px)}
 .team-set-stage{height:clamp(220px,75svh,380px)}
 .home-about .about-floating-piece{height:240px}
}
@media(prefers-reduced-motion:reduce){
 .octave-home .board-stage.flip-enabled{position:relative;top:0}
}
/* Empty toolbar space must never intercept the piece below it. */
.octave-home .jm-bar,.octave-home .jm-bar-inner{pointer-events:none}
.octave-home .jm-barnav a{pointer-events:auto}
.home-about .about-floating-piece{position:relative!important;top:auto!important;isolation:isolate;overflow:visible}
.home-about .about-floating-piece full-chess-set{pointer-events:auto;touch-action:pan-y}
#projects .case-intro .case-results{margin-top:24px;padding-top:16px;gap:14px 18px}
#projects .case-intro .results-label{font-size:11px;margin:0}
#projects .case-intro .result-stat{gap:4px}
#projects .case-intro .result-number{font-size:clamp(25px,2.1vw,34px);line-height:1}
#projects .case-intro .result-description{font-size:13px;line-height:1.35}
.octave-home .hero-copy .intro{max-width:38ch}
.octave-home .recent-work-heading{width:var(--hero-width);max-width:1400px;text-align:center;margin:clamp(56px,8svh,100px) auto clamp(40px,6svh,72px);padding:0}
.site-footer .team-set{padding:0;width:100%;max-width:1280px;margin:0 auto;color:var(--ink)}
.site-footer .team-set-stage{margin-top:0}
/* Consistent editorial scale, with copy columns only when both remain readable. */
#projects .case-intro .case-title{font-size:clamp(19px,1.25vw,23px)}
#projects .case-intro .case-story{container-type:inline-size}
#projects .case-intro .case-copy{max-width:none}
@container(min-width:540px){
 #projects .case-intro .case-copy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;align-items:start}
 #projects .case-intro .case-results{grid-column:1/-1}
}
#projects .case-intro .case-results{display:block}
#projects .case-intro .results-label{font:300 18px/1 'FAIRE Octave Trial Variable',serif;letter-spacing:0;text-transform:uppercase;font-feature-settings:'dlig' 1,'ss01' 1,'ss06' 1,'ss11' 1,'ss14' 1;margin-bottom:16px}
#projects .case-intro .results-row{display:flex;flex-wrap:nowrap;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:8px;scrollbar-width:thin}
#projects .case-intro .result-stat{flex:1 0 105px;max-width:150px;margin:0}
#projects .case-intro .result-description{max-width:18ch}
/* Footer identity, links and board share one inset and one composition. */
.octave-home .site-footer{box-sizing:border-box;width:calc(100% - 40px);max-width:1400px;padding:clamp(24px,4vw,56px);margin:72px auto 20px;border-radius:24px}
.octave-home .footer-upper{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:0 0 24px;align-items:start}
.octave-home .footer-name{font-size:clamp(28px,3vw,44px);line-height:1;margin:0;letter-spacing:0}
.octave-home .footer-links-grid{gap:28px;max-width:none}
.octave-home .footer-nav a,.octave-home .footer-email{font-size:16px;min-height:36px}
.octave-home .site-footer .team-set-stage{height:clamp(260px,40vw,520px)}
@media(max-width:600px){.octave-home .footer-upper{grid-template-columns:1fr;gap:28px}.octave-home .footer-nav a,.octave-home .footer-email{min-height:44px}.octave-home .site-footer .team-set-stage{height:280px}}
#projects .case-intro .case-campaign{font:300 14px/1.4 'ABC Oracle',sans-serif;margin:0;max-width:28ch;opacity:.7}
/* Copy and spacing review. */
#projects .case-intro .case-copy>.case-insight{grid-column:1/-1;max-width:none;margin:4px 0 24px;font-style:italic;line-height:1.5}
#projects .case-intro .result-stat{gap:14px}
.career-track .career-date.is-current{font-size:clamp(16px,1.6vw,23px);line-height:1.4;letter-spacing:0}
.site-footer .footer-invitation{max-width:32ch;font:300 clamp(23px,2.5vw,36px)/1.35 'ABC Oracle',sans-serif;margin:0 0 36px;grid-column:1/-1}
.footer-invitation a{display:block;margin-top:14px;color:inherit;font-size:.65em}.site-footer .footer-email{font-size:14px;overflow-wrap:anywhere}
.site-footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.75fr);gap:24px 36px;align-items:center}
.site-footer .footer-upper{grid-column:1;display:flex;flex-direction:column;align-items:flex-start;gap:26px;border:0;padding:0}
.site-footer #team-set{grid-column:2;grid-row:2;margin:0;padding:0;width:100%}
.site-footer #team-set .team-set-stage{height:260px;min-height:0}
@media(max-width:760px){.site-footer{grid-template-columns:1fr;gap:24px}.site-footer #team-set{grid-column:1;grid-row:auto;max-width:480px;justify-self:center}.site-footer #team-set .team-set-stage{height:220px}.site-footer .footer-upper{gap:20px}.site-footer .footer-invitation{margin-bottom:0}}
#home-work .recent-work-heading{text-align:left;width:var(--hero-width);margin-inline:auto;line-height:1}
.site-footer #team-set{grid-row:1}
@media(max-width:760px){.site-footer #team-set{grid-row:auto}}
.home-about #about-title,.home-about .services-heading{margin-left:calc(36% + .64 * clamp(24px,4vw,64px) + 12px);text-align:left}
.octave-home .board-stage.flip-enabled{width:min(1600px,100%);height:min(840px,calc(100svh - 110px))}
@media(max-width:720px){.home-about #about-title,.home-about .services-heading{margin-left:12px}}
@media(max-height:500px){.octave-home .board-stage.flip-enabled{height:calc(100svh - 76px)}}
@media(pointer:coarse){
 .flip-study-page .board-label-row.liquid-selector{width:min(336px,calc(100% - 24px));height:44px}
 .board-style-options,.board-style-option,.board-liquid-shell,.board-liquid-skin,.flip-study-page .liquid-selector .board-pill{height:44px;min-height:44px}
 .board-preview button{width:44px;height:44px}
 .board-preview{touch-action:pan-y}
}
.career-track .career-date{font-size:clamp(16px,1.6vw,23px);line-height:1.4;letter-spacing:0}
.home-about .audience-selection-pill{border:1px solid color-mix(in srgb,var(--ink) 15%,transparent);box-shadow:none;scale:1!important;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.home-about .services-heading{max-width:calc(64% - 12px);overflow-wrap:normal}
@media(max-width:720px){.home-about .services-heading{max-width:calc(100% - 12px)}}
@media(max-height:500px){.board-preview{padding:20px}.board-preview h3{font-size:22px}.board-preview-copy{font-size:15px}}

/* Inline portrait slot, activated when the waving asset is supplied. */
.hero-inline-wave:not([hidden]){display:inline-block;width:3em;height:1.55em;vertical-align:-.35em;margin-inline:.12em .2em;border-radius:.2em;overflow:hidden}
.hero-inline-wave img{display:block;width:100%;height:100%;object-fit:cover}

/* Portrait-led story stage, preserving the travelling queen and board geometry. */
.octave-home .hero .hero-bottom{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(32px,5vw,84px);align-items:start}
.octave-home .hero .queen-slot{position:relative;min-height:0;display:block}
.hero-portrait{width:100%;aspect-ratio:600/300;overflow:hidden;border-radius:clamp(16px,1.6vw,28px)}
.hero-portrait img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 42%}
.octave-home .hero-copy .story-heading{max-width:11ch;text-wrap:initial}
.octave-home .hero-copy .intro{max-width:36ch}
@media(max-width:679px){.octave-home .hero .hero-bottom{grid-template-columns:1fr;gap:28px}.hero-portrait{width:calc(100% - 32px);aspect-ratio:600/359}.octave-home .hero-copy .story-heading{max-width:none}.octave-home .hero .queen-slot{min-height:0}.octave-home .hero-copy{max-width:none}}
@media(prefers-reduced-motion:reduce){.octave-home .hero .queen-slot{display:block}}

/* A smaller portrait leaves the story and logos closer to the left gutter. */
.octave-home .hero .hero-bottom{grid-template-columns:minmax(0,.245fr) minmax(0,.65fr);gap:clamp(32px,4vw,64px)}
@media(max-width:679px){.octave-home .hero .hero-bottom{grid-template-columns:1fr;gap:28px}.hero-portrait{width:50%}}

/* The travelling queen floats over the name, navigation and glass story. */
.octave-home .floating-layer{z-index:200!important}

/* Mobile story: floating queen left, portrait and copy in one right column. */
@media(max-width:679px){
 .octave-home .hero .hero-bottom{grid-template-columns:minmax(72px,.32fr) minmax(0,1fr);gap:18px}
 .octave-home .hero .queen-slot{display:block;align-self:stretch;min-height:180px}
 .octave-home .hero-copy .hero-portrait{width:100%;aspect-ratio:600/359;margin-bottom:24px}
 .octave-home .hero-copy .story-heading{font-size:clamp(25px,6vw,30px);max-width:11ch}
 .octave-home .hero-copy .intro{font-size:16px;line-height:1.5}
}

@media(max-width:679px){
 .octave-home .hero-copy .hero-portrait{width:82%;margin-bottom:20px}
}

/* Name docking uses a compositor transform, never per-frame font resizing. */
.octave-home .travelling-name{will-change:transform;backface-visibility:hidden}

/* A full-size document heading and a separate, steady toolbar identity. */
.octave-home .jm-bar .header-name{position:absolute;display:block;left:0;top:0;font:300 clamp(20px,1.9vw,30px)/1 'FAIRE Octave Trial Variable',serif;letter-spacing:0;text-transform:uppercase;font-feature-settings:'dlig' 1,'ss01' 1,'ss06' 1,'ss11' 1,'ss14' 1;pointer-events:auto}
.octave-home .jm-bar:not(.jm-bar-on){visibility:hidden}
.octave-home .jm-bar:focus-within{visibility:visible}
/* Restore the portrait-led wide composition without changing the phone layout. */
@media(min-width:680px){
 .octave-home .hero .hero-bottom{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(32px,5vw,84px)}
 .octave-home .hero .queen-slot .hero-portrait{width:100%}
}
/* Every impact is visible together, never in a horizontal scroller. */
#projects .case-intro .results-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--impact-min,150px)),1fr));gap:24px 20px;overflow:visible;overscroll-behavior:auto;padding:0}
#projects .case-intro .result-stat{min-width:0;max-width:none;margin:0}
#projects .case-intro .result-description{max-width:none;overflow-wrap:break-word}
/* Three editorial panels remain at every tablet and desktop width. */
@media(min-width:768px){
 #projects .case-intro{width:calc(100% - 64px);grid-template-columns:minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.6fr);grid-template-rows:min-content 1fr;gap:24px}
 #projects .case-intro .case-identity{display:contents}
 #projects .case-intro .case-title{grid-column:1;grid-row:1}
 #projects .case-intro .case-campaign{grid-column:1;grid-row:2;margin-top:0}
 #projects .case-intro .case-type{grid-column:2;grid-row:1}
 #projects .case-intro .case-story{grid-column:3;grid-row:1 / span 2}
 #projects .case-intro .case-copy{display:block}
}
/* Touch inspection grows the image instead of applying the drag shrink. */
@media(pointer:coarse),(max-width:800px){
 #projects .gallery-slide{transition-duration:.35s}
 #projects .case-gallery.dragging .gallery-slide.is-expanded .slide-inner{transform:none}
}
/* A sticky left title tracks the experience entries within this section. */
.octave-home .career-section{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.7fr);align-items:start;gap:clamp(24px,4vw,64px);text-align:left;width:var(--hero-width);max-width:1400px;padding-inline:0;overflow:visible}
.octave-home .career-section #career-title{position:sticky;top:140px;align-self:start;--section-heading-size:clamp(24px,3.2vw,46px);margin:0;font-size:clamp(24px,3.2vw,46px);line-height:1.05;text-align:left;transition:none!important}
.octave-home .career-section .career-track{width:100%;margin:0;max-width:none}
.octave-home .career-track::before{left:30%}
.octave-home .career-track .career-entry{grid-template-columns:30% minmax(0,1fr)}
.octave-home .career-track .career-entry::before{left:30%}
.octave-home .career-track .career-date{padding-right:24px}
.octave-home .career-track .career-body{padding-left:24px}
@media(max-width:679px){
 .octave-home .career-section{grid-template-columns:minmax(0,.6fr) minmax(0,1fr);gap:20px}
 .octave-home .career-section #career-title{top:125px;--section-heading-size:clamp(13px,4.1vw,22px);font-size:clamp(13px,4.1vw,22px);overflow-wrap:normal}
 .octave-home .career-track::before{left:0}
 .octave-home .career-track .career-entry{display:block;padding-left:16px;padding-bottom:70px}
 .octave-home .career-track .career-entry::before{left:0}
 .octave-home .career-track .career-date{text-align:left;padding:0;margin-bottom:14px;font-size:15px}
 .octave-home .career-track .career-body{padding:0}
 .octave-home .career-track .career-position{font-size:14px}
}

.octave-home .jm-bar-inner{position:relative}

@media(prefers-reduced-motion:reduce){.octave-home .hero-stage{min-height:100svh}}

/* Keep the supplied wave compact on desktop; retain the phone composition. */
@media(min-width:680px){
 .octave-home .hero .queen-slot .hero-portrait{width:88%;margin-left:auto;aspect-ratio:600/359}
}
.hero-portrait picture{display:block;width:100%;height:100%}
@media(min-width:680px){
 .octave-home .hero .queen-slot .hero-portrait{aspect-ratio:4/3;height:auto!important;min-height:0}
 .hero-portrait img{object-fit:cover;object-position:center}
}

@media(min-width:1400px){#projects .case-intro{width:var(--hero-width);max-width:1400px}}

/* Reduce the desktop portrait by 30%, retaining its right edge beside the piece. */
@media(min-width:680px){.octave-home .hero .queen-slot .hero-portrait{width:61.6%;margin-left:auto}}
/* Footer signature replaces the former full-board layout. */
.octave-home .site-footer{display:block;width:var(--hero-width);max-width:1400px;padding:0;margin:110px auto 64px;border-radius:0}
.octave-home .site-footer .footer-upper{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.38fr);gap:clamp(36px,5vw,80px);padding:55px 0 0;border-top:1px solid color-mix(in srgb,var(--ink) 20%,transparent);align-items:start}
.octave-home .footer-signature{width:100%}.octave-home .footer-links-grid{align-self:start}
@media(max-width:767px){.octave-home .site-footer .footer-upper{grid-template-columns:1fr;gap:42px}}
@media(min-width:768px){.octave-home .footer-name{font-size:clamp(76px,8.5vw,145px)!important}}
/* About and services follow the existing case study type hierarchy. */
.octave-home .home-about{border-top:0}
.octave-home .home-about .about-section-heading{font-size:clamp(30px,3.2vw,48px)}
.octave-home .home-about .audience-panel p,.octave-home .home-about .services-editorial .services-intro{font-size:16px;line-height:1.5;font-weight:300}
.octave-home .home-about .services-editorial .services-heading{font:300 clamp(19px,1.25vw,23px)/1.15 'FAIRE Octave Trial Variable',serif;text-transform:none;letter-spacing:0}
/* A broad, shallow copy panel; artwork covers the entire backdrop. */
@media(min-width:768px){
 .octave-home .service-composition{padding-block:20px;align-items:center}
 .octave-home .service-panel{grid-column:1/11;padding:30px 34px;margin:40px 0;max-width:none}
 .octave-home .service-visual{grid-column:7/-1;min-height:570px}
 .octave-home .service-artwork{inset:0!important}
 .octave-home .service-panels{min-height:0}
 .octave-home .service-pane p{max-width:60ch;margin-bottom:18px}
 .octave-home .service-pane h3{max-width:none;font-size:clamp(30px,3vw,44px)!important;margin-bottom:18px!important}
 .octave-home .service-pane ul{min-height:0;margin-top:12px;padding-top:0}
 .octave-home .service-tabs{gap:4px 18px;margin-bottom:22px}
 .octave-home .service-next{bottom:30px;right:28px}
}
.octave-home .service-artwork{inset:0!important}
@media(min-width:561px) and (max-width:900px){.octave-home .home-about .audience-panel p,.octave-home .home-about .services-editorial .services-intro{font-size:15px}}
@media(min-width:768px){.octave-home .service-panel{transform:translateY(48px)}}