@charset "UTF-8";
/* ==========================================================================
   Float OKC — structure
   Every rule here is colour-agnostic: it reads tokens a theme file defines.
   Load order is always base.css then theme-<id>.css.

   Structural rules that hold across all three directions:
   — No cards, boxes, panels or shadows. Structure is space and hairlines.
   — One idea per screen; sections are very tall.
   — Display type large and tight; labels small and very wide.
   — The accent is a line and a letterform, never a fill, except the primary
     booking button.
   ========================================================================== */

@charset "UTF-8";
/* ==========================================================================
   Float OKC — design system
   Dark, jewel-like, cinematic. The logo's world expanded to a website.

   The rules that make this read expensive rather than merely dark:
   — Chrome is almost absent. No card borders, no boxes, no filled panels.
     Structure comes from space and hairlines.
   — One idea per screen. Sections are enormous and slow.
   — Display type is very large and set tight; labels are tiny and set wide.
   — Gold is a line and a letterform, never a background fill, with exactly
     one exception: the primary booking button.
   — Photography goes edge to edge. Nothing is ever a thumbnail.

   Committed single-theme by design: this is a brand environment, not a
   document. Every surface paints its own ground.
   ========================================================================== */



/* --------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--ground)}
body{
  margin:0;background:var(--ground);color:var(--ink-2);
  font-family:var(--sans);font-size:var(--t-0);line-height:1.7;font-weight:350;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,picture,video,svg{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-lit)}
:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
::selection{background:var(--accent);color:var(--ground)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);
  color:var(--ground);padding:14px 24px;font-size:.75rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600}
.skip:focus{left:12px;top:12px}

/* ----------------------------------------------------------- typography -- */
h1,h2,h3,h4{
  font-family:var(--serif);font-weight:300;color:var(--ink);
  line-height:1.02;letter-spacing:-.022em;margin:0;text-wrap:balance;
}
h1{font-size:var(--t-4)}
h2{font-size:var(--t-3)}
h3{font-size:var(--t-2);line-height:1.1;letter-spacing:-.016em;font-weight:400}
h4{font-size:var(--t-1);line-height:1.15;font-weight:400}

p{margin:0 0 1.15em;max-width:var(--measure)}
p:last-child{margin-bottom:0}

/* The small letterspaced label is the counterweight to the huge serif.
   Nothing else on the site is uppercase. */
.eyebrow{
  font-family:var(--sans);font-size:.66rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--accent);
  margin:0 0 1.6rem;display:block;line-height:1.6;
}
.lede{font-size:var(--t-1);line-height:1.6;color:var(--ink-2);font-weight:300;
  max-width:52ch}
.muted{color:var(--ink-3)}
.small{font-size:var(--t--1)}
.num{font-variant-numeric:tabular-nums}

/* Hairline rule — the site's only ornament, and its main structural device. */
.rule{height:1px;background:var(--line-accent);border:0;margin:2.2rem 0 0;
  width:100%;max-width:88px}
.center .rule{margin-inline:auto}

/* --------------------------------------------------------------- layout -- */
.shell{width:min(100% - (var(--gutter) * 2), var(--shell));margin-inline:auto}
.shell-tight{width:min(100% - (var(--gutter) * 2), var(--shell-tight));margin-inline:auto}
.shell-read{width:min(100% - (var(--gutter) * 2), 760px);margin-inline:auto}

.bay{padding-block:var(--bay)}
.bay-sm{padding-block:var(--bay-sm)}

/* Section grounds. Pale sections are the relief; they invert everything. */
.on-dark{background:var(--ground)}
.on-deep{background:var(--ground-2)}
.on-raised{background:var(--ground-3)}
.on-light{background:var(--alt-ground);color:var(--alt-ink-2)}
.on-light h1,.on-light h2,.on-light h3,.on-light h4{color:var(--alt-ink)}
.on-light .eyebrow{color:var(--alt-accent)}
.on-light .lede{color:var(--alt-ink-2)}
.on-light .muted{color:var(--alt-ink-3)}
.on-light .rule{background:var(--alt-line-accent)}
.on-light a{color:var(--alt-accent)}
.on-light a:hover{color:var(--alt-ink)}

.center{text-align:center}
.stack{display:flex;flex-direction:column;gap:1.2rem}
.grid{display:grid;gap:clamp(2rem,5vw,4rem)}
.g-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}

.head{margin-bottom:clamp(3rem,7vw,5.5rem);max-width:60ch}
.head .lede{margin-top:1.6rem}
.center .head{margin-inline:auto}
.center .lede{margin-inline:auto}

