/* ============================================================
   BioHealthcare Resorts & Living
   Quiet-luxury / Aman-register design tokens + base styles
   ============================================================ */

:root{
  /* ---- Warm neutral foundation (dominant) ---- */
  --ivory:      #F3EFE5;   /* page paper */
  --ivory-2:    #EDE8DB;   /* alternate light section */
  --sand:       #E2DBC9;
  --stone:      #C6C0B0;
  --stone-soft: #D6D0C1;

  /* ---- Green = vitality, used sparingly ---- */
  --sage:       #8E9A78;
  --sage-deep:  #6F7B59;
  --forest:     #39442D;
  --forest-2:   #2C3522;

  /* ---- Ink / dark ---- */
  --charcoal:   #20261D;
  --ink:        #2A2C23;   /* headings */
  --ink-body:   #45463C;   /* body copy, warm */
  --ink-mute:   #7C7C6F;   /* captions, meta */

  /* ---- Accent (tweakable vitality hue) ---- */
  --accent:      var(--sage-deep);
  --accent-soft: var(--sage);

  /* ---- Hairlines ---- */
  --line:      rgba(42,44,35,0.14);
  --line-soft: rgba(42,44,35,0.08);
  --line-inv:  rgba(243,239,229,0.18);

  /* ---- Type ---- */
  --serif: "Playfair Display", Georgia, serif;
  --sans:  "Satoshi", "Hanken Grotesk", system-ui, sans-serif;

  /* ---- Rhythm ---- */
  --gutter:   clamp(22px, 6vw, 120px);
  --maxw:     1320px;
  --sec-pad:  clamp(78px, 12vh, 176px);
  --ease:     cubic-bezier(.22,.61,.36,1);
}

/* heading-font / body-font hooks for Tweaks */
:root[data-hfont="cormorant"]{ --serif:"Cormorant Garamond", Georgia, serif; }
:root[data-hfont="libre"]    { --serif:"Libre Caslon Text", Georgia, serif; }
:root[data-bfont="hanken"]   { --sans:"Hanken Grotesk", system-ui, sans-serif; }
:root[data-bfont="spline"]   { --sans:"Spline Sans", system-ui, sans-serif; }

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink-body);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.72;
  font-weight:400;
  letter-spacing:0.005em;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* ---------- Type primitives ---------- */
.display{
  font-family:var(--serif);
  font-weight:400;
  color:var(--ink);
  line-height:1.04;
  letter-spacing:-0.012em;
  margin:0;
}
.display em{ font-style:italic; color:var(--accent); }

/* Trademark symbol — half-size, raised */
.tm{ font-size:0.5em; vertical-align:0.42em; line-height:0; letter-spacing:0; }

h1.display{ font-size:clamp(46px, 6.6vw, 102px); }
h2.display{ font-size:clamp(33px, 4.4vw, 62px); line-height:1.08; }
h3.display{ font-size:clamp(25px, 2.6vw, 38px); line-height:1.14; }

.label{
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.26em;
  color:var(--accent);
  margin:0;
}
.label--mute{ color:var(--ink-mute); }

.lede{
  font-size:clamp(18px,1.5vw,21px);
  line-height:1.62;
  color:var(--ink-body);
  font-weight:400;
  max-width:60ch;
}
p.body{ max-width:58ch; }
p.body + p.body{ margin-top:1.1em; }

.serif-quote{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  color:var(--ink);
  line-height:1.32;
  letter-spacing:-0.01em;
}

/* ---------- Links / buttons ---------- */
.cta{
  display:inline-flex; align-items:center; gap:0.7em;
  font-family:var(--sans); font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.2em;
  padding:17px 30px;
  background:#0a0a09; color:var(--ivory);
  border:1px solid #0a0a09;
  transition:background .5s var(--ease), color .5s var(--ease);
}
.cta:hover{ background:transparent; color:#0a0a09; }
.cta--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.cta--ghost:hover{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }
.cta--inv{ background:var(--ivory); color:var(--ink); border-color:var(--ivory); }
.cta--inv:hover{ background:transparent; color:var(--ivory); }

.tlink{
  display:inline-flex; align-items:center; gap:0.65em;
  font-family:var(--sans); font-size:11.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.2em;
  color:var(--ink);
  padding-bottom:5px;
  border-bottom:1px solid var(--accent);
  transition:gap .45s var(--ease), color .45s var(--ease);
}
.tlink .arr{ transition:transform .45s var(--ease); }
.tlink:hover{ gap:1em; color:var(--accent); }
.tlink:hover .arr{ transform:translateX(4px); }

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--sec-pad); }
.divider{ height:1px; background:var(--line-soft); }

