/* ==========================================================================
   REALITY DREAMING — A Street of Dreams Empowerment Center
   Single stylesheet. Order: tokens → base → layout → components → responsive.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Alex+Brush&family=Kaushan+Script&display=swap');

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces — patina dark, warm not blue */
  --cream:        #15110c;   /* page ground */
  --cream-soft:   #201911;   /* raised panels */
  --sand:         #281f15;   /* alternating band */
  --ink-panel:    #0c0906;   /* deepest band */
  --ink-panel-2:  #171009;

  /* Ink — light on dark */
  --ink:          #f3e7cd;   /* headings */
  --text:         #ddcfb2;   /* body */
  --text-soft:    #b3a486;   /* secondary */
  --on-dark:      #f3e7cd;
  --on-dark-soft: #b3a486;

  /* Brass — lit, not sunk */
  --gold:         #c08d3e;
  --gold-light:   #e6c47f;
  --gold-deep:    #dcb264;   /* accent text on dark */
  --gold-shadow:  #8a6023;   /* pressed / hover fills */
  --gold-pale:    #cfa967;

  --charcoal:     #cdc0a4;   /* quiet light accent */
  --line:         rgba(214, 174, 106, 0.20);
  --line-strong:  rgba(214, 174, 106, 0.38);
  --line-dark:    rgba(214, 174, 106, 0.30);

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-script:  'Alex Brush', cursive;
  --font-brush:   'Kaushan Script', 'Alex Brush', cursive;
  --font-body:    'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --max-width: 1180px;
  --radius: 2px;
  --shadow-card: 0 1px 0 rgba(214,174,106,0.07), 0 12px 28px rgba(0, 0, 0, 0.5);
  --shadow-lift: 0 1px 0 rgba(214,174,106,0.12), 0 20px 42px rgba(0, 0, 0, 0.62);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
/* native controls — selects, date pickers, scrollbars — follow the page */
:root { color-scheme: dark; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.12rem;
  line-height: 1.66;
  font-weight: 500;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 0.5em;
  line-height: 1.18;
  font-weight: 600;
}
h1 { font-size: clamp(2.35rem, 5.5vw, 3.75rem); }
h2 { font-size: clamp(1.85rem, 3.8vw, 2.7rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; color: var(--text-soft); }

.script { font-family: var(--font-script); color: var(--gold); font-weight: 400; }

.eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.9em;
}

/* Ornamental rule: gold hairline with a diamond at centre */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 18px auto;
  max-width: 240px;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.divider::after { background: linear-gradient(to left, transparent, var(--gold), transparent); }
