/* kings digital platform - design tokens */
/* note: no buzz orange, no $ asterisk inside the prototype.
   this is kings's world. neutral accent discipline. */

/* all-white minimal register / Helvetica throughout — design exploration */

:root {
  /* kings brand register - now pure white */
  --kings-bg: #ffffff;
  --kings-bg-2: #ffffff;
  --kings-bg-3: #ffffff;
  --kings-fg: #121212;
  --kings-fg-muted: rgba(18, 18, 18, 0.65);
  --kings-fg-soft: rgba(18, 18, 18, 0.45);
  --kings-line: rgba(18, 18, 18, 0.12);
  --kings-warm: #ffffff;
  --kings-amber: rgba(18, 18, 18, 0.04);

  /* 1857 brand register - now pure white */
  --t1857-bg: #ffffff;
  --t1857-bg-2: #ffffff;
  --t1857-fg: #121212;
  --t1857-fg-muted: rgba(18, 18, 18, 0.6);
  --t1857-line: rgba(18, 18, 18, 0.14);
  --t1857-glow: #ffffff;
  --t1857-amber: rgba(18, 18, 18, 0.04);

  /* kids@kings brand register - now pure white */
  --kids-bg: #ffffff;
  --kids-bg-2: #ffffff;
  --kids-bg-3: #ffffff;
  --kids-fg: #121212;
  --kids-fg-muted: rgba(18, 18, 18, 0.6);
  --kids-fg-soft: rgba(18, 18, 18, 0.45);
  --kids-line: rgba(18, 18, 18, 0.12);
  --kids-blue: #121212;
  --kids-blue-deep: #121212;
  --kids-blue-soft: #f3f3f3;
  --kids-warm-accent: #f3f3f3;

  /* portal register - now pure white */
  --portal-bg: #ffffff;
  --portal-bg-2: #ffffff;
  --portal-card: #ffffff;
  --portal-line: rgba(18, 18, 18, 0.1);
  --portal-fg: #121212;
  --portal-fg-muted: rgba(18, 18, 18, 0.6);

  /* sizing + motion */
  --max-w: 1480px;
  --pad-x: 24px;
  --pad-x-lg: 48px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 240ms;
  --t-mid: 400ms;
  --t-slow: 600ms;

  /* type scale - mobile first */
  --t-display: clamp(64px, 14vw, 156px);
  --t-h1: clamp(40px, 8vw, 96px);
  --t-h2: clamp(32px, 5.5vw, 64px);
  --t-h3: clamp(22px, 3vw, 36px);
  --t-pull: clamp(22px, 3vw, 40px);
  --t-body: 17px;
  --t-small: 14px;
  --t-eye: 12px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.55;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
  background: #ffffff;
  color: #121212;
}
/* horizontal overflow guard - on html, NOT body. body overflow-x:hidden breaks position:fixed on iOS Safari */
html {
  overflow-x: clip;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* Helvetica throughout — no exceptions */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4,
p, .p,
.btn, .pill, .tag, .cta, .nav a, .eye,
input, textarea, select, button, label {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  text-transform: none;
}

h1, .h1 {
  font-weight: 700;
  font-size: var(--t-display);
  line-height: 1.0;
  letter-spacing: -0.025em;
}

h2, .h2 {
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: 1.02;
  letter-spacing: -0.022em;
}

h3, .h3 {
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: 1.08;
  letter-spacing: -0.018em;
}

h4, .h4 {
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

p, .p {
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.55;
  letter-spacing: 0;
}

.lt, .light {
  font-weight: 400;
}

.eye {
  font-size: var(--t-eye);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* layout */
.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
@media (min-width: 900px) {
  .wrap {
    padding: 0 var(--pad-x-lg);
  }
}

.section {
  padding: 80px 0;
}
@media (min-width: 900px) {
  .section {
    padding: 140px 0;
  }
}

/* scroll reveal - default hidden state */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   media framework - real images with optional video on top
   ============================================================ */
.media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  background: #0c0a08;
}
.media img,
.media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.media img {
  z-index: 1;
  animation: kenburns 28s ease-in-out infinite alternate;
}
.media video {
  z-index: 2;
  opacity: 0;
  transition: opacity 800ms var(--ease);
}
.media video.loaded {
  opacity: 1;
}
@keyframes kenburns {
  from { transform: scale(1.02) translate(0, 0); }
  to { transform: scale(1.12) translate(-2%, 1%); }
}

/* tile-media - used inside cards / pillars / value tiles */
.tile-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #1c1814;
}
.tile-media img,
.tile-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 700ms var(--ease), opacity 320ms var(--ease);
  opacity: 0.92;
}
.tile-media video {
  opacity: 0;
  z-index: 2;
}
.tile-media video.loaded {
  opacity: 0.92;
}
/* light-brand tile media (kids@kings) - keep imagery bright */
body.kids .tile-media {
  background: var(--kids-blue-soft);
}
body.kids .tile-media img,
body.kids .tile-media video.loaded {
  opacity: 1;
}
/* hover lift via parent hover - scoped to common parents only */
.pillar:hover > .tile-media img,
.pillar:hover > .tile-media video.loaded,
.vs-tile:hover > .tile-media img,
.vs-tile:hover > .tile-media video.loaded,
.space-card:hover > .tile-media img,
.space-card:hover > .tile-media video.loaded,
.menu-card:hover > .tile-media img,
.menu-card:hover > .tile-media video.loaded,
.hub-card:hover > .tile-media img,
.hub-card:hover > .tile-media video.loaded,
.cat:hover > .tile-media img,
.cat:hover > .tile-media video.loaded,
.coach-card:hover > .tile-media img,
.coach-card:hover > .tile-media video.loaded,
.k-mem-visual:hover > .tile-media img,
.k-mem-visual:hover > .tile-media video.loaded,
.events-visual:hover > .tile-media img,
.events-visual:hover > .tile-media video.loaded,
.kids-day-visual:hover > .tile-media img,
.kids-day-visual:hover > .tile-media video.loaded {
  opacity: 1;
  transform: scale(1.05);
}

