.services-feature{margin-top:clamp(72px,9vw,140px);padding-bottom:48px;scroll-margin-top:110px}
.services-heading{font:300 clamp(30px,3.2vw,48px)/1 'FAIRE Octave Trial Variable',serif;text-transform:uppercase;margin:0 0 40px;letter-spacing:0;font-feature-settings:'dlig' 1,'ss01' 1,'ss06' 1,'ss11' 1,'ss14' 1}
.service-composition{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;padding-block:42px;isolation:isolate}
.service-visual{grid-column:5/-1;grid-row:1;align-self:stretch;min-height:680px;background:#090a0b;border-radius:48px;overflow:hidden;position:relative}
.service-visual canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s}.service-visual.ready canvas{opacity:1}.service-visual.ready .service-chess-fallback{opacity:0}
.service-chess-fallback{position:absolute;inset:0;transition:opacity .6s;background:radial-gradient(ellipse at 60% 65%,#333,transparent 55%)}
.service-chess-fallback img{position:absolute;width:28%;height:40%;object-fit:contain;left:calc(15% + mod(var(--n),3)*25%);top:calc(-4% + round(down,var(--n)/3)*31%);transform:rotate(calc(var(--n)*43deg - 35deg));filter:grayscale(1) contrast(1.4);opacity:.9}
.service-panel{grid-column:1/8;grid-row:1;position:relative;z-index:1;border-radius:26px;padding:clamp(28px,3.8vw,64px);background:var(--paper,#f3ecd5);color:var(--ink,#59483a);margin-block:56px;box-sizing:border-box;min-width:0}
.service-tabs{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:32px}
.service-tabs button{font:300 14px/1.4 'ABC Oracle',sans-serif;border:0;background:none;padding:8px 0;color:inherit;opacity:.65;cursor:pointer;text-align:left;transition:opacity .2s}
.service-tabs button[aria-selected=true]{opacity:1;font-weight:600}.service-tabs button:hover{opacity:1}.service-tabs button:focus-visible,.service-next:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.service-panels{display:grid}.service-pane{grid-area:1/1;min-width:0}.service-pane[hidden]{display:none}.service-number{font:300 11px/1 'ABC Oracle';opacity:.55;display:block;margin-bottom:18px}
.service-pane h3{font:300 clamp(34px,4.4vw,70px)/1 'FAIRE Octave Trial Variable',serif!important;font-feature-settings:'dlig' 1,'ss01' 1,'ss06' 1,'ss11' 1,'ss14' 1!important;text-transform:uppercase;letter-spacing:0!important;margin:0 0 26px!important;max-width:12ch;overflow-wrap:normal}
.service-pane h4{font:600 clamp(17px,1.5vw,22px)/1.3 'ABC Oracle',sans-serif;margin:0 0 18px;max-width:30ch}
.service-pane p{font:300 clamp(16px,1.5vw,21px)/1.5 'ABC Oracle',sans-serif;margin:0 0 26px;max-width:36ch}
.service-pane ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0 50px 0 0}.service-pane li{font:300 11px/1.2 'ABC Oracle',sans-serif;text-transform:uppercase;padding:5px 9px;border-radius:99px;background:color-mix(in srgb,var(--ink) 5%,transparent)}
.service-next{position:absolute;right:clamp(26px,3.8vw,64px);bottom:clamp(26px,3.8vw,64px);width:44px;height:36px;border:0;border-radius:99px;color:inherit;background:color-mix(in srgb,var(--ink) 9%,transparent);font:24px/1 sans-serif;cursor:pointer;transition:transform .25s}.service-next:hover{transform:translateX(3px)}
@media(max-width:950px){.service-panel{grid-column:1/10}.service-visual{grid-column:4/-1}.service-tabs{gap:4px 16px}.service-visual{min-height:620px}}
@media(max-width:620px){.service-composition{display:flex;flex-direction:column;padding:0}.service-visual{width:100%;height:320px;min-height:0;border-radius:26px}.service-panel{width:calc(100% - 20px);margin:-45px 0 0;padding:26px 22px;border-radius:22px}.service-tabs{gap:2px 15px;margin-bottom:24px}.service-tabs button{font-size:12px;min-height:36px}.service-pane h3{font-size:40px!important}.service-pane p{font-size:16px}.service-next{bottom:24px;right:22px}.service-pane ul{padding-right:44px}.services-heading{margin-bottom:28px}}
@media(prefers-reduced-motion:reduce){.service-visual canvas,.service-next{transition:none}}
.service-panel{background:color-mix(in srgb,var(--paper,#f3ecd5) 95%,var(--ink,#59483a) 5%)}
.service-pane h4{font:600 clamp(17px,1.5vw,22px)/1.3 'ABC Oracle',sans-serif!important;text-transform:none!important;letter-spacing:0!important;font-feature-settings:normal!important}
.service-panels{min-height:370px}
@media(max-width:620px){.service-panels{min-height:390px}}
/* All panes share one measured grid row, so tags never jump between services. */
.service-pane,.service-pane[hidden]{display:flex;flex-direction:column;align-self:stretch}
.service-pane[hidden]{visibility:hidden;pointer-events:none}
.service-pane ul{margin-top:auto;padding-top:10px}
/* Match the site's quieter editorial scale. */
.service-panel{padding:clamp(26px,3vw,44px);margin-block:36px}
.service-pane h3{font-size:clamp(30px,3.2vw,48px)!important;margin-bottom:22px!important;max-width:15ch}
.service-pane h4{font-size:17px!important;line-height:1.4!important;margin-bottom:14px}
.service-pane p{font-size:16px;line-height:1.5;margin-bottom:20px}
.service-panels{min-height:310px}
.service-tabs{margin-bottom:24px}
.service-next{display:grid;place-items:center;right:clamp(26px,3vw,44px);bottom:clamp(26px,3vw,44px);width:44px;height:36px}
.service-visual{min-height:570px}
@media(max-width:620px){.service-panel{padding:26px 22px;margin:-45px 0 0}.service-visual{min-height:0;height:280px}.service-pane h3{font-size:32px!important}.service-panels{min-height:330px}.service-next{right:22px;bottom:26px}}
.service-pane ul{min-height:64px;box-sizing:border-box;align-items:flex-start;align-content:flex-start;flex-shrink:0}
.service-panel{width:100%;max-width:760px;justify-self:start;grid-column:1/10}
@media(max-width:620px){.service-panel{width:calc(100% - 20px)}}
@media(max-width:380px){.service-pane ul{min-height:96px}}

/* Keep the service navigation on one readable row at every width. */
.service-tabs{flex-wrap:nowrap;gap:18px;overflow-x:auto;max-width:100%;scrollbar-width:thin;overscroll-behavior-x:contain}
.service-tabs button{flex:0 0 auto;white-space:nowrap}
@media(max-width:620px){.service-tabs{gap:16px;padding-bottom:5px}}

/* Both overlapping panels share the same physical corner radius. */
.service-composition{--service-radius:clamp(22px,2.4vw,32px)}
.service-composition :is(.service-panel,.service-visual){border-radius:var(--service-radius)}

/* Original artwork compositions remain visible in the uncovered part of the box. */
.service-visual{background:#e6e5e0}
.service-artwork{position:absolute;inset:0;overflow:hidden}
.service-art-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .35s}
.service-visual.ready .service-art-poster{opacity:0}
.services-feature[data-composition=seven] .service-visual,
.services-feature[data-composition=cloud] .service-visual{background:#f3f3f1}
.services-feature[data-composition=frame] .service-visual{background:#c7ccce}
.services-feature[data-composition=board] .service-visual{background:#353431}
@media(prefers-reduced-motion:reduce){.service-art-poster{transition:none}}
/* Give the compositions their own generous stage beside the service copy. */
@media(min-width:621px){
 .service-composition{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:stretch;padding-block:20px}
 .service-panel{grid-column:1;grid-row:1;width:100%;margin:48px -48px 48px 0;max-width:none;padding:32px;align-self:center}
 .service-visual{grid-column:2;grid-row:1;min-height:760px;margin-left:-20px}
 .service-artwork{left:0!important}
 .service-tabs{gap:15px}
}
@media(max-width:620px){.service-visual{height:440px}.service-artwork{bottom:30px}}
@media(min-width:621px){
 .service-composition{grid-template-columns:repeat(12,minmax(0,1fr));gap:0}
 .service-panel{grid-column:1/8;grid-row:1;margin:70px 0;max-width:none;width:100%;padding:clamp(28px,3vw,44px)}
 .service-visual{grid-column:5/-1;grid-row:1;margin:0;min-height:780px}
 .service-artwork{left:24%!important}
}

.services-intro{font:300 clamp(16px,1.5vw,21px)/1.5 'ABC Oracle',sans-serif;max-width:58ch;margin:0 0 36px;overflow-wrap:break-word}
.home-about .services-intro{margin-left:calc(36% + .64 * clamp(24px,4vw,64px) + 12px);max-width:calc(64% - 12px)}
.service-pane h3,.service-pane h4,.service-pane p,.service-pane li{overflow-wrap:break-word}
@media(max-width:720px){.home-about .services-intro{margin-left:12px;max-width:calc(100% - 24px)}}

@media(min-width:621px){.service-tabs{flex-wrap:wrap;overflow-x:visible;gap:4px 18px}}

/* Left-led introduction follows the case study's three text columns. */
.home-about .services-editorial{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin-bottom:44px}
.home-about .services-editorial .services-heading,.home-about .services-editorial .services-intro{margin:0;max-width:100%;min-width:0;text-align:left}
.home-about .services-editorial .services-intro{font:300 clamp(16px,1.5vw,21px)/1.5 'ABC Oracle',sans-serif}
.service-visual{background:#a4b6c0}
@media(min-width:621px){.service-panel{grid-column:1/9}.service-visual{grid-column:6/-1;min-height:720px}.service-artwork{left:30%!important}.service-pane p{max-width:48ch}.service-pane h4{max-width:42ch}}
@media(max-width:767px){.home-about .services-editorial{grid-template-columns:1fr;gap:22px}}

.services-feature .service-visual{background:#a4b6c0}.services-feature .service-art-poster{mix-blend-mode:multiply}
.services-feature .service-art-poster{object-fit:cover}