/* ---------- Image slots ---------- */
image-slot{
  --is-bg:#dfd9ca;
  width:100%; height:100%;
  background:linear-gradient(155deg,#e6e0d1,#cfc8b6 60%,#bdb6a4);
}
.slot-tone-sage image-slot{ background:linear-gradient(155deg,#aeb699,#8b9774 70%,#717c5b); }
.slot-tone-stone image-slot{ background:linear-gradient(155deg,#d2ccbc,#bdb6a4 70%,#a7a08e); }
.slot-tone-dark image-slot{ background:linear-gradient(155deg,#33392c,#262d20 80%,#1d231a); }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1.15s var(--ease), transform 1.15s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- Dark surfaces ---------- */
.surface-dark{ background:var(--charcoal); color:var(--stone-soft); }
.surface-dark .display{ color:var(--ivory); }
.surface-dark .display em{ color:var(--sage); }
.surface-dark .label{ color:var(--sage); }
.surface-dark .tlink{ color:var(--ivory); border-color:var(--sage); }
.surface-dark .tlink:hover{ color:var(--sage); }
.surface-forest{ background:var(--forest); color:#d8d8c8; }
.surface-forest .display{ color:var(--ivory); }
.surface-forest .label{ color:#bcc6a6; }
.surface-sand{ background:var(--ivory-2); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:22px var(--gutter);
  color:var(--ivory);
  background:#0a0a09;
  transition:background .6s var(--ease), color .6s var(--ease), padding .6s var(--ease), border-color .6s var(--ease);
  border-bottom:1px solid #000;
}
.nav.solid{
  background:#0a0a09;
  backdrop-filter:blur(14px) saturate(1.1);
  color:var(--ivory);
  padding-block:16px;
  border-bottom:1px solid #000;
}
.brand{ display:flex; flex-direction:column; line-height:1; }
.brand b{ font-family:var(--serif); font-weight:500; font-size:23px; letter-spacing:0.005em; }
.brand b span{ color:var(--accent-soft); }
.nav.solid .brand b span{ color:var(--accent); }
.brand small{
  font-family:var(--sans); font-size:9.5px; font-weight:600;
  letter-spacing:0.34em; text-transform:uppercase; margin-top:7px; opacity:.78;
}
.nav-links{ display:flex; flex-wrap:wrap; gap:6px clamp(13px,1.4vw,24px); max-width:62vw; }
.nav-links a{
  font-size:12px; font-weight:500; letter-spacing:0.02em; text-transform:none; white-space:nowrap;
  opacity:.9; position:relative; padding-block:4px;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:currentColor; transition:right .45s var(--ease);
}
.nav-links a:hover::after{ right:0; }

/* ---- Dropdown submenus ---- */
.nav-links .has-sub{ position:relative; display:inline-flex; align-items:center; }
.nav-links .has-sub > a .dd{ font-size:8px; opacity:.55; margin-left:5px; display:inline-block; transform:translateY(-1px); }
.subnav{
  position:absolute; top:100%; left:-14px; padding:12px 0; margin-top:8px;
  background:#0a0a09; border:1px solid rgba(243,239,229,0.12);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; z-index:70;
}
.nav-links .has-sub:hover .subnav,
.nav-links .has-sub:focus-within .subnav{ opacity:1; visibility:visible; transform:none; }
.subnav.mega{ display:grid; grid-template-columns:1fr 1fr; gap:0 10px; padding:14px 10px; min-width:460px; }
.subnav .sub-col{ display:flex; flex-direction:column; }
.subnav a{
  display:block; padding:9px 22px; font-size:12.5px; font-weight:500; letter-spacing:.01em;
  color:var(--ivory); white-space:nowrap; opacity:.82; text-transform:none;
  transition:opacity .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.subnav a::after{ display:none; }
.subnav a:hover{ opacity:1; color:var(--sage); background:rgba(243,239,229,0.05); }
.subnav .sub-head{
  display:block; padding:6px 22px 8px; font-size:9.5px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--sage); opacity:.85;
}
@media (max-width:980px){ .subnav{ display:none !important; } }
.nav-right{ display:flex; align-items:center; gap:22px; }
.nav-enquire{
  font-size:11.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
  padding:11px 22px; border:1px solid currentColor; transition:background .45s var(--ease), color .45s var(--ease);
}
.nav.solid .nav-enquire:hover{ background:var(--accent); color:var(--ivory); border-color:var(--accent); }
.nav:not(.solid) .nav-enquire:hover{ background:var(--ivory); color:var(--ink); }
.menu-btn{ display:none; background:none; border:0; color:inherit; cursor:pointer; }
@media (max-width:980px){
  .nav-links{ display:none; }
  .nav-enquire{ display:none; }
  .menu-btn{ display:flex; }
}

/* ============================================================
   MOBILE MENU DRAWER
   ============================================================ */

/* Hamburger button — three lines → X */
.menu-btn {
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: 4px;
  z-index: 80;
}
/* Rotate the SVG hamburger icon when open */
.menu-btn svg {
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.menu-btn.open svg {
  opacity: 0.7;
  transform: rotate(90deg);
}

/* Backdrop */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,10,9,0.55);
  z-index: 65;
  opacity: 0;
  transition: opacity .35s var(--ease);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.nav-overlay.open {
  display: block;
  opacity: 1;
}

/* Drawer panel */
.nav-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(320px, 88vw);
  background: #0a0a09;
  z-index: 70;
  display: flex;
  flex-direction: column;
  padding: 0 0 clamp(32px,5vh,56px);
  transform: translateX(100%);
  transition: transform .4s var(--ease);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-drawer.open {
  transform: translateX(0);
}

/* Drawer header row */
.nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--gutter);
  border-bottom: 1px solid rgba(243,239,229,0.1);
  flex-shrink: 0;
}
.nav-drawer-head .brand b { font-size: 20px; }
.nav-drawer-head .brand b span { color: var(--sage); }
.nav-drawer-head .brand small { opacity: .65; }

/* Close button inside drawer */
.nav-drawer-close {
  background: none;
  border: none;
  color: var(--ivory);
  cursor: pointer;
  padding: 6px;
  opacity: .7;
  transition: opacity .2s;
  flex-shrink: 0;
}
.nav-drawer-close:hover { opacity: 1; }
.nav-drawer-close svg { width: 20px; height: 20px; display: block; }

/* Nav links inside drawer */
.nav-drawer-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  overflow-y: auto;
}
.nav-drawer-links a {
  display: block;
  padding: 13px var(--gutter);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(243,239,229,0.85);
  border-bottom: 1px solid rgba(243,239,229,0.06);
  transition: color .25s var(--ease), background .25s var(--ease), padding-left .25s var(--ease);
  text-decoration: none;
}
.nav-drawer-links a:hover {
  color: var(--ivory);
  background: rgba(243,239,229,0.04);
  padding-left: calc(var(--gutter) + 6px);
}
.nav-drawer-links a.active {
  color: var(--sage);
}

/* Section label inside drawer */
.nav-drawer-links .drawer-section-label {
  display: block;
  padding: 20px var(--gutter) 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sage);
  opacity: .8;
}


/* Drawer accordion — has-sub groups */
.drawer-group { border-bottom: 1px solid rgba(243,239,229,0.06); }
.drawer-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px var(--gutter);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(243,239,229,0.85);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color .25s var(--ease), background .25s var(--ease);
  font-family: var(--sans);
}
.drawer-group-toggle:hover {
  color: var(--ivory);
  background: rgba(243,239,229,0.04);
}
.drawer-group-toggle.active-group {
  color: var(--sage);
}
.drawer-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform .3s var(--ease);
  opacity: .55;
}
.drawer-group.open .drawer-chevron {
  transform: rotate(180deg);
}
.drawer-sub {
  display: none;
  flex-direction: column;
  background: rgba(243,239,229,0.03);
  border-top: 1px solid rgba(243,239,229,0.05);
}
.drawer-group.open .drawer-sub {
  display: flex;
}
.drawer-sub .drawer-sub-head {
  display: block;
  padding: 14px var(--gutter) 4px calc(var(--gutter) + 14px);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sage);
  opacity: .8;
}
.drawer-sub a {
  padding: 11px var(--gutter) 11px calc(var(--gutter) + 14px) !important;
  font-size: 13.5px !important;
  border-bottom: 1px solid rgba(243,239,229,0.04) !important;
  color: rgba(243,239,229,0.7) !important;
}
.drawer-sub a:last-child { border-bottom: none !important; }
.drawer-sub a:hover {
  color: var(--ivory) !important;
  padding-left: calc(var(--gutter) + 20px) !important;
}

/* CTA at bottom of drawer */
.nav-drawer-foot {
  padding: 20px var(--gutter) 0;
  flex-shrink: 0;
}
.nav-drawer-foot .cta {
  width: 100%;
  justify-content: center;
  letter-spacing: .16em;
}

/* Prevent body scroll when drawer open */
body.nav-open {
  overflow: hidden;
}

/* Only show drawer infrastructure on mobile */
@media (min-width: 981px) {
  .nav-overlay,
  .nav-drawer { display: none !important; }
}


/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; height:100svh; min-height:640px; width:100%; overflow:hidden; }
.hero .slot-fill{ position:absolute; inset:0; }
.hero image-slot{ height:100%; }
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(28,32,24,.34) 0%, rgba(28,32,24,0) 30%, rgba(28,32,24,0) 52%, rgba(24,28,20,.62) 100%);
}
.hero-inner{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:200px var(--gutter) clamp(52px,8vh,96px);
  color:var(--ivory);
}
.hero-inner .label{ color:#cfd4be; }
.hero h1{ color:var(--ivory); margin:18px 0 0; max-width:14ch; }
.hero h1 em{ color:#c2cda6; }
.hero-lede{ color:rgba(243,239,229,.9); max-width:46ch; margin:24px 0 30px; font-size:clamp(16px,1.3vw,19px); line-height:1.6; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; }
.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3;
  font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:rgba(243,239,229,.7);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scroll-cue .line{ width:1px; height:46px; background:linear-gradient(rgba(243,239,229,.7),transparent); animation:cue 2.6s var(--ease) infinite; }
@keyframes cue{ 0%{transform:scaleY(.2);transform-origin:top;opacity:0;} 40%{opacity:1;} 100%{transform:scaleY(1);transform-origin:top;opacity:0;} }

/* ============================================================
   ESSENCE / STATEMENT
   ============================================================ */
.statement{ max-width:60ch; margin-inline:auto; text-align:center; }
.statement .label{ color:var(--accent); margin-bottom:30px; }
.statement h2{ margin-bottom:34px; }
.statement .lede{ margin-inline:auto; }
.essence-words{
  display:flex; justify-content:center; flex-wrap:wrap; gap:0 .5em;
  font-family:var(--serif); font-size:clamp(20px,2vw,30px); color:var(--accent);
  margin-top:46px; letter-spacing:.01em;
}
.essence-words span{ position:relative; padding:0 .55em; }
.essence-words span:not(:last-child)::after{ content:"·"; position:absolute; right:-.12em; color:var(--stone); }

/* ============================================================
   TWO-COLUMN EDITORIAL
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,120px); align-items:center; }
.split.top{ align-items:start; }
.split .col-head{ margin-bottom:26px; }
.split .stack > * + *{ margin-top:22px; }
.def-list{ list-style:none; margin:0; padding:0; }
.def-list li{
  display:flex; gap:18px; align-items:baseline;
  padding:18px 0; border-top:1px solid var(--line-soft);
  font-family:var(--serif); font-size:clamp(19px,1.8vw,26px); color:var(--ink);
}
.def-list li:last-child{ border-bottom:1px solid var(--line-soft); }
.def-list .n{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.18em; color:var(--accent); min-width:34px; }
@media (max-width:880px){ .split{ grid-template-columns:1fr; gap:40px; } }

/* ============================================================
   EXPERIENCE ROWS
   ============================================================ */
.exp-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,96px); align-items:center; }
.exp-row + .exp-row{ margin-top:clamp(64px,9vh,128px); }
.exp-row.flip .exp-media{ order:2; }
.exp-media{ aspect-ratio:4/5; }
.exp-num{ font-family:var(--serif); font-size:clamp(40px,5vw,76px); color:var(--stone); line-height:1; }
.exp-body h3{ margin:18px 0 20px; }
.exp-body .tlink{ margin-top:30px; }
@media (max-width:880px){
  .exp-row{ grid-template-columns:1fr; gap:30px; }
  .exp-row.flip .exp-media{ order:0; }
  .exp-media{ aspect-ratio:3/2; }
}