/* ============================================================
   brand-to-brand cross fade
   ============================================================ */
/* page fade-in: opacity only - transform on body breaks position:fixed for children (concierge, sticky CTA) */
body {
  opacity: 0;
  animation: pageFadeIn 600ms var(--ease) forwards;
}
body.brand-transitioning {
  animation: pageFadeOut 380ms var(--ease) forwards;
}
@keyframes pageFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes pageFadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* brand transition overlay - full-screen brand mark hold */
.brand-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
.brand-overlay.in {
  opacity: 1;
  pointer-events: auto;
}
.brand-overlay .mark {
  font-size: clamp(48px, 8vw, 80px);
  font-weight: 600;
  letter-spacing: -0.025em;
  text-transform: none;
}
.brand-overlay[data-brand="kings"] {
  background: #0c0a08;
  color: #fff;
}
.brand-overlay[data-brand="t1857"] {
  background: #1a0d08;
  color: #fff;
  font-style: italic;
}
.brand-overlay[data-brand="kids"] {
  background: #eaf3f8;
  color: #1c2a3a;
}

/* ============================================================
   members vs public view toggle
   ============================================================ */
body[data-view="public"] .member-only { display: none !important; }
body[data-view="member"] .public-only { display: none !important; }

.view-toggle {
  position: fixed;
  top: 96px;
  right: 16px;
  z-index: 99;
  display: inline-flex;
  background: rgba(0, 0, 0, 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 100px;
  padding: 3px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
@media (min-width: 900px) {
  .view-toggle {
    top: 110px;
    right: 24px;
    font-size: 12px;
  }
}
.view-toggle button {
  color: rgba(255, 255, 255, 0.6);
  padding: 6px 12px;
  border-radius: 100px;
  transition: color 200ms var(--ease), background 200ms var(--ease);
}
.view-toggle button.active {
  background: #fff;
  color: #0c0a08;
  font-weight: 600;
}
.view-toggle.light {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(28, 42, 58, 0.08);
}
.view-toggle.light button {
  color: rgba(28, 42, 58, 0.55);
}
.view-toggle.light button.active {
  background: #1c2a3a;
  color: #fff;
}

/* hidden on the join wizard + member portal where context fixes the view */
body.join-page .view-toggle,
body.portal-page .view-toggle {
  display: none;
}

/* member-state nav swap */
body[data-view="member"] .nav .cta.solid {
  /* solid CTA becomes "today" instead of "become a member" via JS text swap */
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  body {
    opacity: 1;
    animation: none;
  }
  .media img {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ============================================================
   GLOBAL ALL-WHITE + HELVETICA OVERRIDE
   sits at the end of tokens.css so it beats brand CSS specificity
   ============================================================ */

/* Helvetica nuke — every element, ignoring inherited stacks */
*, *::before, *::after {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif !important;
}

/* white background nuke — every container, including brand bodies */
html, body,
body.kings, body.t1857, body.kids, body.portal-page, body.join-page,
nav, .nav, .mobile-menu, .brand-strip,
header, footer, section, main, article, aside,
.k-hero, .k-pillars, .k-stats, .k-mem-preview, .k-quote, .k-footer,
.value-stack, .tiers, .k-faqs,
.t1857-hero, .t1857-spaces, .t1857-menus, .t1857-events,
.kids-hero, .kids-page-hero, .kids-day, .kids-camps, .kids-programmes,
.portal-shell, .portal-card, .portal-main, .portal-aside,
.join-shell, .join-body, .join-left, .join-right, .join-bar, .join-fields,
.tier, .pillar, .vs-tile, .vs-category, .space-card, .menu-card, .hub-card,
.cat, .coach-card, .stat, .k-mem-visual, .events-visual,
.acc-item, .accordion,
.eye, .pill, .tag,
.brand-overlay,
.sticky-cta {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #121212 !important;
}

/* text color nuke — anything white text reverts to dark */
*, h1, h2, h3, h4, h5, h6, p, a, span, div, li, label, blockquote,
.brand, .ph-title, .pdesc, .ptag, .lbl, .num, .eye, .lead, .sub, .attrib,
.vs-cat-title, .tier-eye, .acc-q, .acc-a, .joining, .per, .amt {
  color: #121212;
}

/* opacity for muted text */
.eye, .sub, .lead, .pdesc, .lbl, .acc-a, .attrib, .pay-note, .step-pip,
.tier-eye, .joining, .per, .tier-evidence-note, .tier-toggle-note {
  color: rgba(18, 18, 18, 0.6) !important;
}

/* gradient overlays on heroes — kill them */
.k-hero::before, .k-hero::after,
.t1857-hero::before, .t1857-hero::after,
.kids-hero::before, .kids-hero::after,
.kids-page-hero::before, .kids-page-hero::after,
.k-mem-hero::before, .k-mem-hero::after {
  background: none !important;
  background-image: none !important;
  display: none !important;
}

/* nav — white bg, dark text, regardless of brand */
.nav, .nav.scrolled,
body.kings .nav, body.kings .nav.scrolled,
body.t1857 .nav, body.t1857 .nav.scrolled,
body.kids .nav, body.kids .nav.scrolled,
body.kings .nav:not(.scrolled),
body.kids .nav:not(.scrolled) {
  background-color: #ffffff !important;
  border-bottom: 1px solid rgba(18, 18, 18, 0.08) !important;
}
.nav .brand, .nav .menu a, .nav .cta,
body.kings .nav:not(.scrolled) .brand,
body.kings .nav:not(.scrolled) .menu a,
body.kings .nav:not(.scrolled) .cta,
body.kids .nav:not(.scrolled) .brand,
body.kids .nav:not(.scrolled) .menu a,
body.kids .nav:not(.scrolled) .cta {
  color: #121212 !important;
  opacity: 1 !important;
}
.nav .burger span,
body.kings .nav:not(.scrolled) .burger span,
body.kids .nav:not(.scrolled) .burger span {
  background-color: #121212 !important;
}

/* brand strip */
.brand-strip {
  background-color: #ffffff !important;
  color: #121212 !important;
  border-bottom: 1px solid rgba(18, 18, 18, 0.08) !important;
}
.brand-strip a, .brand-strip .sep { color: #121212 !important; }

/* mobile menu */
.mobile-menu {
  background-color: #ffffff !important;
}
.mobile-menu a, .mobile-menu .small { color: #121212 !important; }

/* buttons — minimal black-on-white / white-on-black */
.btn, a.btn, .cta, a.cta, button.btn, .tier-cta {
  background-color: #ffffff !important;
  color: #121212 !important;
  border: 1px solid #121212 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.btn-primary, a.btn-primary,
.cta.solid, a.cta.solid,
.tier-cta, .sticky-cta,
.pay-apple, .pay-card {
  background-color: #121212 !important;
  color: #ffffff !important;
  border: 1px solid #121212 !important;
}
.btn-outline, a.btn-outline {
  background-color: transparent !important;
  color: #121212 !important;
  border: 1px solid #121212 !important;
}

/* tier cards — white with thin dark border */
.tier, .tier.featured {
  background-color: #ffffff !important;
  border: 1px solid rgba(18, 18, 18, 0.12) !important;
  color: #121212 !important;
}

/* toggle pills (3-month / 12-month) */
.toggle-wrap {
  background-color: #ffffff !important;
  border: 1px solid rgba(18, 18, 18, 0.16) !important;
}
.toggle-btn {
  color: rgba(18, 18, 18, 0.55) !important;
  background-color: transparent !important;
}
.toggle-wrap[data-active="3"] .toggle-btn.t-3,
.toggle-wrap[data-active="12"] .toggle-btn.t-12 {
  background-color: #121212 !important;
  color: #ffffff !important;
}

/* FAQ accordion */
.acc-item { border-color: rgba(18, 18, 18, 0.12) !important; }
.acc-q { color: #121212 !important; }
.acc-a { color: rgba(18, 18, 18, 0.65) !important; }
.acc-a div { color: rgba(18, 18, 18, 0.65) !important; }

/* tile/media placeholders — soft light grey so they read as "image slot" */
.tile-media, .media,
body.kids .tile-media {
  background-color: #f3f3f3 !important;
}
.tile-media img, .media img { opacity: 1 !important; }

/* form fields */
input, textarea, select {
  background-color: #ffffff !important;
  color: #121212 !important;
  border: 1px solid rgba(18, 18, 18, 0.18) !important;
  border-radius: 0 !important;
}
.field label, label {
  color: rgba(18, 18, 18, 0.65) !important;
}

/* view toggle bubble — hidden in alt prototype */
.view-toggle { display: none !important; }

/* footer */
.k-footer, footer {
  background-color: #ffffff !important;
  color: #121212 !important;
  border-top: 1px solid rgba(18, 18, 18, 0.08) !important;
}
.k-footer .brand-mark, .k-footer h5, .k-footer a, .k-footer p, .k-footer li { color: #121212 !important; }
.k-footer .bot, footer .bot { display: none !important; }

/* join shell + atmosphere */
.join-shell { background-color: #ffffff !important; }
.join-atmosphere { background: none !important; background-image: none !important; opacity: 0 !important; }
.join-bar { background-color: #ffffff !important; border-bottom: 1px solid rgba(18, 18, 18, 0.08) !important; }
.join-progress { background-color: rgba(18, 18, 18, 0.08) !important; }
.join-progress .fill { background-color: #121212 !important; }
.join-tier, .join-tier.selected {
  background-color: #ffffff !important;
  border: 1px solid rgba(18, 18, 18, 0.12) !important;
}
.join-tier.selected { border-color: #121212 !important; }

/* portal */
.portal-shell, .portal-card, .portal-main, .portal-aside { background-color: #ffffff !important; color: #121212 !important; }
.portal-card { border: 1px solid rgba(18, 18, 18, 0.1) !important; }

/* brand transition overlay — keep functional but neutral */
.brand-overlay,
.brand-overlay[data-brand="kings"],
.brand-overlay[data-brand="t1857"],
.brand-overlay[data-brand="kids"] {
  background-color: #ffffff !important;
  color: #121212 !important;
  font-style: normal !important;
}

/* scroll cue + line dividers */
.k-scroll, .k-scroll div { color: #121212 !important; }
.k-scroll .line, hr, .divider { background-color: rgba(18, 18, 18, 0.16) !important; }

/* keep blockquote subtle */
blockquote { color: #121212 !important; }
.attrib { color: rgba(18, 18, 18, 0.55) !important; }