/* FC studio: cinematic imagery, precise controls and measured gold accents. */
.site-intro{position:fixed;inset:0;z-index:200;background:#0b0b0b;display:grid;place-items:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .65s ease,visibility .65s;contain:layout paint}
.intro-playing .site-intro{opacity:1;visibility:visible}
.intro-center{display:flex;flex-direction:column;align-items:center}
.intro-frame{position:relative;padding:28px 30px}
.intro-frame i,.focus-frame i{position:absolute;width:15px;height:15px;border-color:#bfa368;border-style:solid;border-width:0}
.intro-frame i:nth-child(1),.focus-frame i:nth-child(1){top:0;left:0;border-width:1px 0 0 1px}
.intro-frame i:nth-child(2),.focus-frame i:nth-child(2){top:0;right:0;border-width:1px 1px 0 0}
.intro-frame i:nth-child(3),.focus-frame i:nth-child(3){bottom:0;left:0;border-width:0 0 1px 1px}
.intro-frame i:nth-child(4),.focus-frame i:nth-child(4){bottom:0;right:0;border-width:0 1px 1px 0}
.intro-logo{width:180px;position:relative}
.intro-logo img{width:100%;height:auto}
.intro-playing .intro-logo{animation:logo-arrive 1.5s var(--ease) both}
.intro-playing .intro-frame i{animation:frame-lock 1.8s var(--ease) both}
.intro-name{font-size:12px;letter-spacing:.3em;color:#d1be91;margin-top:25px}
.intro-track{height:2px;width:200px;background:#302b22;overflow:hidden;margin-top:32px}
.intro-track span{display:block;height:100%;background:#e0c68d;transform-origin:left;transform:scaleX(0)}
.intro-playing .intro-track span{animation:studio-start 2.8s cubic-bezier(.35,.05,.22,1) forwards}
.intro-caption{font-size:12px;letter-spacing:.1em;color:#999184;margin-top:16px}
.intro-signature{position:absolute;bottom:32px;font-size:12px;letter-spacing:.15em;color:#90887c}
.contact-head{min-height:44px}
.contact-head>span:first-child{font-size:14px}
.hero-copy{transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.intro-playing .hero-copy{opacity:0;transform:translateY(30px)}
.hero h1 .gold{position:relative}
.hero h1 .gold:after{content:'';position:absolute;left:2px;bottom:-9px;width:100%;height:1px;background:linear-gradient(90deg,var(--gold),transparent);transform-origin:left;animation:line-enter 1.3s .5s var(--ease) both}
.intro-playing .hero h1 .gold:after{animation:none;transform:scaleX(0)}
.hero-description{max-width:365px;margin-top:31px}
.hero-actions{margin-top:30px}
.button{position:relative;overflow:hidden}
.button:before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,#fff3 50%,transparent 80%);transform:translateX(-130%);transition:transform .8s var(--ease);pointer-events:none}
.button:hover:before{transform:translateX(130%)}
.hero-visual{height:550px;transition:opacity 1s .15s var(--ease),translate 1.2s .15s var(--ease)}
.intro-playing .hero-visual{opacity:0;translate:0 40px}
.visual-label{margin:0 0 24px 18px;font-size:12px;letter-spacing:.09em;color:#a6a195}
.visual-index{font-size:12px;letter-spacing:.02em;color:#bca574}
.camera-window{top:42px;left:18px;right:0;border:1px solid #6f604147;border-radius:12px;box-shadow:0 25px 80px #0006;background:#191918}
.window-bar{height:44px;padding-inline:16px;font-size:12px;gap:13px;background:linear-gradient(110deg,#242421,#171717);border-color:#ffffff0d}
.window-glyph{font-size:12px;letter-spacing:-.08em;color:var(--gold);padding-right:13px;border-right:1px solid #ffffff1f}
.reel-count{font-size:12px;color:#c8b88f;margin-left:auto;letter-spacing:.07em}
.project-slides{height:330px;background:#171917;touch-action:pan-y}
.project-slides:after{display:none}
.hero-slide{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;background:#171917;text-align:left;opacity:0;pointer-events:none;transition:opacity .8s ease;overflow:hidden;isolation:isolate}
.hero-slide.is-active{opacity:1;pointer-events:auto;z-index:1}
.hero-slide:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#08090866,transparent 27%,#080909dd);pointer-events:none}
.hero-slide video{width:100%;height:100%;object-fit:cover;object-position:50% 45%;filter:saturate(.82) brightness(.88);transform:scale(1.045);transition:transform 1.5s var(--ease)}
.hero-slide.is-active video{transform:scale(1)}
.hero-slide[data-slide="1"] video{object-position:50% 48%}
.slide-kicker{position:absolute;left:24px;top:24px;z-index:2;font-size:12px;letter-spacing:.09em;color:#eee9dc;border-left:2px solid var(--gold);padding-left:11px}
.slide-title{position:absolute;left:24px;bottom:60px;z-index:2;font-size:clamp(1.8rem,2.5vw,2.7rem);line-height:1.1;letter-spacing:-.035em;max-width:90%;transform:translateY(14px);opacity:0;transition:transform .8s .16s var(--ease),opacity .8s .16s}
.is-active .slide-title{transform:none;opacity:1}
.slide-view{position:absolute;left:24px;right:24px;bottom:21px;z-index:2;display:flex;align-items:center;justify-content:space-between;color:#dfcfa8;font-size:14px}
.slide-view>span{display:grid;place-items:center;width:28px;height:28px;border:1px solid #d4bd835c;border-radius:50%;font-size:20px;line-height:1;transition:transform .4s,background .4s}
.hero-slide:hover .slide-view>span{transform:rotate(90deg);background:#d0b47720}
.hero-slide:focus-visible{outline:2px solid var(--gold);outline-offset:-5px}
.reel-controls{min-height:66px;padding:8px 13px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#1b1b19;border-top:1px solid #ffffff0c}
.reel-dots{display:flex;align-items:center;gap:4px}
.reel-dot{min-height:44px;min-width:72px;padding:10px 12px;background:transparent;display:flex;gap:7px;align-items:center;border:1px solid transparent;border-radius:5px;color:#b5b4ab;font-size:14px;white-space:nowrap;transition:color .3s,background .3s,border-color .3s}
.reel-dot>span{font-size:12px;color:#86877f}
.reel-dot.is-active{background:#d0b47712;border-color:#d0b47740;color:#e6d2a3}
.reel-dot.is-active>span{color:#c1ac7e}
.reel-status{font-size:12px;color:#a39d8e;white-space:nowrap}
.motion-toggle{background:#ffffff04;display:grid;place-items:center;height:44px;width:44px;border:1px solid #a38f5e59;border-radius:50%;color:#dcc596;transition:background .25s,transform .3s;flex-shrink:0}
.motion-toggle:hover{background:#d0b4771a;transform:scale(1.06)}
.motion-toggle svg{width:18px;height:18px;grid-area:1/1}
.motion-toggle .play-icon{display:none}
.motion-toggle[aria-pressed="true"] .play-icon{display:block}
.motion-toggle[aria-pressed="true"] .pause-icon{display:none}
.brand-window{left:18px;bottom:0;width:200px;height:53px;border:none;border-radius:0;z-index:3;padding:0;background:transparent;box-shadow:none;pointer-events:none;flex-direction:row;align-items:center;justify-content:flex-start;gap:18px}
.brand-window>img{width:62px;max-height:42px;height:auto;margin:0}
.brand-window-bottom{font-size:12px;letter-spacing:.08em;color:#9f947a}
.brand-window-bottom>span:last-child{display:none}
.orbit{border-color:#d0b47714;width:460px;height:460px;left:12%;top:8%;transition:rotate 1.5s var(--ease)}
.hero-visual:hover .orbit{rotate:12deg}
.orbit:after{border-style:dashed;border-color:#d0b47714}
.expertise-strip .wrap{font-size:12px;min-height:70px}
/* Services pair clear offerings with actual production stills. */
.services{gap:7%;grid-template-columns:1fr 1fr;align-items:start}
.services-list{padding-top:0;border-top:0}
.service{position:relative;border-bottom:1px solid #414138;overflow:hidden;padding-inline:18px;margin-bottom:10px;border-radius:6px;background:#151515;transition:background .35s,border-color .35s}
.service:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(250px circle at var(--pointer-x,50%) var(--pointer-y,50%),#d0b4770d,transparent 70%);transition:opacity .4s}
.service:hover:before{opacity:1}
.service[open]{background:#1b1b18;border-color:#aa9156}
.service summary{gap:15px;min-height:84px;padding-block:21px;position:relative}
.service-number{font-size:12px;color:#a49f90;font-variant-numeric:tabular-nums;border:1px solid #4b493f;border-radius:50%;width:30px;height:30px;display:grid;place-items:center;flex-shrink:0;transition:background .35s,color .35s}
.service[open] .service-number{background:var(--gold);color:#171610;border-color:var(--gold)}
.service-name{font-size:21px;transition:translate .4s,color .4s}
.service summary:hover .service-name{translate:4px 0;color:var(--gold)}
.service-symbol{font-size:24px;width:28px;text-align:center}
.service-content{padding:0 14px 28px 45px;position:relative}
.service-content>p{font-size:16px;color:#b9bbb1;line-height:1.7}
.service[open] .service-content{animation:service-arrive .6s var(--ease) both}
.tags{gap:7px;margin-top:17px}
.tags span,.services-list .tags span{font-size:12px;background:#ffffff04;border-color:#4e4e43;color:#c3c4b6;border-radius:20px;padding:5px 10px}
.service-gallery{display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:136px 136px;gap:10px;margin-top:32px;max-width:470px}
.service-shot{position:relative;isolation:isolate;overflow:hidden;border:1px solid #49443855;border-radius:6px;padding:0;background:#1d1d19;text-align:left}
.service-shot:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 20%,#090a09e8);pointer-events:none}
.service-shot img{width:100%;height:100%;object-fit:cover;filter:saturate(.78) brightness(.88);transition:transform 1s var(--ease),filter 1s}
.service-shot:hover img,.service-shot:focus-visible img{transform:scale(1.07);filter:saturate(1) brightness(1)}
.shot-aerial{grid-row:1/3}
.shot-aerial img{object-position:56% 50%}
.shot-ground img{object-position:50% 55%}
.shot-road img{object-position:50% 50%}
.service-shot>span{position:absolute;left:16px;right:14px;bottom:14px;z-index:2;display:flex;flex-direction:column;gap:3px}
.service-shot strong{font-size:16px;letter-spacing:-.02em;font-weight:500}
.service-shot small{font-size:12px;color:#c6c4b5}
.service-shot b{position:absolute;right:11px;top:8px;z-index:2;color:#e0cfaa;font-size:22px;font-weight:400;transition:rotate .4s}
.service-shot:hover b{rotate:90deg}
/* A small selection: moving covers, deliberate spacing, one consistent action. */
.section-heading{align-items:flex-end}
.projects-aside>p{color:#b2b3a9;font-size:16px;line-height:1.55;margin-bottom:22px}
.preview-toggle{background:none;border-bottom:1px solid #6c6248;color:#d8c9a5;font-size:14px;min-height:44px;display:flex;align-items:center;gap:9px;padding:5px 0}
.preview-toggle-icon{font-size:16px;min-width:15px;text-align:center}
.project-grid{gap:46px}
.project-offset{margin-top:80px}
.project-image{height:550px;border:1px solid #ffffff13;border-radius:9px;isolation:isolate}
.project-image:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#03060588,transparent 27%,#060909c4);pointer-events:none;z-index:1}
.project-preview{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%;filter:saturate(.8) brightness(.88);transform:scale(1.07) translateY(var(--frame-shift,0px));transition:filter .5s}
.project-image:hover .project-preview{filter:saturate(1) brightness(1)}
.project-top-label{font-size:12px;letter-spacing:.09em;top:25px;left:25px}
.project-auto .project-top-label{padding:0;background:none}
.project-open{left:24px;right:auto;bottom:24px;padding:12px 17px;font-size:14px;min-height:48px;background:#171816b5;border-color:#c4bba16b}
.project-image-bottom{left:25px;bottom:101px;font-size:clamp(2rem,3.5vw,3.5rem);font-weight:500;line-height:1.04;transition:translate .65s var(--ease)}
.project-image:hover .project-image-bottom{translate:0 -7px}
.project-meta{padding-top:22px}
.project-meta h3{font-size:22px}
.project-meta p{font-size:14px;line-height:1.65;color:#afb0a5}
.project-meta>span{font-size:12px;color:#bca574;border:1px solid #555040;border-radius:50%;height:33px;width:33px;display:grid;place-items:center;flex-shrink:0;padding:0}
/* The viewfinder settles as this section enters the viewport. */
.perspective-image{isolation:isolate;border:1px solid #6f604144;border-radius:9px}
.perspective-loop{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%;filter:brightness(.84) saturate(.75);transform:scale(1.08) translateY(var(--frame-shift,0px))}
.focus-frame{position:absolute;inset:28px 28px 82px;z-index:1;pointer-events:none}
.focus-frame i{width:27px;height:27px;border-color:#e2cc91b3;opacity:0}
.focus-frame>span{position:absolute;top:13px;left:14px;font-size:12px;letter-spacing:.12em;color:#e2d4ad;opacity:0}
.perspective.is-visible .focus-frame i{animation:frame-lock 1.4s .35s var(--ease) both}
.perspective.is-visible .focus-frame>span{animation:logo-arrive 1s .75s var(--ease) both}
.perspective-toggle{position:absolute;right:20px;bottom:20px;z-index:3;background:#151913bf;backdrop-filter:blur(10px)}
.perspective-image .image-note{padding:65px 85px 27px 28px;font-size:12px;line-height:1.5;letter-spacing:.06em;pointer-events:none}
.perspective-words>span{display:inline-block}
.perspective.is-visible .perspective-words>span{animation:service-arrive .9s .25s var(--ease) both}
.perspective.is-visible .perspective-words>span:last-child{animation-delay:.4s}
.process{border-top:0;position:relative}
.process:before{content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,var(--gold),#454237);transform:scaleX(0);transform-origin:left;transition:transform 1.5s .25s var(--ease)}
.is-visible .process:before{transform:scaleX(1)}
.process>div{transition:translate .4s}
.process>div:hover{translate:0 -5px}
.process span{font-size:12px}
.process p{font-size:14px;color:#b0b1a5}
.contact-mark img{transition:transform 1.2s var(--ease)}
.contact-inner:hover .contact-mark img{transform:scale(1.05) rotate(-3deg)}
.contact-mark:after{content:'';position:absolute;inset:-12px;border:1px dashed #14151125;border-radius:50%;transition:rotate 1.5s var(--ease)}
.contact-inner:hover .contact-mark:after{rotate:18deg}
.js .reveal{opacity:0;transform:translateY(32px);transition:opacity 1s var(--ease),transform 1.15s var(--ease)}
.js .reveal.is-visible{opacity:1;transform:none}
.project-offset.reveal{transition-delay:.14s}
.section-intro .eyebrow,.section-heading .eyebrow,.about-top .eyebrow{display:flex;align-items:center;gap:15px}
.section-intro .eyebrow:after,.section-heading .eyebrow:after,.about-top .eyebrow:after{content:'';height:1px;width:45px;background:#aa9156;transform-origin:left;transform:scaleX(0);transition:transform 1s .4s var(--ease)}
.is-visible .eyebrow:after{transform:scaleX(1)}
/* Project details. */
dialog{border-color:#6a5f455e;border-radius:12px;background:#181917;padding:26px}
.project-media-nav{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid #444338;margin-bottom:18px;scrollbar-width:thin;padding-bottom:10px}
.project-media-nav button{background:transparent;color:#b9baaf;padding:12px 16px;border:1px solid transparent;border-radius:5px;white-space:nowrap;font-size:14px;min-height:44px}
.project-media-nav button[aria-selected="true"]{background:#d0b47712;border-color:#d0b47740;color:#ead7a6}
.project-media-nav button:hover{color:#ebd8ac}
.dialog-content .drive-film{width:100%;height:min(52vw,480px);min-height:240px;border:0;background:#090a08}
.dialog-content video,.dialog-content img{max-height:58dvh}
.dialog-description{font-size:16px;color:#b8bbac}
.dialog-source{margin-top:16px}
.dialog-source[hidden]{display:none}
@keyframes studio-start{0%{transform:scaleX(0)}40%{transform:scaleX(.38)}68%{transform:scaleX(.76)}100%{transform:scaleX(1)}}
@keyframes logo-arrive{from{opacity:0;transform:translateY(10px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes frame-lock{from{opacity:0;translate:0 12px;scale:1.12}to{opacity:1;translate:0 0;scale:1}}
@keyframes line-enter{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes service-arrive{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}
@media(min-width:1500px){.hero-visual{height:570px}.project-slides{height:350px}}
@media(max-width:1200px){.reel-status{display:none}.hero-visual{height:510px}.project-slides{height:295px}.service-name{font-size:19px}.services{gap:5%}.project-image{height:500px}.service-gallery{grid-template-rows:125px 125px}.service-shot>span{left:12px}.service-shot strong{font-size:15px}}
@media(max-width:800px){.hero{padding-top:42px;gap:37px}.hero-visual{height:445px;max-width:570px;margin:0 auto}.camera-window{top:34px;left:0}.project-slides{height:295px}.visual-label{margin-left:0;font-size:12px}.brand-window{display:none}.hero-description{max-width:410px}.hero-actions{margin-top:25px}.slide-title{font-size:32px}.services{grid-template-columns:1fr;gap:36px}.service-gallery{max-width:none;grid-template-columns:1.1fr 1fr 1fr;grid-template-rows:220px;gap:12px}.shot-aerial{grid-row:auto}.service-name{font-size:21px}.service summary{min-height:80px}.project-grid{gap:23px}.project-image{height:420px}.project-offset{margin-top:65px}.projects-aside{margin-top:23px;display:flex;align-items:center;justify-content:space-between;gap:18px}.projects-aside>p{margin:0;font-size:16px}.project-top-label{left:17px;top:19px;letter-spacing:.04em}.project-image-bottom{left:18px;font-size:31px;bottom:100px}.project-open{left:17px;bottom:20px;padding-inline:13px}.project-meta h3{font-size:20px}.perspective{gap:6%}.focus-frame{inset:22px 20px 85px}.focus-frame>span{font-size:12px;letter-spacing:.025em;left:10px}.contact .button{min-height:56px}}
@media(max-width:560px){.hero{padding-top:34px;gap:32px}.hero .eyebrow{font-size:12px;letter-spacing:.02em;max-width:310px;line-height:1.6}.hero h1{font-size:12vw;letter-spacing:-.065em;line-height:1.08}.hero-description{max-width:330px;font-size:16px;margin-top:27px}.hero-actions{gap:20px}.hero-actions .button{width:100%;font-size:14px;padding-inline:17px}.hero-actions .text-link{font-size:14px}.hero-visual{height:383px}.camera-window{top:32px;border-radius:9px}.project-slides{height:242px}.window-bar{height:42px;padding-inline:13px;font-size:12px;gap:10px}.window-glyph{padding-right:10px}.reel-controls{min-height:64px;padding:7px 10px;gap:8px}.reel-dot{min-width:67px;padding-inline:10px;font-size:14px}.slide-kicker{top:20px;left:20px;font-size:12px;letter-spacing:.06em}.slide-title{font-size:29px;left:20px;bottom:61px}.slide-view{left:20px;right:20px;bottom:19px}.visual-label{font-size:12px;letter-spacing:.04em}.service-gallery{grid-template-columns:1fr 1fr;grid-template-rows:128px 128px;gap:10px;margin-top:27px}.shot-aerial{grid-row:1/3}.service-shot strong{font-size:16px}.service-shot>span{bottom:13px}.services{gap:28px}.service summary{gap:12px;min-height:80px}.service{padding-inline:15px}.service-name{font-size:20px}.service-content{padding:0 5px 26px 0}.service-number{width:28px;height:28px}.tags{gap:6px}.section-heading h2{font-size:2.65rem}.projects-aside{align-items:center;margin-top:25px}.projects-aside>p{font-size:16px}.preview-toggle{font-size:14px}.project-grid{grid-template-columns:1fr;gap:39px;margin-top:29px}.project-offset{margin-top:0}.project-image{height:auto;aspect-ratio:4/5}.project-image-bottom{font-size:clamp(2.2rem,9vw,3rem);left:22px;bottom:103px}.project-top-label{left:23px;top:23px}.project-open{left:22px;bottom:23px;padding:12px 16px}.project-meta{padding-top:17px}.project-meta h3{font-size:21px}.project-meta p{font-size:14px;max-width:270px}.perspective{grid-template-columns:1fr;gap:35px;padding-top:70px}.perspective-image{height:355px}.perspective-copy h2{font-size:clamp(2.6rem,10vw,3.8rem)}.perspective-copy>p:not(.eyebrow){font-size:16px}.perspective .eyebrow{margin-bottom:18px}.focus-frame{inset:25px 25px 82px}.focus-frame>span{letter-spacing:.1em}.perspective-image .image-note{padding-left:25px}.intro-logo{width:155px}.intro-frame{padding:27px}.intro-signature{font-size:12px;letter-spacing:.04em}.project-media-nav{gap:3px}.project-media-nav button{font-size:14px;padding-inline:11px}.dialog-top .eyebrow{max-width:240px;font-size:12px}.dialog-content .drive-film{min-height:200px;height:48vw}dialog{padding:20px}.dialog-top h2{font-size:24px}.contact .button{width:100%;max-width:330px}.contact-number{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.site-intro{display:none}.hero-copy,.intro-playing .hero-copy,.hero-visual,.intro-playing .hero-visual{opacity:1;transform:none;translate:none}.hero h1 .gold:after,.intro-playing .hero h1 .gold:after,.process:before{transform:scaleX(1)}.js .reveal{opacity:1;transform:none}.slide-title{transform:none;opacity:1}.focus-frame i,.focus-frame>span{opacity:1}.project-preview,.perspective-loop,.hero-slide video{transform:none}.service summary:hover .service-name,.process>div:hover,.project-image:hover .project-image-bottom{translate:none}.service-shot:hover img,.contact-inner:hover .contact-mark img,.motion-toggle:hover,.hero-slide:hover .slide-view>span{transform:none}.tilt-card{will-change:auto}}