/* Approved Otium evening palette. Original page order and booking destinations retained. */
:root{--ink:#f2eee5;--muted:#c2c2b5;--bronze:#c9af77;--line:#ffffff26;--dark-line:#ffffff30;--cacao:#cdb994;--olive-deep:#1b2319}
body{background:#141a12;color:var(--ink)}
.site-header,.site-header.is-scrolled{background:#11150ff7;border-bottom:1px solid #b3975e38;box-shadow:none}
.site-header{gap:1.5rem}.desktop-nav{gap:1.4rem}.desktop-nav a{font-size:.81rem}
.identity{position:relative;display:block;width:200px;aspect-ratio:2048/738}
.identity img,.site-header .identity img,.site-footer .identity img{width:100%;height:100%;clip-path:polygon(0 0,100% 0,100% 62%,36% 62%,36% 100%,0 100%)}
.identity>span{position:absolute;top:66%;left:36%;width:52%;text-align:center;font:400 8px/1.4 var(--sans);letter-spacing:.3em;color:#e8dbc0}
.site-header .brandmark,.site-footer .brandmark{flex-shrink:0}
.button-dark,.button-light{background:transparent;color:#f5e9cd;border:1px solid #c6aa6e;border-radius:2px}
.button-dark:hover,.button-light:hover{background:#c6aa6e;color:#11150f}
.nav-book{border-radius:30px}.mobile-menu nav{background:#171e14}.mobile-booking{background:#11150f;color:#f2eee5}
.skip{background:#171e14;color:#faf7f2}
.massage-discovery,.home-page .outreach,.personal-welcome,.studio-preview,.booking-panel,.travel-rates article,.privacy-summary{background:#1b2319}
.home-page .outreach{background:#141a12}.outreach-home,.inner-page .treatment#signature{background:#20291c}
.outreach-sport{background:#302b22;border-color:#b3975e45}
.trust-strip{background:#151b12}.site-footer{background:#10150e}
.rates,.booking-note,.team-member,.contact-options article{background:transparent}
.massage-choices label:hover:not(:has(input:checked)){background:#2c3726}
.massage-choices label:has(input:checked){background:#35422c}
.testimonial blockquote{color:#ece6d9}
.otium-reviews{background:#181f15}.home-page .otium-booking{background:#11170f}
.home-page .home-links{background:#1b2319}
/* A warm ivory pause preserves contrast and the studio's original warmth. */
.studio-visit{background:#f2ede3;color:#293124;--muted:#595c51;--line:#ccc4b4;--cacao:#6a5143;--bronze:#796136}
.home-page .studio-visit h2 em{color:#6a5143}
.analytics-consent{background:#faf7f2;color:#2d3028;--muted:#66665c;--ink:#2d3028;--line:#d8cfc2;--bronze:#806a43}
.analytics-consent a{color:#3b452f}.analytics-consent button{color:#faf7f2}
.otium-arrival{background:#10130d;min-height:690px;color:#faf7f2}
.arrival-photo,.motion-ready .arrival-photo{inset:0;width:100%;border-radius:0;transform:none!important;opacity:1}
.arrival-photo img,.motion-ready .arrival-photo img{width:100%;height:100%;left:0;right:0;object-fit:cover;object-position:center;transform:none!important}
.arrival-shade{background:linear-gradient(90deg,#0e130b80,transparent 70%),linear-gradient(0deg,#10130d99,transparent 25%)}
.arrival-copy{padding:4rem 0 6.5rem 6%;width:48%;max-width:760px}
.arrival-copy h1{font-size:clamp(4.5rem,7.5vw,8rem);line-height:.94;margin-bottom:1.7rem}
.arrival-copy .eyebrow{font-size:.73rem;letter-spacing:.19em;max-width:none;margin-bottom:1.8rem}
.arrival-intro{font-size:.95rem;max-width:33ch}.arrival-price{font-size:.8rem}.arrival-google-rating{font-size:.78rem;color:#eee6d5}
.arrival-foot{left:6%;right:6%;font-size:.7rem}.arrival-foot>a{margin-right:115px;font-size:.8rem}
.cinema-replay{position:absolute;z-index:5;bottom:1.5rem;right:5%;background:#11150fbb;border:1px solid #b3975e99;border-radius:25px;padding:.7rem 1rem;min-height:44px;color:#eee2c8;font:400 .75rem var(--sans);cursor:pointer}
@media(max-width:1000px){.arrival-copy{width:57%}.arrival-photo img{object-position:60% center}.arrival-shade{background:linear-gradient(90deg,#10130df0,#10130d70 50%,transparent),linear-gradient(0deg,#10130d99,transparent 35%)}}
@media(max-width:760px){.site-header{min-height:76px}.site-header .identity{width:160px}.identity>span{font-size:7px}.otium-arrival{min-height:790px}.arrival-photo{height:400px;inset:0 0 auto}.arrival-photo img{object-position:88% center}.arrival-shade{background:linear-gradient(0deg,#10130d 43%,#10130d00 78%)}.arrival-copy{width:100%;padding:320px 7% 6rem}.arrival-copy h1{font-size:clamp(3.9rem,13vw,5.8rem);margin-bottom:1.4rem}.arrival-copy .eyebrow{font-size:.65rem;letter-spacing:.12em;margin-bottom:1.1rem}.arrival-intro{font-size:.9rem}.arrival-foot{left:7%;right:7%}.arrival-foot>a{margin-right:110px;font-size:.73rem}.arrival-foot>a>span{display:none}.cinema-replay{right:7%;bottom:1rem}.home-page .studio-visit{padding-inline:7%}.cinema-identity>span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.cinema-intro.is-playing{display:none}.cinema-replay{display:none}*,*::before,*::after{animation:none!important}}
@media(max-width:760px){.arrival-photo::after{content:'';position:absolute;inset:55% 0 0;background:linear-gradient(0deg,#10130d,transparent);pointer-events:none}.arrival-photo img,.motion-ready .arrival-photo img{object-position:right center}.arrival-shade{background:none}.arrival-copy{padding-top:350px}}
.visit{background:#20291c}
@media(max-width:650px){.inner-page .site-header{gap:.7rem}.inner-page .site-header .identity{width:140px}.inner-page .nav-book{padding:.6rem .8rem;font-size:.75rem}}
/* Exact original symbol and letterforms, separated for the cinematic reveal. */
.identity-colour{width:190px;aspect-ratio:1575/445;display:block;position:relative}
.identity-colour .brand-art{width:100%;height:auto;display:block;overflow:visible}
.identity-colour>.brand-since{top:73%;left:34%;width:65%;font-size:8px;letter-spacing:.35em;color:#d8c49c}
.brand-symbol{filter:drop-shadow(0 0 1px #b3975e55)}
.site-header .identity-colour{width:175px}.site-footer .identity-colour{width:200px}
.hero-brand-line{font:400 1.35rem/1 var(--serif);letter-spacing:.2em;color:#f5eee1;margin:0 0 1.2rem}
.hero-brand-line span{font:400 .65rem/1 var(--sans);letter-spacing:.16em;color:#d1b780}
.arrival-copy{padding-top:3rem}.arrival-copy h1{font-size:clamp(4.4rem,7vw,7.5rem)}
.cinema-intro{position:absolute;inset:0;z-index:4;background:radial-gradient(ellipse at 50% 45%,#272b1b 0%,#11150e 48%,#090c08 100%);display:none;place-items:center;pointer-events:none}
.cinema-armed .cinema-intro,.cinema-intro.is-playing{display:grid}
.cinema-title{width:100%;display:flex;flex-direction:column;align-items:center;margin-top:-2rem}
.cinema-title .cinema-identity{width:min(680px,79vw)}
.cinema-identity>.brand-since{font-size:clamp(10px,1.1vw,15px);letter-spacing:.45em}
.cinema-caption{font:400 .7rem var(--sans);letter-spacing:.4em;color:#bba67a;margin:3rem auto 0;text-align:center}
.cinema-armed .cinema-intro:not(.is-playing) .cinema-title{opacity:0}
.cinema-intro.is-playing{animation:filmExit 4.8s both}
.is-playing .brand-symbol{animation:symbolReveal 1.7s both}
.is-playing .brand-letter{animation:letterReveal 1.15s both;transform-box:fill-box;transform-origin:center}
.is-playing .letter-0{animation-delay:.9s}.is-playing .letter-1{animation-delay:1.07s}.is-playing .letter-2{animation-delay:1.24s}.is-playing .letter-3{animation-delay:1.41s}.is-playing .letter-4{animation-delay:1.58s}
.is-playing .brand-since{animation:sinceReveal 1s 2.2s both}
.is-playing .cinema-caption{animation:sinceReveal 1s 2.5s both}
.cinema-armed:not(:has(.cinema-intro.is-playing)) .arrival-copy{visibility:hidden}
.cinema-replay{top:1rem;bottom:auto;right:3%;font-size:.7rem;z-index:6}
.arrival-foot>a{margin-right:0}.arrival-foot .hero-oils-link{font-size:.75rem;letter-spacing:.04em;color:#d7c194}
.arrival-foot .hero-oils-link span{border:0;width:auto}
@keyframes symbolReveal{0%{opacity:0;filter:brightness(.3) blur(6px)}65%{opacity:1;filter:brightness(1.35) blur(0)}100%{opacity:1;filter:brightness(1) blur(0)}}
@keyframes letterReveal{0%{opacity:0;transform:translateY(12px);filter:blur(5px)}100%{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes sinceReveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes filmExit{0%,58%{opacity:1}90%,100%{opacity:0}}
/* The collection is an upcoming launch, not an active shop. */
.oil-collection{position:relative;background:#10130d;max-width:none;padding:6rem 6% 3rem;display:grid;grid-template-columns:.8fr 1.5fr;gap:2rem 3%;align-items:center;border-block:1px solid #b3975e35;scroll-margin-top:100px;overflow:hidden}
.oil-heading h2{font-size:clamp(3.5rem,5.6vw,6rem);margin-bottom:1.8rem}.home-page .oil-heading h2 em{color:#cdb994}
.oil-heading>p:last-child{color:#c6c6b6;font-size:1rem;line-height:1.8}
.oil-campaign{margin:0;position:relative;min-width:0}.oil-campaign img{width:100%;height:auto;display:block}
.oil-details{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:1rem;border-top:1px solid #b3975e50}
.oil-details article{padding:2rem 7% 1rem}.oil-details article+article{border-left:1px solid #b3975e35}
.oil-index{font-size:.68rem;color:#c9af77;letter-spacing:.17em;margin-bottom:1rem}
.oil-details h3{font-size:clamp(2.3rem,3.2vw,3.5rem);margin-bottom:.8rem}.oil-details article>p:not(.oil-index){font-size:.9rem;color:#d8d5c9;min-height:2rem}
.oil-details article>span{display:block;font-size:.75rem;color:#b9b9aa;margin-top:.5rem}
.oil-coming{grid-column:1/-1;text-align:center;max-width:none;color:#cdb994;font-size:.8rem;letter-spacing:.04em;margin-top:.8rem}
.oil-collection.oils-arriving .oil-campaign{animation:oilReveal 1.2s both}.oil-collection.oils-arriving .oil-heading{animation:sinceReveal .9s both}
@keyframes oilReveal{from{opacity:.2;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.site-header .identity-colour{width:155px}.oil-collection{padding:4rem 6% 3rem;grid-template-columns:1fr}.oil-heading h2{font-size:4rem}.oil-heading h2 br{display:none}.oil-campaign{width:100%;max-width:760px;margin:auto}.oil-heading>p:last-child br{display:none}.oil-details article{padding:1.5rem 5%}.oil-details h3{font-size:2.5rem}}
@media(max-width:760px){.site-header .identity-colour{width:150px}.identity-colour>.brand-since{font-size:7px}.cinema-title{align-self:start;margin-top:130px}.cinema-title .cinema-identity{width:85vw}.cinema-identity>.brand-since{font-size:10px}.cinema-caption{font-size:.58rem;margin-top:2rem}.cinema-replay{top:.8rem;right:5%;background:#11150fcc}.arrival-copy{padding-top:350px}.arrival-foot{gap:1rem}.arrival-foot>a,.arrival-foot .hero-oils-link{width:auto;font-size:.7rem}.arrival-foot .hero-oils-link{display:inline-flex}.hero-brand-line{font-size:1.2rem;margin-bottom:1rem}.oil-details{grid-template-columns:1fr}.oil-details article{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1rem;padding:1.4rem 0}.oil-details article+article{border-left:0;border-top:1px solid #b3975e35}.oil-index{grid-column:1/-1;margin-bottom:.6rem}.oil-details h3{grid-row:2/4;font-size:2.6rem;align-self:center;margin:0}.oil-details article>p:not(.oil-index){min-height:0;font-size:.85rem}.oil-details article>span{margin:0}.oil-heading h2{font-size:3.6rem}.oil-heading h2 br{display:block}.oil-collection{padding-inline:7%}.oil-campaign{width:116%;max-width:none;margin-inline:-8%}}
@media(prefers-reduced-motion:reduce){.cinema-armed .cinema-intro,.cinema-intro.is-playing{display:none!important}.cinema-running .arrival-copy{visibility:visible}.cinema-replay{display:none}.oil-collection.oils-arriving .oil-campaign,.oil-collection.oils-arriving .oil-heading{animation:none}}

/* Unified signature reveal, with a single light pass across the original logo. */
.cinema-title{align-self:center;margin:0;padding:3rem 0;text-align:center}
.cinema-title .cinema-identity{width:min(740px,84vw);position:relative}
.cinema-identity .cinema-glint{position:absolute;inset:0;filter:brightness(2.5) saturate(.55) drop-shadow(0 0 2px #f9e5b380);clip-path:polygon(-35% 0,-23% 0,-43% 100%,-55% 100%);pointer-events:none}
.cinema-massage{font:400 clamp(.85rem,2vw,1.4rem)/1.5 var(--sans);letter-spacing:.48em;padding-left:.48em;color:#f1e7d2;margin:1.3rem 0 0}
.cinema-since{font:400 clamp(.6rem,1vw,.75rem)/1.5 var(--sans);letter-spacing:.38em;padding-left:.38em;color:#c5ab76;margin:1.2rem 0 0}
.cinema-intro.is-playing{animation:filmExit 6.8s both}
.is-playing .brand-symbol,.is-playing .brand-letter{animation:none;transform:none}
.is-playing .cinema-identity{animation:signatureReveal 1.5s .1s both}
.is-playing .cinema-massage{animation:sinceReveal .85s .7s both}
.is-playing .cinema-since{animation:sinceReveal .8s 1.2s both}
.is-playing .cinema-glint{animation:signatureGlint 2.5s 1.85s cubic-bezier(.35,0,.65,1) both}
@keyframes signatureReveal{from{opacity:0;transform:translateY(10px) scale(.965);filter:blur(7px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes signatureGlint{0%{opacity:0;clip-path:polygon(-35% 0,-23% 0,-43% 100%,-55% 100%)}12%,80%{opacity:.7}100%{opacity:0;clip-path:polygon(140% 0,152% 0,132% 100%,120% 100%)}}
.oil-collection{grid-template-columns:1fr;padding-bottom:5rem}
.oil-heading{max-width:760px}.oil-heading>p:last-child{max-width:58ch}
.oil-details{gap:1.3rem;border:0;margin-top:1.5rem}
.oil-details article{padding:2.4rem 1.8rem;display:flex;flex-direction:column;border:1px solid #b3975e40;background:#1d261a}
.oil-details article+article{border:1px solid #b3975e40}
.oil-details .oil-neutral{background:#ebe4d6;color:#30372b}
.oil-details .oil-neutral .oil-index{color:#73603c}
.oil-details .oil-neutral>p:not(.oil-index){color:#4e5347}
.oil-details .oil-neutral>span{color:#655c4a}
.oil-details .oil-deep{background:#342820}
.oil-details h3{font-size:clamp(2rem,2.7vw,3rem);margin:0 0 1.3rem;line-height:1.12}
.oil-details article>p:not(.oil-index){font-size:.95rem;line-height:1.85;margin-bottom:1.6rem;min-height:0}
.oil-details article>span{margin-top:auto;padding-top:1rem;border-top:1px solid #b3975e40;line-height:1.8}
@media(max-width:760px){.cinema-title{align-self:center;margin:0}.cinema-title .cinema-identity{width:86vw}.cinema-massage{margin-top:1rem}.cinema-since{margin-top:.9rem}.oil-details{grid-template-columns:1fr}.oil-details article{padding:2rem 1.5rem}.oil-details h3{font-size:2.6rem}.oil-details article>p:not(.oil-index){font-size:.95rem}}

/* One slow light pass over the symbol, every OTIUM letter and both lower lines. */
.cinema-massage,.cinema-since{position:relative;width:max-content;max-width:90%;isolation:isolate}
.cinema-massage::after,.cinema-since::after{content:attr(data-shine);position:absolute;inset:0;padding-left:inherit;white-space:nowrap;color:transparent;background:linear-gradient(105deg,transparent 35%,#f4dba6 44%,#fffdf3 50%,#f4dba6 56%,transparent 65%);background-size:300% 100%;background-position:150% 0;background-clip:text;-webkit-background-clip:text;pointer-events:none;opacity:0}
.is-playing .cinema-massage::after,.is-playing .cinema-since::after{animation:lowerLineGlint 2.5s 1.85s cubic-bezier(.35,0,.65,1) both}
@keyframes lowerLineGlint{0%{background-position:150% 0;opacity:0}15%{opacity:0}30%,75%{opacity:.95}100%{background-position:-50% 0;opacity:0}}
@media(prefers-reduced-motion:reduce){.cinema-massage::after,.cinema-since::after{display:none}}
/* A restrained, bright finishing glint after the long light sweep. */
.cinema-identity::after{content:'';position:absolute;left:97%;top:25%;width:clamp(24px,4vw,44px);aspect-ratio:1;opacity:0;pointer-events:none;background:radial-gradient(circle,#fff 0 5%,#fff9e4 10%,#f4d398 26%,transparent 65%);clip-path:polygon(50% 0,54% 40%,68% 32%,60% 46%,100% 50%,60% 54%,68% 68%,54% 60%,50% 100%,46% 60%,32% 68%,40% 54%,0 50%,40% 46%,32% 32%,46% 40%);transform:translate(-50%,-50%) scale(.3)}
.is-playing .cinema-identity::after{animation:finishSpark 1.05s 3.65s ease-in-out both}
.is-playing .cinema-identity>.brand-art:not(.cinema-glint){animation:finishLustre 1.3s 3.45s ease-in-out both}
@keyframes finishSpark{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}38%{opacity:1;transform:translate(-50%,-50%) scale(1)}60%{opacity:.65;transform:translate(-50%,-50%) scale(.8)}100%{opacity:0;transform:translate(-50%,-50%) scale(.35)}}
@keyframes finishLustre{0%,100%{filter:brightness(1) drop-shadow(0 0 0 transparent)}40%{filter:brightness(1.48) drop-shadow(0 0 4px #fff5d877) drop-shadow(0 0 12px #e6c17a44)}}
@media(prefers-reduced-motion:reduce){.cinema-identity::after{display:none}}

/* One continuous 6.8-second arrival: light, photograph, then the invitation. */
.cinema-intro.is-playing .cinema-title{animation:signatureDeparture 1.1s 4s both}
.arrival-photo{scale:1.025}
.cinema-running .arrival-photo{animation:arrivalBreath 2.9s 3.9s cubic-bezier(.22,.61,.36,1) both}
.cinema-running .arrival-copy>*{animation:arrivalInvitation .95s var(--arrival-delay,5.5s) cubic-bezier(.22,.61,.36,1) both}
.cinema-running .arrival-copy>.hero-brand-line,.cinema-running .arrival-copy>.eyebrow{--arrival-delay:4.55s}
.cinema-running .arrival-copy>h1{--arrival-delay:4.7s}
.cinema-running .arrival-copy>.arrival-intro{--arrival-delay:4.95s}
.cinema-running .arrival-copy>.button{--arrival-delay:5.2s}
.cinema-running .arrival-foot{animation:arrivalInvitation .8s 5.6s both}
@keyframes signatureDeparture{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-6px) scale(1.012)}}
@keyframes arrivalBreath{from{scale:1}to{scale:1.025}}
@keyframes arrivalInvitation{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.arrival-photo{scale:1}.cinema-armed .arrival-copy{visibility:visible}}