/* ─────────────────────────────────────────────────
   EIGHT Concierge — Landing Page
   Single viewport, no scroll, fully responsive
   ───────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black:   #080808;
  --mid:     #252525;
  --smoke:   #5a5a5a;
  --silver:  #999;
  --cream:   #ede9e3;
  --offwhite:#f8f6f3;
  --serif:   'Cormorant Garamond', Georgia, serif;
  --sans:    'DM Sans', 'Helvetica Neue', sans-serif;
  --ease:    cubic-bezier(0.4, 0, 0.2, 1);
  --px:      44px;   /* horizontal page padding */
}

html {
  font-size: 16px;
  height: 100%;
}

body {
  height: 100%;
  background: var(--black);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.65;
  overflow: hidden;          /* single viewport — no scroll */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── LOAD OVERLAY ──────────────────────────────── */
.intro-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--black);
  display: flex; align-items: center; justify-content: center;
  animation: overlayExit 0.7s 1.8s var(--ease) forwards;
  pointer-events: none;
}
.intro-logo-img {
  width: 120px;
  opacity: 0;
  animation: logoPulse 1.6s 0.2s var(--ease) forwards;
}

@keyframes logoPulse {
  0%   { opacity: 0; transform: scale(0.88); }
  40%  { opacity: 1; transform: scale(1); }
  80%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06); }
}
@keyframes overlayExit {
  to { opacity: 0; }
}

/* ── PAGE WRAPPER ──────────────────────────────── */
.page {
  position: relative;
  height: 100svh;          /* safe area aware */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── BACKGROUND ────────────────────────────────── */
.bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center;
  /* slow subtle drift — adds life without distraction */
  animation: bgDrift 30s ease-in-out infinite alternate;
}
@keyframes bgDrift {
  from { transform: scale(1.04) translate(0, 0); }
  to   { transform: scale(1.08) translate(-1%, -0.5%); }
}

/* Dark overlay: keeps text perfectly legible */
.bg-vignette {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(8,8,8,0.55) 100%),
    linear-gradient(to bottom, rgba(8,8,8,0.72) 0%, rgba(8,8,8,0.50) 45%, rgba(8,8,8,0.80) 100%);
}

/* ── TOP BAR ───────────────────────────────────── */
.top-bar {
  position: relative; z-index: 10;
  padding: 28px var(--px);
  display: flex; justify-content: center; align-items: center;
  flex-shrink: 0;
  opacity: 0;
  animation: fadeIn 0.9s 2.2s var(--ease) forwards;
}
.nav-logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo-img {
  height: 100px;
  width: auto;
  display: block;
  opacity: 1;
  transition: opacity 0.2s;
}

.nav-right {
  position: absolute;
  right: var(--px);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--silver);
}

/* ── CENTRE ────────────────────────────────────── */
.centre {
  position: relative; z-index: 10;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--px);
  text-align: center;
}
.centre-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 680px;
}

/* Eyebrow badge */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--silver);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 6px 14px;
  margin-bottom: 24px;
  opacity: 0;
  animation: fadeUp 1s 2.3s var(--ease) forwards;
}

/* Headline */
.headline {
  font-family: var(--serif);
  font-size: clamp(38px, 6vw, 80px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--offwhite);
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeUp 1.1s 2.5s var(--ease) forwards;
}
.headline em {
  font-style: italic;
  color: var(--cream);
}

/* Description */
.standfirst {
  font-size: clamp(15px, 1.7vw, 18px);
  color: var(--silver);
  line-height: 1.85;
  margin-bottom: 24px;
  opacity: 0;
  animation: fadeUp 1.1s 2.7s var(--ease) forwards;
}
.standfirst em {
  font-style: normal;
  color: var(--cream);
  font-weight: 400;
}

/* Divider */
.divider-line {
  width: 32px; height: 1px;
  background: var(--mid);
  margin-bottom: 18px;
  opacity: 0;
  animation: fadeIn 1s 2.9s var(--ease) forwards;
}

/* Private access note */
.access-note {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 24px);
  font-style: italic;
  font-weight: 300;
  color: var(--silver);
  line-height: 1.7;
  margin-bottom: 28px;
  opacity: 0;
  animation: fadeUp 1s 2.9s var(--ease) forwards;
}