/* ============================================================
   TEAMS / specialist + areas lists
   ============================================================ */
.list-cols{ columns:3; column-gap:48px; }
.list-cols li{
  list-style:none; break-inside:avoid; padding:13px 0; border-top:1px solid var(--line-soft);
  font-family:var(--serif); font-size:clamp(17px,1.4vw,21px); color:var(--ink);
}
.list-cols{ padding:0; margin:0; }
@media (max-width:820px){ .list-cols{ columns:2; } }
@media (max-width:520px){ .list-cols{ columns:1; } }

/* ============================================================
   FEATURE (resort / living) — full-bleed split
   ============================================================ */
.feature{ display:grid; grid-template-columns:1.05fr .95fr; min-height:84vh; }
.feature.flip{ grid-template-columns:.95fr 1.05fr; }
.feature-media{ position:relative; min-height:60vh; }
.feature-media image-slot{ height:100%; }
.feature-text{ display:flex; align-items:center; padding:clamp(48px,7vw,110px); }
.feature-text .inner{ max-width:48ch; }
.feature-text h2{ margin:20px 0 26px; }
.feat-list{ list-style:none; margin:30px 0 36px; padding:0; columns:2; column-gap:34px; }
.feat-list li{
  break-inside:avoid; padding:11px 0; border-top:1px solid var(--line);
  font-size:14.5px; line-height:1.4; color:var(--ink-body);
}
.surface-dark .feat-list li, .surface-forest .feat-list li{ border-color:var(--line-inv); color:inherit; }
@media (max-width:980px){
  .feature, .feature.flip{ grid-template-columns:1fr; }
  .feature.flip .feature-media{ order:0; }
  .feature-media{ min-height:56vh; }
  .feat-list{ columns:1; }
}

