/* ═══════════════════════════════════════════════════════════════════
   ARTANA — stylesheet
   Structure:  tokens · base · nav · pages · components · responsive · themes
   Theming:    every surface/border/shadow reads a CSS variable, so the
               four themes at the bottom of this file fully reskin the site.
═══════════════════════════════════════════════════════════════════ */

/* ── Design tokens (default = WARM theme) ──────────────────────────── */
:root{
  /* text */
  --ink:#1e1d1b;
  --muted:#746d64;
  /* surfaces */
  --bg:#fbfaf6;            /* page background — crisp warm-white */
  --bg-alt:#f0ece3;        /* page-hero / alt sections   */
  --card:#ffffff;          /* card + panel surface       */
  --card-edge:#f6f3ed;     /* card gradient end stop     */
  --field-bg:#ffffff;      /* form inputs                */
  --nav-bg:rgba(251,250,246,.82);
  --nav-solid:rgba(251,250,246,.96);
  /* accents */
  --walnut:#6f5842;        /* heading accent + primary button */
  --walnut-dark:#403226;   /* button hover               */
  --brass:#a9823f;         /* gold accent                */
  --brass-light:rgba(169,130,63,.15);
  --glow:rgba(169,130,63,.16);   /* soft hero/section glow */
  --btn-text:#ffffff;      /* text on the primary button */
  /* lines + shadow */
  --line:rgba(30,29,27,.10);
  --line-strong:rgba(30,29,27,.20);
  --shadow:30,29,27;       /* rgb tuple, used as rgba(var(--shadow),a) */
  /* footer (dark in every theme) */
  --dark:#221d18;
  --on-dark:#f8f4ec;
  --on-dark-muted:rgba(248,244,236,.72);
  /* metrics */
  --content:1240px;
  --gutter:clamp(24px, 6vw, 88px);
  --ease:cubic-bezier(.25,.1,.25,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --radius-card:20px;
  --radius-sm:10px;
  color-scheme:light;
}

/* ── Base ──────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
/* The `hidden` attribute must win over component display rules (.cta,
   .text-link, .book-summary, etc. all set display and would otherwise
   override the UA [hidden] rule). JS across the portal toggles `hidden`
   to show/hide; this keeps that reliable site-wide. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .3s var(--ease),color .3s var(--ease);
}
a{color:inherit;text-decoration:none;transition:color .2s var(--ease)}
button,input,select,textarea{font:inherit}
img{display:block}

h1,h2,h3{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500;
  letter-spacing:0;
}
h1{font-size:clamp(38px, 5vw, 64px);line-height:1.05;margin:0}
h2{font-size:clamp(28px, 3.4vw, 44px);line-height:1.12;margin:0}
h3{font-size:clamp(21px, 2.1vw, 28px);line-height:1.18;margin:0}
p{margin:0}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--walnut);
  font-size:11px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:24px;
  height:1px;
  background:var(--brass);
  flex-shrink:0;
}
.arrow{
  font-size:14px;
  display:inline-block;
  transition:transform .25s var(--ease);
}

::selection{background:var(--walnut);color:var(--btn-text)}
:focus-visible{outline:2px solid var(--walnut);outline-offset:3px}

/* ── Nav ───────────────────────────────────────────────────────────── */
.nav{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:16px var(--gutter);
  background:var(--nav-bg);
  border-bottom:1px solid transparent;
  backdrop-filter:saturate(160%) blur(20px);
  -webkit-backdrop-filter:saturate(160%) blur(20px);
  transition:background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.nav.scrolled{
  border-bottom-color:var(--line);
  background:var(--nav-solid);
  box-shadow:0 4px 30px rgba(var(--shadow),.06);
}
.wm{display:inline-flex;align-items:center}
.wm-text{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;
  font-weight:600;
  font-size:32px;
  letter-spacing:.005em;
  color:var(--walnut);
  line-height:1;
}
.nav-links{display:flex;gap:30px;font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.nav-links a{position:relative;color:var(--muted);padding:8px 0}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  height:1px;
  background:var(--walnut);
}
.nav-divider{
  width:1px;
  height:18px;
  background:var(--line-strong);
  flex-shrink:0;
}
/* Hamburger — injected by main.js, shown only on mobile (see the ≤760px block) */
.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  margin:-6px 0;
  padding:0;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle:hover{ background:var(--brass-light); }
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";
  display:block;
  width:20px;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .25s var(--ease), opacity .2s var(--ease), background .2s var(--ease);
}
.nav-toggle-bars{ position:relative; }
.nav-toggle-bars::before{ position:absolute; left:0; top:-6px; }
.nav-toggle-bars::after{ position:absolute; left:0; top:6px; }
.nav.nav-open .nav-toggle-bars{ background:transparent; }
.nav.nav-open .nav-toggle-bars::before{ transform:translateY(6px) rotate(45deg); }
.nav.nav-open .nav-toggle-bars::after{ transform:translateY(-6px) rotate(-45deg); }

/* ── Buttons + links ───────────────────────────────────────────────── */
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:44px;
  padding:13px 26px;
  border:1px solid var(--walnut);
  border-radius:var(--radius-sm);
  background:var(--walnut);
  color:var(--btn-text);
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:background .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease);
}
.cta::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.08);
  opacity:0;
  transition:opacity .2s var(--ease);
}
.cta:hover{
  background:var(--walnut-dark);
  border-color:var(--walnut-dark);
  box-shadow:0 8px 26px rgba(var(--shadow),.26);
  transform:translateY(-1px);
}
.cta:hover::after{opacity:1}
.cta:hover .arrow{transform:translateX(4px)}
.cta.whatsapp{background:#1f7a4d;border-color:#1f7a4d;color:#fff}
.cta.whatsapp:hover{
  background:#17613d;
  border-color:#17613d;
  box-shadow:0 8px 28px rgba(31,122,77,.3);
}
.text-link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--walnut);
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  border-bottom:1px solid currentColor;
  transition:color .2s var(--ease);
}
.text-link:hover{color:var(--walnut-dark)}
.text-link:hover .arrow{transform:translateX(4px)}

/* ── Page transitions + scroll reveal ──────────────────────────────── */
.page{display:block;animation:pageFadeIn .42s var(--ease-out) both}
.page[hidden]{display:none;animation:none}
@keyframes pageFadeIn{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .65s var(--ease-out),transform .65s var(--ease-out);
}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.12s}
.reveal-delay-2{transition-delay:.24s}
.reveal-delay-3{transition-delay:.36s}

/* ═══════════════════════════════════════════════════════════════════
   HOME
═══════════════════════════════════════════════════════════════════ */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.85fr);
  gap:clamp(36px, 6vw, 88px);
  align-items:center;
  max-width:calc(var(--content) + var(--gutter) * 2);
  margin:0 auto;
  padding:clamp(56px, 7vw, 100px) var(--gutter) clamp(28px, 4vw, 48px);
  background:
    radial-gradient(ellipse 70% 55% at 80% 22%, var(--glow), transparent 72%),
    radial-gradient(ellipse 50% 50% at 12% 88%, var(--glow), transparent 70%),
    var(--bg);
}
.hero-copy{max-width:760px}
.hero h1{margin:22px 0 26px;max-width:760px}
.hero .sub{
  max-width:620px;
  color:var(--muted);
  font-size:clamp(17px, 1.6vw, 21px);
  line-height:1.65;
}
.hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:38px}
.hero-panel{position:relative}
.hero-figure{
  margin:0;
  position:relative;
  aspect-ratio:4/3;
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:0 20px 60px rgba(var(--shadow),.18),0 4px 16px rgba(var(--shadow),.08);
}
.hero-figure img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.hero-figure:hover img{transform:scale(1.03)}
.hero-figcap{
  position:absolute;
  left:16px;
  bottom:16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 15px;
  background:rgba(20,17,13,.58);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-radius:40px;
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.hero-figcap::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--brass);
  flex-shrink:0;
}

/* Full-bleed image marquee — sits between hero and quick-facts */
.marquee{padding:clamp(16px, 2.5vw, 34px) 0}
.marquee-head{
  display:flex;
  justify-content:center;
  margin-bottom:clamp(18px, 2.6vw, 30px);
}
.marquee-viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee-scroll 60s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{
  position:relative;
  flex:0 0 auto;
  width:clamp(264px, 30vw, 420px);
  aspect-ratio:3/2;
  margin-right:clamp(14px, 1.6vw, 22px);
  border-radius:16px;
  overflow:hidden;
  background:var(--bg-alt);
  box-shadow:0 6px 26px rgba(var(--shadow),.10),0 1px 4px rgba(var(--shadow),.05);
}
.marquee-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
/* Interactive hover — pill label fades in + image gently zooms */
.marquee-item{cursor:default}
.marquee-item:hover img{transform:scale(1.06)}
.marquee-item.crop-a:hover img{transform:scale(1.95)}
.marquee-item.crop-b:hover img{transform:scale(1.8)}
.marquee-item.crop-c:hover img{transform:scale(2)}
.marquee-item.crop-d:hover img{transform:scale(1.9)}
.marquee-item[data-label]::after{
  content:attr(data-label);
  position:absolute;
  bottom:14px;
  left:14px;
  padding:7px 13px;
  background:rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  color:#1c1c20;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.02em;
  border-radius:999px;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 4px 14px rgba(0,0,0,.10);
  opacity:0;
  transform:translateY(6px) scale(.96);
  transition:opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
  z-index:2;
}
.marquee-item:hover::after{opacity:1;transform:translateY(0) scale(1)}
.marquee-item.crop-a img{object-position:46% 72%;transform:scale(1.85)}
.marquee-item.crop-b img{object-position:62% 60%;transform:scale(1.7)}
.marquee-item.crop-c img{object-position:40% 54%;transform:scale(1.9)}
.marquee-item.crop-d img{object-position:30% 56%;transform:scale(1.8)}
@keyframes marquee-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .marquee-viewport{overflow-x:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .page{animation:none}
  html{scroll-behavior:auto}
}

.quick-facts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  max-width:var(--content);
  margin:0 auto;
  padding:clamp(24px, 3vw, 44px) var(--gutter) clamp(56px, 7vw, 88px);
}
.fact{
  background:linear-gradient(150deg, var(--card) 0%, var(--card-edge) 100%);
  border:1px solid var(--line);
  border-radius:16px;
  padding:28px 24px;
  box-shadow:0 1px 3px rgba(var(--shadow),.04),0 6px 20px rgba(var(--shadow),.05);
  transition:border-color .28s var(--ease),box-shadow .28s var(--ease),transform .28s var(--ease);
}
.fact:hover{
  border-color:var(--brass-light);
  box-shadow:0 10px 32px rgba(var(--shadow),.10);
  transform:translateY(-2px);
}
.fact span{
  display:block;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:800;
  margin-bottom:10px;
}
.fact strong{
  font-family:"Cormorant Garamond",serif;
  font-size:30px;
  font-weight:500;
  display:block;
}

/* Shared editorial split sections */
.intro,.story-grid,.space-detail,.contact-body{
  padding:clamp(56px, 7.5vw, 100px) var(--gutter);
}
.intro,.story-grid,.space-detail{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(36px, 6vw, 88px);
  max-width:var(--content);
  margin:0 auto;
}
.intro{
  background:
    radial-gradient(ellipse 60% 50% at 90% 82%, var(--glow), transparent 72%),
    var(--bg);
}
.section-head h2,.story-grid h2,.space-detail h2{margin-top:18px}
.intro-copy,.story-copy,.space-copy p{
  color:var(--muted);
  font-size:17px;
  line-height:1.78;
}
.intro-copy,.story-copy{display:flex;flex-direction:column;gap:22px}

/* Preview-grid head — "available at Dukagjini Centre" framing */
.preview-head{
  max-width:var(--content);
  margin:0 auto;
  padding:clamp(12px, 2vw, 24px) var(--gutter) clamp(16px, 2.2vw, 28px);
}
.preview-head .eyebrow{
  display:block;
  color:var(--brass);
  font-size:10px;
  font-weight:800;
  letter-spacing:.24em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.preview-head .eyebrow::before{ display:none; }
.preview-head h2{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500;
  font-size:clamp(28px, 3.8vw, 44px);
  line-height:1.1;
  color:var(--walnut);
  margin:0;
  max-width:680px;
}

/* Card grids — preview / values / pricing */
.preview-grid,.values,.option-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  max-width:var(--content);
  margin:0 auto;
  padding:0 var(--gutter) clamp(60px, 7.5vw, 100px);
}
.preview-card,.values article,.price-card{
  background:linear-gradient(150deg, var(--card) 0%, var(--card-edge) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(var(--shadow),.04),0 8px 28px rgba(var(--shadow),.06);
  transition:box-shadow .32s var(--ease),border-color .32s var(--ease),transform .32s var(--ease);
}
.preview-card:hover,.values article:hover,.price-card:hover{
  box-shadow:0 16px 48px rgba(var(--shadow),.12);
  border-color:var(--brass-light);
  transform:translateY(-5px);
}
.values article{padding:32px;gap:14px;min-height:218px}

/* ── Member reviews ─────────────────────────────────────────────────────────
   Real Google reviews, quoted verbatim with attribution and linked back to the
   Business Profile. Deliberately NOT marked up as schema.org Review or
   aggregateRating: review markup about your own business on your own site is
   "self-serving" under Google's structured-data policy, it earns no rich
   result (self-serving LocalBusiness star ratings stopped being shown in 2019)
   and it carries manual-action risk. Plain attributed text costs nothing and
   is what AI answer engines quote anyway. */
/* Section wrapper. Without this the .section-head sat flush against the
   viewport edge while the cards below were inset by the gutter. Mirrors
   .lp-related exactly — including no top padding, since the preceding section
   already supplies its own bottom padding and doubling them leaves a gap. */
.reviews{
  padding:0 var(--gutter) clamp(56px, 7vw, 100px);
  max-width:var(--content);
  margin:0 auto;
}
.reviews .section-head{ margin-bottom:clamp(26px, 3.6vw, 42px); }
/* The grid and footer carry their own gutter for use outside .reviews; inside
   it the wrapper owns the gutter, so reset them or the inset doubles. */
.reviews .review-grid,
.reviews .review-foot{ padding:0; max-width:none; margin-left:0; margin-right:0; }
.reviews .review-foot{ margin-top:22px; }

.review-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  max-width:var(--content);
  margin:0 auto;
  padding:0 var(--gutter);
}
.review-card{
  background:linear-gradient(150deg, var(--card) 0%, var(--card-edge) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:28px;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:18px;
  box-shadow:0 1px 3px rgba(var(--shadow),.04),0 8px 28px rgba(var(--shadow),.06);
  transition:box-shadow .32s var(--ease),border-color .32s var(--ease),transform .32s var(--ease);
}
.review-card:hover{
  box-shadow:0 16px 48px rgba(var(--shadow),.12);
  border-color:var(--brass-light);
  transform:translateY(-5px);
}
.review-card blockquote{margin:0}
.review-card blockquote p{
  margin:0;
  font-family:'Cormorant Garamond', serif;
  font-size:19px;
  line-height:1.55;
  color:var(--ink);
}
.review-card figcaption{
  margin-top:auto;
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.review-card figcaption strong{
  display:block;
  margin-bottom:4px;
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.01em;
  text-transform:none;
  color:var(--ink);
}
.review-foot{
  max-width:var(--content);
  margin:24px auto 0;
  padding:0 var(--gutter) clamp(60px, 7.5vw, 100px);
  font-size:14.5px;
  color:var(--muted);
}
.review-foot a{color:var(--ink);border-bottom:1px solid var(--line)}
.review-foot a:hover{border-bottom-color:var(--walnut)}

/* Card media — image header shared by preview + pricing cards */
.card-media{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--bg-alt);
}
.card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s var(--ease);
}
.preview-card:hover .card-media img,
.price-card:hover .card-media img{transform:scale(1.04)}
.card-num{
  position:absolute;
  top:13px;
  left:16px;
  font-family:"Cormorant Garamond",serif;
  font-size:25px;
  font-weight:600;
  line-height:1;
  color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.55);
}
.card-body{
  display:flex;
  flex-direction:column;
  gap:15px;
  flex:1;
  padding:clamp(24px, 2.4vw, 32px);
}
.preview-card p,.values p,.price-card p{color:var(--muted);line-height:1.7}
.card-from{
  color:var(--walnut);
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  margin:-2px 0 4px;
}
.preview-card a{
  margin-top:auto;
  align-self:flex-start;
  color:var(--walnut);
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  border-bottom:1px solid currentColor;
}
.preview-card a:hover .arrow{transform:translateX(4px)}

/* Building cards — whole card clickable + disabled (coming soon) state */
.preview-card--clickable{position:relative;cursor:pointer}
.preview-card--clickable .card-stretch::after{content:"";position:absolute;inset:0;z-index:2}
.preview-card--disabled{opacity:.55;filter:grayscale(.5);pointer-events:none}
.preview-card--disabled:hover{transform:none;box-shadow:0 1px 3px rgba(var(--shadow),.04),0 8px 28px rgba(var(--shadow),.06);border-color:var(--line)}
.preview-card--disabled .card-soon{
  margin-top:auto;
  align-self:flex-start;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE HEADERS (about / space / contact)
═══════════════════════════════════════════════════════════════════ */
.page-hero{
  padding:clamp(48px, 6.5vw, 88px) var(--gutter);
  background:var(--bg-alt);
}
.page-hero.soft{
  background:
    radial-gradient(ellipse 65% 55% at 85% 16%, var(--glow), transparent 72%),
    var(--bg-alt);
}
.page-hero.split{
  display:grid;
  grid-template-columns:1fr .72fr;
  gap:clamp(32px, 6vw, 78px);
  align-items:center;
  background:
    radial-gradient(ellipse 55% 60% at 92% 25%, var(--glow), transparent 72%),
    var(--bg-alt);
}
.page-hero-inner,.page-hero-image{max-width:var(--content);margin:0 auto;width:100%}
.page-hero .crumbs{
  display:flex;
  gap:10px;
  margin-bottom:28px;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.page-hero .current{color:var(--walnut)}
.page-hero h1{max-width:830px}
.page-hero p{
  max-width:650px;
  color:var(--muted);
  font-size:18px;
  line-height:1.72;
  margin-top:24px;
}

/* ═══════════════════════════════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════════════════════════════ */
.values article{min-height:230px}

/* ═══════════════════════════════════════════════════════════════════
   SPACE — detail · gallery · pricing
═══════════════════════════════════════════════════════════════════ */
.space-detail{
  align-items:start;
  border-bottom:1px solid var(--line);
}
.space-copy p{margin-top:24px;max-width:560px}
.stat-list{margin:0;padding:0}
.stat-list div{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:24px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  transition:border-color .2s var(--ease);
}
.stat-list div:first-child{border-top:1px solid var(--line)}
.stat-list div:hover{border-bottom-color:var(--brass-light)}
.stat-list dt{
  color:var(--walnut);
  font-family:"Cormorant Garamond",serif;
  font-size:28px;
  font-weight:600;
}
.stat-list dd{
  margin:0;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  align-self:center;
}

/* Renders gallery */
.renders-gallery{
  max-width:var(--content);
  margin:0 auto;
  padding:clamp(64px, 8vw, 110px) var(--gutter);
}
.renders-head{margin-bottom:clamp(28px, 3.5vw, 48px)}
.renders-head h2{margin-top:18px}
.renders-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px, 1.8vw, 22px);
}
.render-item{
  margin:0;
  position:relative;
  border-radius:18px;
  aspect-ratio:4/3;
  overflow:hidden;
  aspect-ratio:4/3;
  box-shadow:0 4px 26px rgba(var(--shadow),.10);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.render-item:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 16px 52px rgba(var(--shadow),.16);
}
.render-item--large{grid-column:1 / -1;aspect-ratio:21/9}
.render-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s var(--ease);
}
.render-item:hover img{transform:scale(1.04)}
.render-item figcaption{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:18px 22px;
  background:linear-gradient(to top, rgba(22,17,12,.72) 0%, transparent 100%);
  color:rgba(255,255,255,.9);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* Pricing */
.pricing{
  max-width:var(--content);
  margin:0 auto;
  padding:clamp(56px, 7vw, 96px) var(--gutter) clamp(60px, 7.5vw, 100px);
}
.pricing-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:clamp(28px, 4vw, 56px);
  align-items:end;
  padding-bottom:clamp(28px, 3.5vw, 40px);
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(36px, 5vw, 56px);
}
.pricing-intro h2{margin-top:16px;max-width:520px}
.pricing-controls{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:14px;
}
/* Fine print under a pricing block (e.g. service exclusions) — full width,
   unlike .pricing-note which is a narrow column in the pricing head. */
