/* Grid24's line, mask and deep-red motion language. */
:root{--maroon:#310A0F;--ink:#0B0B0D;--ivory:#F3EFE9;--ease:cubic-bezier(.22,1,.36,1)}
html{scroll-behavior:auto}
body{overflow-x:hidden}
.icon{display:inline-block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.12em;flex:none}
.site-header{background:rgba(11,11,13,.89);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.header-inner nav>a:not(.nav-project)::after{background:#98717a}
.header-inner nav>a:hover{color:#fff}
.nav-project,.button{position:relative;isolation:isolate;overflow:hidden;transition:border-color .28s ease,color .28s ease,transform .28s var(--ease),background-color .28s ease}
.nav-project::before,.button::before{content:"";position:absolute;z-index:-1;inset:-20% -5%;background:radial-gradient(ellipse at var(--hover-x,50%) 88%,#5a232b 0%,#310A0F 65%);transform:translate3d(0,105%,0) scale(1.04);transition:transform .36s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.nav-project:hover::before,.nav-project:focus-visible::before,.button:hover::before,.button:focus-visible::before{transform:translate3d(0,0,0) scale(1)}
.button.primary{background:#180f12;border-color:#64414a}.button.primary:hover,.button.primary:focus-visible{border-color:#a48188;background:#180f12;color:var(--ivory)}
.button.light:hover,.button.light:focus-visible{color:var(--ivory);border-color:#b8939b;background:var(--ivory)}
.nav-project{background:#310A0F;border:1px solid #704750}.nav-project:hover{background:#310A0F;border-color:#ad8a91}
.button:active,.nav-project:active{transform:scale(.985)}
.button>*,.nav-project>*{position:relative;z-index:1}
.button>*,.nav-project>*{transform:translate3d(var(--magnet-x,0px),var(--magnet-y,0px),0);transition:transform .28s var(--ease)}
.button svg,.nav-project svg,.underlink svg,.process-arrow svg,.studies-controls svg{width:1.12em;height:1.12em;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.13em;flex:none;transition:transform .28s var(--ease)}
.button:hover svg,.underlink:hover svg,.process-row:hover svg{transform:translate(2px,-2px)}
.button-content>span[aria-hidden]:has(svg){font-size:inherit}.button:hover .button-content>span[aria-hidden]:has(svg){transform:none}
.underlink{transition:color .25s ease,letter-spacing .3s var(--ease)}.underlink:hover{color:#d5b5bd;letter-spacing:.015em}
.service-row summary{transition:padding-left .36s var(--ease),color .25s ease}.service-row summary:hover{padding-left:.5rem}
.social-preview{background:#310A0F}.social-post.second{background:#ad8791}.scope-panel .primary{background:#310A0F}.scope-panel .primary:hover{background:#310A0F}
a.service-preview::before{content:"";width:.55rem;height:.55rem;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);top:1.15rem;right:1.15rem}
a.service-preview::after{content:"";position:absolute;right:1.12rem;top:1.45rem;width:.8rem;height:1px;background:currentColor;transform:rotate(-45deg);pointer-events:none}

/* Full-viewport editorial hero: linework is atmosphere, not a standalone object. */
.hero{display:flex;flex-direction:column;justify-content:space-between;min-height:max(740px,calc(100svh - 96px));max-width:none;padding-top:clamp(1.3rem,2.2vw,2.4rem);padding-bottom:0;isolation:isolate;overflow:hidden;background:#0B0B0D}
.hero-atmosphere{z-index:-2;background:radial-gradient(ellipse at 82% 42%,#310A0F75,transparent 54%),linear-gradient(180deg,#0B0B0D,#111013 68%,#0B0B0D)}
.hero-atmosphere::before{mask-image:linear-gradient(90deg,transparent,#000 50%,transparent);opacity:.5}
.hero-environment{mask-image:radial-gradient(ellipse at 82% 48%,#000,transparent 75%)}
.hero-index{display:flex;justify-content:space-between;position:relative;z-index:2;color:#ac9fa2;border-bottom:1px solid #6453577a;padding-bottom:1rem;font-size:.72rem}
.hero-index time{font-variant-numeric:tabular-nums}
.hero-copy{position:relative;z-index:2;display:block;width:100%;padding:clamp(3rem,7vh,7rem) 0 clamp(4rem,10vh,7rem);grid-row:auto}
.hero-overline{color:#b3a3a5;margin-bottom:clamp(1rem,2.7vw,2.2rem);letter-spacing:.17em}
.hero h1{font-size:clamp(5.7rem,11.4vw,15.5rem);line-height:.82;letter-spacing:-.082em;font-weight:400;max-width:1500px;text-wrap:nowrap}
.hero h1 .headline-mask{padding-bottom:.15em;margin-bottom:-.15em;overflow:clip}
.hero h1 .serif{color:#e7d8d0;font-size:.98em;letter-spacing:-.095em}
.hero-deck{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1.05fr);align-items:end;gap:2rem;margin-top:clamp(2rem,4vw,4.8rem)}
.hero-description{grid-column:2;max-width:600px;margin:0;color:#d4c9c8;font-size:clamp(1.06rem,1.35vw,1.35rem);line-height:1.48}
.hero-actions{grid-column:3;display:flex;flex-direction:column;align-items:flex-start;margin:0;gap:.9rem}
.hero-actions .button{min-width:min(100%,255px)}
.hero-bottom{position:relative;z-index:2;display:flex;justify-content:space-between;gap:1rem;border-color:#6453577a;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}
.hero-bottom .underlink{font-size:.7rem;text-transform:none;letter-spacing:0}
.signature-art{position:absolute;z-index:-1;right:-8%;top:6%;width:min(66vw,1120px);height:92%;opacity:.73;mix-blend-mode:normal;pointer-events:none;transform-origin:center}
.signature-art::before{inset:10% 10%;border-radius:0;background:radial-gradient(ellipse at 64% 48%,#6a283430,transparent 60%);filter:blur(40px)}
.hero-lines{position:absolute;inset:3% 0;transform:rotate(-23deg) skewY(-9deg);mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 77%,transparent 100%)}
.hero-lines i{position:absolute;display:block;top:var(--line-top);right:var(--line-right);width:var(--line-width);height:1px;background:linear-gradient(90deg,transparent,#aa828897 36%,#f3efe998 54%,#713f4c63 88%,transparent);box-shadow:0 0 8px #e6abb526;opacity:var(--line-opacity)}
.hero-notation{position:absolute;right:20%;top:18%;color:#ac9b9e;font-size:.67rem;letter-spacing:.15em;line-height:1.8;text-align:right}

/* 24 precise hairlines leave the intro and reveal the same grid language. */
.entrance-lines{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:radial-gradient(ellipse at 50% 47%,#210d12,#0B0B0D 63%);padding:clamp(1rem,3vw,2.5rem) var(--pad)}
.entrance-lines .entrance-stage{width:min(86vw,730px);height:min(43vh,390px);display:grid;place-items:center}
.entrance-lines .entrance-stage::before{inset:-18% -20%;mask-image:radial-gradient(ellipse at center,#000,transparent 75%);opacity:.55}
.entrance-lines .entrance-logo{display:block;position:relative;width:min(74vw,620px);height:min(32vh,290px);margin:auto;perspective:none}
.entrance-line{position:absolute;top:var(--y);left:var(--x);width:var(--w);height:1px;background:linear-gradient(90deg,#e9dfd5,#a6858e 68%,transparent);box-shadow:0 0 10px #9b62643b;transform-origin:left center;opacity:0}
.entrance-lines .entrance-caption{position:absolute;top:100%;left:0;right:0;margin:1.3rem auto 0;font-size:.67rem;color:#bdb2b2}
.entrance-bottom{border-color:#76575e66}.entrance-skip{color:#eee3dd}

/* The reel expands by transform only, while scrolling stays fully native. */
.showreel{--reel-progress:0;height:190vh;background:#0B0B0D;color:var(--ivory);position:relative}
.showreel-pin{position:sticky;top:0;height:100svh;min-height:570px;overflow:hidden;isolation:isolate}
.showreel-heading{position:absolute;z-index:0;top:clamp(4rem,8vw,8rem);left:0;right:0;display:grid;grid-template-columns:1fr 2fr 1fr;gap:2rem;align-items:end;opacity:calc(1 - var(--reel-progress)*1.5);transform:translateY(calc(var(--reel-progress)*-40px))}
.showreel-heading .micro{align-self:start;color:#b5a5a6}.showreel-heading h2{font-size:clamp(3rem,5.8vw,7rem);line-height:.94;letter-spacing:-.06em}.showreel-heading p{max-width:18rem;color:#b2a4a6}
.showreel-window{position:absolute;inset:0;overflow:hidden;transform:scale(calc(.52 + var(--reel-progress)*.48));border:1px solid #90717a;border-radius:calc((1 - var(--reel-progress))*18px);box-shadow:0 28px 95px #0009;background:#271c1c url('./assets/grid24-showreel-poster.webp') center/cover no-repeat}
.showreel-window video{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.75) contrast(1.08) brightness(.72)}
.showreel-window::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#130f1478,transparent 72%),linear-gradient(0deg,#100c10a0,transparent 50%)}
.showreel-overlay{position:absolute;z-index:1;inset:clamp(1.4rem,4vw,5rem);display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.showreel-overlay>span{font-size:.7rem;letter-spacing:.14em}.showreel-overlay>strong{align-self:center;font-weight:400;text-align:center;font-size:clamp(5rem,11vw,15rem);line-height:.79;letter-spacing:-.09em;text-shadow:0 8px 45px #0008}.showreel-overlay em{font-family:Studio Serif,Georgia,serif;font-weight:400}.showreel-overlay>span:last-child{align-self:end}
.showreel-caption{position:absolute;left:0;right:0;bottom:1rem;display:flex;justify-content:space-between;gap:1rem;color:#a9999b;opacity:calc(1 - var(--reel-progress)*2)}

/* A deliberately stark comparison: the completed direction is immersive. */
.transformation-section{padding-top:clamp(5rem,9vw,10rem)}
.transformation-section .section-heading h2{font-size:clamp(3.5rem,5.5vw,6.8rem)}
.transform-stage{padding:clamp(.55rem,1vw,1rem);background:#171315;box-shadow:0 36px 90px #310A0F33}
.transform-frame{height:clamp(520px,60vw,760px);border:0}
.transform-chrome{height:40px;border:0;background:#171315;color:#e0d5d0}
.transform-after{color:#fff;background:#27171a}
.after-main{position:relative;display:block;flex:1}
.after-media{position:absolute;inset:0}.after-media img{object-position:50% center;transform:translate3d(var(--image-shift),0,0) scale(1.12);filter:contrast(1.05) saturate(.83)}
.after-media::after{background:linear-gradient(90deg,#1a0e10ab 0%,#1a0e1040 47%,transparent 76%),linear-gradient(0deg,#160d12ba,transparent 42%)}
.after-media>span{bottom:1.4rem;right:2rem;left:auto}
.after-nav,.after-footer{position:relative;z-index:2;background:#1a1016;color:#fff;border-color:#e4dbd12e}.after-nav strong span{color:#d0a9a8}
.after-copy{position:absolute;z-index:2;inset:0;display:flex;align-items:flex-start;justify-content:center;padding:clamp(1.8rem,5.4vw,7rem);transform:translate3d(0,var(--type-shift),0);pointer-events:none}
.after-kicker{color:#e8d5d0}.after-copy h3{font-size:clamp(4rem,8cqw,9rem);line-height:.86;letter-spacing:-.076em;margin:2rem 0 1.5rem;color:#fff}.after-copy h3 em{color:#f0e0d4}.after-copy p{color:#f1e8df;max-width:25rem;font-size:clamp(.9rem,1.35cqw,1.15rem)}
.after-action{background:#310A0F;border:1px solid #b79b9a;padding:1rem 1.3rem}
.transform-divider::before{background:#f4ebe5;box-shadow:0 0 8px #310A0F}.transform-divider>span{background:#310A0F;border-color:#f1dfdf}
.transform-insight span,.transform-notes span{color:#310A0F}

.studies-section{max-width:none;padding-left:var(--pad);padding-right:var(--pad)}
.studies-section .section-heading{max-width:1630px;margin-inline:auto;margin-bottom:clamp(3rem,6vw,6rem)}
.study-card{flex-basis:clamp(360px,76vw,1160px)}
.studies-track::after{flex-basis:max(0px,calc(100% - clamp(360px,76vw,1160px) - 2rem))}
.study-art{aspect-ratio:1.48}.study-info{grid-template-columns:1.4fr 1fr;gap:.35rem 2rem;padding:1.5rem 0 2.5rem}
.study-info .study-title{font-size:clamp(2.1rem,4vw,5rem)}
.study-info .study-summary{font-size:clamp(.95rem,1.15vw,1.25rem)}
.studies-controls button{display:grid;place-items:center;font-size:1rem;border-color:#70626a}.studies-controls button:hover:not(:disabled){background:#310A0F;border-color:#9f7e87}
.interaction-cursor,.interaction-cursor[data-state="view"]{background:#310A0Fee;border-color:#c4a8ab;color:#fff}
.interaction-cursor[data-state="open"],.interaction-cursor[data-state="drag"]{background:#310A0Fee;color:#fff;border-color:#c4a8ab}
.has-interaction-cursor .transform-divider:hover{cursor:none}
.process-row:hover .process-arrow,.process-row:focus-visible .process-arrow{background:#310A0F;border-color:#310A0F}
.process-tiles{top:17%;left:15%;width:70%;height:68%;gap:1%;transform:perspective(950px) rotateX(4deg) rotateY(-8deg) rotateZ(-5deg)}
.process-tiles i,.process-tiles i:nth-child(4n),.process-tiles i:nth-child(7n){align-self:center;height:1px;min-height:1px;background:linear-gradient(90deg,transparent,#e9d5d0 25%,#c5a9ac 70%,transparent);border:0;box-shadow:0 0 12px #e4b8bb44;opacity:.82;transform:translate3d(var(--sx),var(--sy),0) rotate(var(--turn))}
.process-tiles i::after{display:none}
.process-visual[data-stage="2"] .process-tiles i,.process-visual[data-stage="3"] .process-tiles i,.process-visual[data-stage="4"] .process-tiles i{background:linear-gradient(90deg,transparent,#f3efe9 22%,#c5a9ac 75%,transparent)}
.process-foot .underlink{color:#310A0F}
.studio-object{background:radial-gradient(ellipse at 30% 24%,#e5d2cf 0%,#9d7a81 5%,#310A0F 28%,#130e14 52%,#573039 72%,#0b0b0d 87%)}
.studio-mark{background:linear-gradient(150deg,#eee1d7 10%,#a89496 40%,#f3efe9 59%,#4b252e 84%);background-clip:text;-webkit-background-clip:text}
.closing-cta{border-top:1px solid var(--line);padding-block:clamp(5rem,10vw,11rem);display:grid;grid-template-columns:1fr 2fr 1fr;align-items:end;gap:2rem}
.closing-cta .micro{align-self:start;color:#b6a6a6}.closing-cta h2{font-size:clamp(4rem,7vw,9rem);line-height:.88;letter-spacing:-.07em}.closing-cta .button{justify-self:end;min-width:220px}

/* Dedicated onboarding stays concise while preserving the working review/send flow. */
.project-opening{padding-block:clamp(4rem,8vw,9rem) 2rem;background:radial-gradient(ellipse at 78% 50%,#310A0F7a,transparent 45%)}
.project-opening>.micro{color:#bcaeac}.project-opening h1{font-size:clamp(4rem,8vw,10rem);line-height:.89;letter-spacing:-.075em;margin:2rem 0}.project-opening h1 em{color:#e2d3d0}
.project-opening>p{font-size:clamp(1.05rem,1.45vw,1.3rem);max-width:37rem;color:#cbc0bf;margin:0 0 3rem}
.project-opening-foot{display:flex;justify-content:space-between;padding-block:1rem;border-top:1px solid #6453577a;color:#b5a5a6}
.project-section{padding-top:clamp(3rem,5vw,6rem)}
.project-section .section-heading{margin-bottom:clamp(2rem,4vw,4rem)}
.scope-panel{background:#171113;border-color:#5e4249}.scope-panel textarea{background:#0B0B0D}
.inquiry-section{background:#310A0F}.selected-scope,.field input,.field textarea{background:#1b1014;border-color:#836c70}
.selected-scope{background:#1b1014}.selected-scope textarea{border-color:#856a6f}
.field input::placeholder,.field textarea::placeholder,.selected-scope textarea::placeholder{color:#a9949a}
.inquiry-panel{border-color:#90747a}.brief-row,.brief-review{border-color:#90747a}

/* One fast optical wipe for both same-page anchors and cross-page navigation. */
.liquid-transition{position:fixed;z-index:200;inset:0;pointer-events:none;opacity:0;overflow:hidden;background:#100d10;transition:opacity .12s ease}
.liquid-transition::before{content:"";position:absolute;inset:-18%;background:radial-gradient(ellipse at var(--nav-x,50%) var(--nav-y,50%),#6b3741 0%,#310A0F 33%,#140d11 72%);transform:translate3d(0,110%,0) skewY(-8deg) scale(1.1);transition:transform .38s cubic-bezier(.76,0,.24,1)}
.liquid-transition::after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,transparent 30%,#f3efe91a 49%,transparent 67%);opacity:0;transform:translateX(-40%);transition:opacity .22s,transform .58s var(--ease)}
.liquid-transition.is-covering,.liquid-transition.is-uncovering{opacity:1}
.liquid-transition.is-covering::before,.liquid-transition.is-uncovering::before{transform:translate3d(0,0,0) skewY(0) scale(1)}
.liquid-transition.is-arrival{opacity:1;transition:none}
.liquid-transition.is-arrival::before{transform:translate3d(0,0,0) skewY(0) scale(1);transition:none}
.liquid-transition.is-covering::after{opacity:.5;transform:translateX(25%)}
.liquid-transition.is-uncovering{opacity:0;transition:opacity .32s ease .08s}
html.transition-arriving body{visibility:hidden}
html.transition-arriving .liquid-transition{opacity:1}

@media(max-width:1100px){
  .hero{min-height:max(690px,calc(100svh - 96px))}.hero h1{font-size:clamp(5.4rem,11.4vw,10rem)}
  .hero-deck{grid-template-columns:1fr 1.3fr;gap:2rem}.hero-description{grid-column:1}.hero-actions{grid-column:2}
  .showreel-heading{grid-template-columns:1fr 2fr}.showreel-heading p{display:none}
  .closing-cta{grid-template-columns:1fr 2fr}.closing-cta .button{grid-column:2}
}
@media(max-width:760px){
  .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0b0b0def}
  .header-inner{min-height:112px}.nav-project{padding:.55rem .7rem}
  .hero{min-height:max(670px,calc(100svh - 112px));padding-top:1.3rem;display:flex}
  .hero-index{font-size:.63rem;gap:.8rem}.hero-index time{text-align:right}
  .hero-copy{padding:clamp(4rem,9vh,6rem) 0 2.5rem}
  .hero h1{font-size:clamp(3.75rem,13vw,7rem);line-height:.89;white-space:normal;text-wrap:balance}.hero h1 .headline-mask{overflow:visible}.hero h1 .headline-mask>span{white-space:nowrap}
  .hero-deck{display:block;margin-top:2rem}.hero-description{max-width:33rem;font-size:1.04rem}.hero-actions{flex-direction:row;align-items:center;margin-top:1.6rem;gap:1rem}.hero-actions .button{min-width:0}.hero-actions .underlink{font-size:.8rem}
  .signature-art{right:-28%;top:10%;width:100%;height:66%;opacity:.32}.hero-notation{display:none}
  .hero-bottom{display:flex;flex-wrap:wrap;gap:.5rem 1rem;padding-bottom:1.2rem}.hero-bottom span:nth-child(2){display:none}
  .entrance-lines .entrance-stage{width:100%;height:35vh}.entrance-lines .entrance-logo{width:80vw;height:25vh}.entrance-lines .entrance-top,.entrance-lines .entrance-bottom{font-size:.56rem}
  .showreel{height:150vh}.showreel-pin{min-height:0}.showreel-heading{display:block;top:6rem}.showreel-heading h2{font-size:clamp(3.3rem,8vw,5rem);margin-top:1.2rem}.showreel-window{transform:scale(calc(.75 + var(--reel-progress)*.25))}.showreel-overlay strong{font-size:clamp(4rem,14vw,7rem)}.showreel-overlay>span{font-size:.58rem}.showreel-caption span:last-child{display:none}
  .transform-frame{height:520px}.transform-stage.mobile .transform-frame{height:520px}
  .after-main{display:block}.after-copy{padding:1.3rem 7%;justify-content:center}.after-copy h3{font-size:clamp(3.5rem,14cqw,5.5rem);margin:1rem 0}.after-copy p{font-size:.76rem}.after-action{margin-top:1rem;padding:.65rem .8rem}.after-media{position:absolute;inset:0}.after-media img{object-position:70% center}.after-nav{min-height:50px}.after-footer{display:none}
  .study-card{flex-basis:min(88vw,650px)}.studies-track::after{flex-basis:max(0px,calc(100% - min(88vw,650px) - 1rem))}.study-art{aspect-ratio:.96}.study-info{display:block}.study-info .study-title{font-size:2.5rem}.study-info .study-summary{font-size:.91rem;margin-top:.5rem}
  .closing-cta{display:block;padding-block:5rem}.closing-cta h2{font-size:clamp(3.7rem,10vw,5.7rem);margin:1.7rem 0 2rem}.closing-cta .button{width:max-content}
  .project-opening{padding-block:4rem 2rem}.project-opening h1{font-size:clamp(3.7rem,11vw,6rem);margin:1.4rem 0}.project-opening>p{margin-bottom:2rem}.project-opening-foot{font-size:.65rem}
  .project-section{padding-top:3rem}
}
@media(max-width:420px){.hero h1{font-size:12.3vw}.hero-actions{align-items:flex-start;flex-direction:column}.hero-bottom{font-size:.64rem}}
@media(hover:none),(pointer:coarse){.button,.nav-project{transform:none!important}.showreel-window video{filter:saturate(.8) contrast(1.07) brightness(.8)}}
@media(prefers-reduced-motion:reduce){.entrance-lines{display:none!important}.liquid-transition{display:none!important}.showreel{height:auto}.showreel-pin{position:relative;height:auto;min-height:0;padding:4rem 0}.showreel-heading{position:relative;top:auto;opacity:1;transform:none}.showreel-window{position:relative;aspect-ratio:16/10;margin:3rem 0 0;transform:none;border:0;border-radius:0}.showreel-window video{display:none}.showreel-caption{display:none}html.transition-arriving body{visibility:visible}}