/* ============================================================
   SIGNATURE SERVICES
   ============================================================ */
.svc{ border-top:1px solid var(--line); }
.svc-item{
  display:grid; grid-template-columns:1fr 1.1fr auto; gap:30px; align-items:baseline;
  padding:30px 0; border-bottom:1px solid var(--line); color:inherit;
  transition:padding-left .5s var(--ease), background .5s var(--ease);
}
.svc-item:hover{ padding-left:18px; background:linear-gradient(90deg, rgba(142,154,120,.07), transparent 70%); }
.svc-item .num{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.16em; color:var(--accent); }
.svc-item h3{ font-size:clamp(21px,2vw,30px); transition:color .4s var(--ease); }
.svc-item:hover h3{ color:var(--accent); }
.svc-item p{ margin:0; font-size:15px; line-height:1.55; color:var(--ink-body); max-width:46ch; }
.svc-item .go{ align-self:center; justify-self:end; color:var(--accent); font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; opacity:0; transform:translateX(-8px); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.svc-item:hover .go{ opacity:1; transform:none; }
@media (max-width:760px){
  .svc-item{ grid-template-columns:1fr auto; gap:8px 16px; padding-block:24px; }
  .svc-item .go{ grid-row:1; grid-column:2; opacity:1; transform:none; }
}

/* ============================================================
   PILLARS
   ============================================================ */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-inv); border:1px solid var(--line-inv); }
