
/* WEBIN SPHERE — REVISION 08 / ART DIRECTION + KINETIC DETAIL */
:root{
 --r8-ink:#20262a;--r8-paper:#f0ece4;--r8-rust:#d66e4b;--r8-cobalt:#354f8b;
 --r8-plum:#75516f;--r8-citrus:#d9c65d;--r8-sky:#a9c4d0;--r8-moss:#75836b;
}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
::selection{background:var(--r8-rust);color:#fff}
img{will-change:transform;backface-visibility:hidden}
a,button{ -webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--r8-rust);outline-offset:5px}

/* A more intentional image language */
.project-image,.art-photo,.art-photo-secondary,.ribbon-photo,.approach-image,
.services-hero-photo,.services-float-photo,.services-intro-image,.services-feature-image,
.services-bottom-image,.hero-photo,.dish,.project-card,.visit-visual,.manifesto-visual{
 overflow:hidden;isolation:isolate
}
.project-image img,.art-photo img,.art-photo-secondary img,.ribbon-photo img,
.approach-image img,.services-hero-photo img,.services-float-photo img,
.services-intro-image img,.services-feature-image img,.services-bottom-image img,
.hero-photo img,.dish img,.project-card img,.visit-visual img,.manifesto-visual img{
 width:100%;height:100%;object-fit:cover;transition:transform 1.05s cubic-bezier(.2,.75,.2,1),filter .7s;
}
.project-image:hover img,.art-photo:hover img,.art-photo-secondary:hover img,
.ribbon-photo:hover img,.approach-image:hover img,.services-hero-photo:hover img,
.services-float-photo:hover img,.services-intro-image:hover img,.services-feature-image:hover img,
.services-bottom-image:hover img,.hero-photo:hover img,.dish:hover img,.project-card:hover img,
.visit-visual:hover img,.manifesto-visual:hover img{
 transform:scale(1.075) translate3d(var(--r8x,0),var(--r8y,0),0);filter:saturate(1.12) contrast(1.04)
}
.project-image:after,.art-photo:after,.services-hero-photo:after,.manifesto-visual:after{
 content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
 background:linear-gradient(135deg,#fff2 0%,transparent 42%,#10171435 100%);mix-blend-mode:soft-light
}

/* Global scroll choreography */
body.r8-motion .r8-reveal{opacity:0;transform:translateY(38px) scale(.985);filter:blur(3px);transition:opacity .85s ease,transform .95s cubic-bezier(.16,.75,.25,1),filter .85s}
body.r8-motion .r8-reveal.r8-in{opacity:1;transform:none;filter:none}
.r8-stagger>*{transition-delay:var(--r8-delay,0ms)}
.scroll-progress,.page-progress{height:3px!important;background:var(--r8-rust)!important;box-shadow:0 0 14px #d66e4b77}
.ticker,.services-marquee,.marquee{position:relative}
.ticker:after,.services-marquee:after,.marquee:after{content:"";position:absolute;inset:0 auto 0 -35%;width:20%;background:linear-gradient(90deg,transparent,#fff3,transparent);transform:skewX(-20deg);animation:r8-glint 7s ease-in-out infinite;pointer-events:none}
@keyframes r8-glint{0%,35%{left:-35%}70%,100%{left:120%}}
@keyframes r8-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-13px) rotate(1deg)}}
@keyframes r8-marquee{to{transform:translateX(-50%)}}

/* Homepage: open with a more cinematic, layered frame */
.studio-home .opening{position:relative;isolation:isolate}
.studio-home .opening:before{content:"";position:absolute;z-index:-1;right:4.5%;top:13%;width:37%;height:68%;background:#c4b8a4;transform:rotate(3.2deg);opacity:.55}
.studio-home .opening-main h1{animation:r8-headline 1.05s cubic-bezier(.16,.8,.2,1) both;text-wrap:balance}
@keyframes r8-headline{from{opacity:0;transform:translateY(42px);clip-path:inset(0 0 45% 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
.studio-home .opening-art{perspective:1100px}
.studio-home .art-photo{box-shadow:18px 20px 0 var(--r8-cobalt);transform:rotate(2.4deg);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.studio-home .art-photo:hover{transform:rotate(0) translateY(-7px)}
.studio-home .art-photo-secondary{box-shadow:10px 11px 0 var(--r8-rust);transform:rotate(-5deg);animation:r8-float 7s ease-in-out infinite}
.studio-home .art-label{background:var(--r8-citrus)!important;color:var(--r8-ink)!important;box-shadow:7px 7px 0 var(--r8-plum)}
.studio-home .art-caption{background:var(--r8-plum);color:#fff}
.studio-home .hero-bottom p{max-width:390px}
.studio-home .ticker{background:var(--r8-cobalt)!important;color:#f7f0e5!important}
.studio-home .manifesto{position:relative;overflow:hidden;background:#d9d1c6}
.studio-home .manifesto-content{position:relative}
.studio-home .manifesto-content h2{position:relative;z-index:2;max-width:900px;font-size:clamp(54px,8.4vw,126px);line-height:.89;letter-spacing:-.085em}
.studio-home .manifesto-content h2 span{color:var(--r8-rust);font-family:var(--serif);font-style:italic;letter-spacing:-.07em}
.studio-home .manifesto-visual{position:relative;width:min(38vw,450px);height:290px;margin:35px 0 0 auto;transform:rotate(-2deg);box-shadow:15px 15px 0 var(--r8-plum)}
.studio-home .manifesto-visual span{position:absolute;right:0;bottom:0;background:var(--r8-citrus);padding:14px 18px;font:10px var(--mono);letter-spacing:.1em;line-height:1.5}
.studio-home .manifesto-aside{position:relative;z-index:3}
.studio-home .manifesto-aside .asterisk{color:var(--r8-rust)}
.studio-home .project{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.studio-home .project:hover{transform:translateY(-8px)}
.studio-home .project-image{box-shadow:12px 13px 0 var(--r8-sky)}
.studio-home .project-forme .project-image{box-shadow:12px 13px 0 var(--r8-rust)}
.studio-home .project-north .project-image{box-shadow:12px 13px 0 var(--r8-moss)}
.studio-home .image-sticker{background:var(--r8-citrus)!important;color:var(--r8-ink)!important;transform:rotate(-7deg);transition:transform .4s}
.studio-home .project:hover .image-sticker{transform:rotate(0) scale(1.06)}
.studio-home .services-section{background:#e3d9d0}
.studio-home .service-tile{box-shadow:7px 8px 0 #20262a22}
.studio-home .service-tile:hover{box-shadow:12px 15px 0 #20262a30}
.studio-home .studio-ribbon{background:var(--r8-cobalt)!important;color:#f7f0e5}
.studio-home .ribbon-note strong em{color:var(--r8-citrus)}
.studio-home .approach{background:#b9c8c1}
.studio-home .approach-image{box-shadow:16px 17px 0 var(--r8-rust)}
.studio-home .closing{background:var(--r8-plum)!important;color:#f6eee5!important}
.studio-home .closing h2 em{color:var(--r8-citrus)!important}

/* Navigation and image-rich dropdown */
.sitehead,.sitehead a{transition:color .25s,background .25s}
.mainnav a{position:relative}
.mainnav a:after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:currentColor;transition:right .3s}
.mainnav a:hover:after{right:0}
.mega-item{overflow:hidden}
.mega-item img{filter:saturate(.8);transition:transform .8s,filter .6s}
.mega-item:hover img{transform:scale(1.08);filter:saturate(1.2)}
.head-cta,.services-hero-cta,.services-bottom-link,.closing-link{transition:transform .35s,box-shadow .35s,background .35s}
.head-cta:hover{transform:translateY(-3px);box-shadow:0 8px 0 #d66e4b}

/* Services and all supporting pages: stronger visual rhythm */
.services-page .services-hero{background:#d7d0c5}
.services-page .services-hero:before{background:#a9c4d0;opacity:.65;filter:blur(1px)}
.services-page .services-hero-photo{box-shadow:22px 24px 0 var(--r8-cobalt);transform:rotate(1.2deg)}
.services-page .services-stamp{background:var(--r8-rust);box-shadow:8px 8px 0 var(--r8-plum)}
.services-page .services-marquee{background:var(--r8-cobalt)}
.services-page .services-intro-image{box-shadow:18px 18px 0 var(--r8-rust)}
.services-page .services-offer{background:#242b32}
.services-page .services-image-grid .service-item{outline:1px solid #ffffff30;outline-offset:-10px}
.services-page .services-image-grid .service-item:before{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(130deg,#fff2,transparent 32%);opacity:0;transition:opacity .5s;pointer-events:none}
.services-page .services-image-grid .service-item:hover:before{opacity:1}
.services-page .services-feature{background:#b8c7c4}
.services-page .services-feature-image{box-shadow:18px 18px 0 var(--r8-plum)}
.services-page .services-bottom{background:#d3a08c}
.services-page .services-bottom-image{box-shadow:15px 15px 0 var(--r8-cobalt)}

/* Supporting pages get a designed masthead, tactile cards and more image presence */
body:not(.studio-home):not(.services-page) main{position:relative}
body:not(.studio-home):not(.services-page) main section{position:relative}
body:not(.studio-home):not(.services-page) main section img{transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .7s}
body:not(.studio-home):not(.services-page) main section a:hover{letter-spacing:.025em}
body:not(.studio-home):not(.services-page) [class*="card"],body:not(.studio-home):not(.services-page) [class*="item"]{transition:transform .4s,box-shadow .4s}
body:not(.studio-home):not(.services-page) [class*="card"]:hover,body:not(.studio-home):not(.services-page) [class*="item"]:hover{transform:translateY(-5px)}
/* All image panels carry a little depth */
.services-hero-visual,.services-intro-image,.services-feature-image,.services-bottom-image,
.approach-image,.ribbon-photo,.project-image,.art-photo,.art-photo-secondary,.hero-photo,.dish,.project-card{transform-style:preserve-3d}
.services-hero-visual:hover .services-stamp{animation:r8-float 3s ease-in-out infinite}
.services-hero-visual:hover .services-float-photo{transform:rotate(-3deg) translateY(-8px);transition:transform .5s}

/* FORME — remove the acid green identity; give it a warmer, bolder training-club palette */
.forme-page,:root{--r8-forme-orange:#ed7855;--r8-forme-blue:#344d83;--r8-forme-lilac:#c6b7dc;--r8-forme-paper:#f3eee6}
body.forme-demo .hero{background:#ed7855!important;color:#20252c!important}
body.forme-demo .hero h1 span{-webkit-text-stroke:2px #344d83!important;color:transparent!important}
body.forme-demo .hero h1{text-shadow:5px 5px 0 #f3eee6!important}
body.forme-demo .hero-photo{box-shadow:18px 18px 0 #344d83!important;border:8px solid #f3eee6}
body.forme-demo .marquee{background:#344d83!important;color:#f3eee6!important}
body.forme-demo .manifesto{background:#c6b7dc!important;color:#20252c!important}
body.forme-demo .manifesto h2 em{color:#a34f43}
body.forme-demo .classes{background:#f3eee6!important;color:#20252c!important}
body.forme-demo .class-row{border-color:#344d83!important}
body.forme-demo .class-row:hover{background:#ed7855!important}
body.forme-demo .manifesto-band{background:#344d83!important;color:#f3eee6!important}
body.forme-demo .manifesto-band h2{color:#ed7855!important}
body.forme-demo .schedule{background:#c6b7dc!important;color:#20252c!important}
body.forme-demo .slot{background:#f3eee6!important;box-shadow:8px 8px 0 #344d83!important}
body.forme-demo footer{background:#20252c!important;color:#f3eee6!important}
body.forme-demo .join,body.forme-demo .hero-button{background:#344d83!important;color:#f3eee6!important}
body.forme-demo .hero-photo:hover img{filter:saturate(1.2) contrast(1.08)}

/* Sunday Table: food-led cinematic warmth; Northline: architectural restraint */
body:has(.dish) .dish:hover{box-shadow:0 20px 45px #241a1730}
body:has(.dish) .dish img{transition:transform 1s,filter .6s}
body:has(.dish) .dish:hover img{filter:saturate(1.16) contrast(1.06)}
@media(max-width:760px){
 .studio-home .manifesto-visual{width:82%;height:220px;margin:25px 0 0 auto}
 .studio-home .opening:before{right:3%;top:32%;width:54%;height:42%}
 .studio-home .art-photo-secondary{animation:none}
 .services-page .services-hero-photo{transform:none}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
 body.r8-motion .r8-reveal{opacity:1;transform:none;filter:none;transition:none}
}