/* -------------------------------------------------------------- buttons -- */
/* Gold fill exists in exactly one place: the primary booking action. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1.15em 2.4em;font-size:.68rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;cursor:pointer;line-height:1;text-align:center;
  border:1px solid var(--accent);background:var(--accent);color:var(--ground);
  transition:background .5s var(--ease),color .5s var(--ease),
             border-color .5s var(--ease);
}
.btn:hover{background:var(--accent-lit);border-color:var(--accent-lit);color:var(--ground)}

/* Everything else is a hairline outline. */
.btn--line{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--line:hover{background:transparent;color:var(--accent);border-color:var(--accent)}
.on-light .btn--line{color:var(--alt-ink);border-color:var(--alt-line)}
.on-light .btn--line:hover{color:var(--alt-accent);border-color:var(--alt-accent)}

.btn--sm{padding:.95em 1.8em;font-size:.63rem;letter-spacing:.2em}
.btn--block{display:flex;width:100%}
.btns{display:flex;flex-wrap:wrap;gap:1rem}
.center .btns{justify-content:center}

/* The text link: a hairline that brightens on hover. */
.lnk{
  font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);display:inline-block;padding-bottom:.55em;position:relative;
}
.lnk::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--line-accent);transition:background .5s var(--ease)}
.lnk:hover::after{background:var(--accent)}
.lnk:hover{color:var(--accent-lit)}
.on-light .lnk{color:var(--alt-accent)}
.on-light .lnk::after{background:var(--alt-line-accent)}

/* ============================================================= HEADER ==== */
/* Transparent over the hero, then resolves into a solid bar. */
.header{
  position:fixed;top:0;left:0;right:0;z-index:80;
  transition:background .6s var(--ease-2),border-color .6s var(--ease-2);
  border-bottom:1px solid transparent;
}
.header.is-stuck{background:var(--header-bg);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.header__in{display:flex;align-items:center;justify-content:space-between;
  gap:2rem;min-height:96px;transition:min-height .6s var(--ease-2)}
.header.is-stuck .header__in{min-height:74px}

.brand{display:inline-flex;align-items:center;gap:.95rem;flex:0 0 auto}
.brand img{height:46px;width:46px;object-fit:contain;flex:0 0 auto;
  transition:height .6s var(--ease-2),width .6s var(--ease-2)}
.header.is-stuck .brand img{height:38px;width:38px}
.brand__t{display:flex;flex-direction:column;line-height:1}
.brand__n{font-family:var(--serif);font-size:1.4rem;color:var(--ink);
  letter-spacing:.02em;font-weight:400}
.brand__s{font-size:.52rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--accent);margin-top:.42rem;font-weight:600}

.nav{display:flex;align-items:center;gap:0}
.nav a,.nav button{
  font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);background:none;border:0;cursor:pointer;position:relative;
  padding:1rem .95rem;white-space:nowrap;transition:color .4s var(--ease);
}
.nav a::after{content:"";position:absolute;left:.95rem;right:.95rem;bottom:.65rem;
  height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease)}
.nav a:hover,.nav button:hover{color:var(--accent)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav a[aria-current]{color:var(--ink)}

.nav__g{position:relative}
.nav__t::after{content:"";display:inline-block;margin-left:.55em;width:4px;height:4px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .4s var(--ease)}
.nav__t[aria-expanded="true"]{color:var(--accent)}
.nav__t[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
.nav__m{
  position:absolute;top:100%;left:0;min-width:210px;background:var(--menu-bg);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);padding:.7rem 0;
  display:flex;flex-direction:column;
}
.nav__m[hidden]{display:none}
.nav__m a{padding:.8rem 1.4rem;letter-spacing:.16em}
.nav__m a::after{display:none}
.nav__m a:hover{background:var(--accent-wash)}

.header__r{display:flex;align-items:center;gap:1.4rem;flex:0 0 auto}
.header__tel{font-size:.66rem;font-weight:600;letter-spacing:.16em;
  color:var(--ink-2);white-space:nowrap;transition:color .4s var(--ease)}
.header__tel:hover{color:var(--accent)}

.burger{display:none;flex-direction:column;gap:6px;background:none;border:0;
  padding:.9rem .3rem;cursor:pointer}
.burger span{display:block;width:26px;height:1px;background:var(--ink);
  transition:transform .5s var(--ease),opacity .3s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ------------------------------------------------------------- drawer ---- */
.drawer{
  position:fixed;inset:0;background:var(--ground);z-index:75;
  padding:110px var(--gutter) 8rem;overflow-y:auto;
  display:flex;flex-direction:column;
}
.drawer[hidden]{display:none}
.drawer a{
  font-family:var(--serif);font-size:clamp(1.9rem,7vw,2.7rem);color:var(--ink);
  padding:.5rem 0;display:block;font-weight:300;letter-spacing:-.02em;
  border-bottom:1px solid var(--line);
}
.drawer a:hover{color:var(--accent)}
.drawer__sub a{font-family:var(--sans);font-size:1rem;font-weight:400;
  color:var(--ink-2);letter-spacing:.02em;padding:.75rem 0 .75rem 1.2rem}
.drawer__l{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);margin:2.4rem 0 .7rem;font-weight:600}
.drawer .btn{margin-top:2.6rem}

/* ---------------------------------------------------------- mobile CTA --- */
.bookbar{
  position:fixed;left:0;right:0;bottom:0;z-index:78;display:none;
  background:var(--header-bg);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);
  padding:.85rem var(--gutter) calc(.85rem + env(safe-area-inset-bottom));
  gap:.75rem;
}
.bookbar .btn{flex:1}
.bookbar .btn--line{flex:0 0 auto;padding-inline:1.5em}

