/* ============================================================
   HUB26 — recreation
   Self-contained styling, local placeholder imagery via CSS.
   ============================================================ */

:root{
  --ink:#15171c;          /* near-black charcoal */
  --ink-2:#1d2026;
  --ink-3:#262a32;
  --paper:#f5f3ee;        /* warm off-white */
  --paper-2:#ffffff;
  --muted:#8b9099;
  --line:rgba(255,255,255,.10);
  --line-dark:rgba(0,0,0,.10);
  --gold:#c9a15a;         /* warm accent */
  --gold-2:#e0c184;
  --teal:#3a7d77;         /* wellbeing accent */
  --radius:14px;
  --radius-lg:22px;
  --maxw:1200px;
  --shadow:0 18px 50px -20px rgba(0,0,0,.45);
  --ease:cubic-bezier(.22,.61,.36,1);
  font-synthesis:none;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Helvetica Neue",Arial,system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.01em;
  margin:0 0 .4em;
}
h1{font-size:clamp(2.6rem,7vw,5.5rem);text-transform:uppercase}
h2{font-size:clamp(1.9rem,4vw,3rem)}
h3{font-size:clamp(1.2rem,2vw,1.6rem)}
p{margin:0 0 1.1em}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.32em;
  font-size:.72rem;
  font-weight:700;
  color:var(--gold);
  margin-bottom:1rem;
}
.center{text-align:center}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.lead{font-size:1.15rem;color:#4a4f57;max-width:62ch}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.95em 1.9em;border-radius:999px;
  font-weight:700;font-size:.95rem;letter-spacing:.02em;
  text-transform:uppercase;cursor:pointer;border:none;
  transition:transform .3s var(--ease),background .3s,color .3s;
}
.btn:hover{transform:translateY(-2px)}
.btn--gold{background:var(--gold);color:#1a1407}
.btn--gold:hover{background:var(--gold-2)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:var(--ink-3)}
.btn--ghost{background:transparent;border:1.5px solid currentColor}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:.85rem;color:var(--ink);
  border-bottom:2px solid var(--gold);padding-bottom:3px;
}
.link-arrow .arr{transition:transform .3s var(--ease)}
.link-arrow:hover .arr{transform:translateX(5px)}

