/* =========================
   Base reset
   ========================= */

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

html,
body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  background: radial-gradient(circle at 30% 50%, #171717 0, #050505 40%, #000000 100%);
  color: #fff;
}

/* Theme */

body.theme-dark {
  background: transparent; /* do NOT override */
  color: #fff;
}

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

/* =========================
   Layout
   ========================= */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.section {
  padding: 5rem 1.5rem;
}

.section-inner {
  max-width: 1160px;
  margin: 0 auto;
}

/* Generic two-column layout (desktop) */

.two-column {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.two-column > * {
  flex: 1 1 0;
}

/* horizontal spacing between columns */
.two-column > * + * {
  margin-left: 3rem;
}

/* =========================
   Typography
   ========================= */

h1,
h2,
h3 {
  font-weight: 400;
  margin: 0 0 0.75rem;
}

p {
  margin: 0 0 0.75rem;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  color: #bbb;
}

.small {
  font-size: 0.75rem;
  color: #aaa;
}

/* =========================
   Buttons
   ========================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.8rem;
  border-radius: 999px;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: none;
}

.btn-primary {
  background: transparent;
  color: #000;
  border-color: #fff;
}

.btn-primary:hover {
  background: transparent;
}

.btn-outline {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

.btn-outline:hover {
  background: #fff;
  color: #000;
}

/* ========================
   Header
   ======================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #000;
  border-bottom: 1px solid #151515;
}

.header-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --- Left: hamburger menu --- */

.header-menu-button {
  background: none;
  border: none;
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  height: 16px;   /* total icon height */
  width: 24px;
  cursor: pointer;
}

/* 3 horizontal lines */
.header-menu-button span {
  display: block;
  height: 2px;
  width: 100%;
  background: #ffffff;
}

/* --- Center: logo --- */

.header-logo img {
  height: 50px;
}

/* --- Right: language switcher --- */

.header-lang {
  position: relative;
  /* do NOT change font-size here – we size the button itself */
}

/* Active language button (“EN”) */
.header-lang .lang-active {
  background: none;
  border: none;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* match hamburger container height */
  height: 16px;          /* same as .header-menu-button */
  padding: 0;            /* no extra vertical padding */
  line-height: 1;        /* avoid extra line height */

  /* tweak until it visually matches the lines */
  font-size: 1.3rem;     /* controls letter height */
  letter-spacing: 0.1em;
  text-transform: uppercase;

  min-width: 24px;       /* roughly same width as hamburger */
  cursor: pointer;
}

/* Dropdown language menu */

.header-lang .lang-menu {
  position: absolute;
  right: 0;
  top: 120%;
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  background: #050505;
  border: 1px solid #222;
  display: none;         /* shown via JS */
}

.header-lang .lang-menu li {
  margin: 0;
  padding: 0;
}

.header-lang .lang-menu a {
  display: block;
  padding: 0.35rem 0.75rem;
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.header-lang .lang-menu a:hover {
  background: #111;
}

/* =========================
   Nav overlay (MENU)
   ========================= */

.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.96);
  display: none;
  align-items: center;
  justify-content: center;
}

.nav-overlay.nav-open {
  display: flex;
}

.nav-overlay-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
}

.nav-overlay ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.nav-overlay li {
  margin: 0.75rem 0;
}