/* =============================================================== HERO ==== */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  isolation:isolate;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center;
  filter:var(--photo-filter)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--hero-scrim)}
.hero__in{padding-block:clamp(4rem,11vh,9rem)}
.hero h1{font-size:var(--t-5);max-width:13ch;color:var(--hero-ink);font-weight:300;
  letter-spacing:-.03em;line-height:.97}
.hero .lede{margin-top:2rem;color:var(--hero-ink-2);max-width:44ch;font-size:var(--t-1)}
.hero .btns{margin-top:3rem}
.hero__place{
  display:inline-flex;align-items:center;gap:1rem;color:var(--accent);
  font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;font-weight:600;
  margin-top:3.4rem;
}
.hero__place::before{content:"";width:48px;height:1px;background:var(--line-accent)}

/* A hairline that suggests there is more below, without an animated chevron. */
.hero__more{position:absolute;left:50%;bottom:0;width:1px;height:72px;
  background:var(--hairline-fade);z-index:1}

/* ============================================================ EDITORIAL == */
/* Alternating full-height image / text. Replaces every card grid on the site. */
/* .ed is two halves side by side. When one half is a photograph the halves are
   meant to MEET — zero gap, image running into text. When both halves are
   content it needs a gutter, or the columns collide.

   Gap is therefore the default and is removed only where a figure is actually
   present. Written this way round on purpose: a browser without :has() support
   falls back to "everything has a gutter", which is merely loose, rather than
   "everything is flush", which is unreadable.

   minmax(0,1fr) rather than 1fr so a long unbroken string cannot blow the
   column out past its track. */
.ed{display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:minmax(0,1fr);
  align-items:stretch}
@media (min-width:900px){
  .ed{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ed--flip .ed__fig{order:2}
}
.ed:has(> .ed__fig){gap:0}
.ed__fig{position:relative;overflow:hidden;min-height:clamp(340px,58vh,700px)}
.ed__fig img{width:100%;height:100%;object-fit:cover;filter:var(--photo-filter)}
.ed__body{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(3rem,7vw,6.5rem) clamp(1.5rem,5vw,5rem)}
.ed__body > *{max-width:46ch}

/* ============================================================== INDEX ==== */
/* The experience list. A ruled index, not a set of boxes. */
.index{border-top:1px solid var(--line)}
.index__row{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1.5rem,4vw,4rem);
  align-items:baseline;padding:clamp(2.2rem,5vw,3.6rem) 0;
  border-bottom:1px solid var(--line);
}
.index__n{font-family:var(--serif);font-size:var(--t-1);color:var(--accent);
  font-variant-numeric:tabular-nums;line-height:1;font-weight:400}
.index__main h3{margin-bottom:.9rem}
.index__main p{color:var(--ink-2);max-width:58ch;font-size:var(--t-0)}
.index__meta{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;
  text-align:right}
.index__price{font-family:var(--serif);font-size:var(--t-2);color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1;font-weight:400}
.index__dur{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600}
.index__acts{display:flex;gap:.8rem;margin-top:1.4rem;flex-wrap:wrap}
.on-light .index,.on-light .index__row{border-color:var(--alt-line)}
.on-light .index__n{color:var(--alt-accent)}
.on-light .index__main p{color:var(--alt-ink-2)}
.on-light .index__price{color:var(--alt-ink)}
.on-light .index__dur{color:var(--alt-ink-3)}
@media (max-width:700px){
  .index__row{grid-template-columns:auto 1fr;row-gap:1.2rem}
  .index__meta{grid-column:2;text-align:left;flex-direction:row;
    align-items:baseline;gap:1rem}
}