.pillar{ background:var(--forest); padding:clamp(34px,3vw,52px); }
.pillar .pn{ font-family:var(--serif); font-size:14px; color:var(--sage); letter-spacing:.04em; }
.pillar h3{ font-size:clamp(20px,1.8vw,27px); color:var(--ivory); margin:22px 0 16px; }
.pillar p{ margin:0; font-size:14.5px; line-height:1.6; color:#c5cbb4; }
@media (max-width:860px){ .pillars{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pillars{ grid-template-columns:1fr; } }

/* pillars mood (tweakable) */
:root[data-pillars="charcoal"] .pillar{ background:var(--charcoal); }
:root[data-pillars="light"] .pillars{ background:var(--line); border-color:var(--line); }
:root[data-pillars="light"] .pillar{ background:var(--ivory-2); }
:root[data-pillars="light"] .pillar h3{ color:var(--ink); }
:root[data-pillars="light"] .pillar p{ color:var(--ink-body); }
:root[data-pillars="light"] .pillar .pn{ color:var(--accent); }

/* ============================================================
   CLOSING + FOOTER
   ============================================================ */
.closing{ text-align:center; }
.closing h2{ margin:0 auto 36px; max-width:18ch; }
.closing .actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:16px; }

.footer{ background:#0a0a09; color:var(--stone-soft); padding-block:clamp(64px,8vh,100px) 36px; }
.footer .ftop{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:48px; }
.footer .brand b{ color:var(--ivory); }
.footer .brand b span{ color:var(--sage); }
.footer h5{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--sage); margin:0 0 20px; font-weight:600; }
.footer ul{ list-style:none; margin:0; padding:0; }
.footer ul li{ margin-bottom:13px; }
.footer ul a{ font-size:14px; color:#cfcabb; transition:color .4s var(--ease); }
.footer ul a:hover{ color:var(--ivory); }
.footer p.fdesc{ font-size:14px; color:#b6b2a4; max-width:30ch; margin:18px 0 0; }
.news{ display:flex; border:1px solid var(--line-inv); margin-top:18px; }
.news input{ flex:1; background:none; border:0; color:var(--ivory); padding:14px 16px; font-family:var(--sans); font-size:14px; outline:none; }
.news input::placeholder{ color:#9b9789; }
.news button{ background:var(--sage); border:0; color:var(--charcoal); padding:0 18px; cursor:pointer; font-size:16px; }
.fbot{ display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:clamp(48px,7vh,84px); padding-top:28px; border-top:1px solid var(--line-inv); font-size:12.5px; color:#9b9789; flex-wrap:wrap; }
.fbot .links{ display:flex; gap:28px; }
@media (max-width:860px){ .footer .ftop{ grid-template-columns:1fr 1fr; gap:36px; } }
@media (max-width:520px){ .footer .ftop{ grid-template-columns:1fr; } }

/* ============================================================
   SERVICE SUBPAGE
   ============================================================ */
body.subpage{ padding-top:0; }
.sp-hero{ padding-top:clamp(124px,17vh,196px); padding-bottom:clamp(56px,8vh,104px); }
.sp-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,100px); align-items:center; }
.sp-crumb{ display:flex; gap:12px; align-items:center; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); }
.sp-crumb a{ color:var(--ink-mute); transition:color .4s var(--ease); }
.sp-crumb a:hover{ color:var(--accent); }
.sp-crumb .sep{ color:var(--stone); }
.sp-crumb .cur{ color:var(--accent); }
.sp-hero h1{ margin:24px 0 26px; max-width:13ch; }
.sp-hero .lede{ margin-bottom:34px; }
.sp-media{ aspect-ratio:4/5; }
@media (max-width:880px){ .sp-grid{ grid-template-columns:1fr; gap:36px; } .sp-media{ aspect-ratio:3/2; } }

.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,3vw,52px); }
.step .sn{ font-family:var(--serif); font-size:clamp(34px,4vw,58px); color:var(--stone); line-height:1; }
.step h4{ font-family:var(--serif); font-weight:400; font-size:clamp(19px,1.7vw,25px); color:var(--ink); margin:16px 0 12px; }
.step p{ margin:0; font-size:14.5px; line-height:1.62; color:var(--ink-body); max-width:34ch; }
@media (max-width:760px){ .steps{ grid-template-columns:1fr; gap:30px; } }

