@font-face{font-family:HeliosExt;src:url("assets/fonts/HeliosExt-Regular.otf")}@font-face{font-family:HeliosExt;src:url("assets/fonts/HeliosExt-Bold.otf");font-weight:700}@font-face{font-family:"TT Firs Neue";src:url("assets/fonts/TTFirsNeue-Regular.ttf")}@font-face{font-family:"TT Firs Neue";src:url("assets/fonts/TTFirsNeue-DemiBold.ttf");font-weight:700}:root{--ink:#111;--paper:#f4f2ef;--gray:#d3d2cf;--dark:#151515;--pad:54px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"TT Firs Neue",Arial,sans-serif}h1,h2,p{margin-top:0}h1,h2{font-family:HeliosExt,Arial,sans-serif;font-weight:400;font-style:normal;letter-spacing:-.055em}header{height:96px;display:flex;align-items:center;justify-content:space-between;padding:20px var(--pad)}.logo{display:block;width:128px;height:50px;overflow:hidden}.logo img{width:145px;margin-top:1px;filter:grayscale(1)}nav{display:flex;gap:28px}nav a{color:inherit;text-decoration:none;font-size:10px;text-transform:uppercase}.eyebrow,.tiny{font-size:10px;font-weight:700;letter-spacing:.07em;line-height:1.25}.intro{position:relative;min-height:650px;padding:155px var(--pad) 60px;overflow:hidden}.headline{font:400 clamp(72px,8.3vw,128px)/.76 HeliosExt,Arial,sans-serif;letter-spacing:-.08em;text-transform:uppercase;margin-left:18%}.headline b{font-weight:700}.headline span{color:#777}.intro-cta{position:absolute;right:18%;bottom:58px;width:280px}.intro-cta p{max-width:250px;margin:0 0 20px;font-size:14px;line-height:1.36}.black-button{display:inline-flex;align-items:center;justify-content:space-between;gap:44px;min-width:232px;padding:19px 20px;background:var(--ink);color:#fff;text-decoration:none;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.black-button span{font-size:17px;line-height:0}.tiny{position:absolute}.tiny.right{right:var(--pad);top:38px;text-align:right}.manifesto{padding:105px var(--pad);background:var(--dark);color:#fff;text-align:center}.manifesto h1{margin:30px auto;font-size:48px;line-height:.93}.manifesto-copy{max-width:390px;margin:0 auto 30px;font-size:13px;line-height:1.4}.manifesto a{font-size:11px;color:#fff;text-decoration:none}.studio{position:relative;min-height:750px;padding:150px var(--pad) 100px}.studio-copy{width:38%;margin-left:54%}.studio h2{margin:28px 0;font-size:61px;line-height:.88;text-transform:uppercase}.studio-copy>p:not(.eyebrow){max-width:280px;font-size:14px;line-height:1.42}.studio-copy a,.services>a{font-size:11px;color:inherit;text-decoration:none}.portrait{position:absolute;left:var(--pad);bottom:120px;width:190px;height:240px;background:#aaa;display:grid;place-items:center;text-align:center;font-size:10px}.client-line{position:absolute;bottom:0;left:0;width:100%;display:flex;gap:35px;align-items:center;padding:35px var(--pad);white-space:nowrap;font-size:11px}.client-line span{font-size:9px;color:#777}.client-line b{font:400 24px HeliosExt}.services{position:relative;min-height:670px;padding:100px var(--pad)}.services h2{margin:25px 0;font-size:76px;line-height:.82;text-transform:uppercase}.service-image{position:absolute;left:var(--pad);bottom:90px;width:195px;height:230px;display:grid;place-items:center;background:#bebeba;text-align:center;font-size:10px}.service-list{position:absolute;right:var(--pad);bottom:105px;display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:12px;text-transform:uppercase}.services>a{position:absolute;left:38%;bottom:130px}.statement{display:grid;grid-template-columns:1fr 1fr;min-height:470px;background:#252525;color:#fff}.statement-media{display:grid;place-items:center;background:#1b1b1b;font-size:10px}.statement>div:last-child{padding:90px}.statement h2{margin:25px 0;font-size:56px;line-height:.87;text-transform:uppercase}.statement p:last-child{max-width:270px;font-size:14px;line-height:1.4}.portfolio{position:relative;padding:145px var(--pad) 115px;min-height:780px}.portfolio h2{margin:25px 0;font-size:71px;line-height:.84;text-transform:uppercase}.portfolio-copy{position:absolute;top:180px;right:18%;max-width:230px;font-size:13px;line-height:1.38}.portfolio>.black-button{position:absolute;top:310px;right:25%}.portfolio-grid{position:absolute;left:22%;right:12%;bottom:105px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.portfolio-grid div{height:205px;display:grid;place-items:center;background:#cac9c6;text-align:center;font-size:10px}.portfolio-grid div:nth-child(2){background:#9d9d9a}.portfolio-grid div:nth-child(3){background:#deddda}.contact{padding:130px var(--pad);background:#dddcd9;text-align:center}.contact h2{margin:28px auto 35px;font-size:69px;line-height:.85;text-transform:uppercase}footer{display:flex;justify-content:space-between;padding:24px var(--pad);background:#111;color:#fff;font-size:10px;letter-spacing:.05em}@media(max-width:900px){:root{--pad:20px}header{height:76px;padding:16px var(--pad)}.logo{width:106px;height:43px}.logo img{width:120px}nav{gap:12px}nav a:not(:last-child){display:none}.intro{min-height:570px;padding-top:120px}.headline{margin-left:0;font-size:58px}.intro-cta{right:auto;left:var(--pad);bottom:42px;width:calc(100% - 40px)}.intro-cta p{max-width:270px;margin-bottom:16px}.black-button{min-width:240px;padding:18px 20px}.tiny.right{right:var(--pad);top:24px}.manifesto{padding:75px var(--pad)}.manifesto h1{font-size:35px}.studio{min-height:700px;padding:80px var(--pad)}.studio-copy{width:100%;margin:0}.studio h2{font-size:46px}.portrait{left:var(--pad);bottom:95px;width:140px;height:175px}.client-line{overflow:hidden;padding:27px var(--pad);gap:20px}.services{min-height:570px;padding:80px var(--pad)}.services h2{font-size:55px}.service-image{bottom:70px;width:135px;height:160px}.service-list{bottom:75px;font-size:10px}.services>a{left:47%;bottom:190px}.statement{grid-template-columns:1fr;min-height:610px}.statement-media{min-height:230px}.statement>div:last-child{padding:60px var(--pad)}.statement h2{font-size:43px}.portfolio{min-height:690px;padding:85px var(--pad)}.portfolio h2{font-size:54px}.portfolio-copy{position:static;margin:35px 0;max-width:270px}.portfolio>.black-button{position:static}.portfolio-grid{position:static;margin-top:75px;grid-template-columns:repeat(3,1fr);gap:8px}.portfolio-grid div{height:120px}.contact{padding:85px var(--pad)}.contact h2{font-size:52px}footer{flex-direction:column;gap:10px;padding:24px var(--pad)}}
.headline .letter-y{display:inline-flex!important;color:inherit!important;white-space:nowrap!important}.headline .letter-y-stem{margin-left:-.17em!important}.tiny.left,.floating{display:none!important}
.headline .letter-y>span{color:var(--ink)!important}
.headline .letter-y-stem{margin-left:.08em!important}
.headline .letter-y-stem{margin-left:.04em!important}
.headline{line-height:.95!important}
.headline{line-height:.86!important}
header{background:#eeece8}
header{position:sticky;top:0;z-index:20}
.intro::before{position:absolute;z-index:0;inset:0 var(--pad);pointer-events:none;content:"";background-image:repeating-linear-gradient(to right,rgba(255,49,49,.2) 0 1px,transparent 1px calc((100% - 264px)/12 + 24px)),repeating-linear-gradient(to bottom,rgba(255,49,49,.2) 0 1px,transparent 1px 96px);border-right:1px solid rgba(255,49,49,.2)}.intro>*{position:relative;z-index:1}@media(max-width:900px){.intro::before{background-image:repeating-linear-gradient(to right,rgba(255,49,49,.2) 0 1px,transparent 1px calc(25% + 5px)),repeating-linear-gradient(to bottom,rgba(255,49,49,.2) 0 1px,transparent 1px 64px)}}
.intro::before{content:none!important}header,main>section,footer{--grid-gutter:24px;--grid-column:calc((100% - (2 * var(--pad)) - (11 * var(--grid-gutter)))/12);isolation:isolate}header::after,main>section::after,footer::after{position:absolute;z-index:0;inset:0;pointer-events:none;content:"";background-image:linear-gradient(to right,rgba(255,0,0,.1) 0 var(--grid-column),transparent var(--grid-column) calc(var(--grid-column) + var(--grid-gutter)));background-position:var(--pad) 0;background-size:calc(var(--grid-column) + var(--grid-gutter)) 100%;background-repeat:repeat-x}header>*,main>section>*,footer>*{position:relative;z-index:1}@media(max-width:900px){header,main>section,footer{--grid-gutter:12px;--grid-column:calc((100% - (2 * var(--pad)) - (3 * var(--grid-gutter)))/4)}}
header::after,main>section::after,footer::after{background-image:linear-gradient(to right,rgba(255,0,0,.1) 0 80.36%,transparent 80.36% 100%)!important;background-position:0 0!important;background-size:8.333333% 100%!important;background-repeat:repeat-x!important}@media(max-width:900px){header::after,main>section::after,footer::after{background-image:linear-gradient(to right,rgba(255,0,0,.1) 0 89.16%,transparent 89.16% 100%)!important;background-size:25% 100%!important}}
header::after,main>section::after,footer::after{background-image:linear-gradient(to right,rgba(255,0,0,.2) 0 80.36%,transparent 80.36% 100%)!important}.intro-cta,.intro .tiny{position:absolute!important}.manifesto{background:var(--paper)!important;color:var(--ink)!important}.manifesto a{color:var(--ink)!important}
header::after,main>section::after,footer::after{content:none!important}.design-grid{position:fixed;z-index:15;inset:0;display:none;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding:0 48px;pointer-events:none}.grid-is-visible .design-grid{display:grid}.design-grid i{background:rgba(255,0,0,.2)}.grid-toggle{margin-left:18px;padding:7px 9px;border:1px solid currentColor;background:transparent;color:var(--ink);font:700 9px "TT Firs Neue",Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}.grid-toggle.is-active{background:var(--ink);color:var(--paper)}@media(max-width:900px){.design-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0 20px}.design-grid i:nth-child(n+5){display:none}.grid-toggle{margin-left:8px}}
.manifesto{background:var(--dark)!important;color:#fff!important}.manifesto a{color:#fff!important}
.headline{margin-left:16.6667%!important}.intro-cta{right:auto!important;left:66.6667%!important}@media(max-width:900px){.headline{margin-left:0!important}.intro-cta{right:auto!important;left:var(--pad)!important}}
.design-grid{counter-reset:grid-column}.design-grid i{position:relative;counter-increment:grid-column}.design-grid i::before{position:absolute;top:112px;left:8px;content:counter(grid-column);color:#f00;font:700 10px "TT Firs Neue",Arial,sans-serif;line-height:1}@media(max-width:900px){.design-grid i::before{top:88px;left:4px}}
.headline{margin-left:calc(16.6667% - 4px)!important}
.intro-cta{right:calc(8.3333% + 42px)!important;width:auto!important}.intro-cta p{line-height:1.24!important}.intro .black-button{width:100%;min-width:0;padding:29px 26px;font-size:16.5px}.intro .black-button span{font-size:25px}@media(max-width:900px){.intro-cta{right:auto!important;width:calc(100% - 40px)!important}.intro .black-button{padding:22px 20px;font-size:14px}.intro .black-button span{font-size:21px}}
.intro-cta p{width:420px!important;max-width:none!important;white-space:nowrap}@media(max-width:900px){.intro-cta p{width:auto!important;max-width:270px!important;white-space:normal}}
.intro .black-button{transition:opacity .16s ease}.intro .black-button:hover{opacity:.72}.intro .black-button:focus-visible{outline:2px solid #f00;outline-offset:4px}@media(prefers-reduced-motion:reduce){.intro .black-button{transition:none}}
.studio{min-height:180px!important;padding:0!important}.client-line{top:0;bottom:auto;height:100%;padding:35px var(--pad)!important}
.studio{min-height:0!important;padding:0 0 48px!important}.clients-marquee{width:100%;overflow:hidden;padding:58px 0 20px}.clients-track{display:flex;width:max-content;animation:clients-scroll 56s linear infinite}.client-set{display:flex;flex:none;align-items:center;gap:72px;padding-right:72px}.client-set img{display:block;width:118px;height:56px;object-fit:contain;filter:grayscale(1) brightness(0);opacity:.72}@keyframes clients-scroll{to{transform:translateX(-50%)}}.clients-label{margin:0;text-align:center;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}@media(max-width:900px){.studio{padding-bottom:32px!important}.clients-marquee{padding:42px 0 16px}.client-set{gap:40px;padding-right:40px}.client-set img{width:88px;height:42px}.clients-track{animation-duration:42s}}@media(prefers-reduced-motion:reduce){.clients-track{animation:none}}
.clients-marquee{padding:29px 0!important}
.clients-marquee{padding:58px 0 29px!important}
.studio{background:var(--dark)!important;color:#fff!important;padding:0 0 58px!important}.studio .clients-marquee{padding:58px 0 0!important}.studio .clients-label{display:none}.studio .client-set img{filter:grayscale(1) brightness(0) invert(1)!important;opacity:.76}.studio .client-set img:nth-child(3n){opacity:.48}.studio .client-set img:nth-child(4n){opacity:.62}
.studio{padding-bottom:116px!important}.studio .clients-marquee{padding-top:0!important}

/* Services — editorial list layout */
.services{min-height:860px;padding:126px var(--pad) 96px;background:var(--paper)}
.services-kicker{display:flex;align-items:baseline;gap:10px}
.services-kicker .eyebrow,.services-kicker>p:last-child{margin:0;font-size:16px;line-height:1;font-weight:700;letter-spacing:-.035em;text-transform:uppercase}
.services-kicker>p:last-child{padding-bottom:4px;border-bottom:2px solid currentColor}
.services h2{margin:132px 0 0;font-size:clamp(76px,7.8vw,132px);line-height:.83;letter-spacing:-.075em}
.services .service-image,.services>a{display:none}
.services .service-list{position:absolute;right:auto;bottom:84px;left:48.5%;width:min(690px,calc(51.5% - var(--pad)));display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:0;list-style:none;text-transform:none}
.service-list li{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:baseline;column-gap:20px;padding:5px 0}
.service-list a{color:inherit;font:400 clamp(27px,2.3vw,42px)/1 HeliosExt,Arial,sans-serif;letter-spacing:-.06em;text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.service-list span{max-width:420px;font-size:clamp(12px,1.05vw,17px);line-height:1.2}
@media(max-width:900px){.services{min-height:0;padding:76px var(--pad) 72px}.services-kicker .eyebrow,.services-kicker>p:last-child{font-size:13px}.services h2{margin-top:72px;font-size:clamp(56px,16vw,82px);line-height:.84}.services .service-list{position:static;width:100%;margin-top:70px}.service-list li{grid-template-columns:1fr;gap:9px;padding:13px 0}.service-list a{font-size:31px;text-underline-offset:6px}.service-list span{max-width:320px;font-size:14px;line-height:1.3}}

/* Portfolio — long-form editorial case gallery */
.portfolio{min-height:2240px;padding:144px var(--pad) 120px;background:var(--paper)}
.portfolio-title{max-width:1180px;margin:0 auto;color:#beb29f;font:400 clamp(62px,7.15vw,116px)/.82 HeliosExt,Arial,sans-serif;letter-spacing:-.075em;text-align:center;text-transform:uppercase}
.portfolio .portfolio-grid{position:relative;inset:auto;left:auto;right:auto;bottom:auto;display:block;margin:172px 0 0;min-height:1420px}
.project-card{position:absolute;margin:0}.project-card a{display:block;color:var(--ink);text-decoration:none}.project-card--one{top:0;left:4%;width:38%}.project-card--two{top:360px;left:59%;width:30%}.project-card--three{top:850px;left:18%;width:39%}.project-media{position:relative;display:grid;aspect-ratio:4/3;place-items:center;overflow:hidden;background:#aaa7a0;color:#f4f2ef;font-size:10px;letter-spacing:.08em}.project-media::before,.project-media::after{position:absolute;content:"";inset:0;background:linear-gradient(130deg,rgba(255,255,255,.14),transparent 45%),repeating-linear-gradient(90deg,transparent 0 34px,rgba(0,0,0,.035) 35px 36px)}.project-media::after{background:radial-gradient(circle at 72% 24%,rgba(244,242,239,.42),transparent 29%),linear-gradient(40deg,rgba(0,0,0,.2),transparent 55%);mix-blend-mode:multiply}.project-media span{position:relative;z-index:1}.project-card--one .project-media{background:#9d9e9a}.project-card--two .project-media{background:#7e827c}.project-card--three .project-media{background:#bbb6ac}.project-card h3{margin:16px 0 6px;font-size:clamp(15px,1.45vw,24px);font-weight:400;letter-spacing:-.045em;text-transform:uppercase}.project-card h3::before{content:"▪ ";font-size:.65em;vertical-align:middle}.project-card p{max-width:360px;margin:0;font-size:11px;line-height:1.3;text-transform:uppercase}.project-card a:hover .project-media{filter:contrast(1.1);transform:scale(.985)}.project-media{transition:transform .3s ease,filter .3s ease}.portfolio-all{position:absolute;right:var(--pad);bottom:122px;color:inherit;font-size:12px;text-decoration:none;text-transform:uppercase}.portfolio-all:hover{text-decoration:underline;text-underline-offset:5px}
@media(max-width:900px){.portfolio{min-height:0;padding:88px var(--pad) 76px}.portfolio-title{max-width:360px;font-size:clamp(43px,12vw,60px);line-height:.85}.portfolio .portfolio-grid{display:flex;min-height:0;flex-direction:column;gap:72px;margin-top:96px}.project-card,.project-card--one,.project-card--two,.project-card--three{position:static;width:100%}.project-card--two{width:78%;align-self:flex-end}.project-card--three{width:88%;align-self:flex-start}.project-card h3{margin-top:12px;font-size:19px}.project-card p{font-size:10px}.portfolio-all{position:static;display:inline-block;margin-top:72px;font-size:11px}}

.project-card{will-change:transform}
@media(max-width:900px){.project-card{will-change:auto}}

/* Case layout: vertical rhythm and alternating alignment inspired by the reference. */
.portfolio{min-height:0;padding:132px var(--pad) 152px}.portfolio-title{display:none}.portfolio-head .eyebrow{margin-bottom:24px}.portfolio-head h2{margin:0;font-size:clamp(64px,5.4vw,88px);line-height:.84;text-transform:uppercase}.portfolio .portfolio-grid{display:flex;min-height:0;flex-direction:column;gap:176px;margin-top:128px}.project-card,.project-card--one,.project-card--two,.project-card--three{position:static;width:auto;margin:0}.project-card--one{width:min(44vw,690px);margin-left:4%}.project-card--two{width:min(34vw,540px);align-self:flex-end;margin-right:10%}.project-card--three{width:min(40vw,630px);margin-left:18%}.project-media{width:100%;margin:0;aspect-ratio:1/1.36;background:#aaa}.project-card--two .project-media{aspect-ratio:1.5/1}.project-media::before,.project-media::after{display:none}.project-media img{display:block;width:100%;height:116%;object-fit:cover;will-change:transform}.project-card h3{margin-top:18px}.portfolio-all{position:static;display:inline-block;margin-top:120px}.project-card{will-change:auto}
@media(max-width:900px){.portfolio{padding:88px var(--pad) 76px}.portfolio-head h2{font-size:58px}.portfolio .portfolio-grid{gap:80px;margin-top:80px}.project-card--one,.project-card--two,.project-card--three{width:100%;margin:0}.project-card--two{width:82%;align-self:flex-end}.project-card--three{width:90%}.project-media,.project-card--two .project-media{aspect-ratio:1/1.2}.project-card--two .project-media{aspect-ratio:1.35/1}.portfolio-all{margin-top:76px}.project-media img{will-change:auto}}

/* Cherry-gradient art direction */
:root{--cherry:#7c2039;--wine:#35101c;--rose:#d58791;--ivory:#f7f1ee}
header{background:rgba(247,241,238,.9)!important;border-bottom:1px solid rgba(124,32,57,.24);backdrop-filter:blur(14px)}
.grid-toggle{border-color:var(--cherry);color:var(--cherry)}.grid-toggle.is-active{background:var(--cherry);color:var(--ivory)}
.intro{min-height:720px;background:radial-gradient(ellipse 66% 94% at 89% -18%,rgba(255,235,229,.72) 0 14%,transparent 55%),radial-gradient(ellipse 78% 92% at -9% 111%,rgba(225,139,151,.73) 0 7%,transparent 57%),linear-gradient(137deg,#2c0c16 0%,#64162d 38%,#a84156 68%,#ead6d1 100%)}
.intro::before,main>section.intro::after{display:none!important}.intro>*{z-index:1}.intro .headline,.intro .headline span,.intro .headline .letter-y>span{color:#fff!important;text-shadow:0 1px 18px rgba(48,8,20,.2)}.intro .tiny,.intro .intro-cta p{color:#fff}.intro .black-button{background:var(--ivory);color:var(--wine)}.intro .black-button:hover{background:#fff;opacity:1}.intro .black-button:focus-visible{outline-color:#fff}
.manifesto{background:linear-gradient(135deg,var(--wine),#521329)!important}.studio{background:#4a1426!important}.statement{background:var(--wine)}.statement-media{background:#270913}.black-button{background:var(--cherry)}.black-button:hover{background:var(--wine)}footer{background:var(--wine)}
.services-kicker>p:last-child{border-color:var(--cherry)}.service-list a:hover,.portfolio-all:hover{color:var(--cherry)}
@media(max-width:900px){.intro{min-height:620px;background:radial-gradient(ellipse 110% 76% at 96% 0,rgba(255,227,222,.55),transparent 60%),radial-gradient(ellipse 130% 100% at 25% 102%,transparent 0 53%,rgba(255,244,240,.34) 53.2% 53.5%,transparent 53.7%),linear-gradient(143deg,#35101c 0%,#7c2039 55%,#d88991 100%)}main>section.intro::after{background-image:linear-gradient(151deg,transparent 0 51%,rgba(255,247,245,.3) 51.1% 51.25%,transparent 51.4%)!important}}

/* Transparent hero navigation */
body{background:var(--paper)}header{position:absolute!important;top:0;right:0;left:0;width:100%;background:transparent!important;border-bottom:0!important;backdrop-filter:none!important}.intro{min-height:816px;padding-top:251px;background:radial-gradient(ellipse 66% 94% at 89% -18%,rgba(255,235,229,.72) 0 14%,transparent 55%),radial-gradient(ellipse 78% 92% at -9% 111%,rgba(225,139,151,.73) 0 7%,transparent 57%),linear-gradient(137deg,#2c0c16 0%,#64162d 38%,#a84156 68%,#ead6d1 100%)}header .logo img{filter:grayscale(1) brightness(0) invert(1)}header nav a{color:#fff}.grid-toggle{border-color:rgba(255,255,255,.75);color:#fff}.grid-toggle.is-active{background:#fff;color:var(--wine)}@media(max-width:900px){.intro{min-height:696px;padding-top:196px;background:radial-gradient(ellipse 110% 76% at 96% 0,rgba(255,227,222,.55),transparent 60%),linear-gradient(143deg,#35101c 0%,#7c2039 55%,#d88991 100%)}}

/* Courage Buro colour system */
:root{--ink:#101010;--paper:#eae6db;--dark:#392c1f;--cherry:#ae3033;--wine:#7d3135;--rose:#cd4144;--peach:#ecbca7;--ivory:#fff;--signal-red:#be0b11;--signal-red-hover:#e1000e;--signal-red-bright:#f40000;--graphite:#484746}
body{color:var(--ink);background:var(--paper)}.intro{background:radial-gradient(ellipse 68% 96% at 90% -16%,rgba(255,255,255,.28) 0 13%,transparent 56%),radial-gradient(ellipse 82% 96% at -8% 112%,rgba(236,188,167,.44) 0 6%,transparent 58%),linear-gradient(137deg,#392c1f 0%,#7d3135 37%,#ae3033 68%,#ecbca7 100%)}.manifesto{background:linear-gradient(135deg,#392c1f,#7d3135)!important}.studio{background:#392c1f!important}.statement{background:#392c1f}.statement-media{background:#101010}footer{background:#392c1f}.black-button{background:var(--signal-red)}.black-button:hover{background:var(--signal-red-hover)}.intro .black-button{background:var(--ivory);color:#392c1f}.intro .black-button:hover{background:var(--peach)}.grid-toggle.is-active{background:var(--signal-red);color:#fff}.services-kicker>p:last-child{border-color:var(--signal-red)}.service-list a:hover,.portfolio-all:hover{color:var(--signal-red)}.project-card--one .project-media{background:#7d3135}.project-card--two .project-media{background:#ae3033}.project-card--three .project-media{background:#484746}@media(max-width:900px){.intro{background:radial-gradient(ellipse 112% 78% at 96% 0,rgba(255,255,255,.22),transparent 60%),linear-gradient(143deg,#392c1f 0%,#7d3135 54%,#ecbca7 100%)}}
body{color:var(--ink);background:var(--paper)}.intro{background:radial-gradient(ellipse 68% 96% at 90% -16%,rgba(255,255,255,.24) 0 13%,transparent 56%),radial-gradient(ellipse 82% 96% at -8% 112%,rgba(236,188,167,.4) 0 6%,transparent 58%),linear-gradient(137deg,#392c1f 0%,#7d3135 27%,#be0b11 49%,#f40000 72%,#ecbca7 100%)}.black-button{background:#f40000}.black-button:hover{background:#e1000e}.grid-toggle.is-active{background:#f40000}.services-kicker>p:last-child{border-color:#f40000}.service-list a:hover,.portfolio-all:hover{color:#f40000}.project-card--two .project-media{background:#f40000}@media(max-width:900px){.intro{background:radial-gradient(ellipse 112% 78% at 96% 0,rgba(255,255,255,.2),transparent 60%),linear-gradient(143deg,#392c1f 0%,#be0b11 47%,#f40000 74%,#ecbca7 100%)}}

/* Local gradient comparison: 1 — editorial, 2 — saturated, 3 — Japanese UI. */
.header-tools{display:flex;align-items:center;gap:8px}.gradient-toggle{padding:7px 9px;border:1px solid rgba(255,255,255,.75);background:transparent;color:#fff;font:700 9px "TT Firs Neue",Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}.gradient-toggle:hover{background:#f40000;border-color:#f40000}.gradient-toggle:focus-visible{outline:2px solid #fff;outline-offset:3px}
body[data-gradient="gradient-2"] .intro{background:radial-gradient(circle at 68% 42%,rgba(255,255,255,.16) 0 4%,transparent 29%),radial-gradient(ellipse 90% 115% at 106% 104%,rgba(236,188,167,.52) 0 4%,transparent 55%),linear-gradient(128deg,#392c1f 0%,#7d3135 20%,#be0b11 43%,#f40000 66%,#e1000e 100%)}
body[data-gradient="gradient-3"] .intro{background:radial-gradient(ellipse 64% 120% at 84% -12%,rgba(255,255,255,.32) 0 9%,transparent 52%),radial-gradient(ellipse 92% 84% at 8% 115%,rgba(236,188,167,.5) 0 9%,transparent 58%),linear-gradient(145deg,#101010 0%,#7d3135 25%,#f40000 54%,#ecbca7 100%)}
body[data-gradient="gradient-4"] .intro{background:transparent}body[data-gradient="gradient-4"] main>section.intro::before,body[data-gradient="gradient-4"] main>section.intro::after{position:absolute;z-index:0;inset:0;display:block!important;pointer-events:none;content:""!important;background-position:center;background-size:cover}body[data-gradient="gradient-4"] main>section.intro::before{background-image:radial-gradient(circle at 68% 42%,rgba(255,255,255,.16) 0 4%,transparent 29%),radial-gradient(ellipse 90% 115% at 106% 104%,rgba(236,188,167,.52) 0 4%,transparent 55%),linear-gradient(128deg,#392c1f 0%,#7d3135 20%,#be0b11 43%,#f40000 66%,#e1000e 100%)}body[data-gradient="gradient-4"] main>section.intro::after{background-image:radial-gradient(ellipse 64% 120% at 84% -12%,rgba(255,255,255,.32) 0 9%,transparent 52%),radial-gradient(ellipse 92% 84% at 8% 115%,rgba(236,188,167,.5) 0 9%,transparent 58%),linear-gradient(145deg,#101010 0%,#7d3135 25%,#f40000 54%,#ecbca7 100%);animation:gradient-crossfade 10s cubic-bezier(.45,0,.55,1) infinite alternate}@keyframes gradient-crossfade{0%,18%{opacity:0}82%,100%{opacity:1}}
@media(max-width:900px){.header-tools{display:none}body[data-gradient="gradient-2"] .intro{background:radial-gradient(circle at 70% 38%,rgba(255,255,255,.13),transparent 30%),linear-gradient(132deg,#392c1f 0%,#be0b11 43%,#f40000 72%,#e1000e 100%)}body[data-gradient="gradient-3"] .intro{background:radial-gradient(ellipse 96% 72% at 90% 0,rgba(255,255,255,.26),transparent 58%),linear-gradient(145deg,#101010 0%,#7d3135 28%,#f40000 64%,#ecbca7 100%)}}
@media(max-width:900px){body[data-gradient="gradient-4"] main>section.intro::before{background-image:radial-gradient(circle at 70% 38%,rgba(255,255,255,.13),transparent 30%),linear-gradient(132deg,#392c1f 0%,#be0b11 43%,#f40000 72%,#e1000e 100%)}body[data-gradient="gradient-4"] main>section.intro::after{background-image:radial-gradient(ellipse 96% 72% at 90% 0,rgba(255,255,255,.26),transparent 58%),linear-gradient(145deg,#101010 0%,#7d3135 28%,#f40000 64%,#ecbca7 100%)}}@media(prefers-reduced-motion:reduce){body[data-gradient="gradient-4"] main>section.intro::after{animation:none;opacity:.5}}

/* Final hero: no grid, no toggles — permanent crossfade of gradients 2 and 3. */
.design-grid,.grid-is-visible .design-grid{display:none!important}.intro{background:transparent!important}.intro::before,main>section.intro::after{position:absolute;z-index:0;inset:0;display:block!important;pointer-events:none;content:""!important;background-position:center!important;background-size:100% 100%!important;background-repeat:no-repeat!important}.intro::before{background-image:radial-gradient(circle at 68% 42%,rgba(255,255,255,.16) 0 4%,transparent 29%),radial-gradient(ellipse 90% 115% at 106% 104%,rgba(236,188,167,.52) 0 4%,transparent 55%),linear-gradient(128deg,#392c1f 0%,#7d3135 20%,#be0b11 43%,#f40000 66%,#e1000e 100%)!important}main>section.intro::after{background-image:radial-gradient(ellipse 64% 120% at 84% -12%,rgba(255,255,255,.32) 0 9%,transparent 52%),radial-gradient(ellipse 92% 84% at 8% 115%,rgba(236,188,167,.5) 0 9%,transparent 58%),linear-gradient(145deg,#101010 0%,#7d3135 25%,#f40000 54%,#ecbca7 100%)!important;animation:gradient-crossfade 10s cubic-bezier(.45,0,.55,1) infinite alternate}@media(max-width:900px){.intro::before{background-image:radial-gradient(circle at 70% 38%,rgba(255,255,255,.13),transparent 30%),linear-gradient(132deg,#392c1f 0%,#be0b11 43%,#f40000 72%,#e1000e 100%)!important}main>section.intro::after{background-image:radial-gradient(ellipse 96% 72% at 90% 0,rgba(255,255,255,.26),transparent 58%),linear-gradient(145deg,#101010 0%,#7d3135 28%,#f40000 64%,#ecbca7 100%)!important}}@media(prefers-reduced-motion:reduce){main>section.intro::after{animation:none;opacity:.5}}

/* Full-screen hero and editorial navigation */
header{top:24px!important;height:96px;padding:20px var(--pad)}header nav{position:absolute;right:var(--pad);left:auto;display:flex;gap:42px}header nav a{font-size:clamp(17px,1.45vw,28px);font-weight:400;letter-spacing:-.05em;line-height:1;text-transform:capitalize}.intro{min-height:100dvh!important}.intro .tiny.right{top:220px}.intro-cta{bottom:max(58px,calc(58px + 100dvh - 816px))!important}
@media(max-width:900px){header{top:0!important;height:76px;padding:16px var(--pad)}header nav{position:static;gap:12px}header nav a{font-size:10px;letter-spacing:0;text-transform:uppercase}.intro{min-height:100dvh!important}.intro .tiny.right{top:100px}.intro-cta{bottom:42px!important}}

main>section.intro::after{animation-duration:5s!important}

/* V2 hero — #680210 is the dominant accent, carried through both animated layers. */
.intro::before{background-image:radial-gradient(circle at 68% 42%,rgba(255,255,255,.16) 0 4%,transparent 29%),radial-gradient(ellipse 90% 115% at 106% 104%,rgba(231,185,177,.5) 0 4%,transparent 55%),linear-gradient(128deg,#160003 0%,#3c0912 20%,#680210 43%,#9d474a 66%,#e7b9b1 100%)!important}
main>section.intro::after{background-image:radial-gradient(ellipse 64% 120% at 84% -12%,rgba(255,255,255,.28) 0 9%,transparent 52%),radial-gradient(ellipse 92% 84% at 8% 115%,rgba(231,185,177,.46) 0 9%,transparent 58%),linear-gradient(145deg,#120004 0%,#520b18 25%,#680210 54%,#e9c5bb 100%)!important}
@media(max-width:900px){.intro::before{background-image:radial-gradient(circle at 70% 38%,rgba(255,255,255,.13),transparent 30%),linear-gradient(132deg,#160003 0%,#680210 43%,#9d474a 72%,#e7b9b1 100%)!important}main>section.intro::after{background-image:radial-gradient(ellipse 96% 72% at 90% 0,rgba(255,255,255,.24),transparent 58%),linear-gradient(145deg,#120004 0%,#520b18 28%,#680210 64%,#e9c5bb 100%)!important}}

/* Hero headline — enlarged, vertically centred, without final punctuation. */
.intro .headline{position:absolute!important;top:50%;margin-top:0!important;margin-bottom:0!important;font-size:clamp(101px,11.62vw,179px)!important;transform:translateY(-50%)}.intro .headline>span:last-child{display:none!important}
@media(max-width:900px){.intro .headline{top:50%;font-size:clamp(66px,17vw,88px)!important;transform:translateY(-50%)}}

.intro .headline{margin-left:calc(8.3333% - 4px)!important}
@media(max-width:900px){.intro .headline{margin-left:0!important}}

/* Shared black field for the manifesto and the client strip. */
.manifesto,.studio{background:#101010!important}

/* Manifesto — four-part editorial layout. */
.manifesto{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px;align-content:center;min-height:560px;padding:96px var(--pad)!important;text-align:left}
.manifesto .eyebrow{grid-column:1;align-self:end;margin:0 0 28px}
.manifesto h1{grid-column:1 / span 2;max-width:760px;margin:0;font-size:48px;line-height:.93}
.manifesto-copy{grid-column:3;max-width:340px;margin:36px 0 0;font-size:13px;line-height:1.4}
.manifesto a{grid-column:3;justify-self:start;margin-top:28px;font-size:11px}
.manifesto .eyebrow,.manifesto>a{display:none}
@media(max-width:900px){.manifesto{display:block;min-height:0;padding:76px var(--pad)!important}.manifesto h1{max-width:620px;font-size:35px}.manifesto-copy{max-width:340px;margin-top:36px}}

/* Closing signature — deliberately fills the final screen without touching its edges. */
.closing-signature{display:flex;align-items:flex-end;min-height:clamp(320px,38vw,560px);overflow:hidden;padding:48px var(--pad) 112px;background:#392c1f;color:#fff}
.closing-signature p{width:max-content;max-width:none;margin:0;white-space:nowrap;font:400 clamp(74px,15.4vw,326px)/.78 HeliosExt,Arial,sans-serif;letter-spacing:-.095em;text-transform:lowercase}
@media(max-width:900px){.closing-signature{min-height:300px;padding:48px var(--pad) 80px}.closing-signature p{font-size:18.1vw;letter-spacing:-.09em}}

/* Lightweight edge haze: a composited gradient instead of a scroll-expensive live backdrop blur. */
.top-edge-blur{position:fixed;top:0;left:0;width:100%;height:min(26vh,300px);z-index:90;pointer-events:none;background:linear-gradient(to bottom,rgba(16,16,16,.18) 0%,rgba(16,16,16,.08) 35%,transparent 100%)}
header{z-index:100}
@media(max-width:900px){.top-edge-blur{height:20vh}}

/* Services — two-column editorial offer list. */
.services{display:grid;grid-template-columns:minmax(260px,31.5%) minmax(0,1fr);column-gap:clamp(48px,7vw,136px);align-items:stretch;min-height:760px;padding:48px var(--pad) 56px;background:var(--paper)}
.services-side{display:flex;min-height:656px;flex-direction:column;align-items:flex-start}
.services-kicker{gap:9px}.services-kicker .eyebrow,.services-kicker>p:last-child{font-size:13px;letter-spacing:-.035em}.services-kicker>p:last-child{padding-bottom:3px;border-bottom:2px solid #f40000}
.services h2{margin:28px 0 0;font-size:clamp(37px,3.2vw,56px);line-height:.88;letter-spacing:-.075em;text-transform:uppercase}
.services-placeholder{display:grid;width:min(100%,352px);aspect-ratio:1/1.14;place-items:center;margin:auto 0 20px;background:linear-gradient(145deg,#9f9d97,#d0cec8);color:#101010;font-size:10px;letter-spacing:.1em;text-align:center}
.services-proposal{color:inherit;font-size:10px;font-weight:700;letter-spacing:.04em;text-decoration:none;text-transform:uppercase}
.services .service-list{position:static;align-self:start;width:100%;display:block;margin:18px 0 0;padding:0;list-style:none}
.service-list li{display:block;padding:12px 0 14px;border-top:1px solid rgba(16,16,16,.14)}
.service-list li:last-child{border-bottom:1px solid rgba(16,16,16,.14)}
.service-list a{display:block;color:inherit;font:400 clamp(34px,3.3vw,61px)/.98 HeliosExt,Arial,sans-serif;letter-spacing:-.07em;text-decoration:none}
.service-list a:hover{color:#f40000}.service-list span{display:none}
@media(max-width:900px){.services{display:block;min-height:0;padding:48px var(--pad) 72px}.services-side{min-height:0}.services h2{font-size:clamp(43px,12vw,66px);margin-top:24px}.services-placeholder{width:min(70vw,290px);margin:56px 0 18px}.services .service-list{margin-top:56px}.service-list li{padding:10px 0 12px}.service-list a{font-size:clamp(31px,9vw,48px)}.services-proposal{font-size:10px}}

/* Services — minimal, numbered list matching the reference composition. */
.services{display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:60px;align-items:start;min-height:810px;padding:96px clamp(48px,12.6vw,242px) 80px;background:var(--paper)}.services-side{min-height:0}.services-kicker{margin:0!important;font-size:22px!important;font-weight:400!important;letter-spacing:-.04em!important;line-height:1.1!important}.services .service-list{align-self:start;width:100%;margin:64px 0 0;padding:0;list-style:none}.service-list li{padding:0;border:0}.service-list li:not(:last-child){border-bottom:1px solid rgba(16,16,16,.22)}.service-list a{display:grid;grid-template-columns:168px minmax(0,1fr) auto;align-items:center;gap:18px;min-height:117px;color:var(--ink);font:400 clamp(46px,3.2vw,62px)/.94 HeliosExt,Arial,sans-serif;letter-spacing:-.07em;text-decoration:none;text-transform:uppercase;transition:color .25s ease}.service-list .service-number{display:block;color:#9a9a9a;font:400 22px/1 "TT Firs Neue",Arial,sans-serif;letter-spacing:-.04em}.service-list .service-name{display:block;white-space:nowrap}.service-list .service-arrow{display:block;font:400 clamp(44px,3.1vw,60px)/.7 "TT Firs Neue",Arial,sans-serif;letter-spacing:-.08em}.service-list a:hover{color:#f40000}
@media(max-width:900px){.services{display:block;min-height:0;padding:48px var(--pad) 72px}.services-kicker{font-size:16px!important}.services .service-list{margin-top:54px}.service-list a{grid-template-columns:38px minmax(0,1fr) auto;gap:10px;min-height:72px;font-size:clamp(28px,8vw,43px)}.service-list .service-number{font-size:12px}.service-list .service-name{white-space:normal}.service-list .service-arrow{font-size:37px}}

/* The stylesheet lives two folders below the shared type library. */
@font-face{font-family:HeliosExt;src:url("../../assets/fonts/HeliosExt-Regular.otf")}@font-face{font-family:HeliosExt;src:url("../../assets/fonts/HeliosExt-Bold.otf");font-weight:700}@font-face{font-family:"TT Firs Neue";src:url("../../assets/fonts/TTFirsNeue-Regular.ttf")}@font-face{font-family:"TT Firs Neue";src:url("../../assets/fonts/TTFirsNeue-DemiBold.ttf");font-weight:700}
.service-list a{font-family:"TT Firs Neue",Arial,sans-serif!important;font-size:60px;font-weight:400;letter-spacing:-.025em;line-height:1}
@media(max-width:900px){.service-list a{font-size:clamp(28px,8vw,43px)}}

/* Services — reference art direction. */
.services{position:relative;isolation:isolate;overflow:hidden;grid-template-columns:220px minmax(0,1fr);column-gap:60px;min-height:810px;padding:96px clamp(48px,12.6vw,242px) 80px;background:#fbfbfb}.services::before{position:absolute;z-index:-1;inset:0;content:"";background:radial-gradient(ellipse 30% 48% at -7% 4%,#180000 0 12%,#a40000 29%,rgba(255,33,37,.72) 43%,rgba(255,126,130,.26) 58%,transparent 76%),radial-gradient(ellipse 37% 51% at -7% 104%,#200000 0 13%,#9f0000 30%,rgba(255,26,30,.76) 45%,rgba(255,113,118,.28) 61%,transparent 79%),radial-gradient(ellipse 37% 51% at 107% 104%,#200000 0 13%,#9f0000 30%,rgba(255,26,30,.76) 45%,rgba(255,113,118,.28) 61%,transparent 79%);filter:blur(10px);transform:scale(1.04)}.services>*{position:relative;z-index:1}.services-kicker{font:400 26px/1 "TT Firs Neue",Arial,sans-serif!important;letter-spacing:-.03em!important}.services .service-list{margin-top:64px}.service-list a{grid-template-columns:168px minmax(0,1fr) 44px;min-height:117px;font:400 60px/1 "TT Firs Neue",Arial,sans-serif!important;letter-spacing:-.025em!important}.service-list .service-number{font:400 20px/1 "TT Firs Neue",Arial,sans-serif;letter-spacing:-.03em}.service-list .service-arrow{position:relative;width:44px;height:28px;font-size:0}.service-list .service-arrow::before{position:absolute;top:13px;left:0;width:41px;height:2px;background:currentColor;content:""}.service-list .service-arrow::after{position:absolute;top:7px;right:1px;width:12px;height:12px;border-top:2px solid currentColor;border-right:2px solid currentColor;content:"";transform:rotate(45deg)}
@media(max-width:900px){.services{padding:48px var(--pad) 72px}.services::before{filter:blur(8px)}.services-kicker{font-size:18px!important}.services .service-list{margin-top:54px}.service-list a{grid-template-columns:38px minmax(0,1fr) 34px;min-height:72px;font-size:clamp(28px,8vw,43px)!important}.service-list .service-number{font-size:12px}.service-list .service-arrow{width:34px;height:22px}.service-list .service-arrow::before{top:10px;width:32px}.service-list .service-arrow::after{top:5px;width:10px;height:10px}}
.services::before{z-index:0}
.service-list .service-name{max-width:none!important;font-family:"TT Firs Neue",Arial,sans-serif!important;font-size:60px!important;font-weight:400!important;letter-spacing:-.025em!important;line-height:1!important}
@media(max-width:900px){.service-list .service-name{font-size:clamp(28px,8vw,43px)!important}}
.services{padding-bottom:194px}.service-list li:last-child{border-bottom:0!important}.services::before{background:radial-gradient(ellipse 42% 67% at -9% -14%,#060000 0 9%,#3d0000 19%,#c40000 32%,#f52a2d 42%,rgba(255,132,137,.38) 56%,transparent 74%),radial-gradient(ellipse 43% 66% at -8% 114%,#070000 0 10%,#400000 20%,#c30000 33%,#f42a2d 43%,rgba(255,132,137,.4) 57%,transparent 75%),radial-gradient(ellipse 43% 66% at 108% 114%,#070000 0 10%,#400000 20%,#c30000 33%,#f42a2d 43%,rgba(255,132,137,.4) 57%,transparent 75%)}
@media(max-width:900px){.services{padding-bottom:72px}}

/* Manifesto and client marks are intentionally two separate blocks. */
.manifesto{
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 min-height:508px!important;
 padding:96px clamp(48px,12.6vw,242px)!important;
 background:#101010!important;
 color:#101010!important;
}
.manifesto-card{
 display:grid;
 grid-template-columns:minmax(0,2fr) minmax(280px,.56fr);
 column-gap:clamp(48px,8vw,152px);
 align-items:center;
 width:min(100%,1494px);
 min-height:186px;
 padding:28px 18px;
 background:#fff;
}
.manifesto .eyebrow,.manifesto>a{display:none!important}
.manifesto h1{
 grid-column:auto!important;
 max-width:760px;
 margin:0!important;
 color:#101010!important;
 font-size:48px!important;
 line-height:.93!important;
}
.manifesto-copy{
 grid-column:auto!important;
 justify-self:end;
 align-self:center;
 max-width:340px!important;
 margin:0!important;
 color:#101010!important;
 font-size:13px!important;
 line-height:1.4!important;
}
.studio{
 display:flex!important;
 align-items:center!important;
 min-height:0!important;
 padding:116px 0!important;
 background:#101010!important;
}
.studio .clients-marquee{width:100%;padding:0!important}
.studio .clients-label{display:none!important}
@media(max-width:900px){
 .manifesto{min-height:0!important;padding:64px var(--pad)!important}
 .manifesto-card{grid-template-columns:1fr;row-gap:32px;min-height:0;padding:32px 24px}
 .manifesto h1{font-size:35px!important}
 .manifesto-copy{justify-self:start;max-width:340px!important}
 .studio{padding:64px 0!important}
}
.closing-signature p{transform:translateY(0)!important}
@media(max-width:900px){.closing-signature p{transform:none!important}}
.closing-signature{align-items:flex-start;padding-top:130px}.closing-signature p{transform:none!important}
@media(max-width:900px){.closing-signature{align-items:flex-end;padding-top:48px}}
.closing-signature,footer{background:#101010!important}
.closing-signature{padding-bottom:160px}
@media(max-width:900px){.closing-signature{padding-bottom:80px}}
.closing-signature p{transform:translateY(-160px)}
@media(max-width:900px){.closing-signature p{transform:none}}
.services{background:radial-gradient(ellipse 42% 69% at -3% -3%,#050000 0 10%,#4b0000 20%,#df0000 34%,#ff494d 43%,rgba(255,177,180,.4) 56%,transparent 74%),radial-gradient(ellipse 44% 68% at -4% 104%,#050000 0 11%,#4b0000 21%,#df0000 35%,#ff494d 44%,rgba(255,177,180,.42) 58%,transparent 76%),radial-gradient(ellipse 44% 68% at 104% 104%,#050000 0 11%,#4b0000 21%,#df0000 35%,#ff494d 44%,rgba(255,177,180,.42) 58%,transparent 76%),#fff}.services::before{display:none}
.services{background:radial-gradient(ellipse 35% 67% at 108% 107%,#070000 0 17%,#490000 29%,#e90000 42%,#ff5559 49%,rgba(255,183,185,.42) 61%,transparent 81%),radial-gradient(ellipse 34% 66% at -7% -8%,#070000 0 17%,#480000 29%,#e90000 42%,#ff5559 49%,rgba(255,183,185,.42) 61%,transparent 81%),#fff}
.services{background:#fff!important}.services::before,.services::after{position:absolute;z-index:0;display:block;width:min(46vw,760px);height:68%;pointer-events:none;content:"";background:conic-gradient(from 34deg at 0 0,#080000 0 13deg,#580000 19deg,#d90000 30deg,#ff2e33 40deg,rgba(255,116,120,.66) 50deg,rgba(255,220,221,.25) 61deg,transparent 77deg),linear-gradient(137deg,#080000 0 12%,#650000 18%,#e50000 28%,#ff363b 38%,rgba(255,128,132,.48) 49%,transparent 67%);filter:blur(5px);transform:translate(-10%,-12%);clip-path:polygon(0 0,100% 0,49% 100%,0 100%)}.services::before{top:0;left:0}.services::after{right:0;bottom:0;transform:translate(10%,12%) rotate(180deg)}
.services{background:#fff!important}.services::before,.services::after{display:none!important}
/* Manifesto — align copy to the 12.6% / 87.4% editorial guides. */
.manifesto{padding-right:clamp(48px,12.6vw,242px)!important;padding-left:clamp(48px,12.6vw,242px)!important}.manifesto h1{grid-column:1 / span 2}.manifesto-copy{grid-column:4;justify-self:end;align-self:center;max-width:340px;margin:0}
@media(max-width:900px){.manifesto{padding-right:var(--pad)!important;padding-left:var(--pad)!important}.manifesto-copy{margin-top:36px}}
.services{padding-bottom:160px}
@media(max-width:900px){.services{padding-bottom:72px}}

/* Final manifesto layout: isolated white text card + isolated logo strip. */
.manifesto{display:flex!important;align-items:center!important;justify-content:center!important;min-height:508px!important;padding:96px clamp(48px,12.6vw,242px)!important;background:#101010!important;color:#101010!important}
.manifesto-card{display:grid!important;grid-template-columns:minmax(0,2fr) minmax(280px,.56fr)!important;column-gap:clamp(48px,8vw,152px)!important;align-items:center!important;width:min(100%,1494px)!important;min-height:186px!important;padding:28px 18px!important;background:#fff!important}
.manifesto .eyebrow,.manifesto>a{display:none!important}
.manifesto h1{grid-column:auto!important;max-width:760px!important;margin:0!important;color:#101010!important;font-size:48px!important;line-height:.93!important}
.manifesto .manifesto-copy{grid-column:auto!important;justify-self:end!important;align-self:center!important;max-width:340px!important;margin:0!important;color:#101010!important;font-size:13px!important;line-height:1.4!important}
.studio{display:flex!important;align-items:center!important;min-height:0!important;padding:116px 0!important;background:#101010!important}
.studio .clients-marquee{width:100%!important;padding:0!important}.studio .clients-label{display:none!important}
@media(max-width:900px){.manifesto{min-height:0!important;padding:64px var(--pad)!important}.manifesto-card{grid-template-columns:1fr!important;row-gap:32px!important;min-height:0!important;padding:32px 24px!important}.manifesto h1{font-size:35px!important}.manifesto .manifesto-copy{justify-self:start!important;max-width:340px!important}.studio{padding:64px 0!important}}

/* The white area is the whole text block, not a card on a dark background. */
.manifesto{background:#fff!important;color:#101010!important}
.manifesto-card{background:transparent!important;padding:0!important}

/* Approach: editorial composition without dividers, using the site typeface. */
.statement{
 display:grid!important;
 grid-template-columns:minmax(0,1.18fr) minmax(280px,.82fr)!important;
 column-gap:clamp(48px,10vw,190px)!important;
 row-gap:58px!important;
 min-height:0!important;
 padding:58px clamp(48px,6vw,120px) 96px!important;
 background:#101010!important;
 color:#fff!important;
}
.statement-media{display:none!important}
.statement-intro,.statement-aside{padding:0!important}
.statement-intro .eyebrow{position:static!important;margin:0 0 58px!important;color:#e6e6e6!important;font:400 20px/1 "TT Firs Neue",Arial,sans-serif!important;letter-spacing:-.03em!important}
.statement h2{margin:0!important;color:#fff!important;font:400 clamp(58px,6.25vw,128px)/.82 "TT Firs Neue",Arial,sans-serif!important;letter-spacing:-.065em!important;text-transform:uppercase!important}
.statement h2 span{color:#fff}
.statement-aside{align-self:end!important;padding-bottom:8px!important}
.statement-aside p{max-width:520px!important;margin:0 0 30px!important;color:#e6e6e6!important;font:400 clamp(19px,1.55vw,31px)/1.18 "TT Firs Neue",Arial,sans-serif!important;letter-spacing:-.035em!important}
.statement-aside a{display:inline-flex;gap:24px;color:#fff;font:400 20px/1 "TT Firs Neue",Arial,sans-serif;text-underline-offset:7px;text-decoration-thickness:1px}
.statement-aside a span{font-size:23px;line-height:.8}
.statement-steps{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,6vw,120px);margin:0;padding:0;list-style:none}
.statement-steps li{min-width:0;padding:0;border:0!important}
.statement-steps span{display:block;margin-bottom:24px;color:#fff;font:400 24px/1 "TT Firs Neue",Arial,sans-serif;letter-spacing:-.04em}
.statement-steps h3{margin:0 0 20px;color:#fff;font:400 clamp(23px,1.85vw,38px)/.96 "TT Firs Neue",Arial,sans-serif;letter-spacing:-.055em}
.statement-steps p{max-width:310px;margin:0;color:#d2d2d2;font:400 clamp(17px,1.22vw,25px)/1.18 "TT Firs Neue",Arial,sans-serif;letter-spacing:-.03em}
@media(max-width:900px){.statement{display:block!important;padding:48px var(--pad) 64px!important}.statement-intro .eyebrow{margin-bottom:40px!important;font-size:16px!important}.statement h2{font-size:clamp(48px,13vw,76px)!important}.statement-aside{margin-top:42px!important}.statement-aside p{font-size:20px!important}.statement-steps{display:grid;grid-template-columns:1fr 1fr;gap:42px 24px;margin-top:64px}.statement-steps span{margin-bottom:16px;font-size:16px}.statement-steps h3{margin-bottom:12px;font-size:23px}.statement-steps p{font-size:16px}}

/* Contact block — title, supplied image, and compact two-field form. */
.contact{display:grid!important;grid-template-columns:minmax(260px,.95fr) minmax(300px,.78fr) minmax(330px,1fr)!important;gap:clamp(36px,4.2vw,84px)!important;align-items:start!important;min-height:0!important;padding:96px clamp(48px,5.8vw,116px)!important;background:#f8f7f5!important;color:#101010!important;text-align:left!important}
.contact-title h2{margin:68px 0 0!important;font:400 clamp(57px,5.3vw,108px)/.86 "TT Firs Neue",Arial,sans-serif!important;letter-spacing:-.07em!important;text-transform:uppercase!important}.contact-title h2 span{color:#680210}
.contact-image{width:100%;margin:0!important;aspect-ratio:3 / 4;overflow:hidden;background:#d5cdc6}.contact-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.contact-form{display:flex;flex-direction:column;gap:16px;margin:28px 0 0}.contact-form>p{max-width:570px;margin:0 0 12px!important;font:400 clamp(24px,1.72vw,35px)/1.14 "TT Firs Neue",Arial,sans-serif!important;letter-spacing:-.04em}.contact-form label{display:block}.contact-form .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.contact-form input{width:100%;height:84px;padding:0 30px;border:1px solid rgba(16,16,16,.28);border-radius:0;background:transparent;color:#101010;font:400 20px/1 "TT Firs Neue",Arial,sans-serif;outline:none}.contact-form input::placeholder{color:#898989}.contact-form input:focus{border-color:#101010}.contact-form button{display:flex;align-items:center;justify-content:center;gap:52px;width:100%;height:94px;margin-top:6px;border:0;border-radius:0;background:#101010;color:#fff;cursor:pointer;font:400 21px/1 "TT Firs Neue",Arial,sans-serif;letter-spacing:-.03em;text-transform:uppercase}.contact-form button:hover{background:#680210}.contact-form button span{font-size:30px;line-height:.5}
@media(max-width:900px){.contact{display:grid!important;grid-template-columns:1fr!important;gap:36px!important;padding:64px var(--pad)!important}.contact-title h2{margin:0!important;font-size:clamp(53px,15vw,84px)!important}.contact-image{order:2;max-width:520px}.contact-form{order:3;margin:0}.contact-form>p{font-size:24px!important}.contact-form input{height:68px;font-size:18px}.contact-form button{height:76px;font-size:18px}}

/* Selected work: four equal 4:5 project panels centred in a 2 × 2 grid. */
.portfolio{min-height:0!important;padding:120px var(--pad) 128px!important;background:#f4f2ef!important}
.portfolio-head{max-width:1400px;margin:0 auto}.portfolio-head .eyebrow{margin:0 0 22px!important}.portfolio-head h2{margin:0!important;font-family:"TT Firs Neue",Arial,sans-serif!important;font-size:clamp(58px,5.7vw,112px)!important;line-height:.82!important;letter-spacing:-.07em!important}
.portfolio .portfolio-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:56px 16px!important;width:min(100%,1280px)!important;min-height:0!important;margin:96px auto 0!important}
.project-card,.project-card--one,.project-card--two,.project-card--three,.project-card--four{position:static!important;width:100%!important;margin:0!important}.project-card a{display:block!important;color:#101010!important;text-decoration:none!important}.project-media,.project-card--two .project-media{width:100%!important;aspect-ratio:4 / 5!important;margin:0!important;overflow:hidden!important;transition:transform .3s ease,filter .3s ease!important}.project-card a:hover .project-media{filter:contrast(1.08)!important;transform:scale(.985)!important}
.project-card--one .project-media{background:linear-gradient(145deg,#7b393b 0 55%,#d06855 55% 100%)!important}.project-card--two .project-media{background:radial-gradient(circle at 65% 28%,#f1d39c 0 8%,transparent 8.5%),linear-gradient(155deg,#dce4de 0 35%,#9cabb3 35% 62%,#182432 62%)!important}.project-card--three .project-media{background:linear-gradient(135deg,#171717 0 38%,#d0d0ca 38% 46%,#5e7686 46% 70%,#e9e3d7 70%)!important}.project-card--four .project-media{background:radial-gradient(circle at 28% 75%,#ff331d 0 16%,transparent 16.5%),linear-gradient(147deg,#eee9de 0 32%,#be1010 32% 61%,#23110e 61%)!important}
.project-media::before,.project-media::after{display:none!important}.project-media span{display:none!important}.project-card h3{margin:16px 0 6px!important;font:400 clamp(19px,1.5vw,28px)/1 "TT Firs Neue",Arial,sans-serif!important;letter-spacing:-.05em!important;text-transform:none!important}.project-card h3::before{display:none!important}.project-card p{max-width:100%!important;margin:0!important;color:#535353!important;font:400 13px/1.25 "TT Firs Neue",Arial,sans-serif!important;letter-spacing:-.025em!important;text-transform:none!important}.portfolio-all{position:static!important;display:flex!important;align-items:center;justify-content:center;width:max-content;min-width:236px;margin:72px auto 0!important;padding:20px 24px;background:#101010;color:#fff!important;font:400 14px/1 "TT Firs Neue",Arial,sans-serif!important;letter-spacing:-.02em!important;text-decoration:none!important;text-transform:uppercase!important}.portfolio-all:hover{background:#f40000!important;color:#fff!important}
@media(max-width:900px){.portfolio{padding:72px var(--pad) 80px!important}.portfolio-head h2{font-size:clamp(54px,14vw,78px)!important}.portfolio .portfolio-grid{grid-template-columns:1fr!important;gap:48px!important;width:100%!important;margin-top:64px!important}.project-media,.project-card--two .project-media{aspect-ratio:4 / 5!important}.project-card h3{font-size:23px!important}.project-card p{font-size:14px!important}.portfolio-all{margin-top:56px!important}}

/* Full-bleed case grid: no section heading, labels reveal from the bottom on hover. */
.portfolio{padding:14px!important;background:#fff!important}
.portfolio-head{display:none!important}
.portfolio .portfolio-grid{width:100%!important;max-width:none!important;gap:14px!important;margin:0!important}
.project-card a{position:relative!important;overflow:hidden!important}
.project-media,.project-card--two .project-media{aspect-ratio:4 / 5!important}
.project-card h3,.project-card p{position:absolute!important;z-index:2;left:24px;right:24px;max-width:calc(100% - 48px)!important;color:#fff!important;opacity:0;transform:translateY(28px);transition:opacity .28s ease,transform .34s ease;pointer-events:none}
.project-card h3{bottom:45px!important;margin:0!important;font-size:clamp(22px,1.8vw,34px)!important;text-transform:uppercase!important}
.project-card p{bottom:20px!important;margin:0!important;font-size:13px!important}
.project-card a::after{position:absolute;z-index:1;right:0;bottom:0;left:0;height:43%;background:linear-gradient(to top,rgba(0,0,0,.75),transparent);content:"";opacity:0;transition:opacity .28s ease;pointer-events:none}
.project-card a:hover::after,.project-card a:hover h3,.project-card a:hover p{opacity:1}.project-card a:hover h3,.project-card a:hover p{transform:translateY(0)}
@media(max-width:900px){.portfolio{padding:10px!important}.portfolio .portfolio-grid{gap:10px!important}.project-card h3,.project-card p{opacity:1;transform:none}.project-card a::after{opacity:1}.project-card h3{left:18px;right:18px;bottom:41px!important;font-size:23px!important}.project-card p{left:18px;right:18px;bottom:18px!important;font-size:12px!important}}

/* Lock each project panel to exactly the same 4:5 dimensions and balance the CTA space. */
.portfolio{padding-bottom:86px!important}
.portfolio .portfolio-grid{grid-auto-rows:auto!important}
.project-card,.project-card a,.project-media{min-width:0!important}
.project-media,.project-card--two .project-media{height:auto!important;min-height:0!important;aspect-ratio:4 / 5!important}
.portfolio-all{margin-top:86px!important}
@media(max-width:900px){.portfolio{padding-bottom:64px!important}.portfolio-all{margin-top:64px!important}}

/* Fixed mathematical card height: (full width − two outer gaps − inner gap) / 2 × 1.25. */
.portfolio .portfolio-grid{gap:16px!important}
.project-media,.project-card--two .project-media{height:calc((100vw - 48px) * .625)!important;aspect-ratio:auto!important}
.project-card--one .project-media{background:url("../../assets/case-mshtm.webp") center / cover no-repeat!important}
.project-card a:hover .project-media{transform:none!important;filter:none!important}
@media(max-width:900px){.portfolio .portfolio-grid{gap:10px!important}.project-media,.project-card--two .project-media{height:auto!important;aspect-ratio:4 / 5!important}}

/* One spacing token for every edge and both grid gutters. */
.portfolio{padding:16px 16px 86px!important}
.portfolio .portfolio-grid{gap:16px!important}
@media(max-width:900px){
  .portfolio{padding:10px 10px 64px!important}
  .portfolio .portfolio-grid{gap:10px!important}
}

/* Selected work — editorial three-column grid with captions beneath images. */
.portfolio{
  padding:34px 32px 96px!important;
  background:#fff!important;
}
.portfolio .portfolio-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:48px 24px!important;
  margin:0!important;
}
.project-card a{
  position:static!important;
  overflow:visible!important;
}
.project-media,
.project-card--two .project-media{
  height:auto!important;
  aspect-ratio:4 / 5!important;
  background-position:center!important;
  background-size:cover!important;
}
.project-card--one .project-media{background-image:url("../../assets/case-mshtm.webp")!important}
.project-card--two .project-media{background-image:url("../../assets/manifesto-interior.webp")!important}
.project-card--three .project-media{background-image:url("../../assets/brand-portrait.webp")!important}
.project-card--four .project-media{background-image:url("../../assets/manifesto-mshtm.webp")!important}
.project-card a::after{display:none!important}
.project-card h3,
.project-card p{
  position:static!important;
  max-width:100%!important;
  opacity:1!important;
  transform:none!important;
  pointer-events:auto!important;
}
.project-card h3{
  margin:22px 0 8px!important;
  color:#111!important;
  font:700 clamp(19px,1.45vw,27px)/1 "TT Firs Neue",Arial,sans-serif!important;
  letter-spacing:-.045em!important;
  text-transform:uppercase!important;
}
.project-card p{
  margin:0!important;
  color:#111!important;
  font:700 clamp(15px,1.15vw,21px)/1.05 "TT Firs Neue",Arial,sans-serif!important;
  letter-spacing:-.035em!important;
}
.portfolio-all{margin:72px auto 0!important}
@media(max-width:900px){
  .portfolio{padding:20px 20px 72px!important}
  .portfolio .portfolio-grid{grid-template-columns:1fr!important;gap:42px!important}
  .project-card h3{margin-top:16px!important;font-size:23px!important}
  .project-card p{font-size:17px!important}
}

/* Brand interlude between selected work and the contact form. */
.brand-note{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.9fr) minmax(180px,.42fr);
  align-items:stretch;
  min-height:620px;
  margin:0!important;
  padding:16px;
  gap:16px;
  background:#101010;
  color:#fff;
}
.brand-note-copy{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:100%;
  padding:clamp(38px,5.1vw,104px);
  background:#101010;
}
.brand-note-copy .eyebrow{margin:0!important;color:#fff!important;font:400 16px/1 "TT Firs Neue",Arial,sans-serif!important;letter-spacing:-.03em!important}
.brand-note-copy h2{max-width:760px;margin:72px 0 auto!important;color:#fff!important;font:400 clamp(54px,5.4vw,112px)/.82 "TT Firs Neue",Arial,sans-serif!important;letter-spacing:-.075em!important}
.brand-note-copy>p:last-child{max-width:440px;margin:52px 0 0!important;color:#d4d4d4!important;font:400 clamp(18px,1.35vw,26px)/1.15 "TT Firs Neue",Arial,sans-serif!important;letter-spacing:-.035em!important}
.brand-note-image{min-height:0;margin:0!important;overflow:hidden;background:#202020}
.brand-note-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.brand-note-accent{display:flex;align-items:flex-end;min-height:0;padding:clamp(24px,2.1vw,42px);background:#680210}
.brand-note-accent span{color:#101010;font:400 clamp(18px,1.5vw,30px)/.92 "TT Firs Neue",Arial,sans-serif;letter-spacing:-.055em}
@media(max-width:900px){
  .brand-note{grid-template-columns:1fr;min-height:0;padding:10px;gap:10px}
  .brand-note-copy{min-height:460px;padding:38px 24px}
  .brand-note-copy h2{margin-top:58px!important;font-size:clamp(52px,14vw,78px)!important}
  .brand-note-copy>p:last-child{margin-top:42px!important;font-size:19px!important}
  .brand-note-image{aspect-ratio:1 / 1.15}
  .brand-note-accent{min-height:160px;padding:24px}
}

/* Handwritten red mark in the contact composition. */
.contact-title{position:relative;isolation:isolate}
.contact-signature{
  position:absolute;
  z-index:2;
  right:clamp(-130px,-7.4vw,-54px);
  bottom:clamp(28px,4vw,82px);
  display:block;
  width:clamp(200px,16vw,330px);
  height:auto;
  pointer-events:none;
  transform:rotate(-7deg);
}
@media(max-width:900px){
  .contact-signature{right:-14px;bottom:-46px;width:190px}
}

/* Brand panel — the image runs flush; the red square sits over it. */
.brand-note{
  grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr)!important;
  height:620px!important;
  min-height:620px!important;
  padding:0!important;
  gap:16px!important;
}
.brand-note-copy{padding:clamp(46px,6.1vw,122px)!important}
.brand-note-copy h2{
  max-width:650px!important;
  margin:0 auto!important;
  font-size:clamp(40px,4.05vw,84px)!important;
}
.brand-note-copy>p:last-child{margin:44px auto 0!important}
.brand-note-image{position:relative!important;height:100%!important;overflow:hidden!important}
.brand-note-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover!important}
.brand-note-accent{
  position:absolute!important;
  right:clamp(26px,7.2vw,138px)!important;
  bottom:clamp(32px,9.5vw,180px)!important;
  display:flex!important;
  align-items:flex-end!important;
  width:clamp(176px,17vw,326px)!important;
  aspect-ratio:1!important;
  min-height:0!important;
  padding:clamp(22px,2.2vw,44px)!important;
  background:rgba(104,2,16,.92)!important;
}
.brand-note-accent span{color:#fff!important}
@media(max-width:900px){
  .brand-note{grid-template-columns:1fr!important;gap:0!important}
  .brand-note-copy{min-height:440px!important;padding:48px 24px!important}
  .brand-note-copy h2{margin:0!important;font-size:clamp(40px,12vw,68px)!important}
  .brand-note-copy>p:last-child{margin:40px 0 0!important}
  .brand-note-image{aspect-ratio:1 / 1.12!important}
  .brand-note-accent{right:24px!important;bottom:24px!important;width:154px!important}
}

/* Keep the handwritten mark as a small, low signature. */
.contact-signature{
  right:12px!important;
  bottom:-18px!important;
  width:clamp(160px,10.5vw,210px)!important;
}
@media(max-width:900px){.contact-signature{right:0!important;bottom:-28px!important;width:155px!important}}

/* Exact half-and-half brand composition; copy follows the left grid edge. */
.brand-note{grid-template-columns:1fr 1fr!important;gap:0!important}
.brand-note-copy{padding-left:clamp(48px,5.8vw,116px)!important;padding-right:48px!important}
.brand-note-copy h2{margin:0!important}
.brand-note-copy>p:last-child{margin-left:0!important;margin-right:0!important}
@media(max-width:900px){
  .brand-note{grid-template-columns:1fr!important}
  .brand-note-copy{padding:48px 24px!important}
}

/* Put the handwritten sign in the vacant lower-right area of the title column. */
.contact-signature{
  right:-82px!important;
  bottom:-150px!important;
}
@media(max-width:900px){.contact-signature{right:0!important;bottom:-28px!important}}

/* Statement: no corner label; align the intro copy with the headline and open the rhythm above the stages. */
.statement{row-gap:120px!important}
.statement-intro{padding-top:96px!important}
.statement-intro .eyebrow{display:none!important}
.statement-aside{align-self:start!important;padding-top:102px!important;padding-bottom:0!important}
@media(max-width:900px){
  .statement{row-gap:0!important}
  .statement-intro{padding-top:0!important}
  .statement-aside{padding-top:0!important}
}

/* Case grid: one source of truth for every panel's 4:5 geometry. */
.portfolio .portfolio-grid{grid-auto-rows:auto!important;align-items:start!important;gap:16px!important}
.portfolio .project-card{height:auto!important;aspect-ratio:4 / 5!important}
.portfolio .project-card>a{display:block!important;width:100%!important;height:100%!important}
.portfolio .project-media,.portfolio .project-card--two .project-media{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  aspect-ratio:auto!important;
}
@media(max-width:900px){
  .portfolio .portfolio-grid{gap:10px!important}
  .portfolio .project-card{aspect-ratio:4 / 5!important}
}

/* Navigation and form details. */
html{scroll-behavior:smooth}
#services,#work,#contact{scroll-margin-top:24px}
.contact-form input::placeholder{
  color:#8d8d8d!important;
  -webkit-text-fill-color:#8d8d8d!important;
  opacity:1!important;
}
.contact-form input::-webkit-input-placeholder{
  color:#8d8d8d!important;
  -webkit-text-fill-color:#8d8d8d!important;
  opacity:1!important;
}
.contact-form input::-moz-placeholder{color:#8d8d8d!important;opacity:1!important}

.statement{background:#680210!important}
.project-card--two .project-media,
.project-card--three .project-media,
.project-card--four .project-media{
  background:#b9b9b7!important;
}

/* V2 — one accent for every existing red hover state. */
.black-button:hover{background:#680210}
.gradient-toggle:hover{background:#680210;border-color:#680210}
.service-list a:hover{color:#680210!important}
.portfolio-all:hover{background:#680210!important;color:#fff!important}

/* Services — hover preview panel. */
@media (min-width:901px){
  .services .services-side{
    position:relative;
    align-self:end;
    width:min(100%,320px);
    height:368px;
    margin:0 0 96px;
    overflow:hidden;
    background:#f4f4f4;
  }
  .services-side .service-preview{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transform:scale(1.045);
    transition:opacity .24s ease,transform .5s ease;
  }
  .services-side .service-preview.is-visible{
    opacity:1;
    transform:scale(1);
  }
}
@media (max-width:900px){.services .services-side{display:none}}

/* V2 type scale — each size has one editorial role across the whole site. */
:root{
  --p0:12px;                              /* micro details / coordinates */
  --p1:clamp(72px,8.3vw,128px);           /* hero display */
  --p2:clamp(52px,4.1vw,84px);            /* section display */
  --p3:clamp(22px,1.4vw,28px);            /* lead copy */
  --p4:clamp(16px,1vw,18px);              /* body and details */
  --p5:clamp(14px,1vw,16px);              /* buttons and navigation */
  --p6:clamp(68px,5.5vw,112px);           /* accent display */
  --p7:clamp(40px,3.2vw,60px);            /* accent list */
  --p8:clamp(26px,1.85vw,36px);           /* element heading */
}

/* P1 — the only hero headline. */
.intro .headline{font-size:var(--p1)!important}

/* P2 — display headings within major sections. */
.brand-note-copy h2,.contact-title h2{font-size:var(--p2)!important}

/* P3 — lead copy immediately supporting a display heading. */
.brand-note-copy>p:last-child,.contact-form>p,.statement-aside p{font-size:var(--p3)!important}

/* P4 / P0 — reading text and compact coordinates. */
.intro-cta p,.statement-steps p,.project-card p,.contact-form input{font-size:var(--p4)!important}
.tiny,.service-list .service-number{font-size:var(--p0)!important}

/* P5 — every navigational or actionable label. */
header nav a,.intro .black-button,.contact-form button,.portfolio-all{font-size:var(--p5)!important}

/* P6, P7 and P8 — statement, service list and card/step headings. */
.statement h2{font-size:var(--p6)!important}
.service-list a,.service-list .service-name{font-size:var(--p7)!important}
.statement-steps h3,.project-card h3{font-size:var(--p8)!important}

/* Intentional hero exceptions: this is the site's loudest composition. */
.intro .headline{font-size:clamp(101px,11.62vw,179px)!important}
header nav a{font-size:clamp(17px,1.45vw,28px)!important}
@media(max-width:900px){
  .intro .headline{font-size:clamp(66px,17vw,88px)!important}
  header nav a{font-size:10px!important}
}

/* A single bold CTA treatment, including the contact form. */
.contact-form button{font-weight:700!important}

/* Supporting copy stays as readable as the statement lead. */
.manifesto .manifesto-copy{max-width:310px!important;font-size:var(--p4)!important;line-height:1.18!important}

/* Header reveals only while scrolling upward. */
.site-header{position:fixed!important;transition:top .24s ease,transform .32s ease,opacity .24s ease,background-color .24s ease,backdrop-filter .24s ease}.site-header.is-hidden{opacity:0;pointer-events:none;transform:translateY(-140px)}.site-header.is-revealed{top:0!important;background:rgba(0,0,0,.78)!important;backdrop-filter:blur(14px)}
.site-header nav{right:calc(var(--pad) + 264px)!important}.header-contact{position:absolute;right:var(--pad);display:flex;align-items:center;justify-content:center;padding:14px 24px;border:1px solid rgba(255,255,255,.32);border-radius:999px;color:#fff;font:400 16px/1 "TT Firs Neue",Arial,sans-serif;letter-spacing:-.03em;text-decoration:none;white-space:nowrap}.header-contact:hover{background:#fff;color:#101010;border-color:#fff}
@media(max-width:900px){.site-header nav{right:auto!important}.header-contact{display:none}}
@media(prefers-reduced-motion:reduce){.site-header{transition:none}}

/* Keep the card centred; only its two columns share the same top guide. */
.manifesto-card{align-self:center!important;align-items:start!important}
.manifesto .manifesto-copy{align-self:start!important}
.manifesto-card{min-height:0!important}

/* Secondary copy on dark surfaces is white, never grey. */
.statement-aside p,.statement-steps p,.brand-note-copy>p:last-child{color:#fff!important}

/* Shared left grid: the hero and manifesto now begin on the same guide as the other sections. */
.intro .headline{margin-left:clamp(48px,5.8vw,116px)!important}

/* The manifesto uses the same left-copy / right-image composition as the brand block below it. */
.manifesto{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  align-items:stretch!important;
  justify-content:initial!important;
  min-height:620px!important;
  padding:0!important;
  background:#fff!important;
  color:#101010!important;
}
.manifesto-card{display:contents!important}
.manifesto .manifesto-copy{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  grid-column:auto!important;
  grid-row:auto!important;
  justify-self:stretch!important;
  align-self:stretch!important;
  max-width:none!important;
  margin:0!important;
  box-sizing:border-box!important;
  height:620px!important;
  min-height:0!important;
  padding:clamp(46px,6.1vw,122px) 48px clamp(46px,6.1vw,122px) clamp(48px,5.8vw,116px)!important;
  color:#101010!important;
}
.manifesto .manifesto-copy h1{
  max-width:650px!important;
  margin:0!important;
  color:#fff!important;
  font-size:var(--p2)!important;
  line-height:.9!important;
  letter-spacing:-.06em!important;
}
.manifesto .manifesto-copy p{
  max-width:440px!important;
  margin:0!important;
  color:#101010!important;
  font-size:var(--p3)!important;
  line-height:1.15!important;
}
.manifesto-image{position:relative!important;box-sizing:border-box!important;min-height:0!important;height:620px!important;margin:0!important;overflow:hidden!important}
.manifesto-image img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;filter:grayscale(1)!important}

/* One CTA pattern: bold label on the left, arrow on the right. */
.contact-form button,.portfolio-all{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  text-align:left!important;
  font-weight:700!important;
}
.contact-form button{padding-inline:30px!important}
.contact-form button>span:first-child{font-size:inherit!important;line-height:1!important}
.contact-form button>span:last-child{font-size:30px!important;line-height:.5!important}
.portfolio-all{gap:52px!important;padding-inline:24px!important}
.privacy-consent{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin:4px 0 0!important;
  color:#101010!important;
  font-size:var(--p5)!important;
  line-height:1.2!important;
  cursor:pointer!important;
}
.privacy-consent input{
  width:18px!important;
  height:18px!important;
  margin:0!important;
  accent-color:#680210!important;
  flex:0 0 18px!important;
}
@media(max-width:900px){
  .intro .headline{margin-left:0!important}
  .manifesto{grid-template-columns:1fr!important;height:auto!important;min-height:0!important}
  .manifesto .manifesto-copy{height:auto!important;padding:48px 24px!important}
  .manifesto .manifesto-copy h1{font-size:clamp(42px,11vw,64px)!important}
  .manifesto-image{height:auto!important;min-height:420px!important}
}

/* Process collage: three cut-out cards make the approach visible without changing the section's rhythm. */
.statement{
  grid-template-columns:minmax(360px,.78fr) minmax(620px,1.22fr)!important;
  column-gap:clamp(30px,4vw,80px)!important;
  row-gap:72px!important;
  overflow:hidden!important;
}
.statement-aside{
  align-self:start!important;
  min-width:0!important;
  padding-top:54px!important;
}
.statement-equation{
  display:flex!important;
  align-items:baseline!important;
  justify-content:flex-end!important;
  flex-wrap:wrap!important;
  gap:6px 12px!important;
  max-width:700px!important;
  margin:0 0 2px auto!important;
  color:#ffdf48!important;
  font:700 clamp(13px,1.08vw,20px)/1 "TT Firs Neue",Arial,sans-serif!important;
  letter-spacing:-.035em!important;
  text-transform:uppercase!important;
}
.statement-equation b{font:400 clamp(18px,1.6vw,28px)/.8 "TT Firs Neue",Arial,sans-serif!important}
.statement-equation strong{font:700 clamp(13px,1.08vw,20px)/1 "TT Firs Neue",Arial,sans-serif!important}
.statement-cards{
  position:relative!important;
  width:100%!important;
  height:clamp(280px,23vw,450px)!important;
  margin:0!important;
}
.statement-card{
  position:absolute!important;
  display:block!important;
  width:45%!important;
  max-width:450px!important;
  height:auto!important;
  filter:drop-shadow(0 12px 12px rgba(25,0,0,.28))!important;
  transform-origin:center!important;
}
.statement-card--strategy{left:-2%!important;top:10%!important;transform:rotate(-5deg)!important;z-index:1!important}
.statement-card--creative{left:27%!important;top:18%!important;transform:rotate(1.5deg)!important;z-index:2!important}
.statement-card--marketing{right:-1%!important;top:6%!important;transform:rotate(5deg)!important;z-index:3!important}
@media(max-width:900px){
  .statement{display:block!important;padding:52px var(--pad) 66px!important}
  .statement-aside{padding-top:30px!important}
  .statement-equation{justify-content:flex-start!important;margin-left:0!important;font-size:13px!important}
  .statement-cards{height:clamp(215px,64vw,340px)!important;margin-top:10px!important}
  .statement-card{width:52%!important}
  .statement-card--strategy{left:-8%!important}
  .statement-card--creative{left:23%!important}
  .statement-card--marketing{right:-7%!important}
  .statement-steps{margin-top:36px!important}
}

/* Keep the statement title as the intended two-line lock-up; move the collage into its own right field. */
@media(min-width:901px){
  .statement{
    grid-template-columns:minmax(700px,.94fr) minmax(560px,1.06fr)!important;
    column-gap:clamp(16px,2vw,40px)!important;
  }
  .statement h2{white-space:nowrap!important}
  .statement-card{width:46%!important}
  .statement-card--strategy{left:0!important}
  .statement-card--creative{left:28%!important}
  .statement-card--marketing{right:-2%!important}
}

/* Hero CTA: the same deep red interaction state used across V2. */
.intro .black-button{
  transition:background-color .2s ease,color .2s ease,opacity .2s ease!important;
}
.intro .black-button:hover{
  background:#680210!important;
  color:#fff!important;
  opacity:1!important;
}

/* A second cropped interior frame lives in the vacant part of the white manifesto panel. */
.manifesto .manifesto-copy{
  position:relative!important;
  overflow:hidden!important;
}
.manifesto .manifesto-copy>p{
  position:relative!important;
  z-index:1!important;
  max-width:min(440px,58%)!important;
}
.manifesto-secondary-image{
  position:absolute!important;
  right:0!important;
  bottom:0!important;
  width:38%!important;
  height:72%!important;
  margin:0!important;
  overflow:hidden!important;
  background:#e9e7e2!important;
}
.manifesto-secondary-image img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:52% 58%!important;
}
@media(max-width:900px){
  .manifesto .manifesto-copy>p{max-width:440px!important}
  .manifesto-secondary-image{
    position:relative!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    height:300px!important;
    margin:32px 0 0!important;
    flex:0 0 auto!important;
  }
}

/* The supplied MSHTM photo fills the entire left manifesto frame; the copy floats above it. */
.manifesto .manifesto-copy>p{
  z-index:2!important;
  max-width:440px!important;
}
.manifesto-secondary-image{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:0!important;
}
.manifesto-secondary-image img{object-position:52% 58%!important}
@media(max-width:900px){
  .manifesto .manifesto-copy{min-height:420px!important}
  .manifesto-secondary-image{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
  }
}

/* The manifesto is one exact 50 / 50 split: no gutter, monochrome imagery, white overlay copy. */
.manifesto{
  gap:0!important;
  column-gap:0!important;
  row-gap:0!important;
}
.manifesto-secondary-image img,
.manifesto-image img{filter:grayscale(1) brightness(.48) contrast(1.08)!important}
.manifesto .manifesto-copy>p{
  color:#fff!important;
  text-shadow:0 1px 14px rgba(0,0,0,.58)!important;
}

/* Editorial text block over the image: wide, justified, and aligned from the upper grid guide. */
.manifesto .manifesto-copy{justify-content:center!important}
.manifesto .manifesto-copy>p{
  width:min(70%,620px)!important;
  max-width:620px!important;
  margin:0!important;
  align-self:center!important;
  text-align:justify!important;
  text-align-last:left!important;
  text-justify:inter-word!important;
  line-height:1.13!important;
}
@media(max-width:900px){
  .manifesto .manifesto-copy>p{width:100%!important;max-width:440px!important}
}

/* Matching text layer for the right half of the diptych. */
.manifesto-image-copy{
  position:absolute!important;
  z-index:2!important;
  top:50%!important;
  left:50%!important;
  width:min(70%,620px)!important;
  max-width:620px!important;
  margin:0!important;
  color:#fff!important;
  font:400 var(--p3)/1.13 "TT Firs Neue",Arial,sans-serif!important;
  letter-spacing:-.035em!important;
  text-align:justify!important;
  text-align-last:left!important;
  text-justify:inter-word!important;
  text-shadow:0 1px 14px rgba(0,0,0,.62)!important;
  transform:translate(-50%,-50%)!important;
}
@media(max-width:900px){.manifesto-image-copy{width:calc(100% - 48px)!important;font-size:19px!important}}

/* Centre the left copy against the image bounds, not its padded content box. */
@media(min-width:901px){
  .manifesto .manifesto-copy>p{
    position:absolute!important;
    top:50%!important;
    left:50%!important;
    transform:translate(-50%,-50%)!important;
  }
}

/* Services preview: image changes with each hovered offer. */
@media (min-width:901px){
  .services .services-side{
    position:relative!important;
    align-self:end!important;
    width:min(100%,320px)!important;
    height:368px!important;
    min-height:368px!important;
    margin:0 0 96px!important;
    overflow:hidden!important;
    background:#f4f4f4!important;
  }
  .services-side .service-preview{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    opacity:0!important;
    transform:scale(1.045)!important;
    transition:opacity .24s ease,transform .5s ease!important;
  }
  .services-side .service-preview.is-visible{
    opacity:1!important;
    transform:scale(1)!important;
  }
}
@media (max-width:900px){.services .services-side{display:none!important}}

/* Preview is artwork, not a card: transparent panel and full uncropped image. */
@media (min-width:901px){
  .services .services-side{
    align-self:center!important;
    justify-self:center!important;
    width:430px!important;
    max-width:none!important;
    height:352px!important;
    min-height:352px!important;
    margin:0!important;
    transform:translate(-82px,56px);
    background:transparent!important;
    overflow:visible!important;
  }
  .services-side .service-preview{
    object-fit:contain!important;
    transform:none!important;
  }
  .services-side .service-preview.is-visible{transform:none!important}
}

/* Portfolio final: three equal editorial cards, with copy below the artwork. */
.portfolio{padding:34px 32px 96px!important;background:#fff!important}
.portfolio .portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:48px 24px!important;margin:0!important}
.portfolio .project-card{height:auto!important;aspect-ratio:auto!important}
.portfolio .project-card>a{display:block!important;width:100%!important;height:auto!important;overflow:visible!important}
.portfolio .project-media,.portfolio .project-card--two .project-media{width:100%!important;height:auto!important;aspect-ratio:4 / 5!important}
.project-card--one .project-media{background:url("../../assets/case-mshtm.webp") center / cover no-repeat!important}
.project-card--two .project-media{background:url("../../assets/manifesto-interior.webp") center / cover no-repeat!important}
.project-card--three .project-media{background:url("../../assets/brand-portrait.webp") center / cover no-repeat!important}
.project-card--four .project-media{background:url("../../assets/manifesto-mshtm.webp") center / cover no-repeat!important}
.project-card a::after{display:none!important}
.project-card h3,.project-card p{position:static!important;max-width:100%!important;opacity:1!important;transform:none!important;pointer-events:auto!important}
.project-card h3{margin:22px 0 8px!important;color:#111!important;font:700 clamp(19px,1.45vw,27px)/1 "TT Firs Neue",Arial,sans-serif!important;letter-spacing:-.045em!important;text-transform:uppercase!important}
.project-card p{margin:0!important;color:#111!important;font:400 clamp(15px,1.15vw,21px)/1.05 "TT Firs Neue",Arial,sans-serif!important;letter-spacing:-.035em!important}
.portfolio-all{margin:72px auto 0!important}
@media(max-width:900px){.portfolio{padding:20px 20px 72px!important}.portfolio .portfolio-grid{grid-template-columns:1fr!important;gap:42px!important}.project-card h3{margin-top:16px!important;font-size:23px!important}.project-card p{font-size:17px!important}}

/* Portfolio header aligns to the main editorial grid and keeps the action beside it. */
.portfolio{
  padding:106px clamp(48px,5.8vw,116px) 160px!important;
}
.portfolio-head{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:32px!important;
  width:100%!important;
  max-width:none!important;
  margin:0 0 82px!important;
  padding:0!important;
  border:0!important;
}
.portfolio-head h2{
  margin:0!important;
  color:#111!important;
  font:400 clamp(58px,6.25vw,128px)/.82 "TT Firs Neue",Arial,sans-serif!important;
  letter-spacing:-.065em!important;
  text-transform:uppercase!important;
}
.portfolio-head .portfolio-all{
  display:flex!important;
  flex:0 0 auto!important;
  min-width:0!important;
  margin:0 0 14px!important;
  padding:0!important;
  background:transparent!important;
  color:#111!important;
  font:700 15px/1 "TT Firs Neue",Arial,sans-serif!important;
  letter-spacing:-.03em!important;
  text-decoration:none!important;
  text-transform:uppercase!important;
}
.portfolio-head .portfolio-all:hover{background:transparent!important;color:#680210!important}
.portfolio .portfolio-grid{margin:0!important}
@media(max-width:900px){
  .portfolio{padding:64px 20px 72px!important}
  .portfolio-head{align-items:flex-start!important;flex-direction:column!important;gap:20px!important;margin-bottom:32px!important}
  .portfolio-head h2{margin-bottom:0!important;font-size:42px!important}
  .portfolio-head .portfolio-all{margin:0 0 14px!important;font-size:14px!important}
}

/* Major section headlines share the same scale as the brand panel. */
.brand-note-copy h2,
.statement h2,
.portfolio-head h2{
  font-size:var(--p2)!important;
}

/* Founder signature beneath the brand statement. */
.brand-note-copy{position:relative!important}
.brand-note-description{
  position:absolute!important;
  bottom:136px!important;
  left:clamp(48px,5.8vw,116px)!important;
  max-width:440px!important;
  margin:0!important;
  color:#d4d4d4!important;
  font:400 var(--p3)/1.15 "TT Firs Neue",Arial,sans-serif!important;
  letter-spacing:-.035em!important;
}
.brand-note-founder{
  position:absolute!important;
  bottom:84px!important;
  left:clamp(48px,5.8vw,116px)!important;
  max-width:330px!important;
  margin:0!important;
  color:#fff!important;
  font:400 var(--p4)/1.2 "TT Firs Neue",Arial,sans-serif!important;
  letter-spacing:-.03em!important;
}
.brand-note-copy > .brand-note-founder{
  font:400 var(--p4)/1.18 "TT Firs Neue",Arial,sans-serif!important;
  letter-spacing:-.03em!important;
}
.brand-note-copy > p.brand-note-founder:last-child{
  max-width:none!important;
  font-size:var(--p4)!important;
  line-height:1.18!important;
  white-space:nowrap!important;
}
@media(max-width:900px){.brand-note-description{position:static!important;margin:32px 0 0!important}.brand-note-founder{position:static!important;margin:32px 0 0!important;white-space:normal!important}}

/* 2026 refresh — neutral typeface, editorial photography and consultation CTA. */
@font-face{font-family:InterLocal;src:url("assets/fonts/Inter-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:InterLocal;src:url("assets/fonts/Inter-SemiBold.ttf") format("truetype");font-weight:600 800;font-style:normal;font-display:swap}
body,button,input,textarea,select,.site-header a,.contact,.statement,.services,.portfolio{font-family:InterLocal,Arial,sans-serif!important}
h1,h2,h3,.headline,.service-name,.statement h2,.contact-title h2,.portfolio-head h2{font-family:InterLocal,Arial,sans-serif!important;letter-spacing:-.055em!important}

/* Three straight 3:4 editorial cards replace the former scrapbook. */
.statement-cards{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;align-items:start!important;width:min(100%,720px)!important;height:auto!important;margin:0 auto!important}
.statement-card,.statement-card--strategy,.statement-card--creative,.statement-card--marketing{position:static!important;width:100%!important;aspect-ratio:3 / 4!important;object-fit:cover!important;transform:none!important;border:0!important;box-shadow:none!important}
.statement-card--creative,.statement-card--marketing{margin-top:0!important}

/* The form makes the first contact point and value exchange explicit. */
.contact-title h2{max-width:560px!important}.contact-form>p{max-width:620px!important}.privacy-consent a{color:inherit;text-underline-offset:3px}
.contact-form button{font-size:var(--p5)!important;letter-spacing:-.02em!important}.contact-title h2 span{color:#e52b20!important}

/* A brighter red is reserved for the contact call to action. */
.contact-signature{filter:saturate(1.35) contrast(1.08)!important}.contact-form button:hover{background:#e52b20!important}

/* Consultation mark sits below the title instead of cutting through it. */
.contact-signature{bottom:-240px!important}
@media(max-width:900px){.contact-signature{bottom:-64px!important}}

/* Policy document. */
.privacy-page{background:#f8f7f5!important;color:#101010!important}.privacy-header{position:static!important;background:#f8f7f5!important}.privacy-header::after{display:none!important}.privacy-back{font-size:var(--p5)!important;text-decoration:none!important}.privacy-main{max-width:1120px;margin:0 auto;padding:104px clamp(48px,5.8vw,116px) 160px}.privacy-main h1{max-width:900px;margin:0 0 24px;font-size:var(--p1)!important;line-height:.78!important}.privacy-kicker,.privacy-meta{font-size:var(--p5)!important}.privacy-meta{margin:0 0 56px;color:#5c5c5c}.privacy-notice{max-width:760px;margin:0 0 80px;padding:22px 24px;border-left:3px solid #e52b20;background:#eeeae5;font-size:var(--p4);line-height:1.35}.privacy-main section{max-width:760px;margin:0 0 48px}.privacy-main h2{margin:0 0 14px;font-size:var(--p8)!important;line-height:.95!important}.privacy-main section p{margin:0;font-size:var(--p4)!important;line-height:1.4!important}@media(max-width:900px){.statement-cards{gap:10px!important}.statement-card--creative{margin-top:20px!important}.statement-card--marketing{margin-top:40px!important}.privacy-main{padding:72px 20px 96px}.privacy-main h1{font-size:clamp(48px,12vw,72px)!important}.privacy-notice{margin-bottom:56px}.privacy-main section{margin-bottom:36px}}

/* Editorial hover artwork: five straight portrait pages, never tilted or framed. */
@media (min-width:901px){
  .services .services-side{position:relative!important;align-self:start!important;justify-self:start!important;width:clamp(220px,18vw,310px)!important;height:auto!important;min-height:0!important;aspect-ratio:3 / 4!important;margin:112px 0 0!important;transform:none!important;background:transparent!important;overflow:visible!important}
  .services-side .service-preview{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;aspect-ratio:3 / 4!important;object-fit:cover!important;filter:grayscale(1) contrast(1.08)!important;border:0!important;border-radius:0!important;box-shadow:none!important;opacity:0!important;transform:translateY(16px)!important;transition:opacity .22s ease,transform .34s ease!important}
  .services-side .service-preview.is-visible{opacity:1!important;transform:translateY(0)!important}
}

/* Editable handwritten accents use a local script face, so their copy can change later. */
@font-face{font-family:FreehandLocal;src:url("assets/fonts/Freehand521-BT.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
.handwritten-note{position:absolute;z-index:4;display:block;pointer-events:none;font-family:FreehandLocal,"Brush Script MT",cursive;font-size:clamp(34px,3.2vw,58px);font-weight:400;line-height:.82;letter-spacing:-.045em;transform:rotate(-8deg);white-space:nowrap}

.handwritten-note--statement{right:8%;bottom:clamp(34px,4vw,72px);color:#f4d447}
.handwritten-note--services{right:-14%;bottom:-15%;color:#e52b20;opacity:.92}
@media(max-width:900px){.handwritten-note--statement{right:10px;bottom:6px;font-size:clamp(28px,9vw,46px)}.handwritten-note--services{display:none}}

/* Keep legal and social links inside the signature footer as part of the same monochrome system. */
footer a{color:#fff!important;text-decoration:none!important}footer a:hover{text-decoration:underline!important;text-underline-offset:4px}

/* The editorial triptych stays on one shared baseline at every breakpoint. */
@media(max-width:900px){.statement-card--creative,.statement-card--marketing{margin-top:0!important}}

/* Keep hover artwork clear of the service numbers while retaining a left gutter. */
@media(min-width:901px){
  .services .services-side{transform:translate(clamp(-142px,-7.2vw,-76px),34px)!important}
}

/* Center the consultation heading on the photograph's vertical axis. */
@media(min-width:901px){
  .contact-title h2{transform:translateY(clamp(112px,8.1vw,160px))}
  .contact-title{z-index:3!important}
  .contact-signature{right:-148px!important;bottom:-365px!important;z-index:5!important}
}

/* One type voice everywhere: Inter, with Helios reserved for the display signature only. */
body,body :is(*,#inter-type-system),body :is(*,#inter-type-system)::before,body :is(*,#inter-type-system)::after{font-family:InterLocal,Arial,sans-serif!important;font-weight:600!important}
body :is(.closing-signature p,#helios-type-system){font-family:HeliosExt,Arial,sans-serif!important;font-weight:400!important}