/*
Theme Name: Oasis Front
Theme URI: https://oasis.rentals
Description: Guest-facing theme for the Oasis Booking Engine — editorial direction (serif + warm-ivory neutral + coral accent). Owns the brand layer and overrides the plugin's structural templates (oasis-booking). Sprint 2 / stage 06.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: oasis-front
*/

/* ============================================================
   Oasis Front — Design System v1.1 (editorial)
   Tokens + base + components. Mirrors docs/FRONTEND-DESIGN-SYSTEM.md.
   Plugin ships structural CSS + `oasis-` classes; this theme owns
   colour, type, shadow, motion and its own `of-` components.
   ============================================================ */

:root{
  --of-bg:#FAF6EF; --of-surface:#FFFFFF; --of-sand:#EFE7D9; --of-sand-2:#F4EEE3;
  --of-ink:#262019; --of-soft:#6F665B; --of-faint:#A99E8E;
  --of-line:#E5DDCE; --of-line-2:#D8CDB9;
  --of-accent:#DD5E4C; --of-accent-deep:#C64B3A; --of-accent-ink:#FFFFFF; --of-accent-tint:rgba(221,94,76,.10);
  --of-good:#46704E; --of-gold:#B0872E;
  --of-r-sm:6px; --of-r:10px; --of-r-lg:16px; --of-pill:999px;
  --of-sh-1:0 1px 2px rgba(38,32,25,.05);
  --of-sh-2:0 14px 40px rgba(38,32,25,.10);
  --of-sh-3:0 30px 70px rgba(38,32,25,.14);
  --of-ease:cubic-bezier(.2,.7,.2,1);
  --of-serif:"Iowan Old Style","Charter","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --of-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --of-maxw:1160px;
  --of-edge:clamp(20px,5vw,72px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--of-bg);color:var(--of-ink);font-family:var(--of-sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;letter-spacing:-.005em;overflow-x:clip}
h1,h2,h3,h4{margin:0;font-family:var(--of-serif);font-weight:400;letter-spacing:-.01em;line-height:1.14;text-wrap:balance}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--of-accent);outline-offset:3px;border-radius:2px}
.of-tnum{font-variant-numeric:tabular-nums}
.of-it{font-style:italic}
.of-wrap{max-width:var(--of-maxw);margin:0 auto;padding:0 clamp(18px,3.5vw,40px)}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}

/* buttons */
.of-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:14px;
  border-radius:var(--of-r);padding:12px 22px;transition:transform .2s var(--of-ease),background .18s,border-color .18s,box-shadow .2s;letter-spacing:.01em}
.of-btn:active{transform:translateY(1px)}
.of-btn--coral{background:var(--of-accent);color:var(--of-accent-ink)}
.of-btn--coral:hover{background:var(--of-accent-deep);transform:translateY(-2px);box-shadow:0 10px 24px rgba(221,94,76,.32)}
.of-btn--ink{background:var(--of-ink);color:var(--of-bg)}
.of-btn--ghost{background:transparent;border:1px solid var(--of-line-2);color:var(--of-ink)}
.of-btn--ghost:hover{border-color:var(--of-ink)}
.of-btn--block{width:100%}
.of-btn[disabled],.of-btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
.of-eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--of-accent);font-weight:700}
.of-stars{color:var(--of-gold);letter-spacing:1px}

/* site header */
.of-header{position:fixed;top:0;left:0;right:0;z-index:40;transition:background .3s var(--of-ease),border-color .3s}
.of-header .of-wrap{max-width:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:16px var(--of-edge)}
.of-header.is-solid,.of-header.is-scrolled{background:rgba(250,246,239,.9);backdrop-filter:blur(14px) saturate(1.1);box-shadow:0 10px 30px rgba(38,32,25,.06)}
.of-logo{justify-self:start;font-family:var(--of-serif);font-size:38px;transition:color .25s var(--of-ease)}
.of-logo:hover{color:var(--of-accent)}
.of-logo b{color:var(--of-accent);animation:of-blink 1.6s ease-in-out infinite}
/* blinking accent dot — logo mark echoed in headlines */
.of-blink{color:var(--of-accent);animation:of-blink 1.6s ease-in-out infinite}
@keyframes of-blink{0%,100%{opacity:1}50%{opacity:.18}}
.of-hero__ey .of-blink{font-size:1.5em;vertical-align:-.06em;margin-right:.15em}
.of-nav{display:flex;align-items:center;justify-content:center;gap:clamp(24px,3vw,44px)}
.of-nav a{position:relative;font-size:16px;color:var(--of-soft);letter-spacing:.02em;transition:color .2s}
.of-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--of-accent);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--of-ease)}
.of-nav a:hover{color:var(--of-accent)}
.of-nav a:hover::after{transform:scaleX(1)}
/* Apartments dropdown */
.of-nav__grp{position:relative;display:inline-flex;align-items:center}
.of-nav__sub{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:16px;z-index:60;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--of-ease),visibility .2s}
.of-nav__grp:hover .of-nav__sub,.of-nav__grp:focus-within .of-nav__sub{opacity:1;visibility:visible;pointer-events:auto}
.of-nav__sub-card{display:flex;flex-direction:column;gap:2px;background:var(--of-surface);border:1px solid var(--of-line);
  border-radius:var(--of-r);box-shadow:var(--of-sh-2);padding:10px;min-width:300px;transform:translateY(8px);transition:transform .22s var(--of-ease)}
.of-nav__grp:hover .of-nav__sub-card,.of-nav__grp:focus-within .of-nav__sub-card{transform:translateY(0)}
.of-nav__sub a{font-size:14px;color:var(--of-soft);padding:10px 14px;border-radius:var(--of-r-sm);white-space:nowrap;letter-spacing:0}
.of-nav__sub a::after{display:none}
.of-nav__sub a:hover{background:var(--of-sand-2);color:var(--of-ink)}
/* white over the hero until the page is scrolled */
.of-header--over:not(.is-scrolled) .of-logo,.of-header--over:not(.is-scrolled) .of-nav a{color:#fff}
.of-header--over:not(.is-scrolled) .of-logo:hover{color:var(--of-accent)}
.of-header--over:not(.is-scrolled) .of-nav a:hover{color:var(--of-accent)}
.of-header--over:not(.is-scrolled) .of-nav__sub a{color:var(--of-soft)}
.of-header--over:not(.is-scrolled) .of-nav__sub a:hover{color:var(--of-ink)}
.of-header--over:not(.is-scrolled) .of-btn--ghost{border-color:rgba(255,255,255,.55);color:#fff}
.of-header--over:not(.is-scrolled) .of-btn--ghost:hover{border-color:#fff}
.of-header__cta{justify-self:end;display:flex;align-items:center;gap:12px}
@media(max-width:720px){.of-nav{display:none}.of-header__book{display:none}.of-header .of-wrap{display:flex;align-items:center;justify-content:space-between;gap:14px}.of-header .of-wrap:has(.of-burger.is-open) .of-logo{opacity:0;visibility:hidden}.of-mobilenav{overflow:hidden;justify-content:flex-start}.of-mobilenav .of-nav{flex:1 1 auto;min-height:0;overflow-y:auto;justify-content:safe center}.of-mobilenav .of-btn--book{flex:none;font-size:16px}}

/* burger + mobile nav overlay. Shown by default (mobile-first) and hidden on
   desktop below, together with .of-mobilenav — a later unconditional display:none
   here would otherwise beat the max-width rule and hide the burger everywhere. */
.of-burger{display:block;position:relative;width:44px;height:44px;border:none;background:none;cursor:pointer;color:inherit;padding:0}
.of-burger span{position:absolute;left:11px;right:11px;height:1.6px;background:currentColor;border-radius:2px;transition:transform .3s var(--of-ease),opacity .2s}
.of-burger span:nth-child(1){top:16px}.of-burger span:nth-child(2){top:21.5px}.of-burger span:nth-child(3){top:27px}
.of-burger.is-open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.of-burger.is-open span:nth-child(2){opacity:0}
.of-burger.is-open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.of-header--over:not(.is-scrolled) .of-burger{color:#fff}
.of-header .of-burger.is-open{color:var(--of-ink)}
/* Menu open = one surface: the header stops being its own bar (transparent, no
   shadow/border) and only the burger/X floats on top. The overlay appears
   opaque instantly (no opacity fade below) so the page never shows through. */
.of-header:has(.of-burger.is-open){background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:transparent}
/* Hide the floating "Check availability" pill while the menu is open. */
body:has(.of-burger.is-open) .of-floatcta{opacity:0;visibility:hidden;pointer-events:none}
.of-mobilenav{position:fixed;inset:0;z-index:39;background:var(--of-bg);display:flex;flex-direction:column;justify-content:center;gap:8px;
  padding:56px clamp(24px,8vw,52px);opacity:0;visibility:hidden;
  transition:none}
.of-mobilenav.is-open{opacity:1;visibility:visible;transform:none}
.of-mobilenav .of-nav{display:flex;flex-direction:column;align-items:flex-start;gap:4px;justify-content:flex-start}
.of-mobilenav .of-nav > a,.of-mobilenav .of-nav__grp{opacity:1;transform:none}
.of-mobilenav.is-open .of-nav > a,.of-mobilenav.is-open .of-nav__grp{opacity:1;transform:none}
.of-mobilenav .of-nav > a,.of-mobilenav .of-nav__grp > a{font-family:var(--of-serif);font-size:clamp(19px,5vw,26px);color:var(--of-ink);padding:6px 0;display:block;transition:color .2s}
.of-mobilenav .of-nav__grp > a{font-size:clamp(22px,6vw,30px)}
.of-mobilenav .of-nav > a:hover,.of-mobilenav .of-nav__grp > a:hover{color:var(--of-accent)}
.of-mobilenav .of-nav > a::after,.of-mobilenav .of-nav__grp > a::after{display:none}
.of-mobilenav .of-nav__grp{display:flex;flex-direction:column;align-items:flex-start;position:static}
.of-mobilenav .of-nav__sub{position:static;opacity:1;visibility:visible;pointer-events:auto;padding:2px 0 10px;transform:none}
.of-mobilenav .of-nav__sub-card{background:none;border:none;box-shadow:none;padding:0 0 0 2px;min-width:0;transform:none;gap:0}
.of-mobilenav .of-nav__sub a{font-family:var(--of-sans);font-size:16px;color:var(--of-soft);padding:11px 14px}
.of-mobilenav .of-nav__sub a:hover{color:var(--of-accent);background:none}
.of-mobilenav .of-btn{margin-top:28px;align-self:stretch;justify-content:center;text-align:center}
.of-mobilenav__mb{margin-top:16px;align-self:flex-start;font-size:14px;color:var(--of-soft);border-bottom:1px solid var(--of-line-2);padding-bottom:1px}
.of-mobilenav__mb:hover{color:var(--of-accent)}
.of-mobilenav.is-open .of-nav > *:nth-child(1){transition-delay:.05s}
.of-mobilenav.is-open .of-nav > *:nth-child(2){transition-delay:.10s}
.of-mobilenav.is-open .of-nav > *:nth-child(3){transition-delay:.15s}
.of-mobilenav.is-open .of-nav > *:nth-child(4){transition-delay:.20s}
.of-mobilenav.is-open .of-nav > *:nth-child(5){transition-delay:.25s}
.of-mobilenav.is-open .of-nav > *:nth-child(6){transition-delay:.30s}
@media(min-width:721px){.of-mobilenav,.of-burger{display:none}}

/* full-bleed hero — full viewport, spacious, editorial */
.of-hero{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;background:#243a40 center/cover no-repeat}
.of-hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:center;animation:of-hero-zoom 15s ease-in-out infinite alternate}
/* hero background slider — cross-fade + Ken Burns zoom-in as each photo enters */
.of-hero__slides{position:absolute;inset:0;z-index:0}
.of-hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.5s var(--of-ease)}
.of-hero__slide.is-active{opacity:1;z-index:1}
.of-hero__slide picture,.of-hero__slide img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:center;transform:scale(1.04);will-change:transform}
.of-hero__slide.is-active img{animation:of-hero-zoom-in 9s ease-out both}
.of-hero__slide:only-child.is-active img{animation:of-hero-zoom 15s ease-in-out infinite alternate}
@keyframes of-hero-zoom{from{transform:scale(1.02)}to{transform:scale(1.15)}}
@keyframes of-hero-zoom-in{from{transform:scale(1.04)}to{transform:scale(1.17)}}
.of-hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(18,14,10,.34),rgba(18,14,10,0) 20%),
  linear-gradient(0deg,rgba(18,14,10,calc(var(--of-hero-overlay,.3) + .2)),rgba(18,14,10,var(--of-hero-overlay,.3)) 46%,rgba(18,14,10,calc(var(--of-hero-overlay,.3) * .7)))}