.incl{ list-style:none; margin:0; padding:0; columns:2; column-gap:52px; }
.incl li{ break-inside:avoid; display:flex; gap:15px; align-items:baseline; padding:16px 0; border-top:1px solid var(--line-soft); font-family:var(--serif); font-size:clamp(17px,1.4vw,21px); color:var(--ink); }
.incl li::before{ content:""; flex:none; width:6px; height:6px; margin-top:.55em; border:1px solid var(--accent); border-radius:50%; }
@media (max-width:620px){ .incl{ columns:1; } }

.related{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line); }
.related a{ background:var(--ivory); padding:32px clamp(24px,2.4vw,42px) 30px; display:flex; flex-direction:column; gap:14px; min-height:200px; transition:background .5s var(--ease); }
.related a:hover{ background:var(--ivory-2); }
.related .rn{ font-size:12px; font-weight:600; letter-spacing:.16em; color:var(--accent); }
.related h4{ font-family:var(--serif); font-weight:400; font-size:clamp(18px,1.5vw,24px); color:var(--ink); margin:0; line-height:1.16; }
.related .arr{ color:var(--accent); margin-top:auto; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.surface-sand .related a{ background:var(--ivory-2); }
.surface-sand .related a:hover{ background:var(--ivory); }
@media (max-width:760px){ .related{ grid-template-columns:1fr; } }

.cta-band{ text-align:center; }
.cta-band h2{ max-width:20ch; margin:0 auto 32px; }
.cta-band .actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:16px; }

/* ============================================================
   RESORT COLLECTION GRID
   ============================================================ */
.resort-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,2.6vw,44px); }
.resort-card{ display:flex; flex-direction:column; }
.resort-card .rc-media{ aspect-ratio:4/5; margin-bottom:20px; overflow:hidden; }
.resort-card .rc-media image-slot{ height:100%; transition:transform 1.2s var(--ease); }
.resort-card:hover .rc-media image-slot{ transform:scale(1.04); }
.resort-card .rc-tag{ display:block; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.resort-card .rc-name{ font-family:var(--serif); font-weight:400; font-size:clamp(20px,1.7vw,27px); color:var(--ink); line-height:1.12; }
.resort-card p{ margin:11px 0 0; font-size:14px; line-height:1.56; color:var(--ink-body); max-width:34ch; }
@media (max-width:860px){ .resort-grid{ grid-template-columns:1fr 1fr; gap:clamp(22px,4vw,36px); } }
@media (max-width:540px){ .resort-grid{ grid-template-columns:1fr; } }

/* ============================================================
   GLOBAL REGIONS STRIP
   ============================================================ */
.regions{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.region{ padding:32px clamp(8px,1.4vw,22px) 30px 0; border-bottom:1px solid var(--line); }
.region .rdot{ display:inline-block; width:7px; height:7px; border:1px solid var(--accent); border-radius:50%; margin-bottom:18px; }
.region .rname{ font-family:var(--serif); font-weight:400; font-size:clamp(21px,1.9vw,29px); color:var(--ink); line-height:1.1; }
@media (max-width:760px){ .regions{ grid-template-columns:1fr 1fr; } }
@media (max-width:440px){ .regions{ grid-template-columns:1fr; } }

/* ============================================================
   ENQUIRY FORM
   ============================================================ */
.enq-grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(44px,7vw,118px); align-items:start; }
.enq-aside{ position:sticky; top:120px; }
.enq-aside .lede{ margin-top:22px; }
.enq-next{ list-style:none; margin:38px 0 0; padding:0; }
.enq-next li{ display:flex; gap:20px; padding:20px 0; border-top:1px solid var(--line-soft); }
.enq-next li:last-child{ border-bottom:1px solid var(--line-soft); }
.enq-next h4{ font-family:var(--serif); font-weight:400; font-size:clamp(18px,1.5vw,22px); color:var(--ink); margin:0 0 4px; }
.enq-next p{ margin:0; font-size:14px; line-height:1.55; color:var(--ink-body); }
.enq-contact{ margin-top:38px; display:flex; flex-direction:column; gap:6px; }
.enq-contact .label{ margin-bottom:10px; }
.enq-contact a{ font-family:var(--serif); font-size:clamp(17px,1.4vw,20px); color:var(--ink); transition:color .4s var(--ease); }
.enq-contact a:hover{ color:var(--accent); }

.enq-form{ }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,2.6vw,36px) clamp(26px,2.8vw,44px); }
.field{ display:flex; flex-direction:column; }
.field.full{ grid-column:1 / -1; }
.field > .label{ margin-bottom:11px; }
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:16px; color:var(--ink); background:transparent;
  border:0; border-bottom:1px solid var(--line); padding:11px 2px; outline:none; width:100%;
  transition:border-color .45s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--stone); }