.pricing-exclusions{
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
  margin:clamp(28px, 3.5vw, 40px) 0 0;
  padding-top:clamp(20px, 2.5vw, 26px);
  border-top:1px solid var(--line);
}
.pricing-note{
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
  max-width:300px;
  text-align:right;
}
.billing-toggle{
  display:inline-grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--line-strong);
  border-radius:40px;
  background:var(--card);
  padding:4px;
  min-width:236px;
}
.billing-toggle button{
  border:0;
  background:transparent;
  color:var(--muted);
  min-height:36px;
  padding:6px 14px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  border-radius:40px;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.billing-toggle button.active{
  background:var(--walnut);
  color:var(--btn-text);
  box-shadow:0 2px 10px rgba(var(--shadow),.20);
}
/* Per-card inline switcher (lives inside .price-card under the price-top) */
.billing-toggle.inline-toggle{
  min-width:0;
  padding:3px;
  margin:18px 0 4px;
  align-self:flex-start;
}
.billing-toggle.inline-toggle button{
  font-size:10px;
  letter-spacing:.14em;
  padding:5px 14px;
  min-height:30px;
}
/* Quiet "first week free" line under the dedicated-desk price (home, /book,
   centre). Understated brass — a note, not a marketing banner. */
.price-free-note{
  margin:8px 0 0;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--walnut);
}
.book-intro + .price-free-note{ margin-top:6px; }
/* "From" overline label inside .price */
.price .from{
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1;
  margin-bottom:2px;
}
.pricing .option-list{padding:0;max-width:none}
/* 4-card pricing block → 2x2 on wider screens (3+1 wrap looks unbalanced) */
@media (min-width:900px){
  .pricing .option-list:has(.price-card:nth-child(4)){
    grid-template-columns:repeat(2, 1fr);
  }
}
.price-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}
.price-top h3{max-width:170px}
.price{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
  margin:0;
  text-align:right;
}
.price strong{
  color:var(--walnut);
  font-family:"Cormorant Garamond",serif;
  font-size:42px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
}
.price span{
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.35;
  max-width:150px;
}
.price-list{
  list-style:none;
  margin:auto 0 0;
  padding:18px 0 0;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:9px;
  color:var(--muted);
}
.price-list li::before{
  content:"-";
  color:var(--brass);
  margin-right:8px;
  font-weight:800;
}

/* ═══════════════════════════════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════════════════════════════ */
.contact-grid{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:clamp(40px, 6vw, 88px);
  max-width:var(--content);
  margin:0 auto;
  align-items:start;
}
.editorial h2{margin:18px 0 24px}
.editorial p{color:var(--muted);font-size:17px;line-height:1.76;max-width:520px}
.contact-actions{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
  margin-top:30px;
}
.editorial-figure{
  margin:34px 0 0;
  border-radius:var(--radius-card);
  overflow:hidden;
  aspect-ratio:16/10;
  box-shadow:0 10px 40px rgba(var(--shadow),.12),0 2px 10px rgba(var(--shadow),.05);
}
.editorial-figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.editorial-figure:hover img{transform:scale(1.03)}
.meta-block{
  margin:40px 0 0;
  padding:0;
  border-top:1px solid var(--line);
}
.meta-block div{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:22px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.meta-block dt{
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.meta-block dd{margin:0;font-weight:600;line-height:1.55}
.meta-block a:hover{color:var(--walnut)}

.contact-map-section{
  padding:0 var(--gutter) clamp(56px, 7.5vw, 100px);
}
.contact-map{
  max-width:var(--content);
  margin:0 auto;
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:0 10px 40px rgba(var(--shadow),.12),0 2px 10px rgba(var(--shadow),.05);
  position:relative;
  aspect-ratio:16/9;
}
.contact-map iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
@media (max-width:720px){
  .contact-map{aspect-ratio:4/3}
}

/* ═══════════════════════════════════════════════════════════════════
   LANDING PAGES (/private-offices-pristina, /coworking-pristina,
   /serviced-offices-pristina) — shared utility classes
═══════════════════════════════════════════════════════════════════ */
.lp-list{
  margin:18px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.lp-list li{
  position:relative;
  padding-left:22px;
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
}
.lp-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.7em;
  width:8px;
  height:1px;
  background:var(--walnut);
  opacity:.55;
}
.lp-list li strong{color:var(--ink);font-weight:600}

/* Stat chips — the "10% corporate tax · 0% dividend withholding · …" row on the
   nearshore lander. Authored as `class="stat-chips lp-list"` so that without
   these rules it still degrades to a readable dash-bulleted list rather than a
   broken one; here it becomes a horizontal pill row. */
.stat-chips{
  flex-direction:row;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}
.stat-chips li{
  padding:7px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--card);
  color:var(--ink);
  font-size:13.5px;
  font-weight:500;
  letter-spacing:.01em;
}
.stat-chips li::before{display:none}   /* kill the inherited lp-list dash */

/* "Viewings in person or by video call." under a CTA band's buttons. */
.lp-cta-foot{
  margin:14px 0 0;
  color:var(--muted);
  font-size:14.5px;
}

.lp-faq{
  margin:18px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.lp-faq dt{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(20px, 2vw, 24px);
  font-weight:500;
  color:var(--ink);
  margin:0 0 6px;
  line-height:1.35;
}
.lp-faq dd{
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.78;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}
.lp-faq dd:last-child{border-bottom:0;padding-bottom:0}

.lp-cta-band{
  padding:clamp(56px, 7vw, 96px) var(--gutter);
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, var(--glow), transparent 75%),
    var(--bg);
  text-align:center;
}
.lp-cta-inner{
  max-width:720px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.lp-cta-inner h2{margin:0;font-size:clamp(28px, 3.5vw, 42px)}
.lp-cta-inner p{color:var(--muted);font-size:17px;margin:0}
.lp-cta-inner .hero-actions{justify-content:center;margin-top:12px}

.lp-related{
  padding:0 var(--gutter) clamp(56px, 7vw, 100px);
  max-width:var(--content);
  margin:0 auto;
}
.lp-related .section-head{
  margin-bottom:clamp(28px, 4vw, 48px);
  max-width:var(--content);
}
.lp-related .preview-grid{
  padding:0;
  max-width:none;
}

@media (max-width:960px){
  .lp-cta-band{padding-left:var(--gutter);padding-right:var(--gutter)}
}

/* ═══════════════════════════════════════════════════════════════════
   BLOG / ARTICLE — long-form reading layout
═══════════════════════════════════════════════════════════════════ */
.article-page{
  padding:clamp(60px, 8vw, 120px) var(--gutter) clamp(60px, 8vw, 110px);
}
.article-wrap{
  max-width:760px;
  margin:0 auto;
}
.article-hero{
  margin-bottom:50px;
}
.article-hero .crumbs{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:14px;
}
.article-hero .crumbs a{color:var(--muted)}
.article-hero .crumbs a:hover{color:var(--walnut)}
.article-meta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:18px;
}
.article-meta span{position:relative}
.article-meta span + span::before{
  content:"·";
  position:absolute;
  left:-9px;
  color:var(--muted);
}
.article-hero h1{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:clamp(36px, 5vw, 56px);
  line-height:1.15;
  margin:0 0 26px;
  color:var(--ink);
  letter-spacing:-0.01em;
}
.article-lead{
  font-size:21px;
  line-height:1.55;
  color:var(--ink);
  margin:0 0 30px;
  font-weight:400;
}
.article-body{
  color:var(--ink);
  font-size:17px;
  line-height:1.78;
}
.article-body h2{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:clamp(28px, 3.4vw, 36px);
  line-height:1.28;
  margin:50px 0 18px;
  color:var(--ink);
  letter-spacing:-0.005em;
}
.article-body h3{
  font-size:19px;
  font-weight:600;
  margin:34px 0 12px;
  color:var(--ink);
}
.article-body p{
  margin:0 0 22px;
  color:var(--muted);
}
.article-body p strong{color:var(--ink);font-weight:600}
.article-body a{color:var(--walnut);text-decoration:underline;text-decoration-color:rgba(var(--shadow),.25);text-underline-offset:3px;transition:text-decoration-color .2s}
.article-body a:hover{text-decoration-color:var(--walnut)}
.article-body ul,
.article-body ol{
  margin:0 0 24px;
  padding-left:24px;
  color:var(--muted);
}
.article-body li{
  margin-bottom:10px;
  line-height:1.72;
}
.article-body ul li::marker{color:var(--walnut)}
.article-table{
  width:100%;
  border-collapse:collapse;
  margin:24px 0 30px;
  font-size:15px;
}
.article-table th,
.article-table td{
  text-align:left;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
  line-height:1.55;
}
.article-table th{
  font-weight:600;
  color:var(--ink);
  border-bottom:2px solid rgba(var(--shadow),.15);
  font-size:14px;
  letter-spacing:.02em;
}
.article-table td{color:var(--muted)}
.article-quote{
  margin:36px 0;
  padding:24px 28px;
  border-left:3px solid var(--walnut);
  background:rgba(var(--shadow),.03);
  border-radius:0 6px 6px 0;
}
.article-quote p{
  margin:0 0 14px;
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:21px;
  line-height:1.5;
  color:var(--ink);
}
.article-quote cite{
  display:block;
  font-style:normal;
  font-family:'Inter', sans-serif;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.article-footnote{
  margin:48px 0 0;
  padding:22px 26px;
  font-size:14px;
  font-style:italic;
  color:var(--muted);
  background:rgba(var(--shadow),.03);
  border-radius:8px;
  line-height:1.65;
}
.article-footnote a{color:var(--walnut)}

/* Blog index */
.blog-index{
  padding:clamp(50px, 7vw, 100px) var(--gutter) clamp(60px, 8vw, 110px);
  max-width:1100px;
  margin:0 auto;
}
.blog-index-head{
  margin-bottom:clamp(36px, 5vw, 60px);
  max-width:680px;
}
.blog-index-head h1{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:clamp(36px, 4.5vw, 52px);
  margin:8px 0 14px;
  letter-spacing:-0.01em;
}
.blog-index-head p{
  color:var(--muted);
  font-size:18px;
  line-height:1.65;
  max-width:640px;
}

/* Card grid */
.blog-feed{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(18px, 2vw, 26px);
}
.blog-entry{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:clamp(26px, 2.6vw, 38px);
  background:linear-gradient(155deg, var(--card) 0%, var(--card-edge) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  text-decoration:none;
  color:inherit;
  overflow:hidden;
  isolation:isolate;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
/* Accent bar that wipes in on hover */
.blog-entry::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:var(--walnut);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s var(--ease);
}
.blog-entry:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 50px rgba(var(--shadow),.13), 0 4px 14px rgba(var(--shadow),.06);
  border-color:transparent;
}
.blog-entry:hover::before{transform:scaleX(1)}
.blog-entry:hover h3{color:var(--walnut)}

/* Feature card spans both columns, larger */
.blog-entry--feature{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:clamp(24px, 3vw, 48px);
  align-items:center;
  background:
    radial-gradient(ellipse 70% 90% at 88% 50%, var(--glow), transparent 70%),
    linear-gradient(155deg, var(--card) 0%, var(--card-edge) 100%);
}
.blog-entry--feature .blog-entry-body{display:flex;flex-direction:column}
.blog-entry--feature h3{font-size:clamp(28px, 3.4vw, 40px)}
.blog-entry--feature .blog-entry-figure{
  align-self:stretch;
  border-radius:14px;
  overflow:hidden;
  aspect-ratio:16/11;
  box-shadow:0 10px 36px rgba(var(--shadow),.14);
}
.blog-entry--feature .blog-entry-figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.blog-entry--feature:hover .blog-entry-figure img{transform:scale(1.04)}

/* Card chrome */
.blog-entry-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.blog-entry-chip{
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--walnut);
  background:rgba(var(--shadow),.05);
  border:1px solid var(--line);
  padding:5px 11px;
  border-radius:999px;
  white-space:nowrap;
}
.blog-entry-read{
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.blog-entry h3{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:clamp(22px, 2.4vw, 28px);
  line-height:1.22;
  margin:0 0 12px;
  letter-spacing:-0.005em;
  transition:color .25s var(--ease);
}
.blog-entry p{
  color:var(--muted);
  font-size:15.5px;
  line-height:1.66;
  margin:0 0 20px;
}
.blog-entry-foot{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.blog-entry-date{
  font-size:12px;
  letter-spacing:.04em;
  color:var(--muted);
}
.blog-entry-go{
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--walnut);
  white-space:nowrap;
}
.blog-entry-go .arrow{display:inline-block;transition:transform .3s var(--ease)}
.blog-entry:hover .blog-entry-go .arrow{transform:translateX(4px)}

@media (max-width:760px){
  .blog-feed{grid-template-columns:1fr}
  .blog-entry--feature{grid-template-columns:1fr}
  .blog-entry--feature .blog-entry-figure{order:-1;aspect-ratio:16/9}
}

@media (max-width:720px){
  .article-hero h1{font-size:32px}
  .article-lead{font-size:18px}
  .article-body{font-size:16px}
  .article-body h2{font-size:26px;margin-top:40px}
  .article-table{font-size:14px}
  .article-table th,.article-table td{padding:10px 8px}
  .article-quote{padding:20px 22px}
  .article-quote p{font-size:19px}
}

.form-card{
  background:linear-gradient(150deg, var(--card) 0%, var(--card-edge) 100%);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 4px 40px rgba(var(--shadow),.08),0 1px 8px rgba(var(--shadow),.04);
  padding:clamp(28px, 4vw, 52px);
}
.form-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:18px;
  padding-bottom:18px;
  margin-bottom:30px;
  border-bottom:1px solid var(--line);
}
.form-head h3{font-size:30px}
.form-meta,.legal{color:var(--muted);font-size:11px;line-height:1.5}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:flex;flex-direction:column}
.field.full{grid-column:1 / -1}
.field label{
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.field input,.field select,.field textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--field-bg);
  color:var(--ink);
  padding:13px 14px;
  font-size:16px;   /* never below 16px — iOS Safari zoom-jumps on focus otherwise */
  outline:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{min-height:120px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--walnut);
  box-shadow:0 0 0 3px var(--brass-light);
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.65}
.form-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-top:30px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.legal{max-width:340px;font-style:italic}

