/* The studio tells a story; the catalogue helps a visitor choose a useful scope. */
.about-page .about-hero-heading h1{font-size:clamp(70px,min(13vw,24svh),250px);line-height:.97}
.about-page .about-hero-copy .agency-lead{max-width:44ch}
.about-page .hero-aside{font-size:12px;max-width:none;color:var(--musou-muted)}
.about-page .studio-intro{border-top:0;padding-top:20px}
.about-page .studio-intro>div+div{margin-left:25%;gap:26px 6vw}
.studio-working-model{padding-block:0 var(--agency-space)}
.studio-model-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:10vw;align-items:end;margin-bottom:65px}
.studio-model-intro .agency-heading{font-size:clamp(44px,5.4vw,104px)}
.studio-model-intro .agency-lead{font-size:clamp(20px,1.5vw,29px);line-height:1.5}
.studio-role-list>div{display:grid;grid-template-columns:1fr 1fr;gap:10vw;align-items:start;padding-block:32px;border-top:1px solid var(--agency-rule)}
.studio-role-list h3{font-size:clamp(30px,3vw,58px);line-height:1.13;font-weight:500}
.studio-role-list p{font-size:clamp(18px,1.25vw,24px);line-height:1.6;max-width:43ch}
.studio-evidence{padding-block:var(--agency-space)}
.studio-evidence .section-opening{margin-bottom:65px}
.studio-evidence .agency-heading{font-size:clamp(48px,6.5vw,125px);max-width:18ch}
.studio-evidence-pair{display:grid;grid-template-columns:1.15fr .85fr;gap:8vw;align-items:start}
.studio-example{min-width:0;display:block}
.studio-evidence-pair:has(>.studio-example:only-child){grid-template-columns:1fr}.studio-example:only-child figure{height:48vw}
.studio-example:nth-child(2){padding-top:9vw}
.studio-example figure{height:38vw;min-height:250px;max-height:730px;overflow:hidden;background:var(--musou-panel)}
.studio-example:nth-child(2) figure{height:33vw;max-height:630px}
.studio-example img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.4,0,.2,1)}
.studio-example-caption{display:grid;grid-template-columns:1fr auto;gap:5px 20px;padding-top:20px;border-bottom:1px solid var(--agency-rule);padding-bottom:20px}
.studio-example-caption>span:first-child{font-size:clamp(22px,2vw,38px);line-height:1.2}
.studio-example-caption>span:nth-child(2){grid-column:1;font-size:13px;color:var(--musou-muted)}
.studio-example-caption svg{grid-column:2;grid-row:1/3;width:28px;height:28px;align-self:center;transition:translate .6s cubic-bezier(.4,0,.2,1)}
.studio-example:focus-visible{outline:2px solid currentColor;outline-offset:8px}
.studio-working{display:grid;grid-template-columns:1fr 1fr;gap:10vw;padding-block:var(--agency-space);border-top:1px solid var(--agency-rule)}
.studio-working .agency-heading{font-size:clamp(44px,5vw,96px);max-width:18ch}
.studio-working .agency-lead{font-size:clamp(22px,1.7vw,33px);margin-top:36px;line-height:1.5}
.studio-working .editorial-copy{margin-top:0}
.studio-working-list{list-style:none;margin:32px 0 0;padding:0}
.studio-working-list li{border-top:1px solid var(--agency-rule);padding-block:18px;font-size:clamp(18px,1.25vw,24px);line-height:1.45}
.about-page .studio-fit{padding-bottom:var(--agency-space)}
/* Useful information is available before a visitor opens a service. */
.services-page .services-hero .agency-display{font-size:clamp(70px,min(14vw,26svh),270px)}
.services-page .service-offering-toggle{display:grid;grid-template-columns:1fr 1fr auto;gap:6vw;align-items:center}
.service-fit{font-size:clamp(19px,1.7vw,32px);line-height:1.4;letter-spacing:-.015em;max-width:23ch}
.services-page .service-title{font-size:clamp(60px,7vw,134px)}
.services-page .service-description{font-size:clamp(32px,4vw,76px);line-height:1.16;max-width:29ch;margin:0 0 65px;letter-spacing:-.03em}
.service-proof-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:10vw;align-items:start}
.services-page .service-band{height:clamp(280px,36vw,690px);margin:0 0 10px}
.service-example-link{font-size:20px;justify-content:space-between;display:flex;padding-block:10px}
.service-example-note{font-size:13px;line-height:1.6;color:var(--musou-muted);margin-top:16px;max-width:55ch}
.service-delivery>h3{font-size:clamp(28px,3vw,56px);font-weight:500;line-height:1.13;margin-bottom:25px}
.service-delivery .editorial-copy{font-size:clamp(19px,1.4vw,27px);line-height:1.5;max-width:none;margin:0 0 30px}
.service-delivery .service-deliverables{margin:0 0 30px}
.service-delivery .service-deliverables li{font-size:clamp(17px,1.2vw,23px);padding-block:15px}
.services-page .service-specifics{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5vw;margin-top:65px;padding-top:35px;border-top:1px solid var(--agency-rule)}
.services-page .service-specifics>div+div{margin-top:0}
.services-page .service-specifics h3{font-size:19px;line-height:1.35;font-weight:500;margin-bottom:18px}
.services-page .service-specifics p{font-size:17px;line-height:1.65;max-width:none}
.services-page .agency-engagement{padding-block:var(--agency-space)}
.services-page .engagement-options{margin-top:55px;padding-top:0}
.services-page .engagement-options>div{border-top:1px solid var(--agency-rule);padding-top:32px}
.services-page .engagement-options h3{max-width:none;font-size:clamp(34px,3.6vw,69px)}
.services-page .agency-process .process-output{font-size:15px;font-weight:500;margin-top:22px;padding-left:20px;position:relative;line-height:1.5}
.process-output::before{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:currentColor;left:0;top:.55em}
@media(hover:hover) and (pointer:fine){.studio-example:hover img{transform:scale(1.035)}.studio-example:hover .studio-example-caption svg{translate:3px -3px}}
@media(max-width:1000px){.service-proof-layout{gap:6vw}.services-page .service-specifics{grid-template-columns:1fr 1fr}.services-page .service-specifics>div:last-child{grid-column:1/-1;max-width:65ch}}
@media(max-width:700px){
 .about-page .about-hero-heading h1{font-size:13.5vw}.about-page .hero-aside{font-size:11px;max-width:32ch}
 .about-page .studio-intro>div+div{margin:0}.about-page .studio-intro{padding-top:10px}
 .studio-model-intro{display:block;margin-bottom:35px}.studio-model-intro .agency-heading{font-size:11vw}.studio-model-intro .agency-lead{margin-top:28px;font-size:20px}
 .studio-role-list>div{display:block;padding-block:26px}.studio-role-list h3{font-size:31px}.studio-role-list p{margin-top:17px;font-size:18px}
 .studio-evidence .section-opening{margin-bottom:35px}.studio-evidence .agency-heading{font-size:12vw}.studio-evidence-pair{display:block}.studio-example:nth-child(2){padding-top:45px}
 .studio-example figure,.studio-example:nth-child(2) figure{height:105vw;min-height:0;max-height:none}.studio-example:nth-child(2) figure{height:90vw}.studio-example-caption>span:first-child{font-size:27px}
 .studio-working{display:block}.studio-working .agency-heading{font-size:11vw}.studio-working .agency-lead{font-size:22px;margin-top:28px}.studio-working>div+div{margin-top:35px}
 .services-page .services-hero .agency-display{font-size:15vw}
 .services-page .service-offering-toggle{grid-template-columns:1fr auto;gap:14px 20px}.services-page .service-title{font-size:13vw}.service-fit{font-size:18px;grid-column:1;grid-row:2;max-width:none}.service-offering-mark{grid-column:2;grid-row:1/3}
 .services-page .service-description{font-size:32px;margin-bottom:35px;max-width:none}.service-proof-layout{display:block}.services-page .service-band{height:90vw;min-height:0}.service-example-note{font-size:12px}
 .service-delivery{margin-top:40px}.service-delivery>h3{font-size:34px}.service-delivery .editorial-copy{font-size:20px}.service-delivery .service-deliverables li{font-size:17px}
 .services-page .service-specifics{display:block;margin-top:40px;padding-top:28px}.services-page .service-specifics>div+div{margin-top:28px}.services-page .service-specifics h3{font-size:19px;margin-bottom:12px}
 .services-page .engagement-options{margin-top:35px}.services-page .engagement-options>div+div{margin-top:35px}.services-page .agency-process .process-output{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.studio-example img,.studio-example-caption svg{transition:none!important;transform:none!important;translate:none!important}}
@media print{.studio-example img{transform:none!important}.studio-example:nth-child(2){padding-top:0}}

/* Neutral theme surfaces; the supplied warm swatches remain brand assets. */
:is(.about-page,.services-page),[data-studio-tone="canvas"],.services-page .agency-faq{
 --studio-surface:var(--musou-backdrop);--studio-ink:var(--musou-ui-ink);--studio-muted:var(--musou-ui-ink);
}
[data-studio-tone="paper"]{--studio-surface:var(--musou-paper);--studio-ink:var(--musou-ui-ink);--studio-muted:var(--musou-ui-ink)}
[data-studio-tone="clay"]{--studio-surface:var(--musou-soft);--studio-ink:var(--musou-ui-ink);--studio-muted:var(--musou-ui-ink)}
[data-studio-tone="deep"]{--studio-surface:var(--musou-backdrop);--studio-ink:var(--musou-ui-ink);--studio-muted:var(--musou-ui-ink)}
:is(.about-page,.services-page),[data-studio-tone],.services-page .agency-faq{
 --musou-page:var(--studio-surface);--musou-ink:var(--studio-ink);--musou-muted:var(--studio-muted);--musou-panel:var(--studio-surface);
 --musou-border:color-mix(in srgb,var(--studio-ink) 28%,transparent);--agency-rule:var(--musou-border);
 background-color:var(--studio-surface);color:var(--studio-ink);
 transition:background-color .48s cubic-bezier(.4,0,.2,1),color .48s cubic-bezier(.4,0,.2,1);
}
/* About moves from an open statement to a paper story, then a studio roster. */
.about-page .studio-intro{padding-block:var(--agency-space)}
.about-page .studio-intro>div:first-child{margin-bottom:55px}
.about-page .studio-intro .agency-heading{font-size:clamp(48px,7vw,134px);max-width:19ch}
.about-page .studio-intro>div+div{margin-left:28%}
.about-page .studio-working-model{padding-block:var(--agency-space)}
.studio-model-intro{grid-template-columns:1.1fr 1fr;gap:12vw;margin-bottom:clamp(60px,7vw,130px)}
.studio-role-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5vw}
.studio-role-list>div{position:relative;display:flex;flex-direction:column;gap:0;align-items:stretch;border:0;padding:30px 0 0}
.studio-role-list>div::before,.engagement-options>[data-studio-rule]::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:currentColor;transform:scaleX(var(--rule-progress,1));transform-origin:left}
.studio-role-index{display:block;font-size:clamp(70px,8vw,154px);font-weight:400;letter-spacing:-.065em;line-height:1;color:var(--musou-color-taupe);margin-bottom:50px}
.studio-role-list h3{font-size:clamp(27px,2.6vw,50px);font-weight:500;line-height:1.1;max-width:12ch;min-height:2.3em;margin-bottom:28px}
.studio-role-list p{font-size:clamp(18px,1.25vw,24px);max-width:none;line-height:1.6}
[data-theme="light"] .studio-role-index{color:var(--musou-color-charcoal)}
.about-page .studio-evidence{padding-block:var(--agency-space)}
.about-page .studio-principles{padding-block:var(--agency-space)}
.about-page .studio-working{border:0;padding-block:var(--agency-space)}
.about-page .studio-working-list li{padding-block:24px}
.about-page .studio-fit{padding-block:var(--agency-space)}
/* Services is a numbered catalogue. The first scope is open and useful immediately. */
.services-page .services-overview{padding-bottom:var(--agency-space)}
.services-page .services-overview .section-opening{padding-top:0}
.service-offering-label{display:flex;align-items:baseline;gap:clamp(20px,3vw,58px);min-width:0}
.service-index{font-size:15px;line-height:1;letter-spacing:0;font-weight:400;flex:none}
.services-page .service-title{font-size:clamp(54px,6.8vw,130px);font-weight:500;line-height:1.05}
.services-page .service-offering-toggle{padding-block:clamp(32px,4.2vw,80px);grid-template-columns:1.15fr 1fr auto;gap:5vw;transition:background-color .48s var(--musou-ease)}
.services-page .service-offering{border-color:var(--agency-rule)}
.services-page .service-offering-body{padding-top:15px}
.services-page .service-offering[open] .service-offering-toggle{padding-bottom:clamp(35px,5vw,96px)}
.services-page .service-fit{font-size:clamp(19px,1.55vw,30px);max-width:25ch}
.services-page .service-description{font-size:clamp(32px,3.8vw,73px);max-width:30ch}
.services-page .service-proof-layout{grid-template-columns:1fr 1fr;gap:9vw}
.services-page .service-delivery>h3{font-size:clamp(30px,2.6vw,50px)}
/* Engagement is a taupe interlude rather than another dark text section. */
.services-page .agency-engagement{padding-block:var(--agency-space)}
.services-page .engagement-options{gap:8vw;margin-top:80px}
.services-page .engagement-options>div{position:relative;border:0;padding-top:35px;display:grid;grid-template-columns:auto 1fr;column-gap:3vw;align-content:start}
.engagement-number{grid-row:1/3;line-height:1;font-size:clamp(64px,7vw,134px);font-weight:400;letter-spacing:-.065em}
.services-page .engagement-options h3{font-size:clamp(30px,3.2vw,62px);line-height:1.1;margin-bottom:28px}
.services-page .engagement-options p{font-size:clamp(19px,1.4vw,27px);max-width:35ch}
/* A single rolling chapter number follows the four static process descriptions. */
.services-page .agency-process{padding-block:var(--agency-space);gap:12vw;grid-template-columns:1fr 1fr}
.services-page .agency-process .agency-heading{font-size:clamp(42px,4.6vw,88px);max-width:15ch}
.process-meter{display:none;grid-template-columns:auto 1fr;align-items:baseline;gap:0 24px;width:fit-content;min-width:70%;margin-top:45px}
.has-studio-motion .process-meter{display:grid}
.process-meter-window{overflow:clip;height:1em;font-size:clamp(100px,13vw,250px);font-weight:400;letter-spacing:-.07em;line-height:1}
.process-meter-roll{transform:translateY(calc(var(--active-step,0)*-1em));transition:transform .6s cubic-bezier(.16,1,.3,1)}
.process-meter-roll>span{display:block;height:1em;line-height:1}
.process-meter-total{font-size:20px;letter-spacing:-.02em;line-height:1}
.process-meter-track{grid-column:1/-1;height:1px;background:var(--agency-rule);position:relative;margin-top:30px}
.process-meter-track::after{content:"";position:absolute;inset:0;background:currentColor;transform:scaleX(var(--process-progress,.25));transform-origin:left;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.services-page .agency-process li{padding-block:40px 65px;min-height:270px}
.services-page .agency-process li::before{background:var(--agency-rule);transform:none}
.services-page .agency-process .process-number{font-size:16px;color:var(--musou-muted)}
.services-page .agency-process [data-process-active] .process-number{color:var(--musou-ink)}
.services-page .agency-process .process-output{padding-left:0;border-left:1px solid var(--agency-rule);padding-left:18px;margin-top:26px}
.services-page .agency-process .process-output::before{display:none}
.services-page .agency-faq{padding-block:var(--agency-space)}
@media(hover:hover) and (pointer:fine){.services-page .service-offering-toggle:hover{background-color:color-mix(in srgb,var(--studio-ink) 5%,var(--studio-surface))}}
@media(min-width:701px) and (max-height:700px){
 .services-page .agency-process>div{top:90px}
 .services-page .agency-process .agency-heading{font-size:clamp(38px,9svh,62px)}
 .process-meter{margin-top:25px}.process-meter-window{font-size:20svh}.process-meter-track{margin-top:20px}
}
@media(max-width:1000px){
 .studio-role-list{gap:4vw}.studio-role-list h3{font-size:29px}.studio-role-list p{font-size:18px}
 .services-page .engagement-options>div{display:block}.engagement-number{display:block;margin-bottom:35px}
}
@media(max-width:700px){
 .about-page .studio-intro>div+div{margin-left:0}.about-page .studio-intro>div:first-child{margin-bottom:38px}
 .about-page .studio-intro .agency-heading{font-size:12vw}
 .studio-model-intro{display:block;margin-bottom:45px}.studio-role-list{display:block}
 .studio-role-list>div{display:grid;grid-template-columns:62px 1fr;column-gap:24px;padding-block:28px 36px}
 .studio-role-index{grid-row:1/3;font-size:57px;margin:0}.studio-role-list h3{font-size:29px;min-height:0;max-width:none;margin-bottom:20px}.studio-role-list p{grid-column:2;font-size:17px;line-height:1.6;margin:0}
 .services-page .service-offering-toggle{grid-template-columns:1fr auto;padding-block:32px;gap:18px 20px}
 .service-offering-label{gap:18px}.service-index{font-size:12px}.services-page .service-title{font-size:12.3vw}
 .services-page .service-fit{font-size:18px;max-width:28ch;padding-left:32px}
 .services-page .service-offering[open] .service-offering-toggle{padding-bottom:38px}
 .services-page .service-proof-layout{display:block}.services-page .service-description{font-size:31px;max-width:none}
 .services-page .engagement-options{margin-top:50px}.services-page .engagement-options>div{display:grid;grid-template-columns:60px 1fr;column-gap:24px;padding-top:28px}.services-page .engagement-options>div+div{margin-top:45px}
 .engagement-number{font-size:57px;margin:0;grid-row:1/3}.services-page .engagement-options h3{font-size:31px;margin-bottom:22px}.services-page .engagement-options p{grid-column:2;font-size:18px}
 .services-page .agency-process{display:block}.services-page .agency-process>div{position:static}.services-page .agency-process .agency-heading{font-size:11vw}
 .process-meter{margin-top:32px;min-width:70%}.process-meter-window{font-size:110px}.process-meter-total{font-size:17px}.process-meter-track{margin-top:22px}
 .services-page .agency-process ol{margin-top:45px}.services-page .agency-process li{min-height:0;padding-block:28px 40px}
}
@media(prefers-reduced-motion:reduce){
 [data-studio-tone],.services-page .agency-faq{transition:none}
 .studio-role-list>div::before,.engagement-options>[data-studio-rule]::before{transform:none}
 .has-studio-motion .process-meter{display:none}.services-page .agency-process>div{position:static}
}
@media print{
 :is(.about-page,.services-page),[data-studio-tone],.services-page .agency-faq{background:#fff!important;color:#000!important;--musou-ink:#000;--musou-muted:#000;--musou-page:#fff;--agency-rule:#777}
 .has-studio-motion .process-meter{display:none}.studio-role-list>div::before,.engagement-options>[data-studio-rule]::before{transform:none}
}