/* Architectural display, editorial reading, a small technical index.
   One shared hierarchy for home, About and every case; no distorted glyphs. */
body:is([data-page=home],[data-page=about],[data-experience=cinematic]){font-family:var(--cf-body);font-weight:400;letter-spacing:0;font-synthesis:none;font-kerning:normal}
body:is([data-page=home],[data-page=about],[data-experience=cinematic]) :is(button,input,textarea,select){font-family:inherit}
body:is([data-page=home],[data-page=about]) :is(h1,h2,.next-name),body[data-experience=cinematic] :is(.cinema-title strong,.opening-copy h1,.section-heading h2,.case-brief h2,.case-delivery h2,.case-outcome h2,.case-app-showcase h2,.case-close h2,.case-next h2){font-family:var(--cf-display);font-weight:500;text-transform:uppercase;letter-spacing:-.012em;line-height:1.08}
body:is([data-page=home],[data-page=about]) :is(h3,h4),body[data-experience=cinematic] h3{font-family:var(--cf-body);font-weight:500;letter-spacing:-.035em;line-height:1.1}
body[data-page=home] :is(.micro,.tiny,.chapter-bar,.section-label,.cf-story-card-top,.cf-story-scroll-cue,.cf-story-art-label){letter-spacing:.045em}
body[data-page=home] .cf-hero h1{position:relative;font-size:clamp(70px,8vw,142px);line-height:1.06;letter-spacing:-.012em;max-width:76%}
body[data-page=home] .cf-hero h1 em{font-size:inherit;letter-spacing:inherit;line-height:inherit}
/* The strike-led phrases and blue promise share Antonio's size and spacing. */
body[data-page=home] .cf-hero h1 .cf-hero-accent{display:block;position:absolute;bottom:calc(100% + .22em);left:0;width:var(--hero-word-vector-width);max-width:100%;height:1.2em;font-family:var(--cf-display);font-weight:500;font-style:normal;font-size:inherit;line-height:1.2;letter-spacing:inherit;isolation:isolate;pointer-events:none}
.cf-hero-accent-label{display:inline-block;position:relative;opacity:0}
.cf-hero-accent-vector{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
@media(prefers-reduced-motion:reduce),(forced-colors:active),(max-width:1000px){.cf-hero-accent-vector{display:none}}
body[data-page=home] .cf-hero-heading{padding-bottom:28px}
body[data-page=home] :is(.cf-story-intro h2,.services-intro h2){font-size:clamp(64px,7.5vw,136px);line-height:1.08}
body[data-page=home] .cf-work-heading h2{font-size:clamp(64px,7vw,132px);line-height:1.08;max-width:1080px}
body[data-page=home] .cf-story-card h3{font-size:clamp(34px,3.7vw,66px);line-height:1.1;letter-spacing:-.04em}
body[data-page=home] .cf-service h3{font-size:clamp(25px,2.45vw,42px);line-height:1.14;letter-spacing:-.03em}
body[data-page=home] .cf-closing h2{font-size:clamp(74px,10vw,180px);line-height:1.05;letter-spacing:-.012em}
body[data-page=home] .cf-story-description{max-width:39ch}
body[data-page=home] .cf-hero .hero-bottom>p{max-width:62ch}
body[data-page=home] #site-menu nav{font-family:var(--cf-body)}
body[data-page=home] .kinetic-mask{padding-top:.1em;margin-top:-.1em;padding-bottom:.16em;margin-bottom:-.16em}
body[data-page=home] .cf-story-intro h2 em{color:var(--cf-ink)}
body[data-page=home] :is(.cf-work-heading h2 em,.services-intro h2 em){color:var(--cf-ink)}
body[data-experience=cinematic] .cinema-title strong{font-size:clamp(64px,8vw,136px);line-height:1.12;letter-spacing:-.015em}
body[data-experience=cinematic] .cinema-screen{width:min(88%,var(--cinema-source,2545px),calc((100svh - 425px)*var(--cinema-ratio,1.77778)))}
/* Case chapters support the project name rather than repeating its scale. */
body[data-experience=cinematic] .opening-copy h1{font-size:clamp(56px,5.2vw,88px);line-height:1.12;text-wrap:balance}
body[data-experience=cinematic] :is(.section-heading h2,.case-brief h2,.case-delivery h2,.case-outcome h2,.case-app-showcase h2,.management-section h2){font-size:clamp(36px,3.5vw,60px);line-height:1.12;text-wrap:balance}
body[data-experience=cinematic] .case-close h2{font-size:clamp(44px,4.8vw,80px);line-height:1.12;text-wrap:balance}
body[data-experience=cinematic] :is(.brief-columns h3,.delivery-scope h3){font-size:20px;letter-spacing:-.02em}
body[data-experience=cinematic] .case-next h2{font-size:clamp(60px,8vw,138px)}
@media(min-width:1001px){
 body[data-page=home] .cf-hero h1{font-size:clamp(84px,8vw,142px);max-width:100%}
 body[data-page=home] .cf-hero-heading{width:64%;padding:0}
 /* The action phrases and blue promise frame the offer at the same type size. */
 body[data-page=home] .cf-hero h1 .cf-hero-accent{font-size:.6em}
 body[data-page=home] .cf-hero h1 em{display:block;font-size:.6em;line-height:1.2;margin-top:.22em;white-space:nowrap}
 body[data-page=home] .cf-hero h1 :is(.cf-hero-promise-start,.cf-hero-promise-break){display:none}
}
@media(min-width:1800px){body[data-page=home] .cf-hero h1{font-size:142px}}
@media(min-width:601px) and (max-width:1000px){
 body[data-page=home] .cf-hero h1{font-size:clamp(32px,5.5vw,55px);max-width:100%}
 body[data-page=home] .cf-hero-heading{width:100%;padding:0}
 body[data-page=home] :is(.cf-story-intro h2,.services-intro h2,.cf-work-heading h2){font-size:clamp(60px,8vw,82px)}
}
@media(max-width:950px),(max-height:600px){body[data-experience=cinematic] .cinema-screen{width:100%}}
@media(max-width:600px){
 body[data-page=home] .cf-hero-heading{width:100%;padding:0}
 body[data-page=home] .cf-hero h1{font-size:clamp(35px,11vw,66px);max-width:100%;line-height:1.12;text-wrap:initial}
 body[data-page=home] .cf-hero h1 br{display:block}
 body[data-page=home] :is(.cf-story-intro h2,.services-intro h2,.cf-work-heading h2){font-size:clamp(48px,12.5vw,72px);line-height:1.12}
 body[data-page=home] .cf-closing h2{font-size:clamp(56px,14.5vw,86px);line-height:1.1}
 body[data-page=home] .cf-story-card h3{font-size:32px;line-height:1.12}
 body[data-experience=cinematic] .cinema-title strong{font-size:clamp(48px,14vw,80px);line-height:1.13}
 body[data-experience=cinematic] .opening-copy h1{font-size:clamp(44px,11.2vw,64px);line-height:1.14}
 body[data-experience=cinematic] :is(.section-heading h2,.case-brief h2,.case-delivery h2,.case-outcome h2,.case-app-showcase h2,.management-section h2){font-size:clamp(32px,8.2vw,44px);line-height:1.14}
 body[data-experience=cinematic] .case-close h2{font-size:clamp(40px,9.5vw,56px);line-height:1.14}
}
@media(max-height:600px) and (min-width:700px){body[data-experience=cinematic] .cinema-title strong{font-size:clamp(42px,4.8vw,76px)}}
@media(max-height:700px) and (min-width:1001px){body[data-page=home] .cf-hero h1{font-size:clamp(66px,5.8vw,104px)}}
/* The optional annotation yields to the fixed tools in shallow desktop windows. */
@media(max-height:800px) and (min-width:951px){body[data-experience=cinematic] .cinema-note{display:none}}

/* About: compact chapter statements support a distinctive opening. */
body[data-page=about] .about-hero h1{font-size:clamp(65px,6.4vw,120px);line-height:1.09;letter-spacing:-.012em}
body[data-page=about] :is(.about-story h2,.about-proof-heading h2,.about-principles>h2,.about-location h2){font-size:clamp(42px,4.3vw,78px);line-height:1.14;letter-spacing:-.012em}
body[data-page=about] .closing h2{font-size:clamp(56px,6.6vw,120px);line-height:1.12;letter-spacing:-.012em}
body[data-page=about] .principle-row h3{font-size:clamp(26px,2.1vw,36px);line-height:1.2;letter-spacing:-.03em;text-wrap:balance}
body[data-page=about] .kinetic-mask{padding-top:.1em;margin-top:-.1em;padding-bottom:.16em;margin-bottom:-.16em}
@media(min-width:701px) and (max-width:950px){body[data-page=about] .about-hero h1{font-size:clamp(50px,7.8vw,72px)}body[data-page=about] :is(.about-story h2,.about-proof-heading h2,.about-principles>h2,.about-location h2){font-size:clamp(38px,5.8vw,52px)}}
@media(max-width:700px){body[data-page=about] .about-hero h1{font-size:clamp(45px,10.5vw,74px);line-height:1.14}body[data-page=about] :is(.about-story h2,.about-proof-heading h2,.about-principles>h2,.about-location h2){font-size:clamp(36px,9.3vw,60px);line-height:1.16}body[data-page=about] .closing h2{font-size:clamp(44px,11.5vw,78px);line-height:1.14}body[data-page=about] .principle-row h3{font-size:28px}}
@media(max-height:700px) and (min-width:951px){body[data-page=about] .about-hero h1{font-size:clamp(60px,5.5vw,90px)}}
