/* OTIUM: an opening, a quiet curve, a clear next step. */
.otium-experience { --otium-ivory:#f3eddf; --otium-night:#172016; --otium-gold:#b7a071; --otium-ease:cubic-bezier(.22,.68,.12,1); }
.otium-experience a.button { position:relative; isolation:isolate; overflow:hidden; gap:1.25rem; min-height:50px; border-radius:3px 17px 3px 3px; transition:background-color .3s,color .3s,box-shadow .3s; }
.otium-experience a.button::after { content:''; display:block; flex:0 0 20px; width:20px; height:20px; border:1px solid currentColor; border-top-color:transparent; border-bottom-color:transparent; border-radius:50%; transform:rotate(-28deg); transition:transform .6s var(--otium-ease); }
.otium-experience a.button>span[aria-hidden=true] { display:none; }
.otium-experience a.button:active { box-shadow:inset 0 0 0 100px #b7a07122; }
.otium-experience a.button:active::after { transform:rotate(35deg); }
.otium-experience :is(a,button,summary):focus-visible { outline:2px solid #b7a071; outline-offset:5px; }
@media (hover:hover) { .otium-experience a.button:hover::after { transform:rotate(25deg); } }

/* Native disclosures: the name opens a complete treatment composition. */
.home-page #massagen.otium-rituals { max-width:none; padding:clamp(4rem,7vw,7rem) max(7%,calc((100vw - 1240px)/2)); background:#1c261b; color:var(--otium-ivory); scroll-margin-top:100px; }
#massagen.otium-rituals .section-heading { grid-template-columns:1.15fr 1fr; gap:7%; margin-bottom:2.4rem; }
#massagen.otium-rituals h2 { font-size:clamp(3.5rem,5.7vw,6.2rem); line-height:1; color:var(--otium-ivory); }
#massagen.otium-rituals h2 em { color:#c5b389; }
#massagen.otium-rituals .eyebrow { color:#c5b389; font-size:.69rem; letter-spacing:.17em; }
#massagen.otium-rituals .section-heading>p { color:#c4cbbd; font-size:.93rem; line-height:1.8; max-width:37ch; }
#massagen .ritual-hint { font-size:.71rem; color:#c4cbbd; letter-spacing:.035em; margin:0 0 1.4rem; }
.ritual-list { border-top:1px solid #b7a07165; }
.otium-ritual { border-bottom:1px solid #b7a07165; scroll-margin-top:100px; }
.otium-ritual>summary { display:grid; grid-template-columns:2.5rem minmax(0,1fr) minmax(130px,.65fr) 58px; gap:1.6rem; align-items:center; min-height:134px; padding:1.8rem .4rem; cursor:pointer; list-style:none; scroll-margin-top:100px; }
.otium-ritual>summary::-webkit-details-marker,.ritual-more>summary::-webkit-details-marker { display:none; }
.ritual-number { font:400 .65rem var(--sans); color:#bfaa7d; letter-spacing:.08em; }
.ritual-name { font:400 clamp(3.1rem,5.2vw,5.4rem)/1 var(--serif); letter-spacing:-.025em; transition:color .4s,transform .6s var(--otium-ease); }
.otium-ritual[open] .ritual-name { color:#d8c69f; transform:translateX(6px); }
.ritual-tag { font:400 .83rem/1.5 var(--sans); color:#d0d4c6; }
.ritual-tag small { display:block; color:#b9bfac; font-size:.67rem; margin-top:.55rem; }
.ritual-mark { width:54px; height:54px; position:relative; display:grid; place-items:center; }
.ritual-mark svg { width:100%; height:100%; stroke:#b7a071; stroke-width:.9; transition:transform .75s var(--otium-ease); }
.otium-ritual[open] .ritual-mark svg { transform:rotate(35deg); }
.ritual-mark i::before,.ritual-mark i::after { content:''; position:absolute; background:#e8dfcb; height:1px; width:13px; left:50%; top:50%; transform:translate(-50%,-50%); transition:transform .4s; }
.ritual-mark i::before { transform:translate(-50%,-50%) rotate(90deg); }
.otium-ritual[open] .ritual-mark i::before { transform:translate(-50%,-50%) rotate(0); }
.ritual-content { padding:0 0 2.8rem 4.5rem; }
.ritual-composition { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:clamp(2rem,4vw,4rem); align-items:start; }
.ritual-photo { position:relative; margin:0; padding-top:1rem; }
.ritual-photo::before { content:''; position:absolute; inset:-.3rem 13% auto; height:1.3rem; border-top:1px solid #b7a07180; border-radius:50%; }
.ritual-photo img { width:100%; height:auto; object-fit:contain; border-radius:3px 25px 3px 3px; }
#massagen .ritual-photo figcaption { font:italic 400 1.45rem/1.25 var(--serif); color:#c5b389; margin:1.1rem 0 0; }
#massagen .ritual-copy h3 { font:400 clamp(1.9rem,2.5vw,2.8rem)/1.1 var(--serif); color:var(--otium-ivory); margin:0 0 1rem; }
#massagen .ritual-copy>p { color:#d6d9ce; font-size:.9rem; line-height:1.85; margin:0 0 .9rem; }
.ritual-more { margin:.5rem 0 1.35rem; }
.ritual-more>summary { display:flex; align-items:center; gap:.6rem; width:fit-content; max-width:100%; min-height:44px; cursor:pointer; list-style:none; font-size:.72rem; color:#d3bc8d; border-bottom:1px solid #b7a07155; }
.ritual-more>summary::after { content:'+'; font-size:1.2rem; }
.ritual-more[open]>summary::after { content:'−'; }
#massagen .ritual-more p { font-size:.83rem; color:#c5cbbc; line-height:1.8; margin:.8rem 0 0; }
#massagen .ritual-copy .discovery-rates { display:flex; gap:2.2rem; margin:1.2rem 0 1.5rem; padding:1rem 0; border-top:1px solid #b7a07140; border-bottom:1px solid #b7a07140; }
#massagen .ritual-copy .discovery-rates dt { font-size:.7rem; color:#bbc2b1; }
#massagen .ritual-copy .discovery-rates dd { margin:.3rem 0 0; font:400 1.65rem var(--serif); color:var(--otium-ivory); }
#massagen .ritual-copy .button { display:flex; width:fit-content; background:#e8dfc8; color:#263225; border:1px solid #e8dfc8; font-size:.8rem; }
#massagen .ritual-copy .button:hover { background:#f7f0df; }
#massagen .ritual-copy .text-link { margin-top:.85rem; font-size:.73rem; color:#e0d7c3; border-color:#b7a07177; }
.ritual-footer { display:flex; justify-content:space-between; align-items:start; gap:2rem; margin-top:1.6rem; }
#massagen .ritual-footer .discovery-note { font-size:.72rem; line-height:1.8; color:#b9c1b0; max-width:53ch; margin:0; }
#massagen .ritual-footer .overview-link { margin:0; color:#e2d9c4; font-size:.78rem; flex-shrink:0; }

/* A full-height olive navigation, with native dialog focus management. */
.otium-menu-trigger { display:none; align-items:center; justify-content:center; gap:.7rem; min-height:48px; padding:.4rem 0; color:#eee6d5; border:0; background:transparent; font:400 .78rem var(--sans); cursor:pointer; flex-shrink:0; }
.menu-trigger-art { width:27px; height:27px; }
.menu-trigger-art svg { width:100%; height:100%; stroke:#c2ac7b; stroke-width:2; }
.otium-menu-trigger[hidden],.mobile-menu[hidden] { display:none!important; }
.otium-menu-dialog { padding:0; margin:0 0 0 auto; width:min(100%,660px); max-width:100%; height:100dvh; max-height:100dvh; border:0; color:#eee6d5; background:#1c281c; overscroll-behavior:contain; }
.otium-menu-dialog::backdrop { background:#0d130dc9; backdrop-filter:blur(5px); }
.menu-interior { min-height:100%; padding:1.5rem clamp(1.5rem,6vw,4.5rem) max(1.8rem,env(safe-area-inset-bottom)); display:flex; flex-direction:column; position:relative; isolation:isolate; overflow:hidden; }
.menu-top { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:clamp(1.5rem,5vh,3rem); }
.menu-top .identity-colour { width:155px; }
.otium-menu-close { min-height:48px; min-width:48px; padding:.3rem 0 .3rem .6rem; display:flex; align-items:center; gap:.8rem; background:transparent; color:#eee6d5; border:0; font:400 .69rem var(--sans); cursor:pointer; }
.otium-menu-close i { font:300 2rem var(--sans); }
.menu-atmosphere { position:absolute; width:95%; top:17%; right:-36%; z-index:-1; pointer-events:none; opacity:.16; }
.menu-atmosphere svg { width:100%; stroke:#cdb17e; stroke-width:.15; }
.menu-intro { font-size:.61rem; letter-spacing:.15em; text-transform:uppercase; color:#b7c0a6; margin:0 0 1rem; }
.otium-menu-links { display:grid; gap:0; }
.otium-menu-links a { display:flex; align-items:baseline; gap:1rem; min-height:50px; padding:.6rem 0; border-bottom:1px solid #b7a07130; color:#efe8d6; font:400 clamp(1.9rem,5vw,3rem)/1.1 var(--serif); }
.otium-menu-links a[aria-current=page] { color:#cbb381; }
.otium-menu-links .menu-index { font:400 .6rem var(--sans); color:#a9b49d; min-width:1.2rem; }
.menu-bottom { margin-top:auto; padding-top:1.8rem; }
.menu-motto { font:italic 400 clamp(2.2rem,5vw,3rem)/1 var(--serif); color:#cbb381; margin:0 0 1.4rem; }
.otium-experience .menu-reserve { width:100%; background:#e8dfc8; border:1px solid #e8dfc8; color:#263225; font-size:.85rem; }
.menu-location { color:#b7c0a6; font-size:.59rem; letter-spacing:.04em; margin:1rem 0 0; }
html.otium-menu-open,html.otium-menu-open body { overflow:hidden; }

/* The four original photographs remain complete, including their lettering. */
.home-page #studio.studio-experience { padding-block:clamp(4.5rem,8vw,8rem); background:#eee9dd; }
.home-page #studio .studio-experience-head :is(h2,p) { color:#30402c; }
.home-page #studio .studio-experience-head h2 em { color:#66704e; }
.studio-collection { border-radius:3px 36px 3px 3px; }
.studio-visual { padding-top:2.7rem; }
.studio-visual::before { border-top-color:transparent; border-bottom-color:transparent; transform:rotate(-20deg); }
.studio-controls button,.studio-dialog-controls button { border-top-color:transparent; border-bottom-color:transparent; width:48px; height:48px; }
.studio-chapter-mark { font-size:0; width:15px; height:15px; border:1px solid #c5ad77; border-top-color:transparent; border-bottom-color:transparent; border-radius:50%; }

@media(max-width:1200px) { .otium-menu-trigger:not([hidden]) { display:flex; } }
@media(max-width:760px) {
 .otium-experience .site-header>.nav-book { display:none; }
 .otium-menu-trigger { margin-left:auto; }
 .home-page #massagen.otium-rituals { padding:3.8rem 7% 3.5rem; scroll-margin-top:85px; }
 #massagen.otium-rituals .section-heading { grid-template-columns:1fr; gap:1.3rem; margin-bottom:2rem; }
 #massagen.otium-rituals h2 { font-size:clamp(3.1rem,12vw,4.3rem); }
 #massagen.otium-rituals .section-heading>p { font-size:.87rem; max-width:38ch; }
 #massagen .ritual-hint { font-size:.66rem; max-width:36ch; }
 .otium-ritual { scroll-margin-top:85px; }
 .otium-ritual>summary { grid-template-columns:1.2rem minmax(0,1fr) 40px; gap:.8rem; min-height:119px; padding:1.3rem 0; }
 .ritual-number { font-size:.56rem; }
 .ritual-name { font-size:clamp(2.8rem,11vw,4.1rem); }
 .ritual-tag { grid-column:2; grid-row:2; font-size:.7rem; margin-top:-.25rem; }
 .ritual-tag small { display:inline; font-size:.59rem; margin-left:.55rem; white-space:nowrap; }
 .ritual-mark { grid-column:3; grid-row:1/3; width:38px; height:48px; }
 .ritual-mark svg { stroke-width:1.1; }
 .otium-ritual[open] .ritual-name { transform:translateX(3px); }
 .ritual-content { padding:0 0 2rem; }
 .ritual-composition { grid-template-columns:1fr; gap:1.65rem; }
 .ritual-photo { padding-top:1rem; }
 #massagen .ritual-photo figcaption { font-size:1.35rem; margin-top:.75rem; }
 #massagen .ritual-copy h3 { font-size:2.1rem; }
 #massagen .ritual-copy>p { font-size:.86rem; line-height:1.8; }
 #massagen .ritual-copy .button { width:100%; min-height:54px; }
 .ritual-footer { display:block; margin-top:1.25rem; }
 #massagen .ritual-footer .overview-link { margin-top:.8rem; }
 .otium-experience .mobile-booking { left:12px; right:12px; bottom:max(10px,env(safe-area-inset-bottom)); padding:8px 9px 8px 15px; gap:.8rem; border:1px solid #a9976b55; border-radius:3px 20px 3px 3px; background:#172319f5; box-shadow:0 8px 30px #090e0933; z-index:35; transition:opacity .25s,transform .35s var(--otium-ease),visibility .25s; }
 .otium-experience .mobile-booking>a:not(.button) { color:#efe8d5; font-size:.72rem; line-height:1.5; min-width:0; }
 .otium-experience .mobile-booking .button { min-height:48px; padding:.7rem .9rem; font-size:.73rem; gap:.8rem; flex-shrink:0; background:#e8dfc8!important; color:#263225!important; border-color:#e8dfc8!important; }
 .otium-experience .mobile-booking .button::after { width:16px; height:16px; flex-basis:16px; }
 .mobile-booking.is-resting,html.otium-menu-open .mobile-booking,html.studio-dialog-open .mobile-booking { visibility:hidden; opacity:0; transform:translateY(130%); pointer-events:none; }
 .home-page #studio.studio-experience { padding:4rem 5% 3.8rem; }
 .studio-collection { border-radius:3px 25px 3px 3px; }
 .studio-editorial { padding:1.3rem 1.2rem .4rem; }
 .studio-visual { padding:1.2rem .8rem .9rem; }
 .home-page #studio .studio-experience-head h2 { font-size:3.2rem; }
 .home-page #studio .studio-experience-intro { font-size:.86rem; }
 .home-page #sergi.personal-welcome { padding-top:4.8rem; padding-bottom:4.5rem; }
 .home-page #sergi .portrait-actions .button { width:100%; min-height:54px; }
}
@media(max-width:360px) {
 .ritual-tag small { display:block; margin:.3rem 0 0; }
 .ritual-name { font-size:2.7rem; }
 .menu-top .identity-colour { width:122px; }
 .otium-menu-close span { display:none; }
 .menu-interior { padding-inline:1.5rem; }
 .otium-menu-links a { font-size:1.8rem; }
 .otium-menu-trigger { gap:.4rem; font-size:.72rem; }
 .menu-trigger-art { width:23px; }
}
@media(prefers-reduced-motion:reduce) {
 .otium-experience :is(a.button,a.button::after,.ritual-name,.ritual-mark svg,.ritual-mark i::before,.ritual-mark i::after,.mobile-booking) { transition:none!important; }
}