/* ============================================================= TIERS ===== */
/* Memberships. Hairline columns, no boxes, no shadows. */
.tiers{display:grid;gap:0;border-top:1px solid var(--line)}
@media (min-width:900px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{padding:clamp(2.4rem,4vw,3.6rem) clamp(1.6rem,3vw,2.8rem);
  border-bottom:1px solid var(--line);display:flex;flex-direction:column;
  position:relative}
@media (min-width:900px){
  .tier + .tier{border-left:1px solid var(--line)}
}
.tier--pick{background:var(--accent-wash)}
.tier__flag{position:absolute;top:0;left:0;right:0;height:1px;background:var(--accent)}
.tier__pl{font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin-bottom:1.1rem;display:block}
.tier h3{font-size:var(--t-1);margin-bottom:1.4rem}
.tier__p{font-family:var(--serif);font-size:var(--t-3);color:var(--ink);
  line-height:1;font-variant-numeric:tabular-nums;font-weight:300}
.tier__p span{font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-top:.8rem;
  font-weight:600}
.tier__d{margin:1.6rem 0;color:var(--ink-2);font-size:var(--t--1);line-height:1.65}
.tier .btns{margin-top:auto;padding-top:1.8rem}
.on-light .tiers,.on-light .tier{border-color:var(--alt-line)}
.on-light .tier + .tier{border-left-color:var(--alt-line)}
.on-light .tier__p{color:var(--alt-ink)}
.on-light .tier__d{color:var(--alt-ink-2)}

/* --------------------------------------------------------------- ticks -- */
.ticks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.85rem}
.ticks li{position:relative;padding-left:1.7rem;font-size:var(--t--1);line-height:1.6;
  color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:1px;
  background:var(--accent)}
.on-light .ticks li{color:var(--alt-ink-2)}
.ticks--lg li{font-size:var(--t-0)}

/* =========================================================== SEQUENCE ==== */
/* Numbered because the first visit genuinely is a sequence. */
.seq{display:grid;gap:0;border-top:1px solid var(--line);counter-reset:seq}
@media (min-width:820px){.seq{grid-template-columns:repeat(3,1fr)}}
.seq__i{padding:clamp(2rem,3.5vw,3rem) clamp(1.4rem,2.5vw,2.4rem)
        clamp(2.4rem,4vw,3.4rem) 0;border-bottom:1px solid var(--line);
  counter-increment:seq}
@media (min-width:820px){
  .seq__i{padding-right:clamp(1.4rem,3vw,3rem)}
  .seq__i:not(:nth-child(3n+1)){padding-left:clamp(1.4rem,2.5vw,2.4rem);
    border-left:1px solid var(--line)}
}
.seq__i::before{content:counter(seq,decimal-leading-zero);display:block;
  font-family:var(--serif);font-size:var(--t-1);color:var(--accent);
  font-variant-numeric:tabular-nums;margin-bottom:1.4rem;line-height:1;font-weight:400}
.seq__i h3{font-size:var(--t-1);margin-bottom:.8rem}
.seq__i p{font-size:var(--t--1);color:var(--ink-2);margin:0;line-height:1.65}
.on-light .seq,.on-light .seq__i{border-color:var(--alt-line)}
.on-light .seq__i::before{color:var(--alt-accent)}
.on-light .seq__i p{color:var(--alt-ink-2)}

/* ============================================================== FACTS ==== */
/* Very large numerals. The one place the site raises its voice. */
.facts{display:grid;gap:0;border-top:1px solid var(--line)}
@media (min-width:700px){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{padding:clamp(2rem,3.5vw,3rem) clamp(1.2rem,2vw,2rem)
      clamp(2rem,3.5vw,3rem) 0;border-bottom:1px solid var(--line)}
@media (min-width:700px){
  .fact:not(:first-child){padding-left:clamp(1.2rem,2vw,2rem);
    border-left:1px solid var(--line)}
}
.fact dt{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin-bottom:1.4rem}
.fact dd{margin:0;font-family:var(--serif);font-size:var(--t-3);color:var(--ink);
  line-height:.9;font-variant-numeric:tabular-nums;font-weight:300}
.fact dd small{display:block;font-family:var(--sans);font-size:.76rem;
  color:var(--ink-3);margin-top:1.1rem;letter-spacing:0;line-height:1.55;
  font-variant-numeric:normal;font-weight:400}
.on-light .facts,.on-light .fact{border-color:var(--alt-line)}
.on-light .fact dt{color:var(--alt-accent)}
.on-light .fact dd{color:var(--alt-ink)}
.on-light .fact dd small{color:var(--alt-ink-3)}

/* ============================================================== QUOTE ==== */
.quote{margin:0;max-width:26ch}
.quote p{font-family:var(--serif);font-size:var(--t-2);line-height:1.24;
  color:var(--ink);font-weight:300;font-style:italic;letter-spacing:-.015em}
.quote cite{display:block;margin-top:1.6rem;font-family:var(--sans);font-style:normal;
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);font-weight:600}
.on-light .quote p{color:var(--alt-ink)}
.on-light .quote cite{color:var(--alt-accent)}

/* =============================================================== PROSE === */
.prose{max-width:64ch;color:var(--ink-2)}
.prose > * + *{margin-top:1.3em}
.prose h2{font-size:var(--t-2);margin-top:2.8em}
.prose h3{font-size:var(--t-1);margin-top:2.2em}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li{margin-bottom:.6rem}
.prose li::marker{color:var(--accent)}
.prose strong{color:var(--ink);font-weight:600}
.prose a{border-bottom:1px solid var(--line-accent);padding-bottom:1px}
.on-light .prose{color:var(--alt-ink-2)}
.on-light .prose strong{color:var(--alt-ink)}