.nav-overlay a {
  font-size: 1.1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* =========================
   Hero
   ========================= */

.section-hero {
  padding-top: 4rem;
  padding-bottom: 5rem;
  background: transparent; /* inherit global gradient */
  text-align: center;
}

.hero-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-text {
  max-width: 540px;
  margin-bottom: 3rem;
}

.hero-title span {
  display: block;
  font-size: 2.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero-subtitle {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* HERO – world map container */
.hero-globe {
  position: relative;
  width: 90%;
  max-width: 1040px;      /* nice wide size on desktop */
  margin: 0 auto;
  margin-bottom: 4rem;    /* <<< ADD THIS FOR SPACING */
}

/* Make the image responsive and sharp */
.hero-map-image {
  display: block;
  width: 100%;
  height: auto;
}

/* Mobile: slightly narrower so it breathes more */
@media (max-width: 600px) {
  .hero-globe {
    width: 100%;
    max-width: 720px;
  }
}

/* Tooltip that appears above the globe on hover */
#poi-tooltip {
  position: absolute;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 999px;
  pointer-events: none;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.15s ease;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  z-index: 10;
}

.hero-globe-wrapper {
  position: relative;
  background: transparent;
  border: none;
}

/* If there were decorative arcs via pseudo-elements, kill them */
.hero-globe-wrapper::before,
.hero-globe-wrapper::after {
  content: none !important;
}

/* =========================
   Membership
   ========================= */

.section-membership {
  padding-top: 4rem;
  padding-bottom: 5rem;
  background: transparent; /* same as global now */
}

.membership-layout {
  display: flex;
  align-items: center;
}

.membership-card-visual,
.membership-copy {
  flex: 1 1 0;
}

/* Desktop / Default card size */
/* Use the new mockup image instead of the drawn card */
.card-mockup {
  width: 520px;
  max-width: 100%;
  min-height: 300px;
  border-radius: 1.4rem;
  padding: 0;
  border: none;

  background-image: url("../img/ibossim–founder–card–hero.png");
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;

  display: block;
}

.membership-copy {
  text-align: center;
  padding-left: 3rem;
  padding-right: 3rem;
}

.membership-tagline {
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.membership-title {
  font-size: 2rem;
  line-height: 1.3;
  margin-bottom: 1.5rem;
}

.membership-body {
  font-size: 0.95rem;
  color: #dddddd;
  max-width: 420px;
  margin: 0 auto 2rem;
}

.membership-note {
  font-size: 0.7rem;
  color: #aaaaaa;
  text-align: center;
  max-width: 720px;
  margin: 2.5rem auto 0;
}

.btn-outline {
  background: #000;
  color: #fff;
  border: 1px solid #fff;
}

.btn-outline:hover {
  background: #fff;
  color: #000;
}

/* =========================
   Membership – Mobile
   ========================= */
@media (max-width: 768px) {

  /* Stack card above text */
  .membership-layout {
    flex-direction: column;
    align-items: center;
  }

  /* Ensure the card container is visible */
  .membership-card-visual {
    display: block;
    width: 100%;
    margin-bottom: 2rem;
  }

  /* Mobile card sizing */
  .card-mockup {
    width: 90%;
    max-width: 360px;
    min-height: 220px;
    margin: 0 auto;
    background-position: center;
  }

  /* Keep text readable with some side padding */
  .membership-copy {
    text-align: center;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* Optional: tighten vertical spacing a bit */
  .section-membership {
    padding-top: 3rem;
    padding-bottom: 4rem;
  }
}

/* ========================= */
/* JOIN US – Gradient Section */
/* ========================= */

.section-join {
  position: relative;
  padding-top: 4.5rem;
  padding-bottom: 5rem;
  text-align: center;
  color: #f8f8f8;
}

/* Make sure text sits above any overlay */
.section-join .section-inner {
  position: relative;
  z-index: 1;
}

/* TITLE: "JOIN US" */
.section-join h2 {
  font-size: 2.5rem;          /* ← change this to adjust title size */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
  font-weight: 400;
}

/* MAIN TEXT (class="join-lede") */
.section-join .join-lede {
  max-width: 52rem;           /* controls line length */
  margin: 0 auto 1rem auto;
  font-size: 1.1rem;         /* ← change to adjust main text size */
  line-height: 1.6;
  opacity: 0.9;
}

/* SUBTEXT (class="join-sub") */
.section-join .join-sub {
  max-width: 44rem;
  margin: 0 auto 2rem auto;
  font-size: 1rem;         /* ← subline size */
  line-height: 1.6;
  opacity: 0.85;
}

/* BUTTON (class="btn btn-outline") */
.section-join .btn,
.section-join .btn-outline {
  padding: 0.9rem 2.6rem;     /* ← button height & width */
  font-size: 1rem;            /* ← button text size */
  border-radius: 999px;       /* soft pill */
  margin-top: 0.5rem;
}

/* ================================
   JOIN / DISCOVER / ENJOY layout
   ================================ */

/* Overall section spacing */
.section-steps {
  padding: 5rem 0;
}

/* One “row” of the checkerboard
   (2 equal columns, full-height cells) */
.step-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  max-width: 1400px;
  margin: 0 auto;          /* no big vertical gaps */
}

/* small vertical gap between rows */
.section-steps .step-row + .step-row {
  margin-top: 0.5rem;
}

/* Left/right cells share the space */
.step-image,
.step-copy {
  flex: 0 0 50%;    /* each side = 50% of row */
}

/* IMAGE CELLS
   – these become the big grey “picture” blocks */
.step-image {
  min-height: 480px;
  background-color: #111;  /* fallback if image fails */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Plug your actual photos here */
.step-image--join {
  background-image: url("../img/step-join.webp");
}

.step-image--discover {
  background-image: url("../img/step-discover.webp");
}

.step-image--enjoy {
  background-image: url("../img/step-enjoy.webp");
}

.step-image--concierge {
  background-image: url("../img/step-concierge.webp"); /* change filename if needed */
}

/* PARTNERS images */
.step-image--venues {
    background-image: url("../img/step-venues.webp");
}

.step-image--brands {
    background-image: url("../img/step-brands.webp");
}

.step-image--talent {
    background-image: url("../img/step-talent.webp");
}

/* ABOUT images */
.step-image--concierge1 {
    background-image: url("../img/step-concierge2.webp");
}

.step-image--travel {
    background-image: url("../img/step-travel.webp");
}

.step-image--events {
    background-image: url("../img/step-events.webp");
}

/* LIFESTYLE IMAGES */
.step-image--blueprint {
    background-image: url("../img/step-blueprint.webp");
}
    
.step-image--growth {
    background-image: url("../img/step-growth.webp");
}

.step-image--flow {
    background-image: url("../img/step-flow.webp");
}

/* Extra spacing for any button inside a step text cell */
.section-steps .step-copy .btn {
  margin-top: 1.5rem;
}

/* TEXT CELLS – centered in their half */
.step-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 4rem;
  text-align: center;
}

/* Title */
.step-title {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Paragraph */
.step-text {
  max-width: 26rem;
  margin: 0 auto;
  line-height: 1.6;
}

/* Row 2: keep checkerboard by reversing columns */
.step-row.step-row--reverse {
  flex-direction: row-reverse;
}

/* ================================
   Mobile layout
   ================================ */
   
@media (max-width: 768px) {
     .step-row,
     .step-row.step-row--reverse {
         flex-direction: column;   /* stack image over text */
         max-width: 100%;
         margin: 0 auto;
     }

     .step-image,
     .step-copy {
         flex: 1 1 auto;           /* undo the 50% on mobile */
         max-width: 100%;
     }

     .step-image {
         min-height: 220px;
     }

     .step-copy {
         padding: 2.5rem 1.5rem;
     }
    
}

/* =========================
   Base cities
   ========================= */

.section-base-cities .base-map {
  margin-top: 2rem;
  border-radius: 1.4rem;
  border: 1px solid #333;
  min-height: 260px;
  background: #050505;
}

/* ============================
   Base Cities – center content
   ============================ */
.section-base-cities {
    text-align: center;        /* center all text */
}

.section-base-cities .section-inner {
    display: flex;
    flex-direction: column;
    align-items: center;       /* horizontally center title + text block */
}

.section-base-cities .base-map {
    width: 100%;
    max-width: 1000px;   /* optional — prevents stretching too wide */
    margin: 2rem auto 0; /* centers block nicely */
}

/* ==============================
   Base Cities – USA Map
   ============================== */

.base-cities-map {
  max-width: 960px;
  margin: 3rem auto 0;
}

.usa-map-wrapper {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.usa-map-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Desktop — enlarge USA map */
@media (min-width: 1025px) {
    .base-cities-map {
        max-width: 1300px;      /* Increase container width */
        margin: 4rem auto 0;    /* Add breathing room */
    }

    .usa-map-wrapper {
        max-width: 1300px;      /* Matches container */
    }

    .usa-map-image {
        transform: scale(1.05);  /* Slight enlargement */
        transform-origin: center top; 
    }
}

/* ============================
   BASE CITIES – Title Styling
   ============================ */

.base-cities-title {
    font-size: 2rem;          /* adjust size here */
    letter-spacing: 0.15em;   /* matches IBOSSIM uppercase rhythm */
    text-transform: uppercase;
    margin-bottom: 1.5rem;    /* spacing above the map */
    text-align: center;
}

/* Larger desktop screens */
@media (min-width: 1025px) {
    .base-cities-title {
        font-size: 2.4rem;    /* refined, strong but elegant */
        letter-spacing: 0.18em;
    }
}

/* Mobile refinement */
@media (max-width: 768px) {
    .base-cities-title {
        font-size: 1.6rem;    /* balanced for phones */
        letter-spacing: 0.14em;
    }
}

/* ============================
   BASE CITIES – Eyebrow Styling
   ============================ */

.section-eyebrow {
    font-size: 0.95rem;         /* baseline eyebrow size */
    letter-spacing: 0.22em;     /* keeps the quiet IBOSSIM rhythm */
    text-transform: uppercase;
    color: #f8f8f8;             /* ensure readability on dark background */
    margin-bottom: 1rem;        /* space above the title */
    text-align: center;
    opacity: 0.85;              /* softer, elegant presence */
}

/* Desktop refinement */
@media (min-width: 1025px) {
    .section-eyebrow {
        font-size: 1.1rem;      /* proportionally scaled with the new BASE CITIES size */
        letter-spacing: 0.24em;
        margin-bottom: 1.2rem;
    }
}

/* Mobile refinement */
@media (max-width: 768px) {
    .section-eyebrow {
        font-size: 0.85rem;
        letter-spacing: 0.18em;
        margin-bottom: 0.8rem;
    }
}

@media (max-width: 768px) {
  .base-cities-map {
    margin-top: 2.5rem;
    padding: 0 1.5rem;
  }
}

/* ================================
   ARCHETYPES – layout + styling
   ================================ */

/* Whole section */
.section-archetypes {
  padding: 8rem 0 6rem;
  text-align: center;
}

/* Keep the “MEMBERS” eyebrow and “ARCHETYPES” heading centered */
.section-archetypes .section-title,
.section-archetypes .eyebrow {
  text-align: center;
}

/* Eyebrow above ARCHETYPES (MEMBERS) */
.section-archetypes .eyebrow {
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
  opacity: 0.85;
}

/* Main section title: ARCHETYPES */
.section-archetypes h2 {
  font-size: 2rem;            /* adjust to taste */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 3rem;
}

/* ================================
   Archetypes – Badge icon
   ================================ */

/* Badge container */
.archetype-symbol {
  width: 360px;               /* desktop size */
  height: 360px;
  max-width: 80vw;
  margin: 0 auto 2.5rem;
}

/* Single badge image */
.archetype-symbol .badge {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Optional: smaller on mobile */
@media (max-width: 768px) {
  .archetype-symbol {
    width: 260px;
    height: 260px;
    margin-bottom: 2rem;
  }
}

/* ================================
   Archetypes – Text + navigation
   ================================ */

/* Content under the circle (title + description) */
.archetype-content {
  max-width: 52rem;           /* keeps the text in a nice column */
  margin: 0 auto;
}

/* Archetype name (INDIVIDUALS, CORPORATES, etc.) */
.archetype-title {
  margin-top: 2rem;
  margin-bottom: 0.85rem;
  font-size: 2rem;          /* slightly larger than before */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

/* Description text */
.archetype-description,
#archetype-text {             /* id used in your HTML */
  font-size: 1rem;
  line-height: 1.6;
}

/* Navigation arrows container – centered under the text */
.archetype-nav,
.archetype-arrows {           /* support either class name */
  margin-top: 1.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.75rem;               /* equal spacing between « and » */
}

/* ================================
   ARCHETYPES – mobile refinements
   ================================ */
@media (max-width: 768px) {
  .section-archetypes {
    padding: 4rem 0 4.5rem;
  }

  .archetype-symbol {
    width: 190px;        /* slightly smaller circle on phones */
    height: 190px;
  }

  .archetype-content {
    padding: 0 1.5rem;
  }

  .archetype-description {
    font-size: 0.95rem;
  }

  .archetype-arrows {
    margin-top: 1.5rem;
  }
}

/* ================================
   Lifestyle – heading
   ================================ */

.section-lifestyle-heading {
  padding: 4rem 1.5rem 3rem;
}

.section-lifestyle-heading .lifestyle-heading {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.section-lifestyle-heading .section-title {
   text-align: center;         /* Title centered */
    margin-bottom: 2rem;
    /* Adjust the LIFESTYLE title size */
    font-size: 2.5rem;   /* ← Change this value to the size you want */
    letter-spacing: 0.12em;  /* optional, keep/remove as you prefer */
    font-weight: 400;        /* optional */
    /* uses your global title styles; adjust only if needed */
}

.section-lifestyle-heading .section-eyebrow {
  margin-top: 0.5rem;
  letter-spacing: 0.1em;
  font-size: 1.4rem;
  text-transform: uppercase;
}

.lifestyle-intro {
  margin-top: 2rem;
  line-height: 1.6;
  font-size: 1.1rem;
}

/* ================================
   Lifestyle – body (diagram + photo)
   ================================ */

.section-lifestyle-body {
  /* Adjust these to move the whole block up/down */
  padding: 4rem 1.5rem 6rem;
}

.section-lifestyle-body .lifestyle-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5rem;
}

/* LEFT COLUMN */

.lifestyle-left {
  flex: 1 1 48%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* tweak this if you want the left block a bit higher/lower */
  /* margin-top: -1rem; */
}

/* “Design” graphic – the circular membership diagram */

/* Container stays the same structure but becomes transparent */
.lifestyle-diagram {
    width: 500px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10rem;
}

/* Actual circular image */
.lifestyle-diagram-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 1px #151515;
    opacity: 0.95;
}

/* “YOUR PREFERENCES” */

.lifestyle-subtitle {
  font-size: 2rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 3rem;
}

.lifestyle-text {
  max-width: 26rem;
  line-height: 1.6;
  font-size: 1.1rem;
}

/* RIGHT COLUMN – tall lifestyle image */
.lifestyle-right {
    flex: 1 1 32%;
    display: flex;
    justify-content: center;
}

.lifestyle-photo {
    width: 100%;
    max-width: 560px;
    min-height: 1040px;
    border-radius: 0;
    border: 1px solid #222;
    background-image: url("../img/lifestyle-vertical.webp");  /* <– match the real filename */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
  /* Replace with real image if you want */
  /* background-image: url("assets/img/lifestyle-vertical.jpg");
     background-size: cover;
     background-position: center; */

/* ================================
   Lifestyle – responsive
   ================================ */

@media (max-width: 900px) {
  .section-lifestyle-heading {
    padding-top: 3rem;
    padding-bottom: 2.5rem;
  }

  .lifestyle-intro {
    font-size: 0.9rem;
  }

  .section-lifestyle-body {
    padding-top: 2.5rem;
    padding-bottom: 4rem;
  }

  .section-lifestyle-body .lifestyle-inner {
    flex-direction: column;
    gap: 3rem;
  }

  .lifestyle-left,
  .lifestyle-right {
    flex: 0 0 auto;
    width: 100%;
  }

  .lifestyle-diagram {
    width: 240px;
    height: 240px;
    margin-bottom: 1.5rem;
  }

  .lifestyle-text {
    max-width: 90vw;
  }

  .lifestyle-photo {
    max-width: 85vw;
    min-height: 420px;
  }
}

/* ================================
      YOUR SATISFACTION SECTION
   ================================ */

.section-satisfaction {
    padding: 3rem 1.5rem;
    background: transparent;                 /* matches global background */
    color: #fff;
}

.satisfaction-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.satisfaction-copy {
    text-align: center;               /* CENTER TITLE + TEXT */
    max-width: 800px;
    margin: 0 auto;                   /* centers the block */
}

.satisfaction-copy h2 {
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    letter-spacing: 0.05em;
}

.satisfaction-copy p {
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: 300;
}

/* ===============================
   LIFESTYLE – GET STARTED
   =============================== */

.section-get-started {
  background: transparent;
  padding: 1rem 1.5rem 7rem; /* top / sides / bottom */
}

/* Inner container */
.get-started-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Big image / slideshow block */
.get-started-visual {
  position: relative;   /* <-- ADD THIS */
  width: 100%;
  max-width: 1400px;
  aspect-ratio: 4 / 2;
  border-radius: 0;
  background: #111;
  border: 1px solid #222;
  margin-bottom: 3.5rem;
  overflow: hidden;
}

/* If you use a real <img> inside .get-started-visual */
.get-started-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Copy block */
.get-started-copy {
  max-width: 520px;      /* keeps text nicely narrow */
}

/* Title */
.get-started-title {
  font-size: 2rem;     /* match other section titles if needed */
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

/* Text under title */
.get-started-text {
  font-size: 1.1rem;
  line-height: 1.7;
  margin: 0 0 2.5rem;
}

/* Apply button (white pill, same language as other CTAs) */
.btn-apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2.9rem;
  border-radius: 999px;
  border: 1px solid #fff;
  color: #fff;
  background: transparent;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  transition: background 0.25s ease, color 0.25s ease;
}

/* Hover: white background, black text */
.btn-apply:hover,
.btn-apply:focus {
  background: #fff;
  color: #000;
}

/* Slideshow layering */
.get-started-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.get-started-slide.is-active {
  opacity: 1;
}

/* ---------- Mobile tweaks (optional) ---------- */
@media (max-width: 768px) {
  .section-get-started {
    padding: 4.5rem 1.5rem 5rem;
  }

  .get-started-visual {
    max-width: 100%;
    margin-bottom: 3rem;
  }

  .get-started-title {
    font-size: 1.6rem;
  }
}

/* =============================
   ABOUT — Full-width hero section
   ============================= */
/* Set the FIND YOURSELF section total width to match checkerboard */
.section-about-hero {
    width: 100%;
    max-width: 1400px;   /* <-- MATCHES THE CHECKERBOARD WIDTH */
    margin: 0 auto;      /* <-- CENTER THE SECTION */
    padding: 0;
}

.section-about-hero .section-title {
    text-align: center;         /* Title centered */
    margin-bottom: 3rem;
    /* Adjust the FIND YOURSELF title size */
    font-size: 2.2rem;   /* ← Change this value to the size you want */
    letter-spacing: 0.12em;  /* optional, keep/remove as you prefer */
    font-weight: 400;        /* optional */
}

/* Full-width hero image */
/* FIX: Match hero image width to checkerboard width and center it */
.section-about-hero img {
    width: 100% !important;      /* Adjust this until it matches perfectly */
    max-width: 1400px !important;  /* Same width cap as checkerboard */
    display: block !important;
    border-radius: 0 !important;
    margin-bottom: 2rem;        /* adjust: space between image and text */
}

/* Text + button container centered */
.section-about-hero .section-inner {
    max-width: 1400px;
    margin: 2rem auto 0 auto;
    padding: 5px;
    text-align: center;
}

.section-about-hero .about-hero-text {
    max-width: 900px;
    margin: 0 auto 2rem;  /* centers it inside the 1400px section */
    text-align: center;   /* keeps text centered visually */
    
    line-height: 1.6;     /* improves readability */
}

.section-about-hero .btn {
    margin-top: 1rem;     /* space above button */
    margin-bottom: 2rem;  /* space below button */
}

/* =========================================
   ABOUT – Part 6 : FAQ
   ========================================= */

.section-about-faq {
  background: #000;
  color: #fff;
  padding: 5rem 1.5rem 6rem;
}

.about-faq-inner {
  max-width: 900px;
  margin: 0 auto;
}

.about-faq-title {
  text-align: left;
  font-size: 1.4rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 2.5rem;
}

.about-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.about-faq-item {
  border-radius: 0.9rem;
  border: 1px solid #222;
  background: #050505;
  overflow: hidden;
}

/* Remove default marker */
.about-faq-item summary::-webkit-details-marker {
  display: none;
}

.about-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 0.95rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.95rem;
}

.about-faq-icon {
  margin-left: 1.5rem;
  font-size: 1.1rem;
}

.about-faq-body {
  border-top: 1px solid #1a1a1a;
  padding: 0.9rem 1.25rem 1.2rem;
  font-size: 0.9rem;
  line-height: 1.7;
}


/* =========================================
   ABOUT – Responsive adjustments
   ========================================= */

@media (max-width: 900px) {

  .about-hero-layout,
  .about-feature {
    flex-direction: column;
    text-align: center;
  }

  .about-hero-image,
  .about-feature-image {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .about-feature-copy,
  .about-hero-copy {
    max-width: 100%;
  }

  .about-faq-title {
    text-align: center;
  }
}

/* =========================================================
   PARTNERS PAGE
   ======================================================= */

/* ---------- Hero -------------------------------------------------------- */

.section-partner-hero {
  padding: 7rem 1.5rem 5rem;
  background: #000;
}

.section-partner-hero .section-inner {
  max-width: 1160px;
  margin: 0 auto;
  text-align: center;
}

.partner-hero-title {
  font-size: 2.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.partner-hero-subtitle {
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: none;
}

.partners-section {
    background: #000;
    padding: 4rem 0;
    color: #fff;
}

.partners-inner {
    max-width: 1160px;
    margin: 0 auto 6rem auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
}

.partners-inner.reverse {
    flex-direction: row-reverse;
}

.partners-text {
    width: 50%;
}

.partners-text h2 {
    font-size: 2.4rem;
    margin-bottom: 1.2rem;
    font-weight: 300;
}

.partners-text p {
    font-size: 1.1rem;
    line-height: 1.6;
}

.partners-image {
    width: 50%;
    height: 280px;
    background: #111;
    border: 1px solid #222;
    border-radius: 1.4rem;
}

/* CTA BUTTON — CENTERED */
.partners-cta-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 1rem;
}

/* Global outline-styled buttons (same as other pages) */
.btn {
    display: inline-block;
    padding: 0.9rem 2rem;
    font-size: 1rem;
    border-radius: 2rem;
    text-decoration: none;
    transition: all .3s ease;
    font-weight: 300;
    letter-spacing: .08rem;
}

.btn-outline {
    color: #fff;
    border: 1px solid #fff;
}

.btn-outline:hover {
    background: #fff;
    color: #000;
}

/* ================================
   CONTACT PAGE – HERO PANEL
   ================================ */

.section-contact-hero {
  padding: 6rem 1.5rem 5rem;
}

.section-contact-hero .contact-layout {
  max-width: 1160px;
  margin: 0 auto;
  display: center;
}

/* Left black panel with contact info */
.contact-panel {
  flex: 0 0 55%;
  background: transparent;
  border-right: 1px transparent;
  padding: 6rem 4rem;
  text-align: center;
}

.contact-empty-column {
  flex: 1;
}

/* CONTACT title */
.contact-title {
  font-size: 3rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin: 0 0 4rem;
}

/* Blocks for email + address */
.contact-block + .contact-block {
  margin-top: 3rem;
}

.contact-label {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #aaaaaa;
  margin-bottom: 0.75rem;
}

.contact-link {
  font-size: 1rem;
  color: #ffffff;
  text-decoration: none;
}

.contact-link:hover {
  text-decoration: underline;
}

.contact-address {
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

/* Responsive: stack the panel on mobile */
@media (max-width: 900px) {
  .section-contact-hero .contact-layout {
    display: block;
  }

  .contact-panel {
    border-right: none;
    padding: 4rem 2rem;
  }

  .contact-empty-column {
    display: none;
  }
}

/* ================================
   Footer
   ================================ */

.site-footer {
  border-top: 1px solid #151515;
  background: #000;
}

.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: #8a8a8a;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.footer-links a {
  color: #ffffff;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

/* ================================
   Responsive tweaks
   ================================ */

@media (max-width: 768px) {
  .header-inner {
    padding-inline: 1rem;
  }

  .careers-inner {
    padding-inline: 1.5rem;
  }

  .careers-wordmark {
    font-size: 1.2rem;
  }

  .careers-logo {
    width: 96px;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ================================
   CTA BOX (if you don't already
   have these styles from other pages)
   ================================ */

.section-cta {
  padding: 5rem 1.5rem 4rem;
}

.section-cta .section-inner {
  max-width: 960px;
  margin: 0 auto;
}

.cta-box {
  border-radius: 1.75rem;
  border: 1px solid #ffffff;
  padding: 3rem 2.5rem 2.5rem;
  text-align: center;
}

.cta-wordmark {
  display: block;
  margin: 0 auto 1.5rem;
  max-width: 160px;
}

.cta-title {
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

/* CTA buttons */
.cta-actions {
  display: inline-flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.btn-cta {
  background: transparent;
  color: #ffffff;
  border-radius: 999px;
  border: 1px solid #ffffff;
  padding: 0.85rem 2.2rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn-cta:hover,
.btn-cta:focus {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

/* CTA social line */
.cta-social {
  margin-top: 1.75rem;
  font-size: 0.85rem;
  text-align: center;
}

.cta-social p {
  margin: 0 0 0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cta-social-link {
  color: #ffffff;
  text-decoration: none;
}

.cta-social-link:hover {
  text-decoration: underline;
}

/* ================================
   FOOTER (if not already defined)
   ================================ */

.site-footer {
  border-top: 1px solid #151515;
  padding: 1.5rem 1.5rem 2rem;
  background: #000000;
}

.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

.footer-right a {
  color: #ffffff;
  text-decoration: none;
}

.footer-right a:hover {
  text-decoration: underline;
}

.footer-right span {
  margin: 0 0.35rem;
}

/* =========================
   FAQ
   ========================= */

.section-faq .faq-list {
  max-width: 720px;
  margin: 2rem auto 0;
}

.faq-item {
  border-bottom: 1px solid #222;
}

.faq-question {
  width: 100%;
  padding: 1rem 0;
  background: none;
  border: none;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  cursor: pointer;
  font-size: 0.95rem;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  font-size: 0.9rem;
  color: #ccc;
  transition: max-height 0.25s ease;
}

.faq-item.active .faq-answer {
  max-height: 200px;
}

.faq-toggle {
  font-size: 1.2rem;
}

/* ================================
   FAQ – Center title + spacing
=================================== */

/* Center the FAQ heading */
.section-faq h2 {
    text-align: center;
    margin-bottom: 2rem; /* adds a bit more breathing room */
}

.faq-item.active .faq-answer {
    margin-bottom: 1.75rem;  /* adjust as needed */
    line-height: 1.6;
}

/* =========================
   CTA
   ========================= */

.section-cta {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.cta-box {
  border-radius: 1.6rem;
  border: 1px solid #444;
  padding: 3rem 1.5rem;
  text-align: center;
}

.cta-actions {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0 1rem;
}

.cta-actions .btn + .btn {
  margin-left: 1rem;
}

.cta-social p {
  margin: 0.2rem 0;
  font-size: 0.85rem;
}

/* CTA box – adjust vertical padding (top + bottom space) */
.section-cta .cta-box {
    padding-top: 3rem;   /* adjust freely */
    padding-bottom: 3rem; /* adjust freely */
}

/* ---------------------------------------
   CTA – wordmark
-----------------------------------------*/
/* Bottom CTA wordmark */
.section-cta .cta-wordmark {
  display: block;
  margin: 0 auto 1.25rem;  /* no top margin, fixed bottom margin */
  max-width: 15rem;        /* controls visual size */
  width: 100%;             /* scales inside max-width */
  height: auto;            /* keeps aspect ratio */
}

/* -------------------------------------------
   CTA – Buttons (equal width, white outline)
-------------------------------------------- */

/* Base button style */
.section-cta .cta-actions .btn-cta {
    width: 10rem;                 /* identical width for both buttons */
    min-width: 10rem;
    text-align: center;
    padding-inline: 2rem;
    padding-block: 0.85rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;

    background: transparent;
    color: #fff;
    border: 1px solid #fff;       /* <-- RESTORES WHITE OUTLINE */
    border-radius: 999px;

    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.9rem;

    text-decoration: none;
    box-sizing: border-box;

    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Equal spacing between CONTACT / APPLY */
.section-cta .cta-actions {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
}

/* Hover / active state — white pill with black text */
.section-cta .cta-actions .btn-cta:hover,
.section-cta .cta-actions .btn-cta:focus {
    background: #fff;
    color: #000;
    border-color: #fff;
}

/* -------------------------------------------
   Mobile Fix – buttons full width & centered
-------------------------------------------- */
@media (max-width: 600px) {

    .section-cta .cta-actions {
        flex-direction: column;
        gap: 1rem;
    }

    .section-cta .cta-actions .btn-cta {
        width: 100%;        /* full width but same style */
        min-width: unset;   /* override desktop width */
    }
}

/* ---------------------------------------
   CTA – Social (already centered properly)
-----------------------------------------*/
.section-cta .cta-social {
  margin-top: 2rem;
  text-align: center;
}

/* =========================
   Page hero (other pages)
   ========================= */

.page-hero {
  text-align: center;
  padding-top: 4rem;
}

.page-hero h1 {
  font-size: 2.2rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.page-hero p {
  margin-top: 1rem;
  color: #ccc;
}

/* image placeholder */

.partner-image {
  border-radius: 1.4rem;
  border: 1px solid #222;
  min-height: 220px;
  background: #111;
}

/* =========================
   Contact
   ========================= */

.contact-info {
  text-align: center;
}

/* ======================
   Footer – legal links
   ====================== */

/* Desktop / base styles */
.footer-links {
    display: flex;              /* behaves like inline-flex but simpler with flex layouts */
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    white-space: nowrap;        /* keep everything on a single line on desktop */
}

.footer-links a,
.footer-links span {
    white-space: nowrap;
}

/* ======================
   Footer – mobile
   ====================== */
@media (max-width: 768px) {
    .footer-inner {
        flex-direction: column;     /* stack copyright + links */
        align-items: center;        /* horizontal centering */
        justify-content: center;
        text-align: center;
        gap: 0.75rem;
    }

        .footer-links {
        font-size: 0.75rem;         /* keep your smaller mobile size */
        letter-spacing: 0.05em;
        justify-content: center;    /* center within full width */
        flex-wrap: nowrap;          /* do NOT wrap – stay on one line */
        white-space: nowrap;        /* force single line */
        width: 100%;                /* stretch to full width so centering is true */
    }

    .footer-links a,
    .footer-links span {
        text-align: center;
    }
}

/* =========================
   Responsive rules
   ========================= */

@media (max-width: 900px) {
  .hero-inner {
    flex-direction: column;
  }

  .hero-inner > * + * {
    margin-left: 0;
    margin-top: 3rem;
  }

  .two-column {
    flex-direction: column;
  }

  .two-column > * + * {
    margin-left: 0;
    margin-top: 3rem;
  }

  .steps-grid {
    flex-direction: column;
  }

  .step + .step {
    margin-left: 0;
    margin-top: 2rem;
  }

  .archetype-slider {
    flex-direction: column;
    align-items: flex-start;
  }

  .archetype-content {
    margin-left: 0;
    margin-top: 1.5rem;
  }

  .partner-block,
  .partner-block-reverse {
    flex-direction: column;
  }

  .partner-block > * + *,
  .partner-block-reverse > * + * {
    margin-left: 0;
    margin-top: 3rem;
  }
}

@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    text-align: center;
  }

  .cta-actions {
    flex-direction: column;
  }

  .cta-actions .btn + .btn {
    margin-left: 0;
    margin-top: 0.75rem;
  }
}

/* ===== Add your new 3.4 responsive rules BELOW this line ===== */
 
/* 3.4 — Membership section responsive refinements */

@media (max-width: 900px) {
  .membership-layout {
    flex-direction: column;
  }

  .membership-copy {
    padding-left: 0;
    padding-right: 0;
    margin-top: 2.5rem;
  }

  .card-mockup {
    width: 100%;
    max-width: 600px;
    min-height: 200px; /* mobile taller card */
    margin: 0 auto;
  }
}

/* ============================================
   CAREERS PAGE – CENTER + MANUAL SPACING
   Works with: .section-careers > .section-inner.careers-inner
   ============================================ */

/* Outer section – keeps things centered horizontally */
.section-careers {
    display: flex;
    justify-content: center;
}

/* Main careers block – vertical + horizontal centering */
.section-careers .careers-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    /* Height + padding you can tweak */
    min-height: 80vh;         /* how vertically centered it feels */
    padding-top: 40px;
    padding-bottom: 40px;
}

/* --------------------------------------------
   MOBILE (default) – manual spacing + sizes
   -------------------------------------------- */

/* LOGO */
.careers-logo {
    width: 140px;             /* 🔧 logo size */
    margin-bottom: 32px;      /* 🔧 space logo → wordmark */
    display: block;
}

/* WORDMARK */
.careers-wordmark-img {
    width: 320px;             /* 🔧 wordmark size */
    margin-bottom: 24px;      /* 🔧 space wordmark → COMING SOON */
    display: block;
}

/* COMING SOON TEXT */
.careers-coming {
    margin: 0;                /* avoid browser default margins */
    font-size: 18px;          /* 🔧 text size */
    letter-spacing: 0.22em;   /* 🔧 letter spacing */
    text-transform: uppercase;
    color: #fff;
}

/* --------------------------------------------
   DESKTOP OVERRIDES
   -------------------------------------------- */
@media (min-width: 768px) {

    .section-careers .careers-inner {
        min-height: 85vh;     /* can tweak desktop centering separately */
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .careers-logo {
        width: 180px;         /* 🔧 desktop logo size */
        margin-bottom: 40px;  /* 🔧 desktop logo → wordmark spacing */
    }

    .careers-wordmark-img {
        width: 440px;         /* 🔧 desktop wordmark size */
        margin-bottom: 32px;  /* 🔧 desktop wordmark → COMING SOON spacing */
    }

    .careers-coming {
        font-size: 22px;      /* 🔧 desktop text size */
        letter-spacing: 0.25em;
    }
}