.divider i {
  width: 6px; height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.note {
  font-size: 0.86rem;
  color: var(--text-soft);
  background: rgba(255, 244, 219, 0.05);
  border-left: 3px solid var(--gold);
  padding: 14px 18px;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 84px 0; }
.section--tight { padding: 52px 0; }
.section--sand { background: var(--sand); }
.section--panel { background: var(--cream-soft); }
.section--dark {
  background: var(--ink-panel);
  color: var(--on-dark);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #f4e9d3; }
.section--dark p { color: var(--on-dark-soft); }
.section--dark .eyebrow { color: var(--gold-light); }

.section-head {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 52px;
}
.section-head p { margin-top: 12px; }

.grid-2   { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.grid-3   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-4   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.grid-2up { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.grid-gap-row { margin-bottom: 24px; }

/* Grid children default to min-width:auto, which lets long unbreakable strings
   (emails, URLs) blow out the track. */
.grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-2up > *, .doors > * { min-width: 0; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.btn-primary {
  background: var(--gold);
  color: #17110a;
  border-color: var(--gold);
}
.btn-primary:hover { background: var(--gold-light); border-color: var(--gold-light); }

.btn-outline-dark { background: transparent; color: var(--ink); border-color: rgba(214,174,106,0.42); }
.btn-outline-dark:hover { background: var(--gold); color: #17110a; border-color: var(--gold); }

.btn-outline { background: transparent; color: #f4e9d3; border-color: rgba(244,233,211,0.55); }
.btn-outline:hover { background: #f4e9d3; color: #2a231b; }

.btn-block { width: 100%; }
.btn-sm { padding: 11px 20px; font-size: 0.68rem; letter-spacing: 0.16em; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15, 11, 8, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 34px; width: auto; }
.brand-text {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.07em;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1.15;
}
.brand-text strong { font-weight: 700; }
.brand-text span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-top: 2px;
}

.site-header nav { flex: 1; display: flex; justify-content: center; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 17px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--gold-deep);
  border-bottom-color: var(--gold);
}

.nav-cta { display: flex; align-items: center; }
.nav-cta-mobile { display: none; }
.nav-cta .btn {
  border-color: var(--gold);
  color: var(--gold-deep);
  background: transparent;
}
.nav-cta .btn:hover { background: var(--gold); color: #17110a; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); display: block; }

/* --------------------------------------------------------------------------
   6. Home hero (brick)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background-color: #14100b;
  background-image:
    radial-gradient(ellipse 62% 78% at 50% 44%, rgba(255, 226, 168, 0.22), transparent 68%),
    url("../images/rust.jpg");
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  text-align: center;
  padding: clamp(52px, 8vw, 96px) 24px clamp(56px, 8vw, 100px);
  border-bottom: 1px solid var(--line);
}

.hero-wings {
  display: block;
  width: min(86%, 580px);
  height: auto;
  margin: 0 auto clamp(6px, 1.6vw, 18px);
  filter:
    drop-shadow(0 1px 1px rgba(58, 41, 16, 0.28))
    drop-shadow(0 3px 7px rgba(48, 34, 14, 0.22));
}

.hero-wordmark {
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 9.2vw, 5.5rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0;
}
.hero-wordmark .w-light { font-weight: 400; }
.hero-wordmark .w-bold  { font-weight: 700; }

/* The tagline is deliberately the odd one out: a brush script, not caps. It
   reads as a separate voice from the wordmark instead of competing with it for
   the same caps-serif attention — and it carries real weight on the wall. */
.hero-sub {
  margin: clamp(6px, 1.4vw, 14px) 0 0;
  font-family: var(--font-brush);
  font-size: clamp(1.45rem, 4.3vw, 2.5rem);
  letter-spacing: 0.005em;
  text-transform: none;
  line-height: 1.3;
  color: #f7e6c2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
}
.hero-sub span {
  display: inline-block;
  position: relative;
  padding: 0 clamp(22px, 4.4vw, 46px);
}
.hero-sub span::before, .hero-sub span::after {
  content: "";
  position: absolute;
  top: 60%;
  width: clamp(14px, 3vw, 32px);
  height: 1px;
  background: var(--gold);
}
.hero-sub span::before { left: 0; }
.hero-sub span::after  { right: 0; }

.hero-values {
  margin: clamp(16px, 2.6vw, 26px) 0 0;
  font-size: clamp(0.78rem, 2.6vw, 1.12rem);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: #f6e8c8;
  line-height: 1.95;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.75);
}

.hero-cta {
  display: block;
  margin: clamp(22px, 3.4vw, 38px) auto 0;
  max-width: 430px;
  padding: clamp(15px, 2.4vw, 22px) clamp(18px, 4vw, 34px);
  border: 1px solid var(--line-strong);
  outline: 1px solid var(--line);
  outline-offset: 4px;
  color: #f5e4bd;
  font-size: clamp(0.8rem, 2.65vw, 1.1rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.7;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.75);
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.hero-cta-line { display: block; }
.hero-cta-arrow {
  display: block;
  margin-top: 8px;
  color: var(--gold);
  font-size: 1.15em;
  transition: transform 0.22s ease;
}
.hero-cta:hover, .hero-cta:focus-visible {
  background: rgba(255, 226, 168, 0.09);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.hero-cta:hover .hero-cta-arrow { transform: translateX(7px); }

/* --------------------------------------------------------------------------
   7. Pillars strip
   -------------------------------------------------------------------------- */
.pillars {
  background: var(--cream-soft);
  border-bottom: 1px solid var(--line);
}
.pillars ul {
  list-style: none;
  margin: 0 auto;
  padding: 30px 24px;
  max-width: var(--max-width);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  text-align: center;
}
.pillars li {
  padding: 4px 10px;
  border-left: 1px solid var(--line);
  min-width: 0;
}
.pillars li:first-child { border-left: none; }
.pillar-icon { font-size: 1.5rem; line-height: 1; display: block; margin-bottom: 10px; }
.pillar-name {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}
.pillar-note {
  display: block;
  font-size: 0.74rem;
  color: var(--text-soft);
  margin-top: 3px;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   8. Mission block
   -------------------------------------------------------------------------- */
.mission { display: block; }
.mission-photo { position: relative; min-height: 340px; overflow: hidden; }
.mission-photo img { width: 100%; height: 100%; object-fit: cover; }
.mission-body {
  background: var(--cream-soft);
  padding: clamp(48px, 6vw, 84px) clamp(26px, 4vw, 56px);
  max-width: 780px;
  margin: 0 auto;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.mission-body h2 {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 3vw, 2rem);
}
.mission-body .btn { align-self: center; margin-top: 10px; }

/* --------------------------------------------------------------------------
   9. Offer tiles
   -------------------------------------------------------------------------- */
.offer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.offer-card {
  position: relative;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px 22px;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--ink-panel);
  background-size: cover;
  background-position: center;
  color: var(--on-dark);
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.offer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.offer-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20,15,11,0.9) 12%, rgba(20,15,11,0.55) 55%, rgba(20,15,11,0.32) 100%);
}
.offer-card > * { position: relative; z-index: 1; }
.offer-card h3 {
  color: #f4e9d3;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.offer-card p { color: #cdbfa4; font-size: 0.86rem; margin-bottom: 14px; }
.offer-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  padding: 9px 16px;
  border: 1px solid rgba(230, 196, 127, 0.6);
  border-radius: var(--radius);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.offer-link::after { content: "\2192"; }
.offer-card:hover .offer-link,
.offer-card:focus-visible .offer-link {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: #17110a;
}

/* Tiles with no photo yet still read as brick rather than a flat block */
.offer-card--brick {
  background-image: url("../images/rust.jpg");
  background-size: 300px auto;
}
.offer-card--brick::before {
  background: linear-gradient(to top, rgba(20,15,11,0.92) 15%, rgba(30,23,16,0.72) 100%);
}

/* --------------------------------------------------------------------------
   10. Interior page hero
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  text-align: center;
  padding: 72px 0 62px;
  background-color: #14100b;
  background-image:
    radial-gradient(ellipse 70% 130% at 50% 30%, rgba(255, 226, 168, 0.20), transparent 70%),
    url("../images/rust.jpg");
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  border-bottom: 1px solid var(--line);
}
/* The rust texture has bright patches that eat light type, so the banner
   content sits on its own scrim rather than straight on the photo. */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 78% 96% at 50% 50%, rgba(10, 8, 5, 0.72) 0%, rgba(10, 8, 5, 0.52) 55%, rgba(10, 8, 5, 0.34) 100%);
  pointer-events: none;
  z-index: 1;
}
.page-hero > .container { position: relative; z-index: 2; }

.page-hero h1 { color: var(--ink); text-shadow: 0 2px 8px rgba(0,0,0,0.85); }

/* The script line was reading as a faded echo of the line above it. It keeps
   the script face but gets its own solid, brighter fill and a real shadow. */
.page-hero h1 .script {
  color: var(--gold-light);
  -webkit-text-fill-color: var(--gold-light);
  background: none;
  filter: none;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.page-hero p {
  color: #eaddbf;
  max-width: 620px;
  margin: 0 auto;
  font-size: 1.16rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}

/* --------------------------------------------------------------------------
   11. Cards
   -------------------------------------------------------------------------- */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.door {
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 28px;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.door:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.door .glyph { font-size: 1.9rem; margin-bottom: 12px; }
.door p { min-height: 66px; }

.icon-card { text-align: center; padding: 22px 14px; }
.icon-card .glyph {
  width: 54px; height: 54px;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-size: 1.25rem;
  color: var(--gold-deep);
}
.icon-card h4 {
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.icon-card p { font-size: 0.88rem; }

.pillar-card {
  background: var(--ink-panel-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 32px 22px;
  text-align: center;
}
.pillar-word {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--gold-light);
  margin-bottom: 8px;
}
.pillar-card p { color: var(--on-dark-soft); font-size: 0.9rem; margin: 0; }

.class-card, .event-card {
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}
.class-card-body, .event-card-body {
  padding: 26px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.class-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-deep);
  background: rgba(169,121,63,0.14);
  padding: 5px 11px;
  border-radius: var(--radius);
  margin-bottom: 13px;
}
.meta-list {
  list-style: none;
  margin: 15px 0 20px;
  padding: 15px 0 0;
  border-top: 1px dashed var(--line-strong);
  font-size: 0.85rem;
  color: var(--text-soft);
}
.meta-list li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.meta-list li strong { color: var(--ink); font-weight: 600; text-align: right; }
.class-card-body .btn, .event-card-body .btn { margin-top: auto; }

.testimonial-card {
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 26px;
  box-shadow: var(--shadow-card);
}
.testimonial-card p.quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--ink);
}
.testimonial-name {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   12. Chips
   -------------------------------------------------------------------------- */
.chip-row { display: flex; flex-wrap: wrap; justify-content: center; }
.category-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  background: rgba(255, 244, 219, 0.05);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
  margin: 0 8px 8px 0;
}

/* --------------------------------------------------------------------------
   13. Photos & gallery
   -------------------------------------------------------------------------- */
.theme-photo, .venue-photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 0 0 6px rgba(32,25,17,0.9), 0 0 0 7px var(--line), 0 14px 30px rgba(0,0,0,0.55);
}
.theme-photo img, .venue-photo img { width: 100%; height: 100%; object-fit: cover; }
.venue-photo { min-height: 100%; }

.gallery-filters { text-align: center; margin-bottom: 36px; }
.gallery-filters .category-chip { cursor: pointer; background: transparent; }
.gallery-filters .category-chip.active-filter { background: var(--gold); color: #17110a; border-color: var(--gold); }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--sand);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  color: var(--gold-deep);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1.5px dashed var(--gold);
}
.gallery-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 13px;
  background: linear-gradient(to top, rgba(20,15,11,0.8), transparent);
  color: #f4e9d3;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */
.form-card {
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow-card);
}
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-deep);
  margin-bottom: 7px;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.94rem;
  background: #1b150e;
  color: var(--ink);
}
.field input::placeholder, .field textarea::placeholder { color: #8a7d66; }
.field textarea { resize: vertical; min-height: 118px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.newsletter-box {
  background: var(--ink-panel);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 42px 38px;
  color: var(--on-dark);
}
.newsletter-box h2 { color: #f4e9d3; }
.newsletter-box p { color: var(--on-dark-soft); }
.newsletter-box .field label { color: var(--gold-light); }
.newsletter-box .field input,
.newsletter-box .field select {
  background: #16110c;
  border-color: var(--line-dark);
  color: var(--on-dark);
}

/* --------------------------------------------------------------------------
   15. Info lists
   -------------------------------------------------------------------------- */
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li {
  display: flex;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.94rem;
}
.info-list li:last-child { border-bottom: none; }
.info-list .k { min-width: 150px; font-weight: 600; color: var(--ink); }
.info-list li span { overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   16. Venue pricing panel
   -------------------------------------------------------------------------- */
.pricing-panel {
  background: var(--ink-panel-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 38px 32px;
  display: flex;
  flex-direction: column;
}
.pricing-panel .eyebrow { color: var(--gold-light); }
.pricing-script { font-size: 1.8rem; color: var(--gold-light); margin: -4px 0 22px; }
.rate-list { display: flex; flex-direction: column; }
.rate-card { padding: 15px 0; border-top: 1px solid var(--line-dark); text-align: center; }
.rate-card:first-child { border-top: none; padding-top: 0; }
.rate-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  margin-bottom: 4px;
}
.rate-amount { font-family: var(--font-display); font-size: 2rem; color: var(--gold-light); line-height: 1.1; }
.rate-amount em {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.92rem;
  color: var(--on-dark-soft);
}
.spec-list {
  list-style: none;
  margin: 24px 0 26px;
  padding: 20px 0 0;
  border-top: 1px solid var(--line-dark);
  text-align: center;
  font-size: 0.88rem;
  color: var(--on-dark-soft);
}
.spec-list li { padding: 4px 0; }
.pricing-panel .btn { margin-top: auto; }

.perfect-grid .icon-card h4 { margin-bottom: 0; }
.perfect-note { margin-top: 28px; }
.perfect-note a { color: var(--gold-deep); text-decoration: underline; }
.closing-line { font-size: 1.8rem; margin-top: 32px; line-height: 1.4; }

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */
.faq-item {
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 11px;
  overflow: hidden;
}
.faq-item summary {
  padding: 17px 21px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 1.35rem;
  color: var(--gold-deep);
  flex: none;
  line-height: 1;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--gold-deep); }
.faq-answer { padding: 0 21px 19px; }
.faq-answer p { margin: 0; font-size: 0.93rem; }

/* --------------------------------------------------------------------------
   18. Calendar
   -------------------------------------------------------------------------- */
.cal {
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 24px;
}
.cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 12px;
}
.cal-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  margin: 0;
  min-width: 8.5em;
  text-align: center;
}
.cal-nav {
  width: 38px; height: 38px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold-deep);
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.cal-nav:hover { background: var(--gold); color: #17110a; }

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 18px;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.cal-legend span { display: inline-flex; align-items: center; gap: 7px; }
.cal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); display: inline-block; flex: none; }
.cal-dot--booked { background: #9a5b4a; }
.cal-dot--today  { background: var(--ink); }

.cal-dows, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-dows {
  margin-bottom: 5px;
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
  text-align: center;
}
.cal-dows abbr { text-decoration: none; border: none; }

.cal-cell {
  min-height: 92px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 244, 219, 0.05);
  text-align: left;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
button.cal-cell { cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
button.cal-cell:hover { border-color: var(--gold); box-shadow: 0 3px 12px rgba(0,0,0,0.5); }
.cal-cell.is-outside { opacity: 0.4; }
.cal-cell.is-today { border-color: var(--ink); border-width: 2px; }
.cal-cell.is-booked { background: rgba(154,91,74,0.28); }
.cal-cell.is-selected { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(169,121,63,0.32); }
.cal-num { font-weight: 600; font-size: 0.83rem; color: var(--ink); }

.cal-pills { display: flex; flex-direction: column; gap: 3px; }
.cal-pill {
  font-size: 0.6rem;
  line-height: 1.3;
  padding: 3px 6px;
  border-radius: var(--radius);
  background: rgba(169,121,63,0.16);
  color: var(--gold-deep);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-pill--booked { background: rgba(196,110,86,0.22); color: #e8a48c; }
.cal-more { font-size: 0.58rem; color: var(--text-soft); }
.cal-dots { display: none; gap: 3px; margin-top: auto; }

.cal-detail {
  margin-top: 20px;
  padding: 20px;
  border-top: 1px dashed var(--line-strong);
  outline: none;
}
.cal-detail h3 { font-size: 1.1rem; margin-bottom: 10px; }
.cal-detail h4 { font-family: var(--font-display); font-size: 1rem; margin: 6px 0 2px; }
.cal-detail p { margin: 0; font-size: 0.89rem; }
.cal-hint { color: var(--text-soft); font-style: italic; }
.cal-booked-note {
  background: rgba(196,110,86,0.16);
  color: #e8a48c;
  border-left: 3px solid #9a5b4a;
  padding: 10px 14px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 12px !important;
}
.cal-detail-list { list-style: none; margin: 0; padding: 0; }
.cal-detail-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.cal-detail-list li:last-child { border-bottom: none; }
.cal-detail-list .btn { flex: none; }

.cal-ongoing { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line-strong); }
.cal-ongoing h4 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 8px;
}
.cal-ongoing ul { list-style: none; margin: 0; padding: 0; font-size: 0.89rem; }
.cal-ongoing li { padding: 5px 0; color: var(--text-soft); }
.cal-ongoing li a { color: var(--gold-deep); text-decoration: underline; }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink-panel);
  color: var(--on-dark-soft);
  padding: 62px 0 26px;
  border-top: 1px solid var(--line-dark);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 36px;
  margin-bottom: 44px;
}
.footer-brand img { height: 42px; width: auto; margin-bottom: 14px; }
.footer-brand p { color: #a1937a; font-size: 0.86rem; }
.site-footer h4 {
  color: #f4e9d3;
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 9px; color: var(--on-dark-soft); font-size: 0.88rem; }
.footer-links a { font-size: 0.88rem; color: var(--on-dark-soft); overflow-wrap: anywhere; transition: color 0.2s; }
.footer-links a:hover { color: var(--gold-light); }
.footer-bottom {
  border-top: 1px solid var(--line-dark);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.76rem;
  color: #8b7e66;
}
.social-row { display: flex; gap: 12px; }
.social-row a {
  width: 34px; height: 34px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  color: var(--gold-light);
}
.social-row a:hover { background: var(--gold); color: #1a1309; border-color: var(--gold); }

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */

/* The full menu needs ~1260px on one line; below that use the toggle. */
@media (max-width: 1259px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .header-inner.open .nav-links {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: #16110b;
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 24px 24px;
    gap: 14px;
    border-bottom: 1px solid var(--line);
  }
  /* The header CTA stays hidden; the menu panel carries its own copy. */
  .nav-cta-mobile { display: block; margin-top: 4px; }
  .nav-cta-mobile a {
    display: inline-block;
    border: 1px solid var(--gold);
    color: var(--gold-deep);
    padding: 10px 20px;
  }
}

@media (max-width: 980px) {
  .doors { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3, .grid-4, .grid-2up { grid-template-columns: 1fr 1fr; }
  .offer-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .mission { grid-template-columns: 1fr; }
  .mission-photo { min-height: 260px; }
  .venue-photo { min-height: 300px; }
  .pillars ul { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
  .pillars li:nth-child(3n + 1) { border-left: none; }
}

@media (max-width: 780px) {
  .cal { padding: 14px 10px; }
  .cal-cell { min-height: 56px; padding: 5px 4px; align-items: center; }
  .cal-num { font-size: 0.76rem; }
  .cal-pills { display: none; }
  .cal-dots { display: flex; }
  .cal-dows { font-size: 0.58rem; letter-spacing: 0.04em; }
  .cal-dows, .cal-grid { gap: 3px; }
  .cal-detail { padding: 16px 4px 0; }
  .cal-detail-list li { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cal-detail-list .btn { width: 100%; }
}

@media (max-width: 700px) {
  .header-inner { gap: 12px; padding-left: 16px; padding-right: 16px; }
  .brand { gap: 9px; }
  .brand img { height: 26px; }
  .brand-text { font-size: 0.9rem; white-space: normal; }
  .brand-text span { font-size: 0.44rem; letter-spacing: 0.1em; }
  .form-card { padding: 24px 18px; }
  .newsletter-box { padding: 30px 20px; }
  .info-list li { flex-direction: column; gap: 3px; }
  .info-list .k { min-width: 0; }
  .section { padding: 58px 0; }
}

@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
  .offer-grid { grid-template-columns: 1fr; }
  .offer-card { min-height: 230px; }
}

/* On the narrowest phones two text columns leave ~70px of usable width. */
@media (max-width: 430px) {
  .grid-3, .grid-4, .grid-2up { grid-template-columns: 1fr; }
  .pillars ul { grid-template-columns: repeat(2, 1fr); }
  .pillars li:nth-child(3n + 1) { border-left: 1px solid var(--line); }
  .pillars li:nth-child(2n + 1) { border-left: none; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   21. Line icons
   -------------------------------------------------------------------------- */
.pico, .dico {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pillar-icon { display: block; margin: 0 auto 10px; }
.pillar-icon .pico { width: 34px; height: 26px; display: block; margin: 0 auto; }
.door .glyph .dico { width: 34px; height: 34px; display: block; margin: 0 auto; }

/* Header: the wordmark tagline is the first thing to give up space to the menu */
.nav-cta .btn { white-space: nowrap; }
@media (max-width: 1420px) {
  .brand-text span { display: none; }
}
.icon-card .glyph .dico { width: 24px; height: 24px; }

/* --------------------------------------------------------------------------
   22. Worn brick edge
   The brick panels are burned back at the edges with an irregular, feathered
   black so they read as an aged wall rather than a cropped rectangle.
   -------------------------------------------------------------------------- */
.hero, .page-hero { position: relative; }
.hero::after, .page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 86% 84% at 50% 48%, transparent 34%, rgba(0,0,0,0.55) 74%, rgba(0,0,0,0.88) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Keep the content above the wear layer */
.hero > *, .page-hero > .container { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   23. Metallic gold display type
   Applied to h1/h2 and the wordmark. WE.Are.DREAMERS. opts out via
   <body class="plain-headings"> so its all-black treatment is untouched.
   -------------------------------------------------------------------------- */
.hero-wordmark,
.coming-soon-title,
body:not(.plain-headings) h1,
body:not(.plain-headings) h2 {
  background-image: linear-gradient(
    177deg,
    #8c6526 0%,
    #c69a4c 12%,
    #f4dda6 27%,
    #d3a758 39%,
    #a87c33 53%,
    #8a6425 66%,
    #dcb266 83%,
    #8f6827 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.85)) drop-shadow(0 0 14px rgba(226,180,96,0.28));
}

/* The wordmark carries a slightly brighter, brassier cut of the gold than the
   section headings do, so the logo still reads as the brightest thing on the
   wall. It follows the rule above and matches its specificity to win. */
body h1.hero-wordmark,
.hero-wordmark {
  background-image: linear-gradient(
    177deg,
    #916a29 0%,
    #cfa254 12%,
    #fbe7b6 27%,
    #dcb266 39%,
    #ac8036 53%,
    #906a28 66%,
    #e6c079 83%,
    #946c2a 100%
  );
  filter:
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 20px rgba(230, 186, 104, 0.34))
    drop-shadow(0 0 46px rgba(214, 160, 74, 0.2));
}
/* Nested spans must stay transparent or they punch a hole in the gradient */
.hero-wordmark span,
body:not(.plain-headings) h1 .script,
body:not(.plain-headings) h2 .script,
body:not(.plain-headings) h1 span,
body:not(.plain-headings) h2 span { color: inherit; }

/* On the dark bands the same fill needs a darker drop shadow to sit down */
body:not(.plain-headings) .section--dark h1,
body:not(.plain-headings) .section--dark h2 {
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.9)) drop-shadow(0 2px 4px rgba(0,0,0,0.7));
}

/* --------------------------------------------------------------------------
   24. Cormorant tuning
   The face runs small and light, so UI text needs weight and a touch more size.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: 0.01em; }
.nav-links a { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; }
.btn { font-size: 0.86rem; font-weight: 600; letter-spacing: 0.16em; }
.btn-sm { font-size: 0.8rem; letter-spacing: 0.13em; }
.eyebrow { font-size: 0.84rem; font-weight: 600; letter-spacing: 0.22em; }
.field label { font-size: 0.8rem; font-weight: 600; }
.field input, .field select, .field textarea { font-size: 1.02rem; }
.pillar-name { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.12em; }
.pillar-note { font-size: 0.92rem; }
.category-chip { font-size: 0.82rem; font-weight: 600; }
.class-tag { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; }
.offer-card h3 { font-size: 1.45rem; }
.offer-card p { font-size: 0.98rem; }
.offer-link { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; }
.icon-card h4 { font-size: 0.96rem; font-weight: 700; letter-spacing: 0.07em; }
.meta-list { font-size: 0.96rem; }
.info-list li { font-size: 1.04rem; }
.footer-links a, .footer-links li { font-size: 1rem; }
.site-footer h4 { font-size: 0.86rem; font-weight: 700; }
.footer-bottom { font-size: 0.88rem; }
.cal-legend { font-size: 0.82rem; font-weight: 600; }
.cal-dows { font-size: 0.8rem; font-weight: 700; }
.cal-num { font-size: 0.95rem; font-weight: 700; }
.cal-pill { font-size: 0.72rem; }
.faq-item summary { font-size: 1.15rem; font-weight: 600; }
.testimonial-name { font-size: 0.84rem; font-weight: 700; }
.rate-label { font-size: 0.84rem; font-weight: 600; }
.hero-sub { font-weight: 400; }
.hero-sub span::before, .hero-sub span::after { background: var(--gold); }
.hero-values { font-weight: 700; }
.hero-cta { font-weight: 700; }
.note { font-size: 0.96rem; }

/* --------------------------------------------------------------------------
   24. Mentor story (WE.Are.DREAMERS.) — placeholder until the photo/bio land
   -------------------------------------------------------------------------- */
.story-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 380px;
  margin: 0 auto clamp(30px, 4vw, 46px);
  min-height: 300px;
  aspect-ratio: 4 / 5;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--cream-soft);
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.story-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }


@media (max-width: 760px) {
  .story-photo { aspect-ratio: 4 / 3; min-height: 220px; }
}

/* Rachelle's story video — a clean vertical player (9:16) above her story.
   Filled in by main.js; autoplays silently when scrolled into view. */
.story-video {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto clamp(30px, 4vw, 46px);
  aspect-ratio: 9 / 16;
  background: #0b0906;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
}
.story-video > div,
.story-video iframe,
.story-video video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #0b0906;
}
.story-video video { object-fit: cover; cursor: pointer; }
.story-video-sound {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  padding: 8px 14px 7px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(10,8,5,0.78);
  color: var(--gold-light);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}
.story-video-sound:hover { background: rgba(10,8,5,0.95); }
.story-video-sound[aria-pressed="true"] { color: var(--ink); }
@media (max-width: 520px) { .story-video { max-width: min(100%, 340px); } }

/* "Coming Soon" — set in the same display face as the site's titles.
   Rentals page: a large gold title above the hero heading.
   Home cards: big centered type straight over the dimmed photograph. */
.coming-soon-title {
  display: block;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.page-hero .coming-soon-note {
  max-width: 560px;
  margin: 18px auto 0;
  font-size: 1rem;
  color: #d8c9a8;
}

.photo-door figure { position: relative; }
.photo-door--soon figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(8,6,4,0.42);
  pointer-events: none;
}
.soon-ribbon {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6%;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.9vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
  text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 4px 18px rgba(0,0,0,0.85);
  pointer-events: none;
}
.photo-door--soon figure img { filter: saturate(0.55) brightness(0.55); }
.photo-door--soon:hover figure img { filter: saturate(0.7) brightness(0.65); }

/* --------------------------------------------------------------------------
   25. Photo doors (home) — three real photographs, each linking to a branch
   -------------------------------------------------------------------------- */
.photo-doors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.photo-doors > * { min-width: 0; }

.photo-door {
  display: flex;
  flex-direction: column;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}
.photo-door:hover,
.photo-door:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: var(--gold);
}
.photo-door:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.photo-door figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sand);
}
.photo-door figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.photo-door:hover figure img { transform: scale(1.045); }

.photo-door-body {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.photo-door-body h3 { margin: 0; font-size: 1.42rem; }
.photo-door-body p { margin: 0; font-size: 0.95rem; flex: 1; }

/* The whole card is the link, but a bare gold caption doesn't read as
   pressable — so it gets a real button box. */
.photo-door-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 11px 20px;
  border: 1px solid rgba(214, 174, 106, 0.55);
  border-radius: var(--radius);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.photo-door:hover .photo-door-link,
.photo-door:focus-visible .photo-door-link {
  background: var(--gold);
  border-color: var(--gold);
  color: #17110a;
}
.photo-door-link::after {
  content: "\2192";
  display: inline-block;
  transition: transform 0.24s ease;
}
.photo-door:hover .photo-door-link::after { transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
  .photo-door,
  .photo-door figure img,
  .photo-door-link::after { transition: none; }
  .photo-door:hover { transform: none; }
  .photo-door:hover figure img { transform: none; }
}

@media (max-width: 900px) {
  .photo-doors { grid-template-columns: 1fr 1fr; }
  .photo-doors > :last-child { grid-column: 1 / -1; }
  .photo-doors > :last-child figure { aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) {
  .photo-doors { grid-template-columns: 1fr; gap: 22px; }
  .photo-doors > :last-child { grid-column: auto; }
  .photo-doors > :last-child figure { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   26. Charcoal accents
   Charcoal is the third colour alongside cream/tan and brass: it carries the
   quiet structural work (rules, secondary buttons, quote marks) so the gold
   only ever has to do the shining.
   -------------------------------------------------------------------------- */
.btn-outline-dark {
  color: var(--ink);
  border-color: rgba(214, 174, 106, 0.42);
}
.btn-outline-dark:hover {
  background: var(--gold);
  color: #17110a;
  border-color: var(--gold);
}

/* Section eyebrows get a short charcoal tick under the brass label */
.section-head .eyebrow { position: relative; padding-bottom: 11px; }
.section-head .eyebrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 24px;
  height: 1px;
  background: var(--gold);
  opacity: 0.55;
}

/* Cards sit on cream with a charcoal hairline rather than a gold one */
.photo-door,
.door,
.icon-card,
.testimonial-card,
.form-card {
  border-color: rgba(214, 174, 106, 0.18);
}
.photo-door:hover,
.photo-door:focus-visible { border-color: rgba(214, 174, 106, 0.45); }

/* The pillar strip reads as a tan shelf between the wall and the cream page */
.pillars {
  background: linear-gradient(var(--cream-soft), var(--cream-soft));
  border-top: 1px solid var(--line);
}

/* Quote marks in charcoal keep the testimonials from going all-gold */
.testimonial-card .quote { color: var(--text); }
.testimonial-name { color: var(--charcoal); }

/* --------------------------------------------------------------------------
   27. Logo plate hero (home)
   The plate runs edge to edge. Its own ratio is 1320:996 (1.325), so the band
   height is clamped at or below 100vw / 1.325 — that guarantees the container
   is never taller-than-wide relative to the artwork, which means object-fit
   cover can only ever crop vertically, into the empty rust above and below the
   mark. A horizontal crop would cut the wing tips, and never happens.
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hero--plate {
  position: relative;
  width: 100%;
  height: min(calc(100vw / 1.325), 78vh);
  min-height: 240px;
  padding: 0;
  overflow: hidden;
  background: #0b0906;
  background-image: none;
  border-bottom: none;
}
/* the plate carries its own vignette — the section-level one would double it */
.hero--plate::after { content: none; }

.hero-plate {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 47%;   /* the mark sits a touch above centre */
}

/* Values line and CTA sit below the plate on the same near-black ground */
.hero-tail {
  background: #0b0906;
  text-align: center;
  padding: clamp(26px, 4vw, 48px) 24px clamp(34px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
}
.hero-tail .hero-values { margin-top: 0; }
.hero-tail .hero-cta { margin-top: clamp(20px, 3vw, 34px); }

@media (max-width: 620px) {
  .hero--plate { height: calc(100vw / 1.325); }
}

/* --------------------------------------------------------------------------
   28. Rachelle's story (WE.Are.DREAMERS.)
   A founder letter, so it gets letter typography: one readable measure, real
   paragraph rhythm, and a crescendo at the end rather than a wall of text.
   -------------------------------------------------------------------------- */
.story-byline {
  margin: 12px auto 0;
  max-width: 34em;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* Opening block keeps the photo-beside-copy layout */
.story-long .story-open::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.6rem;
  line-height: 0.82;
  font-weight: 700;
  color: var(--gold-deep);
  padding: 6px 12px 0 0;
}

/* Everything after the photo runs at a single reading measure */
.story-long {
  max-width: 66ch;
  margin: 0 auto;
}
.story-long p { font-size: 1.06rem; margin-bottom: 1.15em; }

.story-head {
  margin: clamp(38px, 5vw, 58px) 0 0.7em;
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--line);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* Her three-line promise, set as a list so it reads as a set, not a sentence */
.story-roles {
  list-style: none;
  margin: 0 0 1.4em;
  padding: 0 0 0 20px;
  border-left: 2px solid var(--gold);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.story-roles li {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--ink);
}

.story-long .story-promise {
  font-size: 1.14rem;
  color: var(--text);
  margin-bottom: 0.9em;
}

/* The closing creed — four beats, each on its own line */
.story-long .story-creed {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: clamp(30px, 4vw, 46px) 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  font-weight: 600;
  line-height: 1.24;
  color: var(--ink);
}
.story-long .story-creed strong { color: var(--gold-deep); font-weight: 700; }
.story-long .story-creed-last { margin-top: 4px; }

.story-long .story-flight {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.3vw, 1.95rem);
  line-height: 1.35;
  color: var(--gold-deep);
  margin-bottom: 1.6em;
}
.story-long .story-flight strong { color: var(--gold-light); font-weight: 700; }

.story-long .story-sign {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: clamp(20px, 3vw, 30px);
  border-top: 1px solid var(--line);
  font-size: 1rem;
  color: var(--text-soft);
}
.story-long .story-sign-name {
  font-family: var(--font-script);
  font-size: 2.1rem;
  line-height: 1.1;
  color: var(--gold-deep);
}
.story-long .story-sign-role {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .story-long .story-open::first-letter { font-size: 3rem; }
}

/* --------------------------------------------------------------------------
   29. "You. Belong. Here." — the home page's invitation
   Set in caps with wide tracking so it reads as the promise on the wall of the
   space rather than as a section label.
   -------------------------------------------------------------------------- */
.belong-title {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  margin-bottom: 0.2em;
}
.belong-lede {
  margin: 0;
  font-family: var(--font-brush);
  font-size: clamp(1.15rem, 2.6vw, 1.55rem);
  color: var(--gold-deep);
}
.section-head .belong-lede { margin-top: 6px; }

/* --------------------------------------------------------------------------
   30. Team grids (WE.Are.DREAMERS.)
   Mentor Team and Industry Team. Cards are placeholders until real names and
   photos land; the grid reflows for however many there end up being.
   -------------------------------------------------------------------------- */
.team-section {
  margin-top: clamp(56px, 7vw, 92px);
  padding-top: clamp(40px, 5vw, 62px);
  border-top: 1px solid var(--line);
}
.team-section .section-head { margin-bottom: clamp(30px, 4vw, 44px); }

.team-title {
  font-size: clamp(1.55rem, 3.4vw, 2.15rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px;
}
.team-grid > * { min-width: 0; }

.team-card {
  background: var(--cream-soft);
  border: 1px solid rgba(214, 174, 106, 0.18);
  border-radius: var(--radius);
  padding: 20px 20px 24px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.team-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255, 244, 219, 0.03);
  color: var(--text-soft);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
img.team-photo {
  display: block;
  border: 0;
  object-fit: cover;
  background: none;
}

.team-name { margin: 0; font-size: 1.2rem; }
.team-role {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.team-bio { margin: 8px 0 0; font-size: 0.95rem; }

/* Decoration note under the venue specs — what's included vs. what costs extra */
.decor-note {
  margin: 14px 0 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-soft);
}

/* Full-width room shot on Rent Our Space — the empty room, at scale */
.room-shot { margin: 0; }
.room-shot img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.room-shot figcaption {
  margin-top: 14px;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  color: var(--gold-deep);
}

/* "Not ready for the full program?" — the monthly, open-to-everyone alternative
   to the 12-week enrollment, sitting under the term cards. */
.enroll-note {
  max-width: 720px;
  margin: clamp(40px, 5vw, 62px) auto 0;
  padding: clamp(26px, 3.5vw, 38px) clamp(24px, 4vw, 40px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255, 244, 219, 0.04);
  text-align: center;
}
.enroll-note h3 { margin-bottom: 0.5em; color: var(--gold-deep); }
.enroll-note p { margin-bottom: 0; }
.enroll-note strong { color: var(--ink); font-weight: 600; }

/* Founder photo above the letter on the About page */
.founder-shot { margin: 0 0 clamp(34px, 5vw, 54px); }
.founder-shot img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* The letter sits on the dark band, so its rules and emphasis need the
   on-dark inks rather than the page ones. */
.section--dark .story-long p { color: var(--on-dark-soft); }
.section--dark .story-long .story-promise,
.section--dark .story-long .story-creed { color: var(--on-dark); }
.section--dark .story-long .story-creed strong,
.section--dark .story-long .story-sign-name { color: var(--gold-light); }
.section--dark .story-long .story-open::first-letter { color: var(--gold-light); }
.section--dark .story-long .story-sign { border-top-color: var(--line-dark); }

/* Two enrollment terms rather than three — keep the pair centred and from
   stretching to full container width. */
.terms-grid { max-width: 800px; margin: 0 auto; }
@media (max-width: 620px) { .terms-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   28. WE.Are.DREAMERS. — Choose Your Tier (compact comparison table)
   -------------------------------------------------------------------------- */
#tiers { scroll-margin-top: 84px; }
.tiers-intro { max-width: 720px; margin: 0 auto; font-size: 1.02rem; line-height: 1.65; }

.tiers { max-width: 980px; margin: 0 auto; }
.tiers-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--ink-panel);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}
.tier-table {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.92rem;
  color: var(--text);
}
.tier-table th, .tier-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  vertical-align: middle;
}
.tier-table tbody th[scope="row"] {
  text-align: left;
  font-weight: 500;
  color: var(--text);
  width: 38%;
}
.tier-table thead th { border-bottom: 1px solid var(--line-strong); vertical-align: bottom; }
.tier-table td.is-featured, .tier-table th.is-featured { background: rgba(214,174,106,0.07); }
.tier-table tbody tr:last-child th, .tier-table tbody tr:last-child td { border-bottom: 0; }

.tier-corner { text-align: left !important; }
.tier-corner span {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.tier-head { padding: 18px 12px 16px !important; min-width: 150px; }
.tier-head.is-featured { box-shadow: inset 0 3px 0 var(--gold); }
.tier-badge {
  display: block;
  margin-bottom: 8px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.tier-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.tier-price {
  display: block;
  margin: 6px 0 6px;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1;
}
.tier-price em { font-style: normal; font-size: 0.8rem; font-family: var(--font-body); color: var(--text-soft); margin-left: 3px; }
.tier-spots {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  white-space: nowrap;
}
.tier-spots.is-low { color: var(--gold-light); border-color: var(--gold); }
.tier-spots.is-soldout { color: #e8b4a0; border-color: rgba(232,180,160,0.5); }
.tier-btn { margin: 0; }
.tier-btn.is-soldout { background: transparent; color: var(--text-soft); border-color: var(--line); cursor: not-allowed; }

.tier-group th {
  text-align: left !important;
  padding: 10px 14px 6px !important;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--ink-panel-2);
}
.tier-every td { text-align: left; padding-top: 8px; padding-bottom: 10px; }
.tier-every ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.tier-every li { position: relative; padding-left: 16px; font-size: 0.86rem; color: var(--text); }
.tier-every li::before { content: "\2713"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }

.tier-yes { color: var(--gold-light); font-weight: 700; font-size: 1.05rem; }
.tier-no { color: rgba(205,192,164,0.35); }
.tier-val { font-weight: 600; color: var(--ink); font-size: 0.86rem; white-space: nowrap; }

.tier-footnote { max-width: 720px; margin: 16px auto 0; text-align: center; font-size: 0.9rem; color: var(--text-soft); }
.tier-master {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 820px;
  margin: 22px auto 0;
  padding: 18px 22px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--cream-soft);
}
.tier-master h4 { margin: 0 0 4px; font-size: 1.05rem; }
.tier-master p { margin: 0; font-size: 0.92rem; }
.tier-master-price { flex: 0 0 auto; text-align: center; padding: 10px 18px; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.tier-master-price strong { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--gold-light); line-height: 1; }
.tier-master-price span { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); }

#tiers .enroll-note { margin-top: 34px; }

/* Phones: the table becomes one card per tier */
.tier-cards { display: none; }
.tier-card {
  padding: 22px 20px 20px;
  margin-bottom: 14px;
  text-align: center;
  background: var(--ink-panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.tier-card.is-featured { box-shadow: inset 0 3px 0 var(--gold), 0 14px 36px rgba(0,0,0,0.45); background: #120e09; }
.tier-card .tier-btn { max-width: 260px; margin: 0 auto; }
.tier-card-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  text-align: left;
}
.tier-card-list li { position: relative; padding: 5px 0 5px 22px; font-size: 0.92rem; color: var(--text); }
.tier-card-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--gold-light); font-weight: 700; }
.tier-card-list li span { float: right; font-weight: 600; color: var(--gold-light); font-size: 0.84rem; }
.tier-card-note { margin: 14px 0 0; font-size: 0.86rem; color: var(--text-soft); }
.tier-every-card {
  padding: 16px 18px;
  margin-bottom: 14px;
  background: var(--ink-panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.tier-every-card h4 { margin: 0 0 8px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.tier-every-card ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 16px; }
.tier-every-card li { position: relative; padding: 2px 0 2px 16px; font-size: 0.84rem; color: var(--text); break-inside: avoid; }
.tier-every-card li::before { content: "\2713"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }

@media (max-width: 760px) {
  .tiers-scroll { display: none; }
  .tier-cards { display: block; }
  .tier-master { flex-direction: column; text-align: center; }
}

/* --------------------------------------------------------------------------
   29. Master Classes page
   -------------------------------------------------------------------------- */
.master-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; }
.master-grid > .class-card { flex: 0 1 380px; }
.master-grid > .note { flex: 1 1 100%; }
.master-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 920px;
  margin: 0 auto;
}
.master-fact {
  padding: 24px 20px;
  text-align: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(214,174,106,0.05);
}
.master-fact-num {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1.1;
  margin-bottom: 8px;
}
.master-fact-label { display: block; font-size: 0.98rem; color: var(--text); line-height: 1.5; }
@media (max-width: 760px) { .master-facts { grid-template-columns: 1fr; } }

/* Nine menu items: tighten the spacing on mid-size laptops so the menu fits
   before it collapses into the hamburger at 1259px */
@media (max-width: 1460px) and (min-width: 1260px) {
  .nav-links { gap: 11px; }
  .nav-links a { letter-spacing: 0.06em; }
  .site-header .header-inner { gap: 18px; }
}