:target,h2[id],h3[id],section[id],article[id]{scroll-margin-top:120px}

/* ========================================================= ANSWER BOX ==== */
/* The direct answer that opens every informational page. */
.answer{border-top:1px solid var(--line-accent);border-bottom:1px solid var(--line-accent);
  padding:clamp(2rem,4vw,3rem) 0;margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.answer .eyebrow{margin-bottom:1.2rem}
.answer p{font-family:var(--serif);font-size:var(--t-2);line-height:1.3;
  color:var(--ink);max-width:34ch;margin:0;font-weight:300;letter-spacing:-.015em}
.on-light .answer{border-color:var(--alt-line-accent)}
.on-light .answer p{color:var(--alt-ink)}

/* ============================================================== Q LIST === */
.qs{border-top:1px solid var(--line)}
.qs a{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;
  padding:1.5rem 0;border-bottom:1px solid var(--line);color:var(--ink);
  font-family:var(--serif);font-size:var(--t-1);font-weight:400;
  transition:color .4s var(--ease),padding-left .5s var(--ease)}
.qs a:hover{color:var(--accent);padding-left:.7rem}
.qs a::after{content:"";flex:0 0 auto;width:22px;height:1px;background:var(--line-accent);
  align-self:center;transition:width .5s var(--ease),background .4s var(--ease)}
.qs a:hover::after{width:34px;background:var(--accent)}
.on-light .qs,.on-light .qs a{border-color:var(--alt-line)}
.on-light .qs a{color:var(--alt-ink)}
.on-light .qs a:hover{color:var(--alt-accent)}

/* ============================================================ DETAILS ==== */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;padding:1.6rem 3rem 1.6rem 0;position:relative;list-style:none;
  font-family:var(--serif);font-size:var(--t-1);color:var(--ink);font-weight:400;
  transition:color .4s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after,.faq summary::before{content:"";position:absolute;
  top:50%;background:var(--accent);transition:transform .45s var(--ease),opacity .3s var(--ease)}
.faq summary::after{width:13px;height:1px;right:.4rem;margin-top:-.5px}
.faq summary::before{width:1px;height:13px;right:.9rem;margin-top:-6.5px}
.faq details[open] summary::before{transform:rotate(90deg);opacity:0}
.faq summary:hover{color:var(--accent)}
.faq__b{padding:0 0 1.9rem;max-width:62ch}
.faq__b p{color:var(--ink-2)}
.on-light .faq,.on-light .faq details{border-color:var(--alt-line)}
.on-light .faq summary{color:var(--alt-ink)}
.on-light .faq__b p{color:var(--alt-ink-2)}

/* ============================================================== TABLE ==== */
.tw{overflow-x:auto}
table.price{border-collapse:collapse;width:100%;min-width:520px}
table.price th{text-align:left;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);font-weight:600;padding:0 1.4rem 1.2rem 0;
  border-bottom:1px solid var(--line-accent)}
table.price td{padding:1.5rem 1.4rem 1.5rem 0;border-bottom:1px solid var(--line);
  vertical-align:top;color:var(--ink-2);font-size:var(--t--1)}
table.price tr:last-child td{border-bottom:0}
table.price td.p{font-family:var(--serif);font-size:var(--t-2);color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:300}
table.price td strong{display:block;color:var(--ink);margin-bottom:.35rem;
  font-family:var(--serif);font-size:var(--t-1);font-weight:400}
table.price td small{color:var(--ink-3);font-size:var(--t--1);line-height:1.6;display:block}
.on-light table.price th{color:var(--alt-accent);border-bottom-color:var(--alt-line-accent)}
.on-light table.price td{border-bottom-color:var(--alt-line);color:var(--alt-ink-2)}
.on-light table.price td.p,.on-light table.price td strong{color:var(--alt-ink)}
.on-light table.price td small{color:var(--alt-ink-3)}