.of-hero__in{position:absolute;left:clamp(20px,5vw,72px);right:clamp(20px,5vw,72px);bottom:clamp(56px,9vh,110px);z-index:2;color:#fff;max-width:min(94vw,1040px)}
.of-hero__ey{font-size:12px;letter-spacing:.34em;text-transform:uppercase;font-weight:700;opacity:.9}
.of-hero__t{font-family:var(--of-serif);color:#fff;font-size:clamp(46px,8.6vw,112px);line-height:1;margin:20px 0 0;letter-spacing:-.025em;text-wrap:balance}
.of-hero__t .of-it{opacity:.86}
.of-hero__meta{margin-top:26px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:15px;opacity:.96}
.of-hero__meta .of-stars{color:#F2C879}
.of-hero__badge{position:absolute;right:clamp(20px,5vw,72px);bottom:clamp(56px,9vh,110px);z-index:3;width:130px;height:130px;display:grid;place-items:center}
.of-hero__badge svg{position:absolute;inset:0;width:100%;height:100%;animation:of-spin 18s linear infinite}
.of-hero__badge text{fill:#fff;font-size:8.4px;letter-spacing:2.4px;text-transform:uppercase;font-family:var(--of-sans);font-weight:600}
.of-hero__badge .of-arr{position:relative;color:#fff;font-size:24px}
.of-hero__scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;color:#fff;opacity:.72;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:9px}
.of-hero__scroll::after{content:"";width:1px;height:38px;background:linear-gradient(#fff,rgba(255,255,255,0));animation:of-drop 2s ease-in-out infinite}
@keyframes of-spin{to{transform:rotate(360deg)}}
@keyframes of-drop{0%,100%{opacity:.3;transform:scaleY(.55);transform-origin:top}50%{opacity:.95;transform:scaleY(1);transform-origin:top}}
@media(max-width:640px){.of-hero__badge{display:none}.of-hero__t{font-size:clamp(40px,12vw,64px)}.of-hero{display:flex;flex-direction:column;justify-content:flex-end;padding:0 clamp(20px,5vw,40px) 42px}.of-hero__in{position:static;inset:auto;max-width:none;padding:0}.of-hero__scroll{display:none}}
/* hero entrance — staggered rise on load */
.of-hero__ey{animation:of-rise .9s var(--of-ease) .15s both}
.of-hero__t{animation:of-rise 1s var(--of-ease) .28s both}
.of-hero__meta{animation:of-rise .9s var(--of-ease) .46s both}
.of-hero__badge,.of-hero__scroll{animation:of-fade 1.2s var(--of-ease) .7s both}
@keyframes of-rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes of-fade{from{opacity:0}to{opacity:1}}

/* landing layout */
.of-crumbs{font-size:12.5px;color:var(--of-soft);padding:34px 0 2px;letter-spacing:.02em}
.of-grid{display:grid;grid-template-columns:1fr 380px;gap:clamp(48px,7vw,96px);align-items:start;padding:clamp(48px,7vw,84px) 0}
@media(max-width:880px){.of-grid{grid-template-columns:1fr;gap:40px}.of-book{position:static}}
/* Desktop: body{overflow-x:clip} (horizontal-scroll guard) breaks position:sticky
   on descendants, so the booking card never pinned. Lift the clip on the single
   property page only (verified no horizontal scroll there) and stretch the aside
   so the card stays pinned for the whole left-column scroll. */
@media(min-width:881px){body.single-oasis_property{overflow-x:visible}#book{align-self:stretch}.of-book-sticky{position:sticky;top:104px}}
.of-block{padding:clamp(40px,6vw,68px) 0;border-bottom:1px solid var(--of-line)}
.of-block:last-child{border-bottom:none}
/* facts bar sits tight under the "Your stay" heading, not floated low */
.of-grid__lead + .of-block{padding-top:0}

/* section eyebrow + heading */
.of-eyebrow-sec{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--of-accent);font-weight:700;display:block;margin-bottom:14px}
.of-h2{font-size:clamp(26px,3.4vw,38px);line-height:1.1;margin-bottom:24px;max-width:20ch}
.of-lede{font-size:clamp(17px,1.7vw,19px);line-height:1.85;color:#3d362d;max-width:62ch;font-family:var(--of-serif)}
.of-lede p{margin:0 0 1.1em}
.of-lede p:first-child::first-letter{font-family:var(--of-serif);font-size:3.4em;float:left;line-height:.8;padding:8px 12px 0 0;color:var(--of-ink)}

/* intro band — big serif lead + highlights, with an editorial photo alongside */
.of-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,90px);align-items:center;padding:clamp(70px,11vw,140px) 0 clamp(50px,7vw,90px)}
@media(max-width:820px){.of-intro{grid-template-columns:1fr;gap:34px}}
.of-intro__ey{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--of-accent);font-weight:700}
.of-intro__lead{font-family:var(--of-serif);font-size:clamp(24px,3.4vw,40px);line-height:1.2;letter-spacing:-.015em;margin:18px 0 0}
.of-intro__lead .of-it{color:var(--of-soft)}
.of-intro__hl{list-style:none;margin:clamp(24px,3vw,36px) 0 0;padding:0;display:grid;gap:14px}
.of-intro__hl li{display:flex;align-items:center;gap:12px;font-size:15.5px;color:#3d362d}
.of-intro__hl svg{flex:none;color:var(--of-accent)}
.of-intro__media{aspect-ratio:4/5;border-radius:var(--of-r-lg);overflow:hidden;background:var(--of-sand);box-shadow:var(--of-sh-1)}
.of-intro__media img,.of-intro__media picture{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--of-ease)}
.of-intro__media:hover img{transform:scale(1.04)}

/* staggered photo collage (asymmetric, ze screenów) */
.of-collage{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(12px,1.6vw,20px);align-items:start;padding:clamp(20px,4vw,56px) 0}
.of-collage figure{margin:0;border-radius:var(--of-r-lg);overflow:hidden;background:var(--of-sand)}
.of-collage img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--of-ease)}
.of-collage figure:hover img{transform:scale(1.04)}
.of-collage .a{aspect-ratio:3/4;margin-top:clamp(20px,4vw,52px)}
.of-collage .b{aspect-ratio:4/5}
.of-collage .c{aspect-ratio:3/4;margin-top:clamp(36px,7vw,96px)}
@media(max-width:640px){.of-collage{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:12px}.of-collage::-webkit-scrollbar{display:none}.of-collage figure{flex:0 0 82%;scroll-snap-align:start;opacity:1;transform:none}.of-collage .a,.of-collage .b,.of-collage .c{aspect-ratio:4/5;margin-top:0}}

/* pill CTA + circle-arrow link (ze screenów) */
.of-btn--pill{border-radius:var(--of-pill);padding:13px 26px}
.of-circle{display:inline-flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--of-ink);font-weight:600;margin-top:8px}
.of-circle .c{width:48px;height:48px;border-radius:50%;border:1px solid var(--of-line-2);display:grid;place-items:center;transition:transform .25s var(--of-ease),border-color .25s;font-size:18px}
.of-circle:hover .c{transform:translateX(5px);border-color:var(--of-accent);color:var(--of-accent)}

/* scroll reveal */
.of-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--of-ease),transform .7s var(--of-ease)}
.of-reveal.is-in{opacity:1;transform:none}

/* gallery */
.of-gallery{display:grid;grid-template-columns:1.7fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:clamp(10px,1.4vw,16px);
  height:clamp(420px,56vh,600px);border-radius:var(--of-r-lg);overflow:hidden;margin:clamp(30px,5vw,64px) 0 6px}
.of-gallery figure{margin:0;position:relative;overflow:hidden}
.of-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--of-ease)}
.of-gallery figure:hover img{transform:scale(1.04)}
.of-gallery figure:first-child{grid-row:1/3}
@media(max-width:640px){.of-gallery{height:auto;grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:44vw}.of-gallery figure:first-child{grid-column:1/3;grid-row:auto}}

/* facts + amenities */
.of-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:14px 0;color:var(--of-soft);font-size:16px;padding:6px 0}
/* Tighten the left column: the boxed facts bar left a redundant rule + a big
   empty gap before 'What this place offers'; pull that section up to the facts. */
.of-grid__lead + .of-block{padding-top:0;padding-bottom:clamp(22px,2.4vw,32px)}
.of-block:has(.of-amen){padding-top:clamp(22px,2.4vw,32px)}
.of-facts span{display:inline-flex;align-items:center;gap:9px;padding-right:24px;margin-right:24px;border-right:1px solid var(--of-line-2)}
.of-facts span:nth-child(3n),.of-facts span:last-child{border-right:0;margin-right:0;padding-right:0} /* no hanging separator at the end of a grid row */
.of-facts b{color:var(--of-ink)}
.of-facts__ic{color:var(--of-accent);flex:none}
@media(max-width:560px){.of-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;border-top:0;border-bottom:0;padding:2px 0}.of-facts span{border-right:0;padding-right:0;margin-right:0}}
.of-amen{display:grid;grid-template-columns:1fr 1fr;gap:18px 40px;font-size:15.5px;padding:0;margin:0}
.of-amen li{list-style:none;display:flex;gap:12px;align-items:center;padding:4px 0;border-bottom:1px solid var(--of-line)}
.of-amen__ic{color:var(--of-accent);flex:none}
@media(max-width:560px){.of-amen{grid-template-columns:1fr 1fr;gap:12px 20px;font-size:14px}}
/* Booking calendar on mobile: sit in the card flow (not an absolute panel that
   covers the price/module) and show one month instead of a tall two-month grid. */
