/* Approved scarlet opening. All hero typography and controls remain native HTML. */
:root{--scarlet:#f00029}
.site-header{padding:18px 4.6vw 0!important;background:#fff!important;color:var(--scarlet);min-height:0}
.site-header .reference-logo,.footer-brand.reference-logo{display:flex;align-items:center;justify-content:space-between;gap:2vw;width:100%;font:700 9.8vw/1 var(--sans);letter-spacing:-.065em;padding:0;margin:0;overflow:visible}
.site-header .reference-logo{color:var(--scarlet)}
.masthead-name{white-space:nowrap}.masthead-dot{font-size:.55em;letter-spacing:0;flex:none}
.site-header .reference-nav{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--scarlet);padding:14px 0;margin-top:19px;gap:24px}
.site-header .reference-nav>span{display:block;font-size:10px;letter-spacing:.17em}
.site-header .reference-nav nav{display:flex;gap:28px;flex-wrap:wrap}.site-header .reference-nav nav a{font-size:12px}
.scarlet-hero.hero-reel{position:relative;inset:auto;width:100%;height:auto;min-height:0;margin:0;padding:0;background:var(--scarlet);color:#fff;overflow:hidden;isolation:isolate;border:0;transform:none;border-radius:0}
.scarlet-copy{text-align:center;padding:88px 4vw 0;position:relative;z-index:2}
.scarlet-copy h1{font:700 clamp(38px,6.1vw,108px)/1.04 var(--sans);letter-spacing:-.055em;margin:0 auto;max-width:1600px}
.scarlet-copy h1 span{display:block;white-space:nowrap}
.scarlet-copy>p{font:400 clamp(15px,1.45vw,23px)/1.55 var(--sans);letter-spacing:.015em;margin:24px auto 0;max-width:900px}
.scarlet-actions{display:flex;justify-content:center;gap:18px;margin-top:28px}
.scarlet-actions :is(button,a){background:#fff;color:#df0026;border:1px solid #fff;padding:15px 25px;min-height:49px;font:500 13px/1.3 var(--sans);min-width:218px}
.scarlet-actions :is(button,a)+:is(button,a){background:transparent;color:#fff}
.scarlet-hero button:focus-visible,.scarlet-hero a:focus-visible{outline:3px solid #fff;outline-offset:5px}
.scarlet-stage{perspective:1300px;margin:65px auto 0;width:min(92%,1550px);height:clamp(300px,39vw,660px);position:relative}
.scarlet-entrance{animation:scarlet-arrive 1.5s cubic-bezier(.16,1,.3,1) both}
.scarlet-site{margin:0;background:#fff;color:#171717;transform:translateY(var(--plane-rise,0px)) rotateX(var(--plane-tilt,25deg));transform-origin:50% 0;will-change:transform;backface-visibility:hidden}
.scarlet-site-nav{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 4%;font:400 9px/1.3 var(--sans);border-bottom:1px solid #e7e7e7}.scarlet-site-nav>span:first-child{letter-spacing:.2em;font-size:12px}
.scarlet-site-body{display:grid;grid-template-columns:28% 72%;min-height:380px}
.scarlet-site-copy{padding:55px 10% 35px 14%;display:flex;flex-direction:column;align-items:flex-start}
.scarlet-site-copy>span:first-child{font:400 9px/1.4 var(--sans);letter-spacing:.14em}
.scarlet-site-copy h2{font:400 clamp(26px,3.1vw,54px)/1.02 var(--sans);letter-spacing:-.045em;margin-top:45px}
.scarlet-site-copy p{font:400 12px/1.6 var(--sans);margin-top:20px}.scarlet-faux-link{font-size:10px;border-bottom:1px solid #111;margin-top:30px;padding-bottom:5px}
.scarlet-site-body img{display:block;width:100%;height:100%;aspect-ratio:1.5;object-fit:cover;filter:grayscale(1)}
.scarlet-site figcaption{padding:15px 4%;font-size:9px;letter-spacing:.1em;text-transform:uppercase;border-top:1px solid #eee}
.scarlet-utility{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;background:var(--scarlet);padding:12px 4.6vw;font-size:10px}
.scarlet-utility button{border:0;border-bottom:1px solid #ffffff88;background:none;color:#fff;font-size:10px;padding:10px 0;min-height:40px}
.footer-brand.reference-logo{color:var(--scarlet);font-size:9.2vw;padding-block:34px 15px}
@keyframes scarlet-arrive{from{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}
.motion-paused .scarlet-entrance{animation:none}
@media(min-width:1800px){.scarlet-copy{padding-top:105px}.scarlet-stage{margin-top:75px}}
@media(max-width:700px){
.site-header{padding:17px 4vw 0!important}.site-header .reference-logo{font-size:9.8vw;gap:1.4vw}.site-header .reference-nav{display:flex;padding:13px 0;margin-top:15px;gap:12px}.site-header .reference-nav>span{font-size:6px;letter-spacing:.06em;max-width:118px;line-height:1.7}.site-header .reference-nav nav{gap:16px}.site-header .reference-nav nav a{font-size:10px}
.scarlet-copy{padding:54px 4vw 0}.scarlet-copy h1{font-size:6.7vw;line-height:1.12;letter-spacing:-.055em}.scarlet-copy>p{font-size:14px;max-width:330px;margin-top:20px;padding-inline:6px}.scarlet-actions{gap:10px;margin-top:24px}.scarlet-actions :is(button,a){min-width:0;min-height:47px;padding:12px 14px;font-size:11px}
.scarlet-stage{width:94%;height:250px;margin-top:42px;perspective:700px}.scarlet-site-nav{padding:15px 4%;font-size:6px;gap:8px}.scarlet-site-nav>span:first-child{font-size:7px}.scarlet-site-nav>div{display:none}.scarlet-site-body{min-height:205px;grid-template-columns:32% 68%}.scarlet-site-copy{padding:22px 10%}.scarlet-site-copy>span:first-child{font-size:5px}.scarlet-site-copy h2{font-size:5vw;margin-top:24px}.scarlet-site-copy p{font-size:6px;margin-top:12px}.scarlet-faux-link{font-size:6px;margin-top:18px}.scarlet-site figcaption{font-size:6px;padding:10px 4%}.scarlet-site-body img{min-height:205px}.scarlet-utility{font-size:8px;padding:8px 4vw}.scarlet-utility button{font-size:9px}.footer-brand.reference-logo{font-size:9.2vw;gap:1.4vw}
}
/* Reference composition: an oversized masthead above one architectural plane. */
.site-header{padding:.65vw 4.6vw 0!important}
.site-header .reference-logo{font-size:9.8vw;line-height:.85;letter-spacing:-.065em;font-weight:900;-webkit-text-stroke:1px currentColor}
.masthead-dot{font-size:0;width:3.25vw;height:3.25vw;border-radius:50%;background:currentColor}
.site-header .reference-nav{position:relative;border-top:0;margin-top:1vw;padding:.85vw 0}
.site-header .reference-nav:before{content:"";position:absolute;top:0;left:-4.6vw;right:-4.6vw;height:1px;background:var(--scarlet)}
.site-header .reference-nav>span{font-size:.85vw}
.site-header .reference-nav nav a{font-size:1vw}
.scarlet-copy{padding:5.9vw 4vw 0}
.scarlet-copy h1{font-size:6.6vw;line-height:.95;letter-spacing:-.04em;font-weight:900;-webkit-text-stroke:2.5px currentColor}
.scarlet-copy>p{font-size:1.55vw;line-height:1.5;margin-top:1.5vw;letter-spacing:.035em}
.scarlet-actions{margin-top:1.6vw;gap:1.2vw}
.scarlet-actions :is(button,a){min-width:14.2vw;min-height:3.2vw;padding:1vw 1.5vw;font-size:1vw}
.scarlet-stage{perspective:none;width:66.5%;height:32vw;margin-top:4.4vw}
.scarlet-entrance{perspective:60vw;perspective-origin:50% 0}
.scarlet-site{transform:translateY(var(--plane-rise,0px)) rotateX(var(--plane-tilt,55deg));transform-origin:50% 0}
.scarlet-site-nav{padding:1.7vw 4%;font-size:.6vw}
.scarlet-site-nav>span:first-child{font-size:.8vw}
.scarlet-site-body{grid-template-columns:29% 71%;min-height:33vw}
.scarlet-site-copy{padding:3vw 10% 2vw 14%}
.scarlet-site-copy h2{font-size:3vw;font-weight:300;margin-top:2.4vw}
.scarlet-site-body img{height:39vw;aspect-ratio:auto;object-position:center}
@media(max-width:700px){
.site-header{padding:14px 4vw 0!important}
.site-header .reference-nav{margin-top:14px;padding:13px 0}
.site-header .reference-nav>span{font-size:6px}
.site-header .reference-nav nav a{font-size:10px}
.scarlet-copy{padding:48px 4vw 0}
.scarlet-copy h1{font-size:6.7vw;line-height:1.06;-webkit-text-stroke:.45px currentColor}
.scarlet-copy>p{font-size:14px;line-height:1.5;margin-top:20px}
.scarlet-actions{margin-top:24px;gap:10px}
.scarlet-actions :is(button,a){font-size:11px;min-height:47px;padding:12px 14px}
.scarlet-stage{width:76%;height:55vw;margin-top:42px}
.scarlet-entrance{perspective:100vw}
.scarlet-site-nav{padding:12px 4%}.scarlet-site-nav>span:first-child{font-size:7px}
.scarlet-site-copy{padding:20px 10%}.scarlet-site-copy h2{font-size:4vw;margin-top:20px}
.scarlet-site-body img{height:65vw}
}
@media(prefers-reduced-motion:reduce){.scarlet-entrance{animation:none}.scarlet-site{will-change:auto}}

.scarlet-hero.hero-reel{background:#320300 url('assets/hero-background.jpg') center/cover no-repeat}
.hero-background-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;pointer-events:none}
.scarlet-hero:before{content:"";position:absolute;inset:0;background:rgba(15,0,0,.2);z-index:-1;pointer-events:none}
.scarlet-utility{background:transparent}
.editorial-approach{position:relative;isolation:isolate;background:#080204 url('assets/approach-background.jpg') center/cover no-repeat}
.approach-background-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;pointer-events:none}
.editorial-approach:before{content:"";position:absolute;inset:0;background:rgba(8,0,3,.35);z-index:-1;pointer-events:none}
.live-client-preview{display:block;color:inherit}
.live-client-preview img{aspect-ratio:1363/936;object-fit:cover;object-position:top}
.live-client-project .concept-browser-bar>span:last-child{font-size:9px;letter-spacing:.12em}

/* Published client websites, distinct from the studio concepts below. */
.client-work{background:#fff;padding-block:90px;color:#30070c}
.client-work-intro{display:grid;grid-template-columns:1fr 2fr;gap:24px 7%;align-items:start;margin-bottom:50px}
.client-work-intro .eyebrow{padding-top:12px}
.client-work-intro h2{font:500 clamp(36px,4.5vw,72px)/1.04 var(--sans);letter-spacing:-.045em}
.client-work-intro p{grid-column:2;font-size:15px;line-height:1.6;color:#63585a}
.client-projects{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.client-project{display:flex;flex-direction:column;min-width:0;min-height:390px;padding:32px;background:#3b080e;color:#fff}
.client-project:nth-child(2){background:#f3efdf;color:#30070c}
.client-project-index{font-size:10px;letter-spacing:.12em}
.client-project h3{font:500 clamp(35px,4.8vw,76px)/1.02 var(--sans);letter-spacing:-.045em;margin:64px 0 50px}
.client-project-footer{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-top:auto;padding-top:20px;border-top:1px solid currentColor;font-size:12px}
.client-visit{white-space:nowrap;text-decoration:underline;text-underline-offset:5px}
.client-project:focus-visible{outline:3px solid #ef002a;outline-offset:5px}
@media(max-width:700px){.client-work{padding-block:55px}.client-work-intro{display:block;margin-bottom:30px}.client-work-intro h2{margin-top:25px}.client-work-intro p{margin-top:20px}.client-projects{grid-template-columns:1fr;gap:18px}.client-project{padding:25px;min-height:320px}.client-project h3{font-size:48px;margin-block:48px}.client-project-footer{font-size:11px}}

.scarlet-actions a{display:inline-flex;align-items:center;justify-content:center}.approach-closing>a{display:inline-block;color:inherit;border-bottom:1px solid currentColor;font-size:11px;padding:13px 0 7px;margin-top:10px;min-height:44px}.site-header .reference-nav nav{row-gap:12px}@media(max-width:700px){.site-header .reference-nav{flex-wrap:wrap}.site-header .reference-nav nav{gap:16px}.site-header .reference-nav nav a{min-height:32px;display:inline-flex;align-items:center}}