/* ============================================================== FORMS ==== */
.form{display:flex;flex-direction:column;gap:1.6rem;max-width:520px}
.field{display:flex;flex-direction:column;gap:.7rem}
.field label{font-size:.6rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent)}
.field input,.field select,.field textarea{
  background:transparent;border:0;border-bottom:1px solid var(--line-2);
  padding:.7rem 0;font-size:var(--t-0);color:var(--ink);width:100%;
  transition:border-color .4s var(--ease);border-radius:0;
}
.field input::placeholder{color:var(--ink-3)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-bottom-color:var(--accent)}
.field--row{display:grid;gap:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.consent{display:flex;gap:.9rem;align-items:flex-start;font-size:var(--t--1);
  color:var(--ink-3);line-height:1.6}
.consent input{width:16px;height:16px;margin-top:.25rem;flex:0 0 auto;
  accent-color:var(--accent);background:transparent}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__n{font-size:var(--t--1);color:var(--ink-3);line-height:1.6}
.on-light .field label{color:var(--alt-accent)}
.on-light .field input,.on-light .field select,.on-light .field textarea{
  color:var(--alt-ink);border-bottom-color:var(--alt-line)}
.on-light .field input:focus{border-bottom-color:var(--alt-accent)}
.on-light .consent,.on-light .form__n{color:var(--alt-ink-3)}

.alert{padding:1.1rem 0;border-top:1px solid;border-bottom:1px solid;
  font-size:var(--t--1)}
.alert--ok{border-color:var(--line-accent);color:var(--accent-lit)}
.alert--err{border-color:var(--bad-line);color:var(--bad-ink)}
.on-light .alert--ok{color:var(--alt-accent)}

/* ============================================================= NOTICE ==== */
.notice{border-left:1px solid var(--accent);padding:.4rem 0 .4rem 1.8rem;
  font-size:var(--t--1);color:var(--ink-2);line-height:1.7;max-width:52ch}
.notice strong{color:var(--ink);font-weight:600;display:block;margin-bottom:.4rem;
  font-family:var(--serif);font-size:var(--t-1);letter-spacing:-.01em}
.on-light .notice{color:var(--alt-ink-2);border-left-color:var(--alt-accent)}
.on-light .notice strong{color:var(--alt-ink)}

/* ============================================================= FOOTER ==== */
.footer{background:var(--ground-2);border-top:1px solid var(--line);
  padding-top:clamp(4rem,8vw,7rem)}
.footer a{color:var(--ink-2);font-size:var(--t--1);transition:color .4s var(--ease)}
.footer a:hover{color:var(--accent)}
.footer__top{display:grid;gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:minmax(240px,1.4fr) repeat(auto-fit,minmax(140px,1fr))}
.footer__b img{width:184px;height:auto;margin-bottom:1.8rem;mix-blend-mode:screen}
.footer__col h2{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);font-family:var(--sans);font-weight:600;margin-bottom:1.5rem;
  line-height:1.6}
.footer__col ul{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:.85rem}
.footer__c{font-size:var(--t--1);line-height:1.9;color:var(--ink-3);font-style:normal}
.footer__c a{display:block}
.footer__c strong{color:var(--ink);font-weight:400;font-family:var(--serif);
  font-size:var(--t-1);display:block;margin-bottom:.5rem}
.footer__x{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-top:clamp(3rem,6vw,4.5rem);padding-block:clamp(2.2rem,4vw,3rem);
  display:flex;flex-wrap:wrap;gap:2rem;align-items:center;justify-content:space-between}
.footer__x p{margin:0;max-width:42ch;color:var(--ink-3);font-size:var(--t--1)}
.footer__x strong{display:block;font-family:var(--serif);font-size:var(--t-2);
  color:var(--ink);font-weight:300;margin-bottom:.7rem;letter-spacing:-.015em}
.footer__end{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;
  padding-block:2rem 2.6rem;font-size:.7rem;color:var(--ink-3)}
.footer__end ul{list-style:none;margin:0;padding:0;display:flex;gap:1.8rem;flex-wrap:wrap}
.social{display:flex;gap:1rem;margin-top:1.8rem}
.social a{width:40px;height:40px;border:1px solid var(--line);display:grid;
  place-items:center;transition:border-color .4s var(--ease),color .4s var(--ease)}
.social a:hover{border-color:var(--accent);color:var(--accent)}
.social svg{width:15px;height:15px;fill:currentColor}

/* ========================================================= BREADCRUMBS === */
.crumbs{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);display:flex;flex-wrap:wrap;gap:.8rem;font-weight:600;
  margin-bottom:2.4rem}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--accent)}
.crumbs span[aria-hidden]{color:var(--line-2)}
.on-light .crumbs,.on-light .crumbs a{color:var(--alt-ink-3)}
.on-light .crumbs a:hover{color:var(--alt-accent)}

/* ========================================================== PAGE HEAD ==== */
/* Sits under the fixed header, so it carries its own top clearance. */
.phead{padding-top:calc(96px + clamp(3rem,7vw,6rem));
  padding-bottom:clamp(3rem,7vw,6rem);border-bottom:1px solid var(--line)}
.phead h1{max-width:16ch}
.phead .lede{margin-top:1.8rem}
.on-light.phead{border-bottom-color:var(--alt-line)}

.pmeta{display:flex;flex-wrap:wrap;gap:.6rem 2rem;font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  margin-top:2rem;font-weight:600}
.pmeta time{font-variant-numeric:tabular-nums}
.on-light .pmeta{color:var(--alt-ink-3)}

/* ============================================================= REVEAL ==== */
/* Hidden only once JS confirms it is running — no JS renders everything. */
.js .reveal{opacity:0;transform:translateY(22px);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}