.field input:focus, .field select:focus, .field textarea:focus{ border-bottom-color:var(--accent); }
.field textarea{ resize:vertical; min-height:84px; line-height:1.62; }
.field select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2339442D' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 2px center;
}
.field select:invalid{ color:var(--stone); }

.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ position:relative; }
.chip input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.chip label{
  display:inline-flex; padding:11px 20px; border:1px solid var(--line);
  font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-body); cursor:pointer; transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.chip input:checked + label{ background:var(--accent); color:var(--ivory); border-color:var(--accent); }
.chip input:focus-visible + label{ outline:2px solid var(--accent); outline-offset:2px; }

.consent{ display:flex; gap:14px; align-items:flex-start; margin-top:4px; }
.consent input{ flex:none; width:17px; height:17px; margin-top:3px; accent-color:var(--accent); }
.consent label{ font-size:13px; line-height:1.6; color:var(--ink-mute); }
.consent a{ color:var(--accent); border-bottom:1px solid var(--line); }

.enq-actions{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-top:8px; }
.enq-actions .cta{ border:0; cursor:pointer; }
.enq-note{ font-size:12.5px; color:var(--ink-mute); margin:0; }

.enq-form .form-grid, .enq-form .enq-actions{ transition:opacity .5s var(--ease); }
.enq-thanks{
  display:none; padding:clamp(36px,5vw,60px); border:1px solid var(--line);
  background:var(--ivory-2); text-align:left;
}
.enq-thanks.show{ display:block; animation:enqIn .7s var(--ease) both; }
@keyframes enqIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.enq-thanks .label{ margin-bottom:18px; }
.enq-thanks h3{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,2.6vw,38px); color:var(--ink); margin:0 0 16px; line-height:1.1; }
.enq-thanks p{ margin:0; font-size:15.5px; line-height:1.65; color:var(--ink-body); max-width:46ch; }

@media (max-width:900px){
  .enq-grid{ grid-template-columns:1fr; gap:54px; }
  .enq-aside{ position:static; }
}
@media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } }

/* ============================================================
   HERO ENTRANCE
   ============================================================ */
.hero .slot-fill{ animation:kenburns 22s ease-out forwards; transform-origin:60% 40%; }
@keyframes kenburns{ from{ transform:scale(1.07); } to{ transform:scale(1); } }
.hero-inner > *{ opacity:0; transform:translateY(22px); animation:heroRise 1.15s var(--ease) forwards; }
.hero-inner > *:nth-child(1){ animation-delay:.25s; }
.hero-inner > *:nth-child(2){ animation-delay:.40s; }
.hero-inner > *:nth-child(3){ animation-delay:.62s; }
.hero-inner > *:nth-child(4){ animation-delay:.82s; }
@keyframes heroRise{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .hero .slot-fill{ animation:none; }
  .hero-inner > *{ opacity:1; transform:none; animation:none; }
}

/* ============================================================
   WITHOUT BORDERS — flagship
   ============================================================ */