/* CTAs */
.ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: fadeUp 1s 3.1s var(--ease) forwards;
}

.btn-primary {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 30px;
  background: var(--cream);
  color: var(--black);
  font-family: var(--sans);
  font-size: 10.5px; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.btn-primary:hover { background: var(--offwhite); transform: translateY(-1px); }

.btn-ghost {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--smoke);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.btn-ghost:hover { color: var(--silver); border-bottom-color: var(--mid); }

/* ── METRICS BAR ───────────────────────────────── */
.metrics-bar {
  position: relative; z-index: 10;
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(8,8,8,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  animation: fadeIn 1s 3.3s var(--ease) forwards;
}

.metric {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 12px;
  text-align: center;
  transition: background 0.2s;
}
.metric:hover { background: rgba(255,255,255,0.03); }

.metric-val {
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 300;
  color: var(--cream);
  line-height: 1;
  letter-spacing: 0.02em;
}
.metric-label {
  font-size: clamp(9.5px, 0.75vw, 11px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
  white-space: nowrap;
}

.metric-sep {
  width: 1px;
  background: rgba(255,255,255,0.07);
  align-self: stretch;
  flex-shrink: 0;
}

/* ── DESKTOP BREAK HELPER ──────────────────────── */
.br-d { display: block; }

/* ── ANIMATIONS ────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── RESPONSIVE ────────────────────────────────── */

/* Tablet */
@media (max-width: 860px) {
  :root { --px: 32px; }
  .metric-label { letter-spacing: 0.12em; white-space: normal; line-height: 1.3; }
  .metric { padding: 14px 8px; }
}

/* Short laptop / small height screens */
@media (max-height: 800px) {
  .top-bar { padding: 18px var(--px); }
  .metric { padding: 12px 12px; }
  .metric-val { font-size: clamp(22px, 2.4vw, 30px); }
  .eyebrow { margin-bottom: 20px; }
  .headline { margin-bottom: 18px; }
  .standfirst { margin-bottom: 20px; line-height: 1.7; }
  .divider-line { margin-bottom: 16px; }
  .access-note { margin-bottom: 24px; font-size: clamp(15px, 1.6vw, 19px); }
}

@media (max-height: 680px) {
  .eyebrow { display: none; }
  .divider-line { display: none; }
  .metric { padding: 10px 8px; }
  .metric-val { font-size: clamp(20px, 2vw, 26px); }
  .metric-label { font-size: 9px; }
}

/* Mobile */
@media (max-width: 600px) {
  :root { --px: 24px; }

  body { overflow: hidden; }

  .top-bar { padding: 20px var(--px); }
  .logo-img { height: 72px; }
  .nav-right { display: none; }   /* declutter on small screens */

  .br-d { display: none; }

  .eyebrow { font-size: 8.5px; letter-spacing: 0.28em; padding: 6px 12px; margin-bottom: 22px; }

  .standfirst { font-size: 13px; }
  .access-note { font-size: 14px; margin-bottom: 28px; }

  /* Stack metrics 2×2 on mobile */
  .metrics-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid rgba(255,255,255,0.07);
  }
  .metric-sep { display: none; }
  .metric { padding: 14px 8px; border: 1px solid rgba(255,255,255,0.05); }
  .metric:nth-child(1) { border-top: none; border-left: none; border-bottom: none; }
  .metric:nth-child(3) { border-top: none; border-left: none; border-right: none; border-bottom: none; }
  .metric:nth-child(5) { border: none; border-right: 1px solid rgba(255,255,255,0.05); }
  .metric:nth-child(7) { border: none; }
  .metric-val { font-size: 24px; }
  .metric-label { font-size: 8px; letter-spacing: 0.15em; white-space: normal; }
}

/* Very small phones (SE, etc.) */
@media (max-width: 380px) {
  .headline { font-size: 34px; }
  .eyebrow { display: none; }
  .divider-line { margin-bottom: 18px; }
}

/* ── REDUCED MOTION ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .intro-overlay,
  .intro-logo-img,
  .bg,
  .top-bar, .eyebrow, .headline, .standfirst,
  .divider-line, .access-note, .ctas, .metrics-bar {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .intro-overlay { display: none; }
}