:root{--bg:#101111;--surface:#181a19;--surface2:#212322;--line:#343634;--text:#f1eee8;--muted:#999b96;--accent:#c1ab91;--paper:#e7e3d9;--dark:#131514;--ease:cubic-bezier(.76,0,.24,1);--header:100px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:var(--bg);color:var(--text);font-family:Inter,'Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased}body.no-scroll{overflow:hidden}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:4px}::selection{background:#a5896b;color:#101111}.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.17'/%3E%3C/svg%3E");mix-blend-mode:screen}.header{height:var(--header);position:relative;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,5vw,90px);border-bottom:1px solid rgba(255,255,255,.095);background:var(--bg)}.brand{display:flex;align-items:center;gap:11px;min-width:202px}.brand-icon{height:34px;width:34px;color:var(--paper)}.brand-words{font-size:14px;line-height:.98;font-weight:750;letter-spacing:.015em}.brand-words span{display:block;font-weight:400;letter-spacing:.15em;font-size:11px;margin-top:4px}.desktop-nav{display:flex;align-items:center;gap:clamp(18px,2.8vw,46px);height:100%}.nav-link{font-size:13px;color:#a4a59f;display:flex;align-items:flex-start;gap:6px;transition:color .25s;position:relative;height:100%;align-items:center}.nav-link span{color:#72756e;font-size:9px;transform:translateY(-7px)}.nav-link::after{content:"";position:absolute;height:1px;bottom:0;left:0;width:0;background:var(--paper);transition:width .35s var(--ease)}.nav-link:hover,.nav-link.active{color:var(--text)}.nav-link.active::after,.nav-link:hover::after{width:100%}.header-cta{font-size:11px;letter-spacing:.12em;display:flex;align-items:center;gap:18px;border:1px solid #555752;padding:14px 17px;transition:background .2s,color .2s;min-width:142px;justify-content:space-between}.header-cta:hover{background:var(--paper);color:#101111}.header-cta .arrow{font-size:17px}.menu-toggle{display:none;border:0;background:none;color:var(--text);width:44px;height:44px;align-items:center;flex-direction:column;justify-content:center;gap:8px}.menu-toggle span{height:1px;width:24px;background:var(--text);transition:transform .25s}.mobile-panel{display:none}
.page{animation:page-in .6s both;min-height:60vh}@keyframes page-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.container{max-width:1600px;margin:auto;padding-left:clamp(22px,5vw,90px);padding-right:clamp(22px,5vw,90px)}.eyebrow{font-weight:500;font-size:10px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);display:inline-block}.section-index{color:#71746d;font-size:11px;letter-spacing:.12em}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}.section-head h2{font-size:clamp(40px,6vw,90px);font-weight:500;line-height:.98;letter-spacing:-.065em;margin:22px 0 0}.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:38px;border-bottom:1px solid #777974;padding:0 0 11px;font-size:11px;letter-spacing:.11em;font-weight:600;transition:gap .25s,color .25s}.text-link:hover{gap:52px;color:var(--accent)}.text-link span{font-size:19px;line-height:.7}.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .85s var(--ease)}.reveal.in-view{opacity:1;transform:translateY(0)}
/* Home hero */
.hero{min-height:min(820px,calc(100svh - var(--header)));display:grid;grid-template-columns:minmax(0,1.24fr) minmax(340px,.76fr);border-bottom:1px solid var(--line);overflow:hidden}.hero-left{padding:clamp(65px,8vw,140px) clamp(20px,4.2vw,84px) clamp(46px,5vw,80px) clamp(22px,5vw,90px);display:flex;flex-direction:column;justify-content:space-between;position:relative}.hero-topline{display:flex;justify-content:space-between;gap:12px;color:#acada6;font-size:10px;letter-spacing:.19em}.hero-headline{margin:38px 0 29px;font-size:clamp(65px,7.8vw,144px);line-height:.87;letter-spacing:-.079em;font-weight:550;white-space:nowrap}.hero-headline .thin{color:var(--accent);font-weight:450}.hero-summary{display:flex;justify-content:space-between;gap:30px;align-items:end}.hero-summary p{font-size:clamp(15px,1.5vw,19px);line-height:1.6;color:#bcbcb5;max-width:355px;margin:0}.round-cta{width:78px;height:78px;border:1px solid #71746c;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:35px;flex:none;transition:background .3s,transform .3s,color .3s}.round-cta:hover{background:var(--paper);color:var(--dark);transform:rotate(45deg)}.hero-art{border-left:1px solid var(--line);position:relative;overflow:hidden;min-height:580px;background:radial-gradient(circle at 67% 40%,#353530 0%,#222420 32%,#141614 70%)}.hero-art:before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,transparent 40%,rgba(219,211,190,.06)),repeating-linear-gradient(0deg,transparent 0 59px,rgba(255,255,255,.025) 60px)}.hero-ring{position:absolute;top:48%;left:50%;width:92%;aspect-ratio:1;border:1px solid rgba(236,232,215,.22);border-radius:50%;transform:translate(-50%,-50%) rotate(-27deg);box-shadow:0 0 0 30px rgba(245,236,210,.015),0 0 0 92px rgba(245,236,210,.012)}.hero-ring:after{content:"";position:absolute;inset:18%;border:1px solid rgba(236,232,215,.15);border-radius:50%}.hero-arc{position:absolute;top:48%;left:50%;width:83%;aspect-ratio:1;border:42px solid rgba(230,215,193,.075);border-left-color:rgba(195,171,145,.43);border-bottom-color:rgba(195,171,145,.18);border-radius:50%;transform:translate(-50%,-50%) rotate(-20deg);animation:hero-rotate 28s linear infinite}.hero-arc.arc-two{width:59%;border-width:21px;border-top-color:rgba(195,171,145,.25);border-left-color:rgba(230,215,193,.05);animation-direction:reverse;animation-duration:21s}.hero-center{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);font-size:clamp(70px,9vw,160px);font-weight:500;letter-spacing:-.105em;color:#eee7dd;line-height:1}.hero-center span{color:var(--accent)}.hero-art-info{position:absolute;left:36px;right:36px;bottom:34px;display:flex;justify-content:space-between;color:#c1b9aa;font-size:10px;letter-spacing:.15em}.hero-art-number{position:absolute;right:36px;top:35px;color:#a3a298;letter-spacing:.15em;font-size:10px}@keyframes hero-rotate{from{transform:translate(-50%,-50%) rotate(-20deg)}to{transform:translate(-50%,-50%) rotate(340deg)}}
.ticker{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;overflow:hidden;color:#aeb0a8}.ticker-track{display:flex;gap:65px;white-space:nowrap;animation:marquee 32s linear infinite;font-size:11px;letter-spacing:.2em}.ticker-track b{color:var(--accent);font-size:14px;font-weight:300}@keyframes marquee{to{transform:translateX(-50%)}}.intro{padding-top:145px;padding-bottom:130px;display:grid;grid-template-columns:1fr 1.3fr;gap:70px}.intro-label{display:flex;gap:22px;align-items:start}.intro h2{font-size:clamp(40px,5.8vw,79px);line-height:1.08;font-weight:480;letter-spacing:-.065em;margin:0}.intro h2 em{font-style:normal;color:#82857d}.intro-bottom{grid-column:2;display:flex;justify-content:space-between;gap:24px;align-items:end;margin-top:-25px}.intro-bottom p{max-width:370px;color:#a8aaa2;line-height:1.7;font-size:15px;margin:0}
.services{padding-top:105px;padding-bottom:130px;background:#191b19}.services .section-head{margin-bottom:70px}.service-row{display:grid;grid-template-columns:90px 1.05fr 1.5fr 36px;gap:25px;align-items:center;border-top:1px solid #444740;min-height:160px;padding:25px 0}.service-row:last-child{border-bottom:1px solid #444740}.service-row .number{color:var(--accent);font-size:12px}.service-row h3{font-size:clamp(25px,2.7vw,43px);font-weight:470;letter-spacing:-.045em;margin:0;line-height:1.15}.service-row p{color:#a4a69e;max-width:390px;margin:0;line-height:1.65;font-size:14px}.service-row .service-arrow{font-size:27px;color:#8d9088}.work-preview{padding-top:145px;padding-bottom:150px}.work-preview .section-head{margin-bottom:56px}.preview-grid{display:grid;grid-template-columns:1.27fr .73fr;gap:21px}.work-card{display:block;text-align:left;width:100%;background:none;border:none;color:inherit;padding:0;position:relative}.work-media{position:relative;overflow:hidden;isolation:isolate;background:#2b2b29;min-height:260px}.preview-grid .work-card:first-child .work-media{aspect-ratio:1.24}.preview-grid .work-card:not(:first-child) .work-media{aspect-ratio:.77}.work-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),transparent 45%,rgba(0,0,0,.33));z-index:4;pointer-events:none}.work-media .visual-grid{position:absolute;inset:0;z-index:1;background:repeating-linear-gradient(90deg,transparent 0 19.9%,rgba(255,255,255,.06) 20%,transparent 20.1%),repeating-linear-gradient(0deg,transparent 0 24.9%,rgba(255,255,255,.05) 25%,transparent 25.1%);opacity:.5}.work-media .visual-orb{position:absolute;width:75%;aspect-ratio:1;border-radius:50%;top:8%;left:27%;filter:blur(.5px);z-index:2;transition:transform 1s var(--ease)}.work-media .visual-orb:before{content:"";position:absolute;inset:13%;border:1px solid rgba(255,255,255,.22);border-radius:50%}.work-media .visual-stripe{position:absolute;width:120%;height:22%;left:-10%;top:47%;z-index:2;transform:rotate(-22deg);background:rgba(255,255,255,.12);backdrop-filter:blur(3px);transition:transform .9s var(--ease)}.work-media .poster-kicker{position:absolute;top:25px;left:27px;right:25px;color:rgba(255,255,255,.88);font-size:10px;letter-spacing:.17em;z-index:5;display:flex;justify-content:space-between}.work-media .poster-title{position:absolute;left:clamp(22px,3vw,52px);bottom:clamp(35px,5vw,75px);z-index:5;color:#fff;font-size:clamp(39px,5vw,84px);font-weight:550;line-height:.96;letter-spacing:-.065em;max-width:85%;white-space:pre-line;text-wrap:balance}.work-card.reel .poster-title{font-size:clamp(41px,4vw,61px)}.work-card .play-indicator{position:absolute;right:22px;bottom:22px;z-index:6;width:57px;height:57px;display:flex;align-items:center;justify-content:center;border:1px solid #f1eee8;border-radius:50%;font-size:18px;backdrop-filter:blur(10px);transition:background .3s,color .3s}.work-card:hover .play-indicator{background:var(--text);color:var(--dark)}.work-media .mock-label{position:absolute;left:25px;bottom:15px;z-index:7;font-size:8px;color:rgba(255,255,255,.65);letter-spacing:.14em}.work-card:hover .visual-orb{transform:scale(1.12) translate(-2%,2%)}.work-card:hover .visual-stripe{transform:rotate(-16deg) translateY(-15px)}.theme-sand{background:linear-gradient(130deg,#4d382d 5%,#a18363 48%,#282320)}.theme-sand .visual-orb{background:radial-gradient(circle at 32% 22%,#edd4ac 0%,#a87a53 43%,#3a2924 75%);box-shadow:-38px 40px 90px rgba(20,13,10,.55)}.theme-violet{background:linear-gradient(135deg,#121722 10%,#4e5262 58%,#171c21)}.theme-violet .visual-orb{background:radial-gradient(circle at 22% 20%,#afb1b3 0%,#646b7c 38%,#101723 75%)}.theme-sage{background:linear-gradient(125deg,#1a2c2b,#65776f 55%,#212722)}.theme-sage .visual-orb{background:radial-gradient(circle at 30% 22%,#c1c9b8,#526e61 47%,#182b2b 77%)}.theme-copper{background:linear-gradient(140deg,#2a1711,#8c5745 60%,#2a211d)}.theme-copper .visual-orb{background:radial-gradient(circle at 29% 27%,#e4bd9e,#a45d44 43%,#321b15 76%)}.theme-stone{background:linear-gradient(120deg,#55595a 0%,#9d9f9b 40%,#242829 100%)}.theme-stone .visual-orb{background:radial-gradient(circle at 25% 25%,#ecede5,#969c9a 46%,#363d3e 78%)}.theme-blue{background:linear-gradient(130deg,#14242e,#457180 58%,#19212b)}.theme-blue .visual-orb{background:radial-gradient(circle at 30% 20%,#aacbd1,#3e7987 50%,#18232c 76%)}.work-card-info{padding-top:21px;display:flex;align-items:start;justify-content:space-between;gap:22px}.work-card-info h3{font-size:18px;font-weight:500;margin:0 0 7px;letter-spacing:-.025em}.work-card-info p{color:#959991;font-size:11px;letter-spacing:.07em;margin:0}.work-card-info .card-arrow{font-size:22px}.work-card:hover .card-arrow{transform:translate(4px,-4px);transition:transform .25s}.preview-grid .work-card:nth-child(2){margin-top:76px}.large-cta{background:var(--paper);color:var(--dark);padding:108px 0 100px}.large-cta .eyebrow{color:#6c665e}.large-cta h2{font-size:clamp(55px,9.5vw,150px);line-height:.91;font-weight:500;letter-spacing:-.085em;margin:35px 0 45px}.large-cta h2 span{color:#aaa59b}.large-cta .text-link{border-color:#777}
/* Pages */
.page-heading{padding-top:100px;padding-bottom:87px;border-bottom:1px solid var(--line)}.page-heading .heading-row{display:flex;justify-content:space-between;align-items:start;gap:25px}.page-heading h1{margin:38px 0 22px;font-size:clamp(75px,12.5vw,198px);line-height:.86;letter-spacing:-.08em;font-weight:540}.page-heading .heading-bottom{display:flex;justify-content:space-between;align-items:end;gap:30px}.page-heading p{margin:0;color:#abad9f;font-size:clamp(15px,1.55vw,19px);line-height:1.6;max-width:510px}.page-heading .heading-bottom .section-index{font-size:13px}.portfolio-section{padding-top:60px;padding-bottom:165px}.filter-bar{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:50px}.filters{display:flex;gap:11px;flex-wrap:wrap}.filter{padding:12px 21px;background:none;border:1px solid #474a43;color:#adb0a7;border-radius:100px;font-size:11px;letter-spacing:.08em;transition:background .2s,color .2s}.filter:hover,.filter.active{background:var(--paper);color:var(--dark);border-color:var(--paper)}.filter-counter{font-size:10px;color:#85887f;letter-spacing:.16em}.portfolio-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:62px 24px}.portfolio-grid .work-card{grid-column:span 6}.portfolio-grid .work-card.reel{grid-column:span 4}.portfolio-grid .work-media{aspect-ratio:1.28}.portfolio-grid .work-card.reel .work-media{aspect-ratio:.73}.portfolio-grid .work-card:nth-child(5){grid-column:span 8}.portfolio-grid .work-card:nth-child(5) .work-media{aspect-ratio:1.35}.portfolio-grid .work-card:nth-child(6){grid-column:span 4}.portfolio-grid .work-card:nth-child(6) .work-media{aspect-ratio:.73}.portfolio-grid .work-card[hidden]{display:none}.portfolio-grid .work-card .poster-title{font-size:clamp(37px,4.3vw,70px)}.portfolio-grid .work-card.reel .poster-title{font-size:clamp(37px,3.5vw,56px)}.portfolio-caption{border-top:1px solid var(--line);padding-top:24px;margin-top:70px;font-size:12px;line-height:1.6;color:#888b84}
.about-statement{padding-top:160px;padding-bottom:150px;display:grid;grid-template-columns:1fr 2fr;gap:30px}.about-statement h2{font-size:clamp(45px,6.7vw,103px);line-height:1.05;letter-spacing:-.07em;font-weight:490;margin:0}.about-statement h2 span{color:#7e837b}.about-summary{grid-column:2;margin:8px 0 0;max-width:670px;color:#a9aca3;font-size:18px;line-height:1.75}.values{background:var(--paper);color:var(--dark);padding-top:110px;padding-bottom:140px}.values .eyebrow{color:#80766b}.values .section-head{margin-bottom:72px}.values .section-head h2{max-width:750px}.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.value-card{border-top:1px solid #b2b0a7;padding-top:23px}.value-card span{font-size:11px;color:#77736d}.value-card h3{font-size:clamp(28px,3vw,46px);font-weight:510;letter-spacing:-.05em;margin:42px 0 14px}.value-card p{font-size:14px;line-height:1.75;max-width:300px;color:#686963;margin:0}.process{padding-top:135px;padding-bottom:150px}.process .section-head{margin-bottom:70px}.process-item{display:grid;grid-template-columns:90px 1fr 1.1fr;gap:20px;border-top:1px solid #444740;padding:40px 0;align-items:start}.process-item:last-child{border-bottom:1px solid #444740}.process-item .number{color:var(--accent);font-size:12px}.process-item h3{font-size:clamp(30px,3.3vw,51px);font-weight:480;letter-spacing:-.05em;margin:0}.process-item p{font-size:15px;line-height:1.7;color:#a8aba3;max-width:390px;margin:3px 0 0}
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(45px,7vw,130px);padding-top:120px;padding-bottom:180px}.contact-layout h2{font-size:clamp(44px,5.6vw,84px);line-height:1.01;letter-spacing:-.07em;font-weight:500;margin:28px 0 42px}.contact-layout h2 span{color:#8b8d86}.contact-info{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.contact-info .contact-email{font-size:clamp(21px,2.5vw,34px);letter-spacing:-.04em;border-bottom:1px solid #6f736b;padding-bottom:10px}.contact-info .contact-meta{color:#888c82;margin-top:50px;font-size:11px;letter-spacing:.15em;line-height:2}.contact-form{padding-top:2px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:25px}.field{display:flex;flex-direction:column;gap:14px;margin-bottom:33px}.field label{font-size:10px;letter-spacing:.14em;color:#b0b2a9;text-transform:uppercase}.field input,.field select,.field textarea{width:100%;background:none;border:0;border-bottom:1px solid #666a61;color:var(--text);padding:10px 0 16px;border-radius:0;outline:none;font-size:14px;transition:border-color .2s}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--paper)}.field input::placeholder,.field textarea::placeholder{color:#74786f}.field select{appearance:none;background:transparent;color:var(--text)}.field select option{background:#1b1d1b}.field textarea{resize:vertical;min-height:100px}.send-button{border:0;background:var(--paper);color:var(--dark);padding:23px 27px;display:flex;justify-content:space-between;gap:35px;min-width:240px;font-weight:650;font-size:11px;letter-spacing:.14em;transition:background .25s}.send-button:hover{background:var(--accent)}.send-button span{font-size:18px}.form-note{font-size:12px;color:#8d9087;line-height:1.6;margin-top:24px;max-width:440px}
.footer{padding:64px clamp(22px,5vw,90px) 0;border-top:1px solid var(--line);background:#101111}.footer-top{display:flex;align-items:end;justify-content:space-between;padding-bottom:72px;gap:35px}.footer-top>span{font-size:clamp(33px,4.2vw,69px);font-weight:600;letter-spacing:-.07em;line-height:.95}.muted-dot{color:var(--accent)}.footer-top a{font-size:11px;letter-spacing:.1em;border-bottom:1px solid #77796f;padding-bottom:12px;white-space:nowrap}.footer-top a span{margin-left:20px;font-size:18px}.footer-bottom{border-top:1px solid var(--line);padding:26px 0;display:flex;justify-content:space-between;gap:20px;color:#777a73;font-size:10px;letter-spacing:.16em}
/* Page-to-page transition */
.transition-screen{position:fixed;inset:0;background:var(--paper);z-index:100;transform:translateY(101%);transition:transform .62s var(--ease);pointer-events:none;color:var(--dark)}.transition-screen.cover{transform:translateY(0)}.transition-screen.uncover{transform:translateY(-101%)}.transition-screen.reset{transition:none;transform:translateY(101%)}.transition-inner{height:100%;padding:clamp(28px,6vw,90px);display:flex;flex-direction:column;justify-content:space-between}.transition-mark{font-size:clamp(130px,25vw,390px);line-height:.8;letter-spacing:-.14em;font-weight:570}.transition-dot{color:#ac9880}.transition-caption{display:flex;justify-content:space-between;align-items:end;gap:20px;font-size:clamp(22px,4vw,64px);font-weight:520;letter-spacing:-.06em}.transition-caption span:last-child{font-size:12px;letter-spacing:.12em;font-weight:500}
/* Modal */
.modal{display:none;position:fixed;inset:0;z-index:90;align-items:center;justify-content:center;padding:35px}.modal.open{display:flex}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.86);backdrop-filter:blur(8px)}.modal-content{position:relative;background:#222422;width:min(1050px,100%);max-height:90vh;overflow:auto;display:grid;grid-template-columns:1fr 1fr;animation:page-in .4s both}.modal-art{min-height:560px}.modal-art .work-media{height:100%;min-height:560px}.modal-art .poster-title{font-size:clamp(37px,4vw,69px)}.modal-copy{padding:clamp(30px,5vw,85px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.modal-copy h2{font-size:clamp(35px,4vw,60px);font-weight:500;line-height:1.07;letter-spacing:-.06em;margin:24px 0}.modal-copy p{font-size:15px;line-height:1.8;color:#b8b9b1}.modal-copy .demo-disclaimer{font-size:10px;letter-spacing:.07em;color:#85887d;margin-bottom:55px}.modal-close{position:absolute;top:15px;right:18px;color:var(--text);border:0;background:#353735;width:45px;height:45px;font-size:17px;z-index:10}
@media(max-width:1050px){:root{--header:82px}.desktop-nav{gap:21px}.header-cta{display:none}.hero{grid-template-columns:1.25fr .75fr;min-height:700px}.hero-art{min-height:600px}.hero-headline{font-size:clamp(58px,8.5vw,100px)}.intro{grid-template-columns:.6fr 1.4fr}.services .service-row{grid-template-columns:50px 1fr 1.25fr 20px}.portfolio-grid .work-card.reel{grid-column:span 6}.portfolio-grid .work-card:nth-child(5),.portfolio-grid .work-card:nth-child(6){grid-column:span 6}.portfolio-grid .work-card:nth-child(6) .work-media{aspect-ratio:.73}.portfolio-grid .work-card:nth-child(5) .work-media{aspect-ratio:1.28}}
@media(max-width:740px){:root{--header:74px}.header{padding:0 21px}.brand{min-width:0}.brand-icon{width:31px;height:31px}.brand-words{font-size:12px}.brand-words span{font-size:9px}.desktop-nav{display:none}.menu-toggle{display:flex}.mobile-panel{display:block;position:fixed;inset:var(--header) 0 0;background:var(--paper);color:var(--dark);z-index:49;padding:35px 24px;transform:translateY(-120%);transition:transform .55s var(--ease);visibility:hidden}.mobile-panel.open{transform:translateY(0);visibility:visible}.mobile-panel nav{display:flex;flex-direction:column}.mobile-panel a{font-size:clamp(41px,11vw,72px);font-weight:530;letter-spacing:-.07em;padding:15px 0;border-bottom:1px solid #b8b4aa;display:flex;justify-content:space-between;align-items:start}.mobile-panel a span{font-size:13px;letter-spacing:0;color:#777}.mobile-panel p{font-size:10px;letter-spacing:.18em;margin-top:45px}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4.5px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}.hero{display:flex;flex-direction:column;min-height:auto}.hero-left{padding:70px 23px 55px;min-height:480px}.hero-topline{font-size:9px}.hero-headline{font-size:clamp(63px,12.6vw,103px);margin:60px 0 45px}.hero-summary p{max-width:270px;font-size:14px}.round-cta{height:60px;width:60px;font-size:28px}.hero-art{min-height:400px;border-top:1px solid var(--line);border-left:0}.hero-center{font-size:116px}.hero-arc{width:75%;border-width:32px}.hero-arc.arc-two{border-width:18px}.hero-art-info{left:22px;right:22px;bottom:22px}.ticker{height:56px}.intro{padding-top:95px;padding-bottom:105px;display:block}.intro h2{font-size:clamp(44px,10vw,75px);margin:45px 0 28px}.intro-bottom{display:block;margin:0}.intro-bottom p{margin-bottom:26px}.services{padding-top:90px;padding-bottom:100px}.services .section-head{margin-bottom:48px}.section-head h2{font-size:clamp(44px,11vw,70px)}.service-row{grid-template-columns:44px 1fr 20px!important;gap:12px;min-height:0;padding:31px 0;align-items:start}.service-row h3{font-size:30px}.service-row p{grid-column:2;grid-row:2;font-size:13px}.service-row .service-arrow{grid-column:3;grid-row:1;font-size:22px}.work-preview{padding-top:95px;padding-bottom:100px}.work-preview .section-head{align-items:start;flex-direction:column;gap:22px;margin-bottom:35px}.preview-grid{display:grid;grid-template-columns:1fr;gap:45px}.preview-grid .work-card:nth-child(2){margin-top:0}.preview-grid .work-card:first-child .work-media{aspect-ratio:1.1}.preview-grid .work-card:not(:first-child) .work-media{aspect-ratio:.92}.work-media .poster-title{font-size:clamp(48px,10vw,80px)}.large-cta{padding:84px 0}.large-cta h2{font-size:clamp(65px,12vw,110px)}.page-heading{padding-top:80px;padding-bottom:65px}.page-heading h1{font-size:clamp(67px,17vw,122px);margin:40px 0 30px}.page-heading .heading-bottom{align-items:start}.page-heading .heading-bottom .section-index{display:none}.page-heading p{font-size:15px}.portfolio-section{padding-top:35px;padding-bottom:100px}.filter-bar{align-items:start;flex-direction:column}.filters{gap:8px}.filter{padding:11px 17px}.portfolio-grid{grid-template-columns:1fr 1fr;gap:40px 13px}.portfolio-grid .work-card,.portfolio-grid .work-card.reel,.portfolio-grid .work-card:nth-child(5),.portfolio-grid .work-card:nth-child(6){grid-column:span 1}.portfolio-grid .work-card:first-child,.portfolio-grid .work-card:nth-child(4){grid-column:span 2}.portfolio-grid .work-card:first-child .work-media,.portfolio-grid .work-card:nth-child(4) .work-media{aspect-ratio:1.15}.portfolio-grid .work-card .work-media,.portfolio-grid .work-card.reel .work-media,.portfolio-grid .work-card:nth-child(5) .work-media,.portfolio-grid .work-card:nth-child(6) .work-media{aspect-ratio:.77}.portfolio-grid .work-card .poster-title,.portfolio-grid .work-card.reel .poster-title{font-size:clamp(29px,6vw,55px);left:17px;bottom:55px}.portfolio-grid .work-card:first-child .poster-title,.portfolio-grid .work-card:nth-child(4) .poster-title{font-size:clamp(45px,11vw,75px);left:24px}.portfolio-grid .work-media .poster-kicker{font-size:8px;left:15px;right:13px;top:16px}.portfolio-grid .work-media .mock-label{font-size:7px;left:15px}.portfolio-grid .play-indicator{width:42px;height:42px;right:12px;bottom:12px;font-size:14px}.work-card-info h3{font-size:14px}.work-card-info p{font-size:9px}.work-card-info .card-arrow{font-size:17px}.about-statement{padding-top:100px;padding-bottom:95px;display:block}.about-statement h2{font-size:clamp(47px,11vw,78px);margin:35px 0}.about-summary{font-size:16px}.values{padding-top:95px;padding-bottom:110px}.values .section-head{margin-bottom:40px}.value-grid{grid-template-columns:1fr;gap:40px}.value-card h3{margin:27px 0 13px}.value-card p{max-width:none}.process{padding-top:95px;padding-bottom:110px}.process .section-head{margin-bottom:45px}.process-item{grid-template-columns:42px 1fr;gap:8px 18px;padding:27px 0}.process-item h3{font-size:36px}.process-item p{grid-column:2;margin-top:3px;font-size:14px}.contact-layout{grid-template-columns:1fr;gap:65px;padding-top:90px;padding-bottom:110px}.contact-layout h2{font-size:clamp(55px,12vw,86px)}.contact-info .contact-meta{margin-top:25px}.footer{padding:50px 23px 0}.footer-top{display:block;padding-bottom:60px}.footer-top>span{display:block;font-size:clamp(37px,8.7vw,65px);margin-bottom:35px}.footer-bottom{flex-wrap:wrap;font-size:9px;gap:12px}.footer-bottom span:nth-child(2){display:none}.modal{padding:14px}.modal-content{display:block;max-height:92vh}.modal-art .work-media,.modal-art{min-height:300px;height:300px}.modal-copy{padding:32px}.modal-copy .demo-disclaimer{margin-bottom:25px}}
@media(max-width:420px){.hero-headline{font-size:clamp(58px,12.5vw,74px)}.hero-summary{gap:15px}.hero-summary p{font-size:13px}.portfolio-grid .poster-kicker span:nth-child(2){display:none}.form-row{display:block}.footer-top a{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}
/* Equal editorial pairs: large projects alternate with vertical reel covers. */
@media(min-width:1060px){
 .portfolio-grid .work-card{grid-column:span 8}
 .portfolio-grid .work-card.reel{grid-column:span 4}
 .portfolio-grid .work-card:nth-child(4),.portfolio-grid .work-card:nth-child(5){grid-column:span 8}
 .portfolio-grid.projects-only .work-card{grid-column:span 6}
 .portfolio-grid.reels-only .work-card{grid-column:span 4}
}
@media(min-width:741px) and (max-width:1059px){
 .portfolio-grid .work-card,.portfolio-grid .work-card.reel,.portfolio-grid .work-card:nth-child(5),.portfolio-grid .work-card:nth-child(6){grid-column:span 6}
}
@media(max-width:740px){
 .portfolio-grid.projects-only .work-card{grid-column:span 2}
 .portfolio-grid.reels-only .work-card{grid-column:span 1}
}
/* Keep the transition overlay fully out of the page when idle. */
.transition-screen{visibility:hidden}
.transition-screen.cover,.transition-screen.uncover{visibility:visible}
@media(max-width:740px){
 .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .portfolio-grid .work-card{min-width:0}
 .portfolio-grid .work-card.reel .poster-title{font-size:clamp(22px,5.7vw,34px)}
 .portfolio-page .page-heading h1{font-size:clamp(53px,14.2vw,105px)}
}
@media(max-width:740px){
 .portfolio-grid .work-media{min-height:0}
 .portfolio-grid .poster-title{overflow-wrap:normal}
}
@media(max-width:420px){
 .contact-info .contact-email{font-size:clamp(17px,5vw,21px);overflow-wrap:anywhere}
}
@media(max-width:420px){
 .contact-page .page-heading h1{font-size:clamp(50px,13.8vw,75px)}
 .contact-layout,.contact-form,.field{min-width:0}
}


/* --- Shutter Culture refinements v2 --- */
.transition-mark{font-family:"Avenir Next","Helvetica Neue",Arial,sans-serif;font-size:clamp(28px,4.2vw,56px);line-height:1.05;letter-spacing:.28em;font-weight:650;text-transform:uppercase;max-width:min(70vw,720px)}
.transition-dot{display:none}
.desktop-nav,.header-cta,.mobile-panel nav,.mobile-panel p{font-family:"Avenir Next","Helvetica Neue",Arial,sans-serif}
.nav-link,.header-cta{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.nav-link span{font-size:8px;letter-spacing:.16em;transform:translateY(-8px)}
.mobile-panel a{font-family:"Avenir Next","Helvetica Neue",Arial,sans-serif;font-size:clamp(34px,9.2vw,60px);font-weight:620;letter-spacing:-.035em}
.hero-plaque{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:22px 26px;min-width:min(78%,430px);font-size:initial;letter-spacing:normal;color:var(--paper);background:rgba(19,21,20,.34);border:1px solid rgba(241,238,232,.18);border-radius:28px;backdrop-filter:blur(12px);box-shadow:0 18px 60px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.03)}
.plaque-title{font-family:"Avenir Next","Helvetica Neue",Arial,sans-serif;font-size:clamp(16px,1.55vw,22px);letter-spacing:.34em;font-weight:650;text-transform:uppercase;text-align:center;line-height:1.25}
.plaque-sub{font-family:"Avenir Next","Helvetica Neue",Arial,sans-serif;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#c7baa8;text-align:center}
.work-media{border:1px solid rgba(255,255,255,.085);border-radius:30px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02),0 18px 44px rgba(0,0,0,.18)}
.media-shell{position:absolute;z-index:3;background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.28);box-shadow:0 28px 60px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.05);backdrop-filter:blur(7px)}
.media-shell-inner{position:absolute;inset:11px;border:1px solid rgba(255,255,255,.17);border-radius:inherit}
.landscape-shell{left:8.5%;right:8.5%;top:16%;bottom:18%;border-radius:24px}
.vertical-shell{width:42%;height:73%;left:50%;top:14%;transform:translateX(-50%);border-radius:28px}
.work-media.is-reel .visual-orb{top:11%;left:18%;width:88%}
.work-media.is-reel .visual-stripe{top:52%}
.work-media .poster-kicker{top:28px;left:29px;right:29px}
.work-media .poster-title{bottom:74px}
.work-card.reel .poster-title{max-width:68%;font-size:clamp(36px,3.5vw,54px)}
.portfolio-grid .work-media,.preview-grid .work-media{overflow:hidden}
.portfolio-grid .work-card .work-media{background:#1b1c1b}
.portfolio-grid .work-card .work-card-info{padding-top:14px}
.portfolio-grid .work-card-info h3{font-family:Inter,"Helvetica Neue",Arial,sans-serif;font-weight:560;letter-spacing:-.02em}
.portfolio-grid .work-card-info p{letter-spacing:.04em;text-transform:uppercase;font-size:10px;color:#a7a89f}
.portfolio-grid .play-indicator{right:20px;bottom:20px;width:54px;height:54px;background:rgba(19,21,20,.24)}
.portfolio-grid .work-card.reel .work-media{background:linear-gradient(160deg,#151717,#202321 45%,#161817)}
.portfolio-grid .work-card.reel .poster-title{left:24px;bottom:70px}
.portfolio-grid .work-card.reel .mock-label{left:24px;bottom:21px}
.portfolio-grid .work-card.reel .poster-kicker{left:24px;right:24px}
.portfolio-grid .work-card.reel .media-shell{top:12%;height:75%}
.preview-grid .work-card.reel .vertical-shell{width:46%}
@media(max-width:740px){
  .transition-mark{font-size:clamp(22px,6.4vw,36px);letter-spacing:.18em;max-width:88vw}
  .hero-plaque{min-width:0;width:76%;padding:18px 18px;border-radius:22px;gap:10px}
  .plaque-title{font-size:13px;letter-spacing:.24em}
  .plaque-sub{font-size:8px;letter-spacing:.18em}
  .work-media{border-radius:24px}
  .landscape-shell{left:7%;right:7%;top:14%;bottom:17%;border-radius:18px}
  .vertical-shell{width:48%;height:74%;top:12%;border-radius:22px}
  .portfolio-grid .work-card.reel .poster-title{left:17px;bottom:58px;max-width:64%}
  .portfolio-grid .play-indicator{right:14px;bottom:14px;width:44px;height:44px}
  .mobile-panel a{letter-spacing:-.04em}
}


/* --- Refined typography & warm navigation — v3 --- */
/* Manrope is loaded from Google Fonts on connected devices; system UI fonts provide offline fallback. */
:root{--ui-font:"Manrope","Segoe UI Variable Text","Segoe UI",Arial,sans-serif}
/* Keep the existing deep charcoal / champagne palette. */
.desktop-nav,.nav-link,.header-cta,.mobile-panel nav,.mobile-panel a,
.contact-form,.field label,.field input,.field select,.field textarea,
.send-button,.filter,.filter-counter,.form-note,.contact-meta,
.eyebrow,.section-index,.hero-topline,.hero-art-info,.footer-bottom,
.work-card-info p,.portfolio-caption{
  font-family:var(--ui-font);
}
/* Main navigation: the site's existing warm pale-gold accent. */
.header .nav-link{
  color:var(--accent);
  font-size:12px;
  font-weight:650;
  letter-spacing:.075em;
  text-transform:none;
}
.header .nav-link span{color:#a7947b;font-size:9px;font-weight:500}
.header .nav-link:hover,.header .nav-link.active{color:#f1dfbf}
.header .nav-link::after{background:var(--accent);height:2px}
/* The light mobile menu needs a stronger gold shade for readable contrast. */
.mobile-panel a{color:#826342;font-weight:600}
.mobile-panel a.active,.mobile-panel a:hover{color:#3f3021}
.mobile-panel a span{color:#917d65}
/* Screenshot target: name, email, select, message and helper text. */
.contact-form .field{gap:14px;margin-bottom:36px}
.contact-form .field label{
  color:#c6b69e;
  font-family:var(--ui-font);
  font-size:11px;
  font-weight:600;
  line-height:1.55;
  letter-spacing:.115em;
  text-transform:uppercase;
}
.contact-form .field input,.contact-form .field select,.contact-form .field textarea{
  font-family:var(--ui-font);
  color:#f1eee8;
  font-size:15px;
  font-weight:450;
  line-height:1.6;
  letter-spacing:-.015em;
  border-bottom-color:#67675e;
  padding:12px 0 18px;
  transition:border-color .22s ease, color .22s ease;
}
.contact-form .field input::placeholder,.contact-form .field textarea::placeholder{
  font-family:var(--ui-font);
  color:#999a93;
  font-weight:400;
  letter-spacing:-.015em;
  opacity:1;
}
.contact-form .field select{font-weight:550;cursor:pointer}
.contact-form .field input:focus,.contact-form .field select:focus,.contact-form .field textarea:focus{
  border-bottom:1px solid var(--accent);
  outline:none;
}
.contact-form .field input:focus-visible,.contact-form .field select:focus-visible,.contact-form .field textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.contact-form .send-button{font-family:var(--ui-font);font-weight:700;letter-spacing:.1em}
.contact-form .form-note{font-size:12px;letter-spacing:0;line-height:1.7}
/* Consistent quiet refinement for interface text across all four pages. */
.eyebrow,.section-index,.filter-counter,.hero-topline,.hero-art-info,.work-card-info p,.portfolio-caption{
  font-weight:500;
}
.eyebrow{letter-spacing:.19em}
.filter{font-size:11px;font-weight:600;letter-spacing:.025em}
@media(max-width:740px){
  .mobile-panel a{font-size:clamp(35px,9vw,58px);letter-spacing:-.045em}
  .contact-form .field input,.contact-form .field select,.contact-form .field textarea{font-size:16px}
}

/* Apply the new typeface site-wide to supporting copy; keep oversized display headlines bold and editorial. */
body,button,input,select,textarea{font-family:var(--ui-font)}
.hero-headline,.page-heading h1,.section-head h2,.intro h2,.large-cta h2,.footer-top>span,.poster-title{font-family:Inter,"Helvetica Neue",Arial,sans-serif}
.portfolio-grid .work-card-info h3{font-family:var(--ui-font)}


/* ---- v4 / Unified premium typography and selective champagne highlights ---- */
/* One intentional type family for the entire site, including all display type. */
:root{--display-font:"Manrope","Segoe UI Variable Text","Segoe UI",Arial,sans-serif;--highlight:#c1ab91}
html,body,button,input,select,textarea,
.hero-headline,.page-heading h1,.section-head h2,.intro h2,.large-cta h2,
.footer-top>span,.poster-title,.transition-mark,.transition-caption,
.plaque-title,.plaque-sub,.work-card-info h3,
.service-row h3,.about-statement h2,.contact-layout h2,
.process-item h3,.value-card h3,.modal-copy h2,
.brand-words,.mobile-panel a,.desktop-nav,.nav-link,.header-cta{
  font-family:var(--display-font);
}
/* Harmonious sizes and spacing; prevents the wider typeface from overflowing. */
.hero-headline{font-size:clamp(56px,7.15vw,121px);font-weight:600;line-height:.96;letter-spacing:-.064em}
.page-heading h1{font-size:clamp(68px,10.8vw,164px);letter-spacing:-.07em;line-height:.94;font-weight:600}
.section-head h2{letter-spacing:-.053em;font-weight:560;line-height:1.05}
.intro h2,.about-statement h2{letter-spacing:-.053em;font-weight:540;line-height:1.12}
.large-cta h2{letter-spacing:-.055em;font-weight:580;line-height:1}
.contact-layout h2{letter-spacing:-.054em;font-weight:570}
.service-row h3,.process-item h3,.value-card h3{letter-spacing:-.036em;font-weight:570}
.poster-title,.work-card.reel .poster-title{font-weight:650;letter-spacing:-.049em;line-height:1.01}
.footer-top>span{letter-spacing:-.05em;font-weight:600}
.brand-words{letter-spacing:.025em}
.nav-link,.header .nav-link,.header-cta{font-weight:650}
.field label,.contact-form .field label{letter-spacing:.105em}
/* Restrained warmth: highlighted words, not entire paragraphs. */
.accent-word,.hero-headline .accent-word,.hero-summary .accent-word,
.page-heading h1 .accent-word,.intro h2 .accent-word,
.about-statement h2 .accent-word,.contact-layout h2 .accent-word,
.contact-layout h2 span .accent-word,.large-cta h2 span .accent-word,
.process-item p .accent-word{color:var(--highlight);font-weight:inherit;font-style:inherit}
.intro h2 em{font-style:normal}
/* A slightly warmer hover without introducing a new accent color. */
.text-link:hover,.contact-info .contact-email:hover{color:var(--highlight)}
.values .accent-word{color:#806348}
@media(max-width:1100px){
  .hero-headline{font-size:clamp(53px,7vw,86px)}
  .page-heading h1{font-size:clamp(62px,10vw,115px)}
}
@media(max-width:740px){
  .hero-headline{font-size:clamp(48px,11.3vw,82px);line-height:1;letter-spacing:-.063em}
  .page-heading h1{font-size:clamp(55px,13.8vw,100px);letter-spacing:-.065em;line-height:.98}
  .portfolio-page .page-heading h1{font-size:clamp(52px,13vw,91px)}
  .contact-page .page-heading h1{font-size:clamp(51px,12.8vw,87px)}
  .section-head h2{font-size:clamp(39px,9.8vw,67px)}
  .transition-mark{font-size:clamp(20px,6.2vw,35px)}
  .contact-layout h2{font-size:clamp(44px,10vw,70px)}
}
@media(max-width:420px){
  .hero-headline{font-size:clamp(44px,11vw,58px)}
  .contact-page .page-heading h1{font-size:clamp(49px,12vw,65px)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* v5 — Larger, gently rounded main navigation. Rest of the Manrope site design remains unchanged. */
:root{--navigation-font:"Nunito","Manrope","Trebuchet MS","Arial Rounded MT Bold",sans-serif}
.desktop-nav .nav-link,
.mobile-panel nav a{
  font-family:var(--navigation-font);
  font-weight:700;
  letter-spacing:.005em;
  text-transform:none;
}
.header .desktop-nav .nav-link{
  font-size:17px;
  line-height:1.25;
  color:var(--accent);
  letter-spacing:.005em;
}
.header .desktop-nav .nav-link span{
  font-family:var(--navigation-font);
  font-size:10px;
  font-weight:600;
  letter-spacing:0;
  transform:translateY(-8px);
}
.header .desktop-nav{gap:clamp(18px,2.45vw,39px)}
.header .desktop-nav .nav-link.active,
.header .desktop-nav .nav-link:hover{color:#f1dfbf}
.mobile-panel nav a{
  font-size:clamp(46px,11.5vw,74px);
  letter-spacing:-.035em;
  font-weight:700;
}
.mobile-panel nav a span{font-family:var(--navigation-font);font-weight:650}
@media (min-width:741px) and (max-width:1180px){
  .header .desktop-nav{gap:clamp(13px,2vw,22px)}
  .header .desktop-nav .nav-link{font-size:15px}
  .header .desktop-nav .nav-link span{font-size:9px}
}
@media (max-width:740px){
  .mobile-panel nav a{font-size:clamp(42px,10.6vw,68px);letter-spacing:-.035em}
}
@media (max-width:380px){
  .mobile-panel nav a{font-size:42px}
}


/* v6 — Burgundy typographic accents and elegant pointer-interactive hero */
:root{
  --accent:#BE977B;
  --highlight:#BE977B;
  --burgundy-dark:#755342;
}
::selection{background:#9E7356;color:#fff}
/* Rounded navigation retained from v5; the decorative page numbers are removed in HTML. */
.header .desktop-nav .nav-link{color:var(--accent)}
.header .desktop-nav .nav-link.active,
.header .desktop-nav .nav-link:hover{color:#E1BCA0}
.header .nav-link::after{background:var(--accent)}
.mobile-panel nav a{color:var(--burgundy-dark)}
.mobile-panel nav a.active,.mobile-panel nav a:hover{color:#37281F}
.eyebrow,.service-row .number,.process-item .number,.ticker-track b,.muted-dot{color:var(--accent)}
.accent-word,.hero-headline .accent-word,.hero-summary .accent-word,
.page-heading h1 .accent-word,.intro h2 .accent-word,
.about-statement h2 .accent-word,.contact-layout h2 .accent-word,
.contact-layout h2 span .accent-word,.large-cta h2 span .accent-word,
.process-item p .accent-word{color:var(--highlight)}
/* Use the darker burgundy on light backgrounds to maintain legibility. */
.values .eyebrow,.values .accent-word{color:var(--burgundy-dark)}
.contact-form .field label{color:#CEAD94}
.contact-form .field input:focus-visible,.contact-form .field select:focus-visible,
.contact-form .field textarea:focus-visible{outline-color:var(--accent)}
.plaque-title{color:#F1EEE8!important}
.plaque-sub{color:#DBC1A9!important}
.transition-dot{color:var(--burgundy-dark)}
.hero-ring{z-index:2;border-color:rgba(232,214,194,.26)}
.hero-arc{z-index:2;border-left-color:rgba(176,130,96,.48);border-bottom-color:rgba(176,130,96,.22)}
.hero-arc.arc-two{border-top-color:rgba(192,151,118,.42)}
.hero-art-number,.hero-art-info{z-index:5}
/* Soft radial backlight tracks the cursor behind the rotating rings. */
.hero-art::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(circle 225px at var(--spot-x,50%) var(--spot-y,50%),
    rgba(240,196,158,.33) 0%,rgba(178,127,88,.18) 35%,rgba(97,65,45,.11) 60%,transparent 82%);
  opacity:0;
  transition:opacity .38s ease;
}
.hero-art.is-pointer-active::after{opacity:1}
.hero-art .hero-plaque{
  z-index:4;
  transform:translate(-50%,-50%) scale(1);
  transition:transform .55s cubic-bezier(.22,1,.36,1),
    border-color .4s ease,box-shadow .5s ease,background-color .4s ease;
  will-change:transform;
}
.hero-art.is-pointer-active .hero-plaque{
  transform:translate(-50%,-50%) scale(1.07);
  border-color:rgba(222,174,137,.47);
  background-color:rgba(31,24,19,.54);
  box-shadow:0 22px 70px rgba(0,0,0,.30),0 0 38px rgba(180,119,75,.19),inset 0 0 0 1px rgba(236,187,151,.12);
}
@media (prefers-reduced-motion:reduce){
  .hero-art::after,.hero-art .hero-plaque{transition:none}
  .hero-art.is-pointer-active .hero-plaque{transform:translate(-50%,-50%)}
}


/* v7 / Elegant small labels, 9:16 video portfolio, and interactive About process */
:root{
  --accent:#BE977B;
  --highlight:#BE977B;
  --burgundy-dark:#755342;
  --accent-soft:#E2C3AB;
  --accent-on-light:#76513B;
}
/* Small editorial labels share the site's Manrope typeface, enlarged just enough to read. */
.eyebrow,.section-index,.hero-topline,.hero-art-number,.hero-art-info,
.portfolio-caption,.filter-counter,.filter,.ticker-track,
.contact-form .field label,.contact-form .form-note,.contact-info .contact-meta,
.work-media .poster-kicker,.work-media .mock-label,.footer-bottom,
.work-card-info p,.plaque-sub,.process-intro-hint{
  font-family:var(--display-font);
}
.eyebrow{font-size:clamp(12px,1vw,14px);line-height:1.5;letter-spacing:.13em;font-weight:650}
.section-index{font-size:12px;letter-spacing:.07em;color:#A6A299}
.hero-topline,.hero-art-number,.hero-art-info,.portfolio-caption,.filter-counter{font-size:12px;letter-spacing:.10em}
.contact-form .field label{font-size:13px;letter-spacing:.075em;color:var(--accent-soft)}
.contact-info .contact-meta,.footer-bottom{font-size:12px;letter-spacing:.06em}
.work-media .poster-kicker{font-size:10px;letter-spacing:.09em}
.work-media .mock-label{font-size:9px;letter-spacing:.09em}
.plaque-sub{color:var(--accent-soft)!important}
/* Refined color system. Keep ivory for body copy; use bronze only where emphasis is intentional. */
.header .desktop-nav .nav-link{color:#CFB29A}
.header .desktop-nav .nav-link.active,.header .desktop-nav .nav-link:hover{color:#F1D3B8}
.mobile-panel nav a{color:#755342}
.eyebrow,.accent-word,.service-row .number,.process-card-number,.ticker-track b,.muted-dot{color:var(--highlight)}
.values .eyebrow,.values .accent-word{color:var(--accent-on-light)}
.hero-arc{border-left-color:rgba(184,136,99,.49);border-bottom-color:rgba(184,136,99,.22)}
.hero-arc.arc-two{border-top-color:rgba(198,162,130,.36)}
.hero-art::after{background:radial-gradient(circle 225px at var(--spot-x,50%) var(--spot-y,50%),rgba(231,187,153,.31) 0%,rgba(183,134,96,.19) 35%,rgba(92,59,39,.08) 60%,transparent 82%)}
/* New Home statement: concise line rhythm, balanced at every width. */
.intro .statement-viral{font-size:clamp(35px,4.55vw,69px);line-height:1.16;letter-spacing:-.052em;max-width:1020px;text-wrap:balance}
/* Consistent editorial grid — every portfolio slot, including client case studies, is portrait 9:16. */
.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:60px 25px;align-items:start}
.portfolio-grid .work-card,
.portfolio-grid .work-card.reel,
.portfolio-grid .work-card:nth-child(4),
.portfolio-grid .work-card:nth-child(5),
.portfolio-grid .work-card:nth-child(6),
.portfolio-grid.projects-only .work-card,
.portfolio-grid.reels-only .work-card{grid-column:auto;min-width:0;max-width:none}
.portfolio-grid .work-media,
.portfolio-grid .work-card.reel .work-media,
.portfolio-grid .work-card:nth-child(5) .work-media,
.portfolio-grid .work-card:nth-child(6) .work-media,
.portfolio-grid .work-card:first-child .work-media,
.portfolio-grid .work-card:nth-child(4) .work-media{
  width:100%;aspect-ratio:9 / 16;min-height:0;height:auto;border-radius:22px;
}
.portfolio-grid .work-card .poster-title,
.portfolio-grid .work-card.reel .poster-title,
.portfolio-grid .work-card:first-child .poster-title,
.portfolio-grid .work-card:nth-child(4) .poster-title{
  font-size:clamp(25px,2.6vw,43px);bottom:68px;left:25px;max-width:86%;letter-spacing:-.05em;
}
.portfolio-grid .work-card.reel .poster-title{max-width:78%}
.portfolio-grid .media-shell.landscape-shell{left:9%;right:9%;top:23%;bottom:24%;border-radius:21px}
.portfolio-grid .media-shell.vertical-shell{width:73%;height:68%;left:50%;top:14%;border-radius:23px}
.portfolio-grid .work-card-info{padding-top:17px}
.portfolio-grid .work-card-info h3{font-size:clamp(16px,1.4vw,19px)}
.portfolio-grid .work-card-info p{font-size:11px}
.preview-grid .work-card.reel .work-media{aspect-ratio:9 / 16}
/* The project detail keeps the portrait video proportions too. */
.modal-art{display:flex;justify-content:center;align-items:center;min-height:0;padding:20px;background:#171918}
.modal-art .work-media{width:min(100%,330px);height:auto;min-height:0;aspect-ratio:9 / 16}
.modal-content{grid-template-columns:minmax(0,0.85fr) minmax(0,1fr)}
/* Four interactive About cards. Heading centered; hover/focus/tap reveals description in its place. */
.process .section-head{align-items:end}
.process-intro-hint{color:#A7A098;font-size:12px;letter-spacing:.09em;text-align:right}
.process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.process-card{display:block;position:relative;isolation:isolate;overflow:hidden;min-width:0;height:320px;padding:24px;border:1px solid #494741;background:linear-gradient(150deg,#1F211F,#171918 72%);color:var(--text);text-align:left;border-radius:15px;transition:border-color .35s,box-shadow .35s,background .35s;}
.process-card:hover,.process-card:focus-visible,.process-card[aria-expanded="true"]{border-color:rgba(190,151,123,.66);box-shadow:0 24px 60px rgba(0,0,0,.17);background:#22211F}
.process-card-number{position:absolute;top:22px;left:22px;z-index:3;font-size:12px;font-weight:650;letter-spacing:.07em}
.process-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:25px;transition:opacity .38s,transform .4s}
.process-title{font-family:var(--display-font);font-size:clamp(20px,2.03vw,30px);font-weight:720;letter-spacing:.08em;text-align:center}
.process-action{font-size:10px;font-weight:650;letter-spacing:.11em;color:#9F9F96}
.process-detail{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:52px 25px 26px;background:linear-gradient(150deg,#2A2621,#1B1B19);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .38s,transform .4s,visibility .38s}
.process-detail-kicker{font-size:12px;font-weight:750;letter-spacing:.13em;color:var(--accent-soft)}
.process-description{font-family:var(--display-font);font-size:clamp(14px,1.05vw,16px);line-height:1.55;font-weight:460;color:#F1EDE6;max-width:29ch}
.process-detail-end{font-size:10px;letter-spacing:.08em;color:#AFA9A0}
@media(hover:hover) and (pointer:fine){
  .process-card:hover .process-face{opacity:0;transform:translateY(-14px)}
  .process-card:hover .process-detail{opacity:1;visibility:visible;transform:translateY(0)}
}
.process-card:focus-visible .process-face,.process-card[aria-expanded="true"] .process-face{opacity:0;transform:translateY(-14px)}
.process-card:focus-visible .process-detail,.process-card[aria-expanded="true"] .process-detail{opacity:1;visibility:visible;transform:translateY(0)}
@media(max-width:1170px){
  .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-card{height:290px}
  .process-title{font-size:clamp(22px,2.5vw,29px)}
}
@media(max-width:740px){
  .eyebrow{font-size:12px;letter-spacing:.1em}
  .intro .statement-viral{font-size:clamp(33px,7.9vw,54px);line-height:1.18}
  .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 14px}
  .portfolio-grid .work-card,
  .portfolio-grid .work-card.reel,
  .portfolio-grid .work-card:nth-child(5),
  .portfolio-grid .work-card:nth-child(6),
  .portfolio-grid .work-card:first-child,
  .portfolio-grid .work-card:nth-child(4),
  .portfolio-grid.projects-only .work-card,
  .portfolio-grid.reels-only .work-card{grid-column:auto}
  .portfolio-grid .work-card .poster-title,
  .portfolio-grid .work-card.reel .poster-title,
  .portfolio-grid .work-card:first-child .poster-title,
  .portfolio-grid .work-card:nth-child(4) .poster-title{font-size:clamp(17px,4.2vw,29px);left:14px;bottom:51px}
  .portfolio-grid .work-media .poster-kicker{top:13px;left:13px;right:13px;font-size:8px}
  .portfolio-grid .work-media .mock-label{font-size:7px;left:14px}
  .portfolio-grid .media-shell.vertical-shell{border-radius:15px}
  .portfolio-grid .work-card-info h3{font-size:14px}
  .portfolio-grid .work-card-info p{font-size:10px}
  .process .section-head{align-items:start;gap:20px;flex-direction:column}
  .process-intro-hint{text-align:left}
  .process-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .process-card{height:265px;padding:15px}
  .process-detail{padding:43px 18px 19px}
  .process-description{font-size:13px;line-height:1.45}
  .process-title{font-size:clamp(17px,3.5vw,23px);letter-spacing:.04em}
  .process-action{font-size:8px;text-align:center}
  .modal-content{display:block;max-height:92vh}
  .modal-art{height:auto;min-height:0}
  .modal-art .work-media{width:min(58vw,260px);height:auto;aspect-ratio:9 / 16;min-height:0}
}
@media(max-width:510px){
  .portfolio-grid{grid-template-columns:1fr;gap:42px}
  .portfolio-grid .work-card{width:100%;max-width:410px;margin-inline:auto}
  .portfolio-grid .work-card .poster-title,
  .portfolio-grid .work-card.reel .poster-title,
  .portfolio-grid .work-card:first-child .poster-title,
  .portfolio-grid .work-card:nth-child(4) .poster-title{font-size:clamp(27px,7.1vw,43px);left:23px;bottom:70px}
  .process-grid{grid-template-columns:1fr}
  .process-card{height:230px}
  .process-title{font-size:28px}
  .process-description{font-size:15px;max-width:35ch}
}
@media(prefers-reduced-motion:reduce){
  .process-face,.process-detail{transition:none}
}


/* V8 — supplied SC logo, simplified Process cards, clean hero */
.brand {min-width:150px; gap:0; display:flex; align-items:center; justify-content:flex-start;}
.brand-logo {display:block;height:76px;width:auto;max-width:150px;object-fit:contain;transition:opacity .25s ease,transform .3s ease;}
.brand:hover .brand-logo {opacity:.92;transform:scale(1.035)}
.process-face {gap:0;}
.process-detail {justify-content:center;align-items:center;text-align:center;padding:30px 24px 46px;}
.process-description {margin:auto;font-size:clamp(15px,1.15vw,17px);line-height:1.6;max-width:29ch;}
.process-detail-end {position:absolute;left:15px;right:15px;bottom:21px;text-align:center;}
@media(max-width:740px){
  .brand {min-width:0;}
  .brand-logo {height:59px;max-width:110px;}
  .process-detail{padding:24px 20px 40px;}
  .process-description{font-size:14px;}
  .process-detail-end{bottom:14px;font-size:9px;}
}