/* Motion measured on The Class, 18 October 2026. */
.wordmark{display:inline-flex;gap:0;letter-spacing:0;flex-shrink:0}.brand-logo{width:152px;height:auto;display:block;filter:brightness(0) saturate(100%) invert(25%)}
.class-home .header:not(.is-scrolled) .brand-logo{filter:none}.class-site footer{background:#35312d;color:#f0e5cd}.class-site footer .brand-logo{filter:none;width:171px}.class-site .footer-bottom{border-color:#f0e5cd30}.class-site footer button{color:inherit}
.class-site .header,.class-home .header,.class-home .header.is-scrolled{position:fixed;transition:transform 300ms cubic-bezier(0,0,.2,1),background-color 150ms,box-shadow 150ms;backdrop-filter:none}
.class-site .header.is-scrolled{background:#f8f7f2d9;backdrop-filter:blur(6px)}.class-site .header.header-hidden{transform:translateY(-100%);transition-timing-function:cubic-bezier(.4,0,1,1)}
.class-inner main{padding-top:84px}.class-site .menu-toggle{display:flex;width:28px;min-height:36px;flex-direction:column;justify-content:center;gap:5px;margin:0;padding:5px;flex-shrink:0}.menu-toggle span{display:block;height:1px;width:18px;background:currentColor}
.class-site .header-actions{gap:22px}.class-site .header nav{display:flex;position:static;transform:none;opacity:1;visibility:visible;background:transparent;padding:0;box-shadow:none}
.header nav a{transition:opacity 300ms}.header nav a:hover{opacity:.7}.navigation-open .header nav a{opacity:0;pointer-events:none}.navigation-open .header nav a:nth-child(1){transition-delay:200ms}.navigation-open .header nav a:nth-child(2){transition-delay:150ms}.navigation-open .header nav a:nth-child(3){transition-delay:100ms}.navigation-open .header nav a:nth-child(4){transition-delay:50ms}.navigation-open .menu-toggle{opacity:0;pointer-events:none}
body.navigation-open{overflow:hidden}
dialog#navigation-dialog{position:fixed;inset:0;margin:0;padding:0;border:0;width:100%;max-width:none;height:100dvh;max-height:none;overflow:hidden;background:transparent;border-radius:0;box-shadow:none;color:#50483e;outline:0;transform:none}
#navigation-dialog::backdrop{background:#0000;backdrop-filter:none;transition:background 350ms cubic-bezier(.4,0,.2,1)}#navigation-dialog.is-open::backdrop{background:#0006}
.drawer-panel{position:absolute;right:0;top:0;width:320px;height:100%;overflow:auto;overscroll-behavior:contain;background:#fcfcf9;padding:24px 25px;transform:translateX(100%);transition:transform 350ms cubic-bezier(.4,0,.2,1)}#navigation-dialog.is-open .drawer-panel{transform:translateX(0)}
.drawer-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:48px}.drawer-heading .brand-logo{width:136px}.drawer-close{background:none;border:0;padding:0;width:38px;height:48px;color:inherit;font:300 32px var(--sans);cursor:pointer;transition:opacity 150ms}.drawer-close:hover{opacity:.6}
.drawer-panel nav section{margin-bottom:34px}.drawer-panel nav p{font:500 11px var(--sans);text-transform:uppercase;letter-spacing:1.1px;margin-bottom:21px;color:#8a857a}.drawer-panel nav a{display:flex;justify-content:space-between;align-items:center;gap:10px;font:400 24px/1.25 var(--serif);margin-bottom:18px;transition:color 150ms}.drawer-panel nav a:hover{color:#8a857a}.drawer-panel nav a span{font:400 8px var(--sans);background:#35312d;color:#f8f7f2;border-radius:20px;padding:6px 8px;white-space:nowrap}.drawer-signature{font:400 11px var(--sans);letter-spacing:1px;color:#8a857a;margin-top:45px}
.motion-reveal{opacity:0;transform:translate3d(var(--reveal-x,0px),var(--reveal-y,60px),0);transition:opacity 600ms ease-out,transform 600ms ease-out;will-change:opacity,transform}.motion-reveal.motion-visible{opacity:1;transform:none;will-change:auto}
.diptych{overflow:hidden}.motion-pillars>article{opacity:0;transform:translateY(48px);transition:opacity 500ms cubic-bezier(.34,1.56,.64,1),transform 500ms cubic-bezier(.34,1.56,.64,1)}.motion-pillars.motion-visible>article{opacity:1;transform:none}.motion-pillars.motion-visible>article:nth-child(2){transition-delay:150ms}.motion-pillars.motion-visible>article:nth-child(3){transition-delay:300ms}
.class-site .pill,.class-site .button{transition:background-color 150ms,color 150ms,opacity 150ms}.class-site .pill:hover,.class-site .button:hover{transform:none}.class-site .pill>span{transition:transform 150ms}.class-site .pill:hover>span{transform:translateX(2px)}
/* Fluid constellation: layout owns the space, transforms only add gentle motion. */
.discovery{height:auto;max-width:480px;margin:auto;display:flex;flex-direction:column;gap:20px;padding:36px 24px 52px;overflow:visible;isolation:isolate}
.discovery-center{position:relative;inset:auto;transform:none;align-self:center;min-width:0;width:100%;margin:20px 0;text-align:center;z-index:2}
.discovery-center .overline{font-size:11px;letter-spacing:1.5px;margin-bottom:17px}
.discovery-center>a{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:18px;font-size:11px}
#intention-cycle{display:inline-flex;align-items:baseline;gap:10px;max-width:100%;border:0;border-bottom:1px solid #8a857a;background:none;color:#625d53;padding:0 2px 9px;cursor:pointer;transition:border-color 200ms;font:400 32px/1.15 var(--serif)}
#intention-cycle:hover{border-color:#35312d}.intention-label{display:inline-block;min-width:0}.cycle-chevron{font:300 16px var(--sans);flex-shrink:0;transition:transform 200ms}#intention-cycle:hover .cycle-chevron{transform:translateY(1px)}
.motion-toggle{display:inline-flex;align-items:center;gap:5px;padding:8px;margin-top:10px;min-height:36px;background:none;border:0;color:#625d53;font:400 11px var(--sans);cursor:pointer}
.motion-slot{display:block;position:relative;inset:auto;transform:none;width:calc(100% - 20px);max-width:350px;min-width:0;align-self:flex-start;z-index:1}
.motion-slot[data-slot="1"],.motion-slot[data-slot="3"],.motion-slot[data-slot="5"]{align-self:flex-end}
.motion-sway{animation:rise-sway 12s ease-in-out infinite;animation-play-state:paused;will-change:transform}
.collage-active .motion-sway{animation-play-state:running}.motion-paused .motion-sway{animation-play-state:paused}
.motion-slot .floating{position:relative;inset:auto;width:100%;max-width:none;height:auto;min-height:106px;display:flex;align-items:center;gap:12px;padding:10px;background:#eae8db;border:1px solid #f8f7f2;border-radius:7px;box-shadow:0 3px 14px #50483e09;overflow:visible;transition:transform 200ms cubic-bezier(.4,0,.2,1),box-shadow 200ms}
.motion-slot .floating:hover{transform:translateY(-3px);box-shadow:0 8px 22px #50483e14}.motion-slot .floating:after{display:none}
.motion-slot .floating img{width:82px;height:82px;object-fit:cover;border-radius:4px;flex-shrink:0}
.motion-slot .floating>span{position:static;color:#50483e;font:400 14px/1.45 var(--sans);display:flex;flex:1;min-width:0;flex-direction:row-reverse;align-items:center;gap:8px;overflow-wrap:anywhere}
.motion-slot .floating b{font:300 18px/1 var(--sans);flex-shrink:0}
.collage-visible .motion-slot{animation:rise-card-in 550ms cubic-bezier(.4,0,.2,1) both}
@keyframes rise-sway{0%,100%{transform:translate(0) rotate(0)}25%{transform:translate(-3px,-1px) rotate(-.35deg)}50%{transform:translateY(-2px) rotate(.2deg)}75%{transform:translate(3px,1px) rotate(.35deg)}}
@keyframes rise-card-in{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(min-width:700px){
 .discovery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:auto minmax(190px,auto) auto;align-items:center;gap:28px clamp(12px,2vw,28px);max-width:1280px;padding:58px clamp(24px,3vw,48px) 68px}
 .discovery:before{content:'';position:absolute;left:50%;top:50%;width:65%;height:72%;transform:translate(-50%,-50%);border:1px solid #d5d1c15c;border-radius:50%;pointer-events:none;z-index:-1}
 .discovery-center{grid-area:2 / 3 / 3 / 5;margin:0;width:100%;align-self:center}
 #intention-cycle{font-size:clamp(25px,2.7vw,36px)}
 .motion-slot,.motion-slot[data-slot]{width:100%;max-width:none;align-self:center}
 .motion-slot[data-slot="0"]{grid-area:1 / 2 / 2 / 4}
 .motion-slot[data-slot="1"]{grid-area:1 / 4 / 2 / 6}
 .motion-slot[data-slot="2"]{grid-area:2 / 5 / 3 / 7}
 .motion-slot[data-slot="3"]{grid-area:2 / 1 / 3 / 3}
 .motion-slot[data-slot="4"]{grid-area:3 / 2 / 4 / 4}
 .motion-slot[data-slot="5"]{grid-area:3 / 4 / 4 / 6}
 .motion-slot .floating{min-height:120px}
 .motion-slot .floating img{width:clamp(76px,8vw,100px);height:clamp(76px,8vw,100px)}
}
@media(min-width:700px) and (max-width:999px){
 .discovery{gap:24px 18px;padding:42px 28px 52px;grid-template-rows:auto minmax(192px,auto) auto}
 .motion-slot .floating{flex-direction:column;align-items:stretch;gap:10px;padding:10px;min-height:196px}
 .motion-slot .floating img{width:100%;height:112px;object-position:center 45%}
 .motion-slot .floating>span{min-height:48px;font-size:14px;justify-content:space-between}
 .discovery-center .overline{font-size:10px;letter-spacing:1px}
 .discovery-center>a{gap:9px;font-size:10px}
}
@media(max-width:350px){.discovery{padding-left:18px;padding-right:18px;gap:18px}.motion-slot{width:calc(100% - 12px)}.motion-slot .floating{gap:10px}.motion-slot .floating img{width:68px;height:74px}.motion-slot .floating>span{font-size:13px}}
@media(max-width:1100px){.class-site .header nav{gap:15px}.class-site .header nav a{font-size:9px}.class-site .header-actions{margin-left:20px;gap:15px}.brand-logo{width:132px}}
@media(max-width:900px){.class-site .header nav{display:none}.class-site .header-actions{margin-left:auto;gap:17px}}
@media(max-width:767px){.brand-logo{width:135px}.class-inner main{padding-top:73px}.drawer-panel{padding:22px 25px}.class-site .header-contact{font-size:10px}}
@media(max-width:639px){.drawer-panel{width:100%}}
@media(prefers-reduced-motion:reduce){.motion-reveal,.motion-pillars>article{opacity:1!important;transform:none!important;transition:none!important}.motion-sway,.motion-slot{animation:none!important}.motion-toggle{display:none}.drawer-panel,#navigation-dialog::backdrop,.class-site .header{transition:none!important}}

/* Studio portrait, with the same quiet full-bleed framing as the reference. */
.class-home .header:not(.is-scrolled){color:#35312d}
.class-home .header:not(.is-scrolled) .brand-logo{filter:brightness(0) saturate(100%) invert(20%)}
.class-hero{height:56.25vw;min-height:560px;max-height:100svh;background:#c5b9a4}
.class-hero>img{object-position:center top;filter:none}
.class-hero:after{background:linear-gradient(180deg,transparent 65%,#f8f7f230 80%,#f8f7f2 100%)}
.hero-center{padding:60px 20px 30px}
.class-hero h1{text-shadow:0 2px 20px #50483e22;font-size:clamp(55px,5.6vw,90px)}
@media(max-width:767px){
 .class-hero{height:90svh;min-height:620px;max-height:850px}
 .class-hero>img{object-position:64% center}
 .hero-center{padding:180px 16px 0}
 .class-hero h1{font-size:clamp(40px,11.5vw,61px)}
 .class-hero:after{background:linear-gradient(180deg,transparent 42%,#50483e12 65%,#f8f7f2 100%)}
}