/* Honeypot — kept out of sight and the tab order */
.hp{
  position:absolute !important;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
/* Form submission feedback */
.form-status{
  margin-top:24px;
  padding:14px 18px;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  line-height:1.5;
}
.form-status.sending{background:var(--brass-light);color:var(--walnut)}
.form-status.success{background:rgba(31,122,77,.13);color:#1f7a4d}
.form-status.error{background:rgba(192,57,43,.12);color:#c0392b}

/* ═══════════════════════════════════════════════════════════════════
   IMAGE SLOTS
═══════════════════════════════════════════════════════════════════ */
.img-slot{
  position:relative;
  width:100%;
  background:linear-gradient(160deg, #ede3d4 0%, #dfd3c0 50%, #d0c4b0 100%);
  border-radius:20px;
  overflow:hidden;
  min-height:280px;
  box-shadow:0 8px 44px rgba(var(--shadow),.14),0 2px 12px rgba(var(--shadow),.06);
}
.img-slot img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.img-slot:hover img{transform:scale(1.03)}
.ratio-4-3{aspect-ratio:4/3}

/* ═══════════════════════════════════════════════════════════════════
   FEATURE VIDEO — full-bleed 16:9 placement on the home page
═══════════════════════════════════════════════════════════════════ */
.feature-video{
  max-width:var(--content);
  margin:0 auto;
  padding:0 var(--gutter) clamp(40px, 5vw, 68px);
}
.feature-video-frame{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--radius-card);
  overflow:hidden;
  background:var(--bg-alt);
  box-shadow:0 14px 48px rgba(var(--shadow),.14), 0 2px 8px rgba(var(--shadow),.05);
}
.feature-video-frame video,
.feature-video-frame img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.feature-video-cap{
  position:absolute;
  left:18px;
  bottom:18px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 15px;
  background:rgba(20,17,13,.55);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-radius:40px;
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.feature-video-cap::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--brass);
  flex-shrink:0;
}

/* Play / pause toggle — sits opposite the caption */
.feature-video-toggle{
  position:absolute;
  right:18px;
  bottom:18px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  padding:0;
  border:0;
  border-radius:50%;
  cursor:pointer;
  color:#fff;
  background:rgba(20,17,13,.55);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transition:transform .2s ease, background .2s ease, opacity .2s ease;
  opacity:.85;
}
.feature-video-toggle:hover,
.feature-video-toggle:focus-visible{
  background:rgba(20,17,13,.72);
  opacity:1;
  transform:scale(1.06);
  outline:none;
}
.feature-video-toggle svg{ width:18px; height:18px; display:block; }
.feature-video-toggle .icon-play{ display:none; margin-left:2px; }
.feature-video-frame[data-state="paused"] .feature-video-toggle .icon-play{ display:block; }
.feature-video-frame[data-state="paused"] .feature-video-toggle .icon-pause{ display:none; }
@media (max-width:520px){
  .feature-video-toggle{ width:42px; height:42px; right:14px; bottom:14px; }
  .feature-video-toggle svg{ width:16px; height:16px; }
}
@media (prefers-reduced-motion: reduce){
  .feature-video-toggle{ transition:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   LOCATIONS — city grid, building cards, status pills
═══════════════════════════════════════════════════════════════════ */

/* Locations grid (cities on /spaces) — compact 4-up */
.locations-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(14px, 1.6vw, 22px);
  max-width:var(--content);
  margin:0 auto;
  padding:clamp(56px, 6vw, 88px) var(--gutter) clamp(60px, 7.5vw, 100px);
}
.locations-grid .loc-card{aspect-ratio:4/5}
.locations-grid .loc-city{font-size:clamp(22px, 2.4vw, 32px)}
.locations-grid .loc-meta{padding:clamp(18px, 2vw, 26px);gap:10px}
.locations-grid .loc-arrow{
  width:34px;height:34px;font-size:14px;
  top:clamp(14px, 1.6vw, 20px);
  right:clamp(14px, 1.6vw, 20px);
}

/* Compact preview row on the home page */
.spaces-preview{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(14px, 1.6vw, 22px);
  max-width:var(--content);
  margin:0 auto;
  padding:0 var(--gutter) clamp(40px, 5vw, 68px);
}
.spaces-preview .loc-card{aspect-ratio:3/4}
.spaces-preview .loc-city{font-size:clamp(22px, 2.4vw, 32px)}
.spaces-preview .loc-meta{padding:clamp(18px, 2vw, 24px);gap:10px}
.spaces-preview .loc-arrow{
  width:34px;height:34px;font-size:14px;
  top:clamp(14px, 1.6vw, 20px);
  right:clamp(14px, 1.6vw, 20px);
}

/* Section heading row with a side link (used on home + others) */
.spaces-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  max-width:var(--content);
  margin:0 auto;
  padding:clamp(40px, 5vw, 68px) var(--gutter) clamp(20px, 2.5vw, 36px);
}
.spaces-head .spaces-intro h2{margin-top:14px;max-width:520px}
.spaces-head .text-link{flex-shrink:0}

/* The card itself — shared between /spaces and the home preview */
.loc-card{
  position:relative;
  display:block;
  aspect-ratio:4/5;
  border-radius:var(--radius-card);
  overflow:hidden;
  background:var(--bg-alt);
  box-shadow:0 8px 36px rgba(var(--shadow),.10);
  transition:box-shadow .35s var(--ease),transform .35s var(--ease);
  color:#fff;
  text-decoration:none;
}
.loc-card.is-open:hover{
  box-shadow:0 20px 60px rgba(var(--shadow),.18);
  transform:translateY(-4px);
}
.loc-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease),filter .4s var(--ease);
}
.loc-card.is-open:hover .loc-img{transform:scale(1.05)}
.loc-card.is-comingsoon .loc-img{
  filter:blur(1px) saturate(.9) brightness(.97);
  transform:scale(1.02);
}
/* Reframe Podgorica so the city sits in view (default crop went too far left) */
.loc-card .loc-img[src*="city-podgorica"]{ object-position:72% center; }
.loc-veil{
  position:absolute;
  inset:0;
  background:linear-gradient(170deg, rgba(20,17,13,.08) 0%, rgba(20,17,13,.72) 100%);
}
.loc-card.is-comingsoon .loc-veil{
  background:linear-gradient(180deg, rgba(20,17,13,.10) 0%, rgba(20,17,13,.42) 100%);
}
.loc-meta{
  position:absolute;
  inset:auto 0 0 0;
  padding:clamp(22px, 2.8vw, 34px);
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:2;
}
.loc-country{
  font-size:10px;
  letter-spacing:.22em;
  font-weight:800;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  margin:0;
}
.loc-city{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(34px, 4.5vw, 56px);
  font-weight:500;
  line-height:1.02;
  margin:0;
  color:#fff;
}
.loc-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:flex-start;
  padding:8px 14px;
  border-radius:40px;
  background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.loc-pill::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  flex-shrink:0;
}
.loc-pill.is-open{
  background:var(--brass);
  color:#1f1a14;
}
.loc-pill.is-open::before{background:#1f7a4d}
.loc-arrow{
  position:absolute;
  top:clamp(18px, 2.2vw, 28px);
  right:clamp(18px, 2.2vw, 28px);
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:#fff;
  font-size:16px;
  z-index:2;
  transition:transform .25s var(--ease),background .25s var(--ease);
}
.loc-card.is-open:hover .loc-arrow{
  transform:translate(3px,-3px);
  background:rgba(255,255,255,.26);
}
.loc-card.is-comingsoon{cursor:default}
.loc-card.is-comingsoon .loc-arrow{display:none}

/* Buildings grid (on /pristina) */
.building-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(20px, 2.4vw, 32px);
  max-width:var(--content);
  margin:0 auto;
  padding:0 var(--gutter) clamp(60px, 7.5vw, 100px);
}
.building-grid .card-media{aspect-ratio:5/4}
.card-meta-line{
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:-2px 0 4px;
}