/* --------------------------------------------------------- responsive --- */
@media (max-width:1120px){
  .nav,.header__tel{display:none}
  .burger{display:flex}
}
@media (max-width:760px){
  .bookbar{display:flex}
  body{padding-bottom:76px}
  .header__in{min-height:74px}
  .header.is-stuck .header__in{min-height:64px}
  .header__r .btn{display:none}
  .brand img{height:38px;width:38px}
  .brand__n{font-size:1.2rem}
  .brand__s{font-size:.48rem;letter-spacing:.26em}
  .drawer{padding-top:96px}
  .phead{padding-top:calc(74px + clamp(2.4rem,7vw,4rem))}
  .hero{min-height:92svh}
}
@media (min-width:1121px){.drawer{display:none !important}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .js .reveal{opacity:1;transform:none}
}

@media print{
  .header,.footer,.bookbar,.drawer,.btn{display:none !important}
  body{background:#fff;color:#000}
}

/* ============================================================== BLOCK ====
   The grid item, for places where a genuine set of parallel things exists —
   gift card options, blog posts, the location list. Not a card: no box, no
   background, no shadow. A hairline above it and a lot of air below. */
.card{
  display:flex;flex-direction:column;background:transparent;
  border-top:1px solid var(--line);padding-top:1.8rem;position:relative;
  transition:border-color .5s var(--ease);
}
.card:hover{border-top-color:var(--accent)}
a.card:hover h3{color:var(--accent)}
.card__media{aspect-ratio:4/3;overflow:hidden;margin-bottom:1.6rem;order:-1}
.card__media img{width:100%;height:100%;object-fit:cover;filter:var(--photo-filter);
  transition:transform 1.2s var(--ease)}
.card:hover .card__media img{width:100%;height:100%;object-fit:cover;filter:var(--photo-filter);
  transition:transform 1.2s var(--ease)}
.card__body{display:flex;flex-direction:column;gap:1rem;flex:1}
.card__body > .btns{margin-top:auto;padding-top:1rem}
.card h3{font-size:var(--t-1);transition:color .4s var(--ease)}
.card p{font-size:var(--t--1);line-height:1.7;color:var(--ink-2);margin:0}
.card__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.2rem}
.card__price{font-family:var(--serif);font-size:var(--t-2);color:var(--ink);
  font-weight:300;font-variant-numeric:tabular-nums;line-height:1}
.card__price small{font-family:var(--sans);font-size:.6rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);
  display:block;margin-top:.7rem}
.card--featured{border-top-color:var(--accent)}
.card--featured::before{
  content:attr(data-flag);position:absolute;top:-1px;left:0;
  font-size:.58rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);padding-top:.6rem;
}
.card--featured .card__body{padding-top:1.4rem}
.on-light .card{border-top-color:var(--alt-line)}
.on-light .card:hover{border-top-color:var(--alt-accent)}
.on-light .card h3{color:var(--alt-ink)}
.on-light a.card:hover h3{color:var(--alt-accent)}
.on-light .card p{color:var(--alt-ink-2)}
.on-light .card__price{color:var(--alt-ink)}
.on-light .card__price small{color:var(--alt-ink-3)}
.on-light .card--featured,.on-light .card--featured::before{border-top-color:var(--alt-accent);color:var(--alt-accent)}

/* Standalone <details> carrying the same treatment as .faq details. */
.faq-i{border-bottom:1px solid var(--line)}
.faq-i:first-of-type{border-top:1px solid var(--line)}
.faq-i > summary{
  cursor:pointer;padding:1.6rem 3rem 1.6rem 0;position:relative;list-style:none;
  font-family:var(--serif);font-size:var(--t-1);color:var(--ink);font-weight:400;
  transition:color .4s var(--ease);
}
.faq-i > summary::-webkit-details-marker{display:none}
.faq-i > summary::after,.faq-i > summary::before{content:"";position:absolute;
  top:50%;background:var(--accent);
  transition:transform .45s var(--ease),opacity .3s var(--ease)}
.faq-i > summary::after{width:13px;height:1px;right:.4rem;margin-top:-.5px}
.faq-i > summary::before{width:1px;height:13px;right:.9rem;margin-top:-6.5px}
.faq-i[open] > summary::before{transform:rotate(90deg);opacity:0}
.faq-i > summary:hover{color:var(--accent)}
.faq__b{padding:0 0 1.9rem;max-width:62ch}
.faq__b p{color:var(--ink-2)}
.on-light .faq-i,.on-light .faq-i:first-of-type{border-color:var(--alt-line)}
.on-light .faq-i > summary{color:var(--alt-ink)}
.on-light .faq__b p{color:var(--alt-ink-2)}

/* An <aside> next to prose. Hairline, never a panel. */
aside .card{border-top-color:var(--line-accent)}

/* <picture> is the element the img actually lives in, so it has to carry the
   height for any object-fit fill to resolve against. */