@media(max-width:640px){.oasis-bw [data-oasis-calendar]{position:relative!important;top:auto!important;margin-top:12px;box-shadow:none!important;border:1px solid var(--of-line)}.oasis-bw__months{grid-template-columns:1fr}.oasis-bw__months .oasis-bw__month:nth-child(2){display:none}}
.of-map{height:250px;border-radius:var(--of-r-lg);border:1px solid var(--of-line);background:
  repeating-linear-gradient(0deg,transparent,transparent 40px,rgba(38,32,25,.045) 41px),
  repeating-linear-gradient(90deg,transparent,transparent 40px,rgba(38,32,25,.045) 41px),
  linear-gradient(150deg,#EBE3D5,#DCE6DD);position:relative}
.of-map__pin{position:absolute;left:46%;top:44%;width:22px;height:22px;background:var(--of-accent);
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 6px 16px rgba(221,94,76,.5);border:3px solid #fff}
/* Live Leaflet map, tinted to the warm palette and kept semi-transparent over the
   cream/sage base so it reads as part of the section, not a raw map. */
.of-map--live{overflow:hidden;isolation:isolate}
.of-map .leaflet-container{position:absolute;inset:0;height:100%;width:100%;border-radius:inherit;background:transparent;font:inherit;z-index:0}
.of-map .leaflet-tile-pane{filter:grayscale(1) sepia(.42) saturate(.7) brightness(1.04) contrast(.9);opacity:.86}
.of-map--live>.of-map__pin{display:none}
.of-map .of-map__marker .of-map__pin{position:static;display:block;left:auto;top:auto}
/* House marker for the live map — coral pin + white house, palette unchanged. */
.of-map .of-map__marker .of-map__house{display:block;width:40px;height:40px;background:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%3E%3Cpath%20d=%27M12%201.5C7.9%201.5%204.5%204.9%204.5%209c0%205.4%206.3%2012.4%206.9%2013.2%20.3%20.4%20.9%20.4%201.2%200%20.6-.8%206.9-7.8%206.9-13.2%200-4.1-3.4-7.5-7.5-7.5z%27%20fill=%27%23DD5E4C%27%20stroke=%27%23ffffff%27%20stroke-width=%271.2%27/%3E%3Cpath%20d=%27M12%204.8L16.8%208.9L15.5%208.9L15.5%2013.4L8.5%2013.4L8.5%208.9L7.2%208.9Z%27%20fill=%27%23ffffff%27/%3E%3Crect%20x=%2710.9%27%20y=%2710.6%27%20width=%272.2%27%20height=%272.8%27%20fill=%27%23DD5E4C%27/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 5px 9px rgba(221,94,76,.45))}
.of-map .leaflet-control-attribution{background:rgba(255,255,255,.55);font-size:9px;opacity:.7}
.of-map .leaflet-control-zoom a{color:var(--of-ink);border-color:var(--of-line);background:rgba(255,255,255,.85)}
.of-map .leaflet-control-zoom a:hover{background:#fff}

/* reviews */
.of-revh{display:flex;align-items:baseline;gap:11px;margin-bottom:20px}
.of-revh .big{font-family:var(--of-serif);font-size:26px}
.of-revs{display:grid;grid-template-columns:1fr 1fr;gap:24px 34px}
@media(max-width:640px){.of-revs{grid-template-columns:1fr}}
.of-rev blockquote{margin:0;font-family:var(--of-serif);font-style:italic;font-size:14.5px;color:#3d362d;line-height:1.7}
.of-rev figcaption{margin-top:8px;font-size:12.5px;color:var(--of-faint)}
.of-rev figcaption b{color:var(--of-ink);font-style:normal}

/* booking card (theme shell; live widget mounts inside) */
.of-book{position:relative;background:var(--of-surface);border:none;
  border-radius:var(--of-r-lg);box-shadow:var(--of-sh-2);padding:22px}
.of-book__price{display:flex;align-items:baseline;gap:7px;margin-bottom:14px}
.of-book__price b{font-family:var(--of-serif);font-size:28px}
.of-book__price span{color:var(--of-soft);font-size:14px}
.of-book__hint{font-size:12.5px;color:var(--of-soft);text-align:center;margin-top:11px}

/* faq */
/* FAQ — numbered accordion in the 'Explore the apartment' tab style */
.of-faq{counter-reset:faq}
.of-faq details{counter-increment:faq;border-top:1px solid var(--of-line);padding:20px 0}
.of-faq details:last-child{border-bottom:1px solid var(--of-line)}
.of-faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;
  font-family:var(--of-sans);font-size:clamp(18px,2.1vw,23px);font-weight:500;color:var(--of-faint);letter-spacing:-.01em;transition:color .2s}
.of-faq summary::-webkit-details-marker{display:none}
.of-faq summary::before{content:counter(faq,decimal-leading-zero) ".";font-variant-numeric:tabular-nums;color:var(--of-accent);font-weight:600;flex:none}
.of-faq summary::after{content:"+";margin-left:auto;font-size:22px;line-height:1;color:var(--of-faint);transition:color .2s}
.of-faq summary:hover{color:var(--of-ink)}
.of-faq details[open] summary{color:var(--of-ink);font-weight:600}
.of-faq details[open] summary::after{content:"\00d7";color:var(--of-ink)}
/* Answer stays in flow (display:block overrides the UA details hiding) and
   animates its height both ways off [open], so the section below eases down
   instead of snapping. */
.of-faq details>p{display:block;max-height:0;overflow:hidden;opacity:0;margin:0 0 0 42px;padding-top:0;
  color:var(--of-soft);font-size:15px;line-height:1.75;max-width:60ch;
  transition:max-height .45s var(--of-ease),opacity .3s var(--of-ease),padding-top .4s var(--of-ease)}
.of-faq details[open]>p{max-height:200px;opacity:1;padding-top:14px}
@media(prefers-reduced-motion:reduce){.of-faq details>p{transition:none}}

/* footer */
.of-footer{position:relative;color:#E8E1D5;margin-top:0;
  background:radial-gradient(120% 90% at 82% -10%,rgba(221,94,76,.16),transparent 55%),linear-gradient(180deg,#2c241a,#1d1711 72%)}
.of-footer__top{padding-top:clamp(52px,7vw,90px);padding-bottom:clamp(34px,4vw,52px);display:grid;grid-template-columns:0.9fr 1.9fr;gap:clamp(28px,4vw,56px)}
@media(max-width:760px){.of-footer__top{grid-template-columns:1fr;gap:36px}}
.of-footer__logo{font-family:var(--of-serif);font-size:30px;color:#fff;text-decoration:none}
.of-footer__logo b{color:var(--of-accent)}
.of-footer__logoimg{max-height:42px;width:auto;display:block}
.of-footer__tag{color:#C9C0B2;font-size:14.5px;line-height:1.6;max-width:28ch;margin:16px 0 0}
.of-footer__social{display:flex;gap:12px;margin-top:22px}
.of-footer__social a{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;color:#C9C0B2;transition:border-color .2s,color .2s,transform .2s}
.of-footer__social a:hover{border-color:#fff;color:#fff;transform:translateY(-2px)}
.of-footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:620px){.of-footer__cols{grid-template-columns:1fr 1fr}}
@media(max-width:400px){.of-footer__cols{grid-template-columns:1fr}}
/* honeypot: hidden anti-spam field (people never see or tab to it) */
.of-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}
.of-footer a{color:#C9C0B2}.of-footer a:hover{color:#fff}
.of-footer h4{font-family:var(--of-serif);color:#fff;font-size:18px;margin-bottom:12px}
.of-footer ul{list-style:none;padding:0;margin:0;line-height:2.1;font-size:14px}
.of-footer__bar{border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:#A99E8E;padding:18px 0}
.of-footer__credit{color:#C9BFAF;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);transition:color .2s,border-color .2s}
.of-footer__credit:hover{color:var(--of-accent);border-color:var(--of-accent)}
.of-gseo{max-width:820px;margin:0 auto;padding:clamp(20px,4vw,40px) 0 clamp(70px,10vw,120px)}
.of-gseo__intro{font-size:clamp(16px,1.6vw,18px);line-height:1.7;color:var(--of-soft)}
.of-gseo__faq{margin-top:clamp(28px,4vw,44px)}

/* checkout page (/booking) */
.of-co-wrap{max-width:var(--of-maxw);margin:0 auto;padding:clamp(96px,13vh,150px) clamp(18px,3.5vw,40px) 90px}
.of-co-empty{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:40px 0 80px}
.of-co{display:grid;grid-template-columns:1fr 400px;gap:clamp(32px,5vw,64px);align-items:start}
@media(max-width:880px){.of-co{grid-template-columns:1fr}}
.of-co__h{font-family:var(--of-serif);font-size:clamp(28px,4vw,42px)}
.of-co__step{font-size:13px;color:var(--of-soft);margin:6px 0 30px;letter-spacing:.02em}
.of-fs{border:none;padding:0;margin:0 0 30px}
.of-fs__h{display:flex;align-items:center;gap:11px;font-family:var(--of-serif);font-size:19px;margin-bottom:16px;padding:0}
.of-fs__n{font-family:var(--of-sans);width:24px;height:24px;border-radius:50%;border:1px solid var(--of-line-2);color:var(--of-soft);font-size:12px;font-weight:700;display:grid;place-items:center}
.of-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.of-fields{grid-template-columns:1fr}}
.of-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.of-field--full{grid-column:1/-1}
.of-field span{font-size:12px;font-weight:600;color:var(--of-soft)}
.of-field input,.of-field textarea{font-family:inherit;font-size:14.5px;color:var(--of-ink);background:var(--of-surface);border:1px solid var(--of-line-2);border-radius:var(--of-r-sm);padding:12px 14px;width:100%;min-width:0}
.of-field input:focus,.of-field textarea:focus{outline:none;border-color:var(--of-ink);box-shadow:0 0 0 3px rgba(38,32,25,.06)}
.of-consent{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:#3d362d;background:var(--of-sand-2);border-radius:var(--of-r);padding:15px;line-height:1.55}
.of-consent--plain{background:transparent;padding:6px 0;color:var(--of-soft)}
.of-consent input{margin-top:2px;accent-color:var(--of-accent);width:16px;height:16px}
.of-co__secure{font-size:13px;color:var(--of-soft);margin-top:6px}
.of-co__aside{position:sticky;top:100px}
@media(max-width:880px){.of-co__aside{position:static}}
.of-co-sum{background:var(--of-surface);border:1px solid var(--of-line-2);border-radius:var(--of-r-lg);box-shadow:var(--of-sh-2);overflow:hidden}
.of-co-sum__head{display:flex;gap:14px;padding:18px;border-bottom:1px solid var(--of-line)}
.of-co-sum__img{width:92px;height:76px;border-radius:var(--of-r);overflow:hidden;flex:none}
.of-co-sum__img img{width:100%;height:100%;object-fit:cover}
.of-co-sum__t{font-family:var(--of-serif);font-size:18px}
.of-co-sum__loc{font-size:12.5px;color:var(--of-soft);margin-top:3px}
.of-co-sum__body{padding:18px}
.of-co-sum__when{display:flex;justify-content:space-between;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.of-co-sum__when .k{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--of-soft);font-weight:700}
.of-co-sum__when .v{font-size:13.5px;font-variant-numeric:tabular-nums}
.of-co-sum__bd{padding-top:8px;border-top:1px solid var(--of-line)}
.of-co-sum__loading{color:var(--of-soft);font-size:13.5px;padding:8px 0;margin:0}
.of-co-sum__r{display:flex;justify-content:space-between;padding:5px 0;font-size:14px;color:#3d362d}
.of-co-sum__r.is-discount{color:var(--of-good)}
.of-co-sum__r span:last-child{font-variant-numeric:tabular-nums}
.of-co-sum__total{display:flex;justify-content:space-between;margin-top:8px;padding-top:12px;border-top:1px solid var(--of-line);font-family:var(--of-serif);font-size:18px}
.of-co-sum__disc{margin-top:2px}
.of-co-sum__sumrow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;cursor:pointer;list-style:none}
.of-co-sum__sumrow::-webkit-details-marker{display:none}
.of-co-sum__sumlab{display:flex;flex-direction:column;gap:1px;font-family:var(--of-serif);font-size:18px;color:#3d362d}
.of-co-sum__sumamt{display:inline-flex;align-items:center;gap:8px;font-family:var(--of-serif);font-size:18px;color:#3d362d;font-variant-numeric:tabular-nums}
.of-co-sum__toggle{font-family:inherit;font-size:12.5px;color:var(--of-soft);text-decoration:underline;font-weight:400}
.of-co-sum__toggle::after{content:"Show price details"}
.of-co-sum__disc[open] .of-co-sum__toggle::after{content:"Hide price details"}
.of-co-sum__chev{width:7px;height:7px;border-right:1.6px solid var(--of-soft);border-bottom:1.6px solid var(--of-soft);transform:rotate(45deg);transition:transform .18s ease;margin-bottom:3px}
.of-co-sum__disc[open] .of-co-sum__chev{transform:rotate(-135deg);margin-bottom:-2px}
.of-co-sum__lines{padding-top:10px}
.of-co-sum__due{font-size:12.5px;color:var(--of-soft);margin:10px 0 0;background:var(--of-sand-2);border-radius:var(--of-r-sm);padding:10px 12px}
.of-co-sum__cancel{font-size:12.5px;color:var(--of-soft);margin:8px 0 0;display:flex;gap:6px}
.of-co-sum__cancel::before{content:"↩";opacity:.7}
.of-co-sum__note{font-size:13px;color:var(--of-accent-deep);background:var(--of-sand-2);border-radius:var(--of-r-sm);padding:12px;margin:10px 0 0;line-height:1.5}
.of-co-sum__promo{font-size:12.5px;font-weight:600;color:var(--of-accent-deep);background:var(--of-accent-tint);border-radius:var(--of-r-sm);padding:8px 10px;margin:10px 0 0}
.of-co-sum__stripe{text-align:center;font-size:12px;color:var(--of-soft);background:var(--of-sand-2);border-radius:var(--of-r);padding:12px;margin-top:14px}
.of-co-sum__stripe b{color:var(--of-ink)}
.of-co-sum__pay{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;font-size:12.5px;color:var(--of-soft)}
.of-co-sum__lock{display:inline-flex;color:var(--of-soft)}
.of-stripe-wm{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:800;font-size:16px;letter-spacing:-.02em;color:#635BFF}

/* editorial two-column feature sections (Tenuta/Tailor) */
.of-feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);align-items:center;padding:clamp(56px,8vw,124px) 0}
.of-feature--reverse .of-feature__media{order:2}
@media(max-width:820px){.of-feature{grid-template-columns:1fr;gap:30px}.of-feature--reverse .of-feature__media{order:0}}
.of-feature__media{position:relative;aspect-ratio:4/5;border-radius:var(--of-r-lg);overflow:hidden;background:var(--of-sand);box-shadow:var(--of-sh-1)}
.of-feature__media picture,.of-feature__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--of-ease)}
.of-feature__media:hover img{transform:scale(1.04)}
.of-feature__media .of-map{position:absolute;inset:0;height:100%;border-radius:0;border:none}
.of-feature__body{max-width:46ch}
.of-feature__body .of-h2{margin-top:14px}
.of-feature__text{margin-top:18px;font-size:15.5px;line-height:1.85;color:#3d362d}
.of-feature__addr{margin-top:12px;font-size:14px;line-height:1.6;color:#6b6153;font-style:normal;display:flex;gap:8px}
.of-feature__addr::before{content:"\1F4CD";flex:none}
.of-feature__body .of-amen{margin-top:22px}
.of-feature__body .of-circle{margin-top:24px}
/* text variant (FAQ) — heading left, accordion right, no image */
/* tinted full-bleed band behind a feature row, to set two rows apart */
.of-feature--band{position:relative;isolation:isolate}
.of-feature--band::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100vw;z-index:-1;background:var(--of-sand-2)}
.of-feature__media{position:relative}
.of-feature__badge{position:absolute;top:16px;left:16px;z-index:2;font-family:var(--of-serif);font-size:17px;color:#fff;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(24,20,16,.42);backdrop-filter:blur(5px);font-variant-numeric:tabular-nums}
.of-feature--text{align-items:start}
.of-feature--text .of-feature__head{position:sticky;top:104px}
@media(max-width:820px){.of-feature--text .of-feature__head{position:static}}
.of-feature--text .of-feature__head .of-h2{margin-top:14px}

/* triptych — editorial collage: eyebrow top-left, three staggered photos, big
   serif line + discover badge bottom-right (from the reference layouts) */
.of-triptych{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.6vw,36px) clamp(14px,2vw,26px);align-items:end;padding:clamp(56px,8vw,120px) 0}
.of-triptych__ey{grid-column:1/6;grid-row:1;align-self:start;font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:var(--of-accent)}
.of-triptych figure{margin:0;overflow:hidden;border-radius:var(--of-r-lg);background:var(--of-sand);box-shadow:var(--of-sh-1)}
.of-triptych figure img,.of-triptych figure picture{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--of-ease)}
.of-triptych figure:hover img{transform:scale(1.04)}
.of-triptych__a{grid-column:1/5;grid-row:2;aspect-ratio:5/4}
.of-triptych__b{grid-column:5/9;grid-row:1/3;aspect-ratio:3/4}
.of-triptych__c{grid-column:9/13;grid-row:1;aspect-ratio:5/4}
.of-triptych__copy{grid-column:9/13;grid-row:2;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.of-triptych__t{font-family:var(--of-serif);font-size:clamp(26px,3vw,44px);line-height:1.06;letter-spacing:-.02em;color:var(--of-ink);text-wrap:balance;margin:0}
@media(max-width:820px){
  .of-triptych{grid-template-columns:1fr 1fr;gap:16px}
  .of-triptych__ey{grid-column:1/-1;grid-row:auto}
  .of-triptych__a,.of-triptych__c{grid-column:span 1;grid-row:auto;aspect-ratio:1/1}
  .of-triptych__b{grid-column:1/-1;grid-row:auto;aspect-ratio:4/3}
  .of-triptych__copy{grid-column:1/-1;grid-row:auto;margin-top:6px}
}

/* straddle — a wide photo with the big serif line sitting across its lower edge */
.of-straddle{position:relative;isolation:isolate;width:100vw;margin-left:calc(50% - 50vw);min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;align-items:stretch;text-align:center;padding:clamp(70px,10vh,120px) 0;color:#fff}
.of-straddle::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(80% 90% at 82% 6%,#F3927E,transparent 58%),linear-gradient(150deg,#E8715E 6%,var(--of-accent) 46%,var(--of-accent-deep))}
/* a strip of big photos flowing off the RIGHT window edge: first photo at the
   content gutter, the next running to the browser edge, the whole strip sliding
   (like the WHY THIS PLACE carousel), with arrows + autoplay */
.of-straddle__strip{width:100%;overflow-x:auto;overflow-y:hidden;padding-left:var(--of-edge);scroll-snap-type:x mandatory;scroll-padding-left:var(--of-edge);-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab}
.of-straddle__strip::-webkit-scrollbar{display:none}
.of-straddle__strip.is-grabbing{cursor:grabbing;scroll-snap-type:none}
.of-straddle__track{display:flex;gap:clamp(12px,1.6vw,22px);padding-right:var(--of-edge)}
@media(prefers-reduced-motion:reduce){.of-straddle__track{transition:none}}
.of-straddle__slide{flex:0 0 clamp(320px,58%,860px);margin:0;aspect-ratio:16/10;overflow:hidden;border-radius:var(--of-r-lg);background:var(--of-sand);box-shadow:0 26px 64px rgba(60,20,12,.34);scroll-snap-align:start}
.of-straddle__slide img,.of-straddle__slide picture{width:100%;height:100%;object-fit:cover;display:block}
.of-straddle__cap{position:relative;z-index:2;margin-top:clamp(-38px,-2vw,-20px);padding:0 var(--of-edge)}
.of-straddle__nav{display:flex;gap:12px;justify-content:center;margin-top:22px}
.of-straddle__nav button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.08);color:#fff;font-size:18px;cursor:pointer;display:grid;place-items:center;transition:border-color .2s,background .2s,transform .2s}
.of-straddle__nav button:hover{border-color:#fff;background:rgba(255,255,255,.18);transform:translateY(-2px)}
.of-straddle__t{font-family:var(--of-serif);font-size:clamp(34px,6.4vw,88px);line-height:1;letter-spacing:-.025em;color:#fff;text-wrap:balance;margin:0;text-shadow:0 2px 24px rgba(60,20,12,.4)}
.of-straddle__ey{display:block;margin-top:16px;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.85);font-weight:700}
/* Mobile: the full-viewport coral band left too much empty colour around a small
   photo. Size the section to its content and make the photo taller + wider. */
@media(max-width:760px){.of-straddle{min-height:auto;padding:clamp(44px,11vw,84px) 0}.of-straddle__slide{flex-basis:86%;aspect-ratio:4/5}}

/* sticky booking dock — pinned to the browser edge, expands up on hover/click */
.of-dock{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--of-surface);
  border-top:1px solid var(--of-line);box-shadow:0 -12px 34px rgba(38,32,25,.12)}
.of-dock__panel{max-height:0;overflow:hidden;background:var(--of-sand-2);transition:max-height .38s var(--of-ease)}
.of-dock:hover .of-dock__panel,.of-dock:focus-within .of-dock__panel,.of-dock.is-open .of-dock__panel{max-height:72px}
.of-dock__panel p{margin:0;padding:14px var(--of-edge);font-size:14px;color:var(--of-soft)}
.of-dock__panel p b{color:var(--of-ink);font-style:italic;font-family:var(--of-serif)}
.of-dock__bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px var(--of-edge)}
.of-dock__title{font-family:var(--of-serif);font-size:clamp(17px,2.2vw,21px)}
.of-dock__title span{color:var(--of-soft);font-family:var(--of-sans);font-size:13px;margin-left:10px}
@media(max-width:560px){.of-dock__title span{display:none}}
.of-dock__cta{white-space:nowrap}
body:has(.of-dock){padding-bottom:66px}

/* floating booking CTA — appears after the hero, no bar */
.of-floatcta{position:fixed;right:var(--of-edge);bottom:24px;transform:translateY(24px);z-index:50;display:inline-flex;align-items:center;gap:9px;
  background:linear-gradient(135deg,#EA7060,var(--of-accent) 45%,var(--of-accent-deep));color:#fff;font-weight:600;font-size:14.5px;letter-spacing:.01em;
  padding:14px 24px;border-radius:var(--of-pill);box-shadow:0 12px 30px rgba(221,94,76,.36);text-decoration:none;
  opacity:0;pointer-events:none;transition:opacity .35s var(--of-ease),transform .35s var(--of-ease),box-shadow .2s}
.of-floatcta.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.of-floatcta.is-hidden{opacity:0!important;pointer-events:none!important;transform:translateY(24px)}
.of-floatcta:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(221,94,76,.42)}
.of-floatcta svg{opacity:.92}

/* header 'My booking' — gradient + icon, less flat */
.of-btn--book{background:linear-gradient(135deg,#EA7060,var(--of-accent) 45%,var(--of-accent-deep));background-size:170% 170%;background-position:0% 0%;color:#fff;
  transition:background-position .5s var(--of-ease),transform .2s var(--of-ease),box-shadow .2s}
.of-btn--book:hover{background-image:linear-gradient(135deg,var(--of-accent-deep),#a5382a);background-position:0 0;transform:translateY(-2px);box-shadow:0 10px 24px rgba(221,94,76,.34)}
.of-btn--book svg{opacity:.92}

/* big media cards (Cleauv-style) — intro + 3 rounded media */
.of-cards-sec{padding:clamp(52px,8vw,116px) 0}
.of-cards-sec__head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:start;margin-bottom:clamp(32px,4.5vw,60px)}
@media(max-width:760px){.of-cards-sec__head{grid-template-columns:1fr;gap:18px;align-items:start}}
.of-cards-sec__lead{font-size:16.5px;line-height:1.75;color:var(--of-soft);margin:0;max-width:46ch}
.of-cards-sec__aside .of-circle{margin-top:20px}
.of-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
@media(max-width:760px){.of-cards{grid-template-columns:1fr;gap:20px}}
.of-card{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--of-r-lg);overflow:hidden;background:var(--of-sand);text-decoration:none;box-shadow:var(--of-sh-1)}
.of-card__media{position:absolute;inset:0}
.of-card__media picture,.of-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--of-ease)}
.of-card:hover .of-card__media img{transform:scale(1.05)}
.of-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,14,10,.64),rgba(18,14,10,.05) 46%,transparent 70%)}
.of-card__cap{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;color:#fff}
.of-card__tag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.88;font-weight:700}
.of-card__label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-family:var(--of-serif);font-size:clamp(19px,1.8vw,22px);margin-top:8px}
.of-card__label b{color:#F2C879;font-weight:400;transition:transform .25s var(--of-ease)}
.of-card:hover .of-card__label b{transform:translateX(5px)}
/* alternate full-width background behind the cards section */
.of-cards-sec{position:relative;isolation:isolate}
.of-cards-sec::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100vw;background:var(--of-sand-2);z-index:-1}

/* stats — sticky heading left, big stacked numbers right */
.of-stats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,88px);align-items:start;padding:clamp(60px,9vw,130px) 0;border-top:1px solid var(--of-line);border-bottom:1px solid var(--of-line)}
@media(max-width:760px){.of-stats{grid-template-columns:1fr;gap:40px}.of-stat{min-height:34vh}}
/* Mobile coral stats: 2x2 compact grid, always visible (no scroll-reveal that
   spreads the four numbers over ~1.5 screens of coral). */
@media(max-width:760px){.of-stats--coral .of-stats__list{display:grid;grid-template-columns:1fr 1fr;gap:22px 16px;margin-top:34px}.of-stats--coral .of-stat,.of-stats--coral .of-stat.is-active{min-height:0;opacity:1;transform:none;transition:none;animation:none}}
.of-stats__head{position:sticky;top:104px}
@media(max-width:760px){.of-stats__head{position:static}}
.of-stats__title{font-family:var(--of-serif);font-size:clamp(28px,3.8vw,46px);line-height:1.08;letter-spacing:-.02em;margin-top:16px;max-width:15ch}
.of-stats__list{display:flex;flex-direction:column}
.of-stat{min-height:44vh;display:flex;flex-direction:column;justify-content:center;opacity:.12;transition:opacity .55s var(--of-ease)}
.of-stat.is-active{opacity:1}
@media(prefers-reduced-motion:reduce){.of-stat{min-height:auto;opacity:1;padding:clamp(18px,2vw,30px) 0}}
.of-stat__n{display:block;font-family:var(--of-serif);font-size:clamp(64px,11vw,142px);line-height:.86;letter-spacing:-.04em;color:var(--of-accent)}
.of-stat__l{display:block;font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--of-soft);margin-top:16px}

/* hero inset card — glass, bottom-right */
.of-hero__card{position:absolute;right:clamp(20px,5vw,72px);bottom:clamp(56px,9vh,110px);z-index:3;width:min(86vw,300px);display:flex;flex-direction:column;
  padding:20px 22px;border-radius:var(--of-r-lg);text-decoration:none;color:#fff;
  background:rgba(255,255,255,.10);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:0 24px 60px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.42),inset 0 0 0 1px rgba(255,255,255,.10);
  transition:transform .3s var(--of-ease),box-shadow .3s;animation:of-rise 1s var(--of-ease) .55s both}
.of-hero__card{transition:transform .3s var(--of-ease),box-shadow .3s,background .3s}
.of-hero__card:hover{transform:translateY(-4px);background:rgba(18,14,10,.5);box-shadow:0 30px 72px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.12)}
.of-hero__card-tag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.85;font-weight:700}
.of-hero__card-title{font-family:var(--of-serif);font-size:22px;margin-top:3px}
.of-hero__card-meta{font-size:13px;opacity:.92;margin-top:3px}
.of-hero__card-meta .of-stars{color:#F2C879}
.of-hero__card-cta{margin-top:13px;font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px}
.of-hero__card-cta b{color:#F2C879;transition:transform .25s var(--of-ease)}
.of-hero__card:hover .of-hero__card-cta b{transform:translateX(5px)}
@media(min-width:641px) and (max-width:680px){.of-hero__card{display:none}}
/* Mobile: show the Book direct card in the hero flow, under the heading. */
@media(max-width:640px){.of-hero__card{display:flex;position:static;inset:auto;width:auto;margin:18px 0 0;animation:none}}

/* hero booking bar (variant B) — glass search bar */
.of-hero__bar{display:flex;align-items:stretch;gap:4px;margin-top:30px;max-width:660px;
  background:rgba(255,255,255,.12);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-radius:var(--of-pill);padding:6px;box-shadow:0 22px 54px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.35)}
.of-hero__bar-f{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:none;border:none;border-radius:var(--of-pill);padding:11px 20px;cursor:pointer;text-align:left;color:#fff;transition:background .2s}
.of-hero__bar-f:hover{background:rgba(255,255,255,.14)}
.of-hero__bar-f .l{font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.82;font-weight:700}
.of-hero__bar-f .v{font-size:14px}
.of-hero__bar-cta{flex:none;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#EA7060,var(--of-accent) 45%,var(--of-accent-deep));color:#fff;font-weight:600;font-size:14px;border-radius:var(--of-pill);padding:0 26px;text-decoration:none;transition:transform .2s var(--of-ease),box-shadow .2s}
.of-hero__bar-cta:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(221,94,76,.42)}
.of-hero__bar-cta b{transition:transform .25s var(--of-ease)}
.of-hero__bar-cta:hover b{transform:translateX(4px)}
@media(max-width:640px){.of-hero__bar{flex-wrap:wrap;border-radius:var(--of-r-lg);max-width:none;gap:2px}.of-hero__bar-f{flex:1 1 40%}.of-hero__bar-cta{flex:1 1 100%;justify-content:center;padding:13px}}

/* full-bleed photo band — headline + arrow, parallax */
.of-band{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-top:0;margin-bottom:0;
  min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;
  background:var(--of-band-img) center/cover no-repeat;background-attachment:fixed}
.of-band::after{content:"";position:absolute;inset:0;background:rgba(18,14,10,.5)}
.of-band__in{position:relative;z-index:1;padding:0 clamp(20px,5vw,40px)}
.of-band__ey{font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:700;opacity:.9}
.of-band__t{font-family:var(--of-serif);font-size:clamp(34px,6vw,68px);line-height:1.06;margin:16px 0 0;letter-spacing:-.02em}
.of-band__cta{margin-top:28px;display:inline-flex;align-items:center;gap:13px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#fff;text-decoration:none}
.of-band__cta .c{width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.5);display:grid;place-items:center;font-size:18px;transition:transform .25s var(--of-ease),background .25s}
.of-band__cta:hover .c{transform:translateX(5px);background:rgba(255,255,255,.16)}
@media(max-width:820px){.of-band{background-attachment:scroll}}
@media(prefers-reduced-motion:reduce){.of-band{background-attachment:scroll}}

/* dark reviews section — contrast band */
.of-reviews{position:relative;isolation:isolate;padding:clamp(72px,10vw,140px) 0;color:#EDE6DA}
.of-reviews::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100vw;z-index:-2;background:var(--of-reviews-img,#1a1512) center/cover no-repeat;background-attachment:fixed}
.of-reviews::after{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100vw;z-index:-1;background:linear-gradient(rgba(18,14,10,.8),rgba(18,14,10,.66))}
@media(max-width:820px){.of-reviews::before{background-attachment:scroll}}
@media(prefers-reduced-motion:reduce){.of-reviews::before{background-attachment:scroll}}
.of-reviews__head{margin-bottom:clamp(30px,4.5vw,54px)}
.of-reviews h2{color:#fff;font-family:var(--of-serif);font-size:clamp(26px,3.4vw,40px);display:flex;align-items:center;gap:12px;margin-top:12px}
.of-reviews h2 .of-stars{color:var(--of-gold)}
.of-reviews__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.of-reviews__nav{display:flex;gap:10px}
.of-reviews__nav button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.3);color:#fff;font-size:18px;display:grid;place-items:center;background:rgba(255,255,255,.05);transition:border-color .2s,background .2s,transform .2s}
.of-reviews__nav button:hover{border-color:#fff;background:rgba(255,255,255,.12);transform:translateY(-2px)}
/* Transform-based carousel: the whole strip translates (GPU, obvious travel),
   no native scroll / scroll-snap to fight the motion. JS sets translateX. */
.of-reviews__view{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab}
.of-reviews__view::-webkit-scrollbar{display:none}
.of-reviews__view.is-grabbing{cursor:grabbing;scroll-snap-type:none}
.of-reviews__track{--rgap:clamp(18px,2.4vw,30px);display:flex;gap:var(--rgap)}
@media(prefers-reduced-motion:reduce){.of-reviews__track{transition:none}}
.of-review{margin:0;flex:0 0 calc((100% - 2 * var(--rgap)) / 3);box-sizing:border-box;scroll-snap-align:start;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--of-r-lg);padding:clamp(22px,3vw,32px)}
@media(max-width:980px){.of-review{flex-basis:calc((100% - var(--rgap)) / 2)}}
@media(max-width:640px){.of-review{flex-basis:100%}}
/* Native swipe is the base behaviour on every breakpoint now; on phones we just
   drop the arrows in favour of finger-scroll. */
@media(max-width:760px){.of-reviews__nav{display:none}}
.of-review__top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.of-review__av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#C9AF8C,#7d6b4e);flex:none}
.of-review__n{font-weight:600;font-size:14px;color:#fff}
.of-review__d{font-size:12px;color:#9A8E7C}
.of-review blockquote{margin:0;font-family:var(--of-serif);font-style:italic;font-size:14.5px;line-height:1.5;color:#D8CFC0}

/* image + tabs — explore the space */
.of-space{display:grid;grid-template-columns:0.82fr 1.18fr;gap:clamp(48px,7vw,120px);align-items:center;padding:clamp(52px,8vw,116px) 0}
@media(max-width:820px){.of-space{grid-template-columns:1fr;gap:28px}.of-space__media{aspect-ratio:4/3}}
/* desktop: fixed section height so expanding a tab never reflows the page below */
@media(min-width:821px){
  .of-space{align-items:stretch;min-height:clamp(460px,58vh,600px)}
  .of-space__media{aspect-ratio:auto;height:100%}
  .of-space__panel{display:flex;flex-direction:column;justify-content:center;min-width:0}
}
.of-space__media{position:relative;min-width:0;border-radius:var(--of-r-lg);overflow:hidden;background:var(--of-sand);box-shadow:var(--of-sh-1)}
.of-space__img{position:absolute;inset:0;opacity:0;transition:opacity .55s var(--of-ease)}
.of-space__img.is-active{opacity:1}
.of-space__img picture,.of-space__img img{width:100%;height:100%;object-fit:cover;display:block}
.of-space__tab{display:block;width:100%;text-align:left;background:none;border:none;border-top:1px solid var(--of-line);padding:20px 0;cursor:pointer}
.of-space__tab:last-child{border-bottom:1px solid var(--of-line)}
.of-space__tab-h{font-family:var(--of-sans);font-size:clamp(18px,2.1vw,23px);font-weight:500;display:flex;align-items:center;gap:10px;color:var(--of-faint);letter-spacing:-.01em;transition:color .2s}
.of-space__tab-h::after{content:"+";margin-left:auto;font-size:20px;line-height:1;color:var(--of-faint);transition:color .2s}
.of-space__num{color:inherit;font-variant-numeric:tabular-nums}
.of-space__tab:hover .of-space__tab-h{color:var(--of-ink)}
.of-space__tab.is-active .of-space__tab-h{color:var(--of-ink);font-weight:600}
.of-space__tab.is-active .of-space__tab-h::after{content:"×";color:var(--of-ink)}
.of-space__tab-b{display:block;max-height:0;overflow:hidden;opacity:0;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;letter-spacing:.05em;line-height:1.9;text-transform:uppercase;color:var(--of-soft);transition:max-height .4s var(--of-ease),opacity .3s,margin .35s}
.of-space__tab.is-active .of-space__tab-b{max-height:150px;opacity:1;margin-top:12px}

/* ---- plugin booking widget (oasis-bw) — brand layer over structural CSS ---- */
.of-book .oasis-bw__head{margin-bottom:14px}
.of-book .oasis-bw__price-num{font-family:var(--of-serif);font-weight:400;font-size:28px}
.of-book .oasis-bw__price-unit{color:var(--of-soft)}
.of-book .oasis-bw__promo{font-size:12.5px;font-weight:600;color:var(--of-accent-deep);background:var(--of-accent-tint);border-radius:var(--of-r-sm);padding:8px 10px;margin:0 0 4px}
.of-book .oasis-bw__fields,.of-book .oasis-bw__guests-toggle,.of-book .oasis-bw__calendar{border-color:var(--of-line-2)}
.of-book .oasis-bw__guests-toggle{transition:border-color .15s;cursor:pointer}
.of-book .oasis-bw__guests-toggle:hover{border-color:var(--of-ink)}
.of-book .oasis-bw__guests-menu{background:var(--of-surface);box-shadow:var(--of-sh-2);border-color:var(--of-line-2)}
.of-book .oasis-bw__grow + .oasis-bw__grow{border-top-color:var(--of-line)}
.of-book .oasis-bw__grow-h{color:var(--of-ink)}
.of-book .oasis-bw__grow-s,.of-book .oasis-bw__guests-note{color:var(--of-soft)}
.of-book .oasis-bw__guests-done{color:var(--of-ink);text-underline-offset:3px}
.of-book .oasis-bw__fields .oasis-bw__field+.oasis-bw__field{border-left-color:var(--of-line-2)}
.of-book .oasis-bw__field-label{color:var(--of-soft);font-weight:700}
.of-book .oasis-bw__stepper button,.of-book .oasis-bw__cal-arrow{border-color:var(--of-line-2);color:var(--of-ink);transition:border-color .15s}
.of-book .oasis-bw__stepper button:hover,.of-book .oasis-bw__cal-arrow:hover{border-color:var(--of-ink)}
.of-book .oasis-bw__calendar{background:var(--of-surface);box-shadow:var(--of-sh-2);border-color:var(--of-line-2)}
/* one month in the booking card so the grid never overflows the border */
/* two months side by side (Airbnb-style) on a wide popover that opens leftward
   from the card's right edge; single month + card-width on small screens */
.of-book .oasis-bw__months{grid-template-columns:1fr;gap:26px}
@media(min-width:600px){
  .of-book .oasis-bw__calendar{left:auto;right:0;width:min(640px,94vw)}
  .of-book .oasis-bw__months{grid-template-columns:1fr 1fr}
}
.of-book .oasis-bw__month-name{font-family:var(--of-serif);font-size:15px}
.of-book .oasis-bw__day.is-free:hover{background:var(--of-sand)}
.of-book .oasis-bw__day.is-between{background:var(--of-accent-tint)}
.of-book .oasis-bw__day.is-start,.of-book .oasis-bw__day.is-end{background:var(--of-accent);color:#fff;font-weight:600}
.of-book .oasis-bw__day.is-start{border-radius:50% 0 0 50%}
.of-book .oasis-bw__day.is-end{border-radius:0 50% 50% 0}
.of-book .oasis-bw__cal-clear{background:none;border:none;font:inherit;font-size:12px;color:var(--of-soft);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.of-book .oasis-bw__cal-clear:hover{color:var(--of-ink)}
.of-book .oasis-bw__cal-msg{color:var(--of-accent-deep);font-weight:600}
.of-book .oasis-bw__cal-x{color:var(--of-soft);border-radius:50%;transition:color .15s,background .15s}
.of-book .oasis-bw__cal-x:hover{color:var(--of-ink);background:var(--of-sand)}
.of-book .oasis-bw__reserve{background:var(--of-accent);color:#fff;font-weight:600;transition:background .18s}
.of-book .oasis-bw__reserve:hover{background:var(--of-accent-deep)}
.of-book .oasis-bw__note{color:var(--of-soft)}
.of-book .oasis-bw__msg{color:var(--of-accent-deep);font-size:13px;margin:10px 0 0}
.of-book .oasis-bw__breakdown{border-top-color:var(--of-line)}
.of-book .oasis-bw__bd-row{color:#3d362d;font-size:14px}
.of-book .oasis-bw__bd-row.is-discount{color:var(--of-good)}
.of-book .oasis-bw__bd-sum{font-family:var(--of-serif);font-weight:400;font-size:18px}
.of-book .oasis-bw__bd-lab{font-family:var(--of-serif)}
.of-book .oasis-bw__bd-toggle{font-family:var(--of-sans);color:var(--of-soft)}
.of-book .oasis-bw__bd-due{color:var(--of-soft);background:var(--of-sand-2);border-radius:var(--of-r-sm);padding:10px 12px}

/* editorial header above the gallery — eyebrow + one-line summary */
.of-lede-head{padding:clamp(30px,5vw,58px) 0 clamp(6px,1.5vw,16px);max-width:min(100%,640px);margin-left:auto;text-align:right}
.of-lede-head__t{font-family:var(--of-serif);font-size:clamp(24px,3.4vw,40px);line-height:1.14;letter-spacing:-.015em;margin:12px 0 0}
@media(max-width:640px){.of-lede-head{text-align:left;max-width:none;margin-left:0}}

/* booking section — set on its own tinted full-bleed panel */
/* z-index:2 (not isolation) so the two-month calendar popover renders above the
   next (coral) section instead of being clipped by it; extra bottom room so the
   open calendar mostly sits over the cream field. */
.of-grid{position:relative;z-index:2;padding-bottom:clamp(120px,20vh,300px)}
.of-grid::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100vw;
  background:linear-gradient(180deg,var(--of-sand-2),var(--of-bg) 94%);z-index:-1}
.of-grid__lead{margin:0 0 clamp(16px,2vw,22px)}
.of-grid__lead .of-h2{margin-bottom:0}
.of-book-intro{margin-bottom:20px}
.of-book-intro__t{font-family:var(--of-serif);font-size:clamp(20px,2.4vw,26px);line-height:1.2;letter-spacing:-.01em;margin:10px 0 0;color:var(--of-ink)}

/* gallery lightbox */
.of-gallery figure{cursor:pointer}
.of-lightbox{position:fixed;inset:0;z-index:120;display:none;place-items:center;background:rgba(16,12,9,.92);
  opacity:0;transition:opacity .3s var(--of-ease);padding:clamp(16px,4vw,48px)}
.of-lightbox.is-open{display:grid;opacity:1}
.of-lightbox img{max-width:min(94vw,1280px);max-height:88vh;width:auto;height:auto;border-radius:var(--of-r);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.of-lightbox__btn{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:22px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.25);transition:background .2s,border-color .2s}
.of-lightbox__btn:hover{background:rgba(255,255,255,.22);border-color:#fff}
.of-lightbox__prev{left:clamp(12px,3vw,34px)}.of-lightbox__next{right:clamp(12px,3vw,34px)}
.of-lightbox__close{position:absolute;top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px);width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:22px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.25)}
.of-lightbox__close:hover{background:rgba(255,255,255,.22)}
.of-lightbox__count{position:absolute;bottom:clamp(14px,3vw,28px);left:50%;transform:translateX(-50%);color:#fff;font-size:13px;letter-spacing:.1em;opacity:.8;font-variant-numeric:tabular-nums}
@media(max-width:560px){.of-lightbox__btn{width:44px;height:44px}}

/* ================= home + subpages ================= */
/* hero CTA row (home) */
.of-hero__ctas{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.of-hero__ctas .of-btn--ghost{border-color:rgba(255,255,255,.55);color:#fff}
.of-hero__ctas .of-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* rotating "discover" badge (Tenuta) */
.of-discover{position:relative;width:118px;height:118px;display:inline-grid;place-items:center;text-decoration:none;color:inherit}
.of-discover svg{position:absolute;inset:0;width:100%;height:100%;animation:of-spin 20s linear infinite}
.of-discover svg text{font-family:var(--of-sans);font-size:8.1px;letter-spacing:2.3px;text-transform:uppercase;font-weight:600;fill:currentColor}
.of-discover__arr{font-size:24px;transition:transform .3s var(--of-ease)}
.of-discover:hover .of-discover__arr{transform:translateX(5px)}

/* generic subpage header */
.of-page-head{padding:clamp(122px,17vh,190px) 0 clamp(28px,4vw,52px)}
.of-page-head__t{font-family:var(--of-serif);font-size:clamp(42px,7.5vw,92px);line-height:1.01;letter-spacing:-.025em;margin:16px 0 0;max-width:16ch}
.of-page-head__t .of-it{color:var(--of-soft)}
.of-page-head__lead{font-size:clamp(16px,1.8vw,19px);line-height:1.8;color:var(--of-soft);max-width:58ch;margin:24px 0 0}

/* numbered principles list (Cleauv, simplified) */
.of-principles{border-top:1px solid var(--of-line);margin-top:6px}
.of-principles__row{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(18px,4vw,60px);row-gap:6px;
  padding:clamp(24px,3.4vw,40px) 0;border-bottom:1px solid var(--of-line)}
.of-principles__n{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--of-accent);font-weight:600;padding-top:10px}
.of-principles__h{font-family:var(--of-serif);font-size:clamp(23px,3vw,34px);letter-spacing:-.01em}
.of-principles__b{grid-column:2;color:var(--of-soft);font-size:15.5px;line-height:1.75;max-width:60ch}

/* property name/tag under the home apartment cards */
.of-card__name{font-family:var(--of-serif);font-size:clamp(20px,1.9vw,24px)}

/* Apartments page — big editorial rows reuse .of-feature; add a facts strip */
.of-plist__facts{display:flex;gap:22px;flex-wrap:wrap;color:var(--of-soft);font-size:14px;margin-top:18px}
.of-plist__facts b{color:var(--of-ink)}
.of-plist__price{font-family:var(--of-serif);font-size:22px;margin-top:16px}
.of-plist__price span{font-size:13px;color:var(--of-soft);font-family:var(--of-sans)}

/* contact */
.of-contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,88px);align-items:start;padding:0 0 clamp(70px,10vw,120px)}
@media(max-width:820px){.of-contact{grid-template-columns:1fr;gap:44px}}
.of-contact__info dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--of-accent);font-weight:700;margin-top:28px}
.of-contact__info dt:first-child{margin-top:0}
.of-contact__info dd{margin:7px 0 0;font-size:18px;font-family:var(--of-serif);line-height:1.5}
.of-contact__info dd a{border-bottom:1px solid var(--of-line-2)}.of-contact__info dd a:hover{border-color:var(--of-accent)}
.of-contact__form{background:var(--of-surface);border:1px solid var(--of-line-2);border-radius:var(--of-r-lg);box-shadow:var(--of-sh-2);padding:clamp(24px,3.4vw,38px)}
.of-contact__form .of-fields{margin-bottom:16px}
.of-contact__note{font-size:12.5px;color:var(--of-soft);margin:14px 0 0}

/* masonry gallery */
.of-masonry{columns:3 300px;column-gap:clamp(12px,1.6vw,18px);padding:0 0 clamp(70px,10vw,120px)}
.of-masonry figure{margin:0 0 clamp(12px,1.6vw,18px);break-inside:avoid;border-radius:var(--of-r);overflow:hidden;background:var(--of-sand);cursor:pointer}
.of-masonry img{width:100%;height:auto;display:block;transition:transform .6s var(--of-ease)}
.of-masonry figure:hover img{transform:scale(1.05)}

/* final CTA band — content left, rotating badge right */
.of-cta-band{display:flex;align-items:center;justify-content:space-between;gap:clamp(30px,5vw,90px);text-align:left;padding:clamp(72px,11vw,150px) 0}
.of-cta-band__body{flex:1;min-width:0}
/* host row (avatar + label) above the heading, exactly like the Contact page */
.of-cta-band__body .of-hosts__label{color:var(--of-accent)}
.of-cta-band__ey{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--of-accent);font-weight:700}
.of-cta-band__t{font-family:var(--of-serif);font-size:clamp(34px,5.2vw,64px);line-height:1.05;letter-spacing:-.02em;margin:16px 0 0;max-width:16ch;text-wrap:balance}
.of-cta-band__sub{color:var(--of-soft);margin:16px 0 0;max-width:46ch;font-size:16px}
.of-cta-band__body .of-btn{margin-top:26px}
@media(max-width:760px){.of-cta-band{flex-direction:column;align-items:flex-start;gap:34px}}

/* long-form prose (legal + simple pages) */
.of-prose{max-width:68ch;padding:0 0 clamp(70px,10vw,120px);font-size:16.5px;line-height:1.85;color:#3d362d}
.of-prose h2{font-family:var(--of-serif);font-size:clamp(23px,3vw,32px);margin:clamp(30px,4vw,48px) 0 14px;letter-spacing:-.01em;color:var(--of-ink)}
.of-prose h3{font-family:var(--of-serif);font-size:20px;margin:28px 0 10px;color:var(--of-ink)}
.of-prose p{margin:0 0 1.1em}
.of-prose ul,.of-prose ol{margin:0 0 1.2em;padding-left:1.2em}
.of-prose li{margin:6px 0}
.of-prose a{color:var(--of-accent-deep);border-bottom:1px solid var(--of-line-2)}
.of-prose a:hover{border-color:var(--of-accent)}
.of-prose strong{color:var(--of-ink)}
.of-prose__note{font-size:13px;color:var(--of-soft);background:var(--of-sand-2);border-radius:var(--of-r);padding:14px 16px;margin:0 0 30px}

/* reviews as a wrapping grid (dedicated Reviews page) */
.of-reviews__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(20px,3vw,40px)}

/* ===== landing: lede strip + coral stats band + cards slider ===== */
/* narrow tinted strip carrying the subtitle (balances the solo heading) */
.of-lede-band{width:100vw;margin-left:calc(50% - 50vw);background:var(--of-sand-2);border-top:1px solid var(--of-line);border-bottom:1px solid var(--of-line)}
.of-lede-band__in{max-width:var(--of-maxw);margin:0 auto;padding:clamp(22px,3.4vw,40px) var(--of-edge);display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.of-lede-band__left{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--of-soft);white-space:nowrap}
.of-lede-band__left b{font-family:var(--of-serif);font-size:22px;color:var(--of-ink)}
.of-lede-band__left .of-stars{font-size:15px}
.of-lede-band .of-lede-head{padding:0;max-width:min(100%,640px)}
@media(max-width:640px){.of-lede-band__in{gap:14px}.of-lede-band .of-lede-head{text-align:left}}

/* intro section under the hero — subtitle (right) + gallery share one tinted
   full-bleed field, equal top/bottom padding */
.of-intro-sec{width:100vw;margin-left:calc(50% - 50vw);background:var(--of-sand-2);padding:clamp(40px,5.5vw,74px) 0}
.of-intro-sec__in{max-width:var(--of-maxw);margin:0 auto;padding:0 clamp(18px,3.5vw,40px)}
.of-intro-sec__head{display:flex;justify-content:space-between;align-items:center;gap:clamp(24px,4vw,64px);margin-bottom:clamp(28px,4vw,46px)}
.of-intro-sec__lead{flex:1;min-width:0}
.of-intro-sec__t{font-family:var(--of-serif);font-size:clamp(24px,3.2vw,38px);line-height:1.22;letter-spacing:-.015em;margin:12px 0 0;max-width:38ch}
.of-intro-sec .of-discover{flex:none;color:var(--of-ink)}
.of-intro-sec .of-gallery{margin:0}
@media(max-width:760px){.of-intro-sec__head{flex-direction:column;align-items:flex-start;gap:22px}}

/* full-screen coral stats band (landing) — white type, all visible */
/* coral stats — full-bleed coral field over the base sticky-head + tall list;
   each number rises from below and fades in one at a time on scroll, fading
   back out as the next arrives (footer's .of-stat observer drives is-active) */
.of-stats--coral{position:relative;isolation:isolate;border:none;color:#fff}
.of-stats--coral::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100vw;z-index:-1;
  background:radial-gradient(72% 62% at 82% 6%,#F18B77,transparent 58%),linear-gradient(152deg,#E86F5C 6%,var(--of-accent) 46%,var(--of-accent-deep))}
.of-stats--coral .of-eyebrow-sec{color:rgba(255,255,255,.82)}
.of-stats--coral .of-stats__title{color:#fff;font-size:clamp(40px,6vw,76px);max-width:12ch}
/* stacked taglines separated by hairlines, under the coral heading */
.of-coral-notes{list-style:none;margin:clamp(26px,3.5vw,42px) 0 0;padding:0}
.of-coral-notes li{display:flex;align-items:center;gap:13px;padding:13px 0;border-top:1px solid rgba(255,255,255,.3);font-family:var(--of-serif);font-size:clamp(16px,1.9vw,21px);line-height:1.25;color:#fff;white-space:nowrap}
.of-coral-notes li:first-child{border-top:none}
.of-coral-notes svg{flex:none;color:rgba(255,255,255,.82)}
/* giant faint Oasis watermark in the coral field (like the contact page) —
   clipped to the section by a wrapper so it never causes page overflow */
.of-coral-mark-wrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.of-coral-mark{position:absolute;left:-1vw;bottom:5vh;user-select:none;
  font-family:var(--of-serif);font-size:min(44vh,42vw);line-height:.74;color:rgba(255,255,255,.08);white-space:nowrap}
.of-coral-mark b{color:rgba(255,255,255,.16)}
/* section watermark on a light field (faint ink Oasis, coral dot) */
.of-hasmark{position:relative;isolation:isolate}
.of-secmark-wrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.of-secmark{position:absolute;left:-1vw;bottom:-3vh;user-select:none;font-family:var(--of-serif);font-size:min(38vh,38vw);line-height:.74;color:rgba(38,32,25,.06);white-space:nowrap}
.of-secmark b{color:rgba(221,94,76,.16)}
/* modest, even gap between the coral field and the photo section that follows
   (flush the collage's top row so the gap stays consistent) */
.of-stats--coral + .of-collage{padding-top:clamp(32px,4.5vw,56px);margin-top:0}
.of-stats--coral + .of-cards-sec{padding-top:0;margin-top:0}
.of-stats--coral + .of-collage .a,.of-stats--coral + .of-collage .c{margin-top:0}
.of-stats--coral .of-stat{opacity:1;transform:none;transition:none}
.of-stats--coral .of-stat.is-active{transform:none}
.of-stats--coral .of-stat__n{color:#fff}
.of-stats--coral .of-stat__l{color:rgba(255,255,255,.82)}
@media(prefers-reduced-motion:reduce){.of-stats--coral .of-stat{transform:none}}
.of-stats--coral .of-stat__n{color:#fff;font-size:clamp(54px,8vw,108px)}
.of-stats--coral .of-stat__l{color:rgba(255,255,255,.82);font-size:15px;letter-spacing:.14em;margin-top:18px}

/* full-bleed card carousel — same transform mechanism as the reviews slider:
   the whole strip translates on GPU inside an overflow:hidden viewport. */
.of-cards--view{overflow-x:auto;overflow-y:hidden;width:100vw;margin-left:calc(50% - 50vw);padding:0 clamp(16px,3vw,44px);scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab}
.of-cards--view::-webkit-scrollbar{display:none}
.of-cards--view.is-grabbing{cursor:grabbing;scroll-snap-type:none}
.of-cards--slider{display:flex;grid-template-columns:none;gap:clamp(16px,2vw,26px);padding-bottom:6px}
@media(prefers-reduced-motion:reduce){.of-cards--slider{transition:none}}
.of-cards--slider .of-card{flex:0 0 clamp(240px,23vw,330px);cursor:pointer;padding:0;text-align:left;width:auto;scroll-snap-align:start}
@media(max-width:640px){.of-cards--slider .of-card{flex-basis:76%}}
/* Native swipe is the base behaviour on every breakpoint now (see .of-cards--view above). */

/* contact page — coral field with a giant logo watermark; heading + form side
   by side, sized to one screen on desktop */
.of-contact-page{position:relative;overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);color:#fff;
  min-height:100vh;min-height:100svh;display:flex;align-items:center;
  padding:clamp(96px,13vh,140px) var(--of-edge) clamp(40px,6vh,72px);
  background:
    radial-gradient(62% 72% at 14% 16%,#F59A87,transparent 62%),
    radial-gradient(80% 88% at 92% 92%,var(--of-accent-deep),transparent 56%),
    linear-gradient(150deg,#EE7C68 4%,var(--of-accent) 44%,var(--of-accent-deep))}
.of-contact-page__mark{position:absolute;left:-1.5vw;bottom:-9vh;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--of-serif);font-size:min(50vh,46vw);line-height:.76;color:rgba(255,255,255,.08);white-space:nowrap}
.of-contact-page__mark b{color:rgba(255,255,255,.15)}
.of-contact-page__in{position:relative;z-index:1;max-width:var(--of-maxw);margin:0 auto;width:100%;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,96px);align-items:center}
@media(max-width:860px){.of-contact-page{min-height:0;padding-top:clamp(112px,16vh,150px)}
  .of-contact-page__in{grid-template-columns:1fr;gap:36px}}
.of-contact-page .of-eyebrow-sec{color:rgba(255,255,255,.82)}
.of-contact-page__t{font-family:var(--of-serif);font-size:clamp(40px,6vw,76px);line-height:1.02;letter-spacing:-.02em;margin:14px 0 0;color:#fff}
.of-contact-page__t .of-it{color:rgba(255,255,255,.72)}
.of-contact-page__lead{font-size:clamp(15px,1.5vw,18px);line-height:1.7;color:rgba(255,255,255,.9);max-width:46ch;margin:18px 0 0}
/* contact details with icons */
.of-cinfo{display:grid;gap:clamp(12px,1.8vh,20px);margin-top:clamp(22px,3.5vh,38px)}
.of-cinfo__row{display:flex;align-items:center;gap:14px}
.of-cinfo__ic{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.32);display:grid;place-items:center;flex:none;color:#fff}
.of-cinfo dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);font-weight:700}
.of-cinfo dd{margin:2px 0 0;font-size:17px;font-family:var(--of-serif);line-height:1.3}
.of-cinfo dd a{border-bottom:1px solid rgba(255,255,255,.35)}.of-cinfo dd a:hover{border-color:#fff}
/* form — underline fields, no box */
.of-contact-page .of-contact__form{background:none;border:none;box-shadow:none;padding:0;backdrop-filter:none}
.of-contact-page .of-fields{gap:clamp(14px,2.4vh,22px) 24px;margin-bottom:clamp(18px,3vh,28px)}
.of-contact-page .of-field span{color:rgba(255,255,255,.8);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.of-contact-page .of-field input,.of-contact-page .of-field textarea{background:transparent;border:none;border-bottom:1.5px solid rgba(255,255,255,.42);border-radius:0;padding:9px 2px;color:#fff}
.of-contact-page .of-field input::placeholder,.of-contact-page .of-field textarea::placeholder{color:rgba(255,255,255,.55)}
.of-contact-page .of-field input:focus,.of-contact-page .of-field textarea:focus{outline:none;border-bottom-color:#fff;box-shadow:none}
.of-contact-page .of-field textarea{resize:vertical;min-height:58px}
.of-contact-page .of-btn--coral{background:#fff;color:var(--of-accent-deep)}
.of-contact-page .of-btn--coral:hover{background:#fff;color:var(--of-accent-deep);transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.22)}
.of-contact-page .of-contact__note{color:rgba(255,255,255,.8);font-size:12.5px;margin-top:12px}
/* host avatar row */
.of-hosts{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.of-hosts__av{width:54px;height:54px;border-radius:50%;overflow:hidden;border:2px solid var(--of-line-2);flex:none;background:var(--of-sand)}
.of-hosts__av img{width:100%;height:100%;object-fit:cover;display:block}
.of-hosts__label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--of-soft);font-weight:600}
/* white treatment on the coral contact field */
.of-contact-page .of-hosts__av{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.15)}
.of-contact-page .of-hosts__label{color:rgba(255,255,255,.85)}
/* custom date-range picker — two underline fields + a white calendar popover,
   replacing the native input/calendar (which can't be styled on the coral field) */
.of-dpick{position:relative}
.of-dpick__fields{display:grid;grid-template-columns:1fr 1fr;border-bottom:1.5px solid rgba(255,255,255,.42)}
.of-dpick__btn{display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:none;border:none;padding:9px 2px;cursor:pointer;text-align:left;color:#fff;min-width:0}
.of-dpick__btn + .of-dpick__btn{border-left:1px solid rgba(255,255,255,.26);padding-left:16px}
.of-dpick__lbl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:700}
.of-dpick__val{font-size:15px;color:#fff;font-variant-numeric:tabular-nums}
.of-dpick__cal{position:absolute;top:calc(100% + 12px);left:0;z-index:60;width:min(340px,86vw);
  background:var(--of-surface);color:var(--of-ink);border-radius:16px;box-shadow:0 26px 60px rgba(30,12,8,.42);padding:16px}
.of-dpick__cal[hidden]{display:none}
.of-dpick__cal.is-up{top:auto;bottom:calc(100% + 12px)}
.of-dpick__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.of-dpick__nav button{width:32px;height:32px;border-radius:50%;border:1px solid var(--of-line-2);background:none;cursor:pointer;color:var(--of-ink);font-size:15px;line-height:1;transition:border-color .15s}
.of-dpick__nav button:hover{border-color:var(--of-ink)}
.of-dpick__mname{font-family:var(--of-serif);font-size:16px;color:var(--of-ink)}
.of-dpick__dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.of-dpick__dow span{text-align:center;font-size:10px;letter-spacing:.04em;color:var(--of-soft);text-transform:uppercase}
.of-dpick__days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.of-dpick__day{aspect-ratio:1;border:none;background:none;cursor:pointer;border-radius:50%;font:inherit;font-size:13px;color:var(--of-ink);display:grid;place-items:center;padding:0}
.of-dpick__day.is-blank{visibility:hidden;cursor:default}
.of-dpick__day.is-off{color:var(--of-faint);cursor:not-allowed;text-decoration:line-through}
.of-dpick__day:not(.is-off):not(.is-start):not(.is-end):hover{background:var(--of-sand)}
.of-dpick__day.is-between{background:var(--of-accent-tint);border-radius:0}
.of-dpick__day.is-start,.of-dpick__day.is-end{background:var(--of-accent);color:#fff;font-weight:600}
.of-dpick__day.is-start{border-radius:50% 0 0 50%}
.of-dpick__day.is-end{border-radius:0 50% 50% 0}
.of-dpick__foot{display:flex;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid var(--of-line)}
.of-dpick__foot button{background:none;border:none;font:inherit;font-size:13px;color:var(--of-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* the popover is a white card — its text must stay dark; override the coral
   `.of-field span` rule (the picker root carries .of-field) that would render the
   month name and weekday letters white/invisible, and keep the field value big */
.of-contact-page .of-dpick__cal .of-dpick__mname{color:var(--of-ink);font-size:16px;letter-spacing:0;text-transform:none;font-weight:400}
.of-contact-page .of-dpick__cal .of-dpick__dow span{color:var(--of-soft);font-size:10px;letter-spacing:.04em;text-transform:uppercase;font-weight:400}
.of-contact-page .of-dpick__fields .of-dpick__val{color:#fff;font-size:15px;letter-spacing:0;text-transform:none;font-weight:400}
.of-contact-page .of-dpick__fields .of-dpick__lbl{font-size:10px}

/* Apartments page — stacked full-bleed photo heroes */
.of-phero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;display:flex;align-items:flex-end;color:#fff}
.of-phero__media{position:absolute;inset:0}
.of-phero__slide{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--of-ease)}
.of-phero__slide.is-active{opacity:1}
.of-phero__media img,.of-phero__media picture{width:100%;height:100%;object-fit:cover;display:block;transform-origin:center;animation:of-hero-zoom 18s ease-in-out infinite alternate}
.of-phero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,14,10,.76),rgba(18,14,10,.12) 52%,rgba(18,14,10,.42))}
.of-phero__in{position:relative;z-index:2;width:100%;max-width:var(--of-maxw);margin:0 auto;padding:clamp(44px,8vh,96px) var(--of-edge);display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(24px,4vw,64px)}
.of-phero__copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.of-phero__n{font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.18em;opacity:.75}
.of-phero__tag{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;opacity:.92;margin-top:12px}
.of-phero__t{font-family:var(--of-serif);font-size:clamp(40px,7vw,92px);line-height:1.02;letter-spacing:-.02em;margin:10px 0 0;max-width:16ch;color:#fff;text-wrap:balance}
.of-phero__x{font-size:clamp(15px,1.6vw,18px);line-height:1.7;max-width:52ch;margin:18px 0 0;color:rgba(255,255,255,.9)}
.of-phero__cta{margin-top:26px}
.of-phero__cta b{transition:transform .25s var(--of-ease)}
.of-phero__cta:hover b{transform:translateX(4px)}
.of-phero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.of-phero__ctas .of-phero__cta{margin-top:0}
.of-btn--white{background:#fff;color:var(--of-ink)}
.of-btn--white:hover{background:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.16)}
/* photo thumbnails — click to cross-fade the hero slide; active = coral frame */
.of-phero__thumbs{display:flex;flex-direction:column;gap:12px;flex:none}
.of-phero__thumb{width:118px;height:78px;padding:0;border-radius:12px;overflow:hidden;cursor:pointer;
  border:2px solid rgba(255,255,255,.42);background:none;opacity:.72;
  box-shadow:0 8px 22px rgba(0,0,0,.3);transition:opacity .25s,border-color .25s,transform .25s}
.of-phero__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.of-phero__thumb:hover{opacity:1;transform:translateY(-2px)}
.of-phero__thumb.is-active{opacity:1;border-color:var(--of-accent);border-width:3px;transform:translateY(-2px)}
@media(max-width:820px){
  .of-phero__in{flex-direction:column;align-items:flex-start;gap:22px}
  .of-phero__thumbs{flex-direction:row;flex-wrap:wrap;order:2}
  .of-phero__thumb{width:84px;height:58px}
}

/* subpage full-photo hero — same treatment as the home hero (bottom-left) */
.of-subhero{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:100vh;height:100svh;min-height:560px;overflow:hidden;color:#fff}
.of-subhero__media{position:absolute;inset:0}
.of-subhero__media img,.of-subhero__media picture{width:100%;height:100%;object-fit:cover;display:block;transform-origin:center;animation:of-hero-zoom 20s ease-in-out infinite alternate}
.of-subhero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(18,14,10,.34),rgba(18,14,10,0) 20%),
  linear-gradient(0deg,rgba(18,14,10,.66),rgba(18,14,10,.12) 48%,rgba(18,14,10,.32))}
.of-subhero__in{position:absolute;left:clamp(20px,5vw,72px);right:clamp(20px,5vw,72px);bottom:clamp(98px,13vh,150px);z-index:2;max-width:min(94vw,1040px);animation:of-rise 1s var(--of-ease) .2s both}
.of-subhero__ey{font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;opacity:.92}
.of-subhero__ey .of-blink{font-size:1.5em;vertical-align:-.06em;margin-right:.15em}
.of-subhero__t{font-family:var(--of-serif);font-size:clamp(46px,8.6vw,112px);line-height:1;letter-spacing:-.025em;margin:16px 0 0;color:#fff;text-wrap:balance}
.of-subhero__t .of-it{opacity:.9}
/* same scroll cue as the home hero — label + animated vertical line */
.of-subhero__scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;color:#fff;opacity:.72;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:9px;
  animation:of-fade 1.2s var(--of-ease) .7s both}
.of-subhero__scroll::after{content:"";width:1px;height:38px;background:linear-gradient(#fff,rgba(255,255,255,0));animation:of-drop 2s ease-in-out infinite}
.of-subhero--cool::after{background:
  linear-gradient(180deg,rgba(10,26,34,.34),rgba(10,26,34,0) 20%),
  linear-gradient(0deg,rgba(9,24,32,.66),rgba(14,34,44,.14) 48%,rgba(12,30,40,.4))}
/* breathing room between the photo hero and the first content section */
.of-subhero + *{margin-top:clamp(44px,6vw,84px)}

/* gallery hero — coral field with a faint photo behind + category chips */
.of-ghero{position:relative;overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);min-height:66vh;min-height:66svh;display:flex;align-items:flex-end;color:#fff;
  background:radial-gradient(80% 90% at 82% 4%,#F3927E,transparent 58%),linear-gradient(150deg,#E8715E 6%,var(--of-accent) 46%,var(--of-accent-deep))}
.of-ghero__bg{position:absolute;inset:0;z-index:0;opacity:.22}
.of-ghero__bg img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:center;animation:of-hero-zoom 22s ease-in-out infinite alternate}
.of-ghero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(150,50,38,.34),transparent 58%)}
.of-ghero__in{position:relative;z-index:2;width:100%;max-width:var(--of-maxw);margin:0 auto;padding:clamp(48px,8vh,96px) var(--of-edge)}
.of-ghero__ey{font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;opacity:.92}
.of-ghero__t{font-family:var(--of-serif);font-size:clamp(44px,8vw,104px);line-height:1;letter-spacing:-.025em;margin:14px 0 0;color:#fff}
.of-ghero__cats{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.of-badge-link{display:inline-flex;align-items:center;gap:8px;padding:8px 17px;border:1px solid rgba(255,255,255,.5);border-radius:var(--of-pill);
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:#fff;transition:background .2s,color .2s,border-color .2s}
.of-badge-link:hover{background:#fff;border-color:#fff;color:var(--of-accent-deep)}
/* category block heading above each grid; scroll-margin keeps it clear of the
   fixed header when a chip link jumps to it */
.of-gcat{padding:clamp(44px,6vw,80px) 0 0;scroll-margin-top:clamp(70px,10vh,90px)}
.of-gcat__head{display:flex;align-items:baseline;gap:16px;margin-bottom:clamp(20px,3vw,36px);flex-wrap:wrap}
.of-gcat__n{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--of-accent);font-weight:600}
.of-gcat__head .of-h2{margin:0}

/* irregular editorial gallery — mixed sizes; tiles reveal from ~55% to full */
.of-ggrid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,2vw,26px);grid-auto-flow:dense;padding:0}
.of-ggrid figure{margin:0;grid-column:span 2;aspect-ratio:1/1;overflow:hidden;border-radius:var(--of-r);background:var(--of-sand);cursor:pointer}
.of-ggrid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--of-ease)}
.of-ggrid figure:hover img{transform:scale(1.05)}
.of-ggrid .of-reveal{opacity:.55;transform:scale(.965)}
.of-ggrid .of-reveal.is-in{opacity:1;transform:none}
.of-ggrid figure:nth-child(7n+1){grid-column:span 3;grid-row:span 2;aspect-ratio:3/4}
.of-ggrid figure:nth-child(7n+2){grid-column:span 3;aspect-ratio:3/2}
.of-ggrid figure:nth-child(7n+4){grid-column:span 2;grid-row:span 2;aspect-ratio:2/3}
.of-ggrid figure:nth-child(7n+5){grid-column:span 4;aspect-ratio:2/1}
@media(max-width:760px){.of-ggrid{grid-template-columns:repeat(2,1fr)}
  .of-ggrid figure,.of-ggrid figure:nth-child(7n+1),.of-ggrid figure:nth-child(7n+2),.of-ggrid figure:nth-child(7n+4),.of-ggrid figure:nth-child(7n+5){grid-column:span 1;grid-row:auto;aspect-ratio:1/1}
  .of-ggrid figure:nth-child(5n+1){grid-column:span 2;aspect-ratio:3/2}}

/* rotating discover badge inside the closing CTA */
.of-cta-band .of-discover{flex:none;width:150px;height:150px}
.of-discover__arr{color:var(--of-accent);font-size:26px}
.of-discover svg text{fill:var(--of-soft)}

/* My booking — lookup popup */
.of-mbmodal{position:fixed;inset:0;z-index:130;display:none;place-items:center;background:rgba(16,12,9,.62);padding:20px;opacity:0;transition:opacity .3s var(--of-ease)}
.of-mbmodal.is-open{display:grid;opacity:1}
.of-mbmodal__card{position:relative;background:var(--of-surface);border-radius:var(--of-r-lg);box-shadow:var(--of-sh-3);padding:clamp(28px,4vw,44px);max-width:440px;width:100%;
  transform:translateY(12px);transition:transform .3s var(--of-ease)}
.of-mbmodal.is-open .of-mbmodal__card{transform:none}
.of-mbmodal__close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:20px;color:var(--of-soft);background:var(--of-sand-2);transition:background .2s}
.of-mbmodal__close:hover{background:var(--of-sand)}
.of-mbmodal__t{font-family:var(--of-serif);font-size:clamp(26px,3.4vw,34px);letter-spacing:-.01em;margin:10px 0 0}
.of-mbmodal__sub{color:var(--of-soft);margin:10px 0 22px;font-size:15px;line-height:1.6}
.of-mbmodal .of-fields{grid-template-columns:1fr;margin-bottom:18px}
.of-reqmodal .of-mbmodal__card{max-width:540px}
.of-reqmodal .of-fields{grid-template-columns:1fr 1fr}
@media(max-width:520px){.of-reqmodal .of-fields{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ── Blog ─────────────────────────────────────────────────────────────────── */
.of-blog{padding-bottom:clamp(48px,8vw,96px)}
.of-blog-hero{position:relative;overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);min-height:80vh;min-height:80svh;display:flex;align-items:flex-end;color:#fff;background:var(--of-ink);margin-bottom:clamp(28px,4vw,52px)}
.of-blog-hero__bg{position:absolute;inset:0;z-index:0;opacity:.45}
.of-blog-hero__bg img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:center;animation:of-hero-zoom 22s ease-in-out infinite alternate}
.of-blog-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,10,7,.30),rgba(14,10,7,.44) 55%,rgba(14,10,7,.6) 97%),radial-gradient(94% 82% at 85% 0,rgba(198,75,58,.14),transparent 60%)}
.of-blog-hero__in{position:relative;z-index:2;width:100%;max-width:var(--of-maxw);margin:0 auto;padding:clamp(56px,10vh,120px) var(--of-edge) clamp(28px,4vw,44px)}
.of-blog-hero__head{display:grid;grid-template-columns:1.75fr 1fr;gap:clamp(18px,4vw,56px);align-items:end}
.of-blog-hero__ey{font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;opacity:.92;margin:0 0 12px}
.of-blog-hero__t{font-family:var(--of-serif);font-size:clamp(40px,6.6vw,84px);line-height:1.02;letter-spacing:-.025em;margin:0;color:#fff;text-wrap:balance}
.of-blog-hero__dek{font-size:clamp(15px,1.6vw,18px);line-height:1.55;opacity:.9;margin:0 0 6px}
@media(max-width:760px){.of-blog-hero__head{grid-template-columns:1fr;align-items:start}.of-blog-hero__dek{max-width:60ch;margin-top:6px}}
.of-blog-hero__cats{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,3vw,34px)}
.of-blog-tab{display:inline-block;font-size:14px;letter-spacing:.01em;border-radius:var(--of-pill);padding:9px 18px;text-decoration:none;transition:color .18s,background .18s,border-color .18s,transform .18s var(--of-ease)}
.of-blog-hero__cats .of-blog-tab{color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.45)}
.of-blog-hero__cats .of-blog-tab:hover{background:#fff;border-color:#fff;color:var(--of-accent-deep)}
.of-blog-hero__cats .of-blog-tab.is-active{background:#fff;border-color:#fff;color:var(--of-ink)}

.of-blog-grid{display:grid;grid-template-columns:repeat(var(--of-grid-cols,3),1fr);gap:clamp(20px,2.6vw,34px)}
@media(max-width:900px){.of-blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.of-blog-grid{grid-template-columns:1fr}}
.of-blog-card{background:var(--of-surface);border-radius:var(--of-r-lg);overflow:hidden;box-shadow:var(--of-sh-1);transition:transform .25s var(--of-ease),box-shadow .25s}
.of-blog-card:hover{transform:translateY(-4px);box-shadow:var(--of-sh-2)}
.of-blog-card[hidden]{display:none}
.of-blog-card__link{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.of-blog-card__media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--of-sand)}
.of-blog-card__media :is(img,picture){width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--of-ease)}
.of-blog-card:hover .of-blog-card__media :is(img,picture){transform:scale(1.05)}
.of-blog-card__ph{position:absolute;inset:0;background:radial-gradient(120% 120% at 20% 0,var(--of-sand-2),var(--of-accent-tint))}
.of-blog-card__body{display:flex;flex-direction:column;gap:9px;padding:20px 22px 22px}
.of-blog-card__cat{margin:0}
.of-blog-card__t{font-family:var(--of-serif);font-size:22px;line-height:1.18;margin:0}
.of-blog-card__dek{color:var(--of-soft);font-size:15px;line-height:1.5;margin:0}
.of-blog-card__meta{margin:auto 0 0;color:var(--of-faint);font-size:13px;letter-spacing:.01em;padding-top:6px}
.of-blog-card__meta span{margin:0 6px}
.of-blog-empty{text-align:center;color:var(--of-soft);padding:40px 0}

/* two latest as features */
.of-blog-feats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,34px);margin-bottom:clamp(26px,3vw,40px)}
@media(max-width:820px){.of-blog-feats{grid-template-columns:1fr}}
.of-blog-feat{background:var(--of-surface);border-radius:var(--of-r-lg);overflow:hidden;box-shadow:var(--of-sh-1);transition:transform .25s var(--of-ease),box-shadow .25s}
.of-blog-feat:hover{transform:translateY(-4px);box-shadow:var(--of-sh-2)}
.of-blog-feat__link{display:block;color:inherit;text-decoration:none}
.of-blog-feat__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--of-sand)}
.of-blog-feat__media :is(img,picture){width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--of-ease)}
.of-blog-feat:hover .of-blog-feat__media :is(img,picture){transform:scale(1.04)}
.of-blog-feat__ph{position:absolute;inset:0;background:radial-gradient(120% 120% at 20% 0,var(--of-sand-2),var(--of-accent-tint))}
.of-blog-feat__body{padding:clamp(20px,2vw,28px) clamp(22px,2vw,30px) clamp(24px,2vw,30px)}
.of-blog-feat__cat{margin:0 0 10px}
.of-blog-feat__t{font-family:var(--of-serif);font-size:clamp(23px,2.4vw,31px);line-height:1.15;letter-spacing:-.01em;margin:0 0 12px}
.of-blog-feat__meta{color:var(--of-faint);font-size:13.5px;letter-spacing:.01em;margin:0}
.of-blog-feat__meta span{margin:0 6px}

/* author bio (single) */
.of-author{display:flex;gap:clamp(16px,2vw,24px);align-items:flex-start;max-width:720px;margin-top:clamp(44px,6vw,72px);padding:clamp(20px,2.6vw,28px);background:var(--of-sand-2);border-radius:var(--of-r-lg)}
.of-author__av{flex:0 0 auto}
.of-author__img,.of-author__av img{width:72px;height:72px;border-radius:50%;object-fit:cover;display:block;background:var(--of-sand)}
.of-author__body{min-width:0}
.of-author__name{font-family:var(--of-serif);font-size:22px;margin:4px 0 8px;color:var(--of-ink)}
.of-author__bio{color:var(--of-soft);font-size:15px;line-height:1.6;margin:0}

/* related (single) */
.of-related{margin-top:clamp(48px,7vw,84px)}
.of-related__h{font-family:var(--of-serif);font-size:clamp(24px,3vw,34px);letter-spacing:-.01em;margin:0 0 clamp(20px,2.4vw,30px);color:var(--of-ink)}

/* single: sticky table of contents + centered prose */
.of-single__cols.has-toc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.of-single__cols.has-toc .of-single__body{max-width:70ch;margin-inline:auto}
@media(max-width:900px){.of-single__cols.has-toc{display:block}.of-toc{display:none}}
.of-toc{position:sticky;top:96px}
.of-toc__h{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--of-faint);margin:0 0 14px}
.of-toc__list{list-style:none;margin:0;padding:0;border-left:1px solid var(--of-line-2)}
.of-toc__item{margin:0}
.of-toc__item a{display:block;padding:6px 0 6px 16px;margin-left:-1px;border-left:2px solid transparent;color:var(--of-soft);font-size:14px;line-height:1.4;text-decoration:none;transition:color .15s,border-color .15s}
.of-toc__item a:hover{color:var(--of-ink)}
.of-toc__item.is-active a{color:var(--of-accent-deep);border-color:var(--of-accent);font-weight:600}
.of-toc__item--l3 a{padding-left:28px;font-size:13px}
.of-prose :is(h2,h3){scroll-margin-top:96px}

/* apartment CTA (coral) inside posts */
.of-stay-cta{margin:clamp(34px,4vw,52px) 0;border-radius:var(--of-r-lg);overflow:hidden;background:radial-gradient(80% 90% at 82% 4%,#F3927E,transparent 58%),linear-gradient(150deg,#E8715E 6%,var(--of-accent) 46%,var(--of-accent-deep));color:#fff}
.of-stay-cta__in{padding:clamp(26px,3.4vw,40px)}
.of-stay-cta__ey{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;opacity:.9;margin:0 0 10px}
.of-stay-cta__h{font-family:var(--of-serif);font-size:clamp(22px,2.6vw,30px);line-height:1.15;margin:0 0 10px;color:#fff;text-wrap:balance;max-width:22ch}
.of-stay-cta__t{font-size:16px;line-height:1.6;opacity:.95;margin:0 0 20px;max-width:56ch}
.of-stay-cta__btn{display:inline-block;border:0;background:#fff;color:var(--of-accent-deep);font-weight:600;font-size:15px;padding:12px 24px;border-radius:var(--of-pill);text-decoration:none;transition:transform .2s var(--of-ease),box-shadow .2s}
.of-stay-cta__btn:hover{transform:translateY(-2px);box-shadow:var(--of-sh-2);color:var(--of-accent-deep)}

/* tables inside posts (month-by-month, comparisons) */
.of-prose table{width:100%;border-collapse:collapse;margin:0 0 1.5em;font-size:15px;line-height:1.45}
.of-prose thead th{border-bottom:2px solid var(--of-line);color:var(--of-ink)}
.of-prose th,.of-prose td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--of-line-2);vertical-align:top}
.of-prose th{font-weight:700;color:var(--of-ink)}
.of-prose tbody tr:hover{background:var(--of-sand-2)}
@media(max-width:640px){.of-prose__scroll{overflow-x:auto}.of-prose table{min-width:520px}}

/* FAQ accordion */
.of-prose .of-pfaq{counter-reset:pfaq;margin:0 0 8px}
.of-pfaq__item{counter-increment:pfaq;border-bottom:1px solid var(--of-line-2)}
.of-pfaq__item:first-child{border-top:1px solid var(--of-line-2)}
.of-pfaq summary{cursor:pointer;list-style:none;padding:16px 2px;font-family:var(--of-serif);font-size:clamp(18px,2vw,21px);line-height:1.3;color:var(--of-ink);display:flex;gap:14px;align-items:baseline}
.of-pfaq summary::-webkit-details-marker{display:none}
.of-pfaq summary::before{content:counter(pfaq,decimal-leading-zero);font-family:var(--of-sans);font-variant-numeric:tabular-nums;font-size:14px;font-weight:700;color:var(--of-accent);flex:0 0 auto}
.of-pfaq summary::after{content:"+";margin-left:auto;font-family:var(--of-sans);font-size:24px;line-height:1;color:var(--of-accent-deep);transition:transform .2s var(--of-ease);flex:0 0 auto}
.of-pfaq__item[open] summary::after{transform:rotate(45deg)}
.of-pfaq summary:hover{color:var(--of-accent-deep)}
.of-pfaq__item>p{margin:0 0 18px 30px}

/* key takeaways box */
.of-prose .of-takeaways{background:var(--of-sand-2);border-left:3px solid var(--of-accent);border-radius:var(--of-r);padding:18px 22px;margin:0 0 1.7em}
.of-takeaways__h{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--of-accent-deep);margin:0 0 10px}
.of-takeaways ul{margin:0;padding-left:1.1em}
.of-takeaways li{margin:6px 0;color:var(--of-ink)}

/* breathing room before the footer under a post */
.of-single{padding-bottom:clamp(64px,9vw,120px)}

.of-single-hero{position:relative;margin-bottom:clamp(28px,4vw,48px)}
.of-single-hero.has-cover{min-height:clamp(420px,58vw,620px);display:flex;align-items:flex-end;color:#fff;background:var(--of-ink)}
.of-single-hero__bg{position:absolute;inset:0;overflow:hidden;z-index:0;opacity:.7}
.of-single-hero__bg :is(img,picture){width:100%;height:100%;object-fit:cover;display:block}
.of-single-hero.has-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 6%,rgba(16,11,8,.30) 60%,rgba(16,11,8,.58) 97%),radial-gradient(96% 88% at 84% 0,rgba(198,75,58,.16),transparent 60%);z-index:1}
.of-single-hero__in{position:relative;z-index:2;padding:clamp(40px,6vw,72px) clamp(20px,5vw,40px);max-width:calc(820px + 2*clamp(20px,5vw,40px))}
@media(max-width:640px){.of-single-hero.has-cover{min-height:min(74vh,600px)}}
.of-single-hero:not(.has-cover) .of-single-hero__in{padding-top:clamp(48px,7vw,90px)}
.of-single-hero__cat{display:inline-block;margin:0 0 14px;text-decoration:none}
.of-single-hero.has-cover .of-single-hero__cat{color:#fff;opacity:.92}
.of-single-hero__t{font-family:var(--of-serif);font-size:clamp(30px,5vw,54px);line-height:1.08;margin:0 0 16px}
.of-single-hero.has-cover .of-single-hero__t{color:#fff}
.of-single-hero__dek{font-size:clamp(16px,2.2vw,20px);line-height:1.5;max-width:62ch;margin:0 0 16px;opacity:.95}
.of-single-hero__meta{font-size:14px;letter-spacing:.02em;opacity:.85;margin:0}
.of-single-hero.has-cover .of-single-hero__meta{color:rgba(255,255,255,.9)}
.of-single__foot{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;margin-top:clamp(40px,6vw,72px);padding-top:28px;border-top:1px solid var(--of-line)}