@font-face{font-family:"Archivo Variable";src:url('/assets/rec/archivo-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter Variable";src:url('/assets/rec/inter-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-display:swap}
body.rec-case-page{overflow-x:clip}
.rec-case-page{--rec-paper:#f4f3f1;--rec-sage:#e8ecdf;--rec-green:#222c29;--rec-red:#bd3f54;--rec-ink:#111217;--rec-pad:clamp(20px,5vw,72px)}
.rec-case-page h1,.rec-case-page h2,.rec-case-page h3,.rec-case-page p{margin:0}
.rec-case-page a{text-decoration:none}
.rec-case-page .rec-case-nav{position:relative!important}
.rec-case-page :focus-visible{outline:3px solid #bd3f54;outline-offset:4px}
.rec-case-page .rec-skip{position:fixed;top:8px;left:8px;transform:translateY(-160%);z-index:200;background:#fff;padding:14px}
.rec-case-page .rec-skip:focus{transform:none}
.rec-case-page .rec-case-hero,.rec-case-page .rec-case-caption,.rec-case-page .rec-focus-section,.rec-case-page .rec-case-end,.rec-case-page .rec-case-footer{max-width:1440px;margin:auto}
.rec-case-page .rec-case-hero{padding:40px var(--rec-pad) 0}
.rec-case-page .rec-back{font-size:13px;color:#656166}
.rec-case-page .rec-case-title{display:grid;grid-template-columns:1.4fr 1fr;gap:50px;align-items:end;margin:60px 0 44px}
.rec-case-page .rec-case-title h1{font-size:clamp(60px,8.1vw,116px);font-weight:500;letter-spacing:-.065em;line-height:.95}
.rec-case-page .rec-case-title h1>span{color:var(--rec-red)}
.rec-case-page .rec-case-title>div>p:last-child{font-size:clamp(22px,2.8vw,40px);line-height:1.15;letter-spacing:-.025em;margin-top:24px}
.rec-case-page .rec-case-kicker{font:500 10px/1.5 "Inter Variable",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.rec-case-page .rec-case-summary{display:flex;justify-content:space-between;gap:40px;border-top:1px solid #aaa;padding:26px 0 40px}
.rec-case-page .rec-case-summary>p{font-size:17px;line-height:1.65;max-width:650px}
.rec-case-page .rec-case-summary>div{flex:none;display:grid;align-content:start;gap:16px;font-size:13px}
.rec-case-page .rec-case-summary span{font:10px/1.5 "Inter Variable",Arial,sans-serif;letter-spacing:.08em;color:#656166}
.rec-case-page .rec-case-index{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid #111217}
.rec-case-page .rec-case-index a{padding:22px 16px;font-size:12px;display:flex;gap:20px;align-items:center;border-right:1px solid #111217}
.rec-case-page .rec-case-index a:first-child{padding-left:0}.rec-case-page .rec-case-index a:last-child{border-right:0}
.rec-case-page .rec-case-index a>span{font-size:18px;margin-right:auto}
.rec-case-page .rec-case-index a:hover{color:#1f3fd0}
.rec-case-page .rec-case-caption{padding:64px var(--rec-pad) 38px;display:grid;grid-template-columns:1fr 1.25fr;gap:60px}
.rec-case-page .rec-case-caption>span{font:500 11px/1.5 "Inter Variable",Arial,sans-serif;color:#656166}
.rec-case-page .rec-case-caption p{font-size:17px;line-height:1.65;max-width:660px}
.rec-case-page .rec-case-caption h2{font-size:clamp(36px,4.5vw,64px);letter-spacing:-.045em;line-height:1.04;margin:0 0 24px}
/* The original REC styles live only beneath this root. Portfolio chrome stays outside it. */
.rec-case-page .rec-home-experience{border-block:1px solid #b7c1af;--ink:#242522;font-weight:400}
.rec-case-page .rec-home-experience [hidden],.rec-case-page [hidden]{display:none!important}
.rec-case-page .guide-nav{border:0;gap:20px}
.rec-case-page .guide-nav>img{width:82px;height:auto;flex:none}
.rec-case-page .guide-nav>span{font-size:11px;letter-spacing:.03em;margin-right:auto}
.rec-case-page .guide-nav>a{font-size:11px}
.rec-case-page .guide-stage{min-height:740px}
.rec-case-page .guide-film>#guide-video{width:100%;height:100%;object-fit:contain;background:#1c2b21}
.rec-case-page .guide-stage[data-visual=illustration] .source-desk{visibility:hidden!important}
.rec-case-page .rec-home-experience .scene-switch button{min-height:36px}
.rec-case-page .rec-home-experience .clip-formats button{min-height:44px}
.rec-case-page .rec-home-experience .caldone-proof{max-width:1440px;margin:auto}
.rec-case-page .rec-home-experience .clip-source-note{font-size:12px;max-width:none;color:#c4cec4}
.rec-case-page .rec-home-experience .recording-example-footer{font-size:11px}
.rec-case-page .rec-home-experience .mini-toolbar>img{width:66px}
.rec-case-page .rec-home-experience .guide-stage[data-beat="1"] .guide-nav>img{filter:none}
.rec-case-page .rec-home-experience .guide-stage[data-beat="1"] .guide-nav>span,.rec-case-page .rec-home-experience .guide-stage[data-beat="1"] .guide-nav>a{color:#ecf1e6}
/* In-page focus mode uses normal document flow, including when settings grow. */
.rec-case-page .rec-focus-section{padding:0 var(--rec-pad) 70px;scroll-margin-top:24px}
.rec-case-page .rec-focus-section .rec-case-caption{padding:80px 0 38px}
.rec-case-page .rec-focus-demo{font-family:"Inter Variable",Arial,sans-serif;background:var(--rec-green);color:#fffdf7;border:1px solid #49574c;border-radius:8px;overflow:clip}
.rec-case-page .rec-focus-demo button,.rec-case-page .rec-focus-demo select{font:500 12px/1.3 "Inter Variable",Arial,sans-serif;border:1px solid #647b6b;background:#334139;color:#fffdf7;border-radius:4px;min-height:44px;padding:10px 15px;cursor:pointer}
.rec-case-page .rec-focus-demo button:hover{background:#43534a}
.rec-case-page .rec-focus-demo button:disabled{opacity:.4;cursor:default}
.rec-case-page .rec-focus-top{display:flex;align-items:center;gap:20px;padding:15px 22px;border-bottom:1px solid #ffffff20;min-height:75px}
.rec-case-page .rec-focus-top>img{width:66px;height:auto}
.rec-case-page .rec-focus-top>span{font-size:11px;color:#d4ded4;margin-right:auto}
.rec-case-page .rec-focus-layout{display:grid;grid-template-columns:1.3fr 1fr}
.rec-case-page .rec-focus-camera{position:relative;min-height:540px;background:#18251f;isolation:isolate}
.rec-case-page .rec-focus-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 42%;z-index:-1;background:#b9cdb8}
.rec-case-page .rec-focus-prompt{--prompt-opacity:.4;position:relative;max-width:560px;width:calc(100% - 48px);margin:0 auto;background:rgb(19 22 20 / var(--prompt-opacity));backdrop-filter:blur(18px);padding:20px 24px 24px;border-radius:0 0 6px 6px;text-align:center}
.rec-case-page .rec-focus-prompt::before{content:'';position:absolute;top:0;left:50%;width:3px;height:9px;background:#81b9a7}
.rec-case-page .rec-focus-prompt>span{display:flex;justify-content:center;gap:12px;font-size:9px;color:#d5dfd2;letter-spacing:.06em;margin-bottom:12px}
.rec-case-page .rec-focus-prompt i{font-style:normal;letter-spacing:0}
.rec-case-page .rec-focus-prompt h3{font:500 clamp(24px,2.5vw,34px)/1.22 "Archivo Variable",Arial,sans-serif;letter-spacing:-.03em;text-wrap:balance}
.rec-case-page .rec-focus-prompt[data-prompt-size=compact] h3{font-size:clamp(20px,2vw,27px)}
.rec-case-page .rec-focus-prompt[data-prompt-size=large] h3{font-size:clamp(30px,3.4vw,44px)}
.rec-case-page .rec-focus-demo[data-active=false] .rec-focus-prompt{display:none}
.rec-case-page .rec-focus-sidebar{padding:clamp(26px,4vw,56px);align-self:center}
.rec-case-page .rec-focus-sidebar h3{font:500 clamp(26px,3.4vw,45px)/1.08 "Archivo Variable",Arial,sans-serif;letter-spacing:-.045em;margin:24px 0}
.rec-case-page .rec-focus-sidebar>p{font-size:14px;line-height:1.7;color:#d0dbce;max-width:320px}
.rec-case-page .rec-focus-sidebar #focus-enter{background:#e5ebdd;color:#20342a;margin:26px 0 20px;min-width:200px}
.rec-case-page .rec-focus-sidebar .rec-focus-safety{font-size:11px;color:#bdccbb}
.rec-case-page .rec-focus-demo[data-active=true] .rec-focus-layout{display:block}
.rec-case-page .rec-focus-demo[data-active=true] .rec-focus-sidebar{display:none}
.rec-case-page .rec-focus-demo[data-active=true] .rec-focus-camera{min-height:560px}
.rec-case-page .rec-focus-demo[data-preview-visible=false] .rec-focus-portrait{visibility:hidden}
.rec-case-page .rec-focus-hidden{position:absolute;top:65%;left:0;width:100%;text-align:center;font-size:14px;color:#bbccbc}
.rec-case-page .rec-focus-media-note{position:absolute;bottom:16px;left:16px;font-size:10px;background:#18251fe6;padding:7px 10px;border-radius:3px}
.rec-case-page .rec-focus-tools{padding:20px 24px}
.rec-case-page .rec-focus-settings{display:grid;grid-template-columns:1fr 1fr auto;gap:24px;align-items:end;padding-bottom:20px}
.rec-case-page .rec-focus-settings label{font-size:11px;display:grid;grid-template-columns:1fr auto;gap:8px;color:#d3dfd1}
.rec-case-page .rec-focus-settings select,.rec-case-page .rec-focus-settings input{grid-column:1/-1;width:100%;min-height:44px;accent-color:#adc59d}
.rec-case-page .rec-focus-settings select{background:#303a30}
.rec-case-page .rec-focus-actions{border-top:1px solid #ffffff20;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.rec-case-page #focus-next{background:#237568}
.rec-case-page #focus-feedback{font-size:11px;text-align:center;color:#c6d0c4}
.rec-case-page .rec-case-end{padding:40px var(--rec-pad) 90px}
.rec-case-page .rec-case-end h2{font-size:clamp(36px,4.8vw,68px);line-height:1.04;letter-spacing:-.045em;margin:26px 0}
.rec-case-page .rec-case-end>p:last-of-type{max-width:650px;font-size:16px;line-height:1.7;color:#656166}
.rec-case-page .rec-case-end>div{display:flex;gap:40px;margin-top:35px;font-size:14px}
.rec-case-page .rec-case-footer{padding:26px var(--rec-pad);border-top:1px solid #aaa;display:flex;gap:30px;align-items:center;font-size:12px}
.rec-case-page .rec-case-footer>span{margin-left:auto;color:#656166}
@media(max-width:760px){
.rec-case-page .rec-case-title{grid-template-columns:1fr;gap:30px;margin:38px 0 30px}
.rec-case-page .rec-case-title>div>p:last-child{font-size:25px;margin-top:14px}
.rec-case-page .rec-case-summary{display:block}.rec-case-page .rec-case-summary>div{display:flex;justify-content:space-between;margin-top:25px}
.rec-case-page .rec-case-index a{padding:16px 9px;gap:8px;flex-wrap:wrap;font-size:10px}
.rec-case-page .rec-case-index a>span{font-size:14px;order:3;width:100%}
.rec-case-page .rec-case-caption{grid-template-columns:1fr;gap:20px;padding-top:42px}
.rec-case-page .rec-case-caption p{font-size:16px}
.rec-case-page .rec-home-experience .guide-stage{grid-template-rows:58px 190px minmax(370px,1fr) 64px;min-height:740px}
.rec-case-page .guide-nav>span{font-size:9px}.rec-case-page .guide-nav>a{display:none}
.rec-case-page .rec-home-experience .guide-copy h2{font-size:36px}
.rec-case-page .rec-home-experience .guide-explanation>p{font-size:12px}
.rec-case-page .rec-home-experience .guide-explanation>span{font-size:10px}
.rec-case-page .rec-home-experience .character-intro p{font-size:11px}
.rec-case-page .rec-home-experience .illustration-footer>span{font-size:10px}
.rec-case-page .rec-home-experience .illustration-footer button{font-size:10px;gap:8px}
.rec-case-page .rec-home-experience .scene-top>span:first-child{display:none}
.rec-case-page .rec-home-experience .scene-top{justify-content:flex-end}
.rec-case-page .rec-home-experience .scene-switch button{font-size:10px;min-height:36px}
.rec-case-page .rec-home-experience .clip-preview-foot{font-size:10px}
.rec-case-page .rec-home-experience .recording-example-footer{font-size:10px}
.rec-case-page .rec-home-experience .clip-preview-stage{padding:12px}
.rec-case-page .rec-focus-layout{grid-template-columns:1fr}
.rec-case-page .rec-focus-camera{min-height:380px}
.rec-case-page .rec-focus-demo[data-active=true] .rec-focus-camera{min-height:470px}
.rec-case-page .rec-focus-prompt{width:calc(100% - 24px);padding:20px 14px}
.rec-case-page .rec-focus-tools{padding:16px}
.rec-case-page .rec-focus-settings{grid-template-columns:1fr 1fr;gap:14px}
.rec-case-page #focus-preview{grid-column:1/-1}
.rec-case-page .rec-focus-actions{flex-wrap:wrap;gap:12px}
.rec-case-page #focus-feedback{order:3;width:100%}
.rec-case-page .rec-focus-actions button{font-size:10px;padding:10px}
.rec-case-page .rec-focus-top{gap:14px;padding:14px}
.rec-case-page .rec-focus-top>span{font-size:10px}
.rec-case-page #focus-exit{font-size:10px;padding:10px}
.rec-case-page .rec-case-end>div{gap:25px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){html:has(.rec-case-page){scroll-behavior:auto}.rec-case-page *{animation:none!important;transition:none!important}.rec-case-page .rec-home-experience #look-tour{display:none!important}}

/* Release the mobile scroll runway when someone takes control, bringing the
   appearance controls directly beneath their held preview. */
@media(max-width:700px){
.rec-case-page .rec-home-experience .caldone-proof[data-following=false] .clip-canvas-track{height:auto}
.rec-case-page .rec-home-experience .caldone-proof[data-following=false] .clip-preview-stage{height:320px}
.rec-case-page .rec-home-experience .caldone-proof[data-following=false] .styled-clip[data-frame=portrait]{height:100%;width:auto}
.rec-case-page .rec-home-experience .caldone-proof[data-following=false] .clip-canvas-column{padding-block:12px}
.rec-case-page .rec-home-experience .caldone-proof[data-following=false] .clip-inspector{padding-top:15px}
.rec-case-page .rec-home-experience .caldone-proof[data-following=false] .inspector-heading{margin-bottom:15px}
}

.rec-case-page .rec-home-experience .styled-clip[data-frame=portrait] .clip-heading h3{font-size:10cqw}
.rec-case-page .rec-home-experience .styled-clip[data-frame=portrait][data-layout=paper] .clip-heading h3{font-size:9cqw}