.ed__fig picture,.card__media picture,.hero__bg picture{
  display:block;width:100%;height:100%}

/* .center is applied directly to these elements as often as it wraps them,
   so both the descendant and the compound form have to match. */
.btns.center{justify-content:center}
.head.center{margin-inline:auto}
.head.center .lede,.center .head .lede{margin-inline:auto}
.rule.center,.center > .rule{margin-inline:auto}

/* The "most chosen" label was pushing the featured tier's heading out of line
   with its neighbours. Lift it out of flow and reserve the space on every
   tier so all three headings sit on the same baseline. */
.tier{padding-top:calc(clamp(2.4rem,4vw,3.6rem) + 1.9rem)}
.tier__pl{position:absolute;top:clamp(2.4rem,4vw,3.6rem);left:clamp(1.6rem,3vw,2.8rem);
  margin-bottom:0}

/* ===================================================== HEADER OVER HERO ==
   While the header is transparent it floats on hero photography, which is
   dark in every direction — including the pale ones. So it takes light type
   and the on-photo accent until it resolves onto its own ground. Without this
   a light theme's header is unreadable over its own hero. */
.header:not(.is-stuck) .brand__n{color:var(--hero-ink)}
.header:not(.is-stuck) .brand__s{color:var(--hero-accent)}
.header:not(.is-stuck) .nav a,
.header:not(.is-stuck) .nav button,
.header:not(.is-stuck) .header__tel{color:var(--hero-ink-2)}
.header:not(.is-stuck) .nav a:hover,
.header:not(.is-stuck) .nav button:hover,
.header:not(.is-stuck) .header__tel:hover,
.header:not(.is-stuck) .nav a[aria-current]{color:var(--hero-ink)}
.header:not(.is-stuck) .nav a::after{background:var(--hero-accent)}
.header:not(.is-stuck) .burger span{background:var(--hero-ink)}
.header:not(.is-stuck) .header__r .btn{
  background:var(--hero-accent);border-color:var(--hero-accent);color:#14120E}
.header:not(.is-stuck) .header__r .btn:hover{
  background:var(--hero-ink);border-color:var(--hero-ink);color:#14120E}

/* ======================================================= PAGE-HEAD ART ===
   Artwork bled in from the right of a secondary page header, faded so its left
   edge dissolves into the ground instead of ending on a line. Without it these
   headers are one line of type on a large dark rectangle.

   The fade is a mask on the image itself rather than a gradient overlay in the
   ground's colour. An overlay has to know the background to blend with it, and
   the first attempt used color-mix() to work that out — which, unsupported,
   invalidated the whole gradient and left a hard seam. A mask needs no such
   knowledge and cannot fail that way.

   Behind the content, never over it; aria-hidden either way. */
.phead{position:relative;overflow:hidden;isolation:isolate}
.phead > .shell{position:relative;z-index:1}

.phead__art{position:absolute;top:0;right:0;bottom:0;width:min(64%,940px);z-index:0;
  pointer-events:none;
  /* Two axes composited: horizontal does the blending into the ground,
     vertical stops it butting against the header above and the rule below. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.62) 48%,
      rgba(0,0,0,.92) 76%, #000 100%),
    linear-gradient(180deg, transparent 0%, #000 26%, #000 68%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.62) 48%,
      rgba(0,0,0,.92) 76%, #000 100%),
    linear-gradient(180deg, transparent 0%, #000 26%, #000 68%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  opacity:.72;
}
.phead__art picture{display:block;width:100%;height:100%}
.phead__art img{width:100%;height:100%;object-fit:cover;
  object-position:var(--focal,50% 50%);transform:scale(var(--scale,1));
  filter:var(--photo-filter)}

/* The logo variant. The mark is already artwork on black, so screen blending
   drops its field away and leaves only the glow. */
.phead__art--mark{width:min(46%,600px);display:grid;place-items:center;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 30%, #000 72%);
  mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 30%, #000 72%);
  -webkit-mask-composite:source-over;mask-composite:add;
  opacity:.62}
/* The mark carries a real alpha channel (built from its own luminance), so it
   needs no blend mode. mix-blend-mode was the wrong tool here: the mask on this
   wrapper creates a stacking context, which stops the blend reaching the
   backdrop and leaves the black field showing as a box. */
.phead__art--mark img{width:min(100%,500px);height:auto;object-fit:contain;
  transform:scale(var(--scale,1));filter:none}

/* The mark's field is black, so on a pale ground it would show as a square.
   Midnight is the shipping design; this keeps the other five honest. */
.on-light .phead__art--mark{display:none}

@media (max-width:900px){
  .phead__art{width:82%;opacity:.4}
  .phead__art--mark{width:66%}
  .phead__art--mark img{opacity:.32}
}
@media (prefers-reduced-motion:reduce){.phead__art img{transform:none}}