/* Shared one-shot motion. Individual translate/scale preserve composition rotations. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
.hero-shade{background:transparent}
.hero-shade::before{display:none}.hero-shade i{position:absolute;inset:0;display:block}
.hero-warmth{background:transparent}
.hero-shade{background:linear-gradient(to bottom,transparent 38%,rgba(12,13,16,.035) 52%,rgba(12,13,16,.11) 65%,rgba(21,22,19,.38) 76%,rgba(21,22,19,.82) 87%,#151613 94%,#151613 100%),radial-gradient(ellipse 78% 68% at 50% 38%,transparent 42%,rgba(15,16,19,.055) 58%,rgba(15,16,19,.15) 74%,rgba(15,16,19,.30) 90%,rgba(15,16,19,.43) 100%)}

.hero-shade::after{opacity:.018}
.hero-line{display:block}.hero-content>.eyebrow::before{content:'';width:28px;height:1px;background:currentColor;display:inline-block;margin-right:10px;vertical-align:middle}
.motion-ready{transition:opacity .7s var(--motion-ease),translate .85s var(--motion-ease),clip-path .9s var(--motion-ease);transition-delay:var(--delay,0ms);opacity:0;translate:0 22px}
.motion-mask{clip-path:inset(0 0 100% 0);translate:0 28px}
.motion-ready.motion-in{opacity:1;translate:0 0;clip-path:inset(0)}
.hero-motion .hero-content>.eyebrow,.hero-motion .hero-copy,.hero-motion .actions,.hero-motion .preview-link{animation:hero-fade .65s var(--motion-ease) both;animation-delay:var(--hero-start,.05s)}
.hero-motion .hero-line{animation:hero-line .85s var(--motion-ease) both;animation-delay:calc(var(--hero-start,.05s) + .06s)}
.hero-motion .hero-line:nth-child(2){animation-delay:calc(var(--hero-start,.05s) + .16s)}
.hero-motion .hero-copy{animation-delay:calc(var(--hero-start,.05s) + .24s)}
.hero-motion .actions{animation-delay:calc(var(--hero-start,.05s) + .32s)}
.hero-motion .preview-link{animation-delay:calc(var(--hero-start,.05s) + .38s)}
@keyframes hero-fade{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes hero-line{from{opacity:0;clip-path:inset(0 0 100% 0);translate:0 30px}to{opacity:1;clip-path:inset(0);translate:0 0}}
#work .case-stage.motion-stage{opacity:.12;translate:0 30px;clip-path:inset(0 0 36% 0);transition:opacity .8s var(--motion-ease),translate 1s var(--motion-ease),clip-path 1s var(--motion-ease)}
#work .case-restaurant .motion-stage,#work .case-flowforge .motion-stage{clip-path:inset(0 35% 0 0);translate:22px 0}
#work .case-realestate .motion-stage,#work .case-sportiq .motion-stage{clip-path:inset(0);opacity:0;scale:.97;transition:opacity .9s var(--motion-ease),scale 1s var(--motion-ease),translate 1s var(--motion-ease)}
#work .motion-stage .website-screen{scale:1.04;translate:0 18px;transition:scale 1.05s var(--motion-ease),translate 1.05s var(--motion-ease),box-shadow .35s}
#work .motion-stage .mini-device,#work .motion-stage .reservation-ticket,#work .motion-stage .specialist-note,#work .motion-stage .quote-note,#work .motion-stage .stage-note,#work .motion-stage .small-site{opacity:0;translate:0 30px;scale:.96;transition:opacity .75s var(--motion-ease) .16s,translate .9s var(--motion-ease) .16s,scale .9s var(--motion-ease) .16s}
#work .motion-stage .stage-note,#work .motion-stage .small-site:nth-child(2){transition-delay:.25s}
#work .motion-stage .small-site:nth-child(3){transition-delay:.33s}
#work .motion-stage.motion-in{opacity:1;translate:0 0;clip-path:inset(0);scale:1}
#work .motion-stage.motion-in .website-screen,#work .motion-stage.motion-in .mini-device,#work .motion-stage.motion-in .reservation-ticket,#work .motion-stage.motion-in .specialist-note,#work .motion-stage.motion-in .quote-note,#work .motion-stage.motion-in .stage-note,#work .motion-stage.motion-in .small-site{opacity:1;translate:0 0;scale:1}
#work .case-caption h3{padding-bottom:.08em}#work .case-caption h3,#work .case-link{transition:translate .35s var(--motion-ease),color .35s}
.service-list details{transition:background .35s,border-color .35s}.service-list summary h3,.service-list summary span,.service-list summary b,.service-list details p{transition:translate .35s,color .35s,opacity .35s}
.steps>div{position:relative}.steps>div::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:#cbb78e;scale:0 1;transform-origin:left;transition:scale .75s var(--motion-ease);transition-delay:var(--delay,0ms)}.steps>.motion-in::before{scale:1 1}
.industry-marquee{position:relative;overflow:hidden;margin:48px 0 30px;border-block:1px solid #cbb78e30;padding:24px 0;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.industry-track{display:flex;width:max-content;animation:industry-flow 48s linear infinite;animation-play-state:paused;font:italic 32px Fraunces,Georgia,serif;color:#bda77f}.industry-track>span{white-space:pre;padding-right:40px}.industry-marquee.in-view:not(.paused) .industry-track{animation-play-state:running}.industry-marquee:hover .industry-track,.industry-marquee:focus-within .industry-track{animation-play-state:paused!important}
.industry-marquee button{position:absolute;right:12px;top:10px;background:#151613;color:#cbb78e;border:1px solid #cbb78e55;width:30px;height:30px;cursor:pointer}
@keyframes industry-flow{to{transform:translateX(-50%)}}
.nav{transition:background .4s,border-color .4s,padding .4s,backdrop-filter .4s}.nav.scrolled{background:#151613dd;backdrop-filter:blur(9px);border-bottom:1px solid #cbb78e28}
.button{position:relative;overflow:hidden;isolation:isolate;transition:background .35s,translate .35s,box-shadow .35s}.button::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent,#fff4,transparent);translate:-110% 0;transition:translate .65s var(--motion-ease)}.button span,.text-link span,.social-button svg,.social-button b{display:inline-block;transition:translate .35s var(--motion-ease),filter .35s}
.process{background:radial-gradient(ellipse at 85% 20%,#cbb78e08,transparent 65%)}.contact{background:radial-gradient(ellipse at 0% 40%,#cbb78e0b,transparent 65%)}
@media(hover:hover) and (pointer:fine){#work .case-study:hover .website-screen{translate:0 -3px;box-shadow:0 24px 60px #0003}#work .case-study:hover .mini-device{translate:0 -6px}#work .case-study:hover .photo-page>img{transform:scale(1.025)}#work .case-study:hover .case-caption h3{translate:3px 0}#work .case-study:hover .case-link{translate:3px -2px;color:#ddcba8}.service-list details:hover{background:#cbb78e07;border-color:#cbb78e80}.service-list details:hover h3{translate:6px 0}.service-list details:hover summary span,.service-list details:hover summary b{color:#dcc398}.service-list details:hover summary b{translate:2px -2px}.service-list details:hover p{color:#e4dfd1}.button:hover{translate:0 -2px;box-shadow:0 6px 24px #cbb78e14}.button:hover::before{translate:110% 0}.button:hover span,.text-link:hover span,.social-button:hover b{translate:3px -2px}.social-button:hover svg{translate:0 -2px;filter:drop-shadow(0 0 5px #cbb78e55)}}
@media(max-width:600px){.hero-shade{background:transparent}.hero-shade{background:linear-gradient(to bottom,transparent 38%,rgba(12,13,16,.025) 52%,rgba(12,13,16,.09) 65%,rgba(21,22,19,.34) 76%,rgba(21,22,19,.82) 87%,#151613 94%,#151613 100%),radial-gradient(ellipse 78% 68% at 50% 38%,transparent 42%,rgba(15,16,19,.04) 58%,rgba(15,16,19,.12) 74%,rgba(15,16,19,.25) 90%,rgba(15,16,19,.36) 100%)}.hero-shade::after{opacity:.015}.motion-ready{translate:0 12px;transition-duration:.65s}.motion-mask{clip-path:inset(0 0 65% 0)}#work .case-stage.motion-stage{translate:0 14px;clip-path:inset(0 0 18% 0);transition-duration:.75s}#work .motion-stage .website-screen{scale:1.025;translate:0 8px;transition-duration:.8s}#work .motion-stage .mini-device,#work .motion-stage .reservation-ticket,#work .motion-stage .specialist-note,#work .motion-stage .quote-note{translate:0 12px;scale:1;transition-duration:.65s;transition-delay:.1s}.industry-track{font-size:25px}.industry-marquee{margin:30px 0 24px;padding:20px 0}}
@media(prefers-reduced-motion:reduce){.motion-ready,#work .case-stage.motion-stage{opacity:1!important;translate:none!important;scale:1!important;clip-path:none!important}#work .motion-stage *{opacity:1!important;translate:none!important;scale:1!important}.hero-motion *{animation:none!important}.industry-track{animation:none!important;transform:none!important}.steps>div::before{scale:1 1}.industry-marquee button{display:none}}
@media(hover:hover) and (pointer:fine){.service-list details:hover p{color:#4b493f}}
/* Approved contrast correction for small text over the charcoal falloff. */
.hero .preview-link,.hero .preview-link small,.hero .hero-bottom,.hero .hero-bottom a{color:#f0ece4}.hero .preview-link,.hero .hero-bottom{border-color:#f0ece445}
/* Keep the static atmosphere in its own clipped paint layer above the video. */
.hero{isolation:isolate}
.hero>.hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:1;transition:none!important;animation:none!important;transform:none;filter:none;backdrop-filter:none;mix-blend-mode:normal;will-change:auto;background-attachment:scroll}
.hero-shade i,.hero-shade::after{background-attachment:scroll;pointer-events:none}
/* Primary actions: charcoal surface, restrained champagne edge and hover reflection. */
:is(.hero,.mid-cta,.offer,.sticky-cta) .button,#project-form>.button{
 background:radial-gradient(ellipse at 12% 0%,#cbb78e22,transparent 65%),linear-gradient(135deg,#23251c,#141711 78%);
 color:#f5f0e5;border-color:#cbb78eaa;
 box-shadow:0 0 0 1px #ecd3a00b,0 8px 24px #b58c421a,inset 0 1px 0 #ffe4b329;
 transition:border-color .35s,box-shadow .35s,translate .35s var(--motion-ease);
 transform:none
}
:is(.hero,.mid-cta,.offer,.sticky-cta) .button span,#project-form>.button span{color:#ddc79d}
:is(.hero,.mid-cta,.offer,.sticky-cta) .button::before,#project-form>.button::before{inset:0 auto 0 -35%;width:30%;background:linear-gradient(100deg,transparent,#ffe1a333,transparent);transform:skewX(-18deg);translate:0 0;transition:translate .85s var(--motion-ease)}
.hero .actions>.text-link{border-bottom-color:#6e6048;font-weight:500}.hero .actions>.text-link span{color:#665133}.hero .preview-link>span{color:#e2cc9e}
:is(.hero,.mid-cta,.offer,.sticky-cta) .button:focus-visible,#project-form>.button:focus-visible{outline:2px solid #d5b67c;outline-offset:5px}
@media(hover:hover) and (pointer:fine){
 :is(.hero,.mid-cta,.offer,.sticky-cta) .button:hover,#project-form>.button:hover{background:radial-gradient(ellipse at 12% 0%,#cbb78e2b,transparent 65%),linear-gradient(135deg,#292c21,#171a13 78%);border-color:#e1c490;box-shadow:0 0 0 1px #ecd3a014,0 9px 28px #b58c4226,inset 0 1px 0 #ffe4b340;translate:0 -2px;transform:none}
 :is(.hero,.mid-cta,.offer,.sticky-cta) .button:hover::before,#project-form>.button:hover::before{translate:470% 0}
 .hero .actions>.text-link:hover{color:#574328;border-color:#aa8750}
}
@media(prefers-reduced-motion:reduce){:is(.hero,.mid-cta,.offer,.sticky-cta) .button:hover,#project-form>.button:hover{translate:none}:is(.hero,.mid-cta,.offer,.sticky-cta) .button::before,#project-form>.button::before{display:none}}
/* Champagne accent for the hero WhatsApp action, secondary to Start Project. */
.hero .actions>.whatsapp{position:relative;isolation:isolate;overflow:hidden;min-height:48px;padding:12px 15px;border:1px solid #b99a626b;background:linear-gradient(120deg,#f4dda61a,transparent 70%);box-shadow:inset 0 1px 0 #f8e8bf29;color:#352d20;transition:border-color .35s,box-shadow .35s,background .35s}
.hero .actions>.whatsapp span{color:#785724;transition:translate .35s var(--motion-ease),color .35s}
.hero .actions>.whatsapp::before{content:'';position:absolute;inset:0 auto 0 -40%;width:30%;z-index:-1;background:linear-gradient(100deg,transparent,#f8dc9a45,transparent);transform:skewX(-18deg);translate:0 0;transition:translate .8s var(--motion-ease)}
@media(hover:hover) and (pointer:fine){.hero .actions>.whatsapp:hover{color:#352d20;border-color:#b28b49;box-shadow:inset 0 1px 0 #ffe9b94d,0 4px 16px #9c783421;background:linear-gradient(120deg,#f4dda630,transparent 70%)}.hero .actions>.whatsapp:hover::before{translate:500% 0}.hero .actions>.whatsapp:hover span{translate:3px -2px;color:#654515}}
@media(max-width:600px){.hero .actions>.whatsapp{padding:12px 10px;gap:12px}}
@media(prefers-reduced-motion:reduce){.hero .actions>.whatsapp::before{display:none}.hero .actions>.whatsapp:hover span{translate:none}}

/* Single static gradient surface: no filtered grain or extra compositing layers. */
.hero-shade::before,.hero-shade::after{content:none;display:none}
/* Hero WhatsApp button only: visible champagne resting state. */
.hero .actions>.whatsapp{color:#dfc393;border-color:#cbb78e99;background:linear-gradient(125deg,#29291fe8,#171b17de);box-shadow:inset 0 1px 0 #f8e2b32b,0 3px 14px #b58c421a}
.hero .actions>.whatsapp span{color:#dfc393}
.hero .actions>.whatsapp::before{background:linear-gradient(105deg,transparent,#ffe19b38,transparent);pointer-events:none}
@media(hover:hover) and (pointer:fine){.hero .actions>.whatsapp:hover{color:#eed7ae;border-color:#ddc393;background:linear-gradient(125deg,#333024ed,#1b1e18e8);box-shadow:inset 0 1px 0 #f8e2b340,0 4px 18px #b58c4226}.hero .actions>.whatsapp:hover span{color:#eed7ae;translate:3px 0}}
/* Touch devices: occasional restrained reflection instead of hover. */
@media(hover:none) and (prefers-reduced-motion:no-preference), (max-width:600px) and (prefers-reduced-motion:no-preference){
 .hero .actions>.whatsapp::before{animation:whatsapp-touch-shine 9s var(--motion-ease) 2s infinite;transition:none}
}
@keyframes whatsapp-touch-shine{
 0%,5%{translate:0 0;opacity:0}
 7%{opacity:.6}
 17%{translate:500% 0;opacity:.6}
 19%,100%{translate:500% 0;opacity:0}
}