/* ---------- Header / Nav ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .4s,box-shadow .4s,padding .4s;
  padding:18px 0;
}
.site-header.scrolled{
  background:rgba(21,23,28,.92);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line);
  padding:10px 0;
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1280px;margin:0 auto;padding:0 24px;
}
.brand{display:flex;align-items:center;gap:.6em;color:#fff}
.brand .logo{
  font-weight:900;font-size:1.5rem;letter-spacing:-.02em;
  display:flex;align-items:baseline;
}
.brand .logo b{color:var(--gold)}
.brand .tag{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

.nav-links{
  display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;
}
.nav-links>li{position:relative}
.nav-links>li>a{
  display:block;padding:.7em .85em;color:#fff;font-size:.82rem;
  font-weight:600;text-transform:uppercase;letter-spacing:.05em;opacity:.92;
  transition:color .2s,opacity .2s;
}
.nav-links>li>a:hover{color:var(--gold-2);opacity:1}
.has-sub>a::after{content:"⌄";margin-left:.4em;font-size:.8em;opacity:.7}

.submenu{
  position:absolute;top:100%;left:0;min-width:230px;
  background:rgba(28,31,38,.98);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:12px;
  padding:8px;list-style:none;margin:8px 0 0;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:.25s var(--ease);box-shadow:var(--shadow);
}
.has-sub:hover .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{
  display:block;padding:.6em .8em;border-radius:8px;color:#dfe1e6;
  font-size:.82rem;font-weight:500;transition:.2s;
}
.submenu a:hover{background:rgba(255,255,255,.06);color:var(--gold-2)}

.nav-cta{margin-left:10px}
.burger{
  display:none;background:none;border:none;cursor:pointer;padding:8px;
  flex-direction:column;gap:5px;
}
.burger span{width:26px;height:2px;background:#fff;transition:.3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile drawer */
.mobile-nav{
  position:fixed;inset:0;z-index:99;background:var(--ink);
  padding:90px 28px 40px;overflow-y:auto;
  transform:translateX(100%);transition:transform .4s var(--ease);
}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav a{display:block;color:#fff;padding:.6em 0;font-size:1.1rem;border-bottom:1px solid var(--line)}
.mobile-nav .sub a{font-size:.95rem;color:var(--muted);padding-left:1em;border:none}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  color:#fff;overflow:hidden;
}
.hero__media{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(120deg,#14161b,#1f242c 45%,#2c333c);
}
.hero__media::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(40% 50% at 20% 20%,rgba(201,161,90,.28),transparent 60%),
    radial-gradient(45% 55% at 85% 75%,rgba(58,125,119,.30),transparent 60%);
  animation:drift 16s ease-in-out infinite alternate;
}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,16,20,.55),rgba(15,16,20,.30) 40%,rgba(15,16,20,.85));
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-3%,2%,0) scale(1.08)}
}
.hero__inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%}
.hero__inner .eyebrow{color:var(--gold-2)}
.hero h1{margin:0;text-shadow:0 4px 30px rgba(0,0,0,.4)}
.hero__sub{
  margin-top:1.2rem;font-size:clamp(1rem,1.6vw,1.3rem);
  letter-spacing:.18em;text-transform:uppercase;font-weight:300;color:#e7e8ea;
}
.hero--page{min-height:62vh}
.hero--page h1{font-size:clamp(2.4rem,6vw,4.5rem)}
.scrolldown{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  z-index:2;color:#fff;font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.85;
}
.scrolldown .mouse{width:24px;height:38px;border:2px solid rgba(255,255,255,.6);border-radius:14px;position:relative}
.scrolldown .mouse::after{content:"";position:absolute;left:50%;top:8px;width:3px;height:7px;background:#fff;border-radius:2px;transform:translateX(-50%);animation:scrolly 1.6s infinite}
@keyframes scrolly{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

/* ---------- Sections ---------- */
section{position:relative}
.section{padding:clamp(64px,9vw,130px) 0}
.section--dark{background:var(--ink);color:#fff}
.section--ink2{background:var(--ink-2);color:#fff}
.section--paper2{background:var(--paper-2)}
.section--dark .lead,.section--ink2 .lead{color:#b9bdc4}
.section--dark .eyebrow{color:var(--gold-2)}

.split{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center;
}
.split--reverse .split__media{order:2}
.split__body h2{margin-bottom:.5em}

/* ---------- Placeholder media ---------- */
.ph{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(135deg,var(--c1,#2a2f37),var(--c2,#454d59));
  min-height:300px;display:flex;align-items:flex-end;
  box-shadow:var(--shadow);
}
.ph::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 80% at 80% 10%,rgba(255,255,255,.12),transparent 60%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 14px,transparent 14px 28px);
}
.ph__label{
  position:relative;z-index:1;margin:0;padding:14px 18px;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.85);font-weight:600;
}
.ph--tall{min-height:480px}
.ph--wide{min-height:340px}

/* hue variants */
.c-office{--c1:#2b3440;--c2:#465a6b}
.c-meeting{--c1:#3a2f2a;--c2:#6b5645}
.c-lounge{--c1:#2c2a3a;--c2:#544d6b}
.c-gym{--c1:#27332f;--c2:#3f6b5c}
.c-spa{--c1:#2a3338;--c2:#4a6b6b}
.c-food{--c1:#3a2a2a;--c2:#7a4f43}
.c-terrace{--c1:#33302a;--c2:#7a6b45}
.c-net{--c1:#262d3a;--c2:#455a7a}

/* ---------- Cards grid (spaces) ---------- */
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;
}
.card{
  position:relative;border-radius:var(--radius);overflow:hidden;
  min-height:340px;display:flex;align-items:flex-end;
  color:#fff;box-shadow:var(--shadow);
  background:linear-gradient(135deg,var(--c1,#2a2f37),var(--c2,#454d59));
  transition:transform .45s var(--ease);
}
.card::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 14px,transparent 14px 28px)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.78))}
.card:hover{transform:translateY(-8px)}
.card__body{position:relative;z-index:2;padding:26px}
.card__body h3{margin:0 0 .4em;text-transform:uppercase}
.card__body .more{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2);font-weight:700}

/* ---------- Mosaic gallery ---------- */
.mosaic{
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:180px;gap:14px;
}
.mosaic .ph{min-height:auto;height:100%}
.mosaic .span2{grid-column:span 2}
.mosaic .row2{grid-row:span 2}

/* ---------- Feature trio ---------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.feature .ph{min-height:230px;margin-bottom:22px}
.feature h3{margin-bottom:.4em}
.feature p{color:#4a4f57;font-size:.98rem}
.section--dark .feature p,.section--ink2 .feature p{color:#b3b8c0}

/* ---------- Membership tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.tier{
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:34px 28px;display:flex;flex-direction:column;color:#fff;
}
.tier--featured{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),var(--shadow);transform:translateY(-8px)}
.tier__name{text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;color:var(--gold-2);font-weight:700}
.tier__price{font-size:2.6rem;font-weight:800;margin:.2em 0 .1em}
.tier__price span{font-size:.95rem;color:var(--muted);font-weight:500}
.tier ul{list-style:none;margin:18px 0 26px;padding:0;flex:1}
.tier li{padding:.5em 0;border-bottom:1px solid var(--line);font-size:.92rem;color:#cfd2d8;display:flex;gap:.6em}
.tier li::before{content:"✓";color:var(--gold);font-weight:800}
.tier .btn{width:100%;justify-content:center}

/* ---------- Testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.quote{
  background:var(--paper-2);border:1px solid var(--line-dark);border-radius:var(--radius);
  padding:30px;box-shadow:0 10px 30px -20px rgba(0,0,0,.3);
}
.quote p{font-style:italic;color:#3c4148}
.quote .who{font-style:normal;font-weight:700;color:var(--ink);margin:0}
.quote .org{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:700}
.section--dark .quote{background:var(--ink-2);border-color:var(--line)}
.section--dark .quote p{color:#cfd2d8}
.section--dark .quote .who{color:#fff}

/* ---------- Team ---------- */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px}
.member{text-align:center}
.member .avatar{
  width:100%;aspect-ratio:1;border-radius:50%;margin-bottom:14px;
  background:linear-gradient(135deg,var(--c1,#2a2f37),var(--c2,#465a6b));
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;font-weight:800;color:rgba(255,255,255,.5);
  box-shadow:var(--shadow);
}
.member h4{margin:0;font-size:1.05rem}
.member span{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.section--dark .member span{color:var(--gold-2)}
.section--dark .member h4{color:#fff}

/* ---------- Blog ---------- */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.post{
  background:var(--paper-2);border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line-dark);box-shadow:0 10px 30px -22px rgba(0,0,0,.4);
  transition:transform .4s var(--ease);
}
.post:hover{transform:translateY(-6px)}
.post .ph{min-height:160px;border-radius:0}
.post__body{padding:20px}
.post .date{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700}
.post h4{margin:.5em 0 0;font-size:1.02rem;line-height:1.3}

/* ---------- Contact form ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1 / -1}
.field label{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#cfd2d8}
.field input,.field textarea,.field select{
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;
  padding:.85em 1em;color:#fff;font-size:1rem;font-family:inherit;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold)}
.field textarea{min-height:130px;resize:vertical}

.locations{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.location .ph{min-height:280px;margin-bottom:18px}
.location address{font-style:normal;color:#4a4f57;line-height:1.8}
.section--dark .location address{color:#b9bdc4}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(120deg,var(--ink),var(--ink-3));
  color:#fff;border-radius:var(--radius-lg);padding:clamp(36px,5vw,64px);
  text-align:center;box-shadow:var(--shadow);
}
.cta-band h2{margin-bottom:.4em}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat .num{font-size:clamp(2.2rem,4vw,3.4rem);font-weight:800;color:var(--gold)}
.stat .lbl{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- Footer ---------- */
.site-footer{background:#0e0f12;color:#cfd2d8;padding:70px 0 30px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.footer-brand .logo{font-weight:900;font-size:1.6rem;color:#fff}
.footer-brand .logo b{color:var(--gold)}
.footer address{font-style:normal;font-size:.9rem;line-height:1.8;margin:18px 0;color:var(--muted)}
.site-footer h5{text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:#fff;margin:0 0 16px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer ul li{margin-bottom:.7em}
.site-footer ul a{font-size:.9rem;color:var(--muted);transition:color .2s}
.site-footer ul a:hover{color:var(--gold-2)}
.socials{display:flex;gap:12px;margin-top:18px}
.socials a{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;
  color:#fff;transition:.25s;
}
.socials a:hover{background:var(--gold);color:#1a1407;border-color:var(--gold)}
.footer-bottom{
  margin-top:50px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:.8rem;color:var(--muted);
}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .nav-links,.nav-cta{display:none}
  .burger{display:flex}
  .split{grid-template-columns:1fr}
  .split--reverse .split__media{order:0}
  .features,.tiers,.quotes,.locations,.stats{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  .mosaic{grid-template-columns:1fr;grid-auto-rows:200px}
  .mosaic .span2{grid-column:auto}
}

/* ============================================================
   Real photo support (added when swapping in HUB26 images)
   ============================================================ */
.ph > img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;display:block;
}
.ph.has-img::before{display:none}
.ph.has-img .ph__label{display:none}

/* spaces cards: photo behind the dark gradient + text */
.card > .card__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;display:block;
}
.card::before{z-index:1}
.card::after{z-index:1}
.card__body{z-index:2}

/* team avatars */
.member .avatar{overflow:hidden}
.member .avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* page hero with a real photo */
.hero__media.has-photo{background-size:cover;background-position:center center}
.hero__media.has-photo::before{display:none}

/* ============================================================
   Legal pages, GDPR footer, cookie banner, form extras
   ============================================================ */
.legal{max-width:820px;margin:0 auto;padding:0 24px}
.legal h2{margin:1.7em 0 .4em;font-size:1.4rem;color:#fff}
.legal h3{margin:1.3em 0 .3em;font-size:1.05rem;color:var(--gold-2)}
.legal p,.legal li{color:#c4c8cf}
.legal a{color:var(--gold-2);text-decoration:underline}
.legal code{background:rgba(255,255,255,.08);padding:.1em .4em;border-radius:5px;font-size:.9em}
.legal em{color:#9aa0a8}

/* footer legal links + GDPR note */
.footer-legal a{color:var(--muted);transition:color .2s}
.footer-legal a:hover{color:var(--gold-2)}
.gdpr-note{
  max-width:var(--maxw);margin:18px auto 0;
  font-size:.76rem;color:#6b7079;line-height:1.6;
}

/* honeypot (hidden from real users) */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* consent checkbox row */
.consent__row{display:flex;gap:.6em;align-items:flex-start;font-size:.85rem;color:#c4c8cf;font-weight:400;text-transform:none;letter-spacing:0;cursor:pointer}
.consent__row input{margin-top:.2em;accent-color:var(--gold)}
.consent__row a{color:var(--gold-2);text-decoration:underline}

/* cookie banner */
.cookie-banner{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:300;
  background:rgba(20,22,27,.97);backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);color:#dfe1e6;
}
.cookie-banner[hidden]{display:none}
.cookie-banner__inner{
  max-width:var(--maxw);margin:0 auto;padding:18px 22px;
  display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.cookie-banner p{margin:0;font-size:.85rem;max-width:64ch;line-height:1.55}
.cookie-banner a{color:var(--gold-2);text-decoration:underline}
.cookie-banner__actions{display:flex;gap:10px;flex-shrink:0}
.cookie-banner .btn{padding:.65em 1.3em;font-size:.76rem}
.cookie-banner .btn--ghost{color:#fff}
@media (max-width:620px){
  .cookie-banner__inner{flex-direction:column;align-items:stretch}
  .cookie-banner__actions{justify-content:flex-end}
}