@media (max-width:960px){
  .locations-grid,.spaces-preview{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:760px){
  .building-grid{grid-template-columns:1fr}
  .spaces-head{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){
  .locations-grid,.spaces-preview{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════
   LEGAL PAGE (privacy policy)
═══════════════════════════════════════════════════════════════════ */
.legal-body{
  max-width:760px;
  margin:0 auto;
  padding:clamp(56px, 8vw, 100px) var(--gutter) clamp(76px, 10vw, 124px);
}
.legal-updated{
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.legal-body h2{
  font-size:clamp(20px, 2.3vw, 27px);
  line-height:1.2;
  margin:40px 0 14px;
}
.legal-body h2:first-of-type{margin-top:34px}
.legal-body p{
  color:var(--muted);
  font-size:16px;
  line-height:1.78;
  margin-bottom:14px;
}
.legal-body a{
  color:var(--walnut);
  border-bottom:1px solid var(--line-strong);
}
.legal-body a:hover{color:var(--walnut-dark)}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER (dark in every theme)
═══════════════════════════════════════════════════════════════════ */
.ftr{
  background:
    radial-gradient(ellipse at 80% 0%, rgba(201,163,95,.07) 0%, transparent 50%),
    var(--dark);
  color:var(--on-dark-muted);
  padding:clamp(56px, 7vw, 80px) var(--gutter) 32px;
  border-top:2px solid var(--brass);
}
.ftr-top{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:48px;
  max-width:var(--content);
  margin:0 auto;
  padding-bottom:42px;
  border-bottom:1px solid rgba(248,244,236,.1);
}
.ftr-wm{
  color:var(--on-dark);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;
  font-weight:600;
  font-size:34px;
  letter-spacing:.005em;
  line-height:1;
  margin-bottom:18px;
}
.ftr-brand p{line-height:1.7}
.ftr-social{
  display:flex;
  gap:12px;
  margin-top:24px;
}
.ftr-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(248,244,236,.16);
  color:var(--on-dark);
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.ftr-social a:hover{
  background:var(--brass);
  border-color:var(--brass);
  color:#221d18;
  transform:translateY(-2px);
}
.ftr-social svg{width:18px;height:18px}

.ftr-prefs{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:20px;
  flex-wrap:wrap;
}
.ftr-prefs-label{
  color:rgba(248,244,236,.48);
  font-size:10px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.ftr-lang{
  display:flex;
  gap:4px;
  align-items:center;
}
.ftr-lang-btn{
  background:transparent;
  border:1px solid rgba(248,244,236,.18);
  color:var(--on-dark-muted);
  padding:5px 10px;
  border-radius:6px;
  font:inherit;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.ftr-lang-btn:hover{background:rgba(248,244,236,.08);color:var(--on-dark)}
.ftr-lang-btn.active{
  background:var(--brass);
  border-color:var(--brass);
  color:#1f1a14;
}
.ftr-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.ftr-label{
  display:block;
  color:rgba(248,244,236,.48);
  font-size:10px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ftr a{color:var(--on-dark)}
.ftr a:hover{color:#d2ae68}
.ftr-bot{
  display:flex;
  justify-content:space-between;
  gap:18px;
  max-width:var(--content);
  margin:24px auto 0;
  color:rgba(248,244,236,.4);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.ftr-bot-links{
  display:flex;
  gap:22px;
  align-items:center;
}
.ftr-bot-links a:hover{color:#d2ae68}

/* ═══════════════════════════════════════════════════════════════════
   LANGUAGE DROPDOWN
═══════════════════════════════════════════════════════════════════ */
.lang-dropdown{position:relative;flex-shrink:0}
.lang-trigger{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--line-strong);
  border-radius:40px;
  background:var(--card);
  padding:5px 12px 5px 10px;
  min-height:34px;
  color:var(--ink);
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.lang-trigger:hover{border-color:var(--walnut);background:var(--bg-alt)}
.lang-flag{
  width:18px;
  height:13px;
  border-radius:2px;
  flex-shrink:0;
  display:inline-block;
  object-fit:cover;
  box-shadow:0 0 0 1px rgba(0,0,0,.06);
}
.lang-chevron{
  width:10px;height:6px;
  color:var(--muted);
  flex-shrink:0;
  transition:transform .22s var(--ease);
}
.lang-dropdown.open .lang-chevron{transform:rotate(180deg)}
.lang-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  background:var(--card);
  border:1px solid var(--line-strong);
  border-radius:14px;
  box-shadow:0 10px 36px rgba(var(--shadow),.14),0 2px 8px rgba(var(--shadow),.06);
  list-style:none;
  margin:0;
  padding:6px;
  min-width:168px;
  z-index:100;
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .18s var(--ease),transform .18s var(--ease);
}
.lang-dropdown.open .lang-menu{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.lang-option{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:9px 13px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  text-align:left;
  transition:background .15s var(--ease),color .15s var(--ease);
}
.lang-option:hover{background:var(--bg-alt);color:var(--ink)}
.lang-option.active{color:var(--walnut);background:var(--brass-light)}

/* ═══════════════════════════════════════════════════════════════════
   THEME SWITCHER
═══════════════════════════════════════════════════════════════════ */
.theme-switcher{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}
.theme-swatch{
  width:13px;
  height:13px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  outline:1.5px solid transparent;
  outline-offset:2px;
  padding:0;
  cursor:pointer;
  transition:transform .22s var(--ease),outline-color .22s var(--ease);
}
.theme-swatch:hover{transform:scale(1.2)}
.theme-swatch.active{outline-color:var(--walnut);transform:scale(1.15)}
.theme-swatch[data-theme="warm"]    {background:#a9823f}
.theme-swatch[data-theme="oak"]     {background:#b48d52}
.theme-swatch[data-theme="sand"]    {background:#8a5a2a}
.theme-swatch[data-theme="pearl"]   {background:#d9cdb6}
.theme-swatch[data-theme="marble"]  {background:#dad8d2}
.theme-swatch[data-theme="linen"]   {background:linear-gradient(135deg,#ffffff 50%,#16161a 50%)}
.theme-swatch[data-theme="onyx"]    {background:#26221e}
.theme-swatch[data-theme="obsidian"]{background:#0e0d0c}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════ */
@media (max-width:960px){
  .hero,.page-hero.split,.intro,.story-grid,.space-detail,.contact-grid{grid-template-columns:1fr}
  .hero-figure{aspect-ratio:3/2}
  .pricing-head{grid-template-columns:1fr;align-items:start}
  .pricing-controls{align-items:flex-start}
  .pricing-note{text-align:left}
  .quick-facts,.preview-grid,.values,.option-list,.review-grid{grid-template-columns:1fr 1fr}
  .page-hero-image{max-width:none}
}
@media (max-width:760px){
  /* (mobile-nav panel rules live in the authoritative block near the end of
     this file — "Mobile nav: hamburger toggles .nav-links" — one source only;
     a duplicate block here used to half-merge with it and misalign the menu) */
  .renders-grid{grid-template-columns:1fr 1fr}
  .render-item--large{grid-column:1 / -1;aspect-ratio:16/9}
}
@media (max-width:620px){
  h1{font-size:clamp(42px, 14vw, 58px)}
  .quick-facts,.preview-grid,.values,.option-list,.review-grid{grid-template-columns:1fr}
  .pricing .option-list{padding-left:0;padding-right:0}
  .billing-toggle{width:100%;min-width:0}
  .price-top{flex-direction:column;gap:14px}
  .price{align-items:flex-start;text-align:left}
  .price span{max-width:none}
  .stat-list div,.meta-block div{grid-template-columns:1fr;gap:4px}
  .form-grid{grid-template-columns:1fr}
  .form-head,.form-foot,.ftr-bot{flex-direction:column;align-items:flex-start}
  .ftr-top,.ftr-cols{grid-template-columns:1fr}
  .renders-grid{grid-template-columns:1fr}
  .render-item--large{grid-column:1;aspect-ratio:4/3}
}

/* ═══════════════════════════════════════════════════════════════════
   COLOUR THEMES
   Applied via data-theme="oak|sand|pearl|marble|onyx|obsidian" on <html>.
   Default (warm) = the :root tokens above. All share one warm
   material family — gold, brown, stone, off-white, charcoal.
═══════════════════════════════════════════════════════════════════ */

/* PEARL — bleached, airy, near-white ivory with a soft taupe accent. */
[data-theme="pearl"]{
  --ink:#2b2824;
  --muted:#8a8377;
  --bg:#faf8f3;
  --bg-alt:#f1ede3;
  --card:#ffffff;
  --card-edge:#f7f3ea;
  --field-bg:#ffffff;
  --nav-bg:rgba(250,248,243,.82);
  --nav-solid:rgba(250,248,243,.96);
  --walnut:#7c6e5c;
  --walnut-dark:#5b5042;
  --brass:#b29a73;
  --brass-light:rgba(178,154,115,.16);
  --glow:rgba(178,154,115,.12);
  --btn-text:#ffffff;
  --line:rgba(43,40,36,.09);
  --line-strong:rgba(43,40,36,.17);
  --shadow:43,40,36;
  --dark:#2b2825;
  --on-dark:#f1ede3;
  --on-dark-muted:rgba(241,237,227,.70);
}

/* SAND — deeper, warmer tan; rich brown text and a bronze accent. */
[data-theme="sand"]{
  --ink:#2c2114;
  --muted:#7c6c54;
  --bg:#efe4d0;
  --bg-alt:#e6d6bd;
  --card:#fbf6ea;
  --card-edge:#f1e7d3;
  --field-bg:#fdf9f0;
  --nav-bg:rgba(239,228,208,.85);
  --nav-solid:rgba(239,228,208,.97);
  --walnut:#6a4f2e;
  --walnut-dark:#48351e;
  --brass:#a87b3c;
  --brass-light:rgba(168,123,60,.18);
  --glow:rgba(168,123,60,.20);
  --btn-text:#ffffff;
  --line:rgba(44,33,20,.12);
  --line-strong:rgba(44,33,20,.22);
  --shadow:44,33,20;
  --dark:#241a0d;
  --on-dark:#efe4d0;
  --on-dark-muted:rgba(239,228,208,.70);
}

/* ONYX — warm charcoal dark mode; warm-white text, gold accent. */
[data-theme="onyx"]{
  --ink:#ece6da;
  --muted:#9a9286;
  --bg:#191715;
  --bg-alt:#221f1b;
  --card:#262320;
  --card-edge:#2d2925;
  --field-bg:#2b2723;
  --nav-bg:rgba(25,23,21,.82);
  --nav-solid:rgba(25,23,21,.95);
  --walnut:#caa45f;
  --walnut-dark:#dcbc7e;
  --brass:#caa45f;
  --brass-light:rgba(202,164,95,.15);
  --glow:rgba(202,164,95,.13);
  --btn-text:#191715;
  --line:rgba(236,230,218,.11);
  --line-strong:rgba(236,230,218,.20);
  --shadow:0,0,0;
  --dark:#100f0d;
  --on-dark:#ece6da;
  --on-dark-muted:rgba(236,230,218,.66);
  color-scheme:dark;
}

/* OAK — bright, airy off-white with warm oak-wood tones and soft gold. */
[data-theme="oak"]{
  --ink:#2a241c;
  --muted:#7b7064;
  --bg:#fbf9f4;
  --bg-alt:#f1ebdf;
  --card:#ffffff;
  --card-edge:#f7f3ea;
  --field-bg:#ffffff;
  --nav-bg:rgba(251,249,244,.82);
  --nav-solid:rgba(251,249,244,.96);
  --walnut:#7a5e3c;
  --walnut-dark:#56412a;
  --brass:#b08b4a;
  --brass-light:rgba(176,139,74,.15);
  --glow:rgba(176,139,74,.13);
  --btn-text:#ffffff;
  --line:rgba(42,36,28,.09);
  --line-strong:rgba(42,36,28,.18);
  --shadow:42,36,28;
  --dark:#241f17;
  --on-dark:#f6f1e6;
  --on-dark-muted:rgba(246,241,230,.72);
}

/* MARBLE — crisp, light, architectural; white and warm grey with a
   restrained charcoal accent. Corporate and clean. */
[data-theme="marble"]{
  --ink:#23211f;
  --muted:#7d7b77;
  --bg:#f6f6f3;
  --bg-alt:#eceae4;
  --card:#ffffff;
  --card-edge:#f3f2ee;
  --field-bg:#ffffff;
  --nav-bg:rgba(246,246,243,.82);
  --nav-solid:rgba(246,246,243,.96);
  --walnut:#403b34;
  --walnut-dark:#2a2722;
  --brass:#8c7f6a;
  --brass-light:rgba(140,127,106,.15);
  --glow:rgba(140,127,106,.10);
  --btn-text:#ffffff;
  --line:rgba(35,33,31,.10);
  --line-strong:rgba(35,33,31,.18);
  --shadow:35,33,31;
  --dark:#262420;
  --on-dark:#f0efea;
  --on-dark-muted:rgba(240,239,234,.70);
}

/* OBSIDIAN — the deepest, most dramatic dark; near-black with a
   refined luminous gold. */
[data-theme="obsidian"]{
  --ink:#ece8e0;
  --muted:#928c82;
  --bg:#0e0d0c;
  --bg-alt:#171514;
  --card:#1b1918;
  --card-edge:#232120;
  --field-bg:#1f1d1b;
  --nav-bg:rgba(14,13,12,.85);
  --nav-solid:rgba(14,13,12,.96);
  --walnut:#cda968;
  --walnut-dark:#e0c48d;
  --brass:#cda968;
  --brass-light:rgba(205,169,104,.16);
  --glow:rgba(205,169,104,.12);
  --btn-text:#0e0d0c;
  --line:rgba(236,232,224,.12);
  --line-strong:rgba(236,232,224,.22);
  --shadow:0,0,0;
  --dark:#080808;
  --on-dark:#ece8e0;
  --on-dark-muted:rgba(236,232,224,.64);
  color-scheme:dark;
}

/* LINEN — bright, modern, office-like; pure white with a near-black
   ink accent. Highest contrast of the light themes. */
[data-theme="linen"]{
  --ink:#16161a;
  --muted:#6c6b6b;
  --bg:#ffffff;
  --bg-alt:#f4f3ef;
  --card:#ffffff;
  --card-edge:#f7f6f2;
  --field-bg:#ffffff;
  --nav-bg:rgba(255,255,255,.86);
  --nav-solid:rgba(255,255,255,.98);
  --walnut:#1c1c20;
  --walnut-dark:#000000;
  --brass:#5e5b58;
  --brass-light:rgba(94,91,88,.10);
  --glow:rgba(94,91,88,.06);
  --btn-text:#ffffff;
  --line:rgba(22,22,26,.08);
  --line-strong:rgba(22,22,26,.16);
  --shadow:22,22,26;
  --dark:#16161a;
  --on-dark:#f4f3ef;
  --on-dark-muted:rgba(244,243,239,.68);
}

/* ── Floating WhatsApp FAB ────────────────────────────────────────────────── */
.fab-whatsapp{
  position:fixed;
  right:clamp(16px, 2.4vw, 28px);
  bottom:clamp(16px, 2.4vw, 28px);
  z-index:90;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  box-shadow:0 12px 28px rgba(37,211,102,.35), 0 2px 6px rgba(0,0,0,.18);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  text-decoration:none;
}
.fab-whatsapp svg{ width:32px; height:32px; display:block; }
.fab-whatsapp:hover{
  transform:translateY(-2px) scale(1.04);
  background:#1ebe59;
  box-shadow:0 16px 36px rgba(37,211,102,.42), 0 4px 10px rgba(0,0,0,.22);
}
.fab-whatsapp:focus-visible{
  outline:3px solid rgba(255,255,255,.85);
  outline-offset:3px;
}
@media (max-width:520px){
  .fab-whatsapp{ width:52px; height:52px; }
  .fab-whatsapp svg{ width:28px; height:28px; }
}

/* ── Cookie banner ────────────────────────────────────────────────────────── */
.cookie-banner{
  position:fixed;
  left:clamp(16px, 2.4vw, 28px);
  bottom:clamp(16px, 2.4vw, 28px);
  z-index:95;
  width:min(360px, calc(100vw - 32px));
  pointer-events:none;
  transform:translateY(20px);
  opacity:0;
  transition:transform .35s ease, opacity .35s ease;
}
.cookie-banner.is-open{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.cookie-banner.is-dismissed{
  transform:translateY(12px);
  opacity:0;
}
.cookie-banner-card{
  background:var(--paper, #ffffff);
  color:var(--ink, #16161a);
  border:1px solid var(--line, rgba(22,22,26,.10));
  border-radius:14px;
  padding:18px 18px 16px;
  box-shadow:0 22px 50px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.08);
}
.cookie-banner-title{
  font-size:15px;
  font-weight:600;
  letter-spacing:.01em;
  margin:0 0 6px;
}
.cookie-banner-body{
  font-size:13px;
  line-height:1.5;
  color:var(--muted, rgba(22,22,26,.66));
  margin:0 0 14px;
}
.cookie-banner-actions{
  display:flex;
  align-items:center;
  gap:14px;
}
.cookie-banner-accept{
  appearance:none;
  border:0;
  cursor:pointer;
  background:var(--walnut, #1c1c20);
  color:var(--btn-text, #ffffff);
  font:inherit;
  font-size:13px;
  font-weight:500;
  letter-spacing:.02em;
  padding:9px 18px;
  border-radius:999px;
  transition:transform .2s ease, background .2s ease;
}
.cookie-banner-accept:hover{
  transform:translateY(-1px);
  background:var(--walnut-dark, #000);
}
.cookie-banner-privacy{
  color:var(--muted, rgba(22,22,26,.66));
  font-size:12px;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.cookie-banner-privacy:hover{ color:var(--ink, #16161a); }
@media (max-width:520px){
  .cookie-banner-card{ padding:16px 16px 14px; }
  .cookie-banner-body{ font-size:12.5px; }
}
@media (prefers-reduced-motion: reduce){
  .cookie-banner,
  .fab-whatsapp{ transition:none; }
}

/* ── Back link (calm crumb) ────────────────────────────────────────────────── */
.page-backbar{
  max-width:var(--content);
  margin:0 auto;
  padding:clamp(28px, 3.5vw, 44px) var(--gutter) 0;
}
.back-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
  transition:color .2s ease, gap .2s ease;
}
.back-link::before{
  content:"";
  width:18px;
  height:1px;
  background:currentColor;
  transition:width .2s ease;
}
.back-link:hover{ color:var(--walnut); gap:14px; }
.back-link:hover::before{ width:26px; }

/* ── Pristina lead — three polished, distinct variants ─────────────────────── */
/* Shared base — typography + container */
.pristina-lead{
  max-width:var(--content);
  margin:0 auto;
  padding:clamp(20px, 2.4vw, 32px) var(--gutter) clamp(56px, 7vw, 96px);
}
.pristina-lead .lead-eyebrow{
  display:inline-block;
  color:var(--brass);
  font-size:10px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.pristina-lead .lead-h{
  margin:14px 0 18px;
  font-family:"Cormorant Garamond",serif;
  font-weight:500;
  font-size:clamp(32px, 4.4vw, 52px);
  line-height:1.04;
  color:var(--walnut);
  letter-spacing:-.005em;
}
.pristina-lead .lead-p{
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
  margin:0;
}

/* Generic stat tile look (Variants A & B) */
.lead-tile{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px 20px;
}
.lead-tile dt{
  display:block;
  font-family:"Cormorant Garamond",serif;
  font-size:26px;
  font-weight:600;
  color:var(--walnut);
  line-height:1;
}
.lead-tile dd{
  margin:8px 0 0;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.4;
}

/* ─── Variant A: smaller image left · copy right ──────────────────────────── */
.pristina-lead--a{
  display:grid;
  grid-template-columns:0.78fr 1fr;
  gap:clamp(28px, 4vw, 56px);
  align-items:center;
}
.pristina-lead--a .lead-img{
  border-radius:var(--radius-card);
  overflow:hidden;
  aspect-ratio:4/3;
  box-shadow:0 14px 48px rgba(var(--shadow),.12);
}
.pristina-lead--a .lead-img img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.pristina-lead--a .lead-p{ max-width:520px; }
/* Stat tiles still styled for /pristina-preview, but the live page omits them */
.pristina-lead--a .lead-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:26px 0 0;
  padding:0;
  list-style:none;
}

/* ─── Variant B: centered copy on top · full-width image · 4-up strip ─────── */
.pristina-lead--b .lead-body{
  max-width:720px;
  margin:0 auto;
  text-align:center;
}
.pristina-lead--b .lead-p{ margin:0 auto; }
.pristina-lead--b .lead-img{
  margin-top:32px;
  border-radius:var(--radius-card);
  overflow:hidden;
  aspect-ratio:21/9;
  box-shadow:0 14px 48px rgba(var(--shadow),.12);
}
.pristina-lead--b .lead-img img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.pristina-lead--b .lead-stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  margin:24px 0 0;
  padding:0;
  list-style:none;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  overflow:hidden;
}
.pristina-lead--b .lead-stats > div{
  padding:22px 24px;
  border-right:1px solid var(--line);
  text-align:center;
}
.pristina-lead--b .lead-stats > div:last-child{ border-right:0; }
.pristina-lead--b .lead-stats dt{
  display:block;
  font-family:"Cormorant Garamond",serif;
  font-size:30px;
  font-weight:600;
  color:var(--walnut);
  line-height:1;
}
.pristina-lead--b .lead-stats dd{
  margin:9px 0 0;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* ─── Variant C: wide hero with glassy stats overlay · copy below ─────────── */
.pristina-lead--c .lead-img{
  position:relative;
  border-radius:var(--radius-card);
  overflow:hidden;
  aspect-ratio:16/9;
  box-shadow:0 14px 48px rgba(var(--shadow),.14);
}
.pristina-lead--c .lead-img img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.pristina-lead--c .lead-img::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,17,13,.0) 45%, rgba(20,17,13,.55) 100%);
  pointer-events:none;
}
.pristina-lead--c .lead-stats{
  position:absolute;
  left:clamp(16px, 2.4vw, 28px);
  right:clamp(16px, 2.4vw, 28px);
  bottom:clamp(16px, 2.4vw, 28px);
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  margin:0;
  padding:0;
  list-style:none;
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 12px 32px rgba(0,0,0,.18);
}
.pristina-lead--c .lead-stats > div{
  padding:16px 18px;
  border-right:1px solid var(--line);
  text-align:center;
}
.pristina-lead--c .lead-stats > div:last-child{ border-right:0; }
.pristina-lead--c .lead-stats dt{
  display:block;
  font-family:"Cormorant Garamond",serif;
  font-size:24px;
  font-weight:600;
  color:var(--walnut);
  line-height:1;
}
.pristina-lead--c .lead-stats dd{
  margin:7px 0 0;
  color:var(--muted);
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.pristina-lead--c .lead-body{
  margin-top:26px;
  max-width:720px;
}

/* Responsive collapses */
@media (max-width:960px){
  .pristina-lead--a{ grid-template-columns:1fr; gap:24px; }
  .pristina-lead--a .lead-img{ aspect-ratio:16/10; }
  .pristina-lead--c .lead-img{ aspect-ratio:4/3; }
  .pristina-lead--c .lead-stats{ position:static; margin-top:18px; }
  .pristina-lead--c .lead-img::after{ display:none; }
}
@media (max-width:640px){
  .pristina-lead--a .lead-stats{ grid-template-columns:1fr; }
  .pristina-lead--b .lead-stats,
  .pristina-lead--c .lead-stats{ grid-template-columns:1fr 1fr; }
  .pristina-lead--b .lead-stats > div,
  .pristina-lead--c .lead-stats > div{
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .pristina-lead--b .lead-stats > div:nth-child(2n),
  .pristina-lead--c .lead-stats > div:nth-child(2n){ border-right:0; }
  .pristina-lead--b .lead-stats > div:nth-last-child(-n+2),
  .pristina-lead--c .lead-stats > div:nth-last-child(-n+2){ border-bottom:0; }
}

/* ── Variant preview labels (only used on /pristina-preview) ───────────────── */
.variant-divider{
  max-width:var(--content);
  margin:64px auto 0;
  padding:0 var(--gutter);
}
.variant-divider-inner{
  display:flex;
  align-items:center;
  gap:18px;
  padding:14px 22px;
  background:var(--brass-light);
  border:1px dashed var(--brass);
  border-radius:12px;
  color:var(--walnut);
}
.variant-divider .tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px; height:30px;
  border-radius:8px;
  background:var(--walnut);
  color:#fff;
  font-weight:700;
  font-family:"JetBrains Mono",monospace;
  font-size:13px;
}
.variant-divider .title{
  font-weight:600;
  font-size:14px;
}
.variant-divider .desc{
  color:var(--muted);
  font-size:12px;
  margin-left:auto;
}
@media (max-width:520px){ .variant-divider .desc{ display:none; } }

/* ── Popup mode switch (only on /spaces) ───────────────────────────────────── */
.popup-mode-switch{
  max-width:var(--content);
  margin:0 auto;
  padding:clamp(20px, 2.4vw, 30px) var(--gutter) 0;
  display:flex;
  align-items:center;
  gap:12px;
}
.popup-mode-switch .label{
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.popup-mode-switch .pills{
  display:inline-flex;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px;
}
.popup-mode-switch button{
  appearance:none;
  border:0;
  background:transparent;
  font:inherit;
  font-size:12px;
  font-weight:600;
  padding:7px 14px;
  border-radius:999px;
  cursor:pointer;
  color:var(--muted);
  transition:background .2s ease, color .2s ease;
}
.popup-mode-switch button.active{
  background:var(--walnut);
  color:#fff;
}

/* ── Coming-soon: city MODAL ───────────────────────────────────────────────── */
.city-modal{
  position:fixed;
  inset:0;
  z-index:120;
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(16px, 3vw, 32px);
}
.city-modal.is-open{ display:flex; }
.city-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(10,8,6,.62);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  animation:cityFadeIn .25s ease;
}
.city-modal-card{
  position:relative;
  z-index:1;
  width:min(420px, 100%);
  background:var(--paper);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  animation:cityRise .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes cityFadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes cityRise   { from { opacity:0; transform:translateY(20px) scale(.98) } to { opacity:1; transform:none } }
.city-modal-image{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#000;
}
.city-modal-image img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  transform:scale(1.02);
  animation:cityImg .8s ease-out both;
}
@keyframes cityImg { from { transform:scale(1.08) } to { transform:scale(1.02) } }
.city-modal-image::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,17,13,.05) 30%, rgba(20,17,13,.7) 100%);
}
.city-modal-meta{
  position:absolute;
  left:18px; bottom:16px; right:18px;
  z-index:1;
  color:#fff;
}
.city-modal-meta .country{
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.85;
}
.city-modal-meta h2{
  margin:4px 0 6px;
  font-family:"Cormorant Garamond",serif;
  font-size:28px;
  font-weight:500;
  line-height:1;
}
.city-modal-meta .pill{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.06em;
}
/* Back arrow (sits top-left on the city modal — replaces the old × top-right) */
.city-modal-close{
  position:absolute;
  top:12px; left:12px;
  z-index:2;
  width:36px; height:36px;
  border-radius:50%;
  border:0;
  cursor:pointer;
  background:rgba(20,17,13,.55);
  color:#fff;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transition:background .2s ease, transform .2s ease, gap .2s ease;
}
.city-modal-close svg{ width:18px; height:18px; display:block; }
.city-modal-close:hover{ background:rgba(20,17,13,.78); transform:translateX(-2px); }
.city-modal-card{
  background:#ffffff !important;
}
.city-modal-body{
  padding:20px 22px 22px;
  background:#ffffff;
}
.city-modal-body p{
  margin:0 0 16px;
  color:#3a3a3e;
  font-size:14px;
  line-height:1.6;
}
.city-modal-actions{
  display:flex;
  gap:8px;
  align-items:center;
}
.city-modal-actions .btn-primary{
  flex:1;
  text-align:center;
  background:var(--walnut);
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.02em;
  text-decoration:none;
  transition:background .2s ease, transform .2s ease;
}
.city-modal-actions .btn-primary:hover{ background:var(--walnut-dark); transform:translateY(-1px); }
.city-modal-actions .btn-secondary{
  appearance:none;
  border:1px solid var(--line-strong);
  background:transparent;
  cursor:pointer;
  font:inherit;
  font-size:12.5px;
  font-weight:600;
  padding:9px 14px;
  border-radius:999px;
  color:var(--walnut);
  transition:background .2s ease, border-color .2s ease;
}
.city-modal-actions .btn-secondary:hover{ background:var(--brass-light); border-color:var(--brass); }
body.no-scroll{ overflow:hidden; }

/* ── Coming-soon: INLINE EXPANSION inside the grid ─────────────────────────── */
.loc-card.is-comingsoon{ cursor:pointer; transition:transform .35s var(--ease); }
.loc-card.is-comingsoon:hover{ transform:translateY(-3px); }
.loc-card.is-comingsoon .loc-arrow{ display:none; }

.locations-grid.is-expanded .loc-card{ transition:opacity .25s ease; }
.loc-card.is-expanded{
  grid-column:1 / -1;
  aspect-ratio:auto;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  cursor:default;
  animation:cityRise .4s cubic-bezier(.2,.7,.2,1);
}
.loc-card.is-expanded .loc-img{
  position:relative;
  filter:none;
  transform:none;
  width:100%;
  height:100%;
  min-height:340px;
}
.loc-card.is-expanded .loc-veil{ display:none; }
.loc-card.is-expanded .loc-meta{
  position:relative;
  inset:auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(24px, 3vw, 36px);
  background:var(--paper);
  color:var(--walnut);
}
.loc-card.is-expanded .loc-country{ color:var(--muted); }
.loc-card.is-expanded .loc-city{ color:var(--walnut); }
.loc-card.is-expanded .loc-pill{
  background:var(--brass-light);
  color:var(--walnut);
}
.expand-body{
  display:none;
  margin-top:18px;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}
.expand-actions{
  display:none;
  margin-top:20px;
  gap:10px;
}
.expand-close{
  display:none;
  position:absolute;
  top:14px; right:14px;
  z-index:3;
  width:34px; height:34px;
  border:0;
  border-radius:50%;
  background:rgba(20,17,13,.55);
  color:#fff;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.loc-card.is-expanded .expand-body,
.loc-card.is-expanded .expand-actions,
.loc-card.is-expanded .expand-close{ display:flex; }
.loc-card.is-expanded .expand-body{ display:block; }
.loc-card.is-expanded .expand-actions .btn-primary{
  flex:1;
  text-align:center;
  background:var(--walnut);
  color:#fff;
  padding:11px 16px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
}
.loc-card.is-expanded .expand-actions .btn-primary:hover{ background:var(--walnut-dark); }
.loc-card.is-expanded .expand-actions .btn-secondary{
  appearance:none;
  border:1px solid var(--line-strong);
  background:transparent;
  font:inherit;
  font-size:13px;
  font-weight:600;
  padding:10px 16px;
  border-radius:999px;
  cursor:pointer;
}

@media (max-width:720px){
  .loc-card.is-expanded{ grid-template-columns:1fr; }
}

/* Utility: pull cropped images leftward when there's empty sky / window space
   on the right side of the source (kitchen-artana-pristina-coworking.jpg, phone-booth-artana-pristina.jpg). Use on any
   <img> inside an object-fit:cover container. */
.img-shift-left{ object-position:18% center !important; }

/* ── Tower enquire-only section ───────────────────────────────────────────── */
.tower-enquire{
  max-width:var(--content);
  margin:0 auto;
  padding:clamp(48px, 6.5vw, 96px) var(--gutter) clamp(64px, 8vw, 112px);
}
.tower-enquire-inner{
  max-width:720px;
  margin:0 auto;
  text-align:center;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:clamp(36px, 5vw, 64px) clamp(28px, 4vw, 56px);
  box-shadow:0 14px 48px rgba(var(--shadow),.08);
}
.tower-enquire-inner .eyebrow{
  display:block;
  color:var(--brass);
  font-size:10px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.tower-enquire-inner h2{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500;
  font-size:clamp(28px, 3.6vw, 42px);
  line-height:1.1;
  color:var(--walnut);
  margin:0 0 18px;
}
.tower-enquire-intro{
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
  max-width:560px;
  margin:0 auto;
}
.tower-enquire-list{
  list-style:none;
  margin:28px auto 32px;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 24px;
  max-width:560px;
  text-align:left;
}
.tower-enquire-list li{
  position:relative;
  padding-left:22px;
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
}
.tower-enquire-list li::before{
  content:"";
  position:absolute;
  left:0; top:8px;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--brass);
}
.tower-enquire-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
}
.tower-enquire-actions .cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--walnut);
  color:#fff;
  padding:14px 26px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  transition:background .2s ease, transform .2s ease;
}
.tower-enquire-actions .cta:hover{
  background:var(--walnut-dark);
  transform:translateY(-1px);
}
.tower-enquire-actions .text-link{
  color:var(--muted);
  font-size:13px;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
  transition:color .2s ease;
}
.tower-enquire-actions .text-link:hover{ color:var(--walnut); }

@media (max-width:560px){
  .tower-enquire-list{ grid-template-columns:1fr; }
}

/* ── Pristina map section ──────────────────────────────────────────────────── */
.pristina-map-section{
  max-width:var(--content);
  margin:0 auto;
  padding:clamp(40px, 5vw, 72px) var(--gutter) clamp(60px, 7vw, 96px);
}
.pristina-map-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:24px;
}
.pristina-map-head .eyebrow{
  display:block;
  color:var(--brass);
  font-size:10px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.pristina-map-head .eyebrow::before{ display:none; }
.pristina-map-head h2{
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-weight:500;
  font-size:clamp(26px, 3vw, 36px);
  line-height:1.1;
  color:var(--walnut);
}
.pristina-map-head p{
  max-width:340px;
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
  text-align:right;
}
.pristina-map-frame{
  position:relative;
  border-radius:var(--radius-card);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 14px 48px rgba(var(--shadow),.12);
  height:clamp(320px, 48vh, 480px);
  background:var(--bg-alt);
}
#pristina-map{ position:absolute; inset:0; }
/* Leaflet markers: brand-walnut pin */
.lm-marker{
  position:relative;
  width:34px; height:34px;
  border-radius:50% 50% 50% 0;
  background:var(--walnut);
  transform:rotate(-45deg);
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  border:2px solid #fff;
}
.lm-marker::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:10px; height:10px;
  margin:-5px 0 0 -5px;
  border-radius:50%;
  background:#fff;
}
.leaflet-popup-content-wrapper{
  border-radius:10px !important;
  font-family:"Inter",sans-serif !important;
}
.leaflet-popup-content{
  margin:10px 14px !important;
  font-size:13px !important;
  font-weight:600 !important;
  color:var(--walnut) !important;
}
.leaflet-popup-content small{
  display:block;
  margin-top:2px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

@media (max-width:640px){
  .pristina-map-head{ flex-direction:column; align-items:start; }
  .pristina-map-head p{ text-align:left; max-width:none; }
}


/* ── Mobile polish (added with theme lockdown) ───────────────────────────── */
@media (max-width:760px){
  /* Nav: hide the language label text inside dropdown (panel styles live above) */
  .nav{ padding:14px 16px !important; }
  .lang-dropdown .lang-flag{ width:16px; height:12px; }

  /* Hero: tighter spacing, smaller h1 */
  .hero{ padding:36px 16px 28px; gap:24px; }
  .hero-copy h1{ font-size:clamp(36px, 9vw, 52px) !important; line-height:1.05; }
  .hero-copy .sub{ font-size:15px; line-height:1.6; }

  /* Section paddings down 20% on phone */
  .intro, .story-grid, .space-detail, .contact-body,
  .marquee, .feature-video, .preview-grid, .building-grid,
  .pristina-lead, .pristina-map-section, .tower-enquire,
  .renders-gallery, .locations-grid, .spaces-preview{
    padding-top: clamp(36px, 8vw, 56px);
    padding-bottom: clamp(36px, 8vw, 56px);
  }

  /* Cards / preview grids stack */
  .preview-grid, .building-grid, .spaces-preview, .locations-grid,
  .renders-grid, .option-list{ grid-template-columns:1fr !important; gap:18px !important; }
  .render-item--large{ grid-column:1 !important; aspect-ratio:16/10 !important; }
  .render-item{ aspect-ratio:16/10 !important; }

  /* Pristina lead — image above copy, smaller image */
  .pristina-lead--a{ grid-template-columns:1fr !important; gap:20px !important; }
  .pristina-lead--a .lead-img{ aspect-ratio:16/10 !important; }

  /* Map: stack head + frame */
  .pristina-map-head{ flex-direction:column !important; align-items:start !important; gap:8px; }
  .pristina-map-head p{ max-width:none !important; text-align:left !important; }
  .pristina-map-frame{ height:clamp(260px, 60vw, 380px) !important; }

  /* Tower enquire — 1-col bullet list, snug padding */
  .tower-enquire-inner{ padding:28px 22px !important; }
  .tower-enquire-list{ grid-template-columns:1fr !important; gap:8px !important; }
  .tower-enquire-actions{ flex-direction:column; gap:14px; }
  .tower-enquire-actions .cta,
  .tower-enquire-actions .text-link{ width:100%; text-align:center; justify-content:center; }

  /* Footer breathing */
  .ftr-top, .ftr-cols{ grid-template-columns:1fr !important; gap:24px; }
  .ftr-wm{ font-size:26px !important; }

  /* Modal: smaller, comfy on phone */
  .city-modal-card{ width:min(360px, calc(100vw - 24px)) !important; }
  .city-modal-meta h2{ font-size:24px !important; }

  /* WhatsApp FAB + cookie banner don't crowd small screens */
  .fab-whatsapp{ width:52px !important; height:52px !important; }
  .cookie-banner{ width:calc(100vw - 24px) !important; }
}

/* ─── Hero CTA hover punch ─────────────────────────────────────────────────── */
.cta.cta-primary{
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .2s ease, box-shadow .25s ease;
  box-shadow:0 6px 20px rgba(var(--shadow),.10);
}
.cta.cta-primary:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 14px 32px rgba(var(--shadow),.18);
}
.cta.cta-primary:active{ transform:translateY(-1px) scale(1.02); }

.text-link-zoom{
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:transform .2s ease, color .2s ease, gap .2s ease;
}
.text-link-zoom:hover{ transform:scale(1.03); gap:10px; }

/* ─── Hero image as clickable trigger (opens pristina-pick modal) ─────────── */
.hero-img-trigger{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  cursor:pointer;
  overflow:hidden;
  border-radius:inherit;
}
.hero-img-trigger img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s var(--ease);
}
.hero-img-trigger:hover img{ transform:scale(1.03); }
/* Subtle hover hint — sits bottom-right (out of the way of the
   PRISTINA · KOSOVO caption at bottom-left). No solid pill; instead a
   light frosted-glass chip that fades in, lifts up and scales gently. */
.hero-img-overlay{
  position:absolute;
  inset:0;
  z-index:3;             /* above the figcaption */
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding:14px 16px;
  pointer-events:none;   /* clicks pass through to the underlying button */
  opacity:0;
  transition:opacity .35s ease;
}
.hero-img-trigger:hover .hero-img-overlay,
.hero-img-trigger:focus-visible .hero-img-overlay{ opacity:1; }
.hero-img-overlay-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#1c1c20;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.02em;
  padding:7px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 4px 16px rgba(0,0,0,.10);
  transform:translateY(6px) scale(.96);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.hero-img-trigger:hover .hero-img-overlay-pill,
.hero-img-trigger:focus-visible .hero-img-overlay-pill{ transform:translateY(0) scale(1); }
.hero-img-trigger:focus-visible{ outline:3px solid var(--brass); outline-offset:3px; }
/* Lift the caption so the frosted hint never crowds it visually */
.hero-figcap{ z-index:2; }

/* ─── Pristina-pick modal (opens from hero image click) ───────────────────── */
.pristina-pick-modal{
  position:fixed;
  inset:0;
  z-index:120;
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(16px, 3vw, 32px);
}
.pristina-pick-modal.is-open{ display:flex; }
.pristina-pick-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(10,8,6,.62);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  animation:cityFadeIn .25s ease;
}
.pristina-pick-modal-card{
  position:relative;
  z-index:1;
  width:min(720px, 100%);
  background:#ffffff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  animation:cityRise .35s cubic-bezier(.2,.7,.2,1);
}
.pristina-pick-modal-head{
  padding:42px 32px 18px;
  text-align:center;
  position:relative;
}
.pristina-pick-modal-head .eyebrow{
  display:block;
  color:var(--brass);
  font-size:10px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.pristina-pick-modal-head h2{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500;
  font-size:clamp(24px, 3.2vw, 32px);
  line-height:1.1;
  color:var(--walnut);
  margin:0;
}
.pristina-pick-modal-close{
  position:absolute;
  top:14px; left:14px;
  width:36px; height:36px;
  border-radius:50%;
  border:0;
  cursor:pointer;
  background:rgba(20,17,13,.08);
  color:var(--walnut);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease, transform .2s ease;
}
.pristina-pick-modal-close svg{ width:18px; height:18px; }
.pristina-pick-modal-close:hover{ background:rgba(20,17,13,.16); transform:translateX(-2px); }
.pristina-pick-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  padding:8px 24px 24px;
}
.pristina-pick-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:#f7f5f0;
  border-radius:12px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  border:1px solid var(--line);
  transition:transform .25s ease, box-shadow .25s ease, border-color .2s ease;
}
.pristina-pick-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(0,0,0,.12);
  border-color:var(--brass);
}
.pristina-pick-card-img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}
.pristina-pick-card-body{
  padding:16px 18px 18px;
}
.pristina-pick-card-meta{
  color:var(--brass);
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.pristina-pick-card h3{
  margin:6px 0 14px;
  font-size:18px;
  font-weight:600;
  color:var(--walnut);
}
.pristina-pick-card-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:var(--walnut);
}
.pristina-pick-card-cta .arrow{ transition:transform .2s ease; }
.pristina-pick-card:hover .pristina-pick-card-cta .arrow{ transform:translateX(4px); }
@media (max-width:560px){
  .pristina-pick-grid{ grid-template-columns:1fr; }
  .pristina-pick-modal-head{ padding:38px 22px 14px; }
}


/* ─── Book now CTA on each price card ─────────────────────────────────────── */
.price-card-book{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  padding:10px 18px;
  background:var(--walnut);
  color:#ffffff;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  text-decoration:none;
  transition:background .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
  box-shadow:0 4px 14px rgba(var(--shadow),.08);
  align-self:flex-start;
}
.price-card-book .arrow{ transition:transform .2s ease; }
.price-card-book:hover{
  background:var(--walnut-dark);
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 10px 24px rgba(var(--shadow),.14);
  color:#ffffff;
}
.price-card-book:hover .arrow{ transform:translateX(4px); }

/* ─── Home pricing strip — minimal 3-tier overview ────────────────────────── */
.home-pricing{
  max-width:var(--content);
  margin:0 auto;
  padding:clamp(24px, 3.5vw, 48px) var(--gutter) clamp(8px, 1.4vw, 18px);
  text-align:center;
}
.home-pricing-head{ margin-bottom:clamp(20px, 3vw, 36px); }
.home-pricing-head .eyebrow{
  display:inline-block;
  color:var(--brass);
  font-size:10px;
  font-weight:800;
  letter-spacing:.24em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.home-pricing-head .eyebrow::before{ display:none; }
.home-pricing-head h2{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500;
  font-size:clamp(28px, 3.8vw, 44px);
  line-height:1.1;
  color:var(--walnut);
  margin:0;
}
/* 4-up since 24 Jul 2026: dedicated desk · virtual office · conference room ·
   private office (fully booked). Was 3-up at 880px. */
.home-pricing-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  max-width:1080px;
  margin:0 auto;
}
.home-pricing-tier{
  position:relative;
  padding:8px 28px;
  text-align:center;
  transition:transform .25s ease;
}
.home-pricing-tier:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0; top:18%;
  width:1px;
  height:64%;
  background:var(--line);
}
.home-pricing-tier:hover{ transform:translateY(-3px); }
.home-pricing-meta{
  display:block;
  color:var(--brass);
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.home-pricing-tier h3{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500;
  font-size:22px;
  letter-spacing:.005em;
  color:var(--walnut);
  margin:0 0 16px;
}
.home-pricing-price{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  margin:0 0 12px;
  color:var(--walnut);
}
.home-pricing-price .from{
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.home-pricing-price strong{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500;
  font-size:38px;
  line-height:1;
  letter-spacing:-.01em;
}
.home-pricing-price .unit{
  font-size:13px;
  font-weight:500;
  color:var(--muted);
}
.home-pricing-desc{
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
  margin:0;
  max-width:200px;
  margin-left:auto;
  margin-right:auto;
}
.home-pricing-cta{
  margin:clamp(24px, 3vw, 40px) auto 0;
  text-align:center;
}
.home-pricing-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 26px;
  background:var(--walnut);
  color:var(--bg);
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  border-radius:999px;
  text-decoration:none;
  transition:background .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
  box-shadow:0 4px 14px rgba(var(--shadow),.12);
}
.home-pricing-btn:hover{
  background:var(--walnut-dark, #1c1c20);
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(var(--shadow),.18);
}
.home-pricing-btn .arrow{ transition:transform .2s ease; }
.home-pricing-btn:hover .arrow{ transform:translateX(3px); }
.home-pricing-foot{
  margin:clamp(16px, 2vw, 24px) auto 0;
  max-width:560px;
  font-size:13px;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}
.home-pricing-foot a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--walnut);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
  transition:gap .2s ease, color .2s ease;
}
.home-pricing-foot a:hover{ color:var(--walnut-dark); gap:9px; }
.home-pricing-foot .arrow{ transition:transform .2s ease; }
.home-pricing-foot a:hover .arrow{ transform:translateX(3px); }
/* Below 4-up the hairline dividers stop making sense (an item at a row edge
   gets a divider hanging into the gutter), so the tiers become bordered cards. */
@media (max-width:1000px){
  .home-pricing-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; max-width:640px; }
  .home-pricing-tier{ padding:22px 18px; border:1px solid var(--line); border-radius:14px; }
  .home-pricing-tier:not(:last-child)::after{ display:none; }
}
@media (max-width:560px){
  .home-pricing-grid{ grid-template-columns:1fr; gap:8px; }
  .home-pricing-tier{ padding:20px 16px; }
}

/* ── Article language selector (Journal) ─────────────────────────────── */
.post-langs{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px;
  margin:2px 0 26px;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}
.post-langs .post-langs-label{opacity:.65}
.post-langs a{
  color:var(--muted); text-decoration:none;
  padding-bottom:2px; border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.post-langs a:hover{color:var(--ink); border-bottom-color:var(--line-strong)}
.post-langs a[aria-current="true"]{color:var(--ink); border-bottom-color:var(--ink); pointer-events:none}

/* ═══════════════════════════════════════════════════════════════════════════
   MEMBER PORTAL  ·  /login · /signup · /dashboard
   Front-end auth + desk booking. Uses the shared design tokens + .form-card.
═══════════════════════════════════════════════════════════════════════════ */

/* — Auth pages (login / signup) — centered card — */
.auth-shell{
  min-height:calc(100vh - 240px);
  display:grid;
  place-items:center;
  padding:clamp(40px,7vw,80px) var(--gutter);
  background:
    radial-gradient(ellipse 60% 50% at 80% 12%, var(--glow), transparent 72%),
    var(--bg-alt);
}
.auth-card{
  width:100%;
  max-width:440px;
}
.auth-head{ text-align:left; margin-bottom:26px; }
.auth-head .eyebrow{ margin-bottom:18px; }
.auth-head h1{ font-size:clamp(30px,4vw,40px); line-height:1.08; }
.auth-head p{ color:var(--muted); margin-top:12px; font-size:15.5px; line-height:1.7; }
.auth-card .field{ margin-bottom:18px; }
.auth-card .cta{ width:100%; justify-content:center; margin-top:4px; }
.auth-foot{
  margin-top:24px; padding-top:20px; border-top:1px solid var(--line);
  color:var(--muted); font-size:14px; text-align:center;
}
.auth-foot a{ color:var(--walnut); font-weight:600; }
.auth-foot a:hover{ text-decoration:underline; }
.auth-aside{
  margin-top:18px; text-align:center; color:var(--muted);
  font-size:12px; line-height:1.6; max-width:40ch; margin-left:auto; margin-right:auto;
}

/* — Status / inline messaging — */
.portal-status{
  border-radius:10px; padding:11px 14px; margin:0 0 18px;
  font-size:13.5px; line-height:1.5;
}
.portal-status.is-error{ background:rgba(192,57,43,.10); color:#a5311f; border:1px solid rgba(192,57,43,.22); }
.portal-status.is-success{ background:rgba(31,122,77,.10); color:#1f7a4d; border:1px solid rgba(31,122,77,.22); }

/* — Dashboard — */
.dash{ padding:clamp(40px,5.5vw,72px) var(--gutter) clamp(64px,8vw,110px); }
.dash-top{ max-width:var(--content); margin:0 auto clamp(28px,4vw,44px); }
.dash-top .crumbs{
  display:flex; gap:10px; margin-bottom:20px; color:var(--muted);
  font-size:10px; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
}
.dash-top .crumbs .current{ color:var(--walnut); }
.dash-top h1{ font-size:clamp(30px,4.4vw,46px); line-height:1.06; }
.dash-top p{ color:var(--muted); margin-top:12px; font-size:17px; }
.dash-grid{
  display:grid; grid-template-columns:1fr 1.1fr;
  gap:clamp(32px,5vw,68px);
  max-width:var(--content); margin:0 auto; align-items:start;
}
.dash-section-label{
  display:block; color:var(--muted); font-size:10px; font-weight:800;
  letter-spacing:.2em; text-transform:uppercase; margin-bottom:18px;
}

/* account card */
.acct-card{
  border:1px solid var(--line); border-radius:var(--radius-card);
  background:linear-gradient(150deg, var(--card) 0%, var(--card-edge) 100%);
  padding:24px 26px; margin-bottom:34px;
}
.acct-card dl{ margin:0; display:grid; gap:14px; }
.acct-card dt{ color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; margin-bottom:3px; }
.acct-card dd{ margin:0; color:var(--ink); font-size:15px; }
.acct-card .signout-row{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.signout-btn{
  background:transparent; border:1px solid var(--line-strong); color:var(--ink);
  border-radius:999px; padding:9px 18px; font:inherit; font-size:13px; font-weight:600;
  cursor:pointer; transition:background .15s var(--ease), border-color .15s var(--ease);
}
.signout-btn:hover{ background:var(--brass-light); border-color:var(--walnut); }

/* bookings list */
.bookings-empty{ color:var(--muted); font-size:15px; line-height:1.7; }
.bookings-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.booking-row{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:16px;
  border:1px solid var(--line); border-radius:14px; padding:14px 16px;
  background:var(--card);
}
.booking-when{ display:flex; align-items:center; gap:8px; }
.booking-d{ font-size:26px; font-weight:700; color:var(--ink); line-height:1; font-family:"Cormorant Garamond",serif; }
.booking-my{ font-size:9px; font-weight:800; letter-spacing:.1em; color:var(--muted); line-height:1.25; }
.booking-meta{ display:flex; flex-direction:column; gap:2px; }
.booking-meta strong{ font-size:14.5px; color:var(--ink); font-weight:600; }
.booking-meta span{ font-size:12.5px; color:var(--muted); }
.booking-status{
  font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px;
}
.status-requested{ background:var(--brass-light); color:var(--walnut); }
.status-confirmed{ background:rgba(31,122,77,.13); color:#1f7a4d; }
.booking-cancel{
  background:transparent; border:0; color:var(--muted); font:inherit; font-size:12px;
  cursor:pointer; padding:4px 6px; text-decoration:underline; text-underline-offset:2px;
  transition:color .15s var(--ease);
}
.booking-cancel:hover{ color:#a5311f; }
/* Add-to-calendar (.ics download) on dashboard booking rows */
.booking-ics{
  background:transparent; border:0; color:var(--walnut); font:inherit; font-size:12px;
  cursor:pointer; padding:4px 6px; text-decoration:underline; text-underline-offset:2px;
}
.booking-ics:hover{ color:var(--ink); }
/* Armed (second-click-confirms) state on dashboard cancel. */
.booking-cancel.is-armed{ color:#fff; background:#c0392b; border-radius:6px; text-decoration:none; padding:4px 10px; }
.booking-cancel.is-armed:hover{ color:#fff; background:#a5311f; }
.booking-done{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  font-size:12.5px; color:#1f7a4d; background:rgba(31,122,77,.10);
  border-radius:999px; padding:7px 14px; font-weight:600;
}
.booking-done.is-error{ color:#b23b3b; background:rgba(178,59,59,.10); }
.booking-done[hidden]{ display:none !important; }
.nav-links a.nav-admin{ color:var(--walnut); font-weight:600; }

/* — Calendar (shared by dashboard booking form) — */
.cal{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 14px 16px; background:var(--field-bg); }
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cal-title{ font-weight:600; font-size:15px; color:var(--ink); }
.cal-nav{ width:32px; height:32px; border:1px solid var(--line); background:transparent; border-radius:9px; color:var(--ink); cursor:pointer; display:grid; place-items:center; transition:background .15s var(--ease), border-color .15s var(--ease); }
.cal-nav:hover:not(:disabled){ background:var(--brass-light); border-color:var(--line-strong); }
.cal-nav:disabled{ opacity:.3; cursor:default; }
.cal-nav svg{ width:8px; height:12px; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal-dow{ text-align:center; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); padding:4px 0 8px; font-weight:600; }
.cal-day{ aspect-ratio:1/1; border:0; background:transparent; border-radius:9px; cursor:pointer; font:inherit; font-size:13.5px; color:var(--ink); transition:background .12s var(--ease), color .12s var(--ease); }
.cal-day:hover:not(:disabled):not(.is-selected){ background:var(--brass-light); }
.cal-day:disabled{ color:var(--line-strong); cursor:default; }
.cal-day.is-selected{ background:var(--walnut); color:var(--btn-text); font-weight:600; }
.cal-day.is-empty{ pointer-events:none; }
.cal-selected{ font-size:13px; color:var(--muted); margin-top:12px; }
.cal-selected strong{ color:var(--ink); font-weight:600; }
/* Visible by default; the elements are authored with the `hidden` attribute
   (hidden on load via the global [hidden] rule) and book.js toggles that
   attribute to show/hide. .show kept for any class-based callers. */
.cal-error{ color:#c0392b; font-size:13px; margin-top:8px; display:block; }
.cal-error.show{ display:block; }
/* Positive/neutral guidance in the same slot (e.g. "check your inbox") — not an error. */
.cal-error.is-info{ color:var(--walnut, #6b6153); }

/* — Nav: Log in entry (member portal) — */
.nav-links a.nav-login{
  color:var(--walnut);
}
.nav-links a.nav-login::after{ background:var(--walnut); }

@media (max-width:880px){
  .dash-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .booking-row{ grid-template-columns:auto 1fr auto; }
  .booking-cancel{ grid-column:2 / -1; justify-self:start; padding-left:0; }
}

/* — Dashboard booking: availability hint + meeting-room slots — */
.cal-hint{ font-size:13px; color:var(--walnut); margin-top:12px; font-weight:500; }
.cal-hint[hidden]{ display:none; }
.cal-hint.is-soldout{ color:#c0392b; }
.slot-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:8px; }
.slot-loading{ grid-column:1 / -1; font-size:13px; color:var(--muted); padding:4px 0; }
.slot-btn{
  border:1px solid var(--line); background:var(--field-bg); color:var(--ink);
  border-radius:9px; padding:11px 8px; font:inherit; font-size:13.5px; cursor:pointer;
  transition:background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease);
}
.slot-btn:hover:not([disabled]):not(.is-selected){ background:var(--brass-light); border-color:var(--line-strong); }
.slot-btn.is-selected{ background:var(--walnut); border-color:var(--walnut); color:var(--btn-text); font-weight:600; }
.slot-btn[disabled]{ opacity:.42; cursor:default; text-decoration:line-through; }

/* ═══════════════════════════════════════════════════════════════════════════
   NAV RESTYLE  ·  links pushed right · Contact + Log in as buttons · Spaces dd
═══════════════════════════════════════════════════════════════════════════ */
.nav{ justify-content:flex-start; }
.nav-links{ margin-left:auto; align-items:center; }

/* Contact = outline pill · Log in = filled pill */
.nav-links a[href="/contact"],
.nav-links a.nav-book,
.nav-links a.nav-login{
  padding:9px 17px; border-radius:999px; border:1px solid var(--line-strong);
  color:var(--ink);
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.nav-links a[href="/contact"]:hover{ background:var(--brass-light); border-color:var(--walnut); color:var(--ink); }
.nav-links a[href="/contact"].active{ background:var(--brass-light); border-color:var(--walnut); color:var(--ink); }
.nav-links a.nav-book{ background:var(--walnut); border-color:var(--walnut); color:var(--btn-text); }
.nav-links a.nav-book:hover,
.nav-links a.nav-book.active{ background:var(--ink); border-color:var(--ink); color:var(--btn-text); }
.nav-links a.nav-login:hover,
.nav-links a.nav-login.active{ background:var(--brass-light); border-color:var(--walnut); color:var(--ink); }
/* no underline marker under the buttoned items */
.nav-links a[href="/contact"]::after,
.nav-links a.nav-book::after,
.nav-links a.nav-login::after{ display:none; }

/* Spaces dropdown */
.nav-dd{ position:relative; display:inline-flex; align-items:center; }
.nav-dd-trigger{ display:inline-flex !important; align-items:center; gap:6px; }
.dd-chev{ width:9px; height:6px; transition:transform .2s var(--ease); }
.nav-dd:hover .dd-chev,
.nav-dd:focus-within .dd-chev{ transform:rotate(180deg); }
.nav-dd-menu{
  position:absolute; top:calc(100% + 12px); left:50%;
  transform:translateX(-50%) translateY(6px);
  min-width:248px; padding:8px;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 20px 56px rgba(var(--shadow),.16), 0 2px 10px rgba(var(--shadow),.06);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index:40;
}
/* invisible bridge across the gap so moving from "Spaces" to the menu
   doesn't drop the hover and close it before you can click an item */
.nav-dd-menu::before{
  content:""; position:absolute; left:0; right:0; top:-16px; height:18px;
}
.nav-dd:hover .nav-dd-menu,
.nav-dd:focus-within .nav-dd-menu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.nav-dd-menu a,
.nav-dd-menu .nav-dd-soon{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 13px; border-radius:10px;
  text-transform:none; letter-spacing:0; font-size:14px; font-weight:500; color:var(--ink);
}
.nav-dd-menu a:hover{ background:var(--brass-light); color:var(--ink); }
.nav-dd-menu a::after{ display:none; }
.nav-dd-soon{ color:var(--muted); cursor:default; }
.dd-pill{
  flex-shrink:0; font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; background:var(--line); color:var(--muted);
}
.dd-pill.is-open{ background:rgba(31,122,77,.14); color:#1f7a4d; }
/* Rule before the one non-city entry (Nearshore & BPO), so a product link
   doesn't read as a fifth location in a menu that is otherwise all cities. */
.nav-dd-sep{ height:1px; margin:6px 9px; background:var(--line); }

@media (max-width:760px){
  .nav-links{ margin-left:0; }
  .nav-dd-menu{ position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    box-shadow:none; border:0; padding:0; min-width:0; background:transparent; display:none; }
}

/* ── Mobile nav: hamburger toggles .nav-links into a dropdown panel ─────────────
   Replaces the old horizontal-scroll strip where Book / Log in fell off-screen.
   Kept after the pill-button rules above so it wins the cascade at ≤760px. */
@media (max-width:760px){
  .nav{ flex-wrap:nowrap; align-items:center; gap:10px; }
  .nav-toggle{ display:inline-flex; order:3; }
  .lang-dropdown{ order:2; margin-left:auto; }
  .nav-divider{ display:none; }

  /* the menu itself — a panel that drops from the bottom of the nav */
  .nav-links{
    order:4;
    position:absolute; top:100%; left:0; right:0;
    margin:0; width:auto; padding:6px 0;
    flex-direction:column; align-items:stretch; gap:0;
    overflow:hidden;
    background:var(--nav-solid);
    border-bottom:1px solid var(--line);
    box-shadow:0 16px 34px rgba(var(--shadow),.12);
    max-height:0; opacity:0; visibility:hidden;
    transition:max-height .3s var(--ease), opacity .2s var(--ease), visibility .3s var(--ease);
  }
  .nav.nav-open .nav-links{
    max-height:calc(100vh - 62px); max-height:calc(100dvh - 62px); overflow-y:auto;
    opacity:1; visibility:visible;
  }

  /* every item becomes a full-width row; strip the desktop pills + underline */
  .nav-links a,
  .nav-links a[href="/contact"],
  .nav-links a.nav-book,
  .nav-links a.nav-login{
    width:100%; padding:13px 22px; font-size:13px; letter-spacing:.12em;
    border:0; border-radius:0; background:transparent; color:var(--muted);
  }
  .nav-links a:hover,
  .nav-links a.active{ color:var(--ink); background:var(--brass-light); }
  .nav-links a.active::after{ display:none; }
  .nav-links a.nav-book{ color:var(--walnut); font-weight:800; }

  /* Spaces: trigger row + its locations listed statically underneath */
  .nav-dd{ display:block; width:100%; }
  .nav-dd-trigger{ width:100%; padding:13px 22px !important; justify-content:space-between; }
  .nav-dd-menu{
    display:block; position:static;
    /* !important: the desktop :hover/:focus-within rule earlier sets
       translateX(-50%) at higher specificity — without this, a touch that
       focuses a link yanks the static submenu half off-screen mid-tap */
    transform:none !important;
    opacity:1; visibility:visible; pointer-events:auto;
    max-height:none; margin:0; padding:0 0 4px; min-width:0;
    background:transparent; border:0; box-shadow:none;
  }
  .nav-dd-menu::before{ display:none; }
  .nav-dd-menu a,
  .nav-dd-menu .nav-dd-soon{
    padding:10px 22px 10px 38px; font-size:12.5px; border-radius:0;
  }
}

/* — About page: spaces list (right column) — */
.about-spaces .editorial h2{ margin:16px 0 18px; }
.about-space-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.about-space-list a{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:18px 22px; border:1px solid var(--line); border-radius:14px; background:var(--card);
  transition:border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.about-space-list a:hover{
  border-color:var(--walnut);
  background:linear-gradient(150deg, var(--card) 0%, var(--card-edge) 100%);
  transform:translateX(4px);
}
.asl-name{ font-size:17px; color:var(--ink); font-weight:500; }
.asl-meta{
  flex-shrink:0; text-align:right; font-size:12.5px; color:var(--muted);
  font-family:"JetBrains Mono", monospace; letter-spacing:.01em;
}
@media (max-width:560px){
  .about-space-list a{ flex-direction:column; gap:4px; }
  .asl-meta{ text-align:left; }
}

/* ============================================================================
   Booking widget — shared by /dashboard and the /spaces reserve section.
   (Base .form-card / .field / .cal-* live above; these are the term/desk bits.)
   ========================================================================== */
.cal-hint{ margin:8px 0 0; font-size:13px; color:var(--muted); }
.cal-hint.is-soldout{ color:#b23b3b; }
.slot-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:8px; margin-top:4px; }
.slot-btn{
  font:500 13px/1 "JetBrains Mono", monospace; letter-spacing:.02em;
  padding:11px 8px; border:1px solid var(--line); border-radius:10px;
  background:var(--paper, #fff); color:var(--ink); cursor:pointer;
  transition:border-color .15s, background .15s, color .15s;
}
.slot-btn:hover:not(:disabled){ border-color:var(--walnut); }
.slot-btn.is-selected{ background:var(--ink); color:#fff; border-color:var(--ink); }
.slot-btn:disabled{ opacity:.4; cursor:not-allowed; text-decoration:line-through; }
.slot-loading{ font-size:13px; color:var(--muted); }

/* Resource toggle — Hot desk / Conference room */
.res-toggle{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.res-btn{
  font:600 14px/1.1 "Inter", sans-serif; padding:13px 12px;
  border:1px solid var(--line); border-radius:12px; background:var(--paper, #fff);
  color:var(--ink); cursor:pointer; text-align:center;
  transition:border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.res-btn small{ display:block; margin-top:3px; font-weight:400; font-size:12px; color:var(--muted); }
.res-btn:hover{ border-color:var(--walnut); }
.res-btn.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.res-btn.is-active small{ color:rgba(255,255,255,.7); }

/* How long? — Daily / Fortnightly / Monthly / Annual with prices */
#howlong-field[hidden]{ display:none; }
.term-toggle{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.term-btn{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:12px 8px; border:1px solid var(--line); border-radius:12px;
  background:var(--paper, #fff); color:var(--ink); cursor:pointer; text-align:center;
  transition:border-color .15s, background .15s, color .15s;
}
.term-name{ font:600 13px/1.1 "Inter", sans-serif; }
.term-price{ font:600 19px/1 "Cormorant Garamond", serif; }
.term-sub{ font-size:11px; color:var(--muted); }
.term-btn:hover{ border-color:var(--walnut); }
.term-btn.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.term-btn.is-active .term-sub{ color:rgba(255,255,255,.7); }
@media (max-width:560px){ .term-toggle{ grid-template-columns:repeat(2, 1fr); } }

/* Locked term span on the calendar */
.cal-day.in-range:not(.is-selected){ background:rgba(var(--shadow), .10); border-radius:0; }
.cal-day.range-start{ border-top-left-radius:10px; border-bottom-left-radius:10px; }
.cal-day.range-end{ border-top-right-radius:10px; border-bottom-right-radius:10px; }
.cal-day.range-start, .cal-day.range-end{ background:var(--ink); color:#fff; }

/* Start / End date fields under the calendar */
.daterange{ display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:8px; margin-top:12px; }
.daterange[hidden]{ display:none; }
.dr-field{
  display:flex; flex-direction:column; gap:3px;
  padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--paper, #fff);
}
.dr-label{ font:800 10px/1 "Inter", sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.dr-val{ font:500 14px/1.2 "Inter", sans-serif; color:var(--ink); }
.dr-sep{ align-self:center; color:var(--muted); font-size:15px; }

/* Live price / term box */
.quote-box{
  margin-top:12px; padding:14px 16px; border:1px solid var(--line-strong);
  border-radius:12px; background:rgba(var(--shadow), .04);
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.quote-box[hidden]{ display:none; }
.quote-term{ font:500 14px/1.3 "Inter", sans-serif; color:var(--ink); }
.quote-term strong{ font-weight:600; }
.quote-term span{ display:block; margin-top:2px; font-size:12px; color:var(--muted); font-weight:400; }
.quote-price{ font:600 22px/1 "Cormorant Garamond", serif; color:var(--ink); white-space:nowrap; }
.quote-price small{ font:400 12px/1 "Inter", sans-serif; color:var(--muted); }

/* /spaces reserve section — centres the form-card on a public page */
.book-section{ padding:clamp(48px,6vw,84px) var(--gutter) clamp(8px,2vw,20px); }
.book-section .book-inner{ max-width:680px; margin:0 auto; }
.book-section .section-head{ text-align:center; margin-bottom:clamp(22px,3vw,34px); }
.book-section .section-head h2{ font-size:clamp(26px,3.4vw,38px); line-height:1.08; margin-top:8px; }
.book-section .section-head p{ color:var(--muted); margin-top:12px; }

/* /pristina hub — lead with the booking widget (intro left, calendar right) */
.pristina-book{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px);
  align-items:start; max-width:var(--content); margin:0 auto;
  padding:clamp(14px,2.5vw,30px) var(--gutter) clamp(40px,5vw,68px);
}
.pristina-book-intro{ padding-top:clamp(6px,2vw,26px); }
.pristina-book-intro .lead-h{ margin-top:10px; }
.pristina-book-intro .lead-p{ margin-top:14px; max-width:44ch; }
.avail-note{
  display:flex; gap:11px; margin-top:24px; padding:14px 16px;
  border:1px solid var(--line-strong); border-radius:12px; background:rgba(var(--shadow),.04);
  font-size:14px; line-height:1.5; color:var(--muted); max-width:46ch;
}
.avail-note strong{ color:var(--ink); font-weight:600; }
.avail-note a{ color:var(--walnut); text-decoration:underline; }
.avail-dot{
  flex-shrink:0; width:9px; height:9px; margin-top:6px; border-radius:50%;
  background:#1f7a4d; box-shadow:0 0 0 4px rgba(31,122,77,.15);
}
@media (max-width:900px){ .pristina-book{ grid-template-columns:1fr; gap:24px; } }

/* Account-prompt modal (signed-out Confirm on a public page) */
.auth-modal{
  position:fixed; inset:0; z-index:1000; display:grid; place-items:center;
  padding:24px; background:rgba(var(--shadow), .42); backdrop-filter:blur(4px);
  animation:authFade .18s var(--ease);
}
@keyframes authFade{ from{ opacity:0; } to{ opacity:1; } }
.auth-modal-card{
  width:100%; max-width:410px; background:var(--bg); border:1px solid var(--line-strong);
  border-radius:18px; padding:30px 28px 26px; box-shadow:0 24px 60px rgba(var(--shadow), .28);
  position:relative; text-align:left;
}
.auth-modal-card h3{ font-size:24px; line-height:1.1; }
.auth-modal-card p{ color:var(--muted); margin:10px 0 22px; font-size:15px; }
.auth-modal-card .cta{ width:100%; justify-content:center; margin-bottom:14px; }
.auth-modal-card .text-link{ display:flex; width:fit-content; margin:0 auto; font-size:11px; letter-spacing:.18em; }
.auth-modal-x{
  position:absolute; top:14px; right:14px; width:30px; height:30px; border:0; cursor:pointer;
  background:transparent; color:var(--muted); font-size:22px; line-height:1; border-radius:8px;
}
.auth-modal-x:hover{ background:var(--card); color:var(--ink); }

/* ═══════════════════════════════════════════════════════════════════════════
   BOOKING v2  ·  desk picker · consent · guest booking · reset · terms page
═══════════════════════════════════════════════════════════════════════════ */
/* Desk picker — hot-desk: choose a specific numbered desk (1..12) */
.desk-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(62px,1fr)); gap:8px; margin-top:4px; }
.desk-btn{
  font:500 14px/1 "JetBrains Mono", monospace; padding:12px 6px;
  border:1px solid var(--line); border-radius:10px; background:var(--field-bg, var(--paper,#fff));
  color:var(--ink); cursor:pointer; text-align:center;
  transition:border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.desk-btn.desk-any{ grid-column:1 / -1; font-family:"Inter", sans-serif; font-weight:600; font-size:13.5px; }
.desk-btn:hover:not([disabled]):not(.is-selected){ border-color:var(--walnut); }
.desk-btn.is-selected{ background:var(--walnut); border-color:var(--walnut); color:var(--btn-text,#fff); font-weight:600; }
.desk-btn[disabled]{ opacity:.4; cursor:not-allowed; text-decoration:line-through; }
.desk-note{ font-size:12.5px; color:var(--muted); margin-top:8px; line-height:1.5; }

/* Consent checkbox — booking form + signup */
.consent-field{ margin-top:2px; }
.consent{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; line-height:1.5; color:var(--ink); cursor:pointer; text-transform:none; letter-spacing:0; font-weight:400; }
.consent input[type="checkbox"]{ margin-top:2px; width:17px; height:17px; accent-color:var(--walnut); flex:0 0 auto; }
.consent a{ color:var(--walnut); text-decoration:underline; }

/* Guest booking — inside the auth modal */
.cta-ghost{ width:100%; justify-content:center; background:transparent; color:var(--ink); border:1px solid var(--line-strong); margin-bottom:14px; }
.cta-ghost:hover{ background:var(--card); }
.am-guest-form{ margin-top:4px; text-align:left; border-top:1px solid var(--line); padding-top:16px; }
.am-guest-form .field{ margin-bottom:12px; }
.am-guest-form label{ display:block; font-size:12px; letter-spacing:.04em; color:var(--muted); margin-bottom:5px; }
.am-guest-form input{ width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--field-bg,#fff); color:var(--ink); font:inherit; }
.am-opt{ text-transform:none; letter-spacing:0; color:var(--muted); }
.am-error{ color:#b23b3b; font-size:13px; margin:4px 0 10px; }
.am-guest-form .cta{ width:100%; justify-content:center; }

/* Forgot-password link (login) */
.forgot-link{ display:inline-block; margin:-4px 0 4px; font-size:12.5px; color:var(--muted); }
.forgot-link:hover{ color:var(--walnut); }

/* Legal page (terms) */
.legal-page{ max-width:760px; margin:0 auto; padding:56px 22px 84px; }
.legal-page h1{ margin-bottom:6px; }
.legal-updated{ color:var(--muted); font-size:13px; margin-bottom:28px; }
.legal-page h2{ font-size:20px; margin:32px 0 10px; }
.legal-page p, .legal-page li{ color:var(--ink); line-height:1.72; font-size:15px; }
.legal-page ul{ margin:8px 0 12px 20px; }
.legal-page a{ color:var(--walnut); text-decoration:underline; }

/* Admin console (staff) */
.admin-controls{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:0 0 22px; }
.admin-controls label{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
.admin-controls input, .admin-controls select{ padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:var(--field-bg,#fff); color:var(--ink); font:inherit; }
.adm-btn{ padding:8px 14px; border:1px solid var(--line-strong); border-radius:9px; background:var(--walnut); color:var(--btn-text,#fff); font:600 13px/1 "Inter",sans-serif; cursor:pointer; }
.adm-btn:hover{ opacity:.92; }
/* Delete: quiet outline by default, danger-red on hover (destructive action) */
.adm-btn.adm-del{ background:transparent; color:var(--muted); border-color:var(--line-strong); }
.adm-btn.adm-del:hover{ background:#b3261e; border-color:#b3261e; color:#fff; opacity:1; }
.adm-btn.adm-del:disabled{ opacity:.5; cursor:default; }
.admin-cols{ display:grid; grid-template-columns:1fr 320px; gap:28px; align-items:start; }
@media (max-width:900px){ .admin-cols{ grid-template-columns:1fr; } }
.admin-table{ display:flex; flex-direction:column; gap:8px; }
.adm-empty{ color:var(--muted); font-size:14px; padding:8px 0; }
.adm-row{ display:grid; grid-template-columns:auto 1fr auto; gap:6px 12px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--card,#fff); transition:border-color .15s; }
.adm-row:hover{ border-color:var(--line-strong); }
.adm-row.status-cancelled{ opacity:.55; }
.adm-pick{ display:flex; align-items:center; grid-row:1 / span 2; }
.adm-check{ width:16px; height:16px; accent-color:var(--walnut); cursor:pointer; }
.adm-when strong{ display:block; font-size:14px; }
.adm-when span{ font-size:12.5px; color:var(--muted); font-family:"JetBrains Mono",monospace; }
.adm-when span em{ font-style:normal; color:#b23b3b; }
.adm-ref{ font:500 10.5px/1 "JetBrains Mono",monospace; color:var(--muted); letter-spacing:.04em; margin-left:6px; }
.adm-who{ grid-column:2 / -1; font-size:13px; color:var(--ink); }
.adm-email{ display:block; font-size:12px; color:var(--walnut); font-family:"JetBrains Mono",monospace; }
.adm-actions{ grid-column:3; grid-row:1; display:flex; gap:8px; align-items:center; }
/* Bulk select bar */
.adm-bulkbar{ display:flex; align-items:center; gap:12px; margin:0 0 10px; min-height:36px; flex-wrap:wrap; }
.adm-bulkbar #adm-bulk{ display:flex; align-items:center; gap:10px; }
.adm-bulkbar select{ padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:var(--field-bg,#fff); color:var(--ink); font-size:12.5px; }
#adm-bulk-count{ font-size:12.5px; color:var(--muted); }
/* Month-at-a-glance calendar */
.adm-cal{ margin:6px 0 22px; }
.adm-cal-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.adm-cal-head strong{ font-size:14px; }
.adm-cal-head .adm-btn{ padding:4px 10px; }
.adm-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.adm-cal-dow{ text-align:center; font:600 10px/1.6 "Inter",sans-serif; color:var(--muted); text-transform:uppercase; }
.adm-cal-day{ display:flex; flex-direction:column; align-items:center; gap:1px; padding:5px 2px; border:1px solid var(--line); border-radius:8px; background:var(--card,#fff); font:500 12px/1.2 "Inter",sans-serif; color:var(--ink); cursor:pointer; }
.adm-cal-day small{ font:500 9.5px/1 "JetBrains Mono",monospace; color:var(--muted); }
.adm-cal-day.is-light{ background:var(--brass-light, rgba(169,130,63,.08)); }
.adm-cal-day.is-busy{ background:rgba(169,130,63,.22); }
.adm-cal-day.is-full{ background:var(--walnut); color:var(--btn-text,#fff); }
.adm-cal-day.is-full small{ color:var(--btn-text,#fff); }
.adm-cal-day.is-picked{ outline:2px solid var(--walnut); outline-offset:1px; }
.adm-cal-room{ color:var(--walnut); }
.adm-cal-key{ margin:8px 0 0; font-size:11px; color:var(--muted); }
.adm-searchlabel input{ min-width:200px; }
.adm-staff-label{ margin:14px 0 4px; font:700 10px/1 "Inter",sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.adm-member strong .adm-role{ margin-left:6px; }
.adm-status{ padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:var(--field-bg,#fff); color:var(--ink); font-size:12.5px; }
.adm-edit{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding-top:8px; border-top:1px dashed var(--line); }
.adm-edit label{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); }
.adm-edit input{ padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:var(--field-bg,#fff); color:var(--ink); font:inherit; width:auto; }
.adm-msg{ font-size:12.5px; color:#b23b3b; }
.desk-day{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:6px 0 20px; }
.adm-desk{ display:flex; flex-direction:column; gap:2px; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--card,#fff); }
.adm-desk.is-taken{ border-color:var(--walnut); background:var(--brass-light, rgba(169,130,63,.08)); }
.adm-desk-n{ font:600 12px/1 "JetBrains Mono",monospace; color:var(--muted); }
.adm-desk-who{ font-size:13px; color:var(--ink); }
.adm-daylabel{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); margin-bottom:4px; }
.admin-members{ display:flex; flex-direction:column; gap:6px; }
.adm-member{ display:flex; flex-direction:column; gap:2px; padding:8px 10px; border:1px solid var(--line); border-radius:9px; font-size:13px; }
.adm-member span{ color:var(--muted); font-size:12px; }
.adm-member .adm-email{ color:var(--walnut); }
.adm-role{ text-transform:uppercase; letter-spacing:.08em; font-size:10px; color:var(--walnut); }

/* ═══════════════════════════════════════════════════════════════════════════
   BOOKING FLOW  ·  /book  (single flow: dates → desk map → auth → confirm)
═══════════════════════════════════════════════════════════════════════════ */
/* Gutter on the container so phones/tablets don't run flush to the screen
   edge; the +2×gutter keeps the content column at 880px on desktop. */
.page.book{ max-width:calc(880px + var(--gutter)*2); margin:0 auto; padding:0 var(--gutter) 80px; }
.book-head{ margin-bottom:6px; }
.book-intro{ color:var(--muted); max-width:62ch; }
.book-price-line{ color:var(--walnut); font-weight:600; }
.book-stepper{ display:flex; flex-wrap:wrap; gap:18px; list-style:none; padding:0; margin:18px 0 18px; }
.book-stepper li{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
/* Only the leading number is a circle — the label is plain text (was hitting both spans, boxing the label). */
.book-stepper li span:first-child{ flex:none; width:24px; height:24px; border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center; font-size:12px; font-weight:600; }
.book-stepper li.is-active{ color:var(--ink); }
.book-stepper li.is-active span:first-child{ background:var(--walnut); border-color:var(--walnut); color:var(--btn-text,#fff); }
@media (max-width:520px){
  .book-stepper{ gap:8px 14px; }
  .book-stepper li{ font-size:12px; gap:6px; }
  .book-stepper li span:first-child{ width:22px; height:22px; font-size:11px; }
}
.book-panel{ padding:24px; }
.book-grid{ display:flex; flex-direction:column; gap:20px; }
.book-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:22px; flex-wrap:wrap; }
.book-price{ display:flex; flex-direction:column; }
.book-price-label{ font-size:13px; color:var(--muted); }
.book-price-val{ font:600 22px/1 "Cormorant Garamond",Georgia,serif; color:var(--ink); min-height:22px; }
.book-back{ background:none; border:0; color:var(--muted); font:inherit; font-size:13px; cursor:pointer; padding:10px 12px 12px 0; margin-top:-10px; }
.book-back:hover{ color:var(--walnut); }
.book-summary{ display:flex; flex-direction:column; gap:2px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--card,#fff); margin-bottom:20px; }
.book-summary span{ color:var(--muted); font-size:13px; }
/* (desk-map styles removed — v3 auto-assigns desks; no picker in the flow) */
.book-auth{ margin-top:8px; }
.book-auth-as{ font-size:14px; margin-bottom:14px; }
.book-auth-tabs{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.ba-tab{ padding:9px 14px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); font:600 13px/1 "Inter",sans-serif; cursor:pointer; }
.ba-tab.is-active{ background:var(--walnut); border-color:var(--walnut); color:var(--btn-text,#fff); }
.ba-panel .field{ margin-bottom:12px; }
.ba-panel label{ display:block; font-size:12px; letter-spacing:.04em; color:var(--muted); margin-bottom:5px; }
.ba-panel input{ width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--field-bg,#fff); color:var(--ink); font:inherit; }
.ba-panel .cta{ width:100%; justify-content:center; }
.ba-fine{ font-size:12px; color:var(--muted); margin-top:10px; }
.book-done{ text-align:center; padding:44px 24px; }
.book-done-check{ width:56px; height:56px; margin:0 auto 14px; border-radius:50%; background:rgba(31,122,77,.12); color:#1f7a4d; display:grid; place-items:center; font-size:28px; }
.book-done-actions{ display:flex; gap:14px; align-items:center; justify-content:center; margin-top:18px; flex-wrap:wrap; }
.book-cta-card{ padding:26px 24px; border:1px solid var(--line); border-radius:16px; background:var(--card,#fff); text-align:left; }
.book-cta-card h3{ margin:0 0 6px; }
.book-cta-card p{ color:var(--muted); font-size:14px; margin:0 0 16px; max-width:46ch; }

/* BOOK — payment method modal (opens on Confirm booking) */
body.pay-open{ overflow:hidden; }   /* scroll-lock while the modal is up */
.pay-overlay{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(var(--shadow),.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); animation:pay-fade .2s var(--ease-out); overscroll-behavior:contain; }
@keyframes pay-fade{ from{opacity:0} to{opacity:1} }
.pay-dialog{ position:relative; width:100%; max-width:460px; max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px); overflow-y:auto; overscroll-behavior:contain; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-card); padding:32px 28px 24px; box-shadow:0 30px 80px rgba(var(--shadow),.28); animation:pay-rise .28s var(--ease-out); }
@keyframes pay-rise{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
.pay-close{ position:absolute; top:14px; right:16px; width:32px; height:32px; border:none; background:transparent; color:var(--muted); font-size:24px; line-height:1; cursor:pointer; border-radius:8px; transition:background .18s var(--ease), color .18s var(--ease); }
.pay-close:hover{ background:var(--bg-alt); color:var(--ink); }
.pay-title{ margin:0 0 4px; padding-right:44px; font-size:22px; }
.pay-sub{ margin:0 0 20px; color:var(--muted); font-size:14px; }
.pay-options{ display:flex; flex-direction:column; gap:12px; margin-bottom:22px; }
.pay-option{ position:relative; display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--line-strong); border-radius:14px; background:var(--card); cursor:pointer; transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); }
.pay-option:not(.is-disabled):hover{ border-color:var(--walnut); }
.pay-option.is-selected{ border-color:var(--walnut); box-shadow:0 0 0 1px var(--walnut) inset, 0 6px 18px rgba(var(--shadow),.08); background:linear-gradient(var(--card),var(--card-edge)); }
.pay-option input{ position:absolute; opacity:0; pointer-events:none; }
.pay-option-ic{ font-size:24px; line-height:1; flex:0 0 auto; }
.pay-option-body{ display:flex; flex-direction:column; gap:3px; }
.pay-option-body strong{ font-size:15px; color:var(--ink); }
.pay-option-body small{ font-size:12.5px; color:var(--muted); line-height:1.4; }
.pay-check{ margin-left:auto; flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--walnut); color:var(--btn-text); display:grid; place-items:center; font-size:13px; opacity:0; transform:scale(.6); transition:opacity .18s var(--ease), transform .18s var(--ease); }
.pay-option.is-selected .pay-check{ opacity:1; transform:none; }
/* Stripe — unavailable: blur the content, keep the "Coming soon" badge sharp */
.pay-option.is-disabled{ cursor:not-allowed; border-style:dashed; overflow:hidden; }
.pay-option.is-disabled .pay-option-ic,
.pay-option.is-disabled .pay-option-body{ filter:blur(3px); opacity:.55; -webkit-user-select:none; user-select:none; }
.pay-soon{ position:absolute; top:50%; right:16px; transform:translateY(-50%); z-index:2; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--walnut); background:var(--bg-alt); border:1px solid var(--line-strong); border-radius:999px; padding:5px 11px; }
#pay-cash-go{ width:100%; }
.pay-fine{ margin:12px 0 0; text-align:center; font-size:12px; color:var(--muted); }

/* BOOK v2 — location · gallery · pricing tiers · account edit */
.loc-picker{ margin:12px 0 4px; }
.loc-choice{ display:flex; gap:0; align-items:stretch; border:1px solid var(--walnut); border-radius:16px; overflow:hidden; background:var(--card,#fff); }
.loc-choice-img{ flex:1 1 auto; min-width:240px; height:190px; }
.loc-choice-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.loc-choice-body{ flex:0 0 auto; min-width:260px; padding:20px 22px; display:flex; flex-direction:column; justify-content:center; gap:4px; }
.loc-choice-body h3{ font-size:21px; margin:2px 0 0; }
.loc-choice-body p{ color:var(--muted); font-size:14px; margin:0; }
.loc-pin{ width:26px; height:26px; color:var(--walnut); }
.loc-pin svg{ width:26px; height:26px; }
.loc-pill.is-open{ align-self:flex-start; margin-top:10px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; background:rgba(31,122,77,.12); color:#1f7a4d; padding:4px 11px; border-radius:999px; font-weight:600; }
.loc-soon{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.loc-soon-card{ flex:1; min-width:100px; border:1px dashed var(--line); border-radius:12px; padding:12px; text-align:center; opacity:.55; }
.loc-soon-card span{ display:block; font-weight:600; font-size:14px; }
.loc-soon-card small{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.loc-actions{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
.loc-actions .cta{ flex:1; justify-content:center; min-width:180px; }
@media (max-width:560px){ .loc-choice{ flex-direction:column; } .loc-choice-img{ width:100%; flex:none; height:180px; } }
/* Horizontal snap-scroll carousel — ~2.5 tiles in view (desktop), a peeking
   partial tile on mobile so it reads as "swipe me". */
.gallery-grid{
  display:flex; gap:14px; margin:16px 0 4px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding-bottom:12px;                     /* room for the scrollbar */
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.gallery-grid::-webkit-scrollbar{ height:8px; }
.gallery-grid::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }
.gallery-grid::-webkit-scrollbar-track{ background:transparent; }
.gallery-grid > *{ flex:0 0 calc((100% - 28px) / 2.5); scroll-snap-align:start; }
.gallery-grid img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; display:block; }
.tour-3d{ aspect-ratio:4/3; border-radius:12px; border:1px dashed var(--walnut); background:linear-gradient(135deg, var(--brass-light, rgba(169,130,63,.10)), transparent); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:12px; }
.tour-3d-badge{ font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--walnut); font-weight:700; }
.tour-3d-cta{ font-family:"Cormorant Garamond",Georgia,serif; font-size:18px; color:var(--ink); }
.gallery-hint{ margin:2px 0 4px; font-size:12.5px; letter-spacing:.02em; color:var(--muted); }
@media (max-width:640px){
  .gallery-grid > *{ flex-basis:calc((100% - 14px) / 1.4); }  /* peek the next tile */
}
.book-pricing-tiers{ display:flex; gap:10px; margin:0 0 20px; flex-wrap:wrap; }
.ptier{ flex:1; min-width:92px; border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--field-bg,#fff); }
.ptier strong{ display:block; font:600 20px/1 "Cormorant Garamond",Georgia,serif; color:var(--ink); }
.ptier span{ font-size:12px; color:var(--muted); }
.ptier-note{ flex:2 1 100%; border:0; background:transparent; padding:8px 0 0; }
.ptier-note span{ font-size:13px; }
.ptier-note a{ color:var(--walnut); text-decoration:underline; }
.acct-edit-form{ display:flex; flex-direction:column; gap:12px; }
.acct-edit-form[hidden]{ display:none !important; }
.acct-edit-form .field label{ display:block; font-size:12px; letter-spacing:.04em; color:var(--muted); margin-bottom:5px; }
.acct-edit-form input{ width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--field-bg,#fff); color:var(--ink); font:inherit; }
.acct-form-actions{ display:flex; gap:10px; align-items:center; margin-top:4px; }
.acct-form-actions .cta{ padding:11px 20px; }
.acct-msg{ font-size:13px; color:#b23b3b; }

/* BOOK v3 — when & how many (presets · people · live quote), guest-first,
   post-checkout account (OTP), meeting-room waitlist. */
.book-when{ display:flex; gap:28px; flex-wrap:wrap; margin:4px 0 20px; }
.bw-block{ flex:1; min-width:230px; }
.bw-label{ display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:11px; }

.dur-presets{ display:flex; gap:8px; flex-wrap:wrap; }
.dur-preset{ padding:10px 17px; border:1px solid var(--line-strong); border-radius:999px; background:var(--field-bg,#fff); color:var(--ink); font:600 13px/1 "Inter",sans-serif; cursor:pointer; transition:border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease); }
.dur-preset:hover{ border-color:var(--walnut); }
.dur-preset.is-active{ background:var(--walnut); border-color:var(--walnut); color:var(--btn-text,#fff); }
.dur-custom{ font-style:italic; }

.people-stepper{ display:flex; align-items:center; gap:13px; }
.ppl-btn{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line-strong); background:var(--field-bg,#fff); color:var(--ink); font-size:22px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:border-color .15s var(--ease), color .15s var(--ease); }
.ppl-btn:hover:not(:disabled){ border-color:var(--walnut); color:var(--walnut); }
.ppl-btn:disabled{ opacity:.4; cursor:default; }
.ppl-count{ min-width:30px; text-align:center; font:600 24px/1 "Cormorant Garamond",Georgia,serif; color:var(--ink); }
.ppl-unit{ font-size:13px; color:var(--muted); }
.ppl-hint{ font-size:12.5px; color:var(--muted); margin:9px 0 0; }
.book-cal-field{ margin-top:6px; }
.book-cal-field .bw-label{ margin-bottom:8px; }

/* Live interactive quote */
.quote-panel{ margin:20px 0 6px; padding:18px 20px; border:1px solid var(--walnut); border-radius:16px; background:linear-gradient(var(--card,#fff), var(--card-edge,#faf8f4)); }
.quote-headline{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.quote-total{ font:600 30px/1 "Cormorant Garamond",Georgia,serif; color:var(--walnut); }
.quote-break{ font-size:14px; color:var(--ink); text-align:right; }
.quote-meta{ display:flex; flex-direction:column; gap:3px; margin-top:9px; }
.quote-sub{ font-size:12.5px; color:var(--muted); }
.quote-best{ font-size:12.5px; color:var(--walnut); font-weight:600; }
/* the one-tap upsell ("Add 2 more days for just €4 — make it a full week") */
.quote-nudge{ align-self:flex-start; margin-top:4px; padding:8px 14px; border:1px solid var(--walnut); border-radius:999px; background:transparent; color:var(--walnut); font:600 12.5px/1.3 "Inter",sans-serif; cursor:pointer; text-align:left; transition:background .15s var(--ease), color .15s var(--ease); }
.quote-nudge:hover{ background:var(--walnut); color:var(--btn-text,#fff); }
.book-roomlink{ font-size:13px; }

/* calendar + rate card side by side (stacked on phones, card first) */
.cal-wrap{ display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; }
.cal-wrap .cal{ flex:1 1 300px; max-width:430px; }
.rate-card{ flex:1 1 160px; max-width:220px; border:1px solid var(--line); border-radius:12px; padding:13px 15px; background:var(--bg-alt,#faf8f4); }
.rate-card-h{ display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:6px; }
.rate-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:5px 0; border-bottom:1px dashed var(--line); font-size:13px; color:var(--muted); }
.rate-row:last-of-type{ border-bottom:0; }
.rate-row strong{ font:600 16px/1 "Cormorant Garamond",Georgia,serif; color:var(--ink); }
.rate-card small{ display:block; margin-top:7px; font-size:11px; color:var(--muted); line-height:1.4; }

/* Guest-first details */
.book-guest-lead{ font-size:13px; color:var(--muted); margin:0 0 14px; }
.book-guest .field{ margin-bottom:12px; }
.book-guest label{ display:block; font-size:12px; letter-spacing:.04em; color:var(--muted); margin-bottom:5px; }
.book-guest input{ width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--field-bg,#fff); color:var(--ink); font:inherit; }
.ba-fine{ font-size:12px; color:var(--muted); margin:10px 0 0; }

/* Post-checkout account creation (password → emailed OTP) */
.acct-invite{ margin:20px 0; padding:20px 22px; border:1px solid var(--line-strong); border-radius:16px; background:var(--bg-alt,#faf8f4); text-align:left; }
.acct-invite[hidden]{ display:none !important; }
.acct-invite h3{ margin:0 0 6px; font-size:19px; }
.acct-invite-lead{ font-size:13.5px; color:var(--muted); margin:0 0 16px; }
.acct-invite .field{ margin-bottom:12px; }
.acct-invite label:not(.consent):not(.consent-sm){ display:block; font-size:12px; letter-spacing:.04em; color:var(--muted); margin-bottom:5px; }
.acct-invite input[type="password"], .acct-invite input[type="text"]{ width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--field-bg,#fff); color:var(--ink); font:inherit; }
.acct-invite #acct-otp{ letter-spacing:.5em; text-align:center; font-size:20px; }
.consent-sm{ display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:var(--muted); margin:6px 0 15px; }
.consent-sm input{ width:auto; margin-top:2px; flex:none; }
.acct-invite .cta{ width:100%; justify-content:center; }
.acct-invite .text-link{ display:inline-block; margin-top:10px; font-size:13px; }
.acct-invite-msg{ font-size:13px; color:var(--walnut); margin:12px 0 0; }
.acct-invite-msg.is-err{ color:#b23b3b; }
.acct-done{ margin:16px 0; padding:14px; border-radius:12px; background:rgba(31,122,77,.10); color:#1f7a4d; font-weight:600; font-size:14px; text-align:center; }

/* Waitlist modal (reuses the .pay-overlay / .pay-dialog shell) */
.wl-dialog .field{ margin:4px 0 14px; text-align:left; }
.wl-dialog label{ display:block; font-size:12px; letter-spacing:.04em; color:var(--muted); margin-bottom:5px; }
.wl-dialog input{ width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--field-bg,#fff); color:var(--ink); font:inherit; }
.wl-dialog .cta{ width:100%; justify-content:center; }

/* Admin: team desks reserved without a pinned number */
.adm-desk-auto{ grid-column:1 / -1; margin-top:8px; padding:8px 12px; border:1px dashed var(--line-strong); border-radius:10px; font-size:12.5px; color:var(--muted); }

/* BOOK — staged entrance: each step fades in and its content gently unrolls,
   one block after the next. book.js re-adds .is-entering on every panel
   switch. Scoped to no-preference so reduced-motion users (and any browser
   that skips animations) never end up with opacity:0 content. */
@media (prefers-reduced-motion: no-preference){
  .book-panel.is-entering{ animation:bookPanelIn .3s var(--ease-out) both; }
  .book-panel.is-entering > *{ opacity:0; animation:bookChildIn .5s var(--ease-out) forwards; }
  .book-panel.is-entering > :nth-child(1){ animation-delay:.04s }
  .book-panel.is-entering > :nth-child(2){ animation-delay:.10s }
  .book-panel.is-entering > :nth-child(3){ animation-delay:.16s }
  .book-panel.is-entering > :nth-child(4){ animation-delay:.22s }
  .book-panel.is-entering > :nth-child(5){ animation-delay:.28s }
  .book-panel.is-entering > :nth-child(6){ animation-delay:.34s }
  .book-panel.is-entering > :nth-child(n+7){ animation-delay:.40s }
  /* the live total does a soft pop whenever the price changes */
  .quote-panel.is-bump .quote-total{ animation:quoteBump .32s var(--ease-out); }
}
@keyframes bookPanelIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes bookChildIn{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
@keyframes quoteBump{ 0%{ transform:scale(.94); opacity:.55 } 60%{ transform:scale(1.05) } 100%{ transform:none } }

/* BOOK — mobile-first refinements (phones are the primary channel) */
@media (max-width:560px){
  .book-panel{ padding:18px 16px; }
  .dur-presets{ gap:8px; }
  .dur-preset{ padding:12px 16px; font-size:14px; flex:1 1 calc(50% - 8px); text-align:center; }
  .dur-preset.dur-custom{ flex-basis:100%; }
  .ppl-btn{ width:48px; height:48px; font-size:24px; }
  .ppl-count{ font-size:28px; min-width:36px; }
  .cal-day{ font-size:14.5px; }
  /* keep the live price on screen while scrolling the calendar */
  .quote-panel{ position:sticky; bottom:10px; z-index:5; box-shadow:0 12px 34px rgba(var(--shadow),.18); }
  .quote-total{ font-size:27px; }
  /* full-width action; waitlist link sits quietly underneath */
  .book-foot{ flex-direction:column-reverse; align-items:stretch; gap:10px; }
  .book-foot .cta{ width:100%; justify-content:center; }
  .book-roomlink{ text-align:center; padding:8px 0; }
  /* iOS zooms any focused input under 16px — keep booking inputs at 16 */
  .book-guest input, .acct-invite input[type="password"], .acct-invite input[type="text"],
  .wl-dialog input, #book-notes{ font-size:16px; }
  .pay-close{ width:42px; height:42px; font-size:28px; }
  /* bigger tap-target X on mobile → reserve more room so it never sits over the heading */
  .pay-title{ padding-right:50px; }
  .pay-dialog{ padding:26px 20px 20px; }
  .acct-invite{ padding:18px 16px; }
  .book-stepper li span:last-child{ font-size:11.5px; }
  /* thumb-sized month arrows + a proper checkbox for the terms consent (it
     gates the booking and sits next to two links — mistap hazard otherwise) */
  .cal-nav{ width:40px; height:40px; }
  .consent{ gap:12px; }
  .consent input[type="checkbox"]{ width:22px; height:22px; margin-top:1px; }
  /* the sticky quote pins over the calendar while scrolling — keep it slim */
  .quote-panel{ padding:13px 16px; }
  .quote-meta{ margin-top:5px; }
  /* rate card becomes a compact 4-up strip ABOVE the calendar */
  .rate-card{ order:-1; max-width:none; width:100%; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; padding:10px 12px; }
  .rate-card-h{ display:none; }
  .rate-row{ flex-direction:column; align-items:center; gap:1px; padding:2px 0; border-bottom:0; font-size:11.5px; }
  .rate-row strong{ font-size:15px; }
  .rate-card small{ grid-column:1 / -1; text-align:center; margin-top:4px; }
  .cal-wrap .cal{ max-width:none; }
}

/* OAuth buttons (Google / Apple) — kept for when providers are enabled;
   buttons removed from HTML 14 Jul (see TODO.md) so these are inert. */
.oauth-row{ display:flex; flex-direction:column; gap:10px; margin:4px 0 12px; }
.oauth-btn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:12px 16px; border-radius:12px; border:1px solid var(--line-strong); background:var(--field-bg,#fff); color:var(--ink); font:600 14px/1 "Inter",sans-serif; cursor:pointer; transition:border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease); }
.oauth-btn:hover:not(:disabled){ border-color:var(--walnut); box-shadow:0 2px 10px rgba(var(--shadow),.06); }
.oauth-btn:disabled{ opacity:.6; cursor:default; }
.oauth-ic{ flex:none; display:block; }
.oauth-apple{ background:#000; border-color:#000; color:#fff; }
.oauth-apple:hover:not(:disabled){ background:#141414; border-color:#141414; }
.oauth-msg{ font-size:12.5px; color:#b23b3b; margin:0 0 10px; text-align:center; }
.oauth-or{ display:flex; align-items:center; gap:12px; margin:6px 0 16px; color:var(--muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; }
.oauth-or::before, .oauth-or::after{ content:""; flex:1; height:1px; background:var(--line); }

@media (max-width:560px){
  .book-when{ gap:20px; }
  .quote-headline{ gap:8px; }
  .quote-break{ text-align:left; }
}

/* ============================================================================
   AVAILABILITY STATES  ·  24 Jul 2026
   Dukagjini Centre sells one self-serve product — a DEDICATED DESK on the
   coworking floor. Private suites and the entire floor are fully booked and
   return in September, so their cards stay legible and keep selling (waiting
   list) rather than being greyed into oblivion like .preview-card--disabled.
   ========================================================================== */
:root{
  --paused:#8a6a2f;                   /* warm clay — "paused", not "error" */
  --paused-bg:rgba(169,130,63,.13);
}

/* The badge that marks a product as unavailable. Sits above the card title. */
.avail-badge{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  margin:0 0 10px;
  padding:5px 12px; border-radius:999px;
  background:var(--paused-bg); color:var(--paused);
  font:800 10px/1.4 "Inter",sans-serif; letter-spacing:.12em; text-transform:uppercase;
  white-space:nowrap;
}
.avail-badge::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:currentColor; flex:none;
}
.avail-badge.is-open{ background:rgba(31,122,77,.13); color:#1f7a4d; }

/* A price card for a product you can't buy right now. Price stays visible —
   it is the reason someone joins the waiting list — but is de-emphasised. */
.price-card.is-soldout{ border-color:var(--line-strong); background:var(--bg-alt); }
.price-card.is-soldout .card-media{ opacity:.62; }
.price-card.is-soldout .price strong{ color:var(--muted); }
.price-card.is-soldout .price::after{
  content:""; display:block; width:38px; height:1px; margin:9px 0 0;
  background:var(--paused); opacity:.5;
}
/* Waiting-list CTA — outline, so the bookable products keep the filled button */
.price-card-book.is-waitlist,
.cta.cta-waitlist{
  background:transparent; color:var(--paused); border-color:var(--paused);
}
.price-card-book.is-waitlist:hover,
.cta.cta-waitlist:hover{ background:var(--paused); color:var(--btn-text); border-color:var(--paused); }

/* Home pricing strip — a tier that is currently unavailable. */
.home-pricing-tier.is-soldout .home-pricing-price strong,
.home-pricing-tier.is-soldout .home-pricing-price .unit{ color:var(--muted); }
.home-pricing-tier.is-soldout{ background:var(--bg-alt); border-color:var(--line-strong); }
.home-pricing-tier .avail-badge{ margin:0 0 8px; font-size:9px; padding:4px 10px; }

/* Availability line under a hero / section head ("Desks available now · suites
   from September"), used on the home page and the Dukagjini Centre page. */
.avail-line{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  margin:14px 0 0; font-size:13.5px; color:var(--muted);
}
.avail-line strong{ color:var(--ink); font-weight:600; }
.avail-line a{ color:var(--walnut); border-bottom:1px solid currentColor; }

/* ── Fixes surfaced by the 24 Jul UX audit ──────────────────────────────── */
/* 1. No .cta:disabled rule existed, so a sold-out "Next" or an in-flight
      "Confirm booking" looked fully live and even kept the hover lift. */
.cta:disabled,
.cta[disabled],
.cta[data-busy]{
  opacity:.5; cursor:not-allowed; transform:none;
  background:var(--line-strong); border-color:transparent; color:var(--ink);
  box-shadow:none;
}
.cta:disabled:hover,
.cta[disabled]:hover,
.cta[data-busy]:hover{
  transform:none; box-shadow:none;
  background:var(--line-strong); border-color:transparent;
}
.cta:disabled::after,
.cta[disabled]::after,
.cta[data-busy]::after{ opacity:0; }
.cta:disabled .arrow,
.cta[disabled] .arrow,
.cta[data-busy] .arrow{ transform:none; }
/* in-flight submit reads as working, not broken */
.cta[data-busy]{ opacity:.72; }
.cta[data-busy] .arrow{ animation:ctaBusy 1s linear infinite; }
@keyframes ctaBusy{ 0%,100%{ opacity:.3 } 50%{ opacity:1 } }
@media (prefers-reduced-motion:reduce){ .cta[data-busy] .arrow{ animation:none; } }

/* 2. .reslabel ("Choose your location", /book step 1) had no rule at all and
      rendered as bare inline body text next to step 2's proper eyebrow labels. */
.reslabel{
  display:block; margin:0 0 4px;
  font:600 12px/1.4 "Inter",sans-serif; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}

/* Badge spacing per container. .card-body is a flex column with gap:15px, so
   the badge must not add its own bottom margin there; .home-pricing-tier and
   .page-hero-inner are block contexts and do need it. */
.card-body > .avail-badge{ margin-bottom:0; }
.price-card.is-soldout .price-card-book.is-waitlist{ margin-top:auto; }
/* keep the CTA pinned to the card foot so sold-out and available cards in the
   same row line their buttons up */
.price-card .card-body{ justify-content:flex-start; }
.price-card .price-card-book{ align-self:flex-start; }