.borders{ position:relative; background:linear-gradient(165deg,#2f3826 0%,#262e1f 55%,#1d231a 100%); color:#cfd3c2; overflow:hidden; }
.borders::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(120% 80% at 80% 0%, rgba(142,154,120,.16), transparent 60%);
}
.borders .wrap{ position:relative; z-index:2; }
.borders .label{ color:var(--sage); }
.borders h2{ color:var(--ivory); }
.borders h2 em{ color:#bcc6a6; }
.borders .lede{ color:#c5cab6; }

.route-band{ position:relative; margin:clamp(46px,7vh,84px) 0 0; }
.route-svg{ width:100%; height:clamp(90px,11vw,140px); display:block; overflow:visible; }
.route-path{ fill:none; stroke:var(--sage); stroke-width:1.4; stroke-dasharray:1400; stroke-dashoffset:1400; opacity:.55; }
.borders .reveal.in .route-path{ animation:draw 2.6s var(--ease) .2s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.route-dot{ fill:var(--ivory); opacity:0; transform-box:fill-box; transform-origin:center; }
.borders .reveal.in .route-dot{ animation:dotIn .6s var(--ease) forwards; }
.borders .reveal.in .route-dot.d-1{ animation-delay:.5s; }
.borders .reveal.in .route-dot.d-2{ animation-delay:1.4s; }
.borders .reveal.in .route-dot.d-3{ animation-delay:2.3s; }
.route-ring{ fill:none; stroke:var(--sage); stroke-width:1; opacity:0; }
.borders .reveal.in .route-ring{ animation:ringIn 1.6s var(--ease) forwards; }
.borders .reveal.in .route-ring.d-1{ animation-delay:.5s; }
.borders .reveal.in .route-ring.d-2{ animation-delay:1.4s; }
.borders .reveal.in .route-ring.d-3{ animation-delay:2.3s; }
@keyframes dotIn{ from{ opacity:0; transform:scale(0); } to{ opacity:1; transform:scale(1); } }
@keyframes ringIn{ 0%{ opacity:0; r:3; } 40%{ opacity:.7; } 100%{ opacity:.2; r:13; } }

.triptych{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px); margin-top:14px; }
.tnode .tname{ font-family:var(--serif); font-size:clamp(22px,2.2vw,32px); color:var(--ivory); letter-spacing:.02em; }
.tnode .tname small{ display:block; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--sage); margin-bottom:10px; }
.tnode .tmedia{ aspect-ratio:3/4; margin:20px 0 16px; }
.tnode .tcap{ font-size:14px; line-height:1.55; color:#aeb39d; margin:0; max-width:30ch; }
@media (max-width:760px){ .triptych{ grid-template-columns:1fr; gap:34px; } .tnode .tmedia{ aspect-ratio:16/10; } .route-band{ display:none; } }

.care-line{
  margin:clamp(48px,7vh,84px) auto 0; max-width:74ch; text-align:center;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 0;
  font-family:var(--serif); font-style:italic; font-size:clamp(17px,1.5vw,22px); color:#c8cdba; line-height:1.5;
}
.care-line span{ padding:0 .85em; position:relative; }
.care-line span:not(:last-child)::after{ content:"·"; position:absolute; right:-.1em; color:var(--sage); }

.borders-head{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,80px); align-items:end; }
@media (max-width:880px){ .borders-head{ grid-template-columns:1fr; gap:24px; align-items:start; } }

/* ============================================================
   MEMBERSHIP BENEFITS
   ============================================================ */
.benefits{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 clamp(26px,3vw,56px); }
.benefit{ padding:30px 0 6px; border-top:1px solid var(--line); }
.benefit h3{ font-family:var(--serif); font-weight:400; font-size:clamp(19px,1.5vw,25px); color:var(--ink); margin:0 0 12px; line-height:1.14; }
.benefit p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-body); max-width:30ch; }
@media (max-width:900px){ .benefits{ grid-template-columns:1fr 1fr; gap:0 clamp(24px,4vw,48px); } }
@media (max-width:520px){ .benefits{ grid-template-columns:1fr; } }

/* ============================================================
   PHILOSOPHY — background image
   ============================================================ */
.philosophy{ position:relative; overflow:hidden; min-height:72vh; display:flex; align-items:center; }
.philosophy .slot-fill{ position:absolute; inset:0; z-index:0; }
.philosophy .slot-fill image-slot{ height:100%; }
.philosophy::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(115deg, rgba(22,26,18,.86) 0%, rgba(22,26,18,.66) 45%, rgba(22,26,18,.42) 100%); }
.philosophy > .wrap{ position:relative; z-index:2; width:100%; }
.philosophy .label{ color:#bcc6a6; }
.philosophy .display{ color:var(--ivory); }
.philosophy .display em{ color:#c2cda6; }
.philosophy .def-list li{ color:var(--ivory); border-color:var(--line-inv); }
.philosophy .def-list li:last-child{ border-color:var(--line-inv); }

/* ---- pillars: 7th spans full width ---- */
.pillar.wide{ grid-column:1 / -1; display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,72px); align-items:center; }
.pillar.wide h3{ margin:0; }
.pillar.wide p{ max-width:54ch; }
@media (max-width:860px){ .pillar.wide{ grid-template-columns:1fr; gap:14px; } }